sealkeep 0.5.2 → 0.5.3

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 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

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;
@@ -559,6 +584,16 @@ sealkeep open 08424eb6… ./session.jsonl \
       <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>
@@ -573,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>
@@ -581,19 +616,83 @@ 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">Names live on your machines — the cloud 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>
+      <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>
@@ -604,16 +703,16 @@ sealkeep open 08424eb6… ./session.jsonl \
       </div>
     </div>
 
-    <div class="card" id="c-plan">
+    <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>
@@ -625,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">
@@ -658,94 +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" id="c-targets">
-      <span class="eyebrow">Routing</span>
-      <h3>Where new archives go</h3>
-      <p>Rules live on your account, so every machine of the vault follows the same ones. Lowest priority number wins; a project pinned to a target always goes there; a target at its cap passes to the next. Managed cloud is the fallback when nothing else claims an archive.</p>
-      <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="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">
-      <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>
@@ -753,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>
@@ -760,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">
@@ -994,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);
 
@@ -1194,9 +1211,39 @@ sealkeep open 08424eb6… ./session.jsonl \
     $("tg-msg").textContent = "";
     for (const t of targetRows) {
       const tr = document.createElement("tr");
-      const name = document.createElement("td"); name.textContent = providerLabel(t.provider);
+      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");
-      const wc = document.createElement("code"); wc.textContent = t.provider === "vaultline" ? "managed" : [t.bucket, t.prefix].filter(Boolean).join("/") || "—"; where.append(wc);
+      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);
@@ -1235,6 +1282,11 @@ sealkeep open 08424eb6… ./session.jsonl \
       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 });
@@ -1246,7 +1298,8 @@ sealkeep open 08424eb6… ./session.jsonl \
     if (!token) { say("tg-save-msg", "Sign in again to save.", "err"); return; }
     $("tg-save").disabled = true;
     try {
-      await api("/v1/cloud/storage-targets", { method: "PUT", token, body: { targets_json: JSON.stringify(targetRows) } });
+      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;
@@ -1275,13 +1328,21 @@ sealkeep open 08424eb6… ./session.jsonl \
         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 = r.chunked ? bytes(r.bytes) + " in " + r.chunkCount + " sealed chunks" : bytes(r.bytes);
+        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";
@@ -1311,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"); }
   }
@@ -1328,14 +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); }
-    loadTargets(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"));
@@ -1377,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);
+    on("a-store-free", !lastPaid);
+    on("a-store-paid", lastPaid);
   }
 
-  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 */ }
-  }
-
-  $("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
@@ -1622,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/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.2",
+  "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",