@cat-factory/app 0.302.2 → 0.303.1

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

@@ -114,7 +114,7 @@ async function clear() {
     <!-- Disabled affordance until an observability integration is connected. -->
     <div
       v-if="!connected"
-      class="flex items-center justify-between gap-2 rounded-md border border-slate-800 bg-slate-900/60 px-2 py-1.5 text-[11px] text-slate-400"
+      class="flex items-center justify-between gap-2 rounded-md border border-default bg-default/60 px-2 py-1.5 text-[11px] text-muted"
     >
       <span>{{ t('inspector.releaseHealth.connectPrompt') }}</span>
       <UButton
@@ -130,7 +130,7 @@ async function clear() {
     </div>
 
     <div v-else class="space-y-2">
-      <p class="text-[11px] text-slate-500">
+      <p class="text-[11px] text-dimmed">
         {{ t('inspector.releaseHealth.hint') }}
       </p>
       <div class="grid grid-cols-2 gap-2">

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

@@ -185,20 +185,20 @@ async function stop(mode: EnvironmentTestMode) {
 </script>
 
 <template>
-  <div class="mt-3 space-y-3 border-t border-white/5 pt-3" data-testid="env-test-section">
+  <div class="mt-3 space-y-3 border-t border-default pt-3" data-testid="env-test-section">
     <!-- The precondition both self-tests share, stated once at the top: with no provision type
          there is no environment to stand up and therefore nothing for an agent to drive either. -->
-    <p v-if="!canTest" class="text-[11px] text-slate-500">
+    <p v-if="!canTest" class="text-[11px] text-dimmed">
       {{ t('inspector.testConfig.envTest.infraless') }}
     </p>
 
     <!-- 1. The provisioning self-test: the whole lifecycle against a throwaway branch. -->
     <div class="flex items-center justify-between gap-2">
       <div class="min-w-0">
-        <p class="text-[11px] font-medium text-slate-300">
+        <p class="text-[11px] font-medium text-toned">
           {{ t('inspector.testConfig.envTest.title') }}
         </p>
-        <p class="text-[11px] text-slate-400">{{ t('inspector.testConfig.envTest.hint') }}</p>
+        <p class="text-[11px] text-muted">{{ t('inspector.testConfig.envTest.hint') }}</p>
       </div>
       <UButton
         v-if="!isRunning('provision')"
@@ -230,9 +230,9 @@ async function stop(mode: EnvironmentTestMode) {
       v-if="provisionRun"
       class="text-[11px]"
       :class="{
-        'text-sky-300/80': provisionRun.status === 'running',
-        'text-emerald-300/80': provisionRun.status === 'succeeded',
-        'text-rose-300/80': provisionRun.status === 'failed',
+        'text-app-info-300/80': provisionRun.status === 'running',
+        'text-app-success-300/80': provisionRun.status === 'succeeded',
+        'text-app-error-300/80': provisionRun.status === 'failed',
       }"
       data-testid="env-test-status"
     >
@@ -247,13 +247,17 @@ async function stop(mode: EnvironmentTestMode) {
         <template v-if="provisionRun.failedStage">
           ({{ stageLabel(provisionRun.failedStage) }})
         </template>
-        <span v-if="provisionRun.error" class="block text-rose-300/70">
+        <span v-if="provisionRun.error" class="block text-app-error-300/70">
           {{ provisionRun.error }}
         </span>
       </template>
     </p>
 
-    <div v-if="errors.provision" class="text-[11px] text-rose-400" data-testid="env-test-error">
+    <div
+      v-if="errors.provision"
+      class="text-[11px] text-app-error-400"
+      data-testid="env-test-error"
+    >
       <p>{{ errors.provision.text }}</p>
       <!-- Only the not-provisionable handler case is one-click fixable: jump to Infrastructure →
            Test environments, where the workspace's per-type environment handler is registered. -->
@@ -273,12 +277,12 @@ async function stop(mode: EnvironmentTestMode) {
 
     <!-- 2. The agent dry run: the same lifecycle plus a prober, reporting what an agent could
          and could not do with the environment it was handed. -->
-    <div class="flex items-center justify-between gap-2 border-t border-white/5 pt-3">
+    <div class="flex items-center justify-between gap-2 border-t border-default pt-3">
       <div class="min-w-0">
-        <p class="text-[11px] font-medium text-slate-300">
+        <p class="text-[11px] font-medium text-toned">
           {{ t('inspector.testConfig.envProbe.title') }}
         </p>
-        <p class="text-[11px] text-slate-400">
+        <p class="text-[11px] text-muted">
           {{ t('inspector.testConfig.envProbe.hint') }}
           {{
             probeSurface === 'ui'
@@ -317,9 +321,9 @@ async function stop(mode: EnvironmentTestMode) {
       v-if="probeRun"
       class="text-[11px]"
       :class="{
-        'text-sky-300/80': probeRun.status === 'running',
-        'text-emerald-300/80': probeRun.status === 'succeeded',
-        'text-rose-300/80': probeRun.status === 'failed',
+        'text-app-info-300/80': probeRun.status === 'running',
+        'text-app-success-300/80': probeRun.status === 'succeeded',
+        'text-app-error-300/80': probeRun.status === 'failed',
       }"
       data-testid="env-probe-status"
     >
@@ -340,7 +344,7 @@ async function stop(mode: EnvironmentTestMode) {
       <template v-else>
         {{ t('inspector.testConfig.envProbe.failed') }}
         <template v-if="probeRun.failedStage">({{ stageLabel(probeRun.failedStage) }})</template>
-        <span v-if="probeRun.error" class="block text-rose-300/70">{{ probeRun.error }}</span>
+        <span v-if="probeRun.error" class="block text-app-error-300/70">{{ probeRun.error }}</span>
       </template>
     </p>
 
@@ -351,7 +355,7 @@ async function stop(mode: EnvironmentTestMode) {
 
     <div
       v-if="errors['agent-probe']"
-      class="text-[11px] text-rose-400"
+      class="text-[11px] text-app-error-400"
       data-testid="env-probe-error"
     >
       <p>{{ errors['agent-probe']!.text }}</p>

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

@@ -429,7 +429,7 @@ function setSize(value: InstanceSize) {
     :default-open="props.defaultOpen"
   >
     <div class="space-y-1">
-      <span class="text-[11px] text-slate-400">{{ t('inspector.testConfig.provisionType') }}</span>
+      <span class="text-[11px] text-muted">{{ t('inspector.testConfig.provisionType') }}</span>
       <div class="flex flex-wrap gap-1">
         <UButton
           v-for="p in PROVISION_TYPES"
@@ -442,7 +442,7 @@ function setSize(value: InstanceSize) {
           {{ p.label }}
         </UButton>
       </div>
-      <p class="text-[11px] leading-snug text-slate-500">
+      <p class="text-[11px] leading-snug text-dimmed">
         {{ t('inspector.testConfig.provisionTypeHint') }}
       </p>
     </div>
@@ -452,14 +452,14 @@ function setSize(value: InstanceSize) {
          provisions the compose stack, rather than editing the raw path inline. -->
     <div
       v-if="provisionType === 'docker-compose'"
-      class="flex items-center justify-between gap-2 rounded border border-primary-800/40 bg-primary-950/20 p-2"
+      class="flex items-center justify-between gap-2 rounded border border-primary/40 bg-primary/10 p-2"
       data-testid="env-setup-nudge"
     >
       <div class="min-w-0">
-        <p class="text-[11px] font-medium text-primary-200/90">
+        <p class="text-[11px] font-medium text-primary/90">
           {{ t('inspector.testConfig.envWizard.title') }}
         </p>
-        <p class="text-[11px] leading-snug text-slate-500">
+        <p class="text-[11px] leading-snug text-dimmed">
           {{ t('inspector.testConfig.envWizard.hint') }}
         </p>
       </div>
@@ -477,9 +477,9 @@ function setSize(value: InstanceSize) {
 
     <!-- Auto-detect a recommended provisioning config from the repo (slice 11). Non-binding:
          it prefills the form below + the kube edit refs; the user confirms/edits everything. -->
-    <div v-if="repoContext" class="space-y-2 rounded border border-slate-800 bg-slate-900/40 p-2">
+    <div v-if="repoContext" class="space-y-2 rounded border border-default bg-default/40 p-2">
       <div class="flex items-center justify-between gap-2">
-        <span class="text-[11px] text-slate-400">{{ t('inspector.testConfig.detect.title') }}</span>
+        <span class="text-[11px] text-muted">{{ t('inspector.testConfig.detect.title') }}</span>
         <UButton
           size="xs"
           variant="soft"
@@ -491,23 +491,23 @@ function setSize(value: InstanceSize) {
           {{ t('inspector.testConfig.detect.button') }}
         </UButton>
       </div>
-      <p class="text-[11px] leading-snug text-slate-500">
+      <p class="text-[11px] leading-snug text-dimmed">
         {{ t('inspector.testConfig.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 && detectResult.provisioning.type !== 'custom'"
-          class="text-[11px] text-amber-300/80"
+          class="text-[11px] text-app-warning-300/80"
         >
           {{ t('inspector.testConfig.detect.none') }}
         </p>
         <template v-else>
-          <p class="text-[11px] text-emerald-300/80">
+          <p class="text-[11px] text-app-success-300/80">
             {{
               t('inspector.testConfig.detect.applied', {
                 type: provisionTypeLabel(detectResult.provisioning.type),
@@ -516,7 +516,7 @@ function setSize(value: InstanceSize) {
           </p>
 
           <div v-if="detectResult.serviceDirCandidates?.length" class="space-y-1">
-            <span class="text-[11px] text-slate-400">{{
+            <span class="text-[11px] text-muted">{{
               t('inspector.testConfig.detect.serviceDirTitle')
             }}</span>
             <div class="flex flex-wrap gap-1">
@@ -534,7 +534,7 @@ function setSize(value: InstanceSize) {
           </div>
 
           <div v-if="detectResult.manifestRootCandidates?.length" class="space-y-1">
-            <span class="text-[11px] text-slate-400">{{
+            <span class="text-[11px] text-muted">{{
               t('inspector.testConfig.detect.manifestRootTitle')
             }}</span>
             <div class="flex flex-wrap gap-1">
@@ -552,7 +552,7 @@ function setSize(value: InstanceSize) {
           </div>
 
           <div v-if="detectResult.overlayCandidates?.length" class="space-y-1">
-            <span class="text-[11px] text-slate-400">{{
+            <span class="text-[11px] text-muted">{{
               t('inspector.testConfig.detect.overlayTitle')
             }}</span>
             <div class="flex flex-wrap gap-1">
@@ -570,7 +570,7 @@ function setSize(value: InstanceSize) {
           </div>
 
           <div v-if="detectResult.composeServiceCandidates?.length" class="space-y-1">
-            <span class="text-[11px] text-slate-400">{{
+            <span class="text-[11px] text-muted">{{
               t('inspector.testConfig.detect.composeServiceTitle')
             }}</span>
             <div class="flex flex-wrap gap-1">
@@ -587,12 +587,12 @@ function setSize(value: InstanceSize) {
             </div>
           </div>
 
-          <p v-if="detectResult.urlSource" class="text-[11px] text-slate-500">
+          <p v-if="detectResult.urlSource" class="text-[11px] text-dimmed">
             {{
               t('inspector.testConfig.detect.urlSource', { source: detectResult.urlSource.source })
             }}
           </p>
-          <p v-if="detectResult.namespace" class="text-[11px] text-slate-500">
+          <p v-if="detectResult.namespace" class="text-[11px] text-dimmed">
             {{ t('inspector.testConfig.detect.namespace', { namespace: detectResult.namespace }) }}
           </p>
 
@@ -600,9 +600,13 @@ function setSize(value: InstanceSize) {
             <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.testConfig.detect.confidenceHigh')
@@ -618,9 +622,7 @@ function setSize(value: InstanceSize) {
 
     <div v-if="provisionType === 'docker-compose'" class="space-y-2">
       <div class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
-          t('inspector.testConfig.composePath')
-        }}</label>
+        <label class="text-[11px] text-muted">{{ t('inspector.testConfig.composePath') }}</label>
         <div class="flex items-center gap-1">
           <UInput
             :model-value="composePath"
@@ -642,7 +644,7 @@ function setSize(value: InstanceSize) {
             @click="openBrowse('compose')"
           />
         </div>
-        <p class="text-[11px] leading-snug text-slate-500">
+        <p class="text-[11px] leading-snug text-dimmed">
           {{ t('inspector.testConfig.composeHint') }}
         </p>
       </div>
@@ -658,7 +660,7 @@ function setSize(value: InstanceSize) {
          connection (the "how") is configured per-type in the Infrastructure window. -->
     <div v-if="provisionType === 'kubernetes'" class="space-y-2">
       <div class="space-y-1">
-        <span class="text-[11px] text-slate-400">{{
+        <span class="text-[11px] text-muted">{{
           t('inspector.testConfig.manifestSourceLabel')
         }}</span>
         <div class="flex flex-wrap gap-1">
@@ -682,9 +684,7 @@ function setSize(value: InstanceSize) {
       </div>
 
       <div v-if="kubeSourceType === 'separate'" class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
-          t('inspector.testConfig.manifestRepo')
-        }}</label>
+        <label class="text-[11px] text-muted">{{ t('inspector.testConfig.manifestRepo') }}</label>
         <UInput
           :model-value="kubeRepo"
           size="xs"
@@ -695,9 +695,7 @@ function setSize(value: InstanceSize) {
         />
       </div>
       <div v-if="kubeSourceType === 'separate'" class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
-          t('inspector.testConfig.manifestRef')
-        }}</label>
+        <label class="text-[11px] text-muted">{{ t('inspector.testConfig.manifestRef') }}</label>
         <UInput
           :model-value="kubeRef"
           size="xs"
@@ -709,9 +707,7 @@ function setSize(value: InstanceSize) {
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
-          t('inspector.testConfig.manifestPath')
-        }}</label>
+        <label class="text-[11px] text-muted">{{ t('inspector.testConfig.manifestPath') }}</label>
         <div class="flex items-center gap-1">
           <UInput
             :model-value="kubePath"
@@ -731,15 +727,13 @@ function setSize(value: InstanceSize) {
             @click="openBrowse('k8s')"
           />
         </div>
-        <p class="text-[11px] leading-snug text-slate-500">
+        <p class="text-[11px] leading-snug text-dimmed">
           {{ t('inspector.testConfig.manifestPathHint') }}
         </p>
       </div>
 
       <div class="space-y-1">
-        <span class="text-[11px] text-slate-400">{{
-          t('inspector.testConfig.rendererLabel')
-        }}</span>
+        <span class="text-[11px] text-muted">{{ t('inspector.testConfig.rendererLabel') }}</span>
         <div class="flex flex-wrap gap-1">
           <UButton
             v-for="r in RENDERERS"
@@ -752,7 +746,7 @@ function setSize(value: InstanceSize) {
             {{ r.label }}
           </UButton>
         </div>
-        <p class="text-[11px] leading-snug text-slate-500">
+        <p class="text-[11px] leading-snug text-dimmed">
           {{ t('inspector.testConfig.rendererHint') }}
         </p>
       </div>
@@ -762,7 +756,7 @@ function setSize(value: InstanceSize) {
          source), the per-PR recipe lives in the target repository's own preview workflow, so
          declaring the type IS the whole service-side configuration. Say so explicitly rather
          than rendering an empty panel that reads like something failed to load. -->
-    <p v-if="provisionType === 'cloudflare'" class="text-[11px] text-slate-500">
+    <p v-if="provisionType === 'cloudflare'" class="text-[11px] text-dimmed">
       {{ t('inspector.testConfig.cloudflareHint') }}
     </p>
 
@@ -770,7 +764,7 @@ function setSize(value: InstanceSize) {
          handler the workspace configures). -->
     <div v-if="provisionType === 'custom'" class="space-y-2">
       <div class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
+        <label class="text-[11px] text-muted">{{
           t('inspector.testConfig.customManifestId')
         }}</label>
         <USelect
@@ -782,15 +776,15 @@ function setSize(value: InstanceSize) {
           :placeholder="t('inspector.testConfig.customManifestIdPlaceholder')"
           @update:model-value="(v: string) => setCustomManifestId(v)"
         />
-        <p v-else class="text-[11px] leading-snug text-amber-300/80">
+        <p v-else class="text-[11px] leading-snug text-app-warning-300/80">
           {{ t('inspector.testConfig.customNoTypes') }}
         </p>
-        <p class="text-[11px] leading-snug text-slate-500">
+        <p class="text-[11px] leading-snug text-dimmed">
           {{ t('inspector.testConfig.customManifestIdHint') }}
         </p>
       </div>
       <div class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
+        <label class="text-[11px] text-muted">{{
           t('inspector.testConfig.customManifestPath')
         }}</label>
         <UInput
@@ -802,7 +796,7 @@ function setSize(value: InstanceSize) {
             (e: KeyboardEvent) => setCustomManifestPath((e.target as HTMLInputElement).value)
           "
         />
-        <p class="text-[11px] leading-snug text-slate-500">
+        <p class="text-[11px] leading-snug text-dimmed">
           {{ t('inspector.testConfig.customManifestPathHint') }}
         </p>
       </div>
@@ -811,10 +805,10 @@ function setSize(value: InstanceSize) {
            shown when the selected type declares a fixer prompt. -->
       <div
         v-if="manifestFixerAvailable && repoContext"
-        class="space-y-1.5 rounded border border-slate-800 bg-slate-900/40 p-2"
+        class="space-y-1.5 rounded border border-default bg-default/40 p-2"
       >
         <div class="flex items-center justify-between gap-2">
-          <span class="text-[11px] text-slate-400">{{
+          <span class="text-[11px] text-muted">{{
             t('inspector.testConfig.generateManifest.title')
           }}</span>
           <UButton
@@ -829,24 +823,24 @@ function setSize(value: InstanceSize) {
             {{ t('inspector.testConfig.generateManifest.button') }}
           </UButton>
         </div>
-        <p class="text-[11px] leading-snug text-slate-500">
+        <p class="text-[11px] leading-snug text-dimmed">
           {{ t('inspector.testConfig.generateManifest.hint') }}
         </p>
-        <p v-if="manifestRepairError" class="text-[11px] text-rose-300/80">
+        <p v-if="manifestRepairError" class="text-[11px] text-app-error-300/80">
           {{ t('inspector.testConfig.generateManifest.error') }}
         </p>
         <p
           v-else-if="manifestRepairJob"
           class="text-[11px]"
           :class="{
-            'text-sky-300/80': manifestRepairJob.status === 'running',
-            'text-emerald-300/80': manifestRepairJob.status === 'succeeded',
-            'text-rose-300/80': manifestRepairJob.status === 'failed',
+            'text-app-info-300/80': manifestRepairJob.status === 'running',
+            'text-app-success-300/80': manifestRepairJob.status === 'succeeded',
+            'text-app-error-300/80': manifestRepairJob.status === 'failed',
           }"
         >
           {{ t(`inspector.testConfig.generateManifest.status.${manifestRepairJob.status}`) }}
         </p>
-        <p v-else-if="manifestRepairJobId" class="text-[11px] text-sky-300/80">
+        <p v-else-if="manifestRepairJobId" class="text-[11px] text-app-info-300/80">
           {{ t('inspector.testConfig.generateManifest.dispatched') }}
         </p>
       </div>
@@ -862,7 +856,7 @@ function setSize(value: InstanceSize) {
     >
       <template #body>
         <div v-if="repoContext" class="space-y-3">
-          <p class="text-xs text-slate-400">
+          <p class="text-xs text-muted">
             {{
               browseTarget === 'compose'
                 ? t('inspector.testConfig.selectComposeHint')
@@ -876,11 +870,11 @@ function setSize(value: InstanceSize) {
             :start-path="repoContext.directory ?? ''"
           />
           <div class="flex items-center justify-between gap-2">
-            <p class="truncate text-xs text-slate-400">
+            <p class="truncate text-xs text-muted">
               <template v-if="pickedPath">
                 <i18n-t keypath="inspector.testConfig.selected" tag="span" scope="global">
                   <template #path>
-                    <code class="text-slate-200">{{ pickedPath }}</code>
+                    <code class="text-default">{{ pickedPath }}</code>
                   </template>
                 </i18n-t>
               </template>
@@ -902,9 +896,7 @@ function setSize(value: InstanceSize) {
       :hint="t('inspector.testConfig.provisioningHint')"
     >
       <div class="space-y-1">
-        <span class="text-[11px] text-slate-400">{{
-          t('inspector.testConfig.cloudProvider')
-        }}</span>
+        <span class="text-[11px] text-muted">{{ t('inspector.testConfig.cloudProvider') }}</span>
         <div class="flex flex-wrap gap-1">
           <UButton
             v-for="p in PROVIDERS"
@@ -920,7 +912,7 @@ function setSize(value: InstanceSize) {
       </div>
 
       <div class="space-y-1">
-        <span class="text-[11px] text-slate-400">{{ t('inspector.testConfig.instanceSize') }}</span>
+        <span class="text-[11px] text-muted">{{ t('inspector.testConfig.instanceSize') }}</span>
         <div class="flex flex-wrap gap-1">
           <UButton
             v-for="s in SIZES"

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

@@ -165,13 +165,13 @@ async function clearAll() {
 
     <!-- These are REAL secrets: an unmistakable sensitivity + replace-all warning. -->
     <div
-      class="flex items-start gap-2 rounded-md border border-amber-500/40 bg-amber-500/10 px-2.5 py-2 text-[11px] leading-snug text-amber-200"
+      class="flex items-start gap-2 rounded-md border border-app-warning-500/40 bg-app-warning-500/10 px-2.5 py-2 text-[11px] leading-snug text-app-warning-200"
     >
-      <UIcon name="i-lucide-shield-alert" class="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />
+      <UIcon name="i-lucide-shield-alert" class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-400" />
       <span>{{ t('inspector.testSecrets.warning') }}</span>
     </div>
 
-    <p class="text-[11px] leading-snug text-slate-500">
+    <p class="text-[11px] leading-snug text-dimmed">
       {{ t('inspector.testSecrets.replaceNote') }}
     </p>
 
@@ -180,7 +180,7 @@ async function clearAll() {
       <div
         v-for="(row, index) in draft.rows"
         :key="row.uid"
-        class="space-y-2 rounded-md border border-slate-800 p-2.5"
+        class="space-y-2 rounded-md border border-default p-2.5"
         :data-testid="`test-secret-row-${index}`"
       >
         <div class="flex items-start gap-2">
@@ -234,7 +234,7 @@ async function clearAll() {
         </UFormField>
       </div>
 
-      <p v-if="duplicateKeys.size" class="text-[11px] text-error-400">
+      <p v-if="duplicateKeys.size" class="text-[11px] text-app-error-400">
         {{ t('inspector.testSecrets.duplicateKey') }}
       </p>
 

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

@@ -89,9 +89,9 @@ function revert() {
   >
     <!-- This text reaches the model in the prompt, so it must never hold a real secret. -->
     <div
-      class="flex items-start gap-2 rounded-md border border-slate-700 bg-slate-800/40 px-2.5 py-2 text-[11px] leading-snug text-slate-300"
+      class="flex items-start gap-2 rounded-md border border-muted bg-elevated/40 px-2.5 py-2 text-[11px] leading-snug text-toned"
     >
-      <UIcon name="i-lucide-info" class="mt-0.5 h-4 w-4 shrink-0 text-slate-400" />
+      <UIcon name="i-lucide-info" class="mt-0.5 h-4 w-4 shrink-0 text-muted" />
       <span>{{ t('inspector.testingContext.notSecret') }}</span>
     </div>
 
@@ -104,7 +104,7 @@ function revert() {
     />
 
     <div class="flex items-center justify-between gap-2">
-      <p class="text-[11px] text-slate-500" :class="{ 'text-error-400': tooLong }">
+      <p class="text-[11px] text-dimmed" :class="{ 'text-app-error-400': tooLong }">
         {{
           t('inspector.testingContext.length', {
             count: outgoing.length,

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

@@ -234,7 +234,7 @@ async function clear() {
         />
       </UFormField>
 
-      <p class="text-[11px] text-slate-500">
+      <p class="text-[11px] text-dimmed">
         {{ t('inspector.validationChecks.hint') }}
       </p>
 
@@ -273,7 +273,7 @@ async function clear() {
         />
       </div>
 
-      <p v-if="rows.length === 0" class="text-[11px] text-slate-500" data-testid="validation-empty">
+      <p v-if="rows.length === 0" class="text-[11px] text-dimmed" data-testid="validation-empty">
         {{ t('inspector.validationChecks.empty') }}
       </p>
 

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

@@ -58,12 +58,12 @@ function setValue(id: string, value: string) {
   >
     <div v-for="d in descriptors" :key="d.id" class="space-y-1">
       <div class="flex items-center justify-between">
-        <span class="text-[11px] text-slate-400">{{ d.label }}</span>
+        <span class="text-[11px] text-muted">{{ d.label }}</span>
         <div class="flex items-center gap-1.5">
           <UIcon
             v-if="isFrozen(d.agentKind)"
             name="i-lucide-lock"
-            class="h-3 w-3 text-slate-500"
+            class="h-3 w-3 text-dimmed"
             :title="t('inspector.agentConfig.frozen')"
           />
         </div>
@@ -81,7 +81,7 @@ function setValue(id: string, value: string) {
           {{ opt.label }}
         </UButton>
       </div>
-      <p class="text-[11px] leading-snug text-slate-500">{{ d.description }}</p>
+      <p class="text-[11px] leading-snug text-dimmed">{{ d.description }}</p>
     </div>
   </InspectorSection>
 </template>

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

@@ -150,7 +150,7 @@ function removeDisabled(entry: AprioriBranch): boolean {
 <template>
   <div v-if="repo" data-testid="apriori-branches">
     <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.aprioriBranches.title') }}
       </span>
     </div>
@@ -220,21 +220,24 @@ function removeDisabled(entry: AprioriBranch): boolean {
       class="w-full"
       data-testid="apriori-branch-search"
     />
-    <div v-else class="text-[11px] text-slate-500">
+    <div v-else class="text-[11px] text-dimmed">
       {{ t('inspector.aprioriBranches.connectFirst') }}
     </div>
 
     <!-- A protected branch pushed to by the run is likely to be rejected — warn, don't block. -->
     <div
       v-if="workingName && isProtected(workingName)"
-      class="mt-1.5 flex items-start gap-1.5 rounded-md border border-amber-500/40 bg-amber-950/40 p-2 text-[11px] text-amber-200/90"
+      class="mt-1.5 flex items-start gap-1.5 rounded-md border border-app-warning-500/40 bg-app-warning-950/40 p-2 text-[11px] text-app-warning-200/90"
       data-testid="apriori-branch-protected-warning"
     >
-      <UIcon name="i-lucide-triangle-alert" class="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-400" />
+      <UIcon
+        name="i-lucide-triangle-alert"
+        class="mt-0.5 h-3.5 w-3.5 shrink-0 text-app-warning-400"
+      />
       <span>{{ t('inspector.aprioriBranches.protectedWarning', { branch: workingName }) }}</span>
     </div>
 
-    <div class="mt-1 text-[11px] text-slate-500">
+    <div class="mt-1 text-[11px] text-dimmed">
       {{ t('inspector.aprioriBranches.hint') }}
       <template v-if="isMultiRepo">
         {{ t('inspector.aprioriBranches.multiRepoHint') }}

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

@@ -86,7 +86,7 @@ async function removeDep(dep: Block) {
       icon="i-lucide-git-branch"
       :title="t('inspector.dependencies.empty')"
     />
-    <div v-if="!runnable" class="text-[10px] text-amber-400">
+    <div v-if="!runnable" class="text-[10px] text-app-warning-400">
       {{ t('inspector.dependencies.blocked') }}
     </div>
   </InspectorSection>