wiki-viewer 1.0.0

package/.next/standalone/src/components/editor/node-app-viewer.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import {
+	AlertCircle,
+	ExternalLink,
+	Loader2,
+	Play,
+	RefreshCw,
+	Square,
+	Terminal,
+} from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
+import { Button } from "@/components/ui/button";
+import type { AppStatus } from "@/lib/app-runner";
+
+interface Props {
+	path: string;
+	title: string;
+}
+
+interface StatusResponse {
+	status: AppStatus;
+	port?: number;
+	error?: string;
+	logs: string[];
+}
+
+const STATUS_LABEL: Record<AppStatus, string> = {
+	stopped: "Stopped",
+	installing: "Installing dependencies…",
+	starting: "Starting…",
+	running: "Running",
+	error: "Error",
+};
+
+export function NodeAppViewer({ path, title }: Props) {
+	const [status, setStatus] = useState<AppStatus>("stopped");
+	const [port, setPort] = useState<number | null>(null);
+	const [logs, setLogs] = useState<string[]>([]);
+	const [error, setError] = useState<string | null>(null);
+	const [showLogs, setShowLogs] = useState(false);
+	const [iframeKey, setIframeKey] = useState(0);
+	const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+	const logsEndRef = useRef<HTMLDivElement>(null);
+
+	// Proxy URL — all traffic flows through wiki-viewer (works remotely)
+	const proxyUrl = `/api/app-proxy/${path}/`;
+
+	const stopPolling = () => {
+		if (pollRef.current) {
+			clearInterval(pollRef.current);
+			pollRef.current = null;
+		}
+	};
+
+	const fetchStatus = useCallback(async () => {
+		try {
+			const res = await fetch(`/api/wiki/app?path=${encodeURIComponent(path)}`);
+			if (!res.ok) return;
+			const data: StatusResponse = await res.json();
+			setStatus(data.status);
+			setLogs(data.logs ?? []);
+			if (data.port) setPort(data.port);
+			if (data.error) setError(data.error);
+			if (data.status === "running" || data.status === "stopped" || data.status === "error") {
+				stopPolling();
+			}
+		} catch {}
+	}, [path]);
+
+	// Poll while in transient states
+	useEffect(() => {
+		if (status === "installing" || status === "starting") {
+			if (!pollRef.current) {
+				pollRef.current = setInterval(fetchStatus, 800);
+			}
+		} else {
+			stopPolling();
+		}
+		return stopPolling;
+	}, [status, fetchStatus]);
+
+	// Auto-scroll logs
+	useEffect(() => {
+		logsEndRef.current?.scrollIntoView({ behavior: "smooth" });
+	}, [logs]);
+
+	// Fetch current status on mount (app may already be running)
+	useEffect(() => {
+		fetchStatus();
+	}, [fetchStatus]);
+
+	const handleLaunch = async () => {
+		setError(null);
+		setLogs([]);
+		setStatus("starting");
+		try {
+			const res = await fetch("/api/wiki/app", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ path }),
+			});
+			const data: { port?: number; error?: string } = await res.json();
+			if (!res.ok || data.error) {
+				setStatus("error");
+				setError(data.error ?? "Failed to start");
+				return;
+			}
+			if (data.port) setPort(data.port);
+			// Start polling for readiness
+			await fetchStatus();
+		} catch (e) {
+			setStatus("error");
+			setError(String(e));
+		}
+	};
+
+	const handleStop = async () => {
+		await fetch("/api/wiki/app", {
+			method: "DELETE",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ path }),
+		});
+		setStatus("stopped");
+		setPort(null);
+	};
+
+	const handleRestart = async () => {
+		await handleStop();
+		await handleLaunch();
+		setIframeKey((k) => k + 1);
+	};
+
+	const isTransient = status === "installing" || status === "starting";
+
+	return (
+		<div className="flex-1 flex flex-col overflow-hidden">
+			<ViewerToolbar path={path} badge="Node app">
+				{status === "running" && (
+					<>
+						<Button
+							variant="ghost"
+							size="sm"
+							className="h-7 gap-1.5 text-xs"
+							onClick={() => setIframeKey((k) => k + 1)}
+						>
+							<RefreshCw className="h-3.5 w-3.5" />
+							Refresh
+						</Button>
+						<Button
+							variant="ghost"
+							size="sm"
+							className="h-7 gap-1.5 text-xs"
+							onClick={() => window.open(proxyUrl, "_blank")}
+						>
+							<ExternalLink className="h-3.5 w-3.5" />
+							Open in new tab
+						</Button>
+						<Button
+							variant="ghost"
+							size="sm"
+							className="h-7 gap-1.5 text-xs"
+							onClick={handleRestart}
+						>
+							<RefreshCw className="h-3.5 w-3.5" />
+							Restart
+						</Button>
+						<Button
+							variant="ghost"
+							size="sm"
+							className="h-7 gap-1.5 text-xs text-destructive hover:text-destructive"
+							onClick={handleStop}
+						>
+							<Square className="h-3.5 w-3.5" />
+							Stop
+						</Button>
+					</>
+				)}
+				<Button
+					variant="ghost"
+					size="sm"
+					className="h-7 gap-1.5 text-xs"
+					onClick={() => setShowLogs((v) => !v)}
+				>
+					<Terminal className="h-3.5 w-3.5" />
+					Logs
+				</Button>
+			</ViewerToolbar>
+
+			{/* Logs panel */}
+			{showLogs && (
+				<div className="border-b bg-black/90 text-green-400 font-mono text-xs h-40 overflow-auto p-2 shrink-0">
+					{logs.length === 0 ? (
+						<span className="text-muted-foreground">No output yet.</span>
+					) : (
+						logs.map((l, i) => (
+							// biome-ignore lint/suspicious/noArrayIndexKey: log lines are append-only
+							<div key={i} className="whitespace-pre-wrap leading-5">
+								{l}
+							</div>
+						))
+					)}
+					<div ref={logsEndRef} />
+				</div>
+			)}
+
+			{/* Main content */}
+			<div className="flex-1 flex flex-col overflow-hidden">
+				{status === "stopped" && (
+					<div className="flex-1 flex flex-col items-center justify-center gap-4">
+						<div className="text-center space-y-1">
+							<p className="text-sm font-medium">{title}</p>
+							<p className="text-xs text-muted-foreground">
+								Node.js app — will be started on a local port
+							</p>
+						</div>
+						<Button onClick={handleLaunch} className="gap-2">
+							<Play className="h-4 w-4" />
+							Launch app
+						</Button>
+					</div>
+				)}
+
+				{isTransient && (
+					<div className="flex-1 flex flex-col items-center justify-center gap-3">
+						<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+						<p className="text-sm text-muted-foreground">
+							{STATUS_LABEL[status]}
+						</p>
+						{port && (
+							<p className="text-xs text-muted-foreground/60">
+								port {port}
+							</p>
+						)}
+					</div>
+				)}
+
+				{status === "error" && (
+					<div className="flex-1 flex flex-col items-center justify-center gap-4 p-6">
+						<AlertCircle className="h-8 w-8 text-destructive" />
+						<div className="text-center space-y-1 max-w-md">
+							<p className="text-sm font-medium text-destructive">
+								Failed to start app
+							</p>
+							<p className="text-xs text-muted-foreground break-words">
+								{error ?? "Unknown error"}
+							</p>
+						</div>
+						<Button onClick={handleLaunch} variant="outline" className="gap-2">
+							<RefreshCw className="h-4 w-4" />
+							Try again
+						</Button>
+					</div>
+				)}
+
+				{status === "running" && (
+					<iframe
+						key={iframeKey}
+						src={proxyUrl}
+						className="flex-1 w-full border-0 bg-card"
+						title={title}
+						sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-top-navigation-by-user-activation"
+					/>
+				)}
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,370 @@
+"use client";
+
+import { toHtml } from "hast-util-to-html";
+import { common, createLowlight } from "lowlight";
+import { AlertCircle, Check, Copy, Download, ExternalLink } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
+import { Button } from "@/components/ui/button";
+import { markdownToHtml } from "@/lib/markdown/to-html";
+
+interface NotebookViewerProps {
+	path: string;
+	title: string;
+}
+
+// Minimal nbformat v4 typing — only what we render.
+type StringOrLines = string | string[];
+
+interface NotebookOutputBase {
+	output_type: string;
+}
+interface StreamOutput extends NotebookOutputBase {
+	output_type: "stream";
+	name: "stdout" | "stderr";
+	text: StringOrLines;
+}
+interface DataOutput extends NotebookOutputBase {
+	output_type: "execute_result" | "display_data";
+	execution_count?: number | null;
+	data: Record<string, StringOrLines>;
+}
+interface ErrorOutput extends NotebookOutputBase {
+	output_type: "error";
+	ename: string;
+	evalue: string;
+	traceback: string[];
+}
+type NotebookOutput = StreamOutput | DataOutput | ErrorOutput;
+
+interface NotebookCellBase {
+	cell_type: "code" | "markdown" | "raw";
+	source: StringOrLines;
+	metadata?: Record<string, unknown>;
+}
+interface CodeCell extends NotebookCellBase {
+	cell_type: "code";
+	execution_count?: number | null;
+	outputs?: NotebookOutput[];
+}
+interface MarkdownCell extends NotebookCellBase {
+	cell_type: "markdown";
+}
+interface RawCell extends NotebookCellBase {
+	cell_type: "raw";
+}
+type NotebookCell = CodeCell | MarkdownCell | RawCell;
+
+interface Notebook {
+	cells?: NotebookCell[];
+	metadata?: {
+		kernelspec?: { name?: string; display_name?: string };
+		language_info?: { name?: string };
+	};
+}
+
+const lowlight = createLowlight(common);
+
+function joinSource(s: StringOrLines): string {
+	return Array.isArray(s) ? s.join("") : (s ?? "");
+}
+
+// Strip ANSI escape sequences from stream output / tracebacks.
+// Pure literal regex over control-char range — terse, no eval.
+const ANSI_RE = /\x1b\[[0-9;]*[A-Za-z]/g;
+function stripAnsi(s: string): string {
+	return s.replace(ANSI_RE, "");
+}
+
+function highlightCode(code: string, language: string): string {
+	try {
+		const tree = language
+			? lowlight.highlight(language, code)
+			: lowlight.highlightAuto(code);
+		return toHtml(tree);
+	} catch {
+		return code
+			.replace(/&/g, "&amp;")
+			.replace(/</g, "&lt;")
+			.replace(/>/g, "&gt;");
+	}
+}
+
+function CellOutput({ output }: { output: NotebookOutput }) {
+	if (output.output_type === "stream") {
+		const text = stripAnsi(joinSource(output.text));
+		const isErr = output.name === "stderr";
+		return (
+			<pre
+				className={`whitespace-pre-wrap font-mono text-[12.5px] leading-relaxed px-4 py-3 rounded-md ${
+					isErr
+						? "bg-[rgba(139,46,62,0.06)] text-[#8B2E3E]"
+						: "bg-[#F5EEDC] text-[#2A221B]"
+				}`}
+			>
+				{text}
+			</pre>
+		);
+	}
+
+	if (output.output_type === "error") {
+		const tb = output.traceback.map(stripAnsi).join("\n");
+		return (
+			<pre className="whitespace-pre-wrap font-mono text-[12.5px] leading-relaxed px-4 py-3 rounded-md bg-[rgba(139,46,62,0.08)] text-[#8B2E3E] border border-[rgba(139,46,62,0.18)]">
+				<span className="font-semibold">
+					{output.ename}: {output.evalue}
+				</span>
+				{tb ? `\n\n${tb}` : ""}
+			</pre>
+		);
+	}
+
+	// execute_result | display_data — pick best MIME
+	const data = output.data || {};
+	if (data["image/png"]) {
+		const src = `data:image/png;base64,${joinSource(data["image/png"]).replace(/\s/g, "")}`;
+		return (
+			<img
+				src={src}
+				alt="output"
+				className="max-w-full rounded-md bg-card p-2"
+			/>
+		);
+	}
+	if (data["image/jpeg"]) {
+		const src = `data:image/jpeg;base64,${joinSource(data["image/jpeg"]).replace(/\s/g, "")}`;
+		return (
+			<img
+				src={src}
+				alt="output"
+				className="max-w-full rounded-md bg-card p-2"
+			/>
+		);
+	}
+	if (data["image/svg+xml"]) {
+		const svg = joinSource(data["image/svg+xml"]);
+		return (
+			<div
+				className="max-w-full rounded-md bg-card p-2 overflow-auto"
+				dangerouslySetInnerHTML={{ __html: svg }}
+			/>
+		);
+	}
+	if (data["text/html"]) {
+		// Sandbox arbitrary HTML (pandas, plotly) so scripts can't escape.
+		const html = joinSource(data["text/html"]);
+		return (
+			<iframe
+				srcDoc={`<!doctype html><html><head><base target="_blank"><style>body{margin:0;padding:8px;font-family:-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;background:#FFF9E9;color:#2A221B;font-size:13px}table{border-collapse:collapse}th,td{border:1px solid #D4C4B0;padding:4px 8px;text-align:left}thead{background:#EFE5CC}</style></head><body>${html}</body></html>`}
+				sandbox="allow-scripts"
+				className="w-full bg-[#FFF9E9] rounded-md border border-[#E8DDC5]"
+				style={{ height: 360 }}
+			/>
+		);
+	}
+	if (data["text/plain"]) {
+		return (
+			<pre className="whitespace-pre-wrap font-mono text-[12.5px] leading-relaxed px-4 py-3 rounded-md bg-[#F5EEDC] text-[#2A221B]">
+				{stripAnsi(joinSource(data["text/plain"]))}
+			</pre>
+		);
+	}
+	return null;
+}
+
+function CodeCellView({
+	cell,
+	language,
+}: {
+	cell: CodeCell;
+	language: string;
+}) {
+	const source = joinSource(cell.source);
+	const html = useMemo(
+		() => highlightCode(source, language),
+		[source, language],
+	);
+	const count = cell.execution_count ?? " ";
+	const hasOutputs = (cell.outputs?.length ?? 0) > 0;
+
+	return (
+		<div className="grid grid-cols-[60px_1fr] gap-3 mb-5">
+			<div className="text-right pt-3 select-none font-mono text-[11px] text-[#8B5E3C]">
+				In&nbsp;[{count}]:
+			</div>
+			<div>
+				<pre className="whitespace-pre overflow-x-auto font-mono text-[13px] leading-relaxed px-4 py-3 rounded-md bg-[#FFF9E9] border border-[#E8DDC5] text-[#2A221B]">
+					<code dangerouslySetInnerHTML={{ __html: html }} />
+				</pre>
+
+				{hasOutputs && (
+					<div className="mt-2 grid grid-cols-[60px_1fr] gap-3">
+						<div className="text-right pt-3 select-none font-mono text-[11px] text-[#8B2E3E]">
+							Out[{count}]:
+						</div>
+						<div className="space-y-2">
+							{cell.outputs?.map((output, i) => (
+								<CellOutput key={i} output={output} />
+							))}
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function MarkdownCellView({ cell }: { cell: MarkdownCell }) {
+	const [html, setHtml] = useState<string>("");
+	useEffect(() => {
+		let cancelled = false;
+		void markdownToHtml(joinSource(cell.source)).then((h) => {
+			if (!cancelled) setHtml(h);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [cell.source]);
+	return (
+		<div
+			className="prose prose-sm max-w-none mb-5 px-1 [&_h1]:font-serif [&_h2]:font-serif [&_h3]:font-serif [&_a]:text-[#8B5E3C] [&_a:hover]:underline [&_code]:bg-[#F5EEDC] [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[#8B2E3E]"
+			dangerouslySetInnerHTML={{ __html: html }}
+		/>
+	);
+}
+
+function RawCellView({ cell }: { cell: RawCell }) {
+	return (
+		<pre className="whitespace-pre-wrap font-mono text-[12.5px] leading-relaxed px-4 py-3 rounded-md bg-[#F5EEDC] text-[#2A221B] mb-5">
+			{joinSource(cell.source)}
+		</pre>
+	);
+}
+
+export function NotebookViewer({ path }: NotebookViewerProps) {
+	const [notebook, setNotebook] = useState<Notebook | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [copied, setCopied] = useState(false);
+
+	const assetUrl = `/api/assets/${path}`;
+	const filename = path.split("/").pop() || path;
+
+	const fetchNotebook = useCallback(async () => {
+		setLoading(true);
+		setError(null);
+		try {
+			const res = await fetch(assetUrl);
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
+			const json = (await res.json()) as Notebook;
+			setNotebook(json);
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Failed to load notebook");
+		} finally {
+			setLoading(false);
+		}
+	}, [assetUrl]);
+
+	useEffect(() => {
+		void fetchNotebook();
+	}, [fetchNotebook]);
+
+	const language =
+		notebook?.metadata?.language_info?.name ||
+		notebook?.metadata?.kernelspec?.name ||
+		"python";
+
+	const cellCount = notebook?.cells?.length ?? 0;
+	const codeCellCount =
+		notebook?.cells?.filter((c) => c.cell_type === "code").length ?? 0;
+	const hasAnyOutputs =
+		notebook?.cells?.some(
+			(c) => c.cell_type === "code" && (c.outputs?.length ?? 0) > 0,
+		) ?? false;
+
+	const copyJupyterCommand = () => {
+		navigator.clipboard.writeText(`jupyter lab ${path}`);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2000);
+	};
+
+	return (
+		<div className="flex-1 flex flex-col overflow-hidden">
+			<ViewerToolbar
+				path={path}
+				badge="IPYNB"
+				sublabel={`${cellCount} cells · ${codeCellCount} code · ${language}`}
+			>
+				<Button
+					variant="ghost"
+					size="sm"
+					className="h-7 gap-1.5 text-xs"
+					onClick={copyJupyterCommand}
+					title="Copy: jupyter lab <path>"
+				>
+					{copied ? (
+						<Check className="h-3.5 w-3.5 text-green-500" />
+					) : (
+						<Copy className="h-3.5 w-3.5" />
+					)}
+					{copied ? "Copied" : "Copy run cmd"}
+				</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();
+					}}
+				>
+					<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 JSON
+				</Button>
+			</ViewerToolbar>
+
+			<div className="flex-1 overflow-auto bg-[#F5EEDC]">
+				{loading ? (
+					<div className="flex items-center justify-center h-full text-[#7A6B5D] text-sm">
+						Loading notebook…
+					</div>
+				) : error ? (
+					<div className="flex items-center justify-center h-full text-[#8B2E3E] text-sm gap-2">
+						<AlertCircle className="h-4 w-4" /> {error}
+					</div>
+				) : notebook ? (
+					<div className="max-w-[1100px] mx-auto py-8 px-6">
+						{!hasAnyOutputs && codeCellCount > 0 && (
+							<div className="mb-6 rounded-md border border-[#E8DDC5] bg-[#FFF9E9] px-4 py-3 text-[13px] text-[#7A6B5D]">
+								<span className="font-semibold text-[#0c0a09]">
+									This notebook hasn&apos;t been run yet.
+								</span>{" "}
+								Code and markdown cells display below; outputs appear once the
+								author runs the notebook in Jupyter (or you do, then re-save).
+							</div>
+						)}
+
+						{notebook.cells?.map((cell, i) => {
+							if (cell.cell_type === "markdown")
+								return <MarkdownCellView key={i} cell={cell} />;
+							if (cell.cell_type === "raw")
+								return <RawCellView key={i} cell={cell} />;
+							return <CodeCellView key={i} cell={cell} language={language} />;
+						})}
+					</div>
+				) : null}
+			</div>
+		</div>
+	);
+}