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/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}