dsh-context 0.18.0 → 0.19.0

package/lib/client.js

@@ -103,7 +103,13 @@ var DICT_ZH = {
   "tool.params": "\u53C2\u6570",
   "tool.paramsEmpty": "\uFF08\u65E0\u53C2\u6570\uFF09",
   "tool.jsonToggle": "\u67E5\u770B\u539F\u59CB JSON",
-  "tool.jsonHide": "\u6536\u8D77"
+  "tool.jsonHide": "\u6536\u8D77",
+  // Detail-card view switch (system prompt / tool description / message and
+  // injection bodies): a segmented pill — segment labels + tooltips.
+  "rich.raw": "\u539F\u6587",
+  "rich.md": "Markdown",
+  "rich.toMd": "\u6309 Markdown \u6E32\u67D3\u67E5\u770B",
+  "rich.toRaw": "\u67E5\u770B\u539F\u59CB\u6587\u672C"
 };
 var DICT_EN = {
   "tab": "Context",
@@ -201,7 +207,13 @@ var DICT_EN = {
   "tool.params": "Parameters",
   "tool.paramsEmpty": "(no parameters)",
   "tool.jsonToggle": "View Raw JSON",
-  "tool.jsonHide": "Collapse"
+  "tool.jsonHide": "Collapse",
+  // Detail-card view switch (system prompt / tool description / message and
+  // injection bodies): a segmented pill — segment labels + tooltips.
+  "rich.raw": "Raw",
+  "rich.md": "Markdown",
+  "rich.toMd": "View as Markdown",
+  "rich.toRaw": "View Raw Text"
 };
 
 // src/client/modalStore.ts
@@ -393,6 +405,42 @@ function makeNodeList(kit) {
   };
 }
 
+// src/client/components/richText.tsx
+var import_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+function makeRichText(kit) {
+  const { t } = kit;
+  function useRichMode() {
+    const [mode, setMode] = React.useState("md");
+    return [mode, setMode];
+  }
+  function RichSwitch(props) {
+    const seg = (m, label, tip) => /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "lc-rich-seg-btn" + (props.mode === m ? " lc-rich-seg-on" : ""),
+        title: tip,
+        onClick: () => {
+          props.onPick(m);
+        }
+      },
+      label
+    );
+    return /* @__PURE__ */ React.createElement("span", { className: "lc-rich-seg" + (props.inHead === true ? " lc-rich-seg-head" : "") }, seg("raw", t("rich.raw"), t("rich.toRaw")), seg("md", t("rich.md"), t("rich.toMd")));
+  }
+  function RichText(props) {
+    if (props.mode === "md") {
+      return /* @__PURE__ */ React.createElement("div", { className: props.mdClass ?? "lc-br-md" }, /* @__PURE__ */ React.createElement(import_dsh_client_ui_primitives.MarkdownText, { text: props.text }));
+    }
+    return /* @__PURE__ */ React.createElement("pre", { className: props.rawClass ?? "lc-br-pre" }, props.text);
+  }
+  function RichCard(props) {
+    const [mode, setMode] = useRichMode();
+    return /* @__PURE__ */ React.createElement("div", { className: props.className ?? "lc-br-content" }, /* @__PURE__ */ React.createElement(RichSwitch, { mode, onPick: setMode }), props.render(mode));
+  }
+  return { RichText, RichCard, RichSwitch, useRichMode };
+}
+
 // src/client/components/browser.tsx
 function unionTypesOf(p) {
   const branches = [];
@@ -449,7 +497,9 @@ function ParamRow(props) {
   return /* @__PURE__ */ React.createElement("div", { className: "lc-ts-param-row" }, /* @__PURE__ */ React.createElement("span", { className: "lc-ts-param-name" }, props.name), /* @__PURE__ */ React.createElement("span", { className: "lc-ts-param-type" }, typeLabel), /* @__PURE__ */ React.createElement("span", { className: props.required ? "lc-ts-param-req" : "lc-ts-param-req-off" }, props.required ? "\u2713" : "\xB7"), typeof desc === "string" && desc !== "" ? /* @__PURE__ */ React.createElement("span", { className: "lc-ts-param-desc" }, desc) : null);
 }
 function ToolSchema(props) {
+  const { rich } = props;
   const [jsonOpen, setJsonOpen] = React.useState(false);
+  const [descMode, setDescMode] = rich.useRichMode();
   const params = React.useMemo(() => paramsOf(props.schema), [props.schema]);
   const rows = React.useMemo(() => {
     if (params === null) return [];
@@ -468,7 +518,15 @@ function ToolSchema(props) {
     () => props.schema !== void 0 ? JSON.stringify(props.schema, null, 2) : "",
     [props.schema]
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.description !== void 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.desc)), /* @__PURE__ */ React.createElement("pre", { className: "lc-ts-desc-body" }, props.description)) : null, params !== null && rows.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.title), /* @__PURE__ */ React.createElement("span", { className: "lc-ts-card-count" }, rows.length)), rows.map((r) => /* @__PURE__ */ React.createElement(ParamRow, { key: r.name, name: r.name, schema: r.schema, required: r.required }))) : params !== null ? /* @__PURE__ */ React.createElement("div", { className: "lc-ts-params-empty" }, props.labels.empty) : null, schemaJson !== "" ? /* @__PURE__ */ React.createElement("div", { className: "lc-ts-json" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.description !== void 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.desc), /* @__PURE__ */ React.createElement(rich.RichSwitch, { mode: descMode, onPick: setDescMode, inHead: true })), /* @__PURE__ */ React.createElement(
+    rich.RichText,
+    {
+      text: props.description,
+      mode: descMode,
+      rawClass: "lc-ts-desc-body",
+      mdClass: "lc-ts-desc-md"
+    }
+  )) : null, params !== null && rows.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.title), /* @__PURE__ */ React.createElement("span", { className: "lc-ts-card-count" }, rows.length)), rows.map((r) => /* @__PURE__ */ React.createElement(ParamRow, { key: r.name, name: r.name, schema: r.schema, required: r.required }))) : params !== null ? /* @__PURE__ */ React.createElement("div", { className: "lc-ts-params-empty" }, props.labels.empty) : null, schemaJson !== "" ? /* @__PURE__ */ React.createElement("div", { className: "lc-ts-json" }, /* @__PURE__ */ React.createElement(
     "button",
     {
       type: "button",
@@ -481,27 +539,37 @@ function ToolSchema(props) {
   ), jsonOpen ? /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre lc-br-dim" }, schemaJson) : null) : null);
 }
 function RawBlocks(props) {
+  const { rich } = 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") {
-      return /* @__PURE__ */ React.createElement("pre", { key: i, className: "lc-br-pre" + (blk.type === "reasoning" ? " lc-br-dim" : "") }, blk.text);
+      if (blk.type === "reasoning") {
+        return /* @__PURE__ */ React.createElement("pre", { key: i, className: "lc-br-pre lc-br-dim" }, blk.text);
+      }
+      return /* @__PURE__ */ React.createElement(rich.RichText, { key: i, text: blk.text, mode: props.mode });
     }
     if (blk !== null && typeof blk === "object" && blk.type === "tool-result" && Array.isArray(blk.content)) {
-      return /* @__PURE__ */ React.createElement(RawBlocks, { key: i, blocks: blk.content });
+      return /* @__PURE__ */ React.createElement(RawBlocks, { key: i, blocks: blk.content, mode: props.mode, rich });
     }
     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 } = props;
+  const { node, conv, rich } = 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) {
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, node.text !== void 0 && node.text !== "" ? /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre" }, node.text) : null, /* @__PURE__ */ React.createElement("div", { className: "lc-br-note" }, props.hint));
+    if (node.text === void 0 || node.text === "") {
+      return /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, /* @__PURE__ */ React.createElement("div", { className: "lc-br-note" }, props.hint));
+    }
+    return wrap((mode) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(rich.RichText, { text: node.text ?? "", mode }), /* @__PURE__ */ React.createElement("div", { className: "lc-br-note" }, props.hint)));
   }
   if (conv.kind === "assistant" && Array.isArray(conv.blocks)) {
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, conv.blocks.map((b, i) => {
+    const blocks = conv.blocks;
+    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("pre", { key: i, className: "lc-br-pre" }, blk.text);
+        return /* @__PURE__ */ React.createElement(rich.RichText, { key: i, 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);
@@ -510,16 +578,16 @@ function NodeContent(props) {
         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);
       }
       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 }) : 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 }) : null);
   }
   if (conv.kind === "compaction") {
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, typeof conv.summary === "string" && conv.summary !== "" ? /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre" }, conv.summary) : null);
+    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 /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, /* @__PURE__ */ React.createElement(RawBlocks, { blocks: conv.content }));
+    return wrap((mode) => /* @__PURE__ */ React.createElement(RawBlocks, { blocks: conv.content, mode, rich }));
   }
   return /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, /* @__PURE__ */ React.createElement("div", { className: "lc-br-note" }, props.hint));
 }
@@ -541,6 +609,7 @@ function lastOfTurn(requests, turn) {
 function makeContextBrowser(kit, StackedBar) {
   const { t, fmt: fmt3, fmtTime: fmtTime2, catLabel } = kit;
   const nodeText = makeNodeText(kit);
+  const rich = makeRichText(kit);
   const catColor = {};
   for (const c of CATS) catColor[c.key] = c.color;
   const MAX_AUTO_PAGES = 20;
@@ -637,7 +706,7 @@ function makeContextBrowser(kit, StackedBar) {
           system.replace(/\s+/g, " ").trim().slice(0, 80),
           breakdown.system,
           void 0,
-          /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre" }, system))
+          /* @__PURE__ */ React.createElement(rich.RichCard, { render: (mode) => /* @__PURE__ */ React.createElement(rich.RichText, { text: system, mode }) })
         );
       }
       if (c === "tools") {
@@ -656,7 +725,7 @@ function makeContextBrowser(kit, StackedBar) {
             tool.name,
             tool.tokens,
             void 0,
-            /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, /* @__PURE__ */ React.createElement(ToolSchema, { description: tool.description, schema: tool.schema, labels }))
+            /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, /* @__PURE__ */ React.createElement(ToolSchema, { description: tool.description, schema: tool.schema, rich, labels }))
           );
         });
       }
@@ -684,6 +753,7 @@ function makeContextBrowser(kit, StackedBar) {
             {
               node: n,
               conv: bySeq.get(n.seq),
+              rich,
               hint: bySeq.get(n.seq) === void 0 && awaiting ? t("browser.loading") : t("browser.noContent")
             }
           )
@@ -1262,11 +1332,42 @@ var STYLES = [
   // body compact).
   ".lc-ts-json { display: flex; flex-direction: column; gap: 4px; }",
   ".lc-ts-json-toggle { align-self: flex-start; border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font: inherit; font-size: 11px; padding: 0; cursor: pointer; }",
-  ".lc-ts-json-toggle:hover { color: var(--dsw-alias-label-primary); text-decoration: underline; }"
+  ".lc-ts-json-toggle:hover { color: var(--dsw-alias-label-primary); text-decoration: underline; }",
+  // ---- Raw/markdown view switch (detail cards: system prompt, tool
+  // description, user/assistant message + injection bodies). A segmented
+  // pill mirroring the trend chart's 步骤/轮次 control (`lc-gran`), riding
+  // the card's top-right corner as a self-end item of the content column
+  // (no absolute overlay, so it never covers text); the `in-head` variant
+  // sits at the right end of the tool description card's title row. The
+  // markdown box reuses the raw <pre> chrome minus the pre whitespace. ----
+  ".lc-rich-seg { align-self: flex-end; display: flex; gap: 2px; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 1px; }",
+  ".lc-rich-seg-btn { border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 11px; line-height: 1; padding: 3px 8px; border-radius: 5px; cursor: pointer; font-family: inherit; }",
+  ".lc-rich-seg-btn:hover { color: var(--dsw-alias-label-primary); }",
+  ".lc-rich-seg-on, .lc-rich-seg-on:hover { background: var(--dsw-alias-button-primary-fill); color: var(--dsw-alias-label-primary-foreground); }",
+  ".lc-rich-seg-head { align-self: auto; margin-left: auto; }",
+  ".lc-br-md { padding: 4px 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; word-break: break-word; max-height: 320px; overflow-y: auto; scrollbar-width: thin; }",
+  ".lc-ts-desc-md { padding: 4px 10px; color: var(--dsw-alias-label-primary); font-size: 12px; line-height: 1.55; word-break: break-word; max-height: 160px; overflow-y: auto; scrollbar-width: thin; }",
+  // The shared markdown renderer sizes its root/headings for chat bubbles;
+  // inside a detail card the base size sits one step ABOVE the raw text
+  // (13px vs 12px — a proportional face at 13px matches the visual weight
+  // of the raw view's 12px monospace) and the heading scale collapses to a
+  // weight-only bump (specificity beats the renderer's one-class rules).
+  // Inline code keeps the FULL size too — the renderer shrinks it to
+  // 0.875em (!important) and table code to 13px, both visibly off. Its
+  // `font` shorthand also drags in a ~22px line-height, TALLER than the
+  // 13px/1.55 paragraph line (~20px), so a code chip wrapping onto the
+  // next line sticks to the neighbor line's chip; pin the chip just under
+  // the paragraph line (1.3em + 1px padding ≈ 19px) to reopen the gap.
+  ".lc-br-md > div, .lc-ts-desc-md > div { font-size: 13px; line-height: 1.55; }",
+  ".lc-br-md div :is(h1, h2, h3, h4, h5, h6), .lc-ts-desc-md div :is(h1, h2, h3, h4, h5, h6) { font-size: 13px; font-weight: 600; margin: 10px 0 4px; }",
+  ".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; }"
 ].join("\n");
 
 // src/client/components/events.tsx
-var import_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+var import_dsh_client_ui_primitives2 = require("@deepseek-ai/dsh-client-ui-primitives");
 
 // src/client/format.ts
 function fmt(n) {
@@ -1334,7 +1435,7 @@ function makeEventList(kit) {
     return /* @__PURE__ */ React.createElement("div", { className: "lc-events", ref: rootRef }, sorted.map((ev, i) => {
       const label = eventLabel(ev);
       const at = eventAt(ev);
-      const glyph = ev.kind === "inject" ? /* @__PURE__ */ React.createElement(import_dsh_client_ui_primitives.IconPlusOutline16, null) : ev.kind === "model" ? /* @__PURE__ */ React.createElement(import_dsh_client_ui_primitives.IconBranchOutline16, null) : EVENT_ICONS[ev.kind] || "\u2022";
+      const glyph = ev.kind === "inject" ? /* @__PURE__ */ React.createElement(import_dsh_client_ui_primitives2.IconPlusOutline16, null) : ev.kind === "model" ? /* @__PURE__ */ React.createElement(import_dsh_client_ui_primitives2.IconBranchOutline16, null) : EVENT_ICONS[ev.kind] || "\u2022";
       return /* @__PURE__ */ React.createElement("div", { key: ev.seq + "-" + i, className: "lc-event" }, /* @__PURE__ */ React.createElement("span", { className: "lc-event-icon lc-event-" + ev.kind }, glyph), /* @__PURE__ */ React.createElement("span", { className: "lc-kind lc-kind-" + ev.kind }, t("kind." + ev.kind)), /* @__PURE__ */ React.createElement("span", { className: "lc-event-label" }, label), at !== null ? /* @__PURE__ */ React.createElement("span", { className: "lc-event-at" }, at) : null, ev.tokens ? /* @__PURE__ */ React.createElement("span", { className: "lc-event-tokens" + (ev.kind === "inject" ? " lc-up" : " lc-down") }, (ev.kind === "inject" ? "+" : "\u2212") + fmt3(ev.tokens)) : null, /* @__PURE__ */ React.createElement("span", { className: "lc-event-time" }, fmtTime2(ev.time)));
     }));
   };
@@ -1342,7 +1443,7 @@ function makeEventList(kit) {
 
 // src/client/meta.ts
 var PLUGIN_NAME = "dsh-context";
-var PLUGIN_VERSION = true ? "0.18.0" : "0.0.0-dev";
+var PLUGIN_VERSION = true ? "0.19.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\//, "");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-context",
-  "version": "0.18.0",
+  "version": "0.19.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": {
@@ -26,6 +26,7 @@
   ],
   "scripts": {
     "build": "tsup",
+    "watch": "tsup --watch",
     "register": "bash scripts/register.sh",
     "typecheck": "tsc --noEmit",
     "test": "npm run typecheck && node tests/host.test.mjs && node tests/client.test.mjs",