@cat-factory/app 0.302.2 → 0.303.0

package/app/components/observability/OutcomeFilterChips.vue

@@ -15,16 +15,16 @@ const emit = defineEmits<{ 'update:modelValue': [value: T] }>()
 
 /** Colour a chip by what it selects, so the failing one reads as failing even unselected. */
 function toneClass(option: (typeof props.options)[number], active: boolean): string {
-  if (active) return 'bg-slate-800 text-slate-100'
-  if (option.count === 0) return 'text-slate-600 hover:text-slate-400'
-  if (option.tone === 'error') return 'text-rose-400 hover:text-rose-300'
-  if (option.tone === 'warning') return 'text-amber-400 hover:text-amber-300'
-  return 'text-slate-400 hover:text-slate-200'
+  if (active) return 'bg-elevated text-app-100'
+  if (option.count === 0) return 'text-app-600 hover:text-muted'
+  if (option.tone === 'error') return 'text-app-error-400 hover:text-app-error-300'
+  if (option.tone === 'warning') return 'text-app-warning-400 hover:text-app-warning-300'
+  return 'text-muted hover:text-default'
 }
 </script>
 
 <template>
-  <div class="flex rounded-lg border border-slate-800 p-0.5 text-[12px]">
+  <div class="flex rounded-lg border border-default p-0.5 text-[12px]">
     <button
       v-for="option in options"
       :key="option.value"

package/app/components/observability/RunFailureSummary.vue

@@ -82,19 +82,19 @@ const earlierFailedToolCalls = computed(() =>
 </script>
 
 <template>
-  <section class="rounded-xl border border-rose-900/60 bg-rose-950/20 p-4">
+  <section class="rounded-xl border border-app-error-900/60 bg-app-error-950/20 p-4">
     <div class="flex items-start gap-3">
-      <UIcon name="i-lucide-siren" class="mt-0.5 h-5 w-5 shrink-0 text-rose-400" />
+      <UIcon name="i-lucide-siren" class="mt-0.5 h-5 w-5 shrink-0 text-app-error-400" />
       <div class="min-w-0 flex-1">
-        <h2 class="text-[13px] font-semibold text-rose-200">
+        <h2 class="text-[13px] font-semibold text-app-error-200">
           {{ t('observability.failure.title') }}
         </h2>
 
         <!-- The run's own structured record. Absent on a run that is still going, or that
              failed without one; the evidence below stands on its own either way. -->
         <template v-if="evidence.failure">
-          <p class="mt-1 text-[13px] text-slate-200">{{ evidence.failure.message }}</p>
-          <div class="mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-[11px] text-slate-500">
+          <p class="mt-1 text-[13px] text-default">{{ evidence.failure.message }}</p>
+          <div class="mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-[11px] text-dimmed">
             <span>{{ t('observability.failure.kind', { kind: failureKindLabel }) }}</span>
             <span v-if="evidence.failure.stepIndex != null">
               {{ t('observability.failure.atStep', { index: evidence.failure.stepIndex + 1 }) }}
@@ -108,10 +108,10 @@ const earlierFailedToolCalls = computed(() =>
           <FailureDetail
             :detail="evidence.failure.detail"
             :message="evidence.failure.message"
-            summary-class="text-[11px] text-slate-500 hover:text-slate-300"
-            pre-class="bg-slate-950/60 text-[11px] text-slate-400"
+            summary-class="text-[11px] text-dimmed hover:text-toned"
+            pre-class="bg-app-950/60 text-[11px] text-muted"
           />
-          <p v-if="evidence.failure.hint" class="mt-1.5 text-[12px] text-slate-300">
+          <p v-if="evidence.failure.hint" class="mt-1.5 text-[12px] text-toned">
             {{ evidence.failure.hint }}
           </p>
         </template>
@@ -124,7 +124,7 @@ const earlierFailedToolCalls = computed(() =>
       <button
         v-if="evidence.lastErroredCall"
         type="button"
-        class="flex w-full items-start gap-3 rounded-lg border border-rose-900/50 bg-slate-950/50 px-3 py-2 text-start transition hover:bg-slate-900/70"
+        class="flex w-full items-start gap-3 rounded-lg border border-app-error-900/50 bg-app-950/50 px-3 py-2 text-start transition hover:bg-default/70"
         @click="emit('showCall', evidence.lastErroredCall.id)"
       >
         <UIcon
@@ -134,10 +134,10 @@ const earlierFailedToolCalls = computed(() =>
         />
         <div class="min-w-0 flex-1">
           <div class="flex flex-wrap items-baseline gap-x-2 text-[12px]">
-            <span class="font-medium text-slate-200">
+            <span class="font-medium text-default">
               {{ t('observability.failure.lastErroredCall') }}
             </span>
-            <span class="text-slate-500">
+            <span class="text-dimmed">
               {{ agentMeta(evidence.lastErroredCall.agentKind).label }} ·
               {{ evidence.lastErroredCall.provider }}:{{ evidence.lastErroredCall.model }}
             </span>
@@ -145,10 +145,13 @@ const earlierFailedToolCalls = computed(() =>
               {{ evidence.lastErroredCall.httpStatus ?? t('observability.call.error') }}
             </UBadge>
           </div>
-          <p v-if="evidence.lastErroredCall.errorMessage" class="mt-0.5 text-[12px] text-rose-300">
+          <p
+            v-if="evidence.lastErroredCall.errorMessage"
+            class="mt-0.5 text-[12px] text-app-error-300"
+          >
             {{ evidence.lastErroredCall.errorMessage }}
           </p>
-          <p v-if="evidence.erroredCallCount > 1" class="mt-0.5 text-[11px] text-slate-500">
+          <p v-if="evidence.erroredCallCount > 1" class="mt-0.5 text-[11px] text-dimmed">
             {{
               t(
                 'observability.failure.moreErroredCalls',
@@ -158,20 +161,20 @@ const earlierFailedToolCalls = computed(() =>
             }}
           </p>
         </div>
-        <UIcon name="i-lucide-chevron-right" class="mt-0.5 h-4 w-4 shrink-0 text-slate-600" />
+        <UIcon name="i-lucide-chevron-right" class="mt-0.5 h-4 w-4 shrink-0 text-app-600" />
       </button>
 
       <!-- Last TOOL call that failed: the row no rollup counts. -->
       <button
         v-if="evidence.lastFailedToolCall"
         type="button"
-        class="flex w-full items-start gap-3 rounded-lg border border-rose-900/50 bg-slate-950/50 px-3 py-2 text-start transition hover:bg-slate-900/70"
+        class="flex w-full items-start gap-3 rounded-lg border border-app-error-900/50 bg-app-950/50 px-3 py-2 text-start transition hover:bg-default/70"
         @click="emit('showFailingTools')"
       >
-        <UIcon name="i-lucide-wrench" class="mt-0.5 h-4 w-4 shrink-0 text-rose-400" />
+        <UIcon name="i-lucide-wrench" class="mt-0.5 h-4 w-4 shrink-0 text-app-error-400" />
         <div class="min-w-0 flex-1">
           <div class="flex flex-wrap items-baseline gap-x-2 text-[12px]">
-            <span class="font-medium text-slate-200">
+            <span class="font-medium text-default">
               <!-- "One of the failing calls" when even the failures were bounded: the row is
                    real either way, but calling it the LAST would be a claim about rows this
                    read never saw. -->
@@ -181,23 +184,23 @@ const earlierFailedToolCalls = computed(() =>
                   : t('observability.failure.lastFailedToolCall')
               }}
             </span>
-            <span class="font-mono text-slate-300">{{ evidence.lastFailedToolCall.tool }}</span>
-            <span class="text-slate-500">
+            <span class="font-mono text-toned">{{ evidence.lastFailedToolCall.tool }}</span>
+            <span class="text-dimmed">
               {{ agentMeta(evidence.lastFailedToolCall.agentKind).label }}
             </span>
           </div>
           <pre
             v-if="failedToolResult"
-            class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap text-[11px] leading-relaxed text-rose-300"
+            class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap text-[11px] leading-relaxed text-app-error-300"
             >{{ failedToolResult }}</pre>
-          <p v-else class="mt-0.5 text-[11px] italic text-slate-500">
+          <p v-else class="mt-0.5 text-[11px] italic text-dimmed">
             {{
               evidence.lastFailedToolCall.bodies === 'stored'
                 ? t('observability.failure.toolReturnedNothing')
                 : t('observability.failure.toolBodiesWithheld')
             }}
           </p>
-          <p v-if="earlierFailedToolCalls" class="mt-0.5 text-[11px] text-slate-500">
+          <p v-if="earlierFailedToolCalls" class="mt-0.5 text-[11px] text-dimmed">
             {{
               t(
                 'observability.failure.moreFailedToolCalls',
@@ -207,7 +210,7 @@ const earlierFailedToolCalls = computed(() =>
             }}
           </p>
         </div>
-        <UIcon name="i-lucide-chevron-right" class="mt-0.5 h-4 w-4 shrink-0 text-slate-600" />
+        <UIcon name="i-lucide-chevron-right" class="mt-0.5 h-4 w-4 shrink-0 text-app-600" />
       </button>
 
       <!-- Nothing failing to point at. Which of the reasons it is decides what an operator should
@@ -220,8 +223,8 @@ const earlierFailedToolCalls = computed(() =>
         class="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-dashed px-3 py-2 text-[12px]"
         :class="
           emptyReason === 'sink-unreachable'
-            ? 'border-amber-900/60 text-amber-300'
-            : 'border-slate-800 text-slate-400'
+            ? 'border-app-warning-900/60 text-app-warning-300'
+            : 'border-default text-muted'
         "
       >
         <span>{{ t(`observability.failure.noFailingCall.${emptyReason}`) }}</span>

package/app/components/observability/StepMetricsBar.vue

@@ -57,31 +57,29 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
 <template>
   <div
     v-if="m.calls > 0"
-    class="rounded-lg border border-slate-800 bg-slate-900/40 p-2.5 text-[12px]"
-    :class="
-      clickable ? 'cursor-pointer transition hover:border-slate-700 hover:bg-slate-900/70' : ''
-    "
+    class="rounded-lg border border-default bg-default/40 p-2.5 text-[12px]"
+    :class="clickable ? 'cursor-pointer transition hover:border-muted hover:bg-default/70' : ''"
     :role="clickable ? 'button' : undefined"
     @click="clickable ? $emit('inspect') : undefined"
   >
     <!-- header line: call count + tokens + warning/error badges -->
     <div class="flex items-center gap-2">
-      <UIcon name="i-lucide-activity" class="h-3.5 w-3.5 shrink-0 text-slate-500" />
-      <span class="text-slate-300">
+      <UIcon name="i-lucide-activity" class="h-3.5 w-3.5 shrink-0 text-dimmed" />
+      <span class="text-toned">
         {{ t('observability.metricsBar.calls', { count: m.calls }, m.calls) }}
       </span>
-      <span class="text-slate-500">·</span>
+      <span class="text-dimmed">·</span>
       <span
-        class="tabular-nums text-slate-400"
+        class="tabular-nums text-muted"
         :title="t('observability.metricsBar.inputCompletionTokens')"
       >
         {{ formatTokens(totalInput) }}↑ {{ formatTokens(m.completionTokens) }}↓
       </span>
       <template v-if="cost">
-        <span class="text-slate-500">·</span>
+        <span class="text-dimmed">·</span>
         <span
           class="tabular-nums"
-          :class="onSubscription ? 'text-slate-500' : 'text-slate-300'"
+          :class="onSubscription ? 'text-dimmed' : 'text-toned'"
           :title="
             onSubscription
               ? t('observability.metricsBar.subscriptionCostHint')
@@ -92,7 +90,7 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
         </span>
         <span
           v-if="onSubscription"
-          class="text-[10px] uppercase tracking-wide text-slate-500"
+          class="text-[10px] uppercase tracking-wide text-dimmed"
           :title="t('observability.metricsBar.subscriptionCostHint')"
         >
           {{ t('observability.metricsBar.subscription') }}
@@ -108,28 +106,28 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
         <UIcon
           v-if="clickable"
           name="i-lucide-chevron-right"
-          class="h-3.5 w-3.5 text-slate-600 rtl:-scale-x-100"
+          class="h-3.5 w-3.5 text-app-600 rtl:-scale-x-100"
         />
       </div>
     </div>
 
     <!-- input breakdown: the headline's three classes, priced an order of magnitude apart -->
     <div v-if="hasCache" class="mt-1.5 flex items-center gap-1.5 text-[11px] tabular-nums">
-      <span class="text-slate-400" :title="t('observability.metricsBar.freshHint')">
+      <span class="text-muted" :title="t('observability.metricsBar.freshHint')">
         {{ t('observability.metricsBar.fresh', { tokens: formatTokens(m.promptTokens) }) }}
       </span>
-      <span v-if="cacheRead > 0" class="text-slate-600">·</span>
+      <span v-if="cacheRead > 0" class="text-app-600">·</span>
       <span
         v-if="cacheRead > 0"
-        class="text-emerald-400/80"
+        class="text-app-success-400/80"
         :title="t('observability.metricsBar.cacheReadHint')"
       >
         {{ t('observability.metricsBar.cacheRead', { tokens: formatTokens(cacheRead) }) }}
       </span>
-      <span v-if="cacheWrite > 0" class="text-slate-600">·</span>
+      <span v-if="cacheWrite > 0" class="text-app-600">·</span>
       <span
         v-if="cacheWrite > 0"
-        class="text-amber-400/80"
+        class="text-app-warning-400/80"
         :title="t('observability.metricsBar.cacheWriteHint')"
       >
         {{ t('observability.metricsBar.cacheWrite', { tokens: formatTokens(cacheWrite) }) }}
@@ -139,26 +137,26 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
     <!-- output-limit headroom -->
     <div v-if="headroom !== null" class="mt-2">
       <div class="flex items-center justify-between text-[11px]">
-        <span class="text-slate-500">{{ t('observability.metricsBar.outputLimit') }}</span>
+        <span class="text-dimmed">{{ t('observability.metricsBar.outputLimit') }}</span>
         <span class="tabular-nums" :class="headroomTone">
           {{ formatTokens(m.peakCompletionTokens) }} /
           {{ formatTokens(m.maxOutputTokens ?? 0) }} ({{ pct(headroom) }}%)
         </span>
       </div>
-      <div class="mt-1 h-1 overflow-hidden rounded-full bg-slate-700/60">
+      <div class="mt-1 h-1 overflow-hidden rounded-full bg-accented/60">
         <div
           class="h-full rounded-full transition-all duration-500"
           :class="
             m.truncatedCalls > 0 || headroom >= 0.98
-              ? 'bg-rose-400'
+              ? 'bg-app-error-400'
               : headroom >= 0.8
-                ? 'bg-amber-400'
-                : 'bg-emerald-400'
+                ? 'bg-app-warning-400'
+                : 'bg-app-success-400'
           "
           :style="{ width: `${Math.max(2, pct(headroom))}%` }"
         />
       </div>
-      <p v-if="m.truncatedCalls > 0" class="mt-1 text-[11px] text-rose-400">
+      <p v-if="m.truncatedCalls > 0" class="mt-1 text-[11px] text-app-error-400">
         {{
           t(
             'observability.metricsBar.truncatedCalls',
@@ -172,19 +170,19 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
     <!-- transport overhead vs model execution -->
     <div v-if="transport !== null" class="mt-2">
       <div class="flex items-center justify-between text-[11px]">
-        <span class="text-slate-500">{{ t('observability.metricsBar.transportVsExecution') }}</span>
-        <span class="tabular-nums text-slate-400">
+        <span class="text-dimmed">{{ t('observability.metricsBar.transportVsExecution') }}</span>
+        <span class="tabular-nums text-muted">
           {{ formatMs(m.overheadMs) }} / {{ formatMs(m.upstreamMs) }}
         </span>
       </div>
-      <div class="mt-1 flex h-1 overflow-hidden rounded-full bg-slate-700/60">
+      <div class="mt-1 flex h-1 overflow-hidden rounded-full bg-accented/60">
         <div
-          class="h-full bg-sky-400/80"
+          class="h-full bg-app-info-400/80"
           :style="{ width: `${pct(transport)}%` }"
           :title="t('observability.metricsBar.transportOverhead')"
         />
         <div
-          class="h-full bg-indigo-400/80 flex-1"
+          class="h-full bg-primary/80 flex-1"
           :title="t('observability.metricsBar.modelExecution')"
         />
       </div>

package/app/components/observability/StepModelActivity.vue

@@ -31,12 +31,12 @@ function openObservability() {
 <template>
   <div v-if="instanceId || hasCalls">
     <div class="mb-1 flex items-center justify-between">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      <span class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
         {{ t('observability.modelActivity') }}
       </span>
       <button
         v-if="instanceId"
-        class="text-[11px] text-sky-400 hover:text-sky-300"
+        class="text-[11px] text-app-info-400 hover:text-app-info-300"
         @click="openObservability"
       >
         {{ t('observability.viewAllCalls') }}

package/app/components/observability/ToolCallList.vue

@@ -142,10 +142,10 @@ function prettyArgs(raw: string): string {
   <div class="space-y-4">
     <div class="flex flex-wrap items-center justify-between gap-2">
       <div>
-        <h2 class="text-[11px] uppercase tracking-wide text-slate-500">
+        <h2 class="text-[11px] uppercase tracking-wide text-dimmed">
           {{ t('observability.toolCalls.title') }}
         </h2>
-        <p class="text-[11px] text-slate-600">{{ t('observability.toolCalls.subtitle') }}</p>
+        <p class="text-[11px] text-app-600">{{ t('observability.toolCalls.subtitle') }}</p>
       </div>
       <OutcomeFilterChips v-model="filter" :options="filterOptions" />
     </div>
@@ -154,14 +154,14 @@ function prettyArgs(raw: string): string {
          read still in flight behind them, and outrank one that failed. -->
     <p
       v-if="source.loading && !visible.length"
-      class="flex items-center justify-center gap-2 py-8 text-center text-sm text-slate-500"
+      class="flex items-center justify-center gap-2 py-8 text-center text-sm text-dimmed"
     >
       <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
       {{ t('observability.toolCalls.loading') }}
     </p>
     <div
       v-else-if="source.error && !visible.length"
-      class="flex flex-col items-center gap-3 rounded-lg border border-dashed border-rose-900/60 py-6 text-center text-sm text-rose-400"
+      class="flex flex-col items-center gap-3 rounded-lg border border-dashed border-app-error-900/60 py-6 text-center text-sm text-app-error-400"
     >
       {{ t('observability.toolCalls.error') }}
       <UButton
@@ -179,7 +179,7 @@ function prettyArgs(raw: string): string {
          never off an empty prefix that may simply not have loaded. -->
     <p
       v-else-if="!counts.all"
-      class="rounded-lg border border-dashed border-slate-800 py-8 text-center text-sm text-slate-500"
+      class="rounded-lg border border-dashed border-default py-8 text-center text-sm text-dimmed"
     >
       {{ t('observability.toolCalls.none') }}
     </p>
@@ -187,7 +187,7 @@ function prettyArgs(raw: string): string {
          reassuring of the two: the operator asked for the failures and there are none. -->
     <p
       v-else-if="!visible.length"
-      class="rounded-lg border border-dashed border-slate-800 py-8 text-center text-sm text-slate-500"
+      class="rounded-lg border border-dashed border-default py-8 text-center text-sm text-dimmed"
     >
       {{ t('observability.toolCalls.noneMatching') }}
     </p>
@@ -198,7 +198,7 @@ function prettyArgs(raw: string): string {
            implies has to explain itself here. -->
       <p
         v-if="boundedNotice"
-        class="rounded-lg border border-dashed border-amber-900/50 px-3 py-2 text-[11px] text-amber-300/90"
+        class="rounded-lg border border-dashed border-app-warning-900/50 px-3 py-2 text-[11px] text-app-warning-300/90"
       >
         {{ boundedNotice }}
       </p>
@@ -207,16 +207,16 @@ function prettyArgs(raw: string): string {
         <li
           v-for="call in visible"
           :key="call.id"
-          class="overflow-hidden rounded-xl border border-slate-800 bg-slate-900/40"
-          :class="!call.ok ? 'border-rose-900/60' : ''"
+          class="overflow-hidden rounded-xl border border-default bg-default/40"
+          :class="!call.ok ? 'border-app-error-900/60' : ''"
         >
           <button
-            class="flex w-full items-center gap-3 px-4 py-2.5 text-start transition hover:bg-slate-900/70"
+            class="flex w-full items-center gap-3 px-4 py-2.5 text-start transition hover:bg-default/70"
             @click="toggle(call)"
           >
             <UIcon
               name="i-lucide-chevron-right"
-              class="h-4 w-4 shrink-0 text-slate-500 transition-transform"
+              class="h-4 w-4 shrink-0 text-dimmed transition-transform"
               :class="expanded[call.id] ? 'rotate-90' : ''"
             />
             <UIcon
@@ -225,60 +225,60 @@ function prettyArgs(raw: string): string {
               :style="{ color: agentMeta(call.agentKind).color }"
               :title="agentMeta(call.agentKind).label"
             />
-            <span class="font-mono text-[13px] text-slate-200">{{ call.tool }}</span>
-            <div class="ms-auto flex items-center gap-2.5 text-[11px] tabular-nums text-slate-400">
+            <span class="font-mono text-[13px] text-default">{{ call.tool }}</span>
+            <div class="ms-auto flex items-center gap-2.5 text-[11px] tabular-nums text-muted">
               <span :title="t('observability.toolCalls.durationHint')">
                 {{ formatMs(Math.max(0, call.endedAt - call.startedAt)) }}
               </span>
               <UBadge v-if="!call.ok" color="error" variant="subtle" size="sm">
                 {{ t('observability.toolCalls.failed') }}
               </UBadge>
-              <span class="hidden text-slate-600 md:inline">{{ clock(call.startedAt) }}</span>
+              <span class="hidden text-app-600 md:inline">{{ clock(call.startedAt) }}</span>
             </div>
           </button>
 
-          <div v-if="expanded[call.id]" class="border-t border-slate-800 px-4 py-3 space-y-3">
-            <div class="flex flex-wrap gap-x-5 gap-y-1 text-[11px] text-slate-500">
+          <div v-if="expanded[call.id]" class="border-t border-default px-4 py-3 space-y-3">
+            <div class="flex flex-wrap gap-x-5 gap-y-1 text-[11px] text-dimmed">
               <span>{{ t('observability.toolCalls.dispatch', { jobId: call.jobId }) }}</span>
               <span>{{ t('observability.toolCalls.seq', { seq: call.seq }) }}</span>
             </div>
             <!-- `withheld` is not an empty body: nothing was captured, so an empty `args` here
                must not read as a tool that took none. -->
-            <p v-if="call.bodies !== 'stored'" class="text-[12px] italic text-slate-500">
+            <p v-if="call.bodies !== 'stored'" class="text-[12px] italic text-dimmed">
               {{ t('observability.toolCalls.bodiesWithheld') }}
             </p>
             <template v-else>
               <div>
                 <div
-                  class="mb-1 flex items-center gap-2 text-[11px] uppercase tracking-wide text-slate-500"
+                  class="mb-1 flex items-center gap-2 text-[11px] uppercase tracking-wide text-dimmed"
                 >
                   <span>{{ t('observability.toolCalls.arguments') }}</span>
                   <span
                     v-if="call.argsDropped > 0"
-                    class="normal-case tracking-normal text-slate-600"
+                    class="normal-case tracking-normal text-app-600"
                   >
                     {{ t('observability.toolCalls.dropped', { chars: call.argsDropped }) }}
                   </span>
                 </div>
                 <pre
-                  class="max-h-60 overflow-auto rounded-lg bg-slate-950/70 p-3 text-[11px] leading-relaxed text-slate-300"
+                  class="max-h-60 overflow-auto rounded-lg bg-app-950/70 p-3 text-[11px] leading-relaxed text-toned"
                   >{{ call.args ? prettyArgs(call.args) : '—' }}</pre>
               </div>
               <div>
                 <div
-                  class="mb-1 flex items-center gap-2 text-[11px] uppercase tracking-wide text-slate-500"
+                  class="mb-1 flex items-center gap-2 text-[11px] uppercase tracking-wide text-dimmed"
                 >
                   <span>{{ t('observability.toolCalls.result') }}</span>
                   <span
                     v-if="call.resultDropped > 0"
-                    class="normal-case tracking-normal text-slate-600"
+                    class="normal-case tracking-normal text-app-600"
                   >
                     {{ t('observability.toolCalls.dropped', { chars: call.resultDropped }) }}
                   </span>
                 </div>
                 <pre
-                  class="max-h-60 overflow-auto rounded-lg bg-slate-950/70 p-3 text-[11px] leading-relaxed"
-                  :class="call.ok ? 'text-slate-300' : 'text-rose-300'"
+                  class="max-h-60 overflow-auto rounded-lg bg-app-950/70 p-3 text-[11px] leading-relaxed"
+                  :class="call.ok ? 'text-toned' : 'text-app-error-300'"
                   >{{ call.result || '—' }}</pre>
               </div>
             </template>