@cat-factory/app 0.77.0 → 0.79.0

package/app/components/gates/GateFailingCheckList.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+// Shared renderer for a gate's failing-check list (`gateFailingCheckSchema[]`): each check
+// links to its GitHub run when a URL is known, with its conclusion. Used by BOTH the CI
+// gate's precheck panel and each per-attempt "handed to the fixer" list in GateResultView,
+// so the link + conclusion-fallback logic lives in one place (they had drifted — the
+// per-attempt copy silently dropped the GitHub link).
+import type { GateFailingCheck } from '~/types/execution'
+
+defineProps<{
+  checks: GateFailingCheck[]
+  // Compact layout for the per-attempt timeline; the fuller card layout is the default
+  // (the precheck panel).
+  dense?: boolean
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <ul :class="dense ? 'space-y-0.5' : 'space-y-1'">
+    <li
+      v-for="(c, i) in checks"
+      :key="`${c.name}-${i}`"
+      class="flex items-center"
+      :class="
+        dense ? 'gap-1.5' : 'gap-2 rounded-md border border-slate-800 bg-slate-950/40 px-3 py-1.5'
+      "
+    >
+      <UIcon
+        name="i-lucide-circle-x"
+        class="shrink-0 text-rose-400"
+        :class="dense ? 'h-3 w-3' : 'h-3.5 w-3.5'"
+      />
+      <a
+        v-if="c.url"
+        :href="c.url"
+        target="_blank"
+        rel="noopener"
+        class="group min-w-0 flex-1 truncate text-sky-300 hover:text-sky-200 hover:underline"
+        :class="dense ? 'text-[12px]' : 'text-[13px]'"
+        :title="t('gates.ci.openOnGithub', { name: c.name })"
+      >
+        {{ c.name }}
+        <UIcon
+          name="i-lucide-external-link"
+          class="ms-0.5 inline h-3 w-3 opacity-60 group-hover:opacity-100"
+        />
+      </a>
+      <span
+        v-else
+        class="min-w-0 flex-1 truncate"
+        :class="dense ? 'text-[12px] text-slate-300' : 'text-[13px] text-slate-200'"
+        >{{ c.name }}</span
+      >
+      <span
+        class="shrink-0 uppercase text-rose-300"
+        :class="dense ? 'text-[10px]' : 'text-[11px]'"
+        >{{ c.conclusion ?? t('gates.ci.conclusionFallback') }}</span
+      >
+    </li>
+  </ul>
+</template>

package/app/components/gates/GateResultView.vue

@@ -10,10 +10,12 @@ import { agentKindMeta } from '~/utils/catalog'
 import type { GateAttempt, GateStepState } from '~/types/execution'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
+import AttemptEntryHeader from '~/components/panels/AttemptEntryHeader.vue'
+import GateFailingCheckList from '~/components/gates/GateFailingCheckList.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
-const { t, d } = useI18n()
+const { t } = useI18n()
 
 // Synchronous window: it reads its state straight off the execution step, so there's
 // nothing to fetch on open (no `onOpen` loader).
@@ -75,10 +77,6 @@ const OUTCOME_LABELS = computed<Record<GateAttempt['outcome'], string>>(() => ({
   failed: t('gates.outcome.failed'),
 }))
 
-function formatClock(ms?: number | null): string | null {
-  return ms ? d(new Date(ms), 'long') : null
-}
-
 /**
  * The display status — a roll-up of the persisted gate state + the run's status, so the
  * window reads as a conclusion rather than raw fields:
@@ -308,35 +306,7 @@ const conflictVerdict = computed(() => {
                 <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                   {{ t('gates.ci.failingChecks') }}
                 </h3>
-                <ul v-if="failingChecks.length" class="space-y-1">
-                  <li
-                    v-for="(c, i) in failingChecks"
-                    :key="`${c.name}-${i}`"
-                    class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-950/40 px-3 py-1.5"
-                  >
-                    <UIcon name="i-lucide-circle-x" class="h-3.5 w-3.5 shrink-0 text-rose-400" />
-                    <a
-                      v-if="c.url"
-                      :href="c.url"
-                      target="_blank"
-                      rel="noopener"
-                      class="group min-w-0 flex-1 truncate text-[13px] text-sky-300 hover:text-sky-200 hover:underline"
-                      :title="t('gates.ci.openOnGithub', { name: c.name })"
-                    >
-                      {{ c.name }}
-                      <UIcon
-                        name="i-lucide-external-link"
-                        class="ms-0.5 inline h-3 w-3 opacity-60 group-hover:opacity-100"
-                      />
-                    </a>
-                    <span v-else class="min-w-0 flex-1 truncate text-[13px] text-slate-200">{{
-                      c.name
-                    }}</span>
-                    <span class="shrink-0 text-[11px] uppercase text-rose-300">
-                      {{ c.conclusion ?? t('gates.ci.conclusionFallback') }}
-                    </span>
-                  </li>
-                </ul>
+                <GateFailingCheckList v-if="failingChecks.length" :checks="failingChecks" />
                 <p v-else class="text-[13px] leading-relaxed text-slate-300">
                   {{ gate.lastFailureSummary || t('gates.ci.failureFallback') }}
                 </p>
@@ -389,26 +359,47 @@ const conflictVerdict = computed(() => {
                     :key="a.attempt"
                     class="rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2"
                   >
-                    <div class="flex items-center gap-2">
-                      <span class="text-[12px] font-semibold text-slate-200">{{
-                        t('gates.attempt', { number: a.attempt })
-                      }}</span>
-                      <UBadge
-                        :color="a.outcome === 'failed' ? 'error' : 'neutral'"
-                        variant="subtle"
-                        size="sm"
-                        >{{ OUTCOME_LABELS[a.outcome] }}</UBadge
+                    <AttemptEntryHeader
+                      :label="t('gates.attempt', { number: a.attempt })"
+                      :outcome="a.outcome"
+                      :outcome-label="OUTCOME_LABELS[a.outcome]"
+                      :at="a.at"
+                      date-format="long"
+                    />
+                    <!-- What this round was asked to fix: the instructions the gate handed the
+                         helper (the failing-check summary / conflict reason / review comments),
+                         plus the structured red checks for the CI gate. -->
+                    <div
+                      v-if="a.instructions || (a.failingChecks && a.failingChecks.length)"
+                      class="mt-1.5"
+                    >
+                      <p class="text-[11px] text-slate-500">
+                        {{ t('gates.attemptInstructions', { helper: helperMeta.label }) }}
+                      </p>
+                      <GateFailingCheckList
+                        v-if="a.failingChecks && a.failingChecks.length"
+                        class="mt-1"
+                        :checks="a.failingChecks"
+                        dense
+                      />
+                      <p
+                        v-else-if="a.instructions"
+                        class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-slate-300"
                       >
-                      <span v-if="formatClock(a.at)" class="ms-auto text-[11px] text-slate-500">{{
-                        formatClock(a.at)
-                      }}</span>
+                        {{ a.instructions }}
+                      </p>
                     </div>
-                    <p
-                      v-if="a.summary"
-                      class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-slate-400"
-                    >
-                      {{ a.summary }}
-                    </p>
+                    <!-- The helper's own report of what it did / what remains. -->
+                    <template v-if="a.summary">
+                      <p class="mt-1.5 text-[11px] text-slate-500">
+                        {{ t('gates.attemptReport', { helper: helperMeta.label }) }}
+                      </p>
+                      <p
+                        class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-slate-400"
+                      >
+                        {{ a.summary }}
+                      </p>
+                    </template>
                   </li>
                 </ol>
               </section>

package/app/components/layout/IntegrationsHub.vue

@@ -20,6 +20,7 @@ const documents = useDocumentsStore()
 const tasks = useTasksStore()
 const tracker = useTrackerStore()
 const releaseHealth = useReleaseHealthStore()
+const packageRegistries = usePackageRegistriesStore()
 const userSecrets = useUserSecretsStore()
 const apiKeys = useApiKeysStore()
 const workspace = useWorkspaceStore()
@@ -49,6 +50,7 @@ watch(
     if (isOpen) {
       query.value = ''
       void releaseHealth.ensureLoaded().catch(() => {})
+      void packageRegistries.ensureLoaded().catch(() => {})
       void userSecrets.load().catch(() => {})
       // Drives the OpenRouter row's "Key connected" badge.
       if (workspace.workspaceId) void apiKeys.load(workspace.workspaceId).catch(() => {})
@@ -256,6 +258,27 @@ const groups = computed<IntegrationGroup[]>(() => {
     })
   }
 
+  // --- Development (private package registries) -------------------------------
+  // Gated like observability: hidden until a probe confirms the module is wired
+  // (`available === true`), so an unconfigured backend doesn't show a dead row.
+  if (packageRegistries.available) {
+    const hasEntries = packageRegistries.entries.length > 0
+    out.push({
+      title: t('layout.integrationsHub.groups.development'),
+      items: [
+        {
+          key: 'package-registries',
+          icon: 'i-lucide-package',
+          label: t('layout.integrationsHub.items.packageRegistries.label'),
+          description: t('layout.integrationsHub.items.packageRegistries.description'),
+          status: hasEntries ? t('layout.integrationsHub.status.connected') : undefined,
+          connected: hasEntries,
+          onClick: () => go(ui.openPackageRegistries),
+        },
+      ],
+    })
+  }
+
   // NOTE: Infrastructure (agent-container execution + Tester environments + the local-mode
   // warm pool/checkout) is no longer listed here — it moved to its OWN top-level navbar menu
   // (SideBar → "Infrastructure" → the tabbed Infrastructure window). See `ui.openInfrastructure`.

package/app/components/panels/AgentStepDetail.vue

@@ -7,6 +7,8 @@ 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 FrontendBindingsResolved from '~/components/panels/inspector/FrontendBindingsResolved.vue'
+import { UI_TESTER_AGENT_KIND } from '@cat-factory/contracts'
 import ProvisioningLogsDrawer from '~/components/provisioning/ProvisioningLogsDrawer.vue'
 import IterationCapPrompt from '~/components/pipeline/IterationCapPrompt.vue'
 import { useStepTimer } from '~/composables/useStepTimer'
@@ -58,6 +60,24 @@ const testPhase = computed(() => step.value?.test ?? null)
 // coder consume it), so the panel shows its spinning-up/running/shutdown/errored state.
 const stepEnvironment = computed(() => step.value?.environment ?? null)
 
+// For a frontend UI-test step (`tester-ui`): the enclosing `frontend` frame's backend-binding
+// config, so the detail can project how each env var resolved (live URL | mocked) — rendered from
+// the FROZEN bindings the engine stamped on the run (`instance.frontendBindings`), so a finished
+// run shows what it actually drove against rather than re-resolving against current live state.
+const frontendFrame = computed(() => (block.value ? board.serviceOf(block.value) : undefined))
+const isFrontendFrame = computed(() => frontendFrame.value?.type === 'frontend')
+const frontendConfig = computed(() =>
+  step.value?.agentKind === UI_TESTER_AGENT_KIND && isFrontendFrame.value
+    ? (frontendFrame.value!.frontendConfig ?? null)
+    : null,
+)
+// The frozen start-time resolution the tester ran against (absent for a non-frontend / pre-6b run).
+const frontendBindings = computed(() => instance.value?.frontendBindings ?? [])
+// The run-start advisories the engine stamped on the run (duplicate env vars / partially-mocked
+// services) are a whole-RUN fact, so surface them on ANY step detail of a frontend-frame run, not
+// only the `tester-ui` step — a duplicate-env-var note shouldn't be invisible from the coder step.
+const runNotes = computed(() => (isFrontendFrame.value ? (instance.value?.notes ?? []) : []))
+
 // 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.
@@ -345,6 +365,27 @@ async function copyOutput() {
                    errored + the exact error), when this step runs against one -->
               <EnvironmentStatusPanel v-if="stepEnvironment" :environment="stepEnvironment" />
 
+              <!-- frontend UI-test: how the frame's backend bindings resolved (env var →
+                   live URL | mocked) + the run-start advisories (duplicate env vars /
+                   partially-mocked services) the engine stamped on the run. Rendered from the
+                   FROZEN start-time bindings so a finished run shows what it actually drove
+                   against, not a live re-resolution. -->
+              <FrontendBindingsResolved
+                v-if="frontendConfig"
+                :config="frontendConfig"
+                :resolved="frontendBindings"
+              />
+              <ul v-if="runNotes.length" class="space-y-1" data-testid="run-notes">
+                <li
+                  v-for="(note, i) in runNotes"
+                  :key="i"
+                  class="flex items-start gap-1.5 text-[11px] leading-snug text-amber-300/80"
+                >
+                  <UIcon name="i-lucide-info" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                  <span>{{ note }}</span>
+                </li>
+              </ul>
+
               <!-- 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) -->

package/app/components/panels/AttemptEntryHeader.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Shared header row for an attempt-timeline entry. The polling-gate helper attempts
+// (GateResultView) and the Tester's fixer rounds (TestReportWindow) render the same chrome —
+// a leading label, an outcome badge, and a timestamp — differing only in the optional icon,
+// the resolved label strings, and the date format. The per-attempt body stays the caller's.
+defineProps<{
+  label: string
+  outcome: 'completed' | 'failed'
+  outcomeLabel: string
+  at?: number | null
+  dateFormat?: 'short' | 'long'
+  icon?: string
+  iconClass?: string
+}>()
+
+const { d } = useI18n()
+
+function formatClock(ms: number | null | undefined, fmt: 'short' | 'long'): string | null {
+  return ms ? d(new Date(ms), fmt) : null
+}
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <UIcon v-if="icon" :name="icon" class="h-3.5 w-3.5 shrink-0" :class="iconClass" />
+    <span class="text-[13px] font-medium text-slate-200">{{ label }}</span>
+    <UBadge :color="outcome === 'failed' ? 'error' : 'neutral'" variant="subtle" size="sm">{{
+      outcomeLabel
+    }}</UBadge>
+    <span
+      v-if="formatClock(at, dateFormat ?? 'short')"
+      class="ms-auto text-[11px] text-slate-500"
+      >{{ formatClock(at, dateFormat ?? 'short') }}</span
+    >
+  </div>
+</template>

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

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import {
+  duplicateBindingEnvVars,
+  resolveFrontendBindings,
+  type FrontendBackendBinding,
+  type FrontendConfig,
+  type ResolvedFrontendBinding,
+} from '@cat-factory/contracts'
+
+// The resolution of a frontend frame's backend bindings — each env var → a bound service's live
+// ephemeral URL, or WireMock. Two modes, same view:
+//   - **Live** (frame inspector, `resolved` omitted): resolves against the workspace's CURRENT env
+//     handles (fetched once via the environments store), so the operator sees how a run would
+//     resolve RIGHT NOW. Feeds the SAME pure helpers the backend uses so it can't drift.
+//   - **Projected** (`tester-ui` run/step detail, `resolved` provided): renders the FROZEN
+//     start-time bindings the engine stamped on the run, so a finished run shows what it ACTUALLY
+//     drove against — truthful even after the underlying envs are torn down (no live re-read).
+// Also surfaces the duplicate-env-var misconfiguration in live mode (projected mode leaves that to
+// the run-start note, which owns the frozen advisory).
+const props = defineProps<{ config: FrontendConfig; resolved?: ResolvedFrontendBinding[] }>()
+
+const environments = useEnvironmentsStore()
+const board = useBoardStore()
+const { t } = useI18n()
+
+const projected = computed(() => props.resolved !== undefined)
+
+// Live mode refreshes the env handles when this view opens so a just-provisioned service shows as
+// live; a projected snapshot needs no live read.
+onMounted(() => {
+  if (!projected.value) void environments.load()
+})
+
+// The duplicate advisory is config-derived; in projected mode the run-start note owns it (frozen
+// at start), so don't re-derive it here against a possibly-since-edited config.
+const duplicates = computed(() => (projected.value ? [] : duplicateBindingEnvVars(props.config)))
+
+// Each resolved binding + the display metadata a bare {envVar, serviceUrl} can't carry: whether
+// a mocked upstream was a `mock` source or a `service` with no live env, and the bound service's
+// title. Joined off the LAST config binding per envVar (matching `resolveFrontendBindings`'
+// last-wins dedup), so the extra labels stay in step with the canonical resolution.
+const rows = computed(() => {
+  const resolved =
+    props.resolved ??
+    resolveFrontendBindings(props.config, environments.liveServiceEnvUrls(props.config))
+  const lastByEnvVar = new Map<string, FrontendBackendBinding>()
+  for (const b of props.config.backendBindings) {
+    const key = b.envVar.trim()
+    if (key) lastByEnvVar.set(key, b)
+  }
+  return resolved.map((r) => {
+    const source = lastByEnvVar.get(r.envVar)?.source
+    const serviceFrameId = source?.kind === 'service' ? source.serviceBlockId : undefined
+    return {
+      envVar: r.envVar,
+      serviceUrl: r.serviceUrl,
+      kind: r.serviceUrl ? 'live' : source?.kind === 'service' ? 'service-offline' : 'mock',
+      serviceTitle: serviceFrameId
+        ? (board.getBlock(serviceFrameId)?.title ?? serviceFrameId)
+        : undefined,
+    } as const
+  })
+})
+</script>
+
+<template>
+  <div v-if="rows.length || duplicates.length" class="space-y-1.5" data-testid="frontend-resolved">
+    <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      {{ t('inspector.frontendConfig.resolved.title') }}
+    </div>
+
+    <p
+      v-if="duplicates.length"
+      class="text-[11px] leading-snug text-amber-300/80"
+      data-testid="frontend-resolved-duplicates"
+    >
+      {{ t('inspector.frontendConfig.resolved.duplicateWarning', { vars: duplicates.join(', ') }) }}
+    </p>
+
+    <ul v-if="rows.length" class="space-y-0.5">
+      <li
+        v-for="row in rows"
+        :key="row.envVar"
+        class="flex items-baseline gap-1.5 text-[11px] leading-snug"
+        data-testid="frontend-resolved-row"
+      >
+        <span
+          class="mt-1 h-1.5 w-1.5 shrink-0 rounded-full"
+          :class="{
+            'bg-emerald-400': row.kind === 'live',
+            'bg-amber-400': row.kind === 'service-offline',
+            'bg-slate-500': row.kind === 'mock',
+          }"
+        />
+        <span class="font-mono text-slate-300">{{ row.envVar }}</span>
+        <span class="text-slate-600">→</span>
+        <template v-if="row.kind === 'live'">
+          <span class="truncate font-mono text-emerald-300/90">{{ row.serviceUrl }}</span>
+          <span v-if="row.serviceTitle" class="text-slate-500">({{ row.serviceTitle }})</span>
+        </template>
+        <span v-else-if="row.kind === 'service-offline'" class="text-amber-300/80">
+          {{ t('inspector.frontendConfig.resolved.serviceOffline', { service: row.serviceTitle }) }}
+        </span>
+        <span v-else class="text-slate-500">
+          {{ t('inspector.frontendConfig.resolved.mock') }}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>

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

@@ -10,6 +10,7 @@ import type {
   FrontendServeMode,
   PreviewStatus,
 } from '~/types/domain'
+import FrontendBindingsResolved from '~/components/panels/inspector/FrontendBindingsResolved.vue'
 
 // Frontend-frame (`type: 'frontend'`) configuration: how to build, serve, and mock this
 // frontend for a self-contained UI test (+ an optional browsable preview on local/node),
@@ -625,6 +626,13 @@ onUnmounted(() => preview.stopPolling(props.block.id))
         <div v-else class="text-[11px] text-slate-500">
           {{ t('inspector.frontendConfig.bindings.empty') }}
         </div>
+
+        <!-- How the bindings resolve RIGHT NOW: each env var → a bound service's live ephemeral
+             URL, or WireMock — plus the duplicate-env-var warning. The same view a UI-test run
+             would resolve against (shared helpers), so what you see is what a run will drive. -->
+        <div class="border-t border-slate-800/60 pt-2">
+          <FrontendBindingsResolved :config="config" />
+        </div>
       </div>
     </div>