@research-copilot/plugin 1.1.17 → 1.1.19

package/dist/skills/llm-wiki/workbench/web/src/components/CommandMenu.tsx

@@ -0,0 +1,65 @@
+import type { CommandItem as CommandItemType } from "@/lib/api";
+import { cn } from "@/lib/utils";
+
+interface Props {
+	open: boolean;
+	query: string;
+	items: CommandItemType[];
+	selectedIndex: number;
+	onSelect: (item: CommandItemType) => void;
+}
+
+function sourceLabel(item: CommandItemType): string {
+	if (item.source === "builtin") return item.skillPath ? "项目" : "内置";
+	if (item.source === "pi-default") return "pi";
+	return "全局";
+}
+
+export function CommandMenu({ open, query, items, selectedIndex, onSelect }: Props) {
+	if (!open) return null;
+
+	const groups = [
+		{ label: "内置", items: items.filter((item) => item.source === "builtin" && !item.skillPath) },
+		{ label: "项目 Skill", items: items.filter((item) => item.source === "builtin" && item.skillPath) },
+		{ label: "pi 默认", items: items.filter((item) => item.source === "pi-default") },
+		{ label: "用户全局", items: items.filter((item) => item.source === "user-global") },
+	].filter((group) => group.items.length > 0);
+	let index = -1;
+
+	return (
+		<div className="popup-menu">
+			{groups.length === 0 ? (
+				<div className="popup-item text-[var(--app-muted)]">没有匹配命令</div>
+			) : (
+				groups.map((group) => (
+					<div key={group.label}>
+						<div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wide text-[var(--app-muted)]">
+							{group.label}
+							{query && <span className="normal-case opacity-70"> / {query}</span>}
+						</div>
+						{group.items.map((item) => {
+							index += 1;
+							const selected = index === selectedIndex;
+							return (
+								<button
+									key={`${item.source}:${item.slug}`}
+									type="button"
+									onMouseDown={(e) => e.preventDefault()}
+									onClick={() => onSelect(item)}
+									className={cn("popup-item w-full text-left", selected && "popup-item-selected")}
+								>
+									<span className="min-w-20 font-mono text-xs text-[var(--app-accent)]">{item.slug}</span>
+									<span className="min-w-0 flex-1">
+										<span className="block truncate">{item.name}</span>
+										<span className="popup-item-desc block truncate">{item.description}</span>
+									</span>
+									<span className="shrink-0 text-[10px] text-[var(--app-muted)]">{sourceLabel(item)}</span>
+								</button>
+							);
+						})}
+					</div>
+				))
+			)}
+		</div>
+	);
+}

package/dist/skills/llm-wiki/workbench/web/src/components/ExportButtons.tsx

@@ -0,0 +1,54 @@
+import { FileDown, FileText, Globe, Presentation, Table } from "lucide-react";
+import type { ComponentType } from "react";
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import type { ExportKind } from "@/lib/api";
+
+const EXPORTS: Array<{
+	kind: ExportKind;
+	label: string;
+	icon: ComponentType<{ className?: string }>;
+}> = [
+	{ kind: "pdf", label: "PDF", icon: FileDown },
+	{ kind: "docx", label: "Word", icon: FileText },
+	{ kind: "pptx", label: "PPT", icon: Presentation },
+	{ kind: "xlsx", label: "Excel", icon: Table },
+	{ kind: "html", label: "HTML", icon: Globe },
+];
+
+interface Props {
+	disabled: boolean;
+	disabledReason: string;
+	onExport: (kind: ExportKind) => void;
+}
+
+export function ExportButtons({ disabled, disabledReason, onExport }: Props) {
+	return (
+		<div className="export-bar">
+			<span className="export-label">导出</span>
+			{EXPORTS.map((item) => {
+				const Icon = item.icon;
+				return (
+					<Tooltip key={item.kind}>
+						<TooltipTrigger asChild>
+							<span>
+								<button
+									type="button"
+									disabled={disabled}
+									onClick={() => onExport(item.kind)}
+									className="export-btn"
+								>
+									<Icon className="size-3.5" />
+									{item.label}
+								</button>
+							</span>
+						</TooltipTrigger>
+						<TooltipContent side="top">
+							{disabled ? disabledReason : `导出为 ${item.label}`}
+						</TooltipContent>
+					</Tooltip>
+				);
+			})}
+		</div>
+	);
+}

package/dist/skills/llm-wiki/workbench/web/src/components/GraphPanel.tsx

@@ -0,0 +1,516 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Moon, RefreshCw, RotateCcw, Sun } from "lucide-react";
+import {
+	createGraphEngine,
+	GraphDiffQueue,
+	type GraphData,
+	type GraphDiff,
+	type GraphEngine,
+	type GraphOpenPagePayload,
+	type PinMap,
+	type Selection,
+	type ThemeId,
+} from "@llm-wiki/graph-engine";
+
+import {
+	getGraphData,
+	getGraphLayout,
+	putGraphLayout,
+	rebuildGraph,
+} from "@/lib/api";
+import { cn } from "@/lib/utils";
+
+interface Props {
+	currentKnowledgeBaseName: string | null;
+	currentKnowledgeBasePath: string | null;
+	theme: "dark" | "light";
+	onToggleTheme?: () => void;
+	onOpenPage?: (payload: GraphOpenPagePayload) => void;
+	onGraphDataChange?: (data: GraphData | null) => void;
+	onSelectionChange?: (selection: Selection | null) => void;
+	selectionCommand?: { id: string; type: "clear" | "clear-selection" | "neighbors" };
+	focusPath?: string | null;
+	pendingDiff?: GraphDiff | null;
+	refreshToken?: number;
+	onDiffConsumed?: () => void;
+}
+
+type GraphStatus = "idle" | "loading" | "building" | "ready" | "error";
+
+interface ResetNotice {
+	pins: PinMap;
+	count: number;
+}
+
+interface PendingAnimation {
+	token: number;
+	diff: GraphDiff;
+}
+
+export function GraphPanel({
+	currentKnowledgeBaseName,
+	currentKnowledgeBasePath,
+	theme,
+	onToggleTheme,
+	onOpenPage,
+	onGraphDataChange,
+	onSelectionChange,
+	selectionCommand,
+	focusPath,
+	pendingDiff,
+	refreshToken = 0,
+	onDiffConsumed,
+}: Props) {
+	const hostRef = useRef<HTMLDivElement | null>(null);
+	const engineRef = useRef<GraphEngine | null>(null);
+	const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const resetNoticeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const activeKbPathRef = useRef<string | null>(currentKnowledgeBasePath);
+	const graphThemeRef = useRef<ThemeId>(theme === "dark" ? "mo-ye" : "shan-shui");
+	const layoutPinsRef = useRef<PinMap>({});
+	const loadRequestRef = useRef(0);
+	const onOpenPageRef = useRef(onOpenPage);
+	const onGraphDataChangeRef = useRef(onGraphDataChange);
+	const onSelectionChangeRef = useRef(onSelectionChange);
+	const diffQueueRef = useRef(new GraphDiffQueue({ visible: true }));
+	const lastRefreshTokenRef = useRef(refreshToken);
+	const devGraphTestRef = useRef("");
+	const animationTokenRef = useRef(0);
+	const [data, setData] = useState<GraphData | null>(null);
+	const [resetNotice, setResetNotice] = useState<ResetNotice | null>(null);
+	const [status, setStatus] = useState<GraphStatus>("idle");
+	const [error, setError] = useState<string | null>(null);
+	const [buildState, setBuildState] = useState<"none" | "started" | "queued">("none");
+	const [animationState, setAnimationState] = useState<"idle" | "playing" | "queued">("idle");
+	const [pendingAnimation, setPendingAnimation] = useState<PendingAnimation | null>(null);
+	const [animationReadyToken, setAnimationReadyToken] = useState(0);
+
+	const graphTheme: ThemeId = theme === "dark" ? "mo-ye" : "shan-shui";
+
+	useLayoutEffect(() => {
+		activeKbPathRef.current = currentKnowledgeBasePath;
+	}, [currentKnowledgeBasePath]);
+
+	useLayoutEffect(() => {
+		graphThemeRef.current = graphTheme;
+	}, [graphTheme]);
+
+	useLayoutEffect(() => {
+		onOpenPageRef.current = onOpenPage;
+	}, [onOpenPage]);
+
+	useLayoutEffect(() => {
+		onGraphDataChangeRef.current = onGraphDataChange;
+	}, [onGraphDataChange]);
+
+	useLayoutEffect(() => {
+		onSelectionChangeRef.current = onSelectionChange;
+	}, [onSelectionChange]);
+
+	const applyLayoutPins = useCallback((pins: PinMap): void => {
+		layoutPinsRef.current = pins;
+	}, []);
+
+	const loadGraph = useCallback(async () => {
+		const requestId = ++loadRequestRef.current;
+		const kbPath = currentKnowledgeBasePath;
+		if (!kbPath) {
+			setData(null);
+			onGraphDataChangeRef.current?.(null);
+			applyLayoutPins({});
+			onSelectionChangeRef.current?.(null);
+			setStatus("idle");
+			setError(null);
+			return true;
+		}
+		setStatus((current) => (current === "building" ? "building" : "loading"));
+		setError(null);
+		try {
+			const [result, layout] = await Promise.all([getGraphData(kbPath), getGraphLayout(kbPath)]);
+			if (loadRequestRef.current !== requestId || activeKbPathRef.current !== kbPath) return false;
+			applyLayoutPins(layout.layout.pins);
+			if (result.needsBuild) {
+				setData(null);
+				onGraphDataChangeRef.current?.(null);
+				onSelectionChangeRef.current?.(null);
+				setStatus("building");
+				const nextBuildState = await rebuildGraph(kbPath);
+				if (loadRequestRef.current !== requestId || activeKbPathRef.current !== kbPath) return false;
+				setBuildState(nextBuildState);
+				return true;
+			}
+			setData(result.data);
+			onGraphDataChangeRef.current?.(result.data);
+			onSelectionChangeRef.current?.(null);
+			setStatus("ready");
+			setBuildState("none");
+			return true;
+		} catch (err) {
+			if (loadRequestRef.current !== requestId || activeKbPathRef.current !== kbPath) return false;
+			setData(null);
+			onGraphDataChangeRef.current?.(null);
+			applyLayoutPins({});
+			onSelectionChangeRef.current?.(null);
+			setStatus("error");
+			setError(err instanceof Error ? err.message : String(err));
+			return false;
+		}
+	}, [applyLayoutPins, currentKnowledgeBasePath]);
+
+	useEffect(() => {
+		void loadGraph();
+	}, [loadGraph]);
+
+	useEffect(() => {
+		return () => {
+			if (persistTimerRef.current) window.clearTimeout(persistTimerRef.current);
+			if (resetNoticeTimerRef.current) window.clearTimeout(resetNoticeTimerRef.current);
+		};
+	}, []);
+
+	useEffect(() => {
+		if (persistTimerRef.current) {
+			window.clearTimeout(persistTimerRef.current);
+			persistTimerRef.current = null;
+		}
+		diffQueueRef.current = new GraphDiffQueue({ visible: true });
+		setResetNotice(null);
+		setPendingAnimation(null);
+		setAnimationState("idle");
+	}, [currentKnowledgeBasePath]);
+
+	const persistPins = useCallback(async (pins: PinMap): Promise<void> => {
+		const kbPath = activeKbPathRef.current;
+		applyLayoutPins(pins);
+		if (!kbPath) return;
+		if (persistTimerRef.current) window.clearTimeout(persistTimerRef.current);
+		persistTimerRef.current = window.setTimeout(() => {
+			if (activeKbPathRef.current !== kbPath) return;
+			void putGraphLayout(kbPath, pins).catch((err) => {
+				if (activeKbPathRef.current !== kbPath) return;
+				setError(err instanceof Error ? err.message : String(err));
+			});
+		}, 280);
+	}, [applyLayoutPins]);
+
+	const writePinsImmediately = useCallback(async (pins: PinMap): Promise<void> => {
+		const kbPath = activeKbPathRef.current;
+		applyLayoutPins(pins);
+		engineRef.current?.setPins(pins);
+		if (!kbPath) return;
+		if (persistTimerRef.current) window.clearTimeout(persistTimerRef.current);
+		try {
+			await putGraphLayout(kbPath, pins);
+		} catch (err) {
+			if (activeKbPathRef.current !== kbPath) return;
+			setError(err instanceof Error ? err.message : String(err));
+		}
+	}, [applyLayoutPins]);
+
+	const dismissResetNoticeLater = useCallback(() => {
+		if (resetNoticeTimerRef.current) window.clearTimeout(resetNoticeTimerRef.current);
+		resetNoticeTimerRef.current = window.setTimeout(() => {
+			setResetNotice(null);
+			resetNoticeTimerRef.current = null;
+		}, 8000);
+	}, []);
+
+	const resetLayout = useCallback(() => {
+		const previousPins = layoutPinsRef.current;
+		const previousCount = Object.keys(previousPins).length;
+		engineRef.current?.resetLayout();
+		if (previousCount === 0) {
+			setResetNotice(null);
+			return;
+		}
+		setResetNotice({ pins: previousPins, count: previousCount });
+		dismissResetNoticeLater();
+	}, [dismissResetNoticeLater]);
+
+	const undoResetLayout = useCallback(() => {
+		const notice = resetNotice;
+		if (!notice) return;
+		if (resetNoticeTimerRef.current) window.clearTimeout(resetNoticeTimerRef.current);
+		resetNoticeTimerRef.current = null;
+		setResetNotice(null);
+		void writePinsImmediately(notice.pins);
+	}, [resetNotice, writePinsImmediately]);
+
+	const playDiff = useCallback(async function run(diff: GraphDiff): Promise<void> {
+		const engine = engineRef.current;
+		if (!engine) {
+			setAnimationState("queued");
+			return;
+		}
+		setAnimationState("playing");
+		await engine.applyDiff(diff);
+		const decision = diffQueueRef.current.finishAnimation();
+		if (decision.action === "consume" && decision.diff) {
+			void run(decision.diff);
+			return;
+		}
+		setAnimationState("idle");
+	}, []);
+
+	const enqueueDiff = useCallback(async (diff: GraphDiff) => {
+		const queue = diffQueueRef.current;
+		const engine = engineRef.current;
+		queue.setVisible(status === "ready");
+		if (engine?.isDragging()) queue.setDragging(true);
+		const decision = queue.push(diff);
+		if (decision.action === "consume" && decision.diff) {
+			await playDiff(decision.diff);
+		} else if (decision.snapshot.pending) {
+			setAnimationState("queued");
+		}
+	}, [playDiff, status]);
+
+	useEffect(() => {
+		if (!hostRef.current || !data) {
+			engineRef.current?.destroy();
+			engineRef.current = null;
+			return;
+		}
+		engineRef.current?.destroy();
+		engineRef.current = createGraphEngine(hostRef.current, {
+			data,
+			pins: layoutPinsRef.current,
+			theme: graphThemeRef.current,
+			capabilities: {
+				onOpenPage: (payload) => onOpenPageRef.current?.(payload),
+				onSelectionChange: (nextSelection) => onSelectionChangeRef.current?.(nextSelection),
+				onSelectionClear: () => onSelectionChangeRef.current?.(null),
+				onAsk: (nextSelection) => onSelectionChangeRef.current?.(nextSelection),
+				persistPins,
+				onDragStateChange: (dragging) => {
+					const decision = diffQueueRef.current.setDragging(dragging);
+					if (!dragging && decision.action === "consume" && decision.diff) {
+						void playDiff(decision.diff);
+					}
+				},
+			},
+		});
+		return () => {
+			engineRef.current?.destroy();
+			engineRef.current = null;
+		};
+	}, [data, persistPins, playDiff]);
+
+	useEffect(() => {
+		engineRef.current?.setTheme(graphTheme);
+	}, [graphTheme]);
+
+	useEffect(() => {
+		if (!selectionCommand || status !== "ready") return;
+		if (selectionCommand.type === "clear") {
+			engineRef.current?.clearInteraction();
+			onSelectionChangeRef.current?.(null);
+		}
+		if (selectionCommand.type === "clear-selection") {
+			engineRef.current?.clearSelection();
+			onSelectionChangeRef.current?.(null);
+		}
+		if (selectionCommand.type === "neighbors") {
+			const selected = engineRef.current?.select({ kind: "neighbors", id: selectionCommand.id });
+			if (selected) onSelectionChangeRef.current?.(selected);
+		}
+	}, [selectionCommand, status]);
+
+	useEffect(() => {
+		if (
+			!data
+			|| status !== "ready"
+			|| !engineRef.current
+			|| !pendingAnimation
+			|| animationReadyToken !== pendingAnimation.token
+		) return;
+		const diff = pendingAnimation.diff;
+		setPendingAnimation(null);
+		void enqueueDiff(diff);
+	}, [animationReadyToken, data, enqueueDiff, pendingAnimation, status]);
+
+	useEffect(() => {
+		const decision = diffQueueRef.current.setVisible(status === "ready");
+		if (decision.action === "consume" && decision.diff) {
+			void playDiff(decision.diff);
+		} else if (decision.snapshot.pending) {
+			setAnimationState("queued");
+		}
+	}, [playDiff, status]);
+
+	useEffect(() => {
+		if (!pendingDiff) return;
+		const token = ++animationTokenRef.current;
+		lastRefreshTokenRef.current = refreshToken;
+		setAnimationState("queued");
+		setPendingAnimation({
+			token,
+			diff: pendingDiff,
+		});
+		void loadGraph().then((loaded) => {
+			if (!loaded) return;
+			setAnimationReadyToken(token);
+			onDiffConsumed?.();
+		});
+	}, [loadGraph, onDiffConsumed, pendingDiff, refreshToken]);
+
+	useEffect(() => {
+		if (pendingDiff) return;
+		if (lastRefreshTokenRef.current === refreshToken) return;
+		lastRefreshTokenRef.current = refreshToken;
+		void loadGraph();
+	}, [loadGraph, pendingDiff, refreshToken]);
+
+	useEffect(() => {
+		if (!focusPath || !engineRef.current || status !== "ready") return;
+		engineRef.current.focusNode(focusPath);
+	}, [data, focusPath, status]);
+
+	useEffect(() => {
+		if (!import.meta.env.DEV || !data || !engineRef.current || status !== "ready") return;
+		const params = new URLSearchParams(window.location.search);
+		const mode = params.get("graphTest");
+		if (mode !== "reduced" && mode !== "motion") return;
+		const key = `${mode}:${data.meta.build_date}:${data.nodes.length}:${data.edges.length}`;
+		if (devGraphTestRef.current === key) return;
+		devGraphTestRef.current = key;
+		const diff = sampleDiffForGraphTest(data);
+		void engineRef.current.applyDiff(diff, {
+			reducedMotion: mode === "reduced",
+			durationMs: mode === "motion" ? 650 : undefined,
+		});
+	}, [data, status]);
+
+	return (
+		<div className="graph-screen" data-graph-status={status} data-graph-theme={graphTheme} data-graph-animation={animationState}>
+			<header className="statusbar">
+				<div className="statusbar-left">
+					<span className={cn("status-dot", status === "building" && "status-dot-warn", status === "error" && "status-dot-error")} />
+					<span className="status-kb">
+						{currentKnowledgeBaseName ?? <span className="italic opacity-60">未选择</span>}
+					</span>
+					<span className="status-pill">图谱</span>
+				</div>
+				<div className="statusbar-right">
+					<button
+						type="button"
+						className="status-pill status-pill-button"
+						onClick={onToggleTheme}
+						title={theme === "dark" ? "切换浅色主题" : "切换暗色主题"}
+						aria-label={theme === "dark" ? "切换浅色主题" : "切换暗色主题"}
+					>
+						{theme === "dark" ? <Moon /> : <Sun />}
+					</button>
+					<button
+						type="button"
+						className="status-pill status-pill-button"
+						onClick={resetLayout}
+						disabled={!currentKnowledgeBasePath || status !== "ready"}
+						title="重置布局"
+					>
+						<RotateCcw />
+						重置布局
+					</button>
+					<button
+						type="button"
+						className="status-pill status-pill-button"
+							onClick={() => {
+								const kbPath = activeKbPathRef.current;
+								if (!kbPath) return;
+								setStatus("building");
+								void rebuildGraph(kbPath)
+									.then((next) => {
+										if (activeKbPathRef.current === kbPath) setBuildState(next);
+									})
+									.catch((err) => {
+										if (activeKbPathRef.current !== kbPath) return;
+										setStatus("error");
+										setError(err instanceof Error ? err.message : String(err));
+									});
+						}}
+						disabled={!currentKnowledgeBasePath || status === "building"}
+						title="重新构建图谱"
+					>
+						<RefreshCw className={cn(status === "building" && "animate-spin")} />
+						重构
+					</button>
+				</div>
+			</header>
+
+			<div className="graph-stage">
+				<div ref={hostRef} className={cn("graph-host", !data && "graph-host-empty")} />
+				{status !== "ready" && (
+					<div className="graph-state" data-testid="graph-state">
+						<div className="graph-state-title">{statusTitle(status)}</div>
+						<div className="graph-state-copy">
+							{statusCopy(status, Boolean(currentKnowledgeBasePath), buildState, error)}
+						</div>
+					</div>
+				)}
+				{status === "ready" && data && (
+					<div className="graph-metrics">
+						<span>{data.nodes.length} 节点</span>
+						<span>{data.edges.length} 关联</span>
+					</div>
+				)}
+				{animationState !== "idle" && (
+					<div className="graph-growth-indicator" data-testid="graph-growth-indicator">
+						{animationState === "playing" ? "图谱更新中" : "图谱更新待播放"}
+					</div>
+				)}
+				{resetNotice && (
+					<div className="graph-toast" role="status">
+						<span>已重置 {resetNotice.count} 个钉位</span>
+						<button type="button" onClick={undoResetLayout}>
+							撤销
+						</button>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function statusTitle(status: GraphStatus): string {
+	if (status === "idle") return "选择知识库后查看图谱";
+	if (status === "loading") return "正在读取图谱";
+	if (status === "building") return "图谱构建中";
+	if (status === "error") return "图谱暂时不可用";
+	return "";
+}
+
+function statusCopy(
+	status: GraphStatus,
+	hasKnowledgeBase: boolean,
+	buildState: "none" | "started" | "queued",
+	error: string | null,
+): string {
+	if (!hasKnowledgeBase) return "左侧选择一个知识库后，这里会显示它的结构地图。";
+	if (status === "loading") return "正在读取当前知识库的图谱数据。";
+	if (status === "building") {
+		return buildState === "queued"
+			? "已有构建在进行，新的构建请求已排队。"
+			: "还没有图谱数据，正在后台构建。完成后会自动刷新。";
+	}
+	if (status === "error") return error ?? "请稍后重试。";
+	return "";
+}
+
+function sampleDiffForGraphTest(data: GraphData): GraphDiff {
+	const node = data.nodes[0];
+	const edge = data.edges[0];
+	const community = node?.community ? String(node.community) : null;
+	return {
+		addedNodes: node ? [node.id] : [],
+		removedNodes: [],
+		recoloredNodes: [],
+		addedEdges: edge ? [edge.id] : [],
+		removedEdges: [],
+		newCommunities: community ? [community] : [],
+		stats: {
+			nodeCount: data.nodes.length,
+			edgeCount: data.edges.length,
+			communityCount: new Set(data.nodes.map((item) => item.community).filter(Boolean)).size,
+		},
+	};
+}

package/dist/skills/llm-wiki/workbench/web/src/components/GraphReader.tsx

@@ -0,0 +1,48 @@
+import type { GraphOpenPagePayload } from "@llm-wiki/graph-engine";
+
+import { MarkdownView } from "./MarkdownView";
+import {
+	graphReaderActions,
+	graphReaderMetaItems,
+	type GraphReaderActionId,
+} from "@/lib/graph-reader";
+
+interface Props {
+	payload: GraphOpenPagePayload;
+	content: string;
+	loading: boolean;
+	error: string | null;
+	onOpenPage: (path: string) => void;
+	onWikiLinkSeen: (path: string) => void;
+	onAction: (actionId: GraphReaderActionId) => void;
+}
+
+export function GraphReader({ payload, content, loading, error, onOpenPage, onWikiLinkSeen, onAction }: Props) {
+	const metaItems = graphReaderMetaItems(payload);
+	return (
+		<article className="graph-reader-drawer">
+			<div className="graph-reader-meta-row">
+				{metaItems.map((item) => (
+					<span key={item}>{item}</span>
+				))}
+			</div>
+			<div className="graph-reader-actions">
+				{graphReaderActions().map((action) => (
+					<button
+						key={action.id}
+						type="button"
+						className="graph-reader-action"
+						onClick={() => onAction(action.id)}
+					>
+						{action.label}
+					</button>
+				))}
+			</div>
+			{loading && <div className="text-muted-foreground">加载中...</div>}
+			{error && <div className="whitespace-pre-wrap text-destructive">{error}</div>}
+			{!loading && !error && (
+				<MarkdownView content={content} onOpenPage={onOpenPage} onWikiLinkSeen={onWikiLinkSeen} />
+			)}
+		</article>
+	);
+}