@cat-factory/app 0.302.2 → 0.303.0

package/app/components/panels/MergerResultView.vue

@@ -173,7 +173,7 @@ const reasonText = computed(() => {
   <ResultWindowShell
     :open="open"
     :icon="meta?.icon ?? 'i-lucide-git-pull-request'"
-    icon-class="bg-lime-500/15 text-lime-300"
+    icon-class="bg-app-hue-lime/15 text-app-hue-lime"
     :title="headerTitle"
     :subtitle="t('panels.mergerResult.description')"
     :step-ref="{ instanceId, stepIndex }"
@@ -188,8 +188,8 @@ const reasonText = computed(() => {
             class="mb-4 flex items-start gap-3 rounded-lg border p-3"
             :class="
               merged
-                ? 'border-emerald-800/70 bg-emerald-500/10'
-                : 'border-amber-800/70 bg-amber-500/10'
+                ? 'border-app-success-800/70 bg-app-success-500/10'
+                : 'border-app-warning-800/70 bg-app-warning-500/10'
             "
             data-testid="merger-decision"
             :data-outcome="decision.outcome"
@@ -197,13 +197,13 @@ const reasonText = computed(() => {
             <UIcon
               :name="merged ? 'i-lucide-git-merge' : 'i-lucide-user-round-check'"
               class="mt-0.5 h-5 w-5 shrink-0"
-              :class="merged ? 'text-emerald-300' : 'text-amber-300'"
+              :class="merged ? 'text-app-success-300' : 'text-app-warning-300'"
             />
             <div class="min-w-0">
               <div class="flex flex-wrap items-center gap-2">
                 <p
                   class="text-sm font-semibold"
-                  :class="merged ? 'text-emerald-200' : 'text-amber-200'"
+                  :class="merged ? 'text-app-success-200' : 'text-app-warning-200'"
                 >
                   {{ outcomeText }}
                 </p>
@@ -217,32 +217,32 @@ const reasonText = computed(() => {
                   {{ changeClassLabel }}
                 </UBadge>
               </div>
-              <p class="mt-0.5 text-[13px] leading-relaxed text-slate-300">{{ reasonText }}</p>
+              <p class="mt-0.5 text-[13px] leading-relaxed text-toned">{{ reasonText }}</p>
             </div>
           </div>
 
           <!-- Scores vs the resolved preset's ceilings. -->
           <template v-if="axes.length">
-            <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
               {{ t('panels.mergerResult.scores') }}
             </h3>
-            <div class="space-y-2 rounded-lg border border-slate-800 bg-slate-950/40 p-3">
+            <div class="space-y-2 rounded-lg border border-default bg-app-950/40 p-3">
               <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="exceeded.has(axis.key) ? 'bg-rose-500' : 'bg-emerald-500'"
+                    :class="exceeded.has(axis.key) ? 'bg-app-error-500' : 'bg-app-success-500'"
                     :style="{ width: `${Math.round(axis.score * 100)}%` }"
                   />
                 </div>
                 <span
                   class="w-11 shrink-0 text-end text-xs tabular-nums"
-                  :class="exceeded.has(axis.key) ? 'text-rose-300' : 'text-slate-300'"
+                  :class="exceeded.has(axis.key) ? 'text-app-error-300' : 'text-toned'"
                 >
                   {{ n(axis.score, { key: 'percent' }) }}
                 </span>
-                <span class="w-24 shrink-0 text-end text-[10px] tabular-nums text-slate-500">
+                <span class="w-24 shrink-0 text-end text-[10px] tabular-nums text-dimmed">
                   {{
                     t('panels.mergerResult.ceiling', {
                       value: n(axis.ceiling, { key: 'percent' }),
@@ -255,15 +255,15 @@ const reasonText = computed(() => {
 
           <!-- The agent's prose justification. -->
           <template v-if="decision.assessment?.rationale">
-            <h3 class="mb-2 mt-4 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            <h3 class="mb-2 mt-4 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
               {{ t('panels.mergerResult.rationale') }}
             </h3>
             <MarkdownProse
               :text="decision.assessment.rationale"
-              class="text-[13px] leading-relaxed text-slate-300"
+              class="text-[13px] leading-relaxed text-toned"
             />
           </template>
-          <p v-else class="text-[13px] italic leading-relaxed text-slate-500">
+          <p v-else class="text-[13px] italic leading-relaxed text-dimmed">
             {{ t('panels.mergerResult.noAssessment') }}
           </p>
         </template>
@@ -272,11 +272,11 @@ const reasonText = computed(() => {
         <MarkdownProse
           v-else-if="step?.output"
           :text="step.output"
-          class="text-[13px] leading-relaxed text-slate-300"
+          class="text-[13px] leading-relaxed text-toned"
         />
         <div
           v-else
-          class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"
+          class="flex h-full flex-col items-center justify-center gap-2 text-center text-muted"
         >
           <UIcon name="i-lucide-git-pull-request" class="h-8 w-8 opacity-40" />
           <p class="text-sm">{{ t('panels.mergerResult.noResult') }}</p>
@@ -285,7 +285,7 @@ const reasonText = computed(() => {
 
       <!-- Sidebar: shared run metadata. -->
       <aside
-        class="hidden w-60 shrink-0 flex-col gap-4 border-s border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
+        class="hidden w-60 shrink-0 flex-col gap-4 border-s border-default bg-default/50 px-4 py-4 lg:flex"
       >
         <StepRunMeta
           v-if="step"