vrr/learn-claude-code
2
0
Fork 0
mirror of https://github.com/shareAI-lab/learn-claude-code.git synced 2026-08-31 09:55:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: refresh course through workflow and goal loops

Browse source
This commit is contained in:
Haoran 2026-07-30 19:14:04 +08:00
parent 2dd1852d9e
commit cb8fae1bdd
125 changed files with 10882 additions and 7661 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/public/course-assets/s09_memory/memory-subsystems.en.svg
View file

@ -53,7 +53,7 @@
<text x="370" y="203" fill="#475569" font-size="11" text-anchor="middle">.memory/ — MEMORY.md index + *.md files (YAML frontmatter: name / description / type)</text>
<!-- Arrow: Storage → Memory Files -->
<path d="M 112 138 L 112 174 Q 112 180 118 180" fill="none" stroke="#7c3aed" stroke-width="1.5" marker-end="url(#arrow)"/>
<path d="M 112 138 L 112 180" fill="none" stroke="#7c3aed" stroke-width="1.5" marker-end="url(#arrow)"/>
<text x="120" y="162" fill="#7c3aed" font-size="9">read/write</text>
<!-- Arrow: Extraction → Memory Files -->

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

Before After
Before After

2
web/public/course-assets/s09_memory/memory-subsystems.ja.svg
View file

@ -53,7 +53,7 @@
<text x="370" y="203" fill="#475569" font-size="11" text-anchor="middle">.memory/ — MEMORY.md インデックス + *.md ファイル（YAML frontmatter: name / description / type）</text>
<!-- Arrow: ストレージ → Memory Files -->
<path d="M 112 138 L 112 174 Q 112 180 118 180" fill="none" stroke="#7c3aed" stroke-width="1.5" marker-end="url(#arrow)"/>
<path d="M 112 138 L 112 180" fill="none" stroke="#7c3aed" stroke-width="1.5" marker-end="url(#arrow)"/>
<text x="120" y="162" fill="#7c3aed" font-size="9">読み/書き</text>
<!-- Arrow: 抽出 → Memory Files -->

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

Before After
Before After

2
web/public/course-assets/s09_memory/memory-subsystems.svg
View file

@ -53,7 +53,7 @@
<text x="370" y="203" fill="#475569" font-size="11" text-anchor="middle">.memory/ — MEMORY.md 索引 + *.md 文件（YAML frontmatter: name / description / type）</text>
<!-- Arrow: 存储 → Memory Files -->
<path d="M 112 138 L 112 174 Q 112 180 118 180" fill="none" stroke="#7c3aed" stroke-width="1.5" marker-end="url(#arrow)"/>
<path d="M 112 138 L 112 180" fill="none" stroke="#7c3aed" stroke-width="1.5" marker-end="url(#arrow)"/>
<text x="120" y="162" fill="#7c3aed" font-size="9">写入/读取</text>
<!-- Arrow: Extraction → Memory Files -->

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

Before After
Before After

158
web/public/course-assets/s16_team_protocols/team-protocols-overview.en.svg
View file

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 500" font-family="system-ui, -apple-system, sans-serif">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 664" font-family="system-ui, -apple-system, sans-serif">
<defs>
<linearGradient id="header" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#1e3a5f"/><stop offset="100%" stop-color="#7c3aed"/>
@ -9,9 +9,6 @@
<marker id="arrow-purple" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#7c3aed"/>
</marker>
<marker id="arrow-cyan" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#0891b2"/>
</marker>
<marker id="arrow-green" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#16a34a"/>
</marker>
@ -20,124 +17,125 @@
</marker>
</defs>
<rect width="760" height="500" fill="#fafbfc" rx="8"/>
<rect width="760" height="664" fill="#fafbfc" rx="8"/>
<!-- Title -->
<rect x="0" y="0" width="760" height="44" fill="url(#header)" rx="8"/>
<rect x="0" y="36" width="760" height="8" fill="url(#header)"/>
<text x="380" y="28" fill="#fff" font-size="15" font-weight="700" text-anchor="middle">Team Protocols — Request-Response + request_id Correlation + State Machine</text>
<!-- Legend -->
<rect x="40" y="56" width="12" height="10" rx="2" fill="#f0f4ff" stroke="#2563eb" stroke-width="1"/>
<text x="58" y="66" fill="#2563eb" font-size="10" font-weight="600">s15 Preserved</text>
<rect x="160" y="56" width="12" height="10" rx="2" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1"/>
<text x="178" y="66" fill="#7c3aed" font-size="10" font-weight="600">s16 New</text>
<!-- ===== Row 1: Lead Loop ===== -->
<!-- Row 1: Lead Loop -->
<rect x="20" y="90" width="70" height="40" rx="8" fill="#eef2ff" stroke="#4f46e5" stroke-width="1.5"/>
<text x="55" y="114" fill="#4f46e5" font-size="8" font-weight="600" text-anchor="middle">turn</text>
<line x1="90" y1="110" x2="104" y2="110" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/>
<rect x="107" y="90" width="70" height="40" rx="8" fill="#f0f4ff" stroke="#2563eb" stroke-width="1.5"/>
<text x="142" y="114" fill="#1e3a5f" font-size="10" font-weight="600" text-anchor="middle">messages</text>
<line x1="177" y1="110" x2="191" y2="110" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/>
<rect x="194" y="86" width="80" height="48" rx="8" fill="#f0f4ff" stroke="#2563eb" stroke-width="1.5"/>
<text x="234" y="114" fill="#1e3a5f" font-size="9" font-weight="600" text-anchor="middle">prompt</text>
<line x1="274" y1="110" x2="288" y2="110" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/>
<rect x="291" y="86" width="70" height="48" rx="8" fill="#f0f4ff" stroke="#2563eb" stroke-width="1.5"/>
<text x="326" y="114" fill="#1e3a5f" font-size="9" font-weight="600" text-anchor="middle">LLM</text>
<line x1="361" y1="110" x2="375" y2="110" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/>
<rect x="378" y="80" width="356" height="60" rx="8" fill="#f0f4ff" stroke="#2563eb" stroke-width="1.5"/>
<text x="556" y="98" fill="#1e3a5f" font-size="10" font-weight="600" text-anchor="middle">TOOL DISPATCH (core tool set)</text>
<text x="394" y="114" fill="#2563eb" font-size="8">bash · read · write · task(4) · spawn · send · inbox</text>
<text x="394" y="128" fill="#7c3aed" font-size="8" font-weight="700">★ request_shutdown · request_plan · review_plan</text>
<!-- Loop back -->
<path d="M 734 110 L 748 110 L 748 150 L 55 150 L 55 130" fill="none" stroke="#94a3b8" stroke-width="1" marker-end="url(#arrow)" stroke-dasharray="5,4"/>
<!-- ===== Row 2: Protocol Flow (purple) — request_id lifecycle ===== -->
<rect x="30" y="176" width="700" height="100" rx="8" fill="#f5f3ff" stroke="#7c3aed" stroke-width="2"/>
<text x="380" y="196" fill="#4c1d95" font-size="11" font-weight="700" text-anchor="middle">Request-Response Protocol Flow (request_id throughout)</text>
<!-- Row 2: shutdown protocol -->
<rect x="30" y="176" width="700" height="90" rx="8" fill="#fef3c7" stroke="#d97706" stroke-width="1.5"/>
<text x="380" y="196" fill="#92400e" font-size="11" font-weight="700" text-anchor="middle">Protocol A: Shutdown (Lead initiates → Teammate responds)</text>
<!-- Step 1: Send request -->
<rect x="50" y="208" width="130" height="52" rx="6" fill="#fff" stroke="#7c3aed" stroke-width="1"/>
<text x="115" y="226" fill="#7c3aed" font-size="9" font-weight="600" text-anchor="middle">① Lead sends request</text>
<text x="115" y="240" fill="#6b7280" font-size="7" text-anchor="middle">BUS.send("shutdown_request"</text>
<text x="115" y="252" fill="#6b7280" font-size="7" text-anchor="middle">metadata={request_id})</text>
<rect x="50" y="208" width="180" height="46" rx="6" fill="#fff" stroke="#d97706" stroke-width="1"/>
<text x="140" y="226" fill="#92400e" font-size="9" font-weight="600" text-anchor="middle">① Lead: request_shutdown</text>
<text x="140" y="242" fill="#6b7280" font-size="7" text-anchor="middle">new_request_id() → ProtocolState</text>
<line x1="180" y1="234" x2="206" y2="234" stroke="#7c3aed" stroke-width="1.5" marker-end="url(#arrow-purple)"/>
<line x1="230" y1="231" x2="254" y2="231" stroke="#d97706" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- Step 2: Teammate receives & dispatches -->
<rect x="209" y="208" width="130" height="52" rx="6" fill="#fff" stroke="#7c3aed" stroke-width="1"/>
<text x="274" y="226" fill="#7c3aed" font-size="9" font-weight="600" text-anchor="middle">② Teammate receives</text>
<text x="274" y="240" fill="#6b7280" font-size="7" text-anchor="middle">dispatch_by_type(inbox)</text>
<text x="274" y="252" fill="#6b7280" font-size="7" text-anchor="middle">→ handler(type, metadata)</text>
<rect x="257" y="208" width="180" height="46" rx="6" fill="#fff" stroke="#d97706" stroke-width="1"/>
<text x="347" y="226" fill="#92400e" font-size="9" font-weight="600" text-anchor="middle">② Teammate: handle_shutdown</text>
<text x="347" y="242" fill="#6b7280" font-size="7" text-anchor="middle">ack → shutdown_response</text>
<line x1="339" y1="234" x2="365" y2="234" stroke="#7c3aed" stroke-width="1.5" marker-end="url(#arrow-purple)"/>
<line x1="437" y1="231" x2="461" y2="231" stroke="#d97706" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- Step 3: Teammate processes & responds -->
<rect x="368" y="208" width="130" height="52" rx="6" fill="#fff" stroke="#7c3aed" stroke-width="1"/>
<text x="433" y="226" fill="#7c3aed" font-size="9" font-weight="600" text-anchor="middle">③ Teammate responds</text>
<text x="433" y="240" fill="#6b7280" font-size="7" text-anchor="middle">BUS.send("shutdown_response"</text>
<text x="433" y="252" fill="#6b7280" font-size="7" text-anchor="middle">same request_id + approve)</text>
<rect x="464" y="208" width="180" height="46" rx="6" fill="#fff" stroke="#d97706" stroke-width="1"/>
<text x="554" y="226" fill="#92400e" font-size="9" font-weight="600" text-anchor="middle">③ Lead: consume_lead_inbox</text>
<text x="554" y="242" fill="#6b7280" font-size="7" text-anchor="middle">match_response(request_id) → ✓</text>
<line x1="498" y1="234" x2="524" y2="234" stroke="#7c3aed" stroke-width="1.5" marker-end="url(#arrow-purple)"/>
<!-- Row 3: plan approval protocol -->
<rect x="30" y="280" width="700" height="110" rx="8" fill="#dbeafe" stroke="#2563eb" stroke-width="1.5"/>
<text x="380" y="300" fill="#1e40af" font-size="11" font-weight="700" text-anchor="middle">Protocol B: Plan Approval (Teammate initiates → Lead reviews)</text>
<!-- Step 4: Lead receives response -->
<rect x="527" y="208" width="130" height="52" rx="6" fill="#fff" stroke="#7c3aed" stroke-width="1"/>
<text x="592" y="226" fill="#7c3aed" font-size="9" font-weight="600" text-anchor="middle">④ Lead receives</text>
<text x="592" y="240" fill="#6b7280" font-size="7" text-anchor="middle">match_response(request_id)</text>
<text x="592" y="252" fill="#6b7280" font-size="7" text-anchor="middle">→ resolve/reject callback</text>
<rect x="50" y="312" width="150" height="46" rx="6" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1"/>
<text x="125" y="330" fill="#475569" font-size="8" font-weight="600" text-anchor="middle">0. Lead: request_plan</text>
<text x="125" y="346" fill="#6b7280" font-size="7" text-anchor="middle">Plain message (msg_type="message")</text>
<!-- ===== Row 3: State Machine + Storage ===== -->
<!-- State Machine -->
<rect x="30" y="296" width="340" height="85" rx="8" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1.5"/>
<text x="200" y="316" fill="#4c1d95" font-size="10" font-weight="700" text-anchor="middle">State Machine (same for both protocols)</text>
<line x1="200" y1="335" x2="222" y2="335" stroke="#94a3b8" stroke-width="1" marker-end="url(#arrow)" stroke-dasharray="4,3"/>
<rect x="55" y="330" width="58" height="20" rx="4" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1"/>
<text x="84" y="344" fill="#475569" font-size="9" text-anchor="middle">pending</text>
<rect x="225" y="312" width="160" height="46" rx="6" fill="#fff" stroke="#2563eb" stroke-width="1"/>
<text x="305" y="330" fill="#1e40af" font-size="8" font-weight="600" text-anchor="middle">① Teammate: submit_plan</text>
<text x="305" y="346" fill="#6b7280" font-size="7" text-anchor="middle">plan_approval_request + request_id</text>
<line x1="113" y1="340" x2="192" y2="340" stroke="#16a34a" stroke-width="1.5" marker-end="url(#arrow-green)"/>
<text x="152" y="335" fill="#16a34a" font-size="8" font-weight="600" text-anchor="middle">approve</text>
<line x1="385" y1="335" x2="407" y2="335" stroke="#2563eb" stroke-width="1.5" marker-end="url(#arrow)"/>
<rect x="192" y="330" width="62" height="20" rx="4" fill="#dcfce7" stroke="#16a34a" stroke-width="1"/>
<text x="223" y="344" fill="#166534" font-size="9" text-anchor="middle">approved</text>
<rect x="410" y="312" width="160" height="46" rx="6" fill="#fff" stroke="#2563eb" stroke-width="1"/>
<text x="490" y="330" fill="#1e40af" font-size="8" font-weight="600" text-anchor="middle">② Lead: review_plan</text>
<text x="490" y="346" fill="#6b7280" font-size="7" text-anchor="middle">plan_approval_response</text>
<path d="M 84 350 L 84 368 L 128 368" fill="none" stroke="#dc2626" stroke-width="1.5" marker-end="url(#arrow-red)"/>
<text x="76" y="362" fill="#dc2626" font-size="8" font-weight="600" text-anchor="end">reject</text>
<line x1="570" y1="335" x2="592" y2="335" stroke="#2563eb" stroke-width="1.5" marker-end="url(#arrow)"/>
<rect x="128" y="358" width="60" height="20" rx="4" fill="#fef2f2" stroke="#dc2626" stroke-width="1"/>
<text x="158" y="372" fill="#991b1b" font-size="9" text-anchor="middle">rejected</text>
<rect x="595" y="312" width="120" height="46" rx="6" fill="#fff" stroke="#2563eb" stroke-width="1"/>
<text x="655" y="330" fill="#1e40af" font-size="8" font-weight="600" text-anchor="middle">③ Teammate: receives</text>
<text x="655" y="346" fill="#6b7280" font-size="7" text-anchor="middle">[Plan approved/rejected]</text>
<!-- pending_requests storage -->
<rect x="400" y="296" width="330" height="85" rx="8" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1.5"/>
<text x="565" y="316" fill="#4c1d95" font-size="10" font-weight="700" text-anchor="middle">pending_requests Storage</text>
<text x="420" y="336" fill="#7c3aed" font-size="9">pending_requests: dict[str, ProtocolState]</text>
<text x="420" y="352" fill="#6b7280" font-size="8">request_id → {type, sender, status, created_at}</text>
<text x="420" y="368" fill="#6b7280" font-size="8">match_response: find request by request_id</text>
<text x="380" y="380" fill="#6b7280" font-size="8" text-anchor="middle">request_plan is a plain message, not a protocol; submit_plan is the protocol entry point (creates ProtocolState on teammate side)</text>
<!-- ===== Row 4: Two protocols use same machine ===== -->
<rect x="30" y="396" width="700" height="48" rx="6" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
<text x="55" y="416" fill="#1e3a5f" font-size="10" font-weight="600">Two protocols, one mechanism:</text>
<rect x="230" y="406" width="130" height="18" rx="4" fill="#fef3c7" stroke="#d97706" stroke-width="1"/>
<text x="295" y="419" fill="#92400e" font-size="9" text-anchor="middle">shutdown_request</text>
<text x="368" y="419" fill="#475569" font-size="10">and</text>
<rect x="390" y="406" width="140" height="18" rx="4" fill="#dbeafe" stroke="#2563eb" stroke-width="1"/>
<text x="460" y="419" fill="#1e40af" font-size="9" text-anchor="middle">plan_approval_request</text>
<text x="540" y="419" fill="#475569" font-size="10">share the same pending→approved/rejected FSM</text>
<text x="55" y="436" fill="#6b7280" font-size="8">New protocol type = new msg_type, no new state machine. request_id links request and response.</text>
<!-- Row 4: State Machine + Storage -->
<rect x="30" y="406" width="340" height="85" rx="8" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1.5"/>
<text x="200" y="426" fill="#4c1d95" font-size="10" font-weight="700" text-anchor="middle">State Machine (shared by both protocols)</text>
<!-- ===== Bottom notes ===== -->
<rect x="30" y="460" width="700" height="28" rx="6" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
<rect x="50" y="470" width="12" height="10" rx="2" fill="#f0f4ff" stroke="#2563eb" stroke-width="1"/>
<text x="70" y="480" fill="#475569" font-size="10">s15: MessageBus + spawn_teammate + inbox</text>
<rect x="310" y="470" width="12" height="10" rx="2" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1"/>
<text x="330" y="480" fill="#475569" font-size="10">s16: request_id protocol + dispatch + pending_requests + state machine</text>
<rect x="55" y="440" width="58" height="20" rx="4" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1"/>
<text x="84" y="454" fill="#475569" font-size="9" text-anchor="middle">pending</text>
<line x1="113" y1="450" x2="192" y2="450" stroke="#16a34a" stroke-width="1.5" marker-end="url(#arrow-green)"/>
<text x="152" y="445" fill="#16a34a" font-size="8" font-weight="600" text-anchor="middle">approve</text>
<rect x="192" y="440" width="62" height="20" rx="4" fill="#dcfce7" stroke="#16a34a" stroke-width="1"/>
<text x="223" y="454" fill="#166534" font-size="9" text-anchor="middle">approved</text>
<path d="M 84 460 L 84 478 L 128 478" fill="none" stroke="#dc2626" stroke-width="1.5" marker-end="url(#arrow-red)"/>
<text x="76" y="472" fill="#dc2626" font-size="8" font-weight="600" text-anchor="end">reject</text>
<rect x="128" y="468" width="60" height="20" rx="4" fill="#fef2f2" stroke="#dc2626" stroke-width="1"/>
<text x="158" y="482" fill="#991b1b" font-size="9" text-anchor="middle">rejected</text>
<rect x="400" y="406" width="330" height="85" rx="8" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1.5"/>
<text x="565" y="426" fill="#4c1d95" font-size="10" font-weight="700" text-anchor="middle">pending_requests Storage</text>
<text x="420" y="446" fill="#7c3aed" font-size="9">pending_requests: dict[str, ProtocolState]</text>
<text x="420" y="462" fill="#6b7280" font-size="8">request_id → {type, sender, status, created_at}</text>
<text x="420" y="478" fill="#6b7280" font-size="8">match_response: find request by request_id</text>
<!-- Row 5: Two protocols same machine -->
<rect x="30" y="506" width="700" height="52" rx="6" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
<text x="55" y="524" fill="#1e3a5f" font-size="10" font-weight="600">Two protocols, one mechanism:</text>
<rect x="230" y="512" width="130" height="18" rx="4" fill="#fef3c7" stroke="#d97706" stroke-width="1"/>
<text x="295" y="525" fill="#92400e" font-size="9" text-anchor="middle">shutdown_request</text>
<text x="368" y="525" fill="#475569" font-size="10">and</text>
<rect x="390" y="512" width="140" height="18" rx="4" fill="#dbeafe" stroke="#2563eb" stroke-width="1"/>
<text x="460" y="525" fill="#1e40af" font-size="9" text-anchor="middle">plan_approval_request</text>
<text x="55" y="548" fill="#6b7280" font-size="8">Share the same pending → approved / rejected state machine. New protocol type = new msg_type, no new state machine needed. request_id links request and response.</text>
<!-- Row 6: distinguish -->
<rect x="30" y="570" width="700" height="38" rx="6" fill="#f0fdf4" stroke="#16a34a" stroke-width="1"/>
<text x="55" y="588" fill="#166534" font-size="9" font-weight="600">Note:</text>
<text x="100" y="588" fill="#475569" font-size="9">request_plan is a plain message (msg_type="message") sent by lead to prompt a plan submission.</text>
<text x="55" y="602" fill="#475569" font-size="9">submit_plan is the protocol entry point (msg_type="plan_approval_request"), initiated by teammate, carrying request_id into pending_requests.</text>
<!-- Bottom notes -->
<rect x="30" y="622" width="700" height="28" rx="6" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
<rect x="50" y="632" width="12" height="10" rx="2" fill="#f0f4ff" stroke="#2563eb" stroke-width="1"/>
<text x="70" y="642" fill="#475569" font-size="10">s15: MessageBus + spawn_teammate + inbox</text>
<rect x="310" y="632" width="12" height="10" rx="2" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1"/>
<text x="330" y="642" fill="#475569" font-size="10">s16: request_id protocol + dispatch + pending_requests + state machine</text>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

162
web/public/course-assets/s16_team_protocols/team-protocols-overview.ja.svg
View file

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 500" font-family="system-ui, -apple-system, sans-serif">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 664" font-family="system-ui, -apple-system, sans-serif">
<defs>
<linearGradient id="header" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#1e3a5f"/><stop offset="100%" stop-color="#7c3aed"/>
@ -9,9 +9,6 @@
<marker id="arrow-purple" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#7c3aed"/>
</marker>
<marker id="arrow-cyan" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#0891b2"/>
</marker>
<marker id="arrow-green" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#16a34a"/>
</marker>
@ -20,122 +17,125 @@
</marker>
</defs>
<rect width="760" height="500" fill="#fafbfc" rx="8"/>
<rect width="760" height="664" fill="#fafbfc" rx="8"/>
<!-- Title -->
<rect x="0" y="0" width="760" height="44" fill="url(#header)" rx="8"/>
<rect x="0" y="36" width="760" height="8" fill="url(#header)"/>
<text x="380" y="28" fill="#fff" font-size="14" font-weight="700" text-anchor="middle">Team Protocols — リクエスト・レスポンス + request_id 紐付け + 状態機械</text>
<!-- Legend -->
<rect x="40" y="56" width="12" height="10" rx="2" fill="#f0f4ff" stroke="#2563eb" stroke-width="1"/>
<text x="58" y="66" fill="#2563eb" font-size="10" font-weight="600">s15 保持</text>
<rect x="130" y="56" width="12" height="10" rx="2" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1"/>
<text x="148" y="66" fill="#7c3aed" font-size="10" font-weight="600">s16 新規</text>
<text x="58" y="66" fill="#2563eb" font-size="10" font-weight="600">s15 維持</text>
<rect x="140" y="56" width="12" height="10" rx="2" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1"/>
<text x="158" y="66" fill="#7c3aed" font-size="10" font-weight="600">s16 新規</text>
<!-- ===== Row 1: Lead Loop ===== -->
<!-- Row 1: Lead Loop -->
<rect x="20" y="90" width="70" height="40" rx="8" fill="#eef2ff" stroke="#4f46e5" stroke-width="1.5"/>
<text x="55" y="114" fill="#4f46e5" font-size="8" font-weight="600" text-anchor="middle">turn</text>
<line x1="90" y1="110" x2="104" y2="110" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/>
<rect x="107" y="90" width="70" height="40" rx="8" fill="#f0f4ff" stroke="#2563eb" stroke-width="1.5"/>
<text x="142" y="114" fill="#1e3a5f" font-size="10" font-weight="600" text-anchor="middle">messages</text>
<line x1="177" y1="110" x2="191" y2="110" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/>
<rect x="194" y="86" width="80" height="48" rx="8" fill="#f0f4ff" stroke="#2563eb" stroke-width="1.5"/>
<text x="234" y="114" fill="#1e3a5f" font-size="9" font-weight="600" text-anchor="middle">prompt</text>
<line x1="274" y1="110" x2="288" y2="110" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/>
<rect x="291" y="86" width="70" height="48" rx="8" fill="#f0f4ff" stroke="#2563eb" stroke-width="1.5"/>
<text x="326" y="114" fill="#1e3a5f" font-size="9" font-weight="600" text-anchor="middle">LLM</text>
<line x1="361" y1="110" x2="375" y2="110" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/>
<rect x="378" y="80" width="356" height="60" rx="8" fill="#f0f4ff" stroke="#2563eb" stroke-width="1.5"/>
<text x="556" y="98" fill="#1e3a5f" font-size="10" font-weight="600" text-anchor="middle">TOOL DISPATCH（コアツールセット）</text>
<text x="394" y="114" fill="#2563eb" font-size="8">bash · read · write · task(4) · spawn · send · inbox</text>
<text x="394" y="128" fill="#7c3aed" font-size="8" font-weight="700">★ request_shutdown · request_plan · review_plan</text>
<!-- Loop back -->
<path d="M 734 110 L 748 110 L 748 150 L 55 150 L 55 130" fill="none" stroke="#94a3b8" stroke-width="1" marker-end="url(#arrow)" stroke-dasharray="5,4"/>
<!-- ===== Row 2: Protocol Flow ===== -->
<rect x="30" y="176" width="700" height="100" rx="8" fill="#f5f3ff" stroke="#7c3aed" stroke-width="2"/>
<text x="380" y="196" fill="#4c1d95" font-size="11" font-weight="700" text-anchor="middle">リクエスト・レスポンスプロトコルフロー（request_id が全チェーンを貫通）</text>
<!-- Row 2: shutdown protocol -->
<rect x="30" y="176" width="700" height="90" rx="8" fill="#fef3c7" stroke="#d97706" stroke-width="1.5"/>
<text x="380" y="196" fill="#92400e" font-size="11" font-weight="700" text-anchor="middle">プロトコル A：shutdown フロー（Lead が開始 → チームメイトが応答）</text>
<!-- Step 1 -->
<rect x="50" y="208" width="130" height="52" rx="6" fill="#fff" stroke="#7c3aed" stroke-width="1"/>
<text x="115" y="226" fill="#7c3aed" font-size="9" font-weight="600" text-anchor="middle">① Lead が要求送信</text>
<text x="115" y="240" fill="#6b7280" font-size="7" text-anchor="middle">BUS.send("shutdown_request"</text>
<text x="115" y="252" fill="#6b7280" font-size="7" text-anchor="middle">metadata={request_id})</text>
<rect x="50" y="208" width="180" height="46" rx="6" fill="#fff" stroke="#d97706" stroke-width="1"/>
<text x="140" y="226" fill="#92400e" font-size="9" font-weight="600" text-anchor="middle">① Lead: request_shutdown</text>
<text x="140" y="242" fill="#6b7280" font-size="7" text-anchor="middle">new_request_id() → ProtocolState</text>
<line x1="180" y1="234" x2="206" y2="234" stroke="#7c3aed" stroke-width="1.5" marker-end="url(#arrow-purple)"/>
<line x1="230" y1="231" x2="254" y2="231" stroke="#d97706" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- Step 2 -->
<rect x="209" y="208" width="130" height="52" rx="6" fill="#fff" stroke="#7c3aed" stroke-width="1"/>
<text x="274" y="226" fill="#7c3aed" font-size="9" font-weight="600" text-anchor="middle">② チームメイト受信</text>
<text x="274" y="240" fill="#6b7280" font-size="7" text-anchor="middle">dispatch_by_type(inbox)</text>
<text x="274" y="252" fill="#6b7280" font-size="7" text-anchor="middle">→ handler(type, metadata)</text>
<rect x="257" y="208" width="180" height="46" rx="6" fill="#fff" stroke="#d97706" stroke-width="1"/>
<text x="347" y="226" fill="#92400e" font-size="9" font-weight="600" text-anchor="middle">② チームメイト: handle_shutdown</text>
<text x="347" y="242" fill="#6b7280" font-size="7" text-anchor="middle">ack → shutdown_response</text>
<line x1="339" y1="234" x2="365" y2="234" stroke="#7c3aed" stroke-width="1.5" marker-end="url(#arrow-purple)"/>
<line x1="437" y1="231" x2="461" y2="231" stroke="#d97706" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- Step 3 -->
<rect x="368" y="208" width="130" height="52" rx="6" fill="#fff" stroke="#7c3aed" stroke-width="1"/>
<text x="433" y="226" fill="#7c3aed" font-size="9" font-weight="600" text-anchor="middle">③ チームメイト応答</text>
<text x="433" y="240" fill="#6b7280" font-size="7" text-anchor="middle">BUS.send("shutdown_response"</text>
<text x="433" y="252" fill="#6b7280" font-size="7" text-anchor="middle">同じ request_id + approve)</text>
<rect x="464" y="208" width="180" height="46" rx="6" fill="#fff" stroke="#d97706" stroke-width="1"/>
<text x="554" y="226" fill="#92400e" font-size="9" font-weight="600" text-anchor="middle">③ Lead: consume_lead_inbox</text>
<text x="554" y="242" fill="#6b7280" font-size="7" text-anchor="middle">match_response(request_id) → ✓</text>
<line x1="498" y1="234" x2="524" y2="234" stroke="#7c3aed" stroke-width="1.5" marker-end="url(#arrow-purple)"/>
<!-- Row 3: plan approval protocol -->
<rect x="30" y="280" width="700" height="110" rx="8" fill="#dbeafe" stroke="#2563eb" stroke-width="1.5"/>
<text x="380" y="300" fill="#1e40af" font-size="11" font-weight="700" text-anchor="middle">プロトコル B：plan approval フロー（チームメイトが開始 → Lead が審査）</text>
<!-- Step 4 -->
<rect x="527" y="208" width="130" height="52" rx="6" fill="#fff" stroke="#7c3aed" stroke-width="1"/>
<text x="592" y="226" fill="#7c3aed" font-size="9" font-weight="600" text-anchor="middle">④ Lead 応答受信</text>
<text x="592" y="240" fill="#6b7280" font-size="7" text-anchor="middle">match_response(request_id)</text>
<text x="592" y="252" fill="#6b7280" font-size="7" text-anchor="middle">→ resolve/reject callback</text>
<rect x="50" y="312" width="150" height="46" rx="6" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1"/>
<text x="125" y="330" fill="#475569" font-size="8" font-weight="600" text-anchor="middle">0. Lead: request_plan</text>
<text x="125" y="346" fill="#6b7280" font-size="7" text-anchor="middle">通常メッセージ（msg_type="message"）</text>
<!-- ===== Row 3: State Machine + Storage ===== -->
<rect x="30" y="296" width="340" height="85" rx="8" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1.5"/>
<text x="200" y="316" fill="#4c1d95" font-size="10" font-weight="700" text-anchor="middle">状態機械（2 つのプロトコルで共通）</text>
<line x1="200" y1="335" x2="222" y2="335" stroke="#94a3b8" stroke-width="1" marker-end="url(#arrow)" stroke-dasharray="4,3"/>
<rect x="55" y="330" width="58" height="20" rx="4" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1"/>
<text x="84" y="344" fill="#475569" font-size="9" text-anchor="middle">pending</text>
<rect x="225" y="312" width="160" height="46" rx="6" fill="#fff" stroke="#2563eb" stroke-width="1"/>
<text x="305" y="330" fill="#1e40af" font-size="8" font-weight="600" text-anchor="middle">① チームメイト: submit_plan</text>
<text x="305" y="346" fill="#6b7280" font-size="7" text-anchor="middle">plan_approval_request + request_id</text>
<line x1="113" y1="340" x2="192" y2="340" stroke="#16a34a" stroke-width="1.5" marker-end="url(#arrow-green)"/>
<text x="152" y="335" fill="#16a34a" font-size="8" font-weight="600" text-anchor="middle">approve</text>
<line x1="385" y1="335" x2="407" y2="335" stroke="#2563eb" stroke-width="1.5" marker-end="url(#arrow)"/>
<rect x="192" y="330" width="62" height="20" rx="4" fill="#dcfce7" stroke="#16a34a" stroke-width="1"/>
<text x="223" y="344" fill="#166534" font-size="9" text-anchor="middle">approved</text>
<rect x="410" y="312" width="160" height="46" rx="6" fill="#fff" stroke="#2563eb" stroke-width="1"/>
<text x="490" y="330" fill="#1e40af" font-size="8" font-weight="600" text-anchor="middle">② Lead: review_plan</text>
<text x="490" y="346" fill="#6b7280" font-size="7" text-anchor="middle">plan_approval_response</text>
<path d="M 84 350 L 84 368 L 128 368" fill="none" stroke="#dc2626" stroke-width="1.5" marker-end="url(#arrow-red)"/>
<text x="76" y="362" fill="#dc2626" font-size="8" font-weight="600" text-anchor="end">reject</text>
<line x1="570" y1="335" x2="592" y2="335" stroke="#2563eb" stroke-width="1.5" marker-end="url(#arrow)"/>
<rect x="128" y="358" width="60" height="20" rx="4" fill="#fef2f2" stroke="#dc2626" stroke-width="1"/>
<text x="158" y="372" fill="#991b1b" font-size="9" text-anchor="middle">rejected</text>
<rect x="595" y="312" width="120" height="46" rx="6" fill="#fff" stroke="#2563eb" stroke-width="1"/>
<text x="655" y="330" fill="#1e40af" font-size="8" font-weight="600" text-anchor="middle">③ チームメイト: 受信</text>
<text x="655" y="346" fill="#6b7280" font-size="7" text-anchor="middle">[Plan approved/rejected]</text>
<rect x="400" y="296" width="330" height="85" rx="8" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1.5"/>
<text x="565" y="316" fill="#4c1d95" font-size="10" font-weight="700" text-anchor="middle">pending_requests ストレージ</text>
<text x="420" y="336" fill="#7c3aed" font-size="9">pending_requests: dict[str, ProtocolState]</text>
<text x="420" y="352" fill="#6b7280" font-size="8">request_id → {type, sender, status, created_at}</text>
<text x="420" y="368" fill="#6b7280" font-size="8">match_response: request_id で要求を検索</text>
<text x="380" y="380" fill="#6b7280" font-size="8" text-anchor="middle">request_plan は通常メッセージでプロトコルではない。submit_plan がプロトコルエントリポイント（チームメイト側で ProtocolState を作成）</text>
<!-- ===== Row 4 ===== -->
<rect x="30" y="396" width="700" height="48" rx="6" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
<text x="55" y="416" fill="#1e3a5f" font-size="10" font-weight="600">2 つのプロトコル、1 つの仕組み：</text>
<rect x="230" y="406" width="130" height="18" rx="4" fill="#fef3c7" stroke="#d97706" stroke-width="1"/>
<text x="295" y="419" fill="#92400e" font-size="9" text-anchor="middle">shutdown_request</text>
<text x="368" y="419" fill="#475569" font-size="10">と</text>
<rect x="390" y="406" width="140" height="18" rx="4" fill="#dbeafe" stroke="#2563eb" stroke-width="1"/>
<text x="460" y="419" fill="#1e40af" font-size="9" text-anchor="middle">plan_approval_request</text>
<text x="540" y="419" fill="#475569" font-size="10">が pending→approved/rejected 状態機械を共有</text>
<text x="55" y="436" fill="#6b7280" font-size="8">新しいプロトコルタイプ = 新しい msg_type、新しい状態機械は不要。request_id が要求と応答を紐付け。</text>
<!-- Row 4: State Machine + Storage -->
<rect x="30" y="406" width="340" height="85" rx="8" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1.5"/>
<text x="200" y="426" fill="#4c1d95" font-size="10" font-weight="700" text-anchor="middle">状態機械（両プロトコルで共用）</text>
<!-- ===== Bottom notes ===== -->
<rect x="30" y="460" width="700" height="28" rx="6" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
<rect x="50" y="470" width="12" height="10" rx="2" fill="#f0f4ff" stroke="#2563eb" stroke-width="1"/>
<text x="70" y="480" fill="#475569" font-size="10">s15: MessageBus + spawn_teammate + inbox</text>
<rect x="310" y="470" width="12" height="10" rx="2" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1"/>
<text x="330" y="480" fill="#475569" font-size="10">s16: request_id プロトコル + dispatch + pending_requests + 状態機械</text>
<rect x="55" y="440" width="58" height="20" rx="4" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1"/>
<text x="84" y="454" fill="#475569" font-size="9" text-anchor="middle">pending</text>
<line x1="113" y1="450" x2="192" y2="450" stroke="#16a34a" stroke-width="1.5" marker-end="url(#arrow-green)"/>
<text x="152" y="445" fill="#16a34a" font-size="8" font-weight="600" text-anchor="middle">approve</text>
<rect x="192" y="440" width="62" height="20" rx="4" fill="#dcfce7" stroke="#16a34a" stroke-width="1"/>
<text x="223" y="454" fill="#166534" font-size="9" text-anchor="middle">approved</text>
<path d="M 84 460 L 84 478 L 128 478" fill="none" stroke="#dc2626" stroke-width="1.5" marker-end="url(#arrow-red)"/>
<text x="76" y="472" fill="#dc2626" font-size="8" font-weight="600" text-anchor="end">reject</text>
<rect x="128" y="468" width="60" height="20" rx="4" fill="#fef2f2" stroke="#dc2626" stroke-width="1"/>
<text x="158" y="482" fill="#991b1b" font-size="9" text-anchor="middle">rejected</text>
<rect x="400" y="406" width="330" height="85" rx="8" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1.5"/>
<text x="565" y="426" fill="#4c1d95" font-size="10" font-weight="700" text-anchor="middle">pending_requests ストレージ</text>
<text x="420" y="446" fill="#7c3aed" font-size="9">pending_requests: dict[str, ProtocolState]</text>
<text x="420" y="462" fill="#6b7280" font-size="8">request_id → {type, sender, status, created_at}</text>
<text x="420" y="478" fill="#6b7280" font-size="8">match_response: request_id でリクエストを検索</text>
<!-- Row 5: Two protocols same machine -->
<rect x="30" y="506" width="700" height="52" rx="6" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
<text x="55" y="524" fill="#1e3a5f" font-size="10" font-weight="600">2つのプロトコル、1つのメカニズム：</text>
<rect x="270" y="512" width="130" height="18" rx="4" fill="#fef3c7" stroke="#d97706" stroke-width="1"/>
<text x="335" y="525" fill="#92400e" font-size="9" text-anchor="middle">shutdown_request</text>
<text x="408" y="525" fill="#475569" font-size="10">と</text>
<rect x="425" y="512" width="140" height="18" rx="4" fill="#dbeafe" stroke="#2563eb" stroke-width="1"/>
<text x="495" y="525" fill="#1e40af" font-size="9" text-anchor="middle">plan_approval_request</text>
<text x="55" y="548" fill="#6b7280" font-size="8">同じ pending → approved / rejected 状態機械を共有。新しいプロトコルタイプ = 新しい msg_type、新しい状態機械は不要。request_id がリクエストとレスポンスを関連付ける。</text>
<!-- Row 6: distinguish -->
<rect x="30" y="570" width="700" height="38" rx="6" fill="#f0fdf4" stroke="#16a34a" stroke-width="1"/>
<text x="55" y="588" fill="#166534" font-size="9" font-weight="600">区別：</text>
<text x="100" y="588" fill="#475569" font-size="9">request_plan は通常メッセージ（msg_type="message"）で、lead がチームメイトに計画提出を促すために送信する。</text>
<text x="55" y="602" fill="#475569" font-size="9">submit_plan がプロトコルエントリポイント（msg_type="plan_approval_request"）で、チームメイトが自発的に開始し、request_id を pending_requests に書き込む。</text>
<!-- Bottom notes -->
<rect x="30" y="622" width="700" height="28" rx="6" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
<rect x="50" y="632" width="12" height="10" rx="2" fill="#f0f4ff" stroke="#2563eb" stroke-width="1"/>
<text x="70" y="642" fill="#475569" font-size="10">s15: MessageBus + spawn_teammate + inbox</text>
<rect x="310" y="632" width="12" height="10" rx="2" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1"/>
<text x="330" y="642" fill="#475569" font-size="10">s16: request_id プロトコル + dispatch + pending_requests + 状態機械</text>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Before After
Before After

163
web/public/course-assets/s16_team_protocols/team-protocols-overview.svg
View file

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 500" font-family="system-ui, -apple-system, sans-serif">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 660" font-family="system-ui, -apple-system, sans-serif">
<defs>
<linearGradient id="header" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#1e3a5f"/><stop offset="100%" stop-color="#7c3aed"/>
@ -9,9 +9,6 @@
<marker id="arrow-purple" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#7c3aed"/>
</marker>
<marker id="arrow-cyan" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#0891b2"/>
</marker>
<marker id="arrow-green" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#16a34a"/>
</marker>
@ -20,129 +17,125 @@
</marker>
</defs>
<rect width="760" height="500" fill="#fafbfc" rx="8"/>
<rect width="760" height="660" fill="#fafbfc" rx="8"/>
<!-- Title -->
<rect x="0" y="0" width="760" height="44" fill="url(#header)" rx="8"/>
<rect x="0" y="36" width="760" height="8" fill="url(#header)"/>
<text x="380" y="28" fill="#fff" font-size="15" font-weight="700" text-anchor="middle">Team Protocols — 请求-响应协议 + request_id 关联 + 状态机</text>
<!-- Legend -->
<rect x="40" y="56" width="12" height="10" rx="2" fill="#f0f4ff" stroke="#2563eb" stroke-width="1"/>
<text x="58" y="66" fill="#2563eb" font-size="10" font-weight="600">s15 保留</text>
<rect x="140" y="56" width="12" height="10" rx="2" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1"/>
<text x="158" y="66" fill="#7c3aed" font-size="10" font-weight="600">s16 新增</text>
<!-- ===== Row 1: Lead Loop ===== -->
<!-- Row 1: Lead Loop -->
<rect x="20" y="90" width="70" height="40" rx="8" fill="#eef2ff" stroke="#4f46e5" stroke-width="1.5"/>
<text x="55" y="114" fill="#4f46e5" font-size="8" font-weight="600" text-anchor="middle">turn</text>
<line x1="90" y1="110" x2="104" y2="110" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/>
<rect x="107" y="90" width="70" height="40" rx="8" fill="#f0f4ff" stroke="#2563eb" stroke-width="1.5"/>
<text x="142" y="114" fill="#1e3a5f" font-size="10" font-weight="600" text-anchor="middle">messages</text>
<line x1="177" y1="110" x2="191" y2="110" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/>
<rect x="194" y="86" width="80" height="48" rx="8" fill="#f0f4ff" stroke="#2563eb" stroke-width="1.5"/>
<text x="234" y="114" fill="#1e3a5f" font-size="9" font-weight="600" text-anchor="middle">prompt</text>
<line x1="274" y1="110" x2="288" y2="110" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/>
<rect x="291" y="86" width="70" height="48" rx="8" fill="#f0f4ff" stroke="#2563eb" stroke-width="1.5"/>
<text x="326" y="114" fill="#1e3a5f" font-size="9" font-weight="600" text-anchor="middle">LLM</text>
<line x1="361" y1="110" x2="375" y2="110" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/>
<rect x="378" y="80" width="356" height="60" rx="8" fill="#f0f4ff" stroke="#2563eb" stroke-width="1.5"/>
<text x="556" y="98" fill="#1e3a5f" font-size="10" font-weight="600" text-anchor="middle">TOOL DISPATCH（核心工具集）</text>
<text x="394" y="114" fill="#2563eb" font-size="8">bash · read · write · task(4) · spawn · send · inbox</text>
<text x="394" y="128" fill="#7c3aed" font-size="8" font-weight="700">★ request_shutdown · request_plan · review_plan</text>
<!-- Loop back -->
<path d="M 734 110 L 748 110 L 748 150 L 55 150 L 55 130" fill="none" stroke="#94a3b8" stroke-width="1" marker-end="url(#arrow)" stroke-dasharray="5,4"/>
<!-- ===== Row 2: Protocol Flow (purple) — request_id lifecycle ===== -->
<rect x="30" y="176" width="700" height="100" rx="8" fill="#f5f3ff" stroke="#7c3aed" stroke-width="2"/>
<text x="380" y="196" fill="#4c1d95" font-size="11" font-weight="700" text-anchor="middle">请求-响应协议流程（request_id 贯穿）</text>
<!-- Row 2: shutdown protocol -->
<rect x="30" y="176" width="700" height="90" rx="8" fill="#fef3c7" stroke="#d97706" stroke-width="1.5"/>
<text x="380" y="196" fill="#92400e" font-size="11" font-weight="700" text-anchor="middle">协议 A：shutdown 流程（Lead 发起 → 队友响应）</text>
<!-- Step 1: Send request -->
<rect x="50" y="208" width="130" height="52" rx="6" fill="#fff" stroke="#7c3aed" stroke-width="1"/>
<text x="115" y="226" fill="#7c3aed" font-size="9" font-weight="600" text-anchor="middle">① Lead 发请求</text>
<text x="115" y="240" fill="#6b7280" font-size="7" text-anchor="middle">BUS.send("shutdown_request"</text>
<text x="115" y="252" fill="#6b7280" font-size="7" text-anchor="middle">metadata={request_id})</text>
<rect x="50" y="208" width="180" height="46" rx="6" fill="#fff" stroke="#d97706" stroke-width="1"/>
<text x="140" y="226" fill="#92400e" font-size="9" font-weight="600" text-anchor="middle">① Lead: request_shutdown</text>
<text x="140" y="242" fill="#6b7280" font-size="7" text-anchor="middle">new_request_id() → ProtocolState</text>
<line x1="180" y1="234" x2="206" y2="234" stroke="#7c3aed" stroke-width="1.5" marker-end="url(#arrow-purple)"/>
<line x1="230" y1="231" x2="254" y2="231" stroke="#d97706" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- Step 2: Teammate receives & dispatches -->
<rect x="209" y="208" width="130" height="52" rx="6" fill="#fff" stroke="#7c3aed" stroke-width="1"/>
<text x="274" y="226" fill="#7c3aed" font-size="9" font-weight="600" text-anchor="middle">② 队友收到</text>
<text x="274" y="240" fill="#6b7280" font-size="7" text-anchor="middle">dispatch_by_type(inbox)</text>
<text x="274" y="252" fill="#6b7280" font-size="7" text-anchor="middle">→ handler(type, metadata)</text>
<rect x="257" y="208" width="180" height="46" rx="6" fill="#fff" stroke="#d97706" stroke-width="1"/>
<text x="347" y="226" fill="#92400e" font-size="9" font-weight="600" text-anchor="middle">② 队友: handle_shutdown</text>
<text x="347" y="242" fill="#6b7280" font-size="7" text-anchor="middle">ack → shutdown_response</text>
<line x1="339" y1="234" x2="365" y2="234" stroke="#7c3aed" stroke-width="1.5" marker-end="url(#arrow-purple)"/>
<line x1="437" y1="231" x2="461" y2="231" stroke="#d97706" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- Step 3: Teammate processes & responds -->
<rect x="368" y="208" width="130" height="52" rx="6" fill="#fff" stroke="#7c3aed" stroke-width="1"/>
<text x="433" y="226" fill="#7c3aed" font-size="9" font-weight="600" text-anchor="middle">③ 队友回复</text>
<text x="433" y="240" fill="#6b7280" font-size="7" text-anchor="middle">BUS.send("shutdown_response"</text>
<text x="433" y="252" fill="#6b7280" font-size="7" text-anchor="middle">同 request_id + approve)</text>
<rect x="464" y="208" width="180" height="46" rx="6" fill="#fff" stroke="#d97706" stroke-width="1"/>
<text x="554" y="226" fill="#92400e" font-size="9" font-weight="600" text-anchor="middle">③ Lead: consume_lead_inbox</text>
<text x="554" y="242" fill="#6b7280" font-size="7" text-anchor="middle">match_response(request_id) → ✓</text>
<line x1="498" y1="234" x2="524" y2="234" stroke="#7c3aed" stroke-width="1.5" marker-end="url(#arrow-purple)"/>
<!-- Row 3: plan approval protocol -->
<rect x="30" y="280" width="700" height="110" rx="8" fill="#dbeafe" stroke="#2563eb" stroke-width="1.5"/>
<text x="380" y="300" fill="#1e40af" font-size="11" font-weight="700" text-anchor="middle">协议 B：plan approval 流程（队友发起 → Lead 审批）</text>
<!-- Step 4: Lead receives response -->
<rect x="527" y="208" width="130" height="52" rx="6" fill="#fff" stroke="#7c3aed" stroke-width="1"/>
<text x="592" y="226" fill="#7c3aed" font-size="9" font-weight="600" text-anchor="middle">④ Lead 收响应</text>
<text x="592" y="240" fill="#6b7280" font-size="7" text-anchor="middle">match_response(request_id)</text>
<text x="592" y="252" fill="#6b7280" font-size="7" text-anchor="middle">→ resolve/reject callback</text>
<rect x="50" y="312" width="150" height="46" rx="6" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1"/>
<text x="125" y="330" fill="#475569" font-size="8" font-weight="600" text-anchor="middle">0. Lead: request_plan</text>
<text x="125" y="346" fill="#6b7280" font-size="7" text-anchor="middle">普通消息（msg_type="message"）</text>
<!-- ===== Row 3: State Machine + Storage ===== -->
<!-- State Machine -->
<rect x="30" y="296" width="340" height="85" rx="8" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1.5"/>
<text x="200" y="316" fill="#4c1d95" font-size="10" font-weight="700" text-anchor="middle">状态机（同一套，两种协议）</text>
<line x1="200" y1="335" x2="222" y2="335" stroke="#94a3b8" stroke-width="1" marker-end="url(#arrow)" stroke-dasharray="4,3"/>
<!-- pending box: center (84, 340), right edge x=113, bottom y=350 -->
<rect x="55" y="330" width="58" height="20" rx="4" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1"/>
<text x="84" y="344" fill="#475569" font-size="9" text-anchor="middle">pending</text>
<rect x="225" y="312" width="160" height="46" rx="6" fill="#fff" stroke="#2563eb" stroke-width="1"/>
<text x="305" y="330" fill="#1e40af" font-size="8" font-weight="600" text-anchor="middle">① 队友: submit_plan</text>
<text x="305" y="346" fill="#6b7280" font-size="7" text-anchor="middle">plan_approval_request + request_id</text>
<!-- approve: line from pending right (113,340) to approved left (192,340) -->
<line x1="113" y1="340" x2="192" y2="340" stroke="#16a34a" stroke-width="1.5" marker-end="url(#arrow-green)"/>
<text x="152" y="335" fill="#16a34a" font-size="8" font-weight="600" text-anchor="middle">approve</text>
<line x1="385" y1="335" x2="407" y2="335" stroke="#2563eb" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- approved box: left edge x=192 -->
<rect x="192" y="330" width="62" height="20" rx="4" fill="#dcfce7" stroke="#16a34a" stroke-width="1"/>
<text x="223" y="344" fill="#166534" font-size="9" text-anchor="middle">approved</text>
<rect x="410" y="312" width="160" height="46" rx="6" fill="#fff" stroke="#2563eb" stroke-width="1"/>
<text x="490" y="330" fill="#1e40af" font-size="8" font-weight="600" text-anchor="middle">② Lead: review_plan</text>
<text x="490" y="346" fill="#6b7280" font-size="7" text-anchor="middle">plan_approval_response</text>
<!-- reject: path from pending bottom (84,350) down to (84,368) then right to rejected left (128,368) -->
<path d="M 84 350 L 84 368 L 128 368" fill="none" stroke="#dc2626" stroke-width="1.5" marker-end="url(#arrow-red)"/>
<text x="76" y="362" fill="#dc2626" font-size="8" font-weight="600" text-anchor="end">reject</text>
<line x1="570" y1="335" x2="592" y2="335" stroke="#2563eb" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- rejected box: left edge x=128, top y=358 -->
<rect x="128" y="358" width="60" height="20" rx="4" fill="#fef2f2" stroke="#dc2626" stroke-width="1"/>
<text x="158" y="372" fill="#991b1b" font-size="9" text-anchor="middle">rejected</text>
<rect x="595" y="312" width="120" height="46" rx="6" fill="#fff" stroke="#2563eb" stroke-width="1"/>
<text x="655" y="330" fill="#1e40af" font-size="8" font-weight="600" text-anchor="middle">③ 队友: 收到结果</text>
<text x="655" y="346" fill="#6b7280" font-size="7" text-anchor="middle">[Plan approved/rejected]</text>
<!-- pending_requests storage -->
<rect x="400" y="296" width="330" height="85" rx="8" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1.5"/>
<text x="565" y="316" fill="#4c1d95" font-size="10" font-weight="700" text-anchor="middle">pending_requests 存储</text>
<text x="420" y="336" fill="#7c3aed" font-size="9">pending_requests: dict[str, ProtocolState]</text>
<text x="420" y="352" fill="#6b7280" font-size="8">request_id → {type, sender, status, created_at}</text>
<text x="420" y="368" fill="#6b7280" font-size="8">match_response: 按 request_id 找回对应请求</text>
<text x="380" y="380" fill="#6b7280" font-size="8" text-anchor="middle">request_plan 是普通消息不是协议；submit_plan 才是协议入口（由队友端创建 ProtocolState）</text>
<!-- ===== Row 4: Two protocols use same machine ===== -->
<rect x="30" y="396" width="700" height="48" rx="6" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
<text x="55" y="416" fill="#1e3a5f" font-size="10" font-weight="600">两种协议，同一套机制：</text>
<rect x="230" y="406" width="130" height="18" rx="4" fill="#fef3c7" stroke="#d97706" stroke-width="1"/>
<text x="295" y="419" fill="#92400e" font-size="9" text-anchor="middle">shutdown_request</text>
<text x="368" y="419" fill="#475569" font-size="10">和</text>
<rect x="390" y="406" width="140" height="18" rx="4" fill="#dbeafe" stroke="#2563eb" stroke-width="1"/>
<text x="460" y="419" fill="#1e40af" font-size="9" text-anchor="middle">plan_approval_request</text>
<text x="540" y="419" fill="#475569" font-size="10">共用 pending→approved/rejected 状态机</text>
<text x="55" y="436" fill="#6b7280" font-size="8">新增协议类型 = 新的 msg_type，不需要新状态机。request_id 关联请求和响应。</text>
<!-- Row 4: State Machine + Storage -->
<rect x="30" y="406" width="340" height="85" rx="8" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1.5"/>
<text x="200" y="426" fill="#4c1d95" font-size="10" font-weight="700" text-anchor="middle">状态机（同一套，两种协议共用）</text>
<!-- ===== Bottom notes ===== -->
<rect x="30" y="460" width="700" height="28" rx="6" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
<rect x="50" y="470" width="12" height="10" rx="2" fill="#f0f4ff" stroke="#2563eb" stroke-width="1"/>
<text x="70" y="480" fill="#475569" font-size="10">s15: MessageBus + spawn_teammate + inbox</text>
<rect x="310" y="470" width="12" height="10" rx="2" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1"/>
<text x="330" y="480" fill="#475569" font-size="10">s16: request_id 协议 + dispatch + pending_requests + 状态机</text>
<rect x="55" y="440" width="58" height="20" rx="4" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1"/>
<text x="84" y="454" fill="#475569" font-size="9" text-anchor="middle">pending</text>
<line x1="113" y1="450" x2="192" y2="450" stroke="#16a34a" stroke-width="1.5" marker-end="url(#arrow-green)"/>
<text x="152" y="445" fill="#16a34a" font-size="8" font-weight="600" text-anchor="middle">approve</text>
<rect x="192" y="440" width="62" height="20" rx="4" fill="#dcfce7" stroke="#16a34a" stroke-width="1"/>
<text x="223" y="454" fill="#166534" font-size="9" text-anchor="middle">approved</text>
<path d="M 84 460 L 84 478 L 128 478" fill="none" stroke="#dc2626" stroke-width="1.5" marker-end="url(#arrow-red)"/>
<text x="76" y="472" fill="#dc2626" font-size="8" font-weight="600" text-anchor="end">reject</text>
<rect x="128" y="468" width="60" height="20" rx="4" fill="#fef2f2" stroke="#dc2626" stroke-width="1"/>
<text x="158" y="482" fill="#991b1b" font-size="9" text-anchor="middle">rejected</text>
<rect x="400" y="406" width="330" height="85" rx="8" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1.5"/>
<text x="565" y="426" fill="#4c1d95" font-size="10" font-weight="700" text-anchor="middle">pending_requests 存储</text>
<text x="420" y="446" fill="#7c3aed" font-size="9">pending_requests: dict[str, ProtocolState]</text>
<text x="420" y="462" fill="#6b7280" font-size="8">request_id → {type, sender, status, created_at}</text>
<text x="420" y="478" fill="#6b7280" font-size="8">match_response: 按 request_id 找回对应请求</text>
<!-- Row 5: Two protocols same machine -->
<rect x="30" y="506" width="700" height="52" rx="6" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
<text x="55" y="524" fill="#1e3a5f" font-size="10" font-weight="600">两种协议，同一套机制：</text>
<rect x="230" y="512" width="130" height="18" rx="4" fill="#fef3c7" stroke="#d97706" stroke-width="1"/>
<text x="295" y="525" fill="#92400e" font-size="9" text-anchor="middle">shutdown_request</text>
<text x="368" y="525" fill="#475569" font-size="10">和</text>
<rect x="390" y="512" width="140" height="18" rx="4" fill="#dbeafe" stroke="#2563eb" stroke-width="1"/>
<text x="460" y="525" fill="#1e40af" font-size="9" text-anchor="middle">plan_approval_request</text>
<text x="55" y="548" fill="#6b7280" font-size="8">共用 pending → approved / rejected 状态机。新增协议类型 = 新的 msg_type，不需要新状态机。request_id 关联请求和响应。</text>
<!-- Row 6: distinguish -->
<rect x="30" y="570" width="700" height="38" rx="6" fill="#f0fdf4" stroke="#16a34a" stroke-width="1"/>
<text x="55" y="588" fill="#166534" font-size="9" font-weight="600">区分：</text>
<text x="100" y="588" fill="#475569" font-size="9">request_plan 是普通消息（msg_type="message"），由 lead 发送给队友提示去提交计划。</text>
<text x="55" y="602" fill="#475569" font-size="9">submit_plan 才是协议入口（msg_type="plan_approval_request"），由队友主动发起，携带 request_id 写入 pending_requests。</text>
<!-- Bottom notes -->
<rect x="30" y="622" width="700" height="28" rx="6" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
<rect x="50" y="632" width="12" height="10" rx="2" fill="#f0f4ff" stroke="#2563eb" stroke-width="1"/>
<text x="70" y="642" fill="#475569" font-size="10">s15: MessageBus + spawn_teammate + inbox</text>
<rect x="310" y="632" width="12" height="10" rx="2" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1"/>
<text x="330" y="642" fill="#475569" font-size="10">s16: request_id 协议 + dispatch + pending_requests + 状态机</text>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

120
web/public/course-assets/s21_workflow_runtime/workflow-runtime-overview.svg Normal file
View file

@ -0,0 +1,120 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 580" font-family="system-ui, -apple-system, sans-serif">
<defs>
<marker id="arrow-green" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#22c55e"/>
</marker>
<marker id="arrow-gray" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#888888"/>
</marker>
</defs>
<!-- Background -->
<rect width="960" height="580" rx="8" fill="#ffffff"/>
<!-- Title -->
<text x="480" y="30" text-anchor="middle" fill="#1a1a1a" font-size="19" font-weight="700">Workflow Runtime — one tool_use launches a background orchestration</text>
<text x="480" y="50" text-anchor="middle" fill="#888888" font-size="12">the main loop calls Workflow like any tool; a deterministic runtime fans out subagents in the background and can resume</text>
<!-- ===== Lane 1: Main session loop (canonical agent loop) ===== -->
<rect x="20" y="66" width="920" height="160" rx="8" fill="#ffffff" stroke="#d0d0d0" stroke-width="1.5" stroke-dasharray="6,3"/>
<text x="40" y="86" fill="#1a1a1a" font-size="13" font-weight="700">Main session loop</text>
<!-- loop-back over the top: back into messages[] -->
<path d="M 828 130 L 828 102 L 99 102 L 99 130" fill="none" stroke="#22c55e" stroke-width="1.5" stroke-dasharray="6,3" marker-end="url(#arrow-green)"/>
<text x="463" y="97" text-anchor="middle" fill="#22c55e" font-size="10" font-weight="600">append tool_result / notification -&gt; messages[] (loop continues)</text>
<circle cx="828" cy="130" r="3" fill="#22c55e"/>
<circle cx="99" cy="130" r="3" fill="#22c55e"/>
<!-- messages[] -->
<rect x="40" y="130" width="118" height="52" rx="6" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.5" stroke-dasharray="6,3"/>
<text x="99" y="152" text-anchor="middle" fill="#1a1a1a" font-size="12" font-weight="700" font-family="monospace">messages[]</text>
<text x="99" y="169" text-anchor="middle" fill="#888888" font-size="9">message history</text>
<line x1="158" y1="156" x2="176" y2="156" stroke="#22c55e" stroke-width="2" marker-end="url(#arrow-green)"/>
<!-- LLM -->
<rect x="178" y="130" width="86" height="52" rx="6" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.5"/>
<text x="221" y="152" text-anchor="middle" fill="#1a1a1a" font-size="13" font-weight="700">LLM</text>
<text x="221" y="169" text-anchor="middle" fill="#888888" font-size="9">tool_use?</text>
<line x1="264" y1="156" x2="282" y2="156" stroke="#22c55e" stroke-width="2" marker-end="url(#arrow-green)"/>
<!-- Workflow tool_use -->
<rect x="284" y="130" width="196" height="52" rx="6" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.5"/>
<text x="382" y="151" text-anchor="middle" fill="#1a1a1a" font-size="11" font-weight="700" font-family="monospace">Workflow({script, args})</text>
<text x="382" y="169" text-anchor="middle" fill="#888888" font-size="8.5" font-family="monospace">(or name | scriptPath) · resumeFromRunId</text>
<line x1="480" y1="156" x2="518" y2="156" stroke="#22c55e" stroke-width="2" marker-end="url(#arrow-green)"/>
<!-- tool_result -->
<rect x="520" y="130" width="156" height="52" rx="6" fill="#fafafa" stroke="#d0d0d0" stroke-width="1.5"/>
<text x="598" y="151" text-anchor="middle" fill="#1a1a1a" font-size="12" font-weight="700">tool_result</text>
<text x="598" y="169" text-anchor="middle" fill="#888888" font-size="9" font-family="monospace">async_launched</text>
<!-- later (dashed gap) -->
<line x1="676" y1="156" x2="734" y2="156" stroke="#888888" stroke-width="1.5" stroke-dasharray="5,3" marker-end="url(#arrow-gray)"/>
<text x="705" y="148" text-anchor="middle" fill="#888888" font-size="8">later</text>
<!-- task_notification -->
<rect x="738" y="130" width="180" height="52" rx="6" fill="#fafafa" stroke="#d0d0d0" stroke-width="1.5" stroke-dasharray="6,3"/>
<text x="828" y="151" text-anchor="middle" fill="#1a1a1a" font-size="12" font-weight="700">task_notification</text>
<text x="828" y="169" text-anchor="middle" fill="#888888" font-size="9">completed · final report</text>
<!-- ===== Lane 2: Background workflow runtime ===== -->
<rect x="20" y="270" width="920" height="244" rx="8" fill="#ffffff" stroke="#d0d0d0" stroke-width="1.5" stroke-dasharray="6,3"/>
<text x="40" y="290" fill="#1a1a1a" font-size="13" font-weight="700">Background workflow runtime — local_workflow</text>
<!-- spine: WorkflowTool.call -> LocalWorkflowTask -> Script VM -->
<rect x="44" y="316" width="158" height="66" rx="6" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.5"/>
<text x="123" y="338" text-anchor="middle" fill="#1a1a1a" font-size="11" font-weight="700" font-family="monospace">WorkflowTool.call</text>
<text x="123" y="355" text-anchor="middle" fill="#888888" font-size="9">validate meta · permission</text>
<text x="123" y="370" text-anchor="middle" fill="#888888" font-size="9" font-family="monospace">runId · taskId</text>
<line x1="202" y1="349" x2="220" y2="349" stroke="#22c55e" stroke-width="2" marker-end="url(#arrow-green)"/>
<rect x="222" y="316" width="158" height="66" rx="6" fill="#fafafa" stroke="#d0d0d0" stroke-width="1.5"/>
<text x="301" y="338" text-anchor="middle" fill="#1a1a1a" font-size="11" font-weight="700">LocalWorkflowTask</text>
<text x="301" y="355" text-anchor="middle" fill="#888888" font-size="9">status · usage</text>
<text x="301" y="370" text-anchor="middle" fill="#888888" font-size="9">progress events</text>
<line x1="380" y1="349" x2="398" y2="349" stroke="#22c55e" stroke-width="2" marker-end="url(#arrow-green)"/>
<rect x="400" y="316" width="200" height="66" rx="6" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.5" stroke-dasharray="6,3"/>
<text x="500" y="338" text-anchor="middle" fill="#1a1a1a" font-size="12" font-weight="700">Script VM — runs the script</text>
<text x="500" y="356" text-anchor="middle" fill="#888888" font-size="9.5" font-family="monospace">phase · agent()</text>
<text x="500" y="371" text-anchor="middle" fill="#888888" font-size="9.5" font-family="monospace">parallel · pipeline</text>
<!-- agent() cycle: VM -> Subagents -> Journal -> (resume) -> VM -->
<!-- Subagents (× N, fan-out: stacked) -->
<rect x="666" y="308" width="170" height="58" rx="6" fill="#f3f4f6" stroke="#d0d0d0" stroke-width="1.2"/>
<rect x="662" y="312" width="170" height="58" rx="6" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.5"/>
<text x="747" y="334" text-anchor="middle" fill="#1a1a1a" font-size="11" font-weight="700">Subagents × N</text>
<text x="747" y="350" text-anchor="middle" fill="#888888" font-size="9">isolated ctx</text>
<text x="747" y="363" text-anchor="middle" fill="#888888" font-size="9">schema output</text>
<!-- Journal -->
<rect x="662" y="420" width="170" height="58" rx="6" fill="#fafafa" stroke="#d0d0d0" stroke-width="1.5"/>
<text x="747" y="442" text-anchor="middle" fill="#1a1a1a" font-size="11" font-weight="700">Journal</text>
<text x="747" y="458" text-anchor="middle" fill="#888888" font-size="9" font-family="monospace">started / result</text>
<text x="747" y="471" text-anchor="middle" fill="#888888" font-size="9" font-family="monospace">per agent()</text>
<!-- VM -> Subagents: agent() spawns -->
<line x1="600" y1="341" x2="660" y2="341" stroke="#22c55e" stroke-width="2" marker-end="url(#arrow-green)"/>
<text x="630" y="333" text-anchor="middle" fill="#22c55e" font-size="9" font-weight="600">agent()</text>
<text x="630" y="356" text-anchor="middle" fill="#888888" font-size="8">spawns</text>
<!-- Subagents -> Journal: record -->
<line x1="747" y1="370" x2="747" y2="418" stroke="#22c55e" stroke-width="2" marker-end="url(#arrow-green)"/>
<text x="757" y="398" fill="#22c55e" font-size="9" font-weight="600">record</text>
<!-- Journal -> Script VM: resume cached -->
<path d="M 662 449 L 500 449 L 500 382" fill="none" stroke="#888888" stroke-width="1.5" stroke-dasharray="5,3" marker-end="url(#arrow-gray)"/>
<text x="556" y="443" text-anchor="middle" fill="#888888" font-size="9" font-weight="600">resumeFromRunId -&gt; cached agent()</text>
<!-- ===== Cross arrows between lanes ===== -->
<!-- launch (outer Workflow tool_use -> inner runtime), left side -->
<path d="M 382 182 L 382 248 L 123 248 L 123 316" fill="none" stroke="#22c55e" stroke-width="1.5" stroke-dasharray="6,3" marker-end="url(#arrow-green)"/>
<text x="152" y="242" fill="#22c55e" font-size="9" font-weight="600">launch (async)</text>
<!-- progress / notification (inner task -> outer notification), routed just below launch -->
<path d="M 301 316 L 301 256 L 828 256 L 828 182" fill="none" stroke="#888888" stroke-width="1.5" stroke-dasharray="5,3" marker-end="url(#arrow-gray)"/>
<text x="600" y="250" text-anchor="middle" fill="#888888" font-size="9" font-weight="600">task_progress: workflow_phase · workflow_agent · workflow_log</text>
<!-- ===== Bottom note ===== -->
<text x="480" y="548" text-anchor="middle" fill="#888888" font-size="10">The runtime result stays on the task (scriptPath · transcripts · journal · output) — only the launch + final notification re-enter messages[].</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 9.1 KiB

109
web/public/course-assets/s22_goal_loop/goal-loop-overview.svg Normal file
View file

@ -0,0 +1,109 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 540" font-family="system-ui, -apple-system, sans-serif">
<defs>
<marker id="arrow-green" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#22c55e"/>
</marker>
<marker id="arrow-gray" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#888888"/>
</marker>
</defs>
<!-- Background -->
<rect width="960" height="540" rx="8" fill="#ffffff"/>
<!-- Title -->
<text x="480" y="30" text-anchor="middle" fill="#1a1a1a" font-size="19" font-weight="700">Goal Loop — the host-owned turn-completion gate</text>
<text x="480" y="50" text-anchor="middle" fill="#888888" font-size="12">after every turn an evaluator judges trusted evidence and blocks the stop until the goal is met</text>
<!-- ===== Main loop container ===== -->
<rect x="20" y="66" width="920" height="156" rx="8" fill="#ffffff" stroke="#d0d0d0" stroke-width="1.5" stroke-dasharray="6,3"/>
<text x="40" y="86" fill="#1a1a1a" font-size="13" font-weight="700">Main loop — the turn boundary</text>
<!-- loop-back over the top: continuation -> messages[] -->
<path d="M 910 350 L 910 104 L 101 104 L 101 130" fill="none" stroke="#22c55e" stroke-width="1.5" stroke-dasharray="6,3" marker-end="url(#arrow-green)"/>
<text x="500" y="99" text-anchor="middle" fill="#22c55e" font-size="10" font-weight="600">continuation -&gt; transcript[] (next turn)</text>
<circle cx="101" cy="130" r="3" fill="#22c55e"/>
<!-- transcript[] -->
<rect x="40" y="130" width="122" height="52" rx="6" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.5" stroke-dasharray="6,3"/>
<text x="101" y="152" text-anchor="middle" fill="#1a1a1a" font-size="12" font-weight="700" font-family="monospace">transcript[]</text>
<text x="101" y="169" text-anchor="middle" fill="#888888" font-size="9">messages + origins</text>
<line x1="162" y1="156" x2="180" y2="156" stroke="#22c55e" stroke-width="2" marker-end="url(#arrow-green)"/>
<!-- turn (LLM) -->
<rect x="182" y="130" width="108" height="52" rx="6" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.5"/>
<text x="236" y="152" text-anchor="middle" fill="#1a1a1a" font-size="12" font-weight="700">turn (LLM)</text>
<text x="236" y="169" text-anchor="middle" fill="#888888" font-size="9">may emit tool_use</text>
<line x1="290" y1="156" x2="308" y2="156" stroke="#22c55e" stroke-width="2" marker-end="url(#arrow-green)"/>
<!-- no tool_use -->
<rect x="310" y="130" width="118" height="52" rx="6" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.5"/>
<text x="369" y="152" text-anchor="middle" fill="#1a1a1a" font-size="12" font-weight="700">no tool_use</text>
<text x="369" y="169" text-anchor="middle" fill="#888888" font-size="9">(wants to stop)</text>
<line x1="428" y1="156" x2="446" y2="156" stroke="#22c55e" stroke-width="2" marker-end="url(#arrow-green)"/>
<!-- goal gate (emphasis: thicker border) -->
<rect x="448" y="124" width="170" height="64" rx="6" fill="#ffffff" stroke="#1a1a1a" stroke-width="2.4"/>
<text x="533" y="146" text-anchor="middle" fill="#1a1a1a" font-size="12" font-weight="700">goal gate</text>
<text x="533" y="163" text-anchor="middle" fill="#888888" font-size="9.5" font-family="monospace">evaluate_after_turn()</text>
<text x="533" y="177" text-anchor="middle" fill="#888888" font-size="8.5">after every turn</text>
<!-- gate -> return (stop): gray -->
<line x1="618" y1="156" x2="664" y2="156" stroke="#888888" stroke-width="1.5" marker-end="url(#arrow-gray)"/>
<text x="641" y="148" text-anchor="middle" fill="#888888" font-size="8.5">completed</text>
<text x="641" y="178" text-anchor="middle" fill="#888888" font-size="8.5">/ blocked</text>
<!-- return -->
<rect x="666" y="130" width="120" height="52" rx="6" fill="#fafafa" stroke="#d0d0d0" stroke-width="1.5"/>
<text x="726" y="152" text-anchor="middle" fill="#1a1a1a" font-size="12" font-weight="700">return</text>
<text x="726" y="169" text-anchor="middle" fill="#888888" font-size="9">turn ends</text>
<!-- ===== gate consults: evaluator -> evidence ===== -->
<!-- gate -> evaluator (judge) -->
<line x1="500" y1="188" x2="500" y2="248" stroke="#22c55e" stroke-width="2" marker-end="url(#arrow-green)"/>
<text x="510" y="222" fill="#22c55e" font-size="9" font-weight="600">judge</text>
<rect x="416" y="250" width="168" height="50" rx="6" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.5"/>
<text x="500" y="272" text-anchor="middle" fill="#1a1a1a" font-size="12" font-weight="700">evaluator</text>
<text x="500" y="289" text-anchor="middle" fill="#888888" font-size="9">separate small / fast model</text>
<!-- evaluator -> evidence (reads) -->
<line x1="500" y1="300" x2="500" y2="338" stroke="#22c55e" stroke-width="2" marker-end="url(#arrow-green)"/>
<text x="510" y="324" fill="#22c55e" font-size="9" font-weight="600">reads</text>
<!-- evidence trust boundary container -->
<rect x="40" y="340" width="606" height="156" rx="8" fill="#ffffff" stroke="#d0d0d0" stroke-width="1.5" stroke-dasharray="6,3"/>
<text x="60" y="361" fill="#1a1a1a" font-size="12" font-weight="700">evidence window</text>
<text x="188" y="361" fill="#888888" font-size="10" font-family="monospace">= transcript[start_index:] · trust boundary</text>
<!-- trusted -->
<rect x="62" y="376" width="270" height="104" rx="6" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.5"/>
<text x="197" y="399" text-anchor="middle" fill="#1a1a1a" font-size="11" font-weight="700">counts as evidence</text>
<text x="197" y="424" text-anchor="middle" fill="#1a1a1a" font-size="11" font-family="monospace">task-notification</text>
<text x="197" y="446" text-anchor="middle" fill="#1a1a1a" font-size="11" font-family="monospace">monitor-line</text>
<text x="197" y="468" text-anchor="middle" fill="#888888" font-size="8.5">trusted async origins</text>
<!-- untrusted -->
<rect x="354" y="376" width="270" height="104" rx="6" fill="#fafafa" stroke="#d0d0d0" stroke-width="1.5"/>
<text x="489" y="399" text-anchor="middle" fill="#888888" font-size="11" font-weight="700">filtered out</text>
<text x="489" y="421" text-anchor="middle" fill="#888888" font-size="10">/goal command text</text>
<text x="489" y="439" text-anchor="middle" fill="#888888" font-size="10">continuation reminder</text>
<text x="489" y="457" text-anchor="middle" fill="#888888" font-size="10">plain user / assistant</text>
<text x="489" y="475" text-anchor="middle" fill="#888888" font-size="8.5">model can't self-satisfy</text>
<!-- ===== continuing -> CommandQueue -> loop back ===== -->
<!-- gate -> CommandQueue (continuing) -->
<path d="M 600 188 L 600 230 L 786 230 L 786 322" fill="none" stroke="#22c55e" stroke-width="2" marker-end="url(#arrow-green)"/>
<text x="700" y="223" text-anchor="middle" fill="#22c55e" font-size="9" font-weight="600">continuing</text>
<!-- CommandQueue (mutable: dashed black) -->
<rect x="696" y="324" width="180" height="56" rx="6" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.5" stroke-dasharray="6,3"/>
<text x="786" y="347" text-anchor="middle" fill="#1a1a1a" font-size="11" font-weight="700">CommandQueue</text>
<text x="786" y="364" text-anchor="middle" fill="#888888" font-size="9" font-family="monospace">continuation (active-goal)</text>
<!-- CommandQueue -> loop back (up the right edge, joins the over-top path) -->
<line x1="876" y1="350" x2="908" y2="350" stroke="#22c55e" stroke-width="1.5" stroke-dasharray="6,3"/>
<!-- ===== Bottom note ===== -->
<text x="480" y="520" text-anchor="middle" fill="#888888" font-size="10">The model proposes stop; the goal gate decides against trusted evidence only, not the model's own say-so.</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.7 KiB

4
web/scripts/extract-content.ts
View file

@ -166,7 +166,7 @@ function copyChapterAssets(chapter: ChapterSource): ChapterImage[] {
}
function localeReadmeName(locale: Locale): string {
if (locale === "zh") return "README.md";
if (locale === "en") return "README.md";
return `README.${locale}.md`;
}
@ -178,7 +178,7 @@ function rewriteChapterMarkdown(
let next = content;
next = next.replace(
/^\[中文\]\(README\.md\)\s*.\s*\[English\]\(README\.en\.md\)\s*.\s*\[日本語\]\(README\.ja\.md\)\n\n?/m,
/^\[English\]\(README\.md\)\s*.\s*\[中文\]\(README\.zh\.md\)\s*.\s*\[日本語\]\(README\.ja\.md\)\n\n?/m,
""
);

4
web/src/components/architecture/design-decisions.tsx
View file

@ -26,6 +26,8 @@ import s17Annotations from "@/data/annotations/s17.json";
import s18Annotations from "@/data/annotations/s18.json";
import s19Annotations from "@/data/annotations/s19.json";
import s20Annotations from "@/data/annotations/s20.json";
import s21Annotations from "@/data/annotations/s21.json";
import s22Annotations from "@/data/annotations/s22.json";
interface Decision {
id: string;
@ -62,6 +64,8 @@ const ANNOTATIONS: Record<string, AnnotationFile> = {
s18: s18Annotations as AnnotationFile,
s19: s19Annotations as AnnotationFile,
s20: s20Annotations as AnnotationFile,
s21: s21Annotations as AnnotationFile,
s22: s22Annotations as AnnotationFile,
};
interface DesignDecisionsProps {

2
web/src/components/simulator/agent-loop-simulator.tsx
View file

@ -29,6 +29,8 @@ const scenarioModules: Record<string, () => Promise<{ default: Scenario }>> = {
s18: () => import("@/data/scenarios/s18.json") as Promise<{ default: Scenario }>,
s19: () => import("@/data/scenarios/s19.json") as Promise<{ default: Scenario }>,
s20: () => import("@/data/scenarios/s20.json") as Promise<{ default: Scenario }>,
s21: () => import("@/data/scenarios/s21.json") as Promise<{ default: Scenario }>,
s22: () => import("@/data/scenarios/s22.json") as Promise<{ default: Scenario }>,
};
interface AgentLoopSimulatorProps {

2
web/src/components/visualizations/s09-memory.tsx
View file

@ -34,7 +34,7 @@ const MEMORY_FILES: MemoryFile[] = [
title: "LCC web paths",
filename: "lcc_web_paths.md",
description: "Web app reads root lesson folders and generated JSON.",
body: "Build from web/, extract content from s01-s20 lesson directories.",
body: "Build from web/, extract content from the root lesson directories.",
},
{
id: "test-command",

12
web/src/data/annotations/s10.json
View file

@ -3,16 +3,16 @@
"decisions": [
{
"id": "prompt-from-state",
"title": "The System Prompt Is Built from Runtime State",
"description": "Prompt sections are selected from real state: workspace, available tools, memory, and skills. The prompt becomes a product of the runtime rather than a single hardcoded string.",
"title": "Model Input Is Built from Runtime State",
"description": "Stable prompt sections and dynamic state are assembled at the model boundary: workspace, available tools, memory, and skills. Model input becomes a product of the runtime rather than a single hardcoded string.",
"alternatives": "A static prompt is easier to inspect, but it goes stale as capabilities change.",
"zh": {
"title": "系统提示词由运行时状态构建",
"description": "Prompt section 来自真实状态：workspace、可用工具、memory 和 skills。提示词是运行时的产物，而不是单个硬编码字符串。"
"title": "模型输入由运行时状态构建",
"description": "稳定 prompt section 与动态状态在模型边界组装：workspace、可用工具、memory 和 skills。模型输入是运行时的产物，而不是单个硬编码字符串。"
},
"ja": {
"title": "システムプロンプトはランタイム状態から作る",
"description": "workspace、利用可能ツール、memory、skills などの実状態から prompt section を選びます。プロンプトは単一の固定文字列ではなくランタイムの産物です。"
"title": "モデル入力はランタイム状態から作る",
"description": "安定した prompt section と workspace、利用可能ツール、memory、skills などの動的状態をモデル境界で組み立てます。モデル入力は単一の固定文字列ではなくランタイムの産物です。"
}
},
{

14
web/src/data/annotations/s17.json
View file

@ -31,16 +31,16 @@
},
{
"id": "identity-reinjection",
"title": "Identity Is Re-injected on Each Autonomous Turn",
"description": "Autonomous agents need a stable sense of who they are and what they are allowed to do. Re-injecting identity keeps a teammate from drifting into the lead's responsibilities.",
"alternatives": "A one-time identity prompt is shorter, but long-running loops are prone to context drift.",
"title": "Advanced Teaching Workaround: Identity Re-injection",
"description": "The simplified lesson re-injects identity after its compaction heuristic. This is optional teaching scaffolding; production compaction should preserve stable system instructions instead.",
"alternatives": "Keep identity in stable system instructions and preserve that boundary through compaction.",
"zh": {
"title": "每个自治回合都重新注入身份",
"description": "自治 agent 需要稳定知道自己是谁、允许做什么。重新注入身份可以防止队友逐渐漂移到 lead 的职责上。"
"title": "进阶教学补丁：身份重注入",
"description": "简化课程在压缩启发式触发后重新注入身份。这是选学脚手架；生产实现应在压缩时保留稳定的 system 指令。"
},
"ja": {
"title": "各自律ターンでアイデンティティを再注入する",
"description": "自律エージェントには、自分が誰で何を許可されているかという安定した認識が必要です。アイデンティティを再注入することで、チームメイトがリードの責務へ漂うことを防ぎます。"
"title": "発展用の教育補助：アイデンティティ再注入",
"description": "簡略化した教材は圧縮ヒューリスティック後にアイデンティティを再注入します。これは任意の足場であり、本番実装では圧縮を越えて安定した system 指示を保持すべきです。"
}
}
]

47
web/src/data/annotations/s21.json Normal file
View file

@ -0,0 +1,47 @@
{
"version": "s21",
"decisions": [
{
"id": "script-owns-fixed-orchestration",
"title": "Code Owns Fixed Orchestration",
"description": "When the stages and aggregation rules are known in advance, a workflow script makes the process parallel, reproducible, and inspectable without changing the main agent loop.",
"alternatives": "Letting the model choose every next step is more flexible, but slower and harder to resume for a fixed procedure.",
"zh": {
"title": "固定编排由代码负责",
"description": "当阶段与汇总规则事先确定时，workflow 脚本能让流程并行、可复现、可检查，同时不修改主 Agent 循环。"
},
"ja": {
"title": "固定された編成はコードが担う",
"description": "段階と集約ルールが事前に決まっているなら、workflow script は main Agent loop を変えずに処理を並列化し、再現可能で検査可能にする。"
}
},
{
"id": "semantic-journal-keys",
"title": "Semantic Keys Make Resume Independent of Completion Order",
"description": "Journal entries use stable call content rather than a shared completion counter. Concurrent calls can finish in any order and still map to the correct cached result.",
"alternatives": "Indexing by completion order is simpler, but replays the wrong result as soon as concurrent timing changes.",
"zh": {
"title": "语义键让恢复不依赖完成顺序",
"description": "Journal 用稳定的调用内容作为 key，而不是共享完成计数器。并发调用无论以什么顺序结束，都能命中正确缓存。"
},
"ja": {
"title": "意味キーで完了順序に依存せず再開する",
"description": "Journal は共有完了カウンタではなく安定した call 内容を key にする。並行 call の終了順が変わっても正しい cache result に対応できる。"
}
},
{
"id": "fail-the-workflow",
"title": "Orchestration Failures Propagate",
"description": "A failed stage, invalid structured result, corrupt journal, or exceeded run-wide limit fails the workflow instead of silently dropping an item and reporting success.",
"alternatives": "Best-effort collection can be useful for optional work, but it must be explicit rather than the default.",
"zh": {
"title": "编排故障必须向上传播",
"description": "阶段失败、结构化结果不合法、journal 损坏或超过全局限制时，workflow 直接失败，而不是静默丢项后仍报告成功。"
},
"ja": {
"title": "編成の失敗は上位へ伝播させる",
"description": "stage failure、無効な structured result、破損 journal、run-wide limit 超過は workflow を失敗させ、項目を黙って落として成功扱いしない。"
}
}
]
}

47
web/src/data/annotations/s22.json Normal file
View file

@ -0,0 +1,47 @@
{
"version": "s22",
"decisions": [
{
"id": "host-owns-completion-gate",
"title": "The Host Owns the Completion Gate",
"description": "The working model may request to stop, but the harness evaluates the active goal before returning. Completion is a program decision at the turn boundary.",
"alternatives": "Asking the working model whether it is finished is simpler, but lets the same actor make and verify its own claim.",
"zh": {
"title": "完成闸门由宿主持有",
"description": "工作模型可以请求停止，但 harness 会在 return 前评估 active goal。是否完成是轮次边界上的程序决策。"
},
"ja": {
"title": "完了ゲートはホストが所有する",
"description": "作業モデルは停止を要求できるが、harness は return 前に active goal を評価する。完了は turn 境界でのプログラム判断である。"
}
},
{
"id": "host-assigned-evidence-origins",
"title": "Evidence Trust Comes from the Ingress Path",
"description": "Ordinary submit calls cannot attach trusted labels. Only an allowlisted host-event channel can deliver task or monitor evidence, so user and model prose cannot certify itself.",
"alternatives": "Trusting text content or caller-supplied labels makes the evidence boundary forgeable.",
"zh": {
"title": "证据信任来自入口路径",
"description": "普通 submit 不能附加可信标签；只有白名单宿主事件通道能送入 task 或 monitor 证据，因此用户与模型文本不能自证完成。"
},
"ja": {
"title": "証拠の信頼は入力経路から得る",
"description": "通常の submit は trusted label を付けられず、allowlist 済み host event channel だけが task や monitor evidence を届ける。ユーザーやモデルの文章は自己証明できない。"
}
},
{
"id": "bounded-continuation",
"title": "Every Automatic Continuation Needs a Budget",
"description": "An unmet goal queues another turn only while budget remains. Exhaustion marks the goal blocked and releases the gate instead of creating an infinite loop.",
"alternatives": "An unbounded goal is persistent, but an impossible condition can consume resources forever.",
"zh": {
"title": "每次自动续轮都必须有预算",
"description": "目标未满足时只在预算剩余时继续；耗尽后将目标标记为 blocked 并释放闸门，避免无限循环。"
},
"ja": {
"title": "自動継続には必ず予算を置く",
"description": "goal 未達時は予算が残る間だけ次の turn を追加する。使い切れば blocked にして gate を解放し、無限 loop を防ぐ。"
}
}
]
}

50
web/src/data/execution-flows.ts
View file

@ -541,6 +541,56 @@ export const EXECUTION_FLOWS: Record<string, FlowDefinition> = {
{ from: "recover", to: "context" },
],
},
s21: {
nodes: [
{ id: "start", label: "Workflow Tool Call", type: "start", x: COL_CENTER, y: 30 },
{ id: "validate", label: "Validate Meta +\nPermission", type: "process", x: COL_CENTER, y: 120 },
{ id: "launch", label: "async_launched", type: "process", x: COL_CENTER, y: 210 },
{ id: "phase", label: "Select Phase", type: "process", x: COL_CENTER, y: 300 },
{ id: "pipeline", label: "Pipeline /\nParallel Agents", type: "subprocess", x: COL_LEFT, y: 410 },
{ id: "journal", label: "Append Journal", type: "process", x: COL_LEFT, y: 520 },
{ id: "more", label: "More Stages?", type: "decision", x: COL_CENTER, y: 620 },
{ id: "output", label: "Write Output", type: "process", x: COL_RIGHT, y: 520 },
{ id: "notify", label: "task_notification", type: "end", x: COL_RIGHT, y: 620 },
],
edges: [
{ from: "start", to: "validate" },
{ from: "validate", to: "launch" },
{ from: "launch", to: "phase" },
{ from: "phase", to: "pipeline" },
{ from: "pipeline", to: "journal" },
{ from: "journal", to: "more" },
{ from: "more", to: "phase", label: "yes" },
{ from: "more", to: "output", label: "no" },
{ from: "output", to: "notify" },
],
},
s22: {
nodes: [
{ id: "start", label: "Model Wants to Stop", type: "start", x: COL_CENTER, y: 30 },
{ id: "active", label: "Active Goal?", type: "decision", x: COL_CENTER, y: 120 },
{ id: "evidence", label: "Read Trusted\nEvidence Window", type: "process", x: COL_CENTER, y: 220 },
{ id: "evaluate", label: "Goal Satisfied?", type: "decision", x: COL_CENTER, y: 320 },
{ id: "complete", label: "goal_completed", type: "end", x: COL_RIGHT, y: 430 },
{ id: "budget", label: "Budget Left?", type: "decision", x: COL_LEFT, y: 430 },
{ id: "continue", label: "Queue Goal\nContinuation", type: "process", x: COL_LEFT, y: 540 },
{ id: "loop", label: "Next Agent Turn", type: "subprocess", x: COL_LEFT, y: 650 },
{ id: "blocked", label: "goal_blocked", type: "end", x: COL_CENTER, y: 540 },
{ id: "return", label: "Return", type: "end", x: COL_RIGHT, y: 120 },
],
edges: [
{ from: "start", to: "active" },
{ from: "active", to: "return", label: "no" },
{ from: "active", to: "evidence", label: "yes" },
{ from: "evidence", to: "evaluate" },
{ from: "evaluate", to: "complete", label: "yes" },
{ from: "evaluate", to: "budget", label: "no" },
{ from: "budget", to: "continue", label: "yes" },
{ from: "budget", to: "blocked", label: "no" },
{ from: "continue", to: "loop" },
{ from: "loop", to: "start" },
],
},
};
const CURRENT_FLOW_OVERRIDES: Record<string, FlowDefinition> = {

174
web/src/data/generated/docs.json
View file

File diff suppressed because one or more lines are too long

831
web/src/data/generated/versions.json
View file

File diff suppressed because one or more lines are too long

4
web/src/data/scenarios/s10.json
View file

@ -1,7 +1,7 @@
{
"version": "s10",
"title": "System Prompt",
"description": "The system prompt is assembled from runtime state and cached by a deterministic context key.",
"title": "Context Assembly",
"description": "Stable instructions and dynamic runtime state are assembled at the model boundary and cached by a deterministic context key.",
"steps": [
{
"type": "system_event",

4
web/src/data/scenarios/s15.json
View file

@ -1,7 +1,7 @@
{
"version": "s15",
"title": "Agent Teams",
"description": "A lead agent can spawn teammate loops and coordinate through file-backed mailboxes.",
"title": "Agent Teams: Runtime Lab",
"description": "The first Agent Teams lab builds persistent teammate loops and file-backed mailboxes.",
"steps": [
{
"type": "user_message",

4
web/src/data/scenarios/s16.json
View file

@ -1,7 +1,7 @@
{
"version": "s16",
"title": "Team Protocols",
"description": "Typed requests, request ids, and response matching turn team chat into a protocol.",
"title": "Agent Teams: Protocol Lab",
"description": "The second Agent Teams lab adds typed requests, request ids, and response matching to the s15 runtime.",
"steps": [
{
"type": "user_message",

43
web/src/data/scenarios/s21.json Normal file
View file

@ -0,0 +1,43 @@
{
"version": "s21",
"title": "Workflow Runtime",
"description": "A fixed review pipeline runs in parallel, records a journal, and resumes completed agent calls from cache.",
"steps": [
{
"type": "user_message",
"content": "Review this change across correctness, security, performance, and style.",
"annotation": "The goal is open-ended, but the review procedure has a fixed shape."
},
{
"type": "tool_call",
"toolName": "Workflow",
"content": "{\"name\":\"review-changes\",\"phases\":[\"Review\",\"Verify\"]}",
"annotation": "One tool call hands deterministic orchestration to the workflow runtime."
},
{
"type": "tool_result",
"content": "{\"status\":\"async_launched\",\"runId\":\"wf_review-changes_6779\"}",
"annotation": "The product runtime returns a claim ticket while work continues in the background."
},
{
"type": "system_event",
"content": "phase=Review -> pipeline([correctness, security, performance, style])",
"annotation": "Each item advances independently through the scripted stages."
},
{
"type": "system_event",
"content": "phase=Verify -> adversarial checks run in parallel",
"annotation": "Structured results cross a validation boundary before aggregation."
},
{
"type": "system_event",
"content": "journal append -> task_notification(status=completed)",
"annotation": "Every completed agent call is checkpointed before the final notification."
},
{
"type": "system_event",
"content": "resumeFromRunId -> unchanged calls status=cached",
"annotation": "Semantic keys reuse completed work without depending on concurrency order."
}
]
}

37
web/src/data/scenarios/s22.json Normal file
View file

@ -0,0 +1,37 @@
{
"version": "s22",
"title": "Goal Loop",
"description": "A host-owned completion gate keeps the turn alive until trusted evidence satisfies the active goal.",
"steps": [
{
"type": "user_message",
"content": "/goal until tests passed and deploy green",
"annotation": "The command defines the condition but sits outside the evidence window."
},
{
"type": "system_event",
"content": "goal_started -> evidence window reset",
"annotation": "The harness, not the working model, owns the completion gate."
},
{
"type": "assistant_text",
"content": "Tests passed and deployment is green.",
"annotation": "Assistant prose is not trusted completion evidence."
},
{
"type": "system_event",
"content": "goal_evaluated satisfied=false -> continuation queued",
"annotation": "An unmet condition pushes the loop into another bounded turn."
},
{
"type": "tool_result",
"content": "<task_notification>tests passed; deploy green</task_notification>",
"annotation": "Only an allowlisted host event can attach a trusted evidence origin."
},
{
"type": "system_event",
"content": "goal_evaluated satisfied=true -> goal_completed",
"annotation": "Trusted evidence closes the goal and releases the stop gate."
}
]
}

24
web/src/i18n/messages/en.json
View file

@ -1,10 +1,10 @@
{
"meta": { "title": "Learn Claude Code", "description": "Build a nano Claude Code-like agent from 0 to 1, one mechanism at a time" },
"nav": { "home": "Home", "timeline": "Timeline", "compare": "Compare", "layers": "Layers", "github": "GitHub" },
"home": { "hero_title": "Learn Claude Code", "hero_subtitle": "Build a nano Claude Code-like agent from 0 to 1, one mechanism at a time", "start": "Start Learning", "core_pattern": "The Core Pattern", "core_pattern_desc": "Every AI coding agent shares the same loop: call the model, execute tools, feed results back. Production systems add policy, permissions, and lifecycle layers on top.", "learning_path": "Learning Path", "learning_path_desc": "20 progressive sessions, from a simple loop to a complete multi-agent harness", "layers_title": "Architectural Layers", "layers_desc": "Five orthogonal concerns that compose into a complete agent", "loc": "LOC", "learn_more": "Learn More", "versions_in_layer": "versions", "message_flow": "Message Growth", "message_flow_desc": "Watch the messages array grow as the agent loop executes" },
"home": { "hero_title": "Learn Claude Code", "hero_subtitle": "Build a nano Claude Code-like agent from 0 to 1, one mechanism at a time", "start": "Start Learning", "core_pattern": "The Core Pattern", "core_pattern_desc": "Every AI coding agent shares the same loop: call the model, execute tools, feed results back. Production systems add policy, permissions, and lifecycle layers on top.", "learning_path": "Learning Path", "learning_path_desc": "22 progressive sessions, from a simple loop to deterministic orchestration and goal closure", "layers_title": "Architectural Layers", "layers_desc": "Five orthogonal concerns that compose into a complete agent", "loc": "LOC", "learn_more": "Learn More", "versions_in_layer": "versions", "message_flow": "Message Growth", "message_flow_desc": "Watch the messages array grow as the agent loop executes" },
"version": { "loc": "lines of code", "tools": "tools", "new": "New", "prev": "Previous", "next": "Next", "view_source": "View Source", "view_diff": "View Diff", "design_decisions": "Design Decisions", "whats_new": "What's New", "tutorial": "Tutorial", "simulator": "Agent Loop Simulator", "execution_flow": "Execution Flow", "architecture": "Architecture", "concept_viz": "Concept Visualization", "alternatives": "Alternatives Considered", "tab_learn": "Learn", "tab_simulate": "Simulate", "tab_code": "Code", "tab_deep_dive": "Deep Dive" },
"sim": { "play": "Play", "pause": "Pause", "step": "Step", "reset": "Reset", "speed": "Speed", "step_of": "of" },
"timeline": { "title": "Learning Path", "subtitle": "s01 to s20: Progressive Agent Harness Design", "layer_legend": "Layer Legend", "loc_growth": "LOC Growth", "learn_more": "Learn More" },
"timeline": { "title": "Learning Path", "subtitle": "s01 to s22: Progressive Agent Harness Design", "layer_legend": "Layer Legend", "loc_growth": "LOC Growth", "learn_more": "Learn More" },
"layers": {
"title": "Architectural Layers",
"subtitle": "Five orthogonal concerns that compose into a complete agent",
@ -48,17 +48,19 @@
"s07": "Skills",
"s08": "Context Compact",
"s09": "Memory",
"s10": "System Prompt",
"s10": "Context Assembly",
"s11": "Error Recovery",
"s12": "Task System",
"s13": "Background Tasks",
"s14": "Cron Scheduler",
"s15": "Agent Teams",
"s16": "Team Protocols",
"s15": "Agent Teams: Runtime Lab",
"s16": "Agent Teams: Protocol Lab",
"s17": "Autonomous Agents",
"s18": "Worktree Isolation",
"s19": "MCP Tools",
"s20": "Comprehensive Agent Turn"
"s20": "Comprehensive Agent Turn",
"s21": "Workflow Runtime",
"s22": "Goal Loop"
},
"layer_labels": {
"tools": "Tools & Execution",
@ -77,16 +79,18 @@
"s07": "On-Demand Skill Loading",
"s08": "Three-Layer Context Compression",
"s09": "Memory Library",
"s10": "Runtime Prompt Assembly",
"s10": "Runtime Context Assembly",
"s11": "Error Recovery Paths",
"s12": "Task Board Dependencies",
"s13": "Background Task Lanes",
"s14": "Cron Scheduler",
"s15": "Team Mailbox Workbench",
"s16": "Team Protocol Cards",
"s15": "Agent Teams Runtime Lab",
"s16": "Agent Teams Protocol Lab",
"s17": "Autonomous Agent Cycle",
"s18": "Worktree Task Isolation",
"s19": "MCP Tool Bridge",
"s20": "Comprehensive Agent Turn"
"s20": "Comprehensive Agent Turn",
"s21": "Workflow Runtime",
"s22": "Goal Completion Gate"
}
}

24
web/src/i18n/messages/ja.json
View file

@ -1,10 +1,10 @@
{
"meta": { "title": "Learn Claude Code", "description": "0 から 1 へ nano Claude Code-like agent を構築し、毎回 1 つの仕組みを追加" },
"nav": { "home": "ホーム", "timeline": "学習パス", "compare": "バージョン比較", "layers": "アーキテクチャ層", "github": "GitHub" },
"home": { "hero_title": "Learn Claude Code", "hero_subtitle": "0 から 1 へ nano Claude Code-like agent を構築し、毎回 1 つの仕組みを追加", "start": "学習を始める", "core_pattern": "コアパターン", "core_pattern_desc": "すべての AI コーディングエージェントは同じループを共有する：モデルを呼び出し、ツールを実行し、結果を返す。実運用ではこの上にポリシー、権限、ライフサイクル層が重なる。", "learning_path": "学習パス", "learning_path_desc": "20の段階的セッション、シンプルなループから完全なマルチエージェント Harness まで", "layers_title": "アーキテクチャ層", "layers_desc": "5つの直交する関心事が完全なエージェントを構成", "loc": "行", "learn_more": "詳細を見る", "versions_in_layer": "バージョン", "message_flow": "メッセージの増加", "message_flow_desc": "エージェントループ実行時のメッセージ配列の成長を観察" },
"home": { "hero_title": "Learn Claude Code", "hero_subtitle": "0 から 1 へ nano Claude Code-like agent を構築し、毎回 1 つの仕組みを追加", "start": "学習を始める", "core_pattern": "コアパターン", "core_pattern_desc": "すべての AI コーディングエージェントは同じループを共有する：モデルを呼び出し、ツールを実行し、結果を返す。実運用ではこの上にポリシー、権限、ライフサイクル層が重なる。", "learning_path": "学習パス", "learning_path_desc": "22の段階的セッション、シンプルなループから決定的な編成と目標完了まで", "layers_title": "アーキテクチャ層", "layers_desc": "5つの直交する関心事が完全なエージェントを構成", "loc": "行", "learn_more": "詳細を見る", "versions_in_layer": "バージョン", "message_flow": "メッセージの増加", "message_flow_desc": "エージェントループ実行時のメッセージ配列の成長を観察" },
"version": { "loc": "行のコード", "tools": "ツール", "new": "新規", "prev": "前のバージョン", "next": "次のバージョン", "view_source": "ソースを見る", "view_diff": "差分を見る", "design_decisions": "設計判断", "whats_new": "新機能", "tutorial": "チュートリアル", "simulator": "エージェントループシミュレーター", "execution_flow": "実行フロー", "architecture": "アーキテクチャ", "concept_viz": "コンセプト可視化", "alternatives": "検討された代替案", "tab_learn": "学習", "tab_simulate": "シミュレーション", "tab_code": "ソースコード", "tab_deep_dive": "詳細分析" },
"sim": { "play": "再生", "pause": "一時停止", "step": "ステップ", "reset": "リセット", "speed": "速度", "step_of": "/" },
"timeline": { "title": "学習パス", "subtitle": "s01からs20へ：段階的エージェント Harness 設計", "layer_legend": "レイヤー凡例", "loc_growth": "コード量の推移", "learn_more": "詳細を見る" },
"timeline": { "title": "学習パス", "subtitle": "s01からs22へ：段階的エージェント Harness 設計", "layer_legend": "レイヤー凡例", "loc_growth": "コード量の推移", "learn_more": "詳細を見る" },
"layers": {
"title": "アーキテクチャ層",
"subtitle": "5つの直交する関心事が完全なエージェントを構成",
@ -48,17 +48,19 @@
"s07": "スキル",
"s08": "コンテキスト圧縮",
"s09": "メモリ",
"s10": "システムプロンプト",
"s10": "コンテキスト組み立て",
"s11": "エラー回復",
"s12": "タスクシステム",
"s13": "バックグラウンドタスク",
"s14": "Cron スケジューラー",
"s15": "エージェントチーム",
"s16": "チームプロトコル",
"s15": "Agent Teams：ランタイム実験",
"s16": "Agent Teams：プロトコル実験",
"s17": "自律エージェント",
"s18": "Worktree 分離",
"s19": "MCP ツール",
"s20": "Comprehensive Agent Turn"
"s20": "Comprehensive Agent Turn",
"s21": "Workflow Runtime",
"s22": "Goal Loop"
},
"layer_labels": {
"tools": "ツールと実行",
@ -77,16 +79,18 @@
"s07": "オンデマンド スキルローディング",
"s08": "3層コンテキスト圧縮",
"s09": "メモリライブラリ",
"s10": "実行時プロンプト組み立て",
"s10": "実行時コンテキスト組み立て",
"s11": "エラー回復経路",
"s12": "タスクボード依存関係",
"s13": "バックグラウンドタスクレーン",
"s14": "Cron スケジューラー",
"s15": "チームメールボックス作業台",
"s16": "Team Protocol Cards",
"s15": "Agent Teams ランタイム実験",
"s16": "Agent Teams プロトコル実験",
"s17": "自律エージェントサイクル",
"s18": "Worktree タスク分離",
"s19": "MCP ツールブリッジ",
"s20": "Comprehensive Agent Turn"
"s20": "Comprehensive Agent Turn",
"s21": "Workflow Runtime",
"s22": "目標完了ゲート"
}
}

24
web/src/i18n/messages/zh.json
View file

@ -1,10 +1,10 @@
{
"meta": { "title": "Learn Claude Code", "description": "从 0 到 1 构建 nano Claude Code-like agent，每次只加一个机制" },
"nav": { "home": "首页", "timeline": "学习路径", "compare": "版本对比", "layers": "架构层", "github": "GitHub" },
"home": { "hero_title": "Learn Claude Code", "hero_subtitle": "从 0 到 1 构建 nano Claude Code-like agent，每次只加一个机制", "start": "开始学习", "core_pattern": "核心模式", "core_pattern_desc": "所有 AI 编程 Agent 共享同一个循环：调用模型、执行工具、回传结果。生产级系统会在其上叠加策略、权限和生命周期层。", "learning_path": "学习路径", "learning_path_desc": "20 个渐进式课程，从简单循环到完整多 Agent Harness", "layers_title": "架构层次", "layers_desc": "五个正交关注点组合成完整的 Agent", "loc": "行", "learn_more": "了解更多", "versions_in_layer": "个版本", "message_flow": "消息增长", "message_flow_desc": "观察 Agent 循环执行时消息数组的增长" },
"home": { "hero_title": "Learn Claude Code", "hero_subtitle": "从 0 到 1 构建 nano Claude Code-like agent，每次只加一个机制", "start": "开始学习", "core_pattern": "核心模式", "core_pattern_desc": "所有 AI 编程 Agent 共享同一个循环：调用模型、执行工具、回传结果。生产级系统会在其上叠加策略、权限和生命周期层。", "learning_path": "学习路径", "learning_path_desc": "22 个渐进式课程，从简单循环到确定性编排与目标闭环", "layers_title": "架构层次", "layers_desc": "五个正交关注点组合成完整的 Agent", "loc": "行", "learn_more": "了解更多", "versions_in_layer": "个版本", "message_flow": "消息增长", "message_flow_desc": "观察 Agent 循环执行时消息数组的增长" },
"version": { "loc": "行代码", "tools": "个工具", "new": "新增", "prev": "上一版", "next": "下一版", "view_source": "查看源码", "view_diff": "查看变更", "design_decisions": "设计决策", "whats_new": "新增内容", "tutorial": "教程", "simulator": "Agent 循环模拟器", "execution_flow": "执行流程", "architecture": "架构", "concept_viz": "概念可视化", "alternatives": "替代方案", "tab_learn": "学习", "tab_simulate": "模拟", "tab_code": "源码", "tab_deep_dive": "深入探索" },
"sim": { "play": "播放", "pause": "暂停", "step": "单步", "reset": "重置", "speed": "速度", "step_of": "/" },
"timeline": { "title": "学习路径", "subtitle": "s01 到 s20：渐进式 Agent Harness 设计", "layer_legend": "层次图例", "loc_growth": "代码量增长", "learn_more": "了解更多" },
"timeline": { "title": "学习路径", "subtitle": "s01 到 s22：渐进式 Agent Harness 设计", "layer_legend": "层次图例", "loc_growth": "代码量增长", "learn_more": "了解更多" },
"layers": {
"title": "架构层次",
"subtitle": "五个正交关注点组合成完整的 Agent",
@ -48,17 +48,19 @@
"s07": "Skills",
"s08": "Context Compact",
"s09": "Memory",
"s10": "System Prompt",
"s10": "Context Assembly",
"s11": "Error Recovery",
"s12": "Task System",
"s13": "Background Tasks",
"s14": "Cron Scheduler",
"s15": "Agent Teams",
"s16": "Team Protocols",
"s15": "Agent Teams：运行时实验",
"s16": "Agent Teams：协议实验",
"s17": "Autonomous Agents",
"s18": "Worktree Isolation",
"s19": "MCP Tools",
"s20": "Comprehensive Agent Turn"
"s20": "Comprehensive Agent Turn",
"s21": "Workflow Runtime",
"s22": "Goal Loop"
},
"layer_labels": {
"tools": "工具与执行",
@ -77,16 +79,18 @@
"s07": "On-Demand Skill Loading",
"s08": "Three-Layer Context Compact",
"s09": "记忆图书馆",
"s10": "Runtime Prompt Assembly",
"s10": "运行时上下文组装",
"s11": "Error Recovery Paths",
"s12": "任务看板依赖",
"s13": "Background Task Lanes",
"s14": "Cron Scheduler",
"s15": "团队邮箱工作台",
"s16": "Team Protocol Cards",
"s15": "Agent Teams 运行时实验",
"s16": "Agent Teams 协议实验",
"s17": "Autonomous Agent Cycle",
"s18": "Worktree Task Isolation",
"s19": "MCP Tool Bridge",
"s20": "Comprehensive Agent Turn"
"s20": "Comprehensive Agent Turn",
"s21": "Workflow Runtime",
"s22": "目标完成闸门"
}
}

38
web/src/lib/constants.ts
View file

@ -21,6 +21,8 @@ export const VERSION_ORDER = [
"s18",
"s19",
"s20",
"s21",
"s22",
] as const;
export const LEARNING_PATH = VERSION_ORDER;
@ -108,10 +110,10 @@ export const VERSION_META: Record<string, {
prevVersion: "s08",
},
s10: {
title: "System Prompt",
subtitle: "Assembled at Runtime, Never Hardcoded",
coreAddition: "Runtime prompt assembly",
keyInsight: "The system prompt is a generated product of policy, tools, skills, and context.",
title: "Context Assembly",
subtitle: "Build Model Input from Runtime State",
coreAddition: "Runtime context assembly",
keyInsight: "Stable instructions and dynamic state should be assembled deliberately at the model boundary.",
layer: "planning",
prevVersion: "s09",
},
@ -148,16 +150,16 @@ export const VERSION_META: Record<string, {
prevVersion: "s13",
},
s15: {
title: "Agent Teams",
subtitle: "One Agent Isn't Enough, Form a Team",
title: "Agent Teams: Runtime Lab",
subtitle: "Persistent Teammates and Mailboxes",
coreAddition: "Teammate mailboxes",
keyInsight: "Persistent teammates let work continue in parallel without stuffing every thought into one context.",
layer: "collaboration",
prevVersion: "s14",
},
s16: {
title: "Team Protocols",
subtitle: "Teammates Need Agreements",
title: "Agent Teams: Protocol Lab",
subtitle: "Typed Requests, Replies, and Handshakes",
coreAddition: "Shared coordination protocols",
keyInsight: "Multi-agent systems need explicit message contracts, not vibes.",
layer: "collaboration",
@ -195,6 +197,22 @@ export const VERSION_META: Record<string, {
layer: "collaboration",
prevVersion: "s19",
},
s21: {
title: "Workflow Runtime",
subtitle: "Scripts Own Fixed Orchestration",
coreAddition: "Resumable workflow runtime",
keyInsight: "When orchestration has a fixed shape, code can make it parallel, deterministic, and resumable.",
layer: "concurrency",
prevVersion: "s20",
},
s22: {
title: "Goal Loop",
subtitle: "Trusted Evidence Decides When to Stop",
coreAddition: "Goal completion gate",
keyInsight: "A durable goal keeps the loop working until trusted evidence satisfies an explicit condition.",
layer: "planning",
prevVersion: "s21",
},
};
export const LAYERS = [
@ -208,7 +226,7 @@ export const LAYERS = [
id: "planning" as const,
label: "Planning & Control",
color: "#10B981",
versions: ["s05", "s06", "s07", "s10", "s11"],
versions: ["s05", "s06", "s07", "s10", "s11", "s22"],
},
{
id: "memory" as const,
@ -220,7 +238,7 @@ export const LAYERS = [
id: "concurrency" as const,
label: "Concurrency & Scheduling",
color: "#F59E0B",
versions: ["s13", "s14"],
versions: ["s13", "s14", "s21"],
},
{
id: "collaboration" as const,