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>
This commit is contained in:
Claude Opus 4.7
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user