Replace lucide-react with Phosphor (bold), ban Sparkle

apps/web/package.json

@@ -31,20 +31,20 @@
     "@corbits/plugins-ui": "workspace:*",
     "@corbits/preferences": "workspace:*",
     "@corbits/presence": "workspace:*",
+    "@corbits/react-ui": "github:corbitsdev/react-ui#82f454605630fc2c73c9fc7488d29a5cdf852e9d",
     "@corbits/routines": "workspace:*",
-    "@corbits/workflow-catalog": "workspace:*",
     "@corbits/settings-ui": "workspace:*",
     "@corbits/shell-layout": "workspace:*",
     "@corbits/tasks-ui": "workspace:*",
-    "@corbits/react-ui": "github:corbitsdev/react-ui#82f454605630fc2c73c9fc7488d29a5cdf852e9d",
+    "@corbits/workflow-catalog": "workspace:*",
+    "@corbits/icons": "workspace:*",
     "@intx/types": "workspace:*",
-    "@workbench/connections": "workspace:*",
-    "@workbench/hub-client": "workspace:*",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-query": "catalog:",
+    "@workbench/connections": "workspace:*",
+    "@workbench/hub-client": "workspace:*",
     "arktype": "catalog:",
-    "lucide-react": "^1.27.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "yjs": "^13.6.32"

apps/web/src/app.tsx

@@ -5,7 +5,7 @@
 
 import { BootScreen, Button, CorbitsMark, EmptyState } from "@corbits/react-ui";
 import { QueryClientProvider } from "@tanstack/react-query";
-import { CircleAlert } from "lucide-react";
+import { BoldIconProvider, WarningCircle } from "@corbits/icons";
 import { useEffect, useMemo } from "react";
 
 import { AuthScreen } from "./auth-screen";
@@ -160,56 +160,60 @@ export function App({
   readonly provisioningErrorRefId?: string | undefined;
   readonly onRetryProvisioning?: () => void;
 }) {
-  if (session.kind === "signed-in" && provisioningError) {
-    return (
-      <ProvisioningErrorPage
-        message={provisioningError}
-        refId={provisioningErrorRefId}
-        onRetry={onRetryProvisioning ?? onRetry}
-      />
-    );
-  }
-  switch (session.kind) {
-    case "loading":
-      return (
-        <div className="app-boot-frame">
-          <BootScreen message="Loading workbench" brand={<Brand />} />
-        </div>
-      );
-    case "signed-out":
-      if (path !== LOGIN_PATH) {
-        return <LoginRedirect path={path} navigate={navigate} />;
-      }
-      return <AuthScreen onSignedIn={onSignedIn} />;
-    case "error":
-      return (
-        <div className="app-boot-frame">
-          <EmptyState
-            icon={<CircleAlert />}
-            title="Connection lost"
-            description={session.message}
-            action={
-              <Button variant="outline" onClick={onRetry}>
-                Try again
-              </Button>
-            }
-          />
-        </div>
-      );
-    case "signed-in":
-      if (path === LOGIN_PATH) {
-        return <LoginBounceHome navigate={navigate} />;
-      }
-      if (path === ONBOARDING_PATH) {
-        return <OnboardingGate navigate={navigate} user={session.user} />;
-      }
+  return <BoldIconProvider>{renderApp()}</BoldIconProvider>;
+
+  function renderApp() {
+    if (session.kind === "signed-in" && provisioningError) {
       return (
-        <Shell
-          path={path}
-          navigate={navigate}
-          user={session.user}
-          onSignOut={onSignOut}
+        <ProvisioningErrorPage
+          message={provisioningError}
+          refId={provisioningErrorRefId}
+          onRetry={onRetryProvisioning ?? onRetry}
         />
       );
+    }
+    switch (session.kind) {
+      case "loading":
+        return (
+          <div className="app-boot-frame">
+            <BootScreen message="Loading workbench" brand={<Brand />} />
+          </div>
+        );
+      case "signed-out":
+        if (path !== LOGIN_PATH) {
+          return <LoginRedirect path={path} navigate={navigate} />;
+        }
+        return <AuthScreen onSignedIn={onSignedIn} />;
+      case "error":
+        return (
+          <div className="app-boot-frame">
+            <EmptyState
+              icon={<WarningCircle />}
+              title="Connection lost"
+              description={session.message}
+              action={
+                <Button variant="outline" onClick={onRetry}>
+                  Try again
+                </Button>
+              }
+            />
+          </div>
+        );
+      case "signed-in":
+        if (path === LOGIN_PATH) {
+          return <LoginBounceHome navigate={navigate} />;
+        }
+        if (path === ONBOARDING_PATH) {
+          return <OnboardingGate navigate={navigate} user={session.user} />;
+        }
+        return (
+          <Shell
+            path={path}
+            navigate={navigate}
+            user={session.user}
+            onSignOut={onSignOut}
+          />
+        );
+    }
   }
 }

apps/web/src/pages/agents-page.tsx

@@ -22,7 +22,7 @@ import {
   TableRow,
 } from "@corbits/react-ui";
 import type { BadgeTone } from "@corbits/react-ui";
-import { Bot } from "lucide-react";
+import { Robot } from "@corbits/icons";
 import { useEffect, useState } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 
@@ -186,7 +186,7 @@ export function AgentsPage({
               onClick={() => onCreateOpenChange(true)}
               aria-label="Create an agent"
             >
-              <Bot /> Create
+              <Robot /> Create
             </Button>
           ) : null
         }
@@ -196,7 +196,7 @@ export function AgentsPage({
           <PageShell width="full" className="page-fill">
             {definitions.length === 0 ? (
               <RichEmptyState
-                icon={<Bot />}
+                icon={<Robot />}
                 title="No agents yet"
                 description="Create an agent — a name, a system prompt, and optionally a model — and it appears here and in the sidebar, ready to start a workbench."
               />
@@ -291,7 +291,7 @@ export function AgentsRoute({
         <StageTopBar title="Agents" />
         <PageShell width="full" className="page-fill">
           <RichEmptyState
-            icon={<Bot />}
+            icon={<Robot />}
             title="Select a workbench"
             description="Pick a workbench from the switcher to see the agents it can start."
           />

apps/web/src/pages/home-page.tsx

@@ -9,7 +9,7 @@
 // `/w/:workbenchId`. Deep links to other pages are unchanged.
 
 import { BootScreen, Button, EmptyState, PageShell } from "@corbits/react-ui";
-import { CircleAlert } from "lucide-react";
+import { WarningCircle } from "@corbits/icons";
 import { useEffect, useState } from "react";
 
 import { listAllWorkbenches } from "@corbits/chat-ui";
@@ -79,7 +79,7 @@ export function HomeRoute() {
     return (
       <PageShell width="full" className="page-fill">
         <EmptyState
-          icon={<CircleAlert />}
+          icon={<WarningCircle />}
           title="Couldn't load your workbenches"
           description={memberships.message}
           action={
@@ -96,7 +96,7 @@ export function HomeRoute() {
     return (
       <PageShell width="full" className="page-fill">
         <EmptyState
-          icon={<CircleAlert />}
+          icon={<WarningCircle />}
           title="No workbench selected"
           description="Pick a workbench from the switcher, then Myra will open here."
         />
@@ -108,7 +108,7 @@ export function HomeRoute() {
     return (
       <PageShell width="full" className="page-fill">
         <EmptyState
-          icon={<CircleAlert />}
+          icon={<WarningCircle />}
           title="Couldn't open Myra"
           description={state.message}
           action={

apps/web/src/pages/insights-page.tsx

@@ -24,7 +24,7 @@ import {
   TraceWaterfall,
   type TraceSpan,
 } from "@corbits/react-ui";
-import { ChartColumn } from "lucide-react";
+import { ChartBar } from "@corbits/icons";
 import type * as React from "react";
 import { useEffect, useMemo, useState } from "react";
 
@@ -827,7 +827,7 @@ export function InsightsRunsHistory({
               <Skeleton className="h-40 w-full" />
             ) : groups.length === 0 ? (
               <RichEmptyState
-                icon={<ChartColumn />}
+                icon={<ChartBar />}
                 title="No purpose runs yet"
                 description="When a routine or purpose workflow fires, it shows up here."
               />
@@ -1333,7 +1333,7 @@ export function InsightsPage({
         <StageTopBar title="Insights" />
         <PageShell width="full" className="page-fill">
           <RichEmptyState
-            icon={<ChartColumn />}
+            icon={<ChartBar />}
             title="Couldn't load insights"
             description={usageError}
           />
@@ -1485,7 +1485,7 @@ function InsightsWorkbenchPage({
         <StageTopBar title="Insights" />
         <PageShell width="full" className="page-fill">
           <RichEmptyState
-            icon={<ChartColumn />}
+            icon={<ChartBar />}
             title="Workbench not found"
             description="This conversation may have been deleted, or you may not have access to it."
           />
@@ -1499,7 +1499,7 @@ function InsightsWorkbenchPage({
         <StageTopBar title="Insights" />
         <PageShell width="full" className="page-fill">
           <RichEmptyState
-            icon={<ChartColumn />}
+            icon={<ChartBar />}
             title="No insights for this conversation yet"
             description="This conversation predates per-workbench insights."
           />

apps/web/src/pages/library-page.tsx

@@ -33,7 +33,7 @@ import {
 } from "@corbits/artifact-ui";
 import type { ArtifactSort, ArtifactSummary } from "@corbits/artifact-ui";
 import { useQueryClient } from "@tanstack/react-query";
-import { ArrowDownUp, ExternalLink, FileStack, X } from "lucide-react";
+import { ArrowsDownUp, ArrowSquareOut, Stack, X } from "@corbits/icons";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   describeApiError,
@@ -183,7 +183,7 @@ function PreviewPane({
           {previewSrc !== undefined ? (
             <Button variant="ghost" size="sm" asChild>
               <a href={previewSrc} target="_blank" rel="noreferrer">
-                <ExternalLink aria-hidden="true" />
+                <ArrowSquareOut aria-hidden="true" />
                 Open in new tab
               </a>
             </Button>
@@ -357,7 +357,7 @@ export function LibraryPage({
               aria-label={SORT_LABEL[sort]}
               title={SORT_LABEL[sort]}
             >
-              <ArrowDownUp />
+              <ArrowsDownUp />
             </Button>
           </MenuTrigger>
           <MenuContent align="end">
@@ -380,13 +380,13 @@ export function LibraryPage({
           <PageShell width="full" className="page-fill">
             {artifacts.length === 0 ? (
               <RichEmptyState
-                icon={<FileStack />}
+                icon={<Stack />}
                 title="No artifacts yet"
                 description="Upload a file or wait for agents and workflows to produce artifacts — they land here as soon as they exist."
               />
             ) : visible.length === 0 ? (
               <RichEmptyState
-                icon={<FileStack />}
+                icon={<Stack />}
                 title="Nothing matches"
                 description={`No artifact matches "${activeQuery}".`}
               />
@@ -485,7 +485,7 @@ export function LibraryRoute({ path }: { readonly path: string }) {
         <StageTopBar title="Files" />
         <PageShell width="full" className="page-fill">
           <RichEmptyState
-            icon={<FileStack />}
+            icon={<Stack />}
             title="Select a workbench"
             description="Pick a workbench from the switcher to browse the artifacts it owns."
           />
@@ -500,7 +500,7 @@ export function LibraryRoute({ path }: { readonly path: string }) {
         <StageTopBar title="Files" />
         <PageShell width="full" className="page-fill">
           <RichEmptyState
-            icon={<FileStack />}
+            icon={<Stack />}
             title="Files not configured"
             description="Files isn't set up yet. Ask your workbench admin to finish setup."
           />
@@ -520,7 +520,7 @@ export function LibraryRoute({ path }: { readonly path: string }) {
             <SignedOutNotice />
           ) : (
             <RichEmptyState
-              icon={<FileStack />}
+              icon={<Stack />}
               title="Couldn't load artifacts"
               description={describeApiError(
                 { status: page.status },

apps/web/src/pages/new-workbench-picker.tsx

@@ -9,7 +9,7 @@
 // next slice).
 
 import { Button, toast } from "@corbits/react-ui";
-import { GitPullRequest, MessageSquare, Plus } from "lucide-react";
+import { ChatCircle, GitPullRequest, Plus } from "@corbits/icons";
 import { useState } from "react";
 
 import { useBench } from "../bench-context";
@@ -24,7 +24,7 @@ import {
 
 const ROW_ICON: Record<WorkbenchTemplateId, typeof GitPullRequest> = {
   "code-review": GitPullRequest,
-  blank: MessageSquare,
+  blank: ChatCircle,
 };
 
 function ctaLabel(selected: boolean): string {

apps/web/src/pages/not-found-page.tsx

@@ -1,5 +1,5 @@
 import { Button, EmptyState, PageShell } from "@corbits/react-ui";
-import { Compass } from "lucide-react";
+import { Compass } from "@corbits/icons";
 
 import { Link } from "../navigation";
 

apps/web/src/pages/onboarding-page.tsx

@@ -28,7 +28,7 @@
 // a third step.
 
 import { Button, EmptyState, Input, ProviderMark } from "@corbits/react-ui";
-import { CircleAlert, KeyRound } from "lucide-react";
+import { Key, WarningCircle } from "@corbits/icons";
 import { useCallback, useEffect, useState } from "react";
 import type { FormEvent } from "react";
 import { OLLAMA_PLACEHOLDER_SECRET } from "@workbench/hub-client/credential-test";
@@ -397,7 +397,7 @@ export function OnboardingPage({ user }: { readonly user: SessionUser }) {
           <h1 className="onboarding-title">Couldn't set up your workbench</h1>
           <div className="onboarding-content">
             <EmptyState
-              icon={<CircleAlert />}
+              icon={<WarningCircle />}
               title="Couldn't set up your workbench"
               description={
                 state.refId === undefined ? (
@@ -552,7 +552,7 @@ export function OnboardingPage({ user }: { readonly user: SessionUser }) {
             )}
             {error !== null && (
               <EmptyState
-                icon={<KeyRound />}
+                icon={<Key />}
                 title="That key didn't work"
                 description={
                   errorRefId === undefined ? (