@hienlh/ppm 0.9.84 → 0.9.86

package/src/web/components/editor/save-as-dialog.tsx

@@ -0,0 +1,75 @@
+import { useState, useCallback } from "react";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { FileBrowserPicker } from "@/components/ui/file-browser-picker";
+import { useProjectStore } from "@/stores/project-store";
+
+interface SaveAsDialogProps {
+  open: boolean;
+  defaultName: string;
+  content: string;
+  onSave: (fullPath: string, content: string) => void;
+  onCancel: () => void;
+}
+
+export function SaveAsDialog({ open, defaultName, content, onSave, onCancel }: SaveAsDialogProps) {
+  const [filename, setFilename] = useState(defaultName);
+  const [showPicker, setShowPicker] = useState(false);
+  const [error, setError] = useState("");
+  const activeProject = useProjectStore((s) => s.activeProject);
+
+  const validateAndProceed = useCallback(() => {
+    const trimmed = filename.trim();
+    if (!trimmed) { setError("Filename cannot be empty"); return; }
+    if (/[/\\]/.test(trimmed)) { setError("Filename cannot contain / or \\"); return; }
+    setError("");
+    setShowPicker(true);
+  }, [filename]);
+
+  const handleFolderSelect = useCallback((dirPath: string) => {
+    const sep = dirPath.includes("\\") ? "\\" : "/";
+    const fullPath = dirPath.endsWith(sep) ? `${dirPath}${filename.trim()}` : `${dirPath}${sep}${filename.trim()}`;
+    onSave(fullPath, content);
+  }, [filename, content, onSave]);
+
+  if (showPicker) {
+    return (
+      <FileBrowserPicker
+        open
+        mode="folder"
+        root={activeProject?.path}
+        title={`Save "${filename.trim()}" to...`}
+        onSelect={handleFolderSelect}
+        onCancel={() => setShowPicker(false)}
+      />
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) onCancel(); }}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Save As</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-2 py-2">
+          <label className="text-sm text-muted-foreground">Filename</label>
+          <Input
+            value={filename}
+            onChange={(e) => { setFilename(e.target.value); setError(""); }}
+            onKeyDown={(e) => { if (e.key === "Enter") validateAndProceed(); }}
+            placeholder="e.g. my-file.ts"
+            autoFocus
+          />
+          {error && <p className="text-xs text-destructive">{error}</p>}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel}>Cancel</Button>
+          <Button onClick={validateAndProceed}>Choose Folder...</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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,17 +2,20 @@ import { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import {
   Terminal,
   MessageSquare,
-  GitBranch,
   GitCommitHorizontal,
+  GitBranch,
+  Puzzle,
   Settings,
   Database,
   Search,
   FileCode,
+  FilePlus,
   FolderOpen,
   Loader2,
   Globe,
   Mic,
-  Puzzle,
+  RefreshCw,
+  Plus,
 } from "lucide-react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { useProjectStore } from "@/stores/project-store";
@@ -37,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 "";
@@ -159,8 +175,8 @@ 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" },
       { 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")) },
@@ -178,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/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/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(