wiki-viewer 1.8.2 → 1.8.3

package/.next/standalone/src/components/editor/slash-commands.tsx

@@ -213,6 +213,155 @@ const commands: SlashCommand[] = [
 	},
 ];
 
+/** Small static preview rendered at the bottom of the menu for the focused command. */
+function CommandPreview({ cmd }: { cmd: SlashCommand }) {
+	switch (cmd.label) {
+		case "Heading 1":
+			return (
+				<p className="font-bold text-[18px] leading-tight text-foreground/80 truncate">
+					Heading 1
+				</p>
+			);
+		case "Heading 2":
+			return (
+				<p className="font-semibold text-[14px] leading-tight text-foreground/80 truncate">
+					Heading 2
+				</p>
+			);
+		case "Heading 3":
+			return (
+				<p className="font-medium text-[12px] leading-tight text-foreground/80 truncate">
+					Heading 3
+				</p>
+			);
+		case "Text":
+			return (
+				<p className="text-[11px] text-foreground/60 leading-snug">
+					The quick brown fox jumps over the lazy dog.
+				</p>
+			);
+		case "Bullet List":
+			return (
+				<ul className="list-disc pl-4 text-[10px] text-foreground/60 space-y-0.5">
+					<li>First item</li>
+					<li>Second item</li>
+					<li>Third item</li>
+				</ul>
+			);
+		case "Numbered List":
+			return (
+				<ol className="list-decimal pl-4 text-[10px] text-foreground/60 space-y-0.5">
+					<li>First item</li>
+					<li>Second item</li>
+					<li>Third item</li>
+				</ol>
+			);
+		case "Checklist":
+			return (
+				<div className="space-y-0.5 text-[10px] text-foreground/60">
+					<div className="flex items-center gap-1.5">
+						<span className="w-3 h-3 border border-foreground/30 rounded-sm inline-block shrink-0" />
+						Pending task
+					</div>
+					<div className="flex items-center gap-1.5">
+						<span className="w-3 h-3 border border-foreground/30 rounded-sm bg-foreground/20 inline-block shrink-0" />
+						Done task
+					</div>
+				</div>
+			);
+		case "Code Block":
+			return (
+				<pre className="bg-muted rounded px-2 py-1 text-[10px] font-mono text-foreground/70 leading-snug">
+					<code>{"const x = 42;"}</code>
+				</pre>
+			);
+		case "Blockquote":
+			return (
+				<div className="border-l-2 border-foreground/30 pl-2 text-[10px] text-foreground/60 italic">
+					A thought worth quoting.
+				</div>
+			);
+		case "Divider":
+			return <hr className="border-foreground/20 w-full" />;
+		case "Table":
+			return (
+				<table className="text-[9px] border-collapse w-full">
+					<thead>
+						<tr>
+							{["Col A", "Col B", "Col C"].map((h) => (
+								<th
+									key={h}
+									className="border border-foreground/20 px-1.5 py-0.5 text-left font-semibold bg-muted/50 text-foreground/70"
+								>
+									{h}
+								</th>
+							))}
+						</tr>
+					</thead>
+					<tbody>
+						{[["1", "2", "3"], ["4", "5", "6"]].map((row, i) => (
+							<tr key={i}>
+								{row.map((cell, j) => (
+									<td
+										key={j}
+										className="border border-foreground/20 px-1.5 py-0.5 text-foreground/50"
+									>
+										{cell}
+									</td>
+								))}
+							</tr>
+						))}
+					</tbody>
+				</table>
+			);
+		case "Image":
+			return (
+				<div className="flex items-center gap-2 text-foreground/50">
+					<ImageIcon className="h-8 w-8 text-foreground/20" />
+					<span className="text-[10px]">image.png</span>
+				</div>
+			);
+		case "Video":
+			return (
+				<div className="flex items-center gap-2 text-foreground/50">
+					<Video className="h-8 w-8 text-foreground/20" />
+					<span className="text-[10px]">video.mp4</span>
+				</div>
+			);
+		case "File":
+			return (
+				<div className="flex items-center gap-2 text-foreground/50">
+					<File className="h-8 w-8 text-foreground/20" />
+					<span className="text-[10px]">attachment.pdf</span>
+				</div>
+			);
+		case "Callout":
+			return (
+				<div className="flex items-start gap-1.5 bg-blue-500/10 border border-blue-500/20 rounded px-2 py-1">
+					<Info className="h-3 w-3 text-blue-500 shrink-0 mt-0.5" />
+					<span className="text-[10px] text-foreground/60">Info callout</span>
+				</div>
+			);
+		case "Warning":
+			return (
+				<div className="flex items-start gap-1.5 bg-yellow-500/10 border border-yellow-500/20 rounded px-2 py-1">
+					<AlertTriangle className="h-3 w-3 text-yellow-500 shrink-0 mt-0.5" />
+					<span className="text-[10px] text-foreground/60">Warning callout</span>
+				</div>
+			);
+		case "Math":
+			return (
+				<p className="font-mono text-[13px] text-foreground/70">
+					E = mc²
+				</p>
+			);
+		default:
+			return (
+				<p className="text-[10px] text-muted-foreground">{cmd.description}</p>
+			);
+	}
+}
+
 interface SlashCommandsProps {
 	editor: Editor | null;
 }
@@ -396,56 +545,82 @@ export function SlashCommands({ editor }: SlashCommandsProps) {
 	];
 
 	const flatCommands: SlashCommand[] = filtered;
+	const focusedCmd = flatCommands[selectedIndex] ?? null;
 
 	return (
 		<>
 			{open && filtered.length > 0 && (
 				<div
 					ref={menuRef}
-					className="absolute z-50 w-[280px] bg-popover border border-border rounded-lg shadow-lg py-1 overflow-hidden max-h-[380px] overflow-y-auto"
+					className="absolute z-50 w-[280px] bg-popover border border-border rounded-lg shadow-lg overflow-hidden"
 					style={{ top: position.top, left: position.left }}
 				>
-					{order.map((group) => {
-						const items = byCategory.get(group.key);
-						if (!items || items.length === 0) return null;
-						return (
-							<div key={group.key}>
-								<div className="text-[9px] uppercase tracking-wider text-muted-foreground px-3 pt-2 pb-1">
-									{group.title}
+					{/* Scrollable command list */}
+					<div className="max-h-[300px] overflow-y-auto py-1">
+						{order.map((group) => {
+							const items = byCategory.get(group.key);
+							if (!items || items.length === 0) return null;
+							return (
+								<div key={group.key}>
+									<div className="text-[9px] uppercase tracking-wider text-muted-foreground px-3 pt-2 pb-1">
+										{group.title}
+									</div>
+									{items.map((cmd) => {
+										const flatIndex = flatCommands.indexOf(cmd);
+										const Icon = cmd.icon;
+										const isFocused = flatIndex === selectedIndex;
+										return (
+											<button
+												key={cmd.label}
+												onMouseDown={(e) => {
+													e.preventDefault();
+													handleSelect(cmd);
+												}}
+												onMouseEnter={() => setSelectedIndex(flatIndex)}
+												className={cn(
+													"flex items-center gap-3 w-full px-3 py-1.5 text-left transition-colors",
+													isFocused
+														? "bg-accent text-accent-foreground ring-1 ring-inset ring-accent-foreground/10"
+														: "hover:bg-accent/50",
+												)}
+											>
+												<Icon
+													className={cn(
+														"h-4 w-4 shrink-0 transition-colors",
+														isFocused
+															? "text-accent-foreground"
+															: "text-muted-foreground",
+													)}
+												/>
+												<div className="min-w-0">
+													<p className="text-[12px] font-medium truncate">
+														{cmd.label}
+													</p>
+													<p
+														className={cn(
+															"text-[10px] truncate transition-colors",
+															isFocused
+																? "text-accent-foreground/70"
+																: "text-muted-foreground",
+														)}
+													>
+														{cmd.description}
+													</p>
+												</div>
+											</button>
+										);
+									})}
 								</div>
-								{items.map((cmd) => {
-									const flatIndex = flatCommands.indexOf(cmd);
-									const Icon = cmd.icon;
-									return (
-										<button
-											key={cmd.label}
-											onMouseDown={(e) => {
-												e.preventDefault();
-												handleSelect(cmd);
-											}}
-											onMouseEnter={() => setSelectedIndex(flatIndex)}
-											className={cn(
-												"flex items-center gap-3 w-full px-3 py-1.5 text-left transition-colors",
-												flatIndex === selectedIndex
-													? "bg-accent text-accent-foreground"
-													: "hover:bg-accent/50",
-											)}
-										>
-											<Icon className="h-4 w-4 text-muted-foreground shrink-0" />
-											<div className="min-w-0">
-												<p className="text-[12px] font-medium truncate">
-													{cmd.label}
-												</p>
-												<p className="text-[10px] text-muted-foreground truncate">
-													{cmd.description}
-												</p>
-											</div>
-										</button>
-									);
-								})}
-							</div>
-						);
-					})}
+							);
+						})}
+					</div>
+
+					{/* Preview pane for focused command */}
+					{focusedCmd && (
+						<div className="border-t border-border bg-muted/30 px-3 py-2 min-h-[52px] flex items-center">
+							<CommandPreview cmd={focusedCmd} />
+						</div>
+					)}
 				</div>
 			)}
 			{renderPopover()}

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

@@ -7,6 +7,23 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
 import { Button } from "@/components/ui/button";
 import { withWs, wsFetch } from "@/lib/workspace-client";
+import { FileFallbackViewer } from "@/components/editor/file-fallback-viewer";
+
+// Heuristic binary sniff: a NUL byte never appears in UTF-8/UTF-16LE text we
+// care about, and a high ratio of control chars (excluding tab/newline/CR)
+// signals binary. Only inspect a prefix \u2014 enough to classify cheaply.
+function looksBinary(bytes: Uint8Array): boolean {
+	const n = Math.min(bytes.length, 8192);
+	if (n === 0) return false;
+	let suspicious = 0;
+	for (let i = 0; i < n; i++) {
+		const b = bytes[i];
+		if (b === 0) return true; // NUL \u2192 definitely binary
+		// Allow tab(9), LF(10), CR(13); flag other C0 control chars.
+		if (b < 9 || (b > 13 && b < 32)) suspicious++;
+	}
+	return suspicious / n > 0.3;
+}
 
 interface SourceViewerProps {
 	path: string;
@@ -73,6 +90,7 @@ function formatBadge(filename: string): string {
 
 export function SourceViewer({ path }: SourceViewerProps) {
 	const [content, setContent] = useState<string | null>(null);
+	const [binary, setBinary] = useState(false);
 	const [loading, setLoading] = useState(true);
 	const [wrap, setWrap] = useState(false);
 	const [copied, setCopied] = useState(false);
@@ -86,8 +104,12 @@ export function SourceViewer({ path }: SourceViewerProps) {
 		try {
 			const res = await wsFetch(assetUrl);
 			if (res.ok) {
-				const text = await res.text();
-				setContent(text);
+				const bytes = new Uint8Array(await res.arrayBuffer());
+				if (looksBinary(bytes)) {
+					setBinary(true);
+				} else {
+					setContent(new TextDecoder("utf-8").decode(bytes));
+				}
 			}
 		} catch {
 			/* ignore */
@@ -129,6 +151,11 @@ export function SourceViewer({ path }: SourceViewerProps) {
 		setTimeout(() => setCopied(false), 2000);
 	};
 
+	// Detected binary at runtime \u2192 reuse the download/reveal fallback UI.
+	if (binary) {
+		return <FileFallbackViewer path={path} title={filename} />;
+	}
+
 	return (
 		<div className="flex-1 flex flex-col overflow-hidden">
 			<ViewerToolbar

package/.next/standalone/src/components/search/search-command-dialog.tsx

@@ -1,10 +1,24 @@
 "use client";
 
 /**
- * Command palette (cmd+k / ctrl+k) for full-text search.
+ * Command palette (cmd+k / ctrl+k) for full-text search + app actions.
  * Mounts once in the app shell; visibility is driven by the search store.
+ *
+ * Action mode activates when the query is empty or starts with ">".
+ * New optional props let the parent wire page-level callbacks; they default
+ * to no-ops so this component compiles without any parent changes.
  */
 import { useEffect } from "react";
+import {
+	AlignCenter,
+	Bot,
+	Copy,
+	FilePlus,
+	Moon,
+	PanelLeft,
+	Sun,
+} from "lucide-react";
+import { useTheme } from "next-themes";
 import {
 	CommandDialog,
 	CommandEmpty,
@@ -12,15 +26,33 @@ import {
 	CommandInput,
 	CommandItem,
 	CommandList,
+	CommandSeparator,
 } from "@/components/ui/command";
 import { useSearchStore } from "@/stores/search-store";
+import { useAIPanelStore } from "@/stores/ai-panel-store";
+import {
+	useViewWidthStore,
+	VIEW_WIDTH_LABEL,
+	VIEW_WIDTH_ORDER,
+} from "@/stores/view-width-store";
 import { SnippetText } from "./snippet-text";
 
+export interface SearchCommandDialogProps {
+	onOpenFile: (relPath: string) => void;
+	/** Wire to page-level sidebar toggle. Defaults to no-op. */
+	onToggleSidebar?: () => void;
+	/** Wire to page-level new-file action. Defaults to no-op. */
+	onNewFile?: () => void;
+	/** Wire to page-level copy-path action. Defaults to no-op. */
+	onCopyPath?: () => void;
+}
+
 export function SearchCommandDialog({
 	onOpenFile,
-}: {
-	onOpenFile: (relPath: string) => void;
-}) {
+	onToggleSidebar = () => undefined,
+	onNewFile = () => undefined,
+	onCopyPath = () => undefined,
+}: SearchCommandDialogProps) {
 	const open = useSearchStore((s) => s.open);
 	const setOpen = useSearchStore((s) => s.setOpen);
 	const query = useSearchStore((s) => s.query);
@@ -30,6 +62,18 @@ export function SearchCommandDialog({
 	const truncated = useSearchStore((s) => s.truncated);
 	const search = useSearchStore((s) => s.search);
 
+	const { resolvedTheme, setTheme } = useTheme();
+	const toggleAIPanel = useAIPanelStore((s) => s.toggle);
+	const viewWidth = useViewWidthStore((s) => s.width);
+	const cycleViewWidth = useViewWidthStore((s) => s.cycle);
+
+	// Action mode: empty query or ">" prefix (VS Code convention).
+	const trimmed = query.trimStart();
+	const isActionMode = trimmed === "" || trimmed.startsWith(">");
+
+	// The bare text to actually search files (strip leading ">").
+	const fileQuery = isActionMode ? "" : query;
+
 	// Global cmd+k / ctrl+k toggle.
 	useEffect(() => {
 		function onKey(e: KeyboardEvent) {
@@ -42,67 +86,160 @@ export function SearchCommandDialog({
 		return () => window.removeEventListener("keydown", onKey);
 	}, [open, setOpen]);
 
-	// Debounced search as the query changes while the palette is open.
+	// Debounced search — only fires when NOT in action mode.
 	useEffect(() => {
 		if (!open) return;
+		if (isActionMode) return;
 		const id = setTimeout(() => {
-			void search(query);
+			void search(fileQuery);
 		}, 120);
 		return () => clearTimeout(id);
-	}, [query, open, search]);
+	}, [fileQuery, isActionMode, open, search]);
+
+	// Helper: run action then close.
+	function runAction(fn: () => void) {
+		fn();
+		setOpen(false);
+		setQuery("");
+	}
+
+	// Next view-width label for display.
+	const nextWidthIdx =
+		(VIEW_WIDTH_ORDER.indexOf(viewWidth) + 1) % VIEW_WIDTH_ORDER.length;
+	const nextWidthLabel = VIEW_WIDTH_LABEL[VIEW_WIDTH_ORDER[nextWidthIdx]];
 
 	return (
 		<CommandDialog
 			open={open}
-			onOpenChange={setOpen}
+			onOpenChange={(v) => {
+				setOpen(v);
+				if (!v) setQuery("");
+			}}
 			// cmdk's built-in fuzzy filter would re-rank our BM25 results; disable it.
 			shouldFilter={false}
 		>
 			<CommandInput
-				placeholder="Search files…"
+				placeholder="Search files… ( > for actions )"
 				value={query}
 				onValueChange={setQuery}
 			/>
 			<CommandList>
-				{loading && (
-					<div className="px-3 py-2 text-xs text-muted-foreground">
-						Searching…
-					</div>
-				)}
-				{!loading && query.trim() !== "" && results.length === 0 && (
-					<CommandEmpty>No matches.</CommandEmpty>
-				)}
-				{results.length > 0 && (
-					<CommandGroup
-						heading={
-							truncated
-								? "Top results (refine query for more)"
-								: "Results"
-						}
-					>
-						{results.map((r) => (
-							<CommandItem
-								key={r.path}
-								value={r.path}
-								onSelect={() => {
-									onOpenFile(r.path);
-									setOpen(false);
-								}}
-							>
-								<div className="flex min-w-0 flex-col gap-0.5">
-									<span className="truncate font-mono text-xs">
-										{r.path}
-									</span>
-									{r.snippet && (
-										<span className="truncate text-xs text-muted-foreground">
-											<SnippetText html={r.snippet} />
-										</span>
-									)}
-								</div>
-							</CommandItem>
-						))}
+				{/* ── Action mode ─────────────────────────────────────── */}
+				{isActionMode && (
+					<CommandGroup heading="Actions">
+						<CommandItem
+							value="toggle-dark-mode"
+							onSelect={() =>
+								runAction(() =>
+									setTheme(resolvedTheme === "dark" ? "light" : "dark"),
+								)
+							}
+						>
+							{resolvedTheme === "dark" ? (
+								<Sun className="mr-2 h-4 w-4" />
+							) : (
+								<Moon className="mr-2 h-4 w-4" />
+							)}
+							{resolvedTheme === "dark"
+								? "Switch to light mode"
+								: "Switch to dark mode"}
+						</CommandItem>
+
+						<CommandItem
+							value="toggle-ai-panel"
+							onSelect={() => runAction(toggleAIPanel)}
+						>
+							<Bot className="mr-2 h-4 w-4" />
+							Toggle AI panel
+						</CommandItem>
+
+						<CommandItem
+							value="toggle-sidebar"
+							onSelect={() => runAction(onToggleSidebar)}
+						>
+							<PanelLeft className="mr-2 h-4 w-4" />
+							Toggle sidebar
+						</CommandItem>
+
+						<CommandItem
+							value="new-file"
+							onSelect={() => runAction(onNewFile)}
+						>
+							<FilePlus className="mr-2 h-4 w-4" />
+							New file
+						</CommandItem>
+
+						<CommandItem
+							value="copy-path"
+							onSelect={() => runAction(onCopyPath)}
+						>
+							<Copy className="mr-2 h-4 w-4" />
+							Copy current file path
+						</CommandItem>
+
+						<CommandItem
+							value="cycle-view-width"
+							onSelect={() => runAction(cycleViewWidth)}
+						>
+							<AlignCenter className="mr-2 h-4 w-4" />
+							<span>
+								Change view width{" "}
+								<span className="text-muted-foreground">
+									({VIEW_WIDTH_LABEL[viewWidth]} → {nextWidthLabel})
+								</span>
+							</span>
+						</CommandItem>
 					</CommandGroup>
 				)}
+
+				{/* ── File-search mode ────────────────────────────────── */}
+				{!isActionMode && (
+					<>
+						{loading && (
+							<div className="px-3 py-2 text-xs text-muted-foreground">
+								Searching…
+							</div>
+						)}
+						{!loading && fileQuery.trim() !== "" && results.length === 0 && (
+							<CommandEmpty>No matches.</CommandEmpty>
+						)}
+						{results.length > 0 && (
+							<>
+								<CommandSeparator />
+								<CommandGroup
+									heading={
+										truncated
+											? "Top results (refine query for more)"
+											: "Results"
+									}
+								>
+									{results.map((r) => (
+										<CommandItem
+											key={r.path}
+											value={r.path}
+											onSelect={() => {
+												onOpenFile(r.path);
+												setOpen(false);
+												setQuery("");
+											}}
+										>
+											<div className="flex min-w-0 flex-col gap-0.5">
+												<span className="truncate font-mono text-xs">
+													{r.path}
+												</span>
+												{r.snippet && (
+													<span className="truncate text-xs text-muted-foreground">
+														<SnippetText html={r.snippet} />
+													</span>
+												)}
+											</div>
+										</CommandItem>
+									))}
+								</CommandGroup>
+							</>
+						)}
+					</>
+				)}
 			</CommandList>
 		</CommandDialog>
 	);