@hienlh/ppm 0.9.85 → 0.9.86

package/src/web/components/extensions/extension-webview.tsx

@@ -1,5 +1,7 @@
-import { useRef, useEffect, useCallback } from "react";
+import { useRef, useEffect, useState } from "react";
 import { useExtensionStore } from "@/stores/extension-store";
+import { useTabStore } from "@/stores/tab-store";
+import { Loader2 } from "lucide-react";
 
 /** Inject acquireVsCodeApi() shim so extension webviews can postMessage to parent */
 const VSCODE_API_SHIM = `<script>
@@ -22,49 +24,146 @@ interface ExtensionWebviewProps {
 
 /**
  * iframe-based webview container for extension-contributed webview panels.
- * Renders as a tab component in the editor panel system.
+ * Matches panel by panelId (direct) or viewType (reload recovery).
  */
 export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
   const panelId = metadata?.panelId as string | undefined;
-  const panel = useExtensionStore((s) => panelId ? s.webviewPanels[panelId] : undefined);
+  const viewType = metadata?.viewType as string | undefined;
+  const currentProject = useTabStore((s) => s.currentProject);
+  const projectName = (metadata?.projectName as string | undefined) || currentProject || undefined;
+  const [timedOut, setTimedOut] = useState(false);
+
+  // Match panel: prefer panelId (exact), fallback to viewType match (reload recovery)
+  const panel = useExtensionStore((s) => {
+    if (panelId && s.webviewPanels[panelId]) return s.webviewPanels[panelId];
+    if (viewType) {
+      // Find panel whose viewType matches (with or without .view suffix)
+      const fullViewType = viewType.includes(".") ? viewType : `${viewType}.view`;
+      return Object.values(s.webviewPanels).find(
+        (p) => p.viewType === viewType || p.viewType === fullViewType,
+      );
+    }
+    return undefined;
+  });
+
+  const resolvedPanelId = panel?.id ?? panelId;
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
   // Inject acquireVsCodeApi shim + write HTML into iframe via srcdoc
   const rawHtml = panel?.html ?? "";
   const html = injectVscodeApiShim(rawHtml);
 
+  // On reload: resolve project path, then dispatch command with retry
+  // Retry needed because WS connection may not be ready on first attempt
+  useEffect(() => {
+    if (panel || !viewType) return;
+    const command = viewType.includes(".") ? viewType : `${viewType}.view`;
+    let cancelled = false;
+    let resolvedArgs: unknown[] | null = null;
+
+    async function resolveArgs(): Promise<unknown[]> {
+      if (resolvedArgs) return resolvedArgs;
+      if (!projectName) return [];
+      try {
+        const res = await fetch("/api/projects");
+        const json = await res.json() as { ok: boolean; data?: { name: string; path: string }[] };
+        const match = json.data?.find((p) => p.name === projectName);
+        resolvedArgs = match ? [match.path] : [];
+      } catch {
+        resolvedArgs = [];
+      }
+      return resolvedArgs;
+    }
+
+    async function attempt() {
+      const args = await resolveArgs();
+      if (cancelled) return;
+      window.dispatchEvent(new CustomEvent("ext:command:execute", {
+        detail: { command, args },
+      }));
+    }
+
+    // First attempt after short delay (let WS connect), then retry every 2s
+    const initialTimer = setTimeout(() => {
+      if (!cancelled) attempt();
+    }, 500);
+    const retryTimer = setInterval(() => {
+      if (!cancelled) attempt();
+    }, 2_000);
+
+    return () => { cancelled = true; clearTimeout(initialTimer); clearInterval(retryTimer); };
+  }, [panel, viewType, projectName]);
+
+  // When project switches while panel exists, re-dispatch command with new project path
+  const prevProjectRef = useRef(currentProject);
+  useEffect(() => {
+    if (!panel || !viewType || !currentProject || currentProject === prevProjectRef.current) {
+      prevProjectRef.current = currentProject;
+      return;
+    }
+    prevProjectRef.current = currentProject;
+    // Resolve new project path and dispatch command
+    (async () => {
+      try {
+        const res = await fetch("/api/projects");
+        const json = await res.json() as { ok: boolean; data?: { name: string; path: string }[] };
+        const match = json.data?.find((p: { name: string }) => p.name === currentProject);
+        if (match) {
+          const command = viewType.includes(".") ? viewType : `${viewType}.view`;
+          window.dispatchEvent(new CustomEvent("ext:command:execute", {
+            detail: { command, args: [match.path] },
+          }));
+        }
+      } catch {}
+    })();
+  }, [panel, viewType, currentProject]);
+
+  // Timeout: if panel doesn't appear within 10s, show error
+  useEffect(() => {
+    if (panel) { setTimedOut(false); return; }
+    const timer = setTimeout(() => setTimedOut(true), 10_000);
+    return () => clearTimeout(timer);
+  }, [panel]);
+
   // Listen for postMessage from iframe → forward to extension via WS bridge
   useEffect(() => {
+    if (!resolvedPanelId) return;
     const handler = (event: MessageEvent) => {
       if (iframeRef.current && event.source === iframeRef.current.contentWindow) {
-        // Forward to server via custom event → picked up by useExtensionWs
         window.dispatchEvent(new CustomEvent("ext:webview:send", {
-          detail: { panelId, message: event.data },
+          detail: { panelId: resolvedPanelId, message: event.data },
         }));
       }
     };
     window.addEventListener("message", handler);
     return () => window.removeEventListener("message", handler);
-  }, [panelId]);
+  }, [resolvedPanelId]);
 
   // Listen for server→webview messages (dispatched by useExtensionWs)
-  // targetOrigin "*" is safe here because sandbox omits allow-same-origin,
-  // so iframe origin is opaque "null". MUST restrict if allow-same-origin is ever added.
   useEffect(() => {
+    if (!resolvedPanelId) return;
     const handler = (e: Event) => {
       const { panelId: targetId, message } = (e as CustomEvent).detail;
-      if (targetId === panelId) {
+      if (targetId === resolvedPanelId) {
         iframeRef.current?.contentWindow?.postMessage(message, "*");
       }
     };
     window.addEventListener("ext:webview:message", handler);
     return () => window.removeEventListener("ext:webview:message", handler);
-  }, [panelId]);
+  }, [resolvedPanelId]);
 
+  // Loading state — waiting for extension to create the panel
   if (!panel) {
     return (
-      <div className="flex items-center justify-center h-full text-sm text-text-subtle">
-        Webview panel not found
+      <div className="flex flex-col items-center justify-center h-full gap-2 text-sm text-text-subtle">
+        {timedOut ? (
+          <span>Extension failed to load webview panel</span>
+        ) : (
+          <>
+            <Loader2 className="size-5 animate-spin" />
+            <span>Loading extension...</span>
+          </>
+        )}
       </div>
     );
   }

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

@@ -2,8 +2,9 @@ import { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import {
   Terminal,
   MessageSquare,
-  GitBranch,
   GitCommitHorizontal,
+  GitBranch,
+  Puzzle,
   Settings,
   Database,
   Search,
@@ -13,7 +14,8 @@ import {
   Loader2,
   Globe,
   Mic,
-  Puzzle,
+  RefreshCw,
+  Plus,
 } from "lucide-react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { useProjectStore } from "@/stores/project-store";
@@ -38,6 +40,19 @@ interface CommandItem {
 
 const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.userAgent);
 
+/** Map extension icon string names to lucide components */
+const EXT_ICON_MAP: Record<string, React.ElementType> = {
+  "git-branch": GitBranch,
+  "database": Database,
+  "refresh": RefreshCw,
+  "plus": Plus,
+  "terminal": Terminal,
+  "settings": Settings,
+  "search": Search,
+  "file-code": FileCode,
+  "globe": Globe,
+};
+
 /** Format a keybinding combo for display (e.g. "Mod+G" → "⌘G" on Mac, "Ctrl+G" on others) */
 function formatShortcut(combo: string): string {
   if (!combo) return "";
@@ -162,7 +177,6 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
       { 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" },
       { id: "postgres", label: "PostgreSQL", icon: Database, action: openNewTab("postgres", "PostgreSQL"), keywords: "database pg sql query", group: "action" },
       { id: "voice-input", label: "Voice Input", icon: Mic, action: () => { window.dispatchEvent(new CustomEvent("toggle-voice-input")); onClose(); }, keywords: "speech microphone dictate voice", group: "action", shortcut: formatShortcut(getBinding("voice-input")) },
@@ -180,20 +194,30 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
       },
     ];
 
-    // Append extension-contributed commands
-    const extCmds: CommandItem[] = (extContributions?.commands ?? []).map((cmd) => ({
-      id: `ext:${cmd.command}`,
-      label: cmd.title,
-      hint: cmd.category,
-      icon: Puzzle,
-      group: "action" as const,
-      keywords: `extension ${cmd.command} ${cmd.category ?? ""}`,
-      action: () => {
-        // Phase 4: execute via WS bridge
-        console.log("[CmdPalette] ext command:", cmd.command);
-        onClose();
-      },
-    }));
+    // Append extension-contributed commands (with keybinding shortcuts, respecting user overrides)
+    const extKbs = extContributions?.keybindings ?? [];
+    const extCmds: CommandItem[] = (extContributions?.commands ?? []).map((cmd) => {
+      const kb = extKbs.find((k) => k.command === cmd.command);
+      const overrideCombo = kb ? getBinding(`ext:${kb.command}`) : "";
+      const shortcutCombo = overrideCombo || (kb ? ((isMac && kb.mac) ? kb.mac : kb.key) : "");
+      return {
+        id: `ext:${cmd.command}`,
+        label: cmd.title,
+        hint: cmd.category,
+        icon: (cmd.icon && EXT_ICON_MAP[cmd.icon]) || Puzzle,
+        group: "action" as const,
+        keywords: `extension ${cmd.command} ${cmd.category ?? ""}`,
+        shortcut: shortcutCombo ? formatShortcut(shortcutCombo) : undefined,
+        action: () => {
+          const args: unknown[] = [];
+          if (activeProject?.path) args.push(activeProject.path);
+          window.dispatchEvent(new CustomEvent("ext:command:execute", {
+            detail: { command: cmd.command, args },
+          }));
+          onClose();
+        },
+      };
+    });
 
     return [...builtIn, ...extCmds];
   }, [activeProject, openTab, onClose, setSidebarActiveTab, sidebarCollapsed, toggleSidebar, getBinding, extContributions]);

package/src/web/components/layout/editor-panel.tsx

@@ -1,8 +1,8 @@
 import { Suspense, lazy, useEffect, useState, useCallback } from "react";
-import { ChevronDown, ChevronUp, Loader2, Terminal, MessageSquare, GitBranch, Pin, PinOff } from "lucide-react";
+import { ChevronDown, ChevronUp, Loader2, Terminal, MessageSquare, FilePlus, Pin, PinOff } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
-import type { TabType } from "@/stores/tab-store";
+import { useTabStore, type TabType } from "@/stores/tab-store";
 import { api, projectUrl } from "@/lib/api-client";
 import type { SessionInfo } from "../../../types/chat";
 import { TabBar } from "./tab-bar";
@@ -12,7 +12,7 @@ import { cn } from "@/lib/utils";
 const QUICK_OPEN_TABS: { type: TabType; label: string; icon: React.ElementType }[] = [
   { type: "terminal", label: "Terminal", icon: Terminal },
   { type: "chat", label: "AI Chat", icon: MessageSquare },
-  { type: "git-graph", label: "Git Graph", icon: GitBranch },
+  { type: "editor", label: "New File", icon: FilePlus },
 ];
 
 const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentType<{ metadata?: Record<string, unknown>; tabId?: string }>>> = {
@@ -22,10 +22,10 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
   database: lazy(() => import("@/components/database/database-viewer").then((m) => ({ default: m.DatabaseViewer }))),
   sqlite: lazy(() => import("@/components/sqlite/sqlite-viewer").then((m) => ({ default: m.SqliteViewer }))),
   postgres: lazy(() => import("@/components/postgres/postgres-viewer").then((m) => ({ 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 }))),
   settings: lazy(() => import("@/components/settings/settings-tab").then((m) => ({ default: m.SettingsTab }))),
   ports: lazy(() => import("@/components/ports/port-forwarding-tab").then((m) => ({ 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 }))),
 };
 
@@ -62,6 +62,13 @@ export function EditorPanel({ panelId, projectName }: EditorPanelProps) {
           panel.tabs.map((tab) => {
             const Component = TAB_COMPONENTS[tab.type];
             const isActive = tab.id === panel.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} className={isActive ? "h-full w-full" : "hidden"}>
                 <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="size-6 animate-spin text-primary" /></div>}>
@@ -143,6 +150,10 @@ function EmptyPanel({ panelId }: { panelId: string }) {
   }, [activeProject?.name]);
 
   function openTab(type: TabType) {
+    if (type === "editor") {
+      useTabStore.getState().openNewFile();
+      return;
+    }
     const needsProject = type !== "settings";
     const metadata = needsProject && activeProject ? { projectName: activeProject.name } : undefined;
     usePanelStore.getState().openTab(

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

@@ -1,6 +1,6 @@
 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, Copy, Download, Pencil, Trash2,
 } from "lucide-react";
@@ -21,14 +21,14 @@ 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,
 };
 
@@ -141,7 +141,7 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
   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 },
@@ -211,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;

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

@@ -3,7 +3,6 @@ import {
   Plus,
   Terminal,
   MessageSquare,
-  GitBranch,
   FileDiff,
   Settings,
   FileCode,
@@ -36,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,
 };
 
@@ -194,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={() => {

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/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/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) {
@@ -112,7 +113,6 @@ export function useGlobalKeybindings() {
       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)) {
@@ -176,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;
   }
 }