wiki-viewer 1.14.1 → 2.0.0

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

@@ -1,284 +0,0 @@
-"use client";
-
-import { memo, useEffect, useMemo, useState, type CSSProperties } from "react";
-import { useEditorStore } from "@/stores/editor-store";
-import { wsFetch } from "@/lib/workspace-client";
-import type { ActivityEvent } from "@/lib/proof/activity-shared";
-
-type ReviewCounts = Record<string, number>;
-
-type ActivityGroup = {
-	path: string;
-	filename: string;
-	latestAt: string;
-	events: ActivityEvent[];
-};
-
-function hashString(input: string): number {
-	let hash = 0;
-	for (let i = 0; i < input.length; i += 1) {
-		hash = (hash * 31 + input.charCodeAt(i)) | 0;
-	}
-	return Math.abs(hash);
-}
-
-function agentLabel(agentId: string): string {
-	const raw = agentId.split(/[:/]/).pop() ?? agentId;
-	const compact = raw.replace(/[^a-z0-9]/gi, "");
-	return (compact.slice(0, 2) || raw.slice(0, 2) || "??").toUpperCase();
-}
-
-function agentName(agentId: string): string {
-	const raw = agentId.split(/[:/]/).pop() ?? agentId;
-	return raw.replace(/[-_]+/g, " ").replace(/^./, (c) => c.toUpperCase());
-}
-
-function agentChipStyle(agentId: string): CSSProperties {
-	const hue = hashString(agentId) % 360;
-	return {
-		backgroundColor: `hsl(${hue} 72% 42%)`,
-		color: "white",
-	};
-}
-
-function timeAgo(iso: string): string {
-	const diffSeconds = Math.max(0, Math.round((Date.now() - new Date(iso).getTime()) / 1000));
-	if (diffSeconds < 45) return "just now";
-
-	const steps: Array<[number, Intl.RelativeTimeFormatUnit]> = [
-		[60, "second"],
-		[60, "minute"],
-		[24, "hour"],
-		[7, "day"],
-	];
-	let value = diffSeconds;
-	let unit: Intl.RelativeTimeFormatUnit = "second";
-	for (const [step, nextUnit] of steps) {
-		if (value < step) break;
-		value = Math.floor(value / step);
-		unit = nextUnit;
-	}
-
-	const rtf = new Intl.RelativeTimeFormat("en", { numeric: "always", style: "short" });
-	return rtf.format(-value, unit).replace(/\s+/g, " ").replace(/\./g, "");
-}
-
-function blockCount(event: ActivityEvent): number {
-	if (Array.isArray((event as { refs?: unknown }).refs)) {
-		return ((event as { refs?: unknown[] }).refs ?? []).length;
-	}
-	return typeof (event as { ref?: unknown }).ref === "string" ? 1 : 0;
-}
-
-function summaryFor(event: ActivityEvent): string {
-	const actor = agentName(event.by);
-	const kind = event.type;
-	const count = blockCount(event);
-
-	if (kind === "block.append" || (kind === "block.inserted" && (event as { position?: string }).position === "end")) {
-		return `${actor} appended ${count || 1} block${(count || 1) === 1 ? "" : "s"}`;
-	}
-	if (kind === "block.prepend" || (kind === "block.inserted" && (event as { position?: string }).position === "start")) {
-		return `${actor} prepended ${count || 1} block${(count || 1) === 1 ? "" : "s"}`;
-	}
-	if (kind === "block.inserted") {
-		return `${actor} inserted ${count || 1} block${(count || 1) === 1 ? "" : "s"}`;
-	}
-	if (kind === "block.replaced" || kind === "file.rawWritten") {
-		return `${actor} edited`;
-	}
-	if (kind === "block.deleted") {
-		return `${actor} deleted ${count || 1} block${(count || 1) === 1 ? "" : "s"}`;
-	}
-	if (kind === "suggestion.added") {
-		return `${actor} suggested a change`;
-	}
-	if (kind === "suggestion.accepted") {
-		return `${actor} accepted a suggestion`;
-	}
-	if (kind === "suggestion.rejected") {
-		return `${actor} rejected a suggestion`;
-	}
-	if (kind === "comment.added") {
-		return `${actor} commented`;
-	}
-	if (kind === "comment.replied") {
-		return `${actor} replied`;
-	}
-	if (kind === "comment.resolved") {
-		return `${actor} resolved a comment`;
-	}
-	if (kind === "comment.reopened") {
-		return `${actor} reopened a comment`;
-	}
-	if (kind === "file.externallyEdited") {
-		return `${actor} changed file externally`;
-	}
-	return `${actor} ${kind.replace(/^\w+\./, "").replace(/([a-z])([A-Z])/g, "$1 $2")}`;
-}
-
-function groupActivity(activity: ActivityEvent[]): ActivityGroup[] {
-	const groups = new Map<string, ActivityEvent[]>();
-	for (const event of activity) {
-		const list = groups.get(event.path) ?? [];
-		list.push(event);
-		groups.set(event.path, list);
-	}
-
-	return Array.from(groups.entries())
-		.map(([path, events]) => ({
-			path,
-			filename: path.split("/").pop() ?? path,
-			latestAt: events[0]?.at ?? "",
-			events,
-		}))
-		.sort((a, b) => (a.latestAt < b.latestAt ? 1 : -1));
-}
-
-function isMarkdownPath(path: string): boolean {
-	return /\.(md|markdown)$/i.test(path);
-}
-
-async function fetchReviewCount(path: string): Promise<number> {
-	if (!isMarkdownPath(path)) return 0;
-
-	const endpoints = [`/api/agent/sidecar/${path}`, `/api/agent/files/${path}/pending`, `/api/agent/files/${path}`];
-	for (const endpoint of endpoints) {
-		try {
-			const res = await wsFetch(endpoint);
-			if (!res.ok) continue;
-			const data = (await res.json()) as Record<string, unknown>;
-
-			if (Array.isArray(data.pending)) return data.pending.length;
-			if (Array.isArray(data.events) && endpoint.includes("/pending")) return data.events.length;
-			if (typeof data.pendingCount === "number") return data.pendingCount;
-			if (typeof data.count === "number") return data.count;
-			if (typeof data.total === "number") return data.total;
-			if (Array.isArray(data.suggestions) || Array.isArray(data.comments) || data.blockProvenance) {
-				const suggestions = Array.isArray(data.suggestions)
-					? data.suggestions.filter(
-						(item) => item && typeof item === "object" && (item as { status?: string }).status === "pending",
-					).length
-					: 0;
-				const comments = Array.isArray(data.comments)
-					? data.comments.filter(
-						(item) => item && typeof item === "object" && !(item as { resolved?: boolean }).resolved,
-					).length
-					: 0;
-				const proofSpans = data.blockProvenance && typeof data.blockProvenance === "object"
-					? Object.keys(data.blockProvenance as Record<string, unknown>).length
-					: 0;
-				return suggestions + comments + proofSpans;
-			}
-		} catch {
-			// Ignore fetch errors; review badge stays hidden.
-		}
-	}
-	return 0;
-}
-
-function ActivityItemImpl({ event }: { event: ActivityEvent }) {
-	return (
-		<div className="flex items-start gap-2.5 rounded-md px-2 py-2 hover:bg-background/50">
-			<div
-				className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold shadow-sm ring-1 ring-black/5"
-				style={agentChipStyle(event.by)}
-				title={event.by}
-				aria-hidden
-			>
-				{agentLabel(event.by)}
-			</div>
-			<div className="min-w-0 flex-1">
-				<p className="truncate text-xs text-foreground/85">
-					{summaryFor(event)}
-				</p>
-				<p className="truncate text-[10px] text-muted-foreground">{timeAgo(event.at)}</p>
-			</div>
-		</div>
-	);
-}
-
-const ActivityItem = memo(ActivityItemImpl);
-
-function ActivityGroupView({ group, reviewCount }: { group: ActivityGroup; reviewCount: number }) {
-	const loadPage = useEditorStore((s) => s.loadPage);
-	const latest = group.events[0];
-
-	return (
-		<section className="space-y-1.5 rounded-md border border-border/70 bg-background/50 p-2">
-			<div className="flex items-start justify-between gap-2">
-				<button
-					type="button"
-					onClick={() => void loadPage(group.path)}
-					className="min-w-0 text-left"
-					title={group.path}
-				>
-					<p className="truncate text-xs font-medium text-foreground/90">{group.filename}</p>
-					<p className="truncate text-[10px] text-muted-foreground">{group.path}</p>
-				</button>
-				<div className="flex shrink-0 items-center gap-1.5">
-					{reviewCount > 0 && (
-						<button
-							type="button"
-							onClick={() => void loadPage(group.path)}
-							className="inline-flex items-center rounded-full border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-[10px] font-medium text-amber-700 hover:bg-amber-500/15"
-							title="Open file for review"
-						>
-							review {reviewCount}
-						</button>
-					)}
-					<span className="text-[10px] text-muted-foreground">{timeAgo(latest.at)}</span>
-				</div>
-			</div>
-			<div className="space-y-0.5">
-				{group.events.map((event) => (
-					<ActivityItem key={`${event.path}-${event.id}`} event={event} />
-				))}
-			</div>
-		</section>
-	);
-}
-
-export function ActivityFeed({ activity }: { activity: ActivityEvent[] }) {
-	const groups = useMemo(() => groupActivity(activity), [activity]);
-	const [reviewCounts, setReviewCounts] = useState<ReviewCounts>({});
-
-	useEffect(() => {
-		let cancelled = false;
-		const paths = Array.from(new Set(groups.map((group) => group.path)));
-		if (paths.length === 0) {
-			setReviewCounts({});
-			return () => {
-				cancelled = true;
-			};
-		}
-
-		void (async () => {
-			const pairs = await Promise.all(
-				paths.map(async (path) => [path, await fetchReviewCount(path)] as const),
-			);
-			if (cancelled) return;
-			setReviewCounts(Object.fromEntries(pairs.filter(([, count]) => count > 0)));
-		})();
-
-		return () => {
-			cancelled = true;
-		};
-	}, [groups]);
-
-	if (groups.length === 0) {
-		return <p className="py-2 text-xs text-muted-foreground/60">No events recorded</p>;
-	}
-
-	return (
-		<div className="space-y-2">
-			{groups.map((group) => (
-				<ActivityGroupView
-					key={group.path}
-					group={group}
-					reviewCount={reviewCounts[group.path] ?? 0}
-				/>
-			))}
-		</div>
-	);
-}

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

@@ -1,311 +0,0 @@
-"use client";
-
-import { useEffect, useCallback, useRef, useState } from "react";
-import { X, Copy, Check, Bot, Wifi, ExternalLink } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { useAIPanelStore } from "@/stores/ai-panel-store";
-import { TokenSection } from "./token-section";
-import { ActivityFeed } from "./activity-row";
-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 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 getMcpRegister = useCallback(
-		() =>
-			`npx wiki-viewer-mcp register --url ${origin} --id ai:myagent --name "My Agent"`,
-		[origin]
-	);
-	const getMcpJson = useCallback(
-		() =>
-			JSON.stringify(
-				{
-					servers: {
-						"wiki-viewer": {
-							command: "npx",
-							args: ["wiki-viewer-mcp"],
-							env: {
-								WIKI_VIEWER_URL: origin,
-								WIKI_VIEWER_TOKEN: "<token from register>",
-								WIKI_VIEWER_AGENT_ID: "ai:myagent",
-							},
-						},
-					},
-				},
-				null,
-				2
-			),
-		[origin]
-	);
-	const skillCli = useCopyButton(getSkillCli);
-	const bootstrapCopy = useCopyButton(getBootstrapPrompt);
-	const mcpRegister = useCopyButton(getMcpRegister);
-	const mcpJson = useCopyButton(getMcpJson);
-
-	// 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-overlay 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-[90vw] max-w-sm md: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">
-					{/* What this does — one line */}
-					<section className="rounded-md border border-border bg-muted/30 p-3">
-						<p className="text-sm font-medium text-foreground">
-							Work with this wiki using AI
-						</p>
-						<p className="mt-1 text-xs leading-relaxed text-muted-foreground">
-							Connect Claude, Cursor, ChatGPT, and more. Pick by what you want —
-							each option gives a copy-paste setup. You approve every assistant
-							in <span className="font-medium text-foreground/80">Agents</span> below before it gets access.
-						</p>
-					</section>
-
-					{/* Choose by goal */}
-					<section className="space-y-3">
-						{/* Goal 1: collaborate (one-off instructions + permanent skill) */}
-						<div className="rounded-md border border-border bg-muted/40 p-3 space-y-1.5">
-							<p className="text-xs font-semibold text-foreground">
-								Co-write docs with you
-							</p>
-							<p className="text-[10px] text-muted-foreground/70">
-								Edits arrive as suggestions with comments you accept or revert.
-								No MCP needed.
-							</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" /> Paste into any chatbot</>}
-							</Button>
-							<p className="text-[10px] text-muted-foreground/50 pt-1">
-								Or install once so it sticks{" "}
-								<span className="text-muted-foreground/40">· Claude, OpenCode</span>:
-							</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 this 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>
-
-						{/* Goal 2: raw filework */}
-						<div className="rounded-md border border-border bg-muted/40 p-3 space-y-1.5">
-							<p className="text-xs font-semibold text-foreground">
-								Edit files directly{" "}
-								<span className="font-normal text-muted-foreground/60">· Claude Code, Cursor, Codex</span>
-							</p>
-							<p className="text-[10px] text-muted-foreground/70">
-								Native read / search / edit tools over MCP. Run to request access:
-							</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">
-									{getMcpRegister()}
-								</code>
-								<Button size="sm" variant="ghost" className="h-6 w-6 p-0 shrink-0" title="Copy this command" onClick={() => void mcpRegister.copy()}>
-									{mcpRegister.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/50">Approve in <span className="font-medium text-foreground/70">Agents</span>, then add to your tool:</p>
-							<Button size="sm" variant="outline" className="h-7 w-full text-xs gap-1.5" onClick={() => void mcpJson.copy()}>
-								{mcpJson.copied
-									? <><Check className="h-3.5 w-3.5 text-green-500" /> Copied!</>
-									: <><Copy className="h-3.5 w-3.5" /> Copy config (mcp.json)</>}
-							</Button>
-						</div>
-
-						<div className="flex flex-wrap items-center gap-x-3 gap-y-1">
-							<span className="text-[10px] text-muted-foreground/50">For developers:</span>
-							<button type="button" onClick={() => void copy()} className="inline-flex items-center gap-1 text-[10px] text-primary hover:underline">
-								{copied ? <Check className="h-3 w-3 text-green-500" /> : <Copy className="h-3 w-3" />} curl example
-							</button>
-							<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
-							</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>
-					</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-2 max-h-72 overflow-y-auto">
-							<ActivityFeed activity={activity} />
-						</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>
-		</>
-	);
-}