@cat-factory/app 0.30.6 → 0.32.0

package/app/components/followUp/FollowUpWindow.vue

@@ -0,0 +1,257 @@
+<script setup lang="ts">
+// Follow-up companion window — the dedicated surface for the future-looking Coder's
+// surfaced items, opened via the universal result-view host (`ui.openFollowUps`). It reads
+// the live items straight off the run's Coder step (`step.followUps`, kept fresh by the
+// execution stream — a synchronous window, no `onOpen` loader) and lets a human decide each:
+// file a follow-up as a tracker issue, send it back to the Coder, answer a question, or
+// dismiss it. The pipeline's following steps stay blocked until every item is decided.
+import { computed, reactive } from 'vue'
+import { useResultView } from '~/composables/useResultView'
+import { useExecutionStore } from '~/stores/execution'
+import { useBoardStore } from '~/stores/board'
+import { useFollowUpsStore } from '~/stores/followUps'
+import type { FollowUpItem } from '~/types/execution'
+import { FOLLOW_UP_COMPANION_META } from '~/utils/catalog'
+
+const execution = useExecutionStore()
+const board = useBoardStore()
+const followUps = useFollowUpsStore()
+
+const { open, blockId, instanceId, stepIndex, close } = useResultView('follow-ups')
+
+const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
+const instance = computed(() =>
+  instanceId.value === null ? null : (execution.getInstance(instanceId.value) ?? null),
+)
+const step = computed(() => {
+  if (instance.value === null || stepIndex.value === null) return null
+  return instance.value.steps[stepIndex.value] ?? null
+})
+const items = computed<FollowUpItem[]>(() => step.value?.followUps?.items ?? [])
+const pendingCount = computed(() => items.value.filter((i) => i.status === 'pending').length)
+const loops = computed(() => step.value?.followUps?.loops ?? 0)
+const maxLoops = computed(() => step.value?.followUps?.maxLoops ?? 0)
+
+// Draft answers per question item (keyed by item id), so typing doesn't clobber on re-render.
+const drafts = reactive<Record<string, string>>({})
+
+function execId(): string | null {
+  return instanceId.value
+}
+
+async function onFile(item: FollowUpItem) {
+  const id = execId()
+  if (id) await followUps.fileItem(id, item.id).catch(() => {})
+}
+async function onQueue(item: FollowUpItem) {
+  const id = execId()
+  if (id) await followUps.queueItem(id, item.id).catch(() => {})
+}
+async function onAnswer(item: FollowUpItem) {
+  const id = execId()
+  const answer = (drafts[item.id] ?? '').trim()
+  if (id && answer) await followUps.answerItem(id, item.id, answer).catch(() => {})
+}
+async function onDismiss(item: FollowUpItem) {
+  const id = execId()
+  if (id) await followUps.dismissItem(id, item.id).catch(() => {})
+}
+
+const STATUS_META: Record<
+  FollowUpItem['status'],
+  { label: string; badge: 'neutral' | 'info' | 'success' | 'warning'; text: string }
+> = {
+  pending: { label: 'Needs a decision', badge: 'warning', text: 'text-amber-300' },
+  filed: { label: 'Filed as issue', badge: 'success', text: 'text-emerald-300' },
+  queued: { label: 'Sent to Coder', badge: 'info', text: 'text-sky-300' },
+  answered: { label: 'Answered', badge: 'info', text: 'text-sky-300' },
+  dismissed: { label: 'Dismissed', badge: 'neutral', text: 'text-slate-400' },
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-50 flex items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
+      @click.self="close"
+    >
+      <div
+        class="m-4 flex w-full max-w-3xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+      >
+        <!-- Header -->
+        <header class="flex items-center gap-3 border-b border-slate-800 px-5 py-3">
+          <span
+            class="flex h-8 w-8 items-center justify-center rounded-lg bg-pink-500/15 text-pink-300"
+          >
+            <UIcon :name="FOLLOW_UP_COMPANION_META.icon" class="h-4 w-4" />
+          </span>
+          <div class="min-w-0 flex-1">
+            <h2 class="truncate text-sm font-semibold text-slate-100">
+              {{ FOLLOW_UP_COMPANION_META.label }}{{ block ? ` — ${block.title}` : '' }}
+            </h2>
+            <p class="truncate text-[11px] text-slate-400">
+              Forward-looking follow-ups & questions the Coder surfaced. The pipeline continues once
+              every item is decided.
+            </p>
+          </div>
+          <UBadge :color="pendingCount > 0 ? 'warning' : 'success'" variant="subtle" size="sm">
+            {{ pendingCount > 0 ? `${pendingCount} to decide` : 'All decided' }}
+          </UBadge>
+          <button
+            class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
+            @click="close"
+          >
+            <UIcon name="i-lucide-x" class="h-4 w-4" />
+          </button>
+        </header>
+
+        <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
+          <!-- Empty -->
+          <div
+            v-if="items.length === 0"
+            class="flex h-full flex-col items-center justify-center gap-2 py-10 text-center text-slate-400"
+          >
+            <UIcon :name="FOLLOW_UP_COMPANION_META.icon" class="h-8 w-8 opacity-40" />
+            <p class="text-sm">No follow-ups yet.</p>
+            <p class="max-w-sm text-[11px] text-slate-500">
+              As the Coder works it streams loose ends, side-tasks and questions here. They appear
+              live — you can act on them before the Coder even finishes.
+            </p>
+          </div>
+
+          <div v-else class="space-y-3">
+            <p
+              v-if="followUps.error"
+              class="rounded-md bg-rose-500/10 px-3 py-2 text-[12px] text-rose-300"
+            >
+              {{ followUps.error }}
+            </p>
+
+            <article
+              v-for="item in items"
+              :key="item.id"
+              class="rounded-xl border border-slate-800 bg-slate-900/60 px-4 py-3"
+              :class="item.status === 'pending' ? 'border-amber-500/40' : ''"
+            >
+              <div class="flex items-start gap-2">
+                <UIcon
+                  :name="item.kind === 'question' ? 'i-lucide-circle-help' : 'i-lucide-compass'"
+                  class="mt-0.5 h-4 w-4 shrink-0"
+                  :class="item.kind === 'question' ? 'text-sky-300' : 'text-pink-300'"
+                />
+                <div class="min-w-0 flex-1">
+                  <div class="flex items-center gap-2">
+                    <h3 class="min-w-0 flex-1 truncate text-[13px] font-medium text-slate-100">
+                      {{ item.title }}
+                    </h3>
+                    <UBadge :color="STATUS_META[item.status].badge" variant="subtle" size="sm">
+                      {{ STATUS_META[item.status].label }}
+                    </UBadge>
+                  </div>
+                  <p v-if="item.detail" class="mt-1 whitespace-pre-wrap text-[12px] text-slate-300">
+                    {{ item.detail }}
+                  </p>
+                  <p v-if="item.suggestedAction" class="mt-1 text-[11px] text-slate-400">
+                    <span class="text-slate-500">Suggested:</span> {{ item.suggestedAction }}
+                  </p>
+                  <p v-if="item.status === 'filed' && item.ticketUrl" class="mt-1 text-[11px]">
+                    <a
+                      :href="item.ticketUrl"
+                      target="_blank"
+                      rel="noopener"
+                      class="text-emerald-300 hover:underline"
+                    >
+                      {{ item.ticketExternalId ?? 'View issue' }}
+                    </a>
+                  </p>
+                  <p
+                    v-if="item.status === 'answered' && item.answer"
+                    class="mt-1 text-[11px] text-slate-300"
+                  >
+                    <span class="text-slate-500">Your answer:</span> {{ item.answer }}
+                  </p>
+
+                  <!-- Actions (only while the item is still undecided) -->
+                  <div v-if="item.status === 'pending'" class="mt-2.5">
+                    <!-- A question: answer it -->
+                    <div v-if="item.kind === 'question'" class="space-y-2">
+                      <textarea
+                        v-model="drafts[item.id]"
+                        rows="2"
+                        placeholder="Answer this question — it's folded into the Coder's next pass…"
+                        class="w-full resize-y rounded-md border border-slate-700 bg-slate-950/60 px-2.5 py-1.5 text-[12px] text-slate-100 placeholder:text-slate-600 focus:border-sky-500 focus:outline-none"
+                      />
+                      <div class="flex items-center gap-2">
+                        <UButton
+                          size="xs"
+                          color="primary"
+                          :loading="followUps.isActing(item.id)"
+                          :disabled="!(drafts[item.id] ?? '').trim()"
+                          @click="onAnswer(item)"
+                        >
+                          Answer & send back
+                        </UButton>
+                        <UButton
+                          size="xs"
+                          color="neutral"
+                          variant="ghost"
+                          :loading="followUps.isActing(item.id)"
+                          @click="onDismiss(item)"
+                        >
+                          Dismiss
+                        </UButton>
+                      </div>
+                    </div>
+
+                    <!-- A follow-up: file / send back / dismiss -->
+                    <div v-else class="flex flex-wrap items-center gap-2">
+                      <UButton
+                        size="xs"
+                        color="primary"
+                        icon="i-lucide-ticket"
+                        :loading="followUps.isActing(item.id)"
+                        @click="onFile(item)"
+                      >
+                        File as issue
+                      </UButton>
+                      <UButton
+                        size="xs"
+                        color="info"
+                        variant="soft"
+                        icon="i-lucide-corner-up-left"
+                        :loading="followUps.isActing(item.id)"
+                        @click="onQueue(item)"
+                      >
+                        Send to Coder
+                      </UButton>
+                      <UButton
+                        size="xs"
+                        color="neutral"
+                        variant="ghost"
+                        :loading="followUps.isActing(item.id)"
+                        @click="onDismiss(item)"
+                      >
+                        Dismiss
+                      </UButton>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        <footer
+          class="flex items-center justify-between border-t border-slate-800 px-5 py-2.5 text-[11px] text-slate-400"
+        >
+          <span>
+            {{ items.length }} item{{ items.length === 1 ? '' : 's' }} ·
+            {{ pendingCount }} undecided
+          </span>
+          <span v-if="maxLoops > 0">Coder loops used: {{ loops }} / {{ maxLoops }}</span>
+        </footer>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/app/components/kaizen/KaizenPanel.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import { onKeyStroke } from '@vueuse/core'
+import type { KaizenGrading } from '~/types/domain'
+import { agentKindMeta } from '~/utils/catalog'
+
+// The Kaizen screen: a full-panel overlay listing the workspace's grading history and
+// its verified-combo library. Opened via `ui.openKaizen()` from the sidebar. Read-only —
+// grading is scheduled by the engine and run by the background sweep, never from here.
+const ui = useUiStore()
+const kaizen = useKaizenStore()
+
+const open = computed(() => ui.kaizenScreenOpen)
+
+watch(open, (isOpen) => {
+  if (isOpen) void kaizen.loadOverview()
+})
+
+function close() {
+  ui.closeKaizen()
+}
+onKeyStroke('Escape', () => {
+  if (open.value) close()
+})
+
+function meta(kind: string) {
+  return agentKindMeta(kind)
+}
+function when(ms: number): string {
+  return new Date(ms).toLocaleString()
+}
+function gradeTone(g: KaizenGrading): string {
+  if (g.status === 'failed') return 'text-slate-500'
+  if (g.grade == null) return 'text-slate-400'
+  if (g.grade >= 5) return 'text-emerald-400'
+  if (g.grade >= 4) return 'text-lime-400'
+  if (g.grade === 3) return 'text-amber-400'
+  return 'text-rose-400'
+}
+function statusLabel(g: KaizenGrading): string {
+  if (g.status === 'scheduled') return 'Scheduled'
+  if (g.status === 'running') return 'Grading…'
+  if (g.status === 'failed') return 'Failed'
+  return g.grade != null ? `${g.grade}/5` : 'Graded'
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="kz-fade">
+      <div
+        v-if="open"
+        class="fixed inset-0 z-[60] flex flex-col bg-slate-950/96 backdrop-blur-sm"
+        role="dialog"
+        aria-modal="true"
+      >
+        <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-teal-500/15">
+            <UIcon name="i-lucide-sparkles" class="h-5 w-5 text-teal-400" />
+          </div>
+          <div class="min-w-0">
+            <h1 class="truncate text-base font-semibold text-white">Kaizen</h1>
+            <p class="truncate text-xs text-slate-500">
+              Continuous-improvement grading of agent runs
+            </p>
+          </div>
+          <div class="ml-auto flex items-center gap-2">
+            <UButton
+              icon="i-lucide-refresh-cw"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              :loading="kaizen.loadingOverview"
+              @click="kaizen.loadOverview()"
+            >
+              Refresh
+            </UButton>
+            <UButton icon="i-lucide-x" size="xs" color="neutral" variant="ghost" @click="close">
+              Close
+            </UButton>
+          </div>
+        </header>
+
+        <div
+          v-if="kaizen.available === false"
+          class="flex flex-1 items-center justify-center text-sm text-slate-500"
+        >
+          Kaizen is not configured on this deployment.
+        </div>
+
+        <div v-else class="grid flex-1 grid-cols-1 gap-6 overflow-auto p-6 lg:grid-cols-3">
+          <!-- Verified combos -->
+          <section class="lg:col-span-1">
+            <h2 class="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-200">
+              <UIcon name="i-lucide-badge-check" class="h-4 w-4 text-emerald-400" />
+              Verified combos
+              <span class="text-xs font-normal text-slate-500">({{ kaizen.verifiedCount }})</span>
+            </h2>
+            <p class="mb-3 text-[11px] text-slate-500">
+              A prompt + agent + model combination that graded 4 or 5 with no recommendations five
+              times in a row. These are no longer graded.
+            </p>
+            <ul class="space-y-2">
+              <li
+                v-for="c in kaizen.verified"
+                :key="c.comboKey"
+                class="rounded-lg border border-slate-800 bg-slate-900/40 p-2.5"
+              >
+                <div class="flex items-center gap-2">
+                  <UIcon
+                    :name="meta(c.agentKind).icon"
+                    class="h-3.5 w-3.5 shrink-0"
+                    :style="{ color: meta(c.agentKind).color }"
+                  />
+                  <span class="text-xs font-medium text-slate-200">{{
+                    meta(c.agentKind).label
+                  }}</span>
+                  <UIcon
+                    v-if="c.verified"
+                    name="i-lucide-badge-check"
+                    class="ml-auto h-3.5 w-3.5 text-emerald-400"
+                  />
+                  <span v-else class="ml-auto text-[11px] text-slate-500">
+                    {{ c.consecutiveHighGrades }}/5
+                  </span>
+                </div>
+                <div class="mt-1 truncate text-[11px] text-slate-500" :title="c.model">
+                  {{ c.model }} · prompt v{{ c.promptVersion }}
+                </div>
+              </li>
+              <li v-if="kaizen.verified.length === 0" class="text-xs text-slate-600">
+                No combos yet.
+              </li>
+            </ul>
+          </section>
+
+          <!-- Grading history -->
+          <section class="lg:col-span-2">
+            <h2 class="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-200">
+              <UIcon name="i-lucide-history" class="h-4 w-4 text-teal-400" />
+              Grading history
+            </h2>
+            <div class="overflow-hidden rounded-lg border border-slate-800">
+              <table class="w-full text-left text-xs">
+                <thead class="bg-slate-900/60 text-[11px] uppercase tracking-wide text-slate-500">
+                  <tr>
+                    <th class="px-3 py-2 font-medium">When</th>
+                    <th class="px-3 py-2 font-medium">Agent</th>
+                    <th class="px-3 py-2 font-medium">Model</th>
+                    <th class="px-3 py-2 font-medium">Grade</th>
+                    <th class="px-3 py-2 font-medium">Recommendations</th>
+                  </tr>
+                </thead>
+                <tbody class="divide-y divide-slate-800/70">
+                  <tr v-for="g in kaizen.history" :key="g.id" class="align-top">
+                    <td class="whitespace-nowrap px-3 py-2 text-slate-500">
+                      {{ when(g.createdAt) }}
+                    </td>
+                    <td class="px-3 py-2">
+                      <span class="flex items-center gap-1.5">
+                        <UIcon
+                          :name="meta(g.agentKind).icon"
+                          class="h-3.5 w-3.5"
+                          :style="{ color: meta(g.agentKind).color }"
+                        />
+                        <span class="text-slate-200">{{ meta(g.agentKind).label }}</span>
+                        <span class="text-slate-600">v{{ g.promptVersion }}</span>
+                      </span>
+                    </td>
+                    <td class="max-w-[12rem] truncate px-3 py-2 text-slate-400" :title="g.model">
+                      {{ g.model }}
+                    </td>
+                    <td class="whitespace-nowrap px-3 py-2 font-semibold" :class="gradeTone(g)">
+                      {{ statusLabel(g) }}
+                    </td>
+                    <td class="px-3 py-2 text-slate-400">
+                      <ul v-if="g.recommendations.length" class="list-disc space-y-0.5 pl-4">
+                        <li v-for="(r, i) in g.recommendations" :key="i">{{ r }}</li>
+                      </ul>
+                      <span v-else-if="g.status === 'complete'" class="text-slate-600">—</span>
+                      <span v-else-if="g.error" class="text-rose-400/80">{{ g.error }}</span>
+                    </td>
+                  </tr>
+                  <tr v-if="kaizen.history.length === 0">
+                    <td colspan="5" class="px-3 py-6 text-center text-slate-600">
+                      No gradings yet.
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </section>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.kz-fade-enter-active,
+.kz-fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+.kz-fade-enter-from,
+.kz-fade-leave-to {
+  opacity: 0;
+}
+</style>

package/app/components/kaizen/KaizenStepStatus.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+
+// Per-step Kaizen grading status, shown inside the run window (NOT on the board). Reads
+// the grading for this run's step from the kaizen store, lazily loading the run's
+// gradings on first mount, and renders the scheduled→running→complete status plus the
+// grade, summary and recommendations once available.
+const props = defineProps<{
+  /** The run (execution) id. */
+  instanceId: string | null | undefined
+  /** The step's index within the run. */
+  stepIndex: number | null | undefined
+}>()
+
+const kaizen = useKaizenStore()
+
+const grading = computed(() => {
+  if (!props.instanceId || props.stepIndex == null) return null
+  return kaizen.gradingForStep(props.instanceId, props.stepIndex)
+})
+
+// Load the run's gradings once when we have an id and nothing cached yet. The stream
+// keeps them live afterwards.
+watch(
+  () => props.instanceId,
+  (id) => {
+    if (id && kaizen.gradingsFor(id).length === 0 && kaizen.available !== false) {
+      void kaizen.loadForExecution(id)
+    }
+  },
+  { immediate: true },
+)
+
+const tone = computed(() => {
+  const g = grading.value
+  if (!g || g.grade == null) return 'text-slate-400'
+  if (g.grade >= 5) return 'text-emerald-400'
+  if (g.grade >= 4) return 'text-lime-400'
+  if (g.grade === 3) return 'text-amber-400'
+  return 'text-rose-400'
+})
+</script>
+
+<template>
+  <section v-if="grading" class="rounded-xl border border-slate-800 bg-slate-900/50 p-4">
+    <div class="flex items-center gap-2">
+      <UIcon name="i-lucide-sparkles" class="h-4 w-4 text-teal-400" />
+      <h3 class="text-sm font-semibold text-slate-200">Kaizen grading</h3>
+      <span class="ml-auto flex items-center gap-1.5 text-xs">
+        <template v-if="grading.status === 'scheduled'">
+          <UIcon name="i-lucide-clock" class="h-3.5 w-3.5 text-slate-500" />
+          <span class="text-slate-400">Scheduled</span>
+        </template>
+        <template v-else-if="grading.status === 'running'">
+          <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin text-teal-400" />
+          <span class="text-teal-300">Grading…</span>
+        </template>
+        <template v-else-if="grading.status === 'failed'">
+          <UIcon name="i-lucide-circle-alert" class="h-3.5 w-3.5 text-rose-400" />
+          <span class="text-rose-400">Failed</span>
+        </template>
+        <template v-else>
+          <span class="font-semibold" :class="tone">{{ grading.grade }}/5</span>
+        </template>
+      </span>
+    </div>
+
+    <p v-if="grading.status === 'scheduled'" class="mt-2 text-[11px] text-slate-500">
+      A Kaizen grading is queued for this step. It runs in the background after the run.
+    </p>
+
+    <template v-else-if="grading.status === 'complete'">
+      <p v-if="grading.summary" class="mt-2 text-xs text-slate-300">{{ grading.summary }}</p>
+      <div v-if="grading.recommendations.length" class="mt-2">
+        <p class="text-[11px] font-medium uppercase tracking-wide text-slate-500">
+          Recommendations
+        </p>
+        <ul class="mt-1 list-disc space-y-0.5 pl-4 text-xs text-slate-300">
+          <li v-for="(r, i) in grading.recommendations" :key="i">{{ r }}</li>
+        </ul>
+      </div>
+      <p v-else class="mt-2 text-[11px] text-emerald-400/80">
+        Smooth interaction — nothing to improve.
+      </p>
+      <p v-if="grading.graderModel" class="mt-2 text-[10px] text-slate-600">
+        Graded by {{ grading.graderModel }}
+      </p>
+    </template>
+
+    <p v-else-if="grading.status === 'failed'" class="mt-2 text-[11px] text-rose-400/80">
+      {{ grading.error ?? 'The grading could not be completed.' }}
+    </p>
+  </section>
+</template>

package/app/components/layout/NotificationsInbox.vue

@@ -36,6 +36,9 @@ const META: Record<Notification['type'], { icon: string; color: Accent; action:
   // Clicking the title opens the human-testing window for the task (see `reveal`); "act" just
   // marks it read (the gate is resolved in that window — confirm / request a fix — not here).
   human_test_ready: { icon: 'i-lucide-user-check', color: 'primary', action: 'Mark read' },
+  // Clicking the title opens the Follow-up companion window for the run (see `reveal`); "act"
+  // just marks it read (items are decided in that window — file / send back / answer — not here).
+  followup_pending: { icon: 'i-lucide-compass', color: 'warning', action: 'Mark read' },
 }
 
 /** A notification the escalation sweep has flagged as overdue (waited past the threshold). */
@@ -81,9 +84,19 @@ function reveal(n: Notification) {
   else if (n.type === 'clarity_review') ui.openClarityReview(n.blockId)
   else if (n.type === 'decision_required') revealDecision(n)
   else if (n.type === 'human_test_ready') revealHumanTest(n)
+  else if (n.type === 'followup_pending') revealFollowUps(n)
   else ui.select(n.blockId)
 }
 
+/**
+ * Open the Follow-up companion window for a run whose Coder parked on undecided items.
+ * Falls back to focusing the block when the run isn't loaded.
+ */
+function revealFollowUps(n: Notification) {
+  if (n.executionId && execution.getInstance(n.executionId)) ui.openFollowUps(n.executionId)
+  else if (n.blockId) ui.select(n.blockId)
+}
+
 /**
  * Open the human-testing window for a parked `human-test` gate: find the run's parked
  * human-test step and open it through the universal step dispatch (its archetype declares

package/app/components/layout/SideBar.vue

@@ -138,6 +138,18 @@ watch(
         >
           Sandbox
         </UButton>
+        <!-- The Kaizen screen: grading history + verified prompt/agent/model combos. -->
+        <UButton
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-sparkles"
+          class="justify-start"
+          @click="ui.openKaizen()"
+        >
+          Kaizen
+        </UButton>
       </div>
     </section>
 

package/app/components/panels/AgentStepDetail.vue

@@ -313,6 +313,12 @@ async function copyOutput() {
                 />
               </section>
 
+              <!-- post-run Kaizen grading status + results for this step (run-details only) -->
+              <KaizenStepStatus
+                :instance-id="ctx?.instanceId ?? null"
+                :step-index="ctx?.stepIndex ?? null"
+              />
+
               <!-- companion rework budget spent: the shared iteration-cap decision
                    (one more round / proceed with the current output / stop & reset) -->
               <IterationCapPrompt

package/app/components/panels/StepResultViewHost.vue

@@ -13,18 +13,22 @@
 import { computed, type Component } from 'vue'
 import RequirementsReviewWindow from '~/components/requirements/RequirementsReviewWindow.vue'
 import ClarityReviewWindow from '~/components/clarity/ClarityReviewWindow.vue'
+import BrainstormWindow from '~/components/brainstorm/BrainstormWindow.vue'
 import TestReportWindow from '~/components/testing/TestReportWindow.vue'
 import HumanTestWindow from '~/components/humanTest/HumanTestWindow.vue'
 import GateResultView from '~/components/gates/GateResultView.vue'
 import ConsensusSessionWindow from '~/components/consensus/ConsensusSessionWindow.vue'
 import GenericStructuredResultView from '~/components/panels/GenericStructuredResultView.vue'
 import ServiceSpecWindow from '~/components/spec/ServiceSpecWindow.vue'
+import FollowUpWindow from '~/components/followUp/FollowUpWindow.vue'
 
 const ui = useUiStore()
 
 const STEP_RESULT_VIEWS: Record<string, Component> = {
   'requirements-review': RequirementsReviewWindow,
   'clarity-review': ClarityReviewWindow,
+  // Shared by both brainstorm stages (requirements + architecture); the window reads the stage.
+  brainstorm: BrainstormWindow,
   tester: TestReportWindow,
   // The human-testing gate: env URL + confirm / request-fix / pull-main / recreate / destroy.
   'human-test': HumanTestWindow,
@@ -38,6 +42,9 @@ const STEP_RESULT_VIEWS: Record<string, Component> = {
   // The service's prescriptive spec tree (+ Gherkin), opened from the inspector's "View
   // Requirements" button. Not a pipeline-step view — opened directly via `ui.openServiceSpec`.
   'service-spec': ServiceSpecWindow,
+  // The future-looking Follow-up companion: the Coder's surfaced loose ends / questions.
+  // Opened directly via `ui.openFollowUps` (the blinking chip + the `followup_pending` card).
+  'follow-ups': FollowUpWindow,
 }
 
 const active = computed<Component | null>(() => {