atris 3.72.5 → 3.73.0

package/lib/gm-phone-page.js

@@ -13,8 +13,11 @@
 // then settles small at the top and the card fades up. Tap again and the
 // card dissolves, the lava melts back into the sphere, and the next bet plays.
 // Bets wait in a queue on the Mac, so a tap rarely waits; when it does, the
-// spiral follows the real progress. Once a card is up nothing moves. The decisions only the owner can make sit behind one
-// quiet link at the bottom.
+// spiral follows the real progress. Once a card is up nothing moves. The
+// footer is only the count of jobs the team is working on.
+//
+// Every card is big type in two parts: what is going on, and why it matters
+// to the business. Nothing about how work is run or checked reaches the page.
 
 function phonePage(nonce) {
   return `<!doctype html>
@@ -58,7 +61,7 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0;
   display: flex; flex-direction: column; align-items: center; justify-content: center;
 }
 .stage { position: relative; width: min(72vmin, 520px); aspect-ratio: 1 / 1; }
-.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; touch-action: manipulation; cursor: pointer; }
+.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; touch-action: none; cursor: pointer; }
 .stage canvas:focus-visible { outline-offset: -8%; }
 .line {
   min-height: 3em; margin: 4px 0 0; max-width: 22em; text-align: center;
@@ -68,11 +71,25 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0;
 .line.out { opacity: 0; }
 .line.bad { color: var(--text-2); }
 .foot { position: absolute; left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom)); text-align: center; }
-.quiet { color: var(--text-3); font-size: 15px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.25em; }
-.foot .quiet + .quiet { margin-left: 18px; }
-.jobs { margin: 12px auto 0; max-width: 24em; text-align: left; color: var(--text-2); font-size: 14px; line-height: 1.35; }
-.jobs p { margin: 0 0 8px; }
-.jobs .meta { display: block; color: var(--text-3); font-size: 13px; }
+.quiet { color: var(--text-2); font-size: 17px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.25em; min-height: 44px; }
+/* the team: one row per member, who, what, the status, and the time */
+.team { position: fixed; inset: 0; z-index: 20; overflow-y: auto; background: var(--bg); padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); }
+.team .inner { max-width: 34rem; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
+.team .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
+.team h1 { margin: 0; font-size: clamp(23px, 6.2vw, 30px); line-height: 1.12; font-weight: 700; letter-spacing: -0.03em; }
+.team .row { width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); }
+.team .who { font-size: 20px; font-weight: 700; }
+.team .st { font-size: 17px; color: var(--text-2); text-align: right; }
+.team .st.working { color: var(--text); }
+.team .st.waiting-for-your-yes { color: var(--amber); }
+.team .on { grid-column: 1 / -1; font-size: 18px; line-height: 1.35; }
+.team .time { grid-column: 1 / -1; font-size: 17px; color: var(--text-2); }
+.sayline { margin: 10px 0 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
+.sayline .thread, .sayline .reply { width: 100%; text-align: left; margin: 0; }
+.turn { margin: 0 0 6px; font-size: 18px; line-height: 1.4; }
+.turn.you { color: var(--text-2); }
+.turn.orb { color: var(--text); }
+.say { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 18px; line-height: 1.4; resize: none; }
 
 /* the lava orb, LavaOrb variant sm: three drifting blobs, transform and opacity only */
 .lava {
@@ -110,60 +127,37 @@ body.has-card .foot { position: static; margin-top: 28px; }
 .bet { width: 100%; opacity: 0; transform: translateY(20px); transition: opacity 0.45s ease-out, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
 .bet.up { opacity: 1; transform: none; }
 .bet.quick { transition-duration: 0.4s, 0.5s; }
+/* card to card: the old card lifts and fades, the box eases to the new
+   height, and the new card settles up from a small drift */
+.bet.turning { overflow: hidden; transition: opacity 0.22s ease-in, transform 0.22s ease-in, height 0.36s cubic-bezier(0.4, 0, 0.2, 1); }
+.bet.turning.settle { transition: opacity 0.36s ease-out, transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), height 0.36s cubic-bezier(0.4, 0, 0.2, 1); }
+.bet.turn-out { opacity: 0; transform: translateY(-10px); }
+.bet.turn-in { opacity: 0; transform: translateY(10px); transition: none; }
 /* leaving: a soft fade in place, never a cut */
 .bet.leave { opacity: 0; transform: none; transition: opacity 0.4s ease-out; }
 .bet h1 { margin: 0; font-size: clamp(23px, 6.2vw, 30px); line-height: 1.12; font-weight: 700; letter-spacing: -0.03em; text-align: left; }
-.why { margin: 12px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.4; }
-.when { margin: 12px 0 0; color: var(--text-3); font-size: 14px; line-height: 1.4; }
-.steps { margin: 12px 0 0; padding: 10px 0 0; list-style: none; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; counter-reset: step; }
-.steps li { position: relative; padding-left: 22px; counter-increment: step; color: var(--text-2); font-size: 14px; line-height: 1.35; }
-.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; color: var(--text-3); font-variant-numeric: tabular-nums; }
-.tag { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; font-size: 13px; color: var(--text-3); }
-.tag.you { color: var(--amber); }
-.tag svg { width: 11px; height: 11px; }
+.why { margin: 14px 0 0; color: var(--text); font-size: 20px; line-height: 1.4; }
 .act { margin: 18px 0 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
 .pill {
   min-width: 12rem; height: 44px; padding: 0 28px; border-radius: 22px;
   background: var(--amber); color: var(--amber-ink); font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
 }
 .pill.armed { background: var(--text); color: var(--bg); }
-.links { color: var(--text-3); font-size: 15px; }
+.links { color: var(--text-2); font-size: 17px; }
 .links button { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.25em; min-height: 44px; padding: 0 6px; }
-.mission { margin: 32px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); color: var(--text-2); text-align: center; }
+.links .pill { color: var(--amber-ink); text-decoration: none; padding: 0 28px; }
+.mission { margin: 32px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); color: var(--text); font-size: 20px; line-height: 1.4; text-align: center; }
+/* a choice: two or three ideas to tap, each a big title and one plain line of why */
+.options { margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
+.option { width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); color: var(--text); }
+.option .t { display: block; font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
+.option .w { display: block; margin-top: 4px; font-size: 17px; line-height: 1.3; color: var(--text-2); }
+/* a question card: the answers stack full width under the question */
+.act.answers { align-items: stretch; gap: 10px; }
+.act.answers .links { text-align: center; }
 
-/* ---- only you: the owner's decisions, same theme, opened from the bottom link ---- */
-.sheet {
-  position: fixed; inset: 0; z-index: 20; overflow-y: auto; background: var(--bg);
-  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
-}
-.sheet .inner { max-width: 34rem; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
-.sheet .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
-.sheet .head h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
-.strip { color: var(--text-2); font-size: 16px; }
-.bar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 10px; }
-.bar > div { height: 100%; background: var(--amber); width: 0; }
-.card { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 14px; }
-.count { color: var(--text-3); font-size: 13px; }
-.say { font-size: 20px; line-height: 1.4; margin: 0; }
-.choice { width: 100%; min-height: 52px; text-align: left; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); color: var(--text); }
-.choice .effect { display: block; font-size: 14px; color: var(--text-3); }
-.choice.main { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); font-weight: 600; }
-.choice.main .effect { color: var(--amber-ink); opacity: 0.75; font-weight: 400; }
-.choice.armed { background: var(--text); color: var(--bg); border-color: var(--text); }
-.choice.armed .effect { color: var(--bg); opacity: 0.75; }
-.choice.later { border: 0; min-height: 44px; text-align: center; color: var(--text-3); }
-.job { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
-.job .meta { color: var(--text-3); font-size: 14px; }
-.row { display: flex; gap: 10px; }
-.row .choice { text-align: center; }
-.reply { color: var(--text-2); font-size: 16px; }
-.live { color: var(--text-3); font-size: 14px; }
-.toast {
-  position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 30;
-  background: var(--text); color: var(--bg); border-radius: 14px; padding: 10px 16px;
-  display: flex; align-items: center; justify-content: space-between; gap: 12px;
-}
-.toast button { min-height: 44px; padding: 0 12px; color: var(--bg); text-decoration: underline; }
+/* an answer to a question card */
+.choice { width: 100%; min-height: 52px; text-align: left; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); color: var(--text); font-size: 19px; }
 
 @media (prefers-reduced-motion: reduce) {
   .lava .tx, .lava .ty, .lava .blob { animation: none !important; }
@@ -175,37 +169,23 @@ body.has-card .foot { position: static; margin-top: 28px; }
 <body>
 <main class="screen" id="screen">
   <div class="stage" id="stage">
-    <canvas id="orb" tabindex="0" role="button" aria-label="the atris orb. tap to think of one new bet for the business"></canvas>
+    <canvas id="orb" tabindex="0" role="button" aria-label="the atris orb. tap to think of one new idea for the business"></canvas>
   </div>
   <p class="line" id="line" aria-live="polite">tap to think</p>
   <article class="bet" id="bet" hidden></article>
-  <div class="foot" id="foot"><button type="button" class="quiet" id="open-only" hidden></button><button type="button" class="quiet" id="working" hidden aria-expanded="false"></button><div class="jobs" id="jobs" hidden></div></div>
+  <div class="foot" id="foot"><button type="button" class="quiet" id="working" aria-haspopup="dialog">the team</button></div>
 </main>
-<div class="lava" id="lava" role="button" tabindex="-1" aria-label="the atris orb. tap for the next bet">
+<div class="lava" id="lava" role="button" tabindex="-1" aria-label="the atris orb. tap for the next idea">
   <div class="tx" style-vars="15%,8.4s,-2.1s"><div class="ty" style-vars="12%,10.1s,-5.1s"><div class="blob b1" spin-vars="36s,0deg"></div></div></div>
   <div class="tx" style-vars="18%,12.6s,-7.2s"><div class="ty" style-vars="15%,7.2s,-4.7s"><div class="blob b2 rev" spin-vars="48s,45deg"></div></div></div>
   <div class="tx" style-vars="12%,7.2s,-6.4s"><div class="ty" style-vars="18%,10.1s,-9.9s"><div class="blob b3" spin-vars="57.6s,90deg"></div></div></div>
   <div class="core" id="lava-core"></div>
   <div class="dim" id="lava-dim"></div>
 </div>
-<section class="sheet" id="sheet" hidden aria-label="only you">
-  <div class="inner">
-    <div class="head"><h2>only you</h2><button type="button" class="quiet" id="close-only">done</button></div>
-    <div><div class="strip" id="target">loading</div><div class="bar"><div id="bar"></div></div></div>
-    <div id="main"></div>
-    <div id="reply" class="reply" hidden></div>
-    <div class="live" id="live"></div>
-  </div>
-</section>
-<div class="toast" id="toast" hidden><span id="toast-text"></span><button id="toast-undo" type="button">undo</button></div>
+<section class="team" id="team" hidden role="dialog" aria-label="the team"><div class="inner" id="team-inner"></div></section>
 <script nonce="${nonce}">
 (function () {
   var token = new URLSearchParams(location.search).get('t') || '';
-  var last = null;
-  var view = 'card';
-  var armed = null;
-  var pendingReply = null;
-  var undoTimer = null;
   var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
   function el(tag, cls, text) {
@@ -261,6 +241,10 @@ body.has-card .foot { position: static; margin-top: 28px; }
     var dim = document.getElementById('lava-dim');
     var ctx = canvas.getContext('2d');
     var SPRING = 0.07, DAMP = 0.8;
+    // StippleOrb's pointer: dots within RADIUS of it are pushed out by PUSH
+    // and spring home; a ripple runs out at WAVE_SPEED from where it came in
+    var RADIUS = 90, PUSH = 14;
+    var WAVE_SPEED = 620, WAVE_WIDTH = 70, WAVE_LIFE = 1.6;
     var GROW_MS = 1050, MAX_SCALE = 3.2;
     var SETTLE_MS = 900;
     // a tap on a card: the card fades for LEAVE_MS while the small orb glides
@@ -289,8 +273,11 @@ body.has-card .foot { position: static; margin-top: 28px; }
     var raf = 0, lastT = 0;
     var onBorn = null;
     var base = 280, origin = { x: 0, y: 0 };
-    var light = { x: -0.5, y: -0.6 };
+    // the light eases toward the pointer; at rest it comes from the upper left
+    var light = { x: -0.5, y: -0.6, tx: -0.5, ty: -0.6 };
     var lz = Math.sqrt(1 - light.x * light.x - light.y * light.y);
+    var pointer = { x: -9999, y: -9999, inside: false };
+    var wave = { x: 0, y: 0, age: 99 };
     var ease = function (t) { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; };
     var smooth = function (a, b, v) { var t = Math.min(1, Math.max(0, (v - a) / (b - a))); return t * t * (3 - 2 * t); };
 
@@ -343,6 +330,14 @@ body.has-card .foot { position: static; margin-top: 28px; }
       lastT = now;
       ctx.clearRect(0, 0, w, h);
       if (!reduced && mode === 'idle') angle += dt * 0.15;
+      wave.age += dt;
+      light.x += (light.tx - light.x) * 0.06;
+      light.y += (light.ty - light.y) * 0.06;
+      lz = Math.sqrt(Math.max(0, 1 - light.x * light.x - light.y * light.y));
+      var r2 = RADIUS * RADIUS;
+      var waveFront = wave.age * WAVE_SPEED;
+      var waveOn = mode === 'idle' && wave.age < WAVE_LIFE && !reduced;
+      var waveGain = waveOn ? 1 - wave.age / WAVE_LIFE : 0;
       if (mode === 'pull') {
         // ready: the age runs on the clock, as on the homepage. Waiting: it
         // follows the real progress and stops short of the point.
@@ -356,8 +351,29 @@ body.has-card .foot { position: static; margin-top: 28px; }
         var rx = d.x * cosA + d.z * sinA;
         var rz = -d.x * sinA + d.z * cosA;
         if (mode === 'idle') {
-          d.vx += (cx + rx * R - d.sx) * SPRING;
-          d.vy += (cy + d.y * R - d.sy) * SPRING;
+          var homeX = cx + rx * R, homeY = cy + d.y * R;
+          if (waveOn) {
+            var wx = homeX - wave.x, wy = homeY - wave.y;
+            var wd = Math.sqrt(wx * wx + wy * wy) || 1;
+            var off = (wd - waveFront) / WAVE_WIDTH;
+            if (off > -1 && off < 1) {
+              var bump = Math.cos(off * Math.PI * 0.5) * 22 * waveGain;
+              homeX += (wx / wd) * bump;
+              homeY += (wy / wd) * bump;
+            }
+          }
+          if (pointer.inside && !reduced) {
+            var dx = d.sx - pointer.x, dy = d.sy - pointer.y;
+            var dist2 = dx * dx + dy * dy;
+            if (dist2 < r2 && dist2 > 0.01) {
+              var dist = Math.sqrt(dist2);
+              var f = (1 - dist / RADIUS) * PUSH;
+              d.vx += (dx / dist) * f * 0.2;
+              d.vy += (dy / dist) * f * 0.2;
+            }
+          }
+          d.vx += (homeX - d.sx) * SPRING;
+          d.vy += (homeY - d.sy) * SPRING;
           d.vx *= DAMP; d.vy *= DAMP;
           d.sx += d.vx; d.sy += d.vy;
           if (reduced) { d.sx = cx + rx * R; d.sy = cy + d.y * R; }
@@ -512,6 +528,7 @@ body.has-card .foot { position: static; margin-top: 28px; }
         lava.style.visibility = 'hidden';
         lava.style.opacity = '0';
         for (var i = 0; i < dots.length; i++) { dots[i].sx = cx; dots[i].sy = cy; dots[i].vx = 0; dots[i].vy = 0; }
+        pointer.inside = false;
         age = -1; timed = false; fired = false;
         mode = 'idle';
         bridgeAt = reduced ? 0 : performance.now();
@@ -543,6 +560,36 @@ body.has-card .foot { position: static; margin-top: 28px; }
     seed();
     start();
 
+    // StippleOrb's pointer, ported with trackWindow on, as LetterOrb uses it.
+    // Over the sphere the dots part around the pointer and spring back; the
+    // light follows the pointer anywhere on the page; a ripple runs out from
+    // where the pointer comes in. When it leaves, the dots settle home. On a
+    // phone a press and drag pushes the dots, and a tap still thinks. Only
+    // the idle sphere answers, and never under reduced motion.
+    function local(e) {
+      var r = canvas.getBoundingClientRect();
+      return { x: e.clientX - r.left, y: e.clientY - r.top };
+    }
+    canvas.addEventListener('pointermove', function (e) {
+      var p = local(e);
+      pointer.x = p.x; pointer.y = p.y; pointer.inside = true;
+    });
+    canvas.addEventListener('pointerenter', function (e) {
+      if (reduced || mode !== 'idle') return;
+      var p = local(e);
+      wave.x = p.x; wave.y = p.y; wave.age = 0;
+    });
+    canvas.addEventListener('pointerleave', function () { pointer.inside = false; });
+    canvas.addEventListener('pointercancel', function () { pointer.inside = false; });
+    function lightFrom(e) {
+      var r = canvas.getBoundingClientRect();
+      if (!r.width) return;
+      var reach = Math.max(280, window.innerWidth * 0.4);
+      light.tx = Math.max(-0.9, Math.min(0.9, (e.clientX - (r.left + r.width / 2)) / reach));
+      light.ty = Math.max(-0.9, Math.min(0.9, (e.clientY - (r.top + r.height / 2)) / reach));
+    }
+    window.addEventListener('pointermove', lightFrom);
+
     return {
       // the bet is ready: the homepage tap, on the clock
       play: function (cb, fast) {
@@ -583,74 +630,15 @@ body.has-card .foot { position: static; margin-top: 28px; }
 
   function buzz() { if (navigator.vibrate) { try { navigator.vibrate(10); } catch (e) { /* not on this device */ } } }
 
-  function lockIcon() {
-    var ns = 'http://www.w3.org/2000/svg';
-    var svg = document.createElementNS(ns, 'svg');
-    svg.setAttribute('viewBox', '0 0 12 12');
-    svg.setAttribute('aria-hidden', 'true');
-    var body = document.createElementNS(ns, 'rect');
-    body.setAttribute('x', '2'); body.setAttribute('y', '5.5'); body.setAttribute('width', '8'); body.setAttribute('height', '5.5'); body.setAttribute('rx', '1');
-    body.setAttribute('fill', 'currentColor');
-    var hoop = document.createElementNS(ns, 'path');
-    hoop.setAttribute('d', 'M4 5.5V4a2 2 0 0 1 4 0v1.5');
-    hoop.setAttribute('fill', 'none'); hoop.setAttribute('stroke', 'currentColor'); hoop.setAttribute('stroke-width', '1.3');
-    svg.appendChild(hoop); svg.appendChild(body);
-    return svg;
-  }
-
-  // real progress from the server's events: each source read, then the
-  // words the model has written as it works
-  function progressOf(events) {
-    var p = 0;
-    events.forEach(function (e) {
-      if (e.kind === 'source' || e.kind === 'skip') p = Math.max(p, Math.min(0.4, p + 0.4 / 6));
-      else if (e.kind === 'model') p = Math.max(p, 0.45);
-      else if (e.kind === 'thinking') p = Math.max(p, 0.5 + 0.45 * (1 - Math.exp(-(Number(e.n) || 0) / 250)));
-      else if (e.kind === 'skeptic') p = Math.max(p, 0.9);
-      else if (e.kind === 'done') p = 1;
-    });
-    return p;
-  }
-
-  var SOURCE_WORDS = {
-    now: 'reading your notes',
-    briefs: 'reading the latest research',
-    season: 'reading the target for this week',
-    ledger: 'reading how past bets did',
-    team: 'reading who is on the team'
-  };
-
-  // the newest event, in plain words for the one line under the orb
-  function sayEvent(e) {
-    if (!e) return 'thinking of the next bet';
-    if (e.kind === 'source') {
-      // business numbers show as they are; the team's plumbing (the review
-      // queue, waiting jobs, merges, releases) never reaches this line
-      if (e.key === 'installs' || e.key === 'installs_best') return e.line;
-      return SOURCE_WORDS[e.key] || 'reading what is true right now';
-    }
-    if (e.kind === 'skip') return 'reading what is true right now';
-    if (e.kind === 'model') return e.line.indexOf('again') >= 0 ? 'asking again, sharper' : 'thinking of one new bet';
-    if (e.kind === 'thinking') return e.line;
-    if (e.kind === 'skeptic') return 'a second look: does it make sense';
-    if (e.kind === 'score') return 'checking how past bets did';
-    if (e.kind === 'reject') return 'the first idea did not hold up, asking again';
-    if (e.kind === 'done' || e.kind === 'check') return 'got one';
-    return e.line;
-  }
-
-  function failLine(error) {
-    var e = String(error || '');
-    if (/longer than/.test(e)) return 'the thinking took too long. tap to try again';
-    if (/could not start|exited with code|empty answer|the model said/.test(e)) return 'could not reach the thinking model. tap to try again';
-    return 'couldn\\'t land on a good bet. tap to try again';
-  }
-
-  // after a yes, a nice, or a send back, the next card comes the way a re-tap brings it
+  // after a yes or a nice, the next card comes the way a re-tap brings it
   function moveOn(ack) {
     var box = document.getElementById('bet');
+    box.style.minHeight = box.offsetHeight + 'px';
     var act = box.querySelector('.act');
+    var line = box.querySelector('.sayline');
+    if (line) line.remove();
     if (act) act.replaceWith(el('p', 'mission', ack));
+    else box.appendChild(el('p', 'mission', ack));
     setTimeout(function () { tapOrb(false); }, AFTER_MS);
   }
 
@@ -673,85 +661,270 @@ body.has-card .foot { position: static; margin-top: 28px; }
     return s && !/[.!?]$/.test(s) ? s + '.' : s;
   }
 
-  var MONTHS = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
-  // "we'll know by nov 1. about 30 hours of agent time, $0."
-  function whenLine(b) {
-    var m = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(String(b.check_date || ''));
-    var day = m ? MONTHS[Number(m[2]) - 1] + ' ' + Number(m[3]) : b.check_date;
-    return [day ? "we'll know by " + day : '', b.cost].filter(Boolean).map(sentence).join(' ');
-  }
-
+  // a yes the owner owes, or a finished business move: what is going on,
+  // then why it matters, both written by the server
   function drawJobCard(s) {
     var box = document.getElementById('bet');
     box.textContent = '';
     var j = s.job;
+    box.appendChild(el('h1', null, j.what));
+    box.appendChild(el('p', 'why', j.why));
     var act = el('div', 'act');
     if (s.kind === 'yes') {
-      box.appendChild(el('h1', null, j.ask));
-      box.appendChild(el('p', 'why', sentence(j.owner + ' is working on ' + j.title) + ' this step waits for your yes.'));
-      // the yes covers exactly this command, so the owner sees it
-      if (j.command) box.appendChild(el('p', 'when', 'your yes lets this run once: ' + j.command));
       var yes = el('button', 'pill', 'yes');
       yes.type = 'button';
-      yes.setAttribute('aria-label', 'yes. tells ' + j.owner + ' to go ahead');
       armedTap(yes, 'yes', 'tap again to say yes', function () {
         api('/bet/yes', { confirm: true }).then(function (r) { moveOn(r.ack || r.message || 'sent'); });
       });
       act.appendChild(yes);
       act.appendChild(el('div', 'links', 'or tap the orb for the next one'));
-      box.appendChild(act);
-      return;
+    } else if (s.kind === 'wait') {
+      act.appendChild(el('div', 'links', 'or tap the orb for the next one'));
+    } else {
+      var ok = el('button', 'pill', 'nice');
+      ok.type = 'button';
+      ok.addEventListener('click', function () {
+        buzz();
+        api('/bet/nice', {}).then(function (r) { moveOn(r.ack || 'nice.'); });
+      });
+      act.appendChild(ok);
     }
-    box.appendChild(el('h1', null, j.title));
-    var head = j.failed ? (j.halted ? 'this stopped before it was done.' : 'this did not pass.') : 'this is done.';
-    box.appendChild(el('p', 'why', [head].concat(j.lines.map(sentence)).join(' ')));
-    box.appendChild(el('p', 'when', [j.check, j.review, j.proof].map(sentence).join(' ')));
-    var ok = el('button', 'pill', 'nice');
-    ok.type = 'button';
-    ok.addEventListener('click', function () {
-      buzz();
-      api('/bet/nice', {}).then(function (r) { moveOn(r.ack || 'nice.'); });
+    box.appendChild(act);
+    box.appendChild(sayBox());
+  }
+
+  // no bet was ready: one question, then what is going on and why the answer matters
+  function drawQuestionCard(s) {
+    var box = document.getElementById('bet');
+    box.textContent = '';
+    var q = s.question;
+    box.appendChild(el('h1', null, q.ask));
+    if (q.line) box.appendChild(el('p', 'why', q.line));
+    var act = el('div', 'act answers');
+    q.choices.forEach(function (c) {
+      var b = el('button', 'choice', c.label);
+      b.type = 'button';
+      b.addEventListener('click', function () {
+        buzz();
+        if (c.other) { ownAnswer(act, c); return; }
+        act.querySelectorAll('button').forEach(function (x) { x.disabled = true; });
+        api('/bet/answer', { choice: c.id }).then(function (r) {
+          if (r.ok) { moveOn(r.ack); return; }
+          act.replaceWith(el('p', 'mission', r.message || 'that did not go through'));
+        });
+      });
+      act.appendChild(b);
     });
-    act.appendChild(ok);
-    if (j.failed) {
-      var links = el('div', 'links');
-      var back = el('button', null, 'send back');
-      back.type = 'button';
-      armedTap(back, 'send back', 'tap again to send it back', function () {
-        api('/bet/sendback', { confirm: true }).then(function (r) { moveOn(r.ack || r.message || 'sent back'); });
+    act.appendChild(el('div', 'links', 'or tap the orb for the next one'));
+    box.appendChild(act);
+    box.appendChild(sayBox());
+  }
+
+  // "something else": the owner's own words, one box and one tap to save
+  function ownAnswer(act, c) {
+    var input = el('input', 'say');
+    input.type = 'text';
+    input.maxLength = 60;
+    input.setAttribute('aria-label', c.label);
+    var save = el('button', 'pill', 'save');
+    save.type = 'button';
+    var go = function () {
+      var text = input.value.trim();
+      if (!text) return;
+      save.disabled = true;
+      api('/bet/answer', { choice: 'other', text: text }).then(function (r) {
+        if (r.ok) { moveOn(r.ack); return; }
+        save.disabled = false;
+        input.value = '';
+        input.placeholder = r.message || 'that did not go through';
       });
-      links.appendChild(back);
-      act.appendChild(links);
-    }
+    };
+    save.addEventListener('click', go);
+    input.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); go(); } });
+    act.textContent = '';
+    act.appendChild(input);
+    act.appendChild(save);
+    input.focus();
+  }
+
+  // the owner's own number, once a week: one box and one tap to save
+  function drawReportCard(s) {
+    var box = document.getElementById('bet');
+    box.textContent = '';
+    box.appendChild(el('h1', null, s.report.what));
+    box.appendChild(el('p', 'why', s.report.why));
+    var act = el('div', 'act answers');
+    var input = el('input', 'say');
+    input.type = 'number';
+    input.inputMode = 'decimal';
+    input.setAttribute('aria-label', s.report.what);
+    var save = el('button', 'pill', 'save');
+    save.type = 'button';
+    var go = function () {
+      if (!String(input.value).trim()) return;
+      save.disabled = true;
+      api('/bet/report', { value: input.value }).then(function (r) {
+        if (r.ok) { moveOn(r.ack); return; }
+        save.disabled = false;
+        input.value = '';
+        input.placeholder = r.message || 'that did not go through';
+      });
+    };
+    save.addEventListener('click', go);
+    input.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); go(); } });
+    act.appendChild(input);
+    act.appendChild(save);
+    act.appendChild(el('div', 'links', 'or tap the orb for the next one'));
     box.appendChild(act);
   }
 
+  // A conversation in one box. While the words are read the reply spot shows
+  // a quiet ellipsis; a question back is answered in place, with the turns so
+  // far above it and up to three suggested replies to tap. Starting a member
+  // who is not running takes a second tap, or it is kept as a note.
+  // post(body) sends it; done(ack) runs when something real came of it.
+  function convo(post, done, placeholder) {
+    var wrap = el('div', 'links sayline');
+    var thread = el('div', 'thread');
+    var reply = el('p', 'why reply');
+    reply.hidden = true;
+    var input = el('input', 'say');
+    input.type = 'text';
+    input.maxLength = 280;
+    input.setAttribute('aria-label', placeholder);
+    input.placeholder = placeholder;
+    var send = el('button', 'pill', 'send');
+    send.type = 'button';
+    var extra = el('div', 'links');
+    var pending = null;
+    // an armed second tap belongs to the words it was asked about: any edit clears it
+    function disarm() {
+      pending = null;
+      send.textContent = 'send';
+      send.className = 'pill';
+      extra.textContent = '';
+      reply.textContent = '';
+      reply.hidden = true;
+    }
+    function drawThread(turns) {
+      thread.textContent = '';
+      turns.forEach(function (t) { thread.appendChild(el('p', 'turn ' + (t.who === 'owner' ? 'you' : 'orb'), t.text)); });
+    }
+    function go(more, said) {
+      var text = said || input.value.trim();
+      if (!text) return;
+      send.disabled = true;
+      reply.hidden = false;
+      reply.textContent = '\u2026';
+      extra.textContent = '';
+      var body = { text: text };
+      if (more) Object.keys(more).forEach(function (k) { body[k] = more[k]; });
+      post(body).then(function (r) {
+        if (r.ok && !r.stay) { done(r.ack); return; }
+        send.disabled = false;
+        if (r.stay) { reply.textContent = r.reply;
+          input.value = '';
+          drawThread(r.thread.slice(0, -1));
+          (r.suggestions || []).forEach(function (sug) {
+            var b = el('button', 'quiet', sug);
+            b.type = 'button';
+            b.addEventListener('click', function () { buzz(); go(null, sug); });
+            extra.appendChild(b);
+          });
+          return;
+        }
+        if (r.reason === 'needs_confirm') {
+          pending = text;
+          reply.textContent = r.message;
+          send.textContent = 'tap again';
+          send.className = 'pill armed';
+          var keep = el('button', 'quiet', 'keep it as a note instead');
+          keep.type = 'button';
+          keep.addEventListener('click', function () { disarm(); go({ note: true }); });
+          extra.appendChild(keep);
+          return;
+        }
+        reply.textContent = r.message || 'that did not go through';
+      });
+    }
+    send.addEventListener('click', function () {
+      buzz();
+      if (pending) { disarm(); go({ confirm: true }); return; }
+      go();
+    });
+    input.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); send.click(); } });
+    input.addEventListener('input', function () { if (pending) disarm(); });
+    wrap.appendChild(thread);
+    wrap.appendChild(reply);
+    wrap.appendChild(input);
+    wrap.appendChild(send);
+    wrap.appendChild(extra);
+    return wrap;
+  }
+
+  // a quiet line under every card: tap it for one box. on a question it is the
+  // answer, on an idea a note to rework it, on a yes or a finished job a word
+  // to that member; the server reads it first, and a question back is answered
+  function sayBox() {
+    var wrap = el('div', 'links sayline');
+    var open = el('button', 'quiet', 'or say something');
+    open.type = 'button';
+    open.addEventListener('click', function () {
+      var box = sayConvo();
+      wrap.replaceWith(box);
+      box.querySelector('input').focus();
+    });
+    wrap.appendChild(open);
+    return wrap;
+  }
+
+  function sayConvo() {
+    return convo(function (body) { return api('/bet/say', body); }, moveOn, 'say something');
+  }
+
+  // two or three ideas side by side: one tap picks one and opens its full card
+  function drawChoiceCard(s) {
+    var box = document.getElementById('bet');
+    box.textContent = '';
+    box.appendChild(el('h1', null, 'which one next?'));
+    var list = el('div', 'options');
+    s.choice.options.forEach(function (o) {
+      var b = el('button', 'option');
+      b.type = 'button';
+      b.appendChild(el('span', 't', o.title));
+      b.appendChild(el('span', 'w', o.why));
+      b.addEventListener('click', function () {
+        buzz();
+        list.querySelectorAll('button').forEach(function (x) { x.disabled = true; });
+        api('/bet/pick', { id: o.id }).then(function (r) {
+          if (r.http === 200 && r.bet) { bet.busy = true; turn(r); return; }
+          tapOrb(false);
+        });
+      });
+      list.appendChild(b);
+    });
+    box.appendChild(list);
+    box.appendChild(el('div', 'links', 'or tap the orb for the next one'));
+    box.appendChild(sayBox());
+  }
+
   function drawBetCard(s) {
+    if (s.kind === 'report') { drawReportCard(s); return; }
+    if (s.kind === 'choice') { drawChoiceCard(s); return; }
+    if (s.kind === 'question') { drawQuestionCard(s); return; }
     if (s.kind && s.kind !== 'bet') { drawJobCard(s); return; }
     var box = document.getElementById('bet');
     box.textContent = '';
     var b = s.bet;
     box.appendChild(el('h1', null, b.title));
-    // what is going on and what we expect, as sentences with the numbers inside
+    // why it matters: what is going on and what we expect, in the same big type
     box.appendChild(el('p', 'why', [b.why_now, b.expect].map(sentence).join(' ')));
-    var ol = el('ol', 'steps');
-    b.steps.forEach(function (st) {
-      var li = el('li');
-      var tag = el('span', 'tag ' + (st.who === 'you' ? 'you' : 'team'));
-      if (st.who === 'you') tag.appendChild(lockIcon());
-      tag.appendChild(document.createTextNode(st.who === 'you' ? 'your yes' : (st.member || 'team')));
-      li.appendChild(tag);
-      li.appendChild(document.createTextNode(st.text));
-      ol.appendChild(li);
-    });
-    box.appendChild(ol);
-    box.appendChild(el('p', 'when', whenLine(b)));
     if (s.mission) { box.appendChild(el('p', 'mission', s.mission.line)); return; }
-    if (s.status === 'starting') { box.appendChild(el('p', 'mission', 'starting the mission')); return; }
+    if (s.status === 'starting') { box.appendChild(el('p', 'mission', 'starting now')); return; }
     var act = el('div', 'act');
     var go = el('button', 'pill' + (bet.armed ? ' armed' : ''), bet.armed ? 'tap again to start' : 'do it');
     go.type = 'button';
-    go.setAttribute('aria-label', bet.armed ? 'tap again to start the team on this bet' : 'do it. starts the team on the steps; your yes steps wait for you');
+    go.setAttribute('aria-label', bet.armed ? 'tap again to start the team on this idea' : 'do it. starts the team on the steps; your yes steps wait for you');
     go.addEventListener('click', function () {
       buzz();
       if (!bet.armed) {
@@ -784,6 +957,7 @@ body.has-card .foot { position: static; margin-top: 28px; }
     links.appendChild(skip);
     act.appendChild(links);
     box.appendChild(act);
+    box.appendChild(sayBox());
   }
 
   // the time from the tap to the card fully on screen, kept on the page so
@@ -833,6 +1007,7 @@ body.has-card .foot { position: static; margin-top: 28px; }
     box.classList.remove('quick', 'up');
     box.classList.add('leave');
     var swap = function () {
+      box.style.minHeight = '';
       box.hidden = true;
       box.classList.remove('leave');
       document.body.classList.remove('has-card');
@@ -842,34 +1017,61 @@ body.has-card .foot { position: static; margin-top: 28px; }
     orb.melt(then, to, swap);
   }
 
-  // what the page does with the server's answer once the sphere is ready
-  // fast: the bet was waiting in the queue; otherwise it was just made
+  // what the page does with the server's answer once the sphere is ready.
+  // Every tap comes back with a card, so the orb plays straight into it.
   function reveal(s, fast) {
     bet.status = s.status;
-    if ((s.bet || s.job) && (s.status === 'ready' || s.status === 'started' || s.status === 'starting')) {
+    if ((s.bet || s.job || s.question || s.choice || s.report) && (s.status === 'ready' || s.status === 'started' || s.status === 'starting')) {
       line.set('', false);
       orb.play(function (phase) { if (phase === 'settled') { bet.busy = false; showCard(s, true, fast); } }, fast);
       return;
     }
-    if (s.status === 'thinking') {
-      orb.wait();
-      orb.progress(progressOf(s.events));
-      line.set(sayEvent(s.events[s.events.length - 1]), false);
-      poll();
-      return;
-    }
-    if (s.status === 'failed') {
-      bet.busy = false;
-      orb.relax();
-      line.set(failLine(s.error), true);
-      return;
-    }
     bet.busy = false;
+    orb.relax();
     line.set('tap to think', false);
   }
 
-  // one tap: buzz at once, ask the server for the next bet, and play the
-  // choreography; a card on screen dissolves first
+  function isCard(s) {
+    return Boolean((s.bet || s.job || s.question || s.choice || s.report) && (s.status === 'ready' || s.status === 'started' || s.status === 'starting'));
+  }
+
+  // Card to card: one calm turn in place. The small orb stays where it is.
+  // The box holds its height while the old card lifts and fades for
+  // TURN_OUT_MS, then the new card settles up from DRIFT below over
+  // TURN_IN_MS while the box eases to its new height. No layout jump.
+  var TURN_OUT_MS = 220, TURN_IN_MS = 360, DRIFT = 10;
+  function turn(s) {
+    var box = document.getElementById('bet');
+    if (reduced) { box.style.minHeight = ''; bet.last = s; bet.drawn = s.id; drawBetCard(s); bet.busy = false; measured(); return; }
+    var from = box.offsetHeight;
+    box.style.height = from + 'px';
+    box.style.minHeight = '';
+    box.classList.remove('quick', 'settle');
+    box.classList.add('turning', 'turn-out');
+    setTimeout(function () {
+      bet.last = s;
+      bet.drawn = s.id;
+      drawBetCard(s);
+      box.style.height = 'auto';
+      var to = box.offsetHeight;
+      box.style.height = from + 'px';
+      box.classList.remove('turning', 'turn-out');
+      box.classList.add('turn-in');
+      void box.offsetHeight;
+      box.classList.add('turning', 'settle');
+      box.classList.remove('turn-in');
+      box.style.height = to + 'px';
+      setTimeout(function () {
+        box.classList.remove('turning', 'settle');
+        box.style.height = '';
+        bet.busy = false;
+        measured();
+      }, TURN_IN_MS + 20);
+    }, TURN_OUT_MS);
+  }
+
+  // one tap: buzz at once and ask the server for the next card. From the
+  // sphere the orb plays into it; with a card up it is one calm turn.
   function tapOrb(sharper) {
     if (bet.busy) return;
     buzz();
@@ -877,14 +1079,12 @@ body.has-card .foot { position: static; margin-top: 28px; }
     bet.armed = false;
     bet.tapAt = performance.now();
     document.body.removeAttribute('data-reveal-ms');
-    var answer = api('/bet/think', { sharper: Boolean(sharper) });
-    var ready = new Promise(function (resolve) {
-      if (document.body.classList.contains('has-card')) dissolve(resolve);
-      else resolve();
-    });
-    Promise.all([answer, ready]).then(function (both) {
-      var s = both[0];
+    var onCard = document.body.classList.contains('has-card');
+    api('/bet/think', { sharper: Boolean(sharper) }).then(function (s) {
       if (s.http !== 200) { bet.busy = false; orb.relax(); line.set('that did not go through. tap to try again', true); return; }
+      bet.status = s.status;
+      if (onCard && isCard(s)) { turn(s); return; }
+      if (onCard) { dissolve(function () { reveal(s, true); }); return; }
       reveal(s, true);
     });
   }
@@ -892,16 +1092,8 @@ body.has-card .foot { position: static; margin-top: 28px; }
   function loadBet() {
     return api('/bet').then(function (s) {
       if (s.http !== 200) return;
-      var was = bet.status;
       bet.status = s.status;
-      if (s.status === 'thinking') {
-        orb.progress(progressOf(s.events));
-        line.set(sayEvent(s.events[s.events.length - 1]), false);
-        poll();
-        return;
-      }
-      if (was === 'thinking') { reveal(s); return; }
-      if ((s.bet || s.job) && bet.drawn === s.id) { bet.last = s; drawBetCard(s); if (s.status === 'starting') poll(); }
+      if ((s.bet || s.job || s.question || s.choice || s.report) && bet.drawn === s.id) { bet.last = s; drawBetCard(s); if (s.status === 'starting') poll(); }
     });
   }
 
@@ -911,19 +1103,16 @@ body.has-card .foot { position: static; margin-top: 28px; }
     setTimeout(function () { bet.polling = false; loadBet(); }, 400);
   }
 
-  // first look: a bet already on screen shows settled, a bet being made
-  // shows its progress, anything else is the sphere
+  // first look: a card already on screen shows settled, anything else is the sphere
   function firstLook() {
     api('/bet').then(function (s) {
       if (s.http !== 200) return;
       bet.status = s.status;
-      if ((s.bet || s.job) && (s.status === 'ready' || s.status === 'started' || s.status === 'starting')) {
+      if ((s.bet || s.job || s.question || s.choice || s.report) && (s.status === 'ready' || s.status === 'started' || s.status === 'starting')) {
         orb.settled();
         showCard(s, false);
         return;
       }
-      if (s.status === 'thinking') { bet.busy = true; reveal(s); return; }
-      if (s.status === 'failed') { line.set(failLine(s.error), true); return; }
       line.set(s.status === 'skipped' ? 'not now. tap when you want another' : 'tap to think', false);
     });
   }
@@ -937,156 +1126,70 @@ body.has-card .foot { position: static; margin-top: 28px; }
     });
   });
 
-  // ---- only you: the decision deck, behind one quiet link ---------------------------
+  // ---- the team: who is on what, from real state, and a word to any of them ----
 
-  var sheet = document.getElementById('sheet');
-  document.getElementById('open-only').addEventListener('click', function () { sheet.hidden = false; draw(); });
-  document.getElementById('working').addEventListener('click', function () {
-    var list = document.getElementById('jobs');
-    list.hidden = !list.hidden;
-    this.setAttribute('aria-expanded', list.hidden ? 'false' : 'true');
-  });
-  document.getElementById('close-only').addEventListener('click', function () { sheet.hidden = true; armed = null; view = 'card'; });
+  var teamBox = document.getElementById('team');
+  var teamInner = document.getElementById('team-inner');
 
-  function say(text, done) {
-    var reply = document.getElementById('reply');
-    reply.hidden = !text;
-    reply.textContent = text || '';
+  function teamHead(title) {
+    teamInner.textContent = '';
+    var head = el('div', 'head');
+    head.appendChild(el('h1', null, title));
+    var close = el('button', 'quiet', 'close');
+    close.type = 'button';
+    close.addEventListener('click', function () { teamBox.hidden = true; });
+    head.appendChild(close);
+    teamInner.appendChild(head);
   }
 
-  function choiceButton(card, choice, main) {
-    var b = el('button', 'choice' + (main ? ' main' : (choice.id === 'later' ? ' later' : '')));
-    b.type = 'button';
-    var label = el('span', null, choice.label);
-    b.appendChild(label);
-    if (choice.effect) b.appendChild(el('span', 'effect', choice.effect));
-    var key = card.id + ':' + choice.id;
-    if (armed && armed.key === key) {
-      b.className = 'choice armed';
-      label.textContent = 'tap again to confirm';
-    }
-    b.addEventListener('click', function () { tap(card, choice, key); });
-    return b;
+  function openTeam() {
+    teamBox.hidden = false;
+    teamHead('the team');
+    api('/bet/team').then(function (s) { if (s.http === 200) drawTeam(s.rows || []); });
   }
 
-  function tap(card, choice, key) {
-    if (choice.view === 'oldest') { view = 'oldest'; draw(); return; }
-    if (choice.confirm && !(armed && armed.key === key && Date.now() < armed.until)) {
-      armed = { key: key, until: Date.now() + 5000 };
-      draw();
-      setTimeout(function () { if (armed && armed.key === key && Date.now() >= armed.until) { armed = null; draw(); } }, 5100);
-      return;
-    }
-    armed = null;
-    if (choice.ack) say(choice.ack, false);
-    api('/action', { card: card.id, choice: choice.id, confirm: Boolean(choice.confirm) }).then(function (res) {
-      if (!res.ok) { say(res.message || 'that did not go through', false); return refresh(); }
-      if (choice.id === 'later') { say('', false); view = 'card'; }
-      if (res.undo) showUndo(res.ack, res.undo);
-      else if (res.id) pendingReply = res.id;
-      if (choice.id !== 'later' && !/^(approve|sendback):/.test(choice.id)) view = 'card';
-      refresh();
+  function drawTeam(rows) {
+    teamHead('the team');
+    if (!rows.length) { teamInner.appendChild(el('p', 'why', 'nobody has had work in the last day.')); return; }
+    rows.forEach(function (r) {
+      var row = el('button', 'row');
+      row.type = 'button';
+      row.appendChild(el('span', 'who', r.member));
+      row.appendChild(el('span', 'st ' + r.status.replace(/ /g, '-'), r.status));
+      row.appendChild(el('span', 'on', r.on));
+      row.appendChild(el('span', 'time', r.time));
+      row.addEventListener('click', function () { drawTalk(r); });
+      teamInner.appendChild(row);
     });
   }
 
-  function showUndo(text, undo) {
-    var toast = document.getElementById('toast');
-    document.getElementById('toast-text').textContent = text;
-    toast.hidden = false;
-    var b = document.getElementById('toast-undo');
-    b.onclick = function () {
-      toast.hidden = true;
-      api('/undo', { id: undo.id }).then(function (res) { say(res.ack || res.message || '', false); refresh(); });
-    };
-    clearTimeout(undoTimer);
-    undoTimer = setTimeout(function () { toast.hidden = true; }, undo.ms);
-  }
-
-  function drawCard(main, s) {
-    var card = s.card;
-    var box = el('section', 'card');
-    box.appendChild(el('div', 'count', 'decision ' + (s.decided + 1) + ' of ' + Math.min(s.card_limit, s.decided + s.cards_left)));
-    if (view === 'oldest' && card.jobs) {
-      box.appendChild(el('p', 'say', 'the oldest jobs waiting on review'));
-      card.jobs.forEach(function (job) {
-        var j = el('div', 'job');
-        j.appendChild(el('div', null, job.title));
-        j.appendChild(el('div', 'meta', job.member + ', waiting ' + job.age + ', ' + job.ref));
-        var row = el('div', 'row');
-        row.appendChild(choiceButton(card, { id: 'approve:' + job.ref, label: 'approve', confirm: true, ack: job.member + ': thanks, landing it' }, false));
-        row.appendChild(choiceButton(card, { id: 'sendback:' + job.ref, label: 'send back', confirm: true, ack: job.member + ': on it, taking another pass' }, false));
-        j.appendChild(row);
-        box.appendChild(j);
-      });
-      var back = el('button', 'choice later', 'back');
-      back.type = 'button';
-      back.addEventListener('click', function () { view = 'card'; armed = null; draw(); });
-      box.appendChild(back);
-    } else {
-      box.appendChild(el('p', 'say', card.text));
-      card.choices.forEach(function (c, i) { box.appendChild(choiceButton(card, c, i === 0 && c.id !== 'later')); });
-      var cmds = [];
-      card.choices.forEach(function (c) { if (/^yes-/.test(card.id) && c.commands) cmds = cmds.concat(c.commands); });
-      if (cmds.length) box.appendChild(el('div', 'count', 'yes runs: ' + cmds.join('; ')));
-    }
-    main.appendChild(box);
+  // a talk card: what the member is on, and a word to steer them
+  function drawTalk(r) {
+    teamHead(r.member);
+    teamInner.appendChild(el('p', 'why', r.status + ': ' + r.on + '. ' + r.time + '.'));
+    var talkBox = convo(function (body) { body.member = r.member; return api('/bet/steer', body); }, function (ack) {
+      talkBox.replaceWith(el('p', 'mission', ack));
+    }, 'tell ' + r.member + ' something');
+    var back = el('button', 'quiet', 'back to the team');
+    back.type = 'button';
+    back.addEventListener('click', openTeam);
+    teamInner.appendChild(talkBox);
+    teamInner.appendChild(back);
   }
 
-  function drawClear(main, s) {
-    var box = el('section', 'card');
-    box.appendChild(el('p', 'say', s.decided >= s.card_limit ? 'that is five decisions. the rest can wait.' : (s.decided ? 'you have been through everything for now.' : 'nothing needs you right now.')));
-    var running = s.all_clear.still_running;
-    box.appendChild(el('div', 'count', running.length ? 'still running: ' + running.join(', ') : 'nothing is running right now'));
-    main.appendChild(box);
-  }
+  document.getElementById('working').addEventListener('click', openTeam);
 
-  function drawWorking(jobs) {
+  // the footer: how many members are really working, or the team when none are
+  function drawWorking(n) {
     var btn = document.getElementById('working');
-    var list = document.getElementById('jobs');
-    btn.hidden = !jobs.length;
-    btn.textContent = jobs.length + ' working';
-    if (!jobs.length) { list.hidden = true; btn.setAttribute('aria-expanded', 'false'); return; }
-    list.textContent = '';
-    jobs.forEach(function (j) {
-      var row = el('p', null, j.title);
-      row.appendChild(el('span', 'meta', j.owner + ' has it' + (j.running_for ? ', running ' + j.running_for : '')));
-      list.appendChild(row);
-    });
-  }
-
-  function draw() {
-    var s = last;
-    if (!s) return;
-    var link = document.getElementById('open-only');
-    var n = s.cards_left;
-    link.hidden = !n && sheet.hidden;
-    link.textContent = n === 1 ? '1 thing only you can do' : n + ' things only you can do';
-    drawWorking(s.bet && s.bet.working ? s.bet.working : []);
-    document.getElementById('target').textContent = s.strip.line;
-    var pct = s.strip.goal ? Math.min(100, Math.round(100 * s.strip.landed / s.strip.goal)) : 0;
-    document.getElementById('bar').style.width = pct + '%';
-    if (sheet.hidden) return;
-    var main = document.getElementById('main');
-    main.textContent = '';
-    if (s.error) main.appendChild(el('p', 'count', 'could not read the task list: ' + s.error));
-    if (s.card && !(view === 'oldest' && !s.card.jobs)) drawCard(main, s);
-    else drawClear(main, s);
-    if (pendingReply) {
-      var a = s.actions.filter(function (x) { return x.id === pendingReply; })[0];
-      if (a) say(a.line, a.status === 'done');
-    }
-    document.getElementById('live').textContent = s.live;
+    btn.textContent = n ? n + ' working' : 'the team';
   }
 
   function refresh() {
-    return api('/state').then(function (s) {
+    return api('/bet').then(function (s) {
       if (s.http !== 200) { line.set('this link stopped working. start gm phone again on the mac.', true); return; }
-      if (!s.card || s.card.id !== 'review') view = 'card';
-      last = s;
-      draw();
-    }).catch(function () {
-      document.getElementById('live').textContent = 'cannot reach the mac right now. retrying.';
-    });
+      drawWorking(s.team_working || 0);
+    }).catch(function () { /* the next refresh tries again */ });
   }
 
   firstLook();