@hienlh/ppm 0.20.10 → 0.21.0

package/src/shared/blame.ts

@@ -77,3 +77,54 @@ export function formatRelativeTime(timestampMs: number, now: number = Date.now()
   }
   return "just now";
 }
+
+/**
+ * What the editor's blame hover shows beyond the one-line annotation: the whole
+ * commit message, and the change the commit made to the hovered line.
+ *
+ * Separate from `BlameCommitInfo` because it costs a `git show` per commit,
+ * where the annotation costs one `git blame` per file. It is fetched for the
+ * line the cursor is on and nothing else.
+ */
+export interface BlameLineDetail {
+  hash: string;
+  author: string;
+  authorMail: string;
+  /** Unix seconds. */
+  authorTime: number;
+  /** Subject and body, as committed. */
+  message: string;
+  /** What the commit removed at this line, capped. */
+  removed: string[];
+  /** The line as this commit wrote it. */
+  added: string[];
+}
+
+/**
+ * The absolute date beside the relative one, in GitLens' wording:
+ * "December 2nd, 2025 4:17 PM". Both are shown because "9 months ago" is the
+ * useful reading and the exact date is the one you need to go looking for a
+ * commit.
+ *
+ * Built by hand rather than with `toLocaleString`, whose output depends on the
+ * host's locale and would make the format untestable and inconsistent between
+ * the machine serving PPM and the phone reading it.
+ */
+export function formatAbsoluteTime(timestampMs: number): string {
+  const d = new Date(timestampMs);
+  const months = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December",
+  ];
+  const day = d.getDate();
+  const hour12 = d.getHours() % 12 || 12;
+  const minute = String(d.getMinutes()).padStart(2, "0");
+  const meridiem = d.getHours() < 12 ? "AM" : "PM";
+  return `${months[d.getMonth()]} ${day}${ordinalSuffix(day)}, ${d.getFullYear()} ${hour12}:${minute} ${meridiem}`;
+}
+
+function ordinalSuffix(day: number): string {
+  // 11th, 12th, 13th are the exceptions to the last-digit rule.
+  if (day % 100 >= 11 && day % 100 <= 13) return "th";
+  return ["th", "st", "nd", "rd"][day % 10] ?? "th";
+}

package/src/shared/lsp-uri.ts

@@ -0,0 +1,108 @@
+/**
+ * `file:` URI conversion, shared because both sides need it: the server hands
+ * document URIs to language servers, and the browser turns a URI a server
+ * returned (a definition, a diagnostic, a reference) back into a path it can
+ * open a tab for.
+ *
+ * The encoding deliberately matches what VS Code puts on the wire, because
+ * that is what every language server has been tested against:
+ *
+ *   /home/ada/a b/c.ts   ->  file:///home/ada/a%20b/c.ts
+ *   C:\Users\ada\b.ts    ->  file:///c%3A/Users/ada/b.ts
+ *
+ * Two details that look like details and are not:
+ *
+ * - The Windows drive letter is lower-cased. The same file reached as `C:\` and
+ *   `c:\` must produce one URI, or a diagnostic published for one spelling never
+ *   clears the markers set under the other.
+ * - `/` is not escaped but everything else in a segment is, so a `#` or `?` in a
+ *   filename cannot truncate the URI into a fragment or a query.
+ */
+
+/** True for a Windows-style absolute path such as `C:\x` or `C:/x`. */
+function isWindowsAbsolute(path: string): boolean {
+  return /^[A-Za-z]:[\\/]/.test(path);
+}
+
+export function pathToFileUri(path: string): string {
+  const withSlashes = path.replace(/\\/g, "/");
+
+  if (isWindowsAbsolute(withSlashes)) {
+    const drive = withSlashes[0]!.toLowerCase();
+    const rest = withSlashes.slice(2); // drop "C:"
+    return `file:///${drive}%3A${encodePath(rest)}`;
+  }
+
+  // A UNC path (\\server\share) becomes an authority.
+  if (withSlashes.startsWith("//")) {
+    const [, , authority = "", ...segments] = withSlashes.split("/");
+    return `file://${encodeURIComponent(authority)}${encodePath(`/${segments.join("/")}`)}`;
+  }
+
+  return `file://${encodePath(withSlashes)}`;
+}
+
+/** Percent-encode each segment, leaving the separators alone. */
+function encodePath(path: string): string {
+  return path.split("/").map((segment) => encodeURIComponent(segment)).join("/");
+}
+
+/**
+ * Turn a `file:` URI back into an OS path. Returns null for any other scheme —
+ * servers legitimately emit `untitled:` and their own custom schemes, and
+ * treating one of those as a path would open a tab for a file that never
+ * existed.
+ */
+export function fileUriToPath(uri: string): string | null {
+  if (!uri.startsWith("file:")) return null;
+
+  // file:///x, file://host/x, and the malformed-but-common file:/x.
+  let rest = uri.slice("file:".length);
+  let authority = "";
+  if (rest.startsWith("//")) {
+    rest = rest.slice(2);
+    const slash = rest.indexOf("/");
+    authority = slash < 0 ? rest : rest.slice(0, slash);
+    rest = slash < 0 ? "" : rest.slice(slash);
+  }
+
+  const decoded = rest.split("/").map(decodeSegment).join("/");
+
+  // A drive letter arrives as "/c:/Users/..." and has to lose the leading slash.
+  if (/^\/[A-Za-z]:/.test(decoded)) {
+    return decoded.slice(1);
+  }
+  if (authority) {
+    return `//${decodeSegment(authority)}${decoded}`;
+  }
+  return decoded;
+}
+
+function decodeSegment(segment: string): string {
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    // A stray "%" that is not an escape — keep the segment verbatim rather than
+    // losing the whole path.
+    return segment;
+  }
+}
+
+/**
+ * A comparison key for two URIs that name the same file.
+ *
+ * Servers do not always echo a URI back byte for byte: casing of an escape
+ * (`%3a` vs `%3A`), an unescaped colon, or a Windows drive in the other case
+ * all appear in practice. Diagnostics are keyed by URI, so two spellings of one
+ * file means markers that are set twice and cleared never.
+ */
+export function uriKey(uri: string): string {
+  const path = fileUriToPath(uri);
+  if (path === null) return uri;
+  const normalized = path.replace(/\\/g, "/");
+  return isWindowsAbsolute(normalized)
+    // Windows paths are case-insensitive; POSIX paths are not, so only the
+    // drive letter is folded.
+    ? `${normalized[0]!.toLowerCase()}${normalized.slice(1)}`
+    : normalized;
+}

package/src/web/app.tsx

@@ -40,6 +40,7 @@ import { useExtensionWs } from "@/hooks/use-extension-ws";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { UploadProgressPanel } from "@/components/os-explorer/upload/upload-progress-panel";
 import { cn } from "@/lib/utils";
+import { isRecoveryReloadPending } from "@/lib/chunk-recovery";
 
 // Lazy: the explorer feature (views, actions, skins, icon map) is the same heavy bundle the
 // desktop floating window already keeps out of the initial chunk (see `WINDOW_CONTENT`) —
@@ -148,6 +149,11 @@ export function App() {
   useEffect(() => {
     if (authState !== "authenticated") return;
     const handler = (e: BeforeUnloadEvent) => {
+      // Except when the app is reloading itself out of a missing chunk. This
+      // fires from `vite:preloadError`, before the throw unmounts anything, so
+      // the guard is still installed — and "Leave site?" in front of an
+      // automatic recovery is a question the user cannot answer usefully.
+      if (isRecoveryReloadPending()) return;
       e.preventDefault();
     };
     window.addEventListener("beforeunload", handler);

package/src/web/components/ai-resources/ai-resource-editor.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback, useRef } from "react";
 import Editor from "@monaco-editor/react";
-import { Save, Undo2, Loader2, AlertTriangle, Lock } from "lucide-react";
+import { Save, Undo2, Loader2, AlertTriangle, Lock } from "@/lib/icons";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
 import { useAiResourcesStore } from "@/stores/ai-resources-store";
 import { readAiResource, writeAiResource, type AiResourceType, type AiResourceScope } from "@/lib/api-ai-resources";

package/src/web/components/ai-resources/ai-resources-panel.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
-import { RefreshCw, Search, Sparkles, FolderOpen } from "lucide-react";
+import { RefreshCw, Search, Sparkles, FolderOpen } from "@/lib/icons";
 import { SidebarHeader } from "@/components/ui/sidebar-header";
 import { useShallow } from "zustand/react/shallow";
 import { useProjectStore } from "@/stores/project-store";

package/src/web/components/ai-resources/mcp-group.tsx

@@ -1,4 +1,4 @@
-import { Plug, Plus, Download } from "lucide-react";
+import { Plug, Plus, Download } from "@/lib/icons";
 import {
   ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator,
 } from "@/components/ui/adaptive-context-menu";

package/src/web/components/ai-resources/new-resource-menu.tsx

@@ -1,4 +1,4 @@
-import { Plus, Hexagon, Bot, SquareTerminal, Plug, Download } from "lucide-react";
+import { Plus, Hexagon, Bot, SquareTerminal, Plug, Download } from "@/lib/icons";
 import {
   DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";

package/src/web/components/ai-resources/resource-visuals.tsx

@@ -1,4 +1,4 @@
-import { Hexagon, Bot, SquareTerminal } from "lucide-react";
+import { Hexagon, Bot, SquareTerminal } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import type { AiResourceType, AiResourceScope } from "@/lib/api-ai-resources";
 

package/src/web/components/auth/login-screen.tsx

@@ -11,7 +11,7 @@ import {
   Bug,
   Github,
   Coffee,
-} from "lucide-react";
+} from "@/lib/icons";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { openBugReportPopup } from "@/lib/report-bug";

package/src/web/components/auth/support-dialog.tsx

@@ -5,7 +5,7 @@
  * mobile. Adaptive shell — Dialog on desktop, BottomSheet on mobile.
  */
 import { useState } from "react";
-import { Globe, Heart, QrCode } from "lucide-react";
+import { Globe, Heart, QrCode } from "@/lib/icons";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { Button } from "@/components/ui/button";

package/src/web/components/chat/attachment-chips.tsx

@@ -1,5 +1,8 @@
-import { useState } from "react";
-import { X, FileText, Image as ImageIcon, Loader2, TerminalSquare, ChevronDown } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { X, FileText, Image as ImageIcon, Loader2, TerminalSquare, ChevronDown } from "@/lib/icons";
+import { useImageOverlay } from "@/stores/image-overlay-store";
+import { collectGallery, GALLERY_ITEM_ATTR, GALLERY_ROOT_ATTR } from "@/lib/image-gallery";
+import { usePrefersCoarsePointer } from "@/components/os-explorer/use-coarse-long-press";
 import { cn } from "@/lib/utils";
 import type { ChatAttachment } from "./message-input";
 
@@ -10,14 +13,70 @@ interface AttachmentChipsProps {
 
 export function AttachmentChips({ attachments, onRemove }: AttachmentChipsProps) {
   const [expandedId, setExpandedId] = useState<string | null>(null);
+  const coarse = usePrefersCoarsePointer();
+
+  // Every preview URL this component has handed to the lightbox, mapped back to the
+  // attachment it belongs to. Keyed by URL rather than tracking one "currently
+  // viewing" id, because the arrow keys move the viewer between attachments and a
+  // single remembered id stops describing what is on screen the moment they are used.
+  const owned = useRef(new Map<string, string>());
+  const openOverlay = useImageOverlay((s) => s.open);
+  const closeOverlay = useImageOverlay((s) => s.close);
+  const overlaySrc = useImageOverlay((s) => s.src);
+
+  /**
+   * A preview URL is not stable for the life of the attachment, so an open lightbox has
+   * to follow it. `processFiles` creates one from the file as pasted, then downscales,
+   * then revokes the first and points the chip at the reduced copy — and clicking the
+   * thumbnail the moment a screenshot is pasted lands inside exactly that window.
+   * Removing the attachment, or sending the message, revokes it outright.
+   *
+   * A revoked blob URL does not raise anything. It renders as a broken image inside the
+   * viewer, with nothing to say why, so the two cases are handled apart: a URL that was
+   * replaced is followed, and one whose attachment is gone closes the viewer.
+   */
+  useEffect(() => {
+    if (!overlaySrc) return;
+    const id = owned.current.get(overlaySrc);
+    if (!id) return; // Showing something else entirely — a transcript image.
+    const att = attachments.find((a) => a.id === id);
+    if (!att?.previewUrl) return closeOverlay();
+    if (att.previewUrl !== overlaySrc) {
+      owned.current.set(att.previewUrl, att.id);
+      openOverlay(att.previewUrl, att.name);
+    }
+  }, [attachments, overlaySrc, openOverlay, closeOverlay]);
 
   if (attachments.length === 0) return null;
 
   const expanded = expandedId ? attachments.find((a) => a.id === expandedId) : null;
 
+  function preview(att: ChatAttachment, target: Element) {
+    if (!att.previewUrl) return;
+    // The gallery is every other image waiting in the composer, so a batch of pasted
+    // screenshots is walked with the arrow keys instead of closed and reopened one at a
+    // time. Every one of them is claimed, not just the one clicked, because any of them
+    // can become the image on screen without this component hearing about it.
+    for (const a of attachments) if (a.previewUrl) owned.current.set(a.previewUrl, a.id);
+    openOverlay(att.previewUrl, att.name, collectGallery(target));
+  }
+
   return (
     <div className="px-2 md:px-4 pt-2">
-      <div className="flex flex-wrap gap-1.5">
+      {/*
+        The row gap is the wrapped case of the target arithmetic below. A chip is
+        26-30px tall and its targets are 44, so each one reaches ~7-9px past the
+        chip on both sides — which is fine along a single row, where the spacing
+        was measured, and is not fine once the chips wrap: at `gap-1.5` two rows'
+        targets overlapped by about 8px, and a tap under one chip's X landed on
+        the preview of the chip below it. 20px clears the worst case (a chip with
+        no thumbnail, which is shortest and still carries a 44px remove target),
+        and only on a coarse pointer, where the targets exist at all.
+      */}
+      <div
+        className={cn("flex flex-wrap gap-1.5", coarse && "gap-y-5")}
+        {...{ [GALLERY_ROOT_ATTR]: "" }}
+      >
         {attachments.map((att) => (
           <div
             key={att.id}
@@ -32,7 +91,45 @@ export function AttachmentChips({ attachments, onRemove }: AttachmentChipsProps)
           >
             {/* Thumbnail or icon */}
             {att.previewUrl ? (
-              <img src={att.previewUrl} alt={att.name} className="size-5 rounded object-cover shrink-0" />
+              // A real button, not a click handler on the chip: the chip already carries the
+              // remove button, and a button inside a button is invalid. It also means the
+              // preview is reachable by keyboard, which the chip never was.
+              //
+              // The visible thumbnail stays 20px and only the tap-registering area grows,
+              // through the same invisible `::before` the explorer toolbar uses — a chip
+              // that changed size on a phone would push the composer around.
+              //
+              // Vertical and horizontal are deliberately different. A symmetric `-inset-3`
+              // is 44x44, and was fine while it was the only grown target — but the remove
+              // button below now needs one too, and a chip row is horizontally dense by
+              // construction. Two targets each reaching 12px towards the other overlap, and
+              // an overlap means the tap goes to whichever paints last.
+              //
+              // So the full 44px goes on the axis a finger actually misses on — a list
+              // scrolls vertically — and horizontal takes what is left over. Measured in a
+              // browser at the real metrics, worst case being a one-character filename:
+              // thumbnail target 32x44, remove target 28x44, 7px clear between them and
+              // 12px to the next chip's thumbnail. That is within one row; the gap between
+              // wrapped rows is what keeps the vertical bleed from reaching the row below,
+              // and it is set on the container above.
+              <button
+                type="button"
+                title={`Preview ${att.name}`}
+                aria-label={`Preview ${att.name}`}
+                onClick={(e) => { e.stopPropagation(); preview(att, e.currentTarget); }}
+                className={cn(
+                  "relative shrink-0 rounded",
+                  "can-hover:hover:ring-2 can-hover:hover:ring-primary/60 transition-shadow",
+                  coarse && "before:absolute before:-inset-y-3 before:-inset-x-1.5 before:content-['']",
+                )}
+              >
+                <img
+                  src={att.previewUrl}
+                  alt={att.name}
+                  {...{ [GALLERY_ITEM_ATTR]: "" }}
+                  className="size-5 rounded object-cover"
+                />
+              </button>
             ) : att.textContent ? (
               <TerminalSquare className="size-3.5 shrink-0 text-text-subtle" />
             ) : att.isImage ? (
@@ -65,10 +162,21 @@ export function AttachmentChips({ attachments, onRemove }: AttachmentChipsProps)
             ) : null}
 
             {/* Remove button */}
+            {/*
+              16x16 of ink, and until now 16x16 of target — the smallest thing a finger
+              was asked to hit anywhere in the composer, on the one control that throws
+              work away. Same treatment as the thumbnail above: 14px of vertical bleed
+              takes it to the full 44px, and 6px horizontal keeps it clear of both the
+              thumbnail to its left and the next chip's thumbnail to its right. 28x44
+              measured, not 44x44 — see the note above for why the width gives way.
+            */}
             <button
               type="button"
               onClick={(e) => { e.stopPropagation(); onRemove(att.id); if (expandedId === att.id) setExpandedId(null); }}
-              className="shrink-0 rounded-sm p-0.5 hover:bg-border/50 transition-colors"
+              className={cn(
+                "relative shrink-0 rounded-sm p-0.5 hover:bg-border/50 transition-colors",
+                coarse && "before:absolute before:-inset-y-3.5 before:-inset-x-1.5 before:content-['']",
+              )}
               aria-label={`Remove ${att.name}`}
             >
               <X className="size-3" />

package/src/web/components/chat/background-command-bar.tsx

@@ -1,4 +1,4 @@
-import { Loader2, Eye, Square, TerminalSquare } from "lucide-react";
+import { Loader2, Eye, Square, TerminalSquare } from "@/lib/icons";
 import type { BackgroundShell } from "../../../types/api";
 import { useBackgroundOutputStore } from "@/stores/background-output-store";
 

package/src/web/components/chat/background-output-panel.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback, useRef } from "react";
-import { X, Loader2, TerminalSquare } from "lucide-react";
+import { X, Loader2, TerminalSquare } from "@/lib/icons";
 import { api } from "@/lib/api-client";
 import { useBackgroundOutputStore } from "@/stores/background-output-store";
 

package/src/web/components/chat/change-edit-list.tsx

@@ -6,7 +6,7 @@
  * highlight.js + jsdiff stay out of the main chunk.
  */
 import { lazy, Suspense } from "react";
-import { ArrowUp } from "lucide-react";
+import { ArrowUp } from "@/lib/icons";
 import type { TurnFileChange } from "@/lib/aggregate-turn-file-changes";
 
 const EditDiffPreview = lazy(() => import("./edit-diff-preview"));

package/src/web/components/chat/change-file-row.tsx

@@ -2,7 +2,7 @@
  * One file row in the change tray / sheet. Shared by both presentations; `dense`
  * switches from the 52px touch row to the 38px desktop row.
  */
-import { ChevronRight } from "lucide-react";
+import { ChevronRight } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import type { FileChangeOp, TurnFileChange } from "@/lib/aggregate-turn-file-changes";
 

package/src/web/components/chat/chat-history-bar.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useRef, type MouseEvent } from "react";
-import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, Pin, PinOff, Trash2, Users, Bot, Tags, CalendarX2 } from "lucide-react";
-import { Activity } from "lucide-react";
+import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, Pin, PinOff, Trash2, Users, Bot, Tags, CalendarX2 } from "@/lib/icons";
+import { Activity } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
 import { useNotificationStore, notificationTint } from "@/stores/notification-store";

package/src/web/components/chat/chat-history-panel.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback } from "react";
-import { MessageSquare, Loader2, RefreshCw } from "lucide-react";
+import { MessageSquare, Loader2, RefreshCw } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
 import { formatRelativeDate } from "@/lib/format-date";

package/src/web/components/chat/chat-placeholder.tsx

@@ -1,4 +1,4 @@
-import { MessageSquare } from "lucide-react";
+import { MessageSquare } from "@/lib/icons";
 
 export function ChatPlaceholder() {
   return (

package/src/web/components/chat/chat-scroll-nav.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { ChevronUp, ChevronDown, ChevronsDown, ChevronsUpDown } from "lucide-react";
+import { ChevronUp, ChevronDown, ChevronsDown, ChevronsUpDown } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { ownsGlobalShortcut } from "@/lib/owns-global-shortcut";

package/src/web/components/chat/chat-tab.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useRef, useEffect } from "react";
-import { Loader2, Upload, X } from "lucide-react";
+import { Loader2, Upload, X } from "@/lib/icons";
 import { toast } from "sonner";
 import { api, projectUrl } from "@/lib/api-client";
 import { selectInlineImages } from "@/lib/image-resize-limits";

package/src/web/components/chat/chat-toolbar-overflow-menu.tsx

@@ -1,4 +1,4 @@
-import { BellOff, Bug, Circle, MoreHorizontal } from "lucide-react";
+import { BellOff, Bug, Circle, MoreHorizontal } from "@/lib/icons";
 import {
   DropdownMenu,
   DropdownMenuContent,

package/src/web/components/chat/chat-welcome.tsx

@@ -1,4 +1,4 @@
-import { Bot } from "lucide-react";
+import { Bot } from "@/lib/icons";
 import { SessionListPanel } from "./session-list-panel";
 import type { SessionInfo } from "../../../types/chat";
 

package/src/web/components/chat/codex-usage-panel.tsx

@@ -13,7 +13,7 @@
  */
 
 import { useState, useEffect, useCallback } from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2 } from "@/lib/icons";
 import { api } from "@/lib/api-client";
 import { AccountCard } from "@/components/settings/accounts/account-card";
 import { AccountCardShell } from "@/components/settings/accounts/accounts-pane-header";

package/src/web/components/chat/file-picker.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback, type KeyboardEvent } from "react";
-import { File, Folder } from "lucide-react";
+import { File, Folder } from "@/lib/icons";
 import type { FileNode } from "../../../types/project";
 
 interface FilePickerProps {

package/src/web/components/chat/image-preview-states.tsx

@@ -1,5 +1,5 @@
 import { Fragment, type ReactNode } from "react";
-import { AlertCircle } from "lucide-react";
+import { AlertCircle } from "@/lib/icons";
 
 /** Metadata label styling, shared with the loaded panel so the skeleton lines up. */
 const LABEL = "text-[var(--img-meta-label)] @max-[470px]:hidden";

package/src/web/components/chat/message-action-bar.tsx

@@ -1,5 +1,5 @@
 import { useState, type ReactNode } from "react";
-import { Copy, Check } from "lucide-react";
+import { Copy, Check } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { formatRelativeDate } from "@/lib/format-date";
 import { copyToClipboard } from "@/lib/clipboard";

package/src/web/components/chat/message-input.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useCallback, useEffect, memo, type KeyboardEvent, type DragEvent, type ClipboardEvent } from "react";
-import { ArrowUp, Square, Paperclip, Loader2, Mic, MicOff, Zap, ListOrdered, Clock, Bot, X } from "lucide-react";
+import { ArrowUp, Square, Paperclip, Loader2, Mic, MicOff, Zap, ListOrdered, Clock, Bot, X } from "@/lib/icons";
 import { useVoiceInput } from "@/hooks/use-voice-input";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
 import { downscaleImage } from "@/lib/image-resize";

package/src/web/components/chat/message-list.tsx

@@ -45,7 +45,7 @@ import {
   ExternalLink,
   Slash,
   Pencil,
-} from "lucide-react";
+} from "@/lib/icons";
 import { ChatWelcome } from "./chat-welcome";
 import { ChatScrollNav } from "./chat-scroll-nav";
 import { MessageActionBar, ActionButton } from "./message-action-bar";

package/src/web/components/chat/mode-selector.tsx

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useCallback, type KeyboardEvent } from "react";
-import { Hand, Code, ClipboardList, ShieldOff, Check } from "lucide-react";
+import { Hand, Code, ClipboardList, ShieldOff, Check } from "@/lib/icons";
 
 const MODES = [
   { id: "default", label: "Ask before edits", icon: Hand, description: "Claude will ask for approval before making each edit" },

package/src/web/components/chat/model-selector.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback, type KeyboardEvent } from "react";
-import { Check, Sparkles } from "lucide-react";
+import { Check, Sparkles } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
 
 interface ModelOption {

package/src/web/components/chat/model-thinking-selector.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, type ReactNode } from "react";
-import { Check, Sparkles, Brain } from "lucide-react";
+import { Check, Sparkles, Brain } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";

package/src/web/components/chat/pre-compact-button.tsx

@@ -1,4 +1,4 @@
-import { AlertCircle, ChevronUp, History, Loader2 } from "lucide-react";
+import { AlertCircle, ChevronUp, History, Loader2 } from "@/lib/icons";
 
 /** Detects a JSONL transcript path in Claude's compact summary message text. */
 const JSONL_PATH_RE = /read the full transcript at:\s*(\S+\.jsonl)/i;

package/src/web/components/chat/provider-selector.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback, type KeyboardEvent } from "react";
-import { Check } from "lucide-react";
+import { Check } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
 
 interface ProviderInfo {

package/src/web/components/chat/send-message-card.tsx

@@ -7,7 +7,7 @@
  * instead of a JSON dump.
  */
 import { useState } from "react";
-import { ArrowRight, Code, Clock, CheckCircle2, XCircle } from "lucide-react";
+import { ArrowRight, Code, Clock, CheckCircle2, XCircle } from "@/lib/icons";
 import { MiniMarkdown } from "./mini-markdown";
 import { TYPE_BADGES } from "./team-message-badges";
 import { normalizeSendMessage, parseSendMessageResult } from "./send-message-parse";

package/src/web/components/chat/session-context-menu.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { Check, Pin, PinOff, Pencil, Trash2, Tag, Circle } from "lucide-react";
+import { Check, Pin, PinOff, Pencil, Trash2, Tag, Circle } from "@/lib/icons";
 import {
   ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem,
   ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent,

package/src/web/components/chat/session-debug-dialog.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Bug, ClipboardCheck, Copy, ImageOff, Loader2, TriangleAlert } from "lucide-react";
+import { Bug, ClipboardCheck, Copy, ImageOff, Loader2, TriangleAlert } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";

package/src/web/components/chat/session-history-list.tsx

@@ -1,4 +1,4 @@
-import { Loader2, RefreshCw, Search, Pencil, Check, X, Pin, PinOff, Trash2, Bot, Tags, CalendarX2, MessageSquare, BotMessageSquare } from "lucide-react";
+import { Loader2, RefreshCw, Search, Pencil, Check, X, Pin, PinOff, Trash2, Bot, Tags, CalendarX2, MessageSquare, BotMessageSquare } from "@/lib/icons";
 import { SidebarHeader } from "@/components/ui/sidebar-header";
 import { cn } from "@/lib/utils";
 import { useNotificationStore, notificationTint } from "@/stores/notification-store";

package/src/web/components/chat/session-list-panel.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
-import { ChevronDown, ChevronUp, MessageSquare, Pin, PinOff, Search, X } from "lucide-react";
+import { ChevronDown, ChevronUp, MessageSquare, Pin, PinOff, Search, X } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
 import { formatRelativeDate } from "@/lib/format-date";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";

package/src/web/components/chat/session-picker.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { api, projectUrl } from "@/lib/api-client";
-import { Plus, Trash2, MessageSquare, ChevronDown, Pin, PinOff, Search, X } from "lucide-react";
+import { Plus, Trash2, MessageSquare, ChevronDown, Pin, PinOff, Search, X } from "@/lib/icons";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { ProviderBadge } from "./provider-selector";
 import type { SessionInfo } from "../../../types/chat";