@cat-factory/app 0.50.0 → 0.51.0

package/app/components/panels/StepContainerStatus.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PipelineStep, RunContainerStatus } from '~/types/execution'
+import { containerPhaseLabel } from '~/utils/pipelineRender'
+
+// The per-run container lifecycle for a container-backed step: its status (spinning up /
+// running / errored / reclaimed), the live phase (preparing the checkout vs the agent
+// making calls), and the container's id + reachable URL once up. Shared by the generic
+// step detail (StepMetadataCard) and the dedicated Tester window so both surface WHAT the
+// container is doing and WHERE it lives instead of a bare "working" — identical parity.
+const props = defineProps<{ step: PipelineStep; runFailed: boolean }>()
+
+const { t, te } = useI18n()
+
+// The container lifecycle to display. The backend persists starting / up / errored; we
+// derive `destroyed` once the container is reclaimed — when this step has finished or the
+// whole run is no longer running (the per-run container goes as a unit). `errored` wins,
+// and a reclaimed container ALWAYS reads "destroyed" — even one caught mid cold-boot
+// (`starting`) when the run terminated must NOT linger as a perpetual spinner.
+const containerStatus = computed<RunContainerStatus | null>(() => {
+  const c = props.step.container
+  if (!c) return null
+  if (c.status === 'errored') return 'errored'
+  if (props.step.state === 'done' || props.runFailed) return 'destroyed'
+  return c.status
+})
+
+// Static literal keys (not a runtime-built `t(`…${status}`)`) so the typed-message-keys
+// check covers them; exhaustive over the union so a new status fails the typecheck here.
+const CONTAINER_STATUS_KEYS: Record<RunContainerStatus, string> = {
+  starting: 'panels.stepMeta.container.status.starting',
+  up: 'panels.stepMeta.container.status.up',
+  errored: 'panels.stepMeta.container.status.errored',
+  destroyed: 'panels.stepMeta.container.status.destroyed',
+}
+const CONTAINER_STATUS_META: Record<
+  RunContainerStatus,
+  { icon: string; spin: boolean; cls: string }
+> = {
+  starting: {
+    icon: 'i-lucide-loader-circle',
+    spin: true,
+    cls: 'border-sky-900/50 bg-sky-950/30 text-sky-300',
+  },
+  up: {
+    icon: 'i-lucide-box',
+    spin: false,
+    cls: 'border-emerald-900/50 bg-emerald-950/30 text-emerald-300',
+  },
+  errored: {
+    icon: 'i-lucide-circle-x',
+    spin: false,
+    cls: 'border-rose-900/50 bg-rose-950/30 text-rose-300',
+  },
+  destroyed: {
+    icon: 'i-lucide-power-off',
+    spin: false,
+    cls: 'border-slate-800 bg-slate-900/40 text-slate-400',
+  },
+}
+
+// The friendly phase label (clone → "Preparing workspace", …); only meaningful while up.
+const phaseLabel = computed(() => containerPhaseLabel(props.step.container?.phase, { t, te }))
+</script>
+
+<template>
+  <!-- Single conditional root so a passed-through `class` (e.g. layout margin) applies
+       cleanly. Renders nothing for a non-container step / one not yet dispatched. -->
+  <div v-if="containerStatus" data-testid="step-container-status">
+    <!-- container lifecycle: status (spinning up / running / errored / reclaimed), the
+         live phase (preparing the checkout vs the agent making calls), and the
+         container's id + reachable URL once up. -->
+    <div
+      class="rounded-lg border px-3 py-2 text-[12px]"
+      :class="CONTAINER_STATUS_META[containerStatus].cls"
+    >
+      <div class="flex items-center gap-2">
+        <UIcon
+          :name="CONTAINER_STATUS_META[containerStatus].icon"
+          class="h-4 w-4 shrink-0"
+          :class="CONTAINER_STATUS_META[containerStatus].spin ? 'animate-spin' : ''"
+        />
+        <span class="font-medium">{{ t(CONTAINER_STATUS_KEYS[containerStatus]) }}</span>
+        <template v-if="phaseLabel && containerStatus === 'up'">
+          <span class="text-slate-500">·</span>
+          <span>{{ phaseLabel }}</span>
+        </template>
+      </div>
+      <dl v-if="step.container?.id || step.container?.url" class="mt-2 space-y-1">
+        <div v-if="step.container?.id" class="flex items-center gap-2">
+          <dt class="shrink-0 text-[11px] uppercase tracking-wide text-slate-500">
+            {{ t('panels.stepMeta.container.id') }}
+          </dt>
+          <dd class="truncate font-mono text-[11px] text-slate-300" :title="step.container.id">
+            {{ step.container.id }}
+          </dd>
+        </div>
+        <div v-if="step.container?.url" class="flex items-center gap-2">
+          <dt class="shrink-0 text-[11px] uppercase tracking-wide text-slate-500">
+            {{ t('panels.stepMeta.container.url') }}
+          </dt>
+          <dd class="truncate font-mono text-[11px] text-slate-300">
+            <a
+              :href="step.container.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="hover:underline"
+            >
+              {{ step.container.url }}
+            </a>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+</template>

package/app/components/panels/StepMetadataCard.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import type { AgentState, PipelineStep, CompanionVerdict, StepApproval } from '~/types/execution'
 import { subtaskIconClass } from '~/utils/pipelineRender'
 import StepModelActivity from '~/components/observability/StepModelActivity.vue'
+import StepContainerStatus from '~/components/panels/StepContainerStatus.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
@@ -153,15 +154,9 @@ async function copyRunId() {
       </div>
     </dl>
 
-    <!-- container cold-boot phase: shown until the container is up and
-         the agent starts reporting progress -->
-    <div
-      v-if="step.startingContainer && !runFailed"
-      class="mt-4 flex items-center gap-2 rounded-lg border border-sky-900/50 bg-sky-950/30 px-3 py-2 text-[12px] text-sky-300"
-    >
-      <UIcon name="i-lucide-loader-circle" class="h-4 w-4 shrink-0 animate-spin" />
-      <span>{{ t('panels.stepMeta.spinningUpContainer') }}</span>
-    </div>
+    <!-- container lifecycle (status / live phase / id + url) — shared with the Tester
+         window so both surface what the container is doing and where it lives. -->
+    <StepContainerStatus :step="step" :run-failed="runFailed" class="mt-4" />
 
     <!-- live subtask breakdown -->
     <div v-if="step.subtasks && step.subtasks.total > 0" class="mt-4">

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

@@ -9,27 +9,53 @@ const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const fragments = useFragmentsStore()
+const ui = useUiStore()
+const accounts = useAccountsStore()
 const { t } = useI18n()
 
 onMounted(() => fragments.ensureLoaded())
 
+type MenuItem = { label: string; icon?: string; onSelect: () => void }
+
 const selectedFragments = computed(() =>
   (props.block.serviceFragmentIds ?? [])
     .map((id) => fragments.getFragment(id))
     .filter((f): f is NonNullable<typeof f> => !!f),
 )
 
-// Picker menu: every pool fragment not already selected, grouped by category.
-const fragmentMenu = computed(() => {
+// A trailing group that jumps from "attach a fragment" to authoring/editing the
+// library itself (board tier always; account tier when accounts are enabled).
+// Open to every member — managing fragments is not an admin-only action.
+const manageItems = computed<MenuItem[]>(() => {
+  const items: MenuItem[] = [
+    {
+      label: t('inspector.fragments.manageBoard'),
+      icon: 'i-lucide-book-marked',
+      onSelect: () => ui.openFragmentLibrary(),
+    },
+  ]
+  if (accounts.enabled) {
+    items.push({
+      label: t('inspector.fragments.manageAccount'),
+      icon: 'i-lucide-users',
+      onSelect: () => ui.openAccountSettings('fragments'),
+    })
+  }
+  return items
+})
+
+// Picker menu: every pool fragment not already selected, grouped by category, with
+// the management links appended as the final group.
+const fragmentMenu = computed<MenuItem[][]>(() => {
   const selected = new Set(props.block.serviceFragmentIds ?? [])
-  const groups = new Map<string, { label: string; onSelect: () => void }[]>()
+  const groups = new Map<string, MenuItem[]>()
   for (const f of fragments.fragments) {
     if (selected.has(f.id)) continue
     const items = groups.get(f.category) ?? []
     items.push({ label: f.title, onSelect: () => addFragment(f.id) })
     groups.set(f.category, items)
   }
-  return [...groups.values()]
+  return [...groups.values(), manageItems.value]
 })
 
 function addFragment(id: string) {
@@ -52,7 +78,7 @@ function removeFragment(id: string) {
       <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
         {{ t('inspector.fragments.serviceTitle') }}
       </span>
-      <UDropdownMenu v-if="fragmentMenu.length" :items="fragmentMenu">
+      <UDropdownMenu :items="fragmentMenu">
         <UButton
           size="xs"
           variant="ghost"

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

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import type { Block } from '~/types/domain'
 import { agentKindMeta } from '~/utils/catalog'
-import { gateCompanionFor, COMPANION_STATE_META, isCompanionKind } from '~/utils/pipelineRender'
+import {
+  gateCompanionFor,
+  COMPANION_STATE_META,
+  isCompanionKind,
+  containerPhaseLabel,
+} from '~/utils/pipelineRender'
 import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
 
 const props = defineProps<{ block: Block }>()
@@ -11,7 +16,7 @@ const agentRuns = useAgentRunsStore()
 const ui = useUiStore()
 const models = useModelsStore()
 const reviews = useReviewStage()
-const { t } = useI18n()
+const { t, te } = useI18n()
 
 // The async stage this task's iterative reviewer gate (requirements-review / clarity-review)
 // is mid-cycle in (folding the answers, then re-reviewing), or null. While set, the gate is
@@ -68,7 +73,7 @@ function labelForStep(s: {
   agentKind?: string
   approval?: { status: string } | null
   companion?: { exceeded?: boolean } | null
-  startingContainer?: boolean
+  container?: { status: string; phase?: string | null } | null
 }) {
   // A step left mid-flight on a failed run reads "Failed", not the misleading "Working".
   if (stepFailed(s)) return t('inspector.execution.failed')
@@ -79,9 +84,17 @@ function labelForStep(s: {
   if (s.approval?.status === 'pending' && s.companion?.exceeded)
     return t('inspector.execution.needsDecision')
   if (s.approval?.status === 'pending') return t('inspector.execution.needsApproval')
-  // A container-backed step whose container is still cold-booting (only while the
-  // run is live — a failed run's mid-flight step is no longer spinning up).
-  if (s.startingContainer && !runFailed.value) return t('inspector.execution.spinningUp')
+  // A container-backed step: surface its live lifecycle while the run is running. The
+  // container is still cold-booting → "Spinning up"; up with a known phase → the phase
+  // label ("Agent running" / "Preparing workspace"), so a finished cold-boot no longer
+  // collapses into a blank "Working". A failed run's mid-flight step isn't booting.
+  if (!runFailed.value) {
+    if (s.container?.status === 'starting') return t('inspector.execution.spinningUp')
+    if (s.container?.status === 'up') {
+      const label = containerPhaseLabel(s.container.phase, { t, te })
+      if (label) return label
+    }
+  }
   const key = stepLabel[s.state]
   return key ? t(key) : s.state
 }

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

@@ -5,8 +5,12 @@ const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const fragments = useFragmentsStore()
+const ui = useUiStore()
+const accounts = useAccountsStore()
 const { t } = useI18n()
 
+type MenuItem = { label: string; icon?: string; onSelect: () => void }
+
 // ---- best-practice prompt fragments ----------------------------------------
 // Selected fragments (resolved against the catalog; unknown ids are dropped).
 const selectedFragments = computed(() =>
@@ -15,18 +19,40 @@ const selectedFragments = computed(() =>
     .filter((f): f is NonNullable<typeof f> => !!f),
 )
 
+// A trailing group that jumps from "attach a fragment" to authoring/editing the
+// library itself (board tier always; account tier when accounts are enabled).
+// Open to every member — managing fragments is not an admin-only action.
+const manageItems = computed<MenuItem[]>(() => {
+  const items: MenuItem[] = [
+    {
+      label: t('inspector.fragments.manageBoard'),
+      icon: 'i-lucide-book-marked',
+      onSelect: () => ui.openFragmentLibrary(),
+    },
+  ]
+  if (accounts.enabled) {
+    items.push({
+      label: t('inspector.fragments.manageAccount'),
+      icon: 'i-lucide-users',
+      onSelect: () => ui.openAccountSettings('fragments'),
+    })
+  }
+  return items
+})
+
 // Picker menu: fragments suitable for this block's type, not already selected,
-// grouped by category so the dropdown reads like the catalog.
-const fragmentMenu = computed(() => {
+// grouped by category so the dropdown reads like the catalog, with the management
+// links appended as the final group.
+const fragmentMenu = computed<MenuItem[][]>(() => {
   const selected = new Set(props.block.fragmentIds ?? [])
-  const groups = new Map<string, { label: string; onSelect: () => void }[]>()
+  const groups = new Map<string, MenuItem[]>()
   for (const f of fragments.forBlockType(props.block.type)) {
     if (selected.has(f.id)) continue
     const items = groups.get(f.category) ?? []
     items.push({ label: f.title, onSelect: () => addFragment(f.id) })
     groups.set(f.category, items)
   }
-  return [...groups.values()]
+  return [...groups.values(), manageItems.value]
 })
 
 function addFragment(id: string) {
@@ -65,7 +91,7 @@ function removeFragment(id: string) {
         <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
           {{ t('inspector.structure.bestPractices') }}
         </span>
-        <UDropdownMenu v-if="fragmentMenu.length" :items="fragmentMenu">
+        <UDropdownMenu :items="fragmentMenu">
           <UButton
             size="xs"
             variant="ghost"

package/app/components/pipeline/PipelineProgress.vue

@@ -9,6 +9,7 @@ import {
   isCompanionKind,
   isFailedStep,
   FAILED_STEP_META,
+  containerPhaseLabel,
 } from '~/utils/pipelineRender'
 import StepMetricsBar from '~/components/observability/StepMetricsBar.vue'
 
@@ -22,7 +23,15 @@ const models = useModelsStore()
 const ui = useUiStore()
 const execution = useExecutionStore()
 const reviews = useReviewStage()
-const { t } = useI18n()
+const { t, te } = useI18n()
+
+// The friendly container phase label for a step whose container is up — null otherwise.
+// Lets the board fill the gap between the cold-boot badge clearing and the first subtask
+// count (the old "blank working"). Shared with the step-detail card + inspector label.
+function stepPhaseLabel(s: { container?: { status: string; phase?: string | null } | null }) {
+  if (s.container?.status !== 'up') return null
+  return containerPhaseLabel(s.container.phase, { t, te })
+}
 
 // While an iterative reviewer gate (requirements-review / clarity-review) folds the
 // answers / re-reviews in the background it needs NO human, so its parked approval is
@@ -126,9 +135,9 @@ const total = computed(() => steps.value.length)
 // human can see at a glance whether the fixer ran or was skipped.
 const companionByStep = computed(() => steps.value.map((s) => gateCompanionFor(s, runFailed.value)))
 
-// A failed run is no longer executing: a step left mid-flight (state still
-// `working`, `startingContainer` still set) must stop looking live — no spinner,
-// no pulse, no "spinning up container" phase.
+// A failed run is no longer executing: a step left mid-flight (state still `working`,
+// its container caught mid cold-boot) must stop looking live — no spinner, no pulse,
+// no "spinning up container" phase.
 const runFailed = computed(() => props.instance.status === 'failed')
 /** A step that is genuinely, currently working (not a stale mid-flight step). */
 function liveWorking(state: AgentState) {
@@ -356,16 +365,25 @@ const ITEM_ICON: Record<string, string> = {
             class="mt-3"
           />
 
-          <!-- container cold-boot phase: shown until the container is up and the
-               agent starts reporting progress -->
+          <!-- container cold-boot phase: shown while the container is spinning up. -->
           <div
-            v-if="s.startingContainer && !runFailed"
+            v-if="s.container?.status === 'starting' && !runFailed"
             class="mt-2 flex items-center gap-1.5 text-[11px] text-sky-300"
           >
             <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 shrink-0 animate-spin" />
             <span>{{ t('pipeline.progress.spinningUpContainer') }}</span>
           </div>
 
+          <!-- container is up: show WHAT it's doing (preparing the checkout vs the agent
+               making calls) so the step isn't a blank "working" before subtasks appear. -->
+          <div
+            v-else-if="stepPhaseLabel(s) && !runFailed"
+            class="mt-2 flex items-center gap-1.5 text-[11px] text-emerald-300"
+          >
+            <UIcon name="i-lucide-box" class="h-3.5 w-3.5 shrink-0" />
+            <span>{{ stepPhaseLabel(s) }}</span>
+          </div>
+
           <!-- live subtask counts from the agent's todo list -->
           <div v-if="s.subtasks && s.subtasks.total > 0" class="mt-2">
             <div class="flex items-center justify-between text-[10px] text-slate-400">

package/app/components/testing/TestReportWindow.vue

@@ -17,10 +17,13 @@ import { useFocusTrap } from '~/composables/useFocusTrap'
 import ArtifactLightbox from '~/components/media/ArtifactLightbox.vue'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
+import StepContainerStatus from '~/components/panels/StepContainerStatus.vue'
+import EnvironmentStatusPanel from '~/components/environments/EnvironmentStatusPanel.vue'
+import ProvisioningLogsDrawer from '~/components/provisioning/ProvisioningLogsDrawer.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
-const { t } = useI18n()
+const { t, d } = useI18n()
 
 // Per-window blob cache for the captured screenshots; revoked on unmount.
 const blobs = useArtifactBlobs()
@@ -40,6 +43,20 @@ const step = computed(() => {
 })
 const report = computed<TestReport | null>(() => step.value?.test?.lastReport ?? null)
 const testState = computed(() => step.value?.test ?? null)
+// The inspectable Fixer history: one entry per fixer round (what it was handed + how it
+// ended), newest first, so the otherwise-opaque fixer sub-jobs have a surface here.
+const fixerAttempts = computed(() => [...(testState.value?.attemptLog ?? [])].reverse())
+
+// Infrastructure observability — parity with the Coder's generic step detail, so the
+// Tester window surfaces WHERE its job runs (the container lifecycle: spinning up /
+// running phase / id+url / errored), the ephemeral environment it tests against, and the
+// run's infrastructure attempts + logs (container/runner/env spin-up), not just the
+// report. The container/subtask signals already flow onto the step via the generic poll.
+const runFailed = computed(() => instance.value?.status === 'failed')
+const stepEnvironment = computed(() => step.value?.environment ?? null)
+const executionId = computed(() => instance.value?.id ?? null)
+// The infra-attempts log drawer is opened on demand (it fetches the per-run log rows).
+const showProvisioning = ref(false)
 
 const screenshots = computed<TestScreenshot[]>(() => report.value?.screenshots ?? [])
 // Resolve each capture into an object URL for the gallery + lightbox. The shared cache
@@ -258,6 +275,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
         tabindex="-1"
         role="dialog"
         aria-modal="true"
+        data-testid="tester-report-window"
         :aria-label="t('testing.title')"
         class="m-4 flex w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl focus:outline-none"
       >
@@ -310,11 +328,118 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
         </header>
 
         <div class="flex min-h-0 flex-1">
-          <!-- Main: scenarios → outcomes → concerns tree -->
-          <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
+          <!-- Main: infrastructure observability + scenarios → outcomes → concerns tree -->
+          <div class="min-w-0 flex-1 space-y-4 overflow-y-auto px-5 py-4">
+            <!-- Infrastructure: container lifecycle (where + what it's doing), the
+                 ephemeral environment, and the run's infra attempts + logs — parity with
+                 the Coder's step detail. Shown even before a report lands, so the infra
+                 spin-up is visible WHILE the Tester is still standing it up. -->
+            <!-- Only when there's genuine infrastructure to show — a container or an ephemeral
+                 environment. A no-infra tester (no container, no env) has no infra attempts
+                 either, so we don't render an empty header + a log toggle over nothing. -->
+            <section
+              v-if="step && (step.container || stepEnvironment)"
+              data-testid="tester-infrastructure"
+              class="space-y-3"
+            >
+              <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                {{ t('testing.infrastructure') }}
+              </h3>
+              <StepContainerStatus :step="step" :run-failed="runFailed" />
+              <EnvironmentStatusPanel v-if="stepEnvironment" :environment="stepEnvironment" />
+              <div v-if="executionId">
+                <UButton
+                  :icon="showProvisioning ? 'i-lucide-chevron-up' : 'i-lucide-scroll-text'"
+                  variant="ghost"
+                  size="xs"
+                  data-testid="tester-infra-attempts-toggle"
+                  @click="showProvisioning = !showProvisioning"
+                >
+                  {{
+                    showProvisioning
+                      ? t('panels.stepDetail.hideInfraAttempts')
+                      : t('panels.stepDetail.infraAttempts')
+                  }}
+                </UButton>
+                <ProvisioningLogsDrawer
+                  v-if="showProvisioning"
+                  class="mt-2"
+                  :execution-id="executionId"
+                />
+              </div>
+            </section>
+
+            <!-- Fixer timeline: one inspectable entry per fixer round (what it was handed and
+                 how it ended), so the otherwise-opaque fixer sub-jobs have a surface — the
+                 analogue of the polling gate's attempt history. -->
+            <section
+              v-if="fixerAttempts.length"
+              data-testid="tester-fixer-attempts"
+              class="space-y-2"
+            >
+              <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                {{ t('testing.fixerAttempts') }}
+              </h3>
+              <ol class="space-y-2">
+                <li
+                  v-for="a in fixerAttempts"
+                  :key="a.attempt"
+                  data-testid="tester-fixer-attempt"
+                  class="rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-2"
+                >
+                  <div class="flex items-center gap-2">
+                    <UIcon
+                      :name="a.outcome === 'completed' ? 'i-lucide-wrench' : 'i-lucide-circle-x'"
+                      class="h-3.5 w-3.5 shrink-0"
+                      :class="a.outcome === 'completed' ? 'text-amber-300' : 'text-rose-400'"
+                    />
+                    <span class="text-[13px] font-medium text-slate-200">
+                      {{ t('testing.fixerTimeline.attempt', { n: a.attempt }) }}
+                    </span>
+                    <UBadge
+                      :color="a.outcome === 'completed' ? 'neutral' : 'error'"
+                      variant="subtle"
+                      size="sm"
+                    >
+                      {{
+                        a.outcome === 'completed'
+                          ? t('testing.fixerTimeline.completed')
+                          : t('testing.fixerTimeline.failed')
+                      }}
+                    </UBadge>
+                    <span class="ml-auto text-[11px] text-slate-500">{{
+                      d(new Date(a.at), 'short')
+                    }}</span>
+                  </div>
+                  <p v-if="a.summary" class="mt-1 text-[12px] leading-snug text-slate-400">
+                    {{ a.summary }}
+                  </p>
+                  <div v-if="a.concerns && a.concerns.length" class="mt-1.5">
+                    <p class="text-[11px] text-slate-500">
+                      {{ t('testing.fixerTimeline.addressed') }}
+                    </p>
+                    <ul class="mt-1 space-y-0.5">
+                      <li
+                        v-for="(c, ci) in a.concerns"
+                        :key="`fa${a.attempt}-c${ci}`"
+                        class="flex items-center gap-1.5 text-[12px] text-slate-300"
+                      >
+                        <span
+                          class="rounded px-1 text-[10px] uppercase"
+                          :class="SEVERITY_META[c.severity].chip"
+                          >{{ SEVERITY_LABELS[c.severity] }}</span
+                        >
+                        <span class="truncate">{{ c.title }}</span>
+                      </li>
+                    </ul>
+                  </div>
+                </li>
+              </ol>
+            </section>
+
             <div
               v-if="!report"
-              class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"
+              class="flex flex-col items-center justify-center gap-2 py-12 text-center text-slate-400"
             >
               <UIcon name="i-lucide-flask-conical" class="h-8 w-8 opacity-40" />
               <p class="text-sm">{{ t('testing.empty.title') }}</p>

package/app/types/execution.ts

@@ -35,6 +35,8 @@ export type {
   TesterStepState,
   HumanTestEnvironment,
   RunEnvironment,
+  RunContainer,
+  RunContainerStatus,
   HumanTestRound,
   HumanTestStepState,
   VisualConfirmStepState,

package/app/utils/pipelineRender.ts

@@ -133,6 +133,24 @@ export function isCompanionKind(kind: string): boolean {
   )
 }
 
+/**
+ * The friendly label for a container's live phase (clone → "Preparing workspace",
+ * agent → "Agent running", …), falling back to the raw phase string for an unknown/new
+ * phase (the phase vocabulary is harness-controlled and open-ended). `null` when there's
+ * no phase to show. Kept here so the three views that render it (the step-detail card,
+ * the inspector label, the board node) resolve it identically rather than re-deriving the
+ * key + `te()`-fallback inline. `t`/`te` are passed in since this is a pure util, not a
+ * composable.
+ */
+export function containerPhaseLabel(
+  phase: string | null | undefined,
+  i18n: { t: (key: string) => string; te: (key: string) => boolean },
+): string | null {
+  if (!phase) return null
+  const key = `panels.stepMeta.container.phase.${phase}`
+  return i18n.te(key) ? i18n.t(key) : phase
+}
+
 /**
  * Tailwind classes for a subtask-item status icon. An in-progress item spins only
  * while the run is live: once the run has failed, a step left mid-flight (its item

package/i18n/locales/en.json

@@ -397,7 +397,9 @@
     },
     "fragments": {
       "serviceTitle": "Service best practices",
-      "serviceEmpty": "None. Code-aware agents on this service follow their default guidance."
+      "serviceEmpty": "None. Code-aware agents on this service follow their default guidance.",
+      "manageBoard": "Manage this board's fragment library…",
+      "manageAccount": "Manage account fragments…"
     },
     "releaseHealth": {
       "title": "Post-release health",
@@ -599,6 +601,23 @@
       "run": "Run",
       "clickToCopy": "{id} (click to copy)",
       "spinningUpContainer": "Spinning up container…",
+      "container": {
+        "status": {
+          "starting": "Spinning up container…",
+          "up": "Container running",
+          "errored": "Container errored",
+          "destroyed": "Container reclaimed"
+        },
+        "phase": {
+          "starting": "Starting up",
+          "clone": "Preparing workspace",
+          "agent": "Agent running",
+          "push": "Pushing changes",
+          "done": "Finishing up"
+        },
+        "id": "Container",
+        "url": "Address"
+      },
       "subtasks": "Subtasks · {completed}/{total}",
       "standardsApplied": "Standards applied",
       "decision": "Decision",
@@ -2930,6 +2949,12 @@
     "fixerAttempts": "Fixer attempts",
     "fixCount": "{attempts}/{max} fix",
     "fixingSuffix": "· fixing…",
+    "fixerTimeline": {
+      "attempt": "Attempt {n}",
+      "completed": "Completed",
+      "failed": "Failed",
+      "addressed": "Addressing"
+    },
     "empty": {
       "title": "No test report yet.",
       "hint": "The report appears once the Tester finishes a pass. While it runs, the step shows live progress on the board."
@@ -2973,6 +2998,7 @@
       "blocking": "({count} blocking) | ({count} blocking)"
     },
     "environment": "Environment",
+    "infrastructure": "Infrastructure",
     "footer": "Scenarios are the areas the Tester chose to exercise (its spec acceptance scenarios). Outcomes and concerns are grouped under them by name.",
     "@screenshotAlt": {
       "description": "Alt text for a captured screenshot thumbnail; {view} is the screen/view name. The literal word 'screenshot' should be localized."

package/i18n/locales/es.json

@@ -361,7 +361,9 @@
     },
     "fragments": {
       "serviceTitle": "Buenas prácticas del servicio",
-      "serviceEmpty": "Ninguna. Los agentes que conocen el código en este servicio siguen su guía predeterminada."
+      "serviceEmpty": "Ninguna. Los agentes que conocen el código en este servicio siguen su guía predeterminada.",
+      "manageBoard": "Gestionar la biblioteca de fragmentos de este tablero…",
+      "manageAccount": "Gestionar los fragmentos de la cuenta…"
     },
     "releaseHealth": {
       "title": "Salud posterior al lanzamiento",
@@ -582,6 +584,23 @@
         "approved": "Aprobado",
         "changes_requested": "Cambios solicitados",
         "rejected": "Rechazado"
+      },
+      "container": {
+        "status": {
+          "starting": "Iniciando contenedor…",
+          "up": "Contenedor en ejecución",
+          "errored": "Error del contenedor",
+          "destroyed": "Contenedor liberado"
+        },
+        "phase": {
+          "starting": "Iniciando",
+          "clone": "Preparando el espacio de trabajo",
+          "agent": "Agente en ejecución",
+          "push": "Enviando cambios",
+          "done": "Finalizando"
+        },
+        "id": "Contenedor",
+        "url": "Dirección"
       }
     },
     "stepDetail": {
@@ -2843,6 +2862,12 @@
     "fixerAttempts": "Intentos del corrector",
     "fixCount": "{attempts}/{max} corrección",
     "fixingSuffix": "· corrigiendo…",
+    "fixerTimeline": {
+      "attempt": "Intento {n}",
+      "completed": "Completado",
+      "failed": "Falló",
+      "addressed": "Abordando"
+    },
     "empty": {
       "title": "Aún no hay informe de pruebas.",
       "hint": "El informe aparece cuando el Tester termina una pasada. Mientras se ejecuta, el paso muestra el progreso en vivo en el tablero."
@@ -2886,7 +2911,8 @@
       "blocking": "({count} bloqueante) | ({count} bloqueantes)"
     },
     "environment": "Entorno",
-    "footer": "Los escenarios son las áreas que el Tester decidió ejercitar (sus escenarios de aceptación de la especificación). Los resultados y las incidencias se agrupan bajo ellos por nombre."
+    "footer": "Los escenarios son las áreas que el Tester decidió ejercitar (sus escenarios de aceptación de la especificación). Los resultados y las incidencias se agrupan bajo ellos por nombre.",
+    "infrastructure": "Infraestructura"
   },
   "visualConfirm": {
     "ariaLabel": "Confirmación visual",

package/i18n/locales/fr.json

@@ -361,7 +361,9 @@
     },
     "fragments": {
       "serviceTitle": "Bonnes pratiques du service",
-      "serviceEmpty": "Aucune. Les agents conscients du code sur ce service suivent leurs consignes par défaut."
+      "serviceEmpty": "Aucune. Les agents conscients du code sur ce service suivent leurs consignes par défaut.",
+      "manageBoard": "Gérer la bibliothèque de fragments de ce tableau…",
+      "manageAccount": "Gérer les fragments du compte…"
     },
     "releaseHealth": {
       "title": "Santé post-déploiement",
@@ -582,6 +584,23 @@
         "approved": "Approuvé",
         "changes_requested": "Modifications demandées",
         "rejected": "Rejeté"
+      },
+      "container": {
+        "status": {
+          "starting": "Démarrage du conteneur…",
+          "up": "Conteneur en cours d’exécution",
+          "errored": "Erreur du conteneur",
+          "destroyed": "Conteneur libéré"
+        },
+        "phase": {
+          "starting": "Démarrage",
+          "clone": "Préparation de l’espace de travail",
+          "agent": "Agent en cours d’exécution",
+          "push": "Envoi des modifications",
+          "done": "Finalisation"
+        },
+        "id": "Conteneur",
+        "url": "Adresse"
       }
     },
     "stepDetail": {
@@ -2843,6 +2862,12 @@
     "fixerAttempts": "Tentatives du correcteur",
     "fixCount": "{attempts}/{max} correction",
     "fixingSuffix": "· correction…",
+    "fixerTimeline": {
+      "attempt": "Tentative {n}",
+      "completed": "Terminé",
+      "failed": "Échec",
+      "addressed": "Corrige"
+    },
     "empty": {
       "title": "Aucun rapport de tests pour l'instant.",
       "hint": "Le rapport apparaît une fois que le Testeur a terminé une passe. Pendant son exécution, l'étape affiche la progression en direct sur le tableau."
@@ -2886,7 +2911,8 @@
       "blocking": "({count} bloquante) | ({count} bloquantes)"
     },
     "environment": "Environnement",
-    "footer": "Les scénarios sont les domaines que le Testeur a choisi d'éprouver (ses scénarios d'acceptation de la spécification). Les résultats et les réserves y sont regroupés par nom."
+    "footer": "Les scénarios sont les domaines que le Testeur a choisi d'éprouver (ses scénarios d'acceptation de la spécification). Les résultats et les réserves y sont regroupés par nom.",
+    "infrastructure": "Infrastructure"
   },
   "visualConfirm": {
     "ariaLabel": "Confirmation visuelle",

package/i18n/locales/pl.json

@@ -361,7 +361,9 @@
     },
     "fragments": {
       "serviceTitle": "Dobre praktyki usługi",
-      "serviceEmpty": "Brak. Agenci świadomi kodu w tej usłudze stosują swoje domyślne wytyczne."
+      "serviceEmpty": "Brak. Agenci świadomi kodu w tej usłudze stosują swoje domyślne wytyczne.",
+      "manageBoard": "Zarządzaj biblioteką fragmentów tej tablicy…",
+      "manageAccount": "Zarządzaj fragmentami konta…"
     },
     "releaseHealth": {
       "title": "Kondycja po wydaniu",
@@ -582,6 +584,23 @@
         "approved": "Zatwierdzone",
         "changes_requested": "Zażądano zmian",
         "rejected": "Odrzucone"
+      },
+      "container": {
+        "status": {
+          "starting": "Uruchamianie kontenera…",
+          "up": "Kontener działa",
+          "errored": "Błąd kontenera",
+          "destroyed": "Kontener zwolniony"
+        },
+        "phase": {
+          "starting": "Uruchamianie",
+          "clone": "Przygotowywanie obszaru roboczego",
+          "agent": "Agent działa",
+          "push": "Wysyłanie zmian",
+          "done": "Kończenie"
+        },
+        "id": "Kontener",
+        "url": "Adres"
       }
     },
     "stepDetail": {
@@ -2843,6 +2862,12 @@
     "fixerAttempts": "Próby naprawy",
     "fixCount": "{attempts}/{max} naprawa",
     "fixingSuffix": "· naprawianie…",
+    "fixerTimeline": {
+      "attempt": "Próba {n}",
+      "completed": "Ukończono",
+      "failed": "Niepowodzenie",
+      "addressed": "Naprawia"
+    },
     "empty": {
       "title": "Brak raportu z testów.",
       "hint": "Raport pojawi się, gdy Tester zakończy przebieg. W trakcie działania krok pokazuje postęp na żywo na tablicy."
@@ -2886,7 +2911,8 @@
       "blocking": "({count} blokujące) | ({count} blokujące) | ({count} blokujących)"
     },
     "environment": "Środowisko",
-    "footer": "Scenariusze to obszary, które Tester postanowił sprawdzić (jego scenariusze akceptacyjne ze specyfikacji). Wyniki i zastrzeżenia są pod nimi grupowane według nazwy."
+    "footer": "Scenariusze to obszary, które Tester postanowił sprawdzić (jego scenariusze akceptacyjne ze specyfikacji). Wyniki i zastrzeżenia są pod nimi grupowane według nazwy.",
+    "infrastructure": "Infrastruktura"
   },
   "visualConfirm": {
     "ariaLabel": "Potwierdzenie wizualne",

package/i18n/locales/uk.json

@@ -361,7 +361,9 @@
     },
     "fragments": {
       "serviceTitle": "Найкращі практики сервісу",
-      "serviceEmpty": "Немає. Агенти, що працюють з кодом цього сервісу, дотримуються типових інструкцій."
+      "serviceEmpty": "Немає. Агенти, що працюють з кодом цього сервісу, дотримуються типових інструкцій.",
+      "manageBoard": "Керувати бібліотекою фрагментів цієї дошки…",
+      "manageAccount": "Керувати фрагментами облікового запису…"
     },
     "releaseHealth": {
       "title": "Стан після релізу",
@@ -582,6 +584,23 @@
         "approved": "Затверджено",
         "changes_requested": "Запитано зміни",
         "rejected": "Відхилено"
+      },
+      "container": {
+        "status": {
+          "starting": "Запуск контейнера…",
+          "up": "Контейнер працює",
+          "errored": "Помилка контейнера",
+          "destroyed": "Контейнер звільнено"
+        },
+        "phase": {
+          "starting": "Запуск",
+          "clone": "Підготовка робочого простору",
+          "agent": "Агент працює",
+          "push": "Надсилання змін",
+          "done": "Завершення"
+        },
+        "id": "Контейнер",
+        "url": "Адреса"
       }
     },
     "stepDetail": {
@@ -2843,6 +2862,12 @@
     "fixerAttempts": "Спроби виправлення",
     "fixCount": "{attempts}/{max} виправлення",
     "fixingSuffix": "· виправлення…",
+    "fixerTimeline": {
+      "attempt": "Спроба {n}",
+      "completed": "Завершено",
+      "failed": "Помилка",
+      "addressed": "Виправляє"
+    },
     "empty": {
       "title": "Звіту про тестування ще немає.",
       "hint": "Звіт зʼявиться після того, як Тестувальник завершить прохід. Поки він виконується, крок показує прогрес у реальному часі на дошці."
@@ -2886,7 +2911,8 @@
       "blocking": "({count} блокувальне) | ({count} блокувальні) | ({count} блокувальних)"
     },
     "environment": "Середовище",
-    "footer": "Сценарії — це області, які Тестувальник вирішив перевірити (його сценарії приймання зі специфікації). Результати та зауваження групуються під ними за назвою."
+    "footer": "Сценарії — це області, які Тестувальник вирішив перевірити (його сценарії приймання зі специфікації). Результати та зауваження групуються під ними за назвою.",
+    "infrastructure": "Інфраструктура"
   },
   "visualConfirm": {
     "ariaLabel": "Візуальне підтвердження",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "valibot": "^1.4.2",
     "vue": "^3.5.39",
     "wretch": "^3.0.9",
-    "@cat-factory/contracts": "0.52.0"
+    "@cat-factory/contracts": "0.53.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.2",