+ {selected.title} +
+ {selected.actions} + +
+ {selected.content}
+
+
+
{clipboardData && ,
);
diff --git a/frontend/src/components/workspace/skill-usage/skill-usage-copy-action.tsx b/frontend/src/components/workspace/skill-usage/skill-usage-copy-action.tsx
new file mode 100644
index 0000000000..896a075408
--- /dev/null
+++ b/frontend/src/components/workspace/skill-usage/skill-usage-copy-action.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { CopyIcon } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { writeTextToClipboard } from "@/core/clipboard";
+import { useI18n } from "@/core/i18n/hooks";
+
+export function SkillUsageCopyAction({ content }: { content: string }) {
+ const { t } = useI18n();
+ return (
+
+ );
+}
diff --git a/frontend/src/components/workspace/skill-usage/skill-usage-menu.tsx b/frontend/src/components/workspace/skill-usage/skill-usage-menu.tsx
new file mode 100644
index 0000000000..0edb13d620
--- /dev/null
+++ b/frontend/src/components/workspace/skill-usage/skill-usage-menu.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { BoxIcon } from "lucide-react";
+import dynamic from "next/dynamic";
+
+import { useI18n } from "@/core/i18n/hooks";
+import { type SkillUsage } from "@/core/skills/usage";
+
+import { useMaybeMessageDetails } from "../message-details/context";
+import { MessageDetailsMenu } from "../message-details/message-details-menu";
+
+import { SkillUsageCopyAction } from "./skill-usage-copy-action";
+import { skillSourceLabel } from "./source-label";
+
+const SkillUsagePanel = dynamic(() =>
+ import("./skill-usage-panel").then((module) => module.SkillUsagePanel),
+);
+
+export function SkillUsageMenu({ skills }: { skills: SkillUsage[] }) {
+ const { t } = useI18n();
+ const details = useMaybeMessageDetails();
+ if (!details || skills.length === 0) return null;
+
+ return (
+
+ {children}
+
+ );
+ }
+ return (
+
+ {children}
+
+ );
+ },
+ img: ({ src, alt, title }) => {
+ if (
+ typeof src === "string" &&
+ /^https?:\/\//i.test(src) &&
+ isSafeHref(src)
+ ) {
+ // Preserve the shared renderer's remote image behavior without fetching
+ // unresolved package paths or requiring a new skill-resource endpoint.
+ return (
+ 
+ );
+ }
+ return (
+
+ {alt?.trim() ? alt : typeof src === "string" ? src : ""}
+
+ );
+ },
+};
diff --git a/frontend/src/components/workspace/skill-usage/source-label.ts b/frontend/src/components/workspace/skill-usage/source-label.ts
new file mode 100644
index 0000000000..e4cb3548fd
--- /dev/null
+++ b/frontend/src/components/workspace/skill-usage/source-label.ts
@@ -0,0 +1,16 @@
+import { type Translations } from "@/core/i18n/locales/types";
+
+export function skillSourceLabel(category: string, t: Translations) {
+ switch (category) {
+ case "public":
+ return t.skillUsage.builtIn;
+ case "custom":
+ return t.skillUsage.custom;
+ case "integrations":
+ return t.skillUsage.integration;
+ case "legacy":
+ return t.skillUsage.legacy;
+ default:
+ return category;
+ }
+}
diff --git a/frontend/src/core/i18n/locales/en-US.ts b/frontend/src/core/i18n/locales/en-US.ts
index f30976cf3f..929e2d1f8a 100644
--- a/frontend/src/core/i18n/locales/en-US.ts
+++ b/frontend/src/core/i18n/locales/en-US.ts
@@ -184,6 +184,20 @@ export const enUS: Translations = {
showBrowser: "Open browser panel",
},
+ skillUsage: {
+ used: "Skills used",
+ title: "Skills",
+ name: "Name",
+ description: "Description",
+ builtIn: "Built-in",
+ custom: "Custom",
+ integration: "Integration",
+ legacy: "Legacy",
+ copy: "Copy skill snapshot",
+ partial:
+ "This is a partial snapshot of the skill instructions loaded during this run.",
+ },
+
runDuration: {
reasoning: "Reasoning",
working: "Working…",
diff --git a/frontend/src/core/i18n/locales/types.ts b/frontend/src/core/i18n/locales/types.ts
index dfbbd5d4f9..405feb5553 100644
--- a/frontend/src/core/i18n/locales/types.ts
+++ b/frontend/src/core/i18n/locales/types.ts
@@ -160,6 +160,19 @@ export interface Translations {
showBrowser: string;
};
+ skillUsage: {
+ used: string;
+ title: string;
+ name: string;
+ description: string;
+ builtIn: string;
+ custom: string;
+ integration: string;
+ legacy: string;
+ copy: string;
+ partial: string;
+ };
+
runDuration: {
reasoning: string;
working: string;
diff --git a/frontend/src/core/i18n/locales/zh-CN.ts b/frontend/src/core/i18n/locales/zh-CN.ts
index 2729fcd5b6..ec4ff9a10a 100644
--- a/frontend/src/core/i18n/locales/zh-CN.ts
+++ b/frontend/src/core/i18n/locales/zh-CN.ts
@@ -178,6 +178,19 @@ export const zhCN: Translations = {
showBrowser: "打开浏览器面板",
},
+ skillUsage: {
+ used: "使用的技能",
+ title: "技能",
+ name: "名称",
+ description: "描述",
+ builtIn: "内置",
+ custom: "自定义",
+ integration: "集成",
+ legacy: "旧版",
+ copy: "复制技能快照",
+ partial: "此快照仅包含本次运行加载的部分技能内容。",
+ },
+
runDuration: {
reasoning: "思考过程",
working: "执行中…",
diff --git a/frontend/src/core/skills/usage.ts b/frontend/src/core/skills/usage.ts
new file mode 100644
index 0000000000..bf964e985f
--- /dev/null
+++ b/frontend/src/core/skills/usage.ts
@@ -0,0 +1,122 @@
+import type { Message } from "@langchain/langgraph-sdk";
+
+import { getMessageRunId } from "@/core/messages/run-duration";
+import type { MessageGroup } from "@/core/messages/utils";
+
+export const SKILL_USAGES_KEY = "skill_usages";
+
+/** Display evidence captured at load time, never a catalog/authorization source. */
+export interface SkillUsage {
+ name: string;
+ description: string;
+ category: string;
+ path: string;
+ content: string;
+ content_hash: string;
+ activation: "automatic" | "slash";
+ partial: boolean;
+}
+
+export function readSkillUsage(message: Message): SkillUsage | undefined {
+ if (message.type !== "ai" && message.type !== "tool") return undefined;
+ if (message.type === "tool" && message.status === "error") return undefined;
+ return parseSkillUsage(message.additional_kwargs?.skill_usage);
+}
+
+function parseSkillUsage(raw: unknown): SkillUsage | undefined {
+ if (!raw || typeof raw !== "object") return undefined;
+ const value = raw as Record;
+ if (
+ typeof value.name !== "string" ||
+ !value.name ||
+ typeof value.description !== "string" ||
+ typeof value.category !== "string" ||
+ typeof value.path !== "string" ||
+ !value.path.endsWith("/SKILL.md") ||
+ typeof value.content !== "string" ||
+ typeof value.content_hash !== "string" ||
+ !/^[a-f0-9]{64}$/.test(value.content_hash) ||
+ (value.activation !== "automatic" && value.activation !== "slash") ||
+ typeof value.partial !== "boolean"
+ )
+ return undefined;
+ return value as unknown as SkillUsage;
+}
+
+/** One menu on the last assistant bubble per run, in first-load order.
+ * Live messages may not yet carry run ids; use visible human and clarification
+ * boundaries until history provides those ids. Never infer usage from answer
+ * text or the catalog.
+ */
+export function getSkillUsageByGroupIndex(
+ groups: MessageGroup[],
+): Map {
+ const byRun = new Map<
+ string,
+ { skills: Map; anchor?: number }
+ >();
+ let start = 0;
+ while (start < groups.length) {
+ let end = start + 1;
+ while (
+ end < groups.length &&
+ groups[end]?.type !== "human" &&
+ groups[end - 1]?.type !== "assistant:clarification"
+ )
+ end++;
+ const runIds = new Set();
+ for (let i = start; i < end; i++) {
+ for (const message of groups[i]!.messages) {
+ if (message.type === "human") continue;
+ const runId = getMessageRunId(message);
+ if (runId) runIds.add(runId);
+ }
+ }
+ let currentKey =
+ runIds.size === 1 ? `run:${[...runIds][0]}` : `turn:${start}`;
+ for (let i = start; i < end; i++) {
+ const group = groups[i]!;
+ for (const message of group.messages) {
+ if (message.type !== "ai" && message.type !== "tool") continue;
+ const runId = getMessageRunId(message);
+ if (runId) currentKey = `run:${runId}`;
+ let run = byRun.get(currentKey);
+ if (!run) {
+ run = { skills: new Map() };
+ byRun.set(currentKey, run);
+ }
+ const aggregate: unknown =
+ message.additional_kwargs?.[SKILL_USAGES_KEY];
+ const usages =
+ message.type === "ai" && Array.isArray(aggregate)
+ ? aggregate.map(parseSkillUsage)
+ : [readSkillUsage(message)];
+ if (message.type === "ai" && Array.isArray(aggregate)) {
+ // The aggregate preserves first-load order/content even when earlier
+ // reads are absent from the currently loaded history page.
+ const canonical = new Map();
+ for (const usage of usages) {
+ if (usage && !canonical.has(usage.path))
+ canonical.set(usage.path, usage);
+ }
+ for (const [path, usage] of run.skills) {
+ if (!canonical.has(path)) canonical.set(path, usage);
+ }
+ run.skills = canonical;
+ }
+ for (const usage of usages) {
+ if (usage && !run.skills.has(usage.path))
+ run.skills.set(usage.path, usage);
+ }
+ if (group.type === "assistant" && message.type === "ai") run.anchor = i;
+ }
+ }
+ start = end;
+ }
+ const result = new Map();
+ for (const run of byRun.values()) {
+ if (run.anchor !== undefined && run.skills.size > 0)
+ result.set(run.anchor, [...run.skills.values()]);
+ }
+ return result;
+}
diff --git a/frontend/src/core/threads/message-order.ts b/frontend/src/core/threads/message-order.ts
index 4b6066f801..78a4aef336 100644
--- a/frontend/src/core/threads/message-order.ts
+++ b/frontend/src/core/threads/message-order.ts
@@ -29,6 +29,7 @@ import type { Message } from "@langchain/langgraph-sdk";
import { getMessageRunId } from "../messages/run-duration";
import { isHiddenFromUIMessage } from "../messages/utils";
+import { SKILL_USAGES_KEY } from "../skills/usage";
// Thread-global feed position, attached by the backend to history rows and to
// `values` frame messages it has already persisted. Mirrors MESSAGE_SEQ_KEY in
@@ -220,6 +221,7 @@ export function mergeMessages(
const anySeqByIdentity = new Map();
const savedTurnDurations = new Map();
const savedRunIds = new Map();
+ const savedSkillUsages = new Map();
const collectTrustedSeq = (message: Message) => {
const identity = messageIdentity(message);
if (!identity) {
@@ -251,6 +253,15 @@ export function mergeMessages(
if (identity && runId) {
savedRunIds.set(identity, runId);
}
+ if (
+ identity &&
+ Array.isArray(message.additional_kwargs?.[SKILL_USAGES_KEY])
+ ) {
+ savedSkillUsages.set(
+ identity,
+ message.additional_kwargs[SKILL_USAGES_KEY],
+ );
+ }
if (identity && message.additional_kwargs?.turn_duration !== undefined) {
savedTurnDurations.set(
identity,
@@ -413,10 +424,14 @@ export function mergeMessages(
const shouldRestoreTurnDuration =
savedTurnDurations.has(identity) &&
message.additional_kwargs?.turn_duration === undefined;
+ const shouldRestoreSkillUsages =
+ savedSkillUsages.has(identity) &&
+ message.additional_kwargs?.[SKILL_USAGES_KEY] === undefined;
if (
!shouldRestoreSeq &&
!shouldRestoreRunId &&
- !shouldRestoreTurnDuration
+ !shouldRestoreTurnDuration &&
+ !shouldRestoreSkillUsages
) {
return message;
}
@@ -429,6 +444,9 @@ export function mergeMessages(
...(shouldRestoreTurnDuration
? { turn_duration: savedTurnDurations.get(identity) }
: {}),
+ ...(shouldRestoreSkillUsages
+ ? { [SKILL_USAGES_KEY]: savedSkillUsages.get(identity) }
+ : {}),
},
} as Message;
});
diff --git a/frontend/tests/e2e/skill-usage.spec.ts b/frontend/tests/e2e/skill-usage.spec.ts
new file mode 100644
index 0000000000..455fb5459b
--- /dev/null
+++ b/frontend/tests/e2e/skill-usage.spec.ts
@@ -0,0 +1,337 @@
+import { mkdir } from "node:fs/promises";
+import { join } from "node:path";
+
+import { expect, test, type Page } from "@playwright/test";
+
+import { mockLangGraphAPI } from "./utils/mock-api";
+
+const THREAD_ID = "00000000-0000-0000-0000-000000009922";
+const RUN_ID = "skill-usage-run";
+const skills = [
+ {
+ name: "using-superpowers",
+ description: "开始任务前识别适用的技能，并按技能工作流推进。",
+ category: "custom",
+ path: "/mnt/skills/custom/using-superpowers/SKILL.md",
+ content:
+ "---\nname: using-superpowers\ndescription: 开始任务前识别适用的技能，并按技能工作流推进。\n---\n# Using Superpowers\n\n在执行任务前，先检查是否有适用的技能。\n\n## 工作流程\n\n1. 理解用户请求，识别任务类型。\n2. 读取相关技能的说明与参考资料。\n3. 按工作流完成任务，持续验证结果。\n\n## 完成前验证\n\n以实际命令输出和检查结果为依据。记录遇到的问题与处理方式，再汇报最终结果。\n\n> 此处展示的是本轮加载时保存的技能内容。",
+ content_hash: "a".repeat(64),
+ activation: "slash",
+ partial: false,
+ },
+ {
+ name: "verification-before-completion",
+ description: "交付前运行检查，并用实际结果验证完成情况。",
+ category: "public",
+ path: "/mnt/skills/public/verification-before-completion/SKILL.md",
+ content:
+ "# Verification Before Completion\n\n## 验证步骤\n\n- 运行相关测试与静态检查。\n- 检查实际界面与交互。\n- 将验证结果与交付内容一并提供。",
+ content_hash: "b".repeat(64),
+ activation: "automatic",
+ partial: false,
+ },
+];
+
+function messages(includeSkills = true) {
+ return [
+ {
+ type: "human",
+ id: "user",
+ content: "帮我检查这次改动，完成后给我看看结果。",
+ run_id: RUN_ID,
+ },
+ {
+ type: "ai",
+ id: "start",
+ content: "我会先读取适用的技能，再检查改动和运行验证。",
+ run_id: RUN_ID,
+ additional_kwargs: includeSkills ? { skill_usage: skills[0] } : {},
+ },
+ {
+ type: "ai",
+ id: "read",
+ content: "",
+ run_id: RUN_ID,
+ tool_calls: [
+ {
+ id: "read-call",
+ name: "read_file",
+ args: { path: skills[1]!.path, description: "读取完成前验证技能" },
+ },
+ ],
+ },
+ {
+ type: "tool",
+ id: "loaded",
+ content: skills[1]!.content,
+ name: "read_file",
+ tool_call_id: "read-call",
+ run_id: RUN_ID,
+ additional_kwargs: includeSkills ? { skill_usage: skills[1] } : {},
+ },
+ {
+ type: "ai",
+ id: "final",
+ content:
+ "检查完成，本次改动已在本地验证。\n\n- **功能检查**：入口、列表和详情面板均可正常使用。\n- **历史记录**：刷新后仍能查看本轮使用的技能。\n- **界面适配**：桌面使用侧栏，手机使用抽屉。\n\n代码和验证结果已保留在本地。",
+ run_id: RUN_ID,
+ },
+ ];
+}
+
+async function setup(page: Page, includeSkills = true) {
+ await page.addInitScript(() => localStorage.setItem("theme", "dark"));
+ await page
+ .context()
+ .addCookies([
+ { name: "locale", value: "zh-CN", url: "http://localhost:3000" },
+ ]);
+ mockLangGraphAPI(page, {
+ threads: [
+ {
+ thread_id: THREAD_ID,
+ title: "技能使用记录",
+ messages: messages(includeSkills),
+ },
+ ],
+ });
+ await page.goto(`/workspace/chats/${THREAD_ID}`);
+ await expect(page.getByText("检查完成，本次改动已在本地验证。")).toBeVisible({
+ timeout: 60_000,
+ });
+}
+
+async function screenshot(page: Page, name: string) {
+ const directory = process.env.SKILL_USAGE_SCREENSHOT_DIR;
+ if (!directory) return;
+ await mkdir(directory, { recursive: true });
+ await page.screenshot({
+ path: join(directory, name),
+ fullPage: true,
+ animations: "disabled",
+ });
+ if (name.startsWith("skills-menu")) {
+ const menu = await page.getByRole("menu").boundingBox();
+ const trigger = await page
+ .getByRole("button", { name: "使用的技能", exact: true })
+ .boundingBox();
+ if (menu && trigger) {
+ const x = Math.max(0, Math.min(menu.x, trigger.x) - 12);
+ const y = Math.max(0, menu.y - 12);
+ await page.screenshot({
+ path: join(directory, name.replace(".png", "-closeup.png")),
+ animations: "disabled",
+ clip: {
+ x,
+ y,
+ width:
+ Math.max(menu.x + menu.width, trigger.x + trigger.width) - x + 12,
+ height: trigger.y + trigger.height - y + 12,
+ },
+ });
+ }
+ }
+}
+
+test("shows one skill menu per run, switches snapshots and restores after reload", async ({
+ page,
+}) => {
+ test.setTimeout(120_000);
+ await page.setViewportSize({ width: 1440, height: 1000 });
+ await setup(page);
+ const trigger = page.getByRole("button", { name: "使用的技能", exact: true });
+ await expect(trigger).toHaveCount(1);
+ const toolbarSizes = await trigger
+ .locator("..")
+ .locator("button")
+ .evaluateAll((buttons) =>
+ buttons.map((button) => ({
+ button: Math.round(button.getBoundingClientRect().width),
+ icon: Math.round(
+ button.querySelector("svg")!.getBoundingClientRect().width,
+ ),
+ color: getComputedStyle(button).color,
+ })),
+ );
+ expect(toolbarSizes).toHaveLength(4);
+ expect(
+ toolbarSizes.every(({ button, icon }) => button === 32 && icon === 16),
+ ).toBe(true);
+ expect(new Set(toolbarSizes.map(({ color }) => color)).size).toBe(1);
+ await trigger.hover();
+ await expect(
+ page.getByRole("menuitem", { name: /using-superpowers.*自定义/ }),
+ ).toBeVisible();
+ await expect(
+ page.getByRole("menuitem", {
+ name: /verification-before-completion.*内置/,
+ }),
+ ).toBeVisible();
+ await screenshot(page, "skills-menu.png");
+ const skillName = page
+ .getByRole("menuitem", { name: /using-superpowers/ })
+ .getByText("using-superpowers");
+ await skillName.hover();
+ await expect(skillName).toHaveCSS("text-decoration-line", "underline");
+ await screenshot(page, "skills-menu-name-hover.png");
+ await page.getByRole("menuitem", { name: /using-superpowers/ }).click();
+ const panel = page.getByRole("region", { name: "SKILL.md", exact: true });
+ await expect(
+ panel.getByRole("heading", { name: "Using Superpowers", exact: true }),
+ ).toBeVisible();
+ await expect(panel.getByText(skills[0]!.path)).toBeVisible();
+ await expect(
+ panel.getByRole("button", { name: "复制技能快照" }),
+ ).toBeVisible();
+ await screenshot(page, "skills-detail-desktop.png");
+ const handle = page.locator('[data-slot="resizable-handle"]').first();
+ await handle.hover();
+ const initialWidth = (await panel.boundingBox())!.width;
+ await page.mouse.down();
+ const bounds = (await handle.boundingBox())!;
+ await page.mouse.move(bounds.x - 120, bounds.y + bounds.height / 2, {
+ steps: 12,
+ });
+ await page.mouse.up();
+ await expect
+ .poll(async () => (await panel.boundingBox())!.width)
+ .toBeGreaterThan(initialWidth + 50);
+ await trigger.click();
+ await page
+ .getByRole("menuitem", { name: /verification-before-completion/ })
+ .click();
+ await expect(
+ panel.getByRole("heading", { name: "Verification Before Completion" }),
+ ).toBeVisible();
+ await panel.getByRole("button", { name: "关闭", exact: true }).click();
+ await expect(panel).toBeHidden();
+ await page.reload();
+ await expect(trigger).toHaveCount(1);
+ await trigger.click();
+ await page.getByRole("menuitem", { name: /using-superpowers/ }).click();
+ await expect(
+ panel.getByRole("heading", { name: "Using Superpowers", exact: true }),
+ ).toBeVisible();
+});
+
+test("mobile opens a readable detail sheet and supports closing", async ({
+ page,
+}) => {
+ await page.setViewportSize({ width: 390, height: 844 });
+ await setup(page);
+ await page.getByRole("button", { name: "使用的技能", exact: true }).click();
+ await page.getByRole("menuitem", { name: /using-superpowers/ }).click();
+ const panel = page.getByRole("region", { name: "SKILL.md", exact: true });
+ await expect(
+ panel.getByRole("heading", { name: "Using Superpowers", exact: true }),
+ ).toBeVisible();
+ expect((await panel.boundingBox())!.width).toBeLessThan(391);
+ await screenshot(page, "skills-detail-mobile.png");
+ await page.keyboard.press("Escape");
+ await expect(panel).toBeHidden();
+});
+
+test("older history without load evidence does not invent skill usage", async ({
+ page,
+}) => {
+ await setup(page, false);
+ await expect(
+ page.getByRole("button", { name: "使用的技能", exact: true }),
+ ).toHaveCount(0);
+});
+
+test("details share the browser panel and can reopen after drag collapse", async ({
+ page,
+}) => {
+ await page.setViewportSize({ width: 1440, height: 1000 });
+ await setup(page);
+ const trigger = page.getByRole("button", { name: "使用的技能", exact: true });
+ const openDetail = async () => {
+ await trigger.click();
+ await page.getByRole("menuitem", { name: /using-superpowers/ }).click();
+ await expect(
+ page.getByRole("region", { name: "SKILL.md", exact: true }),
+ ).toBeVisible();
+ };
+ await openDetail();
+ await page.getByTestId("browser-trigger").click();
+ await expect(
+ page.getByRole("region", { name: "SKILL.md", exact: true }),
+ ).toBeHidden();
+ await openDetail();
+ await expect(page.getByTestId("browser-trigger")).not.toHaveAttribute(
+ "aria-label",
+ "关闭",
+ );
+ const handle = page.locator('[data-slot="resizable-handle"]').first();
+ await handle.hover();
+ const bounds = (await handle.boundingBox())!;
+ await page.mouse.down();
+ await page.mouse.move(1438, bounds.y + bounds.height / 2, { steps: 15 });
+ await page.mouse.up();
+ await expect(
+ page.getByRole("region", { name: "SKILL.md", exact: true }),
+ ).toBeHidden();
+ await openDetail();
+});
+
+test("terminal-only history keeps original raw copy and scrolls long snapshots safely", async ({
+ page,
+}) => {
+ await page.setViewportSize({ width: 1440, height: 900 });
+ await page.context().grantPermissions(["clipboard-read", "clipboard-write"]);
+ const content = `---\nname: long-report\ndescription: Long report workflow\n---\n# Long report\n\n[Local template](templates/apa.md)\n\n\n\n${"Paragraph with instructions.\n\n".repeat(160)}## End of snapshot`;
+ const original = { ...skills[0]!, content };
+ await page
+ .context()
+ .addCookies([
+ { name: "locale", value: "zh-CN", url: "http://localhost:3000" },
+ ]);
+ mockLangGraphAPI(page, {
+ threads: [
+ {
+ thread_id: THREAD_ID,
+ title: "Archived skill history",
+ messages: [
+ {
+ type: "ai",
+ id: "final-only",
+ content: "历史已恢复。",
+ run_id: RUN_ID,
+ additional_kwargs: { skill_usages: [original] },
+ },
+ ],
+ },
+ ],
+ });
+ await page.goto(`/workspace/chats/${THREAD_ID}`);
+ await page.getByRole("button", { name: "使用的技能", exact: true }).click();
+ await page.getByRole("menuitem", { name: /using-superpowers/ }).click();
+ const panel = page.getByRole("region", { name: "SKILL.md", exact: true });
+ await expect(
+ panel.getByRole("heading", { name: "Long report", exact: true }),
+ ).toBeVisible();
+ await panel.getByRole("button", { name: "复制技能快照" }).click();
+ await expect
+ .poll(() => page.evaluate(() => navigator.clipboard.readText()))
+ .toBe(content);
+ await expect(panel.getByRole("link", { name: "Local template" })).toHaveCount(
+ 0,
+ );
+ await expect(
+ panel.getByText("Local template", { exact: true }),
+ ).toBeVisible();
+ await expect(panel.locator('img[src="images/flow.png"]')).toHaveCount(0);
+ await panel.hover();
+ await page.mouse.wheel(0, 15000);
+ await expect(
+ panel.getByRole("heading", { name: "End of snapshot" }),
+ ).toBeInViewport();
+ await expect(
+ panel.getByRole("button", { name: "复制技能快照" }),
+ ).toBeInViewport();
+ await panel.getByRole("button", { name: "关闭", exact: true }).click();
+ await expect(
+ page.getByRole("button", { name: "使用的技能", exact: true }),
+ ).toBeFocused();
+});
diff --git a/frontend/tests/unit/components/workspace/message-details/message-details-menu.dom.test.tsx b/frontend/tests/unit/components/workspace/message-details/message-details-menu.dom.test.tsx
new file mode 100644
index 0000000000..6f696b4a9c
--- /dev/null
+++ b/frontend/tests/unit/components/workspace/message-details/message-details-menu.dom.test.tsx
@@ -0,0 +1,99 @@
+import { afterEach, describe, expect, it, rs } from "@rstest/core";
+import {
+ act,
+ cleanup,
+ fireEvent,
+ render,
+ screen,
+} from "@testing-library/react";
+
+import { MessageDetailsMenu } from "@/components/workspace/message-details/message-details-menu";
+
+function renderMenu(onSelect = rs.fn()) {
+ render(
+ <>
+
+
+
+ );
+}
diff --git a/frontend/src/components/workspace/skill-usage/snapshot-markdown-components.tsx b/frontend/src/components/workspace/skill-usage/snapshot-markdown-components.tsx
new file mode 100644
index 0000000000..0b3c12e5f1
--- /dev/null
+++ b/frontend/src/components/workspace/skill-usage/snapshot-markdown-components.tsx
@@ -0,0 +1,57 @@
+import { type StreamdownComponentOverrides } from "@/core/streamdown/components";
+
+import {
+ createMarkdownLinkComponent,
+ isSafeHref,
+} from "../messages/markdown-link";
+
+const MarkdownLink = createMarkdownLinkComponent();
+
+// Only SKILL.md is captured. Package-relative links and images have no resource
+// backing in this snapshot, so never resolve them against the current chat URL.
+export const snapshotMarkdownComponents: StreamdownComponentOverrides = {
+ a: ({ href, children, className, title }) => {
+ if (href && /^(https?:\/\/|mailto:|tel:)/i.test(href) && isSafeHref(href)) {
+ return (
+
+
+ {skill.partial && (
+ + {skill.path} +
+
+
+
+ + {skill.name} +
+ + {skillSourceLabel(skill.category, t)} + +-
+
- {t.skillUsage.name} +
- {skill.name} +
- {t.skillUsage.description} +
- + {skill.description || "—"} + +
+ {t.skillUsage.partial} +
+ )} +
+
+