feat(web): the + menu marks a live Agents surface with the pulsing dot

apps/web/src/components/chat/RightPanelTabStrip.browser.tsx

@@ -1,6 +1,7 @@
 import "../../index.css";
 
 import { afterEach, describe, expect, it, vi } from "vite-plus/test";
+import { page } from "vite-plus/test/browser";
 import { render } from "vitest-browser-react";
 
 import { RightPanelTabStrip } from "./RightPanelTabStrip";
@@ -163,3 +164,41 @@ describe("RightPanelTabStrip drag reorder", () => {
     }
   });
 });
+
+describe("RightPanelTabStrip + menu", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("draws a live tab's row with the live node instead of its icon", async () => {
+    const mounted = await render(
+      <div style={{ width: 480 }}>
+        <RightPanelTabStrip
+          openTabs={["sourceControl"]}
+          availableTabs={["sourceControl", "diff", "pullRequest", "agents"]}
+          activeTab="sourceControl"
+          liveTabs={["agents"]}
+          onSelectTab={vi.fn()}
+          onCloseTab={vi.fn()}
+          onReorderTab={vi.fn()}
+        />
+      </div>,
+    );
+
+    try {
+      await page.getByRole("button", { name: "Open panel" }).click();
+
+      const agents = page.getByRole("menuitem", { name: "Agents" });
+      await expect.element(agents).toHaveAttribute("data-right-panel-menu-tab-live", "true");
+      expect(agents.element().querySelector(".thread-halo")).not.toBeNull();
+      expect(agents.element().querySelector("svg")).toBeNull();
+
+      const diff = page.getByRole("menuitem", { name: "Diff" });
+      await expect.element(diff).not.toHaveAttribute("data-right-panel-menu-tab-live");
+      expect(diff.element().querySelector(".thread-halo")).toBeNull();
+      expect(diff.element().querySelector("svg")).not.toBeNull();
+    } finally {
+      await mounted.unmount();
+    }
+  });
+});

apps/web/src/components/chat/RightPanelTabStrip.tsx

@@ -9,7 +9,8 @@
  * because there is a fixed set of them and each can only be open once. A
  * surface already in the strip stays listed and dimmed: choosing it focuses the
  * tab it already has. Empty surfaces stay clickable too, but use the same quiet
- * treatment as their rows in the panel launcher.
+ * treatment as their rows in the panel launcher. A surface with live work (agents
+ * still running) swaps its icon for the same pulsing node its tab would show.
  *
  * The row shares its width with the Windows window-controls overlay, which
  * reserves ~150px of it, so the strip measures itself and drops every label
@@ -666,7 +667,7 @@
     };
     // The measuring row is rebuilt when the open set changes, so its observed
     // box is the only thing that has to be re-subscribed.
   }, [tabsKey]);
 
   return { mode, rowRef, measureRef, actionsRef, trailingRef };
 }
@@ -726,7 +727,7 @@
     } else if (end > viewport.scrollLeft + viewport.clientWidth) {
       viewport.scrollLeft = end - viewport.clientWidth;
     }
   }, [activeTab, openTabs, mode]);
 
   return (
     <div
@@ -853,20 +854,35 @@
                   const surface = RIGHT_PANEL_SURFACES[tab];
                   const alreadyOpen = openTabs.includes(tab);
                   const empty = surfaceStates?.[tab]?.empty ?? false;
+                  const live = liveTabs?.includes(tab) ?? false;
                   const MenuIcon = RIGHT_PANEL_TAB_ICONS[tab];
                   return (
                     <MenuItem
                       key={tab}
                       data-right-panel-menu-tab={tab}
                       data-right-panel-menu-tab-open={alreadyOpen ? "true" : undefined}
                       data-right-panel-menu-tab-empty={empty ? "true" : undefined}
+                      data-right-panel-menu-tab-live={live ? "true" : undefined}
                       className={cn((alreadyOpen || empty) && "text-muted-foreground/60")}
                       onClick={() => onSelectTab(tab)}
                     >
-                      <MenuIcon
-                        aria-hidden="true"
-                        className={cn(empty ? "text-muted-foreground/45" : "text-muted-foreground")}
-                      />
+                      {live ? (
+                        // The same live node the open tab draws, sat in the box
+                        // the icon would otherwise fill so the labels stay aligned.
+                        <span
+                          aria-hidden="true"
+                          className="-mx-0.5 flex size-4.5 shrink-0 items-center justify-center sm:size-4"
+                        >
+                          <LiveNode className="size-1.5" />
+                        </span>
+                      ) : (
+                        <MenuIcon
+                          aria-hidden="true"
+                          className={cn(
+                            empty ? "text-muted-foreground/45" : "text-muted-foreground",
+                          )}
+                        />
+                      )}
                       {surface.label}
                     </MenuItem>
                   );