@hienlh/ppm 0.9.0-beta.9 → 0.9.1

package/src/web/hooks/use-url-sync.ts

@@ -1,37 +1,181 @@
 import { useEffect, useRef } from "react";
-import { useTabStore } from "@/stores/tab-store";
+import { useTabStore, type TabType } from "@/stores/tab-store";
+
+// ---------------------------------------------------------------------------
+// URL state types
+// ---------------------------------------------------------------------------
+
+export interface UrlState {
+  projectName: string | null;
+  tabType: TabType | null;
+  tabIdentifier: string | null;
+  openChat: string | null;
+}
+
+const VALID_TAB_TYPES: TabType[] = [
+  "terminal", "chat", "editor", "database", "sqlite",
+  "postgres", "git-graph", "git-diff", "settings", "browser",
+];
+
+// ---------------------------------------------------------------------------
+// Parse URL → state
+// ---------------------------------------------------------------------------
 
 /**
- * Parse the current URL to extract project name and tab ID.
- * Expected format: /project/:projectName/tab/:tabId
+ * Parse the current URL to extract project name and tab info.
+ * Format: /project/{name}/{tabType}/{...identifier}
  */
-export function parseUrlState(): { projectName: string | null; tabId: string | null; openChat: string | null } {
+export function parseUrlState(): UrlState {
   const path = window.location.pathname;
-  const match = path.match(/^\/project\/([^/]+)(?:\/tab\/([^/]+))?/);
   const params = new URLSearchParams(window.location.search);
   const openChat = params.get("openChat");
-  if (!match) return { projectName: null, tabId: null, openChat };
-  return {
-    projectName: match[1] ? decodeURIComponent(match[1]) : null,
-    tabId: match[2] ? decodeURIComponent(match[2]) : null,
-    openChat,
-  };
+
+  const match = path.match(/^\/project\/([^/]+)(?:\/([^/]+)(\/.*)?)?/);
+  if (!match) return { projectName: null, tabType: null, tabIdentifier: null, openChat };
+
+  const projectName = decodeURIComponent(match[1]!);
+  const rawType = match[2] ?? null;
+  const rawIdentifier = match[3] ? match[3].slice(1) : null; // strip leading /
+
+  // Legacy fallback: /project/{name}/tab/{tabId}
+  if (rawType === "tab") {
+    return { projectName, tabType: null, tabIdentifier: null, openChat };
+  }
+
+  const tabType = VALID_TAB_TYPES.includes(rawType as TabType) ? (rawType as TabType) : null;
+
+  return { projectName, tabType, tabIdentifier: rawIdentifier, openChat };
 }
 
+// ---------------------------------------------------------------------------
+// Build URL from state
+// ---------------------------------------------------------------------------
+
 /**
- * Build URL path from project name and tab ID.
+ * Build URL path from project name and deterministic tab ID.
  */
-function buildUrl(projectName: string | null, tabId: string | null): string {
+export function buildUrl(projectName: string | null, tabId: string | null): string {
   if (!projectName || projectName === "__global__") return "/";
+
   let url = `/project/${encodeURIComponent(projectName)}`;
-  if (tabId) url += `/tab/${encodeURIComponent(tabId)}`;
+  if (!tabId) return url;
+
+  // Strip panel suffix (@panel-xxx) — not meaningful in URLs
+  const atIdx = tabId.indexOf("@");
+  const cleanId = atIdx !== -1 ? tabId.slice(0, atIdx) : tabId;
+
+  // tabId format: "type:identifier" or "type" (singletons)
+  const colonIdx = cleanId.indexOf(":");
+  if (colonIdx === -1) {
+    // Singleton: git-graph, settings
+    url += `/${cleanId}`;
+  } else {
+    const type = cleanId.slice(0, colonIdx);
+    const identifier = cleanId.slice(colonIdx + 1);
+    // Real slashes — no encoding for paths. Only encode special URL chars.
+    url += `/${type}/${identifier.replace(/[?#]/g, encodeURIComponent)}`;
+  }
   return url;
 }
 
+// ---------------------------------------------------------------------------
+// Tab ID reconstruction from URL
+// ---------------------------------------------------------------------------
+
+/** Reconstruct deterministic tab ID from parsed URL */
+export function tabIdFromUrl(tabType: TabType, tabIdentifier: string | null): string {
+  if (!tabIdentifier) return tabType; // singleton
+  return `${tabType}:${tabIdentifier}`;
+}
+
+// ---------------------------------------------------------------------------
+// Auto-open tab from URL
+// ---------------------------------------------------------------------------
+
+function buildMetadataFromUrl(
+  type: TabType, identifier: string | null, projectName: string,
+): Record<string, unknown> | null {
+  switch (type) {
+    case "editor": return identifier ? { filePath: identifier, projectName } : null;
+    case "chat": {
+      if (!identifier) return null;
+      const slashIdx = identifier.indexOf("/");
+      if (slashIdx === -1) return { sessionId: identifier, projectName };
+      const providerId = identifier.slice(0, slashIdx);
+      const sessionId = identifier.slice(slashIdx + 1);
+      return sessionId ? { sessionId, providerId, projectName } : null;
+    }
+    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": {
+      const [connId, tableName] = (identifier ?? "").split(":");
+      return connId ? { connectionId: connId, tableName: tableName ?? "" } : null;
+    }
+    case "sqlite": return identifier ? { filePath: identifier, projectName } : null;
+    case "postgres": {
+      const [connId, tableName] = (identifier ?? "").split(":");
+      return connId ? { connectionId: connId, tableName: tableName ?? "" } : null;
+    }
+    case "browser": return identifier ? { url: identifier } : null;
+    default: return null;
+  }
+}
+
+function buildTitleFromUrl(type: TabType, identifier: string | null): string {
+  switch (type) {
+    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 "browser": return "Browser";
+    default: return type;
+  }
+}
+
+/** Auto-open or focus a tab based on URL state */
+export function autoOpenFromUrl(
+  tabType: TabType,
+  tabIdentifier: string | null,
+  projectName: string,
+): void {
+  const { tabs, setActiveTab, openTab } = useTabStore.getState();
+  const expectedId = tabIdFromUrl(tabType, tabIdentifier);
+
+  // Check if tab already exists
+  const existing = tabs.find((t) => t.id === expectedId);
+  if (existing) {
+    setActiveTab(existing.id);
+    return;
+  }
+
+  // Auto-create tab from URL
+  const metadata = buildMetadataFromUrl(tabType, tabIdentifier, projectName);
+  if (!metadata) return;
+
+  openTab({
+    type: tabType,
+    title: buildTitleFromUrl(tabType, tabIdentifier),
+    projectId: projectName,
+    closable: true,
+    metadata,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Hook: sync URL ↔ tab state
+// ---------------------------------------------------------------------------
+
 /**
  * Sync tab/project state with browser URL.
- * - On tab/project change → pushState (enables back/forward navigation)
- * - On popstate (back/forward) → restore tab from URL
+ * - On tab/project change → pushState with type-based URL
+ * - On popstate (back/forward) → restore/create tab from URL
  */
 export function useUrlSync() {
   const activeTabId = useTabStore((s) => s.activeTabId);
@@ -40,7 +184,6 @@ export function useUrlSync() {
 
   // Push URL when active tab or project changes
   useEffect(() => {
-    // Skip push if this change was triggered by popstate (back/forward)
     if (isPopState.current) {
       isPopState.current = false;
       return;
@@ -55,11 +198,20 @@ export function useUrlSync() {
   // Listen for back/forward navigation
   useEffect(() => {
     function handlePopState() {
-      const { tabId } = parseUrlState();
+      const { tabType, tabIdentifier } = parseUrlState();
+      if (!tabType) return;
+
+      isPopState.current = true;
       const { tabs, setActiveTab } = useTabStore.getState();
-      if (tabId && tabs.some((t) => t.id === tabId)) {
-        isPopState.current = true;
-        setActiveTab(tabId);
+      const expectedId = tabIdFromUrl(tabType, tabIdentifier);
+      const existing = tabs.find((t) => t.id === expectedId);
+
+      if (existing) {
+        setActiveTab(existing.id);
+      } else {
+        // Auto-open tab on back/forward if it was closed
+        const project = useTabStore.getState().currentProject;
+        if (project) autoOpenFromUrl(tabType, tabIdentifier, project);
       }
     }
 

package/src/web/stores/connection-store.ts

@@ -0,0 +1,39 @@
+import { create } from "zustand";
+
+interface ConnectionState {
+  /** Whether the server is currently unreachable */
+  isDown: boolean;
+  /** Timestamp when the server first went down */
+  downSince: number | null;
+  /** Whether the overlay should be shown (down for > threshold) */
+  showOverlay: boolean;
+
+  markDown: () => void;
+  markUp: () => void;
+}
+
+/** How long the server must be unreachable before showing the overlay */
+const OVERLAY_THRESHOLD_MS = 15_000;
+
+export const useConnectionStore = create<ConnectionState>((set, get) => ({
+  isDown: false,
+  downSince: null,
+  showOverlay: false,
+
+  markDown: () => {
+    const { downSince } = get();
+    const now = Date.now();
+    const since = downSince ?? now;
+    const elapsed = now - since;
+
+    set({
+      isDown: true,
+      downSince: since,
+      showOverlay: elapsed >= OVERLAY_THRESHOLD_MS,
+    });
+  },
+
+  markUp: () => {
+    set({ isDown: false, downSince: null, showOverlay: false });
+  },
+}));

package/src/web/stores/extension-store.ts

@@ -0,0 +1,204 @@
+import { create } from "zustand";
+import type { ExtensionContributes, ContributedCommand } from "../../types/extension.ts";
+
+// --- UI types for extension components ---
+
+export interface StatusBarItemUI {
+  id: string;
+  text: string;
+  tooltip?: string;
+  command?: string;
+  alignment: "left" | "right";
+  priority: number;
+  extensionId?: string;
+}
+
+export interface TreeItemAction {
+  icon: "refresh" | "edit" | "trash" | "plus" | "search";
+  tooltip: string;
+  command: string;
+  commandArgs?: unknown[];
+}
+
+export interface TreeItemUI {
+  id: string;
+  label: string;
+  description?: string;
+  tooltip?: string;
+  icon?: string;
+  color?: string;
+  badge?: string;
+  actions?: TreeItemAction[];
+  collapsibleState: "none" | "collapsed" | "expanded";
+  command?: string;
+  commandArgs?: unknown[];
+  children?: TreeItemUI[];
+  contextValue?: string;
+}
+
+export interface WebviewPanelUI {
+  id: string;
+  extensionId: string;
+  viewType: string;
+  title: string;
+  html: string;
+}
+
+export interface QuickPickState {
+  items: QuickPickItemUI[];
+  options: { placeholder?: string; canPickMany?: boolean };
+  resolve: (selected: QuickPickItemUI[] | undefined) => void;
+}
+
+export interface QuickPickItemUI {
+  label: string;
+  description?: string;
+  detail?: string;
+  picked?: boolean;
+}
+
+export interface InputBoxState {
+  options: { prompt?: string; value?: string; placeholder?: string; password?: boolean };
+  resolve: (value: string | undefined) => void;
+}
+
+// --- Store ---
+
+interface ExtensionStore {
+  // Status bar
+  statusBarItems: StatusBarItemUI[];
+  addStatusBarItem: (item: StatusBarItemUI) => void;
+  removeStatusBarItem: (id: string) => void;
+  updateStatusBarItem: (id: string, updates: Partial<StatusBarItemUI>) => void;
+
+  // Tree views
+  treeViews: Record<string, TreeItemUI[]>;
+  updateTree: (viewId: string, items: TreeItemUI[]) => void;
+  updateTreeChildren: (viewId: string, parentId: string, children: TreeItemUI[]) => void;
+  removeTree: (viewId: string) => void;
+
+  // Webview panels
+  webviewPanels: Record<string, WebviewPanelUI>;
+  addWebviewPanel: (panel: WebviewPanelUI) => void;
+  removeWebviewPanel: (id: string) => void;
+  updateWebviewPanel: (id: string, updates: Partial<WebviewPanelUI>) => void;
+
+  // Contributions (fetched from API)
+  contributions: ExtensionContributes | null;
+  setContributions: (c: ExtensionContributes) => void;
+
+  // QuickPick modal
+  quickPick: QuickPickState | null;
+  showQuickPick: (items: QuickPickItemUI[], options?: QuickPickState["options"]) => Promise<QuickPickItemUI[] | undefined>;
+  resolveQuickPick: (selected: QuickPickItemUI[] | undefined) => void;
+
+  // InputBox modal
+  inputBox: InputBoxState | null;
+  showInputBox: (options?: InputBoxState["options"]) => Promise<string | undefined>;
+  resolveInputBox: (value: string | undefined) => void;
+
+  // Cleanup
+  clearExtension: (extensionId: string) => void;
+}
+
+export const useExtensionStore = create<ExtensionStore>((set, get) => ({
+  // --- Status bar ---
+  statusBarItems: [],
+  addStatusBarItem: (item) => set((s) => ({
+    statusBarItems: [...s.statusBarItems.filter((i) => i.id !== item.id), item],
+  })),
+  removeStatusBarItem: (id) => set((s) => ({
+    statusBarItems: s.statusBarItems.filter((i) => i.id !== id),
+  })),
+  updateStatusBarItem: (id, updates) => set((s) => ({
+    statusBarItems: s.statusBarItems.map((i) => i.id === id ? { ...i, ...updates } : i),
+  })),
+
+  // --- Tree views ---
+  treeViews: {},
+  updateTree: (viewId, items) => set((s) => ({
+    treeViews: { ...s.treeViews, [viewId]: items },
+  })),
+  updateTreeChildren: (viewId, parentId, children) => set((s) => {
+    const items = s.treeViews[viewId];
+    if (!items) return s;
+    const merge = (nodes: TreeItemUI[]): TreeItemUI[] =>
+      nodes.map((n) => {
+        if (n.id === parentId) return { ...n, children, collapsibleState: "expanded" as const };
+        if (n.children) return { ...n, children: merge(n.children) };
+        return n;
+      });
+    return { treeViews: { ...s.treeViews, [viewId]: merge(items) } };
+  }),
+  removeTree: (viewId) => set((s) => {
+    const { [viewId]: _, ...rest } = s.treeViews;
+    return { treeViews: rest };
+  }),
+
+  // --- Webview panels ---
+  webviewPanels: {},
+  addWebviewPanel: (panel) => set((s) => ({
+    webviewPanels: { ...s.webviewPanels, [panel.id]: panel },
+  })),
+  removeWebviewPanel: (id) => set((s) => {
+    const { [id]: _, ...rest } = s.webviewPanels;
+    return { webviewPanels: rest };
+  }),
+  updateWebviewPanel: (id, updates) => set((s) => {
+    const existing = s.webviewPanels[id];
+    if (!existing) return s;
+    return { webviewPanels: { ...s.webviewPanels, [id]: { ...existing, ...updates } } };
+  }),
+
+  // --- Contributions ---
+  contributions: null,
+  setContributions: (c) => set({ contributions: c }),
+
+  // --- QuickPick ---
+  quickPick: null,
+  showQuickPick: (items, options = {}) => {
+    // Resolve any existing quickpick first (prevents promise leak)
+    const existing = get().quickPick;
+    if (existing) existing.resolve(undefined);
+    return new Promise((resolve) => {
+      set({ quickPick: { items, options, resolve } });
+    });
+  },
+  resolveQuickPick: (selected) => {
+    const qp = get().quickPick;
+    if (qp) {
+      qp.resolve(selected);
+      set({ quickPick: null });
+    }
+  },
+
+  // --- InputBox ---
+  inputBox: null,
+  showInputBox: (options = {}) => {
+    // Resolve any existing inputbox first (prevents promise leak)
+    const existing = get().inputBox;
+    if (existing) existing.resolve(undefined);
+    return new Promise((resolve) => {
+      set({ inputBox: { options, resolve } });
+    });
+  },
+  resolveInputBox: (value) => {
+    const ib = get().inputBox;
+    if (ib) {
+      ib.resolve(value);
+      set({ inputBox: null });
+    }
+  },
+
+  // --- Cleanup ---
+  clearExtension: (extensionId) => set((s) => {
+    const webviewPanels = { ...s.webviewPanels };
+    for (const [id, panel] of Object.entries(webviewPanels)) {
+      if (panel.extensionId === extensionId) delete webviewPanels[id];
+    }
+    return {
+      statusBarItems: s.statusBarItems.filter((i) => i.extensionId !== extensionId),
+      webviewPanels,
+    };
+  }),
+}));

package/src/web/stores/panel-store.ts

@@ -1,5 +1,4 @@
 import { create } from "zustand";
-import { randomId } from "@/lib/utils";
 import type { Tab, TabType } from "./tab-store";
 import {
   type Panel,
@@ -13,18 +12,15 @@ import {
   MAX_ROWS,
   savePanelLayout,
   loadPanelLayout,
+  deriveTabId,
 } from "./panel-utils";
 
 /** Tab types that can only have 1 instance per project */
-const SINGLETON_TYPES = new Set<TabType>(["git-graph"]);
+const SINGLETON_TYPES = new Set<TabType>(["git-graph", "settings"]);
 
 /** Tab types removed in a prior version — filter them out when loading persisted state */
 const OBSOLETE_TAB_TYPES = new Set(["projects", "git-status"]);
 
-function generateTabId(): string {
-  return `tab-${randomId()}`;
-}
-
 function pushHistory(history: string[], id: string): string[] {
   const filtered = history.filter((h) => h !== id);
   filtered.push(id);
@@ -47,6 +43,7 @@ export interface PanelStore {
 
   // Project lifecycle
   switchProject: (projectName: string) => void;
+  reloadProject: (projectName: string) => void;
 
   // Panel focus
   setFocusedPanel: (panelId: string) => void;
@@ -188,6 +185,25 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
       }
     },
 
+    reloadProject: (projectName) => {
+      const { projectGrids, projectFocused, panels } = get();
+      // Clear in-memory cache so switchProject re-reads from localStorage
+      const newGrids = { ...projectGrids };
+      const newFocused = { ...projectFocused };
+      delete newGrids[projectName];
+      delete newFocused[projectName];
+
+      // Remove old panels belonging to this project from flat map
+      const oldGrid = projectGrids[projectName];
+      const oldPanelIds = oldGrid ? new Set(oldGrid.flat()) : new Set<string>();
+      const cleanedPanels = { ...panels };
+      for (const id of oldPanelIds) delete cleanedPanels[id];
+
+      set({ projectGrids: newGrids, projectFocused: newFocused, panels: cleanedPanels, currentProject: null });
+      // Re-trigger full load from localStorage
+      get().switchProject(projectName);
+    },
+
     setFocusedPanel: (panelId) => {
       if (get().panels[panelId]) set({ focusedPanelId: panelId });
     },
@@ -197,10 +213,25 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
       const panel = get().panels[pid];
       if (!panel) return "";
 
-      // Singleton check across ALL panels
+      // Terminal: compute next available index if not provided
+      if (tabDef.type === "terminal" && !tabDef.metadata?.terminalIndex) {
+        const allTabs = Object.values(get().panels).flatMap((p) => p.tabs);
+        const terminalNums = allTabs
+          .filter((t) => t.type === "terminal")
+          .map((t) => {
+            const match = t.id.match(/^terminal:(\d+)/);
+            return match ? parseInt(match[1]!, 10) : 0;
+          });
+        const nextIndex = terminalNums.length > 0 ? Math.max(...terminalNums) + 1 : 1;
+        tabDef = { ...tabDef, metadata: { ...tabDef.metadata, terminalIndex: nextIndex } };
+      }
+
+      const baseId = deriveTabId(tabDef.type, tabDef.metadata);
+
+      // Singleton check — focus existing across ALL panels
       if (SINGLETON_TYPES.has(tabDef.type)) {
         for (const p of Object.values(get().panels)) {
-          const existing = p.tabs.find((t) => t.type === tabDef.type && t.projectId === tabDef.projectId);
+          const existing = p.tabs.find((t) => t.id === baseId);
           if (existing) {
             set((s) => ({
               focusedPanelId: p.id,
@@ -219,7 +250,30 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
         }
       }
 
-      const id = generateTabId();
+      // Non-singleton: dedup within SAME panel only
+      const currentPanel = get().panels[pid]!;
+      const existingInPanel = currentPanel.tabs.find((t) => t.id === baseId);
+      if (existingInPanel) {
+        set((s) => ({
+          panels: {
+            ...s.panels,
+            [pid]: {
+              ...currentPanel,
+              activeTabId: existingInPanel.id,
+              tabHistory: pushHistory(currentPanel.tabHistory, existingInPanel.id),
+            },
+          },
+        }));
+        persist();
+        return existingInPanel.id;
+      }
+
+      // Check if same base ID exists in OTHER panels (split case)
+      const existsElsewhere = Object.values(get().panels).some(
+        (p) => p.id !== pid && p.tabs.some((t) => t.id === baseId),
+      );
+      const id = existsElsewhere ? `${baseId}@${pid}` : baseId;
+
       const tab: Tab = { ...tabDef, id };
       set((s) => {
         const p = s.panels[pid]!;