@hienlh/ppm 0.9.84 → 0.9.85

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>

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

@@ -30,6 +30,7 @@ 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+," },

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

@@ -73,10 +73,23 @@ export function findPanelPosition(grid: string[][], panelId: string): { row: num
 // Deterministic tab IDs
 // ---------------------------------------------------------------------------
 
+/** Get next untitled number by scanning all panels */
+export function getNextUntitledNumber(panels: Record<string, Panel>): number {
+  let max = 0;
+  for (const panel of Object.values(panels)) {
+    for (const tab of panel.tabs) {
+      const match = tab.id.match(/^editor:untitled-(\d+)$/);
+      if (match) max = Math.max(max, Number(match[1]));
+    }
+  }
+  return max + 1;
+}
+
 /** Derive deterministic tab ID from type + metadata */
 export function deriveTabId(type: TabType, metadata?: Record<string, unknown>): string {
   switch (type) {
     case "editor":
+      if (metadata?.isUntitled) return `editor:untitled-${metadata.untitledNumber ?? 1}`;
       return `editor:${metadata?.filePath ?? "untitled"}`;
     case "chat": {
       const provider = metadata?.providerId ?? "default";

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

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { usePanelStore } from "./panel-store";
+import { getNextUntitledNumber } from "./panel-utils";
 
 export type TabType =
   | "terminal"
@@ -38,6 +39,7 @@ interface TabStore {
   closeTab: (id: string) => void;
   setActiveTab: (id: string) => void;
   updateTab: (id: string, updates: Partial<Omit<Tab, "id">>) => void;
+  openNewFile: () => string;
 }
 
 export const useTabStore = create<TabStore>()(() => ({
@@ -71,6 +73,20 @@ export const useTabStore = create<TabStore>()(() => ({
     usePanelStore.getState().updateTab(id, updates);
     syncFromPanelStore();
   },
+
+  openNewFile: () => {
+    const ps = usePanelStore.getState();
+    const num = getNextUntitledNumber(ps.panels);
+    const id = ps.openTab({
+      type: "editor",
+      title: `Untitled-${num}`,
+      projectId: null,
+      metadata: { isUntitled: true, untitledNumber: num },
+      closable: true,
+    });
+    syncFromPanelStore();
+    return id;
+  },
 }));
 
 // ---------------------------------------------------------------------------

package/src/web/styles/globals.css

@@ -186,6 +186,12 @@ html, body {
   font-size: 0.75rem;
 }
 
+/* Override highlight.js background so pre's background takes precedence */
+.markdown-content pre code.hljs {
+  background: transparent;
+  padding: 0;
+}
+
 .markdown-content :not(pre) > code {
   background: var(--color-background);
   padding: 0.125rem 0.25rem;

package/.opencode/.env.example

@@ -1,98 +0,0 @@
-# Claude Code - Global Environment Variables
-# Location: .claude/.env
-# Priority: LOWEST (overridden by skills/.env and skill-specific .env)
-# Scope: Project-wide configuration, global defaults
-# Setup: Copy to .claude/.env and configure
-
-# ============================================
-# Environment Variable Hierarchy
-# ============================================
-# Priority order (highest to lowest):
-# 1. process.env                    - Runtime environment (HIGHEST)
-# 2. .claude/skills/<skill>/.env    - Skill-specific overrides
-# 3. .claude/skills/.env            - Shared across all skills
-# 4. .claude/.env                   - Global defaults (this file, LOWEST)
-#
-# All skills use centralized resolver: ~/.claude/scripts/resolve_env.py
-# Debug hierarchy: python ~/.claude/scripts/resolve_env.py --show-hierarchy
-
-# ============================================
-# ClaudeKit API Key (for VidCap, ReviewWeb services)
-# ============================================
-# Get your API key from https://claudekit.cc/api-keys
-# Required for accessing ClaudeKit services via skills
-CLAUDEKIT_API_KEY=
-
-# ============================================
-# Claude Code Notification Hooks
-# ============================================
-# Discord Webhook URL (for Discord notifications)
-# Get from: Server Settings → Integrations → Webhooks → New Webhook
-DISCORD_WEBHOOK_URL=
-
-# Telegram Bot Token (for Telegram notifications)
-# Get from: @BotFather in Telegram
-TELEGRAM_BOT_TOKEN=
-
-# Telegram Chat ID (your chat ID or group ID)
-# Get from: https://api.telegram.org/bot<BOT_TOKEN>/getUpdates
-TELEGRAM_CHAT_ID=
-
-# ============================================
-# AI/ML API Keys (Global Defaults)
-# ============================================
-# Google Gemini API (for ai-multimodal, docs-seeker skills)
-# Get from: https://aistudio.google.com/apikey
-GEMINI_API_KEY=
-
-# Vertex AI Configuration (Optional alternative to AI Studio)
-# GEMINI_USE_VERTEX=true
-# VERTEX_PROJECT_ID=
-# VERTEX_LOCATION=us-central1
-
-# OpenAI API Key (if using OpenAI-based skills)
-# OPENAI_API_KEY=
-
-# Anthropic API Key (if using Claude API directly)
-# ANTHROPIC_API_KEY=
-
-# ElevenLabs API Key
-# Get your key at: https://elevenlabs.io/app/settings/api-keys
-# ELEVENLABS_API_KEY=
-
-# ============================================
-# Development & CI/CD
-# ============================================
-# NODE_ENV=development
-# DEBUG=false
-# LOG_LEVEL=info
-
-# ============================================
-# Project Configuration
-# ============================================
-# PROJECT_NAME=claudekit-engineer
-# ENVIRONMENT=local
-
-# ============================================
-# Example Usage Scenarios
-# ============================================
-# Scenario 1: Global default for all skills
-# .claude/.env (this file):                GEMINI_API_KEY=global-dev-key
-# Result: All skills use global-dev-key
-#
-# Scenario 2: Override for all skills
-# .claude/.env (this file):                GEMINI_API_KEY=global-dev-key
-# .claude/skills/.env:                     GEMINI_API_KEY=skills-prod-key
-# Result: All skills use skills-prod-key
-#
-# Scenario 3: Skill-specific override
-# .claude/.env (this file):                GEMINI_API_KEY=global-key
-# .claude/skills/.env:                     GEMINI_API_KEY=shared-key
-# .claude/skills/ai-multimodal/.env:       GEMINI_API_KEY=high-quota-key
-# Result: ai-multimodal uses high-quota-key, other skills use shared-key
-#
-# Scenario 4: Runtime testing
-# export GEMINI_API_KEY=test-key
-# Result: All skills use test-key regardless of config files
-#
-# Priority: runtime > skill-specific > shared > global (this file)