@hienlh/ppm 0.2.17 → 0.2.19

package/src/web/hooks/use-chat.ts

@@ -43,6 +43,7 @@ export function useChat(sessionId: string | null, providerId = "claude-sdk", pro
   const isStreamingRef = useRef(false);
   const pendingMessageRef = useRef<string | null>(null);
   const sendRef = useRef<(data: string) => void>(() => {});
+  const refetchRef = useRef<(() => void) | null>(null);
 
   const handleMessage = useCallback((event: MessageEvent) => {
     let data: ChatWsServerMessage;
@@ -55,12 +56,32 @@ export function useChat(sessionId: string | null, providerId = "claude-sdk", pro
     // Ignore keepalive pings
     if ((data as any).type === "ping") return;
 
-    // Handle connected event (custom, not in type)
+    // Handle connected event (new session)
     if ((data as any).type === "connected") {
       setIsConnected(true);
       return;
     }
 
+    // Handle status event (FE reconnected to existing session)
+    if ((data as any).type === "status") {
+      setIsConnected(true);
+      const status = data as any;
+      if (status.isStreaming) {
+        isStreamingRef.current = true;
+        setIsStreaming(true);
+      }
+      if (status.pendingApproval) {
+        setPendingApproval({
+          requestId: status.pendingApproval.requestId,
+          tool: status.pendingApproval.tool,
+          input: status.pendingApproval.input,
+        });
+      }
+      // Refetch history to catch up on events missed during disconnect
+      refetchRef.current?.();
+      return;
+    }
+
     switch (data.type) {
       case "text": {
         streamingContentRef.current += data.content;
@@ -379,10 +400,12 @@ export function useChat(sessionId: string | null, providerId = "claude-sdk", pro
   const reconnect = useCallback(() => {
     setIsConnected(false);
     wsReconnect();
+    // Refetch history on manual reconnect to catch up on missed events
+    refetchRef.current?.();
   }, [wsReconnect]);
 
   const refetchMessages = useCallback(() => {
-    if (!sessionId || !projectName || isStreamingRef.current) return;
+    if (!sessionId || !projectName) return;
     setMessagesLoading(true);
     fetch(`${projectUrl(projectName)}/chat/sessions/${sessionId}/messages?providerId=${providerId}`, {
       headers: { Authorization: `Bearer ${getAuthToken()}` },
@@ -391,12 +414,18 @@ export function useChat(sessionId: string | null, providerId = "claude-sdk", pro
       .then((json: any) => {
         if (json.ok && Array.isArray(json.data) && json.data.length > 0) {
           setMessages(json.data);
+          // Reset streaming content refs so live tokens append cleanly after history
+          streamingContentRef.current = "";
+          streamingEventsRef.current = [];
         }
       })
       .catch(() => {})
       .finally(() => setMessagesLoading(false));
   }, [sessionId, providerId, projectName]);
 
+  // Keep refetchRef in sync so handleMessage (status event) can trigger refetch
+  refetchRef.current = refetchMessages;
+
   return {
     messages,
     messagesLoading,

package/src/web/hooks/use-global-keybindings.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState, useCallback } from "react";
 import { useTabStore } from "@/stores/tab-store";
+import { useSettingsStore } from "@/stores/settings-store";
 
 /**
  * Global keyboard shortcuts.
@@ -29,6 +30,13 @@ export function useGlobalKeybindings() {
       // Keydown shortcuts
       if (e.type !== "keydown") return;
 
+      // Cmd/Ctrl+B → Toggle sidebar
+      if (e.key === "b" && (e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey) {
+        e.preventDefault();
+        useSettingsStore.getState().toggleSidebar();
+        return;
+      }
+
       // Alt+] / Alt+[ → Cycle tabs
       if (e.altKey && !e.ctrlKey && !e.metaKey && (e.key === "]" || e.key === "[")) {
         e.preventDefault();

package/src/web/hooks/use-tab-drag.ts

@@ -0,0 +1,109 @@
+import { useRef, useState, useCallback, useSyncExternalStore } from "react";
+import { usePanelStore } from "@/stores/panel-store";
+
+export const TAB_DRAG_TYPE = "application/ppm-tab";
+
+export interface DragPayload {
+  tabId: string;
+  panelId: string;
+}
+
+// ---------------------------------------------------------------------------
+// Global drag state — lets overlays know a tab drag is in progress
+// ---------------------------------------------------------------------------
+let _dragging = false;
+const _listeners = new Set<() => void>();
+
+function setDragging(v: boolean) {
+  if (_dragging === v) return;
+  _dragging = v;
+  _listeners.forEach((fn) => fn());
+}
+
+export function useIsDraggingTab(): boolean {
+  return useSyncExternalStore(
+    (cb) => { _listeners.add(cb); return () => _listeners.delete(cb); },
+    () => _dragging,
+  );
+}
+
+/** Call from any drop handler to clear global drag state */
+export function clearDragging() {
+  setDragging(false);
+}
+
+// ---------------------------------------------------------------------------
+// Hook for tab bar DnD
+// ---------------------------------------------------------------------------
+export function useTabDrag(panelId: string) {
+  const [dropIndex, setDropIndex] = useState<number | null>(null);
+  const dragOverRef = useRef<string | null>(null);
+
+  const handleDragStart = useCallback(
+    (e: React.DragEvent, tabId: string) => {
+      const payload: DragPayload = { tabId, panelId };
+      e.dataTransfer.setData(TAB_DRAG_TYPE, JSON.stringify(payload));
+      e.dataTransfer.effectAllowed = "move";
+      // Delay so browser captures the drag image first
+      requestAnimationFrame(() => setDragging(true));
+    },
+    [panelId],
+  );
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent, tabId: string, tabIndex: number) => {
+      if (!e.dataTransfer.types.includes(TAB_DRAG_TYPE)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+
+      if (dragOverRef.current === tabId) return;
+      dragOverRef.current = tabId;
+
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      const midX = rect.left + rect.width / 2;
+      setDropIndex(e.clientX < midX ? tabIndex : tabIndex + 1);
+    },
+    [],
+  );
+
+  const handleDragOverBar = useCallback(
+    (e: React.DragEvent) => {
+      if (!e.dataTransfer.types.includes(TAB_DRAG_TYPE)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+    },
+    [],
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      setDragging(false);
+      const raw = e.dataTransfer.getData(TAB_DRAG_TYPE);
+      if (!raw) return;
+
+      try {
+        const payload = JSON.parse(raw) as DragPayload;
+        const store = usePanelStore.getState();
+
+        if (payload.panelId === panelId) {
+          if (dropIndex !== null) store.reorderTab(payload.tabId, panelId, dropIndex);
+        } else {
+          store.moveTab(payload.tabId, payload.panelId, panelId, dropIndex ?? undefined);
+        }
+      } catch { /* ignore */ }
+
+      setDropIndex(null);
+      dragOverRef.current = null;
+    },
+    [panelId, dropIndex],
+  );
+
+  const handleDragEnd = useCallback(() => {
+    setDragging(false);
+    setDropIndex(null);
+    dragOverRef.current = null;
+  }, []);
+
+  return { dropIndex, handleDragStart, handleDragOver, handleDragOverBar, handleDrop, handleDragEnd };
+}

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

@@ -0,0 +1,383 @@
+import { create } from "zustand";
+import { randomId } from "@/lib/utils";
+import type { Tab, TabType } from "./tab-store";
+import {
+  type Panel,
+  type PanelLayout,
+  createPanel,
+  gridAddColumn,
+  gridAddRow,
+  gridRemovePanel,
+  findPanelPosition,
+  maxColumns,
+  MAX_ROWS,
+  savePanelLayout,
+  loadPanelLayout,
+} from "./panel-utils";
+
+/** Tab types that can only have 1 instance per project */
+const SINGLETON_TYPES = new Set<TabType>(["git-status", "git-graph", "settings", "projects"]);
+
+function generateTabId(): string {
+  return `tab-${randomId()}`;
+}
+
+function pushHistory(history: string[], id: string): string[] {
+  const filtered = history.filter((h) => h !== id);
+  filtered.push(id);
+  if (filtered.length > 50) filtered.shift();
+  return filtered;
+}
+
+// ---------------------------------------------------------------------------
+// Store interface
+// ---------------------------------------------------------------------------
+export interface PanelStore {
+  panels: Record<string, Panel>;
+  grid: string[][];
+  focusedPanelId: string;
+  currentProject: string | null;
+
+  // Project lifecycle
+  switchProject: (projectName: string) => void;
+
+  // Panel focus
+  setFocusedPanel: (panelId: string) => void;
+
+  // Tab operations (operate on focused panel by default)
+  openTab: (tab: Omit<Tab, "id">, panelId?: string) => string;
+  closeTab: (tabId: string, panelId?: string) => void;
+  setActiveTab: (tabId: string, panelId?: string) => void;
+  updateTab: (tabId: string, updates: Partial<Omit<Tab, "id">>) => void;
+
+  // Panel operations
+  reorderTab: (tabId: string, panelId: string, newIndex: number) => void;
+  moveTab: (tabId: string, fromPanelId: string, toPanelId: string, insertIndex?: number) => void;
+  splitPanel: (direction: "left" | "right" | "up" | "down", tabId: string, sourcePanelId: string, targetPanelId?: string) => boolean;
+  closePanel: (panelId: string) => void;
+
+  // Helpers
+  getPanelForTab: (tabId: string) => Panel | undefined;
+  isMobile: () => boolean;
+}
+
+function defaultLayout(): { panels: Record<string, Panel>; grid: string[][]; focusedPanelId: string } {
+  const panel = createPanel();
+  return { panels: { [panel.id]: panel }, grid: [[panel.id]], focusedPanelId: panel.id };
+}
+
+// ---------------------------------------------------------------------------
+// Store
+// ---------------------------------------------------------------------------
+export const usePanelStore = create<PanelStore>()((set, get) => {
+  function persist() {
+    const { currentProject, panels, grid, focusedPanelId } = get();
+    if (currentProject) savePanelLayout(currentProject, { panels, grid, focusedPanelId });
+  }
+
+  function findPanel(tabId: string): Panel | undefined {
+    return Object.values(get().panels).find((p) => p.tabs.some((t) => t.id === tabId));
+  }
+
+  function resolvePanel(panelId?: string): string {
+    return panelId ?? get().focusedPanelId;
+  }
+
+  return {
+    ...defaultLayout(),
+    currentProject: null,
+
+    switchProject: (projectName) => {
+      const { currentProject } = get();
+      if (currentProject) persist();
+
+      const loaded = loadPanelLayout(projectName);
+      if (loaded && Object.keys(loaded.panels).length > 0) {
+        set({ currentProject: projectName, ...loaded });
+      } else {
+        const p = createPanel();
+        const defaultTab: Tab = {
+          id: generateTabId(), type: "projects", title: "Projects", projectId: null, closable: true,
+        };
+        p.tabs = [defaultTab];
+        p.activeTabId = defaultTab.id;
+        p.tabHistory = [defaultTab.id];
+        const layout = { panels: { [p.id]: p }, grid: [[p.id]], focusedPanelId: p.id };
+        savePanelLayout(projectName, layout);
+        set({ currentProject: projectName, ...layout });
+      }
+    },
+
+    setFocusedPanel: (panelId) => {
+      if (get().panels[panelId]) set({ focusedPanelId: panelId });
+    },
+
+    openTab: (tabDef, panelId?) => {
+      const pid = resolvePanel(panelId);
+      const panel = get().panels[pid];
+      if (!panel) return "";
+
+      // Singleton check 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);
+          if (existing) {
+            set((s) => ({
+              focusedPanelId: p.id,
+              panels: {
+                ...s.panels,
+                [p.id]: {
+                  ...p,
+                  activeTabId: existing.id,
+                  tabHistory: pushHistory(p.tabHistory, existing.id),
+                },
+              },
+            }));
+            persist();
+            return existing.id;
+          }
+        }
+      }
+
+      const id = generateTabId();
+      const tab: Tab = { ...tabDef, id };
+      set((s) => {
+        const p = s.panels[pid]!;
+        return {
+          focusedPanelId: pid,
+          panels: {
+            ...s.panels,
+            [pid]: {
+              ...p,
+              tabs: [...p.tabs, tab],
+              activeTabId: id,
+              tabHistory: pushHistory(p.tabHistory, id),
+            },
+          },
+        };
+      });
+      persist();
+      return id;
+    },
+
+    closeTab: (tabId, panelId?) => {
+      const panel = panelId ? get().panels[panelId] : findPanel(tabId);
+      if (!panel) return;
+      const pid = panel.id;
+
+      set((s) => {
+        const p = s.panels[pid]!;
+        const newTabs = p.tabs.filter((t) => t.id !== tabId);
+        const newHistory = p.tabHistory.filter((h) => h !== tabId);
+        let newActive = p.activeTabId;
+        if (p.activeTabId === tabId) {
+          const prevId = newHistory.length > 0 ? newHistory[newHistory.length - 1] : null;
+          newActive = prevId && newTabs.some((t) => t.id === prevId)
+            ? prevId
+            : newTabs[newTabs.length - 1]?.id ?? null;
+        }
+
+        // Auto-close panel if empty and not the last one
+        const panelIds = Object.keys(s.panels);
+        if (newTabs.length === 0 && panelIds.length > 1) {
+          const { [pid]: _, ...rest } = s.panels;
+          const newGrid = gridRemovePanel(s.grid, pid);
+          const newFocused = s.focusedPanelId === pid ? Object.keys(rest)[0]! : s.focusedPanelId;
+          return { panels: rest, grid: newGrid, focusedPanelId: newFocused };
+        }
+
+        return {
+          panels: { ...s.panels, [pid]: { ...p, tabs: newTabs, activeTabId: newActive, tabHistory: newHistory } },
+        };
+      });
+      persist();
+    },
+
+    setActiveTab: (tabId, panelId?) => {
+      const panel = panelId ? get().panels[panelId] : findPanel(tabId);
+      if (!panel) return;
+      const pid = panel.id;
+      set((s) => {
+        const p = s.panels[pid]!;
+        return {
+          focusedPanelId: pid,
+          panels: { ...s.panels, [pid]: { ...p, activeTabId: tabId, tabHistory: pushHistory(p.tabHistory, tabId) } },
+        };
+      });
+      persist();
+    },
+
+    updateTab: (tabId, updates) => {
+      const panel = findPanel(tabId);
+      if (!panel) return;
+      set((s) => ({
+        panels: {
+          ...s.panels,
+          [panel.id]: { ...panel, tabs: panel.tabs.map((t) => (t.id === tabId ? { ...t, ...updates } : t)) },
+        },
+      }));
+      persist();
+    },
+
+    reorderTab: (tabId, panelId, newIndex) => {
+      const panel = get().panels[panelId];
+      if (!panel) return;
+      const oldIndex = panel.tabs.findIndex((t) => t.id === tabId);
+      if (oldIndex === -1 || oldIndex === newIndex) return;
+      const newTabs = [...panel.tabs];
+      const [moved] = newTabs.splice(oldIndex, 1);
+      newTabs.splice(newIndex, 0, moved!);
+      set((s) => ({ panels: { ...s.panels, [panelId]: { ...panel, tabs: newTabs } } }));
+      persist();
+    },
+
+    moveTab: (tabId, fromPanelId, toPanelId, insertIndex?) => {
+      if (fromPanelId === toPanelId) return;
+      const from = get().panels[fromPanelId];
+      const to = get().panels[toPanelId];
+      if (!from || !to) return;
+
+      const tab = from.tabs.find((t) => t.id === tabId);
+      if (!tab) return;
+
+      const fromTabs = from.tabs.filter((t) => t.id !== tabId);
+      const fromHistory = from.tabHistory.filter((h) => h !== tabId);
+      const fromActive = from.activeTabId === tabId
+        ? (fromHistory[fromHistory.length - 1] ?? fromTabs[fromTabs.length - 1]?.id ?? null)
+        : from.activeTabId;
+
+      const toTabs = [...to.tabs];
+      if (insertIndex !== undefined) toTabs.splice(insertIndex, 0, tab);
+      else toTabs.push(tab);
+
+      set((s) => {
+        const panelIds = Object.keys(s.panels);
+        // Auto-close empty source panel if not last
+        if (fromTabs.length === 0 && panelIds.length > 1) {
+          const { [fromPanelId]: _, ...rest } = s.panels;
+          return {
+            panels: {
+              ...rest,
+              [toPanelId]: { ...to, tabs: toTabs, activeTabId: tabId, tabHistory: pushHistory(to.tabHistory, tabId) },
+            },
+            grid: gridRemovePanel(s.grid, fromPanelId),
+            focusedPanelId: toPanelId,
+          };
+        }
+
+        return {
+          focusedPanelId: toPanelId,
+          panels: {
+            ...s.panels,
+            [fromPanelId]: { ...from, tabs: fromTabs, activeTabId: fromActive, tabHistory: fromHistory },
+            [toPanelId]: { ...to, tabs: toTabs, activeTabId: tabId, tabHistory: pushHistory(to.tabHistory, tabId) },
+          },
+        };
+      });
+      persist();
+    },
+
+    splitPanel: (direction, tabId, sourcePanelId, targetPanelId?) => {
+      const { grid, panels } = get();
+      const mobile = get().isMobile();
+      const source = panels[sourcePanelId];
+      if (!source) return false;
+
+      const tab = source.tabs.find((t) => t.id === tabId);
+      if (!tab) return false;
+
+      // Use target panel's position for grid insertion (where the drop happened)
+      const positionPanelId = targetPanelId ?? sourcePanelId;
+      const pos = findPanelPosition(grid, positionPanelId);
+      if (!pos) return false;
+
+      // Check constraints
+      const isHorizontal = direction === "left" || direction === "right";
+      const isVertical = direction === "up" || direction === "down";
+      if (isHorizontal && grid.length >= maxColumns(mobile)) return false;
+      if (isVertical && (grid[pos.col]?.length ?? 0) >= MAX_ROWS) return false;
+
+      const newPanel = createPanel([tab], tab.id);
+      newPanel.tabHistory = [tab.id];
+
+      // Remove tab from source
+      const srcTabs = source.tabs.filter((t) => t.id !== tabId);
+      const srcHistory = source.tabHistory.filter((h) => h !== tabId);
+      const srcActive = source.activeTabId === tabId
+        ? (srcHistory[srcHistory.length - 1] ?? srcTabs[srcTabs.length - 1]?.id ?? null)
+        : source.activeTabId;
+
+      let newGrid: string[][];
+      if (isHorizontal) {
+        newGrid = [...grid];
+        const insertCol = direction === "right" ? pos.col + 1 : pos.col;
+        newGrid.splice(insertCol, 0, [newPanel.id]);
+      } else {
+        // up: insert before current row, down: insert after
+        newGrid = grid.map((col, c) => {
+          if (c !== pos.col) return col;
+          const newCol = [...col];
+          const insertRow = direction === "down" ? pos.row + 1 : pos.row;
+          newCol.splice(insertRow, 0, newPanel.id);
+          return newCol;
+        });
+      }
+
+      set((s) => {
+        const panelIds = Object.keys(s.panels);
+        let updatedPanels = {
+          ...s.panels,
+          [newPanel.id]: newPanel,
+        };
+
+        // If source is now empty and not last panel, remove it
+        if (srcTabs.length === 0 && panelIds.length > 1) {
+          const { [sourcePanelId]: _, ...rest } = updatedPanels;
+          updatedPanels = rest;
+          newGrid = gridRemovePanel(newGrid, sourcePanelId);
+        } else {
+          updatedPanels[sourcePanelId] = { ...source, tabs: srcTabs, activeTabId: srcActive, tabHistory: srcHistory };
+        }
+
+        return { panels: updatedPanels, grid: newGrid, focusedPanelId: newPanel.id };
+      });
+      persist();
+      return true;
+    },
+
+    closePanel: (panelId) => {
+      const { panels, grid } = get();
+      if (Object.keys(panels).length <= 1) return;
+
+      const panel = panels[panelId];
+      if (!panel) return;
+
+      // Find neighbor to merge tabs into
+      const pos = findPanelPosition(grid, panelId);
+      const allIds = grid.flat();
+      const idx = allIds.indexOf(panelId);
+      const neighborId = idx > 0 ? allIds[idx - 1]! : allIds[1]!;
+      const neighbor = panels[neighborId];
+      if (!neighbor) return;
+
+      set((s) => {
+        const { [panelId]: _, ...rest } = s.panels;
+        const mergedTabs = [...neighbor.tabs, ...panel.tabs];
+        const mergedActive = neighbor.activeTabId ?? panel.activeTabId;
+        return {
+          panels: {
+            ...rest,
+            [neighborId]: { ...neighbor, tabs: mergedTabs, activeTabId: mergedActive, tabHistory: [...neighbor.tabHistory, ...panel.tabHistory] },
+          },
+          grid: gridRemovePanel(s.grid, panelId),
+          focusedPanelId: neighborId,
+        };
+      });
+      persist();
+    },
+
+    getPanelForTab: (tabId) => findPanel(tabId),
+
+    isMobile: () => typeof window !== "undefined" && window.innerWidth < 768,
+  };
+});

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

@@ -0,0 +1,116 @@
+import { randomId } from "@/lib/utils";
+import type { Tab } from "./tab-store";
+
+// ---------------------------------------------------------------------------
+// Panel types
+// ---------------------------------------------------------------------------
+export interface Panel {
+  id: string;
+  tabs: Tab[];
+  activeTabId: string | null;
+  tabHistory: string[];
+}
+
+export interface PanelLayout {
+  panels: Record<string, Panel>;
+  /** grid[col][row] = panelId */
+  grid: string[][];
+  focusedPanelId: string;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+export function generatePanelId(): string {
+  return `panel-${randomId()}`;
+}
+
+export function createPanel(tabs: Tab[] = [], activeTabId: string | null = null): Panel {
+  return {
+    id: generatePanelId(),
+    tabs,
+    activeTabId,
+    tabHistory: activeTabId ? [activeTabId] : [],
+  };
+}
+
+/** Max columns: 3 desktop, 1 mobile */
+export function maxColumns(isMobile: boolean): number {
+  return isMobile ? 1 : 3;
+}
+
+/** Max rows per column */
+export const MAX_ROWS = 2;
+
+// ---------------------------------------------------------------------------
+// Grid manipulation
+// ---------------------------------------------------------------------------
+export function gridAddColumn(grid: string[][], panelId: string): string[][] {
+  return [...grid, [panelId]];
+}
+
+export function gridAddRow(grid: string[][], colIndex: number, panelId: string): string[][] {
+  return grid.map((col, i) => (i === colIndex ? [...col, panelId] : col));
+}
+
+export function gridRemovePanel(grid: string[][], panelId: string): string[][] {
+  return grid
+    .map((col) => col.filter((id) => id !== panelId))
+    .filter((col) => col.length > 0);
+}
+
+export function findPanelPosition(grid: string[][], panelId: string): { col: number; row: number } | null {
+  for (let c = 0; c < grid.length; c++) {
+    const r = grid[c]!.indexOf(panelId);
+    if (r !== -1) return { col: c, row: r };
+  }
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Persistence
+// ---------------------------------------------------------------------------
+const STORAGE_PREFIX = "ppm-panels-";
+const OLD_STORAGE_PREFIX = "ppm-tabs-";
+
+function storageKey(projectName: string): string {
+  return `${STORAGE_PREFIX}${projectName}`;
+}
+
+export function savePanelLayout(projectName: string, layout: PanelLayout): void {
+  try {
+    localStorage.setItem(storageKey(projectName), JSON.stringify(layout));
+  } catch { /* ignore */ }
+}
+
+export function loadPanelLayout(projectName: string): PanelLayout | null {
+  try {
+    const raw = localStorage.getItem(storageKey(projectName));
+    if (raw) return JSON.parse(raw) as PanelLayout;
+  } catch { /* ignore */ }
+
+  // Migrate from old tab-store format
+  return migrateOldTabStore(projectName);
+}
+
+function migrateOldTabStore(projectName: string): PanelLayout | null {
+  try {
+    const raw = localStorage.getItem(`${OLD_STORAGE_PREFIX}${projectName}`);
+    if (!raw) return null;
+    const old = JSON.parse(raw) as { tabs: Tab[]; activeTabId: string | null };
+    if (!old.tabs?.length) return null;
+
+    const panel = createPanel(old.tabs, old.activeTabId);
+    const layout: PanelLayout = {
+      panels: { [panel.id]: panel },
+      grid: [[panel.id]],
+      focusedPanelId: panel.id,
+    };
+    // Save new format and clean old
+    savePanelLayout(projectName, layout);
+    localStorage.removeItem(`${OLD_STORAGE_PREFIX}${projectName}`);
+    return layout;
+  } catch {
+    return null;
+  }
+}