From ff6baab393aac00ba2aeba349e60d14cb13c592f Mon Sep 17 00:00:00 2001
From: jknapp <jknapp85@gmail.com>
Date: Fri, 15 May 2026 10:57:17 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20Phase=203b=20=E2=80=94=20proper=20Web?=
 =?UTF-8?q?=20UI=20for=20memories,=20projects,=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the debug /me + /connect pages with a real authed app shell.

Pages
- /                       — anonymous landing; redirects to /dashboard once signed in
- /dashboard              — recent memories + top projects, quick "new memory" action
- /memories               — searchable list with hybrid (vector+FTS+tags) scoring;
                            per-result rank breakdown shown inline
- /memories/[id]          — view + inline edit toggle + delete
- /memories/new           — create form with project autocomplete
- /projects               — list with memory counts and last-activity
- /projects/[key]         — that project's memories
- /settings               — read-only Authentik profile + link to tokens
- /settings/tokens        — list / create / revoke CLI tokens

Old URLs preserved as redirects:
- /me      → /dashboard
- /connect → /settings/tokens

Stack additions
- Tailwind v4 with CSS-first @theme tokens (dark only for now)
- App shell in app/(authed)/ — auth guard + top nav with global search box
- Lightweight UI primitives in app/_components/ui/ (Button, Input, Card,
  Badge, EmptyState, Container, PageHeader)
- Search logic extracted from MCP tool into lib/memories.ts so Web UI and
  MCP both call the same RRF code path
- Memory CRUD via Server Actions in lib/memory-actions.ts; audit_log
  rows are tagged actor='web' to distinguish from MCP writes

Per-token revoke
- New cli_tokens table (id, user_id, jti unique, name, created_at,
  last_used_at, expires_at, revoked_at) — migration 0001_cli_tokens.sql
- mintCliToken now records jti + name; verifyCliToken enforces revocation
  for tracked tokens. Legacy tokens minted before this change (no jti)
  are accepted on signature alone until they expire naturally.
- /settings/tokens lists active + revoked tokens with one-click revoke

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/app/(authed)/_nav.tsx                |  44 ++
 apps/web/app/(authed)/_search-box.tsx         |  19 +
 apps/web/app/(authed)/_user-menu.tsx          |  28 ++
 apps/web/app/(authed)/dashboard/page.tsx      | 154 ++++++
 apps/web/app/(authed)/layout.tsx              |  19 +
 apps/web/app/(authed)/memories/[id]/page.tsx  | 142 ++++++
 apps/web/app/(authed)/memories/new/page.tsx   | 108 ++++
 apps/web/app/(authed)/memories/page.tsx       | 228 +++++++++
 apps/web/app/(authed)/projects/[key]/page.tsx | 121 +++++
 apps/web/app/(authed)/projects/page.tsx       |  77 +++
 apps/web/app/(authed)/settings/page.tsx       |  78 +++
 .../web/app/(authed)/settings/tokens/page.tsx | 162 ++++++
 .../settings/tokens/tokens-manager.tsx        |  67 +++
 apps/web/app/_components/ui/badge.tsx         |  28 ++
 apps/web/app/_components/ui/button.tsx        |  46 ++
 apps/web/app/_components/ui/card.tsx          |  32 ++
 apps/web/app/_components/ui/container.tsx     |  32 ++
 apps/web/app/_components/ui/empty-state.tsx   |  21 +
 apps/web/app/_components/ui/input.tsx         |  45 ++
 apps/web/app/connect/connect-form.tsx         |  61 ---
 apps/web/app/connect/page.tsx                 |  72 +--
 apps/web/app/globals.css                      | 121 +++--
 apps/web/app/me/page.tsx                      |  29 +-
 apps/web/app/page.tsx                         |  65 ++-
 apps/web/drizzle/0001_cli_tokens.sql          |  24 +
 apps/web/lib/auth/cli-token.ts                | 100 +++-
 apps/web/lib/db/schema.ts                     |  21 +
 apps/web/lib/mcp/tools.ts                     | 124 +----
 apps/web/lib/memories.ts                      | 148 ++++++
 apps/web/lib/memory-actions.ts                | 184 +++++++
 apps/web/package.json                         |   2 +
 apps/web/postcss.config.mjs                   |   5 +
 pnpm-lock.yaml                                | 463 ++++++++++++++++--
 33 files changed, 2475 insertions(+), 395 deletions(-)
 create mode 100644 apps/web/app/(authed)/_nav.tsx
 create mode 100644 apps/web/app/(authed)/_search-box.tsx
 create mode 100644 apps/web/app/(authed)/_user-menu.tsx
 create mode 100644 apps/web/app/(authed)/dashboard/page.tsx
 create mode 100644 apps/web/app/(authed)/layout.tsx
 create mode 100644 apps/web/app/(authed)/memories/[id]/page.tsx
 create mode 100644 apps/web/app/(authed)/memories/new/page.tsx
 create mode 100644 apps/web/app/(authed)/memories/page.tsx
 create mode 100644 apps/web/app/(authed)/projects/[key]/page.tsx
 create mode 100644 apps/web/app/(authed)/projects/page.tsx
 create mode 100644 apps/web/app/(authed)/settings/page.tsx
 create mode 100644 apps/web/app/(authed)/settings/tokens/page.tsx
 create mode 100644 apps/web/app/(authed)/settings/tokens/tokens-manager.tsx
 create mode 100644 apps/web/app/_components/ui/badge.tsx
 create mode 100644 apps/web/app/_components/ui/button.tsx
 create mode 100644 apps/web/app/_components/ui/card.tsx
 create mode 100644 apps/web/app/_components/ui/container.tsx
 create mode 100644 apps/web/app/_components/ui/empty-state.tsx
 create mode 100644 apps/web/app/_components/ui/input.tsx
 delete mode 100644 apps/web/app/connect/connect-form.tsx
 create mode 100644 apps/web/drizzle/0001_cli_tokens.sql
 create mode 100644 apps/web/lib/memories.ts
 create mode 100644 apps/web/lib/memory-actions.ts
 create mode 100644 apps/web/postcss.config.mjs

diff --git a/apps/web/app/(authed)/_nav.tsx b/apps/web/app/(authed)/_nav.tsx
new file mode 100644
index 0000000..5168782
--- /dev/null
+++ b/apps/web/app/(authed)/_nav.tsx
@@ -0,0 +1,44 @@
+import Link from "next/link";
+import { Container } from "@/app/_components/ui/container";
+import { UserMenu } from "./_user-menu";
+import { SearchBox } from "./_search-box";
+import type { Session } from "next-auth";
+
+export function Nav({ user }: { user: Session["user"] }) {
+  return (
+    <header className="fixed top-0 inset-x-0 z-20 h-14 bg-surface-1/80 backdrop-blur border-b border-border">
+      <Container className="h-full flex items-center gap-4">
+        <Link
+          href="/memories"
+          className="flex items-center gap-2 text-fg font-semibold tracking-tight no-underline"
+        >
+          <span className="inline-block size-2 rounded-full bg-accent-400" />
+          shared-memory
+        </Link>
+
+        <nav className="hidden md:flex items-center gap-1 ml-2">
+          <NavLink href="/memories">Memories</NavLink>
+          <NavLink href="/projects">Projects</NavLink>
+          <NavLink href="/settings">Settings</NavLink>
+        </nav>
+
+        <div className="flex-1 max-w-md ml-auto">
+          <SearchBox />
+        </div>
+
+        <UserMenu user={user} />
+      </Container>
+    </header>
+  );
+}
+
+function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
+  return (
+    <Link
+      href={href}
+      className="px-2.5 py-1.5 rounded-md text-sm text-fg-muted hover:text-fg hover:bg-surface-2 no-underline"
+    >
+      {children}
+    </Link>
+  );
+}
diff --git a/apps/web/app/(authed)/_search-box.tsx b/apps/web/app/(authed)/_search-box.tsx
new file mode 100644
index 0000000..bb72d03
--- /dev/null
+++ b/apps/web/app/(authed)/_search-box.tsx
@@ -0,0 +1,19 @@
+import { Input } from "@/app/_components/ui/input";
+
+/**
+ * Global search — submits a GET to /memories with `?q=`. Server-rendered
+ * results page handles the actual memory.search call.
+ */
+export function SearchBox() {
+  return (
+    <form action="/memories" method="GET" role="search">
+      <Input
+        type="search"
+        name="q"
+        placeholder="Search memories…"
+        aria-label="Search memories"
+        autoComplete="off"
+      />
+    </form>
+  );
+}
diff --git a/apps/web/app/(authed)/_user-menu.tsx b/apps/web/app/(authed)/_user-menu.tsx
new file mode 100644
index 0000000..f42e1d2
--- /dev/null
+++ b/apps/web/app/(authed)/_user-menu.tsx
@@ -0,0 +1,28 @@
+import { signOut } from "@/auth";
+import { Button } from "@/app/_components/ui/button";
+import type { Session } from "next-auth";
+
+async function signOutAction() {
+  "use server";
+  await signOut({ redirectTo: "/" });
+}
+
+export function UserMenu({ user }: { user: Session["user"] }) {
+  const label = user.email ?? user.name ?? user.id;
+  // Compact, single-line label; truncate on small screens via Tailwind.
+  return (
+    <div className="flex items-center gap-2">
+      <span
+        className="hidden sm:inline-block text-xs text-fg-muted max-w-[160px] truncate"
+        title={label}
+      >
+        {label}
+      </span>
+      <form action={signOutAction}>
+        <Button type="submit" variant="secondary" size="sm">
+          Sign out
+        </Button>
+      </form>
+    </div>
+  );
+}
diff --git a/apps/web/app/(authed)/dashboard/page.tsx b/apps/web/app/(authed)/dashboard/page.tsx
new file mode 100644
index 0000000..f6b5f15
--- /dev/null
+++ b/apps/web/app/(authed)/dashboard/page.tsx
@@ -0,0 +1,154 @@
+import Link from "next/link";
+import { and, desc, eq, isNull, sql, count } from "drizzle-orm";
+import { auth } from "@/auth";
+import { db } from "@/lib/db/client";
+import { memories, projects } from "@/lib/db/schema";
+import { Container, PageHeader } from "@/app/_components/ui/container";
+import { Card, CardBody, CardHeader } from "@/app/_components/ui/card";
+import { Badge } from "@/app/_components/ui/badge";
+import { Button } from "@/app/_components/ui/button";
+import { EmptyState } from "@/app/_components/ui/empty-state";
+
+export const dynamic = "force-dynamic";
+
+export default async function DashboardPage() {
+  const session = await auth();
+  const userId = session!.user.id;
+
+  const [counts, recent, topProjects] = await Promise.all([
+    db
+      .select({
+        total: count(memories.id),
+      })
+      .from(memories)
+      .where(and(eq(memories.userId, userId), isNull(memories.deletedAt))),
+    db
+      .select({
+        id: memories.id,
+        content: memories.content,
+        scope: memories.scope,
+        tags: memories.tags,
+        createdAt: memories.createdAt,
+        projectKey: projects.key,
+      })
+      .from(memories)
+      .leftJoin(projects, eq(memories.projectId, projects.id))
+      .where(and(eq(memories.userId, userId), isNull(memories.deletedAt)))
+      .orderBy(desc(memories.createdAt))
+      .limit(5),
+    db
+      .select({
+        id: projects.id,
+        key: projects.key,
+        displayName: projects.displayName,
+        memoryCount: sql<number>`count(${memories.id})::int`,
+      })
+      .from(projects)
+      .leftJoin(
+        memories,
+        and(eq(memories.projectId, projects.id), isNull(memories.deletedAt)),
+      )
+      .where(eq(projects.userId, userId))
+      .groupBy(projects.id)
+      .orderBy(desc(sql`count(${memories.id})`))
+      .limit(4),
+  ]);
+
+  const memoryTotal = counts[0]?.total ?? 0;
+
+  return (
+    <Container className="pt-6">
+      <PageHeader
+        title={`Welcome, ${session!.user.name ?? session!.user.email ?? "there"}`}
+        description={`${memoryTotal} memor${memoryTotal === 1 ? "y" : "ies"} across ${topProjects.length} project${topProjects.length === 1 ? "" : "s"}.`}
+        actions={
+          <Link href="/memories/new" className="no-underline">
+            <Button>New memory</Button>
+          </Link>
+        }
+      />
+
+      <div className="grid gap-6 md:grid-cols-3">
+        <section className="md:col-span-2 space-y-2">
+          <h2 className="text-sm font-medium text-fg-muted mb-2">Recent</h2>
+          {recent.length === 0 ? (
+            <EmptyState
+              title="No memories yet"
+              description="Write one from the MCP, or create one here."
+              action={
+                <Link href="/memories/new" className="no-underline">
+                  <Button>Create the first one</Button>
+                </Link>
+              }
+            />
+          ) : (
+            recent.map((m) => (
+              <Link
+                key={m.id}
+                href={`/memories/${m.id}`}
+                className="block no-underline"
+              >
+                <Card className="hover:border-border-strong transition-colors">
+                  <CardBody className="space-y-2">
+                    <div className="flex items-center gap-2 text-xs text-fg-subtle">
+                      <Badge tone={m.scope === "user" ? "accent" : "neutral"}>
+                        {m.scope}
+                      </Badge>
+                      {m.projectKey ? <span>· {m.projectKey}</span> : null}
+                      <span className="ml-auto">
+                        {new Date(m.createdAt).toLocaleDateString()}
+                      </span>
+                    </div>
+                    <p className="text-sm text-fg line-clamp-2">{m.content}</p>
+                    {m.tags.length ? (
+                      <div className="flex gap-1 flex-wrap">
+                        {m.tags.slice(0, 6).map((t) => (
+                          <Badge key={t}>{t}</Badge>
+                        ))}
+                      </div>
+                    ) : null}
+                  </CardBody>
+                </Card>
+              </Link>
+            ))
+          )}
+        </section>
+
+        <section>
+          <h2 className="text-sm font-medium text-fg-muted mb-2">Projects</h2>
+          {topProjects.length === 0 ? (
+            <p className="text-sm text-fg-subtle">No projects yet.</p>
+          ) : (
+            <Card>
+              {topProjects.map((p, i) => (
+                <Link
+                  key={p.id}
+                  href={`/projects/${encodeURIComponent(p.key)}`}
+                  className={`block px-4 py-3 hover:bg-surface-2 no-underline ${i > 0 ? "border-t border-border" : ""}`}
+                >
+                  <div className="flex items-center gap-2">
+                    <span className="font-mono text-sm text-fg truncate">
+                      {p.key}
+                    </span>
+                    <Badge className="ml-auto">{p.memoryCount}</Badge>
+                  </div>
+                  {p.displayName && p.displayName !== p.key ? (
+                    <span className="block text-xs text-fg-muted truncate">
+                      {p.displayName}
+                    </span>
+                  ) : null}
+                </Link>
+              ))}
+              <Link
+                href="/projects"
+                className="block px-4 py-2 text-xs text-fg-muted border-t border-border hover:bg-surface-2 no-underline"
+              >
+                All projects →
+              </Link>
+            </Card>
+          )}
+        </section>
+      </div>
+    </Container>
+  );
+}
diff --git a/apps/web/app/(authed)/layout.tsx b/apps/web/app/(authed)/layout.tsx
new file mode 100644
index 0000000..94df073
--- /dev/null
+++ b/apps/web/app/(authed)/layout.tsx
@@ -0,0 +1,19 @@
+import { redirect } from "next/navigation";
+import type { ReactNode } from "react";
+import { auth } from "@/auth";
+import { Nav } from "./_nav";
+
+export const dynamic = "force-dynamic";
+
+export default async function AuthedLayout({ children }: { children: ReactNode }) {
+  const session = await auth();
+  if (!session?.user) {
+    redirect("/api/auth/signin?callbackUrl=/memories");
+  }
+  return (
+    <>
+      <Nav user={session.user} />
+      <div className="pt-16 pb-16">{children}</div>
+    </>
+  );
+}
diff --git a/apps/web/app/(authed)/memories/[id]/page.tsx b/apps/web/app/(authed)/memories/[id]/page.tsx
new file mode 100644
index 0000000..0b54fd8
--- /dev/null
+++ b/apps/web/app/(authed)/memories/[id]/page.tsx
@@ -0,0 +1,142 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { and, eq, isNull } from "drizzle-orm";
+import { auth } from "@/auth";
+import { db } from "@/lib/db/client";
+import { memories, projects } from "@/lib/db/schema";
+import { updateMemoryAction, deleteMemoryAction } from "@/lib/memory-actions";
+import { Container, PageHeader } from "@/app/_components/ui/container";
+import { Card, CardBody, CardHeader } from "@/app/_components/ui/card";
+import { Input, Textarea, Label } from "@/app/_components/ui/input";
+import { Button } from "@/app/_components/ui/button";
+import { Badge } from "@/app/_components/ui/badge";
+
+export const dynamic = "force-dynamic";
+
+export default async function MemoryDetailPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string }>;
+  searchParams: Promise<{ edit?: string }>;
+}) {
+  const session = await auth();
+  const userId = session!.user.id;
+  const { id } = await params;
+  const { edit } = await searchParams;
+
+  const rows = await db
+    .select({
+      id: memories.id,
+      scope: memories.scope,
+      content: memories.content,
+      tags: memories.tags,
+      createdAt: memories.createdAt,
+      updatedAt: memories.updatedAt,
+      projectKey: projects.key,
+      projectId: memories.projectId,
+    })
+    .from(memories)
+    .leftJoin(projects, eq(memories.projectId, projects.id))
+    .where(
+      and(eq(memories.id, id), eq(memories.userId, userId), isNull(memories.deletedAt)),
+    )
+    .limit(1);
+
+  const m = rows[0];
+  if (!m) notFound();
+
+  const isEditing = edit === "1";
+
+  return (
+    <Container className="pt-6 max-w-3xl">
+      <PageHeader
+        title={isEditing ? "Edit memory" : "Memory"}
+        description={<span className="font-mono text-xs text-fg-subtle">{m.id}</span>}
+        actions={
+          <>
+            <Link href="/memories" className="no-underline">
+              <Button type="button" variant="secondary">Back</Button>
+            </Link>
+            {!isEditing ? (
+              <Link href={`/memories/${m.id}?edit=1`} className="no-underline">
+                <Button>Edit</Button>
+              </Link>
+            ) : null}
+          </>
+        }
+      />
+
+      <Card className="mb-4">
+        <CardHeader className="flex items-center gap-2 text-xs text-fg-muted">
+          <Badge tone={m.scope === "user" ? "accent" : "neutral"}>{m.scope}</Badge>
+          {m.projectKey ? <span className="font-mono">{m.projectKey}</span> : null}
+          <span>· Created {new Date(m.createdAt).toLocaleString()}</span>
+          {m.updatedAt.getTime() !== m.createdAt.getTime() ? (
+            <span>· Updated {new Date(m.updatedAt).toLocaleString()}</span>
+          ) : null}
+        </CardHeader>
+
+        {isEditing ? (
+          <CardBody>
+            <form action={updateMemoryAction} className="space-y-4">
+              <input type="hidden" name="id" value={m.id} />
+              <div>
+                <Label htmlFor="content">Content</Label>
+                <Textarea
+                  id="content"
+                  name="content"
+                  required
+                  rows={12}
+                  defaultValue={m.content}
+                  className="mt-1"
+                />
+              </div>
+              <div>
+                <Label htmlFor="tags" hint="comma- or space-separated">Tags</Label>
+                <Input
+                  id="tags"
+                  name="tags"
+                  defaultValue={m.tags.join(", ")}
+                  className="mt-1"
+                />
+              </div>
+              <div className="flex justify-end gap-2 pt-2">
+                <Link href={`/memories/${m.id}`} className="no-underline">
+                  <Button type="button" variant="secondary">Cancel</Button>
+                </Link>
+                <Button type="submit">Save changes</Button>
+              </div>
+            </form>
+          </CardBody>
+        ) : (
+          <CardBody>
+            <pre className="whitespace-pre-wrap break-words bg-transparent border-0 p-0 text-sm text-fg leading-relaxed">
+              {m.content}
+            </pre>
+            {m.tags.length ? (
+              <div className="flex gap-1 flex-wrap mt-4">
+                {m.tags.map((t) => (
+                  <Badge key={t}>{t}</Badge>
+                ))}
+              </div>
+            ) : null}
+          </CardBody>
+        )}
+      </Card>
+
+      {!isEditing ? (
+        <form
+          action={deleteMemoryAction}
+          onSubmit={() => undefined}
+          className="flex justify-end"
+        >
+          <input type="hidden" name="id" value={m.id} />
+          <Button type="submit" variant="danger" size="sm">
+            Delete memory
+          </Button>
+        </form>
+      ) : null}
+    </Container>
+  );
+}
diff --git a/apps/web/app/(authed)/memories/new/page.tsx b/apps/web/app/(authed)/memories/new/page.tsx
new file mode 100644
index 0000000..d8cf8b7
--- /dev/null
+++ b/apps/web/app/(authed)/memories/new/page.tsx
@@ -0,0 +1,108 @@
+import Link from "next/link";
+import { desc, eq } from "drizzle-orm";
+import { auth } from "@/auth";
+import { db } from "@/lib/db/client";
+import { projects } from "@/lib/db/schema";
+import { createMemoryAction } from "@/lib/memory-actions";
+import { Container, PageHeader } from "@/app/_components/ui/container";
+import { Card, CardBody } from "@/app/_components/ui/card";
+import { Input, Textarea, Label } from "@/app/_components/ui/input";
+import { Button } from "@/app/_components/ui/button";
+
+export const dynamic = "force-dynamic";
+
+export default async function NewMemoryPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ project?: string; scope?: string }>;
+}) {
+  const session = await auth();
+  const userId = session!.user.id;
+  const params = await searchParams;
+  const initialProject = params.project ?? "";
+  const initialScope = params.scope === "user" ? "user" : "project";
+
+  const projectList = await db
+    .select({ key: projects.key, displayName: projects.displayName })
+    .from(projects)
+    .where(eq(projects.userId, userId))
+    .orderBy(desc(projects.updatedAt))
+    .limit(50);
+
+  return (
+    <Container className="pt-6 max-w-2xl">
+      <PageHeader
+        title="New memory"
+        description="Pick a scope, write content, optionally add tags."
+      />
+
+      <Card>
+        <CardBody>
+          <form action={createMemoryAction} className="space-y-4">
+            <div>
+              <Label htmlFor="scope">Scope</Label>
+              <select
+                id="scope"
+                name="scope"
+                defaultValue={initialScope}
+                className="mt-1 h-9 px-2 rounded-md bg-surface-1 border border-border text-fg text-sm w-full"
+              >
+                <option value="project">Project — attached to a project</option>
+                <option value="user">User — global across all projects</option>
+              </select>
+            </div>
+
+            <div>
+              <Label htmlFor="project" hint="Required for project scope">
+                Project key
+              </Label>
+              <Input
+                id="project"
+                name="project"
+                defaultValue={initialProject}
+                placeholder="repo name, slug, or any stable string"
+                list="project-list"
+                className="mt-1"
+              />
+              {projectList.length > 0 ? (
+                <datalist id="project-list">
+                  {projectList.map((p) => (
+                    <option key={p.key} value={p.key}>
+                      {p.displayName ?? p.key}
+                    </option>
+                  ))}
+                </datalist>
+              ) : null}
+            </div>
+
+            <div>
+              <Label htmlFor="content">Content</Label>
+              <Textarea
+                id="content"
+                name="content"
+                required
+                rows={10}
+                placeholder="What should the next session know?"
+                className="mt-1"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="tags" hint="comma- or space-separated">
+                Tags
+              </Label>
+              <Input id="tags" name="tags" placeholder="auth, deployment, …" className="mt-1" />
+            </div>
+
+            <div className="flex justify-end gap-2 pt-2">
+              <Link href="/memories" className="no-underline">
+                <Button type="button" variant="secondary">Cancel</Button>
+              </Link>
+              <Button type="submit">Save memory</Button>
+            </div>
+          </form>
+        </CardBody>
+      </Card>
+    </Container>
+  );
+}
diff --git a/apps/web/app/(authed)/memories/page.tsx b/apps/web/app/(authed)/memories/page.tsx
new file mode 100644
index 0000000..aeb6ee0
--- /dev/null
+++ b/apps/web/app/(authed)/memories/page.tsx
@@ -0,0 +1,228 @@
+import Link from "next/link";
+import { and, desc, eq, isNull, inArray, sql } from "drizzle-orm";
+import { auth } from "@/auth";
+import { db } from "@/lib/db/client";
+import { memories, projects } from "@/lib/db/schema";
+import { searchMemories } from "@/lib/memories";
+import { Container, PageHeader } from "@/app/_components/ui/container";
+import { Card, CardBody } from "@/app/_components/ui/card";
+import { Badge } from "@/app/_components/ui/badge";
+import { Button } from "@/app/_components/ui/button";
+import { Input } from "@/app/_components/ui/input";
+import { EmptyState } from "@/app/_components/ui/empty-state";
+
+export const dynamic = "force-dynamic";
+
+type Scope = "project" | "user";
+
+interface MemoryRow {
+  id: string;
+  scope: "project" | "user";
+  projectKey: string | null;
+  content: string;
+  tags: string[];
+  createdAt: Date;
+  rank?: { rrfScore: number; vectorRank: number | null; ftsRank: number | null; tagRank: number | null };
+}
+
+async function fetchMemoriesByIds(
+  userId: string,
+  ids: string[],
+): Promise<Map<string, MemoryRow>> {
+  if (ids.length === 0) return new Map();
+  const rows = await db
+    .select({
+      id: memories.id,
+      scope: memories.scope,
+      content: memories.content,
+      tags: memories.tags,
+      createdAt: memories.createdAt,
+      projectKey: projects.key,
+    })
+    .from(memories)
+    .leftJoin(projects, eq(memories.projectId, projects.id))
+    .where(and(eq(memories.userId, userId), inArray(memories.id, ids), isNull(memories.deletedAt)));
+  return new Map(rows.map((r) => [r.id, r as MemoryRow]));
+}
+
+async function listRecent(userId: string, scope?: Scope, project?: string): Promise<MemoryRow[]> {
+  const filters = [eq(memories.userId, userId), isNull(memories.deletedAt)];
+  if (scope) filters.push(eq(memories.scope, scope));
+  if (project) {
+    filters.push(
+      sql`${memories.projectId} = (
+        SELECT id FROM ${projects}
+        WHERE ${projects.userId} = ${userId} AND ${projects.key} = ${project}
+      )`,
+    );
+  }
+  const rows = await db
+    .select({
+      id: memories.id,
+      scope: memories.scope,
+      content: memories.content,
+      tags: memories.tags,
+      createdAt: memories.createdAt,
+      projectKey: projects.key,
+    })
+    .from(memories)
+    .leftJoin(projects, eq(memories.projectId, projects.id))
+    .where(and(...filters))
+    .orderBy(desc(memories.createdAt))
+    .limit(50);
+  return rows;
+}
+
+export default async function MemoriesPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ q?: string; scope?: string; project?: string }>;
+}) {
+  const session = await auth();
+  const userId = session!.user.id;
+  const params = await searchParams;
+  const q = params.q?.trim() || undefined;
+  const scope = params.scope === "user" || params.scope === "project" ? params.scope : undefined;
+  const project = params.project?.trim() || undefined;
+
+  let rows: MemoryRow[] = [];
+  let debug: { vec: number; fts: number; tag: number } | null = null;
+
+  if (q) {
+    const result = await searchMemories(userId, q, { scope, projectKey: project }, 30);
+    const ids = result.hits.map((h) => h.id);
+    const byId = await fetchMemoriesByIds(userId, ids);
+    rows = result.hits.flatMap((h) => {
+      const r = byId.get(h.id);
+      return r ? [{ ...r, rank: h.rank }] : [];
+    });
+    debug = result.debug;
+  } else {
+    rows = await listRecent(userId, scope, project);
+  }
+
+  return (
+    <Container className="pt-6">
+      <PageHeader
+        title="Memories"
+        description={
+          q
+            ? `${rows.length} result${rows.length === 1 ? "" : "s"} for "${q}"`
+            : "Most recent first."
+        }
+        actions={
+          <Link href="/memories/new" className="no-underline">
+            <Button>New memory</Button>
+          </Link>
+        }
+      />
+
+      <form
+        method="GET"
+        action="/memories"
+        className="mb-6 flex flex-wrap items-center gap-2"
+      >
+        <Input
+          name="q"
+          placeholder="Search…"
+          defaultValue={q ?? ""}
+          aria-label="Search query"
+          className="flex-1 min-w-[200px]"
+        />
+        <FilterSelect name="scope" value={scope} options={["", "project", "user"]} placeholder="Any scope" />
+        <Input
+          name="project"
+          placeholder="Project key…"
+          defaultValue={project ?? ""}
+          className="w-44"
+        />
+        <Button type="submit" variant="secondary">Apply</Button>
+      </form>
+
+      {debug ? (
+        <p className="text-xs text-fg-subtle mb-3">
+          candidates · vector: {debug.vec} · fts: {debug.fts} · tag: {debug.tag}
+        </p>
+      ) : null}
+
+      {rows.length === 0 ? (
+        <EmptyState
+          title={q ? "Nothing matched" : "No memories yet"}
+          description={q ? "Try a different query or remove filters." : "Create one or write via the MCP."}
+          action={
+            !q ? (
+              <Link href="/memories/new" className="no-underline">
+                <Button>Create the first one</Button>
+              </Link>
+            ) : null
+          }
+        />
+      ) : (
+        <ul className="space-y-2">
+          {rows.map((m) => (
+            <li key={m.id}>
+              <Link href={`/memories/${m.id}`} className="block no-underline">
+                <Card className="hover:border-border-strong transition-colors">
+                  <CardBody className="space-y-2">
+                    <div className="flex items-center gap-2 text-xs text-fg-subtle flex-wrap">
+                      <Badge tone={m.scope === "user" ? "accent" : "neutral"}>
+                        {m.scope}
+                      </Badge>
+                      {m.projectKey ? (
+                        <span className="font-mono">· {m.projectKey}</span>
+                      ) : null}
+                      <span>·</span>
+                      <span>{new Date(m.createdAt).toLocaleString()}</span>
+                      {m.rank ? (
+                        <span className="ml-auto text-fg-subtle">
+                          rrf {m.rank.rrfScore.toFixed(4)} · v
+                          {m.rank.vectorRank ?? "−"} · f
+                          {m.rank.ftsRank ?? "−"} · t
+                          {m.rank.tagRank ?? "−"}
+                        </span>
+                      ) : null}
+                    </div>
+                    <p className="text-sm text-fg line-clamp-3">{m.content}</p>
+                    {m.tags.length ? (
+                      <div className="flex gap-1 flex-wrap">
+                        {m.tags.map((t) => (
+                          <Badge key={t}>{t}</Badge>
+                        ))}
+                      </div>
+                    ) : null}
+                  </CardBody>
+                </Card>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </Container>
+  );
+}
+
+function FilterSelect({
+  name,
+  value,
+  options,
+  placeholder,
+}: {
+  name: string;
+  value: string | undefined;
+  options: string[];
+  placeholder: string;
+}) {
+  return (
+    <select
+      name={name}
+      defaultValue={value ?? ""}
+      className="h-9 px-2 rounded-md bg-surface-1 border border-border text-fg text-sm"
+    >
+      {options.map((o) => (
+        <option key={o} value={o}>
+          {o === "" ? placeholder : o}
+        </option>
+      ))}
+    </select>
+  );
+}
diff --git a/apps/web/app/(authed)/projects/[key]/page.tsx b/apps/web/app/(authed)/projects/[key]/page.tsx
new file mode 100644
index 0000000..8e3224b
--- /dev/null
+++ b/apps/web/app/(authed)/projects/[key]/page.tsx
@@ -0,0 +1,121 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { and, desc, eq, isNull } from "drizzle-orm";
+import { auth } from "@/auth";
+import { db } from "@/lib/db/client";
+import { memories, projects } from "@/lib/db/schema";
+import { Container, PageHeader } from "@/app/_components/ui/container";
+import { Card, CardBody } from "@/app/_components/ui/card";
+import { Badge } from "@/app/_components/ui/badge";
+import { Button } from "@/app/_components/ui/button";
+import { EmptyState } from "@/app/_components/ui/empty-state";
+
+export const dynamic = "force-dynamic";
+
+export default async function ProjectDetailPage({
+  params,
+}: {
+  params: Promise<{ key: string }>;
+}) {
+  const session = await auth();
+  const userId = session!.user.id;
+  const { key: rawKey } = await params;
+  const key = decodeURIComponent(rawKey);
+
+  const projectRow = await db
+    .select()
+    .from(projects)
+    .where(and(eq(projects.userId, userId), eq(projects.key, key)))
+    .limit(1);
+  const project = projectRow[0];
+  if (!project) notFound();
+
+  const mem = await db
+    .select({
+      id: memories.id,
+      scope: memories.scope,
+      content: memories.content,
+      tags: memories.tags,
+      createdAt: memories.createdAt,
+    })
+    .from(memories)
+    .where(
+      and(
+        eq(memories.userId, userId),
+        eq(memories.projectId, project.id),
+        isNull(memories.deletedAt),
+      ),
+    )
+    .orderBy(desc(memories.createdAt))
+    .limit(100);
+
+  return (
+    <Container className="pt-6">
+      <PageHeader
+        title={project.displayName ?? project.key}
+        description={
+          <>
+            <span className="font-mono">{project.key}</span>
+            {" · "}
+            {mem.length} memor{mem.length === 1 ? "y" : "ies"}
+          </>
+        }
+        actions={
+          <>
+            <Link href="/projects" className="no-underline">
+              <Button type="button" variant="secondary">All projects</Button>
+            </Link>
+            <Link
+              href={`/memories/new?project=${encodeURIComponent(project.key)}`}
+              className="no-underline"
+            >
+              <Button>New in this project</Button>
+            </Link>
+          </>
+        }
+      />
+
+      {mem.length === 0 ? (
+        <EmptyState
+          title="No memories in this project yet"
+          description="Use the MCP from a Claude Code session, or create one here."
+          action={
+            <Link
+              href={`/memories/new?project=${encodeURIComponent(project.key)}`}
+              className="no-underline"
+            >
+              <Button>Create the first one</Button>
+            </Link>
+          }
+        />
+      ) : (
+        <ul className="space-y-2">
+          {mem.map((m) => (
+            <li key={m.id}>
+              <Link href={`/memories/${m.id}`} className="block no-underline">
+                <Card className="hover:border-border-strong transition-colors">
+                  <CardBody className="space-y-2">
+                    <div className="flex items-center gap-2 text-xs text-fg-subtle">
+                      <Badge tone={m.scope === "user" ? "accent" : "neutral"}>
+                        {m.scope}
+                      </Badge>
+                      <span>{new Date(m.createdAt).toLocaleString()}</span>
+                    </div>
+                    <p className="text-sm text-fg line-clamp-3">{m.content}</p>
+                    {m.tags.length ? (
+                      <div className="flex gap-1 flex-wrap">
+                        {m.tags.map((t) => (
+                          <Badge key={t}>{t}</Badge>
+                        ))}
+                      </div>
+                    ) : null}
+                  </CardBody>
+                </Card>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </Container>
+  );
+}
diff --git a/apps/web/app/(authed)/projects/page.tsx b/apps/web/app/(authed)/projects/page.tsx
new file mode 100644
index 0000000..2a6f1c1
--- /dev/null
+++ b/apps/web/app/(authed)/projects/page.tsx
@@ -0,0 +1,77 @@
+import Link from "next/link";
+import { and, desc, eq, isNull, sql } from "drizzle-orm";
+import { auth } from "@/auth";
+import { db } from "@/lib/db/client";
+import { memories, projects } from "@/lib/db/schema";
+import { Container, PageHeader } from "@/app/_components/ui/container";
+import { Card } from "@/app/_components/ui/card";
+import { Badge } from "@/app/_components/ui/badge";
+import { EmptyState } from "@/app/_components/ui/empty-state";
+
+export const dynamic = "force-dynamic";
+
+export default async function ProjectsPage() {
+  const session = await auth();
+  const userId = session!.user.id;
+
+  const rows = await db
+    .select({
+      id: projects.id,
+      key: projects.key,
+      displayName: projects.displayName,
+      createdAt: projects.createdAt,
+      memoryCount: sql<number>`count(${memories.id})::int`,
+      lastActivity: sql<Date | null>`max(${memories.createdAt})`,
+    })
+    .from(projects)
+    .leftJoin(
+      memories,
+      and(eq(memories.projectId, projects.id), isNull(memories.deletedAt)),
+    )
+    .where(eq(projects.userId, userId))
+    .groupBy(projects.id)
+    .orderBy(desc(sql`max(${memories.createdAt})`));
+
+  return (
+    <Container className="pt-6">
+      <PageHeader
+        title="Projects"
+        description={`${rows.length} project${rows.length === 1 ? "" : "s"}.`}
+      />
+
+      {rows.length === 0 ? (
+        <EmptyState
+          title="No projects yet"
+          description="Projects are created automatically the first time you write a project-scoped memory or call project.identify from the MCP."
+        />
+      ) : (
+        <Card>
+          {rows.map((p, i) => (
+            <Link
+              key={p.id}
+              href={`/projects/${encodeURIComponent(p.key)}`}
+              className={`block px-4 py-3 hover:bg-surface-2 no-underline ${i > 0 ? "border-t border-border" : ""}`}
+            >
+              <div className="flex items-center gap-3">
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="font-mono text-sm text-fg truncate">{p.key}</span>
+                    <Badge>{p.memoryCount}</Badge>
+                  </div>
+                  {p.displayName && p.displayName !== p.key ? (
+                    <div className="text-xs text-fg-muted truncate mt-0.5">{p.displayName}</div>
+                  ) : null}
+                </div>
+                <div className="text-xs text-fg-subtle whitespace-nowrap">
+                  {p.lastActivity
+                    ? `last write ${new Date(p.lastActivity).toLocaleDateString()}`
+                    : "empty"}
+                </div>
+              </div>
+            </Link>
+          ))}
+        </Card>
+      )}
+    </Container>
+  );
+}
diff --git a/apps/web/app/(authed)/settings/page.tsx b/apps/web/app/(authed)/settings/page.tsx
new file mode 100644
index 0000000..1772bbf
--- /dev/null
+++ b/apps/web/app/(authed)/settings/page.tsx
@@ -0,0 +1,78 @@
+import Link from "next/link";
+import { eq } from "drizzle-orm";
+import { auth } from "@/auth";
+import { db } from "@/lib/db/client";
+import { users } from "@/lib/db/schema";
+import { Container, PageHeader } from "@/app/_components/ui/container";
+import { Card, CardBody, CardHeader } from "@/app/_components/ui/card";
+import { Button } from "@/app/_components/ui/button";
+
+export const dynamic = "force-dynamic";
+
+export default async function SettingsPage() {
+  const session = await auth();
+  const userId = session!.user.id;
+
+  const userRow = await db
+    .select()
+    .from(users)
+    .where(eq(users.id, userId))
+    .limit(1);
+  const user = userRow[0];
+
+  return (
+    <Container className="pt-6 max-w-3xl">
+      <PageHeader title="Settings" />
+
+      <div className="space-y-6">
+        <Card>
+          <CardHeader className="text-sm font-medium text-fg">Profile</CardHeader>
+          <CardBody className="space-y-2 text-sm">
+            <Field label="Name" value={user?.name} />
+            <Field label="Email" value={user?.email} />
+            <Field label="Internal user id" value={user?.id} mono />
+            <Field label="OIDC issuer" value={user?.oidcIss} mono />
+            <Field label="OIDC sub" value={user?.oidcSub} mono />
+            <Field
+              label="Joined"
+              value={user?.createdAt ? new Date(user.createdAt).toLocaleString() : null}
+            />
+          </CardBody>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex items-center">
+            <span className="text-sm font-medium text-fg flex-1">CLI tokens</span>
+            <Link href="/settings/tokens" className="no-underline">
+              <Button variant="secondary" size="sm">Manage tokens</Button>
+            </Link>
+          </CardHeader>
+          <CardBody className="text-sm text-fg-muted">
+            Bearer tokens for headless/automated MCP clients. Visit{" "}
+            <Link href="/settings/tokens">/settings/tokens</Link> to generate
+            and revoke them.
+          </CardBody>
+        </Card>
+      </div>
+    </Container>
+  );
+}
+
+function Field({
+  label,
+  value,
+  mono,
+}: {
+  label: string;
+  value: string | null | undefined;
+  mono?: boolean;
+}) {
+  return (
+    <div className="flex items-baseline gap-3">
+      <span className="text-fg-muted w-36 shrink-0">{label}</span>
+      <span className={`${mono ? "font-mono text-xs" : "text-sm"} text-fg break-all`}>
+        {value ?? <span className="text-fg-subtle">—</span>}
+      </span>
+    </div>
+  );
+}
diff --git a/apps/web/app/(authed)/settings/tokens/page.tsx b/apps/web/app/(authed)/settings/tokens/page.tsx
new file mode 100644
index 0000000..ee9d13f
--- /dev/null
+++ b/apps/web/app/(authed)/settings/tokens/page.tsx
@@ -0,0 +1,162 @@
+import { revalidatePath } from "next/cache";
+import { and, desc, eq, isNull } from "drizzle-orm";
+import { auth } from "@/auth";
+import { db } from "@/lib/db/client";
+import { cliTokens, users } from "@/lib/db/schema";
+import {
+  mintCliToken,
+  revokeCliToken,
+  CLI_TOKEN_TTL_SECONDS,
+} from "@/lib/auth/cli-token";
+import { Container, PageHeader } from "@/app/_components/ui/container";
+import { Card, CardBody, CardHeader } from "@/app/_components/ui/card";
+import { Badge } from "@/app/_components/ui/badge";
+import { EmptyState } from "@/app/_components/ui/empty-state";
+import TokensManager from "./tokens-manager";
+
+export const dynamic = "force-dynamic";
+
+async function createTokenAction(_prev: { token: string | null; error: string | null }, formData: FormData): Promise<{ token: string | null; error: string | null }> {
+  "use server";
+  try {
+    const session = await auth();
+    if (!session?.user?.id) return { token: null, error: "not authenticated" };
+
+    const name = String(formData.get("name") ?? "").trim() || `Token ${new Date().toISOString().slice(0, 10)}`;
+
+    const userRow = await db
+      .select({
+        oidcIss: users.oidcIss,
+        oidcSub: users.oidcSub,
+        email: users.email,
+        name: users.name,
+      })
+      .from(users)
+      .where(eq(users.id, session.user.id))
+      .limit(1);
+    const u = userRow[0];
+    if (!u) return { token: null, error: "user row not found" };
+
+    const minted = await mintCliToken(
+      {
+        userId: session.user.id,
+        oidcIss: u.oidcIss,
+        oidcSub: u.oidcSub,
+        email: u.email,
+        name: u.name,
+      },
+      { tokenName: name },
+    );
+
+    revalidatePath("/settings/tokens");
+    return { token: minted.token, error: null };
+  } catch (e) {
+    return { token: null, error: e instanceof Error ? e.message : "unknown error" };
+  }
+}
+
+async function revokeTokenAction(formData: FormData) {
+  "use server";
+  const session = await auth();
+  if (!session?.user?.id) throw new Error("not authenticated");
+  const tokenId = String(formData.get("tokenId") ?? "");
+  await revokeCliToken(session.user.id, tokenId);
+  revalidatePath("/settings/tokens");
+}
+
+export default async function TokensPage() {
+  const session = await auth();
+  const userId = session!.user.id;
+
+  const tokens = await db
+    .select({
+      id: cliTokens.id,
+      name: cliTokens.name,
+      jti: cliTokens.jti,
+      createdAt: cliTokens.createdAt,
+      lastUsedAt: cliTokens.lastUsedAt,
+      expiresAt: cliTokens.expiresAt,
+      revokedAt: cliTokens.revokedAt,
+    })
+    .from(cliTokens)
+    .where(eq(cliTokens.userId, userId))
+    .orderBy(desc(cliTokens.createdAt));
+
+  const active = tokens.filter((t) => !t.revokedAt && t.expiresAt > new Date());
+  const inactive = tokens.filter((t) => t.revokedAt || t.expiresAt <= new Date());
+  const ttlDays = Math.floor(CLI_TOKEN_TTL_SECONDS / 86400);
+
+  return (
+    <Container className="pt-6 max-w-3xl">
+      <PageHeader
+        title="CLI tokens"
+        description={`Long-lived bearer tokens for MCP clients without browser access. ${ttlDays}-day expiry per token.`}
+      />
+
+      <Card className="mb-6">
+        <CardHeader className="text-sm font-medium text-fg">Generate a new token</CardHeader>
+        <CardBody>
+          <TokensManager action={createTokenAction} ttlDays={ttlDays} />
+        </CardBody>
+      </Card>
+
+      <h2 className="text-sm font-medium text-fg-muted mt-8 mb-2">Active tokens</h2>
+      {active.length === 0 ? (
+        <EmptyState title="No active tokens" description="Generate one above to connect a headless client." />
+      ) : (
+        <Card>
+          {active.map((t, i) => (
+            <div
+              key={t.id}
+              className={`px-4 py-3 flex items-center gap-3 ${i > 0 ? "border-t border-border" : ""}`}
+            >
+              <div className="flex-1 min-w-0">
+                <div className="text-sm text-fg truncate">{t.name}</div>
+                <div className="text-xs text-fg-subtle">
+                  Created {new Date(t.createdAt).toLocaleDateString()} ·{" "}
+                  {t.lastUsedAt
+                    ? `last used ${new Date(t.lastUsedAt).toLocaleString()}`
+                    : "never used"}
+                  {" · "}expires {new Date(t.expiresAt).toLocaleDateString()}
+                </div>
+              </div>
+              <form action={revokeTokenAction}>
+                <input type="hidden" name="tokenId" value={t.id} />
+                <button
+                  type="submit"
+                  className="text-xs text-danger hover:underline"
+                >
+                  Revoke
+                </button>
+              </form>
+            </div>
+          ))}
+        </Card>
+      )}
+
+      {inactive.length > 0 ? (
+        <>
+          <h2 className="text-sm font-medium text-fg-muted mt-8 mb-2">Revoked / expired</h2>
+          <Card>
+            {inactive.map((t, i) => (
+              <div
+                key={t.id}
+                className={`px-4 py-3 flex items-center gap-3 ${i > 0 ? "border-t border-border" : ""}`}
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm text-fg-muted truncate">{t.name}</div>
+                  <div className="text-xs text-fg-subtle">
+                    {t.revokedAt
+                      ? `Revoked ${new Date(t.revokedAt).toLocaleString()}`
+                      : `Expired ${new Date(t.expiresAt).toLocaleString()}`}
+                  </div>
+                </div>
+                <Badge tone="danger">{t.revokedAt ? "revoked" : "expired"}</Badge>
+              </div>
+            ))}
+          </Card>
+        </>
+      ) : null}
+    </Container>
+  );
+}
diff --git a/apps/web/app/(authed)/settings/tokens/tokens-manager.tsx b/apps/web/app/(authed)/settings/tokens/tokens-manager.tsx
new file mode 100644
index 0000000..3b539bf
--- /dev/null
+++ b/apps/web/app/(authed)/settings/tokens/tokens-manager.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { useActionState } from "react";
+import { Button } from "@/app/_components/ui/button";
+import { Input, Label } from "@/app/_components/ui/input";
+
+interface State {
+  token: string | null;
+  error: string | null;
+}
+
+interface Props {
+  action: (prev: State, formData: FormData) => Promise<State>;
+  ttlDays: number;
+}
+
+const initial: State = { token: null, error: null };
+
+export default function TokensManager({ action, ttlDays }: Props) {
+  const [state, formAction, pending] = useActionState(action, initial);
+
+  if (state.token) {
+    return (
+      <div className="space-y-3">
+        <div className="text-sm text-success font-medium">
+          Token generated — copy now, you won&apos;t see it again
+        </div>
+        <pre
+          className="!whitespace-pre-wrap !break-all select-all"
+          style={{ userSelect: "all" }}
+        >
+          {state.token}
+        </pre>
+        <details className="text-xs text-fg-muted">
+          <summary className="cursor-pointer">claude mcp add command</summary>
+          <pre className="mt-2">{`claude mcp add --transport http --scope user \\
+  --header "Authorization: Bearer ${state.token}" \\
+  shared-memory https://memory.dnspegasus.net/api/mcp`}</pre>
+        </details>
+        <p className="text-xs text-fg-subtle">
+          Valid for {ttlDays} days. Revoke individually below if it leaks.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <form action={formAction} className="flex flex-wrap items-end gap-3">
+      <div className="flex-1 min-w-[200px]">
+        <Label htmlFor="name" hint="optional">Token name</Label>
+        <Input
+          id="name"
+          name="name"
+          placeholder="e.g. Laptop, Headless CI, …"
+          className="mt-1"
+          autoComplete="off"
+        />
+      </div>
+      <Button type="submit" disabled={pending}>
+        {pending ? "Generating…" : "Generate token"}
+      </Button>
+      {state.error ? (
+        <p className="basis-full text-sm text-danger">error: {state.error}</p>
+      ) : null}
+    </form>
+  );
+}
diff --git a/apps/web/app/_components/ui/badge.tsx b/apps/web/app/_components/ui/badge.tsx
new file mode 100644
index 0000000..19a4147
--- /dev/null
+++ b/apps/web/app/_components/ui/badge.tsx
@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from "react";
+
+type Tone = "neutral" | "accent" | "success" | "warning" | "danger";
+
+const tones: Record<Tone, string> = {
+  neutral: "bg-surface-3 text-fg-muted",
+  accent: "bg-accent-500/15 text-accent-300",
+  success: "bg-success/15 text-success",
+  warning: "bg-warning/15 text-warning",
+  danger: "bg-danger/15 text-danger",
+};
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  tone?: Tone;
+}
+
+export function Badge({ tone = "neutral", className = "", ...rest }: BadgeProps) {
+  return (
+    <span
+      className={
+        "inline-flex items-center gap-1 px-1.5 py-0.5 rounded-sm " +
+        "text-[11px] font-medium leading-none whitespace-nowrap " +
+        `${tones[tone]} ${className}`
+      }
+      {...rest}
+    />
+  );
+}
diff --git a/apps/web/app/_components/ui/button.tsx b/apps/web/app/_components/ui/button.tsx
new file mode 100644
index 0000000..509db70
--- /dev/null
+++ b/apps/web/app/_components/ui/button.tsx
@@ -0,0 +1,46 @@
+import type { ButtonHTMLAttributes } from "react";
+
+type Variant = "primary" | "secondary" | "ghost" | "danger";
+type Size = "sm" | "md";
+
+const base =
+  "inline-flex items-center justify-center gap-1.5 rounded-md font-medium " +
+  "transition-colors disabled:opacity-50 disabled:cursor-not-allowed " +
+  "whitespace-nowrap select-none";
+
+const variants: Record<Variant, string> = {
+  primary:
+    "bg-accent-500 text-white hover:bg-accent-400 active:bg-accent-600",
+  secondary:
+    "bg-surface-2 text-fg border border-border hover:border-border-strong hover:bg-surface-3",
+  ghost:
+    "bg-transparent text-fg hover:bg-surface-2",
+  danger:
+    "bg-transparent text-danger border border-border hover:bg-danger/10 hover:border-danger/60",
+};
+
+const sizes: Record<Size, string> = {
+  sm: "h-7 px-2.5 text-[13px]",
+  md: "h-9 px-3.5 text-sm",
+};
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: Variant;
+  size?: Size;
+}
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  className = "",
+  type = "button",
+  ...rest
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={`${base} ${variants[variant]} ${sizes[size]} ${className}`}
+      {...rest}
+    />
+  );
+}
diff --git a/apps/web/app/_components/ui/card.tsx b/apps/web/app/_components/ui/card.tsx
new file mode 100644
index 0000000..d836cf1
--- /dev/null
+++ b/apps/web/app/_components/ui/card.tsx
@@ -0,0 +1,32 @@
+import type { HTMLAttributes } from "react";
+
+export function Card({
+  className = "",
+  ...rest
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={`rounded-lg bg-surface-1 border border-border overflow-hidden ${className}`}
+      {...rest}
+    />
+  );
+}
+
+export function CardBody({
+  className = "",
+  ...rest
+}: HTMLAttributes<HTMLDivElement>) {
+  return <div className={`p-4 ${className}`} {...rest} />;
+}
+
+export function CardHeader({
+  className = "",
+  ...rest
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={`px-4 py-3 border-b border-border bg-surface-2 ${className}`}
+      {...rest}
+    />
+  );
+}
diff --git a/apps/web/app/_components/ui/container.tsx b/apps/web/app/_components/ui/container.tsx
new file mode 100644
index 0000000..3ec80df
--- /dev/null
+++ b/apps/web/app/_components/ui/container.tsx
@@ -0,0 +1,32 @@
+import type { HTMLAttributes } from "react";
+
+export function Container({
+  className = "",
+  ...rest
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={`max-w-5xl mx-auto px-4 sm:px-6 ${className}`} {...rest} />
+  );
+}
+
+export function PageHeader({
+  title,
+  description,
+  actions,
+}: {
+  title: string;
+  description?: React.ReactNode;
+  actions?: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3 mb-6">
+      <div>
+        <h1 className="text-2xl font-semibold text-fg tracking-tight">{title}</h1>
+        {description ? (
+          <p className="text-sm text-fg-muted mt-1">{description}</p>
+        ) : null}
+      </div>
+      {actions ? <div className="flex gap-2">{actions}</div> : null}
+    </div>
+  );
+}
diff --git a/apps/web/app/_components/ui/empty-state.tsx b/apps/web/app/_components/ui/empty-state.tsx
new file mode 100644
index 0000000..8dc4328
--- /dev/null
+++ b/apps/web/app/_components/ui/empty-state.tsx
@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+
+export function EmptyState({
+  title,
+  description,
+  action,
+}: {
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}) {
+  return (
+    <div className="border border-dashed border-border rounded-lg p-8 text-center">
+      <p className="text-fg font-medium">{title}</p>
+      {description ? (
+        <p className="text-sm text-fg-muted mt-1">{description}</p>
+      ) : null}
+      {action ? <div className="mt-4 flex justify-center">{action}</div> : null}
+    </div>
+  );
+}
diff --git a/apps/web/app/_components/ui/input.tsx b/apps/web/app/_components/ui/input.tsx
new file mode 100644
index 0000000..84c68f1
--- /dev/null
+++ b/apps/web/app/_components/ui/input.tsx
@@ -0,0 +1,45 @@
+import type { InputHTMLAttributes, TextareaHTMLAttributes } from "react";
+
+const field =
+  "block w-full rounded-md bg-surface-1 border border-border " +
+  "text-fg placeholder:text-fg-subtle " +
+  "focus:border-accent-400 focus:outline-none " +
+  "disabled:opacity-50 transition-colors";
+
+export function Input({
+  className = "",
+  ...rest
+}: InputHTMLAttributes<HTMLInputElement>) {
+  return <input className={`${field} h-9 px-3 text-sm ${className}`} {...rest} />;
+}
+
+export function Textarea({
+  className = "",
+  rows = 6,
+  ...rest
+}: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  return (
+    <textarea
+      rows={rows}
+      className={`${field} py-2 px-3 text-sm leading-relaxed font-mono ${className}`}
+      {...rest}
+    />
+  );
+}
+
+export function Label({
+  htmlFor,
+  children,
+  hint,
+}: {
+  htmlFor?: string;
+  children: React.ReactNode;
+  hint?: string;
+}) {
+  return (
+    <label htmlFor={htmlFor} className="block">
+      <span className="text-sm font-medium text-fg">{children}</span>
+      {hint ? <span className="ml-2 text-xs text-fg-subtle">{hint}</span> : null}
+    </label>
+  );
+}
diff --git a/apps/web/app/connect/connect-form.tsx b/apps/web/app/connect/connect-form.tsx
deleted file mode 100644
index 036c691..0000000
--- a/apps/web/app/connect/connect-form.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-"use client";
-
-import { useActionState } from "react";
-
-interface State {
-  token: string | null;
-  error: string | null;
-}
-
-interface Props {
-  action: (prev: State) => Promise<State>;
-  ttlDays: number;
-}
-
-const initial: State = { token: null, error: null };
-
-export default function ConnectForm({ action, ttlDays }: Props) {
-  const [state, formAction, pending] = useActionState(action, initial);
-
-  return (
-    <section style={{ marginTop: "2rem" }}>
-      {state.token ? (
-        <>
-          <h2 style={{ color: "#7ee787" }}>
-            New token (copy now — won&apos;t be shown again)
-          </h2>
-          <pre
-            style={{
-              whiteSpace: "pre-wrap",
-              wordBreak: "break-all",
-              userSelect: "all",
-            }}
-          >
-            {state.token}
-          </pre>
-          <h3>Add to Claude Code</h3>
-          <pre>{`claude mcp add --transport http \\
-  --header "Authorization: Bearer ${state.token}" \\
-  shared-memory https://memory.dnspegasus.net/api/mcp`}</pre>
-          <p className="muted">
-            Valid for {ttlDays} days. To revoke all outstanding CLI tokens at
-            once, rotate <code>CLI_TOKEN_SECRET</code> on the server.
-          </p>
-        </>
-      ) : (
-        <form action={formAction}>
-          <button type="submit" disabled={pending}>
-            {pending ? "Generating…" : "Generate token"}
-          </button>
-          {state.error ? (
-            <p style={{ color: "#ff6b6b" }}>error: {state.error}</p>
-          ) : null}
-          <p className="muted" style={{ marginTop: "0.75rem" }}>
-            Tokens carry your full Authentik identity. Valid for {ttlDays}{" "}
-            days. Treat them like a password.
-          </p>
-        </form>
-      )}
-    </section>
-  );
-}
diff --git a/apps/web/app/connect/page.tsx b/apps/web/app/connect/page.tsx
index 36de122..daf9c88 100644
--- a/apps/web/app/connect/page.tsx
+++ b/apps/web/app/connect/page.tsx
@@ -1,73 +1,9 @@
 import { redirect } from "next/navigation";
-import { eq } from "drizzle-orm";
-import { auth } from "@/auth";
-import { db } from "@/lib/db/client";
-import { users } from "@/lib/db/schema";
-import { mintCliToken, CLI_TOKEN_TTL_SECONDS } from "@/lib/auth/cli-token";
-import ConnectForm from "./connect-form";
 
 export const dynamic = "force-dynamic";
 
-/**
- * Server action — mints a fresh CLI token for the currently signed-in user.
- *
- * Returned via useActionState to the client; the token only ever exists in
- * React state, never in the URL or a persisted cookie.
- */
-async function generateToken(_prev: { token: string | null; error: string | null }) {
-  "use server";
-  try {
-    const session = await auth();
-    if (!session?.user?.id) return { token: null, error: "not authenticated" };
-
-    const row = await db
-      .select({
-        oidcIss: users.oidcIss,
-        oidcSub: users.oidcSub,
-        email: users.email,
-        name: users.name,
-      })
-      .from(users)
-      .where(eq(users.id, session.user.id))
-      .limit(1);
-    const u = row[0];
-    if (!u) return { token: null, error: "user row not found" };
-
-    const token = await mintCliToken({
-      oidcIss: u.oidcIss,
-      oidcSub: u.oidcSub,
-      email: u.email,
-      name: u.name,
-    });
-    return { token, error: null };
-  } catch (e) {
-    return { token: null, error: e instanceof Error ? e.message : "unknown error" };
-  }
-}
-
-export default async function ConnectPage() {
-  const session = await auth();
-  if (!session?.user) {
-    redirect("/api/auth/signin?callbackUrl=/connect");
-  }
-
-  const ttlDays = Math.floor(CLI_TOKEN_TTL_SECONDS / 86400);
-  const userLabel = session.user.email ?? session.user.name ?? session.user.id;
-
-  return (
-    <main className="container">
-      <h1>Connect an MCP client</h1>
-      <p className="muted">
-        Generate a bearer token for pasting into Claude Code (or any MCP
-        client) when an OAuth loopback callback isn&apos;t practical — for
-        example, a Claude Code instance running inside a container.
-      </p>
-
-      <p>
-        Signed in as <strong>{userLabel}</strong>.
-      </p>
-
-      <ConnectForm action={generateToken} ttlDays={ttlDays} />
-    </main>
-  );
+// Legacy URL — moved to /settings/tokens in Phase 3b. Preserve old
+// bookmarks and the existing instructions printed by older clients.
+export default function ConnectRedirect() {
+  redirect("/settings/tokens");
 }
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 93c23fd..c0c6c8f 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -1,71 +1,96 @@
-:root {
-  color-scheme: light dark;
-  --bg: #0b0d10;
-  --fg: #e7e9ec;
-  --muted: #8a9099;
-  --accent: #6ea8fe;
-  --surface: #14181d;
-  --border: #232a31;
+@import "tailwindcss";
+
+/* --------------------------------------------------------------------------
+ * Design tokens.
+ *
+ * Dark-first palette (the only theme right now). Light mode can come later
+ * by extending these tokens.
+ * -------------------------------------------------------------------------- */
+
+@theme {
+  /* Brand */
+  --color-accent-300: oklch(0.79 0.13 250);
+  --color-accent-400: oklch(0.72 0.16 250);
+  --color-accent-500: oklch(0.65 0.19 250);
+  --color-accent-600: oklch(0.55 0.18 250);
+
+  /* Surface stack */
+  --color-bg: #0b0d10;
+  --color-surface-1: #11151b;
+  --color-surface-2: #161b22;
+  --color-surface-3: #1c222b;
+
+  /* Foreground */
+  --color-fg: #e7e9ec;
+  --color-fg-muted: #9aa3ad;
+  --color-fg-subtle: #6c7480;
+
+  /* Borders */
+  --color-border: #232a32;
+  --color-border-strong: #353c46;
+
+  /* Semantic */
+  --color-success: #5fd49d;
+  --color-danger: #ff6b6b;
+  --color-warning: #f5c071;
+
+  /* Radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.625rem;
+
+  /* Font */
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
 }
 
-* {
-  box-sizing: border-box;
-}
+/* --------------------------------------------------------------------------
+ * Base layer — global styling reset (light layer over Tailwind's preflight)
+ * -------------------------------------------------------------------------- */
 
 html,
 body {
-  margin: 0;
-  padding: 0;
-  min-height: 100%;
-  background: var(--bg);
-  color: var(--fg);
-  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  background: var(--color-bg);
+  color: var(--color-fg);
+  font-family: var(--font-sans);
   font-size: 15px;
   line-height: 1.55;
+  min-height: 100%;
+}
+
+::selection {
+  background: color-mix(in srgb, var(--color-accent-500) 35%, transparent);
+}
+
+/* Avoid bright white default focus ring when using accent buttons. */
+*:focus-visible {
+  outline: 2px solid var(--color-accent-400);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
 }
 
 a {
-  color: var(--accent);
+  color: var(--color-accent-300);
   text-decoration: none;
 }
-
 a:hover {
   text-decoration: underline;
 }
 
-button {
-  font: inherit;
-  color: var(--fg);
-  background: var(--surface);
-  border: 1px solid var(--border);
-  padding: 0.5rem 0.9rem;
-  border-radius: 0.375rem;
-  cursor: pointer;
-}
-
-button:hover {
-  border-color: var(--accent);
+code,
+pre {
+  font-family: var(--font-mono);
 }
 
 pre {
-  background: var(--surface);
-  border: 1px solid var(--border);
+  background: var(--color-surface-1);
+  border: 1px solid var(--color-border);
   padding: 1rem;
-  border-radius: 0.5rem;
+  border-radius: var(--radius-md);
   overflow-x: auto;
   font-size: 13px;
 }
-
-code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-}
-
-.container {
-  max-width: 880px;
-  margin: 0 auto;
-  padding: 2rem 1.25rem;
-}
-
-.muted {
-  color: var(--muted);
-}
diff --git a/apps/web/app/me/page.tsx b/apps/web/app/me/page.tsx
index 5dc8f3a..a68471b 100644
--- a/apps/web/app/me/page.tsx
+++ b/apps/web/app/me/page.tsx
@@ -1,31 +1,8 @@
 import { redirect } from "next/navigation";
-import { auth, signOut } from "@/auth";
 
 export const dynamic = "force-dynamic";
 
-export default async function MePage() {
-  const session = await auth();
-  if (!session?.user) {
-    redirect("/api/auth/signin");
-  }
-
-  return (
-    <main className="container">
-      <h1>Signed in</h1>
-      <p className="muted">
-        Debug view — confirms the Authentik round-trip and the OIDC claims we
-        received.
-      </p>
-      <h2>Session</h2>
-      <pre>{JSON.stringify(session, null, 2)}</pre>
-      <form
-        action={async () => {
-          "use server";
-          await signOut({ redirectTo: "/" });
-        }}
-      >
-        <button type="submit">Sign out</button>
-      </form>
-    </main>
-  );
+// Legacy URL — Phase 1's debug page. Replaced by /dashboard + /settings.
+export default function MeRedirect() {
+  redirect("/dashboard");
 }
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 0113b0e..f7adc58 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,40 +1,53 @@
 import Link from "next/link";
+import { redirect } from "next/navigation";
 import { auth } from "@/auth";
+import { Button } from "@/app/_components/ui/button";
 
 export const dynamic = "force-dynamic";
 
 export default async function HomePage() {
   const session = await auth();
+  // Signed-in users always go to the app; the landing is for anonymous
+  // visitors only.
+  if (session?.user) redirect("/dashboard");
 
   return (
-    <main className="container">
-      <h1>shared-memory</h1>
-      <p className="muted">
-        Self-hosted MCP server providing shared persistent memory across Claude Code sessions.
-      </p>
+    <main className="min-h-screen flex items-center justify-center px-4">
+      <div className="max-w-xl w-full text-center space-y-6">
+        <div className="inline-flex items-center gap-2 text-fg-muted text-sm">
+          <span className="inline-block size-2 rounded-full bg-accent-400" />
+          shared-memory
+        </div>
 
-      {session?.user ? (
-        <p>
-          Signed in as <strong>{session.user.email ?? session.user.name ?? session.user.id}</strong>{" "}
-          — <Link href="/me">view session</Link>
-        </p>
-      ) : (
-        <p>
-          <Link href="/api/auth/signin">Sign in with Authentik</Link>
-        </p>
-      )}
+        <h1 className="text-3xl sm:text-4xl font-semibold tracking-tight text-fg">
+          Shared, persistent memory<br />for every Claude Code session.
+        </h1>
 
-      <hr style={{ borderColor: "var(--border)", margin: "2rem 0" }} />
-      <h2>MCP endpoint</h2>
-      <p className="muted">
-        Connect a Claude Code session to <code>/api/mcp</code> with a bearer
-        token. For containerized clients without OAuth loopback,{" "}
-        {session?.user ? (
-          <Link href="/connect">generate a CLI token →</Link>
-        ) : (
-          <>sign in and visit <code>/connect</code></>
-        )}
-      </p>
+        <p className="text-fg-muted max-w-md mx-auto">
+          A self-hosted MCP server that lets the Claude Codes on your laptop,
+          server, and any container share durable memories, scoped per
+          project or globally.
+        </p>
+
+        <div className="flex justify-center gap-3 pt-2">
+          <Link href="/api/auth/signin?callbackUrl=/dashboard" className="no-underline">
+            <Button>Sign in with OIDC</Button>
+          </Link>
+          <a
+            href="https://repo.anhonesthost.net/jknapp/shared-memory"
+            className="no-underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <Button variant="secondary">Source</Button>
+          </a>
+        </div>
+
+        <p className="text-xs text-fg-subtle pt-6">
+          MCP endpoint at <code>/api/mcp</code> · OAuth discovery at{" "}
+          <code>/.well-known/oauth-protected-resource</code>
+        </p>
+      </div>
     </main>
   );
 }
diff --git a/apps/web/drizzle/0001_cli_tokens.sql b/apps/web/drizzle/0001_cli_tokens.sql
new file mode 100644
index 0000000..b8878ff
--- /dev/null
+++ b/apps/web/drizzle/0001_cli_tokens.sql
@@ -0,0 +1,24 @@
+-- cli_tokens: registry of HMAC-signed tokens minted at /connect.
+--
+-- Each row corresponds to one issued JWT. The token's `jti` claim is the
+-- unique identifier — we store the full jti, not a hash, since the jti
+-- itself isn't a secret (it's just a UUID; the signing material is
+-- CLI_TOKEN_SECRET).
+--
+-- Soft-delete via revoked_at — never DROP rows; audit value lasts past
+-- the JWT's natural expiration.
+
+CREATE TABLE "cli_tokens" (
+  "id"            uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  "user_id"       uuid NOT NULL REFERENCES "users"("id") ON DELETE CASCADE,
+  "jti"           text NOT NULL UNIQUE,
+  "name"          text NOT NULL,
+  "created_at"    timestamptz NOT NULL DEFAULT now(),
+  "last_used_at"  timestamptz,
+  "expires_at"    timestamptz NOT NULL,
+  "revoked_at"    timestamptz
+);
+
+CREATE INDEX "cli_tokens_user_idx"        ON "cli_tokens" ("user_id");
+CREATE INDEX "cli_tokens_user_active_idx" ON "cli_tokens" ("user_id", "revoked_at")
+  WHERE "revoked_at" IS NULL;
diff --git a/apps/web/lib/auth/cli-token.ts b/apps/web/lib/auth/cli-token.ts
index 0153562..420e1a3 100644
--- a/apps/web/lib/auth/cli-token.ts
+++ b/apps/web/lib/auth/cli-token.ts
@@ -1,23 +1,30 @@
+import { randomUUID } from "node:crypto";
 import { SignJWT, jwtVerify, decodeProtectedHeader } from "jose";
 import type { JWTPayload } from "jose";
+import { and, eq, isNull } from "drizzle-orm";
 import { env } from "@/lib/env";
+import { db } from "@/lib/db/client";
+import { cliTokens } from "@/lib/db/schema";
 
 /**
- * "CLI tokens" are HMAC-signed JWTs minted on demand from the /connect page
- * after the user logs into the Web UI via Authentik. They're suitable for
- * pasting into an MCP client's Authorization header on machines where the
- * OAuth loopback callback isn't reachable (containers, headless setups).
+ * CLI tokens — HMAC-signed JWTs minted from /settings/tokens (or the
+ * legacy /connect page) after the user logs into the Web UI via OIDC.
+ *
+ * Suitable for pasting into an MCP client's `Authorization` header on
+ * machines where the OAuth loopback callback isn't reachable.
  *
  * Trust model: we trust whoever holds CLI_TOKEN_SECRET. Verification is a
- * local HMAC check — no JWKS roundtrip. To revoke ALL outstanding CLI
- * tokens, rotate CLI_TOKEN_SECRET.
+ * local HMAC check — no JWKS round-trip — plus an opt-in revocation
+ * lookup in the `cli_tokens` table.
  *
- * The payload carries the user's real Authentik identity in `iss` + `sub`
- * so the same `users` row resolution path works for both token kinds.
+ *   - Tokens minted by mintCliToken always carry a `jti` claim and have a
+ *     matching row in cli_tokens.
+ *   - Tokens minted by an older version of this server have no `jti`. We
+ *     accept them on signature validity alone until they expire naturally
+ *     (max 30 days post-deploy). Their only revocation knob is rotating
+ *     CLI_TOKEN_SECRET.
  *
- * Dispatch from the standard Authentik verifier is by the `kid` header:
- * CLI tokens set `kid: "cli-v1"`, Authentik tokens carry whatever key id
- * the JWKS published.
+ * To revoke a tracked token immediately, set cli_tokens.revoked_at.
  */
 
 export const CLI_TOKEN_KID = "cli-v1";
@@ -29,14 +36,41 @@ function secret(): Uint8Array {
 }
 
 export interface CliTokenSubject {
+  userId: string;
   oidcIss: string;
   oidcSub: string;
   email?: string | null;
   name?: string | null;
 }
 
-export async function mintCliToken(subject: CliTokenSubject): Promise<string> {
-  return await new SignJWT({
+export interface MintCliTokenOptions {
+  /** Human-readable label shown in the Settings UI. */
+  tokenName: string;
+}
+
+export interface MintCliTokenResult {
+  token: string;
+  jti: string;
+  expiresAt: Date;
+}
+
+export async function mintCliToken(
+  subject: CliTokenSubject,
+  options: MintCliTokenOptions,
+): Promise<MintCliTokenResult> {
+  const jti = randomUUID();
+  const expiresAt = new Date(Date.now() + CLI_TOKEN_TTL_SECONDS * 1000);
+
+  // Record the issued token first so a crash mid-mint can't leak a usable
+  // token that isn't in our registry.
+  await db.insert(cliTokens).values({
+    userId: subject.userId,
+    jti,
+    name: options.tokenName,
+    expiresAt,
+  });
+
+  const token = await new SignJWT({
     oidc_iss: subject.oidcIss,
     oidc_sub: subject.oidcSub,
     email: subject.email ?? undefined,
@@ -46,9 +80,12 @@ export async function mintCliToken(subject: CliTokenSubject): Promise<string> {
     .setIssuer(CLI_TOKEN_ISSUER)
     .setSubject(subject.oidcSub)
     .setAudience(env().OIDC_AUDIENCE)
+    .setJti(jti)
     .setIssuedAt()
     .setExpirationTime(`${CLI_TOKEN_TTL_SECONDS}s`)
     .sign(secret());
+
+  return { token, jti, expiresAt };
 }
 
 export interface CliClaims extends JWTPayload {
@@ -66,6 +103,31 @@ export async function verifyCliToken(token: string): Promise<CliClaims> {
   if (typeof payload.oidc_iss !== "string" || typeof payload.oidc_sub !== "string") {
     throw new Error("CLI token missing oidc_iss/oidc_sub claims");
   }
+
+  // If the token carries a jti, enforce the revocation registry. Tokens
+  // minted before the registry existed have no jti — accept those on
+  // signature alone until natural expiration.
+  if (typeof payload.jti === "string") {
+    const rows = await db
+      .select({ id: cliTokens.id, revokedAt: cliTokens.revokedAt })
+      .from(cliTokens)
+      .where(eq(cliTokens.jti, payload.jti))
+      .limit(1);
+    const row = rows[0];
+    if (!row) {
+      throw new Error("CLI token not in registry — likely minted by another deployment");
+    }
+    if (row.revokedAt) {
+      throw new Error("CLI token revoked");
+    }
+    // Touch last_used_at — best-effort, don't fail the request if this errors.
+    void db
+      .update(cliTokens)
+      .set({ lastUsedAt: new Date() })
+      .where(eq(cliTokens.id, row.id))
+      .catch(() => {});
+  }
+
   return payload as CliClaims;
 }
 
@@ -78,3 +140,15 @@ export function tokenKid(token: string): string | undefined {
     return undefined;
   }
 }
+
+/** Revoke a token by id (owned by the given user). */
+export async function revokeCliToken(userId: string, tokenId: string): Promise<boolean> {
+  const result = await db
+    .update(cliTokens)
+    .set({ revokedAt: new Date() })
+    .where(
+      and(eq(cliTokens.id, tokenId), eq(cliTokens.userId, userId), isNull(cliTokens.revokedAt)),
+    )
+    .returning({ id: cliTokens.id });
+  return result.length > 0;
+}
diff --git a/apps/web/lib/db/schema.ts b/apps/web/lib/db/schema.ts
index fad76a2..8f3f9d3 100644
--- a/apps/web/lib/db/schema.ts
+++ b/apps/web/lib/db/schema.ts
@@ -126,6 +126,25 @@ export const snippets = pgTable(
   }),
 );
 
+export const cliTokens = pgTable(
+  "cli_tokens",
+  {
+    id: uuid("id").primaryKey().defaultRandom(),
+    userId: uuid("user_id")
+      .notNull()
+      .references(() => users.id, { onDelete: "cascade" }),
+    jti: text("jti").notNull().unique(),
+    name: text("name").notNull(),
+    createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
+    lastUsedAt: timestamp("last_used_at", { withTimezone: true }),
+    expiresAt: timestamp("expires_at", { withTimezone: true }).notNull(),
+    revokedAt: timestamp("revoked_at", { withTimezone: true }),
+  },
+  (t) => ({
+    userIdx: index("cli_tokens_user_idx").on(t.userId),
+  }),
+);
+
 export const auditLog = pgTable(
   "audit_log",
   {
@@ -158,5 +177,7 @@ export type Memory = typeof memories.$inferSelect;
 export type NewMemory = typeof memories.$inferInsert;
 export type Snippet = typeof snippets.$inferSelect;
 export type NewSnippet = typeof snippets.$inferInsert;
+export type CliToken = typeof cliTokens.$inferSelect;
+export type NewCliToken = typeof cliTokens.$inferInsert;
 export type AuditEntry = typeof auditLog.$inferSelect;
 export type NewAuditEntry = typeof auditLog.$inferInsert;
diff --git a/apps/web/lib/mcp/tools.ts b/apps/web/lib/mcp/tools.ts
index 3766470..aec44eb 100644
--- a/apps/web/lib/mcp/tools.ts
+++ b/apps/web/lib/mcp/tools.ts
@@ -1,5 +1,5 @@
 import { and, desc, eq, inArray, isNull, sql } from "drizzle-orm";
-import { db, pg } from "@/lib/db/client";
+import { db } from "@/lib/db/client";
 import { memories, projects, auditLog } from "@/lib/db/schema";
 import {
   MemoryIdInput,
@@ -10,6 +10,7 @@ import {
   ProjectIdentifyInput,
 } from "@shared-memory/schemas";
 import { embedText } from "@/lib/embedder";
+import { searchMemories } from "@/lib/memories";
 import type { UserContext } from "./context";
 
 /**
@@ -62,11 +63,6 @@ async function resolveProjectId(
   return row[0]?.id ?? null;
 }
 
-/** pgvector accepts vectors as text literals like "[0.1,0.2,...]". */
-function toVectorLiteral(v: number[]): string {
-  return `[${v.join(",")}]`;
-}
-
 // ---------- tools ----------
 
 const projectIdentify: ToolDef = {
@@ -368,13 +364,6 @@ const memoryUpdate: ToolDef = {
   },
 };
 
-interface RankAccumulator {
-  vectorRank?: number;
-  ftsRank?: number;
-  tagRank?: number;
-  rrfScore: number;
-}
-
 const memorySearch: ToolDef = {
   name: "memory.search",
   description:
@@ -399,87 +388,21 @@ const memorySearch: ToolDef = {
       ? await resolveProjectId(ctx, parsed.data.project)
       : null;
     if (parsed.data.project && !projectId) {
-      return ok({ items: [], _ranks: {} }, "0 results (unknown project)");
+      return ok({ items: [], debug: { vec: 0, fts: 0, tag: 0 } }, "0 results (unknown project)");
     }
 
-    const queryVec = await embedText(query);
-    const vecLit = toVectorLiteral(queryVec);
-    const CANDIDATES = 50;
-    const RRF_K = 60;
+    const result = await searchMemories(
+      ctx.userId,
+      query,
+      { scope, projectKey: parsed.data.project, tags },
+      limit,
+    );
 
-    // Run the three candidate-fetch queries in parallel. The filter is
-    // expressed via pg's tagged-template binding so values are safely
-    // interpolated.
-    const userId = ctx.userId;
-
-    const vecPromise = pg<{ id: string }[]>`
-      SELECT id
-      FROM memories
-      WHERE user_id = ${userId}
-        AND deleted_at IS NULL
-        AND embedding IS NOT NULL
-        ${scope ? pg`AND scope = ${scope}` : pg``}
-        ${projectId ? pg`AND project_id = ${projectId}` : pg``}
-      ORDER BY embedding <=> ${vecLit}::vector ASC
-      LIMIT ${CANDIDATES}
-    `;
-
-    const ftsPromise = pg<{ id: string }[]>`
-      SELECT id
-      FROM memories, plainto_tsquery('english', ${query}) AS q
-      WHERE user_id = ${userId}
-        AND deleted_at IS NULL
-        AND content_tsv @@ q
-        ${scope ? pg`AND scope = ${scope}` : pg``}
-        ${projectId ? pg`AND project_id = ${projectId}` : pg``}
-      ORDER BY ts_rank_cd(content_tsv, q) DESC
-      LIMIT ${CANDIDATES}
-    `;
-
-    const tagPromise =
-      tags && tags.length > 0
-        ? pg<{ id: string }[]>`
-            SELECT id
-            FROM memories
-            WHERE user_id = ${userId}
-              AND deleted_at IS NULL
-              AND tags && ${tags}::text[]
-              ${scope ? pg`AND scope = ${scope}` : pg``}
-              ${projectId ? pg`AND project_id = ${projectId}` : pg``}
-            ORDER BY cardinality(
-              ARRAY(SELECT unnest(tags) INTERSECT SELECT unnest(${tags}::text[]))
-            ) DESC
-            LIMIT ${CANDIDATES}
-          `
-        : Promise.resolve([] as { id: string }[]);
-
-    const [vecHits, ftsHits, tagHits] = await Promise.all([
-      vecPromise,
-      ftsPromise,
-      tagPromise,
-    ]);
-
-    // Fuse via RRF: score(d) = Σ_r 1/(k + rank_r(d))
-    const scores = new Map<string, RankAccumulator>();
-    const accum = (id: string, rank: number, key: "vectorRank" | "ftsRank" | "tagRank") => {
-      const e = scores.get(id) ?? { rrfScore: 0 };
-      e[key] = rank;
-      e.rrfScore += 1 / (RRF_K + rank);
-      scores.set(id, e);
-    };
-    vecHits.forEach((h, i) => accum(h.id, i + 1, "vectorRank"));
-    ftsHits.forEach((h, i) => accum(h.id, i + 1, "ftsRank"));
-    tagHits.forEach((h, i) => accum(h.id, i + 1, "tagRank"));
-
-    if (scores.size === 0) {
-      return ok({ items: [], debug: { vec: 0, fts: 0, tag: 0 } }, "0 results");
+    if (result.hits.length === 0) {
+      return ok({ items: [], debug: result.debug }, "0 results");
     }
 
-    const sorted = [...scores.entries()]
-      .sort(([, a], [, b]) => b.rrfScore - a.rrfScore)
-      .slice(0, limit);
-    const topIds = sorted.map(([id]) => id);
-
+    const topIds = result.hits.map((h) => h.id);
     const rows = await db
       .select({
         id: memories.id,
@@ -494,33 +417,18 @@ const memorySearch: ToolDef = {
       .where(inArray(memories.id, topIds));
 
     const byId = new Map(rows.map((r) => [r.id, r]));
-    const items = sorted.flatMap(([id, rank]) => {
-      const row = byId.get(id);
+    const items = result.hits.flatMap((hit) => {
+      const row = byId.get(hit.id);
       if (!row) return [];
       return [
         {
           ...row,
-          _rank: {
-            rrfScore: Number(rank.rrfScore.toFixed(6)),
-            vectorRank: rank.vectorRank ?? null,
-            ftsRank: rank.ftsRank ?? null,
-            tagRank: rank.tagRank ?? null,
-          },
+          _rank: hit.rank,
         },
       ];
     });
 
-    return ok(
-      {
-        items,
-        debug: {
-          vec: vecHits.length,
-          fts: ftsHits.length,
-          tag: tagHits.length,
-        },
-      },
-      `${items.length} result(s)`,
-    );
+    return ok({ items, debug: result.debug }, `${items.length} result(s)`);
   },
 };
 
diff --git a/apps/web/lib/memories.ts b/apps/web/lib/memories.ts
new file mode 100644
index 0000000..84dc7d0
--- /dev/null
+++ b/apps/web/lib/memories.ts
@@ -0,0 +1,148 @@
+import { and, eq } from "drizzle-orm";
+import { db, pg } from "@/lib/db/client";
+import { projects } from "@/lib/db/schema";
+import { embedText } from "@/lib/embedder";
+
+/**
+ * Shared search helper. Used by:
+ *   - the MCP `memory.search` tool (returns rich rank data for the model)
+ *   - the Web UI memories page (renders human-readable results)
+ *
+ * Performs three candidate fetches in parallel — pgvector cosine, FTS
+ * ts_rank_cd, tag-set overlap — then fuses with Reciprocal Rank Fusion
+ * (k=60). Returns top-N with per-source rank info attached.
+ */
+
+export interface SearchFilters {
+  scope?: "project" | "user";
+  projectKey?: string;
+  tags?: string[];
+}
+
+export interface SearchHit {
+  id: string;
+  rank: {
+    rrfScore: number;
+    vectorRank: number | null;
+    ftsRank: number | null;
+    tagRank: number | null;
+  };
+}
+
+export interface SearchResult {
+  hits: SearchHit[];
+  debug: { vec: number; fts: number; tag: number };
+}
+
+const CANDIDATES = 50;
+const RRF_K = 60;
+
+function toVectorLiteral(v: number[]): string {
+  return `[${v.join(",")}]`;
+}
+
+async function resolveProjectId(
+  userId: string,
+  projectKey?: string,
+): Promise<string | null> {
+  if (!projectKey) return null;
+  const row = await db
+    .select({ id: projects.id })
+    .from(projects)
+    .where(and(eq(projects.userId, userId), eq(projects.key, projectKey)))
+    .limit(1);
+  return row[0]?.id ?? null;
+}
+
+export async function searchMemories(
+  userId: string,
+  query: string,
+  filters: SearchFilters = {},
+  limit = 20,
+): Promise<SearchResult> {
+  const { scope, projectKey, tags } = filters;
+  const projectId = projectKey ? await resolveProjectId(userId, projectKey) : null;
+  if (projectKey && !projectId) {
+    return { hits: [], debug: { vec: 0, fts: 0, tag: 0 } };
+  }
+
+  const queryVec = await embedText(query);
+  const vecLit = toVectorLiteral(queryVec);
+
+  const vecPromise = pg<{ id: string }[]>`
+    SELECT id
+    FROM memories
+    WHERE user_id = ${userId}
+      AND deleted_at IS NULL
+      AND embedding IS NOT NULL
+      ${scope ? pg`AND scope = ${scope}` : pg``}
+      ${projectId ? pg`AND project_id = ${projectId}` : pg``}
+    ORDER BY embedding <=> ${vecLit}::vector ASC
+    LIMIT ${CANDIDATES}
+  `;
+
+  const ftsPromise = pg<{ id: string }[]>`
+    SELECT id
+    FROM memories, plainto_tsquery('english', ${query}) AS q
+    WHERE user_id = ${userId}
+      AND deleted_at IS NULL
+      AND content_tsv @@ q
+      ${scope ? pg`AND scope = ${scope}` : pg``}
+      ${projectId ? pg`AND project_id = ${projectId}` : pg``}
+    ORDER BY ts_rank_cd(content_tsv, q) DESC
+    LIMIT ${CANDIDATES}
+  `;
+
+  const tagPromise =
+    tags && tags.length > 0
+      ? pg<{ id: string }[]>`
+          SELECT id
+          FROM memories
+          WHERE user_id = ${userId}
+            AND deleted_at IS NULL
+            AND tags && ${tags}::text[]
+            ${scope ? pg`AND scope = ${scope}` : pg``}
+            ${projectId ? pg`AND project_id = ${projectId}` : pg``}
+          ORDER BY cardinality(
+            ARRAY(SELECT unnest(tags) INTERSECT SELECT unnest(${tags}::text[]))
+          ) DESC
+          LIMIT ${CANDIDATES}
+        `
+      : Promise.resolve([] as { id: string }[]);
+
+  const [vec, fts, tag] = await Promise.all([vecPromise, ftsPromise, tagPromise]);
+
+  interface Accumulator {
+    vectorRank: number | null;
+    ftsRank: number | null;
+    tagRank: number | null;
+    rrfScore: number;
+  }
+  const scores = new Map<string, Accumulator>();
+  const accum = (id: string, rank: number, key: "vectorRank" | "ftsRank" | "tagRank") => {
+    const e =
+      scores.get(id) ??
+      ({ vectorRank: null, ftsRank: null, tagRank: null, rrfScore: 0 } as Accumulator);
+    e[key] = rank;
+    e.rrfScore += 1 / (RRF_K + rank);
+    scores.set(id, e);
+  };
+  vec.forEach((h, i) => accum(h.id, i + 1, "vectorRank"));
+  fts.forEach((h, i) => accum(h.id, i + 1, "ftsRank"));
+  tag.forEach((h, i) => accum(h.id, i + 1, "tagRank"));
+
+  const hits = [...scores.entries()]
+    .sort(([, a], [, b]) => b.rrfScore - a.rrfScore)
+    .slice(0, limit)
+    .map(([id, rank]) => ({
+      id,
+      rank: {
+        rrfScore: Number(rank.rrfScore.toFixed(6)),
+        vectorRank: rank.vectorRank,
+        ftsRank: rank.ftsRank,
+        tagRank: rank.tagRank,
+      },
+    }));
+
+  return { hits, debug: { vec: vec.length, fts: fts.length, tag: tag.length } };
+}
diff --git a/apps/web/lib/memory-actions.ts b/apps/web/lib/memory-actions.ts
new file mode 100644
index 0000000..dd48bf0
--- /dev/null
+++ b/apps/web/lib/memory-actions.ts
@@ -0,0 +1,184 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import { and, eq, isNull } from "drizzle-orm";
+import { auth } from "@/auth";
+import { db } from "@/lib/db/client";
+import { memories, projects, auditLog } from "@/lib/db/schema";
+import { embedText } from "@/lib/embedder";
+import {
+  MemoryWriteInput,
+  MemoryUpdateInput,
+  MemoryIdInput,
+} from "@shared-memory/schemas";
+
+/**
+ * Server Actions for memory CRUD from the Web UI. Mirrors the MCP tools
+ * but writes through the same DB layer, so updates and deletes here are
+ * indistinguishable from those made via Claude Code.
+ *
+ * `actor` is "web" in audit_log so we can tell the two paths apart later.
+ */
+
+async function requireUserId(): Promise<string> {
+  const session = await auth();
+  if (!session?.user?.id) throw new Error("not authenticated");
+  return session.user.id;
+}
+
+async function resolveProjectId(userId: string, key: string): Promise<string | null> {
+  const row = await db
+    .select({ id: projects.id })
+    .from(projects)
+    .where(and(eq(projects.userId, userId), eq(projects.key, key)))
+    .limit(1);
+  return row[0]?.id ?? null;
+}
+
+async function upsertProject(
+  userId: string,
+  key: string,
+  displayName?: string,
+): Promise<string> {
+  const existing = await resolveProjectId(userId, key);
+  if (existing) return existing;
+  const row = await db
+    .insert(projects)
+    .values({ userId, key, displayName: displayName ?? null })
+    .returning({ id: projects.id });
+  return row[0]!.id;
+}
+
+function parseTags(raw: FormDataEntryValue | null): string[] {
+  if (typeof raw !== "string") return [];
+  return raw
+    .split(/[,\s]+/)
+    .map((t) => t.trim())
+    .filter((t) => t.length > 0);
+}
+
+export async function createMemoryAction(formData: FormData) {
+  const userId = await requireUserId();
+
+  const payload = {
+    content: String(formData.get("content") ?? "").trim(),
+    scope: (formData.get("scope") as "project" | "user") || "project",
+    project: (formData.get("project") as string | null)?.trim() || undefined,
+    tags: parseTags(formData.get("tags")),
+  };
+  const parsed = MemoryWriteInput.safeParse(payload);
+  if (!parsed.success) {
+    throw new Error(parsed.error.issues.map((i) => i.message).join("; "));
+  }
+
+  let projectId: string | null = null;
+  if (parsed.data.scope === "project") {
+    if (!parsed.data.project) throw new Error("scope=project requires `project`");
+    projectId = await upsertProject(userId, parsed.data.project);
+  }
+
+  const embedding = await embedText(parsed.data.content);
+
+  const inserted = await db
+    .insert(memories)
+    .values({
+      userId,
+      projectId,
+      scope: parsed.data.scope,
+      content: parsed.data.content,
+      tags: parsed.data.tags ?? [],
+      embedding,
+    })
+    .returning({ id: memories.id });
+
+  await db.insert(auditLog).values({
+    userId,
+    actor: "web",
+    action: "memory.write",
+    entityType: "memory",
+    entityId: inserted[0]!.id,
+    payload: {
+      scope: parsed.data.scope,
+      projectKey: parsed.data.project ?? null,
+      tags: parsed.data.tags ?? [],
+    },
+  });
+
+  revalidatePath("/memories");
+  redirect(`/memories/${inserted[0]!.id}`);
+}
+
+export async function updateMemoryAction(formData: FormData) {
+  const userId = await requireUserId();
+
+  const id = String(formData.get("id") ?? "");
+  const payload = {
+    id,
+    content: ((formData.get("content") as string | null) ?? "").trim() || undefined,
+    tags: parseTags(formData.get("tags")),
+  };
+  const parsed = MemoryUpdateInput.safeParse(payload);
+  if (!parsed.success) {
+    throw new Error(parsed.error.issues.map((i) => i.message).join("; "));
+  }
+
+  const existing = await db
+    .select({ id: memories.id, content: memories.content })
+    .from(memories)
+    .where(
+      and(eq(memories.id, parsed.data.id), eq(memories.userId, userId), isNull(memories.deletedAt)),
+    )
+    .limit(1);
+  if (!existing[0]) throw new Error("not found");
+
+  const update: Record<string, unknown> = { updatedAt: new Date() };
+  if (parsed.data.tags !== undefined) update.tags = parsed.data.tags;
+  if (parsed.data.content !== undefined && parsed.data.content !== existing[0].content) {
+    update.content = parsed.data.content;
+    update.embedding = await embedText(parsed.data.content);
+  }
+
+  await db.update(memories).set(update).where(eq(memories.id, parsed.data.id));
+
+  await db.insert(auditLog).values({
+    userId,
+    actor: "web",
+    action: "memory.update",
+    entityType: "memory",
+    entityId: parsed.data.id,
+    payload: { fields: Object.keys(update).filter((k) => k !== "updatedAt") },
+  });
+
+  revalidatePath(`/memories/${parsed.data.id}`);
+  revalidatePath("/memories");
+  redirect(`/memories/${parsed.data.id}`);
+}
+
+export async function deleteMemoryAction(formData: FormData) {
+  const userId = await requireUserId();
+  const id = String(formData.get("id") ?? "");
+  const parsed = MemoryIdInput.safeParse({ id });
+  if (!parsed.success) throw new Error(parsed.error.issues[0]!.message);
+
+  const updated = await db
+    .update(memories)
+    .set({ deletedAt: new Date() })
+    .where(
+      and(eq(memories.id, parsed.data.id), eq(memories.userId, userId), isNull(memories.deletedAt)),
+    )
+    .returning({ id: memories.id });
+
+  if (!updated[0]) throw new Error("not found");
+
+  await db.insert(auditLog).values({
+    userId,
+    actor: "web",
+    action: "memory.delete",
+    entityType: "memory",
+    entityId: updated[0].id,
+  });
+
+  revalidatePath("/memories");
+  redirect("/memories");
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index 251a447..158f5a6 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -29,10 +29,12 @@
     "@types/node": "^22.10.2",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
+    "@tailwindcss/postcss": "^4.0.0",
     "drizzle-kit": "^0.30.1",
     "esbuild": "^0.24.2",
     "eslint": "^9.17.0",
     "eslint-config-next": "^15.1.0",
+    "tailwindcss": "^4.0.0",
     "tsx": "^4.19.2",
     "typescript": "^5.7.2"
   }
diff --git a/apps/web/postcss.config.mjs b/apps/web/postcss.config.mjs
new file mode 100644
index 0000000..c2ddf74
--- /dev/null
+++ b/apps/web/postcss.config.mjs
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1a7d41f..88e4d7e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -60,6 +60,9 @@ importers:
         specifier: ^3.23.8
         version: 3.25.76
     devDependencies:
+      '@tailwindcss/postcss':
+        specifier: ^4.0.0
+        version: 4.3.0
       '@types/node':
         specifier: ^22.10.2
         version: 22.19.19
@@ -77,10 +80,13 @@ importers:
         version: 0.24.2
       eslint:
         specifier: ^9.17.0
-        version: 9.39.4
+        version: 9.39.4(jiti@2.7.0)
       eslint-config-next:
         specifier: ^15.1.0
-        version: 15.5.18(eslint@9.39.4)(typescript@5.9.3)
+        version: 15.5.18(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
+      tailwindcss:
+        specifier: ^4.0.0
+        version: 4.3.0
       tsx:
         specifier: ^4.19.2
         version: 4.22.0
@@ -100,6 +106,10 @@ importers:
 
 packages:
 
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
   '@auth/core@0.37.2':
     resolution: {integrity: sha512-kUvzyvkcd6h1vpeMAojK2y7+PAV5H+0Cc9+ZlKYDFhDY31AlvsB+GW5vNO4qE3Y07KeQgvNO9U0QUx/fN62kBw==}
     peerDependencies:
@@ -933,6 +943,22 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
   '@modelcontextprotocol/sdk@1.29.0':
     resolution: {integrity: sha512-zo37mZA9hJWpULgkRpowewez1y6ML5GsXJPY8FI0tBBCd77HEvza4jDqRKOXgHNn867PVGCyTdzqpz0izu5ZjQ==}
     engines: {node: '>=18'}
@@ -1064,6 +1090,94 @@ packages:
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
+  '@tailwindcss/node@4.3.0':
+    resolution: {integrity: sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==}
+
+  '@tailwindcss/oxide-android-arm64@4.3.0':
+    resolution: {integrity: sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.0':
+    resolution: {integrity: sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.3.0':
+    resolution: {integrity: sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.0':
+    resolution: {integrity: sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
+    resolution: {integrity: sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
+    resolution: {integrity: sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
+    resolution: {integrity: sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
+    resolution: {integrity: sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.0':
+    resolution: {integrity: sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.0':
+    resolution: {integrity: sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
+    resolution: {integrity: sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
+    resolution: {integrity: sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.3.0':
+    resolution: {integrity: sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/postcss@4.3.0':
+    resolution: {integrity: sha512-Jm05Tjx+9yCLGv5qw1c+84Psds8MnyrEQYCB+FFk2lgGiUjlRqdxke4mVTuYrj2xnVZqKim2Apr5ySuQRYAw/w==}
+
   '@tybys/wasm-util@0.10.2':
     resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
 
@@ -1702,6 +1816,10 @@ packages:
   end-of-stream@1.4.5:
     resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
 
+  enhanced-resolve@5.21.3:
+    resolution: {integrity: sha512-QyL119InA+XXEkNLNTPCXPugSvOfhwv0JOlGNzvxs0hZaiHLNvXSpudUWsOlsXGWJh8G6ckCScEkVHfX3kw/2Q==}
+    engines: {node: '>=10.13.0'}
+
   env-paths@3.0.0:
     resolution: {integrity: sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -2069,6 +2187,9 @@ packages:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
 
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
   guid-typescript@1.0.9:
     resolution: {integrity: sha512-Y8T4vYhEfwJOTbouREvG+3XDsjr8E3kIr7uf+JZ0BYloFsttiHU0WfvANVsR7TxNUJa/WpCnw/Ino/p+DeBhBQ==}
 
@@ -2275,6 +2396,10 @@ packages:
     resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
     engines: {node: '>= 0.4'}
 
+  jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
+    hasBin: true
+
   jose@5.10.0:
     resolution: {integrity: sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==}
 
@@ -2331,6 +2456,76 @@ packages:
   light-my-request@6.6.0:
     resolution: {integrity: sha512-CHYbu8RtboSIoVsHZ6Ye4cj4Aw/yg2oAFimlF7mNvfDV192LR7nDiKtSIfCuLT7KokPSTn/9kfVLm5OGN0A28A==}
 
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -2345,6 +2540,9 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -2594,6 +2792,10 @@ packages:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.14:
+    resolution: {integrity: sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==}
+    engines: {node: ^10 || ^12 || >=14}
+
   postgres@3.4.9:
     resolution: {integrity: sha512-GD3qdB0x1z9xgFI6cdRD6xu2Sp2WCOEoe3mtnyB5Ee0XrrL5Pe+e4CCnJrRMnL1zYtRDZmQQVbvOttLnKDLnaw==}
     engines: {node: '>=12'}
@@ -2933,6 +3135,13 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  tailwindcss@4.3.0:
+    resolution: {integrity: sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==}
+
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
+    engines: {node: '>=6'}
+
   tar-fs@2.1.4:
     resolution: {integrity: sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==}
 
@@ -3092,6 +3301,8 @@ packages:
 
 snapshots:
 
+  '@alloc/quick-lru@5.2.0': {}
+
   '@auth/core@0.37.2':
     dependencies:
       '@panva/hkdf': 1.2.1
@@ -3418,9 +3629,9 @@ snapshots:
   '@esbuild/win32-x64@0.28.0':
     optional: true
 
-  '@eslint-community/eslint-utils@4.9.1(eslint@9.39.4)':
+  '@eslint-community/eslint-utils@4.9.1(eslint@9.39.4(jiti@2.7.0))':
     dependencies:
-      eslint: 9.39.4
+      eslint: 9.39.4(jiti@2.7.0)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.2': {}
@@ -3606,6 +3817,25 @@ snapshots:
   '@img/sharp-win32-x64@0.34.5':
     optional: true
 
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   '@modelcontextprotocol/sdk@1.29.0(zod@3.25.76)':
     dependencies:
       '@hono/node-server': 1.19.14(hono@4.12.18)
@@ -3716,6 +3946,75 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@tailwindcss/node@4.3.0':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.21.3
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.3.0
+
+  '@tailwindcss/oxide-android-arm64@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide@4.3.0':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.3.0
+      '@tailwindcss/oxide-darwin-arm64': 4.3.0
+      '@tailwindcss/oxide-darwin-x64': 4.3.0
+      '@tailwindcss/oxide-freebsd-x64': 4.3.0
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.0
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.0
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.0
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.0
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.0
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.0
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.0
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.0
+
+  '@tailwindcss/postcss@4.3.0':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.3.0
+      '@tailwindcss/oxide': 4.3.0
+      postcss: 8.5.14
+      tailwindcss: 4.3.0
+
   '@tybys/wasm-util@0.10.2':
     dependencies:
       tslib: 2.8.1
@@ -3743,15 +4042,15 @@ snapshots:
     dependencies:
       csstype: 3.2.3
 
-  '@typescript-eslint/eslint-plugin@8.59.3(@typescript-eslint/parser@8.59.3(eslint@9.39.4)(typescript@5.9.3))(eslint@9.39.4)(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.59.3(@typescript-eslint/parser@8.59.3(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3))(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.59.3(eslint@9.39.4)(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.59.3(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
       '@typescript-eslint/scope-manager': 8.59.3
-      '@typescript-eslint/type-utils': 8.59.3(eslint@9.39.4)(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.59.3(eslint@9.39.4)(typescript@5.9.3)
+      '@typescript-eslint/type-utils': 8.59.3(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.59.3(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
       '@typescript-eslint/visitor-keys': 8.59.3
-      eslint: 9.39.4
+      eslint: 9.39.4(jiti@2.7.0)
       ignore: 7.0.5
       natural-compare: 1.4.0
       ts-api-utils: 2.5.0(typescript@5.9.3)
@@ -3759,14 +4058,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.59.3(eslint@9.39.4)(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.59.3(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.59.3
       '@typescript-eslint/types': 8.59.3
       '@typescript-eslint/typescript-estree': 8.59.3(typescript@5.9.3)
       '@typescript-eslint/visitor-keys': 8.59.3
       debug: 4.4.3
-      eslint: 9.39.4
+      eslint: 9.39.4(jiti@2.7.0)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -3789,13 +4088,13 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.59.3(eslint@9.39.4)(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.59.3(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.59.3
       '@typescript-eslint/typescript-estree': 8.59.3(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.59.3(eslint@9.39.4)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.59.3(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
       debug: 4.4.3
-      eslint: 9.39.4
+      eslint: 9.39.4(jiti@2.7.0)
       ts-api-utils: 2.5.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -3818,13 +4117,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.59.3(eslint@9.39.4)(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.59.3(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.7.0))
       '@typescript-eslint/scope-manager': 8.59.3
       '@typescript-eslint/types': 8.59.3
       '@typescript-eslint/typescript-estree': 8.59.3(typescript@5.9.3)
-      eslint: 9.39.4
+      eslint: 9.39.4(jiti@2.7.0)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -4277,6 +4576,11 @@ snapshots:
     dependencies:
       once: 1.4.0
 
+  enhanced-resolve@5.21.3:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.3
+
   env-paths@3.0.0: {}
 
   es-abstract@1.24.2:
@@ -4499,19 +4803,19 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-config-next@15.5.18(eslint@9.39.4)(typescript@5.9.3):
+  eslint-config-next@15.5.18(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3):
     dependencies:
       '@next/eslint-plugin-next': 15.5.18
       '@rushstack/eslint-patch': 1.16.1
-      '@typescript-eslint/eslint-plugin': 8.59.3(@typescript-eslint/parser@8.59.3(eslint@9.39.4)(typescript@5.9.3))(eslint@9.39.4)(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.59.3(eslint@9.39.4)(typescript@5.9.3)
-      eslint: 9.39.4
+      '@typescript-eslint/eslint-plugin': 8.59.3(@typescript-eslint/parser@8.59.3(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3))(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.59.3(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
+      eslint: 9.39.4(jiti@2.7.0)
       eslint-import-resolver-node: 0.3.10
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.59.3(eslint@9.39.4)(typescript@5.9.3))(eslint@9.39.4))(eslint@9.39.4)
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.59.3(eslint@9.39.4)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.59.3(eslint@9.39.4)(typescript@5.9.3))(eslint@9.39.4))(eslint@9.39.4))(eslint@9.39.4)
-      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.4)
-      eslint-plugin-react: 7.37.5(eslint@9.39.4)
-      eslint-plugin-react-hooks: 5.2.0(eslint@9.39.4)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.4(jiti@2.7.0))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.59.3(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4(jiti@2.7.0))
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.4(jiti@2.7.0))
+      eslint-plugin-react: 7.37.5(eslint@9.39.4(jiti@2.7.0))
+      eslint-plugin-react-hooks: 5.2.0(eslint@9.39.4(jiti@2.7.0))
     optionalDependencies:
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -4527,33 +4831,33 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.59.3(eslint@9.39.4)(typescript@5.9.3))(eslint@9.39.4))(eslint@9.39.4):
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.4(jiti@2.7.0)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.3
-      eslint: 9.39.4
+      eslint: 9.39.4(jiti@2.7.0)
       get-tsconfig: 4.14.0
       is-bun-module: 2.0.0
       stable-hash: 0.0.5
       tinyglobby: 0.2.16
       unrs-resolver: 1.11.1
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.59.3(eslint@9.39.4)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.59.3(eslint@9.39.4)(typescript@5.9.3))(eslint@9.39.4))(eslint@9.39.4))(eslint@9.39.4)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.59.3(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4(jiti@2.7.0))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.59.3(eslint@9.39.4)(typescript@5.9.3))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.59.3(eslint@9.39.4)(typescript@5.9.3))(eslint@9.39.4))(eslint@9.39.4))(eslint@9.39.4):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.59.3(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4(jiti@2.7.0)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 8.59.3(eslint@9.39.4)(typescript@5.9.3)
-      eslint: 9.39.4
+      '@typescript-eslint/parser': 8.59.3(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
+      eslint: 9.39.4(jiti@2.7.0)
       eslint-import-resolver-node: 0.3.10
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.59.3(eslint@9.39.4)(typescript@5.9.3))(eslint@9.39.4))(eslint@9.39.4)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.4(jiti@2.7.0))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.59.3(eslint@9.39.4)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.59.3(eslint@9.39.4)(typescript@5.9.3))(eslint@9.39.4))(eslint@9.39.4))(eslint@9.39.4):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.59.3(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4(jiti@2.7.0)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -4562,9 +4866,9 @@ snapshots:
       array.prototype.flatmap: 1.3.3
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 9.39.4
+      eslint: 9.39.4(jiti@2.7.0)
       eslint-import-resolver-node: 0.3.10
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.59.3(eslint@9.39.4)(typescript@5.9.3))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.59.3(eslint@9.39.4)(typescript@5.9.3))(eslint@9.39.4))(eslint@9.39.4))(eslint@9.39.4)
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.59.3(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4(jiti@2.7.0))
       hasown: 2.0.3
       is-core-module: 2.16.2
       is-glob: 4.0.3
@@ -4576,13 +4880,13 @@ snapshots:
       string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.59.3(eslint@9.39.4)(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.59.3(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jsx-a11y@6.10.2(eslint@9.39.4):
+  eslint-plugin-jsx-a11y@6.10.2(eslint@9.39.4(jiti@2.7.0)):
     dependencies:
       aria-query: 5.3.2
       array-includes: 3.1.9
@@ -4592,7 +4896,7 @@ snapshots:
       axobject-query: 4.1.0
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
-      eslint: 9.39.4
+      eslint: 9.39.4(jiti@2.7.0)
       hasown: 2.0.3
       jsx-ast-utils: 3.3.5
       language-tags: 1.0.9
@@ -4601,11 +4905,11 @@ snapshots:
       safe-regex-test: 1.1.0
       string.prototype.includes: 2.0.1
 
-  eslint-plugin-react-hooks@5.2.0(eslint@9.39.4):
+  eslint-plugin-react-hooks@5.2.0(eslint@9.39.4(jiti@2.7.0)):
     dependencies:
-      eslint: 9.39.4
+      eslint: 9.39.4(jiti@2.7.0)
 
-  eslint-plugin-react@7.37.5(eslint@9.39.4):
+  eslint-plugin-react@7.37.5(eslint@9.39.4(jiti@2.7.0)):
     dependencies:
       array-includes: 3.1.9
       array.prototype.findlast: 1.2.5
@@ -4613,7 +4917,7 @@ snapshots:
       array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
       es-iterator-helpers: 1.3.2
-      eslint: 9.39.4
+      eslint: 9.39.4(jiti@2.7.0)
       estraverse: 5.3.0
       hasown: 2.0.3
       jsx-ast-utils: 3.3.5
@@ -4638,9 +4942,9 @@ snapshots:
 
   eslint-visitor-keys@5.0.1: {}
 
-  eslint@9.39.4:
+  eslint@9.39.4(jiti@2.7.0):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.7.0))
       '@eslint-community/regexpp': 4.12.2
       '@eslint/config-array': 0.21.2
       '@eslint/config-helpers': 0.4.2
@@ -4674,6 +4978,8 @@ snapshots:
       minimatch: 3.1.5
       natural-compare: 1.4.0
       optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.7.0
     transitivePeerDependencies:
       - supports-color
 
@@ -4933,6 +5239,8 @@ snapshots:
 
   gopd@1.2.0: {}
 
+  graceful-fs@4.2.11: {}
+
   guid-typescript@1.0.9: {}
 
   has-bigints@1.1.0: {}
@@ -5131,6 +5439,8 @@ snapshots:
       has-symbols: 1.1.0
       set-function-name: 2.0.2
 
+  jiti@2.7.0: {}
+
   jose@5.10.0: {}
 
   jose@6.2.3: {}
@@ -5187,6 +5497,55 @@ snapshots:
       process-warning: 4.0.1
       set-cookie-parser: 2.7.2
 
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -5199,6 +5558,10 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   math-intrinsics@1.1.0: {}
 
   media-typer@1.1.0: {}
@@ -5435,6 +5798,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.5.14:
+    dependencies:
+      nanoid: 3.3.12
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   postgres@3.4.9: {}
 
   preact-render-to-string@5.2.3(preact@10.11.3):
@@ -5886,6 +6255,10 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  tailwindcss@4.3.0: {}
+
+  tapable@2.3.3: {}
+
   tar-fs@2.1.4:
     dependencies:
       chownr: 1.1.4