+ )}`;
+ const subagentBlock = "";
+ assert.match(shell, /runningSubagents=\{activeSessionFamily \? getRunningSubagents\(activeSessionFamily\.subagents, runningSessionIds\) : \[\]\}/);
+ assert.ok(chat.includes(mainPhase), "The main phase condition, markup and pulse stay unchanged in ChatWindow");
+ assert.ok(chat.includes(command), "The command condition, markup and pulse stay unchanged in ChatWindow");
+ assert.ok(chat.indexOf(mainPhase) < chat.indexOf(subagentBlock));
+ assert.ok(chat.indexOf(subagentBlock) < chat.indexOf(command));
+ assert.doesNotMatch(component, /phaseLabel|commandRunning|agentRunning|hasStreamingContent|pulse_1/);
+ assert.doesNotMatch(chat, /ChatActivityStatus/);
+});
diff --git a/components/RunningSubagentsStatus.tsx b/components/RunningSubagentsStatus.tsx
new file mode 100644
index 0000000000..90b71e6402
--- /dev/null
+++ b/components/RunningSubagentsStatus.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { useI18n } from "@/hooks/useI18n";
+import type { SessionInfo } from "@/lib/types";
+
+interface Props {
+ runningSubagents?: readonly SessionInfo[];
+}
+
+/** An independent chat-tail block; never owns the main agent's phase or command status. */
+export function RunningSubagentsStatus({ runningSubagents = [] }: Props) {
+ const { t, locale } = useI18n();
+ if (runningSubagents.length === 0) return null;
+
+ const descriptions = runningSubagents.map((session) => (
+ session.relation?.kind === "subagent"
+ ? session.relation.description.trim() || session.relation.profile
+ : session.id
+ )).join(locale === "en" ? ", " : "、");
+
+ return (
+
+ {/* Native SVG: its three blocks light up in sequence without rotating the silhouette. */}
+
+
+
+
+
+ {t(runningSubagents.length === 1 ? "chat.runningSubagent" : "chat.runningSubagents", {
+ count: runningSubagents.length, descriptions,
+ })}
+
+
+ );
+}
diff --git a/docs/agents/subagents.md b/docs/agents/subagents.md
index bf3f1d4902..75ace53616 100644
--- a/docs/agents/subagents.md
+++ b/docs/agents/subagents.md
@@ -25,6 +25,10 @@
- Each row of the agent switcher (main agent and every subagent) shows its active time, total tokens and cost, with the stats popover's breakdown in its tooltip; the header shows their sum. `POST /api/sessions/stats` reads each id as `GET /api/sessions/[id]` does (a live wrapper's entries, else the cached file) and counts like the popover (`computeSessionStats()`, `computeSessionTotalActiveMs()`), never touching an `/api/agent/` route. A summary is kept per SessionManager until its entry count or last entry changes, since the switcher polls every 3 s on a visible page while any agent in the family runs, and reads once more when a run starts or ends. The toolbar's numbers are the main session's alone; the switcher's sum is the only place subagent spend adds up.
- The top bar's Agents badge counts the family's subagents, and while any of them runs it counts only those, accent-tinted and ringed by a spinner (`getAgentsBadge()`, `lib/session-family.ts`); the button's title and label say how many run. Running means listed by the sidebar's running poll, as in the switcher's header, so the badge adds no request of its own.
+## Chat-tail running status
+- `RunningSubagentsStatus` only shows the current family’s running subagent count and dispatch descriptions in parentheses in its own block below the main phase label. The original main phase and shell-command JSX remains unchanged in `ChatWindow`, including its conditions, styles and pulse; the new component takes no main-agent or command status. A decorative 1rem native SVG (`public/icons/pi-blocks-running.svg`) sits before only the subagent line. Its original three solid-colour blocks stay fixed while opacity crossfades clockwise (coral → yellow → blue), using a 450 ms `ease-in-out` cycle with 150 ms phase offsets. Each block fades from full opacity to 0.3 over the first third, stays dim for the middle third, then fades back to full opacity, matching the selected soft-fade preview without a jump at the cycle boundary; no JavaScript timer, raster conversion or whole-icon rotation. A tight viewBox fills the 1rem box, which follows the root font size (14 px at the default). A `` source selects `public/icons/pi-blocks-still.svg` under `prefers-reduced-motion`, showing all three blocks at full opacity; Chromium did not apply the embedded SVG's media query when loaded as an image, so the image source must actually be static. The running SVG also keeps its media query for direct document viewing. The line stays visible while the main agent streams or is idle, and disappears with its icon when no subagents run. Long descriptions wrap beside the non-shrinking icon rather than requiring a hover or opening Agents.
+- `AppShell` passes `getRunningSubagents()` from the existing family and running-id poll; the count and descriptions use the same list as the Agents badge, including nested descendants, with no new request. Persisted status can lag, so running ids, not `relation.status`, decide membership. Completed, failed, aborted and interrupted runs drop out on the next poll; queued/MCP preparation is not a running wrapper yet. Blank descriptions fall back to the profile.
+
## Viewer tab
- The `Agent` card's button opens the child as a read-only tab in the right panel (`components/SubagentViewer.tsx`, tab id `agent:`), beside file and terminal tabs. The agent switcher above the chat opens a child as the main chat from its row; the row's side-panel button toggles this tab (accent-coloured and filled while the open panel has it, active or not; a click then closes the tab, and the panel with its last tab) and leaves the switcher open, except on phones, where the panel covers the chat. The tab reads only `GET /api/sessions/[id]` and `GET /api/sessions/[id]/context` (a running wrapper's in-memory entries, else the file), never an `/api/agent/` route, so viewing cannot start, reopen or keep alive an `AgentSession`. While the sidebar's running poll lists the child, it polls the newest page every 2 s on a visible page, one request at a time; only the active tab is mounted, so a hidden or closed tab polls nothing. It shows finished entries only, not the streaming message.
- A poll is folded into the pages already loaded (`mergeTailPage()`, `components/subagent-viewer-state.ts`): if the newest page overlaps them, the older pages stay and shown messages keep their objects; otherwise it replaces them. "Load more" asks `before` the oldest entry and prepends only while that is still the oldest (`prependOlderPage()`), so a page is never prepended twice or over a gap. Session info is refetched when the run starts or ends, so the persisted status replaces the live one. Subagent tabs are not persisted and are dropped on every project switch (`changeFileWorkspace()`), while the file tabs are parked; an active subagent tab hands the panel to the restored project's file tabs.
diff --git a/e2e/README.md b/e2e/README.md
index 60e63fa74c..936ac02870 100644
--- a/e2e/README.md
+++ b/e2e/README.md
@@ -54,6 +54,7 @@ Coverage:
session, directory, draft, files and group expansion; + still opens in the
same tab, and no session is created, copied, prompted or stopped. An
unavailable directory shows the validation error instead of another session.
+- Running subagents appear at the chat tail without opening Agents, even with an idle parent. Synthetic running-id polls check nested descendants, matching counts and descriptions, removal through zero, long-description wrapping at desktop/phone widths, and both Chinese locales without dispatching a model.
- The model picker, with a synthetic catalog: on a phone, a simulated keyboard
(visual viewport shrink, pan, a late height with no event) keeps the same
filter focused and the list in the visible viewport. Native phone keyboards
diff --git a/e2e/pi-blocks-icon.mjs b/e2e/pi-blocks-icon.mjs
new file mode 100644
index 0000000000..96798a8f96
--- /dev/null
+++ b/e2e/pi-blocks-icon.mjs
@@ -0,0 +1,66 @@
+import assert from "node:assert/strict";
+
+/** Inspect the SVG document's real CSS animation, and the image's media-selected source. */
+export async function checkPiBlocksIcon(page, icon) {
+ assert.equal(await icon.count(), 1);
+ assert.equal(await icon.getAttribute("aria-hidden"), "true");
+ assert.equal(await icon.getAttribute("alt"), "");
+ await icon.evaluate((element) => element.decode());
+ const size = await icon.evaluate(() => getComputedStyle(document.documentElement).fontSize);
+ assert.deepEqual(await icon.evaluate((element) => [
+ getComputedStyle(element).width, getComputedStyle(element).height,
+ element.naturalWidth, element.naturalHeight,
+ ]), [size, size, 16, 16], "The rendered icon follows its 1rem box, not its intrinsic SVG size");
+ const source = await icon.evaluate((element) => element.currentSrc);
+ assert.ok(source.endsWith("/icons/pi-blocks-running.svg"));
+
+ const svgPage = await page.context().newPage();
+ try {
+ const response = await svgPage.goto(source, { waitUntil: "load" });
+ assert.ok(response?.ok(), "The running SVG asset loads successfully");
+ const phases = await svgPage.locator("path").evaluateAll((paths) => {
+ for (const path of paths) {
+ const timing = path.getAnimations()[0].effect.getTiming();
+ if (timing.duration !== 450 || getComputedStyle(path).animationTimingFunction !== "ease-in-out") {
+ throw new Error("The icon must use the selected 450ms soft fade");
+ }
+ }
+ return [0, 75, 150, 225, 300, 375, 450].map((time) => {
+ for (const path of paths) {
+ const animation = path.getAnimations()[0];
+ animation.pause();
+ animation.currentTime = time;
+ }
+ return paths.map((path) => Number(getComputedStyle(path).opacity));
+ });
+ });
+ assert.deepEqual(phases.map((values) => values.map((value) => Number(value.toFixed(4)))), [
+ [1, .3, .3], [.65, .3, .65], [.3, .3, 1], [.3, .65, .65],
+ [.3, 1, .3], [.65, .65, .3], [1, .3, .3],
+ ], "Blocks crossfade clockwise without a jump: coral, yellow, blue, then repeat");
+ } finally {
+ await svgPage.close();
+ }
+
+ await page.emulateMedia({ reducedMotion: "reduce" });
+ await page.waitForFunction((element) => element.currentSrc.endsWith("/icons/pi-blocks-still.svg"),
+ await icon.elementHandle());
+ await icon.evaluate((element) => element.decode());
+ assert.deepEqual(await icon.evaluate((element) => [
+ getComputedStyle(element).width, getComputedStyle(element).height,
+ ]), [size, size], "Reduced motion preserves the relative icon size");
+ const stillSource = await icon.evaluate((element) => element.currentSrc);
+ assert.ok(stillSource.endsWith("/icons/pi-blocks-still.svg"));
+ const stillResponse = await page.request.get(stillSource);
+ assert.ok(stillResponse.ok(), "The reduced-motion asset loads successfully");
+ const still = await stillResponse.text();
+ assert.equal((still.match(/ element.currentSrc.endsWith("/icons/pi-blocks-running.svg"),
+ await icon.elementHandle());
+ await icon.evaluate((element) => element.decode());
+ const resumedSource = await icon.evaluate((element) => element.currentSrc);
+ assert.ok(resumedSource.endsWith("/icons/pi-blocks-running.svg"));
+}
diff --git a/e2e/run.mjs b/e2e/run.mjs
index a6445d84dd..629f6318fe 100644
--- a/e2e/run.mjs
+++ b/e2e/run.mjs
@@ -16,6 +16,7 @@ import { checkCodeBackground } from "./code-background.mjs";
import { checkModelDiscovery } from "./model-discovery.mjs";
import { checkModelContext } from "./model-context.mjs";
import { checkModelSelector } from "./model-selector.mjs";
+import { checkSubagentStatus } from "./subagent-status.mjs";
import { checkFilesPlacement, showSidebarSessions } from "./sidebar.mjs";
import { checkSessionNavigation } from "./session-navigation.mjs";
import { checkProjectNavigation, createProjectNavigationFixtures } from "./project-navigation.mjs";
@@ -514,6 +515,7 @@ try {
await page.locator(".markdown-code-block pre").waitFor();
await checkCodeBackground(page);
await checkModelSelector(page, { base, project, artifacts });
+ await checkSubagentStatus(page, { base, sessionId: RICH, artifacts, width: viewport.width });
assert.deepEqual(errors, [], `Browser errors at width ${viewport.width}`);
console.log(`PASS: ${viewport.width}px browser pagination, branch, markdown, code, tool call, and compaction navigation`);
await context.tracing.stop();
diff --git a/e2e/subagent-status.mjs b/e2e/subagent-status.mjs
new file mode 100644
index 0000000000..835e4a68c0
--- /dev/null
+++ b/e2e/subagent-status.mjs
@@ -0,0 +1,78 @@
+import assert from "node:assert/strict";
+import { join } from "node:path";
+import { checkPiBlocksIcon } from "./pi-blocks-icon.mjs";
+
+/** Exercise real chat rendering/polling with synthetic run ids, never dispatch a model. */
+export async function checkSubagentStatus(page, { base, sessionId, artifacts, width }) {
+ const listRoute = (url) => url.pathname === "/api/sessions";
+ const runningRoute = (url) => url.pathname === "/api/agent/running";
+ const descriptions = ["Check configuration", "Read logs", `Verify ${"long-task-".repeat(50)}`];
+ const ids = ["e2e-child-config", "e2e-child-logs", "e2e-child-nested"];
+ let running = [...ids];
+ await page.route(listRoute, async (route) => {
+ const response = await route.fetch();
+ const data = await response.json();
+ const main = data.sessions.find((session) => session.id === sessionId);
+ assert.ok(main);
+ data.sessions.push(...ids.map((id, index) => ({
+ ...main, id, name: undefined, path: `${main.cwd}/${id}.jsonl`, firstMessage: descriptions[index],
+ parentSessionId: index === 2 ? ids[0] : sessionId,
+ relation: {
+ kind: "subagent", parentSessionId: index === 2 ? ids[0] : sessionId,
+ profile: "explore", description: descriptions[index], status: "running",
+ },
+ })));
+ data.runningSessionIds = running;
+ await route.fulfill({ response, json: data });
+ });
+ await page.route(runningRoute, async (route) => {
+ const response = await route.fetch();
+ await route.fulfill({ response, json: { ...await response.json(), runningSessionIds: running } });
+ });
+ const status = page.getByRole("status").filter({ hasText: "subagent" });
+ try {
+ await page.emulateMedia({ reducedMotion: "no-preference" });
+ await page.goto(`${base}/?session=${sessionId}`, { waitUntil: "domcontentloaded" });
+ await status.filter({ hasText: "3 subagents running" }).waitFor();
+ assert.equal(await status.textContent(), `3 subagents running (${descriptions.join(", ")})`);
+ const spinner = status.locator('img[src="/icons/pi-blocks-running.svg"]');
+ await checkPiBlocksIcon(page, spinner);
+ // The parent is idle and Agents was never opened; a nested child still counts.
+ assert.equal(await page.getByText("Waiting for model...", { exact: true }).count(), 0);
+ await status.scrollIntoViewIfNeeded();
+ const bounds = await status.boundingBox();
+ assert.ok(bounds && bounds.x >= 0 && bounds.x + bounds.width <= width,
+ "Long descriptions wrap within the chat on desktop and phone");
+ assert.ok(await status.evaluate((element) => element.scrollWidth <= element.clientWidth + 1));
+ assert.equal(await spinner.evaluate((element) => getComputedStyle(element).width),
+ await spinner.evaluate(() => getComputedStyle(document.documentElement).fontSize),
+ "The 1rem icon does not shrink beside long descriptions");
+ await page.screenshot({ path: join(artifacts, `subagent-status-${width}.png`) });
+
+ running = ids.slice(1);
+ await status.filter({ hasText: "2 subagents running" }).waitFor();
+ assert.equal(await status.textContent(), `2 subagents running (${descriptions.slice(1).join(", ")})`);
+ running = [ids[2]];
+ await status.filter({ hasText: "1 subagent running" }).waitFor();
+ assert.equal(await status.textContent(), `1 subagent running (${descriptions[2]})`);
+ running = [];
+ await status.waitFor({ state: "detached" });
+
+ running = [ids[0], ids[1]];
+ for (const [locale, text] of [
+ ["zh-CN", "有 2 个子代理正在运行（Check configuration、Read logs）"],
+ ["zh-TW", "有 2 個子代理正在執行（Check configuration、Read logs）"],
+ ]) {
+ await page.evaluate((value) => localStorage.setItem("pi-locale", value), locale);
+ await page.reload({ waitUntil: "domcontentloaded" });
+ await page.getByRole("status").filter({ hasText: text }).waitFor();
+ }
+ console.log(`PASS: ${width}px running subagents, three-block chase, reduced motion, poll removal, wrapping and Chinese locales`);
+ } finally {
+ await page.unroute(listRoute);
+ await page.unroute(runningRoute);
+ await page.emulateMedia({ reducedMotion: null });
+ await page.evaluate(() => localStorage.setItem("pi-locale", "en"));
+ await page.goto(`${base}/?session=${sessionId}`, { waitUntil: "domcontentloaded" });
+ }
+}
diff --git a/lib/i18n/messages/en.ts b/lib/i18n/messages/en.ts
index cd3d53ef39..912717f20d 100644
--- a/lib/i18n/messages/en.ts
+++ b/lib/i18n/messages/en.ts
@@ -492,6 +492,8 @@ export const enLocale: LocalePlugin = {
"chat.runningTools": "Running {names}...",
"chat.runningToolsMore": "Running {names} (+{count})...",
"chat.waitingModel": "Waiting for model...",
+ "chat.runningSubagent": "{count} subagent running ({descriptions})",
+ "chat.runningSubagents": "{count} subagents running ({descriptions})",
"chat.runningCommand": "Running command...",
"chat.thinking": "Thinking...",
"chat.processDetails": "Process details",
diff --git a/lib/i18n/messages/zh-CN.ts b/lib/i18n/messages/zh-CN.ts
index bb1c64868e..9f67d3e678 100644
--- a/lib/i18n/messages/zh-CN.ts
+++ b/lib/i18n/messages/zh-CN.ts
@@ -492,6 +492,8 @@ export const zhCNLocale: LocalePlugin = {
"chat.runningTools": "正在运行 {names}...",
"chat.runningToolsMore": "正在运行 {names}（另有 {count} 个）...",
"chat.waitingModel": "正在等待模型...",
+ "chat.runningSubagent": "有 {count} 个子代理正在运行（{descriptions}）",
+ "chat.runningSubagents": "有 {count} 个子代理正在运行（{descriptions}）",
"chat.runningCommand": "正在运行命令...",
"chat.thinking": "正在思考...",
"chat.processDetails": "处理详情",
diff --git a/lib/i18n/messages/zh-TW.ts b/lib/i18n/messages/zh-TW.ts
index fe29c7f3bc..fbb9d994b3 100644
--- a/lib/i18n/messages/zh-TW.ts
+++ b/lib/i18n/messages/zh-TW.ts
@@ -492,6 +492,8 @@ export const zhTWLocale: LocalePlugin = {
"chat.runningTools": "正在執行 {names}...",
"chat.runningToolsMore": "正在執行 {names}（另有 {count} 個）...",
"chat.waitingModel": "正在等待模型...",
+ "chat.runningSubagent": "有 {count} 個子代理正在執行（{descriptions}）",
+ "chat.runningSubagents": "有 {count} 個子代理正在執行（{descriptions}）",
"chat.runningCommand": "正在執行命令...",
"chat.thinking": "正在思考...",
"chat.processDetails": "處理詳細資料",
diff --git a/lib/session-family.test.mjs b/lib/session-family.test.mjs
index dbfacb6a7a..332a81aa97 100644
--- a/lib/session-family.test.mjs
+++ b/lib/session-family.test.mjs
@@ -2,7 +2,7 @@ import assert from "node:assert/strict";
import test from "node:test";
import { createJiti } from "jiti";
-const { getAgentsBadge, getSessionFamily, listSessionFamilies } =await createJiti(import.meta.url).import("./session-family.ts");
+const { getAgentsBadge, getRunningSubagents, getSessionFamily, listSessionFamilies } =await createJiti(import.meta.url).import("./session-family.ts");
function session(id, modified, relation) {
return {
@@ -62,6 +62,21 @@ test("a fork is a family of its own, and its subagents fold into it, not into it
assert.equal(getSessionFamily([fork, origin, forkAgent], "fork-agent")?.root.id, "fork");
});
+test("the running list includes nested descendants but excludes the main agent and other families", () => {
+ const main = session("main", "2026-01-01T00:00:00.000Z");
+ const child = session("child", main.modified, {
+ kind: "subagent", parentSessionId: "main", profile: "explore", description: "Explore", status: "running",
+ });
+ const nested = session("nested", main.modified, {
+ kind: "subagent", parentSessionId: "child", profile: "review", description: "Review", status: "running",
+ });
+ const family = getSessionFamily([main, child, nested], "main");
+ const running = new Set(["main", "nested", "elsewhere"]);
+ assert.deepEqual(getRunningSubagents(family.subagents, running), [nested]);
+ assert.equal(getAgentsBadge(family.subagents, running).count, getRunningSubagents(family.subagents, running).length);
+ assert.deepEqual(getRunningSubagents(family.subagents, new Set()), []);
+});
+
test("the Agents badge counts running subagents while any runs, else all of them", () => {
const subagents = ["a", "b", "c"].map((id) => session(id, "2026-01-01T00:00:00.000Z", {
kind: "subagent", parentSessionId: "main", profile: "explore", description: id, status: "completed",
diff --git a/lib/session-family.ts b/lib/session-family.ts
index 87b57cb332..d9d063add6 100644
--- a/lib/session-family.ts
+++ b/lib/session-family.ts
@@ -80,6 +80,13 @@ export function getSessionFamily(
}
/** Subagents of a family that the sidebar's running poll lists. */
+export function getRunningSubagents(
+ subagents: readonly SessionInfo[],
+ runningSessionIds: ReadonlySet,
+): SessionInfo[] {
+ return subagents.filter((session) => runningSessionIds.has(session.id));
+}
+
export function countRunningSubagents(
subagents: readonly SessionInfo[],
runningSessionIds: ReadonlySet,
diff --git a/public/icons/pi-blocks-running.svg b/public/icons/pi-blocks-running.svg
new file mode 100644
index 0000000000..84ae9d8a5a
--- /dev/null
+++ b/public/icons/pi-blocks-running.svg
@@ -0,0 +1,20 @@
+
diff --git a/public/icons/pi-blocks-still.svg b/public/icons/pi-blocks-still.svg
new file mode 100644
index 0000000000..047fa3e2c4
--- /dev/null
+++ b/public/icons/pi-blocks-still.svg
@@ -0,0 +1,5 @@
+
+ 
+