@cat-factory/app 0.302.2 → 0.303.0

package/app/components/panels/StepReproductionReport.vue

@@ -51,18 +51,18 @@ function phaseLabel(outcome: ReproductionPhaseOutcome): string {
     class="space-y-2"
     data-testid="step-reproduction-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="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+      class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted"
     >
       <UIcon :name="presentation.icon" class="h-3.5 w-3.5" />
       <span>{{ t('panels.stepDetail.reproduction.heading') }}</span>
     </div>
 
-    <p class="text-[11px] text-slate-400" data-testid="reproduction-verdict">
+    <p class="text-[11px] text-muted" data-testid="reproduction-verdict">
       {{ t(presentation.verdict) }}
     </p>
 
@@ -70,27 +70,31 @@ function phaseLabel(outcome: ReproductionPhaseOutcome): string {
          trees can tell a test that misses the defect from a resumed run whose pre-fix tree already
          carried this step's own interrupted work, so re-deriving a cause from the exit codes here
          is exactly the inference that gets it wrong. -->
-    <p v-if="report.note" class="text-[11px] text-amber-300" data-testid="reproduction-observation">
+    <p
+      v-if="report.note"
+      class="text-[11px] text-app-warning-300"
+      data-testid="reproduction-observation"
+    >
       {{ report.note }}
     </p>
 
     <!-- A structural infeasibility declaration: the reason, and what the agent verified instead.
          This is what keeps "could not be reproduced" from looking like "nobody tried". -->
     <template v-if="report.status === 'declared_infeasible'">
-      <div v-if="report.reason" class="rounded-md border border-slate-800 bg-slate-950/40 p-2">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+      <div v-if="report.reason" class="rounded-md border border-default bg-app-950/40 p-2">
+        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
           {{ t('panels.stepDetail.reproduction.reason') }}
         </p>
-        <p class="mt-1 whitespace-pre-wrap text-[12px] text-slate-300">{{ report.reason }}</p>
+        <p class="mt-1 whitespace-pre-wrap text-[12px] text-toned">{{ report.reason }}</p>
       </div>
       <div
         v-if="report.alternativeVerification"
-        class="rounded-md border border-slate-800 bg-slate-950/40 p-2"
+        class="rounded-md border border-default bg-app-950/40 p-2"
       >
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
           {{ t('panels.stepDetail.reproduction.alternative') }}
         </p>
-        <p class="mt-1 whitespace-pre-wrap text-[12px] text-slate-300">
+        <p class="mt-1 whitespace-pre-wrap text-[12px] text-toned">
           {{ report.alternativeVerification }}
         </p>
       </div>
@@ -98,17 +102,17 @@ function phaseLabel(outcome: ReproductionPhaseOutcome): string {
 
     <template v-else>
       <div v-if="report.command" class="flex items-baseline gap-2">
-        <span class="shrink-0 text-[11px] text-slate-500">{{
+        <span class="shrink-0 text-[11px] text-dimmed">{{
           t('panels.stepDetail.reproduction.command')
         }}</span>
-        <span class="truncate font-mono text-[11px] text-slate-300">{{ report.command }}</span>
+        <span class="truncate font-mono text-[11px] text-toned">{{ report.command }}</span>
       </div>
 
       <!-- A dropped path can leave the pre-fix tree without the reproduction, which greens it and
            reads as "the test does not capture the defect". Stated, never implied. -->
       <p
         v-if="report.omittedTestPaths"
-        class="text-[11px] text-amber-300"
+        class="text-[11px] text-app-warning-300"
         data-testid="reproduction-omitted-paths"
       >
         {{
@@ -123,7 +127,7 @@ function phaseLabel(outcome: ReproductionPhaseOutcome): string {
       <div
         v-for="phase in phases"
         :key="phase.key"
-        class="rounded-md border border-slate-800 bg-slate-950/40 p-2"
+        class="rounded-md border border-default bg-app-950/40 p-2"
         data-testid="reproduction-phase"
       >
         <div class="flex items-center gap-2">
@@ -133,15 +137,15 @@ function phaseLabel(outcome: ReproductionPhaseOutcome): string {
             :class="
               phase.outcome
                 ? phase.outcome.passed
-                  ? 'text-emerald-400'
-                  : 'text-rose-400'
-                : 'text-slate-600'
+                  ? 'text-app-success-400'
+                  : 'text-app-error-400'
+                : 'text-app-600'
             "
           />
-          <span class="text-[12px] font-medium text-slate-200">
+          <span class="text-[12px] font-medium text-default">
             {{ t(phase.label) }}
           </span>
-          <span class="ms-auto shrink-0 text-[11px] tabular-nums text-slate-400">
+          <span class="ms-auto shrink-0 text-[11px] tabular-nums text-muted">
             {{
               phase.outcome ? phaseLabel(phase.outcome) : t('panels.stepDetail.reproduction.notRun')
             }}
@@ -149,12 +153,12 @@ function phaseLabel(outcome: ReproductionPhaseOutcome): string {
         </div>
         <pre
           v-if="phase.outcome?.outputTail"
-          class="mt-1.5 max-h-48 overflow-auto whitespace-pre-wrap break-words rounded bg-slate-950 p-2 font-mono text-[11px] text-slate-400"
+          class="mt-1.5 max-h-48 overflow-auto whitespace-pre-wrap break-words rounded bg-app-950 p-2 font-mono text-[11px] text-muted"
           data-testid="reproduction-output"
           >{{ phase.outcome.outputTail }}</pre>
       </div>
 
-      <p class="text-[11px] text-slate-500">
+      <p class="text-[11px] text-dimmed">
         {{
           t('panels.stepDetail.reproduction.attempts', {
             attempts: report.attempts,

package/app/components/panels/StepRunMeta.vue

@@ -57,26 +57,26 @@ async function copyRunId() {
 <template>
   <div class="flex flex-col gap-4">
     <div v-if="stepNumber && totalSteps">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
         {{ t('panels.stepMeta.step') }}
       </h4>
-      <p class="text-[12px] text-slate-300">
+      <p class="text-[12px] text-toned">
         {{ t('panels.stepMeta.stepOf', { number: stepNumber, total: totalSteps }) }}
       </p>
     </div>
 
     <div v-if="durationLabel">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
         {{ t('panels.stepMeta.duration') }}
       </h4>
-      <p class="flex items-center gap-1.5 text-[12px] tabular-nums text-slate-300">
+      <p class="flex items-center gap-1.5 text-[12px] tabular-nums text-toned">
         <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"
         />
         {{ durationLabel }}
-        <span v-if="isRunning" class="text-[11px] text-slate-500">{{
+        <span v-if="isRunning" class="text-[11px] text-dimmed">{{
           t('panels.stepMeta.elapsed')
         }}</span>
       </p>
@@ -86,54 +86,54 @@ async function copyRunId() {
          the elapsed clock above — a long, quiet phase keeps this small while elapsed climbs, so a
          genuinely-active-but-quiet run reads apart from a wedged one. Only while actively running. -->
     <div v-if="isRunning && activityAgoLabel" data-testid="step-activity">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
         {{ t('panels.stepMeta.activity') }}
       </h4>
-      <p class="flex items-center gap-1.5 text-[12px] tabular-nums text-slate-300">
-        <span class="h-1.5 w-1.5 rounded-full bg-emerald-400" />
+      <p class="flex items-center gap-1.5 text-[12px] tabular-nums text-toned">
+        <span class="h-1.5 w-1.5 rounded-full bg-app-success-400" />
         {{ t('panels.stepMeta.activityAgo', { duration: activityAgoLabel }) }}
       </p>
     </div>
 
     <div v-if="formatClock(step.startedAt)">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
         {{ t('panels.stepMeta.started') }}
       </h4>
-      <p class="text-[12px] text-slate-300">{{ formatClock(step.startedAt) }}</p>
+      <p class="text-[12px] text-toned">{{ formatClock(step.startedAt) }}</p>
     </div>
 
     <div v-if="formatClock(step.finishedAt)">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
         {{ t('panels.stepMeta.finished') }}
       </h4>
-      <p class="text-[12px] text-slate-300">{{ formatClock(step.finishedAt) }}</p>
+      <p class="text-[12px] text-toned">{{ formatClock(step.finishedAt) }}</p>
     </div>
 
     <div v-if="step.model">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
         {{ t('panels.stepMeta.model') }}
       </h4>
-      <p class="break-all text-[12px] text-slate-300" :title="step.model">
+      <p class="break-all text-[12px] text-toned" :title="step.model">
         {{ modelLabel ?? step.model }}
       </p>
     </div>
 
     <div v-if="promptVariant">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
         {{ t('panels.stepMeta.promptVariant') }}
       </h4>
-      <p class="break-all text-[12px] text-slate-300">{{ promptVariant.label }}</p>
-      <p v-if="promptVariant.note" class="mt-0.5 text-[11px] text-amber-400/80">
+      <p class="break-all text-[12px] text-toned">{{ promptVariant.label }}</p>
+      <p v-if="promptVariant.note" class="mt-0.5 text-[11px] text-app-warning-400/80">
         {{ promptVariant.note }}
       </p>
     </div>
 
     <div v-if="runId">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
         {{ t('panels.stepMeta.run') }}
       </h4>
       <p
-        class="cursor-pointer break-all font-mono text-[12px] text-slate-400 hover:text-slate-200"
+        class="cursor-pointer break-all font-mono text-[12px] text-muted hover:text-default"
         :title="t('panels.stepMeta.clickToCopy', { id: runId })"
         @click="copyRunId"
       >

package/app/components/panels/StepTestReport.logic.spec.ts

@@ -15,11 +15,16 @@ const LABELS: Record<RequirementVerdictStatus, string> = {
 
 describe('resolveVerdictMeta', () => {
   it('resolves each known status to its own label and colour', () => {
-    expect(resolveVerdictMeta('met', LABELS)).toEqual({ label: 'Met', color: '#22c55e' })
-    expect(resolveVerdictMeta('not_met', LABELS)).toEqual({ label: 'Not met', color: '#ef4444' })
+    // A verdict is a status, so its dot takes the semantic alias: it recolours with the theme
+    // and stays distinct from the category hues an agent kind wears.
+    expect(resolveVerdictMeta('met', LABELS)).toEqual({ label: 'Met', color: 'var(--ui-success)' })
+    expect(resolveVerdictMeta('not_met', LABELS)).toEqual({
+      label: 'Not met',
+      color: 'var(--ui-error)',
+    })
     expect(resolveVerdictMeta('not_covered', LABELS)).toEqual({
       label: 'Not checked',
-      color: '#64748b',
+      color: 'var(--ui-text-muted)',
     })
   })
 

package/app/components/panels/StepTestReport.logic.ts

@@ -20,13 +20,13 @@ export interface VerdictMeta {
  * exists to prevent. Amber is the same "attention, but not a failure" tone the panel's severity
  * scale already uses for `medium`.
  */
-export const UNKNOWN_VERDICT_COLOR = '#f59e0b'
+export const UNKNOWN_VERDICT_COLOR = 'var(--ui-warning)'
 
 /** Dot colour per known verdict. Exhaustive over the closed union (drift guard tier 2). */
 export const VERDICT_COLORS: Record<RequirementVerdictStatus, string> = {
-  met: '#22c55e',
-  not_met: '#ef4444',
-  not_covered: '#64748b',
+  met: 'var(--ui-success)',
+  not_met: 'var(--ui-error)',
+  not_covered: 'var(--ui-text-muted)',
 }
 
 /**

package/app/components/panels/StepTestReport.vue

@@ -14,15 +14,15 @@ defineProps<{
 const { t } = useI18n()
 
 const SEVERITY_COLOR: Record<string, string> = {
-  low: '#64748b',
-  medium: '#f59e0b',
-  high: '#f97316',
-  critical: '#ef4444',
+  low: 'var(--ui-text-muted)',
+  medium: 'var(--ui-warning)',
+  high: 'var(--app-hue-orange)',
+  critical: 'var(--ui-error)',
 }
 const OUTCOME_COLOR: Record<string, string> = {
-  passed: '#22c55e',
-  failed: '#ef4444',
-  skipped: '#64748b',
+  passed: 'var(--ui-success)',
+  failed: 'var(--ui-error)',
+  skipped: 'var(--ui-text-muted)',
 }
 
 // Per-spec-requirement verdict labels, keyed by the requirement id the service's in-repo `spec/`
@@ -44,8 +44,8 @@ function verdictMeta(status: RequirementVerdictStatus): VerdictMeta {
 <template>
   <section class="mt-4 scroll-mt-4">
     <div class="mb-2 flex items-center gap-1.5 text-[11px]">
-      <UIcon name="i-lucide-flask-conical" class="h-3.5 w-3.5 text-slate-400" />
-      <span class="font-semibold uppercase tracking-wide text-slate-400">
+      <UIcon name="i-lucide-flask-conical" class="h-3.5 w-3.5 text-muted" />
+      <span class="font-semibold uppercase tracking-wide text-muted">
         {{ t('panels.testReport.title') }}
       </span>
       <UBadge :color="report.greenlight ? 'success' : 'warning'" variant="subtle" size="sm">
@@ -53,7 +53,7 @@ function verdictMeta(status: RequirementVerdictStatus): VerdictMeta {
           report.greenlight ? t('panels.testReport.greenlit') : t('panels.testReport.needsFixes')
         }}
       </UBadge>
-      <span v-if="phase && phase.attempts > 0" class="text-[11px] text-slate-500">
+      <span v-if="phase && phase.attempts > 0" class="text-[11px] text-dimmed">
         {{ t('panels.testReport.fixAttempts', { count: phase.attempts, max: phase.maxAttempts })
         }}<span v-if="phase.phase === 'fixing'"> {{ t('panels.testReport.fixing') }}</span>
       </span>
@@ -61,25 +61,25 @@ function verdictMeta(status: RequirementVerdictStatus): VerdictMeta {
     <MarkdownProse
       v-if="report.summary"
       :text="report.summary"
-      class="mb-3 text-[13px] leading-relaxed text-slate-300"
+      class="mb-3 text-[13px] leading-relaxed text-toned"
     />
 
     <div v-if="report.tested.length" class="mb-3">
-      <div class="mb-1 text-[11px] text-slate-500">{{ t('panels.testReport.tested') }}</div>
-      <ul class="space-y-0.5 text-[12px] text-slate-300">
+      <div class="mb-1 text-[11px] text-dimmed">{{ t('panels.testReport.tested') }}</div>
+      <ul class="space-y-0.5 text-[12px] text-toned">
         <li v-for="(item, i) in report.tested" :key="i">• {{ item }}</li>
       </ul>
     </div>
 
     <div v-if="report.outcomes.length" class="mb-3 space-y-1">
-      <div class="text-[11px] text-slate-500">{{ t('panels.testReport.outcomes') }}</div>
+      <div class="text-[11px] text-dimmed">{{ t('panels.testReport.outcomes') }}</div>
       <div v-for="(o, i) in report.outcomes" :key="i" class="flex items-start gap-2 text-[12px]">
         <span
           class="mt-1 h-2 w-2 shrink-0 rounded-full"
-          :style="{ backgroundColor: OUTCOME_COLOR[o.status] ?? '#64748b' }"
+          :style="{ backgroundColor: OUTCOME_COLOR[o.status] ?? 'var(--ui-text-muted)' }"
         />
-        <span class="text-slate-300"
-          >{{ o.name }}<span v-if="o.detail" class="text-slate-500"> — {{ o.detail }}</span></span
+        <span class="text-toned"
+          >{{ o.name }}<span v-if="o.detail" class="text-dimmed"> — {{ o.detail }}</span></span
         >
       </div>
     </div>
@@ -91,7 +91,7 @@ function verdictMeta(status: RequirementVerdictStatus): VerdictMeta {
       class="mb-3 space-y-1"
       data-testid="test-report-requirement-verdicts"
     >
-      <div class="text-[11px] text-slate-500">
+      <div class="text-[11px] text-dimmed">
         {{ t('panels.testReport.requirementVerdicts.title') }}
       </div>
       <div
@@ -103,30 +103,30 @@ function verdictMeta(status: RequirementVerdictStatus): VerdictMeta {
           class="mt-1 h-2 w-2 shrink-0 rounded-full"
           :style="{ backgroundColor: verdictMeta(verdict.status).color }"
         />
-        <span class="text-slate-300">
-          <span class="font-mono text-[11px] text-slate-400">{{ verdict.requirementId }}</span>
-          <span class="text-slate-500"> — {{ verdictMeta(verdict.status).label }}</span>
-          <span v-if="verdict.detail" class="text-slate-500"> · {{ verdict.detail }}</span>
+        <span class="text-toned">
+          <span class="font-mono text-[11px] text-muted">{{ verdict.requirementId }}</span>
+          <span class="text-dimmed"> — {{ verdictMeta(verdict.status).label }}</span>
+          <span v-if="verdict.detail" class="text-dimmed"> · {{ verdict.detail }}</span>
         </span>
       </div>
     </div>
 
     <div v-if="report.concerns.length" class="space-y-1">
-      <div class="text-[11px] text-slate-500">{{ t('panels.testReport.concerns') }}</div>
+      <div class="text-[11px] text-dimmed">{{ t('panels.testReport.concerns') }}</div>
       <div
         v-for="(c, i) in report.concerns"
         :key="i"
-        class="rounded border border-slate-700/60 p-2 text-[12px]"
+        class="rounded border border-muted/60 p-2 text-[12px]"
       >
         <div class="flex items-center gap-1.5">
           <span
-            class="rounded px-1 text-[10px] font-semibold uppercase text-white"
-            :style="{ backgroundColor: SEVERITY_COLOR[c.severity] ?? '#64748b' }"
+            class="rounded px-1 text-[10px] font-semibold uppercase text-highlighted"
+            :style="{ backgroundColor: SEVERITY_COLOR[c.severity] ?? 'var(--ui-text-muted)' }"
             >{{ c.severity }}</span
           >
-          <span class="font-medium text-slate-200">{{ c.title }}</span>
+          <span class="font-medium text-default">{{ c.title }}</span>
         </div>
-        <MarkdownProse v-if="c.detail" :text="c.detail" class="mt-1 text-slate-400" />
+        <MarkdownProse v-if="c.detail" :text="c.detail" class="mt-1 text-muted" />
       </div>
     </div>
   </section>

package/app/components/panels/StepToolServers.vue

@@ -107,10 +107,10 @@ const drops = computed(() =>
   <section
     v-if="hasAny"
     data-testid="step-tool-servers"
-    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-plug" class="h-3.5 w-3.5" />
       <span>{{ t('panels.stepDetail.toolServers.heading') }}</span>
@@ -119,7 +119,7 @@ const drops = computed(() =>
     <p
       v-if="dispatchedAs"
       data-testid="step-tool-servers-dispatched-as"
-      class="mb-2 text-[12px] text-slate-400"
+      class="mb-2 text-[12px] text-muted"
     >
       {{ t('panels.stepDetail.toolServers.dispatchedAs', { agent: dispatchedAs }) }}
     </p>
@@ -133,8 +133,8 @@ const drops = computed(() =>
         class="inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[12px]"
         :class="
           server.isFault
-            ? 'border-amber-500/30 bg-amber-500/10 text-amber-200'
-            : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-200'
+            ? 'border-app-warning-500/30 bg-app-warning-500/10 text-app-warning-200'
+            : 'border-app-success-500/30 bg-app-success-500/10 text-app-success-200'
         "
         :title="
           server.tools?.length
@@ -171,7 +171,7 @@ const drops = computed(() =>
         v-for="server in unattributed"
         :key="server.id"
         data-testid="step-tool-server-unattributed"
-        class="flex items-start gap-1.5 text-[12px] text-slate-400"
+        class="flex items-start gap-1.5 text-[12px] text-muted"
       >
         <UIcon name="i-lucide-circle-help" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
         <span>{{
@@ -185,12 +185,15 @@ const drops = computed(() =>
         v-for="server in drops"
         :key="server.id"
         data-testid="step-tool-server-unavailable"
-        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-plug-zap" class="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-400/80" />
+        <UIcon
+          name="i-lucide-plug-zap"
+          class="mt-0.5 h-3.5 w-3.5 shrink-0 text-app-warning-400/80"
+        />
         <span>
-          <span class="font-medium text-slate-200">{{ server.label || server.id }}</span>
-          <span class="text-slate-400"> {{ server.reasonText }}</span>
+          <span class="font-medium text-default">{{ server.label || server.id }}</span>
+          <span class="text-muted"> {{ server.reasonText }}</span>
           <!--
             Absent for a reason this build no longer recognises: it knows the code was recorded and
             not what it meant, so there is no surface it can honestly send an operator to.
@@ -198,7 +201,7 @@ const drops = computed(() =>
           <span
             v-if="server.remedy"
             data-testid="step-tool-server-remedy"
-            class="mt-0.5 block text-slate-500"
+            class="mt-0.5 block text-dimmed"
             >{{ server.remedy }}</span
           >
         </span>

package/app/components/panels/StepValidationReport.vue

@@ -15,7 +15,7 @@ const failed = computed(() => props.report.outcomes.filter((o) => !o.passed))
 
 <template>
   <div class="space-y-2" data-testid="step-validation-report">
-    <p class="text-[11px] text-slate-400">
+    <p class="text-[11px] text-muted">
       {{
         report.passed
           ? t('panels.stepDetail.validation.passedSummary', {
@@ -34,20 +34,20 @@ const failed = computed(() => props.report.outcomes.filter((o) => !o.passed))
     <div
       v-for="outcome in report.outcomes"
       :key="outcome.label"
-      class="rounded-md border border-slate-800 bg-slate-950/40 p-2"
+      class="rounded-md border border-default bg-app-950/40 p-2"
       data-testid="validation-outcome"
     >
       <div class="flex items-center gap-2">
         <UIcon
           :name="outcome.passed ? 'i-lucide-check' : 'i-lucide-x'"
           class="h-3.5 w-3.5 shrink-0"
-          :class="outcome.passed ? 'text-emerald-400' : 'text-rose-400'"
+          :class="outcome.passed ? 'text-app-success-400' : 'text-app-error-400'"
         />
-        <span class="text-[12px] font-medium text-slate-200">{{ outcome.label }}</span>
-        <span class="truncate font-mono text-[11px] text-slate-500">{{ outcome.command }}</span>
+        <span class="text-[12px] font-medium text-default">{{ outcome.label }}</span>
+        <span class="truncate font-mono text-[11px] text-dimmed">{{ outcome.command }}</span>
         <span
           v-if="!outcome.passed"
-          class="ms-auto shrink-0 rounded bg-rose-500/15 px-1.5 py-0.5 text-[11px] tabular-nums text-rose-300"
+          class="ms-auto shrink-0 rounded bg-app-error-500/15 px-1.5 py-0.5 text-[11px] tabular-nums text-app-error-300"
         >
           {{
             outcome.timedOut
@@ -58,7 +58,7 @@ const failed = computed(() => props.report.outcomes.filter((o) => !o.passed))
       </div>
       <pre
         v-if="outcome.outputTail"
-        class="mt-1.5 max-h-48 overflow-auto whitespace-pre-wrap break-words rounded bg-slate-950 p-2 font-mono text-[11px] text-slate-400"
+        class="mt-1.5 max-h-48 overflow-auto whitespace-pre-wrap break-words rounded bg-app-950 p-2 font-mono text-[11px] text-muted"
         data-testid="validation-output"
         >{{ outcome.outputTail }}</pre>
     </div>

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

@@ -36,12 +36,12 @@ function addTask() {
       <li
         v-for="m in modules"
         :key="m.id"
-        class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 hover:bg-slate-800/60"
+        class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 hover:bg-elevated/60"
         @click="ui.select(m.id)"
       >
-        <UIcon name="i-lucide-package" class="h-3.5 w-3.5 text-violet-400" />
-        <span class="truncate text-xs text-slate-200">{{ m.title }}</span>
-        <span class="ms-auto text-[10px] text-slate-500">{{
+        <UIcon name="i-lucide-package" class="h-3.5 w-3.5 text-app-secondary-400" />
+        <span class="truncate text-xs text-default">{{ m.title }}</span>
+        <span class="ms-auto text-[10px] text-dimmed">{{
           t(
             'inspector.container.taskCount',
             { count: board.tasksOf(m.id).length },
@@ -68,19 +68,19 @@ function addTask() {
       <li
         v-for="task in tasks"
         :key="task.id"
-        class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 hover:bg-slate-800/60"
+        class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 hover:bg-elevated/60"
         @click="ui.select(task.id)"
       >
         <span
           class="h-2 w-2 shrink-0 rounded-full"
           :style="{ backgroundColor: STATUS_META[task.status].color }"
         />
-        <span class="truncate text-xs text-slate-200">{{ task.title }}</span>
-        <span class="ms-auto text-[10px] text-slate-500">{{ STATUS_META[task.status].label }}</span>
+        <span class="truncate text-xs text-default">{{ task.title }}</span>
+        <span class="ms-auto text-[10px] text-dimmed">{{ STATUS_META[task.status].label }}</span>
       </li>
     </ul>
-    <div v-else class="text-[11px] text-slate-500">{{ t('inspector.container.noTasks') }}</div>
-    <p v-if="isFrame" class="text-[11px] text-slate-500">
+    <div v-else class="text-[11px] text-dimmed">{{ t('inspector.container.noTasks') }}</div>
+    <p v-if="isFrame" class="text-[11px] text-dimmed">
       {{ t('inspector.container.servicesHint') }}
     </p>
   </InspectorSection>

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

@@ -83,7 +83,7 @@ function detach(repoId: number) {
 <template>
   <div data-testid="doc-reference-repos">
     <div class="mb-1 flex items-center justify-between">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+      <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
         {{ t('inspector.referenceRepos.title') }}
       </span>
     </div>
@@ -133,11 +133,11 @@ function detach(repoId: number) {
         />
       </template>
     </UInputMenu>
-    <div v-else class="text-[11px] text-slate-500">
+    <div v-else class="text-[11px] text-dimmed">
       {{ t('inspector.referenceRepos.connectFirst') }}
     </div>
 
-    <div class="mt-1 text-[11px] text-slate-500">
+    <div class="mt-1 text-[11px] text-dimmed">
       {{ t('inspector.referenceRepos.hint') }}
     </div>
   </div>