feat(session-ui): add a copy button to shell output (#58974)

Co-authored-by: vimtor <36263538+vimtor@users.noreply.github.com>

Author: opencode-agent[bot]

packages/app/e2e/performance/timeline-stability/lifecycle.spec.ts

@@ -93,7 +93,7 @@ test.describe("timeline visual lifecycle stability", () => {
       ),
     )
     await expect(
-      page.locator(`[data-timeline-part-id="${renderedPartID(ids[2])}"] [data-slot="bash-pre"]`),
+      page.locator(`[data-timeline-part-id="${renderedPartID(ids[2])}"] [data-slot="bash-result"]`),
     ).toContainText("line 50")
 
     const short = page.locator(`[data-timeline-part-id="${renderedPartID(ids[1])}"]`)

packages/session-ui/component-tests/session-lifecycle.spec.ts

@@ -1,6 +1,10 @@
 import { expect, story } from "../../storybook/playwright/story"
 
-for (const tool of ["shell", "execute", "subagent"]) {
+for (const [tool, title] of [
+  ["shell", "Shell"],
+  ["execute", "Execute"],
+  ["subagent", "Agent"],
+]) {
   for (const open of [false, true]) {
     story(`keeps ${tool} inside an existing ${open ? "open" : "closed"} group through execution`, async ({ mount }) => {
       const timeline = await mount("current-session-terminal-work--terminal-commands", {
@@ -16,7 +20,6 @@ for (const tool of ["shell", "execute", "subagent"]) {
       await timeline.getByRole("button", { name: "Start tool", exact: true }).click()
       await expect(group).toHaveAttribute("data-timeline-part-ids", "tool_context_lifecycle,tool_shell_lifecycle")
       const original = await group.elementHandle()
-      const title = tool === "subagent" ? "Agent" : tool === "execute" ? "Execute" : "Shell"
 
       for (const action of [undefined, "Complete input", "Run command", "Complete command"]) {
         if (action) await timeline.getByRole("button", { name: action, exact: true }).click()
@@ -109,7 +112,7 @@ story("shimmers and expands a running shell command", async ({ mount }) => {
   await expect(trigger).toHaveAttribute("aria-expanded", "false")
   await trigger.click()
   await expect(trigger).toHaveAttribute("aria-expanded", "true")
-  await expect(tool.locator('[data-slot="bash-pre"]')).toContainText("still running")
+  await expect(tool.locator('[data-slot="bash-result"]')).toContainText("still running")
 })
 
 // Moved from packages/app/e2e/regression/session-timeline-lifecycle-state.spec.ts

packages/session-ui/component-tests/session-shell.spec.ts

@@ -55,3 +55,20 @@ for (const [id, output] of [
     await expect(root.locator('[data-component="session-shell-message"] [data-slot="bash-result"]')).toHaveText(output)
   })
 }
+
+story("copies the shell command and its output separately", async ({ mount, page }) => {
+  const root = await mount("current-session-terminal-work--expanded-shell")
+  const shell = root.locator('[data-component="bash-output"]')
+  const command = (await shell.locator('[data-slot="bash-command"]').textContent())!
+  const output = (await shell.locator('[data-slot="bash-result"]').textContent())!
+  const clipboard = async () => (await page.evaluate(() => navigator.clipboard.readText())).replaceAll("\r\n", "\n")
+  await page.context().grantPermissions(["clipboard-read", "clipboard-write"])
+  await shell.hover()
+  await shell.locator('[data-slot="bash-result"]').getByRole("button", { name: "Copy output", exact: true }).click()
+  await expect(shell.locator('[data-slot="bash-result"]').getByRole("button", { name: "Copied" })).toBeVisible()
+  expect(await clipboard()).toBe(output)
+  await shell.locator('[data-slot="bash-command"]').getByRole("button", { name: "Copy", exact: true }).click()
+  expect(await clipboard()).toBe(command)
+  expect(command).toContain("opencode2 api get /openapi.json")
+  expect(output).toContain('"name":"OpenCode"')
+})

packages/session-ui/component-tests/session-timeline-mobile.spec.ts

@@ -30,9 +30,12 @@ story.describe("touch timeline", () => {
   story("keeps shell copy visible without hover", async ({ mount }) => {
     const timeline = await mount("current-session-terminal-work--expanded-shell")
     const copy = timeline.locator('[data-slot="bash-copy"]')
-    await expect(copy).toHaveCount(1)
-    await expect(copy).toHaveCSS("opacity", "1")
-    await expect(copy).toHaveCSS("pointer-events", "auto")
+    await expect(copy).toHaveCount(2)
+
+    for (const button of await copy.all()) {
+      await expect(button).toHaveCSS("opacity", "1")
+      await expect(button).toHaveCSS("pointer-events", "auto")
+    }
   })
 
   story("keeps error copy visible without hover", async ({ mount, page }) => {

packages/session-ui/src/components/message-part.css

@@ -479,21 +479,34 @@
   &[data-variant="shell"] {
     background: var(--v2-background-bg-base);
 
-    [data-slot="bash-pre"] {
-      padding: 0;
-    }
-
     [data-slot="bash-pre"] code {
+      display: block;
       font-family: var(--v2-font-family-code);
       font-weight: 440;
       line-height: var(--line-height-base);
       letter-spacing: -0.04px;
     }
 
+    /* Each section stacks its copy button over its text in one grid cell, so the sticky button stays in view
+       while that section scrolls and never leaves its own section. */
     [data-slot="bash-command"],
     [data-slot="bash-result"] {
-      display: block;
-      padding: 12px;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    [data-slot="bash-pre"],
+    [data-slot="bash-copy"] {
+      grid-area: 1 / 1;
+    }
+
+    [data-slot="bash-copy"] {
+      position: sticky;
+      top: 4px;
+      z-index: 1;
+      justify-self: end;
+      align-self: start;
+      margin: 4px;
     }
 
     [data-slot="bash-result"] {

packages/session-ui/src/tools/tool-renderer.tsx

@@ -1875,47 +1875,69 @@ ToolRegistry.register({
   },
 })
 
-function ConsoleOutput(props: { copy: string; children: JSX.Element; variant?: "shell" }) {
+function ConsoleOutput(props: { command: string; output: string }) {
   const i18n = useI18n()
-  const [copied, setCopied] = createSignal(false)
-
-  const copy = async () => {
-    if (!props.copy) return
-
-    if (!(await writeClipboard(props.copy))) return
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }
 
   return (
-    <div data-component="bash-output" data-variant={props.variant} dir="ltr">
-      <div data-slot="bash-copy">
-        <Tooltip value={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copy")} placement="top">
-          <IconButton
-            icon={<Icon name={copied() ? "check" : "outline-copy"} size="small" />}
-            size="normal"
-            variant="ghost-muted"
-            onMouseDown={(event) => event.preventDefault()}
-            onClick={copy}
-            aria-label={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copy")}
-          />
-        </Tooltip>
-      </div>
+    <div data-component="bash-output" data-variant="shell" dir="ltr">
       <div
         data-slot="bash-scroll"
         data-scrollable
         tabIndex={0}
         role="region"
         aria-label={i18n.t("ui.scrollView.ariaLabel")}
       >
-        <pre data-slot="bash-pre">
-          <code>{props.children}</code>
-        </pre>
+        <div data-slot="bash-command">
+          <ConsoleCopy text={props.command} label={i18n.t("ui.message.copy")} />
+          <pre data-slot="bash-pre">
+            <code>{props.command}</code>
+          </pre>
+        </div>
+        <Show when={props.output}>
+          {(output) => (
+            <div data-slot="bash-result">
+              <ConsoleCopy text={output()} label={i18n.t("ui.message.copyOutput")} />
+              <pre data-slot="bash-pre">
+                <code>{output()}</code>
+              </pre>
+            </div>
+          )}
+        </Show>
       </div>
     </div>
   )
 }
 
+// The button sits beside its section's <pre>, not inside it, so selecting and copying text never picks it up.
+function ConsoleCopy(props: { text: string; label: string }) {
+  const i18n = useI18n()
+  const [copied, setCopied] = createSignal(false)
+  const label = () => (copied() ? i18n.t("ui.message.copied") : props.label)
+
+  const copy = async () => {
+    if (!props.text) return
+
+    if (!(await writeClipboard(props.text))) return
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div data-slot="bash-copy">
+      <Tooltip value={label()} placement="top">
+        <IconButton
+          icon={<Icon name={copied() ? "check" : "outline-copy"} size="small" />}
+          size="normal"
+          variant="ghost-muted"
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={copy}
+          aria-label={label()}
+        />
+      </Tooltip>
+    </div>
+  )
+}
+
 ToolRegistry.register({
   name: "execute",
   render(props) {
@@ -1946,10 +1968,7 @@ ToolRegistry.register({
           </div>
         )}
       >
-        <ConsoleOutput copy={code()} variant="shell">
-          <span data-slot="bash-command">{code()}</span>
-          <Show when={output()}>{(value) => <span data-slot="bash-result">{value()}</span>}</Show>
-        </ConsoleOutput>
+        <ConsoleOutput command={code()} output={output()} />
       </BasicTool>
     )
   },
@@ -1998,12 +2017,7 @@ ToolRegistry.register({
         ),
       )
 
-      return (
-        <ConsoleOutput copy={command()} variant="shell">
-          <span data-slot="bash-command">{command()}</span>
-          <Show when={output()}>{(value) => <span data-slot="bash-result">{value()}</span>}</Show>
-        </ConsoleOutput>
-      )
+      return <ConsoleOutput command={command()} output={output()} />
     }
 
     return (

packages/ui/src/i18n/en.ts

@@ -252,6 +252,7 @@ const source = {
   "ui.message.voice": "Voice",
   "ui.message.deletePending": "Delete",
   "ui.message.copyResponse": "Copy response",
+  "ui.message.copyOutput": "Copy output",
   "ui.message.copied": "Copied",
   "ui.message.thought": "Thought",
   "ui.message.duration.seconds": "{{count}}s",