@cat-factory/app 0.196.0 → 0.196.1

package/README.md

@@ -77,11 +77,18 @@ a fixed order, first match wins:
    set the in-app switcher is a read-only indicator, since a preference the resolver ignores
    would be a lie. An unrecognised value is ignored rather than failing the boot.
 2. **The user's own choice**, persisted client-side (the `uiMode` store) and changed from the
-   switcher at the bottom of the sidebar — or from the **command palette** entry, which is
-   deliberately _not_ an advanced item: basic is the default, so the route back to the
-   advanced half has to exist inside basic mode.
+   switcher at the top of the sidebar, under the board switcher — or from the **command
+   palette** entry, which is deliberately _not_ an advanced item: basic is the default, so the
+   route back to the advanced half has to exist inside basic mode.
 3. **`basic`.**
 
+That switcher is a **segmented control showing both tiers**, above the fold rather than in the
+footer, because basic is the shipped default and it is most users' only sight of the tier: a
+dropdown states the current mode but not that another one exists, so the half of the product it
+gates stays invisible to anyone who does not open menus to see what is in them. In the collapsed
+rail it degrades to one button that flips the tier (with only two modes a toggle is
+unambiguous), keeping the current tier's name under the glyph.
+
 The sidebar can independently be **collapsed to an icon rail** (the toggle at its top, lg+
 only — below `lg` the navbar is already an off-canvas drawer). The rail preference is
 **per-tier**: basic _defaults_ to railed and advanced to expanded, and each tier remembers its

package/app/components/brainstorm/BrainstormWindow.vue

@@ -254,7 +254,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
     "
     :subtitle="block?.title"
     variant="centered"
-    width="5xl"
+    width="full"
     @close="close"
   >
     <template v-if="session" #header-extras>
@@ -361,14 +361,18 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                       {{ t(STATUS_LABELS[item.status]) }}
                     </UBadge>
                   </div>
-                  <p class="mt-1 whitespace-pre-line text-sm text-slate-400">
+                  <!-- The proposal itself is prose, so it takes the measure even though the card
+                       around it takes the span (see the shell's `width` prop: the unit is the
+                       paragraph, not the section). The badge row above and the choose/dismiss
+                       control below are what the full width is actually for. -->
+                  <p class="mt-1 max-w-3xl whitespace-pre-line text-sm text-slate-400">
                     {{ item.detail }}
                   </p>
 
                   <!-- recorded choice -->
                   <div
                     v-if="item.reply"
-                    class="mt-2 rounded-md border-s-2 border-slate-700 bg-slate-950/40 px-3 py-1.5 text-sm text-slate-300"
+                    class="mt-2 max-w-3xl rounded-md border-s-2 border-slate-700 bg-slate-950/40 px-3 py-1.5 text-sm text-slate-300"
                   >
                     <span class="text-[10px] uppercase tracking-wide text-slate-500">
                       {{ t('brainstorm.yourChoice') }}
@@ -446,7 +450,10 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 {{ incorporated ? docNoun : t('brainstorm.docDraft', { doc: docNoun }) }}
               </span>
             </div>
-            <div v-for="s in outline.sections" :key="s.id" class="mb-2">
+            <!-- The same reading measure the options' own prose takes above (see the shell's
+                 `width` prop): the window is `full`-width now, and this is continuous prose that
+                 would otherwise run to 200-character lines. -->
+            <div v-for="s in outline.sections" :key="s.id" class="mb-2 max-w-3xl">
               <button
                 v-if="s.title"
                 class="group flex w-full items-center gap-2 text-start"

package/app/components/clarity/ClarityReviewWindow.vue

@@ -310,7 +310,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
     :title="t('clarity.title')"
     :subtitle="block?.title"
     variant="centered"
-    width="5xl"
+    width="full"
     @close="close"
   >
     <template v-if="review" #header-extras>
@@ -418,7 +418,11 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                       {{ t(STATUS_LABELS[item.status]) }}
                     </UBadge>
                   </div>
-                  <p class="mt-1 whitespace-pre-line text-sm text-slate-400">
+                  <!-- The reviewer's question is prose, so it takes the measure even though the
+                       card around it takes the span (see the shell's `width` prop: the unit is the
+                       paragraph, not the section). The badge row above and the answer control
+                       below are what the full width is actually for. -->
+                  <p class="mt-1 max-w-3xl whitespace-pre-line text-sm text-slate-400">
                     {{ item.detail }}
                   </p>
 
@@ -426,7 +430,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                            the answer lives in the textarea below, seeded from the reply) -->
                   <div
                     v-if="item.reply && item.status !== 'open' && item.status !== 'answered'"
-                    class="mt-2 rounded-md border-s-2 border-slate-700 bg-slate-950/40 px-3 py-1.5 text-sm text-slate-300"
+                    class="mt-2 max-w-3xl rounded-md border-s-2 border-slate-700 bg-slate-950/40 px-3 py-1.5 text-sm text-slate-300"
                   >
                     <span class="text-[10px] uppercase tracking-wide text-slate-500">
                       {{ t('clarity.answerLabel') }}
@@ -490,7 +494,10 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 {{ incorporated ? t('clarity.docHeading') : t('clarity.docHeadingDraft') }}
               </span>
             </div>
-            <div v-for="s in outline.sections" :key="s.id" class="mb-2">
+            <!-- The same reading measure the findings' own prose takes above (see the shell's
+                 `width` prop): the window is `full`-width now, and this is continuous prose that
+                 would otherwise run to 200-character lines. -->
+            <div v-for="s in outline.sections" :key="s.id" class="mb-2 max-w-3xl">
               <button
                 v-if="s.title"
                 class="group flex w-full items-center gap-2 text-start"

package/app/components/initiative/InitiativePlanReview.vue

@@ -224,45 +224,52 @@ async function copyPlan() {
       class="min-h-0 min-w-0 flex-1 overflow-y-auto px-5 py-4"
       @scroll="onScroll"
     >
-      <!-- No `max-w-*` reading measure here: with the outline and the review rail both taking a
-           fixed column out of the shell's `5xl`, this one is ~490px wide at every size that renders
-           it, so a cap would only ever be dead markup. -->
-      <section
-        v-for="s in outline.sections"
-        :id="s.id"
-        :key="s.id"
-        :ref="(el) => (sectionEls[s.id] = el as HTMLElement | null)"
-        class="scroll-mt-2"
-      >
-        <button
-          v-if="s.depth > 0"
-          class="group flex w-full items-center gap-1.5 rounded py-0.5 text-start transition hover:text-white"
-          :aria-expanded="!collapsed[s.id]"
-          @click="toggle(s.id)"
+      <!-- The reading measure, which the shell's `full` width made load-bearing: this column used
+           to be ~490px at every size that rendered it (a fixed outline and a fixed rail out of a
+           `5xl` shell), so a cap was dead markup and the comment here said so. On a window that now
+           spans the viewport it is the only thing between the plan and 200-character lines, and it
+           is the step reader's own measure (`AgentStepDetail`, `mx-auto max-w-3xl` over the same
+           13px `.reader-prose`) rather than a second opinion about how wide prose should be. The
+           leftover width is the document's margins; the LAYOUT is what the extra space bought —
+           outline and rail no longer competing with the plan for one 5xl card. -->
+      <div class="mx-auto w-full max-w-3xl">
+        <section
+          v-for="s in outline.sections"
+          :id="s.id"
+          :key="s.id"
+          :ref="(el) => (sectionEls[s.id] = el as HTMLElement | null)"
+          class="scroll-mt-2"
         >
-          <UIcon
-            name="i-lucide-chevron-right"
-            class="h-3.5 w-3.5 shrink-0 text-slate-500 transition-transform group-hover:text-slate-300"
-            :class="collapsed[s.id] ? '' : 'rotate-90'"
-          />
-          <span
-            class="font-semibold text-slate-100"
-            :class="s.depth <= 1 ? 'text-base' : s.depth === 2 ? 'text-sm' : 'text-[13px]'"
-            v-html="s.titleHtml"
+          <button
+            v-if="s.depth > 0"
+            class="group flex w-full items-center gap-1.5 rounded py-0.5 text-start transition hover:text-white"
+            :aria-expanded="!collapsed[s.id]"
+            @click="toggle(s.id)"
+          >
+            <UIcon
+              name="i-lucide-chevron-right"
+              class="h-3.5 w-3.5 shrink-0 text-slate-500 transition-transform group-hover:text-slate-300"
+              :class="collapsed[s.id] ? '' : 'rotate-90'"
+            />
+            <span
+              class="font-semibold text-slate-100"
+              :class="s.depth <= 1 ? 'text-base' : s.depth === 2 ? 'text-sm' : 'text-[13px]'"
+              v-html="s.titleHtml"
+            />
+          </button>
+          <!-- `review-mode` carries the click-to-comment affordance, so it tracks the same RBAC
+               gate the composer does — a viewer gets the document, not hover targets that lead
+               nowhere. -->
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div
+            v-show="!collapsed[s.id]"
+            class="reader-prose mt-0.5 text-[13px] leading-relaxed text-slate-300"
+            :class="[s.depth > 0 ? 'ps-5' : '', canExecute ? 'review-mode' : '']"
+            @click="onProseClick"
+            v-html="s.bodyHtml"
           />
-        </button>
-        <!-- `review-mode` carries the click-to-comment affordance, so it tracks the same RBAC
-             gate the composer does — a viewer gets the document, not hover targets that lead
-             nowhere. -->
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <div
-          v-show="!collapsed[s.id]"
-          class="reader-prose mt-0.5 text-[13px] leading-relaxed text-slate-300"
-          :class="[s.depth > 0 ? 'ps-5' : '', canExecute ? 'review-mode' : '']"
-          @click="onProseClick"
-          v-html="s.bodyHtml"
-        />
-      </section>
+        </section>
+      </div>
     </div>
 
     <!-- Review rail: what the human is being asked, the anchored comments so far, and the two

package/app/components/initiative/InitiativeTrackerWindow.vue

@@ -245,7 +245,7 @@ async function savePolicy() {
     icon-class="bg-indigo-500/15 text-indigo-300"
     :title="initiative?.title ?? block?.title ?? t('initiative.tracker.title')"
     :subtitle="t('initiative.tracker.subtitle')"
-    width="5xl"
+    width="full"
     testid="initiative-tracker-window"
     @close="close"
   >
@@ -353,12 +353,15 @@ async function savePolicy() {
             </div>
           </section>
 
-          <!-- Goal & constraints -->
+          <!-- Goal & constraints. The planner's own prose, so it takes the reading measure the
+               shell's `full` width obliges (see the `width` prop): the phase/item rows below are
+               structure that reads better at the full span, but these are paragraphs and bullets
+               of agent-written text that would otherwise run the width of the display. -->
           <section v-if="initiative.goal" class="mb-4">
             <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
               {{ t('initiative.tracker.goal') }}
             </h3>
-            <p class="whitespace-pre-wrap text-[13px] leading-relaxed text-slate-300">
+            <p class="max-w-3xl whitespace-pre-wrap text-[13px] leading-relaxed text-slate-300">
               {{ initiative.goal }}
             </p>
           </section>
@@ -366,7 +369,7 @@ async function savePolicy() {
             <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
               {{ t('initiative.tracker.constraints') }}
             </h3>
-            <ul class="list-inside list-disc text-[13px] text-slate-300">
+            <ul class="max-w-3xl list-inside list-disc text-[13px] text-slate-300">
               <li v-for="(c, i) in initiative.constraints" :key="i">{{ c }}</li>
             </ul>
           </section>
@@ -374,7 +377,7 @@ async function savePolicy() {
             <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
               {{ t('initiative.tracker.nonGoals') }}
             </h3>
-            <ul class="list-inside list-disc text-[13px] text-slate-300">
+            <ul class="max-w-3xl list-inside list-disc text-[13px] text-slate-300">
               <li v-for="(g, i) in initiative.nonGoals" :key="i">{{ g }}</li>
             </ul>
           </section>
@@ -382,7 +385,7 @@ async function savePolicy() {
             <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
               {{ t('initiative.tracker.analysis') }}
             </h3>
-            <p class="whitespace-pre-wrap text-[13px] leading-relaxed text-slate-300">
+            <p class="max-w-3xl whitespace-pre-wrap text-[13px] leading-relaxed text-slate-300">
               {{ initiative.analysisSummary }}
             </p>
           </section>
@@ -450,7 +453,7 @@ async function savePolicy() {
                           })
                         }}
                       </div>
-                      <div v-if="item.note" class="mt-0.5 text-[10px] text-amber-300/80">
+                      <div v-if="item.note" class="mt-0.5 max-w-3xl text-[10px] text-amber-300/80">
                         {{ item.note }}
                       </div>
                       <div
@@ -592,7 +595,7 @@ async function savePolicy() {
             <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
               {{ t('initiative.tracker.deviations') }}
             </h3>
-            <ul class="list-inside list-disc text-[13px] text-slate-300">
+            <ul class="max-w-3xl list-inside list-disc text-[13px] text-slate-300">
               <li v-for="d in initiative.deviations" :key="d.id">
                 <code v-if="d.itemId" class="text-slate-400">{{ d.itemId }}</code>
                 {{ d.description }}
@@ -688,7 +691,7 @@ async function savePolicy() {
             <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
               {{ t('initiative.tracker.caveats') }}
             </h3>
-            <ul class="list-inside list-disc text-[13px] text-slate-300">
+            <ul class="max-w-3xl list-inside list-disc text-[13px] text-slate-300">
               <li v-for="(c, i) in initiative.caveats" :key="i">{{ c }}</li>
             </ul>
           </section>

package/app/components/layout/SideBar.vue

@@ -9,7 +9,8 @@
 // Two orthogonal ways this panel shrinks. WHICH destinations exist is the interface
 // TIER (basic hides the `advanced` contributions, filtered upstream in `navSlotFilter`);
 // how much room they take is the COLLAPSE state (the icon-only rail). Basic mode starts
-// railed, but either can be changed independently from the footer switcher / the toggle.
+// railed, but either can be changed independently from the tier switcher at the top /
+// the rail toggle.
 import { useEventListener, useScrollLock } from '@vueuse/core'
 import BoardSwitcher from '~/components/layout/BoardSwitcher.vue'
 import LanguageSwitcher from '~/components/layout/LanguageSwitcher.vue'
@@ -179,6 +180,17 @@ watch(
 
     <BoardSwitcher :collapsed="railed" />
 
+    <!-- The interface tier sits ABOVE the destinations it gates, not in the footer: basic is the
+         shipped default, so this row is most users' only sight of the tier, and below the fold in
+         a scrolled navbar it is a thin thread to hang the advanced half of the product on. The
+         wrapper is what keeps the control and its hint together — the aside's own `gap-4` would
+         otherwise push them apart. Kept OUT of the `onNavAction` group deliberately: switching
+         tiers opens nothing, and closing the compact drawer would hide the destinations the
+         switch just revealed. -->
+    <div class="space-y-1">
+      <UiModeSwitcher :collapsed="railed" />
+    </div>
+
     <div class="contents" @click="onNavAction">
       <!-- Command bar launcher (⌘K) — the primary way to create blocks / pipelines
          and reach every action below. -->
@@ -236,7 +248,6 @@ watch(
     </div>
 
     <div class="mt-auto space-y-2">
-      <UiModeSwitcher :collapsed="railed" />
       <LanguageSwitcher :collapsed="railed" />
       <UserMenu :collapsed="railed" />
     </div>

package/app/components/layout/UiModeSwitcher.vue

@@ -1,14 +1,23 @@
 <script setup lang="ts">
-import type { DropdownMenuItem } from '@nuxt/ui'
 import { computed } from 'vue'
 import { UI_MODES, type UiMode } from '~/utils/uiMode'
 
-// Interface-tier picker, shown at the sidebar bottom next to the language switcher (the
-// same shape, deliberately: both are per-user shell preferences rather than board state).
-// Basic mode hides the power-user destinations and the less-used run options; advanced
-// shows everything. The user's pick is persisted client-side — unless the deployment pinned
-// the tier via NUXT_PUBLIC_UI_MODE, in which case the row is a read-only indicator, since
-// writing a preference the resolver ignores would be a lie (see `stores/uiMode.ts`).
+// Interface-tier picker, shown at the TOP of the sidebar under the board switcher. Basic mode
+// hides the power-user destinations and the less-used run options; advanced shows everything.
+//
+// It is a SEGMENTED control rather than a dropdown, and it sits above the fold rather than in the
+// footer, because basic is the shipped default and this row is most users' only sight of the tier:
+// a dropdown states the current mode but not that another one exists, so the half of the product
+// it gates is discoverable only to someone who already opens menus to see what is in them. Showing
+// both segments makes the choice — and the fact that there IS a choice — legible at rest.
+//
+// The user's pick is persisted client-side — unless the deployment pinned the tier via
+// NUXT_PUBLIC_UI_MODE, in which case the row is a read-only indicator, since writing a preference
+// the resolver ignores would be a lie (see `stores/uiMode.ts`).
+//
+// `collapsed` is the icon-only rail (basic mode's own default), where two segments do not fit at
+// 3.5rem. It degrades to ONE button that flips the tier directly — with only two modes a toggle is
+// unambiguous — keeping the current tier's NAME under the glyph rather than an icon alone.
 withDefaults(defineProps<{ collapsed?: boolean }>(), { collapsed: false })
 
 const uiMode = useUiModeStore()
@@ -27,28 +36,20 @@ const MODE_HINTS: Record<UiMode, string> = {
 
 const currentLabel = computed(() => t(MODE_LABELS[uiMode.mode]))
 const icon = computed(() => (uiMode.isAdvanced ? 'i-lucide-toggle-right' : 'i-lucide-toggle-left'))
-/** Tooltip for the collapsed rail (and the pinned row): mode + why it can't be changed. */
-const title = computed(() =>
-  uiMode.envPinned
-    ? `${t('uiMode.switcher')}: ${currentLabel.value} (${t('uiMode.pinned')})`
-    : `${t('uiMode.switcher')}: ${currentLabel.value}`,
+/** The tier the rail button would switch TO, so its tooltip names the act and not the state. */
+const otherMode = computed<UiMode>(() => (uiMode.isAdvanced ? 'basic' : 'advanced'))
+/** Tooltip for the pinned row (both variants): mode + why it can't be changed. */
+const pinnedTitle = computed(
+  () => `${t('uiMode.switcher')}: ${currentLabel.value} (${t('uiMode.pinned')})`,
 )
-
-const items = computed<DropdownMenuItem[][]>(() => [
-  UI_MODES.map((mode) => ({
-    label: t(MODE_LABELS[mode]),
-    icon: mode === uiMode.mode ? 'i-lucide-check' : undefined,
-    onSelect: () => uiMode.setMode(mode),
-  })),
-])
 </script>
 
 <template>
-  <!-- Pinned by the deployment: no dropdown, just the current tier. -->
+  <!-- Pinned by the deployment: no control, just the current tier. -->
   <div
     v-if="uiMode.envPinned"
     data-testid="ui-mode-pinned"
-    :title="title"
+    :title="pinnedTitle"
     class="flex w-full items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/40 p-2 text-start"
     :class="collapsed ? 'justify-center' : ''"
   >
@@ -62,25 +63,51 @@ const items = computed<DropdownMenuItem[][]>(() => [
     <UIcon v-if="!collapsed" name="i-lucide-lock" class="h-3.5 w-3.5 shrink-0 text-slate-600" />
   </div>
 
-  <UDropdownMenu v-else :items="items" :content="{ side: 'top', align: 'start' }">
-    <button
-      type="button"
-      data-testid="ui-mode-switcher"
+  <!-- Rail: one button, flips the tier. The label rides under the glyph so the rail still says
+       which tier is on — the audience that needs to find the advanced half is exactly the one
+       sitting in basic mode's collapsed default. -->
+  <button
+    v-else-if="collapsed"
+    type="button"
+    data-testid="ui-mode-toggle"
+    :aria-label="t('uiMode.switchTo', { mode: t(MODE_LABELS[otherMode]) })"
+    :title="t('uiMode.switchTo', { mode: t(MODE_LABELS[otherMode]) })"
+    class="flex w-full flex-col items-center gap-0.5 rounded-lg border border-slate-700 bg-slate-900/60 px-1 py-1.5 transition hover:border-indigo-500/60 hover:bg-slate-800/60"
+    @click="uiMode.toggleMode()"
+  >
+    <UIcon :name="icon" class="h-4 w-4 shrink-0 text-indigo-400" />
+    <span class="w-full truncate text-center text-[9px] font-medium uppercase text-slate-300">
+      {{ currentLabel }}
+    </span>
+  </button>
+
+  <div v-else data-testid="ui-mode-switcher" class="w-full">
+    <div class="mb-1 px-1 text-[10px] uppercase tracking-wide text-slate-500">
+      {{ t('uiMode.switcher') }}
+    </div>
+    <div
+      role="group"
       :aria-label="t('uiMode.switcher')"
-      :title="title"
-      class="flex w-full items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 p-2 text-start transition hover:bg-slate-800/60"
-      :class="collapsed ? 'justify-center' : ''"
+      class="flex w-full gap-1 rounded-lg border border-slate-700 bg-slate-900/60 p-1"
     >
-      <UIcon :name="icon" class="h-4 w-4 shrink-0 text-slate-400" />
-      <div v-if="!collapsed" class="min-w-0 flex-1">
-        <div class="truncate text-[10px] uppercase tracking-wide text-slate-500">
-          {{ t('uiMode.switcher') }}
-        </div>
-        <div class="truncate text-xs font-medium text-white">{{ currentLabel }}</div>
-      </div>
-      <UIcon v-if="!collapsed" name="i-lucide-chevron-up" class="h-4 w-4 shrink-0 text-slate-500" />
-    </button>
-  </UDropdownMenu>
+      <button
+        v-for="mode in UI_MODES"
+        :key="mode"
+        type="button"
+        :data-testid="`ui-mode-option-${mode}`"
+        :aria-pressed="mode === uiMode.mode"
+        class="flex-1 truncate rounded-md px-2 py-1 text-xs font-medium transition"
+        :class="
+          mode === uiMode.mode
+            ? 'bg-indigo-500/20 text-indigo-200 ring-1 ring-indigo-500/50'
+            : 'text-slate-400 hover:bg-slate-800/70 hover:text-slate-200'
+        "
+        @click="uiMode.setMode(mode)"
+      >
+        {{ t(MODE_LABELS[mode]) }}
+      </button>
+    </div>
+  </div>
 
   <!-- The one-line "what this tier gives you", so the choice is self-explanatory. Dropped in
        the collapsed rail, where the tooltip above carries the mode instead. -->

package/app/components/panels/ResultWindowShell.logic.spec.ts

@@ -0,0 +1,174 @@
+import { existsSync, readdirSync, readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+import {
+  PROSE_MEASURE_CLASS,
+  RESULT_WINDOW_WIDTH_CLASS,
+  type ResultWindowWidth,
+} from './ResultWindowShell.logic'
+
+// The width decision is a per-window LAYOUT judgement that lives on each window's
+// `<ResultWindowShell width="…">`, which means nothing in the type system can ask a window author
+// to justify it — and the `full` bucket carries an obligation (continuous prose takes its own
+// reading measure) the shell explicitly cannot enforce on its slot content. That combination is
+// what this file pins, the way `nav-contributions.spec.ts` pins the advanced-nav set: a table
+// naming every window's bucket AND the reason, asserted against what the components actually pass.
+//
+// It caught its own motivating bug — the tracker, spec and tester windows moved to `full` with no
+// measure anywhere in them, so their agent-written summaries ran the width of the display.
+
+/** The default the shell applies when a window passes no `width` (`withDefaults`). */
+const SHELL_DEFAULT_WIDTH: ResultWindowWidth = '3xl'
+
+/**
+ * Every `ResultWindowShell` consumer, its bucket, and why that bucket. The reason is the point:
+ * `full` is for a body that lays out in COLUMNS, where the width buys visible layout, and a
+ * one-column verdict or reader keeps a bucket. A row that cannot state which of those it is has
+ * not made the decision.
+ */
+const WINDOWS: Record<string, { width: ResultWindowWidth; why: string }> = {
+  'brainstorm/BrainstormWindow.vue': {
+    width: 'full',
+    why: 'options column + the choose/dismiss action rail',
+  },
+  'clarity/ClarityReviewWindow.vue': {
+    width: 'full',
+    why: 'findings column + the answer/dismiss action rail',
+  },
+  'consensus/ConsensusSessionWindow.vue': {
+    width: '5xl',
+    why: 'one stacked column of participant prose — no rail competing with it, so width would only lengthen lines',
+  },
+  'docs/DocInterviewWindow.vue': { width: '3xl', why: 'one column of interview question + answer' },
+  'followUp/FollowUpWindow.vue': { width: '3xl', why: 'a short list of follow-up items' },
+  'forkDecision/ForkDecisionWindow.vue': {
+    width: '3xl',
+    why: 'two proposals and a choice between them',
+  },
+  'gates/GateResultView.vue': { width: '3xl', why: 'a gate verdict — one column, short' },
+  'humanTest/HumanTestWindow.vue': {
+    width: '3xl',
+    why: 'one instruction plus a pass/fail control',
+  },
+  'initiative/InitiativePlanningWindow.vue': {
+    width: '4xl',
+    why: 'a planning-progress readout, one column',
+  },
+  'initiative/InitiativeTrackerWindow.vue': {
+    width: 'full',
+    why: 'tracker column + run-metadata rail, and it hands its whole body to the three-column plan review while a plan is parked',
+  },
+  'judge/JudgeResultView.vue': { width: '3xl', why: 'a rubric verdict — one column, short' },
+  'panels/GenericStructuredResultView.vue': {
+    width: '4xl',
+    why: 'the fallback structured-result reader, one column of sections',
+  },
+  'panels/MergerResultView.vue': {
+    width: '3xl',
+    why: 'the merge verdict and its scores — one column, short (the slice-5 pilot)',
+  },
+  'prReview/PrReviewWindow.vue': {
+    width: 'full',
+    why: 'per-file findings with paths, line numbers and suggested fixes, + a rail',
+  },
+  'ralph/RalphLoopResultView.vue': { width: '3xl', why: 'a loop status readout, one column' },
+  'requirements/RequirementsReviewWindow.vue': {
+    width: 'full',
+    why: 'findings column + the answer/dismiss action rail',
+  },
+  'spec/ServiceSpecWindow.vue': {
+    width: 'full',
+    why: 'module/feature-group nav column + the spec detail column',
+  },
+  'testing/TestReportWindow.vue': {
+    width: 'full',
+    why: 'scenario/outcome/concern tree + run-metadata rail',
+  },
+  'visualConfirm/VisualConfirmationWindow.vue': {
+    width: '5xl',
+    why: 'a screenshot grid whose full-bleed reading is the nested ArtifactLightbox, not this window',
+  },
+}
+
+// Anchored on the vitest root (`frontend/app`) rather than `import.meta.url`: the `happy-dom`
+// environment replaces the global `URL`, and `fileURLToPath` then rejects its own file: URLs.
+const componentsDir = resolve(process.cwd(), 'app/components')
+
+/** Every component that mounts the shell, keyed by its path relative to `app/components`. */
+function findConsumers(): Map<string, string> {
+  const found = new Map<string, string>()
+  for (const entry of readdirSync(componentsDir, { recursive: true, encoding: 'utf8' })) {
+    const rel = entry.replace(/\\/g, '/')
+    // The shell itself names its own tag in its header comment — it is not a consumer.
+    if (!rel.endsWith('.vue') || rel.endsWith('panels/ResultWindowShell.vue')) continue
+    const source = readFileSync(`${componentsDir}/${rel}`, 'utf8')
+    if (source.includes('<ResultWindowShell')) found.set(rel, source)
+  }
+  return found
+}
+
+/** The bucket a component passes, or the shell's default when it passes none. */
+function declaredWidth(source: string): ResultWindowWidth {
+  const match = /<ResultWindowShell[\s\S]*?\swidth="([^"]+)"/.exec(source)
+  return (match?.[1] as ResultWindowWidth | undefined) ?? SHELL_DEFAULT_WIDTH
+}
+
+describe('result-window width buckets', () => {
+  const consumers = findConsumers()
+
+  it('finds the shell consumers at all (the scan is doing real work)', () => {
+    expect(existsSync(componentsDir), `no components dir at ${componentsDir}`).toBe(true)
+    expect(consumers.size).toBeGreaterThan(10)
+  })
+
+  it('covers every consumer, with no stale rows', () => {
+    expect([...consumers.keys()].sort()).toEqual(Object.keys(WINDOWS).sort())
+  })
+
+  it('matches what each window actually passes', () => {
+    const actual = [...consumers.entries()].map(([file, source]) => [file, declaredWidth(source)])
+    const declared = Object.entries(WINDOWS).map(([file, row]) => [file, row.width])
+    expect(Object.fromEntries(actual)).toEqual(Object.fromEntries(declared))
+  })
+
+  it('makes every window state a reason for its bucket', () => {
+    for (const [file, row] of Object.entries(WINDOWS)) {
+      expect(row.why.length, `${file} must say why it takes \`${row.width}\``).toBeGreaterThan(20)
+    }
+  })
+
+  // The obligation the shell cannot enforce on its own slot content: a `full` window's continuous
+  // prose carries the step reader's measure, or the extra width lands as 200-character lines. A
+  // window with none anywhere is the shape this catches — it either has no prose (say so by
+  // pointing at the measure it does not need) or it forgot.
+  it('holds every `full` window to the prose reading measure', () => {
+    for (const [file, row] of Object.entries(WINDOWS)) {
+      if (row.width !== 'full') continue
+      const source = consumers.get(file)
+      expect(
+        source?.includes(PROSE_MEASURE_CLASS),
+        `${file} is \`full\`, so its continuous prose must carry \`${PROSE_MEASURE_CLASS}\``,
+      ).toBe(true)
+    }
+  })
+})
+
+describe('RESULT_WINDOW_WIDTH_CLASS', () => {
+  it('caps every bucket at its own name and leaves `full` uncapped', () => {
+    expect(RESULT_WINDOW_WIDTH_CLASS).toEqual({
+      '3xl': 'max-w-3xl',
+      '4xl': 'max-w-4xl',
+      '5xl': 'max-w-5xl',
+      // Not a bigger number: the panel's `w-full` spans the backdrop and the variant's gutter
+      // (`m-4` / `p-4`) is the only inset. A cap here would reintroduce the indefensible number
+      // `full` exists to avoid.
+      full: 'max-w-none',
+    })
+  })
+
+  it('shares one measure with the step reader', () => {
+    // `AgentStepDetail` reads prose at `mx-auto max-w-3xl`; the windows must not hold a second
+    // opinion about how wide prose should be.
+    expect(PROSE_MEASURE_CLASS).toBe('max-w-3xl')
+  })
+})

package/app/components/panels/ResultWindowShell.logic.ts

@@ -0,0 +1,31 @@
+// The result-window width vocabulary, extracted from `ResultWindowShell.vue` so it can be
+// asserted (see `ResultWindowShell.logic.spec.ts`, which pins every window's bucket against a
+// table naming its reason — the shape `nav-contributions.spec.ts` uses for the advanced-nav set).
+//
+// WHICH bucket a window takes, and the reading-measure obligation `full` carries, are documented
+// on the shell's `width` prop — that is what a window author reads. This module owns only the
+// vocabulary and its class mapping.
+
+/** Card width buckets — see `ResultWindowShell.vue`'s `width` prop for what picks `full`. */
+export type ResultWindowWidth = '3xl' | '4xl' | '5xl' | 'full'
+
+/**
+ * The bucket → cap mapping. `full` is deliberately `max-w-none` rather than a bigger number:
+ * the panel's `w-full` then spans the backdrop, which the variant insets by one gutter (`m-4`
+ * stretched, `p-4` centered), so the window fills the screen and still reads as a window rather
+ * than a repaint of the app. A `Record` over the union, so a new bucket fails to compile until
+ * it is mapped.
+ */
+export const RESULT_WINDOW_WIDTH_CLASS: Record<ResultWindowWidth, string> = {
+  '3xl': 'max-w-3xl',
+  '4xl': 'max-w-4xl',
+  '5xl': 'max-w-5xl',
+  full: 'max-w-none',
+}
+
+/**
+ * The reading measure a `full` window puts on a run of continuous prose — the step reader's own
+ * (`AgentStepDetail`, `mx-auto max-w-3xl` over the same 13px `.reader-prose`), so the surfaces
+ * cannot drift into two opinions about how wide prose should be.
+ */
+export const PROSE_MEASURE_CLASS = 'max-w-3xl'

package/app/components/panels/ResultWindowShell.vue

@@ -26,6 +26,10 @@ import StepRestartControl from '~/components/panels/StepRestartControl.vue'
 import StepEffortReport from '~/components/panels/StepEffortReport.vue'
 import StepValidationReport from '~/components/panels/StepValidationReport.vue'
 import { effortBand, effortHint } from '~/utils/effort'
+import {
+  RESULT_WINDOW_WIDTH_CLASS,
+  type ResultWindowWidth,
+} from '~/components/panels/ResultWindowShell.logic'
 
 /** A pipeline step reference — passed by step-result windows to surface the shared
  *  "restart from here" control. `StepRestartControl` self-hides for an off-path open
@@ -42,8 +46,38 @@ const props = withDefaults(
     /** Header title (the accessible dialog name) + optional secondary line. */
     title: string
     subtitle?: string
-    /** Card width bucket + backdrop layout (the two pre-slice-5 chrome variants). */
-    width?: '3xl' | '4xl' | '5xl'
+    /**
+     * Card width bucket + backdrop layout (the two pre-slice-5 chrome variants).
+     *
+     * `full` is the REVIEW/READING bucket: the panel takes the whole viewport minus the
+     * shell's own gutter, the shape the full-bleed step reader (`AgentStepDetail`) already
+     * has. It is for a window whose body lays out in COLUMNS — rails plus a fluid main
+     * column — where the width buys visible layout: the outline and the review rail stop
+     * competing with the document, a findings list stops wrapping every card, a diff or a
+     * results table stops scrolling sideways. A window that is one column of prose or a
+     * short verdict keeps a bucket: stretching two paragraphs across an ultrawide reads
+     * worse, not better.
+     *
+     * The obligation that comes with it: CONTINUOUS PROSE inside a `full` window carries its
+     * own reading measure (`PROSE_MEASURE_CLASS`, the step reader's own, over the same 13px
+     * `.reader-prose`), or the width lands as 200-character lines.
+     *
+     * The unit that obligation attaches to is the PARAGRAPH, not the section — which is the
+     * distinction to get right, because "a findings list reads better at the full span" is
+     * true of the LIST and false of the prose inside each row. A list's rows, badge rows,
+     * control rows, tables, Gherkin blocks, log tails and inputs all take the span; a
+     * finding's detail, a recorded answer, an investigator's justification and a summary
+     * paragraph are prose wherever they sit, and take the measure. Sizing by section is how a
+     * card whose answer control is STACKED under its question — every finding card here —
+     * ends up arguing that its question is "beside" something and keeping 200-character lines.
+     *
+     * What `full` costs: click-outside effectively goes, since the backdrop is then only the
+     * shell's own gutter. That is the same trade the full-bleed reader already makes (it has
+     * no backdrop close at all), and Escape plus the header's close button — the two paths a
+     * keyboard and a pointer user actually reach for — are untouched. A window that wants
+     * click-outside to stay hittable is a window that should have kept a bucket.
+     */
+    width?: ResultWindowWidth
     variant?: 'stretch' | 'centered'
     /** Provide on step-result windows to show the shared restart control; omit on gates
      *  and block-keyed windows (no restart mid-gate / pre-run). */
@@ -119,18 +153,13 @@ const chipClass = computed(() =>
   effortReport.value ? CHIP_CLASS[effortBand(effortReport.value.difficulty)] : '',
 )
 
-const WIDTH: Record<'3xl' | '4xl' | '5xl', string> = {
-  '3xl': 'max-w-3xl',
-  '4xl': 'max-w-4xl',
-  '5xl': 'max-w-5xl',
-}
 const backdropClass = computed(() => [
   'fixed inset-0 z-50 flex max-h-[100dvh] justify-center bg-slate-950/70 backdrop-blur-sm',
   props.variant === 'centered' ? 'items-center p-4' : 'items-stretch',
 ])
 const panelClass = computed(() => [
   'flex w-full flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl',
-  WIDTH[props.width],
+  RESULT_WINDOW_WIDTH_CLASS[props.width],
   props.variant === 'centered' ? 'max-h-[90dvh]' : 'm-4',
 ])
 </script>

package/app/components/prReview/PrReviewWindow.vue

@@ -266,7 +266,7 @@ async function onDismiss(id: string): Promise<void> {
     icon-class="bg-indigo-500/15 text-indigo-300"
     :title="block ? t('prReview.titleWithBlock', { title: block.title }) : t('prReview.title')"
     :subtitle="t('prReview.subtitle')"
-    width="3xl"
+    width="full"
     testid="pr-review-window"
     @close="close"
   >
@@ -525,10 +525,11 @@ async function onDismiss(id: string): Promise<void> {
             </p>
           </div>
 
-          <!-- The reviewer's overall assessment. -->
+          <!-- The reviewer's overall assessment. Prose, so it takes the reading measure (see the
+               shell's `width` prop) — this window is `full`-width. -->
           <p
             v-if="state?.summary"
-            class="mb-3 rounded-md bg-slate-800/50 px-3 py-2 text-[12px] text-slate-300"
+            class="mb-3 max-w-3xl rounded-md bg-slate-800/50 px-3 py-2 text-[12px] text-slate-300"
           >
             <span class="text-slate-500">{{ t('prReview.summaryLabel') }}</span>
             {{ state.summary }}
@@ -579,7 +580,7 @@ async function onDismiss(id: string): Promise<void> {
               <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
                 {{ g.title }}
               </h3>
-              <p v-if="g.rationale" class="mb-1.5 text-[11px] text-slate-500">
+              <p v-if="g.rationale" class="mb-1.5 max-w-3xl text-[11px] text-slate-500">
                 {{ g.rationale }}
               </p>
               <article
@@ -672,15 +673,22 @@ async function onDismiss(id: string): Promise<void> {
                         · {{ t('prReview.line', { line: f.line }) }}</template
                       >
                     </p>
+                    <!-- The reviewer's prose — what the finding is, what to do about it, and the
+                         investigator's verdict below. Each takes the reading measure even though
+                         the card around it takes the span (see the shell's `width` prop: the unit
+                         is the paragraph, not the section). This window went from the NARROWEST
+                         bucket to `full`, so these are the three paragraphs the width would
+                         otherwise have stretched furthest; the path/line row, the badges and the
+                         per-finding actions are what it is actually for. -->
                     <p
-                      class="mt-1 whitespace-pre-wrap text-[12px] text-slate-300"
+                      class="mt-1 max-w-3xl whitespace-pre-wrap text-[12px] text-slate-300"
                       :class="isRetracted(f) ? 'line-through' : ''"
                     >
                       {{ f.detail }}
                     </p>
                     <p
                       v-if="f.suggestedFix"
-                      class="mt-1 whitespace-pre-wrap rounded-md bg-slate-800/50 px-2 py-1 text-[11px] text-slate-300"
+                      class="mt-1 max-w-3xl whitespace-pre-wrap rounded-md bg-slate-800/50 px-2 py-1 text-[11px] text-slate-300"
                     >
                       <span class="text-slate-500">{{ t('prReview.suggestedFix') }}</span>
                       {{ f.suggestedFix }}
@@ -691,7 +699,7 @@ async function onDismiss(id: string): Promise<void> {
                     <p
                       v-if="f.challenge?.justification"
                       data-testid="pr-review-finding-justification"
-                      class="mt-1.5 whitespace-pre-wrap rounded-md px-2 py-1 text-[11px]"
+                      class="mt-1.5 max-w-3xl whitespace-pre-wrap rounded-md px-2 py-1 text-[11px]"
                       :class="
                         isRetracted(f)
                           ? 'bg-rose-500/10 text-rose-200'

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -653,7 +653,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
     :subtitle="block?.title"
     :step-ref="{ instanceId, stepIndex }"
     variant="centered"
-    width="5xl"
+    width="full"
     @close="close"
   >
     <template v-if="review" #header-extras>
@@ -796,7 +796,11 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                         {{ STATUS_LABELS[item.status] }}
                       </UBadge>
                     </div>
-                    <p class="mt-1 whitespace-pre-line text-sm text-slate-400">
+                    <!-- The reviewer's question is prose, so it takes the measure even though the
+                         card around it takes the span (see the shell's `width` prop: the unit is
+                         the paragraph, not the section). The badge row above and the mode buttons
+                         and textarea below are what the full width is actually for. -->
+                    <p class="mt-1 max-w-3xl whitespace-pre-line text-sm text-slate-400">
                       {{ item.detail }}
                     </p>
 
@@ -804,7 +808,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                            ones the answer lives in the textarea below, seeded from the reply) -->
                     <div
                       v-if="item.reply && item.status !== 'open' && item.status !== 'answered'"
-                      class="mt-2 rounded-md border-s-2 border-slate-700 bg-slate-950/40 px-3 py-1.5 text-sm text-slate-300"
+                      class="mt-2 max-w-3xl rounded-md border-s-2 border-slate-700 bg-slate-950/40 px-3 py-1.5 text-sm text-slate-300"
                     >
                       <span class="text-[10px] uppercase tracking-wide text-slate-500">
                         {{ t('requirements.answerLabel') }}
@@ -925,7 +929,9 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                             >
                               {{ GROUNDING_LABELS[rec.groundedIn] }}
                             </UBadge>
-                            <p class="mt-1 whitespace-pre-line text-sm text-slate-300">
+                            <!-- The Writer's suggested answer — agent prose, so it takes the
+                                 measure like the finding's own question above it. -->
+                            <p class="mt-1 max-w-3xl whitespace-pre-line text-sm text-slate-300">
                               {{ rec.recommendedText }}
                             </p>
                             <div class="mt-2 flex flex-wrap items-center gap-2">
@@ -1037,7 +1043,11 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 }}
               </span>
             </button>
-            <div v-show="!docCollapsed">
+            <!-- The same reading measure the findings' own prose takes above (see the shell's
+                 `width` prop): the window is `full`-width now, and this is continuous prose that
+                 would otherwise run to 200-character lines. Left-aligned rather than centred, so
+                 it starts where every finding above it starts. -->
+            <div v-show="!docCollapsed" class="max-w-3xl">
               <div v-for="s in outline.sections" :key="s.id" class="mb-2">
                 <button
                   v-if="s.title"

package/app/components/spec/ServiceSpecWindow.vue

@@ -185,7 +185,7 @@ function kindLabel(item: RequirementItem): string {
     :title="t('spec.title')"
     :subtitle="block ? spec?.service || block.title : undefined"
     variant="centered"
-    width="5xl"
+    width="full"
     @close="close"
   >
     <!-- view toggle: Gherkin only when the spec (and its feature files) are on main -->
@@ -318,7 +318,10 @@ function kindLabel(item: RequirementItem): string {
         <!-- service overview -->
         <template v-if="selected === null">
           <h2 class="text-lg font-semibold text-white">{{ spec?.service }}</h2>
-          <p v-if="spec?.summary" class="mt-2 whitespace-pre-line text-sm text-slate-300">
+          <!-- The service's own prose, so it takes the reading measure the shell's `full` width
+               obliges (see the `width` prop). The requirement rows and Gherkin blocks below keep
+               the full span — they are structure, not paragraphs. -->
+          <p v-if="spec?.summary" class="mt-2 max-w-3xl whitespace-pre-line text-sm text-slate-300">
             {{ spec.summary }}
           </p>
           <p v-else class="mt-2 text-sm text-slate-500">{{ t('spec.noSummary') }}</p>
@@ -352,7 +355,7 @@ function kindLabel(item: RequirementItem): string {
             {{ selectedModule?.name }}
           </div>
           <h2 class="text-lg font-semibold text-white">{{ selectedGroup.name }}</h2>
-          <p v-if="selectedGroup.summary" class="mt-1 text-sm text-slate-400">
+          <p v-if="selectedGroup.summary" class="mt-1 max-w-3xl text-sm text-slate-400">
             {{ selectedGroup.summary }}
           </p>
 
@@ -500,7 +503,7 @@ function kindLabel(item: RequirementItem): string {
                 <UIcon name="i-lucide-shield-check" class="h-3.5 w-3.5" />
                 {{ t('spec.domainRules') }}
               </div>
-              <ul class="space-y-1.5">
+              <ul class="max-w-3xl space-y-1.5">
                 <li
                   v-for="rule in selectedGroup.rules ?? []"
                   :key="rule.id"

package/app/components/testing/TestReportWindow.vue

@@ -313,7 +313,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
     :title="headerTitle"
     :subtitle="t('testing.subtitle')"
     :step-ref="{ instanceId, stepIndex }"
-    width="5xl"
+    width="full"
     testid="tester-report-window"
     @close="close"
   >
@@ -489,7 +489,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                 :icon="a.outcome === 'completed' ? 'i-lucide-wrench' : 'i-lucide-circle-x'"
                 :icon-class="a.outcome === 'completed' ? 'text-amber-300' : 'text-rose-400'"
               />
-              <p v-if="a.summary" class="mt-1 text-[12px] leading-snug text-slate-400">
+              <p v-if="a.summary" class="mt-1 max-w-3xl text-[12px] leading-snug text-slate-400">
                 {{ a.summary }}
               </p>
               <div v-if="a.concerns && a.concerns.length" class="mt-1.5">
@@ -607,8 +607,13 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
         </div>
 
         <template v-else>
-          <!-- Summary -->
-          <p v-if="report.summary" class="mb-4 text-[13px] leading-relaxed text-slate-300">
+          <!-- Summary — the tester's own prose, so it takes the reading measure the shell's `full`
+               width obliges (see the `width` prop). The scenario rows and log tails below keep the
+               full span. -->
+          <p
+            v-if="report.summary"
+            class="mb-4 max-w-3xl text-[13px] leading-relaxed text-slate-300"
+          >
             {{ report.summary }}
           </p>
 
@@ -675,7 +680,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   />
                   <div class="min-w-0">
                     <span class="text-[13px] text-slate-200">{{ o.name }}</span>
-                    <p v-if="o.detail" class="text-[12px] leading-snug text-slate-400">
+                    <p v-if="o.detail" class="max-w-3xl text-[12px] leading-snug text-slate-400">
                       {{ o.detail }}
                     </p>
                   </div>
@@ -705,7 +710,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                         {{ SEVERITY_LABELS[c.severity] }}
                       </span>
                     </div>
-                    <p v-if="c.detail" class="text-[12px] leading-snug text-slate-400">
+                    <p v-if="c.detail" class="max-w-3xl text-[12px] leading-snug text-slate-400">
                       {{ c.detail }}
                     </p>
                   </div>

package/app/modular/nav-contributions.ts

@@ -460,9 +460,9 @@ export const NAV_CONTRIBUTIONS: readonly NavContribution[] = [
   {
     // Deliberately NOT `advanced`: this is the way BACK. Basic mode is the shipped default, so
     // for most users the sidebar switcher is their first sight of the tier — and in the basic
-    // rail it renders icon-only, which is a thin thread to hang the entire advanced half of the
-    // product on. The palette is reachable in both tiers, searchable by name, and is already
-    // "the primary way to reach every action", so the tier belongs in it.
+    // rail it collapses to a single toggle, which is a thin thread to hang the entire advanced
+    // half of the product on. The palette is reachable in both tiers, searchable by name, and
+    // is already "the primary way to reach every action", so the tier belongs in it.
     id: 'ui-mode',
     labelKey: 'layout.commandBar.cmd.toggleUiMode',
     icon: 'i-lucide-toggle-right',

package/i18n/locales/de.json

@@ -4542,6 +4542,7 @@
     "advanced": "Erweitert",
     "basicHint": "Nur die alltäglichen Werkzeuge. Für alles auf „Erweitert“ umschalten.",
     "advancedHint": "Alle Bereiche und alle Ausführungsoptionen.",
+    "switchTo": "Zu „{mode}“ wechseln",
     "pinned": "Von dieser Installation festgelegt"
   },
   "common": {

package/i18n/locales/en.json

@@ -32,6 +32,10 @@
     "advanced": "Advanced",
     "basicHint": "Everyday tools only. Switch to Advanced to see everything.",
     "advancedHint": "Every destination and every run option.",
+    "switchTo": "Switch to {mode}",
+    "@switchTo": {
+      "description": "Tooltip on the collapsed-sidebar tier button. {mode} is the OTHER interface tier name, i.e. the Basic or Advanced value from this same section - inflect the surrounding words to agree with it."
+    },
     "pinned": "Set by this deployment"
   },
   "common": {

package/i18n/locales/es.json

@@ -29,6 +29,7 @@
     "advanced": "Avanzada",
     "basicHint": "Solo las herramientas del día a día. Cambia a Avanzada para verlo todo.",
     "advancedHint": "Todas las secciones y todas las opciones de ejecución.",
+    "switchTo": "Cambiar a {mode}",
     "pinned": "Definido por este despliegue"
   },
   "common": {

package/i18n/locales/fr.json

@@ -29,6 +29,7 @@
     "advanced": "Avancée",
     "basicHint": "Uniquement les outils du quotidien. Passez en mode avancé pour tout afficher.",
     "advancedHint": "Toutes les sections et toutes les options d’exécution.",
+    "switchTo": "Passer en {mode}",
     "pinned": "Défini par ce déploiement"
   },
   "common": {

package/i18n/locales/he.json

@@ -29,6 +29,7 @@
     "advanced": "מתקדם",
     "basicHint": "רק הכלים היומיומיים. עברו למתקדם כדי לראות הכול.",
     "advancedHint": "כל האזורים וכל אפשרויות ההרצה.",
+    "switchTo": "מעבר ל{mode}",
     "pinned": "נקבע על ידי פריסה זו"
   },
   "common": {

package/i18n/locales/it.json

@@ -4542,6 +4542,7 @@
     "advanced": "Avanzata",
     "basicHint": "Solo gli strumenti di uso quotidiano. Passa ad Avanzata per vedere tutto.",
     "advancedHint": "Tutte le sezioni e tutte le opzioni di esecuzione.",
+    "switchTo": "Passa alla modalità {mode}",
     "pinned": "Impostato da questo deployment"
   },
   "common": {

package/i18n/locales/ja.json

@@ -29,6 +29,7 @@
     "advanced": "詳細",
     "basicHint": "日常的に使う機能のみ。すべて表示するには「詳細」に切り替えてください。",
     "advancedHint": "すべての項目とすべての実行オプション。",
+    "switchTo": "{mode}に切り替える",
     "pinned": "このデプロイで設定されています"
   },
   "common": {

package/i18n/locales/pl.json

@@ -29,6 +29,7 @@
     "advanced": "Zaawansowany",
     "basicHint": "Tylko codzienne narzędzia. Przełącz na zaawansowany, aby zobaczyć wszystko.",
     "advancedHint": "Wszystkie sekcje i wszystkie opcje uruchamiania.",
+    "switchTo": "Przełącz na {mode}",
     "pinned": "Ustawione przez to wdrożenie"
   },
   "common": {

package/i18n/locales/tr.json

@@ -29,6 +29,7 @@
     "advanced": "Gelişmiş",
     "basicHint": "Yalnızca günlük araçlar. Her şeyi görmek için Gelişmiş’e geçin.",
     "advancedHint": "Tüm bölümler ve tüm çalıştırma seçenekleri.",
+    "switchTo": "{mode} moduna geç",
     "pinned": "Bu dağıtım tarafından belirlendi"
   },
   "common": {

package/i18n/locales/uk.json

@@ -29,6 +29,7 @@
     "advanced": "Розширений",
     "basicHint": "Лише щоденні інструменти. Перейдіть на розширений, щоб побачити все.",
     "advancedHint": "Усі розділи та всі параметри запуску.",
+    "switchTo": "Перейти на {mode}",
     "pinned": "Визначено цим розгортанням"
   },
   "common": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.196.0",
+  "version": "0.196.1",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",