my-durable 0.0.0-stage → 0.0.2

package/images/18_should_every_agent_be_durable.svg

@@ -0,0 +1,118 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="660" viewBox="0 0 1200 660" role="img" aria-labelledby="title desc" font-family="Inter, 'Segoe UI', Helvetica, Arial, sans-serif">
+  <title id="title">Should every agent be durable?</title>
+  <desc id="desc">A table matches work requirements to agents: short, supervised work in one terminal suits Pi, while surviving restarts, waiting hours for a human, serving many clients and starting on its own call for Durable Pi, which still leaves the host, storage and effect recovery to choose.</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>
+  </defs>
+  <style>
+    .an { animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
+    .draw { stroke-dasharray: 1 2; }
+
+    /* rows reveal one at a time, then their check draws in (ring, then tick) */
+    .row0 { animation-name: row0; } .ring0 { animation-name: ring0; } .tick0 { animation-name: tick0; }
+    .row1 { animation-name: row1; } .ring1 { animation-name: ring1; } .tick1 { animation-name: tick1; }
+    .row2 { animation-name: row2; } .ring2 { animation-name: ring2; } .tick2 { animation-name: tick2; }
+    .row3 { animation-name: row3; } .ring3 { animation-name: ring3; } .tick3 { animation-name: tick3; }
+    .row4 { animation-name: row4; } .ring4 { animation-name: ring4; } .tick4 { animation-name: tick4; }
+    @keyframes row0 { 0%, 5% { opacity: 0; transform: translateY(10px) } 8%, 96% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(0) } }
+    @keyframes ring0 { 0%, 8% { stroke-dashoffset: 1; opacity: 0 } 8.5% { opacity: 1 } 11%, 100% { stroke-dashoffset: 0; opacity: 1 } }
+    @keyframes tick0 { 0%, 10% { stroke-dashoffset: 1; opacity: 0 } 10.5% { opacity: 1 } 13%, 100% { stroke-dashoffset: 0; opacity: 1 } }
+    @keyframes row1 { 0%, 14% { opacity: 0; transform: translateY(10px) } 17%, 96% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(0) } }
+    @keyframes ring1 { 0%, 17% { stroke-dashoffset: 1; opacity: 0 } 17.5% { opacity: 1 } 20%, 100% { stroke-dashoffset: 0; opacity: 1 } }
+    @keyframes tick1 { 0%, 19% { stroke-dashoffset: 1; opacity: 0 } 19.5% { opacity: 1 } 22%, 100% { stroke-dashoffset: 0; opacity: 1 } }
+    @keyframes row2 { 0%, 23% { opacity: 0; transform: translateY(10px) } 26%, 96% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(0) } }
+    @keyframes ring2 { 0%, 26% { stroke-dashoffset: 1; opacity: 0 } 26.5% { opacity: 1 } 29%, 100% { stroke-dashoffset: 0; opacity: 1 } }
+    @keyframes tick2 { 0%, 28% { stroke-dashoffset: 1; opacity: 0 } 28.5% { opacity: 1 } 31%, 100% { stroke-dashoffset: 0; opacity: 1 } }
+    @keyframes row3 { 0%, 32% { opacity: 0; transform: translateY(10px) } 35%, 96% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(0) } }
+    @keyframes ring3 { 0%, 35% { stroke-dashoffset: 1; opacity: 0 } 35.5% { opacity: 1 } 38%, 100% { stroke-dashoffset: 0; opacity: 1 } }
+    @keyframes tick3 { 0%, 37% { stroke-dashoffset: 1; opacity: 0 } 37.5% { opacity: 1 } 40%, 100% { stroke-dashoffset: 0; opacity: 1 } }
+    @keyframes row4 { 0%, 41% { opacity: 0; transform: translateY(10px) } 44%, 96% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(0) } }
+    @keyframes ring4 { 0%, 44% { stroke-dashoffset: 1; opacity: 0 } 44.5% { opacity: 1 } 47%, 100% { stroke-dashoffset: 0; opacity: 1 } }
+    @keyframes tick4 { 0%, 46% { stroke-dashoffset: 1; opacity: 0 } 46.5% { opacity: 1 } 49%, 100% { stroke-dashoffset: 0; opacity: 1 } }
+
+    /* the remaining choices close the table */
+    .footer { animation-name: footer; }
+    @keyframes footer { 0%, 52% { opacity: 0; transform: translateY(10px) } 57%, 96% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(0) } }
+
+    @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
+  </style>
+
+  <rect width="1200" height="660" rx="18" fill="#141011"/>
+  <text x="48" y="70" font-size="34" font-weight="600" fill="#F3EDEE">Should every agent be durable?</text>
+
+  <!-- table -->
+  <rect x="48" y="112" width="1104" height="426" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+  <use href="#g-pi" x="732" y="132" width="56" height="56"/>
+  <use href="#g-dpi" x="964" y="140" width="72" height="40"/>
+  <g font-size="20" letter-spacing="1">
+    <text x="88" y="220" fill="#B9AAAE">WORK REQUIREMENT</text>
+    <text x="760" y="220" font-weight="600" text-anchor="middle" fill="#F3EDEE">PI</text>
+    <text x="1000" y="220" font-weight="600" text-anchor="middle" fill="#F3EDEE">DURABLE PI</text>
+  </g>
+
+  <g font-size="24" fill="#F3EDEE">
+    <g class="an row0">
+      <rect x="64" y="238" width="1072" height="56" rx="8" fill="#141011"/>
+      <text x="88" y="274">Short, supervised, one terminal</text>
+      <g transform="translate(742 248) scale(1.125)" fill="none" stroke="#FF5252">
+        <path class="an draw ring0" pathLength="1" d="M16 2.5A13.5 13.5 0 1 1 16 29.5A13.5 13.5 0 1 1 16 2.5" stroke-width="2.5"/>
+        <path class="an draw tick0" pathLength="1" d="M9.5 16.5L14 21L22.5 11.5" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
+      </g>
+    </g>
+    <g class="an row1">
+      <text x="88" y="330">Survives a crash or restart</text>
+      <g transform="translate(982 304) scale(1.125)" fill="none" stroke="#FF5252">
+        <path class="an draw ring1" pathLength="1" d="M16 2.5A13.5 13.5 0 1 1 16 29.5A13.5 13.5 0 1 1 16 2.5" stroke-width="2.5"/>
+        <path class="an draw tick1" pathLength="1" d="M9.5 16.5L14 21L22.5 11.5" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
+      </g>
+    </g>
+    <g class="an row2">
+      <rect x="64" y="350" width="1072" height="56" rx="8" fill="#141011"/>
+      <text x="88" y="386">Waits hours for a human</text>
+      <g transform="translate(982 360) scale(1.125)" fill="none" stroke="#FF5252">
+        <path class="an draw ring2" pathLength="1" d="M16 2.5A13.5 13.5 0 1 1 16 29.5A13.5 13.5 0 1 1 16 2.5" stroke-width="2.5"/>
+        <path class="an draw tick2" pathLength="1" d="M9.5 16.5L14 21L22.5 11.5" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
+      </g>
+    </g>
+    <g class="an row3">
+      <text x="88" y="442">Many clients, one agent</text>
+      <g transform="translate(982 416) scale(1.125)" fill="none" stroke="#FF5252">
+        <path class="an draw ring3" pathLength="1" d="M16 2.5A13.5 13.5 0 1 1 16 29.5A13.5 13.5 0 1 1 16 2.5" stroke-width="2.5"/>
+        <path class="an draw tick3" pathLength="1" d="M9.5 16.5L14 21L22.5 11.5" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
+      </g>
+    </g>
+    <g class="an row4">
+      <rect x="64" y="462" width="1072" height="56" rx="8" fill="#141011"/>
+      <text x="88" y="498">Starts before you sit down</text>
+      <g transform="translate(982 472) scale(1.125)" fill="none" stroke="#FF5252">
+        <path class="an draw ring4" pathLength="1" d="M16 2.5A13.5 13.5 0 1 1 16 29.5A13.5 13.5 0 1 1 16 2.5" stroke-width="2.5"/>
+        <path class="an draw tick4" pathLength="1" d="M9.5 16.5L14 21L22.5 11.5" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
+      </g>
+    </g>
+  </g>
+
+  <!-- what durable still leaves open -->
+  <g class="an footer">
+    <rect x="48" y="558" width="1104" height="64" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+    <text x="88" y="598" font-size="22" fill="#B9AAAE">Durable still leaves you to choose: <tspan font-weight="600" fill="#F3EDEE">host · storage · effect recovery</tspan></text>
+  </g>
+</svg>

package/images/19_sqlite_on_every_device.svg

@@ -0,0 +1,155 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" width="1200" height="600" role="img" aria-labelledby="title desc" font-family="Inter, 'Segoe UI', Helvetica, Arial, sans-serif">
+  <title id="title">SQLite on every device</title>
+  <desc id="desc">Every device runs dpi-backend with its own SQLite files: a catalog, shared app state and one agent.sqlite per session, while the hub keeps only a network.sqlite of device URLs and tokens.</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-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="M2 37 H62 L58 42 H6 Z" fill="#F3EDEE"/>
+    </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="M19 12 H45 M36 12 V19 M42 12 V17" stroke="#FF5252" stroke-width="2.8" 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>
+  </defs>
+  <style>
+    .loop, .a { animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
+    .mono { font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; }
+    .loop { animation-name: loop; }
+    .dev { animation-name: dev; }
+    .cat { animation-name: cat; }
+    .app { animation-name: app; }
+    .col { animation-name: col; }
+    .row1 { animation-name: row1; }
+    .row2 { animation-name: row2; }
+    .row3 { animation-name: row3; }
+    .arr1 { animation-name: arr1; }
+    .arr2 { animation-name: arr2; }
+    .arr3 { animation-name: arr3; }
+    .head1 { animation-name: head1; }
+    .head2 { animation-name: head2; }
+    .head3 { animation-name: head3; }
+    .lid1 { opacity: 0; animation-name: lid1; }
+    .lid2 { opacity: 0; animation-name: lid2; }
+    .lid3 { opacity: 0; animation-name: lid3; }
+    .hub { animation-name: hub; }
+    .key1 { animation-name: key1; }
+    .key2 { animation-name: key2; }
+    .key3 { animation-name: key3; }
+    @keyframes loop { 0%, 96% { opacity: 1 } 99%, 100% { opacity: 0 } }
+    @keyframes dev { 0%, 1% { opacity: 0 } 5%, 100% { opacity: 1 } }
+    @keyframes cat { 0%, 5% { opacity: 0 } 8%, 100% { opacity: 1 } }
+    @keyframes app { 0%, 8% { opacity: 0 } 11%, 100% { opacity: 1 } }
+    @keyframes col { 0%, 11% { opacity: 0 } 14%, 100% { opacity: 1 } }
+    @keyframes row1 { 0%, 14% { opacity: 0 } 17%, 100% { opacity: 1 } }
+    @keyframes arr1 { 0%, 17% { stroke-dashoffset: 203 } 21%, 100% { stroke-dashoffset: 0 } }
+    @keyframes head1 { 0%, 20.5% { opacity: 0 } 21.5%, 100% { opacity: 1 } }
+    @keyframes lid1 { 0%, 21% { opacity: 0 } 22.5% { opacity: .85 } 25%, 100% { opacity: 0 } }
+    @keyframes row2 { 0%, 21% { opacity: 0 } 24%, 100% { opacity: 1 } }
+    @keyframes arr2 { 0%, 24% { stroke-dashoffset: 203 } 28%, 100% { stroke-dashoffset: 0 } }
+    @keyframes head2 { 0%, 27.5% { opacity: 0 } 28.5%, 100% { opacity: 1 } }
+    @keyframes lid2 { 0%, 28% { opacity: 0 } 29.5% { opacity: .85 } 32%, 100% { opacity: 0 } }
+    @keyframes row3 { 0%, 28% { opacity: 0 } 31%, 100% { opacity: 1 } }
+    @keyframes arr3 { 0%, 31% { stroke-dashoffset: 203 } 35%, 100% { stroke-dashoffset: 0 } }
+    @keyframes head3 { 0%, 34.5% { opacity: 0 } 35.5%, 100% { opacity: 1 } }
+    @keyframes lid3 { 0%, 35% { opacity: 0 } 36.5% { opacity: .85 } 39%, 100% { opacity: 0 } }
+    @keyframes hub { 0%, 41% { opacity: 0 } 45%, 100% { opacity: 1 } }
+    @keyframes key1 { 0%, 48% { opacity: .2 } 50%, 100% { opacity: 1 } }
+    @keyframes key2 { 0%, 51.5% { opacity: .2 } 53.5%, 100% { opacity: 1 } }
+    @keyframes key3 { 0%, 55% { opacity: .2 } 57%, 100% { opacity: 1 } }
+    @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
+  </style>
+
+  <rect width="1200" height="600" rx="18" fill="#141011"/>
+  <text x="48" y="70" font-size="34" font-weight="600" fill="#F3EDEE">SQLite on every device</text>
+
+  <g class="loop">
+    <!-- a device: dpi-backend and its SQLite files -->
+    <g class="a dev">
+      <rect x="48" y="100" width="788" height="422" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+      <use href="#g-server" x="80" y="122" width="64" height="44"/>
+      <text class="mono" x="162" y="152" font-size="24" fill="#F3EDEE">dpi-backend</text>
+      <text x="340" y="152" font-size="20" fill="#B9AAAE">on every device</text>
+      <path d="M428 192 V498" stroke="#443438" stroke-width="2"/>
+    </g>
+    <g class="a cat">
+      <use href="#g-db" x="80" y="240" width="48" height="60"/>
+      <text class="mono" x="144" y="252" font-size="22" fill="#F3EDEE">catalog.sqlite</text>
+      <text x="144" y="278" font-size="20" fill="#B9AAAE">sessions, names,</text>
+      <text x="144" y="302" font-size="20" fill="#B9AAAE">idempotency keys</text>
+    </g>
+    <g class="a app">
+      <use href="#g-db" x="80" y="392" width="48" height="60"/>
+      <text class="mono" x="144" y="415" font-size="22" fill="#F3EDEE">app-state.sqlite</text>
+      <text x="144" y="441" font-size="20" fill="#B9AAAE">shared App State</text>
+    </g>
+    <g class="a col">
+      <text class="mono" x="452" y="212" font-size="22" fill="#F3EDEE">sessions/&lt;id&gt;/agent.sqlite</text>
+      <text x="452" y="240" font-size="20" fill="#B9AAAE">one harness per session</text>
+    </g>
+
+    <g class="a row1">
+      <rect x="452" y="258" width="352" height="72" rx="10" fill="#141011" stroke="#443438" stroke-width="2"/>
+      <use href="#g-pi" x="468" y="268" width="52" height="52"/>
+      <use href="#g-db" x="736" y="266" width="44" height="55"/>
+    </g>
+    <path class="a arr1" d="M528 294 H729" stroke-dasharray="203 203" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+    <path class="a head1" d="M528 294 H729" fill="none" stroke="none" marker-end="url(#head-red)"/>
+    <ellipse class="a lid1" cx="758" cy="275.2" rx="19.3" ry="6.4" fill="#FF5252"/>
+
+    <g class="a row2">
+      <rect x="452" y="342" width="352" height="72" rx="10" fill="#141011" stroke="#443438" stroke-width="2"/>
+      <use href="#g-pi" x="468" y="352" width="52" height="52"/>
+      <use href="#g-db" x="736" y="350" width="44" height="55"/>
+    </g>
+    <path class="a arr2" d="M528 378 H729" stroke-dasharray="203 203" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+    <path class="a head2" d="M528 378 H729" fill="none" stroke="none" marker-end="url(#head-red)"/>
+    <ellipse class="a lid2" cx="758" cy="359.2" rx="19.3" ry="6.4" fill="#FF5252"/>
+
+    <g class="a row3">
+      <rect x="452" y="426" width="352" height="72" rx="10" fill="#141011" stroke="#443438" stroke-width="2"/>
+      <use href="#g-pi" x="468" y="436" width="52" height="52"/>
+      <use href="#g-db" x="736" y="434" width="44" height="55"/>
+    </g>
+    <path class="a arr3" d="M528 462 H729" stroke-dasharray="203 203" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+    <path class="a head3" d="M528 462 H729" fill="none" stroke="none" marker-end="url(#head-red)"/>
+    <ellipse class="a lid3" cx="758" cy="443.2" rx="19.3" ry="6.4" fill="#FF5252"/>
+
+    <!-- the hub: only how to reach each device -->
+    <g class="a hub">
+      <rect x="860" y="166" width="292" height="290" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+      <use href="#g-laptop" x="884" y="186" width="64" height="44"/>
+      <text x="962" y="216" font-size="24" fill="#F3EDEE">hub</text>
+      <use href="#g-db" x="978" y="302" width="56" height="70"/>
+      <text class="mono" x="1006" y="404" font-size="22" fill="#F3EDEE" text-anchor="middle">network.sqlite</text>
+      <text x="1006" y="432" font-size="20" fill="#B9AAAE" text-anchor="middle">device URLs and tokens</text>
+      <use class="a key1" href="#g-key" x="930" y="258" width="40" height="20"/>
+      <use class="a key2" href="#g-key" x="986" y="258" width="40" height="20"/>
+      <use class="a key3" href="#g-key" x="1042" y="258" width="40" height="20"/>
+    </g>
+  </g>
+
+  <text x="48" y="566" font-size="22" fill="#B9AAAE">Each device owns its agents and their data. The hub only stores how to reach them.</text>
+</svg>

package/images/20_admission_and_effects.svg

@@ -0,0 +1,134 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 690" width="1200" height="690" role="img" aria-labelledby="title desc" font-family="Inter, 'Segoe UI', Helvetica, Arial, sans-serif">
+  <title id="title">Admission and effects are separate</title>
+  <desc id="desc">A retried requestId is deduplicated into one submission, but a crash after an external API call can leave the effect done without a saved result, so recovery reruns replay-safe tools, returns an interrupted result for unsafe ones, and leaves external idempotency to you.</desc>
+  <defs>
+    <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; }
+    .mono { font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; }
+    .loop { animation-name: loop; }
+    .req1 { animation-name: req1; }
+    .p1 { animation-name: p1; }
+    .p1-h { animation-name: p1-h; }
+    .sub { animation-name: sub; }
+    .req2 { animation-name: req2; }
+    .p2 { animation-name: p2; }
+    .dot { animation-name: dot; }
+    .dedup { animation-name: dedup; }
+    .note { animation-name: note; }
+    .intent { animation-name: intent; }
+    .p3 { animation-name: p3; }
+    .p3-h { animation-name: p3-h; }
+    .api { animation-name: api; }
+    .p4 { animation-name: p4; }
+    .crash { animation-name: crash; }
+    .maybe { animation-name: maybe; }
+    .p5 { animation-name: p5; }
+    .ret { animation-name: ret; }
+    .ret-h { animation-name: ret-h; }
+    .why1 { animation-name: why1; }
+    .why2 { animation-name: why2; }
+    .why3 { animation-name: why3; }
+    .saved { animation-name: saved; }
+    @keyframes loop { 0%, 96% { opacity: 1 } 99%, 100% { opacity: 0 } }
+    @keyframes req1 { 0%, 2% { opacity: 0 } 5%, 100% { opacity: 1 } }
+    @keyframes p1 { 0%, 5% { stroke-dashoffset: 396 } 10%, 100% { stroke-dashoffset: 0 } }
+    @keyframes p1-h { 0%, 9.5% { opacity: 0 } 10.5%, 100% { opacity: 1 } }
+    @keyframes sub { 0%, 10% { opacity: 0; transform: scale(.9) } 13% { opacity: 1; transform: scale(1) } 24.5% { transform: scale(1) } 25.5% { transform: scale(1.05) } 27%, 100% { opacity: 1; transform: scale(1) } }
+    @keyframes req2 { 0%, 16% { opacity: 0 } 19%, 100% { opacity: 1 } }
+    @keyframes p2 { 0%, 19% { stroke-dashoffset: 300 } 24%, 100% { stroke-dashoffset: 0 } }
+    @keyframes dot { 0%, 23.5% { opacity: 0 } 24.5%, 100% { opacity: 1 } }
+    @keyframes dedup { 0%, 24.5% { opacity: 0 } 27%, 100% { opacity: 1 } }
+    @keyframes note { 0%, 27.5% { opacity: 0 } 30.5%, 100% { opacity: 1 } }
+    @keyframes intent { 0%, 33% { opacity: 0 } 36%, 100% { opacity: 1 } }
+    @keyframes p3 { 0%, 36% { stroke-dashoffset: 62 } 38.5%, 100% { stroke-dashoffset: 0 } }
+    @keyframes p3-h { 0%, 38% { opacity: 0 } 39%, 100% { opacity: 1 } }
+    @keyframes api { 0%, 38.5% { opacity: 0 } 41.5%, 100% { opacity: 1 } }
+    @keyframes p4 { 0%, 42% { stroke-dashoffset: 142 } 44.5%, 100% { stroke-dashoffset: 0 } }
+    @keyframes crash { 0%, 44.5% { opacity: 0; transform: scale(1.8) } 45.5% { opacity: 1; transform: scale(1) } 46.2% { opacity: .25 } 46.9% { opacity: 1 } 47.6% { opacity: .25 } 48.3%, 100% { opacity: 1; transform: scale(1) } }
+    @keyframes maybe { 0%, 47% { opacity: 0 } 49.5%, 100% { opacity: 1 } }
+    @keyframes p5 { 0%, 41% { opacity: 0 } 43%, 100% { opacity: 1 } }
+    @keyframes ret { 0%, 50% { stroke-dashoffset: 818 } 56%, 100% { stroke-dashoffset: 0 } }
+    @keyframes ret-h { 0%, 55.5% { opacity: 0 } 56.5%, 100% { opacity: 1 } }
+    @keyframes why1 { 0%, 51% { opacity: 0 } 53%, 100% { opacity: 1 } }
+    @keyframes why2 { 0%, 52.5% { opacity: 0 } 54.5%, 100% { opacity: 1 } }
+    @keyframes why3 { 0%, 54% { opacity: 0 } 56%, 100% { opacity: 1 } }
+    @keyframes saved { 0%, 41% { opacity: 0 } 43%, 56% { opacity: .3 } 58.5%, 100% { opacity: 1 } }
+    @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
+  </style>
+
+  <rect width="1200" height="690" rx="18" fill="#141011"/>
+  <text x="48" y="70" font-size="34" font-weight="600" fill="#F3EDEE">Admission and effects are separate</text>
+
+  <!-- panels -->
+  <rect x="48" y="100" width="1104" height="192" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+  <text x="72" y="134" font-size="20" letter-spacing="1" fill="#B9AAAE">ADMISSION</text>
+  <rect x="48" y="316" width="1104" height="296" rx="12" fill="#21191B" stroke="#443438" stroke-width="2"/>
+  <text x="72" y="350" font-size="20" letter-spacing="1" fill="#B9AAAE">EXTERNAL EFFECTS</text>
+
+  <g class="loop">
+    <!-- admission: one requestId, one submission -->
+    <g class="a req1">
+      <rect x="72" y="156" width="222" height="48" rx="10" fill="#141011" stroke="#443438" stroke-width="2"/>
+      <text class="mono" x="92" y="188" font-size="22" fill="#F3EDEE">requestId r-42</text>
+    </g>
+    <path class="a p1" d="M298 180 H692" stroke-dasharray="396 396" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+    <path class="a p1-h" d="M298 180 H692" fill="none" stroke="none" marker-end="url(#head-red)"/>
+    <g class="a sub pop">
+      <rect x="700" y="152" width="280" height="56" rx="10" fill="#2A1A1D" stroke="#FF5252" stroke-width="2.5"/>
+      <text x="840" y="188" font-size="22" font-weight="600" letter-spacing="1" fill="#F3EDEE" text-anchor="middle">ONE SUBMISSION</text>
+    </g>
+
+    <g class="a req2">
+      <rect x="72" y="220" width="301" height="48" rx="10" fill="#141011" stroke="#443438" stroke-width="2"/>
+      <text class="mono" x="92" y="252" font-size="22" fill="#F3EDEE">requestId r-42</text>
+      <rect x="291" y="229" width="68" height="30" rx="15" fill="none" stroke="#6B5A5E" stroke-width="1.5"/>
+      <text x="325" y="250" font-size="20" fill="#B9AAAE" text-anchor="middle">retry</text>
+    </g>
+    <path class="a p2" d="M377 244 H610 A10 10 0 0 0 620 234 V185" stroke-dasharray="300 300" fill="none" stroke="#B9AAAE" stroke-width="2.5"/>
+    <circle class="a dot" cx="620" cy="180" r="5" fill="#FF5252"/>
+    <text class="a dedup" x="596" y="230" font-size="20" fill="#B9AAAE" text-anchor="end">deduplicated</text>
+    <text class="a note" x="840" y="240" font-size="20" fill="#B9AAAE" text-anchor="middle">Each requestId is admitted once.</text>
+
+    <!-- external effects: the call can land, the result can be lost -->
+    <g class="a intent">
+      <rect x="72" y="404" width="200" height="56" rx="10" fill="#141011" stroke="#443438" stroke-width="2"/>
+      <text x="172" y="440" font-size="22" font-weight="600" letter-spacing="1" fill="#F3EDEE" text-anchor="middle">TOOL INTENT</text>
+    </g>
+    <path class="a p3" d="M280 432 H340" stroke-dasharray="62 62" fill="none" stroke="#B9AAAE" stroke-width="2.5"/>
+    <path class="a p3-h" d="M280 432 H340" fill="none" stroke="none" marker-end="url(#head-muted)"/>
+    <g class="a api">
+      <rect x="348" y="404" width="224" height="56" rx="10" fill="#141011" stroke="#443438" stroke-width="2"/>
+      <text x="460" y="440" font-size="22" font-weight="600" letter-spacing="1" fill="#F3EDEE" text-anchor="middle">EXTERNAL API</text>
+    </g>
+    <path class="a p4" d="M580 432 H720" stroke-dasharray="142 142" fill="none" stroke="#B9AAAE" stroke-width="2.5"/>
+    <g class="a crash pop" fill="none" stroke="#FF5252" stroke-width="3.5" stroke-linecap="round">
+      <path d="M727 446 L739 418"/>
+      <path d="M741 446 L753 418"/>
+    </g>
+    <text class="a maybe" x="740" y="384" font-size="20" letter-spacing="1" fill="#B9AAAE" text-anchor="middle">EFFECT MAY HAVE HAPPENED</text>
+    <path class="a p5" d="M768 432 H904" fill="none" stroke="#B9AAAE" stroke-width="2.5" stroke-dasharray="7 6" marker-end="url(#head-muted)"/>
+    <g class="a saved">
+      <rect x="912" y="404" width="216" height="56" rx="10" fill="#2A1A1D" stroke="#FF5252" stroke-width="2.5"/>
+      <text x="1020" y="440" font-size="22" font-weight="600" letter-spacing="1" fill="#F3EDEE" text-anchor="middle">RESULT SAVED</text>
+    </g>
+
+    <!-- recovery path -->
+    <path class="a ret" d="M440 464 V578 A10 10 0 0 0 450 588 H1010 A10 10 0 0 0 1020 578 V468" stroke-dasharray="818 818" fill="none" stroke="#FF5252" stroke-width="2.5"/>
+    <path class="a ret-h" d="M1020 478 V468" fill="none" stroke="none" marker-end="url(#head-red)"/>
+    <g font-size="22" fill="#B9AAAE">
+      <text class="a why1" x="464" y="500">Replay-safe tools rerun.</text>
+      <text class="a why2" x="464" y="530">Unsafe tools return an interrupted result.</text>
+      <text class="a why3" x="464" y="560">Add your own idempotency key.</text>
+    </g>
+  </g>
+
+  <text x="48" y="656" font-size="22" fill="#B9AAAE">Durable means checkpointed, not exactly-once.</text>
+</svg>

package/justfile

@@ -0,0 +1,33 @@
+# Durable Pi. Recipes are grouped by work area under just/<group>/mod.just.
+# Device recipes take an id from dpi-network.yaml; nothing here names a machine.
+set dotenv-load := true
+set shell := ["zsh", "-cu"]
+
+# Devices: up, deploy, status, logs, restart
+mod net 'just/net'
+
+# This machine's dpi-backend
+mod backend 'just/backend'
+
+# Web UI hub on port 4781
+mod hub 'just/hub'
+
+# Terminal client for one device
+mod tui 'just/tui'
+
+# Unit, UI, device and e2e suites
+mod test 'just/test'
+
+# List command groups
+default:
+    @just --list
+
+# Install dependencies for every network app
+install:
+    cd apps/dpi-sdk && npm install --no-audit --no-fund
+    cd apps/dpi-backend && npm install --no-audit --no-fund
+    cd apps/dpi-playground && npm install --no-audit --no-fund
+    cd apps/dpi-tui && npm install --no-audit --no-fund
+
+# Type checks and unit tests, every app
+check: test::unit

package/package.json

@@ -1,6 +1,43 @@
 {
   "name": "my-durable",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.2",
+  "description": "Durable Pi — the durable agent network: hub web UI, device backend daemon, TUI admin and the shared SDK, packaged as one runnable monorepo install",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/baphuongna/my-durable.git"
+  },
+  "bugs": {
+    "url": "https://github.com/baphuongna/my-durable/issues"
+  },
+  "homepage": "https://github.com/baphuongna/my-durable#readme",
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "bin": {
+    "my-durable-hub": "bin/hub.mjs",
+    "my-durable-device": "bin/device.mjs",
+    "my-durable-tui": "bin/tui.mjs"
+  },
+  "scripts": {
+    "hub": "tsx apps/dpi-playground/apps/dpi-playground-hub/src/main.ts",
+    "device": "tsx apps/dpi-backend/src/main.ts",
+    "tui": "tsx apps/dpi-tui/src/main.ts",
+    "verify": "node scripts/verify.mjs --phase P2"
+  },
+  "dependencies": {
+    "@earendil-works/chord": "1.3.0",
+    "@earendil-works/pi-ai": "1.3.0",
+    "@earendil-works/pi-durable": "1.3.0",
+    "@earendil-works/pi-tui": "1.3.0",
+    "@sinclair/typebox": "0.34.52",
+    "dompurify": "^3.2.0",
+    "express": "^5.1.0",
+    "lucide-vue-next": "^0.468.0",
+    "marked": "^17.0.0",
+    "tsx": "^4.20.0",
+    "vue": "3.5.43",
+    "ws": "8.22.0",
+    "yaml": "^2.8.0"
+  }
+}