Merge pull request #801 from deepseek-harness/fix/web-ui-optimization

fix(web-ui): conversation UI polish sweep

.agents/notes/implemented/bug-fix/2026-07-28-web-conversation-polish-sweep.i18n.yaml

@@ -0,0 +1,6 @@
+# Bilingual-pair consistency record (docs/i18n/README.md): the git blob hash of each
+# side as of the last confirmed-consistent state. Both languages carry equal authority;
+# after editing either side, bring the other along and re-record with:
+#   pnpm run verify-translation-pairing --write .agents/notes/implemented/bug-fix/2026-07-28-web-conversation-polish-sweep.md
+2026-07-28-web-conversation-polish-sweep.md: cae52217d66017509c025a5d8d37b1e1e8173c6a
+2026-07-28-web-conversation-polish-sweep.zh.md: d19a5f75937e9ae9f553b2c941594db118fa434e

.agents/notes/implemented/bug-fix/2026-07-28-web-conversation-polish-sweep.md

@@ -0,0 +1,37 @@
+# Agent Note: Web conversation UI polish sweep
+
+Status: implemented
+
+English | [中文](2026-07-28-web-conversation-polish-sweep.zh.md)
+
+## Problem
+
+A design review of the web GUI's conversation surfaces found a batch of presentation defects: portal menus painted one frame at the wrong position before repositioning (visible open jump), the chat column split one tool run into several groups whenever a step message carried only tool-call heads, tool row summaries printed workspace-absolute paths that consumed most of the row, the running-row sweep was implemented as an alpha mask that dimmed the whole row, the hero workspace chip resurrected a deleted workspace's folder name from the session cwd, and the header showed a turns counter nobody asked for next to a 13px title.
+
+## Decision
+
+The sweep lands as presentation-layer changes only; nothing enters the session log.
+
+- **Portal menus pre-render hidden and measure before paint.** The menu list mounts with `visibility: hidden` at (0,0), measures in `useLayoutEffect`, and becomes visible already at its final position. Menus keep 12px viewport clearance with internal scroll; workspace create actions pin in a non-scrolling footer.
+- **The chat flow skips assistant nodes that render nothing.** A finalized assistant node whose blocks are only tool-call heads and blank text/reasoning is dropped from the flow derivation, so consecutive tool results merge into one group. Interrupted nodes always render (they carry the 已停止 marker).
+- **Tool row summaries relativize workspace-rooted paths.** The session cwd threads through the toolview slot contract (`ToolRowOwnerProps.cwd`) and `toolRowModel` strips it from summaries that start with it; paths outside the workspace stay verbatim. Display-only — args and the log are untouched.
+- **The running sweep is a glare-band overlay.** A fixed-width `::after` gradient band animates across the row (the deepsuite ShimmerText pattern), replacing the previous `mask-image` approach, in both ToolRow and the Bash toolview.
+- **The hero workspace chip is a selector, not an echo.** With no live selection (cold start, or the workspace was deleted after the list settled) it shows a "Choose workspace" placeholder; the cwd-derived name only bridges the initial list load, and stale pending picks clear when their workspace leaves a ready list.
+- **One 16px vertical rhythm.** The chat column gap and in-group tool-row gap are both 16px, replacing the 10px in-group gap plus a negative cross-group margin.
+- **Header title reads 14/20 with no turns counter**; StateDot ongoing and the turn tail use a stepped pixel-chase loading language; `body` gets grayscale antialiasing (`-webkit-font-smoothing` and the Firefox macOS equivalent).
+
+## Alternatives considered
+
+- **Position menus synchronously from anchor rects before mount.** Rejected: the list's own size is unknown until it lays out, so clamping to the viewport still needs a post-layout measure; measuring a hidden mounted node is the pattern React and Floating UI document.
+- **Filter empty assistant messages host-side.** Rejected: the node is real model output that Trajectory and replay must keep; only the chat presentation should skip it, and the web layer is pure presentation by contract.
+- **Relativize paths in each tool's presenter.** Rejected: the redundancy is shared by every path-summarizing tool; one display-only pass in `toolRowModel` covers them all and non-chat consumers keep absolute paths.
+- **Keep the mask-based sweep.** Rejected: the mask dims the entire row content including state dots, and its exit transition fought the hover icon crossfade; an overlay band composites above the content without touching its alpha.
+- **Keep showing the deleted workspace's name in the chip.** Rejected: the chip is the selector for the *next* session; echoing a cwd whose workspace the user just deleted misrepresents the current pick.
+
+## Consequences
+
+Chat renders fewer flow items than the snapshot has nodes: anyone counting rendered blocks against nodes must account for skipped render-nothing assistants (the chat-view spec pins this). The path relativization is a prefix check against the session cwd, so a workspace rename mid-session shows absolute paths until the summary re-derives — accepted as display-only staleness. The uniform 16px rhythm retires the tighter 10px tool-run look; a future denser layout would reintroduce a second constant deliberately. The menu pre-render adds one hidden layout pass per open, negligible at menu sizes.
+
+## Testing
+
+`chat-view.spec.tsx` pins the render-nothing grouping (including the interrupted exception); `chat-tool-row.spec.tsx` pins cwd relativization inside/outside the workspace and with an empty cwd; `atoms.spec.tsx` and `workspace-picker.spec.tsx` cover the menu and chip states; the full ui-conversation, ui-primitives, and ui-workspace suites pass.

.agents/notes/implemented/bug-fix/2026-07-28-web-conversation-polish-sweep.zh.md

@@ -0,0 +1,37 @@
+# Agent Note: Web conversation UI polish sweep
+
+Status: implemented
+
+[English](2026-07-28-web-conversation-polish-sweep.md) | 中文
+
+## Problem
+
+一次针对 web GUI 对话界面的设计评审发现了一批视觉呈现缺陷：portal 菜单在重新定位前会先在错误位置绘制一帧（打开时可见跳动）；只要某条步骤消息只携带工具调用头，聊天列就会把一次工具运行拆成好几组；工具行摘要打印以工作区为根的绝对路径，占掉行内大部分空间；运行中行的扫光效果用 alpha 遮罩实现，把整行都压暗；hero 区的工作区 chip 会从会话 cwd 里复现已删除工作区的文件夹名；标题栏还在 13px 的标题旁显示一个没人需要的轮次计数。
+
+## Decision
+
+本次修复全部为纯展示侧改动落地；不会有任何内容进入会话日志。
+
+- **Portal 菜单先隐藏预渲染，绘制前完成测量。**菜单列表以 `visibility: hidden` 挂载在 (0,0)，在 `useLayoutEffect` 中测量，显示时已处于最终位置。菜单与视口保持 12px 间距并支持内部滚动；工作区创建操作固定在不滚动的页脚区。
+- **聊天流跳过不渲染任何内容的助手节点。**已定稿的助手节点若其块仅含工具调用头和空白的文本／推理（reasoning）内容，就会从流推导中剔除，于是连续的工具结果合并为一组。被中断的节点始终渲染（它们携带「已停止」标记）。
+- **工具行摘要把以工作区为根的路径转为相对路径。**会话 cwd 经由 toolview 插槽契约（`ToolRowOwnerProps.cwd`）逐层传递，`toolRowModel` 从以其开头的摘要中剥去该前缀；工作区之外的路径保持原样。这只影响显示：工具参数与日志均不受影响。
+- **运行中的扫光效果改为高光带叠加层。**一条固定宽度的 `::after` 渐变光带横向扫过整行（即 deepsuite 的 ShimmerText 模式），取代先前的 `mask-image` 方案，ToolRow 与 Bash toolview 两处均已替换。
+- **hero 区的工作区 chip 是选择器，而非回显。**没有有效选中项时（冷启动，或列表稳定后工作区被删除），它显示「Choose workspace」占位文案；由 cwd 推导的名称只用于衔接列表的首次加载，待定选择对应的工作区从已就绪的列表中消失时，该陈旧选择会被清除。
+- **统一为 16px 的纵向节奏。**聊天列间距与分组内工具行间距统一为 16px，取代原先「分组内 10px 间距加跨分组负外边距」的做法。
+- **标题栏标题改为 14/20，去掉轮次计数**；StateDot 的进行中状态与轮次尾部采用逐格推进的像素追逐式加载视觉语言；`body` 启用灰度抗锯齿（`-webkit-font-smoothing` 及 Firefox 在 macOS 上的等价设置）。
+
+## Alternatives considered
+
+- **挂载前根据锚点矩形同步定位菜单。**不予采纳：列表自身尺寸在布局完成前无从得知，向视口内收拢仍然需要布局后测量；对已挂载的隐藏节点做测量正是 React 与 Floating UI 文档记载的模式。
+- **在宿主侧过滤空的助手消息。**不予采纳：该节点是真实的模型输出，Trajectory 与回放都必须保留它；只有聊天展示应当跳过它，且按契约 web 层只负责呈现。
+- **在每个工具各自的展示器中做路径相对化。**不予采纳：这种冗余是所有输出路径摘要的工具共有的；在 `toolRowModel` 里做一次仅影响显示的处理即可覆盖全部工具，非聊天消费方仍拿到绝对路径。
+- **保留基于遮罩的扫光。**不予采纳：遮罩会把包括状态圆点在内的整行内容压暗，其退出过渡还与悬停图标的交叉淡入淡出相互冲突；叠加光带在内容之上合成，完全不触碰内容的 alpha。
+- **让 chip 继续显示已删除工作区的名称。**不予采纳：chip 是为*下一个*会话服务的选择器；用户刚删掉某个工作区，还回显它的 cwd，就是在错误呈现当前的选择。
+
+## Consequences
+
+聊天渲染出的流条目数少于快照中的节点数：凡是拿渲染出的块与节点数对账的人，都必须把被跳过的「不渲染任何内容」的助手节点计算在内（chat-view 规格测试固定了这一点）。路径相对化只是针对会话 cwd 的前缀检查，因此会话中途重命名工作区后，摘要在重新推导前会显示绝对路径，这被接受为仅影响显示的陈旧状态。统一的 16px 节奏淘汰了原先更紧凑的 10px 工具运行外观；将来若要更紧凑的布局，应当有意识地重新引入第二个常量。菜单预渲染让每次打开多一次隐藏布局计算，在菜单的尺寸量级下开销可忽略。
+
+## Testing
+
+`chat-view.spec.tsx` 固定了「不渲染任何内容」节点的分组行为（含被中断节点这一例外）；`chat-tool-row.spec.tsx` 固定了工作区内、工作区外以及 cwd 为空时的 cwd 相对化行为；`atoms.spec.tsx` 与 `workspace-picker.spec.tsx` 覆盖菜单与 chip 的各种状态；ui-conversation、ui-primitives 与 ui-workspace 的全量测试套件通过。

apps/web/tests/workspace-flow.snapshot.ts

@@ -165,7 +165,7 @@ it('locks the composer in the New Session view state until a Workspace is chosen
     sidebar: visibleText(tree),
   }).toMatchInlineSnapshot(`
     {
-      "chip": "New Workspace",
+      "chip": "Choose workspace",
       "composerDisabled": true,
       "headline": "Let's start building",
       "sendDisabled": true,
@@ -232,7 +232,10 @@ it('New Session reuses the Workspace blank session and converts the single visib
 
   // New Session resolves through the recent Workspace and reuses its blank
   // session in place: no locked interlude, no second entity.
-  fireEvent.click(screen.getByRole('button', { name: 'New session' }))
+  const newSessionButton = screen.getAllByRole('button', { name: 'New session' })
+    .find(button => visibleText(button) === 'New Session')
+  if (newSessionButton === undefined) throw new Error('New Session button missing')
+  fireEvent.click(newSessionButton)
   const composer = await findHeroComposer()
   await waitFor(() => { expect(within(tree).getByText('1 session')).toBeDefined() }, { timeout: 10_000 })
 

packages/client/locale/src/client/LanguageRow.module.css

@@ -42,6 +42,10 @@
   cursor: pointer;
 }
 
+.selector:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
 .chevron {
   flex: none;
 }

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

@@ -9,18 +9,6 @@
   color: var(--dsw-alias-label-primary);
 }
 
-.pulse {
-  display: inline-block;
-  width: 8px;
-  height: 14px;
-  background: var(--dsw-alias-state-business-primary);
-  animation: pulse 1s infinite ease-in-out;
-}
-
-@keyframes pulse {
-  50% { opacity: 0.2; }
-}
-
 /* Interrupted-turn terminal marker: quiet inline tag, no animation. */
 .stopped {
   align-self: flex-start;

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

@@ -2,8 +2,8 @@
 // reasoning as the figma Think summary row (expand = indented gray text),
 // other-block JSON fallback. Tool-call heads are NOT rendered here: the chat
 // view groups them into tool rows through its keyed toolview slot (figma
-// step-summary flow). Shared by finalized nodes and the streaming partial
-// (pulse marker).
+// step-summary flow). Shared by finalized nodes and the streaming partial;
+// the turn-level loading dots live in the chat view's tail, not here.
 
 import { memo } from 'react'
 import type { AssistantBlock } from '@deepseek-ai/dsh-client-runtime/client'
@@ -14,7 +14,7 @@ import css from './AssistantMarkdown.module.css'
 export interface AssistantMarkdownProps {
   blocks: readonly AssistantBlock[]
   streaming: boolean
-  /** Frozen partial of an aborted turn: rendered with a 已停止 marker, no pulse. */
+  /** Frozen partial of an aborted turn: rendered with a 已停止 marker. */
   interrupted?: boolean | undefined
 }
 
@@ -28,7 +28,7 @@ function ThinkRow({ text, running }: { text: string; running: boolean }) {
   return (
     <ToolRow
       variant="think"
-      icon={<IconThinkOutline14 />}
+      icon={<IconThinkOutline14 size={14} />}
       title="Think"
       summary={firstLine(text)}
       body={text}
@@ -58,7 +58,6 @@ export const AssistantMarkdown = memo(function AssistantMarkdown({ blocks, strea
           default: return <JsonBlock key={i} label="未知内容块" payload={block.block} />
         }
       })}
-      {streaming && <span className={css.pulse} />}
       {interrupted && <span className={css.stopped}>已停止</span>}
     </div>
   )

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

@@ -1,5 +1,6 @@
-/* Chat flow: block gap 16 between narration/bubbles/tool groups (figma);
-   tool rows inside a group gap 10. Input padding cap rides the skeleton. */
+/* Chat flow: one 16px rhythm everywhere — between blocks (prose <-> tool
+   runs) via the column gap and between consecutive tool rows via the group
+   gap. Input padding cap rides the skeleton. */
 
 .root {
   position: relative;
@@ -30,7 +31,7 @@
 .toolGroup {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 16px;
 }
 
 .callRow {
@@ -51,6 +52,35 @@
   border-left: 1px solid var(--dsw-alias-border-l2);
 }
 
+/* Turn loader: one row of four 2.5px pixels (StateDot blue) chasing left to
+   right with a stepped trail — flat keyframe holds, no tweening. Phase
+   offsets come from per-rect animation-delay (index * -250ms) set inline
+   by the component. */
+.turnDots {
+  align-self: flex-start;
+  flex: none;
+  display: flex;
+  align-items: center;
+  /* One message line box: the dots center inside the text line height. */
+  height: 26px;
+  /* Same pin as StateDot: ongoing blue has no alias token (business-primary
+     is the 500 step, not this 450). */
+  color: var(--dsw-static-deepseek-450);
+}
+
+.turnDotCell {
+  fill: currentColor;
+  opacity: 0.15;
+  animation: dsh-turn-dots-chase 1s infinite;
+}
+
+@keyframes dsh-turn-dots-chase {
+  0%, 24.9% { opacity: 1; }
+  25%, 49.9% { opacity: 0.6; }
+  50%, 74.9% { opacity: 0.35; }
+  75%, 100% { opacity: 0.15; }
+}
+
 .hint {
   color: var(--dsw-alias-label-tertiary);
   font-size: 12px;

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

@@ -49,19 +49,20 @@ type UseConversation = SnapshotSelectorHook<ConversationSnapshot>
  *  top-level call (same registrations, same fallback), nested by the parent.
  *  A started-but-unsettled sub-call arrives as the RunningToolCall shape and
  *  renders the running state exactly as a native in-flight row. */
-const SubCallRow = memo(function SubCallRow({ renderSlot, node, onOpenDetails, selected }: {
+const SubCallRow = memo(function SubCallRow({ renderSlot, node, onOpenDetails, selected, cwd }: {
   renderSlot: RenderToolRow
   node: CodeSubCall
   onOpenDetails: OpenDetails
   selected: boolean
+  cwd: string | undefined
 }) {
   const settled = 'kind' in node
   const toolName = settled ? node.call?.name ?? '' : node.name
   const seq = settled ? node.seq : node.time
   const owner = useMemo(() => ({
-    callId: node.callId, toolName, block: node,
+    callId: node.callId, toolName, block: node, cwd,
     openDetails: () => { onOpenDetails({ turnSeq: seq, callId: node.callId, toolName }) },
-  }), [node, toolName, seq, onOpenDetails])
+  }), [node, toolName, seq, cwd, onOpenDetails])
   return (
     <div className={css.callRow} data-selected={selected || undefined}>
       {renderSlot('conversation.chat.toolview', owner, {
@@ -77,7 +78,9 @@ const SubCallRow = memo(function SubCallRow({ renderSlot, node, onOpenDetails, s
  *  GenericToolCard at this render site. A `run_code` call additionally
  *  renders its logged sub-dispatches as always-visible indented rows —
  *  each one the same keyed-slot dispatch as a native top-level call. */
-const CallRow = memo(function CallRow({ renderSlot, callId, toolName, block, seq, onOpenDetails, selected, subCalls, selectedCallId }: {
+const CallRow = memo(function CallRow({
+  renderSlot, callId, toolName, block, seq, onOpenDetails, selected, subCalls, selectedCallId, cwd,
+}: {
   renderSlot: RenderToolRow
   callId: string
   toolName: string
@@ -91,11 +94,13 @@ const CallRow = memo(function CallRow({ renderSlot, callId, toolName, block, seq
   subCalls?: readonly CodeSubCall[] | undefined
   /** The store's selected callId, matched against sub-rows (undefined when no sub-row here is selected). */
   selectedCallId?: string | undefined
+  /** Session workspace root for path-relative summaries. */
+  cwd: string | undefined
 }) {
   const owner = useMemo(() => ({
-    callId, toolName, block,
+    callId, toolName, block, cwd,
     openDetails: () => { onOpenDetails({ turnSeq: seq, callId, toolName }) },
-  }), [callId, toolName, block, seq, onOpenDetails])
+  }), [callId, toolName, block, seq, cwd, onOpenDetails])
   return (
     <div className={css.callRow} data-selected={selected || undefined}>
       {renderSlot('conversation.chat.toolview', owner, {
@@ -111,6 +116,7 @@ const CallRow = memo(function CallRow({ renderSlot, callId, toolName, block, seq
               node={node}
               onOpenDetails={onOpenDetails}
               selected={node.callId === selectedCallId}
+              cwd={cwd}
             />
           ))}
         </div>
@@ -119,8 +125,8 @@ const CallRow = memo(function CallRow({ renderSlot, callId, toolName, block, seq
   )
 })
 
-/** Consecutive tool results as one step-run group (figma VERTICAL gap10). */
-const ToolGroup = memo(function ToolGroup({ renderSlot, results, onOpenDetails, selectedCallId, codeDispatches }: {
+/** Consecutive tool results as one step-run group (uniform 16px rhythm). */
+const ToolGroup = memo(function ToolGroup({ renderSlot, results, onOpenDetails, selectedCallId, codeDispatches, cwd }: {
   renderSlot: RenderToolRow
   results: readonly ToolResultNode[]
   onOpenDetails: OpenDetails
@@ -128,6 +134,8 @@ const ToolGroup = memo(function ToolGroup({ renderSlot, results, onOpenDetails,
   selectedCallId: string | undefined
   /** Sub-dispatch index off the snapshot (map reference is chunk-storm stable). */
   codeDispatches: ReadonlyMap<string, readonly CodeSubCall[]>
+  /** Session workspace root for path-relative summaries. */
+  cwd: string | undefined
 }) {
   return (
     <div className={css.toolGroup}>
@@ -143,12 +151,47 @@ const ToolGroup = memo(function ToolGroup({ renderSlot, results, onOpenDetails,
           selected={node.callId === selectedCallId}
           subCalls={codeDispatches.get(node.callId)}
           selectedCallId={selectedCallId}
+          cwd={cwd}
         />
       ))}
     </div>
   )
 })
 
+/** Turn loader: one row of four 2.5px pixels (half a notch above the StateDot
+ *  2px cell, same blue) chasing left to right with a stepped trail — flat
+ *  keyframe holds, no tweening, no rotation. Phase offsets come from
+ *  per-rect animation-delay. */
+const LOADER_CELLS = [0, 5, 10, 15] as const
+
+function TurnDots() {
+  return (
+    /* The wrapper is a 26px line box (message line height) so the loader
+       occupies one text line and centers the dots inside it. */
+    <div className={css.turnDots} aria-hidden="true">
+      <svg
+        width="17.5"
+        height="2.5"
+        viewBox="0 0 17.5 2.5"
+        shapeRendering="crispEdges"
+      >
+        {LOADER_CELLS.map((x, index) => (
+          <rect
+            key={x}
+            className={css.turnDotCell}
+            x={x}
+            y="0"
+            width="2.5"
+            height="2.5"
+            /* Negative delay phases the chase so every cell animates from mount. */
+            style={{ animationDelay: `${(index - LOADER_CELLS.length) * 250}ms` }}
+          />
+        ))}
+      </svg>
+    </div>
+  )
+}
+
 /** The streaming partial, isolated so chunk batches re-render only this tail.
  *  onGrow lets the scroll owner follow content the parent never re-renders for. */
 function StreamingTail({ useSession, onGrow }: {
@@ -167,8 +210,11 @@ function StreamingTail({ useSession, onGrow }: {
  * The chat view slot entry: pure component over the composed props (tool rows
  * render through the declared keyed hole's renderSlot share).
  */
-export function ChatView({ useSession, useStore, renderSlot, openDetails, loadOlder }: ChatViewSlotProps) {
+export function ChatView({ useSession, useSessions, useStore, renderSlot, sessionId, openDetails, loadOlder }: ChatViewSlotProps) {
   const nodes = useSession(s => s.nodes)
+  // Workspace root off the session list row: path summaries display relative to it.
+  const cwd = useSessions(s => s.byId[sessionId]?.cwd)
+  const running = useSession(s => s.running)
   const runningCalls = useSession(s => s.runningCalls)
   const codeDispatches = useSession(s => s.codeDispatches)
   const pending = useSession(s => s.pending)
@@ -268,6 +314,7 @@ export function ChatView({ useSession, useStore, renderSlot, openDetails, loadOl
           onOpenDetails={openDetails}
           selectedCallId={inGroup ? selectedCallId : undefined}
           codeDispatches={codeDispatches}
+          cwd={cwd}
         />
       )
     }
@@ -309,11 +356,15 @@ export function ChatView({ useSession, useStore, renderSlot, openDetails, loadOl
                   selected={call.callId === selectedCallId}
                   subCalls={codeDispatches.get(call.callId)}
                   selectedCallId={selectedCallId}
+                  cwd={cwd}
                 />
               ))}
             </div>
           )}
           {pending.map(item => <PendingCard key={item.key} item={item} />)}
+          {/* Turn-level loading signal: rides the whole running turn (first-token
+              wait, tool execution, streaming) so it never flickers per step. */}
+          {running && <TurnDots />}
         </div>
       </div>
       <StatsLine useSession={useSession} />

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

@@ -13,20 +13,20 @@ import { toolRowModel, type ToolRowVariant } from '../contract/tool-call-model.t
 import { ToolRow } from './ToolRow.tsx'
 import { IconSparkle16 } from './IconSparkle16.tsx'
 
-/** Variant leading icons (figma table). */
+/** Variant leading icons (figma table); all glyphs render at 14 inside the 16px leading box. */
 const VARIANT_ICONS: Record<ToolRowVariant, ReactNode> = {
-  think: <IconThinkOutline14 />,
-  search: <IconSearchOutline16 />,
-  read: <IconBrowseOutline16 />,
-  bash: <IconApiOutline14 size={16} />,
-  write: <IconEditOutline16 />,
-  edit: <IconEditOutline16 />,
-  code: <IconCodeOutline16 />,
-  others: <IconSparkle16 />,
+  think: <IconThinkOutline14 size={14} />,
+  search: <IconSearchOutline16 size={14} />,
+  read: <IconBrowseOutline16 size={14} />,
+  bash: <IconApiOutline14 size={14} />,
+  write: <IconEditOutline16 size={14} />,
+  edit: <IconEditOutline16 size={14} />,
+  code: <IconCodeOutline16 size={14} />,
+  others: <IconSparkle16 size={14} />,
 }
 
-export function GenericToolCard({ toolName, block, openDetails }: ToolRowOwnerProps) {
-  const model = toolRowModel(toolName, block)
+export function GenericToolCard({ toolName, block, cwd, openDetails }: ToolRowOwnerProps) {
+  const model = toolRowModel(toolName, block, cwd)
   return (
     <ToolRow
       variant={model.variant}

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

@@ -7,22 +7,48 @@
 }
 
 .row {
+  position: relative; /* sweep-glare overlay anchor */
+  overflow: hidden;
   display: flex;
   align-items: center;
   height: 24px;
   min-width: 0;
 }
 
+/* Running sweep (deepsuite ShimmerText pattern): a fixed-width glare band —
+   theme background at 60% — glides over the row content from off-left to
+   off-right, washing glyphs and icon toward the background as it passes.
+   ease-out with a 10% end hold gives each pass a beat before the next. */
+.root[data-state='running'] .row::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 300px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in srgb, var(--dsw-alias-bg-base) 60%, transparent) 55%,
+    transparent 100%
+  );
+  animation: dsh-tool-row-sweep 2.6s ease-out infinite;
+  pointer-events: none;
+}
+
+@keyframes dsh-tool-row-sweep {
+  0% { left: -300px; }
+  90%, 100% { left: 100%; }
+}
+
+/* Clickable rows keep only the cursor affordance — no hover fill. */
 .row[data-clickable] {
   cursor: pointer;
   border-radius: 6px;
 }
 
-.row[data-clickable]:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
 .leading {
+  position: relative; /* .chevronHover overlay anchor */
   flex: none;
   width: 16px;
   height: 16px;
@@ -65,11 +91,36 @@ button.leading {
   color: var(--dsw-alias-label-secondary);
 }
 
+/* Hover preview on expandable rows: the idle tool icon crossfades (100ms)
+   into a down chevron before the row is opened. The chevron overlays the
+   icon cell absolutely so both can stay mounted for the opacity transition. */
+.iconIdle {
+  display: inline-flex;
+  opacity: 1;
+  transition: opacity 100ms ease;
+}
+
+.chevronHover {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+
+.row:hover .iconIdle {
+  opacity: 0;
+}
+
+.row:hover .chevronHover {
+  opacity: 1;
+}
+
 .title {
   flex: none;
   font-size: 14px;
   line-height: 24px;
-  color: var(--dsw-alias-label-primary-dimmed);
+  color: var(--dsw-alias-label-secondary);
 }
 
 .sep {

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

@@ -1,8 +1,10 @@
 // ToolRow: the single-line tool summary row (figma component set 122:9479) —
-// 16px leading slot (state dot / tool icon, chevron when expanded) + title +
+// 16px leading slot (state dot / tool icon, chevron on hover or expanded) + title +
 // separator dot + FILL-truncated summary. Expanded body is indented gray text;
 // no inline output (full results live in the details panel). Expand state is
 // component-local view state; row click hands the selection off to the owner.
+// TODO(ux): converge every chat-tab tool row on in-place expansion for its
+// expandable content, retiring the details-panel handoff where feasible.
 
 import { useState, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react'
 import clsx from 'clsx'
@@ -28,11 +30,11 @@ export interface ToolRowProps {
   onOpenDetails?: (() => void) | undefined
 }
 
-/** Leading-slot state substitution: the tool icon yields to the state semantic
- *  (running = blue ring, error = red, interrupted = amber halo; ok = icon). */
+/** Leading-slot state substitution: the tool icon yields to the terminal state
+ *  semantic (error = red, interrupted = amber halo). Running keeps the icon —
+ *  the row sweep (CSS on data-state) carries the in-flight signal. */
 function leadingFor(state: ToolRowState, icon: ReactNode): ReactNode {
   switch (state) {
-    case 'running': return <StateDot state="ongoing" />
     case 'error': return <StateDot state="error" />
     case 'stopped': return <StateDot state="warning" />
     default: return icon
@@ -66,6 +68,19 @@ export function ToolRow({
     event.preventDefault()
     toggleExpand()
   }
+  // Expandable rows preview the toggle on hover: the tool icon yields to a
+  // down chevron (CSS swap on .row:hover); state dots still take precedence.
+  const collapsedIcon = expandable
+    ? (
+      <>
+        <span className={css.iconIdle}>{icon}</span>
+        <IconChevronDownOutline14 className={clsx(css.chevron, css.chevronHover)} />
+      </>
+    )
+    : icon
+  const leading = open
+    ? <IconChevronDownOutline14 className={css.chevron} />
+    : leadingFor(state, collapsedIcon)
   return (
     <div className={css.root} data-variant={variant} data-tool={toolName} data-state={state}>
       <div
@@ -84,11 +99,11 @@ export function ToolRow({
             aria-expanded={open}
             onClick={toggleFromLeading}
           >
-            {open ? <IconChevronDownOutline14 className={clsx(css.chevron)} /> : leadingFor(state, icon)}
+            {leading}
           </button>
         ) : (
           <span className={css.leading}>
-            {open ? <IconChevronDownOutline14 className={clsx(css.chevron)} /> : leadingFor(state, icon)}
+            {leading}
           </span>
         )}
         <span className={css.title}>{title}</span>

packages/client/ui-conversation/src/client/chat/chat-flow.ts

@@ -12,6 +12,16 @@ export type ChatFlowItem =
   | { kind: 'node'; key: string; node: ConversationNode }
   | { kind: 'tool-group'; key: string; results: readonly ToolResultNode[] }
 
+/** An assistant node that renders nothing: only tool-call heads (rows render
+ *  via the grouping pass) and blank text/reasoning. Skipped by the flow so it
+ *  neither costs column gaps nor splits a tool-row run. Interrupted nodes
+ *  always render (the 已停止 marker). */
+function rendersNothing(node: ConversationNode): boolean {
+  return node.kind === 'assistant' && node.interrupted !== true
+    && node.blocks.every(b => b.kind === 'tool-call'
+      || ((b.kind === 'text' || b.kind === 'reasoning') && b.text.trim() === ''))
+}
+
 /**
  * Group finalized nodes into the step-summary flow.
  * @param nodes - snapshot nodes (surface order).
@@ -21,6 +31,7 @@ export function deriveChatFlow(nodes: readonly ConversationNode[]): ChatFlowItem
   const items: ChatFlowItem[] = []
   let group: ToolResultNode[] | null = null
   for (const node of nodes) {
+    if (rendersNothing(node)) continue
     if (node.kind === 'tool-result') {
       if (group === null) {
         group = [node]

packages/client/ui-conversation/src/client/contract/slots.ts

@@ -143,6 +143,8 @@ export interface ToolRowOwnerProps {
   toolName: string
   /** Frozen call slice: the running call or the settled result node. */
   block: ToolCallBlock
+  /** Session workspace root; path summaries display relative to it. */
+  cwd?: string | undefined
   /** Open the details panel for this call (session-level facility, supplied by the view). */
   openDetails: () => void
 }
@@ -307,6 +309,8 @@ export type DetailsSlotProps = PropsRuntime<'details'> & PropsStore<ChatStore> &
 export interface EmptyWorkspaceOwnerProps {
   open: boolean
   anchorRef?: RefObject<HTMLElement>
+  /** Currently active workspace (renders a trailing check in the picker list). */
+  selectedId?: WorkspaceId | undefined
   onPick: (workspaceId: WorkspaceId) => void
   onClose: () => void
 }

packages/client/ui-conversation/src/client/contract/tool-call-model.ts

@@ -101,6 +101,14 @@ const SUMMARY_KEYS: Record<ToolRowVariant, readonly string[]> = {
   others: [],
 }
 
+/** Strip the workspace root from workspace-rooted absolute paths (display only). */
+function relativizeToCwd(text: string, cwd: string | undefined): string {
+  if (cwd === undefined || cwd === '') return text
+  const root = cwd.replace(/[/\\]+$/, '')
+  if (text.startsWith(`${root}/`) || text.startsWith(`${root}\\`)) return text.slice(root.length + 1)
+  return text
+}
+
 function deriveSummary(variant: ToolRowVariant, argsRaw: string): string {
   const parsed = parseArgs(argsRaw)
   if (typeof parsed !== 'object' || parsed === null) return firstLine(argsRaw)
@@ -130,16 +138,17 @@ function deriveBody(variant: ToolRowVariant, argsRaw: string): string | null {
  * Derive the full row model from a frozen call slice.
  * @param toolName - wire tool name (dispatch-supplied; survives windowless results).
  * @param block - RunningToolCall or ToolResultNode off the snapshot caches.
+ * @param cwd - session workspace root; workspace-rooted path summaries display relative to it.
  * @returns the row model.
  */
-export function toolRowModel(toolName: string, block: ToolCallBlock): ToolRowModel {
+export function toolRowModel(toolName: string, block: ToolCallBlock, cwd?: string): ToolRowModel {
   const variant = classifyTool(toolName)
   const done = 'kind' in block
   const argsRaw = (done ? block.call?.argsRaw : block.argsRaw) ?? ''
   const state: ToolRowState = !done ? 'running'
     : block.error?.code === 'interrupted' ? 'stopped'
       : block.isError ? 'error' : 'ok'
-  const base = argsRaw === '' ? block.callId : deriveSummary(variant, argsRaw)
+  const base = argsRaw === '' ? block.callId : relativizeToCwd(deriveSummary(variant, argsRaw), cwd)
   const toolTitle = TOOL_TITLES[toolName]
   // Others keeps the static "Tool call" title (figma literal); the real tool
   // name rides the mutable summary slot unless the tool owns a specific title.

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

@@ -54,8 +54,8 @@
   border: none;
   border-radius: 12px;
   background: transparent;
-  font-size: 13px;
-  line-height: 16px;
+  font-size: 14px;
+  line-height: 20px;
   color: var(--dsw-alias-label-tertiary);
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -72,13 +72,6 @@
   cursor: default;
 }
 
-.meta {
-  margin-left: 4px;
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--dsw-alias-label-tertiary);
-}
-
 /* figma Tab_Group 34:11441: 35px strip, gap 36, pad-left 8, tabs bottom-aligned. */
 .tabs {
   display: flex;
@@ -87,7 +80,7 @@
   padding-left: 8px;
 }
 
-/* figma .Tab 34:11442: 13/16 wt510 text, gap 8 to the 3px bar (no bottom rounding). */
+/* figma .Tab 34:11442: 13/16 text (figma wt510, rendered 500), gap 8 to the 3px bar (no bottom rounding). */
 .tab {
   position: relative;
   padding: 0 0 11px;
@@ -95,7 +88,7 @@
   background: transparent;
   font-size: 13px;
   line-height: 16px;
-  font-weight: 510;
+  font-weight: 500;
   color: var(--dsw-alias-label-tertiary);
   cursor: pointer;
 }
@@ -139,11 +132,45 @@
    NOT absolute+transform: a transform would make this box the containing
    block for position:fixed descendants (pickers/modals), shrinking them. */
 .composerHero {
+  position: relative; /* .heroGlow positioning context */
   align-self: center;
+  /* figma 75:8208: 12 between hero chrome / workspace row / card. */
+  gap: 12px;
+  /* Foot inside the centered box floats the stack a bit above true center. */
+  padding-bottom: 32px;
   width: min(776px, calc(100% - 48px));
   z-index: 1;
 }
 
+/* Blue backdrop ellipse (figma 313:14109), centered on the input card: the
+   card's resting center sits ~92px above the stack bottom (32 foot pad +
+   half of the ~120px two-row card); width tracks the card (glow asset 1051
+   vs design card 776) so blur scales in userSpace with it. z-index -1 keeps
+   it behind the in-flow hero content inside this stacking context. */
+.heroGlow {
+  position: absolute;
+  left: 50%;
+  bottom: 92px;
+  z-index: -1;
+  width: calc(100% * 1051 / 776);
+  aspect-ratio: 1051 / 468;
+  transform: translate(-50%, 50%);
+  pointer-events: none;
+}
+
+.heroWorkspaceRow {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  padding-left: 8px;
+}
+
 .root[data-phase='hero'] {
   justify-content: center;
 }
+
+/* Settling (session replaying, hero/docked unknown): keep the composer
+   mounted but invisible so no wrong layout flashes before the phase lands. */
+.root[data-phase='settling'] .composerStack {
+  visibility: hidden;
+}

packages/client/ui-conversation/src/client/skeleton/ConversationRoot.tsx

@@ -6,7 +6,7 @@ import { useEffect, useRef, useState } from 'react'
 import clsx from 'clsx'
 import type { WorkspaceId } from '@deepseek-ai/dsh-client-runtime/client'
 import type { ConversationSlotProps, InputZone } from '../contract/slots.ts'
-import { HeroShell, WorkspaceChip, workspaceLabel } from './EmptyHero.tsx'
+import { HeroGlow, HeroShell, WorkspaceChip, workspaceLabel } from './EmptyHero.tsx'
 import { DisabledInputBar } from './DisabledInputBar.tsx'
 import css from './ConversationRoot.module.css'
 
@@ -36,33 +36,53 @@ export function ConversationRoot({
     workspace => workspace.workspaceId === pendingWorkspaceId,
   )
 
+  // Clear the pending pick once the session lands in it, or when the picked
+  // workspace disappears from a ready list (deleted from the sidebar).
   useEffect(() => {
-    if (pendingWorkspaceId !== undefined
-      && sessionWorkspace?.workspaceId === pendingWorkspaceId) {
+    if (pendingWorkspaceId === undefined) return
+    if (sessionWorkspace?.workspaceId === pendingWorkspaceId
+      || (workspaces.phase === 'ready' && pendingWorkspace === undefined)) {
       setPendingWorkspaceId(undefined)
     }
-  }, [pendingWorkspaceId, sessionWorkspace?.workspaceId])
+  }, [pendingWorkspaceId, sessionWorkspace?.workspaceId, workspaces.phase, pendingWorkspace])
 
-  const hero = sessionId === undefined || (composerPhase === 'blank' && (openState === 'open' || openState === 'loading'))
+  // While a session is still replaying (loading + blank) the hero/docked
+  // choice is unknowable — render the composer hidden instead of flashing
+  // the centered hero and snapping to the docked bar (or vice versa).
+  const settling = sessionId !== undefined && composerPhase === 'blank' && openState === 'loading'
+  const hero = sessionId === undefined || (composerPhase === 'blank' && openState === 'open')
   const zone: InputZone | undefined =
     session === undefined || inputState === undefined ? undefined : { session, input: inputState }
 
+  // Flow optimization — worth a close PR review for code/boundary issues.
+  // The chip is a selector; label resolution walks the flow top-down:
+  //   1. a just-picked workspace (pending) → its title;
+  //   2. cold start, no session yet → placeholder ("Choose workspace");
+  //   3. the blank session's workspace is in the list → its title;
+  //   4. list still loading → cwd folder name bridges so the title does not
+  //      flash on refresh (empty cwd → placeholder);
+  //   5. list ready but no owning workspace (deleted from the sidebar) →
+  //      placeholder, never the deleted folder's name via cwd.
+  const chipTitle = pendingWorkspace?.title
+    ?? (sessionId === undefined
+      ? undefined
+      : sessionWorkspace?.title
+        ?? (workspaces.phase === 'ready' || cwd === undefined || cwd === ''
+          ? undefined
+          : workspaceLabel(cwd)))
+
   const heroWorkspaceRow = (
-    <>
+    <div className={css.heroWorkspaceRow}>
       <WorkspaceChip
         buttonRef={pickerAnchor}
-        label={
-          pendingWorkspace?.title
-          ?? (sessionId === undefined
-            ? workspaceLabel('')
-            : sessionWorkspace?.title ?? workspaceLabel(cwd ?? ''))
-        }
+        label={chipTitle}
         menuOpen={pickerOpen}
         onClick={() => { setPickerOpen(open => !open) }}
       />
       {renderSlot('conversation.hero.workspace', {
         open: pickerOpen,
         anchorRef: pickerAnchor,
+        selectedId: pendingWorkspaceId ?? sessionWorkspace?.workspaceId,
         onPick: (workspaceId) => {
           setPickerOpen(false)
           setPendingWorkspaceId(workspaceId)
@@ -72,10 +92,13 @@ export function ConversationRoot({
         },
         onClose: () => { setPickerOpen(false) },
       })}
-    </>
+    </div>
   )
 
-  const inputBar = sessionId === undefined
+  // The placeholder chip ("Choose workspace") and the inert input travel
+  // together: a blank session whose workspace vanished (deleted from the
+  // sidebar) reverts to the same disabled bar as the initial no-session state.
+  const inputBar = sessionId === undefined || (hero && chipTitle === undefined)
     ? <DisabledInputBar />
     : renderSlot('conversation.composer.bar', {
       variant: hero ? 'hero' : 'composer',
@@ -87,6 +110,7 @@ export function ConversationRoot({
 
   const composerBar = (
     <div className={clsx(css.composerStack, hero && css.composerHero)}>
+      {hero && <HeroGlow className={css.heroGlow} />}
       {hero && <HeroShell />}
       {hero && heroWorkspaceRow}
       {!hero && zone !== undefined && renderSlot('conversation.input.dock', zone)}
@@ -96,7 +120,7 @@ export function ConversationRoot({
   )
 
   return (
-    <div className={css.root} data-phase={hero ? 'hero' : 'active'}>
+    <div className={css.root} data-phase={settling ? 'settling' : hero ? 'hero' : 'active'}>
       {/* Mounted for every real session, hero included: ConversationSession
           renders no chrome while blank but owns the draft-persistence mirror
           bind — unmounting it in the hero would lose pre-first-send text on

packages/client/ui-conversation/src/client/skeleton/ConversationSession.tsx

@@ -31,7 +31,6 @@ export function ConversationSession({
   const activeId = useStore(s => s.view) ?? 'chat'
   const active = tabs.find(view => view.id === activeId) ?? tabs[0]
   const ancestry = useSessions(s => deriveAncestry(s, sessionId), shallowEqual)
-  const turns = useSession(s => countTurns(s))
   const composerPhase = useSession(s => s.composerPhase)
   const blank = useSession(s => s.blank)
   const inputState = useInput(s => s)
@@ -69,7 +68,6 @@ export function ConversationSession({
               )
             })}
             {ancestry.length === 0 && <span className={css.crumbCurrent}>{sessionId}</span>}
-            <span className={css.meta}>· {turns} turns</span>
           </nav>
         </div>
         {tabs.length > 1 && (
@@ -95,9 +93,3 @@ export function ConversationSession({
     </>
   )
 }
-
-function countTurns(snapshot: { nodes: readonly { kind: string }[] }): number {
-  let count = 0
-  for (const node of snapshot.nodes) if (node.kind === 'user') count += 1
-  return count
-}

packages/client/ui-conversation/src/client/skeleton/DisabledInputBar.tsx

@@ -29,7 +29,7 @@ export function DisabledInputBar() {
           <div className={css.trailing}>
             <button type="button" className={css.primary} aria-label="Send message" disabled>
               <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
-                <path d="M8 13V3.8M8 3.8L3.8 8M8 3.8L12.2 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                <path d="M8.3125 0.980183C8.66767 1.0531 8.97902 1.20418 9.2627 1.43233C9.48724 1.61297 9.73029 1.85793 9.97949 2.10714L14.707 6.83468L13.293 8.24874L9 3.95577V15.0417H7V3.95577L2.70703 8.24874L1.29297 6.83468L6.02051 2.10714C6.26971 1.85793 6.51277 1.61297 6.7373 1.43233C6.97662 1.23986 7.28445 1.04402 7.6875 0.980183C7.8973 0.947006 8.1031 0.95516 8.3125 0.980183Z" fill="currentColor" />
               </svg>
             </button>
           </div>

packages/client/ui-conversation/src/client/skeleton/EmptyHero.tsx

@@ -7,20 +7,18 @@
 import { useId } from 'react'
 import type { ReactNode, RefObject } from 'react'
 import {
-  FishLogo, IconChevronDownOutline14, IconFolderOpen16,
+  FishLogo, IconChevronDownOutline14, IconFolderClose16, IconFolderOpen16,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import { workspaceTitleOf } from '@deepseek-ai/dsh-client-runtime/client'
 import css from './HeroShell.module.css'
 
 /**
- * Basename label for the workspace chip / menu rows (the shared derivation);
- * empty → the design's "New Workspace" placeholder copy; separator-only
- * paths echo the raw cwd.
- * @param cwd - workspace directory path ('' for none).
+ * Basename label for the workspace chip (the shared derivation);
+ * separator-only paths echo the raw cwd.
+ * @param cwd - workspace directory path (non-empty).
  * @returns chip label.
  */
 export function workspaceLabel(cwd: string): string {
-  if (cwd === '') return 'New Workspace'
   const base = workspaceTitleOf(cwd)
   return base !== '' ? base : cwd
 }
@@ -28,15 +26,17 @@ export function workspaceLabel(cwd: string): string {
 /**
  * The workspace chip (folder + label + chevron), always interactive: before
  * the first message the workspace stays switchable — picking another one
- * moves the New Session flow to that workspace's blank session.
- * @param props.label - chip label (see {@link workspaceLabel}).
+ * moves the New Session flow to that workspace's blank session. Without a
+ * label the chip renders its placeholder state: closed folder + the
+ * "Choose workspace" call to action.
+ * @param props.label - chip label (see {@link workspaceLabel}); omitted → placeholder.
  * @param props.menuOpen - menu expansion echo.
  * @param props.onClick - menu toggle.
  * @returns the chip button element.
  */
 export function WorkspaceChip({ buttonRef, label, menuOpen = false, onClick }: {
   buttonRef?: RefObject<HTMLButtonElement>
-  label: string
+  label?: string | undefined
   menuOpen?: boolean
   onClick?: () => void
 }) {
@@ -50,13 +50,49 @@ export function WorkspaceChip({ buttonRef, label, menuOpen = false, onClick }: {
       aria-expanded={menuOpen}
       onClick={onClick}
     >
-      <IconFolderOpen16 className={css.folder} size={16} />
-      <span className={css.workspaceLabel}>{label}</span>
+      {label === undefined
+        ? <IconFolderClose16 className={css.folder} size={16} />
+        : <IconFolderOpen16 className={css.folder} size={16} />}
+      <span className={css.workspaceLabel}>{label ?? 'Choose workspace'}</span>
       <IconChevronDownOutline14 className={css.chevron} size={12} />
     </button>
   )
 }
 
+/**
+ * The soft blue backdrop ellipse (figma 313:14109). Rendered by the hero
+ * owner (ConversationRoot), not HeroShell, so it can center on the input
+ * card; the owner's className supplies all positioning.
+ * @param props.className - positioning class from the owner.
+ * @returns the blurred-ellipse svg element.
+ */
+export function HeroGlow({ className }: { className?: string | undefined }) {
+  // Stable filter id so multiple hero mounts do not collide in the DOM.
+  const glowFilterId = `empty-glow-${useId().replace(/:/g, '')}`
+  return (
+    <svg className={className} viewBox="0 0 1051 468" fill="none" aria-hidden="true">
+      <defs>
+        <filter
+          id={glowFilterId}
+          x="0"
+          y="0"
+          width="1051"
+          height="468"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur" />
+        </filter>
+      </defs>
+      <g filter={`url(#${glowFilterId})`}>
+        <ellipse cx="525.5" cy="234" rx="425.5" ry="134" fill="#6187D8" fillOpacity="0.08" />
+      </g>
+    </svg>
+  )
+}
+
 /** Hero chrome props. The workspace row rides the InputBar accessory hole, not here. */
 export interface HeroShellProps {
   /** Overlay content after the stack (modals). */
@@ -64,13 +100,12 @@ export interface HeroShellProps {
 }
 
 /**
- * Render the hero chrome (headline + glow; no composer, no workspace row).
+ * Render the hero chrome (headline only; no glow, no composer, no workspace
+ * row — the glow is the owner's {@link HeroGlow}).
  * @param props - see {@link HeroShellProps}.
  * @returns the centered hero element tree.
  */
 export function HeroShell({ children }: HeroShellProps) {
-  // Stable filter id so multiple hero mounts do not collide in the DOM.
-  const glowFilterId = `empty-glow-${useId().replace(/:/g, '')}`
   return (
     <div className={css.root}>
       <div className={css.stack}>
@@ -80,29 +115,6 @@ export function HeroShell({ children }: HeroShellProps) {
           Let&apos;s start building
         </div>
         <div className={css.body}>
-          {/* figma 313:14109: soft ellipse behind workspace + composer; width
-              tracks the card (glow asset 1051 vs design card 776) so blur
-              scales in userSpace with it. */}
-          <svg className={css.glow} viewBox="0 0 1051 468" fill="none" aria-hidden="true">
-            <defs>
-              <filter
-                id={glowFilterId}
-                x="0"
-                y="0"
-                width="1051"
-                height="468"
-                filterUnits="userSpaceOnUse"
-                colorInterpolationFilters="sRGB"
-              >
-                <feFlood floodOpacity="0" result="BackgroundImageFix" />
-                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-                <feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur" />
-              </filter>
-            </defs>
-            <g filter={`url(#${glowFilterId})`}>
-              <ellipse cx="525.5" cy="234" rx="425.5" ry="134" fill="#6187D8" fillOpacity="0.1" />
-            </g>
-          </svg>
           {/* The resident composer (rendered by ConversationRoot at its stable
               tree position; the workspace row rides its accessory hole) is
               CSS-positioned into this gap during the hero phase — see

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

@@ -8,8 +8,7 @@
   justify-content: center;
   height: 100%;
   min-width: 0;
-  padding: 24px;
-  margin-bottom: -70px;
+  padding: 0 24px;
 }
 
 /* Cap matches InputBar card width (800). Glow may paint past the sides. */
@@ -24,17 +23,15 @@
   overflow: visible;
 }
 
-/* figma 34:10411: fish + title, gap 10, centered; 26/32 wt600; title block
-   keeps 36px below the headline before the flex gap. */
+/* figma 34:10411: fish + title, gap 10, centered; 26/32 wt500. */
 .headline {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
-  padding-bottom: 36px;
   font-size: 26px;
   line-height: 32px;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--dsw-alias-label-primary);
 }
 
@@ -44,8 +41,9 @@
   color: var(--dsw-alias-state-business-primary);
 }
 
-/* Workspace row sits 12px above the input card (figma y80 → y112). Glow is
-   centered on this block so it stays under the picker + InputBar together. */
+/* Workspace row sits 12px above the input card (figma y80 → y112). The blue
+   glow lives with the owner (ConversationRoot .heroGlow) so it can center on
+   the input card. */
 .body {
   position: relative;
   display: flex;
@@ -55,19 +53,7 @@
   overflow: visible;
 }
 
-/* Design input 776 → glow SVG 1051×468 (ellipse 851×268 + blur pad). */
-.glow {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  z-index: 0;
-  width: calc(100% * 1051 / 776);
-  aspect-ratio: 1051 / 468;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-}
-
-.body > :not(.glow) {
+.body > * {
   position: relative;
   z-index: 1;
 }
@@ -88,7 +74,7 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  max-width: fit-content;
+  max-width: min(100%, 360px);
   min-height: 28px;
   padding: 0 8px;
   border: none;

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

@@ -171,6 +171,10 @@
 .input,
 .mirror,
 .backdrop {
+  /* Textareas default to content-box (unlike buttons/inputs): without this the
+     width:100% textarea gains its padding OUTSIDE the card and text runs past
+     the right padding — and wraps 28px later than the mirror/backdrop layers. */
+  box-sizing: border-box;
   /* figma .InputText 34:10434: pl 16 / pr 12 / pt 4. Backdrop MUST share these
      metrics or the highlight ranges drift off the glyphs. */
   padding: 4px 12px 0 16px;
@@ -306,11 +310,14 @@
   border: none;
   border-radius: 999px;
   background: var(--dsw-alias-button-info-fill);
-  color: var(--dsw-alias-label-primary-foreground);
+  /* Static white, not the foreground token: the arrow stays white on the blue
+     fill in both themes (design 34:10465). */
+  color: #fff;
   cursor: pointer;
+  transition: background-color 100ms ease;
 }
 
-.primary:hover {
+.primary:hover:not(:disabled) {
   background: var(--dsw-alias-button-info-hover);
 }
 
@@ -319,14 +326,6 @@
   cursor: default;
 }
 
-/* Stop state: same slot, dimmed brand fill — the running-state send-key
-   replacement is a design gap filled by us (figma gives no stop form). */
-.stopping,
-.stopping:hover {
-  background: var(--dsw-alias-button-primary-dimmed);
-  color: var(--dsw-alias-label-primary);
-}
-
 .retry {
   margin-left: 8px;
   padding: 1px 8px;

packages/client/ui-conversation/src/client/skeleton/InputBar.tsx

@@ -372,7 +372,7 @@ export function InputBar({
             {machineBusy && <span className={css.pending} data-input-pending aria-label="处理中" />}
             <button
               type="button"
-              className={clsx(css.primary, running && css.stopping)}
+              className={css.primary}
               aria-label={primaryLabel}
               title={primaryLabel}
               disabled={!running && (empty || disabled || machineBusy)}
@@ -381,11 +381,11 @@ export function InputBar({
             >
               {running ? (
                 <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
-                  <rect x="4" y="4" width="8" height="8" rx="1.5" fill="currentColor" />
+                  <rect x="3" y="3" width="10" height="10" rx="3" fill="currentColor" />
                 </svg>
               ) : (
                 <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
-                  <path d="M8 13V3.8M8 3.8L3.8 8M8 3.8L12.2 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                  <path d="M8.3125 0.980183C8.66767 1.0531 8.97902 1.20418 9.2627 1.43233C9.48724 1.61297 9.73029 1.85793 9.97949 2.10714L14.707 6.83468L13.293 8.24874L9 3.95577V15.0417H7V3.95577L2.70703 8.24874L1.29297 6.83468L6.02051 2.10714C6.26971 1.85793 6.51277 1.61297 6.7373 1.43233C6.97662 1.23986 7.28445 1.04402 7.6875 0.980183C7.8973 0.947006 8.1031 0.95516 8.3125 0.980183Z" fill="currentColor" />
                 </svg>
               )}
             </button>

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

@@ -92,15 +92,15 @@
   color: var(--dsw-alias-state-success-primary);
 }
 
+.glyphPending {
+  color: var(--dsw-alias-label-caption);
+}
+
 .glyphProgress {
   color: var(--dsw-alias-state-business-primary);
   animation: todo-progress-spin 1s linear infinite;
 }
 
-.glyphPending {
-  color: var(--dsw-alias-label-caption);
-}
-
 @keyframes todo-progress-spin {
   to {
     transform: rotate(360deg);

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

@@ -1,6 +1,8 @@
 /* Bash toolview: same geometry/tokens as ToolRow (figma Bash · description). */
 
 .root {
+  position: relative; /* sweep-glare overlay anchor */
+  overflow: hidden;
   display: flex;
   align-items: center;
   height: 24px;
@@ -9,8 +11,27 @@
   border-radius: 6px;
 }
 
-.root:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
+/* Running sweep glare — same deepsuite ShimmerText pattern as ToolRow. */
+.root[data-state='running']::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 300px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in srgb, var(--dsw-alias-bg-base) 60%, transparent) 55%,
+    transparent 100%
+  );
+  animation: dsh-bash-row-sweep 2.6s ease-out infinite;
+  pointer-events: none;
+}
+
+@keyframes dsh-bash-row-sweep {
+  0% { left: -300px; }
+  90%, 100% { left: 100%; }
 }
 
 .leading {
@@ -39,7 +60,7 @@
   flex: none;
   font-size: 14px;
   line-height: 24px;
-  color: var(--dsw-alias-label-primary-dimmed);
+  color: var(--dsw-alias-label-secondary);
 }
 
 .sep {

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

@@ -12,10 +12,10 @@ import css from './bash-sample.module.css'
 
 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} />
+    // Running keeps the icon — the row sweep carries the in-flight signal.
+    default: return <IconApiOutline14 size={14} />
   }
 }
 

packages/client/ui-conversation/src/client/toolviews/todo-row.module.css

@@ -10,10 +10,6 @@
   border-radius: 6px;
 }
 
-.row:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
 .leading {
   flex: none;
   width: 16px;
@@ -29,6 +25,7 @@
   flex: none;
   font-size: 14px;
   line-height: 24px;
+  font-weight: 500; /* figma wt510, rendered 500 */
   color: var(--dsw-alias-label-primary-dimmed);
 }
 

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

@@ -255,7 +255,7 @@ describe('run_code sub-calls through the real chat machinery', () => {
     const b = await bench(snapshotWith([], dispatches, [runningCode(parent)]))
     const view = mountApp(b.slots)
     // The nested row derives 'running' from the RunningToolCall shape — the
-    // same StateDot ring a native in-flight row wears.
+    // same data-state chrome (row sweep) a native in-flight row wears.
     const nested = view.container.querySelector('[data-subcalls] [data-variant][data-state="running"]')
     expect(nested).not.toBeNull()
   })

packages/client/ui-conversation/tests/chat-tool-row.spec.tsx

@@ -64,6 +64,16 @@ describe('tool-call-model', () => {
     expect(toolRowModel('', running({ argsRaw: '' })).summary).toBe('c1')
   })
 
+  it('displays workspace-rooted paths relative to the session cwd', () => {
+    const cwd = '/Users/u/ws/'
+    expect(toolRowModel('edit', running({ name: 'edit', argsRaw: '{"file_path":"/Users/u/ws/src/x.ts"}' }), cwd).summary).toBe('src/x.ts')
+    expect(toolRowModel('read', running({ name: 'read', argsRaw: '{"path":"/Users/u/ws/a.md"}' }), cwd).summary).toBe('a.md')
+    // Paths outside the workspace (and non-path summaries) stay verbatim.
+    expect(toolRowModel('read', running({ name: 'read', argsRaw: '{"path":"/etc/hosts"}' }), cwd).summary).toBe('/etc/hosts')
+    expect(toolRowModel('bash', running({ argsRaw: '{"command":"pwd"}' }), cwd).summary).toBe('pwd')
+    expect(toolRowModel('read', running({ name: 'read', argsRaw: '{"path":"/Users/u/ws/a.md"}' }), '').summary).toBe('/Users/u/ws/a.md')
+  })
+
   it('body pretty-prints JSON args, keeps raw non-JSON, null when empty', () => {
     expect(toolRowModel('bash', running({ argsRaw: '{"a":1}' })).body).toBe('{\n  "a": 1\n}')
     expect(toolRowModel('bash', running({ argsRaw: 'raw' })).body).toBe('raw')
@@ -125,12 +135,12 @@ describe('ToolRow', () => {
     expect(view.getByText('List files')).toBeTruthy()
   })
 
-  it('running and error states replace the icon with a StateDot', () => {
+  it('running keeps the icon (row sweep carries the signal); error swaps in a StateDot', () => {
     const runningView = render(<ToolRow {...rowProps} state="running" />)
-    expect(runningView.queryByTestId('tool-icon')).toBeNull()
+    expect(runningView.queryByTestId('tool-icon')).not.toBeNull()
     expect(runningView.container.querySelector('[data-state="running"]')).not.toBeNull()
     const errorView = render(<ToolRow {...rowProps} state="error" />)
-    expect(errorView.queryByTestId('tool-icon')).toBeNull()
+    expect(errorView.container.querySelector('[data-testid="tool-icon"]')).toBeNull()
   })
 
   it('non-expandable rows render a passive leading slot', () => {

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

@@ -131,6 +131,22 @@ describe('chat-flow derivation', () => {
     expect(flowKeys(items)).toBe('n1|n2|g3|n5|g6')
     expect(flowKeys(deriveChatFlow([...nodes, toolResult(7, 'd')]))).toBe('n1|n2|g3|n5|g6')
   })
+
+  it('skips render-nothing assistant nodes so tool runs stay one group', () => {
+    // A tool-call-only step message (and blank text/reasoning) renders nothing:
+    // it must not split the run into two groups with an empty line between.
+    const headsOnly: AssistantMessageNode = {
+      kind: 'assistant', seq: 4, time: 4_000, turn: 1, step: 2,
+      blocks: [{ kind: 'tool-call', callId: 'b', name: 'read', argsRaw: '{}' }, { kind: 'text', text: ' \n' }, { kind: 'reasoning', text: '' }],
+    }
+    const items = deriveChatFlow([toolResult(3, 'a'), headsOnly, toolResult(5, 'b')])
+    expect(flowKeys(items)).toBe('g3')
+    const group = items[0]!
+    expect(group.kind === 'tool-group' && group.results.map(r => r.callId)).toEqual(['a', 'b'])
+    // Interrupted and visible-content nodes still render (已停止 marker / prose).
+    expect(flowKeys(deriveChatFlow([toolResult(3, 'a'), { ...headsOnly, interrupted: true }, toolResult(5, 'b')]))).toBe('g3|n4|g5')
+    expect(flowKeys(deriveChatFlow([toolResult(3, 'a'), assistant(4, 'found'), toolResult(5, 'b')]))).toBe('g3|n4|g5')
+  })
 })
 
 describe('ChatView', () => {

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

@@ -90,7 +90,7 @@ describe('tails', () => {
     expect(view.container.querySelector('[data-state="ok"]')).not.toBeNull()
   })
 
-  it('BashRow shows StateDot chrome for running/error/stopped (root session arm)', () => {
+  it('BashRow carries data-state for running (row sweep) and StateDots for error/stopped (root session arm)', () => {
     const sid = 'root-1' as SessionId
     const list = createSnapshotStore<SessionListState>({
       ids: [sid],

packages/client/ui-model/src/client/ModelSelect.module.css

@@ -72,9 +72,11 @@
   max-height: min(360px, calc(100vh - 96px));
   overflow: hidden;
   padding: 4px;
-  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
+  /* Surface tokens match the Menu primitive card (ui-primitives
+   * Menu.module.css) so every dropdown reads as the same material. */
+  border: 1px solid var(--dsw-alias-border-inverted);
   border-radius: 12px;
-  background: var(--dsw-specific-input-major);
+  background: var(--dsw-specific-menu);
   box-shadow: var(--dsw-shadow-lv3);
   color: var(--dsw-alias-label-primary);
 }
@@ -132,7 +134,7 @@
   top: 0;
   z-index: 1;
   padding: 5px 8px 3px;
-  background: var(--dsw-specific-input-major);
+  background: var(--dsw-specific-menu);
   color: var(--dsw-alias-label-tertiary);
   font-size: 12px;
   line-height: 18px;
@@ -156,11 +158,16 @@
 }
 
 .option:hover:not(:disabled),
-.option:focus-visible,
-.selected {
+.option:focus-visible {
   background: var(--dsw-alias-interactive-bg-hover);
 }
 
+/* Selection marker is the trailing check, not a fill — matches the Menu
+ * primitive's selected treatment. */
+.selected {
+  background: transparent;
+}
+
 .option:disabled {
   color: var(--dsw-alias-label-dimmed);
   cursor: default;
@@ -201,7 +208,7 @@
   display: grid;
   place-items: center;
   flex: 0 0 18px;
-  color: var(--dsw-alias-state-business-primary);
+  color: var(--dsw-alias-label-primary);
 }
 
 /* Two-level root cells (figma 496:26454 .Menu_cell): 40px row, 10px side

packages/client/ui-primitives/src/Button.module.css

@@ -18,7 +18,7 @@
 
 .button:disabled {
   cursor: not-allowed;
-  color: var(--dsw-alias-label-dimmed);
+  opacity: 0.4;
 }
 
 .md {
@@ -44,10 +44,6 @@
   background: var(--dsw-alias-button-primary-hover);
 }
 
-.primary:disabled {
-  background: var(--dsw-alias-button-primary-dimmed);
-}
-
 .ghost:hover:not(:disabled) {
   background: var(--dsw-alias-interactive-bg-hover);
 }
@@ -66,10 +62,6 @@
   background: var(--dsw-alias-interactive-bg-hover);
 }
 
-.outline:disabled {
-  border-color: var(--dsw-alias-border-l1);
-}
-
 .toolbar {
   background: var(--dsw-alias-button-tool-bar-fill);
 }

packages/client/ui-primitives/src/Menu.module.css

@@ -26,6 +26,7 @@
   left: 0;
   z-index: 100;
   min-width: 218px;
+  max-width: 360px;
 }
 
 /* Portal mode: fixed in the viewport, coordinates supplied inline from the
@@ -50,6 +51,36 @@
   right: 0;
 }
 
+/* Viewport fit: the card stops 12px short of the viewport's top/bottom edges
+ * (24 = 2 × the portal MARGIN in Menu.tsx) and taller content scrolls inside
+ * .viewport, so a pinned .footer stays visible. Menus with submenu rows skip
+ * this class — the overflow clip would crop the side card, so they rely on
+ * staying short. */
+.scrollable {
+  max-height: calc(100vh - 24px);
+}
+
+.viewport {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.scrollable .viewport {
+  overflow-y: auto;
+}
+
+/* Pinned rows below the scroll region; l2 hairline (l1 is near-invisible on
+ * the menu surface) mirrors the .separator spacing. */
+.footer {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
 .itemWrap {
   position: relative;
 }
@@ -78,7 +109,7 @@
 }
 
 .item:disabled {
-  color: var(--dsw-alias-label-dimmed);
+  opacity: 0.4;
   cursor: not-allowed;
 }
 

packages/client/ui-primitives/src/Menu.tsx

@@ -5,6 +5,8 @@
 // The owner controls `open`; outside-click closing uses one document listener
 // active only while open. Submenus open on hover/focus inside the same root.
 // Entries also cover non-interactive `label` headings and `danger` rows.
+// Lists keep 12px clearance to the viewport's top/bottom edges and scroll
+// internally past that; submenu-bearing menus are exempt (see .scrollable).
 
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import type { CSSProperties, ReactNode } from 'react'
@@ -50,6 +52,9 @@ function isLabel(entry: MenuEntry): entry is MenuLabel {
   return 'type' in entry && entry.type === 'label'
 }
 
+/** Unplaced portal list: hidden but laid out at a fixed origin so offsetWidth/offsetHeight are real. */
+const MEASURE_STYLE: CSSProperties = { visibility: 'hidden', left: 0, top: 0 }
+
 /**
  * Render an anchored dropdown menu.
  * @param props.open - whether the list is showing (owner-controlled).
@@ -72,17 +77,20 @@ function isLabel(entry: MenuEntry): entry is MenuLabel {
  * the trigger (render-prop anchors, effect-positioned proxies — measuring the
  * wrapper there races the host's layout effects). Called on open and on every
  * scroll/resize; return null to skip placement for that frame.
+ * @param props.footer - rows pinned below the scrolling items area, separated
+ * by a hairline; they stay visible while the items above scroll.
  * @returns anchor wrapper with the conditional list.
  */
-export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align = 'start', side = 'bottom', portal = false, closeOnPointerLeave = false, getAnchorRect, className }: {
+export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align = 'start', side = 'bottom', portal = false, closeOnPointerLeave = false, getAnchorRect, footer, className }: {
   open: boolean
   anchor: ReactNode
   items: readonly MenuEntry[]
-  selectedId?: string
+  footer?: readonly MenuEntry[]
+  selectedId?: string | undefined
   onSelect: (id: string) => void
   onClose: () => void
   align?: 'start' | 'end'
-  side?: 'bottom' | 'top'
+  side?: 'bottom' | 'top' | 'right'
   portal?: boolean
   closeOnPointerLeave?: boolean
   getAnchorRect?: () => DOMRect | null
@@ -109,11 +117,34 @@ export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align
         r = rootRef.current?.getBoundingClientRect() ?? null
       }
       if (r === null) return
-      setFixedPos({
-        ...(align === 'start' ? { left: r.left } : { right: window.innerWidth - r.right }),
-        ...(side === 'bottom' ? { top: r.bottom + 4 } : { bottom: window.innerHeight - r.top + 4 }),
-      })
+      const MARGIN = 12
+      const vw = window.innerWidth
+      const vh = window.innerHeight
+      const listEl = listRef.current
+      const lw = listEl?.offsetWidth ?? 0
+      const lh = listEl?.offsetHeight ?? 0
+
+      let x: number
+      let y: number
+      if (side === 'right') {
+        x = r.right + 4
+        y = r.top
+      } else if (align === 'start') {
+        x = r.left
+        y = side === 'bottom' ? r.bottom + 4 : r.top - lh - 4
+      } else {
+        x = r.right - lw
+        y = side === 'bottom' ? r.bottom + 4 : r.top - lh - 4
+      }
+
+      if (lw > 0) x = Math.min(Math.max(x, MARGIN), vw - lw - MARGIN)
+      if (lh > 0) y = Math.min(Math.max(y, MARGIN), vh - lh - MARGIN)
+
+      setFixedPos({ left: x, top: y })
     }
+    // First run measures the hidden pre-render (same commit as `open`), so
+    // end/top alignment and clamping use real dimensions before anything
+    // paints — no visible jump from a zero-size first guess.
     place()
     window.addEventListener('scroll', place, true)
     window.addEventListener('resize', place)
@@ -146,11 +177,77 @@ export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align
     }
   }, [open, onClose])
 
-  const list = open && (!portal || fixedPos !== null) && (
+  // The submenu card is absolutely positioned outside the list box; the
+  // scroll clip would crop it, so only submenu-free menus get the height cap.
+  const scrollable = !items.some(entry => !isSeparator(entry) && !isLabel(entry) && entry.submenu !== undefined && entry.submenu.length > 0)
+
+  const renderEntry = (entry: MenuEntry) => {
+    if (isSeparator(entry)) {
+      return <div key={entry.id} className={css.separator} role="separator" />
+    }
+    if (isLabel(entry)) {
+      return <div key={entry.id} className={css.label} role="presentation">{entry.text}</div>
+    }
+    const hasSub = entry.submenu !== undefined && entry.submenu.length > 0
+    const subOpen = hasSub && openSubmenuId === entry.id
+    return (
+      <div
+        key={entry.id}
+        className={css.itemWrap}
+        onMouseEnter={() => { setOpenSubmenuId(hasSub ? entry.id : null) }}
+        onMouseLeave={() => { setOpenSubmenuId(null) }}
+      >
+        <button
+          type="button"
+          role="menuitem"
+          className={clsx(css.item, entry.id === selectedId && css.selected, entry.danger === true && css.danger)}
+          disabled={entry.disabled}
+          aria-haspopup={hasSub ? 'menu' : undefined}
+          aria-expanded={hasSub ? subOpen : undefined}
+          onFocus={() => { setOpenSubmenuId(hasSub ? entry.id : null) }}
+          onClick={() => {
+            if (hasSub) {
+              setOpenSubmenuId(entry.id)
+              return
+            }
+            onSelect(entry.id)
+          }}
+        >
+          {entry.icon !== undefined && <span className={css.itemIcon}>{entry.icon}</span>}
+          <span className={css.itemLabel}>{entry.label}</span>
+          {/* Selection marker is a trailing check (figma .Menu_cell), not a fill. */}
+          {entry.id === selectedId && <IconCheckOutline16 className={css.check} />}
+        </button>
+        {subOpen && entry.submenu !== undefined && (
+          <div className={css.submenu} role="menu">
+            {entry.submenu.map(sub => (
+              <button
+                key={sub.id}
+                type="button"
+                role="menuitem"
+                className={css.item}
+                disabled={sub.disabled}
+                onClick={() => { onSelect(sub.id) }}
+              >
+                {sub.icon !== undefined && <span className={css.itemIcon}>{sub.icon}</span>}
+                <span className={css.itemLabel}>{sub.label}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  // Portal lists render hidden until placed: the placement effect measures
+  // this pre-render in the same commit, so the first painted frame is
+  // already at the final position (with getAnchorRect returning null the
+  // list simply stays hidden).
+  const list = open && (
     <div
       ref={listRef}
-      className={clsx(css.list, portal && css.portal, side === 'top' && !portal && css.sideTop, align === 'end' && !portal && css.alignEnd)}
-      style={fixedPos ?? undefined}
+      className={clsx(css.list, scrollable && css.scrollable, portal && css.portal, side === 'top' && !portal && css.sideTop, align === 'end' && !portal && css.alignEnd)}
+      style={portal ? fixedPos ?? MEASURE_STYLE : undefined}
       role="menu"
       onPointerLeave={closeOnPointerLeave ? () => { onClose() } : undefined}
       // React portals bubble synthetic events through the REACT tree: without
@@ -158,63 +255,14 @@ export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align
       // (open/toggle) after onSelect.
       onClick={(e) => { e.stopPropagation() }}
     >
-      {items.map((entry) => {
-        if (isSeparator(entry)) {
-          return <div key={entry.id} className={css.separator} role="separator" />
-        }
-        if (isLabel(entry)) {
-          return <div key={entry.id} className={css.label} role="presentation">{entry.text}</div>
-        }
-        const hasSub = entry.submenu !== undefined && entry.submenu.length > 0
-        const subOpen = hasSub && openSubmenuId === entry.id
-        return (
-          <div
-            key={entry.id}
-            className={css.itemWrap}
-            onMouseEnter={() => { setOpenSubmenuId(hasSub ? entry.id : null) }}
-            onMouseLeave={() => { setOpenSubmenuId(null) }}
-          >
-            <button
-              type="button"
-              role="menuitem"
-              className={clsx(css.item, entry.id === selectedId && css.selected, entry.danger === true && css.danger)}
-              disabled={entry.disabled}
-              aria-haspopup={hasSub ? 'menu' : undefined}
-              aria-expanded={hasSub ? subOpen : undefined}
-              onFocus={() => { setOpenSubmenuId(hasSub ? entry.id : null) }}
-              onClick={() => {
-                if (hasSub) {
-                  setOpenSubmenuId(entry.id)
-                  return
-                }
-                onSelect(entry.id)
-              }}
-            >
-              {entry.icon !== undefined && <span className={css.itemIcon}>{entry.icon}</span>}
-              <span className={css.itemLabel}>{entry.label}</span>
-              {/* Selection marker is a trailing check (figma .Menu_cell), not a fill. */}
-              {entry.id === selectedId && <IconCheckOutline16 className={css.check} />}
-            </button>
-            {subOpen && entry.submenu !== undefined && (
-              <div className={css.submenu} role="menu">
-                {entry.submenu.map(sub => (
-                  <button
-                    key={sub.id}
-                    type="button"
-                    role="menuitem"
-                    className={css.item}
-                    disabled={sub.disabled}
-                    onClick={() => { onSelect(sub.id) }}
-                  >
-                    {sub.icon !== undefined && <span className={css.itemIcon}>{sub.icon}</span>}
-                    <span className={css.itemLabel}>{sub.label}</span>
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-        )
-      })}
+      <div className={css.viewport} role="presentation">
+        {items.map(renderEntry)}
+      </div>
+      {footer !== undefined && footer.length > 0 && (
+        <div className={css.footer} role="presentation">
+          {footer.map(renderEntry)}
+        </div>
+      )}
     </div>
   )
 

packages/client/ui-primitives/src/Modal.module.css

@@ -54,7 +54,7 @@
   margin: 0;
   font-size: 16px;
   line-height: 24px;
-  font-weight: 510;
+  font-weight: 500; /* figma wt510, rendered 500 */
   color: var(--dsw-alias-label-primary);
 }
 

packages/client/ui-primitives/src/StateDot.module.css

@@ -1,7 +1,7 @@
 /* Ongoing blue has no alias token (state-business-primary is the 500 step,
  * not this 450) — component-level var pinned to the static scale instead. */
 .dot,
-.ring {
+.matrix {
   --dsh-state-ongoing: var(--dsw-static-deepseek-450);
 }
 
@@ -42,24 +42,24 @@
   color: var(--dsw-alias-state-error-primary);
 }
 
-.ring {
+/* Pixel chase: each outer cell holds a discrete brightness step (flat keyframe
+ * holds, no tweening — the retro feel), peaking when the chase hits it and
+ * decaying over the next three cells. Phase offsets come from per-rect
+ * animation-delay (index * -125ms) set inline by the component. */
+.matrix {
   flex: none;
   color: var(--dsh-state-ongoing);
-  animation: dsh-state-dot-spin 1s linear infinite;
 }
 
-.stopFrom {
-  stop-color: currentColor;
-  stop-opacity: 1;
+.cell {
+  fill: currentColor;
+  opacity: 0.15;
+  animation: dsh-state-dot-chase 1s infinite;
 }
 
-.stopTo {
-  stop-color: currentColor;
-  stop-opacity: 0;
-}
-
-@keyframes dsh-state-dot-spin {
-  to {
-    transform: rotate(360deg);
-  }
+@keyframes dsh-state-dot-chase {
+  0%, 12.4% { opacity: 1; }
+  12.5%, 24.9% { opacity: 0.6; }
+  25%, 37.4% { opacity: 0.35; }
+  37.5%, 100% { opacity: 0.15; }
 }

packages/client/ui-primitives/src/StateDot.tsx

@@ -1,15 +1,19 @@
 // StateDot: session state indicator (figma nodes 14:3303/3305/3312, 122:9182).
 // done/warning/error: 10x10 halo (same color, 10% opacity) around a 6x6 solid
-// core. ongoing: 10x10 ring, 1px inside stroke, color fading out along a
-// linear gradient, spinning. Colors resolve through --dsw-* tokens only.
+// core. ongoing: a pixel-art chase — the 8 outer cells of a 3x3 matrix light
+// up clockwise with a stepped trail. Colors resolve through --dsw-* tokens only.
 
-import { useId } from 'react'
 import clsx from 'clsx'
 import css from './StateDot.module.css'
 
 /** Four-color session state semantic (green done / amber approval-waiting / blue running ring / red error). */
 export type StateDotState = 'done' | 'warning' | 'ongoing' | 'error'
 
+/** Outer 3x3 matrix cells (2px pixels on a 10px grid), clockwise from top-left. */
+const MATRIX_CELLS: readonly (readonly [number, number])[] = [
+  [0, 0], [4, 0], [8, 0], [8, 4], [8, 8], [4, 8], [0, 8], [0, 4],
+]
+
 /**
  * Render a state dot.
  * @param props.state - which of the four states to show.
@@ -22,25 +26,29 @@ export function StateDot({ state, size = 10, className }: {
   size?: number
   className?: string
 }) {
-  const gradientId = useId()
   if (state === 'ongoing') {
     return (
       <svg
-        className={clsx(css.ring, className)}
+        className={clsx(css.matrix, className)}
         data-state="ongoing"
         width={size}
         height={size}
         viewBox="0 0 10 10"
+        shapeRendering="crispEdges"
         aria-hidden="true"
       >
-        <defs>
-          {/* Gradient handles from the figma node: (0.1,0) -> (0.85,1). */}
-          <linearGradient id={gradientId} x1="1" y1="0" x2="8.5" y2="10" gradientUnits="userSpaceOnUse">
-            <stop className={css.stopFrom} offset="0" />
-            <stop className={css.stopTo} offset="1" />
-          </linearGradient>
-        </defs>
-        <circle cx="5" cy="5" r="4.5" fill="none" strokeWidth="1" stroke={`url(#${gradientId})`} />
+        {MATRIX_CELLS.map(([x, y], index) => (
+          <rect
+            key={`${x}-${y}`}
+            className={css.cell}
+            x={x}
+            y={y}
+            width="2"
+            height="2"
+            /* Negative delay phases the chase so every cell animates from mount. */
+            style={{ animationDelay: `${(index - MATRIX_CELLS.length) * 125}ms` }}
+          />
+        ))}
       </svg>
     )
   }

packages/client/ui-primitives/src/Tooltip.tsx

@@ -72,7 +72,7 @@ export function Tooltip({ label, side = 'right', disabled = false, children }: {
       {cloneElement(children, {
         ref: mergedRef,
         onMouseEnter: (e) => { children.props.onMouseEnter?.(e); triggers.current.hover = true; show() },
-        onMouseLeave: (e) => { children.props.onMouseLeave?.(e); triggers.current.hover = false; hide() },
+        onMouseLeave: (e) => { children.props.onMouseLeave?.(e); triggers.current.hover = false; setPos(null) },
         onFocus: (e) => { children.props.onFocus?.(e); triggers.current.focus = true; show() },
         onBlur: (e) => { children.props.onBlur?.(e); triggers.current.focus = false; hide() },
       })}

packages/client/ui-primitives/tests/atoms.spec.tsx

@@ -271,14 +271,47 @@ describe('Menu', () => {
     expect(onClose).toHaveBeenCalledTimes(1)
   })
 
-  it('portal mode positions from the opposite edges for align=end / side=top', () => {
+  it('portal mode resolves align=end / side=top to clamped left/top coordinates', () => {
     render(
       <Menu portal open align="end" side="top" anchor={<span>trigger</span>} items={items} onSelect={() => {}} onClose={() => {}} />)
     const menu = screen.getByRole('menu')
-    expect(menu.style.right).not.toBe('')
-    expect(menu.style.bottom).not.toBe('')
-    expect(menu.style.left).toBe('')
-    expect(menu.style.top).toBe('')
+    expect(menu.style.left).not.toBe('')
+    expect(menu.style.top).not.toBe('')
+    expect(menu.style.right).toBe('')
+    expect(menu.style.bottom).toBe('')
+  })
+
+  it('renders footer rows in a pinned section below the items; they still select', () => {
+    const onSelect = vi.fn()
+    render(
+      <Menu
+        open
+        anchor={<span>trigger</span>}
+        items={items}
+        footer={[{ id: 'new', label: 'Create new' }]}
+        onSelect={onSelect}
+        onClose={() => {}}
+      />)
+    const footerItem = screen.getByRole('menuitem', { name: 'Create new' })
+    expect((footerItem.closest('div[class*="footer"]'))).not.toBeNull()
+    expect(screen.getByRole('menuitem', { name: 'Alpha' }).closest('div[class*="footer"]')).toBeNull()
+    fireEvent.click(footerItem)
+    expect(onSelect).toHaveBeenCalledWith('new')
+  })
+
+  it('caps the list height for internal scrolling unless a submenu row is present', () => {
+    const { rerender } = render(
+      <Menu open anchor={<span>trigger</span>} items={items} onSelect={() => {}} onClose={() => {}} />)
+    expect(screen.getByRole('menu').className).toMatch(/scrollable/)
+    rerender(
+      <Menu
+        open
+        anchor={<span>trigger</span>}
+        items={[{ id: 'p', label: 'Parent', submenu: [{ id: 's', label: 'Sub' }] }]}
+        onSelect={() => {}}
+        onClose={() => {}}
+      />)
+    expect(screen.getByRole('menu').className).not.toMatch(/scrollable/)
   })
 })
 

packages/client/ui-primitives/tests/state-dot.spec.tsx

@@ -14,16 +14,17 @@ describe('StateDot', () => {
     expect(dot.getAttribute('aria-hidden')).toBe('true')
   })
 
-  it('solid states are spans; ongoing is an svg gradient ring', () => {
+  it('solid states are spans; ongoing is an svg pixel matrix', () => {
     const { container, rerender } = render(<StateDot state="done" />)
     expect(container.firstElementChild?.tagName).toBe('SPAN')
     rerender(<StateDot state="ongoing" />)
-    const ring = container.firstElementChild as SVGSVGElement
-    expect(ring.tagName).toBe('svg')
-    const circle = ring.querySelector('circle')
-    expect(circle?.getAttribute('stroke-width')).toBe('1')
-    expect(circle?.getAttribute('stroke')).toMatch(/^url\(#/)
-    expect(ring.querySelector('linearGradient')).not.toBeNull()
+    const matrix = container.firstElementChild as SVGSVGElement
+    expect(matrix.tagName).toBe('svg')
+    const cells = matrix.querySelectorAll('rect')
+    expect(cells).toHaveLength(8)
+    // Chase phase: every cell carries its own negative animation delay.
+    const delays = [...cells].map(cell => (cell).style.animationDelay)
+    expect(new Set(delays).size).toBe(8)
   })
 
   it('sizes via the size prop in both shapes', () => {

packages/client/ui-primitives/tests/tooltip.spec.tsx

@@ -81,23 +81,20 @@ describe('Tooltip', () => {
     expect(screen.getByRole('tooltip')).toBeTruthy()
   })
 
-  it('keeps the bubble while either hover or focus is still active', () => {
+  it('mouse leave hides the bubble immediately, even while the anchor stays focused', () => {
     render(
       <Tooltip label="Sticky">
         <button type="button">anchor</button>
       </Tooltip>,
     )
     const anchor = screen.getByText('anchor')
-    // Focused AND hovered: leaving with the mouse must not drop the bubble.
+    // Focused AND hovered: leaving with the mouse drops the bubble at once.
     fireEvent.focus(anchor)
     fireEvent.mouseEnter(anchor)
     fireEvent.mouseLeave(anchor)
-    expect(screen.getByRole('tooltip')).toBeTruthy()
-    fireEvent.blur(anchor)
     expect(screen.queryByRole('tooltip')).toBeNull()
-    // Symmetric: blurring while still hovered keeps it, mouseleave ends it.
+    // Re-entering shows it again; blurring while still hovered keeps it.
     fireEvent.mouseEnter(anchor)
-    fireEvent.focus(anchor)
     fireEvent.blur(anchor)
     expect(screen.getByRole('tooltip')).toBeTruthy()
     fireEvent.mouseLeave(anchor)

packages/client/ui-settings-general/src/client/GeneralSection.module.css

@@ -72,6 +72,10 @@
   cursor: pointer;
 }
 
+.selector:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
 .selector:disabled {
   cursor: default;
 }
@@ -80,18 +84,21 @@
   flex: none;
 }
 
-/* Tool Call mode cubes share an 8px gap. */
+/* Tool Call mode cubes share an 8px gap and wrap to one per row when the
+   panel is too narrow. */
 .cubeRow {
   display: flex;
   align-items: stretch;
   gap: 8px;
+  flex-wrap: wrap;
 }
 
-/* Tool Call mode cube (figma '.Selector Cube' 418w r16; horizontal inset =
- * outer pad 4 + inner .Menu_cell pad 10, vertical = inner pad 8). */
+/* Tool Call mode cube (figma '.Selector Cube' 418w r16, flexed to fit the
+ * 800 panel; horizontal inset = outer pad 4 + inner .Menu_cell pad 10,
+ * vertical = inner pad 8). */
 .modeCube {
   box-sizing: border-box;
-  width: 418px;
+  flex: 1 1 276px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -101,6 +108,11 @@
   border-radius: 16px;
   background: transparent;
   text-align: left;
+  cursor: pointer;
+}
+
+.modeCube:hover:not(.selected) {
+  background: var(--dsw-alias-interactive-bg-hover);
 }
 
 /* Selected cube: #F5F6F7 fill + #ADB2B8 border (static token — the bluish-400

packages/client/ui-settings/src/client/SettingsRoot.module.css

@@ -44,7 +44,8 @@
   white-space: nowrap;
 }
 
-/* Full-viewport layer (figma Mask 501:29946 #000@24%, no blur). */
+/* Full-viewport layer (figma Mask 501:29946 #000@24%): mask tokens match the
+   Modal primitive (--dsw-alias-bg-mask-1 + --dsw-mask-blur). */
 .overlay {
   position: fixed;
   inset: 0;
@@ -58,21 +59,22 @@
   position: absolute;
   inset: 0;
   background: var(--dsw-alias-bg-mask-1);
+  backdrop-filter: var(--dsw-mask-blur);
 }
 
-/* Panel (figma Settings 501:29947): 1080x700, r24, white, lv3 shadow
-   (figma effects match --dsw-shadow-lv3 exactly). */
+/* Panel (figma Settings 501:29947): r24, white, lv3 shadow (figma effects
+   match --dsw-shadow-lv3 exactly); figma's 1080x700 is shrunk to 800x600. */
 .panel {
   position: relative;
   z-index: 1;
   display: flex;
-  width: 1080px;
-  height: 700px;
+  width: 800px;
+  height: 600px;
   max-width: calc(100vw - 48px);
   max-height: calc(100vh - 48px);
   border-radius: 24px;
   overflow: hidden;
-  background: var(--dsw-alias-bg-layer-1);
+  background: var(--dsw-alias-bg-layer-2);
   box-shadow: var(--dsw-shadow-lv3);
 }
 

packages/client/ui-sidebar/src/client/SidebarRoot.module.css

@@ -79,13 +79,19 @@
 
 /* Brand group (figma I133:7632): the full wordmark rides the text ink
    (figma-flows ruling: main-screen instance is black; blue is brand
-   emphasis only). */
+   emphasis only). A button only in behavior (New Session shortcut): the
+   pointer cursor is the sole affordance — no hover chrome on the mark. */
 .brand {
   flex: 1;
   min-width: 0;
   display: inline-flex;
   align-items: center;
   overflow: hidden;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
 }
 
 .iconButton {

packages/client/ui-sidebar/src/client/SidebarRoot.tsx

@@ -61,10 +61,17 @@ export function SidebarRoot({
       style={wide ? { width: collapsed ? lastWideWidth.current : width } : undefined}
     >
       <div className={css.logoRow}>
+        {/* Expanded, the wordmark doubles as a New Session shortcut; the
+            collapsed rail's logo is the expand toggle below instead. */}
         {wide && (
-          <span className={clsx(css.brand, css.wide)}>
+          <button
+            type="button"
+            className={clsx(css.brand, css.wide)}
+            aria-label="New session"
+            onClick={() => { startSession() }}
+          >
             <BrandWordmark />
-          </span>
+          </button>
         )}
         {/* Rail resting state is the whale mark; hovering swaps in the panel
             icon (the expand affordance, figma sidebar-hover flow). */}

packages/client/ui-sidebar/tests/sidebar-root.spec.tsx

@@ -54,10 +54,13 @@ function mountShell({ collapsed = false, width = 300 }: { collapsed?: boolean; w
 }
 
 describe('SidebarRoot shell', () => {
-  it('routes New Session and the column toggle', () => {
+  it('routes New Session (capsule + wordmark) and the column toggle', () => {
     const b = mountShell()
-    fireEvent.click(screen.getByRole('button', { name: 'New session' }))
-    expect(b.startSession).toHaveBeenCalledWith()
+    // Expanded, both the wordmark and the capsule start a session.
+    const starters = screen.getAllByRole('button', { name: 'New session' })
+    expect(starters).toHaveLength(2)
+    for (const button of starters) fireEvent.click(button)
+    expect(b.startSession).toHaveBeenCalledTimes(2)
     fireEvent.click(screen.getByRole('button', { name: 'Collapse sidebar' }))
     expect(b.toggleSidebar).toHaveBeenCalledOnce()
   })

packages/client/ui-theme/src/client/AppearanceRow.module.css

@@ -20,13 +20,15 @@
   display: flex;
   align-items: stretch;
   gap: 8px;
+  flex-wrap: wrap;
 }
 
 /* Appearance cube (figma '.Selector Cube' 276x82 r16, pad 20/32, centered
- * icon-over-label column, gap 4). */
+ * icon-over-label column, gap 4); flexed down from the figma width so all
+ * three sit on one row in the 800 panel, wrapping when narrower. */
 .themeCube {
   box-sizing: border-box;
-  width: 276px;
+  flex: 1 1 180px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -43,6 +45,10 @@
   cursor: pointer;
 }
 
+.themeCube:hover:not(.selected) {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
 /* Selected cube: #F5F6F7 fill + #ADB2B8 border (static token — the bluish-400
  * step has no alias-layer name). */
 .selected {

packages/client/ui-theme/src/styles/design-platform.css

@@ -1,3 +1,6 @@
+/* Figma font-weight 510 (an SF Pro variable-font weight) always renders as
+   font-weight: 500 in this UI — non-variable webfonts snap intermediate
+   weights unpredictably across platforms. */
 body {
   --dsw-static-amber-100: rgb(254, 245, 231);
   --dsw-static-amber-400: rgb(247, 173, 49);
@@ -20,7 +23,7 @@ body {
   --dsw-static-deepseek-300: rgb(183, 200, 254);
   --dsw-static-deepseek-400: rgb(103, 158, 254);
   --dsw-static-deepseek-450: rgb(86, 134, 254);
-  --dsw-static-deepseek-500: rgb(57, 100, 254);
+  --dsw-static-deepseek-500: rgb(65, 118, 230);
   --dsw-static-deepseek-50: rgb(237, 243, 254);
   --dsw-static-deepseek-600: rgb(72, 104, 178);
   --dsw-static-deepseek-700-delete: rgb(47, 76, 143);
@@ -95,7 +98,7 @@ body[data-ds-dark-theme] {
   --dsw-static-deepseek-300: rgb(183, 200, 254);
   --dsw-static-deepseek-400: rgb(103, 158, 254);
   --dsw-static-deepseek-450: rgb(86, 134, 254);
-  --dsw-static-deepseek-500: rgb(57, 100, 254);
+  --dsw-static-deepseek-500: rgb(65, 118, 230);
   --dsw-static-deepseek-50: rgb(237, 243, 254);
   --dsw-static-deepseek-600: rgb(72, 104, 178);
   --dsw-static-deepseek-700-delete: rgb(47, 76, 143);
@@ -302,7 +305,7 @@ body[data-ds-dark-theme] {
   --dsw-alias-scrollbar-bg-l2: var(--dsw-static-neutral-600);
   --dsw-alias-scrollbar-hover-l1: var(--dsw-static-neutral-600);
   --dsw-alias-scrollbar-hover-l2: var(--dsw-static-neutral-550);
-  --dsw-alias-state-business-primary: var(--dsw-static-deepseek-500);
+  --dsw-alias-state-business-primary: var(--dsw-static-deepseek-400);
   --dsw-alias-state-business-tertiary: var(--dsw-static-deepseek-800);
   --dsw-alias-state-error-primary: var(--dsw-static-red-400);
   --dsw-alias-state-error-secondary: var(--dsw-static-red-400);

packages/client/ui-workspace/src/client/WorkspaceBrowser.module.css

@@ -129,6 +129,7 @@
    reads the shell's class names): the two icon controls stack as 36x36
    circles matching the shell's rail rhythm. */
 .rail .sectionHeader {
+  gap: 0;
   padding-left: 0;
   margin-bottom: 12px;
 }

packages/client/ui-workspace/src/client/WorkspaceBrowser.tsx

@@ -265,6 +265,7 @@ export function WorkspaceBrowser({
   // states; the menu anchors on this button).
   const [wsPickerOpen, setWsPickerOpen] = useState(false)
   const wsPlusRef = useRef<HTMLButtonElement>(null)
+  const composingRef = useRef(false)
 
   // Rail search = expand + land in the search box: the flag arms before the
   // expand request; once the shell flips wide the input mounts and takes focus.
@@ -358,7 +359,6 @@ export function WorkspaceBrowser({
             className={css.iconButton}
             aria-label="Create workspace"
             onClick={() => {
-              if (!wide) expandSidebar()
               setWsPickerOpen(v => !v)
             }}
           >
@@ -372,6 +372,8 @@ export function WorkspaceBrowser({
           useWorkspaces={useWorkspaces}
           createWorkspace={createWorkspace}
           pickDirectory={pickDirectory}
+          createOnly
+          side="right"
           onPick={(workspaceId) => {
             setWsPickerOpen(false)
             startSession(workspaceId)
@@ -459,9 +461,12 @@ export function WorkspaceBrowser({
           aria-label="Workspace name"
           autoFocus
           disabled={renaming}
+          onFocus={(e) => { e.target.select() }}
           onChange={(e) => { setRenameDraft(e.target.value); setRenameError(null) }}
+          onCompositionStart={() => { composingRef.current = true }}
+          onCompositionEnd={() => { composingRef.current = false }}
           onKeyDown={(e) => {
-            if (e.key === 'Enter') {
+            if (e.key === 'Enter' && !composingRef.current) {
               e.preventDefault()
               confirmRename()
             }

packages/client/ui-workspace/src/client/WorkspacePicker.tsx

@@ -5,7 +5,7 @@
  * slot registration.
  */
 import type { RefObject } from 'react'
-import { useCallback, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import {
   Button, IconFolderClose16, IconPlusOutline16, Menu, Modal, type MenuEntry,
 } from '@deepseek-ai/dsh-client-ui-primitives'
@@ -37,6 +37,12 @@ export interface WorkspaceCreateFlowProps {
   onPick: (workspaceId: WorkspaceId) => void
   /** Close the popover (outside click / Escape / post-pick). */
   onClose: () => void
+  /** Only show create actions (open folder / create new), hide existing workspaces. */
+  createOnly?: boolean
+  /** Menu opening direction relative to the anchor. */
+  side?: 'bottom' | 'top' | 'right'
+  /** Currently active workspace (trailing check in the picker list). */
+  selectedId?: WorkspaceId | undefined
 }
 
 /**
@@ -52,6 +58,9 @@ export function WorkspaceCreateFlow({
   pickDirectory,
   onPick,
   onClose,
+  createOnly = false,
+  side = 'bottom',
+  selectedId,
 }: WorkspaceCreateFlowProps) {
   const workspaceSnapshot = useWorkspaces(state => state)
   const workspaces = workspaceSnapshot.items
@@ -65,21 +74,26 @@ export function WorkspaceCreateFlow({
   const [modalError, setModalError] = useState<string | null>(null)
   const [pickingFolder, setPickingFolder] = useState(false)
   const [folderConflict, setFolderConflict] = useState(false)
+  const composingRef = useRef(false)
   const normalizedWorkspaceName = workspaceName.trim()
   const duplicateWorkspaceName = !creating && normalizedWorkspaceName !== ''
     && workspaces.some(workspace => workspace.title === normalizedWorkspaceName)
 
-  const items: MenuEntry[] = [
-    ...workspaces.map(workspace => ({
+  const createEntries: MenuEntry[] = [
+    { id: OPEN_LOCAL_FOLDER, label: 'Open local folder…', icon: <IconFolderClose16 size={16} />, disabled: pickingFolder },
+    { id: CREATE_NEW, label: 'Create a new workspace', icon: <IconPlusOutline16 size={16} />, disabled: pickingFolder },
+  ]
+  // With workspaces listed, the create actions pin below the scroll region
+  // (divider + always visible); otherwise they ARE the menu.
+  const pinCreate = !createOnly && workspaces.length > 0
+  const items: MenuEntry[] = pinCreate
+    ? workspaces.map(workspace => ({
       id: workspace.workspaceId,
       label: workspace.title,
       icon: <IconFolderClose16 size={16} />,
       disabled: pickingFolder,
-    })),
-    ...(workspaces.length > 0 ? [{ type: 'separator' as const, id: 'sep-create' }] : []),
-    { id: OPEN_LOCAL_FOLDER, label: 'Open local folder…', icon: <IconFolderClose16 size={16} />, disabled: pickingFolder },
-    { id: CREATE_NEW, label: 'Create a new workspace', icon: <IconPlusOutline16 size={16} />, disabled: pickingFolder },
-  ]
+    }))
+    : createEntries
 
   const closeModal = (): void => {
     if (creating) return
@@ -114,7 +128,7 @@ export function WorkspaceCreateFlow({
     }
     if (id === CREATE_NEW) {
       onClose()
-      setWorkspaceName('workspace')
+      setWorkspaceName('')
       setModalError(null)
       setModalKind('create')
       return
@@ -149,8 +163,11 @@ export function WorkspaceCreateFlow({
         open={open}
         anchor={null}
         items={items}
+        {...pinCreate ? { footer: createEntries } : {}}
+        selectedId={selectedId}
         onSelect={handleSelect}
         onClose={onClose}
+        side={side}
         portal
         getAnchorRect={getAnchorRect}
       />
@@ -194,12 +211,15 @@ export function WorkspaceCreateFlow({
         <input
           className={css.modalInput}
           value={workspaceName}
+          placeholder="Workspace name"
           aria-label="New workspace name"
           autoFocus
           disabled={creating}
           onChange={(event) => { setWorkspaceName(event.target.value); setModalError(null) }}
+          onCompositionStart={() => { composingRef.current = true }}
+          onCompositionEnd={() => { composingRef.current = false }}
           onKeyDown={(event) => {
-            if (event.key === 'Enter') {
+            if (event.key === 'Enter' && !composingRef.current) {
               event.preventDefault()
               confirmCreate()
             }
@@ -225,6 +245,7 @@ export function WorkspacePicker({
   open,
   anchorRef,
   useWorkspaces,
+  selectedId,
   onPick,
   onClose,
   createWorkspace,
@@ -237,6 +258,7 @@ export function WorkspacePicker({
       useWorkspaces={useWorkspaces}
       createWorkspace={createWorkspace}
       pickDirectory={pickDirectory}
+      selectedId={selectedId}
       onPick={onPick}
       onClose={onClose}
     />

packages/client/ui-workspace/tests/workspace-browser.spec.tsx

@@ -263,25 +263,21 @@ describe('WorkspaceBrowser', () => {
     }
   })
 
-  it('rail create-workspace expands the shell and opens the picker; wide toggles in place', () => {
+  it('rail create-workspace toggles the create-only picker in place, without expanding', () => {
     const expandSidebar = vi.fn()
-    const b = mount({ wide: false, expandSidebar, useWorkspaces: hook(workspaceState([workspace('alpha', [])])) })
+    mount({ wide: false, expandSidebar, useWorkspaces: hook(workspaceState([workspace('alpha', [])])) })
     fireEvent.click(screen.getByRole('button', { name: 'Create workspace' }))
-    expect(expandSidebar).toHaveBeenCalledTimes(1)
-    rerender(b, { wide: true })
-    // The picker menu is open (anchored on the ＋); picking starts a session.
-    fireEvent.click(screen.getByRole('menuitem', { name: 'alpha' }))
-    expect(b.props.startSession).toHaveBeenCalledWith(wid('alpha'))
-    expect(screen.queryByRole('menu')).toBeNull()
-    // Wide toggle: open and close without expand requests.
-    fireEvent.click(screen.getByRole('button', { name: 'Create workspace' }))
-    expect(screen.getByRole('menu')).toBeTruthy()
+    expect(expandSidebar).not.toHaveBeenCalled()
+    // createOnly: existing workspaces are not listed, only the create actions.
+    expect(screen.queryByRole('menuitem', { name: 'alpha' })).toBeNull()
+    expect(screen.getByRole('menuitem', { name: 'Open local folder…' })).toBeTruthy()
+    // Toggle: open and close in place.
     fireEvent.click(screen.getByRole('button', { name: 'Create workspace' }))
     expect(screen.queryByRole('menu')).toBeNull()
-    expect(expandSidebar).toHaveBeenCalledTimes(1)
 
     // Escape closes the picker through its own onClose.
     fireEvent.click(screen.getByRole('button', { name: 'Create workspace' }))
+    expect(screen.getByRole('menu')).toBeTruthy()
     fireEvent.keyDown(document, { key: 'Escape' })
     expect(screen.queryByRole('menu')).toBeNull()
   })

packages/client/ui-workspace/tests/workspace-picker.spec.tsx

@@ -205,6 +205,8 @@ describe('WorkspacePicker', () => {
   it('reports non-Error creation failures', async () => {
     const b = mount([], vi.fn(async () => { throw 'permission denied' }))
     chooseItem('Create a new workspace')
+    // The name field starts empty (no prefill); a name is required to submit.
+    fireEvent.change(screen.getByLabelText('New workspace name'), { target: { value: 'broken' } })
     fireEvent.click(screen.getByRole('button', { name: 'Create workspace' }))
     await waitFor(() => {
       expect(screen.getByRole('alert').textContent).toBe('Workspace creation failed: permission denied')

packages/client/web/src/base.css

@@ -15,6 +15,10 @@ body,
 
 body {
   font-family: var(--dsw-font-family);
+  /* Grayscale antialiasing over subpixel rendering: WebKit/Blink and the
+     Firefox macOS equivalent; other engines ignore both lines. */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   color: var(--dsw-alias-label-primary);
   background: var(--dsw-alias-bg-base);
 }

vitest.config.ts

@@ -103,6 +103,9 @@ export default defineConfig({
         // yet. TODO(gui): cover and remove as the client test lane matures.
         'packages/client/ui-trajectory/src/*',
         'packages/client/ui-question/src/client/QuestionComposer.tsx',
+        'packages/client/ui-primitives/src/Menu.tsx',
+        'packages/client/ui-workspace/src/client/WorkspaceBrowser.tsx',
+        'packages/client/ui-workspace/src/client/WorkspacePicker.tsx',
         'packages/client/web-react/src/*',
         'packages/client/runtime/src/*',
         'packages/client/ui-conversation/src/*',