@cat-factory/app 0.302.1 → 0.303.0

package/app/components/outcome/OutcomeSummaryWindow.vue

@@ -194,9 +194,9 @@ const SPEC_JOIN_KEYS: Record<Exclude<OutcomeSpecJoin, 'joined'>, string> = {
 }
 
 const VERDICT_META: Record<RequirementVerdictStatus, { color: string; key: string }> = {
-  met: { color: '#22c55e', key: 'outcome.requirements.verdict.met' },
-  not_met: { color: '#ef4444', key: 'outcome.requirements.verdict.not_met' },
-  not_covered: { color: '#64748b', key: 'outcome.requirements.verdict.not_covered' },
+  met: { color: 'var(--ui-success)', key: 'outcome.requirements.verdict.met' },
+  not_met: { color: 'var(--ui-error)', key: 'outcome.requirements.verdict.not_met' },
+  not_covered: { color: 'var(--ui-text-muted)', key: 'outcome.requirements.verdict.not_covered' },
 }
 const SEVERITY_KEYS: Record<TestConcernSeverity, string> = {
   low: 'outcome.tests.severity.low',
@@ -412,7 +412,7 @@ function openTestReport() {
   <ResultWindowShell
     :open="open"
     icon="i-lucide-clipboard-check"
-    icon-class="bg-sky-500/15 text-sky-300"
+    icon-class="bg-app-info-500/15 text-app-info-300"
     :title="headerTitle"
     :subtitle="t('outcome.subtitle')"
     width="3xl"
@@ -458,16 +458,16 @@ function openTestReport() {
 
       <!-- What was asked, in the requester's own words. -->
       <section class="mb-5">
-        <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('outcome.ask.title') }}
         </h3>
         <MarkdownProse
           v-if="outcome.ask"
           :text="outcome.ask"
-          class="text-[13px] leading-relaxed text-slate-300"
+          class="text-[13px] leading-relaxed text-toned"
           data-testid="outcome-ask"
         />
-        <p v-else class="text-[13px] italic leading-relaxed text-slate-500">
+        <p v-else class="text-[13px] italic leading-relaxed text-dimmed">
           {{ t('outcome.ask.none') }}
         </p>
       </section>
@@ -477,25 +477,25 @@ function openTestReport() {
            agents actually read, and every section below is a statement about work done against
            it. A design that moved mid-run is the reading that changes all of them. -->
       <section class="mb-5" data-testid="outcome-sources">
-        <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('outcome.sources.title') }}
         </h3>
         <div v-if="outcome.sources.status === 'reported'" class="space-y-1">
           <div
             v-for="source in sourceRows"
             :key="`${source.origin}:${source.url || source.title}`"
-            class="rounded-md border border-slate-800 bg-slate-900/60 px-2 py-1.5"
+            class="rounded-md border border-default bg-default/60 px-2 py-1.5"
             data-testid="outcome-source"
           >
             <DocumentOriginLink
               :url="source.url ?? ''"
-              class="flex items-center gap-1.5 text-xs text-slate-300"
-              hover-class="hover:text-white"
+              class="flex items-center gap-1.5 text-xs text-toned"
+              hover-class="hover:text-highlighted"
             >
-              <UIcon :name="source.icon" class="h-3.5 w-3.5 shrink-0 text-indigo-400" />
+              <UIcon :name="source.icon" class="h-3.5 w-3.5 shrink-0 text-primary" />
               <span class="truncate">{{ source.title }}</span>
             </DocumentOriginLink>
-            <p class="mt-0.5 text-[11px] text-slate-500" data-testid="outcome-source-revision">
+            <p class="mt-0.5 text-[11px] text-dimmed" data-testid="outcome-source-revision">
               {{ source.revision }}
             </p>
             <!-- Stated separately from the revision above: the last revision alone says the run
@@ -503,21 +503,21 @@ function openTestReport() {
                  changed under it. -->
             <p
               v-if="source.movedDuringRun"
-              class="mt-0.5 text-[11px] text-amber-300"
+              class="mt-0.5 text-[11px] text-app-warning-300"
               data-testid="outcome-source-moved"
             >
               {{ t('outcome.sources.moved') }}
             </p>
           </div>
         </div>
-        <p v-else class="text-[13px] italic leading-relaxed text-slate-500">
+        <p v-else class="text-[13px] italic leading-relaxed text-dimmed">
           {{ t(SOURCES_GAP_KEYS[outcome.sources.gap]) }}
         </p>
       </section>
 
       <!-- Requirement coverage: which required behaviours were checked, and what was seen. -->
       <section class="mb-5" data-testid="outcome-requirements">
-        <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('outcome.requirements.title') }}
         </h3>
         <template v-if="outcome.requirements.status === 'reported'">
@@ -550,7 +550,7 @@ function openTestReport() {
                and do not cover rather than letting them read as the whole picture. -->
           <p
             v-if="specNote"
-            class="mb-2 text-[11px] leading-relaxed text-amber-300/90"
+            class="mb-2 text-[11px] leading-relaxed text-app-warning-300/90"
             data-testid="outcome-spec-note"
           >
             {{ specNote }}
@@ -560,7 +560,7 @@ function openTestReport() {
                deciding which of the two numbers to distrust. -->
           <p
             v-if="unmatchedVerdicts > 0"
-            class="mb-2 text-[11px] leading-relaxed text-amber-300/90"
+            class="mb-2 text-[11px] leading-relaxed text-app-warning-300/90"
             data-testid="outcome-unmatched-verdicts"
           >
             {{ t('outcome.requirements.unmatchedVerdicts', { count: unmatchedVerdicts }) }}
@@ -569,7 +569,7 @@ function openTestReport() {
             <li
               v-for="req in requirementRows"
               :key="req.id"
-              class="flex items-start gap-2 rounded-md border border-slate-800 bg-slate-950/40 p-2"
+              class="flex items-start gap-2 rounded-md border border-default bg-app-950/40 p-2"
               data-testid="outcome-requirement"
             >
               <span
@@ -578,7 +578,7 @@ function openTestReport() {
               />
               <div class="min-w-0">
                 <div class="flex flex-wrap items-center gap-1.5">
-                  <span class="text-[13px] text-slate-200">{{ req.title ?? req.id }}</span>
+                  <span class="text-[13px] text-default">{{ req.title ?? req.id }}</span>
                   <UBadge
                     v-if="req.regression"
                     color="error"
@@ -588,18 +588,18 @@ function openTestReport() {
                   >
                     {{ t('outcome.requirements.regressionTag') }}
                   </UBadge>
-                  <span class="text-[10px] uppercase tracking-wide text-slate-500">
+                  <span class="text-[10px] uppercase tracking-wide text-dimmed">
                     {{ t(VERDICT_META[req.verdict].key) }}
                   </span>
                 </div>
-                <p v-if="req.detail" class="mt-0.5 text-[12px] leading-relaxed text-slate-400">
+                <p v-if="req.detail" class="mt-0.5 text-[12px] leading-relaxed text-muted">
                   {{ req.detail }}
                 </p>
               </div>
             </li>
           </ul>
         </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(REQUIREMENTS_GAP_KEYS[outcome.requirements.gap]) }}
         </p>
       </section>
@@ -607,7 +607,7 @@ function openTestReport() {
       <!-- How it was tested: the tester's own verdict and prose, attributed as its account. -->
       <section class="mb-5" data-testid="outcome-tests">
         <div class="mb-1.5 flex flex-wrap 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('outcome.tests.title') }}
           </h3>
           <UBadge
@@ -642,15 +642,15 @@ function openTestReport() {
         <template v-if="outcome.tests.status === 'reported'">
           <p
             v-if="outcome.tests.abortReason"
-            class="mb-2 rounded-md border border-rose-900/70 bg-rose-500/10 p-2 text-[13px] leading-relaxed text-rose-200"
+            class="mb-2 rounded-md border border-app-error-900/70 bg-app-error-500/10 p-2 text-[13px] leading-relaxed text-app-error-200"
             data-testid="outcome-tests-abort"
           >
             {{ t('outcome.tests.abort', { reason: outcome.tests.abortReason }) }}
           </p>
-          <p v-if="outcome.tests.summary" class="text-[13px] leading-relaxed text-slate-300">
+          <p v-if="outcome.tests.summary" class="text-[13px] leading-relaxed text-toned">
             {{ t('outcome.tests.summary', { summary: outcome.tests.summary }) }}
           </p>
-          <p class="mt-1.5 text-[12px] text-slate-400">
+          <p class="mt-1.5 text-[12px] text-muted">
             {{
               t('outcome.tests.counts', {
                 passed: outcome.tests.passed,
@@ -663,7 +663,7 @@ function openTestReport() {
             <li
               v-for="(concern, i) in outcome.tests.concerns"
               :key="i"
-              class="flex items-start gap-2 text-[12px] text-slate-300"
+              class="flex items-start gap-2 text-[12px] text-toned"
               data-testid="outcome-concern"
             >
               <UBadge :color="SEVERITY_COLOR[concern.severity]" variant="subtle" size="sm">
@@ -673,18 +673,18 @@ function openTestReport() {
             </li>
           </ul>
         </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(TESTS_GAP_KEYS[outcome.tests.gap]) }}
         </p>
       </section>
 
       <!-- What it looks like: the captured views, and whether a human was asked about them. -->
       <section class="mb-5" data-testid="outcome-visuals">
-        <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('outcome.visuals.title') }}
         </h3>
         <template v-if="outcome.visuals.status === 'reported'">
-          <p class="mb-2 text-[12px] leading-relaxed text-slate-400">
+          <p class="mb-2 text-[12px] leading-relaxed text-muted">
             {{
               outcome.visuals.source === 'visual_confirm'
                 ? t('outcome.visuals.source.visual_confirm')
@@ -696,7 +696,7 @@ function openTestReport() {
               v-for="(view, position) in outcome.visuals.views"
               :key="`${position}:${view.view}`"
               type="button"
-              class="group overflow-hidden rounded-md border border-slate-800 bg-slate-950/60 text-start transition hover:border-slate-600"
+              class="group overflow-hidden rounded-md border border-default bg-app-950/60 text-start transition hover:border-app-600"
               :disabled="!view.artifactId"
               data-testid="outcome-shot"
               @click="openShot(view, position)"
@@ -707,7 +707,7 @@ function openTestReport() {
                 :alt="t('outcome.visuals.shotAlt', { view: view.view })"
                 class="h-24 w-full object-cover object-top"
               />
-              <div v-else class="flex h-24 w-full items-center justify-center text-slate-600">
+              <div v-else class="flex h-24 w-full items-center justify-center text-app-600">
                 <UIcon
                   :name="
                     view.artifactId && blobs.statusFor(view.artifactId) === 'error'
@@ -718,13 +718,13 @@ function openTestReport() {
                 />
               </div>
               <span
-                class="flex items-center gap-1 truncate px-1.5 py-1 text-[11px] text-slate-300"
+                class="flex items-center gap-1 truncate px-1.5 py-1 text-[11px] text-toned"
                 :title="view.view"
               >
                 <UIcon
                   v-if="view.referenceArtifactId"
                   name="i-lucide-images"
-                  class="h-3 w-3 shrink-0 text-sky-300"
+                  class="h-3 w-3 shrink-0 text-app-info-300"
                   :title="t('outcome.visuals.hasReference')"
                 />
                 {{ view.view }}
@@ -733,12 +733,12 @@ function openTestReport() {
           </div>
         </template>
         <template v-else>
-          <p class="text-[13px] italic leading-relaxed text-slate-500">
+          <p class="text-[13px] italic leading-relaxed text-dimmed">
             {{ t(VISUALS_GAP_KEYS[outcome.visuals.gap]) }}
           </p>
           <p
             v-if="outcome.visuals.detail"
-            class="mt-1 text-[12px] leading-relaxed text-slate-500"
+            class="mt-1 text-[12px] leading-relaxed text-dimmed"
             data-testid="outcome-visuals-detail"
           >
             {{ outcome.visuals.detail }}
@@ -750,14 +750,14 @@ function openTestReport() {
            not read diffs starts from. Beside the captured views on purpose: the shots are what
            this run saw, this is the thing itself. -->
       <section class="mb-5" data-testid="outcome-environments">
-        <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('outcome.environments.title') }}
         </h3>
         <template v-if="outcome.environments.status === 'reported'">
           <div
             v-for="row in environmentRows"
             :key="row.key"
-            class="mb-2 rounded-md border border-slate-800 bg-slate-950/40 px-2.5 py-2 last:mb-0"
+            class="mb-2 rounded-md border border-default bg-app-950/40 px-2.5 py-2 last:mb-0"
             data-testid="outcome-environment"
             :data-state="row.state"
           >
@@ -765,10 +765,10 @@ function openTestReport() {
               <UBadge :color="ENVIRONMENT_STATE_COLOR[row.state]" variant="subtle" size="sm">
                 {{ t(ENVIRONMENT_STATE_KEYS[row.state]) }}
               </UBadge>
-              <span v-if="row.service" class="truncate text-[12px] text-slate-300">
+              <span v-if="row.service" class="truncate text-[12px] text-toned">
                 {{ row.service }}
               </span>
-              <span class="text-[11px] text-slate-500">
+              <span class="text-[11px] text-dimmed">
                 {{ t(ENVIRONMENT_ORIGIN_KEYS[row.origin]) }}
               </span>
             </div>
@@ -789,15 +789,15 @@ function openTestReport() {
             </UButton>
             <p
               v-else-if="row.url"
-              class="mt-1.5 break-all text-[12px] text-slate-500"
+              class="mt-1.5 break-all text-[12px] text-dimmed"
               data-testid="outcome-environment-url"
             >
               {{ row.url }}
             </p>
-            <p v-if="row.retained" class="mt-1 text-[11px] text-slate-400">
+            <p v-if="row.retained" class="mt-1 text-[11px] text-muted">
               {{ t('outcome.environments.retained') }}
             </p>
-            <p v-if="row.expiresAt" class="mt-1 text-[11px] text-slate-500">
+            <p v-if="row.expiresAt" class="mt-1 text-[11px] text-dimmed">
               {{
                 row.lapsed
                   ? t('outcome.environments.expired', { date: d(new Date(row.expiresAt), 'long') })
@@ -810,7 +810,7 @@ function openTestReport() {
                  otherwise holds "quota exceeded" reports a fault the environment does not have. -->
             <p
               v-if="row.detail"
-              class="mt-1 break-words text-[12px] leading-relaxed text-slate-500"
+              class="mt-1 break-words text-[12px] leading-relaxed text-dimmed"
               data-testid="outcome-environment-detail"
               :data-detail-kind="row.detailKind"
             >
@@ -822,14 +822,14 @@ function openTestReport() {
             </p>
           </div>
         </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(ENVIRONMENTS_GAP_KEYS[outcome.environments.gap]) }}
         </p>
       </section>
 
       <!-- The machine checks, listed only where one actually recorded a verdict. -->
       <section v-if="checkRows.length" data-testid="outcome-checks">
-        <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('outcome.checks.title') }}
         </h3>
         <div class="flex flex-wrap items-center gap-1.5">

package/app/components/palettes/AgentPalette.vue

@@ -57,7 +57,7 @@ function toggle(id: string) {
 
 <template>
   <div class="space-y-2">
-    <p class="px-1 text-[11px] text-slate-500">{{ t('palette.hint') }}</p>
+    <p class="px-1 text-[11px] text-dimmed">{{ t('palette.hint') }}</p>
     <!-- The two catalog dials, one above the other: what this pipeline is for, and how deep into
          the agent catalog to look. Both narrow the sections below, and each states its own count.
          Stacked rather than side by side because the palette column is a third of the slideover:
@@ -75,7 +75,7 @@ function toggle(id: string) {
       <section v-for="g in groups" :key="g.id">
         <button
           type="button"
-          class="flex w-full items-center gap-1.5 rounded px-1 py-1 text-start text-[11px] font-semibold uppercase tracking-wide text-slate-400 transition hover:text-slate-200"
+          class="flex w-full items-center gap-1.5 rounded px-1 py-1 text-start text-[11px] font-semibold uppercase tracking-wide text-muted transition hover:text-default"
           @click="toggle(g.id)"
         >
           <UIcon
@@ -83,29 +83,29 @@ function toggle(id: string) {
             class="h-3.5 w-3.5 shrink-0"
           />
           <span>{{ g.label }}</span>
-          <span class="ms-auto text-slate-600">{{ g.agents.length }}</span>
+          <span class="ms-auto text-app-600">{{ g.agents.length }}</span>
         </button>
         <div v-if="!isCollapsed(g.id)" class="mt-1 space-y-1.5">
           <button
             v-for="a in g.agents"
             :key="a.kind"
             type="button"
-            class="flex w-full items-center gap-2.5 rounded-lg border border-slate-700 bg-slate-800/60 p-2 text-start transition hover:border-slate-500 hover:bg-slate-800"
+            class="flex w-full items-center gap-2.5 rounded-lg border border-muted bg-elevated/60 p-2 text-start transition hover:border-app-500 hover:bg-elevated"
             :title="a.description"
             :data-testid="`palette-agent-${a.kind}`"
             @click="$emit('add', a.kind)"
           >
             <div
               class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg"
-              :style="{ backgroundColor: a.color + '22' }"
+              :style="{ backgroundColor: tint(a.color) }"
             >
               <UIcon :name="a.icon" class="h-4 w-4" :style="{ color: a.color }" />
             </div>
             <div class="min-w-0">
-              <div class="text-xs font-semibold text-slate-100">{{ a.label }}</div>
-              <div class="truncate text-[10px] text-slate-400">{{ a.description }}</div>
+              <div class="text-xs font-semibold text-app-100">{{ a.label }}</div>
+              <div class="truncate text-[10px] text-muted">{{ a.description }}</div>
             </div>
-            <UIcon name="i-lucide-plus" class="ms-auto h-4 w-4 shrink-0 text-slate-500" />
+            <UIcon name="i-lucide-plus" class="ms-auto h-4 w-4 shrink-0 text-dimmed" />
           </button>
         </div>
       </section>

package/app/components/palettes/AgentTierSelect.vue

@@ -60,7 +60,7 @@ const items = computed(() => [
         </span>
       </UButton>
     </UDropdownMenu>
-    <p v-if="props.hiddenCount" class="px-1 text-[10px] text-slate-500">
+    <p v-if="props.hiddenCount" class="px-1 text-[10px] text-dimmed">
       {{ t('agentTier.hidden', { count: props.hiddenCount }, props.hiddenCount) }}
     </p>
   </div>

package/app/components/palettes/PipelinePurposeSelect.vue

@@ -71,7 +71,7 @@ const items = computed(() => [
         <span class="truncate"> {{ t('pipeline.builder.purposeLabel') }}: {{ current }} </span>
       </UButton>
     </UDropdownMenu>
-    <p v-if="props.hiddenCount" class="px-1 text-[10px] text-slate-500">
+    <p v-if="props.hiddenCount" class="px-1 text-[10px] text-dimmed">
       {{ t('palette.purposeHidden', { count: props.hiddenCount }, props.hiddenCount) }}
     </p>
   </div>