@bongos/core 1.19.83 → 1.19.85

package/public-landing/projects.html

@@ -10,184 +10,64 @@
      correctly when viewed standalone. -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=Quicksand:wght@400;500;600;700&display=swap">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=Quicksand:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap">
+<!-- The R07 redesign (task 1002696): shared token + component layer — the
+     space sky both modes ride on, light/dark governing the cards. The server
+     re-injects the branding :root AFTER stylesheets, so the pack stays
+     authoritative. Design contract: docs/design/projects-surfaces-redesign-direction.md -->
+<link rel="stylesheet" href="/assets/cosmos.css">
+<script>
+/* apply the saved color mode BEFORE first paint so there's no flash;
+   no saved choice = follow the OS (prefers-color-scheme) */
+try{var _m=localStorage.getItem('cb-color-mode');if(_m==='light'||_m==='dark')document.documentElement.setAttribute('data-mode',_m);}catch(e){}
+</script>
 <style>
-/* ── Cloud Bongos vanilla look (ADR 0064) — same baked defaults as index.html /
-   create.html; the server re-injects the branding vars after this stylesheet so
-   the pack stays authoritative. /projects is the owner's my-projects surface
-   (goal 1000059, task 1002693): the durable place to find, watch, and manage
-   your instances after the /create tab closes. Functional-first against the
-   current look (the R07 redesign applies later). Same trust boundary as
-   /create — every button here only ASKS (enqueues an intent); the control-plane
-   runner does the real infra work (ADR 0111 §2). ── */
-:root{
-  --bg:#fff7ed; --bg-deep:#ffedd5;
-  --ink:#2a1f17; --ink-soft:#6b5d52; --ink-faint:#9c8d80;
-  --accent:#f97316; --accent-deep:#ea580c; --sea:#38bdf8; --terracotta:#fb7185;
-  --card:#fffdfa; --line:#f3e1c9; --ok:#16a34a; --err:#dc2626;
-  --font-display:"Baloo 2","Quicksand",system-ui,"Arial Rounded MT Bold",sans-serif;
-  --font-body:"Quicksand",system-ui,-apple-system,"Segoe UI",sans-serif;
-  --font-mono:"Fira Code",ui-monospace,SFMono-Regular,Menlo,monospace;
-}
-*{box-sizing:border-box;margin:0;padding:0;}
-[hidden]{display:none !important;}
-html{scroll-behavior:smooth;}
-body{
-  font-family:var(--font-body); color:var(--ink);
-  background:var(--bg);
-  min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden;
-}
-/* the sky — same fixed dawn layer as /create (gradient here, not on body:
-   fixed-attachment backgrounds black out on scrolled composited pages) */
-.sky{
-  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
-  background:linear-gradient(180deg,#e9f5fd 0%,#fde8c8 34%,#fff4e6 62%,#fffdfa 100%);
-}
-.cloud{position:absolute;border-radius:50%;background:rgba(255,255,255,0.55);filter:blur(38px);}
-.cloud.a{width:380px;height:380px;top:-120px;left:-80px;animation:drift 26s ease-in-out infinite alternate;}
-.cloud.b{width:300px;height:300px;top:4%;right:-60px;background:rgba(255,224,178,0.5);animation:drift 32s ease-in-out infinite alternate-reverse;}
-.cloud.c{width:460px;height:460px;bottom:-200px;left:24%;background:rgba(255,255,255,0.4);animation:drift 40s ease-in-out infinite alternate;}
-@keyframes drift{from{transform:translateX(-18px)}to{transform:translateX(26px)}}
-
-/* ── header ── */
-.top{
-  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
-  padding:20px clamp(18px,4vw,40px);
-}
-.top .mark{
-  font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-0.5px;
-  text-transform:lowercase;color:var(--ink);text-decoration:none;
-}
-.top .mark span{color:var(--accent);}
-.top-right{display:flex;align-items:center;gap:clamp(10px,2vw,18px);}
-.who{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink-soft);min-height:34px;}
-.who img{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 8px rgba(42,31,23,0.12);}
-
-/* ── layout ── */
-.wrap{
-  position:relative;z-index:1;max-width:880px;margin:0 auto;
-  padding:clamp(8px,2vw,28px) clamp(16px,4vw,40px) 80px;
-}
-.card{
-  background:var(--card);border-radius:26px;
-  box-shadow:0 24px 60px -24px rgba(234,88,12,0.22), 0 6px 22px -8px rgba(42,31,23,0.10);
-  padding:clamp(22px,3.6vw,40px);
-  animation:rise .7s ease-out both;
-}
-@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
-h1{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.4vw,32px);letter-spacing:-0.5px;line-height:1.15;margin-bottom:8px;}
-.lede{font-size:15.5px;color:var(--ink-soft);font-weight:500;line-height:1.55;margin-bottom:24px;max-width:60ch;}
-.lede a,.projMsg a,.pnote a{color:var(--accent-deep);font-weight:700;text-decoration:none;}
-.lede a:hover,.projMsg a:hover,.pnote a:hover{text-decoration:underline;}
-
-/* ── buttons ── */
-.btn{
-  display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
-  font-family:var(--font-display);font-weight:700;font-size:15px;color:#fff;
-  background:var(--accent);border:none;border-radius:999px;padding:11px 22px;text-decoration:none;
-  box-shadow:0 10px 22px -8px rgba(249,115,22,0.7);
-  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
-}
-.btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px -8px rgba(249,115,22,0.8);}
-.btn:disabled{opacity:0.6;cursor:default;transform:none;}
-.btn.ghost{background:transparent;color:var(--ink-soft);box-shadow:none;border:2px solid var(--line);}
-.btn.ghost:hover{border-color:var(--accent);color:var(--accent-deep);}
-.btn.small{font-size:13.5px;padding:8px 16px;}
-.btn.danger{background:transparent;color:var(--err);box-shadow:none;border:2px solid rgba(220,38,38,0.35);}
-.btn.danger:hover{background:rgba(220,38,38,0.06);border-color:var(--err);}
-.btn .gh{width:17px;height:17px;fill:currentColor;}
-.linklike{background:none;border:none;cursor:pointer;font-family:var(--font-body);font-weight:700;font-size:13.5px;color:var(--accent-deep);text-decoration:underline;padding:6px 4px;}
-
-/* ── project cards ── */
-.projects{list-style:none;display:flex;flex-direction:column;gap:18px;}
-.proj{
-  border:2px solid var(--line);border-radius:18px;padding:18px 20px;background:#fff;
-}
-.proj.gone{opacity:0.62;}
-.projHead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
-.projName{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-0.3px;}
-.chip{
-  font-size:12px;font-weight:700;letter-spacing:0.3px;border-radius:999px;padding:3px 11px;
-  background:var(--bg-deep);color:var(--ink-soft);
-}
-.chip.live{background:rgba(22,163,74,0.13);color:var(--ok);}
-.chip.busy{background:rgba(249,115,22,0.14);color:var(--accent-deep);}
-.chip.bad{background:rgba(220,38,38,0.11);color:var(--err);}
-.projMeta{font-size:13px;font-weight:600;color:var(--ink-faint);margin-top:6px;display:flex;gap:14px;flex-wrap:wrap;}
-.projMeta code{font-family:var(--font-mono);font-size:12.5px;background:var(--bg-deep);border-radius:6px;padding:1px 6px;color:var(--accent-deep);}
-.addr{margin-top:12px;font-size:14.5px;font-weight:600;color:var(--ink-soft);}
-.addr a{color:var(--accent-deep);font-weight:700;text-decoration:none;}
-.addr a:hover{text-decoration:underline;}
-.addr .none{color:var(--ink-faint);font-style:italic;}
-.attach{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;}
-.attach input[type=text]{
-  flex:1;min-width:220px;font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--ink);
-  background:#fff;border:2px solid var(--line);border-radius:12px;padding:9px 14px;outline:none;
-  transition:border-color .15s ease, box-shadow .15s ease;
-}
-.attach input[type=text]::placeholder{color:#c9b8a6;font-weight:500;}
-.attach input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(249,115,22,0.13);}
-.projMsg{font-size:13.5px;font-weight:600;margin-top:10px;min-height:18px;color:var(--ink-faint);}
-.projMsg.ok{color:var(--ok);}
-.projMsg.err{color:var(--err);}
-.actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;align-items:center;}
-.confirmRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13.5px;font-weight:700;color:var(--err);}
-
-/* live standup watch — the /create stage line, per card */
-.prog{margin-top:12px;border:2px solid var(--line);border-radius:14px;padding:12px 16px;background:var(--bg);}
-.prog.isLive{border-color:rgba(22,163,74,0.4);}
-.prog.isErr{border-color:rgba(220,38,38,0.35);}
-.stages{list-style:none;display:flex;gap:0;margin-bottom:8px;}
-.stages li{flex:1;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink-faint);}
-.stages .sdot{width:11px;height:11px;border-radius:50%;background:var(--line);flex:0 0 auto;}
-.stages li.done{color:var(--ink-soft);}
-.stages li.done .sdot{background:var(--ok);}
-.stages li.now{color:var(--accent-deep);}
-.stages li.now .sdot{background:var(--accent);animation:pulseDot 1.4s ease-in-out infinite;}
-@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,0.35)}50%{box-shadow:0 0 0 6px rgba(249,115,22,0.06)}}
-@media (prefers-reduced-motion:reduce){.stages li.now .sdot{animation:none}}
-.pnote{font-size:13px;font-weight:600;color:var(--ink-soft);line-height:1.5;}
-
-/* ── page-level states ── */
-.alert{
-  display:none;background:rgba(220,38,38,0.07);border:2px solid rgba(220,38,38,0.25);
-  color:var(--err);font-weight:600;font-size:14px;border-radius:14px;padding:12px 16px;margin-bottom:18px;
-}
-.alert.on{display:block;}
-.loading{font-size:14.5px;font-weight:600;color:var(--ink-faint);padding:14px 0;}
-.empty{padding:10px 0 4px;}
-.empty p{font-size:15px;font-weight:600;color:var(--ink-soft);margin-bottom:16px;max-width:52ch;line-height:1.55;}
-.finePrint{font-size:12.5px;color:var(--ink-faint);font-weight:600;margin-top:16px;line-height:1.5;}
-
-.foot{
-  position:relative;z-index:1;text-align:center;font-size:13px;font-weight:600;color:var(--ink-faint);
-  padding:0 20px 34px;
-}
-@media (max-width:640px){
-  .projHead{gap:8px;}
-  .actions{flex-direction:column;align-items:stretch;}
-}
+/* page-specific layout. /projects is the owner's manage surface (goal
+   1000059): the durable place to find, watch, and manage your instances.
+   Same trust boundary as /create — every button only ASKS (enqueues an
+   intent); the control-plane runner does the real infra work (ADR 0111 §2). */
+.wrap{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:0 clamp(16px,4vw,40px) 80px;}
+.card{margin-bottom:26px;}
 </style>
 </head>
 <body>
 <div class="sky" aria-hidden="true">
-  <div class="cloud a"></div><div class="cloud b"></div><div class="cloud c"></div>
+  <span class="star" style="top:2%;left:12%;width:2px;height:2px;"></span>
+  <span class="star" style="top:5%;left:28%;width:1.5px;height:1.5px;animation-delay:.7s;"></span>
+  <span class="star" style="top:3%;left:47%;width:2px;height:2px;animation-delay:1.4s;"></span>
+  <span class="star" style="top:8%;left:63%;width:1.5px;height:1.5px;animation-delay:.3s;"></span>
+  <span class="star" style="top:4%;left:78%;width:2.5px;height:2.5px;animation-delay:2s;"></span>
+  <span class="star" style="top:10%;left:88%;width:1.5px;height:1.5px;animation-delay:1s;"></span>
+  <span class="star" style="top:14%;left:20%;width:1.5px;height:1.5px;animation-delay:1.8s;"></span>
+  <span class="star" style="top:22%;left:55%;width:2px;height:2px;animation-delay:.5s;"></span>
+  <span class="star" style="top:34%;left:36%;width:1.5px;height:1.5px;animation-delay:2.4s;"></span>
+  <span class="star" style="top:30%;left:78%;width:1.5px;height:1.5px;animation-delay:1.2s;"></span>
+  <span class="star" style="top:48%;left:8%;width:2px;height:2px;animation-delay:.9s;"></span>
+  <span class="star" style="top:55%;left:90%;width:1.5px;height:1.5px;animation-delay:1.6s;"></span>
+  <span class="star" style="top:68%;left:24%;width:1.5px;height:1.5px;animation-delay:2.1s;"></span>
+  <span class="star" style="top:76%;left:64%;width:2px;height:2px;animation-delay:.4s;"></span>
+  <span class="star" style="top:88%;left:42%;width:1.5px;height:1.5px;animation-delay:1.9s;"></span>
 </div>
 
 <header class="top">
   <a class="mark" href="/" data-brand-product>cloud bongos</a>
   <div class="top-right">
-    <a class="btn small ghost" href="/create">+ New project</a>
+    <a class="btn-space" href="/create">+ New project</a>
+    <button type="button" class="mode-toggle" id="modeToggle" title="Switch light / dark" aria-label="Switch light or dark mode">☾</button>
     <div class="who" id="who"></div>
   </div>
 </header>
 
+<div class="hero">
+  <h1>Your projects</h1>
+  <p class="lede">The same sky as the front door — every project you own is an <b>orb</b> here. Each card says what the platform last verified, and when.</p>
+</div>
+
 <div class="wrap">
   <main class="card">
     <!-- signed-out gate: identity-only sign-in (ADR 0143 least-privilege — unlike
          /create, listing your own instances needs no repo scope) -->
     <section id="gate" hidden>
-      <h1>Your projects</h1>
       <p class="lede">Every project you own, in one place — its live status, its address, and the controls that matter. Sign in with GitHub to see yours.</p>
       <a class="btn" id="signin" href="/api/bongos/auth/web/start?return=/projects">
         <svg class="gh" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
@@ -198,16 +78,14 @@ h1{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.4vw,32
 
     <!-- signed-in: the list -->
     <section id="mine" hidden>
-      <h1>Your projects</h1>
-      <p class="lede">Everything you own, watched live. Standups keep running even with this tab closed — come back any time.</p>
       <div class="alert" id="pageAlert" role="alert"></div>
       <div class="loading" id="loading">Reading your projects…</div>
       <section class="empty" id="empty" hidden>
-        <p>No projects yet. Your first one is a few minutes of gentle drumming away — its own repository, its own home on the web, built by agents.</p>
+        <p>You don't own any projects yet. Creating one takes about five minutes — name it, pick a home for its code, and it gets an address of its own in this sky.</p>
         <a class="btn" href="/create">Create your first project</a>
       </section>
       <ul class="projects" id="projectsList"></ul>
-      <p class="finePrint">Buttons here only <em>ask</em> — teardown and address changes are queued for the platform's own runner; nothing touches servers from this page.</p>
+      <p class="finePrint">Buttons here ask the platform to act — a runner does the real work, and each card reports only what was verified, with a timestamp. Standups keep running even with this tab closed.</p>
     </section>
   </main>
 </div>
@@ -221,14 +99,34 @@ h1{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.4vw,32
   'use strict';
 
   var API = '/api/bongos';
-  var POLL_MS = 5000;         /* the create.html watch cadence */
-  var POLL_SOFT_MS = 10000;   /* transient failure back-off */
+  var POLL_MS = 5000;          /* the create.html watch cadence (in-flight cards) */
+  var POLL_SOFT_MS = 10000;    /* transient failure back-off */
+  var REFRESH_MS = 60000;      /* settled-card refresh: recency + heartbeat overlay
+                                  (direction §3 — an active card must be able to
+                                  self-correct, so the list re-reads once a minute) */
+  var FRESH_MS = 12 * 60 * 1000; /* "checked Xm ago" freshness ≈ 2 heartbeat sweeps */
 
   var b = (typeof window !== 'undefined' && window.__BRANDING__) || {};
   var productName = (b.identity && b.identity.productName) || 'Cloud Bongos';
   document.querySelectorAll('[data-brand-product]').forEach(function (n) { n.textContent = productName.toLowerCase(); });
 
   function $(id) { return document.getElementById(id); }
+
+  /* ── light/dark: the sky is constant, the mode governs the cards. No saved
+     choice = follow the OS; the toggle stores an explicit one. ── */
+  function resolvedMode() {
+    var m = document.documentElement.getAttribute('data-mode');
+    if (m === 'light' || m === 'dark') return m;
+    return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
+  }
+  function paintModeToggle() { $('modeToggle').textContent = resolvedMode() === 'dark' ? '☀' : '☾'; }
+  $('modeToggle').addEventListener('click', function () {
+    var next = resolvedMode() === 'dark' ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-mode', next);
+    try { localStorage.setItem('cb-color-mode', next); } catch (e) {}
+    paintModeToggle();
+  });
+  paintModeToggle();
   function esc(s) {
     return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
       return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
@@ -240,6 +138,27 @@ h1{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.4vw,32
   var timers = {};    /* id → watch timer */
   var lastMsg = {};   /* id → {text, cls} — survives a card re-render */
 
+  /* ── time helpers: every liveness claim carries recency (direction §3) ── */
+
+  function relTime(ts) {
+    var d = Date.now() - ts;
+    if (d < 90 * 1000) return 'just now';
+    if (d < 60 * 60 * 1000) return Math.round(d / 60000) + 'm ago';
+    if (d < 24 * 60 * 60 * 1000) return Math.round(d / 3600000) + 'h ago';
+    return new Date(ts).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+  }
+  function shortDate(iso) {
+    return iso ? new Date(iso).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : '';
+  }
+  /* "since 14:02" today, "since Aug 7" earlier — for the unreachable chip */
+  function clockOrDate(ts) {
+    var d = new Date(ts);
+    if (Date.now() - ts < 24 * 60 * 60 * 1000 && d.getDate() === new Date().getDate()) {
+      return d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+    }
+    return shortDate(d.toISOString());
+  }
+
   /* ── API plumbing ─────────────────────────────────────────────────────── */
 
   /* Parse the error envelope truthfully: { error: { code, message, details } }.
@@ -255,16 +174,30 @@ h1{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.4vw,32
     return 'Your session expired — <a href="' + API + '/auth/web/start?return=/projects">sign in again</a>.';
   }
 
-  /* ── status vocabulary ───────────────────────────────────────────────── */
+  /* ── status vocabulary (direction §4): the chip only asserts what the
+     platform verified, and says when. `last_verified_*` is the heartbeat
+     overlay — absent (pre-migration or never probed) reads as unverified. ── */
+
+  function chipMarkup(cls, label, rec) {
+    return '<span class="chip ' + cls + '"><span class="cdot"></span>' + esc(label) +
+      (rec ? ' <span class="rec">· ' + esc(rec) + '</span>' : '') + '</span>';
+  }
+  function chipFor(inst) {
+    var s = inst.status;
+    if (s === 'active') {
+      var at = inst.last_verified_at ? new Date(inst.last_verified_at).getTime() : 0;
+      if (inst.last_verified_up === false) return chipMarkup('down', 'unreachable', at ? 'since ' + clockOrDate(at) : '');
+      if (inst.last_verified_up && at && (Date.now() - at) <= FRESH_MS) return chipMarkup('live', 'live', 'checked ' + relTime(at));
+      return chipMarkup('maybe', 'live?', at ? 'last seen ' + relTime(at) : 'not checked yet');
+    }
+    if (s === 'requested') return chipMarkup('busy', 'queued');
+    if (s === 'provisioning') return chipMarkup('busy', 'standing up');
+    if (s === 'error') return chipMarkup('bad', 'snagged', inst.updated_at ? 'since ' + shortDate(inst.updated_at) : '');
+    if (s === 'tearing_down') return chipMarkup('busy', 'tearing down');
+    if (s === 'torn_down') return chipMarkup('calm', 'torn down', shortDate(inst.torn_down_at));
+    return chipMarkup('', inst.status);
+  }
 
-  var CHIP = {
-    requested: { cls: 'busy', label: 'queued' },
-    provisioning: { cls: 'busy', label: 'standing up' },
-    active: { cls: 'live', label: 'live' },
-    error: { cls: 'bad', label: 'snagged' },
-    tearing_down: { cls: 'busy', label: 'tearing down' },
-    torn_down: { cls: '', label: 'torn down' }
-  };
   /* client mirror of provisioning.TEARDOWN_FROM minus tearing_down (already
      going); no button either while a teardown intent is already queued */
   function canTeardown(inst) {
@@ -273,55 +206,123 @@ h1{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.4vw,32
   }
   /* client mirror of provisioning.DOMAIN_ATTACH_FROM */
   function canAttachDomain(inst) { return !inst.domain && (inst.status === 'requested' || inst.status === 'error' || inst.status === 'active'); }
+  /* re-enqueue doors: Try again on snagged, Bring it back on torn down —
+     both re-POST the slug (the server's PROVISION_ENQUEUE_FROM gate) */
+  function canRetry(inst) { return inst.status === 'error' && !inst.open_intent; }
+  function canRevive(inst) { return inst.status === 'torn_down' && !inst.open_intent; }
   /* keep watching while the platform is doing something to this instance */
   function shouldWatch(inst) {
-    if (inst.status === 'requested' || inst.status === 'provisioning' || inst.status === 'tearing_down' || inst.status === 'error') return true;
+    if (inst.status === 'requested' || inst.status === 'provisioning' || inst.status === 'tearing_down') return true;
     return !!inst.open_intent; /* e.g. a queued teardown or domain-attach on an active instance */
   }
 
-  /* ── the live standup watch (the create.html stage line, per card) ────── */
+  /* ── the orb: the gate's project sphere, glow keyed to verification ────── */
+
+  var ORB_ACCENTS = ['#fb923c', '#38bdf8', '#fb7185', '#f6c976', '#8b7ec8'];
+  var ORB_GLOWS = ['rgba(251,146,60,.5)', 'rgba(56,189,248,.5)', 'rgba(251,113,133,.45)', 'rgba(246,201,118,.45)', 'rgba(139,126,200,.45)'];
+  function orbFor(inst) {
+    var h = 0, slug = String(inst.slug || '');
+    for (var i = 0; i < slug.length; i++) h = (h * 31 + slug.charCodeAt(i)) >>> 0;
+    var k = h % ORB_ACCENTS.length;
+    var cls = 'orb';
+    if (inst.status === 'torn_down' || inst.status === 'tearing_down') cls += ' ghost';
+    else if (inst.status === 'error' || (inst.status === 'active' && inst.last_verified_up === false)) cls += ' ashen';
+    else if (inst.status === 'active' && !(inst.last_verified_up && inst.last_verified_at && (Date.now() - new Date(inst.last_verified_at).getTime()) <= FRESH_MS)) cls += ' dim';
+    var style = '--acc:' + ORB_ACCENTS[k] + ';--glow:' + ORB_GLOWS[k];
+    if (inst.status === 'active' && inst.domain) {
+      return '<a class="' + cls + '" style="' + style + '" href="https://' + esc(inst.domain) + '" target="_blank" rel="noopener" title="Open ' + esc(inst.slug) + '" aria-label="Open ' + esc(inst.slug) + '"></a>';
+    }
+    return '<span class="' + cls + '" style="' + style + '" aria-hidden="true"></span>';
+  }
+
+  /* ── progress strips: each flow speaks its own stages (direction §4).
+     The strip is chosen by the open intent + status, never one-size; a
+     torn-down card with a queued revive shows the REVIVE strip (F22). ── */
 
-  function progressMarkup(stageNow, stagesDone, note, cls) {
-    var names = ['Request filed', 'Standing it up', 'Live'];
-    return '<div class="prog ' + (cls || '') + '" role="status" aria-live="polite">' +
-      '<ul class="stages">' + names.map(function (n, i) {
+  var FLOWS = {
+    standup: { names: ['Request filed', 'Standing it up', 'Live'], cls: '' },
+    revive: { names: ['Revive queued', 'Standing it up', 'Back live'], cls: '' },
+    teardown: { names: ['Teardown queued', 'Winding down', 'Torn down'], cls: 'flowDown' },
+    address: { names: ['Address queued', 'Wiring the address', 'Answering there'], cls: '' }
+  };
+  function stripMarkup(flow, stageNow, stagesDone, note) {
+    var f = FLOWS[flow];
+    return '<div class="strip ' + f.cls + '" role="status" aria-live="polite">' +
+      '<ul class="stages">' + f.names.map(function (n, i) {
         var c = stagesDone > i ? 'done' : (stageNow === i ? 'now' : '');
         return '<li class="' + c + '"><span class="sdot"></span><span class="slbl">' + n + '</span></li>';
       }).join('') + '</ul>' +
       '<p class="pnote">' + note + '</p></div>';
   }
-  function progressFor(inst) {
+  function stripFor(inst) {
     var s = inst.status;
-    if (s === 'requested') return progressMarkup(1, 1, 'Waiting for a runner to pick it up — usually under a minute.');
-    if (s === 'provisioning') return progressMarkup(1, 1, 'Raising the server, database, and address. A few minutes, nothing needed from you.');
-    if (s === 'error') return progressMarkup(1, 1, 'The standup hit a snag' + (inst.error_note ? ': ' + esc(inst.error_note) : '') + '. The platform keeps retrying — this card updates as it recovers.', 'isErr');
-    if (s === 'tearing_down') return progressMarkup(1, 0, 'Tearing it down now — the card settles when it’s done.', 'isErr');
-    if (s === 'active' && inst.open_intent) {
+    var revive = !!inst.torn_down_at; /* stood down before this standup → it's a revive */
+    if (s === 'requested') {
+      return stripMarkup(revive ? 'revive' : 'standup', 1, 1,
+        'Waiting for a runner to pick it up. This card updates the moment it starts.');
+    }
+    if (s === 'provisioning') {
+      return stripMarkup(revive ? 'revive' : 'standup', 1, 1,
+        revive ? 'Bringing it back on the newest platform version — nothing needed from you.'
+               : 'Raising the server, database, and address — nothing needed from you.');
+    }
+    if (s === 'tearing_down') {
+      return stripMarkup('teardown', 1, 1, 'Taking the server offline. The repository stays yours; the database is kept.');
+    }
+    if (inst.open_intent) {
       var a = inst.open_intent.action;
-      var doing = a === 'teardown' ? 'A teardown is queued' : a === 'domain-attach' ? 'Its new address is being wired' : 'A ' + esc(a) + ' run is queued';
-      return progressMarkup(2, 2, doing + ' — this card updates when it lands.');
+      if (a === 'teardown') return stripMarkup('teardown', 0, 0, 'A teardown is queued — this card updates when it starts.');
+      if (a === 'domain-attach') return stripMarkup('address', 1, 1, 'Setting up DNS and the secure connection' + (inst.domain ? ' for <strong>' + esc(inst.domain) + '</strong>' : '') + '.');
+      if (a === 'provision') return stripMarkup(s === 'torn_down' ? 'revive' : 'standup', 0, 0, (s === 'torn_down' ? 'A revive is queued' : 'A standup is queued') + ' — this card updates when it starts.');
+      return stripMarkup('standup', 2, 2, 'A ' + esc(a) + ' run is queued — this card updates when it lands.');
     }
     return '';
   }
 
+  /* ── snagged cards: plain sentence first, raw detail folded away, and the
+     retry truth — nothing silently "keeps retrying" (direction §5, F19) ── */
+
+  function errCategory(note) {
+    var n = String(note || '');
+    if (/repository not found/i.test(n)) return 'We couldn’t push the starter code to the repository — it wasn’t found on GitHub.';
+    if (/mkdir|no such file or directory|read-only file system/i.test(n)) return 'The server couldn’t prepare a workspace for the project.';
+    if (/(push|clone|github).*permission|permission.*(push|clone|repo)/i.test(n)) return 'We couldn’t reach the repository — the account that set it up doesn’t have permission.';
+    if (/permission denied/i.test(n)) return 'The server hit a permission wall while setting up.';
+    if (/clone/i.test(n)) return 'We couldn’t fetch the repository from GitHub.';
+    if (/econnrefused|healthz|timed? ?out/i.test(n)) return 'The server didn’t come up.';
+    if (/dns|domain|caddy|tls|certificate/i.test(n)) return 'The address didn’t wire up.';
+    return 'The standup stopped partway.';
+  }
+  function errMarkup(inst) {
+    var when = inst.updated_at ? ' on ' + esc(shortDate(inst.updated_at)) : '';
+    var html = errCategory(inst.error_note) +
+      ' We stopped trying' + when + ' — nothing more will happen until you try again.';
+    if (inst.error_note) {
+      html += '<details><summary>Technical details</summary><pre>' + esc(inst.error_note) + '</pre></details>';
+    }
+    return html;
+  }
+
   /* ── rendering ───────────────────────────────────────────────────────── */
 
-  function chipFor(inst) {
-    var c = CHIP[inst.status] || { cls: '', label: inst.status };
-    return '<span class="chip ' + c.cls + '">' + esc(c.label) + '</span>';
-  }
+  var SHAPE_LABEL = { standalone: 'its own server', 'co-tenant': 'shared server', dedicated: 'its own server' };
 
   function addressRow(inst) {
     if (inst.domain) {
       if (inst.status === 'active') {
-        return 'Address: <a href="https://' + esc(inst.domain) + '" target="_blank" rel="noopener">' + esc(inst.domain) + '</a>';
+        /* "answering" is a VERIFIED claim (direction §3 / F16): only the
+           heartbeat earns it — never the runner finishing its script */
+        var link = '<a href="https://' + esc(inst.domain) + '" target="_blank" rel="noopener">' + esc(inst.domain) + '</a>';
+        if (inst.last_verified_up) return 'Answering at ' + link;
+        if (inst.last_verified_up === false) return 'Not answering at ' + link + ' right now.';
+        return 'Its address is ' + link + ' — confirming it answers.';
       }
       return 'Address: <code>' + esc(inst.domain) + '</code> — it answers there once the instance is live.';
     }
     /* a torn-down instance has no address to speak of — the card's own line says so */
     if (inst.status === 'torn_down' || inst.status === 'tearing_down') return '';
     /* the HONEST no-address state: sign-in on the instance needs a real domain */
-    return '<span class="none">No address yet — sign-in on your instance only works once it has a domain.</span>';
+    return '<span class="none">No address yet</span> — sign-in on this project can’t be set up until it has one.';
   }
 
   function renderCard(inst) {
@@ -334,29 +335,37 @@ h1{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.4vw,32
     li.className = 'proj' + (gone ? ' gone' : '');
     var meta = [];
     if (inst.target_ref) meta.push('repo <code>' + esc(inst.target_ref) + '</code>');
-    if (inst.hosting_shape) meta.push(esc(inst.hosting_shape));
+    if (inst.hosting_shape) meta.push(esc(SHAPE_LABEL[inst.hosting_shape] || inst.hosting_shape));
     if (inst.onboard_mode === 'adopt') meta.push('adopted repo');
-    var html =
+    if (inst.status === 'active' && inst.torn_down_at) meta.push('back live since ' + esc(shortDate(inst.provisioned_at || inst.torn_down_at)));
+    var body =
       '<div class="projHead"><span class="projName">' + esc(inst.slug) + '</span>' + chipFor(inst) + '</div>' +
       (meta.length ? '<div class="projMeta">' + meta.join('<span aria-hidden="true">·</span>') + '</div>' : '');
     var addr = addressRow(inst);
-    if (addr) html += '<div class="addr">' + addr + '</div>';
+    if (addr) body += '<div class="addr">' + addr + '</div>';
     if (canAttachDomain(inst)) {
-      html += '<div class="attach">' +
+      body += '<div class="attach">' +
         '<input type="text" id="dom-' + iid + '" placeholder="myproject.example.com" autocomplete="off" spellcheck="false" maxlength="253">' +
-        '<button type="button" class="btn small" data-attach="' + iid + '">Attach address</button></div>';
+        '<button type="button" class="btn small" data-attach="' + iid + '">Give it an address</button></div>';
     }
-    html += progressFor(inst);
+    if (inst.status === 'error' && !inst.open_intent) {
+      /* once a retry is queued the strip tells the story — the stale error
+         paragraph would just contradict it (owner walk, 2026-08-12) */
+      body += '<div class="projMsg err">' + errMarkup(inst) + '</div>';
+    }
+    body += stripFor(inst);
     if (gone) {
-      html += '<div class="projMsg">Torn down' + (inst.torn_down_at ? ' ' + esc(new Date(inst.torn_down_at).toLocaleDateString()) : '') + '. Its handle stays yours — <a href="/create">start another</a> whenever you like.</div>';
+      body += '<div class="projMsg">Torn down' + (inst.torn_down_at ? ' ' + esc(shortDate(inst.torn_down_at)) : '') +
+        '. The repository is still yours, and its database is kept — bringing it back takes one click. Or <a href="/create">start another</a>.</div>';
     }
     var lm = lastMsg[inst.id];
-    html += '<div class="projMsg' + (lm && lm.cls ? ' ' + lm.cls : '') + '" id="msg-' + iid + '">' + (lm ? lm.text : '') + '</div>';
-    if (canTeardown(inst)) {
-      html += '<div class="actions" id="act-' + iid + '">' +
-        '<button type="button" class="btn small danger" data-teardown="' + iid + '">Tear it down</button></div>';
-    }
-    li.innerHTML = html;
+    body += '<div class="projMsg' + (lm && lm.cls ? ' ' + lm.cls : '') + '" id="msg-' + iid + '">' + (lm ? lm.text : '') + '</div>';
+    var acts = [];
+    if (canRetry(inst)) acts.push('<button type="button" class="btn small" data-retry="' + iid + '">Try again</button>');
+    if (canRevive(inst)) acts.push('<button type="button" class="btn small" data-revive="' + iid + '">Bring it back</button>');
+    if (canTeardown(inst)) acts.push('<button type="button" class="btn small danger" data-teardown="' + iid + '">Tear it down</button>');
+    if (acts.length) body += '<div class="actions" id="act-' + iid + '">' + acts.join('') + '</div>';
+    li.innerHTML = orbFor(inst) + '<div class="projBody">' + body + '</div>';
   }
 
   function render(instances) {
@@ -392,13 +401,25 @@ h1{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.4vw,32
   function stopWatch(id) { if (timers[id]) { clearTimeout(timers[id]); delete timers[id]; } }
   /* What the card RENDERS from — re-render only when this changes, so a quiet
      poll tick never clobbers in-flight UI (an open teardown confirm, a
-     half-typed domain, a fresh action message). */
+     half-typed domain, a fresh action message). The heartbeat overlay is part
+     of the signature: recency is bucketed per-minute so "checked 2m ago"
+     stays current without thrashing. */
   function sig(inst) {
+    var at = inst.last_verified_at ? new Date(inst.last_verified_at).getTime() : 0;
     return JSON.stringify([inst.status, inst.domain, inst.error_note,
-      inst.open_intent && inst.open_intent.action, inst.open_intent && inst.open_intent.state]);
+      inst.open_intent && inst.open_intent.action, inst.open_intent && inst.open_intent.state,
+      inst.last_verified_up, at ? Math.floor((Date.now() - at) / 60000) : -1]);
   }
   function takeUpdate(id, inst) {
-    var changed = !byId[id] || sig(byId[id]) !== sig(inst);
+    var prev = byId[id];
+    var changed = !prev || sig(prev) !== sig(inst);
+    /* an action message ("Queued again…") describes the moment it was sent —
+       once the lifecycle moves past it (status flip, intent consumed) it
+       becomes a stale claim; clear it (owner walk, 2026-08-12) */
+    if (prev && (prev.status !== inst.status ||
+        ((prev.open_intent && prev.open_intent.action) !== (inst.open_intent && inst.open_intent.action)))) {
+      lastMsg[id] = null;
+    }
     byId[id] = inst;
     if (changed) renderCard(inst);
   }
@@ -440,14 +461,36 @@ h1{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.4vw,32
       .catch(function () { if (byId[id] && shouldWatch(byId[id])) watch(id); });
   }
 
-  /* ── teardown: ask, confirm, then SAY exactly what the server said ────── */
+  /* ── settled-card refresh: the heartbeat overlay must reach the page.
+     A card at 'active' has no fast poll; once a minute (and on tab return)
+     the whole list re-reads, so "live · checked 2m ago" stays true and an
+     instance that died shows up as unreachable without a reload. ── */
+
+  function refreshList() {
+    fetch(API + '/provisioning/instances', { credentials: 'same-origin' })
+      .then(function (res) { if (!res.ok) throw new Error('soft'); return res.json(); })
+      .then(function (data) {
+        var instances = data.instances || [];
+        var known = Object.keys(byId).length;
+        var sameSet = instances.length === known && instances.every(function (i) { return byId[i.id]; });
+        if (!sameSet) { render(instances); return; }
+        instances.forEach(function (inst) { takeUpdate(inst.id, inst); });
+      })
+      .catch(function () { /* transient — next tick will try again */ });
+  }
+  setInterval(function () { if (!document.hidden && me) refreshList(); }, REFRESH_MS);
+  document.addEventListener('visibilitychange', function () { if (!document.hidden && me) refreshList(); });
+
+  /* ── teardown: ask, confirm (the truth, itemized — direction §5.4), then
+     SAY exactly what the server said ── */
 
   function askTeardown(id) {
     var act = $('act-' + id);
     if (!act) return;
-    act.innerHTML = '<div class="confirmRow"><span>Really tear it down? The server and database go away; the repo stays yours.</span>' +
+    act.innerHTML = '<div class="confirmRow">' +
+      '<span class="plain">Tear it down? The server goes away and the address stops answering. Your repository is untouched. The database is kept, so bringing it back later restores its memory.</span>' +
       '<button type="button" class="btn small danger" data-teardown-yes="' + esc(id) + '">Yes, tear it down</button>' +
-      '<button type="button" class="linklike" data-teardown-no="' + esc(id) + '">Keep it</button></div>';
+      '<button type="button" class="linklike" data-teardown-no="' + esc(id) + '">Keep it running</button></div>';
   }
   function unAskTeardown(id) { var inst = byId[id]; if (inst) renderCard(inst); }
   function doTeardown(id) {
@@ -486,6 +529,46 @@ h1{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.4vw,32
     });
   }
 
+  /* ── re-enqueue: Try again (snagged) and Bring it back (torn down) both
+     re-POST the slug — the server's PROVISION_ENQUEUE_FROM gate decides.
+     Same truth-telling as every other action: say what the server said. ── */
+
+  function reProvision(id, verb) {
+    var inst = byId[id];
+    if (!inst) return;
+    var act = $('act-' + id);
+    if (act) act.innerHTML = '<span class="projMsg">Asking…</span>';
+    var body = { slug: inst.slug, hosting_shape: inst.hosting_shape || 'standalone' };
+    if (inst.onboard_mode) body.onboard_mode = inst.onboard_mode;
+    if (inst.target_ref) body.target_ref = inst.target_ref;
+    if (inst.domain) body.domain = inst.domain;
+    fetch(API + '/provisioning/instances', {
+      method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    }).then(function (res) {
+      if (res.status === 401) { msg(id, signInAgain(), 'err'); return null; }
+      return jsonOrEmpty(res).then(function (data) {
+        if (res.ok) {
+          msg(id, esc(data.message || (verb === 'revive' ? 'Revive queued — bringing it back.' : 'Queued again — a runner picks it up from here.')), 'ok');
+          return;
+        }
+        var e = apiError(data, res.status);
+        if (e.code === 'intent_conflict') {
+          msg(id, esc(e.message || 'A previous run is still open — retry once it settles.'), 'err');
+        } else if (e.code === 'rate_limited') {
+          msg(id, esc(e.message || 'Too many requests right now — give it a minute and try again.'), 'err');
+        } else {
+          msg(id, esc(e.message || 'The request could not be queued — try again in a moment.'), 'err');
+        }
+      });
+    }).catch(function () {
+      msg(id, 'Couldn’t reach the platform — check your connection and try again.', 'err');
+    }).then(function () {
+      if (byId[id]) renderCard(byId[id]);
+      watchOnce(id);
+    });
+  }
+
   /* ── domain attach: same truth-telling for every refusal (task 1002692) ── */
 
   function doAttach(id) {
@@ -534,6 +617,8 @@ h1{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.4vw,32
     if (t.hasAttribute('data-teardown-yes')) return doTeardown(t.getAttribute('data-teardown-yes'));
     if (t.hasAttribute('data-teardown-no')) return unAskTeardown(t.getAttribute('data-teardown-no'));
     if (t.hasAttribute('data-attach')) return doAttach(t.getAttribute('data-attach'));
+    if (t.hasAttribute('data-retry')) return reProvision(t.getAttribute('data-retry'), 'retry');
+    if (t.hasAttribute('data-revive')) return reProvision(t.getAttribute('data-revive'), 'revive');
   });
 
   /* ── boot: who am I → my instances ────────────────────────────────────── */