my-durable 0.0.0-stage → 0.0.2

package/images/07_one_api_every_client.svg

@@ -0,0 +1,123 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 534" width="1200" height="534" role="img" aria-labelledby="title desc" font-family="Inter, 'Segoe UI', Helvetica, Arial, sans-serif">
+  <title id="title">One API, every client</title>
+  <desc id="desc">The web UI, dpi-tui and curl send requests through one /v1 API, checked with a bearer token, to the same agent on any device; the agent writes to agent.sqlite and the answer streams back to every client, and curl gets it in one request.</desc>
+  <style>
+    .a { animation-duration: 13s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
+    .ln { animation-timing-function: linear; }
+    .x { transform-box: fill-box; transform-origin: center; }
+    @keyframes cd0 { 0%, 0.5% { opacity: 0; transform: translateX(-16px) } 3.5%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @keyframes cn0 { 0%, 1.5% { opacity: 0 } 4.5%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes cd1 { 0%, 1.5% { opacity: 0; transform: translateX(-16px) } 4.5%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @keyframes cn1 { 0%, 2.5% { opacity: 0 } 5.5%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes cd2 { 0%, 2.5% { opacity: 0; transform: translateX(-16px) } 5.5%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @keyframes cn2 { 0%, 3.5% { opacity: 0 } 6.5%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes row1 { 0%, 7% { opacity: 0 } 9%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes rq0 { 0%, 9% { opacity: 0; transform: translateX(0px) } 9.6% { opacity: 1; transform: translateX(0px) } 15.2% { opacity: 1; transform: translateX(75.6px) } 16%, 100% { opacity: 0; transform: translateX(84px) } }
+    @keyframes rq1 { 0%, 9.6% { opacity: 0; transform: translateX(0px) } 10.2% { opacity: 1; transform: translateX(0px) } 15.8% { opacity: 1; transform: translateX(75.6px) } 16.6%, 100% { opacity: 0; transform: translateX(84px) } }
+    @keyframes rq2 { 0%, 10.2% { opacity: 0; transform: translateX(0px) } 10.8% { opacity: 1; transform: translateX(0px) } 16.4% { opacity: 1; transform: translateX(75.6px) } 17.2%, 100% { opacity: 0; transform: translateX(84px) } }
+    @keyframes key { 0%, 16.5% { opacity: .3 } 18.5%, 96% { opacity: 1 } 100% { opacity: .3 } }
+    @keyframes kring { 0%, 16.8% { opacity: 0; transform: scale(.92) } 18.5% { opacity: 1; transform: scale(1) } 23%, 100% { opacity: 0; transform: scale(1.12) } }
+    @keyframes fw { 0%, 20% { opacity: 0; transform: translateX(0px) } 21% { opacity: 1; transform: translateX(0px) } 27.5% { opacity: 1; transform: translateX(82.8px) } 29%, 100% { opacity: 0; transform: translateX(90px) } }
+    @keyframes pring { 0%, 28.5% { opacity: 0; transform: scale(.94) } 30% { opacity: 1; transform: scale(1) } 35%, 100% { opacity: 0; transform: scale(1.1) } }
+    @keyframes write { 0%, 31% { stroke-dashoffset: 1 } 35%, 100% { stroke-dashoffset: 0 } }
+    @keyframes head { 0%, 34% { opacity: 0 } 35.5%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes dbk { 0%, 34.5% { opacity: 0 } 36% { opacity: 1 } 41%, 100% { opacity: 0 } }
+    @keyframes bk { 0%, 38% { opacity: 0; transform: translateX(0px) } 39% { opacity: 1; transform: translateX(0px) } 45% { opacity: 1; transform: translateX(-82.8px) } 46.5%, 100% { opacity: 0; transform: translateX(-90px) } }
+    @keyframes rs0 { 0%, 46% { opacity: 0; transform: translateX(0px) } 46.8% { opacity: 1; transform: translateX(-8.4px) } 52.4% { opacity: 1; transform: translateX(-79.8px) } 53%, 100% { opacity: 0; transform: translateX(-84px) } }
+    @keyframes rs1 { 0%, 46.5% { opacity: 0; transform: translateX(0px) } 47.3% { opacity: 1; transform: translateX(-8.4px) } 52.9% { opacity: 1; transform: translateX(-79.8px) } 53.5%, 100% { opacity: 0; transform: translateX(-84px) } }
+    @keyframes rs2 { 0%, 47% { opacity: 0; transform: translateX(0px) } 47.8% { opacity: 1; transform: translateX(-8.4px) } 53.4% { opacity: 1; transform: translateX(-79.8px) } 54%, 100% { opacity: 0; transform: translateX(-84px) } }
+    @keyframes row2 { 0%, 53.5% { opacity: 0; transform: translateX(-10px) } 56%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @keyframes done { 0%, 54.5% { opacity: 0; transform: translateX(-10px) } 57%, 96% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(0) } }
+    @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
+  </style>
+  <defs>
+    <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-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="M 9.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-key" viewBox="0 0 48 24">
+      <circle cx="11" cy="12" r="8" fill="none" stroke="#FF5252" stroke-width="2.8"/>
+      <path d="M 19 12 H45 M 36 12 V19 M 42 12 V17" stroke="#FF5252" stroke-width="2.8" stroke-linecap="round"/>
+    </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-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="chip-req" viewBox="0 0 28 28"><rect width="28" height="28" rx="7" fill="#FF5252"/><path d="M 11 8.5 L17 14 L11 19.5" fill="none" stroke="#141011" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+    <symbol id="chip-res" viewBox="0 0 28 28"><rect width="28" height="28" rx="7" fill="#FF5252"/><path d="M 8 9 H20 M 8 14 H20 M 8 19 H15" fill="none" stroke="#141011" stroke-width="2.8" stroke-linecap="round"/></symbol>
+  </defs>
+  <rect width="1200" height="534" rx="18" fill="#141011"/>
+  <text x="48" y="70" font-size="34" font-weight="600" fill="#F3EDEE">One API, every client</text>
+  <path class="a" style="animation-name: cn0" d="M 502 156 H608" stroke="#B9AAAE" stroke-width="2.5"/>
+  <path class="a" style="animation-name: cn1" d="M 502 276 H608" stroke="#B9AAAE" stroke-width="2.5"/>
+  <path class="a" style="animation-name: cn2" d="M 502 396 H608" stroke="#B9AAAE" stroke-width="2.5"/>
+  <path d="M 776 276 H852" stroke="#B9AAAE" stroke-width="2.5"/>
+  <g class="a" style="animation-name: cd0">
+    <rect x="48" y="106" width="454" height="100" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+    <use href="#g-browser" x="68" y="130" width="72" height="52"/>
+    <text x="160" y="164" font-size="24" fill="#F3EDEE">web UI</text>
+    <g class="a" style="animation-name: row1" fill="none" stroke-linecap="round"><path d="M 310 138 L316 144 L310 150" stroke="#B9AAAE" stroke-width="2.5" stroke-linejoin="round"/><path d="M 332 144 H410 M 424 144 H460" stroke="#6B5A5E" stroke-width="7"/></g><g class="a" style="animation-name: row2" fill="none" stroke-linecap="round"><path d="M 309 164 H319 M 309 169 H319 M 309 174 H316" stroke="#FF5252" stroke-width="2.2"/><path d="M 332 169 H386 M 400 169 H450 M 464 169 H476" stroke="#FF5252" stroke-width="7"/></g>
+  </g>
+  <g class="a" style="animation-name: cd1">
+    <rect x="48" y="226" width="454" height="100" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+    <use href="#g-terminal" x="68" y="250" width="72" height="52"/>
+    <text x="160" y="284" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="24" fill="#F3EDEE">dpi-tui</text>
+    <g class="a" style="animation-name: row1" fill="none" stroke-linecap="round"><path d="M 310 258 L316 264 L310 270" stroke="#B9AAAE" stroke-width="2.5" stroke-linejoin="round"/><path d="M 332 264 H410 M 424 264 H460" stroke="#6B5A5E" stroke-width="7"/></g><g class="a" style="animation-name: row2" fill="none" stroke-linecap="round"><path d="M 309 284 H319 M 309 289 H319 M 309 294 H316" stroke="#FF5252" stroke-width="2.2"/><path d="M 332 289 H386 M 400 289 H450 M 464 289 H476" stroke="#FF5252" stroke-width="7"/></g>
+  </g>
+  <g class="a" style="animation-name: cd2">
+    <rect x="48" y="346" width="454" height="100" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+    <text x="68" y="386" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="20" fill="#F3EDEE"><tspan fill="#FF5252">curl</tspan> POST …/messages</text>
+    <g class="a" style="animation-name: done"><use href="#g-check-o" x="68" y="404" width="22" height="22"/><text x="98" y="422" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="20" fill="#F3EDEE">done<tspan fill="#B9AAAE"> · the answer in one request</tspan></text></g>
+  </g>
+  <rect x="608" y="106" width="168" height="340" rx="22" fill="#21191B" stroke="#FF5252" stroke-width="2.5"/>
+  <text x="692" y="160" text-anchor="middle" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="32" font-weight="700" fill="#FF5252">/v1</text>
+  <g class="a" style="animation-name: key"><use href="#g-key" x="656" y="258" width="72" height="36"/></g>
+  <rect class="a x" style="animation-name: kring" x="642" y="249" width="100" height="54" rx="14" fill="none" stroke="#FF5252" stroke-width="2" opacity="0"/>
+  <text x="692" y="324" text-anchor="middle" font-size="20" fill="#B9AAAE">Bearer token</text>
+  <rect x="828" y="122" width="324" height="256" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+  <use href="#g-server" x="848" y="142" width="58" height="40"/>
+  <text x="920" y="166" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="24" fill="#F3EDEE">dpi-backend</text>
+  <text x="920" y="192" font-size="20" fill="#B9AAAE">any device</text>
+  <use href="#g-pi" x="852" y="226" width="100" height="100"/>
+  <rect class="a x" style="animation-name: pring" x="844" y="218" width="116" height="116" rx="22" fill="none" stroke="#FF5252" stroke-width="2" opacity="0"/>
+  <path class="a" style="animation-name: write" d="M 962 276 H1018" pathLength="1" stroke-dasharray="1 1" stroke="#FF5252" stroke-width="2.5"/>
+  <path class="a" style="animation-name: head" d="M 1018 270 L1029 276 L1018 282 Z" fill="#FF5252"/>
+  <use href="#g-db" x="1036" y="241" width="56" height="70"/>
+  <rect class="a" style="animation-name: dbk" x="1028" y="233" width="72" height="86" rx="14" fill="none" stroke="#FF5252" stroke-width="2" opacity="0"/>
+  <text x="1064" y="340" text-anchor="middle" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="20" fill="#B9AAAE">agent.sqlite</text>
+  <use class="a" style="animation-name: rq0" href="#chip-req" x="506" y="142" width="28" height="28" opacity="0"/>
+  <use class="a" style="animation-name: rq1" href="#chip-req" x="506" y="262" width="28" height="28" opacity="0"/>
+  <use class="a" style="animation-name: rq2" href="#chip-req" x="506" y="382" width="28" height="28" opacity="0"/>
+  <use class="a" style="animation-name: fw" href="#chip-req" x="732" y="262" width="28" height="28" opacity="0"/>
+  <use class="a" style="animation-name: bk" href="#chip-res" x="822" y="262" width="28" height="28" opacity="0"/>
+  <use class="a" style="animation-name: rs0" href="#chip-res" x="590" y="142" width="28" height="28" opacity="0"/>
+  <use class="a" style="animation-name: rs1" href="#chip-res" x="590" y="262" width="28" height="28" opacity="0"/>
+  <use class="a" style="animation-name: rs2" href="#chip-res" x="590" y="382" width="28" height="28" opacity="0"/>
+  <text x="600" y="498" text-anchor="middle" font-size="22" fill="#B9AAAE">REST for commands. SSE for live state. Several clients can watch and steer one agent.</text>
+</svg>

package/images/08_device_session_agent.svg

@@ -0,0 +1,123 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 652" width="1200" height="652" role="img" aria-labelledby="title desc" font-family="Inter, 'Segoe UI', Helvetica, Arial, sans-serif">
+  <title id="title">Device, session, agent</title>
+  <desc id="desc">A device runs one dpi-backend, each session on it has one harness and one agent.sqlite, and each agent is Main, a fork or a subagent; the command just tui attach mac-mini:api-refactor:fork names one agent by device, session and agent.</desc>
+  <style>
+    .a { animation-duration: 13s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
+    .ln { animation-timing-function: linear; }
+    .x { transform-box: fill-box; transform-origin: center; }
+    @keyframes dev { 0%, 1% { opacity: 0; transform: translateY(8px) } 5%, 96% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(0) } }
+    @keyframes lv0 { 0%, 2% { opacity: 0 } 6%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes c_da { 0%, 6% { stroke-dashoffset: 1; stroke: #B9AAAE } 11%, 53% { stroke-dashoffset: 0; stroke: #B9AAAE } 55%, 96% { stroke-dashoffset: 0; stroke: #FF5252 } 100% { stroke-dashoffset: 1; stroke: #B9AAAE } }
+    @keyframes c_dn { 0%, 6% { stroke-dashoffset: 1 } 11%, 96% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 1 } }
+    @keyframes h_da { 0%, 10.5% { opacity: 0; fill: #B9AAAE } 11.5%, 53% { opacity: 1; fill: #B9AAAE } 55%, 96% { opacity: 1; fill: #FF5252 } 100% { opacity: 0; fill: #B9AAAE } }
+    @keyframes h_dn { 0%, 10.5% { opacity: 0 } 11.5%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes s0 { 0%, 10% { opacity: 0; transform: translateY(8px) } 14%, 96% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(0) } }
+    @keyframes s1 { 0%, 11% { opacity: 0; transform: translateY(8px) } 15%, 96% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(0) } }
+    @keyframes lv1 { 0%, 11.5% { opacity: 0 } 15.5%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes c_sm0 { 0%, 15% { stroke-dashoffset: 1; stroke: #B9AAAE } 18.5%, 59% { stroke-dashoffset: 0; stroke: #B9AAAE } 61%, 96% { stroke-dashoffset: 0; stroke: #FF5252 } 100% { stroke-dashoffset: 1; stroke: #B9AAAE } }
+    @keyframes c_sm1 { 0%, 15% { stroke-dashoffset: 1 } 18.5%, 96% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 1 } }
+    @keyframes h_sm0 { 0%, 18% { opacity: 0; fill: #B9AAAE } 19%, 59% { opacity: 1; fill: #B9AAAE } 61%, 96% { opacity: 1; fill: #FF5252 } 100% { opacity: 0; fill: #B9AAAE } }
+    @keyframes h_sm1 { 0%, 18% { opacity: 0 } 19%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes m0 { 0%, 18% { opacity: 0; transform: translateY(8px) } 22%, 96% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(0) } }
+    @keyframes m1 { 0%, 18.5% { opacity: 0; transform: translateY(8px) } 22.5%, 96% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(0) } }
+    @keyframes lv2 { 0%, 19% { opacity: 0 } 23%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes c_fk { 0%, 23% { stroke-dashoffset: 1 } 27%, 96% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 1 } }
+    @keyframes h_fk { 0%, 26.5% { opacity: 0 } 27.5%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes c_sub { 0%, 23% { opacity: 0 } 27%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes k0 { 0%, 26% { opacity: 0; transform: translateY(8px) } 30%, 96% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(0) } }
+    @keyframes k1 { 0%, 27% { opacity: 0; transform: translateY(8px) } 31%, 96% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(0) } }
+    @keyframes strip { 0%, 31.5% { opacity: 0; transform: translateY(10px) } 34.5%, 96% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(0) } }
+    @keyframes t0 { 0%, 35% { opacity: 0 } 35.8%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes t1 { 0%, 36.2% { opacity: 0 } 37%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes t2 { 0%, 37.4% { opacity: 0 } 38.2%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes t3 { 0%, 38.8% { opacity: 0 } 39.6%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes t4 { 0%, 40% { opacity: 0 } 40.8%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes t5 { 0%, 41.2% { opacity: 0 } 42%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes t6 { 0%, 42.6% { opacity: 0 } 43.4%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes t7 { 0%, 43.8% { opacity: 0 } 44.6%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes seg0 { 0%, 47% { fill: #F3EDEE } 49%, 96% { fill: #FF5252 } 100% { fill: #F3EDEE } }
+    @keyframes ul0 { 0%, 47% { opacity: 0; stroke-dashoffset: 1 } 47.3% { opacity: 1; stroke-dashoffset: 1 } 49%, 96% { opacity: 1; stroke-dashoffset: 0 } 100% { opacity: 0; stroke-dashoffset: 0 } }
+    @keyframes an0 { 0%, 47.5% { opacity: 0 } 49.5%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes seg1 { 0%, 53% { fill: #F3EDEE } 55%, 96% { fill: #FF5252 } 100% { fill: #F3EDEE } }
+    @keyframes ul1 { 0%, 53% { opacity: 0; stroke-dashoffset: 1 } 53.3% { opacity: 1; stroke-dashoffset: 1 } 55%, 96% { opacity: 1; stroke-dashoffset: 0 } 100% { opacity: 0; stroke-dashoffset: 0 } }
+    @keyframes an1 { 0%, 53.5% { opacity: 0 } 55.5%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes seg2 { 0%, 59% { fill: #F3EDEE } 61%, 96% { fill: #FF5252 } 100% { fill: #F3EDEE } }
+    @keyframes ul2 { 0%, 59% { opacity: 0; stroke-dashoffset: 1 } 59.3% { opacity: 1; stroke-dashoffset: 1 } 61%, 96% { opacity: 1; stroke-dashoffset: 0 } 100% { opacity: 0; stroke-dashoffset: 0 } }
+    @keyframes an2 { 0%, 59.5% { opacity: 0 } 61.5%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @keyframes dev_hl { 0%, 47% { stroke: #443438 } 49%, 96% { stroke: #FF5252 } 100% { stroke: #443438 } }
+    @keyframes s0_hl { 0%, 53% { stroke: #443438 } 55%, 96% { stroke: #FF5252 } 100% { stroke: #443438 } }
+    @keyframes fork_hl { 0%, 59% { opacity: 0 } 61%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
+  </style>
+  <defs>
+    <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-folder" viewBox="0 0 52 40">
+      <path d="M 3 8 A4 4 0 0 1 7 4 H19 L24 10 H45 A4 4 0 0 1 49 14 V33 A4 4 0 0 1 45 37 H7 A4 4 0 0 1 3 33 Z" fill="#21191B" stroke="#FF5252" stroke-width="2.5" stroke-linejoin="round"/>
+    </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-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-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>
+  </defs>
+  <rect width="1200" height="652" rx="18" fill="#141011"/>
+  <text x="48" y="70" font-size="34" font-weight="600" fill="#F3EDEE">Device, session, agent</text>
+  <g class="a" style="animation-name: lv0"><text x="48" y="131" font-size="22" font-weight="600" fill="#B9AAAE">device:</text><text x="48" y="157" font-size="20" fill="#B9AAAE">one dpi-backend</text></g>
+  <g class="a" style="animation-name: lv1"><text x="48" y="261" font-size="22" font-weight="600" fill="#B9AAAE">session:</text><text x="48" y="287" font-size="20" fill="#B9AAAE">one harness, one agent.sqlite</text></g>
+  <g class="a" style="animation-name: lv2"><text x="48" y="414" font-size="22" font-weight="600" fill="#B9AAAE">agent:</text><text x="48" y="440" font-size="20" fill="#B9AAAE">Main, a fork or a subagent</text></g>
+  <rect class="a" style="animation-name: fork_hl" x="477" y="436" width="150" height="76" rx="12" fill="#21191B" stroke="#FF5252" stroke-width="2.5"/>
+  <path class="a ln" style="animation-name: c_dn" d="M 779 172 V200 H951 V223" pathLength="1" stroke-dasharray="1 1" fill="none" stroke="#B9AAAE" stroke-width="2.5" stroke-linejoin="round"/>
+  <path class="a ln" style="animation-name: c_da" d="M 779 172 V200 H607 V223" pathLength="1" stroke-dasharray="1 1" fill="none" stroke="#FF5252" stroke-width="2.5" stroke-linejoin="round"/>
+  <path class="a" style="animation-name: h_dn" d="M 944.5 220 L951 231 L957.5 220 Z" fill="#B9AAAE"/>
+  <path class="a" style="animation-name: h_da" d="M 600.5 220 L607 231 L613.5 220 Z" fill="#FF5252"/>
+  <path class="a ln" style="animation-name: c_sm0" d="M 607 300 V327" pathLength="1" stroke-dasharray="1 1" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+  <path class="a ln" style="animation-name: c_sm1" d="M 951 300 V327" pathLength="1" stroke-dasharray="1 1" fill="none" stroke="#B9AAAE" stroke-width="2.5"/>
+  <path class="a" style="animation-name: h_sm0" d="M 600.5 324 L607 335 L613.5 324 Z" fill="#FF5252"/>
+  <path class="a" style="animation-name: h_sm1" d="M 944.5 324 L951 335 L957.5 324 Z" fill="#B9AAAE"/>
+  <g class="a" style="animation-name: c_sub"><path d="M 607 420 H690 V439" fill="none" stroke="#B9AAAE" stroke-width="2.5" stroke-dasharray="7 6"/><path d="M 683.5 436 L690 447 L696.5 436 Z" fill="#B9AAAE"/></g>
+  <path class="a ln" style="animation-name: c_fk" d="M 607 392 V420 H515 V439" pathLength="1" stroke-dasharray="1 1" fill="none" stroke="#FF5252" stroke-width="2.5" stroke-linejoin="round"/>
+  <path class="a" style="animation-name: h_fk" d="M 508.5 436 L515 447 L521.5 436 Z" fill="#FF5252"/>
+  <g class="a" style="animation-name: dev"><rect class="a" style="animation-name: dev_hl" x="663" y="100" width="232" height="72" rx="12" fill="#21191B" stroke="#FF5252" stroke-width="2.5"/><use href="#g-server" x="685" y="116" width="58" height="40"/><text x="759" y="145" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="24" fill="#F3EDEE">mac-mini</text></g>
+  <g class="a" style="animation-name: s0"><rect class="a" style="animation-name: s0_hl" x="462" y="232" width="290" height="68" rx="12" fill="#21191B" stroke="#FF5252" stroke-width="2.5"/><use href="#g-folder" x="478" y="249" width="44" height="34"/><text x="534" y="274" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="22" fill="#F3EDEE">api-refactor</text><use href="#g-db" x="706" y="247" width="30" height="38"/></g>
+  <g class="a" style="animation-name: s1"><rect x="792" y="232" width="318" height="68" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/><use href="#g-folder" x="808" y="249" width="44" height="34"/><text x="864" y="274" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="22" fill="#F3EDEE">nightly-report</text><use href="#g-db" x="1064" y="247" width="30" height="38"/></g>
+  <g class="a" style="animation-name: m0"><use href="#g-pi" x="579" y="336" width="56" height="56"/><text x="649" y="372" font-size="24" fill="#F3EDEE">Main</text></g>
+  <g class="a" style="animation-name: m1"><use href="#g-pi" x="923" y="336" width="56" height="56"/><text x="993" y="372" font-size="24" fill="#F3EDEE">Main</text></g>
+  <g class="a" style="animation-name: k0"><use href="#g-pi" x="489" y="448" width="52" height="52"/><text x="555" y="482" font-size="24" fill="#F3EDEE">fork</text></g>
+  <g class="a" style="animation-name: k1"><use href="#g-pi" x="664" y="448" width="52" height="52"/><text x="730" y="482" font-size="24" fill="#F3EDEE">subagent</text></g>
+  <g class="a" style="animation-name: strip">
+    <rect x="48" y="530" width="1104" height="96" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+    <use href="#g-terminal" x="72" y="552" width="58" height="42"/>
+    <text class="a" style="animation-name: t0" x="152" y="568" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="24" fill="#F3EDEE" textLength="57.6" lengthAdjust="spacing">just</text>
+    <text class="a" style="animation-name: t1" x="224" y="568" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="24" fill="#F3EDEE" textLength="43.2" lengthAdjust="spacing">tui</text>
+    <text class="a" style="animation-name: t2" x="281.6" y="568" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="24" fill="#F3EDEE" textLength="86.4" lengthAdjust="spacing">attach</text>
+    <g class="a" style="animation-name: t3"><text class="a" style="animation-name: seg0" x="382.4" y="568" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="24" fill="#FF5252" textLength="115.2" lengthAdjust="spacing">mac-mini</text></g>
+    <text class="a" style="animation-name: t4" x="497.6" y="568" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="24" fill="#B9AAAE">:</text>
+    <g class="a" style="animation-name: t5"><text class="a" style="animation-name: seg1" x="512" y="568" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="24" fill="#FF5252" textLength="172.8" lengthAdjust="spacing">api-refactor</text></g>
+    <text class="a" style="animation-name: t6" x="684.8" y="568" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="24" fill="#B9AAAE">:</text>
+    <g class="a" style="animation-name: t7"><text class="a" style="animation-name: seg2" x="699.2" y="568" font-family="'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="24" fill="#FF5252" textLength="57.6" lengthAdjust="spacing">fork</text></g>
+    <path class="a" style="animation-name: ul0" d="M 383.4 578 H496.6" pathLength="1" stroke-dasharray="1 1" stroke="#FF5252" stroke-width="2"/>
+    <g class="a" style="animation-name: an0"><text x="440" y="604" text-anchor="middle" font-size="20" fill="#B9AAAE">device</text></g>
+    <path class="a" style="animation-name: ul1" d="M 513 578 H683.8" pathLength="1" stroke-dasharray="1 1" stroke="#FF5252" stroke-width="2"/>
+    <g class="a" style="animation-name: an1"><text x="504.8" y="604" text-anchor="middle" font-size="20" fill="#B9AAAE">:</text><text x="598.4" y="604" text-anchor="middle" font-size="20" fill="#B9AAAE">session</text></g>
+    <path class="a" style="animation-name: ul2" d="M 700.2 578 H755.8" pathLength="1" stroke-dasharray="1 1" stroke="#FF5252" stroke-width="2"/>
+    <g class="a" style="animation-name: an2"><text x="692" y="604" text-anchor="middle" font-size="20" fill="#B9AAAE">:</text><text x="728" y="604" text-anchor="middle" font-size="20" fill="#B9AAAE">agent</text></g>
+  </g>
+</svg>

package/images/09_compact_keep_history.svg

@@ -0,0 +1,143 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 588" width="1200" height="588" role="img" aria-labelledby="title desc" font-family="Inter, 'Segoe UI', Helvetica, Arial, sans-serif">
+  <title id="title">Smaller context. Full history retained.</title>
+  <desc id="desc">All ten entries stay in stored history while the model context is compacted to a summary of entries 1 to 7 plus recent entries 8 to 10: the summary starts in the background at 200k tokens, compaction blocks at 250k, and search_history still reads every stored entry.</desc>
+  <style>
+    .mono { font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; }
+    @keyframes h1 { 0%, 3.08% { opacity: 0; transform: scale(0.7) } 4.33% { opacity: 1; transform: scale(1.12) } 5%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.7) } }
+    .h1 { animation: h1 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes c1 { 0%, 4% { opacity: 0; transform: translateX(0) scale(.6) } 5.92%, 42.69% { opacity: 1; transform: translateX(0) scale(1) } 45%, 100% { opacity: 0; transform: translateX(172px) scale(.6) } }
+    .c1 { animation: c1 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes h2 { 0%, 6.54% { opacity: 0; transform: scale(0.7) } 7.79% { opacity: 1; transform: scale(1.12) } 8.46%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.7) } }
+    .h2 { animation: h2 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes c2 { 0%, 7.46% { opacity: 0; transform: translateX(0) scale(.6) } 9.38%, 42.69% { opacity: 1; transform: translateX(0) scale(1) } 45%, 100% { opacity: 0; transform: translateX(115px) scale(.6) } }
+    .c2 { animation: c2 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes h3 { 0%, 10% { opacity: 0; transform: scale(0.7) } 11.25% { opacity: 1; transform: scale(1.12) } 11.92%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.7) } }
+    .h3 { animation: h3 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes c3 { 0%, 10.92% { opacity: 0; transform: translateX(0) scale(.6) } 12.85%, 42.69% { opacity: 1; transform: translateX(0) scale(1) } 45%, 100% { opacity: 0; transform: translateX(57px) scale(.6) } }
+    .c3 { animation: c3 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes h4 { 0%, 13.46% { opacity: 0; transform: scale(0.7) } 14.71% { opacity: 1; transform: scale(1.12) } 15.38%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.7) } }
+    .h4 { animation: h4 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes c4 { 0%, 14.38% { opacity: 0; transform: translateX(0) scale(.6) } 16.31%, 42.69% { opacity: 1; transform: translateX(0) scale(1) } 45%, 100% { opacity: 0; transform: translateX(0px) scale(.6) } }
+    .c4 { animation: c4 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes h5 { 0%, 16.92% { opacity: 0; transform: scale(0.7) } 18.17% { opacity: 1; transform: scale(1.12) } 18.85%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.7) } }
+    .h5 { animation: h5 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes c5 { 0%, 17.85% { opacity: 0; transform: translateX(0) scale(.6) } 19.77%, 42.69% { opacity: 1; transform: translateX(0) scale(1) } 45%, 100% { opacity: 0; transform: translateX(-57px) scale(.6) } }
+    .c5 { animation: c5 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes h6 { 0%, 20.38% { opacity: 0; transform: scale(0.7) } 21.63% { opacity: 1; transform: scale(1.12) } 22.31%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.7) } }
+    .h6 { animation: h6 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes c6 { 0%, 21.31% { opacity: 0; transform: translateX(0) scale(.6) } 23.23%, 42.69% { opacity: 1; transform: translateX(0) scale(1) } 45%, 100% { opacity: 0; transform: translateX(-115px) scale(.6) } }
+    .c6 { animation: c6 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes h7 { 0%, 23.85% { opacity: 0; transform: scale(0.7) } 25.1% { opacity: 1; transform: scale(1.12) } 25.77%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.7) } }
+    .h7 { animation: h7 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes c7 { 0%, 24.77% { opacity: 0; transform: translateX(0) scale(.6) } 26.69%, 42.69% { opacity: 1; transform: translateX(0) scale(1) } 45%, 100% { opacity: 0; transform: translateX(-172px) scale(.6) } }
+    .c7 { animation: c7 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes h8 { 0%, 30% { opacity: 0; transform: scale(0.7) } 31.25% { opacity: 1; transform: scale(1.12) } 31.92%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.7) } }
+    .h8 { animation: h8 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes c8 { 0%, 30.92% { opacity: 0; transform: translateX(0) scale(.6) } 32.85%, 42.69% { opacity: 1; transform: translateX(0) scale(1) } 45%, 100% { opacity: 0; transform: translateX(57px) scale(.6) } }
+    .c8 { animation: c8 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes h9 { 0%, 33.46% { opacity: 0; transform: scale(0.7) } 34.71% { opacity: 1; transform: scale(1.12) } 35.38%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.7) } }
+    .h9 { animation: h9 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes c9 { 0%, 34.38% { opacity: 0; transform: translateX(0) scale(.6) } 36.31%, 42.69% { opacity: 1; transform: translateX(0) scale(1) } 45%, 100% { opacity: 0; transform: translateX(0px) scale(.6) } }
+    .c9 { animation: c9 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes h10 { 0%, 36.92% { opacity: 0; transform: scale(0.7) } 38.17% { opacity: 1; transform: scale(1.12) } 38.85%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.7) } }
+    .h10 { animation: h10 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes c10 { 0%, 37.85% { opacity: 0; transform: translateX(0) scale(.6) } 39.77%, 42.69% { opacity: 1; transform: translateX(0) scale(1) } 45%, 100% { opacity: 0; transform: translateX(-57px) scale(.6) } }
+    .c10 { animation: c10 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes meter { 0%, 4% { transform: scaleX(0) } 5.92%, 7.46% { transform: scaleX(0.408) } 9.38%, 10.92% { transform: scaleX(0.816) } 12.85%, 14.38% { transform: scaleX(1.224) } 16.31%, 17.85% { transform: scaleX(1.633) } 19.77%, 21.31% { transform: scaleX(2.041) } 23.23%, 24.77% { transform: scaleX(2.449) } 26.69%, 30.92% { transform: scaleX(2.857) } 32.85%, 34.38% { transform: scaleX(3.000) } 36.31%, 37.85% { transform: scaleX(3.143) } 39.77%, 45% { transform: scaleX(3.286) } 49.62%, 96% { transform: scaleX(1) } 100% { transform: scaleX(0) } }
+    .meter { animation: meter 13s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; }
+    @keyframes chip { 0%, 26.54% { opacity: 0 } 28.85%, 48.46% { opacity: 1 } 50.77%, 100% { opacity: 0 } }
+    .chip { animation: chip 13s ease-in-out infinite; }
+    @keyframes brk { 0%, 39.23% { opacity: 0 } 41.15%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .brk { animation: brk 13s ease-in-out infinite; }
+    @keyframes arA { 0%, 40% { stroke-dashoffset: 93.0 } 43.08%, 96% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 93.0 } }
+    .arA { animation: arA 13s ease-in-out infinite; }
+    @keyframes arAh { 0%, 42.69% { opacity: 0 } 43.46%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .arAh { animation: arAh 13s ease-in-out infinite; }
+    @keyframes arB { 0%, 40% { stroke-dashoffset: 93.0 } 43.08%, 96% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 93.0 } }
+    .arB { animation: arB 13s ease-in-out infinite; }
+    @keyframes arBh { 0%, 42.69% { opacity: 0 } 43.46%, 96% { opacity: 1 } 100% { opacity: 0 } }
+    .arBh { animation: arBh 13s ease-in-out infinite; }
+    @keyframes sum { 0%, 44.62% { opacity: 0; transform: scale(0.8) } 46.37% { opacity: 1; transform: scale(1.12) } 47.31%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.8) } }
+    .sum { animation: sum 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes rec { 0%, 44.62% { opacity: 0; transform: scale(0.8) } 46.37% { opacity: 1; transform: scale(1.12) } 47.31%, 96% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.8) } }
+    .rec { animation: rec 13s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+    @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
+  </style>
+  <defs>
+    <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>
+    <clipPath id="track"><rect x="300" y="410" width="808" height="12" rx="6"/></clipPath>
+  </defs>
+
+  <rect width="1200" height="588" rx="18" fill="#141011"/>
+  <text x="48" y="70" font-size="34" font-weight="600" fill="#F3EDEE">Smaller context. Full history retained.</text>
+
+  <!-- Stored history keeps every entry -->
+  <rect x="48" y="100" width="1104" height="116" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+  <text x="72" y="159" font-size="20" letter-spacing="1" fill="#B9AAAE">STORED HISTORY</text>
+  <g class="h1"><rect x="300" y="124" width="70" height="56" rx="8" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="335" y="160" text-anchor="middle" font-size="22" fill="#F3EDEE">1</text></g>
+  <g class="h2"><rect x="382" y="124" width="70" height="56" rx="8" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="417" y="160" text-anchor="middle" font-size="22" fill="#F3EDEE">2</text></g>
+  <g class="h3"><rect x="464" y="124" width="70" height="56" rx="8" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="499" y="160" text-anchor="middle" font-size="22" fill="#F3EDEE">3</text></g>
+  <g class="h4"><rect x="546" y="124" width="70" height="56" rx="8" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="581" y="160" text-anchor="middle" font-size="22" fill="#F3EDEE">4</text></g>
+  <g class="h5"><rect x="628" y="124" width="70" height="56" rx="8" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="663" y="160" text-anchor="middle" font-size="22" fill="#F3EDEE">5</text></g>
+  <g class="h6"><rect x="710" y="124" width="70" height="56" rx="8" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="745" y="160" text-anchor="middle" font-size="22" fill="#F3EDEE">6</text></g>
+  <g class="h7"><rect x="792" y="124" width="70" height="56" rx="8" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="827" y="160" text-anchor="middle" font-size="22" fill="#F3EDEE">7</text></g>
+  <g class="h8"><rect x="874" y="124" width="70" height="56" rx="8" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="909" y="160" text-anchor="middle" font-size="22" fill="#F3EDEE">8</text></g>
+  <g class="h9"><rect x="956" y="124" width="70" height="56" rx="8" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="991" y="160" text-anchor="middle" font-size="22" fill="#F3EDEE">9</text></g>
+  <g class="h10"><rect x="1038" y="124" width="70" height="56" rx="8" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="1073" y="160" text-anchor="middle" font-size="22" fill="#F3EDEE">10</text></g>
+  <g class="brk" stroke="#B9AAAE" stroke-width="2" fill="none">
+    <path d="M304 190 V198 H858 V190"/>
+    <path d="M878 190 V198 H1104 V190"/>
+  </g>
+
+  <!-- Background summary while entries keep arriving -->
+  <g class="chip" opacity="0">
+    <rect x="612" y="228" width="357" height="36" rx="18" fill="#21191B" stroke="#FF5252" stroke-width="2"/>
+    <text x="790.5" y="253" text-anchor="middle" font-size="20" fill="#F3EDEE">summarizing in the background</text>
+  </g>
+
+  <!-- Model context: copied from the history as summary + recent entries -->
+  <rect x="48" y="276" width="1104" height="204" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+  <text x="72" y="350" font-size="20" letter-spacing="1" fill="#B9AAAE">MODEL CONTEXT</text>
+  <path class="arA" d="M581 198 L581 290" stroke="#B9AAAE" stroke-width="2.5" fill="none" stroke-dasharray="93.0"/>
+  <path class="arAh" d="M581 289 L581 290" stroke="#B9AAAE" stroke-width="2.5" fill="none" marker-end="url(#ah-muted)"/>
+  <path class="arB" d="M991 198 L991 290" stroke="#B9AAAE" stroke-width="2.5" fill="none" stroke-dasharray="93.0"/>
+  <path class="arBh" d="M991 289 L991 290" stroke="#B9AAAE" stroke-width="2.5" fill="none" marker-end="url(#ah-muted)"/>
+  <g class="c1" opacity="0"><rect x="312" y="320" width="46" height="46" rx="6" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="335" y="350" text-anchor="middle" font-size="20" fill="#B9AAAE">1</text></g>
+  <g class="c2" opacity="0"><rect x="394" y="320" width="46" height="46" rx="6" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="417" y="350" text-anchor="middle" font-size="20" fill="#B9AAAE">2</text></g>
+  <g class="c3" opacity="0"><rect x="476" y="320" width="46" height="46" rx="6" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="499" y="350" text-anchor="middle" font-size="20" fill="#B9AAAE">3</text></g>
+  <g class="c4" opacity="0"><rect x="558" y="320" width="46" height="46" rx="6" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="581" y="350" text-anchor="middle" font-size="20" fill="#B9AAAE">4</text></g>
+  <g class="c5" opacity="0"><rect x="640" y="320" width="46" height="46" rx="6" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="663" y="350" text-anchor="middle" font-size="20" fill="#B9AAAE">5</text></g>
+  <g class="c6" opacity="0"><rect x="722" y="320" width="46" height="46" rx="6" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="745" y="350" text-anchor="middle" font-size="20" fill="#B9AAAE">6</text></g>
+  <g class="c7" opacity="0"><rect x="804" y="320" width="46" height="46" rx="6" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="827" y="350" text-anchor="middle" font-size="20" fill="#B9AAAE">7</text></g>
+  <g class="c8" opacity="0"><rect x="886" y="320" width="46" height="46" rx="6" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="909" y="350" text-anchor="middle" font-size="20" fill="#B9AAAE">8</text></g>
+  <g class="c9" opacity="0"><rect x="968" y="320" width="46" height="46" rx="6" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="991" y="350" text-anchor="middle" font-size="20" fill="#B9AAAE">9</text></g>
+  <g class="c10" opacity="0"><rect x="1050" y="320" width="46" height="46" rx="6" fill="#141011" stroke="#B9AAAE" stroke-width="2"/><text class="mono" x="1073" y="350" text-anchor="middle" font-size="20" fill="#B9AAAE">10</text></g>
+  <g class="sum">
+    <rect x="461" y="300" width="240" height="86" rx="10" fill="#141011" stroke="#FF5252" stroke-width="2"/>
+    <text x="581" y="336" text-anchor="middle" font-size="22" fill="#F3EDEE">SUMMARY</text>
+    <text x="581" y="365" text-anchor="middle" font-size="20" fill="#B9AAAE">entries 1–7</text>
+  </g>
+  <g class="rec">
+    <rect x="874" y="300" width="234" height="86" rx="10" fill="#141011" stroke="#FF5252" stroke-width="2"/>
+    <text x="991" y="336" text-anchor="middle" font-size="22" fill="#F3EDEE">RECENT ENTRIES</text>
+    <text x="991" y="365" text-anchor="middle" font-size="20" fill="#B9AAAE">8–10</text>
+  </g>
+
+  <!-- Context meter: 0 to 250k tokens -->
+  <rect x="300" y="410" width="808" height="12" rx="6" fill="#141011" stroke="#443438" stroke-width="1.5"/>
+  <g clip-path="url(#track)">
+    <rect class="meter" x="300" y="410" width="226" height="12" fill="#FF5252"/>
+  </g>
+  <path d="M946 400 V432" stroke="#FF5252" stroke-width="2.5"/>
+  <path d="M1108 400 V432" stroke="#B9AAAE" stroke-width="2.5"/>
+  <text class="mono" x="946" y="458" text-anchor="middle" font-size="20" fill="#FF5252">200k</text>
+  <text class="mono" x="1108" y="458" text-anchor="end" font-size="20" fill="#B9AAAE">250k</text>
+
+  <!-- Notes -->
+  <path d="M75 506 V528" stroke="#FF5252" stroke-width="3"/>
+  <text x="92" y="524" font-size="22" fill="#B9AAAE">Background summary at 200k tokens</text>
+  <path d="M75 540 V562" stroke="#B9AAAE" stroke-width="3"/>
+  <text x="92" y="558" font-size="22" fill="#B9AAAE">Blocks at 250k</text>
+  <rect x="601" y="509" width="15" height="15" rx="3" fill="none" stroke="#B9AAAE" stroke-width="2"/>
+  <text x="628" y="524" font-size="22" fill="#B9AAAE"><tspan class="mono">search_history</tspan> still reads every entry</text>
+</svg>