@research-copilot/plugin 1.1.17 → 1.1.19

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

@@ -0,0 +1,436 @@
+import { useState } from "react";
+import {
+	BookOpen,
+	ChevronRight,
+	Download,
+	MessagesSquare,
+	Network,
+	PanelLeftClose,
+	PanelLeftOpen,
+	Plus,
+	RefreshCw,
+	Settings,
+} from "lucide-react";
+
+import { AddExternalDialog } from "@/components/AddExternalDialog";
+import { NewWikiDialog } from "@/components/NewWikiDialog";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import type { ConversationInfo, KnowledgeBaseInfo } from "@/lib/api";
+import { cn } from "@/lib/utils";
+
+export type MainView = "chat" | "graph";
+
+interface Props {
+	knowledgeBases: KnowledgeBaseInfo[];
+	currentKbPath: string | null;
+	conversations: ConversationInfo[];
+	currentConversationId: string | null;
+	loading: boolean;
+	error: string | null;
+	collapsed: boolean;
+	activeView: MainView;
+	graphHasPendingUpdate?: boolean;
+	onSelectKb: (item: KnowledgeBaseInfo) => void;
+	onSelectConversation: (item: ConversationInfo) => void;
+	onSelectView: (view: MainView) => void;
+	onNewConversation: () => void;
+	onRefresh: () => void;
+	onOpenSettings?: () => void;
+	onToggleCollapsed: () => void;
+	onAddExternal: (path: string) => Promise<void>;
+	onCreateWiki: (name: string, purpose: 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,
+	loading,
+	error,
+	collapsed,
+	activeView,
+	graphHasPendingUpdate = false,
+	onSelectKb,
+	onSelectConversation,
+	onSelectView,
+	onNewConversation,
+	onRefresh,
+	onOpenSettings,
+	onToggleCollapsed,
+	onAddExternal,
+	onCreateWiki,
+	onStartBatchDigest,
+}: Props) {
+	const [dialogOpen, setDialogOpen] = useState(false);
+	const [newWikiOpen, setNewWikiOpen] = useState(false);
+	const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+	const currentExpanded = currentKbPath ? expanded.has(currentKbPath) : false;
+	const currentKb = knowledgeBases.find((item) => item.path === currentKbPath) ?? null;
+	const toggleExpanded = (path: string) => {
+		setExpanded((prev) => {
+			const next = new Set(prev);
+			if (next.has(path)) next.delete(path);
+			else next.add(path);
+			return next;
+		});
+	};
+
+	const openCurrentKb = () => {
+		if (!currentKb || !currentKb.valid) return;
+		onSelectKb(currentKb);
+		setExpanded(new Set([currentKb.path]));
+	};
+
+	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>
+					<RailButton label="刷新" onClick={onRefresh} disabled={loading}>
+						<RefreshCw className={cn(loading && "animate-spin")} />
+					</RailButton>
+					<div className="sidebar-rail-spacer" />
+					<RailButton label="新建知识库" onClick={() => setNewWikiOpen(true)}>
+						<Plus />
+					</RailButton>
+					<RailButton label="添加现有库" onClick={() => setDialogOpen(true)}>
+						<Download />
+					</RailButton>
+					<RailButton label="设置" onClick={onOpenSettings}>
+						<Settings />
+					</RailButton>
+				</div>
+				<NewWikiDialog
+					open={newWikiOpen}
+					onOpenChange={setNewWikiOpen}
+					onSubmit={onCreateWiki}
+				/>
+				<AddExternalDialog
+					open={dialogOpen}
+					onOpenChange={setDialogOpen}
+					onSubmit={onAddExternal}
+					onStartBatchDigest={onStartBatchDigest}
+				/>
+			</aside>
+		);
+	}
+
+	return (
+		<aside className="shell-sidebar">
+			<div className="sidebar-header">
+				<div className="sidebar-brand">
+					<span className="sidebar-brand-dot" />
+					<span>llm-wiki-agent</span>
+				</div>
+				<div className="flex items-center gap-0.5">
+					<button
+						className="icon-btn"
+						type="button"
+						onClick={onToggleCollapsed}
+						title="折叠侧栏"
+						aria-label="折叠侧栏"
+					>
+						<PanelLeftClose />
+					</button>
+					<button className="icon-btn" type="button" onClick={onRefresh} disabled={loading} title="刷新">
+						<RefreshCw className={cn(loading && "animate-spin")} />
+					</button>
+					<button className="icon-btn" type="button" onClick={onOpenSettings} title="设置" aria-label="设置">
+						<Settings />
+					</button>
+				</div>
+			</div>
+
+			<div className="sidebar-body">
+				{error && (
+					<div className="rounded-md border border-destructive bg-destructive/10 p-2 text-xs text-destructive">
+						{error}
+					</div>
+				)}
+
+				<div className="main-view-switch" aria-label="主视图切换">
+					<button
+						type="button"
+						className={cn("main-view-btn", activeView === "chat" && "main-view-btn-active")}
+						onClick={() => onSelectView("chat")}
+						disabled={!currentKb?.valid}
+					>
+						<MessagesSquare className="size-3.5" />
+						<span>对话</span>
+					</button>
+					<button
+						type="button"
+						className={cn("main-view-btn", activeView === "graph" && "main-view-btn-active")}
+						onClick={() => onSelectView("graph")}
+						disabled={!currentKb?.valid}
+						data-pending-update={graphHasPendingUpdate ? "true" : "false"}
+					>
+						<Network className="size-3.5" />
+						<span>图谱</span>
+						{graphHasPendingUpdate && <span className="graph-update-dot" aria-label="图谱有更新" />}
+					</button>
+				</div>
+
+				<Section title="知识库">
+					{knowledgeBases.length === 0 ? (
+						<EmptyHint text="还没有知识库" />
+					) : (
+						knowledgeBases.map((item) => {
+							const active = item.path === currentKbPath;
+							const opened = active && currentExpanded;
+							return (
+								<div key={item.path}>
+									<KbItem
+										item={item}
+										active={active}
+										expanded={opened}
+										onClick={() => {
+											if (!item.valid) return;
+											if (active) {
+												toggleExpanded(item.path);
+											} else {
+												onSelectKb(item);
+												setExpanded(new Set([item.path]));
+											}
+										}}
+										onToggle={() => toggleExpanded(item.path)}
+									/>
+									{opened && (
+										<div className="kb-children">
+											<button type="button" onClick={onNewConversation} className="conv-new-btn">
+												<Plus className="size-3" />
+												<span>新对话</span>
+											</button>
+											{conversations.length === 0 ? (
+												<EmptyHint text="暂无对话" />
+											) : (
+												conversations.map((c) => (
+													<ConversationItem
+														key={c.id}
+														item={c}
+														active={c.id === currentConversationId}
+														onClick={() => onSelectConversation(c)}
+													/>
+												))
+											)}
+										</div>
+									)}
+								</div>
+							);
+						})
+					)}
+				</Section>
+			</div>
+
+			<div className="sidebar-footer">
+				<button
+					type="button"
+					className="sidebar-footer-btn sidebar-footer-btn-primary"
+					onClick={() => setNewWikiOpen(true)}
+				>
+					<Plus className="size-4" />
+					<span>新建知识库</span>
+				</button>
+				<button
+					type="button"
+					className="sidebar-footer-btn"
+					onClick={() => setDialogOpen(true)}
+				>
+					<Download className="size-4" />
+					<span>添加现有库</span>
+				</button>
+			</div>
+
+			<NewWikiDialog
+				open={newWikiOpen}
+				onOpenChange={setNewWikiOpen}
+				onSubmit={onCreateWiki}
+			/>
+			<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, children }: { title: string; children: React.ReactNode }) {
+	return (
+		<div>
+			<div className="sidebar-section-label">{title}</div>
+			<div>{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,
+	expanded,
+	onClick,
+	onToggle,
+}: {
+	item: KnowledgeBaseInfo;
+	active: boolean;
+	expanded: boolean;
+	onClick: () => void;
+	onToggle: () => void;
+}) {
+	const isDisabled = !item.valid;
+
+	const inner = (
+		<div className={cn("kb-row", active && "kb-row-active", isDisabled && "kb-row-disabled")}>
+			<button
+				type="button"
+				onClick={(event) => {
+					event.stopPropagation();
+					onToggle();
+				}}
+				disabled={isDisabled || !active}
+				className={cn("kb-chevron", expanded && "kb-chevron-open")}
+				aria-label="展开对话"
+			>
+				<ChevronRight className="size-3" />
+			</button>
+			<button
+				type="button"
+				onClick={onClick}
+				disabled={isDisabled}
+				className="flex min-w-0 flex-1 items-center gap-2 text-left disabled:cursor-not-allowed"
+				title={item.path}
+			>
+				<span className="kb-name">{item.name}</span>
+			</button>
+			{!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>
+			)}
+		</div>
+	);
+
+	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}`;
+}

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

@@ -0,0 +1,123 @@
+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_FOLDED_TARGET_LIMIT = 3;
+export const TOOL_HISTORY_DETAIL_LIMIT = 50;
+
+interface Props {
+	state: ToolStatusState;
+	defaultExpanded?: boolean;
+}
+
+interface GroupSummary {
+	group: ToolStatusGroup;
+	label: string;
+	items: ToolStatusCompletedItem[];
+	targets: string[];
+}
+
+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">工具摘要</span>
+					<span className="tool-history-count">{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>
+					<span className="tool-history-targets" aria-label="关键目标">
+						{groups.flatMap((group) => group.targets).slice(0, TOOL_HISTORY_FOLDED_TARGET_LIMIT).map((target) => (
+							<span key={target} className="tool-history-chip">
+								{target}
+							</span>
+						))}
+						{state.completedOverflowLabel && <span className="tool-history-chip">{state.completedOverflowLabel}</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,
+				targets: groupItems.map((item) => formatCompletedItem(item).target),
+			},
+		];
+	});
+}
+
+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/dist/skills/llm-wiki/workbench/web/src/components/ToolStatusRunway.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+
+import { formatToolStatusItem, truncateToolStatusText } from "../lib/tool-status-format";
+import type { ToolDisplay } from "../lib/api";
+import type { ToolStatusCompletedItem, ToolStatusState } from "../lib/tool-status-model";
+
+export const TOOL_RUNWAY_TARGET_LIMIT = 3;
+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 summaryTargets = getSummaryTargets(state);
+	const statusLabel = getStatusLabel(status, state);
+
+	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-line">
+					<span className="tool-runway-status">{statusLabel}</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>
+				{summaryTargets.length > 0 && (
+					<div className="tool-runway-targets">
+						{summaryTargets.map((target) => (
+							<span key={target} className="tool-runway-chip">
+								{target}
+							</span>
+						))}
+						{state.completedOverflowLabel && (
+							<span className="tool-runway-chip">{state.completedOverflowLabel}</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 "已完成";
+}
+
+function getSummaryTargets(state: ToolStatusState): string[] {
+	return state.completed
+		.slice(-TOOL_RUNWAY_TARGET_LIMIT)
+		.map((item) => truncateToolStatusText(item.target, 42))
+		.filter(Boolean);
+}