@cat-factory/app 0.138.1 → 0.139.0

package/app/components/brainstorm/BrainstormWindow.vue

@@ -8,7 +8,7 @@
 // options or hits the iteration cap. The converged direction — not the original description — is
 // what the downstream stage (the requirements review / the architect) consumes.
 import IterationCapPrompt from '~/components/pipeline/IterationCapPrompt.vue'
-import IconButton from '~/components/common/IconButton.vue'
+import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import { parseOutputOutline } from '~/utils/agentOutput'
 import type {
   BrainstormItem,
@@ -250,401 +250,365 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
 </script>
 
 <template>
-  <Teleport to="body">
-    <div
-      v-if="open"
-      class="fixed inset-0 z-50 flex max-h-[100dvh] items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
-      @click.self="close"
-    >
-      <div
-        class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
-        role="dialog"
-        aria-modal="true"
-      >
-        <!-- header -->
-        <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">
-          <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-amber-500/15">
-            <UIcon
-              :name="isArchitecture ? 'i-lucide-drafting-compass' : 'i-lucide-lightbulb'"
-              class="h-5 w-5 text-amber-300"
-            />
-          </div>
-          <div class="min-w-0">
-            <h1 class="truncate text-base font-semibold text-white">
-              {{
-                isArchitecture
-                  ? t('brainstorm.title.architecture')
-                  : t('brainstorm.title.requirements')
-              }}
-            </h1>
-            <p v-if="block" class="truncate text-xs text-slate-500">{{ block.title }}</p>
-          </div>
-          <div class="ms-auto flex items-center gap-1.5">
-            <UBadge v-if="session" color="neutral" variant="subtle" size="sm">
-              {{ t('brainstorm.iteration', { current: iteration, max: maxIterations }) }}
-            </UBadge>
-            <IconButton
-              icon="i-lucide-x"
-              color="neutral"
-              variant="ghost"
-              size="sm"
-              :label="t('common.close')"
-              @click="close"
-            />
+  <ResultWindowShell
+    :open="open"
+    :icon="isArchitecture ? 'i-lucide-drafting-compass' : 'i-lucide-lightbulb'"
+    icon-class="bg-amber-500/15 text-amber-300"
+    :title="
+      isArchitecture ? t('brainstorm.title.architecture') : t('brainstorm.title.requirements')
+    "
+    :subtitle="block?.title"
+    variant="centered"
+    width="5xl"
+    @close="close"
+  >
+    <template v-if="session" #header-extras>
+      <UBadge color="neutral" variant="subtle" size="sm">
+        {{ t('brainstorm.iteration', { current: iteration, max: maxIterations }) }}
+      </UBadge>
+    </template>
+
+    <div class="flex min-h-0 flex-1">
+      <!-- main column -->
+      <div class="min-w-0 flex-1 overflow-y-auto px-6 py-5">
+        <p class="mb-4 text-sm text-slate-400">
+          <i18n-t keypath="brainstorm.intro" tag="span" scope="global">
+            <template #subject>{{ subjectNoun }}</template>
+            <template #doc>{{ docNoun }}</template>
+            <template #choose>
+              <span class="text-slate-300">{{ t('brainstorm.introChoose') }}</span>
+            </template>
+            <template #dismiss>
+              <span class="text-slate-300">{{ t('brainstorm.introDismiss') }}</span>
+            </template>
+          </i18n-t>
+        </p>
+
+        <!-- empty state -->
+        <div
+          v-if="!session && !busy && !loading"
+          class="rounded-lg border border-dashed border-slate-700 p-8 text-center text-sm text-slate-500"
+        >
+          {{ t('brainstorm.empty') }}
+        </div>
+
+        <!-- working state (initial fetch on open, or an agent pass running) -->
+        <div
+          v-else-if="(busy || loading) && !session"
+          class="flex items-center justify-center gap-2 p-8 text-sm text-slate-400"
+        >
+          <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
+          {{ loading && !busy ? t('brainstorm.loading') : t('brainstorm.generating') }}
+        </div>
+
+        <template v-else-if="session">
+          <!-- converged -->
+          <div
+            v-if="incorporated"
+            class="mb-4 flex items-center gap-2 rounded-lg border border-emerald-900/60 bg-emerald-950/30 p-4 text-sm text-emerald-300"
+          >
+            <UIcon name="i-lucide-circle-check" class="h-5 w-5 shrink-0" />
+            {{ t('brainstorm.settledBanner', { doc: docNoun }) }}
           </div>
-        </header>
-
-        <div class="flex min-h-0 flex-1">
-          <!-- main column -->
-          <div class="min-w-0 flex-1 overflow-y-auto px-6 py-5">
-            <p class="mb-4 text-sm text-slate-400">
-              <i18n-t keypath="brainstorm.intro" tag="span" scope="global">
-                <template #subject>{{ subjectNoun }}</template>
-                <template #doc>{{ docNoun }}</template>
-                <template #choose>
-                  <span class="text-slate-300">{{ t('brainstorm.introChoose') }}</span>
-                </template>
-                <template #dismiss>
-                  <span class="text-slate-300">{{ t('brainstorm.introDismiss') }}</span>
-                </template>
-              </i18n-t>
-            </p>
 
-            <!-- empty state -->
-            <div
-              v-if="!session && !busy && !loading"
-              class="rounded-lg border border-dashed border-slate-700 p-8 text-center text-sm text-slate-500"
-            >
-              {{ t('brainstorm.empty') }}
-            </div>
+          <!-- iteration cap hit -->
+          <IterationCapPrompt
+            v-else-if="exceeded"
+            class="mb-4"
+            :heading="t('brainstorm.exceeded.heading', { max: maxIterations })"
+            :detail="t('brainstorm.exceeded.detail')"
+            :loading="acting"
+            @resolve="resolveExceeded"
+          />
+
+          <!-- working: the async cycle is running in the driver -->
+          <div
+            v-else-if="working"
+            class="mb-4 flex items-center gap-2 rounded-lg border border-amber-900/60 bg-amber-950/30 p-4 text-sm text-amber-200"
+          >
+            <UIcon name="i-lucide-loader-circle" class="h-5 w-5 shrink-0 animate-spin" />
+            <span v-if="incorporating">
+              {{ t('brainstorm.working.incorporating', { doc: docNoun }) }}
+            </span>
+            <span v-else>
+              {{ t('brainstorm.working.reReviewing') }}
+            </span>
+          </div>
 
-            <!-- working state (initial fetch on open, or an agent pass running) -->
+          <!-- options to react to -->
+          <div v-if="session.items.length" class="flex flex-col gap-3">
             <div
-              v-else-if="(busy || loading) && !session"
-              class="flex items-center justify-center gap-2 p-8 text-sm text-slate-400"
+              v-for="item in sortedItems"
+              :key="item.id"
+              class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+              :class="{ 'opacity-60': item.status === 'dismissed' }"
             >
-              <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
-              {{ loading && !busy ? t('brainstorm.loading') : t('brainstorm.generating') }}
-            </div>
-
-            <template v-else-if="session">
-              <!-- converged -->
-              <div
-                v-if="incorporated"
-                class="mb-4 flex items-center gap-2 rounded-lg border border-emerald-900/60 bg-emerald-950/30 p-4 text-sm text-emerald-300"
-              >
-                <UIcon name="i-lucide-circle-check" class="h-5 w-5 shrink-0" />
-                {{ t('brainstorm.settledBanner', { doc: docNoun }) }}
-              </div>
-
-              <!-- iteration cap hit -->
-              <IterationCapPrompt
-                v-else-if="exceeded"
-                class="mb-4"
-                :heading="t('brainstorm.exceeded.heading', { max: maxIterations })"
-                :detail="t('brainstorm.exceeded.detail')"
-                :loading="acting"
-                @resolve="resolveExceeded"
-              />
+              <div class="flex items-start gap-2">
+                <UIcon
+                  :name="CATEGORY_ICON[item.category]"
+                  class="mt-0.5 h-4 w-4 shrink-0 text-slate-400"
+                />
+                <div class="min-w-0 flex-1">
+                  <div class="flex flex-wrap items-center gap-1.5">
+                    <span class="text-sm font-medium text-white">{{ item.title }}</span>
+                    <UBadge size="xs" variant="subtle" :color="SEVERITY_COLOR[item.severity]">
+                      {{ t(SEVERITY_LABELS[item.severity]) }}
+                    </UBadge>
+                    <UBadge size="xs" variant="outline" color="neutral">
+                      {{ t(CATEGORY_LABELS[item.category]) }}
+                    </UBadge>
+                    <UBadge
+                      size="xs"
+                      variant="soft"
+                      :color="STATUS_COLOR[item.status]"
+                      class="ms-auto"
+                    >
+                      {{ t(STATUS_LABELS[item.status]) }}
+                    </UBadge>
+                  </div>
+                  <p class="mt-1 whitespace-pre-line text-sm text-slate-400">
+                    {{ item.detail }}
+                  </p>
 
-              <!-- working: the async cycle is running in the driver -->
-              <div
-                v-else-if="working"
-                class="mb-4 flex items-center gap-2 rounded-lg border border-amber-900/60 bg-amber-950/30 p-4 text-sm text-amber-200"
-              >
-                <UIcon name="i-lucide-loader-circle" class="h-5 w-5 shrink-0 animate-spin" />
-                <span v-if="incorporating">
-                  {{ t('brainstorm.working.incorporating', { doc: docNoun }) }}
-                </span>
-                <span v-else>
-                  {{ t('brainstorm.working.reReviewing') }}
-                </span>
-              </div>
+                  <!-- 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"
+                  >
+                    <span class="text-[10px] uppercase tracking-wide text-slate-500">
+                      {{ t('brainstorm.yourChoice') }}
+                    </span>
+                    <p class="whitespace-pre-line">{{ item.reply }}</p>
+                  </div>
 
-              <!-- options to react to -->
-              <div v-if="session.items.length" class="flex flex-col gap-3">
-                <div
-                  v-for="item in sortedItems"
-                  :key="item.id"
-                  class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
-                  :class="{ 'opacity-60': item.status === 'dismissed' }"
-                >
-                  <div class="flex items-start gap-2">
-                    <UIcon
-                      :name="CATEGORY_ICON[item.category]"
-                      class="mt-0.5 h-4 w-4 shrink-0 text-slate-400"
+                  <!-- react: choose (relevant) or dismiss (irrelevant) -->
+                  <template v-if="item.status === 'open' || item.status === 'answered'">
+                    <UTextarea
+                      v-model="drafts[item.id]"
+                      :rows="2"
+                      autoresize
+                      size="sm"
+                      class="mt-2 w-full"
+                      :placeholder="
+                        item.reply
+                          ? t('brainstorm.replyPlaceholder.refine')
+                          : t('brainstorm.replyPlaceholder.choose')
+                      "
+                      :disabled="frozen"
                     />
-                    <div class="min-w-0 flex-1">
-                      <div class="flex flex-wrap items-center gap-1.5">
-                        <span class="text-sm font-medium text-white">{{ item.title }}</span>
-                        <UBadge size="xs" variant="subtle" :color="SEVERITY_COLOR[item.severity]">
-                          {{ t(SEVERITY_LABELS[item.severity]) }}
-                        </UBadge>
-                        <UBadge size="xs" variant="outline" color="neutral">
-                          {{ t(CATEGORY_LABELS[item.category]) }}
-                        </UBadge>
-                        <UBadge
-                          size="xs"
-                          variant="soft"
-                          :color="STATUS_COLOR[item.status]"
-                          class="ms-auto"
-                        >
-                          {{ t(STATUS_LABELS[item.status]) }}
-                        </UBadge>
-                      </div>
-                      <p class="mt-1 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"
+                    <div class="mt-2 flex flex-wrap items-center gap-2">
+                      <UButton
+                        color="primary"
+                        variant="soft"
+                        size="xs"
+                        icon="i-lucide-corner-down-left"
+                        :disabled="
+                          !(drafts[item.id] ?? '').trim() || frozen || !access.canExecuteRuns.value
+                        "
+                        :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
+                        @click="submitReply(item)"
+                      >
+                        {{ t('brainstorm.saveChoice') }}
+                      </UButton>
+                      <UButton
+                        color="neutral"
+                        variant="ghost"
+                        size="xs"
+                        icon="i-lucide-x"
+                        :disabled="frozen || !access.canExecuteRuns.value"
+                        :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
+                        @click="setStatus(item, 'dismissed')"
                       >
-                        <span class="text-[10px] uppercase tracking-wide text-slate-500">
-                          {{ t('brainstorm.yourChoice') }}
-                        </span>
-                        <p class="whitespace-pre-line">{{ item.reply }}</p>
-                      </div>
-
-                      <!-- react: choose (relevant) or dismiss (irrelevant) -->
-                      <template v-if="item.status === 'open' || item.status === 'answered'">
-                        <UTextarea
-                          v-model="drafts[item.id]"
-                          :rows="2"
-                          autoresize
-                          size="sm"
-                          class="mt-2 w-full"
-                          :placeholder="
-                            item.reply
-                              ? t('brainstorm.replyPlaceholder.refine')
-                              : t('brainstorm.replyPlaceholder.choose')
-                          "
-                          :disabled="frozen"
-                        />
-                        <div class="mt-2 flex flex-wrap items-center gap-2">
-                          <UButton
-                            color="primary"
-                            variant="soft"
-                            size="xs"
-                            icon="i-lucide-corner-down-left"
-                            :disabled="
-                              !(drafts[item.id] ?? '').trim() ||
-                              frozen ||
-                              !access.canExecuteRuns.value
-                            "
-                            :title="
-                              access.canExecuteRuns.value ? undefined : t('access.noRunExecute')
-                            "
-                            @click="submitReply(item)"
-                          >
-                            {{ t('brainstorm.saveChoice') }}
-                          </UButton>
-                          <UButton
-                            color="neutral"
-                            variant="ghost"
-                            size="xs"
-                            icon="i-lucide-x"
-                            :disabled="frozen || !access.canExecuteRuns.value"
-                            :title="
-                              access.canExecuteRuns.value ? undefined : t('access.noRunExecute')
-                            "
-                            @click="setStatus(item, 'dismissed')"
-                          >
-                            {{ t('brainstorm.dismiss') }}
-                          </UButton>
-                        </div>
-                      </template>
-
-                      <!-- reopen a dismissed option -->
-                      <div v-else-if="item.status === 'dismissed'" class="mt-2">
-                        <UButton
-                          color="neutral"
-                          variant="ghost"
-                          size="xs"
-                          icon="i-lucide-rotate-ccw"
-                          :disabled="frozen || !access.canExecuteRuns.value"
-                          :title="
-                            access.canExecuteRuns.value ? undefined : t('access.noRunExecute')
-                          "
-                          @click="setStatus(item, 'open')"
-                        >
-                          {{ t('brainstorm.reopen') }}
-                        </UButton>
-                      </div>
+                        {{ t('brainstorm.dismiss') }}
+                      </UButton>
                     </div>
+                  </template>
+
+                  <!-- reopen a dismissed option -->
+                  <div v-else-if="item.status === 'dismissed'" class="mt-2">
+                    <UButton
+                      color="neutral"
+                      variant="ghost"
+                      size="xs"
+                      icon="i-lucide-rotate-ccw"
+                      :disabled="frozen || !access.canExecuteRuns.value"
+                      :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
+                      @click="setStatus(item, 'open')"
+                    >
+                      {{ t('brainstorm.reopen') }}
+                    </UButton>
                   </div>
                 </div>
               </div>
-
-              <!-- converged document: the standard-format direction -->
-              <section v-if="outline" class="mt-6 border-t border-slate-800 pt-5">
-                <div class="mb-3 flex items-center gap-1.5 text-[11px] text-emerald-400">
-                  <UIcon name="i-lucide-file-check-2" class="h-3.5 w-3.5" />
-                  <span class="font-semibold uppercase tracking-wide">
-                    {{ incorporated ? docNoun : t('brainstorm.docDraft', { doc: docNoun }) }}
-                  </span>
-                </div>
-                <div v-for="s in outline.sections" :key="s.id" class="mb-2">
-                  <button
-                    v-if="s.title"
-                    class="group flex w-full items-center gap-2 text-start"
-                    @click="toggle(s.id)"
-                  >
-                    <UIcon
-                      name="i-lucide-chevron-right"
-                      class="h-3.5 w-3.5 shrink-0 text-slate-500 transition-transform"
-                      :class="collapsed[s.id] ? '' : 'rotate-90'"
-                    />
-                    <span
-                      class="font-semibold text-white"
-                      :class="s.depth <= 1 ? 'text-base' : s.depth === 2 ? 'text-sm' : 'text-xs'"
-                      v-html="s.titleHtml"
-                    />
-                  </button>
-                  <div
-                    v-show="!s.title || !collapsed[s.id]"
-                    class="reader-prose mt-1 ps-5.5 text-[13px] leading-relaxed text-slate-300"
-                    v-html="s.bodyHtml"
-                  />
-                </div>
-              </section>
-            </template>
+            </div>
           </div>
 
-          <!-- right action rail -->
-          <aside class="hidden w-72 shrink-0 flex-col border-s border-slate-800 lg:flex">
-            <div class="flex flex-col gap-4 px-4 py-5">
-              <div v-if="session" class="space-y-2 text-xs text-slate-400">
-                <div class="flex items-center justify-between">
-                  <span>{{ t('brainstorm.rail.options') }}</span>
-                  <span class="text-slate-300">{{ session.items.length }}</span>
-                </div>
-                <div class="flex items-center justify-between">
-                  <span>{{ t('brainstorm.rail.open') }}</span>
-                  <span class="text-slate-300">{{ openCount }}</span>
-                </div>
-                <div class="flex items-center justify-between">
-                  <span>{{ t('brainstorm.rail.chosen') }}</span>
-                  <span class="text-slate-300">{{ answeredCount }}</span>
-                </div>
-                <div v-if="session.model" class="flex items-center justify-between">
-                  <span>{{ t('brainstorm.rail.model') }}</span>
-                  <span class="truncate ps-2 text-slate-500">{{ session.model }}</span>
-                </div>
-              </div>
-
-              <!-- action: ready (choose → incorporate / proceed) -->
-              <div
-                v-if="session && status === 'ready'"
-                class="space-y-2 border-t border-slate-800 pt-4"
+          <!-- converged document: the standard-format direction -->
+          <section v-if="outline" class="mt-6 border-t border-slate-800 pt-5">
+            <div class="mb-3 flex items-center gap-1.5 text-[11px] text-emerald-400">
+              <UIcon name="i-lucide-file-check-2" class="h-3.5 w-3.5" />
+              <span class="font-semibold uppercase tracking-wide">
+                {{ incorporated ? docNoun : t('brainstorm.docDraft', { doc: docNoun }) }}
+              </span>
+            </div>
+            <div v-for="s in outline.sections" :key="s.id" class="mb-2">
+              <button
+                v-if="s.title"
+                class="group flex w-full items-center gap-2 text-start"
+                @click="toggle(s.id)"
               >
-                <UButton
-                  v-if="canProceed"
-                  color="primary"
-                  size="sm"
-                  block
-                  icon="i-lucide-arrow-right"
-                  :ui="{ leadingIcon: 'rtl:-scale-x-100', trailingIcon: 'rtl:-scale-x-100' }"
-                  :loading="acting"
-                  :disabled="!access.canExecuteRuns.value"
-                  :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
-                  @click="proceed"
-                >
-                  {{ t('brainstorm.proceedNothing') }}
-                </UButton>
-                <UButton
-                  v-else
-                  color="primary"
-                  size="sm"
-                  block
-                  icon="i-lucide-wand-sparkles"
-                  :loading="reworking"
-                  :disabled="!canIncorporate || !access.canExecuteRuns.value"
-                  :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
-                  @click="incorporate()"
-                >
-                  {{ t('brainstorm.incorporateChoices') }}
-                </UButton>
-                <p class="text-[11px] leading-relaxed text-slate-500">
-                  <template v-if="canProceed">
-                    {{ t('brainstorm.hint.allDismissed') }}
-                  </template>
-                  <template v-else-if="canIncorporate">
-                    {{ t('brainstorm.hint.incorporate', { doc: docNoun }) }}
-                  </template>
-                  <template v-else> {{ t('brainstorm.hint.chooseAll') }} </template>
-                </p>
-              </div>
+                <UIcon
+                  name="i-lucide-chevron-right"
+                  class="h-3.5 w-3.5 shrink-0 text-slate-500 transition-transform"
+                  :class="collapsed[s.id] ? '' : 'rotate-90'"
+                />
+                <span
+                  class="font-semibold text-white"
+                  :class="s.depth <= 1 ? 'text-base' : s.depth === 2 ? 'text-sm' : 'text-xs'"
+                  v-html="s.titleHtml"
+                />
+              </button>
+              <div
+                v-show="!s.title || !collapsed[s.id]"
+                class="reader-prose mt-1 ps-5.5 text-[13px] leading-relaxed text-slate-300"
+                v-html="s.bodyHtml"
+              />
+            </div>
+          </section>
+        </template>
+      </div>
 
-              <!-- action: merged (inspect → re-run / redo) -->
-              <div v-if="session && merged" class="space-y-2 border-t border-slate-800 pt-4">
-                <UButton
-                  color="primary"
-                  size="sm"
-                  block
-                  icon="i-lucide-sparkles"
-                  :loading="busy"
-                  :disabled="!access.canExecuteRuns.value"
-                  :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
-                  @click="reReview"
-                >
-                  {{ busy ? t('brainstorm.reRunning') : t('brainstorm.reRun') }}
-                </UButton>
-                <UButton
-                  color="neutral"
-                  variant="soft"
-                  size="sm"
-                  block
-                  icon="i-lucide-pencil"
-                  @click="
-                    () => {
-                      showRedo = !showRedo
-                    }
-                  "
-                >
-                  {{ t('brainstorm.redoIncorporation') }}
-                </UButton>
-                <div v-if="showRedo" class="space-y-2">
-                  <UTextarea
-                    v-model="redoComment"
-                    :rows="3"
-                    autoresize
-                    size="sm"
-                    class="w-full"
-                    :placeholder="t('brainstorm.redoPlaceholder')"
-                  />
-                  <UButton
-                    color="primary"
-                    variant="soft"
-                    size="xs"
-                    block
-                    icon="i-lucide-wand-sparkles"
-                    :loading="reworking"
-                    :disabled="!redoComment.trim() || !access.canExecuteRuns.value"
-                    :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
-                    @click="incorporate(redoComment.trim())"
-                  >
-                    {{ t('brainstorm.redoWithDirection') }}
-                  </UButton>
-                </div>
-                <p class="text-[11px] leading-relaxed text-slate-500">
-                  {{ t('brainstorm.mergedHint') }}
-                </p>
-              </div>
+      <!-- right action rail -->
+      <aside class="hidden w-72 shrink-0 flex-col border-s border-slate-800 lg:flex">
+        <div class="flex flex-col gap-4 px-4 py-5">
+          <div v-if="session" class="space-y-2 text-xs text-slate-400">
+            <div class="flex items-center justify-between">
+              <span>{{ t('brainstorm.rail.options') }}</span>
+              <span class="text-slate-300">{{ session.items.length }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>{{ t('brainstorm.rail.open') }}</span>
+              <span class="text-slate-300">{{ openCount }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>{{ t('brainstorm.rail.chosen') }}</span>
+              <span class="text-slate-300">{{ answeredCount }}</span>
+            </div>
+            <div v-if="session.model" class="flex items-center justify-between">
+              <span>{{ t('brainstorm.rail.model') }}</span>
+              <span class="truncate ps-2 text-slate-500">{{ session.model }}</span>
+            </div>
+          </div>
 
-              <div
-                v-if="session && incorporated"
-                class="border-t border-slate-800 pt-4 text-[11px] leading-relaxed text-slate-500"
+          <!-- action: ready (choose → incorporate / proceed) -->
+          <div
+            v-if="session && status === 'ready'"
+            class="space-y-2 border-t border-slate-800 pt-4"
+          >
+            <UButton
+              v-if="canProceed"
+              color="primary"
+              size="sm"
+              block
+              icon="i-lucide-arrow-right"
+              :ui="{ leadingIcon: 'rtl:-scale-x-100', trailingIcon: 'rtl:-scale-x-100' }"
+              :loading="acting"
+              :disabled="!access.canExecuteRuns.value"
+              :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
+              @click="proceed"
+            >
+              {{ t('brainstorm.proceedNothing') }}
+            </UButton>
+            <UButton
+              v-else
+              color="primary"
+              size="sm"
+              block
+              icon="i-lucide-wand-sparkles"
+              :loading="reworking"
+              :disabled="!canIncorporate || !access.canExecuteRuns.value"
+              :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
+              @click="incorporate()"
+            >
+              {{ t('brainstorm.incorporateChoices') }}
+            </UButton>
+            <p class="text-[11px] leading-relaxed text-slate-500">
+              <template v-if="canProceed">
+                {{ t('brainstorm.hint.allDismissed') }}
+              </template>
+              <template v-else-if="canIncorporate">
+                {{ t('brainstorm.hint.incorporate', { doc: docNoun }) }}
+              </template>
+              <template v-else> {{ t('brainstorm.hint.chooseAll') }} </template>
+            </p>
+          </div>
+
+          <!-- action: merged (inspect → re-run / redo) -->
+          <div v-if="session && merged" class="space-y-2 border-t border-slate-800 pt-4">
+            <UButton
+              color="primary"
+              size="sm"
+              block
+              icon="i-lucide-sparkles"
+              :loading="busy"
+              :disabled="!access.canExecuteRuns.value"
+              :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
+              @click="reReview"
+            >
+              {{ busy ? t('brainstorm.reRunning') : t('brainstorm.reRun') }}
+            </UButton>
+            <UButton
+              color="neutral"
+              variant="soft"
+              size="sm"
+              block
+              icon="i-lucide-pencil"
+              @click="
+                () => {
+                  showRedo = !showRedo
+                }
+              "
+            >
+              {{ t('brainstorm.redoIncorporation') }}
+            </UButton>
+            <div v-if="showRedo" class="space-y-2">
+              <UTextarea
+                v-model="redoComment"
+                :rows="3"
+                autoresize
+                size="sm"
+                class="w-full"
+                :placeholder="t('brainstorm.redoPlaceholder')"
+              />
+              <UButton
+                color="primary"
+                variant="soft"
+                size="xs"
+                block
+                icon="i-lucide-wand-sparkles"
+                :loading="reworking"
+                :disabled="!redoComment.trim() || !access.canExecuteRuns.value"
+                :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
+                @click="incorporate(redoComment.trim())"
               >
-                {{ t('brainstorm.incorporatedFooter') }}
-              </div>
+                {{ t('brainstorm.redoWithDirection') }}
+              </UButton>
             </div>
-          </aside>
+            <p class="text-[11px] leading-relaxed text-slate-500">
+              {{ t('brainstorm.mergedHint') }}
+            </p>
+          </div>
+
+          <div
+            v-if="session && incorporated"
+            class="border-t border-slate-800 pt-4 text-[11px] leading-relaxed text-slate-500"
+          >
+            {{ t('brainstorm.incorporatedFooter') }}
+          </div>
         </div>
-      </div>
+      </aside>
     </div>
-  </Teleport>
+  </ResultWindowShell>
 </template>
 
 <style scoped>