wiki-viewer 1.8.2 → 1.8.3

package/.next/standalone/src/components/editor/editor.tsx

@@ -2,11 +2,12 @@
 
 import { cellAround, isInTable } from "@tiptap/pm/tables";
 import { EditorContent, useEditor } from "@tiptap/react";
-import { Code2, FilePlus, Loader2, Sparkles } from "lucide-react";
+import { AlertCircle, Check, Code2, FilePlus, Loader2, Sparkles } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { findNodeByPath } from "@/lib/cabinets/tree";
 import { markdownToHtml } from "@/lib/markdown/to-html";
 import { htmlToMarkdown } from "@/lib/markdown/to-markdown";
+import { parseFrontmatter } from "@/lib/markdown/parse-frontmatter";
 import { useAIPanelStore } from "@/stores/ai-panel-store";
 import { useEditorStore } from "@/stores/editor-store";
 import { useTreeStore } from "@/stores/tree-store";
@@ -16,6 +17,7 @@ import type { TreeNode } from "@/types";
 import { useProofStore } from "@/stores/proof-store";
 import { captureSuggestion } from "@/lib/proof/suggest-capture";
 import { wsFetch, withWs } from "@/lib/workspace-client";
+import { showError } from "@/lib/toast";
 import { EditorBubbleMenu } from "./bubble-menu";
 import { EditorToolbar } from "./editor-toolbar";
 import { editorExtensions } from "./extensions";
@@ -26,12 +28,15 @@ import { ProofSpanPopover } from "./proof-span-popover";
 import { SuggestionCard } from "./suggestion-card";
 import { SuggestEditPopover } from "./suggest-edit-popover";
 import { SlashCommands } from "./slash-commands";
+import { DocumentOutline } from "./document-outline";
+import { BacklinksPanel } from "./backlinks-panel";
 import { TableMenu } from "./table-menu";
 import {
 	useWikiLinkCreate,
 	type WikiCreateResult,
 } from "./wiki-link-create-dialog";
 import { WikiLinkPicker } from "./wiki-link-picker";
+import { FrontmatterHeader } from "@/components/wiki/frontmatter-header";
 
 async function uploadFile(
 	pagePath: string,
@@ -44,10 +49,14 @@ async function uploadFile(
 			method: "POST",
 			body: formData,
 		});
-		if (!res.ok) return null;
+		if (!res.ok) {
+			showError(`Upload failed: ${file.name}`);
+			return null;
+		}
 		const data = await res.json();
 		return data.url;
 	} catch {
+		showError(`Upload failed: ${file.name}`);
 		return null;
 	}
 }
@@ -136,7 +145,13 @@ function resolveInternalLink(
 	return findPageBySlug(slug, currentPath, nodes);
 }
 
-export function KBEditor() {
+type KBEditorMode = "viewing" | "editing" | "suggesting";
+
+interface KBEditorProps {
+	mode?: KBEditorMode;
+}
+
+export function KBEditor({ mode }: KBEditorProps = {}) {
 	const {
 		currentPath,
 		content,
@@ -148,9 +163,18 @@ export function KBEditor() {
 		editMode,
 		setEditMode,
 	} = useEditorStore();
+	const effectiveMode = mode ?? editMode;
+	const isViewing = effectiveMode === "viewing";
+	const isSuggesting = effectiveMode === "suggesting";
+	const parsedViewingContent = useMemo(
+		() => (isViewing ? parseFrontmatter(content) : { data: {}, body: content }),
+		[content, isViewing],
+	);
 	const nodes = useTreeStore((s) => s.nodes);
 	const editorMaxW = useViewWidthStore((s) => VIEW_WIDTH_CSS[s.width]);
-	const isRtl = frontmatter?.dir === "rtl";
+	const isRtl = isViewing
+		? parsedViewingContent.data.dir === "rtl"
+		: frontmatter?.dir === "rtl";
 	const { open: openAI, clearMessages } = useAIPanelStore();
 	const { open: openWikiCreate, Dialog: WikiCreateDialog } =
 		useWikiLinkCreate();
@@ -161,6 +185,8 @@ export function KBEditor() {
 	openWikiCreateRef.current = openWikiCreate;
 
 	const isLoadingRef = useRef(false);
+	const isViewingRef = useRef(isViewing);
+	isViewingRef.current = isViewing;
 	const [sourceMode, setSourceMode] = useState(false);
 	const [sourceText, setSourceText] = useState("");
 	// Reset the tab to "page" whenever the path changes — opening a new folder
@@ -193,6 +219,7 @@ export function KBEditor() {
 	useEffect(() => {
 		if (typeof window === "undefined") return;
 		if (!currentPath) return;
+		if (isViewing) return;
 		if (!/\.(md|markdown)$/i.test(currentPath)) return;
 
 		const path = currentPath;
@@ -221,7 +248,7 @@ export function KBEditor() {
 			document.removeEventListener("visibilitychange", onHidden);
 			ping("close");
 		};
-	}, [currentPath]);
+	}, [currentPath, isViewing]);
 
 	// Subscribe to chokidar SSE: when current file changes on disk, reload sidecar.
 	useEffect(() => {
@@ -243,6 +270,9 @@ export function KBEditor() {
 						.getState()
 						.loadSnapshot(activePath)
 						.then(() => useProofStore.getState().loadSidecar(activePath));
+					if (isViewingRef.current) {
+						void useEditorStore.getState().loadPage(activePath);
+					}
 				}
 			} catch {
 				// ignore malformed events
@@ -400,6 +430,7 @@ export function KBEditor() {
 
 	const flushSuggestions = useCallback(async () => {
 		if (flushingRef.current) return;
+		if (isViewingRef.current) return;
 		if (useEditorStore.getState().editMode !== "suggesting") return;
 		if (!suggestDirtyRef.current) return;
 		const ed = editorRef.current;
@@ -527,7 +558,7 @@ export function KBEditor() {
 
 	const handleUpdate = useCallback(
 		({ editor }: { editor: ReturnType<typeof useEditor> }) => {
-			if (isLoadingRef.current || !editor) return;
+			if (isLoadingRef.current || isViewingRef.current || !editor) return;
 			// In suggesting mode, mark the edit dirty so the next block-change or
 			// blur flushes it into suggestions. Still push content to the store so
 			// the store guard (no autosave in suggesting mode) keeps it in sync.
@@ -544,6 +575,7 @@ export function KBEditor() {
 	const editor = useEditor({
 		extensions: editorExtensions,
 		content: "",
+		editable: !isViewing,
 		onUpdate: handleUpdate,
 		onBlur: () => {
 			void flushSuggestions();
@@ -622,6 +654,8 @@ export function KBEditor() {
 									?.scrollIntoView({ behavior: "smooth" });
 							}, 200);
 						}
+					} else if (isViewingRef.current) {
+						return true;
 					} else {
 						void openWikiCreateRef.current(slug).then((result) => {
 							if (result.ok) {
@@ -667,6 +701,7 @@ export function KBEditor() {
 				return true;
 			},
 			handlePaste: (_view, event) => {
+				if (isViewingRef.current) return false;
 				const files = event.clipboardData?.files;
 				const pagePath = useEditorStore.getState().currentPath;
 
@@ -696,6 +731,7 @@ export function KBEditor() {
 				return false;
 			},
 			handleDrop: (_view, event) => {
+				if (isViewingRef.current) return false;
 				const files = event.dataTransfer?.files;
 				if (!files || files.length === 0) return false;
 
@@ -731,6 +767,11 @@ export function KBEditor() {
 	const editorRef = useRef<typeof editor>(editor);
 	editorRef.current = editor;
 
+	useEffect(() => {
+		editor?.setEditable(!isViewing);
+		if (isViewing) setSourceMode(false);
+	}, [editor, isViewing]);
+
 	// When content updates from store (after loadPage), set it in editor
 	const prevPathRef = useRef<string | null>(null);
 	const renderedKeyRef = useRef<string | null>(null);
@@ -750,7 +791,8 @@ export function KBEditor() {
 		if (isLoading && content === "") return;
 		// Dedupe identical (path, content) renders — e.g. cached paint followed
 		// by a fresh fetch that returned the same markdown.
-		const key = `${currentPath} ${content}`;
+		const renderMarkdown = parsedViewingContent.body;
+		const key = `${currentPath} ${renderMarkdown}`;
 		if (renderedKeyRef.current === key) {
 			if (renderedPath !== currentPath) setRenderedPath(currentPath);
 			return;
@@ -759,7 +801,10 @@ export function KBEditor() {
 
 		const setContent = async () => {
 			isLoadingRef.current = true;
-			const html = await markdownToHtml(content, currentPath);
+			const html = await markdownToHtml(
+				renderMarkdown,
+				isViewing ? { pagePath: currentPath, sanitize: true } : currentPath,
+			);
 			editor.commands.setContent(html);
 			renderedKeyRef.current = key;
 			setRenderedPath(currentPath);
@@ -769,7 +814,18 @@ export function KBEditor() {
 		};
 
 		setContent();
-	}, [editor, content, currentPath, isLoading, renderedPath]);
+	}, [editor, content, currentPath, isLoading, renderedPath, parsedViewingContent.body, isViewing]);
+
+	useEffect(() => {
+		if (!isViewing || !renderedPath) return;
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		container
+			.querySelectorAll<HTMLInputElement>('input[type="checkbox"]')
+			.forEach((input) => {
+				input.disabled = true;
+			});
+	}, [isViewing, renderedPath, parsedViewingContent.body]);
 
 	const showLoadingOverlay =
 		currentPath !== null && (isLoading || renderedPath !== currentPath);
@@ -915,22 +971,24 @@ export function KBEditor() {
 					</div>
 				) : (
 					<>
-						<div className="flex items-center min-w-0">
-							<div className="flex-1 min-w-0">
-								{!sourceMode && <EditorToolbar editor={editor} />}
+						{!isViewing && (
+							<div className="flex items-center min-w-0">
+								<div className="flex-1 min-w-0">
+									{!sourceMode && <EditorToolbar editor={editor} />}
+								</div>
+								<button
+									onClick={toggleSourceMode}
+									className={`flex items-center gap-1.5 px-3 py-1 mr-2 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 ? "Preview" : "Markdown"}
+								</button>
 							</div>
-							<button
-								onClick={toggleSourceMode}
-								className={`flex items-center gap-1.5 px-3 py-1 mr-2 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 ? "Preview" : "Markdown"}
-							</button>
-						</div>
+						)}
 
 						{sourceMode ? (
 							<div
@@ -946,15 +1004,16 @@ export function KBEditor() {
 							</div>
 						) : (
 							<div className="flex-1 relative" dir={isRtl ? "rtl" : undefined}>
-								{editMode === "suggesting" && (
+								{isSuggesting && (
 									<div className="absolute top-0 inset-x-0 z-20 flex items-center justify-center gap-2 px-3 py-1 bg-primary/10 border-b border-primary/20 text-[11px] text-primary pointer-events-none">
 										Suggesting mode · your edits become suggestions for review
 									</div>
 								)}
+								<DocumentOutline editor={editor} scrollContainerRef={scrollContainerRef} />
 								<div
 									ref={scrollContainerRef}
 									className={`absolute inset-0 overflow-y-auto ${
-										editMode === "suggesting" ? "pt-7" : ""
+										isSuggesting ? "pt-7" : ""
 								}`}
 									style={{ ["--editor-max-w" as string]: editorMaxW }}
 									data-editor-scroll
@@ -1043,7 +1102,17 @@ export function KBEditor() {
 										/>
 									)}
 
+									{isViewing && Object.keys(parsedViewingContent.data).length > 0 && (
+										<div className="max-w-[var(--editor-max-w,48rem)] mx-auto px-4 sm:px-8 pt-6">
+											<FrontmatterHeader
+												data={parsedViewingContent.data as Record<string, never>}
+											/>
+										</div>
+									)}
 									<EditorContent editor={editor} />
+									{currentPath && /\.(md|markdown)$/i.test(currentPath) && (
+										<BacklinksPanel currentPath={currentPath} />
+									)}
 									{/* Proof-span hover delegation */}
 									<div
 										aria-hidden="true"
@@ -1071,17 +1140,21 @@ export function KBEditor() {
 											}}
 										/>
 									)}
-									<EditorBubbleMenu
-										editor={editor}
-										onSuggestEdit={openSuggestForSelection}
-										onComment={openCommentForSelection}
-									/>
-									<TableMenu editor={editor} />
-									<SlashCommands editor={editor} />
-									<WikiLinkPicker
-										editor={editor}
-										onCreateRequest={openWikiCreateRef.current}
-									/>
+									{!isViewing && (
+										<>
+											<EditorBubbleMenu
+												editor={editor}
+												onSuggestEdit={openSuggestForSelection}
+												onComment={openCommentForSelection}
+											/>
+											<TableMenu editor={editor} />
+											<SlashCommands editor={editor} />
+											<WikiLinkPicker
+												editor={editor}
+												onCreateRequest={openWikiCreateRef.current}
+											/>
+										</>
+									)}
 
 									{/* AI Edit Prompt + slash hint */}
 									<div className="max-w-[var(--editor-max-w,48rem)] mx-auto px-8 pb-8 flex items-center gap-4">
@@ -1092,12 +1165,14 @@ export function KBEditor() {
 											<Sparkles className="h-3.5 w-3.5 group-hover:text-primary transition-colors" />
 											<span>Edit with AI</span>
 										</button>
-										<span className="text-[11px] text-muted-foreground/30 select-none">
-											<kbd className="rounded px-1 py-0.5 font-mono text-[10px] ring-1 ring-foreground/10">
-												/
-											</kbd>{" "}
-											for commands
-										</span>
+										{!isViewing && (
+											<span className="text-[11px] text-muted-foreground/30 select-none">
+												<kbd className="rounded px-1 py-0.5 font-mono text-[10px] ring-1 ring-foreground/10">
+													/
+												</kbd>{" "}
+												for commands
+											</span>
+										)}
 									</div>
 								</div>
 
@@ -1112,7 +1187,8 @@ export function KBEditor() {
 							</div>
 						)}
 
-						{/* Status bar */}
+						{!isViewing && (
+						/* Status bar */
 						<div className="flex items-center justify-between px-4 py-1 border-t border-border text-xs text-muted-foreground/60">
 							<span className="text-[10.5px] text-muted-foreground/30 select-none hidden sm:block">
 								<kbd className="rounded px-1 font-mono text-[9.5px] ring-1 ring-foreground/10">
@@ -1159,13 +1235,34 @@ export function KBEditor() {
 										Suggesting
 									</button>
 								</div>
-								<span>
-									{saveStatus === "saving" && "Saving..."}
-									{saveStatus === "saved" && "Saved"}
-									{saveStatus === "error" && "Save failed"}
+								<span
+									className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10.5px] transition-all duration-300 ${
+										saveStatus === "idle"
+											? "opacity-0 pointer-events-none"
+											: "opacity-100"
+									} ${
+										saveStatus === "saving"
+											? "bg-muted text-muted-foreground"
+											: saveStatus === "saved"
+												? "bg-green-500/10 text-green-600 dark:text-green-400"
+												: saveStatus === "error"
+													? "bg-destructive/10 text-destructive"
+													: ""
+									}`}
+								>
+									{saveStatus === "saving" && (
+										<><Loader2 className="h-2.5 w-2.5 animate-spin" />Saving…</>
+									)}
+									{saveStatus === "saved" && (
+										<><Check className="h-2.5 w-2.5" />Saved</>
+									)}
+									{saveStatus === "error" && (
+										<><AlertCircle className="h-2.5 w-2.5" />Save failed</>
+									)}
 								</span>
 							</div>
 						</div>
+						)}
 					</>
 				)}
 			</div>

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

@@ -2,6 +2,7 @@
 
 import {
 	AlertCircle,
+	ChevronDown,
 	ExternalLink,
 	Loader2,
 	Play,
@@ -12,6 +13,14 @@ import {
 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";
 
@@ -25,6 +34,8 @@ interface StatusResponse {
 	port?: number;
 	error?: string;
 	logs: string[];
+	scripts?: string[];
+	defaultScript?: string | null;
 }
 
 const STATUS_LABEL: Record<AppStatus, string> = {
@@ -42,6 +53,8 @@ export function NodeAppViewer({ path, title }: Props) {
 	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);
 
@@ -62,6 +75,8 @@ export function NodeAppViewer({ path, title }: Props) {
 			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") {
@@ -92,7 +107,7 @@ export function NodeAppViewer({ path, title }: Props) {
 		fetchStatus();
 	}, [fetchStatus]);
 
-	const handleLaunch = async () => {
+	const handleLaunch = async (script?: string) => {
 		setError(null);
 		setLogs([]);
 		setStatus("starting");
@@ -100,7 +115,7 @@ export function NodeAppViewer({ path, title }: Props) {
 			const res = await wsFetch("/api/wiki/app", {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ path }),
+				body: JSON.stringify({ path, script }),
 			});
 			const data: { port?: number; error?: string } = await res.json();
 			if (!res.ok || data.error) {
@@ -134,6 +149,8 @@ export function NodeAppViewer({ path, title }: Props) {
 	};
 
 	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">
@@ -216,10 +233,51 @@ export function NodeAppViewer({ path, title }: Props) {
 								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 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>
 				)}
 
@@ -248,7 +306,7 @@ export function NodeAppViewer({ path, title }: Props) {
 								{error ?? "Unknown error"}
 							</p>
 						</div>
-						<Button onClick={handleLaunch} variant="outline" className="gap-2">
+						<Button onClick={() => handleLaunch()} variant="outline" className="gap-2">
 							<RefreshCw className="h-4 w-4" />
 							Try again
 						</Button>