@cat-factory/app 0.302.1 → 0.303.0

package/app/components/panels/StepDelegatedStatus.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  delegatedUsageUnreported,
+  delegationStatusView,
+  externalRunHref,
+} from './StepDelegatedStatus.logic'
+import type { PipelineStep } from '~/types/execution'
+
+// The EXTERNAL work a delegated step dispatched: which registered executor is running it, what it
+// is doing, and the link to that system's own logs, which is the affordance everything else here
+// exists to frame.
+//
+// The sibling of `StepContainerStatus`, and deliberately not the same component. A container step
+// reports a phase, an id and a reachable address, all of which the platform observes directly; a
+// delegated step reports whatever an external system chose to tell us, which is usually a status
+// and a URL. Rendering the second through the first would put empty rows labelled "Container" and
+// "Address" on every delegated step, and would claim a container the platform never started.
+//
+// The second thing it says is what the platform CANNOT see. A delegated step's model calls never
+// touch this deployment's proxy or recorder, so its tokens are in no total on this page, and a
+// missing number is invisible. See `delegatedUsageUnreported`, which answers a settled step from
+// contracts' own rule, the one the backend's gap fold reads, so the card and the debug overview
+// cannot disagree about one step.
+const props = defineProps<{
+  step: PipelineStep
+  /**
+   * The registered executor's presentation, when this build still registers it. ABSENT is a real
+   * state rather than a loading one: a deployment can stop registering an executor while runs that
+   * used it are still on the board, and the card then names the id instead of pretending to a
+   * label it does not have.
+   */
+  executor?: { label: string; description: string; telemetry: 'not-reported' | 'self-reported' }
+}>()
+
+const { t } = useI18n()
+
+const record = computed(() => props.step.delegated ?? null)
+
+/**
+ * Everything the card renders for this record's status, narrowed against the vocabulary this build
+ * ships. See `StepDelegatedStatus.logic` for why a bare `Record` lookup cannot be used here.
+ */
+const statusView = computed(() => delegationStatusView(record.value?.status))
+
+/** The executor's own label when this build registers it, else the persisted id. */
+const executorName = computed(() => props.executor?.label || record.value?.executor || '')
+
+/**
+ * The branch the work LANDED on, shown only when there is no pull request to show instead.
+ *
+ * An executor that pushes and lets a later step open the PR is a case the port names as
+ * legitimate, and then this is the run's entire product: without it the card reports a completed
+ * external run with nothing to point at.
+ */
+const landedBranch = computed(() => record.value?.branch ?? null)
+
+/**
+ * The run link, only when it is one this SPA may follow. The value comes from an external
+ * system's API, and this is the card's primary affordance; see {@link externalRunHref}.
+ */
+const runHref = computed(() => externalRunHref(record.value?.url))
+
+/** Whether to say the platform is not measuring this step's spend; see the logic sibling. */
+const usageUnreported = computed(() => delegatedUsageUnreported(props.step, props.executor))
+
+/** Earlier attempts, newest last, shown only once there is more than the current one. */
+const priorAttempts = computed(() => {
+  const attempts = record.value?.attempts ?? []
+  return attempts.length > 1 ? attempts.slice(0, -1) : []
+})
+
+const { copy: copyText } = useCopyToClipboard()
+</script>
+
+<template>
+  <!-- Single conditional root so a passed-through `class` (e.g. layout margin) applies cleanly.
+       Renders nothing for a step that dispatched nowhere external. -->
+  <div v-if="record" data-testid="step-delegated-status">
+    <div class="rounded-lg border px-3 py-2 text-[12px]" :class="statusView.meta.cls">
+      <div class="flex items-center gap-2">
+        <UIcon
+          :name="statusView.meta.icon"
+          class="h-4 w-4 shrink-0"
+          :class="statusView.meta.spin ? 'animate-spin' : ''"
+        />
+        <!-- A status this build does not know is NAMED as unrecognised, carrying the stored value,
+             rather than guessed onto a current one or silently dropped. -->
+        <span class="font-medium">{{ t(statusView.labelKey, statusView.labelParams) }}</span>
+        <span class="text-dimmed">·</span>
+        <span class="truncate" :title="executor?.description">{{ executorName }}</span>
+        <template v-if="record.phase && statusView.status === 'running'">
+          <span class="text-dimmed">·</span>
+          <span>{{ record.phase }}</span>
+        </template>
+      </div>
+
+      <!-- The PRIMARY affordance: the executor's own logs. It is the only place the detail of
+           what happened exists, which is why a failed delegated step without it is a dead end. -->
+      <div v-if="record.url" class="mt-2 flex items-center gap-2">
+        <dt class="shrink-0 text-[11px] uppercase tracking-wide text-dimmed">
+          {{ t('panels.stepMeta.delegated.run') }}
+        </dt>
+        <!-- Linked only when the executor's URL is `http(s)`. Anything else is shown as the text
+             it is: refusing to follow it is right, and hiding it would report a run that named
+             no link at all. -->
+        <dd class="truncate font-mono text-[11px] text-toned">
+          <a
+            v-if="runHref"
+            :href="runHref"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="hover:underline"
+          >
+            {{ record.url }}
+          </a>
+          <span v-else>{{ record.url }}</span>
+        </dd>
+        <UButton
+          icon="i-lucide-copy"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          class="ms-auto shrink-0"
+          :title="t('panels.stepMeta.delegated.copyUrl')"
+          :aria-label="t('panels.stepMeta.delegated.copyUrl')"
+          @click="copyText(record.url)"
+        />
+      </div>
+
+      <!-- The branch the work landed on, for an executor that pushed without opening a pull
+           request. Rendered here because the platform holds nothing else about that run's
+           product. -->
+      <div v-if="landedBranch" class="mt-2 flex items-center gap-2">
+        <dt class="shrink-0 text-[11px] uppercase tracking-wide text-dimmed">
+          {{ t('panels.stepMeta.delegated.branch') }}
+        </dt>
+        <dd class="truncate font-mono text-[11px] text-toned">{{ landedBranch }}</dd>
+      </div>
+
+      <!-- What the platform could not do, stated rather than left to read as a clean outcome:
+           a cancelled run whose executor declares no cancel is still going. -->
+      <p v-if="record.note" class="mt-2 text-[11px] text-toned">{{ record.note }}</p>
+    </div>
+
+    <!-- "Absent" and "zero" must never render the same. Without this line a delegated step shows
+         no tokens beside a container step that shows some, and the only available reading is that
+         it was free. -->
+    <p v-if="usageUnreported" class="mt-2 text-[11px] text-dimmed">
+      {{ t('panels.stepMeta.delegated.usageNotReported', { executor: executorName }) }}
+    </p>
+
+    <!-- Earlier attempts. Kept across a re-run on purpose: the previous run's logs are the
+         evidence for why this step is being run again, and the platform holds nothing else. -->
+    <div v-if="priorAttempts.length" class="mt-3">
+      <div class="text-[11px] uppercase tracking-wide text-dimmed">
+        {{ t('panels.stepMeta.delegated.earlierAttempts') }}
+      </div>
+      <ul class="mt-1 space-y-1">
+        <li
+          v-for="(attempt, index) in priorAttempts"
+          :key="`${attempt.startedAt}-${index}`"
+          class="flex items-center gap-2 text-[11px] text-muted"
+        >
+          <span class="truncate">{{
+            attempt.outcome || t('panels.stepMeta.delegated.noOutcome')
+          }}</span>
+          <a
+            v-if="externalRunHref(attempt.url)"
+            :href="externalRunHref(attempt.url)!"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="ms-auto shrink-0 font-mono hover:underline"
+          >
+            {{ t('panels.stepMeta.delegated.openRun') }}
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

package/app/components/panels/StepEffortReport.vue

@@ -22,7 +22,11 @@ const difficultyPct = computed(() =>
   Math.min(100, Math.max(0, (props.report.difficulty / 10) * 100)),
 )
 // Colour the difficulty by band: easy (emerald) → moderate (amber) → hard (rose).
-const BAR_CLASS = { easy: 'bg-emerald-400', moderate: 'bg-amber-400', hard: 'bg-rose-400' } as const
+const BAR_CLASS = {
+  easy: 'bg-app-success-400',
+  moderate: 'bg-app-warning-400',
+  hard: 'bg-app-error-400',
+} as const
 const difficultyClass = computed(() => BAR_CLASS[effortBand(props.report.difficulty)])
 </script>
 
@@ -30,25 +34,22 @@ const difficultyClass = computed(() => BAR_CLASS[effortBand(props.report.difficu
   <section
     data-testid="step-effort-report"
     :class="
-      variant === 'card' ? 'scroll-mt-4 rounded-xl border border-slate-800 bg-slate-900/50 p-4' : ''
+      variant === 'card' ? 'scroll-mt-4 rounded-xl border border-default bg-default/50 p-4' : ''
     "
   >
     <div
       v-if="variant === 'card'"
-      class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+      class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted"
     >
       <UIcon name="i-lucide-gauge" class="h-3.5 w-3.5" />
       <span>{{ t('panels.stepDetail.effort.heading') }}</span>
     </div>
 
     <div class="flex items-center gap-2">
-      <span
-        class="text-[12px] text-slate-300"
-        :title="t('panels.stepDetail.effort.difficultyHint')"
-      >
+      <span class="text-[12px] text-toned" :title="t('panels.stepDetail.effort.difficultyHint')">
         {{ t('panels.stepDetail.effort.difficulty') }}
       </span>
-      <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-700/60">
+      <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-accented/60">
         <div
           class="h-full rounded-full"
           :class="difficultyClass"
@@ -57,7 +58,7 @@ const difficultyClass = computed(() => BAR_CLASS[effortBand(props.report.difficu
       </div>
       <span
         data-testid="step-effort-difficulty"
-        class="text-[12px] font-medium text-slate-200"
+        class="text-[12px] font-medium text-default"
         :title="t('panels.stepDetail.effort.difficultyHint')"
       >
         {{ t('panels.stepDetail.effort.outOfTen', { value: report.difficulty }) }}
@@ -66,33 +67,33 @@ const difficultyClass = computed(() => BAR_CLASS[effortBand(props.report.difficu
 
     <p
       v-if="report.summary"
-      class="mt-2 whitespace-pre-wrap text-[13px] leading-relaxed text-slate-300"
+      class="mt-2 whitespace-pre-wrap text-[13px] leading-relaxed text-toned"
     >
       {{ report.summary }}
     </p>
 
     <div v-if="report.reducedEffectiveness" class="mt-3">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      <p class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
         {{ t('panels.stepDetail.effort.reduced') }}
       </p>
-      <p class="mt-0.5 whitespace-pre-wrap text-[12px] text-slate-300">
+      <p class="mt-0.5 whitespace-pre-wrap text-[12px] text-toned">
         {{ report.reducedEffectiveness }}
       </p>
     </div>
 
     <div v-if="report.obstacles?.length" class="mt-3">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      <p class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
         {{ t('panels.stepDetail.effort.obstacles') }}
       </p>
       <ul class="mt-0.5 space-y-1">
         <li
           v-for="(obstacle, i) in report.obstacles"
           :key="i"
-          class="flex items-start gap-1.5 text-[12px] text-slate-300"
+          class="flex items-start gap-1.5 text-[12px] text-toned"
         >
           <UIcon
             name="i-lucide-alert-triangle"
-            class="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-400/80"
+            class="mt-0.5 h-3.5 w-3.5 shrink-0 text-app-warning-400/80"
           />
           <span>{{ obstacle }}</span>
         </li>

package/app/components/panels/StepFragmentAdherence.vue

@@ -13,7 +13,11 @@ const { t } = useI18n()
 
 /** Rating band → bar colour: poor adherence (rose) → partial (amber) → strong (emerald). */
 function ratingClass(rating: number): string {
-  return rating >= 8 ? 'bg-emerald-400' : rating >= 5 ? 'bg-amber-400' : 'bg-rose-400'
+  return rating >= 8
+    ? 'bg-app-success-400'
+    : rating >= 5
+      ? 'bg-app-warning-400'
+      : 'bg-app-error-400'
 }
 function ratingPct(rating: number): number {
   return Math.min(100, Math.max(0, (rating / 10) * 100))
@@ -28,10 +32,10 @@ function label(item: FragmentAdherence[number]): string {
   <section
     v-if="items.length"
     data-testid="step-fragment-adherence"
-    class="scroll-mt-4 rounded-xl border border-slate-800 bg-slate-900/50 p-4"
+    class="scroll-mt-4 rounded-xl border border-default bg-default/50 p-4"
   >
     <div
-      class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+      class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted"
     >
       <UIcon name="i-lucide-clipboard-check" class="h-3.5 w-3.5" />
       <span :title="t('panels.stepDetail.adherence.headingHint')">
@@ -44,13 +48,13 @@ function label(item: FragmentAdherence[number]): string {
         v-for="(item, i) in items"
         :key="item.fragmentId ?? i"
         data-testid="step-fragment-adherence-item"
-        class="rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-2"
+        class="rounded-lg border border-default bg-default/60 px-3 py-2"
       >
         <div class="flex items-center gap-2">
-          <span class="min-w-0 flex-1 truncate text-[13px] font-medium text-slate-100">{{
+          <span class="min-w-0 flex-1 truncate text-[13px] font-medium text-app-100">{{
             label(item)
           }}</span>
-          <div class="h-1.5 w-16 shrink-0 overflow-hidden rounded-full bg-slate-700/60">
+          <div class="h-1.5 w-16 shrink-0 overflow-hidden rounded-full bg-accented/60">
             <div
               class="h-full rounded-full"
               :class="ratingClass(item.rating)"
@@ -58,7 +62,7 @@ function label(item: FragmentAdherence[number]): string {
             />
           </div>
           <span
-            class="shrink-0 text-[12px] font-medium text-slate-200"
+            class="shrink-0 text-[12px] font-medium text-default"
             :title="t('panels.stepDetail.adherence.ratingHint')"
           >
             {{ t('panels.stepDetail.adherence.outOfTen', { value: item.rating }) }}
@@ -67,17 +71,17 @@ function label(item: FragmentAdherence[number]): string {
         <MarkdownProse
           v-if="item.assessment"
           :text="item.assessment"
-          class="mt-1 text-[12px] leading-relaxed text-slate-300"
+          class="mt-1 text-[12px] leading-relaxed text-toned"
         />
         <div v-if="item.relatedFindings.length" class="mt-1.5">
-          <p class="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
+          <p class="text-[10px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('panels.stepDetail.adherence.relatedFindings') }}
           </p>
           <ul class="mt-0.5 space-y-0.5">
             <li
               v-for="(finding, fi) in item.relatedFindings"
               :key="fi"
-              class="flex items-start gap-1.5 text-[11px] text-slate-400"
+              class="flex items-start gap-1.5 text-[11px] text-muted"
             >
               <UIcon name="i-lucide-dot" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
               <span>{{ finding }}</span>

package/app/components/panels/StepMetadataCard.vue

@@ -10,6 +10,7 @@ import type { BadgeColor } from '~/utils/badge'
 import { subtaskIconClass } from '~/utils/pipelineRender'
 import StepModelActivity from '~/components/observability/StepModelActivity.vue'
 import StepContainerStatus from '~/components/panels/StepContainerStatus.vue'
+import StepDelegatedStatus from '~/components/panels/StepDelegatedStatus.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
 
@@ -32,8 +33,28 @@ const props = defineProps<{
 }>()
 
 const models = useModelsStore()
+const agents = useAgentsStore()
 const { t, d } = useI18n()
 
+/**
+ * The registered executor behind a DELEGATED step, when this build still registers it.
+ *
+ * Read off the agent catalog rather than the step, because the step persists only the executor's
+ * ID: a card that named that id would show `acme:executor` where a person wants the label the
+ * deployment gave it. Undefined for every other step, and the card renders nothing.
+ */
+const delegatedExecutor = computed(() => {
+  const meta = agents.get(props.step.agentKind)?.delegatedExecutor
+  if (!meta) return undefined
+  return {
+    // `||`, not `??`: an entry that carried an empty label would otherwise satisfy the fallback and
+    // leave the card with a blank name, which is the one thing naming the id exists to prevent.
+    label: meta.label || meta.id,
+    description: meta.description ?? '',
+    telemetry: meta.telemetry ?? ('not-reported' as const),
+  }
+})
+
 const STATE_LABEL_KEYS: Record<AgentState, string> = {
   pending: 'panels.stepMeta.state.pending',
   working: 'panels.stepMeta.state.working',
@@ -41,10 +62,10 @@ const STATE_LABEL_KEYS: Record<AgentState, string> = {
   done: 'panels.stepMeta.state.done',
 }
 const STATE_COLOR: Record<AgentState, string> = {
-  pending: '#64748b',
-  working: '#6366f1',
-  waiting_decision: '#f59e0b',
-  done: '#22c55e',
+  pending: 'var(--ui-text-muted)',
+  working: 'var(--ui-primary)',
+  waiting_decision: 'var(--ui-warning)',
+  done: 'var(--ui-success)',
 }
 
 // The state badge: a step left mid-flight on a failed run keeps `state: 'working'`,
@@ -52,7 +73,7 @@ const STATE_COLOR: Record<AgentState, string> = {
 const stateMeta = computed(() => {
   const s = props.step
   if (props.runFailed && s.state === 'working')
-    return { label: t('panels.stepMeta.state.failed'), color: '#ef4444' }
+    return { label: t('panels.stepMeta.state.failed'), color: 'var(--ui-error)' }
   return { label: t(STATE_LABEL_KEYS[s.state]), color: STATE_COLOR[s.state] }
 })
 
@@ -163,10 +184,10 @@ async function copyRunId() {
   <div>
     <dl class="grid grid-cols-2 gap-x-6 gap-y-3 text-[13px] sm:grid-cols-3">
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+        <dt class="text-[11px] uppercase tracking-wide text-dimmed">
           {{ t('panels.stepMeta.stateLabel') }}
         </dt>
-        <dd class="mt-0.5 flex items-center gap-1.5 text-slate-200">
+        <dd class="mt-0.5 flex items-center gap-1.5 text-default">
           <UIcon
             v-if="runFailed && step.state === 'working'"
             name="i-lucide-circle-x"
@@ -178,66 +199,66 @@ async function copyRunId() {
         </dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+        <dt class="text-[11px] uppercase tracking-wide text-dimmed">
           {{ t('panels.stepMeta.duration') }}
         </dt>
-        <dd class="mt-0.5 flex items-center gap-1.5 tabular-nums text-slate-200">
+        <dd class="mt-0.5 flex items-center gap-1.5 tabular-nums text-default">
           <UIcon
             v-if="isRunning"
             name="i-lucide-loader-circle"
-            class="h-3 w-3 animate-spin text-indigo-400"
+            class="h-3 w-3 animate-spin text-primary"
           />
           <span v-if="durationLabel">{{ durationLabel }}</span>
-          <span v-else class="text-slate-500">—</span>
-          <span v-if="isRunning" class="text-[11px] text-slate-500">{{
+          <span v-else class="text-dimmed">—</span>
+          <span v-if="isRunning" class="text-[11px] text-dimmed">{{
             t('panels.stepMeta.elapsed')
           }}</span>
         </dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+        <dt class="text-[11px] uppercase tracking-wide text-dimmed">
           {{ t('panels.stepMeta.step') }}
         </dt>
-        <dd class="mt-0.5 text-slate-200">
+        <dd class="mt-0.5 text-default">
           {{ t('panels.stepMeta.stepOf', { number: stepNumber, total: totalSteps }) }}
         </dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+        <dt class="text-[11px] uppercase tracking-wide text-dimmed">
           {{ t('panels.stepMeta.started') }}
         </dt>
-        <dd class="mt-0.5 text-slate-300">{{ formatClock(step.startedAt) ?? '—' }}</dd>
+        <dd class="mt-0.5 text-toned">{{ formatClock(step.startedAt) ?? '—' }}</dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+        <dt class="text-[11px] uppercase tracking-wide text-dimmed">
           {{ t('panels.stepMeta.finished') }}
         </dt>
-        <dd class="mt-0.5 text-slate-300">{{ formatClock(step.finishedAt) ?? '—' }}</dd>
+        <dd class="mt-0.5 text-toned">{{ formatClock(step.finishedAt) ?? '—' }}</dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+        <dt class="text-[11px] uppercase tracking-wide text-dimmed">
           {{ t('panels.stepMeta.model') }}
         </dt>
-        <dd class="mt-0.5 truncate text-slate-300" :title="step.model">
+        <dd class="mt-0.5 truncate text-toned" :title="step.model">
           {{ modelLabel ?? t('panels.stepMeta.notRecorded') }}
         </dd>
       </div>
       <div v-if="promptVariant">
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+        <dt class="text-[11px] uppercase tracking-wide text-dimmed">
           {{ t('panels.stepMeta.promptVariant') }}
         </dt>
-        <dd class="mt-0.5 truncate text-slate-300">{{ promptVariant.label }}</dd>
-        <dd v-if="promptVariant.note" class="mt-0.5 text-[11px] text-amber-400/80">
+        <dd class="mt-0.5 truncate text-toned">{{ promptVariant.label }}</dd>
+        <dd v-if="promptVariant.note" class="mt-0.5 text-[11px] text-app-warning-400/80">
           {{ promptVariant.note }}
         </dd>
       </div>
       <!-- The run id this step belongs to, surfaced for debugging (copyable). -->
       <div class="col-span-2 sm:col-span-3">
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+        <dt class="text-[11px] uppercase tracking-wide text-dimmed">
           {{ t('panels.stepMeta.run') }}
         </dt>
         <dd
-          class="mt-0.5 cursor-pointer truncate font-mono text-[12px] text-slate-400 hover:text-slate-200"
+          class="mt-0.5 cursor-pointer truncate font-mono text-[12px] text-muted hover:text-default"
           :title="t('panels.stepMeta.clickToCopy', { id: step.runId ?? instanceId ?? '' })"
           @click="copyRunId"
         >
@@ -255,9 +276,15 @@ async function copyRunId() {
       class="mt-4"
     />
 
+    <!-- the EXTERNAL work a delegated step dispatched: which executor, what it is doing, the link
+         to its own logs, and what this platform therefore cannot measure. Its own component
+         because the two records share no field: a delegated step has no container to report a
+         phase, an id or an address for. -->
+    <StepDelegatedStatus :step="step" :executor="delegatedExecutor" class="mt-4" />
+
     <!-- live subtask breakdown -->
     <div v-if="step.subtasks && step.subtasks.total > 0" class="mt-4">
-      <div class="text-[11px] uppercase tracking-wide text-slate-500">
+      <div class="text-[11px] uppercase tracking-wide text-dimmed">
         {{
           t('panels.stepMeta.subtasks', {
             completed: step.subtasks.completed,
@@ -265,9 +292,9 @@ async function copyRunId() {
           })
         }}
       </div>
-      <div class="mt-1 h-1 overflow-hidden rounded-full bg-slate-700/60">
+      <div class="mt-1 h-1 overflow-hidden rounded-full bg-accented/60">
         <div
-          class="h-full rounded-full bg-indigo-400 transition-all duration-500"
+          class="h-full rounded-full bg-primary transition-all duration-500"
           :style="{
             width: `${(step.subtasks.completed / step.subtasks.total) * 100}%`,
           }"
@@ -280,10 +307,10 @@ async function copyRunId() {
           class="flex items-start gap-1.5 text-[12px]"
           :class="
             item.status === 'completed'
-              ? 'text-slate-500 line-through'
+              ? 'text-dimmed line-through'
               : item.status === 'in_progress'
-                ? 'text-slate-100'
-                : 'text-slate-400'
+                ? 'text-app-100'
+                : 'text-muted'
           "
         >
           <UIcon
@@ -309,7 +336,7 @@ async function copyRunId() {
     <!-- standards (prompt fragments) folded into this step -->
     <div v-if="step.selectedFragmentIds && step.selectedFragmentIds.length" class="mt-4">
       <div
-        class="text-[11px] uppercase tracking-wide text-slate-500"
+        class="text-[11px] uppercase tracking-wide text-dimmed"
         :title="t('panels.stepMeta.standardsAppliedHint')"
       >
         {{ t('panels.stepMeta.standardsApplied') }}
@@ -329,28 +356,28 @@ async function copyRunId() {
 
     <!-- decision raised on this step -->
     <div v-if="step.decision" class="mt-4">
-      <div class="text-[11px] uppercase tracking-wide text-slate-500">
+      <div class="text-[11px] uppercase tracking-wide text-dimmed">
         {{ t('panels.stepMeta.decision') }}
       </div>
-      <p class="mt-0.5 text-[13px] text-slate-200">{{ step.decision.question }}</p>
+      <p class="mt-0.5 text-[13px] text-default">{{ step.decision.question }}</p>
       <p
         v-if="step.decision.chosen"
-        class="mt-0.5 flex items-center gap-1 text-[12px] text-emerald-400"
+        class="mt-0.5 flex items-center gap-1 text-[12px] text-app-success-400"
       >
         <UIcon name="i-lucide-check" class="h-3 w-3 shrink-0" />
         {{ step.decision.chosen }}
       </p>
-      <p v-else class="mt-0.5 text-[12px] text-amber-400">
+      <p v-else class="mt-0.5 text-[12px] text-app-warning-400">
         {{ t('panels.stepMeta.awaitingChoice') }}
       </p>
     </div>
 
     <!-- approval gate state -->
     <div v-if="step.approval" class="mt-4">
-      <div class="text-[11px] uppercase tracking-wide text-slate-500">
+      <div class="text-[11px] uppercase tracking-wide text-dimmed">
         {{ t('panels.stepMeta.approvalGate') }}
       </div>
-      <p class="mt-0.5 text-[13px] text-slate-200">
+      <p class="mt-0.5 text-[13px] text-default">
         {{ approvalStatusLabel }}
       </p>
     </div>
@@ -358,7 +385,7 @@ async function copyRunId() {
     <!-- companion verdict + full correction sequence -->
     <div v-if="companionVerdicts.length" class="mt-4">
       <div class="flex items-center justify-between">
-        <span class="text-[11px] uppercase tracking-wide text-slate-500">
+        <span class="text-[11px] uppercase tracking-wide text-dimmed">
           {{ t('panels.stepMeta.companionReview') }}
         </span>
         <!-- The COLOUR is the verdict (`passed`) and the GLYPH is the arithmetic, which are no
@@ -380,19 +407,21 @@ async function copyRunId() {
           v-for="({ verdict: v, findings }, i) in verdictRounds"
           :key="i"
           data-testid="companion-verdict"
-          class="relative rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-2"
+          class="relative rounded-lg border border-default bg-default/60 px-3 py-2"
         >
           <CopyButton v-if="v.feedback" :text="v.feedback" class="absolute end-1 top-1" />
           <div class="flex items-center gap-2 text-[12px]">
             <span
               class="inline-flex h-4 shrink-0 items-center rounded px-1 font-mono text-[11px] tabular-nums"
               :class="
-                v.passed ? 'bg-emerald-500/15 text-emerald-300' : 'bg-amber-500/15 text-amber-300'
+                v.passed
+                  ? 'bg-app-success-500/15 text-app-success-300'
+                  : 'bg-app-warning-500/15 text-app-warning-300'
               "
             >
               {{ i + 1 }}
             </span>
-            <span :class="v.passed ? 'text-emerald-300' : 'text-amber-300'">
+            <span :class="v.passed ? 'text-app-success-300' : 'text-app-warning-300'">
               {{ pctOf(v.rating) }} {{ ratingMeetsBar(v) ? '≥' : '<' }} {{ pctOf(v.threshold) }}
             </span>
           </div>
@@ -400,7 +429,7 @@ async function copyRunId() {
             v-if="v.feedback"
             :text="v.feedback"
             data-testid="companion-verdict-summary"
-            class="mt-1.5 pe-6 text-[12px] leading-relaxed text-slate-300"
+            class="mt-1.5 pe-6 text-[12px] leading-relaxed text-toned"
           />
           <ul v-if="findings.length" class="mt-2 space-y-1.5">
             <li
@@ -419,13 +448,13 @@ async function copyRunId() {
               </UBadge>
               <MarkdownProse
                 :text="finding.body"
-                class="min-w-0 text-[12px] leading-relaxed text-slate-300"
+                class="min-w-0 text-[12px] leading-relaxed text-toned"
               />
             </li>
           </ul>
         </li>
       </ol>
-      <p v-if="companionVerdicts.length > 1" class="mt-1 text-[11px] text-slate-500">
+      <p v-if="companionVerdicts.length > 1" class="mt-1 text-[11px] text-dimmed">
         {{
           t(
             'panels.stepMeta.correctionIterations',