refactor(web): route all icon imports through one barrel

apps/web/package.json

@@ -5,6 +5,8 @@
   "type": "module",
   "scripts": {
     "build:ghostty-wasm": "bash scripts/build-libghostty-wasm.sh",
+    "icons:check": "node scripts/generate-icon-barrel.ts --check",
+    "icons:generate": "node scripts/generate-icon-barrel.ts",
     "dev": "vp dev",
     "build": "vp build",
     "preview": "vp preview",
@@ -68,6 +70,7 @@
     "compression": "^1.8.1",
     "react-test-renderer": "19.2.6",
     "tailwindcss": "^4.0.0",
+    "typescript": "catalog:",
     "vite": "catalog:",
     "vite-plus": "catalog:"
   }

apps/web/scripts/generate-icon-barrel.ts

@@ -0,0 +1,66 @@
+// @effect-diagnostics nodeBuiltinImport:off - this maintainer script reads and writes source files before the app runtime exists.
+/** Regenerates src/icons/index.ts from the Lucide icons the web app actually imports. */
+import * as NodeFS from "node:fs";
+import * as NodePath from "node:path";
+
+import { assertKnownIconNames, collectRuntimeIconNames } from "../src/icons/icon-import-parser.ts";
+
+// The generator inspects Lucide's exports before it writes the barrel.
+// eslint-disable-next-line no-restricted-imports
+import * as lucide from "lucide-react";
+
+const webRoot = NodePath.resolve(import.meta.dirname, "..");
+const srcRoot = NodePath.join(webRoot, "src");
+const testRoot = NodePath.join(webRoot, "test");
+const iconsRoot = NodePath.join(srcRoot, "icons");
+
+function listSourceFiles(dir: string): string[] {
+  if (!NodeFS.existsSync(dir)) return [];
+  const files: string[] = [];
+  for (const entry of NodeFS.readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = NodePath.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (fullPath !== iconsRoot) files.push(...listSourceFiles(fullPath));
+    } else if (/\.[jt]sx?$/.test(entry.name)) {
+      files.push(fullPath);
+    }
+  }
+  return files;
+}
+
+const knownNames = new Set(Object.keys(lucide));
+const usedNames = new Set<string>();
+
+for (const root of [srcRoot, testRoot]) {
+  for (const file of listSourceFiles(root)) {
+    const names = collectRuntimeIconNames(NodeFS.readFileSync(file, "utf8"), file);
+    assertKnownIconNames(names, knownNames, file);
+    for (const name of names) usedNames.add(name);
+  }
+}
+
+const sortedNames = [...usedNames].sort((left, right) => left.localeCompare(right, "en-US"));
+const indexFile = `// Generated by scripts/generate-icon-barrel.ts — do not edit by hand.
+// Rerun with: node apps/web/scripts/generate-icon-barrel.ts
+/* eslint-disable no-restricted-imports -- this barrel owns direct Lucide imports. */
+export {
+${sortedNames.map((name) => `  ${name},`).join("\n")}
+} from "lucide-react";
+
+export type { LucideIcon, LucideProps } from "lucide-react";
+`;
+const indexPath = NodePath.join(iconsRoot, "index.ts");
+
+if (process.argv.includes("--check")) {
+  const currentIndex = NodeFS.readFileSync(indexPath, "utf8");
+  if (currentIndex !== indexFile) {
+    throw new Error(
+      "src/icons/index.ts is stale. Run `vp run --filter @t3tools/web icons:generate`.",
+    );
+  }
+  console.log(`Verified ${sortedNames.length} generated Lucide exports in src/icons/index.ts.`);
+} else {
+  NodeFS.mkdirSync(iconsRoot, { recursive: true });
+  NodeFS.writeFileSync(indexPath, indexFile);
+  console.log(`Generated ${sortedNames.length} Lucide exports in src/icons/index.ts.`);
+}

apps/web/src/browser/BrowserDeviceToolbar.tsx

@@ -7,7 +7,7 @@ import {
   type PreviewViewportSetting,
 } from "@t3tools/contracts";
 import { PREVIEW_VIEWPORT_PRESETS, resolvePreviewViewport } from "@t3tools/shared/previewViewport";
-import { Link2, Unlink2, X } from "lucide-react";
+import { Link2, Unlink2, X } from "~/icons";
 import { useState } from "react";
 
 import { Button } from "~/components/ui/button";

apps/web/src/components/AgentsPanel.tsx

@@ -22,7 +22,7 @@ import {
   formatSubagentTokenCount,
 } from "@t3tools/client-runtime/state/subagentRuntime";
 import type { EnvironmentId, ThreadId } from "@t3tools/contracts";
-import { Bot, Braces, Check, ChevronDown, ChevronRight, X } from "lucide-react";
+import { Bot, Braces, Check, ChevronDown, ChevronRight, X } from "~/icons";
 import { useEffect, useRef, useState } from "react";
 
 import { cn } from "~/lib/utils";

apps/web/src/components/BranchToolbar.tsx

@@ -1,12 +1,6 @@
 import { scopeProjectRef, scopeThreadRef } from "@t3tools/client-runtime/environment";
 import type { EnvironmentId, ThreadId } from "@t3tools/contracts";
-import {
-  ChevronDownIcon,
-  FolderGit2Icon,
-  FolderGitIcon,
-  FolderIcon,
-  HistoryIcon,
-} from "lucide-react";
+import { ChevronDownIcon, FolderGit2Icon, FolderGitIcon, FolderIcon, HistoryIcon } from "~/icons";
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 
 import { useComposerDraftStore, type DraftId } from "../composerDraftStore";

apps/web/src/components/BranchToolbarBranchSelector.tsx

@@ -5,7 +5,7 @@ import {
 } from "@t3tools/client-runtime/state/runtime";
 import type { ContextMenuItem, EnvironmentId, VcsRef, ThreadId } from "@t3tools/contracts";
 import { LegendList, type LegendListRef } from "@legendapp/list/react";
-import { ChevronDownIcon, GitBranchIcon, RefreshCwIcon, SearchIcon } from "lucide-react";
+import { ChevronDownIcon, GitBranchIcon, RefreshCwIcon, SearchIcon } from "~/icons";
 import {
   useCallback,
   useDeferredValue,

apps/web/src/components/BranchToolbarEnvModeSelector.tsx

@@ -1,4 +1,4 @@
-import { FolderGit2Icon, FolderGitIcon, FolderIcon, HistoryIcon } from "lucide-react";
+import { FolderGit2Icon, FolderGitIcon, FolderIcon, HistoryIcon } from "~/icons";
 import { memo, useMemo } from "react";
 
 import {

apps/web/src/components/ChatMarkdown.tsx

@@ -20,7 +20,7 @@ import {
   TriangleAlertIcon,
   WrapTextIcon,
   type LucideIcon,
-} from "lucide-react";
+} from "~/icons";
 import type {
   AssetResource,
   EnvironmentId,

apps/web/src/components/ChatView.tsx

@@ -193,7 +193,7 @@ import {
   Minimize2Icon,
   PaperclipIcon,
   WifiOffIcon,
-} from "lucide-react";
+} from "~/icons";
 import { cn, randomHex } from "~/lib/utils";
 import { stackedThreadToast, toastManager } from "./ui/toast";
 import { decodeProjectScriptKeybindingRule } from "~/lib/projectScriptKeybindings";

apps/web/src/components/CommandPalette.tsx

@@ -53,7 +53,7 @@ import {
   SettingsIcon,
   SquarePenIcon,
   TextSearchIcon,
-} from "lucide-react";
+} from "~/icons";
 import {
   useCallback,
   useDeferredValue,

apps/web/src/components/CommandPaletteContent.tsx

@@ -1,4 +1,4 @@
-import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
+import { ArrowDownIcon, ArrowUpIcon } from "~/icons";
 import { type ComponentProps, type ReactNode, useLayoutEffect, useRef } from "react";
 
 import { Command, CommandFooter, CommandInput, CommandPanel } from "./ui/command";

apps/web/src/components/CommandPaletteResults.tsx

@@ -1,5 +1,5 @@
 import { type ResolvedKeybindingsConfig } from "@t3tools/contracts";
-import { ChevronRightIcon } from "lucide-react";
+import { ChevronRightIcon } from "~/icons";
 import { shortcutLabelForCommand } from "../keybindings";
 import {
   type CommandPaletteActionItem,

apps/web/src/components/DiffFilePathCopyButton.tsx

@@ -1,4 +1,4 @@
-import { CheckIcon, CopyIcon } from "lucide-react";
+import { CheckIcon, CopyIcon } from "~/icons";
 import { useRef } from "react";
 import { useCopyToClipboard } from "../hooks/useCopyToClipboard";
 import {

apps/web/src/components/DiffPanel.tsx

@@ -21,7 +21,7 @@ import {
   Rows3Icon,
   SearchIcon,
   TextWrapIcon,
-} from "lucide-react";
+} from "~/icons";
 import * as Schema from "effect/Schema";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useCodeViewFileReveal } from "./diffs/useCodeViewFileReveal";

apps/web/src/components/EnvironmentMachineIcon.tsx

@@ -1,5 +1,5 @@
 import type { EnvironmentMachineKind } from "@t3tools/contracts";
-import { CloudIcon, LaptopIcon, MonitorIcon, ServerIcon, type LucideProps } from "lucide-react";
+import { CloudIcon, LaptopIcon, MonitorIcon, ServerIcon, type LucideProps } from "~/icons";
 import type { FunctionComponent, SVGProps } from "react";
 
 // Lucide has no Apple desktops, so these two are drawn to its grammar (24

apps/web/src/components/GitActionsControl.tsx

@@ -37,7 +37,7 @@ import {
   InfoIcon,
   LockIcon,
   GlobeIcon,
-} from "lucide-react";
+} from "~/icons";
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
 import { AzureDevOpsIcon, BitbucketIcon, GitHubIcon, GitLabIcon } from "~/components/Icons";
 import { RadioGroup } from "~/components/ui/radio-group";

apps/web/src/components/LegacySidebar.tsx

@@ -11,7 +11,7 @@ import {
   SquarePenIcon,
   TerminalIcon,
   TriangleAlertIcon,
-} from "lucide-react";
+} from "~/icons";
 import {
   ChangeRequestStatusIcon,
   prStatusIndicator,

apps/web/src/components/ProjectFavicon.test.tsx

@@ -53,7 +53,7 @@ vi.mock("react", async (importOriginal) => {
 });
 
 vi.mock("react/compiler-runtime", () => ({ c: hooks.useMemoCache }));
-vi.mock("lucide-react/dynamic", () => ({
+vi.mock("~/icons/dynamic", () => ({
   DynamicIcon: "dynamic-icon",
   iconNames: ["alarm-clock", "folder-code"],
 }));

apps/web/src/components/ProjectFavicon.tsx

@@ -26,8 +26,8 @@ import {
   SmartphoneIcon,
   TerminalIcon,
   VideoIcon,
-} from "lucide-react";
-import type { IconName } from "lucide-react/dynamic";
+} from "~/icons";
+import type { IconName } from "~/icons/dynamic";
 import type { ComponentType } from "react";
 import { lazy, Suspense, useState } from "react";
 import { useAssetUrlState } from "../assets/assetUrls";
@@ -37,7 +37,7 @@ import { cn } from "~/lib/utils";
 
 const loadedProjectFaviconSrcs = new Map<string, string>();
 const DynamicIcon = lazy(() =>
-  import("lucide-react/dynamic").then((module) => ({ default: module.DynamicIcon })),
+  import("~/icons/dynamic").then((module) => ({ default: module.DynamicIcon })),
 );
 
 function DynamicProjectIconFallback() {

apps/web/src/components/ProjectScriptsControl.tsx

@@ -7,7 +7,7 @@ import {
   isAtomCommandInterrupted,
   squashAtomCommandFailure,
 } from "@t3tools/client-runtime/state/runtime";
-import { ChevronDownIcon, DownloadIcon, PlusIcon, SettingsIcon } from "lucide-react";
+import { ChevronDownIcon, DownloadIcon, PlusIcon, SettingsIcon } from "~/icons";
 import { useCallback, useMemo, useState } from "react";
 
 import { commandForProjectScript, primaryProjectScript } from "~/projectScripts";

apps/web/src/components/ProviderUpdateEnvironmentRows.tsx

@@ -1,4 +1,4 @@
-import { CheckIcon } from "lucide-react";
+import { CheckIcon } from "~/icons";
 import { type ReactNode, useCallback, useMemo, useRef, useState } from "react";
 import type { EnvironmentId, ServerProvider } from "@t3tools/contracts";
 import {

apps/web/src/components/ProviderUpdateLaunchNotification.tsx

@@ -1,5 +1,5 @@
 import { useNavigate } from "@tanstack/react-router";
-import { DownloadIcon } from "lucide-react";
+import { DownloadIcon } from "~/icons";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { useEnvironments } from "~/state/environments";

apps/web/src/components/ProviderUpdatePrimaryNotification.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from "@tanstack/react-router";
 import { useAtomValue } from "@effect/atom-react";
-import { DownloadIcon } from "lucide-react";
+import { DownloadIcon } from "~/icons";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { type ProviderDriverKind, type ProviderInstanceId } from "@t3tools/contracts";
 

apps/web/src/components/RightPanelTabs.tsx

@@ -19,7 +19,7 @@ import {
   TerminalSquare,
   Volume2,
   VolumeOff,
-} from "lucide-react";
+} from "~/icons";
 import {
   type KeyboardEvent as ReactKeyboardEvent,
   type MouseEvent as ReactMouseEvent,

apps/web/src/components/Sidebar.tsx

@@ -57,7 +57,7 @@ import {
   TerminalIcon,
   Undo2Icon,
   XIcon,
-} from "lucide-react";
+} from "~/icons";
 import {
   memo,
   useCallback,

apps/web/src/components/ThreadCommandSubtitle.tsx

@@ -1,5 +1,5 @@
 import type { EnvironmentId, ProviderDriverKind } from "@t3tools/contracts";
-import { FolderGit2Icon, FolderIcon, GitBranchIcon } from "lucide-react";
+import { FolderGit2Icon, FolderIcon, GitBranchIcon } from "~/icons";
 import { ProjectFavicon } from "./ProjectFavicon";
 import { ProviderInstanceIcon } from "./chat/ProviderInstanceIcon";
 import { cn } from "~/lib/utils";

apps/web/src/components/ThreadStatusIndicators.test.ts

@@ -7,7 +7,7 @@ import {
   GitPullRequestClosedIcon,
   GitPullRequestDraftIcon,
   GitPullRequestIcon,
-} from "lucide-react";
+} from "~/icons";
 
 import {
   ChangeRequestStatusIcon,

apps/web/src/components/ThreadStatusIndicators.tsx

@@ -11,7 +11,7 @@ import {
   type VcsStatusResult,
 } from "@t3tools/contracts";
 import { Atom } from "effect/unstable/reactivity";
-import { FolderGit2Icon, TerminalIcon } from "lucide-react";
+import { FolderGit2Icon, TerminalIcon } from "~/icons";
 import { useMemo } from "react";
 import { appAtomRegistry } from "../rpc/atomRegistry";
 import { useEnvironment, usePrimaryEnvironmentId } from "../state/environments";

apps/web/src/components/ThreadTerminalDrawer.tsx

@@ -17,7 +17,7 @@ import {
   SquareSplitVertical,
   TerminalSquare,
   Trash2,
-} from "lucide-react";
+} from "~/icons";
 import {
   type ContextMenuItem,
   type ResolvedKeybindingsConfig,

apps/web/src/components/chat/AssistantCitationChip.tsx

@@ -1,7 +1,7 @@
 import type { AssistantCitation } from "@t3tools/contracts";
 import { serializeAssistantCitation } from "@t3tools/shared/assistantCitations";
 import { Link, useNavigate } from "@tanstack/react-router";
-import { PencilIcon, QuoteIcon, XIcon } from "lucide-react";
+import { PencilIcon, QuoteIcon, XIcon } from "~/icons";
 import { useEffect, useEffectEvent, useRef, type MouseEvent as ReactMouseEvent } from "react";
 import {
   findAssistantCitationSourceAnchor,

apps/web/src/components/chat/AssistantSelectionToolbar.tsx

@@ -4,7 +4,7 @@ import {
   type AssistantCitation,
   type ScopedThreadRef,
 } from "@t3tools/contracts";
-import { QuoteIcon } from "lucide-react";
+import { QuoteIcon } from "~/icons";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import {

apps/web/src/components/chat/ChangedFilesTree.tsx

@@ -13,7 +13,7 @@ import {
   FileDiffIcon,
   FolderIcon,
   FolderClosedIcon,
-} from "lucide-react";
+} from "~/icons";
 import { cn } from "~/lib/utils";
 import { DiffStatLabel, hasNonZeroStat } from "./DiffStatLabel";
 import { PierreEntryIcon } from "./PierreEntryIcon";

apps/web/src/components/chat/ChatComposer.tsx

@@ -791,7 +791,7 @@ import {
   RotateCcwIcon,
   SparklesIcon,
   XIcon,
-} from "lucide-react";
+} from "~/icons";
 import { proposedPlanTitle } from "../../proposedPlan";
 import { hasProviderSetup } from "./ProviderStatusBanner";
 import {

apps/web/src/components/chat/ChatHeader.tsx

@@ -10,7 +10,7 @@ import {
   isAtomCommandInterrupted,
   squashAtomCommandFailure,
 } from "@t3tools/client-runtime/state/runtime";
-import { ChevronDownIcon } from "lucide-react";
+import { ChevronDownIcon } from "~/icons";
 import {
   memo,
   useCallback,

apps/web/src/components/chat/CompactComposerControlsMenu.tsx

@@ -1,6 +1,6 @@
 import { ProviderInteractionMode, RuntimeMode } from "@t3tools/contracts";
 import { memo, type ReactNode } from "react";
-import { EllipsisIcon } from "lucide-react";
+import { EllipsisIcon } from "~/icons";
 import {
   Menu,
   MenuPopup,

apps/web/src/components/chat/ComposerActivityStatus.tsx

@@ -1,4 +1,4 @@
-import { LoaderCircleIcon } from "lucide-react";
+import { LoaderCircleIcon } from "~/icons";
 import { observeVisibleAnimation } from "../../lib/visibleAnimation";
 import { threadSyncLabel, type ThreadSyncPhase } from "../../threadSync";
 import { ComposerBanner } from "./ComposerBanner";

apps/web/src/components/chat/ComposerBanner.tsx

@@ -1,6 +1,6 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { ChevronDownIcon, XIcon } from "lucide-react";
+import { ChevronDownIcon, XIcon } from "~/icons";
 import type { ComponentProps } from "react";
 
 import { cn } from "~/lib/utils";

apps/web/src/components/chat/ComposerBannerStack.tsx

@@ -1,4 +1,4 @@
-import { InfoIcon } from "lucide-react";
+import { InfoIcon } from "~/icons";
 import { useEffect, useId, useLayoutEffect, useRef, useState, type ReactNode } from "react";
 
 import { cn } from "~/lib/utils";