my-durable 0.0.0-stage → 0.0.2

package/images/01_durable_agent_network.svg

@@ -0,0 +1,185 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 620" width="1200" height="620" role="img" aria-labelledby="title desc" font-family="Inter, 'Segoe UI', Helvetica, Arial, sans-serif">
+  <title id="title">The Durable Agent Network</title>
+  <desc id="desc">Three clients, a web UI, dpi-tui and curl, connect to four devices that each run a durable pi agent; every client disconnects, and every device keeps writing its run's checkpoints to its own SQLite until the run is done.</desc>
+  <style>
+    .a { animation-duration: 14s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
+    .ln { animation-timing-function: linear; }
+    .x { transform-box: fill-box; transform-origin: center; }
+    @keyframes cl0 { 0%, 1% { opacity: 0 } 4%, 42% { opacity: 1 } 46%, 96% { opacity: .35 } 100% { opacity: 0 } }
+    @keyframes lv0 { 0%, 4% { stroke-dashoffset: 1; opacity: 1 } 8%, 41.5% { stroke-dashoffset: 0; opacity: 1 } 44%, 100% { stroke-dashoffset: 0; opacity: 0 } }
+    @keyframes xr0 { 0%, 42% { opacity: 0; transform: scale(.3) } 44.5%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(1) } }
+    @keyframes dd0 { 0%, 42% { opacity: 0 } 44.5%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes cl1 { 0%, 2% { opacity: 0 } 5%, 42% { opacity: 1 } 46%, 96% { opacity: .35 } 100% { opacity: 0 } }
+    @keyframes lv1 { 0%, 5% { stroke-dashoffset: 1; opacity: 1 } 9%, 41.5% { stroke-dashoffset: 0; opacity: 1 } 44%, 100% { stroke-dashoffset: 0; opacity: 0 } }
+    @keyframes xr1 { 0%, 42.8% { opacity: 0; transform: scale(.3) } 45.3%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(1) } }
+    @keyframes dd1 { 0%, 42.8% { opacity: 0 } 45.3%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes cl2 { 0%, 3% { opacity: 0 } 6%, 42% { opacity: 1 } 46%, 96% { opacity: .35 } 100% { opacity: 0 } }
+    @keyframes lv2 { 0%, 6% { stroke-dashoffset: 1; opacity: 1 } 10%, 41.5% { stroke-dashoffset: 0; opacity: 1 } 44%, 100% { stroke-dashoffset: 0; opacity: 0 } }
+    @keyframes xr2 { 0%, 43.6% { opacity: 0; transform: scale(.3) } 46.1%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(1) } }
+    @keyframes dd2 { 0%, 43.6% { opacity: 0 } 46.1%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes bus { 0%, 9% { stroke-dashoffset: 1; opacity: 1 } 12.5%, 41.5% { stroke-dashoffset: 0; opacity: 1 } 44%, 100% { stroke-dashoffset: 0; opacity: 0 } }
+    @keyframes drop { 0%, 10.2% { stroke-dashoffset: 1; opacity: 1 } 11.4%, 41.5% { stroke-dashoffset: 0; opacity: 1 } 44%, 100% { stroke-dashoffset: 0; opacity: 0 } }
+    @keyframes jn { 0%, 7% { fill: #B9AAAE } 9%, 41.5% { fill: #FF5252 } 44%, 100% { fill: #B9AAAE } }
+    @keyframes cap { 0%, 62% { opacity: 0 } 65%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes mv0 { 0%, 10.5% { stroke-dashoffset: 0 } 56.5%, 100% { stroke-dashoffset: -132 } }
+    @keyframes mv1 { 0%, 10.5% { stroke-dashoffset: 0 } 47%, 100% { stroke-dashoffset: -99 } }
+    @keyframes mv2 { 0%, 10.5% { stroke-dashoffset: 0 } 62%, 100% { stroke-dashoffset: -143 } }
+    @keyframes mv3 { 0%, 10.5% { stroke-dashoffset: 0 } 54%, 100% { stroke-dashoffset: -121 } }
+    @keyframes q00 { 0%, 10.5% { fill: #141011; stroke: #6B5A5E } 11.1%, 13.2% { fill: #3A1D20; stroke: #FF5252 } 14%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q01 { 0%, 14% { fill: #141011; stroke: #6B5A5E } 14.6%, 21.7% { fill: #3A1D20; stroke: #FF5252 } 22.5%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q02 { 0%, 22.5% { fill: #141011; stroke: #6B5A5E } 23.1%, 30.2% { fill: #3A1D20; stroke: #FF5252 } 31%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q03 { 0%, 31% { fill: #141011; stroke: #6B5A5E } 31.6%, 38.7% { fill: #3A1D20; stroke: #FF5252 } 39.5%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q04 { 0%, 39.5% { fill: #141011; stroke: #6B5A5E } 40.1%, 47.2% { fill: #3A1D20; stroke: #FF5252 } 48%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q05 { 0%, 48% { fill: #141011; stroke: #6B5A5E } 48.6%, 55.7% { fill: #3A1D20; stroke: #FF5252 } 56.5%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q10 { 0%, 10.5% { fill: #141011; stroke: #6B5A5E } 11.1%, 11.2% { fill: #3A1D20; stroke: #FF5252 } 12%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q11 { 0%, 12% { fill: #141011; stroke: #6B5A5E } 12.6%, 18.2% { fill: #3A1D20; stroke: #FF5252 } 19%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q12 { 0%, 19% { fill: #141011; stroke: #6B5A5E } 19.6%, 25.2% { fill: #3A1D20; stroke: #FF5252 } 26%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q13 { 0%, 26% { fill: #141011; stroke: #6B5A5E } 26.6%, 32.2% { fill: #3A1D20; stroke: #FF5252 } 33%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q14 { 0%, 33% { fill: #141011; stroke: #6B5A5E } 33.6%, 39.2% { fill: #3A1D20; stroke: #FF5252 } 40%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q15 { 0%, 40% { fill: #141011; stroke: #6B5A5E } 40.6%, 46.2% { fill: #3A1D20; stroke: #FF5252 } 47%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q20 { 0%, 10.5% { fill: #141011; stroke: #6B5A5E } 11.1%, 14.2% { fill: #3A1D20; stroke: #FF5252 } 15%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q21 { 0%, 15% { fill: #141011; stroke: #6B5A5E } 15.6%, 23.6% { fill: #3A1D20; stroke: #FF5252 } 24.4%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q22 { 0%, 24.4% { fill: #141011; stroke: #6B5A5E } 25%, 33% { fill: #3A1D20; stroke: #FF5252 } 33.8%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q23 { 0%, 33.8% { fill: #141011; stroke: #6B5A5E } 34.4%, 42.4% { fill: #3A1D20; stroke: #FF5252 } 43.2%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q24 { 0%, 43.2% { fill: #141011; stroke: #6B5A5E } 43.8%, 51.8% { fill: #3A1D20; stroke: #FF5252 } 52.6%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q25 { 0%, 52.6% { fill: #141011; stroke: #6B5A5E } 53.2%, 61.2% { fill: #3A1D20; stroke: #FF5252 } 62%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q30 { 0%, 10.5% { fill: #141011; stroke: #6B5A5E } 11.1%, 12.2% { fill: #3A1D20; stroke: #FF5252 } 13%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q31 { 0%, 13% { fill: #141011; stroke: #6B5A5E } 13.6%, 20.4% { fill: #3A1D20; stroke: #FF5252 } 21.2%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q32 { 0%, 21.2% { fill: #141011; stroke: #6B5A5E } 21.8%, 28.6% { fill: #3A1D20; stroke: #FF5252 } 29.4%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q33 { 0%, 29.4% { fill: #141011; stroke: #6B5A5E } 30%, 36.8% { fill: #3A1D20; stroke: #FF5252 } 37.6%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q34 { 0%, 37.6% { fill: #141011; stroke: #6B5A5E } 38.2%, 45% { fill: #3A1D20; stroke: #FF5252 } 45.8%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @keyframes q35 { 0%, 45.8% { fill: #141011; stroke: #6B5A5E } 46.4%, 53.2% { fill: #3A1D20; stroke: #FF5252 } 54%, 96% { fill: #FF5252; stroke: #FF5252 } 100% { fill: #141011; stroke: #6B5A5E } }
+    @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="M 0 0H3V2H2V1H0Z"/>
+        <path d="M 0 1H1V2H2V3H1V4H0Z"/>
+        <path d="M 3 2H4V4H3Z"/>
+      </g>
+    </symbol>
+    <symbol id="g-db" viewBox="0 0 48 60">
+      <path d="M 3 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="M 3 24 A21 7 0 0 0 45 24 M 3 37 A21 7 0 0 0 45 37" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+    </symbol>
+    <symbol id="g-laptop" viewBox="0 0 64 44">
+      <rect x="9" y="3" width="46" height="30" rx="4" fill="#21191B" stroke="#F3EDEE" stroke-width="2.5"/>
+      <rect x="15" y="9" width="34" height="18" rx="2" fill="#141011"/>
+      <path d="M 2 37 H62 L58 42 H6 Z" fill="#F3EDEE"/>
+    </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="M 36 12 H53 M 36 32 H53" stroke="#B9AAAE" stroke-width="2.5" stroke-linecap="round"/>
+    </symbol>
+    <symbol id="g-cloud" viewBox="0 0 64 44">
+      <path d="M 18 38 H48 A11 11 0 0 0 48 16 A15 15 0 0 0 20 13 A12.5 12.5 0 0 0 18 38 Z" fill="#21191B" stroke="#F3EDEE" stroke-width="2.5" stroke-linejoin="round"/>
+      <rect x="25" y="22" width="16" height="10" rx="2" fill="none" stroke="#FF5252" stroke-width="2.2"/>
+    </symbol>
+    <symbol id="g-browser" viewBox="0 0 72 52">
+      <rect x="2" y="2" width="68" height="48" rx="6" fill="#21191B" stroke="#F3EDEE" stroke-width="2.5"/>
+      <path d="M 2 14 H70" stroke="#F3EDEE" stroke-width="2.5"/>
+      <circle cx="10" cy="8" r="2" fill="#FF5252"/><circle cx="17" cy="8" r="2" fill="#B9AAAE"/><circle cx="24" cy="8" r="2" fill="#B9AAAE"/>
+      <path d="M 12 26 H44 M 12 34 H58 M 12 42 H36" stroke="#B9AAAE" stroke-width="3" stroke-linecap="round"/>
+    </symbol>
+    <symbol id="g-terminal" viewBox="0 0 72 52">
+      <rect x="2" y="2" width="68" height="48" rx="6" fill="#21191B" stroke="#F3EDEE" stroke-width="2.5"/>
+      <path d="M 14 18 L24 26 L14 34" fill="none" stroke="#FF5252" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M 30 36 H50" stroke="#F3EDEE" stroke-width="3.2" stroke-linecap="round"/>
+    </symbol>
+    <symbol id="g-cross" viewBox="0 0 32 32">
+      <circle cx="16" cy="16" r="13.5" fill="#141011" stroke="#FF5252" stroke-width="2.5"/>
+      <path d="M 11 11 L21 21 M 21 11 L11 21" stroke="#FF5252" stroke-width="3" stroke-linecap="round"/>
+    </symbol>
+    <marker id="ah" viewBox="0 0 10 10" refX="10" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 0 0 L10 5 L0 10 Z" fill="#FF5252"/></marker>
+  </defs>
+  <rect width="1200" height="620" rx="18" fill="#141011"/>
+  <text x="48" y="70" font-size="34" font-weight="600" fill="#F3EDEE">The Durable Agent Network</text>
+  <text x="48" y="104" font-size="22" fill="#B9AAAE">Close every client. The work continues.</text>
+  <path d="M 177 330 V300 H1023 V330" fill="none" stroke="#B9AAAE" stroke-width="2.5" stroke-linejoin="round"/>
+  <path d="M 459 300 V330 M 741 300 V330" fill="none" stroke="#B9AAAE" stroke-width="2.5"/>
+  <g fill="none" stroke="#FF5252" stroke-width="3" stroke-linejoin="round" opacity="0" class="a ln" style="animation-name: bus"><path d="M 600 300 H177 V330" pathLength="1" stroke-dasharray="1 1"/><path d="M 600 300 H1023 V330" pathLength="1" stroke-dasharray="1 1"/></g>
+  <g fill="none" stroke="#FF5252" stroke-width="3" opacity="0" class="a ln" style="animation-name: drop"><path d="M 459 300 V330" pathLength="1" stroke-dasharray="1 1"/><path d="M 741 300 V330" pathLength="1" stroke-dasharray="1 1"/></g>
+  <path class="a" style="animation-name: dd0" d="M 430 250 L600 300" fill="none" stroke="#B9AAAE" stroke-width="2.5" stroke-dasharray="7 7"/>
+  <path class="a" style="animation-name: dd1" d="M 600 250 L600 300" fill="none" stroke="#B9AAAE" stroke-width="2.5" stroke-dasharray="7 7"/>
+  <path class="a" style="animation-name: dd2" d="M 770 250 L600 300" fill="none" stroke="#B9AAAE" stroke-width="2.5" stroke-dasharray="7 7"/>
+  <path class="a" style="animation-name: lv0" d="M 430 250 L600 300" pathLength="1" fill="none" stroke="#FF5252" stroke-width="3" stroke-dasharray="1 1" opacity="0"/>
+  <path class="a" style="animation-name: lv1" d="M 600 250 L600 300" pathLength="1" fill="none" stroke="#FF5252" stroke-width="3" stroke-dasharray="1 1" opacity="0"/>
+  <path class="a" style="animation-name: lv2" d="M 770 250 L600 300" pathLength="1" fill="none" stroke="#FF5252" stroke-width="3" stroke-dasharray="1 1" opacity="0"/>
+  <circle class="a" style="animation-name: jn" cx="600" cy="300" r="7" fill="#B9AAAE"/>
+  <g class="a" style="animation-name: cl0" opacity=".35"><use href="#g-browser" x="387" y="134" width="86" height="62"/><text x="430" y="224" text-anchor="middle" font-size="22" fill="#F3EDEE">web UI</text></g>
+  <g class="a" style="animation-name: cl1" opacity=".35"><use href="#g-terminal" x="557" y="134" width="86" height="62"/><text x="600" y="224" text-anchor="middle" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="22" fill="#F3EDEE">dpi-tui</text></g>
+  <g class="a" style="animation-name: cl2" opacity=".35"><rect x="728.5" y="135.5" width="83" height="59" rx="7" fill="#21191B" stroke="#F3EDEE" stroke-width="3"/><text x="770" y="174" text-anchor="middle" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="26" font-weight="700" fill="#FF5252">{ }</text><text x="770" y="224" text-anchor="middle" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="22" fill="#F3EDEE">curl</text></g>
+  <g class="a x" style="animation-name: xr0"><use href="#g-cross" x="417" y="237" width="26" height="26"/></g>
+  <g class="a x" style="animation-name: xr1"><use href="#g-cross" x="587" y="237" width="26" height="26"/></g>
+  <g class="a x" style="animation-name: xr2"><use href="#g-cross" x="757" y="237" width="26" height="26"/></g>
+  <g>
+    <rect x="48" y="330" width="258" height="214" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+    <use href="#g-laptop" x="66" y="356" width="58" height="40"/>
+    <text x="138" y="374" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="24" fill="#F3EDEE">local</text>
+    <text x="138" y="400" font-size="20" fill="#B9AAAE">local</text>
+    <use href="#g-pi" x="66" y="420" width="60" height="60"/>
+    <use href="#g-db" x="242" y="421" width="46" height="58"/>
+    <path class="a ln" style="animation-name: mv0" d="M 138 450 H236" stroke="#FF5252" stroke-width="2.5" stroke-dasharray="6 5" marker-end="url(#ah)"/>
+    <text x="66" y="518" font-size="20" font-weight="600" letter-spacing="1" fill="#B9AAAE">RUN</text>
+    <rect class="a" style="animation-name: q00" x="123" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q01" x="152" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q02" x="181" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q03" x="210" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q04" x="239" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q05" x="268" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+  </g>
+  <g>
+    <rect x="330" y="330" width="258" height="214" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+    <use href="#g-server" x="348" y="356" width="58" height="40"/>
+    <text x="420" y="374" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="24" fill="#F3EDEE">mac-mini</text>
+    <text x="420" y="400" font-size="20" fill="#B9AAAE">ssh</text>
+    <use href="#g-pi" x="348" y="420" width="60" height="60"/>
+    <use href="#g-db" x="524" y="421" width="46" height="58"/>
+    <path class="a ln" style="animation-name: mv1" d="M 420 450 H518" stroke="#FF5252" stroke-width="2.5" stroke-dasharray="6 5" marker-end="url(#ah)"/>
+    <text x="348" y="518" font-size="20" font-weight="600" letter-spacing="1" fill="#B9AAAE">RUN</text>
+    <rect class="a" style="animation-name: q10" x="405" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q11" x="434" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q12" x="463" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q13" x="492" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q14" x="521" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q15" x="550" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+  </g>
+  <g>
+    <rect x="612" y="330" width="258" height="214" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+    <use href="#g-server" x="630" y="356" width="58" height="40"/>
+    <text x="702" y="374" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="24" fill="#F3EDEE">linux-box</text>
+    <text x="702" y="400" font-size="20" fill="#B9AAAE">ssh</text>
+    <use href="#g-pi" x="630" y="420" width="60" height="60"/>
+    <use href="#g-db" x="806" y="421" width="46" height="58"/>
+    <path class="a ln" style="animation-name: mv2" d="M 702 450 H800" stroke="#FF5252" stroke-width="2.5" stroke-dasharray="6 5" marker-end="url(#ah)"/>
+    <text x="630" y="518" font-size="20" font-weight="600" letter-spacing="1" fill="#B9AAAE">RUN</text>
+    <rect class="a" style="animation-name: q20" x="687" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q21" x="716" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q22" x="745" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q23" x="774" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q24" x="803" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q25" x="832" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+  </g>
+  <g>
+    <rect x="894" y="330" width="258" height="214" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+    <use href="#g-cloud" x="912" y="356" width="58" height="40"/>
+    <text x="984" y="374" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="24" fill="#F3EDEE">vm-1</text>
+    <text x="984" y="400" font-size="20" fill="#B9AAAE">exe-dev</text>
+    <use href="#g-pi" x="912" y="420" width="60" height="60"/>
+    <use href="#g-db" x="1088" y="421" width="46" height="58"/>
+    <path class="a ln" style="animation-name: mv3" d="M 984 450 H1082" stroke="#FF5252" stroke-width="2.5" stroke-dasharray="6 5" marker-end="url(#ah)"/>
+    <text x="912" y="518" font-size="20" font-weight="600" letter-spacing="1" fill="#B9AAAE">RUN</text>
+    <rect class="a" style="animation-name: q30" x="969" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q31" x="998" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q32" x="1027" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q33" x="1056" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q34" x="1085" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+    <rect class="a" style="animation-name: q35" x="1114" y="500" width="22" height="22" rx="4" fill="#FF5252" stroke="#FF5252" stroke-width="2"/>
+  </g>
+  <text class="a" style="animation-name: cap" x="600" y="588" text-anchor="middle" font-size="22" fill="#B9AAAE">No client connected. Every run keeps checkpointing to its device's SQLite.</text>
+</svg>

package/images/02_pi_made_durable.svg

@@ -0,0 +1,204 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 528" width="1200" height="528" role="img" aria-labelledby="title desc" font-family="Inter, 'Segoe UI', Helvetica, Arial, sans-serif">
+  <title id="title">Pi, made durable</title>
+  <desc id="desc">Pi keeps its history but loses the run when the process exits; Durable Pi commits history, queues, app state and task checkpoints to SQLite at every step, so the checkpointed run completes.</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>
+    <symbol id="g-dpi" viewBox="0 0 9 5">
+      <g fill="#FFFFFF" transform="translate(.5 .5)">
+        <path d="M0 0H1V4H0Z"/>
+        <path d="M1 0H2V1H3V2H2V1H1Z"/>
+        <path d="M2 2H3V3H2V4H1V3H2Z"/>
+        <g transform="translate(4)">
+          <path d="M0 0H3V2H2V1H0Z"/>
+          <path d="M0 1H1V2H2V3H1V4H0Z"/>
+          <path d="M3 2H4V4H3Z"/>
+        </g>
+      </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-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-cross" viewBox="0 0 32 32">
+      <circle cx="16" cy="16" r="13.5" fill="#141011" stroke="#FF5252" stroke-width="2.5"/>
+      <path d="M11 11 L21 21 M21 11 L11 21" stroke="#FF5252" stroke-width="3" stroke-linecap="round"/>
+    </symbol>
+    <marker id="head-red" viewBox="0 0 12 10" refX="8" refY="5" markerWidth="12" markerHeight="10" markerUnits="userSpaceOnUse" orient="auto">
+      <path d="M0 0 L12 5 L0 10 Z" fill="#FF5252"/>
+    </marker>
+    <marker id="head-muted" viewBox="0 0 12 10" refX="8" refY="5" markerWidth="12" markerHeight="10" markerUnits="userSpaceOnUse" orient="auto">
+      <path d="M0 0 L12 5 L0 10 Z" fill="#B9AAAE"/>
+    </marker>
+  </defs>
+  <style>
+    .loop, .a { animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
+    .pop { transform-box: fill-box; transform-origin: center; }
+    .loop { animation-name: loop; }
+    .l-tile { animation-name: l-tile; }
+    .l-db { animation-name: l-db; }
+    .l-arr { animation-name: l-arr; }
+    .l-arr-h { animation-name: l-arr-h; }
+    .l-box { animation-name: l-box; }
+    .l-run { opacity: 0; animation-name: l-run; }
+    .l-b1 { animation-name: l-b1; }
+    .l-b2 { animation-name: l-b2; }
+    .l-b3 { animation-name: l-b3; }
+    .l-cross { animation-name: l-cross; }
+    .l-lost { animation-name: l-lost; }
+    .r-tile { animation-name: r-tile; }
+    .r-dbs { animation-name: r-dbs; }
+    .r-bus { animation-name: r-bus; }
+    .r-drops { animation-name: r-drops; }
+    .r-rise1 { animation-name: r-rise1; }
+    .r-rise2 { animation-name: r-rise2; }
+    .r-rise-h { animation-name: r-rise-h; }
+    .r-arr { animation-name: r-arr; }
+    .r-arr-h { animation-name: r-arr-h; }
+    .r-strip { animation-name: r-strip; }
+    .r-b1 { animation-name: r-b1; }
+    .r-b2 { animation-name: r-b2; }
+    .r-b3 { animation-name: r-b3; }
+    .r-b4 { animation-name: r-b4; }
+    .r-b5 { animation-name: r-b5; }
+    .lid { opacity: 0; animation-name: lid; }
+    .r-check { animation-name: r-check; }
+    @keyframes loop { 0%, 96% { opacity: 1 } 99%, 100% { opacity: 0 } }
+    @keyframes l-tile { 0%, 2% { opacity: 0 } 5%, 22.5% { opacity: 1 } 24%, 27% { opacity: .3 } 29%, 100% { opacity: 1 } }
+    @keyframes l-db { 0%, 5% { opacity: 0 } 8%, 100% { opacity: 1 } }
+    @keyframes l-arr { 0%, 8% { stroke-dashoffset: 50 } 11.5%, 100% { stroke-dashoffset: 0 } }
+    @keyframes l-arr-h { 0%, 11% { opacity: 0 } 12%, 100% { opacity: 1 } }
+    @keyframes l-box { 0%, 12% { opacity: 0 } 14%, 100% { opacity: 1 } }
+    @keyframes l-run { 0%, 12% { opacity: 0 } 14%, 22.5% { opacity: 1 } 24.5%, 100% { opacity: 0 } }
+    @keyframes l-b1 { 0%, 15% { opacity: 0 } 16%, 100% { opacity: 1 } }
+    @keyframes l-b2 { 0%, 17.5% { opacity: 0 } 18.5%, 100% { opacity: 1 } }
+    @keyframes l-b3 { 0%, 20% { opacity: 0 } 21%, 100% { opacity: 1 } }
+    @keyframes l-cross { 0%, 24.5% { opacity: 0; transform: scale(.4) } 26.5%, 100% { opacity: 1; transform: scale(1) } }
+    @keyframes l-lost { 0%, 26.5% { opacity: 0 } 29%, 100% { opacity: 1 } }
+    @keyframes r-tile { 0%, 31% { opacity: 0 } 34%, 100% { opacity: 1 } }
+    @keyframes r-dbs { 0%, 37% { opacity: 0 } 40%, 100% { opacity: 1 } }
+    @keyframes r-bus { 0%, 40% { stroke-dashoffset: 407 } 43.5%, 100% { stroke-dashoffset: 0 } }
+    @keyframes r-drops { 0%, 40% { opacity: 0 } 42%, 100% { opacity: 1 } }
+    @keyframes r-rise1 { 0%, 43.5% { stroke-dashoffset: 22 } 45.5%, 100% { stroke-dashoffset: 0 } }
+    @keyframes r-rise2 { 0%, 43.5% { stroke-dashoffset: 36 } 45.5%, 100% { stroke-dashoffset: 0 } }
+    @keyframes r-rise-h { 0%, 45% { opacity: 0 } 46%, 100% { opacity: 1 } }
+    @keyframes r-arr { 0%, 33% { stroke-dashoffset: 220 } 36.5%, 100% { stroke-dashoffset: 0 } }
+    @keyframes r-arr-h { 0%, 36% { opacity: 0 } 37%, 100% { opacity: 1 } }
+    @keyframes r-strip { 0%, 35% { opacity: 0 } 38%, 100% { opacity: 1 } }
+    @keyframes r-b1 { 0%, 48% { opacity: 0 } 49%, 100% { opacity: 1 } }
+    @keyframes r-b2 { 0%, 50.5% { opacity: 0 } 51.5%, 100% { opacity: 1 } }
+    @keyframes r-b3 { 0%, 53% { opacity: 0 } 54%, 100% { opacity: 1 } }
+    @keyframes r-b4 { 0%, 55.5% { opacity: 0 } 56.5%, 100% { opacity: 1 } }
+    @keyframes r-b5 { 0%, 58% { opacity: 0 } 59%, 100% { opacity: 1 } }
+    @keyframes lid { 0%, 49% { opacity: 0 } 50% { opacity: .85 } 51.5% { opacity: 0 } 52.5% { opacity: .85 } 54% { opacity: 0 } 55% { opacity: .85 } 56.5% { opacity: 0 } 57.5% { opacity: .85 } 59% { opacity: 0 } 60% { opacity: .85 } 61.5%, 100% { opacity: 0 } }
+    @keyframes r-check { 0%, 61% { opacity: 0; transform: scale(.3) } 63%, 100% { opacity: 1; transform: scale(1) } }
+    @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
+  </style>
+
+  <rect width="1200" height="528" rx="18" fill="#141011"/>
+  <text x="48" y="70" font-size="34" font-weight="600" fill="#F3EDEE">Pi, made durable</text>
+
+  <!-- panels -->
+  <rect x="48" y="100" width="440" height="340" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+  <rect x="512" y="100" width="640" height="340" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+  <text x="80" y="144" font-size="24" font-weight="600" fill="#F3EDEE">Pi</text>
+  <use href="#g-dpi" x="541.4" y="120.6" width="46.8" height="26"/>
+  <text x="600" y="144" font-size="24" font-weight="600" fill="#F3EDEE">Durable Pi</text>
+
+  <g class="loop">
+    <!-- Pi: history survives, the run does not -->
+    <use class="a l-tile" href="#g-pi" x="80" y="172" width="80" height="80"/>
+    <g class="a l-db">
+      <use href="#g-db" x="92" y="310" width="56" height="70"/>
+      <text x="120" y="410" font-size="22" fill="#F3EDEE" text-anchor="middle">history</text>
+    </g>
+    <path class="a l-arr" d="M120 308 V260" stroke-dasharray="50 50" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+    <path class="a l-arr-h" d="M120 308 V260" fill="none" stroke="none" marker-end="url(#head-red)"/>
+    <g class="a l-box">
+      <path d="M168 212 H212" fill="none" stroke="#B9AAAE" stroke-width="2.5" marker-end="url(#head-muted)"/>
+      <rect x="220" y="186" width="236" height="52" rx="10" fill="none" stroke="#B9AAAE" stroke-width="2" stroke-dasharray="8 6"/>
+    </g>
+    <g class="a l-run">
+      <rect x="220" y="186" width="236" height="52" rx="10" fill="#141011" stroke="#FF5252" stroke-width="2.5"/>
+      <g fill="#3A2C30">
+        <rect x="257" y="202" width="26" height="20" rx="3"/>
+        <rect x="291" y="202" width="26" height="20" rx="3"/>
+        <rect x="325" y="202" width="26" height="20" rx="3"/>
+        <rect x="359" y="202" width="26" height="20" rx="3"/>
+        <rect x="393" y="202" width="26" height="20" rx="3"/>
+      </g>
+      <g fill="#FF5252">
+        <rect class="a l-b1" x="257" y="202" width="26" height="20" rx="3"/>
+        <rect class="a l-b2" x="291" y="202" width="26" height="20" rx="3"/>
+        <rect class="a l-b3" x="325" y="202" width="26" height="20" rx="3"/>
+      </g>
+    </g>
+    <g class="a l-cross pop"><use href="#g-cross" x="321" y="195" width="34" height="34"/></g>
+    <text class="a l-lost" x="338" y="272" font-size="20" fill="#B9AAAE" text-anchor="middle">run state lost on exit</text>
+
+    <!-- Durable Pi: every step commits to SQLite -->
+    <use class="a r-tile" href="#g-pi" x="544" y="172" width="80" height="80"/>
+    <path class="a r-drops" d="M584 280 V308 M719 280 V308 M854 280 V308 M989 280 V308" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+    <g class="a r-dbs">
+      <use href="#g-db" x="556" y="310" width="56" height="70"/>
+      <use href="#g-db" x="691" y="310" width="56" height="70"/>
+      <use href="#g-db" x="826" y="310" width="56" height="70"/>
+      <use href="#g-db" x="961" y="310" width="56" height="70"/>
+      <g font-size="22" fill="#F3EDEE" text-anchor="middle">
+        <text x="584" y="410">history</text>
+        <text x="719" y="410">queues</text>
+        <text x="854" y="410">app state</text>
+        <text x="989" y="410">tasks</text>
+      </g>
+    </g>
+    <g class="a lid" fill="#FF5252">
+      <ellipse cx="584" cy="321.7" rx="24.5" ry="8.2"/>
+      <ellipse cx="719" cy="321.7" rx="24.5" ry="8.2"/>
+      <ellipse cx="854" cy="321.7" rx="24.5" ry="8.2"/>
+      <ellipse cx="989" cy="321.7" rx="24.5" ry="8.2"/>
+    </g>
+    <path class="a r-bus" d="M584 280 H989" stroke-dasharray="407 407" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+    <path class="a r-rise1" d="M584 280 V260" stroke-dasharray="22 22" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+    <path class="a r-rise2" d="M989 280 V246" stroke-dasharray="36 36" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+    <g class="a r-rise-h">
+      <path d="M584 280 V260" fill="none" stroke="none" marker-end="url(#head-red)"/>
+      <path d="M989 280 V246" fill="none" stroke="none" marker-end="url(#head-red)"/>
+    </g>
+    <path class="a r-arr" d="M632 212 H850" stroke-dasharray="220 220" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+    <path class="a r-arr-h" d="M632 212 H850" fill="none" stroke="none" marker-end="url(#head-red)"/>
+    <g class="a r-strip">
+      <text x="989" y="172" font-size="22" fill="#F3EDEE" text-anchor="middle">checkpointed run</text>
+      <rect x="858" y="186" width="262" height="52" rx="10" fill="#141011" stroke="#FF5252" stroke-width="2.5"/>
+      <path d="M876 199 V225" stroke="#F3EDEE" stroke-width="2.5" stroke-linecap="round"/>
+      <path d="M877 199 L893 204.5 L877 210 Z" fill="#F3EDEE"/>
+      <g fill="#3A2C30">
+        <rect x="904" y="202" width="26" height="20" rx="3"/>
+        <rect x="938" y="202" width="26" height="20" rx="3"/>
+        <rect x="972" y="202" width="26" height="20" rx="3"/>
+        <rect x="1006" y="202" width="26" height="20" rx="3"/>
+        <rect x="1040" y="202" width="26" height="20" rx="3"/>
+      </g>
+    </g>
+    <g fill="#FF5252">
+      <rect class="a r-b1" x="904" y="202" width="26" height="20" rx="3"/>
+      <rect class="a r-b2" x="938" y="202" width="26" height="20" rx="3"/>
+      <rect class="a r-b3" x="972" y="202" width="26" height="20" rx="3"/>
+      <rect class="a r-b4" x="1006" y="202" width="26" height="20" rx="3"/>
+      <rect class="a r-b5" x="1040" y="202" width="26" height="20" rx="3"/>
+    </g>
+    <g class="a r-check pop"><use href="#g-check" x="1078" y="197" width="30" height="30"/></g>
+  </g>
+
+  <text x="48" y="490" font-size="22" fill="#B9AAAE">History, queues, app state and task checkpoints commit to SQLite before anything is shown.</text>
+</svg>

package/images/03_restart_mid_tool.svg

@@ -0,0 +1,168 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 520" width="1200" height="520" role="img" aria-labelledby="title desc" font-family="Inter, 'Segoe UI', Helvetica, Arial, sans-serif">
+  <title id="title">Restart mid-tool. Keep going.</title>
+  <desc id="desc">The device restarts while a bash call is running; the agent resumes from its SQLite checkpoint, records bash as interrupted, and carries on with the next tool call.</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>
+    <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-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>
+    <symbol id="g-cross" viewBox="0 0 32 32">
+      <circle cx="16" cy="16" r="13.5" fill="#141011" stroke="#FF5252" stroke-width="2.5"/>
+      <path d="M11 11 L21 21 M21 11 L11 21" stroke="#FF5252" stroke-width="3" stroke-linecap="round"/>
+    </symbol>
+    <marker id="head-red" viewBox="0 0 12 10" refX="8" refY="5" markerWidth="12" markerHeight="10" markerUnits="userSpaceOnUse" orient="auto">
+      <path d="M0 0 L12 5 L0 10 Z" fill="#FF5252"/>
+    </marker>
+    <marker id="head-muted" viewBox="0 0 12 10" refX="8" refY="5" markerWidth="12" markerHeight="10" markerUnits="userSpaceOnUse" orient="auto">
+      <path d="M0 0 L12 5 L0 10 Z" fill="#B9AAAE"/>
+    </marker>
+  </defs>
+  <style>
+    .loop, .a { animation-duration: 14s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
+    .pop { transform-box: fill-box; transform-origin: center; }
+    .grow { transform-box: fill-box; transform-origin: 0 50%; }
+    .mono { font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; }
+    .loop { animation-name: loop; }
+    .dev { animation-name: dev; }
+    .rst-txt { opacity: 0; animation-name: rst-txt; }
+    .arr-w-vis { animation-name: arr-w-vis; }
+    .arr-w { animation-name: arr-w; }
+    .arr-w-h { animation-name: arr-w-h; }
+    .arr-r { animation-name: arr-r; }
+    .arr-r-h { animation-name: arr-r-h; }
+    .lid { opacity: 0; animation-name: lid; }
+    .c-read { animation-name: c-read; }
+    .k-read { animation-name: k-read; }
+    .c-write { animation-name: c-write; }
+    .k-write { animation-name: k-write; }
+    .c-bash { animation-name: c-bash; }
+    .bash-solid { opacity: 0; animation-name: bash-solid; }
+    .bash-prog { opacity: 0; animation-name: bash-prog; }
+    .k-bash { animation-name: k-bash; }
+    .t-int { animation-name: t-int; }
+    .c-rst { animation-name: c-rst; }
+    .card { animation-name: card; }
+    .c-edit { animation-name: c-edit; }
+    .edit-prog { opacity: 0; animation-name: edit-prog; }
+    .k-edit { animation-name: k-edit; }
+    .t-res { animation-name: t-res; }
+    @keyframes loop { 0%, 96% { opacity: 1 } 99%, 100% { opacity: 0 } }
+    @keyframes dev { 0%, 31% { opacity: 1 } 32.5%, 41% { opacity: .2 } 42.5%, 100% { opacity: 1 } }
+    @keyframes rst-txt { 0%, 32.5% { opacity: 0 } 33.5%, 40.5% { opacity: 1 } 41.5%, 100% { opacity: 0 } }
+    @keyframes arr-w-vis { 0%, 31% { opacity: 1 } 32%, 41.5% { opacity: 0 } 43%, 100% { opacity: 1 } }
+    @keyframes arr-w { 0%, 9% { stroke-dashoffset: 522 } 12%, 100% { stroke-dashoffset: 0 } }
+    @keyframes arr-w-h { 0%, 11.5% { opacity: 0 } 12.5%, 100% { opacity: 1 } }
+    @keyframes arr-r { 0%, 43% { stroke-dashoffset: 522 } 46.5%, 100% { stroke-dashoffset: 0 } }
+    @keyframes arr-r-h { 0%, 46% { opacity: 0 } 47%, 100% { opacity: 1 } }
+    @keyframes lid { 0%, 12% { opacity: 0 } 13% { opacity: .85 } 14.5%, 19.5% { opacity: 0 } 20.5% { opacity: .85 } 22%, 61.5% { opacity: 0 } 62.5% { opacity: .85 } 64%, 100% { opacity: 0 } }
+    @keyframes c-read { 0%, 4% { opacity: 0 } 6%, 100% { opacity: 1 } }
+    @keyframes k-read { 0%, 9% { opacity: 0; transform: scale(.4) } 10.5%, 100% { opacity: 1; transform: scale(1) } }
+    @keyframes c-write { 0%, 13% { opacity: 0 } 15%, 100% { opacity: 1 } }
+    @keyframes k-write { 0%, 18% { opacity: 0; transform: scale(.4) } 19.5%, 100% { opacity: 1; transform: scale(1) } }
+    @keyframes c-bash { 0%, 21% { opacity: 0 } 23%, 100% { opacity: 1 } }
+    @keyframes bash-solid { 0%, 21% { opacity: 0 } 23%, 47% { opacity: 1 } 49%, 100% { opacity: 0 } }
+    @keyframes bash-prog { 0%, 23% { opacity: 0; transform: scaleX(0) } 24% { opacity: 1 } 31% { opacity: 1; transform: scaleX(.62) } 33%, 100% { opacity: 0; transform: scaleX(.62) } }
+    @keyframes k-bash { 0%, 48% { opacity: 0; transform: scale(.4) } 50%, 100% { opacity: 1; transform: scale(1) } }
+    @keyframes t-int { 0%, 49% { opacity: 0 } 51%, 100% { opacity: 1 } }
+    @keyframes c-rst { 0%, 31.5% { opacity: 0 } 33.5%, 100% { opacity: 1 } }
+    @keyframes card { 0%, 51% { opacity: 0 } 53.5%, 100% { opacity: 1 } }
+    @keyframes c-edit { 0%, 54% { opacity: 0 } 56%, 100% { opacity: 1 } }
+    @keyframes edit-prog { 0%, 56% { opacity: 0; transform: scaleX(0) } 56.5% { opacity: 1 } 60% { opacity: 1; transform: scaleX(1) } 61.5%, 100% { opacity: 0; transform: scaleX(1) } }
+    @keyframes k-edit { 0%, 60% { opacity: 0; transform: scale(.4) } 62%, 100% { opacity: 1; transform: scale(1) } }
+    @keyframes t-res { 0%, 61% { opacity: 0 } 63%, 100% { opacity: 1 } }
+    @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
+  </style>
+
+  <rect width="1200" height="520" rx="18" fill="#141011"/>
+  <text x="48" y="70" font-size="34" font-weight="600" fill="#F3EDEE">Restart mid-tool. Keep going.</text>
+
+  <!-- device panel -->
+  <rect x="48" y="100" width="1104" height="192" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+  <use href="#g-db" x="972" y="154" width="56" height="70"/>
+  <text x="1000" y="254" font-size="22" fill="#F3EDEE" text-anchor="middle">checkpoint</text>
+
+  <g class="loop">
+    <g class="a dev">
+      <use href="#g-server" x="80" y="165.25" width="72" height="49.5"/>
+      <text class="mono" x="172" y="198" font-size="24" fill="#F3EDEE">mac-mini</text>
+      <use href="#g-pi" x="360" y="150" width="80" height="80"/>
+    </g>
+    <g class="a arr-w-vis">
+      <path class="a arr-w" d="M446 178 H965.5" stroke-dasharray="522 522" fill="none" stroke="#B9AAAE" stroke-width="2.5"/>
+      <path class="a arr-w-h" d="M446 178 H965.5" fill="none" stroke="none" marker-end="url(#head-muted)"/>
+    </g>
+    <text class="a rst-txt" x="708" y="198" font-size="22" fill="#B9AAAE" text-anchor="middle">restarting…</text>
+    <path class="a arr-r" d="M969.5 202 H450" stroke-dasharray="522 522" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+    <path class="a arr-r-h" d="M969.5 202 H450" fill="none" stroke="none" marker-end="url(#head-red)"/>
+    <ellipse class="a lid" cx="1000" cy="165.7" rx="24.5" ry="8.2" fill="#FF5252"/>
+
+    <!-- tool calls, left to right -->
+    <g class="a c-read">
+      <rect x="48" y="324" width="128" height="56" rx="10" fill="#21191B" stroke="#443438" stroke-width="2"/>
+      <text class="mono" x="104" y="360" font-size="22" fill="#B9AAAE">read</text>
+    </g>
+    <g class="a k-read pop"><use href="#g-check-o" x="64" y="338" width="28" height="28"/></g>
+
+    <g class="a c-write">
+      <rect x="190" y="324" width="140" height="56" rx="10" fill="#21191B" stroke="#443438" stroke-width="2"/>
+      <text class="mono" x="246" y="360" font-size="22" fill="#B9AAAE">write</text>
+    </g>
+    <g class="a k-write pop"><use href="#g-check-o" x="206" y="338" width="28" height="28"/></g>
+
+    <g class="a c-bash">
+      <rect x="344" y="324" width="305" height="56" rx="10" fill="#2A1A1D" stroke="#FF5252" stroke-width="2" stroke-dasharray="8 6"/>
+      <rect class="a bash-prog grow" x="346" y="326" width="301" height="52" rx="8" fill="#6E2A31"/>
+      <rect class="a bash-solid" x="344" y="324" width="305" height="56" rx="10" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+      <text class="mono" x="364" y="360" font-size="22" fill="#F3EDEE">bash</text>
+    </g>
+    <text class="a t-int" x="589" y="360" font-size="22" fill="#FF5252" text-anchor="end">interrupted</text>
+    <g class="a k-bash pop"><use href="#g-cross" x="601" y="336" width="32" height="32"/></g>
+
+    <g class="a c-rst">
+      <rect x="663" y="324" width="170" height="56" rx="10" fill="none" stroke="#6B5A5E" stroke-width="2" stroke-dasharray="8 6"/>
+      <g fill="none" stroke="#B9AAAE" stroke-width="2.5" stroke-linecap="round">
+        <path d="M708.07 344.93 A10 10 0 1 1 693.93 344.93"/>
+        <path d="M701 340 V350"/>
+      </g>
+      <text x="723" y="360" font-size="22" fill="#B9AAAE">restart</text>
+    </g>
+
+    <g class="a c-edit">
+      <rect x="847" y="324" width="305" height="56" rx="10" fill="#3A1D20" stroke="#FF5252" stroke-width="2.5"/>
+      <rect class="a edit-prog grow" x="849" y="326" width="301" height="52" rx="8" fill="#6E2A31"/>
+      <text class="mono" x="867" y="360" font-size="22" fill="#F3EDEE">edit</text>
+    </g>
+    <text class="a t-res" x="1092" y="360" font-size="22" fill="#F3EDEE" text-anchor="end">resumed</text>
+    <g class="a k-edit pop"><use href="#g-check" x="1104" y="336" width="32" height="32"/></g>
+
+    <!-- what the agent gets back for the interrupted call -->
+    <g class="a card">
+      <path d="M372 382 V406" fill="none" stroke="#B9AAAE" stroke-width="2.5" marker-end="url(#head-muted)"/>
+      <rect x="344" y="412" width="726" height="52" rx="10" fill="#21191B" stroke="#443438" stroke-width="2"/>
+      <text class="mono" x="364" y="445" font-size="22" fill="#F3EDEE">Tool bash was interrupted and may have partially run</text>
+    </g>
+  </g>
+</svg>