From 01d450f819116beaaf2ffc9ca93f31c8b50c5e5b Mon Sep 17 00:00:00 2001 From: Chinesezjc Date: Fri, 31 Jul 2026 16:13:10 +0800 Subject: [PATCH 1/5] refactor(web-cards): route read/search/web/diff rows through collapsed ToolRow The read, search, web, and file-mutation toolviews each hand-drew their own summary-row chrome and kept their card (ReadBlock/SearchBlock/WebBlock/ DiffBlock) resident below the summary. Fold all four into the shared ToolRow: ToolRow now takes read/search/web/diff card material alongside terminal, and renders it in its collapsed-by-default expanded body, so every tool row shares one expand interaction and starts collapsed. The GenericToolCard fallback and the DetailsPanel Output section keep rendering the same cards (the panel at full height); the per-row .module.css files are deleted as ToolRow owns the chrome. --- .../client/chat/GenericToolCard.module.css | 17 --- .../toolviews/file-mutation-row.module.css | 130 ---------------- .../client/toolviews/file-mutation-row.tsx | 134 +++++----------- .../src/client/toolviews/read-row.module.css | 119 --------------- .../src/client/toolviews/read-row.tsx | 109 +++++-------- .../client/toolviews/search-row.module.css | 117 -------------- .../src/client/toolviews/search-row.tsx | 144 ++++++------------ .../src/client/toolviews/web-row.module.css | 95 ------------ .../src/client/toolviews/web-row.tsx | 96 +++++------- 9 files changed, 163 insertions(+), 798 deletions(-) delete mode 100644 packages/client/ui-conversation/src/client/chat/GenericToolCard.module.css delete mode 100644 packages/client/ui-conversation/src/client/toolviews/file-mutation-row.module.css delete mode 100644 packages/client/ui-conversation/src/client/toolviews/read-row.module.css delete mode 100644 packages/client/ui-conversation/src/client/toolviews/search-row.module.css delete mode 100644 packages/client/ui-conversation/src/client/toolviews/web-row.module.css diff --git a/packages/client/ui-conversation/src/client/chat/GenericToolCard.module.css b/packages/client/ui-conversation/src/client/chat/GenericToolCard.module.css deleted file mode 100644 index d21f6d3712..0000000000 --- a/packages/client/ui-conversation/src/client/chat/GenericToolCard.module.css +++ /dev/null @@ -1,17 +0,0 @@ -/* GenericToolCard resident cards: a read-declaring or web-declaring tool - without its own keyed row (e.g. web_fetch) grows a resident card under its - summary row. A column around the ToolRow keeps the row's own 24px height, so - the read card renders identically to the keyed ReadRow and the web card to - the web_search/web_fetch WebRow. */ - -.card { - display: flex; - flex-direction: column; -} - -/* Row indentation matches ToolRow's expanded bodies (16px leading + 6px gap), - and replaces the primitive's standalone vertical margin with the flow's. */ -.read, -.web { - margin: 4px 0 4px 22px; -} diff --git a/packages/client/ui-conversation/src/client/toolviews/file-mutation-row.module.css b/packages/client/ui-conversation/src/client/toolviews/file-mutation-row.module.css deleted file mode 100644 index 3ecf480adf..0000000000 --- a/packages/client/ui-conversation/src/client/toolviews/file-mutation-row.module.css +++ /dev/null @@ -1,130 +0,0 @@ -/* File-mutation toolview: same geometry/tokens as ToolRow (figma - {Edit,Write} · path), plus the diff card the row stacks under its summary - line. Mirrors bash-sample.module.css, whose terminal card this replaces with - a diff card. */ - -/* Summary line over the diff card; the summary row keeps its own 24px height, - so the card is a column around it rather than a change to it. */ -.card { - display: flex; - flex-direction: column; -} - -/* Row indentation matches ToolRow's expanded bodies (16px leading + 6px gap), - and replaces the primitive's standalone vertical margin with the flow's. */ -.diff { - margin: 4px 0 4px 22px; -} - -.root { - position: relative; /* sweep-glare overlay anchor */ - overflow: hidden; - display: flex; - align-items: center; - height: 24px; - min-width: 0; -} - -/* 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-file-mutation-row-sweep 2.6s ease-out infinite; - pointer-events: none; -} - -@keyframes dsh-file-mutation-row-sweep { - 0% { left: -300px; } - 90%, 100% { left: 100%; } -} - -.leading { - flex: none; - width: 16px; - height: 16px; - display: inline-flex; - align-items: center; - justify-content: center; - margin-right: 6px; - color: var(--dsw-alias-label-tertiary); -} - -.title { - flex: none; - font-size: 14px; - line-height: 24px; - color: var(--dsw-alias-label-secondary); -} - -.sep { - flex: none; - width: 2px; - height: 2px; - border-radius: 1px; - margin: 0 8px; - background: var(--dsw-alias-label-caption); -} - -.summary { - flex: 1 1 auto; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 14px; - line-height: 24px; - color: var(--dsw-alias-label-tertiary); -} - -/* File-tool path: same geometry as .summary; hover underline + pointer. */ -.fileLink { - flex: 1 1 auto; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin: 0; - padding: 0; - border: none; - background: none; - font: inherit; - text-align: left; - font-size: 14px; - line-height: 24px; - color: var(--dsw-alias-label-tertiary); - cursor: pointer; -} - -.fileLink:hover { - text-decoration: underline; -} - -.visuallyHidden { - position: absolute; - width: 1px; - height: 1px; - overflow: hidden; - clip: rect(0 0 0 0); - white-space: nowrap; -} - -/* The result text for an errored mutation, indented to the card's own column - (the diff card's inset) and in the error tone, since it stands in for the diff - card the failure path does not produce. */ -.failure { - margin: 4px 0 4px 22px; - white-space: pre-wrap; - overflow-wrap: anywhere; - font: var(--dsw-font-xs-13); - color: var(--dsw-alias-state-error-primary); -} diff --git a/packages/client/ui-conversation/src/client/toolviews/file-mutation-row.tsx b/packages/client/ui-conversation/src/client/toolviews/file-mutation-row.tsx index 323a73e77c..227726cf61 100644 --- a/packages/client/ui-conversation/src/client/toolviews/file-mutation-row.tsx +++ b/packages/client/ui-conversation/src/client/toolviews/file-mutation-row.tsx @@ -1,104 +1,54 @@ -// File-mutation toolview registrant: third-party posture over the keyed -// toolview hole (ctx.slots.register + ToolRowProps only — never imports the -// chat domain), registered under both `edit` and `write`. Product chrome -// matches ToolRow (figma: {Edit,Write} · {path}). -// -// A write/edit call declares the diff render intent, so this row renders the -// applied change through DiffBlock resident below its summary line — the same -// posture BashRow gives a terminal card. The row has no expand control and is -// not a details-panel target (tool rows stopped being one), so the diff body -// is resident rather than expand-gated, and the card's own copy and expand -// controls are the row's only interactions. CHAT_DIFF_MAX_LINES caps the body -// against the message flow; the details panel keeps the block's full default. -// The summary stays a path link (the file-tool interaction) that opens through -// the host. +// File-mutation toolview registrant: the keyed toolview hole for the `edit` +// and `write` tools. The row composes the shared ToolRow (chrome, running +// sweep, whole-row expand) and feeds it the applied diff as ToolRow's `diff` +// card material, so the change renders through DiffBlock in the collapsed-by- +// default expanded body — the same unified interaction every other card row +// has. The summary stays a path link (the file-tool interaction) that opens +// through the host; an errored mutation (write/edit return no diff on +// `result.isError`) keeps the model-facing error text on ToolRow's Output +// section, its first line in the collapsed summary. import type { Context } from 'cordis' -import { DiffBlock, IconEditOutline16, StateDot } from '@deepseek-ai/dsh-client-ui-primitives' +import { IconEditOutline16 } from '@deepseek-ai/dsh-client-ui-primitives' +import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots' import type { ToolRowProps } from '../contract/slots.ts' -import { CHAT_DIFF_MAX_LINES, diffCardModel } from '../contract/diff-card-model.ts' -import { toolRowModel, type ToolRowState } from '../contract/tool-call-model.ts' -import css from './file-mutation-row.module.css' +import { diffCardModel } from '../contract/diff-card-model.ts' +import { toolRowModel } from '../contract/tool-call-model.ts' +import { ToolRow } from '../chat/ToolRow.tsx' +import { NS } from '../locales.ts' -function leadingFor(state: ToolRowState) { - switch (state) { - case 'error': return - case 'stopped': return - // Running keeps the icon — the row sweep carries the in-flight signal. - default: return - } -} - -/** Visually hidden status — StateDot is aria-hidden; AT needs a text label. */ -function stateStatus(state: ToolRowState): string | null { - switch (state) { - case 'running': return '运行中' - case 'error': return '失败' - case 'stopped': return '已停止' - default: return null - } -} - -/** - * A settled result's text, flattened from its content blocks, for the arm that - * shows a failure the diff card cannot: write/edit return `undefined` from - * `presentResult` on `result.isError`, so an errored mutation has no diff card, - * and the keyed row is not a details-panel target. Without this the failure — - * an `old_string` that did not match, a permission denial — would read as a bare - * red dot with the model-facing error text nowhere on screen. - * @param block - the frozen call slice. - * @returns the result text, or null for a running call or an empty result. - */ -function errorText(block: ToolRowProps['block']): string | null { - if (!('kind' in block)) return null - const parts: string[] = [] - for (const item of block.content) { - if (item.type === 'text') parts.push(item.text) - } - if (parts.length === 0 && block.error !== undefined) parts.push(`${block.error.name}: ${block.error.code}`) - const text = parts.join('\n') - return text === '' ? null : text -} +/** Full row props: the toolview runtime share plus the standard locale seat. */ +type FileMutationRowProps = ToolRowProps & PropsLocale<'conversation'> /** * File-mutation row: icon + {Edit,Write} · {path} in the shared ToolRow chrome, - * with the applied diff resident below it. The summary is a path link (a file - * tool's interaction); the host's `openFile` resolves it against the session - * cwd, so this passes the tool's own path verbatim. The card's copy and expand - * controls are the row's only other actions. + * with the applied diff as the row's collapsed-by-default card body. The + * summary is a path link (a file tool's interaction); the host's `openFile` + * resolves it against the session cwd, so this passes the tool's own path + * verbatim. An errored mutation has no diff card, so ToolRow surfaces the + * model-facing error text through its Output section and its first line in the + * collapsed summary instead. */ -export function FileMutationRow({ toolName, block, cwd, openFile }: ToolRowProps) { +export function FileMutationRow({ toolName, block, cwd, openFile, inspect, t }: FileMutationRowProps) { const model = toolRowModel(toolName, block, cwd) const diff = diffCardModel(block) - const status = stateStatus(model.state) - const filePath = model.filePath - // An errored mutation has no diff card (presentResult returns undefined on - // isError); surface its result text so the failure is more than a red dot. - const failure = diff === null && model.state === 'error' ? errorText(block) : null return ( -
-
- {leadingFor(model.state)} - {status !== null && {status}} - {model.title} - - {filePath !== undefined ? ( - - ) : ( - {model.summary} - )} -
- {diff !== null && ( - - )} - {failure !== null &&
{failure}
} -
+ } + title={model.title} + summary={model.summary} + body={null} + output={model.output} + errorSummary={model.errorSummary} + diff={diff} + state={model.state} + filePath={model.filePath} + onOpenFile={openFile} + inspect={inspect} + /> ) } @@ -117,7 +67,7 @@ export const fileMutationToolview = { * @param ctx - registrant context (disposal rides ctx.effect inside slots.register). */ apply(ctx: Context): void { - ctx.slots.register({ name: 'conversation.chat.toolview', key: 'edit' }, FileMutationRow) - ctx.slots.register({ name: 'conversation.chat.toolview', key: 'write' }, FileMutationRow) + ctx.slots.register({ name: 'conversation.chat.toolview', key: 'edit', locale: NS }, FileMutationRow) + ctx.slots.register({ name: 'conversation.chat.toolview', key: 'write', locale: NS }, FileMutationRow) }, } diff --git a/packages/client/ui-conversation/src/client/toolviews/read-row.module.css b/packages/client/ui-conversation/src/client/toolviews/read-row.module.css deleted file mode 100644 index a03a949451..0000000000 --- a/packages/client/ui-conversation/src/client/toolviews/read-row.module.css +++ /dev/null @@ -1,119 +0,0 @@ -/* Read toolview: same geometry/tokens as ToolRow (figma Read · {path}), plus - the read card the row stacks under its summary line. */ - -/* Summary line over the read card; the summary row keeps its own 24px height, - so the card is a column around it rather than a change to it. */ -.card { - display: flex; - flex-direction: column; -} - -/* Row indentation matches ToolRow's expanded bodies (16px leading + 6px gap), - and replaces the primitive's standalone vertical margin with the flow's. */ -.read { - margin: 4px 0 4px 22px; -} - -.root { - position: relative; /* sweep-glare overlay anchor */ - overflow: hidden; - display: flex; - align-items: center; - height: 24px; - min-width: 0; -} - -/* Running sweep glare — same pattern as BashRow/ToolRow, so a running read row - gives the same executing feedback a running command row does. The leading - read icon stays static (a read has no per-step state to animate); the sweep - is the row-level running signal. */ -.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-read-row-sweep 2.6s ease-out infinite; - pointer-events: none; -} - -@keyframes dsh-read-row-sweep { - 0% { left: -300px; } - 90%, 100% { left: 100%; } -} - -.leading { - flex: none; - width: 16px; - height: 16px; - display: inline-flex; - align-items: center; - justify-content: center; - margin-right: 6px; - color: var(--dsw-alias-label-tertiary); -} - -.title { - flex: none; - font-size: 14px; - line-height: 24px; - color: var(--dsw-alias-label-secondary); -} - -.sep { - flex: none; - width: 2px; - height: 2px; - border-radius: 1px; - margin: 0 8px; - background: var(--dsw-alias-label-caption); -} - -.summary { - flex: 1 1 auto; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 14px; - line-height: 24px; - color: var(--dsw-alias-label-tertiary); -} - -/* File path: same geometry as .summary; hover underline + pointer. */ -.fileLink { - flex: 1 1 auto; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin: 0; - padding: 0; - border: none; - background: none; - text-align: left; - font-size: 14px; - line-height: 24px; - color: var(--dsw-alias-label-tertiary); - cursor: pointer; -} - -.fileLink:hover { - text-decoration: underline; -} - -.visuallyHidden { - position: absolute; - width: 1px; - height: 1px; - overflow: hidden; - clip: rect(0 0 0 0); - white-space: nowrap; -} diff --git a/packages/client/ui-conversation/src/client/toolviews/read-row.tsx b/packages/client/ui-conversation/src/client/toolviews/read-row.tsx index 4527f85537..8d3694eeef 100644 --- a/packages/client/ui-conversation/src/client/toolviews/read-row.tsx +++ b/packages/client/ui-conversation/src/client/toolviews/read-row.tsx @@ -1,88 +1,49 @@ -// Read toolview registrant: the keyed toolview hole for the read tool -// (ctx.slots.register + ToolRowProps only — never imports the chat domain). -// Product chrome matches ToolRow (figma: Read · {path}); the summary is the -// file path as an openable link, exactly as the generic read row draws it. -// -// A read RESULT declares the read render intent, so this row renders the file's -// own line-numbered, syntax-highlighted content through ReadBlock resident -// below its summary line — the same posture BashRow gives a terminal card. The -// card is capped at CHAT_READ_MAX_LINES (the chat flow's tighter cap over the -// block's own default of 16) with the block's internal expander keeping a long -// read from taking over the message flow. A running read (no result yet) and a -// non-read result both render the summary row alone. The read intent is +// Read toolview registrant: the keyed toolview hole for the read tool. The row +// composes the shared ToolRow (chrome, running sweep, whole-row expand) and +// feeds it the file's line-numbered, syntax-highlighted content as ToolRow's +// `read` card material, so it renders through ReadBlock in the collapsed-by- +// default expanded body — the same unified interaction every other card row +// has. The summary path is an openable host link. A running read (no result +// yet) and a non-read result render the summary row alone: the read intent is // result-side only, so there is no running-state read card to draw. import type { Context } from 'cordis' -import { IconBrowseOutline16, ReadBlock, StateDot } from '@deepseek-ai/dsh-client-ui-primitives' +import { IconBrowseOutline16 } from '@deepseek-ai/dsh-client-ui-primitives' +import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots' import type { ToolRowProps } from '../contract/slots.ts' -import { CHAT_READ_MAX_LINES, readCardModel } from '../contract/read-card-model.ts' -import { toolRowModel, type ToolRowState } from '../contract/tool-call-model.ts' -import css from './read-row.module.css' +import { readCardModel } from '../contract/read-card-model.ts' +import { toolRowModel } from '../contract/tool-call-model.ts' +import { ToolRow } from '../chat/ToolRow.tsx' +import { NS } from '../locales.ts' -/** Leading-slot state substitution: the tool icon yields to the state dot - * (error = red, interrupted = amber). Running keeps the icon. */ -function leadingFor(state: ToolRowState) { - switch (state) { - case 'error': return - case 'stopped': return - default: return - } -} - -/** Visually hidden status — StateDot is aria-hidden; AT needs a text label. */ -function stateStatus(state: ToolRowState): string | null { - switch (state) { - case 'running': return '运行中' - case 'error': return '失败' - case 'stopped': return '已停止' - default: return null - } -} +/** Full row props: the toolview runtime share plus the standard locale seat. */ +type ReadRowProps = ToolRowProps & PropsLocale<'conversation'> /** * Read row: icon + Read · {path} in the shared ToolRow chrome, with the file's - * read card resident below it. The summary path is an openable host link when - * the row names a single file; the card's copy and expand controls plus that - * link are the row's only interactions (tool rows are not details-panel - * targets). + * read card as the row's collapsed-by-default card body. The summary path is an + * openable host link when the row names a single file. */ -export function ReadRow({ toolName, block, sessionId, useSessions, openFile }: ToolRowProps) { - // Session workspace root: the read view's path relativizes against it (a - // workspace-rooted absolute path shows its short form), which the pure - // presenter cannot do. - const cwd = useSessions(list => list.byId[sessionId]?.cwd) +export function ReadRow({ toolName, block, cwd, openFile, inspect, t }: ReadRowProps) { const model = toolRowModel(toolName, block, cwd) const read = readCardModel(block, cwd) - const status = stateStatus(model.state) - const filePath = model.filePath return ( -
- {/* jscpd:ignore-start — the summary-line chrome (leading, status, title, - sep, path-link/summary) is the shared ToolRow row shape every keyed - toolview draws; extracting it into one component is a separate change - tracked for all rows at once, not this read-card PR. */} -
- {leadingFor(model.state)} - {status !== null && {status}} - {model.title} - - {filePath !== undefined ? ( - - ) : ( - {model.summary} - )} -
- {/* jscpd:ignore-end */} - {read !== null && ( - - )} -
+ } + title={model.title} + summary={model.summary} + body={null} + output={model.output} + errorSummary={model.errorSummary} + read={read} + state={model.state} + filePath={model.filePath} + onOpenFile={openFile} + inspect={inspect} + /> ) } @@ -100,6 +61,6 @@ export const readToolview = { * @param ctx - registrant context (disposal rides ctx.effect inside slots.register). */ apply(ctx: Context): void { - ctx.slots.register({ name: 'conversation.chat.toolview', key: 'read' }, ReadRow) + ctx.slots.register({ name: 'conversation.chat.toolview', key: 'read', locale: NS }, ReadRow) }, } diff --git a/packages/client/ui-conversation/src/client/toolviews/search-row.module.css b/packages/client/ui-conversation/src/client/toolviews/search-row.module.css deleted file mode 100644 index 21908bd9e1..0000000000 --- a/packages/client/ui-conversation/src/client/toolviews/search-row.module.css +++ /dev/null @@ -1,117 +0,0 @@ -/* Search toolview: same geometry/tokens as ToolRow and BashRow (figma - Search · summary), plus the search card the row stacks resident under its - summary line. */ - -/* Summary line over the search card; the summary row keeps its own 24px - height, so the card is a column around it rather than a change to it. */ -.card { - display: flex; - flex-direction: column; -} - -/* Row indentation matches ToolRow's expanded bodies (16px leading + 6px gap), - and replaces the primitive's standalone vertical margin with the flow's. */ -.search { - margin: 4px 0 4px 22px; -} - -.root { - position: relative; /* sweep-glare overlay anchor */ - overflow: hidden; - display: flex; - align-items: center; - height: 24px; - min-width: 0; -} - -/* Running sweep glare — same deepsuite ShimmerText pattern as ToolRow / BashRow. */ -.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-search-row-sweep 2.6s ease-out infinite; - pointer-events: none; -} - -@keyframes dsh-search-row-sweep { - 0% { left: -300px; } - 90%, 100% { left: 100%; } -} - -.leading { - flex: none; - width: 16px; - height: 16px; - display: inline-flex; - align-items: center; - justify-content: center; - margin-right: 6px; - color: var(--dsw-alias-label-tertiary); -} - -.title { - flex: none; - font-size: 14px; - line-height: 24px; - color: var(--dsw-alias-label-secondary); -} - -.sep { - flex: none; - width: 2px; - height: 2px; - border-radius: 1px; - margin: 0 8px; - background: var(--dsw-alias-label-caption); -} - -.summary { - flex: 1 1 auto; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 14px; - line-height: 24px; - color: var(--dsw-alias-label-tertiary); -} - -.visuallyHidden { - position: absolute; - width: 1px; - height: 1px; - overflow: hidden; - clip: rect(0 0 0 0); - white-space: nowrap; -} - -/* The result text for an errored search, indented to the card's own column and - in the error tone, standing in for the search card the failure path does not - produce. */ -.failure { - margin: 4px 0 4px 22px; - white-space: pre-wrap; - overflow-wrap: anywhere; - font: var(--dsw-font-xs-13); - color: var(--dsw-alias-state-error-primary); -} - -/* The recovery footer for a capped search: the model-facing result text (its - `Full … stored at …` locator) shown below the card in the muted tone, since - the card holds only the retained rows. Same column indent as the card body. */ -.recovery { - margin: 4px 0 4px 22px; - white-space: pre-wrap; - overflow-wrap: anywhere; - font: var(--dsw-font-xs-13); - color: var(--dsw-alias-label-tertiary); -} diff --git a/packages/client/ui-conversation/src/client/toolviews/search-row.tsx b/packages/client/ui-conversation/src/client/toolviews/search-row.tsx index 8c0181ba78..0fb08ca5e9 100644 --- a/packages/client/ui-conversation/src/client/toolviews/search-row.tsx +++ b/packages/client/ui-conversation/src/client/toolviews/search-row.tsx @@ -1,109 +1,59 @@ -// Search toolview registrant: the keyed toolview hole (ctx.slots.register + -// ToolRowProps only — never imports the chat domain). One SearchRow component -// registered under both `grep` and `glob`, since both tools declare the same -// `card: 'search'` render intent and render as one visual object; the row reads -// the `kind` discriminant off the derived model to draw grouped matches or a -// path list. Product chrome matches ToolRow / BashRow (Search · {summary}). -// -// A search call declares its render intent result-time only, so this row's -// search card is resident below the summary rather than expand-gated: the row -// itself has no expand control, and the card's own copy, per-file collapse, and -// head/tail expand are the row's only interactions. CHAT_SEARCH_MAX_LINES is -// passed as `maxLines` — the chat flow's tighter cap over the block's own -// default of 16 — so a large result stays bounded in the message flow. +// Search toolview registrant: the keyed toolview hole for the `grep` and `glob` +// tools. One SearchRow component registered under both, since both declare the +// same `card: 'search'` render intent and render as one visual object; the +// derived model's `kind` decides the card shape (grouped matches or a path +// list). The row composes the shared ToolRow (chrome, running sweep, whole-row +// expand) and feeds it the completed search as ToolRow's `search` card +// material, so it renders through SearchBlock in the collapsed-by-default +// expanded body — with a capped search's recovery footer below the card. A +// search declares its render intent result-time only, so a running row is the +// summary line alone; a settled call with no search card (an errored search, a +// nested run_code sub-dispatch, a legacy generic result) surfaces its +// model-facing text through ToolRow's Output section instead. import type { Context } from 'cordis' -import { IconSearchOutline16, SearchBlock, StateDot } from '@deepseek-ai/dsh-client-ui-primitives' +import { IconSearchOutline16 } from '@deepseek-ai/dsh-client-ui-primitives' +import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots' import type { ToolRowProps } from '../contract/slots.ts' -import { CHAT_SEARCH_MAX_LINES, searchCardModel } from '../contract/search-card-model.ts' -import { toolRowModel, type ToolRowState } from '../contract/tool-call-model.ts' -import css from './search-row.module.css' +import { searchCardModel } from '../contract/search-card-model.ts' +import { toolRowModel } from '../contract/tool-call-model.ts' +import { ToolRow } from '../chat/ToolRow.tsx' +import { NS } from '../locales.ts' -/** Leading-slot glyph substitution: the search icon yields to the terminal - * state semantic (error = red, interrupted = amber). Running keeps the icon — - * the row sweep carries the in-flight signal. */ -function leadingFor(state: ToolRowState) { - switch (state) { - case 'error': return - case 'stopped': return - default: return - } -} - -/** Visually hidden status — StateDot is aria-hidden; assistive technology needs a text label. */ -function stateStatus(state: ToolRowState): string | null { - switch (state) { - case 'running': return '运行中' - case 'error': return '失败' - case 'stopped': return '已停止' - default: return null - } -} - -/** - * A settled result's text, flattened from its content blocks, for the arm that - * shows a result the search card cannot. Two cases reach it: an errored search - * (grep/glob emit no `presentResult` on an error result, so an errored search - * has no card), and a settled call whose result view is not a search card at all - * — a nested `run_code` sub-dispatch (the backend computes no presentationMeta - * for it, so `resultView` is null) or a legacy generic result. In both the keyed - * SearchRow owns the render slot, so without this arm the model-facing text would - * have nowhere to go: an errored search would read as a bare red dot, and a - * successful cardless result would show only its summary with its content lost. - * @param block - the frozen call slice. - * @returns the result text, or null for a running call or an empty result. - */ -function errorText(block: ToolRowProps['block']): string | null { - if (!('kind' in block)) return null - const parts: string[] = [] - for (const item of block.content) { - if (item.type === 'text') parts.push(item.text) - } - if (parts.length === 0 && block.error !== undefined) parts.push(`${block.error.name}: ${block.error.code}`) - const text = parts.join('\n') - return text === '' ? null : text -} +/** Full row props: the toolview runtime share plus the standard locale seat. */ +type SearchRowProps = ToolRowProps & PropsLocale<'conversation'> /** * Search row: icon + Search · {summary} in the shared ToolRow chrome, with the - * completed search's card resident below it, and — when the result was capped — - * the recovery footer below the card. The summary row is not a details-panel - * control, so the card's copy, per-file collapse, and expand controls are the - * row's only interactions. Registered under both `grep` and `glob`; the derived - * model's `kind` decides the card shape. + * completed search's card as the row's collapsed-by-default card body (a capped + * search's recovery footer rides below it, inside ToolRow). Registered under + * both `grep` and `glob`; the derived model's `kind` decides the card shape. A + * settled call with no search card surfaces its model-facing text through + * ToolRow's Output section, since the keyed SearchRow owns this render slot. */ -export function SearchRow({ toolName, block }: ToolRowProps) { +export function SearchRow({ toolName, block, inspect, t }: SearchRowProps) { const model = toolRowModel(toolName, block) const search = searchCardModel(block) - const status = stateStatus(model.state) - // A settled call with no search card — an errored search (grep/glob emit no - // result view on error), a successful nested run_code sub-dispatch, or a - // legacy generic result — has its model-facing text nowhere else to go, since - // the keyed SearchRow owns this render slot. Surface it as the fallback body. - // A running call ('kind' absent) has no result to flatten; errorText returns - // null for it, so the arm stays closed until settle. - const settled = 'kind' in block - const fallback = search === null && settled ? errorText(block) : null return ( -
-
- {leadingFor(model.state)} - {status !== null && {status}} - {model.title} - - {/* The result view's replacement title outranks the args-derived - summary, matching the terminal card's description precedence. */} - {search?.title ?? model.summary} -
- {search !== null && ( - - )} - {/* A capped search drops rows from the card; its recovery locator (the - `Full … stored at …` footer) lives only in the result text, so show it - below the card so the one path to the dropped rows survives. */} - {search?.recovery !== undefined &&
{search.recovery}
} - {fallback !== null &&
{fallback}
} -
+ } + title={model.title} + // The result view's replacement title outranks the args-derived summary, + // matching the terminal card's description precedence. + summary={search?.title ?? model.summary} + body={null} + // A settled call with no search card (errored search, nested run_code + // sub-dispatch, legacy generic result) has its text nowhere else to go; + // ToolRow's Output section carries it, and errorSummary its first line. + output={search === null ? model.output : null} + errorSummary={model.errorSummary} + search={search} + state={model.state} + inspect={inspect} + /> ) } @@ -123,7 +73,7 @@ export const searchToolview = { * @param ctx - registrant context (disposal rides ctx.effect inside slots.register). */ apply(ctx: Context): void { - ctx.slots.register({ name: 'conversation.chat.toolview', key: 'grep' }, SearchRow) - ctx.slots.register({ name: 'conversation.chat.toolview', key: 'glob' }, SearchRow) + ctx.slots.register({ name: 'conversation.chat.toolview', key: 'grep', locale: NS }, SearchRow) + ctx.slots.register({ name: 'conversation.chat.toolview', key: 'glob', locale: NS }, SearchRow) }, } diff --git a/packages/client/ui-conversation/src/client/toolviews/web-row.module.css b/packages/client/ui-conversation/src/client/toolviews/web-row.module.css deleted file mode 100644 index 0b1519e218..0000000000 --- a/packages/client/ui-conversation/src/client/toolviews/web-row.module.css +++ /dev/null @@ -1,95 +0,0 @@ -/* Web toolview: same geometry/tokens as ToolRow (figma icon · summary), plus - the web card the row stacks under its summary line, mirroring the bash row's - resident terminal card. */ - -/* Summary line over the web card; the summary row keeps its own 24px height, - so the card is a column around it rather than a change to it. */ -.card { - display: flex; - flex-direction: column; -} - -/* Row indentation matches ToolRow's expanded bodies (16px leading + 6px gap), - and replaces the primitive's standalone vertical margin with the flow's. */ -.web { - margin: 4px 0 4px 22px; -} - -.root { - position: relative; /* sweep-glare overlay anchor */ - overflow: hidden; - display: flex; - align-items: center; - height: 24px; - min-width: 0; -} - -/* 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-web-row-sweep 2.6s ease-out infinite; - pointer-events: none; -} - -@keyframes dsh-web-row-sweep { - 0% { left: -300px; } - 90%, 100% { left: 100%; } -} - -.leading { - flex: none; - width: 16px; - height: 16px; - display: inline-flex; - align-items: center; - justify-content: center; - margin-right: 6px; - color: var(--dsw-alias-label-tertiary); -} - -.title { - flex: none; - font-size: 14px; - line-height: 24px; - color: var(--dsw-alias-label-secondary); -} - -.sep { - flex: none; - width: 2px; - height: 2px; - border-radius: 1px; - margin: 0 8px; - background: var(--dsw-alias-label-caption); -} - -.summary { - flex: 1 1 auto; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 14px; - line-height: 24px; - color: var(--dsw-alias-label-tertiary); -} - -.visuallyHidden { - position: absolute; - width: 1px; - height: 1px; - overflow: hidden; - clip: rect(0 0 0 0); - white-space: nowrap; -} diff --git a/packages/client/ui-conversation/src/client/toolviews/web-row.tsx b/packages/client/ui-conversation/src/client/toolviews/web-row.tsx index b86c523a26..4d8ab5f59f 100644 --- a/packages/client/ui-conversation/src/client/toolviews/web-row.tsx +++ b/packages/client/ui-conversation/src/client/toolviews/web-row.tsx @@ -1,24 +1,25 @@ -// Web toolview registrant: third-party posture over the keyed toolview hole -// (ctx.slots.register + ToolRowProps only — never imports the chat domain). -// Registered under BOTH web_search and web_fetch, since both declare the one -// `web` render intent and render through the one WebBlock family; the row -// discriminates on the toolName only to pick its icon and title. -// -// A web tool declares the `web` render intent at result time, so this row -// renders the completed retrieval through WebBlock resident below its summary, -// the same posture BashRow uses for the terminal card: no expand control on the -// row itself, not a details-panel target, and the block's own expander keeps a -// long source list from taking over the message flow (CHAT_WEB_MAX_SOURCES is -// passed as maxSources — the chat flow's tighter cap over the block's default -// of 16). Until the call settles there is no web card (the tools keep a generic -// pending view), so a running row is the summary line alone. +// Web toolview registrant: the keyed toolview hole for the `web_search` and +// `web_fetch` tools. Registered under BOTH, since both declare the one `web` +// render intent and render through the one WebBlock family; the row +// discriminates on the toolName only to pick its icon and title. The row +// composes the shared ToolRow (chrome, running sweep, whole-row expand) and +// feeds it the completed retrieval as ToolRow's `web` card material, so it +// renders through WebBlock in the collapsed-by-default expanded body — the same +// unified interaction every other card row has. Until the call settles there is +// no web card (the tools keep a generic pending view), so a running row is the +// summary line alone. import type { Context } from 'cordis' -import { IconBrowseOutline16, IconSearchOutline16, StateDot, WebBlock } from '@deepseek-ai/dsh-client-ui-primitives' +import { IconBrowseOutline16, IconSearchOutline16 } from '@deepseek-ai/dsh-client-ui-primitives' +import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots' import type { ToolRowProps } from '../contract/slots.ts' -import { CHAT_WEB_MAX_SOURCES, webCardModel } from '../contract/web-card-model.ts' -import { toolRowModel, type ToolRowState } from '../contract/tool-call-model.ts' -import css from './web-row.module.css' +import { webCardModel } from '../contract/web-card-model.ts' +import { toolRowModel } from '../contract/tool-call-model.ts' +import { ToolRow } from '../chat/ToolRow.tsx' +import { NS } from '../locales.ts' + +/** Full row props: the toolview runtime share plus the standard locale seat. */ +type WebRowProps = ToolRowProps & PropsLocale<'conversation'> /** web_fetch reads one URL; web_search queries. Titles are figma literals. */ const WEB_TITLES: Record = { @@ -26,49 +27,30 @@ const WEB_TITLES: Record = { web_fetch: 'Fetch', } -/** Leading icon per tool, yielding to the state semantic while failed/stopped. */ -function leadingFor(toolName: string, state: ToolRowState) { - switch (state) { - case 'error': return - case 'stopped': return - // Running keeps the icon — the row sweep carries the in-flight signal. - default: return toolName === 'web_fetch' ? : - } -} - -/** Visually hidden status — StateDot is aria-hidden; AT needs a text label. */ -function stateStatus(state: ToolRowState): string | null { - switch (state) { - case 'running': return '运行中' - case 'error': return '失败' - case 'stopped': return '已停止' - default: return null - } -} - /** * Web row: icon + Search/Fetch · {summary} in the shared ToolRow chrome, with - * the completed retrieval's web card resident below it. The summary row is not - * a details-panel control (tool rows stopped being one), so the card's own - * links and expander are the row's only interactions. + * the completed retrieval's web card as the row's collapsed-by-default card + * body. The row discriminates on `toolName` only to pick its icon and title. */ -export function WebRow({ toolName, block }: ToolRowProps) { +export function WebRow({ toolName, block, inspect, t }: WebRowProps) { const model = toolRowModel(toolName, block) const web = webCardModel(block) - const status = stateStatus(model.state) + const icon = toolName === 'web_fetch' ? : return ( -
-
- {leadingFor(toolName, model.state)} - {status !== null && {status}} - {WEB_TITLES[toolName] ?? model.title} - - {model.summary} -
- {web !== null && ( - - )} -
+ ) } @@ -86,7 +68,7 @@ export const webToolview = { * @param ctx - registrant context (disposal rides ctx.effect inside slots.register). */ apply(ctx: Context): void { - ctx.slots.register({ name: 'conversation.chat.toolview', key: 'web_search' }, WebRow) - ctx.slots.register({ name: 'conversation.chat.toolview', key: 'web_fetch' }, WebRow) + ctx.slots.register({ name: 'conversation.chat.toolview', key: 'web_search', locale: NS }, WebRow) + ctx.slots.register({ name: 'conversation.chat.toolview', key: 'web_fetch', locale: NS }, WebRow) }, } From b2e01e5ba9f38b7242c96e0ce9877e166844a251 Mon Sep 17 00:00:00 2001 From: Chinesezjc Date: Fri, 31 Jul 2026 16:34:16 +0800 Subject: [PATCH 2/5] test(web-cards): update card specs and snapshots for collapsed ToolRow Rewrite the read/search/web/diff card spec suites for the collapsed-by-default ToolRow composition: each row now needs the conversation `t`, and the card is absent from the DOM until the row's [data-expandable] toggle is clicked. Refresh the built-boot and search-card assembled snapshots (they expand the row before shaping the card) and the code-mode-round golden. Fix a fixture turn-number collision the 985/986 merge introduced (grep reused turn 67, already the multi-hunk edit's, so both shared one callId) by renumbering search/web/todo to 68-72. Document the refactor's behavior in the ui-conversation README (both languages) and add the Agent Note. --- .../2026-07-31-web-cards-toolrow.i18n.yaml | 6 ++ .../feature/2026-07-31-web-cards-toolrow.md | 32 ++++++++++ .../2026-07-31-web-cards-toolrow.zh.md | 32 ++++++++++ apps/web/tests/built-boot.snapshot.ts | 37 ++++++++---- apps/web/tests/search-card.snapshot.ts | 14 +++-- .../snapshots/code-mode-round/ui.expected.md | 6 +- .../search-card/grep-card.expected.txt | 18 +++++- .../client/connection/src/client/fixture.ts | 26 ++++----- .../client/ui-conversation/README.i18n.yaml | 4 +- packages/client/ui-conversation/README.md | 6 +- packages/client/ui-conversation/README.zh.md | 6 +- .../ui-conversation/tests/diff-card.spec.tsx | 41 +++++++++---- .../ui-conversation/tests/read-card.spec.tsx | 46 +++++++++++---- .../tests/search-card.spec.tsx | 58 ++++++++++++++----- .../ui-conversation/tests/web-card.spec.tsx | 47 ++++++++++----- .../client/ui-primitives/README.i18n.yaml | 4 +- 16 files changed, 289 insertions(+), 94 deletions(-) create mode 100644 .agents/notes/implemented/feature/2026-07-31-web-cards-toolrow.i18n.yaml create mode 100644 .agents/notes/implemented/feature/2026-07-31-web-cards-toolrow.md create mode 100644 .agents/notes/implemented/feature/2026-07-31-web-cards-toolrow.zh.md diff --git a/.agents/notes/implemented/feature/2026-07-31-web-cards-toolrow.i18n.yaml b/.agents/notes/implemented/feature/2026-07-31-web-cards-toolrow.i18n.yaml new file mode 100644 index 0000000000..483e4cc132 --- /dev/null +++ b/.agents/notes/implemented/feature/2026-07-31-web-cards-toolrow.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/feature/2026-07-31-web-cards-toolrow.md +2026-07-31-web-cards-toolrow.md: caa18563a9e66f882873e8d7e84cc3ac20702033 +2026-07-31-web-cards-toolrow.zh.md: 4e9c429497e1265b4b39ed2479f382a2f36e7741 diff --git a/.agents/notes/implemented/feature/2026-07-31-web-cards-toolrow.md b/.agents/notes/implemented/feature/2026-07-31-web-cards-toolrow.md new file mode 100644 index 0000000000..caa18563a9 --- /dev/null +++ b/.agents/notes/implemented/feature/2026-07-31-web-cards-toolrow.md @@ -0,0 +1,32 @@ +# Agent Note: Card tool rows collapse through one ToolRow + +Status: implemented + +English | [中文](2026-07-31-web-cards-toolrow.zh.md) + +## Problem + +The Web client grew five card render intents over successive PRs — terminal, diff, read, search, web — each landing as a keyed toolview registrant under `packages/client/ui-conversation/src/client/toolviews/`. They diverged in two ways the earlier PRs each acknowledged but deferred: + +- **Chrome duplication.** `read-row`, `search-row`, `web-row`, and `file-mutation-row` each hand-drew the summary row (leading state slot, visually-hidden status, title, separator dot, path-link/summary) as their own `
` with a private `.module.css`, instead of composing the shared `ToolRow`. `read-row` carried a `jscpd:ignore` marker naming the duplication and pointing at "a separate change tracked for all rows at once" — this change. +- **Resident vs. collapsed.** Those four rows kept their card (`ReadBlock`/`SearchBlock`/`WebBlock`/`DiffBlock`) resident below the summary — always expanded — while the terminal card (via `GenericToolCard`/`BashRow`) and every text row started collapsed behind ToolRow's whole-row expand. A conversation with several read/search/web/edit calls became a wall of always-open cards, defeating the summary-surface purpose of the message flow. + +## Decision + +`ToolRow` owns every card kind, and every keyed card row composes it. ToolRow already took `terminal` and `diff` card material; it now also takes `read`, `search`, and `web`, rendering whichever is present in its collapsed-by-default expanded body through the matching primitive (capped at the chat `CHAT_*` bounds). A call carries at most one card kind, so the props are mutually exclusive and the body picks the first present. + +The four keyed rows — `ReadRow`, `SearchRow`, `WebRow`, `FileMutationRow` — drop their hand-drawn chrome and private CSS and become thin `ToolRow` compositions, exactly like `AskQuestionRow`: derive the card model, pass it as the matching ToolRow prop, forward `filePath`/`onOpenFile` for the file tools and `output`/`errorSummary` for the cardless failure paths. Each row is now `ToolRowProps & PropsLocale<'conversation'>` and registers with `locale: NS`, because ToolRow needs the conversation `t` for its terminal/code body copy. `GenericToolCard` (the render-site fallback) does the same for read/search/web, so a card-declaring tool without its own keyed row collapses identically. + +The `DetailsPanel` Output section is unchanged: the panel is the single-call reading surface, so it renders each card resident at the primitive's full height, and a capped search keeps its recovery footer there. + +## Consequences + +- One expand interaction across all tool rows: collapsed one-line summary, whole row toggles the card. The card is not in the DOM until expanded (`DisclosureRow` renders `children` only when open), so tests assert absent-then-present around a `[data-expandable]` click. +- Deleted: `read-row.module.css`, `search-row.module.css`, `web-row.module.css`, `file-mutation-row.module.css`, `GenericToolCard.module.css`. The rows carry no CSS of their own; ToolRow's module owns the chrome and the card-body indentation. +- The cardless failure paths (an errored mutation, an errored/nested/legacy search) no longer draw their own `.failure`/recovery `
`; they ride ToolRow's `output` (Output section) and `errorSummary` (collapsed summary first line), which already flatten the result text with the `error.name: error.code` fallback. +- `bash-sample` keeps its own local expand chrome deliberately (the third-party-posture exemplar that never imports the chat domain); it was already collapsed, so its behavior is unchanged. + +## Alternatives considered + +- **Keep the rows resident, only unify chrome.** Rejected: the user's requirement is default-collapsed, and resident cards are what made the flow unscannable. +- **A shared `CardRow` wrapper between the rows and ToolRow.** Rejected: ToolRow already is that wrapper once it takes every card kind; a second layer would be the premature extraction the package rules warn against. diff --git a/.agents/notes/implemented/feature/2026-07-31-web-cards-toolrow.zh.md b/.agents/notes/implemented/feature/2026-07-31-web-cards-toolrow.zh.md new file mode 100644 index 0000000000..4e9c429497 --- /dev/null +++ b/.agents/notes/implemented/feature/2026-07-31-web-cards-toolrow.zh.md @@ -0,0 +1,32 @@ +# Agent Note:卡片工具行通过同一个 ToolRow 折叠 + +Status: implemented + +[English](2026-07-31-web-cards-toolrow.md) | 中文 + +## 问题 + +Web 客户端在连续几个 PR 里长出五种卡片渲染意图——terminal、diff、read、search、web,每一种都作为一个键控 toolview 注册项落在 `packages/client/ui-conversation/src/client/toolviews/` 下。它们在两处出现分歧,之前每个 PR 都承认却推迟处理: + +- **Chrome 重复。** `read-row`、`search-row`、`web-row`、`file-mutation-row` 各自把摘要行(行首状态槽、视觉隐藏状态、标题、分隔点、路径链接/摘要)手绘成自己的 `
`,配一份私有 `.module.css`,而不是组合共享的 `ToolRow`。`read-row` 带着一个 `jscpd:ignore` 标记,点名这处重复并指向"一处针对所有行一次性处理的独立改动"——就是本次改动。 +- **常驻 vs 折叠。** 那四个行把卡片(`ReadBlock`/`SearchBlock`/`WebBlock`/`DiffBlock`)常驻在摘要下方——始终展开——而终端卡片(经 `GenericToolCard`/`BashRow`)与每个文本行都从折叠状态起步,藏在 ToolRow 的整行展开之后。一个有多个 read/search/web/edit 调用的对话就成了一堵始终打开的卡片墙,违背了消息流作为摘要面的目的。 + +## 决策 + +`ToolRow` 拥有每一种卡片,而每个键控卡片行都组合它。ToolRow 原本就接收 `terminal` 与 `diff` 卡片材料;现在还接收 `read`、`search`、`web`,在其默认折叠的展开 body 里用对应原语渲染当前存在的那一种(按 chat 的 `CHAT_*` 上限截断)。一次调用最多携带一种卡片,因此这些 prop 互斥,body 取第一个存在的。 + +四个键控行——`ReadRow`、`SearchRow`、`WebRow`、`FileMutationRow`——丢掉手绘 chrome 与私有 CSS,成为薄薄的 `ToolRow` 组合,与 `AskQuestionRow` 完全一样:推导卡片模型,作为对应的 ToolRow prop 传入,为文件工具转发 `filePath`/`onOpenFile`,为无卡片的失败路径转发 `output`/`errorSummary`。每个行现在是 `ToolRowProps & PropsLocale<'conversation'>` 并以 `locale: NS` 注册,因为 ToolRow 需要对话的 `t` 来渲染其终端/代码 body 文案。`GenericToolCard`(渲染点兜底)对 read/search/web 做同样的事,所以一个没有自己键控行的卡片声明工具也以同样方式折叠。 + +`DetailsPanel` 的 Output 区不变:面板是单次调用的阅读面,因此它以原语的完整高度常驻渲染每张卡片,被截断的搜索也把恢复脚注留在那里。 + +## 后果 + +- 所有工具行共享一套展开交互:折叠时是单行摘要,整行切换卡片。卡片在展开前不在 DOM 里(`DisclosureRow` 只在打开时渲染 `children`),因此测试围绕一次 `[data-expandable]` 点击断言"先无后有"。 +- 已删除:`read-row.module.css`、`search-row.module.css`、`web-row.module.css`、`file-mutation-row.module.css`、`GenericToolCard.module.css`。这些行不再带自己的 CSS;ToolRow 的 module 拥有 chrome 与卡片 body 的缩进。 +- 无卡片的失败路径(出错的改动,出错/嵌套/旧日志的搜索)不再画自己的 `.failure`/恢复 `
`;它们改走 ToolRow 的 `output`(Output 区)与 `errorSummary`(折叠摘要首行),后者已经用 `error.name: error.code` 兜底压平结果文本。 +- `bash-sample` 有意保留自己本地的展开 chrome(第三方姿态的范例,从不引入 chat 域);它本来就是折叠的,因此行为不变。 + +## 考虑过的替代方案 + +- **保持行常驻,只统一 chrome。** 否决:用户的要求是默认折叠,而常驻卡片正是让流不可扫读的原因。 +- **在行与 ToolRow 之间加一层共享的 `CardRow` 包装。** 否决:ToolRow 一旦接收每一种卡片,它本身就是那层包装;再加一层就是 package 规则警告的过早抽取。 diff --git a/apps/web/tests/built-boot.snapshot.ts b/apps/web/tests/built-boot.snapshot.ts index 6fa5aec1ab..d2f6d913dd 100644 --- a/apps/web/tests/built-boot.snapshot.ts +++ b/apps/web/tests/built-boot.snapshot.ts @@ -112,11 +112,19 @@ it('boots the built plugin graph and renders a fixture session end to end', asyn }, { timeout: 10_000 }) // The write/edit turns render a real diff card through the assembled graph - // (the keyed FileMutationRow + DiffBlock), not just the fixture's raw text. - // The write turn's `hello fixture\n` proves the terminator rule end to end: a - // trailing newline terminates its line, so the footer reads `+1` (not a - // phantom `+2`) and one distinct file. The `+ ` prefix is a CSS ::before, so - // it is absent from textContent — assert on the line body and the footer. + // (the keyed FileMutationRow composing ToolRow + DiffBlock), not just the + // fixture's raw text. The card is collapsed by default, so expand each edit/ + // write row first. The write turn's `hello fixture\n` proves the terminator + // rule end to end: a trailing newline terminates its line, so the footer reads + // `+1` (not a phantom `+2`) and one distinct file. The `+ ` prefix is a CSS + // ::before, so it is absent from textContent — assert on the line body and the + // footer. + const mutationRows = [...document.querySelectorAll('[data-variant="write"],[data-variant="edit"]')] + expect(mutationRows.length).toBeGreaterThan(0) + for (const row of mutationRows) { + const toggle = row.querySelector('[data-expandable]') + if (toggle !== null) act(() => { fireEvent.click(toggle) }) + } const diffCards = [...document.querySelectorAll('[data-diff]')] expect(diffCards.length).toBeGreaterThan(0) const footers = diffCards.map(card => card.textContent ?? '') @@ -125,13 +133,20 @@ it('boots the built plugin graph and renders a fixture session end to end', asyn // The web render intent reaches the assembled boot graph: the fixture's // web_search / web_fetch turns render their keyed WebRow cards, proving the // registration, wire projection, and card rendering survive the real bundle - // path (not just the per-package src benches). The selector pins the KEYED - // WebRow (its own `data-variant="web"` wrapper), not the `[data-web]` attribute - // WebBlock draws — the generic fallback renders the same WebBlock, so a silent - // keyed-registration failure would still satisfy a bare `[data-web]` check. + // path (not just the per-package src benches). WebRow composes ToolRow, so the + // card is collapsed behind the row; the keyed row is pinned by its `data-tool` + // (ToolRow sets it from the wire tool name). + const webSearchRow = await waitFor(() => { + const row = document.querySelector('[data-tool="web_search"]') + expect(row).not.toBeNull() + expect(document.querySelector('[data-tool="web_fetch"]')).not.toBeNull() + return row! + }, { timeout: 10_000 }) + // Expand the web_search row to prove its WebBlock card renders end to end. + const webToggle = webSearchRow.querySelector('[data-expandable]') + if (webToggle !== null) act(() => { fireEvent.click(webToggle) }) await waitFor(() => { - expect(document.querySelector('[data-variant="web"][data-tool="web_search"]')).not.toBeNull() - expect(document.querySelector('[data-variant="web"][data-tool="web_fetch"]')).not.toBeNull() + expect(webSearchRow.querySelector('[data-web]')).not.toBeNull() }, { timeout: 10_000 }) // Every bundle injected its plugin-owned style tag (the loader's CSS path). diff --git a/apps/web/tests/search-card.snapshot.ts b/apps/web/tests/search-card.snapshot.ts index ddb2f607b5..2bfa4f9244 100644 --- a/apps/web/tests/search-card.snapshot.ts +++ b/apps/web/tests/search-card.snapshot.ts @@ -145,15 +145,21 @@ describe('assembled search card', () => { await waitFor(() => { expect(document.querySelector('[data-sample="bash-global"]')).not.toBeNull() }, { timeout: 10_000 }) - // The grep turn's keyed SearchRow renders the card resident: wait for it. + // The grep turn's keyed SearchRow composes ToolRow: the card is collapsed + // by default, so wait for the summary row, then expand it to reach the card. await waitFor(() => { const tools = [...document.querySelectorAll('[data-tool]')].map(el => el.getAttribute('data-tool')) expect(tools, `tools present: ${tools.join(', ')}`).toContain('grep') }, { timeout: 10_000 }) - // `data-tool` sits on the summary row; the card and recovery footer are its - // siblings inside the SearchRow wrapper, so shape the wrapper (its parent). - const grepRow = document.querySelector('[data-tool="grep"]')!.parentElement! + // `data-tool` sits on the ToolRow root; the collapsed row is the expand + // toggle. Click it so the card and its recovery footer mount, then shape the + // whole row (the card lives inside ToolRow's body wrapper). + const grepRow = document.querySelector('[data-tool="grep"]')! + act(() => { fireEvent.click(grepRow.querySelector('[data-expandable]') ?? grepRow) }) + await waitFor(() => { + expect(grepRow.querySelector('[data-search]')).not.toBeNull() + }, { timeout: 10_000 }) const shape = cardShape(grepRow) if (refreshing) { mkdirSync(dirname(EXPECTED), { recursive: true }) diff --git a/apps/web/tests/snapshots/code-mode-round/ui.expected.md b/apps/web/tests/snapshots/code-mode-round/ui.expected.md index 8b170486a5..5d1979eadf 100644 --- a/apps/web/tests/snapshots/code-mode-round/ui.expected.md +++ b/apps/web/tests/snapshots/code-mode-round/ui.expected.md @@ -20,8 +20,10 @@ - img - text: Code Run bash echo and catch missing file read - img -- text: Bash Echo CODE_ROUND_OK 失败 Read -- button "missing.txt" +- text: Bash Echo CODE_ROUND_OK +- 'button "Read Error: cannot read \"{{cwd}}/workspace/missing.txt\": not found"': + - img + - text: "Read Error: cannot read \"{{cwd}}/workspace/missing.txt\": not found" - button "Think The program ran successfully. Let me now reply DONE as instructed.": - img - img diff --git a/apps/web/tests/snapshots/search-card/grep-card.expected.txt b/apps/web/tests/snapshots/search-card/grep-card.expected.txt index 3d0efb3ecd..7fde9b0307 100644 --- a/apps/web/tests/snapshots/search-card/grep-card.expected.txt +++ b/apps/web/tests/snapshots/search-card/grep-card.expected.txt @@ -8,4 +8,20 @@ line=141: const [collapsed, setCollapsed] = useState>(() = line=73: const search = searchCardModel(block) line=90: line=113: ctx.slots.register({ name: 'conversation.chat.toolview', key: 'grep' }, SearchRow) -expand=… 其余 4 行 \ No newline at end of file +expand=… 其余 4 行 +recovery=Found 9 of 42 matches + +packages/client/ui-primitives/src/SearchBlock.tsx +Line 16: export const DEFAULT_SEARCH_MAX_LINES = 16 +Line 138: export function SearchBlock(props: SearchBlockProps) { +Line 141: const [collapsed, setCollapsed] = useState>(() => new Set()) +packages/client/ui-conversation/src/client/contract/search-card-model.ts +Line 24: export const CHAT_SEARCH_MAX_LINES = 8 +Line 60: export function searchCardModel(block: ToolCallBlock): SearchCardModel | null { +packages/client/ui-conversation/src/client/toolviews/search-row.tsx +Line 71: export function SearchRow({ toolName, block }: ToolRowProps) { +Line 73: const search = searchCardModel(block) +Line 90: +Line 113: ctx.slots.register({ name: 'conversation.chat.toolview', key: 'grep' }, SearchRow) + +(Full grep result stored at: fixture://spill/grep-68. Read it to see every match.) \ No newline at end of file diff --git a/packages/client/connection/src/client/fixture.ts b/packages/client/connection/src/client/fixture.ts index 576df9d1df..6f508009db 100644 --- a/packages/client/connection/src/client/fixture.ts +++ b/packages/client/connection/src/client/fixture.ts @@ -165,7 +165,7 @@ const READ_SAMPLE_TOTAL = 180 const READ_SAMPLE_TEXT = READ_SAMPLE_SOURCE.map((text, index) => `${READ_SAMPLE_FIRST_LINE + index}: ${text}`).join('\n') /** - * Structured grep result for the search sample (turn 67): matches grouped by + * Structured grep result for the search sample (turn 68): matches grouped by * file, authored inline because the client-side fixture cannot import the tool * that produces the canonical value. `truncated` with a larger `total` than the * retained match count exercises the search card's capped indicator; the file @@ -211,11 +211,11 @@ const SEARCH_MATCHES_TEXT = [ ...SEARCH_MATCHES_FIXTURE.map(file => [file.path, ...file.matches.map(m => `Line ${m.lineNumber}: ${m.line}`)].join('\n')), '', - '(Full grep result stored at: fixture://spill/grep-67. Read it to see every match.)', + '(Full grep result stored at: fixture://spill/grep-68. Read it to see every match.)', ].join('\n') /** - * Structured glob result for the search sample (turn 68): a flat path list, + * Structured glob result for the search sample (turn 69): a flat path list, * truncated with a larger `total` so the path card shows its capped indicator. */ const SEARCH_PATHS_FIXTURE = [ @@ -234,11 +234,11 @@ const SEARCH_PATHS_FIXTURE = [ const SEARCH_PATHS_TEXT = [ ...SEARCH_PATHS_FIXTURE, '', - '(Showing 5 of 23 paths. Full sorted result stored at: fixture://spill/glob-68. Read it to see every path.)', + '(Showing 5 of 23 paths. Full sorted result stored at: fixture://spill/glob-69. Read it to see every path.)', ].join('\n') /** - * The structured `web_search` result view for fixture turn 69, authored inline + * The structured `web_search` result view for fixture turn 70, authored inline * because this client-side fixture cannot import the web tool that projects it. * The sources exercise the citation list's features: a titled source with a * snippet and a date, a source with no title (its hostname labels the link) and @@ -268,7 +268,7 @@ const WEB_SEARCH_RESULT: Omit, 'card' | 'kind'> = { url: 'https://www.deepseek.com/blog/harness-architecture', statusCode: 200, @@ -484,17 +484,17 @@ function buildAlphaLog(): SessionEvent[] { // structured window. toolTurn(66, 'read', `{"file_path":${JSON.stringify(READ_SAMPLE_PATH)},"offset":${READ_SAMPLE_FIRST_LINE}}`, READ_SAMPLE_TEXT) - // Turns 67-68: the search card's two shapes. `grep` emits a `card: 'search'` + // Turns 68-69: the search card's two shapes. `grep` emits a `card: 'search'` // `shape: 'matches'` result view (grouped-by-file matches, truncated with a // larger `total`), `glob` emits `shape: 'paths'` (a flat path list, likewise // truncated). Both ride the keyed SearchRow registration under their own // names; the render-site fallback row is covered by the model derivation // tests, since every fixture search tool has a keyed row. Ordered before the // todo turn for the same standing-plan reason the bash turn is. - toolTurn(67, 'grep', '{"pattern":"SEARCH_MAX_LINES","path":"packages/client"}', SEARCH_MATCHES_TEXT) - toolTurn(68, 'glob', '{"pattern":"**/SearchBlock*","path":"packages/client"}', SEARCH_PATHS_TEXT) + toolTurn(68, 'grep', '{"pattern":"SEARCH_MAX_LINES","path":"packages/client"}', SEARCH_MATCHES_TEXT) + toolTurn(69, 'glob', '{"pattern":"**/SearchBlock*","path":"packages/client"}', SEARCH_PATHS_TEXT) - // Turns 69-70: the web render intent — a web_search whose result view carries + // Turns 70-71: the web render intent — a web_search whose result view carries // structured sources plus an answer (the citation list, one source lacking a // title so its hostname labels the link, the capped indicator on), and a // web_fetch whose result view carries the fetched URL and its HTTP status. @@ -503,11 +503,11 @@ function buildAlphaLog(): SessionEvent[] { // the real tools so they hit the keyed WebRow registration. Ordered BEFORE // the todo turn for the same reason turn 65 is: the standing plan retires at // the next turn/start, so a turn after it would empty the dock's plan strip. - toolTurn(69, 'web_search', '{"query":"deepseek harness architecture"}', 'Search results for deepseek harness architecture.') - toolTurn(70, 'web_fetch', '{"url":"https://www.deepseek.com/blog/harness-architecture"}', '# Harness architecture\n\nEverything is a plugin.') + toolTurn(70, 'web_search', '{"query":"deepseek harness architecture"}', 'Search results for deepseek harness architecture.') + toolTurn(71, 'web_fetch', '{"url":"https://www.deepseek.com/blog/harness-architecture"}', '# Harness architecture\n\nEverything is a plugin.') const todoArgs = JSON.stringify({ todos: fixtureTodos }) - toolTurn(71, 'todo_write', todoArgs, 'Updated todo list: 1 pending, 1 in progress, 1 completed.') + toolTurn(72, 'todo_write', todoArgs, 'Updated todo list: 1 pending, 1 in progress, 1 completed.') // The real tool appends the snapshot mid-execution — between tool/call and // tool/result — so the fixture reproduces that exact ordering (the last // toolTurn events run ... tool/call, tool/result, step/end, turn/end). diff --git a/packages/client/ui-conversation/README.i18n.yaml b/packages/client/ui-conversation/README.i18n.yaml index cffb1cc453..1d9807ae38 100644 --- a/packages/client/ui-conversation/README.i18n.yaml +++ b/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: b183aab56a10c3a22eeab31f8b1b0e6b5219beba -README.zh.md: af6427774a048de324d57bc9856f77547e9a03cc +README.md: 8003e8901d580b4aae64b5920427e789e2233acc +README.zh.md: ff734b719ccb569f303aada43a3f83fde70f5d84 diff --git a/packages/client/ui-conversation/README.md b/packages/client/ui-conversation/README.md index dce5fe10c7..8003e8901d 100644 --- a/packages/client/ui-conversation/README.md +++ b/packages/client/ui-conversation/README.md @@ -16,13 +16,13 @@ Generic tool rows classify the built-in bash, read, search, write, edit, and run A tool call declaring the `terminal` render intent renders its command output inline, at both conversation render sites, through ui-primitives' `TerminalBlock`. `contract/terminal-card-model.ts` is the single derivation from the snapshot's `callView`/`resultView` pair, so the sites cannot disagree about a command, its cwd, or its exit status; it yields null — the generic path — for any other card tag, including one this client version does not know. Both sites therefore also show the card's run-state dot, which is the same `StateDot` semantic a tool row's leading icon carries, so a row and its own card always agree about one command's state. A multi-line command gets one prompt row per line, with the dot marking the call once on the first row — the exit status is the whole call's, so a dot per line would claim a per-line outcome bash does not report. The keyed `BashRow` carries the card resident below its summary row; since tool rows are no longer details-panel click targets, the card's copy and expand controls are the row's only interactions. The render-site fallback row keeps the card behind its existing expand control. Rows cap at `CHAT_TERMINAL_MAX_LINES` (8) against the panel's 16, which is what keeps a summary surface bounded — the panel stays the single-call reading surface. Inline output is licensed per render intent — the terminal and web cards, each with its own bound; a generic tool's content remains panel-only ([decision](../../../.agents/notes/implemented/feature/2026-07-28-web-terminal-card.md)). -A tool call declaring the `web` render intent renders its web retrieval inline, at both conversation render sites, through ui-primitives' `WebBlock`. `contract/web-card-model.ts` is the single derivation from the snapshot's `resultView`, mirroring the terminal card, so the sites cannot disagree about what a web call shows; it yields null — the generic path — for a running call, a non-web result view, a generic result view, a `card` tag this client version does not know, or a web card whose `kind` this client version does not know (a newer host's value, which the wire cannot be trusted to be `search` or `fetch`). The keyed `WebRow` registers one component under both `web_search` and `web_fetch`, discriminating on the tool name only for its icon and title; a web-declaring tool without a keyed row lands on the `GenericToolCard` fallback, which grows the same resident card, and the details panel renders it at the primitive's full source allowance and, below the card, the flattened model-visible result content — a fetch body is readable only there, since its card carries only the URL and status. Rows cap at `CHAT_WEB_MAX_SOURCES` (8) against the panel's 16, the same summary-versus-reading split the terminal card draws ([decision](../../../.agents/notes/implemented/feature/2026-07-30-web-result-card-frontend.md)). +A tool call declaring the `web` render intent renders its web retrieval inline, at both conversation render sites, through ui-primitives' `WebBlock`. `contract/web-card-model.ts` is the single derivation from the snapshot's `resultView`, mirroring the terminal card, so the sites cannot disagree about what a web call shows; it yields null — the generic path — for a running call, a non-web result view, a generic result view, a `card` tag this client version does not know, or a web card whose `kind` this client version does not know (a newer host's value, which the wire cannot be trusted to be `search` or `fetch`). The keyed `WebRow` registers one component under both `web_search` and `web_fetch`, discriminating on the tool name only for its icon and title; it composes the shared `ToolRow`, feeding the card as ToolRow's `web` body, so the retrieval is the row's collapsed-by-default expanded card (the same unified expand every card row has). A web-declaring tool without a keyed row lands on the `GenericToolCard` fallback, which routes the card through ToolRow the same way, and the details panel renders it at the primitive's full source allowance and, below the card, the flattened model-visible result content — a fetch body is readable only there, since its card carries only the URL and status. Rows cap at `CHAT_WEB_MAX_SOURCES` (8) against the panel's 16, the same summary-versus-reading split the terminal card draws ([decision](../../../.agents/notes/implemented/feature/2026-07-30-web-result-card-frontend.md)). -A tool call declaring the `diff` render intent (the `write`/`edit` tools) renders its applied change inline through ui-primitives' `DiffBlock`, the same four-layer shape. `contract/diff-card-model.ts` is the single derivation from the `callView`/`resultView` pair; the settled result's hunks replace the call-time diff, and it yields null — the generic path — for any other card tag or a generic result view (write/edit's execution errors). The keyed `FileMutationRow` (registered under both `write` and `edit`) carries the card resident below its summary, whose path link still opens the file through the host; the render-site fallback and the details panel are diff-aware too. Rows cap at `CHAT_DIFF_MAX_LINES` (8) against the panel's 16 ([decision](../../../.agents/notes/implemented/feature/2026-07-30-web-diff-card.md)). +A tool call declaring the `diff` render intent (the `write`/`edit` tools) renders its applied change inline through ui-primitives' `DiffBlock`, the same four-layer shape. `contract/diff-card-model.ts` is the single derivation from the `callView`/`resultView` pair; the settled result's hunks replace the call-time diff, and it yields null — the generic path — for any other card tag or a generic result view (write/edit's execution errors). The keyed `FileMutationRow` (registered under both `write` and `edit`) composes the shared `ToolRow`, feeding the diff as ToolRow's `diff` body, so it is the row's collapsed-by-default expanded card; the summary path link still opens the file through the host, and an errored mutation (no diff card) surfaces its error text through ToolRow's Output section with the first line in the collapsed summary. The render-site fallback and the details panel are diff-aware too. Rows cap at `CHAT_DIFF_MAX_LINES` (8) against the panel's 16 ([decision](../../../.agents/notes/implemented/feature/2026-07-30-web-diff-card.md)). The chat flow projects consecutive model-retry nodes across retry turns into one stable, muted status row updated to the latest attempt; every retry event remains in the runtime snapshot and session log. Its frontend countdown anchors the scheduled delay to client receipt, avoiding host/browser clock skew, rounds remaining time up to seconds, and has a one-second floor. The latest unresolved retry uses a left-to-right text shimmer. Subsequent turn facts distinguish an attempt that started from one cancelled during backoff, while the Host running bit only controls the live animation; the row then shows a static completed or cancelled label. Normal policy rows show the finite retry maximum; always policy rows show `∞`. Activating the row reveals the latest exact retry delay and failure message. The client runtime removes each failed step's streaming tail before its retry node arrives, while the status remains visible after a later attempt succeeds. -A `grep`/`glob` call declaring the `search` render intent renders its result inline, at the same render sites, through ui-primitives' `SearchBlock` — grep's matches grouped by file (each a collapsible header of `lineNumber: line` rows), glob's flat path list. `contract/search-card-model.ts` is the single derivation from the snapshot's `resultView`; unlike the terminal card it reads no `callView`, since a search has no matches or paths before `execute`, so a running search shows its summary alone. It yields null — the generic path — for any non-search result view, a `card` or `kind` this client version does not compile, and (because those ride the untrusted wire frame) a known kind whose `files`/`paths` is malformed. The keyed `SearchRow`, registered under both `grep` and `glob` since the derived `kind` decides the shape, carries the card resident below its summary; the render-site fallback keeps it behind the expand control. Both cap at `CHAT_SEARCH_MAX_LINES` (8) against the panel's 16. A capped search drops rows from the card, but the locator to the rest — grep/glob's `Full … stored at …` footer — lives only in the result text, so the derivation surfaces that as a recovery footer below the card when (and only when) the result was truncated; a settled call with no card at all (an errored search, a nested `run_code` sub-dispatch, a legacy generic result) falls back to its flattened result text so nothing is lost behind a bare summary ([decision](../../../.agents/notes/implemented/feature/2026-07-30-web-search-card.md)). +A `grep`/`glob` call declaring the `search` render intent renders its result inline, at the same render sites, through ui-primitives' `SearchBlock` — grep's matches grouped by file (each a collapsible header of `lineNumber: line` rows), glob's flat path list. `contract/search-card-model.ts` is the single derivation from the snapshot's `resultView`; unlike the terminal card it reads no `callView`, since a search has no matches or paths before `execute`, so a running search shows its summary alone. It yields null — the generic path — for any non-search result view, a `card` or `kind` this client version does not compile, and (because those ride the untrusted wire frame) a known kind whose `files`/`paths` is malformed. The keyed `SearchRow`, registered under both `grep` and `glob` since the derived `kind` decides the shape, composes the shared `ToolRow`, feeding the card as ToolRow's `search` body, so it is the row's collapsed-by-default expanded card; the render-site fallback routes it the same way. Both cap at `CHAT_SEARCH_MAX_LINES` (8) against the panel's 16. A capped search drops rows from the card, but the locator to the rest — grep/glob's `Full … stored at …` footer — lives only in the result text, so the derivation surfaces that as a recovery footer below the card when (and only when) the result was truncated; a settled call with no card at all (an errored search, a nested `run_code` sub-dispatch, a legacy generic result) surfaces its flattened result text through ToolRow's Output section so nothing is lost behind a bare summary ([decision](../../../.agents/notes/implemented/feature/2026-07-30-web-search-card.md)). Tool rows are slots too — the standalone tool ring (`ToolViewRegistry`/`ctx.toolviews`/outlet) is retired. The chat entry declares the keyed `'conversation.chat.toolview'` hole (session scope; the key space is runtime-open); its render site dispatches per row via `entryKey: toolName` with `GenericToolCard` as the call-site `fallback`. The owner payload is the uniform `ToolRowOwnerProps` (`callId`/`toolName`/`block`/`openFile`) and `ToolRowProps` pre-composes it with the session standard kit. A registrant is a plain plugin: `ctx.slots.register({ name: 'conversation.chat.toolview', key: '', inject? }, Row)` with `inject: ['slots', 'conversation']` as the load-order seam (apply mounts ConversationService after the chat registration, so the service being present guarantees the slot is declared); session differentiation happens inside the component (`useSessions` reading `parentId` — the bash sample is the third-party-posture exemplar). Trajectory/waterfall toolview slots share this shape and land with their own render sites (RendersCheck rejects a declaration nobody renders). diff --git a/packages/client/ui-conversation/README.zh.md b/packages/client/ui-conversation/README.zh.md index 2c5581194d..ff734b719c 100644 --- a/packages/client/ui-conversation/README.zh.md +++ b/packages/client/ui-conversation/README.zh.md @@ -14,13 +14,13 @@ 声明 `terminal` 渲染意图的工具调用,会在两个对话渲染点上都通过 ui-primitives 的 `TerminalBlock` 内联渲染其命令输出。`contract/terminal-card-model.ts` 是从快照的 `callView`/`resultView` 对推导的唯一位置,因此两个渲染点不可能在命令、cwd 或退出状态上产生分歧;对任何其他 card 标签——包括当前客户端版本不认识的标签——它返回 null,落回通用路径。因此两个渲染点也都显示卡片的运行状态点,它与工具行行首图标承载同一套 `StateDot` 语义,所以一行与其自身的卡片对同一条命令的状态总是一致。多行命令的每一行各占一个提示行,状态点只在第一行为整次调用标记一次——退出状态属于整次调用,因此每行一枚就会声称一个 bash 并不报告的逐行结果。键控的 `BashRow` 把卡片常驻在摘要行下方;由于工具行已不再是详情面板的点击目标,卡片的复制与展开控件就是该行唯一的交互。渲染点兜底行则保持其既有的展开控件。行的上限是 `CHAT_TERMINAL_MAX_LINES`(8),面板为 16,正是这一点让摘要面保持有界——面板仍是单次调用的阅读面。内联输出按渲染意图开放——终端卡片与 web 卡片,各有自己的上限;通用工具的内容仍然只在面板中呈现([决策](../../../.agents/notes/implemented/feature/2026-07-28-web-terminal-card.md))。 -声明 `web` 渲染意图的工具调用,会在两个对话渲染点上都通过 ui-primitives 的 `WebBlock` 内联渲染其 web 检索。`contract/web-card-model.ts` 是从快照的 `resultView` 推导的唯一位置,镜像终端卡片,因此两个渲染点不可能对一次 web 调用的显示产生分歧;对运行中的调用、非 web 的 result view、generic result view、本客户端版本不认识的 `card` 标签,或本客户端版本不认识 `kind` 的 web 卡片(更新的 host 发来的值,wire 上不可信其为 `search` 或 `fetch`),它返回 null,落回通用路径。键控的 `WebRow` 把一个组件注册在 `web_search` 与 `web_fetch` 两个键下,仅根据工具名判别以选取图标与标题;没有自己键控行的 web 声明工具落到 `GenericToolCard` 兜底,它长出同一张常驻卡片,详情面板则以原语的完整 source 额度渲染它,并在卡片下方渲染摊平的模型可见结果内容——fetch 正文只在此处可读,因为其卡片只携带 URL 和状态。行的上限是 `CHAT_WEB_MAX_SOURCES`(8),面板为 16,与终端卡片所画的摘要面对阅读面的同一划分([决策](../../../.agents/notes/implemented/feature/2026-07-30-web-result-card-frontend.md))。 +声明 `web` 渲染意图的工具调用,会在两个对话渲染点上都通过 ui-primitives 的 `WebBlock` 内联渲染其 web 检索。`contract/web-card-model.ts` 是从快照的 `resultView` 推导的唯一位置,镜像终端卡片,因此两个渲染点不可能对一次 web 调用的显示产生分歧;对运行中的调用、非 web 的 result view、generic result view、本客户端版本不认识的 `card` 标签,或本客户端版本不认识 `kind` 的 web 卡片(更新的 host 发来的值,wire 上不可信其为 `search` 或 `fetch`),它返回 null,落回通用路径。键控的 `WebRow` 把一个组件注册在 `web_search` 与 `web_fetch` 两个键下,仅根据工具名判别以选取图标与标题;它组合共享的 `ToolRow`,把卡片作为 ToolRow 的 `web` body 传入,因此检索成为该行默认折叠的展开卡片(与每个卡片行相同的统一展开交互)。没有自己键控行的 web 声明工具落到 `GenericToolCard` 兜底,它以同样方式经 ToolRow 渲染卡片,详情面板则以原语的完整 source 额度渲染它,并在卡片下方渲染摊平的模型可见结果内容——fetch 正文只在此处可读,因为其卡片只携带 URL 和状态。行的上限是 `CHAT_WEB_MAX_SOURCES`(8),面板为 16,与终端卡片所画的摘要面对阅读面的同一划分([决策](../../../.agents/notes/implemented/feature/2026-07-30-web-result-card-frontend.md))。 -声明 `diff` 渲染意图的工具调用(`write`/`edit` 工具),通过 ui-primitives 的 `DiffBlock` 内联渲染其已应用的改动,采用同一套四层结构。`contract/diff-card-model.ts` 是从 `callView`/`resultView` 对推导的唯一位置;已结算 result 的 hunk 替换 call 时 diff,对任何其他 card 标签或 generic result view(write/edit 的执行错误)它返回 null,落回通用路径。键控的 `FileMutationRow`(在 `write` 与 `edit` 下都注册)把卡片常驻在摘要之下,其路径链接仍经 host 打开文件;渲染点兜底行与详情面板同样感知 diff。行的上限是 `CHAT_DIFF_MAX_LINES`(8),面板为 16([决策](../../../.agents/notes/implemented/feature/2026-07-30-web-diff-card.md))。 +声明 `diff` 渲染意图的工具调用(`write`/`edit` 工具),通过 ui-primitives 的 `DiffBlock` 内联渲染其已应用的改动,采用同一套四层结构。`contract/diff-card-model.ts` 是从 `callView`/`resultView` 对推导的唯一位置;已结算 result 的 hunk 替换 call 时 diff,对任何其他 card 标签或 generic result view(write/edit 的执行错误)它返回 null,落回通用路径。键控的 `FileMutationRow`(在 `write` 与 `edit` 下都注册)组合共享的 `ToolRow`,把 diff 作为 ToolRow 的 `diff` body 传入,因此它是该行默认折叠的展开卡片;摘要路径链接仍经 host 打开文件,而出错的改动(没有 diff 卡片)经 ToolRow 的 Output 区呈现其错误文本,首行进入折叠摘要。渲染点兜底行与详情面板同样感知 diff。行的上限是 `CHAT_DIFF_MAX_LINES`(8),面板为 16([决策](../../../.agents/notes/implemented/feature/2026-07-30-web-diff-card.md))。 聊天流会将跨重试轮次连续出现的模型重试节点投影为一个稳定的弱化状态行,并用最新一次尝试更新该行;每个重试事件仍保留在运行时快照与会话日志中。前端倒计时以客户端收到事件的时刻为计划延迟的起点,避免 Host 与浏览器的时钟偏差;剩余时间向上取整到秒,且下限为 1 秒。最近一次尚未完成的重试会显示从左到右的文字渐变动画。后续轮次事实用于区分已开始的尝试与在退避期间取消的尝试,Host 的 running 位只控制实时动画;随后该行会显示静态的已完成或已取消标签。normal 策略行显示有限重试上限;always 策略行显示 `∞`。激活该行会显示最近一次重试的精确延迟和失败消息。客户端运行时会在相应重试节点到达前移除每个失败步骤的流式输出尾部;后续某次尝试成功后,该状态仍保持可见。 -声明 `search` 渲染意图的 `grep`/`glob` 调用,会在同样的渲染点上通过 ui-primitives 的 `SearchBlock` 内联渲染其结果——grep 的匹配按文件分组(每个是一个可折叠的头,下辖 `lineNumber: line` 行),glob 是扁平路径列表。`contract/search-card-model.ts` 是从快照的 `resultView` 推导的唯一位置;与终端卡片不同,它不读 `callView`,因为搜索在 `execute` 前没有匹配或路径,所以运行中的搜索只显示摘要。对任何非搜索的结果视图、当前客户端版本无法编译的 `card` 或 `kind`、以及(因为这些都与不可信的 wire 帧同行)一个 `files`/`paths` 格式错误的已知 kind,它都返回 null,落回通用路径。键控的 `SearchRow` 因推导出的 `kind` 决定形态而同时注册在 `grep` 与 `glob` 下,把卡片常驻在摘要行下方;渲染点兜底行则把它保持在展开控件之后。两者上限都是 `CHAT_SEARCH_MAX_LINES`(8),面板为 16。被截断的搜索会从卡片里丢掉一些行,但通往其余部分的定位符——grep/glob 的 `Full … stored at …` 脚注——只存在于结果文本里,因此推导在(且仅在)结果被截断时把它作为恢复脚注画在卡片下方;一个完全没有卡片的已结算调用(出错的搜索、嵌套 `run_code` 子派发、旧日志的 generic 结果)则回退到其压平后的结果文本,从而不让任何内容丢失在一个光秃秃的摘要之后([决策](../../../.agents/notes/implemented/feature/2026-07-30-web-search-card.md))。 +声明 `search` 渲染意图的 `grep`/`glob` 调用,会在同样的渲染点上通过 ui-primitives 的 `SearchBlock` 内联渲染其结果——grep 的匹配按文件分组(每个是一个可折叠的头,下辖 `lineNumber: line` 行),glob 是扁平路径列表。`contract/search-card-model.ts` 是从快照的 `resultView` 推导的唯一位置;与终端卡片不同,它不读 `callView`,因为搜索在 `execute` 前没有匹配或路径,所以运行中的搜索只显示摘要。对任何非搜索的结果视图、当前客户端版本无法编译的 `card` 或 `kind`、以及(因为这些都与不可信的 wire 帧同行)一个 `files`/`paths` 格式错误的已知 kind,它都返回 null,落回通用路径。键控的 `SearchRow` 因推导出的 `kind` 决定形态而同时注册在 `grep` 与 `glob` 下,组合共享的 `ToolRow`,把卡片作为 ToolRow 的 `search` body 传入,因此它是该行默认折叠的展开卡片;渲染点兜底行以同样方式渲染它。两者上限都是 `CHAT_SEARCH_MAX_LINES`(8),面板为 16。被截断的搜索会从卡片里丢掉一些行,但通往其余部分的定位符——grep/glob 的 `Full … stored at …` 脚注——只存在于结果文本里,因此推导在(且仅在)结果被截断时把它作为恢复脚注画在卡片下方;一个完全没有卡片的已结算调用(出错的搜索、嵌套 `run_code` 子派发、旧日志的 generic 结果)则经 ToolRow 的 Output 区呈现其压平后的结果文本,从而不让任何内容丢失在一个光秃秃的摘要之后([决策](../../../.agents/notes/implemented/feature/2026-07-30-web-search-card.md))。 工具行同样是 slot:独立工具环(`ToolViewRegistry`/`ctx.toolviews`/outlet)已经退役。聊天配置项声明键控的 `'conversation.chat.toolview'` 空位(Session scope;key 空间在运行时开放);其渲染点逐行通过 `entryKey: toolName` 分发,并以 `GenericToolCard` 作为调用点 `fallback`。owner 载荷是统一的 `ToolRowOwnerProps`(`callId`/`toolName`/`block`/`openFile`),`ToolRowProps` 则预先将其与 Session 标准工具包组合。注册方只是普通插件:`ctx.slots.register({ name: 'conversation.chat.toolview', key: '', inject? }, Row)`,以 `inject: ['slots', 'conversation']` 作为加载顺序 seam(apply 在聊天注册后挂载 ConversationService,因此服务存在即可保证 slot 已声明);Session 区分在组件内部完成(`useSessions` 读取 `parentId`,bash 示例是第三方姿态的范例)。Trajectory/waterfall 工具视图 slot 共享此形状,并随各自的渲染点落地(RendersCheck 会拒绝没有任何渲染方的声明)。 diff --git a/packages/client/ui-conversation/tests/diff-card.spec.tsx b/packages/client/ui-conversation/tests/diff-card.spec.tsx index e25045c9f0..40f637b3d4 100644 --- a/packages/client/ui-conversation/tests/diff-card.spec.tsx +++ b/packages/client/ui-conversation/tests/diff-card.spec.tsx @@ -12,7 +12,7 @@ import type { ConversationSnapshot, RunningToolCall, SessionId, SessionListState, ToolResultNode, WorkspaceListState, } from '@deepseek-ai/dsh-client-runtime/client' import type { ToolCallView, ToolResultView } from '@deepseek-ai/dsh-client-connection/client' -import type { SelectionTarget, ToolRowProps } from '@deepseek-ai/dsh-client-ui-conversation/client' +import type { SelectionTarget } from '@deepseek-ai/dsh-client-ui-conversation/client' import { makeTranslate } from '@deepseek-ai/dsh-client-test-runtime' import { zh as commonZh } from '@deepseek-ai/dsh-client-locale/src/locales/zh.ts' import { CHAT_DIFF_MAX_LINES, diffCardModel } from '../src/client/contract/diff-card-model.ts' @@ -24,6 +24,9 @@ import { zh } from '../src/client/locales.ts' afterEach(cleanup) +/** FileMutationRow's full prop shape (ToolRow runtime share + conversation locale seat). */ +type FileMutationRowProps = Parameters[0] + const SID = 's1' as SessionId const t = makeTranslate(zh, commonZh) @@ -155,14 +158,23 @@ describe('FileMutationRow diff card', () => { phase: 'ready', }) - const rowProps = (block: RunningToolCall | ToolResultNode, toolName = 'edit'): ToolRowProps => ({ + const rowProps = (block: RunningToolCall | ToolResultNode, toolName = 'edit'): FileMutationRowProps => ({ callId: 'c1', toolName, block, openFile: vi.fn(), cwd: '/w/app', sessionId: SID, useSessions: bindSnapshotSelector(list()), - } as unknown as ToolRowProps) + t, + } as unknown as FileMutationRowProps) - it('renders the applied diff under the summary row, without an expand gesture', () => { + /** The whole summary row is the expand toggle (ToolRow's unified interaction). */ + const toggleRow = (view: { container: HTMLElement }) => { + fireEvent.click(view.container.querySelector('[data-expandable]')!) + } + + it('collapses to the summary row; expanding reveals the applied diff card', () => { const view = render() - // The diff card is resident (no expand toggle needed). + // The diff card is collapsed by default — not in the DOM until expanded. + expect(view.container.querySelector('[data-diff]')).toBeNull() + expect(view.queryByText('hello fixture')).toBeNull() + toggleRow(view) expect(view.container.querySelector('[data-diff]')).not.toBeNull() expect(view.getByText('hello fixture')).toBeTruthy() expect(view.getByText('复制')).toBeTruthy() @@ -171,6 +183,7 @@ describe('FileMutationRow diff card', () => { it('the summary is a path link that opens the tool path through the host', () => { const openFile = vi.fn() const view = render() + // The path link rides the collapsed summary, so it opens without expanding. fireEvent.click(view.getByRole('button', { name: 'notes/demo.txt' })) // The row passes the tool's own path; the injected openFile resolves it // against the session cwd (apply.ts), so the row must not resolve twice. @@ -184,6 +197,8 @@ describe('FileMutationRow diff card', () => { callView: { card: 'diff', title: 'Write notes/new.txt', diffs: [{ path: 'notes/new.txt', oldText: null, newText: 'hello fixture' }] }, resultView: { card: 'diff', title: 'Write notes/new.txt', diffs: [{ path: 'notes/new.txt', oldText: null, newText: 'hello fixture' }] }, }), 'write')} />) + // The footer counts live inside the collapsed diff card. + toggleRow(view) expect(view.getByText('└ +1 -0 · 1 file')).toBeTruthy() }) @@ -197,13 +212,16 @@ describe('FileMutationRow diff card', () => { it('a mutation call with no diff view renders the summary row alone', () => { const view = render() + // No diff material: expanding shows the args-JSON body, never a diff card. + expect(view.container.querySelector('[data-diff]')).toBeNull() + toggleRow(view) expect(view.container.querySelector('[data-diff]')).toBeNull() }) it('surfaces the result text when an errored mutation has no diff card', () => { // write/edit return undefined from presentResult on isError, so the failure - // has no diff — the row shows the model-facing error text instead of a bare - // red dot. + // has no diff — ToolRow shows the model-facing error text as the collapsed + // summary's first line (errorSummary) instead of a bare red dot. const view = render( { expect(view.getByText('ToolError: sandbox_denied')).toBeTruthy() }) - it('shows no failure text for a successful diff or a running call', () => { + it('shows no error summary for a successful diff or a running call', () => { + // ToolRow's error-color summary line is set only on the error state. const ok = render() - expect(ok.container.querySelector('[class*="_failure_"]')).toBeNull() + expect(ok.container.querySelector('[class*="_errorSummary_"]')).toBeNull() cleanup() const run = render() - expect(run.container.querySelector('[class*="_failure_"]')).toBeNull() + expect(run.container.querySelector('[class*="_errorSummary_"]')).toBeNull() }) it('shows the stopped state when the call was interrupted', () => { @@ -234,8 +253,6 @@ describe('FileMutationRow diff card', () => { error: { name: 'ToolError', code: 'interrupted' }, }))} />) expect(view.container.querySelector('[data-state="stopped"]')).not.toBeNull() - // The visually-hidden status label carries the stopped semantic for AT. - expect(view.getByText('已停止')).toBeTruthy() }) it('renders a plain summary span when the call carries no file path', () => { diff --git a/packages/client/ui-conversation/tests/read-card.spec.tsx b/packages/client/ui-conversation/tests/read-card.spec.tsx index ae458303e8..1c621ad7f4 100644 --- a/packages/client/ui-conversation/tests/read-card.spec.tsx +++ b/packages/client/ui-conversation/tests/read-card.spec.tsx @@ -2,8 +2,9 @@ // The read render intent on the web side: the pure readCardModel derivation // over the settled result view, and both conversation render sites that consume // it — the chat tool row (the keyed ReadRow and the GenericToolCard fallback, -// each with the read card resident under the summary) and the details panel's -// Output section. Also pins the keyed 'read' toolview registration. +// each composing ToolRow with the read card as its collapsed-by-default expanded +// body) and the details panel's Output section (resident, full height). Also +// pins the keyed 'read' toolview registration. import { afterEach, describe, expect, it, vi } from 'vitest' import { cleanup, fireEvent, render } from '@testing-library/react' @@ -16,7 +17,7 @@ import type { ConversationSnapshot, RunningToolCall, SessionId, SessionListState, ToolResultNode, WorkspaceListState, } from '@deepseek-ai/dsh-client-runtime/client' import type { ToolResultView } from '@deepseek-ai/dsh-client-connection/client' -import type { SelectionTarget, ToolRowProps } from '@deepseek-ai/dsh-client-ui-conversation/client' +import type { SelectionTarget } from '@deepseek-ai/dsh-client-ui-conversation/client' import { CHAT_READ_MAX_LINES, readCardModel } from '../src/client/contract/read-card-model.ts' import { createChatStore } from '../src/client/stores.ts' import { GenericToolCard, type GenericToolCardProps } from '../src/client/chat/GenericToolCard.tsx' @@ -128,11 +129,19 @@ describe('GenericToolCard read body', () => { callId: 'c1', toolName: 'web_fetch', block, openFile: vi.fn(), t, }) - it('renders the read card resident under the summary, capped tighter than the panel', () => { + /** The whole summary row is the expand toggle (ToolRow's unified interaction). */ + const toggleRow = (view: { container: HTMLElement }) => { + fireEvent.click(view.container.querySelector('[data-expandable]')!) + } + + it('expands to the read card, capped tighter than the panel', () => { expect(CHAT_READ_MAX_LINES).toBeLessThan(16) // web_fetch lands on the read variant without its own keyed row, so the - // fallback card owns the resident read block. + // fallback card owns the read block once expanded. const view = render() + // Collapsed: no read card in the DOM yet. + expect(view.container.querySelector('[data-read]')).toBeNull() + toggleRow(view) expect(view.container.querySelector('[data-read]')).not.toBeNull() expect(contentTexts(view.container)).toContain('export const a = 1') // The gutter keeps the file's own line numbers. @@ -145,6 +154,7 @@ describe('GenericToolCard read body', () => { call: { name: 'echo', argsRaw: '{"text":"x"}' }, callView: null, resultView: null, }), openFile: vi.fn(), t, })} />) + toggleRow(view) expect(view.container.querySelector('[data-read]')).toBeNull() }) @@ -162,19 +172,34 @@ describe('ReadRow keyed toolview', () => { phase: 'ready', }) - const rowProps = (block: RunningToolCall | ToolResultNode): ToolRowProps => ({ + const rowProps = (block: RunningToolCall | ToolResultNode): Parameters[0] => ({ callId: 'c1', toolName: 'read', block, openFile: vi.fn(), sessionId: SID, useSessions: bindSnapshotSelector(list()), - } as unknown as ToolRowProps) + t, + } as unknown as Parameters[0]) - it('renders the file path summary and the resident read card', () => { + /** The whole summary row is the expand toggle (ToolRow's unified interaction). */ + const toggleRow = (view: { container: HTMLElement }) => { + fireEvent.click(view.container.querySelector('[data-expandable]')!) + } + + it('collapses to the path summary; the whole row toggles the read card', () => { const view = render() expect(view.getByText('Read')).toBeTruthy() - // The path appears twice: the row summary link and the card's banner label. + // Collapsed: the path is the summary link alone, and the card is absent. + expect(view.getAllByText('src/a.ts').length).toBe(1) + expect(view.container.querySelector('[data-read]')).toBeNull() + toggleRow(view) + // Expanded: the summary link stays inline and the card's banner label adds a + // second occurrence of the path. expect(view.getAllByText('src/a.ts').length).toBe(2) expect(view.container.querySelector('[data-read]')).not.toBeNull() expect(contentTexts(view.container)).toContain('export const a = 1') expect(view.getByText('显示 3 / 180 行')).toBeTruthy() + // Collapse back in place: the card unmounts, the summary link returns. + toggleRow(view) + expect(view.container.querySelector('[data-read]')).toBeNull() + expect(view.getAllByText('src/a.ts').length).toBe(1) }) it('the path summary opens the file through the host', () => { @@ -212,7 +237,8 @@ describe('ReadRow keyed toolview', () => { const registered: { name: unknown; key?: unknown }[] = [] const ctx = { slots: { register: (options: { name: unknown; key?: unknown }) => { registered.push(options) } } } as unknown as Context readToolview.apply(ctx) - expect(registered).toEqual([{ name: 'conversation.chat.toolview', key: 'read' }]) + // The row composes ToolRow, so it declares its locale namespace at the seat. + expect(registered).toEqual([{ name: 'conversation.chat.toolview', key: 'read', locale: 'conversation' }]) expect(readToolview.inject).toContain('conversation') }) }) diff --git a/packages/client/ui-conversation/tests/search-card.spec.tsx b/packages/client/ui-conversation/tests/search-card.spec.tsx index 9cea2c1661..1f3f0d7976 100644 --- a/packages/client/ui-conversation/tests/search-card.spec.tsx +++ b/packages/client/ui-conversation/tests/search-card.spec.tsx @@ -1,9 +1,10 @@ // @vitest-environment jsdom // The search render intent on the web side: the pure searchCardModel derivation // over resultView, and the conversation render sites that consume it — the chat -// tool row (GenericToolCard's expand-gated body and SearchRow's resident card) -// and the details panel's Output section. The keyed registration under both grep -// and glob is pinned here too. +// tool row (GenericToolCard's fallback body and SearchRow, both composing the +// shared ToolRow with the search card collapsed by default) and the details +// panel's Output section (resident, full height). The keyed registration under +// both grep and glob is pinned here too. import { afterEach, describe, expect, it, vi } from 'vitest' import { cleanup, fireEvent, render } from '@testing-library/react' @@ -13,7 +14,7 @@ import type { ConversationSnapshot, RunningToolCall, SessionId, SessionListState, ToolResultNode, WorkspaceListState, } from '@deepseek-ai/dsh-client-runtime/client' import type { ToolResultView } from '@deepseek-ai/dsh-client-connection/client' -import type { SelectionTarget, ToolRowProps } from '@deepseek-ai/dsh-client-ui-conversation/client' +import type { SelectionTarget } from '@deepseek-ai/dsh-client-ui-conversation/client' import { makeTranslate } from '@deepseek-ai/dsh-client-test-runtime' import { zh as commonZh } from '@deepseek-ai/dsh-client-locale/src/locales/zh.ts' import { CHAT_SEARCH_MAX_LINES, searchCardModel } from '../src/client/contract/search-card-model.ts' @@ -23,6 +24,9 @@ import { GenericToolCard, type GenericToolCardProps } from '../src/client/chat/G import { DetailsPanel } from '../src/client/skeleton/DetailsPanel.tsx' import { SearchRow, searchToolview } from '../src/client/toolviews/search-row.tsx' +/** SearchRow now composes ToolRow, so its props include the locale `t` seat. */ +type SearchRowProps = Parameters[0] + afterEach(cleanup) /** Conversation-locale translate stub for the render sites' `t` seat. */ @@ -228,21 +232,32 @@ describe('chat row search body (GenericToolCard fallback)', () => { }) describe('SearchRow keyed card', () => { - const rowProps = (block: RunningToolCall | ToolResultNode, toolName: string): ToolRowProps => ({ - callId: 'c1', toolName, block, openFile: vi.fn(), sessionId: SID, - } as unknown as ToolRowProps) + const rowProps = (block: RunningToolCall | ToolResultNode, toolName: string): SearchRowProps => ({ + callId: 'c1', toolName, block, openFile: vi.fn(), sessionId: SID, t, + } as unknown as SearchRowProps) - it('renders the grep card resident under the summary row, without an expand gesture', () => { + /** The whole summary row is the expand toggle (ToolRow's unified interaction). */ + const toggleRow = (view: { container: HTMLElement }) => { + fireEvent.click(view.container.querySelector('[data-expandable]')!) + } + + it('collapses to the summary row; expanding reveals the grep card', () => { const view = render() expect(view.getByText('Search')).toBeTruthy() + // Collapsed: the card is not in the DOM until the row is expanded. + expect(searchKindOf(view.container)).toBeNull() + expect(view.queryByText(/const foo = 1/)).toBeNull() + toggleRow(view) expect(searchRows(view.container)).toContain('12: const foo = 1') expect(searchKindOf(view.container)).toBe('matches') - // The card's controls are the row's only interactions. + // The card's copy control lives inside the expanded body. expect(view.getByText('复制')).toBeTruthy() }) - it('renders the glob path card resident', () => { + it('expands to the glob path card', () => { const view = render() + expect(searchKindOf(view.container)).toBeNull() + toggleRow(view) expect(view.getByText('src/a.ts')).toBeTruthy() expect(searchKindOf(view.container)).toBe('paths') }) @@ -250,7 +265,7 @@ describe('SearchRow keyed card', () => { it('agrees with the summary row about the run state', () => { const runningView = render() expect(runningView.container.querySelector('[data-variant="search"]')?.getAttribute('data-state')).toBe('running') - // No result view yet, so no resident card. + // No result view yet, so no card even once material could expand. expect(searchKindOf(runningView.container)).toBeNull() cleanup() const errorView = render( { expect(errorView.container.querySelector('[data-variant="search"]')?.getAttribute('data-state')).toBe('error') }) - it('surfaces the result text when an errored search has no card', () => { + it('surfaces the result text through the Output section when an errored search has no card', () => { // grep/glob return no presentResult on error → no card; the row shows the - // model-facing error text instead of a bare red dot. + // first error line as the collapsed summary and the full text once expanded. const view = render() expect(searchKindOf(view.container)).toBeNull() + // Error state: the first line is the collapsed summary. expect(view.getByText('grep: invalid regular expression')).toBeTruthy() + toggleRow(view) + // Now in ToolRow's Output section too (the kept summary makes it appear twice). + expect(view.container.querySelector('[data-error]')?.textContent).toBe('grep: invalid regular expression') }) - it('surfaces the result text for a settled non-error call with no card', () => { + it('surfaces the result text for a settled non-error call with no card once expanded', () => { // A successful nested run_code sub-dispatch (backend computes no // presentationMeta, so resultView is null) or a legacy generic result settles // with search === null and state ok. The keyed SearchRow owns the slot, so - // without the widened arm the content would be lost behind a bare summary. + // ToolRow's Output section carries the text; it is only visible expanded. const view = render() expect(view.container.querySelector('[data-variant="search"]')?.getAttribute('data-state')).toBe('ok') expect(searchKindOf(view.container)).toBeNull() + // Collapsed: the ok row shows its args summary, not the output text. + expect(view.queryByText('nested run_code output line')).toBeNull() + toggleRow(view) expect(view.getByText('nested run_code output line')).toBeTruthy() }) @@ -290,12 +312,15 @@ describe('SearchRow keyed card', () => { content: [{ type: 'text', text: recovery }], resultView: resultMatches({ truncated: true, total: 42 }), }), 'grep')} />) + toggleRow(view) expect(searchKindOf(view.container)).toBe('matches') expect(view.getByText(/Full grep result stored at: spill:\/\/grep-1/)).toBeTruthy() }) it('shows no recovery footer for an uncapped search', () => { const view = render() + toggleRow(view) + expect(searchKindOf(view.container)).toBe('matches') expect(view.container.textContent).not.toMatch(/stored at/) }) @@ -304,6 +329,7 @@ describe('SearchRow keyed card', () => { isError: true, resultView: null, content: [], error: { name: 'ToolError', code: 'timeout' }, }), 'grep')} />) + // Error state: the derived name/code line is the collapsed summary. expect(view.getByText('ToolError: timeout')).toBeTruthy() }) @@ -344,7 +370,7 @@ describe('DetailsPanel Output section (search)', () => { if (selection !== null) chat.actions.select(selection) const sessions = createSnapshotStore({ ids: [], byId: {}, current: undefined, phase: 'ready' }) const workspaces = createSnapshotStore({ - items: [], state: 'idle', phase: 'ready', error: null, + items: [], archivedSessionIds: [], state: 'idle', phase: 'ready', error: null, baselinesReady: true, recentWorkspaceId: undefined, }) return render( diff --git a/packages/client/ui-conversation/tests/web-card.spec.tsx b/packages/client/ui-conversation/tests/web-card.spec.tsx index fc4a27c78b..153e9962ee 100644 --- a/packages/client/ui-conversation/tests/web-card.spec.tsx +++ b/packages/client/ui-conversation/tests/web-card.spec.tsx @@ -4,17 +4,19 @@ // WebRow (registered under both web_search and web_fetch), the GenericToolCard // render-site fallback, and the details panel's Output section. Mirrors // terminal-card.spec.tsx: model derivation + null arms, both kinds, the chat -// row's resident card, the panel arm, and the keyed registration. +// row's collapsed-by-default ToolRow card, the panel arm, and the keyed +// registration. WebRow now composes the shared ToolRow, so its web card is +// collapsed by default and appears only once the whole row is expanded. import { afterEach, describe, expect, it, vi } from 'vitest' -import { cleanup, render } from '@testing-library/react' +import { cleanup, fireEvent, render } from '@testing-library/react' import { createSnapshotStore } from '@deepseek-ai/dsh-client-runtime/client' import type { ConversationSnapshot, RunningToolCall, SessionId, SessionListState, ToolResultNode, WorkspaceListState, } from '@deepseek-ai/dsh-client-runtime/client' import type { ToolResultView } from '@deepseek-ai/dsh-client-connection/client' import { bindSnapshotSelector } from '@deepseek-ai/dsh-client-web-react' -import type { SelectionTarget, ToolRowOwnerProps, ToolRowProps } from '@deepseek-ai/dsh-client-ui-conversation/client' +import type { SelectionTarget, ToolRowOwnerProps } from '@deepseek-ai/dsh-client-ui-conversation/client' import { CHAT_WEB_MAX_SOURCES, webCardModel } from '../src/client/contract/web-card-model.ts' import { createChatStore } from '../src/client/stores.ts' import { GenericToolCard } from '../src/client/chat/GenericToolCard.tsx' @@ -122,36 +124,49 @@ describe('chat row web body', () => { const ownerProps = (block: RunningToolCall | ToolResultNode, toolName: string): ToolRowOwnerProps => ({ callId: block.callId, toolName, block, openFile: vi.fn(), }) - // WebRow reads only toolName/block off the full runtime share; the standard - // kit is unused, so the cast supplies the owner slice alone (as BashRow's - // tests do for the terminal card). - const rowProps = (block: RunningToolCall | ToolResultNode, toolName: string): ToolRowProps => - ownerProps(block, toolName) as unknown as ToolRowProps + // WebRow reads only toolName/block off the full runtime share plus the locale + // seat; the standard kit is unused, so the cast supplies the owner slice and + // `t` alone (as BashRow's tests do for the terminal card). + const rowProps = (block: RunningToolCall | ToolResultNode, toolName: string): Parameters[0] => + ({ ...ownerProps(block, toolName), t } as unknown as Parameters[0]) - it('the WebRow renders the search card resident under the summary, capped tighter than the panel', () => { + /** The whole summary row is the expand toggle (ToolRow's unified interaction). */ + const toggleRow = (view: { container: HTMLElement }) => { + fireEvent.click(view.container.querySelector('[data-expandable]')!) + } + + it('the WebRow collapses to the summary row, expanding to the search card capped tighter than the panel', () => { expect(CHAT_WEB_MAX_SOURCES).toBeLessThan(16) const view = render() - // The summary row plus the resident card, without any expand gesture on the row itself. + // Collapsed: the summary row alone, no card in the DOM. expect(view.getByText('Search')).toBeTruthy() + expect(view.queryByText('Titled')).toBeNull() + expect(view.container.querySelector('[data-web]')).toBeNull() + toggleRow(view) + // Expanded: the resident search card with every source field. expect(view.getByText('Titled')).toBeTruthy() expect(view.getByText('excerpt')).toBeTruthy() // hostname fallback for the source with no title expect(view.getByText('plain.example.org')).toBeTruthy() }) - it('the WebRow renders the fetch card resident, titled Fetch', () => { + it('the WebRow expands to the fetch card, titled Fetch', () => { const view = render() expect(view.getByText('Fetch')).toBeTruthy() - // The url shows in the summary row and as the card's link; scope to the card. + expect(view.container.querySelector('[data-web]')).toBeNull() + toggleRow(view) + // The url shows as the card's link; scope to the card. const card = view.container.querySelector('[data-web="fetch"]') expect(card?.querySelector('a')?.getAttribute('href')).toBe('https://example.com/page') expect(view.getByText('HTTP 200')).toBeTruthy() }) - it('a running web call is the summary row alone (no card until it settles)', () => { + it('a running web call is the summary row alone, with nothing to expand', () => { const view = render() expect(view.getByText('Search')).toBeTruthy() expect(view.queryByText('Titled')).toBeNull() + // No card material and no expandable body: clicking the row reveals nothing. + expect(view.container.querySelector('[data-expandable]')).toBeNull() expect(view.container.querySelector('[data-web]')).toBeNull() }) @@ -165,12 +180,14 @@ describe('chat row web body', () => { expect(view.container.querySelector('[data-state="error"]')).not.toBeNull() }) - it('the GenericToolCard fallback also renders a resident web card for a web-declaring tool', () => { + it('the GenericToolCard fallback also expands to a web card for a web-declaring tool', () => { // A web-declaring tool without its own keyed row lands on the fallback; its - // card is resident there too. + // card routes through the same collapsed-by-default ToolRow. const view = render() + expect(view.container.querySelector('[data-web]')).toBeNull() + toggleRow(view) expect(view.getByText('Titled')).toBeTruthy() expect(view.container.querySelector('[data-web="search"]')).not.toBeNull() }) diff --git a/packages/client/ui-primitives/README.i18n.yaml b/packages/client/ui-primitives/README.i18n.yaml index d55fe45007..1e0cd70ea2 100644 --- a/packages/client/ui-primitives/README.i18n.yaml +++ b/packages/client/ui-primitives/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-primitives/README.md -README.md: 58be01d56a85c66a144df3f8054840961e987403 -README.zh.md: 2efbec77e64d664553e93b5a8f8dcd2ec7fce49e +README.md: 43266c05baca8d78406f35106db82ffa8e48f744 +README.zh.md: ff3bc69492e5124b00528ae52280898d18f3bd65 From e44ecf2d42c3ee43fdf80aa512cf51763a3bfc2d Mon Sep 17 00:00:00 2001 From: Chinesezjc Date: Fri, 31 Jul 2026 16:51:58 +0800 Subject: [PATCH 3/5] fix(fixture): drop deleted search-row.module.css from glob path sample The ToolRow refactor deleted the per-row CSS modules, but the glob search fixture still listed search-row.module.css as a sample path, which verify-package-paths rejects as a broken packages/* reference. Point it at the search-card spec instead. --- packages/client/connection/src/client/fixture.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/connection/src/client/fixture.ts b/packages/client/connection/src/client/fixture.ts index 6f508009db..2cc25cdd3b 100644 --- a/packages/client/connection/src/client/fixture.ts +++ b/packages/client/connection/src/client/fixture.ts @@ -223,7 +223,7 @@ const SEARCH_PATHS_FIXTURE = [ 'packages/client/ui-primitives/src/SearchBlock.module.css', 'packages/client/ui-conversation/src/client/contract/search-card-model.ts', 'packages/client/ui-conversation/src/client/toolviews/search-row.tsx', - 'packages/client/ui-conversation/src/client/toolviews/search-row.module.css', + 'packages/client/ui-conversation/tests/search-card.spec.tsx', ] /** From bcec49606b0d82b08c5e3b249e35f52040be71c0 Mon Sep 17 00:00:00 2001 From: Chinesezjc Date: Fri, 31 Jul 2026 17:09:51 +0800 Subject: [PATCH 4/5] test(web): refresh e2e goldens for collapsed card rows The seeded-history, web-search-round, and message-actions aria goldens showed the read/search cards inline; with the ToolRow refactor the card is collapsed behind an expandable row button, so the goldens now record the collapsed row shape (the card body appears only on expand, which these rounds do not click). --- .../snapshots/message-actions/ui.expected.md | 16 ++++++++++------ .../seeded-history/command-row.expected.md | 16 ++++++++++------ .../snapshots/seeded-history/ui.expected.md | 16 ++++++++++------ .../snapshots/web-search-round/ui.expected.md | 11 ++++------- 4 files changed, 34 insertions(+), 25 deletions(-) diff --git a/apps/web/tests/snapshots/message-actions/ui.expected.md b/apps/web/tests/snapshots/message-actions/ui.expected.md index 73b7637400..9aed20cfce 100644 --- a/apps/web/tests/snapshots/message-actions/ui.expected.md +++ b/apps/web/tests/snapshots/message-actions/ui.expected.md @@ -16,12 +16,16 @@ - img - img - text: Think The user wants me to read a.txt and b.txt, then reply with "DONE". Let me do both reads in parallel. -- img -- text: Read -- button "a.txt" -- img -- text: Read -- button "b.txt" +- button "Read a.txt": + - img + - img + - text: Read + - button "a.txt" +- button "Read b.txt": + - img + - img + - text: Read + - button "b.txt" - button "Think Both files have been read. a.txt contains \"alpha\" and b.txt contains \"beta\". I'll now reply with DONE as instructed.": - img - img diff --git a/apps/web/tests/snapshots/seeded-history/command-row.expected.md b/apps/web/tests/snapshots/seeded-history/command-row.expected.md index 948d5579de..f722bb36ae 100644 --- a/apps/web/tests/snapshots/seeded-history/command-row.expected.md +++ b/apps/web/tests/snapshots/seeded-history/command-row.expected.md @@ -15,12 +15,16 @@ - img - img - text: Think The user wants me to read a.txt and b.txt, then reply with "DONE". Let me do both reads in parallel. -- img -- text: Read -- button "a.txt" -- img -- text: Read -- button "b.txt" +- button "Read a.txt": + - img + - img + - text: Read + - button "a.txt" +- button "Read b.txt": + - img + - img + - text: Read + - button "b.txt" - button "Think Both files have been read. a.txt contains \"alpha\" and b.txt contains \"beta\". I'll now reply with DONE as instructed.": - img - img diff --git a/apps/web/tests/snapshots/seeded-history/ui.expected.md b/apps/web/tests/snapshots/seeded-history/ui.expected.md index cd74c1053c..42455b1231 100644 --- a/apps/web/tests/snapshots/seeded-history/ui.expected.md +++ b/apps/web/tests/snapshots/seeded-history/ui.expected.md @@ -15,12 +15,16 @@ - img - img - text: Think The user wants me to read a.txt and b.txt, then reply with "DONE". Let me do both reads in parallel. -- img -- text: Read -- button "a.txt" -- img -- text: Read -- button "b.txt" +- button "Read a.txt": + - img + - img + - text: Read + - button "a.txt" +- button "Read b.txt": + - img + - img + - text: Read + - button "b.txt" - button "Think Both files have been read. a.txt contains \"alpha\" and b.txt contains \"beta\". I'll now reply with DONE as instructed.": - img - img diff --git a/apps/web/tests/snapshots/web-search-round/ui.expected.md b/apps/web/tests/snapshots/web-search-round/ui.expected.md index 514aaf6219..a566b77e28 100644 --- a/apps/web/tests/snapshots/web-search-round/ui.expected.md +++ b/apps/web/tests/snapshots/web-search-round/ui.expected.md @@ -15,13 +15,10 @@ - img - img - text: Context injection -- img -- text: Search DeepSeek Harness snapshot search -- list: - - listitem: - - link "Snapshot Search Result": - - /url: https://docs.example.test/search - - text: Snapshot search excerpt. 2026-07-31 +- button "Search DeepSeek Harness snapshot search": + - img + - img + - text: Search DeepSeek Harness snapshot search - paragraph: SEARCH_DONE - button "Copy": - img From 4276a7386f077a46755e39bbbe95c4df6f0787b7 Mon Sep 17 00:00:00 2001 From: Chinesezjc Date: Fri, 31 Jul 2026 17:23:14 +0800 Subject: [PATCH 5/5] fix(web-cards): restore AT status text, guard file-link keys, add read docs Address review of the ToolRow card refactor: - ToolRow renders a visually-hidden run-state label (row.running/failed/stopped locale keys) so a running/failed/interrupted row is not a colour-only signal; the StateDot and the sweep are both aria-hidden. Restores the stopped-state text assertion in diff-card.spec at the ToolRow layer. - The file-link button stops Enter/Space from bubbling to DisclosureRow's whole-row keydown, which would preventDefault the key and toggle expand instead of opening the file (the keyboard analogue of the click stopPropagation). - search-row passes output={model.output} unconditionally, matching the other three card rows (ToolRow renders the card over the output when present). - Assert locale: 'conversation' in the search/web/diff registration tests. - Add the read render-intent paragraph to the ui-conversation README and a ReadBlock atom entry + Read section to ui-primitives (both languages). - Update the grep fixture sample lines to the post-refactor SearchRow shape. Refresh the code-mode-round, steering, and search-card goldens for the added status text and updated sample lines. --- .../snapshots/code-mode-round/ui.expected.md | 2 +- .../search-card/grep-card.expected.txt | 14 +++++----- .../snapshots/steering/mid-steer.expected.md | 1 + .../client/connection/src/client/fixture.ts | 8 +++--- .../client/ui-conversation/README.i18n.yaml | 4 +-- packages/client/ui-conversation/README.md | 2 ++ packages/client/ui-conversation/README.zh.md | 2 ++ .../src/client/chat/ToolRow.module.css | 12 +++++++++ .../src/client/chat/ToolRow.tsx | 27 ++++++++++++++++++- .../ui-conversation/src/client/locales.ts | 6 +++++ .../src/client/toolviews/search-row.tsx | 5 +++- .../ui-conversation/tests/diff-card.spec.tsx | 11 +++++--- .../tests/search-card.spec.tsx | 8 +++--- .../ui-conversation/tests/web-card.spec.tsx | 8 +++--- .../client/ui-primitives/README.i18n.yaml | 4 +-- packages/client/ui-primitives/README.md | 6 ++++- packages/client/ui-primitives/README.zh.md | 6 ++++- 17 files changed, 97 insertions(+), 29 deletions(-) diff --git a/apps/web/tests/snapshots/code-mode-round/ui.expected.md b/apps/web/tests/snapshots/code-mode-round/ui.expected.md index b7fd6f817d..36e48a799d 100644 --- a/apps/web/tests/snapshots/code-mode-round/ui.expected.md +++ b/apps/web/tests/snapshots/code-mode-round/ui.expected.md @@ -24,7 +24,7 @@ - img - text: Code Run bash echo and catch missing file read - img -- text: Bash Echo CODE_ROUND_OK +- text: Bash Echo CODE_ROUND_OK Failed - 'button "Read Error: cannot read \"{{cwd}}/workspace/missing.txt\": not found"': - img - text: "Read Error: cannot read \"{{cwd}}/workspace/missing.txt\": not found" diff --git a/apps/web/tests/snapshots/search-card/grep-card.expected.txt b/apps/web/tests/snapshots/search-card/grep-card.expected.txt index 7fde9b0307..7ba19c334c 100644 --- a/apps/web/tests/snapshots/search-card/grep-card.expected.txt +++ b/apps/web/tests/snapshots/search-card/grep-card.expected.txt @@ -5,9 +5,9 @@ file=packages/client/ui-conversation/src/client/toolviews/search-row.tsx4 line=16: export const DEFAULT_SEARCH_MAX_LINES = 16 line=138: export function SearchBlock(props: SearchBlockProps) { line=141: const [collapsed, setCollapsed] = useState>(() => new Set()) -line=73: const search = searchCardModel(block) -line=90: -line=113: ctx.slots.register({ name: 'conversation.chat.toolview', key: 'grep' }, SearchRow) +line=35: const search = searchCardModel(block) +line=52: search={search} +line=73: ctx.slots.register({ name: 'conversation.chat.toolview', key: 'grep', locale: NS }, SearchRow) expand=… 其余 4 行 recovery=Found 9 of 42 matches @@ -19,9 +19,9 @@ packages/client/ui-conversation/src/client/contract/search-card-model.ts Line 24: export const CHAT_SEARCH_MAX_LINES = 8 Line 60: export function searchCardModel(block: ToolCallBlock): SearchCardModel | null { packages/client/ui-conversation/src/client/toolviews/search-row.tsx -Line 71: export function SearchRow({ toolName, block }: ToolRowProps) { -Line 73: const search = searchCardModel(block) -Line 90: -Line 113: ctx.slots.register({ name: 'conversation.chat.toolview', key: 'grep' }, SearchRow) +Line 33: export function SearchRow({ toolName, block, inspect, t }: SearchRowProps) { +Line 35: const search = searchCardModel(block) +Line 52: search={search} +Line 73: ctx.slots.register({ name: 'conversation.chat.toolview', key: 'grep', locale: NS }, SearchRow) (Full grep result stored at: fixture://spill/grep-68. Read it to see every match.) \ No newline at end of file diff --git a/apps/web/tests/snapshots/steering/mid-steer.expected.md b/apps/web/tests/snapshots/steering/mid-steer.expected.md index 0134e6efb9..68382fce3e 100644 --- a/apps/web/tests/snapshots/steering/mid-steer.expected.md +++ b/apps/web/tests/snapshots/steering/mid-steer.expected.md @@ -19,6 +19,7 @@ - img - img - text: Think The user wants me to use the ask_user_question tool to ask them a specific question with the given parameters. Let me do exactly that. +- text: Running - button "Ask question waiting": - img - img diff --git a/packages/client/connection/src/client/fixture.ts b/packages/client/connection/src/client/fixture.ts index 2cc25cdd3b..7cc6eaba96 100644 --- a/packages/client/connection/src/client/fixture.ts +++ b/packages/client/connection/src/client/fixture.ts @@ -190,10 +190,10 @@ const SEARCH_MATCHES_FIXTURE: { path: string; matches: { lineNumber: number; lin { path: 'packages/client/ui-conversation/src/client/toolviews/search-row.tsx', matches: [ - { lineNumber: 71, line: 'export function SearchRow({ toolName, block }: ToolRowProps) {' }, - { lineNumber: 73, line: ' const search = searchCardModel(block)' }, - { lineNumber: 90, line: ' ' }, - { lineNumber: 113, line: " ctx.slots.register({ name: 'conversation.chat.toolview', key: 'grep' }, SearchRow)" }, + { lineNumber: 33, line: 'export function SearchRow({ toolName, block, inspect, t }: SearchRowProps) {' }, + { lineNumber: 35, line: ' const search = searchCardModel(block)' }, + { lineNumber: 52, line: ' search={search}' }, + { lineNumber: 73, line: " ctx.slots.register({ name: 'conversation.chat.toolview', key: 'grep', locale: NS }, SearchRow)" }, ], }, ] diff --git a/packages/client/ui-conversation/README.i18n.yaml b/packages/client/ui-conversation/README.i18n.yaml index 1d9807ae38..3dab01142b 100644 --- a/packages/client/ui-conversation/README.i18n.yaml +++ b/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: 8003e8901d580b4aae64b5920427e789e2233acc -README.zh.md: ff734b719ccb569f303aada43a3f83fde70f5d84 +README.md: 37a5c216d0e70def7c4884b710b2802e60a4c32a +README.zh.md: f364714a0dd2ed15d7696e3eb408d347cafc0900 diff --git a/packages/client/ui-conversation/README.md b/packages/client/ui-conversation/README.md index 8003e8901d..37a5c216d0 100644 --- a/packages/client/ui-conversation/README.md +++ b/packages/client/ui-conversation/README.md @@ -18,6 +18,8 @@ A tool call declaring the `terminal` render intent renders its command output in A tool call declaring the `web` render intent renders its web retrieval inline, at both conversation render sites, through ui-primitives' `WebBlock`. `contract/web-card-model.ts` is the single derivation from the snapshot's `resultView`, mirroring the terminal card, so the sites cannot disagree about what a web call shows; it yields null — the generic path — for a running call, a non-web result view, a generic result view, a `card` tag this client version does not know, or a web card whose `kind` this client version does not know (a newer host's value, which the wire cannot be trusted to be `search` or `fetch`). The keyed `WebRow` registers one component under both `web_search` and `web_fetch`, discriminating on the tool name only for its icon and title; it composes the shared `ToolRow`, feeding the card as ToolRow's `web` body, so the retrieval is the row's collapsed-by-default expanded card (the same unified expand every card row has). A web-declaring tool without a keyed row lands on the `GenericToolCard` fallback, which routes the card through ToolRow the same way, and the details panel renders it at the primitive's full source allowance and, below the card, the flattened model-visible result content — a fetch body is readable only there, since its card carries only the URL and status. Rows cap at `CHAT_WEB_MAX_SOURCES` (8) against the panel's 16, the same summary-versus-reading split the terminal card draws ([decision](../../../.agents/notes/implemented/feature/2026-07-30-web-result-card-frontend.md)). +A `read` call declaring the `read` render intent renders the returned file window inline, at both conversation render sites, through ui-primitives' `ReadBlock` — the line-numbered, syntax-highlighted content the tool projects. `contract/read-card-model.ts` is the single derivation from the snapshot's `resultView`; the read card is result-side only (a call carries no file content until `execute` returns), so a running read shows its summary alone and it yields null — the generic path — for a non-read result view or a `card` tag this client version does not know. The keyed `ReadRow` composes the shared `ToolRow`, feeding the card as ToolRow's `read` body, so it is the row's collapsed-by-default expanded card; the summary stays a path link that opens the file through the host. The render-site fallback and the details panel are read-aware too. Rows cap at `CHAT_READ_MAX_LINES` (8) against the panel's 16 ([decision](../../../.agents/notes/implemented/feature/2026-07-30-web-read-card-frontend.md)). + A tool call declaring the `diff` render intent (the `write`/`edit` tools) renders its applied change inline through ui-primitives' `DiffBlock`, the same four-layer shape. `contract/diff-card-model.ts` is the single derivation from the `callView`/`resultView` pair; the settled result's hunks replace the call-time diff, and it yields null — the generic path — for any other card tag or a generic result view (write/edit's execution errors). The keyed `FileMutationRow` (registered under both `write` and `edit`) composes the shared `ToolRow`, feeding the diff as ToolRow's `diff` body, so it is the row's collapsed-by-default expanded card; the summary path link still opens the file through the host, and an errored mutation (no diff card) surfaces its error text through ToolRow's Output section with the first line in the collapsed summary. The render-site fallback and the details panel are diff-aware too. Rows cap at `CHAT_DIFF_MAX_LINES` (8) against the panel's 16 ([decision](../../../.agents/notes/implemented/feature/2026-07-30-web-diff-card.md)). The chat flow projects consecutive model-retry nodes across retry turns into one stable, muted status row updated to the latest attempt; every retry event remains in the runtime snapshot and session log. Its frontend countdown anchors the scheduled delay to client receipt, avoiding host/browser clock skew, rounds remaining time up to seconds, and has a one-second floor. The latest unresolved retry uses a left-to-right text shimmer. Subsequent turn facts distinguish an attempt that started from one cancelled during backoff, while the Host running bit only controls the live animation; the row then shows a static completed or cancelled label. Normal policy rows show the finite retry maximum; always policy rows show `∞`. Activating the row reveals the latest exact retry delay and failure message. The client runtime removes each failed step's streaming tail before its retry node arrives, while the status remains visible after a later attempt succeeds. diff --git a/packages/client/ui-conversation/README.zh.md b/packages/client/ui-conversation/README.zh.md index ff734b719c..f364714a0d 100644 --- a/packages/client/ui-conversation/README.zh.md +++ b/packages/client/ui-conversation/README.zh.md @@ -16,6 +16,8 @@ 声明 `web` 渲染意图的工具调用,会在两个对话渲染点上都通过 ui-primitives 的 `WebBlock` 内联渲染其 web 检索。`contract/web-card-model.ts` 是从快照的 `resultView` 推导的唯一位置,镜像终端卡片,因此两个渲染点不可能对一次 web 调用的显示产生分歧;对运行中的调用、非 web 的 result view、generic result view、本客户端版本不认识的 `card` 标签,或本客户端版本不认识 `kind` 的 web 卡片(更新的 host 发来的值,wire 上不可信其为 `search` 或 `fetch`),它返回 null,落回通用路径。键控的 `WebRow` 把一个组件注册在 `web_search` 与 `web_fetch` 两个键下,仅根据工具名判别以选取图标与标题;它组合共享的 `ToolRow`,把卡片作为 ToolRow 的 `web` body 传入,因此检索成为该行默认折叠的展开卡片(与每个卡片行相同的统一展开交互)。没有自己键控行的 web 声明工具落到 `GenericToolCard` 兜底,它以同样方式经 ToolRow 渲染卡片,详情面板则以原语的完整 source 额度渲染它,并在卡片下方渲染摊平的模型可见结果内容——fetch 正文只在此处可读,因为其卡片只携带 URL 和状态。行的上限是 `CHAT_WEB_MAX_SOURCES`(8),面板为 16,与终端卡片所画的摘要面对阅读面的同一划分([决策](../../../.agents/notes/implemented/feature/2026-07-30-web-result-card-frontend.md))。 +声明 `read` 渲染意图的 `read` 调用,会在两个对话渲染点上都通过 ui-primitives 的 `ReadBlock` 内联渲染返回的文件窗口——工具投影出的带行号、语法高亮的内容。`contract/read-card-model.ts` 是从快照的 `resultView` 推导的唯一位置;read 卡片是仅结果侧的(调用在 `execute` 返回前不携带文件内容),所以运行中的 read 只显示摘要,且对非 read 的 result view 或本客户端版本不认识的 `card` 标签返回 null,落回通用路径。键控的 `ReadRow` 组合共享的 `ToolRow`,把卡片作为 ToolRow 的 `read` body 传入,因此它是该行默认折叠的展开卡片;摘要仍是一个经 host 打开文件的路径链接。渲染点兜底行与详情面板同样感知 read。行的上限是 `CHAT_READ_MAX_LINES`(8),面板为 16([决策](../../../.agents/notes/implemented/feature/2026-07-30-web-read-card-frontend.md))。 + 声明 `diff` 渲染意图的工具调用(`write`/`edit` 工具),通过 ui-primitives 的 `DiffBlock` 内联渲染其已应用的改动,采用同一套四层结构。`contract/diff-card-model.ts` 是从 `callView`/`resultView` 对推导的唯一位置;已结算 result 的 hunk 替换 call 时 diff,对任何其他 card 标签或 generic result view(write/edit 的执行错误)它返回 null,落回通用路径。键控的 `FileMutationRow`(在 `write` 与 `edit` 下都注册)组合共享的 `ToolRow`,把 diff 作为 ToolRow 的 `diff` body 传入,因此它是该行默认折叠的展开卡片;摘要路径链接仍经 host 打开文件,而出错的改动(没有 diff 卡片)经 ToolRow 的 Output 区呈现其错误文本,首行进入折叠摘要。渲染点兜底行与详情面板同样感知 diff。行的上限是 `CHAT_DIFF_MAX_LINES`(8),面板为 16([决策](../../../.agents/notes/implemented/feature/2026-07-30-web-diff-card.md))。 聊天流会将跨重试轮次连续出现的模型重试节点投影为一个稳定的弱化状态行,并用最新一次尝试更新该行;每个重试事件仍保留在运行时快照与会话日志中。前端倒计时以客户端收到事件的时刻为计划延迟的起点,避免 Host 与浏览器的时钟偏差;剩余时间向上取整到秒,且下限为 1 秒。最近一次尚未完成的重试会显示从左到右的文字渐变动画。后续轮次事实用于区分已开始的尝试与在退避期间取消的尝试,Host 的 running 位只控制实时动画;随后该行会显示静态的已完成或已取消标签。normal 策略行显示有限重试上限;always 策略行显示 `∞`。激活该行会显示最近一次重试的精确延迟和失败消息。客户端运行时会在相应重试节点到达前移除每个失败步骤的流式输出尾部;后续某次尝试成功后,该状态仍保持可见。 diff --git a/packages/client/ui-conversation/src/client/chat/ToolRow.module.css b/packages/client/ui-conversation/src/client/chat/ToolRow.module.css index 0d79bb4698..81e41b066f 100644 --- a/packages/client/ui-conversation/src/client/chat/ToolRow.module.css +++ b/packages/client/ui-conversation/src/client/chat/ToolRow.module.css @@ -289,3 +289,15 @@ --dsl-terminal-output-max-height: 224px; border: 1px solid var(--dsw-alias-border-l1); } + +/* Visually hidden run-state label for assistive technology: the StateDot and + the running sweep are aria-hidden / colour-only, so the text carries the + running/failed/interrupted state to a screen reader. */ +.visuallyHidden { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + clip: rect(0 0 0 0); + white-space: nowrap; +} diff --git a/packages/client/ui-conversation/src/client/chat/ToolRow.tsx b/packages/client/ui-conversation/src/client/chat/ToolRow.tsx index e96d272fcf..46cdbda191 100644 --- a/packages/client/ui-conversation/src/client/chat/ToolRow.tsx +++ b/packages/client/ui-conversation/src/client/chat/ToolRow.tsx @@ -19,7 +19,7 @@ // independent); an error row's collapsed summary is the failure's first line in // the error color. -import { useState, type MouseEvent, type ReactNode } from 'react' +import { useState, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react' import clsx from 'clsx' import { CodeBlock, DiffBlock, ReadBlock, SearchBlock, StateDot, TerminalBlock, WebBlock, @@ -118,6 +118,19 @@ function leadingFor(state: ToolRowState, icon: ReactNode): ReactNode { } } +/** Visually hidden run-state label: the StateDot and the CSS sweep are both + * aria-hidden / colour-only, so assistive technology needs this text to know a + * row is running, failed, or interrupted. null in the ok state (the icon and + * summary already describe a settled row). */ +function stateStatus(state: ToolRowState, t: TranslateNS<'conversation'>): string | null { + switch (state) { + case 'running': return t('row.running') + case 'error': return t('row.failed') + case 'stopped': return t('row.stopped') + default: return null + } +} + export function ToolRow({ t, variant, @@ -151,6 +164,9 @@ export function ToolRow({ const card = terminalBody ?? diffBody ?? readBody ?? searchBody ?? webBody const expandable = body !== null || outputText !== null || card !== null const open = expanded && expandable + // The run-state label AT needs: the StateDot and the running sweep are both + // aria-hidden / colour-only, so a stopped or running row is otherwise silent. + const status = stateStatus(state, t) // An error row's collapsed summary IS the failure: the first error line in // the error color outranks both the args summary and a terminal description. const failureLine = state === 'error' ? errorSummary ?? null : null @@ -164,6 +180,13 @@ export function ToolRow({ event.stopPropagation() if (filePath !== undefined) onOpenFile?.(filePath) } + // Keep Enter/Space on the focused path link from bubbling to the row's + // keydown handler, which would preventDefault() the key and toggle expand + // instead of activating the link — the keyboard analogue of openFile's + // stopPropagation. The native button still fires its own onClick from the key. + const fileLinkKeyDown = (event: KeyboardEvent) => { + if (event.key === 'Enter' || event.key === ' ') event.stopPropagation() + } // Think reasoning is prose, not an input payload: expanded, it renders as // plain indented text (no IN/OUT card) and the inline summary — the body's // own first line — yields to avoid repeating itself. @@ -176,6 +199,7 @@ export function ToolRow({ // of losing it with the icon. return (
+ {status !== null && {status}} {summaryText} diff --git a/packages/client/ui-conversation/src/client/locales.ts b/packages/client/ui-conversation/src/client/locales.ts index 1a9c7a1f34..2b362cb0b2 100644 --- a/packages/client/ui-conversation/src/client/locales.ts +++ b/packages/client/ui-conversation/src/client/locales.ts @@ -77,6 +77,9 @@ export const zh = { 'bash.running': '运行中', 'bash.failed': '失败', 'bash.stopped': '已停止', + 'row.running': '运行中', + 'row.failed': '失败', + 'row.stopped': '已停止', 'queue.count': '{n} 条排队消息', 'queue.edit': '编辑排队消息', 'queue.edit.unsupported': '包含非文本内容,暂不支持编辑', @@ -171,6 +174,9 @@ export const en = { 'bash.running': 'Running', 'bash.failed': 'Failed', 'bash.stopped': 'Stopped', + 'row.running': 'Running', + 'row.failed': 'Failed', + 'row.stopped': 'Stopped', 'queue.count': '{n} queued messages', 'queue.edit': 'Edit queued message', 'queue.edit.unsupported': 'Contains non-text content; editing is not supported yet', diff --git a/packages/client/ui-conversation/src/client/toolviews/search-row.tsx b/packages/client/ui-conversation/src/client/toolviews/search-row.tsx index 0fb08ca5e9..0e8a90ed7a 100644 --- a/packages/client/ui-conversation/src/client/toolviews/search-row.tsx +++ b/packages/client/ui-conversation/src/client/toolviews/search-row.tsx @@ -48,7 +48,10 @@ export function SearchRow({ toolName, block, inspect, t }: SearchRowProps) { // A settled call with no search card (errored search, nested run_code // sub-dispatch, legacy generic result) has its text nowhere else to go; // ToolRow's Output section carries it, and errorSummary its first line. - output={search === null ? model.output : null} + // When a card is present ToolRow renders it instead of the output, so + // passing model.output unconditionally is safe and keeps the four card + // rows symmetric. + output={model.output} errorSummary={model.errorSummary} search={search} state={model.state} diff --git a/packages/client/ui-conversation/tests/diff-card.spec.tsx b/packages/client/ui-conversation/tests/diff-card.spec.tsx index 40f637b3d4..3a93be6b16 100644 --- a/packages/client/ui-conversation/tests/diff-card.spec.tsx +++ b/packages/client/ui-conversation/tests/diff-card.spec.tsx @@ -253,6 +253,9 @@ describe('FileMutationRow diff card', () => { error: { name: 'ToolError', code: 'interrupted' }, }))} />) expect(view.container.querySelector('[data-state="stopped"]')).not.toBeNull() + // The amber StateDot is aria-hidden, so ToolRow carries the state to AT as + // visually-hidden text; without it a stopped row is a colour-only signal. + expect(view.getByText('已停止')).toBeTruthy() }) it('renders a plain summary span when the call carries no file path', () => { @@ -267,12 +270,12 @@ describe('FileMutationRow diff card', () => { describe('fileMutationToolview registration', () => { it('registers one component under both edit and write, and each disposes', () => { - const registered: { key: string; disposed: boolean }[] = [] + const registered: { key: string; locale: unknown; disposed: boolean }[] = [] const disposers: (() => void)[] = [] const ctx = { slots: { - register: ({ key }: { name: string; key: string }) => { - const entry = { key, disposed: false } + register: ({ key, locale }: { name: string; key: string; locale?: string }) => { + const entry = { key, locale, disposed: false } registered.push(entry) const dispose = () => { entry.disposed = true } disposers.push(dispose) @@ -282,6 +285,8 @@ describe('fileMutationToolview registration', () => { } fileMutationToolview.apply(ctx as never) expect(registered.map(r => r.key).sort()).toEqual(['edit', 'write']) + // Both keys claim the conversation locale seat ToolRow's body copy needs. + expect(registered.map(r => r.locale)).toEqual(['conversation', 'conversation']) // The registrant's inject seam is the load-order contract the row relies on. expect(fileMutationToolview.inject).toEqual(['slots', 'conversation']) // Disposal removes each contribution (packages/AGENTS.md registry contract). diff --git a/packages/client/ui-conversation/tests/search-card.spec.tsx b/packages/client/ui-conversation/tests/search-card.spec.tsx index 1f3f0d7976..a7228cb656 100644 --- a/packages/client/ui-conversation/tests/search-card.spec.tsx +++ b/packages/client/ui-conversation/tests/search-card.spec.tsx @@ -346,16 +346,18 @@ describe('SearchRow keyed card', () => { }) it('registers the one row component under both grep and glob keys', () => { - const registered: { key: unknown; component: unknown }[] = [] + const registered: { key: unknown; locale: unknown; component: unknown }[] = [] const ctx = { slots: { - register: (options: { name: string; key: string }, component: unknown) => { - registered.push({ key: options.key, component }) + register: (options: { name: string; key: string; locale?: string }, component: unknown) => { + registered.push({ key: options.key, locale: options.locale, component }) }, }, } as never searchToolview.apply(ctx) expect(registered.map(r => r.key)).toEqual(['grep', 'glob']) + // Both keys claim the conversation locale seat ToolRow's body copy needs. + expect(registered.map(r => r.locale)).toEqual(['conversation', 'conversation']) // One component, two keys. expect(registered[0]!.component).toBe(SearchRow) expect(registered[1]!.component).toBe(SearchRow) diff --git a/packages/client/ui-conversation/tests/web-card.spec.tsx b/packages/client/ui-conversation/tests/web-card.spec.tsx index 153e9962ee..d4115f169c 100644 --- a/packages/client/ui-conversation/tests/web-card.spec.tsx +++ b/packages/client/ui-conversation/tests/web-card.spec.tsx @@ -267,17 +267,19 @@ describe('DetailsPanel web Output section', () => { describe('web toolview registration', () => { it('registers one WebRow under both web_search and web_fetch', () => { - const registered: { key: string; component: unknown }[] = [] + const registered: { key: string; locale: unknown; component: unknown }[] = [] const ctx = { slots: { - register: (options: { name: string; key: string }, component: unknown) => { - registered.push({ key: options.key, component }) + register: (options: { name: string; key: string; locale?: string }, component: unknown) => { + registered.push({ key: options.key, locale: options.locale, component }) return () => {} }, }, } as unknown as import('cordis').Context webToolview.apply(ctx) expect(registered.map(r => r.key)).toEqual(['web_search', 'web_fetch']) + // Both keys claim the conversation locale seat ToolRow's body copy needs. + expect(registered.map(r => r.locale)).toEqual(['conversation', 'conversation']) // One component under both keys, not two thin rows. expect(registered[0]?.component).toBe(WebRow) expect(registered[1]?.component).toBe(WebRow) diff --git a/packages/client/ui-primitives/README.i18n.yaml b/packages/client/ui-primitives/README.i18n.yaml index 1e0cd70ea2..ceee92d476 100644 --- a/packages/client/ui-primitives/README.i18n.yaml +++ b/packages/client/ui-primitives/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-primitives/README.md -README.md: 43266c05baca8d78406f35106db82ffa8e48f744 -README.zh.md: ff3bc69492e5124b00528ae52280898d18f3bd65 +README.md: 6e30892b3fb657d22a06b74f9176c04552a969ff +README.zh.md: e194f982f399c4c11749a04a28b10e189adc33bf diff --git a/packages/client/ui-primitives/README.md b/packages/client/ui-primitives/README.md index 43266c05ba..6e30892b3f 100644 --- a/packages/client/ui-primitives/README.md +++ b/packages/client/ui-primitives/README.md @@ -2,7 +2,7 @@ English | [中文](README.zh.md) -Pure React atoms (zero cordis): StateDot, ic_ds_* icons, Button/Pill/Menu/Modal/Input, the markdown family (MessageText/MarkdownText/JsonBlock), the read-only JsonTree inspector, the `useAnchoredMaxHeight` hook that clamps a bottom-anchored overlay to the viewport space above its anchor (re-measured on resize, scroll, and a caller-supplied dependency), TerminalBlock, DiffBlock, SearchBlock, and WebBlock. Contract: api-contracts v3 §8. +Pure React atoms (zero cordis): StateDot, ic_ds_* icons, Button/Pill/Menu/Modal/Input, the markdown family (MessageText/MarkdownText/JsonBlock), the read-only JsonTree inspector, the `useAnchoredMaxHeight` hook that clamps a bottom-anchored overlay to the viewport space above its anchor (re-measured on resize, scroll, and a caller-supplied dependency), TerminalBlock, DiffBlock, ReadBlock, SearchBlock, and WebBlock. Contract: api-contracts v3 §8. ## Markdown rendering @@ -12,6 +12,10 @@ Pure React atoms (zero cordis): StateDot, ic_ds_* icons, Button/Pill/Menu/Modal/ `TerminalBlock` renders a shell command as a terminal surface: one prompt row per line of the command (the shortened `cwd` label on the first row only, since the view knows one working directory and a `cd` moves later lines elsewhere, then that line), the command's output, a status pill for a non-zero exit code or a terminating signal, and a copy control that writes the raw `output` prop. A run-state `StateDot` marks the call once, on the first row, out of flow in a gutter the card reserves as its own left padding, so the dot sits inside the card box yet left of the prompt text. It reaches three of `StateDot`'s states — the chase while `running`, red for the same exit status that renders the pill, green otherwise — so a card states whether its command is still running rather than leaving that to be inferred from the presence of output; it carries one visually hidden text label because `StateDot` is `aria-hidden`. One dot regardless of line count is deliberate: the exit status is the whole call's, so a dot per line would claim a per-line outcome the view does not carry. Command text is `white-space: pre`, so repeated spaces, tabs, and an indented continuation render verbatim while the row stays single-line and ellipsizes. ANSI escape sequences are parsed with the `anser` runtime dependency into React spans; cursor movements replay into a per-line column buffer before inert controls are stripped, since carriage return and backspace only MOVE the cursor: `100%` + CR + `OK` alone shows `OK0%`, while the `\x1b[K` a spinner writes with its redraw erases the tail so `100%\r\x1b[KOK` shows `OK`. Erase-in-line is honored in all three parameter forms, the cursor advances by terminal columns (8-column tab stops, two for emoji and CJK, none for a combining mark), and SGR state is normalized per cell as a terminal stores it, threading across lines and closing at the state the line ended in; basic-16 foreground colors map onto `--dsw-*` tokens, while 256-palette and truecolor values pass through as literal rgb. Output keeps `white-space: pre` with horizontal scrolling, so column-aligned output holds its alignment instead of soft-wrapping, and collapses to a head slice plus a tail slice past `maxLines` (default 16, the TUI transcript's split arithmetic) behind an expand button. Rationale: [the web terminal card note](../../../.agents/notes/implemented/feature/2026-07-28-web-terminal-card.md). +## Read rendering + +`ReadBlock` renders a returned file window as a line-numbered, syntax-highlighted code surface: a bold path (or presenter-supplied title) banner with a copy control, then the content lines with their file line numbers in a gutter (a windowed read keeps the file's own numbering, so a read past an offset starts above 1). A `totalLines` exceeding the window count draws a `showing N of M` note, and the body collapses to a head slice plus a tail slice past `maxLines` (default 16, the TerminalBlock split arithmetic) behind an expand button. Highlighting runs through the same shiki path as `CodeBlock`. Rationale: [the web read card note](../../../.agents/notes/implemented/feature/2026-07-30-web-read-card.md). + ## Diff rendering `DiffBlock` renders a file mutation as an inline diff surface: one bold path header per file, the removed lines (`- `, error token) above the added lines (`+ `, success token), a `⋯` gap before a same-file second hunk, and a dim `└ +A -R · N file(s)` footer. Lines are `white-space: pre` with horizontal scrolling, so a source line holds its indentation instead of soft-wrapping, and the body collapses to a head slice plus a tail slice past `maxLines` (default 16, `TerminalBlock`'s split arithmetic) behind an expand button. A create (`oldText: null`) has no removed side. The copy control writes the prefixed diff text (path headers, `- `/`+ ` lines, the gap) so a multi-file copy stays attributable, and floats in the top-right corner rather than on a banner row of its own. Geometry mirrors `CodeBlock`/`TerminalBlock`. The `+`/`-` block form mirrors the TUI transcript's diff card so a diff reads the same across front ends. Rationale: [the web diff card note](../../../.agents/notes/implemented/feature/2026-07-30-web-diff-card.md). diff --git a/packages/client/ui-primitives/README.zh.md b/packages/client/ui-primitives/README.zh.md index ff3bc69492..e194f982f3 100644 --- a/packages/client/ui-primitives/README.zh.md +++ b/packages/client/ui-primitives/README.zh.md @@ -2,7 +2,7 @@ [English](README.md) | 中文 -纯 React 原子组件(零 cordis):StateDot、ic_ds_* 图标、Button/Pill/Menu/Modal/Input、markdown 家族(MessageText/MarkdownText/JsonBlock)、只读 JsonTree 检查器、`useAnchoredMaxHeight` hook(把底部锚定的浮层高度收敛到锚点上方的视口空间,并在 resize、scroll 与调用方提供的依赖变化时重新测量)、TerminalBlock、DiffBlock、SearchBlock,以及 WebBlock。契约:api-contracts v3 §8。 +纯 React 原子组件(零 cordis):StateDot、ic_ds_* 图标、Button/Pill/Menu/Modal/Input、markdown 家族(MessageText/MarkdownText/JsonBlock)、只读 JsonTree 检查器、`useAnchoredMaxHeight` hook(把底部锚定的浮层高度收敛到锚点上方的视口空间,并在 resize、scroll 与调用方提供的依赖变化时重新测量)、TerminalBlock、DiffBlock、ReadBlock、SearchBlock,以及 WebBlock。契约:api-contracts v3 §8。 ## Markdown 渲染 @@ -11,6 +11,10 @@ `TerminalBlock` 将一条 shell 命令渲染为终端表层:命令的每一行各占一个提示行(缩短后的 `cwd` 标签只出现在第一行,因为视图只知道一个工作目录,而一个 `cd` 就会让后面的行去到别处,标签之后是该行)、命令输出、非零退出码或终止信号对应的状态胶囊,以及写入原始 `output` prop 的复制控件。一枚运行状态 `StateDot` 为整次调用标记一次,位于第一行,以脱离文档流的方式落在卡片以自身左内边距预留的落区中,因此它位于卡片盒之内、提示文字之左。它用到 `StateDot` 的三种状态——`running` 期间为追逐动画,与渲染状态胶囊相同的退出状态为红色,其余为绿色——因此卡片直接陈述其命令是否仍在运行,而不是让人从有无输出中推断;由于 `StateDot` 是 `aria-hidden`,它携带一处视觉隐藏的文本标签。无论多少行都只有一枚状态点是有意为之:退出状态属于整次调用,因此每行一枚就会声称一个视图并不携带的逐行结果。命令文本使用 `white-space: pre`,因此重复空格、制表符与缩进续行都原样呈现,同时该行仍保持单行并以省略号截断。ANSI 转义序列通过运行时依赖 `anser` 解析为 React span;光标移动在剥除无显示意义控制符之前先重放进逐行的列缓冲,因为回车与退格**只移动**光标:单是 `100%` 加回车再加 `OK` 显示为 `OK0%`,而 spinner 随重绘写出的 `\x1b[K` 会擦掉尾巴,因此 `100%\r\x1b[KOK` 显示为 `OK`。行内擦除的三种参数形式都被遵循,光标按终端列推进(8 列制表位;emoji 与 CJK 占两列;组合标记不占列),SGR 状态按单元格归一化存储,与终端一致,并跨行延续、在行结束时的状态处收束;基础 16 色前景色映射到 `--dsw-*` token,而 256 色板与真彩色值按字面 rgb 透传。输出保持 `white-space: pre` 并支持横向滚动,因此按列对齐的输出保留其对齐而不会软换行;超过 `maxLines`(默认 16,与 TUI 转录相同的切分算法)时折叠为头部切片加尾部切片,由展开按钮控制。原理:[Web 终端卡片笔记](../../../.agents/notes/implemented/feature/2026-07-28-web-terminal-card.md)。 +## Read 渲染 + +`ReadBlock` 将返回的文件窗口渲染为带行号、语法高亮的代码表层:一个粗体路径(或 presenter 提供的标题)横幅加复制控件,其下是内容行,行号槽里是文件自身的行号(窗口化的 read 保留文件本身的编号,因此偏移之后的 read 从大于 1 处起始)。`totalLines` 超过窗口行数时画出 `showing N of M` 提示;超过 `maxLines`(默认 16,与 TerminalBlock 相同的切分算法)时折叠为头部切片加尾部切片,由展开按钮控制。高亮走与 `CodeBlock` 相同的 shiki 路径。原理:[Web read 卡片笔记](../../../.agents/notes/implemented/feature/2026-07-30-web-read-card.md)。 + ## Diff 渲染 `DiffBlock` 将一次文件改动渲染为内联 diff 表层:每个文件一个粗体路径头、删除行(`- `,error token)在新增行(`+ `,success token)之上、同文件第二个 hunk 前一个 `⋯` gap,以及暗色 `└ +A -R · N file(s)` 页脚。各行使用 `white-space: pre` 并横向滚动,因此源码行保留其缩进而不软换行;超过 `maxLines`(默认 16,与 `TerminalBlock` 相同的切分算法)时折叠为头部切片加尾部切片,由展开按钮控制。新建(`oldText: null`)没有删除侧。复制控件写入带前缀的 diff 文本(路径头、`- `/`+ ` 行、gap),使多文件复制保持可归属,并浮在右上角而非占据自己的 banner 行。几何镜像 `CodeBlock`/`TerminalBlock`。`+`/`-` 块形式镜像 TUI 转录的 diff 卡片,使 diff 在两个前端读起来一致。原理:[Web diff 卡片笔记](../../../.agents/notes/implemented/feature/2026-07-30-web-diff-card.md)。