@hienlh/ppm 0.9.84 → 0.9.86

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

@@ -1,11 +1,12 @@
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import {
-  Terminal, MessageSquare, GitBranch, Database,
+  Terminal, MessageSquare, 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,18 +15,20 @@ 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" },
   { type: "chat", label: "AI Chat" },
-  { type: "git-graph", label: "Git Graph" },
   { type: "settings", label: "Settings" },
 ];
 const NEW_TAB_LABELS: Partial<Record<TabType, string>> = Object.fromEntries(NEW_TAB_OPTIONS.map((o) => [o.type, o.label]));
 
 const TAB_ICONS: Record<TabType, React.ElementType> = {
   terminal: Terminal, chat: MessageSquare, editor: FileCode, database: Database, sqlite: Database, postgres: Database,
-  "git-graph": GitBranch, "git-diff": FileDiff, settings: Settings, ports: Globe,
+  "git-diff": FileDiff, settings: Settings, ports: Globe,
+  extension: Puzzle,
   "extension-webview": Puzzle,
 };
 
@@ -112,11 +115,33 @@ 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();
     const firstPanelId = state.grid[0]?.[0] ?? state.focusedPanelId;
-    const needsProject = type === "git-graph" || type === "git-diff" || type === "terminal" || type === "chat";
+    const needsProject = type === "git-diff" || type === "terminal" || type === "chat";
     const metadata = needsProject ? { projectName: activeProjectForTab?.name } : undefined;
     state.openTab(
       { type, title: NEW_TAB_LABELS[type] ?? type, metadata, projectId: activeProjectForTab?.name ?? null, closable: true },
@@ -186,7 +211,7 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
         <div className="flex-1 min-w-0 relative flex items-center h-12 -ml-4">
           <div ref={mobileScrollRef} className="flex-1 min-w-0 flex items-center h-12 overflow-x-auto scrollbar-none pl-4">
           {tabs.map((tab) => {
-            const Icon = TAB_ICONS[tab.type];
+            const Icon = TAB_ICONS[tab.type] || Puzzle;
             const isActive = tab.id === activeTabId;
             const sessionId = tab.type === "chat" ? (tab.metadata?.sessionId as string) : undefined;
             const entry = sessionId ? notifications.get(sessionId) : undefined;
@@ -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,9 +1,8 @@
-import { useEffect, useRef, useCallback } from "react";
+import { useEffect, useRef, useCallback, useState } from "react";
 import {
   Plus,
   Terminal,
   MessageSquare,
-  GitBranch,
   FileDiff,
   Settings,
   FileCode,
@@ -16,6 +15,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 +25,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,
@@ -33,10 +35,10 @@ const TAB_ICONS: Record<TabType, React.ElementType> = {
   database: Database,
   sqlite: Database,
   postgres: Database,
-  "git-graph": GitBranch,
   "git-diff": FileDiff,
   settings: Settings,
   ports: Globe,
+  extension: Puzzle,
   "extension-webview": Puzzle,
 };
 
@@ -86,6 +88,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 +155,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}
@@ -140,7 +193,7 @@ export function TabBar({ panelId }: TabBarProps) {
               key={tab.id}
               tab={tab}
               isActive={tab.id === activeTabId}
-              icon={TAB_ICONS[tab.type]}
+              icon={TAB_ICONS[tab.type] || Puzzle}
               showDropBefore={dropIndex === i}
               notificationType={notiType}
               onSelect={() => {
@@ -160,6 +213,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 +248,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/tab-content.tsx

@@ -33,11 +33,6 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
       default: m.PostgresViewer,
     })),
   ),
-  "git-graph": lazy(() =>
-    import("@/components/git/git-graph").then((m) => ({
-      default: m.GitGraph,
-    })),
-  ),
   "git-diff": lazy(() =>
     import("@/components/editor/diff-viewer").then((m) => ({
       default: m.DiffViewer,
@@ -53,6 +48,11 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
       default: m.PortForwardingTab,
     })),
   ),
+  extension: lazy(() =>
+    import("@/components/extensions/extension-webview").then((m) => ({
+      default: m.ExtensionWebview,
+    })),
+  ),
   "extension-webview": lazy(() =>
     import("@/components/extensions/extension-webview").then((m) => ({
       default: m.ExtensionWebview,
@@ -84,6 +84,13 @@ export function TabContent() {
       {tabs.map((tab) => {
         const Component = TAB_COMPONENTS[tab.type];
         const isActive = tab.id === activeTabId;
+        if (!Component) {
+          return (
+            <div key={tab.id} className={isActive ? "h-full w-full flex items-center justify-center text-muted-foreground" : "hidden"}>
+              Unknown tab type: {tab.type}
+            </div>
+          );
+        }
         return (
           <div
             key={tab.id}

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/settings/keyboard-shortcuts-section.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from "react";
-import { RotateCcw, AlertTriangle, Lock } from "lucide-react";
+import { RotateCcw, AlertTriangle, Lock, Puzzle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   KEY_ACTIONS,
@@ -8,6 +8,7 @@ import {
   comboFromEvent,
   type KeyCategory,
 } from "@/stores/keybindings-store";
+import { useExtensionStore } from "@/stores/extension-store";
 
 const CATEGORIES: { key: KeyCategory; label: string }[] = [
   { key: "general", label: "General" },
@@ -104,6 +105,9 @@ function ShortcutBadge({
 
 export function KeyboardShortcutsSection() {
   const { getBinding, resetBinding, resetAll, overrides } = useKeybindingsStore();
+  const extContributions = useExtensionStore((s) => s.contributions);
+  const extKeybindings = extContributions?.keybindings ?? [];
+  const extCommands = extContributions?.commands ?? [];
 
   return (
     <div className="space-y-3">
@@ -177,6 +181,47 @@ export function KeyboardShortcutsSection() {
           </div>
         );
       })}
+
+      {/* Extension-contributed keybindings */}
+      {extKeybindings.length > 0 && (
+        <div className="space-y-1">
+          <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide">
+            Extensions
+          </span>
+          <div className="space-y-0.5">
+            {extKeybindings.map((kb) => {
+              const cmd = extCommands.find((c) => c.command === kb.command);
+              const label = cmd?.title ?? kb.command;
+              const actionId = `ext:${kb.command}`;
+              const currentCombo = getBinding(actionId) || kb.key;
+              const isOverridden = actionId in overrides;
+              return (
+                <div
+                  key={actionId}
+                  className="flex items-center justify-between py-1 px-1 rounded hover:bg-surface-elevated/50 transition-colors"
+                >
+                  <div className="flex items-center gap-1.5 min-w-0">
+                    <Puzzle className="size-3 text-muted-foreground shrink-0" />
+                    <span className="text-xs text-foreground">{label}</span>
+                  </div>
+                  <div className="flex items-center gap-1 shrink-0 ml-2">
+                    <ShortcutBadge actionId={actionId} combo={currentCombo} />
+                    {isOverridden && (
+                      <button
+                        onClick={() => resetBinding(actionId)}
+                        className="flex items-center justify-center size-5 rounded text-muted-foreground hover:text-foreground hover:bg-surface-elevated transition-colors"
+                        title="Reset to default"
+                      >
+                        <RotateCcw className="size-3" />
+                      </button>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
     </div>
   );
 }

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