wiki-viewer 1.0.0 → 1.1.0

package/.next/standalone/src/components/editor/proof-span-popover.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import * as Popover from "@radix-ui/react-popover";
+import { useEffect, useState } from "react";
+import { authHeaders } from "@/lib/proof/client-auth";
+
+interface SpanMeta {
+	spanId: string;
+	origin: string | null;
+	basis: string | null;
+	basisDetail: string | null;
+	by: string | null;
+	at: string | null;
+}
+
+function readMeta(el: HTMLElement): SpanMeta {
+	return {
+		spanId: el.getAttribute("id") ?? "",
+		origin: el.getAttribute("origin"),
+		basis: el.getAttribute("basis"),
+		basisDetail: el.getAttribute("basis-detail"),
+		by: el.getAttribute("by"),
+		at: el.getAttribute("at"),
+	};
+}
+
+function timeAgo(iso: string | null): string {
+	if (!iso) return "";
+	const diff = Date.now() - new Date(iso).getTime();
+	const secs = Math.floor(diff / 1000);
+	if (secs < 60) return `${secs}s ago`;
+	const mins = Math.floor(secs / 60);
+	if (mins < 60) return `${mins}m ago`;
+	const hrs = Math.floor(mins / 60);
+	if (hrs < 24) return `${hrs}h ago`;
+	return `${Math.floor(hrs / 24)}d ago`;
+}
+
+interface Props {
+	targetEl: HTMLElement | null;
+	path: string;
+	onClose: () => void;
+	onComment?: () => void;
+}
+
+export function ProofSpanPopover({ targetEl, path, onClose, onComment }: Props) {
+	const [anchor, setAnchor] = useState<{ top: number; left: number } | null>(null);
+	const [meta, setMeta] = useState<SpanMeta | null>(null);
+	const [busy, setBusy] = useState(false);
+
+	useEffect(() => {
+		if (!targetEl) {
+			setAnchor(null);
+			setMeta(null);
+			return;
+		}
+		const rect = targetEl.getBoundingClientRect();
+		setAnchor({ top: rect.bottom + window.scrollY + 4, left: rect.left + window.scrollX });
+		setMeta(readMeta(targetEl));
+	}, [targetEl]);
+
+	useEffect(() => {
+		if (!targetEl) return;
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === "Escape") onClose();
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [targetEl, onClose]);
+
+	if (!targetEl || !anchor || !meta) return null;
+
+	async function sendAction(action: "accept" | "revert") {
+		if (busy || !meta) return;
+		setBusy(true);
+		try {
+			await fetch("/api/agent/internal/span", {
+				method: "POST",
+				headers: { "Content-Type": "application/json", ...authHeaders() },
+				body: JSON.stringify({
+					path,
+					spanId: meta.spanId,
+					action,
+					idempotencyKey: crypto.randomUUID(),
+				}),
+			});
+		} finally {
+			setBusy(false);
+			onClose();
+		}
+	}
+
+	return (
+		<Popover.Root open>
+			<Popover.Anchor asChild>
+				<span
+					aria-hidden="true"
+					style={{
+						position: "fixed",
+						top: anchor.top,
+						left: anchor.left,
+						width: 0,
+						height: 0,
+						pointerEvents: "none",
+					}}
+				/>
+			</Popover.Anchor>
+			<Popover.Portal>
+				<Popover.Content
+					side="bottom"
+					align="start"
+					sideOffset={4}
+					collisionPadding={8}
+					onInteractOutside={onClose}
+					className="z-50 w-[min(16rem,calc(100vw-1rem))] bg-popover border border-border rounded-lg shadow-xl p-3 space-y-2 text-[12px] focus:outline-none"
+				>
+					<div className="space-y-0.5">
+						<p className="font-medium text-foreground truncate">
+							{meta.by ?? "unknown"} · {meta.basis ?? "—"} · {timeAgo(meta.at)}
+						</p>
+						{meta.basisDetail && (
+							<p className="text-muted-foreground italic truncate">
+								&ldquo;{meta.basisDetail}&rdquo;
+							</p>
+						)}
+						{meta.origin && (
+							<p className="text-muted-foreground/60">origin: {meta.origin}</p>
+						)}
+					</div>
+					<div className="flex items-center gap-1.5 pt-1">
+						<button
+							type="button"
+							disabled={busy}
+							onClick={() => void sendAction("accept")}
+							className="flex-1 py-1 rounded-md bg-primary text-primary-foreground text-[11px] font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
+						>
+							Accept
+						</button>
+						<button
+							type="button"
+							disabled={busy}
+							onClick={() => void sendAction("revert")}
+							className="flex-1 py-1 rounded-md border border-border text-[11px] font-medium hover:bg-accent disabled:opacity-50 transition-colors"
+						>
+							Revert
+						</button>
+						<button
+							type="button"
+							disabled={busy}
+							onClick={() => { onComment?.(); onClose(); }}
+							className="flex-1 py-1 rounded-md border border-border text-[11px] font-medium hover:bg-accent disabled:opacity-50 transition-colors"
+						>
+							Comment
+						</button>
+					</div>
+					<Popover.Arrow className="fill-border" />
+				</Popover.Content>
+			</Popover.Portal>
+		</Popover.Root>
+	);
+}

package/.next/standalone/src/components/editor/suggest-edit-popover.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import * as Popover from "@radix-ui/react-popover";
+import { useEffect, useRef, useState } from "react";
+import { authHeaders } from "@/lib/proof/client-auth";
+import { useProofStore } from "@/stores/proof-store";
+import type { SuggestionKind } from "@/lib/proof/types";
+
+async function postOp(
+	path: string,
+	baseRevision: number,
+	ops: object[],
+): Promise<{ ok: boolean; stale: boolean; newRevision?: number }> {
+	const encoded = encodeURIComponent(path).replace(/%2F/g, "/");
+	const res = await fetch(`/api/agent/files/${encoded}`, {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			"Idempotency-Key": crypto.randomUUID(),
+			...authHeaders(),
+		},
+		body: JSON.stringify({ baseRevision, by: "human", ops }),
+	});
+	if (res.status === 409) {
+		const data = (await res.json()) as { code?: string; snapshot?: { revision?: number } };
+		if (data.code === "STALE_REVISION" && data.snapshot?.revision !== undefined) {
+			return { ok: false, stale: true, newRevision: data.snapshot.revision };
+		}
+		return { ok: false, stale: false };
+	}
+	if (!res.ok) return { ok: false, stale: false };
+	return { ok: true, stale: false };
+}
+
+interface Props {
+	path: string;
+	blockRef: string;
+	/** Current markdown of the block being suggested against. */
+	currentMarkdown: string;
+	anchor: { top: number; left: number };
+	onClose: () => void;
+}
+
+const KIND_LABELS: Record<SuggestionKind, string> = {
+	replace: "Replace block",
+	insertAfter: "Insert after",
+	insertBefore: "Insert before",
+	delete: "Delete block",
+};
+
+export function SuggestEditPopover({ path, blockRef, currentMarkdown, anchor, onClose }: Props) {
+	const [kind, setKind] = useState<SuggestionKind>("replace");
+	const [markdown, setMarkdown] = useState(currentMarkdown);
+	const [reason, setReason] = useState("");
+	const [busy, setBusy] = useState(false);
+	const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+	// Prefill markdown with current block on replace; clear it for inserts.
+	useEffect(() => {
+		if (kind === "replace") setMarkdown(currentMarkdown);
+		else if (kind === "delete") setMarkdown("");
+		else setMarkdown("");
+	}, [kind, currentMarkdown]);
+
+	useEffect(() => {
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === "Escape") onClose();
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [onClose]);
+
+	useEffect(() => {
+		setTimeout(() => textareaRef.current?.focus(), 50);
+	}, []);
+
+	function getRevision(): number {
+		return useProofStore.getState().byPath[path]?.snapshotRevision ?? 0;
+	}
+
+	const needsMarkdown = kind !== "delete";
+	const canSubmit = !busy && (!needsMarkdown || markdown.trim().length > 0);
+
+	async function handleSubmit() {
+		if (!canSubmit) return;
+		setBusy(true);
+		try {
+			const op: Record<string, unknown> = {
+				type: "suggestion.add",
+				ref: blockRef,
+				kind,
+				basis: "suggested",
+			};
+			if (needsMarkdown) op.markdown = markdown;
+			if (reason.trim()) op.basisDetail = reason.trim();
+
+			let rev = getRevision();
+			let result = await postOp(path, rev, [op]);
+			if (!result.ok && result.stale && result.newRevision !== undefined) {
+				await useProofStore.getState().loadSidecar(path);
+				rev = result.newRevision;
+				result = await postOp(path, rev, [op]);
+			}
+			if (result.ok) {
+				await useProofStore.getState().loadSidecar(path);
+				await useProofStore.getState().loadSnapshot(path);
+				onClose();
+			}
+		} finally {
+			setBusy(false);
+		}
+	}
+
+	return (
+		<Popover.Root open>
+			<Popover.Anchor asChild>
+				<span
+					aria-hidden="true"
+					style={{
+						position: "fixed",
+						top: anchor.top,
+						left: anchor.left,
+						width: 0,
+						height: 0,
+						pointerEvents: "none",
+					}}
+				/>
+			</Popover.Anchor>
+			<Popover.Portal>
+				<Popover.Content
+					side="bottom"
+					align="start"
+					sideOffset={4}
+					collisionPadding={8}
+					onInteractOutside={onClose}
+					className="z-50 w-[min(20rem,calc(100vw-1rem))] bg-popover border border-border rounded-lg shadow-xl p-3 space-y-2.5 text-[12px] focus:outline-none"
+				>
+					{/* Header */}
+					<div className="flex items-center justify-between">
+						<span className="font-medium text-foreground">Suggest an edit</span>
+						<span className="text-[11px] font-mono text-muted-foreground/60 truncate ml-2">
+							{blockRef}
+						</span>
+					</div>
+
+					{/* Kind selector */}
+					<div className="flex flex-wrap gap-1">
+						{(Object.keys(KIND_LABELS) as SuggestionKind[]).map((k) => (
+							<button
+								key={k}
+								type="button"
+								onClick={() => setKind(k)}
+								className={`px-2 py-0.5 rounded-md text-[10.5px] border transition-colors ${
+									kind === k
+										? "bg-primary text-primary-foreground border-primary"
+										: "border-border text-muted-foreground hover:bg-accent"
+								}`}
+							>
+								{KIND_LABELS[k]}
+							</button>
+						))}
+					</div>
+
+					{/* Delete preview */}
+					{kind === "delete" && (
+						<pre className="whitespace-pre-wrap font-mono text-[11px] text-muted-foreground line-through bg-destructive/5 rounded px-2 py-1 max-h-32 overflow-y-auto">
+							{currentMarkdown || "(empty)"}
+						</pre>
+					)}
+
+					{/* Markdown editor */}
+					{needsMarkdown && (
+						<div className="space-y-1">
+							<p className="text-[10px] uppercase tracking-wider text-muted-foreground/60">
+								{kind === "replace" ? "proposed content" : "content to insert"}
+							</p>
+							<textarea
+								ref={textareaRef}
+								value={markdown}
+								onChange={(e) => setMarkdown(e.target.value)}
+								rows={4}
+								placeholder="Markdown…"
+								className="w-full resize-y rounded-md border border-border bg-background px-2 py-1.5 font-mono text-[11px] focus:outline-none focus-visible:ring-1 focus-visible:ring-ring placeholder:text-muted-foreground/40"
+							/>
+						</div>
+					)}
+
+					{/* Reason */}
+					<input
+						type="text"
+						value={reason}
+						onChange={(e) => setReason(e.target.value)}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void handleSubmit();
+						}}
+						placeholder="Reason (optional)"
+						className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-[12px] focus:outline-none focus-visible:ring-1 focus-visible:ring-ring placeholder:text-muted-foreground/40"
+					/>
+
+					{/* Actions */}
+					<div className="flex items-center justify-between pt-0.5">
+						<span className="text-[10px] text-muted-foreground/40">⌘↵ submit</span>
+						<div className="flex items-center gap-2">
+							<button
+								type="button"
+								disabled={busy}
+								onClick={onClose}
+								className="px-2.5 py-1 rounded-md border border-border text-[11px] font-medium hover:bg-accent disabled:opacity-50 transition-colors"
+							>
+								Cancel
+							</button>
+							<button
+								type="button"
+								disabled={!canSubmit}
+								onClick={() => void handleSubmit()}
+								className="px-2.5 py-1 rounded-md bg-primary text-primary-foreground text-[11px] font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
+							>
+								Suggest
+							</button>
+						</div>
+					</div>
+
+					<Popover.Arrow className="fill-border" />
+				</Popover.Content>
+			</Popover.Portal>
+		</Popover.Root>
+	);
+}

package/.next/standalone/src/components/editor/suggestion-card.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { useState } from "react";
+import { authHeaders } from "@/lib/proof/client-auth";
+import type { Suggestion } from "@/lib/proof/types";
+
+interface Props {
+	suggestion: Suggestion;
+	currentMarkdown: string; // current block content for replace diff
+	path: string;
+	baseRevision: number;
+	/** Return the freshest known revision (for 409 retry). */
+	getLatestRevision: () => number;
+	top: number;
+	left: number;
+	width: number;
+	onSettled: () => void; // called after accept or reject so parent can refresh
+}
+
+function kindVerb(kind: Suggestion["kind"]): string {
+	switch (kind) {
+		case "replace": return "replacing this block";
+		case "insertAfter": return "inserting content after this block";
+		case "insertBefore": return "inserting content before this block";
+		case "delete": return "deleting this block";
+	}
+}
+
+async function postOp(
+	path: string,
+	baseRevision: number,
+	opType: "suggestion.accept" | "suggestion.reject",
+	suggestionId: string,
+): Promise<{ ok: boolean; status: number }> {
+	const encodedPath = encodeURIComponent(path).replace(/%2F/g, "/");
+	const res = await fetch(`/api/agent/files/${encodedPath}`, {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			"Idempotency-Key": crypto.randomUUID(),
+			...authHeaders(),
+		},
+		body: JSON.stringify({
+			baseRevision,
+			by: "human",
+			ops: [{ type: opType, suggestionId }],
+		}),
+	});
+	return { ok: res.ok, status: res.status };
+}
+
+/**
+ * Inline suggestion card rendered as an absolutely-positioned sibling to
+ * the ProseMirror editor. NOT mounted inside the editor DOM tree.
+ *
+ * Phase D coordination: this component uses `top`/`left`/`width` computed by
+ * the editor's block-ref position tracker. Phase D's comment-pip uses the
+ * same tracker (see editor.tsx: useBlockRefPositions).
+ */
+export function SuggestionCard({
+	suggestion,
+	currentMarkdown,
+	path,
+	baseRevision,
+	getLatestRevision,
+	top,
+	left,
+	width,
+	onSettled,
+}: Props) {
+	const [busy, setBusy] = useState(false);
+
+	async function handleAccept() {
+		if (busy) return;
+		setBusy(true);
+		try {
+			let result = await postOp(path, baseRevision, "suggestion.accept", suggestion.id);
+			// On 409 retry once with latest known revision
+			if (!result.ok && result.status === 409) {
+				result = await postOp(path, getLatestRevision(), "suggestion.accept", suggestion.id);
+			}
+		} finally {
+			setBusy(false);
+			onSettled();
+		}
+	}
+
+	async function handleReject() {
+		if (busy) return;
+		setBusy(true);
+		try {
+			await postOp(path, baseRevision, "suggestion.reject", suggestion.id);
+		} finally {
+			setBusy(false);
+			onSettled();
+		}
+	}
+
+	const isDelete = suggestion.kind === "delete";
+	const isInsert = suggestion.kind === "insertAfter" || suggestion.kind === "insertBefore";
+
+	return (
+		<div
+			style={{
+				position: "absolute",
+				top,
+				left,
+				width: width > 0 ? width : undefined,
+				zIndex: 30,
+			}}
+			className="my-1 rounded-lg border border-border bg-card shadow-md text-[12px] overflow-hidden"
+			role="region"
+			aria-label={`Suggestion by ${suggestion.by}`}
+		>
+			{/* Header */}
+			<div className="flex items-center justify-between px-3 py-2 bg-muted/50 border-b border-border">
+				<span className="font-medium text-foreground">
+					<span className="text-primary">{suggestion.by}</span>
+					{" suggests "}
+					<span className="text-muted-foreground">{kindVerb(suggestion.kind)}</span>
+				</span>
+			</div>
+
+			{/* Body */}
+			<div className="p-3 space-y-2">
+				{/* replace: two-pane diff */}
+				{suggestion.kind === "replace" && (
+					<>
+						<div>
+							<p className="text-[10px] uppercase tracking-wider text-muted-foreground/60 mb-1">
+								─ current ─
+							</p>
+							<pre className="whitespace-pre-wrap font-mono text-[11px] text-muted-foreground bg-destructive/5 rounded px-2 py-1">
+								{currentMarkdown || "(empty)"}
+							</pre>
+						</div>
+						<div>
+							<p className="text-[10px] uppercase tracking-wider text-muted-foreground/60 mb-1">
+								─ proposed ─
+							</p>
+							<pre className="whitespace-pre-wrap font-mono text-[11px] text-foreground bg-primary/5 rounded px-2 py-1">
+								{suggestion.markdown ?? "(empty)"}
+							</pre>
+						</div>
+					</>
+				)}
+
+				{/* insert: proposed content with label */}
+				{isInsert && (
+					<div>
+						<p className="text-[10px] uppercase tracking-wider text-muted-foreground/60 mb-1">
+							─ will be inserted ─
+						</p>
+						<pre className="whitespace-pre-wrap font-mono text-[11px] text-foreground bg-primary/5 rounded px-2 py-1">
+							{suggestion.markdown ?? "(empty)"}
+						</pre>
+					</div>
+				)}
+
+				{/* delete: current content struck through */}
+				{isDelete && (
+					<div>
+						<p className="text-[10px] uppercase tracking-wider text-muted-foreground/60 mb-1">
+							─ will be deleted ─
+						</p>
+						<pre className="whitespace-pre-wrap font-mono text-[11px] text-muted-foreground line-through bg-destructive/5 rounded px-2 py-1">
+							{currentMarkdown || "(empty)"}
+						</pre>
+					</div>
+				)}
+
+				{/* Reason */}
+				{suggestion.basisDetail && (
+					<p className="italic text-muted-foreground/70 text-[11px]">
+						Reason: {suggestion.basisDetail}
+					</p>
+				)}
+			</div>
+
+			{/* Actions */}
+			<div className="flex items-center gap-2 px-3 py-2 border-t border-border bg-muted/30">
+				<button
+					type="button"
+					disabled={busy}
+					onClick={() => void handleAccept()}
+					className="flex-1 py-1 rounded-md bg-primary text-primary-foreground text-[11px] font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
+				>
+					Accept
+				</button>
+				<button
+					type="button"
+					disabled={busy}
+					onClick={() => void handleReject()}
+					className="flex-1 py-1 rounded-md border border-border text-[11px] font-medium hover:bg-accent disabled:opacity-50 transition-colors"
+				>
+					Reject
+				</button>
+			</div>
+		</div>
+	);
+}

package/.next/standalone/src/components/view-width-toggle.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { Check, AlignJustify } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+	useViewWidthStore,
+	VIEW_WIDTH_LABEL,
+	VIEW_WIDTH_ORDER,
+} from "@/stores/view-width-store";
+
+export function ViewWidthToggle({ className }: { className?: string }) {
+	const width = useViewWidthStore((s) => s.width);
+	const setWidth = useViewWidthStore((s) => s.setWidth);
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button
+					size="sm"
+					variant="ghost"
+					className={`h-7 w-7 p-0 ${className ?? ""}`}
+					title={`Content width: ${VIEW_WIDTH_LABEL[width]}`}
+				>
+					<AlignJustify className="h-3.5 w-3.5" />
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end" className="w-36">
+				{VIEW_WIDTH_ORDER.map((w) => (
+					<DropdownMenuItem
+						key={w}
+						onClick={() => setWidth(w)}
+						className="flex items-center justify-between text-xs"
+					>
+						{VIEW_WIDTH_LABEL[w]}
+						{w === width && <Check className="h-3.5 w-3.5" />}
+					</DropdownMenuItem>
+				))}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}