@cat-factory/app 0.28.1 → 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/documents/DocumentImportModal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { DocumentSourceKind } from '~/types/domain'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 // Import pages from a connected document source and pick one to expand into
 // board structure. A source selector lets the user choose which connected source
@@ -74,6 +75,15 @@ function preview(externalId: string) {
 
 <template>
   <UModal v-model:open="open" title="Import from a document source">
+    <template #title>
+      <IntegrationBackTitle
+        title="Import from a document source"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div v-if="!documents.anyConnected" class="space-y-3 text-center">
         <UIcon name="i-lucide-plug" class="mx-auto h-8 w-8 text-slate-500" />

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -4,6 +4,8 @@
 // same modal serves Confluence, Notion and any future source. Secret credentials
 // are write-only — the backend never returns them, so on reload we show
 // "Connected" with empty fields.
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+
 const ui = useUiStore()
 const documents = useDocumentsStore()
 const toast = useToast()
@@ -77,6 +79,15 @@ async function disconnect() {
 
 <template>
   <UModal v-model:open="open" :title="descriptor?.label ?? 'Connect source'">
+    <template #title>
+      <IntegrationBackTitle
+        :title="descriptor?.label ?? 'Connect source'"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div v-if="descriptor" class="space-y-4">
         <p class="text-sm text-slate-400">

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/github/GitHubPanel.vue

@@ -10,6 +10,7 @@ import type { GitHubPullRequest, GitHubRepo } from '~/types/domain'
 // tag, so it silently renders as an empty element. Importing it directly binds
 // the tag unambiguously.
 import GitHubConnect from './GitHubConnect.vue'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const github = useGitHubStore()
@@ -199,6 +200,15 @@ async function merge(pr: GitHubPullRequest) {
 
 <template>
   <UModal v-model:open="open" title="GitHub" :ui="{ content: 'max-w-2xl' }">
+    <template #title>
+      <IntegrationBackTitle
+        title="GitHub"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div class="space-y-5">
         <!-- not connected: connect -->

package/app/components/layout/IntegrationBackTitle.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+// Title content for an integration sub-panel's modal header. Renders the panel
+// title with a leading "back" control that returns to the Integrations hub, shown
+// only when the panel was actually reached from there (`ui.cameFromIntegrations`).
+// Panels opened from the command bar, sidebar, a banner or an inspector link don't
+// grow a dead Back. Dropped into a UModal's #title slot, so it inherits the modal's
+// title styling; it emits `back` and the host panel closes itself + reopens the hub.
+defineProps<{ title?: string }>()
+const emit = defineEmits<{ back: [] }>()
+const ui = useUiStore()
+</script>
+
+<template>
+  <span class="flex items-center gap-1.5">
+    <UButton
+      v-if="ui.cameFromIntegrations"
+      icon="i-lucide-arrow-left"
+      color="neutral"
+      variant="ghost"
+      size="xs"
+      class="-ml-1.5 shrink-0"
+      aria-label="Back to Integrations"
+      @click.stop="emit('back')"
+    />
+    <span class="min-w-0 truncate">{{ title }}</span>
+  </span>
+</template>

package/app/components/layout/IntegrationsHub.vue

@@ -64,9 +64,10 @@ interface IntegrationGroup {
 }
 
 // Run an integration's open handler, then dismiss the hub so its panel takes over.
+// `openFromIntegrations` also marks that the panel was reached from here, so the panel
+// renders a "Back to Integrations" control (see IntegrationBackTitle).
 function go(fn: () => void) {
-  fn()
-  ui.closeIntegrations()
+  ui.openFromIntegrations(fn)
 }
 
 const groups = computed<IntegrationGroup[]>(() => {

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/providers/VendorCredentialsModal.vue

@@ -7,6 +7,7 @@
 // (Claude, GLM, ChatGPT/Codex) are connected per-user in the Personal subscriptions section.
 import { computed, ref, watch } from 'vue'
 import type { SubscriptionVendor } from '~/types/domain'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const workspace = useWorkspaceStore()
@@ -116,6 +117,15 @@ function vendorLabel(v: SubscriptionVendor): string {
 
 <template>
   <UModal v-model:open="open" title="LLM Vendors" :ui="{ content: 'max-w-2xl' }">
+    <template #title>
+      <IntegrationBackTitle
+        title="LLM Vendors"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <UTabs
         v-model="activeTab"

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/LocalModelEndpointsPanel.vue

@@ -7,6 +7,7 @@
 // automatically in the per-workspace model picker. One endpoint per runner type.
 import { computed, ref, watch } from 'vue'
 import { LOCAL_RUNNER_DEFAULTS, LOCAL_RUNNER_LABELS, type LocalRunner } from '~/types/localModels'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const store = useLocalModelsStore()
@@ -152,6 +153,15 @@ async function remove(p: LocalRunner) {
 
 <template>
   <UModal v-model:open="open" title="My local runners" :ui="{ content: 'max-w-2xl' }">
+    <template #title>
+      <IntegrationBackTitle
+        title="My local runners"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div class="space-y-4">
         <p class="text-xs text-slate-400">

package/app/components/settings/ObservabilityConnectionPanel.vue

@@ -6,6 +6,7 @@
 // block-id entry here. Opened from the Integrations hub.
 import { computed, reactive, ref, watch } from 'vue'
 import type { ObservabilityProviderKind } from '~/types/releaseHealth'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const store = useReleaseHealthStore()
@@ -128,6 +129,15 @@ const connectedLabel = computed(() => {
 
 <template>
   <UModal v-model:open="open" title="Post-release health" :ui="{ content: 'max-w-lg' }">
+    <template #title>
+      <IntegrationBackTitle
+        title="Post-release health"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div class="space-y-4">
         <p class="text-sm text-slate-400">

package/app/components/settings/OpenRouterCatalogPanel.vue

@@ -9,6 +9,7 @@
 // entry point for the key; this panel just makes OpenRouter self-sufficient.
 import { computed, ref, watch } from 'vue'
 import type { OpenRouterModelMeta } from '~/types/openrouter'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const workspace = useWorkspaceStore()
@@ -193,6 +194,15 @@ function manageKeys() {
 
 <template>
   <UModal v-model:open="open" title="OpenRouter" :ui="{ content: 'max-w-2xl' }">
+    <template #title>
+      <IntegrationBackTitle
+        title="OpenRouter"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div class="space-y-4">
         <p class="text-xs text-slate-400">

package/app/components/settings/ProviderConnectionPanel.vue

@@ -9,6 +9,8 @@
 // with a `default` is optional — left blank it falls back to that default.
 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()
@@ -41,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)
@@ -213,9 +223,32 @@ function fieldHelp(key: string): string | undefined {
 
 <template>
   <UModal v-model:open="open" :title="meta?.title ?? 'Provider'" :ui="{ content: 'max-w-xl' }">
+    <template #title>
+      <IntegrationBackTitle
+        :title="meta?.title ?? 'Provider'"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </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/components/settings/UserSecretsSection.vue

@@ -6,6 +6,7 @@
 // access); the secret is write-only server-side and never shown again.
 import { computed, ref, watch } from 'vue'
 import type { ProviderConfigField, UserSecretKind } from '~/types/userSecrets'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const store = useUserSecretsStore()
@@ -123,6 +124,15 @@ async function remove() {
 
 <template>
   <UModal v-model:open="open" title="My GitHub token" :ui="{ content: 'max-w-xl' }">
+    <template #title>
+      <IntegrationBackTitle
+        title="My GitHub token"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div class="space-y-4">
         <p class="text-xs text-slate-400">

package/app/components/settings/WorkspaceSettingsPanel.vue

@@ -12,6 +12,7 @@ import type { CreateTaskType, TaskLimitMode, WorkspaceSettings } from '~/types/d
 import MergeThresholdsPanel from '~/components/settings/MergeThresholdsPanel.vue'
 import IssueTrackerPanel from '~/components/settings/IssueTrackerPanel.vue'
 import ServiceFragmentDefaultsPanel from '~/components/settings/ServiceFragmentDefaultsPanel.vue'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const store = useWorkspaceSettingsStore()
@@ -160,6 +161,15 @@ async function saveBudget() {
 
 <template>
   <UModal v-model:open="open" title="Workspace settings" :ui="{ content: 'max-w-3xl' }">
+    <template #title>
+      <IntegrationBackTitle
+        title="Workspace settings"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <UTabs
         v-model="activeTab"

package/app/components/slack/SlackPanel.vue

@@ -7,6 +7,7 @@
 import { computed, reactive, ref, watch } from 'vue'
 import type { NotificationType } from '~/types/notifications'
 import type { SlackMemberMappingEntry, SlackMemberRole, SlackRoute } from '~/types/slack'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const slack = useSlackStore()
@@ -141,6 +142,15 @@ async function saveMapping() {
 
 <template>
   <UModal v-model:open="open" title="Slack notifications" :ui="{ content: 'max-w-2xl' }">
+    <template #title>
+      <IntegrationBackTitle
+        title="Slack notifications"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div class="space-y-5">
         <p class="text-xs text-slate-400">

package/app/components/tasks/TaskImportModal.vue

@@ -8,6 +8,7 @@
 // each row opens the issue on GitHub.
 import type { TaskSearchResult, TaskSourceKind } from '~/types/domain'
 import type { AddTaskPrefill } from '~/stores/ui'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const tasks = useTasksStore()
@@ -195,6 +196,15 @@ async function doSpawnEpic() {
 
 <template>
   <UModal v-model:open="open" :title="title">
+    <template #title>
+      <IntegrationBackTitle
+        :title="title"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <!-- Empty state: no source offered (none connected/installed, or all disabled) -->
       <div v-if="!tasks.anyOffered" class="space-y-3 text-center">

package/app/components/tasks/TaskSourceConnectModal.vue

@@ -11,6 +11,8 @@
 // connected Jira without disconnecting it. The toggle only applies once a source is
 // available (Jira connected / the GitHub App installed) — there is nothing to offer
 // before that.
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+
 const ui = useUiStore()
 const tasks = useTasksStore()
 const toast = useToast()
@@ -104,6 +106,15 @@ async function toggleEnabled(enabled: boolean) {
 
 <template>
   <UModal v-model:open="open" :title="descriptor?.label ?? 'Task source'">
+    <template #title>
+      <IntegrationBackTitle
+        :title="descriptor?.label ?? 'Task source'"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div v-if="descriptor" class="space-y-4">
         <p class="text-sm text-slate-400">

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/stores/ui.ts

@@ -85,6 +85,11 @@ export const useUiStore = defineStore('ui', () => {
   // local runners, OpenRouter). Replaces the per-integration navbar buttons; each
   // row inside it opens that integration's own panel via the handlers below.
   const integrationsOpen = ref(false)
+  // True while an integration's own panel is showing AND it was reached from the hub
+  // (not the command bar, sidebar, a banner or an inspector link). Drives the "Back to
+  // Integrations" control those panels render: it only offers a return path when there
+  // is one. Every direct `open*` below resets it; `openFromIntegrations` sets it.
+  const cameFromIntegrations = ref(false)
 
   // Workspace-settings modal: a single tabbed window gathering the workspace-wide
   // config (workspace / merge thresholds / issue writeback / service best practices).
@@ -231,6 +236,7 @@ export const useUiStore = defineStore('ui', () => {
   }
 
   function openDocumentConnect(source: DocumentSourceKind) {
+    cameFromIntegrations.value = false
     documentConnect.value = { source }
   }
   function closeDocumentConnect() {
@@ -240,6 +246,7 @@ export const useUiStore = defineStore('ui', () => {
     targetFrameId: string | null = null,
     source: DocumentSourceKind | null = null,
   ) {
+    cameFromIntegrations.value = false
     documentImport.value = { source, targetFrameId }
   }
   function closeDocumentImport() {
@@ -256,12 +263,14 @@ export const useUiStore = defineStore('ui', () => {
     spawnPreview.value = null
   }
   function openTaskConnect(source: TaskSourceKind) {
+    cameFromIntegrations.value = false
     taskConnect.value = { source }
   }
   function closeTaskConnect() {
     taskConnect.value = null
   }
   function openTaskImport(source: TaskSourceKind | null = null, containerId: string | null = null) {
+    cameFromIntegrations.value = false
     taskImport.value = { source, containerId }
   }
   function closeTaskImport() {
@@ -294,12 +303,14 @@ export const useUiStore = defineStore('ui', () => {
     addServiceOpen.value = false
   }
   function openGitHub() {
+    cameFromIntegrations.value = false
     githubOpen.value = true
   }
   function closeGitHub() {
     githubOpen.value = false
   }
   function openSlack() {
+    cameFromIntegrations.value = false
     slackOpen.value = true
   }
   function closeSlack() {
@@ -321,12 +332,24 @@ export const useUiStore = defineStore('ui', () => {
     commandBarOpen.value = !commandBarOpen.value
   }
   function openIntegrations() {
+    // Reaching the hub itself (fresh, or via a panel's Back control) clears the
+    // came-from marker — we're at the hub, not inside a hub-spawned panel.
+    cameFromIntegrations.value = false
     integrationsOpen.value = true
   }
   function closeIntegrations() {
     integrationsOpen.value = false
   }
+  // Open an integration's own panel FROM the hub: run its open handler (which resets
+  // `cameFromIntegrations`), then mark that we came from the hub and dismiss it. The
+  // panel reads `cameFromIntegrations` to show its Back control.
+  function openFromIntegrations(open: () => void) {
+    open()
+    cameFromIntegrations.value = true
+    integrationsOpen.value = false
+  }
   function openWorkspaceSettings(tab = 'workspace') {
+    cameFromIntegrations.value = false
     workspaceSettingsTab.value = tab
     workspaceSettingsOpen.value = true
   }
@@ -337,12 +360,14 @@ export const useUiStore = defineStore('ui', () => {
     workspaceSettingsTab.value = tab
   }
   function openObservabilityConnection() {
+    cameFromIntegrations.value = false
     observabilityConnectionOpen.value = true
   }
   function closeObservabilityConnection() {
     observabilityConnectionOpen.value = false
   }
   function openProviderConnection(kind: 'environment' | 'runner-pool') {
+    cameFromIntegrations.value = false
     providerConnectionKind.value = kind
   }
   function closeProviderConnection() {
@@ -355,12 +380,14 @@ export const useUiStore = defineStore('ui', () => {
     modelConfigOpen.value = false
   }
   function openVendorCredentials() {
+    cameFromIntegrations.value = false
     vendorCredentialsOpen.value = true
   }
   function closeVendorCredentials() {
     vendorCredentialsOpen.value = false
   }
   function openLocalModels() {
+    cameFromIntegrations.value = false
     localModelsOpen.value = true
   }
   function closeLocalModels() {
@@ -373,12 +400,14 @@ export const useUiStore = defineStore('ui', () => {
     sandboxOpen.value = false
   }
   function openUserSecrets() {
+    cameFromIntegrations.value = false
     userSecretsOpen.value = true
   }
   function closeUserSecrets() {
     userSecretsOpen.value = false
   }
   function openOpenRouter() {
+    cameFromIntegrations.value = false
     openRouterOpen.value = true
   }
   function closeOpenRouter() {
@@ -465,6 +494,7 @@ export const useUiStore = defineStore('ui', () => {
     fragmentLibraryOpen,
     commandBarOpen,
     integrationsOpen,
+    cameFromIntegrations,
     workspaceSettingsOpen,
     workspaceSettingsTab,
     observabilityConnectionOpen,
@@ -524,6 +554,7 @@ export const useUiStore = defineStore('ui', () => {
     toggleCommandBar,
     openIntegrations,
     closeIntegrations,
+    openFromIntegrations,
     openWorkspaceSettings,
     closeWorkspaceSettings,
     setWorkspaceSettingsTab,

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.1",
+  "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",