@hienlh/ppm 0.9.83 → 0.9.85

package/src/web/components/shared/markdown-code-block.tsx

@@ -0,0 +1,142 @@
+import { useState, useEffect, useRef, type ReactNode } from "react";
+import mermaid from "mermaid";
+import { useMdContext, FILE_EXT_RE, GLOB_CHARS_RE } from "./markdown-context";
+import { useTabStore } from "@/stores/tab-store";
+
+const MERMAID_KEYWORDS = /^(sequenceDiagram|flowchart|graph\s|classDiagram|stateDiagram|erDiagram|journey|gantt|pie|quadrantChart|requirementDiagram|gitGraph|mindmap|timeline|sankey|xychart|block-beta|packet-beta|architecture-beta|kanban)\b/;
+
+let mermaidInitialized = false;
+function ensureMermaidInit() {
+  if (mermaidInitialized) return;
+  mermaid.initialize({ startOnLoad: false, theme: "default", securityLevel: "loose", fontFamily: "ui-sans-serif, system-ui, sans-serif" });
+  mermaidInitialized = true;
+}
+
+/** Extract plain text from a hast node tree */
+function hastToText(node: any): string {
+  if (!node) return "";
+  if (node.type === "text") return node.value ?? "";
+  if (node.children) return node.children.map(hastToText).join("");
+  return "";
+}
+
+/** Pre — code block wrapper with mermaid detection and action buttons */
+export function MdPre({ children, node, ...rest }: any) {
+  const { codeActions, projectName, openDiagramOverlay } = useMdContext();
+  const openTab = useTabStore((s) => s.openTab);
+
+  const codeNode = node?.children?.[0];
+  const langClass = (codeNode?.properties?.className ?? []).find((c: string) => c.startsWith("language-"));
+  const lang = langClass?.replace("language-", "");
+  const text = hastToText(codeNode);
+
+  // Mermaid detection
+  if (lang === "mermaid" || (!lang && MERMAID_KEYWORDS.test(text.trim()))) {
+    return <MermaidDiagram source={text.trim()} />;
+  }
+
+  const isBash = /^(bash|sh|shell|zsh)$/.test(lang || "") || (!lang && text.startsWith("$"));
+
+  return (
+    <pre {...rest} className={`relative group ${rest.className || ""}`}>
+      {children}
+      {codeActions && (
+        <div className="code-actions absolute top-1 right-1 flex gap-1">
+          <ActionBtn title="Copy" icon={<CopyIcon />} activeIcon={<CheckIcon />} onClick={() => navigator.clipboard.writeText(text)} />
+          {isBash && projectName && (
+            <ActionBtn
+              title="Run in terminal"
+              icon={<PlayIcon />}
+              onClick={() => {
+                navigator.clipboard.writeText(text.replace(/^\$\s*/gm, ""));
+                openTab({ type: "terminal", title: "Terminal", metadata: { projectName }, projectId: projectName, closable: true });
+              }}
+            />
+          )}
+        </div>
+      )}
+    </pre>
+  );
+}
+
+/** Code — inline code with file clicking; block code passes through */
+export function MdCode({ className, children, node, ...rest }: any) {
+  const { openFileOrSearch } = useMdContext();
+
+  // Block code (has language/hljs class from rehype-highlight) — render as-is
+  if (className) return <code className={className} {...rest}>{children}</code>;
+
+  // Inline code — check for clickable file paths
+  const text = String(children ?? "").trim();
+  if (text && !text.includes(" ") && !GLOB_CHARS_RE.test(text) && FILE_EXT_RE.test(text)) {
+    return (
+      <code
+        onClick={() => openFileOrSearch(text)}
+        style={{ cursor: "pointer", textDecoration: "underline", textDecorationStyle: "dotted" as const }}
+        {...rest}
+      >
+        {children}
+      </code>
+    );
+  }
+
+  return <code {...rest}>{children}</code>;
+}
+
+/** Mermaid diagram renderer with click-to-expand */
+function MermaidDiagram({ source }: { source: string }) {
+  const { openDiagramOverlay } = useMdContext();
+  const [svg, setSvg] = useState<string | null>(null);
+
+  useEffect(() => {
+    ensureMermaidInit();
+    const id = `mermaid-${Math.random().toString(36).slice(2, 9)}`;
+    mermaid.render(id, source).then(({ svg }) => setSvg(svg)).catch(() => {});
+  }, [source]);
+
+  if (!svg) return <pre><code>{source}</code></pre>;
+
+  return (
+    <div
+      className="mermaid-diagram group relative cursor-pointer rounded-lg border border-border bg-white dark:bg-zinc-50 p-3 overflow-x-auto my-2"
+      onClick={() => openDiagramOverlay(svg)}
+    >
+      <div dangerouslySetInnerHTML={{ __html: svg }} />
+      <div className="absolute top-2 right-2 flex items-center gap-1 px-2 py-1 rounded bg-black/60 text-white text-xs can-hover:opacity-0 can-hover:group-hover:opacity-100 transition-opacity pointer-events-none">
+        Click to expand
+      </div>
+    </div>
+  );
+}
+
+/** Reusable code-block action button with optional active state */
+function ActionBtn({ title, icon, activeIcon, onClick }: { title: string; icon: ReactNode; activeIcon?: ReactNode; onClick: () => void }) {
+  const [active, setActive] = useState(false);
+  return (
+    <button
+      className="flex items-center justify-center size-6 rounded bg-surface-elevated/80 hover:bg-surface-elevated text-text-secondary hover:text-text-primary transition-colors border border-border/50"
+      title={title}
+      onClick={() => { onClick(); if (activeIcon) { setActive(true); setTimeout(() => setActive(false), 2000); } }}
+    >
+      {active && activeIcon ? activeIcon : icon}
+    </button>
+  );
+}
+
+const CopyIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+  </svg>
+);
+
+const CheckIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="20 6 9 17 4 12" />
+  </svg>
+);
+
+const PlayIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" />
+  </svg>
+);

package/src/web/components/shared/markdown-context.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react";
+
+/** Common text file extensions that PPM can open as editor tabs */
+const FILE_EXTS = "ts|tsx|js|jsx|mjs|cjs|py|json|md|mdx|yaml|yml|toml|css|scss|less|html|htm|sh|bash|zsh|go|rs|sql|rb|java|kt|swift|c|cpp|h|hpp|cs|vue|svelte|txt|env|cfg|conf|ini|xml|csv|log|dockerfile|makefile|gradle";
+export const FILE_EXT_RE = new RegExp(`\\.(${FILE_EXTS})$`, "i");
+/** Glob/regex chars that indicate a pattern, not a real file */
+export const GLOB_CHARS_RE = /[*?{}\[\]]/;
+/** Detect local absolute file paths (Unix or Windows) */
+export const LOCAL_PATH_RE = /^(\/|[A-Za-z]:[/\\])/;
+
+export interface MdContextValue {
+  projectName?: string;
+  codeActions: boolean;
+  openFileOrSearch: (path: string) => void;
+  openImageOverlay: (url: string, alt: string) => void;
+  openDiagramOverlay: (svg: string) => void;
+}
+
+export const MdContext = createContext<MdContextValue>(null!);
+export const useMdContext = () => useContext(MdContext);

package/src/web/components/shared/markdown-renderer.tsx

@@ -1,6 +1,11 @@
-import { useMemo, useRef, useEffect } from "react";
-import { marked } from "marked";
-import markedKatex from "marked-katex-extension";
+import { useMemo, useCallback, useState, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import remarkBreaks from "remark-breaks";
+import rehypeRaw from "rehype-raw";
+import rehypeKatex from "rehype-katex";
+import rehypeHighlight from "rehype-highlight";
 import { useTabStore } from "@/stores/tab-store";
 import { useFileStore, type FileNode } from "@/stores/file-store";
 import { useImageOverlay } from "@/stores/image-overlay-store";
@@ -8,35 +13,8 @@ import { useDiagramOverlay } from "@/stores/diagram-overlay-store";
 import { openCommandPalette } from "@/hooks/use-global-keybindings";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
 import { basename } from "@/lib/utils";
-import mermaid from "mermaid";
-
-/** Mermaid keywords that start a diagram definition */
-const MERMAID_KEYWORDS = /^(sequenceDiagram|flowchart|graph\s|classDiagram|stateDiagram|erDiagram|journey|gantt|pie|quadrantChart|requirementDiagram|gitGraph|mindmap|timeline|sankey|xychart|block-beta|packet-beta|architecture-beta|kanban)\b/;
-
-let mermaidInitialized = false;
-function ensureMermaidInit() {
-  if (mermaidInitialized) return;
-  mermaid.initialize({
-    startOnLoad: false,
-    theme: "default",
-    securityLevel: "loose",
-    fontFamily: "ui-sans-serif, system-ui, sans-serif",
-  });
-  mermaidInitialized = true;
-}
-
-/** Detect local absolute file paths (Unix or Windows) */
-const LOCAL_PATH_RE = /^(\/|[A-Za-z]:[/\\])/;
-
-// Configure marked globally
-marked.use({ gfm: true, breaks: true });
-marked.use(markedKatex({ throwOnError: false }));
-
-/** Common text file extensions that PPM can open as editor tabs */
-const FILE_EXTS = "ts|tsx|js|jsx|mjs|cjs|py|json|md|mdx|yaml|yml|toml|css|scss|less|html|htm|sh|bash|zsh|go|rs|sql|rb|java|kt|swift|c|cpp|h|hpp|cs|vue|svelte|txt|env|cfg|conf|ini|xml|csv|log|dockerfile|makefile|gradle";
-const FILE_EXT_RE = new RegExp(`\\.(${FILE_EXTS})$`, "i");
-/** Glob/regex chars that indicate a pattern, not a real file */
-const GLOB_CHARS_RE = /[*?{}\[\]]/;
+import { MdContext, useMdContext, FILE_EXT_RE, GLOB_CHARS_RE, LOCAL_PATH_RE } from "./markdown-context";
+import { MdPre, MdCode } from "./markdown-code-block";
 
 interface MarkdownRendererProps {
   content: string;
@@ -46,286 +24,133 @@ interface MarkdownRendererProps {
   isStreaming?: boolean;
 }
 
-/**
- * Transform HTML string:
- * - Wrap tables in scrollable container
- * - Add target=_blank to external links
- * - Mark <a> file paths with data-file-path
- * - Make inline <code> with file names clickable (via HTML transform, not DOM)
- */
-function transformHtml(raw: string): string {
-  let html = raw;
+/** Plugin arrays — stable references to avoid re-creating on each render */
+const remarkPlugins = [remarkGfm, remarkMath, remarkBreaks] as any;
+const rehypePlugins = [rehypeRaw, rehypeKatex, rehypeHighlight] as any;
 
-  // Wrap <table> in scroll container
-  html = html.replace(/<table/g, '<div class="table-scroll-wrapper overflow-x-auto"><table');
-  html = html.replace(/<\/table>/g, "</table></div>");
+/** Component map — stable references; dynamic state flows through MdContext */
+const mdComponents = { a: MdLink, img: MdImage, pre: MdPre, code: MdCode, table: MdTable };
 
-  // External links → target=_blank
-  html = html.replace(
-    /<a\s+href="(https?:\/\/[^"]+)"/g,
-    '<a href="$1" target="_blank" rel="noopener noreferrer"',
-  );
-
-  // <a> with file paths → add data-file-path (only files, not folders or glob patterns)
-  html = html.replace(/<a\s+href="([^"]+)"/g, (match, href: string) => {
-    if (/^https?:\/\//.test(href)) return match; // already handled
-    if (GLOB_CHARS_RE.test(href)) return match; // skip glob/regex patterns
-    if (!FILE_EXT_RE.test(href)) return match; // must have a file extension
-    return `<a href="${href}" data-file-path="${href}"`;
-  });
-
-  // Inline <code> with file-like names → make clickable
-  // Split by <pre>...</pre> blocks to avoid transforming code inside them
-  const parts = html.split(/(<pre[\s\S]*?<\/pre>)/g);
-  html = parts.map((part) => {
-    // Skip <pre> blocks
-    if (part.startsWith("<pre")) return part;
-    // Transform inline <code> in non-pre content
-    return part.replace(
-      /<code>([^<]+)<\/code>/g,
-      (match, text: string) => {
-        const trimmed = text.trim();
-        if (!trimmed || trimmed.includes(" ")) return match;
-        if (GLOB_CHARS_RE.test(trimmed)) return match; // skip glob/regex patterns
-        if (!FILE_EXT_RE.test(trimmed)) return match; // must have a file extension
-        return `<code data-file-clickable="${trimmed}" style="cursor:pointer;text-decoration:underline;text-decoration-style:dotted">${text}</code>`;
-      },
-    );
-  }).join("");
-
-  return html;
+function findInTree(nodes: FileNode[], name: string): string[] {
+  const results: string[] = [];
+  for (const n of nodes) {
+    if (n.type === "file" && n.name === name) results.push(n.path);
+    if (n.children) results.push(...findInTree(n.children, name));
+  }
+  return results;
 }
 
 export function MarkdownRenderer({ content, projectName, className = "", codeActions = false, isStreaming = false }: MarkdownRendererProps) {
-  const html = useMemo(() => {
-    try {
-      const raw = marked.parse(content) as string;
-      return transformHtml(raw);
-    } catch {
-      return content;
-    }
-  }, [content]);
-
-  const containerRef = useRef<HTMLDivElement>(null);
   const openTab = useTabStore((s) => s.openTab);
   const fileTree = useFileStore((s) => s.tree);
-  const openImageOverlay = useImageOverlay((s) => s.open);
-  const openDiagramOverlay = useDiagramOverlay((s) => s.open);
+  const openImageOverlayFn = useImageOverlay((s) => s.open);
+  const openDiagramOverlayFn = useDiagramOverlay((s) => s.open);
 
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    // --- Render mermaid diagrams ---
-    const renderMermaid = async () => {
-      ensureMermaidInit();
-      const pres = container.querySelectorAll("pre");
-      for (const pre of pres) {
-        const code = pre.querySelector("code");
-        if (!code) continue;
-        const langClass = code.className ?? "";
-        const text = (code.textContent ?? "").trim();
-        const isMermaid = langClass.includes("language-mermaid") || MERMAID_KEYWORDS.test(text);
-        if (!isMermaid) continue;
-
-        try {
-          const id = `mermaid-${Math.random().toString(36).slice(2, 9)}`;
-          const { svg } = await mermaid.render(id, text);
-          const wrapper = document.createElement("div");
-          wrapper.className = "mermaid-diagram group relative cursor-pointer rounded-lg border border-border bg-white dark:bg-zinc-50 p-3 overflow-x-auto my-2";
-          wrapper.innerHTML = svg;
-          // Expand icon hint
-          const hint = document.createElement("div");
-          hint.className = "absolute top-2 right-2 flex items-center gap-1 px-2 py-1 rounded bg-black/60 text-white text-xs can-hover:opacity-0 can-hover:group-hover:opacity-100 transition-opacity pointer-events-none";
-          hint.textContent = "Click to expand";
-          wrapper.appendChild(hint);
-          // Click to open overlay
-          wrapper.addEventListener("click", () => openDiagramOverlay(svg));
-          pre.replaceWith(wrapper);
-        } catch {
-          // Render failed — leave as code block
-        }
-      }
-    };
-    renderMermaid();
-
-    // --- Click handler for file links and clickable code ---
-    const handleClick = (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
+  const openFileOrSearch = useCallback((filePath: string) => {
+    if (!filePath) return;
+    const isAbsolute = /^(\/|[A-Za-z]:[/\\])/.test(filePath);
+    const isRelative = /^(\.\/|\.\.\/)/.test(filePath);
+    const fileName = basename(filePath);
 
-      // Check <a data-file-path>
-      const link = target.closest("a[data-file-path]") as HTMLAnchorElement | null;
-      if (link && container.contains(link)) {
-        e.preventDefault();
-        openFileOrSearch(link.getAttribute("data-file-path") ?? "");
-        return;
-      }
-
-      // Check clickable <code>
-      const code = target.closest("code[data-file-clickable]") as HTMLElement | null;
-      if (code && container.contains(code)) {
-        openFileOrSearch(code.getAttribute("data-file-clickable") ?? "");
-        return;
+    const searchAndOpen = (fp: string) => {
+      const matches = findInTree(fileTree, basename(fp));
+      if (matches.length === 1) {
+        openTab({ type: "editor", title: basename(fp), metadata: { filePath: matches[0], projectName }, projectId: projectName ?? null, closable: true });
+      } else {
+        openCommandPalette(fp);
       }
     };
 
-    /** Search file tree for matches by filename */
-    function findInTree(nodes: FileNode[], name: string): string[] {
-      const results: string[] = [];
-      for (const node of nodes) {
-        if (node.type === "file" && node.name === name) results.push(node.path);
-        if (node.children) results.push(...findInTree(node.children, name));
-      }
-      return results;
-    }
-
-    function openFileOrSearch(filePath: string) {
-      if (!filePath) return;
-      const isAbsolute = /^(\/|[A-Za-z]:[/\\])/.test(filePath);
-      const isRelative = /^(\.\/|\.\.\/)/.test(filePath);
-      const fileName = basename(filePath);
-
-      // Absolute path → verify then open
-      if (isAbsolute) {
-        const meta: Record<string, unknown> = { filePath };
-        if (projectName) meta.projectName = projectName;
-        api.get(`/api/fs/read?path=${encodeURIComponent(filePath)}`).then(() => {
-          openTab({ type: "editor", title: fileName, metadata: meta, projectId: null, closable: true });
-        }).catch(() => openCommandPalette(filePath));
-        return;
-      }
-
-      // Relative path with ./ or ../ → try exact path in project
-      if (isRelative && projectName) {
-        const meta: Record<string, unknown> = { filePath, projectName };
-        api.get(`${projectUrl(projectName)}/files/read?path=${encodeURIComponent(filePath)}`)
-          .then(() => {
-            openTab({ type: "editor", title: fileName, metadata: meta, projectId: projectName, closable: true });
-          })
-          .catch(() => searchAndOpen(filePath));
-        return;
-      }
-
-      // Just a filename → search in project tree
-      searchAndOpen(filePath);
+    if (isAbsolute) {
+      const meta: Record<string, unknown> = { filePath };
+      if (projectName) meta.projectName = projectName;
+      api.get(`/api/fs/read?path=${encodeURIComponent(filePath)}`).then(() => {
+        openTab({ type: "editor", title: fileName, metadata: meta, projectId: null, closable: true });
+      }).catch(() => openCommandPalette(filePath));
+      return;
     }
 
-    /** Search project file tree; if 1 match → open directly, else → command palette with full path */
-    function searchAndOpen(filePath: string) {
-      const fileName = basename(filePath);
-      const matches = findInTree(fileTree, fileName);
-      if (matches.length === 1) {
-        const match = matches[0]!;
-        openTab({
-          type: "editor",
-          title: fileName,
-          metadata: { filePath: match, projectName },
-          projectId: projectName ?? null,
-          closable: true,
-        });
-      } else {
-        openCommandPalette(filePath);
-      }
+    if (isRelative && projectName) {
+      api.get(`${projectUrl(projectName)}/files/read?path=${encodeURIComponent(filePath)}`)
+        .then(() => openTab({ type: "editor", title: fileName, metadata: { filePath, projectName }, projectId: projectName, closable: true }))
+        .catch(() => searchAndOpen(filePath));
+      return;
     }
 
-    container.addEventListener("click", handleClick);
-
-    // --- Auth-load images with local file paths ---
-    const blobUrls: string[] = [];
-    container.querySelectorAll("img").forEach((img) => {
-      const src = img.getAttribute("src") ?? "";
-      // Only intercept local file paths, not http/data/blob URLs
-      if (!LOCAL_PATH_RE.test(src)) return;
-      // Mark as loading
-      img.style.opacity = "0.3";
-      img.style.minHeight = "48px";
-      img.style.minWidth = "48px";
-      const token = getAuthToken();
-      fetch(`/api/fs/raw?path=${encodeURIComponent(src)}`, {
-        headers: token ? { Authorization: `Bearer ${token}` } : {},
-      })
-        .then((r) => {
-          if (!r.ok) throw new Error("Failed to load");
-          return r.blob();
-        })
-        .then((blob) => {
-          const url = URL.createObjectURL(blob);
-          blobUrls.push(url);
-          img.src = url;
-          img.style.opacity = "";
-          img.style.minHeight = "";
-          img.style.minWidth = "";
-          // Style: constrain size, add border like AuthImage
-          img.style.maxHeight = "400px";
-          img.style.maxWidth = "100%";
-          img.style.objectFit = "contain";
-          img.style.borderRadius = "0.375rem";
-          img.style.border = "1px solid var(--color-border)";
-          img.style.cursor = "pointer";
-          img.onclick = () => openImageOverlay(url, img.alt || basename(src));
-        })
-        .catch(() => {
-          img.style.opacity = "0.5";
-          img.alt = `[Image not found: ${basename(src)}]`;
-        });
-    });
+    searchAndOpen(filePath);
+  }, [openTab, fileTree, projectName]);
 
-    // --- Code block copy/run buttons ---
-    if (codeActions) {
-      container.querySelectorAll("pre").forEach((pre) => {
-        if (pre.querySelector(".code-actions")) return;
-        const code = pre.querySelector("code");
-        const text = code?.textContent ?? pre.textContent ?? "";
-        const langClass = code?.className ?? "";
-        const isBash = /language-(bash|sh|shell|zsh)/.test(langClass)
-          || (!langClass.includes("language-") && text.startsWith("$"));
+  const ctx = useMemo(() => ({
+    projectName, codeActions, openFileOrSearch,
+    openImageOverlay: openImageOverlayFn,
+    openDiagramOverlay: openDiagramOverlayFn,
+  }), [projectName, codeActions, openFileOrSearch, openImageOverlayFn, openDiagramOverlayFn]);
 
-        pre.style.position = "relative";
-        pre.classList.add("group");
-
-        const actions = document.createElement("div");
-        actions.className = "code-actions absolute top-1 right-1 flex gap-1";
+  return (
+    <MdContext.Provider value={ctx}>
+      <div className={`markdown-content prose-sm ${isStreaming ? "is-streaming" : ""} ${className}`}>
+        <ReactMarkdown remarkPlugins={remarkPlugins} rehypePlugins={rehypePlugins} components={mdComponents}>
+          {content}
+        </ReactMarkdown>
+      </div>
+    </MdContext.Provider>
+  );
+}
 
-        const copyBtn = document.createElement("button");
-        copyBtn.className = "flex items-center justify-center size-6 rounded bg-surface-elevated/80 hover:bg-surface-elevated text-text-secondary hover:text-text-primary transition-colors border border-border/50";
-        copyBtn.title = "Copy";
-        copyBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
-        copyBtn.addEventListener("click", () => {
-          navigator.clipboard.writeText(text);
-          copyBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
-          setTimeout(() => {
-            copyBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
-          }, 2000);
-        });
-        actions.appendChild(copyBtn);
+/** Link — external links open in new tab; file paths open in editor */
+function MdLink({ href, children, node, ...props }: any) {
+  const { openFileOrSearch } = useMdContext();
+  if (href?.match(/^https?:\/\//)) {
+    return <a href={href} target="_blank" rel="noopener noreferrer" {...props}>{children}</a>;
+  }
+  if (href && !GLOB_CHARS_RE.test(href) && FILE_EXT_RE.test(href)) {
+    return <a href={href} onClick={(e: React.MouseEvent) => { e.preventDefault(); openFileOrSearch(href); }} {...props}>{children}</a>;
+  }
+  return <a href={href} {...props}>{children}</a>;
+}
 
-        if (isBash && projectName) {
-          const runBtn = document.createElement("button");
-          runBtn.className = "flex items-center justify-center size-6 rounded bg-surface-elevated/80 hover:bg-surface-elevated text-text-secondary hover:text-text-primary transition-colors border border-border/50";
-          runBtn.title = "Run in terminal";
-          runBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>`;
-          runBtn.addEventListener("click", () => {
-            navigator.clipboard.writeText(text.replace(/^\$\s*/gm, ""));
-            openTab({ type: "terminal", title: "Terminal", metadata: { projectName }, projectId: projectName, closable: true });
-          });
-          actions.appendChild(runBtn);
-        }
+/** Image — auth-loads local file paths via API, click to open overlay */
+function MdImage({ src, alt, node, ...props }: any) {
+  const { openImageOverlay } = useMdContext();
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
 
-        pre.appendChild(actions);
-      });
-    }
+  useEffect(() => {
+    if (!src || !LOCAL_PATH_RE.test(src)) return;
+    setLoading(true);
+    let cancelled = false;
+    let url: string | null = null;
+    const token = getAuthToken();
+    fetch(`/api/fs/raw?path=${encodeURIComponent(src)}`, {
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+    })
+      .then((r) => { if (!r.ok) throw new Error(); return r.blob(); })
+      .then((blob) => {
+        if (cancelled) return;
+        url = URL.createObjectURL(blob);
+        setBlobUrl(url);
+        setLoading(false);
+      })
+      .catch(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; if (url) URL.revokeObjectURL(url); };
+  }, [src]);
 
-    return () => {
-      container.removeEventListener("click", handleClick);
-      blobUrls.forEach((u) => URL.revokeObjectURL(u));
-    };
-  }, [html, projectName, openTab, codeActions, openImageOverlay, openDiagramOverlay]);
+  const displaySrc = blobUrl || src || "";
+  const name = alt || (src ? basename(src) : "");
 
   return (
-    <div
-      ref={containerRef}
-      className={`markdown-content prose-sm ${isStreaming ? "is-streaming" : ""} ${className}`}
-      dangerouslySetInnerHTML={{ __html: html }}
+    <img
+      src={displaySrc}
+      alt={name}
+      onClick={() => displaySrc && openImageOverlay(displaySrc, name)}
+      className="max-h-[400px] max-w-full object-contain rounded-md border border-border cursor-pointer"
+      style={{ opacity: loading ? 0.3 : 1, minHeight: loading ? 48 : undefined, minWidth: loading ? 48 : undefined }}
+      {...props}
     />
   );
 }
+
+/** Table — wrap in scrollable container */
+function MdTable({ children, node, ...props }: any) {
+  return <div className="table-scroll-wrapper overflow-x-auto"><table {...props}>{children}</table></div>;
+}

package/src/web/hooks/use-global-keybindings.ts

@@ -101,6 +101,13 @@ export function useGlobalKeybindings() {
         return;
       }
 
+      // New file
+      if (match(e, "new-file")) {
+        e.preventDefault();
+        useTabStore.getState().openNewFile();
+        return;
+      }
+
       // Open tab shortcuts
       const tabShortcuts: { action: string; type: string; title: string }[] = [
         { action: "open-chat", type: "chat", title: "AI Chat" },

package/src/web/main.tsx

@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 import { App } from "./app.tsx";
 import "./styles/globals.css";
 import "katex/dist/katex.min.css";
+import "highlight.js/styles/github-dark-dimmed.min.css";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>