ai-agent-book 精选快照（<2MB 代码与文档，来自 github.com/bojieli/ai-agent-book）

slides/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+exports/
+.slidev/
+*.pdf

slides/COURSE_OUTLINE.md

@@ -0,0 +1,138 @@
+# AI Agents in Depth — English Video Course
+
+Approved Option B curriculum: 42 problem-oriented lessons following the English book order. Each lesson is 15–20 minutes, budgeting approximately one minute per Slidev slide plus one to three minutes per live experiment.
+
+## Learning arc
+
+| Movement | Chapters | Viewer progression |
+| --- | --- | --- |
+| Build an Agent | Introduction–Chapter 5 | Context → memory → tools → executable capabilities |
+| Improve it scientifically | Chapters 6–8 | Evaluation → post-training → continual evolution |
+| Expand it | Chapters 9–10 | Voice → Computer Use → robotics → multi-Agent collaboration |
+
+## Approved chapter allocation
+
+| Book section | Lessons | Count |
+| --- | ---: | ---: |
+| Introduction | 1 | 1 |
+| Chapter 1 | 2–4 | 3 |
+| Chapter 2 | 5–9 | 5 |
+| Chapter 3 | 10–13 | 4 |
+| Chapter 4 | 14–17 | 4 |
+| Chapter 5 | 18–21 | 4 |
+| Chapter 6 | 22–25 | 4 |
+| Chapter 7 | 26–31 | 6 |
+| Chapter 8 | 32–34 | 3 |
+| Chapter 9 | 35–38 | 4 |
+| Chapter 10 | 39–42 | 4 |
+| **Total** | **1–42** | **42** |
+
+Chapter 7 intentionally receives six lessons because post-training and reinforcement learning are the largest conceptual jump for viewers without prior ML-training knowledge. Chapter 9 receives four lessons so Computer Use and robotics have separate mechanisms, experiments, and safety boundaries.
+
+## Lesson-by-lesson outline
+
+### Introduction
+
+| Lesson | Problem-oriented title | Main learning outcome | Live anchor(s) | Slides | Demo | Target |
+| ---: | --- | --- | --- | ---: | ---: | ---: |
+| [01](lesson-01.md) | How Do We Replace Agent Intuition with Evidence? | A practice-first map of AI Agents in Depth | Course tour | 15 | 1 min | 16 min |
+
+### Chapter 1
+
+| Lesson | Problem-oriented title | Main learning outcome | Live anchor(s) | Slides | Demo | Target |
+| ---: | --- | --- | --- | ---: | ---: | ---: |
+| [02](lesson-02.md) | What Makes an AI System an Agent? | Reasoning engine + working context + action interfaces | 1-2 | 15 | 2 min | 17 min |
+| [03](lesson-03.md) | Why Does an Agent Need Its Entire Trajectory? | ReAct, context components, and systematic ablation | 1-1A, 1-1B | 15 | 4 min | 19 min |
+| [04](lesson-04.md) | Why Doesn't a Stronger Model Make a Reliable Agent? | Harness engineering, orchestration, and guardrails | 1-3 | 15 | 2 min | 17 min |
+
+### Chapter 2
+
+| Lesson | Problem-oriented title | Main learning outcome | Live anchor(s) | Slides | Demo | Target |
+| ---: | --- | --- | --- | ---: | ---: | ---: |
+| [05](lesson-05.md) | What Does the Model Actually See? | Messages, tool calls, and the Agent core loop | 2-1 | 15 | 3 min | 18 min |
+| [06](lesson-06.md) | Why Can One Timestamp Make an Agent Slow? | Chat templates, attention, KV Cache, and stable prefixes | 2-3, 2-2 | 15 | 4 min | 19 min |
+| [07](lesson-07.md) | Why Do Better Prompts Need Structure, Not More Rules? | Process-oriented instructions, tool definitions, and injection boundaries | 2-4, 2-5 | 13 | 5 min | 18 min |
+| [08](lesson-08.md) | How Can an Agent Know What It Needs to Learn? | Skills, progressive disclosure, and on-demand capability | 2-6 | 15 | 3 min | 18 min |
+| [09](lesson-09.md) | How Can an Agent Stay Oriented in a Long Task? | Status bars, physical time, context rot, and compression | 2-8, 2-9 | 15 | 4 min | 19 min |
+
+### Chapter 3
+
+| Lesson | Problem-oriented title | Main learning outcome | Live anchor(s) | Slides | Demo | Target |
+| ---: | --- | --- | --- | ---: | ---: | ---: |
+| [10](lesson-10.md) | What Should an Agent Remember About a User? | Memory levels, representations, evaluation, and privacy | 3-1/3-2, 3-3 | 14 | 5 min | 19 min |
+| [11](lesson-11.md) | Why Does Semantic Search Miss Exact Answers? | Chunking, dense retrieval, sparse retrieval, and evaluation | 3-4, 3-5 | 15 | 4 min | 19 min |
+| [12](lesson-12.md) | Why Is One Retrieval Index Never Enough? | Hybrid search, reranking, multimodality, and structured knowledge | 3-6, 3-8 | 13 | 5 min | 18 min |
+| [13](lesson-13.md) | When Should the Agent Decide What to Retrieve? | Agentic RAG, contextual retrieval, and two-tier memory | 3-9, 3-11, 3-12 | 13 | 6 min | 19 min |
+
+### Chapter 4
+
+| Lesson | Problem-oriented title | Main learning outcome | Live anchor(s) | Slides | Demo | Target |
+| ---: | --- | --- | --- | ---: | ---: | ---: |
+| [14](lesson-14.md) | What Makes a Tool Easy for a Model to Use? | Capability boundaries, granularity, descriptions, and MCP | 4-1 | 15 | 3 min | 18 min |
+| [15](lesson-15.md) | How Do You Let an Agent Act Without Letting It Cause Damage? | Execution tools, independent checks, and fail-closed design | 4-3A, 4-3B | 15 | 3 min | 18 min |
+| [16](lesson-16.md) | When Should an Agent Ask for Help or Delegate? | Sub-agents, Human-in-the-Loop, and communication tools | 4-4A, 4-4B | 15 | 3 min | 18 min |
+| [17](lesson-17.md) | How Can a Synchronous Model Live in an Asynchronous World? | Events, interruption, parallelism, and proactive tool discovery | 4-5, 4-6, 4-7 | 13 | 6 min | 19 min |
+
+### Chapter 5
+
+| Lesson | Problem-oriented title | Main learning outcome | Live anchor(s) | Slides | Demo | Target |
+| ---: | --- | --- | --- | ---: | ---: | ---: |
+| [18](lesson-18.md) | Why Is Code Generation Not Enough to Build a Coding Agent? | Files, execution, harness recovery, and bounded verification | Coding workflow, Harness tests | 15 | 3 min | 18 min |
+| [19](lesson-19.md) | When Should an Agent Think in Code Instead of Words? | Math, logic, and deterministic business constraints | 5-1, 5-2, 5-3 | 13 | 6 min | 19 min |
+| [20](lesson-20.md) | How Can an Agent Create Media It Can Actually Verify? | Slidev, rendering, multimodal review, and video editing | 5-4, 5-6 | 13 | 5 min | 18 min |
+| [21](lesson-21.md) | How Can Code Let an Agent Create New Capabilities? | Adapters, generative UI, hot repair, and Agent bootstrapping | 5-7, 5-9, 5-12 | 13 | 6 min | 19 min |
+
+### Chapter 6
+
+| Lesson | Problem-oriented title | Main learning outcome | Live anchor(s) | Slides | Demo | Target |
+| ---: | --- | --- | --- | ---: | ---: | ---: |
+| [22](lesson-22.md) | How Do You Test an Agent Instead of Its Final Answer? | Environments, state, datasets, and executable verification | Evaluation control | 16 | 2 min | 18 min |
+| [23](lesson-23.md) | How Do You Judge Quality Without Hiding Failure? | Rubrics, vetoes, LLM judges, pairwise comparison, and Elo | 6-3, 6-6 | 15 | 4 min | 19 min |
+| [24](lesson-24.md) | Which Agent Should You Ship? | Model behavior, latency, cost, and evaluation-driven selection | 6-8, 6-7 | 15 | 4 min | 19 min |
+| [25](lesson-25.md) | Did the Agent Improve—or Did the Numbers Move? | Significance, observability, ablations, and production evaluation | 6-3 evidence | 15 | 2 min | 17 min |
+
+### Chapter 7
+
+| Lesson | Problem-oriented title | Main learning outcome | Live anchor(s) | Slides | Demo | Target |
+| ---: | --- | --- | --- | ---: | ---: | ---: |
+| [26](lesson-26.md) | Why Does Model Training Happen in Three Stages? | Pre-training, SFT, RL, and the agent-environment loop | 7-1 | 15 | 2 min | 17 min |
+| [27](lesson-27.md) | When Should You Teach with Examples—and When with Rewards? | SFT, loss masking, distribution shift, and the form-first rule | 7-4 evidence, 7-5 evidence | 15 | 4 min | 19 min |
+| [28](lesson-28.md) | How Do Preferences Become a Trainable Signal? | RLHF, reward models, KL constraints, PPO, GRPO, and DPO | RL evaluation check | 15 | 2 min | 17 min |
+| [29](lesson-29.md) | Why Do Data and Environments Matter More Than the Algorithm? | Practice grounds, task distributions, synthetic data, and fidelity | 7-9 data | 15 | 2 min | 17 min |
+| [30](lesson-30.md) | How Do You Reward a Long Agent Trajectory? | Credit assignment, reward density, process signals, and path penalties | 7-14 gates | 15 | 2 min | 17 min |
+| [31](lesson-31.md) | How Can a Model Learn to Use Tools with Fewer Samples? | Tool-call RL, sandbox feedback, distillation, and practical boundaries | 7-9 preflight | 15 | 2 min | 17 min |
+
+### Chapter 8
+
+| Lesson | Problem-oriented title | Main learning outcome | Live anchor(s) | Slides | Demo | Target |
+| ---: | --- | --- | --- | ---: | ---: | ---: |
+| [32](lesson-32.md) | How Do Failed Trajectories Become Learning Signals? | Outcome verification, process rules, Rubrics, and cross-trajectory experience | 8-1, 8-2 | 15 | 4 min | 19 min |
+| [33](lesson-33.md) | Where Should an Agent Store What It Learns? | Knowledge, instructions, programs, parameters, and meta-updates | 8-4, Tool evolution | 15 | 4 min | 19 min |
+| [34](lesson-34.md) | How Can a Self-Modifying Agent Change Without Drifting? | Candidate gates, transfer, retention, rollback, and sleep learning | 8-5, 8-6 | 15 | 4 min | 19 min |
+
+### Chapter 9
+
+| Lesson | Problem-oriented title | Main learning outcome | Live anchor(s) | Slides | Demo | Target |
+| ---: | --- | --- | --- | ---: | ---: | ---: |
+| [35](lesson-35.md) | Why Does a Voice Agent Feel Slow? | Cascaded pipelines, latency waterfalls, streaming, and turn detection | 9-1, 9-2 | 15 | 3 min | 18 min |
+| [36](lesson-36.md) | When Should Voice Stop Taking Turns? | Omni, full-duplex interaction, fast-slow thinking, and controllable speech | 9-3, 9-4 | 15 | 4 min | 19 min |
+| [37](lesson-37.md) | How Does an Agent Act Through Pixels? | GUI action spaces, visual grounding, and bounded interaction | 9-6 preflight, 9-6 retained status | 15 | 3 min | 18 min |
+| [38](lesson-38.md) | How Does an Agent Turn Plans into Physical Actions? | Planning-control separation, VLA control, safety gates, and Sim2Real | 9-9 dry configuration, Robot safety gates | 15 | 3 min | 18 min |
+
+### Chapter 10
+
+| Lesson | Problem-oriented title | Main learning outcome | Live anchor(s) | Slides | Demo | Target |
+| ---: | --- | --- | --- | ---: | ---: | ---: |
+| [39](lesson-39.md) | When Should Agents Share the Same Context? | Shared trajectories, isolated contexts, role switching, and handoffs | 10-1, 10-2 | 15 | 2 min | 17 min |
+| [40](lesson-40.md) | Who Should Coordinate Independent Agents? | Peer review, managers, decentralized handoffs, files, and control planes | 10-3 | 15 | 2 min | 17 min |
+| [41](lesson-41.md) | When Is Multi-Agent Actually Better Than One Agent? | Information gain, parallelism, verification, budgets, and cost | 10-6 | 15 | 3 min | 18 min |
+| [42](lesson-42.md) | How Do Agent Teams Fail—and What Should We Build Next? | Conflicts, error cascades, Agent societies, and the course synthesis | 10-8 offline diagnostic | 16 | 2 min | 18 min |
+
+
+## Recording contract
+
+- Speak in your own voice and add interpretation; the decks are visual prompts, not narration scripts.
+- Run the listed commands in one contiguous terminal block after the explicit handoff slide.
+- Treat preflights, validators, smoke checks, and dry configurations as scoped evidence—not completed long campaigns.
+- Use the linked companion projects for experiments that are not demonstrated live.
+- Demo-heavy lessons combine or remove conceptual slides so slide time plus terminal time stays within 20 minutes.

slides/README.md

@@ -0,0 +1,60 @@
+# AI Agents in Depth — English Slidev Course
+
+This directory contains the 42-lesson English video course derived from the
+English edition of the book.
+
+The approved curriculum is documented in [COURSE_OUTLINE.md](COURSE_OUTLINE.md).
+It uses the Option B allocation: four Chapter 5 lessons and four Chapter 9
+lessons, with Computer Use and robotics taught separately. Chapter 7 retains
+six lessons so post-training and reinforcement learning can be introduced
+without assuming prior ML-training knowledge. Lesson 42 concludes both Chapter
+10 and the complete series.
+
+## Production rules
+
+- Each lesson is 15–20 minutes.
+- The author budgets roughly one minute per slide.
+- The generator derives each displayed lesson duration from the rendered slide
+  count plus the live-demo budget; it rejects any lesson outside 15–20 minutes.
+- Decks are intentionally sparse: one claim, comparison, figure, or short code
+  excerpt per slide.
+- Every live-demo lesson contains a dark “Switching to the terminal” handoff
+  slide before the author changes windows.
+- Live terminal demonstrations are budgeted at one to three minutes each.
+- Several short experiments may share one contiguous demo block.
+- Lessons with five or six minutes of demos automatically use a compact
+  13–14-slide structure instead of squeezing the terminal work past 20 minutes.
+- Long-running, external-service, GPU, telephony, or hardware experiments use
+  traceable artifacts or preflight commands and never imply unperformed work.
+- The decks contain slide content and brief presenter cues, not narration
+  scripts. The author supplies the interpretation in his own voice.
+- All visible slide content is English.
+
+## Visual language
+
+The style follows the author’s existing Slidev talks under
+~/ring0.me/public/files: Seriph, problem-led titles, two- and three-column
+cards, section dividers, code, architecture diagrams, and restrained accent
+colors. This course uses larger type and more whitespace than the older talks.
+
+## Generate and run
+
+From this directory:
+
+1. Run npm install.
+2. Run npm run generate.
+3. Run npm run dev -- lesson-01.md.
+
+The generator also creates COURSE_OUTLINE.md and copies the selected English
+book figures into public/images.
+
+## Build and export
+
+- Build selected lessons: `node build-all.mjs 1 23 42`
+- Build every lesson: `npm run build:all`
+- Export one deck to PDF: `npm run export -- lesson-01.md --output lesson-01.pdf`
+- Export selected slides to PNG: `npm run export -- lesson-01.md --format png --range 1,8-10`
+
+The generated course outline lists every lesson, target duration, live
+experiment, and terminal-demo budget. Regenerate the decks after changing
+course.mjs; generated lesson files should not be edited by hand.

slides/build-all.mjs

@@ -0,0 +1,32 @@
+import { spawn } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+
+const HERE = fileURLToPath(new URL(".", import.meta.url));
+const slidev = path.join(HERE, "node_modules", ".bin", process.platform === "win32" ? "slidev.cmd" : "slidev");
+const requested = process.argv.slice(2).map((value) => Number(value));
+const lessonNumbers = requested.length ? requested : Array.from({ length: 42 }, (_, index) => index + 1);
+
+for (const number of lessonNumbers) {
+  if (!Number.isInteger(number) || number < 1 || number > 42) {
+    throw new Error("Lesson numbers must be integers from 1 to 42");
+  }
+}
+
+function run(command, args) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, { cwd: HERE, stdio: "inherit" });
+    child.on("error", reject);
+    child.on("exit", (code) => code === 0 ? resolve() : reject(new Error("Slidev exited with code " + code)));
+  });
+}
+
+for (const number of lessonNumbers) {
+  const lessonNo = String(number).padStart(2, "0");
+  const deck = "lesson-" + lessonNo + ".md";
+  const out = "dist/lesson-" + lessonNo;
+  console.log("\nBuilding " + deck + "...");
+  await run(slidev, ["build", deck, "--out", out, "--base", "/lesson-" + lessonNo + "/"]);
+}
+
+console.log("\nBuilt " + lessonNumbers.length + " deck(s).");

slides/chapter1-pilot.mjs

@@ -0,0 +1,827 @@
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}
+
+function slide(body, { layout, className, cue } = {}) {
+  const lines = ["---"];
+  if (layout || className) {
+    if (layout) lines.push("layout: " + layout);
+    if (className) lines.push("class: " + className);
+    lines.push("---");
+  }
+  lines.push("", body.trim(), "");
+  if (cue) lines.push("<!-- Presenter cue: " + cue + " -->", "");
+  return lines.join("\n");
+}
+
+function frontmatter(lesson, chapterLesson, title, subtitle, minutes, body) {
+  const lessonNo = String(lesson.number).padStart(2, "0");
+  return [
+    "---",
+    "theme: seriph",
+    "title: " + JSON.stringify("Chapter 1 · Lesson " + chapterLesson + " — " + title),
+    "info: " + JSON.stringify("English video course for AI Agents in Depth"),
+    "author: Bojie Li",
+    "transition: slide-left",
+    "mdc: true",
+    "lineNumbers: false",
+    "monaco: false",
+    "aspectRatio: 16/9",
+    "canvasWidth: 980",
+    "layout: cover",
+    "class: chapter-formula-cover",
+    "---",
+    "",
+    body.trim(),
+    "",
+    '<div class="chapter-cover-footer"><span>Bojie Li · AI Agents in Depth</span><span>Course Lesson ' + lessonNo + " of 42 · " + minutes + " minutes</span></div>",
+    "",
+    "<!-- Presenter cue: Introduce the chapter thesis through the formula; the slide already carries the factual structure. -->",
+    ""
+  ].join("\n");
+}
+
+function renderLessonOne(lesson) {
+  const deck = [];
+
+  deck.push(frontmatter(
+    lesson,
+    1,
+    "What Turns an LLM into an Agent?",
+    "Reasoning engine + working context + action interfaces",
+    18,
+    String.raw`
+<div class="chapter-kicker">BUILD · CHAPTER 1 · AGENT FUNDAMENTALS</div>
+
+# What Turns an LLM into an Agent?
+
+<div class="chapter-equation mt-7">
+  <div class="chapter-equation-term blue"><strong>LLM</strong><span>Reasoning engine</span><small>Understand · plan · decide</small></div>
+  <div class="chapter-equation-sign">+</div>
+  <div class="chapter-equation-term green"><strong>Context</strong><span>Working set</span><small>Observe · remember · retrieve</small></div>
+  <div class="chapter-equation-sign">+</div>
+  <div class="chapter-equation-term orange"><strong>Tools</strong><span>Action interfaces</span><small>Search · execute · communicate</small></div>
+</div>
+
+<div class="chapter-cover-thesis">Agent = Reasoning Engine + Working Context + Action Interfaces</div>`
+  ));
+
+  deck.push(slide(String.raw`
+# You Have Already Used an AI Agent
+
+<div class="chapter-lead">Chapter 1 begins with products that have crossed the boundary from <strong>answering</strong> to <strong>acting</strong>.</div>
+
+<table class="chapter-table mt-4">
+<thead><tr><th>Product</th><th>What it observes</th><th>What it does</th><th>How it adapts</th></tr></thead>
+<tbody>
+<tr><td><strong>Cursor</strong></td><td>Requirements, codebase, terminal</td><td>Searches, edits, runs tests</td><td>Debugs until tests pass</td></tr>
+<tr><td><strong>Deep Research</strong></td><td>Web, papers, local files</td><td>Searches, reads, synthesizes</td><td>Changes the research direction</td></tr>
+<tr><td><strong>Manus</strong></td><td>Browser, files, screen</td><td>Clicks, types, executes code</td><td>Replans from interface feedback</td></tr>
+<tr><td><strong>Doubao</strong></td><td>Phone screen and apps</td><td>Opens, swipes, types, confirms</td><td>Responds to the app state</td></tr>
+<tr><td><strong>Pine AI</strong></td><td>Accounts, bills, provider knowledge</td><td>Calls, emails, negotiates</td><td>Adjusts strategy during the task</td></tr>
+</tbody>
+</table>
+
+<div class="chapter-callout green mt-4"><strong>Shared trait:</strong> they plan execution steps, call the tools a task requires, and revise their strategy as results arrive.</div>`, {
+    className: "chapter-dense",
+    cue: "Use the products to establish the behavioral shift described in the chapter opening."
+  }));
+
+  deck.push(slide(String.raw`
+# One Formula, Three Levels of Description
+
+<table class="chapter-table chapter-table-roomy mt-5">
+<thead><tr><th>Intuition</th><th>Agent component</th><th>RL term <span class="chapter-muted">(optional)</span></th><th>Responsibility</th></tr></thead>
+<tbody>
+<tr><td><strong>Reasoning engine</strong></td><td><strong>LLM</strong></td><td>Policy</td><td>Given current information, choose what to do next.</td></tr>
+<tr><td><strong>Working context</strong></td><td><strong>Context</strong></td><td>Observation space</td><td>Everything the Agent can observe, read, remember, and retrieve.</td></tr>
+<tr><td><strong>Action interfaces</strong></td><td><strong>Tools</strong></td><td>Action space</td><td>Everything the Agent can do—from messages and APIs to code and GUI control.</td></tr>
+</tbody>
+</table>
+
+<div class="grid grid-cols-2 gap-5 mt-5">
+<div class="chapter-callout blue"><strong>The minimal system:</strong> LLM + context + tools is enough to demonstrate an Agent loop.</div>
+<div class="chapter-callout orange"><strong>The production question:</strong> later in the chapter, Harness Engineering adds constraints, verification, and correction.</div>
+</div>`, {
+    className: "chapter-dense",
+    cue: "Define the three terms broadly, then mention that the RL column is only a vocabulary bridge."
+  }));
+
+  deck.push(slide(String.raw`
+# Observation + Action Spaces Are the Agent's ISA
+
+<div class="chapter-lead">Hennessy and Patterson use the instruction set architecture as the interface between software and hardware. Chapter 1 applies the same idea to Agents.</div>
+
+<div class="chapter-interface mt-6">
+  <div class="chapter-interface-world"><strong>External world</strong><span>Web · files · apps · people</span></div>
+  <div class="chapter-interface-arrow"><span>Observation space</span>→</div>
+  <div class="chapter-interface-model"><strong>LLM</strong><span>Reasons over what enters context</span></div>
+  <div class="chapter-interface-arrow"><span>Action space</span>→</div>
+  <div class="chapter-interface-world"><strong>External world</strong><span>Changed by tool execution</span></div>
+</div>
+
+<div class="grid grid-cols-2 gap-5 mt-6">
+<div class="chapter-callout red"><strong>Outside the observation space:</strong> information effectively does not exist for the model.</div>
+<div class="chapter-callout orange"><strong>Outside the action space:</strong> the model can recommend an operation, but it cannot perform it.</div>
+</div>
+
+<div class="chapter-thesis-line mt-5">With the model held constant, expanding the right context or tool can make a previously unsolvable task solvable—without retraining.</div>`, {
+    className: "chapter-dense",
+    cue: "Trace the interface in both directions and emphasize the held-constant-model condition."
+  }));
+
+  deck.push(slide(String.raw`
+# Generality Often Comes from Expanding the Interface Boundary
+
+<div class="grid grid-cols-2 gap-6 mt-4">
+<div class="chapter-panel blue">
+<h3>Manus: unite previously separate spaces</h3>
+<ul>
+<li><strong>Deep Research:</strong> the web enlarges observation.</li>
+<li><strong>Coding:</strong> files and code execution enlarge action.</li>
+<li><strong>Computer Use:</strong> screen perception and clicking enter both spaces.</li>
+</ul>
+<p class="chapter-conclusion">Its generality did not come merely from swapping in a stronger model; it took the union of three earlier Agent categories.</p>
+</div>
+<div class="chapter-panel green">
+<h3>OpenClaw: extend into the user's digital life</h3>
+<ul>
+<li>Messaging channels make the Agent reachable from almost anywhere.</li>
+<li>A local-first Gateway reaches authorized local files and cloud applications.</li>
+<li>Plugins and Skills enlarge the action interface on demand.</li>
+</ul>
+<p class="chapter-conclusion">The product boundary moves outward—but authorization, relevance, and verification must move with it.</p>
+</div>
+</div>
+
+<div class="chapter-callout orange mt-4"><strong>Expansion is not “include everything.”</strong> Irrelevant context adds noise; too many tools increase selection cost and security risk. Useful expansion is on-demand, relevant, and controlled.</div>`, {
+    className: "chapter-dense",
+    cue: "Use Manus and OpenClaw exactly as the chapter uses them: as interface-expansion examples."
+  }));
+
+  deck.push(slide(String.raw`
+# Five Agent Products, Compared on the Same Three Dimensions
+
+<table class="chapter-table chapter-table-compact mt-3">
+<thead><tr><th>Agent type</th><th>Working context</th><th>Action interfaces</th><th>Execution strategy</th></tr></thead>
+<tbody>
+<tr><td><strong>Coding</strong></td><td>Requirements, repository, terminal</td><td>Search, read/write files, commands</td><td>Understand → edit → test → debug</td></tr>
+<tr><td><strong>Search</strong></td><td>Web, academic databases, local files</td><td>Queries, web reading, synthesis</td><td>Iteratively deepen and redirect research</td></tr>
+<tr><td><strong>Computer control</strong></td><td>Screen, browser, file system</td><td>Click, type, scroll, screenshot, code</td><td>Observe interface → act → verify</td></tr>
+<tr><td><strong>Phone assistant</strong></td><td>Phone screen, installed applications</td><td>Click, swipe, type, open apps</td><td>Understand intent → operate → confirm</td></tr>
+<tr><td><strong>Personal task</strong></td><td>Accounts, bills, provider knowledge</td><td>Calls, email, forms, user confirmation</td><td>Gather → plan → contact → negotiate → report</td></tr>
+</tbody>
+</table>
+
+<div class="grid grid-cols-3 gap-4 mt-4">
+<div class="chapter-mini blue"><strong>Open-ended action</strong><span>Generate language and code—not select only from fixed buttons.</span></div>
+<div class="chapter-mini purple"><strong>Internal reasoning</strong><span>Plan before changing the environment.</span></div>
+<div class="chapter-mini green"><strong>Continuous interaction</strong><span>Use environmental feedback to choose the next step.</span></div>
+</div>`, {
+    className: "chapter-dense",
+    cue: "Compare products by architecture rather than by brand or feature list."
+  }));
+
+  deck.push(slide(String.raw`
+# Tools Are More Than Callable APIs
+
+<div class="chapter-five-grid mt-5">
+<div class="chapter-panel blue"><h3>1 · Perception</h3><p>Bring information into the Agent: search, files, APIs, databases.</p></div>
+<div class="chapter-panel green"><h3>2 · Execution</h3><p>Change external systems: code, files, commands, service APIs.</p></div>
+<div class="chapter-panel purple"><h3>3 · Collaboration</h3><p>Delegate to sub-agents, request human confirmation, coordinate work.</p></div>
+<div class="chapter-panel orange"><h3>4 · Event triggers</h3><p>Email, schedules, and Webhooks activate the Agent; the Agent does not call them.</p></div>
+<div class="chapter-panel red"><h3>5 · User communication</h3><p>Report progress or ask questions by message, voice, or email.</p></div>
+</div>
+
+<div class="chapter-thesis-line mt-5">Tool quality defines what the Agent can accomplish reliably: vague interfaces cause misuse, weak error handling causes stalls, and broad permissions turn mistakes into irreversible actions.</div>`, {
+    className: "chapter-dense",
+    cue: "Preserve the chapter's broad definition of tools, especially event triggers and communication channels."
+  }));
+
+  deck.push(slide(String.raw`
+# Tool Calling Is a Four-Step Context Update
+
+<div class="grid grid-cols-2 gap-4 mt-4 chapter-code-grid">
+<div><div class="chapter-step-label">1 · Declare the interface</div>
+<pre class="chapter-code-block" v-pre><code>{
+  "name": "get_weather",
+  "parameters": {"city": "string"}
+}</code></pre>
+</div>
+<div><div class="chapter-step-label">2 · The model decides</div>
+<pre class="chapter-code-block" v-pre><code>{
+  "tool_calls": [{
+    "name": "get_weather",
+    "arguments": {"city": "Beijing"}
+  }]
+}</code></pre>
+</div>
+<div><div class="chapter-step-label">3 · Execute and append the result</div>
+<pre class="chapter-code-block" v-pre><code>{
+  "role": "tool",
+  "tool_call_id": "call_1",
+  "content": "{\"temp\":28,\"sky\":\"clear\"}"
+}</code></pre>
+</div>
+<div><div class="chapter-step-label">4 · Decide again from the new context</div>
+<pre class="chapter-code-block" v-pre><code>{
+  "role": "assistant",
+  "content": "Today in Beijing: 28°C, sunny."
+}</code></pre>
+</div>
+</div>
+
+<div class="chapter-callout blue mt-3"><strong>Division of responsibility:</strong> the developer declares and executes tools; the model decides whether to call one, which one, and with what arguments.</div>`, {
+    className: "chapter-dense",
+    cue: "Walk through the API sequence and point out that the tool result becomes the next observation."
+  }));
+
+  deck.push(slide(String.raw`
+# General Tools Compose; Specialized Tools Constrain
+
+<div class="grid grid-cols-2 gap-6 mt-4">
+<div class="chapter-panel green">
+<h3>General-purpose foundations</h3>
+<ul>
+<li>A calculator is enough for basic arithmetic.</li>
+<li>A constrained Python interpreter combines spreadsheet reading, cleaning, statistics, and plotting.</li>
+<li>A controlled working directory preserves plans, logs, intermediate results, and artifacts across long tasks.</li>
+</ul>
+<div class="chapter-tag green">Use for composition and exploration</div>
+</div>
+<div class="chapter-panel orange">
+<h3>Specialized high-risk operations</h3>
+<ul>
+<li>Payments, deletion, email, and production deployment need explicit parameters.</li>
+<li>Restrict permissions and make the complete operation auditable.</li>
+<li>Add preview and human confirmation when an action is sensitive or irreversible.</li>
+</ul>
+<div class="chapter-tag orange">Use to enforce business rules</div>
+</div>
+</div>
+
+<div class="chapter-callout red mt-4"><strong>Code sandbox minimums:</strong> network disabled by default; authorized working directory only; path-traversal prevention; execution-time, CPU, memory, storage, file-type, and output limits.</div>`, {
+    className: "chapter-dense",
+    cue: "Present generality and safety as a design trade-off, not as competing ideologies."
+  }));
+
+  deck.push(slide(String.raw`
+# The LLM Supplies Reasoning Before It Supplies Action
+
+<div class="chapter-lead">The reasoning engine must infer intent, decompose a vague task, and repeatedly decide what to do next, whether to call a tool, and which arguments to use.</div>
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="chapter-panel blue">
+<h3>Zero-shot generalization</h3>
+<p>Solve a task with no demonstrations by recombining knowledge and reasoning patterns acquired during pre-training.</p>
+<div class="chapter-example">Example: produce a reasonable poem about quantum physics without being trained on that exact request.</div>
+</div>
+<div class="chapter-panel purple">
+<h3>Few-shot adaptation</h3>
+<p>Infer a new task pattern from two or three examples placed in the current context.</p>
+<div class="chapter-example">Example: learn a new user-comment → sentiment-label format from a handful of demonstrations.</div>
+</div>
+</div>
+
+<div class="chapter-callout green mt-5"><strong>Why this matters for Agents:</strong> the next action is not blind trial and error. The model draws on learned causal relationships, decomposition strategies, and world knowledge before acting.</div>`, {
+    className: "chapter-dense",
+    cue: "Explain zero-shot and few-shot as sources of runtime adaptability, not as separate Agent components."
+  }));
+
+  deck.push(slide(String.raw`
+# “Model as Agent” Internalizes the Decision Policy—not the Tools
+
+<div class="grid grid-cols-2 gap-6 mt-4">
+<div class="chapter-panel purple">
+<h3>What post-training can write into weights</h3>
+<ul>
+<li>When a tool call is useful.</li>
+<li>Which tool to choose.</li>
+<li>What arguments to pass.</li>
+<li>Whether to continue after a result.</li>
+<li>How to chain many calls coherently.</li>
+</ul>
+</div>
+<div class="chapter-panel orange">
+<h3>What remains outside the model</h3>
+<ul>
+<li>The search engine and code sandbox.</li>
+<li>Tool declarations and provider infrastructure.</li>
+<li>Execution, permissions, and returned results.</li>
+<li>The server-side or client-side orchestration loop.</li>
+</ul>
+</div>
+</div>
+
+<div class="chapter-thesis-line mt-5">The orchestration loop has not disappeared: decision-making may move into the model while execution moves to the API server.</div>
+
+<div class="chapter-source">Chapter 1 clarification prompted by GitHub Issue #30.</div>`, {
+    className: "chapter-dense",
+    cue: "Make the policy-versus-execution distinction explicit; it is a central correction in the chapter."
+  }));
+
+  deck.push(slide(String.raw`
+# Agents Learn on Three Timescales
+
+<div class="grid grid-cols-5 gap-5 mt-2 items-center">
+<div class="col-span-3">
+<img class="chapter-figure-large" src="/images/fig1-1.svg" alt="Three levels of Agent capability updates">
+</div>
+<div class="col-span-2 chapter-stack">
+<div class="chapter-mini blue"><strong>Contextual adaptation</strong><span>Inference-time, immediate, temporary, bounded by the context window.</span></div>
+<div class="chapter-mini green"><strong>Externalized learning</strong><span>Knowledge, prompts, Skills, programs, and Harnesses persist across tasks and remain auditable.</span></div>
+<div class="chapter-mini purple"><strong>Parameter updates</strong><span>Training-time, costly, persistent, useful for high-dimensional capabilities and implicit policies.</span></div>
+</div>
+</div>
+
+<div class="chapter-callout orange mt-3"><strong>Pragmatic Bitter Lesson:</strong> models will absorb parts of today’s Harness, but training moves more slowly than real business requirements. The Harness covers the current capability boundary and moves when that boundary moves.</div>`, {
+    className: "chapter-dense",
+    cue: "Compare persistence, update cost, and expressiveness; do not present the paths as mutually exclusive."
+  }));
+
+  deck.push(slide(String.raw`
+# Experiment 1-2: Can Kimi K3 Sustain Native Tool Use?
+
+<div class="grid grid-cols-5 gap-5 mt-2">
+<div class="col-span-3">
+<img class="chapter-figure-medium" src="/images/fig1-4.svg" alt="Model as Agent architecture with native tool calling">
+</div>
+<div class="col-span-2">
+<h3>Canonical task</h3>
+<p class="chapter-small">Verify ASEAN membership and the legal status of Jakarta versus Nusantara from official sources. Search once, inspect what evidence is missing, then perform distinct follow-up searches.</p>
+<h3 class="mt-3">Exact provider route</h3>
+<ol class="chapter-tight-list">
+<li>Fetch Moonshot’s authoritative <code>web_search</code> declaration.</li>
+<li>Kimi decides when and how to call it.</li>
+<li>Each call runs through a Formula Fiber.</li>
+<li>The result returns as the next observation.</li>
+</ol>
+</div>
+</div>
+
+<div class="chapter-callout blue mt-3"><strong>Acceptance requires real provider receipts:</strong> direct Moonshot API, exact <code>kimi-k3</code> model, multiple distinct successful Fibers, sequential search rounds, reasoning, final answer, retrieval date, and official-source links.</div>`, {
+    className: "chapter-dense",
+    cue: "State the task and acceptance criteria before switching to the terminal."
+  }));
+
+  deck.push(slide(String.raw`
+<div class="course-kicker">LIVE DEMO · EXPERIMENT 1-2 · REAL API</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run --extra ch1 python chapter1/web-search-agent/run_experiment_1_2.py --attempts 1 --timeout 120
+~~~
+
+<div class="chapter-terminal-grid mt-5">
+<div><strong>Watch the policy</strong><span>Search queries change as missing evidence becomes visible.</span></div>
+<div><strong>Watch the interface</strong><span>Every action is a standard <code>web_search</code> call executed by a Formula Fiber.</span></div>
+<div><strong>Watch the receipts</strong><span>Response IDs, Fiber IDs, sources, token usage, and acceptance checks are retained.</span></div>
+</div>
+
+<div class="course-terminal-watch">Requires <code>MOONSHOT_API_KEY</code>. If the provider is unavailable during recording, inspect the accepted credential-free artifact on the next slide and label it retained evidence.</div>`, {
+    className: "course-terminal chapter-terminal",
+    cue: "Run one canonical attempt. Narrate why each follow-up search occurs; do not narrate every token."
+  }));
+
+  deck.push(slide(String.raw`
+# What the Accepted Run Actually Demonstrated
+
+<div class="chapter-metrics mt-4">
+<div><strong>5</strong><span>reasoning iterations</span></div>
+<div><strong>15</strong><span>successful Formula Fibers</span></div>
+<div><strong>58,123</strong><span>total tokens</span></div>
+<div><strong>29,952</strong><span>cached prompt tokens</span></div>
+</div>
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div>
+<h3>Observed in retained real-API evidence</h3>
+<ul class="chapter-tight-list">
+<li>Different searches occurred over multiple sequential rounds.</li>
+<li>Every model action matched a provider-side Fiber request.</li>
+<li>The final answer cited ASEAN and Indonesian official sources.</li>
+<li>All acceptance checks passed on 2026-07-29.</li>
+</ul>
+</div>
+<div>
+<h3>What this does—and does not—show</h3>
+<ul class="chapter-tight-list">
+<li><strong>Shows:</strong> the model controls a long search policy and revises it from observations.</li>
+<li><strong>Does not show:</strong> that the search engine or execution infrastructure lives in the weights.</li>
+<li><strong>Cost:</strong> autonomy can require many calls and a large cumulative context.</li>
+</ul>
+</div>
+</div>
+
+<div class="chapter-source">Evidence: chapter1/web-search-agent/validation/latest.json · evidence mode: real_api</div>`, {
+    className: "chapter-dense",
+    cue: "Separate the accepted evidence from the architectural interpretation."
+  }));
+
+  deck.push(slide(String.raw`
+# The Capability Boundary Is Often the Interface Boundary
+
+<div class="grid grid-cols-3 gap-5 mt-5">
+<div class="chapter-panel blue"><h3>Reasoning engine</h3><p>The LLM supplies world knowledge, planning, judgment, zero-shot generalization, and a learned tool-use policy.</p></div>
+<div class="chapter-panel green"><h3>Working context</h3><p>The observation space determines which task state, evidence, memory, and environmental feedback can influence a decision.</p></div>
+<div class="chapter-panel orange"><h3>Action interfaces</h3><p>Tools determine which operations can affect the world; broader interfaces require stronger permissions and verification.</p></div>
+</div>
+
+<div class="chapter-thesis-box mt-5">When an Agent cannot solve a task, first locate the missing capability: model policy, observable information, or executable action.</div>
+
+<div class="grid grid-cols-2 gap-4 mt-4 chapter-links">
+<a href="../chapter1/search-codegen/"><strong>Next experiment</strong><span>Experiment 1-3 · GPT-5.6 search + code</span></a>
+<a href="../book-en/chapter1.md"><strong>Book question</strong><span>When would you choose a stronger model, richer context, or more tools?</span></a>
+</div>`, {
+    className: "chapter-dense",
+    cue: "Close with the chapter's systems-engineering lever, then bridge to the working context in Lesson 2."
+  }));
+
+  return { markdown: deck.join("\n"), slideCount: deck.length };
+}
+
+function renderLessonTwo(lesson) {
+  const deck = [];
+
+  deck.push(frontmatter(
+    lesson,
+    2,
+    "What Is Inside an Agent's Context?",
+    "Static prefix + dynamic trajectory",
+    19,
+    String.raw`
+<div class="chapter-kicker">BUILD · CHAPTER 1 · AGENT FUNDAMENTALS</div>
+
+# What Is Inside an Agent's Context?
+
+<div class="chapter-context-equation mt-6">
+  <div class="chapter-context-group blue"><strong>Static prefix</strong><span>System prompt</span><span>Tool definitions</span></div>
+  <div class="chapter-equation-sign">+</div>
+  <div class="chapter-context-group green"><strong>Trajectory</strong><span>User messages</span><span>Assistant messages</span><span>Tool results</span></div>
+</div>
+
+<div class="chapter-cover-thesis">Every model call sees the prefix plus the trajectory accumulated so far.</div>`
+  ));
+
+  deck.push(slide(String.raw`
+# Context Is the Agent's Working Set—not Its Entire Memory
+
+<div class="chapter-lead">Context is the information available to the Agent at one decision point: the task instructions, relevant references, earlier correspondence, current state, and the latest tool observations.</div>
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="chapter-panel blue">
+<h3>What enters the working set</h3>
+<ul>
+<li>The system prompt and stable rules.</li>
+<li>Definitions of tools currently available.</li>
+<li>User input and retrieved external knowledge.</li>
+<li>Earlier assistant decisions and actions.</li>
+<li>Results returned by the environment.</li>
+</ul>
+</div>
+<div class="chapter-panel orange">
+<h3>What the model cannot use directly</h3>
+<ul>
+<li>State retained only inside application code.</li>
+<li>A tool implementation whose definition was not supplied.</li>
+<li>An execution result that was never appended.</li>
+<li>A previous turn removed during compression.</li>
+<li>Relevant knowledge that retrieval did not surface.</li>
+</ul>
+</div>
+</div>
+
+<div class="chapter-thesis-line mt-5">The Agent can decide only from information present at decision time—even if the missing fact exists elsewhere in the system.</div>`, {
+    className: "chapter-dense",
+    cue: "Distinguish persistent storage from the smaller working set exposed on the current call."
+  }));
+
+  deck.push(slide(String.raw`
+# The API-Level Context Has Five Components
+
+<table class="chapter-table chapter-table-compact mt-3">
+<thead><tr><th>Component</th><th>Who supplies it</th><th>What it carries</th><th>Failure if absent</th></tr></thead>
+<tbody>
+<tr><td><strong>System prompt</strong></td><td>Developer / framework</td><td>Identity, permissions, conduct, memory, injected state</td><td>No stable role or behavioral boundary</td></tr>
+<tr><td><strong>Tool definitions</strong></td><td>Developer / provider</td><td>Names, descriptions, parameters, formats</td><td>The model cannot recognize or call the tool</td></tr>
+<tr><td><strong>User messages</strong></td><td>User + retrieval layer</td><td>Request and dynamically retrieved knowledge</td><td>The current goal or required evidence is missing</td></tr>
+<tr><td><strong>Assistant messages</strong></td><td>Model</td><td>Reasoning, user-facing content, tool calls</td><td>Prior decisions and proposed actions disappear</td></tr>
+<tr><td><strong>Tool results</strong></td><td>Environment / Harness</td><td>Execution feedback and new observations</td><td>The Agent acts without knowing what happened</td></tr>
+</tbody>
+</table>
+
+<div class="chapter-callout blue mt-4"><strong>Experiment 1-1 tests four removals.</strong> The system prompt is exempt because without a basic identity definition the test no longer represents the same Agent.</div>`, {
+    className: "chapter-dense",
+    cue: "Use the failure column to make each component operational rather than definitional."
+  }));
+
+  deck.push(slide(String.raw`
+# Static Prefix + Dynamic Trajectory
+
+<div class="chapter-prefix-flow mt-5">
+<div class="chapter-prefix-block blue">
+<strong>Static prefix</strong>
+<span>System prompt</span>
+<span>Tool definitions</span>
+<small>Stable across calls; cache-friendly</small>
+</div>
+<div class="chapter-plus">+</div>
+<div class="chapter-prefix-block green wide">
+<strong>Trajectory</strong>
+<span>User → assistant reasoning/tool calls → tool results → assistant…</span>
+<small>Grows after every interaction with the environment</small>
+</div>
+<div class="chapter-equals">=</div>
+<div class="chapter-prefix-block purple">
+<strong>Next LLM input</strong>
+<span>Everything visible at this decision point</span>
+</div>
+</div>
+
+<div class="grid grid-cols-2 gap-5 mt-6">
+<div class="chapter-callout green"><strong>Why retain the trajectory?</strong> It records completed work, unresolved questions, decisions, tool arguments, observations, and progress.</div>
+<div class="chapter-callout orange"><strong>Why not retain everything forever?</strong> The prompt grows, cost rises, irrelevant history competes for attention, and retrieval becomes harder.</div>
+</div>`, {
+    className: "chapter-dense",
+    cue: "Establish the exact equation that the next slides and experiment will probe."
+  }));
+
+  deck.push(slide(String.raw`
+# An Assistant Message Can Carry Thought, Speech, and Action
+
+<div class="grid grid-cols-2 gap-5 mt-3">
+<div>
+<pre class="chapter-code-block tall" v-pre><code>{
+  "role": "assistant",
+  "reasoning": "Need EUR, GBP, and JPY rates…",
+  "content": "",
+  "tool_calls": [
+    {"name": "convert_currency",
+     "arguments": {"amount": 2100000,
+                   "from": "EUR", "to": "USD"}}
+  ]
+}</code></pre>
+</div>
+<div>
+<div class="chapter-panel purple"><h3>Reasoning</h3><p>Preserves why the previous decision was made and supports coherence across steps.</p></div>
+<div class="chapter-panel blue mt-3"><h3>Content</h3><p>Communicates with the user; often empty while the Agent is still acting.</p></div>
+<div class="chapter-panel green mt-3"><h3>Tool calls</h3><p>Structured proposals for changing or observing the external environment.</p></div>
+</div>
+</div>
+
+<div class="chapter-callout orange mt-3"><strong>The tool result is a separate message.</strong> The framework executes the proposal and appends the observation under the matching tool-call ID.</div>`, {
+    className: "chapter-dense",
+    cue: "Point out that the three fields need not appear together on every assistant response."
+  }));
+
+  deck.push(slide(String.raw`
+# Experiment 1-1 Removes One Information Channel at a Time
+
+<div class="grid grid-cols-5 gap-5 mt-2 items-center">
+<div class="col-span-3">
+<img class="chapter-figure-large" src="/images/fig1-2.svg" alt="Experiment 1-1 context ablation design">
+</div>
+<div class="col-span-2">
+<h3>Canonical task</h3>
+<p class="chapter-small">Convert quarterly revenue in USD, EUR, GBP, and JPY into USD, then calculate the annual total and quarterly average without estimating exchange rates.</p>
+<h3 class="mt-3">Control</h3>
+<p class="chapter-small">The full arm keeps all five components and should complete in a small number of iterations.</p>
+<h3 class="mt-3">Ablations</h3>
+<p class="chapter-small">Remove tool definitions, tool results, retained reasoning, or message history while holding the task and model constant.</p>
+</div>
+</div>
+
+<div class="chapter-thesis-line mt-3">Ablation is diagnostic: different missing components should create different, observable failure signatures.</div>`, {
+    className: "chapter-dense",
+    cue: "Define the controlled comparison before showing expected or observed behavior."
+  }));
+
+  deck.push(slide(String.raw`
+# What Should Break When Each Component Disappears?
+
+<table class="chapter-table chapter-table-roomy mt-4">
+<thead><tr><th>Arm</th><th>Actual request change</th><th>Predicted signature from the chapter</th><th>Disconfirming observation</th></tr></thead>
+<tbody>
+<tr><td><strong>Full</strong></td><td>No removal</td><td>Correct answer with a coherent sequence</td><td>Wrong answer, unnecessary repetition, or no completion</td></tr>
+<tr><td><strong>No tool definitions</strong></td><td>Omit <code>tools</code> and <code>tool_choice</code></td><td>No tool action is possible</td><td>The model successfully invokes an undeclared tool</td></tr>
+<tr><td><strong>No tool results</strong></td><td>Replace every observation with a hidden marker</td><td>Repeated calls or unsupported conclusions</td><td>Correct answer derived only from hidden observations</td></tr>
+<tr><td><strong>No reasoning</strong></td><td>Remove prior reasoning from history</td><td>Less coherent or contradictory decisions</td><td>No measurable degradation on the tested task</td></tr>
+<tr><td><strong>No history</strong></td><td>Send only system + current user each round</td><td>Restarting and repeated operations</td><td>The Agent remembers completed work anyway</td></tr>
+</tbody>
+</table>
+
+<div class="chapter-callout purple mt-4"><strong>Important:</strong> the runner verifies the request contract itself—what the provider actually received—not merely the CLI mode name.</div>`, {
+    className: "chapter-dense",
+    cue: "State predictions in falsifiable form; the no-reasoning result will matter later."
+  }));
+
+  deck.push(slide(String.raw`
+# ReAct Connects Context, Model, and Tools
+
+<div class="grid grid-cols-5 gap-5 mt-2 items-center">
+<div class="col-span-3">
+<img class="chapter-figure-large" src="/images/fig1-5.svg" alt="Execution loop of an autonomous Agent">
+</div>
+<div class="col-span-2">
+<div class="chapter-panel purple"><h3>Reason</h3><p>Given the complete current context, decide what information or action is needed next.</p></div>
+<div class="chapter-panel orange mt-3"><h3>Act</h3><p>Emit a structured tool call; the Harness executes it outside the model.</p></div>
+<div class="chapter-panel green mt-3"><h3>Observe</h3><p>Append the result, creating a richer context for the next call.</p></div>
+</div>
+</div>
+
+<div class="chapter-callout red mt-3"><strong>A loop also needs exit conditions:</strong> task complete, final-output tool called, no tool call, unrecoverable error, or maximum rounds reached.</div>`, {
+    className: "chapter-dense",
+    cue: "Explain why the name ReAct omits observation even though observation is operationally indispensable."
+  }));
+
+  deck.push(slide(String.raw`
+# Every Round Sees the Entire Trajectory So Far
+
+<img class="chapter-figure-wide mt-1" src="/images/fig1-3.svg" alt="ReAct trajectory for multi-currency revenue aggregation">
+
+<div class="grid grid-cols-3 gap-4 mt-3">
+<div class="chapter-mini blue"><strong>Round 1</strong><span>Reason about missing exchange rates; call currency tools in parallel.</span></div>
+<div class="chapter-mini green"><strong>Round 2</strong><span>Observe conversions; call the code interpreter to aggregate.</span></div>
+<div class="chapter-mini purple"><strong>Round 3</strong><span>Observe the calculation; return total and quarterly average.</span></div>
+</div>
+
+<div class="chapter-thesis-line mt-3">The trajectory is the dynamic part of the next prompt, not a log consulted after execution.</div>`, {
+    className: "chapter-dense",
+    cue: "Trace one item from action to observation to the next decision."
+  }));
+
+  deck.push(slide(String.raw`
+# The Revenue Task Completes in 3 Iterations and 4 Tool Calls
+
+<div class="grid grid-cols-2 gap-5 mt-3">
+<div>
+<pre class="chapter-code-block tall" v-pre><code>trajectory = [
+  user("Q1 $2.5M, Q2 €2.1M, Q3 £1.8M, Q4 ¥380M"),
+  assistant(
+    reasoning="Convert non-USD quarters first",
+    tool_calls=[eur_to_usd, gbp_to_usd, jpy_to_usd]),
+  tool(eur_result), tool(gbp_result), tool(jpy_result),
+  assistant(
+    reasoning="Aggregate verified USD values",
+    tool_calls=[code_interpreter(total_and_average)]),
+  tool("Total $9,602,895.73; average $2,400,723.93"),
+  assistant(content="FINAL ANSWER …"),
+]</code></pre>
+</div>
+<div>
+<h3>Why accumulation matters</h3>
+<ol class="chapter-tight-list">
+<li>The second call knows which conversions were requested.</li>
+<li>It sees the returned rates rather than inventing them.</li>
+<li>The third call sees the calculation result and knows the task is complete.</li>
+<li>Structured roles keep proposals and observations distinguishable.</li>
+</ol>
+<div class="chapter-callout orange mt-4"><strong>Without the accumulated trajectory</strong>, each round can look like the beginning of the task.</div>
+</div>
+</div>`, {
+    className: "chapter-dense",
+    cue: "Connect the pseudocode to the previous diagram; do not dwell on syntax."
+  }));
+
+  deck.push(slide(String.raw`
+# A Trajectory Is Both Runtime State and Learning Evidence
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="chapter-panel blue">
+<h3>During the current task</h3>
+<ul>
+<li>Preserves progress and unresolved work.</li>
+<li>Prevents redundant actions.</li>
+<li>Exposes why a decision followed an observation.</li>
+<li>Makes execution interpretable and debuggable.</li>
+</ul>
+</div>
+<div class="chapter-panel green">
+<h3>Across many tasks</h3>
+<ul>
+<li>Reveals recurring behavior and failure patterns.</li>
+<li>Identifies better decision paths and tool interfaces.</li>
+<li>Can be distilled into knowledge or external artifacts.</li>
+<li>Can provide data for reinforcement learning.</li>
+</ul>
+</div>
+</div>
+
+<div class="chapter-callout orange mt-5"><strong>The cost is cumulative.</strong> Every call receives the growing trajectory; long tasks therefore create token, latency, attention, and compression problems that Chapter 2 addresses directly.</div>`, {
+    className: "chapter-dense",
+    cue: "Use this slide to bridge runtime context to later chapters on compression and learning from experience."
+  }));
+
+  deck.push(slide(String.raw`
+# Live Comparison: Control, Ablation, and Retained Five-Arm Evidence
+
+<div class="grid grid-cols-2 gap-5 mt-4">
+<div class="chapter-panel blue">
+<div class="chapter-demo-head"><span>1-1A · 3 min</span><strong>Run two arms live</strong></div>
+<p>Compare the full context with <code>no_history</code> on one canonical case.</p>
+<ul class="chapter-tight-list"><li>Count iterations and tool actions.</li><li>Watch whether the same calls repeat.</li><li>Check whether a final numerical answer appears.</li></ul>
+</div>
+<div class="chapter-panel green">
+<div class="chapter-demo-head"><span>1-1B · 1 min</span><strong>Inspect the accepted five-arm artifact</strong></div>
+<p>Use the retained direct-API run to compare all arms—including the negative no-reasoning result.</p>
+<ul class="chapter-tight-list"><li>Verify evidence mode and acceptance.</li><li>Distinguish execution success from hypothesis support.</li></ul>
+</div>
+</div>
+
+<div class="chapter-callout red mt-5"><strong>Do not overclaim:</strong> the live two-arm run is a focused comparison. The complete five-arm conclusion comes from the linked accepted artifact unless all five arms are rerun during recording.</div>`, {
+    className: "chapter-dense",
+    cue: "Set expectations before the terminal: one live comparison plus one retained-evidence inspection."
+  }));
+
+  deck.push(slide(String.raw`
+<div class="course-kicker">LIVE DEMO · EXPERIMENT 1-1</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run --extra ch1 python chapter1/context/main.py --mode ablation --provider kimi --ablation-modes full no_history --cases 1 --output /tmp/ch1-context-live.json
+
+$ jq '{evidence_mode, accepted:.analysis.experiment_execution_accepted, claims:.analysis.manuscript_behavior_claims, arms:[.arms[]|{mode,iterations,actions:.behavior.tool_action_count,repeated:.behavior.has_repeated_tool_action,correct:.behavior.canonical_answer_correct}]}' chapter1/context/validation/latest.json
+~~~
+
+<div class="chapter-terminal-grid mt-4">
+<div><strong>Control</strong><span>3 iterations, 4 actions, correct total in the accepted run.</span></div>
+<div><strong>No history</strong><span>Iteration ceiling and repeated actions are the predicted signature.</span></div>
+<div><strong>Negative result</strong><span>No-reasoning remained correct in the accepted run.</span></div>
+</div>
+
+<div class="course-terminal-watch">The live API command requires <code>MOONSHOT_API_KEY</code>. The second command reads credential-free retained evidence and is safe to use if the provider is unavailable.</div>`, {
+    className: "course-terminal chapter-terminal",
+    cue: "Run the two-arm comparison, then use jq to make all five retained outcomes visible."
+  }));
+
+  deck.push(slide(String.raw`
+# The Real Ablation Result Is More Useful Than a Perfect Story
+
+<table class="chapter-table chapter-table-compact mt-3">
+<thead><tr><th>Arm</th><th>Iterations</th><th>Tool actions</th><th>Repeated?</th><th>Correct answer?</th><th>Interpretation</th></tr></thead>
+<tbody>
+<tr><td><strong>Full</strong></td><td>3</td><td>4</td><td>No</td><td>Yes</td><td>Control completed normally.</td></tr>
+<tr><td><strong>No history</strong></td><td>5, ceiling</td><td>15</td><td>Yes · 12 repeats</td><td>No answer</td><td>Lost progress and restarted work.</td></tr>
+<tr><td><strong>No reasoning</strong></td><td>3</td><td>4</td><td>No</td><td><strong>Yes</strong></td><td><strong>Expected degradation was not reproduced.</strong></td></tr>
+<tr><td><strong>No tool definitions</strong></td><td>1</td><td>0</td><td>No</td><td>No</td><td>Model declined to invent exchange rates.</td></tr>
+<tr><td><strong>No tool results</strong></td><td>5</td><td>7</td><td>Yes · 3 repeats</td><td>No</td><td>Calls ran, but observations were hidden.</td></tr>
+</tbody>
+</table>
+
+<div class="grid grid-cols-2 gap-5 mt-4">
+<div class="chapter-callout green"><strong>Execution accepted:</strong> all five direct-provider request contracts were verified and the intended ablations were actually applied.</div>
+<div class="chapter-callout orange"><strong>Manuscript hypothesis partially supported:</strong> three predicted failure mechanisms reproduced; the no-reasoning claim did not on this task and model.</div>
+</div>
+
+<div class="chapter-source">Evidence: chapter1/context/validation/latest.json · 31,870 total tokens · created 2026-07-29</div>`, {
+    className: "chapter-dense",
+    cue: "Lead with the negative result; it is stronger evidence of an honest experiment than a forced confirmation."
+  }));
+
+  deck.push(slide(String.raw`
+# Context Determines What the Agent Knows at Decision Time
+
+<div class="grid grid-cols-3 gap-5 mt-4">
+<div class="chapter-panel blue"><h3>Definitions enable action</h3><p>Without the tool schema, the model cannot recognize or call the action interface—even when it understands the task.</p></div>
+<div class="chapter-panel green"><h3>Results close the loop</h3><p>Without observations, execution does not become evidence; the Agent repeats calls or refuses to invent a result.</p></div>
+<div class="chapter-panel purple"><h3>History preserves progress</h3><p>Without earlier messages, each decision loses completed work and can restart from the original request.</p></div>
+</div>
+
+<div class="chapter-thesis-box mt-5">Before compressing or discarding context, identify the state carried by each message and the observable failure caused by losing it.</div>
+
+<div class="grid grid-cols-2 gap-4 mt-4 chapter-links">
+<a href="../chapter1/context/run_experiment_1_1.py"><strong>Complete five-arm runner</strong><span>chapter1/context/run_experiment_1_1.py</span></a>
+<a href="../book-en/chapter1.md"><strong>Chapter thought question</strong><span>How can trajectory cost stop growing quadratically without losing critical information?</span></a>
+</div>`, {
+    className: "chapter-dense",
+    cue: "Close on the experimentally supported components, then hand the compression problem to Chapter 2."
+  }));
+
+  return { markdown: deck.join("\n"), slideCount: deck.length };
+}
+
+export const chapter1PilotFigures = new Set([
+  "fig1-1.svg",
+  "fig1-2.svg",
+  "fig1-3.svg",
+  "fig1-4.svg",
+  "fig1-5.svg"
+]);
+
+export function chapter1PilotSlideCount(number) {
+  if (number === 2) return 16;
+  if (number === 3) return 15;
+  return null;
+}
+
+export function renderChapter1Pilot(lesson) {
+  if (lesson.number === 2) return renderLessonOne(lesson);
+  if (lesson.number === 3) return renderLessonTwo(lesson);
+  return null;
+}

slides/generate.mjs

@@ -0,0 +1,555 @@
+import { copyFile, mkdir, readFile, readdir, rm, writeFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+
+import { lessons } from "./course.mjs";
+import {
+  chapter1PilotFigures,
+  chapter1PilotSlideCount,
+  renderChapter1Pilot
+} from "./chapter1-pilot.mjs";
+
+const HERE = fileURLToPath(new URL(".", import.meta.url));
+const REPO = path.resolve(HERE, "..");
+const PUBLIC_IMAGES = path.join(HERE, "public", "images");
+const CJK = new RegExp("[\\u3400-\\u9fff\\uf900-\\ufaff]", "u");
+
+function fail(message) {
+  throw new Error(message);
+}
+
+function yaml(value) {
+  return JSON.stringify(value);
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}
+
+function repositoryHref(target) {
+  if (/^(?:https?:|#|mailto:)/.test(target)) return target;
+  return "../" + target.replace(/^\.\//, "");
+}
+
+function cards(items, colors = ["blue", "green", "orange"]) {
+  return [
+    '<div class="grid grid-cols-' + Math.min(items.length, 3) + ' gap-5 mt-6">',
+    ...items.map(([title, text], index) => [
+      '<div class="course-card ' + colors[index % colors.length] + '">',
+      "<h3>" + escapeHtml(title) + "</h3>",
+      "<p>" + escapeHtml(text) + "</p>",
+      "</div>"
+    ].join("\n")),
+    "</div>"
+  ].join("\n");
+}
+
+function slide(options, body, cue) {
+  const hasFrontmatter = Boolean(options.layout || options.className || options.transition);
+  const metadata = ["---"];
+  if (hasFrontmatter) {
+    if (options.layout) metadata.push("layout: " + options.layout);
+    if (options.className) metadata.push("class: " + options.className);
+    if (options.transition) metadata.push("transition: " + options.transition);
+    metadata.push("---");
+  }
+  metadata.push("", body.trim(), "");
+  if (cue) metadata.push("<!-- Presenter cue: " + cue + " -->", "");
+  return metadata.join("\n");
+}
+
+function extensionSlide(chunk, index, total) {
+  const title = total === 1 ? "Continue the experiment" : "Continue the experiment · " + index + "/" + total;
+  const columns = chunk.length > 4 ? 3 : 2;
+  const links = [
+    '<div class="grid grid-cols-' + columns + ' gap-4 mt-6">',
+    ...chunk.map(([label, target]) => [
+      '<a class="course-link" href="' + escapeHtml(repositoryHref(target)) + '">',
+      '<span class="course-link-title">' + escapeHtml(label) + "</span>",
+      '<span class="course-link-path">' + escapeHtml(target) + "</span>",
+      "</a>"
+    ].join("\n")),
+    "</div>"
+  ].join("\n");
+  return slide({}, "# " + title + "\n\n" + links, "Point viewers to the companion paths; do not walk through every extension.");
+}
+
+function demoMinutes(lesson) {
+  return lesson.experiments.reduce((sum, item) => sum + item.duration, 0);
+}
+
+function extensionChunks(lesson) {
+  if (lesson.extensions.length <= 6) return [lesson.extensions];
+  const split = Math.ceil(lesson.extensions.length / 2);
+  return [lesson.extensions.slice(0, split), lesson.extensions.slice(split)];
+}
+
+function isDemoHeavy(lesson) {
+  return demoMinutes(lesson) >= 5;
+}
+
+function movementFor(lesson) {
+  if (lesson.number <= 21) return "Build";
+  if (lesson.number <= 34) return "Improve";
+  return "Expand";
+}
+
+function chapterLessonsFor(lesson) {
+  return lessons.filter((candidate) => candidate.chapter === lesson.chapter);
+}
+
+function isChapterStart(lesson) {
+  return chapterLessonsFor(lesson).at(0)?.number === lesson.number;
+}
+
+function chapterMap(lesson) {
+  const chapterLessons = chapterLessonsFor(lesson);
+  return [
+    '<div class="course-kicker">' + escapeHtml(movementFor(lesson) + " · " + lesson.chapter + " · " + lesson.part) + "</div>",
+    "",
+    "# Problems this chapter will solve",
+    "",
+    cards(chapterLessons.map((candidate) => [
+      "Lesson " + String(candidate.number).padStart(2, "0"),
+      candidate.title
+    ]), ["blue", "green", "purple"])
+  ].join("\n");
+}
+
+function plannedSlideCount(lesson) {
+  const pilotCount = chapter1PilotSlideCount(lesson.number);
+  if (pilotCount !== null) return pilotCount;
+  const extraExtensionSlides = Math.max(0, extensionChunks(lesson).length - 1);
+  const compactedSlides = isDemoHeavy(lesson) ? (isChapterStart(lesson) ? 1 : 2) : 0;
+  return 15 + extraExtensionSlides + (lesson.synthesis ? 1 : 0) - compactedSlides;
+}
+
+function selectedLessonNumbers() {
+  const optionIndex = process.argv.indexOf("--lessons");
+  if (optionIndex === -1) return null;
+  const value = process.argv[optionIndex + 1];
+  if (!value) fail("--lessons requires a comma-separated list such as 2,3");
+  const numbers = value.split(",").map((item) => Number(item.trim()));
+  if (numbers.some((number) => !Number.isInteger(number) || number < 1 || number > lessons.length)) {
+    fail("--lessons values must be integers from 1 to " + lessons.length);
+  }
+  return new Set(numbers);
+}
+
+function lessonDuration(lesson) {
+  return plannedSlideCount(lesson) + demoMinutes(lesson);
+}
+
+function renderLesson(lesson) {
+  const lessonNo = String(lesson.number).padStart(2, "0");
+  const deck = [];
+
+  deck.push([
+    "---",
+    "theme: seriph",
+    "title: " + yaml("Lesson " + lessonNo + " — " + lesson.title),
+    "info: " + yaml("English video course for AI Agents in Depth"),
+    "author: Bojie Li",
+    "transition: slide-left",
+    "mdc: true",
+    "lineNumbers: false",
+    "monaco: false",
+    "aspectRatio: 16/9",
+    "canvasWidth: 980",
+    "layout: cover",
+    "class: cover",
+    "---",
+    "",
+    '<div class="course-kicker">' + escapeHtml(movementFor(lesson) + " · " + lesson.chapter + " · " + lesson.part) + "</div>",
+    "",
+    "# " + lesson.title,
+    "",
+    '<p class="course-subtitle">' + escapeHtml(lesson.subtitle) + "</p>",
+    "",
+    '<div class="course-cover-meta">Lesson ' + lessonNo + " of 42 · " + lessonDuration(lesson) + " minutes · " + escapeHtml(lesson.book) + "</div>",
+    "",
+    "<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->",
+    ""
+  ].join("\n"));
+
+  if (isChapterStart(lesson) && lesson.chapter !== "Introduction") {
+    deck.push(slide(
+      {},
+      chapterMap(lesson),
+      "Orient viewers to the chapter. Name the progression, then highlight today's first problem."
+    ));
+  } else if (!isDemoHeavy(lesson)) {
+    deck.push(slide(
+      { layout: "center", className: "text-center" },
+      '<div class="course-kicker">The central question</div>\n\n<div class="course-big">' + escapeHtml(lesson.question) + "</div>",
+      "Let the question sit for a moment, then state the failure mode the lesson will explain."
+    ));
+  }
+
+  deck.push(slide(
+    {},
+    "# Why this problem matters\n\n" + cards(lesson.stakes),
+    "Connect each card to a product or experiment consequence."
+  ));
+
+  deck.push(slide(
+    {},
+    "# Three ideas to keep in view\n\n" + cards(lesson.concepts, ["purple", "blue", "green"]),
+    "Define unfamiliar terms in plain language; the audience is new to ML training and RL."
+  ));
+
+  deck.push(slide(
+    {},
+    "# The book's visual model\n\n" +
+      '<img class="course-figure" src="/images/' + escapeHtml(lesson.figure) + '" alt="' + escapeHtml(lesson.figureAlt) + '">\n\n' +
+      '<div class="course-caption">' + escapeHtml(lesson.figureAlt) + "</div>",
+    "Trace the diagram in one direction and name the mechanism that matters for this lesson."
+  ));
+
+  deck.push(slide(
+    {},
+    "# " + escapeHtml(lesson.contrast.leftTitle) + " vs. " + escapeHtml(lesson.contrast.rightTitle) + "\n\n" +
+      '<div class="grid grid-cols-2 gap-6 mt-5">\n' +
+      '<div class="course-card orange"><h3>' + escapeHtml(lesson.contrast.leftTitle) + "</h3><ul>" +
+      lesson.contrast.left.map((item) => "<li>" + escapeHtml(item) + "</li>").join("") +
+      "</ul></div>\n" +
+      '<div class="course-card green"><h3>' + escapeHtml(lesson.contrast.rightTitle) + "</h3><ul>" +
+      lesson.contrast.right.map((item) => "<li>" + escapeHtml(item) + "</li>").join("") +
+      "</ul></div>\n</div>\n\n" +
+      '<div class="course-caption course-caption-strong">' + escapeHtml(lesson.contrast.caption) + "</div>",
+    "Explain the trade-off; avoid presenting the right column as universally superior."
+  ));
+
+  deck.push(slide(
+    {},
+    "# " + lesson.code.title + "\n\n~~~" + lesson.code.lang + "\n" + lesson.code.lines.join("\n") + "\n~~~",
+    "Walk through the executable idea line by line; keep implementation details for the terminal."
+  ));
+
+  const experimentCards = lesson.experiments.map((experiment) => [
+    '<div class="course-card blue">',
+    '<div class="course-demo-head"><span>' + escapeHtml(experiment.id) + "</span><span>" + experiment.duration + " min</span></div>",
+    "<h3>" + escapeHtml(experiment.name) + "</h3>",
+    '<p><strong>Observe:</strong> ' + escapeHtml(experiment.watch) + "</p>",
+    "</div>"
+  ].join("\n"));
+  deck.push(slide(
+    {},
+    "# Test the claim\n\n" +
+      '<div class="grid grid-cols-' + Math.min(lesson.experiments.length, 3) + ' gap-4 mt-5">\n' + experimentCards.join("\n") + "\n</div>\n\n" +
+      (() => {
+        const minutes = demoMinutes(lesson);
+        return '<div class="course-caption course-caption-strong">Demo budget: ' + minutes + " " + (minutes === 1 ? "minute" : "minutes") + " · one contiguous terminal block</div>";
+      })(),
+    "State the prediction before running anything. Name the observation that could disconfirm it."
+  ));
+
+  const commands = lesson.experiments.map((experiment) => "$ " + experiment.command).join("\n\n");
+  deck.push(slide(
+    { className: "course-terminal" },
+    '<div class="course-kicker">Live demo</div>\n\n# Switching to the terminal\n\n~~~bash\n' + commands + "\n~~~\n\n" +
+      '<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>',
+    "Switch windows now. Return to the next slide after every listed experiment is complete."
+  ));
+
+  deck.push(slide(
+    {},
+    "# What the evidence supports\n\n" + cards(lesson.findings.map((item, index) => ["Finding " + (index + 1), item]), ["green", "blue", "purple"]),
+    "Tie each finding to something viewers just observed; distinguish evidence from interpretation."
+  ));
+
+  if (isDemoHeavy(lesson)) {
+    deck.push(slide(
+      {},
+      "# Boundary → design rule\n\n" +
+        '<div class="course-boundary">' + escapeHtml(lesson.boundary) + "</div>\n\n" +
+        '<div class="course-rule">' + escapeHtml(lesson.rule) + "</div>",
+      "State where the evidence stops, then turn that limitation into a reusable engineering rule."
+    ));
+  } else {
+    deck.push(slide(
+      { layout: "center" },
+      '<div class="course-kicker course-kicker-red">Where the claim stops</div>\n\n# Boundary condition\n\n<div class="course-boundary">' + escapeHtml(lesson.boundary) + "</div>",
+      "Say explicitly what this experiment does not establish."
+    ));
+
+    deck.push(slide(
+      { layout: "center" },
+      '<div class="course-kicker">Engineering takeaway</div>\n\n# Design rule\n\n<div class="course-rule">' + escapeHtml(lesson.rule) + "</div>",
+      "Present this as a reusable decision rule, then give one counterexample or trade-off."
+    ));
+  }
+
+  const chunks = extensionChunks(lesson);
+  chunks.forEach((chunk, index) => {
+    deck.push(extensionSlide(chunk, index + 1, chunks.length));
+  });
+
+  if (lesson.synthesis) {
+    deck.push(slide(
+      {},
+      "# The complete course arc\n\n" + cards(lesson.synthesis, ["blue", "green", "purple"]),
+      "Return to the three-part arc from Lesson 1 and connect each stage to evidence viewers saw in the course."
+    ));
+  }
+
+  deck.push(slide(
+    { layout: "center", className: "text-center" },
+    '<div class="course-kicker">Pause and apply</div>\n\n# Your turn\n\n<div class="course-big course-reflection">' + escapeHtml(lesson.reflection) + "</div>",
+    "Invite viewers to pause the video. Offer your own answer after a short beat."
+  ));
+
+  const followingLesson = lessons[lesson.number];
+  const movementEnds = followingLesson && movementFor(followingLesson) !== movementFor(lesson);
+  const chapterEnds = followingLesson && followingLesson.chapter !== lesson.chapter;
+  const nextLabel = lesson.number === lessons.length
+    ? "Course synthesis"
+    : movementEnds
+      ? movementFor(lesson) + " complete · Next · Lesson " + String(lesson.number + 1).padStart(2, "0")
+      : chapterEnds
+        ? lesson.chapter + " complete · Next · Lesson " + String(lesson.number + 1).padStart(2, "0")
+        : "Next · Lesson " + String(lesson.number + 1).padStart(2, "0");
+  if (lesson.number === lessons.length) {
+    deck.push(slide(
+      { layout: "center", className: "text-center" },
+      '<div class="course-kicker">' + nextLabel + '</div>\n\n' +
+        '<div class="course-loop mt-8">\n' +
+        '<div class="course-loop-step blue"><span>1</span><strong>Define the failure</strong></div>\n' +
+        '<div class="course-loop-arrow">→</div>\n' +
+        '<div class="course-loop-step green"><span>2</span><strong>Run a controlled experiment</strong></div>\n' +
+        '<div class="course-loop-arrow">→</div>\n' +
+        '<div class="course-loop-step purple"><span>3</span><strong>Interpret the evidence</strong></div>\n' +
+        '<div class="course-loop-arrow">→</div>\n' +
+        '<div class="course-loop-step orange"><span>4</span><strong>Update safely</strong></div>\n' +
+        '</div>\n\n' +
+        '<div class="course-loop-return">↺ Repeat when new evidence arrives</div>',
+      "Close by tracing the evidence-driven loop from Lesson 1, then leave viewers with the repeat trigger."
+    ));
+  } else {
+    deck.push(slide(
+      { layout: "center", className: "text-center" },
+      '<div class="course-kicker">' + nextLabel + '</div>\n\n<div class="course-next">' + escapeHtml(lesson.next) + '</div>\n\n<div class="course-next-arrow">→</div>',
+      "Use this transition to make the course feel continuous rather than episodic."
+    ));
+  }
+
+  return { markdown: deck.join("\n"), slideCount: deck.length };
+}
+
+function validateLesson(lesson, index) {
+  const required = [
+    "number", "chapter", "part", "title", "subtitle", "book", "figure",
+    "figureAlt", "question", "stakes", "concepts", "contrast", "code", "experiments",
+    "findings", "boundary", "rule", "extensions", "reflection", "next"
+  ];
+  for (const field of required) {
+    if (lesson[field] === undefined || lesson[field] === null || lesson[field] === "") {
+      fail("Lesson " + lesson.number + " is missing " + field);
+    }
+  }
+  if (lesson.number !== index + 1) fail("Lessons must be consecutive at index " + index);
+  if (!lesson.title.endsWith("?")) fail("Lesson " + lesson.number + " must have a problem-oriented question title");
+  if (lesson.stakes.length !== 3 || lesson.concepts.length !== 3 || lesson.findings.length !== 3) {
+    fail("Lesson " + lesson.number + " must have three stakes, concepts, and findings");
+  }
+  if (lesson.experiments.length < 1 || lesson.experiments.length > 3) {
+    fail("Lesson " + lesson.number + " must have one to three experiments");
+  }
+  for (const experiment of lesson.experiments) {
+    for (const field of ["id", "name", "duration", "command", "watch", "mode", "path"]) {
+      if (experiment[field] === undefined || experiment[field] === null || experiment[field] === "") {
+        fail("Lesson " + lesson.number + " experiment is missing " + field);
+      }
+    }
+    if (experiment.duration < 1 || experiment.duration > 3) {
+      fail("Lesson " + lesson.number + " experiment duration must be one to three minutes");
+    }
+  }
+  const target = lessonDuration(lesson);
+  if (target < 15 || target > 20) {
+    fail("Lesson " + lesson.number + " plans " + target + " minutes; expected 15–20");
+  }
+  const visible = JSON.stringify({
+    title: lesson.title,
+    subtitle: lesson.subtitle,
+    book: lesson.book,
+    figureAlt: lesson.figureAlt,
+    question: lesson.question,
+    stakes: lesson.stakes,
+    concepts: lesson.concepts,
+    contrast: lesson.contrast,
+    code: lesson.code,
+    experiments: lesson.experiments,
+    findings: lesson.findings,
+    boundary: lesson.boundary,
+    rule: lesson.rule,
+    extensions: lesson.extensions,
+    synthesis: lesson.synthesis,
+    reflection: lesson.reflection,
+    next: lesson.next
+  });
+  if (CJK.test(visible)) fail("Lesson " + lesson.number + " contains CJK characters in visible metadata");
+  const sourceFigure = path.join(REPO, "book-en", "images", lesson.figure);
+  if (!existsSync(sourceFigure)) fail("Missing figure for Lesson " + lesson.number + ": " + lesson.figure);
+  for (const [, target] of lesson.extensions) {
+    if (!/^(?:https?:|#|mailto:)/.test(target) && !existsSync(path.join(REPO, target))) {
+      fail("Lesson " + lesson.number + " links a missing extension: " + target);
+    }
+  }
+  for (const experiment of lesson.experiments) {
+    if (!existsSync(path.join(REPO, experiment.path))) {
+      fail("Lesson " + lesson.number + " links a missing experiment path: " + experiment.path);
+    }
+  }
+}
+
+function outline() {
+  const groups = [];
+  for (const lesson of lessons) {
+    const current = groups.at(-1);
+    if (!current || current.chapter !== lesson.chapter) {
+      groups.push({ chapter: lesson.chapter, lessons: [lesson] });
+    } else {
+      current.lessons.push(lesson);
+    }
+  }
+  const allocationRows = groups.map(({ chapter, lessons: chapterLessons }) => {
+    const first = chapterLessons.at(0).number;
+    const last = chapterLessons.at(-1).number;
+    const range = first === last ? String(first) : first + "–" + last;
+    return "| " + chapter + " | " + range + " | " + chapterLessons.length + " |";
+  });
+  const lessonSections = groups.flatMap(({ chapter, lessons: chapterLessons }) => [
+    "### " + chapter,
+    "",
+    "| Lesson | Problem-oriented title | Main learning outcome | Live anchor(s) | Slides | Demo | Target |",
+    "| ---: | --- | --- | --- | ---: | ---: | ---: |",
+    ...chapterLessons.map((lesson) => {
+      const lessonNo = String(lesson.number).padStart(2, "0");
+      const demos = lesson.experiments.map((item) => item.id).join(", ");
+      return "| [" + lessonNo + "](lesson-" + lessonNo + ".md) | " + lesson.title + " | " + lesson.subtitle + " | " + demos + " | " + plannedSlideCount(lesson) + " | " + demoMinutes(lesson) + " min | " + lessonDuration(lesson) + " min |";
+    }),
+    ""
+  ]);
+  return [
+    "# AI Agents in Depth — English Video Course",
+    "",
+    "Approved Option B curriculum: 42 problem-oriented lessons following the English book order. Each lesson is 15–20 minutes, budgeting approximately one minute per Slidev slide plus one to three minutes per live experiment.",
+    "",
+    "## Learning arc",
+    "",
+    "| Movement | Chapters | Viewer progression |",
+    "| --- | --- | --- |",
+    "| Build an Agent | Introduction–Chapter 5 | Context → memory → tools → executable capabilities |",
+    "| Improve it scientifically | Chapters 6–8 | Evaluation → post-training → continual evolution |",
+    "| Expand it | Chapters 9–10 | Voice → Computer Use → robotics → multi-Agent collaboration |",
+    "",
+    "## Approved chapter allocation",
+    "",
+    "| Book section | Lessons | Count |",
+    "| --- | ---: | ---: |",
+    ...allocationRows,
+    "| **Total** | **1–42** | **42** |",
+    "",
+    "Chapter 7 intentionally receives six lessons because post-training and reinforcement learning are the largest conceptual jump for viewers without prior ML-training knowledge. Chapter 9 receives four lessons so Computer Use and robotics have separate mechanisms, experiments, and safety boundaries.",
+    "",
+    "## Lesson-by-lesson outline",
+    "",
+    ...lessonSections,
+    "",
+    "## Recording contract",
+    "",
+    "- Speak in your own voice and add interpretation; the decks are visual prompts, not narration scripts.",
+    "- Run the listed commands in one contiguous terminal block after the explicit handoff slide.",
+    "- Treat preflights, validators, smoke checks, and dry configurations as scoped evidence—not completed long campaigns.",
+    "- Use the linked companion projects for experiments that are not demonstrated live.",
+    "- Demo-heavy lessons combine or remove conceptual slides so slide time plus terminal time stays within 20 minutes.",
+    ""
+  ].join("\n");
+}
+
+async function main() {
+  if (lessons.length !== 42) fail("Expected exactly 42 lessons; found " + lessons.length);
+  lessons.forEach(validateLesson);
+
+  const allocation = new Map();
+  for (const lesson of lessons) allocation.set(lesson.chapter, (allocation.get(lesson.chapter) || 0) + 1);
+  const expectedAllocation = new Map([
+    ["Introduction", 1], ["Chapter 1", 3], ["Chapter 2", 5], ["Chapter 3", 4],
+    ["Chapter 4", 4], ["Chapter 5", 4], ["Chapter 6", 4], ["Chapter 7", 6],
+    ["Chapter 8", 3], ["Chapter 9", 4], ["Chapter 10", 4]
+  ]);
+  if (JSON.stringify([...allocation]) !== JSON.stringify([...expectedAllocation])) {
+    fail("Lesson allocation does not match approved Option B");
+  }
+
+  const bookText = (await Promise.all(Array.from({ length: 10 }, (_, index) =>
+    readFile(path.join(REPO, "book-en", "chapter" + (index + 1) + ".md"), "utf8")
+  ))).join("\n");
+  const experimentIds = [...new Set([...bookText.matchAll(/Experiment\s+(\d+-\d+)/g)].map((match) => match[1]))];
+  const courseText = JSON.stringify(lessons);
+  const missingExperiments = experimentIds.filter((id) => !courseText.includes(id));
+  if (missingExperiments.length) fail("Unlinked book experiments: " + missingExperiments.join(", "));
+
+  await mkdir(PUBLIC_IMAGES, { recursive: true });
+  const selection = selectedLessonNumbers();
+  const targetLessons = selection
+    ? lessons.filter((lesson) => selection.has(lesson.number))
+    : lessons;
+  if (selection && targetLessons.length !== selection.size) fail("Could not resolve every requested lesson");
+
+  const figures = new Set([...lessons.map((lesson) => lesson.figure), ...chapter1PilotFigures]);
+  for (const figure of figures) {
+    const source = await readFile(path.join(REPO, "book-en", "images", figure), "utf8");
+    if (CJK.test(source)) fail("Selected figure contains non-English visible text: " + figure);
+  }
+  await Promise.all([...figures].map((figure) => copyFile(
+    path.join(REPO, "book-en", "images", figure),
+    path.join(PUBLIC_IMAGES, figure)
+  )));
+  if (!selection) {
+    const staleFigures = (await readdir(PUBLIC_IMAGES))
+      .filter((figure) => figure.endsWith(".svg") && !figures.has(figure))
+      .map((figure) => path.join(PUBLIC_IMAGES, figure));
+    await Promise.all(staleFigures.map((figure) => rm(figure)));
+  }
+
+  const expectedDecks = new Set();
+  let totalSlides = 0;
+  for (const lesson of targetLessons) {
+    const lessonNo = String(lesson.number).padStart(2, "0");
+    const name = "lesson-" + lessonNo + ".md";
+    expectedDecks.add(name);
+    const rendered = renderChapter1Pilot(lesson) ?? renderLesson(lesson);
+    if (rendered.slideCount !== plannedSlideCount(lesson)) {
+      fail("Lesson " + lesson.number + " rendered " + rendered.slideCount + " slides; planned " + plannedSlideCount(lesson));
+    }
+    if ((rendered.markdown.match(/Switching to the terminal/g) || []).length !== 1) {
+      fail("Lesson " + lesson.number + " must contain exactly one terminal handoff");
+    }
+    totalSlides += rendered.slideCount;
+    await writeFile(path.join(HERE, name), rendered.markdown, "utf8");
+  }
+
+  if (!selection) {
+    const stale = [];
+    for (let number = 43; number <= 99; number += 1) {
+      const name = "lesson-" + String(number).padStart(2, "0") + ".md";
+      const target = path.join(HERE, name);
+      if (existsSync(target) && !expectedDecks.has(name)) stale.push(target);
+    }
+    await Promise.all(stale.map((target) => rm(target)));
+    await writeFile(path.join(HERE, "COURSE_OUTLINE.md"), outline(), "utf8");
+  }
+
+  const scope = selection ? targetLessons.length + " selected Slidev decks" : "42 Slidev decks";
+  const outlineStatus = selection ? "without changing COURSE_OUTLINE.md" : "with COURSE_OUTLINE.md";
+  console.log("Generated " + scope + " (" + totalSlides + " slides), " + outlineStatus + ", and synchronized " + figures.size + " figure assets.");
+}
+
+await main();

slides/lesson-01.md

@@ -0,0 +1,238 @@
+---
+theme: seriph
+title: "Lesson 01 — How Do We Replace Agent Intuition with Evidence?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Introduction · Orientation</div>
+
+# How Do We Replace Agent Intuition with Evidence?
+
+<p class="course-subtitle">A practice-first map of AI Agents in Depth</p>
+
+<div class="course-cover-meta">Lesson 01 of 42 · 16 minutes · Introduction; Book Structure; How to Read This Book</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">Why do impressive Agent demos so often fail to become reliable products?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Demo success</h3>
+<p>One lucky trajectory proves possibility—not reliability.</p>
+</div>
+<div class="course-card green">
+<h3>Engineering judgment</h3>
+<p>Every design choice needs a mechanism and a trade-off.</p>
+</div>
+<div class="course-card orange">
+<h3>Scientific progress</h3>
+<p>Without evaluation, change is indistinguishable from luck.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Build</h3>
+<p>Context, knowledge, tools, and code generation</p>
+</div>
+<div class="course-card blue">
+<h3>Improve</h3>
+<p>Evaluation, post-training, and continual evolution</p>
+</div>
+<div class="course-card green">
+<h3>Expand</h3>
+<p>Voice, Computer Use, robotics, and collaboration</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig0-2.svg" alt="The four-part structure of the book">
+
+<div class="course-caption">The four-part structure of the book</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Demo-driven vs. Principle-driven
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Demo-driven</h3><ul><li>Start with a framework</li><li>Celebrate one successful run</li><li>Change prompts by intuition</li></ul></div>
+<div class="course-card green"><h3>Principle-driven</h3><ul><li>Start with a failure mode</li><li>Run a controlled comparison</li><li>Turn evidence into a design rule</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">The course follows the right-hand loop.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# The course's experimental loop
+
+~~~python
+question = define_failure_mode()
+hypothesis = predict_mechanism(question)
+evidence = run_controlled_experiment(hypothesis)
+rule = interpret(evidence, limitations=True)
+evaluate(rule)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-1 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>Course tour</span><span>1 min</span></div>
+<h3>Inspect one companion experiment before running it</h3>
+<p><strong>Observe:</strong> Entry point, modes, providers, outputs, and reproducibility controls</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 1 minute · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter1/context/main.py --help
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>The book is organized around recurring engineering questions, not products.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Experiments expose mechanisms through controls, ablations, and receipts.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>The author's interpretation—not terminal output alone—is the course's value.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">A short lesson cannot reproduce every long-running campaign. It can make the protocol and evidence traceable.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Never present an Agent result without first stating what would count as success or failure.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../docs/en/LEARNING.md">
+<span class="course-link-title">Learning paths</span>
+<span class="course-link-path">docs/en/LEARNING.md</span>
+</a>
+<a class="course-link" href="../book-en/introduction.md">
+<span class="course-link-title">Book prerequisites</span>
+<span class="course-link-path">book-en/introduction.md</span>
+</a>
+<a class="course-link" href="../docs/en/README.md">
+<span class="course-link-title">Companion project index</span>
+<span class="course-link-path">docs/en/README.md</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which Agent claim have you accepted after seeing only one successful run?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Introduction complete · Next · Lesson 02</div>
+
+<div class="course-next">Define an Agent by the interfaces that connect it to the world.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-02.md

@@ -0,0 +1,434 @@
+---
+theme: seriph
+title: "Chapter 1 · Lesson 1 — What Turns an LLM into an Agent?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: chapter-formula-cover
+---
+
+<div class="chapter-kicker">BUILD · CHAPTER 1 · AGENT FUNDAMENTALS</div>
+
+# What Turns an LLM into an Agent?
+
+<div class="chapter-equation mt-7">
+  <div class="chapter-equation-term blue"><strong>LLM</strong><span>Reasoning engine</span><small>Understand · plan · decide</small></div>
+  <div class="chapter-equation-sign">+</div>
+  <div class="chapter-equation-term green"><strong>Context</strong><span>Working set</span><small>Observe · remember · retrieve</small></div>
+  <div class="chapter-equation-sign">+</div>
+  <div class="chapter-equation-term orange"><strong>Tools</strong><span>Action interfaces</span><small>Search · execute · communicate</small></div>
+</div>
+
+<div class="chapter-cover-thesis">Agent = Reasoning Engine + Working Context + Action Interfaces</div>
+
+<div class="chapter-cover-footer"><span>Bojie Li · AI Agents in Depth</span><span>Course Lesson 02 of 42 · 18 minutes</span></div>
+
+<!-- Presenter cue: Introduce the chapter thesis through the formula; the slide already carries the factual structure. -->
+
+---
+class: chapter-dense
+---
+
+# You Have Already Used an AI Agent
+
+<div class="chapter-lead">Chapter 1 begins with products that have crossed the boundary from <strong>answering</strong> to <strong>acting</strong>.</div>
+
+<table class="chapter-table mt-4">
+<thead><tr><th>Product</th><th>What it observes</th><th>What it does</th><th>How it adapts</th></tr></thead>
+<tbody>
+<tr><td><strong>Cursor</strong></td><td>Requirements, codebase, terminal</td><td>Searches, edits, runs tests</td><td>Debugs until tests pass</td></tr>
+<tr><td><strong>Deep Research</strong></td><td>Web, papers, local files</td><td>Searches, reads, synthesizes</td><td>Changes the research direction</td></tr>
+<tr><td><strong>Manus</strong></td><td>Browser, files, screen</td><td>Clicks, types, executes code</td><td>Replans from interface feedback</td></tr>
+<tr><td><strong>Doubao</strong></td><td>Phone screen and apps</td><td>Opens, swipes, types, confirms</td><td>Responds to the app state</td></tr>
+<tr><td><strong>Pine AI</strong></td><td>Accounts, bills, provider knowledge</td><td>Calls, emails, negotiates</td><td>Adjusts strategy during the task</td></tr>
+</tbody>
+</table>
+
+<div class="chapter-callout green mt-4"><strong>Shared trait:</strong> they plan execution steps, call the tools a task requires, and revise their strategy as results arrive.</div>
+
+<!-- Presenter cue: Use the products to establish the behavioral shift described in the chapter opening. -->
+
+---
+class: chapter-dense
+---
+
+# One Formula, Three Levels of Description
+
+<table class="chapter-table chapter-table-roomy mt-5">
+<thead><tr><th>Intuition</th><th>Agent component</th><th>RL term <span class="chapter-muted">(optional)</span></th><th>Responsibility</th></tr></thead>
+<tbody>
+<tr><td><strong>Reasoning engine</strong></td><td><strong>LLM</strong></td><td>Policy</td><td>Given current information, choose what to do next.</td></tr>
+<tr><td><strong>Working context</strong></td><td><strong>Context</strong></td><td>Observation space</td><td>Everything the Agent can observe, read, remember, and retrieve.</td></tr>
+<tr><td><strong>Action interfaces</strong></td><td><strong>Tools</strong></td><td>Action space</td><td>Everything the Agent can do—from messages and APIs to code and GUI control.</td></tr>
+</tbody>
+</table>
+
+<div class="grid grid-cols-2 gap-5 mt-5">
+<div class="chapter-callout blue"><strong>The minimal system:</strong> LLM + context + tools is enough to demonstrate an Agent loop.</div>
+<div class="chapter-callout orange"><strong>The production question:</strong> later in the chapter, Harness Engineering adds constraints, verification, and correction.</div>
+</div>
+
+<!-- Presenter cue: Define the three terms broadly, then mention that the RL column is only a vocabulary bridge. -->
+
+---
+class: chapter-dense
+---
+
+# Observation + Action Spaces Are the Agent's ISA
+
+<div class="chapter-lead">Hennessy and Patterson use the instruction set architecture as the interface between software and hardware. Chapter 1 applies the same idea to Agents.</div>
+
+<div class="chapter-interface mt-6">
+  <div class="chapter-interface-world"><strong>External world</strong><span>Web · files · apps · people</span></div>
+  <div class="chapter-interface-arrow"><span>Observation space</span>→</div>
+  <div class="chapter-interface-model"><strong>LLM</strong><span>Reasons over what enters context</span></div>
+  <div class="chapter-interface-arrow"><span>Action space</span>→</div>
+  <div class="chapter-interface-world"><strong>External world</strong><span>Changed by tool execution</span></div>
+</div>
+
+<div class="grid grid-cols-2 gap-5 mt-6">
+<div class="chapter-callout red"><strong>Outside the observation space:</strong> information effectively does not exist for the model.</div>
+<div class="chapter-callout orange"><strong>Outside the action space:</strong> the model can recommend an operation, but it cannot perform it.</div>
+</div>
+
+<div class="chapter-thesis-line mt-5">With the model held constant, expanding the right context or tool can make a previously unsolvable task solvable—without retraining.</div>
+
+<!-- Presenter cue: Trace the interface in both directions and emphasize the held-constant-model condition. -->
+
+---
+class: chapter-dense
+---
+
+# Generality Often Comes from Expanding the Interface Boundary
+
+<div class="grid grid-cols-2 gap-6 mt-4">
+<div class="chapter-panel blue">
+<h3>Manus: unite previously separate spaces</h3>
+<ul>
+<li><strong>Deep Research:</strong> the web enlarges observation.</li>
+<li><strong>Coding:</strong> files and code execution enlarge action.</li>
+<li><strong>Computer Use:</strong> screen perception and clicking enter both spaces.</li>
+</ul>
+<p class="chapter-conclusion">Its generality did not come merely from swapping in a stronger model; it took the union of three earlier Agent categories.</p>
+</div>
+<div class="chapter-panel green">
+<h3>OpenClaw: extend into the user's digital life</h3>
+<ul>
+<li>Messaging channels make the Agent reachable from almost anywhere.</li>
+<li>A local-first Gateway reaches authorized local files and cloud applications.</li>
+<li>Plugins and Skills enlarge the action interface on demand.</li>
+</ul>
+<p class="chapter-conclusion">The product boundary moves outward—but authorization, relevance, and verification must move with it.</p>
+</div>
+</div>
+
+<div class="chapter-callout orange mt-4"><strong>Expansion is not “include everything.”</strong> Irrelevant context adds noise; too many tools increase selection cost and security risk. Useful expansion is on-demand, relevant, and controlled.</div>
+
+<!-- Presenter cue: Use Manus and OpenClaw exactly as the chapter uses them: as interface-expansion examples. -->
+
+---
+class: chapter-dense
+---
+
+# Five Agent Products, Compared on the Same Three Dimensions
+
+<table class="chapter-table chapter-table-compact mt-3">
+<thead><tr><th>Agent type</th><th>Working context</th><th>Action interfaces</th><th>Execution strategy</th></tr></thead>
+<tbody>
+<tr><td><strong>Coding</strong></td><td>Requirements, repository, terminal</td><td>Search, read/write files, commands</td><td>Understand → edit → test → debug</td></tr>
+<tr><td><strong>Search</strong></td><td>Web, academic databases, local files</td><td>Queries, web reading, synthesis</td><td>Iteratively deepen and redirect research</td></tr>
+<tr><td><strong>Computer control</strong></td><td>Screen, browser, file system</td><td>Click, type, scroll, screenshot, code</td><td>Observe interface → act → verify</td></tr>
+<tr><td><strong>Phone assistant</strong></td><td>Phone screen, installed applications</td><td>Click, swipe, type, open apps</td><td>Understand intent → operate → confirm</td></tr>
+<tr><td><strong>Personal task</strong></td><td>Accounts, bills, provider knowledge</td><td>Calls, email, forms, user confirmation</td><td>Gather → plan → contact → negotiate → report</td></tr>
+</tbody>
+</table>
+
+<div class="grid grid-cols-3 gap-4 mt-4">
+<div class="chapter-mini blue"><strong>Open-ended action</strong><span>Generate language and code—not select only from fixed buttons.</span></div>
+<div class="chapter-mini purple"><strong>Internal reasoning</strong><span>Plan before changing the environment.</span></div>
+<div class="chapter-mini green"><strong>Continuous interaction</strong><span>Use environmental feedback to choose the next step.</span></div>
+</div>
+
+<!-- Presenter cue: Compare products by architecture rather than by brand or feature list. -->
+
+---
+class: chapter-dense
+---
+
+# Tools Are More Than Callable APIs
+
+<div class="chapter-five-grid mt-5">
+<div class="chapter-panel blue"><h3>1 · Perception</h3><p>Bring information into the Agent: search, files, APIs, databases.</p></div>
+<div class="chapter-panel green"><h3>2 · Execution</h3><p>Change external systems: code, files, commands, service APIs.</p></div>
+<div class="chapter-panel purple"><h3>3 · Collaboration</h3><p>Delegate to sub-agents, request human confirmation, coordinate work.</p></div>
+<div class="chapter-panel orange"><h3>4 · Event triggers</h3><p>Email, schedules, and Webhooks activate the Agent; the Agent does not call them.</p></div>
+<div class="chapter-panel red"><h3>5 · User communication</h3><p>Report progress or ask questions by message, voice, or email.</p></div>
+</div>
+
+<div class="chapter-thesis-line mt-5">Tool quality defines what the Agent can accomplish reliably: vague interfaces cause misuse, weak error handling causes stalls, and broad permissions turn mistakes into irreversible actions.</div>
+
+<!-- Presenter cue: Preserve the chapter's broad definition of tools, especially event triggers and communication channels. -->
+
+---
+class: chapter-dense
+---
+
+# Tool Calling Is a Four-Step Context Update
+
+<div class="grid grid-cols-2 gap-4 mt-4 chapter-code-grid">
+<div><div class="chapter-step-label">1 · Declare the interface</div>
+<pre class="chapter-code-block" v-pre><code>{
+  "name": "get_weather",
+  "parameters": {"city": "string"}
+}</code></pre>
+</div>
+<div><div class="chapter-step-label">2 · The model decides</div>
+<pre class="chapter-code-block" v-pre><code>{
+  "tool_calls": [{
+    "name": "get_weather",
+    "arguments": {"city": "Beijing"}
+  }]
+}</code></pre>
+</div>
+<div><div class="chapter-step-label">3 · Execute and append the result</div>
+<pre class="chapter-code-block" v-pre><code>{
+  "role": "tool",
+  "tool_call_id": "call_1",
+  "content": "{\"temp\":28,\"sky\":\"clear\"}"
+}</code></pre>
+</div>
+<div><div class="chapter-step-label">4 · Decide again from the new context</div>
+<pre class="chapter-code-block" v-pre><code>{
+  "role": "assistant",
+  "content": "Today in Beijing: 28°C, sunny."
+}</code></pre>
+</div>
+</div>
+
+<div class="chapter-callout blue mt-3"><strong>Division of responsibility:</strong> the developer declares and executes tools; the model decides whether to call one, which one, and with what arguments.</div>
+
+<!-- Presenter cue: Walk through the API sequence and point out that the tool result becomes the next observation. -->
+
+---
+class: chapter-dense
+---
+
+# General Tools Compose; Specialized Tools Constrain
+
+<div class="grid grid-cols-2 gap-6 mt-4">
+<div class="chapter-panel green">
+<h3>General-purpose foundations</h3>
+<ul>
+<li>A calculator is enough for basic arithmetic.</li>
+<li>A constrained Python interpreter combines spreadsheet reading, cleaning, statistics, and plotting.</li>
+<li>A controlled working directory preserves plans, logs, intermediate results, and artifacts across long tasks.</li>
+</ul>
+<div class="chapter-tag green">Use for composition and exploration</div>
+</div>
+<div class="chapter-panel orange">
+<h3>Specialized high-risk operations</h3>
+<ul>
+<li>Payments, deletion, email, and production deployment need explicit parameters.</li>
+<li>Restrict permissions and make the complete operation auditable.</li>
+<li>Add preview and human confirmation when an action is sensitive or irreversible.</li>
+</ul>
+<div class="chapter-tag orange">Use to enforce business rules</div>
+</div>
+</div>
+
+<div class="chapter-callout red mt-4"><strong>Code sandbox minimums:</strong> network disabled by default; authorized working directory only; path-traversal prevention; execution-time, CPU, memory, storage, file-type, and output limits.</div>
+
+<!-- Presenter cue: Present generality and safety as a design trade-off, not as competing ideologies. -->
+
+---
+class: chapter-dense
+---
+
+# The LLM Supplies Reasoning Before It Supplies Action
+
+<div class="chapter-lead">The reasoning engine must infer intent, decompose a vague task, and repeatedly decide what to do next, whether to call a tool, and which arguments to use.</div>
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="chapter-panel blue">
+<h3>Zero-shot generalization</h3>
+<p>Solve a task with no demonstrations by recombining knowledge and reasoning patterns acquired during pre-training.</p>
+<div class="chapter-example">Example: produce a reasonable poem about quantum physics without being trained on that exact request.</div>
+</div>
+<div class="chapter-panel purple">
+<h3>Few-shot adaptation</h3>
+<p>Infer a new task pattern from two or three examples placed in the current context.</p>
+<div class="chapter-example">Example: learn a new user-comment → sentiment-label format from a handful of demonstrations.</div>
+</div>
+</div>
+
+<div class="chapter-callout green mt-5"><strong>Why this matters for Agents:</strong> the next action is not blind trial and error. The model draws on learned causal relationships, decomposition strategies, and world knowledge before acting.</div>
+
+<!-- Presenter cue: Explain zero-shot and few-shot as sources of runtime adaptability, not as separate Agent components. -->
+
+---
+class: chapter-dense
+---
+
+# “Model as Agent” Internalizes the Decision Policy—not the Tools
+
+<div class="grid grid-cols-2 gap-6 mt-4">
+<div class="chapter-panel purple">
+<h3>What post-training can write into weights</h3>
+<ul>
+<li>When a tool call is useful.</li>
+<li>Which tool to choose.</li>
+<li>What arguments to pass.</li>
+<li>Whether to continue after a result.</li>
+<li>How to chain many calls coherently.</li>
+</ul>
+</div>
+<div class="chapter-panel orange">
+<h3>What remains outside the model</h3>
+<ul>
+<li>The search engine and code sandbox.</li>
+<li>Tool declarations and provider infrastructure.</li>
+<li>Execution, permissions, and returned results.</li>
+<li>The server-side or client-side orchestration loop.</li>
+</ul>
+</div>
+</div>
+
+<div class="chapter-thesis-line mt-5">The orchestration loop has not disappeared: decision-making may move into the model while execution moves to the API server.</div>
+
+<div class="chapter-source">Chapter 1 clarification prompted by GitHub Issue #30.</div>
+
+<!-- Presenter cue: Make the policy-versus-execution distinction explicit; it is a central correction in the chapter. -->
+
+---
+class: chapter-dense
+---
+
+# Agents Learn on Three Timescales
+
+<div class="grid grid-cols-5 gap-5 mt-2 items-center">
+<div class="col-span-3">
+<img class="chapter-figure-large" src="/images/fig1-1.svg" alt="Three levels of Agent capability updates">
+</div>
+<div class="col-span-2 chapter-stack">
+<div class="chapter-mini blue"><strong>Contextual adaptation</strong><span>Inference-time, immediate, temporary, bounded by the context window.</span></div>
+<div class="chapter-mini green"><strong>Externalized learning</strong><span>Knowledge, prompts, Skills, programs, and Harnesses persist across tasks and remain auditable.</span></div>
+<div class="chapter-mini purple"><strong>Parameter updates</strong><span>Training-time, costly, persistent, useful for high-dimensional capabilities and implicit policies.</span></div>
+</div>
+</div>
+
+<div class="chapter-callout orange mt-3"><strong>Pragmatic Bitter Lesson:</strong> models will absorb parts of today’s Harness, but training moves more slowly than real business requirements. The Harness covers the current capability boundary and moves when that boundary moves.</div>
+
+<!-- Presenter cue: Compare persistence, update cost, and expressiveness; do not present the paths as mutually exclusive. -->
+
+---
+class: chapter-dense
+---
+
+# Experiment 1-2: Can Kimi K3 Sustain Native Tool Use?
+
+<div class="grid grid-cols-5 gap-5 mt-2">
+<div class="col-span-3">
+<img class="chapter-figure-medium" src="/images/fig1-4.svg" alt="Model as Agent architecture with native tool calling">
+</div>
+<div class="col-span-2">
+<h3>Canonical task</h3>
+<p class="chapter-small">Verify ASEAN membership and the legal status of Jakarta versus Nusantara from official sources. Search once, inspect what evidence is missing, then perform distinct follow-up searches.</p>
+<h3 class="mt-3">Exact provider route</h3>
+<ol class="chapter-tight-list">
+<li>Fetch Moonshot’s authoritative <code>web_search</code> declaration.</li>
+<li>Kimi decides when and how to call it.</li>
+<li>Each call runs through a Formula Fiber.</li>
+<li>The result returns as the next observation.</li>
+</ol>
+</div>
+</div>
+
+<div class="chapter-callout blue mt-3"><strong>Acceptance requires real provider receipts:</strong> direct Moonshot API, exact <code>kimi-k3</code> model, multiple distinct successful Fibers, sequential search rounds, reasoning, final answer, retrieval date, and official-source links.</div>
+
+<!-- Presenter cue: State the task and acceptance criteria before switching to the terminal. -->
+
+---
+class: course-terminal chapter-terminal
+---
+
+<div class="course-kicker">LIVE DEMO · EXPERIMENT 1-2 · REAL API</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run --extra ch1 python chapter1/web-search-agent/run_experiment_1_2.py --attempts 1 --timeout 120
+~~~
+
+<div class="chapter-terminal-grid mt-5">
+<div><strong>Watch the policy</strong><span>Search queries change as missing evidence becomes visible.</span></div>
+<div><strong>Watch the interface</strong><span>Every action is a standard <code>web_search</code> call executed by a Formula Fiber.</span></div>
+<div><strong>Watch the receipts</strong><span>Response IDs, Fiber IDs, sources, token usage, and acceptance checks are retained.</span></div>
+</div>
+
+<div class="course-terminal-watch">Requires <code>MOONSHOT_API_KEY</code>. If the provider is unavailable during recording, inspect the accepted credential-free artifact on the next slide and label it retained evidence.</div>
+
+<!-- Presenter cue: Run one canonical attempt. Narrate why each follow-up search occurs; do not narrate every token. -->
+
+---
+class: chapter-dense
+---
+
+# What the Accepted Run Actually Demonstrated
+
+<div class="chapter-metrics mt-4">
+<div><strong>5</strong><span>reasoning iterations</span></div>
+<div><strong>15</strong><span>successful Formula Fibers</span></div>
+<div><strong>58,123</strong><span>total tokens</span></div>
+<div><strong>29,952</strong><span>cached prompt tokens</span></div>
+</div>
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div>
+<h3>Observed in retained real-API evidence</h3>
+<ul class="chapter-tight-list">
+<li>Different searches occurred over multiple sequential rounds.</li>
+<li>Every model action matched a provider-side Fiber request.</li>
+<li>The final answer cited ASEAN and Indonesian official sources.</li>
+<li>All acceptance checks passed on 2026-07-29.</li>
+</ul>
+</div>
+<div>
+<h3>What this does—and does not—show</h3>
+<ul class="chapter-tight-list">
+<li><strong>Shows:</strong> the model controls a long search policy and revises it from observations.</li>
+<li><strong>Does not show:</strong> that the search engine or execution infrastructure lives in the weights.</li>
+<li><strong>Cost:</strong> autonomy can require many calls and a large cumulative context.</li>
+</ul>
+</div>
+</div>
+
+<div class="chapter-source">Evidence: chapter1/web-search-agent/validation/latest.json · evidence mode: real_api</div>
+
+<!-- Presenter cue: Separate the accepted evidence from the architectural interpretation. -->
+
+---
+class: chapter-dense
+---
+
+# The Capability Boundary Is Often the Interface Boundary
+
+<div class="grid grid-cols-3 gap-5 mt-5">
+<div class="chapter-panel blue"><h3>Reasoning engine</h3><p>The LLM supplies world knowledge, planning, judgment, zero-shot generalization, and a learned tool-use policy.</p></div>
+<div class="chapter-panel green"><h3>Working context</h3><p>The observation space determines which task state, evidence, memory, and environmental feedback can influence a decision.</p></div>
+<div class="chapter-panel orange"><h3>Action interfaces</h3><p>Tools determine which operations can affect the world; broader interfaces require stronger permissions and verification.</p></div>
+</div>
+
+<div class="chapter-thesis-box mt-5">When an Agent cannot solve a task, first locate the missing capability: model policy, observable information, or executable action.</div>
+
+<div class="grid grid-cols-2 gap-4 mt-4 chapter-links">
+<a href="../chapter1/search-codegen/"><strong>Next experiment</strong><span>Experiment 1-3 · GPT-5.6 search + code</span></a>
+<a href="../book-en/chapter1.md"><strong>Book question</strong><span>When would you choose a stronger model, richer context, or more tools?</span></a>
+</div>
+
+<!-- Presenter cue: Close with the chapter's systems-engineering lever, then bridge to the working context in Lesson 2. -->

slides/lesson-03.md

@@ -0,0 +1,393 @@
+---
+theme: seriph
+title: "Chapter 1 · Lesson 2 — What Is Inside an Agent's Context?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: chapter-formula-cover
+---
+
+<div class="chapter-kicker">BUILD · CHAPTER 1 · AGENT FUNDAMENTALS</div>
+
+# What Is Inside an Agent's Context?
+
+<div class="chapter-context-equation mt-6">
+  <div class="chapter-context-group blue"><strong>Static prefix</strong><span>System prompt</span><span>Tool definitions</span></div>
+  <div class="chapter-equation-sign">+</div>
+  <div class="chapter-context-group green"><strong>Trajectory</strong><span>User messages</span><span>Assistant messages</span><span>Tool results</span></div>
+</div>
+
+<div class="chapter-cover-thesis">Every model call sees the prefix plus the trajectory accumulated so far.</div>
+
+<div class="chapter-cover-footer"><span>Bojie Li · AI Agents in Depth</span><span>Course Lesson 03 of 42 · 19 minutes</span></div>
+
+<!-- Presenter cue: Introduce the chapter thesis through the formula; the slide already carries the factual structure. -->
+
+---
+class: chapter-dense
+---
+
+# Context Is the Agent's Working Set—not Its Entire Memory
+
+<div class="chapter-lead">Context is the information available to the Agent at one decision point: the task instructions, relevant references, earlier correspondence, current state, and the latest tool observations.</div>
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="chapter-panel blue">
+<h3>What enters the working set</h3>
+<ul>
+<li>The system prompt and stable rules.</li>
+<li>Definitions of tools currently available.</li>
+<li>User input and retrieved external knowledge.</li>
+<li>Earlier assistant decisions and actions.</li>
+<li>Results returned by the environment.</li>
+</ul>
+</div>
+<div class="chapter-panel orange">
+<h3>What the model cannot use directly</h3>
+<ul>
+<li>State retained only inside application code.</li>
+<li>A tool implementation whose definition was not supplied.</li>
+<li>An execution result that was never appended.</li>
+<li>A previous turn removed during compression.</li>
+<li>Relevant knowledge that retrieval did not surface.</li>
+</ul>
+</div>
+</div>
+
+<div class="chapter-thesis-line mt-5">The Agent can decide only from information present at decision time—even if the missing fact exists elsewhere in the system.</div>
+
+<!-- Presenter cue: Distinguish persistent storage from the smaller working set exposed on the current call. -->
+
+---
+class: chapter-dense
+---
+
+# The API-Level Context Has Five Components
+
+<table class="chapter-table chapter-table-compact mt-3">
+<thead><tr><th>Component</th><th>Who supplies it</th><th>What it carries</th><th>Failure if absent</th></tr></thead>
+<tbody>
+<tr><td><strong>System prompt</strong></td><td>Developer / framework</td><td>Identity, permissions, conduct, memory, injected state</td><td>No stable role or behavioral boundary</td></tr>
+<tr><td><strong>Tool definitions</strong></td><td>Developer / provider</td><td>Names, descriptions, parameters, formats</td><td>The model cannot recognize or call the tool</td></tr>
+<tr><td><strong>User messages</strong></td><td>User + retrieval layer</td><td>Request and dynamically retrieved knowledge</td><td>The current goal or required evidence is missing</td></tr>
+<tr><td><strong>Assistant messages</strong></td><td>Model</td><td>Reasoning, user-facing content, tool calls</td><td>Prior decisions and proposed actions disappear</td></tr>
+<tr><td><strong>Tool results</strong></td><td>Environment / Harness</td><td>Execution feedback and new observations</td><td>The Agent acts without knowing what happened</td></tr>
+</tbody>
+</table>
+
+<div class="chapter-callout blue mt-4"><strong>Experiment 1-1 tests four removals.</strong> The system prompt is exempt because without a basic identity definition the test no longer represents the same Agent.</div>
+
+<!-- Presenter cue: Use the failure column to make each component operational rather than definitional. -->
+
+---
+class: chapter-dense
+---
+
+# Static Prefix + Dynamic Trajectory
+
+<div class="chapter-prefix-flow mt-5">
+<div class="chapter-prefix-block blue">
+<strong>Static prefix</strong>
+<span>System prompt</span>
+<span>Tool definitions</span>
+<small>Stable across calls; cache-friendly</small>
+</div>
+<div class="chapter-plus">+</div>
+<div class="chapter-prefix-block green wide">
+<strong>Trajectory</strong>
+<span>User → assistant reasoning/tool calls → tool results → assistant…</span>
+<small>Grows after every interaction with the environment</small>
+</div>
+<div class="chapter-equals">=</div>
+<div class="chapter-prefix-block purple">
+<strong>Next LLM input</strong>
+<span>Everything visible at this decision point</span>
+</div>
+</div>
+
+<div class="grid grid-cols-2 gap-5 mt-6">
+<div class="chapter-callout green"><strong>Why retain the trajectory?</strong> It records completed work, unresolved questions, decisions, tool arguments, observations, and progress.</div>
+<div class="chapter-callout orange"><strong>Why not retain everything forever?</strong> The prompt grows, cost rises, irrelevant history competes for attention, and retrieval becomes harder.</div>
+</div>
+
+<!-- Presenter cue: Establish the exact equation that the next slides and experiment will probe. -->
+
+---
+class: chapter-dense
+---
+
+# An Assistant Message Can Carry Thought, Speech, and Action
+
+<div class="grid grid-cols-2 gap-5 mt-3">
+<div>
+<pre class="chapter-code-block tall" v-pre><code>{
+  "role": "assistant",
+  "reasoning": "Need EUR, GBP, and JPY rates…",
+  "content": "",
+  "tool_calls": [
+    {"name": "convert_currency",
+     "arguments": {"amount": 2100000,
+                   "from": "EUR", "to": "USD"}}
+  ]
+}</code></pre>
+</div>
+<div>
+<div class="chapter-panel purple"><h3>Reasoning</h3><p>Preserves why the previous decision was made and supports coherence across steps.</p></div>
+<div class="chapter-panel blue mt-3"><h3>Content</h3><p>Communicates with the user; often empty while the Agent is still acting.</p></div>
+<div class="chapter-panel green mt-3"><h3>Tool calls</h3><p>Structured proposals for changing or observing the external environment.</p></div>
+</div>
+</div>
+
+<div class="chapter-callout orange mt-3"><strong>The tool result is a separate message.</strong> The framework executes the proposal and appends the observation under the matching tool-call ID.</div>
+
+<!-- Presenter cue: Point out that the three fields need not appear together on every assistant response. -->
+
+---
+class: chapter-dense
+---
+
+# Experiment 1-1 Removes One Information Channel at a Time
+
+<div class="grid grid-cols-5 gap-5 mt-2 items-center">
+<div class="col-span-3">
+<img class="chapter-figure-large" src="/images/fig1-2.svg" alt="Experiment 1-1 context ablation design">
+</div>
+<div class="col-span-2">
+<h3>Canonical task</h3>
+<p class="chapter-small">Convert quarterly revenue in USD, EUR, GBP, and JPY into USD, then calculate the annual total and quarterly average without estimating exchange rates.</p>
+<h3 class="mt-3">Control</h3>
+<p class="chapter-small">The full arm keeps all five components and should complete in a small number of iterations.</p>
+<h3 class="mt-3">Ablations</h3>
+<p class="chapter-small">Remove tool definitions, tool results, retained reasoning, or message history while holding the task and model constant.</p>
+</div>
+</div>
+
+<div class="chapter-thesis-line mt-3">Ablation is diagnostic: different missing components should create different, observable failure signatures.</div>
+
+<!-- Presenter cue: Define the controlled comparison before showing expected or observed behavior. -->
+
+---
+class: chapter-dense
+---
+
+# What Should Break When Each Component Disappears?
+
+<table class="chapter-table chapter-table-roomy mt-4">
+<thead><tr><th>Arm</th><th>Actual request change</th><th>Predicted signature from the chapter</th><th>Disconfirming observation</th></tr></thead>
+<tbody>
+<tr><td><strong>Full</strong></td><td>No removal</td><td>Correct answer with a coherent sequence</td><td>Wrong answer, unnecessary repetition, or no completion</td></tr>
+<tr><td><strong>No tool definitions</strong></td><td>Omit <code>tools</code> and <code>tool_choice</code></td><td>No tool action is possible</td><td>The model successfully invokes an undeclared tool</td></tr>
+<tr><td><strong>No tool results</strong></td><td>Replace every observation with a hidden marker</td><td>Repeated calls or unsupported conclusions</td><td>Correct answer derived only from hidden observations</td></tr>
+<tr><td><strong>No reasoning</strong></td><td>Remove prior reasoning from history</td><td>Less coherent or contradictory decisions</td><td>No measurable degradation on the tested task</td></tr>
+<tr><td><strong>No history</strong></td><td>Send only system + current user each round</td><td>Restarting and repeated operations</td><td>The Agent remembers completed work anyway</td></tr>
+</tbody>
+</table>
+
+<div class="chapter-callout purple mt-4"><strong>Important:</strong> the runner verifies the request contract itself—what the provider actually received—not merely the CLI mode name.</div>
+
+<!-- Presenter cue: State predictions in falsifiable form; the no-reasoning result will matter later. -->
+
+---
+class: chapter-dense
+---
+
+# ReAct Connects Context, Model, and Tools
+
+<div class="grid grid-cols-5 gap-5 mt-2 items-center">
+<div class="col-span-3">
+<img class="chapter-figure-large" src="/images/fig1-5.svg" alt="Execution loop of an autonomous Agent">
+</div>
+<div class="col-span-2">
+<div class="chapter-panel purple"><h3>Reason</h3><p>Given the complete current context, decide what information or action is needed next.</p></div>
+<div class="chapter-panel orange mt-3"><h3>Act</h3><p>Emit a structured tool call; the Harness executes it outside the model.</p></div>
+<div class="chapter-panel green mt-3"><h3>Observe</h3><p>Append the result, creating a richer context for the next call.</p></div>
+</div>
+</div>
+
+<div class="chapter-callout red mt-3"><strong>A loop also needs exit conditions:</strong> task complete, final-output tool called, no tool call, unrecoverable error, or maximum rounds reached.</div>
+
+<!-- Presenter cue: Explain why the name ReAct omits observation even though observation is operationally indispensable. -->
+
+---
+class: chapter-dense
+---
+
+# Every Round Sees the Entire Trajectory So Far
+
+<img class="chapter-figure-wide mt-1" src="/images/fig1-3.svg" alt="ReAct trajectory for multi-currency revenue aggregation">
+
+<div class="grid grid-cols-3 gap-4 mt-3">
+<div class="chapter-mini blue"><strong>Round 1</strong><span>Reason about missing exchange rates; call currency tools in parallel.</span></div>
+<div class="chapter-mini green"><strong>Round 2</strong><span>Observe conversions; call the code interpreter to aggregate.</span></div>
+<div class="chapter-mini purple"><strong>Round 3</strong><span>Observe the calculation; return total and quarterly average.</span></div>
+</div>
+
+<div class="chapter-thesis-line mt-3">The trajectory is the dynamic part of the next prompt, not a log consulted after execution.</div>
+
+<!-- Presenter cue: Trace one item from action to observation to the next decision. -->
+
+---
+class: chapter-dense
+---
+
+# The Revenue Task Completes in 3 Iterations and 4 Tool Calls
+
+<div class="grid grid-cols-2 gap-5 mt-3">
+<div>
+<pre class="chapter-code-block tall" v-pre><code>trajectory = [
+  user("Q1 $2.5M, Q2 €2.1M, Q3 £1.8M, Q4 ¥380M"),
+  assistant(
+    reasoning="Convert non-USD quarters first",
+    tool_calls=[eur_to_usd, gbp_to_usd, jpy_to_usd]),
+  tool(eur_result), tool(gbp_result), tool(jpy_result),
+  assistant(
+    reasoning="Aggregate verified USD values",
+    tool_calls=[code_interpreter(total_and_average)]),
+  tool("Total $9,602,895.73; average $2,400,723.93"),
+  assistant(content="FINAL ANSWER …"),
+]</code></pre>
+</div>
+<div>
+<h3>Why accumulation matters</h3>
+<ol class="chapter-tight-list">
+<li>The second call knows which conversions were requested.</li>
+<li>It sees the returned rates rather than inventing them.</li>
+<li>The third call sees the calculation result and knows the task is complete.</li>
+<li>Structured roles keep proposals and observations distinguishable.</li>
+</ol>
+<div class="chapter-callout orange mt-4"><strong>Without the accumulated trajectory</strong>, each round can look like the beginning of the task.</div>
+</div>
+</div>
+
+<!-- Presenter cue: Connect the pseudocode to the previous diagram; do not dwell on syntax. -->
+
+---
+class: chapter-dense
+---
+
+# A Trajectory Is Both Runtime State and Learning Evidence
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="chapter-panel blue">
+<h3>During the current task</h3>
+<ul>
+<li>Preserves progress and unresolved work.</li>
+<li>Prevents redundant actions.</li>
+<li>Exposes why a decision followed an observation.</li>
+<li>Makes execution interpretable and debuggable.</li>
+</ul>
+</div>
+<div class="chapter-panel green">
+<h3>Across many tasks</h3>
+<ul>
+<li>Reveals recurring behavior and failure patterns.</li>
+<li>Identifies better decision paths and tool interfaces.</li>
+<li>Can be distilled into knowledge or external artifacts.</li>
+<li>Can provide data for reinforcement learning.</li>
+</ul>
+</div>
+</div>
+
+<div class="chapter-callout orange mt-5"><strong>The cost is cumulative.</strong> Every call receives the growing trajectory; long tasks therefore create token, latency, attention, and compression problems that Chapter 2 addresses directly.</div>
+
+<!-- Presenter cue: Use this slide to bridge runtime context to later chapters on compression and learning from experience. -->
+
+---
+class: chapter-dense
+---
+
+# Live Comparison: Control, Ablation, and Retained Five-Arm Evidence
+
+<div class="grid grid-cols-2 gap-5 mt-4">
+<div class="chapter-panel blue">
+<div class="chapter-demo-head"><span>1-1A · 3 min</span><strong>Run two arms live</strong></div>
+<p>Compare the full context with <code>no_history</code> on one canonical case.</p>
+<ul class="chapter-tight-list"><li>Count iterations and tool actions.</li><li>Watch whether the same calls repeat.</li><li>Check whether a final numerical answer appears.</li></ul>
+</div>
+<div class="chapter-panel green">
+<div class="chapter-demo-head"><span>1-1B · 1 min</span><strong>Inspect the accepted five-arm artifact</strong></div>
+<p>Use the retained direct-API run to compare all arms—including the negative no-reasoning result.</p>
+<ul class="chapter-tight-list"><li>Verify evidence mode and acceptance.</li><li>Distinguish execution success from hypothesis support.</li></ul>
+</div>
+</div>
+
+<div class="chapter-callout red mt-5"><strong>Do not overclaim:</strong> the live two-arm run is a focused comparison. The complete five-arm conclusion comes from the linked accepted artifact unless all five arms are rerun during recording.</div>
+
+<!-- Presenter cue: Set expectations before the terminal: one live comparison plus one retained-evidence inspection. -->
+
+---
+class: course-terminal chapter-terminal
+---
+
+<div class="course-kicker">LIVE DEMO · EXPERIMENT 1-1</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run --extra ch1 python chapter1/context/main.py --mode ablation --provider kimi --ablation-modes full no_history --cases 1 --output /tmp/ch1-context-live.json
+
+$ jq '{evidence_mode, accepted:.analysis.experiment_execution_accepted, claims:.analysis.manuscript_behavior_claims, arms:[.arms[]|{mode,iterations,actions:.behavior.tool_action_count,repeated:.behavior.has_repeated_tool_action,correct:.behavior.canonical_answer_correct}]}' chapter1/context/validation/latest.json
+~~~
+
+<div class="chapter-terminal-grid mt-4">
+<div><strong>Control</strong><span>3 iterations, 4 actions, correct total in the accepted run.</span></div>
+<div><strong>No history</strong><span>Iteration ceiling and repeated actions are the predicted signature.</span></div>
+<div><strong>Negative result</strong><span>No-reasoning remained correct in the accepted run.</span></div>
+</div>
+
+<div class="course-terminal-watch">The live API command requires <code>MOONSHOT_API_KEY</code>. The second command reads credential-free retained evidence and is safe to use if the provider is unavailable.</div>
+
+<!-- Presenter cue: Run the two-arm comparison, then use jq to make all five retained outcomes visible. -->
+
+---
+class: chapter-dense
+---
+
+# The Real Ablation Result Is More Useful Than a Perfect Story
+
+<table class="chapter-table chapter-table-compact mt-3">
+<thead><tr><th>Arm</th><th>Iterations</th><th>Tool actions</th><th>Repeated?</th><th>Correct answer?</th><th>Interpretation</th></tr></thead>
+<tbody>
+<tr><td><strong>Full</strong></td><td>3</td><td>4</td><td>No</td><td>Yes</td><td>Control completed normally.</td></tr>
+<tr><td><strong>No history</strong></td><td>5, ceiling</td><td>15</td><td>Yes · 12 repeats</td><td>No answer</td><td>Lost progress and restarted work.</td></tr>
+<tr><td><strong>No reasoning</strong></td><td>3</td><td>4</td><td>No</td><td><strong>Yes</strong></td><td><strong>Expected degradation was not reproduced.</strong></td></tr>
+<tr><td><strong>No tool definitions</strong></td><td>1</td><td>0</td><td>No</td><td>No</td><td>Model declined to invent exchange rates.</td></tr>
+<tr><td><strong>No tool results</strong></td><td>5</td><td>7</td><td>Yes · 3 repeats</td><td>No</td><td>Calls ran, but observations were hidden.</td></tr>
+</tbody>
+</table>
+
+<div class="grid grid-cols-2 gap-5 mt-4">
+<div class="chapter-callout green"><strong>Execution accepted:</strong> all five direct-provider request contracts were verified and the intended ablations were actually applied.</div>
+<div class="chapter-callout orange"><strong>Manuscript hypothesis partially supported:</strong> three predicted failure mechanisms reproduced; the no-reasoning claim did not on this task and model.</div>
+</div>
+
+<div class="chapter-source">Evidence: chapter1/context/validation/latest.json · 31,870 total tokens · created 2026-07-29</div>
+
+<!-- Presenter cue: Lead with the negative result; it is stronger evidence of an honest experiment than a forced confirmation. -->
+
+---
+class: chapter-dense
+---
+
+# Context Determines What the Agent Knows at Decision Time
+
+<div class="grid grid-cols-3 gap-5 mt-4">
+<div class="chapter-panel blue"><h3>Definitions enable action</h3><p>Without the tool schema, the model cannot recognize or call the action interface—even when it understands the task.</p></div>
+<div class="chapter-panel green"><h3>Results close the loop</h3><p>Without observations, execution does not become evidence; the Agent repeats calls or refuses to invent a result.</p></div>
+<div class="chapter-panel purple"><h3>History preserves progress</h3><p>Without earlier messages, each decision loses completed work and can restart from the original request.</p></div>
+</div>
+
+<div class="chapter-thesis-box mt-5">Before compressing or discarding context, identify the state carried by each message and the observable failure caused by losing it.</div>
+
+<div class="grid grid-cols-2 gap-4 mt-4 chapter-links">
+<a href="../chapter1/context/run_experiment_1_1.py"><strong>Complete five-arm runner</strong><span>chapter1/context/run_experiment_1_1.py</span></a>
+<a href="../book-en/chapter1.md"><strong>Chapter thought question</strong><span>How can trajectory cost stop growing quadratically without losing critical information?</span></a>
+</div>
+
+<!-- Presenter cue: Close on the experimentally supported components, then hand the compression problem to Chapter 2. -->

slides/lesson-04.md

@@ -0,0 +1,238 @@
+---
+theme: seriph
+title: "Lesson 04 — Why Doesn't a Stronger Model Make a Reliable Agent?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 1 · Agent Fundamentals</div>
+
+# Why Doesn't a Stronger Model Make a Reliable Agent?
+
+<p class="course-subtitle">Harness engineering, orchestration, and guardrails</p>
+
+<div class="course-cover-meta">Lesson 04 of 42 · 17 minutes · Harness Engineering; Model Choice; Orchestration Patterns; Guardrails and Safety</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">If models keep improving, why does the software around them keep getting more important?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Constrain</h3>
+<p>Permissions, budgets, and valid action boundaries</p>
+</div>
+<div class="course-card green">
+<h3>Verify</h3>
+<p>Independent evidence that work is actually complete</p>
+</div>
+<div class="course-card orange">
+<h3>Recover</h3>
+<p>Retries, fallbacks, checkpoints, and termination paths</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Context engineering</h3>
+<p>Control what the model can see.</p>
+</div>
+<div class="course-card blue">
+<h3>Loop engineering</h3>
+<p>Control when the system continues or stops.</p>
+</div>
+<div class="course-card green">
+<h3>Harness engineering</h3>
+<p>Control the complete runtime around the model.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig1-5.svg" alt="The execution loop of an autonomous Agent">
+
+<div class="course-caption">The execution loop of an autonomous Agent</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Workflow vs. Autonomous Agent
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Workflow</h3><ul><li>Known stages</li><li>Predictable control flow</li><li>Easy to inspect</li></ul></div>
+<div class="course-card green"><h3>Autonomous Agent</h3><ul><li>Open-ended plan</li><li>Adaptive tool use</li><li>Needs stronger verification</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Use the least autonomous pattern that can solve the task.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Verification must observe the world
+
+~~~python
+proposal = agent.execute(task)
+evidence = environment.inspect(proposal)
+if not verifier.accepts(evidence):
+    agent.revise(evidence)
+guardrails.check_before_commit()
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-1 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>1-3</span><span>2 min</span></div>
+<h3>Inspect a search-and-code execution plan</h3>
+<p><strong>Observe:</strong> Which work belongs to search, code, validation, and stopping logic</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 2 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter1/search-codegen/main.py --backend openai --dry-run --request "Compare ASEAN capitals"
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Most production code handles boundaries and failures rather than the happy path.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Independent observations add information that self-reflection cannot.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Model selection should follow an evaluation, not a reputation.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">A Harness can patch unstable behavior, but it cannot make an unverifiable goal objectively verifiable.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Prompts first, workflows second, autonomous Agents only where adaptation creates real value.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../book-en/images/fig1-wf-routing.svg">
+<span class="course-link-title">Workflow patterns</span>
+<span class="course-link-path">book-en/images/fig1-wf-routing.svg</span>
+</a>
+<a class="course-link" href="../book-en/images/fig1-wf-evaluator.svg">
+<span class="course-link-title">Evaluator-optimizer workflow</span>
+<span class="course-link-path">book-en/images/fig1-wf-evaluator.svg</span>
+</a>
+<a class="course-link" href="../book-en/images/n8n-workflow.png">
+<span class="course-link-title">n8n workflow example</span>
+<span class="course-link-path">book-en/images/n8n-workflow.png</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which failure in your Agent should be prevented, detected, recovered, or escalated?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Chapter 1 complete · Next · Lesson 05</div>
+
+<div class="course-next">Move inside the context window and inspect what the API actually sends.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-05.md

@@ -0,0 +1,255 @@
+---
+theme: seriph
+title: "Lesson 05 — What Does the Model Actually See?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 2 · Context Engineering</div>
+
+# What Does the Model Actually See?
+
+<p class="course-subtitle">Messages, tool calls, and the Agent core loop</p>
+
+<div class="course-cover-meta">Lesson 05 of 42 · 18 minutes · Context: The Ceiling of Agent Capability; API-Level Context Structure</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+
+<div class="course-kicker">Build · Chapter 2 · Context Engineering</div>
+
+# Problems this chapter will solve
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Lesson 05</h3>
+<p>What Does the Model Actually See?</p>
+</div>
+<div class="course-card green">
+<h3>Lesson 06</h3>
+<p>Why Can One Timestamp Make an Agent Slow?</p>
+</div>
+<div class="course-card purple">
+<h3>Lesson 07</h3>
+<p>Why Do Better Prompts Need Structure, Not More Rules?</p>
+</div>
+<div class="course-card blue">
+<h3>Lesson 08</h3>
+<p>How Can an Agent Know What It Needs to Learn?</p>
+</div>
+<div class="course-card green">
+<h3>Lesson 09</h3>
+<p>How Can an Agent Stay Oriented in a Long Task?</p>
+</div>
+</div>
+
+<!-- Presenter cue: Orient viewers to the chapter. Name the progression, then highlight today's first problem. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Roles</h3>
+<p>System, user, assistant, and tool messages have different semantics.</p>
+</div>
+<div class="course-card green">
+<h3>Ordering</h3>
+<p>A tool result must follow the tool call it answers.</p>
+</div>
+<div class="course-card orange">
+<h3>Composition</h3>
+<p>Every call rebuilds a view from static and dynamic context.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Context is a list</h3>
+<p>Messages—not an abstract cloud of memory</p>
+</div>
+<div class="course-card blue">
+<h3>Tool call</h3>
+<p>An assistant message proposing a structured action</p>
+</div>
+<div class="course-card green">
+<h3>Tool result</h3>
+<p>A new observation appended to the trajectory</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig2-3.svg" alt="Message sequence for two tool calls">
+
+<div class="course-caption">Message sequence for two tool calls</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Single turn vs. Agent loop
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Single turn</h3><ul><li>One request</li><li>One response</li><li>No environmental feedback</li></ul></div>
+<div class="course-card green"><h3>Agent loop</h3><ul><li>Repeated requests</li><li>Tool calls and results</li><li>Growing trajectory</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">The API structure is the runtime state machine.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Context at the API boundary
+
+~~~python
+messages = [{"role": "user", "content": task}]
+while True:
+    reply = client.responses.create(messages=messages, tools=tools)
+    messages.append(reply)
+    if reply.final: break
+    messages.append(run_tool(reply.tool_call))
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-1 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>2-1</span><span>3 min</span></div>
+<h3>Run local tool calling and watch messages grow</h3>
+<p><strong>Observe:</strong> Assistant tool call, tool result, and final answer</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 3 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter2/local_llm_serving/main.py --backend ollama --mode single --task "What is the weather in Tokyo?"
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>The model only knows a tool exists because its schema is in context.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Tool results are observations, not hidden side effects.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>A malformed message sequence changes the task state the model perceives.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">Framework abstractions are convenient, but debugging requires inspecting raw API messages.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Log the exact message list and tool schemas for every reproducible Agent failure.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter2/local_llm_serving/benchmark.py">
+<span class="course-link-title">Local serving benchmark</span>
+<span class="course-link-path">chapter2/local_llm_serving/benchmark.py</span>
+</a>
+<a class="course-link" href="../book-en/chapter2.md">
+<span class="course-link-title">Minimal core loop</span>
+<span class="course-link-path">book-en/chapter2.md</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which part of your Agent state exists outside the message list, and how is it reintroduced?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 06</div>
+
+<div class="course-next">Rearranging that list can change both latency and cost.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-06.md

@@ -0,0 +1,244 @@
+---
+theme: seriph
+title: "Lesson 06 — Why Can One Timestamp Make an Agent Slow?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 2 · Context Engineering</div>
+
+# Why Can One Timestamp Make an Agent Slow?
+
+<p class="course-subtitle">Chat templates, attention, KV Cache, and stable prefixes</p>
+
+<div class="course-cover-meta">Lesson 06 of 42 · 19 minutes · KV Cache-Friendly Context Design; Chat Template; Prompt Cache</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">Why can a harmless dynamic line near the top of the prompt invalidate most cached computation?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Token stream</h3>
+<p>Message objects become one ordered sequence.</p>
+</div>
+<div class="course-card green">
+<h3>Prefix reuse</h3>
+<p>Matching early tokens reuse previous attention work.</p>
+</div>
+<div class="course-card orange">
+<h3>Architecture</h3>
+<p>Dynamic content placement becomes a systems decision.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>KV Cache</h3>
+<p>Reuses keys and values within inference</p>
+</div>
+<div class="course-card blue">
+<h3>Prompt Cache</h3>
+<p>Reuses a stable prefix across API requests</p>
+</div>
+<div class="course-card green">
+<h3>Stable prefix</h3>
+<p>Instructions and tools that do not change turn to turn</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig2-10.svg" alt="KV Cache prefix reuse">
+
+<div class="course-caption">KV Cache prefix reuse</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Cache-friendly vs. Cache-breaking
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Cache-friendly</h3><ul><li>Stable system prompt</li><li>Stable tool order</li><li>Dynamic state appended late</li></ul></div>
+<div class="course-card green"><h3>Cache-breaking</h3><ul><li>Timestamp near the front</li><li>Randomized tool order</li><li>Reformatted history</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">One early mismatch invalidates everything that follows.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Move changing state after the stable prefix
+
+~~~python
+static = [system_prompt, stable_tool_schemas]
+trajectory = load_messages(session_id)
+status = make_dynamic_status(now, progress)
+messages = static + trajectory + [status]
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>2-3</span><span>2 min</span></div>
+<h3>Compare context-management cache reports</h3>
+<p><strong>Observe:</strong> Prefix hits, recomputation, repeated work, and estimated cost</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>2-2</span><span>2 min</span></div>
+<h3>Generate a small attention view</h3>
+<p><strong>Observe:</strong> A token's weighted access to earlier tokens</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 4 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter2/kv-cache/main.py --report
+
+$ uv run python chapter2/attention_visualization/attention_cli.py --prompt "Explain attention in one sentence." --output attention.png
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>The API's message abstraction hides an ordered token prefix.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Cache efficiency depends on exact prefix stability.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Correct context management can improve quality and latency together.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">Cache-friendly does not mean never editing context; it means making edits deliberate and localized.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Place stable, frequently reused information first and dynamic information as late as its semantics allow.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../book-en/images/fig2-7.png">
+<span class="course-link-title">Attention heatmap</span>
+<span class="course-link-path">book-en/images/fig2-7.png</span>
+</a>
+<a class="course-link" href="../book-en/images/fig2-8.svg">
+<span class="course-link-title">Chat-template token structure</span>
+<span class="course-link-path">book-en/images/fig2-8.svg</span>
+</a>
+<a class="course-link" href="../book-en/chapter2.md">
+<span class="course-link-title">Editable and composable notes</span>
+<span class="course-link-path">book-en/chapter2.md</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which dynamic values in your system prompt silently destroy prefix reuse?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 07</div>
+
+<div class="course-next">Even a perfectly cached prompt can fail if its instructions are poorly organized.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-07.md

@@ -0,0 +1,217 @@
+---
+theme: seriph
+title: "Lesson 07 — Why Do Better Prompts Need Structure, Not More Rules?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 2 · Context Engineering</div>
+
+# Why Do Better Prompts Need Structure, Not More Rules?
+
+<p class="course-subtitle">Process-oriented instructions, tool definitions, and injection boundaries</p>
+
+<div class="course-cover-meta">Lesson 07 of 42 · 18 minutes · Prompt Engineering; Tool Definition Design; Prompt Injection</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Organization</h3>
+<p>The model must retrieve the right instruction at the right step.</p>
+</div>
+<div class="course-card green">
+<h3>Execution</h3>
+<p>Rules should map to observable decisions and actions.</p>
+</div>
+<div class="course-card orange">
+<h3>Trust</h3>
+<p>Untrusted content must never inherit instruction authority.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Behavioral frame</h3>
+<p>Tone and role set defaults—not guarantees</p>
+</div>
+<div class="course-card blue">
+<h3>Process prompt</h3>
+<p>Organize instructions around a task flow</p>
+</div>
+<div class="course-card green">
+<h3>Layered defense</h3>
+<p>Prompt hardening + source boundaries + tool checks</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig2-1.svg" alt="Composition of an Agent context window">
+
+<div class="course-caption">Composition of an Agent context window</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Rule stack vs. Executable process
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Rule stack</h3><ul><li>Appended over time</li><li>Conflicting priorities</li><li>Hard to retrieve</li></ul></div>
+<div class="course-card green"><h3>Executable process</h3><ul><li>Ordered stages</li><li>Explicit conditions</li><li>Observable outputs</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Prompt quality depends on information architecture.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Treat retrieved content as data
+
+~~~python
+content = web.read(url)
+context.append({
+  "role": "tool",
+  "content": tag_untrusted(content)
+})
+policy.check(proposed_action)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>2-4</span><span>2 min</span></div>
+<h3>Inspect prompt-ablation results</h3>
+<p><strong>Observe:</strong> Effect of organization, tone, examples, and tool descriptions</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>2-5</span><span>3 min</span></div>
+<h3>Compare an indirect injection with layered defense</h3>
+<p><strong>Observe:</strong> Attack success with no defense versus combined defense</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 5 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter2/prompt-engineering/analyze_results.py --output prompt-summary.json
+
+$ uv run python chapter2/prompt-injection/demo.py -n 1 -a 2 -d 1,4
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Disorganized correct rules can underperform a shorter process prompt.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Tool descriptions shape both action selection and argument quality.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Prompts reduce attacks but cannot form the final security boundary.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+
+# Boundary → design rule
+
+<div class="course-boundary">No system prompt can safely authorize irreversible actions using facts supplied only by the model.</div>
+
+<div class="course-rule">Translate business policy into a process, then enforce critical invariants outside the model.</div>
+
+<!-- Presenter cue: State where the evidence stops, then turn that limitation into a reusable engineering rule. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter2/prompt-engineering/">
+<span class="course-link-title">Full prompt-ablation campaign</span>
+<span class="course-link-path">chapter2/prompt-engineering/</span>
+</a>
+<a class="course-link" href="../chapter2/prompt-injection/">
+<span class="course-link-title">All injection scenarios and defenses</span>
+<span class="course-link-path">chapter2/prompt-injection/</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which sentence in your system prompt should instead be a tool-side invariant?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 08</div>
+
+<div class="course-next">Keep specialist instructions out of the prompt until the task actually needs them.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-08.md

@@ -0,0 +1,239 @@
+---
+theme: seriph
+title: "Lesson 08 — How Can an Agent Know What It Needs to Learn?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 2 · Context Engineering</div>
+
+# How Can an Agent Know What It Needs to Learn?
+
+<p class="course-subtitle">Skills, progressive disclosure, and on-demand capability</p>
+
+<div class="course-cover-meta">Lesson 08 of 42 · 18 minutes · Dynamic Prompts and Agent Skills; Skills and Tools</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">How can an Agent access hundreds of specialist procedures without carrying all of them in every prompt?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Discovery</h3>
+<p>A thin index tells the Agent what knowledge exists.</p>
+</div>
+<div class="course-card green">
+<h3>Disclosure</h3>
+<p>Detailed instructions load only after a relevant trigger.</p>
+</div>
+<div class="course-card orange">
+<h3>Execution</h3>
+<p>Bundled scripts make repeated procedures deterministic.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Skill metadata</h3>
+<p>Name and description stay visible</p>
+</div>
+<div class="course-card blue">
+<h3>Skill body</h3>
+<p>Workflow loads only when selected</p>
+</div>
+<div class="course-card green">
+<h3>Resources</h3>
+<p>References and scripts load only when required</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig2-11.svg" alt="Skills progressive disclosure">
+
+<div class="course-caption">Skills progressive disclosure</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Everything preloaded vs. Progressive disclosure
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Everything preloaded</h3><ul><li>Large static prompt</li><li>High information competition</li><li>Every task pays the cost</li></ul></div>
+<div class="course-card green"><h3>Progressive disclosure</h3><ul><li>Thin capability index</li><li>On-demand instructions</li><li>Task-specific context</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Skills trade metacognition risk for context efficiency.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# A Skill is a navigable package
+
+~~~text
+pptx/
+├── SKILL.md          # when and how
+├── reference.md      # details on demand
+├── scripts/
+│   └── render.py
+└── templates/
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-1 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>2-6</span><span>3 min</span></div>
+<h3>Generate a deck through progressive Skill loading</h3>
+<p><strong>Observe:</strong> Metadata → Skill body → referenced script → verified artifact</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 3 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter2/agent-skills-ppt/demo.py --offline
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>The Agent initially sees a capability index rather than full instructions.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>File reads turn specialist knowledge into explicit trajectory events.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Scripts reduce token use and make artifact creation testable.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">Progressive disclosure fails when the model does not recognize that a Skill is relevant.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Keep capability descriptions broad enough for discovery and Skill bodies narrow enough for reliable execution.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter2/agent-skills-ppt/run_official_experiment.py">
+<span class="course-link-title">Official Skill runtime paths</span>
+<span class="course-link-path">chapter2/agent-skills-ppt/run_official_experiment.py</span>
+</a>
+<a class="course-link" href="../book-en/images/fig2-12.svg">
+<span class="course-link-title">Skill-enabled trajectory</span>
+<span class="course-link-path">book-en/images/fig2-12.svg</span>
+</a>
+<a class="course-link" href="../book-en/chapter2.md">
+<span class="course-link-title">Skills versus tools</span>
+<span class="course-link-path">book-en/chapter2.md</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">How would you measure false-negative Skill discovery?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 09</div>
+
+<div class="course-next">Long tasks need explicit state and selective forgetting, not only selective loading.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-09.md

@@ -0,0 +1,250 @@
+---
+theme: seriph
+title: "Lesson 09 — How Can an Agent Stay Oriented in a Long Task?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 2 · Context Engineering</div>
+
+# How Can an Agent Stay Oriented in a Long Task?
+
+<p class="course-subtitle">Status bars, physical time, context rot, and compression</p>
+
+<div class="course-cover-meta">Lesson 09 of 42 · 19 minutes · Agent Status Bar; Context Compression; Isolation Over Compression</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">Why does an Agent lose track of progress even before its context window is full?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Context rot</h3>
+<p>Relevant facts remain present but become hard to retrieve.</p>
+</div>
+<div class="course-card green">
+<h3>Implicit state</h3>
+<p>Progress and time are scattered across the trajectory.</p>
+</div>
+<div class="course-card orange">
+<h3>Compression</h3>
+<p>Raw history must become high-density working state.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Status bar</h3>
+<p>Explicit task, time, budget, and progress state</p>
+</div>
+<div class="course-card blue">
+<h3>Hierarchical compression</h3>
+<p>Preserve recent detail and summarize older phases</p>
+</div>
+<div class="course-card green">
+<h3>Isolation</h3>
+<p>Move independent work into separate contexts</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig2-16.svg" alt="Comparison of context compression strategies">
+
+<div class="course-caption">Comparison of context compression strategies</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Long raw trajectory vs. Engineered working set
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Long raw trajectory</h3><ul><li>Repeated observations</li><li>Low information density</li><li>Reasoning cost grows</li></ul></div>
+<div class="course-card green"><h3>Engineered working set</h3><ul><li>Explicit current state</li><li>Compressed completed phases</li><li>Isolated sub-tasks</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">The goal is usable information—not maximum token retention.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Make hidden state explicit
+
+~~~python
+status = {
+  "goal": task.goal,
+  "done": completed_steps,
+  "budget": remaining_steps,
+  "elapsed": clock.elapsed()
+}
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>2-8</span><span>1 min</span></div>
+<h3>Preview the injected status information</h3>
+<p><strong>Observe:</strong> Task progress, time, tool count, and remaining budget</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>2-9</span><span>3 min</span></div>
+<h3>Compare compression strategies</h3>
+<p><strong>Observe:</strong> What each strategy preserves, discards, and recomputes</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 4 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter2/system-hint/main.py --mode preview
+
+$ uv run python chapter2/context-compression/experiment.py --list-strategies
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>A status bar turns repeated inference into direct retrieval.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Compression is needed for information density before token overflow.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Independent sub-tasks are often better isolated than summarized.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">An incorrect status bar can be more harmful than missing meta-information because the Agent trusts it.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Compress completed history into verifiable state; keep recent evidence available; isolate independent work.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter2/attention_visualization/run_status_bar_experiment.py">
+<span class="course-link-title">Experiment 2-7: status-bar attention</span>
+<span class="course-link-path">chapter2/attention_visualization/run_status_bar_experiment.py</span>
+</a>
+<a class="course-link" href="../chapter2/context-compression/run_all_strategies.py">
+<span class="course-link-title">Run all six compression strategies</span>
+<span class="course-link-path">chapter2/context-compression/run_all_strategies.py</span>
+</a>
+<a class="course-link" href="../book-en/images/fig2-15.svg">
+<span class="course-link-title">Status insertion position</span>
+<span class="course-link-path">book-en/images/fig2-15.svg</span>
+</a>
+<a class="course-link" href="../book-en/images/fig2-17.svg">
+<span class="course-link-title">Compression processing flow</span>
+<span class="course-link-path">book-en/images/fig2-17.svg</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which fields in a status bar can be computed deterministically instead of inferred by the model?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Chapter 2 complete · Next · Lesson 10</div>
+
+<div class="course-next">Extend working context across sessions without turning memory into noise.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-10.md

@@ -0,0 +1,253 @@
+---
+theme: seriph
+title: "Lesson 10 — What Should an Agent Remember About a User?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 3 · Memory and Knowledge</div>
+
+# What Should an Agent Remember About a User?
+
+<p class="course-subtitle">Memory levels, representations, evaluation, and privacy</p>
+
+<div class="course-cover-meta">Lesson 10 of 42 · 19 minutes · User Memory System; Three-Level Framework; Four Storage Formats; Privacy</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+
+<div class="course-kicker">Build · Chapter 3 · Memory and Knowledge</div>
+
+# Problems this chapter will solve
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Lesson 10</h3>
+<p>What Should an Agent Remember About a User?</p>
+</div>
+<div class="course-card green">
+<h3>Lesson 11</h3>
+<p>Why Does Semantic Search Miss Exact Answers?</p>
+</div>
+<div class="course-card purple">
+<h3>Lesson 12</h3>
+<p>Why Is One Retrieval Index Never Enough?</p>
+</div>
+<div class="course-card blue">
+<h3>Lesson 13</h3>
+<p>When Should the Agent Decide What to Retrieve?</p>
+</div>
+</div>
+
+<!-- Presenter cue: Orient viewers to the chapter. Name the progression, then highlight today's first problem. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Recall</h3>
+<p>Recover an explicit fact from a previous session.</p>
+</div>
+<div class="course-card green">
+<h3>Cross-session reasoning</h3>
+<p>Combine evidence from several interactions.</p>
+</div>
+<div class="course-card orange">
+<h3>Proactive service</h3>
+<p>Notice a relevant need before the user repeats it.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Simple Notes</h3>
+<p>Atomic facts with little context</p>
+</div>
+<div class="course-card blue">
+<h3>JSON Cards</h3>
+<p>Structured facts with evidence and scope</p>
+</div>
+<div class="course-card green">
+<h3>Advanced Cards</h3>
+<p>Conflicts, confidence, time, and applicability</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig3-2.svg" alt="Four strategies for representing user memory">
+
+<div class="course-caption">Four strategies for representing user memory</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Store everything vs. Managed memory
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Store everything</h3><ul><li>High noise</li><li>Privacy exposure</li><li>Contradictory details</li></ul></div>
+<div class="course-card green"><h3>Managed memory</h3><ul><li>Evidence-backed entries</li><li>Conflict resolution</li><li>Retention and sanitization</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Memory is a governed knowledge system, not a transcript archive.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# A memory needs provenance
+
+~~~json
+{
+  "fact": "Prefers aisle seats",
+  "scope": "long-haul flights",
+  "evidence": ["session-18:turn-9"],
+  "confidence": 0.82,
+  "updated_at": "2026-08-03"
+}
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>3-1/3-2</span><span>3 min</span></div>
+<h3>Compare user-memory representations</h3>
+<p><strong>Observe:</strong> What is extracted, how context is preserved, and how conflicts appear</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>3-3</span><span>2 min</span></div>
+<h3>Sanitize a memory-bearing log</h3>
+<p><strong>Observe:</strong> Secrets removed while diagnostic structure remains</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 5 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter3/user-memory/main.py --mode demo --memory-mode advanced_json_cards
+
+$ uv run python chapter3/log-sanitization/main.py --demo
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Memory quality must be evaluated at several capability levels.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Structured representations retain scope and provenance better than flat notes.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Privacy controls belong in the ingestion path, before persistence.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+
+# Boundary → design rule
+
+<div class="course-boundary">A detailed schema improves precision but increases extraction cost and schema-maintenance burden.</div>
+
+<div class="course-rule">Store the minimum durable claim together with evidence, scope, confidence, and time.</div>
+
+<!-- Presenter cue: State where the evidence stops, then turn that limitation into a reusable engineering rule. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter3/user-memory-evaluation/">
+<span class="course-link-title">Memory evaluation suite</span>
+<span class="course-link-path">chapter3/user-memory-evaluation/</span>
+</a>
+<a class="course-link" href="../chapter3/mem0/">
+<span class="course-link-title">Mem0 comparison</span>
+<span class="course-link-path">chapter3/mem0/</span>
+</a>
+<a class="course-link" href="../chapter3/memobase/">
+<span class="course-link-title">Memobase comparison</span>
+<span class="course-link-path">chapter3/memobase/</span>
+</a>
+<a class="course-link" href="../book-en/images/fig3-4.svg">
+<span class="course-link-title">Multi-type memory architecture</span>
+<span class="course-link-path">book-en/images/fig3-4.svg</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">How should a memory system respond when a newer statement contradicts an older one?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 11</div>
+
+<div class="course-next">Retrieve external knowledge when exact words and semantic similarity disagree.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-11.md

@@ -0,0 +1,244 @@
+---
+theme: seriph
+title: "Lesson 11 — Why Does Semantic Search Miss Exact Answers?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 3 · Memory and Knowledge</div>
+
+# Why Does Semantic Search Miss Exact Answers?
+
+<p class="course-subtitle">Chunking, dense retrieval, sparse retrieval, and evaluation</p>
+
+<div class="course-cover-meta">Lesson 11 of 42 · 19 minutes · RAG Basics; Document Chunking; Dense Embeddings; Sparse Embeddings</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">Why can a vector search understand a topic yet miss the exact identifier the user needs?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Chunking</h3>
+<p>Defines the atomic units that can be found.</p>
+</div>
+<div class="course-card green">
+<h3>Dense retrieval</h3>
+<p>Matches meaning and paraphrase.</p>
+</div>
+<div class="course-card orange">
+<h3>Sparse retrieval</h3>
+<p>Matches exact words, numbers, and identifiers.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Recall@k</h3>
+<p>Did the relevant item enter the candidate set?</p>
+</div>
+<div class="course-card blue">
+<h3>ANN index</h3>
+<p>Trade exact search for speed and memory</p>
+</div>
+<div class="course-card green">
+<h3>BM25</h3>
+<p>Weight exact terms with saturation and length normalization</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig3-8.svg" alt="BM25 scoring mechanism for exact lexical retrieval">
+
+<div class="course-caption">BM25 scoring mechanism for exact lexical retrieval</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Dense vs. Sparse
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Dense</h3><ul><li>Semantic similarity</li><li>Handles paraphrases</li><li>May miss rare identifiers</li></ul></div>
+<div class="course-card green"><h3>Sparse</h3><ul><li>Exact lexical match</li><li>Transparent term scores</li><li>Misses synonyms</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">The failure modes are complementary.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Measure retrieval before generation
+
+~~~python
+candidates = index.search(query, k=10)
+recall = any(doc.id in relevant_ids for doc in candidates)
+for rank, doc in enumerate(candidates, 1):
+    print(rank, doc.score, doc.id)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>3-4</span><span>2 min</span></div>
+<h3>Compare ANN index behavior</h3>
+<p><strong>Observe:</strong> Latency, recall, memory, and incremental-update trade-offs</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>3-5</span><span>2 min</span></div>
+<h3>Explain one BM25 score</h3>
+<p><strong>Observe:</strong> Per-term TF, IDF, saturation, and length effects</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 4 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter3/dense-embedding/cli.py --compare-ann -k 10
+
+$ uv run python chapter3/sparse-embedding/cli.py -q "model distillation" --explain
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>A retrieval failure can begin at chunk boundaries rather than the model.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>ANN algorithms differ in update behavior as well as speed.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Exact and semantic search solve different parts of the problem.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">A higher retrieval score does not prove that the retrieved passage answers the question.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Evaluate the candidate set independently before asking whether generation is good.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../book-en/images/fig3-7.svg">
+<span class="course-link-title">HNSW structure</span>
+<span class="course-link-path">book-en/images/fig3-7.svg</span>
+</a>
+<a class="course-link" href="../chapter3/sparse-embedding/">
+<span class="course-link-title">BM25 implementation</span>
+<span class="course-link-path">chapter3/sparse-embedding/</span>
+</a>
+<a class="course-link" href="../chapter3/dense-embedding/">
+<span class="course-link-title">Dense model comparison</span>
+<span class="course-link-path">chapter3/dense-embedding/</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which queries in your domain are dominated by identifiers rather than semantics?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 12</div>
+
+<div class="course-next">Fuse complementary retrievers, then organize knowledge beyond flat chunks.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-12.md

@@ -0,0 +1,223 @@
+---
+theme: seriph
+title: "Lesson 12 — Why Is One Retrieval Index Never Enough?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 3 · Memory and Knowledge</div>
+
+# Why Is One Retrieval Index Never Enough?
+
+<p class="course-subtitle">Hybrid search, reranking, multimodality, and structured knowledge</p>
+
+<div class="course-cover-meta">Lesson 12 of 42 · 18 minutes · Hybrid Retrieval; Multimodal Extraction; Structured Indexing; Filesystem Paradigm</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Candidate fusion</h3>
+<p>Merge dense and sparse result sets.</p>
+</div>
+<div class="course-card green">
+<h3>Reranking</h3>
+<p>Use a stronger model only on a small candidate pool.</p>
+</div>
+<div class="course-card orange">
+<h3>Knowledge shape</h3>
+<p>Trees, graphs, files, images, and tables preserve different structure.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Hybrid retrieval</h3>
+<p>Broad recall from multiple retrievers</p>
+</div>
+<div class="course-card blue">
+<h3>Neural reranker</h3>
+<p>More precise ordering at higher per-item cost</p>
+</div>
+<div class="course-card green">
+<h3>Structured index</h3>
+<p>Represent hierarchy or relationships explicitly</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig3-9.svg" alt="Hybrid retrieval and reranking pipeline">
+
+<div class="course-caption">Hybrid retrieval and reranking pipeline</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Flat chunks vs. Structured knowledge
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Flat chunks</h3><ul><li>Simple ingestion</li><li>Local passage questions</li><li>Weak global structure</li></ul></div>
+<div class="course-card green"><h3>Structured knowledge</h3><ul><li>Hierarchies and graphs</li><li>Multi-hop questions</li><li>More governance cost</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Choose an index for the questions—not for fashion.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Fuse ranks before reranking
+
+~~~python
+dense = dense_index.search(query, k=20)
+sparse = bm25.search(query, k=20)
+pool = reciprocal_rank_fusion(dense, sparse)
+answer_context = reranker.top(query, pool, k=5)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>3-6</span><span>3 min</span></div>
+<h3>Expose every retrieval stage</h3>
+<p><strong>Observe:</strong> Dense candidates, sparse candidates, fusion, reranking, and final rank</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>3-8</span><span>2 min</span></div>
+<h3>Compare RAPTOR and GraphRAG</h3>
+<p><strong>Observe:</strong> Questions favored by hierarchical summaries versus relationship graphs</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 5 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter3/retrieval-pipeline/evaluate.py --query "XR-7003"
+
+$ uv run python chapter3/structured-index/main.py demo
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Hybrid retrieval improves recall because its component failures differ.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Reranking spends expensive reasoning on a small, diverse pool.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Structured indexes help only when queries need their encoded structure.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+
+# Boundary → design rule
+
+<div class="course-boundary">More stages increase latency, operational cost, and the number of components that can drift.</div>
+
+<div class="course-rule">Add a retrieval stage only when an evaluation identifies the failure it corrects.</div>
+
+<!-- Presenter cue: State where the evidence stops, then turn that limitation into a reusable engineering rule. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter4/multimodal-agent/">
+<span class="course-link-title">Experiment 4-2: multimodal strategies</span>
+<span class="course-link-path">chapter4/multimodal-agent/</span>
+</a>
+<a class="course-link" href="../book-en/images/fig3-10.svg">
+<span class="course-link-title">RAPTOR tree</span>
+<span class="course-link-path">book-en/images/fig3-10.svg</span>
+</a>
+<a class="course-link" href="../book-en/images/fig3-11.svg">
+<span class="course-link-title">GraphRAG graph</span>
+<span class="course-link-path">book-en/images/fig3-11.svg</span>
+</a>
+<a class="course-link" href="../book-en/chapter3.md">
+<span class="course-link-title">Knowledge-base governance</span>
+<span class="course-link-path">book-en/chapter3.md</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which query type would reveal that your flat index has lost document structure?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 13</div>
+
+<div class="course-next">Let the Agent decide whether another retrieval step is necessary.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-13.md

@@ -0,0 +1,231 @@
+---
+theme: seriph
+title: "Lesson 13 — When Should the Agent Decide What to Retrieve?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 3 · Memory and Knowledge</div>
+
+# When Should the Agent Decide What to Retrieve?
+
+<p class="course-subtitle">Agentic RAG, contextual retrieval, and two-tier memory</p>
+
+<div class="course-cover-meta">Lesson 13 of 42 · 19 minutes · Agentic RAG; Contextual Retrieval; Deep Knowledge Extraction</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Search decision</h3>
+<p>The Agent decides whether retrieval is needed.</p>
+</div>
+<div class="course-card green">
+<h3>Query reformulation</h3>
+<p>New evidence changes the next search.</p>
+</div>
+<div class="course-card orange">
+<h3>Stopping</h3>
+<p>The Agent judges whether evidence is sufficient.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Agentic RAG</h3>
+<p>Retrieval becomes a tool inside ReAct</p>
+</div>
+<div class="course-card blue">
+<h3>Contextual retrieval</h3>
+<p>Restore document context before indexing each chunk</p>
+</div>
+<div class="course-card green">
+<h3>Two-tier memory</h3>
+<p>Resident overview + retrieved detail</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig3-13.svg" alt="Agentic RAG architecture">
+
+<div class="course-caption">Agentic RAG architecture</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Retrieve once vs. Agentic retrieval
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Retrieve once</h3><ul><li>Fixed query</li><li>Fixed top-k</li><li>One chance to find evidence</li></ul></div>
+<div class="course-card green"><h3>Agentic retrieval</h3><ul><li>Iterative queries</li><li>Evidence-aware decisions</li><li>Explicit stopping</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Autonomy adds flexibility and a new metacognition failure mode.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Retrieval becomes an action
+
+~~~python
+while not evidence_sufficient(context):
+    query = agent.formulate_search(context)
+    passages = search(query)
+    context.add(passages)
+return agent.answer_with_citations(context)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-3 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>3-8</span><span>2 min</span></div>
+<h3>Compare fixed and Agentic RAG offline</h3>
+<p><strong>Observe:</strong> Query count, evidence coverage, answer quality, and cost</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>3-10</span><span>2 min</span></div>
+<h3>Compare plain and contextual chunks</h3>
+<p><strong>Observe:</strong> Failures repaired by adding document-level context</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>3-11</span><span>2 min</span></div>
+<h3>Compare two-tier user memory</h3>
+<p><strong>Observe:</strong> Resident overview plus on-demand conversation detail</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 6 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter3/agentic-rag/compare_offline.py
+
+$ uv run python chapter3/contextual-retrieval/compare_retrieval.py --per-query
+
+$ uv run python chapter3/contextual-retrieval-for-user-memory/contextual_compare.py
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Iterative retrieval helps when later queries depend on earlier evidence.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Contextual prefixes repair semantic loss introduced by chunking.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Overview and detail require different storage and access strategies.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+
+# Boundary → design rule
+
+<div class="course-boundary">An Agent cannot retrieve what it does not realize it is missing.</div>
+
+<div class="course-rule">Use Agentic retrieval for genuinely multi-step evidence gathering; keep simple questions on a simple path.</div>
+
+<!-- Presenter cue: State where the evidence stops, then turn that limitation into a reusable engineering rule. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter3/agentic-rag-for-user-memory/">
+<span class="course-link-title">Experiment 3-9: Agentic RAG for memory</span>
+<span class="course-link-path">chapter3/agentic-rag-for-user-memory/</span>
+</a>
+<a class="course-link" href="../chapter3/structured-knowledge-extraction/">
+<span class="course-link-title">Experiment 3-12: structured knowledge extraction</span>
+<span class="course-link-path">chapter3/structured-knowledge-extraction/</span>
+</a>
+<a class="course-link" href="../book-en/images/fig3-14.svg">
+<span class="course-link-title">Contextual retrieval diagram</span>
+<span class="course-link-path">book-en/images/fig3-14.svg</span>
+</a>
+<a class="course-link" href="../book-en/images/fig3-15.svg">
+<span class="course-link-title">Knowledge extraction pipeline</span>
+<span class="course-link-path">book-en/images/fig3-15.svg</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">What independent signal can tell an Agent that its evidence is insufficient?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Chapter 3 complete · Next · Lesson 14</div>
+
+<div class="course-next">Turn knowledge into actions through carefully designed tools.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-14.md

@@ -0,0 +1,255 @@
+---
+theme: seriph
+title: "Lesson 14 — What Makes a Tool Easy for a Model to Use?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 4 · Tools</div>
+
+# What Makes a Tool Easy for a Model to Use?
+
+<p class="course-subtitle">Capability boundaries, granularity, descriptions, and MCP</p>
+
+<div class="course-cover-meta">Lesson 14 of 42 · 18 minutes · Tool Classification; Universal Principles; MCP; Perception Tools</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+
+<div class="course-kicker">Build · Chapter 4 · Tools</div>
+
+# Problems this chapter will solve
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Lesson 14</h3>
+<p>What Makes a Tool Easy for a Model to Use?</p>
+</div>
+<div class="course-card green">
+<h3>Lesson 15</h3>
+<p>How Do You Let an Agent Act Without Letting It Cause Damage?</p>
+</div>
+<div class="course-card purple">
+<h3>Lesson 16</h3>
+<p>When Should an Agent Ask for Help or Delegate?</p>
+</div>
+<div class="course-card blue">
+<h3>Lesson 17</h3>
+<p>How Can a Synchronous Model Live in an Asynchronous World?</p>
+</div>
+</div>
+
+<!-- Presenter cue: Orient viewers to the chapter. Name the progression, then highlight today's first problem. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Granularity</h3>
+<p>One broad tool or several composable operations?</p>
+</div>
+<div class="course-card green">
+<h3>Description</h3>
+<p>The model selects tools from names, schemas, and examples.</p>
+</div>
+<div class="course-card orange">
+<h3>Fidelity</h3>
+<p>Arguments must preserve the user's intended operation.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Perception</h3>
+<p>Read the world without changing it</p>
+</div>
+<div class="course-card blue">
+<h3>Execution</h3>
+<p>Change state and create consequences</p>
+</div>
+<div class="course-card green">
+<h3>Collaboration</h3>
+<p>Reach another Agent or human</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig4-1.svg" alt="MCP protocol interaction sequence">
+
+<div class="course-caption">MCP protocol interaction sequence</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Dedicated tool vs. Skill + executor
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Dedicated tool</h3><ul><li>Clear intent</li><li>Narrow schema</li><li>Many definitions at scale</li></ul></div>
+<div class="course-card green"><h3>Skill + executor</h3><ul><li>General action surface</li><li>Instructions on demand</li><li>Needs stronger sandboxing</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Capability expression is a design choice.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# A schema is an Agent-facing API
+
+~~~json
+{
+  "name": "weather",
+  "description": "Current observed weather for one place",
+  "parameters": {"city": {"type": "string"}},
+  "required": ["city"]
+}
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-1 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>4-1</span><span>3 min</span></div>
+<h3>Discover and call perception tools</h3>
+<p><strong>Observe:</strong> Tool discovery, typed arguments, truncation, and evidence returned</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 3 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter4/perception-tools/cli.py demo --offline
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Read-only tools are easier to cache, parallelize, and trust.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Descriptions should state scope, provenance, and failure behavior.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>MCP standardizes interoperability but not tool quality.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">Every third-party server creates a new trust boundary for descriptions, credentials, and returned content.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Design tools for faithful action and inspectable evidence before optimizing convenience.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter4/perception-tools/">
+<span class="course-link-title">MCP server implementation</span>
+<span class="course-link-path">chapter4/perception-tools/</span>
+</a>
+<a class="course-link" href="../chapter4/DOCKER_DEPLOYMENT.md">
+<span class="course-link-title">Container deployment</span>
+<span class="course-link-path">chapter4/DOCKER_DEPLOYMENT.md</span>
+</a>
+<a class="course-link" href="../book-en/chapter4.md">
+<span class="course-link-title">Tool taxonomy</span>
+<span class="course-link-path">book-en/chapter4.md</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which parameter in your tool can silently change the meaning of the user's request?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 15</div>
+
+<div class="course-next">Add execution power without letting a model become the security boundary.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-15.md

@@ -0,0 +1,241 @@
+---
+theme: seriph
+title: "Lesson 15 — How Do You Let an Agent Act Without Letting It Cause Damage?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 4 · Tools</div>
+
+# How Do You Let an Agent Act Without Letting It Cause Damage?
+
+<p class="course-subtitle">Execution tools, independent checks, and fail-closed design</p>
+
+<div class="course-cover-meta">Lesson 15 of 42 · 18 minutes · Execution Tools; Security; Proposer-Reviewer; Sidecar</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">Where should safety checks live when the model can write files, run code, and call external systems?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Risk classification</h3>
+<p>Read, reversible write, irreversible action</p>
+</div>
+<div class="course-card green">
+<h3>Pre-approval</h3>
+<p>Review intent and parameters before execution</p>
+</div>
+<div class="course-card orange">
+<h3>Post-validation</h3>
+<p>Inspect the actual resulting state</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Fail closed</h3>
+<p>Unknown or malformed operations are denied</p>
+</div>
+<div class="course-card blue">
+<h3>Independent evidence</h3>
+<p>Use data the proposer cannot forge</p>
+</div>
+<div class="course-card green">
+<h3>Sidecar</h3>
+<p>Keep enforcement outside the Agent's own mutable process</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig4-5.svg" alt="Synchronous model training versus asynchronous deployment">
+
+<div class="course-caption">Synchronous model training versus asynchronous deployment</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Model self-report vs. Independent gate
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Model self-report</h3><ul><li>Claims an action is safe</li><li>Can hallucinate facts</li><li>Shares the same compromised context</li></ul></div>
+<div class="course-card green"><h3>Independent gate</h3><ul><li>Reads server truth</li><li>Enforces deterministic invariants</li><li>Logs the decision</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">The final boundary must not trust the model's own claim.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Server truth is the gatekeeper
+
+~~~python
+request = agent.propose_action()
+facts = database.read_ground_truth(request.target)
+policy.validate(request, facts)
+result = executor.run(request)
+validator.inspect(result)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>4-3A</span><span>1 min</span></div>
+<h3>Run an allowed code action</h3>
+<p><strong>Observe:</strong> Validation, sandbox execution, and bounded output</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>4-3B</span><span>2 min</span></div>
+<h3>Inspect execution-tool safety behavior</h3>
+<p><strong>Observe:</strong> Approval, rejection, syntax checks, and output handling</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 3 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter4/execution-tools/cli.py code --language python --code "print(2 ** 10)"
+
+$ uv run python chapter4/execution-tools/cli.py demo
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Risk depends on parameters and environment, not only the tool name.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Pre-approval reduces harmful attempts; validation catches harmful results.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Long outputs need truncation plus durable storage, not silent loss.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">A second model is not independent if it sees the same injected context and trusts the same unverified facts.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Guide the model with instructions, but enforce irreversible constraints with independent code and data.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter4/execution-tools/">
+<span class="course-link-title">Execution-tool tests</span>
+<span class="course-link-path">chapter4/execution-tools/</span>
+</a>
+<a class="course-link" href="../book-en/chapter4.md">
+<span class="course-link-title">Sidecar design</span>
+<span class="course-link-path">book-en/chapter4.md</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">What is the trusted root in your Agent system, and can the Agent modify it?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 16</div>
+
+<div class="course-next">Some tasks require another Agent or a human rather than another tool.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-16.md

@@ -0,0 +1,245 @@
+---
+theme: seriph
+title: "Lesson 16 — When Should an Agent Ask for Help or Delegate?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 4 · Tools</div>
+
+# When Should an Agent Ask for Help or Delegate?
+
+<p class="course-subtitle">Sub-agents, Human-in-the-Loop, and communication tools</p>
+
+<div class="course-cover-meta">Lesson 16 of 42 · 18 minutes · Collaboration Tools; User Communication; Virtual Identity</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">How should an Agent hand work to another actor without losing context or control?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Handoff</h3>
+<p>Pass only the facts and artifacts the collaborator needs.</p>
+</div>
+<div class="course-card green">
+<h3>Lifecycle</h3>
+<p>Spawn, message, query, cancel, and collect results.</p>
+</div>
+<div class="course-card orange">
+<h3>Escalation</h3>
+<p>Ask a human when authority or missing judgment requires it.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Minimal handoff</h3>
+<p>Task parameters with almost no history</p>
+</div>
+<div class="course-card blue">
+<h3>Distilled handoff</h3>
+<p>Facts, constraints, artifacts, and open questions</p>
+</div>
+<div class="course-card green">
+<h3>HITL</h3>
+<p>A permission and information channel—not an error screen</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig4-2.svg" alt="Event-driven asynchronous Agent architecture">
+
+<div class="course-caption">Event-driven asynchronous Agent architecture</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Full transcript vs. Handoff package
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Full transcript</h3><ul><li>Maximum context</li><li>Large and biasing</li><li>Leaks irrelevant information</li></ul></div>
+<div class="course-card green"><h3>Handoff package</h3><ul><li>Confirmed facts</li><li>Artifact paths</li><li>Explicit responsibility</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Context sharing and delegation are separate design decisions.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Lifecycle primitives stay small
+
+~~~python
+worker = spawn_subagent(task, context=handoff)
+send_message(worker, update)
+status = get_status(worker)
+if no_longer_needed(status):
+    cancel_subagent(worker)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>4-4A</span><span>2 min</span></div>
+<h3>Compare sub-agent handoff strategies</h3>
+<p><strong>Observe:</strong> Context size, task completeness, and irrelevant carryover</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>4-4B</span><span>1 min</span></div>
+<h3>Exercise a Human-in-the-Loop gate</h3>
+<p><strong>Observe:</strong> Pending state, timeout, approval, and audit record</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 3 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter4/collaboration-tools/main.py subagent compare
+
+$ uv run python chapter4/collaboration-tools/main.py hitl approve --message "Delete 1000 records?" --timeout 5 --auto-approve
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>A collaborator should receive a task contract, not indiscriminate history.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Cancellation and status are first-class parts of delegation.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Human intervention works best when the Agent explains the decision and safe defaults.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">A slow or unavailable human cannot be treated as a synchronous function call.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Design collaboration as an asynchronous lifecycle with explicit authority and structured handoffs.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter4/collaboration-tools/">
+<span class="course-link-title">Multi-channel notifications</span>
+<span class="course-link-path">chapter4/collaboration-tools/</span>
+</a>
+<a class="course-link" href="../chapter4/collaboration-tools/">
+<span class="course-link-title">Timers and delayed tasks</span>
+<span class="course-link-path">chapter4/collaboration-tools/</span>
+</a>
+<a class="course-link" href="../chapter4/collaboration-tools/subagent_comparison.py">
+<span class="course-link-title">Sub-agent comparison script</span>
+<span class="course-link-path">chapter4/collaboration-tools/subagent_comparison.py</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">What should the Agent do safely while waiting for a user's decision?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 17</div>
+
+<div class="course-next">Allow events to arrive while the Agent is already working.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-17.md

@@ -0,0 +1,231 @@
+---
+theme: seriph
+title: "Lesson 17 — How Can a Synchronous Model Live in an Asynchronous World?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 4 · Tools</div>
+
+# How Can a Synchronous Model Live in an Asynchronous World?
+
+<p class="course-subtitle">Events, interruption, parallelism, and proactive tool discovery</p>
+
+<div class="course-cover-meta">Lesson 17 of 42 · 19 minutes · Event-Driven Asynchronous Agents; Proactive Tool Discovery</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Ingress</h3>
+<p>External events can wake the Agent.</p>
+</div>
+<div class="course-card green">
+<h3>Scheduling</h3>
+<p>Queue, interrupt, or parallelize by urgency.</p>
+</div>
+<div class="course-card orange">
+<h3>Discovery</h3>
+<p>Find a capability without loading every schema.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Event queue</h3>
+<p>Durable arrival, priority, and replay</p>
+</div>
+<div class="course-card blue">
+<h3>Cancellation</h3>
+<p>Stop work safely and preserve recoverable state</p>
+</div>
+<div class="course-card green">
+<h3>Meta-tool</h3>
+<p>Search a large tool catalog on demand</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig4-3.svg" alt="Three asynchronous event-processing strategies">
+
+<div class="course-caption">Three asynchronous event-processing strategies</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Synchronous loop vs. Async Harness
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Synchronous loop</h3><ul><li>One request at a time</li><li>No mid-turn updates</li><li>Tool latency blocks attention</li></ul></div>
+<div class="course-card green"><h3>Async Harness</h3><ul><li>Inbox and scheduler</li><li>Interrupt or parallel policy</li><li>Checkpoints and notifications</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">The model remains turn-based; the Harness absorbs real-world concurrency.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Events need an explicit policy
+
+~~~python
+event = await inbox.get()
+match event.urgency:
+    case "interrupt": await cancel(current_task)
+    case "immediate": spawn(event)
+    case _: queue.append(event)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-3 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>4-5</span><span>2 min</span></div>
+<h3>Trigger a timed event</h3>
+<p><strong>Observe:</strong> Registration, event arrival, processing, and delivery</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>4-6</span><span>2 min</span></div>
+<h3>Interrupt and recover a long-running task</h3>
+<p><strong>Observe:</strong> Cancellation point, cleanup, checkpoint, and recovery</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>4-7</span><span>2 min</span></div>
+<h3>Discover tools instead of injecting the catalog</h3>
+<p><strong>Observe:</strong> Token count, retrieved schemas, and selected capability</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 6 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter4/agent-with-event-trigger/event_loop_demo.py --mock --trigger timer --delay 2 --duration 6
+
+$ uv run python chapter4/async-agent/demo.py interrupt
+
+$ uv run python chapter4/active-tool-discovery/demo.py --offline
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Priority is a product policy, not merely a queue implementation detail.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Graceful interruption requires tools and loops to expose safe cancellation points.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>On-demand discovery keeps a small stable prefix while preserving a large action space.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+
+# Boundary → design rule
+
+<div class="course-boundary">Today's models are trained mostly on synchronous trajectories; async behavior remains a Harness workaround.</div>
+
+<div class="course-rule">Separate event intake, scheduling, model turns, tool execution, and user notification into explicit components.</div>
+
+<!-- Presenter cue: State where the evidence stops, then turn that limitation into a reusable engineering rule. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter4/async-agent/">
+<span class="course-link-title">Parallel and state demos</span>
+<span class="course-link-path">chapter4/async-agent/</span>
+</a>
+<a class="course-link" href="../chapter4/active-tool-selection/">
+<span class="course-link-title">Active tool selection</span>
+<span class="course-link-path">chapter4/active-tool-selection/</span>
+</a>
+<a class="course-link" href="../book-en/images/fig4-7.svg">
+<span class="course-link-title">Hierarchical matching</span>
+<span class="course-link-path">book-en/images/fig4-7.svg</span>
+</a>
+<a class="course-link" href="../book-en/images/fig4-8.svg">
+<span class="course-link-title">Dynamic tool cache design</span>
+<span class="course-link-path">book-en/images/fig4-8.svg</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which external event should interrupt current work rather than wait in a queue?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Chapter 4 complete · Next · Lesson 18</div>
+
+<div class="course-next">Use code as the most general action interface.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-18.md

@@ -0,0 +1,266 @@
+---
+theme: seriph
+title: "Lesson 18 — Why Is Code Generation Not Enough to Build a Coding Agent?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 5 · Coding Agents</div>
+
+# Why Is Code Generation Not Enough to Build a Coding Agent?
+
+<p class="course-subtitle">Files, execution, harness recovery, and bounded verification</p>
+
+<div class="course-cover-meta">Lesson 18 of 42 · 18 minutes · Coding as a Foundational Capability; Sessionless Design; Harness Engineering; Failure Recovery</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+
+<div class="course-kicker">Build · Chapter 5 · Coding Agents</div>
+
+# Problems this chapter will solve
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Lesson 18</h3>
+<p>Why Is Code Generation Not Enough to Build a Coding Agent?</p>
+</div>
+<div class="course-card green">
+<h3>Lesson 19</h3>
+<p>When Should an Agent Think in Code Instead of Words?</p>
+</div>
+<div class="course-card purple">
+<h3>Lesson 20</h3>
+<p>How Can an Agent Create Media It Can Actually Verify?</p>
+</div>
+<div class="course-card blue">
+<h3>Lesson 21</h3>
+<p>How Can Code Let an Agent Create New Capabilities?</p>
+</div>
+</div>
+
+<!-- Presenter cue: Orient viewers to the chapter. Name the progression, then highlight today's first problem. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Workspace</h3>
+<p>Files provide durable, inspectable state outside the context window.</p>
+</div>
+<div class="course-card green">
+<h3>Action</h3>
+<p>Search, editing, and execution tools let the Agent change that state.</p>
+</div>
+<div class="course-card orange">
+<h3>Evidence</h3>
+<p>Compilers, tests, and renderers expose mistakes independently.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Inspect</h3>
+<p>Search before reading; locate the smallest relevant surface</p>
+</div>
+<div class="course-card blue">
+<h3>Modify</h3>
+<p>Apply localized, reviewable edits</p>
+</div>
+<div class="course-card green">
+<h3>Recover</h3>
+<p>Classify evidence, revise one hypothesis, and stop safely</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig5-2.svg" alt="Coding Agent workflow">
+
+<div class="course-caption">Coding Agent workflow</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Chat code generation vs. Coding Agent
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Chat code generation</h3><ul><li>Produces a snippet</li><li>Cannot observe repository state</li><li>Leaves verification to the user</li></ul></div>
+<div class="course-card green"><h3>Coding Agent</h3><ul><li>Navigates a workspace</li><li>Executes and revises</li><li>Stops with evidence</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">A workbench and recovery loop turn generation into engineering.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Verification drives the next action
+
+~~~python
+for attempt in range(max_attempts):
+    patch = edit(inspect(task, workspace))
+    evidence = verify(patch)
+    if evidence.passed: return commit(patch)
+    task = revise_hypothesis(evidence)
+return stop_safely(evidence)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>Coding workflow</span><span>2 min</span></div>
+<h3>Run a write-search-edit-verify workflow</h3>
+<p><strong>Observe:</strong> A real file moves through write, search, localized edit, and independent verification</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>Harness tests</span><span>1 min</span></div>
+<h3>Run editing and shell-session contracts</h3>
+<p><strong>Observe:</strong> Exact-match edits, failure messages, state preservation, and safe boundaries</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 3 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run pytest -q chapter5/coding-agent/tests/test_integration.py::TestToolChaining::test_write_search_edit_workflow
+
+$ uv run pytest -q chapter5/coding-agent/tests/test_edit_tool.py chapter5/coding-agent/tests/test_shell_session.py
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Files make Agent state durable, inspectable, and reproducible.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Tool and test failures become observations that guide the next hypothesis.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>A reliable loop distinguishes verified success, safe incompletion, and unsafe failure.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">Passing available tests proves only their covered properties; the same workbench also exposes credentials and destructive commands.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Treat coding as a bounded inspect–modify–verify loop, with an evidence-driven recovery path for every failure class.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter5/coding-agent/">
+<span class="course-link-title">Coding Agent implementation</span>
+<span class="course-link-path">chapter5/coding-agent/</span>
+</a>
+<a class="course-link" href="../chapter5/coding-agent/tests/">
+<span class="course-link-title">Complete Coding Agent test suite</span>
+<span class="course-link-path">chapter5/coding-agent/tests/</span>
+</a>
+<a class="course-link" href="../book-en/images/fig5-3.svg">
+<span class="course-link-title">Search-tool comparison</span>
+<span class="course-link-path">book-en/images/fig5-3.svg</span>
+</a>
+<a class="course-link" href="../book-en/images/fig5-4.svg">
+<span class="course-link-title">File-editing comparison</span>
+<span class="course-link-path">book-en/images/fig5-4.svg</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which verifier would give your coding Agent genuinely new evidence after a wrong edit?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 19</div>
+
+<div class="course-next">Use code to improve reasoning and enforce strict business rules.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-19.md

@@ -0,0 +1,227 @@
+---
+theme: seriph
+title: "Lesson 19 — When Should an Agent Think in Code Instead of Words?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 5 · Coding Agents</div>
+
+# When Should an Agent Think in Code Instead of Words?
+
+<p class="course-subtitle">Math, logic, and deterministic business constraints</p>
+
+<div class="course-cover-meta">Lesson 19 of 42 · 19 minutes · Code as a Thinking Tool; Code as a Constraint for Business Rules</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Calculation</h3>
+<p>Delegate exact arithmetic to a runtime.</p>
+</div>
+<div class="course-card green">
+<h3>Logic</h3>
+<p>Translate constraints into a solver.</p>
+</div>
+<div class="course-card orange">
+<h3>Policy</h3>
+<p>Use server-side ground truth for irreversible decisions.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Formalization</h3>
+<p>Convert a verbal problem into variables and constraints</p>
+</div>
+<div class="course-card blue">
+<h3>Execution feedback</h3>
+<p>The environment returns exact results or errors</p>
+</div>
+<div class="course-card green">
+<h3>Three-tier rule safety</h3>
+<p>Prompt → checklist → server gate</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig5-10.svg" alt="Agent bootstrapping loop">
+
+<div class="course-caption">Agent bootstrapping loop</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Language-only vs. Code-assisted
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Language-only</h3><ul><li>Flexible explanation</li><li>Probabilistic arithmetic</li><li>May invent policy facts</li></ul></div>
+<div class="course-card green"><h3>Code-assisted</h3><ul><li>Exact execution</li><li>Testable constraints</li><li>Independent ground truth</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Use language to interpret and code to guarantee.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Never trust self-reported policy facts
+
+~~~python
+order = db.get(order_id)
+now = server_clock.now()
+eligible = policy.check(order, now)
+if not eligible:
+    return reject_with_reason(order)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-3 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>5-1</span><span>2 min</span></div>
+<h3>Self-check code-assisted math</h3>
+<p><strong>Observe:</strong> Exact sandbox execution and scoring against truth</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>5-2</span><span>2 min</span></div>
+<h3>Solve logic as constraints</h3>
+<p><strong>Observe:</strong> Variables, biconditional constraints, and verified solutions</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>5-3</span><span>2 min</span></div>
+<h3>Run codified-rule self-tests</h3>
+<p><strong>Observe:</strong> Checklist guidance versus server-side enforcement</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 6 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter5/code-for-math/demo.py --selfcheck
+
+$ uv run python chapter5/code-for-logic/demo.py --mode solver --min-people 4
+
+$ uv run python chapter5/small-model-codified-rules/demo.py --selftest
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Code replaces fragile mental computation with exact environmental feedback.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Constraint solvers reveal whether a verbal interpretation is internally consistent.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Critical rules must obtain facts from sources the model cannot forge.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+
+# Boundary → design rule
+
+<div class="course-boundary">Formalization can encode the wrong problem perfectly; interpretation still needs review.</div>
+
+<div class="course-rule">Use the model to translate intent, code to enforce invariants, and tests to verify the translation.</div>
+
+<!-- Presenter cue: State where the evidence stops, then turn that limitation into a reusable engineering rule. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter5/code-for-math/">
+<span class="course-link-title">Full math comparison</span>
+<span class="course-link-path">chapter5/code-for-math/</span>
+</a>
+<a class="course-link" href="../chapter5/code-for-logic/">
+<span class="course-link-title">Full logic comparison</span>
+<span class="course-link-path">chapter5/code-for-logic/</span>
+</a>
+<a class="course-link" href="../chapter5/small-model-codified-rules/">
+<span class="course-link-title">Codified-rules campaign</span>
+<span class="course-link-path">chapter5/small-model-codified-rules/</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which rule in your product is too important to exist only as natural language?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 20</div>
+
+<div class="course-next">Generate visual artifacts by writing code, rendering pixels, and reviewing the result.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-20.md

@@ -0,0 +1,224 @@
+---
+theme: seriph
+title: "Lesson 20 — How Can an Agent Create Media It Can Actually Verify?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 5 · Coding Agents</div>
+
+# How Can an Agent Create Media It Can Actually Verify?
+
+<p class="course-subtitle">Slidev, rendering, multimodal review, and video editing</p>
+
+<div class="course-cover-meta">Lesson 20 of 42 · 18 minutes · Code-Driven Multimedia Generation; Proposer-Reviewer; Video Editing</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Proposer</h3>
+<p>Plans content and writes artifact code.</p>
+</div>
+<div class="course-card green">
+<h3>Renderer</h3>
+<p>Converts code into the pixels users will see.</p>
+</div>
+<div class="course-card orange">
+<h3>Reviewer</h3>
+<p>Receives new visual evidence and returns structured fixes.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Artifact loop</h3>
+<p>Source → render → inspect → revise</p>
+</div>
+<div class="course-card blue">
+<h3>Context separation</h3>
+<p>Proposer keeps text; Reviewer sees current pixels</p>
+</div>
+<div class="course-card green">
+<h3>Explicit stop</h3>
+<p>Quality gate or maximum iterations</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig5-5.svg" alt="Proposer-Reviewer loop for presentation generation">
+
+<div class="course-caption">Proposer-Reviewer loop for presentation generation</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Self-review source vs. Rendered review
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Self-review source</h3><ul><li>Sees intended layout</li><li>Cannot observe overflow</li><li>Repeats assumptions</li></ul></div>
+<div class="course-card green"><h3>Rendered review</h3><ul><li>Sees actual pixels</li><li>Detects crowding and clipping</li><li>Returns page-specific evidence</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">The verifier is valuable because it receives new information.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Render before judging
+
+~~~python
+source = proposer.create_slidev(content)
+images = renderer.export_png(source)
+issues = vision_reviewer.inspect(images)
+while issues.blocking:
+    source = proposer.revise(source, issues)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>5-4</span><span>3 min</span></div>
+<h3>Run the offline Slidev review loop</h3>
+<p><strong>Observe:</strong> Crowded draft, rendered evidence, structured feedback, revised deck</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>5-6</span><span>2 min</span></div>
+<h3>Smoke-test code-driven video editing</h3>
+<p><strong>Observe:</strong> Generated editing script, executable path, and keyframe validation</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 5 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter5/paper-to-ppt/demo.py --dry-run
+
+$ uv run python chapter5/video-edit/demo.py --smoke
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Source correctness and visual correctness are different properties.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Separating generation and visual review controls multimodal context growth.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Coarse-to-fine visual sampling reduces the cost of locating video events.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+
+# Boundary → design rule
+
+<div class="course-boundary">A visual reviewer can catch layout defects but may still miss factual or pedagogical errors.</div>
+
+<div class="course-rule">Verify generated media in the modality consumed by the user.</div>
+
+<!-- Presenter cue: State where the evidence stops, then turn that limitation into a reusable engineering rule. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter5/paper-to-video/">
+<span class="course-link-title">Experiment 5-5: narrated video pipeline</span>
+<span class="course-link-path">chapter5/paper-to-video/</span>
+</a>
+<a class="course-link" href="../chapter5/paper-to-ppt/validation/">
+<span class="course-link-title">Presentation rendering artifacts</span>
+<span class="course-link-path">chapter5/paper-to-ppt/validation/</span>
+</a>
+<a class="course-link" href="../chapter5/paper-to-video/validation/">
+<span class="course-link-title">Paper-to-video evidence</span>
+<span class="course-link-path">chapter5/paper-to-video/validation/</span>
+</a>
+<a class="course-link" href="../book-en/images/fig5-6.svg">
+<span class="course-link-title">Video pipeline diagram</span>
+<span class="course-link-path">book-en/images/fig5-6.svg</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">What new evidence becomes available only after your artifact is rendered or executed?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 21</div>
+
+<div class="course-next">Use generated code to connect systems, create interfaces, and bootstrap new Agents.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-21.md

@@ -0,0 +1,235 @@
+---
+theme: seriph
+title: "Lesson 21 — How Can Code Let an Agent Create New Capabilities?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Build · Chapter 5 · Coding Agents</div>
+
+# How Can Code Let an Agent Create New Capabilities?
+
+<p class="course-subtitle">Adapters, generative UI, hot repair, and Agent bootstrapping</p>
+
+<div class="course-cover-meta">Lesson 21 of 42 · 19 minutes · Code as a System Adapter; Generative UI; Agent Bootstrapping</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Adapter</h3>
+<p>Translate unstable external formats into stable internal ones.</p>
+</div>
+<div class="course-card green">
+<h3>Interface</h3>
+<p>Generate a UI that matches the current intent.</p>
+</div>
+<div class="course-card orange">
+<h3>Bootstrap</h3>
+<p>Create a specialized Agent from a validated reference.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Hot repair</h3>
+<p>Failure sample → generated parser → tests → registration</p>
+</div>
+<div class="course-card blue">
+<h3>Artifact pattern</h3>
+<p>Pass paths and queries instead of moving large data through tokens</p>
+</div>
+<div class="course-card green">
+<h3>Validated generation</h3>
+<p>Compile, test, scan, and exercise generated Agents</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig5-11.svg" alt="Pipeline of an Agent that creates Agents">
+
+<div class="course-caption">Pipeline of an Agent that creates Agents</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# One-off generation vs. Capability creation
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>One-off generation</h3><ul><li>Produces an artifact</li><li>Capability disappears after task</li><li>No reuse gate</li></ul></div>
+<div class="course-card green"><h3>Capability creation</h3><ul><li>Packages implementation</li><li>Validates and versions it</li><li>Reuses on later tasks</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Bootstrapping begins when output becomes part of the next Agent.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Capability promotion needs gates
+
+~~~python
+candidate = agent.generate_tool(failure_sample)
+compile(candidate)
+run_security_scan(candidate)
+run_regression_tests(candidate)
+registry.promote(candidate)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-3 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>5-7</span><span>2 min</span></div>
+<h3>Repair an unknown log format</h3>
+<p><strong>Observe:</strong> Failure detection, generated parser, tests, and later reuse</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>5-9</span><span>2 min</span></div>
+<h3>Generate a dynamic form</h3>
+<p><strong>Observe:</strong> Intent gaps converted into fields and cascading constraints</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>5-12</span><span>2 min</span></div>
+<h3>Inspect Agent-creation validation gates</h3>
+<p><strong>Observe:</strong> Scratch versus template generation, compile, tests, and protocol audit</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 6 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ uv run python chapter5/adaptive-log-parser/demo.py --offline
+
+$ uv run python chapter5/dynamic-form/demo.py --offline
+
+$ uv run python chapter5/agent-creator/demo.py --no-live --output chapter5/agent-creator/runs/course-smoke
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Generated adapters let a system follow changing data formats.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Generative UI moves structured clarification out of slow chat turns.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Reference-based Agent creation preserves a proven loop while specializing tools.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+
+# Boundary → design rule
+
+<div class="course-boundary">Self-modification is unsafe when the Agent can alter the validator that approves its own changes.</div>
+
+<div class="course-rule">Promote generated code into capability only after independent security, functional, and reuse checks.</div>
+
+<!-- Presenter cue: State where the evidence stops, then turn that limitation into a reusable engineering rule. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-3 gap-4 mt-6">
+<a class="course-link" href="../chapter5/log-diagnosis/">
+<span class="course-link-title">Experiment 5-8: log diagnosis</span>
+<span class="course-link-path">chapter5/log-diagnosis/</span>
+</a>
+<a class="course-link" href="../chapter5/erp-agent/">
+<span class="course-link-title">Experiment 5-10: ERP SQL Agent</span>
+<span class="course-link-path">chapter5/erp-agent/</span>
+</a>
+<a class="course-link" href="../chapter5/conversational-ui/">
+<span class="course-link-title">Experiment 5-11: conversational UI</span>
+<span class="course-link-path">chapter5/conversational-ui/</span>
+</a>
+<a class="course-link" href="../book-en/images/fig5-8.svg">
+<span class="course-link-title">Dynamic form architecture</span>
+<span class="course-link-path">book-en/images/fig5-8.svg</span>
+</a>
+<a class="course-link" href="../book-en/images/fig5-9.svg">
+<span class="course-link-title">SQL artifact pattern</span>
+<span class="course-link-path">book-en/images/fig5-9.svg</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which generated artifact is safe to reuse, and who decides that it has become a capability?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Build complete · Next · Lesson 22</div>
+
+<div class="course-next">Measure whether any of these architectural changes actually improve the Agent.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-22.md

@@ -0,0 +1,279 @@
+---
+theme: seriph
+title: "Lesson 22 — How Do You Test an Agent Instead of Its Final Answer?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Improve · Chapter 6 · Agent Evaluation</div>
+
+# How Do You Test an Agent Instead of Its Final Answer?
+
+<p class="course-subtitle">Environments, state, datasets, and executable verification</p>
+
+<div class="course-cover-meta">Lesson 22 of 42 · 18 minutes · Automated Evaluation Environment; Evaluation Task Datasets; Simulation Environments</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+
+<div class="course-kicker">Improve · Chapter 6 · Agent Evaluation</div>
+
+# Problems this chapter will solve
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Lesson 22</h3>
+<p>How Do You Test an Agent Instead of Its Final Answer?</p>
+</div>
+<div class="course-card green">
+<h3>Lesson 23</h3>
+<p>How Do You Judge Quality Without Hiding Failure?</p>
+</div>
+<div class="course-card purple">
+<h3>Lesson 24</h3>
+<p>Which Agent Should You Ship?</p>
+</div>
+<div class="course-card blue">
+<h3>Lesson 25</h3>
+<p>Did the Agent Improve—or Did the Numbers Move?</p>
+</div>
+</div>
+
+<!-- Presenter cue: Orient viewers to the chapter. Name the progression, then highlight today's first problem. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Initial state</h3>
+<p>Every run begins from the same controllable world.</p>
+</div>
+<div class="course-card green">
+<h3>Interaction</h3>
+<p>The Agent receives realistic tools, errors, and user disclosures.</p>
+</div>
+<div class="course-card orange">
+<h3>Verification</h3>
+<p>Success is read from external state—not self-reported.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Dataset</h3>
+<p>Initial state + goal + boundary cases + success criteria</p>
+</div>
+<div class="course-card blue">
+<h3>Environment</h3>
+<p>State transitions, reset, tools, and termination</p>
+</div>
+<div class="course-card green">
+<h3>Protocol</h3>
+<p>Tool-only tasks or progressive user simulation</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig6-2.svg" alt="Tool-calling and human-computer interaction evaluation environments">
+
+<div class="course-caption">Tool-calling and human-computer interaction evaluation environments</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Answer benchmark vs. Agent evaluation
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Answer benchmark</h3><ul><li>One prompt</li><li>One response</li><li>String or judge score</li></ul></div>
+<div class="course-card green"><h3>Agent evaluation</h3><ul><li>Mutable state</li><li>Multi-turn trajectory</li><li>Executable outcome checks</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">An Agent can say the right thing while changing the world incorrectly.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Reset, act, and inspect
+
+~~~python
+state = environment.reset(case.seed)
+trajectory = agent.run(case.goal, environment.tools)
+outcome = environment.snapshot()
+passed = verifier.check(outcome, trajectory)
+store(case, trajectory, outcome, passed)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-1 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>Evaluation control</span><span>2 min</span></div>
+<h3>Score a reporting Agent from external state</h3>
+<p><strong>Observe:</strong> Tool-call correctness, arithmetic, evidence citations, and unsupported-claim vetoes</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 2 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ cd chapter6/public-health-reporting-eval && python demo.py
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>A resettable environment turns a trajectory into a repeatable experiment.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Progressive disclosure tests whether an Agent knows what to ask.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Objective state checks are stronger than judging the final prose alone.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">A simulator is useful only within its fidelity envelope; its omissions and biases become the Agent's test world.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Define the initial state, allowed transitions, and external success check before writing evaluation prompts.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment · 1/2
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter6/tau2-bench/">
+<span class="course-link-title">Experiments 6-1 and 6-2: tau2-bench</span>
+<span class="course-link-path">chapter6/tau2-bench/</span>
+</a>
+<a class="course-link" href="../chapter6/terminal-bench/">
+<span class="course-link-title">Terminal-Bench reproduction</span>
+<span class="course-link-path">chapter6/terminal-bench/</span>
+</a>
+<a class="course-link" href="../chapter6/SWE-bench/">
+<span class="course-link-title">SWE-bench reproduction</span>
+<span class="course-link-path">chapter6/SWE-bench/</span>
+</a>
+<a class="course-link" href="../chapter6/GAIA/">
+<span class="course-link-title">GAIA reproduction</span>
+<span class="course-link-path">chapter6/GAIA/</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+
+# Continue the experiment · 2/2
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter6/OSWorld/">
+<span class="course-link-title">OSWorld reproduction</span>
+<span class="course-link-path">chapter6/OSWorld/</span>
+</a>
+<a class="course-link" href="../chapter6/android-world/">
+<span class="course-link-title">AndroidWorld source and analysis</span>
+<span class="course-link-path">chapter6/android-world/</span>
+</a>
+<a class="course-link" href="../chapter6/openvla-robotwin2-eval/">
+<span class="course-link-title">OpenVLA + RoboTwin2 design</span>
+<span class="course-link-path">chapter6/openvla-robotwin2-eval/</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which production state would reveal success even if the Agent's final message were hidden?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 23</div>
+
+<div class="course-next">Turn observable outcomes into metrics that are consistent, diagnostic, and hard to game.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-23.md

@@ -0,0 +1,249 @@
+---
+theme: seriph
+title: "Lesson 23 — How Do You Judge Quality Without Hiding Failure?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Improve · Chapter 6 · Agent Evaluation</div>
+
+# How Do You Judge Quality Without Hiding Failure?
+
+<p class="course-subtitle">Rubrics, vetoes, LLM judges, pairwise comparison, and Elo</p>
+
+<div class="course-cover-meta">Lesson 23 of 42 · 19 minutes · Evaluation Metrics System; LLM-as-a-Judge; Pairwise Comparison and Model Ranking</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">How can an automated judge produce a useful signal without turning one score into false certainty?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Dimensions</h3>
+<p>Separate correctness, completeness, efficiency, and safety.</p>
+</div>
+<div class="course-card green">
+<h3>Evidence</h3>
+<p>Require a reason tied to the source trajectory.</p>
+</div>
+<div class="course-card orange">
+<h3>Vetoes</h3>
+<p>Block catastrophic errors that an average would conceal.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Rubric</h3>
+<p>Observable levels with boundary examples</p>
+</div>
+<div class="course-card blue">
+<h3>Calibration</h3>
+<p>Agreement, position bias, and human spot checks</p>
+</div>
+<div class="course-card green">
+<h3>Pairwise ranking</h3>
+<p>Compare A/B first; reconstruct relative strength later</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig6-4.svg" alt="LLM-as-a-Judge evaluation pipeline">
+
+<div class="course-caption">LLM-as-a-Judge evaluation pipeline</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Single score vs. Structured judgment
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Single score</h3><ul><li>Easy to chart</li><li>Failure causes disappear</li><li>Can reward fluent hallucination</li></ul></div>
+<div class="course-card green"><h3>Structured judgment</h3><ul><li>Dimension scores</li><li>Cited evidence</li><li>Independent safety veto</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Aggregation should happen after diagnosis—not before it.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Keep the veto outside the average
+
+~~~python
+grades = judge.score(trajectory, rubric)
+hallucinated = verifier.unsupported_claim(trajectory)
+if hallucinated: return 0.0
+return weighted_mean(grades)
+# retain every grade and its evidence
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>6-3</span><span>2 min</span></div>
+<h3>Compare memory systems with an offline scored control</h3>
+<p><strong>Observe:</strong> How direct recall diverges from cross-session synthesis</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>6-6</span><span>2 min</span></div>
+<h3>Recover a leaderboard from simulated pairwise votes</h3>
+<p><strong>Observe:</strong> Latent ranking, uncertainty intervals, and sensitivity to comparison data</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 4 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ cd chapter3/user-memory-evaluation && python main.py --mode compare --metric keyword-recall --category layer3
+
+$ cd chapter6/elo-leaderboard && python cli.py pipeline --source simulate --num-battles 1000 --method bradley-terry --bootstrap 20
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>A useful Rubric turns vague quality into inspectable decisions.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>A hallucination veto prevents polished falsehoods from averaging into a pass.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Pairwise judgments are often easier than absolute scores, but their ranking is still data-dependent.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">An LLM judge shares model biases, can be position-sensitive, and must not be treated as ground truth without calibration.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Ask the judge for dimension-level evidence, calibrate it, and keep hard safety failures outside weighted averages.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter6/user-memory-system-evaluation/">
+<span class="course-link-title">Experiment 6-4: end-to-end memory systems</span>
+<span class="course-link-path">chapter6/user-memory-system-evaluation/</span>
+</a>
+<a class="course-link" href="../chapter6/tts-quality-eval/">
+<span class="course-link-title">Experiment 6-5: TTS quality evaluation</span>
+<span class="course-link-path">chapter6/tts-quality-eval/</span>
+</a>
+<a class="course-link" href="../chapter3/user-memory-evaluation/validate_rubric.py">
+<span class="course-link-title">Structured Rubric implementation</span>
+<span class="course-link-path">chapter3/user-memory-evaluation/validate_rubric.py</span>
+</a>
+<a class="course-link" href="../chapter6/elo-leaderboard/validation/">
+<span class="course-link-title">Elo full-data validation</span>
+<span class="course-link-path">chapter6/elo-leaderboard/validation/</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which failure in your domain deserves a veto rather than a lower average score?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 24</div>
+
+<div class="course-next">Use evaluation to select a whole Agent system—not merely a model name.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-24.md

@@ -0,0 +1,249 @@
+---
+theme: seriph
+title: "Lesson 24 — Which Agent Should You Ship?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Improve · Chapter 6 · Agent Evaluation</div>
+
+# Which Agent Should You Ship?
+
+<p class="course-subtitle">Model behavior, latency, cost, and evaluation-driven selection</p>
+
+<div class="course-cover-meta">Lesson 24 of 42 · 19 minutes · Evaluation-Driven Model Selection; Model Behavior; Cost Analysis; Continuous Iteration</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">Why is the highest benchmark score not enough to choose a production Agent?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Quality</h3>
+<p>Success, boundary behavior, and variance across task slices</p>
+</div>
+<div class="course-card green">
+<h3>Behavior</h3>
+<p>When the model searches, edits, retries, or stops</p>
+</div>
+<div class="course-card orange">
+<h3>Economics</h3>
+<p>Latency, cache use, tokens, availability, and total task cost</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Fixed Harness</h3>
+<p>Swap models to locate a model-side bottleneck</p>
+</div>
+<div class="course-card blue">
+<h3>Ablation</h3>
+<p>Remove one Harness component to measure its contribution</p>
+</div>
+<div class="course-card green">
+<h3>Pareto frontier</h3>
+<p>Choose a non-dominated quality/cost/latency point</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig6-7.svg" alt="Loop from benchmark results to system improvements">
+
+<div class="course-caption">Loop from benchmark results to system improvements</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Leaderboard choice vs. Deployment choice
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Leaderboard choice</h3><ul><li>One public score</li><li>Unknown Harness</li><li>Average case</li></ul></div>
+<div class="course-card green"><h3>Deployment choice</h3><ul><li>Your task distribution</li><li>Your complete Harness</li><li>Cost and failure boundaries</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">The unit of selection is model + context + tools + runtime.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Filter before ranking
+
+~~~python
+eligible = [r for r in runs if r.safety_pass]
+eligible = [r for r in eligible if r.p95_latency < sla]
+frontier = pareto(eligible, maximize='success', minimize='cost')
+winner = validate_on_holdout(frontier)
+ship_with_feature_flag(winner)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>6-8</span><span>2 min</span></div>
+<h3>Recompute a full Agent cost breakdown</h3>
+<p><strong>Observe:</strong> Per-step cost, cache savings, compression savings, and non-additive interactions</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>6-7</span><span>2 min</span></div>
+<h3>Validate a fixed-Harness action-threshold experiment</h3>
+<p><strong>Observe:</strong> Event-boundary accounting, first-edit timing, rework, and independent final tests</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 4 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ cd chapter6/agent-cost-analysis && python demo.py --offline --scenario all
+
+$ python -m unittest discover -s chapter6/model-action-threshold/tests -v
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Different models carry different default tool-use policies inside the same Harness.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Cache-friendly context and compression change cost without changing the task.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>A model upgrade is a hypothesis that must clear your own gates.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">A smoke run verifies integration, not steady-state availability, tail latency, or statistical superiority.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Select on a domain-specific Pareto frontier after safety and reliability gates—not on a global leaderboard rank.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter6/model-benchmark/">
+<span class="course-link-title">Experiment 6-9: provider/model benchmark</span>
+<span class="course-link-path">chapter6/model-benchmark/</span>
+</a>
+<a class="course-link" href="../chapter6/user-memory-system-evaluation/">
+<span class="course-link-title">Experiment 6-10: full memory component matrix</span>
+<span class="course-link-path">chapter6/user-memory-system-evaluation/</span>
+</a>
+<a class="course-link" href="../chapter6/model-action-threshold/results/">
+<span class="course-link-title">Action-threshold canonical campaign</span>
+<span class="course-link-path">chapter6/model-action-threshold/results/</span>
+</a>
+<a class="course-link" href="../chapter6/agent-cost-analysis/sample_trace.json">
+<span class="course-link-title">Cost-analysis sample trace</span>
+<span class="course-link-path">chapter6/agent-cost-analysis/sample_trace.json</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">What is the first non-quality gate that would eliminate a model from your production shortlist?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 25</div>
+
+<div class="course-next">Build evaluation infrastructure that can distinguish a real improvement from noise.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-25.md

@@ -0,0 +1,242 @@
+---
+theme: seriph
+title: "Lesson 25 — Did the Agent Improve—or Did the Numbers Move?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Improve · Chapter 6 · Agent Evaluation</div>
+
+# Did the Agent Improve—or Did the Numbers Move?
+
+<p class="course-subtitle">Significance, observability, ablations, and production evaluation</p>
+
+<div class="course-cover-meta">Lesson 25 of 42 · 17 minutes · Statistical Significance; Agent Observability; Internal Evaluation Infrastructure; Simulation Fidelity</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">What evidence is required before an evaluation delta becomes an engineering decision?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Uncertainty</h3>
+<p>Repeated samples expose variance and paired differences.</p>
+</div>
+<div class="course-card green">
+<h3>Observability</h3>
+<p>Traces connect aggregate regressions to mechanisms.</p>
+</div>
+<div class="course-card orange">
+<h3>Release control</h3>
+<p>Feature flags, A/B tests, rollback, and privacy-aware analytics</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Paired test</h3>
+<p>Run old and new systems on the same cases</p>
+</div>
+<div class="course-card blue">
+<h3>Confidence interval</h3>
+<p>Report a plausible range—not only a mean</p>
+</div>
+<div class="course-card green">
+<h3>Two-layer flags</h3>
+<p>Separate mechanism enablement from experiment assignment</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig6-6.svg" alt="Observability technology stack for Agent systems">
+
+<div class="course-caption">Observability technology stack for Agent systems</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Scoreboard vs. Evaluation infrastructure
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Scoreboard</h3><ul><li>One aggregate</li><li>No trace linkage</li><li>Manual reruns</li></ul></div>
+<div class="course-card green"><h3>Evaluation infrastructure</h3><ul><li>Slices + uncertainty</li><li>Trajectory-level observability</li><li>Repeatable release gates</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">The purpose of a benchmark report is to generate testable hypotheses.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Pair cases before estimating the delta
+
+~~~python
+deltas = [new[c] - old[c] for c in shared_cases]
+estimate, interval = bootstrap_mean(deltas)
+if interval.low <= 0: hold_release()
+else: canary(new_system)
+monitor_slices_and_rollback()
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-1 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>6-3 evidence</span><span>2 min</span></div>
+<h3>Rebuild and audit structured-judge evidence</h3>
+<p><strong>Observe:</strong> Case coverage, immutable source hashes, judge dimensions, and veto records</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 2 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ cd chapter6/user-memory-system-evaluation && python build_63_evidence.py
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Paired case-level analysis is more sensitive than comparing unrelated averages.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Traces make a regression actionable by revealing the failing mechanism.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Evaluation becomes production infrastructure when it controls release and rollback.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">Statistical significance does not imply practical importance, dataset validity, or simulation fidelity.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Ship only deltas that are repeatable, practically meaningful, slice-safe, and traceable to a plausible mechanism.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter6/android-world/">
+<span class="course-link-title">Experiment 6-11: AndroidWorld failure analysis</span>
+<span class="course-link-path">chapter6/android-world/</span>
+</a>
+<a class="course-link" href="../chapter6/openvla-robotwin2-eval/">
+<span class="course-link-title">Experiment 6-12: OpenVLA + RoboTwin2</span>
+<span class="course-link-path">chapter6/openvla-robotwin2-eval/</span>
+</a>
+<a class="course-link" href="../book-en/images/fig6-8.svg">
+<span class="course-link-title">Simulation fidelity spectrum</span>
+<span class="course-link-path">book-en/images/fig6-8.svg</span>
+</a>
+<a class="course-link" href="../book-en/chapter6.md">
+<span class="course-link-title">Production evaluation chapter</span>
+<span class="course-link-path">book-en/chapter6.md</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">What would make a statistically significant improvement too small or too risky to ship?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Chapter 6 complete · Next · Lesson 26</div>
+
+<div class="course-next">Use the evaluation environment as the practice ground for changing model behavior.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-26.md

@@ -0,0 +1,266 @@
+---
+theme: seriph
+title: "Lesson 26 — Why Does Model Training Happen in Three Stages?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Improve · Chapter 7 · Model Post-Training</div>
+
+# Why Does Model Training Happen in Three Stages?
+
+<p class="course-subtitle">Pre-training, SFT, RL, and the agent-environment loop</p>
+
+<div class="course-cover-meta">Lesson 26 of 42 · 17 minutes · Pre-training, SFT, RL: A Three-Stage Panorama; Classic RL Agents; Pre-training Basics</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+
+<div class="course-kicker">Improve · Chapter 7 · Model Post-Training</div>
+
+# Problems this chapter will solve
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Lesson 26</h3>
+<p>Why Does Model Training Happen in Three Stages?</p>
+</div>
+<div class="course-card green">
+<h3>Lesson 27</h3>
+<p>When Should You Teach with Examples—and When with Rewards?</p>
+</div>
+<div class="course-card purple">
+<h3>Lesson 28</h3>
+<p>How Do Preferences Become a Trainable Signal?</p>
+</div>
+<div class="course-card blue">
+<h3>Lesson 29</h3>
+<p>Why Do Data and Environments Matter More Than the Algorithm?</p>
+</div>
+<div class="course-card green">
+<h3>Lesson 30</h3>
+<p>How Do You Reward a Long Agent Trajectory?</p>
+</div>
+<div class="course-card purple">
+<h3>Lesson 31</h3>
+<p>How Can a Model Learn to Use Tools with Fewer Samples?</p>
+</div>
+</div>
+
+<!-- Presenter cue: Orient viewers to the chapter. Name the progression, then highlight today's first problem. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Pre-training</h3>
+<p>Acquire language, priors, knowledge, and basic reasoning.</p>
+</div>
+<div class="course-card green">
+<h3>SFT</h3>
+<p>Learn the response and tool-use protocol from demonstrations.</p>
+</div>
+<div class="course-card orange">
+<h3>RL</h3>
+<p>Explore decisions and increase actions that earn reward.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Policy</h3>
+<p>A probability distribution over the next action</p>
+</div>
+<div class="course-card blue">
+<h3>Environment</h3>
+<p>The world that returns a new state and reward</p>
+</div>
+<div class="course-card green">
+<h3>Update</h3>
+<p>Move probability toward behavior supported by the signal</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig7-7.svg" alt="Q-learning and LLM Agent architectures in a treasure hunt">
+
+<div class="course-caption">Q-learning and LLM Agent architectures in a treasure hunt</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Classic RL vs. LLM Agent
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Classic RL</h3><ul><li>Small state/action space</li><li>Learns mainly from trials</li><li>Explicit value estimates</li></ul></div>
+<div class="course-card green"><h3>LLM Agent</h3><ul><li>Language observations/actions</li><li>Strong pretrained priors</li><li>Reasons in context before acting</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">The loop is shared; the representation and prior knowledge are radically different.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# The Q-learning update
+
+~~~python
+target = reward + gamma * max(Q[next_state])
+error = target - Q[state, action]
+Q[state, action] += alpha * error
+state = next_state
+# experience changes the next choice
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-1 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>7-1</span><span>2 min</span></div>
+<h3>Watch Q-learning discover hidden game mechanics</h3>
+<p><strong>Observe:</strong> Learning curve, exploration decay, and final greedy success</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 2 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ cd chapter1/learning-from-experience && python experiment.py --mode qlearning --rl-episodes 10000 --eval-episodes 100 --seed 42
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Pre-training supplies priors that tabular RL must discover from scratch.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>SFT and pre-training both predict tokens; their data and loss masks differ.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>RL needs an environment capable of producing a meaningful signal.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">The treasure hunt clarifies the loop, but its small state space does not represent the scale of language-model training.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Before choosing a training method, name the capability, the representation it should change, and the signal available to teach it.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter1/learning-from-experience/">
+<span class="course-link-title">Experiment 7-2: Q-learning vs. LLM Agent</span>
+<span class="course-link-path">chapter1/learning-from-experience/</span>
+</a>
+<a class="course-link" href="../book-en/images/fig7-3.svg">
+<span class="course-link-title">Q-learning grid world</span>
+<span class="course-link-path">book-en/images/fig7-3.svg</span>
+</a>
+<a class="course-link" href="../book-en/images/fig7-5.svg">
+<span class="course-link-title">Classic vs. modern Agent</span>
+<span class="course-link-path">book-en/images/fig7-5.svg</span>
+</a>
+<a class="course-link" href="../book-en/images/fig7-6.svg">
+<span class="course-link-title">Training paradigm evolution</span>
+<span class="course-link-path">book-en/images/fig7-6.svg</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which capability in your Agent comes from weights, and which is reconstructed from context every run?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 27</div>
+
+<div class="course-next">Decide when demonstrations are enough and when exploration is worth the cost.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-27.md

@@ -0,0 +1,253 @@
+---
+theme: seriph
+title: "Lesson 27 — When Should You Teach with Examples—and When with Rewards?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Improve · Chapter 7 · Model Post-Training</div>
+
+# When Should You Teach with Examples—and When with Rewards?
+
+<p class="course-subtitle">SFT, loss masking, distribution shift, and the form-first rule</p>
+
+<div class="course-cover-meta">Lesson 27 of 42 · 19 minutes · SFT; When to Choose SFT and When to Choose RL; Single-Turn Reinforcement Learning</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">Is the target capability a stable mapping to imitate or a strategy that must survive new situations?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>SFT</h3>
+<p>Dense token-level supervision; stable and sample-efficient.</p>
+</div>
+<div class="course-card green">
+<h3>RL</h3>
+<p>Sparse trajectory feedback; costly but allows exploration.</p>
+</div>
+<div class="course-card orange">
+<h3>Shift</h3>
+<p>Test whether the learned behavior survives changed rules and inputs.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Loss masking</h3>
+<p>Supervise the assistant response—not the user prompt</p>
+</div>
+<div class="course-card blue">
+<h3>Form first</h3>
+<p>Stabilize parsable output before optimizing strategy</p>
+</div>
+<div class="course-card green">
+<h3>Holdout shift</h3>
+<p>Change values or environments while preserving the rule</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig7-11.svg" alt="SFT followed by RL as a two-stage training pipeline">
+
+<div class="course-caption">SFT followed by RL as a two-stage training pipeline</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Use SFT vs. Consider RL
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Use SFT</h3><ul><li>Known demonstrations</li><li>Format/style/protocol</li><li>Deployment matches training</li></ul></div>
+<div class="course-card green"><h3>Consider RL</h3><ul><li>Outcome can be verified</li><li>Many valid strategies</li><li>Generalization under shift matters</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">SFT and RL are sequential tools—not rival ideologies.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# SFT masks the prompt tokens
+
+~~~python
+tokens = prompt_ids + response_ids
+labels = [-100] * len(prompt_ids) + response_ids
+loss = cross_entropy(model(tokens), labels)
+loss.backward()
+# only the demonstrated response is supervised
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>7-4 evidence</span><span>2 min</span></div>
+<h3>Audit retained VLM pre-training and SFT evidence</h3>
+<p><strong>Observe:</strong> Hashed outputs, blind judgments, matched configurations, and negative results</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>7-5 evidence</span><span>2 min</span></div>
+<h3>Audit continued-pretraining trade-offs</h3>
+<p><strong>Observe:</strong> New-language gain, retained English ability, and persistent factual errors</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 4 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ python chapter7/MiniMind-pretrain/validation/validate_vlm_evidence.py
+
+$ python chapter7/continued-pretraining/validation/validate_evidence.py
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>SFT efficiently learns explicit protocols represented in examples.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>RL is justified when a verifier can reward strategies beyond one reference answer.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Training gains must be tested beside retention and distribution-shift failures.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">The slogan 'SFT memorizes, RL generalizes' is a tendency under controlled conditions—not a guarantee for every model and task.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Use SFT until output is stable; add RL only when exploration and verified generalization justify its cost.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-3 gap-4 mt-6">
+<a class="course-link" href="../chapter7/MiniMind-pretrain/">
+<span class="course-link-title">Experiment 7-3: MiniMind language training</span>
+<span class="course-link-path">chapter7/MiniMind-pretrain/</span>
+</a>
+<a class="course-link" href="../chapter7/SFTvsRL/">
+<span class="course-link-title">Experiment 7-11: SFT vs. RL reproduction</span>
+<span class="course-link-path">chapter7/SFTvsRL/</span>
+</a>
+<a class="course-link" href="../chapter7/sesame/">
+<span class="course-link-title">Experiment 7-6: Sesame speech SFT</span>
+<span class="course-link-path">chapter7/sesame/</span>
+</a>
+<a class="course-link" href="../chapter7/orpheus/">
+<span class="course-link-title">Experiment 7-6: Orpheus speech SFT</span>
+<span class="course-link-path">chapter7/orpheus/</span>
+</a>
+<a class="course-link" href="../chapter7/MultilingualReasoning/">
+<span class="course-link-title">Experiment 7-7: multilingual reasoning</span>
+<span class="course-link-path">chapter7/MultilingualReasoning/</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">What deployment change would reveal that your fine-tuned model learned an example instead of a rule?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 28</div>
+
+<div class="course-next">Translate preferences and outcomes into optimization signals without losing the base policy.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-28.md

@@ -0,0 +1,242 @@
+---
+theme: seriph
+title: "Lesson 28 — How Do Preferences Become a Trainable Signal?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Improve · Chapter 7 · Model Post-Training</div>
+
+# How Do Preferences Become a Trainable Signal?
+
+<p class="course-subtitle">RLHF, reward models, KL constraints, PPO, GRPO, and DPO</p>
+
+<div class="course-cover-meta">Lesson 28 of 42 · 17 minutes · RLHF: From Human Preferences to Reward Models; Comparison of RL Algorithms</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">How can human comparisons change a policy without letting optimization destroy useful behavior?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Preference data</h3>
+<p>Humans compare outputs more reliably than they author perfect ones.</p>
+</div>
+<div class="course-card green">
+<h3>Reward model</h3>
+<p>Generalizes pairwise labels into a scalar training signal.</p>
+</div>
+<div class="course-card orange">
+<h3>Reference policy</h3>
+<p>KL pressure limits drift away from known behavior.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>PPO</h3>
+<p>Actor + critic + clipped policy update</p>
+</div>
+<div class="course-card blue">
+<h3>GRPO</h3>
+<p>Normalize rewards within a sampled response group</p>
+</div>
+<div class="course-card green">
+<h3>DPO</h3>
+<p>Optimize chosen over rejected responses without a rollout loop</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig7-13.svg" alt="Group Relative Policy Optimization flow">
+
+<div class="course-caption">Group Relative Policy Optimization flow</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Outcome optimization vs. Preference optimization
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Outcome optimization</h3><ul><li>Can discover new outputs</li><li>Requires rollouts</li><li>Reward hacking risk</li></ul></div>
+<div class="course-card green"><h3>Preference optimization</h3><ul><li>Uses chosen/rejected pairs</li><li>Simpler pipeline</li><li>Bounded by offline data</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">The algorithm changes how the signal is used—not whether the signal is valid.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# A relative advantage removes the critic
+
+~~~python
+rewards = verifier(samples)
+adv = (rewards - rewards.mean()) / (rewards.std() + 1e-6)
+ratio = policy.prob(samples) / old_policy.prob(samples)
+loss = clipped_policy_loss(ratio, adv)
+loss += beta * kl(policy, reference)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-1 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>RL evaluation check</span><span>2 min</span></div>
+<h3>Run answer-extraction tests for an RL-trained reasoner</h3>
+<p><strong>Observe:</strong> Whether the evaluator recognizes the trained model's answer format without inflating accuracy</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 2 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ python -m pytest chapter7/Intuitor/tests -q
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Preference labels can train either an explicit reward model or a direct objective.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Relative rewards reduce value-model complexity but do not fix a bad verifier.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>KL is a steering constraint, not proof that useful capabilities are retained.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">Offline preference methods cannot explore behaviors absent from their comparison data.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Choose the simplest optimizer that can use your signal, then spend most of the effort validating the signal and holdout behavior.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter7/Intuitor/">
+<span class="course-link-title">Intuitor training companion</span>
+<span class="course-link-path">chapter7/Intuitor/</span>
+</a>
+<a class="course-link" href="../chapter7/verl/">
+<span class="course-link-title">verl RL training framework</span>
+<span class="course-link-path">chapter7/verl/</span>
+</a>
+<a class="course-link" href="../chapter7/tinker-cookbook/">
+<span class="course-link-title">Tinker cookbook</span>
+<span class="course-link-path">chapter7/tinker-cookbook/</span>
+</a>
+<a class="course-link" href="../book-en/images/fig7-reward-paradigms.svg">
+<span class="course-link-title">Reward paradigm evolution</span>
+<span class="course-link-path">book-en/images/fig7-reward-paradigms.svg</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">What shortcut could maximize your proposed reward while making the real product worse?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 29</div>
+
+<div class="course-next">Move attention from algorithm names to the data and environment that define the signal.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-29.md

@@ -0,0 +1,242 @@
+---
+theme: seriph
+title: "Lesson 29 — Why Do Data and Environments Matter More Than the Algorithm?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Improve · Chapter 7 · Model Post-Training</div>
+
+# Why Do Data and Environments Matter More Than the Algorithm?
+
+<p class="course-subtitle">Practice grounds, task distributions, synthetic data, and fidelity</p>
+
+<div class="course-cover-meta">Lesson 29 of 42 · 17 minutes · Data and Environment: More Important Than Algorithms; Model-Simulated Environments</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">If PPO and GRPO are available off the shelf, where does the real training advantage come from?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Coverage</h3>
+<p>Tasks must span the situations that deployment will create.</p>
+</div>
+<div class="course-card green">
+<h3>Fidelity</h3>
+<p>Errors and transitions must resemble the real environment.</p>
+</div>
+<div class="course-card orange">
+<h3>Density</h3>
+<p>Useful information should survive filtering and reach the learner.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Task distribution</h3>
+<p>Optimize which examples are generated and sampled</p>
+</div>
+<div class="course-card blue">
+<h3>Environment model</h3>
+<p>Simulate transitions when the real world is unavailable</p>
+</div>
+<div class="course-card green">
+<h3>Data verifier</h3>
+<p>Reject corrupt, ungrounded, or unparseable trajectories</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig7-1.svg" alt="Reinforcement learning agent-environment interaction loop">
+
+<div class="course-caption">Reinforcement learning agent-environment interaction loop</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Algorithm-first vs. Signal-first
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Algorithm-first</h3><ul><li>Tune optimizer knobs</li><li>Reuse weak tasks</li><li>Trust training reward</li></ul></div>
+<div class="course-card green"><h3>Signal-first</h3><ul><li>Design task coverage</li><li>Audit environment fidelity</li><li>Measure held-out outcomes</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">A better optimizer learns the wrong lesson faster when the world is wrong.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Filter before the trajectory becomes data
+
+~~~python
+trajectory = policy.rollout(task, environment)
+receipt = verifier.inspect(trajectory)
+if receipt.grounded and receipt.complete:
+    replay_buffer.add(trajectory, receipt)
+sample_balanced(replay_buffer, task_slices)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-1 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>7-9 data</span><span>2 min</span></div>
+<h3>Inspect verified teacher trajectories before SFT</h3>
+<p><strong>Observe:</strong> Sample count, trajectory length, reflective behavior, and verifier failures</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 2 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ cd chapter7/cot-distillation && python analyze_data.py --sft data/sft_cot_distill_aime_kimi_k3.jsonl --raw data/raw_trajectories_aime_kimi_k3.jsonl
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Training data quality includes task coverage, provenance, and verifier correctness.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>A model-simulated environment can scale practice but transfers its own biases.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Reward curves must be checked against independent deployment-shaped evaluations.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">Synthetic diversity does not guarantee real diversity when every example comes from the same generator and assumptions.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Invest first in realistic transitions, difficult boundary cases, and independent verification; tune the optimizer afterward.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter8/prompt-distillation/">
+<span class="course-link-title">Experiment 7-8: prompt distillation</span>
+<span class="course-link-path">chapter8/prompt-distillation/</span>
+</a>
+<a class="course-link" href="../chapter7/cot-distillation/">
+<span class="course-link-title">Experiment 7-9: CoT distillation</span>
+<span class="course-link-path">chapter7/cot-distillation/</span>
+</a>
+<a class="course-link" href="../chapter7/AdaptThink/">
+<span class="course-link-title">Experiment 7-10: adaptive reasoning length</span>
+<span class="course-link-path">chapter7/AdaptThink/</span>
+</a>
+<a class="course-link" href="../book-en/chapter7.md">
+<span class="course-link-title">Autodata and simulated-environment discussion</span>
+<span class="course-link-path">book-en/chapter7.md</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which behavior in your simulator is easiest for a policy to exploit but impossible in production?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 30</div>
+
+<div class="course-next">Assign credit when one final outcome depends on many earlier decisions.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-30.md

@@ -0,0 +1,242 @@
+---
+theme: seriph
+title: "Lesson 30 — How Do You Reward a Long Agent Trajectory?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Improve · Chapter 7 · Model Post-Training</div>
+
+# How Do You Reward a Long Agent Trajectory?
+
+<p class="course-subtitle">Credit assignment, reward density, process signals, and path penalties</p>
+
+<div class="course-cover-meta">Lesson 30 of 42 · 17 minutes · From Single-Turn to Multi-Turn; Credit Assignment; Process vs. Outcome Reward; RLVP</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">When the final result fails, which earlier tool choice should the model change?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Sparse outcome</h3>
+<p>One final bit leaves most actions unexplained.</p>
+</div>
+<div class="course-card green">
+<h3>Process evidence</h3>
+<p>Tool errors and rule violations identify local mistakes.</p>
+</div>
+<div class="course-card orange">
+<h3>Partial credit</h3>
+<p>Reachable progress can rescue information from all-fail groups.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Outcome reward</h3>
+<p>Score the completed task—not a convenient proxy</p>
+</div>
+<div class="course-card blue">
+<h3>Process reward</h3>
+<p>Evaluate intermediate reasoning or actions</p>
+</div>
+<div class="course-card green">
+<h3>RLVP</h3>
+<p>Reward the outcome; penalize verified path violations</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig7-15.svg" alt="Credit assignment across a multi-turn interaction">
+
+<div class="course-caption">Credit assignment across a multi-turn interaction</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Outcome only vs. Outcome + path evidence
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Outcome only</h3><ul><li>Objective final target</li><li>Simple verifier</li><li>Very sparse credit</li></ul></div>
+<div class="course-card green"><h3>Outcome + path evidence</h3><ul><li>Retains final goal</li><li>Uses observed violations</li><li>Denser diagnosis</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Path signals should constrain the route without replacing the destination.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Separate success from path violations
+
+~~~python
+outcome = task_verifier(final_state)
+violations = rule_verifier(trajectory)
+progress = reachable_subgoals(trajectory)
+reward = outcome - penalty(violations)
+reward += partial_credit(progress, only_if_all_fail=True)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-1 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>7-14 gates</span><span>2 min</span></div>
+<h3>Run verifier regressions for trajectory data</h3>
+<p><strong>Observe:</strong> Malformed samples rejected before they can become supervision</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 2 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ python -m pytest chapter7/cot-distillation/test_student_pipeline.py chapter7/cot-distillation/test_empty_problems.py -q
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Multi-turn tasks turn one outcome into a temporal attribution problem.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Environment feedback contains information that scalar outcome rewards discard.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>A process metric becomes dangerous when it is easier to optimize than the real goal.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">An LLM process judge can reward plausible-looking steps that did not causally produce the outcome.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Keep an objective outcome gate, add only externally verified path signals, and test explicitly for reward hacking.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter7/RLVP/">
+<span class="course-link-title">Experiment 7-14: RLVP reproduction guide</span>
+<span class="course-link-path">chapter7/RLVP/</span>
+</a>
+<a class="course-link" href="../chapter7/SpatialReasoning/">
+<span class="course-link-title">Experiment 7-12: spatial reasoning</span>
+<span class="course-link-path">chapter7/SpatialReasoning/</span>
+</a>
+<a class="course-link" href="../chapter7/SimpleVLA-RL/">
+<span class="course-link-title">Experiment 7-13: SimpleVLA-RL</span>
+<span class="course-link-path">chapter7/SimpleVLA-RL/</span>
+</a>
+<a class="course-link" href="../book-en/images/fig7-reward-density.svg">
+<span class="course-link-title">Reward density spectrum</span>
+<span class="course-link-path">book-en/images/fig7-reward-density.svg</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which intermediate signal in your Agent is evidence of progress, and which is merely correlated with it?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 31</div>
+
+<div class="course-next">Apply these signals to the combinatorial problem of learning when and how to call tools.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-31.md

@@ -0,0 +1,246 @@
+---
+theme: seriph
+title: "Lesson 31 — How Can a Model Learn to Use Tools with Fewer Samples?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Improve · Chapter 7 · Model Post-Training</div>
+
+# How Can a Model Learn to Use Tools with Fewer Samples?
+
+<p class="course-subtitle">Tool-call RL, sandbox feedback, distillation, and practical boundaries</p>
+
+<div class="course-cover-meta">Lesson 31 of 42 · 17 minutes · RL for Learning Tool Calling; Sample Efficiency; On-Policy Distillation; Practical Tips</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">How do we teach a model a policy over tools when most trajectories fail and every rollout is expensive?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Combinatorics</h3>
+<p>Tool, argument, order, and stopping choices multiply quickly.</p>
+</div>
+<div class="course-card green">
+<h3>Grounding</h3>
+<p>Sandbox and environment feedback reveal what language alone cannot.</p>
+</div>
+<div class="course-card orange">
+<h3>Dense teaching</h3>
+<p>Distillation supplies token-level targets on the student's own paths.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>ReTool</h3>
+<p>Interleave text, code calls, and sandbox observations</p>
+</div>
+<div class="course-card blue">
+<h3>On-policy distillation</h3>
+<p>Teacher scores the student's current trajectories token by token</p>
+</div>
+<div class="course-card green">
+<h3>Self-distillation</h3>
+<p>Privileged context turns the same model into a teacher</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig7-16.svg" alt="Tool-calling reinforcement learning reward loop">
+
+<div class="course-caption">Tool-calling reinforcement learning reward loop</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Scalar RL signal vs. Dense distillation
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Scalar RL signal</h3><ul><li>One reward per trajectory</li><li>Many samples wasted</li><li>Can discover beyond teacher</li></ul></div>
+<div class="course-card green"><h3>Dense distillation</h3><ul><li>Signal at each token</li><li>Higher sample efficiency</li><li>Teacher or privileged context required</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Both methods need trajectories shaped like real Agent interaction.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Learn on the student's own trajectory
+
+~~~python
+trajectory = student.rollout(task, tools)
+teacher_logits = teacher.score(trajectory, privileged_info)
+student_logits = student.score(trajectory)
+loss = token_kl(student_logits, teacher_logits)
+update(student, loss)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-1 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>7-9 preflight</span><span>2 min</span></div>
+<h3>Check whether a CoT student-training run is actually ready</h3>
+<p><strong>Observe:</strong> Data hash, sample count, dependencies, trainer compatibility, and CUDA readiness</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 2 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ cd chapter7/cot-distillation && python train_student.py --preflight --train-data data/sft_cot_distill_aime_kimi_k3.jsonl --preflight-output validation/course-preflight.json
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Tool learning needs the same observation/action protocol at training and deployment.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Dense teacher distributions can succeed where sparse RL stalls.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>A preflight separates a configured recipe from a completed training claim.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">Distillation cannot exceed information available to the teacher or privileged context, and GPU readiness is not training evidence.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Match rollout shape to deployment, preserve tool feedback, and choose the densest trustworthy signal available.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-3 gap-4 mt-6">
+<a class="course-link" href="../chapter7/retool/">
+<span class="course-link-title">Experiment 7-15: ReTool</span>
+<span class="course-link-path">chapter7/retool/</span>
+</a>
+<a class="course-link" href="../chapter7/AWorld-train/">
+<span class="course-link-title">Experiment 7-16: AWorld training</span>
+<span class="course-link-path">chapter7/AWorld-train/</span>
+</a>
+<a class="course-link" href="../chapter7/AWorld/">
+<span class="course-link-title">AWorld source checkout</span>
+<span class="course-link-path">chapter7/AWorld/</span>
+</a>
+<a class="course-link" href="../book-en/chapter7.md">
+<span class="course-link-title">On-policy distillation discussion</span>
+<span class="course-link-path">book-en/chapter7.md</span>
+</a>
+<a class="course-link" href="../book-en/images/fig7-18.svg">
+<span class="course-link-title">Tool ecosystem architecture</span>
+<span class="course-link-path">book-en/images/fig7-18.svg</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Could privileged information make your current model a useful teacher for itself?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Chapter 7 complete · Next · Lesson 32</div>
+
+<div class="course-next">Move learning beyond model weights into knowledge, instructions, programs, and the updater itself.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-32.md

@@ -0,0 +1,257 @@
+---
+theme: seriph
+title: "Lesson 32 — How Do Failed Trajectories Become Learning Signals?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Improve · Chapter 8 · Continual Evolution</div>
+
+# How Do Failed Trajectories Become Learning Signals?
+
+<p class="course-subtitle">Outcome verification, process rules, Rubrics, and cross-trajectory experience</p>
+
+<div class="course-cover-meta">Lesson 32 of 42 · 19 minutes · Deriving Learning Signals from Operational Trajectories; Consolidating Experience into Knowledge</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+
+<div class="course-kicker">Improve · Chapter 8 · Continual Evolution</div>
+
+# Problems this chapter will solve
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Lesson 32</h3>
+<p>How Do Failed Trajectories Become Learning Signals?</p>
+</div>
+<div class="course-card green">
+<h3>Lesson 33</h3>
+<p>Where Should an Agent Store What It Learns?</p>
+</div>
+<div class="course-card purple">
+<h3>Lesson 34</h3>
+<p>How Can a Self-Modifying Agent Change Without Drifting?</p>
+</div>
+</div>
+
+<!-- Presenter cue: Orient viewers to the chapter. Name the progression, then highlight today's first problem. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Outcome</h3>
+<p>Read what changed in the environment.</p>
+</div>
+<div class="course-card green">
+<h3>Process</h3>
+<p>Locate rule violations and ineffective decisions.</p>
+</div>
+<div class="course-card orange">
+<h3>Meaning</h3>
+<p>Use a Rubric for dimensions that code cannot settle.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Trajectory verifier</h3>
+<p>Outcome checks + process rules + language Rubric</p>
+</div>
+<div class="course-card blue">
+<h3>Contrastive evidence</h3>
+<p>Compare success, partial success, and failure</p>
+</div>
+<div class="course-card green">
+<h3>Experience document</h3>
+<p>Mechanism + conditions + evidence + exceptions</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig8-2.svg" alt="Three-layer trajectory verification from outcomes to an LLM Rubric">
+
+<div class="course-caption">Three-layer trajectory verification from outcomes to an LLM Rubric</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Save the trajectory vs. Consolidate experience
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Save the trajectory</h3><ul><li>High detail</li><li>Hard to retrieve</li><li>Incidental actions become noise</li></ul></div>
+<div class="course-card green"><h3>Consolidate experience</h3><ul><li>Cross-run pattern</li><li>Explicit applicability</li><li>Evidence and counterexamples</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">A trajectory is evidence; it is not yet a lesson.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Diagnose before updating
+
+~~~python
+outcome = environment_verifier(trajectory)
+violations = process_verifier(trajectory)
+rubric = semantic_judge(trajectory, outcome)
+diagnosis = triangulate(outcome, violations, rubric)
+experience = consolidate(similar_diagnoses)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>8-1</span><span>2 min</span></div>
+<h3>Diagnose customer-service trajectories with three evidence layers</h3>
+<p><strong>Observe:</strong> False promises, privacy violations, over-refusal, and cited evidence</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>8-2</span><span>2 min</span></div>
+<h3>Consolidate several trajectories into experience documents</h3>
+<p><strong>Observe:</strong> Transfer gain, retrieval cost, negative transfer, and applicability conditions</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 4 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ cd chapter8/trajectory-verifier && python demo.py
+
+$ cd chapter8/gaia-experience && python demo_documents.py
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Environment outcomes constrain what a language judge may claim.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Failures and partial successes reveal conditions hidden by successful runs.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Cross-trajectory documents can transfer while using fewer tokens than raw history.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">A pattern supported by past trajectories may become obsolete after an API, policy, or environment change.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Promote experience only with provenance, applicability conditions, counterevidence, and a revalidation trigger.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter8/trajectory-verifier/test_verifier.py">
+<span class="course-link-title">Trajectory verifier tests</span>
+<span class="course-link-path">chapter8/trajectory-verifier/test_verifier.py</span>
+</a>
+<a class="course-link" href="../chapter8/gaia-experience/">
+<span class="course-link-title">Experience-document implementation</span>
+<span class="course-link-path">chapter8/gaia-experience/</span>
+</a>
+<a class="course-link" href="../book-en/images/fig8-4.svg">
+<span class="course-link-title">Knowledge-document architecture</span>
+<span class="course-link-path">book-en/images/fig8-4.svg</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which detail in a successful trajectory was causal, and how would you distinguish it from coincidence?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 33</div>
+
+<div class="course-next">Choose the artifact that should change: knowledge, instructions, programs, or parameters.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-33.md

@@ -0,0 +1,249 @@
+---
+theme: seriph
+title: "Lesson 33 — Where Should an Agent Store What It Learns?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Improve · Chapter 8 · Continual Evolution</div>
+
+# Where Should an Agent Store What It Learns?
+
+<p class="course-subtitle">Knowledge, instructions, programs, parameters, and meta-updates</p>
+
+<div class="course-cover-meta">Lesson 33 of 42 · 19 minutes · Four Methods for Continual Agent Evolution; Updating the Update Method</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">Which representation makes a new capability easiest to verify, retrieve, change, and retire?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Knowledge</h3>
+<p>Facts and experience remain traceable and editable.</p>
+</div>
+<div class="course-card green">
+<h3>Instructions</h3>
+<p>General procedures guide the model at inference time.</p>
+</div>
+<div class="course-card orange">
+<h3>Programs</h3>
+<p>Deterministic workflows enforce repeatable behavior.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Parameters</h3>
+<p>Implicit perception, style, and broad policies</p>
+</div>
+<div class="course-card blue">
+<h3>Local patch</h3>
+<p>Change the smallest artifact that explains the failure</p>
+</div>
+<div class="course-card green">
+<h3>Meta-update</h3>
+<p>Improve the updater or workflow that creates artifacts</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig1-1.svg" alt="Three levels of persistent Agent capability updates">
+
+<div class="course-caption">Three levels of persistent Agent capability updates</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Prompt patch vs. Program promotion
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Prompt patch</h3><ul><li>Fast to deploy</li><li>Easy to inspect</li><li>Global rules accumulate</li></ul></div>
+<div class="course-card green"><h3>Program promotion</h3><ul><li>Deterministic execution</li><li>Tests and versioning</li><li>Narrower applicability</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">The most powerful update is not always the safest or cheapest one.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Route a lesson to the smallest carrier
+
+~~~python
+if lesson.is_fact: update_knowledge(lesson)
+elif lesson.is_rule: patch_skill(lesson)
+elif lesson.is_deterministic: compile_workflow(lesson)
+else: propose_parameter_training(lesson)
+validate_transfer_and_retention()
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>8-4</span><span>2 min</span></div>
+<h3>Compile browser experience into a replayable workflow</h3>
+<p><strong>Observe:</strong> State predicates, reset-and-replay, and failure when the page state changes</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>Tool evolution</span><span>2 min</span></div>
+<h3>Create, validate, register, and reuse an offline tool</h3>
+<p><strong>Observe:</strong> Search miss, candidate creation, rejection gate, registration, and later reuse</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 4 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ cd chapter8/browser-use-rpa && python workflow_validation_demo.py
+
+$ cd chapter8/self-evolving-tools && python demo.py --offline
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Knowledge is easiest to trace; programs are easiest to execute deterministically.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Reusable tools convert one successful solution into a new action capability.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Local, reversible changes make causal evaluation and rollback possible.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">A compiled workflow is brittle when its state predicates fail to capture meaningful environmental change.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Choose the most explicit, local, reversible representation that can express the capability reliably.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter8/prompt-auto-optimization/">
+<span class="course-link-title">Experiment 8-3: prompt auto-optimization</span>
+<span class="course-link-path">chapter8/prompt-auto-optimization/</span>
+</a>
+<a class="course-link" href="../chapter8/prompt-distillation/">
+<span class="course-link-title">Experiment 7-8: prompt distillation</span>
+<span class="course-link-path">chapter8/prompt-distillation/</span>
+</a>
+<a class="course-link" href="../chapter8/browser-use-rpa/README.md">
+<span class="course-link-title">Real browser-use extension</span>
+<span class="course-link-path">chapter8/browser-use-rpa/README.md</span>
+</a>
+<a class="course-link" href="../chapter8/self-evolving-tools/">
+<span class="course-link-title">Self-evolving tool library</span>
+<span class="course-link-path">chapter8/self-evolving-tools/</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Could the behavior you want be a testable program instead of another sentence in the system prompt?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 34</div>
+
+<div class="course-next">Govern the complete loop so an improvement cannot approve or conceal its own regression.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-34.md

@@ -0,0 +1,249 @@
+---
+theme: seriph
+title: "Lesson 34 — How Can a Self-Modifying Agent Change Without Drifting?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Improve · Chapter 8 · Continual Evolution</div>
+
+# How Can a Self-Modifying Agent Change Without Drifting?
+
+<p class="course-subtitle">Candidate gates, transfer, retention, rollback, and sleep learning</p>
+
+<div class="course-cover-meta">Lesson 34 of 42 · 19 minutes · Continual-Evolution Closed Loop; Safety Boundaries; Sleep Learning</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">What prevents one mistaken lesson from becoming a permanent production capability?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Isolation</h3>
+<p>Online tasks append evidence; offline jobs propose changes.</p>
+</div>
+<div class="course-card green">
+<h3>Independent gates</h3>
+<p>The updater cannot alter validators or thresholds.</p>
+</div>
+<div class="course-card orange">
+<h3>Lifecycle</h3>
+<p>Canary, monitor, roll back, consolidate, expire, and prune.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Candidate area</h3>
+<p>New artifacts cannot serve production traffic</p>
+</div>
+<div class="course-card blue">
+<h3>Transfer + retention</h3>
+<p>Improve held-out tasks without forgetting old ones</p>
+</div>
+<div class="course-card green">
+<h3>Sleep learning</h3>
+<p>Batch consolidation outside the online execution path</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig8-1.svg" alt="Overall loop of continual Agent evolution">
+
+<div class="course-caption">Overall loop of continual Agent evolution</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Online self-edit vs. Governed evolution
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Online self-edit</h3><ul><li>Immediate</li><li>Noise becomes persistent</li><li>Attack can cross sessions</li></ul></div>
+<div class="course-card green"><h3>Governed evolution</h3><ul><li>Immutable evidence</li><li>Offline candidate</li><li>Independent release + rollback</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">The trusted root must remain outside the system it approves.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# The updater cannot be its own authority
+
+~~~python
+candidate = updater.propose(immutable_evidence)
+security_gate.check(candidate)
+gain = evaluator.transfer(candidate)
+retention = evaluator.retention(candidate)
+release.canary(candidate, gain, retention)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>8-5</span><span>2 min</span></div>
+<h3>Exercise self-modification safety regressions</h3>
+<p><strong>Observe:</strong> Rejected candidates, circuit breakers, regression gates, canary, and rollback</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>8-6</span><span>2 min</span></div>
+<h3>Compare static, append-only, and evolving Agents</h3>
+<p><strong>Observe:</strong> Learning, transfer, rule replacement, retention, and negative transfer</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 4 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ python -m pytest chapter8/self-modifying-agent/test_evolution.py -q
+
+$ cd chapter8/self-evolution-eval && python demo.py --profile all --output output/course-reference.json
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Appending feedback is not the same as replacing obsolete knowledge.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Updater quality and the task Agent's ability to activate an artifact are separate capabilities.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Long-term progress requires transfer, retention, safety, and maintenance metrics together.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">A verifiable loop can optimize a proxy perfectly while making no progress on an ambiguous real objective.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Separate evidence, candidate, validator, and production authority—and preserve an immutable rollback path.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter8/self-modifying-agent/run_experiment_8_5.py">
+<span class="course-link-title">Self-modifying Agent official runner</span>
+<span class="course-link-path">chapter8/self-modifying-agent/run_experiment_8_5.py</span>
+</a>
+<a class="course-link" href="../chapter8/self-evolution-eval/">
+<span class="course-link-title">Longitudinal evaluation tests</span>
+<span class="course-link-path">chapter8/self-evolution-eval/</span>
+</a>
+<a class="course-link" href="../book-en/images/fig8-1.svg">
+<span class="course-link-title">Overall continual-evolution loop</span>
+<span class="course-link-path">book-en/images/fig8-1.svg</span>
+</a>
+<a class="course-link" href="../book-en/chapter8.md">
+<span class="course-link-title">Chapter 8 safety boundaries</span>
+<span class="course-link-path">book-en/chapter8.md</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which file, threshold, or permission must your updater never be allowed to modify?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Improve complete · Next · Lesson 35</div>
+
+<div class="course-next">Carry the perceive-think-act loop into voice, screens, and physical systems under real-time constraints.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-35.md

@@ -0,0 +1,265 @@
+---
+theme: seriph
+title: "Lesson 35 — Why Does a Voice Agent Feel Slow?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Expand · Chapter 9 · Multimodal Interaction</div>
+
+# Why Does a Voice Agent Feel Slow?
+
+<p class="course-subtitle">Cascaded pipelines, latency waterfalls, streaming, and turn detection</p>
+
+<div class="course-cover-meta">Lesson 35 of 42 · 18 minutes · Voice; Cascaded Pipeline; Full-Chain Streaming; Streaming Voice Perception</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+
+<div class="course-kicker">Expand · Chapter 9 · Multimodal Interaction</div>
+
+# Problems this chapter will solve
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Lesson 35</h3>
+<p>Why Does a Voice Agent Feel Slow?</p>
+</div>
+<div class="course-card green">
+<h3>Lesson 36</h3>
+<p>When Should Voice Stop Taking Turns?</p>
+</div>
+<div class="course-card purple">
+<h3>Lesson 37</h3>
+<p>How Does an Agent Act Through Pixels?</p>
+</div>
+<div class="course-card blue">
+<h3>Lesson 38</h3>
+<p>How Does an Agent Turn Plans into Physical Actions?</p>
+</div>
+</div>
+
+<!-- Presenter cue: Orient viewers to the chapter. Name the progression, then highlight today's first problem. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Turn detection</h3>
+<p>VAD waits for silence and can cut off a thinking pause.</p>
+</div>
+<div class="course-card green">
+<h3>Serial work</h3>
+<p>ASR, LLM, and TTS latency accumulate when stages wait.</p>
+</div>
+<div class="course-card orange">
+<h3>Queueing</h3>
+<p>High utilization amplifies latency nonlinearly.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Cascaded</h3>
+<p>VAD → ASR → LLM → TTS</p>
+</div>
+<div class="course-card blue">
+<h3>Streaming</h3>
+<p>Emit partial transcripts, tokens, and audio chunks early</p>
+</div>
+<div class="course-card green">
+<h3>Convergence</h3>
+<p>Early recognition is fast but may change as context arrives</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig9-2.svg" alt="Latency waterfall for a serial voice pipeline">
+
+<div class="course-caption">Latency waterfall for a serial voice pipeline</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Wait for completion vs. Stream the chain
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Wait for completion</h3><ul><li>Stable transcript</li><li>Simple control</li><li>Every stage adds delay</li></ul></div>
+<div class="course-card green"><h3>Stream the chain</h3><ul><li>Earlier first audio</li><li>Overlapped work</li><li>Corrections and cancellation required</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Streaming changes when information becomes available—not the component boundaries.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Pipeline stages should overlap
+
+~~~python
+async for partial_text in asr.stream(audio):
+    llm.update(partial_text)
+async for sentence in llm.sentences():
+    tts.enqueue(sentence)
+if user_interrupts(): cancel_output()
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>9-1</span><span>1 min</span></div>
+<h3>Preflight a cascaded voice Agent</h3>
+<p><strong>Observe:</strong> VAD model, ASR/LLM/TTS provider configuration, and missing runtime prerequisites</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>9-2</span><span>2 min</span></div>
+<h3>Generate controlled streaming-ASR scenarios</h3>
+<p><strong>Observe:</strong> Normal speech, a 900 ms pause, and background noise under identical source content</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 3 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ cd chapter9/live-audio/backend && npm run check
+
+$ cd chapter9/streaming-speech && python prepare_scenarios.py audio/sentence.wav validation/course-scenarios
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>The silence threshold is both a latency control and a turn-taking assumption.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Streaming hides work behind speech but introduces unstable partial hypotheses.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Time to first useful audio matters more than full-response completion time.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">A setup check or generated audio scenario verifies wiring and controls—not human conversational quality.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Instrument the latency of every boundary, then stream and overlap only where cancellation and correction are designed.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter9/phone-agent/">
+<span class="course-link-title">Add-on (historical 9-2): browser WebRTC phone Agent</span>
+<span class="course-link-path">chapter9/phone-agent/</span>
+</a>
+<a class="course-link" href="../chapter9/streaming-speech/run_official_experiment.py">
+<span class="course-link-title">Streaming-speech official runner</span>
+<span class="course-link-path">chapter9/streaming-speech/run_official_experiment.py</span>
+</a>
+<a class="course-link" href="../book-en/images/fig9-1.svg">
+<span class="course-link-title">Serial voice architecture</span>
+<span class="course-link-path">book-en/images/fig9-1.svg</span>
+</a>
+<a class="course-link" href="../book-en/images/fig9-3.svg">
+<span class="course-link-title">Queueing latency</span>
+<span class="course-link-path">book-en/images/fig9-3.svg</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which latency number would best predict whether a user interrupts or abandons your voice Agent?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 36</div>
+
+<div class="course-next">Remove more boundaries—and decide what fast interaction should do while slow reasoning continues.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-36.md

@@ -0,0 +1,249 @@
+---
+theme: seriph
+title: "Lesson 36 — When Should Voice Stop Taking Turns?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Expand · Chapter 9 · Multimodal Interaction</div>
+
+# When Should Voice Stop Taking Turns?
+
+<p class="course-subtitle">Omni, full-duplex interaction, fast-slow thinking, and controllable speech</p>
+
+<div class="course-cover-meta">Lesson 36 of 42 · 19 minutes · End-to-End Omnimodal Models; Full-Duplex Models; Thinking Architectures; Human-like Speech</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">How can an Agent listen, speak, interrupt, and think deeply without making conversation stall?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Omni</h3>
+<p>Preserve prosody and emotion across one end-to-end model.</p>
+</div>
+<div class="course-card green">
+<h3>Full duplex</h3>
+<p>Choose listen/speak/stop actions many times per second.</p>
+</div>
+<div class="course-card orange">
+<h3>Fast + slow</h3>
+<p>Keep interaction alive while a strategist works in the background.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Turn-based Omni</h3>
+<p>End-to-end audio but still waits for a turn boundary</p>
+</div>
+<div class="course-card blue">
+<h3>Interactive model</h3>
+<p>Concurrent input/output with barge-in and backchannels</p>
+</div>
+<div class="course-card green">
+<h3>Latent bridge</h3>
+<p>Exchange richer internal state than plain text</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig9-5.svg" alt="Fast and slow thinking architecture alternatives">
+
+<div class="course-caption">Fast and slow thinking architecture alternatives</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Modular cascade vs. End-to-end/full duplex
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Modular cascade</h3><ul><li>Easy to debug</li><li>Providers interchangeable</li><li>Prosody lost through text</li></ul></div>
+<div class="course-card green"><h3>End-to-end/full duplex</h3><ul><li>Lower boundary latency</li><li>Preserves acoustic cues</li><li>Harder to observe and control</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">The newer architecture buys interaction quality with reduced modularity.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Fast interaction can delegate
+
+~~~python
+intent = realtime_model.listen(audio_frame)
+if intent.needs_deep_work:
+    job = strategist.start(intent.context)
+realtime_model.respond(interaction_state)
+if job.ready: realtime_model.integrate(job.result)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>9-3</span><span>2 min</span></div>
+<h3>Test the end-to-end speech contract offline</h3>
+<p><strong>Observe:</strong> Exact model contract, audio response handling, and fail-closed behavior without an endpoint</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>9-4</span><span>2 min</span></div>
+<h3>Audit controllable-speech media and listening evidence</h3>
+<p><strong>Observe:</strong> 24 reference profiles, routed controls, media hashes, and the distinction from human MOS</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 4 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ python -m pytest chapter9/end-to-end-speech/test_step_audio.py chapter9/end-to-end-speech/test_none_content.py -q
+
+$ cd chapter9/controllable-tts && python validate_artifacts.py
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Full-duplex models replace discrete turns with continuous interaction decisions.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Fast-slow separation preserves responsiveness without forcing every answer to be shallow.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Voice quality must be judged from audio—not configuration labels or text transcripts.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">End-to-end behavior is harder to attribute to ASR, reasoning, timing, or synthesis when a failure occurs.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Choose the simplest voice architecture that meets the interaction target, and preserve modality-native observability at every boundary you remove.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter9/end-to-end-speech/validation/upstream_audit.json">
+<span class="course-link-title">Step-Audio R1 upstream audit</span>
+<span class="course-link-path">chapter9/end-to-end-speech/validation/upstream_audit.json</span>
+</a>
+<a class="course-link" href="../chapter9/controllable-tts/validation/audio_quality_study.json">
+<span class="course-link-title">Controllable TTS listening study</span>
+<span class="course-link-path">chapter9/controllable-tts/validation/audio_quality_study.json</span>
+</a>
+<a class="course-link" href="../book-en/images/fig9-4.svg">
+<span class="course-link-title">Omni architecture comparison</span>
+<span class="course-link-path">book-en/images/fig9-4.svg</span>
+</a>
+<a class="course-link" href="../book-en/images/fig9-6.svg">
+<span class="course-link-title">Step-Audio dual-brain architecture</span>
+<span class="course-link-path">book-en/images/fig9-6.svg</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">What should your fast interaction model be allowed to say before the slow model has verified the answer?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 37</div>
+
+<div class="course-next">Carry perception and action into visual interfaces, where every click changes the next observation.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-37.md

@@ -0,0 +1,250 @@
+---
+theme: seriph
+title: "Lesson 37 — How Does an Agent Act Through Pixels?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Expand · Chapter 9 · Multimodal Interaction</div>
+
+# How Does an Agent Act Through Pixels?
+
+<p class="course-subtitle">GUI action spaces, visual grounding, and bounded interaction</p>
+
+<div class="course-cover-meta">Lesson 37 of 42 · 18 minutes · Computer Use; Action Space Design; Visual Grounding; Real-Time Performance</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">How does an Agent turn a screenshot and a goal into the right interface action?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Observation</h3>
+<p>A screenshot is a partial, time-sensitive view of application state.</p>
+</div>
+<div class="course-card green">
+<h3>Grounding</h3>
+<p>The Agent must map language to an element ID or coordinate.</p>
+</div>
+<div class="course-card orange">
+<h3>Interaction</h3>
+<p>Every click or keystroke changes the next observation.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Structured tree</h3>
+<p>Use DOM or accessibility elements when they are reliable</p>
+</div>
+<div class="course-card blue">
+<h3>Visual grounding</h3>
+<p>Locate targets directly in pixels when structure is absent</p>
+</div>
+<div class="course-card green">
+<h3>Bounded loop</h3>
+<p>Observe → one guarded action → observe again</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig9-9.svg" alt="Visual grounding with annotated interface elements">
+
+<div class="course-caption">Visual grounding with annotated interface elements</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Structured grounding vs. Visual grounding
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Structured grounding</h3><ul><li>DOM/accessibility IDs</li><li>Closed-set selection</li><li>Fails on custom drawing</li></ul></div>
+<div class="course-card green"><h3>Visual grounding</h3><ul><li>Works from pixels</li><li>General interface coverage</li><li>Coordinate and scale errors</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Production systems need both paths, coordinate transforms, and a confidence-aware fallback.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Every action creates a new observation
+
+~~~python
+while budget.remaining:
+    screenshot, tree = browser.observe()
+    target = agent.ground(task, screenshot, tree)
+    action = agent.choose_action(target)
+    receipt = browser.execute(guard(action))
+    if verifier.done(receipt): break
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>9-6 preflight</span><span>2 min</span></div>
+<h3>Run offline Computer Use contract checks</h3>
+<p><strong>Observe:</strong> Endpoint identity, screenshot retention, manifest integrity, and redaction boundaries</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>9-6 retained status</span><span>1 min</span></div>
+<h3>Inspect the retained open-model acceptance pointer</h3>
+<p><strong>Observe:</strong> Experiment arm, model scope, status, and the hashes required to trace the full run</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 3 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ python -m pytest chapter9/computer-use-open-model/tests -q
+
+$ python -m json.tool chapter9/computer-use-open-model/validation/latest.json
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>A Computer Use result is a trajectory of state changes—not a final textual answer.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Structured elements improve precision, while pixel grounding expands interface coverage.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Scaling, coordinate transforms, stale screenshots, and hidden state create distinct failure modes.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">Offline contract tests and an acceptance pointer do not reproduce the retained browser trajectory or complete the separate Anthropic-native arm.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Execute one bounded GUI action at a time, re-observe after every state change, and retain screenshots plus external outcome evidence.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter9/claude-quickstarts/computer-use-demo/">
+<span class="course-link-title">Experiment 9-5: Claude Computer Use</span>
+<span class="course-link-path">chapter9/claude-quickstarts/computer-use-demo/</span>
+</a>
+<a class="course-link" href="../chapter9/computer-use-open-model/">
+<span class="course-link-title">Experiment 9-6: open-model Computer Use</span>
+<span class="course-link-path">chapter9/computer-use-open-model/</span>
+</a>
+<a class="course-link" href="../book-en/images/fig9-7.svg">
+<span class="course-link-title">Screenshot-action loop</span>
+<span class="course-link-path">book-en/images/fig9-7.svg</span>
+</a>
+<a class="course-link" href="../book-en/images/fig9-10.svg">
+<span class="course-link-title">Coordinate scaling</span>
+<span class="course-link-path">book-en/images/fig9-10.svg</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which state change would prove that your GUI action succeeded, even if the Agent claims it did?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 38</div>
+
+<div class="course-next">Cross from visual interfaces into physical control, where latency and mistakes have mechanical consequences.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-38.md

@@ -0,0 +1,250 @@
+---
+theme: seriph
+title: "Lesson 38 — How Does an Agent Turn Plans into Physical Actions?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Expand · Chapter 9 · Multimodal Interaction</div>
+
+# How Does an Agent Turn Plans into Physical Actions?
+
+<p class="course-subtitle">Planning-control separation, VLA control, safety gates, and Sim2Real</p>
+
+<div class="course-cover-meta">Lesson 38 of 42 · 18 minutes · Robot Manipulation; Planning and Control; VLA Control; Sim2Real Transfer</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">How can slow semantic planning drive fast physical control without losing safety?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Planning</h3>
+<p>A vision-language model selects goals and interprets the scene.</p>
+</div>
+<div class="course-card green">
+<h3>Control</h3>
+<p>A fast policy turns the current observation into motor commands.</p>
+</div>
+<div class="course-card orange">
+<h3>Safety</h3>
+<p>External gates must constrain forces, motion, workspace, and authority.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Two-layer loop</h3>
+<p>Slow planning chooses subgoals; fast control executes motion</p>
+</div>
+<div class="course-card blue">
+<h3>Action chunking</h3>
+<p>Predict several future controls per expensive inference</p>
+</div>
+<div class="course-card green">
+<h3>Sim2Real</h3>
+<p>Train across calibrated visual and physical variation</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig9-11.svg" alt="Vision-Language-Action model architecture">
+
+<div class="course-caption">Vision-Language-Action model architecture</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Open-loop plan vs. Guarded feedback loop
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Open-loop plan</h3><ul><li>Commit to a long motion</li><li>Assume the world stays fixed</li><li>Detect errors late</li></ul></div>
+<div class="course-card green"><h3>Guarded feedback loop</h3><ul><li>Short action horizon</li><li>Re-observe continuously</li><li>Interrupt on state change</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Physical autonomy depends on feedback frequency and authority boundaries.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Slow plan, fast guarded control
+
+~~~python
+subgoal = planner.choose(observation, task)
+chunk = controller.predict(observation, subgoal)
+for action in safety_filter(chunk):
+    robot.execute(action)
+    observation = robot.observe()
+    if world_changed(observation): break
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>9-9 dry configuration</span><span>1 min</span></div>
+<h3>Inspect a fail-closed robot navigation contract</h3>
+<p><strong>Observe:</strong> Exact model ID, task, camera, three motion tools, decision frequency, and no actuation</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>Robot safety gates</span><span>2 min</span></div>
+<h3>Run evidence-validator regressions for physical experiments</h3>
+<p><strong>Observe:</strong> Why dry runs, mock artifacts, and unverified motion cannot satisfy completion</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 3 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ python chapter9/gemini-xlerobot-navigation/navigation.py
+
+$ python chapter9/xlerobot-teleoperation/test_validator.py && python chapter9/gemini-xlerobot-navigation/test_validator.py && python chapter9/rgb-sim2real-grasping/test_validator.py
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Planning and control operate at different semantic and temporal scales.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Action chunks reduce inference pressure but delay response to unexpected change.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Physical completion requires calibrated hardware, authorization, measurements, and direct artifacts.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">A source audit, preflight, validator test, or dry configuration demonstrates architecture and blockers—not a successful robot run.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Keep physical actions behind external safety gates, short feedback horizons, and measurements the model cannot fabricate.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter9/xlerobot-teleoperation/">
+<span class="course-link-title">Experiment 9-7: XLeRobot teleoperation</span>
+<span class="course-link-path">chapter9/xlerobot-teleoperation/</span>
+</a>
+<a class="course-link" href="../chapter9/gemini-xlerobot-navigation/">
+<span class="course-link-title">Experiment 9-9: robot navigation</span>
+<span class="course-link-path">chapter9/gemini-xlerobot-navigation/</span>
+</a>
+<a class="course-link" href="../chapter9/rgb-sim2real-grasping/">
+<span class="course-link-title">Experiment 9-11: RGB Sim2Real grasping</span>
+<span class="course-link-path">chapter9/rgb-sim2real-grasping/</span>
+</a>
+<a class="course-link" href="../book-en/images/fig9-13.svg">
+<span class="course-link-title">Sim2Real pipeline</span>
+<span class="course-link-path">book-en/images/fig9-13.svg</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">How quickly must a physical controller reconsider an action when the world changes unexpectedly?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Chapter 9 complete · Next · Lesson 39</div>
+
+<div class="course-next">Scale from one Agent loop to several loops that exchange context, artifacts, and control.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-39.md

@@ -0,0 +1,261 @@
+---
+theme: seriph
+title: "Lesson 39 — When Should Agents Share the Same Context?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Expand · Chapter 10 · Multi-Agent Collaboration</div>
+
+# When Should Agents Share the Same Context?
+
+<p class="course-subtitle">Shared trajectories, isolated contexts, role switching, and handoffs</p>
+
+<div class="course-cover-meta">Lesson 39 of 42 · 17 minutes · Classification Framework; Shared vs. Non-Shared Context; Multi-Stage Role Switching</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+
+<div class="course-kicker">Expand · Chapter 10 · Multi-Agent Collaboration</div>
+
+# Problems this chapter will solve
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Lesson 39</h3>
+<p>When Should Agents Share the Same Context?</p>
+</div>
+<div class="course-card green">
+<h3>Lesson 40</h3>
+<p>Who Should Coordinate Independent Agents?</p>
+</div>
+<div class="course-card purple">
+<h3>Lesson 41</h3>
+<p>When Is Multi-Agent Actually Better Than One Agent?</p>
+</div>
+<div class="course-card blue">
+<h3>Lesson 42</h3>
+<p>How Do Agent Teams Fail—and What Should We Build Next?</p>
+</div>
+</div>
+
+<!-- Presenter cue: Orient viewers to the chapter. Name the progression, then highlight today's first problem. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Continuity</h3>
+<p>Shared history preserves details and user decisions.</p>
+</div>
+<div class="course-card green">
+<h3>Isolation</h3>
+<p>Separate contexts reduce interference and permission leakage.</p>
+</div>
+<div class="course-card orange">
+<h3>Scale</h3>
+<p>Independent contexts enable parallel work beyond one window.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Shared context</h3>
+<p>New prompt/tools, same complete trajectory</p>
+</div>
+<div class="course-card blue">
+<h3>Non-shared context</h3>
+<p>Independent trajectory + explicit communication</p>
+</div>
+<div class="course-card green">
+<h3>IPC analogy</h3>
+<p>Files as shared memory; calls/messages as message passing</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig10-1.svg" alt="Shared-context and non-shared-context multi-Agent architectures">
+
+<div class="course-caption">Shared-context and non-shared-context multi-Agent architectures</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Shared context vs. Non-shared context
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Shared context</h3><ul><li>Near-zero handoff loss</li><li>Mostly serial roles</li><li>History grows and biases</li></ul></div>
+<div class="course-card green"><h3>Non-shared context</h3><ul><li>Modular and parallel</li><li>Selective disclosure</li><li>Handoff can omit evidence</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Share when loss is unacceptable; isolate when scale, focus, or security dominates.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# A role is prompt + tools + visible state
+
+~~~python
+stage = router.choose(task_state)
+agent = Agent(prompt=stage.prompt, tools=stage.tools)
+if stage.shared:
+    agent.resume(full_trajectory)
+else: agent.start(handoff_package)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-2 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>10-1</span><span>1 min</span></div>
+<h3>Inspect staged prompts, tools, and fallback gates</h3>
+<p><strong>Observe:</strong> Requirements, implementation, review, and revision boundaries</p>
+</div>
+<div class="course-card blue">
+<div class="course-demo-head"><span>10-2</span><span>1 min</span></div>
+<h3>Inspect role-specific handoff capabilities</h3>
+<p><strong>Observe:</strong> Distinct prompts, tools, transfer edges, and shared session state</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 2 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ cd chapter10/staged-system-prompt && python demo.py --list-stages
+
+$ cd chapter10/multi-role-transfer && python demo.py --list-roles
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Changing prompt and tools can create a specialist while preserving one trajectory.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>Shared context removes handoff compression but can carry framing bias across roles.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Independent Agents require an explicit data plane and control plane.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">Calling predefined stages 'multi-Agent' is useful architecturally, but the execution remains a workflow with a known path.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Choose context sharing before topology: it determines information loss, isolation, parallelism, and token growth.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../book-en/images/fig10-stage-switching.svg">
+<span class="course-link-title">Stage-based role switching</span>
+<span class="course-link-path">book-en/images/fig10-stage-switching.svg</span>
+</a>
+<a class="course-link" href="../chapter10/staged-system-prompt/README.md">
+<span class="course-link-title">Staged-system full demo</span>
+<span class="course-link-path">chapter10/staged-system-prompt/README.md</span>
+</a>
+<a class="course-link" href="../chapter10/multi-role-transfer/README.md">
+<span class="course-link-title">Cross-domain transfer demo</span>
+<span class="course-link-path">chapter10/multi-role-transfer/README.md</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which detail would be too dangerous to omit from a handoff—and which detail should not cross the boundary?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 40</div>
+
+<div class="course-next">Choose who coordinates independent Agents and how artifacts and messages move between them.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-40.md

@@ -0,0 +1,242 @@
+---
+theme: seriph
+title: "Lesson 40 — Who Should Coordinate Independent Agents?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Expand · Chapter 10 · Multi-Agent Collaboration</div>
+
+# Who Should Coordinate Independent Agents?
+
+<p class="course-subtitle">Peer review, managers, decentralized handoffs, files, and control planes</p>
+
+<div class="course-cover-meta">Lesson 40 of 42 · 17 minutes · Non-Shared Context; File System; Communication and Control; Collaboration Topologies; A2A</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">When Agents work in separate contexts, what structure keeps their work coherent?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Peer loop</h3>
+<p>A proposer and reviewer iterate with independent evidence.</p>
+</div>
+<div class="course-card green">
+<h3>Manager</h3>
+<p>One planner decomposes, budgets, schedules, and integrates.</p>
+</div>
+<div class="course-card orange">
+<h3>Decentralized</h3>
+<p>Peers transfer work without a runtime central controller.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Data plane</h3>
+<p>Workspaces, shared artifacts, external and system mounts</p>
+</div>
+<div class="course-card blue">
+<h3>Control plane</h3>
+<p>Spawn, message, status, terminate, and resource scheduling</p>
+</div>
+<div class="course-card green">
+<h3>Handoff package</h3>
+<p>Goal + evidence + artifacts + open questions + acceptance</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig10-4.svg" alt="Manager architecture for sequential multi-Agent coordination">
+
+<div class="course-caption">Manager architecture for sequential multi-Agent coordination</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Manager topology vs. Decentralized topology
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Manager topology</h3><ul><li>Global plan</li><li>Simple supervision</li><li>Planner is bottleneck</li></ul></div>
+<div class="course-card green"><h3>Decentralized topology</h3><ul><li>Local ownership</li><li>Flexible handoffs</li><li>Harder global consistency</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Topology determines where planning errors and coordination costs accumulate.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Pass artifacts; observe lifecycle
+
+~~~python
+job = manager.spawn(role, goal, budget)
+manager.message(job, evidence_paths)
+while job.running: manager.observe(job.status)
+result = manager.verify(job.artifacts)
+manager.cancel_dependents_if_satisfied(result)
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-1 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>10-3</span><span>2 min</span></div>
+<h3>Rehearse a four-role translation orchestration</h3>
+<p><strong>Observe:</strong> Manager plan, glossary ownership, chapter budgets, proofreading, and integration</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 2 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ cd chapter10/book-translation && python demo.py --dry-run
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Files handle large persistent artifacts; messages handle asynchronous coordination.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>The manager's decomposition quality caps the value of stronger workers.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Explicit status and termination semantics matter as much as task prompts.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">A dry-run proves the orchestration graph and budgets—not translation quality or multi-Agent advantage.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Make ownership, artifact contracts, lifecycle states, budgets, and termination paths explicit before adding Agents.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-3 gap-4 mt-6">
+<a class="course-link" href="../chapter10/autonomous-phone-registration/">
+<span class="course-link-title">Experiment 10-3: fixed baseline + autonomous phone registration</span>
+<span class="course-link-path">chapter10/autonomous-phone-registration/ (TalkAct baseline)</span>
+</a>
+<a class="course-link" href="../book-en/images/fig10-2.svg">
+<span class="course-link-title">Agent virtual file system</span>
+<span class="course-link-path">book-en/images/fig10-2.svg</span>
+</a>
+<a class="course-link" href="../book-en/images/fig10-6.svg">
+<span class="course-link-title">Manager parallel coordination</span>
+<span class="course-link-path">book-en/images/fig10-6.svg</span>
+</a>
+<a class="course-link" href="../book-en/chapter10.md">
+<span class="course-link-title">A2A and decentralized handoffs</span>
+<span class="course-link-path">book-en/chapter10.md</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">If the manager decomposes the task incorrectly, which independent gate can detect the mistake before workers waste their budgets?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 41</div>
+
+<div class="course-next">Test whether multiple Agents create new information or merely spend more tokens.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-41.md

@@ -0,0 +1,242 @@
+---
+theme: seriph
+title: "Lesson 41 — When Is Multi-Agent Actually Better Than One Agent?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Expand · Chapter 10 · Multi-Agent Collaboration</div>
+
+# When Is Multi-Agent Actually Better Than One Agent?
+
+<p class="course-subtitle">Information gain, parallelism, verification, budgets, and cost</p>
+
+<div class="course-cover-meta">Lesson 41 of 42 · 18 minutes · When Is Multi-Agent Truly Better; Parallel Coordination; Budget Awareness</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">What does collaboration add that a single Agent with the same compute could not obtain?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>New evidence</h3>
+<p>Execution, rendering, browsing, and independent observations change the answer.</p>
+</div>
+<div class="course-card green">
+<h3>Parallel time</h3>
+<p>Independent searches reduce wall-clock latency when resources allow.</p>
+</div>
+<div class="course-card orange">
+<h3>Cost</h3>
+<p>Multi-Agent systems may spend several times—or an order of magnitude—more tokens.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Information gain</h3>
+<p>The verifier observes something unavailable at generation time</p>
+</div>
+<div class="course-card blue">
+<h3>Single settlement</h3>
+<p>One success can resolve the task and stop siblings</p>
+</div>
+<div class="course-card green">
+<h3>Budget awareness</h3>
+<p>Strategy changes with remaining steps and task value</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig10-8.svg" alt="Parallel web research architecture">
+
+<div class="course-caption">Parallel web research architecture</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# More voices vs. More observations
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>More voices</h3><ul><li>Same text</li><li>Same evidence</li><li>More samples and debate</li></ul></div>
+<div class="course-card green"><h3>More observations</h3><ul><li>Independent tools</li><li>Execution or visual feedback</li><li>Parallel environment interaction</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">The advantage comes from information—not the number of Agent labels.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# Settle once; cancel the rest
+
+~~~python
+jobs = spawn_parallel(search_shards)
+for result in as_completed(jobs):
+    evidence.merge(result.receipts)
+    if verifier.sufficient(evidence):
+        cancel_all(jobs); break
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-1 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>10-6</span><span>3 min</span></div>
+<h3>Run parallel web research with independent browsers</h3>
+<p><strong>Observe:</strong> Cited evidence, browser isolation, parallel speedup, timeout handling, and cleanup</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 3 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ cd chapter10/parallel-web-research && python demo.py
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Debate over identical evidence often matches a single Agent at equal compute.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>External feedback can nearly double performance because it adds observations.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Parallel speedup is real only when setup, contention, and cancellation costs are included.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">A speedup on one site and network condition does not prove lower total cost or better answer quality for every research task.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Add an Agent only when it owns a distinct observation, permission boundary, artifact, or parallelizable environment interaction.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="../chapter10/parallel-web-research/validation/">
+<span class="course-link-title">Parallel research acceptance evidence</span>
+<span class="course-link-path">chapter10/parallel-web-research/validation/</span>
+</a>
+<a class="course-link" href="../book-en/images/fig10-3.svg">
+<span class="course-link-title">Proposer-reviewer loop</span>
+<span class="course-link-path">book-en/images/fig10-3.svg</span>
+</a>
+<a class="course-link" href="../book-en/images/fig10-7.svg">
+<span class="course-link-title">Phone + computer dual-Agent architecture</span>
+<span class="course-link-path">book-en/images/fig10-7.svg</span>
+</a>
+<a class="course-link" href="../chapter10/book-translation/">
+<span class="course-link-title">Book translation Agent comparison</span>
+<span class="course-link-path">chapter10/book-translation/</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">What new information does your proposed second Agent obtain that the first Agent cannot?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Next · Lesson 42</div>
+
+<div class="course-next">Engineer against coordination failures—and examine what appears when Agent populations become societies.</div>
+
+<div class="course-next-arrow">→</div>
+
+<!-- Presenter cue: Use this transition to make the course feel continuous rather than episodic. -->

slides/lesson-42.md

@@ -0,0 +1,271 @@
+---
+theme: seriph
+title: "Lesson 42 — How Do Agent Teams Fail—and What Should We Build Next?"
+info: "English video course for AI Agents in Depth"
+author: Bojie Li
+transition: slide-left
+mdc: true
+lineNumbers: false
+monaco: false
+aspectRatio: 16/9
+canvasWidth: 980
+layout: cover
+class: cover
+---
+
+<div class="course-kicker">Expand · Chapter 10 · Multi-Agent Collaboration</div>
+
+# How Do Agent Teams Fail—and What Should We Build Next?
+
+<p class="course-subtitle">Conflicts, error cascades, Agent societies, and the course synthesis</p>
+
+<div class="course-cover-meta">Lesson 42 of 42 · 18 minutes · Failure Modes; Agent Society; Economic Competition; Strategic Gameplay</div>
+
+<!-- Presenter cue: Open with the concrete problem. Add personal context in your own words; do not read the slide. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">The central question</div>
+
+<div class="course-big">How do we prevent local mistakes from becoming group failures while still allowing collective behavior to emerge?</div>
+
+<!-- Presenter cue: Let the question sit for a moment, then state the failure mode the lesson will explain. -->
+
+---
+
+# Why this problem matters
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Concurrency</h3>
+<p>Shared files can lose updates or encode semantic conflicts.</p>
+</div>
+<div class="course-card green">
+<h3>Cascades</h3>
+<p>A wrong upstream claim is amplified by trusting downstream Agents.</p>
+</div>
+<div class="course-card orange">
+<h3>Emergence</h3>
+<p>Persistent Agents produce social, strategic, and economic behavior not explicitly scripted.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Connect each card to a product or experiment consequence. -->
+
+---
+
+# Three ideas to keep in view
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card purple">
+<h3>Optimistic locking</h3>
+<p>Detect version change before committing a shared write</p>
+</div>
+<div class="course-card blue">
+<h3>Information control</h3>
+<p>A code judge reveals only what each role may know</p>
+</div>
+<div class="course-card green">
+<h3>External reward</h3>
+<p>Society outcomes are scored by the environment—not self-report</p>
+</div>
+</div>
+
+<!-- Presenter cue: Define unfamiliar terms in plain language; the audience is new to ML training and RL. -->
+
+---
+
+# The book's visual model
+
+<img class="course-figure" src="/images/fig10-11.svg" alt="Voice Werewolf multi-Agent system">
+
+<div class="course-caption">Voice Werewolf multi-Agent system</div>
+
+<!-- Presenter cue: Trace the diagram in one direction and name the mechanism that matters for this lesson. -->
+
+---
+
+# Agent chat room vs. Governed society
+
+<div class="grid grid-cols-2 gap-6 mt-5">
+<div class="course-card orange"><h3>Agent chat room</h3><ul><li>Everyone sees everything</li><li>Loose role prompts</li><li>Claims spread unchecked</li></ul></div>
+<div class="course-card green"><h3>Governed society</h3><ul><li>State authority in code</li><li>Role-scoped views</li><li>Auditable actions and rewards</li></ul></div>
+</div>
+
+<div class="course-caption course-caption-strong">Social complexity requires stronger state and information governance.</div>
+
+<!-- Presenter cue: Explain the trade-off; avoid presenting the right column as universally superior. -->
+
+---
+
+# The judge owns truth and disclosure
+
+~~~python
+private_view = judge.view_for(player, global_state)
+action = player.act(private_view)
+judge.validate(action, role=player.role)
+global_state = judge.apply(action)
+audit.append(player.id, action, state_hash(global_state))
+~~~
+
+<!-- Presenter cue: Walk through the executable idea line by line; keep implementation details for the terminal. -->
+
+---
+
+# Test the claim
+
+<div class="grid grid-cols-1 gap-4 mt-5">
+<div class="course-card blue">
+<div class="course-demo-head"><span>10-8 offline diagnostic</span><span>2 min</span></div>
+<h3>Run a deterministic information-isolation game</h3>
+<p><strong>Observe:</strong> Private role context, phase transitions, legal actions, votes, and winner gates</p>
+</div>
+</div>
+
+<div class="course-caption course-caption-strong">Demo budget: 2 minutes · one contiguous terminal block</div>
+
+<!-- Presenter cue: State the prediction before running anything. Name the observation that could disconfirm it. -->
+
+---
+class: course-terminal
+---
+
+<div class="course-kicker">Live demo</div>
+
+# Switching to the terminal
+
+~~~bash
+$ cd chapter10/voice-werewolf && python demo.py --offline
+~~~
+
+<div class="course-terminal-watch">Run the command(s), narrate decisions, and point to the observation—not just the output.</div>
+
+<!-- Presenter cue: Switch windows now. Return to the next slide after every listed experiment is complete. -->
+
+---
+
+# What the evidence supports
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card green">
+<h3>Finding 1</h3>
+<p>Coordination failures are distributed-systems failures plus probabilistic decision errors.</p>
+</div>
+<div class="course-card blue">
+<h3>Finding 2</h3>
+<p>A code-driven authority can preserve information asymmetry and rule integrity.</p>
+</div>
+<div class="course-card purple">
+<h3>Finding 3</h3>
+<p>Social and economic simulations can generate new experience—but also collusion and pathology.</p>
+</div>
+</div>
+
+<!-- Presenter cue: Tie each finding to something viewers just observed; distinguish evidence from interpretation. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker course-kicker-red">Where the claim stops</div>
+
+# Boundary condition
+
+<div class="course-boundary">An offline all-AI diagnostic does not satisfy the book's live human voice acceptance criteria.</div>
+
+<!-- Presenter cue: Say explicitly what this experiment does not establish. -->
+
+---
+layout: center
+---
+
+<div class="course-kicker">Engineering takeaway</div>
+
+# Design rule
+
+<div class="course-rule">Keep shared truth, permissions, conflict detection, and final rewards outside the Agents that compete or collaborate.</div>
+
+<!-- Presenter cue: Present this as a reusable decision rule, then give one counterexample or trade-off. -->
+
+---
+
+# Continue the experiment
+
+<div class="grid grid-cols-2 gap-4 mt-6">
+<a class="course-link" href="https://github.com/joonspk-research/generative_agents">
+<span class="course-link-title">Experiment 10-7: Stanford Generative Agents</span>
+<span class="course-link-path">https://github.com/joonspk-research/generative_agents</span>
+</a>
+<a class="course-link" href="../chapter10/voice-werewolf/README.md">
+<span class="course-link-title">Experiment 10-8: consent-gated voice path</span>
+<span class="course-link-path">chapter10/voice-werewolf/README.md</span>
+</a>
+<a class="course-link" href="../book-en/images/fig10-10.svg">
+<span class="course-link-title">AI Town architecture</span>
+<span class="course-link-path">book-en/images/fig10-10.svg</span>
+</a>
+<a class="course-link" href="../book-en/chapter10.md">
+<span class="course-link-title">Agent society and economy cases</span>
+<span class="course-link-path">book-en/chapter10.md</span>
+</a>
+</div>
+
+<!-- Presenter cue: Point viewers to the companion paths; do not walk through every extension. -->
+
+---
+
+# The complete course arc
+
+<div class="grid grid-cols-3 gap-5 mt-6">
+<div class="course-card blue">
+<h3>Build · Lessons 01–21</h3>
+<p>Context → memory → tools → code</p>
+</div>
+<div class="course-card green">
+<h3>Improve · Lessons 22–34</h3>
+<p>Evaluation → training → continual evolution</p>
+</div>
+<div class="course-card purple">
+<h3>Expand · Lessons 35–42</h3>
+<p>Voice → embodied action → collaboration</p>
+</div>
+</div>
+
+<!-- Presenter cue: Return to the three-part arc from Lesson 1 and connect each stage to evidence viewers saw in the course. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Pause and apply</div>
+
+# Your turn
+
+<div class="course-big course-reflection">Which group-level failure cannot be prevented by improving any single Agent in isolation?</div>
+
+<!-- Presenter cue: Invite viewers to pause the video. Offer your own answer after a short beat. -->
+
+---
+layout: center
+class: text-center
+---
+
+<div class="course-kicker">Course synthesis</div>
+
+<div class="course-loop mt-8">
+<div class="course-loop-step blue"><span>1</span><strong>Define the failure</strong></div>
+<div class="course-loop-arrow">→</div>
+<div class="course-loop-step green"><span>2</span><strong>Run a controlled experiment</strong></div>
+<div class="course-loop-arrow">→</div>
+<div class="course-loop-step purple"><span>3</span><strong>Interpret the evidence</strong></div>
+<div class="course-loop-arrow">→</div>
+<div class="course-loop-step orange"><span>4</span><strong>Update safely</strong></div>
+</div>
+
+<div class="course-loop-return">↺ Repeat when new evidence arrives</div>
+
+<!-- Presenter cue: Close by tracing the evidence-driven loop from Lesson 1, then leave viewers with the repeat trigger. -->

slides/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "ai-agents-in-depth-course",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "generate": "node generate.mjs",
+    "review": "node review.mjs",
+    "dev": "slidev",
+    "build:all": "node build-all.mjs",
+    "export": "slidev export"
+  },
+  "dependencies": {
+    "@slidev/cli": "^0.49.0",
+    "@slidev/theme-seriph": "latest"
+  },
+  "devDependencies": {
+    "playwright-chromium": "^1.44.0"
+  }
+}

slides/public/images/fig0-1.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 780 440" width="780" height="440" style="background:#ffffff">
+<defs>
+<marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker>
+<marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker>
+</defs>
+
+<!-- Central Agent circle -->
+<circle cx="390" cy="230" r="68" fill="#e8e8e8" stroke="#333333" stroke-width="2.5"/>
+<text x="390" y="222" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="22" fill="#333333" text-anchor="middle" font-weight="bold">Agent</text>
+<text x="390" y="248" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle">Autonomous Decision System</text>
+
+<!-- LLM (top) -->
+<rect x="295" y="62" width="190" height="72" rx="8" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="390" y="90" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" font-weight="bold">LLM: Brain</text>
+<text x="390" y="116" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="8.5" fill="#666666" text-anchor="middle">Understanding · Thinking · Planning · Decision</text>
+<line x1="390" y1="134" x2="390" y2="162" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+
+<!-- Context (left) -->
+<rect x="50" y="194" width="190" height="72" rx="8" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="145" y="222" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" font-weight="bold">Context: Eyes</text>
+<text x="145" y="248" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="8.5" fill="#666666" text-anchor="middle">Instructions · Memory · Knowledge · Trajectory</text>
+<line x1="240" y1="230" x2="322" y2="230" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+
+<!-- Tools (right) -->
+<rect x="540" y="194" width="190" height="72" rx="8" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="635" y="222" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="19" fill="#333333" text-anchor="middle" font-weight="bold">Tools: Hands &amp; Feet</text>
+<text x="635" y="248" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9" fill="#666666" text-anchor="middle">Perception · Execution · Collaboration · Code</text>
+<line x1="458" y1="230" x2="540" y2="230" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+
+<!-- Details under LLM -->
+<rect x="30" y="62" width="240" height="72" rx="6" fill="#f5f5f5" stroke="#999999" stroke-width="1.5" stroke-dasharray="6,3"/>
+<text x="150" y="82" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#555555" text-anchor="middle">Ch. 6 Evaluation · Ch. 7 Post-Training</text>
+<text x="150" y="102" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#888888" text-anchor="middle">Model as Agent · SFT · Reinforcement Learning</text>
+<text x="150" y="122" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11.5" fill="#888888" text-anchor="middle">Evaluation Runs Through the Entire Process</text>
+<line x1="270" y1="98" x2="293" y2="98" stroke="#999999" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#ah-light)"/>
+
+<!-- Details under Context -->
+<rect x="50" y="295" width="240" height="72" rx="6" fill="#f5f5f5" stroke="#999999" stroke-width="1.5" stroke-dasharray="6,3"/>
+<text x="170" y="315" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10" fill="#555555" text-anchor="middle">Ch. 2 Context Engineering · Ch. 3 Knowledge Base</text>
+<text x="170" y="335" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9" fill="#888888" text-anchor="middle">Prompt Engineering · KV Cache · Compression · Memory</text>
+<text x="170" y="355" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#888888" text-anchor="middle">RAG · Structured Indexing · Agentic RAG</text>
+<line x1="170" y1="266" x2="170" y2="293" stroke="#999999" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#ah-light)"/>
+
+<!-- Details under Tools -->
+<rect x="490" y="295" width="240" height="72" rx="6" fill="#f5f5f5" stroke="#999999" stroke-width="1.5" stroke-dasharray="6,3"/>
+<text x="610" y="315" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#555555" text-anchor="middle">Ch. 4 Tools · Ch. 5 Code Generation</text>
+<text x="610" y="335" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9" fill="#888888" text-anchor="middle">MCP · Asynchronous Event Architecture · Tool Security</text>
+<text x="610" y="355" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#888888" text-anchor="middle">Code as Thinking · Agent Bootstrapping</text>
+<line x1="610" y1="266" x2="610" y2="293" stroke="#999999" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#ah-light)"/>
+
+<!-- Applications at bottom -->
+<rect x="195" y="400" width="390" height="60" rx="8" fill="#f0f0f0" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="390" y="422" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13.5" fill="#333333" text-anchor="middle" font-weight="bold">Ch. 8 Self-Evolution · Ch. 9 Multimodal · Ch. 10 Multi-Agent</text>
+<text x="390" y="446" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="middle">Learning Paradigms · Tool Creation · Voice · Robotics · Collaboration</text>
+<line x1="390" y1="298" x2="390" y2="398" stroke="#999999" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#ah-light)"/>
+
+</svg>

slides/public/images/fig0-2.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 820 420" width="820" height="420" style="background:#ffffff">
+<defs>
+<marker id="ah" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#333333"/></marker>
+<marker id="ah-g" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#999999"/></marker>
+</defs>
+
+
+
+<!-- Chapter 1: Intro -->
+<rect x="300" y="55" width="220" height="50" rx="8" fill="#e0e0e0" stroke="#333333" stroke-width="2"/>
+<text x="410" y="75" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" font-weight="bold">Chapter 1: Agent Fundamentals</text>
+<text x="410" y="95" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9.5" fill="#666666" text-anchor="middle">Three Pillars of Agent · Design Patterns · ReAct</text>
+
+<!-- Down arrows from Ch1 -->
+<line x1="285" y1="80" x2="155" y2="138" stroke="#999999" stroke-width="1.5" marker-end="url(#ah-g)"/>
+<line x1="410" y1="105" x2="410" y2="138" stroke="#999999" stroke-width="1.5" marker-end="url(#ah-g)"/>
+<line x1="535" y1="80" x2="665" y2="138" stroke="#999999" stroke-width="1.5" marker-end="url(#ah-g)"/>
+
+<!-- Group labels -->
+<text x="155" y="152" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#555555" text-anchor="middle" font-weight="bold">Context (Core)</text>
+<text x="410" y="152" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#555555" text-anchor="middle" font-weight="bold">Tools</text>
+<text x="665" y="152" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#555555" text-anchor="middle" font-weight="bold">Model</text>
+
+<!-- Context group -->
+<rect x="30" y="165" width="248" height="55" rx="6" fill="#d8d8d8" stroke="#333333" stroke-width="2"/>
+<text x="154" y="186" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#333333" text-anchor="middle" font-weight="bold">Chapter 2: Context Engineering</text>
+<text x="154" y="207" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="8" fill="#666666" text-anchor="middle">Prompt Engineering · KV Cache · Compression · Skills · Status Bar</text>
+
+<rect x="30" y="230" width="248" height="55" rx="6" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="154" y="251" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#333333" text-anchor="middle" font-weight="bold">Chapter 3: User Memory and Knowledge Base</text>
+<text x="154" y="272" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10" fill="#666666" text-anchor="middle">User Memory · RAG · Structured Index · Agentic RAG</text>
+
+<!-- Tools group -->
+<rect x="286" y="165" width="248" height="55" rx="6" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="410" y="186" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#333333" text-anchor="middle" font-weight="bold">Chapter 4: Tools</text>
+<text x="410" y="207" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10" fill="#666666" text-anchor="middle">MCP · Tool Safety · Asynchronous Event Architecture</text>
+
+<rect x="286" y="230" width="248" height="55" rx="6" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="410" y="251" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#333333" text-anchor="middle" font-weight="bold">Chapter 5: Coding Agent and Code Generation</text>
+<text x="410" y="272" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9.5" fill="#666666" text-anchor="middle">Coding Agent · Code as Thinking · Agent Bootstrapping</text>
+
+<!-- Model group -->
+<rect x="542" y="165" width="248" height="55" rx="6" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="666" y="186" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#333333" text-anchor="middle" font-weight="bold">Chapter 6: Evaluation</text>
+<text x="666" y="207" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle">Benchmark · LLM-as-Judge · Model Selection</text>
+
+<rect x="542" y="230" width="248" height="55" rx="6" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="666" y="251" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#333333" text-anchor="middle" font-weight="bold">Chapter 7: Model Post-Training</text>
+<text x="666" y="272" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9.5" fill="#666666" text-anchor="middle">SFT · Reinforcement Learning · LoRA · Tool Calling RL</text>
+
+<!-- Down arrows to bottom row -->
+<line x1="154" y1="285" x2="154" y2="340" stroke="#999999" stroke-width="1.5" marker-end="url(#ah-g)"/>
+<line x1="410" y1="285" x2="410" y2="340" stroke="#999999" stroke-width="1.5" marker-end="url(#ah-g)"/>
+<line x1="666" y1="285" x2="666" y2="340" stroke="#999999" stroke-width="1.5" marker-end="url(#ah-g)"/>
+
+<!-- Bottom label -->
+<text x="410" y="335" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#555555" text-anchor="middle" font-weight="bold">Advanced Topics and Applications</text>
+
+<!-- Ch8, Ch9, Ch10 in parallel -->
+<rect x="30" y="350" width="248" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2" stroke-dasharray="6,3"/>
+<text x="154" y="371" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#333333" text-anchor="middle" font-weight="bold">Chapter 8: Agent Self-Evolution</text>
+<text x="154" y="392" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="7" fill="#666666" text-anchor="middle">Learning Paradigms · Experience Learning · Tool Discovery and Creation</text>
+
+<rect x="286" y="350" width="248" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2" stroke-dasharray="6,3"/>
+<text x="410" y="371" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#333333" text-anchor="middle" font-weight="bold">Chapter 9: Multimodal and Real-Time Interaction</text>
+<text x="410" y="392" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle">Voice · Computer Use · VLA Robotics</text>
+
+<rect x="542" y="350" width="248" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2" stroke-dasharray="6,3"/>
+<text x="666" y="371" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13.5" fill="#333333" text-anchor="middle" font-weight="bold">Chapter 10: Multi-Agent Collaboration</text>
+<text x="666" y="392" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle">Shared Context · Manager · Decentralization</text>
+
+</svg>

slides/public/images/fig1-1.svg

@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 820 440" width="820" height="440" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<rect x="30.0" y="65" width="240" height="65" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="150.0" y="97.5" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Post-training</text>
+<rect x="83.68756" y="140" width="132.62488" height="28" rx="14" fill="#666666" stroke="#333333" stroke-width="2"/>
+<text x="150.0" y="154.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Training time</text>
+<rect x="30.0" y="185" width="240" height="38" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="150.0" y="204.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Modify model weights</text>
+<rect x="30.0" y="230" width="240" height="38" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="150.0" y="249.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Permanent · general</text>
+<rect x="30.0" y="275" width="240" height="38" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="150.0" y="294.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">High cost · slow to update</text>
+<rect x="30.0" y="330" width="240" height="45" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="150.0" y="352" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">e.g. learn when to call a tool</text>
+<rect x="290.0" y="65" width="240" height="65" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="410.0" y="97.5" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">In-context learning</text>
+<rect x="339.03104" y="140" width="141.93792" height="28" rx="14" fill="#666666" stroke="#333333" stroke-width="2"/>
+<text x="410.0" y="154.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Inference time</text>
+<rect x="290.0" y="185" width="240" height="38" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="410.0" y="204.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Soft update via attention</text>
+<rect x="290.0" y="230" width="240" height="38" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="410.0" y="249.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Temporary · adapts instantly</text>
+<rect x="290.0" y="275" width="240" height="38" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="410.0" y="294.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Bounded by context window</text>
+<rect x="290.0" y="330" width="240" height="45" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="410.0" y="352" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">e.g. learn a format from 3 examples</text>
+<rect x="550.0" y="65" width="240" height="65" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="670.0" y="97.5" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Externalized learning</text>
+<rect x="620.87572" y="140" width="98.24856" height="28" rx="14" fill="#666666" stroke="#333333" stroke-width="2"/>
+<text x="670.0" y="154.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Runtime</text>
+<rect x="550.0" y="185" width="240" height="38" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="670.0" y="204.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14.0" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Knowledge base + generated tools</text>
+<rect x="550.0" y="230" width="240" height="38" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="670.0" y="249.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Persistent · updatable</text>
+<rect x="550.0" y="275" width="240" height="38" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="670.0" y="294.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Reliable · verifiable</text>
+<rect x="550.0" y="330" width="240" height="45" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="670.0" y="352" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">e.g. freeze a workflow into a tool</text>
+<line x1="60" y1="430" x2="760" y2="430" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<text x="60" y="455" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Slow (Weeks)</text>
+<text x="410" y="455" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Learning Speed</text>
+<text x="760" y="455" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="end" dominant-baseline="central" font-weight="normal">Fast (Milliseconds)</text>
+</svg>

slides/public/images/fig1-2.svg

@@ -0,0 +1,74 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 1000 430" width="1000" height="430" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<text x="236.0" y="56" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">System</text>
+<text x="236.0" y="76" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">prompt</text>
+<text x="354.0" y="56" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Tool</text>
+<text x="354.0" y="76" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">definitions</text>
+<text x="472.0" y="56" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Tool exec</text>
+<text x="472.0" y="76" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">results</text>
+<text x="590.0" y="56" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Thought</text>
+<text x="590.0" y="76" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">process</text>
+<text x="708.0" y="56" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">History</text>
+<text x="708.0" y="76" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">messages</text>
+<text x="874" y="66" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Result</text>
+<text x="168" y="128" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="end" dominant-baseline="central" font-weight="bold">Full baseline</text>
+<rect x="182" y="100" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="236.0" y="128" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<rect x="300" y="100" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="354.0" y="128" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<rect x="418" y="100" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="472.0" y="128" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<rect x="536" y="100" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="590.0" y="128" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<rect x="654" y="100" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="708.0" y="128" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<text x="874" y="128" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓ Works normally</text>
+<text x="168" y="196" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="end" dominant-baseline="central" font-weight="bold">No tool defs</text>
+<rect x="182" y="168" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="236.0" y="196" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<rect x="300" y="168" width="108" height="55" rx="6" fill="#ffffff" stroke="#999999" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="354.0" y="196" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#999999" text-anchor="middle" dominant-baseline="central" font-weight="normal">✗</text>
+<rect x="418" y="168" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="472.0" y="196" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<rect x="536" y="168" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="590.0" y="196" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<rect x="654" y="168" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="708.0" y="196" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<text x="874" y="196" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#999999" text-anchor="middle" dominant-baseline="central" font-weight="normal">✗ Cannot call tools</text>
+<text x="168" y="264" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="end" dominant-baseline="central" font-weight="bold">No tool results</text>
+<rect x="182" y="236" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="236.0" y="264" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<rect x="300" y="236" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="354.0" y="264" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<rect x="418" y="236" width="108" height="55" rx="6" fill="#ffffff" stroke="#999999" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="472.0" y="264" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#999999" text-anchor="middle" dominant-baseline="central" font-weight="normal">✗</text>
+<rect x="536" y="236" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="590.0" y="264" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<rect x="654" y="236" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="708.0" y="264" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<text x="874" y="264" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#999999" text-anchor="middle" dominant-baseline="central" font-weight="normal">✗ Blind loop</text>
+<text x="168" y="332" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="end" dominant-baseline="central" font-weight="bold">No reasoning</text>
+<rect x="182" y="304" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="236.0" y="332" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<rect x="300" y="304" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="354.0" y="332" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<rect x="418" y="304" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="472.0" y="332" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<rect x="536" y="304" width="108" height="55" rx="6" fill="#ffffff" stroke="#999999" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="590.0" y="332" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#999999" text-anchor="middle" dominant-baseline="central" font-weight="normal">✗</text>
+<rect x="654" y="304" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="708.0" y="332" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<text x="874" y="332" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">△ Inconsistent decisions</text>
+<text x="168" y="400" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="end" dominant-baseline="central" font-weight="bold">No history</text>
+<rect x="182" y="372" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="236.0" y="400" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<rect x="300" y="372" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="354.0" y="400" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<rect x="418" y="372" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="472.0" y="400" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<rect x="536" y="372" width="108" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="590.0" y="400" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓</text>
+<rect x="654" y="372" width="108" height="55" rx="6" fill="#ffffff" stroke="#999999" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="708.0" y="400" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#999999" text-anchor="middle" dominant-baseline="central" font-weight="normal">✗</text>
+<text x="874" y="400" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">△ Repeated operations</text>
+</svg>

slides/public/images/fig1-3.svg

@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 820 640" width="820" height="640" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<rect x="31.399200000000008" y="60" width="97.20159999999998" height="26" rx="13" fill="#666666" stroke="#333333" stroke-width="2"/>
+<text x="80.0" y="73.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Round 1</text>
+<rect x="40" y="96" width="480" height="50" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="50" y="112" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">user</text>
+<text x="50" y="134" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">&quot;Calculate total annual revenue: Q1 $2.5M, Q2 €2.1M, Q3 £1.8M&quot;</text>
+<rect x="40" y="156" width="480" height="45" rx="6" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="50" y="170" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="bold">assistant.reasoning</text>
+<text x="50" y="190" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">&quot;Need to convert EUR and GBP to USD, then aggregate&quot;</text>
+<rect x="40" y="211" width="480" height="70" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="50" y="225" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="bold">assistant.tool_calls</text>
+<text x="50" y="247" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">convert_currency(2100000, &quot;EUR&quot;, &quot;USD&quot;)</text>
+<text x="50" y="265" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">convert_currency(1800000, &quot;GBP&quot;, &quot;USD&quot;)</text>
+<rect x="40" y="291" width="480" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="50" y="305" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="bold">tool (result)</text>
+<text x="50" y="327" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">EUR→USD: 2,282,608.70</text>
+<text x="290" y="327" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">GBP→USD: 2,278,481.01</text>
+<rect x="31.399200000000008" y="356" width="97.20159999999998" height="26" rx="13" fill="#666666" stroke="#333333" stroke-width="2"/>
+<text x="80.0" y="369.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Round 2</text>
+<rect x="40" y="392" width="480" height="45" rx="6" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="50" y="406" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="bold">assistant.reasoning</text>
+<text x="50" y="426" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">&quot;Exchange rates obtained, call code interpreter to aggregate&quot;</text>
+<rect x="40" y="447" width="480" height="50" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="50" y="461" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="bold">assistant.tool_calls</text>
+<text x="50" y="483" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">code_interpreter(&quot;total = 2.5M + 2.28M + 2.28M&quot;)</text>
+<rect x="31.399200000000008" y="507" width="97.20159999999998" height="26" rx="13" fill="#666666" stroke="#333333" stroke-width="2"/>
+<text x="80.0" y="520.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Round 3</text>
+<rect x="40" y="543" width="480" height="45" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="50" y="557" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">assistant.content (final answer)</text>
+<text x="50" y="579" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">&quot;Total annual revenue $7,061,089.71, quarterly average $2,353,696.57&quot;</text>
+<path d="M 540,60 C 560,60 560,319.0 565,324.0 C 560,329.0 560,588 540,588" fill="none" stroke="#333333" stroke-width="2"/>
+<text x="600" y="250" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Trajectory</text>
+<text x="600" y="280" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">=</text>
+<text x="600" y="310" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">Complete input seen</text>
+<text x="600" y="340" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">by LLM at each</text>
+<text x="600" y="370" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">call</text>
+<rect x="570" y="410" width="230" height="140" rx="8" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="582" y="428" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="bold">Key features</text>
+<text x="685" y="445" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Context accumulation</text>
+<text x="685" y="470" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Full history seen each round</text>
+<text x="685" y="500" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Structured trajectory</text>
+<text x="685" y="525" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">user / assistant / tool</text>
+</svg>

slides/public/images/fig1-4.svg

@@ -0,0 +1,50 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 820 480" width="820" height="480" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<rect x="260" y="70" width="300" height="100" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="410" y="100" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">LLM（Kimi K3 / GPT-5.6）</text>
+<text x="410" y="130" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Native agent capabilities after RL training</text>
+<rect x="620" y="70" width="180" height="210" rx="8" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="632" y="88" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="bold">Native tools</text>
+<rect x="635" y="105" width="150" height="50" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="710.0" y="130.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">$web_search</text>
+<rect x="635" y="170" width="150" height="50" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="710.0" y="195.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">code_interpreter</text>
+<rect x="635" y="235" width="150" height="50" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2"/>
+<text x="710.0" y="260.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">More tools...</text>
+<line x1="560" y1="120" x2="633" y2="130" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="633" y1="195" x2="560" y2="145" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="100" y="210" width="460" height="280" rx="8" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="112" y="228" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="bold">ReAct loop (autonomous execution within the model)</text>
+<rect x="120" y="250" width="200" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="220.0" y="261.25" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">User: Search for Bitcoin trend in</text>
+<text x="220.0" y="277.5" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">the last month</text>
+<text x="220.0" y="293.75" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal"></text>
+<rect x="120" y="325" width="200" height="55" rx="6" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="220.0" y="336.25" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Thought: Need to search</text>
+<text x="220.0" y="352.5" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">real-time</text>
+<text x="220.0" y="368.75" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">data, then analyze with code</text>
+<line x1="220" y1="307" x2="220" y2="323" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="340" y="250" width="200" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="440.0" y="267.1" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Call $web_search</text>
+<text x="440.0" y="287.90000000000003" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">&quot;BTC price last month&quot;</text>
+<line x1="322" y1="277" x2="338" y2="277" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="340" y="325" width="200" height="55" rx="6" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="440.0" y="342.1" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Result: [price data]</text>
+<text x="440.0" y="362.90000000000003" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">$67,230 → $71,450</text>
+<line x1="440" y1="307" x2="440" y2="323" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="120" y="400" width="200" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="220.0" y="418.4" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14.0" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Call code_interpreter</text>
+<text x="220.0" y="436.59999999999997" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14.0" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">RSI, MACD calculation code</text>
+<line x1="340" y1="377" x2="220" y2="398" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="340" y="400" width="200" height="55" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="440.0" y="419.375" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Final output: Technical analysis</text>
+<text x="440.0" y="435.625" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">report + visualization chart</text>
+<line x1="322" y1="427" x2="338" y2="427" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<path d="M 565,480 Q 523.2305639386065,308.0187097062208 410,172" fill="none" stroke="#999999" stroke-width="2" stroke-dasharray="8,4" marker-end="url(#ah-light)"/>
+<text x="605" y="330" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="bold">RL training signal</text>
+<rect x="15" y="70" width="230" height="120" rx="8" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="27" y="88" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11.0" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="bold">Differences from traditional frameworks</text>
+<text x="130" y="110" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✗ No external orchestration code needed</text>
+<text x="130" y="135" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✗ No need to manually write ReAct loop</text>
+<text x="130" y="160" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓ Model autonomously decides the entire process</text>
+</svg>

slides/public/images/fig1-5.svg

@@ -0,0 +1,72 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 820 470" width="820" height="470" role="img" aria-labelledby="title desc">
+  <title id="title">Execution loop of an autonomous Agent</title>
+  <desc id="desc">The Agent reasons, acts, and observes before checking exit conditions and either returning the final result or starting another iteration.</desc>
+  <defs>
+    <marker id="arrow-dark" markerWidth="9" markerHeight="7" refX="8" refY="3.5" orient="auto" markerUnits="userSpaceOnUse">
+      <polygon points="0 0, 9 3.5, 0 7" fill="#333333"/>
+    </marker>
+    <marker id="arrow-light" markerWidth="9" markerHeight="7" refX="8" refY="3.5" orient="auto" markerUnits="userSpaceOnUse">
+      <polygon points="0 0, 9 3.5, 0 7" fill="#777777"/>
+    </marker>
+    <style>
+      .sans { font-family: Arial, "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif; }
+      .code { font-family: "Courier New", Courier, monospace; }
+      .heading { fill: #333333; font-size: 16px; font-weight: 700; }
+      .body { fill: #333333; font-size: 15px; }
+      .note { fill: #666666; font-size: 14px; }
+      .box { stroke: #333333; stroke-width: 2; }
+      .flow { fill: none; stroke: #333333; stroke-width: 2; marker-end: url(#arrow-dark); }
+    </style>
+  </defs>
+
+  <rect width="820" height="470" fill="#ffffff"/>
+
+  <!-- ReAct steps -->
+  <rect class="box" x="45" y="70" width="210" height="96" rx="8" fill="#e8e8e8"/>
+  <text class="sans heading" x="60" y="95" dominant-baseline="middle">① Think (Reasoning)</text>
+  <rect x="60" y="112" width="180" height="38" rx="5" fill="#ffffff" stroke="#777777"/>
+  <text class="code body" x="150" y="132" text-anchor="middle" dominant-baseline="middle">&quot;Need more info&quot;</text>
+
+  <rect class="box" x="305" y="70" width="210" height="96" rx="8" fill="#f0f0f0"/>
+  <text class="sans heading" x="320" y="95" dominant-baseline="middle">② Acting</text>
+  <rect x="320" y="112" width="180" height="38" rx="5" fill="#ffffff" stroke="#777777"/>
+  <text class="code body" x="410" y="132" text-anchor="middle" dominant-baseline="middle">web_search(...)</text>
+
+  <rect class="box" x="565" y="70" width="210" height="96" rx="8" fill="#f0f0f0"/>
+  <text class="sans heading" x="580" y="95" dominant-baseline="middle">③ Observing</text>
+  <rect x="580" y="112" width="180" height="38" rx="5" fill="#ffffff" stroke="#777777"/>
+  <text class="code body" x="670" y="132" text-anchor="middle" dominant-baseline="middle">tool_result: &quot;...&quot;</text>
+
+  <line class="flow" x1="255" y1="118" x2="302" y2="118"/>
+  <line class="flow" x1="515" y1="118" x2="562" y2="118"/>
+  <line class="flow" x1="670" y1="166" x2="670" y2="207"/>
+
+  <!-- Exit criteria feed the decision point -->
+  <rect x="45" y="220" width="430" height="145" rx="8" fill="#ffffff" stroke="#777777" stroke-width="2" stroke-dasharray="7 4"/>
+  <text class="sans heading" x="65" y="244" dominant-baseline="middle">Exit conditions (any one)</text>
+  <line x1="65" y1="258" x2="455" y2="258" stroke="#cccccc"/>
+  <text class="sans body" x="65" y="282" dominant-baseline="middle">① Task complete</text>
+  <text class="sans body" x="250" y="282" dominant-baseline="middle">② final_answer called</text>
+  <text class="sans body" x="65" y="314" dominant-baseline="middle">③ No tool call</text>
+  <text class="sans body" x="250" y="314" dominant-baseline="middle">④ Error limit exceeded</text>
+  <text class="sans body" x="65" y="346" dominant-baseline="middle">⑤ Max rounds reached</text>
+
+  <path d="M 475 260 H 587" fill="none" stroke="#777777" stroke-width="2" stroke-dasharray="6 4" marker-end="url(#arrow-light)"/>
+  <rect x="493" y="238" width="80" height="20" rx="3" fill="#ffffff"/>
+  <text class="sans note" x="533" y="248" text-anchor="middle" dominant-baseline="middle">Decision criteria</text>
+
+  <!-- Stop decision and branches -->
+  <polygon class="box" points="670,208 750,260 670,312 590,260" fill="#e2e2e2"/>
+  <text class="sans heading" x="670" y="252" text-anchor="middle" dominant-baseline="middle">Exit condition</text>
+  <text class="sans heading" x="670" y="273" text-anchor="middle" dominant-baseline="middle">met?</text>
+
+  <path class="flow" d="M 750 260 H 795 V 35 H 150 V 67"/>
+  <text class="sans note" x="765" y="245" dominant-baseline="middle">No</text>
+  <rect x="360" y="43" width="120" height="22" rx="3" fill="#ffffff"/>
+  <text class="sans note" x="420" y="54" text-anchor="middle" dominant-baseline="middle">Continue the loop</text>
+
+  <line class="flow" x1="670" y1="312" x2="670" y2="379"/>
+  <text class="sans note" x="685" y="346" dominant-baseline="middle">Yes</text>
+  <rect class="box" x="555" y="382" width="230" height="68" rx="8" fill="#d6d6d6"/>
+  <text class="sans heading" x="670" y="416" text-anchor="middle" dominant-baseline="middle">Return final result</text>
+</svg>

slides/public/images/fig10-1.svg

@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 780 520" width="780" height="520" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+
+<rect x="20" y="55" width="350" height="480" rx="8" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="32" y="73" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="bold">Shared Context (Inherited Collaboration)</text>
+<rect x="35" y="82" width="320" height="100" rx="4" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="43" y="96" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Phase 1: Requirements Analyst</text>
+<text x="47" y="114" font-family="'Courier New', Courier, monospace" font-size="7" fill="#333333" text-anchor="start" dominant-baseline="central">sys: "Your responsibility is to fully understand the requirements..."</text>
+<text x="47" y="132" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">tools: [ask_question, save_req]</text>
+<text x="47" y="150" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">user: "Write a CSV analysis script"</text>
+<text x="47" y="168" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">agent: "What file types need to be processed?"</text>
+<rect x="35" y="184" width="320" height="100" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="43" y="198" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Phase 2: Software Engineer</text>
+<text x="47" y="216" font-family="'Courier New', Courier, monospace" font-size="9.5" fill="#333333" text-anchor="start" dominant-baseline="central">sys: "Write code based on confirmed requirements..."</text>
+<text x="47" y="234" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">tools: [write_file, execute_code]</text>
+<text x="47" y="252" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">agent: write_file(&quot;analyze.py&quot;, ...)</text>
+<text x="47" y="270" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">agent: execute_code(&quot;python test.py&quot;)</text>
+<rect x="35" y="286" width="320" height="100" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="43" y="300" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Phase 3: Code Reviewer</text>
+<text x="47" y="318" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">sys: "Review code quality and security..."</text>
+<text x="47" y="336" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">tools: [run_linter, run_tests]</text>
+<text x="47" y="354" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">agent: run_linter → 2 warnings</text>
+<text x="47" y="372" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">agent: approve_code()</text>
+<rect x="35" y="388" width="320" height="28" rx="3" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="195" y="402" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">↑ All phases share the same conversation history</text>
+<text x="195" y="434" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓ Complete trace</text>
+<text x="195" y="456" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">✗ Rapid context expansion</text>
+<rect x="410" y="55" width="350" height="480" rx="8" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="422" y="73" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="bold">No Shared Context (Isolated Collaboration)</text>
+<rect x="425" y="82" width="320" height="80" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="433" y="96" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Glossary Agent</text>
+<text x="437" y="114" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">sys: "Identify terms and translate..."</text>
+<text x="437" y="132" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">tools: [search_dict, write_file]</text>
+<text x="437" y="150" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">→ glossary.json</text>
+<rect x="425" y="170" width="320" height="80" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="433" y="184" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Translation Agent</text>
+<text x="437" y="202" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">sys: "Translate this chapter..."</text>
+<text x="437" y="220" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">tools: [read_file, write_file]</text>
+<text x="437" y="238" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">→ chapter1_zh.md</text>
+<rect x="425" y="258" width="320" height="80" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="433" y="272" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Proofreading Agent</text>
+<text x="437" y="290" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">sys: "Check terminology consistency..."</text>
+<text x="437" y="308" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">tools: [read_file, write_file]</text>
+<text x="437" y="326" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">→ review_report.md</text>
+<rect x="425" y="351" width="320" height="65" rx="4" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="585" y="367" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Shared File System</text>
+<text x="437" y="389" font-family="'Courier New', Courier, monospace" font-size="10.5" fill="#333333" text-anchor="start" dominant-baseline="central">glossary.json  chapter1_zh.md  review_report.md</text>
+<text x="585" y="406" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">+ Tool call parameters pass structured data</text>
+<text x="585" y="433" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓ Modular · Extensible · Parallel</text>
+<text x="585" y="455" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">✗ Complex information synchronization</text>
+</svg>

slides/public/images/fig10-13.svg

@@ -0,0 +1,68 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 780 560" width="780" height="560" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+
+<rect x="260" y="55" width="260" height="75" rx="6" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="390" y="75" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Judge (Code-Driven)</text>
+<text x="390" y="97" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="normal">Game State · Phase Control · Information Distribution</text>
+<text x="390" y="113" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="normal">Night → Day → Vote → Settle</text>
+<rect x="40" y="180" width="135" height="155" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="107" y="200" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">🐺 Werewolf 1</text>
+<text x="107" y="228" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Visible: Teammate Identities</text>
+<text x="107" y="252" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Strategy: Disguise as Villager</text>
+<text x="107" y="276" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Night: Choose Target</text>
+<line x1="390" y1="132" x2="107" y2="178" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="130" y="315" width="40" height="18" rx="9" fill="#666666" stroke="#333333" stroke-width="2"/>
+<text x="150.0" y="324.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="7" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Mutual Knowledge</text>
+<rect x="185" y="180" width="135" height="155" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="252" y="200" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">🐺 Werewolf 2</text>
+<text x="252" y="228" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Visible: Teammate Identities</text>
+<text x="252" y="252" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Strategy: Follow and Protect</text>
+<text x="252" y="276" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Night: Negotiate Target</text>
+<line x1="390" y1="132" x2="252" y2="178" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="275" y="315" width="40" height="18" rx="9" fill="#666666" stroke="#333333" stroke-width="2"/>
+<text x="295.0" y="324.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="7" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Mutual Knowledge</text>
+<rect x="330" y="180" width="135" height="155" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="397" y="200" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">🔮 Seer</text>
+<text x="397" y="228" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Visible: Investigation Results</text>
+<text x="397" y="252" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="8" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Strategy: Choose When to Reveal</text>
+<text x="397" y="276" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Night: Investigate 1 Person</text>
+<line x1="390" y1="132" x2="397" y2="178" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="410" y="315" width="50" height="18" rx="9" fill="#666666" stroke="#333333" stroke-width="2"/>
+<text x="435.0" y="324.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="7" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Investigation Results</text>
+<rect x="475" y="180" width="135" height="155" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="542" y="200" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">🧪 Witch</text>
+<text x="542" y="228" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Visible: Death/Healing</text>
+<text x="542" y="252" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="8" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Strategy: Preserve Potion/Antidote</text>
+<text x="542" y="276" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Night: Save/Poison 1 Person</text>
+<line x1="390" y1="132" x2="542" y2="178" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="620" y="180" width="135" height="155" rx="6" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="687" y="200" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">👤 Villager ×2</text>
+<text x="687" y="228" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Visible: Public Information Only</text>
+<text x="687" y="252" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Strategy: Logical Reasoning</text>
+<text x="687" y="276" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Day: Analyze Speech</text>
+<line x1="390" y1="132" x2="687" y2="178" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="30" y="355" width="720" height="95" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="390" y="375" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Information Access Control: Judge Filters Context by Role</text>
+<text x="50" y="399" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Werewolf:</text>
+<text x="132" y="399" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Ally IDs + night talk + public speech</text>
+<text x="400" y="399" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Seer:</text>
+<text x="485" y="399" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Own check results + public speech</text>
+<text x="50" y="423" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Witch:</text>
+<text x="132" y="423" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Deaths + potion status + public speech</text>
+<text x="400" y="423" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Villager:</text>
+<text x="485" y="423" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Public speech + votes only</text>
+<rect x="30" y="468" width="720" height="105" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="390" y="488" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Real-time voice interaction (ASR + LLM + TTS)</text>
+<text x="137" y="514" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Day discussion</text>
+<text x="137" y="534" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Judge sets speak order</text>
+<text x="137" y="552" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Speak in turn by seat</text>
+<text x="312" y="514" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Voting phase</text>
+<text x="312" y="534" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Collect player votes</text>
+<text x="312" y="552" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Count + announce votes</text>
+<text x="487" y="514" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Night phase</text>
+<text x="487" y="534" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Wake roles in turn</text>
+<text x="487" y="552" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Private voice channel</text>
+<text x="662" y="514" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Human player</text>
+<text x="662" y="534" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Randomly assign roles</text>
+<text x="662" y="552" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Voice voting/speech</text>
+</svg>

slides/public/images/fig10-5.svg

@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 780 455" width="780" height="455" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+
+<rect x="240" y="60" width="300" height="100" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="390" y="82" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Manager Agent</text>
+<text x="390" y="106" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Task understanding → Decomposition → Scheduling → Synthesis</text>
+<text x="390" y="126" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Tool set: [call_agent_A, call_agent_B,</text>
+<text x="390" y="142" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">call_agent_C, search, write_file]</text>
+<rect x="50" y="240" width="210" height="120" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="155" y="260" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Sub-Agent A</text>
+<text x="155" y="280" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Role: Data Collection</text>
+<text x="155" y="302" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Search technical documentation</text>
+<text x="155" y="320" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Extract key information</text>
+<rect x="205" y="335" width="50" height="20" rx="10" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="230.0" y="345.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Step 1</text>
+<line x1="290" y1="162" x2="155" y2="238" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<line x1="262" y1="300" x2="283" y2="300" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="285" y="240" width="210" height="120" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="390" y="260" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Sub-Agent B</text>
+<text x="390" y="280" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Role: Analysis &amp; Processing</text>
+<text x="390" y="302" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Compare and analyze data</text>
+<text x="390" y="320" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Generate statistical report</text>
+<rect x="440" y="335" width="50" height="20" rx="10" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="465.0" y="345.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Step 2</text>
+<line x1="390" y1="162" x2="390" y2="238" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<line x1="497" y1="300" x2="518" y2="300" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="520" y="240" width="210" height="120" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="625" y="260" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Sub-Agent C</text>
+<text x="625" y="280" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Role: Report Generation</text>
+<text x="625" y="302" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Write final report</text>
+<text x="625" y="320" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Format output</text>
+<rect x="675" y="335" width="50" height="20" rx="10" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="700.0" y="345.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Step 3</text>
+<line x1="490" y1="162" x2="625" y2="238" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="30" y="380" width="720" height="95" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="390" y="398" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Sequential execution flow</text>
+<text x="50" y="420" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">Manager calls A</text>
+<text x="155" y="420" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">→ A returns data</text>
+<text x="260" y="420" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">→ Manager passes to B</text>
+<text x="380" y="420" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">→ B returns analysis</text>
+<text x="485" y="420" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">→ Manager passes to C</text>
+<text x="610" y="420" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">→ C returns report</text>
+<text x="390" y="452" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Manager perspective: Calling Agent = Calling a tool (send request → receive response)</text>
+</svg>

slides/public/images/fig10-9.svg

@@ -0,0 +1,68 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 780 495" width="780" height="495" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+
+<rect x="230" y="55" width="320" height="65" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="390" y="75" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Manager Agent</text>
+<text x="390" y="99" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Dynamic Creation · Real-time Monitoring · Cascading Termination</text>
+<rect x="41" y="160" width="130" height="95" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="106" y="176" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Agent 1</text>
+<text x="106" y="195" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="middle" dominant-baseline="central">cs.edu.cn</text>
+<text x="106" y="215" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Teacher Directory Search</text>
+<text x="106" y="235" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Searching... ◎</text>
+<line x1="390" y1="122" x2="106" y2="158" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="183" y="160" width="130" height="95" rx="4" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="248" y="176" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Agent 2</text>
+<text x="248" y="195" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="middle" dominant-baseline="central">math.edu.cn</text>
+<text x="248" y="215" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Teacher Directory Search</text>
+<text x="248" y="235" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Not Found ✗</text>
+<line x1="390" y1="122" x2="248" y2="158" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="325" y="160" width="130" height="95" rx="4" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="390" y="176" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Agent 3</text>
+<text x="390" y="195" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="middle" dominant-baseline="central">phys.edu.cn</text>
+<text x="390" y="215" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Teacher Directory Search</text>
+<text x="390" y="235" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Found! ✓</text>
+<line x1="390" y1="122" x2="390" y2="158" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="467" y="160" width="130" height="95" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="532" y="176" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Agent 4</text>
+<text x="532" y="195" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="middle" dominant-baseline="central">chem.edu.cn</text>
+<text x="532" y="215" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Teacher Directory Search</text>
+<text x="532" y="235" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Terminated ⊘</text>
+<line x1="390" y1="122" x2="532" y2="158" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="609" y="160" width="130" height="95" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="674" y="176" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Agent 5 … 10</text>
+<text x="674" y="195" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="middle" dominant-baseline="central">… (10 total)</text>
+<text x="674" y="215" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Teacher Directory Search</text>
+<text x="674" y="235" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Terminated ⊘</text>
+<line x1="390" y1="122" x2="674" y2="158" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="30" y="280" width="720" height="120" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="390" y="298" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Cascading Termination Sequence</text>
+<text x="100" y="322" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">t=0s</text>
+<text x="100" y="338" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Start 10 Agents</text>
+<text x="100" y="353" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Parallel search for "Zhang Wei"</text>
+<line x1="155" y1="335" x2="175" y2="335" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<text x="240" y="322" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">t=12s</text>
+<text x="240" y="338" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Agent 2 completes</text>
+<text x="240" y="353" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Not found → exit</text>
+<line x1="295" y1="335" x2="315" y2="335" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<text x="380" y="322" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">t=18s</text>
+<text x="380" y="338" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Agent 3 found!</text>
+<text x="380" y="353" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Send target_found</text>
+<line x1="435" y1="335" x2="455" y2="335" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<text x="520" y="322" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">t=18.1s</text>
+<text x="520" y="338" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Manager broadcasts terminate</text>
+<text x="520" y="353" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">To remaining running Agents</text>
+<line x1="585" y1="335" x2="605" y2="335" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<text x="670" y="322" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">t=19s</text>
+<text x="670" y="338" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">All confirm termination</text>
+<text x="670" y="353" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Aggregate results and return</text>
+<rect x="30" y="420" width="340" height="100" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="200" y="438" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Result found</text>
+<text x="50" y="460" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">Name: Zhang Wei   School: School of Physics</text>
+<text x="50" y="476" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">Position: Professor   Field: Quantum Computing</text>
+<text x="50" y="492" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">Email: zhangwei@phys.edu.cn</text>
+<rect x="400" y="420" width="350" height="100" rx="4" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="575" y="438" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Performance Comparison</text>
+<text x="420" y="462" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Serial: 10 websites × 30s = ~5 minutes</text>
+<text x="420" y="480" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Parallel: 18s to find + 1s to terminate = 19s</text>
+<text x="420" y="498" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.5" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Speedup: ~15× (with cascading termination optimization)</text>
+</svg>

slides/public/images/fig2-1.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 820 580" width="820" height="580" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<rect x="40" y="60" width="700" height="84" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="55" y="80" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">System Prompt</text>
+<text x="65" y="102" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">&quot;You are a helpful assistant. You MUST answer concisely.&quot;</text>
+<text x="65" y="124" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">&quot;Use tools when the user asks for real-time information.&quot;</text>
+<rect x="40" y="152" width="700" height="84" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="55" y="172" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Tool Definitions</text>
+<text x="65" y="194" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">{&quot;name&quot;: &quot;web_search&quot;, &quot;description&quot;: &quot;Search the web&quot;,</text>
+<text x="65" y="216" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central"> &quot;parameters&quot;: {&quot;query&quot;: {&quot;type&quot;: &quot;string&quot;}}}</text>
+<rect x="40" y="244" width="700" height="106" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="55" y="264" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Conversation History</text>
+<text x="65" y="286" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">user: &quot;What's the weather in Beijing today?&quot;</text>
+<text x="65" y="308" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">assistant: [tool_call] → get_weather(&quot;Beijing&quot;)</text>
+<text x="65" y="330" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">tool: {&quot;temp&quot;: &quot;23°C&quot;, &quot;conditions&quot;: &quot;clear&quot;}</text>
+<rect x="40" y="358" width="700" height="84" rx="6" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="55" y="378" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Reasoning Trace</text>
+<text x="65" y="400" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">&lt;think&gt;The user asks about the weather. I already have the tool result,</text>
+<text x="65" y="422" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">so I can directly summarize and respond without calling the tool again.&lt;/think&gt;</text>
+<rect x="40" y="450" width="700" height="62" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2"/>
+<text x="55" y="470" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Current generation position →</text>
+<text x="65" y="492" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">assistant: &quot;Beijing is clear today, temperature 23°C...&quot;  ← LLM is generating</text>
+<path d="M 748,60 C 768,60 768,281.0 773,286.0 C 768,291.0 768,512 748,512" fill="none" stroke="#333333" stroke-width="2"/>
+<text x="755" y="274.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Context</text>
+<text x="755" y="298.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="17" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Window</text>
+<rect x="100" y="535" width="620" height="50" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="410" y="552" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Window size: Qwen3 = 32K tokens | Claude = 200K | Gemini = 2M</text>
+<text x="410" y="572" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">All content serialized into token stream → processed by Transformer attention mechanism</text>
+</svg>

slides/public/images/fig2-10.svg

@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 820 440" width="820" height="440" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<text x="40" y="70" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Request 1</text>
+<rect x="40" y="85" width="380" height="40" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="230" y="105" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">System Prompt + Tools (1200 tokens)</text>
+<rect x="425" y="85" width="180" height="40" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="515" y="105" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="8.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">user: &quot;What's the weather like?&quot;</text>
+<rect x="610" y="85" width="170" height="40" rx="6" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="695" y="105" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">→ Generate response</text>
+<text x="40" y="155" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Request 2</text>
+<rect x="40" y="170" width="380" height="40" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="230" y="190" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">System Prompt + Tools (cache hit ✓)</text>
+<rect x="425" y="170" width="180" height="40" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="515" y="190" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">user: &quot;What time is it?&quot;</text>
+<rect x="610" y="170" width="170" height="40" rx="6" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="695" y="190" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">→ Generate response</text>
+<line x1="230" y1="127" x2="230" y2="168" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<text x="230.0" y="137.5" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle">KV reuse</text>
+<text x="40" y="245" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Request 3</text>
+<text x="152" y="245" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">(system prompt changed)</text>
+<rect x="40" y="260" width="400" height="40" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="240" y="280" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">System + Tools + &quot;Time: 10:30:45&quot;</text>
+<rect x="445" y="260" width="160" height="40" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="525" y="280" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="7.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">user: &quot;What's the weather like?&quot;</text>
+<rect x="610" y="260" width="170" height="40" rx="6" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="695" y="280" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">→ Full recomputation ✗</text>
+<rect x="80" y="330" width="660" height="130" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="410" y="355" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Performance comparison (3000 token total context)</text>
+<line x1="100" y1="370" x2="720" y2="370" stroke="#999999" stroke-width="2"/>
+<text x="250" y="390" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Cache hit</text>
+<text x="490" y="390" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Cache miss</text>
+<line x1="100" y1="405" x2="720" y2="405" stroke="#999999" stroke-width="2"/>
+<text x="130" y="425" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">TTFT</text>
+<text x="250" y="425" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">~0.5 seconds</text>
+<text x="490" y="425" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">3-5 seconds</text>
+<text x="130" y="450" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">Cost</text>
+<text x="250" y="450" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">New tokens only</text>
+<text x="490" y="450" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">All tokens rebilled</text>
+</svg>

slides/public/images/fig2-11.svg

@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 820 525" width="820" height="525" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+
+<rect x="40" y="70" width="740" height="90" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="60" y="90" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Layer 1: Metadata (loaded at startup, ~300 tokens)</text>
+<rect x="60" y="108" width="700" height="48" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="70" y="130" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">skills: [{name: &quot;PPTX&quot;, desc: &quot;Create PowerPoint presentations from content&quot;}</text>
+<text x="70" y="145" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">        {name: &quot;PDF&quot;,  desc: &quot;Extract and analyze PDF documents&quot;}, ...]</text>
+<line x1="410" y1="162" x2="410" y2="185" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="430" y="173" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Task trigger: "Generate PPT from paper"</text>
+<rect x="40" y="190" width="740" height="150" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="60" y="210" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Layer 2: SKILL.md core flow (loaded on demand, ~2K tokens)</text>
+<rect x="60" y="230" width="700" height="100" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="70" y="250" font-family="'Courier New', Courier, monospace" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central">PPTX Skill core flow:</text>
+<text x="70" y="272" font-family="'Courier New', Courier, monospace" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central">1. markitdown extract text → 2. Unzip PPTX to access XML</text>
+<text x="70" y="294" font-family="'Courier New', Courier, monospace" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central">3. Modify slide{N}.xml content → 4. Repackage as .pptx</text>
+<text x="70" y="316" font-family="'Courier New', Courier, monospace" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central">References: → html2pptx.md | → reference.md | → scripts/</text>
+<line x1="410" y1="342" x2="410" y2="365" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="430" y="353" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Need detailed method: "Create PPT with HTML template"</text>
+<rect x="40" y="370" width="740" height="140" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="60" y="390" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Layer 3: Sub-documents (selective deep dive, loaded on demand)</text>
+<rect x="60" y="415" width="215" height="80" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="167.5" y="433" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">html2pptx.md</text>
+<text x="167.5" y="455" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Complete workflow of</text>
+<text x="167.5" y="473" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">HTML template → PPT</text>
+<rect x="295" y="415" width="215" height="80" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="402.5" y="433" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">reference.md</text>
+<text x="402.5" y="455" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">XML format specification</text>
+<text x="402.5" y="473" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">and technical details</text>
+<rect x="530" y="415" width="215" height="80" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="637.5" y="433" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">scripts/*.py</text>
+<text x="637.5" y="455" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Executable tools:</text>
+<text x="637.5" y="473" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">thumbnail.py etc.</text>
+<rect x="100" y="520" width="620" height="35" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="410" y="538" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Fixed metadata → KV Cache friendly | Dynamic content appended → Cache not invalidated</text>
+</svg>

slides/public/images/fig2-16.svg

@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 820 490" width="820" height="490" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+
+<text x="102.5" y="65" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Strategy</text>
+<text x="225.0" y="65" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Tokens</text>
+<text x="312.5" y="65" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Ratio</text>
+<text x="382.5" y="65" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Iters</text>
+<text x="462.5" y="65" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Result</text>
+<text x="645.0" y="65" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Token usage</text>
+<line x1="30" y1="77" x2="790" y2="77" stroke="#333333" stroke-width="2"/>
+<text x="102" y="110" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">No Compression</text>
+<text x="225" y="110" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">166,043</text>
+<text x="312" y="110" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">102.1%</text>
+<text x="382" y="110" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">5</text>
+<text x="462" y="110" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#999999" text-anchor="middle" dominant-baseline="central" font-weight="normal">✗ Failed</text>
+<rect x="505" y="90" width="166.043" height="40" rx="3" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="102" y="172" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Individual Summary</text>
+<text x="225" y="172" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">276,608</text>
+<text x="312" y="172" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">10.9%</text>
+<text x="382" y="172" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">12</text>
+<text x="462" y="172" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓ Success</text>
+<rect x="505" y="152" width="276.608" height="40" rx="3" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="102" y="234" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Combined Summary</text>
+<text x="225" y="234" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">93,449</text>
+<text x="312" y="234" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">4.3%</text>
+<text x="382" y="234" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">10</text>
+<text x="462" y="234" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓ Success</text>
+<rect x="505" y="214" width="93.449" height="40" rx="3" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="102" y="296" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Context-Aware</text>
+<text x="225" y="296" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">40,157</text>
+<text x="312" y="296" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">3.0%</text>
+<text x="382" y="296" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">7</text>
+<text x="462" y="296" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓ Success</text>
+<rect x="505" y="276" width="40.157" height="40" rx="3" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="102" y="358" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Awareness + Citation</text>
+<text x="225" y="358" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">222,992</text>
+<text x="312" y="358" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">4.1%</text>
+<text x="382" y="358" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">10</text>
+<text x="462" y="358" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓ Success</text>
+<rect x="505" y="338" width="222.992" height="40" rx="3" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="102" y="420" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Adaptive Window</text>
+<text x="225" y="420" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">174,601</text>
+<text x="312" y="420" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">102.4%</text>
+<text x="382" y="420" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">7</text>
+<text x="462" y="420" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓ Success</text>
+<rect x="505" y="400" width="174.601" height="40" rx="3" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<rect x="28" y="273" width="764" height="48" rx="4" fill="none" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<rect x="100" y="470" width="620" height="45" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="410" y="485" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Context-aware compression: 76% fewer tokens than no compression, tied for fewest iterations</text>
+<text x="410" y="505" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Key: Incorporate query intent and existing information into compression decisions</text>
+</svg>

slides/public/images/fig2-3.svg

@@ -0,0 +1,30 @@
+<svg xml:lang="en" xmlns="http://www.w3.org/2000/svg" viewBox="0 40 900 430" width="900" height="430" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<text x="30" y="78" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">First call</text>
+<rect x="30" y="92" width="300" height="78" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="180" y="114" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">messages: system + user</text>
+<text x="180" y="138" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">tools: get_current_time,</text>
+<text x="180" y="156" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">get_weather</text>
+<line x1="330" y1="131" x2="388" y2="131" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="359.0" y="121.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle">API</text>
+<rect x="388" y="92" width="300" height="78" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="538" y="114" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">assistant: tool_calls</text>
+<text x="538" y="138" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">get_current_time()  +</text>
+<text x="538" y="156" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">get_weather()  (parallel)</text>
+<line x1="538" y1="170" x2="538" y2="208" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="388" y="210" width="300" height="50" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="538" y="235" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Agent framework executes two tools in parallel</text>
+<line x1="538" y1="260" x2="538" y2="298" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="30" y="286" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Second call</text>
+<rect x="388" y="300" width="300" height="78" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="538" y="322" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">messages: + tool results</text>
+<text x="538" y="346" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Vancouver time &amp; weather</text>
+<text x="538" y="364" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Append to message history</text>
+<line x1="388" y1="339" x2="330" y2="339" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="359.0" y="329.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle">API</text>
+<rect x="30" y="300" width="300" height="78" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="180" y="322" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">assistant: final reply</text>
+<text x="180" y="346" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">No tool call → end loop</text>
+<text x="180" y="364" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">"Now it is…, and the weather is…"</text>
+<text x="450" y="430" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">With a stateless API, the complete message history must be resent to the model in every round</text>
+</svg>

slides/public/images/fig3-13.svg

@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 880 450" width="880" height="450" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<circle cx="440" cy="210" r="55" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="440" y="210" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central">Agent</text>
+<rect x="120" y="100" width="200" height="80" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="220.0" y="119.2" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">① Execute task</text>
+<text x="220.0" y="140.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">process refund request</text>
+<text x="220.0" y="160.8" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">call customer service API</text>
+<rect x="680" y="100" width="200" height="80" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="780.0" y="112.7" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14.0" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">② Get feedback</text>
+<text x="780.0" y="130.9" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14.0" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">successfully refunded $45</text>
+<text x="780.0" y="149.1" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14.0" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">found need to verify last four</text>
+<text x="780.0" y="167.3" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14.0" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">digits</text>
+<rect x="680" y="310" width="200" height="80" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="780.0" y="323.675" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">③ Reflect and distill</text>
+<text x="780.0" y="341.225" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">LLM summarizes experience:</text>
+<text x="780.0" y="358.77500000000003" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">&quot;Company A refund requires</text>
+<text x="780.0" y="376.32500000000005" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">verification&quot;</text>
+<rect x="340" y="380" width="200" height="80" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="440.0" y="403.1" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13.0" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">④ Store in knowledge base</text>
+<text x="440.0" y="420.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13.0" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">experience → vectorized index</text>
+<text x="440.0" y="436.90000000000003" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13.0" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">process → generate tool code</text>
+<rect x="120" y="310" width="200" height="80" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="220.0" y="326.6" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.0" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">⑤ Future retrieval and reuse</text>
+<text x="220.0" y="342.20000000000005" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.0" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">similar task → retrieve</text>
+<text x="220.0" y="357.8" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.0" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">experience</text>
+<text x="220.0" y="373.40000000000003" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.0" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">directly reuse successful strategy</text>
+<line x1="325.0" y1="140.0" x2="675.0" y2="140.0" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<line x1="780.0" y1="185.0" x2="780.0" y2="305.0" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<line x1="677.1570104580516" y1="359.0743814301719" x2="542.8429895419484" y2="410.9256185698281" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<line x1="339.94279309860747" y1="406.3558354225374" x2="320.05720690139253" y2="363.6441645774626" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<line x1="220.0" y1="305.0" x2="220.0" y2="185.0" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="30" y="395" width="180" height="28" rx="6" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="120" y="409" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="normal">Knowledge: summary/tree summary</text>
+<rect x="670" y="395" width="180" height="28" rx="6" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="760" y="409" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="normal">Tool: process → code</text>
+</svg>

slides/public/images/fig3-2.svg

@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 880 400" width="880" height="400" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<rect x="20" y="65" width="180" height="55" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="110.0" y="92.5" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">① User Query</text>
+<text x="110" y="145" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">&quot;How many years for intentional homicide?&quot;</text>
+<line x1="200" y1="92" x2="238" y2="92" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="240" y="65" width="180" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="330.0" y="92.5" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">② Retrieval</text>
+<text x="330" y="140" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Dense Retrieval + BM25</text>
+<text x="330" y="160" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">→ Top-K Text Chunks</text>
+<line x1="420" y1="92" x2="458" y2="92" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="460" y="65" width="180" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="550.0" y="92.5" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">③ Augment</text>
+<text x="550" y="140" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Query + Retrieved Results</text>
+<text x="550" y="160" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">→ Construct Full Prompt</text>
+<line x1="640" y1="92" x2="678" y2="92" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="680" y="65" width="180" height="55" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="770.0" y="92.5" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">④ Generate</text>
+<text x="770" y="140" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">LLM synthesizes context</text>
+<text x="770" y="160" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">→ Generate response</text>
+<line x1="20" y1="195" x2="860" y2="195" stroke="#999999" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="440.0" y="215" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Example data flow</text>
+<rect x="20" y="235" width="400" height="90" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="220" y="253" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Retrieved text chunks</text>
+<text x="30" y="278" font-family="'Courier New', Courier, monospace" font-size="6.5" fill="#333333" text-anchor="start" dominant-baseline="central">Article 232 of the Criminal Law: Whoever intentionally kills another shall be sentenced to death,</text>
+<text x="30" y="298" font-family="'Courier New', Courier, monospace" font-size="8.5" fill="#333333" text-anchor="start" dominant-baseline="central">life imprisonment or fixed-term imprisonment of not less than ten years...</text>
+<rect x="440" y="235" width="420" height="90" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="650" y="253" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Augmented Prompt</text>
+<text x="450" y="278" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">Answer the question based on the following legal provisions:</text>
+<text x="450" y="298" font-family="'Courier New', Courier, monospace" font-size="7.5" fill="#333333" text-anchor="start" dominant-baseline="central">[Article 232 of the Criminal Law...] Q: What is the sentence for intentional homicide?</text>
+<rect x="20" y="345" width="840" height="80" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="440.0" y="363" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Generated response</text>
+<text x="30" y="390" font-family="'Courier New', Courier, monospace" font-size="7.5" fill="#333333" text-anchor="start" dominant-baseline="central">According to Article 232 of the Criminal Law, the crime of intentional homicide is punishable by death, life imprisonment, or fixed-term imprisonment of not less than ten years;</text>
+<text x="30" y="412" font-family="'Courier New', Courier, monospace" font-size="10.5" fill="#333333" text-anchor="start" dominant-baseline="central">if the circumstances are minor, the sentence is fixed-term imprisonment of not less than three years but not more than ten years.</text>
+</svg>

slides/public/images/fig3-8.svg

@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 800 340" width="800" height="340" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<rect x="40" y="50" width="720" height="50" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="60" y="75" font-family="'Courier New', Courier, monospace" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central">Score(Q,D) = Σ IDF(qi) × TF(qi,D)×(k1+1) / (TF + k1×(1-b+b×|D|/avgdl))</text>
+<rect x="40" y="120" width="220" height="170" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="150" y="148" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Term frequency saturation (TF)</text>
+<line x1="60" y1="163" x2="240" y2="163" stroke="#999999" stroke-width="2"/>
+<text x="150" y="190" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">k₁ controls saturation speed</text>
+<text x="150" y="218" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">TF ↑ but contribution diminishes</text>
+<text x="150" y="246" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Occurrences double</text>
+<text x="150" y="274" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Score less than doubles</text>
+<rect x="290" y="120" width="220" height="170" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="400" y="148" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Inverse document frequency (IDF)</text>
+<line x1="310" y1="163" x2="490" y2="163" stroke="#999999" stroke-width="2"/>
+<text x="400" y="190" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Measures word rarity</text>
+<text x="400" y="218" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">&quot;the&quot; → IDF ≈ 0</text>
+<text x="400" y="246" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">&quot;sentencing&quot; → IDF ≈ 5.2</text>
+<text x="400" y="274" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Rare word weight &gt;&gt; common word</text>
+<rect x="540" y="120" width="220" height="170" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="650" y="148" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Length normalization (b)</text>
+<line x1="560" y1="163" x2="740" y2="163" stroke="#999999" stroke-width="2"/>
+<text x="650" y="190" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">b ∈ [0,1] normalization strength</text>
+<text x="650" y="218" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">b=0: ignore length</text>
+<text x="650" y="246" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">b=1: full normalization</text>
+<text x="650" y="274" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Avoid bias towards long documents</text>
+<line x1="150" y1="290" x2="150" y2="315" stroke="#999999" stroke-width="2"/>
+<line x1="400" y1="290" x2="400" y2="315" stroke="#999999" stroke-width="2"/>
+<line x1="650" y1="290" x2="650" y2="315" stroke="#999999" stroke-width="2"/>
+<rect x="40" y="315" width="720" height="48" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="400.0" y="339" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Final score = Σ [IDF × length-normalized saturated TF]</text>
+</svg>

slides/public/images/fig3-9.svg

@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 880 520" width="880" height="520" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<rect x="20" y="50" width="400" height="45" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="220.0" y="73" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Non-Agentic RAG</text>
+<rect x="50" y="110" width="340" height="80" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="220.0" y="129.2" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Query: &quot;How to sentence for causing serious</text>
+<text x="220.0" y="150.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">injury by negligence while drunk</text>
+<text x="220.0" y="170.79999999999998" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">and with a previous theft conviction?&quot;</text>
+<rect x="50" y="218" width="340" height="80" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="220.0" y="237.2" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Single retrieval:</text>
+<text x="220.0" y="258.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">&quot;Sentencing for causing serious injury by</text>
+<text x="220.0" y="278.8" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">negligence&quot;</text>
+<line x1="220" y1="192" x2="220" y2="216" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="50" y="326" width="340" height="80" rx="6" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="220.0" y="345.2" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Retrieval result: Only found basic provisions</text>
+<text x="220.0" y="366.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">for negligent injury</text>
+<text x="220.0" y="386.8" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal"> (incomplete context)</text>
+<line x1="220" y1="300" x2="220" y2="324" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="50" y="434" width="340" height="80" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="220.0" y="463.6" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Direct generation: Missing &quot;drunk&quot;</text>
+<text x="220.0" y="484.40000000000003" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">and &quot;previous conviction&quot; influencing factors</text>
+<line x1="220" y1="408" x2="220" y2="432" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="220.0" y="545" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Single pass · Incomplete information</text>
+<line x1="440" y1="50" x2="440" y2="555" stroke="#999999" stroke-width="2" stroke-dasharray="8,4"/>
+<rect x="460" y="50" width="400" height="45" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="660.0" y="73" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Agentic RAG (ReAct)</text>
+<rect x="490" y="105" width="340" height="68" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="660.0" y="128.6" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Thought: Need to decompose into 3</text>
+<text x="660.0" y="149.4" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">sub-questions</text>
+<rect x="490" y="191" width="340" height="68" rx="6" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="660.0" y="202.575" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Search ①: &quot;Sentencing for causing serious injury by</text>
+<text x="660.0" y="217.52499999999998" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">negligence&quot;</text>
+<text x="660.0" y="232.475" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Search ②: &quot;Criminal liability for drunkenness&quot;</text>
+<text x="660.0" y="247.42499999999998" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Search ③: &quot;Impact of previous theft conviction&quot;</text>
+<line x1="660" y1="175" x2="660" y2="189" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="490" y="277" width="340" height="68" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="660.0" y="290.85" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Observation: Found basic provisions but</text>
+<text x="660.0" y="311.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">missing link between &quot;previous conviction&quot;</text>
+<text x="660.0" y="331.15000000000003" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">and &quot;negligent injury&quot;</text>
+<line x1="660" y1="261" x2="660" y2="275" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="490" y="363" width="340" height="68" rx="6" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="660.0" y="386.6" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Search ④: &quot;Recidivism different crimes</text>
+<text x="660.0" y="407.40000000000003" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">judicial interpretation&quot;</text>
+<line x1="660" y1="347" x2="660" y2="361" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="490" y="449" width="340" height="68" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="660.0" y="472.6" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Synthesis: Complete answer including all</text>
+<text x="660.0" y="493.40000000000003" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">legal provisions and sentencing analysis</text>
+<line x1="660" y1="433" x2="660" y2="447" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<path d="M 840,311 C 868,311 868,225 840,225" fill="none" stroke="#333333" stroke-width="2" stroke-dasharray="6,3" marker-end="url(#ah)"/>
+<text x="844" y="268.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9.5" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Iteration</text>
+<text x="660.0" y="545" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Multi-round iteration · Complete information</text>
+</svg>

slides/public/images/fig4-1.svg

@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 880 580" width="880" height="580" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<rect x="120" y="50" width="160" height="44" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="200.0" y="72.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">MCP Client</text>
+<rect x="600" y="50" width="160" height="44" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="680.0" y="72.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">MCP Server</text>
+<line x1="200" y1="94" x2="200" y2="600" stroke="#999999" stroke-width="2" stroke-dasharray="8,4"/>
+<line x1="680" y1="94" x2="680" y2="600" stroke="#999999" stroke-width="2" stroke-dasharray="8,4"/>
+<line x1="204" y1="130" x2="676" y2="130" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="440.0" y="116" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">initialize</text>
+<rect x="230" y="136" width="350" height="48" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="240" y="155.0" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">{&quot;method&quot;: &quot;initialize&quot;,</text>
+<text x="240" y="173.0" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central"> &quot;capabilities&quot;: {&quot;tools&quot;: true}}</text>
+<line x1="676" y1="200" x2="204" y2="200" stroke="#333333" stroke-width="2" stroke-dasharray="8,4" marker-end="url(#ah)"/>
+<text x="440.0" y="186" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">initialize response</text>
+<rect x="230" y="206" width="350" height="48" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="240" y="225.0" font-family="'Courier New', Courier, monospace" font-size="11.0" fill="#333333" text-anchor="start" dominant-baseline="central">{&quot;serverInfo&quot;: {&quot;name&quot;: &quot;weather-server&quot;},</text>
+<text x="240" y="243.0" font-family="'Courier New', Courier, monospace" font-size="11.0" fill="#333333" text-anchor="start" dominant-baseline="central"> &quot;capabilities&quot;: {&quot;tools&quot;: {&quot;listChanged&quot;:true}}}</text>
+<line x1="204" y1="280" x2="676" y2="280" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="440.0" y="266" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">tools/list</text>
+<rect x="230" y="286" width="350" height="30" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="240" y="305.0" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">{&quot;method&quot;: &quot;tools/list&quot;}</text>
+<line x1="676" y1="340" x2="204" y2="340" stroke="#333333" stroke-width="2" stroke-dasharray="8,4" marker-end="url(#ah)"/>
+<text x="440.0" y="326" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">tools/list response</text>
+<rect x="210" y="346" width="400" height="48" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="220" y="365.0" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">{&quot;tools&quot;: [{&quot;name&quot;: &quot;get_weather&quot;,</text>
+<text x="220" y="383.0" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">  &quot;inputSchema&quot;: {&quot;city&quot;: &quot;string&quot;}}]}</text>
+<line x1="204" y1="420" x2="676" y2="420" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="440.0" y="406" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">tools/call</text>
+<rect x="230" y="426" width="350" height="66" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="240" y="445.0" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">{&quot;method&quot;: &quot;tools/call&quot;,</text>
+<text x="240" y="463.0" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central"> &quot;params&quot;: {&quot;name&quot;: &quot;get_weather&quot;,</text>
+<text x="240" y="481.0" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">  &quot;arguments&quot;: {&quot;city&quot;: &quot;Beijing&quot;}}}</text>
+<line x1="676" y1="510" x2="204" y2="510" stroke="#333333" stroke-width="2" stroke-dasharray="8,4" marker-end="url(#ah)"/>
+<text x="440.0" y="496" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">tools/call result</text>
+<rect x="230" y="516" width="350" height="48" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="240" y="535.0" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">{&quot;content&quot;: [{&quot;type&quot;: &quot;text&quot;,</text>
+<text x="240" y="553.0" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">  &quot;text&quot;: &quot;Beijing: 22°C, sunny&quot;}]}</text>
+<text x="50" y="165" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="bold">① Handshake</text>
+<text x="50" y="310" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="bold">② Discovery</text>
+<text x="50" y="465" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="bold">③ Invocation</text>
+</svg>

slides/public/images/fig4-2.svg

@@ -0,0 +1,66 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 880 500" width="880" height="500" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<text x="97.5" y="65" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Event source</text>
+<rect x="20" y="85" width="155" height="40" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="97.5" y="105.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Email</text>
+<text x="25" y="141" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">on_email_reply</text>
+<text x="25" y="159" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">{&quot;from&quot;:&quot;alice@...&quot;,</text>
+<text x="25" y="175" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central"> &quot;subject&quot;:&quot;Re:meeting&quot;}</text>
+<rect x="20" y="195" width="155" height="40" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="97.5" y="215.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Timer</text>
+<text x="25" y="251" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">on_timer_expire</text>
+<text x="25" y="269" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">{&quot;task_id&quot;:&quot;daily_report&quot;,</text>
+<text x="25" y="285" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central"> &quot;scheduled&quot;:&quot;09:00&quot;}</text>
+<rect x="20" y="305" width="155" height="40" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="97.5" y="325.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Webhook</text>
+<text x="25" y="361" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">on_webhook</text>
+<text x="25" y="379" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">{&quot;repo&quot;:&quot;agent-lib&quot;,</text>
+<text x="25" y="395" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central"> &quot;event&quot;:&quot;pr_merged&quot;}</text>
+<rect x="20" y="415" width="155" height="40" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="97.5" y="435.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">User</text>
+<text x="25" y="471" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">on_user_message</text>
+<text x="25" y="489" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">{&quot;text&quot;:&quot;Check tomorrow's weather for me</text>
+<text x="25" y="505" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">&quot;}</text>
+<text x="310.0" y="65" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Event queue</text>
+<rect x="215" y="85" width="190" height="390" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<rect x="225" y="105" width="170" height="60" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="310.0" y="127" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">user.input</text>
+<text x="310.0" y="149" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Priority: normal</text>
+<rect x="225" y="190" width="170" height="60" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="310.0" y="212" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">email.reply</text>
+<text x="310.0" y="234" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Priority: normal</text>
+<rect x="225" y="275" width="170" height="60" rx="4" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="310.0" y="297" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">user.interrupt</text>
+<text x="310.0" y="319" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="normal">Priority: urgent!</text>
+<rect x="225" y="360" width="170" height="60" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="310.0" y="382" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">timer.trigger</text>
+<text x="310.0" y="404" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Priority: normal</text>
+<line x1="177" y1="105" x2="213" y2="120" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="177" y1="215" x2="213" y2="205" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="177" y1="325" x2="213" y2="290" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="177" y1="435" x2="213" y2="375" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="650" y="65" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Agent processing flow</text>
+<line x1="407" y1="280" x2="448" y2="280" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="427.5" y="270.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle">Fetch event</text>
+<rect x="450" y="110" width="360" height="50" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="468" y="135.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Router</text>
+<text x="798" y="135.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="end" dominant-baseline="central" font-weight="normal">LLM determines urgency</text>
+<line x1="630.0" y1="162" x2="630.0" y2="188" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="450" y="190" width="360" height="50" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="468" y="215.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Append to trace</text>
+<text x="798" y="215.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="end" dominant-baseline="central" font-weight="normal">Structured event format</text>
+<line x1="630.0" y1="242" x2="630.0" y2="268" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="450" y="270" width="360" height="50" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="468" y="295.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">LLM inference</text>
+<text x="798" y="295.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="end" dominant-baseline="central" font-weight="normal">Observe → Think → Act</text>
+<line x1="630.0" y1="322" x2="630.0" y2="348" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="450" y="350" width="360" height="50" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="468" y="375.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Tool execution</text>
+<text x="798" y="375.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="end" dominant-baseline="central" font-weight="normal">Async/sync dispatch</text>
+<line x1="630.0" y1="402" x2="630.0" y2="428" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="450" y="430" width="360" height="50" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="468" y="455.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Result handling</text>
+<text x="798" y="455.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="end" dominant-baseline="central" font-weight="normal">Notify/respond/store</text>
+<path d="M 810,450 Q 855.0,290.0 810,130" fill="none" stroke="#999999" stroke-width="2" stroke-dasharray="8,4" marker-end="url(#ah-light)"/>
+<text x="832.5" y="280.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Loop</text>
+</svg>

slides/public/images/fig4-3.svg

@@ -0,0 +1,50 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 880 540" width="880" height="540" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<text x="315.0" y="55" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">t₁</text>
+<text x="490.0" y="55" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">t₂</text>
+<text x="665.0" y="55" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">t₃</text>
+<rect x="130" y="80" width="720" height="140" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="65.0" y="150" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Cancellation</text>
+<text x="65.0" y="175" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">(Urgent)</text>
+<rect x="140.0" y="95" width="280.0" height="28" rx="4" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="280.0" y="109.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">LLM reasoning...</text>
+<line x1="420.0" y1="90" x2="420.0" y2="210" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="420.0" y="90" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">⚡ user.interrupt: &quot;Stop!&quot;</text>
+<rect x="420.0" y="95" width="35.0" height="28" rx="4" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="437.5" y="109.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="normal">×</text>
+<rect x="140.0" y="135" width="245.0" height="28" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="262.5" y="149.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Tool executing...</text>
+<rect x="420.0" y="135" width="35.0" height="28" rx="4" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="437.5" y="149.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="normal">×</text>
+<rect x="469.0" y="175" width="371.0" height="28" rx="4" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="654.5" y="189.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">New LLM reasoning (including interrupt event + clear queue)</text>
+<rect x="130" y="240" width="720" height="140" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="65.0" y="310" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Queue-based</text>
+<text x="65.0" y="335" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">(Normal)</text>
+<rect x="140.0" y="255" width="105.0" height="24" rx="4" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="192.5" y="267.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">LLM</text>
+<rect x="266.0" y="255" width="294.0" height="28" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="413.0" y="269.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Tool execution (search_web)</text>
+<rect x="581.0" y="255" width="189.0" height="28" rx="4" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="675.5" y="269.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">LLM comprehensive processing</text>
+<line x1="385.0" y1="286" x2="385.0" y2="370" stroke="#999999" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="385.0" y="298" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">user: &quot;Only look at the last 1 month&quot;</text>
+<rect x="350.0" y="305" width="150" height="24" rx="12" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="425.0" y="317.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Enqueue waiting</text>
+<rect x="581.0" y="340" width="35.0" height="20" rx="4" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="598.5" y="350.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="normal"></text>
+<text x="567.0" y="350" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="end" dominant-baseline="central" font-weight="normal">Batch append: tool.result + user input</text>
+<rect x="130" y="400" width="720" height="140" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="65.0" y="470" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Parallel</text>
+<text x="65.0" y="495" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">(Independent)</text>
+<rect x="140.0" y="415" width="560.0" height="28" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="420.0" y="429.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Main task: Data analysis (long execution)</text>
+<line x1="350.0" y1="450" x2="350.0" y2="530" stroke="#999999" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="350.0" y="458" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">user: &quot;How is the weather today?&quot;</text>
+<rect x="364.0" y="470" width="126.0" height="24" rx="4" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="427.0" y="482.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Parallel LLM</text>
+<rect x="504.0" y="470" width="70.0" height="24" rx="4" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="539.0" y="482.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="normal">Weather</text>
+<text x="584.5" y="482" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">→ Reply to user immediately</text>
+<text x="490.0" y="515" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Tag: [Parallel with main task]</text>
+</svg>

slides/public/images/fig4-5.svg

@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 880 480" width="880" height="480" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<rect x="20" y="55" width="840" height="195" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="60" y="78" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">training paradigm (strictly synchronous sequence)</text>
+<rect x="680" y="64" width="160" height="28" rx="14" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="760.0" y="78.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="normal">API mandatory constraint</text>
+<rect x="47.0" y="100" width="180" height="55" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="137.0" y="120" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Observation</text>
+<text x="137.0" y="142" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">User: Check Beijing weather</text>
+<line x1="229.0" y1="128" x2="247.0" y2="128" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="249.0" y="100" width="180" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="339.0" y="120" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Thinking</text>
+<text x="339.0" y="142" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Need to call weather tool</text>
+<line x1="431.0" y1="128" x2="449.0" y2="128" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="451.0" y="100" width="180" height="55" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="541.0" y="120" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Action</text>
+<text x="541.0" y="142" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">get_weather(Beijing)</text>
+<line x1="633.0" y1="128" x2="651.0" y2="128" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="653.0" y="100" width="180" height="55" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="743.0" y="120" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Observation</text>
+<text x="743.0" y="142" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">22°C, sunny</text>
+<rect x="47.0" y="170" width="786" height="30" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="57.0" y="185" font-family="'Courier New', Courier, monospace" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central">tool_call → next must be tool_result, otherwise API error</text>
+<line x1="20" y1="262" x2="860" y2="262" stroke="#999999" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="440.0" y="280" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="bold">contradiction</text>
+<rect x="20" y="295" width="840" height="210" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="60" y="318" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">deployment reality (asynchronous events interleaved)</text>
+<rect x="680" y="304" width="160" height="28" rx="14" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="760.0" y="318.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="normal">Format conflict!</text>
+<rect x="50.0" y="340" width="156.0" height="50" rx="4" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="128.0" y="355" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Assistant</text>
+<text x="128.0" y="372" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">tool_call:</text>
+<text x="128.0" y="386" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">get_weather(Beijing)</text>
+<rect x="221.6" y="340" width="218.4" height="50" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="330.8" y="355" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Waiting...</text>
+<text x="330.8" y="372" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Tool execution ~5s</text>
+<rect x="362.0" y="340" width="117.00000000000006" height="50" rx="4" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="420.5" y="355" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">User interrupts</text>
+<text x="420.5" y="372" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="normal">&quot;No need, </text>
+<text x="420.5" y="386" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="normal">check Shanghai's &quot;</text>
+<rect x="494.59999999999997" y="340" width="163.8" height="50" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="576.5" y="355" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">???</text>
+<text x="576.5" y="372" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">When will tool_result arrive? </text>
+<text x="576.5" y="386" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">How to ensure format?</text>
+<rect x="674.0" y="340" width="156.0" height="50" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="752.0" y="355" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">placeholder</text>
+<text x="752.0" y="372" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">[Tool still executing, </text>
+<text x="752.0" y="386" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">prioritize interruption]</text>
+<rect x="50" y="410" width="780" height="40" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="60" y="430" font-family="'Courier New', Courier, monospace" font-size="13" fill="#333333" text-anchor="start" dominant-baseline="central">Solution: placeholder fixes format + non-urgent events enqueued + only interrupt when truly urgent</text>
+<rect x="140" y="465" width="600" height="40" rx="6" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="440.0" y="485" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Fundamental solution: next-generation models need to be trained via RL in asynchronous environments</text>
+</svg>

slides/public/images/fig5-10.svg

@@ -0,0 +1,61 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 880 515" width="880" height="515" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<rect x="60" y="55" width="180" height="50" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="150" y="72" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Dust → Star</text>
+<text x="150" y="92" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Physical Laws</text>
+<line x1="240" y1="80" x2="255" y2="80" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="260" y="55" width="180" height="50" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="350" y="72" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Star → Planet</text>
+<text x="350" y="92" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Gravitational aggregation</text>
+<line x1="440" y1="80" x2="455" y2="80" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="460" y="55" width="180" height="50" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="550" y="72" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Planet → Life</text>
+<text x="550" y="92" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">DNA self-replication</text>
+<line x1="640" y1="80" x2="655" y2="80" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="660" y="55" width="180" height="50" rx="6" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="750" y="72" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Life → Agent</text>
+<text x="750" y="92" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="normal">Code bootstrapping</text>
+<line x1="30" y1="120" x2="850" y2="120" stroke="#999999" stroke-width="2" stroke-dasharray="8,4"/>
+<rect x="30" y="135" width="400" height="70" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="230" y="155" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">DNA self-replication: random mutation + natural selection</text>
+<text x="230" y="177" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Does not understand itself · Cannot modify directionally · 3.7 billion years of blind trial and error</text>
+<rect x="450" y="135" width="400" height="70" rx="6" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="650" y="155" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Agent bootstrapping: understand code + directed design</text>
+<text x="650" y="177" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="normal">Understands its own mechanisms · Creates purposefully · Inherits best practices</text>
+<rect x="20" y="225" width="390" height="295" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="215" y="248" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Original Agent (own code)</text>
+<rect x="30" y="265" width="175" height="124" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="118" y="285" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">System prompt</text>
+<text x="40" y="308" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="8.5" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">You are an airline customer service agent</text>
+<text x="40" y="326" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">Cancellation rules: ...</text>
+<text x="40" y="344" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">Transfer rules: ...</text>
+<text x="40" y="362" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">Tool: cancel_order</text>
+<rect x="215" y="265" width="185" height="124" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="308" y="285" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Agent framework code</text>
+<text x="225" y="308" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">loop:</text>
+<text x="225" y="326" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">  msg = llm(ctx)</text>
+<text x="225" y="344" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">  if tool_call:</text>
+<text x="225" y="362" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">    exec(tool)</text>
+<rect x="30" y="400" width="370" height="54" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="215" y="419" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Tool definition + MCP integration + message format</text>
+<text x="215" y="438" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Verified high-quality implementation</text>
+<text x="440" y="215" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="bold">Copy + modify</text>
+<line x1="410" y1="375" x2="470" y2="375" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="470" y="225" width="390" height="295" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="665" y="248" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">New Agent (after directed modification)</text>
+<rect x="480" y="265" width="180" height="124" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="570" y="285" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">New system prompt</text>
+<text x="490" y="308" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="7.5" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">You are an e-commerce customer service agent</text>
+<text x="490" y="326" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">Refund rules: ...</text>
+<text x="490" y="344" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">Logistics inquiry: ...</text>
+<text x="490" y="362" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="normal">Tool: refund_order</text>
+<rect x="670" y="265" width="180" height="124" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="760" y="285" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Inherited framework code</text>
+<text x="680" y="308" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">loop:</text>
+<text x="680" y="326" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">  msg = llm(ctx)</text>
+<text x="680" y="344" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">  if tool_call:</text>
+<text x="680" y="362" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">    exec(tool)</text>
+<rect x="480" y="400" width="370" height="54" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="665" y="419" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">New tools + new business logic</text>
+<text x="665" y="438" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Architecture framework fully inherited → quality guaranteed</text>
+</svg>

slides/public/images/fig5-11.svg

@@ -0,0 +1,65 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 880 570" width="880" height="570" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<rect x="30" y="60" width="280" height="55" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="170" y="80" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">User requirements</text>
+<text x="170" y="98" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">&quot;Create an e-commerce refund customer service Agent&quot;</text>
+<line x1="170" y1="115" x2="170" y2="145" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="20" y="145" width="840" height="230" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="440" y="168" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Meta-Agent (Coding Agent)</text>
+<rect x="35" y="185" width="190" height="170" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="130" y="205" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">① Read reference code</text>
+<text x="45" y="228" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">read_file:</text>
+<text x="45" y="248" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">  agent.py</text>
+<text x="45" y="268" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">  tools/*.py</text>
+<text x="45" y="288" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">  system_prompt.md</text>
+<text x="45" y="308" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">  config.yaml</text>
+<text x="45" y="332" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">→ Understand architecture patterns</text>
+<line x1="225" y1="270" x2="248" y2="270" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="248" y="185" width="190" height="170" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="343" y="205" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">② Copy scaffold</text>
+<text x="258" y="228" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">cp -r reference/</text>
+<text x="258" y="248" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">  → new_agent/</text>
+<text x="258" y="278" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Keep:</text>
+<text x="258" y="298" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">  Agent loop framework</text>
+<text x="258" y="318" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">  Message format / KV optimization</text>
+<line x1="438" y1="270" x2="461" y2="270" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="461" y="185" width="190" height="170" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="556" y="205" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">③ Targeted modifications</text>
+<text x="471" y="228" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">edit_file:</text>
+<text x="471" y="248" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">  system_prompt.md</text>
+<text x="471" y="268" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">  → E-commerce refund rules</text>
+<text x="471" y="290" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">  tools/refund.py</text>
+<text x="471" y="310" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">  → Add refund tool</text>
+<text x="471" y="332" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">  config.yaml</text>
+<line x1="651" y1="270" x2="674" y2="270" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="674" y="185" width="175" height="170" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="761" y="205" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">④ Verification testing</text>
+<text x="684" y="228" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">bash:</text>
+<text x="684" y="248" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">  python agent.py</text>
+<text x="684" y="270" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">  → Start new Agent</text>
+<text x="684" y="290" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">  → Send test messages</text>
+<text x="684" y="310" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">  → Check tool calls</text>
+<text x="684" y="330" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">  → Verify conversation flow</text>
+<line x1="440.0" y1="375" x2="440.0" y2="410" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="115" y="410" width="700" height="90" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="465" y="432" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Generated new Agent</text>
+<rect x="135" y="448" width="170" height="42" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="220" y="462" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="middle" dominant-baseline="central">system_prompt.md</text>
+<text x="220" y="480" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">E-commerce refund rules</text>
+<rect x="313" y="448" width="170" height="42" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="398" y="462" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="middle" dominant-baseline="central">tools/refund.py</text>
+<text x="398" y="480" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Refund / query tools</text>
+<rect x="491" y="448" width="170" height="42" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="576" y="462" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="middle" dominant-baseline="central">agent.py</text>
+<text x="576" y="480" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Inherited framework code</text>
+<rect x="669" y="448" width="170" height="42" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="754" y="462" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="middle" dominant-baseline="central">config.yaml</text>
+<text x="754" y="480" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Model / parameter configuration</text>
+<line x1="30" y1="515" x2="850" y2="515" stroke="#999999" stroke-width="2" stroke-dasharray="8,4"/>
+<rect x="60" y="530" width="350" height="54" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="235" y="549" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Generated from scratch: lacks best practices</text>
+<text x="235" y="571" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Ad-hoc context management · Non-standard tool design · Outdated API</text>
+<rect x="470" y="530" width="350" height="54" rx="6" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="645" y="549" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Modified from example: inherits best practices</text>
+<text x="645" y="571" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="normal">Standard message format · Standard tool design · Modern API</text>
+</svg>

slides/public/images/fig5-2.svg

@@ -0,0 +1,99 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 880 540" width="880" height="540" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<rect x="28.5" y="55" width="155" height="240" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="106.0" y="78" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">① Project documentation</text>
+<line x1="36.5" y1="92" x2="175.5" y2="92" stroke="#999999" stroke-width="2"/>
+<rect x="36.5" y="110" width="139" height="22" rx="11" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="106.0" y="121.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">read_file</text>
+<text x="38.5" y="144.5" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">README.md,</text>
+<text x="38.5" y="159.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">ARCHITECTURE.md</text>
+<rect x="36.5" y="180" width="139" height="22" rx="11" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="106.0" y="191.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">glob</text>
+<text x="38.5" y="214.5" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">**/*.py, **/*.ts</text>
+<rect x="36.5" y="250" width="139" height="22" rx="11" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="106.0" y="261.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">write_file</text>
+<text x="38.5" y="284.5" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">→ Generate CLAUDE.md</text>
+<text x="38.5" y="299.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">project guide</text>
+<line x1="185.5" y1="175.0" x2="193.5" y2="175.0" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="195.5" y="55" width="155" height="240" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="273.0" y="78" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">② Requirement understanding</text>
+<line x1="203.5" y1="92" x2="342.5" y2="92" stroke="#999999" stroke-width="2"/>
+<rect x="203.5" y="110" width="139" height="22" rx="11" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="273.0" y="121.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">ask_user</text>
+<text x="205.5" y="144.5" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">&quot;Is the optimization</text>
+<text x="205.5" y="159.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">goal latency or</text>
+<text x="205.5" y="173.5" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">throughput?&quot;</text>
+<rect x="203.5" y="180" width="139" height="22" rx="11" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="273.0" y="191.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">grep</text>
+<text x="205.5" y="214.5" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">&quot;latency|throughput&quot;</text>
+<text x="205.5" y="229.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">src/</text>
+<rect x="203.5" y="250" width="139" height="22" rx="11" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="273.0" y="261.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">read_file</text>
+<text x="205.5" y="284.5" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">src/config.py (current</text>
+<text x="205.5" y="299.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">parameters)</text>
+<line x1="352.5" y1="175.0" x2="360.5" y2="175.0" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="362.5" y="55" width="155" height="240" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="440.0" y="78" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">③ Design Document</text>
+<line x1="370.5" y1="92" x2="509.5" y2="92" stroke="#999999" stroke-width="2"/>
+<rect x="370.5" y="110" width="139" height="22" rx="11" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="440.0" y="121.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">write_file</text>
+<text x="372.5" y="144.5" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">design.md (Scheme</text>
+<text x="372.5" y="159.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">Comparison)</text>
+<rect x="370.5" y="180" width="139" height="22" rx="11" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="440.0" y="191.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">ask_user</text>
+<text x="372.5" y="214.5" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">Submit design → Wait</text>
+<text x="372.5" y="229.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">for approval</text>
+<rect x="370.5" y="250" width="139" height="22" rx="11" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="440.0" y="261.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">—</text>
+<text x="372.5" y="284.5" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">After human review →</text>
+<text x="372.5" y="299.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">Continue</text>
+<line x1="519.5" y1="175.0" x2="527.5" y2="175.0" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="529.5" y="55" width="155" height="240" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="607.0" y="78" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">④ Coding and Testing</text>
+<line x1="537.5" y1="92" x2="676.5" y2="92" stroke="#999999" stroke-width="2"/>
+<rect x="537.5" y="110" width="139" height="22" rx="11" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="607.0" y="121.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">edit_file</text>
+<text x="539.5" y="144.5" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">old_str→new_str modify</text>
+<text x="539.5" y="159.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">code</text>
+<rect x="537.5" y="180" width="139" height="22" rx="11" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="607.0" y="191.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">bash</text>
+<text x="539.5" y="214.5" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">pytest tests/ -v</text>
+<rect x="537.5" y="250" width="139" height="22" rx="11" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="607.0" y="261.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">edit_file</text>
+<text x="539.5" y="284.5" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">Fix failed tests →</text>
+<text x="539.5" y="299.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">Rerun</text>
+<line x1="686.5" y1="175.0" x2="694.5" y2="175.0" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="696.5" y="55" width="155" height="240" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="774.0" y="78" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">⑤ Review and Delivery</text>
+<line x1="704.5" y1="92" x2="843.5" y2="92" stroke="#999999" stroke-width="2"/>
+<rect x="704.5" y="110" width="139" height="22" rx="11" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="774.0" y="121.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">bash</text>
+<text x="706.5" y="144.5" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">ruff check src/ (lint)</text>
+<rect x="704.5" y="180" width="139" height="22" rx="11" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="774.0" y="191.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">read_file</text>
+<text x="706.5" y="211.95" font-family="'Courier New', Courier, monospace" font-size="7.0" fill="#333333" text-anchor="start" dominant-baseline="central">Self-review:</text>
+<text x="706.5" y="222.1" font-family="'Courier New', Courier, monospace" font-size="7.0" fill="#333333" text-anchor="start" dominant-baseline="central">readability/security/performance</text>
+<rect x="704.5" y="250" width="139" height="22" rx="11" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="774.0" y="261.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">edit_file</text>
+<text x="706.5" y="284.5" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">Update ARCHITECTURE.md</text>
+<line x1="30" y1="320" x2="850" y2="320" stroke="#999999" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="440.0" y="340" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Closed-loop feedback mechanism</text>
+<rect x="80" y="365" width="500" height="46" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="330" y="380" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Test failure → Modify code → Retest</text>
+<text x="330" y="399" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">④ Inner loop: average 2-3 rounds to converge</text>
+<rect x="80" y="415" width="500" height="46" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="330" y="430" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Lint error → Fix immediately → Recheck</text>
+<text x="330" y="449" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">⑤ Inner loop: automatically triggered after editing</text>
+<rect x="80" y="465" width="500" height="46" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="330" y="480" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Issues found in review → Go back to ④ to modify</text>
+<text x="330" y="499" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">⑤→④ rollback: ensure delivery quality</text>
+<rect x="610" y="365" width="250" height="38" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="735" y="384" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Agent status bar: cwd, git branch</text>
+<rect x="610" y="415" width="250" height="38" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="735" y="434" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Agent status bar: unstaged changes</text>
+<rect x="610" y="465" width="250" height="38" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="735" y="484" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Tool output: head/tail truncation</text>
+<rect x="610" y="515" width="250" height="38" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="735" y="534" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Persistent terminal session</text>
+<text x="440.0" y="565" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="bold">Plan before action · Verification throughout · Documentation and code co-evolve</text>
+</svg>

slides/public/images/fig5-5.svg

@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 880 520" width="880" height="520" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<rect x="20" y="60" width="350" height="280" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="195" y="82" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Proposer Agent</text>
+<text x="40" y="110" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Input: Paper/content</text>
+<rect x="30" y="125" width="330" height="24" rx="3" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="38" y="137" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">paper.pdf → Extract sections/arguments/figures</text>
+<text x="40" y="168" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Output: Slidev Markdown</text>
+<rect x="30" y="182" width="330" height="138" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="40" y="199.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">---</text>
+<text x="40" y="213.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">layout: two-cols</text>
+<text x="40" y="227.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">---</text>
+<text x="40" y="241.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central"># Transformer Architecture</text>
+<text x="40" y="255.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">::left::</text>
+<text x="40" y="269.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">- Self-attention mechanism</text>
+<text x="40" y="283.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">- Multi-head attention</text>
+<text x="40" y="297.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">::right::</text>
+<text x="40" y="311.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">&lt;img src=&quot;fig3.png&quot; /&gt;</text>
+<rect x="510" y="60" width="350" height="280" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="685" y="82" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Reviewer Agent</text>
+<text x="520" y="110" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Step 1: Render screenshot</text>
+<rect x="520" y="125" width="330" height="50" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="685" y="142" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">slidev export --per-slide</text>
+<text x="685" y="160" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">→ slide-01.png, slide-02.png ...</text>
+<text x="520" y="192" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Step 2: Vision LLM review</text>
+<rect x="520" y="208" width="330" height="108" rx="3" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="528" y="222" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">Review dimensions:</text>
+<text x="528" y="238" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">  ✓ Text overflow boundary</text>
+<text x="528" y="254" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">  ✓ Layout too crowded</text>
+<text x="528" y="270" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">  ✓ Image size appropriate</text>
+<text x="528" y="286" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">  ✗ Slide 3: Text overflows right column</text>
+<text x="528" y="302" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">  ✗ Slide 7: Content too dense</text>
+<line x1="370" y1="200" x2="508" y2="150" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="439.0" y="165.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle">Slidev code</text>
+<line x1="508" y1="300" x2="370" y2="260" stroke="#333333" stroke-width="2" stroke-dasharray="8,4" marker-end="url(#ah)"/>
+<text x="439.0" y="270.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle">Modification suggestions</text>
+<rect x="395" y="220" width="100" height="24" rx="12" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="445.0" y="232.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Iterate 2-3 rounds</text>
+<line x1="30" y1="365" x2="850" y2="365" stroke="#999999" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="440.0" y="388" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Why separate Proposer and Reviewer?</text>
+<rect x="30" y="405" width="270" height="130" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="165" y="425" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Single Agent Problem</text>
+<text x="165" y="450" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Tens of pages of rendered screenshots → context bloat</text>
+<text x="165" y="474" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Code + screenshot mix → attention dispersion</text>
+<rect x="320" y="405" width="270" height="130" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="455" y="425" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Advantages of Separation</text>
+<text x="455" y="450" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Reviewer independent context → only screenshots + code</text>
+<text x="455" y="474" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="8.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Proposer focuses on code → only receives modification suggestions</text>
+<rect x="610" y="405" width="270" height="130" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="745" y="425" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Actual Effect</text>
+<text x="745" y="450" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Significantly reduces context usage</text>
+<text x="745" y="474" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Fix accuracy improves significantly</text>
+</svg>

slides/public/images/fig6-2.svg

@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 880 490" width="880" height="490" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+
+<rect x="20" y="55" width="400" height="460" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="220" y="78" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Tool-calling type (Verifiers)</text>
+<rect x="120" y="95" width="200" height="42" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="220.0" y="116.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Agent (LLM)</text>
+<line x1="220" y1="137" x2="220" y2="168" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="60" y="170" width="320" height="80" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="220" y="192" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Tool execution environment</text>
+<rect x="75" y="200" width="290" height="48" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="85" y="219.0" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">run_python(&quot;def fib(n): ...&quot;)</text>
+<text x="85" y="237.0" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">→ {&quot;result&quot;: [1,1,2,3,5,8]}</text>
+<line x1="220" y1="250" x2="220" y2="278" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="60" y="280" width="320" height="80" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="220" y="302" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Executable verifier</text>
+<rect x="75" y="312" width="290" height="48" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="85" y="331.0" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">assert fib(10) == 55  # PASS</text>
+<text x="85" y="349.0" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">assert fib(0) == 0    # PASS</text>
+<line x1="220" y1="360" x2="220" y2="390" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="100" y="392" width="240" height="40" rx="6" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="220" y="412" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">reward = 1.0 (all passed)</text>
+<rect x="80" y="445" width="280" height="30" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="90" y="460" font-family="'Courier New', Courier, monospace" font-size="10.5" fill="#333333" text-anchor="start" dominant-baseline="central">Features: No human/LLM evaluation required</text>
+<rect x="460" y="55" width="400" height="460" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="660" y="78" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="19" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Human-computer interaction type (τ-bench)</text>
+<rect x="475" y="95" width="165" height="42" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="557.5" y="116.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">User simulator</text>
+<rect x="680" y="95" width="165" height="42" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="762.5" y="116.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Agent (LLM)</text>
+<line x1="640" y1="108" x2="678" y2="108" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="660.0" y="148.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle" font-style="italic">&quot;My flight has a problem&quot;</text>
+<line x1="680" y1="128" x2="642" y2="128" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="762" y1="137" x2="762" y2="168" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="490" y="170" width="340" height="80" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="660" y="192" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Tool call</text>
+<rect x="505" y="200" width="310" height="48" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="515" y="219.0" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">lookup_booking(&quot;BK-98712&quot;)</text>
+<text x="515" y="237.0" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">→ {&quot;status&quot;:&quot;confirmed&quot;,&quot;flight&quot;:&quot;UA123&quot;}</text>
+<line x1="660" y1="250" x2="660" y2="278" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="490" y="280" width="340" height="100" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="660" y="302" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Double verification</text>
+<rect x="505" y="312" width="310" height="66" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="515" y="331.0" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">① DB: booking.status == &quot;cancelled&quot;</text>
+<text x="515" y="349.0" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">② Dialogue: contains &quot;refund $150&quot;</text>
+<text x="515" y="367.0" font-family="'Courier New', Courier, monospace" font-size="8.5" fill="#333333" text-anchor="start" dominant-baseline="central">         contains &quot;3-5 business days to arrive&quot;</text>
+<line x1="660" y1="380" x2="660" y2="406" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="520" y="408" width="280" height="40" rx="6" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="660" y="428" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">reward = 0/1 (both passed)</text>
+<rect x="500" y="460" width="320" height="30" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="510" y="475" font-family="'Courier New', Courier, monospace" font-size="7.5" fill="#333333" text-anchor="start" dominant-baseline="central">Features: Progressive information disclosure + state verification</text>
+</svg>

slides/public/images/fig6-4.svg

@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 880 490" width="880" height="490" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+
+<rect x="30" y="60" width="250" height="150" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="155" y="82" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Rubric</text>
+<line x1="40" y1="94" x2="270" y2="94" stroke="#999999" stroke-width="2"/>
+<text x="45" y="115" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">Factual Correctness: Essential</text>
+<text x="45" y="137" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">Logical Coherence: Important</text>
+<text x="45" y="159" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">Hallucination Detection: Veto ⚠</text>
+<text x="45" y="181" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">Completeness: Important</text>
+<rect x="315" y="60" width="250" height="150" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="440" y="82" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Candidate Answer</text>
+<line x1="325" y1="94" x2="555" y2="94" stroke="#999999" stroke-width="2"/>
+<text x="330" y="115" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">Agent Output:</text>
+<text x="330" y="137" font-family="'Courier New', Courier, monospace" font-size="7" fill="#333333" text-anchor="start" dominant-baseline="central">&quot;Refund processed, $150 will be credited within</text>
+<text x="330" y="159" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central"> 3-5 business days.&quot;</text>
+<text x="330" y="181" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central"></text>
+<rect x="600" y="60" width="250" height="150" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="725" y="82" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Reference Solution (Optional)</text>
+<line x1="610" y1="94" x2="840" y2="94" stroke="#999999" stroke-width="2"/>
+<text x="615" y="115" font-family="'Courier New', Courier, monospace" font-size="11.5" fill="#333333" text-anchor="start" dominant-baseline="central">Standard Answer / Scoring Points:</text>
+<text x="615" y="137" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">Must include refund amount</text>
+<text x="615" y="159" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">Must include credit time</text>
+<text x="615" y="181" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">Cannot promise a specific date</text>
+<line x1="155" y1="210" x2="440" y2="240" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="440" y1="210" x2="440" y2="240" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="725" y1="210" x2="440" y2="240" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="280" y="245" width="320" height="50" rx="6" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="440" y="262" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Judge Model (GPT-5 / Gemini 2.5)</text>
+<text x="440" y="282" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10" fill="#cccccc" text-anchor="middle" dominant-baseline="central" font-weight="normal">Multi-source heterogeneous evaluation to prevent same-source bias</text>
+<line x1="440" y1="295" x2="440" y2="325" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="60" y="328" width="760" height="180" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="440" y="350" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Structured evaluation output</text>
+<rect x="75" y="370" width="360" height="125" rx="4" fill="#f5f5f5" stroke="#999999" stroke-width="2"/>
+<text x="85" y="390" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">Factual Correctness   </text>
+<text x="250" y="390" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">4/4</text>
+<text x="300" y="390" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="8" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Amount and time are both accurate</text>
+<text x="85" y="414" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">Completeness     </text>
+<text x="250" y="414" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">3/4</text>
+<text x="300" y="414" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="7.5" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Missing explanation of refund method</text>
+<text x="85" y="438" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">Hallucination Detection    </text>
+<text x="250" y="438" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">PASS</text>
+<text x="300" y="438" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">No false information</text>
+<text x="85" y="462" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">Logical Coherence   </text>
+<text x="250" y="462" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">4/4</text>
+<text x="300" y="462" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11.5" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Clear causal relationship</text>
+<rect x="460" y="370" width="345" height="125" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="632" y="390" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Scoring Aggregation Strategy</text>
+<text x="475" y="415" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">Weighted average: Σ(weight × dimension score)</text>
+<text x="475" y="437" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">Veto: Hallucination=FAIL → total score=0</text>
+<text x="475" y="459" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">Multi-judge: median of 3 judges</text>
+<text x="475" y="481" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">Edge case flag: disagreement &gt;2 points → human review</text>
+</svg>

slides/public/images/fig6-6.svg

@@ -0,0 +1,48 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 880 660" width="880" height="660" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="7" markerHeight="10" refX="7" refY="5" orient="auto" markerUnits="userSpaceOnUse"><polygon points="0 0, 7 5, 0 10" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<rect x="30" y="66" width="400" height="552" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="230" y="92" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Execution trace tree (single task)</text>
+<rect x="50" y="108" width="360" height="46" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="230" y="131" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Trace: Check Beijing weather for user tomorrow (3.2s, $0.008)</text>
+<rect x="50" y="164" width="360" height="64" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="68" y="189" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">LLM Call: Intent recognition</text>
+<text x="68" y="211" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Claude 4 Sonnet · 0.4s · 320 tokens</text>
+<rect x="50" y="238" width="360" height="64" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="68" y="263" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Tool：get_weather(Beijing)</text>
+<text x="68" y="285" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">MCP Server · 1.8s · 200ms TTFT</text>
+<rect x="86" y="312" width="324" height="64" rx="6" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="104" y="337" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">├─ HTTP Request</text>
+<text x="104" y="359" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">api.weather.com · 1.6s</text>
+<rect x="86" y="386" width="324" height="64" rx="6" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="104" y="411" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">└─ Response Parse</text>
+<text x="104" y="433" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">JSON → Structured weather data</text>
+<rect x="50" y="460" width="360" height="64" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="68" y="485" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">LLM Call: Generate response</text>
+<text x="68" y="507" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Claude 4 Sonnet · 0.8s · 580 tokens</text>
+<rect x="50" y="534" width="360" height="64" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="68" y="559" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">Tool：send_message(user)</text>
+<text x="68" y="581" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">0.2s · Contains weather summary</text>
+<line x1="230" y1="154" x2="230" y2="163" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="230" y1="228" x2="230" y2="237" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="248" y1="302" x2="248" y2="311" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="248" y1="376" x2="248" y2="385" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="248" y1="450" x2="248" y2="459" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="230" y1="524" x2="230" y2="533" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="470" y="66" width="380" height="552" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="660" y="92" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Monitoring dashboard</text>
+<rect x="490" y="116" width="340" height="140" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="660" y="142" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Cost tracking</text>
+<text x="510" y="174" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Today: $12.30 (1,200 calls)</text>
+<text x="510" y="198" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">This month: $340 (34K calls)</text>
+<text x="510" y="222" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Anomaly: task#892 looped search 14 times, cost $2.1</text>
+<rect x="490" y="272" width="340" height="140" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="660" y="298" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Performance monitoring</text>
+<text x="510" y="330" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">P50 / P95 / P99 latency: 2.1s / 8.4s / 15.2s</text>
+<text x="510" y="354" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Tool success rate: 94.3%</text>
+<rect x="490" y="428" width="340" height="140" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="660" y="454" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Quality audit</text>
+<text x="510" y="486" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13.5" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Task success rate: 87%    Hallucination trigger: 2.1%</text>
+<text x="510" y="510" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Security violations: 0 (this month)    User satisfaction: 4.3/5</text>
+<rect x="30" y="640" width="820" height="46" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="440" y="0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold"><tspan x="440" dy="654">Closed loop: Trace data → Identify issues → A/B testing →</tspan><tspan x="440" dy="17">Prompt version management → Continuous optimization</tspan></text>
+</svg>

slides/public/images/fig6-7.svg

@@ -0,0 +1,56 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 980 520" width="980" height="520" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+
+<rect x="20" y="60" width="420" height="130" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="230" y="82" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">① Observation: Diagnostic Report</text>
+<text x="40" y="102" font-family="'Courier New', Courier, monospace" font-size="13" fill="#333333" text-anchor="start" dominant-baseline="central">Overall Success Rate: 88% (102/116)</text>
+<text x="40" y="124" font-family="'Courier New', Courier, monospace" font-size="13" fill="#333333" text-anchor="start" dominant-baseline="central">transcription: 0%  complex_ui: 17%</text>
+<text x="40" y="146" font-family="'Courier New', Courier, monospace" font-size="13" fill="#333333" text-anchor="start" dominant-baseline="central">math_counting: 0%  Wi-Fi Operation: 0%</text>
+<text x="40" y="168" font-family="'Courier New', Courier, monospace" font-size="13" fill="#333333" text-anchor="start" dominant-baseline="central">Task 82,102-115 Concentrated Failures</text>
+<rect x="460" y="60" width="400" height="130" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="660" y="82" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">② Hypothesis: Three-Layer Improvement Framework</text>
+<rect x="475" y="94" width="60" height="24" rx="12" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="505.0" y="106.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="7.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Surface Layer</text>
+<text x="545" y="106" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">H1 Set Navigation Prompt H2 UI Rules</text>
+<rect x="475" y="126" width="60" height="24" rx="12" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="505.0" y="138.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="8.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Middle Layer</text>
+<text x="545" y="138" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">H3 Fix Multimodal Pipeline H4 Thinking</text>
+<rect x="475" y="158" width="60" height="24" rx="12" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="505.0" y="170.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Deep Layer</text>
+<text x="545" y="170" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">H5 GPT-5 H6 UI Element Tree</text>
+<line x1="420" y1="125" x2="458" y2="125" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="20" y="210" width="840" height="120" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="440" y="232" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">③ Experiment: Phased Validation (5 runs × 116 tasks per configuration)</text>
+<rect x="40" y="250" width="190" height="65" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="135" y="268" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">H1 Navigation</text>
+<text x="135" y="288" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Setup 0%→75%</text>
+<text x="135" y="304" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">token+8%</text>
+<rect x="250" y="250" width="190" height="65" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="345" y="268" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">H3 Multimodal</text>
+<text x="345" y="288" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Transcription 0%→80%</text>
+<text x="345" y="304" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Latency +1s</text>
+<rect x="460" y="250" width="190" height="65" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="555" y="268" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">H4 Thinking</text>
+<text x="555" y="288" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Counting 0%→70%</text>
+<text x="555" y="304" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Latency 3x!</text>
+<rect x="670" y="250" width="190" height="65" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="765" y="268" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">H6 Element Tree</text>
+<text x="765" y="288" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">UI 17%→52%</text>
+<text x="765" y="304" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">token+30%</text>
+<rect x="20" y="350" width="420" height="130" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="230" y="372" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">④ Decision: Cost-Benefit Trade-off</text>
+<text x="40" y="395" font-family="'Courier New', Courier, monospace" font-size="13" fill="#333333" text-anchor="start" dominant-baseline="central">✓ H1+H3: Low Cost, High Benefit → Deploy</text>
+<text x="40" y="419" font-family="'Courier New', Courier, monospace" font-size="12.5" fill="#333333" text-anchor="start" dominant-baseline="central">✗ H4: Only 8% Tasks Benefit but 3x Latency → Reject</text>
+<text x="40" y="443" font-family="'Courier New', Courier, monospace" font-size="13" fill="#333333" text-anchor="start" dominant-baseline="central">✓ H6: 35% Improvement / 30% Cost → Deploy</text>
+<text x="40" y="467" font-family="'Courier New', Courier, monospace" font-size="13" fill="#333333" text-anchor="start" dominant-baseline="central">✗ H5: 15s/Step Unacceptable → Alternative</text>
+<rect x="460" y="350" width="400" height="130" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="660" y="372" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">⑤ Iteration: New Cycle</text>
+<text x="480" y="395" font-family="'Courier New', Courier, monospace" font-size="13" fill="#333333" text-anchor="start" dominant-baseline="central">Deploy H1+H3+H6 → 88%→94%</text>
+<text x="480" y="419" font-family="'Courier New', Courier, monospace" font-size="13" fill="#333333" text-anchor="start" dominant-baseline="central">New Report Shows Different Failure Modes:</text>
+<text x="480" y="443" font-family="'Courier New', Courier, monospace" font-size="13" fill="#333333" text-anchor="start" dominant-baseline="central">  H7: Conditional Thinking Enabled</text>
+<text x="480" y="467" font-family="'Courier New', Courier, monospace" font-size="13" fill="#333333" text-anchor="start" dominant-baseline="central">  H8: Expand gesture action space</text>
+<line x1="870" y1="415" x2="870" y2="125" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="885" y="270" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="bold">↑ Loop</text>
+<rect x="80" y="500" width="720" height="42" rx="6" fill="#999999" stroke="#333333" stroke-width="2"/>
+<text x="440" y="521" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#ffffff" text-anchor="middle" dominant-baseline="central" font-weight="bold">Methodology: Observe → Hypothesize → Experiment → Decide → Iterate = From alchemy to scientific engineering</text>
+</svg>

slides/public/images/fig7-1.svg

@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 780 440" width="780" height="440" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+
+<rect x="10" y="120" width="260" height="130" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="140" y="145" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Agent (Explorer)</text>
+<text x="140" y="175" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Policy π: Observe state →</text>
+<text x="140" y="198" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Select action (move/pick up/attack)</text>
+<text x="140" y="225" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">ε-greedy: 90% optimal, 10% random</text>
+<rect x="510" y="120" width="260" height="130" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="640" y="145" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Environment (Maze World)</text>
+<text x="640" y="175" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">5 rooms · Key/Door/Guard</text>
+<text x="640" y="198" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Transition: P(Storage|Hall,East)=1.0</text>
+<text x="640" y="225" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">R(Defeat Guard)=+50, R(Move)=0</text>
+<line x1="272" y1="150" x2="508" y2="150" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="390.0" y="136" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Action A(t) = "Move East"</text>
+<line x1="508" y1="235" x2="272" y2="235" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="390.0" y="258" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">State S(t+1) + Reward R(t+1)</text>
+<text x="390" y="300" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Trajectory: S(0), A(0), R(1), S(1), A(1), R(2), ...</text>
+<rect x="35.0" y="340" width="134.0" height="70" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="102.0" y="357" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">S(0): Entrance Hall</text>
+<text x="102.0" y="375" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">A(0): East</text>
+<text x="102.0" y="393" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">R(1): 0</text>
+<line x1="171.0" y1="373" x2="181.0" y2="373" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="179.0" y="340" width="134.0" height="70" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="246.0" y="357" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">S(1): Storage Room</text>
+<text x="246.0" y="375" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">A(1): Take Key</text>
+<text x="246.0" y="393" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">R(2): +5</text>
+<line x1="315.0" y1="373" x2="325.0" y2="373" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="323.0" y="340" width="134.0" height="70" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="390.0" y="357" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">S(2): Storage Room</text>
+<text x="390.0" y="375" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">A(2): North</text>
+<text x="390.0" y="393" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">R(3): 0</text>
+<line x1="459.0" y1="373" x2="469.0" y2="373" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="467.0" y="340" width="134.0" height="70" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="534.0" y="357" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">S(3): Guard Room</text>
+<text x="534.0" y="375" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">A(3): Craft Silver Sword</text>
+<text x="534.0" y="393" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">R(4): +10</text>
+<line x1="603.0" y1="373" x2="613.0" y2="373" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="611.0" y="340" width="134.0" height="70" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="678.0" y="357" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">S(4): Guard Room</text>
+<text x="678.0" y="375" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">A(4): Attack</text>
+<text x="678.0" y="393" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">R(5): +50</text>
+<text x="390" y="460" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Goal: Maximize cumulative reward G = R(1) + γR(2) + γ²R(3) + ... (γ=0.99)</text>
+</svg>

slides/public/images/fig7-11.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 780 340" width="780" height="340" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+
+<rect x="40" y="65" width="300" height="130" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="190" y="88" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Phase 1: SFT Formatting</text>
+<text x="190" y="115" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Goal: Output parseable (JSON/tool call)</text>
+<text x="190" y="137" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Data: Thousands of high-quality demonstrations</text>
+<text x="190" y="159" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Stopping condition: Format stable, basic capability achieved</text>
+<text x="190" y="181" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">⚠ Overtraining → Model collapses to training distribution</text>
+<line x1="342" y1="130" x2="398" y2="130" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="370" y="115" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Format</text>
+<text x="370" y="135" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Stable</text>
+<rect x="400" y="65" width="340" height="130" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="570" y="88" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Phase 2: RL Shaping Strategy</text>
+<text x="570" y="115" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Goal: Maximize task reward (accuracy/success rate)</text>
+<text x="570" y="137" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Prerequisite: Output format stable → Reward computable</text>
+<text x="570" y="159" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Breakthrough: Discover new strategies beyond SFT demonstrations</text>
+<text x="570" y="181" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓ Stable format + Strategy generalization = Deployment ready</text>
+<rect x="40" y="220" width="700" height="70" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="390" y="238" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Why can't we skip SFT and go directly to RL?</text>
+<text x="390" y="262" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Base model output is unstructured → Cannot parse JSON → Reward function returns NaN → Gradients all zero → Training completely fails</text>
+<text x="390" y="310" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">SFT memorizes distribution → RL generalizes strategy</text>
+<text x="390" y="338" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">SFT: max Σ log P(y|x) (fit training distribution)    RL: max E[R(τ)] (optimize task objective)</text>
+<text x="390" y="362" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">When "no matter how many demonstrations are added, new scenarios still perform poorly" → Tipping point to switch to RL</text>
+</svg>

slides/public/images/fig7-13.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 780 450" width="780" height="450" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+
+<rect x="40" y="80" width="160" height="50" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="120" y="105" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Input Prompt x</text>
+<line x1="202" y1="105" x2="238" y2="105" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="240" y="50" width="280" height="120" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="380" y="70" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Policy model πθ parallel sampling</text>
+<text x="255" y="95" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">y₁: (8+6)×3-4 = 38   ✗</text>
+<text x="255" y="117" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">y₂: 3×4×(8-6) = 24   ✓</text>
+<text x="255" y="139" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">y₃: 8×4-6-3 = 23     ✗</text>
+<text x="255" y="161" font-family="'Courier New', Courier, monospace" font-size="12" fill="#333333" text-anchor="start" dominant-baseline="central">y₄: (8+4)×3÷6 = 6    ✗</text>
+<line x1="522" y1="105" x2="558" y2="105" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="560" y="70" width="190" height="98" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="655" y="90" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Reward calculation</text>
+<text x="655" y="112" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">R₁ = 0 (incorrect)</text>
+<text x="655" y="126" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">R₂ = 1 (correct)</text>
+<text x="655" y="140" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">R₃ = 0 (incorrect)</text>
+<text x="655" y="154" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">R₄ = 0 (incorrect)</text>
+<rect x="40" y="220" width="700" height="70" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="390" y="238" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Relative advantage calculation (no value network needed)</text>
+<text x="390" y="262" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">A(yi) = (Ri - mean(R)) / std(R)  →  A1=-0.58  A2=+1.73  A3=-0.58  A4=-0.58</text>
+<rect x="40" y="315" width="700" height="100" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="390" y="337" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Policy update (symmetric clipping)</text>
+<text x="390" y="365" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">L = -E[ min(r(θ)·A, clip(r(θ), 1-ε, 1+ε)·A) ]</text>
+<text x="390" y="390" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Symmetric clipping range [1-ε, 1+ε], ε=0.2 · Advantage comes from intra-group relative comparison, no value network needed</text>
+<text x="390" y="435" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Core advantages of GRPO</text>
+<text x="390" y="460" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">No reward model/value network · Intra-group relative comparison · Retains online exploration capability · Suitable for verifiable reward scenarios</text>
+</svg>

slides/public/images/fig7-15.svg

@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 780 340" width="780" height="340" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+
+<rect x="68" y="65" width="124" height="100" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="130" y="83" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Step 1</text>
+<text x="130" y="105" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Observe ahead</text>
+<text x="130" y="123" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Choose left turn</text>
+<text x="130" y="145" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">R=+1</text>
+<line x1="193" y1="115" x2="199" y2="115" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="198" y="65" width="124" height="100" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="260" y="83" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Step 2</text>
+<text x="260" y="105" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Identify sign</text>
+<text x="260" y="123" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Confirm direction</text>
+<text x="260" y="145" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">R=+1</text>
+<line x1="323" y1="115" x2="329" y2="115" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="328" y="65" width="124" height="100" rx="4" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="390" y="83" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Step 3</text>
+<text x="390" y="105" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Miss the turn</text>
+<text x="390" y="123" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Continue straight</text>
+<text x="390" y="145" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="bold">R=−1</text>
+<line x1="453" y1="115" x2="459" y2="115" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="458" y="65" width="124" height="100" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="520" y="83" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Step 4</text>
+<text x="520" y="105" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Detect error</text>
+<text x="520" y="123" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Turn around and go back</text>
+<text x="520" y="145" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">R=0</text>
+<line x1="583" y1="115" x2="589" y2="115" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="588" y="65" width="124" height="100" rx="4" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="650" y="83" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Step 5</text>
+<text x="650" y="105" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Reach target</text>
+<text x="650" y="123" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Task complete</text>
+<text x="650" y="145" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">R=+10</text>
+<rect x="30" y="195" width="720" height="60" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="390" y="213" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Key question: Which step should the final reward +10 be attributed to?</text>
+<text x="390" y="237" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Step 3 makes mistake but step 4 corrects → step 4's correction is more critical than step 1-2's correctness</text>
+<rect x="30" y="275" width="340" height="80" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="200" y="295" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Process reward (V-IRL navigation)</text>
+<text x="200" y="317" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Immediate feedback per step: correct +1 / wrong −1</text>
+<text x="200" y="335" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓ Reduces credit assignment difficulty  ✗ May limit exploration</text>
+<rect x="410" y="275" width="340" height="80" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="580" y="295" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Outcome reward (SimpleVLA-RL)</text>
+<text x="580" y="317" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Only terminal feedback: success 1 / failure 0</text>
+<text x="580" y="335" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">✓ Maximum exploration freedom  ✗ More difficult training</text>
+</svg>

slides/public/images/fig7-18.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 850 390" width="850" height="390" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+
+<rect x="80" y="120" width="160" height="80" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="160" y="140" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">policy model πθ</text>
+<text x="160" y="160" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">generate action:</text>
+<text x="160" y="178" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">think/search/code/answer</text>
+<rect x="320" y="70" width="160" height="60" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="400" y="90" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">tool execution</text>
+<text x="400" y="110" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">API call / code sandbox</text>
+<rect x="320" y="200" width="160" height="60" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="400" y="220" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">result parsing</text>
+<text x="400" y="240" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">success/failure/error message</text>
+<rect x="560" y="120" width="170" height="80" rx="6" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="645" y="140" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">reward calculation</text>
+<text x="645" y="160" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">correct: +1</text>
+<text x="645" y="178" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">incorrect: −1</text>
+<line x1="242" y1="140" x2="318" y2="100" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="482" y1="100" x2="558" y2="140" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="480" y1="230" x2="558" y2="180" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="355" y1="132" x2="355" y2="198" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<path d="M 645,200 Q 400,151 160,202" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="400" y="275" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">policy gradient update</text>
+<rect x="40" y="300" width="770" height="110" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="390" y="330" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Three levels of challenges in tool-use RL</text>
+<text x="140" y="367" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Level 1: Single tool mastery</text>
+<text x="140" y="392" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">when to call + how to call + error handling</text>
+<text x="390" y="367" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Level 2: Multi-tool selection</text>
+<text x="390" y="392" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">search / code / document parsing: choose one of three</text>
+<text x="640" y="367" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Level 3: Tool chain orchestration</text>
+<text x="640" y="392" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">dependency management + mutual exclusion constraints + cost optimization</text>
+</svg>

slides/public/images/fig7-7.svg

@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 780 480" width="780" height="480" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="5" markerHeight="4" refX="5" refY="2" orient="auto"><polygon points="0 0, 5 2, 0 4" fill="#333333"/></marker><marker id="ah-light" markerWidth="5" markerHeight="4" refX="5" refY="2" orient="auto"><polygon points="0 0, 5 2, 0 4" fill="#999999"/></marker></defs>
+
+<rect x="20" y="55" width="350" height="310" rx="8" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="32" y="73" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="bold">Q-learning Agent</text>
+<rect x="410" y="55" width="350" height="310" rx="8" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="422" y="73" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="bold">LLM Agent（Kimi K2）</text>
+<rect x="35" y="85" width="320" height="48" rx="6" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="195.0" y="109.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">State: hash code 0x3A7F</text>
+<text x="195" y="123" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">room=2, items=[key], doors=[N]</text>
+<rect x="35" y="147" width="320" height="48" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="195.0" y="171.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Q-table lookup</text>
+<text x="195" y="185" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">145 states × 7 actions = 1015 entries</text>
+<line x1="195" y1="135" x2="195" y2="145" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="35" y="209" width="320" height="48" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="195.0" y="233.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">ε-greedy selection</text>
+<text x="195" y="247" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">ε=0.1 → 90% optimal / 10% random</text>
+<line x1="195" y1="197" x2="195" y2="207" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="35" y="271" width="320" height="48" rx="6" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="195.0" y="295.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Action: integer ID</text>
+<text x="195" y="309" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">a=3 → "move north" (no semantic understanding)</text>
+<line x1="195" y1="259" x2="195" y2="269" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="425" y="85" width="320" height="48" rx="6" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="585.0" y="109.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">State: natural language description</text>
+<text x="585" y="123" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">"The storage room has a red key, the north door is locked"</text>
+<rect x="425" y="147" width="320" height="48" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="585.0" y="171.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">LLM reasoning + experience buffer</text>
+<text x="585" y="185" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Reasoning: "Door locked → need key → get key"</text>
+<line x1="585" y1="135" x2="585" y2="145" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="425" y="209" width="320" height="48" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="585.0" y="233.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Semantic action selection</text>
+<text x="585" y="247" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Understand conceptual relationships, make purposeful decisions</text>
+<line x1="585" y1="197" x2="585" y2="207" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="425" y="271" width="320" height="48" rx="6" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="585.0" y="295.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Action: structured instruction</text>
+<text x="585" y="309" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">{&quot;action&quot;:&quot;pick_up&quot;,&quot;target&quot;:&quot;red_key&quot;}</text>
+<line x1="585" y1="259" x2="585" y2="269" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="30" y="382" width="720" height="105" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="390" y="404" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Performance comparison</text>
+<text x="200" y="424" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Metric</text>
+<text x="380" y="424" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Q-learning</text>
+<text x="600" y="424" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">LLM Agent</text>
+<text x="200" y="442" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">First completion</text>
+<text x="380" y="442" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">~7000 episodes</text>
+<text x="600" y="442" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Episode 1 (17 steps)</text>
+<text x="200" y="460" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Final win rate</text>
+<text x="380" y="460" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">100% (after 10K ep)</text>
+<text x="600" y="460" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">~90% (instant)</text>
+<text x="200" y="478" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Computation cost</text>
+<text x="380" y="478" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">10 sec / 10K ep</text>
+<text x="600" y="478" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">1-2 min / episode</text>
+</svg>

slides/public/images/fig8-1.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 880 194" width="880" height="194" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<rect x="27.0" y="48" width="190" height="84" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="122.0" y="64.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Complete task</text>
+<text x="122.0" y="90.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Generate raw</text>
+<text x="122.0" y="116.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">experience</text>
+<rect x="239.0" y="48" width="190" height="84" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="334.0" y="64.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Refine experience</text>
+<text x="334.0" y="90.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Summarize,</text>
+<text x="334.0" y="116.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">compress, structure</text>
+<line x1="219.0" y1="90.0" x2="237.0" y2="90.0" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="451.0" y="48" width="190" height="84" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="546.0" y="70.5" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15.0" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Store in external system</text>
+<text x="546.0" y="90.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13.0" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Knowledge base/tools,</text>
+<text x="546.0" y="109.5" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13.0" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">retrievable</text>
+<line x1="431.0" y1="90.0" x2="449.0" y2="90.0" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="663.0" y="48" width="190" height="84" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="758.0" y="64.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Retrieve and</text>
+<text x="758.0" y="90.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">reuse</text>
+<text x="758.0" y="116.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Invoke in next task</text>
+<line x1="643.0" y1="90.0" x2="661.0" y2="90.0" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="758.0" y1="132" x2="758.0" y2="166" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<line x1="758.0" y1="166" x2="122.0" y2="166" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<line x1="122.0" y1="166" x2="122.0" y2="134" stroke="#333333" stroke-width="2" stroke-dasharray="8,4" marker-end="url(#ah)"/>
+<text x="440.0" y="184" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Experience accumulates persistently, reused across sessions</text>
+</svg>

slides/public/images/fig8-2.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 880 194" width="880" height="194" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+<rect x="27.0" y="48" width="190" height="84" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="122.0" y="67.25" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="17.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Successful trajectory</text>
+<text x="122.0" y="90.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Process of completing</text>
+<text x="122.0" y="112.75" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">task</text>
+<rect x="239.0" y="48" width="190" height="84" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="334.0" y="64.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Strategy summary</text>
+<text x="334.0" y="90.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Refine into</text>
+<text x="334.0" y="116.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">knowledge summary</text>
+<line x1="219.0" y1="90.0" x2="237.0" y2="90.0" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="451.0" y="48" width="190" height="84" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="546.0" y="64.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Knowledge</text>
+<text x="546.0" y="90.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">summary base</text>
+<text x="546.0" y="116.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Build semantic index</text>
+<line x1="431.0" y1="90.0" x2="449.0" y2="90.0" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="663.0" y="48" width="190" height="84" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="758.0" y="64.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Retrieval injection</text>
+<text x="758.0" y="90.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Agent uses when</text>
+<text x="758.0" y="116.0" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">making decisions</text>
+<line x1="643.0" y1="90.0" x2="661.0" y2="90.0" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="758.0" y1="132" x2="758.0" y2="166" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<line x1="758.0" y1="166" x2="122.0" y2="166" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<line x1="122.0" y1="166" x2="122.0" y2="134" stroke="#333333" stroke-width="2" stroke-dasharray="8,4" marker-end="url(#ah)"/>
+<text x="440.0" y="184" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Reuse historical experience for similar tasks</text>
+</svg>

slides/public/images/fig9-11.svg

@@ -0,0 +1,67 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 780 480" width="780" height="480" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker><marker id="ah-sm" markerWidth="6" markerHeight="4" refX="6" refY="2" orient="auto"><polygon points="0 0, 6 2, 0 4" fill="#999999"/></marker></defs>
+
+<rect x="55" y="55" width="210" height="50" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="160" y="73" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">RT-2</text>
+<text x="160" y="93" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal"></text>
+<rect x="63" y="115" width="194" height="50" rx="3" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="160" y="133" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">vision-language backbone</text>
+<text x="160" y="151" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">large-scale pretrained VLM</text>
+<rect x="63" y="173" width="194" height="50" rx="3" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="160" y="191" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">action discretization</text>
+<text x="160" y="209" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">continuous action → token</text>
+<line x1="160" y1="165" x2="160" y2="173" stroke="#999999" stroke-width="2" marker-end="url(#ah-sm)"/>
+<rect x="63" y="231" width="194" height="50" rx="3" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="160" y="249" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">autoregressive output</text>
+<text x="160" y="267" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">token-by-token generation</text>
+<line x1="160" y1="223" x2="160" y2="231" stroke="#999999" stroke-width="2" marker-end="url(#ah-sm)"/>
+<text x="160" y="294" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">direct fine-tuning on VLM</text>
+<text x="160" y="312" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">leveraging pretrained generalization</text>
+<text x="160" y="330" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">zero-shot transfer to novel objects/instructions</text>
+<rect x="290" y="55" width="210" height="50" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="395" y="73" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">OpenVLA</text>
+<text x="395" y="93" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal"></text>
+<rect x="298" y="115" width="194" height="50" rx="3" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="395" y="133" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">vision encoder</text>
+<text x="395" y="151" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">DINOv2 + SigLIP</text>
+<rect x="298" y="173" width="194" height="50" rx="3" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="395" y="191" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">language model</text>
+<text x="395" y="209" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Llama 2 7B</text>
+<line x1="395" y1="165" x2="395" y2="173" stroke="#999999" stroke-width="2" marker-end="url(#ah-sm)"/>
+<rect x="298" y="231" width="194" height="50" rx="3" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="395" y="249" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">action head</text>
+<text x="395" y="267" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">discrete action token</text>
+<line x1="395" y1="223" x2="395" y2="231" stroke="#999999" stroke-width="2" marker-end="url(#ah-sm)"/>
+<text x="395" y="294" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">fully open-source · community reproducible</text>
+<text x="395" y="312" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Open X-Embodiment pretraining</text>
+<text x="395" y="330" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">original single-step autoregressive ~6Hz</text>
+<rect x="525" y="55" width="210" height="50" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="630" y="73" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">π₀</text>
+<text x="630" y="93" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal"></text>
+<rect x="533" y="115" width="194" height="50" rx="3" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="630" y="133" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">vision-language backbone</text>
+<text x="630" y="151" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">PaliGemma</text>
+<rect x="533" y="173" width="194" height="50" rx="3" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="630" y="191" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">action expert</text>
+<text x="630" y="209" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">flow matching denoising</text>
+<line x1="630" y1="165" x2="630" y2="173" stroke="#999999" stroke-width="2" marker-end="url(#ah-sm)"/>
+<rect x="533" y="231" width="194" height="50" rx="3" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="630" y="249" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">action output</text>
+<text x="630" y="267" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">continuous action trajectory</text>
+<line x1="630" y1="223" x2="630" y2="231" stroke="#999999" stroke-width="2" marker-end="url(#ah-sm)"/>
+<text x="630" y="294" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">continuous trajectory generation route</text>
+<text x="630" y="312" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">action chunking 25-50/chunk at 50Hz</text>
+<text x="630" y="330" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">better dexterous manipulation smoothness</text>
+<rect x="35" y="365" width="710" height="135" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="390" y="387" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">two-layer control architecture</text>
+<rect x="55" y="407" width="300" height="40" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="205" y="420" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">long-horizon planning (0.1-1Hz)</text>
+<text x="205" y="437" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">general VLM / Gemini Robotics-ER 1.5</text>
+<line x1="357" y1="427" x2="400" y2="427" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<text x="378.5" y="420" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12" fill="#666666" text-anchor="middle">subgoal</text>
+<rect x="402" y="407" width="300" height="40" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="552" y="420" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">VLA control (1-10Hz)</text>
+<text x="552" y="437" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">RT-2 / OpenVLA / π₀</text>
+<text x="390" y="465" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="12.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">common foundation: imitation learning + large-scale cross-embodiment demonstration data, breaking data bottleneck</text>
+<text x="390" y="485" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">two action representation routes: discrete action token (RT-2 / OpenVLA) · continuous trajectory generation (π₀)</text>
+</svg>

slides/public/images/fig9-2.svg

@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 780 380" width="780" height="380" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+
+<text x="170" y="83" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="end" dominant-baseline="central" font-weight="bold">VAD wait</text>
+<rect x="180" y="65" width="166" height="36" rx="3" fill="#e0e0e0" stroke="#333333" stroke-width="2"/>
+<rect x="180" y="65" width="104" height="36" rx="3" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="354" y="83" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">500-800ms</text>
+<text x="170" y="127" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="end" dominant-baseline="central" font-weight="bold">ASR transcription</text>
+<rect x="284" y="109" width="41" height="36" rx="3" fill="#e0e0e0" stroke="#333333" stroke-width="2"/>
+<rect x="284" y="109" width="10" height="36" rx="3" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="333" y="127" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">50-200ms</text>
+<text x="170" y="171" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="end" dominant-baseline="central" font-weight="bold">LLM TTFT</text>
+<rect x="294" y="153" width="104" height="36" rx="3" fill="#e0e0e0" stroke="#333333" stroke-width="2"/>
+<rect x="294" y="153" width="20" height="36" rx="3" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="406" y="171" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">100-500ms</text>
+<text x="170" y="215" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="end" dominant-baseline="central" font-weight="bold">LLM generation</text>
+<rect x="315" y="197" width="62" height="36" rx="3" fill="#e0e0e0" stroke="#333333" stroke-width="2"/>
+<rect x="315" y="197" width="20" height="36" rx="3" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="385" y="215" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">100-300ms</text>
+<text x="170" y="259" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="end" dominant-baseline="central" font-weight="bold">TTS synthesis</text>
+<rect x="336" y="241" width="104" height="36" rx="3" fill="#e0e0e0" stroke="#333333" stroke-width="2"/>
+<rect x="336" y="241" width="41" height="36" rx="3" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="448" y="259" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">200-500ms</text>
+<line x1="180" y1="290" x2="660" y2="290" stroke="#999999" stroke-width="2"/>
+<line x1="180" y1="286" x2="180" y2="294" stroke="#999999" stroke-width="2"/>
+<text x="180" y="308" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">0ms</text>
+<line x1="284" y1="286" x2="284" y2="294" stroke="#999999" stroke-width="2"/>
+<text x="284" y="308" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">500ms</text>
+<line x1="388" y1="286" x2="388" y2="294" stroke="#999999" stroke-width="2"/>
+<text x="388" y="308" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">1000ms</text>
+<line x1="493" y1="286" x2="493" y2="294" stroke="#999999" stroke-width="2"/>
+<text x="493" y="308" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">1500ms</text>
+<line x1="597" y1="286" x2="597" y2="294" stroke="#999999" stroke-width="2"/>
+<text x="597" y="308" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">2000ms</text>
+<rect x="40" y="330" width="700" height="80" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="390" y="350" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Total response time</text>
+<rect x="60" y="368" width="200" height="28" rx="3" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="160" y="382" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Best: 950ms ≈ 0.9s</text>
+<rect x="280" y="368" width="200" height="28" rx="3" fill="#e0e0e0" stroke="#333333" stroke-width="2"/>
+<text x="380" y="382" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Worst: 2300ms ≈ 2.3s</text>
+<text x="580" y="382" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">← Ideal no-load scenario</text>
+</svg>

slides/public/images/fig9-5.svg

@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 780 430" width="780" height="430" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+
+<rect x="30" y="60" width="140" height="50" rx="6" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="100" y="78" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">User input</text>
+<text x="100" y="98" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="8" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">&quot;Which plan to choose?&quot;</text>
+<line x1="172" y1="78" x2="218" y2="78" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="220" y="55" width="250" height="130" rx="8" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="232" y="73" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="bold">Parallel thinking</text>
+<rect x="235" y="80" width="220" height="42" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="345" y="95" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Fast thinking ~500ms (thinking off)</text>
+<text x="345" y="110" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">&quot;Good price, recommend purchase&quot;</text>
+<rect x="235" y="130" width="220" height="42" rx="6" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="345" y="145" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Slow thinking ~8s (thinking on)</text>
+<text x="345" y="160" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="8.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">&quot;Lacks international roaming, not suitable&quot;</text>
+<line x1="457" y1="95" x2="503" y2="95" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<line x1="457" y1="150" x2="503" y2="150" stroke="#333333" stroke-width="2" marker-end="url(#ah)"/>
+<rect x="505" y="60" width="240" height="130" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="625" y="80" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">User experience</text>
+<text x="625" y="102" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">0.5s: &quot;Good price, recommend purchase&quot;</text>
+<text x="625" y="120" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="8.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">8.0s: &quot;Lacks international roaming, not suitable&quot;</text>
+<text x="625" y="145" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="bold">→ Contradiction!</text>
+<text x="625" y="168" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">→ User loses trust</text>
+<rect x="30" y="210" width="720" height="90" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="390" y="230" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Two major issues</text>
+<text x="200" y="258" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Issue 1: Overthinking simple problems</text>
+<text x="200" y="278" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="7.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">&quot;What day is it today?&quot; → Fast thinking already correct → Slow thinking still runs for 8s</text>
+<text x="580" y="258" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Issue 2: Inconsistency between fast and slow</text>
+<text x="580" y="278" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Independent thinking paths, assumptions may be completely different</text>
+<rect x="30" y="355" width="340" height="100" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="200" y="376" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Improvement: Slow thinking as &quot;advisor&quot; guiding behind the scenes</text>
+<text x="200" y="400" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="15" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Slow thinking → Agent status bar → Fast thinking</text>
+<text x="200" y="420" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">No direct conflict, but communication is indirectly vague</text>
+<rect x="410" y="355" width="340" height="100" rx="6" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<text x="580" y="376" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Still has fundamental limitations</text>
+<text x="580" y="398" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="9.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Fast thinking may misinterpret status bar hints (&quot;Confirm price&quot; →</text>
+<text x="580" y="416" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">&quot;Confirm with user&quot; instead of &quot;Recalculate&quot;)</text>
+<text x="580" y="434" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Cannot achieve natural interaction of &quot;thinking while speaking&quot;</text>
+</svg>

slides/public/images/fig9-9.svg

@@ -0,0 +1,56 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 780 400" width="780" height="400" style="background:#ffffff">
+<defs><marker id="ah" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#333333"/></marker><marker id="ah-light" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto"><polygon points="0 0, 12 4, 0 8" fill="#999999"/></marker></defs>
+
+<rect x="35" y="60" width="310" height="220" rx="6" fill="#ffffff" stroke="#333333" stroke-width="2"/>
+<text x="190" y="75" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14.5" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Simulated webpage screenshot (annotated)</text>
+<rect x="43" y="88" width="294" height="28" rx="3" fill="#e8e8e8" stroke="#333333" stroke-width="2"/>
+<rect x="47" y="92" width="180" height="20" rx="2" fill="#ffffff" stroke="#333333" stroke-width="2"/>
+<text x="53" y="102" font-family="'Courier New', Courier, monospace" font-size="10" fill="#333333" text-anchor="start" dominant-baseline="central">www.example.com</text>
+<rect x="43" y="86" width="194" height="30" rx="2" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="43" y="83" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">[1]</text>
+<rect x="55" y="126" width="80" height="30" rx="4" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="95" y="141" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="normal">Submit</text>
+<rect x="53" y="124" width="84" height="34" rx="2" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="53" y="121" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">[2]</text>
+<rect x="55" y="168" width="200" height="28" rx="3" fill="#ffffff" stroke="#333333" stroke-width="2"/>
+<rect x="55" y="168" width="200" height="28" rx="3" fill="#ffffff" stroke="#999999" stroke-width="2"/>
+<text x="65" y="182" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Enter your name...</text>
+<rect x="53" y="166" width="204" height="32" rx="2" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="53" y="163" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">[3]</text>
+<text x="65" y="218" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#666666" text-anchor="start" dominant-baseline="central" font-weight="normal">Documentation →</text>
+<rect x="53" y="206" width="160" height="22" rx="2" fill="#ffffff" stroke="#333333" stroke-width="2" stroke-dasharray="8,4"/>
+<text x="53" y="203" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central" font-weight="bold">[4]</text>
+<rect x="375" y="60" width="370" height="220" rx="4" fill="#f5f5f5" stroke="#333333" stroke-width="2"/>
+<text x="560" y="80" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="16" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Element list (text description)</text>
+<text x="385" y="100" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">[1] &lt;input type=&quot;text&quot; placeholder=</text>
+<text x="385" y="118" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">     &quot;Search&quot; aria-label=&quot;Search&quot;/&gt;</text>
+<text x="385" y="136" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">[2] &lt;button id=&quot;submit-btn&quot;</text>
+<text x="385" y="154" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">     aria-label=&quot;Submit form&quot;/&gt;</text>
+<text x="385" y="172" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">[3] &lt;input type=&quot;text&quot; placeholder=</text>
+<text x="385" y="190" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">     &quot;Enter your name&quot; value=&quot;&quot;/&gt;</text>
+<text x="385" y="208" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">[4] &lt;a href=&quot;/docs&quot;</text>
+<text x="385" y="226" font-family="'Courier New', Courier, monospace" font-size="11" fill="#333333" text-anchor="start" dominant-baseline="central">     aria-label=&quot;Documentation&quot;/&gt;</text>
+<text x="560" y="258" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Model output ID → system executes with center coordinates</text>
+<rect x="35" y="295" width="710" height="130" rx="6" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="390" y="315" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="20" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">SoM flow (browser-use implementation)</text>
+<rect x="65" y="340" width="117" height="50" rx="3" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="123" y="357" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">CDP acquisition</text>
+<text x="123" y="373" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">DOM/A11y</text>
+<line x1="184" y1="365" x2="199" y2="365" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="197" y="340" width="117" height="50" rx="3" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="255" y="357" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Interactivity</text>
+<text x="255" y="373" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Detection</text>
+<line x1="316" y1="365" x2="331" y2="365" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="329" y="340" width="117" height="50" rx="3" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="387" y="357" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Bounding box</text>
+<text x="387" y="373" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">+ID assignment</text>
+<line x1="448" y1="365" x2="463" y2="365" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="461" y="340" width="117" height="50" rx="3" fill="#d0d0d0" stroke="#333333" stroke-width="2"/>
+<text x="519" y="357" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">On screenshot</text>
+<text x="519" y="373" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="11" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Draw box annotation</text>
+<line x1="580" y1="365" x2="595" y2="365" stroke="#999999" stroke-width="2" marker-end="url(#ah-light)"/>
+<rect x="593" y="340" width="117" height="50" rx="3" fill="#f0f0f0" stroke="#333333" stroke-width="2"/>
+<text x="651" y="357" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">Text list</text>
+<text x="651" y="373" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="10" fill="#333333" text-anchor="middle" dominant-baseline="central" font-weight="bold">+Screenshot → model</text>
+<text x="390" y="407" font-family="Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="13.5" fill="#666666" text-anchor="middle" dominant-baseline="central" font-weight="normal">Applicable boundary: structured interfaces (web/Accessibility API) | Games/Canvas fall back to pure visual methods</text>
+</svg>

slides/review.mjs

@@ -0,0 +1,202 @@
+import { existsSync } from "node:fs";
+import { readFile, readdir, stat } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+
+import { lessons } from "./course.mjs";
+import { chapter1PilotFigures, chapter1PilotSlideCount } from "./chapter1-pilot.mjs";
+
+const HERE = fileURLToPath(new URL(".", import.meta.url));
+const REPO = path.resolve(HERE, "..");
+const CJK = /[\u3400-\u9fff\uf900-\ufaff]/u;
+
+function fail(message) {
+  throw new Error(message);
+}
+
+function movementFor(lesson) {
+  if (lesson.number <= 21) return "Build";
+  if (lesson.number <= 34) return "Improve";
+  return "Expand";
+}
+
+function demoMinutes(lesson) {
+  return lesson.experiments.reduce((sum, experiment) => sum + experiment.duration, 0);
+}
+
+function extensionSlideCount(lesson) {
+  return lesson.extensions.length <= 6 ? 1 : 2;
+}
+
+function isChapterStart(lesson) {
+  return !lessons.some((candidate) => candidate.chapter === lesson.chapter && candidate.number < lesson.number);
+}
+
+function slideCount(lesson) {
+  const pilotCount = chapter1PilotSlideCount(lesson.number);
+  if (pilotCount !== null) return pilotCount;
+  const compacted = demoMinutes(lesson) >= 5 ? (isChapterStart(lesson) ? 1 : 2) : 0;
+  return 15 + Math.max(0, extensionSlideCount(lesson) - 1) + (lesson.synthesis ? 1 : 0) - compacted;
+}
+
+function duration(lesson) {
+  return slideCount(lesson) + demoMinutes(lesson);
+}
+
+function splitSlides(source) {
+  const lines = source.split("\n");
+  const slides = [];
+  let index = 0;
+
+  if (lines[index] === "---") {
+    index += 1;
+    while (index < lines.length && lines[index] !== "---") index += 1;
+    index += 1;
+  }
+
+  while (index < lines.length) {
+    const body = [];
+    while (index < lines.length && lines[index] !== "---") {
+      body.push(lines[index]);
+      index += 1;
+    }
+    slides.push(body.join("\n"));
+    if (index >= lines.length) break;
+
+    index += 1;
+    if (/^(?:layout|class|transition):/.test(lines[index] || "")) {
+      while (index < lines.length && lines[index] !== "---") index += 1;
+      index += 1;
+    }
+  }
+  return slides.filter((slide) => slide.trim());
+}
+
+function visibleText(markdown) {
+  return markdown
+    .replace(/<!--[\s\S]*?-->/g, " ")
+    .replace(/~~~\w*\n?/g, " ")
+    .replace(/<[^>]+>/g, " ")
+    .replace(/&(?:amp|quot|lt|gt);/g, " ")
+    .replace(/[#*`$]/g, " ");
+}
+
+function words(text) {
+  return text.match(/[A-Za-z0-9][A-Za-z0-9+./:'’_–—-]*/g) || [];
+}
+
+function textBlocks(markdown) {
+  const blocks = [];
+  for (const match of markdown.matchAll(/<(?:p(?=[\s>])|h3(?=[\s>])|div class="course-(?:big|boundary|rule|next|terminal-watch)")[^>]*>([\s\S]*?)<\/[^>]+>/g)) {
+    blocks.push(visibleText(match[1]));
+  }
+  return blocks;
+}
+
+async function main() {
+  if (lessons.length !== 42) fail("Expected 42 lessons");
+  const deckFiles = (await readdir(HERE)).filter((name) => /^lesson-\d{2}\.md$/.test(name)).sort();
+  if (deckFiles.length !== 42) fail("Expected 42 generated deck files; found " + deckFiles.length);
+
+  const chapterStarts = new Set(lessons.filter(isChapterStart).map((lesson) => lesson.number));
+  const bookText = (await Promise.all(Array.from({ length: 10 }, (_, index) =>
+    readFile(path.join(REPO, "book-en", "chapter" + (index + 1) + ".md"), "utf8")
+  ))).join("\n");
+  const bookExperiments = [...new Set([...bookText.matchAll(/Experiment\s+(\d+-\d+)/g)].map((match) => match[1]))];
+  const courseMetadata = JSON.stringify(lessons);
+  const missingExperiments = bookExperiments.filter((id) => !courseMetadata.includes(id));
+  if (missingExperiments.length) fail("Book experiments missing from anchors/extensions: " + missingExperiments.join(", "));
+
+  let totalSlides = 0;
+  let totalCommands = 0;
+  let maxSlideWords = { count: 0, lesson: 0, slide: 0 };
+  let maxBlockWords = { count: 0, lesson: 0, slide: 0, text: "" };
+  const durationHistogram = new Map();
+
+  for (const [index, lesson] of lessons.entries()) {
+    const number = index + 1;
+    const lessonNo = String(number).padStart(2, "0");
+    if (lesson.number !== number) fail("Lesson numbering is not consecutive at " + lessonNo);
+    if (!lesson.title.endsWith("?")) fail("Lesson " + lessonNo + " title is not problem-oriented");
+    if (lesson.experiments.length < 1 || lesson.experiments.length > 3) fail("Lesson " + lessonNo + " must anchor 1–3 experiments");
+
+    const target = duration(lesson);
+    if (target < 15 || target > 20) fail("Lesson " + lessonNo + " duration is " + target + " minutes");
+    durationHistogram.set(target, (durationHistogram.get(target) || 0) + 1);
+
+    const source = await readFile(path.join(HERE, deckFiles[index]), "utf8");
+    if (CJK.test(source)) fail("Lesson " + lessonNo + " contains visible or source CJK text");
+    if ((source.match(/Switching to the terminal/g) || []).length !== 1) fail("Lesson " + lessonNo + " needs one terminal handoff");
+    const commands = (source.match(/^\$ /gm) || []).length;
+    if (commands !== lesson.experiments.length) fail("Lesson " + lessonNo + " command/experiment mismatch");
+    totalCommands += commands;
+    const pilot = chapter1PilotSlideCount(number) !== null;
+    const figureCount = (source.match(/<img /g) || []).length;
+    if (pilot && figureCount < 2) fail("Lesson " + lessonNo + " needs multiple Chapter 1 figures");
+    if (!pilot && figureCount !== 1) fail("Lesson " + lessonNo + " needs exactly one primary figure");
+    const fencedCodeCount = (source.match(/^~~~(?:python|bash|javascript|json|typescript|text)/gm) || []).length;
+    const htmlCodeCount = pilot ? (source.match(/<pre class="chapter-code-block/g) || []).length : 0;
+    if (fencedCodeCount + htmlCodeCount < 2) fail("Lesson " + lessonNo + " needs conceptual and terminal code");
+    const coursePosition = pilot
+      ? (movementFor(lesson) + " · " + lesson.chapter + " · " + lesson.part).toUpperCase()
+      : movementFor(lesson) + " · " + lesson.chapter + " · " + lesson.part;
+    if (!source.includes(coursePosition)) fail("Lesson " + lessonNo + " cover lacks course position");
+    if (!source.includes("Lesson " + lessonNo + " of 42 · " + target + " minutes")) fail("Lesson " + lessonNo + " cover timing is stale");
+
+    const mapCount = (source.match(/Problems this chapter will solve/g) || []).length;
+    const expectedMaps = !pilot && chapterStarts.has(number) && lesson.chapter !== "Introduction" ? 1 : 0;
+    if (mapCount !== expectedMaps) fail("Lesson " + lessonNo + " chapter-map mismatch");
+
+    const slides = splitSlides(source);
+    if (slides.length !== slideCount(lesson)) fail("Lesson " + lessonNo + " rendered " + slides.length + " slides; expected " + slideCount(lesson));
+    totalSlides += slides.length;
+
+    for (const [slideIndex, slide] of slides.entries()) {
+      const count = words(visibleText(slide)).length;
+      if (count > maxSlideWords.count) maxSlideWords = { count, lesson: number, slide: slideIndex + 1 };
+      const slideWordLimit = pilot ? 190 : 105;
+      const blockWordLimit = pilot ? 70 : 38;
+      if (count > slideWordLimit) fail("Lesson " + lessonNo + " slide " + (slideIndex + 1) + " is too dense at " + count + " words");
+      for (const block of textBlocks(slide)) {
+        const blockCount = words(block).length;
+        if (blockCount > maxBlockWords.count) {
+          maxBlockWords = { count: blockCount, lesson: number, slide: slideIndex + 1, text: block };
+        }
+        if (blockCount > blockWordLimit) fail("Lesson " + lessonNo + " slide " + (slideIndex + 1) + " has a paragraph-like block of " + blockCount + " words");
+      }
+    }
+
+    const figurePath = path.join(REPO, "book-en", "images", lesson.figure);
+    if (!existsSync(figurePath)) fail("Lesson " + lessonNo + " figure is missing");
+    if (CJK.test(await readFile(figurePath, "utf8"))) fail("Lesson " + lessonNo + " figure contains CJK labels");
+    for (const experiment of lesson.experiments) {
+      if (!existsSync(path.join(REPO, experiment.path))) fail("Lesson " + lessonNo + " experiment path is missing: " + experiment.path);
+    }
+    for (const [, targetPath] of lesson.extensions) {
+      if (!/^(?:https?:|#|mailto:)/.test(targetPath) && !existsSync(path.join(REPO, targetPath))) {
+        fail("Lesson " + lessonNo + " extension path is missing: " + targetPath);
+      }
+    }
+
+    const builtIndex = path.join(HERE, "dist", "lesson-" + lessonNo, "index.html");
+    if (existsSync(builtIndex)) await stat(builtIndex);
+  }
+
+  for (const figure of chapter1PilotFigures) {
+    const figurePath = path.join(REPO, "book-en", "images", figure);
+    if (!existsSync(figurePath)) fail("Chapter 1 pilot figure is missing: " + figure);
+    if (CJK.test(await readFile(figurePath, "utf8"))) fail("Chapter 1 pilot figure contains CJK labels: " + figure);
+  }
+
+  console.log(JSON.stringify({
+    lessons: lessons.length,
+    slides: totalSlides,
+    terminalCommands: totalCommands,
+    bookExperimentsCovered: bookExperiments.length,
+    durationHistogram: Object.fromEntries([...durationHistogram].sort(([a], [b]) => a - b)),
+    maxSlideWords,
+    maxTextBlockWords: maxBlockWords
+  }, null, 2));
+}
+
+await main();

slides/style.css

@@ -0,0 +1,770 @@
+:root {
+  --course-blue: #2563eb;
+  --course-green: #059669;
+  --course-orange: #ea580c;
+  --course-purple: #7c3aed;
+  --course-red: #dc2626;
+  --course-ink: #172033;
+  --course-muted: #64748b;
+  --course-paper: #f8fafc;
+}
+
+.slidev-layout {
+  padding: 2rem 2.35rem !important;
+  color: var(--course-ink);
+}
+
+.slidev-layout h1 {
+  font-size: 2.05rem !important;
+  line-height: 1.15;
+  margin-bottom: 1rem !important;
+}
+
+.slidev-layout h2 {
+  font-size: 1.55rem !important;
+  line-height: 1.2;
+}
+
+.slidev-layout h3 {
+  font-size: 1.15rem !important;
+  line-height: 1.25;
+  margin: 0 0 0.45rem !important;
+}
+
+.slidev-layout p,
+.slidev-layout li {
+  font-size: 1rem;
+  line-height: 1.4;
+}
+
+.course-subtitle {
+  max-width: 760px;
+  color: var(--course-muted);
+  font-size: 1.22rem !important;
+  line-height: 1.35 !important;
+}
+
+.course-cover-meta {
+  position: absolute;
+  left: 2.35rem;
+  bottom: 2rem;
+  max-width: 850px;
+  color: var(--course-muted);
+  font-size: 0.8rem;
+}
+
+.slidev-layout ul,
+.slidev-layout ol {
+  margin: 0.35rem 0 !important;
+}
+
+.slidev-layout li + li {
+  margin-top: 0.35rem;
+}
+
+.slidev-layout pre,
+.slidev-layout code {
+  font-size: 0.87rem !important;
+}
+
+.slidev-layout pre {
+  max-height: 410px;
+  overflow: hidden;
+}
+
+.slidev-layout table {
+  font-size: 0.9rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.slidev-layout th,
+.slidev-layout td {
+  padding: 0.45rem 0.7rem !important;
+}
+
+.course-card {
+  border: 2px solid #cbd5e1;
+  border-radius: 0.8rem;
+  padding: 1rem;
+  background: rgba(248, 250, 252, 0.92);
+}
+
+.course-card p {
+  margin: 0 !important;
+}
+
+.course-card ul {
+  padding-left: 1.15rem;
+}
+
+.course-card.blue {
+  border-color: #93c5fd;
+  background: rgba(239, 246, 255, 0.94);
+}
+
+.course-card.green {
+  border-color: #6ee7b7;
+  background: rgba(236, 253, 245, 0.94);
+}
+
+.course-card.orange {
+  border-color: #fdba74;
+  background: rgba(255, 247, 237, 0.94);
+}
+
+.course-card.purple {
+  border-color: #c4b5fd;
+  background: rgba(245, 243, 255, 0.94);
+}
+
+.course-card.red {
+  border-color: #fca5a5;
+  background: rgba(254, 242, 242, 0.94);
+}
+
+.course-kicker {
+  color: var(--course-blue);
+  font-size: 0.86rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.course-kicker-red {
+  color: var(--course-red);
+}
+
+.course-big {
+  font-size: 2.45rem;
+  font-weight: 750;
+  line-height: 1.15;
+}
+
+.course-reflection {
+  max-width: 850px;
+  margin: 0 auto;
+  font-size: 2.1rem;
+}
+
+.course-rule {
+  border-left: 6px solid var(--course-green);
+  padding: 0.85rem 1.1rem;
+  background: rgba(236, 253, 245, 0.95);
+  border-radius: 0.3rem 0.8rem 0.8rem 0.3rem;
+  font-size: 1.25rem;
+  line-height: 1.35;
+}
+
+.course-boundary {
+  border-left: 6px solid var(--course-red);
+  padding: 1rem 1.2rem;
+  background: rgba(254, 242, 242, 0.96);
+  border-radius: 0.3rem 0.8rem 0.8rem 0.3rem;
+  font-size: 1.3rem;
+  line-height: 1.4;
+}
+
+.course-demo-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.55rem;
+  color: var(--course-blue);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.course-terminal {
+  background: #0f172a;
+  color: #e2e8f0;
+}
+
+.course-terminal h1,
+.course-terminal h2,
+.course-terminal h3 {
+  color: white;
+}
+
+.course-terminal .course-kicker {
+  color: #67e8f9;
+}
+
+.course-terminal pre {
+  border: 1px solid #334155;
+  background: #020617 !important;
+  white-space: pre-wrap !important;
+  overflow-wrap: anywhere;
+}
+
+.course-terminal pre code,
+.course-terminal pre code span {
+  white-space: pre-wrap !important;
+  overflow-wrap: anywhere;
+}
+
+.course-terminal-watch {
+  max-width: 820px;
+  margin-top: 1rem;
+  color: #94a3b8;
+  font-size: 0.86rem;
+}
+
+.course-figure {
+  display: block;
+  max-height: 430px;
+  max-width: 100%;
+  width: auto;
+  margin: 0 auto;
+}
+
+.course-caption {
+  color: var(--course-muted);
+  font-size: 0.75rem;
+  text-align: center;
+  margin-top: 0.35rem;
+}
+
+.course-caption-strong {
+  color: #475569;
+  font-size: 0.82rem;
+  font-weight: 650;
+}
+
+.course-link {
+  display: flex;
+  min-height: 92px;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.35rem;
+  border: 2px solid #cbd5e1;
+  border-radius: 0.8rem;
+  padding: 0.9rem 1rem;
+  background: rgba(248, 250, 252, 0.94);
+  color: var(--course-ink) !important;
+  border-style: solid !important;
+  text-decoration: none !important;
+}
+
+.course-link:hover {
+  border-color: #60a5fa;
+  background: #eff6ff;
+}
+
+.course-link-title {
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.course-link-path {
+  overflow-wrap: anywhere;
+  color: var(--course-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.68rem;
+}
+
+.course-next {
+  max-width: 850px;
+  margin: 1.2rem auto 0;
+  font-size: 2rem;
+  font-weight: 720;
+  line-height: 1.2;
+}
+
+.course-next-arrow {
+  margin-top: 1rem;
+  color: var(--course-blue);
+  font-size: 2.2rem;
+}
+
+.course-loop {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: stretch;
+  gap: 0.65rem;
+}
+
+.course-loop-step {
+  display: flex;
+  min-height: 132px;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 0.7rem;
+  border: 2px solid #cbd5e1;
+  border-radius: 0.8rem;
+  padding: 1rem;
+  text-align: left;
+}
+
+.course-loop-step span {
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+}
+
+.course-loop-step strong {
+  font-size: 1.15rem;
+  line-height: 1.25;
+}
+
+.course-loop-step.blue {
+  border-color: #93c5fd;
+  background: #eff6ff;
+}
+
+.course-loop-step.green {
+  border-color: #6ee7b7;
+  background: #ecfdf5;
+}
+
+.course-loop-step.purple {
+  border-color: #c4b5fd;
+  background: #f5f3ff;
+}
+
+.course-loop-step.orange {
+  border-color: #fdba74;
+  background: #fff7ed;
+}
+
+.course-loop-arrow {
+  align-self: center;
+  color: var(--course-blue);
+  font-size: 1.7rem;
+}
+
+.course-loop-return {
+  margin-top: 1.4rem;
+  color: #475569;
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.slidev-layout.section h1::after {
+  content: "";
+  display: block;
+  width: 88px;
+  height: 3px;
+  margin: 0.55em auto 0;
+  border-radius: 2px;
+  background: #6b95a3;
+}
+
+.slidev-layout.cover {
+  background:
+    radial-gradient(circle at 85% 15%, rgba(37, 99, 235, 0.15), transparent 32%),
+    radial-gradient(circle at 10% 90%, rgba(5, 150, 105, 0.11), transparent 30%),
+    white !important;
+  color: var(--course-ink) !important;
+}
+
+.slidev-layout.cover h1 {
+  color: var(--course-ink) !important;
+}
+
+.slidev-layout.cover .course-subtitle,
+.slidev-layout.cover .course-cover-meta {
+  color: var(--course-muted) !important;
+}
+
+.dark .slidev-layout,
+.slidev-layout.dark {
+  color: #e2e8f0;
+}
+
+#slidev-goto-dialog {
+  display: none !important;
+}
+
+/* Chapter 1 dense pilots: scoped so Lessons 01 and 04–42 retain their current design. */
+.slidev-layout.chapter-dense {
+  padding: 1.45rem 1.8rem !important;
+}
+
+.slidev-layout.chapter-dense h1,
+.slidev-layout.chapter-terminal h1 {
+  font-size: 1.72rem !important;
+  margin-bottom: 0.55rem !important;
+}
+
+.slidev-layout.chapter-dense h3 {
+  font-size: 0.94rem !important;
+  margin-bottom: 0.28rem !important;
+}
+
+.slidev-layout.chapter-dense p,
+.slidev-layout.chapter-dense li {
+  font-size: 0.76rem;
+  line-height: 1.28;
+}
+
+.slidev-layout.chapter-dense li + li {
+  margin-top: 0.2rem;
+}
+
+.slidev-layout.chapter-dense pre,
+.slidev-layout.chapter-dense code,
+.slidev-layout.chapter-terminal pre,
+.slidev-layout.chapter-terminal code {
+  font-size: 0.67rem !important;
+  line-height: 1.32 !important;
+}
+
+.slidev-layout.chapter-formula-cover {
+  padding: 2rem 2.55rem !important;
+  background:
+    radial-gradient(circle at 88% 12%, rgba(37, 99, 235, 0.17), transparent 32%),
+    radial-gradient(circle at 7% 92%, rgba(5, 150, 105, 0.13), transparent 34%),
+    linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
+  color: var(--course-ink) !important;
+}
+
+.slidev-layout.chapter-formula-cover h1 {
+  max-width: 900px;
+  color: var(--course-ink) !important;
+  font-size: 2.48rem !important;
+  letter-spacing: -0.035em;
+  margin: 0.65rem 0 0 !important;
+}
+
+.chapter-kicker {
+  color: var(--course-blue);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+}
+
+.chapter-cover-footer {
+  position: absolute;
+  left: 2.55rem;
+  right: 2.55rem;
+  bottom: 1.55rem;
+  display: flex;
+  justify-content: space-between;
+  color: var(--course-muted);
+  font-size: 0.68rem;
+}
+
+.chapter-equation,
+.chapter-context-equation {
+  display: flex;
+  align-items: stretch;
+  gap: 0.8rem;
+}
+
+.chapter-equation-term,
+.chapter-context-group {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  border: 2px solid #cbd5e1;
+  border-radius: 0.8rem;
+  padding: 0.8rem 1rem;
+  background: rgba(255, 255, 255, 0.86);
+}
+
+.chapter-equation-term strong,
+.chapter-context-group strong {
+  font-size: 1.42rem;
+  line-height: 1.1;
+}
+
+.chapter-equation-term span,
+.chapter-context-group span {
+  margin-top: 0.28rem;
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+.chapter-equation-term small,
+.chapter-context-group small {
+  margin-top: 0.18rem;
+  color: var(--course-muted);
+  font-size: 0.65rem;
+}
+
+.chapter-equation-term.blue,
+.chapter-context-group.blue { border-color: #60a5fa; background: #eff6ff; }
+.chapter-equation-term.green,
+.chapter-context-group.green { border-color: #34d399; background: #ecfdf5; }
+.chapter-equation-term.orange { border-color: #fb923c; background: #fff7ed; }
+
+.chapter-equation-sign {
+  align-self: center;
+  color: #64748b;
+  font-size: 1.7rem;
+  font-weight: 300;
+}
+
+.chapter-cover-thesis {
+  margin-top: 0.85rem;
+  border-left: 4px solid var(--course-blue);
+  padding: 0.45rem 0.7rem;
+  color: #334155;
+  background: rgba(255, 255, 255, 0.65);
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+
+.chapter-lead {
+  max-width: 900px;
+  color: #334155;
+  font-size: 0.87rem;
+  line-height: 1.32;
+}
+
+.chapter-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  overflow: hidden;
+  border: 1px solid #cbd5e1;
+  border-radius: 0.55rem;
+  background: rgba(255, 255, 255, 0.9);
+  font-size: 0.67rem !important;
+  line-height: 1.2;
+}
+
+.chapter-table th {
+  color: #f8fafc;
+  border: 0;
+  background: #334155;
+  font-weight: 700;
+  text-align: left;
+}
+
+.chapter-table td {
+  border-top: 1px solid #e2e8f0;
+  vertical-align: top;
+}
+
+.chapter-table th,
+.chapter-table td {
+  padding: 0.34rem 0.45rem !important;
+}
+
+.chapter-table tbody tr:nth-child(even) td { background: #f8fafc; }
+.chapter-table-roomy th,
+.chapter-table-roomy td { padding: 0.48rem 0.55rem !important; }
+.chapter-table-compact th,
+.chapter-table-compact td { padding: 0.3rem 0.42rem !important; }
+
+.chapter-panel,
+.chapter-callout,
+.chapter-mini {
+  border: 1.5px solid #cbd5e1;
+  border-radius: 0.62rem;
+  background: rgba(248, 250, 252, 0.94);
+}
+
+.chapter-panel { padding: 0.68rem 0.78rem; }
+.chapter-panel ul { padding-left: 1rem; }
+.chapter-panel p { margin: 0 !important; }
+.chapter-panel.blue,
+.chapter-callout.blue,
+.chapter-mini.blue { border-color: #93c5fd; background: #eff6ff; }
+.chapter-panel.green,
+.chapter-callout.green,
+.chapter-mini.green { border-color: #6ee7b7; background: #ecfdf5; }
+.chapter-panel.orange,
+.chapter-callout.orange,
+.chapter-mini.orange { border-color: #fdba74; background: #fff7ed; }
+.chapter-panel.purple,
+.chapter-callout.purple,
+.chapter-mini.purple { border-color: #c4b5fd; background: #f5f3ff; }
+.chapter-panel.red,
+.chapter-callout.red,
+.chapter-mini.red { border-color: #fca5a5; background: #fef2f2; }
+
+.chapter-callout {
+  padding: 0.48rem 0.65rem;
+  font-size: 0.72rem;
+  line-height: 1.28;
+}
+
+.chapter-conclusion,
+.chapter-example {
+  margin-top: 0.55rem !important;
+  padding-top: 0.45rem;
+  border-top: 1px solid rgba(100, 116, 139, 0.25);
+  color: #475569;
+  font-size: 0.71rem !important;
+  line-height: 1.28 !important;
+}
+
+.chapter-interface {
+  display: grid;
+  grid-template-columns: 1.1fr 0.8fr 1fr 0.8fr 1.1fr;
+  align-items: stretch;
+  gap: 0.55rem;
+}
+
+.chapter-interface-world,
+.chapter-interface-model {
+  display: flex;
+  min-height: 96px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #93c5fd;
+  border-radius: 0.7rem;
+  background: #eff6ff;
+  text-align: center;
+}
+
+.chapter-interface-model { border-color: #c4b5fd; background: #f5f3ff; }
+.chapter-interface-world strong,
+.chapter-interface-model strong { font-size: 0.92rem; }
+.chapter-interface-world span,
+.chapter-interface-model span { margin-top: 0.3rem; color: #64748b; font-size: 0.66rem; }
+.chapter-interface-arrow { align-self: center; color: var(--course-blue); font-size: 1.25rem; text-align: center; }
+.chapter-interface-arrow span { display: block; margin-bottom: 0.25rem; color: #475569; font-size: 0.62rem; font-weight: 700; }
+
+.chapter-five-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.7rem;
+}
+
+.chapter-five-grid .chapter-panel:nth-child(4),
+.chapter-five-grid .chapter-panel:nth-child(5) { grid-column: span 1; }
+
+.chapter-mini {
+  display: flex;
+  min-height: 62px;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0.5rem 0.6rem;
+}
+
+.chapter-mini strong { font-size: 0.74rem; }
+.chapter-mini span { margin-top: 0.22rem; color: #475569; font-size: 0.65rem; line-height: 1.22; }
+
+.chapter-code-grid pre { margin: 0.22rem 0 0 !important; }
+.chapter-code-block {
+  min-height: 92px;
+  margin: 0.22rem 0 0 !important;
+  border: 1px solid #334155;
+  border-radius: 0.45rem;
+  padding: 0.55rem 0.65rem !important;
+  background: #0f172a !important;
+  color: #e2e8f0 !important;
+  white-space: pre-wrap;
+}
+.chapter-code-block.tall { min-height: 245px; }
+.chapter-code-block code { color: inherit !important; white-space: pre-wrap !important; }
+.chapter-step-label { color: #475569; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
+.chapter-tag { display: inline-block; margin-top: 0.55rem; border-radius: 99px; padding: 0.22rem 0.5rem; font-size: 0.61rem; font-weight: 800; }
+.chapter-tag.green { color: #047857; background: #d1fae5; }
+.chapter-tag.orange { color: #c2410c; background: #ffedd5; }
+.chapter-muted { color: #94a3b8; font-size: 0.62rem; font-weight: 400; }
+
+.chapter-figure-large,
+.chapter-figure-medium,
+.chapter-figure-wide {
+  display: block;
+  max-width: 100%;
+  width: auto;
+  margin: 0 auto;
+}
+
+.chapter-figure-large { max-height: 305px; }
+.chapter-figure-medium { max-height: 275px; }
+.chapter-figure-wide { max-height: 260px; }
+.chapter-stack { display: flex; flex-direction: column; gap: 0.55rem; }
+
+.chapter-thesis-line,
+.chapter-thesis-box {
+  border-left: 4px solid var(--course-blue);
+  padding: 0.5rem 0.68rem;
+  background: #f8fafc;
+  color: #334155;
+  font-size: 0.76rem;
+  font-weight: 700;
+  line-height: 1.28;
+}
+
+.chapter-thesis-box {
+  border: 2px solid #60a5fa;
+  border-radius: 0.65rem;
+  background: #eff6ff;
+  font-size: 0.88rem;
+  text-align: center;
+}
+
+.chapter-tight-list { padding-left: 1rem; }
+.chapter-small { font-size: 0.71rem !important; line-height: 1.28 !important; }
+.chapter-source { margin-top: 0.5rem; color: #64748b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.59rem; }
+
+.chapter-metrics {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.7rem;
+}
+
+.chapter-metrics > div {
+  display: flex;
+  min-height: 72px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1.5px solid #93c5fd;
+  border-radius: 0.65rem;
+  background: #eff6ff;
+}
+
+.chapter-metrics strong { color: #1d4ed8; font-size: 1.35rem; line-height: 1; }
+.chapter-metrics span { margin-top: 0.25rem; color: #475569; font-size: 0.63rem; }
+
+.chapter-links a {
+  display: flex;
+  min-height: 48px;
+  flex-direction: column;
+  justify-content: center;
+  border: 1.5px solid #cbd5e1 !important;
+  border-radius: 0.55rem;
+  padding: 0.45rem 0.65rem;
+  background: #fff;
+  color: var(--course-ink) !important;
+  text-decoration: none !important;
+}
+
+.chapter-links strong { font-size: 0.7rem; }
+.chapter-links span { margin-top: 0.12rem; color: #64748b; font-size: 0.59rem; }
+
+.slidev-layout.chapter-terminal { padding: 1.55rem 1.9rem !important; }
+.slidev-layout.chapter-terminal pre { max-height: 235px; margin-top: 0.6rem !important; }
+.chapter-terminal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
+.chapter-terminal-grid > div { display: flex; flex-direction: column; border: 1px solid #334155; border-radius: 0.55rem; padding: 0.55rem 0.65rem; background: #111c31; }
+.chapter-terminal-grid strong { color: #67e8f9; font-size: 0.7rem; }
+.chapter-terminal-grid span { margin-top: 0.2rem; color: #cbd5e1; font-size: 0.62rem; line-height: 1.24; }
+
+.chapter-prefix-flow {
+  display: grid;
+  grid-template-columns: 1fr auto 1.7fr auto 1fr;
+  align-items: stretch;
+  gap: 0.6rem;
+}
+
+.chapter-prefix-block {
+  display: flex;
+  min-height: 118px;
+  flex-direction: column;
+  justify-content: center;
+  border: 2px solid #93c5fd;
+  border-radius: 0.7rem;
+  padding: 0.65rem 0.75rem;
+  background: #eff6ff;
+}
+
+.chapter-prefix-block.green { border-color: #6ee7b7; background: #ecfdf5; }
+.chapter-prefix-block.purple { border-color: #c4b5fd; background: #f5f3ff; }
+.chapter-prefix-block strong { font-size: 0.84rem; }
+.chapter-prefix-block span { margin-top: 0.2rem; font-size: 0.66rem; }
+.chapter-prefix-block small { margin-top: 0.35rem; color: #64748b; font-size: 0.58rem; }
+.chapter-plus,
+.chapter-equals { align-self: center; color: #64748b; font-size: 1.4rem; }