@oversk7/pi-web-dsh-style 1.3.1 → 1.3.3

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) {
@@ -60,7 +93,14 @@ parser.validateLink = (target) => Boolean(localFileLink(target)) || validateLink
 parser.renderer.rules.link_open = (tokens, index, options, env, renderer) => {
   const token = tokens[index];
   const target = String(token.attrGet("href") || "");
-  const local = localFileLink(target, true);
+  let local = localFileLink(target, true);
+  if (local && typeof env?.cwd === "string" && !/^[A-Za-z]:[\\/]|^\\\\/.test(local.path)) {
+    const base = new URL("file:///");
+    base.pathname = `${env.cwd.replace(/\\/g, "/").replace(/%/g, "%25").replace(/\/+$/, "")}/`;
+    const relative = local.path.replace(/\\/g, "/").split("/").map(encodeURIComponent).join("/");
+    const resolved = new URL(relative, base);
+    local = localFileLink(`${resolved.href}${local.line ? `#L${local.line}` : ""}`) || local;
+  }
   if (local) {
     token.attrSet("href", local.href);
     token.attrJoin("class", "md-local-file");
@@ -84,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) {
@@ -121,6 +166,7 @@ parser.renderer.rules.task_checkbox = (tokens, index) => {
   return `<input type="checkbox" disabled${checked ? " checked" : ""} aria-label="${checked ? "已完成" : "未完成"}"/> `;
 };
 
-export function markdown(src: unknown): string {
-  return parser.render(String(src ?? ""));
+export function markdown(src: unknown, context: { cwd?: string } = {}): string {
+  const text = String(src ?? "");
+  return parser.render(text, { ...context, markdownLines: text.replace(/\r\n?/g, "\n").split("\n") });
 }

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)}