wiki-viewer 1.14.1 → 2.0.0

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

@@ -1,254 +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 { Comment } from "@/lib/proof/types";
-
-// ── helpers ──────────────────────────────────────────────────────────────────
-
-const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-
-function relTime(iso: string): string {
-	const diff = Date.now() - new Date(iso).getTime();
-	const secs = Math.round(diff / 1000);
-	if (Math.abs(secs) < 60) return rtf.format(-secs, "second");
-	const mins = Math.round(secs / 60);
-	if (Math.abs(mins) < 60) return rtf.format(-mins, "minute");
-	const hrs = Math.round(mins / 60);
-	if (Math.abs(hrs) < 24) return rtf.format(-hrs, "hour");
-	return rtf.format(-Math.round(hrs / 24), "day");
-}
-
-async function postOp(
-	path: string,
-	baseRevision: number,
-	by: string,
-	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, 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 };
-}
-
-// ── component ────────────────────────────────────────────────────────────────
-
-interface Props {
-	path: string;
-	blockRef: string;
-	/** Existing comments on this block (may be empty = new-comment mode). */
-	comments: Comment[];
-	anchorEl: HTMLElement | null;
-	onClose: () => void;
-	readOnly?: boolean;
-}
-
-export function CommentThread({ path, blockRef, comments, anchorEl, onClose, readOnly }: Props) {
-	const [anchor, setAnchor] = useState<{ top: number; left: number } | null>(null);
-	const [text, setText] = useState("");
-	const [busy, setBusy] = useState(false);
-	const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-	const openComments = comments.filter((c) => !c.resolved);
-	const hasOpen = openComments.length > 0;
-	// Use first open comment for reply/resolve; fall back to any comment
-	const activeComment = openComments[0] ?? comments[0] ?? null;
-
-	useEffect(() => {
-		if (!anchorEl) {
-			setAnchor(null);
-			return;
-		}
-		const rect = anchorEl.getBoundingClientRect();
-		setAnchor({ top: rect.bottom + 4, left: rect.left });
-	}, [anchorEl]);
-
-	useEffect(() => {
-		if (!anchorEl) return;
-		const onKey = (e: KeyboardEvent) => {
-			if (e.key === "Escape") onClose();
-		};
-		window.addEventListener("keydown", onKey);
-		return () => window.removeEventListener("keydown", onKey);
-	}, [anchorEl, onClose]);
-
-	useEffect(() => {
-		if (anchor) {
-			setTimeout(() => textareaRef.current?.focus(), 50);
-		}
-	}, [anchor]);
-
-	if (!anchorEl || !anchor) return null;
-
-	function getRevision(): number {
-		const entry = useProofStore.getState().byPath[path];
-		return entry?.snapshotRevision ?? 0;
-	}
-
-	async function handleSend() {
-		if (!text.trim() || busy) return;
-		setBusy(true);
-		try {
-			const sendOp = activeComment
-				? { type: "comment.reply", commentId: activeComment.id, text: text.trim() }
-				: { type: "comment.add", ref: blockRef, text: text.trim() };
-
-			let rev = getRevision();
-			let result = await postOp(path, rev, "human", [sendOp]);
-			if (!result.ok && result.stale && result.newRevision !== undefined) {
-				// Retry once with fresh revision
-				await useProofStore.getState().loadSidecar(path);
-				rev = result.newRevision;
-				result = await postOp(path, rev, "human", [sendOp]);
-			}
-			if (result.ok) {
-				await useProofStore.getState().loadSidecar(path);
-				setText("");
-				onClose();
-			}
-		} finally {
-			setBusy(false);
-		}
-	}
-
-	async function handleResolveToggle() {
-		if (!activeComment || busy) return;
-		setBusy(true);
-		try {
-			const opType = activeComment.resolved ? "comment.reopen" : "comment.resolve";
-			let rev = getRevision();
-			let result = await postOp(path, rev, "human", [
-				{ type: opType, commentId: activeComment.id },
-			]);
-			if (!result.ok && result.stale && result.newRevision !== undefined) {
-				await useProofStore.getState().loadSidecar(path);
-				rev = result.newRevision;
-				result = await postOp(path, rev, "human", [
-					{ type: opType, commentId: activeComment.id },
-				]);
-			}
-			if (result.ok) {
-				await useProofStore.getState().loadSidecar(path);
-				onClose();
-			}
-		} finally {
-			setBusy(false);
-		}
-	}
-
-	// Collect all turns from all comments on this block for display
-	const allTurns = comments.flatMap((c) =>
-		c.turns.map((t) => ({ ...t, resolved: c.resolved, commentId: c.id })),
-	);
-
-	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(18rem,calc(100vw-1rem))] bg-popover border border-border rounded-lg shadow-xl p-3 space-y-2 text-[12px] focus:outline-none"
-				>
-					{/* Header */}
-					<div className="flex items-center justify-between">
-						<span className="text-[11px] font-mono text-muted-foreground/60 truncate">
-							{blockRef}
-						</span>
-						{activeComment && !readOnly && (
-							<button
-								type="button"
-								disabled={busy}
-								onClick={() => void handleResolveToggle()}
-								className="ml-2 shrink-0 text-[10px] px-1.5 py-0.5 rounded border border-border hover:bg-accent disabled:opacity-50 transition-colors"
-							>
-								{activeComment.resolved ? "Reopen" : "Resolve"}
-							</button>
-						)}
-					</div>
-
-					{/* Turns */}
-					{allTurns.length > 0 && (
-						<div className="space-y-2 max-h-48 overflow-y-auto pr-1">
-							{allTurns.map((t, i) => (
-								<div key={i} className="space-y-0.5">
-									<p className="text-[10px] text-muted-foreground/60">
-										{t.by} · {relTime(t.at)}
-									</p>
-									<p className="text-foreground leading-snug whitespace-pre-wrap">{t.text}</p>
-								</div>
-							))}
-						</div>
-					)}
-
-					{/* Reply / new comment footer */}
-					{(!activeComment?.resolved || comments.length === 0) && (
-						<div className="space-y-1.5 pt-1">
-							<textarea
-								ref={textareaRef}
-								value={text}
-								onChange={(e) => setText(e.target.value)}
-								onKeyDown={(e) => {
-									if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-										void handleSend();
-									}
-								}}
-								placeholder={
-									hasOpen ? "Reply…" : "Add a comment…"
-								}
-								rows={2}
-								className="w-full resize-none 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"
-							/>
-							<div className="flex items-center justify-between">
-								<span className="text-[10px] text-muted-foreground/40">⌘↵ send</span>
-								<button
-									type="button"
-									disabled={busy || !text.trim()}
-									onClick={() => void handleSend()}
-									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"
-								>
-									Send
-								</button>
-							</div>
-						</div>
-					)}
-
-					<Popover.Arrow className="fill-border" />
-				</Popover.Content>
-			</Popover.Portal>
-		</Popover.Root>
-	);
-}

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

@@ -1,379 +0,0 @@
-"use client";
-
-import { Code2, Download, Save } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
-import { wsFetch } from "@/lib/workspace-client";
-import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
-import { Button } from "@/components/ui/button";
-
-interface CsvViewerProps {
-	path: string;
-	title: string;
-}
-
-// Big CSVs render one editable <td> per cell (rows x cols), which freezes the
-// tab. Above these limits we open in read-only source mode and cap rendered rows.
-const LARGE_BYTES = 2 * 1024 * 1024; // 2 MB
-const LARGE_ROWS = 2000;
-const ROW_CHUNK = 1000; // rows added per "Show more"
-
-function parseCsv(text: string): string[][] {
-	const rows: string[][] = [];
-	let current = "";
-	let inQuotes = false;
-	let row: string[] = [];
-
-	for (let i = 0; i < text.length; i++) {
-		const ch = text[i];
-		const next = text[i + 1];
-
-		if (inQuotes) {
-			if (ch === '"' && next === '"') {
-				current += '"';
-				i++;
-			} else if (ch === '"') {
-				inQuotes = false;
-			} else {
-				current += ch;
-			}
-		} else {
-			if (ch === '"') {
-				inQuotes = true;
-			} else if (ch === ",") {
-				row.push(current);
-				current = "";
-			} else if (ch === "\n" || (ch === "\r" && next === "\n")) {
-				row.push(current);
-				current = "";
-				if (row.length > 0) rows.push(row);
-				row = [];
-				if (ch === "\r") i++;
-			} else {
-				current += ch;
-			}
-		}
-	}
-	row.push(current);
-	if (row.some((c) => c !== "")) rows.push(row);
-
-	return rows;
-}
-
-function rowsToCsv(rows: string[][]): string {
-	return rows
-		.map((row) =>
-			row
-				.map((cell) => {
-					if (cell.includes(",") || cell.includes('"') || cell.includes("\n")) {
-						return `"${cell.replace(/"/g, '""')}"`;
-					}
-					return cell;
-				})
-				.join(","),
-		)
-		.join("\n");
-}
-
-export function CsvViewer({ path }: CsvViewerProps) {
-	const [rows, setRows] = useState<string[][]>([]);
-	const [rawText, setRawText] = useState("");
-	const [sourceMode, setSourceMode] = useState(false);
-	const [dirty, setDirty] = useState(false);
-	const [saving, setSaving] = useState(false);
-	const [editCell, setEditCell] = useState<{ r: number; c: number } | null>(
-		null,
-	);
-	const [isLarge, setIsLarge] = useState(false);
-	const [visibleRows, setVisibleRows] = useState(ROW_CHUNK);
-
-	const csvUrl = `/api/assets/${path}`;
-
-	useEffect(() => {
-		wsFetch(csvUrl)
-			.then((r) => r.text())
-			.then((text) => {
-				const parsed = parseCsv(text);
-				const large = text.length > LARGE_BYTES || parsed.length > LARGE_ROWS;
-				setRawText(text);
-				setRows(parsed);
-				setIsLarge(large);
-				// Open large files in source mode so the editable table never paints.
-				setSourceMode(large);
-				setDirty(false);
-			});
-	}, [csvUrl]);
-
-	const updateCell = useCallback((r: number, c: number, value: string) => {
-		setRows((prev) => {
-			const next = prev.map((row) => [...row]);
-			// Ensure row and column exist
-			while (next.length <= r) next.push([]);
-			while (next[r].length <= c) next[r].push("");
-			next[r][c] = value;
-			return next;
-		});
-		setDirty(true);
-	}, []);
-
-	const addRow = () => {
-		const cols = rows[0]?.length || 1;
-		setRows((prev) => [...prev, new Array(cols).fill("")]);
-		setDirty(true);
-	};
-
-	const addColumn = () => {
-		setRows((prev) => prev.map((row) => [...row, ""]));
-		setDirty(true);
-	};
-
-	const deleteRow = (r: number) => {
-		setRows((prev) => prev.filter((_, i) => i !== r));
-		setDirty(true);
-	};
-
-	const handleSave = async () => {
-		setSaving(true);
-		const csv = sourceMode ? rawText : rowsToCsv(rows);
-		try {
-			await wsFetch(`/api/assets/${path}`, {
-				method: "PUT",
-				headers: { "Content-Type": "text/plain" },
-				body: csv,
-			});
-			if (!sourceMode) {
-				setRawText(csv);
-			} else {
-				setRows(parseCsv(rawText));
-			}
-			setDirty(false);
-		} catch (e) {
-			console.error("Failed to save CSV:", e);
-		}
-		setSaving(false);
-	};
-
-	const toggleSource = () => {
-		if (sourceMode) {
-			// Switching back to table — parse the raw text
-			setRows(parseCsv(rawText));
-		} else {
-			// Switching to source — serialize current table
-			setRawText(rowsToCsv(rows));
-		}
-		setSourceMode(!sourceMode);
-	};
-
-	const headers = rows[0] || [];
-	const allDataRows = rows.slice(1);
-	const dataRows = isLarge
-		? allDataRows.slice(0, visibleRows)
-		: allDataRows;
-	const hasMoreRows = isLarge && visibleRows < allDataRows.length;
-
-	return (
-		<div className="flex-1 flex flex-col overflow-hidden">
-			<ViewerToolbar
-				path={path}
-				badge={`CSV${rows.length > 0 ? ` (${rows.length - 1} rows)` : ""}`}
-			>
-				{dirty && (
-					<Button
-						variant="ghost"
-						size="sm"
-						className="h-7 gap-1.5 text-xs"
-						onClick={handleSave}
-						disabled={saving}
-					>
-						<Save className="h-3.5 w-3.5" />
-						{saving ? "Saving..." : "Save"}
-					</Button>
-				)}
-				{isLarge && (
-					<span className="text-[11px] text-amber-600 dark:text-amber-400 px-1">
-						Large file ({(rawText.length / (1024 * 1024)).toFixed(1)} MB,{" "}
-						{rows.length.toLocaleString()} rows)
-					</span>
-				)}
-				<button
-					onClick={toggleSource}
-					className={`flex items-center gap-1.5 px-2.5 py-1 text-[11px] rounded-md transition-colors border border-border ${
-						sourceMode
-							? "bg-primary text-primary-foreground"
-							: "text-muted-foreground hover:bg-accent"
-					}`}
-				>
-					<Code2 className="h-3 w-3" />
-					{sourceMode ? "Table" : "Source"}
-				</button>
-				<button
-					onClick={() => window.open(csvUrl, "_blank")}
-					className="inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer"
-					title="Download CSV"
-				>
-					<Download className="h-4 w-4" />
-				</button>
-			</ViewerToolbar>
-
-			{sourceMode ? (
-				<div className="flex-1 overflow-y-auto p-4">
-					<textarea
-						value={rawText}
-						onChange={(e) => {
-							setRawText(e.target.value);
-							setDirty(true);
-						}}
-						className="w-full h-full min-h-[calc(100vh-12rem)] bg-transparent font-mono text-[13px] leading-relaxed resize-none focus:outline-none"
-						spellCheck={false}
-					/>
-				</div>
-			) : (
-				<div className="flex-1 overflow-auto">
-					<table className="w-full border-collapse text-[13px]">
-						<thead className="sticky top-0 z-10">
-							<tr className="bg-muted/80 backdrop-blur-sm">
-								<th className="border border-border px-1 py-1 text-center text-[10px] text-muted-foreground w-8">
-									#
-								</th>
-								{headers.map((header, c) => (
-									<th
-										key={c}
-										className="border border-border px-3 py-1.5 text-left font-medium text-foreground min-w-[100px]"
-									>
-										{editCell?.r === 0 && editCell?.c === c ? (
-											<input
-												autoFocus
-												className="w-full bg-transparent outline-none"
-												value={header}
-												onChange={(e) => updateCell(0, c, e.target.value)}
-												onBlur={() => setEditCell(null)}
-												onKeyDown={(e) => {
-													if (e.key === "Enter" || e.key === "Escape")
-														setEditCell(null);
-													if (e.key === "Tab") {
-														e.preventDefault();
-														setEditCell({
-															r: 0,
-															c: c + 1 < headers.length ? c + 1 : 0,
-														});
-													}
-												}}
-											/>
-										) : (
-											<span
-												className="cursor-text"
-												onDoubleClick={() => setEditCell({ r: 0, c })}
-											>
-												{header || "\u00A0"}
-											</span>
-										)}
-									</th>
-								))}
-							</tr>
-						</thead>
-						<tbody>
-							{dataRows.map((row, ri) => {
-								const r = ri + 1; // actual row index (0 is header)
-								return (
-									<tr
-										key={ri}
-										className="hover:bg-accent/30 transition-colors group"
-									>
-										<td className="border border-border px-1 py-1 text-center text-[10px] text-muted-foreground/50">
-											<span className="group-hover:hidden">{ri + 1}</span>
-											<button
-												className="hidden group-hover:inline text-destructive hover:text-destructive/80 text-[10px]"
-												onClick={() => deleteRow(r)}
-												title="Delete row"
-											>
-												×
-											</button>
-										</td>
-										{headers.map((_, c) => {
-											const value = row[c] ?? "";
-											const isEditing = editCell?.r === r && editCell?.c === c;
-											return (
-												<td
-													key={c}
-													className="border border-border px-3 py-1.5"
-												>
-													{isEditing ? (
-														<input
-															autoFocus
-															className="w-full bg-transparent outline-none"
-															value={value}
-															onChange={(e) => updateCell(r, c, e.target.value)}
-															onBlur={() => setEditCell(null)}
-															onKeyDown={(e) => {
-																if (e.key === "Escape") setEditCell(null);
-																if (e.key === "Enter")
-																	setEditCell({ r: r + 1, c });
-																if (e.key === "Tab") {
-																	e.preventDefault();
-																	if (e.shiftKey) {
-																		setEditCell({ r, c: Math.max(0, c - 1) });
-																	} else {
-																		setEditCell({
-																			r: c + 1 >= headers.length ? r + 1 : r,
-																			c: c + 1 >= headers.length ? 0 : c + 1,
-																		});
-																	}
-																}
-															}}
-														/>
-													) : (
-														<span
-															className="cursor-text"
-															onDoubleClick={() => setEditCell({ r, c })}
-														>
-															{value || "\u00A0"}
-														</span>
-													)}
-												</td>
-											);
-										})}
-									</tr>
-								);
-							})}
-						</tbody>
-					</table>
-
-					{hasMoreRows && (
-						<div className="flex items-center gap-3 px-4 py-2 border-t border-border">
-							<button
-								onClick={() => setVisibleRows((v) => v + ROW_CHUNK)}
-								className="text-[11px] text-foreground hover:bg-accent transition-colors px-2.5 py-1 rounded border border-border"
-							>
-								Show{" "}
-								{Math.min(
-									ROW_CHUNK,
-								allDataRows.length - visibleRows,
-							).toLocaleString()}{" "}
-								more rows
-							</button>
-							<span className="text-[11px] text-muted-foreground">
-								{visibleRows.toLocaleString()} /{" "}
-								{allDataRows.length.toLocaleString()} rows
-							</span>
-						</div>
-					)}
-
-					{/* Add row/column buttons */}
-					<div className="flex items-center gap-2 px-4 py-2 border-t border-border">
-						<button
-							onClick={addRow}
-							className="text-[11px] text-muted-foreground hover:text-foreground transition-colors px-2 py-1 rounded hover:bg-accent"
-						>
-							+ Add row
-						</button>
-						<button
-							onClick={addColumn}
-							className="text-[11px] text-muted-foreground hover:text-foreground transition-colors px-2 py-1 rounded hover:bg-accent"
-						>
-							+ Add column
-						</button>
-					</div>
-				</div>
-			)}
-		</div>
-	);
-}