@joekytc/dsh-swarm 0.1.2 → 0.2.0

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

@@ -0,0 +1,375 @@
+import React, { useEffect, useState } from "react";
+
+import { Button } from "./ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "./ui/dialog";
+import { Input } from "./ui/input";
+import {
+	type AvailableModelInfo,
+	chooseDirectory,
+	fetchAvailableModels,
+	getConfig,
+	initExistingKnowledgeBase,
+	inspectKnowledgeBasePath,
+	type InspectPathResult,
+	type ModelRef,
+} from "../lib/api";
+
+interface Props {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onSubmit: (path: string) => Promise<void>;
+	onStartBatchDigest?: (input: {
+		kbPath: string;
+		filePaths: string[];
+		sourceScanId?: string;
+		digestModel?: ModelRef | null;
+		concurrency: 1 | 3 | 5;
+	}) => void;
+}
+
+/**
+ * 通过选择本地文件夹创建或登记知识库。
+ * 用户粘绝对路径，后端验证（存在 + 是目录 + 含 .wiki-schema.md）。
+ */
+export function AddExternalDialog({ open, onOpenChange, onSubmit, onStartBatchDigest }: Props) {
+	const [path, setPath] = useState("");
+	const [purpose, setPurpose] = useState("");
+	const [digestAfterInit, setDigestAfterInit] = useState(true);
+	const [concurrency, setConcurrency] = useState<1 | 3 | 5>(3);
+	const [models, setModels] = useState<AvailableModelInfo[]>([]);
+	const [digestModel, setDigestModel] = useState("");
+	const [inspect, setInspect] = useState<InspectPathResult | null>(null);
+	const [inspecting, setInspecting] = useState(false);
+	const [choosing, setChoosing] = useState(false);
+	const [submitting, setSubmitting] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const [conflicts, setConflicts] = useState<string[]>([]);
+	const [dragHint, setDragHint] = useState<string | null>(null);
+
+	const reset = () => {
+		setPath("");
+		setPurpose("");
+		setDigestAfterInit(true);
+		setConcurrency(3);
+		setDigestModel("");
+		setInspect(null);
+		setError(null);
+		setConflicts([]);
+		setDragHint(null);
+		setChoosing(false);
+		setSubmitting(false);
+	};
+
+	useEffect(() => {
+		if (!open || !path.trim()) {
+			const timer = window.setTimeout(() => {
+				setInspect(null);
+				setInspecting(false);
+			}, 0);
+			return () => window.clearTimeout(timer);
+		}
+		let cancelled = false;
+		const timer = window.setTimeout(() => {
+			setInspecting(true);
+			setError(null);
+			inspectKnowledgeBasePath(path)
+				.then((result) => {
+					if (!cancelled) setInspect(result);
+				})
+				.catch((err) => {
+					if (!cancelled) {
+						setInspect(null);
+						setError(err instanceof Error ? err.message : String(err));
+					}
+				})
+				.finally(() => {
+					if (!cancelled) setInspecting(false);
+				});
+		}, 300);
+		return () => {
+			cancelled = true;
+			window.clearTimeout(timer);
+		};
+	}, [open, path]);
+
+	useEffect(() => {
+		if (!open) return;
+		let cancelled = false;
+		Promise.all([fetchAvailableModels(), getConfig()])
+			.then(([availableModels, config]) => {
+				if (cancelled) return;
+				setModels(availableModels);
+				setDigestModel(modelRefToValue(config.modelRoles?.digest));
+			})
+			.catch(() => {
+				if (!cancelled) setModels([]);
+			});
+		return () => {
+			cancelled = true;
+		};
+	}, [open]);
+
+	const handleSubmit = async (overwrite = false) => {
+		const trimmed = path.trim();
+		if (!trimmed) {
+			setError("路径不能为空");
+			return;
+		}
+		setSubmitting(true);
+		setError(null);
+		try {
+			if (inspect?.exists && inspect.isDirectory && !inspect.hasWikiSchema) {
+				if (!purpose.trim()) {
+					setError("请先填写研究方向");
+					setSubmitting(false);
+					return;
+				}
+				const result = await initExistingKnowledgeBase(trimmed, purpose, overwrite);
+				await onSubmit(result.info.path);
+				if (
+					digestAfterInit &&
+					inspect.ingestibleFiles?.paths.length &&
+					onStartBatchDigest
+				) {
+					onStartBatchDigest({
+						kbPath: result.info.path,
+						filePaths: inspect.ingestibleFiles.paths,
+						sourceScanId: inspect.ingestibleFiles.scanId,
+						digestModel: valueToModelRef(digestModel),
+						concurrency,
+					});
+				}
+			} else {
+				await onSubmit(trimmed);
+			}
+			reset();
+			onOpenChange(false);
+		} catch (err) {
+			const maybeConflicts = (err as Error & { conflicts?: string[] }).conflicts ?? [];
+			setConflicts(maybeConflicts);
+			setError(err instanceof Error ? err.message : String(err));
+			setSubmitting(false);
+		}
+	};
+
+	const handleOpenChange = (newOpen: boolean) => {
+		if (!newOpen) reset();
+		onOpenChange(newOpen);
+	};
+
+	const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+		event.preventDefault();
+		const types = Array.from(event.dataTransfer.types);
+		console.info("[llm-wiki-agent] dropped external path", {
+			types,
+			uriList: event.dataTransfer.getData("text/uri-list"),
+			text: event.dataTransfer.getData("text/plain"),
+			files: event.dataTransfer.files.length,
+		});
+		const parsed = parseDroppedPath(event.dataTransfer);
+		if (parsed) {
+			setPath(parsed);
+			setDragHint(null);
+		} else {
+			setDragHint("Chrome 没给出真实路径，请点“选择文件夹”或粘贴路径");
+		}
+	};
+
+	const handleChooseDirectory = async () => {
+		setChoosing(true);
+		setError(null);
+		setDragHint(null);
+		try {
+			const selectedPath = await chooseDirectory();
+			if (selectedPath) setPath(selectedPath);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setChoosing(false);
+		}
+	};
+
+	return (
+		<React.Fragment>
+		<Dialog open={open} onOpenChange={handleOpenChange}>
+			<DialogContent className="dialog-surface w-[calc(100vw-2rem)] overflow-hidden sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>新建知识库</DialogTitle>
+					<DialogDescription>
+						选择一个已有文件夹；如果它还不是知识库，可以在这里初始化成新的知识库。
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="min-w-0 space-y-3 py-2">
+					<div
+						onDragOver={(event) => event.preventDefault()}
+						onDrop={handleDrop}
+						className="min-w-0 rounded-md border border-dashed border-[var(--app-border)] bg-[var(--app-bg)] px-3 py-5 text-center text-xs text-[var(--app-muted)]"
+					>
+						<div>把文件夹拖到这里，或直接选择文件夹</div>
+						<Button
+							type="button"
+							variant="outline"
+							size="sm"
+							className="mt-3"
+							onClick={handleChooseDirectory}
+							disabled={choosing}
+						>
+							{choosing ? "选择中…" : "选择文件夹"}
+						</Button>
+					</div>
+					<Input
+						value={path}
+						onChange={(e) => setPath(e.target.value)}
+						placeholder="~/Documents/我的知识库"
+						className="form-field min-w-0 font-mono text-xs"
+						onKeyDown={(e) => {
+							if (e.key === "Enter" && !submitting) {
+								e.preventDefault();
+								handleSubmit();
+							}
+						}}
+						autoFocus
+					/>
+					{dragHint && <div className="text-xs text-muted-foreground">{dragHint}</div>}
+					{inspecting && <div className="text-xs text-muted-foreground">检查中…</div>}
+					{inspect && (
+						<div className="min-w-0 overflow-hidden rounded-md border border-[var(--app-border)] bg-[var(--app-bg)] px-2 py-1.5 text-xs text-[var(--app-muted)]">
+							<div>
+								{!inspect.exists
+									? "路径不存在"
+									: !inspect.isDirectory
+										? "这不是目录"
+										: inspect.hasWikiSchema
+											? "这是可添加的知识库"
+											: `不是知识库，可初始化；发现 ${inspect.ingestibleFiles?.count ?? 0} 个可消化文件`}
+							</div>
+							{inspect.ingestibleFiles?.samples.length ? (
+								<ul className="mt-1 max-h-24 space-y-0.5 overflow-y-auto opacity-70">
+									{inspect.ingestibleFiles.samples.slice(0, 5).map((sample) => (
+										<li key={sample} className="truncate">
+											{sample}
+										</li>
+									))}
+								</ul>
+							) : null}
+						</div>
+					)}
+					{inspect?.exists && inspect.isDirectory && !inspect.hasWikiSchema && (
+						<div className="min-w-0 space-y-2 rounded-md border border-[var(--app-border)] p-2">
+							<Input
+								value={purpose}
+								onChange={(e) => setPurpose(e.target.value)}
+								placeholder="这个知识库研究什么？"
+								className="form-field min-w-0"
+							/>
+							<label className="flex items-center justify-between gap-3 text-xs text-muted-foreground">
+								<span>初始化后立即批量消化</span>
+								<input
+									type="checkbox"
+									checked={digestAfterInit}
+									onChange={(e) => setDigestAfterInit(e.target.checked)}
+									className="size-4 accent-[var(--app-accent)]"
+								/>
+							</label>
+							{digestAfterInit && (
+								<div className="grid min-w-0 gap-2 sm:grid-cols-[120px_minmax(0,1fr)]">
+									<select
+										value={concurrency}
+										onChange={(e) => setConcurrency(Number(e.target.value) as 1 | 3 | 5)}
+										className="form-field h-8 min-w-0 text-xs"
+									>
+										<option value={1}>并发 1</option>
+										<option value={3}>并发 3</option>
+										<option value={5}>并发 5</option>
+									</select>
+									<select
+										value={digestModel}
+										onChange={(e) => setDigestModel(e.target.value)}
+										className="form-field h-8 min-w-0 text-xs"
+									>
+										<option value="">沿用全局消化模型</option>
+										{models.map((model) => (
+											<option
+												key={`${model.provider}/${model.modelId}`}
+												value={`${model.provider}/${model.modelId}`}
+												disabled={!model.hasAuth}
+											>
+												{model.provider}/{model.modelId}
+												{model.hasAuth ? "" : "（未配置）"}
+											</option>
+										))}
+									</select>
+								</div>
+							)}
+						</div>
+					)}
+					{conflicts.length > 0 && (
+						<div className="rounded-md border border-amber-500/50 bg-amber-500/10 p-2 text-xs text-amber-300">
+							<div>这些文件会先备份再覆盖：</div>
+							<div className="mt-1 break-all">{conflicts.join(", ")}</div>
+						</div>
+					)}
+					{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>
+					{conflicts.length > 0 ? (
+						<Button onClick={() => handleSubmit(true)} disabled={submitting}>
+							{submitting ? "处理中…" : "备份并继续"}
+						</Button>
+					) : (
+						<Button onClick={() => handleSubmit(false)} disabled={submitting}>
+							{submitting
+								? "处理中…"
+								: inspect?.exists && inspect.isDirectory && !inspect.hasWikiSchema
+									? "初始化并添加"
+									: "添加"}
+						</Button>
+					)}
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+		</React.Fragment>
+	);
+}
+
+function modelRefToValue(ref?: ModelRef | null): string {
+	return ref ? `${ref.provider}/${ref.modelId}` : "";
+}
+
+function valueToModelRef(value: string): ModelRef | null {
+	const [provider, ...rest] = value.split("/");
+	const modelId = rest.join("/");
+	if (!provider || !modelId) return null;
+	return { provider, modelId };
+}
+
+function parseDroppedPath(dataTransfer: DataTransfer): string | null {
+	for (const type of ["text/uri-list", "text/plain"]) {
+		const raw = dataTransfer.getData(type).trim();
+		if (!raw) continue;
+		const first = raw
+			.split(/\r?\n/)
+			.map((line) => line.trim())
+			.find((line) => line && !line.startsWith("#"));
+		if (!first) continue;
+		if (first.startsWith("file://")) return decodeURIComponent(new URL(first).pathname);
+		if (first.startsWith("/") || first.startsWith("~/")) return first;
+	}
+	return null;
+}

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

@@ -0,0 +1,158 @@
+import { Check, X } from "lucide-react";
+import React from "react";
+
+import type {
+	AccentMode,
+	AppearancePrefs,
+	DensityMode,
+	HandMode,
+	PaperMode,
+	ThemeMode,
+	UserBubbleMode,
+} from "../lib/appearance";
+import { cn } from "../lib/utils";
+
+interface AppearancePanelProps {
+	open: boolean;
+	value: AppearancePrefs;
+	onChange: (patch: Partial<AppearancePrefs>) => void;
+	onClose: () => void;
+}
+
+const themeOptions: Array<{ value: ThemeMode; label: string }> = [
+	{ value: "light", label: "浅纸" },
+	{ value: "dark", label: "夜灯" },
+];
+
+const paperOptions: Array<{ value: PaperMode; label: string }> = [
+	{ value: "clean", label: "纯净" },
+	{ value: "grid", label: "网格" },
+	{ value: "laid", label: "纹理" },
+];
+
+const userBubbleOptions: Array<{ value: UserBubbleMode; label: string }> = [
+	{ value: "soft", label: "柔和" },
+	{ value: "solid", label: "实色" },
+];
+
+const handOptions: Array<{ value: HandMode; label: string }> = [
+	{ value: "on", label: "开启" },
+	{ value: "off", label: "关闭" },
+];
+
+const densityOptions: Array<{ value: DensityMode; label: string }> = [
+	{ value: "cozy", label: "舒展" },
+	{ value: "compact", label: "紧凑" },
+];
+
+const accentOptions: Array<{ value: AccentMode; label: string }> = [
+	{ value: "terracotta", label: "陶土" },
+	{ value: "clay", label: "黏土" },
+	{ value: "amber", label: "琥珀" },
+	{ value: "rose", label: "玫瑰" },
+];
+
+export function AppearancePanel({ open, value, onChange, onClose }: AppearancePanelProps) {
+	if (!open) return null;
+
+	return (
+		<React.Fragment>
+		<section className="appearance-panel" aria-label="外观偏好">
+			<div className="appearance-panel-header">
+				<div>
+					<h2>外观</h2>
+					<p>Paper</p>
+				</div>
+				<button type="button" className="appearance-close" onClick={onClose} aria-label="关闭外观面板">
+					<X />
+				</button>
+			</div>
+
+			<SegmentedGroup
+				label="主题"
+				value={value.theme}
+				options={themeOptions}
+				onChange={(theme) => onChange({ theme })}
+			/>
+			<SegmentedGroup
+				label="纸张"
+				value={value.paper}
+				options={paperOptions}
+				onChange={(paper) => onChange({ paper })}
+			/>
+
+			<div className="appearance-group">
+				<div className="appearance-label">配色</div>
+				<div className="appearance-swatches">
+					{accentOptions.map((item) => (
+						<button
+							key={item.value}
+							type="button"
+							className={cn(
+								"appearance-swatch",
+								`appearance-swatch-${item.value}`,
+								value.accent === item.value && "appearance-swatch-active",
+							)}
+							onClick={() => onChange({ accent: item.value })}
+							aria-label={`配色：${item.label}`}
+							aria-pressed={value.accent === item.value}
+						>
+							{value.accent === item.value && <Check />}
+						</button>
+					))}
+				</div>
+			</div>
+
+			<SegmentedGroup
+				label="气泡"
+				value={value.userbubble}
+				options={userBubbleOptions}
+				onChange={(userbubble) => onChange({ userbubble })}
+			/>
+			<SegmentedGroup
+				label="手写"
+				value={value.hand}
+				options={handOptions}
+				onChange={(hand) => onChange({ hand })}
+			/>
+			<SegmentedGroup
+				label="密度"
+				value={value.density}
+				options={densityOptions}
+				onChange={(density) => onChange({ density })}
+			/>
+		</section>
+		</React.Fragment>
+	);
+}
+
+function SegmentedGroup<Value extends string>({
+	label,
+	value,
+	options,
+	onChange,
+}: {
+	label: string;
+	value: Value;
+	options: Array<{ value: Value; label: string }>;
+	onChange: (value: Value) => void;
+}) {
+	return (
+		<div className="appearance-group">
+			<div className="appearance-label">{label}</div>
+			<div className="appearance-segmented">
+				{options.map((item) => (
+					<button
+						key={item.value}
+						type="button"
+						className={cn("appearance-segment", value === item.value && "appearance-segment-active")}
+						onClick={() => onChange(item.value)}
+						aria-pressed={value === item.value}
+					>
+						{item.label}
+					</button>
+				))}
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,15 @@
+import { HtmlRenderer } from "./renderers/HtmlRenderer";
+import { DownloadOnlyRenderer } from "./renderers/DownloadOnlyRenderer";
+import type { ArtifactManifest } from "../lib/api";
+
+interface Props {
+	manifest: ArtifactManifest;
+}
+
+export function ArtifactView({ manifest }: Props) {
+	if (manifest.renderer === "iframe") {
+		return <HtmlRenderer manifest={manifest} />;
+	}
+
+	return <DownloadOnlyRenderer manifest={manifest} />;
+}

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

@@ -0,0 +1,117 @@
+import { ExternalLink, X } from "lucide-react";
+import type { BatchDigestEvent } from "../lib/api";
+import { cn } from "../lib/utils";
+
+export interface BatchDigestJob {
+	id: string;
+	kbPath: string;
+	status: "running" | "done" | "error";
+	total: number;
+	completed: number;
+	failed: number;
+	current?: string;
+	outputDir?: string;
+	error?: string;
+	files: BatchDigestFileState[];
+	events: BatchDigestEvent[];
+}
+
+export interface BatchDigestFileState {
+	index: number;
+	filePath: string;
+	status: "queued" | "running" | "done" | "error";
+	chars?: number;
+	outputPath?: string;
+	error?: string;
+}
+
+interface Props {
+	job: BatchDigestJob | null;
+	onClose: () => void;
+	onOpenOutput: (outputPath: string) => void;
+}
+
+export function BatchDigestPanel({ job, onClose, onOpenOutput }: Props) {
+	if (!job) return null;
+	const percent = job.total > 0 ? Math.round(((job.completed + job.failed) / job.total) * 100) : 0;
+	return (
+		<div className="batch-panel" aria-label="批量消化进度">
+			<div className="batch-header">
+				<div>
+					<div className="batch-title">批量消化</div>
+					<div className="batch-subtitle">
+						{job.completed} 完成 / {job.failed} 失败 / {job.total} 总数
+					</div>
+				</div>
+				<span className={cn("batch-status", `batch-status-${job.status}`)}>{statusLabel(job.status)}</span>
+				<button type="button" className="icon-btn" onClick={onClose} aria-label="关闭">
+					<X className="size-4" />
+				</button>
+			</div>
+			<div className="batch-body">
+				<div className="batch-progress" aria-label={`批量消化进度 ${percent}%`}>
+					<div className="batch-progress-bar" style={{ width: `${percent}%` }} />
+				</div>
+				<div className="batch-progress-meta">
+					<span>{percent}%</span>
+					<span>{job.total - job.completed - job.failed} 排队/进行中</span>
+				</div>
+				{job.current && (
+					<div className="batch-current">{job.current}</div>
+				)}
+				{job.files.map((file) => (
+					<div
+						key={`${file.index}:${file.filePath}`}
+						className={cn("batch-file", `batch-file-${file.status}`)}
+					>
+						<FileStatusIcon status={file.status} />
+						<div className="min-w-0">
+							<div className="batch-file-name">{shortName(file.filePath)}</div>
+							<div className="batch-file-detail">
+								{file.status === "running"
+									? `生成中${file.chars ? `，约 ${file.chars} 字` : ""}`
+									: file.status === "done"
+										? `已完成${file.chars ? `，约 ${file.chars} 字` : ""}`
+										: file.status === "error"
+											? file.error
+											: "排队中"}
+							</div>
+						</div>
+						{file.outputPath ? (
+							<button
+								type="button"
+								className="batch-output-btn"
+								onClick={() => onOpenOutput(file.outputPath as string)}
+								aria-label="打开结果"
+							>
+								<ExternalLink className="size-3.5" />
+							</button>
+						) : (
+							<span />
+						)}
+					</div>
+				))}
+				{job.status === "done" && (
+					<div className="batch-result batch-result-done">已完成：{job.outputDir}</div>
+				)}
+				{job.status === "error" && (
+					<div className="batch-result batch-result-error">{job.error}</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function FileStatusIcon({ status }: { status: BatchDigestFileState["status"] }) {
+	return <span className={cn("batch-dot", `batch-dot-${status}`)} />;
+}
+
+function shortName(filePath: string): string {
+	return filePath.split("/").filter(Boolean).at(-1) ?? filePath;
+}
+
+function statusLabel(status: BatchDigestJob["status"]): string {
+	if (status === "running") return "运行中";
+	if (status === "done") return "完成";
+	return "出错";
+}