@joekytc/dsh-swarm 0.1.2 → 0.3.0

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

@@ -0,0 +1,262 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+import {
+	DEFAULT_APPEARANCE,
+	mergeAppearance,
+	normalizeAppearancePrefs,
+	readAppearance,
+} from "../src/lib/appearance";
+
+const CSS = readFileSync(resolve(import.meta.dirname, "../src/index.css"), "utf8");
+const THEME_SELECTOR_LIGHT = ':root,\\s*\\[data-theme="light"\\]';
+const THEME_SELECTOR_DARK = '\\.dark,\\s*\\[data-theme="dark"\\]';
+
+const PAPER_THEME_TOKEN_NAMES = [
+	"--app-bg",
+	"--app-surface",
+	"--app-raised",
+	"--app-fg",
+	"--app-muted",
+	"--app-faint",
+	"--app-border",
+	"--app-border-strong",
+	"--app-accent",
+	"--app-accent-deep",
+	"--app-user",
+	"--app-accent-soft",
+	"--app-hover",
+	"--app-success",
+	"--app-warn",
+	"--app-danger",
+	"--comm-attn",
+	"--comm-seq",
+	"--comm-ssm",
+] as const;
+
+const PAPER_LIGHT_TOKENS = {
+	"--app-bg": "#fdfaf2",
+	"--app-surface": "#fffdf7",
+	"--app-raised": "#f4ede0",
+	"--app-fg": "#3a3530",
+	"--app-muted": "#8a8175",
+	"--app-faint": "#b3a48c",
+	"--app-border": "#ece3d2",
+	"--app-border-strong": "#f0e6d4",
+	"--app-accent": "#e07a5f",
+	"--app-accent-deep": "#c0573f",
+	"--app-user": "var(--app-accent)",
+	"--app-accent-soft": "#fff1ef",
+	"--app-hover": "rgba(224, 122, 95, 0.06)",
+	"--app-success": "#7ea868",
+	"--app-warn": "#c98e3a",
+	"--app-danger": "#c0573f",
+	"--comm-attn": "#e9b9a6",
+	"--comm-seq": "#bcd0a8",
+	"--comm-ssm": "#c7c0a0",
+};
+
+const PAPER_DARK_TOKENS = {
+	"--app-bg": "#211c16",
+	"--app-surface": "#2a241d",
+	"--app-raised": "#332a22",
+	"--app-fg": "#ece4d4",
+	"--app-muted": "#a89a82",
+	"--app-faint": "#7d7060",
+	"--app-border": "#3a3026",
+	"--app-border-strong": "#4a3d30",
+	"--app-accent": "#e8826a",
+	"--app-accent-deep": "#f09680",
+	"--app-user": "var(--app-accent)",
+	"--app-accent-soft": "rgba(224, 122, 95, 0.16)",
+	"--app-hover": "rgba(224, 122, 95, 0.1)",
+	"--app-success": "#8eb074",
+	"--app-warn": "#d9a857",
+	"--app-danger": "#d4634a",
+	"--comm-attn": "rgba(233, 185, 166, 0.24)",
+	"--comm-seq": "rgba(188, 208, 168, 0.24)",
+	"--comm-ssm": "rgba(199, 192, 160, 0.24)",
+};
+
+const PAPER_ACCENT_NAMES = ["terracotta", "clay", "amber", "rose"] as const;
+type PaperAccentName = typeof PAPER_ACCENT_NAMES[number];
+
+const PAPER_ACCENT_VALUES: Record<PaperAccentName, { accent: string; deep: string }> = {
+	terracotta: { accent: "#e07a5f", deep: "#c0573f" },
+	clay: { accent: "#cf6a48", deep: "#a8492c" },
+	amber: { accent: "#d6913f", deep: "#b06c20" },
+	rose: { accent: "#d36f72", deep: "#b14a4d" },
+};
+
+const PAPER_ACCENT_TOKENS = Object.fromEntries(
+	PAPER_ACCENT_NAMES.map((name) => {
+		const accent = PAPER_ACCENT_VALUES[name];
+		return [name, accentExpectation(accent.accent, accent.deep)];
+	}),
+);
+
+const PAPER_SWATCH_BACKGROUNDS = Object.fromEntries(
+	PAPER_ACCENT_NAMES.map((name) => [name, PAPER_ACCENT_VALUES[name].accent]),
+);
+
+describe("appearance preferences", () => {
+	it("defaults to light Paper preferences when storage is unavailable", () => {
+		assert.deepEqual(readAppearance(), DEFAULT_APPEARANCE);
+	});
+
+	it("normalizes known values and ignores invalid stored values", () => {
+		assert.deepEqual(normalizeAppearancePrefs({
+			theme: "dark",
+			paper: "grid",
+			accent: "amber",
+			userbubble: "solid",
+			hand: "off",
+			density: "compact",
+		}), {
+			theme: "dark",
+			paper: "grid",
+			accent: "amber",
+			userbubble: "solid",
+			hand: "off",
+			density: "compact",
+		});
+
+		assert.deepEqual(normalizeAppearancePrefs({
+			theme: "system",
+			paper: "linen",
+			accent: "blue",
+			userbubble: "outline",
+			hand: "maybe",
+			density: "tiny",
+		}), DEFAULT_APPEARANCE);
+	});
+
+	it("merges partial updates without accepting unknown values", () => {
+		assert.deepEqual(mergeAppearance(DEFAULT_APPEARANCE, {
+			theme: "dark",
+			userbubble: "solid",
+			density: "compact",
+		}), {
+			...DEFAULT_APPEARANCE,
+			theme: "dark",
+			userbubble: "solid",
+			density: "compact",
+		});
+	});
+
+	it("keeps the final Paper theme tokens aligned with the Paper v2 prototype", () => {
+		assert.equal(countTokenBlocks(CSS, THEME_SELECTOR_LIGHT, "--app-bg"), 1);
+		assert.equal(countTokenBlocks(CSS, THEME_SELECTOR_DARK, "--app-bg"), 1);
+
+		const lightTheme = latestBlockFor(CSS, THEME_SELECTOR_LIGHT);
+		const darkTheme = latestBlockFor(CSS, THEME_SELECTOR_DARK);
+
+		assert.deepEqual(readLatestTokenValues(lightTheme, PAPER_THEME_TOKEN_NAMES), PAPER_LIGHT_TOKENS);
+		assert.deepEqual(readLatestTokenValues(darkTheme, PAPER_THEME_TOKEN_NAMES), PAPER_DARK_TOKENS);
+		assert.deepEqual(readLatestScopedAccentTokens(CSS), PAPER_ACCENT_TOKENS);
+	});
+
+	it("uses the Paper v2 accent palette throughout visible controls", () => {
+		assert.deepEqual(readSwatchBackgrounds(CSS), PAPER_SWATCH_BACKGROUNDS);
+
+		assert.deepEqual(readLatestTokenValues(latestBlockWithTokenFor(CSS, "\\.topbar-text-action", "background"), [
+			"border-color",
+			"background",
+			"color",
+		]), {
+			"border-color": "transparent",
+			"background": "var(--app-accent)",
+			"color": "#fff",
+		});
+		assert.deepEqual(readLatestTokenValues(latestBlockFor(CSS, "\\.topbar-text-action:hover:not\\(:disabled\\)"), [
+			"border-color",
+			"background",
+			"color",
+		]), {
+			"border-color": "transparent",
+			"background": "var(--app-accent-deep)",
+			"color": "#fff",
+		});
+
+		assert.deepEqual(readLatestTokenValues(latestBlockFor(CSS, "\\.msg-row-user \\.msg-content"), [
+			"border-color",
+			"background",
+			"color",
+		]), {
+			"border-color": "color-mix(in srgb, var(--app-accent) 28%, transparent)",
+			"background": "var(--app-accent-soft)",
+			"color": "var(--app-accent-deep)",
+		});
+		assert.deepEqual(readLatestTokenValues(latestBlockFor(CSS, '\\[data-userbubble="solid"\\] \\.msg-row-user \\.msg-content'), [
+			"border-color",
+			"background",
+			"color",
+		]), {
+			"border-color": "transparent",
+			"background": "var(--app-user)",
+			"color": "#fff",
+		});
+	});
+});
+
+function accentExpectation(accent: string, deep: string) {
+	return {
+		"--app-accent": accent,
+		"--app-accent-deep": deep,
+		"--app-user": "var(--app-accent)",
+		"--app-accent-soft": "color-mix(in srgb, var(--app-accent) 13%, var(--card))",
+	};
+}
+
+function latestBlockFor(css: string, selectorPattern: string) {
+	return blocksFor(css, selectorPattern).at(-1) ?? "";
+}
+
+function latestBlockWithTokenFor(css: string, selectorPattern: string, name: string) {
+	return blocksFor(css, selectorPattern)
+		.filter((block) => block.includes(`${name}:`))
+		.at(-1) ?? "";
+}
+
+function countTokenBlocks(css: string, selectorPattern: string, name: string) {
+	return blocksFor(css, selectorPattern).filter((block) => block.includes(`${name}:`)).length;
+}
+
+function blocksFor(css: string, selectorPattern: string) {
+	return Array.from(css.matchAll(new RegExp(`${selectorPattern}\\s*\\{([\\s\\S]*?)\\}`, "g")), (match) => match[1] ?? "");
+}
+
+function readLatestTokenValues(css: string, names: readonly string[]) {
+	const values: Record<string, string> = {};
+	for (const name of names) {
+		const matches = Array.from(css.matchAll(new RegExp(`${escapeRegExp(name)}:\\s*([^;]+);`, "g")));
+		values[name] = matches.at(-1)?.[1]?.trim() ?? "";
+	}
+	return values;
+}
+
+function readLatestScopedAccentTokens(css: string) {
+	const result: Record<string, Record<string, string>> = {};
+	for (const accent of PAPER_ACCENT_NAMES) {
+		const pattern = new RegExp(`\\[data-accent="${accent}"\\]\\s*\\{([\\s\\S]*?)\\}`, "g");
+		const blocks = Array.from(css.matchAll(pattern));
+		const block = blocks.at(-1)?.[1] ?? "";
+		result[accent] = readLatestTokenValues(block, ["--app-accent", "--app-accent-deep", "--app-user", "--app-accent-soft"]);
+	}
+	return result;
+}
+
+function readSwatchBackgrounds(css: string) {
+	const result: Record<string, string> = {};
+	for (const accent of PAPER_ACCENT_NAMES) {
+		const block = latestBlockFor(css, `\\.appearance-swatch-${accent}`);
+		result[accent] = readLatestTokenValues(block, ["background"]).background;
+	}
+	return result;
+}
+
+function escapeRegExp(value: string) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}

package/skills/llm-wiki-skill/workbench/web/test/chat-host-source.test.tsx

@@ -0,0 +1,22 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+describe("主视图切换：ChatPanel 常驻挂载契约", () => {
+	it("App.tsx 不再用三元在 chat/graph 间卸载 ChatPanel，而是 CSS 隐藏", () => {
+		const source = readFileSync(resolve(import.meta.dirname, "../src/App.tsx"), "utf8");
+		// ChatPanel 外层包了 chat-host，且用 chat-host-hidden 做隐藏（而非整段卸载）
+		assert.match(source, /className=\{mainView === "graph" \? "chat-host chat-host-hidden" : "chat-host"\}/);
+		// GraphPanel 仍按需挂载
+		assert.match(source, /mainView === "graph" && \(\s*<GraphPanel/);
+		// 不再存在"graph 时把 ChatPanel 整段从树上摘掉"的三元
+		assert.doesNotMatch(source, /mainView === "graph" \? \(\s*<GraphPanel[\s\S]*?\) : \(\s*<ChatPanel/);
+	});
+
+	it("index.css 提供 chat-host 填充与隐藏类", () => {
+		const css = readFileSync(resolve(import.meta.dirname, "../src/index.css"), "utf8");
+		assert.match(css, /\.chat-host\s*\{[^}]*height:\s*100%/);
+		assert.match(css, /\.chat-host-hidden\s*\{[^}]*display:\s*none/);
+	});
+});

package/skills/llm-wiki-skill/workbench/web/test/chat-panel-auto-scroll.test.tsx

@@ -0,0 +1,311 @@
+import { fireEvent } from "@testing-library/react";
+import { afterEach, describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import React from "react";
+
+import { ChatPanel } from "../src/components/ChatPanel";
+import { TooltipProvider } from "../src/components/ui/tooltip";
+import { changeText, click, pressKey, render, screen, waitFor } from "./render";
+
+const originalFetch = globalThis.fetch;
+let restoreScrollBox: (() => void) | null = null;
+
+type ChatPanelProps = React.ComponentProps<typeof ChatPanel>;
+type StreamEvent = { event: string; data: string };
+
+afterEach(() => {
+	restoreScrollBox?.();
+	restoreScrollBox = null;
+	globalThis.fetch = originalFetch;
+});
+
+describe("ChatPanel auto scroll", () => {
+	it("scrolls to the bottom on existing messages and after a streamed reply when follow is active", async () => {
+		installChatFetch([
+			{ event: "text_delta", data: "第一段回复" },
+			{ event: "done", data: "{}" },
+		]);
+		const scrollBox = installChatScrollerLayoutMock({
+			clientHeight: 320,
+			scrollHeight: 960,
+			scrollTop: 0,
+		});
+		renderChatPanel({
+			initialMessages: [
+				{ id: "u1", role: "user", content: "第一条", tools: [] },
+				{ id: "a1", role: "assistant", content: "第一条回复", tools: [] },
+			],
+		});
+
+		const scroller = chatScroller();
+
+		await waitFor(() => assert.equal(scroller.scrollTop, 640));
+
+		scrollBox.update({ scrollHeight: 1280 });
+		await changeText(screen.getByPlaceholderText(/写下想法/), "继续");
+		await pressKey(screen.getByPlaceholderText(/写下想法/), "Enter", { metaKey: true });
+
+		await waitFor(() => assert.equal(scroller.scrollTop, 960));
+		assert.ok(scrollBox.calls.length >= 2);
+		const assistantBubbles = screen.getAllByLabelText("助手气泡");
+		assert.match(assistantBubbles.at(-1)?.textContent ?? "", /第一段回复/);
+		assert.equal(screen.queryByRole("button", { name: "回到底部" }), null);
+	});
+
+	it("pauses follow when the user scrolls up and restores with the arrow button", async () => {
+		const promptStream = createControlledSseStream();
+		installChatFetch(promptStream.stream);
+		const scrollBox = installChatScrollerLayoutMock({
+			clientHeight: 300,
+			scrollHeight: 1000,
+			scrollTop: 700,
+		});
+		renderChatPanel({
+			initialMessages: [
+				{ id: "u1", role: "user", content: "历史问题", tools: [] },
+				{ id: "a1", role: "assistant", content: "历史回答", tools: [] },
+			],
+		});
+
+		const scroller = chatScroller();
+
+		scrollBox.update({ scrollHeight: 1300 });
+		await changeText(screen.getByPlaceholderText(/写下想法/), "继续展开");
+		await pressKey(screen.getByPlaceholderText(/写下想法/), "Enter", { metaKey: true });
+		await waitFor(() => assert.equal(scroller.scrollTop, 1000));
+
+		scroller.scrollTop = 120;
+		fireEvent.scroll(scroller);
+		const returnButton = await screen.findByRole("button", { name: "回到底部" });
+		assert.equal(returnButton.textContent, "");
+
+		scrollBox.update({ scrollHeight: 1500 });
+		promptStream.send({ event: "text_delta", data: "新的长回复" });
+		promptStream.send({ event: "done", data: "{}" });
+		promptStream.close();
+
+		await waitFor(() => {
+			const assistantBubbles = screen.getAllByLabelText("助手气泡");
+			assert.match(assistantBubbles.at(-1)?.textContent ?? "", /新的长回复/);
+		});
+		assert.equal(scroller.scrollTop, 120);
+		assert.ok(screen.getByRole("button", { name: "回到底部" }));
+
+		await click(screen.getByRole("button", { name: "回到底部" }));
+
+		await waitFor(() => assert.equal(scroller.scrollTop, 1200));
+		assert.equal(screen.queryByRole("button", { name: "回到底部" }), null);
+	});
+
+	it("restores follow when the user manually scrolls back near the bottom", async () => {
+		const promptStream = createControlledSseStream();
+		installChatFetch(promptStream.stream);
+		const scrollBox = installChatScrollerLayoutMock({
+			clientHeight: 300,
+			scrollHeight: 1300,
+			scrollTop: 1000,
+		});
+		renderChatPanel({
+			initialMessages: [
+				{ id: "u1", role: "user", content: "历史问题", tools: [] },
+				{ id: "a1", role: "assistant", content: "历史回答", tools: [] },
+			],
+		});
+
+		const scroller = chatScroller();
+		await changeText(screen.getByPlaceholderText(/写下想法/), "继续展开");
+		await pressKey(screen.getByPlaceholderText(/写下想法/), "Enter", { metaKey: true });
+		await waitFor(() => assert.equal(scroller.scrollTop, 1000));
+
+		scroller.scrollTop = 200;
+		fireEvent.scroll(scroller);
+		assert.ok(await screen.findByRole("button", { name: "回到底部" }));
+
+		scroller.scrollTop = 960;
+		fireEvent.scroll(scroller);
+		await waitFor(() => assert.equal(screen.queryByRole("button", { name: "回到底部" }), null));
+
+		scrollBox.update({ scrollHeight: 1600 });
+		promptStream.send({ event: "text_delta", data: "继续增长的回复" });
+		promptStream.close();
+
+		await waitFor(() => assert.equal(scroller.scrollTop, 1300));
+	});
+
+	it("keeps the return-to-bottom control as a themed icon-only button", () => {
+		const css = readFileSync(resolve(import.meta.dirname, "../src/index.css"), "utf8");
+
+		assert.match(css, /\.chat-input-area\s*\{[\s\S]*position:\s*relative/);
+		assert.match(css, /\.chat-scroll-bottom\s*\{/);
+		assert.match(css, /\.chat-scroll-bottom[\s\S]*justify-content:\s*center/);
+		assert.match(css, /\.chat-scroll-bottom-btn\s*\{/);
+		assert.match(css, /\.chat-scroll-bottom-btn[\s\S]*border-radius:\s*999px/);
+		assert.match(css, /\.chat-scroll-bottom-btn[\s\S]*var\(--app-surface\)/);
+		assert.match(css, /\.chat-scroll-bottom-btn[\s\S]*box-shadow/);
+		assert.match(css, /\.chat-scroll-bottom-btn:hover\s*\{/);
+		assert.match(css, /\.chat-scroll-bottom-btn:focus-visible\s*\{/);
+	});
+});
+
+function renderChatPanel(props: Partial<ChatPanelProps> = {}) {
+	return render(
+		<TooltipProvider>
+			<ChatPanel
+				currentKnowledgeBaseName="AI学习知识库"
+				currentKnowledgeBasePath="/kb"
+				initialMessages={[]}
+				{...props}
+			/>
+		</TooltipProvider>,
+	);
+}
+
+function chatScroller(): HTMLDivElement {
+	const element = document.querySelector(".chat-messages");
+	assert.ok(element instanceof HTMLElement);
+	return element as HTMLDivElement;
+}
+
+function installChatScrollerLayoutMock(
+	initialMetrics: { clientHeight: number; scrollHeight: number; scrollTop: number },
+) {
+	const metrics = { ...initialMetrics };
+	const calls: number[] = [];
+	const originalClientHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "clientHeight");
+	const originalScrollHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "scrollHeight");
+	const originalScrollTop = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "scrollTop");
+	const originalScrollTo = HTMLElement.prototype.scrollTo as ((...args: unknown[]) => void) | undefined;
+	const isChatScroller = (element: Element) =>
+		element instanceof HTMLElement && element.classList.contains("chat-messages");
+
+	Object.defineProperty(HTMLElement.prototype, "clientHeight", {
+		configurable: true,
+		get() {
+			if (isChatScroller(this)) return metrics.clientHeight;
+			return originalClientHeight?.get?.call(this) ?? 0;
+		},
+	});
+	Object.defineProperty(HTMLElement.prototype, "scrollHeight", {
+		configurable: true,
+		get() {
+			if (isChatScroller(this)) return metrics.scrollHeight;
+			return originalScrollHeight?.get?.call(this) ?? 0;
+		},
+	});
+	Object.defineProperty(HTMLElement.prototype, "scrollTop", {
+		configurable: true,
+		get() {
+			if (isChatScroller(this)) return metrics.scrollTop;
+			return originalScrollTop?.get?.call(this) ?? 0;
+		},
+		set(value: number) {
+			if (isChatScroller(this)) {
+				metrics.scrollTop = value;
+				return;
+			}
+			originalScrollTop?.set?.call(this, value);
+		},
+	});
+	HTMLElement.prototype.scrollTo = function scrollTo(options?: ScrollToOptions | number, y?: number) {
+		if (!isChatScroller(this)) {
+			originalScrollTo?.call(this, options, y);
+			return;
+		}
+		const top = typeof options === "number" ? y ?? options : options?.top ?? metrics.scrollTop;
+		const nextTop = clampScrollTop(Number(top), metrics);
+		calls.push(nextTop);
+		metrics.scrollTop = nextTop;
+	};
+
+	const restore = () => {
+		restoreDescriptor(HTMLElement.prototype, "clientHeight", originalClientHeight);
+		restoreDescriptor(HTMLElement.prototype, "scrollHeight", originalScrollHeight);
+		restoreDescriptor(HTMLElement.prototype, "scrollTop", originalScrollTop);
+		if (originalScrollTo) HTMLElement.prototype.scrollTo = originalScrollTo as typeof HTMLElement.prototype.scrollTo;
+		else Reflect.deleteProperty(HTMLElement.prototype, "scrollTo");
+	};
+	restoreScrollBox = restore;
+	return {
+		calls,
+		metrics,
+		restore,
+		update(nextMetrics: Partial<typeof metrics>) {
+			Object.assign(metrics, nextMetrics);
+		},
+	};
+}
+
+function clampScrollTop(
+	top: number,
+	metrics: { clientHeight: number; scrollHeight: number; scrollTop: number },
+) {
+	if (!Number.isFinite(top)) return metrics.scrollTop;
+	return Math.max(0, Math.min(top, Math.max(0, metrics.scrollHeight - metrics.clientHeight)));
+}
+
+function restoreDescriptor(
+	prototype: HTMLElement,
+	key: "clientHeight" | "scrollHeight" | "scrollTop",
+	descriptor: PropertyDescriptor | undefined,
+) {
+	if (descriptor) Object.defineProperty(prototype, key, descriptor);
+	else Reflect.deleteProperty(prototype, key);
+}
+
+function installChatFetch(eventsOrStream: StreamEvent[] | ReadableStream<Uint8Array>) {
+	globalThis.fetch = (async (input) => {
+		const url = typeof input === "string" ? input : input instanceof Request ? input.url : String(input);
+		if (url.includes("/api/commands")) {
+			return jsonResponse({ ok: true, items: [] });
+		}
+		if (url.includes("/api/prompt")) {
+			const body = Array.isArray(eventsOrStream) ? sseStream(eventsOrStream) : eventsOrStream;
+			return new Response(body, {
+				status: 200,
+				headers: { "Content-Type": "text/event-stream" },
+			});
+		}
+		return jsonResponse({ ok: true });
+	}) as typeof fetch;
+}
+
+function jsonResponse(body: unknown) {
+	return new Response(JSON.stringify(body), {
+		status: 200,
+		headers: { "Content-Type": "application/json" },
+	});
+}
+
+function sseStream(events: StreamEvent[]) {
+	const encoder = new TextEncoder();
+	return new ReadableStream<Uint8Array>({
+		start(controller) {
+			for (const item of events) {
+				controller.enqueue(encoder.encode(`event: ${item.event}\ndata: ${item.data}\n\n`));
+			}
+			controller.close();
+		},
+	});
+}
+
+function createControlledSseStream() {
+	const encoder = new TextEncoder();
+	let controller: ReadableStreamDefaultController<Uint8Array> | null = null;
+	return {
+		stream: new ReadableStream<Uint8Array>({
+			start(activeController) {
+				controller = activeController;
+			},
+		}),
+		send(item: StreamEvent) {
+			assert.ok(controller);
+			controller.enqueue(encoder.encode(`event: ${item.event}\ndata: ${item.data}\n\n`));
+		},
+		close() {
+			assert.ok(controller);
+			controller.close();
+		},
+	};
+}

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

@@ -0,0 +1,48 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import React from "react";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+import { ChatPanel } from "../src/components/ChatPanel";
+import { TooltipProvider } from "../src/components/ui/tooltip";
+import { render, screen } from "./render";
+
+describe("ChatPanel Paper bubbles", () => {
+	it("renders initial user and assistant messages as distinct bubbles", () => {
+		render(
+			<TooltipProvider>
+				<ChatPanel
+					currentKnowledgeBaseName="AI学习知识库"
+					currentKnowledgeBasePath="/kb"
+					initialMessages={[
+						{ id: "u1", role: "user", content: "帮我总结这篇笔记", tools: [] },
+						{ id: "a1", role: "assistant", content: "可以，先看 [[notes/paper.md]]。", tools: [] },
+					]}
+				/>
+			</TooltipProvider>,
+		);
+
+		const userMessage = screen.getByLabelText("用户消息");
+		const assistantMessage = screen.getByLabelText("助手消息");
+		assert.match(userMessage.className, /msg-row-user/);
+		assert.match(assistantMessage.className, /msg-row-assistant/);
+
+		assert.equal(screen.getByLabelText("用户气泡").textContent, "帮我总结这篇笔记");
+		assert.match(screen.getByLabelText("助手气泡").textContent ?? "", /notes\/paper\.md/);
+		assert.match(userMessage.textContent ?? "", /你/);
+		assert.match(assistantMessage.textContent ?? "", /llm-wiki/);
+	});
+
+	it("keeps bubble styling on data preferences without per-message blur filters", () => {
+		const css = readFileSync(resolve(import.meta.dirname, "../src/index.css"), "utf8");
+
+		assert.match(css, /\.msg-content\s*\{/);
+		assert.match(css, /\.msg-row-user \.msg-content\s*\{/);
+		assert.match(css, /\[data-userbubble="solid"\] \.msg-row-user \.msg-content/);
+		assert.match(css, /\[data-density="compact"\] \.msg-content/);
+		for (const block of css.matchAll(/\.msg-content[^{]*\{[^}]*\}/g)) {
+			assert.doesNotMatch(block[0], /backdrop-filter/);
+		}
+	});
+});