@hienlh/ppm 0.9.84 → 0.9.86

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-extension-ws.ts

@@ -111,7 +111,8 @@ export function useExtensionWs(enabled = true) {
           });
           break;
 
-        case "webview:create":
+        case "webview:create": {
+          const viewTypeSlug = msg.viewType.replace(/\.view$/, "");
           store.addWebviewPanel({
             id: msg.panelId,
             extensionId: msg.extensionId,
@@ -119,15 +120,18 @@ export function useExtensionWs(enabled = true) {
             title: msg.title,
             html: "",
           });
-          // Open a tab to display the webview panel
+          // Open a tab — use stable viewType slug as identifier (survives reload)
+          // Include projectName so reload can resolve project path for re-trigger
+          const currentProject = useTabStore.getState().currentProject;
           useTabStore.getState().openTab({
-            type: "extension-webview",
+            type: "extension",
             title: msg.title,
             projectId: null,
             closable: true,
-            metadata: { panelId: msg.panelId, extensionId: msg.extensionId },
+            metadata: { viewType: viewTypeSlug, panelId: msg.panelId, extensionId: msg.extensionId, ...(currentProject && { projectName: currentProject }) },
           });
           break;
+        }
 
         case "webview:html":
           store.updateWebviewPanel(msg.panelId, { html: msg.html });
@@ -142,6 +146,20 @@ export function useExtensionWs(enabled = true) {
             detail: { panelId: msg.panelId, message: msg.message },
           }));
           break;
+
+        case "tab:open":
+          useTabStore.getState().openTab({
+            type: (msg as any).tabType,
+            title: (msg as any).title,
+            projectId: (msg as any).projectId ?? null,
+            closable: (msg as any).closable ?? true,
+            metadata: (msg as any).metadata,
+          });
+          break;
+
+        case "project:switch":
+          useTabStore.getState().switchProject((msg as any).projectName);
+          break;
       }
     });
 

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

@@ -2,7 +2,8 @@ import { useEffect, useState, useCallback } from "react";
 import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useProjectStore } from "@/stores/project-store";
-import { useKeybindingsStore } from "@/stores/keybindings-store";
+import { useKeybindingsStore, parseCombo, eventMatchesCombo } from "@/stores/keybindings-store";
+import { useExtensionStore } from "@/stores/extension-store";
 
 /** Dispatch this event to open the command palette from anywhere, optionally with initial query */
 export function openCommandPalette(initialQuery?: string) {
@@ -101,11 +102,17 @@ 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" },
         { action: "open-terminal", type: "terminal", title: "Terminal" },
-        { action: "open-git-graph", type: "git-graph", title: "Git Graph" },
       ];
       for (const s of tabShortcuts) {
         if (match(e, s.action)) {
@@ -169,6 +176,28 @@ export function useGlobalKeybindings() {
           return;
         }
       }
+
+      // Extension-contributed keybindings (with user override support)
+      const extKbs = useExtensionStore.getState().contributions?.keybindings;
+      if (extKbs) {
+        const mac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.userAgent);
+        const { getBinding: getBind } = useKeybindingsStore.getState();
+        for (const kb of extKbs) {
+          // User override via "ext:<command>" key, fallback to extension default
+          const overrideCombo = getBind(`ext:${kb.command}`);
+          const combo = overrideCombo || ((mac && kb.mac) ? kb.mac : kb.key);
+          if (combo && eventMatchesCombo(e, parseCombo(combo))) {
+            e.preventDefault();
+            const project = useProjectStore.getState().activeProject;
+            const args: unknown[] = [];
+            if (project?.path) args.push(project.path);
+            window.dispatchEvent(new CustomEvent("ext:command:execute", {
+              detail: { command: kb.command, args },
+            }));
+            return;
+          }
+        }
+      }
     }
 
     // Custom event listener for programmatic opening

package/src/web/hooks/use-url-sync.ts

@@ -14,7 +14,8 @@ export interface UrlState {
 
 const VALID_TAB_TYPES: TabType[] = [
   "terminal", "chat", "editor", "database", "sqlite",
-  "postgres", "git-graph", "git-diff", "settings", "ports",
+  "postgres", "git-diff", "settings", "ports",
+  "extension",
 ];
 
 // ---------------------------------------------------------------------------
@@ -108,7 +109,6 @@ function buildMetadataFromUrl(
       return { ...(sessionId && { sessionId }), ...(providerId && { providerId }), projectName };
     }
     case "terminal": return { terminalIndex: parseInt(identifier ?? "1", 10), projectName };
-    case "git-graph": return { projectName };
     case "git-diff": return identifier ? { filePath: identifier, projectName } : null;
     case "settings": return {};
     case "database": {
@@ -121,6 +121,7 @@ function buildMetadataFromUrl(
       return connId ? { connectionId: connId, tableName: tableName ?? "" } : null;
     }
     case "ports": return null;
+    case "extension": return identifier ? { viewType: identifier, projectName } : null;
     default: return null;
   }
 }
@@ -130,13 +131,17 @@ function buildTitleFromUrl(type: TabType, identifier: string | null): string {
     case "editor": return identifier?.split("/").pop() ?? "File";
     case "chat": return "Chat";
     case "terminal": return `Terminal ${identifier ?? "1"}`;
-    case "git-graph": return "Git Graph";
     case "git-diff": return identifier?.split("/").pop() ?? "Diff";
     case "settings": return "Settings";
     case "database": return identifier ?? "Database";
     case "sqlite": return identifier?.split("/").pop() ?? "SQLite";
     case "postgres": return identifier ?? "PostgreSQL";
     case "ports": return "Ports";
+    case "extension": {
+      if (!identifier) return "Extension";
+      // "git-graph" → "Git Graph"
+      return identifier.split("-").map(w => (w[0]?.toUpperCase() ?? "") + w.slice(1)).join(" ");
+    }
     default: return type;
   }
 }

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>

package/src/web/stores/keybindings-store.ts

@@ -30,10 +30,10 @@ export const KEY_ACTIONS: KeyAction[] = [
   // Tabs
   { id: "next-tab", label: "Next Tab", category: "tabs", defaultKey: "Alt+]" },
   { id: "prev-tab", label: "Previous Tab", category: "tabs", defaultKey: "Alt+[" },
+  { id: "new-file", label: "New File", category: "tabs", defaultKey: "Mod+N" },
   { id: "open-chat", label: "Open Chat", category: "tabs", defaultKey: "Mod+L" },
   { id: "open-terminal", label: "Open Terminal", category: "tabs", defaultKey: "Mod+'" },
   { id: "open-settings", label: "Open Settings", category: "tabs", defaultKey: "Mod+," },
-  { id: "open-git-graph", label: "Git Graph", category: "tabs", defaultKey: "Mod+G" },
   { id: "open-git-status", label: "Git Status (sidebar)", category: "tabs", defaultKey: "Mod+Shift+E" },
   { id: "open-search", label: "Search Files (sidebar)", category: "tabs", defaultKey: "Mod+Shift+F" },
   { id: "voice-input", label: "Voice Input", category: "general", defaultKey: "Mod+Shift+V", note: "Toggle speech-to-text in chat" },
@@ -61,7 +61,7 @@ interface ParsedCombo {
   key: string; // lowercase
 }
 
-function parseCombo(combo: string): ParsedCombo {
+export function parseCombo(combo: string): ParsedCombo {
   const parts = combo.split("+");
   const result: ParsedCombo = { ctrl: false, meta: false, alt: false, shift: false, key: "" };
   for (const part of parts) {
@@ -81,7 +81,7 @@ function parseCombo(combo: string): ParsedCombo {
   return result;
 }
 
-function eventMatchesCombo(e: KeyboardEvent, combo: ParsedCombo): boolean {
+export function eventMatchesCombo(e: KeyboardEvent, combo: ParsedCombo): boolean {
   if (e.ctrlKey !== combo.ctrl) return false;
   if (e.metaKey !== combo.meta) return false;
   if (e.altKey !== combo.alt) return false;

package/src/web/stores/panel-store.ts

@@ -16,10 +16,10 @@ import {
 } from "./panel-utils";
 
 /** Tab types that can only have 1 instance per project */
-const SINGLETON_TYPES = new Set<TabType>(["git-graph", "settings"]);
+const SINGLETON_TYPES = new Set<TabType>(["settings"]);
 
 /** Tab types removed in a prior version — filter them out when loading persisted state */
-const OBSOLETE_TAB_TYPES = new Set(["projects", "git-status"]);
+const OBSOLETE_TAB_TYPES = new Set(["projects", "git-status", "git-graph"]);
 
 function pushHistory(history: string[], id: string): string[] {
   const filtered = history.filter((h) => h !== id);