From 8c39eb8124b538074566770a461d10ba7b18dd88 Mon Sep 17 00:00:00 2001
From: carry <luokairui@carry.fit>
Date: Sun, 7 Jun 2026 23:25:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20demo-f.ts=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=20SKILL.md=20body=20=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E5=92=8C=E4=B8=8A=E4=B8=8B=E6=96=87=E6=B3=A8=E5=85=A5=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/data/demos/demo-f.ts | 52 ++++++++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/data/demos/demo-f.ts b/src/data/demos/demo-f.ts
index e9c3d28..9e867ce 100644
--- a/src/data/demos/demo-f.ts
+++ b/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 总结 ---
     {