my-durable 0.0.0-stage → 0.0.2

package/images/10_shared_app_state.svg

@@ -0,0 +1,177 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 668" width="1200" height="668" role="img" aria-labelledby="title desc" font-family="Inter, 'Segoe UI', Helvetica, Arial, sans-serif">
+  <title id="title">One shared App State</title>
+  <desc id="desc">Three agents on one device change a shared App State one path at a time: Main sets release.ready (rev 3 to 4), Fork reads, and Subagent increments incidents.open (rev 4 to 5); the web UI renders each change live, and its full JSON save from stale rev 3 gets 409 conflict.</desc>
+  <style>
+    .mono { font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; }
+    @keyframes chipM { 0%, 4.62% { opacity: 0; transform: scale(0.55) } 6.12% { opacity: 1; transform: scale(1.12) } 6.92%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.55) } }
+    .chipM { animation: chipM 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes m1 { 0%, 6.92% { stroke-dashoffset: 336.0 } 12.31%, 96% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 336.0 } }
+    .m1 { animation: m1 13s ease-in-out infinite; }
+    @keyframes chkM { 0%, 12.31% { opacity: 0; transform: scale(0.55) } 13.81% { opacity: 1; transform: scale(1.12) } 14.62%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.55) } }
+    .chkM { animation: chkM 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes revM { 0%, 13.08% { opacity: 0 } 15.38%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .revM { animation: revM 13s ease-in-out infinite; }
+    @keyframes m2 { 0%, 14.62% { stroke-dashoffset: 147.4 } 17.31%, 96% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 147.4 } }
+    .m2 { animation: m2 13s ease-in-out infinite; }
+    @keyframes m2h { 0%, 16.92% { opacity: 0 } 17.69%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .m2h { animation: m2h 13s ease-in-out infinite; }
+    @keyframes rev3 { 0%, 17.31% { opacity: 1 } 18.85%, 96% { opacity: 0 } 100% { opacity: 1 } }
+    .rev3 { animation: rev3 13s ease-in-out infinite; }
+    @keyframes rev4 { 0%, 17.31% { opacity: 0 } 18.85%, 46.54% { opacity: 1 } 48.08%, 100% { opacity: 0 } }
+    .rev4 { animation: rev4 13s ease-in-out infinite; }
+    @keyframes ui { 0%, 19.23% { stroke-dashoffset: 55.0 } 21.92%, 96% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 55.0 } }
+    .ui { animation: ui 13s ease-in-out infinite; }
+    @keyframes uih { 0%, 21.54% { opacity: 0 } 22.31%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .uih { animation: uih 13s ease-in-out infinite; }
+    @keyframes knob { 0%, 22.31% { transform: translateX(-40px); fill: #B9AAAE } 24.62%, 96% { transform: translateX(0); fill: #FF5252 } 100% { transform: translateX(-40px); fill: #B9AAAE } }
+    .knob { animation: knob 13s ease-in-out infinite; }
+    @keyframes pill { 0%, 22.31% { fill: #2C2225; stroke: #6B5A5E } 24.62%, 96% { fill: #5A2328; stroke: #FF5252 } 100% { fill: #2C2225; stroke: #6B5A5E } }
+    .pill { animation: pill 13s ease-in-out infinite; }
+    @keyframes cardA { 0%, 22.31% { stroke: #443438 } 23.46%, 27.69% { stroke: #FF5252 } 30.38%, 48.08% { stroke: #443438 } 49.23%, 53.46% { stroke: #FF5252 } 56.15%, 100% { stroke: #443438 } }
+    .cardA { animation: cardA 13s ease-in-out infinite; }
+    @keyframes fk { 0%, 27.69% { stroke-dashoffset: 477.0 } 33.08%, 96% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 477.0 } }
+    .fk { animation: fk 13s ease-in-out infinite; }
+    @keyframes fkh { 0%, 32.69% { opacity: 0 } 33.46%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .fkh { animation: fkh 13s ease-in-out infinite; }
+    @keyframes chipS { 0%, 35.38% { opacity: 0; transform: scale(0.55) } 36.88% { opacity: 1; transform: scale(1.12) } 37.69%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.55) } }
+    .chipS { animation: chipS 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes s1 { 0%, 37.69% { stroke-dashoffset: 336.0 } 43.08%, 96% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 336.0 } }
+    .s1 { animation: s1 13s ease-in-out infinite; }
+    @keyframes chkS { 0%, 43.08% { opacity: 0; transform: scale(0.55) } 44.58% { opacity: 1; transform: scale(1.12) } 45.38%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.55) } }
+    .chkS { animation: chkS 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes revS { 0%, 43.85% { opacity: 0 } 46.15%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .revS { animation: revS 13s ease-in-out infinite; }
+    @keyframes s2 { 0%, 45.38% { stroke-dashoffset: 147.4 } 48.08%, 96% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 147.4 } }
+    .s2 { animation: s2 13s ease-in-out infinite; }
+    @keyframes s2h { 0%, 47.69% { opacity: 0 } 48.46%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .s2h { animation: s2h 13s ease-in-out infinite; }
+    @keyframes rev5 { 0%, 46.54% { opacity: 0 } 48.08%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .rev5 { animation: rev5 13s ease-in-out infinite; }
+    @keyframes n1 { 0%, 48.46% { opacity: 1 } 50%, 96% { opacity: 0 } 100% { opacity: 1 } }
+    .n1 { animation: n1 13s ease-in-out infinite; }
+    @keyframes n2 { 0%, 48.46% { opacity: 0 } 50%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .n2 { animation: n2 13s ease-in-out infinite; }
+    @keyframes save { 0%, 53.08% { stroke: #B9AAAE; fill: #21191B } 53.85%, 55.77% { stroke: #FF5252; fill: #3A1D20 } 57.31%, 100% { stroke: #B9AAAE; fill: #21191B } }
+    .save { animation: save 13s ease-in-out infinite; }
+    @keyframes b409 { 0%, 56.15% { opacity: 0; transform: scale(0.55) } 57.65% { opacity: 1; transform: scale(1.12) } 58.46%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.55) } }
+    .b409 { animation: b409 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes note { 0%, 58.46% { opacity: 0 } 60.77%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .note { animation: note 13s ease-in-out infinite; }
+    @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
+  </style>
+  <defs>
+    <symbol id="g-pi" viewBox="0 0 64 64">
+      <rect x="1.5" y="1.5" width="61" height="61" rx="12" fill="#141011" stroke="#FF5252" stroke-width="2.5"/>
+      <g fill="#FFFFFF" transform="translate(16 16) scale(8)">
+        <path d="M0 0H3V2H2V1H0Z"/>
+        <path d="M0 1H1V2H2V3H1V4H0Z"/>
+        <path d="M3 2H4V4H3Z"/>
+      </g>
+    </symbol>
+    <symbol id="g-db" viewBox="0 0 48 60">
+      <path d="M3 10 V50 A21 7 0 0 0 45 50 V10" fill="#3A1D20" stroke="#FF5252" stroke-width="2.5"/>
+      <ellipse cx="24" cy="10" rx="21" ry="7" fill="#5A2328" stroke="#FF5252" stroke-width="2.5"/>
+      <path d="M3 24 A21 7 0 0 0 45 24 M3 37 A21 7 0 0 0 45 37" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+    </symbol>
+    <symbol id="g-server" viewBox="0 0 64 44">
+      <rect x="3" y="4" width="58" height="16" rx="4" fill="#21191B" stroke="#F3EDEE" stroke-width="2.5"/>
+      <rect x="3" y="24" width="58" height="16" rx="4" fill="#21191B" stroke="#F3EDEE" stroke-width="2.5"/>
+      <circle cx="13" cy="12" r="2.6" fill="#FF5252"/><circle cx="13" cy="32" r="2.6" fill="#FF5252"/>
+      <path d="M36 12 H53 M36 32 H53" stroke="#B9AAAE" stroke-width="2.5" stroke-linecap="round"/>
+    </symbol>
+    <symbol id="g-check-o" viewBox="0 0 32 32">
+      <circle cx="16" cy="16" r="13.5" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+      <path d="M9.5 16.5 L14 21 L22.5 11.5" fill="none" stroke="#FF5252" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
+    </symbol>
+    <marker id="ah-red" viewBox="0 0 12 12" refX="4" refY="6" markerWidth="12" markerHeight="12" markerUnits="userSpaceOnUse" orient="auto"><path d="M0 1 L12 6 L0 11 Z" fill="#FF5252"/></marker>
+    <marker id="ah-muted" viewBox="0 0 12 12" refX="4" refY="6" markerWidth="12" markerHeight="12" markerUnits="userSpaceOnUse" orient="auto"><path d="M0 1 L12 6 L0 11 Z" fill="#B9AAAE"/></marker>
+  </defs>
+
+  <rect width="1200" height="668" rx="18" fill="#141011"/>
+  <text x="48" y="70" font-size="34" font-weight="600" fill="#F3EDEE">One shared App State</text>
+
+  <!-- Device panel: three agents on mac-mini share one App State -->
+  <rect x="48" y="100" width="736" height="464" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+  <use href="#g-server" x="72" y="120" width="64" height="44"/>
+  <text class="mono" x="150" y="150" font-size="22" fill="#F3EDEE">mac-mini</text>
+  <use href="#g-pi" x="96" y="196" width="64" height="64"/>
+  <text x="128" y="290" text-anchor="middle" font-size="22" fill="#F3EDEE">Main</text>
+  <use href="#g-pi" x="96" y="320" width="64" height="64"/>
+  <text x="128" y="414" text-anchor="middle" font-size="22" fill="#F3EDEE">Fork</text>
+  <use href="#g-pi" x="96" y="444" width="64" height="64"/>
+  <text x="128" y="538" text-anchor="middle" font-size="22" fill="#F3EDEE">Subagent</text>
+
+  <!-- The App State document and its revision -->
+  <use href="#g-db" x="648" y="292" width="96" height="120"/>
+  <text x="696" y="248" text-anchor="middle" font-size="22" fill="#F3EDEE">app state</text>
+  <text class="mono rev3" x="696" y="280" text-anchor="middle" font-size="24" fill="#F3EDEE" opacity="0">rev <tspan fill="#F3EDEE">3</tspan></text>
+  <text class="mono rev4" x="696" y="280" text-anchor="middle" font-size="24" fill="#F3EDEE" opacity="0">rev <tspan fill="#FF5252">4</tspan></text>
+  <text class="mono rev5" x="696" y="280" text-anchor="middle" font-size="24" fill="#F3EDEE">rev <tspan fill="#FF5252">5</tspan></text>
+
+  <!-- Fork reads -->
+  <path class="fk" d="M650 352 L174 352" stroke="#B9AAAE" stroke-width="2.5" fill="none" stroke-dasharray="477.0"/>
+  <path class="fkh" d="M175 352 L174 352" stroke="#B9AAAE" stroke-width="2.5" fill="none" marker-end="url(#ah-muted)"/>
+
+  <!-- Main sets one path: accepted, rev 3 -> 4 -->
+  <path class="m1" d="M172 228 H507" stroke="#FF5252" stroke-width="2.5" fill="none" stroke-dasharray="336.0"/>
+  <path class="m2" d="M541 228 H572 L646.8 315.9" stroke="#FF5252" stroke-width="2.5" fill="none" stroke-dasharray="147.4"/>
+  <path class="m2h" d="M646.2 315.1 L646.8 315.9" stroke="#FF5252" stroke-width="2.5" fill="none" marker-end="url(#ah-red)"/>
+  <g class="chipM">
+    <rect x="194" y="210" width="272" height="36" rx="8" fill="#141011" stroke="#FF5252" stroke-width="2"/>
+    <text class="mono" x="330" y="235" text-anchor="middle" font-size="20" fill="#F3EDEE">release.ready = true</text>
+  </g>
+  <g class="chkM">
+    <circle cx="524" cy="228" r="17" fill="#21191B"/>
+    <use href="#g-check-o" x="508" y="212" width="32" height="32"/>
+  </g>
+  <text class="mono revM" x="524" y="204" text-anchor="middle" font-size="20" fill="#B9AAAE">rev 3 → 4</text>
+
+  <!-- Subagent increments one path atomically: accepted, rev 4 -> 5 -->
+  <path class="s1" d="M172 476 H507" stroke="#FF5252" stroke-width="2.5" fill="none" stroke-dasharray="336.0"/>
+  <path class="s2" d="M541 476 H572 L646.8 388.1" stroke="#FF5252" stroke-width="2.5" fill="none" stroke-dasharray="147.4"/>
+  <path class="s2h" d="M646.2 388.9 L646.8 388.1" stroke="#FF5252" stroke-width="2.5" fill="none" marker-end="url(#ah-red)"/>
+  <g class="chipS">
+    <rect x="200" y="458" width="260" height="36" rx="8" fill="#141011" stroke="#FF5252" stroke-width="2"/>
+    <text class="mono" x="330" y="483" text-anchor="middle" font-size="20" fill="#F3EDEE">incidents.open += 1</text>
+  </g>
+  <g class="chkS">
+    <circle cx="524" cy="476" r="17" fill="#21191B"/>
+    <use href="#g-check-o" x="508" y="460" width="32" height="32"/>
+  </g>
+  <text class="mono revS" x="524" y="518" text-anchor="middle" font-size="20" fill="#B9AAAE">rev 4 → 5</text>
+
+  <!-- DB -> web UI -->
+  <path class="ui" d="M750 352 L804 352" stroke="#FF5252" stroke-width="2.5" fill="none" stroke-dasharray="55.0"/>
+  <path class="uih" d="M803 352 L804 352" stroke="#FF5252" stroke-width="2.5" fill="none" marker-end="url(#ah-red)"/>
+
+  <!-- Web UI: live controls, and the JSON editor's full-document save -->
+  <rect x="816" y="100" width="336" height="464" rx="12" fill="#21191B" stroke="#F3EDEE" stroke-width="2"/>
+  <path d="M816 152 H1152" stroke="#F3EDEE" stroke-width="2"/>
+  <circle cx="842" cy="126" r="5" fill="#FF5252"/>
+  <circle cx="862" cy="126" r="5" fill="#B9AAAE"/>
+  <circle cx="882" cy="126" r="5" fill="#B9AAAE"/>
+  <text x="984" y="134" text-anchor="middle" font-size="22" fill="#F3EDEE">web UI</text>
+
+  <rect class="cardA" x="840" y="176" width="288" height="164" rx="10" fill="#141011" stroke="#443438" stroke-width="2"/>
+  <text class="mono" x="860" y="225" font-size="20" fill="#B9AAAE">release.ready</text>
+  <rect class="pill" x="1028" y="198" width="80" height="40" rx="20" fill="#5A2328" stroke="#FF5252" stroke-width="2.5"/>
+  <circle class="knob" cx="1088" cy="218" r="13" fill="#FF5252"/>
+  <path d="M860 258 H1108" stroke="#443438" stroke-width="1.5"/>
+  <text class="mono" x="860" y="305" font-size="20" fill="#B9AAAE">incidents.open</text>
+  <text class="n1" x="1106" y="314" text-anchor="end" font-size="44" font-weight="600" fill="#F3EDEE" opacity="0">1</text>
+  <text class="n2" x="1106" y="314" text-anchor="end" font-size="44" font-weight="600" fill="#F3EDEE">2</text>
+
+  <rect x="840" y="364" width="288" height="177" rx="10" fill="#141011" stroke="#443438" stroke-width="2"/>
+  <text x="860" y="394" font-size="20" letter-spacing="1" fill="#B9AAAE">JSON</text>
+  <rect class="save" x="860" y="406" width="84" height="36" rx="8" fill="#21191B" stroke="#B9AAAE" stroke-width="2"/>
+  <text class="mono" x="902" y="431" text-anchor="middle" font-size="20" fill="#F3EDEE">save</text>
+  <text x="960" y="431" font-size="20" fill="#B9AAAE">from rev 3</text>
+  <g class="b409">
+    <rect x="860" y="456" width="180" height="36" rx="8" fill="#3A1D20" stroke="#FF5252" stroke-width="2"/>
+    <text x="950" y="481" text-anchor="middle" font-size="22" font-weight="600" fill="#F3EDEE">409 conflict</text>
+  </g>
+  <text class="note" x="860" y="520" font-size="20" fill="#B9AAAE">reload, then save</text>
+
+  <text x="48" y="610" font-size="22" fill="#B9AAAE">One JSON document per device.</text>
+  <text x="48" y="640" font-size="22" fill="#B9AAAE">Agents change it one path at a time; a stale full-document save gets 409.</text>
+</svg>

package/images/11_durable_jobs_wait.svg

@@ -0,0 +1,141 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" width="1200" height="700" role="img" aria-labelledby="title desc" font-family="Inter, 'Segoe UI', Helvetica, Arial, sans-serif">
+  <title id="title">Durable jobs wait for you</title>
+  <desc id="desc">The release-check job runs plan, gather, approve, publish and verify on mac-mini, writing one checkpoint per phase; it waits at approve for a person, the wait survives a device restart, and after approval the job finishes.</desc>
+  <style>
+    .mono { font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; }
+    @keyframes prog { 0%, 2.86% { stroke-dashoffset: 939 } 5.71%, 9.29% { stroke-dashoffset: 865 } 12.86%, 16.43% { stroke-dashoffset: 685 } 20%, 49.29% { stroke-dashoffset: 535 } 51.79%, 53.21% { stroke-dashoffset: 325 } 55.71%, 57.14% { stroke-dashoffset: 145 } 59.64%, 96% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 939 } }
+    .prog { animation: prog 14s ease-in-out infinite; }
+    @keyframes ck-plan { 0%, 5.71% { opacity: 0; transform: scale(0.55) } 7.11% { opacity: 1; transform: scale(1.12) } 7.86%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.55) } }
+    .ck-plan { animation: ck-plan 14s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes cp-plan { 0%, 7.14% { opacity: 0 } 9.29%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .cp-plan { animation: cp-plan 14s ease-in-out infinite; }
+    @keyframes ck-gather { 0%, 12.86% { opacity: 0; transform: scale(0.55) } 14.25% { opacity: 1; transform: scale(1.12) } 15%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.55) } }
+    .ck-gather { animation: ck-gather 14s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes cp-gather { 0%, 14.29% { opacity: 0 } 16.43%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .cp-gather { animation: cp-gather 14s ease-in-out infinite; }
+    @keyframes ck-publish { 0%, 51.79% { opacity: 0; transform: scale(0.55) } 53.18% { opacity: 1; transform: scale(1.12) } 53.93%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.55) } }
+    .ck-publish { animation: ck-publish 14s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes cp-publish { 0%, 52.86% { opacity: 0 } 55%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .cp-publish { animation: cp-publish 14s ease-in-out infinite; }
+    @keyframes ck-verify { 0%, 55.71% { opacity: 0; transform: scale(0.55) } 57.11% { opacity: 1; transform: scale(1.12) } 57.86%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.55) } }
+    .ck-verify { animation: ck-verify 14s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes cp-verify { 0%, 56.79% { opacity: 0 } 58.93%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .cp-verify { animation: cp-verify 14s ease-in-out infinite; }
+    @keyframes tile { 0%, 20% { stroke: #6B5A5E } 21.43%, 96% { stroke: #FF5252 } 100% { stroke: #6B5A5E } }
+    .tile { animation: tile 14s ease-in-out infinite; }
+    @keyframes waiting { 0%, 20% { opacity: 0 } 22.14%, 47.14% { opacity: 1 } 48.57%, 100% { opacity: 0 } }
+    .waiting { animation: waiting 14s ease-in-out infinite; }
+    @keyframes cp-approve { 0%, 21.43% { opacity: 0 } 23.57%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .cp-approve { animation: cp-approve 14s ease-in-out infinite; }
+    @keyframes ring { 0%, 21.43% { opacity: 0; transform: scale(.85) } 21.79% { opacity: .9; transform: scale(.85) } 27.14% { opacity: 0; transform: scale(1.3) } 27.5% { opacity: .9; transform: scale(.85) } 32.86% { opacity: 0; transform: scale(1.3) } 41.43% { opacity: 0; transform: scale(.85) } 41.79% { opacity: .9; transform: scale(.85) } 47.14%, 100% { opacity: 0; transform: scale(1.3) } }
+    .ring { animation: ring 14s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes restart { 0%, 32.86% { opacity: 0 } 34.29%, 39.29% { opacity: 1 } 40.71%, 100% { opacity: 0 } }
+    .restart { animation: restart 14s ease-in-out infinite; }
+    @keyframes host { 0%, 32.86% { opacity: 1 } 34.29%, 39.29% { opacity: .25 } 40.71%, 100% { opacity: 1 } }
+    .host { animation: host 14s ease-in-out infinite; }
+    @keyframes approved { 0%, 47.86% { opacity: 0 } 49.29%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .approved { animation: approved 14s ease-in-out infinite; }
+    @keyframes ck-approve { 0%, 47.86% { opacity: 0; transform: scale(0.55) } 49.25% { opacity: 1; transform: scale(1.12) } 50%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.55) } }
+    .ck-approve { animation: ck-approve 14s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes done { 0%, 59.64% { opacity: .3; transform: scale(.94) } 61.79%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: .3; transform: scale(.94) } }
+    .done { animation: done 14s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
+  </style>
+  <defs>
+    <symbol id="g-pi" viewBox="0 0 64 64">
+      <rect x="1.5" y="1.5" width="61" height="61" rx="12" fill="#141011" stroke="#FF5252" stroke-width="2.5"/>
+      <g fill="#FFFFFF" transform="translate(16 16) scale(8)">
+        <path d="M0 0H3V2H2V1H0Z"/>
+        <path d="M0 1H1V2H2V3H1V4H0Z"/>
+        <path d="M3 2H4V4H3Z"/>
+      </g>
+    </symbol>
+    <symbol id="g-db" viewBox="0 0 48 60">
+      <path d="M3 10 V50 A21 7 0 0 0 45 50 V10" fill="#3A1D20" stroke="#FF5252" stroke-width="2.5"/>
+      <ellipse cx="24" cy="10" rx="21" ry="7" fill="#5A2328" stroke="#FF5252" stroke-width="2.5"/>
+      <path d="M3 24 A21 7 0 0 0 45 24 M3 37 A21 7 0 0 0 45 37" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+    </symbol>
+    <symbol id="g-server" viewBox="0 0 64 44">
+      <rect x="3" y="4" width="58" height="16" rx="4" fill="#21191B" stroke="#F3EDEE" stroke-width="2.5"/>
+      <rect x="3" y="24" width="58" height="16" rx="4" fill="#21191B" stroke="#F3EDEE" stroke-width="2.5"/>
+      <circle cx="13" cy="12" r="2.6" fill="#FF5252"/><circle cx="13" cy="32" r="2.6" fill="#FF5252"/>
+      <path d="M36 12 H53 M36 32 H53" stroke="#B9AAAE" stroke-width="2.5" stroke-linecap="round"/>
+    </symbol>
+    <symbol id="g-check" viewBox="0 0 32 32">
+      <circle cx="16" cy="16" r="14" fill="#FF5252"/>
+      <path d="M9 16.5 L14 21.5 L23.5 11" fill="none" stroke="#141011" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/>
+    </symbol>
+    <symbol id="g-person" viewBox="0 0 40 40">
+      <circle cx="20" cy="13" r="7.5" fill="none" stroke="#F3EDEE" stroke-width="2.5"/>
+      <path d="M6 36 C7 27 13 23 20 23 C27 23 33 27 34 36" fill="none" stroke="#F3EDEE" stroke-width="2.5" stroke-linecap="round"/>
+    </symbol>
+    <marker id="ah-red" viewBox="0 0 12 12" refX="4" refY="6" markerWidth="12" markerHeight="12" markerUnits="userSpaceOnUse" orient="auto"><path d="M0 1 L12 6 L0 11 Z" fill="#FF5252"/></marker>
+    <marker id="ah-quiet" viewBox="0 0 12 12" refX="4" refY="6" markerWidth="12" markerHeight="12" markerUnits="userSpaceOnUse" orient="auto"><path d="M0 1 L12 6 L0 11 Z" fill="#6B5A5E"/></marker>
+  </defs>
+
+  <rect width="1200" height="700" rx="18" fill="#141011"/>
+  <text x="48" y="70" font-size="34" font-weight="600" fill="#F3EDEE">Durable jobs wait for you</text>
+
+  <rect x="48" y="100" width="1104" height="568" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+
+  <!-- Header: the job and the device it runs on -->
+  <text class="mono" x="80" y="152" font-size="24" fill="#F3EDEE">release-check</text>
+  <g class="host">
+    <use href="#g-server" x="936" y="122" width="64" height="44"/>
+    <text class="mono" x="1016" y="151" font-size="22" fill="#F3EDEE">mac-mini</text>
+  </g>
+  <g class="restart" opacity="0">
+    <rect x="700" y="126" width="216" height="36" rx="18" fill="#141011" stroke="#6B5A5E" stroke-width="2"/>
+    <path d="M726.7 136.5 A8 8 0 1 0 732 144" fill="none" stroke="#B9AAAE" stroke-width="2.2" stroke-linecap="round"/>
+    <path d="M728 145 L732 139.5 L736 145 Z" fill="#B9AAAE"/>
+    <text x="744" y="151" font-size="20" fill="#B9AAAE">device restart</text>
+  </g>
+
+  <!-- Phase line: the red progress pauses at approve -->
+  <path d="M96 292 H1034" stroke="#6B5A5E" stroke-width="3" fill="none"/>
+  <path class="prog" d="M96 292 H1034" stroke="#FF5252" stroke-width="3.5" fill="none" stroke-dasharray="939"/>
+  <circle cx="170" cy="292" r="13" fill="#21191B" stroke="#6B5A5E" stroke-width="2.5"/>
+  <circle cx="350" cy="292" r="13" fill="#21191B" stroke="#6B5A5E" stroke-width="2.5"/>
+  <circle cx="710" cy="292" r="13" fill="#21191B" stroke="#6B5A5E" stroke-width="2.5"/>
+  <circle cx="890" cy="292" r="13" fill="#21191B" stroke="#6B5A5E" stroke-width="2.5"/>
+  <g class="ck-plan"><use href="#g-check" x="154" y="276" width="32" height="32"/></g>
+  <g class="ck-gather"><use href="#g-check" x="334" y="276" width="32" height="32"/></g>
+  <g class="ck-publish"><use href="#g-check" x="694" y="276" width="32" height="32"/></g>
+  <g class="ck-verify"><use href="#g-check" x="874" y="276" width="32" height="32"/></g>
+
+  <!-- approve: a person gate -->
+  <circle class="ring" cx="530" cy="292" r="46" fill="none" stroke="#FF5252" stroke-width="2.5" opacity="0"/>
+  <rect class="tile" x="500" y="262" width="60" height="60" rx="12" fill="#141011" stroke="#FF5252" stroke-width="2.5"/>
+  <use href="#g-person" x="510" y="272" width="40" height="40"/>
+  <g class="ck-approve"><use href="#g-check" x="546" y="306" width="26" height="26"/></g>
+  <text class="waiting" x="530" y="240" text-anchor="middle" font-size="22" fill="#FF5252" opacity="0">waiting for you</text>
+  <text class="approved" x="530" y="240" text-anchor="middle" font-size="22" fill="#FF5252">approved</text>
+
+  <!-- Done -->
+  <g class="done">
+    <use href="#g-pi" x="1034" y="260" width="64" height="64"/>
+    <text x="1066" y="354" text-anchor="middle" font-size="22" fill="#F3EDEE">Done</text>
+  </g>
+
+  <text x="170" y="354" text-anchor="middle" font-size="22" fill="#F3EDEE">plan</text>
+  <text x="350" y="354" text-anchor="middle" font-size="22" fill="#F3EDEE">gather</text>
+  <text x="530" y="354" text-anchor="middle" font-size="22" fill="#F3EDEE">approve</text>
+  <text x="710" y="354" text-anchor="middle" font-size="22" fill="#F3EDEE">publish</text>
+  <text x="890" y="354" text-anchor="middle" font-size="22" fill="#F3EDEE">verify</text>
+  <text x="350" y="380" text-anchor="middle" font-size="20" fill="#B9AAAE">subagent</text>
+
+  <!-- One checkpoint per phase -->
+  <use href="#g-db" x="482" y="490" width="96" height="120"/>
+  <path d="M170 396 L492.4 494.9 L492.4 494.9" stroke="#443438" stroke-width="2.5" fill="none" marker-end="url(#ah-quiet)"/>
+  <path class="cp-plan" d="M170 396 L492.4 494.9 L492.4 494.9" stroke="#FF5252" stroke-width="2.5" fill="none" marker-end="url(#ah-red)"/>
+  <path d="M350 396 L508.1 489.8 L508.1 489.8" stroke="#443438" stroke-width="2.5" fill="none" marker-end="url(#ah-quiet)"/>
+  <path class="cp-gather" d="M350 396 L508.1 489.8 L508.1 489.8" stroke="#FF5252" stroke-width="2.5" fill="none" marker-end="url(#ah-red)"/>
+  <path d="M530 396 L530 485 L530 485" stroke="#443438" stroke-width="2.5" fill="none" marker-end="url(#ah-quiet)"/>
+  <path class="cp-approve" d="M530 396 L530 485 L530 485" stroke="#FF5252" stroke-width="2.5" fill="none" marker-end="url(#ah-red)"/>
+  <path d="M710 396 L551.9 489.8 L551.9 489.8" stroke="#443438" stroke-width="2.5" fill="none" marker-end="url(#ah-quiet)"/>
+  <path class="cp-publish" d="M710 396 L551.9 489.8 L551.9 489.8" stroke="#FF5252" stroke-width="2.5" fill="none" marker-end="url(#ah-red)"/>
+  <path d="M890 396 L567.6 494.9 L567.6 494.9" stroke="#443438" stroke-width="2.5" fill="none" marker-end="url(#ah-quiet)"/>
+  <path class="cp-verify" d="M890 396 L567.6 494.9 L567.6 494.9" stroke="#FF5252" stroke-width="2.5" fill="none" marker-end="url(#ah-red)"/>
+  <text x="530" y="644" text-anchor="middle" font-size="22" fill="#F3EDEE">one checkpoint per phase</text>
+  <text x="620" y="558" font-size="22" fill="#B9AAAE">A restart resumes the current phase.</text>
+</svg>

package/images/12_tools_change_mid_run.svg

@@ -0,0 +1,231 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="752" viewBox="0 0 1200 752" role="img" aria-labelledby="title desc" font-family="Inter, 'Segoe UI', Helvetica, Arial, sans-serif">
+  <title id="title">Change the tools mid-run</title>
+  <desc id="desc">An agent's fourteen installed tools flow into its tool list, then turning on the Read only switch strikes the eight that write (bash, write, edit, update_state, run_durable_job, subagent, start_session and ping_on_call_engineer), so the agent's next request sees six: read, read_state, list_durable_jobs, check_durable_job, search_history and handoff.</desc>
+  <defs>
+    <symbol id="g-pi" viewBox="0 0 64 64">
+      <rect x="1.5" y="1.5" width="61" height="61" rx="12" fill="#141011" stroke="#FF5252" stroke-width="2.5"/>
+      <g fill="#FFFFFF" transform="translate(16 16) scale(8)">
+        <path d="M0 0H3V2H2V1H0Z"/>
+        <path d="M0 1H1V2H2V3H1V4H0Z"/>
+        <path d="M3 2H4V4H3Z"/>
+      </g>
+    </symbol>
+    <marker id="head-red" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="5" markerHeight="5" orient="auto" markerUnits="strokeWidth">
+      <path d="M0 0L10 5L0 10Z" fill="#FF5252"/>
+    </marker>
+    <marker id="head-muted" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="5" markerHeight="5" orient="auto" markerUnits="strokeWidth">
+      <path d="M0 0L10 5L0 10Z" fill="#B9AAAE"/>
+    </marker>
+  </defs>
+  <style>
+    .mono { font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; }
+    .an { animation-duration: 13s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
+    .draw { stroke-dasharray: 1 2; }
+
+    /* 1. all fourteen installed tools flow into AGENT TOOLS */
+    .f0 { animation-name: flow0; } .f1 { animation-name: flow1; } .f2 { animation-name: flow2; } .f3 { animation-name: flow3; }
+    .f4 { animation-name: flow4; } .f5 { animation-name: flow5; } .f6 { animation-name: flow6; } .f7 { animation-name: flow7; }
+    .f8 { animation-name: flow8; } .f9 { animation-name: flow9; } .f10 { animation-name: flow10; } .f11 { animation-name: flow11; }
+    .f12 { animation-name: flow12; } .f13 { animation-name: flow13; }
+    @keyframes flow0 { 0%, 4% { opacity: 0; transform: translateX(-412px) } 6% { opacity: 1 } 11%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @keyframes flow1 { 0%, 5% { opacity: 0; transform: translateX(-412px) } 7% { opacity: 1 } 12%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @keyframes flow2 { 0%, 6% { opacity: 0; transform: translateX(-412px) } 8% { opacity: 1 } 13%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @keyframes flow3 { 0%, 7% { opacity: 0; transform: translateX(-412px) } 9% { opacity: 1 } 14%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @keyframes flow4 { 0%, 8% { opacity: 0; transform: translateX(-412px) } 10% { opacity: 1 } 15%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @keyframes flow5 { 0%, 9% { opacity: 0; transform: translateX(-412px) } 11% { opacity: 1 } 16%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @keyframes flow6 { 0%, 10% { opacity: 0; transform: translateX(-412px) } 12% { opacity: 1 } 17%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @keyframes flow7 { 0%, 11% { opacity: 0; transform: translateX(-412px) } 13% { opacity: 1 } 18%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @keyframes flow8 { 0%, 12% { opacity: 0; transform: translateX(-412px) } 14% { opacity: 1 } 19%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @keyframes flow9 { 0%, 13% { opacity: 0; transform: translateX(-412px) } 15% { opacity: 1 } 20%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @keyframes flow10 { 0%, 14% { opacity: 0; transform: translateX(-412px) } 16% { opacity: 1 } 21%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @keyframes flow11 { 0%, 15% { opacity: 0; transform: translateX(-412px) } 17% { opacity: 1 } 22%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @keyframes flow12 { 0%, 16% { opacity: 0; transform: translateX(-412px) } 18% { opacity: 1 } 23%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @keyframes flow13 { 0%, 17% { opacity: 0; transform: translateX(-412px) } 19% { opacity: 1 } 24%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+
+    /* 2. the Read only switch turns on */
+    .sw-pill { animation-name: sw-pill; }
+    .sw-track { animation-name: sw-track; }
+    .sw-knob { animation-name: sw-knob; }
+    .sw-label { animation-name: sw-label; }
+    @keyframes sw-pill { 0%, 28% { stroke: #443438 } 31%, 96% { stroke: #FF5252 } 100% { stroke: #443438 } }
+    @keyframes sw-track { 0%, 28% { fill: #443438 } 31%, 96% { fill: #FF5252 } 100% { fill: #443438 } }
+    @keyframes sw-knob { 0%, 28% { transform: translateX(-22px); fill: #B9AAAE } 31%, 96% { transform: translateX(0); fill: #F3EDEE } 100% { transform: translateX(-22px); fill: #B9AAAE } }
+    @keyframes sw-label { 0%, 28% { fill: #B9AAAE } 31%, 96% { fill: #F3EDEE } 100% { fill: #B9AAAE } }
+    .sw-line { animation-name: sw-line; }
+    .sw-head { animation-name: sw-head; }
+    @keyframes sw-line { 0%, 31% { stroke-dashoffset: 1; opacity: 1 } 35%, 96% { stroke-dashoffset: 0; opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 0 } }
+    @keyframes sw-head { 0%, 34.5% { opacity: 0 } 35%, 96% { opacity: 1 } 100% { opacity: 0 } }
+
+    /* 3. the eight tools that write are struck and fade; the six read tools turn red */
+    .s0 { animation-name: strike0; } .s1 { animation-name: strike1; } .s2 { animation-name: strike2; } .s3 { animation-name: strike3; }
+    .s4 { animation-name: strike4; } .s5 { animation-name: strike5; } .s6 { animation-name: strike6; } .s7 { animation-name: strike7; }
+    @keyframes strike0 { 0%, 35% { stroke-dashoffset: 1; stroke: #FF5252 } 38%, 42% { stroke-dashoffset: 0; stroke: #FF5252 } 46%, 100% { stroke-dashoffset: 0; stroke: #6B5A5E } }
+    @keyframes strike1 { 0%, 35.5% { stroke-dashoffset: 1; stroke: #FF5252 } 38.5%, 42% { stroke-dashoffset: 0; stroke: #FF5252 } 46%, 100% { stroke-dashoffset: 0; stroke: #6B5A5E } }
+    @keyframes strike2 { 0%, 36% { stroke-dashoffset: 1; stroke: #FF5252 } 39%, 42% { stroke-dashoffset: 0; stroke: #FF5252 } 46%, 100% { stroke-dashoffset: 0; stroke: #6B5A5E } }
+    @keyframes strike3 { 0%, 36.5% { stroke-dashoffset: 1; stroke: #FF5252 } 39.5%, 42% { stroke-dashoffset: 0; stroke: #FF5252 } 46%, 100% { stroke-dashoffset: 0; stroke: #6B5A5E } }
+    @keyframes strike4 { 0%, 37% { stroke-dashoffset: 1; stroke: #FF5252 } 40%, 42% { stroke-dashoffset: 0; stroke: #FF5252 } 46%, 100% { stroke-dashoffset: 0; stroke: #6B5A5E } }
+    @keyframes strike5 { 0%, 37.5% { stroke-dashoffset: 1; stroke: #FF5252 } 40.5%, 42% { stroke-dashoffset: 0; stroke: #FF5252 } 46%, 100% { stroke-dashoffset: 0; stroke: #6B5A5E } }
+    @keyframes strike6 { 0%, 38% { stroke-dashoffset: 1; stroke: #FF5252 } 41%, 42% { stroke-dashoffset: 0; stroke: #FF5252 } 46%, 100% { stroke-dashoffset: 0; stroke: #6B5A5E } }
+    @keyframes strike7 { 0%, 38.5% { stroke-dashoffset: 1; stroke: #FF5252 } 41.5%, 42% { stroke-dashoffset: 0; stroke: #FF5252 } 46%, 100% { stroke-dashoffset: 0; stroke: #6B5A5E } }
+    .drop-rect { animation-name: drop-rect; }
+    .drop-text { animation-name: drop-text; }
+    .keep { animation-name: keep; }
+    @keyframes drop-rect { 0%, 42% { stroke: #443438 } 46%, 100% { stroke: #2E2427 } }
+    @keyframes drop-text { 0%, 42% { fill: #F3EDEE } 46%, 100% { fill: #6B5A5E } }
+    @keyframes keep { 0%, 42% { stroke: #443438 } 46%, 100% { stroke: #FF5252 } }
+
+    /* 4. the next request goes out with six tools */
+    .nx-line { animation-name: nx-line; }
+    .nx-head { animation-name: nx-head; }
+    .nx-in { animation-name: nx-in; }
+    @keyframes nx-line { 0%, 48% { stroke-dashoffset: 1; opacity: 1 } 53%, 96% { stroke-dashoffset: 0; opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 0 } }
+    @keyframes nx-head { 0%, 52.5% { opacity: 0 } 53%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes nx-in { 0%, 53% { opacity: 0; transform: translateY(8px) } 58%, 96% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(0) } }
+
+    @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
+  </style>
+
+  <rect width="1200" height="752" rx="18" fill="#141011"/>
+  <text x="48" y="70" font-size="34" font-weight="600" fill="#F3EDEE">Change the tools mid-run</text>
+
+  <!-- panels -->
+  <g fill="#21191B" stroke="#443438" stroke-width="2">
+    <rect x="48" y="112" width="328" height="558" rx="12"/>
+    <rect x="460" y="112" width="328" height="558" rx="12"/>
+    <rect x="872" y="112" width="280" height="254" rx="12"/>
+  </g>
+  <g font-size="20" letter-spacing="1" fill="#B9AAAE" text-anchor="middle">
+    <text x="212" y="148">INSTALLED TOOLS</text>
+    <text x="624" y="148">AGENT TOOLS</text>
+    <text x="1012" y="148">NEXT REQUEST</text>
+  </g>
+
+  <!-- installed tools: six that read, eight that write -->
+  <g fill="#141011" stroke="#443438" stroke-width="2">
+    <rect x="68" y="168" width="288" height="30" rx="7"/>
+    <rect x="68" y="203" width="288" height="30" rx="7"/>
+    <rect x="68" y="238" width="288" height="30" rx="7"/>
+    <rect x="68" y="273" width="288" height="30" rx="7"/>
+    <rect x="68" y="308" width="288" height="30" rx="7"/>
+    <rect x="68" y="343" width="288" height="30" rx="7"/>
+    <rect x="68" y="378" width="288" height="30" rx="7"/>
+    <rect x="68" y="413" width="288" height="30" rx="7"/>
+    <rect x="68" y="448" width="288" height="30" rx="7"/>
+    <rect x="68" y="483" width="288" height="30" rx="7"/>
+    <rect x="68" y="518" width="288" height="30" rx="7"/>
+    <rect x="68" y="553" width="288" height="30" rx="7"/>
+    <rect x="68" y="588" width="288" height="30" rx="7"/>
+    <rect x="68" y="623" width="288" height="30" rx="7"/>
+  </g>
+  <g class="mono" font-size="20" fill="#F3EDEE">
+    <text x="84" y="189">read</text>
+    <text x="84" y="224">read_state</text>
+    <text x="84" y="259">list_durable_jobs</text>
+    <text x="84" y="294">check_durable_job</text>
+    <text x="84" y="329">search_history</text>
+    <text x="84" y="364">handoff</text>
+    <text x="84" y="399">bash</text>
+    <text x="84" y="434">write</text>
+    <text x="84" y="469">edit</text>
+    <text x="84" y="504">update_state</text>
+    <text x="84" y="539">run_durable_job</text>
+    <text x="84" y="574">subagent</text>
+    <text x="84" y="609">start_session</text>
+    <text x="84" y="644">ping_on_call_engineer</text>
+  </g>
+
+  <!-- installed tools flow to the agent -->
+  <path d="M378 391H456" fill="none" stroke="#B9AAAE" stroke-width="2.5" marker-end="url(#head-muted)"/>
+
+  <!-- the switch acts on the agent's tools that write -->
+  <path class="an draw sw-line" pathLength="1" d="M872 516H792" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+  <path class="an sw-head" d="M800 516H792" fill="none" stroke="#FF5252" stroke-width="2.5" marker-end="url(#head-red)"/>
+
+  <!-- the agent's tools go out with its next request -->
+  <path class="an draw nx-line" pathLength="1" d="M790 258H868" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+  <path class="an nx-head" d="M860 258H868" fill="none" stroke="#FF5252" stroke-width="2.5" marker-end="url(#head-red)"/>
+
+  <g class="mono" font-size="20">
+    <!-- agent tools: kept -->
+    <g class="an f0">
+      <rect class="an keep" x="480" y="168" width="288" height="30" rx="7" fill="#141011" stroke="#FF5252" stroke-width="2"/>
+      <text x="496" y="189" fill="#F3EDEE">read</text>
+    </g>
+    <g class="an f1">
+      <rect class="an keep" x="480" y="203" width="288" height="30" rx="7" fill="#141011" stroke="#FF5252" stroke-width="2"/>
+      <text x="496" y="224" fill="#F3EDEE">read_state</text>
+    </g>
+    <g class="an f2">
+      <rect class="an keep" x="480" y="238" width="288" height="30" rx="7" fill="#141011" stroke="#FF5252" stroke-width="2"/>
+      <text x="496" y="259" fill="#F3EDEE">list_durable_jobs</text>
+    </g>
+    <g class="an f3">
+      <rect class="an keep" x="480" y="273" width="288" height="30" rx="7" fill="#141011" stroke="#FF5252" stroke-width="2"/>
+      <text x="496" y="294" fill="#F3EDEE">check_durable_job</text>
+    </g>
+    <g class="an f4">
+      <rect class="an keep" x="480" y="308" width="288" height="30" rx="7" fill="#141011" stroke="#FF5252" stroke-width="2"/>
+      <text x="496" y="329" fill="#F3EDEE">search_history</text>
+    </g>
+    <g class="an f5">
+      <rect class="an keep" x="480" y="343" width="288" height="30" rx="7" fill="#141011" stroke="#FF5252" stroke-width="2"/>
+      <text x="496" y="364" fill="#F3EDEE">handoff</text>
+    </g>
+
+    <!-- agent tools: removed by Read only -->
+    <g class="an f6">
+      <rect class="an drop-rect" x="480" y="378" width="288" height="30" rx="7" fill="#141011" stroke="#2E2427" stroke-width="2"/>
+      <text class="an drop-text" x="496" y="399" fill="#6B5A5E">bash</text>
+      <path class="an draw s0" pathLength="1" d="M491 393H549" fill="none" stroke="#6B5A5E" stroke-width="2"/>
+    </g>
+    <g class="an f7">
+      <rect class="an drop-rect" x="480" y="413" width="288" height="30" rx="7" fill="#141011" stroke="#2E2427" stroke-width="2"/>
+      <text class="an drop-text" x="496" y="434" fill="#6B5A5E">write</text>
+      <path class="an draw s1" pathLength="1" d="M491 428H561" fill="none" stroke="#6B5A5E" stroke-width="2"/>
+    </g>
+    <g class="an f8">
+      <rect class="an drop-rect" x="480" y="448" width="288" height="30" rx="7" fill="#141011" stroke="#2E2427" stroke-width="2"/>
+      <text class="an drop-text" x="496" y="469" fill="#6B5A5E">edit</text>
+      <path class="an draw s2" pathLength="1" d="M491 463H549" fill="none" stroke="#6B5A5E" stroke-width="2"/>
+    </g>
+    <g class="an f9">
+      <rect class="an drop-rect" x="480" y="483" width="288" height="30" rx="7" fill="#141011" stroke="#2E2427" stroke-width="2"/>
+      <text class="an drop-text" x="496" y="504" fill="#6B5A5E">update_state</text>
+      <path class="an draw s3" pathLength="1" d="M491 498H645" fill="none" stroke="#6B5A5E" stroke-width="2"/>
+    </g>
+    <g class="an f10">
+      <rect class="an drop-rect" x="480" y="518" width="288" height="30" rx="7" fill="#141011" stroke="#2E2427" stroke-width="2"/>
+      <text class="an drop-text" x="496" y="539" fill="#6B5A5E">run_durable_job</text>
+      <path class="an draw s4" pathLength="1" d="M491 533H681" fill="none" stroke="#6B5A5E" stroke-width="2"/>
+    </g>
+    <g class="an f11">
+      <rect class="an drop-rect" x="480" y="553" width="288" height="30" rx="7" fill="#141011" stroke="#2E2427" stroke-width="2"/>
+      <text class="an drop-text" x="496" y="574" fill="#6B5A5E">subagent</text>
+      <path class="an draw s5" pathLength="1" d="M491 568H597" fill="none" stroke="#6B5A5E" stroke-width="2"/>
+    </g>
+    <g class="an f12">
+      <rect class="an drop-rect" x="480" y="588" width="288" height="30" rx="7" fill="#141011" stroke="#2E2427" stroke-width="2"/>
+      <text class="an drop-text" x="496" y="609" fill="#6B5A5E">start_session</text>
+      <path class="an draw s6" pathLength="1" d="M491 603H657" fill="none" stroke="#6B5A5E" stroke-width="2"/>
+    </g>
+    <g class="an f13">
+      <rect class="an drop-rect" x="480" y="623" width="288" height="30" rx="7" fill="#141011" stroke="#2E2427" stroke-width="2"/>
+      <text class="an drop-text" x="496" y="644" fill="#6B5A5E">ping_on_call_engineer</text>
+      <path class="an draw s7" pathLength="1" d="M491 638H753" fill="none" stroke="#6B5A5E" stroke-width="2"/>
+    </g>
+  </g>
+
+  <!-- Read only switch -->
+  <rect class="an sw-pill" x="872" y="490" width="226" height="52" rx="26" fill="#21191B" stroke="#FF5252" stroke-width="2"/>
+  <rect class="an sw-track" x="890" y="503" width="48" height="26" rx="13" fill="#FF5252"/>
+  <circle class="an sw-knob" cx="925" cy="516" r="9" fill="#F3EDEE"/>
+  <text class="an sw-label" x="954" y="524" font-size="24" fill="#F3EDEE">Read only</text>
+
+  <!-- next request -->
+  <g class="an nx-in">
+    <use href="#g-pi" x="894" y="222" width="72" height="72"/>
+    <text x="982" y="266" font-size="22" fill="#B9AAAE">sees 6 tools</text>
+  </g>
+
+  <text x="48" y="720" font-size="22" fill="#B9AAAE">Tools, model, thinking and instructions apply from the agent's next request.</text>
+</svg>