@cat-factory/app 0.302.2 → 0.303.1

package/app/components/settings/OpenRouterCatalogPanel.vue

@@ -35,8 +35,10 @@ const back = useIntegrationBack(open)
 // that trade on somebody's behalf.
 const RECOMMENDED_SLUGS = [
   'anthropic/claude-fable-5.1',
+  'anthropic/claude-opus-5.5',
   'anthropic/claude-opus-5',
   'openai/gpt-6-astra',
+  'openai/gpt-6-sol',
   'openai/gpt-5.6-sol',
   'openai/gpt-5.6-terra',
   'google/gemini-3.1-pro-preview',
@@ -44,6 +46,7 @@ const RECOMMENDED_SLUGS = [
   'meta/muse-spark-1.3',
   'deepseek/deepseek-v4.1-flash',
   'moonshotai/kimi-k2.7-code',
+  'x-ai/grok-4.7',
   'z-ai/glm-5.3',
   'z-ai/glm-5.2',
 ]
@@ -221,7 +224,7 @@ function manageKeys() {
     </template>
     <template #body>
       <div class="space-y-4">
-        <p class="text-xs text-slate-400">
+        <p class="text-xs text-muted">
           <i18n-t keypath="settings.openRouterCatalog.intro" tag="span" scope="global">
             <template #models>
               <strong>{{ t('settings.openRouterCatalog.introModels') }}</strong>
@@ -232,12 +235,12 @@ function manageKeys() {
         <!-- Step 1: connect a key (inline) — hidden once a key is connected -->
         <div
           v-if="!keyConnected"
-          class="space-y-3 rounded-lg border border-slate-700 bg-slate-900/60 p-4"
+          class="space-y-3 rounded-lg border border-muted bg-default/60 p-4"
         >
-          <h4 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+          <h4 class="text-xs font-semibold uppercase tracking-wide text-dimmed">
             {{ t('settings.openRouterCatalog.connectHeading') }}
           </h4>
-          <ol class="list-decimal space-y-1 ps-5 text-sm text-slate-300">
+          <ol class="list-decimal space-y-1 ps-5 text-sm text-toned">
             <li>
               <i18n-t keypath="settings.openRouterCatalog.step1" tag="span" scope="global">
                 <template #link>
@@ -245,7 +248,7 @@ function manageKeys() {
                     href="https://openrouter.ai/keys"
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="text-primary-400 underline"
+                    class="text-primary underline"
                     >{{ t('settings.openRouterCatalog.step1Link') }}</a
                   >
                 </template>
@@ -299,10 +302,10 @@ function manageKeys() {
         <!-- Key connected status -->
         <div
           v-else
-          class="flex items-center justify-between rounded-lg border border-slate-700 bg-slate-900/60 px-3 py-2 text-sm"
+          class="flex items-center justify-between rounded-lg border border-muted bg-default/60 px-3 py-2 text-sm"
         >
-          <span class="flex items-center gap-2 text-slate-300">
-            <UIcon name="i-lucide-check-circle" class="h-4 w-4 text-emerald-400" />
+          <span class="flex items-center gap-2 text-toned">
+            <UIcon name="i-lucide-check-circle" class="h-4 w-4 text-app-success-400" />
             {{ t('settings.openRouterCatalog.keyConnected') }}
           </span>
           <UButton color="neutral" variant="ghost" size="xs" @click="manageKeys()">
@@ -342,31 +345,35 @@ function manageKeys() {
             />
           </div>
 
-          <p v-if="store.refreshError" class="text-xs text-rose-400">{{ store.refreshError }}</p>
+          <p v-if="store.refreshError" class="text-xs text-app-error-400">
+            {{ store.refreshError }}
+          </p>
 
           <div v-if="visible.length" class="max-h-96 space-y-1 overflow-y-auto pe-1">
             <label
               v-for="m in visible"
               :key="m.id"
-              class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-900/40 px-2.5 py-1.5 text-sm"
+              class="flex items-center gap-2 rounded-md border border-default bg-default/40 px-2.5 py-1.5 text-sm"
             >
               <UCheckbox
                 :model-value="selected.has(m.id)"
                 @update:model-value="(v: boolean | 'indeterminate') => toggle(m.id, v === true)"
               />
               <span class="min-w-0 flex-1">
-                <span class="block truncate text-slate-200">{{ m.name }}</span>
-                <span class="block truncate font-mono text-[11px] text-slate-500">{{ m.id }}</span>
+                <span class="block truncate text-default">{{ m.name }}</span>
+                <span class="block truncate font-mono text-[11px] text-dimmed">{{ m.id }}</span>
                 <!--
                   A withdrawal date is the one fact about a model that fails SILENTLY: past it the
                   route simply stops answering and the run falls through to whatever the picker
                   offers next, so the moment to see it is while choosing.
                 -->
-                <span v-if="m.expirationDate" class="block truncate text-[11px] text-amber-400">{{
-                  t('settings.openRouterCatalog.retiresOn', { date: m.expirationDate })
-                }}</span>
+                <span
+                  v-if="m.expirationDate"
+                  class="block truncate text-[11px] text-app-warning-400"
+                  >{{ t('settings.openRouterCatalog.retiresOn', { date: m.expirationDate }) }}</span
+                >
               </span>
-              <span class="shrink-0 text-end text-[11px] text-slate-500">
+              <span class="shrink-0 text-end text-[11px] text-dimmed">
                 <span v-if="m.contextLength" class="block">{{
                   contextLabel(m.contextLength)
                 }}</span>
@@ -374,16 +381,16 @@ function manageKeys() {
               </span>
             </label>
           </div>
-          <p v-else class="text-xs text-slate-500">
+          <p v-else class="text-xs text-dimmed">
             <i18n-t keypath="settings.openRouterCatalog.empty" tag="span" scope="global">
               <template #action>
-                <span class="text-slate-300">{{ t('settings.openRouterCatalog.refresh') }}</span>
+                <span class="text-toned">{{ t('settings.openRouterCatalog.refresh') }}</span>
               </template>
             </i18n-t>
           </p>
 
           <div class="flex items-center justify-between">
-            <span class="text-xs text-slate-500">{{
+            <span class="text-xs text-dimmed">{{
               t('settings.openRouterCatalog.enabledCount', { count: selectedCount }, selectedCount)
             }}</span>
             <UButton

package/app/components/settings/PackageRegistriesPanel.vue

@@ -99,23 +99,23 @@ async function removeEntry(entryId: string) {
 
 <template>
   <div class="space-y-4" data-testid="package-registries-panel">
-    <p class="text-sm text-slate-400">
+    <p class="text-sm text-muted">
       {{ t('settings.packageRegistries.intro') }}
     </p>
 
-    <section v-if="store.entries.length" class="space-y-2 rounded-lg border border-slate-700 p-3">
+    <section v-if="store.entries.length" class="space-y-2 rounded-lg border border-muted p-3">
       <h3 class="text-sm font-semibold">
         {{ t('settings.packageRegistries.list.heading') }}
       </h3>
       <div
         v-for="entry in store.entries"
         :key="entry.id"
-        class="flex items-center justify-between gap-2 rounded-md border border-slate-800 px-3 py-2"
+        class="flex items-center justify-between gap-2 rounded-md border border-default px-3 py-2"
       >
         <div class="min-w-0 space-y-1">
           <div class="flex items-center gap-2">
             <span class="text-sm font-medium">{{ vendorLabel(entry.vendor) }}</span>
-            <span class="text-[11px] text-slate-500">
+            <span class="text-[11px] text-dimmed">
               {{ t('settings.packageRegistries.list.tokenTail', { tail: entry.tokenTail }) }}
             </span>
           </div>
@@ -132,7 +132,7 @@ async function removeEntry(entryId: string) {
             <!-- An entry with no scopes authenticates its host without routing any scope to
                  it (the deliberate mixed public/private setup) — say so, or the row reads as
                  half-configured. -->
-            <span v-if="!entry.scopes.length" class="text-[11px] text-slate-500">
+            <span v-if="!entry.scopes.length" class="text-[11px] text-dimmed">
               {{ t('settings.packageRegistries.list.noScopes') }}
             </span>
           </div>
@@ -150,7 +150,7 @@ async function removeEntry(entryId: string) {
       </div>
     </section>
 
-    <section class="space-y-3 rounded-lg border border-slate-700 p-3">
+    <section class="space-y-3 rounded-lg border border-muted p-3">
       <h3 class="text-sm font-semibold">
         {{ t('settings.packageRegistries.add.heading') }}
       </h3>
@@ -164,7 +164,7 @@ async function removeEntry(entryId: string) {
           data-testid="package-registry-vendor"
         />
       </UFormField>
-      <p class="text-[11px] text-slate-500">
+      <p class="text-[11px] text-dimmed">
         {{ t('settings.packageRegistries.add.host', { host: vendorHost }) }}
       </p>
 
@@ -197,7 +197,7 @@ async function removeEntry(entryId: string) {
       </div>
       <!-- Why leaving this empty is often the RIGHT answer — a scope mapping is all-or-nothing,
            so an org publishing some of its `@org` packages publicly breaks under one. -->
-      <p class="text-[11px] text-slate-500">
+      <p class="text-[11px] text-dimmed">
         {{ t('settings.packageRegistries.add.scopesNote') }}
       </p>
 

package/app/components/settings/ProviderConnectionTab.vue

@@ -353,7 +353,7 @@ function fieldHelp(key: string): string | undefined {
 <template>
   <div v-if="descriptor" class="space-y-4">
     <div class="flex items-start justify-between gap-3">
-      <p class="text-xs text-slate-400">{{ blurb }}</p>
+      <p class="text-xs text-muted">{{ blurb }}</p>
       <UButton
         :icon="showLogs ? 'i-lucide-chevron-up' : 'i-lucide-scroll-text'"
         variant="ghost"
@@ -379,11 +379,11 @@ function fieldHelp(key: string): string | undefined {
     <!-- Saved connection summary -->
     <div
       v-if="connection"
-      class="flex items-center justify-between rounded-md border border-slate-700 bg-slate-900/50 px-3 py-2 text-sm"
+      class="flex items-center justify-between rounded-md border border-muted bg-default/50 px-3 py-2 text-sm"
     >
       <div>
-        <span class="font-medium text-slate-200">{{ connection.label }}</span>
-        <div class="text-[11px] text-emerald-400">
+        <span class="font-medium text-default">{{ connection.label }}</span>
+        <div class="text-[11px] text-app-success-400">
           {{ t('settings.providerConnection.connectedAt', { baseUrl: connection.baseUrl }) }}
         </div>
       </div>
@@ -400,7 +400,7 @@ function fieldHelp(key: string): string | undefined {
     <!-- Mandatory-fields warning (mirrors the banner) -->
     <div
       v-if="descriptor.missingRequired.length"
-      class="rounded-md border border-amber-500/40 bg-amber-950/40 px-3 py-2 text-xs text-amber-200"
+      class="rounded-md border border-app-warning-500/40 bg-app-warning-950/40 px-3 py-2 text-xs text-app-warning-200"
     >
       {{
         t('settings.providerConnection.missingConfig', {
@@ -425,18 +425,15 @@ function fieldHelp(key: string): string | undefined {
     />
 
     <!-- NATIVE provider: the friendly, descriptor-driven flat field form. -->
-    <div
-      v-else-if="isNative"
-      class="rounded-lg border border-dashed border-slate-700 p-3 space-y-3"
-    >
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+    <div v-else-if="isNative" class="rounded-lg border border-dashed border-muted p-3 space-y-3">
+      <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
         {{
           connection
             ? t('settings.providerConnection.form.updateConfiguration')
             : t('settings.providerConnection.form.connect')
         }}
       </p>
-      <p v-if="connection && hasSecretFields" class="text-[11px] text-amber-300/80">
+      <p v-if="connection && hasSecretFields" class="text-[11px] text-app-warning-300/80">
         {{
           t(
             'settings.providerConnection.form.reenterSecrets',

package/app/components/settings/ProviderManifestEditor.vue

@@ -196,8 +196,8 @@ function onSave() {
 </script>
 
 <template>
-  <div class="space-y-3 rounded-lg border border-dashed border-slate-700 p-3">
-    <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+  <div class="space-y-3 rounded-lg border border-dashed border-muted p-3">
+    <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
       {{ t('settings.providerConnection.manifestEditor.title') }}
     </p>
 
@@ -214,21 +214,21 @@ function onSave() {
       />
     </UFormField>
 
-    <p v-if="!savedManifest && !jsonError && !schemaError" class="text-[11px] text-slate-500">
+    <p v-if="!savedManifest && !jsonError && !schemaError" class="text-[11px] text-dimmed">
       {{ t('settings.providerConnection.manifestEditor.starterHint') }}
     </p>
 
     <!-- Parse + shape errors, validated against the same contract the backend enforces. -->
     <p
       v-if="jsonError"
-      class="rounded-md border border-rose-500/40 bg-rose-950/40 px-3 py-2 text-xs text-rose-200"
+      class="rounded-md border border-app-error-500/40 bg-app-error-950/40 px-3 py-2 text-xs text-app-error-200"
       data-testid="manifest-editor-error"
     >
       {{ t('settings.providerConnection.manifestEditor.invalidJson') }}
     </p>
     <p
       v-else-if="schemaError"
-      class="rounded-md border border-amber-500/40 bg-amber-950/40 px-3 py-2 text-xs text-amber-200"
+      class="rounded-md border border-app-warning-500/40 bg-app-warning-950/40 px-3 py-2 text-xs text-app-warning-200"
       data-testid="manifest-editor-error"
     >
       {{ t('settings.providerConnection.manifestEditor.schemaError', { message: schemaError }) }}
@@ -236,16 +236,16 @@ function onSave() {
 
     <!-- Secret sub-form: one write-only input per secret key the manifest references. -->
     <div class="space-y-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('settings.providerConnection.manifestEditor.secretsLabel') }}
       </p>
-      <p v-if="!secretKeys.length" class="text-[11px] text-slate-500">
+      <p v-if="!secretKeys.length" class="text-[11px] text-dimmed">
         {{ t('settings.providerConnection.manifestEditor.noSecrets') }}
       </p>
       <template v-else-if="connected">
         <p
           v-if="storedSecretKeys && storedSecretKeys.length"
-          class="text-[11px] text-slate-400"
+          class="text-[11px] text-muted"
           data-testid="manifest-editor-stored"
         >
           {{
@@ -254,7 +254,7 @@ function onSave() {
             })
           }}
         </p>
-        <p class="text-[11px] text-amber-300/80">
+        <p class="text-[11px] text-app-warning-300/80">
           {{ t('settings.providerConnection.manifestEditor.reenterSecrets') }}
         </p>
       </template>

package/app/components/settings/ProviderPreferenceEditor.vue

@@ -90,7 +90,7 @@ function reset() {
 <template>
   <div>
     <div class="mb-1 flex items-start justify-between gap-3">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+      <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
         {{ t('settings.modelConfiguration.routeOrder.label') }}
       </span>
       <UButton
@@ -105,7 +105,7 @@ function reset() {
         {{ t('settings.modelConfiguration.routeOrder.reset') }}
       </UButton>
     </div>
-    <p class="mb-2 text-[11px] leading-relaxed text-slate-500">
+    <p class="mb-2 text-[11px] leading-relaxed text-dimmed">
       {{
         isCustom
           ? t('settings.modelConfiguration.routeOrder.customHint')
@@ -118,7 +118,7 @@ function reset() {
          route a connected plan quietly overrules is the one thing this control must not do. -->
     <p
       v-if="subscriptionWins"
-      class="mb-2 text-[11px] leading-relaxed text-amber-400/90"
+      class="mb-2 text-[11px] leading-relaxed text-app-warning-400/90"
       data-testid="preset-route-order-subscription-warning"
     >
       {{ t('settings.modelConfiguration.routeOrder.subscriptionOverrideHint') }}
@@ -128,13 +128,13 @@ function reset() {
          answering a different question than this order asks. -->
     <p
       v-if="badgesShowAnotherOrder"
-      class="mb-2 text-[11px] leading-relaxed text-slate-500"
+      class="mb-2 text-[11px] leading-relaxed text-dimmed"
       data-testid="preset-route-order-badge-hint"
     >
       {{ t('settings.modelConfiguration.routeOrder.badgesUseDefaultPresetHint') }}
     </p>
     <ol
-      class="divide-y divide-slate-800 rounded-xl border border-slate-800 bg-slate-900/50"
+      class="divide-y divide-default rounded-xl border border-default bg-default/50"
       data-testid="preset-route-order"
     >
       <li
@@ -144,13 +144,13 @@ function reset() {
         :data-testid="`preset-route-${flavor}`"
       >
         <span
-          class="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-slate-800 text-[10px] font-semibold text-slate-400"
+          class="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-elevated text-[10px] font-semibold text-muted"
         >
           {{ index + 1 }}
         </span>
         <div class="min-w-0 flex-1">
-          <p class="truncate text-sm text-slate-200">{{ t(ROUTE_LABELS[flavor]) }}</p>
-          <p class="truncate text-[11px] text-slate-500">{{ t(ROUTE_HINTS[flavor]) }}</p>
+          <p class="truncate text-sm text-default">{{ t(ROUTE_LABELS[flavor]) }}</p>
+          <p class="truncate text-[11px] text-dimmed">{{ t(ROUTE_HINTS[flavor]) }}</p>
         </div>
         <div class="flex shrink-0 items-center gap-1">
           <UButton

package/app/components/settings/RiskPolicyCreateForm.vue

@@ -55,13 +55,13 @@ function submit() {
 </script>
 
 <template>
-  <div class="rounded-lg border border-dashed border-slate-700 p-3">
-    <p class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+  <div class="rounded-lg border border-dashed border-muted p-3">
+    <p class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-muted">
       {{ t('settings.riskPolicy.newPreset') }}
     </p>
     <div class="flex flex-wrap items-end gap-3">
       <label class="block min-w-40 flex-1">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('settings.riskPolicy.create.name') }}
         </span>
         <UInput
@@ -72,7 +72,7 @@ function submit() {
         />
       </label>
       <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('settings.riskPolicy.create.complexity') }}
         </span>
         <UInput
@@ -85,7 +85,7 @@ function submit() {
         />
       </label>
       <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('settings.riskPolicy.create.risk') }}
         </span>
         <UInput
@@ -98,7 +98,7 @@ function submit() {
         />
       </label>
       <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('settings.riskPolicy.create.impact') }}
         </span>
         <UInput
@@ -111,13 +111,13 @@ function submit() {
         />
       </label>
       <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('settings.riskPolicy.create.ciFix') }}
         </span>
         <UInput v-model.number="draft.ciMaxAttempts" type="number" :min="0" :max="50" size="sm" />
       </label>
       <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('settings.riskPolicy.create.reqIter') }}
         </span>
         <UInput
@@ -129,7 +129,7 @@ function submit() {
         />
       </label>
       <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('settings.riskPolicy.create.companionRework') }}
         </span>
         <UInput
@@ -141,7 +141,7 @@ function submit() {
         />
       </label>
       <label class="block w-32">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('settings.riskPolicy.create.autoPass') }}
         </span>
         <USelect

package/app/components/settings/RiskPolicyEditorRow.vue

@@ -93,7 +93,7 @@ const deleteBlocked = computed(
 
 <template>
   <div
-    class="rounded-lg border border-slate-700 bg-slate-800/40 p-3"
+    class="rounded-lg border border-muted bg-elevated/40 p-3"
     data-testid="risk-policy-row"
     :data-policy-id="policy.id"
     :data-policy-tier="policy.tier"
@@ -156,7 +156,7 @@ const deleteBlocked = computed(
 
     <div class="grid grid-cols-1 gap-3 sm:grid-cols-4">
       <label v-for="axis in RISK_POLICY_AXES" :key="axis" class="block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
           {{ t(CEILING_LABEL_KEYS[axis]) }}
         </span>
         <UInput
@@ -168,13 +168,13 @@ const deleteBlocked = computed(
         />
       </label>
       <label class="block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('settings.riskPolicy.field.ciMaxAttempts') }}
         </span>
         <UInput v-model.number="draft.ciMaxAttempts" type="number" :min="0" :max="50" size="sm" />
       </label>
       <label class="block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('settings.riskPolicy.field.maxRequirementIterations') }}
         </span>
         <UInput
@@ -186,7 +186,7 @@ const deleteBlocked = computed(
         />
       </label>
       <label class="block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('settings.riskPolicy.field.companionMaxReworks') }}
         </span>
         <UInput
@@ -198,7 +198,7 @@ const deleteBlocked = computed(
         />
       </label>
       <label class="block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('settings.riskPolicy.field.maxRequirementConcernAllowed') }}
         </span>
         <USelect
@@ -212,7 +212,7 @@ const deleteBlocked = computed(
 
     <!-- Per-change-class auto-merge rules, each shown beside that class's accumulated track
          record — the number that justifies widening the rule. -->
-    <div class="mt-3 rounded-md border border-slate-800 bg-slate-900/40 p-3">
+    <div class="mt-3 rounded-md border border-default bg-default/40 p-3">
       <MergeClassRulesEditor
         v-model="draft.classRules"
         :auto-merge-enabled="draft.autoMergeEnabled"
@@ -223,7 +223,7 @@ const deleteBlocked = computed(
     <!-- The role layer over those rules: what a run may do depending on WHO started it, up to and
          including a full sandbox. Directly under the base rules it narrows, since a role rule is
          only readable against the rule it applies to. -->
-    <div class="mt-3 rounded-md border border-slate-800 bg-slate-900/40 p-3">
+    <div class="mt-3 rounded-md border border-default bg-default/40 p-3">
       <MergeRolePolicyEditor
         v-model:class-rules-by-role="draft.classRulesByRole"
         v-model:dry-run-roles="draft.dryRunRoles"
@@ -236,7 +236,7 @@ const deleteBlocked = computed(
 
     <!-- Implementation-fork decision gate: propose materially different approaches before the
          Coder writes code (in `auto` tri-state, gated on the task estimate). -->
-    <div class="mt-3 rounded-md border border-slate-800 bg-slate-900/40 p-3">
+    <div class="mt-3 rounded-md border border-default bg-default/40 p-3">
       <USwitch
         v-model="draft.forkEnabled"
         size="sm"
@@ -245,7 +245,7 @@ const deleteBlocked = computed(
       />
       <div v-if="draft.forkEnabled" class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-4">
         <label v-for="axis in RISK_POLICY_AXES" :key="axis" class="block">
-          <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
             {{ t(FORK_FLOOR_LABEL_KEYS[axis]) }}
           </span>
           <UInput
@@ -257,7 +257,7 @@ const deleteBlocked = computed(
           />
         </label>
         <label class="block">
-          <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
             {{ t('settings.riskPolicy.forkDecision.onMissingLabel') }}
           </span>
           <USelect v-model="draft.forkOnMissing" :items="onMissingOptions" size="sm" />
@@ -268,7 +268,7 @@ const deleteBlocked = computed(
     <!-- The autonomy posture: whether the parks the engine's own quality loops raise when they give
          up wait for a person, or are answered on the record so the run finishes. Never touches a
          gate the PIPELINE asked for. -->
-    <div class="mt-3 rounded-md border border-slate-800 bg-slate-900/40 p-3">
+    <div class="mt-3 rounded-md border border-default bg-default/40 p-3">
       <USwitch
         v-model="draft.unattended"
         size="sm"
@@ -283,7 +283,7 @@ const deleteBlocked = computed(
            on an attended policy would be a control over a decision this policy never makes. It is
            not hidden as an "advanced override" — it is inert, which is a different thing. -->
       <label v-if="draft.unattended" class="mt-3 block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('settings.riskPolicy.autoAnswer.label') }}
         </span>
         <UInput
@@ -294,7 +294,7 @@ const deleteBlocked = computed(
           size="sm"
           data-testid="risk-policy-auto-answer-floor"
         />
-        <span class="mt-1 block text-[11px] text-slate-500">
+        <span class="mt-1 block text-[11px] text-dimmed">
           {{ t('settings.riskPolicy.autoAnswer.hint') }}
         </span>
       </label>

package/app/components/settings/RiskPolicyHealthModal.vue

@@ -50,8 +50,8 @@ const reseedableCount = computed(
 <template>
   <UModal v-model:open="open" :title="t('riskPolicy.health.title')" :ui="{ content: 'max-w-2xl' }">
     <template #body>
-      <div v-if="!hasIssues" class="py-6 text-center text-sm text-slate-400">
-        <UIcon name="i-lucide-check-circle-2" class="mx-auto mb-2 h-8 w-8 text-emerald-400" />
+      <div v-if="!hasIssues" class="py-6 text-center text-sm text-muted">
+        <UIcon name="i-lucide-check-circle-2" class="mx-auto mb-2 h-8 w-8 text-app-success-400" />
         {{ t('riskPolicy.health.allValid') }}
       </div>
 
@@ -59,20 +59,20 @@ const reseedableCount = computed(
         <!-- New built-in presets the workspace can add. -->
         <section v-if="newPresets.length" class="space-y-2">
           <div class="flex items-center gap-2">
-            <UIcon name="i-lucide-sparkles" class="h-4 w-4 text-emerald-400" />
-            <h3 class="text-sm font-semibold text-slate-200">
+            <UIcon name="i-lucide-sparkles" class="h-4 w-4 text-app-success-400" />
+            <h3 class="text-sm font-semibold text-default">
               {{ t('riskPolicy.health.newHeading') }}
             </h3>
           </div>
-          <p class="text-[11px] text-slate-500">{{ t('riskPolicy.health.newDescription') }}</p>
+          <p class="text-[11px] text-dimmed">{{ t('riskPolicy.health.newDescription') }}</p>
           <ul class="space-y-2">
             <li
               v-for="i in newPresets"
               :key="i.id"
-              class="flex items-center justify-between gap-3 rounded-lg border border-slate-800 bg-slate-900/40 p-3"
+              class="flex items-center justify-between gap-3 rounded-lg border border-default bg-default/40 p-3"
             >
               <div class="min-w-0">
-                <span class="truncate text-sm font-medium text-slate-100 capitalize">{{
+                <span class="truncate text-sm font-medium text-app-100 capitalize">{{
                   i.name
                 }}</span>
               </div>
@@ -94,21 +94,23 @@ const reseedableCount = computed(
         <!-- Outdated built-ins: a newer catalog version is available. -->
         <section v-if="outdated.length" class="space-y-2">
           <div class="flex items-center gap-2">
-            <UIcon name="i-lucide-arrow-up-circle" class="h-4 w-4 text-amber-400" />
-            <h3 class="text-sm font-semibold text-slate-200">
+            <UIcon name="i-lucide-arrow-up-circle" class="h-4 w-4 text-app-warning-400" />
+            <h3 class="text-sm font-semibold text-default">
               {{ t('riskPolicy.health.updatesHeading') }}
             </h3>
           </div>
-          <p class="text-[11px] text-slate-500">{{ t('riskPolicy.health.updatesDescription') }}</p>
+          <p class="text-[11px] text-dimmed">
+            {{ t('riskPolicy.health.updatesDescription') }}
+          </p>
           <ul class="space-y-2">
             <li
               v-for="i in outdated"
               :key="i.id"
-              class="flex items-center justify-between gap-3 rounded-lg border border-slate-800 bg-slate-900/40 p-3"
+              class="flex items-center justify-between gap-3 rounded-lg border border-default bg-default/40 p-3"
             >
               <div class="min-w-0">
-                <span class="truncate text-sm font-medium text-slate-100">{{ i.name }}</span>
-                <p class="text-[11px] text-amber-400/80">
+                <span class="truncate text-sm font-medium text-app-100">{{ i.name }}</span>
+                <p class="text-[11px] text-app-warning-400/80">
                   {{
                     t('riskPolicy.health.versionAvailable', {
                       from: i.fromVersion ?? 0,