abc/analysis_claude_code
1
0
Fork 0
mirror of https://github.com/shareAI-lab/analysis_claude_code.git synced 2026-09-20 12:13:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

Rebirth s16 chapter from the Agent Writing Brief

Browse Source 
Full rewrite of EN/ZH/JA as a progressive essay with harness-essay spine,
six-pattern toolbox, neighbor comparisons, and SVG-first figures
(dynamic-vs-static, primitives, six patterns). Keep null-isolation and
longest-prefix resume in the teaching runtime; bump translation-sync to v15.

Co-authored-by: Xinlu Lai <CrazyBoyM@users.noreply.github.com>
This commit is contained in:
Cursor Agent
2026-08-12 13:57:47 +00:00
parent 06fef3be44
commit 4c4160a2df
10 changed files with 629 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
web/public/course-assets/s16_workflow_runtime/dynamic-vs-static.svg Normal file
View File

@@ -0,0 +1,63 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 520" font-family="system-ui, -apple-system, sans-serif" role="img" aria-labelledby="title desc">
<title id="title">Static harness vs dynamic workflow</title>
<desc id="desc">Same question, two harnesses: a generic static pipeline versus a tailor-made dynamic workflow that reads local code and runs an adversarial check.</desc>
<defs>
<marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#888"/></marker>
<marker id="ag" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#22c55e"/></marker>
</defs>
<rect width="960" height="520" rx="8" fill="#fff"/>
<text x="480" y="28" text-anchor="middle" fill="#1a1a1a" font-size="18" font-weight="700">Same question, two harnesses</text>
<rect x="220" y="48" width="520" height="36" rx="6" fill="#fafafa" stroke="#1a1a1a" stroke-width="1.2"/>
<text x="480" y="71" text-anchor="middle" fill="#1a1a1a" font-size="12">Should we migrate our checkout service to a new provider?</text>
<line x1="350" y1="84" x2="200" y2="120" stroke="#888" stroke-width="1.3" marker-end="url(#a)"/>
<line x1="610" y1="84" x2="760" y2="120" stroke="#22c55e" stroke-width="1.5" marker-end="url(#ag)"/>
<!-- Static -->
<rect x="40" y="128" width="420" height="360" rx="8" fill="#fff" stroke="#d0d0d0" stroke-width="1.5"/>
<text x="250" y="154" text-anchor="middle" fill="#1a1a1a" font-size="14" font-weight="700">Static harness</text>
<text x="250" y="172" text-anchor="middle" fill="#888" font-size="11">written ahead - must work for every edge case</text>
<rect x="120" y="190" width="260" height="36" rx="4" fill="#fafafa" stroke="#888"/>
<text x="250" y="212" text-anchor="middle" fill="#1a1a1a" font-size="12">turn into 5 web searches</text>
<line x1="250" y1="226" x2="250" y2="244" stroke="#888" marker-end="url(#a)"/>
<rect x="120" y="246" width="260" height="36" rx="4" fill="#fafafa" stroke="#888"/>
<text x="250" y="268" text-anchor="middle" fill="#1a1a1a" font-size="12">fetch top results</text>
<line x1="250" y1="282" x2="250" y2="300" stroke="#888" marker-end="url(#a)"/>
<rect x="120" y="302" width="260" height="36" rx="4" fill="#fafafa" stroke="#888"/>
<text x="250" y="324" text-anchor="middle" fill="#1a1a1a" font-size="12">verify</text>
<line x1="250" y1="338" x2="250" y2="356" stroke="#888" marker-end="url(#a)"/>
<rect x="120" y="358" width="260" height="36" rx="4" fill="#fafafa" stroke="#888"/>
<text x="250" y="380" text-anchor="middle" fill="#1a1a1a" font-size="12">summarize</text>
<line x1="250" y1="394" x2="250" y2="412" stroke="#888" marker-end="url(#a)"/>
<rect x="120" y="414" width="260" height="40" rx="4" fill="#1a1a1a"/>
<text x="250" y="439" text-anchor="middle" fill="#fff" font-size="12" font-weight="600">a generic research report</text>
<!-- Dynamic -->
<rect x="500" y="128" width="420" height="360" rx="8" fill="#fff" stroke="#22c55e" stroke-width="1.8"/>
<text x="710" y="154" text-anchor="middle" fill="#1a1a1a" font-size="14" font-weight="700">Dynamic workflow</text>
<text x="710" y="172" text-anchor="middle" fill="#888" font-size="11">written for THIS task - then optionally saved</text>
<rect x="560" y="190" width="300" height="36" rx="4" fill="#fafafa" stroke="#1a1a1a"/>
<text x="710" y="212" text-anchor="middle" fill="#1a1a1a" font-size="12">read our billing code</text>
<rect x="560" y="234" width="88" height="24" rx="3" fill="#fff" stroke="#22c55e" stroke-dasharray="3,2"/>
<text x="604" y="250" text-anchor="middle" fill="#1a1a1a" font-size="9">billing/</text>
<rect x="656" y="234" width="88" height="24" rx="3" fill="#fff" stroke="#22c55e" stroke-dasharray="3,2"/>
<text x="700" y="250" text-anchor="middle" fill="#1a1a1a" font-size="9">webhooks/</text>
<rect x="752" y="234" width="88" height="24" rx="3" fill="#fff" stroke="#22c55e" stroke-dasharray="3,2"/>
<text x="796" y="250" text-anchor="middle" fill="#1a1a1a" font-size="9">taxes/</text>
<line x1="640" y1="258" x2="600" y2="286" stroke="#888" marker-end="url(#a)"/>
<line x1="780" y1="258" x2="820" y2="286" stroke="#888" marker-end="url(#a)"/>
<rect x="520" y="288" width="180" height="52" rx="4" fill="#fafafa" stroke="#22c55e"/>
<text x="610" y="310" text-anchor="middle" fill="#1a1a1a" font-size="10">check features vs</text>
<text x="610" y="326" text-anchor="middle" fill="#1a1a1a" font-size="10">new provider docs</text>
<rect x="720" y="288" width="180" height="52" rx="4" fill="#fafafa" stroke="#22c55e"/>
<text x="810" y="310" text-anchor="middle" fill="#1a1a1a" font-size="10">price at our</text>
<text x="810" y="326" text-anchor="middle" fill="#1a1a1a" font-size="10">transaction volume</text>
<line x1="610" y1="340" x2="670" y2="368" stroke="#888" marker-end="url(#a)"/>
<line x1="810" y1="340" x2="750" y2="368" stroke="#888" marker-end="url(#a)"/>
<rect x="560" y="370" width="300" height="40" rx="4" fill="#fff" stroke="#22c55e" stroke-dasharray="4,2"/>
<text x="710" y="395" text-anchor="middle" fill="#1a1a1a" font-size="11">devil's advocate: strongest case against</text>
<line x1="710" y1="410" x2="710" y2="428" stroke="#22c55e" marker-end="url(#ag)"/>
<rect x="560" y="430" width="300" height="40" rx="4" fill="#1a1a1a"/>
<text x="710" y="455" text-anchor="middle" fill="#fff" font-size="12" font-weight="600">a specific recommendation</text>
<text x="480" y="508" text-anchor="middle" fill="#888" font-size="10">Static aims to fit every case. Dynamic cuts cloth for this one - then save if the fit is good.</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

239
web/public/course-assets/s16_workflow_runtime/six-workflow-patterns.svg
View File

@@ -1,159 +1,108 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 720" font-family="system-ui, -apple-system, sans-serif" role="img" aria-labelledby="title description">
<title id="title">Six Workflow Patterns</title>
<desc id="description">A toolbox of six common dynamic workflow shapes: Classify-And-Act, Fanout-And-Synthesize, Adversarial Verification, Generate-And-Filter, Tournament, and Loop Until Done.</desc>
<desc id="description">Toolbox of six common dynamic workflow shapes.</desc>
<defs>
<marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#888888"/>
</marker>
<marker id="arr-g" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#22c55e"/>
</marker>
<marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#888"/></marker>
<marker id="arr-g" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#22c55e"/></marker>
</defs>
<rect width="960" height="720" rx="8" fill="#ffffff"/>
<rect width="960" height="720" rx="8" fill="#fff"/>
<text x="480" y="28" text-anchor="middle" fill="#1a1a1a" font-size="18" font-weight="700">Six Workflow Patterns</text>
<text x="480" y="48" text-anchor="middle" fill="#888888" font-size="11">a toolbox - not a mandatory menu. Compose with agent / parallel / pipeline</text>
<text x="480" y="48" text-anchor="middle" fill="#888" font-size="11">a toolbox - not a mandatory menu. Compose with agent / parallel / pipeline</text>
<rect x="20" y="64" width="300" height="300" rx="8" fill="#fff" stroke="#d0d0d0"/>
<rect x="330" y="64" width="300" height="300" rx="8" fill="#fff" stroke="#d0d0d0"/>
<rect x="640" y="64" width="300" height="300" rx="8" fill="#fff" stroke="#d0d0d0"/>
<rect x="20" y="380" width="300" height="300" rx="8" fill="#fff" stroke="#d0d0d0"/>
<rect x="330" y="380" width="300" height="300" rx="8" fill="#fff" stroke="#d0d0d0"/>
<rect x="640" y="380" width="300" height="300" rx="8" fill="#fff" stroke="#d0d0d0"/>
<!-- Panel frames: 2x3 -->
<!-- Row 1 -->
<rect x="20" y="64" width="300" height="300" rx="8" fill="#ffffff" stroke="#d0d0d0" stroke-width="1.5"/>
<rect x="330" y="64" width="300" height="300" rx="8" fill="#ffffff" stroke="#d0d0d0" stroke-width="1.5"/>
<rect x="640" y="64" width="300" height="300" rx="8" fill="#ffffff" stroke="#d0d0d0" stroke-width="1.5"/>
<!-- Row 2 -->
<rect x="20" y="380" width="300" height="300" rx="8" fill="#ffffff" stroke="#d0d0d0" stroke-width="1.5"/>
<rect x="330" y="380" width="300" height="300" rx="8" fill="#ffffff" stroke="#d0d0d0" stroke-width="1.5"/>
<rect x="640" y="380" width="300" height="300" rx="8" fill="#ffffff" stroke="#d0d0d0" stroke-width="1.5"/>
<text x="170" y="88" text-anchor="middle" fill="#1a1a1a" font-size="13" font-weight="700">1. Classify-And-Act</text>
<rect x="120" y="110" width="100" height="28" rx="4" fill="#fafafa" stroke="#1a1a1a"/><text x="170" y="128" text-anchor="middle" fill="#1a1a1a" font-size="11">task</text>
<line x1="170" y1="138" x2="170" y2="158" stroke="#888" marker-end="url(#arr)"/>
<path d="M170 162 L192 184 L170 206 L148 184 Z" fill="#fff" stroke="#22c55e"/><text x="170" y="188" text-anchor="middle" fill="#1a1a1a" font-size="9">classifier</text>
<line x1="152" y1="196" x2="90" y2="230" stroke="#888" marker-end="url(#arr)"/>
<line x1="170" y1="206" x2="170" y2="230" stroke="#22c55e" stroke-width="1.8" marker-end="url(#arr-g)"/>
<line x1="188" y1="196" x2="250" y2="230" stroke="#888" marker-end="url(#arr)"/>
<circle cx="90" cy="258" r="22" fill="#fff" stroke="#1a1a1a"/><text x="90" y="262" text-anchor="middle" fill="#1a1a1a" font-size="11">A</text>
<circle cx="170" cy="258" r="22" fill="#fff" stroke="#22c55e" stroke-width="1.8"/><text x="170" y="262" text-anchor="middle" fill="#1a1a1a" font-size="11">B</text>
<circle cx="250" cy="258" r="22" fill="#fff" stroke="#1a1a1a"/><text x="250" y="262" text-anchor="middle" fill="#1a1a1a" font-size="11">C</text>
<text x="170" y="310" text-anchor="middle" fill="#888" font-size="10">route to the right specialist</text>
<text x="170" y="330" text-anchor="middle" fill="#888" font-size="9" font-family="monospace">agent -&gt; branch -&gt; agent</text>
<!-- ===== 1. Classify-And-Act ===== -->
<text x="170" y="88" text-anchor="middle" fill="#1a1a1a" font-size="13" font-weight="700">Classify-And-Act</text>
<rect x="120" y="108" width="100" height="28" rx="4" fill="#fafafa" stroke="#1a1a1a" stroke-width="1.2"/>
<text x="170" y="126" text-anchor="middle" fill="#1a1a1a" font-size="11">task</text>
<line x1="170" y1="136" x2="170" y2="158" stroke="#888888" stroke-width="1.5" marker-end="url(#arr)"/>
<path d="M170 162 L190 182 L170 202 L150 182 Z" fill="#ffffff" stroke="#22c55e" stroke-width="1.5"/>
<text x="170" y="186" text-anchor="middle" fill="#1a1a1a" font-size="9">classifier</text>
<line x1="150" y1="192" x2="80" y2="230" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<line x1="170" y1="202" x2="170" y2="230" stroke="#22c55e" stroke-width="1.8" marker-end="url(#arr-g)"/>
<line x1="190" y1="192" x2="260" y2="230" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<circle cx="80" cy="255" r="22" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.2"/>
<text x="80" y="258" text-anchor="middle" fill="#1a1a1a" font-size="10">A</text>
<circle cx="170" cy="255" r="22" fill="#ffffff" stroke="#22c55e" stroke-width="1.8"/>
<text x="170" y="258" text-anchor="middle" fill="#1a1a1a" font-size="10">B</text>
<circle cx="260" cy="255" r="22" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.2"/>
<text x="260" y="258" text-anchor="middle" fill="#1a1a1a" font-size="10">C</text>
<text x="170" y="310" text-anchor="middle" fill="#888888" font-size="10">route to the right specialist</text>
<text x="170" y="328" text-anchor="middle" fill="#888888" font-size="9" font-family="monospace">agent ' branch ' agent</text>
<!-- ===== 2. Fanout-And-Synthesize ===== -->
<text x="480" y="88" text-anchor="middle" fill="#1a1a1a" font-size="13" font-weight="700">Fanout-And-Synthesize</text>
<rect x="430" y="108" width="100" height="28" rx="4" fill="#fafafa" stroke="#1a1a1a" stroke-width="1.2"/>
<text x="480" y="126" text-anchor="middle" fill="#1a1a1a" font-size="11">task</text>
<line x1="450" y1="136" x2="400" y2="168" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<line x1="470" y1="136" x2="450" y2="168" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<line x1="490" y1="136" x2="510" y2="168" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<line x1="510" y1="136" x2="560" y2="168" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<circle cx="400" cy="190" r="16" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.2"/>
<circle cx="450" cy="190" r="16" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.2"/>
<circle cx="510" cy="190" r="16" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.2"/>
<circle cx="560" cy="190" r="16" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.2"/>
<line x1="400" y1="206" x2="400" y2="232" stroke="#888888" stroke-width="1.2"/>
<line x1="450" y1="206" x2="450" y2="232" stroke="#888888" stroke-width="1.2"/>
<line x1="510" y1="206" x2="510" y2="232" stroke="#888888" stroke-width="1.2"/>
<line x1="560" y1="206" x2="560" y2="232" stroke="#888888" stroke-width="1.2"/>
<text x="480" y="88" text-anchor="middle" fill="#1a1a1a" font-size="13" font-weight="700">2. Fanout-And-Synthesize</text>
<rect x="430" y="110" width="100" height="28" rx="4" fill="#fafafa" stroke="#1a1a1a"/><text x="480" y="128" text-anchor="middle" fill="#1a1a1a" font-size="11">task</text>
<line x1="450" y1="138" x2="400" y2="168" stroke="#888" marker-end="url(#arr)"/>
<line x1="470" y1="138" x2="450" y2="168" stroke="#888" marker-end="url(#arr)"/>
<line x1="490" y1="138" x2="510" y2="168" stroke="#888" marker-end="url(#arr)"/>
<line x1="510" y1="138" x2="560" y2="168" stroke="#888" marker-end="url(#arr)"/>
<circle cx="400" cy="190" r="16" fill="#fff" stroke="#1a1a1a"/>
<circle cx="450" cy="190" r="16" fill="#fff" stroke="#1a1a1a"/>
<circle cx="510" cy="190" r="16" fill="#fff" stroke="#1a1a1a"/>
<circle cx="560" cy="190" r="16" fill="#fff" stroke="#1a1a1a"/>
<line x1="400" y1="206" x2="400" y2="232" stroke="#888"/>
<line x1="450" y1="206" x2="450" y2="232" stroke="#888"/>
<line x1="510" y1="206" x2="510" y2="232" stroke="#888"/>
<line x1="560" y1="206" x2="560" y2="232" stroke="#888"/>
<line x1="400" y1="232" x2="560" y2="232" stroke="#22c55e" stroke-width="3"/>
<text x="480" y="250" text-anchor="middle" fill="#22c55e" font-size="9" font-weight="600">barrier</text>
<line x1="480" y1="252" x2="480" y2="272" stroke="#22c55e" stroke-width="1.5" marker-end="url(#arr-g)"/>
<circle cx="480" cy="298" r="22" fill="#ffffff" stroke="#22c55e" stroke-width="1.8"/>
<text x="480" y="302" text-anchor="middle" fill="#1a1a1a" font-size="9">synthesize</text>
<text x="480" y="340" text-anchor="middle" fill="#888888" font-size="9" font-family="monospace">parallel / pipeline ' merge</text>
<text x="480" y="252" text-anchor="middle" fill="#22c55e" font-size="10" font-weight="600">barrier</text>
<line x1="480" y1="256" x2="480" y2="274" stroke="#22c55e" marker-end="url(#arr-g)"/>
<circle cx="480" cy="300" r="22" fill="#fff" stroke="#22c55e" stroke-width="1.8"/><text x="480" y="304" text-anchor="middle" fill="#1a1a1a" font-size="9">synthesize</text>
<text x="480" y="340" text-anchor="middle" fill="#888" font-size="9" font-family="monospace">parallel / pipeline -&gt; merge</text>
<!-- ===== 3. Adversarial Verification ===== -->
<text x="790" y="88" text-anchor="middle" fill="#1a1a1a" font-size="13" font-weight="700">Adversarial Verification</text>
<circle cx="720" cy="200" r="36" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.5"/>
<text x="720" y="204" text-anchor="middle" fill="#1a1a1a" font-size="11">worker</text>
<line x1="756" y1="180" x2="850" y2="140" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<line x1="756" y1="200" x2="850" y2="200" stroke="#22c55e" stroke-width="1.5" marker-end="url(#arr-g)"/>
<line x1="756" y1="220" x2="850" y2="260" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<circle cx="875" cy="140" r="20" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.2"/>
<text x="875" y="144" text-anchor="middle" fill="#1a1a1a" font-size="9">verify</text>
<circle cx="875" cy="200" r="20" fill="#ffffff" stroke="#22c55e" stroke-width="1.5"/>
<text x="875" y="204" text-anchor="middle" fill="#1a1a1a" font-size="9">verify</text>
<circle cx="875" cy="260" r="20" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.2"/>
<text x="875" y="264" text-anchor="middle" fill="#1a1a1a" font-size="9">verify</text>
<text x="790" y="310" text-anchor="middle" fill="#888888" font-size="10">independents stress-test the work</text>
<text x="790" y="328" text-anchor="middle" fill="#888888" font-size="9" font-family="monospace">agent ' parallel(verifiers)</text>
<text x="790" y="88" text-anchor="middle" fill="#1a1a1a" font-size="13" font-weight="700">3. Adversarial Verification</text>
<circle cx="720" cy="200" r="34" fill="#fff" stroke="#1a1a1a" stroke-width="1.5"/><text x="720" y="204" text-anchor="middle" fill="#1a1a1a" font-size="11">worker</text>
<line x1="754" y1="180" x2="848" y2="140" stroke="#888" marker-end="url(#arr)"/>
<line x1="754" y1="200" x2="848" y2="200" stroke="#22c55e" stroke-width="1.5" marker-end="url(#arr-g)"/>
<line x1="754" y1="220" x2="848" y2="260" stroke="#888" marker-end="url(#arr)"/>
<circle cx="872" cy="140" r="20" fill="#fff" stroke="#1a1a1a"/><text x="872" y="144" text-anchor="middle" fill="#1a1a1a" font-size="9">verify</text>
<circle cx="872" cy="200" r="20" fill="#fff" stroke="#22c55e" stroke-width="1.5"/><text x="872" y="204" text-anchor="middle" fill="#1a1a1a" font-size="9">verify</text>
<circle cx="872" cy="260" r="20" fill="#fff" stroke="#1a1a1a"/><text x="872" y="264" text-anchor="middle" fill="#1a1a1a" font-size="9">verify</text>
<text x="790" y="310" text-anchor="middle" fill="#888" font-size="10">independents stress-test the work</text>
<text x="790" y="330" text-anchor="middle" fill="#888" font-size="9" font-family="monospace">agent -&gt; parallel(verifiers)</text>
<!-- ===== 4. Generate-And-Filter ===== -->
<text x="170" y="404" text-anchor="middle" fill="#1a1a1a" font-size="13" font-weight="700">Generate-And-Filter</text>
<circle cx="70" cy="460" r="18" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.2"/>
<circle cx="70" cy="510" r="18" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.2"/>
<circle cx="70" cy="560" r="18" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.2"/>
<text x="70" y="464" text-anchor="middle" fill="#1a1a1a" font-size="8">gen</text>
<text x="70" y="514" text-anchor="middle" fill="#1a1a1a" font-size="8">gen</text>
<text x="70" y="564" text-anchor="middle" fill="#1a1a1a" font-size="8">gen</text>
<rect x="105" y="448" width="14" height="10" rx="1" fill="#fafafa" stroke="#888888"/>
<rect x="105" y="460" width="14" height="10" rx="1" fill="#fafafa" stroke="#888888"/>
<rect x="105" y="498" width="14" height="10" rx="1" fill="#fafafa" stroke="#888888"/>
<rect x="105" y="510" width="14" height="10" rx="1" fill="#fafafa" stroke="#888888"/>
<rect x="105" y="548" width="14" height="10" rx="1" fill="#fafafa" stroke="#888888"/>
<rect x="105" y="560" width="14" height="10" rx="1" fill="#fafafa" stroke="#888888"/>
<line x1="120" y1="460" x2="155" y2="510" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<line x1="120" y1="510" x2="155" y2="510" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<line x1="120" y1="560" x2="155" y2="510" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<rect x="160" y="488" width="70" height="44" rx="4" fill="#ffffff" stroke="#22c55e" stroke-width="1.5"/>
<text x="195" y="506" text-anchor="middle" fill="#1a1a1a" font-size="10" font-weight="600">filter</text>
<text x="195" y="520" text-anchor="middle" fill="#888888" font-size="8">rubric+dedupe</text>
<line x1="230" y1="500" x2="260" y2="470" stroke="#22c55e" stroke-width="1.5" marker-end="url(#arr-g)"/>
<line x1="230" y1="520" x2="260" y2="550" stroke="#888888" stroke-width="1.2" stroke-dasharray="3,2" marker-end="url(#arr)"/>
<rect x="262" y="452" width="40" height="28" rx="3" fill="#fafafa" stroke="#22c55e" stroke-width="1.2"/>
<text x="282" y="470" text-anchor="middle" fill="#1a1a1a" font-size="9">best</text>
<rect x="262" y="538" width="40" height="28" rx="3" fill="#fafafa" stroke="#d0d0d0" stroke-width="1.2"/>
<text x="282" y="556" text-anchor="middle" fill="#888888" font-size="8">drop</text>
<text x="170" y="620" text-anchor="middle" fill="#888888" font-size="9" font-family="monospace">parallel(gens) ' filter</text>
<text x="170" y="638" text-anchor="middle" fill="#888888" font-size="10">keep what survives the test</text>
<text x="170" y="404" text-anchor="middle" fill="#1a1a1a" font-size="13" font-weight="700">4. Generate-And-Filter</text>
<circle cx="70" cy="460" r="18" fill="#fff" stroke="#1a1a1a"/><text x="70" y="464" text-anchor="middle" fill="#1a1a1a" font-size="8">gen</text>
<circle cx="70" cy="510" r="18" fill="#fff" stroke="#1a1a1a"/><text x="70" y="514" text-anchor="middle" fill="#1a1a1a" font-size="8">gen</text>
<circle cx="70" cy="560" r="18" fill="#fff" stroke="#1a1a1a"/><text x="70" y="564" text-anchor="middle" fill="#1a1a1a" font-size="8">gen</text>
<line x1="90" y1="460" x2="150" y2="508" stroke="#888" marker-end="url(#arr)"/>
<line x1="90" y1="510" x2="150" y2="510" stroke="#888" marker-end="url(#arr)"/>
<line x1="90" y1="560" x2="150" y2="512" stroke="#888" marker-end="url(#arr)"/>
<rect x="155" y="488" width="72" height="44" rx="4" fill="#fff" stroke="#22c55e"/><text x="191" y="506" text-anchor="middle" fill="#1a1a1a" font-size="10" font-weight="600">filter</text><text x="191" y="520" text-anchor="middle" fill="#888" font-size="8">rubric+dedupe</text>
<line x1="227" y1="500" x2="255" y2="470" stroke="#22c55e" marker-end="url(#arr-g)"/>
<line x1="227" y1="520" x2="255" y2="550" stroke="#888" stroke-dasharray="3,2" marker-end="url(#arr)"/>
<rect x="258" y="454" width="42" height="26" rx="3" fill="#fafafa" stroke="#22c55e"/><text x="279" y="471" text-anchor="middle" fill="#1a1a1a" font-size="9">best</text>
<rect x="258" y="538" width="42" height="26" rx="3" fill="#fafafa" stroke="#d0d0d0"/><text x="279" y="555" text-anchor="middle" fill="#888" font-size="8">drop</text>
<text x="170" y="610" text-anchor="middle" fill="#888" font-size="10">keep what survives the test</text>
<text x="170" y="630" text-anchor="middle" fill="#888" font-size="9" font-family="monospace">parallel(gens) -&gt; filter</text>
<!-- ===== 5. Tournament ===== -->
<text x="480" y="404" text-anchor="middle" fill="#1a1a1a" font-size="13" font-weight="700">Tournament</text>
<circle cx="380" cy="450" r="16" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.2"/>
<circle cx="430" cy="450" r="16" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.2"/>
<circle cx="530" cy="450" r="16" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.2"/>
<circle cx="580" cy="450" r="16" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.2"/>
<text x="380" y="454" text-anchor="middle" fill="#1a1a1a" font-size="8">a</text>
<text x="430" y="454" text-anchor="middle" fill="#1a1a1a" font-size="8">b</text>
<text x="530" y="454" text-anchor="middle" fill="#1a1a1a" font-size="8">c</text>
<text x="580" y="454" text-anchor="middle" fill="#1a1a1a" font-size="8">d</text>
<line x1="380" y1="466" x2="395" y2="495" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<line x1="430" y1="466" x2="415" y2="495" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<line x1="530" y1="466" x2="545" y2="495" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<line x1="580" y1="466" x2="565" y2="495" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<path d="M405 500 L420 515 L405 530 L390 515 Z" fill="#ffffff" stroke="#22c55e" stroke-width="1.3"/>
<path d="M555 500 L570 515 L555 530 L540 515 Z" fill="#ffffff" stroke="#22c55e" stroke-width="1.3"/>
<text x="405" y="519" text-anchor="middle" fill="#1a1a1a" font-size="7">judge</text>
<text x="555" y="519" text-anchor="middle" fill="#1a1a1a" font-size="7">judge</text>
<line x1="405" y1="530" x2="460" y2="560" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<line x1="555" y1="530" x2="500" y2="560" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<path d="M480 564 L498 582 L480 600 L462 582 Z" fill="#ffffff" stroke="#22c55e" stroke-width="1.5"/>
<text x="480" y="586" text-anchor="middle" fill="#1a1a1a" font-size="8">final</text>
<line x1="480" y1="600" x2="480" y2="618" stroke="#22c55e" stroke-width="1.5" marker-end="url(#arr-g)"/>
<rect x="452" y="620" width="56" height="20" rx="3" fill="#fafafa" stroke="#22c55e" stroke-width="1.2"/>
<text x="480" y="634" text-anchor="middle" fill="#1a1a1a" font-size="9">winner</text>
<text x="480" y="662" text-anchor="middle" fill="#888888" font-size="9" font-family="monospace">pairwise agent judges</text>
<text x="480" y="404" text-anchor="middle" fill="#1a1a1a" font-size="13" font-weight="700">5. Tournament</text>
<circle cx="380" cy="450" r="16" fill="#fff" stroke="#1a1a1a"/><text x="380" y="454" text-anchor="middle" fill="#1a1a1a" font-size="9">a</text>
<circle cx="430" cy="450" r="16" fill="#fff" stroke="#1a1a1a"/><text x="430" y="454" text-anchor="middle" fill="#1a1a1a" font-size="9">b</text>
<circle cx="530" cy="450" r="16" fill="#fff" stroke="#1a1a1a"/><text x="530" y="454" text-anchor="middle" fill="#1a1a1a" font-size="9">c</text>
<circle cx="580" cy="450" r="16" fill="#fff" stroke="#1a1a1a"/><text x="580" y="454" text-anchor="middle" fill="#1a1a1a" font-size="9">d</text>
<line x1="380" y1="466" x2="395" y2="494" stroke="#888" marker-end="url(#arr)"/>
<line x1="430" y1="466" x2="415" y2="494" stroke="#888" marker-end="url(#arr)"/>
<line x1="530" y1="466" x2="545" y2="494" stroke="#888" marker-end="url(#arr)"/>
<line x1="580" y1="466" x2="565" y2="494" stroke="#888" marker-end="url(#arr)"/>
<path d="M405 498 L420 514 L405 530 L390 514 Z" fill="#fff" stroke="#22c55e"/><text x="405" y="518" text-anchor="middle" fill="#1a1a1a" font-size="7">judge</text>
<path d="M555 498 L570 514 L555 530 L540 514 Z" fill="#fff" stroke="#22c55e"/><text x="555" y="518" text-anchor="middle" fill="#1a1a1a" font-size="7">judge</text>
<line x1="405" y1="530" x2="460" y2="558" stroke="#888" marker-end="url(#arr)"/>
<line x1="555" y1="530" x2="500" y2="558" stroke="#888" marker-end="url(#arr)"/>
<path d="M480 562 L498 580 L480 598 L462 580 Z" fill="#fff" stroke="#22c55e"/><text x="480" y="584" text-anchor="middle" fill="#1a1a1a" font-size="8">final</text>
<line x1="480" y1="598" x2="480" y2="616" stroke="#22c55e" marker-end="url(#arr-g)"/>
<rect x="452" y="618" width="56" height="20" rx="3" fill="#fafafa" stroke="#22c55e"/><text x="480" y="632" text-anchor="middle" fill="#1a1a1a" font-size="9">winner</text>
<text x="480" y="660" text-anchor="middle" fill="#888" font-size="9" font-family="monospace">pairwise agent judges</text>
<!-- ===== 6. Loop Until Done ===== -->
<text x="790" y="404" text-anchor="middle" fill="#1a1a1a" font-size="13" font-weight="700">Loop Until Done</text>
<circle cx="790" cy="470" r="28" fill="#ffffff" stroke="#1a1a1a" stroke-width="1.5"/>
<text x="790" y="474" text-anchor="middle" fill="#1a1a1a" font-size="11">agent</text>
<line x1="790" y1="498" x2="790" y2="525" stroke="#888888" stroke-width="1.5" marker-end="url(#arr)"/>
<path d="M790 530 L812 552 L790 574 L768 552 Z" fill="#ffffff" stroke="#22c55e" stroke-width="1.5"/>
<text x="790" y="548" text-anchor="middle" fill="#1a1a1a" font-size="8">new?</text>
<text x="790" y="560" text-anchor="middle" fill="#1a1a1a" font-size="8">findings</text>
<line x1="812" y1="560" x2="870" y2="560" stroke="#888888" stroke-width="1.2" marker-end="url(#arr)"/>
<rect x="872" y="548" width="40" height="24" rx="3" fill="#1a1a1a"/>
<text x="892" y="564" text-anchor="middle" fill="#ffffff" font-size="9">done</text>
<path d="M768 548 C720 548 720 470 762 470" fill="none" stroke="#22c55e" stroke-width="1.8" marker-end="url(#arr-g)"/>
<text x="730" y="512" text-anchor="middle" fill="#22c55e" font-size="9" font-weight="600">yes - </text>
<text x="730" y="524" text-anchor="middle" fill="#22c55e" font-size="9" font-weight="600">spawn</text>
<text x="790" y="620" text-anchor="middle" fill="#888888" font-size="10">stop when dry rounds appear</text>
<text x="790" y="638" text-anchor="middle" fill="#888888" font-size="9" font-family="monospace">while + agent + budget</text>
<text x="790" y="404" text-anchor="middle" fill="#1a1a1a" font-size="13" font-weight="700">6. Loop Until Done</text>
<circle cx="790" cy="470" r="28" fill="#fff" stroke="#1a1a1a" stroke-width="1.5"/><text x="790" y="474" text-anchor="middle" fill="#1a1a1a" font-size="11">agent</text>
<line x1="790" y1="498" x2="790" y2="524" stroke="#888" marker-end="url(#arr)"/>
<path d="M790 528 L814 552 L790 576 L766 552 Z" fill="#fff" stroke="#22c55e"/><text x="790" y="548" text-anchor="middle" fill="#1a1a1a" font-size="8">new?</text><text x="790" y="562" text-anchor="middle" fill="#1a1a1a" font-size="8">findings</text>
<line x1="814" y1="560" x2="868" y2="560" stroke="#888" marker-end="url(#arr)"/>
<rect x="870" y="548" width="40" height="24" rx="3" fill="#1a1a1a"/><text x="890" y="564" text-anchor="middle" fill="#fff" font-size="9">done</text>
<path d="M766 548 C720 548 720 470 762 470" fill="none" stroke="#22c55e" stroke-width="1.8" marker-end="url(#arr-g)"/>
<text x="728" y="512" text-anchor="middle" fill="#22c55e" font-size="9" font-weight="600">yes -</text>
<text x="728" y="526" text-anchor="middle" fill="#22c55e" font-size="9" font-weight="600">spawn</text>
<text x="790" y="620" text-anchor="middle" fill="#888" font-size="10">stop when dry rounds appear</text>
<text x="790" y="640" text-anchor="middle" fill="#888" font-size="9" font-family="monospace">while + agent + budget</text>
<text x="480" y="702" text-anchor="middle" fill="#888888" font-size="10">Script owns the topology; agents judge inside each step.</text>
<text x="480" y="702" text-anchor="middle" fill="#888" font-size="10">Script owns the topology; agents judge inside each step.</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 11 KiB

68
web/public/course-assets/s16_workflow_runtime/workflow-primitives.svg Normal file
View File

@@ -0,0 +1,68 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 560" font-family="system-ui, -apple-system, sans-serif" role="img" aria-labelledby="title desc">
<title id="title">Workflow primitives: agent, parallel, pipeline</title>
<desc id="desc">Three kitchen verbs of a workflow script: one helper, a barrier of many helpers, and per-item stages without a barrier.</desc>
<defs>
<marker id="p" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#888"/></marker>
<marker id="pg" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#22c55e"/></marker>
</defs>
<rect width="960" height="560" rx="8" fill="#fff"/>
<text x="480" y="28" text-anchor="middle" fill="#1a1a1a" font-size="18" font-weight="700">Three verbs the script speaks</text>
<text x="480" y="48" text-anchor="middle" fill="#888" font-size="12">agent asks a helper; parallel waits for every tray; pipeline lets each cake finish its own stages</text>
<!-- agent -->
<rect x="20" y="70" width="920" height="170" rx="8" fill="#fff" stroke="#d0d0d0" stroke-width="1.5"/>
<text x="40" y="98" fill="#1a1a1a" font-size="15" font-weight="700" font-family="monospace">agent(prompt, opts?)</text>
<text x="40" y="120" fill="#888" font-size="12">One helper. One job. Optional schema makes the answer machine-readable.</text>
<rect x="40" y="140" width="520" height="78" rx="4" fill="#111" />
<text x="56" y="164" fill="#86efac" font-size="12" font-family="monospace">const bugs = await agent("audit auth.ts", {</text>
<text x="56" y="184" fill="#e5e5e5" font-size="12" font-family="monospace"> schema: BugList, label: "audit:auth", phase: "Review"</text>
<text x="56" y="204" fill="#86efac" font-size="12" font-family="monospace">})</text>
<rect x="600" y="140" width="310" height="78" rx="4" fill="#fafafa" stroke="#22c55e"/>
<text x="755" y="170" text-anchor="middle" fill="#1a1a1a" font-size="12">returns text, or validated JSON</text>
<text x="755" y="192" text-anchor="middle" fill="#888" font-size="11">journal records each call in order</text>
<text x="755" y="210" text-anchor="middle" fill="#888" font-size="11">resume replays unchanged prefix</text>
<!-- parallel -->
<rect x="20" y="260" width="450" height="260" rx="8" fill="#fff" stroke="#d0d0d0" stroke-width="1.5"/>
<text x="40" y="288" fill="#1a1a1a" font-size="15" font-weight="700" font-family="monospace">parallel(thunks)</text>
<text x="40" y="310" fill="#888" font-size="12">Fan out. Barrier - wait for all.</text>
<circle cx="100" cy="360" r="18" fill="#fff" stroke="#1a1a1a"/>
<circle cx="170" cy="360" r="18" fill="#fff" stroke="#1a1a1a"/>
<circle cx="240" cy="360" r="18" fill="#fff" stroke="#1a1a1a"/>
<circle cx="310" cy="360" r="18" fill="#fff" stroke="#1a1a1a"/>
<line x1="100" y1="378" x2="100" y2="410" stroke="#888"/>
<line x1="170" y1="378" x2="170" y2="410" stroke="#888"/>
<line x1="240" y1="378" x2="240" y2="410" stroke="#888"/>
<line x1="310" y1="378" x2="310" y2="410" stroke="#888"/>
<line x1="100" y1="410" x2="310" y2="410" stroke="#22c55e" stroke-width="3"/>
<text x="205" y="432" text-anchor="middle" fill="#22c55e" font-size="11" font-weight="600">barrier</text>
<text x="245" y="470" text-anchor="middle" fill="#888" font-size="11" font-family="monospace">failing thunk -&gt; null slot</text>
<text x="245" y="492" text-anchor="middle" fill="#888" font-size="11">use when next step needs EVERY result</text>
<!-- pipeline -->
<rect x="490" y="260" width="450" height="260" rx="8" fill="#fff" stroke="#d0d0d0" stroke-width="1.5"/>
<text x="510" y="288" fill="#1a1a1a" font-size="15" font-weight="700" font-family="monospace">pipeline(items, *stages)</text>
<text x="510" y="310" fill="#888" font-size="12">Each item streams its own stages. No barrier.</text>
<!-- item A -->
<text x="530" y="348" fill="#1a1a1a" font-size="11">A</text>
<rect x="550" y="332" width="70" height="28" rx="3" fill="#fafafa" stroke="#1a1a1a"/>
<text x="585" y="350" text-anchor="middle" fill="#1a1a1a" font-size="10">audit</text>
<line x1="620" y1="346" x2="648" y2="346" stroke="#22c55e" marker-end="url(#pg)"/>
<rect x="650" y="332" width="70" height="28" rx="3" fill="#fafafa" stroke="#22c55e"/>
<text x="685" y="350" text-anchor="middle" fill="#1a1a1a" font-size="10">verify</text>
<line x1="720" y1="346" x2="748" y2="346" stroke="#22c55e" marker-end="url(#pg)"/>
<rect x="750" y="332" width="70" height="28" rx="3" fill="#fff" stroke="#22c55e"/>
<text x="785" y="350" text-anchor="middle" fill="#1a1a1a" font-size="10">done</text>
<!-- item B lagging -->
<text x="530" y="400" fill="#1a1a1a" font-size="11">B</text>
<rect x="550" y="384" width="70" height="28" rx="3" fill="#fafafa" stroke="#1a1a1a"/>
<text x="585" y="402" text-anchor="middle" fill="#1a1a1a" font-size="10">audit</text>
<line x1="620" y1="398" x2="648" y2="398" stroke="#888" marker-end="url(#p)"/>
<rect x="650" y="384" width="70" height="28" rx="3" fill="#fafafa" stroke="#d0d0d0" stroke-dasharray="3,2"/>
<text x="685" y="402" text-anchor="middle" fill="#888" font-size="10">verify</text>
<text x="715" y="450" text-anchor="middle" fill="#888" font-size="11" font-family="monospace">failing stage -&gt; null item</text>
<text x="715" y="472" text-anchor="middle" fill="#888" font-size="11">DEFAULT for multi-stage work</text>
<text x="715" y="494" text-anchor="middle" fill="#888" font-size="11">A can finish while B is still mixing</text>
<text x="480" y="545" text-anchor="middle" fill="#888" font-size="10">Script owns topology. Agents judge inside each call. Intermediate bowls stay in variables + journal.</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB