dsh-context 0.21.0 → 0.22.0

package/README.md

@@ -86,6 +86,14 @@ Six collapsible category sections (system prompt, tool schemas, user messages, i
 - **Linked with the history chart** — hover any bar in the History card and the browser previews that step instantly; leave the chart and it returns to your own pick. Keep a category open while scrubbing to compare one category across steps.
 - **Honest about coverage** — steps before a compaction are reconstructed from the removed-message archive, and the card says so when a step's makeup is only approximate. Elements older than the loaded chat window page older history in automatically when you expand them, and live injections (AGENTS.md, session-start context, …) are always listed — never a token sum without its items.
 
+### 🖼 Multimodal — image attachments in full view (DeepSeek Harness 0.1.1+)
+
+Fully adapted to DeepSeek Harness 0.1.1's multimodal pipeline and the vision capability of **DeepSeek-V4-Flash-Vision-Exp**. A user message carrying images expands into a card layout — prose in the text card (with the usual raw/Markdown toggle), each image attachment as a thumbnail card with its name, normalized dimensions (plus the pre-normalization size when 0.1.1's image pipeline downscaled it) and stored size, and anything unrecognized as raw content:
+
+![Context browser rendering image attachments](https://raw.githubusercontent.com/bowenliang123/dsh-context/main/docs/context-browser-images.png)
+
+Images load through the harness's own session-authorized loader — the same one the chat history uses — and degrade to metadata-only cards when it is unavailable. Image blocks in assistant messages and tool results (e.g. `read_image` output) now render too, instead of being silently dropped.
+
 ## Like it?
 
 If `dsh-context` helped you understand what your agent is carrying around, a ⭐ on [GitHub](https://github.com/bowenliang123/dsh-context) is much appreciated — and issues/PRs are welcome!

package/lib/client.js

@@ -67,6 +67,7 @@ var DICT_ZH = {
   "nodes.empty": "\u5F53\u524D\u6CA1\u6709\u6A21\u578B\u53EF\u89C1\u7684\u6D88\u606F",
   "loading": "\u6B63\u5728\u8BFB\u53D6\u4F1A\u8BDD\u65E5\u5FD7\u2026",
   "error": "\u4E0A\u4E0B\u6587\u6570\u636E\u8BFB\u53D6\u5931\u8D25\uFF1A",
+  "error.retry": "\u91CD\u8BD5",
   "footer": "\u4F30\u7B97\u53E3\u5F84\uFF1A\u4E0E dsh \u5185\u7F6E tokenMeter \u76F8\u540C\u7684\u56FA\u5B9A\u5BC6\u5EA6\u542F\u53D1\u5F0F\uFF08\u7EA6 4 \u5B57\u7B26 \u2248 1 token\uFF09\uFF1B\u300C\u5B9E\u9645\u300D\u4E3A\u4F9B\u5E94\u5546\u4E0A\u62A5\u7528\u91CF\u3002",
   "tip.step": "\u7B2C {t} \u8F6E \xB7 \u7B2C{s}\u6B65",
   "tip.turn": "\u7B2C {t} \u8F6E \xB7 \u5171 {n} \u6B65",
@@ -115,7 +116,22 @@ var DICT_ZH = {
   "rich.raw": "\u539F\u6587",
   "rich.md": "Markdown",
   "rich.toMd": "\u6309 Markdown \u6E32\u67D3\u67E5\u770B",
-  "rich.toRaw": "\u67E5\u770B\u539F\u59CB\u6587\u672C"
+  "rich.toRaw": "\u67E5\u770B\u539F\u59CB\u6587\u672C",
+  // Assistant-message block titles inside the detail card: the reasoning
+  // trace and the response each carry a small label (Reasoning / Response,
+  // mirroring the harness's own block + locale vocabulary).
+  "block.thinking": "\u601D\u8003",
+  "block.answer": "\u56DE\u7B54",
+  // Attachment cards in a message detail: image refs render as thumbnail
+  // cards (name + normalized dims + stored size), anything unrecognized
+  // falls into the generic raw-JSON card.
+  "attach.images": "\u56FE\u7247\u9644\u4EF6",
+  "attach.other": "\u5176\u4ED6\u5185\u5BB9",
+  "attach.image": "\u56FE\u7247",
+  "attach.open": "\u67E5\u770B\u539F\u56FE",
+  "attach.loading": "\u2026",
+  "attach.loadFailed": "\u52A0\u8F7D\u5931\u8D25 \xB7 \u70B9\u51FB\u91CD\u8BD5",
+  "attach.orig": "\u539F\u56FE {d}"
 };
 var DICT_EN = {
   "tab": "Context",
@@ -177,6 +193,7 @@ var DICT_EN = {
   "nodes.empty": "No model-visible messages right now",
   "loading": "Reading the session log\u2026",
   "error": "Failed to read context data: ",
+  "error.retry": "Retry",
   "footer": "Estimate: same fixed-density heuristic as dsh\u2019s built-in tokenMeter (~4 chars \u2248 1 token); \u201Cactual\u201D is provider-reported usage.",
   "tip.step": "Turn {t} \xB7 Step {s}",
   "tip.turn": "Turn {t} \xB7 {n} steps",
@@ -225,7 +242,22 @@ var DICT_EN = {
   "rich.raw": "Raw",
   "rich.md": "Markdown",
   "rich.toMd": "View as Markdown",
-  "rich.toRaw": "View Raw Text"
+  "rich.toRaw": "View Raw Text",
+  // Assistant-message block titles inside the detail card: the reasoning
+  // trace and the response each carry a small label (Reasoning / Response,
+  // mirroring the harness's own block + locale vocabulary).
+  "block.thinking": "Reasoning",
+  "block.answer": "Response",
+  // Attachment cards in a message detail: image refs render as thumbnail
+  // cards (name + normalized dims + stored size), anything unrecognized
+  // falls into the generic raw-JSON card.
+  "attach.images": "Images",
+  "attach.other": "Other content",
+  "attach.image": "Image",
+  "attach.open": "Open full image",
+  "attach.loading": "\u2026",
+  "attach.loadFailed": "Load failed \xB7 click to retry",
+  "attach.orig": "original {d}"
 };
 
 // src/client/modalStore.ts
@@ -338,12 +370,60 @@ function asRecord(value) {
   if (value === null || value === void 0 || typeof value !== "object") return null;
   return value;
 }
-var timelineOf = (value) => asRecord(value);
+function numOf(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+function objectsOf(value) {
+  if (!Array.isArray(value)) return [];
+  return value.filter((v) => v !== null && typeof v === "object");
+}
+function timelineOf(value) {
+  const data = asRecord(value);
+  if (data === null) return null;
+  const current = data.current;
+  const numericBreakdown = current !== null && typeof current === "object" && ["system", "tools", "user", "inject", "assistant", "tool", "total"].every((k) => typeof current[k] === "number");
+  if (numericBreakdown && Array.isArray(data.requests) && Array.isArray(data.events) && Array.isArray(data.nodes) && Array.isArray(data.archive) && Array.isArray(data.toolList)) {
+    return data;
+  }
+  const safeCurrent = current !== null && typeof current === "object" ? current : {};
+  const cost = typeof data.cost === "object" && data.cost !== null && !Array.isArray(data.cost) ? data.cost : void 0;
+  return {
+    ok: true,
+    ...typeof data.model === "string" ? { model: data.model } : {},
+    ...typeof data.provider === "string" ? { provider: data.provider } : {},
+    ...typeof data.contextWindow === "number" ? { contextWindow: data.contextWindow } : {},
+    current: {
+      system: numOf(safeCurrent.system),
+      tools: numOf(safeCurrent.tools),
+      user: numOf(safeCurrent.user),
+      inject: numOf(safeCurrent.inject),
+      assistant: numOf(safeCurrent.assistant),
+      tool: numOf(safeCurrent.tool),
+      total: numOf(safeCurrent.total)
+    },
+    toolList: objectsOf(data.toolList),
+    requests: objectsOf(data.requests),
+    events: objectsOf(data.events),
+    nodes: objectsOf(data.nodes),
+    droppedNodes: numOf(data.droppedNodes),
+    archive: objectsOf(data.archive),
+    ...cost !== void 0 ? { cost } : {},
+    ...typeof data.surfaceFloor === "number" ? { surfaceFloor: data.surfaceFloor } : {},
+    ...typeof data.archiveFloor === "number" ? { archiveFloor: data.archiveFloor } : {}
+  };
+}
 var contextPressureOf = (value) => asRecord(value);
 var tokenUsageOf = (value) => asRecord(value);
 function headersOf(value) {
   const headers = asRecord(value);
-  return headers !== null && Array.isArray(headers.headers) ? headers : null;
+  if (headers === null || !Array.isArray(headers.headers)) return null;
+  for (const h2 of headers.headers) {
+    if (h2 === null || typeof h2 !== "object") return null;
+    const entry = h2;
+    if (!Array.isArray(entry.tools)) return null;
+    if (entry.system !== void 0 && typeof entry.system !== "string") return null;
+  }
+  return headers;
 }
 
 // src/client/assemble.ts
@@ -417,6 +497,96 @@ function makeNodeList(kit) {
   };
 }
 
+// src/client/format.ts
+function fmt(n) {
+  if (n === void 0 || n === null || isNaN(n)) return "\u2014";
+  if (n >= 1e6) return (n / 1e6).toFixed(1) + "M";
+  if (n >= 1e3) return (n / 1e3).toFixed(1) + "k";
+  return String(Math.round(n));
+}
+function fmtBytes(n) {
+  if (n === void 0 || n === null || isNaN(n) || n < 0) return "\u2014";
+  if (n >= 1e6) return (n / 1e6).toFixed(1) + " MB";
+  if (n >= 1e3) return (n / 1e3).toFixed(1) + " kB";
+  return String(Math.round(n)) + " B";
+}
+function fmtTime(t) {
+  const d = new Date(t);
+  if (isNaN(d.getTime())) return "\u2014";
+  return d.toLocaleTimeString("en-GB", { hour12: false });
+}
+
+// src/client/components/images.tsx
+function imageRefOf(block) {
+  if (block === null || typeof block !== "object") return null;
+  const b = block;
+  if (b.type !== "image" && b.kind !== "image") return null;
+  const a = b.attachment;
+  if (a === null || typeof a !== "object") return null;
+  const r = a;
+  if (typeof r.attachmentId !== "string" || r.attachmentId === "") return null;
+  const num = (v) => typeof v === "number" && Number.isFinite(v) && v > 0 ? v : void 0;
+  const orig = r.originalDimensions !== null && typeof r.originalDimensions === "object" ? r.originalDimensions : void 0;
+  const origDims = orig !== void 0 && num(orig.width) !== void 0 && num(orig.height) !== void 0 ? { width: num(orig.width), height: num(orig.height) } : void 0;
+  return {
+    attachmentId: r.attachmentId,
+    ...typeof r.name === "string" && r.name !== "" ? { name: r.name } : {},
+    ...num(r.bytes) !== void 0 ? { bytes: num(r.bytes) } : {},
+    ...num(r.width) !== void 0 ? { width: num(r.width) } : {},
+    ...num(r.height) !== void 0 ? { height: num(r.height) } : {},
+    ...origDims !== void 0 ? { originalDimensions: origDims } : {}
+  };
+}
+function makeImageCard(kit) {
+  const { t } = kit;
+  return function ImageCard(props) {
+    const { attachment, load } = props;
+    const [src, setSrc] = React.useState(null);
+    const [error, setError] = React.useState(false);
+    const [attempt, setAttempt] = React.useState(0);
+    React.useEffect(() => {
+      if (load === void 0) return;
+      let live = true;
+      setError(false);
+      setSrc(null);
+      void load(attachment).then((url) => {
+        if (live) setSrc(url);
+      }).catch(() => {
+        if (live) setError(true);
+      });
+      return () => {
+        live = false;
+      };
+    }, [attachment, load, attempt]);
+    const name = attachment.name ?? t("attach.image");
+    const dims = attachment.width !== void 0 && attachment.height !== void 0 ? attachment.width + "\xD7" + attachment.height : null;
+    const orig = attachment.originalDimensions;
+    const facts = [];
+    if (dims !== null) facts.push(dims);
+    if (orig !== void 0) facts.push(t("attach.orig", { d: orig.width + "\xD7" + orig.height }));
+    if (attachment.bytes !== void 0) facts.push(fmtBytes(attachment.bytes));
+    const open = () => {
+      if (src === null) return;
+      try {
+        window.open(src, "_blank", "noopener");
+      } catch {
+      }
+    };
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-att-item" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "lc-att-thumb",
+        title: error ? t("attach.loadFailed") : t("attach.open"),
+        onClick: error ? () => {
+          setAttempt((a) => a + 1);
+        } : open
+      },
+      src !== null ? /* @__PURE__ */ React.createElement("img", { src, alt: name }) : /* @__PURE__ */ React.createElement("span", { className: error ? "lc-att-err" : "lc-att-ph" }, error ? "\u26A0" : load === void 0 ? "\u{1F5BC}" : t("attach.loading"))
+    ), /* @__PURE__ */ React.createElement("div", { className: "lc-att-meta" }, /* @__PURE__ */ React.createElement("span", { className: "lc-att-name", title: name }, name), facts.length > 0 ? /* @__PURE__ */ React.createElement("span", { className: "lc-att-dims" }, facts.join(" \xB7 ")) : null));
+  };
+}
+
 // src/client/components/richText.tsx
 var import_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 function makeRichText(kit) {
@@ -551,7 +721,7 @@ function ToolSchema(props) {
   ), jsonOpen ? /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre lc-br-dim" }, schemaJson) : null) : null);
 }
 function RawBlocks(props) {
-  const { rich } = props;
+  const { rich, img } = props;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, props.blocks.map((b, i) => {
     const blk = b;
     if (blk !== null && typeof blk === "object" && (blk.type === "text" || blk.type === "reasoning") && typeof blk.text === "string") {
@@ -560,14 +730,16 @@ function RawBlocks(props) {
       }
       return /* @__PURE__ */ React.createElement(rich.RichText, { key: i, text: blk.text, mode: props.mode });
     }
+    const image = imageRefOf(b);
+    if (image !== null) return /* @__PURE__ */ React.createElement(img.Card, { key: i, attachment: image, load: img.load });
     if (blk !== null && typeof blk === "object" && blk.type === "tool-result" && Array.isArray(blk.content)) {
-      return /* @__PURE__ */ React.createElement(RawBlocks, { key: i, blocks: blk.content, mode: props.mode, rich });
+      return /* @__PURE__ */ React.createElement(RawBlocks, { key: i, blocks: blk.content, mode: props.mode, rich, img });
     }
     return /* @__PURE__ */ React.createElement("pre", { key: i, className: "lc-br-pre lc-br-dim" }, JSON.stringify(b, null, 2));
   }));
 }
 function NodeContent(props) {
-  const { node, conv, rich } = props;
+  const { node, conv, rich, img } = props;
   const richable = node.cat === "user" || node.cat === "assistant" || node.cat === "inject";
   const wrap = (render) => richable ? /* @__PURE__ */ React.createElement(rich.RichCard, { render }) : /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, render("raw"));
   if (conv === void 0) {
@@ -581,25 +753,52 @@ function NodeContent(props) {
     return wrap((mode) => /* @__PURE__ */ React.createElement(React.Fragment, null, blocks.map((b, i) => {
       const blk = b;
       if (blk.kind === "text" && typeof blk.text === "string") {
-        return /* @__PURE__ */ React.createElement(rich.RichText, { key: i, text: blk.text, mode });
+        return /* @__PURE__ */ React.createElement("div", { key: i, className: "lc-br-blk" }, /* @__PURE__ */ React.createElement("div", { className: "lc-br-blk-label" }, props.labels.answer), /* @__PURE__ */ React.createElement(rich.RichText, { text: blk.text, mode }));
       }
       if (blk.kind === "reasoning" && typeof blk.text === "string") {
-        return /* @__PURE__ */ React.createElement("pre", { key: i, className: "lc-br-pre lc-br-dim" }, blk.text);
+        return /* @__PURE__ */ React.createElement("div", { key: i, className: "lc-br-blk" }, /* @__PURE__ */ React.createElement("div", { className: "lc-br-blk-label" }, props.labels.thinking), /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre lc-br-dim" }, blk.text));
       }
       if (blk.kind === "tool-call") {
         return /* @__PURE__ */ React.createElement("div", { key: i, className: "lc-br-call" }, /* @__PURE__ */ React.createElement("span", { className: "lc-br-tag" }, "\u2192 " + String(blk.name ?? "?")), typeof blk.argsRaw === "string" && blk.argsRaw !== "" ? /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre lc-br-dim" }, blk.argsRaw) : null);
       }
+      const image = imageRefOf(b);
+      if (image !== null) return /* @__PURE__ */ React.createElement(img.Card, { key: i, attachment: image, load: img.load });
       return null;
     })));
   }
   if (conv.kind === "tool-result") {
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, conv.call != null ? /* @__PURE__ */ React.createElement("div", { className: "lc-br-call" }, /* @__PURE__ */ React.createElement("span", { className: "lc-br-tag" }, "\u2190 " + conv.call.name), conv.call.argsRaw !== "" ? /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre lc-br-dim" }, conv.call.argsRaw) : null) : null, Array.isArray(conv.content) ? /* @__PURE__ */ React.createElement(RawBlocks, { blocks: conv.content, mode: "raw", rich }) : null);
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, conv.call != null ? /* @__PURE__ */ React.createElement("div", { className: "lc-br-call" }, /* @__PURE__ */ React.createElement("span", { className: "lc-br-tag" }, "\u2190 " + conv.call.name), conv.call.argsRaw !== "" ? /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre lc-br-dim" }, conv.call.argsRaw) : null) : null, Array.isArray(conv.content) ? /* @__PURE__ */ React.createElement(RawBlocks, { blocks: conv.content, mode: "raw", rich, img }) : null);
   }
   if (conv.kind === "compaction") {
     return wrap((mode) => /* @__PURE__ */ React.createElement(React.Fragment, null, typeof conv.summary === "string" && conv.summary !== "" ? /* @__PURE__ */ React.createElement(rich.RichText, { text: conv.summary, mode }) : null));
   }
   if (Array.isArray(conv.content)) {
-    return wrap((mode) => /* @__PURE__ */ React.createElement(RawBlocks, { blocks: conv.content, mode, rich }));
+    const blocks = conv.content;
+    if (node.cat !== "user") {
+      return wrap((mode) => /* @__PURE__ */ React.createElement(RawBlocks, { blocks, mode, rich, img }));
+    }
+    const texts = [];
+    const images = [];
+    const others = [];
+    for (const b of blocks) {
+      const blk = b;
+      if (blk !== null && typeof blk === "object" && blk.type === "text" && typeof blk.text === "string") {
+        texts.push(blk.text);
+        continue;
+      }
+      const image = imageRefOf(b);
+      if (image !== null) {
+        images.push(image);
+        continue;
+      }
+      others.push(b);
+    }
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, texts.length > 0 ? (
+      // Un-padded RichCard: the outer lc-br-content already owns the
+      // body indent, so the text card aligns with the attachment cards
+      // instead of sitting one indent deeper.
+      /* @__PURE__ */ React.createElement(rich.RichCard, { className: "lc-br-rich-inline", render: (mode) => /* @__PURE__ */ React.createElement(React.Fragment, null, texts.map((text, i) => /* @__PURE__ */ React.createElement(rich.RichText, { key: i, text, mode }))) })
+    ) : null, images.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-ts-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-ts-card-head" }, /* @__PURE__ */ React.createElement("b", null, props.labels.images), /* @__PURE__ */ React.createElement("span", { className: "lc-ts-card-count" }, images.length)), /* @__PURE__ */ React.createElement("div", { className: "lc-att-grid" }, images.map((a, i) => /* @__PURE__ */ React.createElement(img.Card, { key: a.attachmentId + ":" + i, attachment: a, load: img.load })))) : null, others.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-ts-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-ts-card-head" }, /* @__PURE__ */ React.createElement("b", null, props.labels.other), /* @__PURE__ */ React.createElement("span", { className: "lc-ts-card-count" }, others.length)), others.map((b, i) => /* @__PURE__ */ React.createElement("pre", { key: i, className: "lc-br-pre lc-br-dim" }, JSON.stringify(b, null, 2)))) : null);
   }
   return /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, /* @__PURE__ */ React.createElement("div", { className: "lc-br-note" }, props.hint));
 }
@@ -622,6 +821,7 @@ function makeContextBrowser(kit, StackedBar) {
   const { t, fmt: fmt3, fmtTime: fmtTime2, catLabel } = kit;
   const nodeText = makeNodeText(kit);
   const rich = makeRichText(kit);
+  const ImageCard = makeImageCard(kit);
   const catColor = {};
   for (const c of CATS) catColor[c.key] = c.color;
   const MAX_AUTO_PAGES = 20;
@@ -766,6 +966,13 @@ function makeContextBrowser(kit, StackedBar) {
               node: n,
               conv: bySeq.get(n.seq),
               rich,
+              img: { Card: ImageCard, load: props.loadImage },
+              labels: {
+                thinking: t("block.thinking"),
+                answer: t("block.answer"),
+                images: t("attach.images"),
+                other: t("attach.other")
+              },
               hint: bySeq.get(n.seq) === void 0 && awaiting ? t("browser.loading") : t("browser.noContent")
             }
           )
@@ -982,6 +1189,34 @@ function makeCurrentComposition(kit, StackedBar, Legend) {
   };
 }
 
+// src/client/components/errorBoundary.tsx
+function makeErrorBoundary(t) {
+  return class ErrorBoundary extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+      return { error: error instanceof Error ? error : new Error(String(error)) };
+    }
+    render() {
+      const error = this.state.error;
+      if (error === null) return this.props.children;
+      return /* @__PURE__ */ React.createElement("div", { className: "lc-root" }, /* @__PURE__ */ React.createElement("div", { className: "lc-empty lc-error" }, /* @__PURE__ */ React.createElement("span", null, t("error")), /* @__PURE__ */ React.createElement("code", { className: "lc-error-msg" }, error.message), /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          className: "lc-error-retry",
+          onClick: () => {
+            this.setState({ error: null });
+          }
+        },
+        t("error.retry")
+      )));
+    }
+  };
+}
+
 // src/client/components/contextModal.tsx
 function makeContextModal(ctx, kit) {
   const { t } = kit;
@@ -990,7 +1225,8 @@ function makeContextModal(ctx, kit) {
   const Legend = makeLegend(kit);
   const CurrentComposition = makeCurrentComposition(kit, StackedBar, Legend);
   const ContextBrowser = makeContextBrowser(kit, StackedBar);
-  return function ContextModal(props) {
+  const ErrorBoundary = makeErrorBoundary(t);
+  function ContextModalBody(props) {
     const sessionId = typeof props.sessionId === "string" ? props.sessionId : "";
     const open = typeof props.useContextModal === "function" ? props.useContextModal((s) => s) : false;
     const data = typeof props.useProjection === "function" ? timelineOf(props.useProjection("contextTimeline")) : null;
@@ -1051,6 +1287,9 @@ function makeContextModal(ctx, kit) {
         }
       }
     ))));
+  }
+  return function ContextModal(props) {
+    return h(ErrorBoundary, null, h(ContextModalBody, props));
   };
 }
 
@@ -1273,6 +1512,13 @@ var STYLES = [
   ".lc-node-tokens { color: var(--dsw-alias-label-secondary); }",
   ".lc-nodes-more { color: var(--dsw-alias-label-secondary); padding: 3px 0; }",
   ".lc-empty { color: var(--dsw-alias-label-secondary); padding: 18px 0; text-align: center; }",
+  // Error-boundary fallback card: the tab degrades to this instead of
+  // white-screening; the message runs in mono on a padded chip, and Retry
+  // re-mounts the subtree once a healthy value arrives.
+  ".lc-error { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 16px; }",
+  ".lc-error-msg { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--dsw-alias-state-error-primary); background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 4px 8px; max-width: 100%; overflow-wrap: anywhere; }",
+  ".lc-error-retry { border: 1px solid var(--dsw-alias-border-l1); background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-primary); font: inherit; font-size: 12px; padding: 4px 14px; border-radius: 6px; cursor: pointer; }",
+  ".lc-error-retry:hover { border-color: var(--dsw-alias-label-primary); }",
   ".lc-foot { color: var(--dsw-alias-label-secondary); font-size: 12px; margin-top: 4px; }",
   // ---- /context modal (centered dialog; escapes the composer anchor via fixed positioning) ----
   ".lc-modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; }",
@@ -1333,6 +1579,11 @@ var STYLES = [
   ".lc-br-pre { margin: 0; padding: 8px 10px; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; color: var(--dsw-alias-label-primary); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow-y: auto; scrollbar-width: thin; }",
   ".lc-br-dim { color: var(--dsw-alias-label-secondary); }",
   ".lc-br-call { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }",
+  // Assistant-message block title: a slim label line above each block
+  // (thinking / answer) so a mixed reply stays scannable — same weight and
+  // tone as the tool-schema card heads, without an extra bordered card.
+  ".lc-br-blk { display: flex; flex-direction: column; gap: 4px; }",
+  ".lc-br-blk-label { font-size: 11px; font-weight: 600; color: var(--dsw-alias-label-secondary); }",
   // ---- Tool schema body (browser card, tools category). The description
   // and parameter table share one "card with a small title" chrome — a
   // labeled bordered block so a reader can scan three stacked sections
@@ -1392,24 +1643,27 @@ var STYLES = [
   ".lc-br-md div p, .lc-ts-desc-md div p { margin: 6px 0; }",
   ".lc-br-md div pre, .lc-ts-desc-md div pre { margin: 6px 0; }",
   ".lc-br-md div :not(pre) > code, .lc-ts-desc-md div :not(pre) > code { font-size: 1em !important; line-height: 1.3; padding: 1px 5px; box-decoration-break: clone; }",
-  ".lc-br-md div table code, .lc-ts-desc-md div table code { font-size: inherit; }"
+  ".lc-br-md div table code, .lc-ts-desc-md div table code { font-size: inherit; }",
+  // Un-padded RichCard variant: used when the text card is one section
+  // among several (attachment cards) inside an already-indented body.
+  ".lc-br-rich-inline { display: flex; flex-direction: column; gap: 6px; }",
+  // ---- Attachment cards (image refs in a message detail). The card chrome
+  // reuses the tool-schema sections' `lc-ts-card`/`lc-ts-card-head`; only the
+  // image grid and tile are new. Each image is a 64px cover tile (the chat
+  // history's tile size) beside a name + dims + size column. ----
+  ".lc-ts-card .lc-br-pre { margin: 8px 10px; }",
+  ".lc-att-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 10px; }",
+  ".lc-att-item { display: flex; gap: 8px; align-items: center; min-width: 0; }",
+  ".lc-att-thumb { width: 64px; height: 64px; flex: none; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; overflow: hidden; background: var(--dsw-alias-bg-layer-1); cursor: pointer; font: inherit; }",
+  ".lc-att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }",
+  ".lc-att-ph, .lc-att-err { font-size: 10px; color: var(--dsw-alias-label-secondary); text-align: center; padding: 2px; }",
+  ".lc-att-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }",
+  ".lc-att-name { font-size: 12px; color: var(--dsw-alias-label-primary); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
+  ".lc-att-dims { font-size: 11px; color: var(--dsw-alias-label-secondary); }"
 ].join("\n");
 
 // src/client/components/events.tsx
 var import_dsh_client_ui_primitives2 = require("@deepseek-ai/dsh-client-ui-primitives");
-
-// src/client/format.ts
-function fmt(n) {
-  if (n === void 0 || n === null || isNaN(n)) return "\u2014";
-  if (n >= 1e6) return (n / 1e6).toFixed(1) + "M";
-  if (n >= 1e3) return (n / 1e3).toFixed(1) + "k";
-  return String(Math.round(n));
-}
-function fmtTime(t) {
-  return new Date(t).toLocaleTimeString("en-GB", { hour12: false });
-}
-
-// src/client/components/events.tsx
 var EVENT_ICONS = { compaction: "\u2702", prune: "\u2702", inject: "\uFF0B", model: "\u21C4" };
 function makeEventText(t) {
   function eventLabel(ev) {
@@ -1472,7 +1726,7 @@ function makeEventList(kit) {
 
 // src/client/meta.ts
 var PLUGIN_NAME = "dsh-context";
-var PLUGIN_VERSION = true ? "0.21.0" : "0.0.0-dev";
+var PLUGIN_VERSION = true ? "0.22.0" : "0.0.0-dev";
 var PLUGIN_REPO = true ? "https://github.com/bowenliang123/dsh-context" : "https://github.com/bowenliang123/dsh-context";
 var PLUGIN_REPO_SHORT = PLUGIN_REPO.replace(/^https?:\/\/github\.com\//, "");
 
@@ -1563,7 +1817,7 @@ function estimateSessionCost(usage, currency) {
       const b = fam[period];
       if (b === void 0) continue;
       const p = PRICES[currency][family][period];
-      total += (b.cacheRead * p.hit + (b.uncached + b.cacheWrite) * p.miss + b.output * p.out) / 1e6;
+      total += (numOf(b.cacheRead) * p.hit + (numOf(b.uncached) + numOf(b.cacheWrite)) * p.miss + numOf(b.output) * p.out) / 1e6;
       any = true;
     }
   }
@@ -1586,9 +1840,12 @@ function formatPriceRate(amount, currency) {
 
 // src/client/components/statsBoard.tsx
 function cacheHitPercent(usage) {
-  const billed = usage.uncachedInputTokens + usage.cacheReadTokens + usage.cacheWriteTokens;
+  const uncached = numOf(usage.uncachedInputTokens);
+  const reads = numOf(usage.cacheReadTokens);
+  const writes = numOf(usage.cacheWriteTokens);
+  const billed = uncached + reads + writes;
   if (billed === 0) return null;
-  const hundredths = Math.trunc(usage.cacheReadTokens / billed * 1e4 + 1e-9);
+  const hundredths = Math.trunc(reads / billed * 1e4 + 1e-9);
   return `${Math.floor(hundredths / 100)}.${String(hundredths % 100).padStart(2, "0")}`;
 }
 function makeStatsBoard(kit) {
@@ -1811,7 +2068,8 @@ function makeContextView(ctx, kit) {
   const StatsBoard = makeStatsBoard(kit);
   const PluginInfo = makePluginInfo(kit);
   const ContextBrowser = makeContextBrowser(kit, StackedBar);
-  return function ContextView(props) {
+  const ErrorBoundary = makeErrorBoundary(t);
+  function ContextViewBody(props) {
     const sessionId = props.sessionId;
     const data = typeof props.useProjection === "function" ? timelineOf(props.useProjection("contextTimeline")) : null;
     const pressure = typeof props.useProjection === "function" ? contextPressureOf(props.useProjection("contextPressure")) : null;
@@ -1835,6 +2093,12 @@ function makeContextView(ctx, kit) {
     const clearToolFocus = React.useCallback(() => {
       setToolFocus(null);
     }, []);
+    const loadImage = React.useMemo(() => {
+      if (typeof sessionId !== "string" || sessionId === "") return void 0;
+      const conversation = ctx.get("conversation");
+      if (conversation === void 0 || typeof conversation.resolveImage !== "function") return void 0;
+      return (attachment) => conversation.resolveImage(sessionId, attachment);
+    }, [sessionId]);
     const rootRef = React.useRef(null);
     const scrollerRef = React.useRef(null);
     const restoredRef = React.useRef(null);
@@ -1946,7 +2210,8 @@ function makeContextView(ctx, kit) {
         hoverKey: hoverCat,
         onHoverKey: setHoverCat,
         toolFocus,
-        onToolFocusHandled: clearToolFocus
+        onToolFocusHandled: clearToolFocus,
+        loadImage
       }
     ))), /* @__PURE__ */ React.createElement("div", { className: "lc-cols" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card lc-col" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, /* @__PURE__ */ React.createElement("span", { className: "lc-card-title-text" }, t("events.title")), /* @__PURE__ */ React.createElement("div", { className: "lc-kinds" }, EVENT_KINDS.map((k) => /* @__PURE__ */ React.createElement(
       "button",
@@ -1959,6 +2224,9 @@ function makeContextView(ctx, kit) {
       },
       t("kind." + k)
     )))), /* @__PURE__ */ React.createElement(EventList, { events: shownEvents })), /* @__PURE__ */ React.createElement("div", { className: "lc-card lc-col" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, /* @__PURE__ */ React.createElement("span", { className: "lc-card-title-text" }, t("nodes.title")), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("nodes.hint"))), /* @__PURE__ */ React.createElement(NodeList, { nodes, dropped: data.droppedNodes || 0 }))), /* @__PURE__ */ React.createElement("div", { className: "lc-foot" }, t("footer")));
+  }
+  return function ContextView(props) {
+    return h(ErrorBoundary, null, h(ContextViewBody, props));
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-context",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "A DeepSeek Harness plugin for context insight and management, with context dashboard and context command, for understanding how the context is made of, and how it evolves.",
   "author": "bowenliang123",
   "repository": {