@hienlh/ppm 0.7.3 → 0.7.5

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

@@ -1,6 +1,12 @@
 import { homedir } from "node:os";
 import { resolve } from "node:path";
 import { existsSync, readFileSync } from "node:fs";
+import {
+  insertLimitSnapshot,
+  getLatestLimitSnapshot,
+  cleanupOldLimitSnapshots,
+  type LimitSnapshotRow,
+} from "./db.service.ts";
 
 export interface LimitBucket {
   utilization: number;
@@ -25,12 +31,12 @@ const API_URL = "https://api.anthropic.com/api/oauth/usage";
 const API_BETA = "oauth-2025-04-20";
 const USER_AGENT = "claude-code/1.0";
 const FETCH_TIMEOUT = 10_000; // 10s
-const POLL_INTERVAL = 60_000; // auto-fetch every 60s
+const POLL_INTERVAL = 120_000; // auto-fetch every 2min
 const RETRY_DELAY = 5_000; // 5s between retries
 const MAX_RETRIES = 3;
 
-/** Cached usage data */
-let cache: ClaudeUsage = {};
+/** In-memory accumulator for cost from SDK result events */
+let inMemoryCostUsd = 0;
 
 /** Cached OAuth token (read once from Keychain/file) */
 let tokenCache: { token: string; timestamp: number } | null = null;
@@ -118,12 +124,69 @@ function parseApiBucket(raw: Record<string, any>, windowHours: number): LimitBuc
   };
 }
 
-/** Fetch with retry logic */
+/** Convert DB snapshot row fields back to a LimitBucket (recomputes time-relative fields) */
+function dbBucketToLimitBucket(util: number, resetsAt: string, windowHours: number): LimitBucket {
+  const diff = resetsAt ? new Date(resetsAt).getTime() - Date.now() : 0;
+  const totalMins = diff > 0 ? Math.ceil(diff / 60_000) : 0;
+  return {
+    utilization: util,
+    resetsAt,
+    resetsInMinutes: windowHours <= 5 ? totalMins : null,
+    resetsInHours: windowHours > 5 ? Math.round((totalMins / 60) * 100) / 100 : null,
+    windowHours,
+  };
+}
+
+/** Return ClaudeUsage from the latest DB snapshot + in-memory cost */
+export function getCachedUsage(): ClaudeUsage {
+  const row = getLatestLimitSnapshot();
+  const result: ClaudeUsage = {};
+  if (inMemoryCostUsd > 0) result.totalCostUsd = inMemoryCostUsd;
+  if (!row) return result;
+  result.lastFetchedAt = row.recorded_at;
+  if (row.five_hour_util != null) result.session = dbBucketToLimitBucket(row.five_hour_util, row.five_hour_resets_at ?? "", 5);
+  if (row.weekly_util != null) result.weekly = dbBucketToLimitBucket(row.weekly_util, row.weekly_resets_at ?? "", 168);
+  if (row.weekly_opus_util != null) result.weeklyOpus = dbBucketToLimitBucket(row.weekly_opus_util, row.weekly_opus_resets_at ?? "", 168);
+  if (row.weekly_sonnet_util != null) result.weeklySonnet = dbBucketToLimitBucket(row.weekly_sonnet_util, row.weekly_sonnet_resets_at ?? "", 168);
+  return result;
+}
+
+/** Check if new API data differs from the last DB snapshot enough to warrant a new row */
+function hasChanged(data: ClaudeUsage, last: LimitSnapshotRow | null): boolean {
+  if (!last) return true;
+  const diff = (a: number | null | undefined, b: number | null) =>
+    a != null && (b == null || Math.abs(a - b) > 0.001);
+  if (diff(data.session?.utilization, last.five_hour_util)) return true;
+  if (diff(data.weekly?.utilization, last.weekly_util)) return true;
+  // Detect window reset (resetsAt changed)
+  if (data.session?.resetsAt && data.session.resetsAt !== (last.five_hour_resets_at ?? "")) return true;
+  if (data.weekly?.resetsAt && data.weekly.resetsAt !== (last.weekly_resets_at ?? "")) return true;
+  return false;
+}
+
+/** Persist API data to DB if changed, then cleanup old rows */
+function persistIfChanged(data: ClaudeUsage): void {
+  const last = getLatestLimitSnapshot();
+  if (!hasChanged(data, last)) return;
+  insertLimitSnapshot({
+    five_hour_util: data.session?.utilization ?? null,
+    five_hour_resets_at: data.session?.resetsAt ?? null,
+    weekly_util: data.weekly?.utilization ?? null,
+    weekly_resets_at: data.weekly?.resetsAt ?? null,
+    weekly_opus_util: data.weeklyOpus?.utilization ?? null,
+    weekly_opus_resets_at: data.weeklyOpus?.resetsAt ?? null,
+    weekly_sonnet_util: data.weeklySonnet?.utilization ?? null,
+    weekly_sonnet_resets_at: data.weeklySonnet?.resetsAt ?? null,
+  });
+  cleanupOldLimitSnapshots();
+}
+
+/** Fetch with retry logic, persist to DB if changed */
 async function fetchWithRetry(): Promise<void> {
   for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
     try {
       const data = await fetchUsageFromApi();
-      cache = data;
+      persistIfChanged(data);
       return;
     } catch (e) {
       const msg = (e as Error).message ?? "";
@@ -150,45 +213,22 @@ export function stopUsagePolling(): void {
   if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
 }
 
-/** Get cached usage (fast, synchronous read — FE just reads this) */
-export function getCachedUsage(): ClaudeUsage {
-  return cache;
-}
-
 /**
- * Merge SDK rate-limit / cost events into the cache so the REST endpoint
- * always returns the freshest data — even when the OAuth Usage API is unreachable.
+ * Merge SDK result cost events into in-memory accumulator.
+ * Rate limit utilization from SDK events is ignored — API polling is authoritative.
  */
 export function updateFromSdkEvent(
-  rateLimitType?: string,
-  utilization?: number,
+  _rateLimitType?: string,
+  _utilization?: number,
   costUsd?: number,
 ): void {
-  if (rateLimitType && utilization != null) {
-    if (rateLimitType === "five_hour") {
-      cache.session = {
-        ...(cache.session ?? { resetsAt: "", resetsInMinutes: null, resetsInHours: null, windowHours: 5 }),
-        utilization,
-      };
-    } else if (rateLimitType.startsWith("seven_day")) {
-      const key: keyof ClaudeUsage =
-        rateLimitType === "seven_day_opus" ? "weeklyOpus"
-          : rateLimitType === "seven_day_sonnet" ? "weeklySonnet"
-          : "weekly";
-      cache[key] = {
-        ...(cache[key] as LimitBucket ?? { resetsAt: "", resetsInMinutes: null, resetsInHours: null, windowHours: 168 }),
-        utilization,
-      };
-    }
-    if (!cache.lastFetchedAt) cache.lastFetchedAt = new Date().toISOString();
-  }
   if (costUsd != null) {
-    cache.totalCostUsd = (cache.totalCostUsd ?? 0) + costUsd;
+    inMemoryCostUsd += costUsd;
   }
 }
 
-/** Force immediate refresh (e.g. after a chat completes) */
+/** Force immediate refresh from Anthropic API, persist to DB, return latest */
 export async function refreshUsageNow(): Promise<ClaudeUsage> {
   await fetchWithRetry();
-  return cache;
+  return getCachedUsage();
 }

package/src/services/db.service.ts

@@ -4,7 +4,7 @@ import { homedir } from "node:os";
 import { mkdirSync, existsSync } from "node:fs";
 
 const PPM_DIR = resolve(homedir(), ".ppm");
-const CURRENT_SCHEMA_VERSION = 3;
+const CURRENT_SCHEMA_VERSION = 4;
 
 let db: Database | null = null;
 let dbProfile: string | null = null;
@@ -167,6 +167,27 @@ function runMigrations(database: Database): void {
       PRAGMA user_version = 3;
     `);
   }
+
+  if (current < 4) {
+    database.exec(`
+      CREATE TABLE IF NOT EXISTS claude_limit_snapshots (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        five_hour_util REAL,
+        five_hour_resets_at TEXT,
+        weekly_util REAL,
+        weekly_resets_at TEXT,
+        weekly_opus_util REAL,
+        weekly_opus_resets_at TEXT,
+        weekly_sonnet_util REAL,
+        weekly_sonnet_resets_at TEXT,
+        recorded_at TEXT DEFAULT (datetime('now'))
+      );
+
+      CREATE INDEX IF NOT EXISTS idx_limit_snapshots_recorded ON claude_limit_snapshots(recorded_at);
+
+      PRAGMA user_version = 4;
+    `);
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -345,6 +366,49 @@ export function getDbFilePath(): string {
   return getDbPath();
 }
 
+// ---------------------------------------------------------------------------
+// Claude limit snapshot helpers
+// ---------------------------------------------------------------------------
+
+export interface LimitSnapshotRow {
+  id: number;
+  five_hour_util: number | null;
+  five_hour_resets_at: string | null;
+  weekly_util: number | null;
+  weekly_resets_at: string | null;
+  weekly_opus_util: number | null;
+  weekly_opus_resets_at: string | null;
+  weekly_sonnet_util: number | null;
+  weekly_sonnet_resets_at: string | null;
+  recorded_at: string;
+}
+
+export function insertLimitSnapshot(data: Omit<LimitSnapshotRow, "id" | "recorded_at">): void {
+  getDb().query(
+    `INSERT INTO claude_limit_snapshots
+      (five_hour_util, five_hour_resets_at, weekly_util, weekly_resets_at,
+       weekly_opus_util, weekly_opus_resets_at, weekly_sonnet_util, weekly_sonnet_resets_at)
+     VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
+  ).run(
+    data.five_hour_util ?? null, data.five_hour_resets_at ?? null,
+    data.weekly_util ?? null, data.weekly_resets_at ?? null,
+    data.weekly_opus_util ?? null, data.weekly_opus_resets_at ?? null,
+    data.weekly_sonnet_util ?? null, data.weekly_sonnet_resets_at ?? null,
+  );
+}
+
+export function getLatestLimitSnapshot(): LimitSnapshotRow | null {
+  return getDb().query(
+    "SELECT * FROM claude_limit_snapshots ORDER BY recorded_at DESC LIMIT 1",
+  ).get() as LimitSnapshotRow | null;
+}
+
+export function cleanupOldLimitSnapshots(): void {
+  getDb().query(
+    "DELETE FROM claude_limit_snapshots WHERE recorded_at < datetime('now', '-7 days')",
+  ).run();
+}
+
 // ---------------------------------------------------------------------------
 // Connection helpers
 // ---------------------------------------------------------------------------

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

@@ -130,8 +130,18 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
     saveTimerRef.current = setTimeout(() => saveFile(latestContentRef.current), 1000);
   }
 
+  // Jump to line when metadata.lineNumber is set (e.g. from search panel)
+  const lineNumber = metadata?.lineNumber as number | undefined;
   const handleEditorMount: OnMount = useCallback((editor, monaco) => {
     editorRef.current = editor;
+    if (lineNumber && lineNumber > 0) {
+      // Defer until content is rendered
+      setTimeout(() => {
+        editor.revealLineInCenter(lineNumber);
+        editor.setPosition({ lineNumber, column: 1 });
+        editor.focus();
+      }, 100);
+    }
     // Alt+Z → toggle word wrap
     editor.addCommand(
       monaco.KeyMod.Alt | monaco.KeyCode.KeyZ,

package/src/web/components/explorer/search-panel.tsx

@@ -0,0 +1,310 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import { Search, CaseSensitive, ChevronRight, ChevronDown, FileText, X, Loader2, WholeWord, Regex, ReplaceAll } from "lucide-react";
+import { useProjectStore } from "@/stores/project-store";
+import { useTabStore } from "@/stores/tab-store";
+import { projectUrl, api } from "@/lib/api-client";
+import { cn } from "@/lib/utils";
+
+interface SearchMatch {
+  lineNum: number;
+  content: string;
+}
+
+interface SearchResult {
+  file: string;
+  matches: SearchMatch[];
+}
+
+/** Build highlight regex from query + options */
+function buildHighlightRegex(query: string, caseSensitive: boolean, wholeWord: boolean, useRegex: boolean): RegExp | null {
+  if (!query) return null;
+  try {
+    let pattern = useRegex ? query : query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    if (wholeWord) pattern = `\\b${pattern}\\b`;
+    return new RegExp(`(${pattern})`, caseSensitive ? "g" : "gi");
+  } catch {
+    return null;
+  }
+}
+
+function HighlightMatch({ text, re }: { text: string; re: RegExp | null }) {
+  if (!re) return <span>{text}</span>;
+  try {
+    re.lastIndex = 0;
+    const parts = text.split(re);
+    re.lastIndex = 0;
+    return (
+      <span>
+        {parts.map((p, i) => {
+          re.lastIndex = 0;
+          return re.test(p) ? <mark key={i} className="bg-yellow-300/40 text-foreground rounded-sm">{p}</mark> : p;
+        })}
+      </span>
+    );
+  } catch {
+    return <span>{text}</span>;
+  }
+}
+
+function OptionButton({ active, onClick, title, children }: { active: boolean; onClick: () => void; title: string; children: React.ReactNode }) {
+  return (
+    <button
+      onClick={onClick}
+      title={title}
+      className={cn(
+        "flex items-center justify-center w-6 h-6 rounded border shrink-0",
+        active ? "border-primary text-primary bg-primary/10" : "border-border text-text-subtle hover:text-foreground hover:border-border/80"
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function SearchPanel() {
+  const { activeProject } = useProjectStore();
+  const openTab = useTabStore((s) => s.openTab);
+
+  const [query, setQuery] = useState("");
+  const [caseSensitive, setCaseSensitive] = useState(false);
+  const [wholeWord, setWholeWord] = useState(false);
+  const [useRegex, setUseRegex] = useState(false);
+  const [regexError, setRegexError] = useState(false);
+  const [filesFilter, setFilesFilter] = useState("");
+  const [replace, setReplace] = useState("");
+  const [replacing, setReplacing] = useState(false);
+  const [replaceCount, setReplaceCount] = useState<number | null>(null);
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const doSearch = useCallback(async (q: string, cs: boolean, ww: boolean, rx: boolean, ff: string) => {
+    setRegexError(false);
+    if (!activeProject || (!rx && q.length < 2) || (rx && q.length < 1)) {
+      setResults([]);
+      setTotal(0);
+      return;
+    }
+    if (rx) {
+      try { new RegExp(q); } catch { setRegexError(true); setResults([]); return; }
+    }
+    setLoading(true);
+    try {
+      const params = new URLSearchParams({ q, caseSensitive: String(cs), wholeWord: String(ww), regex: String(rx) });
+      if (ff) params.set("include", ff);
+      const data = await api.get<{ results: SearchResult[]; total: number }>(
+        `${projectUrl(activeProject.name)}/files/search?${params}`
+      );
+      setResults(data.results);
+      setTotal(data.total);
+    } catch {
+      setResults([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [activeProject]);
+
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => doSearch(query, caseSensitive, wholeWord, useRegex, filesFilter), 300);
+    return () => { if (debounceRef.current) clearTimeout(debounceRef.current); };
+  }, [query, caseSensitive, wholeWord, useRegex, filesFilter, doSearch]);
+
+  useEffect(() => { inputRef.current?.focus(); }, []);
+
+  const highlightRe = buildHighlightRegex(query, caseSensitive, wholeWord, useRegex);
+
+  function openFile(file: string, lineNum?: number) {
+    if (!activeProject) return;
+    const name = file.split("/").pop() ?? file;
+    openTab({
+      type: "editor",
+      title: name,
+      metadata: { filePath: file, projectName: activeProject.name, lineNumber: lineNum },
+      projectId: activeProject.name,
+      closable: true,
+    });
+  }
+
+  function toggleCollapse(file: string) {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      next.has(file) ? next.delete(file) : next.add(file);
+      return next;
+    });
+  }
+
+  async function doReplaceAll() {
+    if (!activeProject || !query || results.length === 0 || replacing) return;
+    setReplacing(true);
+    setReplaceCount(null);
+    let count = 0;
+    try {
+      for (const r of results) {
+        const fileData = await api.get<{ content: string }>(
+          `${projectUrl(activeProject.name)}/files/read?path=${encodeURIComponent(r.file)}`
+        );
+        const re = buildHighlightRegex(query, caseSensitive, wholeWord, useRegex);
+        if (!re) continue;
+        re.lastIndex = 0;
+        const matches = fileData.content.match(re) ?? [];
+        if (!matches.length) continue;
+        count += matches.length;
+        re.lastIndex = 0;
+        const newContent = fileData.content.replace(re, replace);
+        await api.put(`${projectUrl(activeProject.name)}/files/write`, { path: r.file, content: newContent });
+      }
+      setReplaceCount(count);
+      doSearch(query, caseSensitive, wholeWord, useRegex, filesFilter);
+    } catch {
+      // ignore
+    } finally {
+      setReplacing(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Search input + options */}
+      <div className="p-2 border-b border-border space-y-1.5">
+        {/* Search row */}
+        <div className="relative flex items-center gap-1">
+          <div className="relative flex-1">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 size-3.5 text-text-subtle pointer-events-none" />
+            <input
+              ref={inputRef}
+              value={query}
+              onChange={(e) => { setQuery(e.target.value); setReplaceCount(null); }}
+              placeholder={activeProject ? "Search files…" : "Select a project first"}
+              disabled={!activeProject}
+              className={cn(
+                "w-full pl-7 pr-6 py-1 text-xs bg-input border rounded focus:outline-none focus:ring-1 focus:ring-primary/50 disabled:opacity-50",
+                regexError ? "border-destructive" : "border-border"
+              )}
+            />
+            {query && (
+              <button
+                onClick={() => { setQuery(""); setResults([]); setTotal(0); setRegexError(false); setReplaceCount(null); }}
+                className="absolute right-1.5 top-1/2 -translate-y-1/2 text-text-subtle hover:text-foreground"
+              >
+                <X className="size-3" />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Option toggles */}
+        <div className="flex items-center gap-1">
+          <OptionButton active={caseSensitive} onClick={() => setCaseSensitive((v) => !v)} title="Match Case (Alt+C)">
+            <CaseSensitive className="size-3.5" />
+          </OptionButton>
+          <OptionButton active={wholeWord} onClick={() => { setWholeWord((v) => !v); if (useRegex) setUseRegex(false); }} title="Match Whole Word (Alt+W)">
+            <WholeWord className="size-3.5" />
+          </OptionButton>
+          <OptionButton active={useRegex} onClick={() => { setUseRegex((v) => !v); if (wholeWord) setWholeWord(false); }} title="Use Regular Expression (Alt+R)">
+            <Regex className="size-3.5" />
+          </OptionButton>
+          {regexError && <span className="text-[10px] text-destructive ml-1">Invalid regex</span>}
+        </div>
+
+        {/* Replace row */}
+        <div className="flex items-center gap-1">
+          <div className="relative flex-1">
+            <input
+              value={replace}
+              onChange={(e) => setReplace(e.target.value)}
+              placeholder="Replace…"
+              disabled={!activeProject}
+              className="w-full pl-2 pr-6 py-1 text-xs bg-input border border-border rounded focus:outline-none focus:ring-1 focus:ring-primary/50 disabled:opacity-50"
+            />
+            {replace && (
+              <button onClick={() => setReplace("")} className="absolute right-1.5 top-1/2 -translate-y-1/2 text-text-subtle hover:text-foreground">
+                <X className="size-3" />
+              </button>
+            )}
+          </div>
+          <button
+            onClick={doReplaceAll}
+            disabled={!query || results.length === 0 || replacing}
+            title="Replace All"
+            className="flex items-center justify-center w-6 h-6 rounded border border-border text-text-subtle hover:text-foreground hover:border-border/80 disabled:opacity-40 shrink-0"
+          >
+            {replacing ? <Loader2 className="size-3.5 animate-spin" /> : <ReplaceAll className="size-3.5" />}
+          </button>
+        </div>
+
+        {/* Files filter row */}
+        <div className="relative">
+          <input
+            value={filesFilter}
+            onChange={(e) => setFilesFilter(e.target.value)}
+            placeholder="Files to include (e.g. *.ts, src/**)"
+            disabled={!activeProject}
+            className="w-full pl-2 pr-6 py-1 text-xs bg-input border border-border rounded focus:outline-none focus:ring-1 focus:ring-primary/50 disabled:opacity-50"
+          />
+          {filesFilter && (
+            <button onClick={() => setFilesFilter("")} className="absolute right-1.5 top-1/2 -translate-y-1/2 text-text-subtle hover:text-foreground">
+              <X className="size-3" />
+            </button>
+          )}
+        </div>
+
+        {/* Status line */}
+        <div className="text-[10px] text-text-subtle h-3">
+          {(loading || replacing) && (
+            <span className="flex items-center gap-1">
+              <Loader2 className="size-2.5 animate-spin" />
+              {replacing ? "Replacing…" : "Searching…"}
+            </span>
+          )}
+          {!loading && !replacing && replaceCount !== null && (
+            <span className="text-green-500">{replaceCount} replacement{replaceCount !== 1 ? "s" : ""} made</span>
+          )}
+          {!loading && !replacing && replaceCount === null && !regexError && query.length >= 2 && results.length === 0 && <span>No results</span>}
+          {!loading && !replacing && replaceCount === null && total > 0 && (
+            <span>{total} result{total !== 1 ? "s" : ""} in {results.length} file{results.length !== 1 ? "s" : ""}</span>
+          )}
+        </div>
+      </div>
+
+      {/* Results */}
+      <div className="flex-1 overflow-y-auto min-h-0">
+        {results.map((r) => {
+          const isCollapsed = collapsed.has(r.file);
+          const fileName = r.file.split("/").pop() ?? r.file;
+          const dirPath = r.file.includes("/") ? r.file.slice(0, r.file.lastIndexOf("/")) : "";
+          return (
+            <div key={r.file}>
+              <button
+                onClick={() => toggleCollapse(r.file)}
+                className="w-full flex items-center gap-1 px-2 py-1 hover:bg-muted/50 text-left"
+              >
+                {isCollapsed ? <ChevronRight className="size-3 shrink-0 text-text-subtle" /> : <ChevronDown className="size-3 shrink-0 text-text-subtle" />}
+                <FileText className="size-3 shrink-0 text-text-subtle" />
+                <span className="text-xs font-medium text-foreground truncate">{fileName}</span>
+                <span className="text-[10px] text-text-subtle truncate flex-1 min-w-0 ml-1">{dirPath}</span>
+                <span className="text-[10px] text-text-subtle shrink-0 ml-1 bg-muted px-1 rounded">{r.matches.length}</span>
+              </button>
+
+              {!isCollapsed && r.matches.map((m) => (
+                <button
+                  key={`${r.file}-${m.lineNum}`}
+                  onClick={() => openFile(r.file, m.lineNum)}
+                  className="w-full flex items-start gap-2 pl-7 pr-2 py-0.5 hover:bg-primary/10 text-left"
+                >
+                  <span className="text-[10px] text-text-subtle shrink-0 w-7 text-right pt-px">{m.lineNum}</span>
+                  <span className="text-xs text-text-secondary truncate font-mono leading-4">
+                    <HighlightMatch text={m.content.trimStart()} re={highlightRe} />
+                  </span>
+                </button>
+              ))}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -1,15 +1,17 @@
 import { useCallback, useRef } from "react";
-import { PanelLeftClose, PanelLeftOpen, FolderOpen, GitBranch, Settings, Database } from "lucide-react";
+import { PanelLeftClose, PanelLeftOpen, FolderOpen, GitBranch, Settings, Database, Search } 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 { GitStatusPanel } from "@/components/git/git-status-panel";
 import { SettingsTab } from "@/components/settings/settings-tab";
 import { DatabaseSidebar } from "@/components/database/database-sidebar";
+import { SearchPanel } from "@/components/explorer/search-panel";
 import { cn } from "@/lib/utils";
 
 const TABS: { id: SidebarActiveTab; label: string; icon: React.ElementType }[] = [
   { id: "explorer", label: "Explorer", icon: FolderOpen },
+  { id: "search", label: "Search", icon: Search },
   { id: "git", label: "Git", icon: GitBranch },
   { id: "database", label: "Database", icon: Database },
   { id: "settings", label: "Settings", icon: Settings },
@@ -124,6 +126,9 @@ export function Sidebar() {
         {sidebarActiveTab === "git" && (
           <GitStatusPanel metadata={{ projectName: activeProject?.name }} />
         )}
+        {sidebarActiveTab === "search" && (
+          <SearchPanel />
+        )}
         {sidebarActiveTab === "database" && (
           <DatabaseSidebar />
         )}

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

@@ -116,6 +116,15 @@ export function useGlobalKeybindings() {
         return;
       }
 
+      // Open search (sidebar)
+      if (match(e, "open-search")) {
+        e.preventDefault();
+        const settings = useSettingsStore.getState();
+        if (settings.sidebarCollapsed) settings.toggleSidebar();
+        settings.setSidebarActiveTab("search");
+        return;
+      }
+
       // Switch project 1-9
       for (let i = 1; i <= 9; i++) {
         if (match(e, `switch-project-${i}`)) {

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

@@ -35,6 +35,7 @@ export const KEY_ACTIONS: KeyAction[] = [
   { id: "open-settings", label: "Open Settings", category: "tabs", defaultKey: "Mod+," },
   { id: "open-git-graph", label: "Git Graph", category: "tabs", defaultKey: "Mod+Shift+G" },
   { id: "open-git-status", label: "Git Status (sidebar)", category: "tabs", defaultKey: "Mod+Shift+E" },
+  { id: "open-search", label: "Search Files (sidebar)", category: "tabs", defaultKey: "Mod+Shift+F" },
   // Projects — Mod+1..9
   ...Array.from({ length: 9 }, (_, i) => ({
     id: `switch-project-${i + 1}`,

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

@@ -2,7 +2,7 @@ import { create } from "zustand";
 
 export type Theme = "light" | "dark" | "system";
 export type GitStatusViewMode = "flat" | "tree";
-export type SidebarActiveTab = "explorer" | "git" | "settings" | "database";
+export type SidebarActiveTab = "explorer" | "git" | "settings" | "database" | "search";
 
 const STORAGE_KEY = "ppm-settings";
 
@@ -78,7 +78,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
   sidebarWidth: _initial.sidebarWidth ?? 280,
   gitStatusViewMode: _initial.gitStatusViewMode === "flat" ? "flat" : "tree",
   wordWrap: _initial.wordWrap ?? false,
-  sidebarActiveTab: (["git", "settings", "database"] as SidebarActiveTab[]).includes(_initial.sidebarActiveTab as SidebarActiveTab) ? _initial.sidebarActiveTab! : "explorer",
+  sidebarActiveTab: (["git", "settings", "database", "search"] as SidebarActiveTab[]).includes(_initial.sidebarActiveTab as SidebarActiveTab) ? _initial.sidebarActiveTab! : "explorer",
   deviceName: null,
   version: null,
 

package/dist/web/assets/code-editor-DiJdsNLG.js

@@ -1 +0,0 @@
-import{i as e,t}from"./react-CYzKIDNi.js";import{n,t as r}from"./jsx-runtime-wQxeESYQ.js";import{a as i,t as a}from"./tab-store-D7tRt0VT.js";import{n as o}from"./settings-store-oxI7uvce.js";import{t as s}from"./utils-DBpa1UZX.js";import{i as c,r as l,t as u}from"./api-client-B0aMOJxF.js";import{A as d}from"./index-DJ9J8ofO.js";import{t as f}from"./markdown-renderer-CxhgCtxp.js";import{n as p,t as m}from"./use-monaco-theme-CeYne1fd.js";var h=n(`file-exclamation-point`,[[`path`,{d:`M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z`,key:`1oefj6`}],[`path`,{d:`M12 9v4`,key:`juzpu7`}],[`path`,{d:`M12 17h.01`,key:`p32p05`}]]),g=e(t(),1),_=r(),v=new Set([`png`,`jpg`,`jpeg`,`gif`,`webp`,`svg`,`ico`]),y=new Set([`db`,`sqlite`,`sqlite3`]);function b(e){return e.split(`.`).pop()?.toLowerCase()??``}function x(e){return{js:`javascript`,jsx:`javascript`,ts:`typescript`,tsx:`typescript`,py:`python`,html:`html`,css:`css`,scss:`scss`,json:`json`,md:`markdown`,mdx:`markdown`,yaml:`yaml`,yml:`yaml`,sh:`shell`,bash:`shell`}[b(e)]??`plaintext`}function S({metadata:e,tabId:t}){let n=e?.filePath,r=e?.projectName,[i,l]=(0,g.useState)(null),[f,S]=(0,g.useState)(`utf-8`),[E,D]=(0,g.useState)(!0),[O,k]=(0,g.useState)(null),[A,j]=(0,g.useState)(!1),M=(0,g.useRef)(null),N=(0,g.useRef)(``),P=(0,g.useRef)(null),{tabs:F,updateTab:I}=a(),{wordWrap:L,toggleWordWrap:R}=o(),z=m(),B=F.find(e=>e.id===t),V=n?b(n):``,H=v.has(V),U=V===`pdf`,W=y.has(V),G=V===`md`||V===`mdx`,[K,q]=(0,g.useState)(`preview`);(0,g.useEffect)(()=>{W&&t&&I(t,{type:`sqlite`})},[W,t,I]);let J=n?/^(\/|[A-Za-z]:[/\\])/.test(n):!1;(0,g.useEffect)(()=>{if(!n||!J&&!r)return;if(H||U){D(!1);return}D(!0),k(null);let e=J?`/api/fs/read?path=${encodeURIComponent(n)}`:`${c(r)}/files/read?path=${encodeURIComponent(n)}`;return u.get(e).then(e=>{l(e.content),e.encoding&&S(e.encoding),N.current=e.content,D(!1)}).catch(e=>{k(e instanceof Error?e.message:`Failed to load file`),D(!1)}),()=>{M.current&&clearTimeout(M.current)}},[n,r,H,U,J]),(0,g.useEffect)(()=>{if(!B)return;let e=n?s(n):`Untitled`,t=A?`${e} \u25CF`:e;B.title!==t&&I(B.id,{title:t})},[A]);let Y=(0,g.useCallback)(async e=>{if(n&&!(!J&&!r))try{J?await u.put(`/api/fs/write`,{path:n,content:e}):await u.put(`${c(r)}/files/write`,{path:n,content:e}),j(!1)}catch{}},[n,r,J]);function X(e){let t=e??``;l(t),N.current=t,j(!0),M.current&&clearTimeout(M.current),M.current=setTimeout(()=>Y(N.current),1e3)}let Z=(0,g.useCallback)((e,t)=>{P.current=e,e.addCommand(t.KeyMod.Alt|t.KeyCode.KeyZ,()=>o.getState().toggleWordWrap()),t.languages.typescript.typescriptDefaults.setDiagnosticsOptions({noSemanticValidation:!0,noSyntaxValidation:!0,noSuggestionDiagnostics:!0}),t.languages.typescript.javascriptDefaults.setDiagnosticsOptions({noSemanticValidation:!0,noSyntaxValidation:!0,noSuggestionDiagnostics:!0})},[]);return!n||!J&&!r?(0,_.jsx)(`div`,{className:`flex items-center justify-center h-full text-text-secondary text-sm`,children:`No file selected.`}):E?(0,_.jsxs)(`div`,{className:`flex items-center justify-center h-full gap-2 text-text-secondary`,children:[(0,_.jsx)(d,{className:`size-5 animate-spin`}),(0,_.jsx)(`span`,{className:`text-sm`,children:`Loading file...`})]}):O?(0,_.jsx)(`div`,{className:`flex items-center justify-center h-full text-error text-sm`,children:O}):H?(0,_.jsx)(w,{filePath:n,projectName:r}):U?(0,_.jsx)(T,{filePath:n,projectName:r}):f===`base64`?(0,_.jsxs)(`div`,{className:`flex flex-col items-center justify-center h-full gap-3 text-text-secondary`,children:[(0,_.jsx)(h,{className:`size-10 text-text-subtle`}),(0,_.jsx)(`p`,{className:`text-sm`,children:`This file is a binary format and cannot be displayed.`}),(0,_.jsx)(`p`,{className:`text-xs text-text-subtle`,children:n})]}):(0,_.jsx)(`div`,{className:`flex flex-col h-full w-full overflow-hidden`,children:G&&K===`preview`?(0,_.jsx)(C,{content:i??``}):(0,_.jsx)(`div`,{className:`flex-1 overflow-hidden`,children:(0,_.jsx)(p,{height:`100%`,language:x(n),value:i??``,onChange:X,onMount:Z,theme:z,options:{fontSize:13,fontFamily:`Menlo, Monaco, Consolas, monospace`,wordWrap:L?`on`:`off`,minimap:{enabled:!1},scrollBeyondLastLine:!1,automaticLayout:!0,lineNumbers:`on`,folding:!0,bracketPairColorization:{enabled:!0}},loading:(0,_.jsx)(d,{className:`size-5 animate-spin text-text-subtle`})})})})}function C({content:e}){return(0,_.jsx)(f,{content:e,className:`flex-1 overflow-auto p-4`})}function w({filePath:e,projectName:t}){let[n,r]=(0,g.useState)(null),[i,a]=(0,g.useState)(!1);return(0,g.useEffect)(()=>{let n,i=`${c(t)}/files/raw?path=${encodeURIComponent(e)}`,o=l();return fetch(i,{headers:o?{Authorization:`Bearer ${o}`}:{}}).then(e=>{if(!e.ok)throw Error(`Failed`);return e.blob()}).then(e=>{let t=URL.createObjectURL(e);n=t,r(t)}).catch(()=>a(!0)),()=>{n&&URL.revokeObjectURL(n)}},[e,t]),i?(0,_.jsxs)(`div`,{className:`flex flex-col items-center justify-center h-full gap-3 text-text-secondary`,children:[(0,_.jsx)(h,{className:`size-10 text-text-subtle`}),(0,_.jsx)(`p`,{className:`text-sm`,children:`Failed to load image.`})]}):n?(0,_.jsx)(`div`,{className:`flex items-center justify-center h-full p-4 bg-surface overflow-auto`,children:(0,_.jsx)(`img`,{src:n,alt:e,className:`max-w-full max-h-full object-contain`})}):(0,_.jsx)(`div`,{className:`flex items-center justify-center h-full`,children:(0,_.jsx)(d,{className:`size-5 animate-spin text-text-subtle`})})}function T({filePath:e,projectName:t}){let[n,r]=(0,g.useState)(null),[a,o]=(0,g.useState)(!1);(0,g.useEffect)(()=>{let n,i=`${c(t)}/files/raw?path=${encodeURIComponent(e)}`,a=l();return fetch(i,{headers:a?{Authorization:`Bearer ${a}`}:{}}).then(e=>{if(!e.ok)throw Error(`Failed`);return e.blob()}).then(e=>{let t=URL.createObjectURL(new Blob([e],{type:`application/pdf`}));n=t,r(t)}).catch(()=>o(!0)),()=>{n&&URL.revokeObjectURL(n)}},[e,t]);let s=(0,g.useCallback)(()=>{n&&window.open(n,`_blank`)},[n]);return a?(0,_.jsxs)(`div`,{className:`flex flex-col items-center justify-center h-full gap-3 text-text-secondary`,children:[(0,_.jsx)(h,{className:`size-10 text-text-subtle`}),(0,_.jsx)(`p`,{className:`text-sm`,children:`Failed to load PDF.`})]}):n?(0,_.jsxs)(`div`,{className:`flex flex-col h-full`,children:[(0,_.jsxs)(`div`,{className:`flex items-center justify-between px-3 py-1.5 border-b border-border bg-background shrink-0`,children:[(0,_.jsx)(`span`,{className:`text-xs text-text-secondary truncate`,children:e}),(0,_.jsxs)(`button`,{onClick:s,className:`flex items-center gap-1 text-xs text-text-secondary hover:text-text-primary transition-colors`,children:[(0,_.jsx)(i,{className:`size-3`}),` Open in new tab`]})]}),(0,_.jsx)(`iframe`,{src:n,title:e,className:`flex-1 w-full border-none`})]}):(0,_.jsx)(`div`,{className:`flex items-center justify-center h-full`,children:(0,_.jsx)(d,{className:`size-5 animate-spin text-text-subtle`})})}export{S as CodeEditor};