wiki-viewer 1.14.1 → 2.0.0

package/.next/standalone/src/components/editor/source-viewer.tsx

@@ -1,289 +0,0 @@
-"use client";
-
-import { toHtml } from "hast-util-to-html";
-import { common, createLowlight } from "lowlight";
-import { Check, Copy, Download, ExternalLink, WrapText } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
-import { Button } from "@/components/ui/button";
-import { withWs, wsFetch } from "@/lib/workspace-client";
-import { FileFallbackViewer } from "@/components/editor/file-fallback-viewer";
-
-// Heuristic binary sniff: a NUL byte never appears in UTF-8/UTF-16LE text we
-// care about, and a high ratio of control chars (excluding tab/newline/CR)
-// signals binary. Only inspect a prefix \u2014 enough to classify cheaply.
-function looksBinary(bytes: Uint8Array): boolean {
-	const n = Math.min(bytes.length, 8192);
-	if (n === 0) return false;
-	let suspicious = 0;
-	for (let i = 0; i < n; i++) {
-		const b = bytes[i];
-		if (b === 0) return true; // NUL \u2192 definitely binary
-		// Allow tab(9), LF(10), CR(13); flag other C0 control chars.
-		if (b < 9 || (b > 13 && b < 32)) suspicious++;
-	}
-	return suspicious / n > 0.3;
-}
-
-interface SourceViewerProps {
-	path: string;
-	title: string;
-}
-
-const lowlight = createLowlight(common);
-
-// Large files skip syntax highlighting (lowlight is synchronous and blocks the
-// main thread) and render in chunks (one <tr> per line freezes the tab).
-const LARGE_BYTES = 2 * 1024 * 1024; // 2 MB
-const LARGE_LINES = 5000;
-const RENDER_CHUNK = 2000; // lines added per "Show more"
-
-function escapeHtml(s: string): string {
-	return s
-		.replace(/&/g, "&amp;")
-		.replace(/</g, "&lt;")
-		.replace(/>/g, "&gt;");
-}
-
-const EXT_TO_LANG: Record<string, string> = {
-	".js": "javascript",
-	".cjs": "javascript",
-	".mjs": "javascript",
-	".ts": "typescript",
-	".tsx": "typescript",
-	".jsx": "javascript",
-	".py": "python",
-	".rb": "ruby",
-	".php": "php",
-	".sh": "bash",
-	".bash": "bash",
-	".zsh": "bash",
-	".ps1": "powershell",
-	".css": "css",
-	".scss": "scss",
-	".html": "xml",
-	".json": "json",
-	".jsonc": "json",
-	".yaml": "yaml",
-	".yml": "yaml",
-	".toml": "ini",
-	".ini": "ini",
-	".xml": "xml",
-	".sql": "sql",
-	".graphql": "graphql",
-	".gql": "graphql",
-	".go": "go",
-	".rs": "rust",
-	".swift": "swift",
-	".java": "java",
-	".kt": "kotlin",
-	".kts": "kotlin",
-	".c": "c",
-	".cpp": "cpp",
-	".h": "c",
-	".env": "bash",
-	".txt": "",
-	".text": "",
-	".log": "",
-	".rst": "",
-	".mdx": "markdown",
-};
-
-function detectLanguage(filename: string): string {
-	const ext = filename.includes(".")
-		? `.${filename.split(".").pop()?.toLowerCase()}`
-		: "";
-	return EXT_TO_LANG[ext] ?? "";
-}
-
-function formatBadge(filename: string): string {
-	if (!filename.includes(".")) return "TEXT";
-	return filename.split(".").pop()?.toUpperCase() ?? "TEXT";
-}
-
-export function SourceViewer({ path }: SourceViewerProps) {
-	const [content, setContent] = useState<string | null>(null);
-	const [byteSize, setByteSize] = useState(0);
-	const [binary, setBinary] = useState(false);
-	const [loading, setLoading] = useState(true);
-	const [wrap, setWrap] = useState(false);
-	const [copied, setCopied] = useState(false);
-	const [visibleCount, setVisibleCount] = useState(RENDER_CHUNK);
-
-	const assetUrl = withWs(`/api/assets/${path}`);
-	const filename = path.split("/").pop() || path;
-	const language = detectLanguage(filename);
-
-	const fetchContent = useCallback(async () => {
-		setLoading(true);
-		try {
-			const res = await wsFetch(assetUrl);
-			if (res.ok) {
-				const bytes = new Uint8Array(await res.arrayBuffer());
-				if (looksBinary(bytes)) {
-					setBinary(true);
-				} else {
-					setByteSize(bytes.length);
-					setContent(new TextDecoder("utf-8").decode(bytes));
-				}
-			}
-		} catch {
-			/* ignore */
-		} finally {
-			setLoading(false);
-		}
-	}, [assetUrl]);
-
-	useEffect(() => {
-		void fetchContent();
-	}, [fetchContent]);
-
-	const lineCount = useMemo(
-		() => (content ? content.split("\n").length : 0),
-		[content],
-	);
-
-	const isLarge = byteSize > LARGE_BYTES || lineCount > LARGE_LINES;
-
-	const highlightedLines = useMemo(() => {
-		if (!content) return [];
-		if (isLarge) return content.split("\n").map(escapeHtml);
-		try {
-			const tree = language
-				? lowlight.highlight(language, content)
-				: lowlight.highlightAuto(content);
-			// Split on newlines, preserving tags that span lines.
-			return toHtml(tree).split("\n");
-		} catch {
-			return content.split("\n").map(escapeHtml);
-		}
-	}, [content, language, isLarge]);
-
-	const shownLines = isLarge
-		? highlightedLines.slice(0, visibleCount)
-		: highlightedLines;
-	const hasMore = isLarge && visibleCount < highlightedLines.length;
-
-	const copyToClipboard = () => {
-		if (!content) return;
-		navigator.clipboard.writeText(content);
-		setCopied(true);
-		setTimeout(() => setCopied(false), 2000);
-	};
-
-	// Detected binary at runtime \u2192 reuse the download/reveal fallback UI.
-	if (binary) {
-		return <FileFallbackViewer path={path} title={filename} />;
-	}
-
-	return (
-		<div className="flex-1 flex flex-col overflow-hidden">
-			<ViewerToolbar
-				path={path}
-				badge={formatBadge(filename)}
-				sublabel={language || undefined}
-			>
-				<Button
-					variant="ghost"
-					size="sm"
-					className={`h-7 gap-1.5 text-xs ${wrap ? "bg-muted" : ""}`}
-					onClick={() => setWrap((v) => !v)}
-					title={wrap ? "Disable line wrap" : "Enable line wrap"}
-				>
-					<WrapText className="h-3.5 w-3.5" />
-					Wrap
-				</Button>
-				<Button
-					variant="ghost"
-					size="sm"
-					className="h-7 gap-1.5 text-xs"
-					onClick={copyToClipboard}
-					title="Copy file contents"
-				>
-					{copied ? (
-						<Check className="h-3.5 w-3.5 text-green-500" />
-					) : (
-						<Copy className="h-3.5 w-3.5" />
-					)}
-					{copied ? "Copied" : "Copy"}
-				</Button>
-				<Button
-					variant="ghost"
-					size="sm"
-					className="h-7 gap-1.5 text-xs"
-					onClick={() => {
-						const a = document.createElement("a");
-						a.href = assetUrl;
-						a.download = filename;
-						a.click();
-					}}
-					title="Download file"
-				>
-					<Download className="h-3.5 w-3.5" />
-					Download
-				</Button>
-				<Button
-					variant="ghost"
-					size="sm"
-					className="h-7 gap-1.5 text-xs"
-					onClick={() => window.open(assetUrl, "_blank")}
-				>
-					<ExternalLink className="h-3.5 w-3.5" />
-					Raw
-				</Button>
-			</ViewerToolbar>
-			<div className="flex-1 overflow-auto source-viewer-code bg-muted">
-				{loading ? (
-					<div className="flex items-center justify-center h-full text-muted-foreground text-sm">
-						Loading...
-					</div>
-				) : (
-					<>
-					{isLarge && (
-						<div className="px-4 py-2 text-[11px] text-amber-700 dark:text-amber-300 bg-amber-500/15 border-b border-amber-500/30 font-sans">
-							Large file ({(byteSize / (1024 * 1024)).toFixed(1)} MB,{" "}
-							{highlightedLines.length.toLocaleString()} lines). Syntax
-							highlighting disabled for performance. Use Raw or Download for
-							the full file.
-						</div>
-					)}
-					<table className="w-full border-collapse text-[13px] leading-relaxed font-mono">
-						<tbody>
-							{shownLines.map((lineHtml, i) => (
-								<tr key={i} className="hover:bg-foreground/5">
-									<td className="w-12 pr-4 text-right text-muted-foreground select-none align-top sticky left-0 bg-muted">
-										{i + 1}
-									</td>
-									<td
-										className={`text-foreground pl-2 ${wrap ? "whitespace-pre-wrap break-all" : "whitespace-pre"}`}
-										dangerouslySetInnerHTML={{ __html: lineHtml || " " }}
-									/>
-								</tr>
-							))}
-						</tbody>
-					</table>
-					{hasMore && (
-						<div className="flex items-center gap-3 px-4 py-3 border-t border-border font-sans">
-							<button
-								onClick={() => setVisibleCount((v) => v + RENDER_CHUNK)}
-								className="text-[11px] text-foreground hover:text-foreground px-2.5 py-1 rounded bg-foreground/10 hover:bg-foreground/20 transition-colors"
-							>
-								Show{" "}
-								{Math.min(
-									RENDER_CHUNK,
-								highlightedLines.length - visibleCount,
-							).toLocaleString()}{" "}
-								more
-							</button>
-							<span className="text-[11px] text-muted-foreground">
-								{visibleCount.toLocaleString()} /{" "}
-								{highlightedLines.length.toLocaleString()} lines
-							</span>
-						</div>
-					)}
-					</>
-				)}
-			</div>
-		</div>
-	);
-}

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

@@ -1,229 +0,0 @@
-"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 { wsFetch } from "@/lib/workspace-client";
-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 wsFetch(`/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>
-	);
-}