@cat-factory/app 0.145.0 → 0.146.0

package/app/components/board/TaskDependencyEdges.vue

@@ -108,88 +108,52 @@ function border(cx: number, cy: number, hw: number, hh: number, tx: number, ty:
   return { x: cx + dx * t, y: cy + dy * t }
 }
 
+/** Resolve the on-screen, origin-relative border-to-border segment between two blocks,
+ * or null when either end is missing or both collapsed into the same frame. */
+function segmentBetween(sourceId: string, targetId: string, origin: DOMRect) {
+  const a = anchorEl(sourceId)
+  const b = anchorEl(targetId)
+  if (!a || !b || a === b) return null // missing, or both collapsed into the same frame
+  const ra = a.getBoundingClientRect()
+  const rb = b.getBoundingClientRect()
+  const ax = ra.left + ra.width / 2 - origin.left
+  const ay = ra.top + ra.height / 2 - origin.top
+  const bx = rb.left + rb.width / 2 - origin.left
+  const by = rb.top + rb.height / 2 - origin.top
+  const start = border(ax, ay, ra.width / 2, ra.height / 2, bx, by)
+  const end = border(bx, by, rb.width / 2, rb.height / 2, ax, ay)
+  return { x1: start.x, y1: start.y, x2: end.x, y2: end.y }
+}
+
+/** Map a list of {id, source, target} links to their drawable (arrowhead-agnostic) segments. */
+function linkSegments(
+  links: { id: string; source: string; target: string }[],
+  origin: DOMRect,
+): { id: string; x1: number; y1: number; x2: number; y2: number }[] {
+  const out: { id: string; x1: number; y1: number; x2: number; y2: number }[] = []
+  for (const link of links) {
+    const seg = segmentBetween(link.source, link.target, origin)
+    if (seg) out.push({ id: link.id, ...seg })
+  }
+  return out
+}
+
 function recompute() {
   const el = svg.value
   if (!el) return
   const origin = el.getBoundingClientRect()
-  const next: Seg[] = []
 
+  const next: Seg[] = []
   for (const d of taskDeps.value) {
-    const a = anchorEl(d.source)
-    const b = anchorEl(d.target)
-    if (!a || !b || a === b) continue // missing, or both collapsed into the same frame
-
-    const ra = a.getBoundingClientRect()
-    const rb = b.getBoundingClientRect()
-    const ax = ra.left + ra.width / 2 - origin.left
-    const ay = ra.top + ra.height / 2 - origin.top
-    const bx = rb.left + rb.width / 2 - origin.left
-    const by = rb.top + rb.height / 2 - origin.top
-
-    const start = border(ax, ay, ra.width / 2, ra.height / 2, bx, by)
-    const end = border(bx, by, rb.width / 2, rb.height / 2, ax, ay)
-
-    next.push({
-      id: d.id,
-      x1: start.x,
-      y1: start.y,
-      x2: end.x,
-      y2: end.y,
-      done: board.getBlock(d.source)?.status === 'done',
-    })
+    const seg = segmentBetween(d.source, d.target, origin)
+    if (!seg) continue
+    next.push({ id: d.id, ...seg, done: board.getBlock(d.source)?.status === 'done' })
   }
   segments.value = next
 
-  const members: MemberSeg[] = []
-  for (const link of epicLinks.value) {
-    const a = anchorEl(link.source)
-    const b = anchorEl(link.target)
-    if (!a || !b || a === b) continue
-    const ra = a.getBoundingClientRect()
-    const rb = b.getBoundingClientRect()
-    const ax = ra.left + ra.width / 2 - origin.left
-    const ay = ra.top + ra.height / 2 - origin.top
-    const bx = rb.left + rb.width / 2 - origin.left
-    const by = rb.top + rb.height / 2 - origin.top
-    const start = border(ax, ay, ra.width / 2, ra.height / 2, bx, by)
-    const end = border(bx, by, rb.width / 2, rb.height / 2, ax, ay)
-    members.push({ id: link.id, x1: start.x, y1: start.y, x2: end.x, y2: end.y })
-  }
-  memberSegments.value = members
-
-  const fes: FrontendSeg[] = []
-  for (const link of frontendLinks.value) {
-    const a = anchorEl(link.source)
-    const b = anchorEl(link.target)
-    if (!a || !b || a === b) continue
-    const ra = a.getBoundingClientRect()
-    const rb = b.getBoundingClientRect()
-    const ax = ra.left + ra.width / 2 - origin.left
-    const ay = ra.top + ra.height / 2 - origin.top
-    const bx = rb.left + rb.width / 2 - origin.left
-    const by = rb.top + rb.height / 2 - origin.top
-    const start = border(ax, ay, ra.width / 2, ra.height / 2, bx, by)
-    const end = border(bx, by, rb.width / 2, rb.height / 2, ax, ay)
-    fes.push({ id: link.id, x1: start.x, y1: start.y, x2: end.x, y2: end.y })
-  }
-  frontendSegments.value = fes
-
-  const conns: ConnectionSeg[] = []
-  for (const link of connectionLinks.value) {
-    const a = anchorEl(link.source)
-    const b = anchorEl(link.target)
-    if (!a || !b || a === b) continue
-    const ra = a.getBoundingClientRect()
-    const rb = b.getBoundingClientRect()
-    const ax = ra.left + ra.width / 2 - origin.left
-    const ay = ra.top + ra.height / 2 - origin.top
-    const bx = rb.left + rb.width / 2 - origin.left
-    const by = rb.top + rb.height / 2 - origin.top
-    const start = border(ax, ay, ra.width / 2, ra.height / 2, bx, by)
-    const end = border(bx, by, rb.width / 2, rb.height / 2, ax, ay)
-    conns.push({ id: link.id, x1: start.x, y1: start.y, x2: end.x, y2: end.y })
-  }
-  connectionSegments.value = conns
+  memberSegments.value = linkSegments(epicLinks.value, origin)
+  frontendSegments.value = linkSegments(frontendLinks.value, origin)
+  connectionSegments.value = linkSegments(connectionLinks.value, origin)
 }
 
 const { pause, resume } = useRafFn(recompute, { immediate: false })

package/app/components/brainstorm/BrainstormWindow.vue

@@ -22,7 +22,6 @@ import type {
 
 const board = useBoardStore()
 const brainstorm = useBrainstormStore()
-const ui = useUiStore()
 const toast = useToast()
 const { t } = useI18n()
 const access = useWorkspaceAccess()
@@ -32,15 +31,11 @@ const redoComment = ref('')
 const showRedo = ref(false)
 
 const { open, blockId, stage, close } = useResultView('brainstorm', {
-  // `onOpen` fires synchronously from `useResultView`'s immediate watch, BEFORE the `stage`
-  // const below is initialised — so read the stage straight off the store here (referencing
-  // `stage.value` would hit its temporal dead zone and throw on every open).
-  onOpen: (id) => {
+  onOpen: ({ blockId, stage }) => {
     drafts.value = {}
     redoComment.value = ''
     showRedo.value = false
-    const openStage = ui.resultView?.stage
-    if (openStage) void brainstorm.load(id, openStage)
+    if (stage) void brainstorm.load(blockId, stage)
   },
 })
 const activeStage = computed<BrainstormStage>(() => stage.value ?? 'requirements')

package/app/components/clarity/ClarityReviewWindow.vue

@@ -43,12 +43,12 @@ const showRedo = ref(false)
 // fresh each open, so a non-immediate per-window watch used to leave it empty for whichever
 // route (a pipeline step / "Review & approve") didn't warm the cache by selecting the block.
 const { open, blockId, close } = useResultView('clarity-review', {
-  onOpen: (id) => {
+  onOpen: ({ blockId }) => {
     drafts.value = {}
     seededReply.value = {}
     redoComment.value = ''
     showRedo.value = false
-    void clarity.load(id)
+    void clarity.load(blockId)
   },
   // Flush any typed-but-unblurred answer before the view tears down (X, backdrop, Escape) so
   // closing the window never silently drops it (UX-33).

package/app/components/consensus/ConsensusSessionWindow.vue

@@ -20,8 +20,8 @@ const consensus = useConsensusStore()
 const models = useModelsStore()
 
 const { open, blockId, close } = useResultView('consensus-session', {
-  onOpen: (id) => {
-    void consensus.load(id)
+  onOpen: ({ blockId }) => {
+    void consensus.load(blockId)
   },
 })
 

package/app/components/docs/DocInterviewWindow.vue

@@ -16,7 +16,7 @@ const { t } = useI18n()
 const access = useWorkspaceAccess()
 
 const { open, blockId, close } = useResultView('doc-interview', {
-  onOpen: (id) => void docInterview.load(id),
+  onOpen: ({ blockId }) => void docInterview.load(blockId),
 })
 
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))

package/app/components/environments/EnvSetupStepper.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+// The environment-setup wizard's stepper header, driven entirely by
+// `useJourneyProgress` (modular-react#83, production-feedback item 4). The ordered
+// steps, the live position, and the "Step X of N" total all come from
+// `resolveStepSequence` walking the journey's transition graph — there is no
+// hand-maintained step-order array to keep in sync (the old `ENV_STEP_ORDER` +
+// `crumbState` is gone). Rendered inside `<JourneyHost>`, which hands it the live
+// `instanceId`; each step's label is the i18n key carried in the journey's `steps`
+// metadata.
+import type { InstanceId } from '@modular-vue/journeys'
+import { useJourneyProgress } from '@modular-vue/journeys'
+import { environmentSetupJourney } from '~/modular/journeys/environmentSetup'
+import type { EnvSetupInput } from '~/modular/journeys/environmentSetup.logic'
+
+const props = defineProps<{
+  /** The live journey instance from `<JourneyHost>`, or null before it starts. */
+  instanceId: InstanceId | null
+  /** The launch input; frozen for the host's lifetime, so the resolved spine is
+   *  stable (`useJourneyProgress` reads `sequence.input` once at setup). */
+  input: EnvSetupInput
+}>()
+
+const { t, te } = useI18n()
+
+const { index, total, steps } = useJourneyProgress(
+  () => props.instanceId,
+  environmentSetupJourney,
+  { sequence: { input: props.input } },
+)
+
+/** Resolve a step's progress-label key (from the journey's `steps` metadata)
+ *  through i18n, tolerating a locale that omits it rather than leaking the key. */
+function stepLabel(key: string | undefined): string {
+  return key && te(key) ? t(key) : ''
+}
+</script>
+
+<template>
+  <div class="space-y-2" data-testid="env-setup-stepper">
+    <p v-if="total" class="text-[11px] font-medium text-slate-400" data-testid="env-setup-progress">
+      {{ t('environmentWizard.progress', { index: index + 1, total }) }}
+    </p>
+    <ol class="flex items-center gap-2 text-[11px]">
+      <li
+        v-for="(step, i) in steps"
+        :key="step.entry"
+        class="flex items-center gap-2"
+        :data-testid="`env-setup-crumb-${step.entry}`"
+      >
+        <span
+          class="flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-semibold"
+          :class="{
+            'bg-primary-500 text-white': i === index,
+            'bg-emerald-600/70 text-white': i < index,
+            'bg-slate-700 text-slate-300': i > index,
+          }"
+          >{{ i + 1 }}</span
+        >
+        <span :class="i === index ? 'text-slate-100' : 'text-slate-500'">
+          {{ stepLabel(step.progressLabel) }}
+        </span>
+        <UIcon
+          v-if="i < steps.length - 1"
+          name="i-lucide-chevron-right"
+          class="h-3 w-3 text-slate-600"
+        />
+      </li>
+    </ol>
+  </div>
+</template>

package/app/components/environments/EnvironmentSetupWizard.vue

@@ -8,14 +8,15 @@
 // journey (`~/modular/journeys/environmentSetup`), hosted here by `<JourneyHost>`:
 // it starts the journey on open (RESUMING the in-flight instance for the same
 // frame when one was left mid-flow, via the Pinia persistence adapter), renders
-// the current step through `<JourneyOutlet>`, and abandons it on close. Each step
-// component drives the `environmentWizard` store for its data/actions and fires
-// the journey's exits to advance. On `complete` (the save step's Done) the journey
-// clears its persisted blob and we close the modal.
+// the current step through `<JourneyOutlet>`, and abandons it on close. The
+// stepper header + "Step X of N" are derived from the journey's transition graph
+// by `<EnvSetupStepper>` (via `useJourneyProgress`), not a hand-maintained step
+// list. Each step component drives the `environmentWizard` store for its
+// data/actions and fires the journey's exits to advance. On `complete` (the save
+// step's Done) the journey clears its persisted blob and we close the modal.
 import { computed } from 'vue'
 import { JourneyHost, JourneyOutlet } from '@modular-vue/journeys'
 import { environmentSetupHandle } from '~/modular/journeys/environmentSetup'
-import { ENV_STEP_ORDER, type EnvStep } from '~/modular/journeys/environmentSetup.logic'
 
 const ui = useUiStore()
 const { t } = useI18n()
@@ -30,23 +31,6 @@ const open = computed({
 // Read once at journey start; keyed for resume. Frozen for the host's lifetime,
 // so the modal remounts the host per open (it renders under `v-if` upstream).
 const input = computed(() => ({ frameId: ui.environmentWizardFrameId }))
-
-const STEP_LABEL = computed<Record<EnvStep, string>>(() => ({
-  pick: t('environmentWizard.steps.pick'),
-  review: t('environmentWizard.steps.review'),
-  preflight: t('environmentWizard.steps.preflight'),
-  save: t('environmentWizard.steps.save'),
-}))
-
-/** The crumb index of a step, relative to the current journey step. */
-function crumbState(
-  entry: EnvStep,
-  currentEntry: EnvStep | undefined,
-): 'current' | 'done' | 'todo' {
-  if (!currentEntry) return 'todo'
-  if (entry === currentEntry) return 'current'
-  return ENV_STEP_ORDER.indexOf(entry) < ENV_STEP_ORDER.indexOf(currentEntry) ? 'done' : 'todo'
-}
 </script>
 
 <template>
@@ -63,43 +47,9 @@ function crumbState(
           :input="input"
           @finished="ui.closeEnvironmentSetup()"
         >
-          <template #default="{ instanceId, instance }">
-            <!-- stepper header, driven by the journey's current step -->
-            <ol class="flex items-center gap-2 text-[11px]">
-              <li
-                v-for="(s, i) in ENV_STEP_ORDER"
-                :key="s"
-                class="flex items-center gap-2"
-                :data-testid="`env-setup-crumb-${s}`"
-              >
-                <span
-                  class="flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-semibold"
-                  :class="{
-                    'bg-primary-500 text-white':
-                      crumbState(s, (instance?.step?.entry as EnvStep) ?? undefined) === 'current',
-                    'bg-emerald-600/70 text-white':
-                      crumbState(s, (instance?.step?.entry as EnvStep) ?? undefined) === 'done',
-                    'bg-slate-700 text-slate-300':
-                      crumbState(s, (instance?.step?.entry as EnvStep) ?? undefined) === 'todo',
-                  }"
-                  >{{ i + 1 }}</span
-                >
-                <span
-                  :class="
-                    crumbState(s, (instance?.step?.entry as EnvStep) ?? undefined) === 'current'
-                      ? 'text-slate-100'
-                      : 'text-slate-500'
-                  "
-                >
-                  {{ STEP_LABEL[s] }}
-                </span>
-                <UIcon
-                  v-if="i < ENV_STEP_ORDER.length - 1"
-                  name="i-lucide-chevron-right"
-                  class="h-3 w-3 text-slate-600"
-                />
-              </li>
-            </ol>
+          <template #default="{ instanceId }">
+            <!-- stepper header, derived from the journey graph -->
+            <EnvSetupStepper :instance-id="instanceId" :input="input" />
 
             <!-- the current step (pick / review / preflight / save) -->
             <div class="mt-4">

package/app/components/forkDecision/ForkDecisionWindow.vue

@@ -26,7 +26,7 @@ const { t } = useI18n()
 // Hybrid: state rides the coder step (like follow-ups), but warm it from the GET on open too.
 // No `stepRef`: this is a pre-run decision, so there's no "restart from here".
 const { open, blockId, instanceId, stepIndex, close } = useResultView('fork-decision', {
-  onOpen: (id) => void forkDecision.load(id),
+  onOpen: ({ blockId }) => void forkDecision.load(blockId),
 })
 
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))

package/app/components/initiative/InitiativePlanningWindow.vue

@@ -17,7 +17,7 @@ const initiatives = useInitiativesStore()
 const { t } = useI18n()
 
 const { open, blockId, close } = useResultView('initiative-planning', {
-  onOpen: (id) => void initiatives.load(id),
+  onOpen: ({ blockId }) => void initiatives.load(blockId),
 })
 
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))

package/app/components/initiative/InitiativeTrackerWindow.vue

@@ -26,7 +26,7 @@ const { t } = useI18n()
 const toast = useToast()
 
 const { open, blockId, close } = useResultView('initiative-tracker', {
-  onOpen: (id) => void initiatives.load(id),
+  onOpen: ({ blockId }) => void initiatives.load(blockId),
 })
 
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))

package/app/components/prReview/PrReviewWindow.vue

@@ -30,8 +30,8 @@ const access = useWorkspaceAccess()
 const { t } = useI18n()
 
 const { open, blockId, instanceId, stepIndex, close } = useResultView('pr-review', {
-  onOpen: (_id) => {
-    if (instanceId.value) void prReview.load(instanceId.value)
+  onOpen: ({ instanceId }) => {
+    if (instanceId) void prReview.load(instanceId)
   },
 })
 

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -55,7 +55,7 @@ const docCollapsedOverride = ref<boolean | null>(null)
 // fresh each open, so a non-immediate per-window watch used to leave it empty for whichever
 // route (a pipeline step / "Review & approve") didn't warm the cache by selecting the block.
 const { open, blockId, instanceId, stepIndex, close } = useResultView('requirements-review', {
-  onOpen: (id) => {
+  onOpen: ({ blockId }) => {
     drafts.value = {}
     seededReply.value = {}
     recommendMode.value = new Set()
@@ -64,7 +64,7 @@ const { open, blockId, instanceId, stepIndex, close } = useResultView('requireme
     redoComment.value = ''
     showRedo.value = false
     docCollapsedOverride.value = null
-    void requirements.load(id)
+    void requirements.load(blockId)
   },
   // Closing the window (X, backdrop, Escape) must not silently drop an answer the user typed
   // but never blurred out of. Flush before the view tears down; flushDrafts captures the

package/app/components/spec/ServiceSpecWindow.vue

@@ -25,10 +25,10 @@ const mode = ref<ViewMode>('structured')
 const selected = ref<{ m: number; g: number } | null>(null)
 
 const { open, blockId, close } = useResultView('service-spec', {
-  onOpen: (id) => {
+  onOpen: ({ blockId }) => {
     mode.value = 'structured'
     selected.value = null
-    void serviceSpec.load(id)
+    void serviceSpec.load(blockId)
   },
 })
 

package/app/composables/useResultView.ts

@@ -24,9 +24,24 @@
  * overlay stack (top overlay closes first, focus/scroll managed too). A listener here would
  * double-fire `close`, so it was removed once the last window converted onto the shell.
  */
+/**
+ * The fully-resolved view context handed to `onOpen`. Every field is already initialised by
+ * the time `onOpen` fires, so a loader takes exactly what it needs from here and never reaches
+ * back into the store or the composable's own return refs. That matters because `onOpen` fires
+ * synchronously from the `immediate` watch below — DURING the caller's `setup`, before the
+ * `const { … } = useResultView(…)` destructure has been assigned — so any callback that closed
+ * over those refs would hit their temporal dead zone and throw on every open.
+ */
+export interface OpenResultView {
+  blockId: string
+  instanceId: string | null
+  stepIndex: number | null
+  stage: 'requirements' | 'architecture' | null
+}
+
 export function useResultView(
   viewId: string,
-  opts?: { onOpen?: (blockId: string) => void; onClose?: () => void },
+  opts?: { onOpen?: (view: OpenResultView) => void; onClose?: () => void },
 ) {
   const ui = useUiStore()
 
@@ -44,12 +59,20 @@ export function useResultView(
     ui.closeResultView()
   }
 
-  // The load-on-open contract: fire immediately on mount and on any later block switch.
+  // The load-on-open contract: fire immediately on mount and on any later block switch. The
+  // callback receives the fully-resolved context (see OpenResultView) rather than the return
+  // refs, which aren't assigned yet at the initial synchronous fire.
   if (opts?.onOpen) {
     watch(
       blockId,
       (id) => {
-        if (id) opts.onOpen!(id)
+        if (id)
+          opts.onOpen!({
+            blockId: id,
+            instanceId: instanceId.value,
+            stepIndex: stepIndex.value,
+            stage: stage.value,
+          })
       },
       { immediate: true },
     )

package/app/modular/journeys/environmentSetup.logic.spec.ts

@@ -1,20 +1,28 @@
 import { describe, expect, it } from 'vitest'
+import { resolveStepSequence } from '@modular-vue/journeys'
 import {
-  ENV_STEP_ORDER,
+  ENV_MODULE_ID,
+  environmentSetupJourney,
   envInitialState,
-  envNextAfter,
   envStartStep,
 } from './environmentSetup.logic'
+import en from '../../../i18n/locales/en.json'
 
-// Pure navigation graph for the environment-setup journey (slice 3). `envNextAfter`
-// is the source of truth the journey's `advance` transitions derive their target
-// entries from (see `environmentSetup.ts`), so pinning the order, start branch, and
-// forward edges here means a wiring regression can't silently reorder or drop a step.
-describe('environment-setup journey logic', () => {
-  it('orders the steps pick → review → preflight → save', () => {
-    expect(ENV_STEP_ORDER).toEqual(['pick', 'review', 'preflight', 'save'])
-  })
+/** Dot-path lookup into the real `en.json`, mirroring which keys actually ship. */
+function hasKey(path: string): boolean {
+  return (
+    path.split('.').reduce<unknown>((node, seg) => {
+      return node && typeof node === 'object' ? (node as Record<string, unknown>)[seg] : undefined
+    }, en) !== undefined
+  )
+}
 
+// Pure navigation graph for the environment-setup journey (slice 3). The step
+// order is derived from the annotated transition graph (production-feedback item
+// 4), so `resolveStepSequenceResult` walking the real journey definition is the
+// guard against a silent reorder or dropped step — no hand-maintained order array
+// to pin separately.
+describe('environment-setup journey logic', () => {
   it('seeds state from the launch input', () => {
     expect(envInitialState({ frameId: 'blk_1' })).toEqual({ frameId: 'blk_1' })
     expect(envInitialState({ frameId: null })).toEqual({ frameId: null })
@@ -25,10 +33,33 @@ describe('environment-setup journey logic', () => {
     expect(envStartStep({ frameId: null }, { frameId: null })).toBe('pick')
   })
 
-  it('advances linearly and terminates after save', () => {
-    expect(envNextAfter('pick')).toBe('review')
-    expect(envNextAfter('review')).toBe('preflight')
-    expect(envNextAfter('preflight')).toBe('save')
-    expect(envNextAfter('save')).toBe('done')
+  it('derives the pick → review → preflight → save order from the transition graph', () => {
+    const steps = resolveStepSequence(environmentSetupJourney, { input: { frameId: null } })
+    expect(steps.map((s) => s.entry)).toEqual(['pick', 'review', 'preflight', 'save'])
+    expect(steps.every((s) => s.module === ENV_MODULE_ID)).toBe(true)
+    expect(steps.map((s) => s.progressLabel)).toEqual([
+      'environmentWizard.steps.pick',
+      'environmentWizard.steps.review',
+      'environmentWizard.steps.preflight',
+      'environmentWizard.steps.save',
+    ])
+  })
+
+  it('starts the derived sequence at review when a frame is preselected', () => {
+    const steps = resolveStepSequence(environmentSetupJourney, { input: { frameId: 'blk_1' } })
+    expect(steps.map((s) => s.entry)).toEqual(['review', 'preflight', 'save'])
+  })
+
+  // The stepper resolves each label through a VARIABLE key (`t(step.progressLabel)`), so
+  // the tier-1 typed-message-keys check + `vue-i18n-extract` can no longer see these keys
+  // as used and can't catch a typo or a dropped key. Pin the missing-key guard here instead:
+  // every `progressLabel` the real definition emits must resolve to a shipping `en.json` key.
+  it('carries a shipping en.json label key for every derived step', () => {
+    const steps = resolveStepSequence(environmentSetupJourney, { input: { frameId: null } })
+    for (const step of steps) {
+      const key = step.progressLabel
+      expect(key, `missing i18n key for step "${step.entry}"`).toBeTruthy()
+      expect(hasKey(key ?? ''), `key "${key}" not in en.json`).toBe(true)
+    }
   })
 })