@cat-factory/app 0.115.1 → 0.115.3

package/app/components/board/AgentStopButton.vue

@@ -22,12 +22,23 @@ const props = withDefaults(
 const { t } = useI18n()
 const agentRuns = useAgentRunsStore()
 const toast = useToast()
+const { confirm } = useConfirm()
 const stopping = ref(false)
 
 const displayLabel = computed(() => props.label ?? t('board.stop.label'))
 
 async function stop() {
   if (stopping.value) return
+  // Killing a running container discards its in-flight work — gate it behind a confirm,
+  // matching the confirm-then-mutate contract the task reset path uses.
+  const ok = await confirm({
+    title: t('board.stop.confirm.title'),
+    description: t('board.stop.confirm.body'),
+    confirmLabel: t('board.stop.confirm.confirm'),
+    variant: 'destructive',
+    icon: 'i-lucide-circle-stop',
+  })
+  if (!ok) return
   stopping.value = true
   try {
     const kind = await agentRuns.stop(props.runId)

package/app/components/fragments/FragmentLibraryManager.vue

@@ -6,7 +6,7 @@
 // the merged catalog (built-in ∪ account ∪ workspace) an agent is selected from per
 // run. The account scope has no resolved/merged catalog and fetches document
 // fragments through `viaWorkspaceId` (document-source credentials are per-workspace).
-import { computed, ref, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import type {
   DocumentSourceKind,
   FragmentOwnerKind,
@@ -111,6 +111,24 @@ function notifyError(title: string, e: unknown) {
   })
 }
 
+// Per-row / per-form in-flight tracking. The store's single `library.loading` flag
+// drove every row's button at once (UX-29) and cross-spun the add/link forms; key
+// each async action so only the control that triggered it shows a spinner.
+const busyRows = reactive(new Set<string>())
+const rowBusy = (key: string) => busyRows.has(key)
+async function withRow(key: string, fn: () => Promise<void>) {
+  if (busyRows.has(key)) return
+  busyRows.add(key)
+  try {
+    await fn()
+  } finally {
+    busyRows.delete(key)
+  }
+}
+const creating = ref(false)
+const linkingDoc = ref(false)
+const linkingSource = ref(false)
+
 // ---- create a hand-authored fragment --------------------------------------
 const draft = ref({ title: '', summary: '', body: '', tags: '' })
 const draftValid = computed(
@@ -119,6 +137,7 @@ const draftValid = computed(
 
 async function createFragment() {
   if (!draftValid.value) return
+  creating.value = true
   try {
     await library.create({
       title: draft.value.title.trim(),
@@ -133,6 +152,8 @@ async function createFragment() {
     toast.add({ title: t('fragments.toast.added'), icon: 'i-lucide-check' })
   } catch (e) {
     notifyError(t('fragments.toast.addFailed'), e)
+  } finally {
+    creating.value = false
   }
 }
 
@@ -146,12 +167,14 @@ async function removeFragment(id: string) {
     icon: 'i-lucide-trash-2',
   })
   if (!ok) return
-  try {
-    await library.remove(id)
-    toast.add({ title: t('fragments.toast.removed'), icon: 'i-lucide-trash-2' })
-  } catch (e) {
-    notifyError(t('fragments.toast.removeFailed'), e)
-  }
+  await withRow(`remove:${id}`, async () => {
+    try {
+      await library.remove(id)
+      toast.add({ title: t('fragments.toast.removed'), icon: 'i-lucide-trash-2' })
+    } catch (e) {
+      notifyError(t('fragments.toast.removeFailed'), e)
+    }
+  })
 }
 
 // ---- document-backed (living) fragments -----------------------------------
@@ -201,6 +224,7 @@ const documentFragments = computed(() => library.fragments.filter((f) => f.docum
 
 async function linkDocumentFragment() {
   if (!docDraftValid.value) return
+  linkingDoc.value = true
   try {
     await library.createDocumentFragment({
       source: docDraft.value.source as DocumentSourceKind,
@@ -214,16 +238,20 @@ async function linkDocumentFragment() {
     toast.add({ title: t('fragments.toast.documentLinked'), icon: 'i-lucide-link' })
   } catch (e) {
     notifyError(t('fragments.toast.linkDocumentFailed'), e)
+  } finally {
+    linkingDoc.value = false
   }
 }
 
 async function refreshFragment(id: string) {
-  try {
-    await library.refreshDocumentFragment(id)
-    toast.add({ title: t('fragments.toast.refreshed'), icon: 'i-lucide-refresh-cw' })
-  } catch (e) {
-    notifyError(t('fragments.toast.refreshFailed'), e)
-  }
+  await withRow(`refresh:${id}`, async () => {
+    try {
+      await library.refreshDocumentFragment(id)
+      toast.add({ title: t('fragments.toast.refreshed'), icon: 'i-lucide-refresh-cw' })
+    } catch (e) {
+      notifyError(t('fragments.toast.refreshFailed'), e)
+    }
+  })
 }
 
 // ---- repo sources ----------------------------------------------------------
@@ -263,6 +291,7 @@ async function linkSource() {
   if (!ownerName) return
   const dirPath =
     (githubReady.value ? sourceDir.value : manualSource.value.dirPath.trim()) || undefined
+  linkingSource.value = true
   try {
     const source = await library.linkSource({
       repoOwner: ownerName.owner,
@@ -271,48 +300,71 @@ async function linkSource() {
       gitRef: sourceRef.value.trim() || undefined,
     })
     resetSourceDraft()
+    // Auto-sync the freshly-linked source via the store method directly (not the
+    // `syncSource` row wrapper): a failure here should surface as a link failure, and
+    // the form-level `linkingSource` spinner already covers the whole operation.
     await library.syncSource(source.id)
     toast.add({ title: t('fragments.toast.sourceLinked'), icon: 'i-lucide-git-branch' })
   } catch (e) {
     notifyError(t('fragments.toast.linkSourceFailed'), e)
+  } finally {
+    linkingSource.value = false
   }
 }
 
 async function syncSource(id: string) {
-  try {
-    const result = await library.syncSource(id)
-    toast.add({
-      title: t('fragments.toast.synced', {
-        updated: result.upserted,
-        removed: result.tombstoned,
-      }),
-      icon: 'i-lucide-refresh-cw',
-      color: 'info',
-    })
-  } catch (e) {
-    notifyError(t('fragments.toast.syncFailed'), e)
-  }
+  await withRow(`sync:${id}`, async () => {
+    try {
+      const result = await library.syncSource(id)
+      toast.add({
+        title: t('fragments.toast.synced', {
+          updated: result.upserted,
+          removed: result.tombstoned,
+        }),
+        icon: 'i-lucide-refresh-cw',
+        color: 'info',
+      })
+    } catch (e) {
+      notifyError(t('fragments.toast.syncFailed'), e)
+    }
+  })
 }
 
 async function checkSource(id: string) {
-  try {
-    const status = await library.checkSource(id)
-    toast.add({
-      title: status.changed ? t('fragments.toast.changesAvailable') : t('fragments.toast.upToDate'),
-      icon: status.changed ? 'i-lucide-bell-dot' : 'i-lucide-check',
-    })
-  } catch (e) {
-    notifyError(t('fragments.toast.checkSourceFailed'), e)
-  }
+  await withRow(`check:${id}`, async () => {
+    try {
+      const status = await library.checkSource(id)
+      toast.add({
+        title: status.changed
+          ? t('fragments.toast.changesAvailable')
+          : t('fragments.toast.upToDate'),
+        icon: status.changed ? 'i-lucide-bell-dot' : 'i-lucide-check',
+      })
+    } catch (e) {
+      notifyError(t('fragments.toast.checkSourceFailed'), e)
+    }
+  })
 }
 
 async function unlinkSource(id: string) {
-  try {
-    await library.unlinkSource(id)
-    toast.add({ title: t('fragments.toast.sourceUnlinked'), icon: 'i-lucide-unplug' })
-  } catch (e) {
-    notifyError(t('fragments.toast.unlinkSourceFailed'), e)
-  }
+  const source = library.sources.find((s) => s.id === id)
+  const repo = source ? `${source.repoOwner}/${source.repoName}` : ''
+  const ok = await confirm({
+    title: t('fragments.confirmUnlinkSource.title'),
+    description: t('fragments.confirmUnlinkSource.body', { repo }),
+    variant: 'destructive',
+    confirmLabel: t('fragments.confirmUnlinkSource.confirm'),
+    icon: 'i-lucide-unplug',
+  })
+  if (!ok) return
+  await withRow(`unlink:${id}`, async () => {
+    try {
+      await library.unlinkSource(id)
+      toast.add({ title: t('fragments.toast.sourceUnlinked'), icon: 'i-lucide-unplug' })
+    } catch (e) {
+      notifyError(t('fragments.toast.unlinkSourceFailed'), e)
+    }
+  })
 }
 </script>
 
@@ -417,6 +469,7 @@ async function unlinkSource(id: string) {
             color="error"
             variant="ghost"
             class="ms-auto"
+            :loading="rowBusy(`remove:${f.id}`)"
             @click="removeFragment(f.id)"
           />
         </div>
@@ -446,7 +499,7 @@ async function unlinkSource(id: string) {
               icon="i-lucide-plus"
               size="sm"
               :disabled="!draftValid"
-              :loading="library.loading"
+              :loading="creating"
               class="self-start"
               @click="createFragment"
             >
@@ -487,7 +540,7 @@ async function unlinkSource(id: string) {
               icon="i-lucide-refresh-cw"
               size="xs"
               variant="ghost"
-              :loading="library.loading"
+              :loading="rowBusy(`refresh:${f.id}`)"
               :title="t('fragments.documents.refreshTitle')"
               @click="refreshFragment(f.id)"
             />
@@ -496,6 +549,7 @@ async function unlinkSource(id: string) {
               size="xs"
               color="error"
               variant="ghost"
+              :loading="rowBusy(`remove:${f.id}`)"
               @click="removeFragment(f.id)"
             />
           </div>
@@ -553,7 +607,7 @@ async function unlinkSource(id: string) {
               icon="i-lucide-link"
               size="sm"
               :disabled="!docDraftValid"
-              :loading="library.loading"
+              :loading="linkingDoc"
               class="self-start"
               @click="linkDocumentFragment"
             >
@@ -598,13 +652,14 @@ async function unlinkSource(id: string) {
               icon="i-lucide-search-check"
               size="xs"
               variant="ghost"
+              :loading="rowBusy(`check:${s.id}`)"
               @click="checkSource(s.id)"
             />
             <UButton
               icon="i-lucide-refresh-cw"
               size="xs"
               variant="ghost"
-              :loading="library.loading"
+              :loading="rowBusy(`sync:${s.id}`)"
               @click="syncSource(s.id)"
             />
             <UButton
@@ -612,6 +667,7 @@ async function unlinkSource(id: string) {
               size="xs"
               color="error"
               variant="ghost"
+              :loading="rowBusy(`unlink:${s.id}`)"
               @click="unlinkSource(s.id)"
             />
           </div>
@@ -669,7 +725,7 @@ async function unlinkSource(id: string) {
               icon="i-lucide-link"
               size="sm"
               :disabled="!sourceValid"
-              :loading="library.loading"
+              :loading="linkingSource"
               class="self-start"
               @click="linkSource"
             >

package/app/components/panels/InspectorPanel.vue

@@ -100,6 +100,21 @@ const statusLabel = computed(() =>
 
 const runnable = computed(() => (block.value ? board.isRunnable(block.value.id) : false))
 
+// A task runs only once every dependency has merged. When the Run trigger is locked
+// it must say WHY — name the unfinished dependencies rather than showing a bare lock.
+const unmetDepTitles = computed(() =>
+  block.value && isTask.value ? board.unmetDeps(block.value.id).map((b) => b.title) : [],
+)
+const runBlockedReason = computed(() =>
+  unmetDepTitles.value.length
+    ? t(
+        'panels.inspector.runBlocked',
+        { count: unmetDepTitles.value.length, names: unmetDepTitles.value.join(', ') },
+        unmetDepTitles.value.length,
+      )
+    : null,
+)
+
 // The delete control names what it removes, so selecting a task and deleting it
 // reads as "Delete task" rather than ambiguously removing the whole service.
 const deleteLabel = computed(() =>
@@ -532,6 +547,19 @@ const showOriginalDescription = ref(false)
       <!-- initiative: status + goal, run-planning + tracker controls -->
       <InitiativeInspector v-else-if="isInitiative" :block="block" />
 
+      <!-- Locked-run explanation: a disabled task Run button reads as a dead lock unless
+           it says what's holding it. Named here (and on the button title) so the blocking
+           dependencies are visible to pointer, keyboard, and touch alike — a native title
+           on a disabled button doesn't fire hover events. -->
+      <p
+        v-if="isTask && runBlockedReason"
+        class="flex items-start gap-1.5 text-[11px] text-amber-300/90"
+        data-testid="run-blocked-reason"
+      >
+        <UIcon name="i-lucide-lock" class="mt-px h-3 w-3 shrink-0" />
+        <span>{{ runBlockedReason }}</span>
+      </p>
+
       <!-- actions -->
       <div class="flex items-center gap-2">
         <UDropdownMenu v-if="isTask" :items="runMenu">
@@ -542,6 +570,7 @@ const showOriginalDescription = ref(false)
             :icon="runnable ? 'i-lucide-play' : 'i-lucide-lock'"
             trailing-icon="i-lucide-chevron-down"
             :disabled="!runnable"
+            :title="runBlockedReason ?? undefined"
           >
             {{ instance ? t('panels.inspector.reRun') : t('panels.inspector.run') }}
           </UButton>

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

@@ -11,6 +11,8 @@ import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
 import AgentFailureHistory from '~/components/board/AgentFailureHistory.vue'
 import EmptyState from '~/components/common/EmptyState.vue'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import { useNowTick, stepDurationLabel } from '~/composables/useStepTimer'
+import type { PipelineStep } from '~/types/execution'
 
 const props = defineProps<{ block: Block }>()
 
@@ -85,6 +87,13 @@ function stepFailed(s: { state: string }) {
   return runFailed.value && s.state === 'working'
 }
 
+// A shared 1s tick drives every step's live elapsed clock, so a running step that
+// hasn't yet emitted subtask counts reads as progressing rather than hung.
+const nowTick = useNowTick()
+function stepElapsed(s: PipelineStep): string | null {
+  return stepDurationLabel(s, nowTick.value, runFailed.value, instance.value?.failure?.occurredAt)
+}
+
 /** A gated step parked for approval reads "Needs approval", not "Needs decision". */
 function labelForStep(s: {
   state: string
@@ -148,6 +157,17 @@ function openForkFor(i: number) {
 const stopping = ref(false)
 async function stopRun() {
   if (!instance.value || stopping.value) return
+  // Killing the running container discards its in-flight work — gate it behind the same
+  // confirm the board card's stop uses (via `AgentStopButton`), so every stop surface for
+  // a run is confirm-gated identically.
+  const ok = await confirm({
+    title: t('board.stop.confirm.title'),
+    description: t('board.stop.confirm.body'),
+    confirmLabel: t('board.stop.confirm.confirm'),
+    variant: 'destructive',
+    icon: 'i-lucide-circle-stop',
+  })
+  if (!ok) return
   stopping.value = true
   try {
     await execution.stop(instance.value.id)
@@ -306,6 +326,14 @@ async function mergePr() {
             >
               <UIcon v-if="stepFailed(s)" name="i-lucide-circle-x" class="h-3 w-3 shrink-0" />
               {{ labelForStep(s) }}
+              <!-- live elapsed clock: a running step counts up, a finished one shows total -->
+              <span
+                v-if="stepElapsed(s)"
+                class="inline-flex items-center gap-0.5 font-mono tabular-nums text-slate-500"
+                :title="t('inspector.execution.elapsedTooltip')"
+              >
+                · {{ stepElapsed(s) }}
+              </span>
             </span>
             <UButton
               v-if="s.decision && !s.decision.chosen"

package/app/components/pipeline/PipelineProgress.vue

@@ -12,6 +12,7 @@ import {
   containerPhaseLabel,
 } from '~/utils/pipelineRender'
 import StepMetricsBar from '~/components/observability/StepMetricsBar.vue'
+import { useNowTick, stepDurationLabel } from '~/composables/useStepTimer'
 
 const props = defineProps<{ instance: ExecutionInstance }>()
 const emit = defineEmits<{
@@ -136,6 +137,13 @@ const STATUS_META = computed<Record<ExecutionInstance['status'], { label: string
 const steps = computed(() => props.instance.steps)
 const total = computed(() => steps.value.length)
 
+// A shared 1s tick drives every step's live elapsed clock, so a step that hasn't yet
+// emitted subtask counts still shows it is progressing rather than reading as hung.
+const nowTick = useNowTick()
+function stepElapsed(s: PipelineStep): string | null {
+  return stepDurationLabel(s, nowTick.value, runFailed.value, props.instance.failure?.occurredAt)
+}
+
 // The conditionally-run companion (e.g. the Tester's `fixer`) each step drives, with
 // its possible/running/completed/skipped state — rendered as a distinct sub-node so a
 // human can see at a glance whether the fixer ran or was skipped.
@@ -322,8 +330,20 @@ const ITEM_ICON: Record<string, string> = {
                   {{ t('pipeline.progress.companion') }}
                 </span>
               </div>
-              <div class="text-[10px] uppercase tracking-wide text-slate-500">
-                {{ t('pipeline.progress.stepOf', { current: i + 1, total }) }}
+              <div
+                class="flex items-center gap-1.5 text-[10px] uppercase tracking-wide text-slate-500"
+              >
+                <span>{{ t('pipeline.progress.stepOf', { current: i + 1, total }) }}</span>
+                <!-- live elapsed clock: a running step counts up (so no-subtask steps
+                     don't read as hung), a finished step shows its total duration -->
+                <span
+                  v-if="stepElapsed(s)"
+                  class="inline-flex items-center gap-0.5 font-mono normal-case tabular-nums text-slate-400"
+                  :title="t('pipeline.progress.elapsedTooltip')"
+                >
+                  <UIcon name="i-lucide-clock" class="h-2.5 w-2.5 shrink-0" />
+                  {{ stepElapsed(s) }}
+                </span>
               </div>
             </div>
             <span
@@ -343,7 +363,7 @@ const ITEM_ICON: Record<string, string> = {
                 color="neutral"
                 variant="ghost"
                 size="xs"
-                class="shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+                class="shrink-0 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100"
                 :title="t('pipeline.progress.restartTooltip')"
                 @click.stop="
                   () => {

package/app/components/slack/SlackPanel.vue

@@ -6,7 +6,14 @@
 //   - Mentions (per-account): toggle + GitHub-user-id → Slack-member-id map.
 import { computed, reactive, ref, watch } from 'vue'
 import type { NotificationType } from '~/types/notifications'
-import type { SlackMemberMappingEntry, SlackMemberRole, SlackRoute } from '~/types/slack'
+import type { SlackMemberRole, SlackRoute } from '~/types/slack'
+import {
+  type MemberRow,
+  emptyMemberRow,
+  hasHalfFilledRow,
+  toMemberEntries,
+  toMemberRow,
+} from '~/utils/slackMemberMapping'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
 
@@ -60,9 +67,15 @@ const routes = reactive<Record<NotificationType, SlackRoute>>({
   initiative: { enabled: false, channel: '' },
 })
 const mentionsEnabled = ref(false)
-const mapping = ref<SlackMemberMappingEntry[]>([])
+// Editable member rows carry a client-only stable `uid` (see `slackMemberMapping`) so
+// a mid-list delete keys the v-model by identity, not the array index (index keys
+// silently rebound a neighbour's inputs — UX-23).
+let uidSeq = 0
+const nextUid = () => `m${++uidSeq}`
+const mapping = ref<MemberRow[]>([])
 const tokenInput = ref('')
 const busy = ref(false)
+const connectingOAuth = ref(false)
 
 function notifyError(title: string, e: unknown) {
   toast.add({
@@ -84,7 +97,7 @@ watch(
         routes[type] = slack.settings?.routes[type] ?? { enabled: false, channel: '' }
       }
       mentionsEnabled.value = slack.settings?.mentionsEnabled ?? false
-      mapping.value = slack.memberMapping.map((e) => ({ role: 'engineering', ...e }))
+      mapping.value = slack.memberMapping.map((e) => toMemberRow(e, nextUid()))
     } catch (e) {
       notifyError(t('slack.error.loadSettings'), e)
     }
@@ -94,9 +107,13 @@ watch(
 )
 
 async function connectViaOAuth() {
+  connectingOAuth.value = true
   try {
+    // On success the browser navigates away, so `connectingOAuth` never resets here —
+    // it only clears on the error path below.
     window.location.href = await slack.installUrl()
   } catch (e) {
+    connectingOAuth.value = false
     notifyError(t('slack.error.startOAuth'), e)
   }
 }
@@ -144,17 +161,29 @@ async function saveRouting() {
 }
 
 function addMapping() {
-  mapping.value.push({ userId: '', slackUserId: '', role: 'engineering' })
+  mapping.value.push(emptyMemberRow(nextUid()))
 }
-function removeMapping(index: number) {
-  mapping.value.splice(index, 1)
+function removeMapping(uid: string) {
+  mapping.value = mapping.value.filter((e) => e.uid !== uid)
 }
 async function saveMapping() {
+  // A partially-filled row (one id present, the other blank) used to be silently
+  // dropped on save (UX-23) — block instead so the user doesn't lose the entry. A
+  // fully-empty row is just an unused slot and is ignored.
+  if (hasHalfFilledRow(mapping.value)) {
+    toast.add({
+      title: t('slack.members.incompleteTitle'),
+      description: t('slack.members.incompleteBody'),
+      icon: 'i-lucide-triangle-alert',
+      color: 'warning',
+    })
+    return
+  }
   busy.value = true
   try {
-    const entries = mapping.value.filter((e) => e.userId.trim() && e.slackUserId.trim())
+    const entries = toMemberEntries(mapping.value)
     await slack.updateMemberMapping(entries)
-    mapping.value = slack.memberMapping.map((e) => ({ ...e }))
+    mapping.value = slack.memberMapping.map((e) => toMemberRow(e, nextUid()))
     toast.add({ title: t('slack.toast.mapSaved'), icon: 'i-lucide-check', color: 'success' })
   } catch (e) {
     notifyError(t('slack.error.saveMap'), e)
@@ -181,6 +210,7 @@ async function saveMapping() {
             v-if="slack.oauthEnabled"
             color="primary"
             icon="i-lucide-slack"
+            :loading="connectingOAuth"
             @click="connectViaOAuth"
           >
             {{ t('slack.connect.addToSlack') }}
@@ -287,7 +317,7 @@ async function saveMapping() {
                 </template>
               </i18n-t>
             </p>
-            <div v-for="(entry, i) in mapping" :key="i" class="flex items-center gap-2">
+            <div v-for="entry in mapping" :key="entry.uid" class="flex items-center gap-2">
               <UInput
                 v-model="entry.userId"
                 size="sm"
@@ -312,7 +342,7 @@ async function saveMapping() {
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-trash-2"
-                @click="removeMapping(i)"
+                @click="removeMapping(entry.uid)"
               />
             </div>
             <div class="flex justify-between">

package/app/composables/useStepTimer.spec.ts

@@ -0,0 +1,80 @@
+import { describe, expect, it } from 'vitest'
+import type { PipelineStep } from '~/types/execution'
+import { stepDurationLabel, stepDurationMs, stepIsRunning } from '~/composables/useStepTimer'
+
+// The pure helpers encode one freeze rule shared by the list surfaces (pipeline timeline,
+// inspector run list) and the single-step overlay, so pin the precedence here:
+// finishedAt > (runFailed ? failureAt ?? startedAt) > pausedAt > live now.
+function step(overrides: Partial<PipelineStep> = {}): PipelineStep {
+  return { agentKind: 'coder', state: 'working', ...overrides } as PipelineStep
+}
+
+const NOW = 10_000
+
+describe('stepIsRunning', () => {
+  it('is false for a null step', () => {
+    expect(stepIsRunning(null, false)).toBe(false)
+  })
+
+  it('is false until the step has started', () => {
+    expect(stepIsRunning(step({ startedAt: undefined }), false)).toBe(false)
+  })
+
+  it('is true for a started, unfinished, unparked step on a live run', () => {
+    expect(stepIsRunning(step({ startedAt: 1000 }), false)).toBe(true)
+  })
+
+  it('is false once finished, parked, or the run failed', () => {
+    expect(stepIsRunning(step({ startedAt: 1000, finishedAt: 2000 }), false)).toBe(false)
+    expect(stepIsRunning(step({ startedAt: 1000, pausedAt: 1500 }), false)).toBe(false)
+    expect(stepIsRunning(step({ startedAt: 1000 }), true)).toBe(false)
+  })
+})
+
+describe('stepDurationMs', () => {
+  it('is null until the step has started', () => {
+    expect(stepDurationMs(step({ startedAt: undefined }), NOW, false, null)).toBeNull()
+    expect(stepDurationMs(null, NOW, false, null)).toBeNull()
+  })
+
+  it('counts up to now while live', () => {
+    expect(stepDurationMs(step({ startedAt: 4000 }), NOW, false, null)).toBe(6000)
+  })
+
+  it('freezes at finishedAt once finished (ignoring now)', () => {
+    expect(stepDurationMs(step({ startedAt: 4000, finishedAt: 7000 }), NOW, false, null)).toBe(3000)
+  })
+
+  it('freezes at the run failure time when the run failed', () => {
+    expect(stepDurationMs(step({ startedAt: 4000 }), NOW, true, 6000)).toBe(2000)
+  })
+
+  it('falls back to startedAt (zero) when the run failed with no failure time', () => {
+    expect(stepDurationMs(step({ startedAt: 4000 }), NOW, true, null)).toBe(0)
+  })
+
+  it('freezes at the park time when parked on a human', () => {
+    expect(stepDurationMs(step({ startedAt: 4000, pausedAt: 5500 }), NOW, false, null)).toBe(1500)
+  })
+
+  it('prefers finishedAt over the failure time', () => {
+    expect(stepDurationMs(step({ startedAt: 4000, finishedAt: 5000 }), NOW, true, 6000)).toBe(1000)
+  })
+
+  it('never returns a negative duration', () => {
+    expect(stepDurationMs(step({ startedAt: 8000 }), NOW, true, 6000)).toBe(0)
+  })
+})
+
+describe('stepDurationLabel', () => {
+  it('is null until the step has started', () => {
+    expect(stepDurationLabel(step({ startedAt: undefined }), NOW, false, null)).toBeNull()
+  })
+
+  it('formats seconds and minutes', () => {
+    expect(stepDurationLabel(step({ startedAt: 4000 }), NOW, false, null)).toBe('6s')
+    expect(stepDurationLabel(step({ startedAt: 0, finishedAt: 90_000 }), NOW, false, null)).toBe(
+      '1m 30s',
+    )
+  })
+})