@hienlh/ppm 0.20.9 → 0.21.0

package/src/web/components/os-explorer/views/list-view.tsx

@@ -8,7 +8,7 @@
 
 import { useEffect, useMemo, useRef } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { ChevronDown, ChevronUp } from "lucide-react";
+import { ChevronDown, ChevronUp } from "@/lib/icons";
 import { ContextMenu, ContextMenuTrigger } from "@/components/ui/adaptive-context-menu";
 import { useFileStore } from "@/stores/file-store";
 import { cn } from "@/lib/utils";

package/src/web/components/postgres/postgres-viewer.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useMemo, useEffect, useRef, lazy, Suspense } from "react";
-import { Database, Loader2, AlertCircle, Play, ChevronLeft, ChevronRight, Table, RefreshCw } from "lucide-react";
+import { Database, Loader2, AlertCircle, Play, ChevronLeft, ChevronRight, Table, RefreshCw } from "@/lib/icons";
 import { useReactTable, getCoreRowModel, flexRender, type ColumnDef } from "@tanstack/react-table";
 const CodeMirror = lazy(() => import("@uiw/react-codemirror"));
 import { sql, PostgreSQL } from "@codemirror/lang-sql";

package/src/web/components/problems/problems-panel.tsx

@@ -0,0 +1,230 @@
+/**
+ * Every diagnostic from every open file, grouped by file — VS Code's Problems
+ * panel.
+ *
+ * The squiggles in the editor already say what is wrong with the file in front
+ * of you. This answers the other question: what is wrong anywhere. Without it,
+ * an error in a file you are not looking at is invisible until you happen to
+ * open it, which is the failure mode a Problems list exists to remove.
+ *
+ * It lives in the dock — the panel under the editor — which is where VS Code
+ * puts it, and it is opened the same way: by clicking the error and warning
+ * counts at the left of the status bar.
+ *
+ * The list is bounded by what the language servers have told us about, which is
+ * the files that are open. That is narrower than VS Code, whose TypeScript
+ * extension can be asked to check the whole project, and it is stated in the
+ * empty state rather than left for the user to work out.
+ */
+import { useMemo, useState } from "react";
+import { AlertTriangle, ChevronDown, ChevronRight, CircleX, Info, Lightbulb } from "@/lib/icons";
+import { useShallow } from "zustand/react/shallow";
+import { usePanelStore } from "@/stores/panel-store";
+import { useProjectStore } from "@/stores/project-store";
+import { useProblemsStore, filesForProject, problemCounts, problemKey, sortedProblems, type FileProblems } from "@/stores/problems-store";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import type { LspDiagnostic } from "@/hooks/use-lsp";
+import { cn } from "@/lib/utils";
+import { FileIcon } from "@/lib/file-icons";
+
+export function ProblemsPanel() {
+  const allFiles = useProblemsStore(useShallow((s) => s.files));
+  const activeProjectName = useProjectStore((s) => s.activeProject?.name ?? null);
+  const isMobile = useIsMobile();
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+  const [query, setQuery] = useState("");
+
+  const files = useMemo(() => filesForProject(allFiles, activeProjectName), [allFiles, activeProjectName]);
+
+  const groups = useMemo(() => {
+    const all = sortedProblems(files);
+    const needle = query.trim().toLowerCase();
+    if (!needle) return all;
+    // Path, message and rule together, so "use-lsp", "not assignable" and the
+    // `ts(2322)` the row displays all narrow the list. The code is a field of
+    // its own and is not in the message, so matching only the message would
+    // leave the most precise thing on screen unsearchable.
+    return all
+      .map((file) => ({
+        ...file,
+        diagnostics: file.filePath.toLowerCase().includes(needle)
+          ? file.diagnostics
+          : file.diagnostics.filter((d) => matches(d, needle)),
+      }))
+      .filter((file) => file.diagnostics.length > 0);
+  }, [files, query]);
+
+  const totals = useMemo(() => problemCounts(files), [files]);
+  const shown = groups.reduce((sum, file) => sum + file.diagnostics.length, 0);
+
+  function jump(file: FileProblems, diagnostic: LspDiagnostic) {
+    const { grid, focusedPanelId, openTab } = usePanelStore.getState();
+    // Clicking this panel's own tab focuses the dock, and `openTab` with no
+    // target opens into the focused panel — which would put the editor inside
+    // the dock, where `DOCK_ALLOWED_TAB_TYPES` does not even permit it. So the
+    // target is named: the focused panel when it is one of the grid's, else the
+    // first.
+    const onGrid = grid.flat();
+    const target = onGrid.includes(focusedPanelId) ? focusedPanelId : onGrid[0];
+
+    openTab({
+      type: "editor",
+      title: file.filePath.split("/").pop() ?? file.filePath,
+      // `lineNumber` is the metadata key PPM's tabs already reveal on, shared
+      // with the search panel and chat's file:line links.
+      metadata: {
+        filePath: file.filePath,
+        projectName: file.projectName,
+        lineNumber: diagnostic.range.start.line + 1,
+      },
+      projectId: file.projectName,
+      closable: true,
+    }, target);
+  }
+
+  function toggle(key: string) {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }
+
+  if (Object.keys(files).length === 0) {
+    return (
+      <div className="p-4 space-y-2">
+        <p className="text-xs text-text-subtle">No problems have been detected in the open files.</p>
+        <p className="text-[11px] text-text-subtle/70 leading-relaxed">
+          Diagnostics come from the language server for each file you open, so a file that has
+          never been opened is not checked.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="shrink-0 p-2 space-y-2 border-b border-border-soft">
+        <div className="flex items-center gap-3 text-[11px] text-text-3">
+          <span className="flex items-center gap-1">
+            <CircleX className="size-3 text-error" />
+            {totals.errors}
+          </span>
+          <span className="flex items-center gap-1">
+            <AlertTriangle className="size-3 text-warning" />
+            {totals.warnings}
+          </span>
+          <span className="ml-auto text-text-subtle">
+            {groups.length} file{groups.length === 1 ? "" : "s"}
+          </span>
+        </div>
+        <input
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Filter problems"
+          className={cn(
+            "w-full rounded border border-border bg-surface px-2 text-xs outline-none focus:border-primary",
+            isMobile ? "min-h-11" : "py-1",
+          )}
+        />
+      </div>
+
+      <div className="flex-1 overflow-y-auto min-h-0">
+        {shown === 0 && (
+          <p className="p-4 text-xs text-text-subtle">No problems match “{query.trim()}”.</p>
+        )}
+        {groups.map((file) => {
+          const key = problemKey(file.projectName, file.filePath);
+          const isCollapsed = collapsed.has(key);
+          return (
+            <div key={key}>
+              <button
+                type="button"
+                onClick={() => toggle(key)}
+                className={cn(
+                  "w-full flex items-center gap-1 px-2 text-left hover:bg-surface-elevated transition-colors",
+                  isMobile ? "min-h-11" : "py-1",
+                )}
+              >
+                {isCollapsed ? (
+                  <ChevronRight className="size-3 shrink-0 text-text-subtle" />
+                ) : (
+                  <ChevronDown className="size-3 shrink-0 text-text-subtle" />
+                )}
+                <FileIcon name={file.filePath} className="size-3.5" />
+                <span className="text-xs truncate">{file.filePath.split("/").pop()}</span>
+                <span className="text-[10px] text-text-subtle truncate min-w-0">
+                  {dirOf(file.filePath)}
+                </span>
+                <span className="ml-auto shrink-0 rounded-full bg-surface-elevated px-1.5 text-[10px] text-text-3">
+                  {file.diagnostics.length}
+                </span>
+              </button>
+
+              {!isCollapsed &&
+                file.diagnostics.map((diagnostic, index) => (
+                  <button
+                    key={`${diagnostic.range.start.line}:${diagnostic.range.start.character}:${index}`}
+                    type="button"
+                    onClick={() => jump(file, diagnostic)}
+                    title={diagnostic.message}
+                    className={cn(
+                      "w-full flex items-start gap-1.5 pl-6 pr-2 text-left hover:bg-surface-elevated transition-colors",
+                      isMobile ? "min-h-11 py-2" : "py-0.5",
+                    )}
+                  >
+                    <SeverityIcon severity={diagnostic.severity} />
+                    <span
+                      className={cn(
+                        "flex-1 min-w-0 text-xs text-text-2",
+                        // One line on a pointer device to keep the list dense,
+                        // wrapped on touch where there is no tooltip to fall
+                        // back on for the rest of the message.
+                        isMobile ? "break-words" : "truncate",
+                      )}
+                    >
+                      {diagnostic.message}
+                    </span>
+                    <span className="shrink-0 text-[10px] text-text-subtle font-mono pt-px">
+                      {sourceLabel(diagnostic)}
+                      {diagnostic.range.start.line + 1}:{diagnostic.range.start.character + 1}
+                    </span>
+                  </button>
+                ))}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function matches(diagnostic: LspDiagnostic, needle: string): boolean {
+  return (
+    diagnostic.message.toLowerCase().includes(needle) ||
+    (diagnostic.source?.toLowerCase().includes(needle) ?? false) ||
+    String(diagnostic.code ?? "").toLowerCase().includes(needle)
+  );
+}
+
+function SeverityIcon({ severity }: { severity?: number }) {
+  if (severity === 2) return <AlertTriangle className="size-3 shrink-0 text-warning mt-px" />;
+  if (severity === 3) return <Info className="size-3 shrink-0 text-info mt-px" />;
+  if (severity === 4) return <Lightbulb className="size-3 shrink-0 text-text-subtle mt-px" />;
+  // Severity is optional in LSP and means "error" when absent.
+  return <CircleX className="size-3 shrink-0 text-error mt-px" />;
+}
+
+/** `ts(2322) ` — the server and rule that produced it, as VS Code shows it. */
+function sourceLabel(diagnostic: LspDiagnostic): string {
+  if (!diagnostic.source) return "";
+  return diagnostic.code === undefined
+    ? `${diagnostic.source} `
+    : `${diagnostic.source}(${diagnostic.code}) `;
+}
+
+function dirOf(path: string): string {
+  const index = path.lastIndexOf("/");
+  return index < 0 ? "" : path.slice(0, index);
+}

package/src/web/components/problems/problems-status.tsx

@@ -0,0 +1,53 @@
+/**
+ * The error and warning counts, and the one action that opens the list.
+ *
+ * VS Code puts these at the far left of the status bar and opens the Problems
+ * panel when they are clicked; this is that, in the same place, doing the same
+ * thing. Both counts are shown even at zero, because "0 errors" is information
+ * and a control that disappears when everything is fine is one the user never
+ * learns is there.
+ */
+import { memo, useCallback } from "react";
+import { AlertTriangle, CircleX } from "@/lib/icons";
+import { useShallow } from "zustand/react/shallow";
+import { usePanelStore } from "@/stores/panel-store";
+import { useProblemsStore, filesForProject, problemCounts } from "@/stores/problems-store";
+import { useProjectStore } from "@/stores/project-store";
+import { cn } from "@/lib/utils";
+
+/** Open the Problems list in the dock, or focus it if it is already there. */
+export function useOpenProblems(): () => void {
+  const openInDock = usePanelStore((s) => s.openInDock);
+
+  return useCallback(() => {
+    // `deriveTabId` gives this type a fixed id, so a second call focuses the
+    // existing tab rather than stacking another list beside it.
+    openInDock({ type: "problems", title: "Problems", projectId: null, closable: true });
+  }, [openInDock]);
+}
+
+export const ProblemsStatus = memo(function ProblemsStatus() {
+  const files = useProblemsStore(useShallow((s) => s.files));
+  const activeProjectName = useProjectStore((s) => s.activeProject?.name ?? null);
+  const openProblems = useOpenProblems();
+  // Scoped to the active project, so these counts and the panel's list agree.
+  const { errors, warnings } = problemCounts(filesForProject(files, activeProjectName));
+
+  return (
+    <button
+      onClick={openProblems}
+      title={`${errors} error${errors === 1 ? "" : "s"}, ${warnings} warning${warnings === 1 ? "" : "s"} — open the Problems panel`}
+      aria-label="Open the Problems panel"
+      className="flex items-center gap-2 px-1 rounded-sm transition-colors hover:bg-accent/15 hover:text-text-primary shrink-0"
+    >
+      <span className={cn("flex items-center gap-1", errors > 0 && "text-error")}>
+        <CircleX className="size-[11px]" />
+        {errors}
+      </span>
+      <span className={cn("flex items-center gap-1", warnings > 0 && "text-warning")}>
+        <AlertTriangle className="size-[11px]" />
+        {warnings}
+      </span>
+    </button>
+  );
+});

package/src/web/components/projects/dir-suggest.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from "react";
-import { FolderGit2, Loader2 } from "lucide-react";
+import { FolderGit2, Loader2 } from "@/lib/icons";
 import { api } from "@/lib/api-client";
 import { Input } from "@/components/ui/input";
 import { BrowseButton } from "@/components/ui/browse-button";

package/src/web/components/projects/project-list.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback } from "react";
-import { FolderOpen, GitBranch, Circle, Plus, Pencil, Trash2 } from "lucide-react";
+import { FolderOpen, GitBranch, Circle, Plus, Pencil, Trash2 } from "@/lib/icons";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
 import { api } from "@/lib/api-client";

package/src/web/components/remote-desktop/remote-desktop-mobile-toolbar.tsx

@@ -3,7 +3,7 @@
  * virtual keyboard, zoom reset, close. Every button is a 44px+ touch target per
  * `docs/design-guidelines.md`'s Mobile-First UI Rules.
  */
-import { Hand, MousePointer2, Keyboard, ZoomOut, Gauge, Monitor, X } from "lucide-react";
+import { Hand, MousePointer2, Keyboard, ZoomOut, Gauge, Monitor, X } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { useSettingsStore } from "@/stores/settings-store";
 import type { RemoteDesktopInputMode } from "./use-remote-desktop-touch";

package/src/web/components/remote-desktop/remote-desktop-mobile-view.tsx

@@ -7,7 +7,7 @@
  * parallel connection implementation.
  */
 import { useRef, useState, useCallback } from "react";
-import { RotateCw, MonitorX } from "lucide-react";
+import { RotateCw, MonitorX } from "@/lib/icons";
 import { useVisualViewport } from "@/hooks/use-visual-viewport";
 import { useRemoteDesktopConnection } from "./use-remote-desktop-connection";
 import { useRemoteDesktopTouch, type RemoteDesktopInputMode } from "./use-remote-desktop-touch";

package/src/web/components/remote-desktop/remote-desktop-readiness-gate.tsx

@@ -9,7 +9,7 @@
  * client). Same dark chrome and ≥44px targets as the warning gate, both surfaces.
  */
 import { useState, type ReactNode } from "react";
-import { CheckCircle2, Circle, ExternalLink, Loader2, MonitorSmartphone, TerminalSquare } from "lucide-react";
+import { CheckCircle2, Circle, ExternalLink, Loader2, MonitorSmartphone, TerminalSquare } from "@/lib/icons";
 import { runInTerminal } from "@/lib/run-in-terminal";
 import { useRemoteDesktopReadiness, type RemoteDesktopRequirement, type RequirementAction } from "./use-remote-desktop-readiness";
 

package/src/web/components/remote-desktop/remote-desktop-warning-gate.tsx

@@ -10,7 +10,7 @@
  * will be, on both surfaces.
  */
 import { useState, type ReactNode } from "react";
-import { MonitorSmartphone, ShieldAlert } from "lucide-react";
+import { MonitorSmartphone, ShieldAlert } from "@/lib/icons";
 import { useSettingsStore } from "@/stores/settings-store";
 
 export interface RemoteDesktopWarningGateProps {

package/src/web/components/remote-desktop/remote-desktop-window-content.tsx

@@ -6,7 +6,7 @@
  * user has read the warning.
  */
 import { useCallback, useRef } from "react";
-import { RotateCw, MonitorX, Gauge } from "lucide-react";
+import { RotateCw, MonitorX, Gauge } from "@/lib/icons";
 import type { WindowContentProps } from "@/components/floating-window/window-content-registry";
 import { useWindowStore } from "@/components/floating-window/window-store";
 import { useSettingsStore } from "@/stores/settings-store";

package/src/web/components/root-error-boundary.tsx

@@ -0,0 +1,116 @@
+/**
+ * The boundary above everything, so a render error is a message rather than a
+ * blank page.
+ *
+ * React unmounts the entire tree when a throw reaches the root — `#root` is
+ * emptied, and what is left on screen is the body's background gradient and
+ * nothing else: no text, no button, no hint that a reload would help. That is
+ * the white screen, and every lazily-loaded tab is one missing chunk away from
+ * it (`tab-pool.tsx` alone has sixteen).
+ *
+ * Styled inline rather than with the app's classes. This is the fallback for
+ * "the app failed to load its own code", and a stylesheet is code too: the one
+ * component whose job is to work when something did not must not depend on a
+ * chunk having arrived. The tokens are read with CSS fallbacks for the same
+ * reason.
+ */
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { isChunkLoadError, purgeAndReload } from "@/lib/chunk-recovery";
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  error: Error | null;
+  stale: boolean;
+}
+
+const page: React.CSSProperties = {
+  minHeight: "100dvh",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "24px",
+  // Its own background: if the stylesheet was the chunk that went missing,
+  // `var(--bg)` on <body> resolves to nothing and dark-mode text would be
+  // white on white.
+  background: "var(--bg-solid, #0a0e17)",
+  color: "var(--text, #eaeefb)",
+  font: "16px/1.5 system-ui, sans-serif",
+};
+
+const card: React.CSSProperties = {
+  width: "100%",
+  maxWidth: "440px",
+  background: "var(--panel, #141820)",
+  border: "1px solid var(--border, rgba(255,255,255,0.12))",
+  borderRadius: "var(--rad, 18px)",
+  padding: "24px",
+};
+
+const button: React.CSSProperties = {
+  // 44px is the touch-target floor in docs/design-guidelines.md, and this
+  // button is the only way out of the screen it appears on.
+  minHeight: "44px",
+  width: "100%",
+  marginTop: "20px",
+  padding: "0 20px",
+  border: "none",
+  borderRadius: "var(--rad-sm, 12px)",
+  background: "var(--accent, #5b8cff)",
+  color: "var(--accent-fg, #fff)",
+  font: "inherit",
+  fontWeight: 600,
+  cursor: "pointer",
+};
+
+const details: React.CSSProperties = {
+  marginTop: "16px",
+  maxHeight: "8lh",
+  overflow: "auto",
+  color: "var(--text-2, #9aa6c2)",
+  fontFamily: "ui-monospace, monospace",
+  fontSize: "13px",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+};
+
+export class RootErrorBoundary extends Component<Props, State> {
+  override state: State = { error: null, stale: false };
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error, stale: isChunkLoadError(error) };
+  }
+
+  override componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error("[ppm] unhandled render error", error, info.componentStack);
+  }
+
+  override render() {
+    const { error, stale } = this.state;
+    if (!error) return this.props.children;
+
+    return (
+      <div style={page}>
+        <div style={card} role="alert">
+          <h1 style={{ margin: 0, fontSize: "18px", fontWeight: 600 }}>
+            {stale ? "PPM has been updated" : "Something went wrong"}
+          </h1>
+          <p style={{ margin: "12px 0 0", color: "var(--text-2, #9aa6c2)" }}>
+            {stale
+              ? "This tab is still running an older version and asked for a file that no longer exists. Reloading picks up the new one."
+              : "The page could not finish rendering. Reloading usually clears it."}
+          </p>
+          {/* The message, not the stack: the stack is a minified chunk name and
+              tells the person reading it nothing, while `console.error` above
+              has kept the whole thing for anyone who opens devtools. */}
+          {!stale && <div style={details}>{error.message}</div>}
+          <button type="button" style={button} onClick={() => void purgeAndReload()}>
+            Reload
+          </button>
+        </div>
+      </div>
+    );
+  }
+}

package/src/web/components/settings/accounts/account-add-dialog.tsx

@@ -3,7 +3,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Di
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Loader2 } from "lucide-react";
+import { Loader2 } from "@/lib/icons";
 import { addAccount, getOAuthUrl, exchangeOAuthCode } from "../../../lib/api-settings";
 
 // ── Add Account Dialog ─────────────────────────────────────────────

package/src/web/components/settings/accounts/account-card.tsx

@@ -18,7 +18,7 @@
  * while every turn on them failed. The sign-in deadline replaced it.
  */
 
-import { CircleHelp, Download, Eye, KeyRound, RefreshCw, Trash2 } from "lucide-react";
+import { CircleHelp, Download, Eye, KeyRound, RefreshCw, Trash2 } from "@/lib/icons";
 import { Switch } from "@/components/ui/switch";
 import type { AccountInfo, AccountUsageEntry, OAuthProfileData } from "../../../lib/api-settings";
 import { AccountBucketRow } from "./account-bucket-row";

package/src/web/components/settings/accounts/account-export-dialog.tsx

@@ -3,7 +3,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Di
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Loader2, Download, Copy, Lock } from "lucide-react";
+import { Loader2, Download, Copy, Lock } from "@/lib/icons";
 import { getAuthToken } from "../../../lib/api-client";
 import { copyToClipboard } from "@/lib/clipboard";
 import type { AccountInfo } from "../../../lib/api-settings";

package/src/web/components/settings/accounts/account-export-simulation.tsx

@@ -11,7 +11,7 @@
  */
 
 import { useState } from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2 } from "@/lib/icons";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";

package/src/web/components/settings/accounts/account-import-dialog.tsx

@@ -3,7 +3,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Di
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Loader2, Lock } from "lucide-react";
+import { Loader2, Lock } from "@/lib/icons";
 import { importAccounts } from "../../../lib/api-settings";
 import { DEFAULT_PASSWORD } from "./account-backup-format";
 

package/src/web/components/settings/accounts/account-profile-panel.tsx

@@ -6,7 +6,7 @@
  * for a personal account and should not leave labelled blanks on screen.
  */
 
-import { X } from "lucide-react";
+import { X } from "@/lib/icons";
 import type { OAuthProfileData } from "../../../lib/api-settings";
 import { UsagePatternChart } from "./account-usage-pattern-chart";
 

package/src/web/components/settings/accounts/account-rotation-settings.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useSyncExternalStore } from "react";
-import { Settings, X } from "lucide-react";
+import { Settings, X } from "@/lib/icons";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";

package/src/web/components/settings/accounts/account-token-test-dialog.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useState } from "react";
-import { FlaskConical, Loader2 } from "lucide-react";
+import { FlaskConical, Loader2 } from "@/lib/icons";
 import {
   Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
 } from "@/components/ui/dialog";

package/src/web/components/settings/accounts/account-usage-pattern-chart.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo } from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2 } from "@/lib/icons";
 import { getUsageHistory, type UsageSnapshot } from "../../../lib/api-settings";
 
 const DAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

package/src/web/components/settings/accounts/accounts-pane-header.tsx

@@ -6,7 +6,7 @@
  * forms inline down the page — and switching tabs looked like switching apps.
  */
 
-import { RefreshCw, X } from "lucide-react";
+import { RefreshCw, X } from "@/lib/icons";
 import { Button } from "@/components/ui/button";
 
 export function AccountsPaneHeader({ description, onRefresh, refreshing, disabled, actions }: {

package/src/web/components/settings/accounts/accounts-settings-section.tsx

@@ -13,7 +13,7 @@
  */
 
 import { useEffect, useState } from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2 } from "@/lib/icons";
 import { ProviderBadge } from "@/components/chat/provider-selector";
 import { getAISettings } from "../../../lib/api-settings";
 import { ClaudeAccountsSection } from "./claude-accounts-section";

package/src/web/components/settings/accounts/claude-accounts-section.tsx

@@ -8,7 +8,15 @@
  */
 
 import { useState } from "react";
-import { Download, KeyRound, Loader2, Plus, Settings, Upload, FlaskConical } from "lucide-react";
+import {
+  Download,
+  KeyRound,
+  Loader2,
+  Plus,
+  Settings,
+  Upload,
+  FlaskConical,
+} from "@/lib/icons";
 import { Button } from "@/components/ui/button";
 import { AccountCardRow, AccountsPaneHeader, AccountsPaneMessage } from "./accounts-pane-header";
 import { patchAccount, deleteAccount, type OAuthProfileData } from "../../../lib/api-settings";

package/src/web/components/settings/accounts/codex-accounts-section.tsx

@@ -7,7 +7,16 @@
  */
 
 import { useState } from "react";
-import { CircleHelp, Download, KeyRound, Loader2, Plus, Settings, Trash2, Upload } from "lucide-react";
+import {
+  CircleHelp,
+  Download,
+  KeyRound,
+  Loader2,
+  Plus,
+  Settings,
+  Trash2,
+  Upload,
+} from "@/lib/icons";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";

package/src/web/components/settings/accounts/codex-add-account-dialog.tsx

@@ -1,6 +1,6 @@
 /** Add a Codex account through browser login, device code, or an API key. */
 
-import { ExternalLink, KeyRound, Loader2, MonitorSmartphone } from "lucide-react";
+import { ExternalLink, KeyRound, Loader2, MonitorSmartphone } from "@/lib/icons";
 import {
   Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
 } from "@/components/ui/dialog";

package/src/web/components/settings/accounts/codex-backup-dialog.tsx

@@ -10,7 +10,7 @@
  */
 
 import { useRef } from "react";
-import { Download, Loader2, Lock, Upload } from "lucide-react";
+import { Download, Loader2, Lock, Upload } from "@/lib/icons";
 import {
   Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
 } from "@/components/ui/dialog";