@cat-factory/app 0.241.3 → 0.242.1

package/app/composables/api/spec.ts

@@ -1,14 +1,24 @@
-import { getServiceSpecContract } from '@cat-factory/contracts'
+import { getRunSpecContract, getServiceSpecContract } from '@cat-factory/contracts'
 import type { ApiContext } from './context'
 
 /**
- * The service-spec read (the inspector's "View Requirements" window). Reassembles the
- * sharded `spec/` artifact from the service repo's default branch. Always 200: a service
- * with no spec on main (or no GitHub connected) returns `{ present: false }`.
+ * The two spec reads, which answer different questions and are paired here so a caller has to
+ * pick one deliberately.
+ *
+ * `getServiceSpec` reassembles the sharded `spec/` artifact from the service repo's DEFAULT
+ * branch: what the service requires today, for the inspector's "View Requirements" window.
+ * `getRunSpec` reads it from the branch ONE RUN pushed to: what that run's tester actually ruled
+ * against, for the outcome card's requirement join. While a pull request is open the two are
+ * different trees, and joining a run's verdicts against the first shows every requirement the
+ * run itself added as "not checked".
+ *
+ * Both are always 200: no spec, no repo or no VCS connected returns `{ present: false }`.
  */
 export function specApi({ send, ws }: ApiContext) {
   return {
     getServiceSpec: (workspaceId: string, blockId: string) =>
       send(getServiceSpecContract, { pathPrefix: ws(workspaceId), pathParams: { blockId } }),
+    getRunSpec: (workspaceId: string, executionId: string) =>
+      send(getRunSpecContract, { pathPrefix: ws(workspaceId), pathParams: { executionId } }),
   }
 }

package/app/pages/index.vue

@@ -1,15 +1,8 @@
 <script setup lang="ts">
 import BoardCanvas from '~/components/board/BoardCanvas.vue'
 import SideBar from '~/components/layout/SideBar.vue'
-import BoardToolbar from '~/components/layout/BoardToolbar.vue'
-import SpendWarningBanner from '~/components/layout/SpendWarningBanner.vue'
-import ConnectionStatusBanner from '~/components/layout/ConnectionStatusBanner.vue'
+import BoardTopOverlays from '~/components/layout/BoardTopOverlays.vue'
 import TranslationWarningBanner from '~/components/layout/TranslationWarningBanner.vue'
-import GitHubPatBanner from '~/components/layout/GitHubPatBanner.vue'
-import AiProvidersBanner from '~/components/layout/AiProvidersBanner.vue'
-import ProviderConfigBanner from '~/components/layout/ProviderConfigBanner.vue'
-import InfraSetupBanner from '~/components/layout/InfraSetupBanner.vue'
-import DefaultTestEnvBanner from '~/components/layout/DefaultTestEnvBanner.vue'
 // Always-mounted, fast-path surfaces (opened frequently during a run / board edits, or
 // store-driven so they must react from anywhere — kept eager for snappy open/close).
 import PipelineBuilder from '~/components/pipeline/PipelineBuilder.vue'
@@ -398,170 +391,138 @@ watch(
 </script>
 
 <template>
-  <div class="flex h-screen w-screen overflow-hidden bg-slate-950 text-slate-100">
-    <!-- Non-English locale warning (unofficial translation); slim strip above everything. -->
+  <!-- A COLUMN, so the translation strip below takes its own height instead of covering the
+       row: page chrome that overlays the app is how the board's top controls came to be
+       buried. Everything else lives in the row beneath it. -->
+  <div class="flex h-screen w-screen flex-col overflow-hidden bg-slate-950 text-slate-100">
+    <!-- Non-English locale warning (unofficial translation); slim full-width strip above
+         everything, in flow. -->
     <TranslationWarningBanner />
-    <!-- Local-mode setup prompt (missing GitHub PAT); floats over whatever is shown below. -->
-    <GitHubPatBanner />
-    <!-- Stacked advisory banners: one click-through column so concurrent prompts never draw on
-         top of each other (a fresh, unconfigured deployment can raise all three at once — no AI
-         model + no runner pool + no storage). The wrapper is `pointer-events-none`; each banner
-         re-enables pointer events on its own card, so the empty strip never intercepts clicks on
-         the board chrome underneath.
-         - AI-readiness (no usable model source, or default preset uses unavailable models).
-         - Infrastructure provider (env/runner-pool wired but missing mandatory config).
-         - Infra-setup (this deployment needs an executor / test env / storage the operator hasn't
-           defined yet, so a class of agents can't run).
-         - Default test environment (this BOARD has never chosen the provisioning mechanism its
-           new services should default to). Last in the column: it asks for a convenience default,
-           so it yields to the prompts about things that are outright broken. -->
-    <div
-      v-if="workspace.ready && !needsGitHubInstall && !githubProbePending"
-      class="pointer-events-none absolute inset-x-0 top-0 z-40 flex flex-col items-center gap-2 px-4 pt-4"
-    >
-      <AiProvidersBanner />
-      <ProviderConfigBanner />
-      <InfraSetupBanner />
-      <DefaultTestEnvBanner />
-    </div>
-
-    <!-- Resolving whether the GitHub App is installed, before we decide what to show. -->
-    <div
-      v-if="workspace.ready && githubProbePending"
-      class="m-auto flex flex-col items-center gap-3 text-slate-400"
-    >
-      <UIcon name="i-lucide-loader" class="h-8 w-8 animate-spin" />
-      <span class="text-sm">{{ $t('app.loading') }}</span>
-    </div>
+    <div class="relative flex min-h-0 flex-1">
+      <!-- Resolving whether the GitHub App is installed, before we decide what to show. -->
+      <div
+        v-if="workspace.ready && githubProbePending"
+        class="m-auto flex flex-col items-center gap-3 text-slate-400"
+      >
+        <UIcon name="i-lucide-loader" class="h-8 w-8 animate-spin" />
+        <span class="text-sm">{{ $t('app.loading') }}</span>
+      </div>
 
-    <!-- App enabled but not installed on this workspace: hard onboarding gate. -->
-    <GitHubOnboarding v-else-if="workspace.ready && needsGitHubInstall" />
+      <!-- App enabled but not installed on this workspace: hard onboarding gate. -->
+      <GitHubOnboarding v-else-if="workspace.ready && needsGitHubInstall" />
 
-    <template v-else-if="workspace.ready">
-      <!-- Headless readiness marker for the e2e suite: reflects whether the real-time
-           WebSocket is actually connected (and thus subscribed + resynced). A live spec must
-           wait for this before driving a run, otherwise the run's first status events are
-           broadcast to a not-yet-subscribed browser and missed, leaving the card stuck on a
-           stale status until its assertion times out (the source of the e2e flakiness). Hidden
-           and inert; no visual or behavioural effect. -->
-      <span
-        data-testid="workspace-stream"
-        :data-connected="streamConnected ? 'true' : 'false'"
-        hidden
-      />
-      <SideBar />
-      <main class="relative min-w-0 flex-1">
-        <BoardCanvas />
-        <!-- Compact-viewport navbar trigger: the SideBar is an off-canvas drawer below
-             lg, so surface a hamburger to open it. Hidden on lg+ (static sidebar). -->
-        <!-- z-30 keeps the trigger above the centered BoardToolbar (z-20), whose
-             max-width can otherwise reach this corner on the narrowest viewports. -->
-        <UButton
-          class="absolute start-3 top-3 z-30 lg:hidden"
-          icon="i-lucide-menu"
-          color="neutral"
-          variant="soft"
-          size="sm"
-          :aria-label="ui.mobileNavOpen ? $t('nav.closeMenu') : $t('nav.openMenu')"
-          data-testid="mobile-nav-toggle"
-          @click="ui.toggleMobileNav()"
+      <template v-else-if="workspace.ready">
+        <!-- Headless readiness marker for the e2e suite: reflects whether the real-time
+             WebSocket is actually connected (and thus subscribed + resynced). A live spec must
+             wait for this before driving a run, otherwise the run's first status events are
+             broadcast to a not-yet-subscribed browser and missed, leaving the card stuck on a
+             stale status until its assertion times out (the source of the e2e flakiness). Hidden
+             and inert; no visual or behavioural effect. -->
+        <span
+          data-testid="workspace-stream"
+          :data-connected="streamConnected ? 'true' : 'false'"
+          hidden
         />
-        <BoardToolbar />
-        <SpendWarningBanner />
-        <ConnectionStatusBanner
-          :connected="streamConnected"
-          :ever-connected="streamEverConnected"
-          :connection-failed="streamConnectionFailed"
-        />
-        <InspectorPanel />
-        <!-- Code-split focus view. The fade lives here (not inside the component) so the
-             leave animation still plays when `focusBlockId` clears and the v-if unmounts
-             the chunk — an inner Transition would be torn down before it could run. -->
-        <Transition name="focus-fade">
-          <BlockFocusView v-if="ui.focusBlockId" />
-        </Transition>
-      </main>
+        <SideBar />
+        <main class="relative min-w-0 flex-1">
+          <BoardCanvas />
+          <!-- Toolbar, nav trigger and every advisory banner, in ONE stacked region that owns
+               their placement, so no two of them can cover each other. -->
+          <BoardTopOverlays
+            :connected="streamConnected"
+            :ever-connected="streamEverConnected"
+            :connection-failed="streamConnectionFailed"
+          />
+          <InspectorPanel />
+          <!-- Code-split focus view. The fade lives here (not inside the component) so the
+               leave animation still plays when `focusBlockId` clears and the v-if unmounts
+               the chunk — an inner Transition would be torn down before it could run. -->
+          <Transition name="focus-fade">
+            <BlockFocusView v-if="ui.focusBlockId" />
+          </Transition>
+        </main>
 
-      <!-- Always-mounted, fast-path surfaces. -->
-      <PipelineBuilder />
-      <DecisionModal />
-      <AgentStepDetail />
-      <StepResultViewHost />
-      <!-- Consumer-contributed top-level overlays (extension slice D). Renders nothing until a
-           consumer opens one via `ui.openOverlay` / `useAppOverlays().open(...)`. -->
-      <AppOverlayHost />
-      <AddTaskModal />
-      <ReviewFrictionDialog v-if="ui.reviewFrictionContext" />
-      <CreateInitiativeModal />
-      <CommandBar />
-      <PersonalCredentialModal />
-      <ConfirmDialog />
-      <KeyboardShortcutsHelp />
+        <!-- Always-mounted, fast-path surfaces. -->
+        <PipelineBuilder />
+        <DecisionModal />
+        <AgentStepDetail />
+        <StepResultViewHost />
+        <!-- Consumer-contributed top-level overlays (extension slice D). Renders nothing until a
+             consumer opens one via `ui.openOverlay` / `useAppOverlays().open(...)`. -->
+        <AppOverlayHost />
+        <AddTaskModal />
+        <ReviewFrictionDialog v-if="ui.reviewFrictionContext" />
+        <CreateInitiativeModal />
+        <CommandBar />
+        <PersonalCredentialModal />
+        <ConfirmDialog />
+        <KeyboardShortcutsHelp />
 
-      <!-- Lazy panels: mounted only while their ui open-flag is set, so each loads on
-           first open (its own chunk) rather than bloating the initial bundle. -->
-      <TaskSourceConnectModal v-if="ui.taskConnect" />
-      <TaskImportModal v-if="ui.taskImport" />
-      <BugHuntModal v-if="ui.bugHunt" />
-      <RecurringPipelineModal v-if="ui.addRecurringFrameId" />
-      <ObservabilityPanel v-if="ui.observabilityInstanceId" />
-      <OperatorDashboardPanel v-if="ui.operatorDashboardOpen" />
-      <ReportsPanel v-if="ui.reportsOpen" />
-      <KaizenPanel v-if="ui.kaizenScreenOpen" />
-      <DocumentSourceConnectModal v-if="ui.documentConnect" />
-      <DocumentImportModal v-if="ui.documentImport" />
-      <DocumentTemplatesModal v-if="ui.documentTemplates" />
-      <SpawnPreviewModal v-if="ui.spawnPreview" />
-      <BootstrapModal v-if="ui.bootstrapOpen" />
-      <AddServiceFromRepoModal v-if="ui.addServiceOpen" />
-      <GitHubPanel v-if="ui.githubOpen" />
-      <SlackPanel v-if="ui.slackOpen" />
-      <FragmentLibraryPanel v-if="ui.fragmentLibraryOpen" />
-      <FoundationalServicePanel v-if="ui.foundationalServicesOpen" />
-      <PipelineHealthModal v-if="ui.pipelineHealthOpen" />
-      <RiskPolicyHealthModal v-if="ui.riskPolicyHealthOpen" />
-      <ModelPresetHealthModal v-if="ui.modelPresetHealthOpen" />
-      <IntegrationsHub v-if="ui.integrationsOpen" />
-      <ModelProvidersHub v-if="ui.modelProvidersOpen" />
-      <PersonalSetupModal v-if="ui.personalSetupOpen" />
-      <WorkspaceSettingsPanel v-if="ui.workspaceSettingsOpen" />
-      <AccountSettingsPanel v-if="ui.accountSettingsOpen" />
-      <ObservabilityConnectionPanel v-if="ui.observabilityConnectionOpen" />
-      <ApiTokensPanel v-if="ui.apiTokensOpen" />
-      <InfrastructureWindow v-if="ui.infrastructureOpen" />
-      <EnvironmentSetupWizard v-if="ui.environmentWizardOpen" />
-      <ModelConfigurationPanel v-if="ui.modelConfigOpen" />
-      <LocalModelEndpointsPanel v-if="ui.localModelsOpen" />
-      <SandboxPanel v-if="ui.sandboxOpen" />
-      <UserSecretsSection v-if="ui.userSecretsOpen" />
-      <OpenRouterCatalogPanel v-if="ui.openRouterOpen" />
-      <VendorCredentialsModal v-if="ui.vendorCredentialsOpen" />
-      <AiProviderOnboardingModal v-if="ui.aiProviderSetupOpen" />
-      <AiPresetMismatchDialog v-if="ui.aiPresetMismatchOpen" />
-      <TutorialPrompt v-if="tutorial.promptOpen" />
-      <TutorialCatalogue v-if="tutorial.catalogueOpen" />
-      <TutorialOverlay v-if="tutorial.touring" />
-      <!-- Mounted off the PENDING id rather than off whether it may currently be SHOWN: the
-           component holds a suppressed offer (a tour is running, a tutorial window is open) and
-           renders it once the way is clear, which is the whole reason the offer survives the
-           moment it was raised in. -->
-      <TutorialNudge v-if="tutorial.pendingNudgeId" />
-    </template>
+        <!-- Lazy panels: mounted only while their ui open-flag is set, so each loads on
+             first open (its own chunk) rather than bloating the initial bundle. -->
+        <TaskSourceConnectModal v-if="ui.taskConnect" />
+        <TaskImportModal v-if="ui.taskImport" />
+        <BugHuntModal v-if="ui.bugHunt" />
+        <RecurringPipelineModal v-if="ui.addRecurringFrameId" />
+        <ObservabilityPanel v-if="ui.observabilityInstanceId" />
+        <OperatorDashboardPanel v-if="ui.operatorDashboardOpen" />
+        <ReportsPanel v-if="ui.reportsOpen" />
+        <KaizenPanel v-if="ui.kaizenScreenOpen" />
+        <DocumentSourceConnectModal v-if="ui.documentConnect" />
+        <DocumentImportModal v-if="ui.documentImport" />
+        <DocumentTemplatesModal v-if="ui.documentTemplates" />
+        <SpawnPreviewModal v-if="ui.spawnPreview" />
+        <BootstrapModal v-if="ui.bootstrapOpen" />
+        <AddServiceFromRepoModal v-if="ui.addServiceOpen" />
+        <GitHubPanel v-if="ui.githubOpen" />
+        <SlackPanel v-if="ui.slackOpen" />
+        <FragmentLibraryPanel v-if="ui.fragmentLibraryOpen" />
+        <FoundationalServicePanel v-if="ui.foundationalServicesOpen" />
+        <PipelineHealthModal v-if="ui.pipelineHealthOpen" />
+        <RiskPolicyHealthModal v-if="ui.riskPolicyHealthOpen" />
+        <ModelPresetHealthModal v-if="ui.modelPresetHealthOpen" />
+        <IntegrationsHub v-if="ui.integrationsOpen" />
+        <ModelProvidersHub v-if="ui.modelProvidersOpen" />
+        <PersonalSetupModal v-if="ui.personalSetupOpen" />
+        <WorkspaceSettingsPanel v-if="ui.workspaceSettingsOpen" />
+        <AccountSettingsPanel v-if="ui.accountSettingsOpen" />
+        <ObservabilityConnectionPanel v-if="ui.observabilityConnectionOpen" />
+        <ApiTokensPanel v-if="ui.apiTokensOpen" />
+        <InfrastructureWindow v-if="ui.infrastructureOpen" />
+        <EnvironmentSetupWizard v-if="ui.environmentWizardOpen" />
+        <ModelConfigurationPanel v-if="ui.modelConfigOpen" />
+        <LocalModelEndpointsPanel v-if="ui.localModelsOpen" />
+        <SandboxPanel v-if="ui.sandboxOpen" />
+        <UserSecretsSection v-if="ui.userSecretsOpen" />
+        <OpenRouterCatalogPanel v-if="ui.openRouterOpen" />
+        <VendorCredentialsModal v-if="ui.vendorCredentialsOpen" />
+        <AiProviderOnboardingModal v-if="ui.aiProviderSetupOpen" />
+        <AiPresetMismatchDialog v-if="ui.aiPresetMismatchOpen" />
+        <TutorialPrompt v-if="tutorial.promptOpen" />
+        <TutorialCatalogue v-if="tutorial.catalogueOpen" />
+        <TutorialOverlay v-if="tutorial.touring" />
+        <!-- Mounted off the PENDING id rather than off whether it may currently be SHOWN: the
+             component holds a suppressed offer (a tour is running, a tutorial window is open) and
+             renders it once the way is clear, which is the whole reason the offer survives the
+             moment it was raised in. -->
+        <TutorialNudge v-if="tutorial.pendingNudgeId" />
+      </template>
 
-    <!-- Backend unreachable / bootstrap failed -->
-    <div v-else-if="workspace.error" class="m-auto max-w-md p-8 text-center">
-      <UIcon name="i-lucide-plug-zap" class="mx-auto mb-3 h-10 w-10 text-amber-400" />
-      <h1 class="mb-1 text-lg font-semibold">{{ $t('app.backendUnreachable') }}</h1>
-      <p class="mb-4 text-sm text-slate-400">{{ workspace.error }}</p>
-      <UButton color="primary" icon="i-lucide-rotate-ccw" @click="workspace.init()">
-        {{ $t('common.retry') }}
-      </UButton>
-    </div>
+      <!-- Backend unreachable / bootstrap failed -->
+      <div v-else-if="workspace.error" class="m-auto max-w-md p-8 text-center">
+        <UIcon name="i-lucide-plug-zap" class="mx-auto mb-3 h-10 w-10 text-amber-400" />
+        <h1 class="mb-1 text-lg font-semibold">{{ $t('app.backendUnreachable') }}</h1>
+        <p class="mb-4 text-sm text-slate-400">{{ workspace.error }}</p>
+        <UButton color="primary" icon="i-lucide-rotate-ccw" @click="workspace.init()">
+          {{ $t('common.retry') }}
+        </UButton>
+      </div>
 
-    <!-- Initial load -->
-    <div v-else class="m-auto flex flex-col items-center gap-3 text-slate-400">
-      <UIcon name="i-lucide-loader" class="h-8 w-8 animate-spin" />
-      <span class="text-sm">{{ $t('app.loadingBoard') }}</span>
+      <!-- Initial load -->
+      <div v-else class="m-auto flex flex-col items-center gap-3 text-slate-400">
+        <UIcon name="i-lucide-loader" class="h-8 w-8 animate-spin" />
+        <span class="text-sm">{{ $t('app.loadingBoard') }}</span>
+      </div>
     </div>
   </div>
 </template>

package/app/stores/serviceSpec.spec.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { useServiceSpecStore } from '~/stores/serviceSpec'
+import { useWorkspaceStore } from '~/stores/workspace'
+import type { ServiceSpecView } from '~/types/spec'
+
+// The store holds TWO spec reads, and which one a caller takes is a correctness matter rather
+// than a caching detail. The service read is the repo's DEFAULT branch ("what does this service
+// require", the inspector's requirements window); the run read is the branch ONE RUN pushed to
+// ("what did this run rule on", the outcome card's requirement join). While a pull request is
+// open they are different trees, and the card joining against the first showed every requirement
+// the run itself added as "not checked" while `/api/v1/runs/:runId/outcome` said otherwise.
+//
+// So what is pinned here is that the two never answer for each other: one key space cannot serve
+// the other's question even when a block id and an execution id happen to collide.
+
+function view(service: string): ServiceSpecView {
+  return {
+    present: true,
+    spec: { service, summary: '', modules: [] },
+    features: [],
+  } as unknown as ServiceSpecView
+}
+
+function stubApi(over: Record<string, unknown> = {}) {
+  vi.stubGlobal('useApi', () => ({
+    getServiceSpec: () => Promise.resolve(view('from-default-branch')),
+    getRunSpec: () => Promise.resolve(view('from-run-branch')),
+    ...over,
+  }))
+}
+
+beforeEach(() => {
+  useWorkspaceStore().workspaceId = 'ws1'
+  stubApi()
+})
+
+describe('serviceSpec store', () => {
+  it('reads a run’s spec from the run endpoint, not the service one', async () => {
+    const store = useServiceSpecStore()
+    await store.loadForRun('exec_1')
+    expect(store.viewForRun('exec_1')?.spec?.service).toBe('from-run-branch')
+  })
+
+  it('keeps the two reads in separate key spaces', async () => {
+    // Same id, two questions. Without the prefixes one load would satisfy the other's accessor
+    // and the card would silently join against the default branch again.
+    const store = useServiceSpecStore()
+    await store.load('id_1')
+    await store.loadForRun('id_1')
+    expect(store.viewFor('id_1')?.spec?.service).toBe('from-default-branch')
+    expect(store.viewForRun('id_1')?.spec?.service).toBe('from-run-branch')
+  })
+
+  it('does not answer a run read out of the service cache', async () => {
+    const store = useServiceSpecStore()
+    await store.load('id_1')
+    expect(store.viewForRun('id_1')).toBeUndefined()
+  })
+
+  it('coalesces overlapping loads of one run onto a single request', async () => {
+    let calls = 0
+    stubApi({
+      getRunSpec: () => {
+        calls += 1
+        return Promise.resolve(view('from-run-branch'))
+      },
+    })
+    const store = useServiceSpecStore()
+    await Promise.all([store.loadForRun('exec_1'), store.loadForRun('exec_1')])
+    expect(calls).toBe(1)
+  })
+
+  it('records a failed run read without poisoning the cached view', async () => {
+    stubApi({ getRunSpec: () => Promise.reject(new Error('offline')) })
+    const store = useServiceSpecStore()
+    await store.loadForRun('exec_1')
+    // The card composes `spec: 'not_read'` off an absent view and says so; a fabricated empty
+    // view would have read as a service that declares nothing.
+    expect(store.viewForRun('exec_1')).toBeUndefined()
+  })
+})

package/app/stores/serviceSpec.ts

@@ -4,69 +4,99 @@ import type { ServiceSpecView } from '~/types/spec'
 import { useWorkspaceStore } from '~/stores/workspace'
 
 /**
- * Service-spec read state for the inspector's "View Requirements" window. The spec lives
- * sharded in the service repo under `spec/`; the backend reassembles it from the repo's
- * default branch and serves a {@link ServiceSpecView}. Read-only and fetched on demand
- * (per service frame block), cached per block. Nothing is persisted client-side.
+ * Service-spec read state. The spec lives sharded in the service repo under `spec/`; the backend
+ * reassembles it and serves a {@link ServiceSpecView}. Read-only, fetched on demand, cached.
+ * Nothing is persisted client-side.
+ *
+ * TWO reads, because there are two questions and they have different answers while a pull
+ * request is open:
+ *
+ *  - {@link load} / {@link viewFor}: what the SERVICE requires, from the repo's default branch,
+ *    for the inspector's "View Requirements" window.
+ *  - {@link loadForRun} / {@link viewForRun}: what ONE RUN was judged against, from the branch
+ *    that run pushed to, for the outcome card's requirement join. The card used to read the
+ *    first, so every verdict naming a requirement the run itself added joined against a spec
+ *    that does not carry it yet and rendered as "not checked" — and the card's counts then
+ *    disagreed with `GET /api/v1/runs/:runId/outcome`, which reads the run's branch.
+ *
+ * One cache, two key spaces: the entries are keyed by a PREFIXED id so a block id and an
+ * execution id can never collide, and every accessor mints its key through the same helper.
  */
 export const useServiceSpecStore = defineStore('serviceSpec', () => {
   const api = useApi()
   const workspace = useWorkspaceStore()
 
-  /** The fetched view per block id (undefined = not yet fetched). */
+  const serviceKey = (blockId: string) => `service:${blockId}`
+  const runKey = (executionId: string) => `run:${executionId}`
+
+  /** The fetched view per cache key (undefined = not yet fetched). */
   const views = ref<Record<string, ServiceSpecView>>({})
   /**
-   * In-flight loads keyed by block id — the SINGLE source of truth for "is this block
-   * loading". A reactive Map so `isLoading` (derived from `.has`) tracks set/delete, and it
-   * also coalesces overlapping loads onto one request: no separate loading-flag Set to keep
-   * in sync.
+   * In-flight loads keyed by cache key — the SINGLE source of truth for "is this loading". A
+   * reactive Map so `isLoading` (derived from `.has`) tracks set/delete, and it also coalesces
+   * overlapping loads onto one request: no separate loading-flag Set to keep in sync.
    */
   const inFlight = reactive(new Map<string, Promise<void>>())
-  /** Block ids whose last fetch failed (network / unexpected error). */
-  const erroredByBlock = ref<Set<string>>(new Set())
+  /** Cache keys whose last fetch failed (network / unexpected error). */
+  const erroredByKey = ref<Set<string>>(new Set())
 
   function viewFor(blockId: string): ServiceSpecView | undefined {
-    return views.value[blockId]
+    return views.value[serviceKey(blockId)]
+  }
+  function viewForRun(executionId: string): ServiceSpecView | undefined {
+    return views.value[runKey(executionId)]
   }
   function isLoading(blockId: string): boolean {
-    return inFlight.has(blockId)
+    return inFlight.has(serviceKey(blockId))
   }
   function isErrored(blockId: string): boolean {
-    return erroredByBlock.value.has(blockId)
+    return erroredByKey.value.has(serviceKey(blockId))
   }
 
   function setErrored(key: string, on: boolean) {
-    const next = new Set(erroredByBlock.value)
+    const next = new Set(erroredByKey.value)
     if (on) next.add(key)
     else next.delete(key)
-    erroredByBlock.value = next
+    erroredByKey.value = next
   }
 
-  /** Fetch (and cache) the spec view for a service frame block. */
-  async function load(blockId: string) {
+  /** Fetch (and cache) one view, coalescing concurrent loads of the same key. */
+  function loadKeyed(key: string, fetch: (workspaceId: string) => Promise<ServiceSpecView>) {
     if (!workspace.workspaceId) return
-    const pending = inFlight.get(blockId)
+    const pending = inFlight.get(key)
     if (pending) return pending
-    setErrored(blockId, false)
+    setErrored(key, false)
     const promise = (async () => {
       try {
-        const view = await api.getServiceSpec(workspace.requireId(), blockId)
-        views.value = { ...views.value, [blockId]: view }
+        const view = await fetch(workspace.requireId())
+        views.value = { ...views.value, [key]: view }
       } catch {
-        setErrored(blockId, true)
+        setErrored(key, true)
       } finally {
-        inFlight.delete(blockId)
+        inFlight.delete(key)
       }
     })()
-    inFlight.set(blockId, promise)
+    inFlight.set(key, promise)
     return promise
   }
 
+  /** Fetch the DEFAULT-branch spec view for a service frame block. */
+  async function load(blockId: string) {
+    return loadKeyed(serviceKey(blockId), (workspaceId) => api.getServiceSpec(workspaceId, blockId))
+  }
+
+  /** Fetch the spec view ONE RUN was judged against, from that run's own branch. */
+  async function loadForRun(executionId: string) {
+    return loadKeyed(runKey(executionId), (workspaceId) => api.getRunSpec(workspaceId, executionId))
+  }
+
   return {
     views,
     viewFor,
+    viewForRun,
     isLoading,
     isErrored,
     load,
+    loadForRun,
   }
 })

package/app/utils/catalog.ts

@@ -523,13 +523,14 @@ export function isConsensusEligibleKind(kind: string): boolean {
 }
 
 /**
- * Whether an agent kind is one of the Tester gate kinds (API or UI). Mirrors the backend
- * `isTesterKind`; used by the pipeline builder to surface the test quality-control companion
- * toggle only on Tester steps.
+ * Whether an agent kind is one of the Tester gate kinds (API or UI). Used by the pipeline builder
+ * to surface the test quality-control companion toggle only on Tester steps.
+ *
+ * Re-exported from `@cat-factory/contracts` rather than mirrored: it used to be a hand-written
+ * copy of the engine's rule with the two slugs spelled out as literals, which is the shape that
+ * silently stops matching the day a third tester kind ships.
  */
-export function isTesterKind(kind: string): boolean {
-  return kind === 'tester-api' || kind === 'tester-ui'
-}
+export { isTesterKind } from '@cat-factory/contracts'
 
 /**
  * Display metadata for the engine-driven "system" kinds — the gate/automation