@hienlh/ppm 0.9.84 → 0.9.85

package/src/web/components/layout/command-palette.tsx

@@ -8,6 +8,7 @@ import {
   Database,
   Search,
   FileCode,
+  FilePlus,
   FolderOpen,
   Loader2,
   Globe,
@@ -159,6 +160,7 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
 
     const builtIn: CommandItem[] = [
       { id: "chat", label: "New AI Chat", icon: MessageSquare, action: openNewTab("chat", "AI Chat"), keywords: "ai assistant claude", group: "action", shortcut: formatShortcut(getBinding("open-chat")) },
+      { id: "new-file", label: "New File", icon: FilePlus, action: () => { useTabStore.getState().openNewFile(); onClose(); }, keywords: "create untitled blank empty", group: "action", shortcut: formatShortcut(getBinding("new-file")) },
       { id: "terminal", label: "New Terminal", icon: Terminal, action: openNewTab("terminal", "Terminal"), keywords: "bash shell console", group: "action", shortcut: formatShortcut(getBinding("open-terminal")) },
       { id: "git-graph", label: "Git Graph", icon: GitBranch, action: openNewTab("git-graph", "Git Graph"), keywords: "branch history log", group: "action", shortcut: formatShortcut(getBinding("open-git-graph")) },
       { id: "ports", label: "Port Forwarding", icon: Globe, action: openNewTab("ports", "Ports"), keywords: "web preview localhost port forward tunnel url", group: "action" },

package/src/web/components/layout/draggable-tab.tsx

@@ -1,9 +1,16 @@
 import { useState, useRef, useEffect } from "react";
-import { X } from "lucide-react";
+import { X, Download } from "lucide-react";
 import type { Tab, TabType } from "@/stores/tab-store";
 import { cn } from "@/lib/utils";
 import { isDarkColor } from "@/lib/color-utils";
 import { notificationColor } from "@/stores/notification-store";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
 
 interface DraggableTabProps {
   tab: Tab;
@@ -23,11 +30,13 @@ interface DraggableTabProps {
   tabRef: (el: HTMLButtonElement | null) => void;
   /** If provided, double-clicking the title enters inline rename mode */
   onRename?: (newTitle: string) => void;
+  /** Context menu action handler — receives action name */
+  onContextAction?: (action: string) => void;
 }
 
 export function DraggableTab({
   tab, isActive, icon: Icon, showDropBefore, notificationType, onSelect, onClose,
-  onDragStart, onDragOver, onDragEnd, onTouchStart, onTouchMove, onTouchEnd, tabRef, onRename,
+  onDragStart, onDragOver, onDragEnd, onTouchStart, onTouchMove, onTouchEnd, tabRef, onRename, onContextAction,
 }: DraggableTabProps) {
   const [editing, setEditing] = useState(false);
   const [editValue, setEditValue] = useState(tab.title);
@@ -56,76 +65,120 @@ export function DraggableTab({
       }
     : undefined;
 
+  const isFile = tab.type === "editor";
+
+  const tabButton = (
+    <button
+      ref={tabRef}
+      data-tab-item
+      draggable={!editing}
+      onClick={onSelect}
+      onAuxClick={(e) => { if (e.button === 1 && tab.closable) { e.preventDefault(); onClose(); } }}
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDragEnd={onDragEnd}
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}
+      style={colorStyle}
+      className={cn(
+        "group flex items-center gap-1 px-3 h-10 whitespace-nowrap text-xs transition-colors",
+        "border-b-2 -mb-px cursor-grab active:cursor-grabbing",
+        !colorStyle && (isActive
+          ? "border-primary text-primary"
+          : "border-transparent text-text-secondary hover:text-foreground"),
+        colorStyle && "border-transparent",
+      )}
+    >
+      <span className="relative">
+        <Icon className="size-4" />
+        {notificationType && !isActive && (
+          <span className={cn("absolute -top-1 -right-1 size-2 rounded-full", notificationColor(notificationType))} />
+        )}
+      </span>
+      {editing ? (
+        <input
+          ref={inputRef}
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onBlur={commitRename}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") commitRename();
+            if (e.key === "Escape") setEditing(false);
+            e.stopPropagation();
+          }}
+          onClick={(e) => e.stopPropagation()}
+          className="max-w-[120px] bg-surface-elevated text-xs px-1 py-0.5 rounded border border-border outline-none focus:border-primary"
+          autoFocus
+        />
+      ) : (
+        <span
+          className="max-w-[120px] truncate"
+          onDoubleClick={(e) => {
+            if (onRename) { e.stopPropagation(); setEditing(true); }
+          }}
+        >
+          {tab.title}
+        </span>
+      )}
+      {tab.closable && !editing && (
+        <span
+          role="button"
+          tabIndex={0}
+          onClick={(e) => { e.stopPropagation(); onClose(); }}
+          onKeyDown={(e) => { if (e.key === "Enter") { e.stopPropagation(); onClose(); } }}
+          className="ml-1 can-hover:opacity-0 can-hover:group-hover:opacity-100 rounded-sm hover:bg-surface-elevated p-0.5 transition-opacity"
+        >
+          <X className="size-3" />
+        </span>
+      )}
+    </button>
+  );
+
   return (
     <div className="relative flex items-center">
       {showDropBefore && (
         <div className="absolute left-0 top-1 bottom-1 w-0.5 bg-primary rounded-full z-10" />
       )}
-      <button
-        ref={tabRef}
-        data-tab-item
-        draggable={!editing}
-        onClick={onSelect}
-        onAuxClick={(e) => { if (e.button === 1 && tab.closable) { e.preventDefault(); onClose(); } }}
-        onDragStart={onDragStart}
-        onDragOver={onDragOver}
-        onDragEnd={onDragEnd}
-        onTouchStart={onTouchStart}
-        onTouchMove={onTouchMove}
-        onTouchEnd={onTouchEnd}
-        style={colorStyle}
-        className={cn(
-          "group flex items-center gap-1 px-3 h-10 whitespace-nowrap text-xs transition-colors",
-          "border-b-2 -mb-px cursor-grab active:cursor-grabbing",
-          !colorStyle && (isActive
-            ? "border-primary text-primary"
-            : "border-transparent text-text-secondary hover:text-foreground"),
-          colorStyle && "border-transparent",
-        )}
-      >
-        <span className="relative">
-          <Icon className="size-4" />
-          {notificationType && !isActive && (
-            <span className={cn("absolute -top-1 -right-1 size-2 rounded-full", notificationColor(notificationType))} />
-          )}
-        </span>
-        {editing ? (
-          <input
-            ref={inputRef}
-            value={editValue}
-            onChange={(e) => setEditValue(e.target.value)}
-            onBlur={commitRename}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") commitRename();
-              if (e.key === "Escape") setEditing(false);
-              e.stopPropagation();
-            }}
-            onClick={(e) => e.stopPropagation()}
-            className="max-w-[120px] bg-surface-elevated text-xs px-1 py-0.5 rounded border border-border outline-none focus:border-primary"
-            autoFocus
-          />
-        ) : (
-          <span
-            className="max-w-[120px] truncate"
-            onDoubleClick={(e) => {
-              if (onRename) { e.stopPropagation(); setEditing(true); }
-            }}
-          >
-            {tab.title}
-          </span>
-        )}
-        {tab.closable && !editing && (
-          <span
-            role="button"
-            tabIndex={0}
-            onClick={(e) => { e.stopPropagation(); onClose(); }}
-            onKeyDown={(e) => { if (e.key === "Enter") { e.stopPropagation(); onClose(); } }}
-            className="ml-1 can-hover:opacity-0 can-hover:group-hover:opacity-100 rounded-sm hover:bg-surface-elevated p-0.5 transition-opacity"
-          >
-            <X className="size-3" />
-          </span>
-        )}
-      </button>
+      {onContextAction ? (
+        <ContextMenu>
+          <ContextMenuTrigger asChild>
+            {tabButton}
+          </ContextMenuTrigger>
+          <ContextMenuContent>
+            {isFile && (
+              <>
+                <ContextMenuItem onClick={() => onContextAction("copy-path")}>
+                  Copy Path
+                </ContextMenuItem>
+                <ContextMenuItem onClick={() => onContextAction("download")}>
+                  <Download className="size-3.5 mr-2" />
+                  Download
+                </ContextMenuItem>
+                <ContextMenuSeparator />
+                <ContextMenuItem onClick={() => onContextAction("rename")}>
+                  Rename
+                </ContextMenuItem>
+                <ContextMenuItem variant="destructive" onClick={() => onContextAction("delete")}>
+                  Delete
+                </ContextMenuItem>
+                <ContextMenuSeparator />
+              </>
+            )}
+            {tab.closable && (
+              <ContextMenuItem onClick={() => onContextAction("close")}>
+                Close
+              </ContextMenuItem>
+            )}
+            <ContextMenuItem onClick={() => onContextAction("close-others")}>
+              Close Others
+            </ContextMenuItem>
+            <ContextMenuItem onClick={() => onContextAction("close-right")}>
+              Close to the Right
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenu>
+      ) : tabButton}
     </div>
   );
 }

package/src/web/components/layout/mobile-nav.tsx

@@ -2,10 +2,11 @@ import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import {
   Terminal, MessageSquare, GitBranch, Database,
   FileDiff, FileCode, Settings, Menu, X, ArrowLeft, ArrowRight, SplitSquareVertical, MoveVertical, Layers, Plus,
-  ChevronRight, Globe, Puzzle,
+  ChevronRight, Globe, Puzzle, Copy, Download, Pencil, Trash2,
 } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore, resolveOrder } from "@/stores/project-store";
+import { useFileStore, type FileNode } from "@/stores/file-store";
 import { findPanelPosition, MAX_ROWS } from "@/stores/panel-utils";
 import { resolveProjectColor } from "@/lib/project-palette";
 import { getProjectInitials } from "@/lib/project-avatar";
@@ -14,6 +15,8 @@ import { cn } from "@/lib/utils";
 import { openCommandPalette } from "@/hooks/use-global-keybindings";
 import { useNotificationStore, notificationColor } from "@/stores/notification-store";
 import { useTabOverflow, getHiddenUnreadDirection } from "@/hooks/use-tab-overflow";
+import { downloadFile } from "@/lib/file-download";
+import { FileActions } from "@/components/explorer/file-actions";
 
 const NEW_TAB_OPTIONS: { type: TabType; label: string }[] = [
   { type: "terminal", label: "Terminal" },
@@ -112,6 +115,28 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
     usePanelStore.getState().moveTab(tabId, pid, targetPanelId);
   }
 
+  const [fileActionState, setFileActionState] = useState<{ action: string; node: FileNode; tabId: string } | null>(null);
+
+  function handleFileAction(tab: Tab, action: string) {
+    const filePath = tab.metadata?.filePath as string | undefined;
+    const projectName = tab.metadata?.projectName as string | undefined;
+    switch (action) {
+      case "copy-path":
+        if (filePath) navigator.clipboard.writeText(filePath).catch(() => {});
+        break;
+      case "download":
+        if (filePath && projectName) downloadFile(projectName, filePath);
+        break;
+      case "rename":
+      case "delete":
+        if (filePath) {
+          setFileActionState({ action, tabId: tab.id, node: { name: tab.title, path: filePath, type: "file" } });
+        }
+        break;
+    }
+    setMenuTabId(null);
+  }
+
   const { activeProject: activeProjectForTab } = useProjectStore.getState();
   function handleNewTab(type: TabType) {
     const state = usePanelStore.getState();
@@ -269,13 +294,40 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
             <div className="px-3 py-2 text-xs text-text-secondary border-b border-border truncate">
               {menuTab.title}
             </div>
+            {menuTab.type === "editor" && (
+              <>
+                <button onClick={() => handleFileAction(menuTab, "copy-path")}
+                  className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
+                  <Copy className="size-4" /> Copy Path
+                </button>
+                <button onClick={() => handleFileAction(menuTab, "download")}
+                  className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
+                  <Download className="size-4" /> Download
+                </button>
+                <button onClick={() => handleFileAction(menuTab, "rename")}
+                  className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
+                  <Pencil className="size-4" /> Rename
+                </button>
+                <button onClick={() => handleFileAction(menuTab, "delete")}
+                  className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-error active:bg-surface-elevated">
+                  <Trash2 className="size-4" /> Delete
+                </button>
+                <div className="h-px bg-border mx-2" />
+              </>
+            )}
+            {menuTab.closable && (
+              <button onClick={() => { usePanelStore.getState().closeTab(menuTabId!); setMenuTabId(null); }}
+                className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
+                <X className="size-4" /> Close
+              </button>
+            )}
             {menuTabIdx > 0 && (
               <button onClick={() => { moveTabLeft(menuTabId!); setMenuTabId(null); }}
                 className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
                 <ArrowLeft className="size-4" /> Move Left
               </button>
             )}
-            {menuTabIdx < tabs.length - 1 && (
+            {menuTabIdx < menuTabPanelTabs.length - 1 && (
               <button onClick={() => { moveTabRight(menuTabId!); setMenuTabId(null); }}
                 className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
                 <ArrowRight className="size-4" /> Move Right
@@ -296,6 +348,21 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
           </div>
         </>
       )}
+
+      {fileActionState && (
+        <FileActions
+          action={fileActionState.action}
+          node={fileActionState.node}
+          projectName={activeProjectForTab?.name ?? ""}
+          onClose={() => setFileActionState(null)}
+          onRefresh={() => {
+            if (activeProjectForTab) useFileStore.getState().fetchTree(activeProjectForTab.name);
+            if (fileActionState.action === "delete") {
+              usePanelStore.getState().closeTab(fileActionState.tabId);
+            }
+          }}
+        />
+      )}
     </nav>
   );
 }

package/src/web/components/layout/tab-bar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback } from "react";
+import { useEffect, useRef, useCallback, useState } from "react";
 import {
   Plus,
   Terminal,
@@ -16,6 +16,7 @@ import {
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
+import { useFileStore, type FileNode } from "@/stores/file-store";
 import { useTabDrag } from "@/hooks/use-tab-drag";
 import { useTouchTabDrag, wasTouchDragRecent } from "@/hooks/use-touch-tab-drag";
 import { openCommandPalette } from "@/hooks/use-global-keybindings";
@@ -25,6 +26,8 @@ import { useTabOverflow, getHiddenUnreadDirection } from "@/hooks/use-tab-overfl
 import { DraggableTab } from "./draggable-tab";
 import { cn } from "@/lib/utils";
 import type { Tab } from "@/stores/tab-store";
+import { downloadFile } from "@/lib/file-download";
+import { FileActions } from "@/components/explorer/file-actions";
 
 const TAB_ICONS: Record<TabType, React.ElementType> = {
   terminal: Terminal,
@@ -86,6 +89,56 @@ export function TabBar({ panelId }: TabBarProps) {
     }
   }, []);
 
+  // File action dialog state for tab context menu (rename/delete)
+  const [fileActionState, setFileActionState] = useState<{ action: string; node: FileNode; tabId: string } | null>(null);
+
+  /** Handle context menu actions on a tab */
+  const handleTabContextAction = useCallback((tab: Tab, action: string) => {
+    const panelState = usePanelStore.getState();
+    const pTabs = panelState.panels[effectivePanelId]?.tabs ?? [];
+
+    switch (action) {
+      case "close":
+        panelState.closeTab(tab.id, effectivePanelId);
+        break;
+      case "close-others":
+        for (const t of pTabs) {
+          if (t.id !== tab.id && t.closable) panelState.closeTab(t.id, effectivePanelId);
+        }
+        break;
+      case "close-right": {
+        const idx = pTabs.findIndex((t) => t.id === tab.id);
+        for (let i = idx + 1; i < pTabs.length; i++) {
+          if (pTabs[i]!.closable) panelState.closeTab(pTabs[i]!.id, effectivePanelId);
+        }
+        break;
+      }
+      case "copy-path": {
+        const filePath = tab.metadata?.filePath as string | undefined;
+        if (filePath) navigator.clipboard.writeText(filePath).catch(() => {});
+        break;
+      }
+      case "download": {
+        const filePath = tab.metadata?.filePath as string | undefined;
+        const projectName = tab.metadata?.projectName as string | undefined;
+        if (filePath && projectName) downloadFile(projectName, filePath);
+        break;
+      }
+      case "rename":
+      case "delete": {
+        const filePath = tab.metadata?.filePath as string | undefined;
+        if (filePath) {
+          setFileActionState({
+            action,
+            tabId: tab.id,
+            node: { name: tab.title, path: filePath, type: "file" },
+          });
+        }
+        break;
+      }
+    }
+  }, [effectivePanelId]);
+
   /** Double-click on empty bar area → open command palette */
   function handleBarDoubleClick(e: React.MouseEvent) {
     // Only trigger if clicking directly on the bar or scroll container (not on a tab)
@@ -103,6 +156,7 @@ export function TabBar({ panelId }: TabBarProps) {
   }
 
   return (
+    <>
     <div
       className="hidden md:flex items-center h-10 border-b border-border bg-background relative"
       onDragOver={handleDragOverBar}
@@ -160,6 +214,7 @@ export function TabBar({ panelId }: TabBarProps) {
                 else tabRefs.current.delete(tab.id);
               }}
               onRename={tab.type === "chat" ? (title) => handleRenameTab(tab, title) : undefined}
+              onContextAction={(action) => handleTabContextAction(tab, action)}
             />
             );
           })}
@@ -194,5 +249,23 @@ export function TabBar({ panelId }: TabBarProps) {
         </button>
       )}
     </div>
+
+    {fileActionState && (
+      <FileActions
+        action={fileActionState.action}
+        node={fileActionState.node}
+        projectName={activeProject?.name ?? ""}
+        onClose={() => setFileActionState(null)}
+        onRefresh={() => {
+          if (activeProject) useFileStore.getState().fetchTree(activeProject.name);
+          // Close tab after file deletion (onRefresh only called on success)
+          if (fileActionState.action === "delete") {
+            usePanelStore.getState().closeTab(fileActionState.tabId, effectivePanelId);
+          }
+        }}
+      />
+    )}
+    </>
   );
 }
+

package/src/web/components/layout/upgrade-banner.tsx

@@ -96,6 +96,9 @@ export function UpgradeBanner({ onVisibilityChange }: UpgradeBannerProps) {
         // No supervisor — manual restart needed
         toast.info(data.message || "Upgrade installed. Restart PPM manually.");
         setUpgrading(false);
+        if (availableVersion) {
+          sessionStorage.setItem(DISMISS_KEY_PREFIX + availableVersion, "1");
+        }
         setDismissed(true);
       }
     } catch (e) {

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