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