sealkeep 0.5.1 → 0.5.3

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 Notable changes, by published version. Sealkeep is pre-1.0: minor versions
 may change behavior, and say so here when they do.
 
+## 0.5.3 — 2026-08-19
+
+The account now knows what every destination holds. Machines stamp
+per-target usage (Drive, your bucket, cloud) into the routing rules they
+already sync, so the panel's new headline reads like the truth:
+"3.7 GB in Sealkeep cloud · 56 MB in Google Drive". The panel also got
+its polish pass: status headline first, routing rules as three short
+bullets, per-row "holds X", compact editors, your current package leads
+with the tiers as chips, and Drive shows as "folder <name>".
+
+## 0.5.2 — 2026-08-19
+
+- "Manage in cloud" now opens sealkeep.spala.ai — the panel URL was still
+  derived from the API origin, which the rename left behind. Self-hosted
+  planes keep deriving from their own origin.
+- The cloud panel folds chunk families into one archive per row, edits the
+  account's storage routing (priorities, caps, project pins, Google Drive),
+  and gained a for-companies section.
+
 ## 0.5.1 — 2026-08-19
 
 The first release that lives entirely at its new addresses.

package/dist/site/index.html

@@ -172,7 +172,7 @@
 
   .ph{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;background:var(--card);
     border:1px solid var(--rule);border-radius:4px;padding:1.2rem 1.3rem;margin-bottom:1.3rem}
-  .ph .name{font-size:1.32rem;font-weight:750;letter-spacing:-.03em}
+  .ph .name{font-size:1.15rem;font-weight:650;letter-spacing:-.02em}
   .ph .who{font-family:var(--mono);font-size:.75rem;color:var(--soft);flex:1 1 100%}
   /* The strip takes focus when the panel opens so a screen reader is told whose
      account this is. It is not in the tab order, so nobody can arrive here by
@@ -193,11 +193,14 @@
   .warncard{border-color:var(--warn)}
   .warncard .eyebrow{color:var(--warn)}
 
-  .kv{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}
+  .kv{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
+  .kv>div{border:1px solid var(--rule);border-radius:4px;padding:.9rem 1rem}
+  .kv .cap{display:block;font-size:.78rem;color:var(--soft);margin-top:.25rem}
   .kv .k{display:block;font-family:var(--mono);font-size:.72rem;color:var(--soft);margin-bottom:.2rem}
-  .kv b{font-family:var(--mono);font-size:1.24rem;font-weight:600;letter-spacing:-.03em}
-  .bar{height:3px;background:var(--rule);border-radius:2px;margin:1.05rem 0 .4rem;overflow:hidden}
-  .bar i{display:block;height:100%;width:0;background:var(--live);transition:width .5s ease}
+  .kv b{font-family:var(--mono);font-size:1rem;font-weight:500;color:var(--soft);letter-spacing:-.02em}
+  .kv .lead b{font-size:2.2rem;font-weight:700;color:var(--ink);letter-spacing:-.04em;line-height:1.1}
+  .bar{height:8px;background:var(--rule);border-radius:4px;margin:1.05rem 0 .4rem;overflow:hidden}
+  .bar i{display:block;height:100%;width:0;min-width:6px;background:var(--live);transition:width .5s ease}
 
   table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:31rem}
   th{text-align:left;font-family:var(--mono);font-size:.72rem;color:var(--soft);font-weight:400;
@@ -205,7 +208,29 @@
   td{padding:.68rem .65rem;border-bottom:1px solid var(--rule)}
   tr:last-child td{border-bottom:0}
   td code{font-size:.86em;color:var(--soft)}
-  .state{font-family:var(--mono);font-size:.74rem}
+  .state{font-family:var(--mono);font-size:.72rem;border:1px solid currentColor;border-radius:3px;padding:.18rem .55rem;white-space:nowrap}
+  .choice .t,.choice .d{font-family:var(--sans)}
+  .cellsub{display:block;font-family:var(--sans);font-size:.75rem;color:var(--soft);margin-top:.15rem}
+  .acct-nav{display:flex;gap:.35rem;flex-wrap:wrap;position:sticky;top:0;z-index:5;background:var(--paper);padding:.65rem 0;margin:.4rem 0 .2rem;border-bottom:1px solid var(--rule)}
+  .acct-nav a{font-family:var(--mono);font-size:.74rem;color:var(--soft);text-decoration:none;border:1px solid var(--rule);border-radius:999px;padding:.28rem .8rem}
+  .acct-nav a:hover{color:var(--ink);border-color:var(--ink)}
+  .acct-hero{font-family:var(--mono);font-size:1.55rem;font-weight:700;letter-spacing:-.03em;margin:.9rem 0 0;line-height:1.3}
+  .ruleslist{margin:.3rem 0 .9rem;padding-left:1.1rem}
+  .ruleslist li{margin:.25rem 0;color:var(--soft)}
+  .ruleslist b{color:var(--ink);font-weight:600}
+  #tg-body input,#tg-body select{padding:.35rem .5rem;font-size:.85rem;border:1px solid var(--rule);border-radius:4px;background:transparent;color:var(--ink)}
+  #tg-body input[type=number]{width:4.2rem}
+  #tg-body input:focus,#tg-body select:focus{border-color:var(--live);outline:none}
+  #tg-body tr:hover td{background:color-mix(in srgb, var(--rule) 22%, transparent)}
+  #tg-save-msg{display:block;margin-top:.6rem}
+  .packrow{display:flex;gap:.6rem;flex-wrap:wrap;margin:.4rem 0 .9rem}
+  .packchip{display:flex;flex-direction:column;gap:.1rem;border:1px solid var(--rule);border-radius:6px;padding:.6rem .95rem;min-width:6.4rem}
+  .packchip b{font-family:var(--mono);font-size:.95rem}
+  .packchip span{font-size:.78rem;color:var(--soft)}
+  .packchip.now{border-color:var(--live)}
+  .packchip.now i{font-style:normal;font-family:var(--mono);font-size:.66rem;color:var(--live);letter-spacing:.03em}
+  #p-account .card h3{font-size:1.02rem;margin:.15rem 0 .5rem}
+  [id^="anchor-"]{scroll-margin-top:3.4rem}
   .state.durable{color:var(--live)}
   .state.pending{color:var(--soft);opacity:.75}
   .del{background:none;color:var(--soft);border:1px solid var(--rule);padding:.3rem .7rem;
@@ -386,6 +411,40 @@
 
 </section>
 
+<section id="teams"><div class="wrap">
+  <h2>For teams and companies</h2>
+  <p class="sub">Agent transcripts are source code, prompts, and pasted secrets. Treat them like it.</p>
+
+  <div class="row-item duo">
+    <div class="human">
+      <span class="mark">Custody</span>
+      <h3>Your data never changes hands</h3>
+      <p>Sealed before it leaves the machine, stored in a bucket you own if you choose, opened only by keys we never hold. Data residency is wherever you put the bucket. A secrets scan runs before anything is uploaded, and retention only ever stages to trash — there is no delete path.</p>
+    </div>
+    <div class="machine"><div class="ev">sealed on machine · keys stay yours<br>your bucket, your region, your retention<br>leak scan before every upload</div></div>
+  </div>
+
+  <div class="row-item duo">
+    <div class="human">
+      <span class="mark">Audit</span>
+      <h3>Every action, written down</h3>
+      <p>Each seal, upload, restore, and reclaim lands in a local audit log, and the control plane keeps its own account-scoped trail — identifiers and counts, never content. When someone asks what happened to a session, the answer is a query, not a shrug.</p>
+    </div>
+    <div class="machine"><div class="ev">$ sealkeep audit<br>sealed 9f2c1ab4 · uploaded · verified<br>restored by device macbook · 12 Aug</div></div>
+  </div>
+
+  <div class="row-item duo">
+    <div class="human">
+      <span class="mark">Share</span>
+      <h3>Hand a session over, not the vault</h3>
+      <p>One session goes to a teammate as a sealed bundle under a one-time passcode — your recovery phrase never travels. Team spaces — one sealed memory for a whole project, across people, with instant offboarding — are designed on the same envelope machinery and are next on the roadmap.</p>
+    </div>
+    <div class="machine"><div class="ev">$ sealkeep share 9f2c1ab4<br>bundle sealed · passcode shown once<br>opens without your phrase</div></div>
+  </div>
+
+  <p class="why">Straight talk: the encryption is built on published primitives with test vectors and a tamper suite, and has not yet had an independent audit. We say so here because your security review will ask.</p>
+</div></section>
+
 <section id="plans">
   <h2>Two ways to run it</h2>
   <p class="sub">Same encryption either way. The only difference is which side of the line the bucket sits on.</p>
@@ -522,9 +581,19 @@ sealkeep open 08424eb6… ./session.jsonl \
   <div class="pane" id="p-account">
     <div class="ph" id="a-strip" tabindex="-1">
       <span class="name" id="a-label">—</span>
-      <span class="chip" id="a-plan">—</span>
+      <button class="chip" id="a-plan" type="button" title="See your plan">—</button>
       <span class="who" id="a-who">—</span>
     </div>
+    <p class="acct-hero" id="a-hero"></p>
+    <p class="msg" id="a-summary" style="margin:.4rem 0 0"></p>
+    <nav class="acct-nav" aria-label="Account sections">
+      <a href="#anchor-storage">Storage</a>
+      <a href="#anchor-routing">Routing</a>
+      <a href="#anchor-machines">Machines</a>
+      <a href="#anchor-archives" id="nav-archives">Archives</a>
+      <a href="#anchor-plan">Plan</a>
+      <a href="#anchor-recovery">Recovery</a>
+    </nav>
 
     <div class="card next" id="a-firstrun" style="display:none">
       <span class="eyebrow">Set up</span>
@@ -539,7 +608,7 @@ sealkeep open 08424eb6… ./session.jsonl \
       <span class="saved" id="a-verify-msg" role="status" aria-live="polite"></span>
     </div>
 
-    <div class="card">
+    <div class="card" id="anchor-storage">
       <span class="eyebrow">Storage</span>
       <div id="a-store-free" style="display:none">
         <h3>You run the bucket</h3>
@@ -547,39 +616,103 @@ sealkeep open 08424eb6… ./session.jsonl \
         <p class="empty">Your machine reports what it has stored. Run <code>sealkeep status</code> to see it.</p>
       </div>
       <div id="a-store-paid" style="display:none">
+        <h3>What you keep here</h3>
         <div class="kv">
-          <div><span class="k">Stored</span><b id="a-used">—</b></div>
-          <div><span class="k">Included</span><b id="a-quota-b">—</b></div>
-          <div><span class="k">Archives</span><b id="a-count">—</b></div>
+          <div class="lead"><span class="k">Stored</span><b id="a-used">—</b><span class="cap" id="a-used-cap">sealed before it arrived</span></div>
+          <div><span class="k">Included</span><b id="a-quota-b">—</b><span class="cap">in your plan</span></div>
+          <div><span class="k">Archives</span><b id="a-count">—</b><span class="cap">chunk folders count as one</span></div>
+          <div><span class="k">Machines</span><b id="a-machines">—</b><span class="cap">signing uploads</span></div>
+          <div><span class="k">Destinations</span><b id="a-dest">—</b><span class="cap">where new seals go</span></div>
         </div>
         <div class="bar"><i id="a-bar"></i></div>
         <p class="msg" id="a-quota"></p>
       </div>
     </div>
 
-    <div class="card" id="c-archives" style="display:none">
+    <div class="card" id="c-targets"><span id="anchor-routing"></span>
+      <span class="eyebrow">Routing</span>
+      <h3>Where new archives go</h3>
+      <p>Rules live on your account — every machine of the vault follows the same ones.</p>
+      <ul class="ruleslist">
+        <li><b>Lowest priority number wins.</b></li>
+        <li><b>A pinned project always goes to its target.</b></li>
+        <li><b>Full or capped targets pass to the next</b> — Sealkeep cloud is the fallback.</li>
+      </ul>
+      <p class="msg" id="tg-msg">Loading…</p>
+      <div id="tg-wrap" style="display:none;overflow-x:auto">
+        <table>
+          <thead><tr><th>Target</th><th>Where</th><th>Priority</th><th>Cap (GB)</th><th>Only these projects</th><th></th></tr></thead>
+          <tbody id="tg-body"></tbody>
+        </table>
+      </div>
+      <div class="inline" style="margin-top:.9rem">
+        <button class="ghost" id="tg-add-drive" type="button">Add Google Drive</button>
+        <button class="ghost" id="tg-add-bucket" type="button">Add my own bucket</button>
+        <button class="primary" id="tg-save" type="button">Save routing</button>
+        <span class="saved" id="tg-save-msg" role="status" aria-live="polite"></span>
+      </div>
+      <p class="why" id="tg-note">Drive holds single objects and skips streaming; big under-pressure seals route to cloud or a bucket on their own. Adding Drive here sets the rule — the one-time consent happens on your machine: <code>sealkeep storage connect gdrive</code>.</p>
+    </div>
+
+    <div class="card" id="anchor-machines">
+      <span class="eyebrow">Machines</span>
+      <h3>Connected machines</h3>
+      <p>Each connected machine signs its own uploads. Revoking one stops it writing here; the archives it already stored are untouched.</p>
+      <ul class="lines" id="d-list"></ul>
+      <p class="empty" id="d-msg">Loading…</p>
+
+      <!-- One pairing block exists on the page. It leads the panel while no
+           machine is connected, and JS moves it back into this slot once one
+           is, so the same code is never printed in two places. -->
+      <div id="pair-home-more">
+        <div class="pair" id="pair">
+          <p class="side" id="pair-side" style="display:none">Pairing code</p>
+          <!-- Grouped and labelled, so the copy button is announced as
+               belonging to the code rather than as a bare "Copy". -->
+          <div class="pair-field" id="pair-shown" role="group" aria-labelledby="pair-side" style="display:none">
+            <code class="pair-code" id="pair-code"></code>
+            <button class="primary" id="pair-copy" type="button">Copy</button>
+          </div>
+          <p class="fine" id="pair-note"></p>
+          <div class="inline" id="pair-ask">
+            <button class="ghost" id="pair-go" type="button">Show a pairing code</button>
+            <span class="saved" id="pair-msg" role="status" aria-live="polite"></span>
+          </div>
+          <details class="alt" id="pair-alt" style="display:none">
+            <summary>Set the machine up from the terminal instead</summary>
+            <p class="empty">The same code, typed as one command. Needs Node 22 or newer.</p>
+            <div class="pair-field"><pre id="pair-cli"></pre>
+              <button class="ghost" id="pair-cli-copy" type="button">Copy</button>
+            </div>
+          </details>
+        </div>
+      </div>
+    </div>
+
+    <div class="card" id="anchor-archives" style="display:none">
       <span class="eyebrow">Archives</span>
-      <p id="s-intro">Deleting one here removes the stored copy. If your machine already reclaimed the source, this is the last copy.</p>
+      <h3>What is stored</h3>
+      <p id="s-intro">Names live on your machines — your storage holds sealed archives it cannot read, listed here by reference. Deleting one removes the stored copy; if your machine already reclaimed the source, this is the last copy.</p>
       <p class="msg" id="s-msg">Loading…</p>
       <div id="s-wrap" style="display:none;overflow-x:auto">
         <table>
-          <thead><tr><th>Ref</th><th>Size</th><th>State</th><th>Added</th><th></th></tr></thead>
+          <thead><tr><th>Archive</th><th>Contents</th><th>State</th><th>Added</th><th></th></tr></thead>
           <tbody id="s-body"></tbody>
         </table>
         <p class="msg" id="s-foot"></p>
       </div>
     </div>
 
-    <div class="card">
+    <div class="card" id="c-plan"><span id="anchor-plan"></span>
       <span class="eyebrow">Plan</span>
       <div id="a-plan-free" style="display:none">
         <h3>Free — your bucket, your bill</h3>
         <p>Unlimited archives with the same encryption. You supply the storage credentials and pay your provider directly.</p>
-        <p class="empty">Want us to run storage instead? Managed storage is $6 a month for 100 GB, $12 for 500 GB, or $30 for 2 TB. Write to <span id="a-sales">hello@spala.ai</span> from this address and we will switch it on.</p>
+        <p class="empty">Want us to run storage instead? Pricing is in Your package, below. Write to <span id="a-sales">hello@spala.ai</span> from this address and we will switch it on.</p>
       </div>
       <div id="a-plan-paid" style="display:none">
         <h3>Managed storage</h3>
-        <p>We run the bucket and meter what you store. We still hold no key that opens any of it.</p>
+        <p>We run the bucket and meter what you store. We still hold no key that opens any of it — the only difference from your own bucket is who pays the storage bill and who can delete it.</p>
         <div class="kv" style="margin-top:1rem">
           <div><span class="k">Subscription</span><b id="a-sub-state">—</b></div>
           <div><span class="k">Renews</span><b id="a-sub-end">—</b></div>
@@ -591,13 +724,16 @@ sealkeep open 08424eb6… ./session.jsonl \
 
     <div class="card" id="a-pack-card">
       <span class="eyebrow">Your package</span>
-      <p>A package is a number of gigabytes. Which provider holds the ciphertext is our problem — we pick the cheapest that has free egress, and can move between them without you doing anything, because an archive carries everything needed to open it.</p>
-      <div class="rules" id="a-packs"></div>
+      <h3 id="a-pack-current">—</h3>
+      <p class="msg" id="a-pack-context" style="margin:0 0 .8rem"></p>
+      <div class="packrow" id="a-packs"></div>
+      <p class="empty" id="a-pack-alt">Not storing with us? Your own bucket is free with the same encryption, and Pro Lite keeps key escrow and machine sign-in with no metered storage.</p>
       <p class="why" id="a-pack-note">Changing your package is handled by hand today. Email hello@spala.ai from this address and we will move you within one business day — your archives keep uploading throughout.</p>
     </div>
 
     <div class="card">
     <span class="eyebrow">What leaves this machine</span>
+    <h3>Your upload rules</h3>
     <p>Everything you do not choose here stays local and is never uploaded.</p>
     <p class="empty" id="r-note" style="margin-bottom:.9rem">Enforced on your machine, before a session is read or sealed. Anything held back is never uploaded, so this is a rule about what leaves — not a filter we apply after it arrives.</p>
     <div class="rules">
@@ -624,75 +760,7 @@ sealkeep open 08424eb6… ./session.jsonl \
     </div>
     </div>
 
-    <div class="card">
-      <span class="eyebrow">Where your archives live</span>
-      <p>Archives are encrypted on your machine before anything moves, on both options. This only decides who owns the bucket the ciphertext lands in.</p>
-      <div class="rules">
-        <label class="choice" data-on="yes">
-          <input type="radio" name="stor" value="managed" checked>
-          <span><span class="t">Let Sealkeep hold it</span>
-            <span class="d">Pick how many gigabytes and stop thinking about it. No bucket to create, no IAM policy, no access keys, no console. We choose the provider and absorb the storage bill inside your plan.</span></span>
-        </label>
-        <label class="choice" data-on="no">
-          <input type="radio" name="stor" value="byo">
-          <span><span class="t">Use my own bucket</span>
-            <span class="d">Your storage account, your bill, your retention rules. Sealkeep records the destination and nothing else — your access keys stay on your machine and are never sent here.</span>
-            <div class="row2" style="margin-top:.7rem">
-              <div><label for="st-prov">Provider</label>
-                <select id="st-prov">
-                  <option value="r2">Cloudflare R2 — no egress fees</option>
-                  <option value="s3">Amazon S3 or any S3-compatible</option>
-                  <option value="gcs">Google Cloud Storage</option>
-                </select></div>
-              <div><label for="st-bucket">Bucket</label><input id="st-bucket" placeholder="my-sealkeep-archives"></div>
-            </div>
-            <div class="row2">
-              <div><label for="st-region">Region</label><input id="st-region" placeholder="auto"></div>
-              <div><label for="st-prefix">Prefix</label><input id="st-prefix" placeholder="sealkeep/"></div>
-            </div>
-          </span>
-        </label>
-        <button class="primary" id="st-save" type="button" style="margin-top:1.1rem">Save destination</button>
-        <span class="saved" id="st-msg" role="status" aria-live="polite"></span>
-      </div>
-      <p class="why">Either way we hold no key that opens an archive. The difference is only who pays the storage bill and who can delete the bucket.</p>
-    </div>
-
-    <div class="card">
-      <span class="eyebrow">Machines</span>
-      <p>Each connected machine signs its own uploads. Revoking one stops it writing here; the archives it already stored are untouched.</p>
-      <ul class="lines" id="d-list"></ul>
-      <p class="empty" id="d-msg">Loading…</p>
-
-      <!-- One pairing block exists on the page. It leads the panel while no
-           machine is connected, and JS moves it back into this slot once one
-           is, so the same code is never printed in two places. -->
-      <div id="pair-home-more">
-        <div class="pair" id="pair">
-          <p class="side" id="pair-side" style="display:none">Pairing code</p>
-          <!-- Grouped and labelled, so the copy button is announced as
-               belonging to the code rather than as a bare "Copy". -->
-          <div class="pair-field" id="pair-shown" role="group" aria-labelledby="pair-side" style="display:none">
-            <code class="pair-code" id="pair-code"></code>
-            <button class="primary" id="pair-copy" type="button">Copy</button>
-          </div>
-          <p class="fine" id="pair-note"></p>
-          <div class="inline" id="pair-ask">
-            <button class="ghost" id="pair-go" type="button">Show a pairing code</button>
-            <span class="saved" id="pair-msg" role="status" aria-live="polite"></span>
-          </div>
-          <details class="alt" id="pair-alt" style="display:none">
-            <summary>Set the machine up from the terminal instead</summary>
-            <p class="empty">The same code, typed as one command. Needs Node 22 or newer.</p>
-            <div class="pair-field"><pre id="pair-cli"></pre>
-              <button class="ghost" id="pair-cli-copy" type="button">Copy</button>
-            </div>
-          </details>
-        </div>
-      </div>
-    </div>
-
-    <div class="card" id="c-recovery">
+    <div class="card" id="c-recovery"><span id="anchor-recovery"></span>
       <span class="eyebrow">Recovery key</span>
       <h3 id="e-head">Loading…</h3>
       <p id="e-text"></p>
@@ -700,6 +768,7 @@ sealkeep open 08424eb6… ./session.jsonl \
 
     <div class="card">
       <span class="eyebrow">Activity</span>
+      <h3>What happened lately</h3>
       <p>Every change made to this account, newest first.</p>
       <ul class="lines" id="v-list"></ul>
       <p class="empty" id="v-msg">Loading…</p>
@@ -707,6 +776,7 @@ sealkeep open 08424eb6… ./session.jsonl \
 
     <div class="card">
       <span class="eyebrow">Account</span>
+      <h3>Name and email</h3>
       <label for="a-name">Account name</label>
       <div class="inline">
         <input id="a-name" maxlength="60" autocomplete="off">
@@ -924,6 +994,7 @@ sealkeep open 08424eb6… ./session.jsonl \
     $("a-name").value = user.label || "";
     $("a-plan").textContent = paid ? "Managed storage" : "Free";
     $("a-plan").className = "chip" + (paid ? " pro" : "");
+    $("a-plan").onclick = () => $("c-plan").scrollIntoView({ behavior: "smooth", block: "start" });
     $("a-who").textContent = [
       user.email,
       "joined " + day(user.created_at),
@@ -940,7 +1011,7 @@ sealkeep open 08424eb6… ./session.jsonl \
     // destination arrives; the plan is only the opening guess.
     lastPaid = paid;
     applyStorageView();
-    on("c-archives", paid);
+    on("anchor-archives", paid); on("nav-archives", paid);
     on("a-plan-free", !paid);
     on("a-plan-paid", paid);
 
@@ -1095,6 +1166,145 @@ sealkeep open 08424eb6… ./session.jsonl \
     }
   }
 
+  // Managed chunk folders arrive as one row per stored object —
+  // <archive>.chunk-000001 … plus <archive>.envelope.vlmeta. A listing is
+  // about archives, so fold each family into one row: the archive id, the
+  // summed chunk bytes, and durable only when every member is durable.
+  // Mirrors collapseCloudRows in the CLI, so both surfaces tell one story.
+  const FAMILY_REF = /^(.+)\.(chunk-\d{6}|envelope\.vlmeta)$/;
+  function foldFamilies(rows) {
+    const families = new Map();
+    const plain = [];
+    for (const row of rows) {
+      const match = FAMILY_REF.exec(String(row.vault_ref));
+      if (!match) { plain.push(row); continue; }
+      const fam = families.get(match[1]) ?? { rows: [], chunkBytes: 0, chunks: 0, members: [], allDurable: true };
+      fam.rows.push(row);
+      fam.members.push(row.vault_ref);
+      if (match[2].startsWith("chunk-")) { fam.chunkBytes += Number(row.bytes) || 0; fam.chunks++; }
+      if (row.state !== "durable") fam.allDurable = false;
+      families.set(match[1], fam);
+    }
+    const folded = [...families.entries()].map(([id, fam]) => ({
+      ...fam.rows[0], vault_ref: id, bytes: fam.chunkBytes, chunked: true,
+      chunkCount: fam.chunks, members: fam.members, state: fam.allDurable ? "durable" : "pending"
+    }));
+    return [...plain, ...folded];
+  }
+
+  /* ------------------------------------------------ routing (storage targets) */
+  // The same rules the CLI syncs: GET/PUT /v1/cloud/storage-targets carries
+  // {targets_json} — a JSON string of [{id, provider, bucket, prefix, maxGb,
+  // projects, priority}]. Editing here lands on every machine of the vault,
+  // because resolveTargets is cloud-first.
+  let targetRows = [];
+  const providerLabel = (p) => ({ vaultline: "Sealkeep cloud", gdrive: "Google Drive", r2: "Cloudflare R2", s3: "S3", gcs: "Google Cloud" }[p] || p);
+  function renderTargets() {
+    const body = $("tg-body");
+    body.replaceChildren();
+    if (!targetRows.length) {
+      $("tg-msg").className = "empty";
+      $("tg-msg").textContent = "No rules yet — everything goes to Sealkeep cloud. Add your Drive or set rules from a machine: sealkeep storage targets add …";
+      $("tg-wrap").style.display = "none";
+      return;
+    }
+    $("tg-msg").textContent = "";
+    for (const t of targetRows) {
+      const tr = document.createElement("tr");
+      const name = document.createElement("td");
+      if (t.__editable) {
+        const sel = document.createElement("select");
+        for (const [v, l] of [["r2", "Cloudflare R2"], ["s3", "S3-compatible"], ["gcs", "Google Cloud"]]) {
+          const o = document.createElement("option"); o.value = v; o.textContent = l; sel.append(o);
+        }
+        sel.value = t.provider;
+        sel.setAttribute("aria-label", "Provider");
+        sel.addEventListener("change", () => { t.provider = sel.value; });
+        name.append(sel);
+      } else name.textContent = providerLabel(t.provider);
+      const where = document.createElement("td");
+      if (t.__editable) {
+        const b = document.createElement("input"); b.placeholder = "bucket"; b.style.width = "8rem"; b.value = t.bucket || "";
+        b.setAttribute("aria-label", "Bucket name");
+        b.addEventListener("input", () => { t.bucket = b.value.trim(); });
+        const p = document.createElement("input"); p.placeholder = "prefix/"; p.style.width = "6rem"; p.value = t.prefix || "";
+        p.setAttribute("aria-label", "Prefix");
+        p.addEventListener("input", () => { t.prefix = p.value.trim() || undefined; });
+        where.append(b, document.createTextNode(" "), p);
+      } else {
+        const wc = document.createElement("code");
+        wc.textContent = t.provider === "vaultline" ? "managed"
+          : t.provider === "gdrive" ? "folder " + (t.bucket || "Sealkeep")
+          : [t.bucket, t.prefix].filter(Boolean).join("/") || "—";
+        where.append(wc);
+        if (t.usedBytes) {
+          const held = document.createElement("span");
+          held.className = "cellsub";
+          held.textContent = "holds " + bytes(t.usedBytes);
+          where.append(held);
+        }
+      }
+      const pr = document.createElement("td");
+      const prIn = document.createElement("input"); prIn.type = "number"; prIn.className = "n"; prIn.min = "0"; prIn.max = "99";
+      prIn.value = t.priority ?? (t.provider === "vaultline" ? 0 : 10);
+      prIn.setAttribute("aria-label", "Priority for " + providerLabel(t.provider));
+      prIn.addEventListener("input", () => { t.priority = Number(prIn.value); });
+      pr.append(prIn);
+      const cap = document.createElement("td");
+      const capIn = document.createElement("input"); capIn.type = "number"; capIn.className = "n"; capIn.min = "1"; capIn.max = "99999"; capIn.placeholder = "none";
+      if (t.maxGb) capIn.value = t.maxGb;
+      capIn.setAttribute("aria-label", "Cap in GB for " + providerLabel(t.provider));
+      capIn.addEventListener("input", () => { t.maxGb = capIn.value ? Number(capIn.value) : undefined; });
+      cap.append(capIn);
+      const proj = document.createElement("td");
+      const projIn = document.createElement("input"); projIn.placeholder = "all projects"; projIn.style.minWidth = "9rem";
+      projIn.value = (t.projects || []).join(", ");
+      projIn.setAttribute("aria-label", "Projects pinned to " + providerLabel(t.provider));
+      projIn.addEventListener("input", () => {
+        const list = projIn.value.split(",").map((x) => x.trim()).filter(Boolean);
+        if (list.length) t.projects = list; else delete t.projects;
+      });
+      proj.append(projIn);
+      const act = document.createElement("td");
+      const rm = document.createElement("button"); rm.className = "del"; rm.type = "button"; rm.textContent = "Remove";
+      rm.addEventListener("click", () => { targetRows = targetRows.filter((x) => x !== t); renderTargets(); });
+      act.append(rm);
+      tr.append(name, where, pr, cap, proj, act);
+      body.append(tr);
+    }
+    $("tg-wrap").style.display = "";
+  }
+  async function loadTargets(token) {
+    try {
+      const data = await api("/v1/cloud/storage-targets", { token });
+      try { targetRows = JSON.parse(data.targets_json || "[]"); } catch { targetRows = []; }
+      if (!Array.isArray(targetRows)) targetRows = [];
+      renderTargets();
+    } catch (error) { say("tg-msg", errText(error), "err"); }
+  }
+  $("tg-add-bucket").addEventListener("click", () => {
+    targetRows.push({ id: "byo-" + Math.random().toString(36).slice(2, 8), provider: "r2", priority: 5, __editable: true });
+    renderTargets();
+    say("tg-save-msg", "Fill bucket and prefix, save — then put the access keys on your machine: sealkeep storage credentials set");
+  });
+  $("tg-add-drive").addEventListener("click", () => {
+    if (targetRows.some((t) => t.provider === "gdrive")) { say("tg-save-msg", "Drive is already in the rules."); return; }
+    targetRows.push({ id: "gdrive-" + Math.random().toString(36).slice(2, 8), provider: "gdrive", bucket: "Sealkeep", maxGb: 50, priority: 10 });
+    renderTargets();
+    say("tg-save-msg", "Added — save, then run the one-time consent on your machine.");
+  });
+  $("tg-save").addEventListener("click", async () => {
+    const token = sessionStorage.getItem(TOKEN);
+    if (!token) { say("tg-save-msg", "Sign in again to save.", "err"); return; }
+    $("tg-save").disabled = true;
+    try {
+      const clean = targetRows.map(({ __editable, ...t }) => t);
+      await api("/v1/cloud/storage-targets", { method: "PUT", token, body: { targets_json: JSON.stringify(clean) } });
+      say("tg-save-msg", "Saved. Every machine follows these on its next seal.");
+    } catch (error) { say("tg-save-msg", errText(error), "err"); }
+    $("tg-save").disabled = false;
+  });
+
   async function loadStorage(token) {
     try {
       const rows = await api("/v1/cloud/archives", { token });
@@ -1112,18 +1322,27 @@ sealkeep open 08424eb6… ./session.jsonl \
       }
       on("s-intro", true);
 
-      for (const r of rows) {
+      for (const r of foldFamilies(rows)) {
         const tr = document.createElement("tr");
         // textContent throughout: an archive ref is data, never markup.
         const ref = document.createElement("td");
         const code = document.createElement("code"); code.textContent = String(r.vault_ref).slice(0, 8); ref.append(code);
-        const size = document.createElement("td"); size.textContent = bytes(r.bytes);
+        const size = document.createElement("td");
+        const sc = document.createElement("code");
+        sc.textContent = bytes(r.bytes);
+        size.append(sc);
+        if (r.chunked) {
+          const sub = document.createElement("span");
+          sub.className = "cellsub";
+          sub.textContent = r.chunkCount + " sealed chunks";
+          size.append(sub);
+        }
         const st = document.createElement("td");
         const s = document.createElement("span");
         s.className = "state " + (r.state === "durable" ? "durable" : "pending");
         s.textContent = r.state === "durable" ? "stored" : "incomplete";
         st.append(s);
-        const when = document.createElement("td"); when.textContent = ago(r.durable_at || r.created_at);
+        const when = document.createElement("td"); when.className = "mono"; when.style.fontSize = ".78rem"; when.style.color = "var(--soft)"; when.textContent = ago(r.durable_at || r.created_at);
         const act = document.createElement("td");
         const btn = document.createElement("button");
         btn.className = "del"; btn.type = "button"; btn.textContent = "Delete";
@@ -1137,7 +1356,14 @@ sealkeep open 08424eb6… ./session.jsonl \
           }
           btn.disabled = true; btn.textContent = "Deleting";
           try {
-            await api("/v1/cloud/archives/" + encodeURIComponent(r.vault_ref), { method: "DELETE", token });
+            // A chunked archive is many stored objects; removing it means
+            // removing every member, envelope last so a crash leaves an
+            // openable family rather than an orphaned envelope.
+            const refs = r.members ? [...r.members].sort((a, b) => a.endsWith(".envelope.vlmeta") ? 1 : b.endsWith(".envelope.vlmeta") ? -1 : 0) : [r.vault_ref];
+            for (let i = 0; i < refs.length; i++) {
+              if (refs.length > 1) btn.textContent = "Deleting " + (i + 1) + "/" + refs.length;
+              await api("/v1/cloud/archives/" + encodeURIComponent(refs[i]), { method: "DELETE", token });
+            }
             await loadAccount(token);
           } catch (error) { say("s-msg", errText(error), "err"); btn.disabled = false; btn.textContent = "Delete"; }
         });
@@ -1146,11 +1372,13 @@ sealkeep open 08424eb6… ./session.jsonl \
         body.append(tr);
       }
 
-      const stored = rows.filter((r) => r.state === "durable").length;
+      // Counts describe archives, not stored objects — a chunk family is one.
+      const folded = foldFamilies(rows);
+      const stored = folded.filter((r) => r.state === "durable").length;
       say("s-msg", "");
-      $("a-count").textContent = String(rows.length);
-      $("s-foot").textContent = `${rows.length} archive${rows.length === 1 ? "" : "s"} · ${stored} fully stored`
-        + (stored < rows.length ? ` · ${rows.length - stored} incomplete, not billed` : "");
+      $("a-count").textContent = String(folded.length);
+      $("s-foot").textContent = `${folded.length} archive${folded.length === 1 ? "" : "s"} · ${stored} fully stored`
+        + (stored < folded.length ? ` · ${folded.length - stored} incomplete, not billed` : "");
       $("s-wrap").style.display = "";
     } catch (error) { say("s-msg", errText(error), "err"); }
   }
@@ -1163,13 +1391,28 @@ sealkeep open 08424eb6… ./session.jsonl \
     renderAccount(user);
     // Each section fails on its own. One dead panel must not blank the rest.
     if (user.plan === "pro") { $("a-count").textContent = "—"; loadStorage(token); }
+    await loadTargets(token);
     loadAudit(token);
-    loadStorage2(token);
     const devices = await loadDevices(token);
 
     // A brand-new account has exactly one useful next step. It leads the panel,
     // and it leads with the code rather than with a terminal — a paying
     // customer should not have to be a terminal user to finish setting up.
+    // The glance line: what is connected, where seals go — from data already fetched.
+    $("a-machines").textContent = String(devices);
+    $("a-dest").textContent = String(Math.max(targetRows.length, 1));
+    const destNames = (targetRows.length ? targetRows : [{ provider: "vaultline" }])
+      .slice().sort((a, b) => (a.priority ?? 10) - (b.priority ?? 10))
+      .map((t) => providerLabel(t.provider) + (t.maxGb ? " ≤" + t.maxGb + " GB" : ""));
+    const driveUsed = targetRows.filter((t) => t.provider === "gdrive" && t.usedBytes)
+      .reduce((n, t) => n + t.usedBytes, 0);
+    const byoUsed = targetRows.filter((t) => t.provider !== "gdrive" && t.provider !== "vaultline" && t.usedBytes)
+      .reduce((n, t) => n + t.usedBytes, 0);
+    $("a-hero").textContent = bytes(Number(user.used_bytes) || 0) + " in Sealkeep cloud"
+      + (driveUsed ? " · " + bytes(driveUsed) + " in Google Drive" : "")
+      + (byoUsed ? " · " + bytes(byoUsed) + " in your bucket" : "");
+    $("a-summary").textContent =
+      devices + " machine" + (devices === 1 ? "" : "s") + " connected · new archives go to " + destNames.join(", then ");
     const nothingYet = devices === 0 && Number(user.used_bytes) === 0;
     on("a-firstrun", nothingYet);
     $(nothingYet ? "pair-home-first" : "pair-home-more").append($("pair"));
@@ -1211,53 +1454,14 @@ sealkeep open 08424eb6… ./session.jsonl \
   // half the bytes, and still no innerHTML anywhere on the page.
   $("g-in").prepend($("g-up").querySelector("svg").cloneNode(true));
 
-  const storChoices = [...document.querySelectorAll("input[name=stor]")];
+  // The destination choice lives in Routing; this card only switches between
+  // "we meter it" (paid) and "your machine reports it" (free).
   let lastPaid = false;
-  let lastStorageMode = null;
   function applyStorageView() {
-    const managed = lastStorageMode ? lastStorageMode !== "byo" : lastPaid;
-    on("a-store-free", !managed);
-    on("a-store-paid", managed);
-  }
-
-  const paintStorage = () => {
-    for (const input of storChoices) input.closest(".choice").dataset.on = input.checked ? "yes" : "no";
-  };
-  for (const input of storChoices) input.addEventListener("change", paintStorage);
-
-  async function loadStorage2(token) {
-    try {
-      const where = await api("/v1/cloud/storage", { token });
-      const pick = storChoices.find((input) => input.value === where.mode) || storChoices[0];
-      pick.checked = true;
-      if (where.provider && where.provider !== "vaultline") $("st-prov").value = where.provider;
-      $("st-bucket").value = where.bucket && where.mode === "byo" ? where.bucket : "";
-      $("st-region").value = where.region || "";
-      $("st-prefix").value = where.mode === "byo" ? (where.prefix || "") : "";
-      lastStorageMode = where.mode;
-      applyStorageView();
-      paintStorage();
-    } catch { /* the card keeps its defaults */ }
+    on("a-store-free", !lastPaid);
+    on("a-store-paid", lastPaid);
   }
 
-  $("st-save").addEventListener("click", async () => {
-    const token = sessionStorage.getItem(TOKEN);
-    const mode = (storChoices.find((input) => input.checked) || {}).value || "managed";
-    $("st-save").disabled = true;
-    $("st-msg").textContent = "Saving";
-    try {
-      const saved = await api("/v1/cloud/storage", { method: "PUT", token, body: mode === "byo"
-        ? { mode, provider: $("st-prov").value, bucket: $("st-bucket").value.trim(), region: $("st-region").value.trim(), prefix: $("st-prefix").value.trim() }
-        : { mode } });
-      lastStorageMode = saved.mode;
-      applyStorageView();
-      $("st-msg").textContent = saved.mode === "byo"
-        ? "Saved. Run sealkeep storage credentials set on the machine that uploads — the keys stay there."
-        : "Saved. Nothing else to configure.";
-    } catch (error) { $("st-msg").textContent = errText(error); }
-    finally { $("st-save").disabled = false; }
-  });
-
   /* -------------------------------------------------------------- pairing
      An account created through Google has no password anyone knows, so a
      one-time code is the only way a machine can ever sign in. That makes this
@@ -1456,22 +1660,23 @@ sealkeep open 08424eb6… ./session.jsonl \
 
   const packsFrom = (user) => {
     const current = packageIdFor(user);
+    const cur = PACKAGES.find((p) => p.id === current);
+    $("a-pack-current").textContent = cur
+      ? (cur.managed ? `${cur.name} — $${cur.monthly} a month` : `${cur.name} — free`)
+      : `Custom allocation`;
+    $("a-pack-context").textContent = cur ? cur.blurb : "";
     const host = $("a-packs");
     while (host.firstChild) host.removeChild(host.firstChild);
-    for (const pack of PACKAGES) {
-      const row = document.createElement("div");
-      row.className = "choice";
-      row.dataset.on = pack.id === current ? "yes" : "no";
-      const wrap = document.createElement("span");
-      const title = document.createElement("span");
-      title.className = "t";
-      title.textContent = pack.managed ? `${pack.name} — $${pack.monthly}/mo` : `${pack.name} — free`;
-      const desc = document.createElement("span");
-      desc.className = "d";
-      desc.textContent = pack.id === current ? `${pack.blurb} This is your package.` : pack.blurb;
-      wrap.append(title, desc);
-      row.append(wrap);
-      host.append(row);
+    for (const pack of PACKAGES.filter((p) => p.managed)) {
+      const chip = document.createElement("span");
+      chip.className = "packchip" + (pack.id === current ? " now" : "");
+      const name = document.createElement("b"); name.textContent = pack.name;
+      const price = document.createElement("span"); price.textContent = `$${pack.monthly}/mo`;
+      chip.append(name, price);
+      if (pack.id === current) {
+        const tag = document.createElement("i"); tag.textContent = "your package"; chip.append(tag);
+      }
+      host.append(chip);
     }
     if (current === "custom") {
       const gb = Math.round((Number(user.quota_bytes) || 0) / 1073741824);

package/dist/src/chunk-store.js

@@ -407,6 +407,12 @@ async function runChunkSeal(ctx, args) {
         indexed = true;
     }
     catch { /* the next `index build` re-indexes this archive */ }
+    // The account learns what each destination holds from the machines that
+    // write to them — refresh the stamps now that this archive is recorded.
+    {
+        const { pushTargetUsage } = await import("./storage-targets.js");
+        void pushTargetUsage(ctx.dataDir);
+    }
     return { record, folder: args.folder, storedBytes: sealed.storedBytes, chunkCount: envelope.chunks.length, reusedChunks: args.reusedChunks, heldAtMostBytes, indexed };
 }
 /**

package/dist/src/local-api.js

@@ -645,11 +645,19 @@ async function cloudPlanAndQuota(dataDir) {
     const { account, source } = await resolveAccount(dataDir);
     return { plan: account.plan, quota: account.quota, email: account.email, source };
 }
-/** The account panel lives at the cloud API's origin with `/api` swapped for `#account`. */
+/**
+ * The account panel lives on the product domain, which is no longer the API's
+ * origin — deriving it from the cloud URL sent people to the old address after
+ * the rename. A self-hosted plane (VAULTLINE_CLOUD_URL set) still derives from
+ * its own origin, because there is no sealkeep.spala.ai panel for it.
+ */
 async function panelUrl() {
-    const { DEFAULT_CLOUD_URL } = await import("./cloud.js");
-    const origin = (process.env.VAULTLINE_CLOUD_URL ?? DEFAULT_CLOUD_URL).replace(/\/+$/, "").replace(/\/api$/, "");
-    return `${origin}/#account`;
+    if (process.env.VAULTLINE_CLOUD_URL) {
+        const origin = process.env.VAULTLINE_CLOUD_URL.replace(/\/+$/, "").replace(/\/api$/, "");
+        return `${origin}/#account`;
+    }
+    const { PRODUCT_URL } = await import("./branding.js");
+    return `${PRODUCT_URL}/#account`;
 }
 /**
  * Everything the settings screen shows about the account, and none of it

package/dist/src/storage-targets.d.ts

@@ -19,6 +19,9 @@ export type StorageTarget = StorageTargetConfig;
  */
 export declare function resolveTargets(dataDir: string): Promise<StorageTarget[]>;
 /** Pushes the rules to the account so every other machine syncs them. Advisory: offline edits still apply locally. */
+/** Re-pushes the current rules with fresh usage stamps — machines are the only
+ * ones who can see Drive and BYO bytes, so the account learns them from here. */
+export declare function pushTargetUsage(dataDir: string): Promise<void>;
 export declare function pushTargetsToCloud(dataDir: string, targets: StorageTarget[]): Promise<boolean>;
 /** Bytes each target currently holds, from the records: targetId when stamped, provider+bucket for older records. */
 export declare function targetUsage(dataDir: string, targets: StorageTarget[]): Promise<Map<string, number>>;

package/dist/src/storage-targets.js

@@ -59,8 +59,27 @@ async function pullTargetsFromCloud(dataDir) {
     }
 }
 /** Pushes the rules to the account so every other machine syncs them. Advisory: offline edits still apply locally. */
+/** Re-pushes the current rules with fresh usage stamps — machines are the only
+ * ones who can see Drive and BYO bytes, so the account learns them from here. */
+export async function pushTargetUsage(dataDir) {
+    try {
+        const targets = await resolveTargets(dataDir);
+        if (!targets.length)
+            return;
+        await pushTargetsToCloud(dataDir, targets);
+    }
+    catch { /* advisory */ }
+}
 export async function pushTargetsToCloud(dataDir, targets) {
     try {
+        const usage = await targetUsage(dataDir, targets).catch(() => null);
+        if (usage) {
+            const now = new Date().toISOString();
+            targets = targets.map((t) => {
+                const used = usage.get(t.id);
+                return used && used > 0 ? { ...t, usedBytes: used, usedAt: now } : t;
+            });
+        }
         const { cloudToken, DEFAULT_CLOUD_URL } = await import("./cloud.js");
         const token = await cloudToken(dataDir);
         const base = (process.env.VAULTLINE_CLOUD_URL ?? DEFAULT_CLOUD_URL).replace(/\/+$/, "");

package/dist/src/types.d.ts

@@ -133,6 +133,9 @@ export type StorageTargetConfig = {
     maxGb?: number;
     projects?: string[];
     priority?: number;
+    /** Stamped by machines when they push: bytes this target holds, per their records. */
+    usedBytes?: number;
+    usedAt?: string;
 };
 export declare function isV2(record: ArchiveRecord): record is ArchiveRecordV2;
 export type VaultConfig = {

package/dist/src/upload.js

@@ -59,6 +59,10 @@ export async function uploadArchive(dataDir, archiveId, options = {}) {
     const next = { ...record, remote };
     await writeRecord(config.storage.root, next);
     await recordAudit(dataDir, "upload.verify", "allowed", { archiveId, objectKey: lease.objectKey, bytes: ciphertext.length, provider: lease.provider });
+    {
+        const { pushTargetUsage } = await import("./storage-targets.js");
+        void pushTargetUsage(dataDir);
+    }
     return { archiveId, objectKey: lease.objectKey, bytes: ciphertext.length, checksum: localChecksum, verified: true, provider: lease.provider };
 }
 /** Uploads every archive that has no verified remote object yet. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sealkeep",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "type": "module",
   "description": "Sealkeep by SPALA AI \u2014 your AI coding-agent history, sealed, searchable, and shared across your machines.",
   "license": "SEE LICENSE IN LICENSE",