@hienlh/ppm 0.8.64 → 0.8.65

package/src/services/account-selector.service.ts

@@ -57,8 +57,14 @@ class AccountSelectorService {
     // Clear expired cooldowns
     for (const acc of allAccounts) {
       if (acc.status === "cooldown" && acc.cooldownUntil && acc.cooldownUntil <= now) {
-        accountService.setEnabled(acc.id);
-        this.retryCounts.delete(acc.id);
+        try {
+          accountService.setEnabled(acc.id);
+          this.retryCounts.delete(acc.id);
+        } catch {
+          // Account expired or cannot be re-enabled — disable it
+          accountService.setDisabled(acc.id);
+          this.retryCounts.delete(acc.id);
+        }
       }
     }
 

package/src/services/claude-usage.service.ts

@@ -249,8 +249,13 @@ async function pollOnceInternal(): Promise<void> {
 /** Deduped: concurrent callers share a single in-flight fetch */
 async function pollOnce(): Promise<void> {
   if (inflightPoll) return inflightPoll;
-  inflightPoll = pollOnceInternal().finally(() => { inflightPoll = null; });
-  return inflightPoll;
+  const thisPoll = pollOnceInternal().finally(() => {
+    // Only clear if still the current poll — prevents a stale .finally() from
+    // clearing a newer poll after timeout handler force-nulled inflightPoll.
+    if (inflightPoll === thisPoll) inflightPoll = null;
+  });
+  inflightPoll = thisPoll;
+  return thisPoll;
 }
 
 // ---------------------------------------------------------------------------
@@ -313,14 +318,14 @@ export function startUsagePolling(): void {
   const POLL_TIMEOUT = 60_000; // max 60s per poll iteration
   const scheduleNext = () => {
     pollTimer = setTimeout(async () => {
-      try {
-        await Promise.race([
-          pollOnce(),
-          new Promise<void>(r => setTimeout(r, POLL_TIMEOUT)),
-        ]);
-      } catch {
-        // ignore — scheduleNext runs regardless
-      }
+      const timeout = new Promise<"timeout">(r => setTimeout(() => r("timeout"), POLL_TIMEOUT));
+      const result = await Promise.race([
+        pollOnce().then(() => "done" as const),
+        timeout,
+      ]).catch(() => "error" as const);
+      // If the poll timed out, force-clear inflightPoll so next scheduled poll
+      // starts a fresh fetch instead of reusing the stale hanging promise.
+      if (result === "timeout") inflightPoll = null;
       scheduleNext();
     }, POLL_INTERVAL);
   };
@@ -339,3 +344,12 @@ export async function refreshUsageNow(): Promise<ClaudeUsage & { activeAccountId
   await pollOnce();
   return getCachedUsage();
 }
+
+/** @internal Test-only: reset module-level state between tests */
+export function _resetForTesting(): void {
+  inMemoryCostUsd = 0;
+  if (pollTimer) { clearTimeout(pollTimer); pollTimer = null; }
+  tokenCooldowns.clear();
+  inflightPoll = null;
+  tokenCache = null;
+}

package/src/services/db.service.ts

@@ -4,7 +4,7 @@ import { homedir } from "node:os";
 import { mkdirSync, existsSync } from "node:fs";
 
 const PPM_DIR = process.env.PPM_HOME || resolve(homedir(), ".ppm");
-const CURRENT_SCHEMA_VERSION = 5;
+const CURRENT_SCHEMA_VERSION = 8;
 
 let db: Database | null = null;
 let dbProfile: string | null = null;
@@ -228,6 +228,18 @@ function runMigrations(database: Database): void {
     }
     database.exec(`PRAGMA user_version = 7`);
   }
+
+  if (current < 8) {
+    database.exec(`
+      CREATE TABLE IF NOT EXISTS session_titles (
+        session_id TEXT PRIMARY KEY,
+        title TEXT NOT NULL,
+        updated_at TEXT DEFAULT (datetime('now'))
+      );
+
+      PRAGMA user_version = 8;
+    `);
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -311,6 +323,33 @@ export function getAllSessionMappings(): Record<string, string> {
   return result;
 }
 
+// ---------------------------------------------------------------------------
+// Session title helpers (user-set titles persisted in PPM DB)
+// ---------------------------------------------------------------------------
+
+export function getSessionTitle(sessionId: string): string | null {
+  const row = getDb().query("SELECT title FROM session_titles WHERE session_id = ?").get(sessionId) as { title: string } | null;
+  return row?.title ?? null;
+}
+
+export function setSessionTitle(sessionId: string, title: string): void {
+  getDb().query(
+    "INSERT INTO session_titles (session_id, title, updated_at) VALUES (?, ?, datetime('now')) ON CONFLICT(session_id) DO UPDATE SET title = excluded.title, updated_at = excluded.updated_at",
+  ).run(sessionId, title);
+}
+
+/** Bulk-fetch DB titles for a list of session IDs. Returns map of id → title. */
+export function getSessionTitles(sessionIds: string[]): Record<string, string> {
+  if (sessionIds.length === 0) return {};
+  const placeholders = sessionIds.map(() => "?").join(", ");
+  const rows = getDb().query(
+    `SELECT session_id, title FROM session_titles WHERE session_id IN (${placeholders})`,
+  ).all(...sessionIds) as { session_id: string; title: string }[];
+  const result: Record<string, string> = {};
+  for (const r of rows) result[r.session_id] = r.title;
+  return result;
+}
+
 // ---------------------------------------------------------------------------
 // Push subscription helpers
 // ---------------------------------------------------------------------------
@@ -441,13 +480,13 @@ export function insertLimitSnapshot(data: Omit<LimitSnapshotRow, "id" | "recorde
 
 export function getLatestLimitSnapshot(): LimitSnapshotRow | null {
   return getDb().query(
-    "SELECT * FROM claude_limit_snapshots ORDER BY recorded_at DESC LIMIT 1",
+    "SELECT * FROM claude_limit_snapshots ORDER BY recorded_at DESC, id DESC LIMIT 1",
   ).get() as LimitSnapshotRow | null;
 }
 
 export function getLatestSnapshotForAccount(accountId: string): LimitSnapshotRow | null {
   return getDb().query(
-    "SELECT * FROM claude_limit_snapshots WHERE account_id = ? ORDER BY recorded_at DESC LIMIT 1",
+    "SELECT * FROM claude_limit_snapshots WHERE account_id = ? ORDER BY recorded_at DESC, id DESC LIMIT 1",
   ).get(accountId) as LimitSnapshotRow | null;
 }
 
@@ -455,17 +494,17 @@ export function getAllLatestSnapshots(): LimitSnapshotRow[] {
   return getDb().query(
     `SELECT s.* FROM claude_limit_snapshots s
      INNER JOIN (
-       SELECT account_id, MAX(recorded_at) as max_recorded
+       SELECT account_id, MAX(id) as max_id
        FROM claude_limit_snapshots WHERE account_id IS NOT NULL
        GROUP BY account_id
-     ) latest ON s.account_id = latest.account_id AND s.recorded_at = latest.max_recorded`,
+     ) latest ON s.id = latest.max_id`,
   ).all() as LimitSnapshotRow[];
 }
 
 export function touchSnapshotTimestamp(accountId: string): void {
   getDb().query(
     `UPDATE claude_limit_snapshots SET recorded_at = datetime('now')
-     WHERE id = (SELECT id FROM claude_limit_snapshots WHERE account_id = ? ORDER BY recorded_at DESC LIMIT 1)`,
+     WHERE id = (SELECT id FROM claude_limit_snapshots WHERE account_id = ? ORDER BY recorded_at DESC, id DESC LIMIT 1)`,
   ).run(accountId);
 }
 

package/src/web/components/editor/code-editor.tsx

@@ -7,7 +7,12 @@ import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { basename } from "@/lib/utils";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
-import { Loader2, FileWarning, ExternalLink, Code, Eye, WrapText } from "lucide-react";
+import { Loader2, FileWarning, ExternalLink } from "lucide-react";
+import { EditorBreadcrumb } from "./editor-breadcrumb";
+import { EditorToolbar } from "./editor-toolbar";
+import { lazy, Suspense } from "react";
+
+const CsvPreview = lazy(() => import("./csv-preview").then((m) => ({ default: m.CsvPreview })));
 
 /** Image extensions renderable inline */
 const IMAGE_EXTS = new Set(["png", "jpg", "jpeg", "gif", "webp", "svg", "ico"]);
@@ -58,7 +63,9 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
   const isPdf = ext === "pdf";
   const isSqlite = SQLITE_EXTS.has(ext);
   const isMarkdown = ext === "md" || ext === "mdx";
+  const isCsv = ext === "csv";
   const [mdMode, setMdMode] = useState<"edit" | "preview">("preview");
+  const [csvMode, setCsvMode] = useState<"table" | "raw">("table");
 
   // Redirect .db files to sqlite viewer by changing tab type
   useEffect(() => {
@@ -196,33 +203,36 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
     );
   }
 
-  const mdModeButtons = isMarkdown ? (
-    <>
-      <button type="button" onClick={() => setMdMode("edit")}
-        className={`flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors ${mdMode === "edit" ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"}`}
-      >
-        <Code className="size-3" /> Edit
-      </button>
-      <button type="button" onClick={() => setMdMode("preview")}
-        className={`flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors ${mdMode === "preview" ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"}`}
-      >
-        <Eye className="size-3" /> Preview
-      </button>
-    </>
-  ) : null;
-
-  const wrapBtn = (
-    <button type="button" onClick={toggleWordWrap} title="Toggle word wrap (Alt+Z)"
-      className={`flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors ${wordWrap ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"}`}
-    >
-      <WrapText className="size-3" />
-      <span className="hidden sm:inline">Wrap</span>
-    </button>
-  );
-
   return (
     <div className="flex flex-col h-full w-full overflow-hidden">
-      {isMarkdown && mdMode === "preview" ? (
+      {/* Breadcrumb + Toolbar bar — desktop only */}
+      {filePath && projectName && tabId && (
+        <div className="hidden md:flex items-center h-7 border-b border-border bg-background shrink-0">
+          <EditorBreadcrumb
+            filePath={filePath}
+            projectName={projectName}
+            tabId={tabId}
+            className="flex items-center flex-1 min-w-0 overflow-x-auto scrollbar-none px-2 gap-0.5"
+          />
+          <EditorToolbar
+            ext={ext}
+            mdMode={mdMode}
+            onMdModeChange={setMdMode}
+            csvMode={csvMode}
+            onCsvModeChange={setCsvMode}
+            wordWrap={wordWrap}
+            onToggleWordWrap={toggleWordWrap}
+            className="shrink-0 flex items-center gap-1 px-2"
+          />
+        </div>
+      )}
+
+      {/* Content area */}
+      {isCsv && csvMode === "table" ? (
+        <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="size-5 animate-spin text-text-subtle" /></div>}>
+          <CsvPreview content={content ?? ""} onContentChange={handleChange} />
+        </Suspense>
+      ) : isMarkdown && mdMode === "preview" ? (
         <MarkdownPreview content={content ?? ""} />
       ) : (
         <div className="flex-1 overflow-hidden">

package/src/web/components/editor/csv-preview.tsx

@@ -0,0 +1,207 @@
+import { useState, useMemo, useRef, useCallback, useEffect } from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  flexRender,
+  type ColumnDef,
+  type SortingState,
+} from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { parseCsv, serializeCsv } from "@/lib/csv-parser";
+import { ArrowUp, ArrowDown } from "lucide-react";
+
+interface CsvPreviewProps {
+  content: string;
+  onContentChange: (csv: string) => void;
+}
+
+export function CsvPreview({ content, onContentChange }: CsvPreviewProps) {
+  const parsed = useMemo(() => parseCsv(content), [content]);
+  const [rows, setRows] = useState<string[][]>(() => parsed.rows);
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const internalEditRef = useRef(false);
+
+  // Sync when content changes externally (e.g. file reload) — skip if we triggered it
+  useEffect(() => {
+    if (internalEditRef.current) {
+      internalEditRef.current = false;
+      return;
+    }
+    setRows(parsed.rows);
+  }, [parsed.rows]);
+
+  const headers = parsed.headers;
+
+  const updateCell = useCallback(
+    (rowIndex: number, colIndex: number, value: string) => {
+      setRows((prev) => {
+        const next = prev.map((r, i) => (i === rowIndex ? [...r] : r));
+        next[rowIndex]![colIndex] = value;
+        internalEditRef.current = true;
+        onContentChange(serializeCsv(headers, next));
+        return next;
+      });
+    },
+    [headers, onContentChange],
+  );
+
+  const columns = useMemo<ColumnDef<string[], string>[]>(
+    () =>
+      headers.map((h, i) => ({
+        id: `col-${i}`,
+        header: h || `Column ${i + 1}`,
+        accessorFn: (row: string[]) => row[i] ?? "",
+        cell: ({ row, getValue }) => (
+          <CsvCell
+            value={getValue()}
+            onSave={(v) => updateCell(row.index, i, v)}
+          />
+        ),
+        size: 150,
+        minSize: 80,
+      })),
+    [headers, updateCell],
+  );
+
+  const table = useReactTable({
+    data: rows,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableColumnResizing: true,
+    columnResizeMode: "onChange",
+  });
+
+  const { rows: tableRows } = table.getRowModel();
+
+  const virtualizer = useVirtualizer({
+    count: tableRows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 32,
+    overscan: 20,
+  });
+
+  if (headers.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
+        Empty CSV file
+      </div>
+    );
+  }
+
+  return (
+    <div ref={scrollRef} className="flex-1 overflow-auto">
+      <table className="w-full text-xs font-mono border-collapse">
+        <thead className="sticky top-0 bg-background z-10 border-b border-border block">
+          {table.getHeaderGroups().map((hg) => (
+            <tr key={hg.id} className="flex w-full">
+              {hg.headers.map((header) => (
+                <th
+                  key={header.id}
+                  className="relative text-left px-2 py-1.5 font-medium text-muted-foreground select-none cursor-pointer hover:bg-muted/50 border-r border-border last:border-r-0"
+                  style={{ width: header.getSize(), minWidth: header.getSize() }}
+                  onClick={header.column.getToggleSortingHandler()}
+                >
+                  <div className="flex items-center gap-1">
+                    <span className="truncate">
+                      {flexRender(header.column.columnDef.header, header.getContext())}
+                    </span>
+                    {header.column.getIsSorted() === "asc" && <ArrowUp className="size-3 shrink-0" />}
+                    {header.column.getIsSorted() === "desc" && <ArrowDown className="size-3 shrink-0" />}
+                  </div>
+                  {/* Resize handle */}
+                  <div
+                    onMouseDown={header.getResizeHandler()}
+                    onTouchStart={header.getResizeHandler()}
+                    onClick={(e) => e.stopPropagation()}
+                    className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-primary/50 active:bg-primary"
+                  />
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody style={{ height: virtualizer.getTotalSize(), position: "relative", display: "block" }}>
+          {virtualizer.getVirtualItems().map((vRow) => {
+            const row = tableRows[vRow.index]!;
+            return (
+              <tr
+                key={row.id}
+                data-index={vRow.index}
+                ref={(node) => virtualizer.measureElement(node)}
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  transform: `translateY(${vRow.start}px)`,
+                  display: "flex",
+                }}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <td
+                    key={cell.id}
+                    className="px-2 py-1 border-b border-border/50 border-r border-r-border/30 last:border-r-0 truncate"
+                    style={{ width: cell.column.getSize(), minWidth: cell.column.getSize() }}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function CsvCell({ value, onSave }: { value: string; onSave: (v: string) => void }) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (editing) inputRef.current?.focus();
+  }, [editing]);
+
+  if (!editing) {
+    return (
+      <span
+        className="block truncate cursor-text"
+        onClick={() => {
+          setDraft(value);
+          setEditing(true);
+        }}
+      >
+        {value || "\u00A0"}
+      </span>
+    );
+  }
+
+  return (
+    <input
+      ref={inputRef}
+      className="w-full bg-transparent outline-none border-b border-primary text-xs font-mono"
+      value={draft}
+      onChange={(e) => setDraft(e.target.value)}
+      onBlur={() => {
+        setEditing(false);
+        if (draft !== value) onSave(draft);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          setEditing(false);
+          if (draft !== value) onSave(draft);
+        } else if (e.key === "Escape") {
+          setEditing(false);
+          setDraft(value);
+        }
+      }}
+    />
+  );
+}

package/src/web/components/editor/editor-breadcrumb.tsx

@@ -0,0 +1,225 @@
+import { useMemo, useRef, useEffect } from "react";
+import { ChevronRight, Folder, File, FileCode, FileJson, FileText, FileType } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useFileStore, type FileNode } from "@/stores/file-store";
+import { useTabStore } from "@/stores/tab-store";
+import { basename } from "@/lib/utils";
+
+const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
+  ts: FileCode, tsx: FileCode, js: FileCode, jsx: FileCode,
+  py: FileCode, rs: FileCode, go: FileCode, html: FileCode,
+  css: FileCode, scss: FileCode,
+  json: FileJson,
+  md: FileText, txt: FileText,
+  yaml: FileType, yml: FileType,
+};
+
+function getIcon(name: string, isDir: boolean) {
+  if (isDir) return Folder;
+  const ext = name.split(".").pop()?.toLowerCase() ?? "";
+  return ICON_MAP[ext] ?? File;
+}
+
+interface BreadcrumbSegment {
+  name: string;
+  fullPath: string;
+  node: FileNode | null;
+  siblings: FileNode[];
+}
+
+function walkTree(tree: FileNode[], segments: string[]): BreadcrumbSegment[] {
+  const result: BreadcrumbSegment[] = [];
+  let current: FileNode[] = tree;
+
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i]!;
+    const fullPath = segments.slice(0, i + 1).join("/");
+    const match = current.find((n) => n.name === seg);
+    result.push({
+      name: seg,
+      fullPath,
+      node: match ?? null,
+      siblings: current,
+    });
+    if (match?.children) {
+      current = match.children;
+    } else {
+      // Remaining segments have no tree data — add as plain
+      for (let j = i + 1; j < segments.length; j++) {
+        result.push({
+          name: segments[j]!,
+          fullPath: segments.slice(0, j + 1).join("/"),
+          node: null,
+          siblings: [],
+        });
+      }
+      break;
+    }
+  }
+  return result;
+}
+
+function sortNodes(nodes: FileNode[]): FileNode[] {
+  return [...nodes].sort((a, b) => {
+    if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+interface EditorBreadcrumbProps {
+  filePath: string;
+  projectName: string;
+  tabId: string;
+  className?: string;
+}
+
+export function EditorBreadcrumb({ filePath, projectName, tabId, className }: EditorBreadcrumbProps) {
+  const tree = useFileStore((s) => s.tree);
+  const { updateTab, openTab } = useTabStore();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const segments = useMemo(
+    () => walkTree(tree, filePath.split("/").filter(Boolean)),
+    [tree, filePath],
+  );
+
+  // Auto-scroll to rightmost segment
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
+    }
+  }, [segments]);
+
+  function handleFileClick(path: string, e: React.MouseEvent) {
+    const name = basename(path);
+    if (e.metaKey || e.ctrlKey) {
+      openTab({ type: "editor", title: name, metadata: { filePath: path, projectName }, projectId: projectName, closable: true });
+    } else {
+      updateTab(tabId, { title: name, metadata: { filePath: path, projectName } });
+    }
+  }
+
+  return (
+    <div ref={scrollRef} className={className}>
+      {segments.map((seg, i) => (
+        <div key={seg.fullPath} className="flex items-center shrink-0">
+          {i > 0 && <ChevronRight className="size-3 text-muted-foreground shrink-0 mx-0.5" />}
+          {seg.siblings.length > 0 ? (
+            <SegmentDropdown
+              segment={seg}
+              isLast={i === segments.length - 1}
+              projectName={projectName}
+              onFileClick={handleFileClick}
+            />
+          ) : (
+            <span className="text-xs text-muted-foreground px-1 py-0.5">{seg.name}</span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+interface SegmentDropdownProps {
+  segment: BreadcrumbSegment;
+  isLast: boolean;
+  projectName: string;
+  onFileClick: (path: string, e: React.MouseEvent) => void;
+}
+
+function SegmentDropdown({ segment, isLast, projectName, onFileClick }: SegmentDropdownProps) {
+  const sorted = useMemo(() => sortNodes(segment.siblings), [segment.siblings]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          className={`text-xs px-1 py-0.5 rounded hover:bg-muted transition-colors truncate max-w-[120px] ${
+            isLast ? "text-foreground font-medium" : "text-muted-foreground"
+          }`}
+        >
+          {segment.name}
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="max-h-[300px] overflow-hidden p-0">
+        <ScrollArea className="max-h-[300px]">
+          <div className="p-1">
+            {sorted.map((node) => (
+              <NodeMenuItem
+                key={node.path}
+                node={node}
+                projectName={projectName}
+                activePath={segment.fullPath}
+                onFileClick={onFileClick}
+              />
+            ))}
+          </div>
+        </ScrollArea>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+interface NodeMenuItemProps {
+  node: FileNode;
+  projectName: string;
+  activePath: string;
+  onFileClick: (path: string, e: React.MouseEvent) => void;
+}
+
+function NodeMenuItem({ node, projectName, activePath, onFileClick }: NodeMenuItemProps) {
+  const Icon = getIcon(node.name, node.type === "directory");
+  const isActive = node.path === activePath;
+
+  if (node.type === "directory" && node.children && node.children.length > 0) {
+    return (
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger className={`text-xs gap-1.5 ${isActive ? "bg-muted" : ""}`}>
+          <Icon className="size-3.5 shrink-0 text-muted-foreground" />
+          <span className="truncate">{node.name}</span>
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent className="max-h-[300px] overflow-hidden p-0">
+          <ScrollArea className="max-h-[300px]">
+            <div className="p-1">
+              {sortNodes(node.children).map((child) => (
+                <NodeMenuItem
+                  key={child.path}
+                  node={child}
+                  projectName={projectName}
+                  activePath={activePath}
+                  onFileClick={onFileClick}
+                />
+              ))}
+            </div>
+          </ScrollArea>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+    );
+  }
+
+  return (
+    <DropdownMenuItem
+      className={`text-xs gap-1.5 cursor-pointer ${isActive ? "bg-muted" : ""}`}
+      onSelect={(e) => {
+        // onSelect doesn't give MouseEvent, use click handler for Ctrl detection
+      }}
+      onClick={(e) => {
+        if (node.type === "directory") return;
+        onFileClick(node.path, e);
+      }}
+    >
+      <Icon className="size-3.5 shrink-0 text-muted-foreground" />
+      <span className="truncate">{node.name}</span>
+    </DropdownMenuItem>
+  );
+}