feat(web): split context injection into producer-declared forms

Injected context reached the transcript as one anonymous shape whose
expanded body was the whole message serialized as inline JSON, so the
escaping collapsed the only readable part — the model-facing prose —
into a single line.

`MessageSource` gains an optional producer-declared `form`, a small
semantic vocabulary of information shapes independent of `kind`: kind
says who produced the context, form says what shape it is, so several
producers may share one presentation. Two values ship.

`instructions` (workspace-context) lists the reconciled files above
their text and keeps the `<system-reminder>` framing verbatim, because
the framing is part of what the model read. `catalog` moves dsh-tool-skill
off the shared plugin kind onto a `skill-catalog` source carrying the
published name/description entries, and the body lists those instead of
re-parsing `<available_skills>` out of the prose. Catalog identity moves
with it: the republish digest now covers the durable entries, deleting
the text-slicing that recovered them from a logged message.

Everything else renders the opaque body — the model-facing text with its
real line breaks, then the remaining provenance as fields. That is the
documented default, not a leftover: a resumed, forked, or foreign log
must render whether or not its producer is mounted here, which is why
the classification lives in the durable source rather than a client-side
table keyed by producer.

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: f4cb4617f98a43c2a1789954eb794a1a0720be21
-README.zh.md: bf092073f59b971fc71de94106a5108cef86aada
+README.md: c5f655c671fd426a82b71d0c55b46f7060a9463a
+README.zh.md: 1a502c02b1dfa074cd691153e0b24f3abed0d33b

packages/client/ui-conversation/README.md

@@ -14,7 +14,7 @@ Approvals take over the composer through the chain this package declares: `Appro
 
 The session header declares and renders the session-scoped `'conversation.session.header.actions'` list beside the title, allowing feature plugins to contribute controls without entering the skeleton. The composer chain currency includes the current conversation `session`; ui-subagent selects one-shot or parent-unavailable addressed sessions for reason-specific read-only copy, while the ordinary InputBar keeps every addressed child Send-only because the continuation service exposes no public per-Activation cancellation operation and `session.cancel` would bypass its ownership.
 
-Logged non-user messages render as a default-collapsed disclosure whose header names the role the runtime projected for the message — `上下文注入` for an injection, `跨会话召回` for a recalled session — followed by the producer name that projection read out of the durable source, so a reader distinguishes a skill catalog from a workspace instruction file or a recalled session without expanding. A source that names no producer shows the role alone. The header shares the Tool calls geometry and interaction with `ToolRow` through the package-internal `DisclosureRow`, while retaining context semantics: the expanded body follows its content height up to a 141px scrolling cap, shows inline JSON for both `content` and `source`, and synthesizes no tool state, summary, or keyed toolview dispatch ([disclosure decision](../../../.agents/notes/implemented/feature/2026-07-30-web-context-injection-disclosure.md), [provenance decision](../../../.agents/notes/implemented/feature/2026-08-04-web-context-source-and-steer-marks.md)). A durable or pending steering bubble carries an `插话` / `Interjection` caption above it, the only thing distinguishing a mid-turn interjection from the turn-opening prompt that shares its bubble.
+Logged non-user messages render as a default-collapsed disclosure whose header names the role the runtime projected for the message — `上下文注入` for an injection, `跨会话召回` for a recalled session — followed by the producer name that projection read out of the durable source, so a reader distinguishes a skill catalog from a workspace instruction file or a recalled session without expanding. A source that names no producer shows the role alone. The header shares the Tool calls geometry and interaction with `ToolRow` through the package-internal `DisclosureRow`, while retaining context semantics: the expanded body follows its content height up to a 141px scrolling cap and synthesizes no tool state, summary, or keyed toolview dispatch ([disclosure decision](../../../.agents/notes/implemented/feature/2026-07-30-web-context-injection-disclosure.md), [provenance decision](../../../.agents/notes/implemented/feature/2026-08-04-web-context-source-and-steer-marks.md)). That body follows the form the producer declared on its durable source: `instructions` names the reconciled files above their text, `catalog` lists the entries the source recorded instead of the model-facing prose, and every other value — absent, unknown to this version, or carrying no usable fields — renders the opaque body, which shows the model-facing text with its real line breaks and the remaining provenance as fields. The opaque body is the documented default, not a leftover: a resumed, forked, or foreign log must render whether or not its producer is mounted here. A durable or pending steering bubble carries an `插话` / `Interjection` caption above it, the only thing distinguishing a mid-turn interjection from the turn-opening prompt that shares its bubble.
 
 A Think row stays collapsed by default and exposes live reasoning throughput without expanding the chain of thought: while its reasoning block is the streaming tail, the summary switches from the settled first line to the latest non-blank line and its one-line scrollport follows each delta to the inline end. Expanding the row removes the moving summary and leaves the full reasoning in ordinary page flow, so page reading never fights an internal follower; settlement restores the stable first-line summary at the left edge ([decision](../../../.agents/notes/implemented/feature/2026-08-02-web-thinking-tail-scroll.md)).
 

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

@@ -12,7 +12,7 @@
 
 会话页头会在标题旁声明并渲染 Session scope 的 `'conversation.session.header.actions'` 列表，使功能插件无需进入骨架即可贡献控件。编辑器链的 currency 包含当前对话 `session`；ui-subagent 会选取 one-shot 或 parent 不可用的已寻址会话，并按原因显示只读文案，而普通 InputBar 会让所有已寻址 child 仅保留 Send，因为继续执行服务不公开逐 Activation 取消操作，`session.cancel` 也会绕过其所有权。
 
-已记录的非用户消息渲染为默认折叠的展开项，标题栏先给出运行时为该消息投影出的角色——注入为 `上下文注入`，召回为 `跨会话召回`——其后是该投影从持久来源读出的生产者名称，因此读者无需展开即可区分 skill（技能）目录、工作区指令文件与被召回的会话。来源未提供生产者名称时只显示角色。标题栏通过包内部的 `DisclosureRow` 与 `ToolRow` 共享 Tool calls 的几何与交互，同时保留上下文语义：展开内容区的高度会随内容自适应，最大为 141px，超出后滚动，并以内联 JSON 展示 `content` 和 `source`，且不会合成工具状态、摘要或键控 toolview 分发（[展开项决策](../../../.agents/notes/implemented/feature/2026-07-30-web-context-injection-disclosure.md)、[来源决策](../../../.agents/notes/implemented/feature/2026-08-04-web-context-source-and-steer-marks.md)）。持久或待处理的 steering（中途引导）气泡上方带有 `插话` / `Interjection` 标注，这是把中途插话与共用同一气泡的开轮提示区分开的唯一标识。
+已记录的非用户消息渲染为默认折叠的展开项，标题栏先给出运行时为该消息投影出的角色——注入为 `上下文注入`，召回为 `跨会话召回`——其后是该投影从持久来源读出的生产者名称，因此读者无需展开即可区分 skill（技能）目录、工作区指令文件与被召回的会话。来源未提供生产者名称时只显示角色。标题栏通过包内部的 `DisclosureRow` 与 `ToolRow` 共享 Tool calls 的几何与交互，同时保留上下文语义：展开内容区的高度会随内容自适应，最大为 141px，超出后滚动，且不会合成工具状态、摘要或键控 toolview 分发（[展开项决策](../../../.agents/notes/implemented/feature/2026-07-30-web-context-injection-disclosure.md)、[来源决策](../../../.agents/notes/implemented/feature/2026-08-04-web-context-source-and-steer-marks.md)）。该内容区按生产方在持久来源上声明的形态渲染：`instructions` 在正文之上列出它对账过的文件，`catalog` 列出来源记录的条目而非面向模型的散文，其余取值——未声明、本版本不认识、或字段不可用——一律渲染 opaque 内容区，即按真实换行展示面向模型的文本，并把剩余来源信息列成字段。opaque 不是兜底剩余物而是有文档的默认：恢复的、fork 的、外部写入的日志，无论其生产方是否挂载在此处，都必须渲染得出来。持久或待处理的 steering（中途引导）气泡上方带有 `插话` / `Interjection` 标注，这是把中途插话与共用同一气泡的开轮提示区分开的唯一标识。
 
 Think 行默认保持折叠，并在不展开思维链的情况下暴露实时推理（reasoning）吞吐：当推理块是流式输出尾部时，摘要从结算后的首行切换到最新的非空行，其单行滚动区会随每个 delta 追到行内末端。展开该行会移除移动摘要，让完整推理进入普通页面流，因此页面阅读不会与内部跟随器争夺滚动；结算后恢复左对齐的稳定首行摘要（[决策](../../../.agents/notes/implemented/feature/2026-08-02-web-thinking-tail-scroll.md)）。
 

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

@@ -0,0 +1,96 @@
+/* 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: one row per published entry. */
+.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;
+}

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

@@ -0,0 +1,227 @@
+// 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 } 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
+
+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
+}
+
+/**
+ * Concatenated text of the content blocks, with the non-text blocks kept aside.
+ * Context is text in practice (every producer injects one text block), but the
+ * block union is merge-extensible, so an unknown block keeps its own fallback
+ * rather than vanishing.
+ */
+function partitionContent(content: ContextMessageNode['content']): { text: string; rest: unknown[] } {
+  const texts: string[] = []
+  const rest: unknown[] = []
+  for (const block of content) {
+    if (block.type === 'text') texts.push(block.text)
+    else rest.push(block)
+  }
+  return { text: texts.join('\n'), rest }
+}
+
+/** 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. */
+function fieldValue(value: unknown): string {
+  if (typeof value === 'string') return value
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value)
+  return JSON.stringify(value)
+}
+
+/**
+ * Provenance fields as a key/value list. `kind` is omitted because the row
+ * header already names the producer, and `form` because the presentation the
+ * reader is looking at IS that value.
+ */
+function SourceFields({ source }: { source: unknown }): ReactNode {
+  const record = asRecord(source)
+  if (record === null) return null
+  const rows = Object.entries(record).filter(([key]) => key !== 'kind' && key !== 'form')
+  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)}</dd>
+        </div>
+      ))}
+    </dl>
+  )
+}
+
+/**
+ * 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 {
+  const { text, rest } = partitionContent(content)
+  return (
+    <>
+      {text !== '' && <pre className={css.text} data-context-text>{boundedText(text, t)}</pre>}
+      {rest.map((block, index) => (
+        <JsonBlock
+          key={index}
+          label={t('message.unknownBlock')}
+          payload={block}
+          truncatedLabel={total => t('json.truncated', { total })}
+        />
+      ))}
+      <SourceFields source={source} />
+    </>
+  )
+}
+
+/** One reconciled instruction file, as the durable source records it. */
+interface InstructionChange {
+  action: string
+  path: string
+  digest?: string
+}
+
+/** Instruction changes read off the source; empty when the shape is unusable. */
+function instructionChanges(source: unknown): InstructionChange[] {
+  const record = asRecord(source)
+  const list = record === null ? undefined : record['changes']
+  if (!Array.isArray(list)) return []
+  const changes: InstructionChange[] = []
+  for (const entry of list) {
+    const change = asRecord(entry)
+    if (change === null) continue
+    const path = change['path']
+    if (typeof path !== 'string' || path === '') continue
+    const action = change['action']
+    const digest = change['digest']
+    changes.push({
+      action: typeof action === 'string' ? action : '',
+      path,
+      ...typeof digest === 'string' ? { digest } : {},
+    })
+  }
+  return changes
+}
+
+/**
+ * `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.
+ */
+export function InstructionsBody({ content, source, t }: {
+  content: ContextMessageNode['content']
+  source: unknown
+  t: Translate
+}): ReactNode {
+  const changes = instructionChanges(source)
+  const baseline = asRecord(source)?.['baseline'] === true
+  const { text, rest } = partitionContent(content)
+  return (
+    <>
+      {changes.length > 0 && (
+        <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(`message.context.instructions.${change.action === 'remove' ? 'removed' : baseline ? 'loaded' : 'updated'}`)}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+      {text !== '' && <pre className={css.text} data-context-text>{boundedText(text, t)}</pre>}
+      {rest.map((block, index) => (
+        <JsonBlock
+          key={index}
+          label={t('message.unknownBlock')}
+          payload={block}
+          truncatedLabel={total => t('json.truncated', { total })}
+        />
+      ))}
+    </>
+  )
+}
+
+/** One catalog entry, as the durable source records it. */
+interface CatalogEntry {
+  name: string
+  description: string
+}
+
+/** Catalog entries read off the source; empty when the shape is unusable. */
+function catalogEntries(source: unknown): CatalogEntry[] {
+  const record = asRecord(source)
+  const list = record === null ? undefined : record['entries']
+  if (!Array.isArray(list)) return []
+  const entries: CatalogEntry[] = []
+  for (const item of list) {
+    const entry = asRecord(item)
+    if (entry === null) continue
+    const name = entry['name']
+    if (typeof name !== 'string' || name === '') continue
+    const description = entry['description']
+    entries.push({ name, description: typeof description === 'string' ? description : '' })
+  }
+  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.
+ */
+export function CatalogBody({ content, source, t }: {
+  content: ContextMessageNode['content']
+  source: unknown
+  t: Translate
+}): ReactNode {
+  const entries = catalogEntries(source)
+  if (entries.length === 0) return <OpaqueBody content={content} source={source} t={t} />
+  return (
+    <ul className={css.entries} data-context-entries>
+      {entries.map(entry => (
+        <li key={entry.name} className={css.entry}>
+          <code className={css.entryName}>{entry.name}</code>
+          <span className={css.entryDescription}>{entry.description}</span>
+        </li>
+      ))}
+    </ul>
+  )
+}

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

@@ -45,7 +45,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,55 +1,19 @@
-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 { CatalogBody, InstructionsBody, OpaqueBody } 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']
 }
@@ -60,18 +24,13 @@ export interface ContextInjectionRowProps {
  * 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.
- * @param props - Durable content, its projected provenance, and the locale seat.
- * @returns A collapsed context row with a bounded JSON body.
+ * 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, provenance, 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])
 
   return (
     <DisclosureRow
@@ -94,7 +53,13 @@ export function ContextInjectionRow({ content, source, provenance, t }: ContextI
       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={form ?? undefined}>
+        {form === 'instructions'
+          ? <InstructionsBody content={content} source={source} t={t} />
+          : form === 'catalog'
+            ? <CatalogBody content={content} source={source} t={t} />
+            : <OpaqueBody content={content} source={source} t={t} />}
+      </div>
     </DisclosureRow>
   )
 }

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

@@ -257,6 +257,7 @@ export const MessageItem = memo(function MessageItem({
           content={node.content}
           source={node.source}
           provenance={node.provenance}
+          form={node.form}
           t={t}
         />
       )

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

@@ -55,6 +55,9 @@ export const zh = {
   'message.extraBlock': '附加内容块',
   'message.contextInjection': '上下文注入',
   'message.contextRecall': '跨会话召回',
+  'message.context.instructions.loaded': '已载入',
+  'message.context.instructions.updated': '已更新',
+  'message.context.instructions.removed': '已移除',
   'message.steering': '插话',
   'message.compaction': '上下文已压缩',
   'message.compaction.expand': '点击查看压缩摘要',
@@ -170,6 +173,9 @@ export const en = {
   'message.extraBlock': 'Extra content block',
   'message.contextInjection': 'Context injection',
   'message.contextRecall': 'Session recall',
+  'message.context.instructions.loaded': 'loaded',
+  'message.context.instructions.updated': 'updated',
+  'message.context.instructions.removed': 'removed',
   'message.steering': 'Interjection',
   'message.compaction': 'Context compacted',
   'message.compaction.expand': 'View compaction summary',

packages/client/ui-conversation/tests/chat-branch-tails.spec.tsx

@@ -227,14 +227,15 @@ describe('MessageItem arms', () => {
     expect(fork).toHaveBeenCalledWith(2)
   })
 
-  it('context uses the Tool calls disclosure chrome and keeps its JSON collapsed by default', () => {
+  it('context uses the Tool calls disclosure chrome and keeps its body collapsed by default', () => {
     const ctxView = render(
       <MessageItem t={t} node={{
         kind: 'context',
         seq: 3,
-        content: [{ type: 'text', text: 'x\n"y":,[{}]' }],
+        content: [{ type: 'text', text: 'line one\n\nline two' }],
         source: { kind: 'plugin', plugin: 'fixture', empty: {}, list: [] },
         provenance: { role: 'inject', label: 'fixture' },
+        form: null,
       } as never}
       />,
     )
@@ -245,29 +246,84 @@ describe('MessageItem arms', () => {
 
     fireEvent.click(disclosure)
     expect(disclosure.getAttribute('aria-expanded')).toBe('true')
-    expect(ctxView.container.querySelector('[data-context-injection-body]')?.textContent).toBe(
-      '{ "content": [ { "type": "text", "text": "x\\n\\"y\\":,[{}]" } ], '
-      + '"source": { "kind": "plugin", "plugin": "fixture", "empty": {}, "list": [] } }',
-    )
+    // An unknown form renders the opaque body: the model-facing text keeps its
+    // real line breaks instead of being escaped into one JSON line, and the
+    // remaining provenance follows it as fields.
+    expect(ctxView.container.querySelector('[data-context-text]')?.textContent)
+      .toBe('line one\n\nline two')
+    const fields = [...ctxView.container.querySelectorAll('[data-context-fields] dt')].map(node => node.textContent)
+    expect(fields).toEqual(['plugin', 'empty', 'list'])
 
     fireEvent.keyDown(disclosure, { key: ' ' })
     expect(disclosure.getAttribute('aria-expanded')).toBe('false')
   })
 
-  it('context preserves the bounded JSON truncation contract', () => {
+  it('the instructions form names the files it reconciled above their text', () => {
     const view = render(
       <MessageItem t={t} node={{
         kind: 'context',
         seq: 3,
-        content: [{ type: 'text', text: 'x'.repeat(21_000) }],
-        source: null,
-        provenance: { role: 'inject', label: null },
+        content: [{ type: 'text', text: '<system-reminder>\nInstructions from: AGENTS.md\n</system-reminder>' }],
+        source: {
+          kind: 'workspace-instructions',
+          form: 'instructions',
+          baseline: true,
+          changes: [
+            { action: 'set', scope: '.\u0000AGENTS.md', path: 'AGENTS.md', digest: 'abc' },
+            { action: 'remove', scope: 'sub\u0000AGENTS.md', path: 'sub/AGENTS.md' },
+          ],
+        },
+        provenance: { role: 'inject', label: 'AGENTS.md, sub/AGENTS.md' },
+        form: 'instructions',
       } as never}
       />,
     )
-    fireEvent.click(view.getByRole('button', { name: '上下文注入' }))
-    expect(view.container.querySelector('[data-context-injection-body]')?.textContent)
-      .toMatch(/… 已截断，共 \d+ 字符$/)
+    fireEvent.click(view.getByRole('button', { name: /^上下文注入\s*AGENTS\.md, sub\/AGENTS\.md$/ }))
+    const files = [...view.container.querySelectorAll('[data-context-files] li')].map(node => node.textContent)
+    expect(files).toEqual(['AGENTS.md已载入', 'sub/AGENTS.md已移除'])
+    // The `<system-reminder>` framing is part of what the model read, so the
+    // body keeps it verbatim rather than presenting a cleaned-up excerpt.
+    expect(view.container.querySelector('[data-context-text]')?.textContent)
+      .toContain('<system-reminder>')
+  })
+
+  it('the catalog form lists its durable entries instead of the model-facing prose', () => {
+    const view = render(
+      <MessageItem t={t} node={{
+        kind: 'context',
+        seq: 3,
+        content: [{ type: 'text', text: '<system-reminder>\n<available_skills>\n- `a`: A\n</available_skills>' }],
+        source: {
+          kind: 'skill-catalog',
+          form: 'catalog',
+          entries: [{ name: 'a-skill', description: 'Does A' }, { name: 'b-skill', description: 'Does B' }],
+        },
+        provenance: { role: 'inject', label: 'skill-catalog' },
+        form: 'catalog',
+      } as never}
+      />,
+    )
+    fireEvent.click(view.getByRole('button', { name: /^上下文注入\s*skill-catalog$/ }))
+    const entries = [...view.container.querySelectorAll('[data-context-entries] li')].map(node => node.textContent)
+    expect(entries).toEqual(['a-skillDoes A', 'b-skillDoes B'])
+    expect(view.container.querySelector('[data-context-text]')).toBeNull()
+  })
+
+  it('a catalog whose source carries no entries falls back to the opaque body', () => {
+    const view = render(
+      <MessageItem t={t} node={{
+        kind: 'context',
+        seq: 3,
+        content: [{ type: 'text', text: 'catalog prose' }],
+        source: { kind: 'skill-catalog', form: 'catalog', entries: [] },
+        provenance: { role: 'inject', label: 'skill-catalog' },
+        form: 'catalog',
+      } as never}
+      />,
+    )
+    fireEvent.click(view.getByRole('button', { name: /^上下文注入\s*skill-catalog$/ }))
+    expect(view.container.querySelector('[data-context-entries]')).toBeNull()
+    expect(view.container.querySelector('[data-context-text]')?.textContent).toBe('catalog prose')
   })
 
   it('a recalled session titles its row by role and names the sessions it read', () => {
@@ -278,6 +334,7 @@ describe('MessageItem arms', () => {
         content: [{ type: 'text', text: 'snapshot' }],
         source: { kind: 'session-reference', version: 1, references: [{ label: '重构 loader' }] },
         provenance: { role: 'recall', label: '重构 loader' },
+        form: null,
       } as never}
       />,
     )
@@ -293,6 +350,7 @@ describe('MessageItem arms', () => {
         content: [{ type: 'text', text: 'instructions' }],
         source: { kind: 'workspace-instructions', changes: [{ path: 'AGENTS.md' }] },
         provenance: { role: 'inject', label: 'AGENTS.md' },
+        form: null,
       } as never}
       />,
     )
@@ -307,6 +365,7 @@ describe('MessageItem arms', () => {
       <MessageItem t={t} node={{
         kind: 'context', seq: 3, content: [{ type: 'text', text: 'x' }], source: null,
         provenance: { role: 'inject', label: null },
+        form: null,
       } as never}
       />,
     )

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

@@ -452,6 +452,7 @@ describe('ChatView', () => {
     const context = {
       kind: 'context', seq: 4, time: 4_000, content: [], source: null,
       provenance: { role: 'inject', label: null },
+      form: null,
     } as const satisfies ConversationNode
     const h = makeHarness({ nodes: [user(1, 'try'), retryNode], running: true })
     const view = render(<h.ChatView {...h.props} />)