@joekytc/dsh-swarm 0.1.2 → 0.2.0

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

@@ -0,0 +1,52 @@
+import React from "react";
+
+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 (
+		<React.Fragment>
+		<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} autoEmitWikiLinks={false} />
+			)}
+		</article>
+		</React.Fragment>
+	);
+}

package/skills/llm-wiki-skill/workbench/web/src/components/GraphSelection.tsx

@@ -0,0 +1,100 @@
+import { MessageSquarePlus, Plus, Send } from "lucide-react";
+import type { Selection, SelectionAction } from "@llm-wiki/graph-engine";
+
+import { graphSelectionViewModel } from "../lib/graph-selection-drawer";
+
+interface Props {
+	title: string;
+	selection: Selection;
+	freeText: string;
+	onFreeTextChange: (value: string) => void;
+	onNeighbors: () => void;
+	onAsk: (action: SelectionAction | null) => void;
+	onAskInNewConversation: (action: SelectionAction | null) => void;
+}
+
+export function GraphSelection({
+	title,
+	selection,
+	freeText,
+	onFreeTextChange,
+	onNeighbors,
+	onAsk,
+	onAskInNewConversation,
+}: Props) {
+	const view = graphSelectionViewModel(selection);
+	const canSendFreeText = freeText.trim().length > 0;
+	const defaultAction = selection.actions?.[0] ?? null;
+	return (
+		<article className="graph-selection-drawer" data-testid="graph-selection-drawer">
+			<div className="graph-selection-hint">{view.hint}</div>
+			<div className="graph-selection-title" title={title}>{title}</div>
+			{view.showFacts && (
+				<div className="graph-selection-facts">
+					{view.facts.map((fact) => (
+						<Fact key={fact.label} label={fact.label} value={fact.value} />
+					))}
+				</div>
+			)}
+			<div className="graph-selection-actions">
+				<button
+					type="button"
+					className="graph-selection-action graph-selection-action-muted"
+					onClick={onNeighbors}
+					disabled={!view.canExpandNeighbors}
+				>
+					<Plus />
+					邻居
+				</button>
+				{selection.actions?.map((action) => (
+					<button
+						key={action.id}
+						type="button"
+						className="graph-selection-action"
+						data-action-id={action.id}
+						onClick={() => onAsk(action)}
+					>
+						<Send />
+						{action.label}
+					</button>
+				))}
+			</div>
+			<textarea
+				className="graph-selection-textarea"
+				value={freeText}
+				onChange={(event) => onFreeTextChange(event.target.value)}
+				rows={3}
+				placeholder="补充说明（可选）"
+			/>
+			<div className="graph-selection-footer">
+				<button
+					type="button"
+					className="graph-selection-send"
+					onClick={() => onAsk(null)}
+					disabled={!canSendFreeText}
+				>
+					<Send />
+					发送
+				</button>
+				<button
+					type="button"
+					className="graph-selection-secondary"
+					onClick={() => onAskInNewConversation(canSendFreeText ? null : defaultAction)}
+					disabled={!canSendFreeText && !defaultAction}
+				>
+					<MessageSquarePlus />
+					新对话
+				</button>
+			</div>
+		</article>
+	);
+}
+
+function Fact({ label, value }: { label: string; value: number }) {
+	return (
+		<div className="graph-selection-fact">
+			<strong>{value}</strong>
+			<span>{label}</span>
+		</div>
+	);
+}

package/skills/llm-wiki-skill/workbench/web/src/components/GraphSummaryDrawer.tsx

@@ -0,0 +1,269 @@
+import React, { useState } from "react";
+
+import type {
+	GraphCommunitySummaryPayload,
+	GraphExcludedObjectPayload,
+	GraphGlobalOverviewPayload,
+	GraphNodeSummaryPayload,
+	GraphSearchResultsPayload,
+	GraphSummaryCommand,
+	GraphUnavailableObjectPayload,
+} from "@llm-wiki/graph-engine";
+
+interface NodeSummaryProps {
+	payload: GraphNodeSummaryPayload;
+	onCommand: (command: GraphSummaryCommand) => void;
+}
+
+interface CommunitySummaryProps {
+	payload: GraphCommunitySummaryPayload;
+	onCommand: (command: GraphSummaryCommand) => void;
+	onShowNodeSummary: (nodeId: string) => void;
+	onPreviewNode: (nodeId: string | null) => void;
+}
+
+interface SimpleStateProps {
+	title: string;
+	message: string;
+}
+
+export function GraphNodeSummary({ payload, onCommand }: NodeSummaryProps) {
+	return (
+		<React.Fragment>
+		<article className="graph-summary-drawer" data-testid="graph-node-summary">
+			<div className="graph-summary-kicker">节点</div>
+			<h2 className="graph-summary-title">{payload.label}</h2>
+			<div className="graph-summary-facts">
+				<SummaryFact label="连接" value={payload.connectionCount} />
+				<SummaryFact label="强关系" value={payload.strongestRelations.length} />
+				<SummaryFact label="桥接" value={payload.bridgeRelations.length} />
+			</div>
+			<div className="graph-summary-meta">
+				<span>{payload.type}</span>
+				<span className="graph-summary-community-chip">{payload.communityId ?? "未分组"}</span>
+				<span>{payload.pinHint.pinned ? "已固定" : "未固定"}</span>
+				{payload.searchHit && <span>搜索命中</span>}
+			</div>
+			{payload.summary && <p className="graph-summary-excerpt">{payload.summary}</p>}
+			<RelationList title="最强关系" relations={payload.strongestRelations} emptyText="暂无强关系" />
+			<RelationList title="桥接关系" relations={payload.bridgeRelations} emptyText="暂无桥接关系" />
+			<CommandRow commands={payload.commands} onCommand={onCommand} />
+		</article>
+		</React.Fragment>
+	);
+}
+
+export function GraphCommunitySummary({ payload, onCommand, onShowNodeSummary, onPreviewNode }: CommunitySummaryProps) {
+	const [coreExpanded, setCoreExpanded] = useState(false);
+	const coreIds = coreExpanded ? payload.coreNodeIds : payload.coreNodeIds.slice(0, 3);
+	return (
+		<article className="graph-summary-drawer" data-testid="graph-community-summary">
+			<div className="graph-summary-kicker">社区</div>
+			<h2 className="graph-summary-title">{payload.label}</h2>
+			<div className="graph-summary-facts">
+				<SummaryFact label="节点" value={payload.nodeCount} />
+				<SummaryFact label="核心" value={payload.coreNodeIds.length} />
+				<SummaryFact label="命中" value={payload.searchResultIds.length} />
+			</div>
+			<div className="graph-summary-meta">
+				<span className="graph-summary-community-chip">{payload.communityId}</span>
+				<span>{payload.pinHints.length > 0 ? `${payload.pinHints.length} 个固定` : "无固定"}</span>
+			</div>
+			<section className="graph-summary-section">
+				<div className="graph-summary-section-header">
+					<h3>核心节点</h3>
+					{payload.coreNodeIds.length > 3 && (
+						<button
+							type="button"
+							className="graph-summary-inline-action"
+							onClick={() => setCoreExpanded((value) => !value)}
+						>
+							{coreExpanded ? "收起" : "查看全部"}
+						</button>
+					)}
+				</div>
+				{coreIds.length === 0 ? (
+					<div className="graph-summary-muted">暂无核心节点</div>
+				) : (
+					<ul className="graph-summary-list graph-summary-click-list">
+						{coreIds.map((id) => (
+							<li key={id}>
+								<button
+									type="button"
+									className="graph-summary-node-link"
+									onMouseEnter={() => onPreviewNode(id)}
+									onMouseLeave={() => onPreviewNode(null)}
+									onFocus={() => onPreviewNode(id)}
+									onBlur={() => onPreviewNode(null)}
+									onClick={() => onShowNodeSummary(id)}
+								>
+									{id}
+								</button>
+							</li>
+						))}
+					</ul>
+				)}
+			</section>
+			<IdList title="搜索命中" ids={payload.searchResultIds} emptyText="暂无搜索命中" />
+			<IdList title="固定节点" ids={payload.pinHints.map((hint) => hint.nodeId)} emptyText="暂无固定节点" />
+			<RelationList title="桥接关系" relations={payload.bridgeRelations} emptyText="暂无桥接关系" />
+			<CommandRow commands={payload.commands} onCommand={onCommand} />
+		</article>
+	);
+}
+
+export function GraphSearchResultsSummary({ payload, onCommand }: { payload: GraphSearchResultsPayload; onCommand: (command: GraphSummaryCommand) => void }) {
+	return (
+		<article className="graph-summary-drawer" data-testid="graph-search-results">
+			<div className="graph-summary-kicker">搜索</div>
+			<h2 className="graph-summary-title">{payload.query || "搜索结果"}</h2>
+			<div className="graph-summary-facts">
+				<SummaryFact label="结果" value={payload.searchResultIds.length} />
+				<SummaryFact label="可见" value={payload.visibleResultIds.length} />
+				<SummaryFact label="不可用" value={payload.unavailableResultIds.length} />
+			</div>
+			<IdList title="可见结果" ids={payload.visibleResultIds} emptyText="没有可见结果" />
+			<CommandRow commands={payload.commands} onCommand={onCommand} />
+		</article>
+	);
+}
+
+export function GraphGlobalOverviewSummary({ payload }: { payload: GraphGlobalOverviewPayload }) {
+	return (
+		<article className="graph-summary-drawer" data-testid="graph-global-overview">
+			<div className="graph-summary-kicker">全局</div>
+			<h2 className="graph-summary-title">全局概览</h2>
+			<div className="graph-summary-facts">
+				<SummaryFact label="节点" value={payload.nodeCount} />
+				<SummaryFact label="边" value={payload.edgeCount} />
+				<SummaryFact label="社区" value={payload.communityCount} />
+			</div>
+			<IdList title="核心节点" ids={payload.coreNodeIds} emptyText="暂无核心节点" />
+			<IdList title="搜索命中" ids={payload.searchResultIds} emptyText="暂无搜索命中" />
+		</article>
+	);
+}
+
+export function GraphExcludedObjectSummary({ payload, onCommand }: { payload: GraphExcludedObjectPayload; onCommand: (command: GraphSummaryCommand) => void }) {
+	return (
+		<article className="graph-summary-drawer" data-testid="graph-excluded-object">
+			<div className="graph-summary-kicker">暂不可见</div>
+			<h2 className="graph-summary-title">{objectLabel(payload.object)}</h2>
+			<p className="graph-summary-excerpt">{excludedReasonLabel(payload.reason)}</p>
+			<IdList title="相关搜索命中" ids={payload.searchResultIds} emptyText="没有相关搜索命中" />
+			<CommandRow commands={payload.commands} onCommand={onCommand} />
+		</article>
+	);
+}
+
+export function GraphUnavailableObjectSummary({ payload }: { payload: GraphUnavailableObjectPayload }) {
+	return (
+		<article className="graph-summary-drawer" data-testid="graph-unavailable-object">
+			<div className="graph-summary-kicker">不可用</div>
+			<h2 className="graph-summary-title">{objectLabel(payload.object)}</h2>
+			<p className="graph-summary-excerpt">{unavailableReasonLabel(payload.reason)}</p>
+		</article>
+	);
+}
+
+export function GraphSimpleState({ title, message }: SimpleStateProps) {
+	return (
+		<article className="graph-summary-drawer" data-testid="graph-simple-state">
+			<div className="graph-summary-kicker">图谱</div>
+			<h2 className="graph-summary-title">{title}</h2>
+			<p className="graph-summary-excerpt">{message}</p>
+		</article>
+	);
+}
+
+function SummaryFact({ label, value }: { label: string; value: number }) {
+	return (
+		<div className="graph-summary-fact">
+			<strong>{value}</strong>
+			<span>{label}</span>
+		</div>
+	);
+}
+
+function RelationList({
+	title,
+	relations,
+	emptyText,
+}: {
+	title: string;
+	relations: GraphNodeSummaryPayload["strongestRelations"];
+	emptyText: string;
+}) {
+	return (
+		<section className="graph-summary-section">
+			<h3>{title}</h3>
+			{relations.length === 0 ? (
+				<div className="graph-summary-muted">{emptyText}</div>
+			) : (
+				<ul className="graph-summary-list">
+					{relations.map((relation) => (
+						<li key={relation.edgeId}>
+							<span>{relation.fromNodeId} - {relation.toNodeId}</span>
+							<small className="graph-summary-relation-pill">{relation.relationType ?? relation.confidence ?? "关系"}</small>
+						</li>
+					))}
+				</ul>
+			)}
+		</section>
+	);
+}
+
+function IdList({ title, ids, emptyText }: { title: string; ids: string[]; emptyText: string }) {
+	return (
+		<section className="graph-summary-section">
+			<h3>{title}</h3>
+			{ids.length === 0 ? (
+				<div className="graph-summary-muted">{emptyText}</div>
+			) : (
+				<ul className="graph-summary-list">
+					{ids.slice(0, 8).map((id) => <li key={id}>{id}</li>)}
+				</ul>
+			)}
+		</section>
+	);
+}
+
+function CommandRow({ commands, onCommand }: { commands: GraphSummaryCommand[]; onCommand: (command: GraphSummaryCommand) => void }) {
+	if (commands.length === 0) return null;
+	return (
+		<div className="graph-summary-actions">
+			{commands.map((command) => (
+				<button key={commandKey(command)} type="button" className="graph-summary-action" onClick={() => onCommand(command)}>
+					{command.label}
+				</button>
+			))}
+		</div>
+	);
+}
+
+function commandKey(command: GraphSummaryCommand): string {
+	if (command.kind === "enter-community") return `${command.kind}:${command.communityId}`;
+	if (command.kind === "open-detail-read") return `${command.kind}:${command.nodeId}`;
+	if (command.kind === "set-fixed-position") return `${command.kind}:${command.mode}:${command.nodeId}`;
+	if (command.kind === "show-this-object") return `${command.kind}:${objectLabel(command.object)}`;
+	return command.kind;
+}
+
+function objectLabel(object: GraphExcludedObjectPayload["object"]): string {
+	if (object.kind === "node") return object.nodeId;
+	if (object.kind === "community") return object.communityId;
+	return object.aggregationId;
+}
+
+function excludedReasonLabel(reason: GraphExcludedObjectPayload["reason"]): string {
+	if (reason === "filter") return "当前筛选暂时隐藏了这个对象。";
+	if (reason === "aggregation") return "这个对象收在聚合容器里。";
+	if (reason === "search") return "当前搜索范围暂时隐藏了这个对象。";
+	return "当前社区视角暂时隐藏了这个对象。";
+}
+
+function unavailableReasonLabel(reason: GraphUnavailableObjectPayload["reason"]): string {
+	if (reason === "missing-community") return "这个社区当前不可用。";
+	if (reason === "missing-aggregation") return "这个聚合对象当前不可用。";
+	return "这个节点当前不可用。";
+}

package/skills/llm-wiki-skill/workbench/web/src/components/MainViewTabs.tsx

@@ -0,0 +1,69 @@
+import { MessageCircle, Network } from "lucide-react";
+
+import { cn } from "../lib/utils";
+
+export type MainView = "chat" | "graph";
+
+interface MainViewTabsProps {
+	activeView: MainView;
+	graphHasPendingUpdate?: boolean;
+	onSelectView: (view: MainView) => void;
+}
+
+export function MainViewTabs({
+	activeView,
+	graphHasPendingUpdate = false,
+	onSelectView,
+}: MainViewTabsProps) {
+	return (
+		<div className="main-view-tabs" role="tablist" aria-label="主视图切换">
+			<MainViewTab
+				view="chat"
+				active={activeView === "chat"}
+				onSelectView={onSelectView}
+				icon={<MessageCircle />}
+			>
+				对话
+			</MainViewTab>
+			<MainViewTab
+				view="graph"
+				active={activeView === "graph"}
+				onSelectView={onSelectView}
+				icon={<Network />}
+				badge={graphHasPendingUpdate}
+			>
+				图谱
+			</MainViewTab>
+		</div>
+	);
+}
+
+function MainViewTab({
+	view,
+	active,
+	badge,
+	icon,
+	children,
+	onSelectView,
+}: {
+	view: MainView;
+	active: boolean;
+	badge?: boolean;
+	icon: React.ReactNode;
+	children: React.ReactNode;
+	onSelectView: (view: MainView) => void;
+}) {
+	return (
+		<button
+			type="button"
+			role="tab"
+			className={cn("main-view-tab", active && "main-view-tab-active")}
+			aria-selected={active}
+			onClick={() => onSelectView(view)}
+		>
+			{icon}
+			<span>{children}</span>
+			{badge && <span className="main-view-tab-dot" aria-hidden="true" />}
+		</button>
+	);
+}

package/skills/llm-wiki-skill/workbench/web/src/components/MarkdownView.tsx

@@ -0,0 +1,106 @@
+import { useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+import { emitWikiLinkSeen, extractWikiPageRefs, normalizeWikiLinks } from "../lib/wiki-links";
+
+interface Props {
+	content: string;
+	onOpenPage?: (path: string) => void;
+	onWikiLinkSeen?: (path: string) => void;
+	autoEmitWikiLinks?: boolean;
+}
+
+export function MarkdownView({ content, onOpenPage, onWikiLinkSeen, autoEmitWikiLinks = true }: Props) {
+	useEffect(() => {
+		if (!autoEmitWikiLinks || !onWikiLinkSeen) return;
+		for (const path of extractWikiPageRefs(content)) {
+			onWikiLinkSeen(path);
+			emitWikiLinkSeen(path);
+		}
+	}, [autoEmitWikiLinks, content, onWikiLinkSeen]);
+
+	return (
+		<div className="prose prose-invert max-w-none prose-pre:bg-background prose-pre:text-foreground prose-code:text-foreground">
+			<ReactMarkdown
+				remarkPlugins={[remarkGfm, remarkPaperHighlight]}
+				components={{
+					a: ({ href, children }) => {
+						if (href?.startsWith("wiki/")) {
+							return (
+								<a
+									href={href}
+									onClick={(e) => {
+										e.preventDefault();
+										onWikiLinkSeen?.(href);
+										emitWikiLinkSeen(href);
+										onOpenPage?.(href);
+									}}
+									className="at"
+								>
+									{children}
+								</a>
+							);
+						}
+						return (
+							<a href={href} target="_blank" rel="noopener noreferrer">
+								{children}
+							</a>
+						);
+					},
+				}}
+			>
+				{normalizeWikiLinks(content)}
+			</ReactMarkdown>
+		</div>
+	);
+}
+
+type MarkdownNode = {
+	type?: string;
+	value?: string;
+	children?: MarkdownNode[];
+	data?: Record<string, unknown>;
+};
+
+function remarkPaperHighlight() {
+	return (tree: MarkdownNode) => {
+		visitTextParents(tree);
+	};
+}
+
+function visitTextParents(node: MarkdownNode): void {
+	if (!node.children) return;
+	const nextChildren: MarkdownNode[] = [];
+	let changed = false;
+	for (const child of node.children) {
+		if (child.type === "text" && typeof child.value === "string") {
+			const split = splitHighlightText(child.value);
+			if (split.length > 1 || split[0] !== child) changed = true;
+			nextChildren.push(...split);
+			continue;
+		}
+		visitTextParents(child);
+		nextChildren.push(child);
+	}
+	if (changed) node.children = nextChildren;
+}
+
+function splitHighlightText(value: string): MarkdownNode[] {
+	const nodes: MarkdownNode[] = [];
+	const pattern = /==([^=\n][^\n]*?[^=\n])==/g;
+	let lastIndex = 0;
+	for (const match of value.matchAll(pattern)) {
+		const index = match.index ?? 0;
+		if (index > lastIndex) nodes.push({ type: "text", value: value.slice(lastIndex, index) });
+		nodes.push({
+			type: "emphasis",
+			data: { hName: "mark", hProperties: { className: "hl" } },
+			children: [{ type: "text", value: match[1] }],
+		});
+		lastIndex = index + match[0].length;
+	}
+	if (lastIndex === 0) return [{ type: "text", value }];
+	if (lastIndex < value.length) nodes.push({ type: "text", value: value.slice(lastIndex) });
+	return nodes;
+}

package/skills/llm-wiki-skill/workbench/web/src/components/NewWikiDialog.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from "react";
+
+import { Button } from "./ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "./ui/dialog";
+import { Input } from "./ui/input";
+
+interface Props {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onSubmit: (name: string, purpose: string) => Promise<void>;
+}
+
+export function NewWikiDialog({ open, onOpenChange, onSubmit }: Props) {
+	const [name, setName] = useState("");
+	const [purpose, setPurpose] = useState("");
+	const [submitting, setSubmitting] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const reset = () => {
+		setName("");
+		setPurpose("");
+		setError(null);
+		setSubmitting(false);
+	};
+
+	const handleSubmit = async () => {
+		if (!name.trim() || !purpose.trim()) {
+			setError("名称和研究方向都需要填写");
+			return;
+		}
+		setSubmitting(true);
+		setError(null);
+		try {
+			await onSubmit(name.trim(), purpose.trim());
+			reset();
+			onOpenChange(false);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+			setSubmitting(false);
+		}
+	};
+
+	const handleOpenChange = (newOpen: boolean) => {
+		if (!newOpen) reset();
+		onOpenChange(newOpen);
+	};
+
+	return (
+		<React.Fragment>
+		<Dialog open={open} onOpenChange={handleOpenChange}>
+			<DialogContent className="dialog-surface sm:max-w-md">
+				<DialogHeader>
+					<DialogTitle>新建知识库</DialogTitle>
+					<DialogDescription>在默认目录下创建一个完整的 llm-wiki 知识库。</DialogDescription>
+				</DialogHeader>
+
+				<div className="space-y-3 py-2">
+					<Input
+						value={name}
+						onChange={(e) => setName(e.target.value)}
+						placeholder="stage2-research"
+						autoFocus
+						className="form-field"
+					/>
+					<Input
+						value={purpose}
+						onChange={(e) => setPurpose(e.target.value)}
+						placeholder="研究方向"
+						className="form-field"
+						onKeyDown={(e) => {
+							if (e.key === "Enter" && !submitting) {
+								e.preventDefault();
+								handleSubmit();
+							}
+						}}
+					/>
+					{error && (
+						<div className="rounded-md border border-destructive bg-destructive/10 px-2 py-1.5 text-xs text-destructive">
+							{error}
+						</div>
+					)}
+				</div>
+
+				<DialogFooter>
+					<Button variant="outline" onClick={() => handleOpenChange(false)} disabled={submitting}>
+						取消
+					</Button>
+					<Button onClick={handleSubmit} disabled={submitting}>
+						{submitting ? "创建中..." : "创建"}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+		</React.Fragment>
+	);
+}