wiki-viewer 1.14.1 → 2.0.0

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

@@ -1,328 +0,0 @@
-"use client";
-
-import {
-	AlertCircle,
-	ChevronDown,
-	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 {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import type { AppStatus } from "@/lib/app-runner";
-import { wsFetch } from "@/lib/workspace-client";
-
-interface Props {
-	path: string;
-	title: string;
-}
-
-interface StatusResponse {
-	status: AppStatus;
-	port?: number;
-	error?: string;
-	logs: string[];
-	scripts?: string[];
-	defaultScript?: string | null;
-}
-
-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 [scripts, setScripts] = useState<string[]>([]);
-	const [defaultScript, setDefaultScript] = useState<string | null>(null);
-	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 wsFetch(`/api/wiki/app?path=${encodeURIComponent(path)}`);
-			if (!res.ok) return;
-			const data: StatusResponse = await res.json();
-			setStatus(data.status);
-			setLogs(data.logs ?? []);
-			if (data.scripts) setScripts(data.scripts);
-			if (data.defaultScript !== undefined) setDefaultScript(data.defaultScript);
-			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 (script?: string) => {
-		setError(null);
-		setLogs([]);
-		setStatus("starting");
-		try {
-			const res = await wsFetch("/api/wiki/app", {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ path, script }),
-			});
-			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 wsFetch("/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";
-	// Scripts other than the default — offered in the combo dropdown.
-	const altScripts = scripts.filter((s) => s !== defaultScript);
-
-	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>
-						<div className="inline-flex items-stretch overflow-hidden rounded-full bg-primary text-primary-foreground shadow-e-1">
-							<button
-								type="button"
-								onClick={() => handleLaunch()}
-								className="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors hover:bg-primary-foreground/10 focus-visible:outline-none"
-							>
-								<Play className="h-4 w-4" />
-								Launch app
-								{defaultScript && (
-									<span className="opacity-70">({defaultScript})</span>
-								)}
-							</button>
-							{altScripts.length > 0 && (
-								<DropdownMenu>
-									<DropdownMenuTrigger asChild>
-										<button
-											type="button"
-											className="inline-flex items-center justify-center border-l border-l-primary-foreground/20 px-2 transition-colors hover:bg-primary-foreground/10 focus-visible:outline-none"
-											aria-label="Choose script to launch"
-										>
-											<ChevronDown className="h-4 w-4" />
-										</button>
-									</DropdownMenuTrigger>
-									<DropdownMenuContent align="end">
-										<DropdownMenuLabel>Run script</DropdownMenuLabel>
-										<DropdownMenuSeparator />
-										{scripts.map((s) => (
-											<DropdownMenuItem
-												key={s}
-												onSelect={() => handleLaunch(s)}
-												className="gap-2 font-mono text-xs"
-										>
-												<Play className="h-3.5 w-3.5" />
-												{s}
-												{s === defaultScript && (
-													<span className="ml-auto text-[10px] text-muted-foreground">
-														default
-													</span>
-												)}
-											</DropdownMenuItem>
-										))}
-									</DropdownMenuContent>
-								</DropdownMenu>
-							)}
-						</div>
-					</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

@@ -1,371 +0,0 @@
-"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";
-import { withWs, wsFetch } from "@/lib/workspace-client";
-
-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 = withWs(`/api/assets/${path}`);
-	const filename = path.split("/").pop() || path;
-
-	const fetchNotebook = useCallback(async () => {
-		setLoading(true);
-		setError(null);
-		try {
-			const res = await wsFetch(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>
-	);
-}