@cat-factory/app 0.6.0 → 0.7.3

package/app/components/gates/GateResultView.vue

@@ -9,6 +9,7 @@ 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()
@@ -17,6 +18,7 @@ const execution = useExecutionStore()
 // nothing to fetch on open (no `onOpen` loader).
 const { open, blockId, instanceId, stepIndex, close } = useResultView('gate')
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
+const prUrl = computed(() => block.value?.pullRequest?.url ?? null)
 
 const instance = computed(() =>
   instanceId.value === null ? null : (execution.getInstance(instanceId.value) ?? null),
@@ -35,6 +37,13 @@ const helperMeta = computed(() => agentKindMeta(helperKind.value))
 const failingChecks = computed(() => gate.value?.failingChecks ?? [])
 const shortSha = computed(() => (gate.value?.headSha ? gate.value.headSha.slice(0, 7) : null))
 
+// The helper-agent attempts this gate dispatched, newest first for the timeline.
+const attempts = computed(() => [...(gate.value?.attemptLog ?? [])].reverse())
+
+function formatClock(ms?: number | null): string | null {
+  return ms ? new Date(ms).toLocaleString() : null
+}
+
 /**
  * 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:
@@ -189,7 +198,21 @@ const conflictVerdict = computed(() => {
                     class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-950/40 px-3 py-1.5"
                   >
                     <UIcon name="i-lucide-circle-x" class="h-3.5 w-3.5 shrink-0 text-rose-400" />
-                    <span class="min-w-0 flex-1 truncate text-[13px] text-slate-200">{{
+                    <a
+                      v-if="c.url"
+                      :href="c.url"
+                      target="_blank"
+                      rel="noopener"
+                      class="group min-w-0 flex-1 truncate text-[13px] text-sky-300 hover:text-sky-200 hover:underline"
+                      :title="`Open ${c.name} on GitHub`"
+                    >
+                      {{ c.name }}
+                      <UIcon
+                        name="i-lucide-external-link"
+                        class="ml-0.5 inline h-3 w-3 opacity-60 group-hover:opacity-100"
+                      />
+                    </a>
+                    <span v-else class="min-w-0 flex-1 truncate text-[13px] text-slate-200">{{
                       c.name
                     }}</span>
                     <span class="shrink-0 text-[11px] uppercase text-rose-300">
@@ -202,7 +225,7 @@ const conflictVerdict = computed(() => {
                 </p>
               </template>
 
-              <!-- Conflicts: verdict + note (no file-level detail from GitHub) -->
+              <!-- Conflicts: verdict + the resolver's account of what it left -->
               <template v-else>
                 <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                   Mergeability
@@ -217,17 +240,67 @@ const conflictVerdict = computed(() => {
                   />
                   <span class="text-[13px] text-slate-200">{{ conflictVerdict }}</span>
                 </div>
-                <p class="mt-2 text-[11px] leading-relaxed text-slate-500">
-                  GitHub reports mergeability as a single verdict, so there's no file-level conflict
-                  list here. The conflict resolver inspects the branch directly.
+                <!-- GitHub's API reports mergeability as a single bit (no file list), but the
+                     conflict resolver discovers the conflicting files in the container and
+                     reports them back — surface that account here. -->
+                <p
+                  v-if="gate.lastFailureSummary"
+                  class="mt-2 whitespace-pre-wrap rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2 text-[12px] leading-relaxed text-slate-300"
+                >
+                  {{ gate.lastFailureSummary }}
                 </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. -->
+              <section v-if="attempts.length" class="mt-5">
+                <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                  {{ helperMeta.label }} attempts
+                </h3>
+                <ol class="space-y-2">
+                  <li
+                    v-for="a in attempts"
+                    :key="a.attempt"
+                    class="rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2"
+                  >
+                    <div class="flex items-center gap-2">
+                      <span class="text-[12px] font-semibold text-slate-200"
+                        >Attempt {{ a.attempt }}</span
+                      >
+                      <UBadge
+                        :color="a.outcome === 'failed' ? 'error' : 'neutral'"
+                        variant="subtle"
+                        size="sm"
+                        >{{ a.outcome }}</UBadge
+                      >
+                      <span v-if="formatClock(a.at)" class="ml-auto text-[11px] text-slate-500">{{
+                        formatClock(a.at)
+                      }}</span>
+                    </div>
+                    <p
+                      v-if="a.summary"
+                      class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-slate-400"
+                    >
+                      {{ a.summary }}
+                    </p>
+                  </li>
+                </ol>
+              </section>
             </template>
           </div>
 
           <!-- 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">
@@ -263,12 +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>
+            <!-- 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/layout/SideBar.vue

@@ -262,6 +262,17 @@ watch(
         >
           Workspace settings
         </UButton>
+        <UButton
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-message-square-reply"
+          class="justify-start"
+          @click="ui.openIssueWriteback()"
+        >
+          Issue tracker writeback
+        </UButton>
         <UButton
           block
           color="primary"

package/app/components/observability/StepMetricsBar.vue

@@ -1,102 +1,102 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { StepMetrics } from '~/types/execution'
-import {
-  formatMs,
-  formatTokens,
-  headroomColor,
-  headroomRatio,
-  pct,
-  transportRatio,
-} from '~/utils/observability'
-
-// Compact, at-a-glance LLM rollup for one pipeline step: token usage, an
-// output-limit headroom bar (how close the step ran to truncation), a
-// transport-vs-execution latency split, and error/warning badges. Rendered inline
-// on the step surfaces (step detail, pipeline timeline). A no-op when there are no
-// recorded calls. Clicking anywhere emits `inspect` so a parent can open the
-// drill-down panel.
-const props = defineProps<{ metrics: StepMetrics; clickable?: boolean }>()
-defineEmits<{ inspect: [] }>()
-
-const m = computed(() => props.metrics)
-const headroom = computed(() => headroomRatio(m.value))
-const transport = computed(() => transportRatio(m.value))
-const headroomTone = computed(() => headroomColor(headroom.value, m.value.truncatedCalls > 0))
-</script>
-
-<template>
-  <div
-    v-if="m.calls > 0"
-    class="rounded-lg border border-slate-800 bg-slate-900/40 p-2.5 text-[12px]"
-    :class="
-      clickable ? 'cursor-pointer transition hover:border-slate-700 hover:bg-slate-900/70' : ''
-    "
-    :role="clickable ? 'button' : undefined"
-    @click="clickable ? $emit('inspect') : undefined"
-  >
-    <!-- header line: call count + tokens + warning/error badges -->
-    <div class="flex items-center gap-2">
-      <UIcon name="i-lucide-activity" class="h-3.5 w-3.5 shrink-0 text-slate-500" />
-      <span class="text-slate-300"> {{ m.calls }} {{ m.calls === 1 ? 'call' : 'calls' }} </span>
-      <span class="text-slate-500">·</span>
-      <span class="tabular-nums text-slate-400" title="Prompt / completion tokens">
-        {{ formatTokens(m.promptTokens) }}↑ {{ formatTokens(m.completionTokens) }}↓
-      </span>
-      <div class="ml-auto flex items-center gap-1">
-        <UBadge v-if="m.errors > 0" color="error" variant="subtle" size="sm">
-          {{ m.errors }} error{{ m.errors === 1 ? '' : 's' }}
-        </UBadge>
-        <UBadge v-if="m.warnings > 0" color="warning" variant="subtle" size="sm">
-          {{ m.warnings }} warning{{ m.warnings === 1 ? '' : 's' }}
-        </UBadge>
-        <UIcon v-if="clickable" name="i-lucide-chevron-right" class="h-3.5 w-3.5 text-slate-600" />
-      </div>
-    </div>
-
-    <!-- output-limit headroom -->
-    <div v-if="headroom !== null" class="mt-2">
-      <div class="flex items-center justify-between text-[11px]">
-        <span class="text-slate-500">Output limit</span>
-        <span class="tabular-nums" :class="headroomTone">
-          {{ formatTokens(m.peakCompletionTokens) }} /
-          {{ formatTokens(m.maxOutputTokens ?? 0) }} ({{ pct(headroom) }}%)
-        </span>
-      </div>
-      <div class="mt-1 h-1 overflow-hidden rounded-full bg-slate-700/60">
-        <div
-          class="h-full rounded-full transition-all duration-500"
-          :class="
-            m.truncatedCalls > 0 || headroom >= 0.98
-              ? 'bg-rose-400'
-              : headroom >= 0.8
-                ? 'bg-amber-400'
-                : 'bg-emerald-400'
-          "
-          :style="{ width: `${Math.max(2, pct(headroom))}%` }"
-        />
-      </div>
-      <p v-if="m.truncatedCalls > 0" class="mt-1 text-[11px] text-rose-400">
-        {{ m.truncatedCalls }} call{{ m.truncatedCalls === 1 ? '' : 's' }} truncated at the limit
-      </p>
-    </div>
-
-    <!-- transport overhead vs model execution -->
-    <div v-if="transport !== null" class="mt-2">
-      <div class="flex items-center justify-between text-[11px]">
-        <span class="text-slate-500">Transport vs execution</span>
-        <span class="tabular-nums text-slate-400">
-          {{ formatMs(m.overheadMs) }} / {{ formatMs(m.upstreamMs) }}
-        </span>
-      </div>
-      <div class="mt-1 flex h-1 overflow-hidden rounded-full bg-slate-700/60">
-        <div
-          class="h-full bg-sky-400/80"
-          :style="{ width: `${pct(transport)}%` }"
-          title="Transport / proxy overhead"
-        />
-        <div class="h-full bg-indigo-400/80 flex-1" title="Model execution" />
-      </div>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { StepMetrics } from '~/types/execution'
+import {
+  formatMs,
+  formatTokens,
+  headroomColor,
+  headroomRatio,
+  pct,
+  transportRatio,
+} from '~/utils/observability'
+
+// Compact, at-a-glance LLM rollup for one pipeline step: token usage, an
+// output-limit headroom bar (how close the step ran to truncation), a
+// transport-vs-execution latency split, and error/warning badges. Rendered inline
+// on the step surfaces (step detail, pipeline timeline). A no-op when there are no
+// recorded calls. Clicking anywhere emits `inspect` so a parent can open the
+// drill-down panel.
+const props = defineProps<{ metrics: StepMetrics; clickable?: boolean }>()
+defineEmits<{ inspect: [] }>()
+
+const m = computed(() => props.metrics)
+const headroom = computed(() => headroomRatio(m.value))
+const transport = computed(() => transportRatio(m.value))
+const headroomTone = computed(() => headroomColor(headroom.value, m.value.truncatedCalls > 0))
+</script>
+
+<template>
+  <div
+    v-if="m.calls > 0"
+    class="rounded-lg border border-slate-800 bg-slate-900/40 p-2.5 text-[12px]"
+    :class="
+      clickable ? 'cursor-pointer transition hover:border-slate-700 hover:bg-slate-900/70' : ''
+    "
+    :role="clickable ? 'button' : undefined"
+    @click="clickable ? $emit('inspect') : undefined"
+  >
+    <!-- header line: call count + tokens + warning/error badges -->
+    <div class="flex items-center gap-2">
+      <UIcon name="i-lucide-activity" class="h-3.5 w-3.5 shrink-0 text-slate-500" />
+      <span class="text-slate-300"> {{ m.calls }} {{ m.calls === 1 ? 'call' : 'calls' }} </span>
+      <span class="text-slate-500">·</span>
+      <span class="tabular-nums text-slate-400" title="Prompt / completion tokens">
+        {{ formatTokens(m.promptTokens) }}↑ {{ formatTokens(m.completionTokens) }}↓
+      </span>
+      <div class="ml-auto flex items-center gap-1">
+        <UBadge v-if="m.errors > 0" color="error" variant="subtle" size="sm">
+          {{ m.errors }} error{{ m.errors === 1 ? '' : 's' }}
+        </UBadge>
+        <UBadge v-if="m.warnings > 0" color="warning" variant="subtle" size="sm">
+          {{ m.warnings }} warning{{ m.warnings === 1 ? '' : 's' }}
+        </UBadge>
+        <UIcon v-if="clickable" name="i-lucide-chevron-right" class="h-3.5 w-3.5 text-slate-600" />
+      </div>
+    </div>
+
+    <!-- output-limit headroom -->
+    <div v-if="headroom !== null" class="mt-2">
+      <div class="flex items-center justify-between text-[11px]">
+        <span class="text-slate-500">Output limit</span>
+        <span class="tabular-nums" :class="headroomTone">
+          {{ formatTokens(m.peakCompletionTokens) }} /
+          {{ formatTokens(m.maxOutputTokens ?? 0) }} ({{ pct(headroom) }}%)
+        </span>
+      </div>
+      <div class="mt-1 h-1 overflow-hidden rounded-full bg-slate-700/60">
+        <div
+          class="h-full rounded-full transition-all duration-500"
+          :class="
+            m.truncatedCalls > 0 || headroom >= 0.98
+              ? 'bg-rose-400'
+              : headroom >= 0.8
+                ? 'bg-amber-400'
+                : 'bg-emerald-400'
+          "
+          :style="{ width: `${Math.max(2, pct(headroom))}%` }"
+        />
+      </div>
+      <p v-if="m.truncatedCalls > 0" class="mt-1 text-[11px] text-rose-400">
+        {{ m.truncatedCalls }} call{{ m.truncatedCalls === 1 ? '' : 's' }} truncated at the limit
+      </p>
+    </div>
+
+    <!-- transport overhead vs model execution -->
+    <div v-if="transport !== null" class="mt-2">
+      <div class="flex items-center justify-between text-[11px]">
+        <span class="text-slate-500">Transport vs execution</span>
+        <span class="tabular-nums text-slate-400">
+          {{ formatMs(m.overheadMs) }} / {{ formatMs(m.upstreamMs) }}
+        </span>
+      </div>
+      <div class="mt-1 flex h-1 overflow-hidden rounded-full bg-slate-700/60">
+        <div
+          class="h-full bg-sky-400/80"
+          :style="{ width: `${pct(transport)}%` }"
+          title="Transport / proxy overhead"
+        />
+        <div class="h-full bg-indigo-400/80 flex-1" title="Model execution" />
+      </div>
+    </div>
+  </div>
+</template>

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>