@cat-factory/app 0.302.2 → 0.303.1

package/app/components/board/nodes/TaskPipelineMini.vue

@@ -57,10 +57,10 @@ function openStep(i: number) {
 
 /** Per-state accent, matching the inspector/focus pipeline views. */
 const STATE_META: Record<AgentState, { color: string; icon: string }> = {
-  pending: { color: '#64748b', icon: 'i-lucide-circle-dashed' },
-  working: { color: '#6366f1', icon: 'i-lucide-loader' },
-  waiting_decision: { color: '#f59e0b', icon: 'i-lucide-circle-help' },
-  done: { color: '#22c55e', icon: 'i-lucide-circle-check' },
+  pending: { color: 'var(--ui-text-muted)', icon: 'i-lucide-circle-dashed' },
+  working: { color: 'var(--ui-primary)', icon: 'i-lucide-loader' },
+  waiting_decision: { color: 'var(--ui-warning)', icon: 'i-lucide-circle-help' },
+  done: { color: 'var(--ui-success)', icon: 'i-lucide-circle-check' },
 }
 
 // A reviewer gate (requirements-review / clarity-review) folding answers or re-reviewing in
@@ -100,15 +100,15 @@ const ITEM_ICON: Record<string, string> = {
 </script>
 
 <template>
-  <div v-if="showSteps" class="mt-2 space-y-1 border-t border-slate-800 pt-2">
-    <div class="flex items-center gap-1 text-[9px] uppercase tracking-wide text-slate-500">
+  <div v-if="showSteps" class="mt-2 space-y-1 border-t border-default pt-2">
+    <div class="flex items-center gap-1 text-[9px] uppercase tracking-wide text-dimmed">
       <UIcon name="i-lucide-workflow" class="h-2.5 w-2.5" />
       {{ t('board.task.buildSteps') }}
     </div>
-    <div v-for="(s, i) in steps" :key="i" class="rounded bg-slate-900/60 px-1.5 py-1">
+    <div v-for="(s, i) in steps" :key="i" class="rounded bg-default/60 px-1.5 py-1">
       <button
         type="button"
-        class="flex w-full cursor-pointer items-center gap-1 rounded text-start focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/60"
+        class="flex w-full cursor-pointer items-center gap-1 rounded text-start focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
         :title="`${agentKindMeta(s.agentKind).label} — ${agentKindMeta(s.agentKind).description}\n${t('board.task.clickToViewStep')}`"
         @click.stop="openStep(i)"
       >
@@ -117,19 +117,19 @@ const ITEM_ICON: Record<string, string> = {
           class="h-3 w-3 shrink-0"
           :style="{ color: agentKindMeta(s.agentKind).color }"
         />
-        <span class="truncate text-[10px] text-slate-200">
+        <span class="truncate text-[10px] text-default">
           {{ agentKindMeta(s.agentKind).label }}
         </span>
         <UIcon
           v-if="stepHasOutput(s)"
           name="i-lucide-file-text"
-          class="h-2.5 w-2.5 shrink-0 text-slate-500"
+          class="h-2.5 w-2.5 shrink-0 text-dimmed"
         />
         <!-- The plain N/M count, replaced by the phase line below while a `pr-reviewer` step is
              live — its slice progress reads better as Slicing… / Reviewing X/Y slices. -->
         <span
           v-if="s.subtasks && s.subtasks.total > 0 && !prPhaseActive(s)"
-          class="ms-auto shrink-0 font-mono text-[9px] tabular-nums text-slate-400"
+          class="ms-auto shrink-0 font-mono text-[9px] tabular-nums text-muted"
         >
           {{ s.subtasks.completed }}/{{ s.subtasks.total }}
         </span>
@@ -162,7 +162,7 @@ const ITEM_ICON: Record<string, string> = {
           !reviews.isBackground(s.agentKind, props.taskId)
         "
         type="button"
-        class="mt-1 flex w-full items-center justify-center gap-1 rounded bg-amber-500 px-1.5 py-0.5 text-[9px] font-semibold text-amber-950 transition hover:bg-amber-400"
+        class="mt-1 flex w-full items-center justify-center gap-1 rounded bg-app-warning-500 px-1.5 py-0.5 text-[9px] font-semibold text-app-warning-50 dark:text-app-warning-950 transition hover:bg-app-warning-400"
         @click.stop="ui.openApprovalDetail(instance.id, s.approval.id)"
       >
         <UIcon name="i-lucide-shield-check" class="h-2.5 w-2.5" />
@@ -172,10 +172,10 @@ const ITEM_ICON: Record<string, string> = {
       <!-- per-step subtask progress bar -->
       <div
         v-if="s.subtasks && s.subtasks.total > 0"
-        class="mt-1 h-0.5 w-full overflow-hidden rounded bg-slate-700/60"
+        class="mt-1 h-0.5 w-full overflow-hidden rounded bg-accented/60"
       >
         <div
-          class="h-full rounded bg-indigo-400 transition-all"
+          class="h-full rounded bg-primary transition-all"
           :style="{ width: `${(s.subtasks.completed / s.subtasks.total) * 100}%` }"
         />
       </div>
@@ -192,7 +192,7 @@ const ITEM_ICON: Record<string, string> = {
             companionByStep[i]!.state === 'running' ? 'animate-spin' : '',
           ]"
         />
-        <span class="truncate text-slate-400">
+        <span class="truncate text-muted">
           {{ agentKindMeta(companionByStep[i]!.kind).label }}
         </span>
         <span
@@ -211,10 +211,10 @@ const ITEM_ICON: Record<string, string> = {
           class="flex items-start gap-1 text-[9px]"
           :class="
             item.status === 'completed'
-              ? 'text-slate-500 line-through'
+              ? 'text-dimmed line-through'
               : item.status === 'in_progress'
-                ? 'text-slate-100'
-                : 'text-slate-400'
+                ? 'text-app-100'
+                : 'text-muted'
           "
         >
           <UIcon

package/app/components/bootstrap/AdoptionReviewModal.vue

@@ -182,11 +182,14 @@ watch(open, (isOpen) => {
              presenting an empty list, which would read as "there was nothing to decide". -->
         <div
           v-if="unavailable"
-          class="space-y-2 rounded-md border border-amber-500/30 bg-amber-500/5 p-3"
+          class="space-y-2 rounded-md border border-app-warning-500/30 bg-app-warning-500/5 p-3"
         >
           <div class="flex items-start gap-2">
-            <UIcon name="i-lucide-triangle-alert" class="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />
-            <p class="text-sm text-amber-200/90">
+            <UIcon
+              name="i-lucide-triangle-alert"
+              class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-400"
+            />
+            <p class="text-sm text-app-warning-200/90">
               {{
                 t(
                   `bootstrap.adoption.unavailable.${plan?.unavailableReason ?? 'analysis_unusable'}`,
@@ -194,7 +197,7 @@ watch(open, (isOpen) => {
               }}
             </p>
           </div>
-          <p v-if="plan?.unavailableDetail" class="pl-6 text-xs text-slate-400">
+          <p v-if="plan?.unavailableDetail" class="pl-6 text-xs text-muted">
             {{ plan.unavailableDetail }}
           </p>
         </div>
@@ -204,7 +207,7 @@ watch(open, (isOpen) => {
              exhausted budget is called out rather than left for someone to infer from a short
              list: it is the difference between a thin read and a thin reading. -->
         <div v-if="surveyReads.length" class="space-y-2 text-xs">
-          <p class="text-slate-400">
+          <p class="text-muted">
             {{
               t('bootstrap.adoption.survey.summary', {
                 read: readSummary.read,
@@ -212,17 +215,17 @@ watch(open, (isOpen) => {
               })
             }}
           </p>
-          <p v-if="readSummary.missed > 0" class="text-slate-500">
+          <p v-if="readSummary.missed > 0" class="text-dimmed">
             {{ t('bootstrap.adoption.survey.missed', { count: readSummary.missed }) }}
           </p>
-          <p v-if="exhausted" class="text-amber-300/90">
+          <p v-if="exhausted" class="text-app-warning-300/90">
             {{ t(`bootstrap.adoption.survey.exhausted.${exhausted}`) }}
           </p>
-          <p v-if="recordsDropped > 0" class="text-amber-300/90">
+          <p v-if="recordsDropped > 0" class="text-app-warning-300/90">
             {{ t('bootstrap.adoption.survey.truncated', { count: recordsDropped }) }}
           </p>
           <details>
-            <summary class="cursor-pointer text-slate-500 hover:text-slate-300">
+            <summary class="cursor-pointer text-dimmed hover:text-toned">
               {{ t('bootstrap.adoption.survey.show') }}
             </summary>
             <ul class="mt-2 space-y-1">
@@ -237,12 +240,12 @@ watch(open, (isOpen) => {
               >
                 <span
                   class="shrink-0 font-mono text-[10px] uppercase"
-                  :class="entry.outcome === 'read' ? 'text-slate-500' : 'text-amber-400/80'"
+                  :class="entry.outcome === 'read' ? 'text-dimmed' : 'text-app-warning-400/80'"
                 >
                   {{ t(`bootstrap.adoption.survey.outcome.${entry.outcome}`) }}
                 </span>
-                <span class="font-mono text-slate-400">{{ entry.path }}</span>
-                <span v-if="entry.note" class="text-slate-600">{{ entry.note }}</span>
+                <span class="font-mono text-muted">{{ entry.path }}</span>
+                <span v-if="entry.note" class="text-app-600">{{ entry.note }}</span>
               </li>
             </ul>
           </details>
@@ -260,7 +263,7 @@ watch(open, (isOpen) => {
 
         <template v-else>
           <div class="flex items-center justify-between gap-3">
-            <p class="text-sm text-slate-400">{{ t('bootstrap.adoption.intro') }}</p>
+            <p class="text-sm text-muted">{{ t('bootstrap.adoption.intro') }}</p>
             <UButton
               color="neutral"
               variant="subtle"
@@ -279,14 +282,14 @@ watch(open, (isOpen) => {
               class="space-y-3 rounded-md border p-3"
               :class="
                 touched.has(decision.id)
-                  ? 'border-slate-700 bg-slate-900/40'
-                  : 'border-amber-500/40 bg-amber-500/5'
+                  ? 'border-muted bg-default/40'
+                  : 'border-app-warning-500/40 bg-app-warning-500/5'
               "
             >
               <div class="flex items-start justify-between gap-3">
                 <div>
-                  <p class="text-sm font-medium text-slate-100">{{ decision.title }}</p>
-                  <p class="text-[11px] uppercase tracking-wide text-slate-500">
+                  <p class="text-sm font-medium text-app-100">{{ decision.title }}</p>
+                  <p class="text-[11px] uppercase tracking-wide text-dimmed">
                     {{ t(`bootstrap.adoption.area.${decision.area}`) }}
                   </p>
                 </div>
@@ -296,29 +299,29 @@ watch(open, (isOpen) => {
               </div>
 
               <div class="grid gap-2 text-xs sm:grid-cols-2">
-                <div class="rounded bg-slate-900/60 p-2">
-                  <p class="mb-1 font-semibold text-slate-300">
+                <div class="rounded bg-default/60 p-2">
+                  <p class="mb-1 font-semibold text-toned">
                     {{ t('bootstrap.adoption.side.monorepo') }}
                   </p>
-                  <p class="text-slate-400">
+                  <p class="text-muted">
                     {{ decision.monorepoPractice ?? t('bootstrap.adoption.side.nothing') }}
                   </p>
                 </div>
-                <div class="rounded bg-slate-900/60 p-2">
-                  <p class="mb-1 font-semibold text-slate-300">
+                <div class="rounded bg-default/60 p-2">
+                  <p class="mb-1 font-semibold text-toned">
                     {{ t('bootstrap.adoption.side.template') }}
                   </p>
-                  <p class="text-slate-400">
+                  <p class="text-muted">
                     {{ decision.templatePractice ?? t('bootstrap.adoption.side.nothing') }}
                   </p>
                 </div>
               </div>
 
-              <p class="text-xs text-slate-400">{{ decision.rationale }}</p>
+              <p class="text-xs text-muted">{{ decision.rationale }}</p>
 
               <!-- The evidence is what makes the suggestion checkable rather than an assertion,
                    so it is shown, not tucked away. -->
-              <p v-if="decision.evidence.length" class="text-[11px] text-slate-500">
+              <p v-if="decision.evidence.length" class="text-[11px] text-dimmed">
                 {{ t('bootstrap.adoption.evidence') }}
                 <span class="font-mono">{{ decision.evidence.join(', ') }}</span>
               </p>
@@ -365,7 +368,7 @@ watch(open, (isOpen) => {
 
     <template #footer>
       <div class="flex w-full items-center justify-between gap-3">
-        <p v-if="!unavailable && remaining > 0" class="text-xs text-amber-300/90">
+        <p v-if="!unavailable && remaining > 0" class="text-xs text-app-warning-300/90">
           {{ t('bootstrap.adoption.remaining', { count: remaining }) }}
         </p>
         <span v-else />

package/app/components/bootstrap/BootstrapModal.vue

@@ -619,7 +619,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
              the user creates it in one click on a host we can name; or the user creates it
              themselves somewhere we cannot name, where promising a click below would be a lie
              (the button is absent for exactly the same reason). -->
-        <p class="text-sm text-slate-400">
+        <p class="text-sm text-muted">
           {{
             intoMonorepo
               ? t('bootstrap.monorepo.intro')
@@ -635,11 +635,11 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
              whichever methods the deployment serves, never just the GitHub App. -->
         <div
           v-if="needsConnection"
-          class="space-y-3 rounded-md border border-amber-500/30 bg-amber-500/5 p-3"
+          class="space-y-3 rounded-md border border-app-warning-500/30 bg-app-warning-500/5 p-3"
         >
           <div class="flex items-start gap-2">
-            <UIcon name="i-lucide-plug-zap" class="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />
-            <p class="text-sm text-amber-200/90">
+            <UIcon name="i-lucide-plug-zap" class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-400" />
+            <p class="text-sm text-app-warning-200/90">
               {{ t('vcs.bootstrap.connectPrompt') }}
             </p>
           </div>
@@ -648,7 +648,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
 
         <!-- launch -->
         <section class="space-y-4">
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('bootstrap.section.newRepo') }}
           </h3>
 
@@ -676,7 +676,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
               :description="t('bootstrap.monorepo.repo.description')"
               required
             >
-              <div v-if="!monorepoRepoItems.length" class="text-sm text-slate-400">
+              <div v-if="!monorepoRepoItems.length" class="text-sm text-muted">
                 {{ t('bootstrap.monorepo.repo.empty') }}
               </div>
               <USelect
@@ -716,9 +716,9 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
                      decide nothing, so say that instead of listing a repo for nothing. -->
                 <div
                   v-if="browsingDirectory && monorepoRepoId !== undefined"
-                  class="rounded-md border border-slate-800 bg-slate-900/40 p-2"
+                  class="rounded-md border border-default bg-default/40 p-2"
                 >
-                  <p class="mb-2 text-xs text-slate-400">
+                  <p class="mb-2 text-xs text-muted">
                     {{
                       directoryLeaf
                         ? t('bootstrap.monorepo.directory.browseHint')
@@ -749,7 +749,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
               :description="t('bootstrap.reference.description')"
               required
             >
-              <div v-if="!bootstrap.hasArchitectures" class="text-sm text-slate-400">
+              <div v-if="!bootstrap.hasArchitectures" class="text-sm text-muted">
                 {{ t('bootstrap.reference.empty') }}
               </div>
               <USelect
@@ -893,7 +893,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
           <UFormField :label="t('bootstrap.visibility.label')">
             <div class="flex items-center gap-2">
               <USwitch v-model="isPrivate" />
-              <span class="text-sm text-slate-300">{{ t('bootstrap.visibility.private') }}</span>
+              <span class="text-sm text-toned">{{ t('bootstrap.visibility.private') }}</span>
             </div>
           </UFormField>
 
@@ -912,17 +912,17 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
 
         <!-- recent jobs -->
         <section v-if="agentRuns.bootstrapJobs.length" class="space-y-2">
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('bootstrap.recent.title') }}
           </h3>
           <div
             v-for="job in agentRuns.bootstrapJobs.slice(0, 5)"
             :key="job.id"
-            class="flex items-center justify-between gap-2 rounded-md border border-slate-800 bg-slate-900/60 px-3 py-2 text-sm"
+            class="flex items-center justify-between gap-2 rounded-md border border-default bg-default/60 px-3 py-2 text-sm"
           >
             <div class="min-w-0">
-              <div class="truncate text-slate-200">{{ job.repoName }}</div>
-              <div class="truncate text-[11px] text-slate-500">
+              <div class="truncate text-default">{{ job.repoName }}</div>
+              <div class="truncate text-[11px] text-dimmed">
                 {{
                   job.referenceArchitectureName
                     ? t('bootstrap.recent.fromArch', { name: job.referenceArchitectureName })
@@ -935,7 +935,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
                 v-if="job.repoUrl"
                 :to="job.repoUrl"
                 target="_blank"
-                class="text-[11px] text-indigo-400 hover:underline"
+                class="text-[11px] text-primary hover:underline"
               >
                 {{ t('bootstrap.recent.open') }}
               </ULink>
@@ -947,7 +947,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
                 v-if="job.prUrl"
                 :to="job.prUrl"
                 target="_blank"
-                class="text-[11px] text-indigo-400 hover:underline"
+                class="text-[11px] text-primary hover:underline"
               >
                 {{ t('bootstrap.recent.openPr') }}
               </ULink>
@@ -963,7 +963,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
         <!-- reference architecture management -->
         <section class="space-y-3">
           <div class="flex items-center justify-between">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
               {{ t('bootstrap.arch.title') }}
             </h3>
             <UButton
@@ -980,13 +980,11 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
           <div
             v-for="a in bootstrap.architectures"
             :key="a.id"
-            class="flex items-center justify-between gap-2 rounded-md border border-slate-800 bg-slate-900/60 px-3 py-2"
+            class="flex items-center justify-between gap-2 rounded-md border border-default bg-default/60 px-3 py-2"
           >
             <div class="min-w-0">
-              <div class="truncate text-sm text-slate-200">{{ a.name }}</div>
-              <div class="truncate text-[11px] text-slate-500">
-                {{ a.repoOwner }}/{{ a.repoName }}
-              </div>
+              <div class="truncate text-sm text-default">{{ a.name }}</div>
+              <div class="truncate text-[11px] text-dimmed">{{ a.repoOwner }}/{{ a.repoName }}</div>
             </div>
             <div class="flex items-center gap-1">
               <UButton
@@ -1009,7 +1007,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
           <!-- add / edit form -->
           <div
             v-if="showArchForm"
-            class="space-y-3 rounded-md border border-slate-700 bg-slate-900/80 p-3"
+            class="space-y-3 rounded-md border border-muted bg-default/80 p-3"
           >
             <!-- The options come from the connected projection, so a repo to pick means a
                  connection exists and `providerLabel` names it rather than guessing. -->

package/app/components/bootstrap/BootstrapRunSteps.vue

@@ -44,7 +44,7 @@ function stateLabel(state: BootstrapStepState): string {
         :class="BOOTSTRAP_STEP_STYLE[step.state].iconClass"
       />
       <span :class="BOOTSTRAP_STEP_STYLE[step.state].labelClass">{{ stepLabel(step.id) }}</span>
-      <span class="ms-auto shrink-0 text-slate-500">{{ stateLabel(step.state) }}</span>
+      <span class="ms-auto shrink-0 text-dimmed">{{ stateLabel(step.state) }}</span>
     </li>
   </ol>
 </template>

package/app/components/brainstorm/BrainstormWindow.vue

@@ -258,7 +258,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
   <ResultWindowShell
     :open="open"
     :icon="isArchitecture ? 'i-lucide-drafting-compass' : 'i-lucide-lightbulb'"
-    icon-class="bg-amber-500/15 text-amber-300"
+    icon-class="bg-app-warning-500/15 text-app-warning-300"
     :title="
       isArchitecture ? t('brainstorm.title.architecture') : t('brainstorm.title.requirements')
     "
@@ -276,15 +276,15 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
     <div class="flex min-h-0 flex-1">
       <!-- main column -->
       <div class="min-w-0 flex-1 overflow-y-auto px-6 py-5">
-        <p class="mb-4 text-sm text-slate-400">
+        <p class="mb-4 text-sm text-muted">
           <i18n-t keypath="brainstorm.intro" tag="span" scope="global">
             <template #subject>{{ subjectNoun }}</template>
             <template #doc>{{ docNoun }}</template>
             <template #choose>
-              <span class="text-slate-300">{{ t('brainstorm.introChoose') }}</span>
+              <span class="text-toned">{{ t('brainstorm.introChoose') }}</span>
             </template>
             <template #dismiss>
-              <span class="text-slate-300">{{ t('brainstorm.introDismiss') }}</span>
+              <span class="text-toned">{{ t('brainstorm.introDismiss') }}</span>
             </template>
           </i18n-t>
         </p>
@@ -292,7 +292,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
         <!-- empty state -->
         <div
           v-if="!session && !busy && !loading"
-          class="rounded-lg border border-dashed border-slate-700 p-8 text-center text-sm text-slate-500"
+          class="rounded-lg border border-dashed border-muted p-8 text-center text-sm text-dimmed"
         >
           {{ t('brainstorm.empty') }}
         </div>
@@ -300,7 +300,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
         <!-- working state (initial fetch on open, or an agent pass running) -->
         <div
           v-else-if="(busy || loading) && !session"
-          class="flex items-center justify-center gap-2 p-8 text-sm text-slate-400"
+          class="flex items-center justify-center gap-2 p-8 text-sm text-muted"
         >
           <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
           {{ loading && !busy ? t('brainstorm.loading') : t('brainstorm.generating') }}
@@ -310,7 +310,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           <!-- converged -->
           <div
             v-if="incorporated"
-            class="mb-4 flex items-center gap-2 rounded-lg border border-emerald-900/60 bg-emerald-950/30 p-4 text-sm text-emerald-300"
+            class="mb-4 flex items-center gap-2 rounded-lg border border-app-success-900/60 bg-app-success-950/30 p-4 text-sm text-app-success-300"
           >
             <UIcon name="i-lucide-circle-check" class="h-5 w-5 shrink-0" />
             {{ t('brainstorm.settledBanner', { doc: docNoun }) }}
@@ -329,7 +329,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           <!-- working: the async cycle is running in the driver -->
           <div
             v-else-if="working"
-            class="mb-4 flex items-center gap-2 rounded-lg border border-amber-900/60 bg-amber-950/30 p-4 text-sm text-amber-200"
+            class="mb-4 flex items-center gap-2 rounded-lg border border-app-warning-900/60 bg-app-warning-950/30 p-4 text-sm text-app-warning-200"
           >
             <UIcon name="i-lucide-loader-circle" class="h-5 w-5 shrink-0 animate-spin" />
             <span v-if="incorporating">
@@ -345,17 +345,17 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             <div
               v-for="item in sortedItems"
               :key="item.id"
-              class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+              class="rounded-lg border border-default bg-default/60 p-3"
               :class="{ 'opacity-60': item.status === 'dismissed' }"
             >
               <div class="flex items-start gap-2">
                 <UIcon
                   :name="CATEGORY_ICON[item.category]"
-                  class="mt-0.5 h-4 w-4 shrink-0 text-slate-400"
+                  class="mt-0.5 h-4 w-4 shrink-0 text-muted"
                 />
                 <div class="min-w-0 flex-1">
                   <div class="flex flex-wrap items-center gap-1.5">
-                    <span class="text-sm font-medium text-white">{{ item.title }}</span>
+                    <span class="text-sm font-medium text-highlighted">{{ item.title }}</span>
                     <UBadge size="xs" variant="subtle" :color="SEVERITY_COLOR[item.severity]">
                       {{ t(SEVERITY_LABELS[item.severity]) }}
                     </UBadge>
@@ -375,16 +375,16 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                        around it takes the span (see the shell's `width` prop: the unit is the
                        paragraph, not the section). The badge row above and the choose/dismiss
                        control below are what the full width is actually for. -->
-                  <p class="mt-1 max-w-3xl whitespace-pre-line text-sm text-slate-400">
+                  <p class="mt-1 max-w-3xl whitespace-pre-line text-sm text-muted">
                     {{ item.detail }}
                   </p>
 
                   <!-- recorded choice -->
                   <div
                     v-if="item.reply"
-                    class="mt-2 max-w-3xl rounded-md border-s-2 border-slate-700 bg-slate-950/40 px-3 py-1.5 text-sm text-slate-300"
+                    class="mt-2 max-w-3xl rounded-md border-s-2 border-muted bg-app-950/40 px-3 py-1.5 text-sm text-toned"
                   >
-                    <span class="text-[10px] uppercase tracking-wide text-slate-500">
+                    <span class="text-[10px] uppercase tracking-wide text-dimmed">
                       {{ t('brainstorm.yourChoice') }}
                     </span>
                     <p class="whitespace-pre-line">{{ item.reply }}</p>
@@ -453,8 +453,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           </div>
 
           <!-- converged document: the standard-format direction -->
-          <section v-if="outline" class="mt-6 border-t border-slate-800 pt-5">
-            <div class="mb-3 flex items-center gap-1.5 text-[11px] text-emerald-400">
+          <section v-if="outline" class="mt-6 border-t border-default pt-5">
+            <div class="mb-3 flex items-center gap-1.5 text-[11px] text-app-success-400">
               <UIcon name="i-lucide-file-check-2" class="h-3.5 w-3.5" />
               <span class="font-semibold uppercase tracking-wide">
                 {{ incorporated ? docNoun : t('brainstorm.docDraft', { doc: docNoun }) }}
@@ -471,18 +471,18 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
               >
                 <UIcon
                   name="i-lucide-chevron-right"
-                  class="h-3.5 w-3.5 shrink-0 text-slate-500 transition-transform"
+                  class="h-3.5 w-3.5 shrink-0 text-dimmed transition-transform"
                   :class="collapsed[s.id] ? '' : 'rotate-90'"
                 />
                 <span
-                  class="font-semibold text-white"
+                  class="font-semibold text-highlighted"
                   :class="s.depth <= 1 ? 'text-base' : s.depth === 2 ? 'text-sm' : 'text-xs'"
                   v-html="s.titleHtml"
                 />
               </button>
               <div
                 v-show="!s.title || !collapsed[s.id]"
-                class="reader-prose mt-1 ps-5.5 text-[13px] leading-relaxed text-slate-300"
+                class="reader-prose mt-1 ps-5.5 text-[13px] leading-relaxed text-toned"
                 v-html="s.bodyHtml"
               />
             </div>
@@ -491,32 +491,29 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
       </div>
 
       <!-- right action rail -->
-      <aside class="hidden w-72 shrink-0 flex-col border-s border-slate-800 lg:flex">
+      <aside class="hidden w-72 shrink-0 flex-col border-s border-default lg:flex">
         <div class="flex flex-col gap-4 px-4 py-5">
-          <div v-if="session" class="space-y-2 text-xs text-slate-400">
+          <div v-if="session" class="space-y-2 text-xs text-muted">
             <div class="flex items-center justify-between">
               <span>{{ t('brainstorm.rail.options') }}</span>
-              <span class="text-slate-300">{{ session.items.length }}</span>
+              <span class="text-toned">{{ session.items.length }}</span>
             </div>
             <div class="flex items-center justify-between">
               <span>{{ t('brainstorm.rail.open') }}</span>
-              <span class="text-slate-300">{{ openCount }}</span>
+              <span class="text-toned">{{ openCount }}</span>
             </div>
             <div class="flex items-center justify-between">
               <span>{{ t('brainstorm.rail.chosen') }}</span>
-              <span class="text-slate-300">{{ answeredCount }}</span>
+              <span class="text-toned">{{ answeredCount }}</span>
             </div>
             <div v-if="session.model" class="flex items-center justify-between">
               <span>{{ t('brainstorm.rail.model') }}</span>
-              <span class="truncate ps-2 text-slate-500">{{ session.model }}</span>
+              <span class="truncate ps-2 text-dimmed">{{ session.model }}</span>
             </div>
           </div>
 
           <!-- action: ready (choose → incorporate / proceed) -->
-          <div
-            v-if="session && status === 'ready'"
-            class="space-y-2 border-t border-slate-800 pt-4"
-          >
+          <div v-if="session && status === 'ready'" class="space-y-2 border-t border-default pt-4">
             <UButton
               v-if="canProceed"
               color="primary"
@@ -544,7 +541,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             >
               {{ t('brainstorm.incorporateChoices') }}
             </UButton>
-            <p class="text-[11px] leading-relaxed text-slate-500">
+            <p class="text-[11px] leading-relaxed text-dimmed">
               <template v-if="canProceed">
                 {{ t('brainstorm.hint.allDismissed') }}
               </template>
@@ -556,7 +553,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           </div>
 
           <!-- action: merged (inspect → re-run / redo) -->
-          <div v-if="session && merged" class="space-y-2 border-t border-slate-800 pt-4">
+          <div v-if="session && merged" class="space-y-2 border-t border-default pt-4">
             <UButton
               color="primary"
               size="sm"
@@ -606,14 +603,14 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 {{ t('brainstorm.redoWithDirection') }}
               </UButton>
             </div>
-            <p class="text-[11px] leading-relaxed text-slate-500">
+            <p class="text-[11px] leading-relaxed text-dimmed">
               {{ t('brainstorm.mergedHint') }}
             </p>
           </div>
 
           <div
             v-if="session && incorporated"
-            class="border-t border-slate-800 pt-4 text-[11px] leading-relaxed text-slate-500"
+            class="border-t border-default pt-4 text-[11px] leading-relaxed text-dimmed"
           >
             {{ t('brainstorm.incorporatedFooter') }}
           </div>