@galda/cli 0.10.30 → 0.10.32

package/app/index.html

@@ -765,6 +765,47 @@
   .revundo:hover{color:var(--ink);border-color:var(--ink3)}
   @keyframes rvpop{0%{transform:scale(0)}70%{transform:scale(1.18)}100%{transform:scale(1)}}
   @keyframes rvdraw{to{stroke-dashoffset:0}}
+  /* Upgrade celebration — the full-screen reward shown the instant the user
+     returns from a completed Stripe checkout (celebrateUpgrade()). Reuses the
+     review check-pop vocabulary (green circle + drawn tick, rvpop) scaled up.
+     The scrim is a fixed dark wash (same rgba as .overlay), so title/sub use a
+     FIXED light color on purpose: no theme token is guaranteed light here
+     (--on-accent and --invink are near-black in several themes, --ink would
+     vanish on the scrim in light modes). The check is a WHITE tick on the brand
+     green disc (the joyful high-signal success mark; white always reads on the
+     always-bright green, unlike a theme token). */
+  .upcel{position:fixed;inset:0;z-index:200;display:none;place-items:center;cursor:pointer;
+    /* .72 (darker than the .55 dialog scrim) so the fixed-white text keeps strong
+       contrast even in the light themes, where a lighter wash would grey out. */
+    background:rgba(0,0,0,.72);backdrop-filter:blur(7px)}
+  .upcel.show{display:grid;animation:upcelin .3s ease}
+  .upcel.out{animation:upcelout .34s ease forwards}
+  .upcelcard{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:0 24px}
+  .upcelchk{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
+    background:var(--green);box-shadow:0 0 34px rgba(var(--green-rgb),.55)}
+  .upcelchk svg{width:38px;height:38px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
+  .upcelchk svg path{stroke-dasharray:30;stroke-dashoffset:30}
+  .upcel.show .upcelchk{animation:rvpop .5s cubic-bezier(.2,1.3,.5,1)}
+  .upcel.show .upcelchk svg path{animation:updraw .38s .22s ease forwards}
+  .upceltitle{font-size:26px;font-weight:700;letter-spacing:-.01em;color:#fff}
+  .upcelsub{font-size:14px;line-height:1.5;max-width:300px;color:rgba(255,255,255,.82)}
+  @keyframes upcelin{from{opacity:0}to{opacity:1}}
+  @keyframes upcelout{from{opacity:1}to{opacity:0}}
+  @keyframes updraw{to{stroke-dashoffset:0}}
+  @media (prefers-reduced-motion:reduce){
+    .upcel.show,.upcel.out{animation:none}
+    .upcel.show .upcelchk,.upcel.show .upcelchk svg path{animation:none}
+    .upcelchk svg path{stroke-dashoffset:0}
+  }
+  /* .upcelburst centers a soft green flash pulse (brand color) on the check so
+     the pop reads as a burst of light, not just a scale. */
+  .upcelburst{position:relative;display:grid;place-items:center;width:76px;height:76px}
+  .upcelburst .upcelchk{position:relative;z-index:1}
+  .upcelflash{position:absolute;inset:-10px;border-radius:50%;opacity:0;
+    background:radial-gradient(circle, rgba(var(--green-rgb),.6) 0%, rgba(var(--green-rgb),0) 70%)}
+  .upcel.show .upcelflash{animation:upcelflash .72s ease-out forwards}
+  @keyframes upcelflash{0%{transform:scale(.4);opacity:.95}100%{transform:scale(3);opacity:0}}
+  @media (prefers-reduced-motion:reduce){ .upcel.show .upcelflash{animation:none;opacity:0} }
   .reqlist{display:flex;flex-direction:column;gap:12px}
   .reqcard{border:1px solid var(--hair2);border-radius:14px;padding:14px 16px;background:var(--paper);transition:border-color .15s,background-color .15s}
   .reqcard.approved{border-color:rgba(var(--green-rgb),.5);background:rgba(var(--green-rgb),.05)}
@@ -1424,6 +1465,9 @@
   #fsRoot .lanebody{display:flex;flex-direction:column;min-height:0;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
   #fsRoot .lanebody::-webkit-scrollbar{display:none}
   #fsRevSec:not(:empty){margin-bottom:12px}
+  /* List view: drop the whole lane content below the fold/list/board toggle row, the same 26px
+     clearance the board gets — the summary/"See all" was crammed right under the toggle (Masa 2026-07-18). */
+  #fsRoot .fslane:not(.boardmode) .lanebody{padding-top:26px}
 
   /* ---- To Do: List/Board view toggle, in the To Do header — same spot both modes (Masa 2026-07-16) ---- */
   /* List/Board toggle: a FIXED overlay beside the fold icon, in BOTH modes — matching the
@@ -1448,8 +1492,8 @@
      Artifact deliberately fills a background for the selected state; a prior commit "fixed"
      this to match the fold buttons' no-fill rule, which was the wrong reference. */
   #fsRoot .fstvb{width:22px;height:20px;padding:0;display:grid;place-items:center;border:0;background:transparent;color:var(--ink3);cursor:pointer;border-radius:6px;opacity:.75;font:inherit} /* 22x20/radius:6 — was 20x18/radius:5, an unmeasured guess ("小さい") */
-  #fsRoot .fstvb:hover{background:var(--hover);color:var(--ink);opacity:1}
-  #fsRoot .fstvb.on{background:var(--hover);color:var(--ink);opacity:1}
+  #fsRoot .fstvb:hover{background:var(--hover);color:var(--ink2);opacity:1}
+  #fsRoot .fstvb.on{background:var(--hover-s);color:var(--ink2);opacity:1} /* selected: soft fill + softened glyph (--ink2, not near-black --ink) so it doesn't read heavier than its neighbours (Masa 2026-07-18) */
   #fsRoot .fstvb:focus:not(:focus-visible){outline:none}
   #fsRoot .fstvb svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* was 12px, guessed */
   #fsRoot .fstvb svg rect{fill:none}
@@ -1459,6 +1503,13 @@
      5+ columns don't fit the lane width, so it scrolls horizontally in place instead of growing. ---- */
   #fsRoot .fslane.boardmode{flex-basis:var(--lanew-board,372px)}
   #fsRoot .fslane.boardmode #fsTodoSec .tl,#fsRoot .fslane.boardmode #fsTodoSec .doneline,#fsRoot .fslane.boardmode #fsTodoSec #fsDonelist{display:none}
+  /* Board mode = board ONLY (Masa 2026-07-17): the Review section — proof thumbnails, PR
+     links, approve/dismiss, and its "N ready" summary line — is spoken by the board's own
+     Review column, so it must not also stack on top of the board. This was the same bug the
+     flagship had: hiding only the To Do list bits (above) left #fsRevSec sitting over the
+     board. #fsRevSec holds both the summary count (.revhd) and the rows, so one rule hides
+     both (production has no separate #sumwrap element). */
+  #fsRoot .fslane.boardmode #fsRevSec{display:none}
   #fsBoard{display:none;gap:14px;flex:1 1 auto;min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;padding:0 0 4px 0;margin-top:26px;align-items:flex-start;line-height:1.5} /* 26px measured directly off the Artifact's #labBoard (was 8px — guessed, never checked).
     line-height:1.5 — the Artifact's <body> sets this globally and every board text element inherits it (measured: .labcolnm computes to 18.75px = 12.5×1.5);
     this app's <body> doesn't set a global line-height, so the same elements were rendering at the browser's "normal" default instead — same
@@ -1466,24 +1517,97 @@
     a global typography change. */
   #fsRoot .fslane.boardmode #fsBoard{display:flex}
   #fsBoard::-webkit-scrollbar{height:8px}#fsBoard::-webkit-scrollbar-thumb{background:var(--hair);border-radius:6px}
-  .fsbcol{flex:0 0 200px;max-height:100%;display:flex;flex-direction:column;min-height:0}
+  .fsbcol{flex:0 0 236px;max-height:100%;display:flex;flex-direction:column;min-height:0} /* 236 = flagship .labcol (was 200, a prod-side narrowing that made the board read cramped vs the Artifact) */
   .fsbcolhd{display:flex;align-items:center;gap:8px;padding:1px 4px 9px;flex:0 0 auto}
   .fsbdot{width:7px;height:7px;border-radius:50%;background:var(--stg,var(--ink3));flex:0 0 auto;box-shadow:0 0 0 3px color-mix(in srgb,var(--stg,#fff) 14%,transparent)}
   .fsbcolnm{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
   .fsbcnt{font-family:var(--mono);font-size:10px;color:var(--ink3);font-variant-numeric:tabular-nums;background:var(--surf);border-radius:5px;padding:1px 6px}
+  .fsbcadd{margin-left:auto;width:20px;height:20px;display:grid;place-items:center;border:0;background:none;color:var(--ink3);cursor:pointer;border-radius:5px;opacity:0;transition:opacity .12s} /* header "+" — matches flagship .labcadd (hover-reveal add) */
+  .fsbcol:hover .fsbcadd{opacity:.7}
+  .fsbcadd:hover{opacity:1;color:var(--ink);background:var(--hover)}
+  .fsbcadd svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
   .fsbbody{flex:1;min-height:12px;overflow-y:auto;padding:1px 2px 6px;display:flex;flex-direction:column;gap:5px}
   .fsbbody::-webkit-scrollbar{width:7px}.fsbbody::-webkit-scrollbar-thumb{background:var(--hair);border-radius:6px}
-  .fsbrow{padding:7px 9px;border-radius:8px;background:color-mix(in srgb,var(--ink) 5%,transparent);box-shadow:0 0 0 1px var(--hair);font-size:12.4px;display:flex;align-items:center;gap:6px}
-  .fsbrow .st{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--hair2);flex:0 0 13px}
-  .fsbrow .st.run{border-color:var(--green);background:radial-gradient(circle,rgba(var(--green-rgb),.4),transparent 70%)}
-  .fsbrow .st.run.bad{border-color:var(--danger);background:radial-gradient(circle,rgba(var(--danger-rgb),.42),transparent 70%)}
-  .fsbrow .st.run.int{border-color:var(--amber);background:radial-gradient(circle,rgba(var(--amber-rgb),.4),transparent 70%)}
-  .fsbrow .st.ok{border-color:transparent;background:rgba(var(--green-rgb),.12);position:relative}
-  .fsbrow .st.ok::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:8px;color:var(--green)}
-  .fsbrow .st.rev{border-color:var(--blue);background:radial-gradient(circle,color-mix(in srgb,var(--blue) 42%,transparent),transparent 70%)}
-  .fsbrow .tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  /* Board card = Depth (CDO, Masa 2026-07-17): a card is SCANNED, not read — #NN + a
+     2-line title, colour rides the dot (never a fill, §5.5), and a continuous stroke + n/m
+     ONLY while the goal is in flight. The column already names the status, so the card never
+     repeats it. (Replaces the old .fsbrow one-liner that just cloned the list row's shape.) */
+  .lbc{padding:9px 10px;border-radius:8px;display:flex;flex-direction:column;gap:6px;transition:box-shadow .12s,background .12s;line-height:1.35}
+  .lbc:hover{background:var(--hover-s)}   /* fill-less (light / quiet) hover */
+  /* Board surface skin (Masa 2026-07-18). DEFAULT "auto" lets the THEME decide, because a white
+     board and a black board want different cards (Masa: unifying them dragged white back to an
+     ugly grey box): dark themes (banff/midnight/cinema) get the Artifact card — a near-black-grey
+     fill + hairline; light themes (studio/gradient) get the fill-less card, held by whitespace +
+     hover, like the To Do list. "card"/"quiet"/"frost" force one look in every theme. Switch via
+     __boardskin() / the Customize gear's BOARD row. */
+  body[data-boardskin="auto"][data-theme="banff"] .lbc,
+  body[data-boardskin="auto"][data-theme="midnight"] .lbc,
+  body[data-boardskin="auto"][data-theme="cinema"] .lbc,
+  body[data-boardskin="card"] .lbc{background:color-mix(in srgb,var(--ink) 5%,transparent);box-shadow:0 0 0 1px var(--hair)}
+  body[data-boardskin="auto"][data-theme="banff"] .lbc:hover,
+  body[data-boardskin="auto"][data-theme="midnight"] .lbc:hover,
+  body[data-boardskin="auto"][data-theme="cinema"] .lbc:hover,
+  body[data-boardskin="card"] .lbc:hover{box-shadow:0 0 0 1px var(--hair2)}
+  body[data-boardskin="quiet"] .lbc{background:transparent;box-shadow:none}
+  body[data-boardskin="quiet"] .lbc:hover{background:var(--hover-s);box-shadow:none}
+  body[data-boardskin="frost"] .lbc{background:var(--glass,var(--panel));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 8px rgba(20,23,31,.10),0 0 0 1px var(--hair2)}
+  .lbc-hd{display:flex;align-items:center;gap:6px;min-height:12px}
+  .lbc-n{font:600 10px/1 var(--mono);color:var(--ink3);font-variant-numeric:tabular-nums;letter-spacing:.02em}
+  .lbc-dot{width:6px;height:6px;border-radius:50%;flex:0 0 6px;background:var(--ink3)}
+  .lbc-dot.run{background:var(--green);animation:lbcpulse 2.4s ease-in-out infinite}
+  /* Status dot palette (Masa 2026-07-18): Needs you = amber #ffca16, Review = steel #8390f2,
+     Doing = green (kept), Done/To Do/Later = grey, Failed = red. Fixed hues (like flagship's
+     board), chosen to sit together as one family anchored on the green. */
+  .lbc-dot.rev{background:#8390f2}
+  .lbc-dot.bad{background:var(--danger)}
+  .lbc-dot.intr{background:#ffca16}
+  .lbc-dot.ok{background:var(--ink3);opacity:.6}
+  @keyframes lbcpulse{0%,100%{opacity:.4}50%{opacity:1}}
+  @media (prefers-reduced-motion:reduce){.lbc-dot.run{animation:none}}
+  .lbc-t{font-size:12.6px;line-height:1.35;color:var(--ink);letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+  .lbc.is-quiet .lbc-t{color:var(--ink2)}   /* Done / Later / To Do: visible, not shouting */
+  .lbc-w{font:600 8.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;margin-left:auto}
+  .lbc-w.bad{color:var(--danger)} .lbc-w.intr{color:#ffca16}
+  .lbc-meter{display:flex;align-items:center;gap:7px}
+  .lbc-meter .bar{flex:1;height:2px;border-radius:2px;background:color-mix(in srgb,var(--ink) 11%,transparent);overflow:hidden}
+  .lbc-meter .bar i{display:block;height:100%;border-radius:2px;background:var(--green);transition:width .3s}
+  .lbc-meter .frac{font:600 9.5px/1 var(--mono);color:var(--ink3);font-variant-numeric:tabular-nums}
   .fsbempty{color:var(--ink3);font-size:11px;padding:4px 2px}
 
+  /* ---- Waiting badge (CDO, Masa 2026-07-17): columns stay in work-flow order (left→right =
+     the kanban convention), and the two columns that fall off the right edge at 372px — Needs
+     you and Review, i.e. "your turn" — announce themselves on the toggle's OWN row, so no new
+     vertical space is taken. Zero waiting → nothing drawn. Colour is the dot only, no fill
+     (§5.5); a column already scrolled into view sinks (pointing at what's visible is a lie).
+     Board mode only. ---- */
+  #fsRoot .fswait{position:absolute;top:16px;z-index:6;display:none;align-items:center;gap:10px;height:20px}
+  #fsRoot .fslane.boardmode .fswait{display:flex}
+  #fsRoot .fswait button{display:flex;align-items:center;gap:5px;border:0;background:none;padding:0;cursor:pointer;font:400 11px/1 var(--ui);color:var(--ink2);transition:color .12s,opacity .18s}
+  #fsRoot .fswait button:hover{color:var(--ink)}            /* no fill — glyph colour only */
+  #fsRoot .fswait button:focus:not(:focus-visible){outline:none}
+  #fsRoot .fswait button.seen{opacity:.34}                  /* that column is already in view — nothing to point at */
+  #fsRoot .fswait .wd{width:6px;height:6px;border-radius:50%;flex:0 0 6px;background:var(--stg,var(--ink3))}
+  #fsRoot .fswait .wn{font:600 10px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
+  #fsRoot .fswait button.seen .wn{color:var(--ink2)}
+
+  /* ---- + New (CDO decision 5, Masa 2026-07-17): a quiet add-row where + sits in the ● column
+     and New in the text column — aligned to the row's own grid, not a box shoved right. The
+     shared .paplus glyph is 13px (the same span as the ● dot), with the stroke re-centred inside
+     that box so the GLYPH lines up, not the box (Masa aesthetic: align glyphs, not boxes). Click
+     = focus the composer (#input) — the one real create path, no invented row / server call. On
+     the board it lives ONLY in the To Do column: a new goal is a new to-do; you don't "create"
+     into Done/Review/Doing. ---- */
+  #fsRoot .paplus{width:13px;height:13px;flex:0 0 13px;position:relative;display:inline-block}
+  #fsRoot .paplus::before,#fsRoot .paplus::after{content:"";position:absolute;background:currentColor;border-radius:1px}
+  #fsRoot .paplus::before{left:5.85px;top:2px;width:1.3px;height:9px}
+  #fsRoot .paplus::after{top:5.85px;left:2px;height:1.3px;width:9px}
+  /* list rail add-row — padding-left:8px puts + on the .trow ● (8px pad + 13px ● + 9px gap grid) */
+  #fsRoot .qadd{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:9px;width:100%;padding:6px 4px 6px 8px;border-radius:8px;color:var(--ink3);font-size:11.5px;cursor:pointer;opacity:.45;transition:opacity .15s,color .15s}
+  #fsRoot .qadd:hover{opacity:1;color:var(--ink)}
+  /* board To Do column add-row — 2px body pad + 10px card pad = 12px lines + up with the card's #NN */
+  #fsRoot .fsbadd{margin:5px 2px 0;padding:6px 10px;border-radius:7px;border:0;background:none;color:var(--ink3);font:400 11.5px/1 var(--ui);text-align:left;cursor:pointer;display:flex;align-items:center;gap:9px;opacity:.45;transition:opacity .15s,color .15s}
+  #fsRoot .fsbadd:hover{opacity:1;color:var(--ink2)}
+
   /* ---- chat ⇄ lane panel swap: grab anywhere in the top ~40px of either panel, drop lands
      EXACTLY on the side the dashed guide showed. Rail is not part of this (Masa 2026-07-16). ---- */
   #fsRoot .fscenter{order:1}
@@ -1722,8 +1846,8 @@
   #fsRoot .rcard .rnote{display:block;font:500 9.5px/1.4 var(--mono);color:var(--green);margin-top:3px}
   /* To Do timeline: order via tone + labels, no axis line (§1.5-4) */
   #fsRoot .tl{position:relative}
-  #fsRoot .tlcap{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--ink3);text-transform:uppercase;padding:13px 0 5px 8px}
-  #fsRoot .trow{position:relative;padding:6px 6px 6px 8px;border-radius:8px;font-size:12.5px;color:var(--ink);display:flex;align-items:center;gap:9px} /* §14.3 12.5px to match Review heading */
+  #fsRoot .tlcap{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--ink3);text-transform:uppercase;padding:13px 0 5px 0} /* left 8->0: sit the DOING/Next up/Later labels on the same spine as the section headings (Masa 2026-07-18) */
+  #fsRoot .trow{position:relative;padding:6px 6px 6px 0;border-radius:8px;font-size:12.5px;color:var(--ink);display:flex;align-items:center;gap:9px} /* left 8->0: row dot lines up with the Review/To Do headings' left edge, not 8px inside it (Masa 2026-07-18) */
   #fsRoot .trow .tt{color:color-mix(in srgb,var(--ink) 84%,var(--panel))} /* §13.2 soften To Do row name (not pure black); left chat feed keeps --ink */
   #fsRoot .trow:hover{background:var(--hover-s)}
   #fsRoot .trow.now{font-weight:500}
@@ -2112,6 +2236,15 @@
   #fsRoot .cc-who .cs-n{font-size:12px;font-weight:600;color:var(--ink)}
   #fsRoot .cc-who .cs-d{font-family:var(--mono);font-size:9.5px;color:var(--ink3);letter-spacing:.05em}
 
+  .lanemtop{display:none} /* mobile-only lane sheet header (H25②); shown in the max-width:640 block */
+  /* H23 mobile empty-state hero (flagship .m-hero) — shown only on phones when the
+     column is empty (#fsRoot.clawdhero), replacing the Clawd waiting-hero there. */
+  .m-hero{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1 1 auto;min-height:0;gap:15px;padding:24px 20px}
+  .m-hero h2{font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0;text-wrap:balance}
+  .m-hero p{font-size:13px;line-height:1.55;color:var(--ink3);margin:0;max-width:290px}
+  .m-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:3px}
+  .m-chip{border:1px solid var(--hair);border-radius:999px;padding:8px 14px;font-size:12.5px;color:var(--ink2);background:transparent;cursor:pointer;font-family:inherit}
+  .m-chip:active{background:var(--hover-s)}
   /* ============================================================================
      FLAGSHIP · MOBILE (Masa 2026-07-09): app shell. The phone view keeps the
      implementing column as the primary screen, fixes the composer to the bottom,
@@ -2120,8 +2253,8 @@
   @media (max-width: 640px){
     html,body{height:100dvh}
     body[data-layout="flagship"]{overflow:hidden}
-    body[data-layout="flagship"] #fsRoot{height:100dvh;flex-direction:column;padding:8px;gap:8px;
-      overflow:hidden;position:relative;--fscenterw:100%}
+    body[data-layout="flagship"] #fsRoot{height:100dvh;flex-direction:column;padding:8px 24px max(14px, calc(env(safe-area-inset-bottom) + 10px));gap:8px;
+      overflow:hidden;position:relative;--fscenterw:100%} /* Masa: side margins — narrower cards (8→18px) */
     body[data-layout="flagship"].devbar #fsRoot{padding-top:8px}
     body[data-layout="flagship"] #fsRoot .fsrail,
     body[data-layout="flagship"] #fsRoot.railfold .fsrail{
@@ -2153,19 +2286,44 @@
     body[data-layout="flagship"].projectsopen #fsRoot #fsProjects{display:flex}
     body[data-layout="flagship"] #fsRoot .fsproj,
     body[data-layout="flagship"] #fsRoot .fsprojadd{width:100%;flex:0 0 auto;white-space:nowrap;min-height:40px}
-    body[data-layout="flagship"] #fsRoot .fscenter{flex:1 1 auto;width:100%;min-height:0;padding:12px 12px 0}
+    body[data-layout="flagship"] #fsRoot .fscenter{flex:1 1 0;width:100%;min-height:0;padding:12px 12px 12px} /* Masa: bottom padding so the composer isn't flush with the card edge */
     body[data-layout="flagship"] #fsRoot .chd{margin-bottom:10px}
-    body[data-layout="flagship"] #fsRoot .fsstream{padding-bottom:154px}
+    body[data-layout="flagship"] #fsRoot .fsstream{padding-bottom:12px} /* composer no longer overlaps (it's a sibling now) */
     body[data-layout="flagship"] #fsCompwrap{padding-bottom:0}
-    body[data-layout="flagship"] #composerWrap{position:fixed;left:8px;right:8px;bottom:0;z-index:70;
-      padding:0 0 max(8px, env(safe-area-inset-bottom));max-width:none;width:auto;margin:0}
-    body[data-layout="flagship"] #composerWrap .composer{box-shadow:0 12px 36px rgba(20,23,31,.18),0 0 0 1px var(--hair)}
+    /* Composer = a SEPARATE card, sibling of the feed card (positionLayout mobile branch puts
+       #composerWrap directly under .fscenter in #fsRoot). #fsRoot's `gap` then shows the base
+       (下地) between the feed and the composer — they no longer merge into one white block.
+       As a normal flex child it inherits #fsRoot's side padding = aligned with the feed, in
+       every theme (no more backdrop-filter containing-block double-inset). */
+    /* Composer sits in-flow at the bottom of the ONE center card (the connected 下地): the feed
+       (.fsstream) scrolls above it, the queue tray + input rest on the card's surface. Not fixed,
+       not a separate card — matches the desktop center column. */
+    body[data-layout="flagship"] #composerWrap{position:static;flex:0 0 auto;max-width:none;width:auto;margin:8px 0 0;padding:0}
+    body[data-layout="flagship"] #composerWrap .composer{box-shadow:none} /* input box sits ON the center card — no separate float shadow */
+    /* Masa: composer was too tall — compact it (ChatGPT-like). Controls + send stay on ONE row
+       (nowrap; the model/agent chips shrink first, the send never shrinks). */
+    body[data-layout="flagship"] #fsRoot .composer{padding:8px 10px;gap:6px;border-radius:14px}
+    body[data-layout="flagship"] #fsRoot .composer textarea{font-size:15px;line-height:1.3;padding:1px 2px 0;max-height:90px}
+    body[data-layout="flagship"] #fsRoot .crow{flex-wrap:nowrap;gap:6px}
+    /* collapse the agent button to its icon (drop the "Claude Code" label) so the row fits
+       one line with the send fully visible; model + effort keep their text. */
+    body[data-layout="flagship"] #fsRoot #appbtn>span{display:none}
+    body[data-layout="flagship"] #fsRoot .crow .appbtn,
+    body[data-layout="flagship"] #fsRoot .crow .deliv{height:26px;flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+    body[data-layout="flagship"] #fsRoot .crow .imgbtn{flex:0 0 auto}
+    body[data-layout="flagship"] #fsRoot .crow .send{flex:0 0 32px;width:32px;height:32px}
     body[data-layout="flagship"] #fsRoot .fslane,
     body[data-layout="flagship"] #fsRoot.lanefold .fslane{
-      position:fixed;top:0;right:0;height:100dvh;width:min(88vw,360px);min-width:0;display:flex;
-      padding:18px 14px max(14px, env(safe-area-inset-bottom));z-index:85;transform:translateX(102%);
-      transition:transform .28s cubic-bezier(.4,0,.2,1);border-radius:16px 0 0 16px}
+      position:fixed;top:0;right:0;height:100dvh;width:min(78vw,340px);min-width:0;display:flex;flex-direction:column;
+      padding:12px 14px max(14px, calc(env(safe-area-inset-bottom) + 12px));z-index:85;transform:translateX(102%);
+      transition:transform .28s cubic-bezier(.4,0,.2,1);border-radius:16px 0 0 16px} /* H25②: 78vw leaves chat peeking on the left; grab-handle header pins above a scrolling body */
     body[data-layout="flagship"].laneopen #fsRoot .fslane{transform:translateX(0)}
+    /* H25②: mobile sheet header — center grab handle + close X, pinned above the scrolling lane body */
+    body[data-layout="flagship"] #fsRoot .fslane .lanemtop{display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 auto;height:22px;margin:0 0 8px}
+    body[data-layout="flagship"] #fsRoot .fslane .lanemgrab{width:36px;height:4px;border-radius:3px;background:var(--hair2)}
+    body[data-layout="flagship"] #fsRoot .fslane .lanemx{position:absolute;right:-2px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:var(--ink3);display:grid;place-items:center;font-size:15px;cursor:pointer}
+    body[data-layout="flagship"] #fsRoot .fslane .lanemx:active{color:var(--ink);background:var(--hover-s)}
+    body[data-layout="flagship"] #fsRoot .fslane .lanebody{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
     body[data-layout="flagship"] #fsRoot.lanefold .fslane>*:not(.lanetg){display:flex}
     body[data-layout="flagship"] #fsRoot .fsdim{display:block;position:fixed;inset:0;background:rgba(9,12,18,.32);
       opacity:0;pointer-events:none;transition:opacity .22s;z-index:80}
@@ -2194,8 +2352,49 @@
     /* ---- settings/customize popover — anchored via JS inline left (rail.right+8px),
        which breaks once the rail is a full-width top bar; !important is the only way
        to beat an inline style without touching the JS ---- */
-    body[data-layout="flagship"] .gearpop{left:10px!important;right:10px!important;top:64px!important;
-      width:auto!important;max-width:none;max-height:calc(100dvh - 88px)}
+    /* H25④: settings/customize popover → bottom sheet (grab handle + bigger tap targets;
+       app classes: .csw swatches / .optchip type chips / .cfoot .cbtn / .moremenu .ghostbtn). */
+    body[data-layout="flagship"] .gearpop{left:8px!important;right:8px!important;top:auto!important;
+      bottom:calc(env(safe-area-inset-bottom) + 8px)!important;width:auto!important;max-width:none!important;
+      max-height:82dvh!important;border-radius:16px;padding-top:8px}
+    body[data-layout="flagship"] .gearpop::before{content:"";position:sticky;top:0;z-index:2;display:block;
+      width:38px;height:5px;margin:0 auto 12px;border-radius:3px;background:var(--hair2)}
+    body[data-layout="flagship"] .gearpop .csw{width:30px;height:30px}
+    body[data-layout="flagship"] .gearpop .optchip{padding:9px 15px;font-size:12.5px}
+    body[data-layout="flagship"] .gearpop .cfoot .cbtn{height:38px;padding:0 20px;font-size:12.5px}
+    body[data-layout="flagship"] #fsRoot .moremenu .ghostbtn{min-height:46px;display:flex;align-items:center;padding:0 14px;font-size:14px;border-radius:10px}
+    /* H23: centered top bar — gear (settings ⚙) left · project name centered + caret · Review (☰) right. */
+    body[data-layout="flagship"] #fsRoot .fsrail{position:relative}
+    body[data-layout="flagship"] #fsRoot .lbrow{order:0;margin-left:0;margin-right:auto}
+    body[data-layout="flagship"] #fsRoot .fshamb{order:9;margin-left:0}
+    body[data-layout="flagship"] #fsRoot .fsprojbtn{position:absolute;left:50%;transform:translateX(-50%);
+      max-width:62%;justify-content:center;margin:0}
+    /* Review/To Do opener (right) = plain ☰ icon (Masa 2026-07-18: ボタン化はやめ、三本線だけ・
+       タップで To Do/Review ドロワー). The base .fshamb rule above already renders the ☰ svg. */
+    body[data-layout="flagship"] #fsRoot .fshamb .fshamb-lb,
+    body[data-layout="flagship"] #fsRoot .fshamb .fshamb-n{display:none}
+    /* Top bar = chromeless on mobile for ALL themes (Masa 2026-07-18: Midnight で上に変なフレーム
+       が出ていた → Gradient と同じく枠/面なしに). Gradient already did this; extend to every theme. */
+    body[data-layout="flagship"] #fsRoot .fsrail{background:transparent;box-shadow:none}
+    /* Masa: on mobile drop the drag-to-swap grip (⠿) — it collides with the lane close ✕ and
+       there's nothing to drag on a phone. Keep the ✕. */
+    body[data-layout="flagship"] #fsRoot .panelgrip{display:none}
+    /* Masa: the QUESTION card text ran under the top-right trash icon at some lengths — reserve
+       the icon's gutter so the label/question never collide with it. */
+    body[data-layout="flagship"] #fsRoot .cc-ask-lb,
+    body[data-layout="flagship"] #fsRoot .cc-ask-q{padding-right:30px}
+    /* H23: mobile empty state → hero (chips), replacing the Clawd waiting-hero on phones. */
+    body[data-layout="flagship"] #fsRoot.clawdhero #fsClawdHero{display:none}
+    body[data-layout="flagship"] #fsRoot.clawdhero .m-hero{display:flex}
+    /* H23: chat-first — hide the "Implementing" header (the feed is the screen); slim the now-doing line. */
+    body[data-layout="flagship"] #fsRoot .chd{display:none}
+    body[data-layout="flagship"] #fsRoot .nowdoing{background:transparent;border:0;box-shadow:none;border-radius:0;
+      margin:0 0 4px;padding:0 2px 10px;gap:9px;border-bottom:1px solid var(--hair)}
+    /* H25③: See-all ledger → scrim + inset panel (a full-bleed sheet let translucent themes show through). */
+    body[data-layout="flagship"] #seeall{background:rgba(9,12,20,.55)}
+    body[data-layout="flagship"] #seeall .sa-panel{width:96%!important;max-width:96%!important;
+      max-height:calc(100dvh - env(safe-area-inset-top) - 22px)!important;
+      margin-top:calc(env(safe-area-inset-top) + 10px)!important;border-radius:16px!important}
   }
   /* Billing UI (H16/H22) — self-serve plan. Tokens only; red is a line/label,
      never a fill (DESIGN-RULES §5.6), and it is --danger (the app's real token —
@@ -2402,7 +2601,7 @@
           <button class="ghostbtn" id="fsSet">Settings</button>
         </div>
       </div>
-      <button class="fshamb" id="fsHamburger" title="Open To Do and Review"><svg viewBox="0 0 24 24"><path d="M5 7h14M5 12h14M5 17h14"/></svg></button>
+      <button class="fshamb" id="fsHamburger" title="Open To Do and Review"><svg viewBox="0 0 24 24"><path d="M5 7h14M5 12h14M5 17h14"/></svg><span class="fshamb-lb">Review</span><span class="fshamb-n" id="fsHambN"></span></button>
       <div id="fsProjects"></div>
     </div>
     <!-- .railgrip lives here (sibling of .fsrail, not a child — see the CSS comment above)
@@ -2435,6 +2634,8 @@
       <div class="nowdoing" id="fsNowDoing" hidden></div>
       <!-- Clawd HERO (§4.5 初期状態): filled by JS (CLAWD generator), shown via #fsRoot.clawdhero -->
       <div id="fsClawdHero" aria-hidden="true"></div>
+      <!-- H23 mobile empty-state hero (flagship .m-hero) — chips fill the composer (#input) -->
+      <div class="m-hero"><h2>What should we build?</h2><p>Describe a goal in plain language. Claude Code runs it, checks its own work, and only calls it done with proof.</p><div class="m-chips"><button class="m-chip">Fix the failing test in lib.mjs</button><button class="m-chip">Add a token-usage counter</button><button class="m-chip">Summarize the open PRs</button></div></div>
       <div class="fsstream"><div id="fsFeed"></div></div>
       <div class="compwrap" id="fsCompwrap">
         <!-- q3 chat-bottom askbar: DOM path for the "flowed away" dynamic rule (§6.5) — hidden;
@@ -2451,7 +2652,10 @@
         <button class="fstvb" data-fstv="list" title="List"><svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></svg></button>
         <button class="fstvb" data-fstv="board" title="Board"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="5" height="16" rx="1"/><rect x="10" y="4" width="5" height="16" rx="1"/><rect x="17" y="4" width="4" height="16" rx="1"/></svg></button>
       </span>
+      <div class="fswait" id="fsWait"><!-- waiting badge: "N Needs you / N Review" beside the toggle, board mode only (renderFsWait) --></div>
       <div class="lanegrip" id="fsGrip" title="Drag to resize"></div>
+      <!-- mobile-only sheet header (H25②): grab handle + close X; display:none on desktop -->
+      <div class="lanemtop"><span class="lanemgrab"></span><button class="lanemx" id="fsLaneClose" title="Close" aria-label="Close">✕</button></div>
       <div class="lanebody">
         <div id="fsRevSec"></div>
         <div id="fsTodoSec"></div>
@@ -2673,7 +2877,7 @@ const savedTheme = (() => {
   if (v !== s) localStorage.setItem('theme', v);
   return v;
 })();
-const state = { projects: [], goals: [], tasks: [], act: {}, actAt: {}, todos: {}, chatTurns: {}, active: 'galda2', editing: null, attach: [], connectCommand: '', models: ['sonnet'], agentModels: null, agentEfforts: null, agents: ['claude-code', 'codex'], expanded: new Set(), openThreads: new Set(), queueOrder: {}, externalActivity: [], selectedGoal: null, workflowColumns: {}, wfDraft: null, reviewDefinitions: {}, rdDraft: null, connectedApp: localStorage.getItem('sel:agent') || 'claude-code', reviewOpenGoal: null, reviewApprovals: {}, goalDetailOpen: null, qreplyOpen: new Set(), logCollapsed: localStorage.getItem('logCollapsed') !== '0', logEntries: [], layout: localStorage.getItem('layout') || 'flagship', theme: savedTheme, summaryPattern: Number(localStorage.getItem('summaryPattern')) || 3, peraSpot: 0, skill: null, skillsCache: null,
+const state = { projects: [], goals: [], tasks: [], act: {}, actAt: {}, todos: {}, chatTurns: {}, active: 'galda2', editing: null, attach: [], connectCommand: '', models: ['sonnet'], agentModels: null, agentEfforts: null, agents: ['claude-code', 'codex'], expanded: new Set(), openThreads: new Set(), queueOrder: {}, externalActivity: [], selectedGoal: null, workflowColumns: {}, wfDraft: null, reviewDefinitions: {}, rdDraft: null, connectedApp: localStorage.getItem('sel:agent') || 'claude-code', reviewOpenGoal: null, reviewApprovals: {}, goalDetailOpen: null, qreplyOpen: new Set(), logCollapsed: localStorage.getItem('logCollapsed') !== '0', logEntries: [], layout: localStorage.getItem('layout') || 'flagship', theme: savedTheme, boardskin: localStorage.getItem('boardskin') || 'auto', summaryPattern: Number(localStorage.getItem('summaryPattern')) || 3, peraSpot: 0, skill: null, skillsCache: null,
   // per-message send overrides set via slash-commands (reset after each send,
   // except model which is sticky in localStorage). palette = open command list.
   msg: { mode: null, model: null, effort: null, skill: null, later: false, review: false },
@@ -4021,13 +4225,11 @@ function positionLayout(){
     // into the center card. Moving the node keeps every handler and the
     // input-focus fix (c32fda1): appendChild is guarded so the focused #input
     // is never detached mid-typing on SSE-driven renders.
+    // Composer (queue + input + FREE LIMIT banner) + transient #errbar live at the bottom of
+    // the ONE center card — desktop and mobile alike (全面つなげた下地: feed scrolls above,
+    // composer sits on the same connected surface, the queue tray shares that 下地).
     const host = $('fsCompwrap'), cw = $('composerWrap');
     if (host && cw && cw.parentNode !== host) host.appendChild(cw);
-    // #errbar (showErr/showBillingBlocked/showSignInNudge) lives inside .main,
-    // which flagship hides outright (display:none) — every transient message
-    // silently never rendered. Adopt it beside the composer, same technique as
-    // #composerWrap above; a flagship CSS rule floats it just above the input
-    // (CDO判定 2026-07-16 — same fix as #gearPop's body[data-layout] escape).
     const eb = $('errbar');
     if (host && eb && eb.parentNode !== host) host.appendChild(eb);
     // tasklist / actpanel go back home (they live hidden inside .main here)
@@ -5359,11 +5561,12 @@ function fsBoardBucket(goal){
   const s = goal?.status;
   if (s === 'pending') return 'later';                          // shelved by the composer's "Later"
   if (s === 'needsInput') return 'needs';                       // a clarifying question is waiting on the user
+  if (['blocked', 'failed', 'partial', 'interrupted'].includes(s)) return 'needs'; // stopped/errored — needs YOUR action (retry), like the flagship board which puts .drow.err in Needs you. Not "Doing" — Doing is only what's actively moving (Masa 2026-07-18)
   if (s === 'review') return 'review';
   if (s === 'done' || s === 'reverted') return 'done';          // both terminal; REVERTED is not "in flight"
   if (s === 'stacked' || s === 'sending') return 'todo';
   if (s === 'running' && !goal.startedAt) return 'todo';        // goalChip: planned, nothing started yet
-  return 'doing';                                               // planning/running/retesting/blocked/failed — still in flight
+  return 'doing';                                               // planning / running / retesting — actively in flight only
 }
 // Kanban board — GOAL-level: one card per goal, never per task.
 //
@@ -5381,37 +5584,56 @@ function fsBoardBucket(goal){
 // above (proof thumbnails, PR links, approve/dismiss) — the board doesn't duplicate it.
 function renderFsBoard(){
   const el = $('fsBoard'); if (!el) return;
-  const { pgoals, list, running } = fsBucketTodo();
+  const { pgoals, list } = fsBucketTodo();
   const tt = (s, n) => esc(String(s ?? '').replace(/\s+/g, ' ').slice(0, n ?? 60));
   const goalNo = new Map();
   for (const g of pgoals) { const n = goalReviewNumber({ goal: g, tasks: list }); if (n != null) goalNo.set(g.id, n); }
-  const noSpan = (goalId) => { const n = goalId != null ? goalNo.get(goalId) : null; return n != null ? `<span class="gno" data-n="${n}">#${n}</span>` : ''; };
-  const card = (stCls, goalId, title, extra) =>
-    `<div class="fsbrow"><span class="st ${stCls}"></span>${noSpan(goalId)}<span class="tt">${tt(title)}</span>${extra ?? ''}</div>`;
-  const col = (name, stg, count, html) =>
-    `<section class="fsbcol" style="--stg:${stg}"><div class="fsbcolhd"><span class="fsbdot"></span><span class="fsbcolnm">${name}</span><span class="fsbcnt">${count}</span></div><div class="fsbbody">${html || '<div class="fsbempty">—</div>'}</div></section>`;
-  // The status dot keeps the meaning it had on task cards, read off the goal instead.
-  // Everything in Doing that isn't healthily in flight reads as an error, the way
-  // goalChip() calls them all FAIL — 'partial' (ran, but some tasks failed) included,
-  // or a half-failed goal would sit in Doing wearing a healthy green dot.
-  const dotFor = (g) => g.status === 'needsInput' ? 'run int'
-    : g.status === 'review' ? 'rev'
-    : (g.status === 'done' || g.status === 'reverted') ? 'ok'
-    : fsBoardBucket(g) !== 'doing' ? ''
-    : ['stacked', 'sending', 'planning', 'running', 'retesting'].includes(g.status) ? 'run'
-    : 'run bad'; // blocked / failed / partial / interrupted
-  // % is the RUNNING TASK's progress — the same number the old task cards showed, now
-  // carried by the goal it belongs to. What a card should really say about a goal split
-  // into several tasks (n/m done? the step's name? proof?) is a design question, and it
-  // is deliberately not invented here.
-  const pctFor = (g) => {
-    const t = running.find((r) => r.goalId === g.id);
-    return t ? `<span class="pct num">${progressFor(t)}%</span>` : '';
+  // + New in EVERY column, matching the flagship Artifact: a hover-reveal "+" in the header
+  // (.fsbcadd) and a persistent "+ New" at the bottom (.fsbadd). Both just focus the composer
+  // (#input) — the real create path (no editable rows / no per-column status invention like the
+  // flagship mock; a new goal enters via the composer). Earlier this was To-Do-only, which read
+  // as "position is off" against the Artifact (Masa 2026-07-18).
+  const col = (name, stg, count, html, stage) =>
+    `<section class="fsbcol" data-stage="${stage}" style="--stg:${stg}"><div class="fsbcolhd"><span class="fsbdot"></span><span class="fsbcolnm">${name}</span><span class="fsbcnt">${count}</span><button class="fsbcadd" data-fsnew="1" title="New goal"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></button></div><div class="fsbbody">${html || '<div class="fsbempty">—</div>'}</div><button class="fsbadd" data-fsnew="1" title="New goal"><span class="paplus"></span>New</button></section>`;
+  // Depth card (CDO, Masa 2026-07-17): #NN + title, colour on the dot only, and a continuous
+  // stroke + n/m ONLY while the goal is actually in flight. The column already names the
+  // status, so the card never repeats it. Stopped/failed carry NO bar (a dead bar would claim
+  // the goal is moving) — a coloured word (Failed/Interrupted) says it instead.
+  const goalTasks = (g) => list.filter((t) => t.goalId === g.id && !t.reply);
+  const goalCard = (g) => {
+    const bkt = fsBoardBucket(g);
+    // errored is status-based now (blocked/failed/partial/interrupted live in the Needs-you column,
+    // not Doing). Doing holds only what's actively moving, so bkt==='doing' ⇒ healthy in flight.
+    const errored = ['blocked', 'failed', 'partial', 'interrupted'].includes(g.status);
+    const intr = g.status === 'interrupted';
+    const healthyRun = bkt === 'doing';
+    let dot = '', word = '';
+    if (errored) { dot = intr ? 'intr' : 'bad'; word = intr ? 'Interrupted' : 'Failed'; } // shown in Needs you, with the word
+    else if (bkt === 'review') dot = 'rev';
+    else if (bkt === 'done') dot = 'ok';
+    else if (bkt === 'needs') dot = 'intr';                          // your turn — a clarifying question is waiting
+    else if (healthyRun) dot = 'run';
+    // To Do (idle) and Later carry no dot — the column already says it. Quiet = dimmer title.
+    const quiet = bkt === 'todo' || bkt === 'done' || bkt === 'later';
+    const n = goalNo.get(g.id);
+    let h = '<div class="lbc-hd">'
+      + (dot ? `<span class="lbc-dot ${dot}"></span>` : '')
+      + (n != null ? `<span class="lbc-n">#${n}</span>` : '')
+      + (word ? `<span class="lbc-w ${intr ? 'intr' : 'bad'}">${word}</span>` : '')
+      + '</div>'
+      + `<div class="lbc-t">${tt(g.text || g.plan?.[0], 90)}</div>`;
+    // n/m is Doing-only (Masa 2026-07-17): a fraction on a stopped/queued/done card is
+    // residue, not progress — a card showing n/m reads unambiguously as "moving right now".
+    // done/total are the goal's real tasks, so it never invents a number.
+    if (healthyRun) {
+      const gt = goalTasks(g), total = gt.length;
+      if (total) {
+        const done = gt.filter((t) => ['done', 'skipped'].includes(t.status)).length;
+        h += `<div class="lbc-meter"><span class="bar"><i style="width:${Math.round(done / total * 100)}%"></i></span><span class="frac">${done}/${total}</span></div>`;
+      }
+    }
+    return `<div class="lbc${quiet ? ' is-quiet' : ''}">${h}</div>`;
   };
-  // The label is the goal's OWN request text, not plan[0] — showing the plan here just
-  // repeats the first task's title, which renderTasks() already learned the hard way
-  // (Masa: "このグレー文字ってなに?").
-  const goalCard = (g) => card(dotFor(g), g.id, g.text || g.plan?.[0], pctFor(g));
   const no = (g) => goalNo.get(g.id) ?? Infinity;
   const bucket = { todo: [], doing: [], needs: [], review: [], done: [], later: [] };
   for (const g of pgoals) bucket[fsBoardBucket(g)].push(g);
@@ -5421,12 +5643,59 @@ function renderFsBoard(){
   // distinct from "blocked" (an error needing retry/archive, which stays in Doing, the
   // same grouping the List view already uses). Later (backlog) sits LAST, not before Done.
   el.innerHTML =
-      col('To Do', 'var(--ink3)', bucket.todo.length, bucket.todo.map(goalCard).join(''))
-    + col('Doing', 'var(--green)', bucket.doing.length, bucket.doing.map(goalCard).join(''))
-    + (bucket.needs.length ? col('Needs you', 'var(--blue)', bucket.needs.length, bucket.needs.map(goalCard).join('')) : '')
-    + col('Review', 'var(--blue)', bucket.review.length, bucket.review.map(goalCard).join(''))
-    + col('Done', 'var(--green)', bucket.done.length, bucket.done.slice(0, 40).map(goalCard).join(''))
-    + col('Later', 'var(--ink3)', bucket.later.length, bucket.later.map(goalCard).join(''));
+      col('To Do', 'var(--ink3)', bucket.todo.length, bucket.todo.map(goalCard).join(''), 'todo')
+    + col('Doing', 'var(--green)', bucket.doing.length, bucket.doing.map(goalCard).join(''), 'doing')
+    + (bucket.needs.length ? col('Needs you', '#ffca16', bucket.needs.length, bucket.needs.map(goalCard).join(''), 'needs') : '')
+    + col('Review', '#8390f2', bucket.review.length, bucket.review.map(goalCard).join(''), 'review')
+    + col('Done', 'var(--ink3)', bucket.done.length, bucket.done.slice(0, 40).map(goalCard).join(''), 'done')
+    + col('Later', 'var(--ink3)', bucket.later.length, bucket.later.map(goalCard).join(''), 'later');
+  for (const b of el.querySelectorAll('[data-fsnew]')) b.onclick = () => $('input')?.focus(); // every + New / header + focuses the composer
+  renderFsWait(bucket);
+}
+// Waiting badge (CDO, Masa 2026-07-17 decision 2): the board keeps work-flow column order, so
+// the "your turn" columns (Needs you, Review) can sit off the right edge at a narrow lane
+// width. They announce themselves beside the List/Board toggle instead — pure read of the same
+// buckets the board just rendered (no server call). Colour on the dot only; a column already
+// in view sinks. Only the columns with items are drawn — zero waiting shows nothing.
+const FS_WAIT = [['needs', 'Needs you', '#ffca16'], ['review', 'Review', '#8390f2']];
+function fsWaitPlace(){
+  const bar = $('fsWait'), seg = $('fsTvSeg'), lane = $('fsLane');
+  if (!bar || !seg || !lane) return;
+  const sr = seg.getBoundingClientRect(), lr = lane.getBoundingClientRect();
+  bar.style.left = Math.round(sr.right - lr.left + 14) + 'px'; // measured off the toggle, not guessed
+}
+function fsWaitSeen(){
+  const bar = $('fsWait'), board = $('fsBoard');
+  if (!bar || !board) return;
+  const br = board.getBoundingClientRect();
+  for (const b of bar.querySelectorAll('button')) {
+    const col = board.querySelector(`.fsbcol[data-stage="${b.dataset.stage}"]`);
+    if (!col) continue;
+    const cr = col.getBoundingClientRect();
+    b.classList.toggle('seen', cr.left < br.right - 40 && cr.right > br.left + 40);
+  }
+}
+function renderFsWait(bucket){
+  const bar = $('fsWait'); if (!bar) return;
+  bar.innerHTML = FS_WAIT.map(([k, label, c]) => bucket[k].length
+    ? `<button data-stage="${k}" style="--stg:${c}"><span class="wd"></span><span class="wn">${bucket[k].length}</span>${label}</button>` : '').join('');
+  fsWaitPlace();
+  if (!renderFsWait.__wired) {
+    renderFsWait.__wired = true;
+    bar.addEventListener('click', (e) => {
+      const b = e.target.closest('button'); if (!b) return;
+      const col = $('fsBoard')?.querySelector(`.fsbcol[data-stage="${b.dataset.stage}"]`);
+      if (col) col.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+    });
+    const board = $('fsBoard');
+    if (board) {
+      board.addEventListener('scroll', fsWaitSeen, { passive: true });
+      // the lane can also widen a hidden column into view (drag the grip) — repos + re-check
+      if (window.ResizeObserver) new ResizeObserver(() => { fsWaitPlace(); fsWaitSeen(); }).observe(board);
+    }
+    window.addEventListener('resize', () => { fsWaitPlace(); fsWaitSeen(); });
+  }
+  fsWaitSeen();
 }
 // Review (top of the lane, §1.5-4). Counts are DETERMINISTIC (§1.5-9): computed
 // from state via buildReviewDigest — no LLM, no donut, no badges.
@@ -5509,6 +5778,8 @@ function renderFsReview(){
       </span></div>
     <div class="revlist">${shown.map(card).join('')}${foldedGoals.map(foldCard).join('')}
       ${rows.length > RCAP ? `<div class="morefold" id="fsRevMore">${fsUI.revMore ? 'less' : `+${rows.length - RCAP} more`}<span class="g">›</span></div>` : ''}</div>`;
+  // Mirror the ready-review count onto the mobile top-bar "Review N" opener (H23).
+  const _hn = document.getElementById('fsHambN'); if (_hn) _hn.textContent = green > 0 ? String(green) : '';
   // See all = the Ledger dialog (HANDOFF-v45 §5, replacing the ペライチ);
   // Cmd/Ctrl+click = standalone full-page view in a new tab (#seeall route).
   // guarded: the meter (and with it See all) is absent while the section holds only
@@ -5649,11 +5920,14 @@ function renderFsTodo(){
       ${upRows ? `<span class="tlcap"${doingRows ? '' : ' style="padding-top:0"'}>Next up</span>${upRows}` : ''}
       ${queued.length > NCAP ? `<div class="morefold" id="fsTodoMore">${fsUI.todoMore ? 'less' : `+${queued.length - NCAP} more`}<span class="g">›</span></div>` : ''}
       ${laterRows ? `<span class="tlcap">Later</span>${laterRows}` : ''}
+      <button class="qadd" data-fsnew="1" title="New goal"><span class="paplus"></span>New</button>
     </div>
     ${doneAll.length ? `<div class="doneline${fsUI.doneOpen ? ' open' : ''}" id="fsDoneLine">✓ Done<span class="num">${doneAll.length}</span><span class="fold">▾</span></div>
       <div id="fsDonelist"${fsUI.doneOpen ? '' : ' hidden'}>${doneAll.slice(0, 3).map((t) => `<div class="trow up dim done"><span class="st ok"></span>${noSpan(t.goalId)}<span class="tt">${tt(t.title)}</span></div>`).join('')}</div>` : ''}`;
   el.classList.toggle('folded', !!fsUI.todoFold);
   $('fsTodoHd').onclick = () => { fsUI.todoFold = !fsUI.todoFold; el.classList.toggle('folded', fsUI.todoFold); };
+  const qadd = el.querySelector('.qadd[data-fsnew]');            // + New → focus the composer (the real create path)
+  if (qadd) qadd.onclick = () => $('input')?.focus();
   const dl = el.querySelector('#fsDoneLine');
   if (dl) dl.onclick = () => { fsUI.doneOpen = !fsUI.doneOpen; dl.classList.toggle('open', fsUI.doneOpen); el.querySelector('#fsDonelist').hidden = !fsUI.doneOpen; };
   const more = el.querySelector('#fsTodoMore');
@@ -6001,6 +6275,12 @@ function renderClawdHero(){
     document.body.classList.toggle('laneopen');
   };
   $('fsLaneDim').onclick = closeMobilePanels;
+  { const lx = document.getElementById('fsLaneClose'); if (lx) lx.onclick = closeMobilePanels; }
+  // Mobile empty-state hero chips (H23): tapping one drafts it into the composer.
+  document.querySelectorAll('.m-chip').forEach((ch) => { ch.onclick = () => {
+    const inp = document.getElementById('input');
+    if (inp) { inp.value = ch.textContent; inp.focus(); inp.dispatchEvent(new Event('input', { bubbles: true })); }
+  }; });
   $('fsProjBtn').onclick = (e) => {
     e.stopPropagation();
     document.body.classList.remove('laneopen');
@@ -6376,27 +6656,100 @@ async function openBillingPortal(){
   } catch { showErr('Could not open billing — check your connection.'); }
 }
 
-// ② after returning from Stripe Checkout (?checkout=success|cancel): a thin
-// inline confirmation bar at the top of the reading column, then URL cleanup.
-// On success, nudge the engine to re-check entitlement (the webhook can lag a
-// beat) so the PLAN card flips to Paid without a re-sign-in.
+// The full-screen "you're Pro now" reward. Fires the instant the user returns
+// from a completed checkout — landing on the success_url IS Stripe's confirmation
+// that the payment went through, so there's nothing to wait for before rewarding
+// (the entitlement flip only has to catch up before this fades, ~2.6s). Built in
+// JS (no static markup), auto-dismisses, click-to-dismiss, reduced-motion aware.
+// The reward = green disc + WHITE check (the joyful, high-signal success mark,
+// not a dark glyph) that pops, a soft green flash pulse behind it, and a bright
+// confetti burst. The palette is a harmonized set of brights (DESIGN-RULES §5.7
+// motion) — NOT the drab CONFETTI_COLORS (which leans on dark --ink pieces). Kept
+// stylish: the brand green anchors, confetti is curated brights, not an even
+// rainbow (DESIGN-RULES §5.5 動き — 報酬モーション). Tune the two constants below.
+const UPCEL_BRIGHT = ['#3DDC97', '#22C7A9', '#FFC93C', '#FF8A5B', '#FF5FA2', '#7C9CFF', '#B07CFF'];
+const UPCEL_CONFETTI = { count: 46, ribbon: 0.4, spread: 220 }; // ribbon = fraction rendered as fluttering strips
+let upcelShown = false;
+function celebrateUpgrade(){
+  if (upcelShown) return; // once per return, even if handleCheckoutReturn re-runs
+  upcelShown = true;
+  const lang = billingLang();
+  const title = lang === 'ja' ? 'プロになりました' : "You're Pro now";
+  const sub = lang === 'ja' ? '無制限のタスクとプロジェクトが使えます。' : 'Unlimited tasks and projects are unlocked.';
+  const ov = document.createElement('div');
+  ov.className = 'upcel';
+  ov.innerHTML = '<div class="upcelcard"><div class="upcelburst"><span class="upcelflash"></span>'
+    + '<div class="upcelchk"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></div></div>'
+    + '<div class="upceltitle"></div><div class="upcelsub"></div></div>';
+  ov.querySelector('.upceltitle').textContent = title; // textContent: copy is data, never markup
+  ov.querySelector('.upcelsub').textContent = sub;
+  document.body.appendChild(ov);
+  requestAnimationFrame(() => ov.classList.add('show'));
+  const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion:reduce)').matches;
+  if (!reduce) setTimeout(() => upcelConfetti(UPCEL_CONFETTI), 170); // reduced motion: static check, no confetti
+  let done = false;
+  const close = () => { if (done) return; done = true; ov.classList.add('out'); setTimeout(() => ov.remove(), 360); };
+  ov.addEventListener('click', close);
+  setTimeout(close, 2600);
+}
+// Radial confetti burst from the check, bright palette. cfg.ribbon = fraction of
+// pieces rendered as long fluttering strips; cfg.spread = travel radius.
+// .confetti-piece carries z-index:9999, so it rides above the .upcel scrim.
+function upcelConfetti(cfg){
+  const cx = window.innerWidth / 2, cy = window.innerHeight * 0.42;
+  for (let i = 0; i < cfg.count; i++){
+    const el = document.createElement('div');
+    el.className = 'confetti-piece';
+    const ribbon = Math.random() < cfg.ribbon;
+    let w, h;
+    if (ribbon) { w = 4 + Math.random() * 3; h = 13 + Math.random() * 10; }
+    else { const s = 7 + Math.random() * 7; w = s; h = s; }
+    el.style.width = `${w}px`; el.style.height = `${h}px`;
+    el.style.background = UPCEL_BRIGHT[i % UPCEL_BRIGHT.length];
+    el.style.borderRadius = ribbon ? '2px' : (Math.random() < 0.5 ? '50%' : '2px');
+    el.style.left = `${cx}px`; el.style.top = `${cy}px`;
+    el.style.opacity = '1';
+    el.style.transform = 'translate(-50%,-50%) rotate(0deg)';
+    el.style.transition = 'transform 1.1s cubic-bezier(.12,.72,.28,1), opacity 1.1s ease .4s';
+    document.body.appendChild(el);
+    const ang = Math.random() * Math.PI * 2;
+    const dist = 70 + Math.random() * cfg.spread;
+    const dx = Math.cos(ang) * dist, dy = Math.sin(ang) * dist * 0.62 + 115; // burst out, settle down
+    const rot = (Math.random() < 0.5 ? -1 : 1) * (420 + Math.random() * 560);
+    requestAnimationFrame(() => {
+      el.style.transform = `translate(calc(-50% + ${dx}px), calc(-50% + ${dy}px)) rotate(${rot}deg)`;
+      el.style.opacity = '0';
+    });
+    setTimeout(() => el.remove(), 1300);
+  }
+}
+// After returning from Stripe Checkout (?checkout=success|cancel), then URL cleanup.
+// On SUCCESS: lift the paywall UI at once (the #errbar billing banner is imperative,
+// not state-driven — refresh() alone never clears it, which is why it used to linger
+// ~5s until the entitlement poll finished) and celebrate. Keep nudging the engine to
+// re-check entitlement so the PLAN card flips to Paid; the first tick is tightened to
+// 700ms so the confirmation usually lands while the celebration is still on screen.
+// On CANCEL: the thin inline bar, unchanged.
 function handleCheckoutReturn(){
   const c = new URLSearchParams(location.search).get('checkout');
   if (!c) return;
-  const center = document.querySelector('#fsRoot .fscenter') || document.body;
-  const bar = document.createElement('div');
-  bar.className = 'bx-cobar ' + (c === 'success' ? 'bx-ok' : 'bx-cxl');
-  bar.innerHTML = `<span class="bx-dot"></span><span class="bx-cotxt">${c === 'success' ? "<b>You're on Paid.</b> Free limits lifted." : "<b>Checkout canceled.</b> Nothing changed."}</span>`;
-  center.insertBefore(bar, center.firstChild);
   const url = new URL(location.href); url.searchParams.delete('checkout');
   history.replaceState({}, '', url.pathname + (url.searchParams.toString() ? '?' + url.searchParams : ''));
   if (c === 'success') {
+    clearBillingBlocked();   // drop the paywall banner immediately (it is not tied to state)
+    celebrateUpgrade();
     let tries = 0;
     const tick = () => { fetch(withKey('/api/refresh-billing'), { method: 'POST' })
-      .then((r) => r.json()).then((d) => { if (!d?.isPaying && ++tries < 4) setTimeout(tick, 2500); else refresh(); })
+      .then((r) => r.json()).then((d) => { if (!d?.isPaying && ++tries < 5) setTimeout(tick, 1500); else refresh(); })
       .catch(() => {}); };
-    setTimeout(tick, 1500);
+    setTimeout(tick, 700);
+    return;
   }
+  const center = document.querySelector('#fsRoot .fscenter') || document.body;
+  const bar = document.createElement('div');
+  bar.className = 'bx-cobar bx-cxl';
+  bar.innerHTML = '<span class="bx-dot"></span><span class="bx-cotxt"><b>Checkout canceled.</b> Nothing changed.</span>';
+  center.insertBefore(bar, center.firstChild);
   setTimeout(() => bar.remove(), 12000);
 }
 window.addEventListener('load', handleCheckoutReturn);
@@ -7775,10 +8128,18 @@ applyLayout();
 // default Gradient (Lavender). Pure token overrides + structural layers.
 function applyTheme(){
   document.body.dataset.theme = state.theme || 'gradient';
+  document.body.dataset.boardskin = state.boardskin || 'auto'; // board surface skin (card default = the Artifact card) rides with the theme apply
   for (const b of document.querySelectorAll('#themesel .laybtn')) b.classList.toggle('on', b.dataset.theme === (state.theme || 'gradient'));
+  for (const b of document.querySelectorAll('#boardskinsel .laybtn')) b.classList.toggle('on', b.dataset.boardskin === (state.boardskin || 'auto'));
   window.__glassSync?.(); // Glass is ARCHIVED (§6.5) — never selectable, so this guard keeps the WebGL loop dormant
   fsGearAlignX(); // fonts/metrics can shift with the theme — re-zero the gear/toggle delta (v45 §2)
 }
+// Board surface skin — card (the Artifact card, default) / quiet (like the To Do list) / frost. Switchable + persisted.
+const BOARDSKINS = ['auto', 'card', 'quiet', 'frost'];
+window.__boardskin = (v) => {
+  const skin = typeof v === 'number' ? (BOARDSKINS[((v | 0) % 4 + 4) % 4]) : (BOARDSKINS.includes(v) ? v : 'auto');
+  state.boardskin = skin; localStorage.setItem('boardskin', skin); applyTheme();
+};
 for (const b of document.querySelectorAll('#themesel .laybtn')) {
   b.onclick = () => { state.theme = b.dataset.theme; localStorage.setItem('theme', state.theme); applyTheme(); };
 }
@@ -8512,6 +8873,9 @@ function buildGearPop(){
   };
   const themeBtns = [['studio', 'Studio'], ['gradient', 'Gradient'], ['banff', 'Banff'], ['midnight', 'Midnight'], ['cinema', 'Cinema']].map(([v, l]) =>
     `<button class="thtile${(state.theme || 'gradient') === v ? ' on' : ''}" data-gtheme="${v}"><span class="tp" style="background:${THEME_TP[v]}"></span><span>${l}</span></button>`).join('');
+  // Board surface — Quiet (like the To Do list, default) / Paper (card lifts) / Frost (glass over the wallpaper). Applies in every theme.
+  const boardChips = [['auto', 'Auto'], ['card', 'Card'], ['quiet', 'Quiet'], ['frost', 'Frost']].map(([v, l]) =>
+    `<button class="optchip${(state.boardskin || 'auto') === v ? ' on' : ''}" data-gboardskin="${v}">${l}</button>`).join('');
   const grad2 = (p) => `linear-gradient(135deg,${p.join(',')})`;
   const arcSw = ARC17.map((p, i) =>
     `<button class="sw${cust.arc === i ? ' on' : ''}" data-garc="${i}" title="${ARC_NAMES[i]}" style="background:${grad2(p)}"></button>`).join('');
@@ -8561,6 +8925,7 @@ function buildGearPop(){
   // FONT exploration section retired (v45 §1): the brand fonts are final — no chips.
   pop.innerHTML = gearTabsHTML() +
     `<h4>THEME</h4><div class="swrow">${themeBtns}</div>` +
+    `<h4>BOARD</h4><div class="swrow">${boardChips}</div>` +
     sec(th === 'gradient', `<h4>COLOR</h4><div class="swrow">${arcSw}</div>` +
       `<h4>SURFACE</h4><div class="swrow">${surfChips}</div>` +
       `<h4>TEXTBOX</h4><div class="swrow">${tbChips}</div>`) +
@@ -8581,6 +8946,7 @@ function buildGearPop(){
   // EDIT SESSION (v45 §3): every handler below is LIVE PREVIEW ONLY — mutate cust/state,
   // apply to the DOM, re-render the pop. localStorage is written ONLY in custSave().
   for (const b of pop.querySelectorAll('[data-gtheme]')) b.onclick = () => { state.theme = b.dataset.gtheme; applyTheme(); applyCust(); buildGearPop(); };
+  for (const b of pop.querySelectorAll('[data-gboardskin]')) b.onclick = () => { window.__boardskin(b.dataset.gboardskin); buildGearPop(); };
   for (const b of pop.querySelectorAll('[data-garc]')) b.onclick = () => { cust.arc = Number(b.dataset.garc); applyCust(); buildGearPop(); };
   for (const b of pop.querySelectorAll('[data-gapanel]')) b.onclick = () => { cust.arcPanel = Number(b.dataset.gapanel); applyCust(); buildGearPop(); };
   for (const b of pop.querySelectorAll('[data-garctb]')) b.onclick = () => { cust.arctb = Number(b.dataset.garctb); applyCust(); buildGearPop(); };

package/engine/lib.mjs

@@ -3,7 +3,7 @@
 import { resolve, join, basename } from 'node:path';
 import { pathToFileURL } from 'node:url';
 import { existsSync, readdirSync, readFileSync } from 'node:fs';
-import { createPublicKey, verify as verifyRsaSignature } from 'node:crypto';
+import { createPublicKey, verify as verifyRsaSignature, createHash } from 'node:crypto';
 
 // Worker agents Galda can drive. Galda is NOT tied to Claude Code — it runs on
 // whichever agent CLI you have. Neither is auto-installed and codex is never even
@@ -3334,3 +3334,28 @@ export function classifyRelayClientConflict({ existingLock, alive, newIdentity }
 export function shouldEscalateConnectGateHint(waitedMs, email, thresholdMs = 15000) {
   return Number(waitedMs) >= thresholdMs && Boolean(String(email ?? '').trim());
 }
+
+// --- device-flow (PKCE) sign-in helpers --------------------------------------
+// The browser no longer delivers the minted token to a live loopback port —
+// the engine POLLS the Worker to claim it (device-flow). PKCE ties the claim to
+// the engine that started the flow: the engine keeps a secret `verifier`, sends
+// only its SHA-256 `challenge` through the browser, and the Worker hands the
+// token back only to a claimant that can present the matching verifier. These
+// are pure so the crypto + response-shape parsing are unit-tested with no server.
+export function makeSigninChallenge(verifier) {
+  return createHash('sha256').update(String(verifier ?? '')).digest('base64url');
+}
+export function verifierMatchesChallenge(verifier, challenge) {
+  if (!verifier || !challenge) return false;
+  return makeSigninChallenge(verifier) === String(challenge);
+}
+// Normalize the Worker's /connect/claim JSON into a single shape the poller can
+// switch on. Worker returns {pending:true} before the browser lands, {error} on
+// failure, {token,email} once minted. Anything malformed reads as an error so a
+// bad response never masquerades as "still pending" forever.
+export function parseClaimResponse(obj) {
+  if (!obj || typeof obj !== 'object') return { state: 'error', error: 'malformed claim response' };
+  if (obj.error) return { state: 'error', error: String(obj.error) };
+  if (obj.token) return { state: 'ready', token: String(obj.token), email: obj.email != null ? String(obj.email) : undefined };
+  return { state: 'pending' };
+}

package/engine/server.mjs

@@ -20,7 +20,7 @@ import { resolve, dirname, join, basename } from 'node:path';
 import { homedir } from 'node:os';
 import { fileURLToPath } from 'node:url';
 import { pathToFileURL } from 'node:url';
-import { needsProjectFolder, folderLabel, buildFolderQuestion, resolveFolderAnswer, classifyFolderTarget, buildFolderInitConfirm, isFolderInitConfirmed, needsReviewPreference, buildReviewPreferenceQuestion, resolveReviewPreferenceAnswer, routeQuestionAnswer, notUnderstoodNote, parseRelocalizedQuestion, classifyAuthProbe, authBannerText } from './lib.mjs';
+import { needsProjectFolder, folderLabel, buildFolderQuestion, resolveFolderAnswer, classifyFolderTarget, buildFolderInitConfirm, isFolderInitConfirmed, needsReviewPreference, buildReviewPreferenceQuestion, resolveReviewPreferenceAnswer, routeQuestionAnswer, notUnderstoodNote, parseRelocalizedQuestion, classifyAuthProbe, authBannerText, makeSigninChallenge, parseClaimResponse } from './lib.mjs';
 import { parseStreamEvents, parsePlan, refinePlanTasks, findOverlappingGoal, canEditGoal, canDeleteGoal, shouldAskClarification, workerExitReason, isForcedStop, workerResultText, taskCountsAsComplete, resolveWantsPR, resolveGoalSource, buildGoalSummary, buildGoalProofMd, buildGoalPrBody, buildReviewRuleSection, nextGoalStatus, isPrMerged, isPrApproved, reviewToDoneStatus, advanceReviewGoal, revertReviewGoal, approveGoal, dismissGoal, permissionModeFor, isPlanReview, nextAfterPlanApprove, GOAL_MODES, parseSkillFrontmatter, collectSkills, retestGoal, cancelRetestGoal, computeRetestOutcome, revertGoal, planRevertActions, archiveGoal, unarchiveGoal, undismissGoal, parseNumstat, truncateDiffText, sumUsage, resolveEntryUrl, parseGitLog, diffNewCommits, replayQueueLog, reconcileOrphanGoals, reorderQueue, sortQueueByPriority, TASK_PRIORITIES, validateWorkflowColumns, DEFAULT_WORKFLOW_COLUMNS, validateReviewDefinition, DEFAULT_REVIEW_DEFINITION, buildEphemeralSeedLog, buildEphemeralSeedProjects, trimTaskActivityForState, buildAskContext, WORKER_TOOLS, verifyCfAccessJwt, resolveIdentity, goalVisibleTo, clampParallelLimit, canStartMore, nextRunnableTasks, goalsConflict, detectConflicts, pickFoldTarget, isUiChange, shouldCaptureProof, shouldCaptureBaseline, hasTestRelevantChanges, buildExecutionPlan, buildContextHandoffSummary, buildFailurePostmortem, appendFailureMemory, latestFailurePolicy, classifyChangeRisk, checkRunBudget, usageBudgetTokens, isRateLimited, nextResumeDelay, checkFreeTierLimit, resolveEntitlement, resolveCachedEntitlement, FREE_TIER_LIMITS, QUEUED_GOAL_STATUSES, verifyLicenseToken, shouldEmitSetupCompleted, pickAnalyticsUid, shouldEmitFreeExhausted, detectRequestLanguage, isNothingVerifiable, classifyComposerIntentHeuristic, buildIntentPrompt, parseIntentResponse, buildBoardSnapshot, validateBoardSnapshot, boardIsEmpty, decideBoardPull, resolveConnectedAgents, pickAvailableAgent, pickUtilityAgent, utilityModel, liveTakeoverDecision } from './lib.mjs';
 import { openPR } from './pr.mjs';
 import { runVerification, exerciseUi } from './verify.mjs';
@@ -204,19 +204,65 @@ let _freeExhaustedEmitted = false;
 // the nonce, round-trips it through the flow, and requires it back — so a random
 // page can't drive the local /oauth/callback with a token the user never asked for.
 const SIGNIN_NONCE_TTL_MS = 10 * 60 * 1000;
-const pendingSignins = new Map(); // nonce -> expiresAt
+const pendingSignins = new Map(); // nonce -> { expiresAt, verifier }
 function newSigninNonce() {
   const now = Date.now();
-  for (const [k, exp] of pendingSignins) if (exp < now) pendingSignins.delete(k); // opportunistic sweep
+  for (const [k, v] of pendingSignins) if (v.expiresAt < now) pendingSignins.delete(k); // opportunistic sweep
   const nonce = randomBytes(18).toString('base64url');
-  pendingSignins.set(nonce, now + SIGNIN_NONCE_TTL_MS);
-  return nonce;
+  const verifier = randomBytes(32).toString('base64url'); // PKCE secret — never leaves the engine
+  pendingSignins.set(nonce, { expiresAt: now + SIGNIN_NONCE_TTL_MS, verifier });
+  return { nonce, verifier };
 }
 function consumeSigninNonce(nonce) {
-  const exp = pendingSignins.get(nonce);
-  if (exp === undefined) return false;
+  const entry = pendingSignins.get(nonce);
+  if (entry === undefined) return false;
   pendingSignins.delete(nonce);
-  return exp >= Date.now();
+  return entry.expiresAt >= Date.now();
+}
+
+// Device-flow (PKCE) sign-in. The old loopback flow delivered the minted token
+// to http://127.0.0.1:<port>/oauth/callback — which dead-ends with
+// ERR_CONNECTION_REFUSED the moment that ephemeral port is gone (engine
+// restarted, MANAGER_PORT=0 instance exited). Instead the engine POLLS the
+// Worker to claim the token and the browser lands on a HOSTED success page, so
+// delivery never depends on the browser reaching a live local port.
+const activeSigninPolls = new Set(); // nonces with a live poller (one per nonce)
+function buildSigninUrl() {
+  const { nonce, verifier } = newSigninNonce();
+  const challenge = makeSigninChallenge(verifier);
+  startSigninPoll(nonce, verifier);
+  return `${BILLING_API_URL}/connect?state=${encodeURIComponent(nonce)}&challenge=${encodeURIComponent(challenge)}`;
+}
+// Best-effort background loop: GET /connect/claim every 2s until the token is
+// minted (ready), an error is stored, or the nonce's 10-min TTL lapses. On
+// success it activates the license and nudges the app over SSE (the same
+// 'signed-in'/'signin-error' events the popup postMessage used to carry). Never
+// throws — an unreachable Worker just means we try again next tick.
+async function startSigninPoll(nonce, verifier) {
+  if (!BILLING_API_URL || activeSigninPolls.has(nonce)) return;
+  activeSigninPolls.add(nonce);
+  const deadline = Date.now() + SIGNIN_NONCE_TTL_MS;
+  const stop = () => { activeSigninPolls.delete(nonce); pendingSignins.delete(nonce); };
+  try {
+    while (Date.now() < deadline) {
+      await new Promise((r) => { const t = setTimeout(r, 2000); t.unref?.(); });
+      if (!activeSigninPolls.has(nonce)) return; // stopped elsewhere
+      try {
+        const url = `${BILLING_API_URL}/connect/claim?state=${encodeURIComponent(nonce)}&verifier=${encodeURIComponent(verifier)}`;
+        const res = await fetch(url);
+        if (!res.ok) continue; // 403 mismatch / transient — keep trying until TTL
+        const parsed = parseClaimResponse(await res.json().catch(() => null));
+        if (parsed.state === 'ready') {
+          const result = await activateLicense(parsed.token);
+          if (result.ok) send({ ev: 'signed-in', email: result.email });
+          else send({ ev: 'signin-error', error: result.error });
+          return;
+        }
+        if (parsed.state === 'error') { send({ ev: 'signin-error', error: parsed.error }); return; }
+        // pending → loop again
+      } catch { /* best-effort — retry next tick */ }
+    }
+  } finally { stop(); }
 }
 
 async function loadLicenseFromDisk() {
@@ -2981,9 +3027,10 @@ const server = createServer(async (req, res) => {
   // browser; Google bounces back to /oauth/callback (below) with a token.
   if (url.pathname === '/api/signin-url' && req.method === 'GET') {
     if (!BILLING_API_URL) return json(res, 501, { error: 'sign-in not configured (MANAGER_BILLING_API_URL unset)' });
-    const nonce = newSigninNonce();
-    const signinUrl = `${BILLING_API_URL}/connect?port=${PORT}&state=${encodeURIComponent(nonce)}`;
-    return json(res, 200, { url: signinUrl });
+    // Device-flow: no loopback port. buildSigninUrl mints {nonce,verifier},
+    // returns the /connect URL carrying only the PKCE challenge, and kicks off
+    // the background poll that claims the token from the Worker.
+    return json(res, 200, { url: buildSigninUrl() });
   }
 
   // GET /oauth/callback?token&email&state | ?error&state — loopback landing for
@@ -4076,7 +4123,7 @@ server.listen(PORT, '127.0.0.1', () => {
       const signedIn = existsSync(licenseFile) && !FORCE_SIGNIN;
       openUrl = signedIn
         ? APP_URL
-        : `${BILLING_API_URL}/connect?port=${PORT}&state=${encodeURIComponent(newSigninNonce())}`;
+        : buildSigninUrl(); // device-flow: also starts the background claim poll
       console.log(signedIn
         ? `[manager] opening your app → ${APP_URL}`
         : `[manager] ${FORCE_SIGNIN ? 'switching account' : 'first run'}: opening one-click sign-in → ${openUrl}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galda/cli",
-  "version": "0.10.30",
+  "version": "0.10.32",
   "type": "module",
   "description": "Galda - hand off work to Claude Code or Codex, get proof back. Runs on your existing subscription, no extra API cost.",
   "scripts": {