wiki-viewer 1.9.1 → 1.11.0

package/.next/standalone/src/components/editor/large-file-gate.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { Download, ExternalLink, FileWarning, FolderOpen } from "lucide-react";
+import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
+import { Button } from "@/components/ui/button";
+import { withWs, wsFetch } from "@/lib/workspace-client";
+
+interface LargeFileGateProps {
+	path: string;
+	size: number;
+	/** Mount the real viewer. */
+	onOpen: () => void;
+}
+
+function formatSize(bytes: number): string {
+	if (bytes >= 1024 * 1024 * 1024)
+		return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+	if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	if (bytes >= 1024) return `${Math.round(bytes / 1024)} KB`;
+	return `${bytes} B`;
+}
+
+/**
+ * Confirmation shown before mounting a viewer that loads and renders a whole
+ * large file. Sits above the viewer dispatch, so it guards every unsafe viewer
+ * in one place. The user can open it anyway, download it, or open the raw bytes.
+ */
+export function LargeFileGate({ path, size, onOpen }: LargeFileGateProps) {
+	const assetUrl = withWs(`/api/assets/${path}`);
+	const filename = path.split("/").pop() || path;
+	const ext = filename.includes(".")
+		? filename.split(".").pop()?.toUpperCase()
+		: "";
+
+	const revealInFinder = async () => {
+		try {
+			await wsFetch("/api/system/reveal", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ path }),
+			});
+		} catch {
+			/* ignore */
+		}
+	};
+
+	return (
+		<div className="flex-1 flex flex-col overflow-hidden">
+			<ViewerToolbar path={path} badge={ext || undefined} />
+			<div className="flex-1 flex items-center justify-center">
+				<div className="flex flex-col items-center gap-4 text-center max-w-sm">
+					<div className="flex size-16 items-center justify-center rounded-2xl bg-amber-500/10">
+						<FileWarning className="size-8 text-amber-500" />
+					</div>
+					<div className="space-y-1">
+						<p className="text-sm font-medium">{filename}</p>
+						<p className="text-xs text-muted-foreground">
+							This file is {formatSize(size)}. Opening it in the viewer may
+							freeze the tab while it loads and renders.
+						</p>
+					</div>
+					<div className="flex flex-wrap items-center justify-center gap-2">
+						<Button
+							variant="default"
+							size="sm"
+							className="gap-2"
+							onClick={onOpen}
+						>
+							Open anyway
+						</Button>
+						<Button
+							variant="outline"
+							size="sm"
+							className="gap-2"
+							onClick={() => window.open(assetUrl, "_blank")}
+						>
+							<ExternalLink className="h-4 w-4" />
+							Raw
+						</Button>
+						<Button
+							variant="outline"
+							size="sm"
+							className="gap-2"
+							onClick={() => {
+								const a = document.createElement("a");
+								a.href = assetUrl;
+								a.download = filename;
+								a.click();
+							}}
+						>
+							<Download className="h-4 w-4" />
+							Download
+						</Button>
+						<Button
+							variant="outline"
+							size="sm"
+							className="gap-2"
+							onClick={revealInFinder}
+						>
+							<FolderOpen className="h-4 w-4" />
+							Open in Finder
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

package/.next/standalone/src/components/editor/office/xlsx-viewer.tsx

@@ -2,7 +2,7 @@
 
 import { Loader2 } from "lucide-react";
 import { wsFetch } from "@/lib/workspace-client";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
 import { OfficeChrome } from "./office-chrome";
 
@@ -13,14 +13,48 @@ interface Props {
 
 interface Sheet {
 	name: string;
-	html: string;
+	// Built lazily on first view; sheet_to_html over a huge sheet freezes the tab.
+	html: string | null;
+	rows: number; // total rows, for the truncation banner
+	truncated: boolean;
 }
 
+// Sheets longer than this are clamped before conversion to cap DOM size.
+const MAX_ROWS = 2000;
+
 export function XlsxViewer({ path, title }: Props) {
 	const [sheets, setSheets] = useState<Sheet[] | null>(null);
 	const [active, setActive] = useState(0);
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState<string | null>(null);
+	const wbRef = useRef<{
+		wb: import("xlsx").WorkBook;
+		toHtml: (ws: import("xlsx").WorkSheet) => {
+			html: string;
+			rows: number;
+			truncated: boolean;
+		};
+	} | null>(null);
+
+	// Build the active sheet's HTML the first time it is viewed.
+	useEffect(() => {
+		if (!sheets || !wbRef.current) return;
+		const s = sheets[active];
+		if (!s || s.html !== null) return;
+		const { wb, toHtml } = wbRef.current;
+		const r = toHtml(wb.Sheets[s.name]);
+		setSheets((prev) => {
+			if (!prev) return prev;
+			const next = [...prev];
+			next[active] = {
+				...next[active],
+				html: r.html,
+				rows: r.rows,
+				truncated: r.truncated,
+			};
+			return next;
+		});
+	}, [sheets, active]);
 
 	useEffect(() => {
 		let cancelled = false;
@@ -42,12 +76,46 @@ export function XlsxViewer({ path, title }: Props) {
 					cellDates: true,
 					cellStyles: true,
 				});
-				const result: Sheet[] = wb.SheetNames.map((name) => ({
-					name,
-					html: XLSX.utils.sheet_to_html(wb.Sheets[name], { editable: false }),
-				}));
+				// Convert one worksheet to HTML, clamping its row range to MAX_ROWS.
+				// Returns the HTML plus whether it was truncated and the true row
+				// count. Kept here so it closes over the dynamically-imported XLSX.
+				// sheet_to_html has no range option; it honors the sheet's own !ref.
+				// For oversized sheets we shrink a copied !ref so only MAX_ROWS emit.
+				const toHtml = (ws: import("xlsx").WorkSheet) => {
+					const ref = ws["!ref"];
+					const range = ref ? XLSX.utils.decode_range(ref) : null;
+					const totalRows = range ? range.e.r - range.s.r + 1 : 0;
+					if (!range || totalRows <= MAX_ROWS) {
+						return {
+							html: XLSX.utils.sheet_to_html(ws, { editable: false }),
+							rows: totalRows,
+							truncated: false,
+						};
+					}
+					const clampedWs = {
+						...ws,
+						"!ref": XLSX.utils.encode_range({
+							s: range.s,
+							e: { r: range.s.r + MAX_ROWS - 1, c: range.e.c },
+						}),
+					};
+					return {
+						html: XLSX.utils.sheet_to_html(clampedWs, { editable: false }),
+						rows: totalRows,
+						truncated: true,
+					};
+				};
 				if (cancelled) return;
-				setSheets(result);
+				// Sheets render lazily via the active-sheet effect, so start them empty.
+				wbRef.current = { wb, toHtml };
+				setSheets(
+					wb.SheetNames.map((name) => ({
+						name,
+						html: null,
+						rows: 0,
+						truncated: false,
+					})),
+				);
 				setActive(0);
 				setLoading(false);
 			} catch (err) {
@@ -105,7 +173,14 @@ export function XlsxViewer({ path, title }: Props) {
 						</div>
 					</div>
 				)}
-				{current && (
+				{current?.truncated && (
+					<div className="px-3 py-2 text-[11px] text-amber-600 dark:text-amber-400 border-b border-border">
+						Large sheet ({current.rows.toLocaleString()} rows). Showing first{" "}
+						{MAX_ROWS.toLocaleString()} for performance. Download the file to
+						see everything.
+					</div>
+				)}
+				{current?.html != null && (
 					<div
 						className="xlsx-sheet p-3 text-[12px]"
 						dangerouslySetInnerHTML={{ __html: current.html }}

package/.next/standalone/src/components/editor/slash-commands.tsx

@@ -344,8 +344,8 @@ function CommandPreview({ cmd }: { cmd: SlashCommand }) {
 			);
 		case "Warning":
 			return (
-				<div className="flex items-start gap-1.5 bg-yellow-500/10 border border-yellow-500/20 rounded px-2 py-1">
-					<AlertTriangle className="h-3 w-3 text-yellow-500 shrink-0 mt-0.5" />
+				<div className="flex items-start gap-1.5 bg-warning/10 border border-warning/20 rounded px-2 py-1">
+					<AlertTriangle className="h-3 w-3 text-warning shrink-0 mt-0.5" />
 					<span className="text-[10px] text-foreground/60">Warning callout</span>
 				</div>
 			);

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

@@ -32,6 +32,19 @@ interface SourceViewerProps {
 
 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",
@@ -90,10 +103,12 @@ function formatBadge(filename: string): string {
 
 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;
@@ -108,6 +123,7 @@ export function SourceViewer({ path }: SourceViewerProps) {
 				if (looksBinary(bytes)) {
 					setBinary(true);
 				} else {
+					setByteSize(bytes.length);
 					setContent(new TextDecoder("utf-8").decode(bytes));
 				}
 			}
@@ -122,27 +138,31 @@ export function SourceViewer({ path }: SourceViewerProps) {
 		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);
-			const html = toHtml(tree);
-			// Split by newlines while preserving HTML tags that span lines
-			return html.split("\n");
+			// Split on newlines, preserving tags that span lines.
+			return toHtml(tree).split("\n");
 		} catch {
-			// Fallback: no highlighting
-			return content
-				.split("\n")
-				.map((line) =>
-					line
-						.replace(/&/g, "&amp;")
-						.replace(/</g, "&lt;")
-						.replace(/>/g, "&gt;"),
-				);
+			return content.split("\n").map(escapeHtml);
 		}
-	}, [content, language]);
+	}, [content, language, isLarge]);
+
+	const shownLines = isLarge
+		? highlightedLines.slice(0, visibleCount)
+		: highlightedLines;
+	const hasMore = isLarge && visibleCount < highlightedLines.length;
 
 	const copyToClipboard = () => {
 		if (!content) return;
@@ -212,27 +232,56 @@ export function SourceViewer({ path }: SourceViewerProps) {
 					Raw
 				</Button>
 			</ViewerToolbar>
-			<div className="flex-1 overflow-auto source-viewer-code bg-[#1e1e1e]">
+			<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>
-							{highlightedLines.map((lineHtml, i) => (
-								<tr key={i} className="hover:bg-white/5">
-									<td className="w-12 pr-4 text-right text-[#858585] select-none align-top sticky left-0 bg-[#1e1e1e]">
+							{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-[#d4d4d4] pl-2 ${wrap ? "whitespace-pre-wrap break-all" : "whitespace-pre"}`}
+										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/share-dialog.tsx

@@ -0,0 +1,307 @@
+"use client";
+
+import {
+	Copy,
+	Check,
+	Globe,
+	Loader2,
+	Lock,
+	Trash2,
+	Clock,
+} from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+} from "@/components/ui/dialog";
+import { showSuccess, showError } from "@/lib/toast";
+import { wsFetch } from "@/lib/workspace-client";
+
+interface Share {
+	id: string;
+	token: string;
+	url: string;
+	hasPassword: boolean;
+	expiresAt: string | null;
+	createdAt: string;
+	viewCount: number;
+	isExpired: boolean;
+}
+
+interface ShareDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	filePath: string;
+}
+
+export function ShareDialog({
+	open,
+	onOpenChange,
+	filePath,
+}: ShareDialogProps) {
+	const [shares, setShares] = useState<Share[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [creating, setCreating] = useState(false);
+
+	// Form fields
+	const [password, setPassword] = useState("");
+	const [enablePassword, setEnablePassword] = useState(false);
+	const [enableExpiry, setEnableExpiry] = useState(false);
+	const [expiryDays, setExpiryDays] = useState("7");
+
+	// Copied state per share token
+	const [copiedToken, setCopiedToken] = useState<string | null>(null);
+
+	const loadShares = useCallback(async () => {
+		setLoading(true);
+		try {
+			const res = await wsFetch(
+				`/api/share?path=${encodeURIComponent(filePath)}`,
+			);
+			if (res.ok) {
+				const data = await res.json();
+				setShares(data.shares ?? []);
+			}
+		} catch {
+			// silently fail
+		}
+		setLoading(false);
+	}, [filePath]);
+
+	useEffect(() => {
+		if (open) void loadShares();
+	}, [open, loadShares]);
+
+	const handleCreate = async () => {
+		setCreating(true);
+		try {
+			const body: Record<string, unknown> = { path: filePath };
+			if (enablePassword && password.trim()) {
+				body.password = password.trim();
+			}
+			if (enableExpiry && expiryDays) {
+				const d = new Date();
+				d.setDate(d.getDate() + Number(expiryDays));
+				body.expiresAt = d.toISOString();
+			}
+			const res = await wsFetch("/api/share", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify(body),
+			});
+			if (!res.ok) {
+				const e = await res.json();
+				showError(e.error ?? "Failed to create share link");
+				return;
+			}
+			showSuccess("Share link created");
+			setPassword("");
+			setEnablePassword(false);
+			setEnableExpiry(false);
+			setExpiryDays("7");
+			await loadShares();
+		} catch {
+			showError("Failed to create share link");
+		} finally {
+			setCreating(false);
+		}
+	};
+
+	const handleRevoke = async (token: string) => {
+		try {
+			const res = await fetch(`/api/share/${token}`, { method: "DELETE" });
+			if (!res.ok) {
+				showError("Failed to revoke share link");
+				return;
+			}
+			showSuccess("Share link revoked");
+			await loadShares();
+		} catch {
+			showError("Failed to revoke share link");
+		}
+	};
+
+	const copyLink = (url: string, token: string) => {
+		const fullUrl = `${window.location.origin}${url}`;
+		void navigator.clipboard.writeText(fullUrl);
+		setCopiedToken(token);
+		setTimeout(() => setCopiedToken(null), 2000);
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="sm:max-w-md">
+				<DialogHeader>
+					<DialogTitle>Share document</DialogTitle>
+					<DialogDescription>
+						Create a public link to share this document as read-only.
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="space-y-4">
+					{/* Create new share */}
+					<div className="rounded-sm border border-border p-3 space-y-3">
+						<h3 className="text-sm font-medium">New share link</h3>
+
+						{/* Password toggle */}
+						<div className="flex items-center justify-between">
+							<Label htmlFor="share-pwd" className="text-xs gap-1.5 flex items-center">
+								<Lock className="h-3 w-3 text-muted-foreground" />
+								Password protect
+							</Label>
+							<Switch
+								id="share-pwd"
+								checked={enablePassword}
+								onCheckedChange={setEnablePassword}
+							/>
+						</div>
+						{enablePassword && (
+							<Input
+								type="password"
+								placeholder="Set a password"
+								value={password}
+								onChange={(e) => setPassword(e.target.value)}
+							/>
+						)}
+
+						{/* Expiry toggle */}
+						<div className="flex items-center justify-between">
+							<Label htmlFor="share-expiry" className="text-xs gap-1.5 flex items-center">
+								<Clock className="h-3 w-3 text-muted-foreground" />
+								Set expiration
+							</Label>
+							<Switch
+								id="share-expiry"
+								checked={enableExpiry}
+								onCheckedChange={setEnableExpiry}
+							/>
+						</div>
+						{enableExpiry && (
+							<div className="flex items-center gap-2">
+								<Input
+									type="number"
+									min={1}
+									max={365}
+									value={expiryDays}
+									onChange={(e) => setExpiryDays(e.target.value)}
+									className="w-20"
+								/>
+								<span className="text-xs text-muted-foreground">days</span>
+							</div>
+						)}
+
+						<Button
+							size="sm"
+							className="w-full gap-1.5"
+							onClick={handleCreate}
+							disabled={creating}
+						>
+							{creating ? (
+								<Loader2 className="h-3.5 w-3.5 animate-spin" />
+							) : (
+								<Globe className="h-3.5 w-3.5" />
+							)}
+							Create link
+						</Button>
+					</div>
+
+					{/* Existing shares */}
+					<div className="space-y-2">
+						<h3 className="text-xs font-medium text-muted-foreground">
+							{shares.length > 0
+								? `Active links (${shares.length})`
+								: loading
+									? "Loading..."
+									: "No active links"}
+						</h3>
+						{loading && (
+							<div className="flex justify-center py-2">
+								<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+							</div>
+						)}
+						{shares.map((share) => (
+							<div
+								key={share.id}
+								className="flex items-center gap-2 rounded-sm border border-border p-2"
+							>
+								<div className="flex-1 min-w-0">
+									<div className="flex items-center gap-1.5">
+										<span className="text-xs font-mono truncate">
+											{window.location.origin}/s/{share.token}
+										</span>
+									</div>
+									<div className="flex items-center gap-2 mt-0.5">
+										{share.hasPassword && (
+											<span className="flex items-center gap-0.5 text-[10px] text-muted-foreground">
+												<Lock className="h-2.5 w-2.5" />
+												pwd
+											</span>
+										)}
+										{share.expiresAt && (
+											<span className="flex items-center gap-0.5 text-[10px] text-muted-foreground">
+												<Clock className="h-2.5 w-2.5" />
+												{formatExpiry(share.expiresAt)}
+											</span>
+										)}
+										<span className="text-[10px] text-muted-foreground">
+											{share.viewCount} view
+											{share.viewCount !== 1 ? "s" : ""}
+										</span>
+										{share.isExpired && (
+											<span className="text-[10px] text-destructive">
+												expired
+											</span>
+										)}
+									</div>
+								</div>
+								<div className="flex items-center gap-1 shrink-0">
+									<Button
+										size="sm"
+										variant="ghost"
+										className="h-7 w-7 p-0"
+										title="Copy link"
+										onClick={() => copyLink(share.url, share.token)}
+									>
+										{copiedToken === share.token ? (
+											<Check className="h-3.5 w-3.5 text-success" />
+										) : (
+											<Copy className="h-3.5 w-3.5" />
+										)}
+									</Button>
+									<Button
+										size="sm"
+										variant="ghost"
+										className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+										title="Revoke link"
+										onClick={() => handleRevoke(share.token)}
+									>
+										<Trash2 className="h-3.5 w-3.5" />
+									</Button>
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function formatExpiry(iso: string): string {
+	const d = new Date(iso);
+	const now = new Date();
+	const ms = d.getTime() - now.getTime();
+	if (ms <= 0) return "expired";
+	const days = Math.floor(ms / 86400000);
+	const hours = Math.floor((ms % 86400000) / 3600000);
+	if (days > 0) return `${days}d`;
+	if (hours > 0) return `${hours}h`;
+	return "<1h";
+}