@baimingtao/lbs-agent 1.0.0

package/extensions/skills/optional/creative/concept-diagrams/examples/automated-password-reset-flow.md

@@ -0,0 +1,276 @@
+# Automated Password Reset Flow
+
+A two-section flowchart tracing the full user journey for a web application password reset: the initial request phase (forgot password → email check → token generation) and the reset-form phase (link click → new password entry → token/password validation). Demonstrates multi-exit decision diamonds, a three-column branching layout, a loop-back path, and a cross-section separator arrow.
+
+## Key Patterns Used
+
+- **Three-column layout**: Left column (error/terminal branches at cx=115), center column (main happy path at cx=340), right column (expired-token branch at cx=552) — allows side branches to live at the same y-level as center nodes without overlap
+- **Decision diamonds with `<polygon>`**: Each decision uses a `<g class="decision">` wrapper containing a `<polygon>` and centered `<text>`; the diamond points are computed as `cx±hw, cy±hh` (hw=100, hh=28)
+- **Pill-shaped terminals**: Start and end nodes use `rx=22` on their `<rect>` to signal entry/exit points; all mid-flow process nodes use `rx=8`
+- **Three-branch decision paths**: Each diamond has a "Yes" branch (down, short `<line>`) and a "No" branch (`<path>` going horizontal then vertical to a side column)
+- **Loop-back path**: Mismatch error node loops back to the password-entry node via a routing corridor at x=215 — a 5-px gap between the left column (right edge x=210) and center column (left edge x=220); the path exits the bottom of the error node, drops below it, travels right to x=215, then goes up to the target node's center y, then right 5 px into the node's left edge
+- **Section separator**: A dashed horizontal `<line>` at y=452 splits the two phases; the connecting arrow crosses it with a faded label ("user receives email") to preserve flow continuity
+- **Italic annotation**: The exact UX copy for the generic message ("If that email exists…") is shown as a faded italic `ts` text block below the left-branch terminal node
+- **Legend row**: Five inline swatches (gray, purple, teal, red, amber diamond) at the bottom explain the color-to-role mapping
+
+## Diagram
+
+```xml
+<svg width="100%" viewBox="0 0 680 960" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
+            markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+      <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
+            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </marker>
+  </defs>
+
+  <!--
+    Column layout (680px viewBox, safe area x=40–640):
+      Left  col : x=20,  w=190, cx=115  (error / terminal branches)
+      Center col: x=220, w=240, cx=340  (main happy path)
+      Right  col: x=465, w=175, cx=552  (expired-token branch)
+      Loop corridor at x=215 (5-px gap between left and center cols)
+  -->
+
+  <!-- ═══ SECTION 1 — Forgot password request ═══ -->
+  <text class="ts" x="40" y="38" opacity=".45">Section 1 — Forgot password request</text>
+
+  <!-- START terminal (pill rx=22 signals start/end) -->
+  <g class="c-gray">
+    <rect x="220" y="46" width="240" height="44" rx="22"/>
+    <text class="th" x="340" y="68" text-anchor="middle" dominant-baseline="central">User: &quot;Forgot password&quot;</text>
+  </g>
+
+  <line x1="340" y1="90" x2="340" y2="108" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- N2 · Enter email -->
+  <g class="c-gray">
+    <rect x="220" y="108" width="240" height="44" rx="8"/>
+    <text class="th" x="340" y="130" text-anchor="middle" dominant-baseline="central">Enter email address</text>
+  </g>
+
+  <line x1="340" y1="152" x2="340" y2="172" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- D1 · Email in system?  diamond: center=(340,200) hw=100 hh=28 -->
+  <g class="decision">
+    <polygon points="340,172 440,200 340,228 240,200"/>
+    <text class="th" x="340" y="200" text-anchor="middle" dominant-baseline="central">Email in system?</text>
+  </g>
+
+  <!-- D1 "No" → left column -->
+  <path d="M 240,200 L 115,200 L 115,248" class="arr" marker-end="url(#arrow)"/>
+  <text class="ts" x="178" y="193" text-anchor="middle" opacity=".75">No</text>
+
+  <!-- D1 "Yes" → continue down -->
+  <line x1="340" y1="228" x2="340" y2="248" class="arr" marker-end="url(#arrow)"/>
+  <text class="ts" x="348" y="242" text-anchor="start" opacity=".75">Yes</text>
+
+  <!-- ── Left branch (D1 = No): generic security message → end ── -->
+
+  <!-- L1 · Generic message (security: never confirm email existence) -->
+  <g class="c-gray">
+    <rect x="20" y="248" width="190" height="56" rx="8"/>
+    <text class="th" x="115" y="269" text-anchor="middle" dominant-baseline="central">Generic message shown</text>
+    <text class="ts" x="115" y="287" text-anchor="middle" dominant-baseline="central">Email sent if found</text>
+  </g>
+
+  <line x1="115" y1="304" x2="115" y2="324" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- L2 · End terminal (left) -->
+  <g class="c-gray">
+    <rect x="20" y="324" width="190" height="44" rx="22"/>
+    <text class="th" x="115" y="346" text-anchor="middle" dominant-baseline="central">Request handled</text>
+  </g>
+
+  <!-- Italic annotation: actual UX copy shown below the end node -->
+  <text class="ts" x="20" y="384" opacity=".45" font-style="italic">&quot;If that email exists, a reset</text>
+  <text class="ts" x="20" y="398" opacity=".45" font-style="italic">link has been sent.&quot;</text>
+
+  <!-- ── Center Yes branch: system generates & sends token ── -->
+
+  <!-- N3 · Generate unique token -->
+  <g class="c-purple">
+    <rect x="220" y="248" width="240" height="56" rx="8"/>
+    <text class="th" x="340" y="269" text-anchor="middle" dominant-baseline="central">Generate unique token</text>
+    <text class="ts" x="340" y="287" text-anchor="middle" dominant-baseline="central">Time-limited, cryptographic</text>
+  </g>
+
+  <line x1="340" y1="304" x2="340" y2="324" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- N4 · Store token + user ID -->
+  <g class="c-purple">
+    <rect x="220" y="324" width="240" height="44" rx="8"/>
+    <text class="th" x="340" y="346" text-anchor="middle" dominant-baseline="central">Store token + user ID</text>
+  </g>
+
+  <line x1="340" y1="368" x2="340" y2="388" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- N5 · Send reset email -->
+  <g class="c-teal">
+    <rect x="220" y="388" width="240" height="44" rx="8"/>
+    <text class="th" x="340" y="410" text-anchor="middle" dominant-baseline="central">Send reset link via email</text>
+  </g>
+
+  <!-- ═══ Section separator ═══ -->
+  <line x1="40" y1="452" x2="640" y2="452"
+        stroke="var(--border)" stroke-width="1" stroke-dasharray="8 5"/>
+
+  <!-- Arrow crossing separator (with inline label) -->
+  <line x1="340" y1="432" x2="340" y2="472" class="arr" marker-end="url(#arrow)"/>
+  <text class="ts" x="348" y="448" text-anchor="start" opacity=".55">user receives email</text>
+
+  <text class="ts" x="40" y="464" opacity=".45">Section 2 — Password reset form</text>
+
+  <!-- ═══ SECTION 2 — Password reset form ═══ -->
+
+  <!-- N6 · User clicks reset link -->
+  <g class="c-gray">
+    <rect x="220" y="480" width="240" height="44" rx="8"/>
+    <text class="th" x="340" y="502" text-anchor="middle" dominant-baseline="central">User clicks reset link</text>
+  </g>
+
+  <line x1="340" y1="524" x2="340" y2="544" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- N7 · Enter new password ×2 -->
+  <g class="c-gray">
+    <rect x="220" y="544" width="240" height="56" rx="8"/>
+    <text class="th" x="340" y="565" text-anchor="middle" dominant-baseline="central">Enter new password ×2</text>
+    <text class="ts" x="340" y="583" text-anchor="middle" dominant-baseline="central">Confirm both passwords match</text>
+  </g>
+
+  <line x1="340" y1="600" x2="340" y2="620" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- D2 · Token expired?  diamond: center=(340,648) hw=100 hh=28 -->
+  <g class="decision">
+    <polygon points="340,620 440,648 340,676 240,648"/>
+    <text class="th" x="340" y="648" text-anchor="middle" dominant-baseline="central">Token expired?</text>
+  </g>
+
+  <!-- D2 "Yes" → right column (expired-token branch) -->
+  <path d="M 440,648 L 552,648 L 552,692" class="arr" marker-end="url(#arrow)"/>
+  <text class="ts" x="496" y="641" text-anchor="middle" opacity=".75">Yes</text>
+
+  <!-- D2 "No" → down to password-match check -->
+  <line x1="340" y1="676" x2="340" y2="714" class="arr" marker-end="url(#arrow)"/>
+  <text class="ts" x="348" y="698" text-anchor="start" opacity=".75">No</text>
+
+  <!-- ── Right branch (D2 = Yes): token expired → dead end ── -->
+
+  <!-- R1 · Token expired error -->
+  <g class="c-red">
+    <rect x="465" y="692" width="175" height="56" rx="8"/>
+    <text class="th" x="552" y="713" text-anchor="middle" dominant-baseline="central">Token expired</text>
+    <text class="ts" x="552" y="731" text-anchor="middle" dominant-baseline="central">Show expiry error</text>
+  </g>
+
+  <line x1="552" y1="748" x2="552" y2="768" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- R2 · End terminal (right) -->
+  <g class="c-gray">
+    <rect x="465" y="768" width="175" height="44" rx="22"/>
+    <text class="th" x="552" y="790" text-anchor="middle" dominant-baseline="central">End — request again</text>
+  </g>
+
+  <!-- D3 · Passwords match?  diamond: center=(340,742) hw=100 hh=28 -->
+  <g class="decision">
+    <polygon points="340,714 440,742 340,770 240,742"/>
+    <text class="th" x="340" y="742" text-anchor="middle" dominant-baseline="central">Passwords match?</text>
+  </g>
+
+  <!-- D3 "No" → left column (mismatch branch) -->
+  <path d="M 240,742 L 115,742 L 115,786" class="arr" marker-end="url(#arrow)"/>
+  <text class="ts" x="178" y="735" text-anchor="middle" opacity=".75">No</text>
+
+  <!-- D3 "Yes" → down to reset -->
+  <line x1="340" y1="770" x2="340" y2="790" class="arr" marker-end="url(#arrow)"/>
+  <text class="ts" x="348" y="783" text-anchor="start" opacity=".75">Yes</text>
+
+  <!-- ── Left branch (D3 = No): passwords don't match → loop back ── -->
+
+  <!-- L3 · Password mismatch error -->
+  <g class="c-red">
+    <rect x="20" y="786" width="190" height="56" rx="8"/>
+    <text class="th" x="115" y="807" text-anchor="middle" dominant-baseline="central">Password mismatch</text>
+    <text class="ts" x="115" y="825" text-anchor="middle" dominant-baseline="central">Passwords do not match</text>
+  </g>
+
+  <!-- Loop-back arrow: exits L3 bottom → drops to y=862 →
+       travels right to corridor x=215 → climbs to N7 center y=572 →
+       enters N7 left edge at (220, 572) pointing right -->
+  <path d="M 115,842 L 115,862 L 215,862 L 215,572 L 220,572"
+        class="arr" marker-end="url(#arrow)"/>
+  <text class="ts" x="224" y="538" text-anchor="start" opacity=".6">retry</text>
+
+  <!-- ── Center Yes branch (D3 = Yes): reset password & invalidate token ── -->
+
+  <!-- N8 · Reset password -->
+  <g class="c-teal">
+    <rect x="220" y="790" width="240" height="56" rx="8"/>
+    <text class="th" x="340" y="811" text-anchor="middle" dominant-baseline="central">Reset password</text>
+    <text class="ts" x="340" y="829" text-anchor="middle" dominant-baseline="central">Invalidate used token</text>
+  </g>
+
+  <line x1="340" y1="846" x2="340" y2="866" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- N9 · Success terminal -->
+  <g class="c-green">
+    <rect x="220" y="866" width="240" height="44" rx="22"/>
+    <text class="th" x="340" y="888" text-anchor="middle" dominant-baseline="central">Password reset complete</text>
+  </g>
+
+  <!-- ═══ Legend ═══ -->
+  <text class="ts" x="40" y="930" opacity=".4">Legend —</text>
+  <rect x="108" y="920" width="13" height="13" rx="2" fill="#F1EFE8" stroke="#5F5E5A" stroke-width="0.5"/>
+  <text class="ts" x="126" y="930" opacity=".7">User action</text>
+  <rect x="210" y="920" width="13" height="13" rx="2" fill="#EEEDFE" stroke="#534AB7" stroke-width="0.5"/>
+  <text class="ts" x="228" y="930" opacity=".7">System process</text>
+  <rect x="334" y="920" width="13" height="13" rx="2" fill="#E1F5EE" stroke="#0F6E56" stroke-width="0.5"/>
+  <text class="ts" x="352" y="930" opacity=".7">Email / success</text>
+  <rect x="455" y="920" width="13" height="13" rx="2" fill="#FCEBEB" stroke="#A32D2D" stroke-width="0.5"/>
+  <text class="ts" x="473" y="930" opacity=".7">Error state</text>
+  <polygon points="556,926 566,932 556,938 546,932" fill="#FAEEDA" stroke="#854F0B" stroke-width="0.5"/>
+  <text class="ts" x="572" y="932" opacity=".7">Decision</text>
+
+</svg>
+```
+
+## Custom CSS
+
+Add these classes to the hosting page `<style>` block (in addition to the standard skill CSS):
+
+```css
+/* Decision diamond — amber fill, same palette as c-amber */
+.decision > polygon { fill: #FAEEDA; stroke: #854F0B; stroke-width: 0.5; }
+.decision > .th     { fill: #633806; }
+
+@media (prefers-color-scheme: dark) {
+  .decision > polygon { fill: #633806; stroke: #EF9F27; }
+  .decision > .th     { fill: #FAC775; }
+}
+```
+
+## Color Assignments
+
+| Element | Color | Reason |
+|---------|-------|--------|
+| Start / end terminals | `c-gray` | Neutral entry and exit points |
+| User actions (enter email, click link, enter password) | `c-gray` | User-facing steps with no system processing |
+| Generic message + request-handled terminal | `c-gray` | Intentionally neutral — the security message must not reveal data |
+| Generate & store token | `c-purple` | Backend system operations |
+| Send reset email | `c-teal` | Positive external action (outbound communication) |
+| Token expired error | `c-red` | Failure / blocking error state |
+| Password mismatch error | `c-red` | Validation failure |
+| Reset password + success | `c-teal` / `c-green` | Positive outcome: teal for the action, green pill for the terminal |
+| Decision diamonds | `c-amber` (custom `.decision`) | Warning / branch point — matches amber semantic meaning |
+
+## 布局 说明
+
+- **ViewBox**: 680×960 — tall flowchart with two phases
+- **Three-column structure**: Left (cx=115), center (cx=340), right (cx=552) — each branch stays within its column; only `<path>` arrows cross column boundaries
+- **Diamond formula**: `<polygon points="cx,cy-hh cx+hw,cy cx,cy+hh cx-hw,cy"/>` with hw=100, hh=28 gives a 200×56px diamond that sits flush with the center column (x=220–460)
+- **Branch routing pattern**: "No" paths use `<path d="M left_point,cy L side_cx,cy L side_cx,node_top">` — one horizontal segment + one vertical segment, no curves needed
+- **Loop corridor**: The 5-px gap at x=210–220 between left and center columns provides a clean vertical channel for the loop-back path without any node overlap; the path exits node bottom, drops 20px, goes right to x=215, climbs to target y, enters from left
+- **Section separator**: A dashed `<line>` at y=452 with `stroke-dasharray="8 5"` provides a visual phase break; the single connecting arrow crosses it at center, with a faded label on the arrow
+- **Pill terminals**: `rx=22` (half the 44px node height) produces a perfect capsule/pill shape — use this consistently for all start/end terminals
+- **Error annotation**: The exact UX copy is rendered as faded (`opacity=".45"`) italic `ts` text below the relevant node, keeping it informative without cluttering the flow

package/extensions/skills/optional/creative/concept-diagrams/examples/autonomous-llm-research-agent-flow.md

@@ -0,0 +1,240 @@
+# Autonomous LLM Research Agent Flow
+
+A multi-section flowchart showing Karpathy's autoresearch framework: human-agent handoff, the autonomous experiment loop with keep/discard decision branching, and the modifiable training pipeline. Demonstrates loop-back arrows, convergent decision paths, and semantic color coding for outcomes.
+
+## Key Patterns Used
+
+- **Three-section layout**: Setup row, main loop container, and detail container — each visually distinct
+- **Neutral dashed containers**: Loop and training pipeline use `var(--bg-secondary)` fill with dashed borders to recede behind colored content nodes
+- **Decision branching with convergence**: "val_bpb improved?" splits into Keep (green) and Discard (red), then both converge back to "Log to results.tsv"
+- **Loop-back arrow**: Dashed path with rounded corners on the right side of the container showing infinite repetition
+- **Semantic color for outcomes**: Green = improvement (keep), Red = no improvement (discard) — not arbitrary decoration
+- **Highlighted key step**: "Run training" uses `c-coral` to visually distinguish the most important step from other `c-teal` actions
+- **Horizontal pipeline flow**: Training details section uses left-to-right arrow-connected nodes (GPT → MuonAdamW → Evaluation)
+- **Footer metadata**: Fixed constraints shown as subtle centered text below the pipeline nodes
+- **Legend row**: Color key at the bottom explaining what each color means
+
+## Diagram
+
+```xml
+<svg width="100%" viewBox="0 0 680 920" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
+            markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+      <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
+            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </marker>
+  </defs>
+
+  <!-- ========================================== -->
+  <!-- SECTION 1: SETUP (Human → program.md → AI) -->
+  <!-- ========================================== -->
+
+  <text class="ts" x="40" y="30" text-anchor="start" opacity=".5">One-time setup</text>
+
+  <!-- Human -->
+  <g class="node c-gray">
+    <rect x="60" y="42" width="140" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="130" y="62" text-anchor="middle" dominant-baseline="central">Human</text>
+    <text class="ts" x="130" y="82" text-anchor="middle" dominant-baseline="central">Researcher</text>
+  </g>
+
+  <!-- Arrow: Human → program.md -->
+  <line x1="200" y1="70" x2="250" y2="70" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- program.md -->
+  <g class="node c-gray">
+    <rect x="250" y="42" width="180" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="340" y="62" text-anchor="middle" dominant-baseline="central">program.md</text>
+    <text class="ts" x="340" y="82" text-anchor="middle" dominant-baseline="central">Agent instructions</text>
+  </g>
+
+  <!-- Arrow: program.md → AI Agent -->
+  <line x1="430" y1="70" x2="470" y2="70" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- AI Agent -->
+  <g class="node c-purple">
+    <rect x="470" y="42" width="160" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="550" y="62" text-anchor="middle" dominant-baseline="central">AI agent</text>
+    <text class="ts" x="550" y="82" text-anchor="middle" dominant-baseline="central">Claude / Codex</text>
+  </g>
+
+  <!-- Arrow: Setup row → Loop (from program.md center down) -->
+  <line x1="340" y1="98" x2="340" y2="142" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- ========================================== -->
+  <!-- SECTION 2: AUTONOMOUS EXPERIMENT LOOP      -->
+  <!-- ========================================== -->
+
+  <!-- Loop container (neutral dashed) -->
+  <g>
+    <rect x="40" y="142" width="600" height="528" rx="16"
+          stroke-width="1" stroke-dasharray="6 4"
+          fill="var(--bg-secondary)" stroke="var(--border)"/>
+    <text class="th" x="66" y="170">Autonomous experiment loop</text>
+    <text class="ts" x="66" y="188">~12 experiments/hour — runs until manually stopped</text>
+  </g>
+
+  <!-- Step 1: Read code + past results -->
+  <g class="node c-teal">
+    <rect x="170" y="208" width="280" height="44" rx="8" stroke-width="0.5"/>
+    <text class="th" x="310" y="230" text-anchor="middle" dominant-baseline="central">Read code + past results</text>
+  </g>
+
+  <!-- Arrow: S1 → S2 -->
+  <line x1="310" y1="252" x2="310" y2="274" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- Step 2: Propose + edit train.py -->
+  <g class="node c-teal">
+    <rect x="170" y="274" width="280" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="310" y="294" text-anchor="middle" dominant-baseline="central">Propose + edit train.py</text>
+    <text class="ts" x="310" y="314" text-anchor="middle" dominant-baseline="central">Arch, optimizer, hyperparameters</text>
+  </g>
+
+  <!-- Arrow: S2 → S3 -->
+  <line x1="310" y1="330" x2="310" y2="352" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- Step 3: Run training (highlighted — key step) -->
+  <g class="node c-coral">
+    <rect x="170" y="352" width="280" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="310" y="372" text-anchor="middle" dominant-baseline="central">Run training</text>
+    <text class="ts" x="310" y="392" text-anchor="middle" dominant-baseline="central">uv run train.py (5 min budget)</text>
+  </g>
+
+  <!-- Arrow: S3 → S4 -->
+  <line x1="310" y1="408" x2="310" y2="430" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- Step 4: Decision — val_bpb improved? -->
+  <g class="node c-gray">
+    <rect x="170" y="430" width="280" height="44" rx="8" stroke-width="0.5"/>
+    <text class="th" x="310" y="452" text-anchor="middle" dominant-baseline="central">val_bpb improved?</text>
+  </g>
+
+  <!-- Decision arrows to Keep / Discard -->
+  <line x1="240" y1="474" x2="175" y2="508" class="arr" marker-end="url(#arrow)"/>
+  <line x1="380" y1="474" x2="445" y2="508" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- Decision labels -->
+  <text class="ts" x="195" y="496" opacity=".6">yes</text>
+  <text class="ts" x="416" y="496" opacity=".6">no</text>
+
+  <!-- Keep — advance branch -->
+  <g class="node c-green">
+    <rect x="70" y="508" width="210" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="175" y="528" text-anchor="middle" dominant-baseline="central">Keep</text>
+    <text class="ts" x="175" y="548" text-anchor="middle" dominant-baseline="central">Advance git branch</text>
+  </g>
+
+  <!-- Discard — git reset -->
+  <g class="node c-red">
+    <rect x="340" y="508" width="210" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="445" y="528" text-anchor="middle" dominant-baseline="central">Discard</text>
+    <text class="ts" x="445" y="548" text-anchor="middle" dominant-baseline="central">Git reset to previous</text>
+  </g>
+
+  <!-- Converge arrows: Keep → Log, Discard → Log -->
+  <line x1="175" y1="564" x2="250" y2="590" class="arr" marker-end="url(#arrow)"/>
+  <line x1="445" y1="564" x2="370" y2="590" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- Step 6: Log to results.tsv -->
+  <g class="node c-teal">
+    <rect x="170" y="590" width="280" height="44" rx="8" stroke-width="0.5"/>
+    <text class="th" x="310" y="612" text-anchor="middle" dominant-baseline="central">Log to results.tsv</text>
+  </g>
+
+  <!-- Loop-back arrow (dashed, right side) -->
+  <path d="M 450 612 L 564 612 Q 576 612 576 600 L 576 242 Q 576 230 564 230 L 450 230"
+        fill="none" class="arr" stroke-dasharray="4 3" marker-end="url(#arrow)"/>
+
+  <!-- ========================================== -->
+  <!-- SECTION 3: TRAINING PIPELINE DETAILS       -->
+  <!-- ========================================== -->
+
+  <!-- Connection arrow: Loop → Training details -->
+  <line x1="310" y1="670" x2="310" y2="710" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- Training container (neutral dashed) -->
+  <g>
+    <rect x="40" y="710" width="600" height="170" rx="16"
+          stroke-width="1" stroke-dasharray="6 4"
+          fill="var(--bg-secondary)" stroke="var(--border)"/>
+    <text class="th" x="66" y="738">train.py — modifiable training pipeline</text>
+    <text class="ts" x="66" y="756">Runs during each training step — single GPU, single file</text>
+  </g>
+
+  <!-- GPT model -->
+  <g class="node c-coral">
+    <rect x="70" y="774" width="155" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="147" y="794" text-anchor="middle" dominant-baseline="central">GPT model</text>
+    <text class="ts" x="147" y="814" text-anchor="middle" dominant-baseline="central">RoPE, FlashAttn3</text>
+  </g>
+
+  <!-- Arrow: GPT → MuonAdamW -->
+  <line x1="225" y1="802" x2="260" y2="802" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- MuonAdamW optimizer -->
+  <g class="node c-coral">
+    <rect x="260" y="774" width="155" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="337" y="794" text-anchor="middle" dominant-baseline="central">MuonAdamW</text>
+    <text class="ts" x="337" y="814" text-anchor="middle" dominant-baseline="central">Hybrid optimizer</text>
+  </g>
+
+  <!-- Arrow: MuonAdamW → Evaluation -->
+  <line x1="415" y1="802" x2="450" y2="802" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- Evaluation -->
+  <g class="node c-amber">
+    <rect x="450" y="774" width="155" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="527" y="794" text-anchor="middle" dominant-baseline="central">Evaluation</text>
+    <text class="ts" x="527" y="814" text-anchor="middle" dominant-baseline="central">val_bpb metric</text>
+  </g>
+
+  <!-- Footer: fixed constraints -->
+  <text class="ts" x="340" y="856" text-anchor="middle" opacity=".5">climbmix-400b data · 8K BPE vocab · 300s budget · 2048 context</text>
+
+  <!-- ========================================== -->
+  <!-- LEGEND                                     -->
+  <!-- ========================================== -->
+
+  <g class="c-teal"><rect x="40" y="890" width="14" height="14" rx="3" stroke-width="0.5"/></g>
+  <text class="ts" x="62" y="902">Agent actions</text>
+
+  <g class="c-coral"><rect x="170" y="890" width="14" height="14" rx="3" stroke-width="0.5"/></g>
+  <text class="ts" x="192" y="902">Training run</text>
+
+  <g class="c-green"><rect x="300" y="890" width="14" height="14" rx="3" stroke-width="0.5"/></g>
+  <text class="ts" x="322" y="902">Improvement</text>
+
+  <g class="c-red"><rect x="430" y="890" width="14" height="14" rx="3" stroke-width="0.5"/></g>
+  <text class="ts" x="452" y="902">No improvement</text>
+
+</svg>
+```
+
+## Color Assignments
+
+| Element | Color | Reason |
+| --------- | ------- | -------- |
+| Human, program.md | `c-gray` | Neutral setup / input nodes |
+| AI agent | `c-purple` | The active intelligent actor |
+| Loop action steps | `c-teal` | Agent's analytical/editing actions |
+| Run training | `c-coral` | Highlighted key step — the 5-min training run |
+| Decision check | `c-gray` | Neutral evaluation checkpoint |
+| Keep (improved) | `c-green` | Semantic success — val_bpb decreased |
+| Discard (not improved) | `c-red` | Semantic failure — no improvement |
+| Training pipeline nodes | `c-coral` | Training infrastructure components |
+| Evaluation node | `c-amber` | Distinct from training — measurement/metric role |
+| Containers | Neutral (dashed) | Subtle grouping that recedes behind content |
+
+## Layout Notes
+
+- **ViewBox**: 680×920 (standard width, tall for 3 sections)
+- **Three sections**: Setup row (y=30–98), loop container (y=142–670), training details (y=710–880)
+- **Container style**: Dashed border (`stroke-dasharray="6 4"`), neutral fill (`var(--bg-secondary)`), `stroke-width="1"` — not colored, so inner nodes pop
+- **Loop-back arrow**: Dashed `<path>` with quadratic curves (`Q`) at corners for smooth rounded turns, running up the right side of the loop container from "Log" back to "Read code"
+- **Decision pattern**: Single question node ("val_bpb improved?") with diagonal arrows to Keep/Discard, then convergent diagonal arrows back to "Log to results.tsv"
+- **Decision labels**: "yes"/"no" labels placed along the diagonal arrows with `opacity=".6"` to stay subtle
+- **Key step highlight**: "Run training" uses `c-coral` while surrounding steps use `c-teal`, drawing the eye to the most important step
+- **Horizontal sub-flow**: Training pipeline uses left-to-right arrow-connected nodes (GPT model → MuonAdamW → Evaluation)
+- **Footer metadata**: Fixed constraints (data, vocab, budget, context) shown as a single centered `ts` text line with `opacity=".5"`
+- **Legend**: Four color swatches at the bottom explaining the semantic meaning of each color used