@deepseek-ai/dsh-client-ui-tool 0.1.2-alpha.5 → 0.1.3-alpha.2

package/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-tool/README.md
-README.md: ac2105c5932717bf58e7bba9268240765c4c3ae3
-README.zh.md: df9a8afe1096856afac6fbc7dfda88a6190d4ba8
+README.md: e0b49a3b582f5f1e6e9aa19e0b026dedb9ba2a18
+README.zh.md: 032f048f2501923c4c9f010b76afe27d98fe7889

package/README.md

@@ -39,11 +39,11 @@ ctx.slots.inject('tool.call.toolview', () =>
   }, BusinessToolRow))
 ```
 
-The owner payload is `ToolCallOwnerProps`: `callId`, `toolName`, the frozen `block`, optional `cwd` and `home`, and plain `openFile`/`inspect` callbacks. A Code Dispatch block retains its event's `parentCallId`; a root Session call has no such field, so descendants keep the generic flattened form without another placement flag. Path summaries relativize to the Session cwd first, then replace a leftover POSIX Host home with `~`; `filePath` and Host open keep the authored filesystem path. The registration receives the normal Session slot runtime share but no React node or Runtime service.
+The owner payload is `ToolCallOwnerProps`: `callId`, `toolName`, the frozen `block`, optional `cwd` and `home`, the session-authorized `loadImage` loader (for a view whose result carries durable images), and plain `openFile`/`inspect` callbacks. A Code Dispatch block retains its event's `parentCallId`; a root Session call has no such field, so descendants route through the same keyed dispatch — a registered view such as `read_image` renders its card there, and unregistered descendants keep the generic flattened form. Path summaries relativize to the Session cwd first, then replace a leftover POSIX Host home with `~`; `filePath` and Host open keep the authored filesystem path. The registration receives the normal Session slot runtime share but no React node or Runtime service.
 
 ### Built-in views
 
-This package owns the generic fallback and the built-in shell/pwsh, read, write/edit, running `str_replace_editor` `create`/`str_replace`, grep/glob, web, todo, question, and Code Dispatch presentations. Structured cards derive directly from first-party raw event fields; Host `presentCall` and `presentResult` values never enter the Client. Foreground one-shot shell results use terminal cards. Settled persistent-shell results use the expandable generic input/output card because reset and partial-output diagnostics do not always describe one process exit status; background acknowledgements remain collapsed. A successful question row pairs call questions with result answers by their stable ids and shows readable question/answer lines when expanded. A cancelled or interrupted row shows its verdict and original questions without inventing answers. Unsupported, malformed, or ambiguous inputs fall back to flattened Tool input/result text. `ui-skill` demonstrates a business-owned registration for `skill`.
+This package owns the generic fallback and the built-in shell/pwsh, read, read_image, write/edit, running `str_replace_editor` `create`/`str_replace`, grep/glob, web, todo, question, and Code Dispatch presentations. Structured cards derive directly from first-party raw event fields; Host `presentCall` and `presentResult` values never enter the Client. Running and settled foreground standard `bash`/`pwsh` and `terminal_send` calls use terminal cards at the root and in Code Dispatch children, subject to the same argument, result, and error checks. Persistent `bash`/`pwsh` calls use terminal cards only while running. Shell output ending in a recognized spill-policy notice uses expandable generic output in shell rows and generic output in Details; a displaced or omitted exit marker cannot establish success. Settled persistent-shell results stay generic because reset and partial-output diagnostics do not always describe one process exit status; root persistent results are expandable, while background acknowledgements remain collapsed. A successful question row pairs call questions with result answers by their stable ids and shows readable question/answer lines when expanded. A cancelled or interrupted row shows its verdict and original questions without inventing answers. Unsupported, malformed, or ambiguous inputs fall back to flattened Tool input/result text. `ui-skill` demonstrates a business-owned registration for `skill`.
 
 -----
 
@@ -61,8 +61,10 @@ The package realizes one dispatch rule: atomic Tool views are keyed by wire Tool
 
 ### Details and cards
 
-The package fills `conversation.details.tool` with `ToolDetails`. Row and Details renderers share one pure card model for each terminal, read, diff, search, and web card. These models validate raw call arguments, result content, failure state, persisted metadata, Code Dispatch `parentCallId`, and Session path facts. Generic rows retain the original `argsRaw` reference and format their input body only while it is expanded; structured cards skip generic-body formatting. Unsupported or malformed inputs use flattened Tool result text. Card-specific limits and fallback rules remain in the owning [terminal](../../../.agents/notes/implemented/feature/2026-07-28-web-terminal-card.md), [diff](../../../.agents/notes/implemented/feature/2026-07-30-web-diff-card.md), [read](../../../.agents/notes/implemented/feature/2026-07-30-web-read-card-frontend.md), [search](../../../.agents/notes/implemented/feature/2026-07-30-web-search-card.md), [web](../../../.agents/notes/implemented/feature/2026-07-30-web-result-card-frontend.md), and [question](../../../.agents/notes/implemented/feature/2026-07-29-ask-question-web-presentation.md) notes.
 
+The package fills `conversation.details.tool` with `ToolDetails`. Row and Details renderers share one pure card model for each terminal, read, diff, search, and web card; the image card is row-only because its gallery renders through the tool-owned `tool.call.images` slot the details panel does not declare. These models validate raw call arguments, result content, failure state, persisted metadata, and Session path facts. Diff, read, search, and web models also reject Code Dispatch children; terminal eligibility does not depend on `parentCallId`. Unsupported or malformed inputs use flattened Tool result text. Card-specific limits and fallback rules for the terminal, diff, read, search, and web cards remain in [the ui-primitives README](../ui-primitives/README.md); the image card's model in this package carries its own fallback rules.
+
+The terminal model uses `hasSpillNotice` from the browser-safe `@deepseek-ai/dsh-spill-policy/notice` entry, not an independent UI pattern. The [spill-policy README](../../spill/spill-policy/README.md#shared-notice-ownership) owns notice formatting and recognition. This check conservatively selects generic output; matching text cannot authenticate its source, and replay leaves recorded result bytes untouched.
 </details>
 
 -----

package/README.zh.md

@@ -39,11 +39,11 @@ ctx.slots.inject('tool.call.toolview', () =>
   }, BusinessToolRow))
 ```
 
-owner 载荷为 `ToolCallOwnerProps`：`callId`、`toolName`、冻结的 `block`、可选 `cwd` 与 `home`，以及普通的 `openFile`/`inspect` 回调。Code Dispatch block 保留事件的 `parentCallId`；root Session call 没有该字段，因此 descendant 无需另一项 placement 标志即可保持 generic 压平形态。路径摘要先相对 Session cwd 缩短，再把剩余的 POSIX Host home 写成 `~`；`filePath` 与 Host 打开仍使用作者给出的文件系统路径。注册项会收到常规 Session slot runtime share，但不会收到 React node 或 runtime service。
+owner 载荷为 `ToolCallOwnerProps`：`callId`、`toolName`、冻结的 `block`、可选 `cwd` 与 `home`、会话授权的 `loadImage` loader（供结果携带持久图像的视图使用），以及普通的 `openFile`/`inspect` 回调。Code Dispatch block 保留事件的 `parentCallId`；root Session call 没有该字段，因此 descendant 走同一条按 key 分发——注册过视图的调用（如 `read_image`）在嵌套处也渲染其卡片，未注册的 descendant 保持 generic 压平形式。路径摘要先相对 Session cwd 缩短，再把剩余的 POSIX Host home 写成 `~`；`filePath` 与 Host 打开仍使用作者给出的文件系统路径。注册项会收到常规 Session slot runtime share，但不会收到 React node 或 runtime service。
 
 ### 内置视图
 
-本包拥有 generic fallback，以及 shell/pwsh、read、write/edit、running `str_replace_editor` `create`／`str_replace`、grep/glob、web、todo、question 与 Code Dispatch 的内置展示。结构化卡片直接从第一方原始 event 字段派生；Host `presentCall` 与 `presentResult` 值不会进入 Client。前台一次性 shell 结果使用 terminal 卡片。已完成的持久 shell 结果使用可展开的 generic 输入／输出卡片，因为 reset 与部分输出诊断不一定描述单个进程的退出状态；后台启动回执保持折叠。成功的问题行按稳定 id 配对调用中的问题与结果中的回答，展开后显示可读的问答行。已取消或已中断的问题行显示其裁决与原始问题，不虚构回答。不受支持、格式错误或含糊的输入回退为压平的工具输入／结果文本。`ui-skill` 展示了业务包自行拥有的 `skill` 注册项。
+本包拥有 generic fallback，以及 shell/pwsh、read、read_image、write/edit、running `str_replace_editor` `create`／`str_replace`、grep/glob、web、todo、question 与 Code Dispatch 的内置展示。结构化卡片直接从第一方原始 event 字段派生；Host `presentCall` 与 `presentResult` 值不会进入 Client。运行中与已完成的前台标准 `bash`/`pwsh` 和 `terminal_send` 调用，无论位于根还是 Code Dispatch 子调用中，都在通过相同的参数、结果和错误检查后使用 terminal 卡片。持久 `bash`/`pwsh` 调用仅在运行中使用 terminal 卡片。以已识别的 spill 策略提示结尾的 shell 输出，在 shell 行中使用可展开的 generic 输出，在 Details 中使用 generic 输出；位置被改变或被省略的退出标记无法证明成功。已完成的持久 shell 结果保持 generic 展示，因为 reset 与部分输出诊断不一定描述单个进程的退出状态；根调用的持久 shell 结果可展开，后台启动回执则保持折叠。成功的问题行按稳定 id 配对调用中的问题与结果中的回答，展开后显示可读的问答行。已取消或已中断的问题行显示其裁决与原始问题，不虚构回答。不受支持、格式错误或含糊的输入回退为压平的工具输入／结果文本。`ui-skill` 展示了业务包自行拥有的 `skill` 注册项。
 
 -----
 
@@ -61,8 +61,10 @@ owner 载荷为 `ToolCallOwnerProps`：`callId`、`toolName`、冻结的 `block`
 
 ### 详情与卡片
 
-本包通过 `ToolDetails` 填充 `conversation.details.tool`。行 renderer 与 Details renderer 分别为 terminal、read、diff、search 和 web 卡片复用同一个纯 card model。这些 model 校验原始调用参数、结果内容、失败状态、持久 metadata、Code Dispatch `parentCallId` 与 Session 路径事实。Generic row 保留原始 `argsRaw` 引用，只在展开期间格式化 input body；结构化卡片跳过 generic body 格式化。不受支持或格式错误的输入使用压平的工具结果文本。各类卡片的上限与 fallback 规则仍由对应的 [terminal](../../../.agents/notes/implemented/feature/2026-07-28-web-terminal-card.zh.md)、[diff](../../../.agents/notes/implemented/feature/2026-07-30-web-diff-card.zh.md)、[read](../../../.agents/notes/implemented/feature/2026-07-30-web-read-card-frontend.zh.md)、[search](../../../.agents/notes/implemented/feature/2026-07-30-web-search-card.zh.md)、[web](../../../.agents/notes/implemented/feature/2026-07-30-web-result-card-frontend.zh.md) 与 [question](../../../.agents/notes/implemented/feature/2026-07-29-ask-question-web-presentation.zh.md) 笔记负责。
 
+本包通过 `ToolDetails` 填充 `conversation.details.tool`。行 renderer 与 Details renderer 分别为 terminal、read、diff、search 和 web 卡片复用同一个纯 card model；image 卡片仅属于行，因为其图库经由工具自有 `tool.call.images` 槽位渲染，而 details 面板不声明该槽位。这些 model 校验原始调用参数、结果内容、失败状态、持久 metadata 与 Session 路径事实。diff、read、search 和 web model 还会拒绝 Code Dispatch 子调用；terminal 适用性不依赖 `parentCallId`。不受支持或格式错误的输入使用压平的工具结果文本。terminal、diff、read、search 与 web 卡片的上限与 fallback 规则仍由 [ui-primitives README](../ui-primitives/README.zh.md) 负责；image 卡片的 fallback 规则由本包内的 card model 自行承载。
+
+terminal model 使用浏览器安全入口 `@deepseek-ai/dsh-spill-policy/notice` 的 `hasSpillNotice`，而非独立的 UI 匹配规则。[spill-policy README](../../spill/spill-policy/README.zh.md#shared-notice-ownership) 负责通知的格式化与识别。该检查保守地选择通用输出；匹配文本不能认证其来源，回放也不改变已记录的结果字节。
 </details>
 
 -----

package/lib/client.js

@@ -25,7 +25,8 @@ window.__ModuleLoader__.load({
 		function resolveWorkspacePath(cwd, path) {
 			if (path.startsWith("/") || isWindowsStylePath(path)) return path;
 			if (cwd === void 0 || cwd === "") return path;
-			return `${cwd.replace(/[/\\]+$/, "")}/${path.replace(/^[/\\]+/, "")}`;
+			const separator = isWindowsStylePath(cwd) && cwd.includes("\\") ? "\\" : "/";
+			return `${cwd.replace(/[/\\]+$/, "")}${separator}${path.replace(/^[/\\]+/, "")}`;
 		}
 		/**
 		* Abbreviate a POSIX home directory for display.
@@ -67,6 +68,7 @@ window.__ModuleLoader__.load({
 			bash: "bash",
 			pwsh: "bash",
 			read: "read",
+			read_image: "read",
 			web_fetch: "read",
 			web_search: "search",
 			grep: "search",
@@ -87,7 +89,8 @@ window.__ModuleLoader__.load({
 			cordis_run: "tool.title.runCordis",
 			cordis_stop: "tool.title.stopCordis",
 			cordis_undefine: "tool.title.removeCordis",
-			pwsh: "tool.title.pwsh"
+			pwsh: "tool.title.pwsh",
+			read_image: "tool.title.readImage"
 		};
 		/**
 		* Classify a tool name into its row variant.
@@ -555,6 +558,65 @@ window.__ModuleLoader__.load({
 				}
 			};
 		}
+		new TextEncoder();
+		new TextDecoder();
+		/**
+		* Standardized, false-precision-safe wording for one {@link Omitted} value —
+		* the "may standardize omission wording" half the library owns. `exact` prints
+		* the count (`Omitted 3 items`); `unknown` prints NO count because the caller
+		* did not provide one. `none` is the empty string.
+		*
+		* @param omitted The omission metadata from a retainer result.
+		* @param unit The noun for the omitted quantity (`items`, `bytes`, `chars`, `lines`).
+		* @returns A neutral clause (no trailing space), or `''` when nothing was omitted.
+		*/
+		function describeOmitted(omitted, unit) {
+			switch (omitted.kind) {
+				case "none": return "";
+				case "exact": return `Omitted ${omitted.count} ${unit}.`;
+				case "unknown": return `More ${unit} were omitted.`;
+			}
+		}
+		//#endregion
+		//#region ../../spill/spill-policy/src/notice.ts
+		/** Browser-safe formatting and recognition of persisted spill-policy notices. */
+		const OPEN = "(";
+		const CLOSE = ")";
+		const LOCATION = " Full formatted result stored at: ";
+		const GUIDANCE_SEPARATOR = ". ";
+		const SEPARATOR = "\n\n";
+		const EXACT_OMISSION = describeOmitted({
+			kind: "exact",
+			count: 0
+		}, "bytes");
+		const COUNT_OFFSET = EXACT_OMISSION.indexOf("0");
+		const COUNT_SUFFIX = EXACT_OMISSION.slice(COUNT_OFFSET + 1);
+		function isOmission(text) {
+			if (text === describeOmitted({ kind: "none" }, "bytes") || text === describeOmitted({ kind: "unknown" }, "bytes")) return true;
+			const count = Number(text.slice(COUNT_OFFSET, text.length - COUNT_SUFFIX.length));
+			return Number.isSafeInteger(count) && count >= 0 && text === describeOmitted({
+				kind: "exact",
+				count
+			}, "bytes");
+		}
+		/**
+		* Recognize a final spill-policy notice in persisted text, including notice-only output.
+		* This identifies the text convention, not authenticated provenance of tool output.
+		* @param text - complete recorded text result.
+		* @returns whether a complete notice occupies the end of the result.
+		*/
+		function hasSpillNotice(text) {
+			if (!text.endsWith(CLOSE)) return false;
+			let start = 0;
+			while (true) {
+				const next = text.indexOf(`${SEPARATOR}${OPEN}`, start);
+				const candidate = text.slice(start, next < 0 ? -1 : next);
+				const location = candidate.indexOf(LOCATION, 1);
+				if (candidate.startsWith(OPEN) && location >= 0 && isOmission(candidate.slice(1, location))) return text.indexOf(GUIDANCE_SEPARATOR, start + location + 34) >= 0;
+				if (next < 0) return false;
+				start = next + 2;
+			}
+		}
 		//#endregion
 		//#region lib/types/client/tool/models/terminal-card-model.js
 		/**
@@ -720,6 +782,20 @@ window.__ModuleLoader__.load({
 			if (parsed === null) return false;
 			return shellCall(parsed.name, parsed.args)?.persistent === true;
 		}
+		/**
+		* Identify a settled foreground shell preview whose spill footer can hide the exit marker.
+		* @param block - running or settled Tool block.
+		* @returns whether the shell output must remain generic without an inferred exit status.
+		*/
+		function isSpilledShellCall(block) {
+			if (!("kind" in block)) return false;
+			const parsed = parsedToolCall(block);
+			if (parsed === null) return false;
+			const call = shellCall(parsed.name, parsed.args);
+			if (call === null || call.background) return false;
+			const output = singleResultText(block);
+			return output !== void 0 && hasSpillNotice(output);
+		}
 		function terminalSendCall(name, args) {
 			if (name !== "terminal_send") return null;
 			const { sessionId, text, submit, run_in_background: background } = args;
@@ -756,17 +832,16 @@ window.__ModuleLoader__.load({
 			};
 		}
 		/**
-		* Derive terminal props for supported root shell and terminal-send calls.
-		* Standard shell results parse their final status marker; persistent shell
-		* results, background calls, errors, malformed input, or child dispatches use
-		* the generic path. {@link isSettledPersistentShellCall} lets that generic
+		* Derive terminal props for supported shell and terminal-send calls, including
+		* nested Code Dispatch calls. Standard shell results parse their final status
+		* marker; persistent shell results, spill previews, background calls, errors,
+		* and malformed input use the generic path. {@link isSettledPersistentShellCall} lets that generic
 		* persistent result remain expandable without inventing one process status.
 		* @param block - running or settled Tool block.
 		* @param sessionCwd - session workspace root used to resolve workdir.
 		* @returns locale-neutral terminal-card data, or null for the generic path.
 		*/
 		function terminalCardModel(block, sessionCwd) {
-			if (block.parentCallId !== void 0) return null;
 			const parsed = parsedToolCall(block);
 			if (parsed === null) return null;
 			const call = shellCall(parsed.name, parsed.args) ?? terminalSendCall(parsed.name, parsed.args);
@@ -791,7 +866,7 @@ window.__ModuleLoader__.load({
 					running: true
 				}
 			};
-			if (block.isError || call.kind === "shell" && call.persistent) return null;
+			if (block.isError || call.kind === "shell" && call.persistent || isSpilledShellCall(block)) return null;
 			const output = singleResultText(block);
 			if (output === void 0) return null;
 			const status = call.kind === "terminal-send" ? { output } : parseExitStatus(output);
@@ -1042,7 +1117,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-css:/home/runner/work/deepseek-harness/deepseek-harness/packages/client/ui-tool/src/client/tool/components/ToolRow.module.css.mjs
-		const css$3 = ".o3BgMG_root{flex-direction:column;display:flex}.o3BgMG_row{position:relative;overflow:hidden}.o3BgMG_root[data-state=running] .o3BgMG_row:after{content:\"\";background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--dsw-alias-bg-base) 60%, transparent) 55%, transparent 100%);pointer-events:none;width:300px;animation:2.6s ease-out infinite o3BgMG_dsh-tool-row-sweep;position:absolute;top:0;bottom:0;left:0}@keyframes o3BgMG_dsh-tool-row-sweep{0%{left:-300px}90%,to{left:100%}}.o3BgMG_leading{flex-shrink:0}.o3BgMG_root[data-tool^=cordis_] .o3BgMG_leading,.o3BgMG_root[data-tool^=cordis_] .o3BgMG_title{color:var(--dsw-alias-state-business-primary)}.o3BgMG_root[data-tool^=cordis_] .o3BgMG_title{font-weight:500}.o3BgMG_root[data-tool^=cordis_] .o3BgMG_sep{background:var(--dsw-alias-state-business-primary)}.o3BgMG_chevron{color:var(--dsw-alias-label-secondary)}.o3BgMG_title{font-weight:400}.o3BgMG_sep{background:var(--dsw-alias-label-caption);border-radius:1px;flex:none;width:2px;height:2px;margin:0 8px}.o3BgMG_summary{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--dsh-content-font-size-secondary,13px);line-height:calc(24px + var(--dsh-content-font-delta,0px));color:var(--dsw-alias-label-tertiary);flex:auto;overflow:hidden}.o3BgMG_summarySuffix{white-space:nowrap;font-size:var(--dsh-content-font-size-secondary,13px);line-height:calc(24px + var(--dsh-content-font-delta,0px));color:var(--dsw-alias-label-tertiary);flex:none;margin-left:4px}.o3BgMG_diffStat{font-family:var(--ds-font-family-code);font-size:calc(var(--dsh-content-font-size-secondary,13px) - 2px);color:var(--dsw-alias-label-caption);margin-left:10px;transform:translateY(.5px)}.o3BgMG_fileLink{text-overflow:ellipsis;white-space:nowrap;min-width:0;font:inherit;text-align:left;font-size:var(--dsh-content-font-size-secondary,13px);line-height:calc(24px + var(--dsh-content-font-delta,0px));color:var(--dsw-alias-label-secondary);text-decoration:underline dotted;text-decoration-color:var(--dsw-alias-label-tertiary);text-underline-offset:3px;cursor:pointer;background:0 0;border:none;flex:0 auto;margin:0;padding:0;text-decoration-thickness:1px;overflow:hidden}.o3BgMG_fileLink:hover{color:var(--dsw-alias-label-primary);text-decoration-color:currentColor}.o3BgMG_errorSummary{color:var(--dsw-alias-state-error-primary)}.o3BgMG_bodyWrap{flex-direction:column;display:flex}.o3BgMG_inspectButton{border:.5px solid var(--dsw-alias-border-l3);corner-shape:round;background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-secondary);cursor:pointer;opacity:0;border-radius:999px;align-self:flex-start;align-items:center;gap:4px;margin:4px 0 2px 4px;padding:2px 8px;font-size:11px;line-height:16px;transition:opacity .1s;display:inline-flex}.o3BgMG_root:hover .o3BgMG_inspectButton,.o3BgMG_inspectButton:focus-visible{opacity:1}.o3BgMG_inspectButton:hover{background:var(--dsw-alias-interactive-bg-hover-solid);color:var(--dsw-alias-label-primary)}.o3BgMG_bodyScroll{max-height:260px;overflow-y:auto}.o3BgMG_ioCard{border:.5px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-markdown-code-block);font:var(--dsw-font-markdown-code-block-small);border-radius:12px;flex-direction:column;margin:4px 0 4px 4px;display:flex}.o3BgMG_ioSection{grid-template-columns:max-content 1fr;align-items:baseline;column-gap:14px;max-height:150px;padding:12px 16px;display:grid;overflow-y:auto}.o3BgMG_ioSection::-webkit-scrollbar-thumb{background-clip:padding-box;border:2px solid #0000;border-radius:6px}.o3BgMG_ioSection::-webkit-scrollbar-track{margin:6px 0}.o3BgMG_ioLabel{color:var(--dsw-alias-label-caption);align-self:start;position:sticky;top:0}.o3BgMG_ioDivider{background:var(--dsw-alias-border-l2);flex:none;height:.5px}.o3BgMG_ioText{white-space:pre-wrap;word-break:break-word;min-width:0;color:var(--dsw-alias-label-secondary)}.o3BgMG_ioText[data-error]{color:var(--dsw-alias-state-error-primary)}.o3BgMG_codeBody,.o3BgMG_terminalBody,.o3BgMG_diffBody,.o3BgMG_readBody,.o3BgMG_searchBody,.o3BgMG_webBody{margin:4px 0 4px 4px}.o3BgMG_searchRecovery{white-space:pre-wrap;overflow-wrap:anywhere;font:var(--dsw-font-xs-13);color:var(--dsw-alias-label-tertiary);margin:4px 0 4px 4px}.o3BgMG_codeBody{--dsl-code-block-content-font:var(--dsw-font-markdown-code-block-small)}.o3BgMG_terminalBody{--dsl-terminal-font:var(--dsw-font-markdown-code-block-small);--dsl-terminal-line-height:18px;--dsl-terminal-output-max-height:224px;border:.5px solid var(--dsw-alias-border-l1)}.o3BgMG_visuallyHidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}";
+		const css$3 = ".o3BgMG_root{flex-direction:column;display:flex}.o3BgMG_row{position:relative;overflow:hidden}.o3BgMG_root[data-state=running] .o3BgMG_row:after{content:\"\";background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--dsw-alias-bg-base) 60%, transparent) 55%, transparent 100%);pointer-events:none;width:300px;animation:2.6s ease-out infinite o3BgMG_dsh-tool-row-sweep;position:absolute;top:0;bottom:0;left:0}@keyframes o3BgMG_dsh-tool-row-sweep{0%{left:-300px}90%,to{left:100%}}.o3BgMG_leading{flex-shrink:0}.o3BgMG_root[data-tool^=cordis_] .o3BgMG_leading,.o3BgMG_root[data-tool^=cordis_] .o3BgMG_title{color:var(--dsw-alias-state-business-primary)}.o3BgMG_root[data-tool^=cordis_] .o3BgMG_title{font-weight:500}.o3BgMG_root[data-tool^=cordis_] .o3BgMG_sep{background:var(--dsw-alias-state-business-primary)}.o3BgMG_chevron{color:var(--dsw-alias-label-secondary)}.o3BgMG_title{font-weight:400}.o3BgMG_sep{background:var(--dsw-alias-label-caption);border-radius:1px;flex:none;width:2px;height:2px;margin:0 8px}.o3BgMG_summary{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--dsh-content-font-size-secondary,13px);line-height:calc(24px + var(--dsh-content-font-delta,0px));color:var(--dsw-alias-label-tertiary);flex:auto;overflow:hidden}.o3BgMG_summarySuffix{white-space:nowrap;font-size:var(--dsh-content-font-size-secondary,13px);line-height:calc(24px + var(--dsh-content-font-delta,0px));color:var(--dsw-alias-label-tertiary);flex:none;margin-left:4px}.o3BgMG_diffStat{font-family:var(--ds-font-family-code);font-size:calc(var(--dsh-content-font-size-secondary,13px) - 2px);color:var(--dsw-alias-label-caption);margin-left:10px;transform:translateY(.5px)}.o3BgMG_fileLink{text-overflow:ellipsis;white-space:nowrap;min-width:0;font:inherit;text-align:left;font-size:var(--dsh-content-font-size-secondary,13px);line-height:calc(24px + var(--dsh-content-font-delta,0px));color:var(--dsw-alias-label-secondary);text-decoration:underline dotted;text-decoration-color:var(--dsw-alias-label-tertiary);text-underline-offset:3px;cursor:pointer;background:0 0;border:none;flex:0 auto;margin:0;padding:0;text-decoration-thickness:1px;overflow:hidden}.o3BgMG_fileLink:hover{color:var(--dsw-alias-label-primary);text-decoration-color:currentColor}.o3BgMG_errorSummary{color:var(--dsw-alias-state-error-primary)}.o3BgMG_bodyWrap{flex-direction:column;display:flex}.o3BgMG_inspectButton{border:.5px solid var(--dsw-alias-border-l3);corner-shape:round;background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-secondary);cursor:pointer;opacity:0;border-radius:999px;align-self:flex-start;align-items:center;gap:4px;margin:4px 0 2px 4px;padding:2px 8px;font-size:11px;line-height:16px;transition:opacity .1s;display:inline-flex}.o3BgMG_root:hover .o3BgMG_inspectButton,.o3BgMG_inspectButton:focus-visible{opacity:1}.o3BgMG_inspectButton:hover{background:var(--dsw-alias-interactive-bg-hover-solid);color:var(--dsw-alias-label-primary)}.o3BgMG_bodyScroll{max-height:260px;overflow-y:auto}.o3BgMG_ioCard{border:.5px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-markdown-code-block);font:var(--dsw-font-markdown-code-block-small);border-radius:12px;flex-direction:column;margin:4px 0 4px 4px;display:flex}.o3BgMG_ioSection{grid-template-columns:max-content 1fr;align-items:baseline;column-gap:14px;max-height:150px;padding:12px 16px;display:grid;overflow-y:auto}.o3BgMG_ioSection::-webkit-scrollbar-thumb{background-clip:padding-box;border:2px solid #0000;border-radius:6px}.o3BgMG_ioSection::-webkit-scrollbar-track{margin:6px 0}.o3BgMG_ioLabel{color:var(--dsw-alias-label-caption);align-self:start;position:sticky;top:0}.o3BgMG_ioDivider{background:var(--dsw-alias-border-l2);flex:none;height:.5px}.o3BgMG_ioText{white-space:pre-wrap;word-break:break-word;min-width:0;color:var(--dsw-alias-label-secondary)}.o3BgMG_ioText[data-error]{color:var(--dsw-alias-state-error-primary)}.o3BgMG_codeBody,.o3BgMG_terminalBody,.o3BgMG_diffBody,.o3BgMG_readBody,.o3BgMG_imageBody,.o3BgMG_searchBody,.o3BgMG_webBody{margin:4px 0 4px 4px}.o3BgMG_searchRecovery{white-space:pre-wrap;overflow-wrap:anywhere;font:var(--dsw-font-xs-13);color:var(--dsw-alias-label-tertiary);margin:4px 0 4px 4px}.o3BgMG_imageLabel{overflow-wrap:anywhere;font:var(--dsw-font-sm-13);color:var(--dsw-alias-label-secondary);margin-bottom:4px}.o3BgMG_imageMeta{white-space:pre-wrap;overflow-wrap:anywhere;font:var(--dsw-font-xs-13);color:var(--dsw-alias-label-tertiary)}.o3BgMG_codeBody{--dsl-code-block-content-font:var(--dsw-font-markdown-code-block-small)}.o3BgMG_terminalBody{--dsl-terminal-font:var(--dsw-font-markdown-code-block-small);--dsl-terminal-line-height:18px;--dsl-terminal-output-max-height:224px;border:.5px solid var(--dsw-alias-border-l1)}.o3BgMG_visuallyHidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}";
 		const tagId$3 = "@deepseek-ai/dsh-client-ui-tool/ToolRow.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$3) + "]") === null) {
 			const tag = document.createElement("style");
@@ -1061,6 +1136,9 @@ window.__ModuleLoader__.load({
 			"dsh-tool-row-sweep": "o3BgMG_dsh-tool-row-sweep",
 			"errorSummary": "o3BgMG_errorSummary",
 			"fileLink": "o3BgMG_fileLink",
+			"imageBody": "o3BgMG_imageBody",
+			"imageLabel": "o3BgMG_imageLabel",
+			"imageMeta": "o3BgMG_imageMeta",
 			"inspectButton": "o3BgMG_inspectButton",
 			"ioCard": "o3BgMG_ioCard",
 			"ioDivider": "o3BgMG_ioDivider",
@@ -1102,7 +1180,7 @@ window.__ModuleLoader__.load({
 				default: return null;
 			}
 		}
-		function ToolRow({ t, variant, toolName, icon, title, summary, summarySuffix, bodyRaw, output, askQuestion, errorSummary, terminal, diff, read, search, web, state, filePath, onOpenFile, inspect }) {
+		function ToolRow({ t, variant, toolName, icon, title, summary, summarySuffix, bodyRaw, output, askQuestion, errorSummary, terminal, diff, read, image, renderSlot, loadImage, search, web, state, filePath, onOpenFile, inspect }) {
 			const [expanded, setExpanded] = (0, react.useState)(false);
 			const terminalLabels = (0, react.useMemo)(() => terminalBlockLabels(t), [t]);
 			const diffLabels = (0, react.useMemo)(() => diffBlockLabels(t), [t]);
@@ -1112,11 +1190,12 @@ window.__ModuleLoader__.load({
 			const terminalBody = terminal === void 0 || terminal === null ? null : localizeTerminalCardModel(terminal, t);
 			const diffBody = diff ?? null;
 			const readBody = read ?? null;
+			const imageBody = image !== void 0 && image !== null && renderSlot !== void 0 && loadImage !== void 0 ? image : null;
 			const searchBody = search ?? null;
 			const webBody = web ?? null;
 			const askQuestionBody = askQuestion ?? null;
 			const outputText = output ?? null;
-			const card = askQuestionBody ?? terminalBody ?? diffBody ?? readBody ?? searchBody ?? webBody;
+			const card = askQuestionBody ?? terminalBody ?? diffBody ?? readBody ?? imageBody ?? searchBody ?? webBody;
 			const expandable = bodyRaw != null || outputText !== null || card !== null;
 			const open = expanded && expandable;
 			const bodyText = (0, react.useMemo)(() => open && card === null && bodyRaw != null ? formatToolBody(variant, bodyRaw) : null, [
@@ -1203,6 +1282,23 @@ window.__ModuleLoader__.load({
 							labels: readLabels,
 							maxLines: 8,
 							className: ToolRow_module_css_default.readBody
+						}) : imageBody !== null ? (0, react_jsx_runtime.jsxs)("div", {
+							className: ToolRow_module_css_default.imageBody,
+							children: [
+								(0, react_jsx_runtime.jsx)("div", {
+									className: ToolRow_module_css_default.imageLabel,
+									children: imageBody.label
+								}),
+								renderSlot !== void 0 && loadImage !== void 0 && renderSlot("tool.call.images", {
+									images: imageBody.images,
+									loadImage,
+									align: "start"
+								}),
+								(0, react_jsx_runtime.jsx)("div", {
+									className: ToolRow_module_css_default.imageMeta,
+									children: imageBody.text
+								})
+							]
 						}) : searchBody !== null ? (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.SearchBlock, {
 							...searchBody.card,
 							labels: searchLabels,
@@ -1328,7 +1424,7 @@ window.__ModuleLoader__.load({
 			return "kind" in node ? node.call?.name ?? "" : node.name;
 		}
 		/** One atomic call dispatched through the Tool-owned keyed slot. */
-		const ToolCall = (0, react.memo)(function ToolCall({ renderSlot, callId, toolName, block, openFile, selected, cwd, home, inspectCall, t, children }) {
+		const ToolCall = (0, react.memo)(function ToolCall({ renderSlot, callId, toolName, block, openFile, selected, cwd, home, inspectCall, loadImage, t, children }) {
 			const owner = (0, react.useMemo)(() => ({
 				callId,
 				toolName,
@@ -1336,6 +1432,7 @@ window.__ModuleLoader__.load({
 				openFile,
 				cwd,
 				home,
+				loadImage,
 				inspect: () => {
 					inspectCall(callId);
 				}
@@ -1346,6 +1443,7 @@ window.__ModuleLoader__.load({
 				openFile,
 				cwd,
 				home,
+				loadImage,
 				inspectCall
 			]);
 			return (0, react_jsx_runtime.jsxs)("div", {
@@ -1362,7 +1460,7 @@ window.__ModuleLoader__.load({
 				}), children]
 			});
 		});
-		const ToolCallBranch = (0, react.memo)(function ToolCallBranch({ renderSlot, block, selectedCallId, cwd, home, openFile, inspectCall, t }) {
+		const ToolCallBranch = (0, react.memo)(function ToolCallBranch({ renderSlot, block, selectedCallId, cwd, home, openFile, inspectCall, loadImage, t }) {
 			return (0, react_jsx_runtime.jsx)(ToolCall, {
 				renderSlot,
 				callId: block.callId,
@@ -1373,6 +1471,7 @@ window.__ModuleLoader__.load({
 				cwd,
 				home,
 				inspectCall,
+				loadImage,
 				t,
 				children: block.subCalls.length > 0 ? (0, react_jsx_runtime.jsx)("div", {
 					className: ToolCallTree_module_css_default.subCalls,
@@ -1385,6 +1484,7 @@ window.__ModuleLoader__.load({
 						home,
 						openFile,
 						inspectCall,
+						loadImage,
 						t
 					}, child.callId))
 				}) : null
@@ -1396,7 +1496,7 @@ window.__ModuleLoader__.load({
 		* @param props - whole-Tool owner data and the Tool-owned child-slot share.
 		* @returns the Tool call tree.
 		*/
-		function ToolCallTree({ renderSlot, node, selectedCallId, cwd, openFile, inspectCall, useHostInfo, t }) {
+		function ToolCallTree({ renderSlot, node, selectedCallId, cwd, openFile, inspectCall, loadImage, useHostInfo, t }) {
 			const home = useHostInfo((info) => info.home);
 			const block = node.data.root;
 			return (0, react_jsx_runtime.jsx)(ToolCallBranch, {
@@ -1407,6 +1507,7 @@ window.__ModuleLoader__.load({
 				home,
 				openFile,
 				inspectCall,
+				loadImage,
 				t
 			});
 		}
@@ -1435,7 +1536,7 @@ window.__ModuleLoader__.load({
 		/** Card-aware output body for the selected Tool call in details. */
 		/**
 		* Render the selected Tool call's structured output when its raw fields form a
-		* supported root card, otherwise preserve the flattened result text.
+		* supported card, otherwise preserve the flattened result text.
 		* @param props - selected call slice, workspace root, host home, and locale seat.
 		* @returns the details output body.
 		*/
@@ -1714,7 +1815,7 @@ window.__ModuleLoader__.load({
 			const state = model.state === "ok" && terminalModel !== null && terminalFailed(terminalModel) ? "error" : model.state;
 			const status = stateStatus(state, t);
 			const [expanded, setExpanded] = (0, react.useState)(false);
-			const genericBody = terminal === null && (model.state === "error" || isSettledPersistentShellCall(block)) && (model.bodyRaw !== null || model.output !== null);
+			const genericBody = terminal === null && (model.state === "error" || isSettledPersistentShellCall(block) || isSpilledShellCall(block)) && (model.bodyRaw !== null || model.output !== null);
 			const expandable = terminal !== null || genericBody;
 			const open = expanded && expandable;
 			const body = (0, react.useMemo)(() => open && genericBody && model.bodyRaw !== null ? formatToolBody(model.variant, model.bodyRaw) : null, [
@@ -1872,13 +1973,16 @@ window.__ModuleLoader__.load({
 			}
 		};
 		//#endregion
-		//#region lib/types/client/tool/toolviews/read-row.js
+		//#region lib/types/client/tool/toolviews/read-family-row.js
 		/**
-		* Lets users expand a completed read result and open its reported path.
+		* Compose a read-family row: the shared chrome and model-derived fields, plus the
+		* caller's card material.
+		* @param props - the toolview runtime share and locale seat.
+		* @param card - the card props this row owns.
+		* @returns the assembled ToolRow.
 		*/
-		function ReadRow({ toolName, block, cwd, home, openFile, inspect, t }) {
+		function readFamilyRow({ toolName, block, cwd, home, openFile, inspect, t }, card) {
 			const model = toolRowModel(toolName, block, cwd, home);
-			const read = readCardModel(block, cwd, home);
 			return (0, react_jsx_runtime.jsx)(ToolRow, {
 				t,
 				variant: model.variant,
@@ -1886,15 +1990,25 @@ window.__ModuleLoader__.load({
 				icon: (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconBrowseOutline16, { size: 14 }),
 				title: t(model.titleKey),
 				summary: model.summary,
+				bodyRaw: null,
 				output: model.output,
 				errorSummary: model.errorSummary,
-				read,
+				...card,
 				state: model.state,
 				filePath: model.filePath,
 				onOpenFile: openFile,
 				inspect
 			});
 		}
+		//#endregion
+		//#region lib/types/client/tool/toolviews/read-row.js
+		/**
+		* Lets users expand a completed read result and open its reported path.
+		*/
+		function ReadRow(props) {
+			const { block, cwd, home } = props;
+			return readFamilyRow(props, { read: readCardModel(block, cwd, home) });
+		}
 		/** Registers the read tool's conversation row. */
 		const readToolview = {
 			name: "read-toolview",
@@ -1908,6 +2022,214 @@ window.__ModuleLoader__.load({
 			}
 		};
 		//#endregion
+		//#region lib/types/client/tool/models/image-card-model.js
+		/**
+		* Whether a wire value is a usable pixel or byte measure.
+		* @param value - unvalidated wire value.
+		* @returns true when it is a positive integer.
+		*/
+		function positiveInteger(value) {
+			return typeof value === "number" && Number.isInteger(value) && value > 0;
+		}
+		/** The envelope `formatImageReadOutput` writes, matched by shape. */
+		const IMAGE_ENVELOPE = /^<path>[^\n]*<\/path>\n<type>image<\/type>\n<content>\n[\s\S]*\n<\/content>$/u;
+		/** The media types a durable image block may claim; anything else declines.
+		*  Hand-written mirror of `ImageMediaType` from dsh-attachment — the wire
+		*  boundary needs a runtime check and feature plugins must not import values
+		*  from each other; a new member added there must be added here too, or the
+		*  decline point below silently degrades that image to the generic card. */
+		const IMAGE_MEDIA_TYPES = new Set([
+			"image/png",
+			"image/jpeg",
+			"image/webp",
+			"image/gif"
+		]);
+		/** Runtime membership check; the cast is safe because the set holds exactly the four members. */
+		function isImageMediaType(value) {
+			return IMAGE_MEDIA_TYPES.has(value);
+		}
+		/**
+		* Narrow the persisted metadata, defensively. Every field arrives unvalidated on
+		* replay (an obsolete or hand-edited log reaches here), so any mismatch declines
+		* to the generic card rather than throwing. An absent `meta` (a nested call
+		* persists none) leaves the path to the call's own `file_path` argument.
+		*
+		* The attachment id is checked for existence only: it is opaque and
+		* provider-owned, and consumers must not parse that representation, so
+		* pattern-matching the local content-address form would reject a legitimate id
+		* minted by an alternative store.
+		* @param meta - persisted presentation metadata of unknown shape.
+		* @returns the narrowed path, or null when it does not match.
+		*/
+		function imageMeta(meta) {
+			if (typeof meta !== "object" || meta === null || Array.isArray(meta)) return null;
+			const { path } = meta;
+			if (typeof path !== "string" || path === "") return null;
+			return { path };
+		}
+		/**
+		* Narrow every attachment reference carried by the result's image blocks, in
+		* order.
+		*
+		* The content is the single source of truth for the references: it is what the
+		* tool actually returned and what a post-execute hook would replace together
+		* with the rest of the content. Every field arrives unvalidated over the wire,
+		* so any malformed image block declines to the generic card rather than
+		* rendering a partial gallery.
+		*
+		* The attachment id is checked for existence only — it is opaque and
+		* provider-owned, so pattern-matching the local content-address form would reject
+		* a legitimate id minted by an alternative store.
+		* @param content - the settled result's content blocks.
+		* @returns the narrowed references, or null when no valid image block is present.
+		*/
+		function imageReferences(content) {
+			const refs = [];
+			for (const part of content) {
+				if (typeof part !== "object" || part === null) continue;
+				const { type, attachment } = part;
+				if (type !== "image") continue;
+				if (typeof attachment !== "object" || attachment === null || Array.isArray(attachment)) return null;
+				const { attachmentId, mediaType, bytes, width, height, name, originalDimensions } = attachment;
+				if (typeof attachmentId !== "string" || attachmentId === "") return null;
+				if (typeof mediaType !== "string" || !isImageMediaType(mediaType)) return null;
+				if (!positiveInteger(bytes) || !positiveInteger(width) || !positiveInteger(height)) return null;
+				if (name !== void 0 && typeof name !== "string") return null;
+				let inputDimensions;
+				if (originalDimensions !== void 0) {
+					if (typeof originalDimensions !== "object" || originalDimensions === null || Array.isArray(originalDimensions)) return null;
+					const { width: inputWidth, height: inputHeight } = originalDimensions;
+					if (!positiveInteger(inputWidth) || !positiveInteger(inputHeight)) return null;
+					inputDimensions = {
+						width: inputWidth,
+						height: inputHeight
+					};
+				}
+				refs.push({
+					attachmentId,
+					mediaType,
+					bytes,
+					width,
+					height,
+					...name === void 0 ? {} : { name },
+					...inputDimensions === void 0 ? {} : { originalDimensions: inputDimensions }
+				});
+			}
+			return refs.length > 0 ? refs : null;
+		}
+		/**
+		* Read the text of every text block of a settled image result, joined in order.
+		*
+		* The envelope is one of them; a post-execute hook that appends further text
+		* blocks keeps them visible under the gallery instead of being dropped. The
+		* envelope shape is still the recognition gate: a result without it is not a
+		* well-formed image read and declines.
+		* @param content - the settled result's content blocks.
+		* @returns the joined text, or null when no envelope-shaped block is present.
+		*/
+		function imageTexts(content) {
+			const parts = [];
+			let sawEnvelope = false;
+			for (const part of content) {
+				if (part.type !== "text" || typeof part.text !== "string") continue;
+				if (IMAGE_ENVELOPE.test(part.text)) sawEnvelope = true;
+				parts.push(part.text);
+			}
+			return sawEnvelope && parts.length > 0 ? parts.join("\n") : null;
+		}
+		/**
+		* Whether the content carries only blocks the card consumes.
+		*
+		* `ContentBlock` is a merge-extensible union, so a post-execute hook could
+		* append a block of a type this card does not render (reasoning, an extension
+		* type, or a non-object). Rendering the card anyway would silently hide that
+		* block, so anything beyond a well-formed text or image object declines to the
+		* generic card, which shows the flattened content.
+		* @param content - the settled result's content blocks.
+		* @returns true when every block is a text or image object with usable fields.
+		*/
+		function fullyRendered(content) {
+			return content.every((part) => {
+				if (typeof part !== "object" || part === null) return false;
+				const { type, text } = part;
+				return type === "image" || type === "text" && typeof text === "string";
+			});
+		}
+		/**
+		* Derive a settled image card after validating the call head, persisted
+		* metadata (or its argument fallback), and the model-facing image envelope.
+		*
+		* The card is result-side only: a call carries no content until `execute`
+		* returns, so a running `read_image` has none and this returns null for it.
+		* Both root and nested calls settle as ToolResultNode; the nested one (a
+		* read_image dispatched from inside run_code) persists no presentationMeta, so
+		* its label falls back to the call's own `file_path` argument.
+		* @param block - running or settled Tool block.
+		* @param sessionCwd - the session workspace root; a workspace-rooted absolute
+		*   path label displays relative to it. Absent leaves the path as authored.
+		* @param home - host account home; a leftover POSIX home path displays as `~`.
+		* @returns the image-card props, or null for the generic path.
+		*/
+		function imageCardModel(block, sessionCwd, home) {
+			if (!("kind" in block) || block.isError) return null;
+			const call = parsedToolCall(block);
+			if (call?.name !== "read_image") return null;
+			const { file_path: filePath } = call.args;
+			if (typeof filePath !== "string" || filePath.trim() === "") return null;
+			const path = imageMeta(block.meta)?.path ?? (block.parentCallId !== void 0 ? filePath : null);
+			if (path === null) return null;
+			if (!fullyRendered(block.content)) return null;
+			const refs = imageReferences(block.content);
+			if (refs === null) return null;
+			const text = imageTexts(block.content);
+			if (text === null) return null;
+			return {
+				label: abbreviateHomePath(relativizeToCwd(path, sessionCwd), home),
+				images: refs.map((ref) => ({ attachment: ref })),
+				text
+			};
+		}
+		//#endregion
+		//#region lib/types/client/tool/toolviews/read-image-row.js
+		/**
+		* read_image row: the read-family chrome with the durably committed image as the
+		* row's collapsed-by-default card body, rendered through the `tool.call.images`
+		* slot this entry declares.
+		*/
+		function ReadImageRow(props) {
+			const { block, cwd, home, renderSlot, loadImage } = props;
+			return readFamilyRow(props, {
+				image: imageCardModel(block, cwd, home),
+				renderSlot,
+				loadImage
+			});
+		}
+		/**
+		* The read_image row as a plain registrant plugin following the atomic Tool-view
+		* declaration across independent activation and reload lifetimes. Declaring
+		* `tool.call.images` as a child slot authorizes this entry's `renderSlot` to
+		* dispatch the gallery.
+		*/
+		const readImageToolview = {
+			name: "read-image-toolview",
+			inject: ["slots"],
+			/**
+			* Register the read_image row into the Tool-owned keyed view slot.
+			* @param ctx - registrant context (disposal rides ctx.effect inside slots.register).
+			*/
+			apply(ctx) {
+				ctx.slots.inject("tool.call.toolview", () => ctx.slots.register({
+					name: "tool.call.toolview",
+					key: "read_image",
+					locale: CONVERSATION_NS,
+					children: { "tool.call.images": {
+						kind: "single",
+						scope: "session"
+					} }
+				}, ReadImageRow));
+			}
+		};
+		//#endregion
 		//#region lib/types/client/tool/toolviews/search-row.js
 		const SEARCH_TITLE_KEYS = {
 			grep: "tool.title.grep",
@@ -2120,6 +2442,7 @@ window.__ModuleLoader__.load({
 			}, ToolDetails));
 			ctx.plugin(bashToolviewSample);
 			ctx.plugin(readToolview);
+			ctx.plugin(readImageToolview);
 			ctx.plugin(fileMutationToolview);
 			ctx.plugin(searchToolview);
 			ctx.plugin(webToolview);

package/lib/types/client/contract/slots.d.ts

@@ -2,6 +2,7 @@
 import type { HostObservable, InjectFace, PropsLocale, PropsRenderSlots, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots';
 import type { RemoteHostFacts } from '@deepseek-ai/dsh-api-remotes/client';
 import type { ToolCallBlock } from '@deepseek-ai/dsh-client-ui-chat/client';
+import type { MessageImageLoader, MessageImageSource } from '@deepseek-ai/dsh-client-ui-conversation/client';
 declare module '@deepseek-ai/dsh-client-ui-slots' {
     interface SlotMap {
         /**
@@ -23,8 +24,35 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
             scope: 'session';
             owner: ToolCallOwnerProps;
         };
+        /**
+         * Durable images of a settled image-bearing Tool call, rendered through
+         * the attachment presentation plugin. The Tool layer never imports an
+         * attachment implementation: a toolview declares this slot as a child and
+         * renders it with the image card's references plus the session-authorized
+         * loader it received in its owner, and the attachment plugin fills the
+         * gallery. Composing no attachment presentation plugin renders nothing,
+         * which is why the image card keeps its own envelope text beside the
+         * gallery. A child slot is declared by exactly one entry: registering a
+         * second toolview that declares the same child throws at load, so a
+         * future image-bearing tool must reuse this entry or own a distinct
+         * slot.
+         */
+        'tool.call.images': {
+            kind: 'single';
+            scope: 'session';
+            owner: ToolImagesOwnerProps;
+        };
     }
 }
+/** Owner currency of the Tool image gallery slot: references plus the loader. */
+export interface ToolImagesOwnerProps {
+    /** Durable references or submission-echo previews in result order. */
+    images: readonly MessageImageSource[];
+    /** Session-authorized image URL loader for the durable arm. */
+    loadImage: MessageImageLoader;
+    /** Horizontal placement inside the owning record. */
+    align: 'start' | 'end';
+}
 /** Standard owner currency supplied to every atomic Tool view. */
 export interface ToolCallOwnerProps {
     /** Tool call identity, stable across running and settled forms. */
@@ -39,6 +67,14 @@ export interface ToolCallOwnerProps {
     home?: string | undefined;
     /** Open a Tool argument path through the Host. */
     openFile: (path: string) => void;
+    /**
+     * Session-authorized image loader for the `tool.call.images` slot, supplied
+     * by the chat node that owns this call. A composed chat node always
+     * supplies it (`ChatNodeOwnerProps.loadImage` is required), so the tool
+     * layer never imports an attachment implementation nor handles URL
+     * authorization.
+     */
+    loadImage: MessageImageLoader;
     /** Inspect this call in the trajectory view when available. */
     inspect?: (() => void) | undefined;
 }

package/lib/types/client/tool/ToolCallTree.d.ts

@@ -5,5 +5,5 @@ import type { ToolTreeProps } from '../contract/slots.ts';
  * @param props - whole-Tool owner data and the Tool-owned child-slot share.
  * @returns the Tool call tree.
  */
-export declare function ToolCallTree({ renderSlot, node, selectedCallId, cwd, openFile, inspectCall, useHostInfo, t, }: ToolTreeProps): import("react").JSX.Element;
+export declare function ToolCallTree({ renderSlot, node, selectedCallId, cwd, openFile, inspectCall, loadImage, useHostInfo, t, }: ToolTreeProps): import("react").JSX.Element;
 //# sourceMappingURL=ToolCallTree.d.ts.map

package/lib/types/client/tool/ToolDetails.d.ts

@@ -1,7 +1,7 @@
 import type { ToolDetailsProps } from '../contract/slots.ts';
 /**
  * Render the selected Tool call's structured output when its raw fields form a
- * supported root card, otherwise preserve the flattened result text.
+ * supported card, otherwise preserve the flattened result text.
  * @param props - selected call slice, workspace root, host home, and locale seat.
  * @returns the details output body.
  */

package/lib/types/client/tool/components/ToolRow.d.ts

@@ -1,7 +1,9 @@
 import { type ReactNode } from 'react';
-import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots';
+import type { PropsRenderSlots, TranslateNS } from '@deepseek-ai/dsh-client-ui-slots';
+import type { MessageImageLoader } from '@deepseek-ai/dsh-client-ui-conversation/client';
 import { type DiffCardModel } from '../models/diff-card-model.ts';
 import { type ReadCardModel } from '../models/read-card-model.ts';
+import type { ImageCardModel } from '../models/image-card-model.ts';
 import { type SearchCardModel } from '../models/search-card-model.ts';
 import { type TerminalCardModel } from '../models/terminal-card-model.ts';
 import type { AskQuestionCardModel } from '../models/ask-question-card-model.ts';
@@ -35,6 +37,21 @@ export interface ToolRowProps {
     terminal?: TerminalCardModel | null | undefined;
     diff?: DiffCardModel | null | undefined;
     read?: ReadCardModel | null | undefined;
+    /**
+     * Image-card material for a call whose result is an image (derived by
+     * `imageCardModel`). Rendered through the `tool.call.images` slot, so the
+     * tool layer never imports an attachment implementation nor handles URL
+     * authorization.
+     */
+    image?: ImageCardModel | null | undefined;
+    /**
+     * Dispatch the image gallery through the tool-owned `tool.call.images`
+     * slot, supplied by the toolview that owns this row together with the
+     * session-authorized loader.
+     */
+    renderSlot?: PropsRenderSlots<'tool.call.images'>['renderSlot'] | undefined;
+    /** Session-authorized image URL loader for the gallery slot. */
+    loadImage?: MessageImageLoader | undefined;
     search?: SearchCardModel | null | undefined;
     web?: WebCardModelProps | null | undefined;
     state: ToolRowState;
@@ -51,5 +68,5 @@ export interface ToolRowProps {
      */
     inspect?: (() => void) | undefined;
 }
-export declare function ToolRow({ t, variant, toolName, icon, title, summary, summarySuffix, bodyRaw, output, askQuestion, errorSummary, terminal, diff, read, search, web, state, filePath, onOpenFile, inspect, }: ToolRowProps): import("react").JSX.Element;
+export declare function ToolRow({ t, variant, toolName, icon, title, summary, summarySuffix, bodyRaw, output, askQuestion, errorSummary, terminal, diff, read, image, renderSlot, loadImage, search, web, state, filePath, onOpenFile, inspect, }: ToolRowProps): import("react").JSX.Element;
 //# sourceMappingURL=ToolRow.d.ts.map

package/lib/types/client/tool/models/image-card-model.d.ts

@@ -0,0 +1,45 @@
+/** Pure image-card derivation from raw result content and metadata. @module */
+import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment';
+import { type ToolCallBlock } from './tool-call-model.ts';
+/**
+ * The image-card material one settled call contributes: the display label plus
+ * the durable references the attachment slot renders as a gallery.
+ *
+ * The bytes are not here. `attachmentId` is opaque and provider-owned, so a UI
+ * resolves it to a session-authorized URL at render time; this model never parses
+ * it nor derives a path from it.
+ */
+export interface ImageCardModel {
+    /** Card label: the read path, shortened the way every other card's is. */
+    label: string;
+    /** The durable images this result returned, in result order. */
+    images: readonly {
+        readonly attachment: ImageAttachmentRef;
+    }[];
+    /**
+     * The model-facing envelope text, for the line under the gallery.
+     *
+     * Taken from the result's own text block rather than the row's flattened
+     * result text: an image read's content is `[text envelope, image block]`, and
+     * flattening JSON.stringifies the image block, which would print the raw
+     * attachment object under the picture — the symptom this card exists to remove.
+     */
+    text: string;
+}
+/**
+ * Derive a settled image card after validating the call head, persisted
+ * metadata (or its argument fallback), and the model-facing image envelope.
+ *
+ * The card is result-side only: a call carries no content until `execute`
+ * returns, so a running `read_image` has none and this returns null for it.
+ * Both root and nested calls settle as ToolResultNode; the nested one (a
+ * read_image dispatched from inside run_code) persists no presentationMeta, so
+ * its label falls back to the call's own `file_path` argument.
+ * @param block - running or settled Tool block.
+ * @param sessionCwd - the session workspace root; a workspace-rooted absolute
+ *   path label displays relative to it. Absent leaves the path as authored.
+ * @param home - host account home; a leftover POSIX home path displays as `~`.
+ * @returns the image-card props, or null for the generic path.
+ */
+export declare function imageCardModel(block: ToolCallBlock, sessionCwd?: string, home?: string): ImageCardModel | null;
+//# sourceMappingURL=image-card-model.d.ts.map

package/lib/types/client/tool/models/terminal-card-model.d.ts

@@ -67,10 +67,16 @@ export declare function terminalFailed(model: TerminalCardModel): boolean;
  */
 export declare function isSettledPersistentShellCall(block: ToolCallBlock): boolean;
 /**
- * Derive terminal props for supported root shell and terminal-send calls.
- * Standard shell results parse their final status marker; persistent shell
- * results, background calls, errors, malformed input, or child dispatches use
- * the generic path. {@link isSettledPersistentShellCall} lets that generic
+ * Identify a settled foreground shell preview whose spill footer can hide the exit marker.
+ * @param block - running or settled Tool block.
+ * @returns whether the shell output must remain generic without an inferred exit status.
+ */
+export declare function isSpilledShellCall(block: ToolCallBlock): boolean;
+/**
+ * Derive terminal props for supported shell and terminal-send calls, including
+ * nested Code Dispatch calls. Standard shell results parse their final status
+ * marker; persistent shell results, spill previews, background calls, errors,
+ * and malformed input use the generic path. {@link isSettledPersistentShellCall} lets that generic
  * persistent result remain expandable without inventing one process status.
  * @param block - running or settled Tool block.
  * @param sessionCwd - session workspace root used to resolve workdir.

package/lib/types/client/tool/toolviews/read-family-row.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { PropsRenderSlots } from '@deepseek-ai/dsh-client-ui-slots';
+import type { ToolCallViewProps } from '../../contract/slots.ts';
+import { type ToolRowProps } from '../components/ToolRow.tsx';
+/** Full row props of a read-family toolview: the runtime share plus its locale seat. */
+export type ReadFamilyRowProps = ToolCallViewProps & {
+    t: ToolRowProps['t'];
+};
+/** read_image row props: the runtime share, the declared image child slot, and the locale seat. */
+export type ReadImageRowProps = ReadFamilyRowProps & PropsRenderSlots<'tool.call.images'>;
+/**
+ * The card material one read-family row contributes: exactly the ToolRow card
+ * props that row owns. `read` supplies `read`; `read_image` supplies `image`
+ * together with the slot dispatcher and loader that draw it.
+ */
+export type ReadFamilyCard = Pick<ToolRowProps, 'read' | 'image' | 'renderSlot' | 'loadImage'>;
+/**
+ * Compose a read-family row: the shared chrome and model-derived fields, plus the
+ * caller's card material.
+ * @param props - the toolview runtime share and locale seat.
+ * @param card - the card props this row owns.
+ * @returns the assembled ToolRow.
+ */
+export declare function readFamilyRow({ toolName, block, cwd, home, openFile, inspect, t }: ReadFamilyRowProps, card: ReadFamilyCard): ReactNode;
+//# sourceMappingURL=read-family-row.d.ts.map

package/lib/types/client/tool/toolviews/read-image-row.d.ts

@@ -0,0 +1,24 @@
+import type { Context } from '@deepseek-ai/cordis';
+import { type ReadImageRowProps } from './read-family-row.tsx';
+/**
+ * read_image row: the read-family chrome with the durably committed image as the
+ * row's collapsed-by-default card body, rendered through the `tool.call.images`
+ * slot this entry declares.
+ */
+export declare function ReadImageRow(props: ReadImageRowProps): import("react").ReactNode;
+/**
+ * The read_image row as a plain registrant plugin following the atomic Tool-view
+ * declaration across independent activation and reload lifetimes. Declaring
+ * `tool.call.images` as a child slot authorizes this entry's `renderSlot` to
+ * dispatch the gallery.
+ */
+export declare const readImageToolview: {
+    name: string;
+    inject: string[];
+    /**
+     * Register the read_image row into the Tool-owned keyed view slot.
+     * @param ctx - registrant context (disposal rides ctx.effect inside slots.register).
+     */
+    apply(ctx: Context): void;
+};
+//# sourceMappingURL=read-image-row.d.ts.map

package/lib/types/client/tool/toolviews/read-row.d.ts

@@ -5,7 +5,7 @@ type ReadRowProps = ToolCallViewProps & PropsLocale<'conversation'>;
 /**
  * Lets users expand a completed read result and open its reported path.
  */
-export declare function ReadRow({ toolName, block, cwd, home, openFile, inspect, t }: ReadRowProps): import("react").JSX.Element;
+export declare function ReadRow(props: ReadRowProps): import("react").ReactNode;
 /** Registers the read tool's conversation row. */
 export declare const readToolview: {
     name: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@deepseek-ai/dsh-client-ui-tool",
   "description": "Client Tool call-tree renderer and keyed per-tool presentation slot",
-  "version": "0.1.2-alpha.5",
+  "version": "0.1.3-alpha.2",
   "publishConfig": {
     "access": "public"
   },
@@ -48,19 +48,28 @@
     "@types/react": "~18.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@deepseek-ai/dsh-api-remotes": "^0.1.2-alpha.5",
-    "@deepseek-ai/dsh-client-connection": "^0.1.2-alpha.5",
+    "@deepseek-ai/dsh-spill-policy": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-agent": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-llm": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-session": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-system-prompt": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-tools": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-spill": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-code-runtime-worker-thread": "^0.1.3-alpha.2",
     "@deepseek-ai/cordis": "^4.0.2",
-    "@deepseek-ai/dsh-client-test-runtime": "^0.1.2-alpha.5",
-    "@deepseek-ai/dsh-client-locale": "^0.1.2-alpha.5",
-    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.2-alpha.5",
-    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.2-alpha.5",
-    "@deepseek-ai/dsh-api-workspace-controller": "^0.1.2-alpha.5",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.2-alpha.5",
-    "@deepseek-ai/dsh-client-ui-chat": "^0.1.2-alpha.5",
-    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.2-alpha.5",
-    "@deepseek-ai/dsh-client-ui-session": "^0.1.2-alpha.5",
-    "@deepseek-ai/dsh-util-workspace-path": "^0.1.2-alpha.5"
+    "@deepseek-ai/dsh-api-remotes": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-client-connection": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-client-locale": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-client-test-runtime": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-api-workspace-controller": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-util-workspace-path": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-attachment": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-client-ui-session": "^0.1.3-alpha.2",
+    "@deepseek-ai/dsh-client-ui-chat": "^0.1.3-alpha.2"
   },
   "files": [
     "lib/index.js",