wiki-viewer 1.8.2 → 1.8.4

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

@@ -6,6 +6,7 @@ import {
 	Check,
 	ChevronDown,
 	ChevronRight,
+	Copy,
 	Download,
 	File,
 	FilePlus,
@@ -15,20 +16,24 @@ import {
 	FolderPlus,
 	Globe,
 	Image as ImageIcon,
+	Link,
 	Loader2,
 	Maximize2,
+	MoreHorizontal,
 	PanelLeftClose,
 	PanelLeftOpen,
 	Pencil,
+	Pin,
 	Plus,
 	RefreshCw,
 	Settings,
+	Star,
 	Terminal,
 	Trash2,
 	Upload,
 	X,
 } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { ConfirmDialog } from "@/components/confirm-dialog";
 import { CsvViewer } from "@/components/editor/csv-viewer";
@@ -54,15 +59,22 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { getActiveWorkspaceId, withWs, wsFetch } from "@/lib/workspace-client";
+import { markdownToHtml } from "@/lib/markdown/to-html";
 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 { showError } from "@/lib/toast";
+import { showError, showSuccess } from "@/lib/toast";
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuSeparator,
+	ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { useRecentStore } from "@/stores/recent-store";
+import { usePinStore } from "@/stores/pin-store";
 import { cn } from "@/lib/utils";
 import { AIPanel } from "@/components/ai-panel/ai-panel";
 import { SearchCommandDialog } from "@/components/search/search-command-dialog";
@@ -113,8 +125,14 @@ function viewerKindFor(
 	if (nodeType === "node-app") return "node-app";
 	if (nodeType === "app") return "app";
 	if (nodeType === "dir") return "fallback";
+	const base = filename.split("/").pop() ?? filename;
+	// Dotfile with no real extension (".env", ".gitignore", ".bashrc"):
+	// `".env".split(".").pop()` -> "env", which would match nothing below,
+	// so treat any leading-dot name as text and let the viewer sniff bytes.
+	if (base.startsWith(".") && base.indexOf(".", 1) === -1) return "source";
 	const fileExt = ext(filename);
-	if (!fileExt) return "fallback";
+	// No extension at all ("Makefile", "LICENSE", "Dockerfile"): assume text.
+	if (!fileExt) return "source";
 	if (["md", "markdown"].includes(fileExt)) return "editor";
 	if (fileExt === "txt") return "text";
 	if (["csv", "tsv"].includes(fileExt)) return "csv";
@@ -145,7 +163,11 @@ function viewerKindFor(
 		].includes(fileExt)
 	)
 		return "source";
-	return "fallback";
+	// Default: assume text and let SourceViewer sniff the bytes. If the file is
+	// actually binary, SourceViewer degrades to a download/reveal fallback.
+	// This avoids a brittle text-extension whitelist that always misses
+	// something (.env, .ini, .lock, .gradle, .properties, ...).
+	return "source";
 }
 
 const TEXT_EDITABLE_EXTS = new Set([
@@ -267,6 +289,44 @@ export default function Page() {
 
 	const editorCurrentPath = useEditorStore((s) => s.currentPath);
 
+	// Recent files
+	const recents = useRecentStore((s) => s.recents);
+	const [pinnedCollapsed, setPinnedCollapsed] = useState(false);
+	const [recentCollapsed, setRecentCollapsed] = useState(true);
+
+	// Pins
+	const pins = usePinStore((s) => s.pins);
+
+	// Sidebar scroll container ref (for keyboard nav)
+	const sidebarScrollRef = useRef<HTMLDivElement>(null);
+
+	// Agent presence: paths touched by agents in last 60s
+	const activity = useAIPanelStore((s) => s.activity);
+	const activePaths = useMemo(() => {
+		const cutoff = new Date(Date.now() - 60 * 1000).toISOString();
+		const paths = new Set<string>();
+		for (const ev of activity) {
+			// Only agent-authored events count as "agent presence".
+			if (ev.at >= cutoff && ev.path && ev.by?.startsWith("ai:"))
+				paths.add(ev.path);
+		}
+		return paths;
+	}, [activity]);
+
+	// Poll activity for presence indicator
+	useEffect(() => {
+		const load = () => { void useAIPanelStore.getState().loadActivity(); };
+		load();
+		const id = setInterval(load, 10_000);
+		return () => clearInterval(id);
+	}, []);
+
+	// Reload recents + pins when workspace changes
+	useEffect(() => {
+		useRecentStore.getState().loadForWorkspace(activeWorkspaceId);
+		usePinStore.getState().loadForWorkspace(activeWorkspaceId);
+	}, [activeWorkspaceId]);
+
 	// 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>(
@@ -407,7 +467,7 @@ export default function Page() {
 	const collectExpandedPaths = useCallback((nodes: TreeNode[]): string[] => {
 		const paths: string[] = [];
 		for (const n of nodes) {
-			if ((n.type === "dir" || n.type === "app") && n.expanded && n.children) {
+			if ((n.type === "dir" || n.type === "app" || n.type === "node-app") && n.expanded && n.children) {
 				paths.push(n.path);
 				paths.push(...collectExpandedPaths(n.children));
 			}
@@ -438,6 +498,15 @@ export default function Page() {
 
 	const refreshViewer = useCallback(async () => {
 		if (!openFile) return;
+		if (isMarkdown(openFile.name)) {
+			setFileLoading(true);
+			try {
+				await useEditorStore.getState().loadPage(openFile.path);
+			} finally {
+				setFileLoading(false);
+			}
+			return;
+		}
 		const kind = viewerKindFor(openFile.name, openFile.nodeType);
 		if (!["editor", "text"].includes(kind) && !isText(openFile.name)) return;
 		setFileLoading(true);
@@ -456,6 +525,12 @@ export default function Page() {
 		setFileLoading(false);
 	}, [openFile]);
 
+	useEffect(() => {
+		if (!openFile || !isMarkdown(openFile.name)) return;
+		if (useEditorStore.getState().currentPath === openFile.path) return;
+		void useEditorStore.getState().loadPage(openFile.path);
+	}, [openFile]);
+
 	// Keep watcher refs in sync
 	useEffect(() => {
 		openFileRef.current = openFile;
@@ -529,7 +604,7 @@ export default function Page() {
 	}, [rootConfigured, reloadDir]);
 
 	async function toggleFolder(node: TreeNode) {
-		if (node.type !== "dir" && node.type !== "app") return;
+		if (node.type !== "dir" && node.type !== "app" && node.type !== "node-app") return;
 		if (!node.expanded) {
 			if (node.children === undefined) {
 				setRoots((prev) =>
@@ -561,6 +636,13 @@ export default function Page() {
 	}, []);
 
 	async function openViewer(node: TreeNode) {
+		// Push to recent files (only real files, not dirs/apps)
+		if (node.type === "file") {
+			useRecentStore.getState().push(
+				{ path: node.path, name: node.name },
+				activeWorkspaceId,
+			);
+		}
 		setOpenFile({
 			path: node.path,
 			name: node.name,
@@ -575,6 +657,15 @@ export default function Page() {
 		setSaveError(null);
 		setFileContent(null);
 		setFileRevision(0);
+		if (node.type === "file" && isMarkdown(node.name)) {
+			setFileLoading(true);
+			try {
+				await useEditorStore.getState().loadPage(node.path);
+			} finally {
+				setFileLoading(false);
+			}
+			return;
+		}
 		const kind = viewerKindFor(node.name, node.type);
 		if (!["editor", "text"].includes(kind) && !isText(node.name)) return;
 		setFileLoading(true);
@@ -837,6 +928,120 @@ export default function Page() {
 		a.remove();
 	}
 
+	function copyPath(path: string) {
+		void navigator.clipboard.writeText(path);
+		showSuccess("Path copied");
+	}
+
+	function copyWikiLink(name: string) {
+		const slug = name.replace(/\.(md|markdown)$/i, "");
+		void navigator.clipboard.writeText(`[[${slug}]]`);
+		showSuccess("Wiki link copied");
+	}
+
+	function copyUrl(path: string) {
+		const url = new URL(location.href);
+		url.searchParams.set("path", path);
+		if (activeWorkspaceId) url.searchParams.set("ws", activeWorkspaceId);
+		void navigator.clipboard.writeText(url.toString());
+		showSuccess("URL copied");
+	}
+
+	async function getTextContent(path: string) {
+		if (openFile?.path === path && fileContent !== null) return fileContent;
+		if (useEditorStore.getState().currentPath === path) {
+			return useEditorStore.getState().content;
+		}
+		const res = await wsFetch(`/api/wiki/content?path=${encodeURIComponent(path)}`);
+		if (!res.ok) throw new Error("Cannot copy content");
+		const data: { content: string } = await res.json();
+		return data.content;
+	}
+
+	async function copyRawContent(path: string) {
+		try {
+			const content = await getTextContent(path);
+			await navigator.clipboard.writeText(content);
+			showSuccess("Raw content copied");
+		} catch {
+			showError("Could not copy file content");
+		}
+	}
+
+	async function copyFormattedContent(path: string, name: string) {
+		try {
+			const content = await getTextContent(path);
+			if (!isMarkdown(name)) {
+				await navigator.clipboard.writeText(content);
+				showSuccess("Content copied");
+				return;
+			}
+			const html = await markdownToHtml(content, { pagePath: path, sanitize: true });
+			if ("ClipboardItem" in window && navigator.clipboard.write) {
+				await navigator.clipboard.write([
+					new ClipboardItem({
+						"text/html": new Blob([html], { type: "text/html" }),
+						"text/plain": new Blob([content], { type: "text/plain" }),
+					}),
+				]);
+			} else {
+				await navigator.clipboard.writeText(content);
+			}
+			showSuccess("Formatted content copied");
+		} catch {
+			showError("Could not copy formatted content");
+		}
+	}
+
+	function renderCopyMenu(node: { path: string; name: string }) {
+		return (
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button
+						size="sm"
+						variant="ghost"
+						className="h-7 gap-1.5 px-2 text-xs"
+						title="Copy path, wiki link, or URL"
+					>
+						<Copy className="h-3.5 w-3.5" />
+						Copy
+						<ChevronDown className="h-3 w-3 opacity-60" />
+					</Button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="end" className="w-44">
+					<DropdownMenuItem onClick={() => copyPath(node.path)}>
+						<Copy className="mr-2 h-3.5 w-3.5" />
+						Copy path
+					</DropdownMenuItem>
+					{isMarkdown(node.name) && (
+						<DropdownMenuItem onClick={() => copyWikiLink(node.name)}>
+							<FileText className="mr-2 h-3.5 w-3.5" />
+							Copy wiki link
+						</DropdownMenuItem>
+					)}
+					<DropdownMenuSeparator />
+					<DropdownMenuItem onClick={() => copyUrl(node.path)}>
+						<Link className="mr-2 h-3.5 w-3.5" />
+						Copy URL
+					</DropdownMenuItem>
+					{isText(node.name) && (
+						<>
+							<DropdownMenuSeparator />
+							<DropdownMenuItem onClick={() => void copyRawContent(node.path)}>
+								<FileText className="mr-2 h-3.5 w-3.5" />
+								Copy raw content
+							</DropdownMenuItem>
+							<DropdownMenuItem onClick={() => void copyFormattedContent(node.path, node.name)}>
+								<FileText className="mr-2 h-3.5 w-3.5" />
+								Copy formatted content
+							</DropdownMenuItem>
+						</>
+					)}
+				</DropdownMenuContent>
+			</DropdownMenu>
+		);
+	}
+
 	async function handleDelete() {
 		if (!deletingPath) return;
 		await wsFetch("/api/wiki", {
@@ -931,149 +1136,241 @@ export default function Page() {
 	const contentWidthClass = widthAwareViewer ? VIEW_WIDTH_CLASS[viewWidth] : "";
 
 	function renderNodes(nodes: TreeNode[], depth = 0): React.ReactNode {
-		return nodes.map((node) => (
-			<div key={node.path}>
-				<div
-					role="treeitem"
-					tabIndex={0}
-					draggable
-					onKeyDown={(e) => {
-						if (e.key === "Enter" || e.key === " ") {
-							e.preventDefault();
-							if (node.type === "dir") toggleFolder(node);
-							else if (node.type === "app") { openViewer(node); toggleFolder(node); }
-							else openViewer(node);
-						}
-					}}
-					onDragStart={(e) => handleDragStart(e, node)}
-					onDragOver={(e) =>
-						node.type === "dir"
-							? handleDragOver(e, node.path, "dir")
-							: e.preventDefault()
-					}
-					onDragLeave={() => setDragOverPath(null)}
-					onDrop={(e) =>
-						node.type === "dir"
-							? handleDropOnFolder(e, node.path)
-							: e.preventDefault()
-					}
-					className={cn(
-						"flex items-center gap-1.5 rounded-sm px-2 py-1 text-sm cursor-pointer group transition-colors select-none",
-						openFile?.path === node.path
-							? "bg-accent-soft text-foreground font-medium"
-							: "hover:bg-muted",
-						dragOverPath === node.path && "ring-2 ring-primary bg-primary-soft",
-						node.name.startsWith(".") && "opacity-40",
-					)}
-					style={{ paddingLeft: `${depth * 14 + 8}px` }}
-					onClick={() => {
-						if (node.type === "dir") toggleFolder(node);
-						else if (node.type === "app") { openViewer(node); toggleFolder(node); }
-						else openViewer(node);
-					}}
-				>
-					{(node.type === "dir" || node.type === "app") ? (
-						node.loading ? (
-							<Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground" />
-						) : node.expanded ? (
-							<ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-						) : (
-							<ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-						)
-					) : (
-						<span className="w-3.5 shrink-0" />
-					)}
-
-					{node.type === "dir" ? (
-						node.expanded ? (
-							<FolderOpen className={cn("h-4 w-4 shrink-0", openFile?.path !== node.path && "text-warning")} />
-						) : (
-							<Folder className={cn("h-4 w-4 shrink-0", openFile?.path !== node.path && "text-warning")} />
-						)
-					) : node.type === "app" ? (
-						<Globe className={cn("h-4 w-4 shrink-0", openFile?.path !== node.path && "text-foreground/70")} />
-					) : node.type === "node-app" ? (
-						<Terminal className={cn("h-4 w-4 shrink-0", openFile?.path !== node.path && "text-emerald-500")} />
-					) : isHtmlFile(node.name) ? (
-						<Globe className={cn("h-4 w-4 shrink-0", openFile?.path !== node.path && "text-foreground/60")} />
-					) : isImage(node.name) ? (
-						<ImageIcon className={cn("h-4 w-4 shrink-0", openFile?.path !== node.path && "text-sunshine-700")} />
-					) : isText(node.name) ? (
-						<FileText className={cn("h-4 w-4 shrink-0", openFile?.path !== node.path && "text-foreground/70")} />
-					) : (
-						<File className={cn("h-4 w-4 shrink-0", openFile?.path !== node.path && "text-foreground/60")} />
-					)}
-
-					<span className="flex-1 truncate">{node.name}</span>
-
-					<div
-						className="flex items-center gap-0.5 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
-						onClick={(e) => e.stopPropagation()}
-						onKeyDown={(e) => e.stopPropagation()}
-					>
-						{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"
-									className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
-									title="Upload here"
-									onClick={() => triggerUpload(node.path)}
-								>
-									<Upload className="h-3 w-3" />
-								</Button>
-								<Button
-									size="sm"
-									variant="ghost"
-									className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
-									title="New subfolder"
-									onClick={() => {
-										setNewFolderParent(node.path);
-										setNewFolderName("");
-										setFolderError(null);
-									}}
-								>
-									<FolderPlus className="h-3 w-3" />
-								</Button>
-							</>
-						)}
-						<Button
-							size="sm"
-							variant="ghost"
-							className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
-							title={node.type === "file" ? "Download" : "Download as zip"}
-							onClick={() => handleDownload(node)}
-						>
-							<Download className="h-3 w-3" />
-						</Button>
-						<Button
-							size="sm"
-							variant="ghost"
-							className="h-6 w-6 p-0 text-destructive hover:text-destructive"
-							title="Delete"
+		return nodes.map((node) => {
+			const isNodePinned = pins.some((p) => p.path === node.path);
+			return (
+			<ContextMenu key={node.path}>
+				<ContextMenuTrigger asChild>
+					<div>
+						<div
+							role="treeitem"
+							tabIndex={0}
+							draggable
+							onKeyDown={(e) => {
+								if (e.key === "Enter" || e.key === " ") {
+									e.preventDefault();
+									if (node.type === "dir") toggleFolder(node);
+									else if (node.type === "app" || node.type === "node-app") { void openViewer(node); void toggleFolder(node); }
+									else void openViewer(node);
+								} else if (e.key === "ArrowDown") {
+									e.preventDefault();
+									const container = sidebarScrollRef.current;
+									if (!container) return;
+									const items = Array.from(container.querySelectorAll<HTMLElement>('[role="treeitem"]'));
+									const idx = items.indexOf(e.currentTarget as HTMLElement);
+									items[idx + 1]?.focus();
+								} else if (e.key === "ArrowUp") {
+									e.preventDefault();
+									const container = sidebarScrollRef.current;
+									if (!container) return;
+									const items = Array.from(container.querySelectorAll<HTMLElement>('[role="treeitem"]'));
+									const idx = items.indexOf(e.currentTarget as HTMLElement);
+									items[idx - 1]?.focus();
+								} else if (e.key === "ArrowRight") {
+									e.preventDefault();
+									if (node.type === "dir" || node.type === "app" || node.type === "node-app") {
+										if (!node.expanded) {
+											void toggleFolder(node);
+										} else {
+											// Focus first visible child
+											const container = sidebarScrollRef.current;
+											if (!container) return;
+											const items = Array.from(container.querySelectorAll<HTMLElement>('[role="treeitem"]'));
+											const idx = items.indexOf(e.currentTarget as HTMLElement);
+											items[idx + 1]?.focus();
+										}
+									}
+								} else if (e.key === "ArrowLeft") {
+									e.preventDefault();
+									if ((node.type === "dir" || node.type === "app" || node.type === "node-app") && node.expanded) {
+										void toggleFolder(node);
+									} else if (depth > 0) {
+										// Focus nearest ancestor (smaller paddingLeft)
+										const container = sidebarScrollRef.current;
+										if (!container) return;
+										const items = Array.from(container.querySelectorAll<HTMLElement>('[role="treeitem"]'));
+										const current = e.currentTarget as HTMLElement;
+										const idx = items.indexOf(current);
+										const currentPL = Number.parseInt(current.style.paddingLeft ?? "0", 10);
+										for (let i = idx - 1; i >= 0; i--) {
+											const pl = Number.parseInt(items[i].style.paddingLeft ?? "0", 10);
+											if (pl < currentPL) { items[i].focus(); break; }
+										}
+									}
+								}
+							}}
+							onDragStart={(e) => handleDragStart(e, node)}
+							onDragOver={(e) =>
+								node.type === "dir"
+									? handleDragOver(e, node.path, "dir")
+									: e.preventDefault()
+							}
+							onDragLeave={() => setDragOverPath(null)}
+							onDrop={(e) =>
+								node.type === "dir"
+									? handleDropOnFolder(e, node.path)
+									: e.preventDefault()
+							}
+							className={cn(
+								"flex items-center gap-1.5 rounded-sm px-2 py-1 text-sm cursor-pointer group transition-colors select-none",
+								openFile?.path === node.path
+									? "bg-accent-soft text-foreground font-medium"
+									: "hover:bg-muted",
+								dragOverPath === node.path && "ring-2 ring-primary bg-primary-soft",
+								node.name.startsWith(".") && "opacity-40",
+							)}
+							style={{ paddingLeft: `${depth * 14 + 8}px` }}
 							onClick={() => {
-								setDeletingPath(node.path);
-								setDeletingIsDir(node.type !== "file");
+								if (node.type === "dir") toggleFolder(node);
+								else if (node.type === "app" || node.type === "node-app") { void openViewer(node); void toggleFolder(node); }
+								else void openViewer(node);
 							}}
 						>
-							<Trash2 className="h-3 w-3" />
-						</Button>
-					</div>
-				</div>
+							{(node.type === "dir" || node.type === "app" || node.type === "node-app") ? (
+								node.loading ? (
+									<Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground" />
+								) : node.expanded ? (
+									<ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+								) : (
+									<ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+								)
+							) : (
+								<span className="w-3.5 shrink-0" />
+							)}
+
+							{node.type === "dir" ? (
+								node.expanded ? (
+									<FolderOpen className={cn("h-4 w-4 shrink-0", openFile?.path !== node.path && "text-warning")} />
+								) : (
+									<Folder className={cn("h-4 w-4 shrink-0", openFile?.path !== node.path && "text-warning")} />
+								)
+							) : node.type === "app" ? (
+								<Globe className={cn("h-4 w-4 shrink-0", openFile?.path !== node.path && "text-foreground/70")} />
+							) : node.type === "node-app" ? (
+								<Terminal className={cn("h-4 w-4 shrink-0", openFile?.path !== node.path && "text-emerald-500")} />
+							) : isHtmlFile(node.name) ? (
+								<Globe className={cn("h-4 w-4 shrink-0", openFile?.path !== node.path && "text-foreground/60")} />
+							) : isImage(node.name) ? (
+								<ImageIcon className={cn("h-4 w-4 shrink-0", openFile?.path !== node.path && "text-sunshine-700")} />
+							) : isText(node.name) ? (
+								<FileText className={cn("h-4 w-4 shrink-0", openFile?.path !== node.path && "text-foreground/70")} />
+							) : (
+								<File className={cn("h-4 w-4 shrink-0", openFile?.path !== node.path && "text-foreground/60")} />
+							)}
+
+							<span className="min-w-0 flex-1 truncate">{node.name}</span>
+
+							{/* Agent presence dot */}
+							{activePaths.has(node.path) && (
+								<span
+									className="ml-0.5 h-1.5 w-1.5 rounded-full bg-emerald-400 shrink-0 animate-pulse"
+									title="Agent recently active"
+								/>
+							)}
+
+							<div
+								className="flex max-w-0 shrink-0 items-center overflow-hidden opacity-0 transition-all duration-150 group-hover:max-w-7 group-hover:opacity-100 focus-within:max-w-7 focus-within:opacity-100"
+								onClick={(e) => e.stopPropagation()}
+								onKeyDown={(e) => e.stopPropagation()}
+							>
+								<DropdownMenu>
+									<DropdownMenuTrigger asChild>
+										<Button
+											size="sm"
+											variant="ghost"
+											className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+											title="File actions"
+										>
+											<MoreHorizontal className="h-3.5 w-3.5" />
+										</Button>
+									</DropdownMenuTrigger>
+									<DropdownMenuContent align="end" className="w-48">
+										<DropdownMenuItem onClick={() => copyPath(node.path)}>
+											<Copy className="mr-2 h-3.5 w-3.5" />
+											Copy path
+										</DropdownMenuItem>
+										{isMarkdown(node.name) && (
+											<DropdownMenuItem onClick={() => copyWikiLink(node.name)}>
+												<FileText className="mr-2 h-3.5 w-3.5" />
+												Copy wiki link
+											</DropdownMenuItem>
+										)}
+										<DropdownMenuItem onClick={() => copyUrl(node.path)}>
+											<Link className="mr-2 h-3.5 w-3.5" />
+											Copy URL
+										</DropdownMenuItem>
+										{node.type === "file" && isText(node.name) && (
+											<>
+												<DropdownMenuItem onClick={() => void copyRawContent(node.path)}>
+													<FileText className="mr-2 h-3.5 w-3.5" />
+													Copy raw content
+												</DropdownMenuItem>
+												<DropdownMenuItem onClick={() => void copyFormattedContent(node.path, node.name)}>
+													<FileText className="mr-2 h-3.5 w-3.5" />
+													Copy formatted content
+												</DropdownMenuItem>
+											</>
+										)}
+										<DropdownMenuSeparator />
+										{node.type === "dir" && (
+											<>
+												<DropdownMenuItem
+													onClick={async () => {
+														if (!node.expanded) await toggleFolder(node);
+														setNewFileParent(node.path);
+														setNewFileName("");
+														setFileCreateError(null);
+													}}
+												>
+													<FilePlus className="mr-2 h-3.5 w-3.5" />
+													New file here
+												</DropdownMenuItem>
+												<DropdownMenuItem onClick={() => triggerUpload(node.path)}>
+													<Upload className="mr-2 h-3.5 w-3.5" />
+													Upload here
+												</DropdownMenuItem>
+												<DropdownMenuItem
+													onClick={() => {
+														setNewFolderParent(node.path);
+														setNewFolderName("");
+														setFolderError(null);
+													}}
+												>
+													<FolderPlus className="mr-2 h-3.5 w-3.5" />
+													New subfolder
+												</DropdownMenuItem>
+												<DropdownMenuSeparator />
+											</>
+										)}
+										<DropdownMenuItem onClick={() => handleDownload(node)}>
+											<Download className="mr-2 h-3.5 w-3.5" />
+											{node.type === "file" ? "Download" : "Download as zip"}
+										</DropdownMenuItem>
+										<DropdownMenuItem
+											onClick={() =>
+												usePinStore
+													.getState()
+													.toggle({ path: node.path, name: node.name, type: (node.type === "dir" ? "file" : node.type) as "file" | "app" | "node-app" }, activeWorkspaceId)
+											}
+										>
+											<Star className={cn("mr-2 h-3.5 w-3.5", isNodePinned && "fill-current text-amber-400")} />
+											{isNodePinned ? "Unpin" : "Pin to top"}
+										</DropdownMenuItem>
+										<DropdownMenuSeparator />
+										<DropdownMenuItem
+											className="text-destructive focus:text-destructive"
+											onClick={() => {
+												setDeletingPath(node.path);
+												setDeletingIsDir(node.type !== "file");
+											}}
+										>
+											<Trash2 className="mr-2 h-3.5 w-3.5" />
+											Delete
+										</DropdownMenuItem>
+									</DropdownMenuContent>
+								</DropdownMenu>
+							</div>
+						</div>
 
 				{newFolderParent === node.path && node.type === "dir" && (
 					<div
@@ -1166,12 +1463,12 @@ export default function Page() {
 					</div>
 				)}
 
-				{(node.type === "dir" || node.type === "app") &&
+				{(node.type === "dir" || node.type === "app" || node.type === "node-app") &&
 					node.expanded &&
 					node.children &&
 					node.children.length > 0 &&
 					renderNodes(node.children, depth + 1)}
-				{(node.type === "dir" || node.type === "app") &&
+				{(node.type === "dir" || node.type === "app" || node.type === "node-app") &&
 					node.expanded &&
 					node.children?.length === 0 && (
 						<div
@@ -1183,8 +1480,36 @@ export default function Page() {
 							Empty
 						</div>
 					)}
-			</div>
-		));
+				</div>
+			</ContextMenuTrigger>
+			<ContextMenuContent>
+				<ContextMenuItem onSelect={() => copyPath(node.path)}>
+					Copy path
+				</ContextMenuItem>
+				{isMarkdown(node.name) && (
+					<ContextMenuItem onSelect={() => copyWikiLink(node.name)}>
+						Copy wiki link
+					</ContextMenuItem>
+				)}
+				<ContextMenuSeparator />
+				<ContextMenuItem onSelect={() => copyUrl(node.path)}>
+					Copy URL
+				</ContextMenuItem>
+				{node.type === "file" && isText(node.name) && (
+					<>
+						<ContextMenuSeparator />
+						<ContextMenuItem onSelect={() => void copyRawContent(node.path)}>
+							Copy raw content
+						</ContextMenuItem>
+						<ContextMenuItem onSelect={() => void copyFormattedContent(node.path, node.name)}>
+							Copy formatted content
+						</ContextMenuItem>
+					</>
+				)}
+			</ContextMenuContent>
+		</ContextMenu>
+		);
+		});
 	}
 
 	return (
@@ -1222,7 +1547,14 @@ export default function Page() {
 				</div>
 			)}
 			{rootConfigured === true && !addingWorkspace && <>
-			<SearchCommandDialog onOpenFile={openFromSearch} />
+			<SearchCommandDialog
+				onOpenFile={openFromSearch}
+				onToggleSidebar={() => setSidebarCollapsed((v) => !v)}
+				onNewFile={() => setNewFileParent("")}
+				onCopyPath={() => {
+					if (openFile) void navigator.clipboard.writeText(openFile.path);
+				}}
+			/>
 			{/* 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">
@@ -1427,6 +1759,7 @@ export default function Page() {
 					</div>
 
 					<div
+						ref={sidebarScrollRef}
 						className={cn(
 							"flex-1 overflow-auto py-1",
 							dragOverPath === "" &&
@@ -1439,6 +1772,82 @@ export default function Page() {
 						}}
 						onDrop={(e) => handleDropOnFolder(e, "")}
 					>
+						{/* Pinned section */}
+						{pins.length > 0 && (
+							<div className="border-b mb-1">
+								<button
+									type="button"
+									className="flex w-full items-center gap-1 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground"
+									onClick={() => setPinnedCollapsed((c) => !c)}
+								>
+									{pinnedCollapsed ? <ChevronRight className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+									<Pin className="h-3 w-3" />
+									Pinned
+									<span className="ml-auto text-[9px] tabular-nums opacity-60">{pins.length}</span>
+								</button>
+								{!pinnedCollapsed && pins.map((p) => (
+									<div
+										key={p.path}
+										role="button"
+										tabIndex={0}
+										className={cn(
+											"group flex items-center gap-1.5 rounded-sm px-2 py-1 text-sm cursor-pointer transition-colors select-none",
+											openFile?.path === p.path ? "bg-accent-soft text-foreground font-medium" : "hover:bg-muted",
+										)}
+										onClick={() => void openViewer({ path: p.path, name: p.name, type: (p.type ?? "file") as TreeNode["type"], modifiedAt: "" } as TreeNode)}
+										onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); void openViewer({ path: p.path, name: p.name, type: (p.type ?? "file") as TreeNode["type"], modifiedAt: "" } as TreeNode); } }}
+									>
+										<Star className="h-3 w-3 shrink-0 fill-current text-amber-400" />
+										<span className="min-w-0 flex-1 truncate text-xs">{p.name}</span>
+										<span className="max-w-[80px] truncate text-[10px] text-muted-foreground/60">{p.path.split("/").slice(0, -1).join("/")}</span>
+										<button
+											type="button"
+											className="shrink-0 rounded p-0.5 text-muted-foreground/50 opacity-0 transition-colors hover:bg-muted hover:text-amber-400 group-hover:opacity-100 focus:opacity-100"
+											title="Remove from pinned"
+											onClick={(e) => {
+												e.stopPropagation();
+												usePinStore
+													.getState()
+													.toggle({ path: p.path, name: p.name }, activeWorkspaceId);
+											}}
+										>
+											<X className="h-3 w-3" />
+										</button>
+									</div>
+								))}
+							</div>
+						)}
+						{/* Recent files section */}
+						{recents.length > 0 && (
+							<div className="border-b mb-1">
+								<button
+									type="button"
+									className="flex w-full items-center gap-1 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground"
+									onClick={() => setRecentCollapsed((c) => !c)}
+								>
+									{recentCollapsed ? <ChevronRight className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+									Recent
+									<span className="ml-auto text-[9px] tabular-nums opacity-60">{recents.length}</span>
+								</button>
+								{!recentCollapsed && recents.slice(0, 8).map((r) => (
+									<div
+										key={r.path}
+										role="button"
+										tabIndex={0}
+										className={cn(
+											"flex items-center gap-1.5 rounded-sm px-2 py-1 text-sm cursor-pointer transition-colors select-none",
+											openFile?.path === r.path ? "bg-accent-soft text-foreground font-medium" : "hover:bg-muted",
+										)}
+										onClick={() => void openViewer({ path: r.path, name: r.name, type: (r.type ?? "file") as TreeNode["type"], modifiedAt: "" } as TreeNode)}
+										onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); void openViewer({ path: r.path, name: r.name, type: (r.type ?? "file") as TreeNode["type"], modifiedAt: "" } as TreeNode); } }}
+									>
+										<FileText className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+										<span className="flex-1 truncate text-xs">{r.name}</span>
+										<span className="text-[10px] text-muted-foreground/60 truncate max-w-[80px]">{r.path.split("/").slice(0, -1).join("/")}</span>
+									</div>
+								))}
+							</div>
+						)}
 						{rootLoading ? (
 							<div className="flex justify-center py-6">
 								<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
@@ -1582,6 +1991,7 @@ export default function Page() {
 											</span>
 										</div>
 										<div className="flex items-center gap-1 shrink-0">
+											{renderCopyMenu(openFile)}
 											{openFileViewerKind === "html" &&
 												!editing &&
 												fileContent !== null && (
@@ -1697,16 +2107,17 @@ export default function Page() {
 									</span>
 								</div>
 								<div className="flex items-center gap-1 shrink-0">
+									{renderCopyMenu(openFile)}
 									{isText(openFile.name) &&
 										!editing &&
-										fileContent !== null && (
+										(fileContent !== null || isMarkdown(openFile.name)) && (
 											<Button
 												size="sm"
 												variant="ghost"
 												className="h-7 w-7 p-0"
 												onClick={() => {
 													setEditing(true);
-													setEditContent(fileContent);
+													setEditContent(fileContent ?? "");
 													setSaveError(null);
 													if (isMarkdown(openFile.name)) {
 														void useEditorStore
@@ -1720,7 +2131,7 @@ export default function Page() {
 										)}
 									{isText(openFile.name) &&
 										!editing &&
-										fileContent !== null && (
+										(fileContent !== null || isMarkdown(openFile.name)) && (
 											<Button
 												size="sm"
 												variant="ghost"
@@ -1765,6 +2176,16 @@ export default function Page() {
 										/>
 									)}
 								</div>
+							) : isMarkdown(openFile.name) ? (
+								<div className="flex-1 flex flex-col overflow-hidden min-h-0">
+									{fileLoading ? (
+										<div className="flex justify-center py-8">
+											<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+										</div>
+									) : (
+										<KBEditor mode="viewing" />
+									)}
+								</div>
 							) : (
 								<div className="flex-1 overflow-auto p-4 min-h-0">
 									<div className={cn("mx-auto w-full", contentWidthClass)}>
@@ -1817,40 +2238,9 @@ export default function Page() {
 											title={openFile.name}
 										/>
 									) : fileContent !== null ? (
-										["md", "markdown"].includes(ext(openFile.name)) ? (
-											(() => {
-												const { data, body } = parseFrontmatter(fileContent);
-												return (
-													<>
-														<FrontmatterHeader
-															data={data as Record<string, never>}
-														/>
-														<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);
-																}
-															}}
-														/>
-													</>
-												);
-											})()
-										) : (
-											<pre className="text-xs font-mono whitespace-pre-wrap break-words leading-relaxed">
-												{fileContent}
-											</pre>
-										)
+										<pre className="text-xs font-mono whitespace-pre-wrap break-words leading-relaxed">
+											{fileContent}
+										</pre>
 									) : isText(openFile.name) ? (
 										<p className="text-sm text-muted-foreground">
 											Could not load file.
@@ -1864,7 +2254,7 @@ export default function Page() {
 								</div>
 							)}
 
-							{editing && (
+							{editing && !isMarkdown(openFile.name) && (
 								<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">