@hienlh/ppm 0.1.4 → 0.2.0

package/src/web/components/git/git-graph.tsx

@@ -82,6 +82,9 @@ export function GitGraph({ metadata }: GitGraphProps) {
 
   useEffect(() => {
     fetchGraph();
+    // Auto-reload every 10 seconds
+    const interval = setInterval(fetchGraph, 10000);
+    return () => clearInterval(interval);
   }, [fetchGraph]);
 
   const gitAction = async (

package/src/web/components/git/git-status-panel.tsx

@@ -11,6 +11,7 @@ import {
   FolderTree,
   ChevronRight,
   ChevronDown,
+  FileText,
 } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
@@ -133,6 +134,9 @@ export function GitStatusPanel({ metadata, tabId }: GitStatusPanelProps) {
 
   useEffect(() => {
     fetchStatus();
+    // Auto-reload every 5 seconds
+    const interval = setInterval(fetchStatus, 5000);
+    return () => clearInterval(interval);
   }, [fetchStatus]);
 
   const stageFiles = async (files: string[]) => {
@@ -235,6 +239,19 @@ export function GitStatusPanel({ metadata, tabId }: GitStatusPanelProps) {
     });
   };
 
+  const openFile = (file: GitFileChange) => {
+    openTab({
+      type: "editor",
+      title: file.path.split("/").pop() ?? file.path,
+      closable: true,
+      metadata: {
+        projectName,
+        filePath: file.path,
+      },
+      projectId: projectName ?? null,
+    });
+  };
+
   const allUnstaged = useMemo(
     () => [
       ...(status?.unstaged ?? []),
@@ -333,6 +350,7 @@ export function GitStatusPanel({ metadata, tabId }: GitStatusPanelProps) {
             actionAllLabel="Unstage All"
             onFolderAction={(files) => unstageFiles(files.map((f) => f.path))}
             onClickFile={openDiff}
+            onOpenFile={openFile}
             disabled={acting}
           />
 
@@ -353,6 +371,7 @@ export function GitStatusPanel({ metadata, tabId }: GitStatusPanelProps) {
             actionAllLabel="Stage All"
             onFolderAction={(files) => stageFiles(files.map((f) => f.path))}
             onClickFile={openDiff}
+            onOpenFile={openFile}
             disabled={acting}
             showRevert
             onRevert={(f) =>
@@ -371,7 +390,7 @@ export function GitStatusPanel({ metadata, tabId }: GitStatusPanelProps) {
       {/* Commit section */}
       <div className="border-t p-2 space-y-2 shrink-0">
         <textarea
-          className="w-full h-16 px-2 py-1.5 text-sm bg-muted/50 border rounded resize-none focus:outline-none focus:ring-1 focus:ring-ring"
+          className="w-full h-16 px-3 py-2 text-base md:text-sm text-foreground bg-surface border border-border rounded-lg resize-none focus:outline-none focus:border-ring placeholder:text-muted-foreground"
           placeholder="Commit message..."
           value={commitMsg}
           onChange={(e) => setCommitMsg(e.target.value)}
@@ -470,6 +489,7 @@ function ActionButtons({
   showRevert,
   onRevert,
   onAction,
+  onOpenFile,
   actionIcon,
   actionTitle,
   disabled,
@@ -477,12 +497,27 @@ function ActionButtons({
   showRevert?: boolean;
   onRevert?: () => void;
   onAction: () => void;
+  onOpenFile?: () => void;
   actionIcon: React.ReactNode;
   actionTitle: string;
   disabled: boolean;
 }) {
   return (
     <div className="flex items-center gap-0.5 shrink-0 ml-1">
+      {onOpenFile && (
+        <button
+          type="button"
+          className="flex items-center justify-center size-7 rounded border border-border/60 bg-muted/60 text-muted-foreground hover:bg-primary/15 hover:text-primary hover:border-primary/40 active:scale-95 transition-colors"
+          onClick={(e) => {
+            e.stopPropagation();
+            onOpenFile();
+          }}
+          disabled={disabled}
+          title="Open file"
+        >
+          <FileText className="size-3.5" />
+        </button>
+      )}
       {showRevert && onRevert && (
         <button
           type="button"
@@ -529,6 +564,7 @@ function FileSection({
   actionAllLabel,
   onFolderAction,
   onClickFile,
+  onOpenFile,
   disabled,
   showRevert,
   onRevert,
@@ -545,6 +581,7 @@ function FileSection({
   actionAllLabel: string;
   onFolderAction?: (files: GitFileChange[]) => void;
   onClickFile: (f: GitFileChange) => void;
+  onOpenFile?: (f: GitFileChange) => void;
   disabled: boolean;
   showRevert?: boolean;
   onRevert?: (f: GitFileChange) => void;
@@ -580,6 +617,7 @@ function FileSection({
               actionTitle={actionTitle}
               onAction={onAction}
               onClickFile={onClickFile}
+              onOpenFile={onOpenFile}
               disabled={disabled}
               showRevert={showRevert}
               onRevert={onRevert}
@@ -594,6 +632,7 @@ function FileSection({
           onAction={onAction}
           onFolderAction={onFolderAction}
           onClickFile={onClickFile}
+          onOpenFile={onOpenFile}
           disabled={disabled}
           showRevert={showRevert}
           onRevert={onRevert}
@@ -614,6 +653,7 @@ function FileRow({
   actionTitle,
   onAction,
   onClickFile,
+  onOpenFile,
   disabled,
   showRevert,
   onRevert,
@@ -624,6 +664,7 @@ function FileRow({
   actionTitle: string;
   onAction: (f: GitFileChange) => void;
   onClickFile: (f: GitFileChange) => void;
+  onOpenFile?: (f: GitFileChange) => void;
   disabled: boolean;
   showRevert?: boolean;
   onRevert?: (f: GitFileChange) => void;
@@ -647,6 +688,7 @@ function FileRow({
       <ActionButtons
         showRevert={showRevert}
         onRevert={onRevert ? () => onRevert(file) : undefined}
+        onOpenFile={onOpenFile ? () => onOpenFile(file) : undefined}
         onAction={() => onAction(file)}
         actionIcon={actionIcon}
         actionTitle={actionTitle}
@@ -667,6 +709,7 @@ function TreeView({
   onAction,
   onFolderAction,
   onClickFile,
+  onOpenFile,
   disabled,
   showRevert,
   onRevert,
@@ -678,6 +721,7 @@ function TreeView({
   onAction: (f: GitFileChange) => void;
   onFolderAction?: (files: GitFileChange[]) => void;
   onClickFile: (f: GitFileChange) => void;
+  onOpenFile?: (f: GitFileChange) => void;
   disabled: boolean;
   showRevert?: boolean;
   onRevert?: (f: GitFileChange) => void;
@@ -698,6 +742,7 @@ function TreeView({
           onAction={onAction}
           onFolderAction={onFolderAction}
           onClickFile={onClickFile}
+          onOpenFile={onOpenFile}
           disabled={disabled}
           showRevert={showRevert}
           onRevert={onRevert}
@@ -721,6 +766,7 @@ function TreeNodeView({
   onAction,
   onFolderAction,
   onClickFile,
+  onOpenFile,
   disabled,
   showRevert,
   onRevert,
@@ -734,6 +780,7 @@ function TreeNodeView({
   onAction: (f: GitFileChange) => void;
   onFolderAction?: (files: GitFileChange[]) => void;
   onClickFile: (f: GitFileChange) => void;
+  onOpenFile?: (f: GitFileChange) => void;
   disabled: boolean;
   showRevert?: boolean;
   onRevert?: (f: GitFileChange) => void;
@@ -762,6 +809,7 @@ function TreeNodeView({
           actionTitle={actionTitle}
           onAction={onAction}
           onClickFile={onClickFile}
+          onOpenFile={onOpenFile}
           disabled={disabled}
           showRevert={showRevert}
           onRevert={onRevert}
@@ -834,6 +882,7 @@ function TreeNodeView({
                 onAction={onAction}
                 onFolderAction={onFolderAction}
                 onClickFile={onClickFile}
+                onOpenFile={onOpenFile}
                 disabled={disabled}
                 showRevert={showRevert}
                 onRevert={onRevert}

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

@@ -0,0 +1,215 @@
+import { useState, useEffect, useRef, useMemo } from "react";
+import {
+  Terminal,
+  MessageSquare,
+  GitBranch,
+  GitCommitHorizontal,
+  Settings,
+  Search,
+  FileCode,
+} from "lucide-react";
+import { useTabStore, type TabType } from "@/stores/tab-store";
+import { useProjectStore } from "@/stores/project-store";
+import { useFileStore, type FileNode } from "@/stores/file-store";
+
+interface CommandItem {
+  id: string;
+  label: string;
+  hint?: string;
+  icon: React.ElementType;
+  action: () => void;
+  keywords?: string;
+  group: "action" | "file";
+}
+
+/** Recursively flatten file tree into file-only list */
+function flattenFiles(nodes: FileNode[], prefix = ""): { name: string; path: string }[] {
+  const result: { name: string; path: string }[] = [];
+  for (const node of nodes) {
+    if (node.type === "file") {
+      result.push({ name: node.name, path: node.path });
+    }
+    if (node.children) {
+      result.push(...flattenFiles(node.children, node.path));
+    }
+  }
+  return result;
+}
+
+export function CommandPalette({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const [query, setQuery] = useState("");
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const openTab = useTabStore((s) => s.openTab);
+  const activeProject = useProjectStore((s) => s.activeProject);
+  const fileTree = useFileStore((s) => s.tree);
+
+  // Action commands
+  const actionCommands = useMemo<CommandItem[]>(() => {
+    const projectId = activeProject?.name ?? null;
+    const meta = activeProject ? { projectName: activeProject.name } : undefined;
+
+    const openNewTab = (type: TabType, title: string) => () => {
+      openTab({ type, title, projectId, metadata: meta, closable: true });
+      onClose();
+    };
+
+    return [
+      { id: "terminal", label: "New Terminal", icon: Terminal, action: openNewTab("terminal", "Terminal"), keywords: "bash shell console", group: "action" },
+      { id: "chat", label: "New AI Chat", icon: MessageSquare, action: openNewTab("chat", "AI Chat"), keywords: "ai assistant claude", group: "action" },
+      { id: "git-graph", label: "Git Graph", icon: GitBranch, action: openNewTab("git-graph", "Git Graph"), keywords: "branch history log", group: "action" },
+      { id: "git-status", label: "Git Status", icon: GitCommitHorizontal, action: openNewTab("git-status", "Git Status"), keywords: "changes diff staged", group: "action" },
+      { id: "settings", label: "Settings", icon: Settings, action: openNewTab("settings", "Settings"), keywords: "config preferences", group: "action" },
+    ];
+  }, [activeProject, openTab, onClose]);
+
+  // File commands — derived from file store tree
+  const fileCommands = useMemo<CommandItem[]>(() => {
+    const projectId = activeProject?.name ?? null;
+    const meta = activeProject ? { projectName: activeProject.name } : undefined;
+    const files = flattenFiles(fileTree);
+
+    return files.map((f) => ({
+      id: `file:${f.path}`,
+      label: f.name,
+      hint: f.path,
+      icon: FileCode,
+      group: "file" as const,
+      keywords: f.path,
+      action: () => {
+        openTab({
+          type: "editor",
+          title: f.name,
+          projectId,
+          metadata: { ...meta, filePath: f.path },
+          closable: true,
+        });
+        onClose();
+      },
+    }));
+  }, [fileTree, activeProject, openTab, onClose]);
+
+  const allCommands = useMemo(() => [...actionCommands, ...fileCommands], [actionCommands, fileCommands]);
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) return actionCommands; // show only actions when empty
+    const q = query.toLowerCase();
+    // Fuzzy-ish: every character of query must appear in order
+    const matchesFuzzy = (text: string) => {
+      let ti = 0;
+      for (let qi = 0; qi < q.length; qi++) {
+        ti = text.indexOf(q[qi]!, ti);
+        if (ti === -1) return false;
+        ti++;
+      }
+      return true;
+    };
+    return allCommands.filter(
+      (c) => matchesFuzzy(c.label.toLowerCase()) || (c.keywords && matchesFuzzy(c.keywords.toLowerCase())),
+    );
+  }, [allCommands, actionCommands, query]);
+
+  // Reset state when opening
+  useEffect(() => {
+    if (open) {
+      setQuery("");
+      setSelectedIdx(0);
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [open]);
+
+  // Clamp selected index when filter changes
+  useEffect(() => {
+    setSelectedIdx((prev) => Math.min(prev, Math.max(filtered.length - 1, 0)));
+  }, [filtered.length]);
+
+  // Scroll selected item into view
+  useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const el = list.children[selectedIdx] as HTMLElement | undefined;
+    el?.scrollIntoView({ block: "nearest" });
+  }, [selectedIdx]);
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setSelectedIdx((i) => (i + 1) % filtered.length);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setSelectedIdx((i) => (i - 1 + filtered.length) % filtered.length);
+        break;
+      case "Enter":
+        e.preventDefault();
+        filtered[selectedIdx]?.action();
+        break;
+      case "Escape":
+        e.preventDefault();
+        onClose();
+        break;
+    }
+  }
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center pt-[20vh]" onClick={onClose}>
+      <div className="fixed inset-0 bg-black/50" />
+      <div
+        className="relative z-10 w-full max-w-md rounded-lg border border-border bg-background shadow-2xl overflow-hidden"
+        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="Search actions & files..."
+            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 results</p>
+          ) : (
+            filtered.map((cmd, i) => {
+              const Icon = cmd.icon;
+              return (
+                <button
+                  key={cmd.id}
+                  onClick={cmd.action}
+                  className={`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"
+                  }`}
+                >
+                  <Icon className="size-4 shrink-0" />
+                  <span className="truncate">{cmd.label}</span>
+                  {cmd.hint && (
+                    <span className="ml-auto text-xs text-text-subtle truncate max-w-[200px]">
+                      {cmd.hint}
+                    </span>
+                  )}
+                </button>
+              );
+            })
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/web/components/layout/mobile-drawer.tsx

@@ -1,3 +1,4 @@
+import { useState, useMemo } from "react";
 import {
   FolderOpen,
   Terminal,
@@ -8,8 +9,12 @@ import {
   Settings,
   X,
   FileCode,
+  ChevronDown,
+  Check,
+  Plus,
+  Search,
 } from "lucide-react";
-import { useProjectStore } from "@/stores/project-store";
+import { useProjectStore, sortByRecent } from "@/stores/project-store";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { cn } from "@/lib/utils";
 import { Separator } from "@/components/ui/separator";
@@ -32,7 +37,6 @@ const TAB_ICONS: Record<TabType, React.ElementType> = {
 };
 
 const NEW_TAB_OPTIONS: { type: TabType; label: string }[] = [
-  { type: "projects", label: "Projects" },
   { type: "terminal", label: "Terminal" },
   { type: "chat", label: "AI Chat" },
   { type: "git-status", label: "Git Status" },
@@ -40,14 +44,26 @@ const NEW_TAB_OPTIONS: { type: TabType; label: string }[] = [
   { type: "settings", label: "Settings" },
 ];
 
-/**
- * Mobile drawer overlay — opens from bottom-left menu button.
- * Top: file tree of current project.
- * Bottom: new tab options.
- */
+/** Max projects shown before needing to search (mobile — larger items) */
+const MAX_VISIBLE_MOBILE = 5;
+
 export function MobileDrawer({ isOpen, onClose }: MobileDrawerProps) {
-  const activeProject = useProjectStore((s) => s.activeProject);
+  const { projects, activeProject, setActiveProject } = useProjectStore();
   const openTab = useTabStore((s) => s.openTab);
+  const [projectPickerOpen, setProjectPickerOpen] = useState(false);
+  const [query, setQuery] = useState("");
+
+  const sorted = useMemo(() => sortByRecent(projects), [projects]);
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) return sorted.slice(0, MAX_VISIBLE_MOBILE);
+    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_MOBILE || query.length > 0;
 
   function handleNewTab(type: TabType) {
     const needsProject =
@@ -56,17 +72,26 @@ export function MobileDrawer({ isOpen, onClose }: MobileDrawerProps) {
       ? { projectName: activeProject?.name }
       : undefined;
     const label = NEW_TAB_OPTIONS.find((o) => o.type === type)?.label ?? type;
-    openTab({ type, title: label, metadata, projectId: activeProject?.name ?? null, closable: type !== "projects" });
+    openTab({ type, title: label, metadata, projectId: activeProject?.name ?? null, closable: true });
     onClose();
   }
 
+  function handleSelectProject(project: typeof projects[number]) {
+    setActiveProject(project);
+    setProjectPickerOpen(false);
+    setQuery("");
+  }
+
+  function handleTogglePicker() {
+    setProjectPickerOpen((v) => !v);
+    setQuery("");
+  }
+
   return (
     <div
       className={cn(
         "fixed inset-0 z-50 md:hidden transition-opacity duration-200",
-        isOpen
-          ? "opacity-100"
-          : "opacity-0 pointer-events-none",
+        isOpen ? "opacity-100" : "opacity-0 pointer-events-none",
       )}
     >
       {/* Backdrop */}
@@ -84,14 +109,9 @@ export function MobileDrawer({ isOpen, onClose }: MobileDrawerProps) {
           isOpen ? "translate-x-0" : "-translate-x-full",
         )}
       >
-        {/* Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-border">
-          <div className="flex items-center gap-2">
-            <FolderOpen className="size-4 text-primary" />
-            <span className="text-sm font-semibold truncate">
-              {activeProject?.name ?? "PPM"}
-            </span>
-          </div>
+        {/* Header — logo + close */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
+          <span className="text-sm font-bold text-primary tracking-tight">PPM</span>
           <button
             onClick={onClose}
             className="flex items-center justify-center size-8 rounded-md hover:bg-surface-elevated transition-colors"
@@ -100,36 +120,117 @@ export function MobileDrawer({ isOpen, onClose }: MobileDrawerProps) {
           </button>
         </div>
 
-        {/* File tree — takes remaining space */}
+        {/* File tree — scrollable, takes remaining space */}
         <div className="flex-1 overflow-y-auto">
           {activeProject ? (
             <FileTree onFileOpen={onClose} />
           ) : (
-            <p className="px-4 py-3 text-xs text-text-secondary">
-              No project selected.
+            <p className="px-4 py-6 text-xs text-text-secondary text-center">
+              Select a project below
             </p>
           )}
         </div>
 
-        {/* New tab options — pinned at bottom */}
-        <Separator />
-        <div className="px-2 py-2 space-y-0.5">
-          <p className="px-2 pb-1 text-xs font-semibold text-text-secondary uppercase tracking-wider">
-            New Tab
-          </p>
-          {NEW_TAB_OPTIONS.map((opt) => {
-            const Icon = TAB_ICONS[opt.type];
-            return (
-              <button
-                key={opt.type}
-                onClick={() => handleNewTab(opt.type)}
-                className="w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-surface-elevated hover:text-foreground transition-colors min-h-[40px]"
-              >
-                <Icon className="size-4 shrink-0" />
-                <span>{opt.label}</span>
-              </button>
-            );
-          })}
+        {/* Bottom section — actions within thumb reach */}
+        <div className="shrink-0 border-t border-border">
+          {/* New tab actions */}
+          <div className="px-2 py-2 space-y-0.5">
+            {NEW_TAB_OPTIONS.map((opt) => {
+              const Icon = TAB_ICONS[opt.type];
+              return (
+                <button
+                  key={opt.type}
+                  onClick={() => handleNewTab(opt.type)}
+                  className="w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-surface-elevated hover:text-foreground transition-colors min-h-[40px]"
+                >
+                  <Icon className="size-4 shrink-0" />
+                  <span>{opt.label}</span>
+                </button>
+              );
+            })}
+          </div>
+
+          <Separator />
+
+          {/* Project switcher — at very bottom for easy thumb access */}
+          <div className="relative">
+            <button
+              onClick={handleTogglePicker}
+              className="w-full flex items-center gap-2 px-4 py-3 text-left hover:bg-surface-elevated transition-colors"
+            >
+              <FolderOpen className="size-4 text-primary shrink-0" />
+              <span className="text-sm font-medium truncate flex-1">
+                {activeProject?.name ?? "Select Project"}
+              </span>
+              <ChevronDown className={cn(
+                "size-3.5 text-text-subtle shrink-0 transition-transform",
+                projectPickerOpen && "rotate-180",
+              )} />
+            </button>
+
+            {/* Project list popover — opens upward */}
+            {projectPickerOpen && (
+              <div className="absolute bottom-full left-0 right-0 bg-background border border-border rounded-t-lg shadow-lg overflow-hidden">
+                {/* Search */}
+                {showSearch && (
+                  <div className="flex items-center gap-2 px-3 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-56 overflow-y-auto">
+                  {filtered.map((project) => (
+                    <button
+                      key={project.name}
+                      onClick={() => handleSelectProject(project)}
+                      className={cn(
+                        "w-full flex items-center gap-2.5 px-4 py-2 text-left transition-colors",
+                        activeProject?.name === project.name
+                          ? "bg-accent/10 text-text-primary"
+                          : "text-text-secondary hover:bg-surface-elevated",
+                      )}
+                    >
+                      <FolderOpen className="size-4 shrink-0" />
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium truncate">{project.name}</p>
+                        <p className="text-xs text-text-subtle truncate">{project.path}</p>
+                      </div>
+                      {activeProject?.name === project.name && (
+                        <Check className="size-4 text-primary shrink-0" />
+                      )}
+                    </button>
+                  ))}
+                  {filtered.length === 0 && (
+                    <p className="px-4 py-3 text-xs text-text-subtle text-center">
+                      {query ? "No matches" : "No projects"}
+                    </p>
+                  )}
+                </div>
+
+                {/* Add project */}
+                <button
+                  onClick={() => {
+                    setProjectPickerOpen(false);
+                    openTab({ type: "projects", title: "Projects", projectId: null, closable: true });
+                    onClose();
+                  }}
+                  className="w-full flex items-center gap-2 px-4 py-2.5 text-left text-sm text-text-secondary hover:bg-surface-elevated border-t border-border"
+                >
+                  <Plus className="size-4 shrink-0" />
+                  <span>Add Project...</span>
+                </button>
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </div>