feat: 更新 demo-f.ts，增强 SKILL.md body 加载和上下文注入功能

src/data/demos/demo-f.ts

@@ -9,7 +9,8 @@
  *   2. parseSkillMarkdown() 解析 YAML frontmatter → SkillItem
  *   3. SkillsView 渐进式披露 L1→L2→L3，L3 显示原始 SKILL.md body
  *   4. Agent 以工具调用方式触发 skill
- *   5. 对话中展示 static_var 展开（日期、用户身份）
+ *   5. 触发后 SKILL.md body 以 tool_call_result 返回并注入上下文（f-4）
+ *   6. 对话中展示 static_var 展开（日期、用户身份）
  */
 
 import type { PromptEnvelope } from '../../types/protocol'
@@ -123,7 +124,7 @@ export const demoF: PromptEnvelope = {
       ],
       timestamp: now - 280000,
     },
-    // --- Skill 执行结果 ---
+    // --- Skill body 加载：SKILL.md 作为 tool 结果返回 ---
     {
       id: 'f-4',
       role: 'assistant',
@@ -132,27 +133,48 @@ export const demoF: PromptEnvelope = {
           kind: 'tool_call_result',
           toolName: 'run_skill',
           success: true,
-          result: `[/webapp-testing] 执行完成
+          result: `[/webapp-testing] SKILL.md 已加载
+以下完整 body 已注入上下文，agent 将基于这些指令执行：
 
-→ 启动 Playwright (headless Chromium)
-→ 导航至 http://localhost:5173
-→ 等待 networkidle ... 就绪
-→ 执行侦察（截图 + DOM 检查）
+# Web Application Testing
 
-📸 页面截图: /tmp/inspect.png
+To test local web applications, write native Python Playwright scripts.
 
-测试结果:
-  ✅ (1) 页面加载 — 标题 "Prompt Envelope Protocol" 可见，4 个 demo 按钮就位
-  ✅ (2) 场景切换 — 点击「场景 A」→ 对话内容正确更新；点击「场景 C」→ 长文本+文档显示正常
-  ✅ (3) Protocol Panel — 右侧面板显示 OpenAI Format JSON，包含 model/messages/tools 字段
+**Helper Scripts Available**:
+- \`scripts/with_server.py\` - Manages server lifecycle (supports multiple servers)
 
-总计: 3/3 测试通过 🎉
+**Always run scripts with \`--help\` first** to see usage.
 
-建议: 无需修改，界面功能正常。如需添加更多测试（如 Protocol Panel 复制/导出功能），请告知。`,
+## Decision Tree: Choosing Your Approach
+
+\`\`\`
+User task → Is it static HTML?
+    ├─ Yes → Read HTML file directly to identify selectors
+    │         ├─ Success → Write Playwright script using selectors
+    │         └─ Fails/Incomplete → Treat as dynamic (below)
+    │
+    └─ No (dynamic webapp) → Is the server already running?
+        ├─ No → Run: python scripts/with_server.py --help
+        │        Then use the helper + write simplified Playwright script
+        │
+        └─ Yes → Reconnaissance-then-action:
+            1. Navigate and wait for networkidle
+            2. Take screenshot or inspect DOM
+            3. Identify selectors from rendered state
+            4. Execute actions with discovered selectors
+\`\`\`
+
+## Reconnaissance-Then-Action Pattern
+
+1. **Inspect rendered DOM** — take screenshot + page.content() + locate elements
+2. **Identify selectors** from inspection results
+3. **Execute actions** using discovered selectors
+
+（完整 body 共 96 行，详见上方 skills 面板 L3）`,
           collapsed: false,
         },
       ],
-      timestamp: now - 260000,
+      timestamp: now - 270000,
     },
     // --- Assistant 总结 ---
     {