dsh-context 0.21.1 → 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

@@ -116,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",
@@ -227,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
@@ -467,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) {
@@ -601,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") {
@@ -610,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) {
@@ -631,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));
 }
@@ -672,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;
@@ -816,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")
             }
           )
@@ -1422,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
@@ -1481,26 +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) {
-  const d = new Date(t);
-  if (isNaN(d.getTime())) return "\u2014";
-  return d.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) {
@@ -1563,7 +1726,7 @@ function makeEventList(kit) {
 
 // src/client/meta.ts
 var PLUGIN_NAME = "dsh-context";
-var PLUGIN_VERSION = true ? "0.21.1" : "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\//, "");
 
@@ -1930,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);
@@ -2041,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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-context",
-  "version": "0.21.1",
+  "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": {