@cat-factory/app 0.302.1 → 0.303.0

package/app/components/tutorial/TutorialCatalogue.vue

@@ -58,7 +58,7 @@ const statusColor = (row: TutorialCatalogueRow) =>
   >
     <template #body>
       <div class="space-y-4" data-testid="tutorial-catalogue">
-        <p v-if="rows.length > 0" class="text-xs text-slate-400" data-testid="tutorial-progress">
+        <p v-if="rows.length > 0" class="text-xs text-muted" data-testid="tutorial-progress">
           {{
             t('tutorial.catalogue.progress', {
               completed: progress.completed,
@@ -70,17 +70,17 @@ const statusColor = (row: TutorialCatalogueRow) =>
           <li
             v-for="row in rows"
             :key="row.tour.id"
-            class="flex items-start gap-3 rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+            class="flex items-start gap-3 rounded-lg border border-default bg-default/60 p-3"
             :class="row.startable ? '' : 'opacity-75'"
             :data-testid="`tutorial-catalogue-entry-${row.tour.id}`"
           >
             <UIcon
               :name="row.tour.icon ?? 'i-lucide-compass'"
-              class="mt-0.5 h-5 w-5 shrink-0 text-primary-400"
+              class="mt-0.5 h-5 w-5 shrink-0 text-primary"
             />
             <div class="min-w-0 flex-1 space-y-1">
               <div class="flex flex-wrap items-center gap-2">
-                <span class="text-sm font-medium text-slate-100">{{ t(row.tour.titleKey) }}</span>
+                <span class="text-sm font-medium text-app-100">{{ t(row.tour.titleKey) }}</span>
                 <UBadge
                   v-if="showsStatus(row)"
                   :color="statusColor(row)"
@@ -91,15 +91,15 @@ const statusColor = (row: TutorialCatalogueRow) =>
                   {{ t(TUTORIAL_STATUS_KEYS[row.state]) }}
                 </UBadge>
               </div>
-              <p class="text-xs text-slate-400">{{ t(row.tour.descriptionKey) }}</p>
-              <p v-if="row.stepCount !== null" class="text-xs text-slate-500">
+              <p class="text-xs text-muted">{{ t(row.tour.descriptionKey) }}</p>
+              <p v-if="row.stepCount !== null" class="text-xs text-dimmed">
                 {{ t('tutorial.catalogue.steps', { count: row.stepCount }, row.stepCount) }}
               </p>
               <!-- A held-back tour says what would unlock it, rather than vanishing from the
                    list: these are things the reader can go and do. -->
               <div
                 v-else-if="row.availability === 'blocked'"
-                class="text-xs text-slate-500"
+                class="text-xs text-dimmed"
                 :data-testid="`tutorial-catalogue-requirements-${row.tour.id}`"
               >
                 <span>{{ t('tutorial.catalogue.blocked') }}</span>
@@ -112,7 +112,7 @@ const statusColor = (row: TutorialCatalogueRow) =>
               </div>
               <!-- Requirements met, but every step is about a branch this board isn't on:
                    nothing to go and fix, so it must not read like the case above. -->
-              <p v-else class="text-xs text-slate-500">
+              <p v-else class="text-xs text-dimmed">
                 {{ t('tutorial.catalogue.notApplicable') }}
               </p>
             </div>
@@ -130,7 +130,7 @@ const statusColor = (row: TutorialCatalogueRow) =>
         </ul>
         <!-- No tours at all is a real state (a deployment may register none of its own and
              strip the built-ins), and it is not the same as one whose tours are all blocked. -->
-        <p v-if="rows.length === 0" class="text-sm text-slate-400">
+        <p v-if="rows.length === 0" class="text-sm text-muted">
           {{ t('tutorial.catalogue.empty') }}
         </p>
       </div>

package/app/components/tutorial/TutorialNudge.vue

@@ -64,7 +64,7 @@ function take(tourId: string) {
          this far, which is acceptable in a way the standing overlap was not: it clears itself. -->
     <div
       v-if="offered && !suppressed"
-      class="fixed end-4 bottom-20 z-50 w-80 max-w-[calc(100vw-32px)] rounded-xl border border-slate-700 bg-slate-900/95 p-3 shadow-2xl backdrop-blur"
+      class="fixed end-4 bottom-20 z-50 w-80 max-w-[calc(100vw-32px)] rounded-xl border border-muted bg-default/95 p-3 shadow-2xl backdrop-blur"
       role="status"
       aria-live="polite"
       data-testid="tutorial-nudge"
@@ -72,14 +72,14 @@ function take(tourId: string) {
       <div class="flex items-start gap-2">
         <UIcon
           :name="offered.icon ?? 'i-lucide-graduation-cap'"
-          class="text-primary-300 mt-0.5 h-4 w-4 shrink-0"
+          class="text-primary mt-0.5 h-4 w-4 shrink-0"
         />
         <div class="min-w-0 flex-1">
-          <p class="text-[11px] tracking-wide text-slate-400 uppercase">
+          <p class="text-[11px] tracking-wide text-muted uppercase">
             {{ t('tutorial.nudge.label') }}
           </p>
-          <p class="mt-0.5 text-sm font-medium text-slate-100">{{ t(offered.titleKey) }}</p>
-          <p class="mt-0.5 text-xs text-slate-400">{{ t(offered.descriptionKey) }}</p>
+          <p class="mt-0.5 text-sm font-medium text-app-100">{{ t(offered.titleKey) }}</p>
+          <p class="mt-0.5 text-xs text-muted">{{ t(offered.descriptionKey) }}</p>
         </div>
         <UButton
           size="xs"

package/app/components/tutorial/TutorialOverlay.vue

@@ -541,7 +541,7 @@ onUnmounted(() => {
            which is exactly the involuntary movement `prefers-reduced-motion` is about. -->
       <div
         v-if="targetRect"
-        class="ring-primary-400 outline-primary-400/25 pointer-events-none fixed z-[70] rounded-lg outline-4 ring-2 motion-safe:transition-all motion-safe:duration-150"
+        class="ring-primary outline-primary/25 pointer-events-none fixed z-[70] rounded-lg outline-4 ring-2 motion-safe:transition-all motion-safe:duration-150"
         :style="{
           top: `${targetRect.top - 4}px`,
           left: `${targetRect.left - 4}px`,
@@ -569,27 +569,27 @@ onUnmounted(() => {
         role="dialog"
         :tabindex="cardFocusable ? -1 : undefined"
         :aria-label="t('tutorial.overlay.ariaLabel')"
-        class="pointer-events-auto fixed z-[70] w-80 max-w-[calc(100vw-16px)] rounded-xl border border-slate-700 bg-slate-900 p-4 shadow-2xl outline-none focus-visible:ring-2 focus-visible:ring-primary-400"
+        class="pointer-events-auto fixed z-[70] w-80 max-w-[calc(100vw-16px)] rounded-xl border border-muted bg-default p-4 shadow-2xl outline-none focus-visible:ring-2 focus-visible:ring-primary"
         :style="{ top: `${layout.top}px`, left: `${layout.left}px` }"
         data-testid="tutorial-tooltip"
         @pointerdown.stop
         @focusout="onCardFocusOut"
       >
         <div class="mb-1 flex items-start justify-between gap-3">
-          <h3 class="text-sm font-semibold text-slate-100">{{ t(step.titleKey) }}</h3>
-          <span class="shrink-0 text-xs text-slate-500">
+          <h3 class="text-sm font-semibold text-app-100">{{ t(step.titleKey) }}</h3>
+          <span class="shrink-0 text-xs text-dimmed">
             {{ t('tutorial.overlay.progress', { current: tutorial.stepIndex + 1, total }) }}
           </span>
         </div>
         <!-- `bodyParams` carries the fixed proper nouns a step names (a repository slug),
              which live in the catalog's `{named}` placeholders rather than in nine
              translations of the same literal. Absent for most steps. -->
-        <p class="text-sm text-slate-300">
+        <p class="text-sm text-toned">
           {{ t(step.bodyKey, step.bodyParams ?? {}) }}
         </p>
         <p
           v-if="searching"
-          class="mt-2 flex items-center gap-1.5 text-xs text-slate-400"
+          class="mt-2 flex items-center gap-1.5 text-xs text-muted"
           data-testid="tutorial-searching"
         >
           <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 motion-safe:animate-spin" />
@@ -597,7 +597,7 @@ onUnmounted(() => {
         </p>
         <p
           v-else-if="step.advanceOn === 'target-click'"
-          class="text-primary-300 mt-2 text-xs"
+          class="text-primary mt-2 text-xs"
           data-testid="tutorial-click-hint"
         >
           {{ t('tutorial.overlay.clickHint') }}
@@ -606,7 +606,7 @@ onUnmounted(() => {
              whole tour: say so rather than congratulating the user either way. -->
         <p
           v-if="isLast && abridged"
-          class="mt-2 text-xs text-amber-300/90"
+          class="mt-2 text-xs text-app-warning-300/90"
           data-testid="tutorial-abridged"
         >
           {{
@@ -625,14 +625,14 @@ onUnmounted(() => {
              nothing ready, where the plain Done below is the honest ending. -->
         <div
           v-if="isLast && nextTour"
-          class="mt-3 rounded-lg border border-slate-700/70 bg-slate-800/40 p-2.5"
+          class="mt-3 rounded-lg border border-muted/70 bg-elevated/40 p-2.5"
           data-testid="tutorial-next-tour"
         >
-          <p class="text-[11px] tracking-wide text-slate-400 uppercase">
+          <p class="text-[11px] tracking-wide text-muted uppercase">
             {{ t('tutorial.overlay.nextUp') }}
           </p>
-          <p class="mt-0.5 text-sm font-medium text-slate-100">{{ t(nextTour.titleKey) }}</p>
-          <p class="mt-0.5 text-xs text-slate-400">{{ t(nextTour.descriptionKey) }}</p>
+          <p class="mt-0.5 text-sm font-medium text-app-100">{{ t(nextTour.titleKey) }}</p>
+          <p class="mt-0.5 text-xs text-muted">{{ t(nextTour.descriptionKey) }}</p>
           <UButton
             size="xs"
             color="primary"

package/app/components/tutorial/TutorialPrompt.vue

@@ -40,20 +40,17 @@ const undecided = computed(() => tutorial.decision === null)
            decline/close buttons are in a SIBLING slot — address them from the page by
            their own test ids rather than scoping a locator under this one. -->
       <div class="space-y-4" data-testid="tutorial-prompt">
-        <p class="text-sm text-slate-300">{{ t('tutorial.prompt.intro') }}</p>
+        <p class="text-sm text-toned">{{ t('tutorial.prompt.intro') }}</p>
         <ul class="space-y-2">
           <li
             v-for="tour in offered"
             :key="tour.id"
-            class="flex items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+            class="flex items-center gap-3 rounded-lg border border-default bg-default/60 p-3"
           >
-            <UIcon
-              :name="tour.icon ?? 'i-lucide-compass'"
-              class="h-5 w-5 shrink-0 text-primary-400"
-            />
+            <UIcon :name="tour.icon ?? 'i-lucide-compass'" class="h-5 w-5 shrink-0 text-primary" />
             <div class="min-w-0 flex-1">
               <div class="flex items-center gap-2">
-                <span class="text-sm font-medium text-slate-100">{{ t(tour.titleKey) }}</span>
+                <span class="text-sm font-medium text-app-100">{{ t(tour.titleKey) }}</span>
                 <UBadge
                   v-if="tutorial.isCompleted(tour.id)"
                   color="success"
@@ -64,7 +61,7 @@ const undecided = computed(() => tutorial.decision === null)
                   {{ t('tutorial.status.completed') }}
                 </UBadge>
               </div>
-              <p class="text-xs text-slate-400">{{ t(tour.descriptionKey) }}</p>
+              <p class="text-xs text-muted">{{ t(tour.descriptionKey) }}</p>
             </div>
             <UButton
               size="sm"
@@ -85,7 +82,7 @@ const undecided = computed(() => tutorial.decision === null)
              alone, where `board-basics` requires nothing at all — but a consumer's own slot
              filter can produce it, and "no tours exist" would be the wrong thing to say then.)
              The footer's browse button is the way on, so it stays. -->
-        <p v-if="offered.length === 0" class="text-sm text-slate-400">
+        <p v-if="offered.length === 0" class="text-sm text-muted">
           {{ t('tutorial.prompt.empty') }}
         </p>
       </div>

package/app/components/vcs/GitLabConnect.vue

@@ -54,7 +54,7 @@ async function connect() {
 
 <template>
   <section class="space-y-3">
-    <p class="text-sm text-slate-400">{{ t('vcs.connect.gitlab.intro') }}</p>
+    <p class="text-sm text-muted">{{ t('vcs.connect.gitlab.intro') }}</p>
 
     <UFormField :label="t('vcs.connect.gitlab.tokenLabel')" :hint="t('vcs.connect.gitlab.scope')">
       <SecretInput
@@ -67,13 +67,13 @@ async function connect() {
       />
     </UFormField>
 
-    <p class="text-[11px] text-slate-500">
-      <ULink :to="tokenUrl" target="_blank" class="text-indigo-400 hover:underline">
+    <p class="text-[11px] text-dimmed">
+      <ULink :to="tokenUrl" target="_blank" class="text-primary hover:underline">
         {{ t('vcs.connect.gitlab.createToken') }}
       </ULink>
     </p>
 
-    <p v-if="error" class="text-sm text-rose-400" data-testid="gitlab-connect-error">
+    <p v-if="error" class="text-sm text-app-error-400" data-testid="gitlab-connect-error">
       {{ error }}
     </p>
 

package/app/components/vcs/VcsConnectSurfaces.vue

@@ -37,7 +37,7 @@ const nothingConfigured = computed(() => !github.canConnectGitHubApp && !github.
 <template>
   <div class="space-y-3">
     <template v-if="github.canConnectGitHubApp">
-      <p v-if="props.appIntro" class="text-sm text-slate-400">{{ props.appIntro }}</p>
+      <p v-if="props.appIntro" class="text-sm text-muted">{{ props.appIntro }}</p>
       <GitHubConnect />
     </template>
 
@@ -50,7 +50,7 @@ const nothingConfigured = computed(() => !github.canConnectGitHubApp && !github.
 
     <p
       v-if="nothingConfigured"
-      class="rounded-md border border-dashed border-slate-800 px-3 py-3 text-sm text-slate-400"
+      class="rounded-md border border-dashed border-default px-3 py-3 text-sm text-muted"
     >
       {{ t('vcs.connect.noneConfigured') }}
     </p>

package/app/components/visualConfirm/VisualConfirmationWindow.vue

@@ -224,7 +224,7 @@ async function onFilePicked(e: Event) {
   <ResultWindowShell
     :open="open"
     icon="i-lucide-image-play"
-    icon-class="bg-amber-500/15 text-amber-300"
+    icon-class="bg-app-warning-500/15 text-app-warning-300"
     :title="headerTitle"
     :subtitle="phase ? PHASE_LABEL[phase] : t('visualConfirm.subtitle')"
     width="5xl"
@@ -233,7 +233,7 @@ async function onFilePicked(e: Event) {
     <div class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-5 py-4">
       <div
         v-if="!vc"
-        class="flex flex-col items-center justify-center gap-2 py-10 text-center text-slate-400"
+        class="flex flex-col items-center justify-center gap-2 py-10 text-center text-muted"
       >
         <UIcon name="i-lucide-image-play" class="h-8 w-8 opacity-40" />
         <p class="text-sm">{{ t('visualConfirm.notStarted') }}</p>
@@ -242,7 +242,7 @@ async function onFilePicked(e: Event) {
       <template v-else>
         <p
           v-if="vc.degradedReason"
-          class="rounded-lg border border-amber-700/40 bg-amber-500/5 px-3 py-2 text-[12px] text-amber-300/90"
+          class="rounded-lg border border-app-warning-700/40 bg-app-warning-500/5 px-3 py-2 text-[12px] text-app-warning-300/90"
         >
           {{ vc.degradedReason }}
         </p>
@@ -251,21 +251,24 @@ async function onFilePicked(e: Event) {
              reference the reviewer is judging against is never anonymous. -->
         <section
           v-if="design"
-          class="rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-2 text-[12px] text-slate-300"
+          class="rounded-lg border border-default bg-default/60 px-3 py-2 text-[12px] text-toned"
         >
           <p class="flex items-center gap-1.5">
-            <UIcon name="i-lucide-figma" class="h-3.5 w-3.5 shrink-0 text-amber-300" />
+            <UIcon name="i-lucide-figma" class="h-3.5 w-3.5 shrink-0 text-app-warning-300" />
             <span>{{
               t('visualConfirm.design.summary', { count: design.images }, design.images)
             }}</span>
-            <span v-if="design.dropped" class="text-slate-500">
+            <span v-if="design.dropped" class="text-dimmed">
               {{ t('visualConfirm.design.dropped', { count: design.dropped }, design.dropped) }}
             </span>
           </p>
           <!-- One line per short design, carrying both ways it can fall short: what its source
                kept, and what this gallery's shared ceiling cut from it. A design the ceiling shut
                out entirely reads as one with no frames unless it is named here. -->
-          <ul v-if="design.gaps?.length" class="mt-1.5 space-y-1 text-[11px] text-amber-300/90">
+          <ul
+            v-if="design.gaps?.length"
+            class="mt-1.5 space-y-1 text-[11px] text-app-warning-300/90"
+          >
             <li v-for="gap in design.gaps" :key="`${gap.title}-${gap.reason ?? 'capped'}`">
               {{ t('visualConfirm.design.gapLine', { title: gap.title }) }}
               <template v-if="gap.reason">{{ DESIGN_GAP_LABELS[gap.reason] }}</template>
@@ -278,9 +281,9 @@ async function onFilePicked(e: Event) {
 
         <p
           v-if="working"
-          class="flex items-center gap-2 rounded-lg border border-slate-800 bg-slate-950/40 px-3 py-2 text-[12px] text-slate-300"
+          class="flex items-center gap-2 rounded-lg border border-default bg-app-950/40 px-3 py-2 text-[12px] text-toned"
         >
-          <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 animate-spin text-amber-300" />
+          <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 animate-spin text-app-warning-300" />
           {{ phase ? PHASE_LABEL[phase] : '' }}
         </p>
 
@@ -301,7 +304,7 @@ async function onFilePicked(e: Event) {
             <!-- Per-view note (folded into the fixer findings) -->
             <div v-if="awaitingHuman" class="px-1">
               <button
-                class="flex items-center gap-1.5 text-[11px] text-slate-400 hover:text-slate-200"
+                class="flex items-center gap-1.5 text-[11px] text-muted hover:text-default"
                 @click="noteOpen[p.view] = !noteOpen[p.view]"
               >
                 <UIcon
@@ -311,7 +314,7 @@ async function onFilePicked(e: Event) {
                 {{ t('visualConfirm.noteIssue', { view: p.view }) }}
                 <span
                   v-if="perViewNotes[p.view]?.trim()"
-                  class="rounded-full bg-amber-500/15 px-1.5 text-[9px] text-amber-300"
+                  class="rounded-full bg-app-warning-500/15 px-1.5 text-[9px] text-app-warning-300"
                   >{{ t('visualConfirm.noted') }}</span
                 >
               </button>
@@ -320,18 +323,18 @@ async function onFilePicked(e: Event) {
                 v-model="perViewNotes[p.view]"
                 rows="2"
                 :placeholder="t('visualConfirm.notePlaceholder', { view: p.view })"
-                class="mt-1 w-full rounded-md border border-slate-700 bg-slate-950 px-2 py-1.5 text-[12px] text-slate-200 placeholder:text-slate-600 focus:border-amber-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/60"
+                class="mt-1 w-full rounded-md border border-muted bg-app-950 px-2 py-1.5 text-[12px] text-default placeholder:text-app-600 focus:border-app-warning-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-warning-500/60"
               />
             </div>
           </div>
         </section>
-        <p v-else class="text-[12px] italic text-slate-500">
+        <p v-else class="text-[12px] italic text-dimmed">
           {{ t('visualConfirm.noScreenshots') }}
         </p>
 
         <!-- Upload a reference for any view -->
-        <section class="rounded-lg border border-slate-800 bg-slate-900/60 p-3">
-          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        <section class="rounded-lg border border-default bg-default/60 p-3">
+          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('visualConfirm.upload.heading') }}
           </h3>
           <div class="flex flex-wrap items-center gap-2">
@@ -339,7 +342,7 @@ async function onFilePicked(e: Event) {
               v-model="uploadView"
               list="vc-views"
               :placeholder="t('visualConfirm.upload.viewPlaceholder')"
-              class="rounded-md border border-slate-700 bg-slate-950 px-2 py-1 text-[12px] text-slate-200 placeholder:text-slate-600"
+              class="rounded-md border border-muted bg-app-950 px-2 py-1 text-[12px] text-default placeholder:text-app-600"
             />
             <datalist id="vc-views">
               <option v-for="p in pairs" :key="p.view" :value="p.view" />
@@ -349,11 +352,11 @@ async function onFilePicked(e: Event) {
               type="file"
               accept="image/png,image/jpeg"
               :disabled="busy || !uploadView.trim()"
-              class="text-[12px] text-slate-300 file:me-2 file:rounded file:border-0 file:bg-slate-800 file:px-2 file:py-1 file:text-slate-200 disabled:opacity-40"
+              class="text-[12px] text-toned file:me-2 file:rounded file:border-0 file:bg-elevated file:px-2 file:py-1 file:text-default disabled:opacity-40"
               @change="onFilePicked"
             />
           </div>
-          <p class="mt-1.5 text-[10px] text-slate-600">
+          <p class="mt-1.5 text-[10px] text-app-600">
             {{
               uploadView.trim()
                 ? t('visualConfirm.upload.tipReady')
@@ -363,21 +366,18 @@ async function onFilePicked(e: Event) {
         </section>
 
         <!-- Request fix -->
-        <section
-          v-if="awaitingHuman"
-          class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
-        >
-          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        <section v-if="awaitingHuman" class="rounded-lg border border-default bg-default/60 p-3">
+          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('visualConfirm.requestFix.heading') }}
           </h3>
           <textarea
             v-model="globalFindings"
             rows="3"
             :placeholder="t('visualConfirm.requestFix.placeholder')"
-            class="w-full rounded-md border border-slate-700 bg-slate-950 px-3 py-2 text-[13px] text-slate-200 placeholder:text-slate-600 focus:border-amber-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/60"
+            class="w-full rounded-md border border-muted bg-app-950 px-3 py-2 text-[13px] text-default placeholder:text-app-600 focus:border-app-warning-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-warning-500/60"
           />
           <div class="mt-2 flex items-center justify-between">
-            <span class="text-[11px] text-slate-500">
+            <span class="text-[11px] text-dimmed">
               {{ t('visualConfirm.requestFix.foldedHint') }}
             </span>
             <UButton
@@ -397,31 +397,31 @@ async function onFilePicked(e: Event) {
         <!-- Rounds history -->
         <section
           v-if="vc.rounds && vc.rounds.length"
-          class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+          class="rounded-lg border border-default bg-default/60 p-3"
         >
-          <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('visualConfirm.history.heading', { count: vc.attempts }, vc.attempts) }}
           </h3>
           <ol class="space-y-2">
             <li v-for="(r, i) in vc.rounds" :key="i" class="flex items-start gap-2 text-[12px]">
-              <UIcon name="i-lucide-wrench" class="mt-0.5 h-3.5 w-3.5 shrink-0 text-slate-400" />
+              <UIcon name="i-lucide-wrench" class="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted" />
               <div class="min-w-0 flex-1">
-                <span class="text-slate-200">{{ t('visualConfirm.history.fixRequested') }}</span>
+                <span class="text-default">{{ t('visualConfirm.history.fixRequested') }}</span>
                 <span
                   class="ms-1.5 rounded px-1 text-[10px] uppercase"
                   :class="
                     r.outcome === 'completed'
-                      ? 'bg-emerald-500/15 text-emerald-300'
+                      ? 'bg-app-success-500/15 text-app-success-300'
                       : r.outcome === 'failed'
-                        ? 'bg-rose-500/15 text-rose-300'
-                        : 'bg-slate-500/15 text-slate-300'
+                        ? 'bg-app-error-500/15 text-app-error-300'
+                        : 'bg-app-500/15 text-toned'
                   "
                 >
                   {{
                     r.outcome ? OUTCOME_LABELS[r.outcome] : t('visualConfirm.outcome.inProgress')
                   }}
                 </span>
-                <p v-if="r.findings" class="whitespace-pre-wrap leading-snug text-slate-400">
+                <p v-if="r.findings" class="whitespace-pre-wrap leading-snug text-muted">
                   {{ r.findings }}
                 </p>
               </div>
@@ -433,7 +433,7 @@ async function onFilePicked(e: Event) {
 
     <footer
       v-if="vc"
-      class="flex items-center justify-between gap-3 border-t border-slate-800 px-5 py-3"
+      class="flex items-center justify-between gap-3 border-t border-default px-5 py-3"
     >
       <StepRunMeta
         v-if="step"
@@ -447,9 +447,9 @@ async function onFilePicked(e: Event) {
       <div class="flex items-center gap-2">
         <label
           v-if="awaitingHuman && needsAck"
-          class="flex items-center gap-1.5 text-[11px] text-amber-300/90"
+          class="flex items-center gap-1.5 text-[11px] text-app-warning-300/90"
         >
-          <input v-model="ackDegraded" type="checkbox" class="accent-amber-500" />
+          <input v-model="ackDegraded" type="checkbox" class="accent-app-warning-500" />
           {{ t('visualConfirm.reviewedManually') }}
         </label>
         <UButton

package/app/composables/api/client.ts

@@ -118,7 +118,12 @@ export async function sendContract<T extends ApiContract>(
     const { statusCode, body } = error as { statusCode: number; body: unknown }
     throw new ApiError(statusCode, body)
   }
-  return outcome.result!.body as SuccessBodyOf<T>
+  // The success arm is read through the same widening as the error arm above. Since
+  // `@toad-contracts/core@1`, a success entry expands to one union member per declared media
+  // type, so on an unresolved `T` the member type stays a deferred conditional and even reading
+  // `.body` off it is unprovable, not just assigning it to `SuccessBodyOf<T>`.
+  const { body } = outcome.result! as { body: unknown }
+  return body as SuccessBodyOf<T>
 }
 
 /** Curry {@link sendContract} over a client into the throw-on-error {@link ApiSend}. */

package/app/composables/usePipelineErrorToast.ts

@@ -157,6 +157,20 @@ const CONFLICT_INFO: Record<Exclude<ConflictReason, BespokeConflictReason>, Conf
     titleKey: 'errors.conflict.title.no_host_frame',
     descriptionKey: 'errors.conflict.description.no_host_frame',
   },
+  delegated_executor_unwired: {
+    titleKey: 'errors.conflict.title.delegated_executor_unwired',
+    descriptionKey: 'errors.conflict.description.delegated_executor_unwired',
+  },
+  // The two conditions that are NOT about a missing registration. They had borrowed the reason
+  // above, whose copy sends an operator to register an executor that is registered and fine.
+  delegated_step_async_only: {
+    titleKey: 'errors.conflict.title.delegated_step_async_only',
+    descriptionKey: 'errors.conflict.description.delegated_step_async_only',
+  },
+  delegated_claim_missing: {
+    titleKey: 'errors.conflict.title.delegated_claim_missing',
+    descriptionKey: 'errors.conflict.description.delegated_claim_missing',
+  },
   task_limit_reached: {
     titleKey: 'errors.conflict.title.task_limit_reached',
     descriptionKey: 'errors.conflict.description.task_limit_reached',
@@ -448,6 +462,9 @@ const REASON_DESCRIPTION_KEYS: Record<UnavailableReason | BootstrapReferenceReas
     'errors.unavailable.description.service_catalog_response_too_large',
   assistant_generation_failed: 'errors.unavailable.description.assistant_generation_failed',
   assistant_reply_unreadable: 'errors.unavailable.description.assistant_reply_unreadable',
+  delegated_executor_failed: 'errors.unavailable.description.delegated_executor_failed',
+  delegated_work_branch_unprepared:
+    'errors.unavailable.description.delegated_work_branch_unprepared',
 }
 
 /**

package/app/modular/agent-kinds.ts

@@ -46,5 +46,29 @@ export function customKindToArchetype(kind: CustomAgentKind): AgentArchetype {
     // the snapshot, and a required step option cannot be gated on something the read model
     // does not carry.
     ...(kind.binaryOutput ? { binaryOutput: true } : {}),
+    // WHERE the kind's work runs, when it leaves the platform. Lifted from the entry rather than
+    // from `presentation` for the reason `binaryOutput` is: it is a fact about how the kind RUNS.
+    //
+    // A `delegated` kind with no executor resolved still carries its ID, so the card can name what
+    // this build cannot: an executor a deployment stopped registering is a step nobody can run,
+    // and rendering it as an ordinary one is how that goes unnoticed until a run refuses.
+    //
+    // Carried only when the entry actually has one. A synthesised `{ id: '' }` was worse than no
+    // entry at all: the empty string is not nullish, so it satisfied every `??` fallback downstream
+    // and the card rendered a blank name in precisely the case this branch exists to handle.
+    ...(kind.executor === 'delegated' && kind.delegatedExecutor
+      ? {
+          delegatedExecutor: {
+            id: kind.delegatedExecutor.id,
+            ...(kind.delegatedExecutor.label ? { label: kind.delegatedExecutor.label } : {}),
+            ...(kind.delegatedExecutor.description
+              ? { description: kind.delegatedExecutor.description }
+              : {}),
+            ...(kind.delegatedExecutor.telemetry
+              ? { telemetry: kind.delegatedExecutor.telemetry }
+              : {}),
+          },
+        }
+      : {}),
   }
 }

package/app/pages/index.vue

@@ -425,7 +425,7 @@ watch(
   <!-- A COLUMN, so the translation strip below takes its own height instead of covering the
        row: page chrome that overlays the app is how the board's top controls came to be
        buried. Everything else lives in the row beneath it. -->
-  <div class="flex h-screen w-screen flex-col overflow-hidden bg-slate-950 text-slate-100">
+  <div class="flex h-screen w-screen flex-col overflow-hidden bg-app-950 text-app-100">
     <!-- Non-English locale warning (unofficial translation); slim full-width strip above
          everything, in flow. -->
     <TranslationWarningBanner />
@@ -433,7 +433,7 @@ watch(
       <!-- Resolving whether the GitHub App is installed, before we decide what to show. -->
       <div
         v-if="workspace.ready && githubProbePending"
-        class="m-auto flex flex-col items-center gap-3 text-slate-400"
+        class="m-auto flex flex-col items-center gap-3 text-muted"
       >
         <UIcon name="i-lucide-loader" class="h-8 w-8 animate-spin" />
         <span class="text-sm">{{ $t('app.loading') }}</span>
@@ -553,16 +553,16 @@ watch(
 
       <!-- Backend unreachable / bootstrap failed -->
       <div v-else-if="workspace.error" class="m-auto max-w-md p-8 text-center">
-        <UIcon name="i-lucide-plug-zap" class="mx-auto mb-3 h-10 w-10 text-amber-400" />
+        <UIcon name="i-lucide-plug-zap" class="mx-auto mb-3 h-10 w-10 text-app-warning-400" />
         <h1 class="mb-1 text-lg font-semibold">{{ $t('app.backendUnreachable') }}</h1>
-        <p class="mb-4 text-sm text-slate-400">{{ workspace.error }}</p>
+        <p class="mb-4 text-sm text-muted">{{ workspace.error }}</p>
         <UButton color="primary" icon="i-lucide-rotate-ccw" @click="workspace.init()">
           {{ $t('common.retry') }}
         </UButton>
       </div>
 
       <!-- Initial load -->
-      <div v-else class="m-auto flex flex-col items-center gap-3 text-slate-400">
+      <div v-else class="m-auto flex flex-col items-center gap-3 text-muted">
         <UIcon name="i-lucide-loader" class="h-8 w-8 animate-spin" />
         <span class="text-sm">{{ $t('app.loadingBoard') }}</span>
       </div>