fix(web): deduplicate plan review rendering

.agents/notes/implemented/feature/2026-07-24-web-plan-mode.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
-2026-07-24-web-plan-mode.md: 3f27dee80b4e059f8ed079f5d9d25b3472e7fcc7
-2026-07-24-web-plan-mode.zh.md: fd0ca0d51814ee499bc28c41736d7bb87a5e406e
+2026-07-24-web-plan-mode.md: 8ed22fa3833b3903dfaeb34c8c7810267aef9930
+2026-07-24-web-plan-mode.zh.md: 9647e3d71bcc9132bc0990e7c296a63cdab55812

.agents/notes/implemented/feature/2026-07-24-web-plan-mode.md

@@ -34,7 +34,7 @@ Business and transport failures leave the confirmed snapshot unchanged, re-enabl
 
 ## Exit review
 
-`exit_plan_mode` remains registered in both modes for request-cache stability. In plan mode the model submits the complete Markdown plan through that tool. The plan service asks through `ctx.userInteraction`, and the already-composed Web question plugin presents the plan detail with Approve, Keep planning, and the free-text answer channel. The capped question card keeps its title, navigation, and submission actions fixed while the complete plan and choices share an internal scroll region.
+`exit_plan_mode` remains registered in both modes for request-cache stability. In plan mode the model submits the complete Markdown plan through that tool. The plan service asks through `ctx.userInteraction`, and the already-composed Web question plugin presents the plan detail with Approve, Keep planning, and the free-text answer channel. Question detail reuses the assistant-output Markdown primitive and its untrusted-content policy. The capped question card keeps its title, navigation, and submission actions fixed while the complete plan and choices share an internal scroll region. The chat flow omits its generic pending-question placeholder because the composer takeover is the sole presentation of that wait.
 
 Approval queues inactive mode for the next step; it does not rewrite the current tool batch. Keep planning or custom feedback leaves plan mode active and returns corrective feedback to the model. If the review channel is unavailable or aborted, the tool fails closed and the policy tells the model to ask the user to switch modes manually.
 

.agents/notes/implemented/feature/2026-07-24-web-plan-mode.zh.md

@@ -34,7 +34,7 @@ Web 宿主可以通过[可选会话 RPC 契约](../architecture/2026-07-24-web-p
 
 ## 退出评审
 
-`exit_plan_mode` 在两种模式下都会保持注册，以维持请求缓存稳定性。在 plan mode 中，模型通过该工具提交完整的 Markdown plan。plan 服务经由 `ctx.userInteraction` 发起询问，已组合进 Web 的问题插件会展示 plan 详情，并提供「批准」、「继续规划」和自由文本回答渠道。设有高度上限的问题卡片会固定显示标题、导航操作和提交操作，而完整 plan 与选项共享同一个内部滚动区域。
+`exit_plan_mode` 在两种模式下都会保持注册，以维持请求缓存稳定性。在 plan mode 中，模型通过该工具提交完整的 Markdown plan。plan 服务经由 `ctx.userInteraction` 发起询问，已组合进 Web 的问题插件会展示 plan 详情，并提供「批准」、「继续规划」和自由文本回答渠道。问题详情会复用 assistant 输出所用的 Markdown 基础组件及其不受信任内容策略。设有高度上限的问题卡片会固定显示标题、导航操作和提交操作，而完整 plan 与选项共享同一个内部滚动区域。由于 composer 接管是该等待状态的唯一呈现方式，聊天流程不会渲染通用的待处理问题占位块。
 
 批准会将未激活模式排到下一步骤生效，不会重写当前工具批次。选择继续规划或提供自定义反馈时，plan mode 保持激活，并向模型返回修正反馈。若评审渠道不可用或已中止，工具会采取失败关闭策略，策略则要求模型请用户手动切换模式。
 

apps/web/tests/smoke-fixture.e2e.ts

@@ -292,6 +292,7 @@ describe('web boot chain success pass (keyless, ten real bundles, ?fixture)', ()
     const composer = page.locator('[data-question-key]')
     await composer.waitFor({ timeout: 15_000 })
     expect({
+      pendingQuestionPlaceholders: await page.getByText(/等待回答（/).count(),
       question: await composer.getByRole('heading').innerText(),
       progress: await composer.getByText('1 / 3', { exact: true }).innerText(),
       options: await composer.getByRole('radio').allTextContents(),
@@ -304,6 +305,7 @@ describe('web boot chain success pass (keyless, ten real bundles, ?fixture)', ()
           "2研究潜力型更看重 Agent 理解、训练评测思路和长期成长空间。",
           "3均衡型同时要求工程能力和 Agent 认知，但可能筛选门槛更高。",
         ],
+        "pendingQuestionPlaceholders": 0,
         "progress": "1 / 3",
         "question": "你现在更想招哪类 Agent/Harness 候选人？",
       }
@@ -312,11 +314,30 @@ describe('web boot chain success pass (keyless, ten real bundles, ?fixture)', ()
     await composer.getByRole('radio', { name: '工程落地型' }).click()
     await composer.getByText('2 / 3', { exact: true }).waitFor()
     await composer.getByRole('button', { name: '跳过本题', exact: true }).click()
-    const detail = composer.getByText('按当前招聘目标选择；跳过则视为不设偏好。')
+    const planHeading = composer.getByRole('heading', { level: 1, name: '面试计划' })
+    await planHeading.waitFor()
+    expect({
+      code: await composer.locator('code').filter({ hasText: '偏好' }).innerText(),
+      headingTag: await planHeading.evaluate(element => element.tagName),
+      listItems: await composer.locator('li').allTextContents(),
+      strong: await composer.locator('strong').filter({ hasText: '按当前招聘目标' }).innerText(),
+    }).toMatchInlineSnapshot(`
+      {
+        "code": "偏好",
+        "headingTag": "H1",
+        "listItems": [
+          "按当前招聘目标选择",
+          "跳过则视为不设 偏好",
+        ],
+        "strong": "按当前招聘目标",
+      }
+    `)
     // Exercise provider-sized plan detail through the assembled composer
     // without making the shared fixture transcript permanently enormous.
-    await detail.evaluate((element) => {
-      element.textContent = Array.from(
+    await planHeading.evaluate((element) => {
+      const markdown = element.parentElement
+      if (markdown === null) throw new Error('Markdown detail root missing')
+      markdown.textContent = Array.from(
         { length: 80 },
         (_, index) => `Plan section ${String(index + 1)} keeps review context readable.`,
       ).join(' ')

packages/client/connection/src/client/fixture.ts

@@ -330,7 +330,7 @@ export function createFixtureApi(): ApiProxy {
       id: 'signals',
       header: '信号',
       question: '哪些面试信号最重要？',
-      detail: '按当前招聘目标选择；跳过则视为不设偏好。',
+      detail: '# 面试计划\n\n- **按当前招聘目标**选择\n- 跳过则视为不设 `偏好`',
       multiSelect: true,
       options: [
         { label: '系统设计' },

packages/client/ui-conversation/README.md

@@ -10,7 +10,7 @@ Tool rows are slots too — the standalone tool ring (`ToolViewRegistry`/`ctx.to
 
 Per-session UI state (selection, composer draft, active view) lives in the declared chat store (`stores.ts` `createChatStore`): apply constructs one handle and passes it to the conversation, chat-view, and details registrations, so the session slots share one instance per session (selection written by the chat view, read by details) and the framework owns instance lifecycle and draft persistence. Components are pure — the framework standard kit (`useSession`/`sessionId`/`useSessions`) and the store faces (`useStore`/`actions`) arrive automatically from the registration declaration; the inject factories contribute plain data and callbacks only (send/stop choreography, tab read face, details/paging callbacks, startSession chain).
 
-The default composer's bottom row exposes the session-scoped `'conversation.composer.controls'` list slot to the left of the primary action. Mode and policy features contribute controls through that slot; whole-composer takeovers such as questions remain selector-routed entries of the separate `'conversation.composer'` chain.
+The default composer's bottom row exposes the session-scoped `'conversation.composer.controls'` list slot to the left of the primary action. Mode and policy features contribute controls through that slot; whole-composer takeovers such as questions remain selector-routed entries of the separate `'conversation.composer'` chain. Pending questions render only through that takeover and are omitted from chat-flow placeholders, while approvals remain visible until their own Web response surface exists.
 
 `src/client/` is organized for the future package split: `contract/` is the sole inter-domain shared face (`slots.ts` slot declarations + composed slot props including the tool-row contract, `views.ts` shared primitives, `tool-call-model.ts`); the `skeleton/`, `chat/`, and `toolviews/` (sample registrants) domain directories import contract files and never each other; `apply.ts` is the only assembly point allowed to import all three domains. The `/client` export surface is the contract only — `apply`/`inject`, the two service classes, and the `contract/` type families; implementation components (skeleton, chat rows) and the store factory stay internal and reach the page exclusively through apply's slot registrations (tests take them via the `./src/*` subpath).
 

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

@@ -254,7 +254,9 @@ export function ChatView({ useSession, useStore, renderSlot, openDetails, loadOl
             ))}
           </div>
         )}
-        {pending.map((item) => <PendingCard key={item.key} item={item} />)}
+        {pending.map((item) => item.kind === 'approval'
+          ? <PendingCard key={item.key} item={item} />
+          : null)}
         </div>
       </div>
       <StatsLine useSession={useSession} />

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

@@ -1,30 +1,19 @@
-// PendingCard: approval/question placeholder card (visible, not answerable —
-// the composer-takeover approval panel is a P-II item; wire pending semantics
-// already exist so the flow must show them).
+// PendingCard: display-only approval placeholder. Questions render exclusively
+// through the composer takeover so the same pending wait is never shown twice.
 
 import { memo } from 'react'
-import type { PendingInteraction } from '@deepseek-ai/dsh-client-runtime/client'
-import { JsonBlock } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { PendingWait } from '@deepseek-ai/dsh-client-runtime/client'
 import css from './PendingCard.module.css'
 
 export interface PendingCardProps {
-  item: PendingInteraction
+  item: PendingWait<'approval'>
 }
 
 export const PendingCard = memo(function PendingCard({ item }: PendingCardProps) {
   return (
     <div className={css.card}>
-      {item.kind === 'approval' ? (
-        <>
-          <div className={css.title}>等待审批：<span className={css.mono}>{item.payload.toolName}</span></div>
-          {item.payload.reason !== undefined && <div className={css.reason}>{item.payload.reason}</div>}
-        </>
-      ) : (
-        <>
-          <div className={css.title}>等待回答（{item.payload.questions.length} 题）</div>
-          <JsonBlock label="问题内容" payload={item.payload.questions} />
-        </>
-      )}
+      <div className={css.title}>等待审批：<span className={css.mono}>{item.payload.toolName}</span></div>
+      {item.payload.reason !== undefined && <div className={css.reason}>{item.payload.reason}</div>}
       <div className={css.hint}>请在原客户端处理（web 端作答后续里程碑提供）</div>
     </div>
   )

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

@@ -341,12 +341,18 @@ describe('ChatView', () => {
     expect(lv.getByText('载入历史…')).toBeTruthy()
   })
 
-  it('pending interactions render placeholder cards', () => {
+  it('renders approval placeholders and leaves questions exclusively in the composer', () => {
     const h = makeHarness({
-      pending: [new PendingWait('approval', RpcId('r1'), SID,
-        { approvalId: 'ap1', toolName: 'bash' } as PendingWait<'approval'>['payload'], vi.fn())],
+      pending: [
+        new PendingWait('approval', RpcId('r1'), SID,
+          { approvalId: 'ap1', toolName: 'bash' } as PendingWait<'approval'>['payload'], vi.fn()),
+        new PendingWait('question', RpcId('r2'), SID,
+          { questions: [{ id: 'q1', question: 'duplicate question' }] } as PendingWait<'question'>['payload'], vi.fn()),
+      ],
     })
     const view = render(<h.ChatView {...h.props} />)
     expect(view.getByText(/等待审批/)).toBeTruthy()
+    expect(view.queryByText(/等待回答/)).toBeNull()
+    expect(view.queryByText('duplicate question')).toBeNull()
   })
 })

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

@@ -1,20 +1,17 @@
 // @vitest-environment jsdom
 // Branch tails the acceptance specs do not reach: ToolRow stopped-state dot,
-// PendingCard question arm, bash sample error pill, the node-half empty
-// apply, and AssistantMarkdown reasoning/unknown block arms.
+// bash sample error pill, the node-half empty apply, and AssistantMarkdown
+// reasoning/unknown block arms.
 
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, render } from '@testing-library/react'
 import { createSnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
 import { bindSnapshotSelector } from '@deepseek-ai/dsh-client-web-react'
 import type { SessionId, SessionListState, ToolResultNode } from '@deepseek-ai/dsh-client-runtime/client'
-import { PendingWait } from '@deepseek-ai/dsh-client-runtime/client'
-import { RpcId } from '@deepseek-ai/dsh-client-connection/client'
 import type { ToolRowOwnerProps, ToolRowProps } from '@deepseek-ai/dsh-client-ui-conversation/client'
 import { apply as nodeApply } from '../src/index.ts'
 import { GenericToolCard } from '../src/client/chat/GenericToolCard.tsx'
 import { ToolRow } from '../src/client/chat/ToolRow.tsx'
-import { PendingCard } from '../src/client/chat/PendingCard.tsx'
 import { AssistantMarkdown } from '../src/client/chat/AssistantMarkdown.tsx'
 import { BashRow } from '../src/client/toolviews/bash-sample.tsx'
 
@@ -33,13 +30,6 @@ describe('tails', () => {
     expect(view.container.querySelector('[data-state="stopped"]')).not.toBeNull()
   })
 
-  it('PendingCard renders the question arm with its count', () => {
-    const view = render(
-      <PendingCard item={new PendingWait('question', RpcId('r1'), 's1' as SessionId, { questions: [{}, {}] } as PendingWait<'question'>['payload'], vi.fn())} />,
-    )
-    expect(view.getByText(/等待回答（2 题）/)).toBeTruthy()
-  })
-
   it('AssistantMarkdown renders reasoning as a Think row and unknown blocks as JSON fallback', () => {
     const view = render(
       <AssistantMarkdown

packages/client/ui-question/README.md

@@ -2,7 +2,7 @@
 
 Web `ask_user_question` feature plugin. Its host half mounts `dsh-tool-ask-user` only when the Web feature is selected; its browser half registers the `question` entry in the conversation-owned `conversation.composer` keyed slot.
 
-The component renders one question at a time with progress navigation, single- and multi-select choices, recommendation badges derived from label suffixes, and custom answers. The capped card keeps its title, navigation, and submission actions fixed while long detail and choices share an internal scroll region. Single-select choices advance immediately, and Enter submits once every question is answered or skipped; Enter during IME composition confirms the input candidate without advancing. It submits one structured answer batch for the whole request: “Skip this question” retains other drafts and emits the existing blank `{ selected: [] }` shape for that item, while close rejects the whole wait as `ASK_CANCELLED`.
+The component renders one question at a time with progress navigation, single- and multi-select choices, recommendation badges derived from label suffixes, and custom answers. Question detail reuses the assistant-output `MarkdownText` primitive, including its GFM rendering and untrusted-content policy. The capped card keeps its title, navigation, and submission actions fixed while long detail and choices share an internal scroll region. Single-select choices advance immediately, and Enter submits once every question is answered or skipped; Enter during IME composition confirms the input candidate without advancing. It submits one structured answer batch for the whole request: “Skip this question” retains other drafts and emits the existing blank `{ selected: [] }` shape for that item, while close rejects the whole wait as `ASK_CANCELLED`.
 
 Selection state is local to a component keyed by the request rpcId. A replay with the same id preserves a still-mounted draft, while `question/resolved` from the host removes the composer. The host remains authoritative: successful HTTP delivery does not remove pending state locally.
 

packages/client/ui-question/src/client/QuestionComposer.module.css

@@ -68,10 +68,6 @@
 
 .detail {
   margin: 0 2px 8px;
-  color: var(--dsw-alias-label-tertiary);
-  font-size: 13px;
-  line-height: 20px;
-  font-weight: 400;
 }
 
 .headerActions,

packages/client/ui-question/src/client/QuestionComposer.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState, type KeyboardEvent } from 'react'
 import clsx from 'clsx'
 import {
   Button, IconCheckOutline16, IconChevronLeftOutline14, IconChevronRightOutline14,
-  IconCloseOutline16, IconEditOutline16,
+  IconCloseOutline16, IconEditOutline16, MarkdownText,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import { PendingQuestion, type QuestionAnswer, type QuestionComposerProps } from './contract/slots.ts'
 import css from './QuestionComposer.module.css'
@@ -199,7 +199,9 @@ function QuestionFlow({ pending }: { pending: PendingQuestion }) {
         </header>
 
         <div className={css.body} data-question-scroll>
-          {question.detail !== undefined && <p className={css.detail}>{question.detail}</p>}
+          {question.detail !== undefined && (
+            <div className={css.detail}><MarkdownText text={question.detail} /></div>
+          )}
           <div className={css.options} role={question.multiSelect === true ? 'group' : 'radiogroup'}>
             {(question.options ?? []).map((option, optionIndex) => {
               const selected = draft.selected.includes(option.label)

packages/client/ui-question/tests/question-composer.spec.tsx

@@ -101,6 +101,29 @@ describe('QuestionComposer', () => {
     expect((screen.getByRole('button', { name: '正在提交…' }) as HTMLButtonElement).disabled).toBe(true)
   })
 
+  it('renders plan detail through the shared assistant Markdown primitive', () => {
+    const carrier = new PendingWait(
+      'question',
+      RpcId('markdown-plan'),
+      SID,
+      {
+        questions: [{
+          id: 'plan',
+          question: '批准这个计划吗？',
+          detail: '# 实施计划\n\n- **先验证**现状\n- 修改 `QuestionComposer`',
+          options: [{ label: '批准' }],
+        }],
+      } as PendingWait<'question'>['payload'],
+      vi.fn(),
+    )
+    const view = render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)
+
+    expect(screen.getByRole('heading', { level: 1, name: '实施计划' })).toBeTruthy()
+    expect(view.container.querySelector('strong')?.textContent).toBe('先验证')
+    expect(view.container.querySelector('code')?.textContent).toBe('QuestionComposer')
+    expect(view.container.querySelectorAll('li')).toHaveLength(2)
+  })
+
   it('skips individual questions without discarding earlier answers', () => {
     const { carrier, respond } = wait()
     render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)