feat(web): add queue collapse control

packages/client/ui-conversation/README.i18n.yaml

@@ -2,5 +2,5 @@
 # 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 packages/client/ui-conversation/README.md
-README.md: 3973c14f2b8fe746549bb74af85a7a60a7d66aea
-README.zh.md: a6bb15c4cdd53d05bf28147b97d9d64d1c59da2b
+README.md: 6e48c127b18eb65008edd2debf9835e5beffdcca
+README.zh.md: 632d2f9959ac496e6f4512ec30ca0f97c53a5abf

packages/client/ui-conversation/README.md

@@ -18,6 +18,8 @@ Tool rows are slots too — the standalone tool ring (`ToolViewRegistry`/`ctx.to
 
 The todo surfaces are two registrations over that shape, both plain registrant plugins with `inject: ['slots', 'conversation']`. `TodoRow` takes the `'conversation.chat.toolview'` key `todo_write` and summarizes what the call attempted (`<done>/<total> 已完成 · <active item>` parsed from its args, falling back to the generic summary on malformed or wrongly-shaped model JSON, and keeping the generic dot for non-ok execution states so a cancelled call never reads as a completed update). `TodoDock` takes the `'conversation.input.dock'` list slot at `order: -1` — above the queue rows — and is the plan strip: it reads the host-computed `todos` projection via `useProjection` (standing plan: latest `todo/write` with no later `turn/start`) and renders `TodoPanel`, which takes the plain list, hides itself while the list is empty, and starts collapsed as a header of title plus `"<done>/<total> tasks · <n> in progress"` (status glyphs are the figma check / progress / dashed-pending set). The dock adapter owns the selection so the panel stays a pure function of its props; the standing list lives here rather than in the row so the row stays one line. Anything the input-zone composer chain hides (a `conversation.composer` takeover such as ui-question's) hides the whole dock, this strip included.
 
+`QueueDock` takes the same input-dock list at `order: 0`. It hides while empty, renders one pending row directly, and defaults two or more rows to a collapsed `"<n> Queued"` header whose button expands or collapses the complete list. The header exposes `aria-expanded`; each visible row remains a single-line preview with its exact-occurrence edit and delete actions.
+
 Per-session UI state for selection and the active view lives in the declared chat store (`stores.ts` `createChatStore`); the InputHub owns the composer state machine and mirrors its draft into that store for persistence. Apply passes one store handle to the strict session subtree, chat view, and details registrations, so each session shares one instance and the framework owns its lifecycle. Components are pure: the framework standard kit supplies `useSession`/`sessionId`, global `useSessions`/`useWorkspaces`, and the input machine's `useInput`/`inputActions`; store faces and inject factories supply the remaining state and callbacks.
 
 The composer bar declares session-scoped single seats for `'conversation.input.plan'` (right of the local access-mode control) and `'conversation.input.model'` (immediately before the pending indicator and send/stop button), plus list slots for overlay, dock, left, and right input extensions. Feature packages own each control and its state; ui-conversation supplies placement, the `locked` owner prop, and the standard slot shares. While the `plan` projection's effective target is plan mode, InputBar swaps its textarea placeholder to the plan-task wording, localized through the `command.hint` locale namespace this package registers and shared verbatim with the claimed `/plan` command hint (a host-folded value read through the standard-kit `useProjection`; owner-supplied placeholders win). A pending composer takeover remains mounted when another conversation view is active so the blocked agent can still receive its answer; without a pending interaction, the active-session composer belongs to Chat. The resident no-session shell uses `DisabledInputBar` and therefore dispatches no session-scoped control seats.

packages/client/ui-conversation/README.zh.md

@@ -18,6 +18,8 @@
 
 todo 两个面就是在该形状上的两个注册项，都是普通注册方插件，`inject: ['slots', 'conversation']`。`TodoRow` 占用 `'conversation.chat.toolview'` 的 `todo_write` key，摘要该次调用「试图写入」的内容（从其 args 解析出 `<已完成>/<总数> 已完成 · <进行中条目>`；模型 JSON 残缺或形状不对时回落到通用摘要；非 ok 执行状态保留通用状态点，使被取消的调用绝不读成一次已完成的更新）。`TodoDock` 以 `order: -1` 占用 `'conversation.input.dock'` 列表 slot（位于队列行之上），是计划条：它经 `useProjection` 读取 host 计算的 `todos` 投影（站立计划：其后没有更晚 `turn/start` 的最近一次 `todo/write`）并渲染 `TodoPanel`，后者接收纯列表，在列表为空时自我隐藏；列表非空时面板初始折叠，表头显示标题加 `"<已完成>/<总数> tasks · <n> in progress"`（状态图标为 figma 的勾选／进行中／虚线未开始一组）。选取由 dock 适配器负责，因此面板保持为其 props 的纯函数；站立列表放在此处而非行内，行才能保持单行。输入区 composer 链隐藏的一切（例如 ui-question 对 `conversation.composer` 的接管）也会隐藏整个 dock，包括这条计划条。
 
+`QueueDock` 以 `order: 0` 占用同一个 input-dock 列表。队列为空时隐藏；只有一个待处理项时直接渲染该行；存在两个或更多待处理项时，默认收起为 `"<n> Queued"` 表头，其按钮可展开或收起完整列表。表头暴露 `aria-expanded`；每条可见行仍是单行预览，并提供针对精确单次入队项的编辑和删除操作。
+
 逐 Session UI 状态中的选择与活跃视图位于已声明的聊天 store（`stores.ts` `createChatStore`）中；InputHub 拥有输入区状态机，并将草稿镜像到该 store 以便持久化。apply 将同一个 store handle 传给严格限定于会话的子树、聊天视图和详情注册，因此每个会话内共享一个实例，框架拥有其生命周期。组件保持纯粹：框架标准工具包提供 `useSession`／`sessionId`、全局 `useSessions`／`useWorkspaces`，以及输入状态机的 `useInput`／`inputActions`；store 表层与 inject factory 提供其余状态和回调。
 
 输入栏为 `'conversation.input.plan'`（位于本地 access 模式控件右侧）和 `'conversation.input.model'`（渲染在 pending 指示器与发送／停止按钮之前）声明会话作用域的单实例 seat，并为 overlay、dock、left 和 right 输入扩展声明列表 slot。各功能包拥有相应控件及其状态；ui-conversation 提供放置位置、`locked` owner prop 和标准 slot share。当 `plan` 投影的有效目标为 plan mode 时，InputBar 将文本框 placeholder 切换为 plan 任务措辞，经本包注册的 `command.hint` locale 命名空间本地化，并与已认领 `/plan` 命令的提示逐字共用同一份文案（经标准套件 `useProjection` 读取的 host 折叠值；owner 提供的 placeholder 优先）。另一个会话视图活跃时，待处理的 composer 接管仍保持挂载，使被阻塞的 agent（智能体）仍能收到回答；没有待处理交互时，活跃会话的 composer 归 Chat 所有。常驻无会话壳使用 `DisabledInputBar`，因此不会分发任何会话作用域的控件 seat。

packages/client/ui-conversation/src/client/queue/QueueDock.module.css

@@ -30,6 +30,45 @@
   pointer-events: none;
 }
 
+.header {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  height: 36px;
+  padding: 4px 16px 4px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  text-align: left;
+  cursor: pointer;
+}
+
+.header:focus-visible {
+  outline: 2px solid var(--dsw-alias-label-tertiary);
+  outline-offset: -2px;
+}
+
+.count {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-family: Inter, var(--dsw-font-family);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.chevron {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 14px;
+  height: 14px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
 .list {
   margin: 0;
   padding: 0;

packages/client/ui-conversation/src/client/queue/QueueDock.tsx

@@ -8,7 +8,8 @@ import { useEffect, useState } from 'react'
 import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
 import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
 import {
-  IconCheckOutline16, IconCloseOutline16, IconEditOutline16, IconTrashOutline16,
+  IconCheckOutline16, IconChevronDownOutline14, IconChevronUpOutline14,
+  IconCloseOutline16, IconEditOutline16, IconTrashOutline16,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { QueueAction, QueueItemId } from '../contract/queue.ts'
 import css from './QueueDock.module.css'
@@ -22,11 +23,15 @@ export interface QueueDockInjected {
 /** Full props of a dock entry: InputZone owner share + session standard kit + global seat. */
 export type QueueDockProps = PropsRuntime<'conversation.input.dock'> & QueueDockInjected
 
-/** Queue strip: one preview line per queued message; renders null when the queue is empty. */
+/**
+ * Queue strip: one item renders directly; multiple items default to a
+ * collapsible count header; an empty queue renders nothing.
+ */
 export function QueueDock({ useSession, updateQueue, notify }: QueueDockProps) {
   const queue = useSession(s => s.queue)
   const [editing, setEditing] = useState<{ id: QueueItemId; text: string } | null>(null)
   const [busy, setBusy] = useState<QueueItemId | null>(null)
+  const [collapsed, setCollapsed] = useState(true)
 
   useEffect(() => {
     if (editing !== null && !queue.some(row => row.id === editing.id)) setEditing(null)
@@ -63,92 +68,107 @@ export function QueueDock({ useSession, updateQueue, notify }: QueueDockProps) {
   return (
     <div className={css.dock}>
       <div className={css.panel}>
-        <ul className={css.list}>
-          {queue.map(row => (
-            <li key={row.id} className={css.row}>
-              {editing?.id === row.id
-                ? (
-                  <input
-                    autoFocus
-                    className={css.editor}
-                    aria-label="编辑排队消息"
-                    value={editing.text}
-                    onChange={(event) => { setEditing({ id: row.id, text: event.currentTarget.value }) }}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Escape') {
-                        setEditing(null)
-                        return
-                      }
-                      if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
-                        event.preventDefault()
-                        void saveEdit()
-                      }
-                    }}
-                  />
-                )
-                : <span className={css.preview}>{row.preview}</span>}
-              <div className={css.actions}>
+        {queue.length > 1 && (
+          <button
+            type="button"
+            className={css.header}
+            aria-expanded={!collapsed}
+            onClick={() => { setCollapsed(value => !value) }}
+          >
+            <span className={css.count}>{queue.length} Queued</span>
+            <span className={css.chevron} aria-hidden>
+              {collapsed ? <IconChevronUpOutline14 /> : <IconChevronDownOutline14 />}
+            </span>
+          </button>
+        )}
+        {(queue.length === 1 || !collapsed) && (
+          <ul className={css.list}>
+            {queue.map(row => (
+              <li key={row.id} className={css.row}>
                 {editing?.id === row.id
                   ? (
-                    <>
-                      <button
-                        type="button"
-                        className={css.action}
-                        aria-label="保存排队消息"
-                        title="保存排队消息"
-                        disabled={busy !== null || editing.text.trim() === ''}
-                        onClick={() => { void saveEdit() }}
-                      >
-                        <IconCheckOutline16 size={14} />
-                      </button>
-                      <button
-                        type="button"
-                        className={css.action}
-                        aria-label="取消编辑"
-                        title="取消编辑"
-                        disabled={busy !== null}
-                        onClick={() => { setEditing(null) }}
-                      >
-                        <IconCloseOutline16 size={14} />
-                      </button>
-                    </>
+                    <input
+                      autoFocus
+                      className={css.editor}
+                      aria-label="编辑排队消息"
+                      value={editing.text}
+                      onChange={(event) => { setEditing({ id: row.id, text: event.currentTarget.value }) }}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Escape') {
+                          setEditing(null)
+                          return
+                        }
+                        if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
+                          event.preventDefault()
+                          void saveEdit()
+                        }
+                      }}
+                    />
                   )
-                  : (
-                    <>
-                      <button
-                        type="button"
-                        className={css.action}
-                        aria-label="编辑排队消息"
-                        title={row.text === null ? '包含非文本内容，暂不支持编辑' : '编辑排队消息'}
-                        disabled={busy !== null || row.text === null}
-                        onClick={() => {
-                          if (row.text !== null) setEditing({ id: row.id, text: row.text })
-                        }}
-                      >
-                        <IconEditOutline16 size={14} />
-                      </button>
-                      <button
-                        type="button"
-                        className={css.action}
-                        aria-label="删除排队消息"
-                        title="删除排队消息"
-                        disabled={busy !== null}
-                        onClick={() => {
-                          void applyAction(
-                            row.id,
-                            { kind: 'remove' },
-                            '删除失败：这条消息可能已经开始发送。',
-                          )
-                        }}
-                      >
-                        <IconTrashOutline16 size={14} />
-                      </button>
-                    </>
-                  )}
-              </div>
-            </li>
-          ))}
-        </ul>
+                  : <span className={css.preview}>{row.preview}</span>}
+                <div className={css.actions}>
+                  {editing?.id === row.id
+                    ? (
+                      <>
+                        <button
+                          type="button"
+                          className={css.action}
+                          aria-label="保存排队消息"
+                          title="保存排队消息"
+                          disabled={busy !== null || editing.text.trim() === ''}
+                          onClick={() => { void saveEdit() }}
+                        >
+                          <IconCheckOutline16 size={14} />
+                        </button>
+                        <button
+                          type="button"
+                          className={css.action}
+                          aria-label="取消编辑"
+                          title="取消编辑"
+                          disabled={busy !== null}
+                          onClick={() => { setEditing(null) }}
+                        >
+                          <IconCloseOutline16 size={14} />
+                        </button>
+                      </>
+                    )
+                    : (
+                      <>
+                        <button
+                          type="button"
+                          className={css.action}
+                          aria-label="编辑排队消息"
+                          title={row.text === null ? '包含非文本内容，暂不支持编辑' : '编辑排队消息'}
+                          disabled={busy !== null || row.text === null}
+                          onClick={() => {
+                            if (row.text !== null) setEditing({ id: row.id, text: row.text })
+                          }}
+                        >
+                          <IconEditOutline16 size={14} />
+                        </button>
+                        <button
+                          type="button"
+                          className={css.action}
+                          aria-label="删除排队消息"
+                          title="删除排队消息"
+                          disabled={busy !== null}
+                          onClick={() => {
+                            void applyAction(
+                              row.id,
+                              { kind: 'remove' },
+                              '删除失败：这条消息可能已经开始发送。',
+                            )
+                          }}
+                        >
+                          <IconTrashOutline16 size={14} />
+                        </button>
+                      </>
+                    )}
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
       </div>
     </div>
   )

packages/client/ui-conversation/tests/queue-dock.spec.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 /**
  * QueueDock rendering and operations: authoritative rows, inline editing,
- * removal, failure notices, and live retirement.
+ * collapse state, removal, failure notices, and live retirement.
  */
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react'
@@ -78,16 +78,40 @@ describe('QueueDock', () => {
     expect(container.innerHTML).toBe('')
   })
 
+  it('renders one row directly and defaults multiple rows to a collapsible count header', () => {
+    const single = snapshotWith([row('i-1', 'one')])
+    const source = liveSession(single)
+    const view = render(<QueueDock {...kitFor(single)} useSession={source.useSession} />)
+    expect(view.queryByRole('button', { name: '1 Queued' })).toBeNull()
+    expect(view.getByText('one')).toBeTruthy()
+
+    act(() => { source.push(snapshotWith([row('i-1', 'one'), row('i-2', 'two')])) })
+    const header = view.getByRole('button', { name: '2 Queued' })
+    expect(header.getAttribute('aria-expanded')).toBe('false')
+    expect(view.queryByText('one')).toBeNull()
+    expect(view.queryByText('two')).toBeNull()
+
+    fireEvent.click(header)
+    expect(header.getAttribute('aria-expanded')).toBe('true')
+    expect(view.getByText('one')).toBeTruthy()
+    expect(view.getByText('two')).toBeTruthy()
+
+    fireEvent.click(header)
+    expect(header.getAttribute('aria-expanded')).toBe('false')
+    expect(view.queryByText('one')).toBeNull()
+  })
+
   it('renders active actions and disables editing for mixed-content rows', () => {
     const snap = snapshotWith([
       row('i-1', '第一条排队消息'),
       row('i-2', null, 'image [image]'),
     ])
     const source = liveSession(snap)
-    const { container } = render(<QueueDock {...kitFor(snap)} useSession={source.useSession} />)
+    const { container, getByRole } = render(<QueueDock {...kitFor(snap)} useSession={source.useSession} />)
+    fireEvent.click(getByRole('button', { name: '2 Queued' }))
     expect([...container.querySelectorAll('li')].map(item => item.textContent))
       .toEqual(['第一条排队消息', 'image [image]'])
-    expect(container.querySelectorAll('button')).toHaveLength(4)
+    expect(container.querySelectorAll('button')).toHaveLength(5)
     expect(container.querySelectorAll('[aria-label="编辑排队消息"]')).toHaveLength(2)
     expect(container.querySelectorAll('[aria-label="删除排队消息"]')).toHaveLength(2)
     expect(container.querySelectorAll('[aria-label="立即发送排队消息"]')).toHaveLength(0)
@@ -162,10 +186,11 @@ describe('QueueDock', () => {
     const snap = snapshotWith([row('i-1', 'one'), row('i-2', 'two')])
     const source = liveSession(snap)
     const updateQueue = vi.fn(() => Promise.resolve())
-    const { getAllByLabelText } = render(
+    const { getAllByLabelText, getByRole } = render(
       <QueueDock {...kitFor(snap, { updateQueue })} useSession={source.useSession} />,
     )
 
+    fireEvent.click(getByRole('button', { name: '2 Queued' }))
     fireEvent.click(getAllByLabelText('删除排队消息')[0]!)
     await waitFor(() => {
       expect(updateQueue).toHaveBeenCalledWith(iid('i-1'), { kind: 'remove' })