@cat-factory/app 0.302.1 → 0.303.0

package/app/components/initiative/InitiativeTrackerWindow.vue

@@ -298,7 +298,7 @@ const { requestClose } = useUnsavedGuard({
   <ResultWindowShell
     :open="open"
     icon="i-lucide-milestone"
-    icon-class="bg-indigo-500/15 text-indigo-300"
+    icon-class="bg-primary/15 text-primary"
     :title="initiative?.title ?? block?.title ?? t('initiative.tracker.title')"
     :subtitle="t('initiative.tracker.subtitle')"
     width="full"
@@ -307,13 +307,13 @@ const { requestClose } = useUnsavedGuard({
   >
     <template #header-extras>
       <div v-if="progress" class="flex items-center gap-2" data-testid="initiative-progress">
-        <div class="h-1.5 w-24 overflow-hidden rounded-full bg-slate-800">
+        <div class="h-1.5 w-24 overflow-hidden rounded-full bg-elevated">
           <div
-            class="h-full rounded-full bg-emerald-500 transition-[width] duration-500"
+            class="h-full rounded-full bg-app-success-500 transition-[width] duration-500"
             :style="{ width: `${progressPct}%` }"
           />
         </div>
-        <span class="text-[11px] tabular-nums text-slate-400">
+        <span class="text-[11px] tabular-nums text-muted">
           {{ t('initiative.card.progress', { done: progress.settled, total: progress.total }) }}
         </span>
       </div>
@@ -363,7 +363,7 @@ const { requestClose } = useUnsavedGuard({
              the scroller by the notice's own height. -->
         <div
           v-if="!initiative"
-          class="flex flex-col items-center justify-center gap-2 text-center text-slate-400"
+          class="flex flex-col items-center justify-center gap-2 text-center text-muted"
           :class="planApproval ? 'py-16' : 'h-full'"
         >
           <UIcon name="i-lucide-milestone" class="h-8 w-8 opacity-40" />
@@ -376,21 +376,24 @@ const { requestClose } = useUnsavedGuard({
                    then resume (continue) or cancel (stop) the initiative right here. -->
           <section
             v-if="pausedAtCheckpoint"
-            class="mb-4 rounded-lg border border-amber-500/40 bg-amber-500/10 p-3.5"
+            class="mb-4 rounded-lg border border-app-warning-500/40 bg-app-warning-500/10 p-3.5"
             data-testid="initiative-checkpoint-pause"
           >
             <div class="flex items-start gap-2.5">
-              <UIcon name="i-lucide-pause-circle" class="mt-0.5 h-4 w-4 shrink-0 text-amber-300" />
+              <UIcon
+                name="i-lucide-pause-circle"
+                class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-300"
+              />
               <div class="min-w-0 flex-1">
-                <h3 class="text-[13px] font-semibold text-amber-200">
+                <h3 class="text-[13px] font-semibold text-app-warning-200">
                   {{ t('initiative.checkpoint.pausedTitle') }}
                 </h3>
-                <p class="mt-0.5 text-[12px] leading-relaxed text-amber-100/80">
+                <p class="mt-0.5 text-[12px] leading-relaxed text-app-warning-100/80">
                   {{ t('initiative.checkpoint.pausedBody', { phase: checkpointPhase!.title }) }}
                 </p>
                 <div class="mt-2.5 flex flex-wrap gap-2">
                   <button
-                    class="rounded bg-indigo-600 px-2.5 py-1 text-[11px] font-medium text-white hover:bg-indigo-500 disabled:opacity-50"
+                    class="rounded bg-primary/90 px-2.5 py-1 text-[11px] font-medium text-inverted hover:bg-primary disabled:opacity-50"
                     :disabled="initiatives.controlling"
                     data-testid="initiative-checkpoint-resume"
                     @click="checkpointControl('resume')"
@@ -398,7 +401,7 @@ const { requestClose } = useUnsavedGuard({
                     {{ t('initiative.inspector.resume') }}
                   </button>
                   <button
-                    class="rounded border border-rose-500/50 px-2.5 py-1 text-[11px] font-medium text-rose-300 hover:bg-rose-500/10 disabled:opacity-50"
+                    class="rounded border border-app-error-500/50 px-2.5 py-1 text-[11px] font-medium text-app-error-300 hover:bg-app-error-500/10 disabled:opacity-50"
                     :disabled="initiatives.controlling"
                     data-testid="initiative-checkpoint-cancel"
                     @click="checkpointControl('cancel')"
@@ -415,34 +418,34 @@ const { requestClose } = useUnsavedGuard({
                structure that reads better at the full span, but these are paragraphs and bullets
                of agent-written text that would otherwise run the width of the display. -->
           <section v-if="initiative.goal" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
               {{ t('initiative.tracker.goal') }}
             </h3>
-            <p class="max-w-3xl whitespace-pre-wrap text-[13px] leading-relaxed text-slate-300">
+            <p class="max-w-3xl whitespace-pre-wrap text-[13px] leading-relaxed text-toned">
               {{ initiative.goal }}
             </p>
           </section>
           <section v-if="initiative.constraints?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
               {{ t('initiative.tracker.constraints') }}
             </h3>
-            <ul class="max-w-3xl list-inside list-disc text-[13px] text-slate-300">
+            <ul class="max-w-3xl list-inside list-disc text-[13px] text-toned">
               <li v-for="(c, i) in initiative.constraints" :key="i">{{ c }}</li>
             </ul>
           </section>
           <section v-if="initiative.nonGoals?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
               {{ t('initiative.tracker.nonGoals') }}
             </h3>
-            <ul class="max-w-3xl list-inside list-disc text-[13px] text-slate-300">
+            <ul class="max-w-3xl list-inside list-disc text-[13px] text-toned">
               <li v-for="(g, i) in initiative.nonGoals" :key="i">{{ g }}</li>
             </ul>
           </section>
           <section v-if="initiative.analysisSummary" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
               {{ t('initiative.tracker.analysis') }}
             </h3>
-            <p class="max-w-3xl whitespace-pre-wrap text-[13px] leading-relaxed text-slate-300">
+            <p class="max-w-3xl whitespace-pre-wrap text-[13px] leading-relaxed text-toned">
               {{ initiative.analysisSummary }}
             </p>
           </section>
@@ -450,14 +453,14 @@ const { requestClose } = useUnsavedGuard({
           <!-- Awaiting planning -->
           <div
             v-if="phases.length === 0"
-            class="mb-4 rounded-lg border border-dashed border-slate-700 p-4 text-center text-[12px] text-slate-400"
+            class="mb-4 rounded-lg border border-dashed border-muted p-4 text-center text-[12px] text-muted"
           >
             {{ t('initiative.tracker.noPlan') }}
           </div>
 
           <!-- Phases + items -->
           <section v-for="phase in phases" :key="phase.id" class="mb-5">
-            <h3 class="mb-1 flex items-center gap-2 text-sm font-semibold text-slate-200">
+            <h3 class="mb-1 flex items-center gap-2 text-sm font-semibold text-default">
               <span>{{ t('initiative.tracker.phase', { title: phase.title }) }}</span>
               <!-- Checkpoint annotation (D2): this phase pauses the initiative for human review
                        once its items settle. Cleared → already reviewed; the pending one → awaiting
@@ -485,11 +488,11 @@ const { requestClose } = useUnsavedGuard({
                 }}
               </UBadge>
             </h3>
-            <p v-if="phase.goal" class="mb-2 text-[12px] text-slate-400">{{ phase.goal }}</p>
-            <div class="overflow-x-auto rounded-lg border border-slate-800">
+            <p v-if="phase.goal" class="mb-2 text-[12px] text-muted">{{ phase.goal }}</p>
+            <div class="overflow-x-auto rounded-lg border border-default">
               <table class="w-full text-[12px]">
                 <thead>
-                  <tr class="border-b border-slate-800 text-left text-slate-500">
+                  <tr class="border-b border-default text-left text-dimmed">
                     <th class="px-3 py-2 font-medium">{{ t('initiative.tracker.colItem') }}</th>
                     <th class="px-3 py-2 font-medium">{{ t('initiative.tracker.colStatus') }}</th>
                     <th class="px-3 py-2 font-medium">{{ t('initiative.tracker.colPr') }}</th>
@@ -499,18 +502,21 @@ const { requestClose } = useUnsavedGuard({
                   <tr
                     v-for="item in itemsOf(phase.id)"
                     :key="item.id"
-                    class="border-b border-slate-800/60 last:border-0"
+                    class="border-b border-default/60 last:border-0"
                   >
                     <td class="px-3 py-2 align-top">
-                      <div class="font-medium text-slate-200">{{ item.title }}</div>
-                      <div v-if="item.dependsOn?.length" class="mt-0.5 text-[10px] text-slate-500">
+                      <div class="font-medium text-default">{{ item.title }}</div>
+                      <div v-if="item.dependsOn?.length" class="mt-0.5 text-[10px] text-dimmed">
                         {{
                           t('initiative.tracker.dependsOn', {
                             items: item.dependsOn.join(', '),
                           })
                         }}
                       </div>
-                      <div v-if="item.note" class="mt-0.5 max-w-3xl text-[10px] text-amber-300/80">
+                      <div
+                        v-if="item.note"
+                        class="mt-0.5 max-w-3xl text-[10px] text-app-warning-300/80"
+                      >
                         {{ item.note }}
                       </div>
                       <div
@@ -519,7 +525,7 @@ const { requestClose } = useUnsavedGuard({
                       >
                         <button
                           v-if="item.status === 'blocked'"
-                          class="rounded border border-slate-700 px-1.5 py-0.5 text-[10px] text-slate-300 hover:bg-slate-800 disabled:opacity-50"
+                          class="rounded border border-muted px-1.5 py-0.5 text-[10px] text-toned hover:bg-elevated disabled:opacity-50"
                           :disabled="initiatives.curating"
                           :data-testid="`initiative-item-retry-${item.id}`"
                           @click="itemAction(item, 'retry')"
@@ -527,7 +533,7 @@ const { requestClose } = useUnsavedGuard({
                           {{ t('initiative.curation.retry') }}
                         </button>
                         <button
-                          class="rounded border border-slate-700 px-1.5 py-0.5 text-[10px] text-slate-300 hover:bg-slate-800 disabled:opacity-50"
+                          class="rounded border border-muted px-1.5 py-0.5 text-[10px] text-toned hover:bg-elevated disabled:opacity-50"
                           :disabled="initiatives.curating"
                           :data-testid="`initiative-item-skip-${item.id}`"
                           @click="itemAction(item, 'skip')"
@@ -551,11 +557,11 @@ const { requestClose } = useUnsavedGuard({
                         :href="item.pr.url"
                         target="_blank"
                         rel="noopener"
-                        class="text-sky-400 hover:underline"
+                        class="text-app-info-400 hover:underline"
                       >
                         {{ item.pr.number ? `#${item.pr.number}` : t('initiative.tracker.prLink') }}
                       </a>
-                      <span v-else class="text-slate-600">—</span>
+                      <span v-else class="text-app-600">—</span>
                     </td>
                   </tr>
                 </tbody>
@@ -566,19 +572,19 @@ const { requestClose } = useUnsavedGuard({
           <!-- Execution policy -->
           <section v-if="initiative.policy" class="mb-4">
             <div class="mb-1 flex items-center gap-2">
-              <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+              <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
                 {{ t('initiative.tracker.policy') }}
               </h3>
               <button
                 v-if="editable && !editingPolicy"
-                class="rounded border border-slate-700 px-1.5 py-0.5 text-[10px] text-slate-300 hover:bg-slate-800"
+                class="rounded border border-muted px-1.5 py-0.5 text-[10px] text-toned hover:bg-elevated"
                 data-testid="initiative-policy-edit"
                 @click="startEditPolicy"
               >
                 {{ t('initiative.curation.edit') }}
               </button>
             </div>
-            <ul v-if="!editingPolicy" class="text-[12px] text-slate-300">
+            <ul v-if="!editingPolicy" class="text-[12px] text-toned">
               <li>
                 {{
                   t('initiative.tracker.maxConcurrent', {
@@ -587,39 +593,39 @@ const { requestClose } = useUnsavedGuard({
                 }}
               </li>
               <li v-for="(rule, i) in policyRules" :key="i">
-                <code class="text-sky-300">{{ rule.pipelineId }}</code>
+                <code class="text-app-info-300">{{ rule.pipelineId }}</code>
                 · {{ ruleAxes(rule) }}
               </li>
               <li>
                 {{ t('initiative.tracker.defaultPipeline') }}
-                <code class="text-sky-300">{{ initiative.policy.defaultPipelineId }}</code>
+                <code class="text-app-info-300">{{ initiative.policy.defaultPipelineId }}</code>
               </li>
             </ul>
             <!-- Edit form: the two scalar knobs; planner-authored rules are preserved. -->
-            <div v-else class="flex flex-col gap-2 rounded-lg border border-slate-800 p-3">
-              <label class="flex items-center gap-2 text-[12px] text-slate-300">
+            <div v-else class="flex flex-col gap-2 rounded-lg border border-default p-3">
+              <label class="flex items-center gap-2 text-[12px] text-toned">
                 <span class="w-40">{{ t('initiative.curation.maxConcurrentField') }}</span>
                 <input
                   v-model.number="policyForm.maxConcurrent"
                   type="number"
                   min="1"
                   max="20"
-                  class="w-20 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-slate-200"
+                  class="w-20 rounded border border-muted bg-app-950 px-2 py-1 text-default"
                   data-testid="initiative-policy-max-concurrent"
                 />
               </label>
-              <label class="flex items-center gap-2 text-[12px] text-slate-300">
+              <label class="flex items-center gap-2 text-[12px] text-toned">
                 <span class="w-40">{{ t('initiative.curation.defaultPipelineField') }}</span>
                 <input
                   v-model="policyForm.defaultPipelineId"
                   type="text"
-                  class="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 font-mono text-[11px] text-slate-200"
+                  class="flex-1 rounded border border-muted bg-app-950 px-2 py-1 font-mono text-[11px] text-default"
                   data-testid="initiative-policy-default-pipeline"
                 />
               </label>
               <div class="flex gap-2">
                 <button
-                  class="rounded bg-indigo-600 px-2 py-1 text-[11px] text-white hover:bg-indigo-500 disabled:opacity-50"
+                  class="rounded bg-primary/90 px-2 py-1 text-[11px] text-inverted hover:bg-primary disabled:opacity-50"
                   :disabled="initiatives.curating"
                   data-testid="initiative-policy-save"
                   @click="savePolicy"
@@ -627,7 +633,7 @@ const { requestClose } = useUnsavedGuard({
                   {{ t('initiative.curation.save') }}
                 </button>
                 <button
-                  class="rounded border border-slate-700 px-2 py-1 text-[11px] text-slate-300 hover:bg-slate-800"
+                  class="rounded border border-muted px-2 py-1 text-[11px] text-toned hover:bg-elevated"
                   @click="editingPolicy = false"
                 >
                   {{ t('initiative.curation.cancel') }}
@@ -638,43 +644,43 @@ const { requestClose } = useUnsavedGuard({
 
           <!-- Logs -->
           <section v-if="initiative.decisions?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
               {{ t('initiative.tracker.decisions') }}
             </h3>
-            <ul class="list-inside list-disc text-[13px] text-slate-300">
+            <ul class="list-inside list-disc text-[13px] text-toned">
               <li v-for="d in initiative.decisions" :key="d.id">
                 <span class="font-medium">{{ d.title }}</span>
-                <span v-if="d.detail" class="text-slate-400"> — {{ d.detail }}</span>
+                <span v-if="d.detail" class="text-muted"> — {{ d.detail }}</span>
               </li>
             </ul>
           </section>
           <section v-if="initiative.deviations?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
               {{ t('initiative.tracker.deviations') }}
             </h3>
-            <ul class="max-w-3xl list-inside list-disc text-[13px] text-slate-300">
+            <ul class="max-w-3xl list-inside list-disc text-[13px] text-toned">
               <li v-for="d in initiative.deviations" :key="d.id">
-                <code v-if="d.itemId" class="text-slate-400">{{ d.itemId }}</code>
+                <code v-if="d.itemId" class="text-muted">{{ d.itemId }}</code>
                 {{ d.description }}
-                <span v-if="d.resolution" class="text-slate-400"> → {{ d.resolution }}</span>
+                <span v-if="d.resolution" class="text-muted"> → {{ d.resolution }}</span>
               </li>
             </ul>
           </section>
           <section v-if="initiative.followUps?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
               {{ t('initiative.tracker.followUps') }}
             </h3>
-            <ul class="flex flex-col gap-2 text-[13px] text-slate-300">
+            <ul class="flex flex-col gap-2 text-[13px] text-toned">
               <li
                 v-for="f in initiative.followUps"
                 :key="f.id"
-                class="rounded-lg border border-slate-800 p-2.5"
+                class="rounded-lg border border-default p-2.5"
                 :data-testid="`initiative-followup-${f.id}`"
               >
                 <div class="flex items-start gap-2">
                   <div class="min-w-0 flex-1">
                     <span class="font-medium">{{ f.title }}</span>
-                    <span v-if="f.detail" class="text-slate-400"> — {{ f.detail }}</span>
+                    <span v-if="f.detail" class="text-muted"> — {{ f.detail }}</span>
                   </div>
                   <UBadge
                     :color="INITIATIVE_FOLLOWUP_STATUS_CHIPS[f.status]"
@@ -688,10 +694,10 @@ const { requestClose } = useUnsavedGuard({
                 <div v-if="editable && f.status === 'open'" class="mt-2">
                   <div v-if="promotingId === f.id" class="flex flex-col gap-2">
                     <label class="flex items-center gap-2 text-[12px]">
-                      <span class="text-slate-400">{{ t('initiative.curation.phaseField') }}</span>
+                      <span class="text-muted">{{ t('initiative.curation.phaseField') }}</span>
                       <select
                         v-model="promoteForm.phaseId"
-                        class="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-slate-200"
+                        class="flex-1 rounded border border-muted bg-app-950 px-2 py-1 text-default"
                         data-testid="initiative-promote-phase"
                       >
                         <option v-for="p in phases" :key="p.id" :value="p.id">
@@ -702,13 +708,13 @@ const { requestClose } = useUnsavedGuard({
                     <input
                       v-model="promoteForm.title"
                       type="text"
-                      class="rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[12px] text-slate-200"
+                      class="rounded border border-muted bg-app-950 px-2 py-1 text-[12px] text-default"
                       :placeholder="t('initiative.curation.itemTitlePlaceholder')"
                       data-testid="initiative-promote-title"
                     />
                     <div class="flex gap-2">
                       <button
-                        class="rounded bg-indigo-600 px-2 py-1 text-[11px] text-white hover:bg-indigo-500 disabled:opacity-50"
+                        class="rounded bg-primary/90 px-2 py-1 text-[11px] text-inverted hover:bg-primary disabled:opacity-50"
                         :disabled="initiatives.curating || !promoteForm.phaseId"
                         data-testid="initiative-promote-submit"
                         @click="submitPromote(f)"
@@ -716,7 +722,7 @@ const { requestClose } = useUnsavedGuard({
                         {{ t('initiative.curation.promoteConfirm') }}
                       </button>
                       <button
-                        class="rounded border border-slate-700 px-2 py-1 text-[11px] text-slate-300 hover:bg-slate-800"
+                        class="rounded border border-muted px-2 py-1 text-[11px] text-toned hover:bg-elevated"
                         @click="promotingId = null"
                       >
                         {{ t('initiative.curation.cancel') }}
@@ -725,14 +731,14 @@ const { requestClose } = useUnsavedGuard({
                   </div>
                   <div v-else class="flex gap-1.5">
                     <button
-                      class="rounded border border-slate-700 px-1.5 py-0.5 text-[10px] text-slate-300 hover:bg-slate-800"
+                      class="rounded border border-muted px-1.5 py-0.5 text-[10px] text-toned hover:bg-elevated"
                       data-testid="initiative-followup-promote"
                       @click="startPromote(f)"
                     >
                       {{ t('initiative.curation.promote') }}
                     </button>
                     <button
-                      class="rounded border border-slate-700 px-1.5 py-0.5 text-[10px] text-slate-300 hover:bg-slate-800 disabled:opacity-50"
+                      class="rounded border border-muted px-1.5 py-0.5 text-[10px] text-toned hover:bg-elevated disabled:opacity-50"
                       :disabled="initiatives.curating"
                       data-testid="initiative-followup-dismiss"
                       @click="dismissFollowUp(f)"
@@ -745,10 +751,10 @@ const { requestClose } = useUnsavedGuard({
             </ul>
           </section>
           <section v-if="initiative.caveats?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
               {{ t('initiative.tracker.caveats') }}
             </h3>
-            <ul class="max-w-3xl list-inside list-disc text-[13px] text-slate-300">
+            <ul class="max-w-3xl list-inside list-disc text-[13px] text-toned">
               <li v-for="(c, i) in initiative.caveats" :key="i">{{ c }}</li>
             </ul>
           </section>
@@ -762,7 +768,7 @@ const { requestClose } = useUnsavedGuard({
       <aside
         v-if="runMeta"
         data-testid="initiative-tracker-run-meta"
-        class="hidden w-60 shrink-0 flex-col gap-4 overflow-y-auto 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 overflow-y-auto border-s border-default bg-default/50 px-4 py-4 lg:flex"
       >
         <StepRunMeta v-bind="runMeta" />
       </aside>

package/app/components/inputGate/InputGateNotice.vue

@@ -126,9 +126,7 @@ async function resolve(choice: 'recheck' | 'proceed') {
   <div
     class="rounded-lg border p-3"
     :class="
-      blocking
-        ? 'border-amber-300 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/40'
-        : 'border-default bg-elevated/40'
+      blocking ? 'border-app-warning-800 bg-app-warning-950/40' : 'border-default bg-elevated/40'
     "
     :data-tone="tone"
     data-testid="input-gate-notice"
@@ -137,7 +135,7 @@ async function resolve(choice: 'recheck' | 'proceed') {
       <UIcon
         :name="blocking ? 'i-lucide-file-question' : 'i-lucide-info'"
         class="mt-0.5 size-4 shrink-0"
-        :class="blocking ? 'text-amber-600 dark:text-amber-400' : 'text-muted'"
+        :class="blocking ? 'text-app-warning-400' : 'text-muted'"
       />
       <div class="min-w-0 flex-1">
         <p class="text-sm font-medium">{{ t(copy.title) }}</p>

package/app/components/judge/JudgeResultView.vue

@@ -84,10 +84,10 @@ const SEVERITY_LABELS = computed<Record<JudgeFinding['severity'], string>>(() =>
 }))
 
 const SEVERITY_CLASSES: Record<JudgeFinding['severity'], string> = {
-  low: 'border-slate-700 text-slate-300',
-  medium: 'border-amber-500/40 text-amber-300',
-  high: 'border-orange-500/40 text-orange-300',
-  critical: 'border-rose-500/40 text-rose-300',
+  low: 'border-muted text-toned',
+  medium: 'border-app-warning-500/40 text-app-warning-300',
+  high: 'border-app-hue-orange/40 text-app-hue-orange',
+  critical: 'border-app-error-500/40 text-app-error-300',
 }
 
 const DISPOSITION_LABELS = computed<
@@ -128,7 +128,7 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
   <ResultWindowShell
     :open="open"
     :icon="meta.icon"
-    icon-class="bg-amber-500/15 text-amber-300"
+    icon-class="bg-app-warning-500/15 text-app-warning-300"
     :title="headerTitle"
     :subtitle="t('judge.subtitle')"
     :step-ref="{ instanceId, stepIndex }"
@@ -150,7 +150,7 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
     <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
       <div
         v-if="!judge"
-        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="meta.icon" class="h-8 w-8 opacity-40" />
         <p class="text-sm">{{ t('judge.empty') }}</p>
@@ -159,26 +159,26 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
       <template v-else>
         <!-- The score against the task's threshold — the whole verdict in one line. -->
         <div
-          class="flex flex-wrap items-center gap-x-3 gap-y-1 rounded-lg border border-slate-800 bg-slate-950/40 px-3 py-2.5"
+          class="flex flex-wrap items-center gap-x-3 gap-y-1 rounded-lg border border-default bg-app-950/40 px-3 py-2.5"
           data-testid="judge-score"
         >
-          <span class="text-[13px] font-semibold text-slate-100">
+          <span class="text-[13px] font-semibold text-app-100">
             {{ score === null ? t('judge.notScored') : n(score, 'percent') }}
           </span>
           <span
             v-if="threshold !== null"
-            class="text-[12px] text-slate-400"
+            class="text-[12px] text-muted"
             :title="t('judge.thresholdHint')"
           >
             {{ t('judge.threshold', { threshold: n(threshold, 'percent') }) }}
           </span>
-          <span v-if="judge.disposition" class="text-[12px] text-slate-400">
+          <span v-if="judge.disposition" class="text-[12px] text-muted">
             · {{ DISPOSITION_LABELS[judge.disposition] }}
           </span>
-          <span v-if="judge.rubricOverridden" class="text-[11px] text-violet-300">
+          <span v-if="judge.rubricOverridden" class="text-[11px] text-app-secondary-300">
             · {{ t('judge.rubricOverridden') }}
           </span>
-          <span v-if="(judge.maxBounces ?? 0) > 0" class="text-[11px] text-slate-500">
+          <span v-if="(judge.maxBounces ?? 0) > 0" class="text-[11px] text-dimmed">
             ·
             {{ t('judge.reworkRounds', { spent: judge.bounces ?? 0, budget: judge.maxBounces }) }}
           </span>
@@ -189,7 +189,7 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
              name doesn't, and being overridden by the task's own choice is the normal outcome. -->
         <p
           v-if="judge.modelPin?.status === 'unavailable'"
-          class="mt-2 rounded-md border border-amber-500/30 bg-amber-500/5 px-3 py-2 text-[12px] leading-relaxed text-amber-200"
+          class="mt-2 rounded-md border border-app-warning-500/30 bg-app-warning-500/5 px-3 py-2 text-[12px] leading-relaxed text-app-warning-200"
           data-testid="judge-model-pin"
         >
           {{ t('judge.modelPinUnavailable', { model: judge.modelPin.requested }) }}
@@ -199,7 +199,7 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
              like a clean pass. -->
         <p
           v-if="judge.note"
-          class="mt-2 rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2 text-[12px] leading-relaxed text-slate-400"
+          class="mt-2 rounded-md border border-default bg-app-950/40 px-3 py-2 text-[12px] leading-relaxed text-muted"
         >
           {{ judge.note }}
         </p>
@@ -210,19 +210,19 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
           <CopyButton :text="verdict.summary" class="absolute end-1 top-1" />
           <MarkdownProse
             :text="verdict.summary"
-            class="pe-8 text-[13px] leading-relaxed text-slate-200"
+            class="pe-8 text-[13px] leading-relaxed text-default"
           />
         </div>
 
         <section v-if="findings.length" class="mt-4">
-          <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('judge.findingsHeading') }}
           </h3>
           <ul class="flex flex-col gap-2">
             <li
               v-for="(finding, i) in findings"
               :key="`${finding.title}-${i}`"
-              class="rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2"
+              class="rounded-md border border-default bg-app-950/40 px-3 py-2"
               data-testid="judge-finding"
             >
               <div class="flex flex-wrap items-center gap-2">
@@ -232,15 +232,15 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
                 >
                   {{ SEVERITY_LABELS[finding.severity] }}
                 </span>
-                <span class="text-[13px] font-medium text-slate-100">{{ finding.title }}</span>
-                <code v-if="finding.where" class="text-[11px] text-slate-500">{{
+                <span class="text-[13px] font-medium text-app-100">{{ finding.title }}</span>
+                <code v-if="finding.where" class="text-[11px] text-dimmed">{{
                   finding.where
                 }}</code>
               </div>
               <MarkdownProse
                 v-if="finding.detail"
                 :text="finding.detail"
-                class="mt-1 text-[12px] leading-relaxed text-slate-400"
+                class="mt-1 text-[12px] leading-relaxed text-muted"
               />
             </li>
           </ul>
@@ -248,10 +248,10 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
 
         <!-- The decision. Only shown while the run is actually parked on this verdict. -->
         <section v-if="awaiting" class="mt-5" data-testid="judge-decision">
-          <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+          <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('judge.decisionHeading') }}
           </h3>
-          <p class="mb-2 text-[11px] leading-relaxed text-slate-500">
+          <p class="mb-2 text-[11px] leading-relaxed text-dimmed">
             {{ t('judge.decisionDescription') }}
           </p>
           <textarea
@@ -259,9 +259,9 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
             rows="3"
             :disabled="busy"
             :placeholder="t('judge.feedbackPlaceholder')"
-            class="w-full resize-y rounded-md border border-slate-800 bg-slate-950/60 px-3 py-2 text-[13px] text-slate-200 placeholder:text-slate-600 focus:border-amber-500/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/60"
+            class="w-full resize-y rounded-md border border-default bg-app-950/60 px-3 py-2 text-[13px] text-default placeholder:text-app-600 focus:border-app-warning-500/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-warning-500/60"
           />
-          <p v-if="judgeStore.error" class="mt-2 text-[12px] text-rose-300">
+          <p v-if="judgeStore.error" class="mt-2 text-[12px] text-app-error-300">
             {{ judgeStore.error }}
           </p>
           <div class="mt-2 flex flex-wrap justify-end gap-2">
@@ -307,23 +307,21 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
 
         <!-- The round history: a looping judge must not be a black box (the gate-attempt rule). -->
         <section v-if="rounds.length > 1" class="mt-5">
-          <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('judge.roundsHeading') }}
           </h3>
           <ul class="flex flex-col gap-1.5">
             <li
               v-for="round in rounds"
               :key="round.round"
-              class="flex flex-wrap items-center gap-2 rounded-md border border-slate-800 bg-slate-950/40 px-3 py-1.5 text-[12px] text-slate-300"
+              class="flex flex-wrap items-center gap-2 rounded-md border border-default bg-app-950/40 px-3 py-1.5 text-[12px] text-toned"
               data-testid="judge-round"
               :data-round-disposition="round.disposition"
             >
-              <span class="text-slate-500">{{ t('judge.round', { round: round.round }) }}</span>
-              <span class="font-medium text-slate-100">{{
-                n(round.verdict.score, 'percent')
-              }}</span>
-              <span class="text-slate-400">{{ DISPOSITION_LABELS[round.disposition] }}</span>
-              <code v-if="round.model" class="text-[11px] text-slate-500">{{ round.model }}</code>
+              <span class="text-dimmed">{{ t('judge.round', { round: round.round }) }}</span>
+              <span class="font-medium text-app-100">{{ n(round.verdict.score, 'percent') }}</span>
+              <span class="text-muted">{{ DISPOSITION_LABELS[round.disposition] }}</span>
+              <code v-if="round.model" class="text-[11px] text-dimmed">{{ round.model }}</code>
             </li>
           </ul>
         </section>