feat: auth scaffold, notifications inbox, resources CRUD, vitest baseline, typed API client

Auth
- ~/lib/session.ts: Session type + loadSession/signIn/signOut/hasSession,
  reactive useSession hook (mock backend; replace fetch calls with your
  real auth endpoint when ready)
- routes/login.tsx: form with email/password (mock-validated), bounces
  to ?next= on success
- AppShell: redirects to /login when no session; account-menu Sign out
  now actually signs out; live session.name/email used for the appbar
  avatar (falls back to profile)

Notifications
- ~/lib/notifications.ts: persistent inbox with kinds (info/success/
  warning/error), unreadCount, markRead, markAllRead, dismiss,
  dismissAll; seedIfEmpty for a friendly first-run
- AppShell bell: 320px popover with badge, kind dots, per-row open
  (navigates to href) and dismiss; Mark all read + Clear actions
- Hidden NotificationDispatcher in AppShell so the action bus can
  create real notifications via fill notif-title / notif-body /
  notif-kind / notif-href + click notif-create

Data layer
- ~/lib/api.ts: typed apiFetch<T> + api.get/post/put/patch/del,
  auto-attaches the session token, throws structured ApiError, signs
  out on 401
- ~/lib/resources.ts: example domain entity (CRUD) backed by
  localStorage today; each call is a 1:1 swap for api.get/post/put/del
- routes/resources.tsx: real working table — search, add, inline
  status edit, delete; seeded demo rows on first load

Tests
- vitest + jsdom + @testing-library/react + @testing-library/jest-dom
  + vite-tsconfig-paths installed
- vitest.config.ts (jsdom, globals, ~ aliases via tsconfig-paths)
- vitest.setup.ts (RTL cleanup + localStorage clear between tests)
- app/lib/session.test.ts and resources.test.ts as starter coverage
- npm test / npm run test:watch scripts

UI Control catalog
- Login form, resources CRUD, notifications inbox, and the hidden
  notif-bridge ids tagged so the assistant can drive every new surface

Threads
- ThreadMessage now carries optional agentId so per-message authorship
  survives persona switches and handoffs

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/routes/resources.tsx

@@ -1,6 +1,8 @@
-import { Boxes } from "lucide-react"
+import { useEffect, useMemo, useState } from "react"
+import { Plus, Search, Trash2 } from "lucide-react"
 
 import { AppShell } from "~/components/layout/app-shell"
+import { Button } from "~/components/ui/button"
 import {
   Card,
   CardContent,
@@ -8,35 +10,172 @@ import {
   CardHeader,
   CardTitle,
 } from "~/components/ui/card"
+import { Input } from "~/components/ui/input"
+import {
+  createResource,
+  deleteResource,
+  seedResourcesIfEmpty,
+  updateResource,
+  useResources,
+  type Resource,
+} from "~/lib/resources"
 import { pageTitle } from "~/lib/page-meta"
 
 export const meta = () => pageTitle("Resources")
 
+const statuses: Resource["status"][] = ["active", "paused", "archived"]
+
 export default function ResourcesRoute() {
+  const items = useResources()
+  const [query, setQuery] = useState("")
+  const [draftName, setDraftName] = useState("")
+
+  useEffect(() => {
+    seedResourcesIfEmpty()
+  }, [])
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    return q
+      ? items.filter(
+          (r) =>
+            r.name.toLowerCase().includes(q) ||
+            r.owner.toLowerCase().includes(q) ||
+            r.status.includes(q),
+        )
+      : items
+  }, [items, query])
+
+  const create = () => {
+    const name = draftName.trim()
+    if (!name) return
+    createResource({ name, owner: "You" })
+    setDraftName("")
+  }
+
   return (
     <AppShell title="Resources">
       <Card>
         <CardHeader>
           <CardTitle>Resources</CardTitle>
           <CardDescription>
-            A list/detail surface for the entities your app manages.
+            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>
-          <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">
-              <Boxes className="size-6" />
-            </div>
-            <div className="max-w-md">
-              <p className="font-medium">No resources yet</p>
-              <p className="mt-1 text-sm text-muted-foreground">
-                This route is the canonical "traditional" surface. Drop in{" "}
-                <code className="font-mono text-xs">@crema/table-ui</code> or{" "}
-                <code className="font-mono text-xs">@crema/data-ui</code> when
-                you have data to show.
-              </p>
+        <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"
+            />
+            <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>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          <p className="text-xs text-muted-foreground">
+            {items.length} total · {filtered.length} shown
+          </p>
         </CardContent>
       </Card>
     </AppShell>