@oversk7/pi-web-dsh-style 1.3.2 → 1.3.4

package/web/markdown-diagrams.js

@@ -0,0 +1,147 @@
+let renderer;
+let configuredTheme;
+let sequence = 0;
+const cache = new Map();
+const rendered = new WeakMap();
+
+function diagramFragment(template) {
+  const content = template.content.cloneNode(true);
+  const prefix = `pi-diagram-${++sequence}`;
+  const ids = new Map();
+  for (const element of content.querySelectorAll("[id]")) {
+    const original = element.id;
+    const unique = `${prefix}-${ids.size}`;
+    ids.set(original, unique);
+    element.id = unique;
+  }
+  const replaceUrls = value => value.replace(/url\(\s*(["']?)#([^\s)"']+)\1\s*\)/g,
+    (match, quote, id) => ids.has(id) ? `url(${quote}#${ids.get(id)}${quote})` : match);
+  for (const element of content.querySelectorAll("*")) {
+    for (const attribute of [...element.attributes]) {
+      let value = replaceUrls(attribute.value);
+      if (["href", "xlink:href"].includes(attribute.name) && value.startsWith("#") && ids.has(value.slice(1))) {
+        value = `#${ids.get(value.slice(1))}`;
+      }
+      if (["aria-labelledby", "aria-describedby"].includes(attribute.name)) {
+        value = value.split(/\s+/).map(id => ids.get(id) || id).join(" ");
+      }
+      if (value !== attribute.value) element.setAttribute(attribute.name, value);
+    }
+    if (element.localName === "style") {
+      element.textContent = replaceUrls(element.textContent).replace(/#([\w:.-]+)/g,
+        (match, id) => ids.has(id) ? `#${ids.get(id)}` : match);
+    }
+  }
+  return content;
+}
+
+export function observeMarkdownDiagrams(root = document.body) {
+  let frame;
+  let running = false;
+  let stopped = false;
+  const pending = new Set();
+  const selector = '.md-mermaid[data-mermaid-complete="true"]';
+
+  function collect(node) {
+    if (node.nodeType !== 1) return;
+    if (node.matches(selector)) pending.add(node);
+    for (const diagram of node.querySelectorAll(selector)) pending.add(diagram);
+    if (pending.size) schedule();
+  }
+
+  async function update() {
+    frame = undefined;
+    if (running || stopped) return;
+    running = true;
+    try {
+      for (const node of [...pending]) {
+        pending.delete(node);
+        const dark = document.body.hasAttribute("data-ds-dark-theme");
+        const source = node.dataset.mermaidSource || "";
+        const key = `${dark}:${source}`;
+        if (rendered.get(node) === key || !node.isConnected) continue;
+        rendered.set(node, key);
+        if (source.length > 32 * 1024) continue;
+        try {
+          let result = cache.get(key);
+          if (!result) {
+            renderer ||= import("./assets/mermaid/mermaid.js").then(module => module.default).catch(error => {
+              renderer = undefined;
+              throw error;
+            });
+            const mermaid = await renderer;
+            if (!node.isConnected || stopped) continue;
+            if (dark !== document.body.hasAttribute("data-ds-dark-theme")) {
+              rendered.delete(node);
+              pending.add(node);
+              continue;
+            }
+            if (configuredTheme !== dark) mermaid.initialize({
+              startOnLoad: false,
+              securityLevel: "strict",
+              theme: dark ? "dark" : "default",
+              layout: "dagre",
+              suppressErrorRendering: true,
+              maxTextSize: 32 * 1024,
+              flowchart: { htmlLabels: false },
+            });
+            configuredTheme = dark;
+            const id = `pi-mermaid-${++sequence}`;
+            let svg;
+            try {
+              ({ svg } = await mermaid.render(id, source));
+            } catch {
+              result = { error: true };
+            }
+            if (!result) {
+              const template = document.createElement("template");
+              template.innerHTML = svg;
+              result = { template };
+            }
+            cache.set(key, result);
+            if (cache.size > 64) cache.delete(cache.keys().next().value);
+          }
+          if (!node.isConnected || stopped) continue;
+          if (dark !== document.body.hasAttribute("data-ds-dark-theme")) {
+            rendered.delete(node);
+            pending.add(node);
+            continue;
+          }
+          if (result.error) {
+            node.dataset.mermaidState = "error";
+            continue;
+          }
+          node.replaceChildren(diagramFragment(result.template));
+          node.dataset.mermaidState = "rendered";
+          node.setAttribute("role", "img");
+          node.setAttribute("aria-label", "Mermaid diagram");
+        } catch {
+          // Keep the readable source when a diagram is invalid or still incomplete.
+          node.dataset.mermaidState = "error";
+        }
+      }
+    } finally {
+      running = false;
+      if (pending.size) schedule();
+    }
+  }
+
+  function schedule() {
+    if (!stopped && frame === undefined) frame = requestAnimationFrame(update);
+  }
+
+  const observer = new MutationObserver(records => {
+    for (const record of records) {
+      if (record.type === "attributes") collect(root);
+      else for (const node of record.addedNodes) collect(node);
+    }
+  });
+  observer.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-ds-dark-theme"] });
+  collect(root);
+  return () => {
+    stopped = true;
+    observer.disconnect();
+    if (frame !== undefined) cancelAnimationFrame(frame);
+    pending.clear();
+  };
+}

package/web/markdown.ts

@@ -1,4 +1,6 @@
 import MarkdownIt from "markdown-it";
+import katex from "katex";
+import texmath from "markdown-it-texmath";
 import hljs from "highlight.js/lib/common";
 import dockerfile from "highlight.js/lib/languages/dockerfile";
 import powershell from "highlight.js/lib/languages/powershell";
@@ -35,7 +37,38 @@ function localFileLink(target: string, workspace = false) {
   return { path: value, line, href };
 }
 
+const formulaCache = new Map<string, string>();
+let formulaCacheBytes = 0;
+
+function renderFormula(source: string, options: katex.KatexOptions) {
+  if (source.length > 16 * 1024) throw new Error("Formula exceeds rendering limit");
+  const key = `${options.displayMode ? "display" : "inline"}:${source}`;
+  const cached = formulaCache.get(key);
+  if (cached !== undefined) {
+    formulaCache.delete(key);
+    formulaCache.set(key, cached);
+    return cached;
+  }
+  const html = katex.renderToString(source, options);
+  const bytes = (key.length + html.length) * 2;
+  if (bytes <= 1024 * 1024) {
+    formulaCache.set(key, html);
+    formulaCacheBytes += bytes;
+    while (formulaCache.size > 128 || formulaCacheBytes > 1024 * 1024) {
+      const oldest = formulaCache.keys().next().value!;
+      formulaCacheBytes -= (oldest.length + formulaCache.get(oldest)!.length) * 2;
+      formulaCache.delete(oldest);
+    }
+  }
+  return html;
+}
+
 const parser = new MarkdownIt({ html: false, breaks: false, linkify: true });
+parser.use(texmath, {
+  engine: { renderToString: renderFormula },
+  delimiters: ["dollars", "brackets"],
+  katexOptions: { trust: false, strict: "ignore", throwOnError: false, maxExpand: 1000, maxSize: 20 },
+});
 const InlineState = parser.inline.State;
 parser.inline.State = class extends InlineState {
   scanDelims(start: number, canSplitWord: boolean) {
@@ -91,9 +124,14 @@ parser.renderer.rules.image = (tokens, index, options, env, renderer) => {
   return renderImage(tokens, index, options, env, renderer);
 };
 
-parser.renderer.rules.fence = (tokens, index) => {
+parser.renderer.rules.fence = (tokens, index, _options, env) => {
   const token = tokens[index];
   const language = token.info.trim().split(/\s+/)[0];
+  if (language.toLowerCase() === "mermaid") {
+    const lastLine = (env?.markdownLines as string[] | undefined)?.[token.map![1] - 1] || "";
+    const closed = new RegExp(`^\\s*(?:>\\s*)*[${token.markup[0]}]{${token.markup.length},}\\s*$`).test(lastLine);
+    return `<div class="md-mermaid" data-mermaid-source="${escape(token.content)}" data-mermaid-complete="${closed}"><pre class="md-code-block"><code>${escape(token.content)}</code></pre></div>\n`;
+  }
   let code = escape(token.content);
   // Bound synchronous highlighting work while streaming large tool-generated snippets.
   if (language && hljs.getLanguage(language) && token.content.length <= 32 * 1024) {
@@ -129,5 +167,6 @@ parser.renderer.rules.task_checkbox = (tokens, index) => {
 };
 
 export function markdown(src: unknown, context: { cwd?: string } = {}): string {
-  return parser.render(String(src ?? ""), context);
+  const text = String(src ?? "");
+  return parser.render(text, { ...context, markdownLines: text.replace(/\r\n?/g, "\n").split("\n") });
 }

package/web/session-sync.d.ts

@@ -0,0 +1,12 @@
+export type JsonValue = null | boolean | number | string | JsonValue[] | { [key: string]: JsonValue };
+export type SessionPatch =
+  | { op: "set"; path: (string | number)[]; value: JsonValue }
+  | { op: "delete"; path: (string | number)[] }
+  | { op: "append"; path: (string | number)[]; value: string }
+  | { op: "truncate"; path: (string | number)[]; length: number };
+/** Detached JSON normalization: undefined object fields disappear; array holes become null. */
+export function canonicalizeJson(value: unknown): JsonValue | undefined;
+/** Compare canonical JSON, emitting string suffixes and changes to individual paths. */
+export function diffSessionSnapshots(previous: JsonValue, next: JsonValue): SessionPatch[];
+/** Immutable application with structural sharing; invalid or unsafe paths throw. */
+export function applySessionPatches<T extends JsonValue>(snapshot: T, patches: readonly SessionPatch[]): T;

package/web/session-sync.js

@@ -0,0 +1,105 @@
+// Paths contain object keys or array indices. Operations are set, delete (object
+// field), append (string suffix), and truncate (array length). A root set resets
+// structure. Paths traverse only own properties, including ordinary JSON keys
+// such as __proto__; assignments cannot invoke prototype setters.
+const own = (value, key) => Object.prototype.hasOwnProperty.call(value, key);
+function setOwn(value, key, item) {
+  Object.defineProperty(value, key, { value: item, enumerable: true, writable: true, configurable: true });
+}
+
+export function canonicalizeJson(value) {
+  const ancestors = new Set();
+  function visit(input, key = "") {
+    if (input && typeof input.toJSON === "function") input = input.toJSON(key);
+    if (input === null || typeof input === "string" || typeof input === "boolean") return input;
+    if (typeof input === "number") return Number.isFinite(input) ? input : null;
+    if (typeof input === "bigint") throw new TypeError("BigInt is not JSON data");
+    if (typeof input !== "object") return undefined;
+    if (ancestors.has(input)) throw new TypeError("Circular JSON data");
+    ancestors.add(input);
+    let result;
+    if (Array.isArray(input)) {
+      result = Array.from({ length: input.length }, (_, i) => visit(input[i], String(i)) ?? null);
+    } else {
+      result = {};
+      for (const key of Object.keys(input)) {
+        const item = visit(input[key], key);
+        if (item !== undefined) setOwn(result, key, item);
+      }
+    }
+    ancestors.delete(input);
+    return result;
+  }
+  return visit(value);
+}
+
+// Compare detached canonical JSON without serializing unchanged history strings.
+export function diffSessionSnapshots(previous, next) {
+  const patches = [];
+  function walk(before, after, path) {
+    if (before === after) return;
+    if (typeof before === "string" && typeof after === "string" && after.startsWith(before)) {
+      patches.push({ op: "append", path, value: after.slice(before.length) });
+    } else if (Array.isArray(before) && Array.isArray(after)) {
+      const common = Math.min(before.length, after.length);
+      for (let i = 0; i < common; i++) walk(before[i], after[i], [...path, i]);
+      for (let i = common; i < after.length; i++) patches.push({ op: "set", path: [...path, i], value: after[i] });
+      if (after.length < before.length) patches.push({ op: "truncate", path, length: after.length });
+    } else if (before && after && typeof before === "object" && typeof after === "object" && !Array.isArray(before) && !Array.isArray(after)) {
+      for (const key of Object.keys(before)) {
+        if (!own(after, key)) patches.push({ op: "delete", path: [...path, key] });
+      }
+      for (const key of Object.keys(after)) {
+        if (own(before, key)) walk(before[key], after[key], [...path, key]);
+        else patches.push({ op: "set", path: [...path, key], value: after[key] });
+      }
+    } else {
+      patches.push({ op: "set", path, value: after });
+    }
+  }
+  walk(previous, next, []);
+  return patches;
+}
+
+// Rebuild only modified paths; the input snapshot and unchanged branches retain
+// their identity. Invalid operations throw before any input can be mutated.
+export function applySessionPatches(snapshot, patches) {
+  if (!Array.isArray(patches)) throw new TypeError("Expected patches array");
+  let result = snapshot;
+  for (const patch of patches) {
+    if (!patch || !["set", "delete", "append", "truncate"].includes(patch.op) || !Array.isArray(patch.path)) throw new TypeError("Invalid patch");
+    for (const key of patch.path) {
+      if (typeof key !== "string" && (!Number.isSafeInteger(key) || key < 0)) throw new TypeError("Invalid patch path");
+    }
+    function update(current, depth) {
+      if (depth === patch.path.length) {
+        if (patch.op === "set") {
+          if (!own(patch, "value")) throw new TypeError("Missing patch value");
+          const value = canonicalizeJson(patch.value);
+          if (value === undefined) throw new TypeError("Invalid patch value");
+          return value;
+        }
+        if (patch.op === "append" && typeof current === "string" && typeof patch.value === "string") return current + patch.value;
+        if (patch.op === "truncate" && Array.isArray(current) && Number.isSafeInteger(patch.length) && patch.length >= 0 && patch.length <= current.length) return current.slice(0, patch.length);
+        throw new TypeError("Invalid patch target");
+      }
+      const key = patch.path[depth];
+      if (!current || typeof current !== "object") throw new TypeError("Invalid patch parent");
+      const array = Array.isArray(current);
+      if (array ? typeof key !== "number" || key > current.length : typeof key !== "string") throw new TypeError("Invalid patch key");
+      const leaf = depth === patch.path.length - 1;
+      const exists = own(current, key);
+      if (!exists && !(leaf && patch.op === "set")) throw new TypeError("Missing patch path");
+      const copy = array ? current.slice() : { ...current };
+      if (leaf && patch.op === "delete") {
+        if (array) throw new TypeError("Use truncate for arrays");
+        delete copy[key];
+      } else {
+        setOwn(copy, key, update(exists ? current[key] : undefined, depth + 1));
+      }
+      return copy;
+    }
+    result = update(result, 0);
+  }
+  return result;
+}

package/web/slash-commands.js

@@ -24,6 +24,7 @@ export const unsupportedSlashCommands = {
   trust: "项目信任设置需要在 Pi 终端中通过 /trust 管理。",
   changelog: "Web 暂不展示 Pi 更新日志，请在 Pi 终端执行 /changelog。",
   hotkeys: "终端快捷键不适用于网页。网页输入框支持 Enter 发送、Shift+Enter 换行，命令菜单支持方向键选择和 Tab 补全。",
+  bug: "Web 暂不支持提交问题报告，请在 Pi 终端执行 /bug。",
   debug: "此调试命令仅支持 Pi 终端。",
   arminsayshi: "此彩蛋命令仅支持 Pi 终端。",
   dementedelves: "此彩蛋命令仅支持 Pi 终端。",

package/web/themes.css

@@ -156,3 +156,49 @@ body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-back
   body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) [data-chat-flow-kind=assistant-text]{padding:14px;border-radius:16px}
   body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .pXSMma_headline{padding:10px 12px;margin:0;box-sizing:border-box}
 }
+
+/* Claude Code UI + Tokyo Night chat colors apply only in dark mode. */
+body[data-ds-dark-theme]{
+  --pi-chat-heading:#ff9e64;--pi-chat-code:#9ece6a;--pi-chat-link:#7dcfff;
+  --pi-chat-blue:#7aa2f7;--pi-chat-purple:#bb9af7;--pi-chat-orange:#ff9e64;
+  --pi-chat-green:#9ece6a;--pi-chat-red:#f7768e;--pi-chat-yellow:#e0af68;
+  --pi-chat-muted:#9aa5ce;--pi-chat-thinking:#a0a4b0;
+  --pi-chat-text:var(--dsw-alias-label-primary);
+  --pi-chat-strong:color-mix(in srgb,var(--pi-chat-heading) 28%,var(--dsw-alias-label-primary));
+  --pi-chat-border:color-mix(in srgb,var(--pi-chat-blue) 22%,var(--dsw-alias-border-l2));
+  --pi-chat-inline-bg:color-mix(in srgb,var(--pi-chat-code) 7%,var(--dsw-alias-markdown-inline-code));
+  --pi-chat-inline-border:color-mix(in srgb,var(--pi-chat-code) 20%,var(--dsw-alias-border-l2));
+}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5{color:var(--pi-chat-text)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 :is(h1,h2,h3,h4,h5,h6){color:var(--pi-chat-heading)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 strong{color:var(--pi-chat-strong);font-weight:650}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 em{color:var(--pi-chat-muted)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 a{color:var(--pi-chat-link);text-decoration-color:color-mix(in srgb,var(--pi-chat-link) 45%,transparent)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 a:is(:hover,:focus-visible){text-decoration-color:currentColor}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 a:focus-visible{outline:2px solid var(--pi-chat-link);outline-offset:3px;border-radius:2px}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 :not(pre)>code{color:var(--pi-chat-code);background:var(--pi-chat-inline-bg);border-color:var(--pi-chat-inline-border)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 :is(ul,ol)>li::marker{color:var(--pi-chat-link)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 ul>li:not(.md-task-item)::marker{content:"◉  ";font-size:.75em}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 .md-task-item input{accent-color:var(--pi-chat-green)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 blockquote{color:var(--pi-chat-muted);border-left-color:var(--pi-chat-border)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 hr{background:var(--pi-chat-border)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 :is(.md-code-container,.md-code-block,.md-code-language){border-color:var(--pi-chat-border)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 .md-code-language{color:var(--pi-chat-muted);background:var(--dsw-alias-markdown-code-block-banner);font-size:11px;letter-spacing:.03em}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 .md-code-block{color:var(--pi-chat-text)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 .md-table-wrap th{color:var(--pi-chat-heading)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 :is(.hljs-comment,.hljs-quote){color:var(--pi-chat-muted);font-style:italic}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 :is(.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-operator){color:var(--pi-chat-purple)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 :is(.hljs-string,.hljs-regexp){color:var(--pi-chat-green)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 :is(.hljs-title,.hljs-section){color:var(--pi-chat-blue)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 :is(.hljs-number,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-attr){color:var(--pi-chat-orange)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 :is(.hljs-type,.hljs-built_in,.hljs-selector-class,.hljs-selector-id){color:var(--pi-chat-link)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 :is(.hljs-meta,.hljs-doctag,.hljs-attribute){color:var(--pi-chat-yellow)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 .hljs-addition{color:var(--pi-chat-green);background:color-mix(in srgb,var(--pi-chat-green) 10%,transparent)}
+body[data-ds-dark-theme] [data-chat-flow-kind] ._markdown_1nba0_5 .hljs-deletion{color:var(--pi-chat-red);background:color-mix(in srgb,var(--pi-chat-red) 10%,transparent)}
+body[data-ds-dark-theme] [data-chat-flow-kind=assistant-step] :is(.QWLzlG_leading,.QWLzlG_title,.QWLzlG_summary){color:var(--pi-chat-thinking)}
+body[data-ds-dark-theme] [data-chat-flow-kind=assistant-step] .Y0dWHa_thinkingQuote{border-left-color:var(--pi-chat-border)}
+body[data-ds-dark-theme] [data-chat-flow-kind=assistant-step] .Y0dWHa_thinkingQuote .Y0dWHa_payload{color:var(--pi-chat-thinking);font-family:var(--dsw-font-family);line-height:1.7}
+body[data-ds-dark-theme] [data-chat-flow-kind] .CY-8Ka_root .CY-8Ka_title{color:var(--pi-chat-blue);font-weight:500}
+body[data-ds-dark-theme] [data-chat-flow-kind] .CY-8Ka_root[data-state=ok] .CY-8Ka_leading{color:var(--pi-chat-green)}
+body[data-ds-dark-theme] [data-chat-flow-kind] .CY-8Ka_root[data-state=running] :is(.CY-8Ka_leading,.CY-8Ka_title){color:var(--pi-chat-green)}
+body[data-ds-dark-theme] [data-chat-flow-kind] .CY-8Ka_root[data-state=error] :is(.CY-8Ka_leading,.CY-8Ka_title,.CY-8Ka_errorSummary){color:var(--pi-chat-red)}