wiki-viewer 1.0.0 → 1.1.0

package/.next/standalone/src/app/page.tsx

@@ -2,10 +2,12 @@
 
 import {
 	AlertCircle,
+	Bot,
 	Check,
 	ChevronDown,
 	ChevronRight,
 	File,
+	FilePlus,
 	FileText,
 	Folder,
 	FolderOpen,
@@ -17,15 +19,16 @@ import {
 	PanelLeftClose,
 	PanelLeftOpen,
 	Pencil,
+	Plus,
 	RefreshCw,
+	Settings,
 	Terminal,
 	Trash2,
 	Upload,
 	X,
 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+
 import { ConfirmDialog } from "@/components/confirm-dialog";
 import { CsvViewer } from "@/components/editor/csv-viewer";
 import { KBEditor } from "@/components/editor/editor";
@@ -42,15 +45,27 @@ import { SourceViewer } from "@/components/editor/source-viewer";
 import { WebsiteViewer } from "@/components/editor/website-viewer";
 import { NodeAppViewer } from "@/components/editor/node-app-viewer";
 import { DirPicker } from "@/components/dir-picker";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { ThemeToggle } from "@/components/theme-toggle";
+import { AuthSettingsSheet } from "@/components/auth-settings-sheet";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { FrontmatterHeader } from "@/components/wiki/frontmatter-header";
+import { MarkdownPreview } from "@/components/wiki/markdown-preview";
 import { parseFrontmatter } from "@/lib/markdown/parse-frontmatter";
-import remarkWikilinks from "@/lib/markdown/remark-wikilinks";
+
 import { showError } from "@/lib/toast";
 import { cn } from "@/lib/utils";
+import { AIPanel } from "@/components/ai-panel/ai-panel";
+import { useAIPanelStore } from "@/stores/ai-panel-store";
 import { useEditorStore } from "@/stores/editor-store";
+import { useViewWidthStore, VIEW_WIDTH_CLASS } from "@/stores/view-width-store";
+import { ViewWidthToggle } from "@/components/view-width-toggle";
 import { useWikiSlugsStore } from "@/stores/wiki-slugs-store";
 
 interface TreeNode {
@@ -128,9 +143,21 @@ function viewerKindFor(
 	return "fallback";
 }
 
+const TEXT_EDITABLE_EXTS = new Set([
+	"txt", "md", "markdown", "json", "yaml", "yml", "toml", "csv", "tsv",
+	"xml", "html", "css", "js", "ts", "tsx", "jsx", "sh", "bash", "zsh",
+	"rb", "py", "go", "rs", "java", "c", "cpp", "h", "php", "swift", "kt",
+	"lua", "sql", "scss", "mmd", "mermaid", "ini", "env", "log", "conf",
+]);
+
 function isText(name: string) {
 	const kind = viewerKindFor(name, "file");
-	return kind === "editor" || kind === "text";
+	if (kind === "editor" || kind === "text") return true;
+	return TEXT_EDITABLE_EXTS.has(ext(name));
+}
+
+function isMarkdown(name: string) {
+	return ["md", "markdown"].includes(ext(name));
 }
 function isImage(name: string) {
 	return viewerKindFor(name, "file") === "image";
@@ -204,6 +231,15 @@ export default function Page() {
 
 	const editorCurrentPath = useEditorStore((s) => s.currentPath);
 
+	// Path captured from the URL at first render, before any effect can clear it.
+	// Restore reads from this ref (never the live URL) so URL sync can't break it.
+	const initialUrlPathRef = useRef<string | null>(
+		typeof window !== "undefined"
+			? new URLSearchParams(window.location.search).get("path")
+			: null,
+	);
+	const didRestoreRef = useRef(false);
+
 	const [roots, setRoots] = useState<TreeNode[]>([]);
 	const [rootLoaded, setRootLoaded] = useState(false);
 	const [rootLoading, setRootLoading] = useState(false);
@@ -219,6 +255,10 @@ export default function Page() {
 	const [newFolderName, setNewFolderName] = useState("");
 	const [folderError, setFolderError] = useState<string | null>(null);
 
+	const [newFileParent, setNewFileParent] = useState<string | null>(null);
+	const [newFileName, setNewFileName] = useState("");
+	const [fileCreateError, setFileCreateError] = useState<string | null>(null);
+
 	const [deletingPath, setDeletingPath] = useState<string | null>(null);
 	const [deletingIsDir, setDeletingIsDir] = useState(false);
 
@@ -230,6 +270,7 @@ export default function Page() {
 	const [appFullscreen, setAppFullscreen] = useState(false);
 	const [appKey, setAppKey] = useState(0);
 	const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+	const [settingsOpen, setSettingsOpen] = useState(false);
 	const [fileContent, setFileContent] = useState<string | null>(null);
 	const [fileLoading, setFileLoading] = useState(false);
 	const [editing, setEditing] = useState(false);
@@ -263,10 +304,58 @@ export default function Page() {
 			});
 	}, [rootLoaded]);
 
+	// Expand every ancestor folder of `p` so the file is visible in the tree.
+	// Best-effort: requires the root nodes to already be loaded.
+	const revealPath = useCallback(async (p: string) => {
+		const parts = p.split("/");
+		if (parts.length <= 1) return;
+
+		// Fetch every ancestor's children first. We must NOT apply them with one
+		// setRoots per level: those updaters run against the same stale `prev`
+		// snapshot, so a nested prefix isn't in the tree yet and updateNodes
+		// silently no-ops (only the top level ever matched). Collect all levels,
+		// then splice them in a single pass so each parent's children exist before
+		// the next level is inserted.
+		const levels: { prefix: string; children: TreeNode[] }[] = [];
+		let prefix = "";
+		for (let i = 0; i < parts.length - 1; i++) {
+			prefix = prefix ? `${prefix}/${parts[i]}` : parts[i];
+			levels.push({ prefix, children: await fetchDir(prefix) });
+		}
+
+		setRoots((prev) => {
+			let next = prev;
+			for (const { prefix: pfx, children } of levels) {
+				next = updateNodes(next, pfx, (n) => ({
+					...n,
+					children,
+					expanded: true,
+				}));
+			}
+			return next;
+		});
+	}, []);
+
 	const reloadDir = useCallback(async (dir: string) => {
 		const fresh = await fetchDir(dir);
 		if (dir === "") {
-			setRoots(fresh);
+			// Merge: keep expanded state + loaded children for nodes that still
+			// exist. A blind setRoots(fresh) would collapse the tree and wipe any
+			// expansion done by revealPath on reload (watcher fires this often).
+			setRoots((prev) => {
+				const prevByPath = new Map(prev.map((n) => [n.path, n]));
+				return fresh.map((n) => {
+					const old = prevByPath.get(n.path);
+					if (old && (old.type === "dir" || old.type === "app")) {
+						return {
+							...n,
+							expanded: old.expanded,
+							children: old.children,
+						};
+					}
+					return n;
+				});
+			});
 		} else {
 			setRoots((prev) =>
 				updateNodes(prev, dir, (n) => ({
@@ -313,7 +402,7 @@ export default function Page() {
 	const refreshViewer = useCallback(async () => {
 		if (!openFile) return;
 		const kind = viewerKindFor(openFile.name, openFile.nodeType);
-		if (!["editor", "text"].includes(kind)) return;
+		if (!["editor", "text"].includes(kind) && !isText(openFile.name)) return;
 		setFileLoading(true);
 		try {
 			const res = await fetch(
@@ -448,7 +537,7 @@ export default function Page() {
 		setSaveError(null);
 		setFileContent(null);
 		const kind = viewerKindFor(node.name, node.type);
-		if (!["editor", "text"].includes(kind)) return;
+		if (!["editor", "text"].includes(kind) && !isText(node.name)) return;
 		setFileLoading(true);
 		try {
 			const res = await fetch(
@@ -476,6 +565,46 @@ export default function Page() {
 		} as TreeNode);
 	}, [editorCurrentPath]);
 
+	// Persist the open file to the URL (?path=) so reloads restore it.
+	// replaceState avoids polluting history on every file switch.
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const url = new URL(window.location.href);
+		if (openFile) url.searchParams.set("path", openFile.path);
+		else url.searchParams.delete("path");
+		window.history.replaceState(null, "", url.toString());
+	}, [openFile]);
+
+	// Restore the open file from the URL once the root tree is loaded.
+	// Resolves node type from the parent dir listing (file vs app vs node-app).
+	// biome-ignore lint/correctness/useExhaustiveDependencies: openViewer is a hoisted stable fn; restore runs once
+	useEffect(() => {
+		if (didRestoreRef.current) return;
+		if (!rootLoaded) return;
+		const target = initialUrlPathRef.current;
+		if (!target) {
+			didRestoreRef.current = true;
+			return;
+		}
+		didRestoreRef.current = true;
+
+		void (async () => {
+			const parts = target.split("/");
+			const name = parts[parts.length - 1];
+			const parentDir = parts.slice(0, -1).join("/");
+			const siblings = await fetchDir(parentDir);
+			const match = siblings.find((s) => s.path === target);
+			if (!match) return; // file no longer exists; leave home view
+			await revealPath(target);
+			void openViewer({
+				path: target,
+				name,
+				type: match.type,
+				modifiedAt: match.modifiedAt,
+			} as TreeNode);
+		})();
+	}, [rootLoaded, revealPath]);
+
 	const handleChangeDir = async () => {
 		await fetch("/api/system/clear-root", { method: "POST" });
 		setOpenFile(null);
@@ -570,6 +699,39 @@ export default function Page() {
 		}
 	}
 
+	async function handleCreateFile() {
+		const raw = newFileName.trim();
+		if (!raw || newFileParent === null) return;
+		setFileCreateError(null);
+		const name = raw.includes(".") ? raw : `${raw}.md`;
+		const rel = newFileParent ? `${newFileParent}/${name}` : name;
+		const res = await fetch("/api/wiki/new-file", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ path: rel }),
+		});
+		if (res.ok) {
+			const parent = newFileParent;
+			setNewFileParent(null);
+			setNewFileName("");
+			await reloadDir(parent);
+			if (parent !== "") {
+				setRoots((prev) =>
+					updateNodes(prev, parent, (n) => ({ ...n, expanded: true })),
+				);
+			}
+			void openViewer({
+				path: rel,
+				name,
+				type: "file",
+				modifiedAt: new Date().toISOString(),
+			} as TreeNode);
+		} else {
+			const e: { error?: string } = await res.json();
+			setFileCreateError(e.error ?? "Failed");
+		}
+	}
+
 	async function handleDelete() {
 		if (!deletingPath) return;
 		await fetch("/api/wiki", {
@@ -652,6 +814,17 @@ export default function Page() {
 		? viewerKindFor(openFile.name, openFile.nodeType)
 		: null;
 
+	const viewWidth = useViewWidthStore((s) => s.width);
+	// Width toggle only meaningful for text-flow viewers (long prose lines).
+	const widthAwareViewer =
+		openFileViewerKind === null ||
+		openFileViewerKind === "editor" ||
+		openFileViewerKind === "text" ||
+		openFileViewerKind === "source" ||
+		openFileViewerKind === "notebook" ||
+		openFileViewerKind === "fallback";
+	const contentWidthClass = widthAwareViewer ? VIEW_WIDTH_CLASS[viewWidth] : "";
+
 	function renderNodes(nodes: TreeNode[], depth = 0): React.ReactNode {
 		return nodes.map((node) => (
 			<div key={node.path}>
@@ -735,6 +908,20 @@ export default function Page() {
 					>
 						{node.type === "dir" && (
 							<>
+								<Button
+									size="sm"
+									variant="ghost"
+									className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+									title="New file here (default .md)"
+									onClick={async () => {
+										if (!node.expanded) await toggleFolder(node);
+										setNewFileParent(node.path);
+										setNewFileName("");
+										setFileCreateError(null);
+									}}
+								>
+									<FilePlus className="h-3 w-3" />
+								</Button>
 								<Button
 									size="sm"
 									variant="ghost"
@@ -819,6 +1006,52 @@ export default function Page() {
 					</div>
 				)}
 
+				{newFileParent === node.path && node.type === "dir" && (
+					<div
+						className="flex items-center gap-1.5 px-2 py-1"
+						style={{ paddingLeft: `${(depth + 1) * 14 + 8}px` }}
+					>
+						<span className="w-3.5 shrink-0" />
+						<FileText className="h-4 w-4 shrink-0 text-accent" />
+						<input
+							autoFocus
+							className="flex-1 bg-transparent text-sm outline-none border-b border-border min-w-0"
+							placeholder="filename (default .md)"
+							value={newFileName}
+							onChange={(e) => setNewFileName(e.target.value)}
+							onKeyDown={(e) => {
+								if (e.key === "Enter") handleCreateFile();
+								if (e.key === "Escape") {
+									setNewFileParent(null);
+									setNewFileName("");
+								}
+							}}
+						/>
+						{fileCreateError && (
+							<span className="text-xs text-destructive">{fileCreateError}</span>
+						)}
+						<Button
+							size="sm"
+							variant="ghost"
+							className="h-6 w-6 p-0"
+							onClick={handleCreateFile}
+						>
+							<Check className="h-3 w-3" />
+						</Button>
+						<Button
+							size="sm"
+							variant="ghost"
+							className="h-6 w-6 p-0"
+							onClick={() => {
+								setNewFileParent(null);
+								setNewFileName("");
+							}}
+						>
+							<X className="h-3 w-3" />
+						</Button>
+					</div>
+				)}
+
 				{(node.type === "dir" || node.type === "app") &&
 					node.expanded &&
 					node.children &&
@@ -859,12 +1092,76 @@ export default function Page() {
 			{/* Tree sidebar */}
 			{!sidebarCollapsed && (
 				<Card className="flex flex-col w-72 shrink-0 overflow-hidden rounded-none border-r border-l-0 border-t-0 border-b-0">
-					<div className="flex items-center justify-between px-3 py-2 border-b bg-muted shrink-0">
-						<div className="flex items-center gap-1.5">
-							<img src="/logo.svg" alt="Wiki Viewer" className="h-5 w-5" />
-							<span className="text-xs font-semibold tracking-tight">Wiki Viewer</span>
+					{/* Row 1: brand + collapse */}
+					<div className="flex items-center justify-between gap-2 px-3 py-2 border-b bg-muted shrink-0">
+						<div className="flex min-w-0 items-center gap-1.5">
+							<img src="/logo.svg" alt="Wiki Viewer" className="h-5 w-5 shrink-0" />
+							<span className="truncate text-xs font-semibold tracking-tight">
+								Wiki Viewer
+							</span>
 						</div>
-						<div className="flex items-center gap-1">
+						<Button
+							size="sm"
+							variant="ghost"
+							className="h-7 w-7 p-0 shrink-0"
+							title="Collapse sidebar"
+							onClick={() => setSidebarCollapsed(true)}
+						>
+							<PanelLeftClose className="h-3.5 w-3.5" />
+						</Button>
+					</div>
+
+					{/* Row 2: actions toolbar */}
+					<div className="flex items-center justify-between gap-1 px-3 py-1.5 border-b bg-muted/50 shrink-0">
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button
+									size="sm"
+									variant="ghost"
+									className="h-7 gap-1 px-2 text-xs"
+									disabled={uploading}
+								>
+									{uploading ? (
+										<Loader2 className="h-3.5 w-3.5 animate-spin" />
+									) : (
+										<Plus className="h-3.5 w-3.5" />
+									)}
+									New
+									<ChevronDown className="h-3 w-3 opacity-60" />
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="start" className="w-44">
+								<DropdownMenuItem
+									onClick={() => {
+										setNewFileParent("");
+										setNewFileName("");
+										setFileCreateError(null);
+									}}
+								>
+									<FilePlus className="mr-2 h-3.5 w-3.5" />
+									New file
+								</DropdownMenuItem>
+								<DropdownMenuItem
+									onClick={() => {
+										setNewFolderParent("");
+										setNewFolderName("");
+										setFolderError(null);
+									}}
+								>
+									<FolderPlus className="mr-2 h-3.5 w-3.5" />
+									New folder
+								</DropdownMenuItem>
+								<DropdownMenuItem
+									onClick={() => triggerUpload("")}
+									disabled={uploading}
+								>
+									<Upload className="mr-2 h-3.5 w-3.5" />
+									Upload
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
+
+						<div className="flex items-center gap-0.5">
 							<Button
 								size="sm"
 								variant="ghost"
@@ -879,42 +1176,24 @@ export default function Page() {
 									<RefreshCw className="h-3.5 w-3.5" />
 								)}
 							</Button>
+							<ThemeToggle />
 							<Button
 								size="sm"
 								variant="ghost"
 								className="h-7 w-7 p-0"
-								title="New root folder"
-								onClick={() => {
-									setNewFolderParent("");
-									setNewFolderName("");
-									setFolderError(null);
-								}}
-							>
-								<FolderPlus className="h-3.5 w-3.5" />
-							</Button>
-							<Button
-								size="sm"
-								variant="ghost"
-								className="h-7 w-7 p-0"
-								title="Upload to root"
-								onClick={() => triggerUpload("")}
-								disabled={uploading}
+								title="AI Agent panel"
+								onClick={() => useAIPanelStore.getState().toggle()}
 							>
-								{uploading ? (
-									<Loader2 className="h-3.5 w-3.5 animate-spin" />
-								) : (
-									<Upload className="h-3.5 w-3.5" />
-								)}
+								<Bot className="h-3.5 w-3.5" />
 							</Button>
-							<ThemeToggle />
 							<Button
 								size="sm"
 								variant="ghost"
 								className="h-7 w-7 p-0"
-								title="Collapse sidebar"
-								onClick={() => setSidebarCollapsed(true)}
+								title="Settings"
+								onClick={() => setSettingsOpen(true)}
 							>
-								<PanelLeftClose className="h-3.5 w-3.5" />
+								<Settings className="h-3.5 w-3.5" />
 							</Button>
 						</div>
 					</div>
@@ -967,6 +1246,48 @@ export default function Page() {
 						</div>
 					)}
 
+					{newFileParent === "" && (
+						<div className="flex items-center gap-1.5 px-2 py-1 border-b shrink-0">
+							<FileText className="h-4 w-4 shrink-0 text-accent" />
+							<input
+								autoFocus
+								className="flex-1 bg-transparent text-sm outline-none border-b border-border min-w-0"
+								placeholder="filename (default .md)"
+								value={newFileName}
+								onChange={(e) => setNewFileName(e.target.value)}
+								onKeyDown={(e) => {
+									if (e.key === "Enter") handleCreateFile();
+									if (e.key === "Escape") {
+										setNewFileParent(null);
+										setNewFileName("");
+									}
+								}}
+							/>
+							{fileCreateError && (
+								<span className="text-xs text-destructive">{fileCreateError}</span>
+							)}
+							<Button
+								size="sm"
+								variant="ghost"
+								className="h-6 w-6 p-0"
+								onClick={handleCreateFile}
+							>
+								<Check className="h-3 w-3" />
+							</Button>
+							<Button
+								size="sm"
+								variant="ghost"
+								className="h-6 w-6 p-0"
+								onClick={() => {
+									setNewFileParent(null);
+									setNewFileName("");
+								}}
+							>
+								<X className="h-3 w-3" />
+							</Button>
+						</div>
+					)}
+
 					<div
 						className={cn(
 							"flex-1 overflow-auto py-1",
@@ -1077,6 +1398,23 @@ export default function Page() {
 											</span>
 										</div>
 										<div className="flex items-center gap-1 shrink-0">
+											{openFileViewerKind === "html" &&
+												!editing &&
+												fileContent !== null && (
+													<Button
+														size="sm"
+														variant="ghost"
+														className="h-7 w-7 p-0"
+														title="Edit source"
+														onClick={() => {
+															setEditing(true);
+															setEditContent(fileContent);
+															setSaveError(null);
+														}}
+													>
+														<Pencil className="h-3.5 w-3.5" />
+													</Button>
+												)}
 											<Button
 												size="sm"
 												variant="ghost"
@@ -1099,18 +1437,60 @@ export default function Page() {
 												size="sm"
 												variant="ghost"
 												className="h-7 w-7 p-0"
-												onClick={() => setOpenFile(null)}
+												onClick={() => {
+													setOpenFile(null);
+													setEditing(false);
+												}}
 											>
 												<X className="h-3.5 w-3.5" />
 											</Button>
 										</div>
 									</div>
-									<WebsiteViewer
-										key={appKey}
-										path={openFile.path}
-										title={openFile.name}
-										src={websiteSrc}
-									/>
+									{editing && openFileViewerKind === "html" ? (
+										<div className="flex-1 flex flex-col overflow-hidden min-h-0">
+											<textarea
+												value={editContent}
+												onChange={(e) => setEditContent(e.target.value)}
+												spellCheck={false}
+												className="flex-1 w-full min-h-0 resize-none bg-background text-foreground px-4 py-3 font-mono text-[13px] leading-relaxed outline-none border-0"
+											/>
+											<div className="border-t px-4 py-2 flex items-center justify-end gap-2 bg-muted shrink-0">
+												{saveError && (
+													<span className="text-xs text-destructive mr-auto">
+														{saveError}
+													</span>
+												)}
+												<Button
+													size="sm"
+													variant="ghost"
+													onClick={() => {
+														setEditing(false);
+														setSaveError(null);
+													}}
+												>
+													Cancel
+												</Button>
+												<Button
+													size="sm"
+													className="gap-1"
+													onClick={handleSave}
+													disabled={saving}
+												>
+													{saving && (
+														<Loader2 className="h-3 w-3 animate-spin" />
+													)}
+													Save
+												</Button>
+											</div>
+										</div>
+									) : (
+										<WebsiteViewer
+											key={appKey}
+											path={openFile.path}
+											title={openFile.name}
+											src={websiteSrc}
+										/>
+									)}
 								</div>
 							);
 						})()
@@ -1144,9 +1524,11 @@ export default function Page() {
 													setEditing(true);
 													setEditContent(fileContent);
 													setSaveError(null);
-													void useEditorStore
-														.getState()
-														.loadPage(openFile.path);
+													if (isMarkdown(openFile.name)) {
+														void useEditorStore
+															.getState()
+															.loadPage(openFile.path);
+													}
 												}}
 											>
 												<Pencil className="h-3.5 w-3.5" />
@@ -1170,6 +1552,7 @@ export default function Page() {
 												)}
 											</Button>
 										)}
+									{widthAwareViewer && <ViewWidthToggle />}
 									<Button
 										size="sm"
 										variant="ghost"
@@ -1187,10 +1570,20 @@ export default function Page() {
 
 							{editing ? (
 								<div className="flex-1 flex flex-col overflow-hidden min-h-0">
-									<KBEditor />
+									{isMarkdown(openFile.name) ? (
+										<KBEditor />
+									) : (
+										<textarea
+											value={editContent}
+											onChange={(e) => setEditContent(e.target.value)}
+											spellCheck={false}
+											className="flex-1 w-full min-h-0 resize-none bg-background text-foreground px-4 py-3 font-mono text-[13px] leading-relaxed outline-none border-0"
+										/>
+									)}
 								</div>
 							) : (
 								<div className="flex-1 overflow-auto p-4 min-h-0">
+									<div className={cn("mx-auto w-full", contentWidthClass)}>
 									{fileLoading ? (
 										<div className="flex justify-center py-8">
 											<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
@@ -1248,176 +1641,24 @@ export default function Page() {
 														<FrontmatterHeader
 															data={data as Record<string, never>}
 														/>
-														<ReactMarkdown
-															remarkPlugins={[remarkGfm, remarkWikilinks]}
-															components={{
-																h1: ({ children }) => (
-																	<h1 className="text-2xl font-normal mt-6 mb-3 pb-1 border-b">
-																		{children}
-																	</h1>
-																),
-																h2: ({ children }) => (
-																	<h2 className="text-xl font-normal mt-5 mb-2 pb-1 border-b">
-																		{children}
-																	</h2>
-																),
-																h3: ({ children }) => (
-																	<h3 className="text-lg font-normal mt-4 mb-2">
-																		{children}
-																	</h3>
-																),
-																h4: ({ children }) => (
-																	<h4 className="text-base font-normal mt-3 mb-1">
-																		{children}
-																	</h4>
-																),
-																p: ({ children }) => (
-																	<p className="text-sm leading-relaxed mb-3">
-																		{children}
-																	</p>
-																),
-																ul: ({ children }) => (
-																	<ul className="list-disc pl-5 mb-3 space-y-1 text-sm">
-																		{children}
-																	</ul>
-																),
-																ol: ({ children }) => (
-																	<ol className="list-decimal pl-5 mb-3 space-y-1 text-sm">
-																		{children}
-																	</ol>
-																),
-																li: ({ children }) => (
-																	<li className="leading-relaxed">
-																		{children}
-																	</li>
-																),
-																blockquote: ({ children }) => (
-																	<blockquote className="border-l-4 border-muted-foreground/30 pl-4 italic text-muted-foreground my-3 text-sm">
-																		{children}
-																	</blockquote>
-																),
-																code: ({ className, children, ...props }) => {
-																	const isBlock =
-																		className?.includes("language-");
-																	return isBlock ? (
-																		<code
-																			className={`block bg-muted rounded-sm px-3 py-2 text-xs font-mono overflow-x-auto my-3 ${className ?? ""}`}
-																			{...props}
-																		>
-																			{children}
-																		</code>
-																	) : (
-																		<code
-																			className="bg-muted rounded-sm px-1 py-0.5 text-xs font-mono"
-																			{...props}
-																		>
-																			{children}
-																		</code>
-																	);
-																},
-																pre: ({ children }) => (
-																	<pre className="my-3 overflow-x-auto">
-																		{children}
-																	</pre>
-																),
-																a: ({ href, children, ...rest }) => {
-																	const props = rest as Record<
-																		string,
-																		unknown
-																	>;
-																	if (props["data-wiki-link"] === "true") {
-																		const slug =
-																			(props["data-slug"] as string) ?? "";
-																		const anchor = props["data-anchor"] as
-																			| string
-																			| undefined;
-																		const broken =
-																			slug &&
-																			!useWikiSlugsStore
-																				.getState()
-																				.has(slug);
-																		return (
-																			<a
-																				href={href}
-																				className="wiki-link"
-																				data-wiki-link="true"
-																				data-slug={slug}
-																				data-anchor={anchor}
-																				data-broken={
-																					broken ? "true" : undefined
-																				}
-																				onClick={(e) => {
-																					e.preventDefault();
-																					if (!slug) return;
-																					const dir = useWikiSlugsStore
-																						.getState()
-																						.getDir(slug);
-																					if (!dir) return;
-																					const targetPath =
-																						dir === "root"
-																							? `${slug}.md`
-																							: `${dir}/${slug}.md`;
-																					void openViewer({
-																						path: targetPath,
-																						name: `${slug}.md`,
-																						type: "file",
-																					} as TreeNode);
-																					if (anchor) {
-																						setTimeout(() => {
-																							document
-																								.getElementById(anchor)
-																								?.scrollIntoView({
-																									behavior: "smooth",
-																								});
-																						}, 200);
-																					}
-																				}}
-																			>
-																				{children}
-																			</a>
-																		);
-																	}
-																	return (
-																		<a
-																			href={href}
-																			className="text-primary underline hover:no-underline"
-																			target="_blank"
-																			rel="noreferrer"
-																		>
-																			{children}
-																		</a>
-																	);
-																},
-																strong: ({ children }) => (
-																	<strong className="font-normal">
-																		{children}
-																	</strong>
-																),
-																em: ({ children }) => (
-																	<em className="italic">{children}</em>
-																),
-																hr: () => <hr className="my-4 border-border" />,
-																table: ({ children }) => (
-																	<div className="overflow-x-auto my-3">
-																		<table className="w-full text-sm border-collapse">
-																			{children}
-																		</table>
-																	</div>
-																),
-																th: ({ children }) => (
-																	<th className="border border-border px-3 py-1.5 bg-muted font-normal text-left">
-																		{children}
-																	</th>
-																),
-																td: ({ children }) => (
-																	<td className="border border-border px-3 py-1.5">
-																		{children}
-																	</td>
-																),
+														<MarkdownPreview
+															markdown={body}
+															pagePath={openFile.path}
+															onNavigate={(targetPath, anchor) => {
+																void openViewer({
+																	path: targetPath,
+																	name: targetPath.split('/').pop() ?? targetPath,
+																	type: 'file',
+																} as TreeNode);
+																if (anchor) {
+																	setTimeout(() => {
+																		document
+																			.getElementById(anchor)
+																			?.scrollIntoView({ behavior: 'smooth' });
+																	}, 200);
+																}
 															}}
-														>
-															{body}
-														</ReactMarkdown>
+														/>
 													</>
 												);
 											})()
@@ -1435,6 +1676,7 @@ export default function Page() {
 											Preview not available for this file type.
 										</p>
 									)}
+									</div>
 								</div>
 							)}
 
@@ -1480,6 +1722,8 @@ export default function Page() {
 				)}
 			</div>
 
+			<AuthSettingsSheet open={settingsOpen} onOpenChange={setSettingsOpen} />
+			<AIPanel currentPath={openFile?.path} />
 			<input
 				ref={fileInputRef}
 				type="file"