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>
|
||||
);
|
||||
}
|
||||
@@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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'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>
|
||||
);
|
||||
}
|
||||
@@ -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'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");
|
||||
}
|
||||
|
||||
+73
-48
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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");
|
||||
}
|
||||
|
||||
+39
-26
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user