@cat-factory/app 0.302.2 → 0.303.0

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

@@ -29,11 +29,11 @@ const VERDICT_KEYS: Record<EnvironmentProbeVerdict, string> = {
 }
 
 const VERDICT_CLASS: Record<EnvironmentProbeVerdict, string> = {
-  operable: 'text-emerald-300/90',
+  operable: 'text-app-success-300/90',
   // Amber, not rose: the LIFECYCLE succeeded and the finding is partial. Colouring it as a
   // failure would make it read as the run breaking rather than as the diagnostic working.
-  partially_operable: 'text-amber-300/90',
-  inoperable: 'text-rose-300/90',
+  partially_operable: 'text-app-warning-300/90',
+  inoperable: 'text-app-error-300/90',
 }
 
 /**
@@ -64,7 +64,7 @@ const verdictLabel = computed(() => {
   return key && te(key) ? t(key) : props.report.verdict
 })
 
-const verdictClass = computed(() => VERDICT_CLASS[props.report.verdict] ?? 'text-slate-300')
+const verdictClass = computed(() => VERDICT_CLASS[props.report.verdict] ?? 'text-toned')
 
 /** The icon per operation outcome. `not_attempted` is its own mark, never a failure's. */
 function outcomeIcon(outcome: EnvironmentProbeReport['operations'][number]['outcome']): string {
@@ -74,24 +74,21 @@ function outcomeIcon(outcome: EnvironmentProbeReport['operations'][number]['outc
 }
 
 function outcomeClass(outcome: EnvironmentProbeReport['operations'][number]['outcome']): string {
-  if (outcome === 'succeeded') return 'text-emerald-400'
-  if (outcome === 'failed') return 'text-rose-400'
-  return 'text-slate-500'
+  if (outcome === 'succeeded') return 'text-app-success-400'
+  if (outcome === 'failed') return 'text-app-error-400'
+  return 'text-dimmed'
 }
 </script>
 
 <template>
-  <div
-    class="space-y-2 rounded border border-white/5 bg-white/[0.02] p-2"
-    data-testid="env-probe-report"
-  >
+  <div class="space-y-2 rounded border border-default bg-muted p-2" data-testid="env-probe-report">
     <p class="text-[11px] font-medium" :class="verdictClass" data-testid="env-probe-verdict">
       {{ verdictLabel }}
     </p>
 
     <!-- The tallies the PLATFORM computed from the agent's per-operation judgements, including
          how many successes were behind authentication: the count the verdict turns on. -->
-    <p class="text-[11px] text-slate-400">
+    <p class="text-[11px] text-muted">
       {{
         t('inspector.testConfig.envProbe.counts', {
           succeeded: report.succeeded,
@@ -104,21 +101,21 @@ function outcomeClass(outcome: EnvironmentProbeReport['operations'][number]['out
     <!-- What the platform did not tell the agent: the actionable half of the report, so it comes
          before the evidence. -->
     <div v-if="report.missingContext.length" data-testid="env-probe-missing">
-      <p class="text-[11px] font-medium text-amber-300/90">
+      <p class="text-[11px] font-medium text-app-warning-300/90">
         {{ t('inspector.testConfig.envProbe.missingContext') }}
       </p>
-      <ul class="mt-0.5 list-disc space-y-0.5 pl-4 text-[11px] text-slate-300">
+      <ul class="mt-0.5 list-disc space-y-0.5 pl-4 text-[11px] text-toned">
         <li v-for="(line, i) in report.missingContext" :key="i">{{ line }}</li>
       </ul>
     </div>
 
     <div v-if="report.blockers.length" data-testid="env-probe-blockers">
-      <p class="text-[11px] font-medium text-rose-300/90">
+      <p class="text-[11px] font-medium text-app-error-300/90">
         {{ t('inspector.testConfig.envProbe.blockers') }}
       </p>
-      <ul class="mt-0.5 space-y-0.5 text-[11px] text-slate-300">
+      <ul class="mt-0.5 space-y-0.5 text-[11px] text-toned">
         <li v-for="(blocker, i) in report.blockers" :key="i">
-          <span class="text-slate-400">{{ failureLabel(blocker.kind) }}:</span>
+          <span class="text-muted">{{ failureLabel(blocker.kind) }}:</span>
           {{ blocker.detail }}
         </li>
       </ul>
@@ -127,7 +124,7 @@ function outcomeClass(outcome: EnvironmentProbeReport['operations'][number]['out
     <!-- The operations, as evidence for the verdict above. This is the "what was attempted" a dry
          run exists to report: without it a verdict is an opinion. -->
     <div v-if="report.operations.length" data-testid="env-probe-operations">
-      <p class="text-[11px] font-medium text-slate-300">
+      <p class="text-[11px] font-medium text-toned">
         {{ t('inspector.testConfig.envProbe.operations') }}
       </p>
       <ul class="mt-0.5 space-y-1 text-[11px]">
@@ -138,15 +135,15 @@ function outcomeClass(outcome: EnvironmentProbeReport['operations'][number]['out
             :class="outcomeClass(op.outcome)"
           />
           <span class="min-w-0">
-            <span class="text-slate-200">{{ op.name }}</span>
-            <span v-if="op.authenticated" class="ml-1 text-slate-500">
+            <span class="text-default">{{ op.name }}</span>
+            <span v-if="op.authenticated" class="ml-1 text-dimmed">
               {{ t('inspector.testConfig.envProbe.authenticated') }}
             </span>
-            <span v-if="op.target" class="ml-1 font-mono text-slate-500">{{ op.target }}</span>
-            <span v-if="op.failure" class="block text-rose-300/70">
+            <span v-if="op.target" class="ml-1 font-mono text-dimmed">{{ op.target }}</span>
+            <span v-if="op.failure" class="block text-app-error-300/70">
               {{ failureLabel(op.failure) }}<template v-if="op.detail">: {{ op.detail }}</template>
             </span>
-            <span v-else-if="op.detail" class="block text-slate-400">{{ op.detail }}</span>
+            <span v-else-if="op.detail" class="block text-muted">{{ op.detail }}</span>
           </span>
         </li>
       </ul>
@@ -154,12 +151,12 @@ function outcomeClass(outcome: EnvironmentProbeReport['operations'][number]['out
            whole attempt. The two ways an operation fails to reach the list are rendered SEPARATELY
            because they send a reader somewhere different: one says the agent reported more than is
            shown, the other says its reply was malformed. -->
-      <p v-if="report.operationsOmitted" class="mt-1 text-[11px] text-slate-500">
+      <p v-if="report.operationsOmitted" class="mt-1 text-[11px] text-dimmed">
         {{
           t('inspector.testConfig.envProbe.operationsOmitted', { count: report.operationsOmitted })
         }}
       </p>
-      <p v-if="report.operationsUnreadable" class="mt-1 text-[11px] text-slate-500">
+      <p v-if="report.operationsUnreadable" class="mt-1 text-[11px] text-dimmed">
         {{
           t('inspector.testConfig.envProbe.operationsUnreadable', {
             count: report.operationsUnreadable,
@@ -168,8 +165,8 @@ function outcomeClass(outcome: EnvironmentProbeReport['operations'][number]['out
       </p>
     </div>
 
-    <p v-if="report.summary" class="text-[11px] text-slate-400">{{ report.summary }}</p>
-    <p v-if="report.model" class="text-[11px] text-slate-600">
+    <p v-if="report.summary" class="text-[11px] text-muted">{{ report.summary }}</p>
+    <p v-if="report.model" class="text-[11px] text-app-600">
       {{ t('inspector.testConfig.envProbe.model', { model: report.model }) }}
     </p>
   </div>

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

@@ -52,34 +52,30 @@ const groups = computed(() => {
     default-open
   >
     <template #actions>
-      <span class="text-[11px] text-slate-500">{{
+      <span class="text-[11px] text-dimmed">{{
         t('inspector.epicChildren.doneCount', { done, total: members.length })
       }}</span>
     </template>
 
-    <div v-if="members.length === 0" class="text-[11px] text-slate-500">
+    <div v-if="members.length === 0" class="text-[11px] text-dimmed">
       {{ t('inspector.epicChildren.empty') }}
     </div>
 
     <div v-else class="space-y-2">
-      <div
-        v-for="(group, gi) in groups"
-        :key="gi"
-        class="rounded-md border border-slate-700/60 p-2"
-      >
-        <div class="mb-1 flex items-center gap-1 text-[11px] font-medium text-slate-300">
-          <UIcon name="i-lucide-box" class="h-3 w-3 text-slate-500" />
+      <div v-for="(group, gi) in groups" :key="gi" class="rounded-md border border-muted/60 p-2">
+        <div class="mb-1 flex items-center gap-1 text-[11px] font-medium text-toned">
+          <UIcon name="i-lucide-box" class="h-3 w-3 text-dimmed" />
           {{ group.service?.title ?? t('inspector.epicChildren.unassigned') }}
         </div>
         <div v-for="(mod, mi) in [...group.modules.values()]" :key="mi" class="ps-1">
-          <div v-if="mod.module" class="text-[10px] uppercase tracking-wide text-slate-500">
+          <div v-if="mod.module" class="text-[10px] uppercase tracking-wide text-dimmed">
             {{ mod.module.title }}
           </div>
           <button
             v-for="task in mod.tasks"
             :key="task.id"
             type="button"
-            class="flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-start text-xs text-slate-200 hover:bg-slate-800"
+            class="flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-start text-xs text-default hover:bg-elevated"
             @click="ui.select(task.id)"
           >
             <span
@@ -87,7 +83,7 @@ const groups = computed(() => {
               :style="{ backgroundColor: STATUS_META[task.status].color }"
             />
             <span class="truncate">{{ task.title }}</span>
-            <span class="ms-auto shrink-0 text-[10px] text-slate-500">
+            <span class="ms-auto shrink-0 text-[10px] text-dimmed">
               {{ STATUS_META[task.status].label }}
             </span>
           </button>

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

@@ -66,13 +66,13 @@ const rows = computed(() => {
 
 <template>
   <div v-if="rows.length || duplicates.length" class="space-y-1.5" data-testid="frontend-resolved">
-    <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+    <div class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
       {{ t('inspector.frontendConfig.resolved.title') }}
     </div>
 
     <p
       v-if="duplicates.length"
-      class="text-[11px] leading-snug text-amber-300/80"
+      class="text-[11px] leading-snug text-app-warning-300/80"
       data-testid="frontend-resolved-duplicates"
     >
       {{ t('inspector.frontendConfig.resolved.duplicateWarning', { vars: duplicates.join(', ') }) }}
@@ -88,21 +88,21 @@ const rows = computed(() => {
         <span
           class="mt-1 h-1.5 w-1.5 shrink-0 rounded-full"
           :class="{
-            'bg-emerald-400': row.kind === 'live',
-            'bg-amber-400': row.kind === 'service-offline',
-            'bg-slate-500': row.kind === 'mock',
+            'bg-app-success-400': row.kind === 'live',
+            'bg-app-warning-400': row.kind === 'service-offline',
+            'bg-app-500': row.kind === 'mock',
           }"
         />
-        <span class="font-mono text-slate-300">{{ row.envVar }}</span>
-        <span class="text-slate-600">→</span>
+        <span class="font-mono text-toned">{{ row.envVar }}</span>
+        <span class="text-app-600">→</span>
         <template v-if="row.kind === 'live'">
-          <span class="truncate font-mono text-emerald-300/90">{{ row.serviceUrl }}</span>
-          <span v-if="row.serviceTitle" class="text-slate-500">({{ row.serviceTitle }})</span>
+          <span class="truncate font-mono text-app-success-300/90">{{ row.serviceUrl }}</span>
+          <span v-if="row.serviceTitle" class="text-dimmed">({{ row.serviceTitle }})</span>
         </template>
-        <span v-else-if="row.kind === 'service-offline'" class="text-amber-300/80">
+        <span v-else-if="row.kind === 'service-offline'" class="text-app-warning-300/80">
           {{ t('inspector.frontendConfig.resolved.serviceOffline', { service: row.serviceTitle }) }}
         </span>
-        <span v-else class="text-slate-500">
+        <span v-else class="text-dimmed">
           {{ t('inspector.frontendConfig.resolved.mock') }}
         </span>
       </li>

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

@@ -229,13 +229,11 @@ onUnmounted(() => preview.stopPolling(props.block.id))
          persisted until Apply. Only shown when the frame is linked to a repo. -->
     <div
       v-if="repoLink"
-      class="space-y-2 rounded border border-slate-800 bg-slate-900/40 p-2"
+      class="space-y-2 rounded border border-default bg-default/40 p-2"
       data-testid="frontend-detect"
     >
       <div class="flex items-center justify-between gap-2">
-        <span class="text-[11px] text-slate-400">{{
-          t('inspector.frontendConfig.detect.title')
-        }}</span>
+        <span class="text-[11px] text-muted">{{ t('inspector.frontendConfig.detect.title') }}</span>
         <UButton
           size="xs"
           variant="soft"
@@ -248,16 +246,16 @@ onUnmounted(() => preview.stopPolling(props.block.id))
           {{ t('inspector.frontendConfig.detect.button') }}
         </UButton>
       </div>
-      <p class="text-[11px] leading-snug text-slate-500">
+      <p class="text-[11px] leading-snug text-dimmed">
         {{ t('inspector.frontendConfig.detect.hint') }}
       </p>
 
-      <p v-if="detectError" class="text-[11px] text-rose-300/80">
+      <p v-if="detectError" class="text-[11px] text-app-error-300/80">
         {{ detectError }}
       </p>
 
       <template v-if="detectResult && !detecting">
-        <p v-if="!detectResult.detected" class="text-[11px] text-amber-300/80">
+        <p v-if="!detectResult.detected" class="text-[11px] text-app-warning-300/80">
           {{ t('inspector.frontendConfig.detect.none') }}
         </p>
 
@@ -265,9 +263,13 @@ onUnmounted(() => preview.stopPolling(props.block.id))
           <li
             v-for="(n, i) in detectResult.notes"
             :key="i"
-            class="flex items-start gap-1.5 text-[11px] leading-snug text-slate-500"
+            class="flex items-start gap-1.5 text-[11px] leading-snug text-dimmed"
           >
-            <span :class="n.confidence === 'high' ? 'text-emerald-400/70' : 'text-amber-400/70'">
+            <span
+              :class="
+                n.confidence === 'high' ? 'text-app-success-400/70' : 'text-app-warning-400/70'
+              "
+            >
               {{
                 n.confidence === 'high'
                   ? t('inspector.frontendConfig.detect.confidenceHigh')
@@ -308,7 +310,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
     <!-- Build: package manager + frontend directory + install command + build script + output dir -->
     <InspectorSection v-model:open="showBuild" :title="t('inspector.frontendConfig.groups.build')">
       <div class="space-y-1">
-        <span class="text-[11px] text-slate-400">{{
+        <span class="text-[11px] text-muted">{{
           t('inspector.frontendConfig.packageManager')
         }}</span>
         <div class="flex flex-wrap gap-1">
@@ -326,9 +328,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
-          t('inspector.frontendConfig.directory')
-        }}</label>
+        <label class="text-[11px] text-muted">{{ t('inspector.frontendConfig.directory') }}</label>
         <UInput
           :model-value="config.directory ?? ''"
           size="xs"
@@ -340,13 +340,13 @@ onUnmounted(() => preview.stopPolling(props.block.id))
             (e: KeyboardEvent) => saveText('directory', (e.target as HTMLInputElement).value)
           "
         />
-        <p class="text-[11px] leading-snug text-slate-500">
+        <p class="text-[11px] leading-snug text-dimmed">
           {{ t('inspector.frontendConfig.directoryHint') }}
         </p>
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
+        <label class="text-[11px] text-muted">{{
           t('inspector.frontendConfig.installCommand')
         }}</label>
         <UInput
@@ -366,7 +366,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
 
       <div class="grid grid-cols-2 gap-2">
         <div class="space-y-1">
-          <label class="text-[11px] text-slate-400">{{
+          <label class="text-[11px] text-muted">{{
             t('inspector.frontendConfig.buildScript')
           }}</label>
           <UInput
@@ -382,7 +382,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
           />
         </div>
         <div class="space-y-1">
-          <label class="text-[11px] text-slate-400">{{
+          <label class="text-[11px] text-muted">{{
             t('inspector.frontendConfig.outputDir')
           }}</label>
           <UInput
@@ -403,9 +403,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
     <!-- Serve: mode (static vs command) + serve script (command mode) + port -->
     <InspectorSection v-model:open="showServe" :title="t('inspector.frontendConfig.groups.serve')">
       <div class="space-y-1">
-        <span class="text-[11px] text-slate-400">{{
-          t('inspector.frontendConfig.serveMode')
-        }}</span>
+        <span class="text-[11px] text-muted">{{ t('inspector.frontendConfig.serveMode') }}</span>
         <div class="flex flex-wrap gap-1">
           <UButton
             :color="serveMode === 'static' ? 'primary' : 'neutral'"
@@ -425,21 +423,21 @@ onUnmounted(() => preview.stopPolling(props.block.id))
           </UButton>
         </div>
         <!-- Explain each mode, and disambiguate from the separate envInjection axis. -->
-        <p class="text-[11px] leading-snug text-slate-500">
-          <span class="text-slate-400">{{ t('inspector.frontendConfig.serveStatic') }}:</span>
+        <p class="text-[11px] leading-snug text-dimmed">
+          <span class="text-muted">{{ t('inspector.frontendConfig.serveStatic') }}:</span>
           {{ t('inspector.frontendConfig.serveStaticDesc') }}
         </p>
-        <p class="text-[11px] leading-snug text-slate-500">
-          <span class="text-slate-400">{{ t('inspector.frontendConfig.serveCommand') }}:</span>
+        <p class="text-[11px] leading-snug text-dimmed">
+          <span class="text-muted">{{ t('inspector.frontendConfig.serveCommand') }}:</span>
           {{ t('inspector.frontendConfig.serveCommandDesc') }}
         </p>
-        <p class="text-[11px] leading-snug text-slate-500/80">
+        <p class="text-[11px] leading-snug text-dimmed/80">
           {{ t('inspector.frontendConfig.serveEnvAxisNote') }}
         </p>
       </div>
 
       <div v-if="serveMode === 'command'" class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
+        <label class="text-[11px] text-muted">{{
           t('inspector.frontendConfig.serveScript')
         }}</label>
         <UInput
@@ -456,9 +454,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
-          t('inspector.frontendConfig.servePort')
-        }}</label>
+        <label class="text-[11px] text-muted">{{ t('inspector.frontendConfig.servePort') }}</label>
         <UInput
           :model-value="config.servePort != null ? String(config.servePort) : ''"
           type="number"
@@ -479,7 +475,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
       :title="t('inspector.frontendConfig.groups.mocking')"
     >
       <div class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
+        <label class="text-[11px] text-muted">{{
           t('inspector.frontendConfig.mockMappingsPath')
         }}</label>
         <UInput
@@ -495,7 +491,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
             (e: KeyboardEvent) => saveText('mockMappingsPath', (e.target as HTMLInputElement).value)
           "
         />
-        <p class="text-[11px] leading-snug text-slate-500">
+        <p class="text-[11px] leading-snug text-dimmed">
           {{ t('inspector.frontendConfig.mockMappingsHint') }}
         </p>
       </div>
@@ -525,7 +521,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
             {{ t('inspector.frontendConfig.envRuntime') }}
           </UButton>
         </div>
-        <p class="text-[11px] leading-snug text-slate-500">
+        <p class="text-[11px] leading-snug text-dimmed">
           {{ t('inspector.frontendConfig.envInjectionHint') }}
         </p>
       </div>
@@ -578,14 +574,14 @@ onUnmounted(() => preview.stopPolling(props.block.id))
             />
           </div>
         </div>
-        <div v-else class="text-[11px] text-slate-500">
+        <div v-else class="text-[11px] text-dimmed">
           {{ t('inspector.frontendConfig.bindings.empty') }}
         </div>
 
         <!-- How the bindings resolve RIGHT NOW: each env var → a bound service's live ephemeral
              URL, or WireMock — plus the duplicate-env-var warning. The same view a UI-test run
              would resolve against (shared helpers), so what you see is what a run will drive. -->
-        <div class="border-t border-slate-800/60 pt-2">
+        <div class="border-t border-default/60 pt-2">
           <FrontendBindingsResolved :config="config" />
         </div>
       </div>
@@ -607,7 +603,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
               save({ previewEnabled: v === true ? true : undefined })
           "
         />
-        <p class="mt-1 text-[11px] leading-snug text-slate-500">
+        <p class="mt-1 text-[11px] leading-snug text-dimmed">
           {{
             previewSupported
               ? t('inspector.frontendConfig.previewHint')
@@ -621,10 +617,10 @@ onUnmounted(() => preview.stopPolling(props.block.id))
             <span
               class="text-[11px] font-medium"
               :class="{
-                'text-emerald-400': previewStatus === 'ready',
-                'text-amber-400': previewStatus === 'starting',
-                'text-rose-400': previewStatus === 'failed',
-                'text-slate-400': previewStatus === 'stopped',
+                'text-app-success-400': previewStatus === 'ready',
+                'text-app-warning-400': previewStatus === 'starting',
+                'text-app-error-400': previewStatus === 'failed',
+                'text-muted': previewStatus === 'stopped',
               }"
               data-testid="preview-status"
             >
@@ -675,7 +671,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
 
           <p
             v-if="previewStatus === 'failed' && previewState?.error"
-            class="text-[11px] leading-snug text-rose-400"
+            class="text-[11px] leading-snug text-app-error-400"
             data-testid="preview-error"
           >
             {{ previewState.error }}
@@ -683,7 +679,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
 
           <p
             v-if="previewRequestError"
-            class="text-[11px] leading-snug text-rose-400"
+            class="text-[11px] leading-snug text-app-error-400"
             data-testid="preview-request-error"
           >
             {{ previewRequestError }}

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

@@ -52,12 +52,12 @@ function control(action: 'pause' | 'resume' | 'cancel') {
       <UBadge color="primary" variant="subtle" size="sm">
         {{ t(INITIATIVE_STATUS_LABEL_KEYS[status]) }}
       </UBadge>
-      <span v-if="progress" class="text-[11px] text-slate-400">
+      <span v-if="progress" class="text-[11px] text-muted">
         {{ t('initiative.card.progress', { done: progress.settled, total: progress.total }) }}
       </span>
     </div>
 
-    <p v-if="initiative?.goal" class="whitespace-pre-wrap text-[12px] text-slate-300">
+    <p v-if="initiative?.goal" class="whitespace-pre-wrap text-[12px] text-toned">
       {{ initiative.goal }}
     </p>
 
@@ -165,7 +165,7 @@ function control(action: 'pause' | 'resume' | 'cancel') {
       </UButton>
     </div>
 
-    <p class="text-[11px] text-slate-500">
+    <p class="text-[11px] text-dimmed">
       {{ t('initiative.inspector.hint') }}
     </p>
   </div>

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

@@ -24,26 +24,26 @@ if (props.defaultOpen) open.value = true
 </script>
 
 <template>
-  <section class="border-t border-slate-800 pt-2" data-testid="inspector-section">
+  <section class="border-t border-default pt-2" data-testid="inspector-section">
     <div class="flex items-center gap-1.5">
       <button
         type="button"
-        class="flex min-w-0 flex-1 items-center gap-1.5 text-start text-[11px] font-semibold uppercase tracking-wide text-slate-400 hover:text-slate-200"
+        class="flex min-w-0 flex-1 items-center gap-1.5 text-start text-[11px] font-semibold uppercase tracking-wide text-muted hover:text-default"
         :aria-expanded="open"
         data-testid="inspector-section-toggle"
         @click="open = !open"
       >
         <UIcon
           :name="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
-          class="h-3.5 w-3.5 shrink-0 text-slate-500"
+          class="h-3.5 w-3.5 shrink-0 text-dimmed"
         />
         <UIcon v-if="icon" :name="icon" class="h-3.5 w-3.5 shrink-0" />
         <span class="truncate">{{ title }}</span>
-        <span v-if="count" class="font-normal normal-case text-slate-500">({{ count }})</span>
+        <span v-if="count" class="font-normal normal-case text-dimmed">({{ count }})</span>
         <UIcon
           v-if="warning"
           name="i-lucide-triangle-alert"
-          class="h-3.5 w-3.5 shrink-0 text-amber-400"
+          class="h-3.5 w-3.5 shrink-0 text-app-warning-400"
         />
       </button>
       <!-- An action ("+", attach, menu) mutates the body list, so expand (never collapse)
@@ -53,7 +53,7 @@ if (props.defaultOpen) open.value = true
       </div>
     </div>
     <div v-if="open" class="mt-2 space-y-3">
-      <p v-if="hint" class="text-[11px] leading-snug text-slate-500">{{ hint }}</p>
+      <p v-if="hint" class="text-[11px] leading-snug text-dimmed">{{ hint }}</p>
       <slot />
     </div>
   </section>

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

@@ -103,10 +103,10 @@ async function runNow() {
 }
 
 const RUN_COLOR: Record<string, string> = {
-  running: 'text-amber-400',
-  done: 'text-emerald-400',
-  failed: 'text-rose-400',
-  skipped: 'text-slate-500',
+  running: 'text-app-warning-400',
+  done: 'text-app-success-400',
+  failed: 'text-app-error-400',
+  skipped: 'text-dimmed',
 }
 const RUN_STATUS_KEYS: Record<string, string> = {
   running: 'inspector.recurring.runStatus.running',
@@ -123,13 +123,10 @@ function fmtTime(ms: number) {
 </script>
 
 <template>
-  <div
-    v-if="schedule"
-    class="space-y-2 rounded-lg border border-indigo-900/50 bg-indigo-950/20 p-3"
-  >
+  <div v-if="schedule" class="space-y-2 rounded-lg border border-primary/50 bg-primary/10 p-3">
     <div class="flex items-center justify-between">
       <span
-        class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-indigo-300"
+        class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-primary"
       >
         <UIcon name="i-lucide-repeat" class="h-3.5 w-3.5" />
         {{ t('inspector.recurring.title') }}
@@ -149,13 +146,13 @@ function fmtTime(ms: number) {
       </UBadge>
     </div>
 
-    <p class="text-[11px] text-slate-400">
-      <span class="text-slate-300">{{ pipelineName }}</span>
+    <p class="text-[11px] text-muted">
+      <span class="text-toned">{{ pipelineName }}</span>
     </p>
 
     <!-- On-demand: no cadence, no pause/resume — it fires only when a person triggers it. -->
     <template v-if="schedule.onDemand">
-      <p class="text-[11px] text-slate-500">{{ t('inspector.recurring.onDemandHint') }}</p>
+      <p class="text-[11px] text-dimmed">{{ t('inspector.recurring.onDemandHint') }}</p>
       <div class="flex flex-wrap gap-1.5 pt-1">
         <UButton size="xs" variant="soft" icon="i-lucide-play" :loading="busy" @click="runNow">
           {{ t('inspector.recurring.runNow') }}
@@ -164,8 +161,8 @@ function fmtTime(ms: number) {
     </template>
 
     <template v-else-if="!editing">
-      <p class="text-[11px] text-slate-400">{{ describeCadence(schedule.recurrence) }}</p>
-      <p class="text-[11px] text-slate-500">
+      <p class="text-[11px] text-muted">{{ describeCadence(schedule.recurrence) }}</p>
+      <p class="text-[11px] text-dimmed">
         {{ t('inspector.recurring.nextRun', { time: fmtTime(schedule.nextRunAt) }) }}
       </p>
       <div class="flex flex-wrap gap-1.5 pt-1">
@@ -215,16 +212,16 @@ function fmtTime(ms: number) {
     </template>
 
     <!-- run history -->
-    <div v-if="runs.length" class="space-y-1 border-t border-slate-800 pt-2">
-      <span class="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
+    <div v-if="runs.length" class="space-y-1 border-t border-default pt-2">
+      <span class="text-[10px] font-semibold uppercase tracking-wide text-dimmed">
         {{ t('inspector.recurring.recentRuns') }}
       </span>
       <div v-for="run in runs" :key="run.id" class="flex items-center gap-2 text-[11px]">
-        <span :class="RUN_COLOR[run.status] ?? 'text-slate-400'" class="w-14 shrink-0">
+        <span :class="RUN_COLOR[run.status] ?? 'text-muted'" class="w-14 shrink-0">
           {{ runStatusLabel(run.status) }}
         </span>
-        <span class="truncate text-slate-500">{{ fmtTime(run.startedAt) }}</span>
-        <span v-if="run.outcome" class="ms-auto truncate text-slate-500">{{ run.outcome }}</span>
+        <span class="truncate text-dimmed">{{ fmtTime(run.startedAt) }}</span>
+        <span v-if="run.outcome" class="ms-auto truncate text-dimmed">{{ run.outcome }}</span>
       </div>
     </div>
   </div>

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

@@ -135,12 +135,12 @@ const usedBy = computed(() =>
         />
       </div>
     </div>
-    <div v-else class="text-[11px] text-slate-500">
+    <div v-else class="text-[11px] text-dimmed">
       {{ t('inspector.serviceConnections.empty') }}
     </div>
 
     <div v-if="usedBy.length" class="space-y-1" data-testid="service-connections-used-by">
-      <span class="text-[11px] text-slate-400">{{ t('inspector.serviceConnections.usedBy') }}</span>
+      <span class="text-[11px] text-muted">{{ t('inspector.serviceConnections.usedBy') }}</span>
       <div class="flex flex-wrap gap-1">
         <UBadge v-for="f in usedBy" :key="f.id" size="sm" variant="soft" color="neutral">
           {{ f.title || f.id }}