@cat-factory/app 0.28.2 → 0.29.0

package/app/components/board/AgentFailureCard.vue

@@ -15,7 +15,13 @@ const agentRuns = useAgentRunsStore()
 
 const compact = computed(() => props.variant === 'compact')
 const failure = computed(() => props.run.failure)
-const title = computed(() => (props.run.kind === 'bootstrap' ? 'Bootstrap failed' : 'Run failed'))
+const title = computed(() => {
+  // A `dispatch` failure means the container/runner never accepted the job — say so
+  // explicitly rather than the generic "Run failed", and show the verbatim provider
+  // error in the collapsible detail below.
+  if (failure.value?.kind === 'dispatch') return 'Container failed to start'
+  return props.run.kind === 'bootstrap' ? 'Bootstrap failed' : 'Run failed'
+})
 const retryLabel = computed(() =>
   props.run.kind === 'bootstrap' ? 'Retry bootstrap' : 'Retry run',
 )

package/app/components/environments/EnvironmentStatusPanel.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+// Reusable read-only view of an ephemeral environment's lifecycle: a status badge,
+// the live URL, the TTL, and — when it failed/expired — the verbatim provider error.
+// Used in a run's details (AgentStepDetail) so the Tester (and any env-consuming step)
+// shows whether the env is spinning up / running / shut down / errored, with the error.
+import type { RunEnvironment, HumanTestEnvironmentStatus } from '~/types/execution'
+
+defineProps<{ environment: RunEnvironment | null; degradedReason?: string | null }>()
+
+const ENV_STATUS_META: Record<
+  HumanTestEnvironmentStatus,
+  { label: string; color: string; icon: string }
+> = {
+  provisioning: { label: 'Spinning up…', color: 'text-amber-300', icon: 'i-lucide-loader-circle' },
+  ready: { label: 'Running', color: 'text-emerald-300', icon: 'i-lucide-circle-dot' },
+  failed: { label: 'Errored', color: 'text-rose-300', icon: 'i-lucide-circle-alert' },
+  expired: { label: 'Expired', color: 'text-slate-400', icon: 'i-lucide-circle-off' },
+  tearing_down: {
+    label: 'Shutting down…',
+    color: 'text-slate-400',
+    icon: 'i-lucide-loader-circle',
+  },
+  torn_down: { label: 'Shut down', color: 'text-slate-400', icon: 'i-lucide-circle-off' },
+}
+</script>
+
+<template>
+  <section class="rounded-lg border border-slate-800 bg-slate-900/60 p-3">
+    <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      Ephemeral environment
+    </h3>
+    <div v-if="environment" class="space-y-2">
+      <div class="flex items-center gap-2 text-[13px]">
+        <UIcon
+          :name="ENV_STATUS_META[environment.status].icon"
+          class="h-3.5 w-3.5"
+          :class="[
+            ENV_STATUS_META[environment.status].color,
+            {
+              'animate-spin':
+                environment.status === 'provisioning' || environment.status === 'tearing_down',
+            },
+          ]"
+        />
+        <span :class="ENV_STATUS_META[environment.status].color">{{
+          ENV_STATUS_META[environment.status].label
+        }}</span>
+      </div>
+      <a
+        v-if="environment.url"
+        :href="environment.url"
+        target="_blank"
+        rel="noopener"
+        class="inline-flex items-center gap-1.5 break-all text-[13px] text-sky-300 hover:underline"
+      >
+        <UIcon name="i-lucide-external-link" class="h-3.5 w-3.5 shrink-0" />
+        {{ environment.url }}
+      </a>
+      <p v-if="environment.expiresAt" class="text-[11px] text-slate-500">
+        Expires {{ new Date(environment.expiresAt).toLocaleString() }}
+      </p>
+      <!-- The verbatim provider error when the environment failed/expired. -->
+      <pre
+        v-if="
+          environment.lastError &&
+          (environment.status === 'failed' || environment.status === 'expired')
+        "
+        class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap rounded border border-rose-900/60 bg-rose-950/40 p-1.5 text-[11px] text-rose-200/90"
+        >{{ environment.lastError }}</pre
+      >
+    </div>
+    <p v-else class="text-[12px] text-slate-500">
+      {{ degradedReason ?? 'No ephemeral environment for this run.' }}
+    </p>
+  </section>
+</template>

package/app/components/panels/AgentStepDetail.vue

@@ -6,6 +6,8 @@ import { agentKindMeta } from '~/utils/catalog'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
 import StepMetadataCard from '~/components/panels/StepMetadataCard.vue'
 import StepTestReport from '~/components/panels/StepTestReport.vue'
+import EnvironmentStatusPanel from '~/components/environments/EnvironmentStatusPanel.vue'
+import ProvisioningLogsDrawer from '~/components/provisioning/ProvisioningLogsDrawer.vue'
 import { useStepTimer } from '~/composables/useStepTimer'
 import { useStepProse } from '~/composables/useStepProse'
 import { useStepApproval } from '~/composables/useStepApproval'
@@ -50,6 +52,16 @@ const pctOf = (n: number) => `${Math.round(n * 100)}%`
 const testReport = computed(() => step.value?.test?.lastReport ?? null)
 const testPhase = computed(() => step.value?.test ?? null)
 
+// The ephemeral environment this step runs against (deployer provisions it; tester/
+// coder consume it), so the panel shows its spinning-up/running/shutdown/errored state.
+const stepEnvironment = computed(() => step.value?.environment ?? null)
+
+// The run's infrastructure attempts (container/runner/env spin-up + tear-down), behind
+// a toggle. This is the surface that makes the per-run `container` log rows + the
+// executionId filter visible — most useful when the run failed to start a container.
+const showProvisioning = ref(false)
+const executionId = computed(() => instance.value?.id ?? null)
+
 // A failed run is no longer executing: a step left mid-flight (state still
 // `working`, no `finishedAt`) must stop looking live — no ticking clock, no
 // "spinning up" phase, no spinner.
@@ -310,6 +322,31 @@ async function copyOutput() {
                 @resolve="resolveCompanionCap"
               />
 
+              <!-- ephemeral environment lifecycle (spinning up / running / shut down /
+                   errored + the exact error), when this step runs against one -->
+              <EnvironmentStatusPanel v-if="stepEnvironment" :environment="stepEnvironment" />
+
+              <!-- this run's infrastructure attempts (container/runner/env spin-up +
+                   tear-down): the surface for the per-run container log rows + the exact
+                   provider error, behind a toggle (most useful on a failed-to-start run) -->
+              <div v-if="executionId">
+                <UButton
+                  :icon="showProvisioning ? 'i-lucide-chevron-up' : 'i-lucide-scroll-text'"
+                  variant="ghost"
+                  size="xs"
+                  @click="showProvisioning = !showProvisioning"
+                >
+                  {{
+                    showProvisioning ? 'Hide infrastructure attempts' : 'Infrastructure attempts'
+                  }}
+                </UButton>
+                <ProvisioningLogsDrawer
+                  v-if="showProvisioning"
+                  class="mt-2"
+                  :execution-id="executionId"
+                />
+              </div>
+
               <!-- tester report: what was tested, the per-area outcomes, the concerns
                    it raised and the greenlight verdict; plus the fixer-loop phase -->
               <StepTestReport v-if="testReport" :report="testReport" :phase="testPhase" />

package/app/components/provisioning/ProvisioningLogsDrawer.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+// The "View logs" surface for the unified provisioning event log: every attempt to
+// spin up / tear down infrastructure (environment provider, runner-pool, or per-run
+// container), with its outcome and — for failures — the verbatim provider/runtime
+// error. Two modes, mutually exclusive: pass `subsystem` for the provider config
+// panels' drawer, or `executionId` for a run's "Infrastructure attempts" drawer (which
+// surfaces that run's container/runner/env attempts). Loaded on mount + re-loadable.
+import { onMounted } from 'vue'
+import type { ProvisioningOperation, ProvisioningSubsystem } from '~/types/provisioningLogs'
+
+const props = defineProps<{ subsystem?: ProvisioningSubsystem; executionId?: string }>()
+
+const store = useProvisioningLogsStore()
+const state = computed(() =>
+  props.executionId
+    ? (store.byExecution[props.executionId] ?? { entries: [], loading: false, error: null })
+    : store.bySubsystem[props.subsystem ?? 'environment'],
+)
+
+function reload() {
+  if (props.executionId) void store.loadForExecution(props.executionId)
+  else if (props.subsystem) void store.load(props.subsystem)
+}
+
+onMounted(reload)
+
+const OPERATION_LABEL: Record<ProvisioningOperation, string> = {
+  provision: 'Spin up',
+  teardown: 'Tear down',
+  status: 'Status check',
+  dispatch: 'Spin up',
+  release: 'Tear down',
+  'poll-failure': 'Health check',
+}
+
+function when(epochMs: number): string {
+  return new Date(epochMs).toLocaleString()
+}
+</script>
+
+<template>
+  <div class="rounded-lg border border-slate-700 bg-slate-900/50">
+    <div class="flex items-center justify-between border-b border-slate-800 px-3 py-2">
+      <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Provisioning logs
+      </p>
+      <UButton
+        icon="i-lucide-rotate-ccw"
+        variant="ghost"
+        size="xs"
+        :loading="state.loading"
+        @click="reload"
+      >
+        Refresh
+      </UButton>
+    </div>
+
+    <p v-if="state.error" class="px-3 py-2 text-[12px] text-rose-300">{{ state.error }}</p>
+    <p
+      v-else-if="!state.loading && state.entries.length === 0"
+      class="px-3 py-3 text-[12px] text-slate-500"
+    >
+      No provisioning attempts recorded yet.
+    </p>
+
+    <ul v-else class="max-h-80 divide-y divide-slate-800 overflow-auto">
+      <li v-for="entry in state.entries" :key="entry.id" class="px-3 py-2">
+        <div class="flex items-center gap-2 text-[12px]">
+          <UIcon
+            :name="entry.outcome === 'success' ? 'i-lucide-check-circle' : 'i-lucide-x-circle'"
+            class="h-3.5 w-3.5 shrink-0"
+            :class="entry.outcome === 'success' ? 'text-emerald-400' : 'text-rose-400'"
+          />
+          <span class="font-medium text-slate-200">{{ OPERATION_LABEL[entry.operation] }}</span>
+          <span
+            class="rounded px-1.5 py-0.5 text-[10px] uppercase tracking-wide"
+            :class="
+              entry.outcome === 'success'
+                ? 'bg-emerald-950/60 text-emerald-300'
+                : 'bg-rose-950/60 text-rose-300'
+            "
+            >{{ entry.outcome }}</span
+          >
+          <span class="ml-auto text-[11px] text-slate-500">{{ when(entry.createdAt) }}</span>
+        </div>
+        <div v-if="entry.targetId" class="mt-0.5 text-[11px] text-slate-500">
+          {{ entry.providerId ? `${entry.providerId} · ` : '' }}{{ entry.targetId }}
+        </div>
+        <!-- The verbatim provider/runtime error on a failed attempt. -->
+        <pre
+          v-if="entry.error"
+          class="mt-1 max-h-28 overflow-auto whitespace-pre-wrap rounded border border-rose-900/50 bg-rose-950/30 p-1.5 text-[11px] text-rose-200/90"
+          >{{ entry.error }}</pre
+        >
+      </li>
+    </ul>
+  </div>
+</template>

package/app/components/settings/ProviderConnectionPanel.vue

@@ -10,6 +10,7 @@
 import { computed, ref, watch } from 'vue'
 import type { ProviderConnectionKind } from '~/types/providerConnections'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import ProvisioningLogsDrawer from '~/components/provisioning/ProvisioningLogsDrawer.vue'
 
 const ui = useUiStore()
 const store = useProviderConnectionsStore()
@@ -42,6 +43,14 @@ const meta = computed(() => (kind.value ? META[kind.value] : null))
 const descriptor = computed(() => (kind.value ? store.descriptorFor(kind.value) : null))
 const connection = computed(() => (kind.value ? store.connectionFor(kind.value) : null))
 
+// "View logs": the provisioning event history for this provider's subsystem — every
+// spin-up / tear-down attempt with its outcome and the exact error. The panel kind
+// maps 1:1 to the log subsystem ('environment' / 'runner-pool').
+const showLogs = ref(false)
+watch(kind, () => {
+  showLogs.value = false
+})
+
 // Per-field draft values, keyed by field key (blank ⇒ fall back to default/stored value).
 const values = ref<Record<string, string>>({})
 const testResult = ref<{ ok: boolean; message?: string } | null>(null)
@@ -225,7 +234,21 @@ function fieldHelp(key: string): string | undefined {
     </template>
     <template #body>
       <div v-if="descriptor" class="space-y-4">
-        <p class="text-xs text-slate-400">{{ meta?.blurb }}</p>
+        <div class="flex items-start justify-between gap-3">
+          <p class="text-xs text-slate-400">{{ meta?.blurb }}</p>
+          <UButton
+            :icon="showLogs ? 'i-lucide-chevron-up' : 'i-lucide-scroll-text'"
+            variant="ghost"
+            size="xs"
+            class="shrink-0"
+            @click="showLogs = !showLogs"
+          >
+            {{ showLogs ? 'Hide logs' : 'View logs' }}
+          </UButton>
+        </div>
+
+        <!-- Provisioning attempt history for this provider's subsystem. -->
+        <ProvisioningLogsDrawer v-if="showLogs && kind" :subsystem="kind" />
 
         <!-- Saved connection summary -->
         <div

package/app/composables/api/provisioningLogs.ts

@@ -0,0 +1,21 @@
+import type { ProvisioningLogEntry, ProvisioningSubsystem } from '~/types/provisioningLogs'
+import type { ApiContext } from './context'
+
+/** Read access to the unified provisioning event log (the "View logs" drawers + run details). */
+export function provisioningLogsApi({ http, ws }: ApiContext) {
+  return {
+    listProvisioningLogs: (
+      workspaceId: string,
+      params: { subsystem?: ProvisioningSubsystem; executionId?: string; limit?: number } = {},
+    ) => {
+      const q = new URLSearchParams()
+      if (params.subsystem) q.set('subsystem', params.subsystem)
+      if (params.executionId) q.set('executionId', params.executionId)
+      if (params.limit != null) q.set('limit', String(params.limit))
+      const qs = q.toString()
+      return http<{ entries: ProvisioningLogEntry[] }>(
+        `${ws(workspaceId)}/provisioning-logs${qs ? `?${qs}` : ''}`,
+      )
+    },
+  }
+}

package/app/composables/useApi.ts

@@ -13,6 +13,7 @@ import { modelsApi } from './api/models'
 import { notificationsApi } from './api/notifications'
 import { presetsApi } from './api/presets'
 import { providerConnectionsApi } from './api/providerConnections'
+import { provisioningLogsApi } from './api/provisioningLogs'
 import { recurringApi } from './api/recurring'
 import { releaseHealthApi } from './api/releaseHealth'
 import { sandboxApi } from './api/sandbox'
@@ -88,6 +89,7 @@ export function useApi() {
     ...notificationsApi(ctx),
     ...presetsApi(ctx),
     ...providerConnectionsApi(ctx),
+    ...provisioningLogsApi(ctx),
     ...releaseHealthApi(ctx),
     ...recurringApi(ctx),
     ...sandboxApi(ctx),

package/app/stores/provisioningLogs.ts

@@ -0,0 +1,70 @@
+import { defineStore } from 'pinia'
+import { reactive } from 'vue'
+import type { ProvisioningLogEntry, ProvisioningSubsystem } from '~/types/provisioningLogs'
+import { useWorkspaceStore } from '~/stores/workspace'
+
+interface LogState {
+  entries: ProvisioningLogEntry[]
+  loading: boolean
+  error: string | null
+}
+
+function emptyState(): LogState {
+  return { entries: [], loading: false, error: null }
+}
+
+/**
+ * The unified provisioning event log, loaded on demand for two surfaces:
+ *   - per SUBSYSTEM, for the "View logs" drawers in the environment-provider and
+ *     self-hosted runner-pool config panels;
+ *   - per EXECUTION (run), for the "Infrastructure attempts" drawer in a run's step
+ *     details — this is the surface that makes the `container` rows (per-run container
+ *     dispatch/release/poll-failure) and the `executionId` filter visible.
+ * Each shows every spin-up/tear-down attempt with its outcome + the exact error.
+ */
+export const useProvisioningLogsStore = defineStore('provisioningLogs', () => {
+  const api = useApi()
+  const bySubsystem = reactive<Record<ProvisioningSubsystem, LogState>>({
+    environment: emptyState(),
+    'runner-pool': emptyState(),
+    container: emptyState(),
+  })
+  const byExecution = reactive<Record<string, LogState>>({})
+
+  async function load(subsystem: ProvisioningSubsystem) {
+    const ws = useWorkspaceStore()
+    const s = bySubsystem[subsystem]
+    s.loading = true
+    s.error = null
+    try {
+      const { entries } = await api.listProvisioningLogs(ws.requireId(), { subsystem, limit: 200 })
+      s.entries = entries
+    } catch (err) {
+      s.error = err instanceof Error ? err.message : 'Failed to load logs'
+      s.entries = []
+    } finally {
+      s.loading = false
+    }
+  }
+
+  async function loadForExecution(executionId: string) {
+    const ws = useWorkspaceStore()
+    const s = (byExecution[executionId] ??= emptyState())
+    s.loading = true
+    s.error = null
+    try {
+      const { entries } = await api.listProvisioningLogs(ws.requireId(), {
+        executionId,
+        limit: 200,
+      })
+      s.entries = entries
+    } catch (err) {
+      s.error = err instanceof Error ? err.message : 'Failed to load logs'
+      s.entries = []
+    } finally {
+      s.loading = false
+    }
+  }
+
+  return { bySubsystem, byExecution, load, loadForExecution }
+})

package/app/types/execution.ts

@@ -339,6 +339,13 @@ export interface PipelineStep {
    * Absent on non-human-test steps. Mirrors `humanTestStepStateSchema`.
    */
   humanTest?: HumanTestStepState | null
+  /**
+   * The ephemeral environment this step runs against (when its block has one), so a
+   * run's details show its lifecycle state + the exact error. Populated by the engine
+   * for container/deployer steps; the `human-test` gate uses `humanTest.environment`.
+   * Mirrors `runEnvironmentSchema`.
+   */
+  environment?: RunEnvironment | null
 }
 
 /** One failing CI check the gate's precheck saw (mirrors `gateFailingCheckSchema`). */
@@ -410,6 +417,20 @@ export interface HumanTestEnvironment {
   expiresAt?: number | null
 }
 
+/**
+ * The ephemeral environment a run's step is associated with — surfaced in run details
+ * so its spinning-up / running / shut-down / errored state + the exact error show next
+ * to the consuming step (tester/coder). Mirrors `runEnvironmentSchema`.
+ */
+export interface RunEnvironment {
+  id: string
+  url: string | null
+  status: HumanTestEnvironmentStatus
+  expiresAt?: number | null
+  /** The verbatim provider error when the environment failed/expired, else null. */
+  lastError?: string | null
+}
+
 /** One fix / pull-main round on a `human-test` gate (mirrors `humanTestRoundSchema`). */
 export interface HumanTestRound {
   kind: 'fix' | 'pull-main'

package/app/types/provisioningLogs.ts

@@ -0,0 +1,32 @@
+// Frontend mirror of the unified provisioning event-log wire shapes
+// (`@cat-factory/contracts` provisioning-logs.ts). Drives the "View logs" drawers in
+// the environment-provider + runner-pool config panels and the run-details env surface.
+
+export type ProvisioningSubsystem = 'environment' | 'runner-pool' | 'container'
+
+export type ProvisioningOperation =
+  | 'provision'
+  | 'teardown'
+  | 'status'
+  | 'dispatch'
+  | 'release'
+  | 'poll-failure'
+
+export type ProvisioningOutcome = 'success' | 'failure'
+
+/** One provisioning attempt (spin-up / tear-down), as returned by the logs endpoint. */
+export interface ProvisioningLogEntry {
+  id: string
+  workspaceId: string
+  subsystem: ProvisioningSubsystem
+  operation: ProvisioningOperation
+  targetId: string | null
+  providerId: string | null
+  blockId: string | null
+  executionId: string | null
+  outcome: ProvisioningOutcome
+  /** The verbatim provider/runtime error on a failure, else null. */
+  error: string | null
+  detail: string | null
+  createdAt: number
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.28.2",
+  "version": "0.29.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",