fix+upstream: hooks-order crash, ConfirmDialog/PageHeader/skeletons, styled error boundary

Hoists hooks above early return (render-time Navigate); ports finance's
ConfirmDialog/PageHeader/loading/states + APC error-copy mapper; removes
window.confirm, dead appbar search, and seeded fake notifications; wires toasts.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/routes/activity.tsx

@@ -1,13 +1,8 @@
 import { Activity } from "lucide-react"
 
 import { AppShell } from "~/components/layout/app-shell"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "~/components/ui/card"
+import { PageHeader } from "~/components/layout/page-header"
+import { EmptyState } from "~/components/states"
 import { pageTitle } from "~/lib/page-meta"
 
 export const meta = () => pageTitle("Activity")
@@ -15,29 +10,21 @@ export const meta = () => pageTitle("Activity")
 export default function ActivityRoute() {
   return (
     <AppShell title="Activity">
-      <Card>
-        <CardHeader>
-          <CardTitle>Activity</CardTitle>
-          <CardDescription>
-            Event stream, audit log, recent changes.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-muted-foreground/20 bg-muted/30 p-12 text-center">
-            <div className="flex size-12 items-center justify-center rounded-xl bg-background text-muted-foreground">
-              <Activity className="size-6" />
-            </div>
-            <div className="max-w-md">
-              <p className="font-medium">No activity yet</p>
-              <p className="mt-1 text-sm text-muted-foreground">
-                Once your app is doing things, this is where audit events,
-                webhook deliveries, and recent changes show up — pair with{" "}
-                <code className="font-mono text-xs">@crema/log-ui</code>.
-              </p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+      <PageHeader
+        title="Activity"
+        description="Event stream, audit log, recent changes."
+      />
+      <EmptyState
+        icon={<Activity className="size-6" />}
+        title="No activity yet"
+        description={
+          <>
+            Once your app is doing things, this is where audit events, webhook
+            deliveries, and recent changes show up — pair with{" "}
+            <code className="font-mono text-xs">@crema/log-ui</code>.
+          </>
+        }
+      />
     </AppShell>
   )
 }

app/routes/assistant.tsx

@@ -111,6 +111,7 @@ import { TypingIndicator } from "@crema/chat-ui"
 import { CommandBar } from "@crema/aifirst-ui"
 
 import { AppShell } from "~/components/layout/app-shell"
+import { ConfirmDialog } from "~/components/confirm-dialog"
 import { MessageBody } from "~/components/assistant/message-body"
 import { Button } from "~/components/ui/button"
 import {
@@ -1956,20 +1957,32 @@ function ThreadsPicker({
               >
                 <Pencil className="size-3.5" />
               </button>
-              <button
-                type="button"
-                data-action={`assistant-thread-delete-${t.id}`}
-                onClick={() => {
+              <ConfirmDialog
+                trigger={
+                  <button
+                    type="button"
+                    data-action={`assistant-thread-delete-${t.id}`}
+                    disabled={threads.length <= 1}
+                    className="rounded p-1 text-muted-foreground opacity-0 hover:bg-destructive/10 hover:text-destructive group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30"
+                    title={
+                      threads.length <= 1
+                        ? "Can't delete the last conversation"
+                        : "Delete"
+                    }
+                    aria-label="Delete"
+                  >
+                    <Trash2 className="size-3.5" />
+                  </button>
+                }
+                title="Delete conversation?"
+                description={`"${t.title}" and its messages will be permanently removed.`}
+                confirmLabel="Delete"
+                destructive
+                onConfirm={() => {
                   if (threads.length <= 1) return
-                  if (window.confirm(`Delete "${t.title}"?`)) onDelete(t.id)
+                  onDelete(t.id)
                 }}
-                disabled={threads.length <= 1}
-                className="rounded p-1 text-muted-foreground opacity-0 hover:bg-destructive/10 hover:text-destructive group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30"
-                title="Delete"
-                aria-label="Delete"
-              >
-                <Trash2 className="size-3.5" />
-              </button>
+              />
             </div>
           )
         })}

app/routes/home.tsx

@@ -2,13 +2,8 @@ import { ArrowRight, Sparkles, Boxes, Activity, BookOpen } from "lucide-react"
 import { Link } from "react-router"
 
 import { AppShell } from "~/components/layout/app-shell"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "~/components/ui/card"
+import { PageHeader } from "~/components/layout/page-header"
+import { Card, CardDescription, CardHeader, CardTitle } from "~/components/ui/card"
 import { pageTitle } from "~/lib/page-meta"
 
 export const meta = () => pageTitle("Overview")
@@ -44,19 +39,19 @@ const tiles = [
 export default function HomeRoute() {
   return (
     <AppShell title="Overview">
-      <Card>
-        <CardHeader>
-          <CardTitle>Welcome</CardTitle>
-          <CardDescription>
+      <PageHeader
+        title="Welcome"
+        description={
+          <>
             A hybrid traditional + AI-first scaffold. Use the rail to navigate;
             the Assistant can drive the UI on your behalf — try{" "}
             <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-xs">
               ⌘⇧P
             </kbd>{" "}
             for the script runner.
-          </CardDescription>
-        </CardHeader>
-      </Card>
+          </>
+        }
+      />
 
       <div className="grid gap-4 md:grid-cols-2">
         {tiles.map((t) => {

app/routes/library.tsx

@@ -1,15 +1,14 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { BookOpen, Copy, Download, Trash2, MessagesSquare } from "lucide-react"
+import { useToast } from "@crema/notification-ui"
 
 import { AppShell } from "~/components/layout/app-shell"
+import { PageHeader } from "~/components/layout/page-header"
+import { ConfirmDialog } from "~/components/confirm-dialog"
+import { ListSkeleton } from "~/components/loading"
+import { EmptyState, ErrorState } from "~/components/states"
 import { Button } from "~/components/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "~/components/ui/card"
+import { Card, CardContent } from "~/components/ui/card"
 import { Input } from "~/components/ui/input"
 import { pageTitle } from "~/lib/page-meta"
 import {
@@ -24,6 +23,15 @@ export default function LibraryRoute() {
   const items = useLibrary()
   const [query, setQuery] = useState("")
   const [openId, setOpenId] = useState<string | null>(null)
+  // Load-state grammar: skeleton → error → empty → content. The store is
+  // synchronous localStorage, so `loading` only gates the first frame — a
+  // fork backing Library with an async API drives these off the request.
+  const [loading, setLoading] = useState(true)
+  const [error] = useState<string | null>(null)
+
+  useEffect(() => {
+    setLoading(false)
+  }, [])
 
   const filtered = items.filter((it) => {
     if (!query.trim()) return true
@@ -39,25 +47,41 @@ export default function LibraryRoute() {
 
   return (
     <AppShell title="Library">
-      <Card>
-        <CardHeader>
-          <CardTitle>Library</CardTitle>
-          <CardDescription>
-            Saved items and templates. Save a chat from the Assistant via the
-            ⋯ menu → "Save to Library".
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="flex flex-col gap-4">
-          <Input
-            data-action="library-search"
-            placeholder="Search saved items…"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-          />
+      <PageHeader
+        title="Library"
+        description={
+          <>
+            Saved items and templates. Save a chat from the Assistant via the ⋯
+            menu → <span className="font-medium">Save to Library</span>.
+          </>
+        }
+      />
+
+      {loading ? (
+        <ListSkeleton />
+      ) : error ? (
+        <ErrorState message={error} />
+      ) : items.length === 0 ? (
+        <EmptyState
+          icon={<BookOpen className="size-6" />}
+          title="Library is empty"
+          description={
+            <>
+              Save a conversation from the Assistant via the ⋯ menu →{" "}
+              <span className="font-medium">Save to Library</span>.
+            </>
+          }
+        />
+      ) : (
+        <Card>
+          <CardContent className="flex flex-col gap-4 pt-6">
+            <Input
+              data-action="library-search"
+              placeholder="Search saved items…"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+            />
 
-          {items.length === 0 ? (
-            <EmptyState />
-          ) : (
             <div className="grid gap-3 md:grid-cols-[18rem_1fr]">
               <ul className="flex max-h-[60vh] flex-col gap-1 overflow-y-auto rounded-lg border bg-card/40 p-2">
                 {filtered.length === 0 && (
@@ -91,9 +115,7 @@ export default function LibraryRoute() {
                         </span>
                         <span className="line-clamp-1 text-[11px] text-muted-foreground">
                           {it.agentName ? `${it.agentName} · ` : ""}
-                          {it.messageCount
-                            ? `${it.messageCount} msg · `
-                            : ""}
+                          {it.messageCount ? `${it.messageCount} msg · ` : ""}
                           {new Date(it.createdAt).toLocaleDateString()}
                         </span>
                       </span>
@@ -106,30 +128,13 @@ export default function LibraryRoute() {
                 {open ? <Detail item={open} /> : <PickAnItem />}
               </div>
             </div>
-          )}
-        </CardContent>
-      </Card>
+          </CardContent>
+        </Card>
+      )}
     </AppShell>
   )
 }
 
-function EmptyState() {
-  return (
-    <div className="flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-muted-foreground/20 bg-muted/30 p-12 text-center">
-      <div className="flex size-12 items-center justify-center rounded-xl bg-background text-muted-foreground">
-        <BookOpen className="size-6" />
-      </div>
-      <div className="max-w-md">
-        <p className="font-medium">Library is empty</p>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Save a conversation from the Assistant via the ⋯ menu →{" "}
-          <span className="font-medium">Save to Library</span>.
-        </p>
-      </div>
-    </div>
-  )
-}
-
 function PickAnItem() {
   return (
     <div className="flex h-full items-center justify-center rounded-lg border border-dashed border-muted-foreground/20 p-12 text-center text-sm text-muted-foreground">
@@ -139,11 +144,13 @@ function PickAnItem() {
 }
 
 function Detail({ item }: { item: LibraryItem }) {
+  const { toast } = useToast()
   const copy = async () => {
     try {
       await navigator.clipboard.writeText(item.content)
+      toast({ title: "Copied to clipboard", tone: "success" })
     } catch {
-      /* ignore */
+      toast({ title: "Couldn't copy", tone: "error" })
     }
   }
   const download = () => {
@@ -153,14 +160,12 @@ function Detail({ item }: { item: LibraryItem }) {
     const url = URL.createObjectURL(blob)
     const a = document.createElement("a")
     a.href = url
-    const slug = item.title.toLowerCase().replace(/[^a-z0-9]+/g, "-").slice(0, 60) || "item"
+    const slug =
+      item.title.toLowerCase().replace(/[^a-z0-9]+/g, "-").slice(0, 60) || "item"
     a.download = `${slug}.md`
     a.click()
     URL.revokeObjectURL(url)
   }
-  const remove = () => {
-    if (window.confirm(`Delete "${item.title}"?`)) deleteLibraryItem(item.id)
-  }
   return (
     <div className="flex max-h-[60vh] flex-col rounded-lg border bg-card/40">
       <div className="flex items-start gap-2 border-b px-3 py-2">
@@ -188,14 +193,29 @@ function Detail({ item }: { item: LibraryItem }) {
         >
           <Download className="size-3.5" /> Download
         </Button>
-        <Button
-          data-action={`library-delete-${item.id}`}
-          variant="ghost"
-          size="sm"
-          onClick={remove}
-        >
-          <Trash2 className="size-3.5 text-destructive" />
-        </Button>
+        <ConfirmDialog
+          trigger={
+            <Button
+              data-action={`library-delete-${item.id}`}
+              variant="ghost"
+              size="sm"
+            >
+              <Trash2 className="size-3.5 text-destructive" />
+            </Button>
+          }
+          title="Delete saved item?"
+          description={`"${item.title}" will be permanently removed. This can't be undone.`}
+          confirmLabel="Delete"
+          destructive
+          onConfirm={() => {
+            deleteLibraryItem(item.id)
+            toast({
+              title: "Item deleted",
+              description: item.title,
+              tone: "success",
+            })
+          }}
+        />
       </div>
       <pre className="flex-1 overflow-auto whitespace-pre-wrap p-4 font-mono text-xs leading-relaxed">
         {item.content}

app/routes/resources.tsx

@@ -1,15 +1,14 @@
 import { useEffect, useMemo, useState } from "react"
-import { Plus, Search, Trash2 } from "lucide-react"
+import { Boxes, Plus, Search, Trash2 } from "lucide-react"
+import { useToast } from "@crema/notification-ui"
 
 import { AppShell } from "~/components/layout/app-shell"
+import { PageHeader } from "~/components/layout/page-header"
+import { ConfirmDialog } from "~/components/confirm-dialog"
+import { ListSkeleton } from "~/components/loading"
+import { EmptyState, ErrorState } from "~/components/states"
 import { Button } from "~/components/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "~/components/ui/card"
+import { Card, CardContent } from "~/components/ui/card"
 import { Input } from "~/components/ui/input"
 import {
   createResource,
@@ -27,11 +26,24 @@ const statuses: Resource["status"][] = ["active", "paused", "archived"]
 
 export default function ResourcesRoute() {
   const items = useResources()
+  const { toast } = useToast()
   const [query, setQuery] = useState("")
   const [draftName, setDraftName] = useState("")
+  // Load-state grammar: skeleton → error → empty → content. The store here
+  // is synchronous localStorage, so `loading` just gates the first frame;
+  // a fork swapping `useResources()` for an async `api.get` drives these
+  // two flags off the real request instead.
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
-    seedResourcesIfEmpty()
+    try {
+      seedResourcesIfEmpty()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+    } finally {
+      setLoading(false)
+    }
   }, [])
 
   const filtered = useMemo(() => {
@@ -51,133 +63,177 @@ export default function ResourcesRoute() {
     if (!name) return
     createResource({ name, owner: "You" })
     setDraftName("")
+    toast({ title: "Resource added", description: name, tone: "success" })
   }
 
   return (
     <AppShell title="Resources">
-      <Card>
-        <CardHeader>
-          <CardTitle>Resources</CardTitle>
-          <CardDescription>
+      <PageHeader
+        title="Resources"
+        description={
+          <>
             Example domain entity. CRUD goes through{" "}
-            <code className="font-mono text-xs">~/lib/resources.ts</code> —
-            swap that file's calls for{" "}
-            <code className="font-mono text-xs">api.get/post/put/del</code>{" "}
-            from <code className="font-mono text-xs">~/lib/api.ts</code> when
-            you have a backend.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="flex flex-col gap-4">
-          <div className="flex flex-wrap items-center gap-2">
-            <div className="relative flex-1 min-w-48">
-              <Search className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                data-action="resources-search"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="Search name, owner, status…"
-                className="pl-8"
-              />
-            </div>
-            <Input
-              data-action="resources-new-name"
-              value={draftName}
-              onChange={(e) => setDraftName(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") create()
-              }}
-              placeholder="New resource name…"
-              className="max-w-64"
-            />
+            <code className="font-mono text-xs">~/lib/resources.ts</code> — swap
+            that file's calls for{" "}
+            <code className="font-mono text-xs">api.get/post/put/del</code> from{" "}
+            <code className="font-mono text-xs">~/lib/api.ts</code> when you have
+            a backend.
+          </>
+        }
+      />
+
+      {loading ? (
+        <ListSkeleton />
+      ) : error ? (
+        <ErrorState
+          message={error}
+          action={
             <Button
-              data-action="resources-create"
-              onClick={create}
-              disabled={!draftName.trim()}
+              data-action="resources-retry"
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                setError(null)
+                setLoading(true)
+                queueMicrotask(() => setLoading(false))
+              }}
             >
-              <Plus className="size-4" /> Add
+              Retry
             </Button>
-          </div>
+          }
+        />
+      ) : (
+        <Card>
+          <CardContent className="flex flex-col gap-4 pt-6">
+            <div className="flex flex-wrap items-center gap-2">
+              <div className="relative flex-1 min-w-48">
+                <Search className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  data-action="resources-search"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder="Search name, owner, status…"
+                  className="pl-8"
+                />
+              </div>
+              <Input
+                data-action="resources-new-name"
+                value={draftName}
+                onChange={(e) => setDraftName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") create()
+                }}
+                placeholder="New resource name…"
+                className="max-w-64"
+              />
+              <Button
+                data-action="resources-create"
+                onClick={create}
+                disabled={!draftName.trim()}
+              >
+                <Plus className="size-4" /> Add
+              </Button>
+            </div>
 
-          <div className="overflow-hidden rounded-lg border bg-card/40">
-            <table className="w-full text-sm">
-              <thead className="bg-muted/50 text-xs uppercase tracking-wide text-muted-foreground">
-                <tr>
-                  <th className="px-3 py-2 text-left font-medium">Name</th>
-                  <th className="px-3 py-2 text-left font-medium">Owner</th>
-                  <th className="px-3 py-2 text-left font-medium">Status</th>
-                  <th className="px-3 py-2 text-left font-medium">Updated</th>
-                  <th className="w-10 px-3 py-2"></th>
-                </tr>
-              </thead>
-              <tbody>
-                {filtered.length === 0 ? (
-                  <tr>
-                    <td
-                      colSpan={5}
-                      className="px-3 py-8 text-center text-muted-foreground"
-                    >
-                      {items.length === 0
-                        ? "No resources yet — add one above."
-                        : "No matches."}
-                    </td>
-                  </tr>
-                ) : (
-                  filtered.map((r) => (
-                    <tr
-                      key={r.id}
-                      className="border-t transition-colors hover:bg-accent/30"
-                    >
-                      <td className="px-3 py-2 font-medium">{r.name}</td>
-                      <td className="px-3 py-2 text-muted-foreground">
-                        {r.owner}
-                      </td>
-                      <td className="px-3 py-2">
-                        <select
-                          data-action={`resources-status-${r.id}`}
-                          value={r.status}
-                          onChange={(e) =>
-                            updateResource(r.id, {
-                              status: e.target.value as Resource["status"],
-                            })
-                          }
-                          className="rounded-md border bg-background px-1.5 py-0.5 text-xs"
-                        >
-                          {statuses.map((s) => (
-                            <option key={s} value={s}>
-                              {s}
-                            </option>
-                          ))}
-                        </select>
-                      </td>
-                      <td className="px-3 py-2 text-xs text-muted-foreground tabular-nums">
-                        {new Date(r.updatedAt).toLocaleDateString()}
-                      </td>
-                      <td className="px-2 py-2 text-right">
-                        <Button
-                          data-action={`resources-delete-${r.id}`}
-                          variant="ghost"
-                          size="icon-sm"
-                          aria-label="Delete"
-                          onClick={() => {
-                            if (window.confirm(`Delete "${r.name}"?`))
-                              deleteResource(r.id)
-                          }}
-                        >
-                          <Trash2 className="size-4 text-destructive" />
-                        </Button>
-                      </td>
+            {items.length === 0 ? (
+              <EmptyState
+                icon={<Boxes className="size-6" />}
+                title="No resources yet"
+                description="Add your first resource with the field above. Everything here is backed by ~/lib/resources.ts."
+              />
+            ) : (
+              <div className="overflow-hidden rounded-lg border bg-card/40">
+                <table className="w-full text-sm">
+                  <thead className="bg-muted/50 text-xs uppercase tracking-wide text-muted-foreground">
+                    <tr>
+                      <th className="px-3 py-2 text-left font-medium">Name</th>
+                      <th className="px-3 py-2 text-left font-medium">Owner</th>
+                      <th className="px-3 py-2 text-left font-medium">Status</th>
+                      <th className="px-3 py-2 text-left font-medium">Updated</th>
+                      <th className="w-10 px-3 py-2"></th>
                     </tr>
-                  ))
-                )}
-              </tbody>
-            </table>
-          </div>
+                  </thead>
+                  <tbody>
+                    {filtered.length === 0 ? (
+                      <tr>
+                        <td
+                          colSpan={5}
+                          className="px-3 py-8 text-center text-muted-foreground"
+                        >
+                          No matches.
+                        </td>
+                      </tr>
+                    ) : (
+                      filtered.map((r) => (
+                        <tr
+                          key={r.id}
+                          className="border-t transition-colors hover:bg-accent/30"
+                        >
+                          <td className="px-3 py-2 font-medium">{r.name}</td>
+                          <td className="px-3 py-2 text-muted-foreground">
+                            {r.owner}
+                          </td>
+                          <td className="px-3 py-2">
+                            <select
+                              data-action={`resources-status-${r.id}`}
+                              value={r.status}
+                              onChange={(e) =>
+                                updateResource(r.id, {
+                                  status: e.target.value as Resource["status"],
+                                })
+                              }
+                              className="rounded-md border bg-background px-1.5 py-0.5 text-xs"
+                            >
+                              {statuses.map((s) => (
+                                <option key={s} value={s}>
+                                  {s}
+                                </option>
+                              ))}
+                            </select>
+                          </td>
+                          <td className="px-3 py-2 text-xs text-muted-foreground tabular-nums">
+                            {new Date(r.updatedAt).toLocaleDateString()}
+                          </td>
+                          <td className="px-2 py-2 text-right">
+                            <ConfirmDialog
+                              trigger={
+                                <Button
+                                  data-action={`resources-delete-${r.id}`}
+                                  variant="ghost"
+                                  size="icon-sm"
+                                  aria-label="Delete"
+                                >
+                                  <Trash2 className="size-4 text-destructive" />
+                                </Button>
+                              }
+                              title="Delete resource?"
+                              description={`"${r.name}" will be permanently removed. This can't be undone.`}
+                              confirmLabel="Delete"
+                              destructive
+                              onConfirm={() => {
+                                deleteResource(r.id)
+                                toast({
+                                  title: "Resource deleted",
+                                  description: r.name,
+                                  tone: "success",
+                                })
+                              }}
+                            />
+                          </td>
+                        </tr>
+                      ))
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            )}
 
-          <p className="text-xs text-muted-foreground">
-            {items.length} total · {filtered.length} shown
-          </p>
-        </CardContent>
-      </Card>
+            <p className="text-xs text-muted-foreground">
+              {items.length} total · {filtered.length} shown
+            </p>
+          </CardContent>
+        </Card>
+      )}
     </AppShell>
   )
 }