@hienlh/ppm 0.20.9 → 0.21.0

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";

package/src/web/components/chat/slash-command-picker.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback, useMemo, type KeyboardEvent } from "react";
-import { Sparkles, Terminal, Zap, Bot, RefreshCw, Clock } from "lucide-react";
+import { Sparkles, Terminal, Zap, Bot, RefreshCw, Clock } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
 import { searchFuzzy } from "../../../shared/fuzzy-search";
 

package/src/web/components/chat/task-tracker.tsx

@@ -4,7 +4,7 @@
  * default; auto-hides once every task is finished (completed/stopped).
  */
 import { useState, useMemo } from "react";
-import { ChevronDown, ChevronRight, ListTodo } from "lucide-react";
+import { ChevronDown, ChevronRight, ListTodo } from "@/lib/icons";
 import type { ChatMessage } from "../../../types/chat";
 import type { TaskItem, TaskStatus } from "../../../services/task-status-aggregator";
 import { useTasks } from "@/hooks/use-tasks";

package/src/web/components/chat/team-activity-panel.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useState, useEffect, useMemo, useCallback } from "react";
-import { RefreshCw } from "lucide-react";
+import { RefreshCw } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import type { TeamMessageItem } from "@/hooks/use-chat";
 import { useTeamActivityFeed } from "@/hooks/use-team-activity-feed";

package/src/web/components/chat/team-member-activity-row.tsx

@@ -6,7 +6,7 @@
  * which is exactly the display that made it impossible to tell who was running.
  */
 
-import { Loader2, ChevronRight } from "lucide-react";
+import { Loader2, ChevronRight } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import type { TeamMemberActivity } from "@/hooks/use-team-activity-feed";
 import { currentStep, formatDuration, shortAgentType } from "./team-member-activity-format";

package/src/web/components/chat/team-member-list.tsx

@@ -5,7 +5,7 @@
  * the two used to share one scroll and the members were pushed out of view.
  */
 
-import { Loader2 } from "lucide-react";
+import { Loader2 } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import type { TeamMemberActivity } from "@/hooks/use-team-activity-feed";
 import { TeamMemberActivityRow } from "./team-member-activity-row";

package/src/web/components/chat/team-member-sheet.tsx

@@ -7,7 +7,7 @@
  */
 
 import { lazy, Suspense } from "react";
-import { X } from "lucide-react";
+import { X } from "@/lib/icons";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { useTeamMemberSheet } from "./use-open-team-member";
 

package/src/web/components/chat/team-member-window-content.tsx

@@ -9,7 +9,7 @@
  * so a teammate's session looks identical wherever it is read.
  */
 
-import { Loader2, RefreshCw } from "lucide-react";
+import { Loader2, RefreshCw } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { useMemberTranscriptTail } from "@/hooks/use-member-transcript-tail";
 import type { WindowContentProps } from "@/components/floating-window/window-content-registry";

package/src/web/components/chat/team-working-bar.tsx

@@ -11,7 +11,7 @@
  * nothing here instead of claiming a long-finished teammate is still running.
  */
 
-import { Users } from "lucide-react";
+import { Users } from "@/lib/icons";
 import type { TeamMemberActivity } from "@/hooks/use-team-activity-feed";
 import { currentStep, formatDuration, shortAgentType } from "./team-member-activity-format";
 import { useOpenTeamMember } from "./use-open-team-member";

package/src/web/components/chat/tool-cards.tsx

@@ -36,8 +36,8 @@ import {
   Clock,
   Send,
   Users,
-  ImagePlus,
-} from "lucide-react";
+} from "@/lib/icons";
+import { ImagePlus } from "@/lib/icons";
 
 /**
  * Handle of an agent that can be addressed later, or null for a one-shot subagent.

package/src/web/components/chat/turn-change-sheet.tsx

@@ -6,7 +6,7 @@
  * The panel is capped; the body scrolls inside it so the sheet itself never does.
  */
 import { useEffect, useRef, useState } from "react";
-import { ArrowUp, ChevronLeft, X } from "lucide-react";
+import { ArrowUp, ChevronLeft, X } from "@/lib/icons";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { copyToClipboard } from "@/lib/clipboard";
 import type { TurnFileChange } from "@/lib/aggregate-turn-file-changes";

package/src/web/components/chat/turn-change-tray.tsx

@@ -6,7 +6,7 @@
  * Both panes need `min-h-0` or the grid rows refuse to shrink and neither scrolls.
  */
 import { useEffect, useId, useRef, useState } from "react";
-import { X } from "lucide-react";
+import { X } from "@/lib/icons";
 import { copyToClipboard } from "@/lib/clipboard";
 import { ownsGlobalShortcut } from "@/lib/owns-global-shortcut";
 import type { TurnFileChange } from "@/lib/aggregate-turn-file-changes";

package/src/web/components/chat/turn-cost-warning.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { ChevronDown, TriangleAlert } from "lucide-react";
+import { ChevronDown, TriangleAlert } from "@/lib/icons";
 import type { TurnUsage } from "../../../shared/turn-usage";
 import {
   assessTurnCost,

package/src/web/components/chat/usage-badge.tsx

@@ -17,7 +17,7 @@
  */
 
 import { useState } from "react";
-import { Activity, RefreshCw } from "lucide-react";
+import { Activity, RefreshCw } from "@/lib/icons";
 import type { UsageInfo } from "../../../types/chat";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { AccountCard } from "@/components/settings/accounts/account-card";

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

@@ -13,7 +13,7 @@
  */
 
 import { useState, type ReactNode } from "react";
-import { ExternalLink, Maximize2, Minimize2, RefreshCw, X } from "lucide-react";
+import { ExternalLink, Maximize2, Minimize2, RefreshCw, X } from "@/lib/icons";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { openSettings } from "@/components/settings/open-settings";
 

package/src/web/components/chat/version-switcher.tsx

@@ -1,4 +1,4 @@
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight } from "@/lib/icons";
 import type { VersionGroup } from "../../../types/api";
 
 /**

package/src/web/components/database/connection-import-export.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from "react";
-import { MoreVertical, Download, Upload, Clipboard, ClipboardPaste } from "lucide-react";
+import { MoreVertical, Download, Upload, Clipboard, ClipboardPaste } from "@/lib/icons";
 import { copyToClipboard } from "@/lib/clipboard";
 
 interface Props {

package/src/web/components/database/connection-list.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect, useRef } from "react";
-import { ChevronRight, ChevronDown } from "lucide-react";
+import { ChevronRight, ChevronDown } from "@/lib/icons";
 import type { Connection, CachedTable } from "./use-connections";
 import type { ColumnInfo } from "./schema-table-tree";
 import { ConnectionRow } from "./connection-row";

package/src/web/components/database/connection-row.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight, ChevronDown, RefreshCw, Pencil, Trash2, Lock, Search } from "lucide-react";
+import { ChevronRight, ChevronDown, RefreshCw, Pencil, Trash2, Lock, Search } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import type { Connection, CachedTable } from "./use-connections";
 import { SchemaTableTree, type ColumnInfo } from "./schema-table-tree";

package/src/web/components/database/database-sidebar.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Database, Plus } from "lucide-react";
+import { Database, Plus } from "@/lib/icons";
 import { SidebarHeader } from "@/components/ui/sidebar-header";
 import { useTabStore } from "@/stores/tab-store";
 import { ConnectionList } from "./connection-list";

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

@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect, useRef, useCallback } from "react";
-import { Database, RefreshCw, GripHorizontal, Loader2, ShieldCheck, ShieldOff } from "lucide-react";
+import { Database, RefreshCw, GripHorizontal, Loader2, ShieldCheck, ShieldOff } from "@/lib/icons";
 import { api } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
 import { useDatabase, type DbColumnInfo } from "./use-database";

package/src/web/components/database/export-button.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
-import { Download } from "lucide-react";
+import { Download } from "@/lib/icons";
 import { serializeCsv } from "@/lib/csv-parser";
 import { copyToClipboard } from "@/lib/clipboard";
 

package/src/web/components/database/glide-context-menu.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
-import { Eye, Pin, PinOff, Trash2, ExternalLink } from "lucide-react";
+import { Eye, Pin, PinOff, Trash2, ExternalLink } from "@/lib/icons";
 
 interface ContextMenuProps {
   position: { x: number; y: number };

package/src/web/components/database/glide-data-grid.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useMemo, useRef, useEffect } from "react";
 import DataEditor, { type GridColumn, type Item } from "@glideapps/glide-data-grid";
-import { Loader2 } from "lucide-react";
+import { Loader2 } from "@/lib/icons";
 import type { GlideGridProps } from "./glide-grid-types";
 import { useGlideTheme } from "./glide-grid-theme";
 import { useGlideColumns } from "./use-glide-columns";