@cat-factory/app 0.7.2 → 0.7.4

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

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import type { AgentState } from '~/types/domain'
 import { agentKindMeta } from '~/utils/catalog'
-import { subtaskIconClass, isFailedStep, FAILED_STEP_META } from '~/utils/pipelineRender'
+import {
+  subtaskIconClass,
+  isFailedStep,
+  FAILED_STEP_META,
+  gateCompanionFor,
+  COMPANION_STATE_META,
+} from '~/utils/pipelineRender'
 import { lodAtLeast } from '~/composables/useSemanticZoom'
 
 // Spatial drill-down inside a task card: at the `steps` zoom band the task's
@@ -24,6 +30,13 @@ const steps = computed(() => instance.value?.steps ?? [])
 // `working`) must stop spinning, matching the failure card the task card shows.
 const runFailed = computed(() => instance.value?.status === 'failed')
 
+// The conditionally-run companion (if any) each step drives — the polling gates'
+// helper (ci → ci-fixer, conflicts → conflict-resolver) or the Tester's fixer — with
+// its possible/running/completed/skipped state. The board drill-down shows it the same
+// way the inspector + focus pipeline do, so a gate working its helper reads as active
+// (spinning "Running") rather than a frozen subtask list.
+const companionByStep = computed(() => steps.value.map((s) => gateCompanionFor(s, runFailed.value)))
+
 // Expand the pipeline list only when zoomed in far enough AND the board driver
 // permits this card — on-screen, and the centre-most of any cards that would
 // otherwise overlap (see useTaskExpansion) — so deep-zoom expansions don't pile up.
@@ -132,6 +145,29 @@ const ITEM_ICON: Record<string, string> = {
         />
       </div>
 
+      <!-- conditionally-run companion (the gate's ci-fixer / conflict-resolver, or the
+           Tester's fixer): a compact running/ran/skipped line, so a gate that's working
+           its helper reads as actively fixing rather than a frozen subtask list. -->
+      <div v-if="companionByStep[i]" class="mt-1 flex items-center gap-1 text-[9px]">
+        <UIcon
+          :name="agentKindMeta(companionByStep[i]!.kind).icon"
+          class="h-2.5 w-2.5 shrink-0"
+          :class="[
+            COMPANION_STATE_META[companionByStep[i]!.state].text,
+            companionByStep[i]!.state === 'running' ? 'animate-spin' : '',
+          ]"
+        />
+        <span class="truncate text-slate-400">
+          {{ agentKindMeta(companionByStep[i]!.kind).label }}
+        </span>
+        <span
+          class="ml-auto shrink-0"
+          :class="COMPANION_STATE_META[companionByStep[i]!.state].text"
+        >
+          {{ COMPANION_STATE_META[companionByStep[i]!.state].label }}
+        </span>
+      </div>
+
       <!-- deepest band: the actual todo list (done / in-progress / pending) -->
       <ul v-if="showItems && s.subtasks?.items?.length" class="mt-1 space-y-0.5">
         <li

package/app/components/gates/GateResultView.vue

@@ -9,10 +9,10 @@ import { computed } from 'vue'
 import { agentKindMeta } from '~/utils/catalog'
 import type { GateStepState } from '~/types/execution'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
+import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
-const ui = useUiStore()
 
 // Synchronous window: it reads its state straight off the execution step, so there's
 // nothing to fetch on open (no `onOpen` loader).
@@ -44,15 +44,6 @@ function formatClock(ms?: number | null): string | null {
   return ms ? new Date(ms).toLocaleString() : null
 }
 
-// The run id (execution instance id) this gate belongs to — copyable for support /
-// log lookups, and a jump into the run's observability view.
-async function copyRunId() {
-  if (instanceId.value) await navigator.clipboard?.writeText(instanceId.value)
-}
-function openObservability() {
-  if (instanceId.value) ui.openObservability(instanceId.value)
-}
-
 /**
  * The display status — a roll-up of the persisted gate state + the run's status, so the
  * window reads as a conclusion rather than raw fields:
@@ -258,19 +249,16 @@ const conflictVerdict = computed(() => {
                 >
                   {{ gate.lastFailureSummary }}
                 </p>
-                <p class="mt-2 text-[11px] leading-relaxed text-slate-500">
-                  GitHub's API doesn't expose a file-level conflict list, so the resolver inspects
-                  the branch directly.<template v-if="prUrl">
-                    For the exact conflicting hunks, open the
-                    <a
-                      :href="prUrl"
-                      target="_blank"
-                      rel="noopener"
-                      class="text-sky-300 hover:text-sky-200 hover:underline"
-                      >pull request on GitHub</a
-                    >.</template
-                  >
-                </p>
+                <a
+                  v-if="prUrl"
+                  :href="prUrl"
+                  target="_blank"
+                  rel="noopener"
+                  class="mt-2 inline-flex items-center gap-1 text-[12px] text-sky-300 hover:text-sky-200 hover:underline"
+                >
+                  View pull request on GitHub
+                  <UIcon name="i-lucide-external-link" class="h-3 w-3" />
+                </a>
               </template>
 
               <!-- Attempt history (both gates): what each helper run did and how it ended. -->
@@ -312,7 +300,7 @@ const conflictVerdict = computed(() => {
 
           <!-- Sidebar: gate state -->
           <aside
-            class="hidden w-56 shrink-0 flex-col gap-4 border-l border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
+            class="hidden w-60 shrink-0 flex-col gap-4 border-l border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
           >
             <div v-if="gate">
               <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
@@ -348,32 +336,17 @@ const conflictVerdict = computed(() => {
               <p class="font-mono text-[12px] text-slate-300">{{ shortSha }}</p>
             </div>
 
-            <div v-if="step?.model">
-              <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                Model
-              </h4>
-              <p class="break-all text-[12px] text-slate-300">{{ step.model }}</p>
-            </div>
-
-            <div v-if="instanceId">
-              <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                Run
-              </h4>
-              <p
-                class="cursor-pointer break-all font-mono text-[12px] text-slate-400 hover:text-slate-200"
-                :title="`${instanceId} — click to copy`"
-                @click="copyRunId"
-              >
-                {{ instanceId }}
-              </p>
-              <button
-                class="mt-1 inline-flex items-center gap-1 text-[11px] text-sky-300 hover:text-sky-200"
-                @click="openObservability"
-              >
-                <UIcon name="i-lucide-activity" class="h-3 w-3" />
-                Open observability
-              </button>
-            </div>
+            <!-- Shared run metadata + embedded observability (model, run id, timing,
+                 model-activity rollup) — identical to the agent step detail. -->
+            <StepRunMeta
+              v-if="step"
+              :step="step"
+              :instance-id="instanceId ?? undefined"
+              :step-number="stepIndex === null ? undefined : stepIndex + 1"
+              :total-steps="instance?.steps.length"
+              :run-failed="instance?.status === 'failed'"
+              :failure-at="instance?.failure?.occurredAt"
+            />
 
             <p class="mt-auto text-[10px] leading-relaxed text-slate-600">
               A gate runs a programmatic precheck and only spins up the

package/app/components/observability/StepModelActivity.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { StepMetrics } from '~/types/execution'
+import StepMetricsBar from '~/components/observability/StepMetricsBar.vue'
+
+// The shared "Model activity" block: the LLM observability rollup (StepMetricsBar) under
+// a labelled header with a "View all calls →" link into the full per-call panel. Used by
+// every step surface that shows a single step's metrics (the step metadata card, the
+// gate / tester result windows) so the embedded-observability treatment can't drift.
+// The "View all calls →" link opens the run-level panel, so it appears for any step that
+// belongs to a run — including a gate, whose programmatic precheck records no per-step
+// calls (the bar is omitted, but the link still reaches the helper agents' calls). Renders
+// nothing only when there's neither a run to inspect nor any recorded calls.
+const props = defineProps<{
+  metrics?: StepMetrics | null
+  /** The run whose per-call panel the header link / bar click opens. */
+  instanceId?: string
+}>()
+
+const ui = useUiStore()
+const hasCalls = computed(() => !!props.metrics && props.metrics.calls > 0)
+
+function openObservability() {
+  if (props.instanceId) ui.openObservability(props.instanceId)
+}
+</script>
+
+<template>
+  <div v-if="instanceId || hasCalls">
+    <div class="mb-1 flex items-center justify-between">
+      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        Model activity
+      </span>
+      <button
+        v-if="instanceId"
+        class="text-[11px] text-sky-400 hover:text-sky-300"
+        @click="openObservability"
+      >
+        View all calls →
+      </button>
+    </div>
+    <StepMetricsBar
+      v-if="hasCalls && metrics"
+      :metrics="metrics"
+      clickable
+      @inspect="openObservability"
+    />
+  </div>
+</template>

package/app/components/panels/ObservabilityPanel.vue

@@ -109,7 +109,7 @@ function exportJson() {
     <Transition name="obs-fade">
       <div
         v-if="open"
-        class="fixed inset-0 z-50 flex flex-col bg-slate-950/96 backdrop-blur-sm"
+        class="fixed inset-0 z-[60] flex flex-col bg-slate-950/96 backdrop-blur-sm"
         role="dialog"
         aria-modal="true"
       >

package/app/components/panels/StepMetadataCard.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import type { AgentState, PipelineStep, CompanionVerdict } from '~/types/execution'
 import { subtaskIconClass } from '~/utils/pipelineRender'
-import StepMetricsBar from '~/components/observability/StepMetricsBar.vue'
+import StepModelActivity from '~/components/observability/StepModelActivity.vue'
 
 // The step's metadata card body: state/timing/model/run id, the container cold-boot
 // phase, the live subtask breakdown, the LLM observability rollup, the applied
@@ -20,7 +20,6 @@ const props = defineProps<{
   latestVerdict: CompanionVerdict | null
 }>()
 
-const ui = useUiStore()
 const models = useModelsStore()
 
 const STATE_META: Record<AgentState, { label: string; color: string }> = {
@@ -56,10 +55,6 @@ async function copyRunId() {
   const id = props.step.runId ?? props.instanceId
   if (id) await navigator.clipboard?.writeText(id)
 }
-
-function openObservability() {
-  if (props.instanceId) ui.openObservability(props.instanceId)
-}
 </script>
 
 <template>
@@ -169,16 +164,9 @@ function openObservability() {
     </div>
 
     <!-- LLM observability rollup (tokens, output-limit headroom,
-         transport-vs-execution); click to open the full per-call panel -->
-    <div v-if="step.metrics && step.metrics.calls > 0" class="mt-4">
-      <div class="mb-1 flex items-center justify-between">
-        <span class="text-[11px] uppercase tracking-wide text-slate-500"> Model activity </span>
-        <button class="text-[11px] text-sky-400 hover:text-sky-300" @click="openObservability">
-          View all calls →
-        </button>
-      </div>
-      <StepMetricsBar :metrics="step.metrics" clickable @inspect="openObservability" />
-    </div>
+         transport-vs-execution); click to open the full per-call panel. Self-gates: the
+         "View all calls →" link shows for any run, the metrics bar only when calls exist. -->
+    <StepModelActivity class="mt-4" :metrics="step.metrics" :instance-id="instanceId" />
 
     <!-- standards (prompt fragments) folded into this step -->
     <div v-if="step.selectedFragmentIds && step.selectedFragmentIds.length" class="mt-4">

package/app/components/panels/StepRunMeta.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PipelineStep } from '~/types/execution'
+import { useStepTimer } from '~/composables/useStepTimer'
+import StepModelActivity from '~/components/observability/StepModelActivity.vue'
+
+// Shared run-metadata + observability block for the step-backed result windows
+// (the CI/conflicts gate, the tester report). It carries the facts every step has in
+// common — step position, live duration, model, run id, and the LLM model-activity
+// rollup — so each window keeps only its own bespoke detail (the gate's verdict, the
+// tester's scenarios) and the universal "which run is this / how did the model do"
+// facts read the same everywhere. Laid out as a stack of labelled fields to drop into
+// a window's sidebar; the canonical full-width version lives in StepMetadataCard.
+const props = defineProps<{
+  step: PipelineStep
+  /** The enclosing run; copyable + opens the per-call observability panel. */
+  instanceId?: string
+  /** 1-based position in the pipeline, shown as "N of M" when both are given. */
+  stepNumber?: number
+  totalSteps?: number
+  /** The run failed: freezes the clock and reports a mid-flight step honestly. */
+  runFailed?: boolean
+  /** Epoch ms the run failed, so the frozen duration is the failure time. */
+  failureAt?: number | null
+}>()
+
+const models = useModelsStore()
+
+const { isRunning, durationLabel } = useStepTimer({
+  step: () => props.step,
+  runFailed: () => props.runFailed ?? false,
+  failureAt: () => props.failureAt,
+})
+
+const modelLabel = computed(() => (props.step.model ? models.labelForRef(props.step.model) : null))
+const runId = computed(() => props.step.runId ?? props.instanceId ?? null)
+
+function formatClock(ms?: number | null): string | null {
+  return ms ? new Date(ms).toLocaleString() : null
+}
+
+async function copyRunId() {
+  if (runId.value) await navigator.clipboard?.writeText(runId.value)
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div v-if="stepNumber && totalSteps">
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">Step</h4>
+      <p class="text-[12px] text-slate-300">{{ stepNumber }} of {{ totalSteps }}</p>
+    </div>
+
+    <div v-if="durationLabel">
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        Duration
+      </h4>
+      <p class="flex items-center gap-1.5 text-[12px] tabular-nums text-slate-300">
+        <UIcon
+          v-if="isRunning"
+          name="i-lucide-loader-circle"
+          class="h-3 w-3 animate-spin text-indigo-400"
+        />
+        {{ durationLabel }}
+        <span v-if="isRunning" class="text-[11px] text-slate-500">elapsed</span>
+      </p>
+    </div>
+
+    <div v-if="formatClock(step.startedAt)">
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">Started</h4>
+      <p class="text-[12px] text-slate-300">{{ formatClock(step.startedAt) }}</p>
+    </div>
+
+    <div v-if="formatClock(step.finishedAt)">
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        Finished
+      </h4>
+      <p class="text-[12px] text-slate-300">{{ formatClock(step.finishedAt) }}</p>
+    </div>
+
+    <div v-if="step.model">
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">Model</h4>
+      <p class="break-all text-[12px] text-slate-300" :title="step.model">
+        {{ modelLabel ?? step.model }}
+      </p>
+    </div>
+
+    <div v-if="runId">
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">Run</h4>
+      <p
+        class="cursor-pointer break-all font-mono text-[12px] text-slate-400 hover:text-slate-200"
+        :title="`${runId} — click to copy`"
+        @click="copyRunId"
+      >
+        {{ runId }}
+      </p>
+    </div>
+
+    <!-- The model-activity rollup, embedded inline. The "View all calls →" link opens the
+         run's observability panel even when this step recorded no calls (e.g. a gate that
+         passed its precheck with no helper spun up), so every window reaches it the same
+         way; the metrics bar shows only when the step itself made calls. -->
+    <StepModelActivity :metrics="step.metrics" :instance-id="instanceId" />
+  </div>
+</template>

package/app/components/testing/TestReportWindow.vue

@@ -12,6 +12,7 @@
 // `spec/features/*.feature` files would need a spec endpoint (a future enhancement).
 import type { TestConcern, TestOutcome, TestReport } from '~/types/domain'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
+import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -21,9 +22,12 @@ const execution = useExecutionStore()
 const { open, blockId, instanceId, stepIndex, close } = useResultView('tester')
 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 (instanceId.value === null || stepIndex.value === null) return null
-  return execution.getInstance(instanceId.value)?.steps[stepIndex.value] ?? null
+  if (instance.value === null || stepIndex.value === null) return null
+  return instance.value.steps[stepIndex.value] ?? null
 })
 const report = computed<TestReport | null>(() => step.value?.test?.lastReport ?? null)
 const testState = computed(() => step.value?.test ?? null)
@@ -385,12 +389,17 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
               <p class="text-[12px] capitalize text-slate-300">{{ report.environment }}</p>
             </div>
 
-            <div v-if="step?.model">
-              <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                Model
-              </h4>
-              <p class="break-all text-[12px] text-slate-300">{{ step.model }}</p>
-            </div>
+            <!-- Shared run metadata + embedded observability (model, run id, timing,
+                 model-activity rollup) — identical to the gate and agent step detail. -->
+            <StepRunMeta
+              v-if="step"
+              :step="step"
+              :instance-id="instanceId ?? undefined"
+              :step-number="stepIndex === null ? undefined : stepIndex + 1"
+              :total-steps="instance?.steps.length"
+              :run-failed="instance?.status === 'failed'"
+              :failure-at="instance?.failure?.occurredAt"
+            />
 
             <p class="mt-auto text-[10px] leading-relaxed text-slate-600">
               Scenarios are the areas the Tester chose to exercise (its spec acceptance scenarios).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kibertoad/cat-factory.git",