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,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>
+  );
+}