feat(app): show a background shell's output from the pill

Author: kitlangton

packages/app/component-tests/activity-chips.spec.ts

@@ -1,7 +1,9 @@
 import { expect, story } from "../../stories/playwright/story"
 
 story("shows how long each background item has been running, ticking while open", async ({ mount, page }) => {
-  await page.clock.install({ time: new Date("2026-10-19T12:00:00Z") })
+  // Paused, so the story's items start at exactly this time.
+  await page.clock.install({ time: new Date("2026-10-19T11:59:59Z") })
+  await page.clock.pauseAt(new Date("2026-10-19T12:00:00Z"))
   await mount("session-activity-chips--subagents-and-shells")
 
   await page.locator('[data-slot="session-activity-chip"]').click()
@@ -15,3 +17,29 @@ story("shows how long each background item has been running, ticking while open"
   await expect(elapsed).toHaveText(["13s", "1m 06s", "1h 02m", "5m 42s"])
   expect(await page.locator('[data-slot="session-activity-panel"]').evaluate((node) => node.clientWidth)).toBe(width)
 })
+
+story("opens a background shell's output in the menu and returns focus on the way out", async ({ mount, page }) => {
+  await mount("session-activity-chips--subagents-and-shells")
+
+  const chip = page.locator('[data-slot="session-activity-chip"]')
+  const panel = page.locator('[data-slot="session-activity-panel"]')
+  await chip.click()
+  await panel.getByRole("menuitem", { name: /bun test --watch/ }).click()
+
+  // The story's shells print `$ <id>` and `Ready.`.
+  await expect(panel.locator('[data-slot="session-activity-shell-output"]')).toHaveText(/\$ shl_test\s+Ready\./)
+  await expect(panel.locator('[data-slot="session-activity-back"]')).toBeFocused()
+
+  await page.keyboard.press("Enter")
+  await expect(panel.getByRole("menuitem", { name: /bun test --watch/ })).toBeFocused()
+
+  await panel.getByRole("menuitem", { name: /bun test --watch/ }).click()
+  await expect(panel.locator('[data-slot="session-activity-back"]')).toBeFocused()
+  await page.keyboard.press("Escape")
+  await expect(panel).toBeHidden()
+  await expect(chip).toBeFocused()
+
+  // Closing forgets the shell, so the menu opens on the list again.
+  await chip.click()
+  await expect(panel).toHaveAttribute("data-view", "list")
+})

packages/app/src/runtime/i18n/en.ts

@@ -622,6 +622,14 @@ export const dict = {
   "session.activity.subagents.other": "{{count}} subagents",
   "session.activity.shells.one": "{{count}} shell",
   "session.activity.shells.other": "{{count}} shells",
+  "session.activity.shell.back": "Back to background work",
+  "session.activity.shell.stop": "Stop",
+  "session.activity.shell.stopping": "Stopping…",
+  "session.activity.shell.exited": "Exited",
+  "session.activity.shell.exitCode": "Exited with code {{code}}",
+  "session.activity.shell.timeout": "Timed out",
+  "session.activity.shell.killed": "Stopped",
+  "session.activity.shell.empty": "No output yet",
   "session.activity.summary": "{{subagents}} · {{shells}}",
   "session.activity.section.subagents": "Subagents",
   "session.activity.section.shells": "Shells",

packages/app/src/session/composer/activity-chips.css

@@ -142,6 +142,111 @@
     }
   }
 
+  /* One shell: a wider panel with its header row over the tail of its output. Switching views changes size at once. */
+  &[data-view="shell"] {
+    display: flex;
+    flex-direction: column;
+    width: min(560px, calc(100vw - 56px));
+    max-width: none;
+    max-height: min(320px, var(--kb-popper-content-available-height, 320px));
+    overflow: hidden;
+  }
+
+  [data-slot="session-activity-shell-header"] {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 8px;
+    min-height: 28px;
+    padding-inline-end: 2px;
+
+    [data-component="menu-v2-item"],
+    [data-slot="menu-v2-item-content"] {
+      display: flex;
+      flex: none;
+    }
+
+    [data-component="menu-v2-item"] {
+      padding-inline: 6px;
+    }
+
+    /* Matches the list's glyph column, so the arrow sits where the row icons were. */
+    [data-slot="session-activity-back"] {
+      width: 28px;
+      justify-content: center;
+      --menu-v2-fg: var(--v2-icon-icon-muted);
+
+      [data-slot="menu-v2-item-content"] {
+        flex: none;
+      }
+
+      svg:dir(rtl) {
+        transform: scaleX(-1);
+      }
+    }
+
+    [data-slot="session-activity-shell-stop"][aria-disabled="true"] {
+      --menu-v2-fg: var(--v2-text-text-muted);
+    }
+  }
+
+  [data-slot="session-activity-shell-command"] {
+    font-family: var(--v2-font-family-code);
+    font-size: 13px;
+    font-weight: 440;
+    line-height: var(--line-height-compact);
+    letter-spacing: -0.04px;
+    color: var(--v2-text-text-base);
+    text-align: left;
+  }
+
+  [data-slot="session-activity-shell-status"] {
+    flex: none;
+    padding-inline: 6px;
+    font-size: 13px;
+    line-height: var(--line-height-compact);
+    white-space: nowrap;
+    color: var(--v2-text-text-muted);
+
+    &[data-failed] {
+      color: var(--v2-state-fg-danger);
+    }
+  }
+
+  [data-slot="session-activity-shell-output"] {
+    min-height: 0;
+    flex: 1 1 auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin-top: 4px;
+    padding: 8px 10px;
+    border-radius: 6px;
+    background: var(--v2-background-bg-base);
+
+    pre {
+      margin: 0;
+      text-align: left;
+    }
+
+    code {
+      display: block;
+      font-family: var(--v2-font-family-code);
+      font-size: 13px;
+      font-weight: 440;
+      line-height: var(--line-height-compact);
+      letter-spacing: -0.04px;
+      color: var(--v2-text-text-base);
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+    }
+  }
+
+  [data-slot="session-activity-shell-empty"] {
+    font-size: 13px;
+    line-height: var(--line-height-compact);
+    color: var(--v2-text-text-muted);
+  }
+
   :root[data-motion="reduce"] & {
     animation: none;
   }

packages/app/src/session/composer/activity-chips.stories.tsx

@@ -64,6 +64,11 @@ type PreviewArgs = { stage: number; subagents: number; shells: number }
 // Driven by args, so moving between these stories updates the same capsule and its transitions play.
 function Preview(props: PreviewArgs) {
   const value = createMemo(() => liveDocument(stages[props.stage] ?? stages[0]))
+  // Built once per count, so each item keeps the start time it had when it appeared.
+  const activity = createMemo(() => ({
+    subagents: Array.from({ length: props.subagents }, (_, index) => subagentItem(index)),
+    shells: Array.from({ length: props.shells }, (_, index) => shellItem(index)),
+  }))
 
   onMount(() => pin("auto"))
   createEffect(on(value, () => pin("smooth"), { defer: true }))
@@ -74,10 +79,7 @@ function Preview(props: PreviewArgs) {
       description="opencode · activity chips"
       document={value()}
       timelineDetail={timelineDetail}
-      activity={{
-        subagents: Array.from({ length: props.subagents }, (_, index) => subagentItem(index)),
-        shells: Array.from({ length: props.shells }, (_, index) => shellItem(index)),
-      }}
+      activity={activity()}
     />
   )
 }