@galda/cli 0.10.24 → 0.10.30

package/app/index.html

@@ -592,6 +592,10 @@
   .task .name{font-size:13px;color:var(--ink);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
   .task.done .name{color:var(--ink)}
   .task .cond{font-family:var(--mono);font-size:10.5px;color:var(--ink3);margin-top:3px}
+  /* PRD §6.5: a folded goal is settled, not failed — its title sinks to --ink2 like
+     any other settled row. No red, no painted surface, no badge (§1.5 art.8/art.9);
+     the pointer is the text itself, which reads as "the work is over there". */
+  .task.revrow.foldrow .name{color:var(--ink2)}
   .replyctx{color:var(--ink2)}
   .replyctx svg{width:11px;height:11px;vertical-align:-1px;stroke:currentColor;stroke-width:2;fill:none}
   .side-foot{flex:0 0 auto;padding:11px 14px;border-top:1px solid var(--hair);font-size:11.5px;color:var(--ink3);display:flex;align-items:center;gap:7px}
@@ -650,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}
@@ -1091,8 +1107,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
@@ -1215,7 +1234,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}
@@ -1361,6 +1380,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}
@@ -1386,10 +1410,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}
@@ -1399,6 +1424,79 @@
   #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}
+
+  /* ---- 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(--ink);opacity:1}
+  #fsRoot .fstvb.on{background:var(--hover);color:var(--ink);opacity:1}
+  #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}
+  #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 200px;max-height:100%;display:flex;flex-direction:column;min-height:0}
+  .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}
+  .fsbbody{flex:1;min-height:12px;overflow-y:auto;padding:1px 2px 6px;display:flex;flex-direction:column;gap:5px}
+  .fsbbody::-webkit-scrollbar{width:7px}.fsbbody::-webkit-scrollbar-thumb{background:var(--hair);border-radius:6px}
+  .fsbrow{padding:7px 9px;border-radius:8px;background:color-mix(in srgb,var(--ink) 5%,transparent);box-shadow:0 0 0 1px var(--hair);font-size:12.4px;display:flex;align-items:center;gap:6px}
+  .fsbrow .st{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--hair2);flex:0 0 13px}
+  .fsbrow .st.run{border-color:var(--green);background:radial-gradient(circle,rgba(var(--green-rgb),.4),transparent 70%)}
+  .fsbrow .st.run.bad{border-color:var(--danger);background:radial-gradient(circle,rgba(var(--danger-rgb),.42),transparent 70%)}
+  .fsbrow .st.run.int{border-color:var(--amber);background:radial-gradient(circle,rgba(var(--amber-rgb),.4),transparent 70%)}
+  .fsbrow .st.ok{border-color:transparent;background:rgba(var(--green-rgb),.12);position:relative}
+  .fsbrow .st.ok::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:8px;color:var(--green)}
+  .fsbrow .st.rev{border-color:var(--blue);background:radial-gradient(circle,color-mix(in srgb,var(--blue) 42%,transparent),transparent 70%)}
+  .fsbrow .tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .fsbempty{color:var(--ink3);font-size:11px;padding:4px 2px}
+
+  /* ---- 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)}
@@ -1438,6 +1536,33 @@
   /* review row number — #NN PREFIX on the title (HANDOFF-v45 §11), same form as the To Do
      rows (PRD §5: numbering matches the sidebar) */
   #fsRoot .rcard .rid{font-size:10.5px;font-weight:600;color:var(--ink3);margin:0 5px 0 0;display:inline-block;font-variant-numeric:tabular-nums}
+  /* PRD §6.5 fold note — on the carrier ("also carries #13") and on the folded card
+     ("merged into #12"). Deliberately NOT the .pr treatment: no tinted ground, no
+     badge (§1.5-9), no red — folding is not a failure. Mono + --ink3 = the same quiet
+     meta tone the rest of the lane uses (§5.5「品は罫線とトーン差・monoで出す」). */
+  /* display:block, not inline-block: it shares .rc with the PR pill, which is itself
+     inline-block — side by side the pill sat on top of the last "#NN" and ate it. */
+  #fsRoot .rcard .fnote{font-family:var(--mono);font-size:9.5px;color:var(--ink3);margin-top:3px;display:block}
+  /* In rv3 the meta sits on the near-black photo scrim whatever the theme, where --ink3
+     is effectively invisible (§5.5「見えるが騒がない」— near-invisible is a fail). Match
+     .rid's white-on-scrim treatment. The folded card opts out of the scrim (rule above),
+     so it keeps --ink3 on the panel where that tone is correct. */
+  #fsRoot[data-rv="3"] .rcard:not(.fold) .fnote{color:rgba(255,255,255,.66);text-shadow:0 1px 3px rgba(0,0,0,.55)}
+  /* A folded card is settled, not failed: title sinks to the settled tone, and it
+     keeps no ✓/✕ because the thing to approve lives on the goal it was folded into. */
+  #fsRoot .rcard.fold .t{color:var(--ink2)}
+  /* A folded card is a pointer, not a review item: no proof to show, nothing to approve.
+     So it opts OUT of the rv3 thumbnail treatment (whose .rc is absolutely positioned
+     over an 84px photo ground) and stays the same quiet line in every view — the form
+     Masa drew. Giving it a fake dark thumbnail would claim it has something to look at. */
+  /* .fold.noimg, not .fold: the placeholder-ground rule below is `.rcard.noimg`, which
+     ties this on specificity and would win on order — a folded card would keep the fake
+     dark thumbnail ground. Matching both classes settles it regardless of order. */
+  #fsRoot[data-rv="3"] .rcard.fold.noimg{display:flex;position:static;align-items:center;gap:10px;
+    padding:9px 10px;min-height:0;border:1px solid var(--hair);border-radius:11px;background:none;box-shadow:none}
+  #fsRoot[data-rv="3"] .rcard.fold.noimg .rc{position:static;padding:0;background:none}
+  #fsRoot[data-rv="3"] .rcard.fold.noimg .t{color:var(--ink2);font-size:12.5px;text-shadow:none}
+  #fsRoot[data-rv="3"] .rcard.fold.noimg .rid{color:var(--ink3)}
   /* reference numbers everywhere else (HANDOFF-v45 §11): a leading #NN prefix on every
      To Do item's name — same goal = same number (goalReviewNumber), distinct from the
      PR's own #id shown separately. */
@@ -2072,19 +2197,33 @@
     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)}
   }
-  /* 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
@@ -2092,6 +2231,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}
@@ -2264,6 +2410,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">
@@ -2298,11 +2445,17 @@
     </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="lanegrip" id="fsGrip" title="Drag to resize"></div>
       <div class="lanebody">
         <div id="fsRevSec"></div>
         <div id="fsTodoSec"></div>
+        <div id="fsBoard"></div>
       </div>
     </div>
   </div>
@@ -2479,6 +2632,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
@@ -2545,11 +2713,18 @@ const STATUS_LABEL = {
 // chip too; omitting it reproduces the original hardcoded labels. `startedAt`
 // (goal.startedAt) disambiguates 'running': planning finishes with every
 // task still 'queued', so it reads QUEUED until startedAt is set, then DOING.
+// Mirrors engine/lib.mjs goalChip() — this inline script can't import that
+// module. Had drifted out of sync (missing 'retesting'/'reverted'/'folded',
+// all silently falling to FAIL) until Masa caught a reverted goal reading as
+// FAIL (2026-07-17); keep this in lockstep with goalChip() by hand.
 const GOAL_CHIP = (s, columns, startedAt) => s === 'stacked' || s === 'sending' ? [pickColumnLabel(columns, 'todo', 'QUEUED'), ''] :
   s === 'running' && !startedAt ? [pickColumnLabel(columns, 'todo', 'QUEUED'), ''] :
   ['planning', 'running'].includes(s) ? [pickColumnLabel(columns, 'doing', 'DOING'), 'doing'] :
   s === 'review' ? [pickColumnLabel(columns, 'review', 'REVIEW'), 'review'] :
   s === 'done' ? [pickColumnLabel(columns, 'done', 'DONE'), ''] :
+  s === 'retesting' ? ['RE-TESTING', 'doing'] :
+  s === 'reverted' ? ['REVERTED', ''] :
+  s === 'folded' ? ['FOLDED', ''] :
   s === 'blocked' ? ['BLOCKED', 'blocked'] : s === 'needsInput' ? ['NEEDS INPUT', 'blocked'] : ['FAIL', ''];
 const FINISHED = (s) => ['done', 'partial', 'failed', 'interrupted'].includes(s);
 const ICONS = {
@@ -2703,6 +2878,16 @@ function reviewCardConfigFor(projectId){ return { ...DEFAULT_REVIEW_DEFINITION.r
 // goal's own request language, same as the planner/worker; ja/en pin the
 // project to one language regardless of what a given goal was typed in.
 function reviewLangFor(projectId){ const l = reviewDefinitionFor(projectId).language; return (l === 'en' || l === 'ja') ? l : 'auto'; }
+// PRD §6.5 fold note language (Masa 2026-07-17: "ユーザーの言語に合わせて" — not
+// hardcoded English). Mirrors the server's own 'auto' resolution exactly
+// (reviewDefinition.language === 'auto' ? detectRequestLanguage(goal.text) : ...,
+// engine/server.mjs) so this note reads in the same language as the review
+// headline/PR body for the same goal: the project's fixed override wins if set,
+// otherwise match the language the goal's own request was written in.
+function foldLangFor(goal){
+  const l = reviewLangFor(state.active);
+  return (l === 'ja' || l === 'en') ? l : (/[぀-ヿ㐀-鿿]/.test(goal?.text || '') ? 'ja' : 'en');
+}
 
 function esc(s){ const d = document.createElement('div'); d.textContent = s ?? ''; return d.innerHTML; }
 
@@ -3609,7 +3794,16 @@ function renderTasks(){
     // Feedback 3: the row carries only the check-line + PR link. Tests/proof are
     // internal gate checks (they still block), NOT list clutter; the Review number
     // is redundant with the title; tapping the row opens the detail (no button).
+    // PRD §6.5: goals that landed on the same files were folded onto this one, so
+    // they ride this PR instead of opening a second one editing the same lines.
+    // Whoever opens this review must know it answers more than one request.
+    // Only rendered when it actually happened (§1.5 art.3 — no empty container).
+    const carried = pgoals.filter((x) => x.foldedInto === g.id);
+    const carryNote = carried.length ? (foldLangFor(g) === 'ja'
+      ? `+ ${carried.map((x) => `#${x.id}`).join(', ')} の仕事もここに入っています`
+      : `also carries ${carried.map((x) => `#${x.id}`).join(', ')}`) : '';
     return `<div class="task revrow" data-goal="${g.id}"><div class="ic pending"></div><div class="tx"><div class="name">${esc(checkLine)} ${goalSourceBadge(g.source)}</div>
+     ${carryNote ? `<div class="cond carries">${carryNote}</div>` : ''}
      <div class="cond">${g.pr ? `<a class="prbig" href="${esc(g.pr)}" target="_blank">PR #${esc((g.pr.match(/pull\/(\d+)/) ?? [,''])[1])} ↗</a>` : ''}</div>
      <div class="qreplyrow" data-qreplyrow="${g.id}"${state.qreplyOpen.has(g.id) ? '' : ' hidden'}><input type="text" data-qreplyinput="${g.id}" placeholder="直したい点を書いて送信（Todoに戻して再作業）"><button type="button" class="qreplysend" data-qreplysend="${g.id}" aria-label="Send">${ICONS.up}</button></div></div>
      <div class="revquick">
@@ -3619,6 +3813,16 @@ function renderTasks(){
      </div></div>`;
   }).join('')
     + (reviewGoalsAll.length > REVIEW_LIMIT ? `<div class="more" data-reviewmore="1">${state.showAllReview ? 'show less' : `more · +${reviewGoalsAll.length - REVIEW_LIMIT}`}</div>` : '');
+  // PRD §3.5: a folded goal is never deleted — deleting it just moves the question
+  // from "why is my finished work stuck" to "where did #13 go". It keeps its row and
+  // says where its work went. Not a failure: no red, no painted surface (§1.5 art.8);
+  // no ✓/✕ either, because the thing to approve lives on the goal it was folded into.
+  const foldedRows = pgoals.filter((g) => g.status === 'folded').map((g) => {
+    const checkLine = (g.reviewSummary?.check || g.plan?.[0] || g.text || '').replace(/\s+/g, ' ').slice(0, 66);
+    const mergedNote = foldLangFor(g) === 'ja' ? `→ #${esc(String(g.foldedInto))} にまとめました` : `merged into #${esc(String(g.foldedInto))}`;
+    return `<div class="task revrow foldrow" data-goal="${g.id}"><div class="ic pending"></div><div class="tx"><div class="name">${esc(checkLine)} ${goalSourceBadge(g.source)}</div>
+     <div class="cond">${mergedNote}</div></div></div>`;
+  }).join('');
   const doneRows = grouped(list.filter((t) => ['done', 'skipped'].includes(t.status)).sort((a, b) => b.num - a.num), (t) => row(t));
   // Pending = deliberately shelved goals (e.g. "npm公開はPhase 2"): never
   // planned or queued until Start is pressed. Parked below To do on purpose.
@@ -3630,7 +3834,7 @@ function renderTasks(){
   const savedQAns = captureFocusedAnswerInput($('tasklist'), 'data-qansinput');
   $('tasklist').innerHTML =
     sec('Attention', attention, 'attn')
-    + sec(pickColumnLabel(cols, 'review', 'Review'), reviewDigest + review, 'reviewsec', reviewDefinitionFor(state.active).description, REVIEW_DEF_HINT)
+    + sec(pickColumnLabel(cols, 'review', 'Review'), reviewDigest + review + foldedRows, 'reviewsec', reviewDefinitionFor(state.active).description, REVIEW_DEF_HINT)
     + sec(pickColumnLabel(cols, 'doing', 'Doing'), doing)
     + sec(pickColumnLabel(cols, 'todo', 'To do'), todo, 'todosec')
     + sec('Pending', pendingRows, 'dim')
@@ -3673,9 +3877,16 @@ function renderTasks(){
           || e.target.closest('.revquick') || e.target.closest('.qreplyrow')) return;
       const goalId = Number(el.dataset.goal);
       const goal = state.goals.find((g) => g.id === goalId);
-      goToGoalInChat(goalId);
-      if (goal?.status === 'review') openReviewChecklist(goalId);
-      else openGoalDetail(goalId);
+      // A folded goal has nothing of its own to open — its work is in the goal it
+      // was folded into. Send the click there. The target briefly goes back to
+      // 'running' while it re-runs this goal's request, so resolve what to open
+      // from the target's own status rather than assuming it is still in Review.
+      const opened = goal?.status === 'folded' && goal.foldedInto != null
+        ? state.goals.find((x) => x.id === goal.foldedInto) ?? goal
+        : goal;
+      goToGoalInChat(opened.id);
+      if (opened.status === 'review') openReviewChecklist(opened.id);
+      else openGoalDetail(opened.id);
     });
   }
   for (const b of $('tasklist').querySelectorAll('.reqopen')) {
@@ -4838,6 +5049,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
 };
@@ -5124,6 +5336,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;
@@ -5131,7 +5347,86 @@ 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 (s === 'review') return 'review';
+  if (s === 'done' || s === 'reverted') return 'done';          // both terminal; REVERTED is not "in flight"
+  if (s === 'stacked' || s === 'sending') return 'todo';
+  if (s === 'running' && !goal.startedAt) return 'todo';        // goalChip: planned, nothing started yet
+  return 'doing';                                               // planning/running/retesting/blocked/failed — still in flight
+}
+// 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, running } = fsBucketTodo();
+  const tt = (s, n) => esc(String(s ?? '').replace(/\s+/g, ' ').slice(0, n ?? 60));
+  const goalNo = new Map();
+  for (const g of pgoals) { const n = goalReviewNumber({ goal: g, tasks: list }); if (n != null) goalNo.set(g.id, n); }
+  const noSpan = (goalId) => { const n = goalId != null ? goalNo.get(goalId) : null; return n != null ? `<span class="gno" data-n="${n}">#${n}</span>` : ''; };
+  const card = (stCls, goalId, title, extra) =>
+    `<div class="fsbrow"><span class="st ${stCls}"></span>${noSpan(goalId)}<span class="tt">${tt(title)}</span>${extra ?? ''}</div>`;
+  const col = (name, stg, count, html) =>
+    `<section class="fsbcol" style="--stg:${stg}"><div class="fsbcolhd"><span class="fsbdot"></span><span class="fsbcolnm">${name}</span><span class="fsbcnt">${count}</span></div><div class="fsbbody">${html || '<div class="fsbempty">—</div>'}</div></section>`;
+  // The status dot keeps the meaning it had on task cards, read off the goal instead.
+  // Everything in Doing that isn't healthily in flight reads as an error, the way
+  // goalChip() calls them all FAIL — 'partial' (ran, but some tasks failed) included,
+  // or a half-failed goal would sit in Doing wearing a healthy green dot.
+  const dotFor = (g) => g.status === 'needsInput' ? 'run int'
+    : g.status === 'review' ? 'rev'
+    : (g.status === 'done' || g.status === 'reverted') ? 'ok'
+    : fsBoardBucket(g) !== 'doing' ? ''
+    : ['stacked', 'sending', 'planning', 'running', 'retesting'].includes(g.status) ? 'run'
+    : 'run bad'; // blocked / failed / partial / interrupted
+  // % is the RUNNING TASK's progress — the same number the old task cards showed, now
+  // carried by the goal it belongs to. What a card should really say about a goal split
+  // into several tasks (n/m done? the step's name? proof?) is a design question, and it
+  // is deliberately not invented here.
+  const pctFor = (g) => {
+    const t = running.find((r) => r.goalId === g.id);
+    return t ? `<span class="pct num">${progressFor(t)}%</span>` : '';
+  };
+  // The label is the goal's OWN request text, not plan[0] — showing the plan here just
+  // repeats the first task's title, which renderTasks() already learned the hard way
+  // (Masa: "このグレー文字ってなに?").
+  const goalCard = (g) => card(dotFor(g), g.id, g.text || g.plan?.[0], pctFor(g));
+  const no = (g) => goalNo.get(g.id) ?? Infinity;
+  const bucket = { todo: [], doing: [], needs: [], review: [], done: [], later: [] };
+  for (const g of pgoals) bucket[fsBoardBucket(g)].push(g);
+  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(''))
+    + col('Doing', 'var(--green)', bucket.doing.length, bucket.doing.map(goalCard).join(''))
+    + (bucket.needs.length ? col('Needs you', 'var(--blue)', bucket.needs.length, bucket.needs.map(goalCard).join('')) : '')
+    + col('Review', 'var(--blue)', bucket.review.length, bucket.review.map(goalCard).join(''))
+    + col('Done', 'var(--green)', bucket.done.length, bucket.done.slice(0, 40).map(goalCard).join(''))
+    + col('Later', 'var(--ink3)', bucket.later.length, bucket.later.map(goalCard).join(''));
 }
 // 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.
@@ -5140,11 +5435,18 @@ function renderFsReview(){
   const pgoals = state.goals.filter((g) => g.projectId === state.active);
   const list = state.tasks.filter((t) => t.projectId === state.active);
   const rows = buildReviewDigest({ goals: pgoals, tasks: list });
-  if (!rows.length) { el.innerHTML = ''; return; } // §1.5-3: no reviews → the UI itself does not exist
+  // PRD §3.5/§6.5: folded goals still have a row — they were never deleted, their work
+  // just went somewhere else. They must be able to hold this section up ALONE: the goal
+  // they were folded into flips back to 'running' while it re-runs their request, so
+  // there is a window where `rows` is empty and only the folded ones remain. Returning
+  // early there would make #13 vanish for the length of the re-run — exactly the "where
+  // did my finished work go" this feature exists to prevent.
+  const foldedGoals = pgoals.filter((g) => g.status === 'folded');
+  if (!rows.length && !foldedGoals.length) { el.innerHTML = ''; return; } // §1.5-3: no reviews → the UI itself does not exist
   const green = rows.filter((r) => !r.testResult || r.testResult.ok !== false).length;
   const proofN = rows.filter((r) => r.proof).length;
   const blockedN = pgoals.filter((g) => g.status === 'blocked').length;
-  const pct = Math.round((green / rows.length) * 100);
+  const pct = rows.length ? Math.round((green / rows.length) * 100) : 0;
   // CDO review 2026-07-08 §6: same fix as the s5sum digest above — green/rows.length
   // already exclude blocked goals (different status, never enters `rows`), so the
   // ratio was already correct; "all green" is the line that used to fire regardless
@@ -5170,26 +5472,49 @@ function renderFsReview(){
     // retest ×3 note (v45 §5.3): the goal came back green from a Ledger Dismiss
     const g0 = pgoals.find((g) => g.id === r.goalIds[0]);
     const rnote = g0?.retest?.passed ? `<span class="rnote">✓ ${esc(g0.retest.note)}</span>` : '';
-    return `<div class="rcard${img ? '' : ' noimg'}" data-fsrev="${r.goalIds[0]}">${img}<div class="rc"><div class="t">${rid}${esc(r.checkLine)}</div>${rnote}${pr}</div>
+    // PRD §6.5: goals that landed on the same files ride this card's PR instead of
+    // opening a second one that edits the same lines. Whoever opens this review has
+    // to know it answers more than one request. Only when it happened (§1.5-3).
+    const carried = pgoals.filter((x) => r.goalIds.includes(x.foldedInto));
+    const cnote = carried.length ? `<span class="fnote">${foldLangFor(g0) === 'ja'
+      ? `+ ${carried.map((x) => `#${x.id}`).join(', ')} の仕事もここに入っています`
+      : `also carries ${carried.map((x) => `#${x.id}`).join(', ')}`}</span>` : '';
+    return `<div class="rcard${img ? '' : ' noimg'}" data-fsrev="${r.goalIds[0]}">${img}<div class="rc"><div class="t">${rid}${esc(r.checkLine)}</div>${rnote}${cnote}${pr}</div>
       <div class="act"><button class="b" data-fsapprove="${ids}" title="Approve">✓</button><button class="b no" data-fsdismiss="${ids}" title="Send back">✕</button></div></div>`;
   };
+  // A folded goal is settled, not failed: no ✓/✕ (the thing to approve lives on the goal
+  // it was folded into), no red, no painted surface (§1.5-8) — just its own number, what
+  // it asked for, and where the work went. Tapping it opens that goal (§1.5-9 wording).
+  const foldCard = (g) => {
+    const line = String(g.reviewSummary?.check || g.plan?.[0] || g.text || '').replace(/\s+/g, ' ').slice(0, 60);
+    const mergedNote = foldLangFor(g) === 'ja' ? `→ #${esc(String(g.foldedInto))} にまとめました` : `merged into #${esc(String(g.foldedInto))}`;
+    return `<div class="rcard noimg fold" data-fsfold="${g.id}">
+      <div class="rc"><div class="t"><span class="rid gno" data-n="${g.id}">#${g.id}</span>${esc(line)}</div>
+      <span class="fnote">${mergedNote}</span></div></div>`;
+  };
   // V3-C (Masa決定 2026-07-07): no collapsed strip — it duplicated the sm2 meter right
   // above. Reviews render directly: meter + Review header + cards (+N more fold, §1.5-8).
-  el.innerHTML = `<div class="sm2">
+  // The meter counts what is reviewable, so it only exists when something is (§1.5-3):
+  // during the re-run window the section can be folded-rows-only, and "0 / 0 ready" is
+  // a claim about nothing.
+  el.innerHTML = `${rows.length ? `<div class="sm2">
       <div class="m-top"><span class="num mt">${green} / ${rows.length}</span><span> ready</span><button class="detailbtn" id="fsSeeAll">See all</button></div>
       <div class="m-bar"><i style="width:${pct}%"></i></div>
-      <div class="s">${esc(sline)}</div></div>
+      <div class="s">${esc(sline)}</div></div>` : ''}
     <div class="revhd" id="fsRevHd"><span class="hd">Review</span><span class="rnum num">${green} ready</span>
       <span class="rvbtns">
         <button class="rvb${fsUI.rv === 3 ? ' on' : ''}" data-fsrv="3" title="Thumbnails"><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>
         <button class="rvb${fsUI.rv === 1 ? ' on' : ''}" data-fsrv="1" title="List"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="7" height="7" rx="1.5"/><path d="M13 6h8M13 9h5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><path d="M13 16h8M13 19h5"/></svg></button>
         <button class="rvb${fsUI.rv === 2 ? ' on' : ''}" data-fsrv="2" title="Compact"><svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg></button>
       </span></div>
-    <div class="revlist">${shown.map(card).join('')}
+    <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>`;
   // See all = the Ledger dialog (HANDOFF-v45 §5, replacing the ペライチ);
   // Cmd/Ctrl+click = standalone full-page view in a new tab (#seeall route).
-  $('fsSeeAll').onclick = (e) => { e.stopPropagation();
+  // guarded: the meter (and with it See all) is absent while the section holds only
+  // folded rows — see the §1.5-3 note above.
+  const seeAll = $('fsSeeAll');
+  if (seeAll) seeAll.onclick = (e) => { e.stopPropagation();
     if (e.metaKey || e.ctrlKey) { window.open(saStandaloneUrl(), '_blank'); return; }
     saOpen(); };
   const moreEl = el.querySelector('#fsRevMore');
@@ -5200,6 +5525,19 @@ function renderFsReview(){
     if (e.target.closest('a') || e.target.closest('.act')) return;
     openReviewChecklist(Number(c.dataset.fsrev));
   };
+  // A folded goal has nothing of its own to review — its work is in the goal it was
+  // folded into, so the tap goes there. That goal is only in Review once its re-run
+  // finishes, so resolve from its live status instead of assuming (openReviewChecklist
+  // on a running goal would present an empty checklist).
+  for (const c of el.querySelectorAll('[data-fsfold]')) c.onclick = (e) => {
+    if (e.target.closest('a')) return;
+    const g = state.goals.find((x) => x.id === Number(c.dataset.fsfold));
+    const target = state.goals.find((x) => x.id === g?.foldedInto);
+    if (!target) return;
+    goToGoalInChat(target.id);
+    if (target.status === 'review') openReviewChecklist(target.id);
+    else openGoalDetail(target.id);
+  };
   for (const b of el.querySelectorAll('[data-fsapprove]')) b.onclick = async (e) => { e.stopPropagation();
     let r; for (const id of b.dataset.fsapprove.split(',')) r = await fetch(withKey(`/api/goals/${id}/approve`), { method: 'POST' });
     if (r && r.ok) { celebrateApprove(); await refresh(); } else showErr('Approve failed.'); };
@@ -5208,26 +5546,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.
@@ -5284,7 +5632,18 @@ 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}` : ''}
@@ -5407,6 +5766,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);
@@ -5414,8 +5776,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({
@@ -5603,6 +5979,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'); });
@@ -5653,17 +6039,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)
@@ -5684,6 +6096,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'); });
@@ -5736,39 +6194,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
@@ -5820,27 +6325,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).
@@ -6061,12 +6584,13 @@ function bootDisconnected(info){
     #connectGate .cg-switch a{color:var(--blue,#8fb0ff);text-decoration:none}
     /* A long wait (15s+) almost always means an account mismatch, not a slow
        first connect (Masa 2026-07-17: kept re-running npx, kept landing back
-       here — the always-on caption below was too easy to miss). Escalate to
-       the existing warning tone (--amber, same as failed-step/review chips)
-       — color only, no filled box, per the hover/attention convention used
-       everywhere else in this app. */
-    #connectGate .cg-switch.escalated{color:var(--amber);font-weight:600}
-    #connectGate .cg-switch.escalated a{color:var(--amber);text-decoration:underline}
+       here — the always-on caption below was too easy to miss). At this point
+       the board is unusable until the user acts, so this reads as an error
+       state, not a caution — --danger, same tone as failed steps/review chips
+       (Masa 2026-07-17: escalated hint should be red, not amber) — color only,
+       no filled box, per the hover/attention convention used everywhere else. */
+    #connectGate .cg-switch.escalated{color:var(--danger);font-weight:600}
+    #connectGate .cg-switch.escalated a{color:var(--danger);text-decoration:underline}
     #connectGate .cg-x{position:absolute;top:14px;right:16px;width:28px;height:28px;border:0;background:transparent;color:var(--ink3,#6b6862);font-size:20px;line-height:1;cursor:pointer}
     #connectGate .cg-wait{display:inline-flex;align-items:center;gap:7px;font:500 10.5px/1 var(--mono,monospace);letter-spacing:.08em;color:var(--ink3,#6b6862);margin-top:16px}
     #connectGate .cg-wait i{width:6px;height:6px;border-radius:50%;background:var(--green,#3DDC97);animation:cgpulse 1.8s ease-in-out infinite}
@@ -6088,7 +6612,7 @@ function bootDisconnected(info){
     + '<a href="https://openai.com/codex/" target="_blank" rel="noreferrer">Codex</a>, then run the same command '
     + '— Galda uses whichever agent you have.</p>'
     + '<p class="cg-who">Signed in as <b></b></p>'
-    + '<p class="cg-switch">Already running Galda under a different account? Run <code>npx @galda/cli --signin</code> and pick this one. Or <a href="/logout">switch this browser →</a></p>'
+    + '<p class="cg-switch">Already running Galda under a different account? Run <code>npx @galda/cli --signin</code> and pick this one. Or <a href="/logout">switch Google account →</a></p>'
     + '<div class="cg-wait"><i></i>WAITING FOR THIS DEVICE</div></div>';
   document.body.appendChild(ov);
   ov.querySelector('.cg-who b').textContent = email || 'your account';
@@ -6131,7 +6655,7 @@ function bootDisconnected(info){
   const CG_ESCALATE_MS = 15000;
   const escalateTimer = (email && cgSwitch) ? setTimeout(() => {
     cgSwitch.classList.add('escalated');
-    cgSwitch.innerHTML = `Still waiting? Galda may already be running on this computer under a <b>different account</b> than <b>${email.replace(/[<>&]/g, (c) => ({ '<': '&lt;', '>': '&gt;', '&': '&amp;' }[c]))}</b>. Run <code>npx @galda/cli --signin</code> in that terminal and pick this account. Or <a href="/logout">switch this browser →</a>`;
+    cgSwitch.innerHTML = `Still waiting? Galda may already be running on this computer under a <b>different account</b> than <b>${email.replace(/[<>&]/g, (c) => ({ '<': '&lt;', '>': '&gt;', '&': '&amp;' }[c]))}</b>. Run <code>npx @galda/cli --signin</code> in that terminal and pick this account. Or <a href="/logout">switch Google account →</a>`;
   }, CG_ESCALATE_MS) : null;
   try {
     const es = new EventSource('/presence');
@@ -6211,6 +6735,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,
@@ -7181,6 +7709,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) {
@@ -7879,24 +8411,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>
@@ -7945,7 +8478,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]');