From a69eb78158879ed92c0fc5337e4a48053cf0a60a Mon Sep 17 00:00:00 2001
From: Sawyer <sawyer@dirtroad.dev>
Date: Tue, 29 Sep 2026 22:21:33 -0700
Subject: [PATCH] feat(web): one worker-status source drives the sidebar orbit
 and bench pill (CL-9569)

---
 apps/web/src/bench/bench-pill.tsx     | 12 ++++++--
 apps/web/src/pages/workbench-page.tsx |  6 ++--
 apps/web/src/worker-status.ts         | 44 +++++++++++++++++++++++++++
 3 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/src/worker-status.ts

diff --git a/apps/web/src/bench/bench-pill.tsx b/apps/web/src/bench/bench-pill.tsx
index b84232c15..cf3b70d58 100644
--- a/apps/web/src/bench/bench-pill.tsx
+++ b/apps/web/src/bench/bench-pill.tsx
@@ -1,5 +1,6 @@
 import { CaretDown } from "@/lib/icons";
 import { IdentityAvatar } from "@/chat/avatar";
+import type { WorkerStatus } from "../worker-status";
 
 /** Frosted pill centered over the thread: the bench's worker, its name and
  * live status. Toggles the bench drawer. */
@@ -12,7 +13,7 @@ export function BenchPill({
 }: {
   readonly benchName: string;
   readonly worker: { readonly id: string; readonly name: string } | undefined;
-  readonly status: string;
+  readonly status: WorkerStatus;
   readonly open: boolean;
   readonly onToggle: () => void;
 }) {
@@ -25,10 +26,15 @@ export function BenchPill({
       onClick={onToggle}
     >
       {worker === undefined ? null : (
-        <IdentityAvatar kind="agent" name={worker.name} principalId={worker.id} />
+        <IdentityAvatar
+          kind="agent"
+          name={worker.name}
+          principalId={worker.id}
+          status={status.tone}
+        />
       )}
       <b>{benchName}</b>
-      <span className="bench-pill-status">{status}</span>
+      <span className="bench-pill-status">{status.text}</span>
       <CaretDown size={14} aria-hidden="true" />
     </button>
   );
diff --git a/apps/web/src/pages/workbench-page.tsx b/apps/web/src/pages/workbench-page.tsx
index d3a493660..f4104d244 100644
--- a/apps/web/src/pages/workbench-page.tsx
+++ b/apps/web/src/pages/workbench-page.tsx
@@ -25,6 +25,7 @@ import {
 } from "@/chat/threads-api";
 import { BenchDrawer } from "../bench/bench-drawer";
 import { BenchPill } from "../bench/bench-pill";
+import { useWorkerStatus } from "../worker-status";
 import { InformationTab } from "../bench/information-tab";
 import { useBench } from "../bench-context";
 import { createFetchStockHub } from "../needs-converge";
@@ -172,6 +173,7 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
       agent.address === "" && agent.assetName !== undefined,
   );
   const startingAgent = releasedAgents[0];
+  const workerStatus = useWorkerStatus(workbenchTenantId, agents[0]?.id);
   // Only a live agent can be addressed, so only one can be mentioned.
   const mentionables = agents
     .filter((agent) => agent.address.includes("@"))
@@ -228,7 +230,7 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
           <BenchPill
             benchName={tenant.data?.name ?? "Workbench"}
             worker={agents[0]}
-            status={startingAgent === undefined ? "Live" : "Starting"}
+            status={workerStatus}
             open={drawerOpen}
             onToggle={() => setDrawerOpen((open) => !open)}
           />
@@ -302,7 +304,7 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
         <BenchDrawer
           open={drawerOpen}
           title={tenant.data?.name ?? "Workbench"}
-          subtitle={startingAgent === undefined ? "Live" : "Starting"}
+          subtitle={workerStatus.text}
           onClose={closeDrawer}
           tabs={{
             Information: (
diff --git a/apps/web/src/worker-status.ts b/apps/web/src/worker-status.ts
new file mode 100644
index 000000000..800a52b07
--- /dev/null
+++ b/apps/web/src/worker-status.ts
@@ -0,0 +1,44 @@
+// The one status source for a worker. The inbox stream (see
+// `subscribeToInbox`) writes into the participants and approvals caches this
+// reads; nothing here fetches on its own.
+
+import { useQuery } from "@tanstack/react-query";
+
+import type { AvatarStatus } from "@/chat/avatar";
+import { sameAddress, type WorkbenchParticipant } from "@/chat/threads-api";
+import { workbenchKeys } from "./chat-path";
+import { TenantApprovalsSchema, useAPIQuery } from "./api";
+import { pendingApprovalsPath } from "./pending-approvals";
+
+export type WorkerStatus = {
+  readonly tone: AvatarStatus;
+  readonly text: string;
+};
+
+// `working` has no stock signal: the inbox stream carries no turn events, and
+// a live agent's run stays `running` whether or not a turn is in flight.
+export function useWorkerStatus(
+  tenantId: string | null,
+  agentId: string | undefined,
+): WorkerStatus {
+  const participants = useQuery({
+    queryKey: workbenchKeys.participants(tenantId ?? ""),
+    queryFn: (): readonly WorkbenchParticipant[] => [],
+    enabled: false,
+  });
+  const approvals = useAPIQuery(
+    tenantId === null ? "" : pendingApprovalsPath(tenantId),
+    TenantApprovalsSchema,
+  );
+
+  const agent = participants.data?.find((p) => p.kind === "agent" && p.id === agentId);
+  if (agent === undefined) return { tone: "idle", text: "Live" };
+  if (agent.address === "") return { tone: "idle", text: "Starting" };
+
+  const needsYou =
+    approvals.kind === "ready" &&
+    approvals.data.data.some(
+      (row) => row.status === "pending" && sameAddress(row.agentAddress, agent.address),
+    );
+  return needsYou ? { tone: "ready", text: "Needs you" } : { tone: "idle", text: "Live" };
+}