sealkeep 0.5.2 → 0.6.0

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">
@@ -891,7 +908,18 @@ sealkeep open 08424eb6… ./session.jsonl \
   /* Every error a catch renders into the page goes through this: the first 200
      characters are a message, anything past that is a payload nobody meant to
      put on screen. */
-  const errText = (error) => String((error && error.message) || error || "Something went wrong").slice(0, 200);
+  /* The control plane names its own internals when a step refuses — "Error at
+     step Precondition: that confirmation link is no longer valid". The half
+     after the colon is written for a person; the half before it is our
+     plumbing, and seeing it makes a clear refusal look like a crash. Strip the
+     prefix, keep the sentence, and capitalise what is left. */
+  const errText = (error) => {
+    let text = String((error && error.message) || error || "Something went wrong");
+    text = text.replace(/^\s*Error at step\s+[^:]{0,60}:\s*/i, "");
+    text = text.replace(/^\s*(Error|Exception|Failure)\s*:\s*/i, "");
+    if (text) text = text.charAt(0).toUpperCase() + text.slice(1);
+    return text.slice(0, 200);
+  };
   const bytes = (n) => {
     n = Number(n) || 0;
     for (const [u, d] of [["GB", 1024 ** 3], ["MB", 1024 ** 2], ["KB", 1024]])
@@ -910,7 +938,15 @@ sealkeep open 08424eb6… ./session.jsonl \
     const headers = {};
     if (body) headers["content-type"] = "application/json";
     if (token) headers.authorization = "Bearer " + token;
-    const res = await fetch(API + path, { method, headers, body: body && JSON.stringify(body) });
+    // A dropped connection surfaces as TypeError("Failed to fetch") — the
+    // browser's words, not ours, and they tell a customer nothing about what
+    // to do. Everything else in this panel refuses in a sentence; so does this.
+    let res;
+    try {
+      res = await fetch(API + path, { method, headers, body: body && JSON.stringify(body) });
+    } catch {
+      throw new Error("No answer from the service. Check your connection and try again.");
+    }
     // A gateway answering for a dead service sends an HTML error page, not
     // JSON. That markup used to ride error.message straight into spans like
     // pair-msg — raw <html> on screen. When the body does not parse, the
@@ -944,6 +980,40 @@ sealkeep open 08424eb6… ./session.jsonl \
     if (which === "account" && !wasPanel && !document.body.classList.contains("booting")) enterPanel();
   }
 
+  /* In-panel navigation. The pills and the plan chip both land here rather
+     than leaving it to the native anchor jump: a programmatic smooth scroll is
+     dropped on the floor in some browsers — observed live, where the hash
+     changed and the page never moved — so this checks whether anything
+     actually happened and takes the plain jump if not. A nav that does nothing
+     is worse than one that does not animate. The offset clears the sticky nav. */
+  function goTo(el) {
+    if (!el) return;
+    const start = window.scrollY;
+    // The nav wraps to two rows on a phone, so a fixed offset would park the
+    // card underneath it. Measure what is actually sticking.
+    const nav = document.querySelector(".acct-nav");
+    const clearance = (nav ? nav.getBoundingClientRect().height : 0) + 12;
+    const target = Math.max(0, el.getBoundingClientRect().top + start - clearance);
+    const smooth = motionOK();
+    window.scrollTo({ top: target, behavior: smooth ? "smooth" : "instant" });
+    if (!smooth) return;
+    setTimeout(() => {
+      if (Math.abs(window.scrollY - start) < 4 && Math.abs(target - start) > 24) {
+        window.scrollTo({ top: target, behavior: "instant" });
+      }
+    }, 320);
+  }
+  for (const link of document.querySelectorAll(".acct-nav a")) {
+    link.addEventListener("click", (event) => {
+      const id = link.getAttribute("href").slice(1);
+      const target = document.getElementById(id);
+      if (!target) return;
+      event.preventDefault();
+      history.replaceState(null, "", location.pathname + location.search + "#" + id);
+      goTo(target);
+    });
+  }
+
   /* "Account" is a promise the page has to keep on the first click, not the
      second. Routing it here rather than leaving it to the native anchor means
      exactly one thing is scrolling, and it runs after the state that decides
@@ -977,7 +1047,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-plan").onclick = () => goTo($("c-plan"));
     $("a-who").textContent = [
       user.email,
       "joined " + day(user.created_at),
@@ -994,7 +1064,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);
 
@@ -1181,22 +1251,55 @@ sealkeep open 08424eb6… ./session.jsonl \
   // projects, priority}]. Editing here lands on every machine of the vault,
   // because resolveTargets is cloud-first.
   let targetRows = [];
+  let planIsPaid = false;
   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-msg").textContent = planIsPaid
+        ? "No rules yet — everything goes to Sealkeep cloud. Add a destination here, or set rules from a machine: sealkeep storage targets add …"
+        : "No rules yet — each machine seals to the bucket configured on it. Add a destination here to route by project or cap it.";
       $("tg-wrap").style.display = "none";
       return;
     }
     $("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 +1338,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 +1354,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;
@@ -1262,6 +1371,7 @@ sealkeep open 08424eb6… ./session.jsonl \
         // an empty state is prose, so it is set in prose. .msg is mono because
         // it reports what a machine did.
         on("s-intro", false);
+        $("a-count").textContent = "0";
         $("s-msg").className = "empty";
         $("s-msg").textContent = "Nothing stored yet. Archives appear here on their own once a machine is connected.";
         $("s-wrap").style.display = "none";
@@ -1275,13 +1385,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 +1429,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"); }
   }
@@ -1325,17 +1445,44 @@ sealkeep open 08424eb6… ./session.jsonl \
     try { user = await api("/me", { token }); }
     catch { sessionStorage.removeItem(TOKEN); return false; }
 
+    // Set before any card renders: the routing card's empty state asks whether
+    // this account stores with us, and it draws during loadTargets below.
+    planIsPaid = user.plan === "pro";
     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.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);
+    // Only a paid account stores with us. Saying "0 B in Sealkeep cloud" to
+    // someone who runs their own bucket states a number about a place their
+    // archives never go — the free line names their storage instead.
+    const paidPlan = planIsPaid;
+    const parts = [];
+    if (paidPlan) parts.push(bytes(Number(user.used_bytes) || 0) + " in Sealkeep cloud");
+    if (driveUsed) parts.push(bytes(driveUsed) + " in Google Drive");
+    if (byoUsed) parts.push(bytes(byoUsed) + " in your bucket");
+    $("a-hero").textContent = parts.length ? parts.join(" · ")
+      : "Your archives live in storage you run";
+    $("a-summary").textContent =
+      (devices ? devices + " machine" + (devices === 1 ? "" : "s") + " connected" : "No machine connected yet")
+      + " · new archives go to "
+      + (destNames.length ? destNames.join(", then ")
+         : paidPlan ? "Sealkeep cloud" : "the bucket each machine is configured with");
     const nothingYet = devices === 0 && Number(user.used_bytes) === 0;
     on("a-firstrun", nothingYet);
     $(nothingYet ? "pair-home-first" : "pair-home-more").append($("pair"));
@@ -1377,53 +1524,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 +1730,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);