optimize chat ui

packages/client/ui-conversation/src/client/apply.ts

@@ -179,7 +179,8 @@ export function apply(ctx: Context): void {
   // 'conversation.chat.toolview' declaration) is on the ledger.
   ctx.plugin(ConversationService, { input: inputHub })
 
-  // The bash sample rides that exact seam, in third-party posture.
+  // The bash sample rides that exact seam, in third-party posture
+  // (ToolRow-matching Bash · {description} chrome; scoped badge in child sessions).
   ctx.plugin(bashToolviewSample)
 
   // The read-only queue dock entry (T9 file territory) rides the same

packages/client/ui-conversation/src/client/chat/ChatView.module.css

@@ -37,17 +37,11 @@
   border-radius: 6px;
 }
 
-/* Selection linkage: the selected call row wears the blue outline.
-   button-info-fill flips 500→400 with the theme, hitting the darker-blue
-   dark-mode spec exactly (business-primary stays 500 on both). */
-.callRow[data-selected] {
-  outline: 1.5px solid var(--dsw-alias-button-info-fill);
-  outline-offset: 1px;
-}
+/* Selection still sets data-selected for details linkage; no outline —
+   tool rows match Think chrome (no selected ring). */
 
 /* run_code sub-dispatch rows: indented under the parent row, left-edged so
-   the code turn reads as one unit; each nested row is itself a .callRow
-   (same components, same selection outline as top-level rows). */
+   the code turn reads as one unit; each nested row is itself a .callRow. */
 .subCalls {
   display: flex;
   flex-direction: column;

packages/client/ui-conversation/src/client/chat/MessageItem.module.css

@@ -1,10 +1,11 @@
-/* User bubble: right-aligned, figma r22 fill = the bubble specific token
-   (#EDF3FE light / dark pair rides the token sheet). */
+/* User bubble: right-aligned column (bubble + IconActions). Figma
+   User_Bubble/message_container 659:38813 — r22 fill, actions gap 6 below. */
 
-/* Block spacing is the flow column's gap alone — no extra padding here. */
 .userRow {
   display: flex;
-  justify-content: flex-end;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
 }
 
 .bubble {
@@ -19,6 +20,40 @@
   color: var(--dsw-alias-label-primary);
 }
 
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 28px;
+  /* Hidden until the row is hovered/focused (web-styling message action bar). */
+  opacity: 0;
+  transition: opacity var(--ds-transition-duration) var(--ds-ease-in-out);
+}
+
+.userRow:hover .actions,
+.userRow:focus-within .actions {
+  opacity: 1;
+}
+
+.action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 6px;
+  border: none;
+  border-radius: 28px;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: pointer;
+}
+
+.action:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-secondary);
+}
+
 .badge {
   display: inline-block;
   margin-bottom: 4px;

packages/client/ui-conversation/src/client/chat/MessageItem.tsx

@@ -1,14 +1,18 @@
-// MessageItem: the four simple node kinds — user bubble (right-aligned),
-// steering (badged bubble), context injection and unknown-surface JSON rows.
-// Props are frozen node slices off the snapshot cache; memo holds across
-// streaming because unchanged nodes keep their references.
+// MessageItem: the four simple node kinds — user bubble (right-aligned, with
+// copy / branch / edit IconActions), steering (badged bubble), context
+// injection and unknown-surface JSON rows. Props are frozen node slices off
+// the snapshot cache; memo holds across streaming because unchanged nodes
+// keep their references.
 
-import { memo } from 'react'
+import { memo, useCallback } from 'react'
 import type { ReactNode } from 'react'
 import type {
   ContextMessageNode, SteeringMessageNode, UnknownSurfaceNode, UserMessageNode,
 } from '@deepseek-ai/dsh-client-runtime/client'
-import { JsonBlock, MessageText } from '@deepseek-ai/dsh-client-ui-primitives'
+import {
+  IconBranchOutline16, IconCopyOutline16, IconEditOutline16,
+  JsonBlock, MessageText, Tooltip,
+} from '@deepseek-ai/dsh-client-ui-primitives'
 import css from './MessageItem.module.css'
 
 export interface MessageItemProps {
@@ -26,6 +30,30 @@ function contentText(content: readonly unknown[]): { text: string; rest: unknown
   return { text: texts.join(''), rest }
 }
 
+async function writeClipboard(text: string): Promise<void> {
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text)
+    return
+  }
+  const exec = typeof document.execCommand === 'function'
+    ? document.execCommand.bind(document)
+    : undefined
+  if (exec === undefined) return
+  const el = document.createElement('textarea')
+  el.value = text
+  el.setAttribute('readonly', '')
+  el.style.position = 'fixed'
+  el.style.left = '-9999px'
+  document.body.appendChild(el)
+  el.select()
+  try {
+    exec('copy')
+  } catch {
+    // Clipboard unavailable; the button stays idle.
+  }
+  el.remove()
+}
+
 /**
  * Display projection of reference forms in a user bubble (free geometry — no
  * textarea alignment constraint here); everything else stays plain text. The
@@ -58,15 +86,52 @@ function projectUserText(text: string): ReactNode {
   return <>{parts}</>
 }
 
+/** User-bubble IconActions (figma 659:38820): copy is live; branch/edit are chrome stubs. */
+function UserActions({ text }: { text: string }) {
+  const onCopy = useCallback(() => {
+    void writeClipboard(text)
+  }, [text])
+  return (
+    <div className={css.actions}>
+      <Tooltip label="复制" side="bottom">
+        <button type="button" className={css.action} aria-label="复制" onClick={onCopy}>
+          <IconCopyOutline16 />
+        </button>
+      </Tooltip>
+      <Tooltip label="在新对话中分支" side="bottom">
+        <button type="button" className={css.action} aria-label="在新对话中分支">
+          <IconBranchOutline16 />
+        </button>
+      </Tooltip>
+      <Tooltip label="编辑" side="bottom">
+        <button type="button" className={css.action} aria-label="编辑">
+          <IconEditOutline16 />
+        </button>
+      </Tooltip>
+    </div>
+  )
+}
+
 export const MessageItem = memo(function MessageItem({ node }: MessageItemProps) {
   switch (node.kind) {
-    case 'user':
+    case 'user': {
+      const { text, rest } = contentText(node.content)
+      return (
+        <div className={css.userRow}>
+          <div className={css.bubble}>
+            {projectUserText(text)}
+            {rest.map((block, i) => <JsonBlock key={i} label="附加内容块" payload={block} />)}
+          </div>
+          <UserActions text={text} />
+        </div>
+      )
+    }
     case 'steering': {
       const { text, rest } = contentText(node.content)
       return (
         <div className={css.userRow}>
           <div className={css.bubble}>
-            {node.kind === 'steering' && <span className={css.badge}>插话</span>}
+            <span className={css.badge}>插话</span>
             {projectUserText(text)}
             {rest.map((block, i) => <JsonBlock key={i} label="附加内容块" payload={block} />)}
           </div>

packages/client/ui-conversation/src/client/skeleton/InputBar.module.css

@@ -323,7 +323,7 @@
 .stopping,
 .stopping:hover {
   background: var(--dsw-alias-button-primary-dimmed);
-  color: var(--dsw-alias-brand-text);
+  color: var(--dsw-alias-label-primary);
 }
 
 .retry {

packages/client/ui-conversation/src/client/toolviews/bash-sample.module.css

@@ -1,29 +1,32 @@
-/* Sample bash rows: deliberately distinct from ToolRow so the differential
-   registry hit is visible at a glance. */
+/* Bash toolview: same geometry/tokens as ToolRow (figma Bash · description). */
 
-.row {
+.root {
   display: flex;
   align-items: center;
-  gap: 8px;
   height: 24px;
   min-width: 0;
   cursor: pointer;
   border-radius: 6px;
-  font-family: var(--ds-font-family-code);
-  font-size: 13px;
 }
 
-.row:hover {
+.root:hover {
   background: var(--dsw-alias-interactive-bg-hover);
 }
 
-.prompt {
+.leading {
   flex: none;
-  color: var(--dsw-alias-state-success-primary);
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 6px;
+  color: var(--dsw-alias-label-tertiary);
 }
 
 .scopeBadge {
   flex: none;
+  margin-right: 8px;
   padding: 0 6px;
   border-radius: 6px;
   font-size: 11px;
@@ -32,17 +35,29 @@
   background: var(--dsw-alias-state-business-primary);
 }
 
-.command {
+.title {
+  flex: none;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-primary-dimmed);
+}
+
+.sep {
+  flex: none;
+  width: 2px;
+  height: 2px;
+  border-radius: 1px;
+  margin: 0 8px;
+  background: var(--dsw-alias-label-caption);
+}
+
+.summary {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--dsw-alias-label-secondary);
-}
-
-.err {
-  flex: none;
-  color: var(--dsw-alias-state-error-primary);
-  font-size: 11px;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-tertiary);
 }

packages/client/ui-conversation/src/client/toolviews/bash-sample.tsx

@@ -1,35 +1,42 @@
-// Bash toolview sample, written in third-party posture: everything below uses
-// only the public slot surface (ctx.slots.register into the keyed
-// 'conversation.chat.toolview' hole + ToolRowProps) — the acceptance proof
-// that a plain plugin can take over a tool row with zero dedicated machinery.
-// Session-dimension differentiation happens INSIDE the component (the
-// canonical sub-agent scenario): rows in child sessions render the scoped
-// variant, derived from the standard useSessions kit — no registry predicates.
+// Bash toolview registrant: third-party posture over the keyed toolview hole
+// (ctx.slots.register + ToolRowProps only — never imports the chat domain).
+// Product chrome matches ToolRow / Think (figma: Bash · {description}).
+// Child sessions keep a scoped badge so session-dimension differentiation stays
+// observable inside the component (no parallel registry).
 
 import type { Context } from 'cordis'
+import { IconApiOutline14, StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ToolRowProps } from '../contract/slots.ts'
-import { toolRowModel } from '../contract/tool-call-model.ts'
+import { toolRowModel, type ToolRowState } from '../contract/tool-call-model.ts'
 import css from './bash-sample.module.css'
 
-/** Bash row: command-first monospace summary replacing the generic card.
- *  Sub-session rows (parentId present) swap the prompt for a scoped badge —
- *  the differential stays observable per session from one registration. */
+function leadingFor(state: ToolRowState) {
+  switch (state) {
+    case 'running': return <StateDot state="ongoing" />
+    case 'error': return <StateDot state="error" />
+    case 'stopped': return <StateDot state="warning" />
+    default: return <IconApiOutline14 size={16} />
+  }
+}
+
+/** Bash row: icon + Bash · {description}, matching the shared ToolRow chrome. */
 export function BashRow({ toolName, block, openDetails, sessionId, useSessions }: ToolRowProps) {
   const model = toolRowModel(toolName, block)
   const isChild = useSessions(list => list.byId[sessionId]?.parentId !== undefined)
-  if (isChild) {
-    return (
-      <div className={css.row} data-sample="bash-scoped" onClick={openDetails}>
-        <span className={css.scopeBadge}>scoped</span>
-        <span className={css.command}>{model.summary}</span>
-      </div>
-    )
-  }
   return (
-    <div className={css.row} data-sample="bash-global" onClick={openDetails}>
-      <span className={css.prompt} aria-hidden>$</span>
-      <span className={css.command}>{model.summary}</span>
-      {model.state === 'error' && <span className={css.err}>failed</span>}
+    <div
+      className={css.root}
+      data-sample={isChild ? 'bash-scoped' : 'bash-global'}
+      data-variant="bash"
+      data-state={model.state}
+      data-clickable
+      onClick={openDetails}
+    >
+      <span className={css.leading}>{leadingFor(model.state)}</span>
+      {isChild && <span className={css.scopeBadge}>scoped</span>}
+      <span className={css.title}>{model.title}</span>
+      <span className={css.sep} aria-hidden />
+      <span className={css.summary}>{model.summary}</span>
     </div>
   )
 }

packages/client/ui-conversation/tests/chat-branch-tails.spec.tsx

@@ -1,11 +1,12 @@
 // @vitest-environment jsdom
 // Remaining chat branch tails: MessageItem context/unknown/steering arms,
-// StatsLine no-cache join, PendingCard reason strip, AssistantMarkdown
-// single-line reasoning. (Tool-row dispatch tails live with the keyed-slot
-// machinery specs since the tool ring dissolved into renderSlot.)
+// user IconActions, StatsLine no-cache join, PendingCard reason strip,
+// AssistantMarkdown single-line reasoning. (Tool-row dispatch tails live
+// with the keyed-slot machinery specs since the tool ring dissolved into
+// renderSlot.)
 
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, render } from '@testing-library/react'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { RpcId } from '@deepseek-ai/dsh-client-connection/client'
 import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
 import { PendingWait } from '@deepseek-ai/dsh-client-runtime/client'
@@ -18,7 +19,75 @@ import { StatsLine, type StatsLineProps } from '../src/client/chat/StatsLine.tsx
 afterEach(cleanup)
 
 describe('MessageItem arms', () => {
-  it('steering bubbles carry the interjection badge and non-text rest blocks', () => {
+  it('user bubbles expose copy / branch / edit actions; copy writes the text', () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: { writeText },
+    })
+    render(
+      <MessageItem node={{
+        kind: 'user', seq: 1,
+        content: [{ type: 'text', text: 'hello bubble' }] as never,
+      } as never}
+      />,
+    )
+    expect(screen.getByRole('button', { name: '复制' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: '在新对话中分支' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: '编辑' })).toBeTruthy()
+    fireEvent.click(screen.getByRole('button', { name: '复制' }))
+    expect(writeText).toHaveBeenCalledWith('hello bubble')
+  })
+
+  it('user copy falls back to execCommand when clipboard.writeText is unavailable', () => {
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: undefined,
+    })
+    const exec = vi.fn().mockReturnValue(true)
+    Object.defineProperty(document, 'execCommand', {
+      configurable: true,
+      value: exec,
+    })
+    render(
+      <MessageItem node={{
+        kind: 'user', seq: 1,
+        content: [{ type: 'text', text: 'fallback body' }] as never,
+      } as never}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: '复制' }))
+    expect(exec).toHaveBeenCalledWith('copy')
+  })
+
+  it('user copy stays quiet when execCommand throws or is absent', () => {
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: undefined,
+    })
+    Object.defineProperty(document, 'execCommand', {
+      configurable: true,
+      value: () => {
+        throw new Error('denied')
+      },
+    })
+    render(
+      <MessageItem node={{
+        kind: 'user', seq: 1,
+        content: [{ type: 'text', text: 'quiet' }] as never,
+      } as never}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: '复制' }))
+
+    Object.defineProperty(document, 'execCommand', {
+      configurable: true,
+      value: undefined,
+    })
+    fireEvent.click(screen.getByRole('button', { name: '复制' }))
+  })
+
+  it('steering bubbles carry the interjection badge and non-text rest blocks, without user actions', () => {
     const view = render(
       <MessageItem node={{
         kind: 'steering', seq: 2, turn: 1, source: null,
@@ -29,6 +98,7 @@ describe('MessageItem arms', () => {
     expect(view.getByText('插话')).toBeTruthy()
     expect(view.getByText('steer!')).toBeTruthy()
     expect(view.getByText(/附加内容块/)).toBeTruthy()
+    expect(view.queryByRole('button', { name: '复制' })).toBeNull()
   })
 
   it('context and unknown nodes render their JSON rows', () => {

packages/client/ui-conversation/tests/chat-code-subcalls.spec.tsx

@@ -156,12 +156,13 @@ describe('run_code sub-calls through the real chat machinery', () => {
     expect(view.getByText('List the notes directory')).toBeTruthy()
 
     // Nested rows are ALWAYS visible (no parent expand needed): the bash
-    // sub-call landed in the bash sample plugin's keyed registration — the
-    // exact component a native top-level bash row uses — and the unregistered
+    // sub-call landed in the bash sample plugin's keyed registration — Bash ·
+    // description chrome, same as a top-level bash row — and the unregistered
     // sub-tool fell back to GenericToolCard at the same render site.
     const nest = view.container.querySelector('[data-subcalls]')
     expect(nest).not.toBeNull()
     expect(nest!.querySelector('[data-sample="bash-global"]')).not.toBeNull()
+    expect(view.getByText('Bash')).toBeTruthy()
     expect(view.getByText('List notes')).toBeTruthy()
     expect(view.getByText('Tool call')).toBeTruthy()
   })

packages/client/ui-conversation/tests/chat-stats-bash-sample.spec.tsx

@@ -169,17 +169,19 @@ describe('bash sample row', () => {
     expect(view.container.querySelector('[data-sample="bash-scoped"]')).not.toBeNull()
   })
 
-  it('summarizes the command and hands clicks to openDetails on both arms', () => {
+  it('summarizes as Bash · description and hands clicks to openDetails on both arms', () => {
     const openGlobal = vi.fn()
     const global = render(<BashRow {...rowProps(ROOT, { openDetails: openGlobal })} />)
     // Two renders share document.body: query inside each container.
     const globalRow = global.container.querySelector('[data-sample="bash-global"]')!
+    expect(globalRow.textContent).toContain('Bash')
     expect(globalRow.textContent).toContain('Build')
     fireEvent.click(globalRow)
     expect(openGlobal).toHaveBeenCalledTimes(1)
     const openScoped = vi.fn()
     const scoped = render(<BashRow {...rowProps(CHILD, { openDetails: openScoped })} />)
     const scopedRow = scoped.container.querySelector('[data-sample="bash-scoped"]')!
+    expect(scopedRow.textContent).toContain('Bash')
     expect(scopedRow.textContent).toContain('Build')
     fireEvent.click(scopedRow)
     expect(openScoped).toHaveBeenCalledTimes(1)

packages/client/ui-conversation/tests/chat-toolview-slot.spec.tsx

@@ -156,6 +156,7 @@ describe('keyed toolview hole through the real machinery', () => {
     // bash: the sample plugin's keyed registration took the row (root
     // session → global arm, decided inside the component off useSessions).
     expect(view.container.querySelector('[data-sample="bash-global"]')).not.toBeNull()
+    expect(view.getByText('Bash')).toBeTruthy()
     expect(view.getByText('Build')).toBeTruthy()
     // mystery: no registration under that key → render-site fallback.
     expect(view.getByText('Tool call')).toBeTruthy()

packages/client/ui-conversation/tests/chat-view.spec.tsx

@@ -264,7 +264,7 @@ describe('ChatView', () => {
     expect(view.getByText(/"command": "cmd-a"/)).toBeTruthy()
   })
 
-  it('clicking a tool row opens details with callId and toolName; selection paints the outline', () => {
+  it('clicking a tool row opens details with callId and toolName; selection marks data-selected', () => {
     const h = makeHarness({ nodes: [toolResult(3, 'a')] })
     const view = render(<h.ChatView {...h.props} />)
     fireEvent.click(view.getByText('run a'))

packages/client/ui-conversation/tests/coverage-tails.spec.tsx

@@ -1,13 +1,13 @@
 // @vitest-environment jsdom
 // Branch tails the acceptance specs do not reach: ToolRow stopped-state dot,
-// PendingCard question arm, bash sample error pill, the node-half empty
+// PendingCard question arm, bash sample state dots, the node-half empty
 // apply, and AssistantMarkdown reasoning/unknown block arms.
 
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, render } from '@testing-library/react'
 import { createSnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
 import { bindSnapshotSelector } from '@deepseek-ai/dsh-client-web-react'
-import type { SessionId, SessionListState, ToolResultNode } from '@deepseek-ai/dsh-client-runtime/client'
+import type { RunningToolCall, SessionId, SessionListState, ToolResultNode } from '@deepseek-ai/dsh-client-runtime/client'
 import { PendingWait } from '@deepseek-ai/dsh-client-runtime/client'
 import { RpcId } from '@deepseek-ai/dsh-client-connection/client'
 import type { ToolRowOwnerProps, ToolRowProps } from '@deepseek-ai/dsh-client-ui-conversation/client'
@@ -76,14 +76,7 @@ describe('tails', () => {
     expect(view.container.querySelector('[data-state="ok"]')).not.toBeNull()
   })
 
-  it('BashRow shows the failed pill on error results (root session arm)', () => {
-    const errorResult: ToolResultNode = {
-      kind: 'tool-result', seq: 1, time: 1_000, callId: 'c1',
-      call: { name: 'bash', argsRaw: '{"command":"boom"}' },
-      callTime: 500,
-      content: [], isError: true, callView: null, resultView: null,
-    }
-    // Root session (no parentId): the global arm renders, error pill visible.
+  it('BashRow shows StateDot chrome for running/error/stopped (root session arm)', () => {
     const sid = 'root-1' as SessionId
     const list = createSnapshotStore<SessionListState>({
       ids: [sid],
@@ -91,12 +84,38 @@ describe('tails', () => {
       current: undefined,
       phase: 'ready',
     } as SessionListState)
-    const props = {
-      callId: 'c1', toolName: 'bash', block: errorResult, openDetails: vi.fn(),
+    const props = (block: RunningToolCall | ToolResultNode) => ({
+      callId: 'c1', toolName: 'bash', block, openDetails: vi.fn(),
       sessionId: sid, useSessions: bindSnapshotSelector(list),
-    } as unknown as ToolRowProps
-    const view = render(<BashRow {...props} />)
-    expect(view.container.querySelector('[data-sample="bash-global"]')).not.toBeNull()
-    expect(view.getByText('failed')).toBeTruthy()
+    } as unknown as ToolRowProps)
+
+    const running: RunningToolCall = {
+      callId: 'c1', name: 'bash', argsRaw: '{"command":"ls","description":"List"}',
+      turn: 1, step: 1, time: 1_000, callView: null,
+    }
+    const errorResult: ToolResultNode = {
+      kind: 'tool-result', seq: 1, time: 1_000, callId: 'c1',
+      call: { name: 'bash', argsRaw: '{"command":"boom"}' },
+      callTime: 500,
+      content: [], isError: true, callView: null, resultView: null,
+    }
+    const stoppedResult: ToolResultNode = {
+      ...errorResult,
+      error: { name: 'E', code: 'interrupted' },
+    }
+
+    const runningView = render(<BashRow {...props(running)} />)
+    expect(runningView.container.querySelector('[data-state="running"]')).not.toBeNull()
+    expect(runningView.getByText('Bash')).toBeTruthy()
+    expect(runningView.getByText('List')).toBeTruthy()
+    runningView.unmount()
+
+    const errorView = render(<BashRow {...props(errorResult)} />)
+    expect(errorView.container.querySelector('[data-sample="bash-global"]')).not.toBeNull()
+    expect(errorView.container.querySelector('[data-state="error"]')).not.toBeNull()
+    errorView.unmount()
+
+    const stoppedView = render(<BashRow {...props(stoppedResult)} />)
+    expect(stoppedView.container.querySelector('[data-state="stopped"]')).not.toBeNull()
   })
 })