feat(ui): copy tool call header title

packages/ui/src/components/tool-call.tsx

@@ -1,9 +1,11 @@
 import { createSignal, Show, createEffect, createMemo, onCleanup } from "solid-js"
+import { Copy } from "lucide-solid"
 import { messageStoreBus } from "../stores/message-v2/bus"
 import { useTheme } from "../lib/theme"
 import { useGlobalCache } from "../lib/hooks/use-global-cache"
 import { useConfig } from "../stores/preferences"
 import { activeInterruption, sendPermissionResponse, sendQuestionReject, sendQuestionReply } from "../stores/instances"
+import { copyToClipboard } from "../lib/clipboard"
 import type { PermissionRequestLike } from "../types/permission"
 import { getPermissionSessionId } from "../types/permission"
 import type { QuestionRequest } from "@opencode-ai/sdk/v2"
@@ -659,6 +661,19 @@ export default function ToolCall(props: ToolCallProps) {
     return getToolName(currentTool)
   }
 
+  const headerText = createMemo(() => {
+    // Keep this as a memo so copy always matches what's rendered.
+    return renderToolTitle()
+  })
+
+  const handleCopyHeader = async (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    const text = headerText()
+    if (!text) return
+    await copyToClipboard(text)
+  }
+
   const renderToolBody = () => {
     return renderer().renderBody(rendererContext)
   }
@@ -762,16 +777,32 @@ export default function ToolCall(props: ToolCallProps) {
       }}
       class={`tool-call ${combinedStatusClass()}`}
     >
-      <button
-        class="tool-call-header"
-        onClick={toggle}
-        aria-expanded={expanded()}
-        data-status-icon={statusIcon()}
-      >
-        <span class="tool-call-summary" data-tool-icon={getToolIcon(toolName())}>
-          {renderToolTitle()}
+      <div class="tool-call-header">
+        <button
+          type="button"
+          class="tool-call-header-toggle"
+          onClick={toggle}
+          aria-expanded={expanded()}
+        >
+          <span class="tool-call-summary" data-tool-icon={getToolIcon(toolName())}>
+            {headerText()}
+          </span>
+        </button>
+
+        <button
+          type="button"
+          class="tool-call-header-copy"
+          onClick={handleCopyHeader}
+          aria-label={t("toolCall.header.copyAriaLabel")}
+          title={t("toolCall.header.copyTitle")}
+        >
+          <Copy class="w-3.5 h-3.5" />
+        </button>
+
+        <span class="tool-call-header-status" aria-hidden="true">
+          {statusIcon()}
         </span>
-      </button>
+      </div>
 
       {expanded() && (
         <div class="tool-call-details">

packages/ui/src/lib/i18n/messages/en/toolCall.ts

@@ -2,6 +2,9 @@ export const toolCallMessages = {
   "toolCall.pending.waitingToRun": "Waiting to run...",
   "toolCall.error.label": "Error:",
 
+  "toolCall.header.copyTitle": "Copy tool call title",
+  "toolCall.header.copyAriaLabel": "Copy tool call title",
+
   "toolCall.diff.label": "Diff",
   "toolCall.diff.label.withPath": "Diff · {path}",
   "toolCall.diff.viewMode.ariaLabel": "Diff view mode",

packages/ui/src/lib/i18n/messages/es/toolCall.ts

@@ -2,6 +2,9 @@ export const toolCallMessages = {
   "toolCall.pending.waitingToRun": "Esperando para ejecutar...",
   "toolCall.error.label": "Error:",
 
+  "toolCall.header.copyTitle": "Copy tool call title",
+  "toolCall.header.copyAriaLabel": "Copy tool call title",
+
   "toolCall.diff.label": "Diff",
   "toolCall.diff.label.withPath": "Diff · {path}",
   "toolCall.diff.viewMode.ariaLabel": "Modo de vista de diff",

packages/ui/src/lib/i18n/messages/fr/toolCall.ts

@@ -2,6 +2,9 @@ export const toolCallMessages = {
   "toolCall.pending.waitingToRun": "En attente d'exécution...",
   "toolCall.error.label": "Erreur :",
 
+  "toolCall.header.copyTitle": "Copy tool call title",
+  "toolCall.header.copyAriaLabel": "Copy tool call title",
+
   "toolCall.diff.label": "Diff",
   "toolCall.diff.label.withPath": "Diff · {path}",
   "toolCall.diff.viewMode.ariaLabel": "Mode d'affichage du diff",

packages/ui/src/lib/i18n/messages/ja/toolCall.ts

@@ -2,6 +2,9 @@ export const toolCallMessages = {
   "toolCall.pending.waitingToRun": "実行待ち...",
   "toolCall.error.label": "エラー:",
 
+  "toolCall.header.copyTitle": "Copy tool call title",
+  "toolCall.header.copyAriaLabel": "Copy tool call title",
+
   "toolCall.diff.label": "Diff",
   "toolCall.diff.label.withPath": "Diff · {path}",
   "toolCall.diff.viewMode.ariaLabel": "diff 表示モード",

packages/ui/src/lib/i18n/messages/ru/toolCall.ts

@@ -2,6 +2,9 @@ export const toolCallMessages = {
   "toolCall.pending.waitingToRun": "Ожидание запуска…",
   "toolCall.error.label": "Ошибка:",
 
+  "toolCall.header.copyTitle": "Copy tool call title",
+  "toolCall.header.copyAriaLabel": "Copy tool call title",
+
   "toolCall.diff.label": "Diff",
   "toolCall.diff.label.withPath": "Diff · {path}",
   "toolCall.diff.viewMode.ariaLabel": "Режим просмотра diff",

packages/ui/src/lib/i18n/messages/zh-Hans/toolCall.ts

@@ -2,6 +2,9 @@ export const toolCallMessages = {
   "toolCall.pending.waitingToRun": "等待运行...",
   "toolCall.error.label": "错误：",
 
+  "toolCall.header.copyTitle": "Copy tool call title",
+  "toolCall.header.copyAriaLabel": "Copy tool call title",
+
   "toolCall.diff.label": "Diff",
   "toolCall.diff.label.withPath": "Diff · {path}",
   "toolCall.diff.viewMode.ariaLabel": "Diff 视图模式",

packages/ui/src/styles/messaging/tool-call.css

@@ -84,36 +84,59 @@
 }
 
 .tool-call-header {
+  @apply flex items-stretch w-full;
+  background-color: transparent;
+  color: var(--text-primary);
+}
+
+.tool-call-header:hover {
+  background-color: var(--surface-hover);
+}
+
+.tool-call-header-toggle {
   @apply flex items-center gap-2 p-2 w-full bg-transparent border-none cursor-pointer text-left;
   font-family: var(--font-family-mono);
   font-size: 13px;
   border-radius: 0;
   color: var(--text-primary);
+  flex: 1;
 }
 
-.tool-call-header::before {
+.tool-call-header-toggle::before {
   content: "▶";
   font-size: 11px;
   margin-right: 0.35rem;
   color: var(--text-secondary);
 }
 
-.tool-call-header[aria-expanded="true"]::before {
+.tool-call-header-toggle[aria-expanded="true"]::before {
   content: "▼";
 }
 
-.tool-call-header::after {
-  content: attr(data-status-icon);
+.tool-call-header-toggle:hover {
+  background-color: transparent;
+}
+
+.tool-call-header-copy {
+  @apply inline-flex items-center justify-center;
+  background-color: transparent;
+  border: none;
+  color: var(--text-secondary);
+  padding: 0 0.5rem;
+  border-radius: 0;
+  cursor: pointer;
+}
+
+.tool-call-header-copy:hover {
+  background-color: transparent;
+  color: var(--text-primary);
+}
+
+.tool-call-header-status {
+  @apply inline-flex items-center justify-center;
   font-size: 0.95rem;
-  margin-left: 0.5rem;
-}
-
-.tool-call-header[data-status-icon=""]::after {
-  margin-left: 0;
-}
-
-.tool-call-header:hover {
-  background-color: var(--surface-hover);
+  color: var(--text-secondary);
+  padding: 0 0.5rem;
 }
 
 .tool-call-summary {