@cat-factory/app 0.302.2 → 0.303.1

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

@@ -64,9 +64,9 @@ const supersededLabel = computed(() => {
 
 /** Cool→hot bar colour by severity (low = sky, mid = amber, high = rose). */
 function barClass(n: number): string {
-  if (n >= 0.66) return 'bg-rose-500'
-  if (n >= 0.33) return 'bg-amber-500'
-  return 'bg-sky-500'
+  if (n >= 0.66) return 'bg-app-error-500'
+  if (n >= 0.33) return 'bg-app-warning-500'
+  return 'bg-app-info-500'
 }
 </script>
 
@@ -78,18 +78,18 @@ function barClass(n: number): string {
     icon="i-lucide-gauge"
     default-open
   >
-    <div class="space-y-1.5 rounded-lg border border-slate-800 bg-slate-900/40 p-2.5">
-      <p class="text-[11px] text-slate-500" data-testid="task-estimate-basis">{{ basisLabel }}</p>
+    <div class="space-y-1.5 rounded-lg border border-default bg-default/40 p-2.5">
+      <p class="text-[11px] text-dimmed" data-testid="task-estimate-basis">{{ basisLabel }}</p>
       <p
         v-if="supersededLabel"
-        class="text-[11px] text-slate-500"
+        class="text-[11px] text-dimmed"
         data-testid="task-estimate-superseded"
       >
         {{ supersededLabel }}
       </p>
       <div v-for="axis in AXES" :key="axis.key" class="flex items-center gap-2">
-        <span class="w-20 shrink-0 text-xs text-slate-400">{{ axis.label }}</span>
-        <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-800">
+        <span class="w-20 shrink-0 text-xs text-muted">{{ axis.label }}</span>
+        <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-elevated">
           <div
             class="h-full rounded-full"
             :class="barClass(estimate[axis.key])"
@@ -98,15 +98,15 @@ function barClass(n: number): string {
         </div>
         <span
           v-if="axis.was"
-          class="shrink-0 text-[11px] tabular-nums text-slate-500"
+          class="shrink-0 text-[11px] tabular-nums text-dimmed"
           :data-testid="`task-estimate-was-${axis.key}`"
           >{{ t('inspector.estimate.was', { value: axis.was }) }}</span
         >
-        <span class="w-9 shrink-0 text-end text-xs tabular-nums text-slate-300">{{
+        <span class="w-9 shrink-0 text-end text-xs tabular-nums text-toned">{{
           n(estimate[axis.key], { key: 'percent' })
         }}</span>
       </div>
-      <p v-if="estimate.rationale" class="pt-1 text-xs leading-relaxed text-slate-500">
+      <p v-if="estimate.rationale" class="pt-1 text-xs leading-relaxed text-dimmed">
         {{ estimate.rationale }}
       </p>
     </div>

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

@@ -306,7 +306,7 @@ async function mergePr() {
     <div v-if="instance">
       <div class="mb-1 flex items-center justify-between">
         <span class="flex min-w-0 items-center gap-1.5">
-          <span class="truncate text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <span class="truncate text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ instance.pipelineName }}
           </span>
           <!-- A sandboxed run looks exactly like one that simply has not reached the merge yet,
@@ -377,7 +377,7 @@ async function mergePr() {
           v-for="(s, i) in instance.steps"
           :key="i"
           class="rounded-md px-2 py-1"
-          :class="i === instance.currentStep ? 'bg-slate-800/70' : ''"
+          :class="i === instance.currentStep ? 'bg-elevated/70' : ''"
           data-testid="run-step"
           :data-step-kind="s.agentKind"
           :data-step-state="s.state"
@@ -387,7 +387,7 @@ async function mergePr() {
                  model, subtasks + the prose output when there is one). -->
             <button
               type="button"
-              class="flex min-w-0 cursor-pointer items-center gap-2 text-start transition hover:text-white"
+              class="flex min-w-0 cursor-pointer items-center gap-2 text-start transition hover:text-highlighted"
               data-testid="run-step-open"
               :title="
                 stepHasOutput(s)
@@ -401,24 +401,24 @@ async function mergePr() {
                 class="h-4 w-4 shrink-0"
                 :style="{ color: agentKindMeta(s.agentKind).color }"
               />
-              <span class="truncate text-xs text-slate-200">
+              <span class="truncate text-xs text-default">
                 {{ agentKindMeta(s.agentKind).label }}
               </span>
               <span
                 v-if="isCompanionKind(s.agentKind)"
-                class="shrink-0 rounded bg-slate-700/60 px-1 text-[9px] font-medium uppercase tracking-wide text-slate-300"
+                class="shrink-0 rounded bg-accented/60 px-1 text-[9px] font-medium uppercase tracking-wide text-toned"
                 :title="t('inspector.execution.companionTooltip')"
               >
                 {{ t('inspector.execution.companion') }}
               </span>
               <UIcon
                 :name="stepHasOutput(s) ? 'i-lucide-book-open-text' : 'i-lucide-info'"
-                class="h-3.5 w-3.5 shrink-0 text-slate-500"
+                class="h-3.5 w-3.5 shrink-0 text-dimmed"
               />
             </button>
             <span
               v-if="s.subtasks && s.subtasks.total > 0"
-              class="ms-auto font-mono text-[10px] tabular-nums text-slate-300"
+              class="ms-auto font-mono text-[10px] tabular-nums text-toned"
               data-testid="run-subtasks"
               :title="
                 s.subtasks.inProgress > 0
@@ -438,7 +438,7 @@ async function mergePr() {
             <span
               class="inline-flex items-center gap-1 text-[10px]"
               :class="[
-                stepFailed(s) ? 'text-rose-400' : 'text-slate-400',
+                stepFailed(s) ? 'text-app-error-400' : 'text-muted',
                 { 'ms-auto': !s.subtasks },
               ]"
             >
@@ -447,7 +447,7 @@ async function mergePr() {
               <!-- live elapsed clock: a running step counts up, a finished one shows total -->
               <span
                 v-if="stepElapsed(s)"
-                class="inline-flex items-center gap-0.5 font-mono tabular-nums text-slate-500"
+                class="inline-flex items-center gap-0.5 font-mono tabular-nums text-dimmed"
                 :title="t('inspector.execution.elapsedTooltip')"
               >
                 · {{ stepElapsed(s) }}
@@ -467,7 +467,7 @@ async function mergePr() {
                  indicator, NOT a "Review" gate (the human is summoned only if needed) -->
             <span
               v-else-if="reviews.isBackground(s.agentKind, block.id) && reviewStage"
-              class="inline-flex shrink-0 items-center gap-1 text-[10px] text-indigo-300"
+              class="inline-flex shrink-0 items-center gap-1 text-[10px] text-primary"
             >
               <UIcon name="i-lucide-loader-circle" class="h-3 w-3 animate-spin" />
               {{ reviewStageLabel }}
@@ -551,16 +551,16 @@ async function mergePr() {
           </div>
           <div
             v-if="s.subtasks && s.subtasks.total > 0"
-            class="mt-1 ms-6 h-1 overflow-hidden rounded-full bg-slate-700/60"
+            class="mt-1 ms-6 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: `${(s.subtasks.completed / s.subtasks.total) * 100}%` }"
             />
           </div>
           <div
             v-if="s.model"
-            class="mt-0.5 flex items-center gap-1 ps-6 text-[10px] text-slate-500"
+            class="mt-0.5 flex items-center gap-1 ps-6 text-[10px] text-dimmed"
             :title="s.model"
           >
             <UIcon name="i-lucide-cpu" class="h-3 w-3" />
@@ -569,7 +569,7 @@ async function mergePr() {
           <!-- Prompt-fragment standards the library selected for this step. -->
           <div
             v-if="s.selectedFragmentIds && s.selectedFragmentIds.length"
-            class="mt-0.5 flex flex-wrap items-center gap-1 ps-6 text-[10px] text-slate-500"
+            class="mt-0.5 flex flex-wrap items-center gap-1 ps-6 text-[10px] text-dimmed"
             :title="
               t('inspector.execution.fragmentsTooltip', {
                 fragments: s.selectedFragmentIds.join(', '),
@@ -599,7 +599,7 @@ async function mergePr() {
                 gateCompanionFor(s, runFailed)!.state === 'running' ? 'animate-spin' : '',
               ]"
             />
-            <span class="text-slate-400">
+            <span class="text-muted">
               {{
                 t('inspector.execution.companionOf', {
                   label: agentKindMeta(gateCompanionFor(s, runFailed)!.kind).label,
@@ -641,7 +641,7 @@ async function mergePr() {
 
     <!-- Open PR: link straight to it on GitHub -->
     <div v-if="pr" class="space-y-2">
-      <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.execution.pullRequest') }}
       </span>
       <UButton
@@ -663,7 +663,7 @@ async function mergePr() {
           </UBadge>
         </span>
       </UButton>
-      <p v-if="pr.branch" class="flex items-center gap-1 truncate text-[10px] text-slate-500">
+      <p v-if="pr.branch" class="flex items-center gap-1 truncate text-[10px] text-dimmed">
         <UIcon name="i-lucide-git-branch" class="h-3 w-3 shrink-0" />
         <span class="truncate" :title="pr.branch">{{ pr.branch }}</span>
       </p>

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

@@ -102,12 +102,12 @@ function revert() {
     </UButton>
     <p
       v-else-if="label"
-      class="rounded-lg border border-slate-800 bg-slate-900/40 p-2.5 text-xs text-slate-300"
+      class="rounded-lg border border-default bg-default/40 p-2.5 text-xs text-toned"
       data-testid="inspector-review-target-link"
     >
       {{ label }}
     </p>
-    <p v-if="focus" class="text-xs leading-relaxed text-slate-500">
+    <p v-if="focus" class="text-xs leading-relaxed text-dimmed">
       {{ t('inspector.reviewTarget.focus', { focus }) }}
     </p>
     <div data-testid="inspector-review-skills">

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

@@ -283,7 +283,7 @@ const technicalLabel = computed(() => {
     <!-- pipeline -->
     <div>
       <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.runSettings.pipeline') }}
         </span>
         <PipelinePicker
@@ -314,10 +314,10 @@ const technicalLabel = computed(() => {
           {{ selectedPipeline.name }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
         </UBadge>
       </div>
-      <div v-else class="text-[11px] text-slate-500">
+      <div v-else class="text-[11px] text-dimmed">
         {{ t('inspector.runSettings.pipelineEmpty') }}
       </div>
-      <p class="mt-1 text-[11px] leading-snug text-slate-500">
+      <p class="mt-1 text-[11px] leading-snug text-dimmed">
         {{ t('inspector.runSettings.pipelineHint') }}
       </p>
     </div>
@@ -325,7 +325,7 @@ const technicalLabel = computed(() => {
     <!-- merge policy preset (advanced, or basic with an override already set) -->
     <div v-if="showOverrideField(uiMode.isAdvanced, block.riskPolicyId)">
       <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.runSettings.mergePolicy') }}
         </span>
         <RiskPolicyPicker
@@ -347,7 +347,7 @@ const technicalLabel = computed(() => {
           </template>
         </RiskPolicyPicker>
       </div>
-      <div v-if="selectedPreset" class="text-[11px] text-slate-400">
+      <div v-if="selectedPreset" class="text-[11px] text-muted">
         <i18n-t
           v-if="selectedPreset.autoMergeEnabled"
           keypath="inspector.runSettings.riskPolicyDetail"
@@ -355,7 +355,7 @@ const technicalLabel = computed(() => {
           scope="global"
         >
           <template #name>
-            <span class="text-slate-300">{{ selectedPreset.name }}</span>
+            <span class="text-toned">{{ selectedPreset.name }}</span>
           </template>
           <template #risk>{{ n(selectedPreset.maxRisk, { key: 'percent' }) }}</template>
           <template #impact>{{ n(selectedPreset.maxImpact, { key: 'percent' }) }}</template>
@@ -365,18 +365,18 @@ const technicalLabel = computed(() => {
         <!-- Auto-merge off: the ceilings never apply, so quoting them would misdescribe it. -->
         <i18n-t v-else keypath="inspector.runSettings.riskPolicyManual" tag="span" scope="global">
           <template #name>
-            <span class="text-slate-300">{{ selectedPreset.name }}</span>
+            <span class="text-toned">{{ selectedPreset.name }}</span>
           </template>
           <template #attempts>{{ selectedPreset.ciMaxAttempts }}</template>
         </i18n-t>
-        <span v-if="!block.riskPolicyId" class="text-slate-500">{{
+        <span v-if="!block.riskPolicyId" class="text-dimmed">{{
           t('inspector.runSettings.workspaceDefaultParen')
         }}</span>
       </div>
-      <div v-else class="text-[11px] text-slate-500">
+      <div v-else class="text-[11px] text-dimmed">
         {{ t('inspector.runSettings.riskPolicyEmpty') }}
       </div>
-      <p class="mt-1 text-[11px] leading-snug text-slate-500">
+      <p class="mt-1 text-[11px] leading-snug text-dimmed">
         {{ t('inspector.runSettings.mergePolicyHint') }}
       </p>
     </div>
@@ -384,7 +384,7 @@ const technicalLabel = computed(() => {
     <!-- model preset (advanced, or basic with an override already set) -->
     <div v-if="showOverrideField(uiMode.isAdvanced, block.modelPresetId)">
       <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.runSettings.modelPreset') }}
         </span>
         <UDropdownMenu :items="modelPresetMenu">
@@ -397,8 +397,8 @@ const technicalLabel = computed(() => {
           />
         </UDropdownMenu>
       </div>
-      <div v-if="selectedModelPreset" class="text-[11px] text-slate-400">
-        <span class="text-slate-300">{{ selectedModelPreset.name }}</span>
+      <div v-if="selectedModelPreset" class="text-[11px] text-muted">
+        <span class="text-toned">{{ selectedModelPreset.name }}</span>
         {{ t('inspector.runSettings.modelPresetBase', { model: selectedModelPreset.baseModelId })
         }}<span v-if="Object.keys(selectedModelPreset.overrides).length">{{
           t(
@@ -408,39 +408,39 @@ const technicalLabel = computed(() => {
           )
         }}</span
         >.
-        <span v-if="!block.modelPresetId" class="text-slate-500">{{
+        <span v-if="!block.modelPresetId" class="text-dimmed">{{
           t('inspector.runSettings.workspaceDefaultParen')
         }}</span>
       </div>
-      <div v-else class="text-[11px] text-slate-500">
+      <div v-else class="text-[11px] text-dimmed">
         {{ t('inspector.runSettings.modelPresetEmpty') }}
       </div>
       <div
         v-if="unavailablePresetModels.length"
-        class="mt-2 rounded-md border border-amber-500/40 bg-amber-950/40 p-2 text-[11px] text-amber-200/90"
+        class="mt-2 rounded-md border border-app-warning-500/40 bg-app-warning-950/40 p-2 text-[11px] text-app-warning-200/90"
       >
         <div class="flex items-start gap-1.5">
           <UIcon
             name="i-lucide-triangle-alert"
-            class="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-400"
+            class="mt-0.5 h-3.5 w-3.5 shrink-0 text-app-warning-400"
           />
           <div class="min-w-0">
             <p>
               <i18n-t keypath="inspector.runSettings.unavailableModels" tag="span" scope="global">
                 <template #models>
-                  <span class="text-amber-100">{{ unavailablePresetModels.join(', ') }}</span>
+                  <span class="text-app-warning-100">{{ unavailablePresetModels.join(', ') }}</span>
                 </template>
               </i18n-t>
             </p>
             <div class="mt-1.5 flex flex-wrap gap-2">
               <button
-                class="font-medium text-amber-100 underline-offset-2 hover:underline"
+                class="font-medium text-app-warning-100 underline-offset-2 hover:underline"
                 @click="ui.openModelConfig()"
               >
                 {{ t('inspector.runSettings.editPresets') }}
               </button>
               <button
-                class="font-medium text-amber-100 underline-offset-2 hover:underline"
+                class="font-medium text-app-warning-100 underline-offset-2 hover:underline"
                 @click="ui.openVendorCredentials()"
               >
                 {{ t('inspector.runSettings.configureVendors') }}
@@ -449,7 +449,7 @@ const technicalLabel = computed(() => {
           </div>
         </div>
       </div>
-      <p class="mt-1 text-[11px] text-slate-500">
+      <p class="mt-1 text-[11px] text-dimmed">
         {{ t('inspector.runSettings.modelPresetHint') }}
         {{ t('inspector.runSettings.modelPresetChangeHint') }}
       </p>
@@ -458,7 +458,7 @@ const technicalLabel = computed(() => {
     <!-- technical label (tri-state) — unset lets the engine infer it -->
     <div v-if="showOverrideField(uiMode.isAdvanced, block.technical)">
       <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.runSettings.taskKind') }}
         </span>
         <UDropdownMenu :items="technicalMenu">
@@ -473,7 +473,7 @@ const technicalLabel = computed(() => {
           </UButton>
         </UDropdownMenu>
       </div>
-      <div class="text-[11px] text-slate-500">
+      <div class="text-[11px] text-dimmed">
         <template v-if="block.technical === true">
           {{ t('inspector.runSettings.technicalHint.technical') }}
         </template>
@@ -489,7 +489,7 @@ const technicalLabel = computed(() => {
     <!-- involved services: connected services this task spans (envs + possible code changes) -->
     <div data-testid="involved-services">
       <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.runSettings.involvedServices') }}
         </span>
       </div>
@@ -504,7 +504,7 @@ const technicalLabel = computed(() => {
           @update:model-value="(v: boolean | 'indeterminate') => toggleInvolved(s.id, v === true)"
         />
       </div>
-      <div v-else class="text-[11px] text-slate-500">
+      <div v-else class="text-[11px] text-dimmed">
         {{ t('inspector.runSettings.involvedServicesEmpty') }}
       </div>
       <div v-if="staleInvolvedServices.length" class="mt-1 flex flex-wrap gap-1">
@@ -519,7 +519,7 @@ const technicalLabel = computed(() => {
           {{ board.getBlock(id)?.title ?? id }}
         </UBadge>
       </div>
-      <div class="mt-1 text-[11px] text-slate-500">
+      <div class="mt-1 text-[11px] text-dimmed">
         {{ t('inspector.runSettings.involvedServicesHint') }}
       </div>
     </div>
@@ -543,13 +543,13 @@ const technicalLabel = computed(() => {
       "
     >
       <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.runSettings.issueWriteback') }}
         </span>
       </div>
       <div class="space-y-1.5">
         <div class="flex items-center justify-between">
-          <span class="text-[11px] text-slate-400">{{
+          <span class="text-[11px] text-muted">{{
             t('inspector.runSettings.commentOnPrOpen')
           }}</span>
           <UDropdownMenu :items="writebackMenu(setCommentOnPrOpen)">
@@ -564,9 +564,7 @@ const technicalLabel = computed(() => {
           </UDropdownMenu>
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-[11px] text-slate-400">{{
-            t('inspector.runSettings.closeOnMerge')
-          }}</span>
+          <span class="text-[11px] text-muted">{{ t('inspector.runSettings.closeOnMerge') }}</span>
           <UDropdownMenu :items="writebackMenu(setResolveOnMerge)">
             <UButton
               size="xs"
@@ -579,7 +577,7 @@ const technicalLabel = computed(() => {
           </UDropdownMenu>
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-[11px] text-slate-400">{{
+          <span class="text-[11px] text-muted">{{
             t('inspector.runSettings.questionsOnPark')
           }}</span>
           <UDropdownMenu :items="writebackMenu(setQuestionsOnPark)">
@@ -594,7 +592,7 @@ const technicalLabel = computed(() => {
           </UDropdownMenu>
         </div>
       </div>
-      <div class="mt-1 text-[11px] text-slate-500">
+      <div class="mt-1 text-[11px] text-dimmed">
         {{ t('inspector.runSettings.writebackHint') }}
       </div>
     </div>
@@ -602,7 +600,7 @@ const technicalLabel = computed(() => {
     <!-- responsible product person -->
     <div>
       <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.runSettings.responsibleProduct') }}
         </span>
         <UDropdownMenu :items="responsibleMenu">
@@ -626,7 +624,7 @@ const technicalLabel = computed(() => {
           {{ responsibleLabel }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
         </UBadge>
       </div>
-      <div v-else class="text-[11px] text-slate-500">
+      <div v-else class="text-[11px] text-dimmed">
         {{ t('inspector.runSettings.responsibleEmpty') }}
       </div>
     </div>
@@ -634,7 +632,7 @@ const technicalLabel = computed(() => {
     <!-- auto-start dependents: when this task merges, start the tasks that depend on it -->
     <div>
       <div class="flex items-center justify-between gap-2">
-        <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.runSettings.autoStartDependents') }}
         </span>
         <USwitch
@@ -643,7 +641,7 @@ const technicalLabel = computed(() => {
           @update:model-value="setAutoStartDependents"
         />
       </div>
-      <div class="mt-1 text-[11px] text-slate-500">
+      <div class="mt-1 text-[11px] text-dimmed">
         {{ t('inspector.runSettings.autoStartHint') }}
       </div>
     </div>

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

@@ -83,7 +83,7 @@ function setFragments(ids: string[]) {
   <InspectorSection :title="t('inspector.structure.title')" :hint="t('inspector.structure.hint')">
     <!-- module assignment -->
     <div>
-      <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+      <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
         {{ t('inspector.structure.module') }}
       </div>
       <USelectMenu
@@ -99,7 +99,7 @@ function setFragments(ids: string[]) {
         @update:model-value="setModule"
         @create="setModule"
       />
-      <p class="mt-1 text-[11px] leading-snug text-slate-500">
+      <p class="mt-1 text-[11px] leading-snug text-dimmed">
         {{ t('inspector.structure.moduleHint') }}
       </p>
     </div>
@@ -113,7 +113,7 @@ function setFragments(ids: string[]) {
         :empty-text="t('inspector.structure.bestPracticesEmpty')"
         @update:model-value="setFragments"
       />
-      <p class="mt-1 text-[11px] leading-snug text-slate-500">
+      <p class="mt-1 text-[11px] leading-snug text-dimmed">
         {{ t('inspector.structure.bestPracticesHint') }}
       </p>
     </div>

package/app/components/pipeline/AgentKindIcon.vue

@@ -25,6 +25,6 @@ const tooltip = computed(() =>
 <template>
   <span class="inline-flex items-center gap-2" :title="tooltip">
     <UIcon :name="meta.icon" :class="iconClass" class="shrink-0" :style="{ color: meta.color }" />
-    <span v-if="showLabel" class="text-xs text-slate-100">{{ meta.label }}</span>
+    <span v-if="showLabel" class="text-xs text-app-100">{{ meta.label }}</span>
   </span>
 </template>

package/app/components/pipeline/AgentPromptEditor.vue

@@ -174,13 +174,13 @@ function revisionLabel(revision: AgentPromptRevision): string {
     :ui="{ content: 'max-w-[92vw] sm:max-w-3xl lg:max-w-5xl' }"
   >
     <template #body>
-      <div v-if="prompts.loadingDetail" class="py-8 text-center text-sm text-slate-400">
+      <div v-if="prompts.loadingDetail" class="py-8 text-center text-sm text-muted">
         {{ t('common.loading') }}
       </div>
       <div v-else-if="detail" class="flex flex-col gap-3">
         <div class="flex flex-wrap items-center gap-2 text-xs">
           <AgentKindIcon v-if="agentKind" :kind="agentKind" icon-class="h-4 w-4" />
-          <span class="font-medium text-slate-200">{{ label }}</span>
+          <span class="font-medium text-default">{{ label }}</span>
           <UBadge v-if="detail.builtinVersionLabel" color="neutral" variant="subtle" size="sm">
             {{ detail.builtinVersionLabel }}
           </UBadge>
@@ -192,14 +192,14 @@ function revisionLabel(revision: AgentPromptRevision): string {
         <!-- The workspace-wide output ceiling for this kind. Same per-agent-kind scope as the
              prompt below it; saves on change, since there is no revision log to commit to. -->
         <div class="flex flex-wrap items-center gap-2">
-          <span class="text-[11px] text-slate-400">{{ t('pipeline.outputBudget.kindLabel') }}</span>
+          <span class="text-[11px] text-muted">{{ t('pipeline.outputBudget.kindLabel') }}</span>
           <OutputBudgetInput
             class="w-32"
             :model-value="budget"
             :disabled="agentSettings.saving"
             @update:model-value="saveBudget"
           />
-          <span class="text-[10px] text-slate-500">
+          <span class="text-[10px] text-dimmed">
             {{ t('pipeline.outputBudget.kindHint') }}
           </span>
         </div>
@@ -207,7 +207,7 @@ function revisionLabel(revision: AgentPromptRevision): string {
         <!-- What the platform appends is SHOWN, not described. A prose summary of it is copy
              that silently goes stale the moment a directive is added, and a user who does not
              know what is already there writes a prompt that fights it. -->
-        <p v-if="directives" class="text-[11px] leading-relaxed text-slate-500">
+        <p v-if="directives" class="text-[11px] leading-relaxed text-dimmed">
           {{ t('agentPrompt.managedNotice') }}
           <UButton
             variant="link"
@@ -220,13 +220,13 @@ function revisionLabel(revision: AgentPromptRevision): string {
         </p>
         <div
           v-if="directives && showDirectives"
-          class="rounded-md border border-slate-800 bg-slate-950/60 p-2"
+          class="rounded-md border border-default bg-app-950/60 p-2"
         >
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('agentPrompt.appendedHeading') }}
           </h4>
           <pre
-            class="max-h-64 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] text-slate-300"
+            class="max-h-64 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] text-toned"
             >{{ directives.trim() }}</pre>
         </div>
 
@@ -278,28 +278,28 @@ function revisionLabel(revision: AgentPromptRevision): string {
           >
             {{ showBuiltin ? t('agentPrompt.hideBuiltin') : t('agentPrompt.showBuiltin') }}
           </UButton>
-          <span v-if="restoredFrom !== undefined" class="text-[11px] text-slate-400">
+          <span v-if="restoredFrom !== undefined" class="text-[11px] text-muted">
             {{ t('agentPrompt.restoringFrom', { n: restoredFrom }) }}
           </span>
         </div>
 
-        <div v-if="showBuiltin" class="rounded-md border border-slate-800 bg-slate-950/60 p-2">
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <div v-if="showBuiltin" class="rounded-md border border-default bg-app-950/60 p-2">
+          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('agentPrompt.builtinHeading') }}
           </h4>
           <pre
-            class="max-h-64 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] text-slate-300"
+            class="max-h-64 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] text-toned"
             >{{ detail.builtinText }}</pre>
         </div>
 
         <div>
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('agentPrompt.historyHeading') }}
           </h4>
-          <p v-if="!detail.revisions.length" class="text-[11px] text-slate-500">
+          <p v-if="!detail.revisions.length" class="text-[11px] text-dimmed">
             {{ t('agentPrompt.historyEmpty') }}
           </p>
-          <ul v-else class="max-h-52 divide-y divide-slate-800 overflow-y-auto text-xs">
+          <ul v-else class="max-h-52 divide-y divide-default overflow-y-auto text-xs">
             <li
               v-for="revision in detail.revisions"
               :key="revision.revision"
@@ -313,10 +313,10 @@ function revisionLabel(revision: AgentPromptRevision): string {
               >
                 {{ t('agentPrompt.live') }}
               </UBadge>
-              <span class="min-w-0 flex-1 truncate text-slate-300">
+              <span class="min-w-0 flex-1 truncate text-toned">
                 {{ revisionLabel(revision) }}
               </span>
-              <span class="shrink-0 text-[11px] text-slate-500">
+              <span class="shrink-0 text-[11px] text-dimmed">
                 {{ d(new Date(revision.createdAt), 'short') }}
               </span>
               <UButton