@promptctl/cc-candybar 1.8.2 → 1.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promptctl/cc-candybar",
-  "version": "1.8.2",
+  "version": "1.8.4",
   "description": "Statusline renderer for Claude Code — a JSON5-configurable DSL with daemon-cached data sources, byte-clean palette-aware composition, and OSC8 click verbs.",
   "type": "module",
   "main": "./dist/index.mjs",
@@ -91,10 +91,10 @@
     "mobx": "^6.15.0"
   },
   "optionalDependencies": {
-    "@promptctl/cc-candybar-darwin-arm64": "1.8.2",
-    "@promptctl/cc-candybar-darwin-x64": "1.8.2",
-    "@promptctl/cc-candybar-linux-x64": "1.8.2",
-    "@promptctl/cc-candybar-linux-arm64": "1.8.2"
+    "@promptctl/cc-candybar-darwin-arm64": "1.8.4",
+    "@promptctl/cc-candybar-darwin-x64": "1.8.4",
+    "@promptctl/cc-candybar-linux-x64": "1.8.4",
+    "@promptctl/cc-candybar-linux-arm64": "1.8.4"
   },
   "pnpm": {
     "supportedArchitectures": {

package/src/config/default-dsl-config.ts

@@ -496,10 +496,12 @@ export const DEFAULT_DSL_CONFIG = {
     // and the render's read are one value. Empty default ⇒ the daemon's
     // "powerline" floor is in effect and styleControl shows "(default)".
     activeStyle: { kind: "state", key: "style", default: "" },
-    // The style menu's page cursor: −1 closed / 0..N open, mirroring how a theme
-    // picker's page key gates its reveal row. The stylePage action declares the
-    // int gate; this var reads it back for the reveal `when`.
-    stylePage: { kind: "state", key: "style-page", default: "-1" },
+    // The style picker's page index. Open/closed is the synthesized menus.* key
+    // the styleControl's {{ menu }} owns — NOT this var, which is purely the page
+    // the picker paginates by (default page 0; the disclosure resets it to 0 on
+    // every toggle, so a reopened menu never lands on a stale page). The stylePage
+    // action below declares the int gate this var reads back.
+    stylePage: { kind: "state", key: "style-page", default: "0" },
   },
 
   // ─── Segments ──────────────────────────────────────────────────────────────
@@ -736,26 +738,22 @@ export const DEFAULT_DSL_CONFIG = {
         " .metrics.sessionDuration .metrics.messageCount" +
         " .metrics.linesAdded .metrics.linesRemoved }}",
     },
-    // Style control — the powerline-shape switcher's trigger. [LAW:locality-or-
-    // seam] The ✦ glyph + current-style label is the REPRESENTATION; the
-    // `openStyleMenu` action is the BEHAVIOR; the name is the seam. Shows the
-    // active shape (or "(default)" when unset) and a ▸ that opens the picker
-    // row. [LAW:dataflow-not-control-flow] No display state from the provider —
-    // the label is the one "style" value the click writes and the render reads.
+    // Style control — the powerline-shape switcher. A self-contained {{ menu }}
+    // disclosure: the ✦ glyph + current-style label is the REPRESENTATION, and the
+    // ▸/▾ disclosure (whose identity is DERIVED from this segment + the applyStyle
+    // action, see menu-keys.ts) toggles the picker body, which DROPS full-width
+    // onto the line below this row when open. [LAW:one-type-per-behavior] "a menu
+    // that opens and closes" is one behavior the substrate already expresses — no
+    // bespoke open-action + page-cursor-as-open-state + when-gated reveal row.
+    // paged omitted ⇒ false ⇒ one full-width page (the 3 powerline shapes are a
+    // small domain; FlexStrip soft-wraps if needed). closeOnPick omitted ⇒ false
+    // ⇒ stay-open, so shapes can be tried in a row; the ▾ collapses.
+    // [LAW:dataflow-not-control-flow] No display state from the provider — the
+    // label is the one "style" value the click writes and the render reads.
     styleControl: {
       template:
         "✦ {{ if .activeStyle }}{{ .activeStyle }}{{ else }}(default){{ end }} " +
-        '{{ action "openStyleMenu" "▸" }}',
-      bg: "surface",
-      fg: "foreground",
-    },
-    // The expanded style picker: one full-width page (paged=false) over the
-    // `applyStyle` option domain — the 3 powerline shapes. closeOnPick defaults
-    // false (omitted here), so a pick reshapes the bar live and LEAVES THE ROW
-    // OPEN — shapes can be tried in a row; the ✕ affordance closes. The active
-    // shape is marked by the picker helper.
-    stylePicker: {
-      template: '{{ picker "applyStyle" "stylePage" }}',
+        '{{ menu "applyStyle" "stylePage" }}',
       bg: "surface",
       fg: "foreground",
     },
@@ -764,10 +762,11 @@ export const DEFAULT_DSL_CONFIG = {
   // Default layout — the canonical LayoutNode tree (`satisfies DslConfig`
   // requires the lowered form here; the terse Option-A `{ h/v/seg }` grammar is
   // the loader's authoring surface for user JSON, not this typed literal).
-  // [LAW:dataflow-not-control-flow] Two rows: an always-on control row, and a
-  // picker reveal row that EXISTS only while the style menu cursor is ≥ 0 — the
-  // row's presence is a value test on stylePage, not a branch in render code.
-  // The picker itself draws the ✕/←/→ affordances from the page + term width.
+  // [LAW:dataflow-not-control-flow] One always-on control row. The styleControl's
+  // {{ menu }} disclosure drops its picker body onto the line directly below this
+  // row when open — openness is the value of the derived menus.* key, NOT a when-
+  // gated reveal row. The picker draws the ✕/←/→ affordances from the page + term
+  // width; the vertical container stacks the dropped body under row 0.
   root: {
     kind: "container",
     direction: "vertical",
@@ -786,11 +785,6 @@ export const DEFAULT_DSL_CONFIG = {
           { kind: "segment", name: "styleControl" },
         ],
       },
-      {
-        kind: "segment",
-        name: "stylePicker",
-        when: "{{ ge (int .stylePage) 0 }}",
-      },
     ],
   },
 
@@ -814,14 +808,16 @@ export const DEFAULT_DSL_CONFIG = {
     openProject: { open: "{{ .project_dir }}" },
     openTranscript: { open: "{{ .transcript_path }}" },
 
-    // [LAW:locality-or-seam] The style picker's behaviors, decoupled by NAME
-    // from styleControl/stylePicker above. Three declarations, all gated by
-    // derivation (deriveActionValidators): openStyleMenu/stylePage write the
-    // page cursor (a literal page-open subsumed by the int gate); applyStyle
-    // writes the chosen shape, gated to the STRIP_STYLES allow-list because its
-    // value source is `from: "styles"`. The rendered click and the wire gate
-    // share that one source — a template cannot smuggle an un-gated style write.
-    openStyleMenu: { set: "style-page", to: "0" },
+    // [LAW:locality-or-seam] The style menu's behaviors, decoupled by NAME from the
+    // styleControl {{ menu }} above. The disclosure's open-state toggle + its
+    // backing state var are SYNTHESIZED by the menu pass (under the reserved
+    // menus.* namespace) — no hand-authored open/close action. These two are the
+    // picker body's effects, both gated by derivation (deriveActionValidators):
+    // applyStyle writes the chosen shape, gated to the STRIP_STYLES allow-list
+    // because its value source is `from: "styles"`; stylePage is the page cursor's
+    // unbounded int gate (←/→ navigation + the disclosure's page-0 reset). The
+    // rendered click and the wire gate share that one source — a template cannot
+    // smuggle an un-gated style write.
     applyStyle: { set: "style", from: "styles" },
     stylePage: { set: "style-page", int: true },
   },

package/src/dsl/render.ts

@@ -282,6 +282,10 @@ export function registerDslConfig(
   const actionRuntime: ActionRuntime = {
     store: registry.variableStore,
     compiled: new Map(),
+    // [LAW:types-are-the-program] Always present — renderDsl republishes the live
+    // style each render; "powerline" is the registration-time default so a
+    // compile-only path (no render) still has a valid value.
+    stripStyle: "powerline",
   };
   // [LAW:one-way-deps] Inject action + picker feature funcs as data — the engine
   // stays generic. The picker shares the ACTION runtime (it resolves its
@@ -517,11 +521,22 @@ export function renderDsl(
   perSegmentSink?: Map<string, readonly RichText[]>,
 ): string {
   // [LAW:one-source-of-truth] Inject the usable width as `term.cols` from the
-  // SAME opts.width the strip wraps to (below), so a width-paginated widget
-  // reads the exact wrap width — never a cached or independently-measured copy.
+  // SAME opts.width the strip wraps to (below), so a width-paginated widget reads
+  // the exact wrap width — never a cached or independently-measured copy. This is
+  // the RAW usable width (terminal cols minus the Claude-Code reserve), the honest
+  // meaning every template — incl. user configs reading `.term.cols` — expects.
+  // The picker's strip-chrome reservation is NOT folded in here: that is a
+  // picker-local concern (the strip's end-caps wrap the picker's row, not every
+  // segment), applied at the pagination seam in renderPicker. [LAW:locality-or-seam]
   // Spreading a non-object payload yields no keys (compile-only callers), so the
   // width is set regardless without a trust-boundary guard.
   registry.applyInput({ ...(payload as object), term: { cols: opts.width } });
+  // [LAW:single-enforcer] Publish the render's strip style onto the shared action
+  // runtime so the picker can reserve the joiner's end-cap chrome at its
+  // pagination seam (the menu body renders through the same renderPicker). Set
+  // once per render here — the same one-owner, per-render-mutation idiom as the
+  // menu placement cursor below. [LAW:no-ambient-temporal-coupling]
+  compiled.menuRuntime.action.stripStyle = opts.style;
 
   const scope = buildScope(store);
   // [LAW:one-source-of-truth] hueStep is a value in the store like every other

package/src/render/action.ts

@@ -26,7 +26,11 @@ import type { VariableStore } from "../var-system/store.js";
 import { toString as varToString } from "../var-system/types.js";
 import { buildScope } from "../template-engine/scope.js";
 import type { ActionDecl, OptionSource } from "../config/action.js";
-import { listResolvablePaletteNames, STRIP_STYLES } from "../themes/policy.js";
+import {
+  listResolvablePaletteNames,
+  STRIP_STYLES,
+  type StripStyle,
+} from "../themes/policy.js";
 import {
   effectsUrl,
   VERB_COPY,
@@ -123,6 +127,13 @@ export interface ActionRuntime {
   // values from the same store the renderer reads.
   store: VariableStore;
   compiled: CompiledActions;
+  // [LAW:locality-or-seam] The current render's strip style, published per render
+  // by renderDsl. The picker reads it to reserve the joiner's end-cap chrome at
+  // its pagination seam — the one place that needs strip geometry, kept off the
+  // shared `term.cols` budget. Defaulted at registration; renders are sequential
+  // and synchronous, so the per-render write never leaks across renders.
+  // [LAW:no-ambient-temporal-coupling]
+  stripStyle: StripStyle;
 }
 
 // ─── Compilation ───────────────────────────────────────────────────────────────

package/src/render/menu.ts

@@ -1,10 +1,10 @@
 // [LAW:locality-or-seam] The runtime half of the `{{ menu }}` seam — sibling to
 // `{{ action }}`/`{{ picker }}`. A menu is a self-contained disclosure: an inline
 // glyph that toggles open/closed, and (when open) its body — a picker grid —
-// that DROPS onto the line(s) below the enclosing row. It composes the two
-// existing helpers, adding only the disclosure: the glyph is realized through the
-// synthesized cycle action (`renderAction`), the body through the one picker
-// renderer (`renderPicker`).
+// that DROPS onto the line(s) below the enclosing row. The body is the one picker
+// renderer (`renderPicker`); the glyph is a coupled set-state the menu composes
+// directly (like the picker's closeOnPick) — it toggles the open-state AND resets
+// the page cursor in one atomic batch, gated by the synthesized cycle action.
 //
 // [LAW:effects-at-boundaries] The helper is a PURE function of its inputs (the
 // walk-published placement + the live store): it computes the inline glyph and,
@@ -36,13 +36,14 @@
 import type { RichText } from "@promptctl/rich-js";
 import type { FuncMap } from "@promptctl/go-template-js";
 import {
+  MENU_CLOSED,
   MENU_GLYPH_CLOSED,
   MENU_GLYPH_OPEN,
-  menuActionName,
   menuMember,
   menuStateKey,
 } from "../config/menu-keys.js";
-import { readVar, renderAction, type ActionRuntime } from "./action.js";
+import { effectsUrl, VERB_SET_STATE } from "../click/wire.js";
+import { linkFragment, readVar, type ActionRuntime } from "./action.js";
 import { renderPicker } from "./picker.js";
 
 // [LAW:types-are-the-program] One menu placement: the structural fact a context-
@@ -82,6 +83,22 @@ export function collectMenuDrops(
   return fragments.flatMap((f) => (f as GlyphWithDrop)[MENU_DROP] ?? []);
 }
 
+// [LAW:single-enforcer] The page cursor's SessionState key, resolved from the page
+// ACTION name the menu binds (its second arg). renderPicker proves pageName is a
+// set-int when it builds the body, but the disclosure must reset the page even
+// while CLOSED (no body is built then), so it resolves the key here too — the SAME
+// set-int action, one source. A non-int page arg is an author error surfaced
+// loudly (composeWithDiagnostics shows it), never a silent skipped reset.
+function pageKeyOf(action: ActionRuntime, pageName: string): string {
+  const page = action.compiled.get(pageName);
+  if (!page || page.kind !== "set-int") {
+    throw new Error(
+      `{{ menu }} page action "${pageName}" must be an int action ({ set, int: true })`,
+    );
+  }
+  return page.key;
+}
+
 // Realize a `{{ menu }}` against the live placement + state: return its inline
 // glyph, carrying the (open) body as out-of-band metadata for the boundary.
 function renderMenu(
@@ -106,25 +123,51 @@ function renderMenu(
   const stateKey = menuStateKey(placement.segName, applyName, sharedKey);
   const member = menuMember(applyName);
 
-  // [LAW:single-enforcer] The disclosure glyph IS the synthesized cycle action —
-  // displays bound one-per-member (closed ▸ / open ▾), the current member's glyph
-  // renders, the click writes the successor. Same toggle as group sugar.
-  const glyph = renderAction(
-    menuActionName(stateKey, member),
-    [MENU_GLYPH_CLOSED, MENU_GLYPH_OPEN],
-    action,
-  );
-
   // [LAW:dataflow-not-control-flow] Open ⇔ the state key holds this menu's member.
-  // The body is a VALUE whose length carries open/closed — `[body]` open, `[]`
-  // closed — attached to the glyph the helper returns. No shared mutation: the
-  // boundary reads this metadata to place the body. (renderPicker is pure, so it
-  // is only built when open — skipping wasted computation, gating no effect.)
+  // A foreign value (an accordion sibling's member under a shared key) reads as
+  // closed here — exactly the binary [closed, member] cycle the synthesized action
+  // gates. This ONE read drives both the glyph and the body, so what the glyph
+  // promises and what drops below cannot disagree.
   const open = readVar(action.store, stateKey) === member;
-  const bodyLines = open
+
+  // [LAW:one-source-of-truth] / [LAW:locality-or-seam] The disclosure click is ONE
+  // atomic set-state that keeps the two split keys coherent: it toggles the open-
+  // state (the binary cycle — successor is closed when open, the member when
+  // closed) AND resets the page cursor to page 0, in one batch. So a reopened menu
+  // is never stranded on a stale page left by ←/→ before the last close. This
+  // mirrors the picker's closeOnPick page-reset fold: the picker builds its set-
+  // state URLs directly (not via renderAction) so it can couple two writes; the
+  // menu — the one part that knows BOTH the open-state key and the page key
+  // [LAW:decomposition] — does the same. The synthesized cycle action stays the
+  // GATE source (deriveActionValidators); both keys are independently gated, so the
+  // coupled batch passes the same wire gate every click does [LAW:single-enforcer].
+  const sessionId = readVar(action.store, "session.id");
+  const successor = open ? MENU_CLOSED : member;
+  const glyph = linkFragment(
+    open ? MENU_GLYPH_OPEN : MENU_GLYPH_CLOSED,
+    effectsUrl([
+      {
+        verb: VERB_SET_STATE,
+        args: [
+          sessionId,
+          stateKey,
+          successor,
+          pageKeyOf(action, pageName),
+          "0",
+        ],
+      },
+    ]),
+    false,
+  ) as GlyphWithDrop;
+
+  // [LAW:effects-at-boundaries] The body is a VALUE whose length carries open/
+  // closed — `[body]` open, `[]` closed — attached to the glyph the helper returns.
+  // No shared mutation: the boundary reads this metadata to place the body.
+  // (renderPicker is pure, so it is only built when open — skipping wasted
+  // computation, gating no effect.)
+  glyph[MENU_DROP] = open
     ? [renderPicker(applyName, pageName, closeOnPick, paged, action)]
     : [];
-  (glyph as GlyphWithDrop)[MENU_DROP] = bodyLines;
   return glyph;
 }
 

package/src/render/picker.ts

@@ -26,6 +26,7 @@
 import { RichText } from "@promptctl/rich-js";
 import type { FuncMap } from "@promptctl/go-template-js";
 import { toNumber } from "../var-system/types.js";
+import { stripChromeCols } from "./strip.js";
 import { TERM_COLS_VAR } from "../config/dsl-types.js";
 import { effectsUrl, VERB_SET_STATE } from "../click/wire.js";
 import {
@@ -157,7 +158,23 @@ export function renderPicker(
   // unconditionally is self-fulfilling (a run that fits with just ✕ could be
   // forced to split, making arrows appear unnecessarily). In wrap mode
   // (available = Infinity) paginate yields one page, so neither pass splits.
-  const available = paged ? toNumber(store.read(TERM_COLS_VAR)) : Infinity;
+  //
+  // [LAW:locality-or-seam] term.cols is the raw usable width the strip wraps to;
+  // the picker's row is itself a styled strip segment, so the joiner brackets it
+  // with end-caps (powerline's trailing separator, capsule's two caps) painted
+  // OUTSIDE that width. A page packed to the full term.cols is pushed past it by
+  // the caps — the maximally-packed middle pages overflowed and the terminal ate
+  // the trailing → (page 0 fit, page N did not). Reserve the chrome HERE, at the
+  // pagination seam, rather than shrinking the shared term.cols every template
+  // reads. stripChromeCols owns the per-style geometry; Infinity − chrome stays
+  // Infinity, so wrap mode is unaffected.
+  const available = paged
+    ? Math.max(
+        1,
+        toNumber(store.read(TERM_COLS_VAR)) -
+          stripChromeCols(runtime.stripStyle),
+      )
+    : Infinity;
   const closeReserve = cellWidth(PICKER_CLOSE) + 1;
   const arrowReserve = cellWidth(PICKER_PREV) + 1 + cellWidth(PICKER_NEXT) + 1;
   const firstPass = paginate(widths, available, closeReserve);

package/src/render/strip.ts

@@ -61,6 +61,35 @@ function pickJoiner(style: StripStyle, separator?: string): Joiner {
   }
 }
 
+// [LAW:single-enforcer] Strip geometry has one owner — this module builds every
+// joiner (pickJoiner) and so alone knows the structural chrome a styled row costs
+// beyond its content: the joiner's end-caps, which FlexStrip paints OUTSIDE the
+// width budget. A single full-width row's content can occupy only `width - chrome`
+// before the caps push the line past `width`. Returned per style so a width-fit
+// widget (the picker) can reserve it and never overflow the wrapped line.
+//
+// [LAW:dataflow-not-control-flow] / [LAW:types-are-the-program] Total over
+// StripStyle — the `never` default makes adding a STRIP_STYLES member a compile
+// error here until its chrome is declared, the same guard pickJoiner carries. The
+// numbers are the default cap glyphs pickJoiner constructs: powerline appends ONE
+// trailing separator (U+E0B0, 1 col); capsule brackets BOTH edges (U+E0B6 +
+// U+E0B4, 2 cols); plain has no caps. test/picker-pagination.test.ts measures the
+// real rendered chrome against these so the declaration cannot drift from rich-js.
+export function stripChromeCols(style: StripStyle): number {
+  switch (style) {
+    case "powerline":
+      return 1;
+    case "capsule":
+      return 2;
+    case "plain":
+      return 0;
+    default: {
+      const _exhaustive: never = style;
+      return _exhaustive;
+    }
+  }
+}
+
 function toCell(seg: RenderedSegmentLike): RichText {
   // Padding mirrors the legacy buildLineFromSegments: one space on each side
   // of the segment text. The joiners sit between cells; padding sits inside.