optimize chat ui

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()
   })
 })