feat: Skills 渐进式披露 — Anthropic 3层展开机制 + Agent 主动触发 skill

- protocol.ts: SkillItem 新增 detail/triggers/instructions 渐进式披露字段
- SkillsView.tsx: 重写为 3 层展开组件（名称→详情→完整指令），skill 触发时指令作为独立 system 消息追加到对话
- demos.ts: Demo C/D skills 升级为 5 个真实 Anthropic skills（deep-research/code-review/verify/simplify/loop）；新增 Demo E 展示 Agent 主动触发 /deep-research 的完整流程
- ChatContext.tsx: 默认激活 Demo E

src/components/segments/SkillsView.tsx

@@ -1,6 +1,95 @@
+import { useState } from 'react'
 import type { SkillSegment } from '../../types/protocol'
 import CollapsiblePanel from '../CollapsiblePanel'
-import { Zap } from 'lucide-react'
+import { Zap, ChevronDown, ChevronRight, Lightbulb, BookOpen } from 'lucide-react'
+
+/**
+ * 单个 Skill 的渐进式披露组件。
+ *
+ * Anthropic 3 层披露机制：
+ *   第 1 层 — 名称 + 一行描述（始终可见）
+ *   第 2 层 — 详细说明 + 触发条件（点击展开）
+ *   第 3 层 — 完整指令（再次点击展开 — 触发时作为 system 消息追加到对话，而非合并进已有 System Prompt）
+ */
+function SkillDisclosure({ item }: { item: SkillSegment['items'][number] }) {
+  const [layer, setLayer] = useState<1 | 2 | 3>(1)
+
+  const hasLayer2 = !!(item.detail || (item.triggers && item.triggers.length > 0))
+  const hasLayer3 = !!item.instructions
+
+  return (
+    <li className="rounded-lg border border-green-200 bg-white overflow-hidden">
+      {/* Layer 1: 始终可见 — 名称 + 一行描述 */}
+      <button
+        onClick={() => setLayer(layer === 1 && hasLayer2 ? 2 : 1)}
+        className="w-full flex items-start gap-2.5 px-3 py-2 text-left hover:bg-green-50/50 transition-colors"
+      >
+        <span className="font-mono font-semibold text-green-800 shrink-0 text-xs mt-px">
+          /{item.name}
+        </span>
+        <span className="text-xs text-gray-500 flex-1 leading-relaxed">
+          {item.description}
+        </span>
+        {hasLayer2 && (
+          <span className="shrink-0 text-green-400 mt-px">
+            {layer >= 2 ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+          </span>
+        )}
+      </button>
+
+      {/* Layer 2: 详细说明 + 触发条件 */}
+      {layer >= 2 && hasLayer2 && (
+        <div className="px-3 pb-2 border-t border-green-100 bg-green-50/30">
+          {item.detail && (
+            <div className="mt-2 flex items-start gap-1.5">
+              <BookOpen size={12} className="text-green-500 shrink-0 mt-0.5" />
+              <p className="text-xs text-gray-600 leading-relaxed">{item.detail}</p>
+            </div>
+          )}
+          {item.triggers && item.triggers.length > 0 && (
+            <div className="mt-1.5 flex items-start gap-1.5">
+              <Lightbulb size={12} className="text-amber-500 shrink-0 mt-0.5" />
+              <div className="text-xs text-gray-500">
+                <span className="font-medium text-amber-700">触发条件：</span>
+                {item.triggers.map((t, i) => (
+                  <span key={i} className="inline-block bg-amber-50 text-amber-800 rounded px-1 py-0.5 mr-1 mt-0.5 font-mono">
+                    "{t}"
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Layer 3 切换按钮 */}
+          {hasLayer3 && (
+            <button
+              onClick={(e) => { e.stopPropagation(); setLayer(layer === 2 ? 3 : 2) }}
+              className="mt-2 flex items-center gap-1 text-[10px] text-green-600 hover:text-green-800 transition-colors"
+            >
+              {layer === 3 ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
+              查看注入指令（追加到对话）
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Layer 3: 完整注入指令 */}
+      {layer >= 3 && item.instructions && (
+        <div className="px-3 pb-2 border-t border-green-200 bg-gray-900 mx-2 mb-2 rounded">
+          <div className="flex items-center gap-1.5 mt-2 mb-1">
+            <Zap size={10} className="text-green-400" />
+            <span className="text-[10px] text-green-400 font-semibold uppercase tracking-wider">
+              注入指令 · 触发 /{item.name} 时追加到对话
+            </span>
+          </div>
+          <pre className="text-[10px] font-mono text-gray-300 whitespace-pre-wrap leading-relaxed max-h-48 overflow-y-auto pb-1">
+            {item.instructions}
+          </pre>
+        </div>
+      )}
+    </li>
+  )
+}
 
 export default function SkillsView({ segment }: { segment: SkillSegment }) {
   return (
@@ -17,12 +106,7 @@ export default function SkillsView({ segment }: { segment: SkillSegment }) {
       )}
       <ul className="space-y-1.5">
         {segment.items.map((item, i) => (
-          <li key={i} className="text-xs flex items-start gap-2">
-            <span className="font-mono font-semibold text-green-800 shrink-0">
-              /{item.name}
-            </span>
-            <span className="text-gray-500">{item.description}</span>
-          </li>
+          <SkillDisclosure key={i} item={item} />
         ))}
       </ul>
     </CollapsiblePanel>

src/context/ChatContext.tsx

@@ -13,8 +13,8 @@ interface ChatContextValue {
 const ChatContext = createContext<ChatContextValue | null>(null)
 
 export function ChatProvider({ children }: { children: ReactNode }) {
-  const [activeDemo, setActiveDemo] = useState(3) // Start with comprehensive demo
-  const [envelope, setEnvelope] = useState<PromptEnvelope>(demos[3].envelope)
+  const [activeDemo, setActiveDemo] = useState(4) // Default: Skills Demo E
+  const [envelope, setEnvelope] = useState<PromptEnvelope>(demos[4].envelope)
 
   const switchDemo = (i: number) => {
     setActiveDemo(i)

src/data/demos.ts

@@ -309,9 +309,27 @@ const demoC: PromptEnvelope = {
           description:
             'Skills 是模型可调用的内置能力（slash commands）。输入 / 开头即可触发，无需等待模型推理。当前对话中启用以下 skills：',
           items: [
-            { name: 'summarize', description: '生成文档摘要' },
-            { name: 'translate', description: '翻译文档内容' },
-            { name: 'qa', description: '基于文档回答具体问题' },
+            {
+              name: 'summarize',
+              description: '生成文档摘要 — 支持多种粒度（一句话/段落级/全文级）',
+              detail: '对用户提供的文档生成结构化摘要。支持三种粒度：一句话概览（≤50字）、段落级摘要（保存关键论点）、全文级摘要（保留章节结构）。输出为 Markdown 格式。',
+              triggers: ['帮我总结一下', '概括这篇文章', '这个文档说了什么', '摘要'],
+              instructions: '你是一个专业的文档摘要助手。当用户请求摘要时：\n1. 先确认用户需要的粒度（简要/段落/全文）\n2. 提取核心论点和支撑证据\n3. 使用 Markdown 层级结构输出\n4. 在末尾标注信息来源（章节/页码）',
+            },
+            {
+              name: 'translate',
+              description: '翻译文档内容 — 支持中英互译，保留原文格式',
+              detail: '将文档内容翻译为目标语言。保留原始 Markdown 格式、代码块、表格结构。支持术语表自定义（通过附加参数）。默认输出：中文 ↔ 英文。',
+              triggers: ['翻译', 'translate', '翻成中文', '译成英文'],
+              instructions: '你是专业翻译助手。翻译规则：\n1. 保留所有 Markdown 格式和代码块\n2. 术语一致性——同一术语全文统一译法\n3. 学术文本保留原文关键术语括号标注\n4. 表格和列表结构不变',
+            },
+            {
+              name: 'qa',
+              description: '基于文档回答具体问题 — 带引用溯源',
+              detail: '基于用户提供的文档内容回答具体问题。每个回答都附带文档引用（章节/段落号），用户可以点击引用跳转到原文位置。支持追问和澄清。',
+              triggers: ['文档中', '根据文章', '论文里提到', '这段说的是'],
+              instructions: '你基于文档回答用户问题。规则：\n1. 每个陈述必须引用文档出处\n2. 如果文档中没有相关信息，明确告知\n3. 区分"文档直接陈述"和"你的推理延伸"\n4. 不确定时提出澄清问题',
+            },
           ],
           collapsed: true,
         },
@@ -418,10 +436,41 @@ const demoD: PromptEnvelope = {
           description:
             'Skills 是模型可调用的内置能力（slash commands）。输入 / 开头即可触发，无需等待模型推理。当前对话中可用以下 skills：',
           items: [
-            { name: 'deep-research', description: '深度研究 — 多源搜索、交叉验证、生成引用报告' },
-            { name: 'code-review', description: '审查代码变更，发现正确性问题和简化机会' },
-            { name: 'simplify', description: '审查代码的复用性、简洁性和效率，并应用修复' },
-            { name: 'verify', description: '运行应用并观察行为来验证变更是否正确' },
+            {
+              name: 'deep-research',
+              description: '深度研究 — 多源搜索、交叉验证、生成引用报告',
+              detail: '这是一个多阶段研究技能。第一阶段：并行执行多个定向搜索（学术文献、行业报告、新闻、开源项目）。第二阶段：获取高相关性来源的完整内容。第三阶段：对每个声明进行三方交叉验证。第四阶段：生成包含引用来源的结构化报告。适合需要高质量、可验证答案的场景。',
+              triggers: ['深入调研', '全面分析', '研究一下', '查证', '给我一个研究报告', '这个领域有哪些'],
+              instructions: '你是深度研究助手。工作流程：\n1. 分析用户问题，拆解为 3-5 个子问题\n2. 对每个子问题执行多源搜索（学术 + 行业 + 新闻）\n3. 抓取高相关性页面全文\n4. 交叉验证：至少两个独立来源确认同一个关键事实\n5. 生成报告格式：摘要 → 分项发现 → 证据表 → 限定说明\n6. 每个声明确标注来源 URL 和可信度评级',
+            },
+            {
+              name: 'code-review',
+              description: '代码审查 — 发现正确性 bug 和简化/效率优化机会',
+              detail: '审查当前分支的代码变更，按两个维度分析：(1) 正确性问题：空值、边界条件、竞态、资源泄漏；(2) 质量改进：重复代码、过度复杂、性能瓶颈。按置信度分级输出，每个发现包含文件路径、行号、问题描述和修复建议。',
+              triggers: ['review', '审查', '帮我看看代码', '代码有什么问题', '检查一下'],
+              instructions: '你是代码审查专家。审查规则：\n1. 首先读取 diff 内容（git diff）\n2. 正确性维度扫描：空值处理、边界条件、竞态条件、异常处理\n3. 质量维度扫描：重复代码、过长函数、深层嵌套、无用变量\n4. 每个发现标注：严重度（高/中/低）、文件路径、行号\n5. 提供具体的修复代码片段\n6. 避免纯风格的评论（交给 formatter）',
+            },
+            {
+              name: 'verify',
+              description: '行为验证 — 运行应用并观察行为来确认变更生效',
+              detail: '启动应用、运行测试、或执行指定命令，并观察输出来验证某个变更是否按预期工作。支持多种验证策略：单元测试、端到端测试、手动检查输出。适合 PR 合并前的最终确认环节。',
+              triggers: ['验证', '测试一下', '确认', '检查是否生效', '跑一下', '运行'],
+              instructions: '你是验证助手。验证流程：\n1. 确认待验证的变更是什么\n2. 选择验证策略：优先自动测试，其次手动观察\n3. 运行相关测试套件\n4. 如果测试通过，启动应用确认关键路径\n5. 输出验证报告：测试结果 + 观察到的问题 + 置信度',
+            },
+            {
+              name: 'simplify',
+              description: '代码简化 — 审查代码的复用性、简洁性和效率并应用修复',
+              detail: '只关注代码质量改进（不找 bug）。扫描变更文件，发现：可抽取的共享逻辑、可合并的重复代码、不必要的中间变量、可简化表达式。直接应用修复到工作树。需要 code-review 先跑完后再用此技能。',
+              triggers: ['简化', '重构', '精简', '优化这段代码', '能不能更简单'],
+              instructions: '你是代码简化专家。简化规则：\n1. 只做质量改进，不改变行为\n2. 发现重复代码 → 提取为函数/变量\n3. 发现过长函数 → 提取子步骤\n4. 发现不必要的中间变量 → 内联\n5. 发现深层嵌套 → 卫语句（guard clause）扁平化\n6. 修改后运行全部测试确认无回归',
+            },
+            {
+              name: 'loop',
+              description: '定时循环 — 按指定间隔重复执行一个命令或 prompt',
+              detail: '设置一个定时任务，每隔指定时间（5分钟、30分钟、1小时等）自动执行一个提示词或命令。适合 CI 监控、定时检查、长期运行的自动化任务。任务在后台运行，不会阻塞当前对话。',
+              triggers: ['定时', '每隔', '循环', '持续监控', '定期检查', '每分钟'],
+              instructions: '你是定时任务助手。循环配置：\n1. 确认循环间隔和任务内容\n2. 首次执行立即运行一次\n3. 后续按间隔自动触发\n4. 每次执行输出简短状态摘要\n5. 用户可以随时说"停止循环"来终止\n6. 长时间循环（>1小时）使用持久化模式',
+            },
           ],
           collapsed: true,
         },
@@ -604,6 +653,278 @@ const demoD: PromptEnvelope = {
   ],
 }
 
+// ============================================================
+// Scenario E: Agent 主动触发 Skill（渐进式披露 + 工具调用）
+// ============================================================
+const demoE: PromptEnvelope = {
+  version: '1.0',
+  model: 'claude-opus-4-8',
+  messages: [
+    // --- System message: 加载 skills + memory + tools ---
+    {
+      id: 'e-1',
+      role: 'system',
+      segments: [
+        {
+          kind: 'system_prompt',
+          content: `你是 HCI 课程设计助手，具备 Anthropic Skills 机制。
+
+你有以下 skills 可用。用户输入以 / 开头的命令时会直接触发对应 skill。你也可以在分析用户意图后，主动建议合适的 skill。
+
+回复风格：简洁、有结构、给出可操作建议。`,
+          collapsed: true,
+        },
+        {
+          kind: 'memory',
+          description:
+            '以下是从过往对话中总结的关于你的信息，模型会参考这些记忆来个性化回复。',
+          items: [
+            {
+              title: '用户背景',
+              content: '小明，设计系研二，HCI 方向。正在做课程设计，课题是 LLM 上下文透明性。',
+            },
+            {
+              title: '当前进度',
+              content: '已完成 MVP 开发（React + TypeScript 聊天界面），展示了 9 种 Segment 的差异化渲染。',
+            },
+            {
+              title: '关注点',
+              content: '关心 Anthropic Skills 的渐进式披露机制能否作为 HCI 课程中的交互设计案例。',
+            },
+          ],
+          collapsed: true,
+        },
+        {
+          kind: 'skills',
+          description:
+            'Skills 是模型可调用的内置能力。输入 / 触发，或根据对话上下文由 Agent 自动判断并调用。当前可用以下 skills：',
+          items: [
+            {
+              name: 'deep-research',
+              description: '深度研究 — 多源搜索、交叉验证、生成引用报告',
+              detail: '多阶段研究技能：(1) 拆解问题为子问题 (2) 并行搜索多源 (3) 抓取全文 (4) 三方交叉验证 (5) 生成结构化引用报告。适合需要高质量、可验证答案的场景。',
+              triggers: ['深入调研', '全面分析', '研究一下', '给我一个研究报告'],
+              instructions: '深度研究工作流程：\n1. 分析用户问题，拆解为 3-5 个子问题\n2. 对每个子问题执行多源搜索（学术 + 行业 + 新闻）\n3. 抓取高相关性页面全文\n4. 交叉验证：至少两个独立来源确认同一关键事实\n5. 生成报告格式：摘要 → 分项发现 → 证据表 → 限定说明\n6. 每声明标注来源和可信度评级',
+            },
+            {
+              name: 'code-review',
+              description: '代码审查 — 发现正确性 bug 和简化/效率优化机会',
+              detail: '审查当前分支变更，按正确性和质量两个维度分析。每个发现附带文件路径、行号、问题描述和修复建议。',
+              triggers: ['review', '审查', '帮我看看代码', '代码有什么问题'],
+              instructions: '代码审查流程：\n1. 读取 git diff\n2. 正确性扫描：空值、边界、竞态、异常处理\n3. 质量扫描：重复代码、过长函数、深层嵌套\n4. 每个发现标注严重度、文件、行号\n5. 提供修复代码片段',
+            },
+            {
+              name: 'verify',
+              description: '行为验证 — 运行应用并观察行为来确认变更生效',
+              detail: '启动应用或运行测试来验证变更是否按预期工作。支持自动测试和手动观察两种策略。',
+              triggers: ['验证', '测试一下', '确认', '检查是否生效', '跑一下'],
+              instructions: '验证流程：\n1. 确认待验证变更\n2. 选择策略（自动测试 或 手动观察）\n3. 运行测试套件\n4. 输出验证报告：测试结果 + 问题 + 置信度',
+            },
+            {
+              name: 'simplify',
+              description: '代码简化 — 审查并优化代码的复用性和简洁性',
+              detail: '只做质量改进（不改行为）。发现重复代码、过度复杂、不必要的中间变量等，直接应用修复。',
+              triggers: ['简化', '重构', '精简', '优化', '能不能更简单'],
+              instructions: '简化规则：\n1. 只改进质量不改变行为\n2. 重复代码 → 提取函数\n3. 过长函数 → 提取子步骤\n4. 深层嵌套 → 卫语句扁平化\n5. 修复后运行全部测试确认无回归',
+            },
+            {
+              name: 'loop',
+              description: '定时循环 — 按指定间隔重复执行命令或 prompt',
+              detail: '设置定时任务，每隔指定时间自动执行。适合 CI 监控、定时检查。后台运行，不阻塞对话。',
+              triggers: ['定时', '每隔', '循环', '持续监控', '定期'],
+              instructions: '循环配置：\n1. 确认间隔和任务内容\n2. 首次执行立即运行\n3. 后续按间隔自动触发\n4. 用户可说"停止"来终止',
+            },
+          ],
+          collapsed: true,
+        },
+        {
+          kind: 'tool_overview',
+          items: [
+            {
+              name: 'run_skill',
+              description: '执行一个 Skill（slash command）',
+              parameters: 'skill_name: string, input: string',
+              schema: {
+                type: 'object',
+                properties: {
+                  skill_name: { type: 'string', description: 'Skill 名称' },
+                  input: { type: 'string', description: '传递给 skill 的用户输入' },
+                },
+                required: ['skill_name', 'input'],
+              },
+            },
+          ],
+          collapsed: true,
+        },
+      ],
+      timestamp: now - 360000,
+    },
+    // --- User message: 触发 research 需求 ---
+    {
+      id: 'e-2',
+      role: 'user',
+      segments: [
+        {
+          kind: 'static_var',
+          name: 'user_name',
+          value: '小明',
+        },
+        {
+          kind: 'text',
+          content: '我想深入了解 Anthropic Skills 的渐进式披露机制（Progressive Disclosure），作为我的 HCI 课程论文的案例研究对象。请帮我调研一下这个机制的设计原理、交互模式和学术界相关讨论。',
+        },
+      ],
+      timestamp: now - 300000,
+    },
+    // --- Assistant: 判断需要 research，主动触发 /deep-research ---
+    {
+      id: 'e-3',
+      role: 'assistant',
+      segments: [
+        {
+          kind: 'text',
+          content: `你的课程论文选题很棒！Anthropic Skills 的渐进式披露机制确实是一个很好的 HCI 案例分析对象——它以 **三阶段信息展开**（overview → detail → full instructions）来降低认知负荷，同时保持功能的可发现性。
+
+让我用 \`/deep-research\` skill 做一个系统性调研：`,
+        },
+        {
+          kind: 'tool_call_request',
+          toolName: 'run_skill',
+          arguments: {
+            skill_name: 'deep-research',
+            input: 'Anthropic Skills progressive disclosure mechanism — design principles, interaction patterns, HCI academic discussions, related concepts (progressive disclosure in UX, Nielsen\'s heuristics, information architecture patterns for AI interfaces)',
+          },
+          collapsed: false,
+        },
+      ],
+      timestamp: now - 280000,
+    },
+    // --- Skill 触发：指令以 system 消息形式追加到对话 ---
+    // （而非合并进原有的 System Prompt segment）
+    {
+      id: 'e-4',
+      role: 'system',
+      segments: [
+        {
+          kind: 'system_prompt',
+          content: `[/deep-research 已触发]
+
+深度研究工作流程：
+1. 分析用户问题，拆解为 3-5 个子问题
+2. 对每个子问题执行多源搜索（学术 + 行业 + 新闻）
+3. 抓取高相关性页面全文
+4. 交叉验证：至少两个独立来源确认同一关键事实
+5. 生成报告格式：摘要 → 分项发现 → 证据表 → 限定说明
+6. 每声明标注来源和可信度评级`,
+          collapsed: true,
+        },
+      ],
+      timestamp: now - 270000,
+    },
+    // --- Skill execution result ---
+    {
+      id: 'e-5',
+      role: 'assistant',
+      segments: [
+        {
+          kind: 'tool_call_result',
+          toolName: 'run_skill',
+          success: true,
+          result: `[/deep-research] 执行完成 · 搜索 12 个来源 · 抓取 8 篇全文 · 交叉验证通过
+
+## 摘要
+
+Anthropic Skills 的渐进式披露机制是一种三层信息架构，专门为 AI 代理的可扩展功能系统设计。核心思想："仅在用户需要时才展示细节"，与 Nielsen 的经典可用性原则高度一致。
+
+## 分项发现
+
+### 1. 三层披露模型
+
+| 层次 | 内容 | 触发时机 |
+|------|------|---------|
+| L1 概览 | 名称 + 一句话描述 | 始终可见（skills 面板） |
+| L2 详情 | 功能说明 + 触发条件 + 参数 | 用户点击展开 |
+| L3 指令 | 完整 system prompt 正文 | 用户再次点击"查看注入指令" |
+
+**设计原理**：这是 "information on demand" 模式的实现——信息存在但不喧嚣。L1 提供识别（recognition），L2 提供评估（evaluation），L3 提供理解（understanding）。
+
+### 2. 与经典 HCI 理论的对应
+
+- **Nielsen 的 Flexibility & Efficiency heuristics**：L1 满足新手（可识别），L3 满足专家（可审阅）
+- **Shneiderman 的 Visual Information Seeking Mantra**："Overview first, zoom and filter, then details-on-demand"——三层模型完美映射到 overview → zoom → details 流程
+- **Cognitive Load Theory (Sweller)**：L1 层只占用工作记忆的极小空间，L2/L3 按需加载
+
+### 3. 与其他 AI 产品的对比
+
+- **OpenAI GPTs**：配置页是扁平表单，缺乏渐进式展开 → 认知负荷高
+- **Gemini Gems**：类似 GPTs，所有配置信息同时可见
+- **Anthropic Skills**：三层的文件系统式浏览——/ 触发、描述预览、then 深入
+
+### 4. 交互模式创新
+
+Skills 采用了 **slash command + 自然语言** 的双模触发：
+- 显式触发：用户输入 \`/skill-name\`
+- 隐式触发：Agent 根据对话上下文判断并建议使用 skill
+
+这在 HCI 上称为 "mixed-initiative interaction"。
+
+### 5. 学术相关文献
+
+1. "Progressive Disclosure in Mobile UI" (CHI 2016) — 实验证明渐进式展开减少 37% 的错误操作
+2. "Designing for Mixed-Initiative Interaction" (TOCHI 2020) — Agent 主动建议 vs 用户显式触发的用户偏好研究
+3. "Information Scent in AI Interfaces" (CSCW 2024) — 讨论了 skills 描述如何帮助用户形成"信息气味"
+
+## 证据表
+
+| 声明 | 来源 | 可信度 |
+|------|------|--------|
+| 三层披露模型 | Anthropic Agent SDK 文档 | ★★★★★ |
+| 37% 错误减少 | CHI 2016 实验 | ★★★★ |
+| Mixed-initiative | TOCHI 2020 | ★★★★ |
+
+## 限定说明
+
+Anthropic Skills 机制仍在快速迭代中。上述分析基于 2026 年 6 月的公开文档和代码。建议在论文中标注版本时间。`,
+          collapsed: false,
+        },
+      ],
+      timestamp: now - 260000,
+    },
+    // --- Assistant: 综合报告 ---
+    {
+      id: 'e-6',
+      role: 'assistant',
+      segments: [
+        {
+          kind: 'text',
+          content: `## 调研结论
+
+基于 \`/deep-research\` 的交叉验证结果，我建议你的论文从以下角度分析 Skills 渐进式披露：
+
+### 🎯 最佳分析框架
+
+**Shneiderman 的 "Overview first, zoom and filter, then details-on-demand"** 是最贴切的理论框架——Skills 的三层模型几乎是对这个 mantra 的精确工程实现。
+
+### 📐 可量化的 HCI 指标
+
+1. **信息可发现性**：L1 概览层——用户能否快速识别需要的 skill（recognition over recall）
+2. **认知负荷**：对比"全量展示"vs"渐进式披露"的工作记忆占用
+3. **操作效率**：slash command 显式触发 vs Agent 隐式建议的完成时间对比
+
+### 🔗 建议引用的关键文献
+
+- CHI 2016 的渐进式披露实验（有量化数据支持你的设计论点）
+- TOCHI 2020 的 mixed-initiative 研究（对应双模触发机制）
+- Anthropic 2025 的 Skills Architecture RFC（一手来源）
+
+需要我帮你生成论文的文献综述部分吗？`,
+        },
+      ],
+      timestamp: now - 240000,
+    },
+  ],
+}
+
 export const demos: DemoScenario[] = [
   {
     id: 'a',
@@ -629,4 +950,10 @@ export const demos: DemoScenario[] = [
     description: '综合：全部 9 种 Segment',
     envelope: demoD,
   },
+  {
+    id: 'e',
+    label: '场景 E 🧪',
+    description: 'Skills 渐进式披露 + Agent 主动触发 /deep-research',
+    envelope: demoE,
+  },
 ]

src/types/protocol.ts

@@ -69,9 +69,19 @@ export interface SkillSegment {
   collapsed: boolean
 }
 
+/**
+ * Skill 遵循 Anthropic 渐进式披露机制：
+ *
+ * 第 1 层 — 名称 + 一句话描述（始终可见，在 skills 面板中）
+ * 第 2 层 — 详细描述 + 触发条件（点击展开单个 skill）
+ * 第 3 层 — 完整指令（再次点击展开 —— 触发时作为一条新消息追加到对话中）
+ */
 export interface SkillItem {
   name: string
-  description: string
+  description: string // 第 1 层：一句话描述
+  detail?: string // 第 2 层：详细说明（功能、输入输出、适用场景）
+  triggers?: string[] // 第 2 层：触发条件（用户说哪些话会触发此 skill）
+  instructions?: string // 第 3 层：注入 LLM 上下文的完整 system prompt
 }
 
 export interface ToolOverviewSegment {