@cat-factory/app 0.282.2 → 0.284.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/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/TaskEstimateBadge.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-// Compact display of a task's estimator triage (Complexity / Risk / Impact), shown on the
-// inspector once a `task-estimator` step has run. Read-only — produced by the estimator,
-// used to gate consensus steps. Hidden when no estimate exists.
+// Compact display of a task's triage scores (Complexity / Risk / Impact), shown on the inspector
+// once a step has produced them. Read-only: a `task-estimator` step FORECASTS them before the work
+// starts and a `task-reassessor` step MEASURES them afterwards from the change that landed, so the
+// section says which reading it is showing, names the reading it corrected, and shows the earlier
+// number beside each axis that actually moved. Hidden when no estimate exists.
 import { computed } from 'vue'
 import type { Block } from '~/types/domain'
+import { estimateBasisLabelKey } from '~/utils/estimateGating'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 
 const props = defineProps<{ block: Block }>()
@@ -11,14 +14,53 @@ const { t, n } = useI18n()
 
 const estimate = computed(() => props.block.estimate ?? null)
 
-const AXES = computed(
-  () =>
+/**
+ * The three axes with both readings, so the template asks nothing about which one to show.
+ *
+ * `was` is present only where the superseded reading DIFFERS. An axis whose score did not move
+ * renders "was 40% 40%", which reads as a correction that did not happen; and the interesting
+ * thing about a re-measurement is exactly which axes it moved.
+ */
+const AXES = computed(() => {
+  const current = estimate.value
+  const prior = current?.supersedes ?? null
+  return (
     [
       { key: 'complexity', label: t('inspector.estimate.complexity') },
       { key: 'risk', label: t('inspector.estimate.risk') },
       { key: 'impact', label: t('inspector.estimate.impact') },
-    ] as const,
-)
+    ] as const
+  ).map((axis) => ({
+    ...axis,
+    was:
+      prior && current && prior[axis.key] !== current[axis.key]
+        ? n(prior[axis.key], { key: 'percent' })
+        : null,
+  }))
+})
+
+/**
+ * What this reading is, in one line. Which key that is lives in `utils/estimateGating`, beside the
+ * rest of the estimate presentation vocabulary and under test: `basis` is PERSISTED and read back
+ * without a schema pass, so absent, known and unrecognised are three distinct answers.
+ */
+const basisLabel = computed(() => t(estimateBasisLabelKey(estimate.value?.basis)))
+
+/**
+ * What the current reading REPLACED, named by ITS basis rather than left implicit.
+ *
+ * A "was 80%" chip beside a header reading "Forecast before the work started" says the earlier
+ * number was an earlier forecast, and after a re-run of the estimator on a measured task that is
+ * the wrong way round: the superseded reading is the MEASUREMENT. The backend summary prefixes the
+ * same movement with the same label for the same reason.
+ */
+const supersededLabel = computed(() => {
+  const prior = estimate.value?.supersedes
+  if (!prior) return null
+  return t('inspector.estimate.supersededBasis', {
+    basis: t(estimateBasisLabelKey(prior.basis)),
+  })
+})
 
 /** Cool→hot bar colour by severity (low = sky, mid = amber, high = rose). */
 function barClass(n: number): string {
@@ -37,6 +79,14 @@ function barClass(n: number): string {
     default-open
   >
     <div class="space-y-1.5 rounded-lg border border-slate-800 bg-slate-900/40 p-2.5">
+      <p class="text-[11px] text-slate-500" data-testid="task-estimate-basis">{{ basisLabel }}</p>
+      <p
+        v-if="supersededLabel"
+        class="text-[11px] text-slate-500"
+        data-testid="task-estimate-superseded"
+      >
+        {{ supersededLabel }}
+      </p>
       <div v-for="axis in AXES" :key="axis.key" class="flex items-center gap-2">
         <span class="w-20 shrink-0 text-xs text-slate-400">{{ axis.label }}</span>
         <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-800">
@@ -46,6 +96,12 @@ function barClass(n: number): string {
             :style="{ width: `${Math.round(estimate[axis.key] * 100)}%` }"
           />
         </div>
+        <span
+          v-if="axis.was"
+          class="shrink-0 text-[11px] tabular-nums text-slate-500"
+          :data-testid="`task-estimate-was-${axis.key}`"
+          >{{ t('inspector.estimate.was', { value: axis.was }) }}</span
+        >
         <span class="w-9 shrink-0 text-end text-xs tabular-nums text-slate-300">{{
           n(estimate[axis.key], { key: 'percent' })
         }}</span>

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/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