@joekytc/dsh-swarm 0.1.2 → 0.2.0

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

@@ -0,0 +1,320 @@
+import { CheckCircle2, KeyRound, Loader2, XCircle } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import {
+	type AuthStatus,
+	type AvailableModelInfo,
+	fetchAvailableModels,
+	getAuthStatus,
+	getConfig,
+	listCommands,
+	setAuthKey,
+	setConfig,
+	testAuthConnection,
+} from "@/lib/api";
+import { modelRefToValue, valueToModelRef } from "@/lib/model-roles";
+
+const PROVIDERS = [
+	{ id: "anthropic", label: "Anthropic" },
+	{ id: "openai", label: "OpenAI" },
+	{ id: "deepseek", label: "DeepSeek" },
+];
+
+interface Props {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onConfigChanged?: () => void;
+}
+
+export function SettingsPanel({ open, onOpenChange, onConfigChanged }: Props) {
+	const [status, setStatus] = useState<AuthStatus | null>(null);
+	const [provider, setProvider] = useState("anthropic");
+	const [key, setKey] = useState("");
+	const [loading, setLoading] = useState(false);
+	const [showUserGlobalSkills, setShowUserGlobalSkills] = useState(false);
+	const [models, setModels] = useState<AvailableModelInfo[]>([]);
+	const [modelRoles, setModelRoles] = useState<{ main: string; digest: string }>({
+		main: "",
+		digest: "",
+	});
+	const [skillCounts, setSkillCounts] = useState({ builtin: 0, piDefault: 0, userGlobal: 0 });
+	const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
+
+	const refresh = async () => {
+		const [auth, config, allCommands, availableModels] = await Promise.all([
+			getAuthStatus(),
+			getConfig(),
+			listCommands(true),
+			fetchAvailableModels(),
+		]);
+		setStatus(auth);
+		setModels(availableModels);
+		setShowUserGlobalSkills(config.showUserGlobalSkills === true);
+		setModelRoles({
+			main: modelRefToValue(config.modelRoles?.main),
+			digest: modelRefToValue(config.modelRoles?.digest),
+		});
+		setSkillCounts({
+			builtin: allCommands.filter((item) => item.source === "builtin" && item.skillPath).length,
+			piDefault: allCommands.filter((item) => item.source === "pi-default").length,
+			userGlobal: allCommands.filter((item) => item.source === "user-global").length,
+		});
+	};
+
+	useEffect(() => {
+		if (!open) return;
+		void Promise.resolve()
+			.then(refresh)
+			.catch((err) =>
+				setMessage({ type: "error", text: err instanceof Error ? err.message : String(err) }),
+			);
+	}, [open]);
+
+	useEffect(() => {
+		if (!open) return;
+		const onKeyDown = (event: KeyboardEvent) => {
+			if (event.key === "Escape") onOpenChange(false);
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [onOpenChange, open]);
+
+	const saveAndTest = async () => {
+		if (!key.trim()) return;
+		setLoading(true);
+		setMessage(null);
+		try {
+			await setAuthKey(provider, key);
+			setKey("");
+			await refresh();
+			const result = await testAuthConnection(provider);
+			setMessage({
+				type: result.ok ? "success" : "error",
+				text: result.message ?? result.error ?? "测试完成",
+			});
+		} catch (err) {
+			setMessage({ type: "error", text: err instanceof Error ? err.message : String(err) });
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const toggleUserGlobalSkills = async (checked: boolean) => {
+		setShowUserGlobalSkills(checked);
+		try {
+			await setConfig({ showUserGlobalSkills: checked });
+			window.dispatchEvent(new Event("llm-wiki-agent:commands-changed"));
+		} catch (err) {
+			setShowUserGlobalSkills(!checked);
+			setMessage({ type: "error", text: err instanceof Error ? err.message : String(err) });
+		}
+	};
+
+	const saveModelRole = async (role: "main" | "digest", value: string) => {
+		setModelRoles((prev) => ({ ...prev, [role]: value }));
+		try {
+			await setConfig({
+				modelRoles: {
+					[role]: valueToModelRef(value),
+				},
+			});
+			setMessage({ type: "success", text: "模型设置已保存" });
+			onConfigChanged?.();
+		} catch (err) {
+			setMessage({ type: "error", text: err instanceof Error ? err.message : String(err) });
+		}
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="dialog-surface grid max-h-[calc(100vh-2rem)] max-w-2xl grid-rows-[auto_minmax(0,1fr)] overflow-hidden" showCloseButton={false}>
+				<DialogHeader className="flex-row items-start justify-between gap-4 space-y-0">
+					<div>
+						<DialogTitle>设置</DialogTitle>
+						<DialogDescription>认证</DialogDescription>
+					</div>
+					<Button variant="ghost" size="icon" className="icon-btn" onClick={() => onOpenChange(false)} aria-label="关闭">
+						<XCircle className="size-4" />
+					</Button>
+				</DialogHeader>
+
+				<div className="-mx-2 min-h-0 space-y-5 overflow-y-auto px-2 pb-1">
+					<section className="space-y-2 rounded-md border border-[var(--app-border)] p-3">
+						<div className="flex items-center gap-2 text-sm font-medium">
+							<KeyRound className="size-4" />
+							登录方式状态
+						</div>
+						<div className="text-xs text-muted-foreground">
+							auth.json：{status?.authFileExists ? "已存在" : "未创建"}
+						</div>
+						<div className="flex flex-wrap gap-2">
+							{status?.providers.length ? (
+								status.providers.map((item) => (
+									<span
+										key={item.id}
+									className="rounded-md border border-[var(--app-border)] bg-[var(--app-bg)] px-2 py-1 text-xs"
+									>
+										{item.id}：已配置
+									</span>
+								))
+							) : (
+								<span className="text-xs text-muted-foreground">暂无已保存 provider</span>
+							)}
+						</div>
+					</section>
+
+					<section className="space-y-3 rounded-md border border-[var(--app-border)] p-3">
+						<div className="text-sm font-medium">添加 API key</div>
+						<div className="grid gap-2 sm:grid-cols-[160px_1fr]">
+							<select
+								value={provider}
+								onChange={(e) => setProvider(e.target.value)}
+								className="form-field h-9"
+							>
+								{PROVIDERS.map((item) => (
+									<option key={item.id} value={item.id}>
+										{item.label}
+									</option>
+								))}
+							</select>
+							<Input
+								type="password"
+								value={key}
+								onChange={(e) => setKey(e.target.value)}
+								autoComplete="off"
+								placeholder="API key"
+								className="form-field"
+							/>
+						</div>
+						<div className="flex items-center justify-between gap-3">
+							{message ? (
+								<div
+									className={`flex items-center gap-2 text-sm ${
+										message.type === "success" ? "text-emerald-400" : "text-destructive"
+									}`}
+								>
+									{message.type === "success" ? (
+										<CheckCircle2 className="size-4" />
+									) : (
+										<XCircle className="size-4" />
+									)}
+									<span className="break-all">{message.text}</span>
+								</div>
+							) : (
+								<span className="text-xs text-muted-foreground">保存后会立即测试</span>
+							)}
+							<Button onClick={saveAndTest} disabled={loading || !key.trim()}>
+								{loading && <Loader2 className="size-4 animate-spin" />}
+								保存并测试
+							</Button>
+						</div>
+					</section>
+
+					<section className="space-y-2 rounded-md border border-[var(--app-border)] p-3">
+						<div className="text-sm font-medium">环境变量</div>
+						<div className="grid gap-2 sm:grid-cols-2">
+							{status?.envKeys.map((item) => (
+								<div
+									key={item.name}
+									className="flex items-center justify-between rounded-md bg-[var(--app-bg)] px-2 py-1 text-xs"
+								>
+									<span>{item.name}</span>
+									<span className={item.present ? "text-emerald-400" : "text-muted-foreground"}>
+										{item.present ? "存在" : "未设置"}
+									</span>
+								</div>
+							))}
+						</div>
+					</section>
+
+					<section className="space-y-3 rounded-md border border-[var(--app-border)] p-3">
+						<div>
+							<div className="text-sm font-medium">模型角色</div>
+							<div className="mt-1 text-xs text-muted-foreground">
+								主对话会立即使用所选模型；批量消化会使用 digest 角色
+							</div>
+						</div>
+						<ModelRoleSelect
+							label="主对话"
+							value={modelRoles.main}
+							models={models}
+							onChange={(value) => saveModelRole("main", value)}
+						/>
+						<ModelRoleSelect
+							label="批量消化"
+							value={modelRoles.digest}
+							models={models}
+							onChange={(value) => saveModelRole("digest", value)}
+						/>
+					</section>
+
+					<section className="space-y-3 rounded-md border border-[var(--app-border)] p-3">
+						<div>
+							<div className="text-sm font-medium">Skill 加载</div>
+							<div className="mt-1 text-xs text-muted-foreground">
+								项目内置 {skillCounts.builtin} 个 / pi 默认 {skillCounts.piDefault} 个 / 用户全局{" "}
+								{skillCounts.userGlobal} 个
+							</div>
+						</div>
+						<label className="flex items-center justify-between gap-4 rounded-md bg-[var(--app-bg)] px-3 py-2 text-sm">
+							<span>
+								<span className="block">展示用户全局 Skill</span>
+								<span className="text-xs text-muted-foreground">~/.claude/skills/</span>
+							</span>
+							<input
+								type="checkbox"
+								checked={showUserGlobalSkills}
+								onChange={(e) => toggleUserGlobalSkills(e.target.checked)}
+								className="size-4 accent-[var(--app-accent)]"
+							/>
+						</label>
+					</section>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function ModelRoleSelect({
+	label,
+	value,
+	models,
+	onChange,
+}: {
+	label: string;
+	value: string;
+	models: AvailableModelInfo[];
+	onChange: (value: string) => void;
+}) {
+	return (
+		<label className="grid gap-2 text-sm sm:grid-cols-[100px_1fr] sm:items-center">
+			<span className="text-muted-foreground">{label}</span>
+			<select
+				value={value}
+				onChange={(e) => onChange(e.target.value)}
+			className="form-field h-9"
+			>
+				<option value="">沿用 pi 默认</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>
+		</label>
+	);
+}

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

@@ -0,0 +1,354 @@
+import React, { useState } from "react";
+import {
+	BookOpen,
+	MessagesSquare,
+	Network,
+	PanelLeftClose,
+	PanelLeftOpen,
+	Plus,
+	Settings,
+} from "lucide-react";
+
+import { AddExternalDialog } from "./AddExternalDialog";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+import type { MainView } from "./MainViewTabs";
+import type { ConversationInfo, KnowledgeBaseInfo } from "../lib/api";
+import { cn } from "../lib/utils";
+
+interface Props {
+	knowledgeBases: KnowledgeBaseInfo[];
+	currentKbPath: string | null;
+	conversations: ConversationInfo[];
+	currentConversationId: string | null;
+	error: string | null;
+	collapsed: boolean;
+	activeView: MainView;
+	graphHasPendingUpdate?: boolean;
+	onSelectKb: (item: KnowledgeBaseInfo) => void;
+	onSelectConversation: (item: ConversationInfo) => void;
+	onSelectView: (view: MainView) => void;
+	onNewConversation: () => void;
+	onOpenSettings?: () => void;
+	onToggleCollapsed: () => void;
+	onAddExternal: (path: string) => Promise<void>;
+	onStartBatchDigest?: (input: {
+		kbPath: string;
+		filePaths: string[];
+		sourceScanId?: string;
+		digestModel?: { provider: string; modelId: string } | null;
+		concurrency: 1 | 3 | 5;
+	}) => void;
+}
+
+export function Sidebar({
+	knowledgeBases,
+	currentKbPath,
+	conversations,
+	currentConversationId,
+	error,
+	collapsed,
+	activeView,
+	graphHasPendingUpdate = false,
+	onSelectKb,
+	onSelectConversation,
+	onSelectView,
+	onNewConversation,
+	onOpenSettings,
+	onToggleCollapsed,
+	onAddExternal,
+	onStartBatchDigest,
+}: Props) {
+	const [dialogOpen, setDialogOpen] = useState(false);
+
+	const currentKb = knowledgeBases.find((item) => item.path === currentKbPath) ?? null;
+
+	const openCurrentKb = () => {
+		if (!currentKb || !currentKb.valid) return;
+		onSelectKb(currentKb);
+	};
+
+	if (collapsed) {
+		return (
+			<aside className="shell-sidebar shell-sidebar-collapsed" aria-label="折叠侧栏">
+				<div className="sidebar-rail">
+					<RailButton label="展开侧栏" onClick={onToggleCollapsed}>
+						<PanelLeftOpen />
+					</RailButton>
+					<div className="sidebar-rail-separator" />
+					<RailButton
+						label={currentKb ? `当前知识库：${currentKb.name}` : "当前知识库"}
+						onClick={openCurrentKb}
+						disabled={!currentKb?.valid}
+						active={Boolean(currentKb)}
+					>
+						<BookOpen />
+					</RailButton>
+					<RailButton
+						label="对话"
+						onClick={() => onSelectView("chat")}
+						active={activeView === "chat"}
+						disabled={!currentKb?.valid}
+					>
+						<MessagesSquare />
+					</RailButton>
+					<RailButton
+						label="图谱活地图"
+						onClick={() => onSelectView("graph")}
+						active={activeView === "graph"}
+						disabled={!currentKb?.valid}
+						badge={graphHasPendingUpdate}
+					>
+						<Network />
+					</RailButton>
+					<div className="sidebar-rail-spacer" />
+					<RailButton label="设置" onClick={onOpenSettings}>
+						<Settings />
+					</RailButton>
+					<RailButton label="新建知识库" onClick={() => setDialogOpen(true)}>
+						<Plus />
+					</RailButton>
+				</div>
+				<AddExternalDialog
+					open={dialogOpen}
+					onOpenChange={setDialogOpen}
+					onSubmit={onAddExternal}
+					onStartBatchDigest={onStartBatchDigest}
+				/>
+			</aside>
+		);
+	}
+
+	return (
+		<aside className="shell-sidebar">
+			<div className="sidebar-header">
+				<button
+					className="icon-btn"
+					type="button"
+					onClick={onToggleCollapsed}
+					title="折叠侧栏"
+					aria-label="折叠侧栏"
+				>
+					<PanelLeftClose />
+				</button>
+			</div>
+
+			<div className="sidebar-body">
+				{error && (
+					<div className="sidebar-error rounded-md border border-destructive bg-destructive/10 p-2 text-xs text-destructive">
+						{error}
+					</div>
+				)}
+
+				<Section title="笔记本">
+					{knowledgeBases.length === 0 ? (
+						<EmptyHint text="还没有知识库" />
+					) : (
+						knowledgeBases.map((item) => (
+							<KbItem
+								key={item.path}
+								item={item}
+								active={item.path === currentKbPath}
+								onClick={() => {
+									if (item.valid) onSelectKb(item);
+								}}
+							/>
+						))
+					)}
+				</Section>
+
+				<Section
+					title="会话"
+					action={
+						<button type="button" className="section-action" onClick={onNewConversation} aria-label="新对话">
+							<Plus className="size-3" />
+						</button>
+					}
+				>
+					{conversations.length === 0 ? (
+						<EmptyHint text="暂无对话" />
+					) : (
+						conversations.map((item) => (
+							<ConversationItem
+								key={item.id}
+								item={item}
+								active={item.id === currentConversationId}
+								onClick={() => onSelectConversation(item)}
+							/>
+						))
+					)}
+				</Section>
+			</div>
+
+			<div className="sidebar-footer sidebar-footer-v2">
+				<button
+					type="button"
+					className={cn("sidebar-footer-btn", activeView === "graph" && "sidebar-footer-btn-active")}
+					onClick={() => onSelectView("graph")}
+					disabled={!currentKb?.valid}
+				>
+					<Network className="size-4" />
+					<span>图谱活地图</span>
+					{graphHasPendingUpdate && <span className="graph-update-dot" aria-label="图谱有更新" />}
+				</button>
+				<button
+					type="button"
+					className="sidebar-footer-btn"
+					onClick={onOpenSettings}
+				>
+					<Settings className="size-4" />
+					<span>设置</span>
+				</button>
+				<button
+					type="button"
+					className="sidebar-footer-btn sidebar-footer-btn-primary"
+					onClick={() => setDialogOpen(true)}
+				>
+					<Plus className="size-4" />
+					<span>新建知识库</span>
+				</button>
+			</div>
+
+			<AddExternalDialog
+				open={dialogOpen}
+				onOpenChange={setDialogOpen}
+				onSubmit={onAddExternal}
+				onStartBatchDigest={onStartBatchDigest}
+			/>
+		</aside>
+	);
+}
+
+function RailButton({
+	label,
+	active,
+	disabled,
+	badge,
+	onClick,
+	children,
+}: {
+	label: string;
+	active?: boolean;
+	disabled?: boolean;
+	badge?: boolean;
+	onClick?: () => void;
+	children: React.ReactNode;
+}) {
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<button
+					type="button"
+					className={cn("sidebar-rail-btn", active && "sidebar-rail-btn-active")}
+					onClick={onClick}
+					disabled={disabled}
+					aria-label={label}
+				>
+					{children}
+					{badge && <span className="sidebar-rail-badge" />}
+				</button>
+			</TooltipTrigger>
+			<TooltipContent side="right">
+				<div className="text-xs">{label}</div>
+			</TooltipContent>
+		</Tooltip>
+	);
+}
+
+function Section({
+	title,
+	action,
+	children,
+}: {
+	title: string;
+	action?: React.ReactNode;
+	children: React.ReactNode;
+}) {
+	return (
+		<div className="sidebar-section">
+			<div className="sidebar-section-head">
+				<div className="sidebar-section-label">{title}</div>
+				{action}
+			</div>
+			<div className="sidebar-section-body">{children}</div>
+		</div>
+	);
+}
+
+function EmptyHint({ text }: { text: string }) {
+	return <div className="px-2 py-1 text-xs italic text-[var(--app-muted)]">{text}</div>;
+}
+
+function KbItem({
+	item,
+	active,
+	onClick,
+}: {
+	item: KnowledgeBaseInfo;
+	active: boolean;
+	onClick: () => void;
+}) {
+	const isDisabled = !item.valid;
+
+	const inner = (
+		<button
+			type="button"
+			onClick={onClick}
+			disabled={isDisabled}
+			className={cn("kb-row", active && "kb-row-active", isDisabled && "kb-row-disabled")}
+			title={item.path}
+		>
+			<span className="kb-name">{item.name}</span>
+			{!item.valid ? (
+				<span className="kb-badge kb-badge-invalid">不可用</span>
+			) : item.origin === "external" ? (
+				<span className="kb-badge kb-badge-external">外部</span>
+			) : (
+				<span className="kb-badge">默认</span>
+			)}
+		</button>
+	);
+
+	if (!item.valid && item.reason) {
+		return (
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<div>{inner}</div>
+				</TooltipTrigger>
+				<TooltipContent side="right">
+					<div className="text-xs">{item.reason}</div>
+					<div className="mt-1 text-[10px] opacity-70">{item.path}</div>
+				</TooltipContent>
+			</Tooltip>
+		);
+	}
+
+	return inner;
+}
+
+function ConversationItem({
+	item,
+	active,
+	onClick,
+}: {
+	item: ConversationInfo;
+	active: boolean;
+	onClick: () => void;
+}) {
+	const time = item.modifiedAt ? new Date(item.modifiedAt) : null;
+	const timeLabel = time ? `${time.getMonth() + 1}/${time.getDate()} ${pad(time.getHours())}:${pad(time.getMinutes())}` : "";
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			className={cn("conv-row", active && "conv-row-active")}
+			title={item.firstMessage}
+		>
+			<div className="conv-title">{item.firstMessage || "（无消息）"}</div>
+			{timeLabel && <div className="conv-time">{timeLabel}</div>}
+		</button>
+	);
+}
+
+function pad(n: number): string {
+	return n < 10 ? `0${n}` : `${n}`;
+}