fix(webapp): Investigate button wears the chat's magnifier; queue page orders Investigate before Watch

Author: kathiekiwi

apps/webapp/app/components/dashboard-agent/InvestigateButton.tsx

@@ -1,5 +1,5 @@
+import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 import { Button } from "~/components/primitives/Buttons";
-import { AgentIcon, AGENT_ICON_ACCENT_CLASS } from "./agent-identity";
 import { useDashboardAgent } from "./dashboardAgentLauncher";
 
 /**
@@ -9,9 +9,8 @@ import { useDashboardAgent } from "./dashboardAgentLauncher";
  * Renders nothing when the agent isn't available (no provider, or gated off) —
  * every entry point self-hides, so callers don't need their own gate.
  *
- * Icon and accent come from `agent-identity`, which the launcher and the
- * "Ask {agent}" menu item read too — so every agent surface is one recognisable
- * thing, and the character icon design is drawing lands on all of them at once.
+ * The magnifier matches the chat's investigate chip — like the Watch button's
+ * eye, the glyph names the action, not the agent.
  */
 export function InvestigateButton({
   prompt,
@@ -41,10 +40,9 @@ export function InvestigateButton({
     <Button
       type="button"
       variant={`${variant}/${size}`}
-      LeadingIcon={AgentIcon}
-      // A primary button is already accented, so the icon stays on its own
-      // foreground there; everywhere else it carries the agent's accent.
-      leadingIconClassName={variant === "primary" ? undefined : AGENT_ICON_ACCENT_CLASS}
+      LeadingIcon={MagnifyingGlassIcon}
+      // A primary button is already accented; everywhere else the glyph stays quiet.
+      leadingIconClassName={variant === "primary" ? undefined : "text-text-dimmed"}
       fullWidth={fullWidth}
       textAlignLeft={fullWidth}
       className={className}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues_.$queueParam/route.tsx

@@ -342,11 +342,6 @@ export default function Page() {
               maxPeriodDays={maxPeriodDays}
               shortcut={{ key: "d" }}
             />
-            {/* The universal `Watch…` entry, pre-filled with this queue's
-                recommendation: when it drains, or — when runs are already waiting
-                past the threshold this page tints at — when the wait crosses the
-                SLA. Same signal the Investigate button derives `degraded` from. */}
-            <WatchButton spec={queueWatchRecommendation(queue.name, { oldestWaitMs })} />
             <QueueOverrideConcurrencyButton
               queue={queue}
               environmentConcurrencyLimit={environmentConcurrencyLimit}
@@ -357,13 +352,18 @@ export default function Page() {
               variant="secondary/small"
               withQueueName
             />
-            {/* Hand a backed-up queue to the agent. Hidden when the agent isn't available. */}
+            {/* The agent pair, Investigate then Watch. Both self-hide without the
+                agent. Investigate: hand a backed-up queue over. Watch: the
+                universal entry, pre-filled with this queue's recommendation —
+                if runs start waiting past the SLA, or, when they already are
+                (the same signal `degraded` comes from), when the queue drains. */}
             {degraded ? (
               <InvestigateButton
                 prompt={queueBacklogPrompt(queue.name)}
                 tooltip="Ask why this queue is backed up"
               />
             ) : null}
+            <WatchButton spec={queueWatchRecommendation(queue.name, { oldestWaitMs })} />
           </div>
         </MetricsLayout.Filters>