@joekytc/dsh-swarm 0.1.2 → 0.2.0

package/skills/llm-wiki-skill/workbench/web/src/lib/tool-status-model.ts

@@ -0,0 +1,392 @@
+import type {
+	AssistantCancelledEvent,
+	AssistantErrorEvent,
+	ToolDisplay,
+	ToolRunStatus,
+	ToolStatusContractEvent,
+	ToolStatusEndEvent,
+	ToolStatusStartEvent,
+	ToolStatusSummaryEvent,
+	ToolStatusUpdateEvent,
+} from "./api";
+
+type CompletedStatus = Exclude<ToolRunStatus, "running">;
+
+export interface ToolStatusModelOptions {
+	coalesceMs?: number;
+	maxCompletedItems?: number;
+	maxSummaryItems?: number;
+}
+
+export interface ToolStatusReduceOptions {
+	nowMs: number;
+}
+
+export interface ToolStatusActiveItem extends ToolDisplay {
+	status: "running";
+	args: Record<string, unknown>;
+	detail?: unknown;
+	startSeq: number;
+	lastSeq: number;
+}
+
+export interface ToolStatusCompletedItem extends ToolDisplay {
+	status: CompletedStatus;
+	args: Record<string, unknown>;
+	summary: string | null;
+	error: string | null;
+	durationMs: number;
+	lastSeq: number;
+}
+
+export interface ToolStatusSummaryState {
+	items: Array<ToolDisplay & { status: CompletedStatus; summary: string | null }>;
+	remainingRunningCount: number;
+	overflowCount: number;
+	overflowLabel: string | null;
+}
+
+export interface IgnoredToolStatusEvent {
+	seq: number;
+	type: ToolStatusContractEvent["type"];
+	reason: "foreign-run" | "foreign-message" | "duplicate-or-late";
+}
+
+interface PendingToolUpdate {
+	event: ToolStatusUpdateEvent;
+	nowMs: number;
+}
+
+export interface ToolStatusState {
+	runId: string;
+	messageId: string;
+	active: ToolStatusActiveItem[];
+	completed: ToolStatusCompletedItem[];
+	failures: ToolStatusCompletedItem[];
+	summary: ToolStatusSummaryState;
+	ignored: IgnoredToolStatusEvent[];
+	isDone: boolean;
+	cancelReason: string | null;
+	error: string | null;
+	lastSeq: number;
+	coalesceMs: number;
+	nextUpdateFlushAt: number;
+	pendingUpdateCount: number;
+	completedOverflowCount: number;
+	completedOverflowLabel: string | null;
+	maxCompletedItems: number;
+	maxSummaryItems: number;
+	pendingUpdates: Record<string, PendingToolUpdate>;
+}
+
+const DEFAULT_COALESCE_MS = 100;
+const DEFAULT_MAX_COMPLETED_ITEMS = 20;
+const DEFAULT_MAX_SUMMARY_ITEMS = 8;
+
+export function createToolStatusState(
+	runId: string,
+	messageId: string,
+	options: ToolStatusModelOptions = {},
+): ToolStatusState {
+	return {
+		runId,
+		messageId,
+		active: [],
+		completed: [],
+		failures: [],
+		summary: {
+			items: [],
+			remainingRunningCount: 0,
+			overflowCount: 0,
+			overflowLabel: null,
+		},
+		ignored: [],
+		isDone: false,
+		cancelReason: null,
+		error: null,
+		lastSeq: 0,
+		coalesceMs: options.coalesceMs ?? DEFAULT_COALESCE_MS,
+		nextUpdateFlushAt: Number.POSITIVE_INFINITY,
+		pendingUpdateCount: 0,
+		completedOverflowCount: 0,
+		completedOverflowLabel: null,
+		maxCompletedItems: options.maxCompletedItems ?? DEFAULT_MAX_COMPLETED_ITEMS,
+		maxSummaryItems: options.maxSummaryItems ?? DEFAULT_MAX_SUMMARY_ITEMS,
+		pendingUpdates: {},
+	};
+}
+
+export function reduceToolStatusEvents(
+	state: ToolStatusState,
+	events: readonly ToolStatusContractEvent[],
+	options: ToolStatusReduceOptions,
+): ToolStatusState {
+	return events.reduce((nextState, event) => reduceToolStatusEvent(nextState, event, options), state);
+}
+
+export function reduceToolStatusEvent(
+	state: ToolStatusState,
+	event: ToolStatusContractEvent,
+	options: ToolStatusReduceOptions,
+): ToolStatusState {
+	const ignoredReason = getIgnoredReason(state, event);
+	if (ignoredReason) {
+		return {
+			...state,
+			ignored: [...state.ignored, { seq: event.seq, type: event.type, reason: ignoredReason }],
+		};
+	}
+
+	const acceptedState = { ...state, lastSeq: event.seq };
+	switch (event.type) {
+		case "tool_status_start":
+			return reduceStart(acceptedState, event, options.nowMs);
+		case "tool_status_update":
+			return reduceUpdate(acceptedState, event, options.nowMs);
+		case "tool_status_end":
+			return reduceEnd(acceptedState, event);
+		case "tool_status_summary":
+			return reduceSummary(acceptedState, event);
+		case "assistant_done":
+			return { ...acceptedState, active: [], pendingUpdates: {}, pendingUpdateCount: 0, isDone: true };
+		case "assistant_cancelled":
+			return reduceCancelled(acceptedState, event);
+		case "assistant_error":
+			return reduceError(acceptedState, event);
+		case "assistant_text_delta":
+			return acceptedState;
+		default:
+			return assertNever(event);
+	}
+}
+
+export function flushToolStatusUpdates(state: ToolStatusState, nowMs: number): ToolStatusState {
+	if (state.pendingUpdateCount === 0 || nowMs < state.nextUpdateFlushAt) return state;
+	let nextState = state;
+	for (const pending of Object.values(state.pendingUpdates)) {
+		nextState = applyUpdateToActive(nextState, pending.event, pending.nowMs);
+	}
+	return {
+		...nextState,
+		pendingUpdates: {},
+		pendingUpdateCount: 0,
+		nextUpdateFlushAt: nowMs + state.coalesceMs,
+	};
+}
+
+export function cancelActiveToolStatus(state: ToolStatusState, reason = "已停止"): ToolStatusState {
+	if (state.active.length === 0 && state.pendingUpdateCount === 0) {
+		return { ...state, isDone: true, cancelReason: reason };
+	}
+	const cancelledItems: ToolStatusCompletedItem[] = state.active.map((item) => ({
+		toolCallId: item.toolCallId,
+		toolName: item.toolName,
+		action: item.action,
+		target: item.target,
+		status: "cancelled",
+		args: item.args,
+		summary: reason,
+		error: null,
+		durationMs: 0,
+		lastSeq: item.lastSeq,
+	}));
+	const nextState = capCompleted({
+		...state,
+		active: [],
+		completed: [...state.completed, ...cancelledItems],
+		pendingUpdates: {},
+		pendingUpdateCount: 0,
+		isDone: true,
+		cancelReason: reason,
+	});
+	const summaryItems = nextState.completed.map((item) => ({
+		toolCallId: item.toolCallId,
+		toolName: item.toolName,
+		action: item.action,
+		target: item.target,
+		status: item.status,
+		summary: item.summary,
+	}));
+	const cappedItems = summaryItems.slice(0, nextState.maxSummaryItems);
+	const overflowCount = Math.max(0, summaryItems.length - cappedItems.length);
+	return {
+		...nextState,
+		summary: {
+			items: cappedItems,
+			remainingRunningCount: 0,
+			overflowCount,
+			overflowLabel: makeOverflowLabel(overflowCount),
+		},
+	};
+}
+
+function reduceStart(state: ToolStatusState, event: ToolStatusStartEvent, nowMs: number): ToolStatusState {
+	const active = withoutTool(state.active, event.toolCallId);
+	const nextItem: ToolStatusActiveItem = {
+		toolCallId: event.toolCallId,
+		toolName: event.toolName,
+		action: event.action,
+		target: event.target,
+		status: "running",
+		args: event.args ?? {},
+		startSeq: event.seq,
+		lastSeq: event.seq,
+	};
+	return {
+		...state,
+		active: [...active, nextItem],
+		nextUpdateFlushAt: Number.isFinite(state.nextUpdateFlushAt)
+			? state.nextUpdateFlushAt
+			: nowMs + state.coalesceMs,
+	};
+}
+
+function reduceUpdate(state: ToolStatusState, event: ToolStatusUpdateEvent, nowMs: number): ToolStatusState {
+	if (nowMs < state.nextUpdateFlushAt) {
+		const pendingUpdates = {
+			...state.pendingUpdates,
+			[event.toolCallId]: { event, nowMs },
+		};
+		return {
+			...state,
+			pendingUpdates,
+			pendingUpdateCount: state.pendingUpdateCount + 1,
+		};
+	}
+	return {
+		...applyUpdateToActive(state, event, nowMs),
+		nextUpdateFlushAt: nowMs + state.coalesceMs,
+	};
+}
+
+function applyUpdateToActive(
+	state: ToolStatusState,
+	event: ToolStatusUpdateEvent,
+	nowMs: number,
+): ToolStatusState {
+	const existing = state.active.find((item) => item.toolCallId === event.toolCallId);
+	const nextItem: ToolStatusActiveItem = {
+		toolCallId: event.toolCallId,
+		toolName: event.toolName,
+		action: event.action,
+		target: event.target,
+		status: "running",
+		args: Object.keys(event.args ?? {}).length > 0 ? event.args : existing?.args ?? {},
+		detail: event.detail,
+		startSeq: existing?.startSeq ?? event.seq,
+		lastSeq: event.seq,
+	};
+	return {
+		...state,
+		active: [...withoutTool(state.active, event.toolCallId), nextItem],
+		nextUpdateFlushAt: Number.isFinite(state.nextUpdateFlushAt)
+			? state.nextUpdateFlushAt
+			: nowMs + state.coalesceMs,
+	};
+}
+
+function reduceEnd(state: ToolStatusState, event: ToolStatusEndEvent): ToolStatusState {
+	const existing = state.active.find((item) => item.toolCallId === event.toolCallId);
+	const args = existing?.args ?? {};
+	const completedItem: ToolStatusCompletedItem = {
+		toolCallId: event.toolCallId,
+		toolName: event.toolName,
+		action: event.action,
+		target: event.target,
+		status: event.status,
+		args,
+		summary: event.summary,
+		error: event.error,
+		durationMs: event.durationMs,
+		lastSeq: event.seq,
+	};
+	return capCompleted({
+		...state,
+		active: withoutTool(state.active, event.toolCallId),
+		pendingUpdates: omitTool(state.pendingUpdates, event.toolCallId),
+		pendingUpdateCount: Object.keys(omitTool(state.pendingUpdates, event.toolCallId)).length,
+		completed: [...state.completed, completedItem],
+		failures: event.status === "failed" ? [...state.failures, completedItem] : state.failures,
+	});
+}
+
+function reduceSummary(state: ToolStatusState, event: ToolStatusSummaryEvent): ToolStatusState {
+	const cappedItems = event.items.slice(0, state.maxSummaryItems);
+	const overflowCount = Math.max(0, event.items.length - cappedItems.length);
+	return {
+		...state,
+		summary: {
+			items: cappedItems,
+			remainingRunningCount: event.remainingRunningCount,
+			overflowCount,
+			overflowLabel: makeOverflowLabel(overflowCount),
+		},
+	};
+}
+
+function reduceCancelled(state: ToolStatusState, event: AssistantCancelledEvent): ToolStatusState {
+	return {
+		...state,
+		active: [],
+		pendingUpdates: {},
+		pendingUpdateCount: 0,
+		isDone: true,
+		cancelReason: event.reason,
+	};
+}
+
+function reduceError(state: ToolStatusState, event: AssistantErrorEvent): ToolStatusState {
+	return {
+		...state,
+		active: [],
+		pendingUpdates: {},
+		pendingUpdateCount: 0,
+		isDone: true,
+		error: event.error,
+	};
+}
+
+function capCompleted(state: ToolStatusState): ToolStatusState {
+	const overflowCount = Math.max(0, state.completed.length - state.maxCompletedItems);
+	if (overflowCount === 0) {
+		return {
+			...state,
+			completedOverflowCount: 0,
+			completedOverflowLabel: null,
+		};
+	}
+	return {
+		...state,
+		completed: state.completed.slice(overflowCount),
+		completedOverflowCount: state.completedOverflowCount + overflowCount,
+		completedOverflowLabel: makeOverflowLabel(state.completedOverflowCount + overflowCount),
+	};
+}
+
+function getIgnoredReason(
+	state: ToolStatusState,
+	event: ToolStatusContractEvent,
+): IgnoredToolStatusEvent["reason"] | null {
+	if (event.runId !== state.runId) return "foreign-run";
+	if (event.messageId !== state.messageId) return "foreign-message";
+	if (event.seq <= state.lastSeq) return "duplicate-or-late";
+	return null;
+}
+
+function withoutTool<T extends ToolDisplay>(items: readonly T[], toolCallId: string): T[] {
+	return items.filter((item) => item.toolCallId !== toolCallId);
+}
+
+function omitTool<T>(items: Record<string, T>, toolCallId: string): Record<string, T> {
+	const nextItems = { ...items };
+	delete nextItems[toolCallId];
+	return nextItems;
+}
+
+function makeOverflowLabel(count: number): string | null {
+	return count > 0 ? `还有 ${count} 项` : null;
+}
+
+function assertNever(value: never): never {
+	throw new Error(`Unsupported tool status event: ${JSON.stringify(value)}`);
+}

package/skills/llm-wiki-skill/workbench/web/src/lib/utils.ts

@@ -0,0 +1,10 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * 合并 className 的工具函数（shadcn 标准）
+ * 用法：cn("base-class", condition && "extra-class", className)
+ */
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

package/skills/llm-wiki-skill/workbench/web/src/lib/view-status.ts

@@ -0,0 +1,16 @@
+export type ChatStatusKind = "idle" | "streaming" | "error";
+export type GraphStatusKind = "idle" | "loading" | "building" | "ready" | "error";
+
+export interface ChatStatusSnapshot {
+	status: ChatStatusKind;
+	summary?: string | null;
+}
+
+export interface GraphStatusSnapshot {
+	status: GraphStatusKind;
+	summary?: string | null;
+	animation?: "idle" | "playing" | "queued";
+}
+
+export const DEFAULT_CHAT_STATUS: ChatStatusSnapshot = { status: "idle", summary: null };
+export const DEFAULT_GRAPH_STATUS: GraphStatusSnapshot = { status: "idle", summary: null, animation: "idle" };

package/skills/llm-wiki-skill/workbench/web/src/lib/wiki-links.ts

@@ -0,0 +1,32 @@
+export const WIKI_LINK_SEEN_EVENT = "llm-wiki-agent:wiki-link-seen";
+
+export function extractWikiPageRefs(content: string): string[] {
+	const seen = new Set<string>();
+	const refs: string[] = [];
+	const patterns = [
+		/\[\[(wiki\/[^\]\n]+?\.md)\]\]/g,
+		/\]\((wiki\/[^)\n]+?\.md)\)/g
+	];
+	for (const pattern of patterns) {
+		addMatches(content, pattern, seen, refs);
+	}
+	return refs;
+}
+
+function addMatches(content: string, pattern: RegExp, seen: Set<string>, refs: string[]): void {
+	for (const match of content.matchAll(pattern)) {
+		const target = match[1];
+		if (seen.has(target)) continue;
+		seen.add(target);
+		refs.push(target);
+	}
+}
+
+export function normalizeWikiLinks(content: string): string {
+	return content.replace(/\[\[(wiki\/[^\]\n]+?\.md)\]\]/g, (_match, target: string) => `[${target}](${target})`);
+}
+
+export function emitWikiLinkSeen(path: string): void {
+	if (typeof window === "undefined") return;
+	window.dispatchEvent(new CustomEvent<string>(WIKI_LINK_SEEN_EVENT, { detail: path }));
+}

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

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/skills/llm-wiki-skill/workbench/web/test/api.test.ts

@@ -0,0 +1,61 @@
+import { afterEach, describe, it } from "node:test";
+import assert from "node:assert/strict";
+
+import {
+	getGraphData,
+	getGraphLayout,
+	putGraphLayout,
+	rebuildGraph,
+} from "../src/lib/api";
+
+describe("graph API helpers", () => {
+	const originalFetch = globalThis.fetch;
+
+	afterEach(() => {
+		globalThis.fetch = originalFetch;
+	});
+
+	it("binds graph reads, rebuilds, and layout writes to the requested knowledge base", async () => {
+		const requests: Array<{ url: string; method: string; body?: BodyInit | null }> = [];
+		const responses: unknown[] = [
+			{ ok: true, needsBuild: true, graphPath: "/kb/wiki/graph-data.json" },
+			{ ok: true, layoutPath: "/kb/.wiki-graph-layout.json", layout: { version: 1, pins: {}, updatedAt: "" } },
+			{ ok: true, status: "started" },
+			{ ok: true, layoutPath: "/kb/.wiki-graph-layout.json", layout: { version: 1, pins: {}, updatedAt: "" } },
+		];
+		globalThis.fetch = (async (input, init) => {
+			requests.push({
+				url: String(input),
+				method: init?.method ?? "GET",
+				body: init?.body,
+			});
+			return new Response(JSON.stringify(responses.shift()), {
+				headers: { "Content-Type": "application/json" },
+			});
+		}) as typeof fetch;
+
+		const kbPath = "/tmp/Knowledge Base";
+		await getGraphData(kbPath);
+		await getGraphLayout(kbPath);
+		await rebuildGraph(kbPath);
+		await putGraphLayout(kbPath, { "wiki/a.md": { x: 1, y: 2 } });
+
+		assert.deepEqual(
+			requests.map((request) => request.url),
+			[
+				"/api/graph?kb=%2Ftmp%2FKnowledge%20Base",
+				"/api/graph/layout?kb=%2Ftmp%2FKnowledge%20Base",
+				"/api/graph/rebuild?kb=%2Ftmp%2FKnowledge%20Base",
+				"/api/graph/layout?kb=%2Ftmp%2FKnowledge%20Base",
+			],
+		);
+		assert.deepEqual(
+			requests.map((request) => request.method),
+			["GET", "GET", "POST", "PUT"],
+		);
+		assert.deepEqual(JSON.parse(String(requests[3]?.body)), {
+			version: 2,
+			pins: { "wiki/a.md": { x: 1, y: 2 } },
+		});
+	});
+});

package/skills/llm-wiki-skill/workbench/web/test/app-shell-drawer-layout.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+import {
+	CHAT_INPUT_HORIZONTAL_PADDING,
+	DEFAULT_DRAWER_WIDTH,
+	MIN_COMPOSER_WIDTH,
+	clampDrawerWidthForViewport,
+} from "../src/lib/drawer-layout";
+
+describe("App shell drawer layout", () => {
+	it("uses desktop drawer reflow and narrow overlay contracts", () => {
+		const css = readFileSync(resolve(import.meta.dirname, "../src/index.css"), "utf8");
+
+		assert.match(css, /\.app-body\[data-drawer-open="true"\][\s\S]*\.shell-main/);
+		assert.match(css, /\.shell-main[\s\S]*min-width:\s*0/);
+		assert.match(css, /\.drawer-panel-open[\s\S]*width:\s*var\(--drawer-width/);
+		assert.match(css, /\.app-body\[data-graph-drawer-overlay="true"\]\s+\.drawer-panel-open[\s\S]*position:\s*absolute/);
+		assert.match(css, /\.app-body\[data-graph-drawer-overlay="true"\]\s+\.drawer-panel-open[\s\S]*inset:\s*0 0 0 auto/);
+		assert.doesNotMatch(css, /@media \(max-width:\s*1180px\)[\s\S]*\.drawer-panel-open[\s\S]*position:\s*fixed/);
+		assert.match(css, /@media \(max-width:\s*900px\)[\s\S]*\.drawer-panel-open[\s\S]*position:\s*fixed/);
+		assert.match(css, /@media \(max-width:\s*900px\)[\s\S]*\.drawer-panel-open[\s\S]*inset:\s*60px 0 0 auto/);
+		assert.doesNotMatch(css, /@media \(max-width:\s*768px\)[\s\S]*\.shell-sidebar[\s\S]*display:\s*none/);
+		assert.match(css, /\.drawer-panel\.drawer-panel-fullscreen[\s\S]*inset:\s*0/);
+	});
+
+	it("clamps the default drawer width so the V2 composer stays usable on 1024px desktop", () => {
+		const drawerWidth = clampDrawerWidthForViewport(DEFAULT_DRAWER_WIDTH, {
+			viewportWidth: 1024,
+			sidebarWidth: 252,
+		});
+		const composerWidth = 1024 - 252 - drawerWidth - CHAT_INPUT_HORIZONTAL_PADDING;
+
+		assert.equal(drawerWidth, 320);
+		assert.equal(composerWidth, MIN_COMPOSER_WIDTH);
+	});
+
+	it("keeps the right drawer readable when it switches to overlay on narrow screens", () => {
+		const drawerWidth = clampDrawerWidthForViewport(DEFAULT_DRAWER_WIDTH, {
+			viewportWidth: 768,
+			sidebarWidth: 252,
+		});
+
+		assert.equal(drawerWidth, DEFAULT_DRAWER_WIDTH);
+	});
+});

package/skills/llm-wiki-skill/workbench/web/test/appearance-panel.test.tsx

@@ -0,0 +1,121 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import React from "react";
+
+import { AppearancePanel } from "../src/components/AppearancePanel";
+import {
+	APPEARANCE_STORAGE_PREFIX,
+	DEFAULT_APPEARANCE,
+	THEME_STORAGE_KEY,
+	applyAppearance,
+	mergeAppearance,
+	writeAppearance,
+	type AppearancePrefs,
+} from "../src/lib/appearance";
+import { click, render, screen } from "./render";
+
+describe("AppearancePanel", () => {
+	it("stays hidden until opened", () => {
+		render(
+			<AppearancePanel
+				open={false}
+				value={DEFAULT_APPEARANCE}
+				onChange={noopChange}
+				onClose={noop}
+			/>,
+		);
+
+		assert.equal(screen.queryByLabelText("外观偏好"), null);
+	});
+
+	it("emits controlled preference patches from segments and swatches", async () => {
+		const patches: Array<Partial<AppearancePrefs>> = [];
+		render(
+			<AppearancePanel
+				open
+				value={DEFAULT_APPEARANCE}
+				onChange={(patch) => patches.push(patch)}
+				onClose={noop}
+			/>,
+		);
+
+		await click(screen.getByRole("button", { name: "夜灯" }));
+		await click(screen.getByRole("button", { name: "网格" }));
+		await click(screen.getByRole("button", { name: "配色：玫瑰" }));
+		await click(screen.getByRole("button", { name: "实色" }));
+		await click(screen.getByRole("button", { name: "关闭" }));
+		await click(screen.getByRole("button", { name: "紧凑" }));
+
+		assert.deepEqual(patches, [
+			{ theme: "dark" },
+			{ paper: "grid" },
+			{ accent: "rose" },
+			{ userbubble: "solid" },
+			{ hand: "off" },
+			{ density: "compact" },
+		]);
+	});
+
+	it("applies clicked segments and swatches to page data attributes and stored preferences", async () => {
+		render(<AppliedAppearanceHarness />);
+
+		await click(screen.getByRole("button", { name: "夜灯" }));
+		await click(screen.getByRole("button", { name: "网格" }));
+		await click(screen.getByRole("button", { name: "配色：玫瑰" }));
+		await click(screen.getByRole("button", { name: "实色" }));
+		await click(screen.getByRole("button", { name: "关闭" }));
+		await click(screen.getByRole("button", { name: "紧凑" }));
+
+		assert.equal(document.documentElement.dataset.theme, "dark");
+		assert.equal(document.documentElement.dataset.paper, "grid");
+		assert.equal(document.documentElement.dataset.accent, "rose");
+		assert.equal(document.documentElement.dataset.userbubble, "solid");
+		assert.equal(document.documentElement.dataset.hand, "off");
+		assert.equal(document.documentElement.dataset.density, "compact");
+		assert.equal(document.documentElement.classList.contains("dark"), true);
+
+		assert.equal(window.localStorage.getItem(THEME_STORAGE_KEY), "dark");
+		assert.equal(window.localStorage.getItem(`${APPEARANCE_STORAGE_PREFIX}paper`), "grid");
+		assert.equal(window.localStorage.getItem(`${APPEARANCE_STORAGE_PREFIX}accent`), "rose");
+		assert.equal(window.localStorage.getItem(`${APPEARANCE_STORAGE_PREFIX}userbubble`), "solid");
+		assert.equal(window.localStorage.getItem(`${APPEARANCE_STORAGE_PREFIX}hand`), "off");
+		assert.equal(window.localStorage.getItem(`${APPEARANCE_STORAGE_PREFIX}density`), "compact");
+	});
+
+	it("emits close when the close button is clicked", async () => {
+		const calls: string[] = [];
+		render(
+			<AppearancePanel
+				open
+				value={DEFAULT_APPEARANCE}
+				onChange={noopChange}
+				onClose={() => calls.push("close")}
+			/>,
+		);
+
+		await click(screen.getByRole("button", { name: "关闭外观面板" }));
+
+		assert.deepEqual(calls, ["close"]);
+	});
+});
+
+function noop() {}
+function noopChange() {}
+
+function AppliedAppearanceHarness() {
+	const [appearance, setAppearance] = React.useState<AppearancePrefs>(DEFAULT_APPEARANCE);
+
+	React.useEffect(() => {
+		applyAppearance(appearance);
+		writeAppearance(appearance);
+	}, [appearance]);
+
+	return (
+		<AppearancePanel
+			open
+			value={appearance}
+			onChange={(patch) => setAppearance((current) => mergeAppearance(current, patch))}
+			onClose={noop}
+		/>
+	);
+}