@hienlh/ppm 0.9.85 → 0.9.87

package/src/web/components/editor/conflict-editor.tsx

@@ -0,0 +1,368 @@
+import { useEffect, useState, useRef, useCallback } from "react";
+import Editor, { type OnMount } from "@monaco-editor/react";
+import type * as MonacoType from "monaco-editor";
+import { api, projectUrl } from "@/lib/api-client";
+import { useSettingsStore } from "@/stores/settings-store";
+import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { Loader2 } from "lucide-react";
+
+function getMonacoLanguage(filename: string): string {
+  const ext = filename.split(".").pop()?.toLowerCase() ?? "";
+  const map: Record<string, string> = {
+    js: "javascript", jsx: "javascript",
+    ts: "typescript", tsx: "typescript",
+    py: "python", html: "html",
+    css: "css", scss: "scss",
+    json: "json", md: "markdown", mdx: "markdown",
+    yaml: "yaml", yml: "yaml",
+    sh: "shell", bash: "shell",
+    go: "go", rs: "rust", java: "java",
+    rb: "ruby", php: "php", swift: "swift",
+    sql: "sql", xml: "xml", toml: "toml",
+  };
+  return map[ext] ?? "plaintext";
+}
+
+interface ConflictRegion {
+  id: number;
+  startLine: number;       // 1-indexed, line of <<<<<<< marker
+  separatorLine: number;   // line of =======
+  endLine: number;         // line of >>>>>>> marker
+  currentContent: string;
+  incomingContent: string;
+  currentLabel: string;
+  incomingLabel: string;
+}
+
+function parseConflicts(content: string): ConflictRegion[] {
+  const lines = content.split("\n");
+  const regions: ConflictRegion[] = [];
+  let i = 0;
+  let id = 0;
+
+  while (i < lines.length) {
+    const line = lines[i]!;
+    if (line.startsWith("<<<<<<<")) {
+      const startLine = i;
+      const currentLabel = line.substring(7).trim();
+      const currentLines: string[] = [];
+      i++;
+
+      while (i < lines.length && !lines[i]!.startsWith("=======")) {
+        currentLines.push(lines[i]!);
+        i++;
+      }
+      if (i >= lines.length) break;
+
+      const separatorLine = i;
+      const incomingLines: string[] = [];
+      i++;
+
+      while (i < lines.length && !lines[i]!.startsWith(">>>>>>>")) {
+        incomingLines.push(lines[i]!);
+        i++;
+      }
+      if (i >= lines.length) break;
+
+      const incomingLabel = lines[i]!.substring(7).trim();
+
+      regions.push({
+        id: id++,
+        startLine: startLine + 1,
+        separatorLine: separatorLine + 1,
+        endLine: i + 1,
+        currentContent: currentLines.join("\n"),
+        incomingContent: incomingLines.join("\n"),
+        currentLabel,
+        incomingLabel,
+      });
+    }
+    i++;
+  }
+  return regions;
+}
+
+interface ConflictEditorProps {
+  metadata?: Record<string, unknown>;
+  tabId?: string;
+}
+
+export function ConflictEditor({ metadata }: ConflictEditorProps) {
+  const filePath = metadata?.filePath as string | undefined;
+  const projectName = metadata?.projectName as string | undefined;
+
+  const [content, setContent] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [conflictCount, setConflictCount] = useState(0);
+  const editorRef = useRef<MonacoType.editor.IStandaloneCodeEditor | null>(null);
+  const monacoRef = useRef<typeof MonacoType | null>(null);
+  const widgetsRef = useRef<MonacoType.editor.IContentWidget[]>([]);
+  const decorationsRef = useRef<MonacoType.editor.IEditorDecorationsCollection | null>(null);
+
+  const { wordWrap } = useSettingsStore();
+  const monacoTheme = useMonacoTheme();
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerHeight, setContainerHeight] = useState<number | undefined>();
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      if (entry) setContainerHeight(Math.floor(entry.contentRect.height));
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  // Load file content
+  useEffect(() => {
+    if (!filePath || !projectName) return;
+    setLoading(true);
+    api
+      .get<{ content: string }>(`${projectUrl(projectName)}/files/read?path=${encodeURIComponent(filePath)}`)
+      .then((data) => {
+        setContent(data.content);
+        setLoading(false);
+      })
+      .catch((e: Error) => {
+        setError(e.message || "Failed to load file");
+        setLoading(false);
+      });
+  }, [filePath, projectName]);
+
+  const refreshConflicts = useCallback(() => {
+    const editor = editorRef.current;
+    const monaco = monacoRef.current;
+    if (!editor || !monaco) return;
+
+    const value = editor.getModel()?.getValue() || "";
+    const regions = parseConflicts(value);
+    setConflictCount(regions.length);
+
+    // Clear old widgets
+    for (const w of widgetsRef.current) {
+      editor.removeContentWidget(w);
+    }
+    widgetsRef.current = [];
+
+    // Clear old decorations
+    if (decorationsRef.current) {
+      decorationsRef.current.clear();
+    }
+
+    if (regions.length === 0) return;
+
+    // Apply decorations
+    const decos: MonacoType.editor.IModelDeltaDecoration[] = [];
+    for (const region of regions) {
+      // Marker lines
+      decos.push({
+        range: new monaco.Range(region.startLine, 1, region.startLine, 1),
+        options: { isWholeLine: true, className: "conflict-marker-line", glyphMarginClassName: "conflict-glyph-current" },
+      });
+      decos.push({
+        range: new monaco.Range(region.separatorLine, 1, region.separatorLine, 1),
+        options: { isWholeLine: true, className: "conflict-marker-line" },
+      });
+      decos.push({
+        range: new monaco.Range(region.endLine, 1, region.endLine, 1),
+        options: { isWholeLine: true, className: "conflict-marker-line", glyphMarginClassName: "conflict-glyph-incoming" },
+      });
+      // Current content (green)
+      if (region.separatorLine - region.startLine > 1) {
+        decos.push({
+          range: new monaco.Range(region.startLine + 1, 1, region.separatorLine - 1, 1),
+          options: { isWholeLine: true, className: "conflict-current-content" },
+        });
+      }
+      // Incoming content (blue)
+      if (region.endLine - region.separatorLine > 1) {
+        decos.push({
+          range: new monaco.Range(region.separatorLine + 1, 1, region.endLine - 1, 1),
+          options: { isWholeLine: true, className: "conflict-incoming-content" },
+        });
+      }
+    }
+
+    decorationsRef.current = editor.createDecorationsCollection(decos);
+
+    // Add accept widgets above each conflict
+    for (const region of regions) {
+      const widgetId = `conflict-widget-${region.id}`;
+
+      const domNode = document.createElement("div");
+      domNode.className = "conflict-actions";
+      domNode.innerHTML =
+        `<span class="conflict-label">Current Change (${escHtml(region.currentLabel || "HEAD")})</span>` +
+        `<button class="conflict-btn conflict-btn-current" data-action="current">Accept Current</button>` +
+        `<button class="conflict-btn conflict-btn-incoming" data-action="incoming">Accept Incoming</button>` +
+        `<button class="conflict-btn conflict-btn-both" data-action="both">Accept Both</button>`;
+
+      domNode.addEventListener("click", (e) => {
+        const btn = (e.target as HTMLElement).closest("[data-action]");
+        if (!btn) return;
+        const action = btn.getAttribute("data-action") as "current" | "incoming" | "both";
+        acceptConflict(region.id, action);
+      });
+
+      const widget: MonacoType.editor.IContentWidget = {
+        getId: () => widgetId,
+        getDomNode: () => domNode,
+        getPosition: () => ({
+          position: { lineNumber: region.startLine, column: 1 },
+          preference: [monaco.editor.ContentWidgetPositionPreference.ABOVE],
+        }),
+      };
+      editor.addContentWidget(widget);
+      widgetsRef.current.push(widget);
+    }
+  }, []);
+
+  const acceptConflict = useCallback(
+    (regionId: number, action: "current" | "incoming" | "both") => {
+      const editor = editorRef.current;
+      const monaco = monacoRef.current;
+      if (!editor || !monaco) return;
+
+      const model = editor.getModel();
+      if (!model) return;
+
+      const value = model.getValue();
+      const regions = parseConflicts(value);
+      const region = regions.find((r) => r.id === regionId);
+      if (!region) return;
+
+      let replacement: string;
+      switch (action) {
+        case "current":
+          replacement = region.currentContent;
+          break;
+        case "incoming":
+          replacement = region.incomingContent;
+          break;
+        case "both":
+          replacement = region.currentContent + "\n" + region.incomingContent;
+          break;
+      }
+
+      const range = new monaco.Range(region.startLine, 1, region.endLine + 1, 1);
+      model.pushEditOperations(
+        [],
+        [{ range, text: replacement + "\n" }],
+        () => null,
+      );
+
+      // Save and refresh
+      saveFile(model.getValue());
+      // Small delay to let the model update before refreshing decorations
+      setTimeout(() => refreshConflicts(), 50);
+    },
+    [refreshConflicts],
+  );
+
+  const saveFile = useCallback(
+    async (newContent: string) => {
+      if (!filePath || !projectName) return;
+      try {
+        await api.put<{ written: boolean }>(`${projectUrl(projectName)}/files/write`, {
+          path: filePath,
+          content: newContent,
+        });
+      } catch (e) {
+        console.error("[conflict-editor] save failed:", e);
+      }
+    },
+    [filePath, projectName],
+  );
+
+  const handleMount: OnMount = (editor, monaco) => {
+    editorRef.current = editor;
+    monacoRef.current = monaco;
+
+    // Inject conflict editor styles (idempotent)
+    const doc = editor.getDomNode()?.ownerDocument ?? document;
+    if (!doc.getElementById("conflict-editor-styles")) {
+      const styleEl = doc.createElement("style");
+      styleEl.id = "conflict-editor-styles";
+      styleEl.textContent = `
+        .conflict-current-content { background: rgba(34, 197, 94, 0.1) !important; }
+        .conflict-incoming-content { background: rgba(59, 130, 246, 0.1) !important; }
+        .conflict-marker-line { background: rgba(100, 100, 100, 0.15) !important; font-style: italic; }
+        .conflict-glyph-current { background: #22c55e !important; }
+        .conflict-glyph-incoming { background: #3b82f6 !important; }
+        .conflict-actions { display: flex; gap: 8px; align-items: center; padding: 2px 0; font-size: 12px; font-family: system-ui; }
+        .conflict-label { color: #22c55e; font-weight: 600; margin-right: 8px; }
+        .conflict-btn { padding: 1px 8px; border-radius: 3px; border: none; cursor: pointer; font-size: 11px; opacity: 0.9; }
+        .conflict-btn:hover { opacity: 1; }
+        .conflict-btn-current { color: #22c55e; background: rgba(34, 197, 94, 0.15); }
+        .conflict-btn-incoming { color: #3b82f6; background: rgba(59, 130, 246, 0.15); }
+        .conflict-btn-both { color: #a855f7; background: rgba(168, 85, 247, 0.15); }
+      `;
+      doc.head?.appendChild(styleEl);
+    }
+
+    refreshConflicts();
+  };
+
+  const fileName = filePath?.split(/[\\/]/).pop() ?? "unknown";
+  const language = getMonacoLanguage(fileName);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader2 className="size-6 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-full text-destructive">
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full w-full flex flex-col">
+      <div className="flex items-center gap-2 px-3 py-1.5 text-xs border-b border-border bg-muted/50 flex-shrink-0">
+        <span className="font-medium">{fileName}</span>
+        <span className="text-muted-foreground">—</span>
+        {conflictCount > 0 ? (
+          <span className="text-destructive font-medium">
+            {conflictCount} conflict{conflictCount !== 1 ? "s" : ""} remaining
+          </span>
+        ) : (
+          <span className="text-green-500 font-medium">All conflicts resolved</span>
+        )}
+      </div>
+      <div ref={containerRef} className="flex-1 min-h-0">
+        {content !== null && containerHeight && (
+          <Editor
+            height={containerHeight}
+            language={language}
+            value={content}
+            onMount={handleMount}
+            theme={monacoTheme}
+            options={{
+              fontSize: 13,
+              fontFamily: "Menlo, Monaco, Consolas, monospace",
+              wordWrap: wordWrap ? "on" : "off",
+              glyphMargin: true,
+              readOnly: false,
+              automaticLayout: true,
+              scrollBeyondLastLine: false,
+              minimap: { enabled: false },
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function escHtml(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}

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

@@ -1,5 +1,7 @@
-import { useRef, useEffect, useCallback } from "react";
+import { useRef, useEffect, useState, useCallback } 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,188 @@ 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]);
+
+  // Check activation errors for this extension
+  const extensionId = metadata?.extensionId as string | undefined;
+  const activationError = useExtensionStore((s) => {
+    // Direct match by extensionId (most reliable)
+    if (extensionId && s.activationErrors[extensionId]) return s.activationErrors[extensionId];
+    // Fallback: check by viewType prefix (e.g. "ext-git-graph" for viewType "git-graph")
+    if (!viewType) return undefined;
+    for (const [extId, error] of Object.entries(s.activationErrors)) {
+      if (extId === `ext-${viewType}`) return error;
+    }
+    return undefined;
+  });
+
+  // Retry handler — re-dispatches the command
+  const handleRetry = useCallback(() => {
+    setTimedOut(false);
+    if (!viewType) return;
+    const command = viewType.includes(".") ? viewType : `${viewType}.view`;
+    (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) => p.name === projectName);
+        const args = match ? [match.path] : [];
+        window.dispatchEvent(new CustomEvent("ext:command:execute", {
+          detail: { command, args },
+        }));
+      } catch {}
+    })();
+  }, [viewType, projectName]);
+
+  // 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-3 text-sm text-text-subtle">
+        {timedOut ? (
+          <>
+            <span className="text-destructive font-medium">Extension failed to load</span>
+            {activationError && (
+              <span className="text-xs text-muted-foreground max-w-md text-center">{activationError}</span>
+            )}
+            <button
+              onClick={handleRetry}
+              className="text-xs text-primary hover:underline"
+            >
+              Retry
+            </button>
+          </>
+        ) : (
+          <>
+            <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]);