feat: Phase 3b — proper Web UI for memories, projects, settings

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>
2026-05-15 10:57:17 -07:00
parent 609039f098
commit ff6baab393
33 changed files with 2475 additions and 395 deletions
@@ -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>
+  );
+}