@galda/cli 0.10.27 → 0.10.32

package/app/index.html

@@ -654,6 +654,18 @@
   .delmodal{width:380px}
   .delpreview{border:1px solid var(--hair2);border-radius:10px;padding:10px 12px;background:var(--paper);
     color:var(--ink);font-size:12.5px;line-height:1.5;max-height:120px;overflow:auto;word-break:break-word}
+  /* moment ③ New-project paywall dialog (H22). Same narrow .modal as .delmodal,
+     but a one-action layout (Masa 2026-07-17 確定 __dlg(2)): Upgrade full-width,
+     "Not now" a quiet underlined link centered below it. */
+  .flimdlg{width:380px}
+  .flimdlg .fd-lb{font:600 9px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--danger);margin-bottom:8px}
+  .flimdlg h3{margin:0 0 8px;font-size:15px;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
+  .flimdlg p{margin:0;font-size:12.5px;color:var(--ink2);line-height:1.65}
+  .flimdlg .fd-row{display:flex;flex-direction:column-reverse;gap:10px;align-items:stretch;margin-top:16px}
+  .flimdlg .fd-cta{width:100%;height:34px}
+  .flimdlg .fd-no{border:0;background:0;height:auto;padding:0;color:var(--ink3);font:500 12px/1 var(--ui);
+    text-decoration:underline;text-underline-offset:2px;align-self:center;cursor:pointer}
+  .flimdlg .fd-no:hover{color:var(--ink2)}
   .howto{margin-top:14px;border:1px solid var(--hair);border-radius:10px;padding:10px 14px;background:var(--paper)}
   .howto b{font-size:12px;color:var(--ink)}
   .howto ol{margin:6px 0 0;padding-left:18px;font-size:11.5px;color:var(--ink2);line-height:1.8}
@@ -753,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)}
@@ -1095,8 +1148,11 @@
      the layout starts at the three cards. Frame = 14px all around (flagship .app{inset:14px}).
      Dev escape hatch: ?dev=1 (or localStorage devbar=1) adds body.devbar to show the bar. */
   body[data-layout="flagship"]:not(.devbar) .top{display:none}
-  body[data-layout="flagship"] #fsRoot{flex:1;min-height:0;display:flex;gap:12px;padding:14px;position:relative;
-    --fscenterw:760px} /* position:relative so .railgrip (a direct child, kept outside .fsrail's
+  body[data-layout="flagship"] #fsRoot{flex:1;min-width:0;min-height:0;display:flex;gap:12px;padding:14px;position:relative;
+    --fscenterw:760px} /* min-width:0 (Masa 2026-07-16): rail/lane are flex-shrink:0 (fixed basis), so without
+    this #fsRoot's own automatic min-width == their full combined width, and #fsRoot refuses to shrink
+    below that even though .fscenter (flex:1;min-width:0) is perfectly able to — the whole page overflowed
+    horizontally once the lane got wide instead of .fscenter just getting narrow. position:relative so .railgrip (a direct child, kept outside .fsrail's
     overflow:hidden — see below) can be placed via left:calc(var(--railw)...) and never get clipped.
     single source of truth for the reading column — .fsstream (feed) and
     .compwrap (composer) both read this var so they can never drift apart (fix: composer was
@@ -1219,7 +1275,7 @@
     color:color-mix(in srgb,var(--ink) 24%,transparent);cursor:pointer;
     display:grid;place-items:center;position:absolute;z-index:2;font:inherit}
   #fsRoot .railtg:hover,#fsRoot .lanetg:hover{background:transparent;color:color-mix(in srgb,var(--ink) 85%,transparent)}
-  #fsRoot .railtg{top:8px;right:6px}
+  #fsRoot .railtg{top:12px;right:6px} /* 28px button centers its glyph — lowered ~4px onto the Galda logo's visual baseline (Masa via CDO artifact 2026-07-16, not yet in flagship.html) */
   #fsRoot.railfold .railtg{right:50%;margin-right:-14px} /* centred in the folded 44px rail — the arrow, not rotation, signals the opening direction (v45 §4) */
   #fsRoot.railfold .fsrail{flex-basis:44px;padding:44px 7px 14px} /* top pad 44px — project dots clear the toggle (v45 §2) */
   #fsRoot.railfold .fsrail .lb,#fsRoot.railfold .fsproj span,#fsRoot.railfold .fsproj .num,#fsRoot.railfold .fsprojadd .pa-label{display:none}
@@ -1365,6 +1421,11 @@
      outright, its original home) — float it just above the input, matching the
      legacy layout's "just above the composer" placement (CDO判定 2026-07-16). */
   #fsRoot .compwrap>.errbar{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%)}
+  /* Free-limit banner (H22) spans the composer, not a centered content-width pill
+     like a plain showErr toast: the width rule is scoped to .billing so ordinary
+     errors stay centered pills. left/right:0 stretches it to .compwrap's own box
+     (= composer width), and .bx-ask is display:flex so it fills that. */
+  #fsRoot .compwrap>.errbar.billing{left:0;right:0;transform:none}
   #fsRoot.lanefold{--fscenterw:1020px} /* folded space flows to the center (§1.5-7) — one var flip keeps feed+composer in lockstep */
   /* adopted composer (#composerWrap moves in — same node, same handlers, focus fix intact) */
   body[data-layout="flagship"] #composerWrap{padding:0;border-top:0;max-width:none;width:auto;margin:0}
@@ -1390,10 +1451,11 @@
      flagship-only 34px override that used to live here is gone, it was redundant
      with (and masked that) the base .send circle was still 32px elsewhere. */
   /* ---- right lane: Review (top, §1.5-4) + To Do timeline ---- */
-  #fsRoot .fslane{flex:0 0 var(--lanew,372px);display:flex;flex-direction:column;padding:36px 18px 14px;position:relative;
+  #fsRoot .fslane{flex:0 0 var(--lanew,372px);min-width:0;display:flex;flex-direction:column;padding:36px 18px 14px;position:relative;
     transition:flex-basis .28s cubic-bezier(.4,0,.2,1),padding .28s}
   #fsRoot .fslane.noanim{transition:none}
-  #fsRoot .lanetg{top:9px;left:10px} /* 畳みトグル: 左上・帯 (§6.5 確定 tgpos1 — lane padding-top 36px = the band strip) */
+  #fsRoot .lanetg{top:12px;left:10px} /* 畳みトグル: 左上・帯 (§6.5 確定 tgpos1 — lane padding-top 36px = the band strip).
+    top:12 (was 9) matches .railtg's Galda-baseline lower (Masa via CDO artifact 2026-07-16, not yet in flagship.html). */
   #fsRoot.lanefold .lanetg{left:50%;margin-left:-14px} /* no rotation (v45 §4) */
   #fsRoot.lanefold .fslane{flex-basis:44px;padding:18px 7px}
   #fsRoot.lanefold .fslane>*:not(.lanetg){display:none}
@@ -1403,6 +1465,162 @@
   #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
+     Artifact's .labseg.inlane exactly (2026-07-17: it's never inline in the To Do header row
+     in the Artifact, always an absolute sibling of .lanetg; a prior commit put it inside
+     #fsTodoHd's flow instead, which pushed it onto its own row below the fold icon whenever
+     the header text above it wrapped/existed — "まだなおってない" screenshot). .lanetg is
+     top:12/left:10/width:28 (center y=26) → this sits at the same 8px gap the Artifact uses
+     after its own fold icon, vertically centered on that same 26px line. */
+  #fsRoot .fstvseg{position:absolute;top:16px;left:42px;z-index:6;display:inline-flex;gap:2px} /* top/left measured directly off the Artifact's own
+    .labseg.inlane (2026-07-17: opened it locally, getBoundingClientRect()) — centers on .lanetg exactly like the fold icon,
+    left:42 = .lanetg's right edge (10+28=38) + a measured 4px gap (an earlier pass guessed 46/8px without measuring the gap itself). */
+  /* Board mode: the "To Do N" title is redundant once a To Do COLUMN exists among the board's
+     own columns — hide it; the toggle+fold are unaffected since they no longer live inside it
+     (Masa 2026-07-16: 看板の時は上のTo Doを消してよい — the column keeps the name). */
+  #fsRoot .fslane.boardmode #fsTodoHd{margin-bottom:0}
+  #fsRoot .fslane.boardmode #fsTodoHd .fstdlabel{display:none}
+  /* toggle tone matches the CDO Artifact's .labseg button exactly (2026-07-17 checked against
+     the Artifact directly, not a guess): ink3 @ opacity .75 at rest, hover/on = filled
+     background + full ink + opacity 1. This is a DIFFERENT convention from the fold buttons
+     (which are glyph-only, no fill) — the segmented toggle is its own component and the
+     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(--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}
+
+  /* ---- kanban board: fills the SAME lane slot the To Do list uses (var(--lanew-board), independent
+     from the list's own var(--lanew)) — swapping List⇄Board never resizes the lane or the chat.
+     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
+    container-box position (measured identical, 63px both), but the glyph sits differently inside that box. Scoped here, not on <body>, to avoid
+    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 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}
+  /* 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}
+  #fsRoot .fslane{order:2}
+  #fsRoot.swapmid .fscenter{order:2}
+  #fsRoot.swapmid .fslane{order:1}
+  #fsRoot .panelgrip{position:absolute;top:10px;right:10px;width:24px;height:24px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink3);opacity:.4;cursor:grab;border-radius:6px;z-index:5;transition:opacity .12s,background .12s} /* right:10 on BOTH .fscenter and .fslane, measured directly off the Artifact (2026-07-17) — it uses the same uniform 10/10 for both grips, no special-cased offset for #fsBandBtn (which is Cinema-theme-only and the Artifact doesn't dodge it either); a prior right:44px guess for .fscenter was the actual bug ("6点が左にずれてる") */
+  #fsRoot .panelgrip:hover{opacity:1;background:var(--hover)}
+  #fsRoot .panelgrip svg{width:14px;height:14px;fill:currentColor}
+  #fsRoot .panel-over{outline:2px dashed color-mix(in srgb,var(--ink) 22%,transparent);outline-offset:-2px;border-radius:14px}
+  #fsRoot .fscenter.top-armed,#fsRoot .fslane.top-armed{cursor:grab}
+  #fsRoot .fscenter.top-armed:active,#fsRoot .fslane.top-armed:active{cursor:grabbing}
+  #panelDropLine{position:absolute;width:0;display:none;border-left:2px dashed var(--ink2);z-index:20;pointer-events:none;border-radius:2px}
   #fsRoot .lhd{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
   #fsRoot .lhd .hd{font-size:13.5px;letter-spacing:-.02em}
   #fsRoot .lhd .num{font-size:10px;color:var(--ink3)}
@@ -1628,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}
@@ -2018,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,
@@ -2026,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{
@@ -2059,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}
@@ -2100,22 +2352,77 @@
     /* ---- 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) — self-serve plan. Tokens only; red is a line/label, never
-     a fill (DESIGN-RULES §5.6). CTA reverses ink/panel per theme; on the two
-     translucent-panel themes (banff, glass) the label is pinned opaque so it
-     doesn't wash out. */
-  .bx-cta{height:29px;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 13px;border-radius:8px;background:var(--ink);color:var(--panel);font:550 11.5px/1 var(--ui);border:0;cursor:pointer}
+  /* 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 —
+     there is no --red here). The CTA text is --invink (defined per theme, always
+     readable on --ink) so it needs no per-theme opaque pin. */
+  .bx-cta{height:29px;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 13px;border-radius:8px;background:var(--ink);color:var(--invink);font:550 11.5px/1 var(--ui);border:0;cursor:pointer}
   .bx-cta:hover{opacity:.9}
-  .bx-pm{font-family:var(--mono);font-size:10.5px;opacity:.82;margin-left:2px}
-  body[data-theme="banff"] .bx-cta,body[data-theme="glass"] .bx-cta{color:#101014}
+  /* Masa 2026-07-17: tapping Upgrade jumps straight to Stripe's own page — no
+     transition reads as "did that even do anything?". A spinner in the button
+     itself (not a separate overlay) confirms the tap landed during the request
+     round-trip, right up until the redirect actually happens. Reuses the
+     existing @keyframes spin (line ~130) rather than inventing a new one. */
+  .bx-cta.loading{cursor:default;opacity:.85}
+  .bx-spin{display:none}
+  .bx-cta.loading .bx-spin{display:inline-block;width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite;margin-right:1px}
+  body[data-theme="banff"] .bx-cta.loading .bx-spin,body[data-theme="glass"] .bx-cta.loading .bx-spin{border-color:rgba(16,16,20,.35);border-top-color:#101014}
+  /* Price = figure only, currency small (DESIGN-RULES §5.5 / flagship .fl-pm):
+     the $ is set to 74% of the figure and optically raised so its top meets the
+     digits' cap line (§5.5 グリフで揃える), not sunk to the baseline. No /mo on
+     the button — the number is the message. This is the ONE place a price is
+     styled; every screen inherits it via fmtPrice(). */
+  .bx-pm{font-family:var(--mono);font-size:10.5px;opacity:.82;margin-left:2px;font-variant-numeric:tabular-nums}
+  .bx-pm .cur{margin-right:.5px;font-size:.74em;vertical-align:.12em}
   /* ① free-limit prompt — rendered in #errbar with .billing neutralizing its error fill */
   .errbar.billing{background:transparent!important;backdrop-filter:none!important;box-shadow:none!important;border:0!important;padding:0!important}
-  .bx-ask{border:1px solid var(--hair);border-left:2px solid var(--red);border-radius:11px;padding:10px 13px;display:flex;align-items:center;gap:14px;background:var(--panel)}
+  .bx-ask{border:1px solid var(--hair);border-left:2px solid var(--danger);border-radius:11px;padding:10px 13px;display:flex;align-items:center;gap:14px;background:var(--panel)}
   .bx-qt{flex:1;text-align:left}
-  .bx-lb{font:600 9px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--red)}
+  .bx-lb{font:600 9px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--danger)}
   .bx-q{font-size:13px;color:var(--ink);margin-top:4px}
   .bx-act{flex:none}
   /* neutral ask (not a limit/error — e.g. the sign-in nudge): same card, --blue
@@ -2123,6 +2430,13 @@
      (§7決定ログ「AI確認：色は青系」) rather than inventing a new color. */
   .bx-ask.info{border-left-color:var(--blue)}
   .bx-ask.info .bx-lb{color:var(--blue)}
+  /* free-tier pending counter in the To Do header (H22): mono figure, dim slash,
+     --danger at the cap. Built only on the free plan (see renderFsTodo), so it
+     needs no display toggle here — it simply replaces the lane-total .num. */
+  .fcount{font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;color:var(--ink3)}
+  .fcount .fc-l{opacity:.62}
+  .fcount.cap{color:var(--danger)}
+  .fcount.cap .fc-l{opacity:.75}
   /* ② post-checkout return bar */
   .bx-cobar{box-shadow:inset 0 0 0 1px var(--hair2);border-radius:11px;padding:10px 13px;display:flex;align-items:center;gap:10px;font-size:12.5px;margin:0 auto 12px;width:100%;max-width:var(--fscenterw,760px)}
   .bx-cobar[hidden]{display:none}
@@ -2287,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)
@@ -2295,6 +2609,7 @@
          overflow:hidden (Masa 2026-07-16). -->
     <div class="railgrip" id="fsRgrip" title="Drag to resize"></div>
     <div class="fscard fscenter">
+      <button class="panelgrip" draggable="true" title="Drag to swap chat ⇄ lane"><svg viewBox="0 0 24 24"><circle cx="9" cy="6" r="1.6"/><circle cx="15" cy="6" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="9" cy="18" r="1.6"/><circle cx="15" cy="18" r="1.6"/></svg></button>
       <div id="fsBand"></div>
       <button id="fsBandBtn" title="Change the band image"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 15l5-4 4 3 4-5 5 6"/></svg></button>
       <div id="fsBandPop"><div class="bandgrid">
@@ -2319,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;
@@ -2329,11 +2646,20 @@
     </div>
     <div class="fsdim" id="fsLaneDim"></div>
     <div class="fscard fslane" id="fsLane">
+      <button class="panelgrip" draggable="true" title="Drag to swap chat ⇄ lane"><svg viewBox="0 0 24 24"><circle cx="9" cy="6" r="1.6"/><circle cx="15" cy="6" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="9" cy="18" r="1.6"/><circle cx="15" cy="18" r="1.6"/></svg></button>
       <button class="lanetg" id="fsLaneTg" title="Fold the lane"></button><!-- panel icon filled by tgUpdate (v45 §4) -->
+      <span class="fstvseg" id="fsTvSeg"><!-- List/Board toggle — fixed beside the fold icon in BOTH modes, matching the Artifact (not inline in the To Do header) -->
+        <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>
+        <div id="fsBoard"></div>
       </div>
     </div>
   </div>
@@ -2510,6 +2836,21 @@
     </div>
   </div>
 </div>
+<!-- moment ③: the New-project paywall dialog (H22). Reuses the .overlay dim+blur +
+     narrow .modal of the delete confirm (the product's one dimmed dialog family),
+     with a one-action layout: Upgrade full-width, "Not now" a quiet link under it.
+     Title/body/price are filled per language at open (openProjectLimitDialog). -->
+<div class="overlay" id="flimProjOverlay">
+  <div class="modal flimdlg">
+    <div class="fd-lb">Free limit</div>
+    <h3 id="flimProjTitle"></h3>
+    <p id="flimProjBody"></p>
+    <div class="fd-row">
+      <button class="bx-cta fd-cta" id="flimProjUpgrade"><span class="bx-spin"></span>Upgrade</button>
+      <button class="fd-no" id="flimProjNo">Not now</button>
+    </div>
+  </div>
+</div>
 <script>
 // Auth key lives in localStorage (the ?key= from the first visit) so auth
 // never depends on cookies — Chrome drops session cookies when the server
@@ -2536,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 },
@@ -3884,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)
@@ -4912,6 +5251,7 @@ const fsUI = {
   band: Number(localStorage.getItem('fsBand') ?? 0),   // theme-6 band choice
   revMore: false,                                      // "+N more" fold on the review list (§1.5-8)
   todoFold: false, doneOpen: false, todoMore: false,
+  todoView: localStorage.getItem('fsTodoView') === 'board' ? 'board' : 'list', // To Do: list (default) / kanban board (Masa 2026-07-16)
   logOpen: new Set(), logFocus: null,                  // "View log" targets
   repsOpen: new Set(),                                 // reply-group folds
 };
@@ -5198,6 +5538,10 @@ function toggleGoalDetail(goalId){
   if (state.goalDetailOpen === goalId && overlay.classList.contains('show')) closeGoalDetail();
   else openGoalDetail(goalId);
 }
+function syncFsTvSeg(){
+  const seg = $('fsTvSeg'); if (!seg) return;
+  for (const b of seg.querySelectorAll('[data-fstv]')) b.classList.toggle('on', b.dataset.fstv === fsUI.todoView);
+}
 function renderFsLane(){
   if (state.layout !== 'flagship') return;
   const lane = $('fsLane'); if (!lane) return;
@@ -5205,7 +5549,153 @@ function renderFsLane(){
   // bug as the qreplyrow "vanishes mid-type" fix.
   const ae = document.activeElement;
   if (ae && lane.contains(ae) && ['INPUT', 'TEXTAREA'].includes(ae.tagName)) return;
+  lane.classList.toggle('boardmode', fsUI.todoView === 'board');
+  syncFsTvSeg();
   renderFsReview(); renderFsTodo();
+  if (fsUI.todoView === 'board') renderFsBoard();
+}
+// Which board column a GOAL belongs in. Follows goalChip()'s rule so the board and
+// the status chips can never drift; the two columns the chips have no word for
+// (Later / Needs you) are spelled out here. Pure: goal in, column key out.
+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 — actively in flight only
+}
+// Kanban board — GOAL-level: one card per goal, never per task.
+//
+// A card is one thing the user asked for, and its #NN names that one thing exactly
+// once (Masa 2026-07-17). Tasks are the AI's decomposition of a single request —
+// the user didn't write them, doesn't review them one by one (proof and the PR are
+// per goal), and never says "#14" about one. They are the inside of a card, not
+// cards. The board used to lay out one card per TASK while #NN kept naming the
+// GOAL, so a goal split into three tasks put three cards reading "#13" in three
+// different columns.
+//
+// No drag-to-change-status: each status transition is its own gated server endpoint
+// (approve/dismiss/reverify/activate/…), there's no generic "set status" call to hook a
+// drag onto, so v1 is a visual overview only. Review already has its own rich section
+// above (proof thumbnails, PR links, approve/dismiss) — the board doesn't duplicate it.
+function renderFsBoard(){
+  const el = $('fsBoard'); if (!el) return;
+  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); }
+  // + 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>`;
+  };
+  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);
+  for (const k of Object.keys(bucket)) bucket[k].sort((a, b) => k === 'done' ? no(b) - no(a) : no(a) - no(b));
+  // To Do / Doing / Needs you / Review / Done / Later — the original design's columns
+  // (Masa 2026-07-16). "Needs you" = a clarifying question is waiting on the user —
+  // 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(''), '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.
@@ -5288,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
@@ -5325,26 +5817,36 @@ function renderFsReview(){
       headers: { 'content-type': 'application/json' }, body: JSON.stringify({ text: '' }) });
     if (r && r.ok) await refresh(); else showErr('Dismiss failed.'); };
 }
-// To Do (below Review): Doing rows with bar + mono %, Next up in queue order,
-// error as a small in-row colour element (§1.5-8), quiet Done fold.
-function renderFsTodo(){
-  const el = $('fsTodoSec'); if (!el) return;
+// Shared To Do bucketing (list rows AND the kanban board read the same groups —
+// single source of truth, see renderFsBoard below). Pure of the DOM: state in, groups out.
+function fsBucketTodo(){
   const pgoals = state.goals.filter((g) => g.projectId === state.active);
   const list = state.tasks.filter((t) => t.projectId === state.active);
   const order = state.queueOrder[state.active] ?? [];
   const byQueue = (a, b) => { const ia = order.indexOf(a.id), ib = order.indexOf(b.id); return (ia < 0 ? 1e9 : ia) - (ib < 0 ? 1e9 : ib) || a.num - b.num; };
-  const running = list.filter((t) => t.status === 'running');
-  const failed = list.filter((t) => ['failed', 'interrupted'].includes(t.status));
-  const blocked = pgoals.filter((g) => g.status === 'blocked');
-  const queued = list.filter((t) => t.status === 'queued' && !t.reply).sort(byQueue);
-  const doneAll = list.filter((t) => ['done', 'skipped'].includes(t.status)).sort((a, b) => b.num - a.num);
+  return {
+    pgoals, list,
+    running: list.filter((t) => t.status === 'running'),
+    failed: list.filter((t) => ['failed', 'interrupted'].includes(t.status)),
+    blocked: pgoals.filter((g) => g.status === 'blocked'),
+    needsInput: pgoals.filter((g) => g.status === 'needsInput'), // a clarifying question is waiting on the user (board's "Needs you")
+    reviewGoals: pgoals.filter((g) => g.status === 'review'),
+    queued: list.filter((t) => t.status === 'queued' && !t.reply).sort(byQueue),
+    doneAll: list.filter((t) => ['done', 'skipped'].includes(t.status)).sort((a, b) => b.num - a.num),
+    later: pgoals.filter((g) => g.status === 'pending'),
+  };
+}
+// To Do (below Review): Doing rows with bar + mono %, Next up in queue order,
+// error as a small in-row colour element (§1.5-8), quiet Done fold.
+function renderFsTodo(){
+  const el = $('fsTodoSec'); if (!el) return;
+  const { pgoals, list, running, failed, blocked, queued, doneAll, later } = fsBucketTodo();
   const tt = (s, n) => esc(String(s ?? '').replace(/\s+/g, ' ').slice(0, n ?? 70));
   // LATER = deliberately shelved goals (composer "Later" send → server status 'pending';
   // PRD §8.2 top gap — they were invisible in flagship). Staged disclosure: the cap
   // renders only when they exist. Same endpoints as the old layout's data-pstart/pdel:
   // Start = POST /api/goals/:id/activate, Delete = DELETE /api/goals/:id (confirm).
   // No mono # — pending goals are never planned, so they carry no task number yet.
-  const later = pgoals.filter((g) => g.status === 'pending');
   const laterRows = later.map((g) => `<div class="trow up dim"><span class="st"></span><span class="tt">${tt(g.text, 70)}</span>
     <span class="acts"><button class="ab txt" data-fspstart="${g.id}" title="Queue it now">Start</button><button class="ab txt" data-fspdel="${g.id}" title="Delete">Delete</button></span></div>`).join('');
   // reference numbers (HANDOFF-v45 §11): a #NN prefix on every To Do / Review item's name.
@@ -5401,17 +5903,31 @@ function renderFsTodo(){
   // specifically, since that suffix describes the Next-up sublist's own sort, not the
   // lane total.
   const todoTotal = running.length + failed.length + blocked.length + queued.length + later.length;
-  el.innerHTML = `<div class="lhd sechd" id="fsTodoHd"><span class="hd">To Do</span><span class="num">${todoTotal}${queued.length ? ' · next-up order' : ''}</span><span class="fold">▾</span></div>
+  // Free-tier pending counter (H22): on the free plan the header shows the wall
+  // — pending goals out of the 5-slot cap — reddening at the cap and gone once
+  // paid. Reads the SAME numbers the gate enforces (state.billing, never a local
+  // recompute) so the header and the wall can't drift. usage.pending already
+  // excludes review server-side (#128).
+  const _bill = state.billing || {};
+  const _fp = _bill.usage?.pending, _fl = _bill.limits?.pending;
+  const _showFc = _bill.plan !== 'paid' && Number.isFinite(_fp) && Number.isFinite(_fl);
+  const _todoNum = _showFc
+    ? `<span class="fcount fstdlabel${_fp >= _fl ? ' cap' : ''}">${_fp}<span class="fc-l">/${_fl}</span></span>`
+    : `<span class="num fstdlabel">${todoTotal}${queued.length ? ' · next-up order' : ''}</span>`;
+  el.innerHTML = `<div class="lhd sechd" id="fsTodoHd"><span class="hd fstdlabel">To Do</span>${_todoNum}<span class="fold fstdlabel">▾</span></div>
     <div class="tl">
       ${doingRows ? `<span class="tlcap" style="padding-top:0">Doing</span>${doingRows}` : ''}
       ${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');
@@ -5524,6 +6040,9 @@ async function createProject(){
   try {
     const r = await fetch(withKey('/api/projects'), { method: 'POST', headers: { 'content-type': 'application/json' },
       body: JSON.stringify({ baseProjectId: state.active, name: 'New project' }) });
+    // Free tier allows one project (moment ③): the server 402s the second. Raise
+    // the centered upgrade dialog instead of the generic "failed." toast.
+    if (r.status === 402) { openProjectLimitDialog(); return; }
     if (!r.ok) throw new Error();
     const body = await r.json();
     state.projects = body.projects ?? [...state.projects, body.project].filter(Boolean);
@@ -5531,8 +6050,22 @@ async function createProject(){
     document.body.classList.remove('projectsopen');
     render();
   } catch { showErr('New project failed.'); }
-  if (add) add.disabled = false;
-}
+  finally { if (add) add.disabled = false; } // the 402 early-return must not leave +New dead
+}
+// moment ③ paywall dialog — filled per language from BILLING_COPY, Upgrade shows
+// the one price format (small $, no /mo), "Not now" just closes.
+function openProjectLimitDialog(){
+  const c = BILLING_COPY[billingLang()];
+  $('flimProjTitle').textContent = c.projTitle;
+  $('flimProjBody').textContent = c.projBody;
+  $('flimProjNo').textContent = c.notNow;
+  const up = $('flimProjUpgrade');
+  up.disabled = false; up.classList.remove('loading');
+  up.innerHTML = `<span class="bx-spin"></span>Upgrade${priceTag(state.billing?.price)}`;
+  up.onclick = () => startCheckout(up);
+  $('flimProjOverlay').classList.add('show');
+}
+function closeProjectLimitDialog(){ $('flimProjOverlay').classList.remove('show'); }
 async function deleteProject(p){
   if (!p) return;
   if (!(await confirmDelete({
@@ -5720,6 +6253,16 @@ function renderClawdHero(){
   };
   $('fsRailTg').onclick = () => { root.classList.toggle('railfold'); tgUpdate(); fsGearAlignX(); }; // §1.5-7: fold
   $('fsLaneTg').onclick = () => { root.classList.toggle('lanefold'); tgUpdate(); };
+  // List/Board toggle — wired once (static, unlike the row it used to live inside which
+  // rebuilds on every renderFsTodo()); syncFsTvSeg() paints .on and is called from renderFsLane.
+  for (const b of $('fsTvSeg').querySelectorAll('[data-fstv]')) b.onclick = (e) => {
+    e.stopPropagation();
+    fsUI.todoView = b.dataset.fstv; localStorage.setItem('fsTodoView', fsUI.todoView);
+    $('fsLane').classList.toggle('boardmode', fsUI.todoView === 'board');
+    syncFsTvSeg();
+    if (fsUI.todoView === 'board') renderFsBoard();
+  };
+  syncFsTvSeg();
   tgUpdate();
   $('fsMoreBtn').onclick = (e) => { e.stopPropagation(); $('fsMoreMenu').classList.toggle('open'); };
   document.addEventListener('click', (e) => { if (!e.target.closest('#fsRoot .lbrow')) $('fsMoreMenu').classList.remove('open'); });
@@ -5732,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');
@@ -5770,17 +6319,43 @@ function renderClawdHero(){
   if (restoreLane && canRestoreFlagshipWidths(restoreRail ? savedRail : defaultRailW, saved)) {
     root.style.setProperty('--lanew', `${saved}px`);
   }
-  let sx = 0, sw = 0, drag = false;
-  grip.addEventListener('mousedown', (e) => { drag = true; sx = e.clientX; sw = lane.getBoundingClientRect().width; lane.classList.add('noanim'); e.preventDefault(); });
+  // Board view keeps its OWN width (--lanew-board), independent from the List width
+  // (--lanew) — both start at the same 372px default, each persists once resized
+  // (Masa 2026-07-16: 看板とToDoの横幅は最初同じ・それぞれ保持). List stays capped at
+  // 540 (a To Do list doesn't need more); Board can grow with the window, same
+  // "no flat ceiling" treatment as the rail above (Masa 2026-07-16: もっと広げたい) —
+  // but its live max reserves the rail's CURRENT width (not a flat guess), same
+  // protection railMax() gives center: a wide-open board must not crush the rail's
+  // own content (Masa 2026-07-16: 狭くした時にバグる — rail at its 72px floor overlaps
+  // its own logo/project row; reserving rail's real width keeps it out of that floor).
+  // Board is the star of this view — chat only needs to stay usable, not "comfortably
+  // readable" (that 640px figure is for List/chat-first use). 320px LOOKED right but was
+  // measured wrong: the composer's own button row (.crow — app/model/effort selects + send)
+  // needs ~342px just for its content, and .fscenter's padding adds ~44px more — below ~430
+  // those chips get clipped off the edge of the composer card (Masa 2026-07-16 repro:
+  // dragged the board grip wide on a 1280px-wide window, "Medium"+send were cut off).
+  // 440 is the smallest value that doesn't clip on a real laptop width.
+  const minCenterWBoard = 440;
+  const boardMax = () => Math.max(280, window.innerWidth - 28 - 24
+    - (document.querySelector('#fsRoot .fsrail')?.getBoundingClientRect().width || defaultRailW) - minCenterWBoard);
+  const savedBoard = Number(localStorage.getItem('fsLaneWBoard'));
+  if (savedBoard >= 280 && savedBoard <= boardMax()) root.style.setProperty('--lanew-board', `${savedBoard}px`);
+  let sx = 0, sw = 0, drag = false, boarding = false;
+  grip.addEventListener('mousedown', (e) => {
+    drag = true; sx = e.clientX; boarding = lane.classList.contains('boardmode');
+    sw = lane.getBoundingClientRect().width; lane.classList.add('noanim'); e.preventDefault();
+  });
   document.addEventListener('mousemove', (e) => {
     if (!drag) return;
-    const w = Math.max(280, Math.min(540, sw + (sx - e.clientX)));
-    root.style.setProperty('--lanew', `${w}px`);
+    const max = boarding ? boardMax() : 540;
+    const w = Math.max(280, Math.min(max, sw + (sx - e.clientX)));
+    root.style.setProperty(boarding ? '--lanew-board' : '--lanew', `${w}px`);
   });
   document.addEventListener('mouseup', () => {
     if (!drag) return;
     drag = false; lane.classList.remove('noanim');
-    localStorage.setItem('fsLaneW', String(parseInt(root.style.getPropertyValue('--lanew')) || 372));
+    if (boarding) localStorage.setItem('fsLaneWBoard', String(parseInt(root.style.getPropertyValue('--lanew-board')) || 372));
+    else localStorage.setItem('fsLaneW', String(parseInt(root.style.getPropertyValue('--lanew')) || 372));
   });
   // rail width drag: 72px – railMax() (freely widens, only bounded by keeping the center column
   // readable), persisted (flagship .railgrip port, v36 JS; grip hides when folded)
@@ -5801,6 +6376,52 @@ function renderClawdHero(){
     localStorage.setItem('fsRailW', String(parseInt(root.style.getPropertyValue('--railw')) || 168)); // H19: default floor 168
     if ($('gearPop').classList.contains('open')) custPlace(); // panel sits beside the rail — track the new edge
   });
+  // chat ⇄ lane panel swap — grab anywhere in the top ~40px of either panel (not just the
+  // grip icon), drop lands EXACTLY on the side the dashed guide showed (never a blind
+  // toggle, which could disagree with what was shown). Rail is fixed, not part of this
+  // (Masa 2026-07-16).
+  (() => {
+    const center = root.querySelector('.fscenter');
+    if (!center || !lane) return;
+    const TOPZONE = 40;
+    const sideFor = (target, x) => { const r = target.getBoundingClientRect(); return x < r.left + r.width / 2 ? 'left' : 'right'; };
+    const dropLine = document.createElement('div'); dropLine.id = 'panelDropLine'; root.appendChild(dropLine);
+    const showDropLine = (target, side) => {
+      const r = target.getBoundingClientRect(), ar = root.getBoundingClientRect();
+      const edgeX = side === 'left' ? r.left : r.right;
+      dropLine.style.left = `${edgeX - ar.left}px`; dropLine.style.top = `${r.top - ar.top}px`;
+      dropLine.style.height = `${r.height}px`; dropLine.style.display = 'block';
+    };
+    const hideDropLine = () => { dropLine.style.display = 'none'; };
+    document.addEventListener('dragend', hideDropLine);
+    const armTop = (panel, name) => {
+      panel.addEventListener('mousedown', (e) => { const r = panel.getBoundingClientRect(); if (e.clientY - r.top <= TOPZONE) panel.setAttribute('draggable', 'true'); });
+      panel.addEventListener('mousemove', (e) => { const r = panel.getBoundingClientRect(); panel.classList.toggle('top-armed', e.clientY - r.top <= TOPZONE); });
+      panel.addEventListener('mouseleave', () => panel.classList.remove('top-armed'));
+      panel.addEventListener('dragstart', (e) => {
+        if (panel.getAttribute('draggable') !== 'true') return;
+        e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('application/x-panel-swap', name);
+      });
+      const disarm = () => { panel.removeAttribute('draggable'); panel.classList.remove('top-armed'); };
+      panel.addEventListener('dragend', disarm); panel.addEventListener('mouseup', disarm);
+    };
+    armTop(center, 'center'); armTop(lane, 'lane');
+    for (const p of [center, lane]) {
+      p.addEventListener('dragover', (e) => {
+        if (!e.dataTransfer.types.includes('application/x-panel-swap')) return;
+        e.preventDefault(); p.classList.add('panel-over'); showDropLine(p, sideFor(p, e.clientX));
+      });
+      p.addEventListener('dragleave', () => { p.classList.remove('panel-over'); hideDropLine(); });
+      p.addEventListener('drop', (e) => {
+        if (!e.dataTransfer.types.includes('application/x-panel-swap')) return;
+        e.preventDefault(); p.classList.remove('panel-over'); hideDropLine();
+        const dragged = e.dataTransfer.getData('application/x-panel-swap');
+        const side = sideFor(p, e.clientX);
+        const wantLeft = side === 'left' ? dragged : (dragged === 'center' ? 'lane' : 'center');
+        root.classList.toggle('swapmid', wantLeft === 'lane');
+      });
+    }
+  })();
   // theme-6 band picker (visual thumbnails, §6.5 T6)
   $('fsBandBtn').onclick = (e) => { e.stopPropagation(); $('fsBandPop').classList.toggle('open'); };
   document.addEventListener('click', (e) => { if (!e.target.closest('#fsBandPop') && !e.target.closest('#fsBandBtn')) $('fsBandPop').classList.remove('open'); });
@@ -5853,39 +6474,86 @@ function upsert(arr, item){ const i = arr.findIndex((x) => x.id === item.id); if
 
 let errTimer = null;
 let authDown = false; // true while the worker-auth banner is up → keep auto-hide timers from clearing it
+// true while the free-tier paywall is up. Unlike a transient error, "you are
+// over the free limit" doesn't resolve itself — it persists until the user
+// upgrades or usage drops, so it must not auto-hide on a fixed timer (Masa
+// 2026-07-17: a 20s auto-hide + a 15s retry that background-tab throttling can
+// stretch to ~once/minute meant the banner could vanish for long stretches
+// with the outbox still silently stuck "Unsent" and no visible explanation —
+// exactly the "queue fills up, nothing happens" report). Mirrors authDown's
+// existing guard pattern; cleared only in postOutboxItem once a send actually
+// succeeds, which is the one signal that's actually true evidence the block
+// lifted (an upgrade, or the count dropping).
+let billingBlockedActive = false;
+function clearBillingBlocked(){
+  if (!billingBlockedActive) return;
+  billingBlockedActive = false;
+  const bar = $('errbar');
+  bar.classList.remove('billing');
+  bar.style.display = 'none';
+  bar.innerHTML = '';
+}
 function showErr(msg){
   const bar = $('errbar');
   bar.classList.remove('billing'); // shed the paywall styling if it was last used for that
+  billingBlockedActive = false;
   bar.textContent = msg; bar.style.display = 'block';
   clearTimeout(errTimer);
   errTimer = setTimeout(() => { if (authDown) return; bar.style.display = 'none'; }, 6000);
 }
 
-// Minimal placeholder for the free-tier paywall pending CDO design
-// (handoff-billing-ui-request.md §①) — reuses the existing #errbar rather
-// than inventing new chrome; the polished version can replace showBillingBlocked's
-// body without touching the postOutboxItem call site below.
-const BLOCKED_REASON_TEXT = {
-  'pending-goal-limit': 'Free plan limit reached — 5 pending To Dos.',
-  'cumulative-goal-limit': 'Free plan limit reached — 19 To Dos total.',
-  'project-limit': 'Free plan limit reached — 1 project.',
+// Free-limit copy (H22, Masa 2026-07-17 確定 · ja+en). The sentence is content,
+// so it follows the user's language; the mono label and buttons stay English
+// 汎用名 (DOING / FAILED / Retry). <b> is intentional (rendered as innerHTML from
+// this fixed internal constant, never user input) — the figure is the message.
+const BILLING_COPY = {
+  ja: {
+    'pending-goal-limit': '無料プランでは一度に登録できるタスクは <b>5個</b> までです。Proプランでは無制限に登録できます。',
+    'cumulative-goal-limit': '無料プランの <b>20/20</b> タスクをすべて使いました。',
+    projTitle: 'プロジェクトは1つまでです',
+    projBody: '無料プランに含まれるプロジェクトは1つです。アップグレードすると、プロジェクトを無制限に作れます。',
+    notNow: 'Not now',
+  },
+  en: {
+    'pending-goal-limit': 'The free plan holds <b>5 tasks</b> at a time. Pro holds as many as you want.',
+    'cumulative-goal-limit': "You've used all <b>20/20</b> free tasks.",
+    projTitle: 'Free includes one project',
+    projBody: 'Your free plan includes one project. Upgrade to create as many as you need.',
+    notNow: 'Not now',
+  },
 };
+// Which language the paywall speaks. Mirrors foldLangFor's path (the project's
+// review-language override wins; otherwise match the language the user is
+// actually writing in — the latest goal in the active project — else default en)
+// so the wall reads in the same language as everything else in the project.
+function billingLang(){
+  const l = reviewLangFor(state.active);
+  if (l === 'ja' || l === 'en') return l;
+  const recent = (state.goals || []).filter((g) => g.projectId === state.active).slice(-1)[0];
+  if (recent && /[぀-ヿ㐀-鿿]/.test(recent.text || '')) return 'ja';
+  return document.documentElement.lang === 'ja' ? 'ja' : 'en';
+}
+// The free-limit banner (moments ① pending-goal-limit / ② cumulative-goal-limit):
+// a bordered card in #errbar, --danger as a 2px left rule only (no fill, §5.6),
+// with an Upgrade CTA that opens Stripe Checkout. project-limit is NOT a banner —
+// it is the centered dialog raised from createProject (moment ③). The .billing
+// class strips #errbar's own error fill so the card stands alone.
 function showBillingBlocked(blocked){
   const bar = $('errbar');
-  const text = BLOCKED_REASON_TEXT[blocked?.reason] || 'Free plan limit reached.';
-  const pl = fmtPrice(state.billing?.price);
-  // ① the free-limit prompt (design H16): a bordered card, red as a 2px left
-  // rule only (no fill), with an Upgrade CTA that opens Stripe Checkout. The
-  // .billing class strips #errbar's own error fill so the card stands alone.
+  const c = BILLING_COPY[billingLang()];
+  const q = c[blocked?.reason] || c['pending-goal-limit'];
   bar.classList.add('billing');
   bar.innerHTML = `<div class="bx-ask"><div class="bx-qt"><div class="bx-lb">Free limit</div>`
-    + `<div class="bx-q">${esc(text)} Upgrade to keep going?</div></div>`
-    + `<div class="bx-act"><button class="bx-cta" id="bxUpgrade">Upgrade${pl ? `<span class="bx-pm">${esc(pl)}</span>` : ''}</button></div></div>`;
+    + `<div class="bx-q">${q}</div></div>`
+    + `<div class="bx-act"><button class="bx-cta" id="bxUpgrade"><span class="bx-spin"></span>Upgrade${priceTag(state.billing?.price)}</button></div></div>`;
   bar.style.display = 'block';
   const btn = bar.querySelector('#bxUpgrade');
-  if (btn) btn.onclick = () => startCheckout();
+  if (btn) btn.onclick = () => startCheckout(btn);
+  // No auto-hide: the condition persists until the user acts, so a fixed timer
+  // would just recreate the bug this fixes. clearTimeout only cancels any showErr
+  // 6s timer that happened to be mid-flight on this same shared bar.
   clearTimeout(errTimer);
-  errTimer = setTimeout(() => { if (authDown) return; bar.style.display = 'none'; bar.classList.remove('billing'); }, 20000);
+  billingBlockedActive = true;
 }
 
 // Worker sign-in banner. The server preflights `claude` at boot (/api/state.auth
@@ -5937,27 +6605,45 @@ function showSignInNudge(){
   errTimer = setTimeout(() => { bar.style.display = 'none'; bar.classList.remove('billing'); }, 20000);
 }
 
-// "$12/mo" from the Stripe-owned price (state.billing.price), never hardcoded.
-// Returns '' when the price isn't known yet so the CTA just reads "Upgrade".
+// The Stripe-owned price (state.billing.price), never hardcoded. Split into the
+// currency mark + the figure so the ONE price format (§5.5 / .bx-pm) can render
+// the mark smaller and optically raised. No interval — /mo is dropped on the
+// button (the number is the message). Returns null when the price isn't known
+// yet so the CTA just reads "Upgrade".
 function fmtPrice(p){
-  if (!p || p.amount == null) return '';
+  if (!p || p.amount == null) return null;
   const n = p.amount / 100;
   const amt = Number.isInteger(n) ? String(n) : n.toFixed(2);
   const cur = String(p.currency || 'usd').toLowerCase() === 'usd' ? '$' : (String(p.currency).toUpperCase() + ' ');
-  const iv = p.interval ? '/' + ({ month: 'mo', year: 'yr', week: 'wk', day: 'day' }[p.interval] || p.interval) : '';
-  return `${cur}${amt}${iv}`;
+  return { cur, amt };
+}
+// Render a price into the single styled price span (small currency mark, no /mo).
+// '' when the price is unknown so callers can concatenate it unconditionally.
+function priceTag(p){
+  const f = fmtPrice(p);
+  return f ? `<span class="bx-pm"><span class="cur">${esc(f.cur)}</span>${esc(f.amt)}</span>` : '';
 }
 
 // Upgrade → Stripe Checkout (via the engine proxy, same-origin). On return the
 // browser lands back with ?checkout=success|cancel (handled at load).
-async function startCheckout(){
+// btn (optional): the button that triggered this, so it can show a spinner
+// for the round trip to /api/checkout — jumping straight to Stripe's own page
+// with zero feedback reads as "did that even do anything?" (Masa 2026-07-17).
+// Left spinning through the r.ok/d.url success path on purpose: the page is
+// about to navigate away to Stripe, so there is nothing to reset back to.
+async function startCheckout(btn){
+  if (btn) { btn.disabled = true; btn.classList.add('loading'); }
   try {
     const r = await fetch(withKey('/api/checkout'), { method: 'POST', headers: { 'content-type': 'application/json' },
       body: JSON.stringify({ successUrl: location.origin + location.pathname + '?checkout=success', cancelUrl: location.origin + location.pathname + '?checkout=cancel' }) });
     const d = await r.json().catch(() => ({}));
-    if (r.ok && d.url) location.href = d.url;
-    else showErr(d.error || 'Could not start checkout.');
-  } catch { showErr('Could not start checkout — check your connection.'); }
+    if (r.ok && d.url) { location.href = d.url; return; }
+    if (btn) { btn.disabled = false; btn.classList.remove('loading'); }
+    showErr(d.error || 'Could not start checkout.');
+  } catch {
+    if (btn) { btn.disabled = false; btn.classList.remove('loading'); }
+    showErr('Could not start checkout — check your connection.');
+  }
 }
 
 // Manage billing → Stripe Customer Portal (paying users; engine proxy).
@@ -5970,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);
@@ -6329,6 +7088,10 @@ async function postOutboxItem(item){
       return;
     }
     if (!r.ok) throw new Error(`HTTP ${r.status}`);
+    // A send just succeeded, which is the one signal that's actually true
+    // evidence the free-tier block lifted (upgrade, or usage dropping below
+    // the limit) — clear the persistent paywall banner if it was still up.
+    clearBillingBlocked();
     const goal = await r.json();
     if (goal.kind === 'chat') {
       // Conversation-first (SLICE 2 + Pattern A H23): a chat/help/settings turn,
@@ -7299,6 +8062,10 @@ $('delCancelBtn').onclick = () => closeDeleteConfirm(false);
 $('delConfirmBtn').onclick = () => closeDeleteConfirm(true);
 $('deleteConfirmOverlay').addEventListener('click', (e) => { if (e.target === $('deleteConfirmOverlay')) closeDeleteConfirm(_delDismissValue); });
 document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && $('deleteConfirmOverlay').classList.contains('show')) closeDeleteConfirm(_delDismissValue); });
+// moment ③ dialog dismissal: "Not now" link, backdrop click, and Escape all close it.
+$('flimProjNo').onclick = () => closeProjectLimitDialog();
+$('flimProjOverlay').addEventListener('click', (e) => { if (e.target === $('flimProjOverlay')) closeProjectLimitDialog(); });
+document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && $('flimProjOverlay').classList.contains('show')) closeProjectLimitDialog(); });
 $('input').addEventListener('keydown', (e) => {
   // Palette navigation takes priority while it is open (Claude-Code keys).
   if (state.palette && !e.isComposing) {
@@ -7361,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(); };
 }
@@ -7997,24 +8772,25 @@ function gearSetHTML(){
   // so the polished version can drop in without touching the wiring below.
   // ③ PLAN card: identity (Sign in with Google / Signed in as X) + plan status.
   // Free → usage vs limits + Upgrade; Paid → green dot + Manage (Stripe Portal).
-  const pl = fmtPrice(bill.price);
   const u = bill.usage || {}, lim = bill.limits || {};
-  let billingRow;
-  if (!bill.licensed) {
-    billingRow = `<div class="srow"><div class="sl">Account<span class="sd">Sign in with Google to unlock the full plan — the free tier works without it</span></div>
+  // Account row: signed in (email + Log out) vs anonymous (Sign in with Google).
+  const acct = bill.licensed
+    ? `<div class="srow"><div class="sl">Account<span class="sd">Signed in with Google · ${esc(bill.email)}</span></div><button class="optchip" data-gsignout="1">Log out</button></div>`
+    : `<div class="srow"><div class="sl">Account<span class="sd">Sign in with Google to sync your usage across devices — the free tier works without it</span></div>
         <button class="optchip" data-gsignin="1">Sign in with Google</button></div>
        <div class="srow dis" id="licKeyMsg" style="display:none"></div>`;
-  } else if (bill.plan === 'paid') {
-    billingRow = `<div class="srow"><div class="sl">Account<span class="sd">Signed in with Google · ${esc(bill.email)}</span></div><button class="optchip" data-gsignout="1">Log out</button></div>
-       <div class="srow"><div class="sl">Plan</div><span class="bx-pdot"><i></i>Paid</span></div>
-       <div class="srow"><div class="sl">Billing<span class="sd">manage or cancel in Stripe</span></div><button class="bx-cchip" data-gportal="1">Manage</button></div>`;
-  } else {
-    billingRow = `<div class="srow"><div class="sl">Account<span class="sd">Signed in with Google · ${esc(bill.email)}</span></div><button class="optchip" data-gsignout="1">Log out</button></div>
-       <div class="srow"><div class="sl">Plan</div><span class="bx-sval">Free</span></div>
+  // The free-tier usage + Upgrade shows on the free plan whether or not the user
+  // has signed in — it mirrors the To Do header counter (H22), which is visible
+  // to anonymous free users too. Sign-in is an extra (sync across devices), not a
+  // gate to see your own usage or upgrade.
+  const freeUsage = `<div class="srow"><div class="sl">Plan</div><span class="bx-sval">Free</span></div>
        <div class="srow"><div class="sl">To Dos<span class="sd">pending, this install</span></div><span class="bx-sval bx-num">${u.pending ?? 0} / ${lim.pending ?? 5}</span></div>
-       <div class="srow"><div class="sl">Lifetime</div><span class="bx-sval bx-num">${u.cumulative ?? 0} / ${lim.cumulative ?? 19}</span></div>
-       <button class="bx-cta bx-up-set" data-gupgrade="1">Upgrade${pl ? `<span class="bx-pm">${esc(pl)}</span>` : ''}</button>`;
-  }
+       <div class="srow"><div class="sl">Lifetime</div><span class="bx-sval bx-num">${u.cumulative ?? 0} / ${lim.cumulative ?? 20}</span></div>
+       <button class="bx-cta bx-up-set" data-gupgrade="1"><span class="bx-spin"></span>Upgrade${priceTag(bill.price)}</button>`;
+  const billingRow = bill.plan === 'paid'
+    ? acct + `<div class="srow"><div class="sl">Plan</div><span class="bx-pdot"><i></i>Paid</span></div>
+       <div class="srow"><div class="sl">Billing<span class="sd">manage or cancel in Stripe</span></div><button class="bx-cchip" data-gportal="1">Manage</button></div>`
+    : acct + freeUsage;
   return `
   <div class="srow"><div class="sl">Language<span class="sd">Review checklist language for this project</span></div>
     <button class="optchip${lang === 'auto' ? ' on' : ''}" data-gslang="auto">Auto</button>
@@ -8063,7 +8839,7 @@ function buildGearPop(){
       signBtn.disabled = false;
     };
     const upBtn = pop.querySelector('[data-gupgrade]');
-    if (upBtn) upBtn.onclick = () => startCheckout();
+    if (upBtn) upBtn.onclick = () => startCheckout(upBtn);
     const portalBtn = pop.querySelector('[data-gportal]');
     if (portalBtn) portalBtn.onclick = () => openBillingPortal();
     const signOutBtn = pop.querySelector('[data-gsignout]');
@@ -8097,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('');
@@ -8146,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>`) +
@@ -8166,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(); };