wiki-viewer 1.0.0 → 1.1.0

package/.next/standalone/src/app/signin/page.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import { useState, useEffect, type FormEvent } from "react";
+import { authClient } from "@/lib/auth/client";
+
+export default function SignInPage() {
+	const [mode, setMode] = useState<"signin" | "signup">("signin");
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [name, setName] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const [loading, setLoading] = useState(false);
+	const [hasGoogle, setHasGoogle] = useState(false);
+	const [callbackURL, setCallbackURL] = useState("/");
+
+	useEffect(() => {
+		// Detect Google provider availability via the providers endpoint
+		fetch("/api/auth/list-providers", { credentials: "include" })
+			.then((r) => r.json())
+			.then((data: unknown) => {
+				if (
+					data &&
+					typeof data === "object" &&
+					"google" in data
+				) {
+					setHasGoogle(true);
+				}
+			})
+			.catch(() => {});
+
+		// Honour ?next= redirect param
+		const params = new URLSearchParams(window.location.search);
+		const next = params.get("next");
+		if (next && next.startsWith("/")) setCallbackURL(next);
+	}, []);
+
+	async function handleSubmit(e: FormEvent) {
+		e.preventDefault();
+		setError(null);
+		setLoading(true);
+		try {
+			if (mode === "signup") {
+				const res = await authClient.signUp.email({
+					email,
+					password,
+					name,
+					callbackURL,
+				});
+				if (res.error) {
+					setError(res.error.message ?? "Sign-up failed");
+				} else {
+					window.location.href = callbackURL;
+				}
+			} else {
+				const res = await authClient.signIn.email({
+					email,
+					password,
+					callbackURL,
+				});
+				if (res.error) {
+					const status = res.error.status;
+					if (status === 429) {
+						setError("Too many sign-in attempts. Wait a minute and try again.");
+					} else {
+						setError(res.error.message ?? "Sign-in failed");
+					}
+				} else {
+					window.location.href = callbackURL;
+				}
+			}
+		} catch (err: unknown) {
+			setError(err instanceof Error ? err.message : "Unexpected error");
+		} finally {
+			setLoading(false);
+		}
+	}
+
+	async function handleGoogle() {
+		setError(null);
+		setLoading(true);
+		try {
+			await authClient.signIn.social({ provider: "google", callbackURL });
+		} catch (err: unknown) {
+			setError(err instanceof Error ? err.message : "Google sign-in failed");
+			setLoading(false);
+		}
+	}
+
+	return (
+		<div className="min-h-screen flex items-center justify-center bg-background">
+			<div className="w-full max-w-sm rounded-lg border border-border bg-card p-8 shadow-sm">
+				<h1 className="mb-6 text-xl font-semibold text-foreground">Sign in to wiki-viewer</h1>
+
+				{hasGoogle && (
+					<>
+						<button
+							type="button"
+							onClick={handleGoogle}
+							disabled={loading}
+							className="flex w-full items-center justify-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium hover:bg-accent disabled:opacity-50"
+						>
+							<svg viewBox="0 0 24 24" className="h-4 w-4" aria-hidden="true">
+								<path
+									fill="#4285F4"
+									d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+								/>
+								<path
+									fill="#34A853"
+									d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+								/>
+								<path
+									fill="#FBBC05"
+									d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
+								/>
+								<path
+									fill="#EA4335"
+									d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+								/>
+							</svg>
+							Continue with Google
+						</button>
+						<div className="my-4 flex items-center gap-3">
+							<hr className="flex-1 border-border" />
+							<span className="text-xs text-muted-foreground">or</span>
+							<hr className="flex-1 border-border" />
+						</div>
+					</>
+				)}
+
+				<form onSubmit={handleSubmit} className="space-y-4">
+					{mode === "signup" && (
+						<div>
+							<label className="mb-1 block text-sm font-medium text-foreground" htmlFor="name">
+								Name
+							</label>
+							<input
+								id="name"
+								type="text"
+								autoComplete="name"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+								required
+								className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+							/>
+						</div>
+					)}
+					<div>
+						<label className="mb-1 block text-sm font-medium text-foreground" htmlFor="email">
+							Email
+						</label>
+						<input
+							id="email"
+							type="email"
+							autoComplete="email"
+							value={email}
+							onChange={(e) => setEmail(e.target.value)}
+							required
+							className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+						/>
+					</div>
+					<div>
+						<label
+							className="mb-1 block text-sm font-medium text-foreground"
+							htmlFor="password"
+						>
+							Password
+						</label>
+						<input
+							id="password"
+							type="password"
+							autoComplete={mode === "signup" ? "new-password" : "current-password"}
+							value={password}
+							onChange={(e) => setPassword(e.target.value)}
+							required
+							minLength={8}
+							className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+						/>
+					</div>
+
+					{error && (
+						<p className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
+							{error}
+						</p>
+					)}
+
+					<button
+						type="submit"
+						disabled={loading}
+						className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+					>
+						{loading
+							? mode === "signup"
+								? "Creating account..."
+								: "Signing in..."
+							: mode === "signup"
+								? "Create account"
+								: "Sign in"}
+					</button>
+				</form>
+
+				<p className="mt-4 text-center text-sm text-muted-foreground">
+					{mode === "signin" ? "No account?" : "Already have an account?"}{" "}
+					<button
+						type="button"
+						onClick={() => {
+							setMode(mode === "signin" ? "signup" : "signin");
+							setError(null);
+						}}
+						className="font-medium text-foreground underline-offset-4 hover:underline"
+					>
+						{mode === "signin" ? "Sign up" : "Sign in"}
+					</button>
+				</p>
+			</div>
+		</div>
+	);
+}

package/.next/standalone/src/components/ai-panel/activity-row.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import type { ActivityEvent } from "@/lib/proof/activity-shared";
+
+function timeAgo(iso: string): string {
+	const diff = Math.max(0, Date.now() - new Date(iso).getTime());
+	const s = Math.floor(diff / 1000);
+	if (s < 60) return `${s}s ago`;
+	const m = Math.floor(s / 60);
+	if (m < 60) return `${m}m ago`;
+	const h = Math.floor(m / 60);
+	if (h < 24) return `${h}h ago`;
+	return `${Math.floor(h / 24)}d ago`;
+}
+
+function verbFor(type: string): string {
+	const map: Record<string, string> = {
+		"block.replace": "replaced",
+		"block.insertAfter": "inserted after",
+		"block.insertBefore": "inserted before",
+		"block.delete": "deleted",
+		"block.append": "appended",
+		"block.prepend": "prepended",
+		"comment.add": "commented on",
+		"comment.reply": "replied to comment",
+		"comment.resolve": "resolved comment",
+		"comment.reopen": "reopened comment",
+		"suggestion.add": "suggested",
+		"suggestion.accept": "accepted suggestion",
+		"suggestion.reject": "rejected suggestion",
+	};
+	return map[type] ?? type;
+}
+
+export function ActivityRow({ event }: { event: ActivityEvent }) {
+	const filename = event.path.split("/").pop() ?? event.path;
+	const ref = typeof event["ref"] === "string" ? (event["ref"] as string) : "";
+
+	return (
+		<div className="flex flex-col gap-0.5 py-1.5 border-b border-border/50 last:border-0">
+			<div className="flex items-baseline justify-between gap-2">
+				<span
+					className="text-xs font-mono text-foreground/80 truncate"
+					title={event.path}
+				>
+					{filename}
+				</span>
+				<span className="text-[10px] text-muted-foreground shrink-0">
+					{timeAgo(event.at)}
+				</span>
+			</div>
+			<p className="text-[11px] text-muted-foreground truncate">
+				<span className="text-foreground/60">{event.by}</span>{" "}
+				{verbFor(event.type)}
+				{ref && (
+					<>
+						{" "}
+						<span className="font-mono text-[10px] text-muted-foreground/60">{ref}</span>
+					</>
+				)}
+			</p>
+		</div>
+	);
+}

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

@@ -0,0 +1,322 @@
+"use client";
+
+import { useEffect, useCallback, useRef, useState } from "react";
+import { X, Copy, Check, Bot, Wifi, Download, ExternalLink } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useAIPanelStore } from "@/stores/ai-panel-store";
+import { TokenSection } from "./token-section";
+import { ActivityRow } from "./activity-row";
+import { authClient } from "@/lib/auth/client";
+const SKILL_CLI = "npx skills add anh-chu/wiki-viewer/agents/wiki-viewer-skill";
+
+function useCopyCurl(currentPath: string | null) {
+	const [copied, setCopied] = useState(false);
+	const copy = useCallback(async () => {
+		const origin =
+			typeof window !== "undefined" ? window.location.origin : "http://localhost:3000";
+		const filePath = currentPath ?? "<path/to/file.md>";
+		// Registration-flow curl trace
+		const curl = [
+			`# 1. Register`,
+			`REG=$(curl -s -X POST -H 'Content-Type: application/json' \\`,
+			`  -d '{"id":"ai:claude","displayName":"Claude"}' \\`,
+			`  ${origin}/api/agent/register)`,
+			`REG_ID=$(echo $REG | jq -r .registrationId)`,
+			``,
+			`# 2. Approve in AI Panel, then poll:`,
+			`curl -s ${origin}/api/agent/register/$REG_ID`,
+			`# → {"status":"approved","token":"..."}`,
+			`TOKEN=<paste token here>`,
+			``,
+			`# 3. Read snapshot`,
+			`curl -s -H "Authorization: Bearer $TOKEN" \\`,
+			`  -H "X-Agent-Id: ai:claude" \\`,
+			`  ${origin}/api/agent/files/${filePath}`,
+		].join("\n");
+		await navigator.clipboard.writeText(curl);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 1500);
+	}, [currentPath]);
+	return { copied, copy };
+}
+
+function useCopyButton(getText: () => string): { copied: boolean; copy: () => Promise<void> } {
+	const [copied, setCopied] = useState(false);
+	const copy = useCallback(async () => {
+		await navigator.clipboard.writeText(getText());
+		setCopied(true);
+		setTimeout(() => setCopied(false), 1500);
+	}, [getText]);
+	return { copied, copy };
+}
+
+export function AIPanel({ currentPath }: { currentPath?: string | null }) {
+	const isOpen = useAIPanelStore((s) => s.isOpen);
+	const close = useAIPanelStore((s) => s.close);
+	const activity = useAIPanelStore((s) => s.activity);
+	const connections = useAIPanelStore((s) => s.connections);
+	const rateLimit = useAIPanelStore((s) => s.rateLimit);
+	const loadActivity = useAIPanelStore((s) => s.loadActivity);
+	const { copied, copy } = useCopyCurl(currentPath ?? null);
+	const [bootstrapPrompt, setBootstrapPrompt] = useState<string>("");
+	const panelRef = useRef<HTMLElement>(null);
+
+	const origin =
+		typeof window !== "undefined" ? window.location.origin : "http://localhost:3000";
+	const getSkillCli = useCallback(() => SKILL_CLI, []);
+	const getBootstrapPrompt = useCallback(
+		() => bootstrapPrompt.replace(/\$WIKI_URL/g, origin),
+		[bootstrapPrompt, origin]
+	);
+	const skillCli = useCopyButton(getSkillCli);
+	const bootstrapCopy = useCopyButton(getBootstrapPrompt);
+
+	// Keyboard: Esc closes
+	useEffect(() => {
+		if (!isOpen) return;
+		function onKey(e: KeyboardEvent) {
+			if (e.key === "Escape") close();
+		}
+		document.addEventListener("keydown", onKey);
+		return () => document.removeEventListener("keydown", onKey);
+	}, [isOpen, close]);
+
+	// Focus trap: focus panel when open
+	useEffect(() => {
+		if (isOpen) panelRef.current?.focus();
+	}, [isOpen]);
+
+	// Poll while open
+	useEffect(() => {
+		if (!isOpen) return;
+		void loadActivity();
+		const id = setInterval(() => void loadActivity(), 10_000);
+		return () => clearInterval(id);
+	}, [isOpen, loadActivity]);
+
+	// Fetch install JSON once on open for live bootstrap prompt
+	useEffect(() => {
+		if (!isOpen) return;
+		void fetch("/api/agents/install")
+			.then((r) => r.json())
+			.then((d: { bootstrapPrompt?: string }) => {
+				if (d.bootstrapPrompt) setBootstrapPrompt(d.bootstrapPrompt);
+			})
+			.catch(() => undefined);
+	}, [isOpen]);
+
+	if (!isOpen) return null;
+
+	return (
+		<>
+			{/* Backdrop */}
+			<div
+				className="fixed inset-0 z-40 bg-black/20 backdrop-blur-[1px]"
+				onClick={close}
+				aria-hidden
+			/>
+
+			{/* Panel */}
+			<aside
+				ref={panelRef}
+				tabIndex={-1}
+				role="dialog"
+				aria-modal="true"
+				aria-label="AI Agent Panel"
+				className="fixed right-0 top-0 bottom-0 z-50 flex w-80 flex-col border-l border-border bg-background shadow-xl outline-none"
+			>
+				{/* Header */}
+				<div className="flex items-center justify-between border-b border-border px-4 py-3 shrink-0">
+					<div className="flex items-center gap-2">
+						<Bot className="h-4 w-4 text-muted-foreground" />
+						<span className="text-sm font-semibold">AI Agent</span>
+					</div>
+					<Button
+						size="sm"
+						variant="ghost"
+						className="h-7 w-7 p-0"
+						onClick={close}
+						title="Close panel (Esc)"
+					>
+						<X className="h-3.5 w-3.5" />
+					</Button>
+				</div>
+
+				{/* Scrollable body */}
+				<div className="flex-1 overflow-y-auto space-y-5 px-4 py-4">
+					<SignedInUser />
+
+					{/* Bridge endpoint */}
+					<section className="space-y-2">
+						<h3 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+							Bridge Endpoint
+						</h3>
+						<div className="rounded-md border border-border bg-muted/40 p-3 space-y-2">
+							<div className="flex items-center gap-2">
+								<code className="flex-1 text-xs font-mono text-foreground/80 truncate">
+									{origin}
+								</code>
+								<Button
+									size="sm"
+									variant="ghost"
+									className="h-6 w-6 p-0 shrink-0"
+									title="Copy curl example"
+									onClick={() => void copy()}
+								>
+									{copied ? (
+										<Check className="h-3.5 w-3.5 text-green-500" />
+									) : (
+										<Copy className="h-3.5 w-3.5" />
+									)}
+								</Button>
+							</div>
+							<p className="text-[10px] text-muted-foreground/70">
+								Copy icon copies a registration-flow <code className="bg-muted px-0.5 rounded">curl</code> trace for the current file.
+							</p>
+						</div>
+					</section>
+
+					{/* Install for AI agents */}
+					<section className="space-y-2">
+						<h3 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+							Install for AI Agents
+						</h3>
+						<div className="rounded-md border border-border bg-muted/40 p-3 space-y-3">
+							<div className="space-y-1">
+								<p className="text-[10px] text-muted-foreground/70">Agent Skills standard:</p>
+								<div className="flex items-center gap-2">
+									<code className="flex-1 text-[10px] font-mono text-foreground/80 truncate bg-muted rounded px-1 py-0.5">
+										{SKILL_CLI}
+									</code>
+									<Button size="sm" variant="ghost" className="h-6 w-6 p-0 shrink-0" title="Copy CLI command" onClick={() => void skillCli.copy()}>
+										{skillCli.copied ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
+									</Button>
+								</div>
+							</div>
+							<div className="space-y-1">
+								<p className="text-[10px] text-muted-foreground/70">Any agent (paste into chat):</p>
+								<Button size="sm" variant="outline" className="h-7 w-full text-xs gap-1.5" onClick={() => void bootstrapCopy.copy()} disabled={!bootstrapPrompt}>
+									{bootstrapCopy.copied
+										? <><Check className="h-3.5 w-3.5 text-green-500" /> Copied!</>
+										: <><Copy className="h-3.5 w-3.5" /> Copy bootstrap prompt</>}
+								</Button>
+							</div>
+							<div className="flex flex-wrap gap-x-3 gap-y-1 pt-1">
+								<a href="/api/agents/skill.tar.gz" download className="inline-flex items-center gap-1 text-[10px] text-primary hover:underline">
+									<Download className="h-3 w-3" /> skill (.tar.gz)
+								</a>
+								<a href="/api/agents/skill" target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 text-[10px] text-primary hover:underline">
+									<ExternalLink className="h-3 w-3" /> skill markdown
+								</a>
+								<a href="/api/agents/install" target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 text-[10px] text-primary hover:underline">
+									<ExternalLink className="h-3 w-3" /> install JSON
+								</a>
+							</div>
+						</div>
+					</section>
+
+					{/* Token / Agents */}
+					<TokenSection />
+
+					{/* Active connections */}
+					<section className="space-y-2">
+						<h3 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+							Active Connections{" "}
+							<span className="normal-case font-normal text-muted-foreground/50">
+								(last 5 min)
+							</span>
+						</h3>
+						<div className="rounded-md border border-border bg-muted/40 p-3">
+							{connections.length === 0 ? (
+								<p className="text-xs text-muted-foreground/60 flex items-center gap-1.5">
+									<Wifi className="h-3.5 w-3.5" />
+									No recent activity
+								</p>
+							) : (
+								<ul className="space-y-1.5">
+									{connections.map((c) => (
+										<li key={c.by} className="flex items-center justify-between text-xs">
+											<span className="font-mono text-foreground/80 truncate">{c.by}</span>
+											<span className="text-muted-foreground shrink-0">
+												{c.opCount} op{c.opCount !== 1 ? "s" : ""}
+											</span>
+										</li>
+									))}
+								</ul>
+							)}
+						</div>
+					</section>
+
+					{/* Recent activity */}
+					<section className="space-y-2">
+						<h3 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+							Recent Activity
+						</h3>
+						<div className="rounded-md border border-border bg-muted/40 px-3 py-1 max-h-72 overflow-y-auto">
+							{activity.length === 0 ? (
+								<p className="text-xs text-muted-foreground/60 py-2">No events recorded</p>
+							) : (
+								activity.map((ev) => (
+									<ActivityRow key={`${ev.path}-${ev.id}`} event={ev} />
+								))
+							)}
+						</div>
+					</section>
+
+					{/* Settings */}
+					<section className="space-y-2">
+						<h3 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+							Settings
+						</h3>
+						<div className="rounded-md border border-border bg-muted/40 p-3 space-y-1.5">
+							<div className="flex items-center justify-between text-xs">
+								<span className="text-muted-foreground">Rate limit</span>
+								<span className="font-mono">
+									{rateLimit !== null ? `${rateLimit} ops/min` : "--"}
+								</span>
+							</div>
+							<p className="text-[10px] text-muted-foreground/60">
+								Override with <code className="bg-muted px-0.5 rounded">AGENT_RATE_LIMIT</code> env var.
+							</p>
+						</div>
+					</section>
+
+					{/* Docs link */}
+					<section>
+						<a
+							href="/docs/agent-collab-plan.md"
+							target="_blank"
+							rel="noreferrer"
+							className="text-xs text-primary underline hover:no-underline"
+						>
+							Agent collaboration docs →
+						</a>
+					</section>
+				</div>
+			</aside>
+		</>
+	);
+}
+
+function SignedInUser() {
+	const { data: session } = authClient.useSession();
+	if (!session?.user) return null;
+	return (
+		<div className="flex items-center justify-between rounded-md border border-border bg-muted/40 p-3">
+			<div className="text-sm min-w-0">
+				<div className="font-medium truncate">{session.user.name}</div>
+				<div className="text-xs text-muted-foreground truncate">{session.user.email}</div>
+			</div>
+			<button
+				type="button"
+				onClick={async () => {
+					await authClient.signOut();
+					window.location.href = "/signin";
+				}}
+				className="ml-2 shrink-0 text-xs px-2 py-1 rounded border border-border hover:bg-accent"
+			>
+				Sign out
+			</button>
+		</div>
+	);
+}