@cat-factory/app 0.283.0 → 0.285.0

package/README.md

@@ -1030,6 +1030,25 @@ event left to restore it.
   (`refreshMark()` / `hydratedSince()`) and stands down if so, which is what stops a mutation that
   refreshes directly AND raises a coarse event from paying for two snapshots. That skip rests on
   the server emitting a coarse `board` event only after committing what it announces.
+- **The board snapshot's runs are a LEAN PROJECTION, so a hydrate can WITHHOLD what it does not
+  clobber.** `projectExecutionForBoard` (contracts) strips each step's captured prose from the
+  snapshot's executions and stamps the instance `projected`; a live `execution` event still carries
+  the whole run. Two rules follow, and both are the clobber rule in a new shape. A step-detail
+  surface fetches the run before rendering (`execution.ensureFull`, asked by the two overlay HOSTS
+  so no window can forget) and reads `stepHasOutput`, never `step.output`, for the "there is prose
+  here" affordance. And the store's reconcile carries the withheld fields forward ONLY at an equal
+  `rev`: at the same revision the withheld prose IS what the cache holds, one revision later it may
+  not be, so a newer projection replaces and the open overlay re-fetches.
+- **`execution.instances` is a `shallowRef`, so a write must both TRIGGER and change IDENTITY.**
+  Nothing under the ref is a reactive proxy any more, so the only dependency a reader can hold is
+  the ref itself, and nearly every reader holds it through an identity-stable chain
+  (`computed(() => getInstance(id))` to `steps[i]` to one field). `triggerRef` re-runs the FIRST
+  computed in that chain, and Vue stops propagating when its recomputed value is `===` the previous
+  one, so a run patched in place reaches that computed and nothing below it. `upsert` replaces the
+  run object; `echoAfter` applies the action store's patch to a COPY of the run and its steps and
+  swaps that in. A missing trigger and an in-place patch are both SILENT, so
+  `stores/execution.spec.ts` pins each write shape twice: once on the array, once through the
+  `getInstance` chain a window actually reads.
 - **Pin it with a store-level unit test** (`stores/workspace.spec.ts` for refreshes,
   `stores/workspace/refreshFunnel.spec.ts` for the funnel's own rules, `stores/execution.spec.ts`
   for echoes): drive the two orderings and assert the fresher one wins.

package/app/components/board/BoardCanvas.logic.spec.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest'
+import {
+  createBoardNodeProjection,
+  frameZIndex,
+  type BoardNodeSource,
+} from '~/components/board/BoardCanvas.logic'
+
+const NO_STACK = { draggingId: null, hoveredFrameId: null }
+
+function at(id: string, x = 0, y = 0): BoardNodeSource {
+  return { id, position: { x, y } }
+}
+
+describe('frameZIndex', () => {
+  it('lifts the dragged frame above the hovered one, and both above the rest', () => {
+    const stacking = { draggingId: 'dragged', hoveredFrameId: 'hovered' }
+    expect(frameZIndex('dragged', stacking)).toBeGreaterThan(frameZIndex('hovered', stacking))
+    expect(frameZIndex('hovered', stacking)).toBeGreaterThan(frameZIndex('other', stacking))
+  })
+})
+
+describe('createBoardNodeProjection', () => {
+  it('projects frames and epics with the fields the canvas binds', () => {
+    const project = createBoardNodeProjection()
+    const [frame, epic] = project([at('f1', 10, 20)], [at('e1', 30, 40)], NO_STACK)
+    expect(frame).toMatchObject({
+      id: 'f1',
+      type: 'block',
+      position: { x: 10, y: 20 },
+      draggable: false,
+      zIndex: 1,
+    })
+    expect(epic).toMatchObject({
+      id: 'e1',
+      type: 'epic',
+      position: { x: 30, y: 40 },
+      draggable: true,
+    })
+  })
+
+  // The whole point of the memo: a hover changes two nodes, so it must allocate two nodes.
+  it('reuses every node a hover did not change', () => {
+    const project = createBoardNodeProjection()
+    const frames = [at('a'), at('b'), at('c')]
+    const before = project(frames, [], NO_STACK)
+    const after = project(frames, [], { draggingId: null, hoveredFrameId: 'b' })
+
+    expect(after[0]).toBe(before[0])
+    expect(after[2]).toBe(before[2])
+    expect(after[1]).not.toBe(before[1])
+    expect(after[1]!.zIndex).toBeGreaterThan(before[1]!.zIndex!)
+  })
+
+  it('rebuilds a node whose position moved', () => {
+    const project = createBoardNodeProjection()
+    const before = project([at('a', 0, 0)], [], NO_STACK)
+    const after = project([at('a', 5, 0)], [], NO_STACK)
+    expect(after[0]).not.toBe(before[0])
+    expect(after[0]!.position).toEqual({ x: 5, y: 0 })
+  })
+
+  it('does not keep a removed frame alive in the memo', () => {
+    const project = createBoardNodeProjection()
+    const first = project([at('a'), at('b')], [], NO_STACK)
+    project([at('b')], [], NO_STACK)
+    // 'a' is gone from the cache, so its return is a fresh object rather than the stale one.
+    const back = project([at('a'), at('b')], [], NO_STACK)
+    expect(back[0]).not.toBe(first[0])
+    expect(back.map((n) => n.id)).toEqual(['a', 'b'])
+  })
+})

package/app/components/board/BoardCanvas.logic.ts

@@ -0,0 +1,92 @@
+/**
+ * The board's Vue Flow node projection, and the memo that keeps a hover cheap.
+ *
+ * Only frames and epics are canvas nodes (tasks live inside their frame, laid out in swimlanes).
+ * The projection is trivial, but it is recomputed for a reason that has nothing to do with the
+ * board changing: a frame's `zIndex` encodes the STACKING state (which frame is being dragged,
+ * which is hovered), so every pointer move between two overlapping services re-derived the whole
+ * array, and Vue Flow re-diffed every node in it against a set of freshly allocated objects that
+ * were, for all but one or two, identical to the ones it already held.
+ *
+ * Memoising per node fixes that without changing what the array contains: the key carries every
+ * field the node has, so a node whose fields are unchanged comes back as the SAME object and a
+ * changed one is rebuilt. A hover then allocates two nodes instead of all of them, and Vue Flow's
+ * diff sees two changes instead of N.
+ *
+ * The cache is rebuilt from the hits of each pass, so a deleted frame's entry does not outlive it.
+ */
+export interface BoardNodeSource {
+  id: string
+  position: { x: number; y: number }
+}
+
+export interface BoardFlowNode {
+  id: string
+  type: 'block' | 'epic'
+  position: { x: number; y: number }
+  draggable: boolean
+  zIndex?: number
+  data: Record<string, never>
+}
+
+/** Where a frame sits in the stack: dragged on top, then hovered, then everything else. */
+export interface FrameStacking {
+  draggingId: string | null
+  hoveredFrameId: string | null
+}
+
+/**
+ * Vue Flow's `elevate-nodes-on-select` is OFF (see BoardCanvas), so stacking is driven purely by
+ * these two: the frame being dragged is lifted above all, then the hovered one (the un-obscured
+ * frame under the pointer), so overlapping services can always be reached and reordered.
+ */
+export function frameZIndex(id: string, stacking: FrameStacking): number {
+  if (stacking.draggingId === id) return 1000
+  if (stacking.hoveredFrameId === id) return 100
+  return 1
+}
+
+export function createBoardNodeProjection() {
+  let cache = new Map<string, BoardFlowNode>()
+
+  return function project(
+    frames: readonly BoardNodeSource[],
+    epics: readonly BoardNodeSource[],
+    stacking: FrameStacking,
+  ): BoardFlowNode[] {
+    const next = new Map<string, BoardFlowNode>()
+    const nodes: BoardFlowNode[] = []
+
+    const take = (key: string, build: () => BoardFlowNode) => {
+      const node = cache.get(key) ?? build()
+      next.set(key, node)
+      nodes.push(node)
+    }
+
+    for (const frame of frames) {
+      const zIndex = frameZIndex(frame.id, stacking)
+      take(`block|${frame.id}|${frame.position.x}|${frame.position.y}|${zIndex}`, () => ({
+        id: frame.id,
+        type: 'block',
+        position: { x: frame.position.x, y: frame.position.y },
+        // Always-expanded frames fill the viewport; keep them non-draggable so the pane pans
+        // through them (they move via their header handle, see BlockNode).
+        draggable: false,
+        zIndex,
+        data: {},
+      }))
+    }
+    for (const epic of epics) {
+      take(`epic|${epic.id}|${epic.position.x}|${epic.position.y}`, () => ({
+        id: epic.id,
+        type: 'epic',
+        position: { x: epic.position.x, y: epic.position.y },
+        draggable: true,
+        data: {},
+      }))
+    }
+
+    cache = next
+    return nodes
+  }
+}

package/app/components/board/BoardCanvas.vue

@@ -14,6 +14,7 @@ import { useFrameStacking } from '~/composables/useFrameStacking'
 import { useFramePlacement } from '~/composables/useFramePlacement'
 import { useViewport } from '~/composables/useViewport'
 import { boardPanMode } from '~/utils/boardPanMode'
+import { createBoardNodeProjection } from './BoardCanvas.logic'
 
 const board = useBoardStore()
 const pipelines = usePipelinesStore()
@@ -70,33 +71,19 @@ useTaskExpansion(boardEl, boardActivity)
 // default adds +1000 to a selected node's z-index, so a frame stayed pinned on top
 // after a click and no amount of hovering another frame could surface it. Stacking
 // is driven purely by hover/drag here; the selection highlight is the ring, not z.
-function frameZIndex(id: string) {
-  if (draggingId.value === id) return 1000
-  if (hoveredFrameId.value === id) return 100
-  return 1
-}
-
-const nodes = computed(() => [
-  ...board.frames.map((b) => ({
-    id: b.id,
-    type: 'block',
-    position: { x: b.position.x, y: b.position.y },
-    // Always-expanded frames fill the viewport; keep them non-draggable so the pane
-    // pans through them (they move via their header handle, see BlockNode).
-    draggable: false,
-    zIndex: frameZIndex(b.id),
-    data: {},
-  })),
-  // Epics are top-level grouping nodes (non-structural), drawn alongside frames and
-  // linked to their member tasks by the dependency-edge overlay.
-  ...board.epics.map((b) => ({
-    id: b.id,
-    type: 'epic',
-    position: { x: b.position.x, y: b.position.y },
-    draggable: true,
-    data: {},
-  })),
-])
+//
+// The projection is MEMOISED per node (`BoardCanvas.logic.ts`) because the stacking state is
+// what changes most often: a pointer moving between two overlapping services rebuilt every
+// node object on the board, for a change that concerns two of them. Epics are top-level
+// grouping nodes (non-structural), drawn alongside frames and linked to their member tasks by
+// the dependency-edge overlay.
+const projectNodes = createBoardNodeProjection()
+const nodes = computed(() =>
+  projectNodes(board.frames, board.epics, {
+    draggingId: draggingId.value,
+    hoveredFrameId: hoveredFrameId.value,
+  }),
+)
 
 onNodeDragStop(({ node }) => {
   board.moveBlock(node.id, node.position)

package/app/components/board/nodes/TaskPipelineMini.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { AgentState, PipelineStep } from '~/types/domain'
+import { stepHasOutput } from '@cat-factory/contracts'
 import { agentKindMeta } from '~/utils/catalog'
 import {
   subtaskIconClass,
@@ -120,7 +121,7 @@ const ITEM_ICON: Record<string, string> = {
           {{ agentKindMeta(s.agentKind).label }}
         </span>
         <UIcon
-          v-if="s.output"
+          v-if="stepHasOutput(s)"
           name="i-lucide-file-text"
           class="h-2.5 w-2.5 shrink-0 text-slate-500"
         />

package/app/components/followUp/FollowUpWindow.vue

@@ -10,7 +10,7 @@ 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 type { FollowUpItem, FollowUpResolution } from '~/types/execution'
 import { FOLLOW_UP_COMPANION_META } from '~/utils/catalog'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 
@@ -56,14 +56,23 @@ async function onQueue(item: FollowUpItem) {
   const id = execId()
   if (id) await followUps.queueItem(id, item.id).catch(() => {})
 }
-async function onAnswer(item: FollowUpItem) {
+/**
+ * Answer a question, either way.
+ *
+ * `answered` buys the Coder another pass to apply what you said. `closed` records the reply as a
+ * RULING: the item is decided and the gate clears exactly the same, but no pass is spent and the
+ * Coder is told the topic is settled so it stops re-raising it. Two buttons rather than one with a
+ * toggle, because the choice is not a preference about this window: it is what the answer IS, and
+ * the person typing it is the only one who knows.
+ */
+async function onAnswer(item: FollowUpItem, resolution: FollowUpResolution = 'answered') {
   const id = execId()
   const answer = (drafts[item.id] ?? '').trim()
   if (!id || !answer) return
   // Clear the draft only once the answer is actually recorded: clearing first would make a failed
   // send cost the typed answer, and would also leave the unsaved guard below with nothing to protect.
   await followUps
-    .answerItem(id, item.id, answer)
+    .answerItem(id, item.id, answer, resolution)
     .then(() => {
       delete drafts[item.id]
     })
@@ -103,6 +112,7 @@ const STATUS_LABEL_KEYS: Record<FollowUpItem['status'], string> = {
   filed: 'followUp.status.filed',
   queued: 'followUp.status.queued',
   answered: 'followUp.status.answered',
+  closed: 'followUp.status.closed',
   dismissed: 'followUp.status.dismissed',
 }
 
@@ -114,8 +124,14 @@ const STATUS_META: Record<
   filed: { badge: 'success', text: 'text-emerald-300' },
   queued: { badge: 'info', text: 'text-sky-300' },
   answered: { badge: 'info', text: 'text-sky-300' },
+  closed: { badge: 'neutral', text: 'text-slate-300' },
   dismissed: { badge: 'neutral', text: 'text-slate-400' },
 }
+
+/** Whether a decided item carries a recorded reply to show ('answered' or 'closed'). */
+function hasRecordedAnswer(item: FollowUpItem): boolean {
+  return (item.status === 'answered' || item.status === 'closed') && !!item.answer
+}
 </script>
 
 <template>
@@ -197,13 +213,19 @@ const STATUS_META: Record<
                   {{ item.ticketExternalId ?? t('followUp.viewIssue') }}
                 </a>
               </p>
-              <p
-                v-if="item.status === 'answered' && item.answer"
-                class="mt-1 text-[11px] text-slate-300"
-              >
-                <span class="text-slate-500">{{ t('followUp.yourAnswer') }}</span>
+              <p v-if="hasRecordedAnswer(item)" class="mt-1 text-[11px] text-slate-300">
+                <span class="text-slate-500">
+                  {{
+                    item.status === 'closed' ? t('followUp.yourRuling') : t('followUp.yourAnswer')
+                  }}
+                </span>
                 {{ item.answer }}
               </p>
+              <!-- A decision that was made and then thrown away when the budget ran out. It must
+                   not read like one the Coder acted on. -->
+              <p v-if="item.sendBackDropped" class="mt-1 text-[11px] text-amber-300">
+                {{ t('followUp.sendBackDropped') }}
+              </p>
 
               <!-- Actions (only while the item is still undecided) -->
               <div v-if="item.status === 'pending'" class="mt-2.5">
@@ -215,7 +237,10 @@ const STATUS_META: Record<
                     :placeholder="t('followUp.answerPlaceholder')"
                     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 focus-visible:ring-2 focus-visible:ring-sky-500/60"
                   />
-                  <div class="flex items-center gap-2">
+                  <!-- Wraps, like the follow-up row below: three buttons whose labels are two
+                       words each in English are one long line in most of the other locales, and
+                       the result window is a narrow panel. -->
+                  <div class="flex flex-wrap items-center gap-2">
                     <UButton
                       size="xs"
                       color="primary"
@@ -226,6 +251,21 @@ const STATUS_META: Record<
                     >
                       {{ t('followUp.actions.answerAndSend') }}
                     </UButton>
+                    <UButton
+                      size="xs"
+                      color="neutral"
+                      variant="subtle"
+                      :loading="followUps.isActing(item.id)"
+                      :disabled="!(drafts[item.id] ?? '').trim() || !access.canExecuteRuns.value"
+                      :title="
+                        access.canExecuteRuns.value
+                          ? t('followUp.actions.answerAndCloseHint')
+                          : t('access.noRunExecute')
+                      "
+                      @click="onAnswer(item, 'closed')"
+                    >
+                      {{ t('followUp.actions.answerAndClose') }}
+                    </UButton>
                     <UButton
                       size="xs"
                       color="neutral"

package/app/components/panels/AgentStepDetail.vue

@@ -28,6 +28,7 @@ import {
   runIsActive,
 } from '~/utils/pipelineRender'
 import InputGateNotice from '~/components/inputGate/InputGateNotice.vue'
+import RunDetailLoadState from '~/components/panels/RunDetailLoadState.vue'
 
 // Detail overlay for a single pipeline step. Opened by clicking an agent in the
 // inspector list (TaskExecution) or the focus-view pipeline (PipelineProgress) via
@@ -53,6 +54,24 @@ const instance = computed(() => execution.getInstance(ctx.value?.instanceId))
 const step = computed(() =>
   ctx.value ? (instance.value?.steps[ctx.value.stepIndex] ?? null) : null,
 )
+/**
+ * The run this overlay is about, and the fetch that makes it WHOLE. The board snapshot carries a
+ * lean projection (`projectExecutionForBoard`) whose steps withhold the very prose this reader
+ * renders, so opening a step asks for the run behind it. A run the store already holds whole (one
+ * a live `execution` event delivered, or one already fetched) costs nothing.
+ *
+ * Watched through `fullFetchKey` rather than the id, because the run does not stop being a
+ * projection once this overlay is open: any full refresh lands a lean projection over it, and at a
+ * NEWER revision the store cannot carry the cached prose forward. Keyed on the id, the reader
+ * would blank under an open overlay with nothing left to refill it.
+ */
+watch(
+  () => execution.fullFetchKey(ctx.value?.instanceId ?? null),
+  () => void execution.ensureFull(ctx.value?.instanceId ?? null),
+  {
+    immediate: true,
+  },
+)
 const block = computed(() => (instance.value ? board.getBlock(instance.value.blockId) : undefined))
 const agent = computed(() => (step.value ? agentKindMeta(step.value.agentKind) : null))
 const open = computed(() => !!ctx.value && !!step.value)
@@ -265,6 +284,9 @@ const approval = useStepApproval({
   approvalId: () => approvalId.value,
   approvalPending: () => approvalPending.value && !dedicatedPark.value,
   companionExceeded: () => companionExceeded.value,
+  // The editor seeds from the step's prose, which a board projection withholds until the
+  // whole-run read above lands.
+  runIsWhole: () => instance.value?.projected !== true,
   close,
 })
 const {
@@ -277,6 +299,7 @@ const {
   draftProposal,
   rejectArmed,
   canRequestChanges,
+  canEditProposal,
   quorum: gateQuorum,
   viewerHasApproved,
   approvalWouldClearGate,
@@ -487,6 +510,9 @@ async function copyOutput() {
         </div>
       </header>
 
+      <!-- Whether the whole-run fetch behind this reader's prose has landed. -->
+      <RunDetailLoadState :instance-id="ctx?.instanceId ?? null" />
+
       <div ref="scrollEl" class="flex-1 overflow-auto px-6 py-6" @scroll="onScroll">
         <div class="mx-auto max-w-3xl space-y-5">
           <!-- metadata card (always shown) -->
@@ -974,7 +1000,7 @@ async function copyOutput() {
           size="sm"
           icon="i-lucide-pencil"
           block
-          :disabled="rejectArmed || submitting || !!gateRefusal"
+          :disabled="rejectArmed || submitting || !!gateRefusal || !canEditProposal"
           @click="startEditing"
         >
           {{ t('panels.stepDetail.approveWithCorrections') }}

package/app/components/panels/ResultWindowShell.vue

@@ -23,6 +23,7 @@
 import { computed, ref, watch } from 'vue'
 import { useModalBehavior } from '@modular-vue/core'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
+import RunDetailLoadState from '~/components/panels/RunDetailLoadState.vue'
 import StepEffortReport from '~/components/panels/StepEffortReport.vue'
 import StepValidationReport from '~/components/panels/StepValidationReport.vue'
 import StepReproductionReport from '~/components/panels/StepReproductionReport.vue'
@@ -134,6 +135,22 @@ const activeStep = computed(() => {
   return execution.getInstance(view.instanceId)?.steps[view.stepIndex] ?? null
 })
 const effortReport = computed(() => activeStep.value?.effortReport ?? null)
+/**
+ * The run this window is about, and the fetch that makes it WHOLE. The board snapshot carries a
+ * lean projection (`projectExecutionForBoard`) whose steps withhold their captured prose, which is
+ * exactly what the windows mounted in this slot render. Asking here rather than in each window is
+ * the same reasoning as the trailing sections above: the host mounts exactly one window, so no
+ * window can forget to ask, and a run already held whole costs nothing (`ensureFull` returns).
+ */
+const activeInstanceId = computed(() => ui.resultView?.instanceId ?? null)
+// Watched through `fullFetchKey`, not the id: a full refresh lands a lean projection over an open
+// run, and at a newer revision the store cannot carry the cached prose forward, so the window has
+// to ask again rather than render the withheld fields as an absence.
+watch(
+  () => execution.fullFetchKey(activeInstanceId.value),
+  () => void execution.ensureFull(activeInstanceId.value),
+  { immediate: true },
+)
 // The step's PRE-PR VALIDATION report — the second universal trailing section, resolved the same
 // way and for the same reason: every window whose step ran a coding job can show whether the
 // checkout actually passed the service's checks before the PR opened (and, on a red run, exactly
@@ -291,6 +308,8 @@ const panelClass = computed(() => [
             <UIcon name="i-lucide-x" class="h-4 w-4" />
           </button>
         </header>
+        <!-- Whether the whole-run fetch behind this window's prose has landed. -->
+        <RunDetailLoadState :instance-id="activeInstanceId" />
         <!-- The window body. -->
         <slot />
 

package/app/components/panels/RunDetailLoadState.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+/**
+ * The one-line state of the WHOLE-RUN fetch a step-detail surface depends on.
+ *
+ * The board snapshot carries a lean projection of every run: each step's captured prose is
+ * WITHHELD, not absent (`projectExecutionForBoard`). A window that renders that prose asks the
+ * store for the whole run on open, and until that read lands (or when it fails) the surface has
+ * nothing to say about the prose. Both states have to be visible, because an empty reader and a
+ * failed fetch look identical and only one of them means "this step said nothing".
+ *
+ * Renders nothing for a run the store already holds whole, which is every run a live `execution`
+ * event delivered and every run already fetched once.
+ */
+import { computed } from 'vue'
+
+const props = defineProps<{ instanceId: string | null }>()
+
+const execution = useExecutionStore()
+const { t } = useI18n()
+
+const loading = computed(() => execution.isFullPending(props.instanceId))
+const error = computed(() => execution.fullError(props.instanceId))
+</script>
+
+<template>
+  <div
+    v-if="loading || error"
+    class="flex items-center gap-2 border-b border-slate-800 px-4 py-2 text-[11px]"
+    :class="error ? 'text-rose-300' : 'text-slate-400'"
+    data-testid="run-detail-load-state"
+  >
+    <UIcon
+      :name="error ? 'i-lucide-triangle-alert' : 'i-lucide-loader-circle'"
+      class="h-3.5 w-3.5 shrink-0"
+      :class="error ? '' : 'animate-spin'"
+    />
+    <span>{{
+      error ? t('panels.runDetail.loadFailed', { reason: error }) : t('panels.runDetail.loading')
+    }}</span>
+  </div>
+</template>

package/app/components/panels/inspector/TaskExecution.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isDryRun } from '@cat-factory/contracts'
+import { isDryRun, stepHasOutput } from '@cat-factory/contracts'
 import type { Block } from '~/types/domain'
 import { agentKindMeta } from '~/utils/catalog'
 import {
@@ -390,7 +390,7 @@ async function mergePr() {
               class="flex min-w-0 cursor-pointer items-center gap-2 text-start transition hover:text-white"
               data-testid="run-step-open"
               :title="
-                s.output
+                stepHasOutput(s)
                   ? t('inspector.execution.viewDetailsOutput')
                   : t('inspector.execution.viewDetails')
               "
@@ -412,7 +412,7 @@ async function mergePr() {
                 {{ t('inspector.execution.companion') }}
               </span>
               <UIcon
-                :name="s.output ? 'i-lucide-book-open-text' : 'i-lucide-info'"
+                :name="stepHasOutput(s) ? 'i-lucide-book-open-text' : 'i-lucide-info'"
                 class="h-3.5 w-3.5 shrink-0 text-slate-500"
               />
             </button>

package/app/components/pipeline/PipelineProgress.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { AgentState, ExecutionInstance } from '~/types/domain'
 import type { PipelineStep } from '~/types/execution'
+import { stepHasOutput } from '@cat-factory/contracts'
 import { agentKindMeta, FOLLOW_UP_COMPANION_META, FORK_DECISION_META } from '~/utils/catalog'
 import {
   subtaskIconClass,
@@ -341,7 +342,7 @@ const ITEM_ICON: Record<string, string> = {
             data-testid="pipeline-step"
             :data-step-kind="s.agentKind"
             :title="
-              s.output
+              stepHasOutput(s)
                 ? t('pipeline.progress.viewDetailsOutput')
                 : t('pipeline.progress.viewDetails')
             "
@@ -441,7 +442,7 @@ const ITEM_ICON: Record<string, string> = {
             </template>
 
             <UIcon
-              :name="s.output ? 'i-lucide-book-open-text' : 'i-lucide-info'"
+              :name="stepHasOutput(s) ? 'i-lucide-book-open-text' : 'i-lucide-info'"
               class="h-4 w-4 shrink-0 text-slate-500 transition-colors group-hover:text-indigo-300"
             />
           </div>
@@ -555,7 +556,10 @@ const ITEM_ICON: Record<string, string> = {
 
           <!-- A one-line hint that the agent produced prose; the full output (and
                all step metadata) lives in the step-detail overlay opened by click. -->
-          <p v-if="s.output" class="mt-2 flex items-center gap-1 text-[11px] text-slate-500">
+          <p
+            v-if="stepHasOutput(s)"
+            class="mt-2 flex items-center gap-1 text-[11px] text-slate-500"
+          >
             <UIcon name="i-lucide-book-open-text" class="h-3 w-3 shrink-0" />
             {{ t('pipeline.progress.clickToRead') }}
           </p>

package/app/components/settings/KubernetesEngineForm.vue

@@ -554,7 +554,7 @@ async function copyAutoSetupCommand() {
       <UInput
         v-model="form.namespaceTemplate"
         class="font-mono"
-        placeholder="cf-env-{{pullNumber}}"
+        placeholder="cf-env-pr{{pullNumber}}"
       />
     </UFormField>
 

package/app/components/settings/KubernetesEnvironmentForm.vue

@@ -406,7 +406,7 @@ function optional(label: string): string {
       <UInput
         v-model="form.namespaceTemplate"
         class="font-mono"
-        placeholder="cf-env-{{pullNumber}}"
+        placeholder="cf-env-pr{{pullNumber}}"
       />
     </UFormField>
 

package/app/composables/api/execution.ts

@@ -3,6 +3,7 @@ import {
   cancelExecutionContract,
   exportExecutionLlmMetricsContract,
   getExecutionAgentContextContract,
+  getExecutionContract,
   getExecutionLlmMetricsContract,
   getExecutionSearchQueriesContract,
   getExecutionToolCallFailuresContract,
@@ -42,6 +43,17 @@ export function executionApi({ send, sendWith, ws, pwHeaders }: ApiContext) {
         body,
       }),
 
+    /**
+     * One run, WHOLE. The board snapshot serves a lean projection that withholds each step's
+     * captured prose, so a step-detail overlay fetches the run it is about through here before
+     * rendering. See `projectExecutionForBoard`.
+     */
+    getExecution: (workspaceId: string, executionId: string) =>
+      send(getExecutionContract, {
+        pathPrefix: ws(workspaceId),
+        pathParams: { executionId },
+      }),
+
     /**
      * Start ONE agent kind against a block — a run with no pipeline behind it (the service
      * frame's "Map service" action, the environment wizard's deep analysis). Gated on the