@joekytc/dsh-swarm 0.1.2 → 0.2.0

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

@@ -0,0 +1,111 @@
+import React from "react";
+
+import { formatToolStatusItem, type ToolStatusGroup } from "../lib/tool-status-format";
+import type { ToolStatusCompletedItem, ToolStatusState } from "../lib/tool-status-model";
+
+export const TOOL_HISTORY_DETAIL_LIMIT = 50;
+
+interface Props {
+	state: ToolStatusState;
+	defaultExpanded?: boolean;
+}
+
+interface GroupSummary {
+	group: ToolStatusGroup;
+	label: string;
+	items: ToolStatusCompletedItem[];
+}
+
+const GROUP_LABELS: Record<ToolStatusGroup, string> = {
+	file: "文件",
+	command: "命令",
+	search: "搜索",
+	skill: "Skill",
+	other: "其他",
+};
+
+const GROUP_ORDER: ToolStatusGroup[] = ["file", "command", "search", "skill", "other"];
+
+export function ToolHistorySummary({ state, defaultExpanded = false }: Props) {
+	const [expanded, setExpanded] = React.useState(defaultExpanded);
+	const completed = state.completed;
+	if (completed.length === 0) return null;
+
+	const groups = groupCompletedItems(completed);
+	const visibleRows = completed.slice(0, TOOL_HISTORY_DETAIL_LIMIT);
+	const remainingCount = Math.max(0, completed.length - visibleRows.length + state.completedOverflowCount);
+	const totalCount = completed.length + state.completedOverflowCount;
+
+	return (
+		<React.Fragment>
+			<div className="tool-history-summary">
+				<button
+					type="button"
+					className="tool-history-header"
+					aria-expanded={expanded}
+					onClick={() => setExpanded((current) => !current)}
+				>
+					<span className="tool-history-title">已完成 {totalCount} 项工具调用</span>
+					<span className="tool-history-groups" aria-label="工具分组">
+						{groups.map((group) => (
+							<span key={group.group} className={`tool-history-group tool-history-group-${group.group}`}>
+								{group.label} {group.items.length}
+							</span>
+						))}
+					</span>
+				</button>
+				{expanded && <div className="tool-history-detail">
+					{visibleRows.map((item) => {
+						const formatted = formatCompletedItem(item);
+						return (
+							<div key={`${item.toolCallId}-${item.lastSeq}`} className={`tool-history-row tool-history-row-${item.status}`}>
+								<span className="tool-history-row-status">{statusLabel(item.status)}</span>
+								<span className="tool-history-row-action">{formatted.action}</span>
+								<span className="tool-history-row-target">{formatted.target}</span>
+								{item.summary && <span className="tool-history-row-summary">{item.summary}</span>}
+							</div>
+						);
+					})}
+					{remainingCount > 0 && <div className="tool-history-more">还有 {remainingCount} 项</div>}
+				</div>}
+			</div>
+		</React.Fragment>
+	);
+}
+
+function groupCompletedItems(items: ToolStatusCompletedItem[]): GroupSummary[] {
+	const groups = new Map<ToolStatusGroup, ToolStatusCompletedItem[]>();
+	for (const item of items) {
+		const formatted = formatCompletedItem(item);
+		const current = groups.get(formatted.group) ?? [];
+		current.push(item);
+		groups.set(formatted.group, current);
+	}
+	return GROUP_ORDER.flatMap((group) => {
+		const groupItems = groups.get(group);
+		if (!groupItems?.length) return [];
+		return [
+			{
+				group,
+				label: GROUP_LABELS[group],
+				items: groupItems,
+			},
+		];
+	});
+}
+
+function formatCompletedItem(item: ToolStatusCompletedItem) {
+	return formatToolStatusItem({
+		toolName: item.toolName,
+		action: item.action,
+		target: item.target,
+		args: item.args,
+		maxTargetLength: 56,
+	});
+}
+
+function statusLabel(status: ToolStatusCompletedItem["status"]): string {
+	if (status === "done") return "完成";
+	if (status === "failed") return "失败";
+	return "取消";
+}

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

@@ -0,0 +1,70 @@
+import React from "react";
+
+import { formatToolStatusItem } from "../lib/tool-status-format";
+import type { ToolDisplay } from "../lib/api";
+import type { ToolStatusCompletedItem, ToolStatusState } from "../lib/tool-status-model";
+
+export const TOOL_RUNWAY_DETAIL_LIMIT = 50;
+export const TOOL_RUNWAY_UPDATE_CADENCE_MS = 100;
+
+type RunwayStatus = "running" | "done" | "failed" | "cancelled";
+
+interface Props {
+	state: ToolStatusState;
+}
+
+export function ToolStatusRunway({ state }: Props) {
+	const active = state.active.at(-1);
+	const latest = active ?? state.completed.at(-1);
+	if (!latest && !state.cancelReason && !state.error) return null;
+
+	const status = getRunwayStatus(state, latest);
+	const formatted = latest
+		? formatToolStatusItem({
+				toolName: latest.toolName,
+				action: latest.action,
+				target: latest.target,
+				args: "args" in latest ? latest.args : {},
+				detail: "detail" in latest ? latest.detail : undefined,
+				maxTargetLength: 64,
+			})
+		: null;
+	const statusLabel = getStatusLabel(status, state);
+	const prefix = status === "running" ? "正在" : statusLabel;
+
+	return (
+		<React.Fragment>
+		<div className={`tool-runway tool-runway-${status}`} aria-label={`工具状态：${statusLabel}`}>
+			<div className="tool-runway-pulse" aria-hidden="true" />
+			<div className="tool-runway-main">
+				<div className="tool-runway-current">
+					<span className="tool-runway-status">{prefix}</span>
+					{formatted && <span className="tool-runway-action">{formatted.action}</span>}
+					{formatted && <span className="tool-runway-target">{formatted.target}</span>}
+					{active && state.active.length > 1 && (
+						<span className="tool-runway-meta">另有 {state.active.length - 1} 项</span>
+					)}
+				</div>
+			</div>
+		</div>
+		</React.Fragment>
+	);
+}
+
+function getRunwayStatus(
+	state: ToolStatusState,
+	latest: ToolStatusCompletedItem | ToolDisplay | undefined,
+): RunwayStatus {
+	if (state.error) return "failed";
+	if (state.cancelReason) return "cancelled";
+	if (!latest) return "done";
+	if ("status" in latest) return latest.status;
+	return "running";
+}
+
+function getStatusLabel(status: RunwayStatus, state: ToolStatusState): string {
+	if (status === "running") return "运行中";
+	if (status === "failed") return state.error ? "失败" : "工具失败";
+	if (status === "cancelled") return state.cancelReason ?? "已取消";
+	return "已完成";
+}

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

@@ -0,0 +1,348 @@
+import {
+	BookOpen,
+	Bot,
+	CheckCircle2,
+	ChevronDown,
+	Moon,
+	Plus,
+	Search,
+	Settings2,
+	Sun,
+	XCircle,
+} from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+import {
+	fetchAvailableModels,
+	getConfig,
+	setConfig,
+	type AvailableModelInfo,
+	type KnowledgeBaseInfo,
+	type ModelInfo,
+} from "../lib/api";
+import type { ThemeMode } from "../lib/appearance";
+import { modelInfoToValue, modelRefToValue, modelValueLabel, valueToModelRef } from "../lib/model-roles";
+import { cn } from "../lib/utils";
+import type { ChatStatusSnapshot, GraphStatusSnapshot } from "../lib/view-status";
+
+interface TopBarProps {
+	knowledgeBase: KnowledgeBaseInfo | null;
+	model: ModelInfo | null;
+	theme: ThemeMode;
+	chatStatus?: ChatStatusSnapshot;
+	graphStatus?: GraphStatusSnapshot;
+	appearanceOpen?: boolean;
+	searchDisabled?: boolean;
+	modelDisabled?: boolean;
+	newConversationDisabled?: boolean;
+	onSearch: () => void;
+	onConfigChanged?: () => void;
+	onNewConversation: () => void;
+	onToggleTheme: () => void;
+	onOpenAppearance: () => void;
+}
+
+export function TopBar({
+	knowledgeBase,
+	model,
+	theme,
+	chatStatus,
+	graphStatus,
+	appearanceOpen = false,
+	searchDisabled = false,
+	modelDisabled = false,
+	newConversationDisabled = false,
+	onSearch,
+	onConfigChanged,
+	onNewConversation,
+	onToggleTheme,
+	onOpenAppearance,
+}: TopBarProps) {
+	const kbLabel = knowledgeBase?.name ?? "未选择知识库";
+	const valid = knowledgeBase?.valid !== false;
+	const originLabel = knowledgeBase?.origin === "external" ? "外部" : "默认";
+
+	return (
+		<header className="topbar" aria-label="全局顶栏">
+			<div className="topbar-kb" aria-label="当前知识库">
+				<span className={cn("topbar-kb-icon", valid ? "topbar-kb-icon-valid" : "topbar-kb-icon-invalid")}>
+					<BookOpen />
+				</span>
+				<div className="topbar-kb-copy">
+					<span className="topbar-kb-name" title={kbLabel}>
+						{kbLabel}
+					</span>
+					<div className="topbar-kb-meta">
+						{knowledgeBase && <span className="topbar-kb-badge">{originLabel}</span>}
+						{knowledgeBase && (
+							<span
+								className={cn("topbar-kb-badge", valid ? "topbar-kb-badge-valid" : "topbar-kb-badge-invalid")}
+								title={knowledgeBase.reason}
+							>
+								{valid ? (
+									<CheckCircle2 aria-hidden="true" />
+								) : (
+									<XCircle aria-hidden="true" />
+								)}
+								{valid ? "可用" : "失效"}
+							</span>
+						)}
+					</div>
+				</div>
+			</div>
+
+			<div className="topbar-status" aria-label="运行状态">
+				<TopBarStatusPill kind="chat" snapshot={chatStatus} />
+				<TopBarStatusPill kind="graph" snapshot={graphStatus} />
+			</div>
+
+			<div className="topbar-actions" aria-label="全局操作">
+				<TopBarHint label="搜索当前知识库">
+					<button
+						type="button"
+						className="topbar-search"
+						onClick={onSearch}
+						disabled={searchDisabled || !knowledgeBase?.valid}
+					>
+						<Search />
+						<span>搜索</span>
+						<kbd>⌘K</kbd>
+					</button>
+				</TopBarHint>
+
+				<TopBarModelSelector
+					currentModel={model}
+					disabled={modelDisabled}
+					onConfigChanged={onConfigChanged}
+				/>
+
+				<TopBarHint label="新对话">
+					<button
+						type="button"
+						className="topbar-icon-action topbar-text-action"
+						onClick={onNewConversation}
+						disabled={newConversationDisabled || !knowledgeBase?.valid}
+					>
+						<Plus />
+						<span>新对话</span>
+					</button>
+				</TopBarHint>
+
+				<TopBarHint label={theme === "dark" ? "切换浅色暖纸" : "切换夜灯主题"}>
+					<button
+						type="button"
+						className="topbar-icon-action"
+						onClick={onToggleTheme}
+						aria-label={theme === "dark" ? "切换浅色暖纸" : "切换夜灯主题"}
+					>
+						{theme === "dark" ? <Sun /> : <Moon />}
+					</button>
+				</TopBarHint>
+
+				<TopBarHint label="外观偏好">
+					<button
+						type="button"
+						className={cn("topbar-icon-action", appearanceOpen && "topbar-icon-action-active")}
+						onClick={onOpenAppearance}
+						aria-label="外观偏好"
+						aria-pressed={appearanceOpen}
+					>
+						<Settings2 />
+					</button>
+				</TopBarHint>
+			</div>
+		</header>
+	);
+}
+
+function TopBarStatusPill({
+	kind,
+	snapshot,
+}: {
+	kind: "chat" | "graph";
+	snapshot?: ChatStatusSnapshot | GraphStatusSnapshot;
+}) {
+	const label = kind === "chat"
+		? chatStatusLabel(snapshot as ChatStatusSnapshot | undefined)
+		: graphStatusLabel(snapshot as GraphStatusSnapshot | undefined);
+	const tone = statusTone(snapshot?.status ?? "idle");
+	const title = snapshot?.summary ? `${label}：${snapshot.summary}` : label;
+	return (
+		<span className={cn("topbar-status-pill", `topbar-status-pill-${tone}`)} title={title}>
+			<span className="topbar-status-dot" aria-hidden="true" />
+			<span>{label}</span>
+		</span>
+	);
+}
+
+function chatStatusLabel(snapshot?: ChatStatusSnapshot): string {
+	if (snapshot?.status === "streaming") return "对话回复中";
+	if (snapshot?.status === "error") return "对话出错";
+	return "对话空闲";
+}
+
+function graphStatusLabel(snapshot?: GraphStatusSnapshot): string {
+	if (snapshot?.status === "loading") return "图谱读取中";
+	if (snapshot?.status === "building") return "图谱构建中";
+	if (snapshot?.status === "ready") {
+		if (snapshot.animation === "playing") return "图谱更新中";
+		if (snapshot.animation === "queued") return "图谱待更新";
+		return "图谱就绪";
+	}
+	if (snapshot?.status === "error") return "图谱出错";
+	return "图谱空闲";
+}
+
+function statusTone(status: ChatStatusSnapshot["status"] | GraphStatusSnapshot["status"]): "idle" | "busy" | "ready" | "error" {
+	if (status === "error") return "error";
+	if (status === "streaming" || status === "loading" || status === "building") return "busy";
+	if (status === "ready") return "ready";
+	return "idle";
+}
+
+function TopBarModelSelector({
+	currentModel,
+	disabled = false,
+	onConfigChanged,
+}: {
+	currentModel: ModelInfo | null;
+	disabled?: boolean;
+	onConfigChanged?: () => void;
+}) {
+	const rootRef = useRef<HTMLDivElement | null>(null);
+	const [open, setOpen] = useState(false);
+	const [models, setModels] = useState<AvailableModelInfo[]>([]);
+	const [value, setValue] = useState("");
+	const [loading, setLoading] = useState(false);
+	const [savingValue, setSavingValue] = useState<string | null>(null);
+	const [error, setError] = useState<string | null>(null);
+	const displayedValue = value || modelInfoToValue(currentModel);
+	const label = modelValueLabel(displayedValue);
+
+	const loadModels = async () => {
+		setLoading(true);
+		setError(null);
+		try {
+			const [config, availableModels] = await Promise.all([getConfig(), fetchAvailableModels()]);
+			setValue(modelRefToValue(config.modelRoles?.main));
+			setModels(availableModels);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const toggleOpen = () => {
+		if (open) {
+			setOpen(false);
+			return;
+		}
+		setOpen(true);
+		void loadModels();
+	};
+
+	useEffect(() => {
+		if (!open) return;
+		const onPointerDown = (event: PointerEvent) => {
+			if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
+		};
+		const onKeyDown = (event: KeyboardEvent) => {
+			if (event.key === "Escape") setOpen(false);
+		};
+		document.addEventListener("pointerdown", onPointerDown);
+		document.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.removeEventListener("pointerdown", onPointerDown);
+			document.removeEventListener("keydown", onKeyDown);
+		};
+	}, [open]);
+
+	const saveModel = async (nextValue: string) => {
+		setSavingValue(nextValue);
+		setError(null);
+		try {
+			await setConfig({ modelRoles: { main: valueToModelRef(nextValue) } });
+			setValue(nextValue);
+			onConfigChanged?.();
+			setOpen(false);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setSavingValue(null);
+		}
+	};
+
+	return (
+		<div className="topbar-model-wrap" ref={rootRef}>
+			<TopBarHint label="切换主对话模型">
+				<button
+					type="button"
+					className={cn("topbar-model", open && "topbar-model-active")}
+					onClick={toggleOpen}
+					disabled={disabled}
+					aria-expanded={open}
+					aria-haspopup="listbox"
+					aria-label={`切换主对话模型：${label}`}
+				>
+					<Bot />
+					<span>{label}</span>
+					<ChevronDown />
+				</button>
+			</TopBarHint>
+
+			{open && (
+				<div className="topbar-model-menu" role="listbox" aria-label="主对话模型">
+					<button
+						type="button"
+						role="option"
+						aria-selected={value === ""}
+						className={cn("topbar-model-option", value === "" && "topbar-model-option-active")}
+						onClick={() => saveModel("")}
+						disabled={savingValue !== null}
+					>
+						<span>沿用 pi 默认</span>
+						{savingValue === "" && <span className="topbar-model-option-note">保存中</span>}
+					</button>
+
+					{loading && <div className="topbar-model-state">加载模型中...</div>}
+					{error && <div className="topbar-model-state topbar-model-state-error">{error}</div>}
+					{!loading && !error && models.length === 0 && (
+						<div className="topbar-model-state">暂无可选模型</div>
+					)}
+					{models.map((item) => {
+						const optionValue = `${item.provider}/${item.modelId}`;
+						const selected = optionValue === value;
+						return (
+							<button
+								key={optionValue}
+								type="button"
+								role="option"
+								aria-selected={selected}
+								className={cn("topbar-model-option", selected && "topbar-model-option-active")}
+								onClick={() => saveModel(optionValue)}
+								disabled={!item.hasAuth || savingValue !== null}
+								title={item.hasAuth ? item.name : "未配置认证"}
+							>
+								<span>{optionValue}</span>
+								<span className="topbar-model-option-note">
+									{savingValue === optionValue ? "保存中" : item.hasAuth ? item.name : "未配置"}
+								</span>
+							</button>
+						);
+					})}
+				</div>
+			)}
+		</div>
+	);
+}
+
+function TopBarHint({ label, children }: { label: string; children: React.ReactElement }) {
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>{children}</TooltipTrigger>
+			<TooltipContent>{label}</TooltipContent>
+		</Tooltip>
+	);
+}

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

@@ -0,0 +1,88 @@
+import { Download } from "lucide-react";
+
+import { Button } from "../ui/button";
+import { getArtifactFileUrl, type ArtifactManifest } from "../../lib/api";
+
+interface Props {
+	manifest: ArtifactManifest;
+}
+
+const KIND_META: Record<ArtifactManifest["kind"], { icon: string; label: string }> = {
+	pdf: { icon: "📄", label: "PDF 文档" },
+	docx: { icon: "📝", label: "Word 文档" },
+	pptx: { icon: "📊", label: "PPT 演示文稿" },
+	xlsx: { icon: "📋", label: "Excel 表格" },
+	html: { icon: "🌐", label: "HTML 页面" },
+};
+
+export function DownloadOnlyRenderer({ manifest }: Props) {
+	const primaryUrl = getArtifactFileUrl(manifest.id, manifest.primaryFile);
+	const meta = KIND_META[manifest.kind];
+
+	return (
+		<div className="space-y-4">
+			<div className="rounded-md border border-input bg-muted/30 p-5 text-center">
+				<div className="text-5xl">{meta.icon}</div>
+				<div className="mt-3 text-base font-medium">{meta.label}</div>
+				<div className="mt-1 break-all text-sm text-muted-foreground">{manifest.primaryFile}</div>
+				<div className="mt-4 grid gap-2 text-left text-xs text-muted-foreground">
+					<div>大小：{formatBytes(manifest.metadata.sizeBytes)}</div>
+					<div>生成工具：{manifest.metadata.sourceSkill}</div>
+					<div>创建时间：{formatTime(manifest.metadata.createdAt)}</div>
+					<div>来源对话：{manifest.metadata.sourceConversationId.slice(0, 12)}</div>
+				</div>
+				<div className="mt-5 flex flex-col gap-2">
+					<Button onClick={() => downloadFile(primaryUrl, manifest.primaryFile)}>
+						<Download className="size-4" />
+						下载 {manifest.primaryFile}
+					</Button>
+				</div>
+			</div>
+
+			{manifest.files.length > 1 && (
+				<div className="rounded-md border border-input">
+					<div className="border-b border-input px-3 py-2 text-sm font-medium">附属文件</div>
+					<div className="divide-y divide-input">
+						{manifest.files
+							.filter((file) => file.name !== manifest.primaryFile)
+							.map((file) => (
+								<div key={file.name} className="flex items-center justify-between gap-3 px-3 py-2 text-sm">
+									<div className="min-w-0">
+										<div className="truncate">{file.name}</div>
+										<div className="text-xs text-muted-foreground">{formatBytes(file.sizeBytes)}</div>
+									</div>
+									<Button
+										variant="ghost"
+										size="icon"
+										onClick={() => downloadFile(getArtifactFileUrl(manifest.id, file.name), file.name)}
+										aria-label={`下载 ${file.name}`}
+									>
+										<Download className="size-4" />
+									</Button>
+								</div>
+							))}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
+function downloadFile(url: string, filename: string) {
+	const link = document.createElement("a");
+	link.href = url;
+	link.download = filename;
+	link.click();
+}
+
+function formatBytes(bytes: number): string {
+	if (bytes < 1024) return `${bytes} bytes`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function formatTime(value: string): string {
+	const date = new Date(value);
+	if (Number.isNaN(date.getTime())) return value;
+	return date.toLocaleString();
+}