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

Replaces the debug /me + /connect pages with a real authed app shell. Pages - / — anonymous landing; redirects to /dashboard once signed in - /dashboard — recent memories + top projects, quick "new memory" action - /memories — searchable list with hybrid (vector+FTS+tags) scoring; per-result rank breakdown shown inline - /memories/[id] — view + inline edit toggle + delete - /memories/new — create form with project autocomplete - /projects — list with memory counts and last-activity - /projects/[key] — that project's memories - /settings — read-only Authentik profile + link to tokens - /settings/tokens — list / create / revoke CLI tokens Old URLs preserved as redirects: - /me → /dashboard - /connect → /settings/tokens Stack additions - Tailwind v4 with CSS-first @theme tokens (dark only for now) - App shell in app/(authed)/ — auth guard + top nav with global search box - Lightweight UI primitives in app/_components/ui/ (Button, Input, Card, Badge, EmptyState, Container, PageHeader) - Search logic extracted from MCP tool into lib/memories.ts so Web UI and MCP both call the same RRF code path - Memory CRUD via Server Actions in lib/memory-actions.ts; audit_log rows are tagged actor='web' to distinguish from MCP writes Per-token revoke - New cli_tokens table (id, user_id, jti unique, name, created_at, last_used_at, expires_at, revoked_at) — migration 0001_cli_tokens.sql - mintCliToken now records jti + name; verifyCliToken enforces revocation for tracked tokens. Legacy tokens minted before this change (no jti) are accepted on signature alone until they expire naturally. - /settings/tokens lists active + revoked tokens with one-click revoke Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-15 10:57:17 -07:00
parent 609039f098
commit ff6baab393
33 changed files with 2475 additions and 395 deletions
@@ -0,0 +1,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>
+  );
+}