@hienlh/ppm 0.9.0-beta.9 → 0.9.1

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

@@ -0,0 +1,194 @@
+import { useState, useEffect, useRef, useMemo, useCallback } from "react";
+import { Check, Search } from "lucide-react";
+import { useExtensionStore, type QuickPickItemUI } from "@/stores/extension-store";
+import { cn } from "@/lib/utils";
+
+/** Modal overlay for extension-driven QuickPick selection */
+export function ExtensionQuickPick() {
+  const quickPick = useExtensionStore((s) => s.quickPick);
+  const resolveQuickPick = useExtensionStore((s) => s.resolveQuickPick);
+
+  if (!quickPick) return null;
+
+  return (
+    <QuickPickModal
+      items={quickPick.items}
+      options={quickPick.options}
+      onSelect={(selected) => resolveQuickPick(selected)}
+      onCancel={() => resolveQuickPick(undefined)}
+    />
+  );
+}
+
+function QuickPickModal({
+  items,
+  options,
+  onSelect,
+  onCancel,
+}: {
+  items: QuickPickItemUI[];
+  options: { placeholder?: string; canPickMany?: boolean };
+  onSelect: (selected: QuickPickItemUI[]) => void;
+  onCancel: () => void;
+}) {
+  const [query, setQuery] = useState("");
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const [picked, setPicked] = useState<Set<number>>(() => {
+    const initial = new Set<number>();
+    items.forEach((item, i) => { if (item.picked) initial.add(i); });
+    return initial;
+  });
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const canPickMany = options.canPickMany ?? false;
+
+  useEffect(() => {
+    requestAnimationFrame(() => inputRef.current?.focus());
+  }, []);
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) return items.map((item, i) => ({ item, originalIdx: i }));
+    const q = query.toLowerCase();
+    return items
+      .map((item, i) => ({ item, originalIdx: i }))
+      .filter(({ item }) =>
+        item.label.toLowerCase().includes(q) ||
+        item.description?.toLowerCase().includes(q) ||
+        item.detail?.toLowerCase().includes(q),
+      );
+  }, [items, query]);
+
+  // Clamp selection when filter changes
+  useEffect(() => {
+    setSelectedIdx((prev) => Math.min(prev, Math.max(filtered.length - 1, 0)));
+  }, [filtered.length]);
+
+  // Scroll selected into view
+  useEffect(() => {
+    const el = listRef.current?.children[selectedIdx] as HTMLElement | undefined;
+    el?.scrollIntoView({ block: "nearest" });
+  }, [selectedIdx]);
+
+  const confirmSelection = useCallback(() => {
+    if (canPickMany) {
+      const selected = items.filter((_, i) => picked.has(i));
+      onSelect(selected);
+    } else if (filtered[selectedIdx]) {
+      onSelect([filtered[selectedIdx].item]);
+    }
+  }, [canPickMany, picked, items, filtered, selectedIdx, onSelect]);
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (filtered.length > 0) setSelectedIdx((i) => (i + 1) % filtered.length);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (filtered.length > 0) setSelectedIdx((i) => (i - 1 + filtered.length) % filtered.length);
+        break;
+      case " ":
+        if (canPickMany && filtered[selectedIdx]) {
+          e.preventDefault();
+          const origIdx = filtered[selectedIdx].originalIdx;
+          setPicked((prev) => {
+            const next = new Set(prev);
+            if (next.has(origIdx)) next.delete(origIdx); else next.add(origIdx);
+            return next;
+          });
+        }
+        break;
+      case "Enter":
+        e.preventDefault();
+        confirmSelection();
+        break;
+      case "Escape":
+        e.preventDefault();
+        onCancel();
+        break;
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-end md:items-start justify-center md:pt-[20vh]" onClick={onCancel}>
+      <div className="fixed inset-0 bg-black/50" />
+      <div
+        className="relative z-10 w-full max-w-md rounded-t-xl md:rounded-xl border border-border bg-background shadow-2xl overflow-hidden max-h-[80vh] md:max-h-none"
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={handleKeyDown}
+      >
+        {/* Search input */}
+        <div className="flex items-center gap-2 border-b border-border px-3 py-2.5">
+          <Search className="size-4 text-text-subtle shrink-0" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={options.placeholder ?? "Select an item..."}
+            className="flex-1 bg-transparent text-sm text-text-primary outline-none placeholder:text-text-subtle"
+          />
+          <kbd className="hidden sm:inline-flex items-center rounded border border-border bg-surface px-1.5 py-0.5 text-[10px] text-text-subtle font-mono">
+            ESC
+          </kbd>
+        </div>
+
+        {/* Results */}
+        <div ref={listRef} className="max-h-72 overflow-y-auto py-1">
+          {filtered.length === 0 ? (
+            <p className="px-3 py-4 text-sm text-text-subtle text-center">No matching items</p>
+          ) : (
+            filtered.map(({ item, originalIdx }, i) => (
+              <button
+                key={originalIdx}
+                onClick={() => {
+                  if (canPickMany) {
+                    setPicked((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(originalIdx)) next.delete(originalIdx); else next.add(originalIdx);
+                      return next;
+                    });
+                  } else {
+                    onSelect([item]);
+                  }
+                }}
+                className={cn(
+                  "flex items-center gap-3 w-full px-3 py-2 text-sm text-left transition-colors",
+                  i === selectedIdx ? "bg-accent/15 text-text-primary" : "text-text-secondary hover:bg-surface-elevated",
+                )}
+              >
+                {canPickMany && (
+                  <span className={cn(
+                    "size-4 shrink-0 rounded border flex items-center justify-center",
+                    picked.has(originalIdx) ? "bg-primary border-primary text-primary-foreground" : "border-border",
+                  )}>
+                    {picked.has(originalIdx) && <Check className="size-3" />}
+                  </span>
+                )}
+                <div className="flex-1 min-w-0">
+                  <div className="truncate">{item.label}</div>
+                  {item.description && <span className="text-xs text-text-subtle ml-2">{item.description}</span>}
+                  {item.detail && <div className="text-xs text-text-subtle truncate mt-0.5">{item.detail}</div>}
+                </div>
+              </button>
+            ))
+          )}
+        </div>
+
+        {/* Footer hint for multi-select */}
+        {canPickMany && (
+          <div className="flex items-center justify-between border-t border-border px-3 py-1.5">
+            <span className="text-[10px] text-text-subtle">{picked.size} selected</span>
+            <button
+              onClick={confirmSelection}
+              className="text-xs text-primary hover:text-primary/80 font-medium"
+            >
+              Confirm
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/web/components/extensions/extension-tree-view.tsx

@@ -0,0 +1,240 @@
+import { useCallback, useState, useRef, useMemo } from "react";
+import { ChevronRight, ChevronDown, RefreshCw, Pencil, Trash2, Plus, Search } from "lucide-react";
+import { useExtensionStore, type TreeItemUI, type TreeItemAction } from "@/stores/extension-store";
+import { cn } from "@/lib/utils";
+
+interface ExtensionTreeViewProps {
+  viewId: string;
+  className?: string;
+}
+
+/** Dispatch a tree:expand request to fetch children from the server */
+function requestTreeExpand(viewId: string, itemId: string) {
+  window.dispatchEvent(new CustomEvent("ext:tree:expand", {
+    detail: { viewId, itemId },
+  }));
+}
+
+/** Dispatch a command:execute request via the WS bridge */
+function executeCommand(command: string, args?: unknown[]) {
+  window.dispatchEvent(new CustomEvent("ext:command:execute", {
+    detail: { command, args },
+  }));
+}
+
+const ACTION_ICONS: Record<string, React.ElementType> = {
+  refresh: RefreshCw,
+  edit: Pencil,
+  trash: Trash2,
+  plus: Plus,
+  search: Search,
+};
+
+/** Generic TreeView renderer for extension-contributed tree data */
+export function ExtensionTreeView({ viewId, className }: ExtensionTreeViewProps) {
+  const items = useExtensionStore((s) => s.treeViews[viewId]) ?? [];
+  const contributions = useExtensionStore((s) => s.contributions);
+
+  // Find view name & header actions from contributions
+  const viewMeta = useMemo(() => {
+    if (!contributions) return { name: viewId, headerActions: [] };
+    // Find view name
+    let name = viewId;
+    const views = contributions.views;
+    if (views) {
+      for (const group of Object.values(views)) {
+        const found = group.find((v) => v.id === viewId);
+        if (found) { name = found.name; break; }
+      }
+    }
+    // Find header actions from menus.view/title
+    const headerActions: { command: string; title: string; icon?: string }[] = [];
+    const viewTitleMenus = contributions.menus?.["view/title"];
+    if (viewTitleMenus) {
+      for (const menu of viewTitleMenus) {
+        // Check "when" clause: view == viewId
+        if (menu.when) {
+          const match = menu.when.match(/view\s*==\s*(\S+)/);
+          if (match && match[1] !== viewId) continue;
+        }
+        // Find command title
+        const cmd = contributions.commands?.find((c) => c.command === menu.command);
+        if (cmd) headerActions.push({ command: cmd.command, title: cmd.title, icon: cmd.icon });
+      }
+    }
+    return { name, headerActions };
+  }, [contributions, viewId]);
+
+  return (
+    <div className={cn("flex flex-col h-full", className)}>
+      {/* Header — matches built-in DatabaseSidebar header */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border shrink-0">
+        <span className="text-[10px] font-semibold text-text-subtle uppercase tracking-wider">
+          {viewMeta.name}
+        </span>
+        <div className="flex items-center gap-0.5">
+          {viewMeta.headerActions.map((action) => {
+            const iconName = action.icon ?? inferIcon(action.command);
+            const Icon = ACTION_ICONS[iconName] ?? RefreshCw;
+            return (
+              <button
+                key={action.command}
+                onClick={() => executeCommand(action.command)}
+                className="flex items-center justify-center size-5 rounded hover:bg-surface-elevated transition-colors text-text-subtle hover:text-foreground"
+                title={action.title}
+              >
+                <Icon className="size-3.5" />
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Tree content */}
+      <div className="flex-1 overflow-y-auto min-h-0 py-1" role="tree" aria-label={viewId}>
+        {items.length === 0 ? (
+          <p className="px-4 py-6 text-xs text-text-subtle text-center">No items</p>
+        ) : (
+          items.map((item) => (
+            <TreeNode key={item.id} item={item} depth={0} viewId={viewId} />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** Infer icon name from command ID */
+function inferIcon(command: string): string {
+  if (command.includes("refresh")) return "refresh";
+  if (command.includes("add") || command.includes("create") || command.includes("new")) return "plus";
+  if (command.includes("delete") || command.includes("remove")) return "trash";
+  if (command.includes("edit") || command.includes("update")) return "edit";
+  if (command.includes("search") || command.includes("find")) return "search";
+  return "refresh";
+}
+
+function TreeNode({ item, depth, viewId }: { item: TreeItemUI; depth: number; viewId: string }) {
+  const [expanded, setExpanded] = useState(false);
+  const hasChildren = item.collapsibleState !== "none";
+  const childrenLoaded = useRef(false);
+
+  // When children arrive from server, auto-expand once
+  if (item.children && item.children.length > 0 && !childrenLoaded.current) {
+    childrenLoaded.current = true;
+    if (!expanded) setExpanded(true);
+  }
+
+  const handleToggle = useCallback(() => {
+    if (!hasChildren) return;
+    const willExpand = !expanded;
+    setExpanded(willExpand);
+    if (willExpand && (!item.children || item.children.length === 0)) {
+      requestTreeExpand(viewId, item.id);
+    }
+  }, [hasChildren, expanded, item.id, item.children, viewId]);
+
+  const handleClick = useCallback(() => {
+    handleToggle();
+    if (item.command) {
+      executeCommand(item.command, item.commandArgs);
+    }
+  }, [handleToggle, item.command, item.commandArgs]);
+
+  const paddingLeft = 8 + depth * 16;
+
+  return (
+    <div role="treeitem" aria-expanded={hasChildren ? expanded : undefined}>
+      <div
+        className={cn("group/node flex items-center gap-1 py-1 hover:bg-surface-elevated transition-colors")}
+        style={{ paddingLeft, paddingRight: 8 }}
+      >
+        {/* Expand chevron */}
+        <button
+          onClick={handleToggle}
+          className="shrink-0 text-text-subtle hover:text-foreground transition-colors"
+        >
+          {hasChildren ? (
+            expanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />
+          ) : (
+            <span className="size-3" />
+          )}
+        </button>
+
+        {/* Color dot */}
+        {item.color && (
+          <span
+            className="shrink-0 size-2 rounded-full border border-border"
+            style={{ backgroundColor: item.color }}
+          />
+        )}
+
+        {/* Label — click to toggle or execute command */}
+        <button
+          className="flex-1 text-left text-xs truncate hover:text-primary transition-colors"
+          onClick={handleClick}
+        >
+          {item.label}
+        </button>
+
+        {/* Description (column type info) */}
+        {item.description && (
+          <span className="shrink-0 ml-1 text-text-subtle text-[10px]">{item.description}</span>
+        )}
+
+        {/* Badge (PG/DB) */}
+        {item.badge && (
+          <span className="shrink-0 text-[9px] text-text-subtle uppercase px-1 rounded bg-surface-elevated">
+            {item.badge}
+          </span>
+        )}
+
+        {/* Action buttons (visible on hover) */}
+        {item.actions && item.actions.length > 0 && (
+          <div className="hidden group-hover/node:flex items-center gap-0.5 shrink-0">
+            {item.actions.map((action) => (
+              <ActionButton key={action.command} action={action} />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Children */}
+      {hasChildren && expanded && item.children && (
+        <div role="group">
+          {item.children.map((child) => (
+            <TreeNode key={child.id} item={child} depth={depth + 1} viewId={viewId} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ActionButton({ action }: { action: TreeItemAction }) {
+  const [spinning, setSpinning] = useState(false);
+  const Icon = ACTION_ICONS[action.icon] ?? RefreshCw;
+  const isTrash = action.icon === "trash";
+
+  const handleClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (action.icon === "refresh") {
+      setSpinning(true);
+      setTimeout(() => setSpinning(false), 1000);
+    }
+    executeCommand(action.command, action.commandArgs);
+  }, [action]);
+
+  return (
+    <button
+      onClick={handleClick}
+      className={cn(
+        "p-0.5 text-text-subtle transition-colors",
+        isTrash ? "hover:text-red-500" : "hover:text-foreground",
+      )}
+      title={action.tooltip}
+    >
+      <Icon className={cn("size-3", spinning && "animate-spin")} />
+    </button>
+  );
+}

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

@@ -0,0 +1,83 @@
+import { useRef, useEffect, useCallback } from "react";
+import { useExtensionStore } from "@/stores/extension-store";
+
+/** Inject acquireVsCodeApi() shim so extension webviews can postMessage to parent */
+const VSCODE_API_SHIM = `<script>
+function acquireVsCodeApi(){return{postMessage:function(m){window.parent.postMessage(m,"*")},getState:function(){try{return JSON.parse(sessionStorage.getItem("vscode-state")||"null")}catch{return null}},setState:function(s){sessionStorage.setItem("vscode-state",JSON.stringify(s));return s}}}
+</script>`;
+
+function injectVscodeApiShim(html: string): string {
+  if (!html) return html;
+  // Insert shim right after <head> tag (or at start if no <head>)
+  const headIdx = html.indexOf("<head>");
+  if (headIdx !== -1) {
+    return html.slice(0, headIdx + 6) + VSCODE_API_SHIM + html.slice(headIdx + 6);
+  }
+  return VSCODE_API_SHIM + html;
+}
+
+interface ExtensionWebviewProps {
+  metadata?: Record<string, unknown>;
+}
+
+/**
+ * iframe-based webview container for extension-contributed webview panels.
+ * Renders as a tab component in the editor panel system.
+ */
+export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
+  const panelId = metadata?.panelId as string | undefined;
+  const panel = useExtensionStore((s) => panelId ? s.webviewPanels[panelId] : undefined);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  // Inject acquireVsCodeApi shim + write HTML into iframe via srcdoc
+  const rawHtml = panel?.html ?? "";
+  const html = injectVscodeApiShim(rawHtml);
+
+  // Listen for postMessage from iframe → forward to extension via WS bridge
+  useEffect(() => {
+    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 },
+        }));
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [panelId]);
+
+  // 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(() => {
+    const handler = (e: Event) => {
+      const { panelId: targetId, message } = (e as CustomEvent).detail;
+      if (targetId === panelId) {
+        iframeRef.current?.contentWindow?.postMessage(message, "*");
+      }
+    };
+    window.addEventListener("ext:webview:message", handler);
+    return () => window.removeEventListener("ext:webview:message", handler);
+  }, [panelId]);
+
+  if (!panel) {
+    return (
+      <div className="flex items-center justify-center h-full text-sm text-text-subtle">
+        Webview panel not found
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full w-full relative">
+      <iframe
+        ref={iframeRef}
+        srcDoc={html}
+        sandbox="allow-scripts"
+        className="w-full h-full border-0 bg-white dark:bg-zinc-900"
+        title={panel.title}
+      />
+    </div>
+  );
+}

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

@@ -12,12 +12,14 @@ import {
   Loader2,
   Globe,
   Mic,
+  Puzzle,
 } from "lucide-react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useKeybindingsStore } from "@/stores/keybindings-store";
 import { useFileStore, type FileNode } from "@/stores/file-store";
+import { useExtensionStore } from "@/stores/extension-store";
 import { api } from "@/lib/api-client";
 import { basename } from "@/lib/utils";
 
@@ -103,6 +105,7 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
   const sidebarCollapsed = useSettingsStore((s) => s.sidebarCollapsed);
   const toggleSidebar = useSettingsStore((s) => s.toggleSidebar);
   const getBinding = useKeybindingsStore((s) => s.getBinding);
+  const extContributions = useExtensionStore((s) => s.contributions);
 
   // Fetch filesystem files when path query changes directory
   const fetchFsFiles = useCallback(async (dir: string) => {
@@ -154,7 +157,7 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
       onClose();
     };
 
-    return [
+    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: "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")) },
@@ -174,7 +177,24 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
         shortcut: formatShortcut(getBinding("open-settings")),
       },
     ];
-  }, [activeProject, openTab, onClose, setSidebarActiveTab, sidebarCollapsed, toggleSidebar, getBinding]);
+
+    // 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();
+      },
+    }));
+
+    return [...builtIn, ...extCmds];
+  }, [activeProject, openTab, onClose, setSidebarActiveTab, sidebarCollapsed, toggleSidebar, getBinding, extContributions]);
 
   // File commands — derived from file store tree (project files)
   const fileCommands = useMemo<CommandItem[]>(() => {