@cat-factory/app 0.302.2 → 0.303.1

package/app/components/environments/steps/EnvReviewStep.vue

@@ -113,8 +113,8 @@ const canLeaveReview = computed(
     <!-- detection status -->
     <div class="flex items-center justify-between gap-2">
       <div class="min-w-0">
-        <p class="text-sm font-medium text-slate-200">{{ store.targetFrame?.title }}</p>
-        <p class="text-[11px] text-slate-500">{{ t('environmentWizard.review.detectHint') }}</p>
+        <p class="text-sm font-medium text-default">{{ store.targetFrame?.title }}</p>
+        <p class="text-[11px] text-dimmed">{{ t('environmentWizard.review.detectHint') }}</p>
       </div>
       <UButton
         size="xs"
@@ -130,12 +130,12 @@ const canLeaveReview = computed(
       </UButton>
     </div>
 
-    <p v-if="!store.hasRepo" class="text-[12px] text-amber-300/80">
+    <p v-if="!store.hasRepo" class="text-[12px] text-app-warning-300/80">
       {{ t('environmentWizard.review.noRepo') }}
     </p>
     <p
       v-else-if="store.detectError"
-      class="text-[12px] text-rose-300/80"
+      class="text-[12px] text-app-error-300/80"
       data-testid="env-setup-detect-error"
     >
       {{ t('environmentWizard.review.detectError') }}
@@ -145,15 +145,11 @@ const canLeaveReview = computed(
       <!-- deep analysis (opt-in; elevated to a prominent nudge when the repo ships its own CLI) -->
       <div
         class="rounded-md border p-3"
-        :class="
-          repoCliHint
-            ? 'border-primary-700/60 bg-primary-950/30'
-            : 'border-slate-800 bg-slate-900/40'
-        "
+        :class="repoCliHint ? 'border-primary/60 bg-primary/10' : 'border-default bg-default/40'"
       >
         <p
           v-if="repoCliHint"
-          class="mb-2 flex items-start gap-1.5 text-[11px] text-primary-300"
+          class="mb-2 flex items-start gap-1.5 text-[11px] text-primary"
           data-testid="env-setup-cli-nudge"
         >
           <UIcon name="i-lucide-lightbulb" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
@@ -161,10 +157,10 @@ const canLeaveReview = computed(
         </p>
         <div class="flex items-center justify-between gap-2">
           <div class="min-w-0">
-            <p class="text-[12px] font-medium text-slate-300">
+            <p class="text-[12px] font-medium text-toned">
               {{ t('environmentWizard.analysis.title') }}
             </p>
-            <p class="text-[11px] text-slate-500">{{ t('environmentWizard.analysis.hint') }}</p>
+            <p class="text-[11px] text-dimmed">{{ t('environmentWizard.analysis.hint') }}</p>
           </div>
           <UButton
             size="xs"
@@ -181,12 +177,15 @@ const canLeaveReview = computed(
         </div>
         <p
           v-if="!store.canAnalyze"
-          class="mt-2 text-[11px] text-slate-500"
+          class="mt-2 text-[11px] text-dimmed"
           data-testid="env-setup-analysis-unavailable"
         >
           {{ t('environmentWizard.analysis.unavailable') }}
         </p>
-        <p v-else-if="store.analysisStatus === 'failed'" class="mt-2 text-[11px] text-rose-300/80">
+        <p
+          v-else-if="store.analysisStatus === 'failed'"
+          class="mt-2 text-[11px] text-app-error-300/80"
+        >
           {{ t('environmentWizard.analysis.failed') }}
         </p>
         <div
@@ -194,7 +193,7 @@ const canLeaveReview = computed(
           class="mt-2 space-y-2"
           data-testid="env-setup-analysis-ready"
         >
-          <p v-if="store.merged?.summary" class="text-[11px] leading-snug text-slate-400">
+          <p v-if="store.merged?.summary" class="text-[11px] leading-snug text-muted">
             {{ store.merged.summary }}
           </p>
           <UButton
@@ -212,7 +211,7 @@ const canLeaveReview = computed(
 
       <!-- per-field provenance -->
       <div v-if="store.merged?.fields.length" class="space-y-1.5">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
           {{ t('environmentWizard.review.provenanceTitle') }}
         </p>
         <div class="flex flex-wrap gap-1.5">
@@ -262,7 +261,7 @@ const canLeaveReview = computed(
 
       <!-- compose file layering -->
       <div v-if="composeFileCandidates.length" class="space-y-1.5">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
           {{ t('environmentWizard.review.composeFiles') }}
         </p>
         <div class="flex flex-wrap gap-1.5">
@@ -283,7 +282,7 @@ const canLeaveReview = computed(
 
       <!-- compose profiles -->
       <div v-if="profileCandidates.length" class="space-y-1.5">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
           {{ t('environmentWizard.review.profiles') }}
         </p>
         <div class="flex flex-wrap gap-1.5">
@@ -304,16 +303,16 @@ const canLeaveReview = computed(
 
       <!-- seed dumps -->
       <div v-if="seedDumpCandidates.length" class="space-y-1.5">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
           {{ t('environmentWizard.review.seedDumps') }}
         </p>
         <div class="space-y-1">
           <div
             v-for="c in seedDumpCandidates"
             :key="c.path"
-            class="flex items-center justify-between gap-2 rounded border border-slate-800 bg-slate-900/40 px-2 py-1"
+            class="flex items-center justify-between gap-2 rounded border border-default bg-default/40 px-2 py-1"
           >
-            <span class="truncate text-[11px] text-slate-300">{{ c.path }}</span>
+            <span class="truncate text-[11px] text-toned">{{ c.path }}</span>
             <UButton
               size="xs"
               :color="seedAdded(c.path) ? 'success' : 'neutral'"
@@ -352,7 +351,11 @@ const canLeaveReview = computed(
             class="w-full font-mono text-[11px]"
             data-testid="env-setup-raw-text"
           />
-          <p v-if="rawError" class="text-[11px] text-rose-300/80" data-testid="env-setup-raw-error">
+          <p
+            v-if="rawError"
+            class="text-[11px] text-app-error-300/80"
+            data-testid="env-setup-raw-error"
+          >
             {{ rawError }}
           </p>
           <div class="flex justify-end">

package/app/components/environments/steps/EnvSaveStep.vue

@@ -31,7 +31,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
       <UInput v-model="store.handlerLabel" class="w-full" data-testid="env-setup-handler-label" />
     </UFormField>
 
-    <div class="rounded-md border border-slate-800 bg-slate-900/40 p-3 text-[12px] text-slate-300">
+    <div class="rounded-md border border-default bg-default/40 p-3 text-[12px] text-toned">
       <p>
         {{
           t('environmentWizard.save.summary', {
@@ -44,7 +44,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
 
     <p
       v-if="store.saveError"
-      class="text-[12px] text-rose-300/80"
+      class="text-[12px] text-app-error-300/80"
       data-testid="env-setup-save-error"
     >
       {{ store.saveError }}
@@ -66,7 +66,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
     <!-- saved: confirmation + optional trial provision -->
     <template v-else>
       <div
-        class="flex items-center gap-2 rounded-md border border-emerald-800/50 bg-emerald-950/30 p-2 text-[12px] text-emerald-200"
+        class="flex items-center gap-2 rounded-md border border-app-success-800/50 bg-app-success-950/30 p-2 text-[12px] text-app-success-200"
         data-testid="env-setup-saved"
       >
         <UIcon name="i-lucide-check-circle" class="h-4 w-4" />
@@ -74,7 +74,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
       </div>
 
       <div class="flex items-center justify-between gap-2">
-        <p class="text-[11px] text-slate-500">{{ t('environmentWizard.trial.hint') }}</p>
+        <p class="text-[11px] text-dimmed">{{ t('environmentWizard.trial.hint') }}</p>
         <UButton
           size="xs"
           variant="soft"
@@ -88,7 +88,9 @@ useEnvironmentWizardTarget(() => props.input.frameId)
           {{ t('environmentWizard.trial.run') }}
         </UButton>
       </div>
-      <p v-if="store.trialError" class="text-[11px] text-rose-300/80">{{ store.trialError }}</p>
+      <p v-if="store.trialError" class="text-[11px] text-app-error-300/80">
+        {{ store.trialError }}
+      </p>
       <ProvisioningLogsDrawer v-if="store.trialStarted" subsystem="environment" />
     </template>
 

package/app/components/environments/steps/JourneyStepNav.vue

@@ -14,7 +14,7 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <div class="flex items-center justify-between border-t border-slate-800 pt-3">
+  <div class="flex items-center justify-between border-t border-default pt-3">
     <UButton
       color="neutral"
       variant="ghost"

package/app/components/focus/BlockFocusView.vue

@@ -95,14 +95,14 @@ function openApprovalFor(approvalId: string) {
        leave animation survives this component being unmounted by its v-if gate. -->
   <div
     v-if="block && statusMeta && typeMeta"
-    class="absolute inset-0 z-30 flex flex-col bg-slate-950/95 backdrop-blur"
+    class="absolute inset-0 z-30 flex flex-col bg-app-950/95 backdrop-blur"
     role="dialog"
     aria-modal="true"
     data-testid="block-focus-view"
     :data-focus-block="block.id"
   >
     <!-- header / breadcrumb -->
-    <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">
+    <header class="flex items-center gap-3 border-b border-default px-6 py-4">
       <UButton
         icon="i-lucide-arrow-left"
         :ui="{ leadingIcon: 'rtl:-scale-x-100', trailingIcon: 'rtl:-scale-x-100' }"
@@ -113,16 +113,16 @@ function openApprovalFor(approvalId: string) {
       >
         {{ t('focus.board') }}
       </UButton>
-      <UIcon name="i-lucide-chevron-right" class="h-4 w-4 text-slate-600 rtl:-scale-x-100" />
+      <UIcon name="i-lucide-chevron-right" class="h-4 w-4 text-app-600 rtl:-scale-x-100" />
       <div
         class="flex h-9 w-9 items-center justify-center rounded-lg"
-        :style="{ backgroundColor: typeMeta.accent + '22' }"
+        :style="{ backgroundColor: tint(typeMeta.accent) }"
       >
         <UIcon :name="typeMeta.icon" class="h-5 w-5" :style="{ color: typeMeta.accent }" />
       </div>
       <div>
-        <h1 class="text-lg font-semibold text-white">{{ block.title }}</h1>
-        <div class="text-xs text-slate-500">
+        <h1 class="text-lg font-semibold text-highlighted">{{ block.title }}</h1>
+        <div class="text-xs text-dimmed">
           {{ t('focus.typeSubtitle', { type: typeMeta.label }) }}
         </div>
       </div>
@@ -199,11 +199,11 @@ function openApprovalFor(approvalId: string) {
     <div class="grid flex-1 grid-cols-[1fr_300px] gap-6 overflow-hidden p-6">
       <!-- main: pipeline flow -->
       <section
-        class="flex flex-col overflow-auto rounded-2xl border border-slate-800 bg-slate-900/60 p-6"
+        class="flex flex-col overflow-auto rounded-2xl border border-default bg-default/60 p-6"
       >
         <div class="mb-4 flex items-center gap-2">
-          <UIcon name="i-lucide-workflow" class="h-4 w-4 text-slate-500" />
-          <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-400">
+          <UIcon name="i-lucide-workflow" class="h-4 w-4 text-dimmed" />
+          <h2 class="text-sm font-semibold uppercase tracking-wide text-muted">
             {{ instance ? instance.pipelineName : t('focus.noPipelineRunning') }}
           </h2>
         </div>
@@ -217,33 +217,31 @@ function openApprovalFor(approvalId: string) {
 
         <div
           v-else
-          class="flex flex-1 items-center justify-center rounded-xl border border-dashed border-slate-700 text-sm text-slate-500"
+          class="flex flex-1 items-center justify-center rounded-xl border border-dashed border-muted text-sm text-dimmed"
         >
           {{ t('focus.emptyPipelineHint') }}
         </div>
       </section>
 
       <!-- side: details -->
-      <aside
-        class="space-y-4 overflow-auto rounded-2xl border border-slate-800 bg-slate-900/60 p-5"
-      >
+      <aside class="space-y-4 overflow-auto rounded-2xl border border-default bg-default/60 p-5">
         <div>
-          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('focus.description') }}
           </div>
-          <p class="text-sm text-slate-300">{{ block.description }}</p>
+          <p class="text-sm text-toned">{{ block.description }}</p>
         </div>
         <div v-if="instance">
-          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('focus.overallProgress') }}
           </div>
           <UProgress :model-value="Math.round(block.progress * 100)" />
-          <div class="mt-1 text-[11px] text-slate-400">
+          <div class="mt-1 text-[11px] text-muted">
             {{ n(block.progress, 'percent') }}
           </div>
         </div>
         <div>
-          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('focus.dependencies') }}
           </div>
           <div v-if="deps.length" class="flex flex-wrap gap-1">
@@ -251,7 +249,7 @@ function openApprovalFor(approvalId: string) {
               {{ d.title }}
             </UBadge>
           </div>
-          <div v-else class="text-[11px] text-slate-500">{{ t('focus.noDependencies') }}</div>
+          <div v-else class="text-[11px] text-dimmed">{{ t('focus.noDependencies') }}</div>
         </div>
       </aside>
     </div>

package/app/components/followUp/FollowUpWindow.vue

@@ -120,12 +120,12 @@ const STATUS_META: Record<
   FollowUpItem['status'],
   { badge: 'neutral' | 'info' | 'success' | 'warning'; text: string }
 > = {
-  pending: { badge: 'warning', text: 'text-amber-300' },
-  filed: { badge: 'success', text: 'text-emerald-300' },
-  queued: { badge: 'info', text: 'text-sky-300' },
-  answered: { badge: 'info', text: 'text-sky-300' },
-  closed: { badge: 'neutral', text: 'text-slate-300' },
-  dismissed: { badge: 'neutral', text: 'text-slate-400' },
+  pending: { badge: 'warning', text: 'text-app-warning-300' },
+  filed: { badge: 'success', text: 'text-app-success-300' },
+  queued: { badge: 'info', text: 'text-app-info-300' },
+  answered: { badge: 'info', text: 'text-app-info-300' },
+  closed: { badge: 'neutral', text: 'text-toned' },
+  dismissed: { badge: 'neutral', text: 'text-muted' },
 }
 
 /** Whether a decided item carries a recorded reply to show ('answered' or 'closed'). */
@@ -138,7 +138,7 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
   <ResultWindowShell
     :open="open"
     :icon="FOLLOW_UP_COMPANION_META.icon"
-    icon-class="bg-pink-500/15 text-pink-300"
+    icon-class="bg-app-hue-pink/15 text-app-hue-pink"
     :title="headerTitle"
     :subtitle="t('followUp.subtitle')"
     width="3xl"
@@ -158,11 +158,11 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
       <!-- Empty -->
       <div
         v-if="items.length === 0"
-        class="flex h-full flex-col items-center justify-center gap-2 py-10 text-center text-slate-400"
+        class="flex h-full flex-col items-center justify-center gap-2 py-10 text-center text-muted"
       >
         <UIcon :name="FOLLOW_UP_COMPANION_META.icon" class="h-8 w-8 opacity-40" />
         <p class="text-sm">{{ t('followUp.empty.title') }}</p>
-        <p class="max-w-sm text-[11px] text-slate-500">
+        <p class="max-w-sm text-[11px] text-dimmed">
           {{ t('followUp.empty.hint') }}
         </p>
       </div>
@@ -170,7 +170,7 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
       <div v-else class="space-y-3">
         <p
           v-if="followUps.error"
-          class="rounded-md bg-rose-500/10 px-3 py-2 text-[12px] text-rose-300"
+          class="rounded-md bg-app-error-500/10 px-3 py-2 text-[12px] text-app-error-300"
         >
           {{ followUps.error }}
         </p>
@@ -178,29 +178,29 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
         <article
           v-for="item in items"
           :key="item.id"
-          class="rounded-xl border border-slate-800 bg-slate-900/60 px-4 py-3"
-          :class="item.status === 'pending' ? 'border-amber-500/40' : ''"
+          class="rounded-xl border border-default bg-default/60 px-4 py-3"
+          :class="item.status === 'pending' ? 'border-app-warning-500/40' : ''"
         >
           <div class="flex items-start gap-2">
             <UIcon
               :name="item.kind === 'question' ? 'i-lucide-circle-help' : 'i-lucide-compass'"
               class="mt-0.5 h-4 w-4 shrink-0"
-              :class="item.kind === 'question' ? 'text-sky-300' : 'text-pink-300'"
+              :class="item.kind === 'question' ? 'text-app-info-300' : 'text-app-hue-pink'"
             />
             <div class="min-w-0 flex-1">
               <div class="flex items-center gap-2">
-                <h3 class="min-w-0 flex-1 truncate text-[13px] font-medium text-slate-100">
+                <h3 class="min-w-0 flex-1 truncate text-[13px] font-medium text-app-100">
                   {{ item.title }}
                 </h3>
                 <UBadge :color="STATUS_META[item.status].badge" variant="subtle" size="sm">
                   {{ t(STATUS_LABEL_KEYS[item.status]) }}
                 </UBadge>
               </div>
-              <p v-if="item.detail" class="mt-1 whitespace-pre-wrap text-[12px] text-slate-300">
+              <p v-if="item.detail" class="mt-1 whitespace-pre-wrap text-[12px] text-toned">
                 {{ item.detail }}
               </p>
-              <p v-if="item.suggestedAction" class="mt-1 text-[11px] text-slate-400">
-                <span class="text-slate-500">{{ t('followUp.suggested') }}</span>
+              <p v-if="item.suggestedAction" class="mt-1 text-[11px] text-muted">
+                <span class="text-dimmed">{{ t('followUp.suggested') }}</span>
                 {{ item.suggestedAction }}
               </p>
               <p v-if="item.status === 'filed' && item.ticketUrl" class="mt-1 text-[11px]">
@@ -208,13 +208,13 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
                   :href="item.ticketUrl"
                   target="_blank"
                   rel="noopener"
-                  class="text-emerald-300 hover:underline"
+                  class="text-app-success-300 hover:underline"
                 >
                   {{ item.ticketExternalId ?? t('followUp.viewIssue') }}
                 </a>
               </p>
-              <p v-if="hasRecordedAnswer(item)" class="mt-1 text-[11px] text-slate-300">
-                <span class="text-slate-500">
+              <p v-if="hasRecordedAnswer(item)" class="mt-1 text-[11px] text-toned">
+                <span class="text-dimmed">
                   {{
                     item.status === 'closed' ? t('followUp.yourRuling') : t('followUp.yourAnswer')
                   }}
@@ -223,7 +223,7 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
               </p>
               <!-- A decision that was made and then thrown away when the budget ran out. It must
                    not read like one the Coder acted on. -->
-              <p v-if="item.sendBackDropped" class="mt-1 text-[11px] text-amber-300">
+              <p v-if="item.sendBackDropped" class="mt-1 text-[11px] text-app-warning-300">
                 {{ t('followUp.sendBackDropped') }}
               </p>
 
@@ -235,7 +235,7 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
                     v-model="drafts[item.id]"
                     rows="2"
                     :placeholder="t('followUp.answerPlaceholder')"
-                    class="w-full resize-y rounded-md border border-slate-700 bg-slate-950/60 px-2.5 py-1.5 text-[12px] text-slate-100 placeholder:text-slate-600 focus:border-sky-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/60"
+                    class="w-full resize-y rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-[12px] text-app-100 placeholder:text-app-600 focus:border-app-info-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-info-500/60"
                   />
                   <!-- Wraps, like the follow-up row below: three buttons whose labels are two
                        words each in English are one long line in most of the other locales, and
@@ -323,7 +323,7 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
     </div>
 
     <footer
-      class="flex items-center justify-between border-t border-slate-800 px-5 py-2.5 text-[11px] text-slate-400"
+      class="flex items-center justify-between border-t border-default px-5 py-2.5 text-[11px] text-muted"
     >
       <span>
         {{