Solid PR overall — the stage state machine handles WIDE/COMPACT/NARROW transitions correctly, the auto-vs-manual tracking via refs is the right pattern, RAF-debounced resize is good practice, and the CSS variable refactor of .app columns is clean. One blocker to fix before this can land, plus two follow-on gaps worth handling in the same revision.

Blocker — overflow: hidden on .composer-foot clips the model-picker dropdown

The new rule

.composer-foot {
  ...
  overflow: hidden;
}

breaks the ModelMenu popup. In desktop/src/ui/composer.tsx:497-565:

• .composer-foot is the flex row.
• Inside it sits <div ref={modelWrapRef} style={{ position: "relative" }}> — this becomes the containing block for the popup.
• <ModelMenu> renders with position: absolute; bottom: calc(100% + 6px); width: 260px, popping upward roughly 150–200px above the model-pill — i.e. outside .composer-foot's box.

With overflow: hidden on .composer-foot, that out-of-box area gets clipped to zero. The user clicks the model-pill and sees nothing — model switching becomes effectively invisible. The @// Popup (line 593) is rendered as a sibling of .composer-foot rather than a descendant, so it's not affected; only ModelMenu is the casualty.

The fix is small: just drop overflow: hidden from .composer-foot. The flex-overflow problem is already solved by the min-width: 0 chain you added on .composer-foot, .grow, and .model-pill. Keep the text-truncation rules at the leaf level (.model-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } and same on .cf-btn .label if needed). overflow: hidden on the flex parent is a sledgehammer that breaks any absolutely-positioned descendant escaping the box.

Follow-on gap 1 — initial narrow startup isn't covered

if (prev === null) {
  responsiveStageRef.current = next;
  return;
}

First sync() call after mount records the stage and exits. If the user opens the app on a narrow window with the default open state (or with LS-restored open state), the composer overflows until they manually resize — which is exactly the screenshot scenario in #855.

Run the normal stage logic on first mount too:

if (prev === null) {
  if (next === RESPONSIVE_STAGE.NARROW) {
    if (!ctxCollapsedRef.current) { setCtxCollapsed(true); autoCtxCollapsedRef.current = true; }
    if (!sideCollapsedRef.current) { setSideCollapsed(true); autoSideCollapsedRef.current = true; }
  } else if (next === RESPONSIVE_STAGE.COMPACT) {
    if (!ctxCollapsedRef.current) { setCtxCollapsed(true); autoCtxCollapsedRef.current = true; }
  }
  responsiveStageRef.current = next;
  return;
}

Follow-on gap 2 — auto-collapse pollutes localStorage

sideCollapsed / ctxCollapsed are persisted by the existing effects. When auto-collapse flips them, that gets written too. After the user spends time on a narrow window, LS becomes sideCollapsed=1, ctxCollapsed=1. Next launch on a wide screen: both panels restore as collapsed, the first sync() doesn't reopen them (refs don't persist, so autoSideCollapsedRef.current is false on mount), and the user sees both sidebars hidden on a window that has plenty of room.

The cleanest fix is to skip the LS write when the change came from auto-collapse — gate the existing persistence effects on the auto refs:

useEffect(() => {
  if (autoSideCollapsedRef.current) return;
  localStorage.setItem("reasonix.sideCollapsed", sideCollapsed ? "1" : "0");
}, [sideCollapsed]);

(Same shape for ctx.) That way the persisted value reflects what the user explicitly chose, and the responsive layer never writes to LS.

Nit (optional)

RESPONSIVE_STAGE as a const-object + (typeof X)[keyof typeof X] works, but a string-literal union is half the code:

type ResponsiveStage = "wide" | "compact" | "narrow";

No strong opinion — keep if you prefer the named constants.

Push a fixup with the blocker fix (and ideally the two follow-on gaps) and I'll merge.