@hienlh/ppm 0.2.20 → 0.2.21

package/src/web/components/layout/sidebar.tsx

@@ -1,48 +1,23 @@
-import { useState, useMemo, useCallback } from "react";
-import { FolderOpen, ChevronDown, Check, Plus, Search, Bug, PanelLeftClose, PanelLeftOpen } from "lucide-react";
-import { useProjectStore, sortByRecent } from "@/stores/project-store";
-import { useTabStore } from "@/stores/tab-store";
+import { PanelLeftClose, PanelLeftOpen, FolderOpen, GitBranch, MessageSquare } from "lucide-react";
+import { useProjectStore } from "@/stores/project-store";
+import { useSettingsStore, type SidebarActiveTab } from "@/stores/settings-store";
 import { FileTree } from "@/components/explorer/file-tree";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { useSettingsStore } from "@/stores/settings-store";
+import { GitStatusPanel } from "@/components/git/git-status-panel";
+import { ChatHistoryPanel } from "@/components/chat/chat-history-panel";
 import { cn } from "@/lib/utils";
-import { openBugReport } from "@/lib/report-bug";
 
-/** Max projects shown before needing to search (desktop) */
-const MAX_VISIBLE = 8;
+const TABS: { id: SidebarActiveTab; label: string; icon: React.ElementType }[] = [
+  { id: "explorer", label: "Explorer", icon: FolderOpen },
+  { id: "git", label: "Git", icon: GitBranch },
+  { id: "history", label: "History", icon: MessageSquare },
+];
 
 export function Sidebar() {
-  const { projects, activeProject, setActiveProject, loading } =
-    useProjectStore();
-  const openTab = useTabStore((s) => s.openTab);
-  const deviceName = useSettingsStore((s) => s.deviceName);
-  const version = useSettingsStore((s) => s.version);
+  const { activeProject } = useProjectStore();
   const sidebarCollapsed = useSettingsStore((s) => s.sidebarCollapsed);
   const toggleSidebar = useSettingsStore((s) => s.toggleSidebar);
-  const [query, setQuery] = useState("");
-
-  const sorted = useMemo(() => sortByRecent(projects), [projects]);
-
-  const filtered = useMemo(() => {
-    if (!query.trim()) return sorted.slice(0, MAX_VISIBLE);
-    const q = query.toLowerCase();
-    return sorted.filter(
-      (p) => p.name.toLowerCase().includes(q) || p.path.toLowerCase().includes(q),
-    );
-  }, [sorted, query]);
-
-  const showSearch = projects.length > MAX_VISIBLE || query.length > 0;
-
-  function handleAddProject() {
-    openTab({ type: "projects", title: "Projects", projectId: null, closable: true });
-  }
-
-  const handleReportBug = useCallback(() => openBugReport(version), [version]);
+  const sidebarActiveTab = useSettingsStore((s) => s.sidebarActiveTab);
+  const setSidebarActiveTab = useSettingsStore((s) => s.setSidebarActiveTab);
 
   if (sidebarCollapsed) {
     return (
@@ -60,116 +35,55 @@ export function Sidebar() {
 
   return (
     <aside className="hidden md:flex flex-col w-[280px] min-w-[280px] bg-background border-r border-border overflow-hidden">
-      {/* Logo + project dropdown — same height as tab bar */}
-      <div className="flex items-center gap-2 px-3 h-[41px] border-b border-border shrink-0">
-        <span className="text-sm font-bold text-primary tracking-tight shrink-0">PPM</span>
-        {deviceName && (
-          <span className="text-[10px] text-text-subtle bg-surface-elevated px-1.5 py-0.5 rounded-full truncate max-w-[100px]" title={deviceName}>
-            {deviceName}
-          </span>
-        )}
-
-        <DropdownMenu onOpenChange={() => setQuery("")}>
-          <DropdownMenuTrigger asChild>
-            <button className="flex items-center gap-1.5 px-2 py-1 rounded-md hover:bg-surface-elevated transition-colors min-w-0 flex-1">
-              <FolderOpen className="size-3.5 text-text-subtle shrink-0" />
-              <span className="text-sm truncate flex-1 text-left">
-                {activeProject?.name ?? "Select Project"}
-              </span>
-              <ChevronDown className="size-3 text-text-subtle shrink-0" />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start" className="w-[360px] p-0">
-            {/* Search — only when many projects */}
-            {showSearch && (
-              <div className="flex items-center gap-2 px-2.5 py-2 border-b border-border">
-                <Search className="size-3.5 text-text-subtle shrink-0" />
-                <input
-                  type="text"
-                  value={query}
-                  onChange={(e) => setQuery(e.target.value)}
-                  placeholder="Search projects..."
-                  className="flex-1 bg-transparent text-sm outline-none placeholder:text-text-subtle text-text-primary"
-                  autoFocus
-                />
-              </div>
-            )}
-
-            {/* Project list */}
-            <div className="max-h-64 overflow-y-auto py-1">
-              {loading && (
-                <p className="px-3 py-1.5 text-xs text-text-secondary">Loading...</p>
-              )}
-              {!loading && filtered.length === 0 && (
-                <p className="px-3 py-2 text-xs text-text-subtle text-center">
-                  {query ? "No matches" : "No projects"}
-                </p>
-              )}
-              {filtered.map((project) => (
-                <button
-                  key={project.name}
-                  onClick={() => setActiveProject(project)}
-                  className={cn(
-                    "w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors hover:bg-surface-elevated",
-                    activeProject?.name === project.name && "bg-accent/10",
-                  )}
-                >
-                  <FolderOpen className="size-3.5 shrink-0 text-text-subtle" />
-                  <span className="truncate font-semibold text-text-primary">{project.name}</span>
-                  <span className="truncate text-xs text-text-subtle ml-auto">{project.path}</span>
-                  {activeProject?.name === project.name && (
-                    <Check className="size-3.5 text-primary shrink-0" />
-                  )}
-                </button>
-              ))}
-            </div>
-
-            <DropdownMenuSeparator className="my-0" />
+      {/* Tab bar (replaces old header) */}
+      <div className="flex items-center h-[41px] border-b border-border shrink-0">
+        {TABS.map((tab) => {
+          const Icon = tab.icon;
+          const isActive = sidebarActiveTab === tab.id;
+          return (
             <button
-              onClick={handleAddProject}
-              className="w-full flex items-center gap-2 px-3 py-2 text-sm text-text-secondary hover:bg-surface-elevated transition-colors"
+              key={tab.id}
+              onClick={() => setSidebarActiveTab(tab.id)}
+              className={cn(
+                "flex-1 flex items-center justify-center gap-1.5 h-full text-xs transition-colors border-b-2 -mb-px",
+                isActive
+                  ? "border-primary text-primary font-medium"
+                  : "border-transparent text-text-secondary hover:text-foreground",
+              )}
             >
-              <Plus className="size-3.5 shrink-0" />
-              <span>Add Project...</span>
+              <Icon className="size-3.5" />
+              <span>{tab.label}</span>
             </button>
-          </DropdownMenuContent>
-        </DropdownMenu>
+          );
+        })}
+        <button
+          onClick={toggleSidebar}
+          title="Collapse sidebar (⌘B)"
+          className="flex items-center justify-center w-8 h-full text-text-subtle hover:text-text-secondary transition-colors shrink-0"
+        >
+          <PanelLeftClose className="size-3.5" />
+        </button>
       </div>
 
-      {/* File tree */}
-      {activeProject ? (
-        <div className="flex-1 overflow-y-auto">
-          <FileTree />
-        </div>
-      ) : (
-        <div className="flex-1 flex items-center justify-center p-4">
-          <p className="text-xs text-text-subtle text-center">
-            Select a project to browse files
-          </p>
-        </div>
-      )}
-
-      {/* Version footer + Report Bug + Collapse */}
-      <div className="flex items-center justify-between px-3 py-1.5 border-t border-border shrink-0">
-        {version && <span className="text-[10px] text-text-subtle">v{version}</span>}
-        <div className="flex items-center gap-2 ml-auto">
-          <button
-            onClick={handleReportBug}
-            title="Report a bug"
-            className="flex items-center gap-1 text-[10px] text-text-subtle hover:text-text-secondary transition-colors"
-          >
-            <Bug className="size-3" />
-            <span>Report Bug</span>
-          </button>
-          <button
-            onClick={toggleSidebar}
-            title="Collapse sidebar (⌘B)"
-            className="text-text-subtle hover:text-text-secondary transition-colors"
-          >
-            <PanelLeftClose className="size-3.5" />
-          </button>
-        </div>
+      {/* Tab content */}
+      <div className="flex-1 overflow-y-auto min-h-0">
+        {sidebarActiveTab === "explorer" && (
+          activeProject ? (
+            <FileTree />
+          ) : (
+            <div className="flex items-center justify-center h-24 p-4">
+              <p className="text-xs text-text-subtle text-center">Select a project to browse files</p>
+            </div>
+          )
+        )}
+        {sidebarActiveTab === "git" && (
+          <GitStatusPanel metadata={{ projectName: activeProject?.name }} />
+        )}
+        {sidebarActiveTab === "history" && (
+          <ChatHistoryPanel projectName={activeProject?.name} />
+        )}
       </div>
+
     </aside>
   );
 }

package/src/web/components/layout/tab-bar.tsx

@@ -2,11 +2,9 @@ import { useEffect, useRef } from "react";
 import {
   X,
   Plus,
-  FolderOpen,
   Terminal,
   MessageSquare,
   GitBranch,
-  GitCommitHorizontal,
   FileDiff,
   Settings,
   FileCode,
@@ -25,12 +23,10 @@ import { useTabDrag } from "@/hooks/use-tab-drag";
 import { DraggableTab } from "./draggable-tab";
 
 const TAB_ICONS: Record<TabType, React.ElementType> = {
-  projects: FolderOpen,
   terminal: Terminal,
   chat: MessageSquare,
   editor: FileCode,
   "git-graph": GitBranch,
-  "git-status": GitCommitHorizontal,
   "git-diff": FileDiff,
   settings: Settings,
 };
@@ -39,7 +35,6 @@ const NEW_TAB_OPTIONS: { type: TabType; label: string }[] = [
   { type: "terminal", label: "Terminal" },
   { type: "chat", label: "AI Chat" },
   { type: "git-graph", label: "Git Graph" },
-  { type: "git-status", label: "Git Status" },
   { type: "settings", label: "Settings" },
 ];
 
@@ -71,7 +66,7 @@ export function TabBar({ panelId }: TabBarProps) {
   }, [tabs.length, activeTabId]);
 
   function handleNewTab(type: TabType) {
-    const needsProject = type === "git-graph" || type === "git-status" || type === "git-diff" || type === "terminal" || type === "chat";
+    const needsProject = type === "git-graph" || type === "git-diff" || type === "terminal" || type === "chat";
     const metadata = needsProject ? { projectName: activeProject?.name } : undefined;
 
     usePanelStore.getState().openTab(

package/src/web/components/layout/tab-content.tsx

@@ -3,11 +3,6 @@ import { useTabStore, type TabType } from "@/stores/tab-store";
 import { Loader2 } from "lucide-react";
 
 const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentType<{ metadata?: Record<string, unknown>; tabId?: string }>>> = {
-  projects: lazy(() =>
-    import("@/components/projects/project-list").then((m) => ({
-      default: m.ProjectList,
-    })),
-  ),
   terminal: lazy(() =>
     import("@/components/terminal/terminal-tab").then((m) => ({
       default: m.TerminalTab,
@@ -28,11 +23,6 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
       default: m.GitGraph,
     })),
   ),
-  "git-status": lazy(() =>
-    import("@/components/git/git-status-panel").then((m) => ({
-      default: m.GitStatusPanel,
-    })),
-  ),
   "git-diff": lazy(() =>
     import("@/components/editor/diff-viewer").then((m) => ({
       default: m.DiffViewer,

package/src/web/components/ui/dialog.tsx

@@ -59,7 +59,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background text-foreground p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
           className
         )}
         {...props}

package/src/web/lib/project-avatar.ts

@@ -0,0 +1,45 @@
+/** Compute display initials for a project, resolving collisions. */
+export function getProjectInitials(name: string, allNames: string[]): string {
+  // Split by common separators, take first char of each word, uppercase
+  const words = name.split(/[-_.\s]+/).filter(Boolean);
+  const firstChar = (words[0]?.[0] ?? name[0] ?? "?").toUpperCase();
+  const twoChars = words.length > 1
+    ? (firstChar + (words[1]![0] ?? "").toUpperCase())
+    : firstChar;
+
+  // Check if 1-char is unique among all projects
+  const others = allNames.filter((n) => n !== name);
+  const othersFirstChars = others.map((n) => {
+    const w = n.split(/[-_.\s]+/).filter(Boolean);
+    return (w[0]?.[0] ?? n[0] ?? "").toUpperCase();
+  });
+
+  if (!othersFirstChars.includes(firstChar)) {
+    return firstChar;
+  }
+
+  // Try 2-char initials
+  const othersTwoChars = others.map((n) => {
+    const w = n.split(/[-_.\s]+/).filter(Boolean);
+    const f = (w[0]?.[0] ?? n[0] ?? "").toUpperCase();
+    const s = w.length > 1 ? (w[1]![0] ?? "").toUpperCase() : f;
+    return w.length > 1 ? f + s : f;
+  });
+
+  if (!othersTwoChars.includes(twoChars)) {
+    return twoChars;
+  }
+
+  // Fall back to 1-based index
+  const idx = allNames.indexOf(name);
+  return String(idx >= 0 ? idx + 1 : "?");
+}
+
+export interface ProjectAvatar {
+  initials: string;
+  color: string;
+}
+
+export function getProjectAvatar(name: string, allNames: string[], color: string): ProjectAvatar {
+  return { initials: getProjectInitials(name, allNames), color };
+}

package/src/web/lib/project-palette.ts

@@ -0,0 +1,18 @@
+export const PROJECT_PALETTE = [
+  'linear-gradient(135deg, #667eea, #764ba2)',
+  'linear-gradient(135deg, #f5576c, #f093fb)',
+  'linear-gradient(135deg, #4facfe, #00c6ff)',
+  'linear-gradient(135deg, #43e97b, #38f9d7)',
+  'linear-gradient(135deg, #fa709a, #fee140)',
+  'linear-gradient(135deg, #a18cd1, #6a3de8)',
+  'linear-gradient(135deg, #fd7043, #ff8a65)',
+  'linear-gradient(135deg, #26c6da, #0097a7)',
+  'linear-gradient(135deg, #ab47bc, #7b1fa2)',
+  'linear-gradient(135deg, #ef5350, #b71c1c)',
+  'linear-gradient(135deg, #1976d2, #42a5f5)',
+  'linear-gradient(135deg, #2e7d32, #66bb6a)',
+] as const;
+
+export function resolveProjectColor(color: string | undefined, index: number): string {
+  return color ?? PROJECT_PALETTE[index % PROJECT_PALETTE.length]!;
+}

package/src/web/lib/use-monaco-theme.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { useSettingsStore } from "@/stores/settings-store";
+
+/** Resolves the current app theme to a Monaco editor theme name. */
+export function useMonacoTheme(): string {
+  const theme = useSettingsStore((s) => s.theme);
+
+  const resolve = () => {
+    if (theme === "dark") return "vs-dark";
+    if (theme === "light") return "light";
+    // system
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "vs-dark" : "light";
+  };
+
+  const [monacoTheme, setMonacoTheme] = useState(resolve);
+
+  useEffect(() => {
+    setMonacoTheme(resolve());
+
+    if (theme === "system") {
+      const mq = window.matchMedia("(prefers-color-scheme: dark)");
+      const handler = () => setMonacoTheme(mq.matches ? "vs-dark" : "light");
+      mq.addEventListener("change", handler);
+      return () => mq.removeEventListener("change", handler);
+    }
+  }, [theme]);
+
+  return monacoTheme;
+}

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

@@ -16,7 +16,10 @@ import {
 } 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"]);
+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()}`;
@@ -38,6 +41,10 @@ export interface PanelStore {
   focusedPanelId: string;
   currentProject: string | null;
 
+  /** Keep-alive: per-project grid snapshots (for hidden workspaces) */
+  projectGrids: Record<string, string[][]>;
+  projectFocused: Record<string, string>;
+
   // Project lifecycle
   switchProject: (projectName: string) => void;
 
@@ -70,9 +77,16 @@ function defaultLayout(): { panels: Record<string, Panel>; grid: string[][]; foc
 // Store
 // ---------------------------------------------------------------------------
 export const usePanelStore = create<PanelStore>()((set, get) => {
+  /** Save only the active project's panels to localStorage */
   function persist() {
     const { currentProject, panels, grid, focusedPanelId } = get();
-    if (currentProject) savePanelLayout(currentProject, { panels, grid, focusedPanelId });
+    if (!currentProject) return;
+    const panelIds = new Set(grid.flat());
+    const projectPanels: Record<string, Panel> = {};
+    for (const [id, p] of Object.entries(panels)) {
+      if (panelIds.has(id)) projectPanels[id] = p;
+    }
+    savePanelLayout(currentProject, { panels: projectPanels, grid, focusedPanelId });
   }
 
   function findPanel(tabId: string): Panel | undefined {
@@ -86,25 +100,98 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
   return {
     ...defaultLayout(),
     currentProject: null,
+    projectGrids: {},
+    projectFocused: {},
 
     switchProject: (projectName) => {
-      const { currentProject } = get();
-      if (currentProject) persist();
+      const { currentProject, panels, grid, focusedPanelId, projectGrids, projectFocused } = get();
+
+      // No-op if same project
+      if (currentProject === projectName) return;
+
+      // Snapshot current project's state
+      const newProjectGrids = { ...projectGrids };
+      const newProjectFocused = { ...projectFocused };
+
+      if (currentProject) {
+        newProjectGrids[currentProject] = grid;
+        newProjectFocused[currentProject] = focusedPanelId;
+        // Persist to localStorage
+        const panelIds = new Set(grid.flat());
+        const currentPanels: Record<string, Panel> = {};
+        for (const [id, p] of Object.entries(panels)) {
+          if (panelIds.has(id)) currentPanels[id] = p;
+        }
+        savePanelLayout(currentProject, { panels: currentPanels, grid, focusedPanelId });
+      }
 
+      // Already in memory → restore from snapshot (no localStorage read)
+      if (newProjectGrids[projectName]) {
+        const restoredGrid = newProjectGrids[projectName]!;
+        const restoredFocused = newProjectFocused[projectName] ?? restoredGrid[0]?.[0] ?? "";
+        set({
+          currentProject: projectName,
+          grid: restoredGrid,
+          focusedPanelId: restoredFocused,
+          projectGrids: newProjectGrids,
+          projectFocused: newProjectFocused,
+        });
+        return;
+      }
+
+      // Load from localStorage
       const loaded = loadPanelLayout(projectName);
       if (loaded && Object.keys(loaded.panels).length > 0) {
-        set({ currentProject: projectName, ...loaded });
+        // Migrate: remove obsolete tab types
+        const migratedPanels: typeof loaded.panels = {};
+        for (const [pid, panel] of Object.entries(loaded.panels)) {
+          const filteredTabs = panel.tabs.filter((t) => !OBSOLETE_TAB_TYPES.has(t.type));
+          const filteredHistory = panel.tabHistory.filter(
+            (id) => filteredTabs.some((t) => t.id === id),
+          );
+          const activeTabId = panel.activeTabId && filteredTabs.some((t) => t.id === panel.activeTabId)
+            ? panel.activeTabId
+            : (filteredHistory[filteredHistory.length - 1] ?? filteredTabs[0]?.id ?? null);
+          migratedPanels[pid] = { ...panel, tabs: filteredTabs, tabHistory: filteredHistory, activeTabId };
+        }
+
+        // Merge into flat panels map (keep-alive: old panels stay)
+        const mergedPanels = { ...panels, ...migratedPanels };
+        newProjectGrids[projectName] = loaded.grid;
+        newProjectFocused[projectName] = loaded.focusedPanelId;
+        set({
+          currentProject: projectName,
+          panels: mergedPanels,
+          grid: loaded.grid,
+          focusedPanelId: loaded.focusedPanelId,
+          projectGrids: newProjectGrids,
+          projectFocused: newProjectFocused,
+        });
       } else {
+        // Create default layout for new project
         const p = createPanel();
         const defaultTab: Tab = {
-          id: generateTabId(), type: "projects", title: "Projects", projectId: null, closable: true,
+          id: generateTabId(), type: "chat", title: "AI Chat", projectId: projectName, closable: true,
+          metadata: { projectName },
         };
         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 });
+        const newGrid = [[p.id]];
+
+        // Merge into flat panels map
+        const mergedPanels = { ...panels, [p.id]: p };
+        newProjectGrids[projectName] = newGrid;
+        newProjectFocused[projectName] = p.id;
+        savePanelLayout(projectName, { panels: { [p.id]: p }, grid: newGrid, focusedPanelId: p.id });
+        set({
+          currentProject: projectName,
+          panels: mergedPanels,
+          grid: newGrid,
+          focusedPanelId: p.id,
+          projectGrids: newProjectGrids,
+          projectFocused: newProjectFocused,
+        });
       }
     },