wiki-viewer 1.0.0 → 1.1.0

package/.next/standalone/src/components/ai-panel/token-section.tsx

@@ -0,0 +1,312 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { CheckCircle, XCircle, Clock, Trash2, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface PendingReg {
+	registrationId: string;
+	agentId: string;
+	displayName: string;
+	requestedScope: { paths: string[]; ops: string[] };
+	requestedAt: string;
+}
+
+interface RegisteredAgent {
+	id: string;
+	displayName: string;
+	scope: { paths: string[]; ops: string[] };
+	createdAt: string;
+	lastSeen: string;
+}
+
+function relativeTime(iso: string): string {
+	const diff = Date.now() - new Date(iso).getTime();
+	if (diff < 60_000) return "just now";
+	if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
+	if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
+	return `${Math.floor(diff / 86_400_000)}d ago`;
+}
+
+// ── Sub-components ────────────────────────────────────────────────────────────
+
+function ScopeTag({ scope }: { scope: { paths: string[]; ops: string[] } }) {
+	return (
+		<span className="text-[10px] text-muted-foreground/70 font-mono">
+			{scope.paths.join(", ")} · {scope.ops.join(",")}
+		</span>
+	);
+}
+
+function PendingRow({
+	reg,
+	onApprove,
+	onDeny,
+}: {
+	reg: PendingReg;
+	onApprove: (id: string) => Promise<void>;
+	onDeny: (id: string) => Promise<void>;
+}) {
+	const [busy, setBusy] = useState(false);
+
+	async function handle(fn: (id: string) => Promise<void>) {
+		setBusy(true);
+		try {
+			await fn(reg.registrationId);
+		} finally {
+			setBusy(false);
+		}
+	}
+
+	return (
+		<li className="py-1.5 border-b border-border/40 last:border-0">
+			<div className="flex items-start justify-between gap-1">
+				<div className="min-w-0">
+					<p className="text-xs font-mono truncate">{reg.displayName}</p>
+					<p className="text-[10px] text-muted-foreground/60 truncate">{reg.agentId}</p>
+					<ScopeTag scope={reg.requestedScope} />
+				</div>
+				<div className="flex items-center gap-1 shrink-0">
+					<Button
+						size="sm"
+						variant="default"
+						className="h-6 px-2 text-[10px]"
+						disabled={busy}
+						onClick={() => void handle(onApprove)}
+						title="Approve"
+					>
+						<CheckCircle className="h-3 w-3 mr-0.5" />
+						Approve
+					</Button>
+					<Button
+						size="sm"
+						variant="ghost"
+						className="h-6 px-2 text-[10px] text-destructive hover:text-destructive"
+						disabled={busy}
+						onClick={() => void handle(onDeny)}
+						title="Deny"
+					>
+						<XCircle className="h-3 w-3 mr-0.5" />
+						Deny
+					</Button>
+				</div>
+			</div>
+			<p className="text-[10px] text-muted-foreground/50 mt-0.5">
+				Requested {relativeTime(reg.requestedAt)}
+			</p>
+		</li>
+	);
+}
+
+function AgentRow({
+	agent,
+	onRevoke,
+}: {
+	agent: RegisteredAgent;
+	onRevoke: (id: string) => Promise<void>;
+}) {
+	const [busy, setBusy] = useState(false);
+
+	return (
+		<li className="py-1.5 border-b border-border/40 last:border-0">
+			<div className="flex items-start justify-between gap-1">
+				<div className="min-w-0">
+					<p className="text-xs font-mono truncate">{agent.displayName}</p>
+					<p className="text-[10px] text-muted-foreground/60 truncate">{agent.id}</p>
+					<ScopeTag scope={agent.scope} />
+				</div>
+				<Button
+					size="sm"
+					variant="ghost"
+					className="h-6 w-6 p-0 shrink-0 text-destructive hover:text-destructive"
+					disabled={busy}
+					onClick={async () => {
+						setBusy(true);
+						try {
+							await onRevoke(agent.id);
+						} finally {
+							setBusy(false);
+						}
+					}}
+					title="Revoke agent"
+				>
+					<Trash2 className="h-3 w-3" />
+				</Button>
+			</div>
+			<p className="text-[10px] text-muted-foreground/50 mt-0.5">
+				Last seen {relativeTime(agent.lastSeen)}
+			</p>
+		</li>
+	);
+}
+
+// ── Main component ────────────────────────────────────────────────────────────
+
+export function TokenSection() {
+	const [pending, setPending] = useState<PendingReg[]>([]);
+	const [agents, setAgents] = useState<RegisteredAgent[]>([]);
+	const [ownerReady, setOwnerReady] = useState(false);
+
+	// Bootstrap owner cookie on first mount (localhost only)
+	useEffect(() => {
+		fetch("/api/owner/init", { credentials: "same-origin" })
+			.then((r) => {
+				if (r.ok || r.status === 204) setOwnerReady(true);
+			})
+			.catch(() => {
+				// Non-localhost: owner init will fail — that's expected for remote
+				setOwnerReady(true);
+			});
+	}, []);
+
+	const fetchPending = useCallback(async () => {
+		try {
+			const r = await fetch("/api/agent/admin/registrations", { credentials: "same-origin" });
+			if (!r.ok) return;
+			const data = (await r.json()) as { pending: PendingReg[] };
+			setPending(data.pending);
+		} catch {
+			// Ignore fetch errors (offline, etc.)
+		}
+	}, []);
+
+	const fetchAgents = useCallback(async () => {
+		try {
+			const r = await fetch("/api/agent/admin/agents", { credentials: "same-origin" });
+			if (!r.ok) return;
+			const data = (await r.json()) as { agents: RegisteredAgent[] };
+			setAgents(data.agents);
+		} catch {
+			// Ignore fetch errors
+		}
+	}, []);
+
+	// Poll pending every 5s, agents every 30s
+	useEffect(() => {
+		if (!ownerReady) return;
+		void fetchPending();
+		void fetchAgents();
+		const pendingId = setInterval(() => void fetchPending(), 5_000);
+		const agentsId = setInterval(() => void fetchAgents(), 30_000);
+		return () => {
+			clearInterval(pendingId);
+			clearInterval(agentsId);
+		};
+	}, [ownerReady, fetchPending, fetchAgents]);
+
+	const handleApprove = useCallback(
+		async (regId: string) => {
+			const r = await fetch(`/api/agent/admin/registrations/${regId}/approve`, {
+				method: "POST",
+				credentials: "same-origin",
+				headers: { "Content-Type": "application/json" },
+				body: "{}",
+			});
+			if (r.ok) {
+				toast.success("Agent approved");
+				await Promise.all([fetchPending(), fetchAgents()]);
+			} else {
+				toast.error("Failed to approve agent");
+			}
+		},
+		[fetchPending, fetchAgents],
+	);
+
+	const handleDeny = useCallback(
+		async (regId: string) => {
+			const r = await fetch(`/api/agent/admin/registrations/${regId}/deny`, {
+				method: "POST",
+				credentials: "same-origin",
+			});
+			if (r.ok) {
+				toast.success("Registration denied");
+				await fetchPending();
+			} else {
+				toast.error("Failed to deny registration");
+			}
+		},
+		[fetchPending],
+	);
+
+	const handleRevoke = useCallback(
+		async (agentId: string) => {
+			const r = await fetch(
+				`/api/agent/admin/agents/${encodeURIComponent(agentId)}/revoke`,
+				{ method: "POST", credentials: "same-origin" },
+			);
+			if (r.ok) {
+				toast.success("Agent revoked");
+				await fetchAgents();
+			} else {
+				toast.error("Failed to revoke agent");
+			}
+		},
+		[fetchAgents],
+	);
+
+	return (
+		<section className="space-y-2">
+			<div className="flex items-center justify-between">
+				<h3 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+					Agents
+				</h3>
+				<Button
+					size="sm"
+					variant="ghost"
+					className="h-5 w-5 p-0"
+					title="Refresh"
+					onClick={() => void Promise.all([fetchPending(), fetchAgents()])}
+				>
+					<RefreshCw className="h-3 w-3" />
+				</Button>
+			</div>
+
+			{/* Pending registrations */}
+			{pending.length > 0 && (
+				<div className="rounded-md border border-amber-500/40 bg-amber-50/10 p-2">
+					<p className="text-[10px] font-semibold uppercase tracking-widest text-amber-600/80 mb-1 flex items-center gap-1">
+						<Clock className="h-3 w-3" />
+						Pending ({pending.length})
+					</p>
+					<ul>
+						{pending.map((reg) => (
+							<PendingRow
+								key={reg.registrationId}
+								reg={reg}
+								onApprove={handleApprove}
+								onDeny={handleDeny}
+							/>
+						))}
+					</ul>
+				</div>
+			)}
+
+			{/* Registered agents */}
+			<div className="rounded-md border border-border bg-muted/40 p-2">
+				{agents.length === 0 ? (
+					<p className="text-xs text-muted-foreground/60 py-1">
+						No registered agents.{" "}
+						<span className="text-muted-foreground/40">
+							Agents register via POST /api/agent/register.
+						</span>
+					</p>
+				) : (
+					<ul>
+						{agents.map((agent) => (
+							<AgentRow key={agent.id} agent={agent} onRevoke={handleRevoke} />
+						))}
+					</ul>
+				)}
+			</div>
+
+			<p className="text-[10px] text-muted-foreground/60 leading-relaxed">
+				Agents authenticate via bearer token + X-Agent-Id header. Use{" "}
+				<code className="bg-muted px-0.5 rounded">POST /api/agent/register</code> to start the
+				TOFU flow.
+			</p>
+		</section>
+	);
+}

package/.next/standalone/src/components/auth-settings-sheet.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { AlertCircle, Loader2 } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetFooter,
+	SheetHeader,
+	SheetTitle,
+} from "@/components/ui/sheet";
+import { showError } from "@/lib/toast";
+
+interface AuthSettings {
+	allowedEmails: string[];
+	allowedDomains: string[];
+	source: "config" | "env";
+	envFallbackActive: boolean;
+}
+
+function listToText(list: string[]): string {
+	return list.join("\n");
+}
+
+function textToList(text: string): string[] {
+	return text
+		.split(/[\n,]/)
+		.map((s) => s.trim())
+		.filter(Boolean);
+}
+
+export function AuthSettingsSheet({
+	open,
+	onOpenChange,
+}: {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+}) {
+	const [loading, setLoading] = useState(false);
+	const [saving, setSaving] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const [source, setSource] = useState<"config" | "env">("env");
+	const [emailsText, setEmailsText] = useState("");
+	const [domainsText, setDomainsText] = useState("");
+
+	const load = useCallback(async () => {
+		setLoading(true);
+		setError(null);
+		try {
+			const res = await fetch("/api/system/auth-settings");
+			if (!res.ok) throw new Error("Failed to load settings");
+			const data: AuthSettings = await res.json();
+			setEmailsText(listToText(data.allowedEmails));
+			setDomainsText(listToText(data.allowedDomains));
+			setSource(data.source);
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Failed to load");
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		if (open) void load();
+	}, [open, load]);
+
+	async function handleSave() {
+		setSaving(true);
+		setError(null);
+		try {
+			const res = await fetch("/api/system/auth-settings", {
+				method: "PUT",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					allowedEmails: textToList(emailsText),
+					allowedDomains: textToList(domainsText),
+				}),
+			});
+			const data: { error?: string; source?: "config" | "env" } =
+				await res.json();
+			if (!res.ok) {
+				setError(data.error ?? "Save failed");
+				showError(data.error ?? "Save failed");
+				return;
+			}
+			if (data.source) setSource(data.source);
+			onOpenChange(false);
+		} catch {
+			setError("Save failed");
+		} finally {
+			setSaving(false);
+		}
+	}
+
+	const noRestriction =
+		textToList(emailsText).length === 0 &&
+		textToList(domainsText).length === 0;
+
+	return (
+		<Sheet open={open} onOpenChange={onOpenChange}>
+			<SheetContent side="right" className="w-full sm:max-w-md flex flex-col">
+				<SheetHeader>
+					<SheetTitle>Signup allowlist</SheetTitle>
+					<SheetDescription>
+						Control who can create an account. Leave both lists empty to allow
+						any email. Saving here overrides the AUTH_ALLOWED_EMAILS and
+						AUTH_ALLOWED_DOMAIN environment variables.
+					</SheetDescription>
+				</SheetHeader>
+
+				{loading ? (
+					<div className="flex flex-1 items-center justify-center">
+						<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+					</div>
+				) : (
+					<div className="flex-1 space-y-5 overflow-auto py-4">
+						{source === "env" && (
+							<div className="flex items-start gap-2 rounded-md bg-muted px-3 py-2 text-xs text-muted-foreground">
+								<AlertCircle className="h-3.5 w-3.5 shrink-0 mt-0.5" />
+								<span>
+									Current values come from environment variables. Saving moves
+									the allowlist into config and takes precedence going forward.
+								</span>
+							</div>
+						)}
+
+						<div className="space-y-1.5">
+							<label
+								htmlFor="allowed-emails"
+								className="text-sm font-medium"
+							>
+								Allowed emails
+							</label>
+							<p className="text-xs text-muted-foreground">
+								One per line (or comma-separated). Exact match,
+								case-insensitive.
+							</p>
+							<textarea
+								id="allowed-emails"
+								value={emailsText}
+								onChange={(e) => setEmailsText(e.target.value)}
+								spellCheck={false}
+								rows={5}
+								placeholder="alice@example.com&#10;bob@example.com"
+								className="w-full resize-y rounded-md border border-border bg-background px-3 py-2 font-mono text-sm outline-none focus:ring-2 focus:ring-primary"
+							/>
+						</div>
+
+						<div className="space-y-1.5">
+							<label
+								htmlFor="allowed-domains"
+								className="text-sm font-medium"
+							>
+								Allowed domains
+							</label>
+							<p className="text-xs text-muted-foreground">
+								One per line (or comma-separated). Matches any email at that
+								domain.
+							</p>
+							<textarea
+								id="allowed-domains"
+								value={domainsText}
+								onChange={(e) => setDomainsText(e.target.value)}
+								spellCheck={false}
+								rows={4}
+								placeholder="example.com&#10;trusted.org"
+								className="w-full resize-y rounded-md border border-border bg-background px-3 py-2 font-mono text-sm outline-none focus:ring-2 focus:ring-primary"
+							/>
+						</div>
+
+						{noRestriction && (
+							<div className="flex items-start gap-2 rounded-md bg-warning-soft px-3 py-2 text-xs text-warning-ink">
+								<AlertCircle className="h-3.5 w-3.5 shrink-0 mt-0.5" />
+								<span>
+									Both lists are empty. Anyone with the signup URL can create an
+									account.
+								</span>
+							</div>
+						)}
+
+						{error && (
+							<div className="flex items-center gap-1.5 text-xs text-destructive">
+								<AlertCircle className="h-3.5 w-3.5 shrink-0" />
+								{error}
+							</div>
+						)}
+					</div>
+				)}
+
+				<SheetFooter>
+					<Button
+						variant="ghost"
+						onClick={() => onOpenChange(false)}
+						disabled={saving}
+					>
+						Cancel
+					</Button>
+					<Button onClick={handleSave} disabled={saving || loading} className="gap-1.5">
+						{saving && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
+						Save
+					</Button>
+				</SheetFooter>
+			</SheetContent>
+		</Sheet>
+	);
+}

package/.next/standalone/src/components/editor/bubble-menu.tsx

@@ -11,6 +11,8 @@ import {
 	Code,
 	Italic,
 	Link as LinkIcon,
+	MessageCircle,
+	MessageSquarePlus,
 	Strikethrough,
 	Subscript as SubIcon,
 	Superscript as SuperIcon,
@@ -22,6 +24,10 @@ import { LinkPopover } from "./link-popover";
 
 interface Props {
 	editor: Editor | null;
+	/** Open the human "suggest edit" flow for the current selection's block. */
+	onSuggestEdit?: () => void;
+	/** Open a comment thread on the current selection's block. */
+	onComment?: () => void;
 }
 
 type OpenPopover =
@@ -34,7 +40,7 @@ type OpenPopover =
 			anchor: { top: number; left: number };
 	  };
 
-export function EditorBubbleMenu({ editor }: Props) {
+export function EditorBubbleMenu({ editor, onSuggestEdit, onComment }: Props) {
 	const [popover, setPopover] = useState<OpenPopover>(null);
 
 	useEffect(() => {
@@ -58,7 +64,7 @@ export function EditorBubbleMenu({ editor }: Props) {
 
 	const btn = (active: boolean) =>
 		cn(
-			"h-7 w-7 flex items-center justify-center rounded hover:bg-accent text-foreground/80 transition-colors",
+			"h-9 w-9 sm:h-7 sm:w-7 flex items-center justify-center rounded hover:bg-accent text-foreground/80 transition-colors",
 			active && "bg-accent text-foreground",
 		);
 
@@ -205,6 +211,39 @@ export function EditorBubbleMenu({ editor }: Props) {
 				>
 					<LinkIcon className="w-3.5 h-3.5" />
 				</button>
+				{(onSuggestEdit || onComment) && (
+					<div className="w-px h-5 bg-border mx-1" />
+				)}
+				{onComment && (
+					<button
+						type="button"
+						className={btn(false)}
+						onMouseDown={(e) => e.preventDefault()}
+						onClick={(e) => {
+							e.preventDefault();
+							onComment();
+						}}
+						aria-label="Comment"
+						title="Comment"
+					>
+						<MessageCircle className="w-3.5 h-3.5" />
+					</button>
+				)}
+				{onSuggestEdit && (
+					<button
+						type="button"
+						className={btn(false)}
+						onMouseDown={(e) => e.preventDefault()}
+						onClick={(e) => {
+							e.preventDefault();
+							onSuggestEdit();
+						}}
+						aria-label="Suggest edit"
+						title="Suggest edit"
+					>
+						<MessageSquarePlus className="w-3.5 h-3.5" />
+					</button>
+				)}
 				<div className="w-px h-5 bg-border mx-1" />
 				<div className="relative">
 					<button

package/.next/standalone/src/components/editor/comment-pip.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { CheckCircle2, MessageCircle } from "lucide-react";
+import type { Comment } from "@/lib/proof/types";
+
+interface Props {
+	blockRef: string;
+	comments: Comment[];
+	top: number;
+	left: number;
+	onClick: () => void;
+}
+
+/**
+ * Gutter pip rendered absolutely inside the editor scroll container.
+ * Positioned via `top`/`left` props (pixels relative to scroll container).
+ */
+export function CommentPip({ blockRef, comments, top, left, onClick }: Props) {
+	if (comments.length === 0) return null;
+
+	const open = comments.filter((c) => !c.resolved);
+	const allResolved = open.length === 0;
+
+	let variant: "dot-ai" | "ring-human" | "check";
+	if (allResolved) {
+		variant = "check";
+	} else {
+		const lastTurn = open[0].turns.at(-1);
+		variant = lastTurn?.by.startsWith("ai:") ? "dot-ai" : "ring-human";
+	}
+
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			style={{
+				position: "absolute",
+				top,
+				left,
+				transform: "translateY(2px)",
+			}}
+			className="z-10 p-2 sm:p-0.5 -m-1.5 sm:m-0 rounded transition-colors hover:bg-accent focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+			aria-label={`Comment thread for block ${blockRef}`}
+		>
+			{variant === "check" && (
+				<CheckCircle2 className="h-3.5 w-3.5 text-muted-foreground/30" />
+			)}
+			{variant === "dot-ai" && (
+				<MessageCircle className="h-3.5 w-3.5 fill-primary text-primary" />
+			)}
+			{variant === "ring-human" && (
+				<MessageCircle className="h-3.5 w-3.5 text-muted-foreground/70" />
+			)}
+		</button>
+	);
+}