Merge remote-tracking branch 'origin/master' into feat/todo-multi-in-progress

# Conflicts:
#	examples/acp-agent/tests/snapshots/todo-write/session.jsonl
#	packages/client/ui-conversation/README.i18n.yaml

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

@@ -0,0 +1,161 @@
+/* Expanded context bodies: one code-block surface shared by every form, so the
+   disclosure keeps the Figma 10:2482 geometry whichever form renders inside. */
+
+.text {
+  margin: 0;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* Provenance beneath the text: dimmer than the content it describes. */
+.fields {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 8px 0 0;
+  padding-top: 8px;
+  border-top: 1px solid var(--dsw-alias-line-secondary);
+}
+
+.field {
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fieldKey {
+  flex: none;
+  min-width: 96px;
+  color: var(--dsw-alias-label-caption);
+}
+
+.fieldValue {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  color: var(--dsw-alias-label-tertiary);
+  overflow-wrap: anywhere;
+}
+
+/* instructions: the reconciled files, above their text. */
+.files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  margin: 0 0 8px;
+  padding: 0;
+  list-style: none;
+}
+
+.file {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+}
+
+.filePath {
+  color: var(--dsw-alias-label-secondary);
+  overflow-wrap: anywhere;
+}
+
+.fileAction {
+  color: var(--dsw-alias-label-caption);
+}
+
+/* catalog: a replacement notice above one row per published entry. */
+.catalogNotice {
+  margin: 0 0 6px;
+  color: var(--dsw-alias-label-caption);
+}
+
+
+.entries {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.entry {
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+}
+
+.entryName {
+  flex: none;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.entryDescription {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--dsw-alias-label-tertiary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* snapshot: one titled block per contributing subsystem. */
+.sections {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.sectionName {
+  color: var(--dsw-alias-label-caption);
+}
+
+.sectionText {
+  margin: 0;
+  color: var(--dsw-alias-label-secondary);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* relay: who sent this, above what they said. */
+.relaySender {
+  margin: 0 0 6px;
+  color: var(--dsw-alias-label-caption);
+  overflow-wrap: anywhere;
+}
+
+/* recall: one row per source session, with how much of it survived. */
+.recalls {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0 0 8px;
+  padding: 0;
+  list-style: none;
+}
+
+.recall {
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+}
+
+.recallLabel {
+  color: var(--dsw-alias-label-secondary);
+  overflow-wrap: anywhere;
+}
+
+.recallCounts {
+  flex: none;
+  color: var(--dsw-alias-label-caption);
+}

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

@@ -0,0 +1,591 @@
+// Expanded bodies for the context disclosure, one per durable context form.
+// The producer declares the form; this module only chooses a presentation for
+// it. Every form falls back to OpaqueBody, which is the documented default for
+// an absent, unknown, or malformed form — a resumed or foreign log must render
+// even when this UI version has never seen its producer.
+
+import type { ReactNode } from 'react'
+import type { ContextMessageNode, KnownContextForm } from '@deepseek-ai/dsh-client-runtime/client'
+import { JsonBlock } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ChatViewSlotProps } from '../contract/slots.ts'
+import css from './ContextBody.module.css'
+
+/** Model-facing text stays bounded at the disclosure, not at the producer. */
+const MAX_CHARS = 20_000
+
+/** Rows a list body materializes before summarizing the remainder. */
+const MAX_ENTRIES = 200
+
+type Translate = ChatViewSlotProps['t']
+
+/** One durable source narrowed to the readable-record shape; null for anything else. */
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+    ? value as Record<string, unknown>
+    : null
+}
+
+/** One run of the model-facing content: adjacent text, or one unknown block. */
+type ContentRun = { text: string } | { block: unknown }
+
+/**
+ * The content blocks as runs, IN THE ORDER the model received them.
+ *
+ * Adjacent text blocks join with no separator, matching how provider adapters
+ * flatten them — inserting a line break would show the reader a line the model
+ * never saw. An unknown block breaks the run and keeps its own fallback rather
+ * than being hoisted past the text around it or vanishing; the block union is
+ * merge-extensible, so a foreign log may interleave shapes this build does not
+ * know.
+ */
+function contentRuns(content: ContextMessageNode['content']): ContentRun[] {
+  const runs: ContentRun[] = []
+  for (const block of content) {
+    if (block.type !== 'text') {
+      runs.push({ block })
+      continue
+    }
+    const last = runs[runs.length - 1]
+    if (last !== undefined && 'text' in last) last.text += block.text
+    else runs.push({ text: block.text })
+  }
+  return runs
+}
+
+/** Only the blocks this UI version does not know, for bodies that replace the text. */
+function unknownBlocks(content: ContextMessageNode['content']): unknown[] {
+  return contentRuns(content).flatMap(run => 'block' in run ? [run.block] : [])
+}
+
+/** The model-facing text, truncated to the display bound. */
+function boundedText(text: string, t: Translate): string {
+  return text.length > MAX_CHARS
+    ? `${text.slice(0, MAX_CHARS)}\n${t('json.truncated', { total: text.length })}`
+    : text
+}
+
+/**
+ * One source field rendered as a value row; nested shapes stay compact JSON.
+ * Bounded on its own, because provenance is as unbounded as the text: an unknown
+ * producer may record an arbitrarily large string or array.
+ */
+function fieldValue(value: unknown, t: Translate): string {
+  const text = typeof value === 'string'
+    ? value
+    : typeof value === 'number' || typeof value === 'boolean' ? String(value) : JSON.stringify(value)
+  return boundedText(text, t)
+}
+
+/**
+ * Provenance fields as a key/value list. `kind` is always omitted because the
+ * row header already names the producer. `form` is omitted only when a
+ * dedicated body rendered for it — then the presentation the reader is looking
+ * at IS that value. On the opaque fallback the declaration is kept, because
+ * that is the one place a form this version cannot present would otherwise
+ * disappear from the UI entirely.
+ */
+function SourceFields({ source, formRendered, t }: {
+  source: unknown
+  formRendered: boolean
+  t: Translate
+}): ReactNode {
+  const record = asRecord(source)
+  if (record === null) return null
+  const hidden = formRendered ? ['kind', 'form'] : ['kind']
+  const rows = Object.entries(record).filter(([key]) => !hidden.includes(key))
+  if (rows.length === 0) return null
+  return (
+    <dl className={css.fields} data-context-fields>
+      {rows.map(([key, value]) => (
+        <div key={key} className={css.field}>
+          <dt className={css.fieldKey}>{key}</dt>
+          <dd className={css.fieldValue}>{fieldValue(value, t)}</dd>
+        </div>
+      ))}
+    </dl>
+  )
+}
+
+/**
+ * Content blocks this UI version does not know, kept visible rather than
+ * dropped: the block union is merge-extensible, so a newer or foreign log may
+ * carry a shape this build has no presentation for.
+ * @param props - The unrecognized blocks and the locale seat.
+ * @returns One generic JSON block per unknown entry.
+ */
+function UnknownBlocks({ blocks, t }: { blocks: readonly unknown[]; t: Translate }): ReactNode {
+  return (
+    <>
+      {blocks.map((block, index) => (
+        <JsonBlock
+          key={index}
+          label={t('message.unknownBlock')}
+          payload={block}
+          truncatedLabel={total => t('json.truncated', { total })}
+        />
+      ))}
+    </>
+  )
+}
+
+/**
+ * The model-facing content of one context, shared by every form that shows it:
+ * the text with its real line breaks, then any block this UI version does not
+ * know, which keeps its own fallback rather than vanishing.
+ * @param props - Durable content and the locale seat.
+ * @returns The content blocks as the model received them.
+ */
+function ModelFacingContent({ content, t }: {
+  content: ContextMessageNode['content']
+  t: Translate
+}): ReactNode {
+  return (
+    <>
+      {contentRuns(content).map((run, index) => ('text' in run
+        ? run.text !== '' && (
+          <pre key={index} className={css.text} data-context-text>{boundedText(run.text, t)}</pre>
+        )
+        : (
+          <JsonBlock
+            key={index}
+            label={t('message.unknownBlock')}
+            payload={run.block}
+            truncatedLabel={total => t('json.truncated', { total })}
+          />
+        )))}
+    </>
+  )
+}
+
+/**
+ * Default presentation: the model-facing text as text, with its real line
+ * breaks, and the remaining provenance beneath it. This is what every form
+ * this UI version does not recognize renders as.
+ * @param props - Durable content, its source, and the locale seat.
+ * @returns The opaque context body.
+ */
+export function OpaqueBody({ content, source, t }: {
+  content: ContextMessageNode['content']
+  source: unknown
+  t: Translate
+}): ReactNode {
+  return (
+    <>
+      <ModelFacingContent content={content} t={t} />
+      <SourceFields source={source} formRendered={false} t={t} />
+    </>
+  )
+}
+
+/** One reconciled instruction file, as the durable source records it. */
+interface InstructionChange {
+  action: 'set' | 'replace' | 'remove'
+  path: string
+  digest?: string
+}
+
+/**
+ * Instruction changes read off the source, or null when the record is not a
+ * usable instruction list.
+ *
+ * The read is all-or-nothing: silently dropping one unreadable entry would show
+ * a confident, incomplete file list for a log this version cannot fully read.
+ * Paths are deduplicated in first-seen order, matching how the header label is
+ * derived from the same array.
+ */
+function instructionChanges(source: unknown): InstructionChange[] | null {
+  const record = asRecord(source)
+  const list = record === null ? undefined : record['changes']
+  if (!Array.isArray(list)) return null
+  const changes: InstructionChange[] = []
+  const seen = new Set<string>()
+  for (const entry of list as readonly unknown[]) {
+    const change = asRecord(entry)
+    if (change === null) return null
+    const path = change['path']
+    if (typeof path !== 'string' || path === '') return null
+    const action = change['action']
+    // The action decides which word the row shows, so an unrecognized one is
+    // not a readable change — it would be presented as loaded or updated.
+    if (action !== 'set' && action !== 'replace' && action !== 'remove') return null
+    const digest = change['digest']
+    if (seen.has(path)) continue
+    seen.add(path)
+    changes.push({ action, path, ...typeof digest === 'string' ? { digest } : {} })
+  }
+  return changes.length === 0 ? null : changes
+}
+
+/**
+ * Locale key for one reconciled file. The baseline loads a file; a later delta
+ * distinguishes a newly reconciled path from a rewritten one, which `set` and
+ * `replace` already separate at the producer.
+ * @param action - the durable change action.
+ * @param baseline - whether this context is the startup/resume baseline.
+ * @returns the key naming what happened to that file.
+ */
+function instructionAction(
+  action: InstructionChange['action'],
+  baseline: boolean,
+): 'message.context.instructions.removed' | 'message.context.instructions.loaded'
+  | 'message.context.instructions.added' | 'message.context.instructions.updated' {
+  if (action === 'remove') return 'message.context.instructions.removed'
+  if (baseline) return 'message.context.instructions.loaded'
+  return action === 'set' ? 'message.context.instructions.added' : 'message.context.instructions.updated'
+}
+
+/**
+ * `instructions` form: the files this context reconciled, then their text.
+ *
+ * The text keeps its `<system-reminder>` framing verbatim — the framing is part
+ * of what the model read, so hiding it would misreport the request.
+ * @param props - Durable content, its source, and the locale seat.
+ * @returns The instructions context body, or the opaque body when the change
+ * list is unreadable.
+ */
+export function InstructionsBody({ content, source, t }: {
+  content: ContextMessageNode['content']
+  source: unknown
+  t: Translate
+}): ReactNode {
+  const changes = instructionChanges(source)
+  if (changes === null) return <OpaqueBody content={content} source={source} t={t} />
+  const baseline = asRecord(source)?.['baseline'] === true
+  return (
+    <>
+      <ul className={css.files} data-context-files>
+        {changes.map(change => (
+          <li key={change.path} className={css.file} title={change.digest}>
+            <span className={css.filePath}>{change.path}</span>
+            <span className={css.fileAction}>
+              {t(instructionAction(change.action, baseline))}
+            </span>
+          </li>
+        ))}
+      </ul>
+      <ModelFacingContent content={content} t={t} />
+    </>
+  )
+}
+
+/** One catalog entry, as the durable source records it. */
+interface CatalogEntry {
+  name: string
+  description: string
+}
+
+/**
+ * Catalog entries read off the source, or null when the record is not a usable
+ * catalog. All-or-nothing for the same reason as the instruction list: this body
+ * replaces the model-facing text, so a partial list would hide the only complete
+ * account of what the model read.
+ */
+function catalogEntries(source: unknown): CatalogEntry[] | null {
+  const record = asRecord(source)
+  const list = record === null ? undefined : record['entries']
+  if (!Array.isArray(list)) return null
+  const entries: CatalogEntry[] = []
+  for (const item of list as readonly unknown[]) {
+    const entry = asRecord(item)
+    if (entry === null) return null
+    const name = entry['name']
+    const description = entry['description']
+    if (typeof name !== 'string' || name === '' || typeof description !== 'string') return null
+    entries.push({ name, description })
+  }
+  // An empty list is a real catalog: a replacement with no entries retires
+  // every earlier name. Only an unreadable shape falls back.
+  return entries
+}
+
+/**
+ * `catalog` form: the published entries as a list, read from the source rather
+ * than re-parsed out of the model-facing prose.
+ *
+ * A catalog whose source carries no usable entries falls through to the opaque
+ * body, so an older or hand-edited log still shows its text.
+ * @param props - Durable content, its source, and the locale seat.
+ * @returns The catalog context body, or the opaque body when the entry list is
+ * unreadable.
+ */
+export function CatalogBody({ content, source, t }: {
+  content: ContextMessageNode['content']
+  source: unknown
+  t: Translate
+}): ReactNode {
+  const entries = catalogEntries(source)
+  if (entries === null) return <OpaqueBody content={content} source={source} t={t} />
+  const update = asRecord(source)?.['update'] === true
+  // Entry count is unbounded (a provider may publish any number of skills), and
+  // the scrollport bounds height, not node count — so the list bounds itself.
+  const shown = entries.slice(0, MAX_ENTRIES)
+  const rest = unknownBlocks(content)
+  return (
+    <>
+      {update && <p className={css.catalogNotice} data-context-catalog-update>{t('message.context.catalog.replaced')}</p>}
+      <ul className={css.entries} data-context-entries>
+        {shown.map((entry, index) => (
+          // Index key: a hand-edited or foreign log may repeat a name, and a
+          // duplicate React key would drop a row the model did see.
+          <li key={index} className={css.entry}>
+            <code className={css.entryName}>{entry.name}</code>
+            <span className={css.entryDescription}>{entry.description}</span>
+          </li>
+        ))}
+      </ul>
+      {shown.length < entries.length && (
+        <p className={css.catalogNotice} data-context-entries-truncated>
+          {t('message.context.catalog.more', { count: entries.length - shown.length })}
+        </p>
+      )}
+      {/* The block union is merge-extensible: a catalog message carrying an
+          unknown block still shows it rather than dropping model-visible content. */}
+      <UnknownBlocks blocks={rest} t={t} />
+    </>
+  )
+}
+
+/** One named contribution to a runtime snapshot, as the durable source records it. */
+interface SnapshotSection {
+  name: string
+  text: string
+}
+
+/** Snapshot sections read off the source, or null when the record is unusable. */
+function snapshotSections(source: unknown): SnapshotSection[] | null {
+  const record = asRecord(source)
+  const list = record === null ? undefined : record['sections']
+  if (!Array.isArray(list)) return null
+  const sections: SnapshotSection[] = []
+  for (const item of list as readonly unknown[]) {
+    const section = asRecord(item)
+    if (section === null) return null
+    const name = section['name']
+    const text = section['text']
+    if (typeof name !== 'string' || name === '' || typeof text !== 'string') return null
+    sections.push({ name, text })
+  }
+  return sections.length === 0 ? null : sections
+}
+
+/**
+ * `snapshot` form: the named contributions this snapshot assembled, in order.
+ *
+ * The sections are the same bytes the model read, split at the boundaries the
+ * producer assembled them on, so a reader sees which subsystem contributed
+ * which state instead of one undifferentiated wall.
+ *
+ * One sentence of the model-facing text is NOT in any section: the producer's
+ * framing line declaring that this snapshot supersedes earlier ones. Unlike the
+ * `<system-reminder>` wrapper an instruction context carries — which wraps
+ * content and cannot be separated from it — that line states the form's own
+ * semantics, so the body states them as a caption instead of reprinting the
+ * joined prose beside the sections it was split from.
+ * @param props - Durable content, its source, and the locale seat.
+ * @returns The snapshot context body, or the opaque body when unreadable.
+ */
+export function SnapshotBody({ content, source, t }: {
+  content: ContextMessageNode['content']
+  source: unknown
+  t: Translate
+}): ReactNode {
+  const sections = snapshotSections(source)
+  /* v8 ignore next -- contextBody reads the sections before choosing this body. */
+  if (sections === null) return <OpaqueBody content={content} source={source} t={t} />
+  return (
+    <>
+      <p className={css.catalogNotice} data-context-snapshot-supersedes>
+        {t('message.context.snapshot.supersedes')}
+      </p>
+      <dl className={css.sections} data-context-sections>
+        {sections.map((section, index) => (
+          <div key={index} className={css.section}>
+            <dt className={css.sectionName}>{section.name}</dt>
+            <dd className={css.sectionText}>{boundedText(section.text, t)}</dd>
+          </div>
+        ))}
+      </dl>
+    </>
+  )
+}
+
+/**
+ * `notice` form: what just happened, with the model-facing text beneath it.
+ *
+ * The one-line account also rides the collapsed row ({@link contextBody}), so a
+ * notice is usually readable without expanding at all.
+ * @param props - Durable content, its source, and the locale seat.
+ * @returns The notice context body.
+ */
+export function NoticeBody({ content, t }: {
+  content: ContextMessageNode['content']
+  source: unknown
+  t: Translate
+}): ReactNode {
+  return <ModelFacingContent content={content} t={t} />
+}
+
+/**
+ * `relay` form: which agent sent this, then what it said.
+ *
+ * The sender is an opaque session id; it is shown as provenance rather than a
+ * label, because this client cannot resolve it to a title.
+ * @param props - Durable content, its source, and the locale seat.
+ * @returns The relay context body.
+ */
+export function RelayBody({ content, source, t }: {
+  content: ContextMessageNode['content']
+  source: unknown
+  t: Translate
+}): ReactNode {
+  const sender = relaySender(source)
+  /* v8 ignore next -- contextBody resolves the sender before choosing this body. */
+  if (sender === null) return <OpaqueBody content={content} source={source} t={t} />
+  return (
+    <>
+      <p className={css.relaySender} data-context-relay-sender>
+        {t('message.context.relay.from', { session: sender })}
+      </p>
+      <ModelFacingContent content={content} t={t} />
+    </>
+  )
+}
+
+/** The sending agent's session id, or null when the record does not name one. */
+function relaySender(source: unknown): string | null {
+  const sender = asRecord(source)?.['senderSessionId']
+  return typeof sender === 'string' && sender !== '' ? sender : null
+}
+
+/** One recalled session, as the durable source records it. */
+interface RecalledSession {
+  label: string
+  retained: number
+  omitted: number
+  truncated: boolean
+}
+
+/** Recalled sessions read off the source, or null when the record is unusable. */
+function recalledSessions(source: unknown): RecalledSession[] | null {
+  const record = asRecord(source)
+  const list = record === null ? undefined : record['references']
+  if (!Array.isArray(list)) return null
+  const sessions: RecalledSession[] = []
+  for (const item of list as readonly unknown[]) {
+    const reference = asRecord(item)
+    if (reference === null) return null
+    const label = reference['label']
+    const retained = reference['retainedMessages']
+    const omitted = reference['omittedMessages']
+    const truncated = reference['truncated']
+    // Completeness is the fact this card exists to report, so a reference that
+    // cannot state it is not a readable recall — showing the label alone would
+    // present a confident card over unknown loss.
+    if (typeof label !== 'string' || label === ''
+      || typeof retained !== 'number' || typeof omitted !== 'number'
+      || typeof truncated !== 'boolean') return null
+    sessions.push({ label, retained, omitted, truncated })
+  }
+  return sessions.length === 0 ? null : sessions
+}
+
+/**
+ * `recall` form: which sessions this material came from and how much of each
+ * survived the read, then the material itself.
+ *
+ * Completeness is the fact a reader needs first: recalled context is bounded on
+ * the way in, so a card that hid the omitted count would overstate what the
+ * model received.
+ * @param props - Durable content, its source, and the locale seat.
+ * @returns The recall context body, or the opaque body when unreadable.
+ */
+export function RecallBody({ content, source, t }: {
+  content: ContextMessageNode['content']
+  source: unknown
+  t: Translate
+}): ReactNode {
+  const sessions = recalledSessions(source)
+  if (sessions === null) return <OpaqueBody content={content} source={source} t={t} />
+  return (
+    <>
+      <ul className={css.recalls} data-context-recalls>
+        {sessions.map((session, index) => (
+          <li key={index} className={css.recall}>
+            <span className={css.recallLabel}>{session.label}</span>
+            <span className={css.recallCounts}>
+              {t('message.context.recall.counts', {
+                retained: session.retained,
+                omitted: session.omitted,
+              })}
+            </span>
+            {session.truncated && (
+              <span className={css.recallCounts}>{t('message.context.recall.truncated')}</span>
+            )}
+          </li>
+        ))}
+      </ul>
+      <ModelFacingContent content={content} t={t} />
+    </>
+  )
+}
+
+/** The one-line account a `notice` puts on its collapsed row, when it records one. */
+function noticeSummary(source: unknown): string | null {
+  const summary = asRecord(source)?.['summary']
+  return typeof summary === 'string' && summary !== '' ? summary : null
+}
+
+/**
+ * Choose the body for one context node.
+ *
+ * Returns the form the body actually rendered as, which is not always the
+ * declared one: a declared form whose fields are unreadable falls back to
+ * opaque, and the caller labels the row with what it really shows.
+ * `summary` is the collapsed row's one-line account, which only a `notice`
+ * records: its whole point is being readable without expanding.
+ * @param form - the producer-declared form projected onto the node.
+ * @param props - durable content, its source, and the locale seat.
+ * @returns the rendered form (null for opaque), its collapsed summary, and its body.
+ */
+export function contextBody(
+  form: ContextMessageNode['form'],
+  props: { content: ContextMessageNode['content']; source: unknown; t: Translate },
+): { rendered: KnownContextForm | null; summary: string | null; body: ReactNode } {
+  const opaque = { rendered: null, summary: null, body: <OpaqueBody {...props} /> }
+  switch (form) {
+    case 'instructions':
+      return instructionChanges(props.source) === null
+        ? opaque
+        : { rendered: 'instructions', summary: null, body: <InstructionsBody {...props} /> }
+    case 'catalog':
+      return catalogEntries(props.source) === null
+        ? opaque
+        : { rendered: 'catalog', summary: null, body: <CatalogBody {...props} /> }
+    case 'snapshot':
+      return snapshotSections(props.source) === null
+        ? opaque
+        : { rendered: 'snapshot', summary: null, body: <SnapshotBody {...props} /> }
+    case 'notice': {
+      const summary = noticeSummary(props.source)
+      return summary === null
+        ? opaque
+        : { rendered: 'notice', summary, body: <NoticeBody {...props} /> }
+    }
+    case 'relay':
+      return relaySender(props.source) === null
+        ? opaque
+        : { rendered: 'relay', summary: null, body: <RelayBody {...props} /> }
+    case 'recall':
+      return recalledSessions(props.source) === null
+        ? opaque
+        : { rendered: 'recall', summary: null, body: <RecallBody {...props} /> }
+    case null:
+      return opaque
+    /* v8 ignore next 4 -- closed-union backstop; the compiler rejects a new
+    KnownContextForm here rather than letting it degrade to opaque silently. */
+    default: {
+      const unreachable: never = form
+      throw new Error(`unreachable context form: ${String(unreachable)}`)
+    }
+  }
+}

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

@@ -12,6 +12,40 @@
   color: var(--dsw-alias-label-secondary);
 }
 
+/* Separator and producer name beside the role title: ToolRow's summary geometry,
+   so the two disclosure rows keep one 24px rhythm and one separator shape. */
+.sep {
+  flex: none;
+  width: 2px;
+  height: 2px;
+  margin: 0 8px;
+  border-radius: 1px;
+  background: var(--dsw-alias-label-caption);
+}
+
+.source {
+  flex: none;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 14px;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A notice's one-line account: the reason it rarely needs expanding. */
+.summary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 14px;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .body {
   box-sizing: border-box;
   width: calc(100% - 22px);
@@ -23,7 +57,6 @@
   border-radius: 8px;
   background: var(--dsw-alias-markdown-code-block);
   color: var(--dsw-alias-label-tertiary);
+  /* Figma 10:2482 code text: the form bodies inherit it from the scrollport. */
   font: 400 11px/16px var(--ds-font-family-code);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
 }

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

@@ -1,84 +1,70 @@
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 import type { ContextMessageNode } from '@deepseek-ai/dsh-client-runtime/client'
 import type { ChatViewSlotProps } from '../contract/slots.ts'
 import { IconBrowseOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
 import { DisclosureRow } from './DisclosureRow.tsx'
+import { contextBody } from './ContextBody.tsx'
 import css from './ContextInjectionRow.module.css'
 
-const MAX_CHARS = 20_000
-
-function inlineJson(payload: unknown): string {
-  const raw = JSON.stringify(payload)
-  let formatted = ''
-  let quoted = false
-  let escaped = false
-
-  for (let index = 0; index < raw.length; index++) {
-    const char = raw.charAt(index)
-    if (quoted) {
-      formatted += char
-      if (escaped) escaped = false
-      else if (char === '\\') escaped = true
-      else if (char === '"') quoted = false
-      continue
-    }
-    if (char === '"') {
-      quoted = true
-      formatted += char
-      continue
-    }
-    if (char === '{' || char === '[') {
-      formatted += char
-      const close = char === '{' ? '}' : ']'
-      if (raw[index + 1] !== close) formatted += ' '
-      continue
-    }
-    if (char === '}' || char === ']') {
-      const open = char === '}' ? '{' : '['
-      if (raw[index - 1] !== open) formatted += ' '
-      formatted += char
-      continue
-    }
-    formatted += char === ':' || char === ',' ? `${char} ` : char
-  }
-  return formatted
-}
-
 /** Props for the logged non-user message presentation. */
 export interface ContextInjectionRowProps {
   content: ContextMessageNode['content']
   source: ContextMessageNode['source']
+  /** Role and producer name projected from the durable source. */
+  provenance: ContextMessageNode['provenance']
+  /** Producer-declared information form; null renders the opaque body. */
+  form: ContextMessageNode['form']
   /** The owning view's locale seat, passed down as a plain prop. */
   t: ChatViewSlotProps['t']
 }
 
 /**
  * Render logged context with the Tool calls disclosure chrome from Figma.
- * @param props - Durable content and source provenance.
- * @returns A collapsed context row with a bounded JSON body.
+ *
+ * The header names the role the context plays and, beside it, the producer the
+ * durable source identifies, so a reader can tell an injected skill catalog
+ * from a workspace instruction file or a recalled session without expanding.
+ * The expanded body follows the producer-declared form; an absent or unknown
+ * form renders the opaque body.
+ * @param props - Durable content, its projected provenance and form, and the locale seat.
+ * @returns A collapsed context row with a bounded, form-specific body.
  */
-export function ContextInjectionRow({ content, source, t }: ContextInjectionRowProps) {
+export function ContextInjectionRow({ content, source, provenance, form, t }: ContextInjectionRowProps) {
   const [open, setOpen] = useState(false)
-  const body = useMemo(() => {
-    if (!open) return ''
-    const text = inlineJson({ content, source })
-    return text.length > MAX_CHARS
-      ? `${text.slice(0, MAX_CHARS)}\n${t('json.truncated', { total: text.length })}`
-      : text
-  }, [content, open, source, t])
+  // Resolved rather than declared: a form whose fields are unreadable renders
+  // the opaque body, and the marker must say what the row actually shows.
+  const { rendered, summary, body } = contextBody(form, { content, source, t })
 
   return (
     <DisclosureRow
       className={css.root}
       icon={<IconBrowseOutline16 size={14} />}
       chevronClassName={css.chevron}
-      title={t('message.contextInjection')}
+      title={t(provenance.role === 'recall' ? 'message.contextRecall' : 'message.contextInjection')}
+      collapsedContent={provenance.label === null ? undefined : (
+        /* ToolRow's separator shape: an aria-hidden dot, so the accessible name
+           stays the two readable parts and the two disclosure rows expose one
+           name shape. A source that names no producer drops the dot with it. */
+        <>
+          <span className={css.sep} aria-hidden />
+          <span className={css.source} data-context-source>{provenance.label}</span>
+          {summary !== null && (
+            <>
+              <span className={css.sep} aria-hidden />
+              <span className={css.summary} data-context-summary>{summary}</span>
+            </>
+          )}
+        </>
+      )}
+      keepContentWhenOpen
       open={open}
       expandable
       expandOnRowClick
       onToggle={() => { setOpen(value => !value) }}
     >
-      <pre className={css.body} data-context-injection-body>{body}</pre>
+      <div className={css.body} data-context-injection-body data-context-form={rendered ?? undefined}>
+        {body}
+      </div>
     </DisclosureRow>
   )
 }

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

@@ -8,6 +8,15 @@
   gap: 6px;
 }
 
+/* Steering caption above the bubble: mid-turn interjections carry the same
+   bubble as a turn-opening prompt, so the transcript names which one this is. */
+.steeringMark {
+  padding-right: 4px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  line-height: 16px;
+}
+
 .bubble {
   /* 525px cap inside the 736 column; percentage keeps narrow windows sane. */
   max-width: min(525px, 82%);

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

@@ -1,12 +1,13 @@
-// MessageItem: simple chat nodes — user bubbles
-// (right-aligned, with clock + copy / branch IconActions), pending steering
-// (copy only), context injection, compaction marker, retry disclosure, and
-// unknown-surface JSON rows.
+// MessageItem: simple chat nodes — user and consumed-steering bubbles
+// (right-aligned, with clock + copy / branch IconActions; steering adds the
+// interjection caption that names it), pending steering (caption + copy only),
+// context injection, compaction marker, retry disclosure, and unknown-surface
+// JSON rows.
 
 import { memo, useEffect, useMemo, useState } from 'react'
 import type { ReactNode } from 'react'
 import type {
-  CompactionSummaryNode, ContextMessageNode, ModelRetryNode,
+  CompactionSummaryNode, ContextMessageNode, ModelRetryNode, SteeringMessageNode,
   TurnErrorNode, UnknownSurfaceNode, UserMessageNode,
 } from '@deepseek-ai/dsh-client-runtime/client'
 import { JsonBlock, MessageText, StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
@@ -19,6 +20,7 @@ import css from './MessageItem.module.css'
 export interface MessageItemProps {
   node:
     | UserMessageNode
+    | SteeringMessageNode
     | ContextMessageNode
     | CompactionSummaryNode
     | ModelRetryNode
@@ -170,19 +172,22 @@ function projectUserText(text: string): ReactNode {
 
 /** Right-aligned bubble shared by user and steering rows. */
 function UserStyleBubble({
-  content, actions, pending = false, t,
+  content, actions, pending = false, steering = false, t,
 }: {
   content: readonly unknown[]
   /** Optional IconActions (or similar) below the bubble; receives the joined text. */
   actions?: (text: string) => ReactNode
   /** Whether this is the Host-authoritative pre-admission steering projection. */
   pending?: boolean
+  /** Marks the bubble as mid-turn steering rather than a turn-opening prompt. */
+  steering?: boolean
   t: ChatViewSlotProps['t']
 }): ReactNode {
   const { text, rest } = contentText(content)
   const truncated = (total: number): string => t('json.truncated', { total })
   return (
     <div className={css.userRow} data-pending-steering={pending || undefined} data-time-hover-root>
+      {steering && <span className={css.steeringMark} data-steering-mark>{t('message.steering')}</span>}
       <div className={css.bubble}>
         {projectUserText(text)}
         {rest.map((block, i) => <JsonBlock key={i} label={t('message.extraBlock')} payload={block} truncatedLabel={truncated} />)}
@@ -206,6 +211,7 @@ export function PendingSteeringBubble({ content, t }: {
     <UserStyleBubble
       content={content}
       pending
+      steering
       t={t}
       actions={text => (
         <MessageIconActions
@@ -226,9 +232,11 @@ export const MessageItem = memo(function MessageItem({
   const truncated = (total: number): string => t('json.truncated', { total })
   switch (node.kind) {
     case 'user':
+    case 'steering':
       return (
         <UserStyleBubble
           content={node.content}
+          steering={node.kind === 'steering'}
           t={t}
           actions={text => (
             <MessageIconActions
@@ -245,7 +253,13 @@ export const MessageItem = memo(function MessageItem({
       )
     case 'context':
       return (
-        <ContextInjectionRow content={node.content} source={node.source} t={t} />
+        <ContextInjectionRow
+          content={node.content}
+          source={node.source}
+          provenance={node.provenance}
+          form={node.form}
+          t={t}
+        />
       )
     case 'compaction':
       return <CompactionItem node={node} t={t} />

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

@@ -86,7 +86,7 @@ export function messageBranchSeqs(
       tail = candidate
       nodeIndex++
     }
-    if (tail?.kind === 'user'
+    if (tail?.kind === 'user' || tail?.kind === 'steering'
       || (tail?.kind === 'assistant' && tail.turn === turn && hasContentText(tail.blocks))) {
       result.add(tail.seq)
     }

packages/client/ui-conversation/src/client/locales.ts

@@ -66,6 +66,18 @@ export const zh = {
   'chat.toBottom': '回到底部',
   'message.extraBlock': '附加内容块',
   'message.contextInjection': '上下文注入',
+  'message.contextRecall': '跨会话召回',
+  'message.context.instructions.loaded': '已载入',
+  'message.context.instructions.added': '已新增',
+  'message.context.instructions.updated': '已更新',
+  'message.context.instructions.removed': '已移除',
+  'message.context.catalog.replaced': '替换目录',
+  'message.context.catalog.more': '…还有 {count} 条',
+  'message.context.snapshot.supersedes': '取代先前的快照',
+  'message.context.relay.from': '来自会话 {session}',
+  'message.context.recall.counts': '保留 {retained} 条 · 省略 {omitted} 条',
+  'message.context.recall.truncated': '已截断',
+  'message.steering': '插话',
   'message.compaction': '上下文已压缩',
   'message.compaction.expand': '点击查看压缩摘要',
   'message.compaction.unavailable': '压缩摘要不可用',
@@ -193,6 +205,18 @@ export const en = {
   'chat.toBottom': 'Back to bottom',
   'message.extraBlock': 'Extra content block',
   'message.contextInjection': 'Context injection',
+  'message.contextRecall': 'Session recall',
+  'message.context.instructions.loaded': 'loaded',
+  'message.context.instructions.added': 'added',
+  'message.context.instructions.updated': 'updated',
+  'message.context.instructions.removed': 'removed',
+  'message.context.catalog.replaced': 'Replacement catalog',
+  'message.context.catalog.more': '… {count} more',
+  'message.context.snapshot.supersedes': 'Supersedes earlier snapshots',
+  'message.context.relay.from': 'From session {session}',
+  'message.context.recall.counts': '{retained} kept · {omitted} omitted',
+  'message.context.recall.truncated': 'truncated',
+  'message.steering': 'Interjection',
   'message.compaction': 'Context compacted',
   'message.compaction.expand': 'View compaction summary',
   'message.compaction.unavailable': 'Compaction summary unavailable',