@cat-factory/app 0.308.0 → 0.310.0

package/app/components/panels/AgentStepDetail.vue

@@ -29,6 +29,8 @@ import {
 } from '~/utils/pipelineRender'
 import InputGateNotice from '~/components/inputGate/InputGateNotice.vue'
 import RunDetailLoadState from '~/components/panels/RunDetailLoadState.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 // Detail overlay for a single pipeline step. Opened by clicking an agent in the
 // inspector list (TaskExecution) or the focus-view pipeline (PipelineProgress) via
@@ -402,13 +404,15 @@ async function copyOutput() {
       class="hidden w-72 shrink-0 flex-col border-e border-default bg-default/60 md:flex"
     >
       <div class="border-b border-default px-4 py-3">
-        <div class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+        <SectionLabel>
           {{ t('panels.stepDetail.contents') }}
-        </div>
+        </SectionLabel>
       </div>
       <nav class="flex-1 space-y-0.5 overflow-auto px-2 py-3">
-        <button
-          class="block w-full truncate rounded-md px-2 py-1 text-start text-[13px] transition"
+        <UButton
+          color="neutral"
+          variant="ghost"
+          class="block w-full truncate rounded-md px-2 py-1 text-start text-sm transition"
           :class="
             activeId === 'step-details'
               ? 'bg-primary/15 font-medium text-primary'
@@ -417,11 +421,13 @@ async function copyOutput() {
           @click="goTo('step-details')"
         >
           {{ t('panels.stepDetail.details') }}
-        </button>
-        <button
+        </UButton>
+        <UButton
+          color="neutral"
+          variant="ghost"
           v-for="s in tocSections"
           :key="s.id"
-          class="block w-full truncate rounded-md px-2 py-1 text-start text-[13px] transition"
+          class="block w-full truncate rounded-md px-2 py-1 text-start text-sm transition"
           :class="
             activeId === s.id
               ? 'bg-primary/15 font-medium text-primary'
@@ -432,7 +438,7 @@ async function copyOutput() {
           @click="goTo(s.id)"
         >
           {{ s.title }}
-        </button>
+        </UButton>
       </nav>
     </aside>
 
@@ -470,24 +476,24 @@ async function copyOutput() {
             <UIcon name="i-lucide-alert-triangle" class="me-1 h-3 w-3" />
             {{ t('panels.stepDetail.decisionRequired') }}
           </UBadge>
-          <UButton
+          <IconButton
             v-if="outline.sections.length"
             :icon="allCollapsed ? 'i-lucide-unfold-vertical' : 'i-lucide-fold-vertical'"
             color="neutral"
             variant="ghost"
             size="sm"
-            :title="
+            :label="
               allCollapsed ? t('panels.stepDetail.expandAll') : t('panels.stepDetail.collapseAll')
             "
             @click="setAll(!allCollapsed)"
           />
-          <UButton
+          <IconButton
             v-if="hasOutput"
             icon="i-lucide-copy"
             color="neutral"
             variant="ghost"
             size="sm"
-            :title="t('panels.stepDetail.copyRawOutput')"
+            :label="t('panels.stepDetail.copyRawOutput')"
             @click="copyOutput"
           />
           <!-- Restart the pipeline from this step (shared two-click confirm; resetting
@@ -499,12 +505,12 @@ async function copyOutput() {
             :step-index="ctx?.stepIndex ?? null"
             @restarted="close"
           />
-          <UButton
+          <IconButton
             icon="i-lucide-x"
             color="neutral"
             variant="ghost"
             size="sm"
-            :title="t('panels.stepDetail.closeEsc')"
+            :label="t('panels.stepDetail.closeEsc')"
             @click="close"
           />
         </div>
@@ -603,7 +609,7 @@ async function copyOutput() {
             data-testid="dedicated-park-redirect"
             :data-park="dedicatedPark"
           >
-            <p class="text-[13px] leading-relaxed text-app-warning-200/90">
+            <p class="text-sm leading-relaxed text-app-warning-200/90">
               {{ t(parkPresentation.noticeKey) }}
             </p>
             <UButton
@@ -640,7 +646,7 @@ async function copyOutput() {
             <li
               v-for="(note, i) in runNotes"
               :key="i"
-              class="flex items-start gap-1.5 text-[11px] leading-snug text-app-warning-300/80"
+              class="flex items-start gap-1.5 text-2xs leading-snug text-app-warning-300/80"
             >
               <UIcon name="i-lucide-info" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
               <span>{{ note }}</span>
@@ -755,7 +761,7 @@ async function copyOutput() {
           <!-- edit-then-approve: a direct editor over the raw conclusions; the
                edits become the approved proposal that flows to the next step -->
           <section v-if="editing" class="scroll-mt-4">
-            <div class="mb-2 flex items-center gap-1.5 text-[11px] text-app-warning-400">
+            <div class="mb-2 flex items-center gap-1.5 text-2xs text-app-warning-400">
               <UIcon name="i-lucide-pencil" class="h-3.5 w-3.5" />
               <span class="font-semibold uppercase tracking-wide">{{
                 t('panels.stepDetail.editingConclusions')
@@ -767,7 +773,7 @@ async function copyOutput() {
               autoresize
               size="sm"
               class="w-full"
-              :ui="{ base: 'font-mono text-[12px] leading-relaxed' }"
+              :ui="{ base: 'font-mono text-xs leading-relaxed' }"
               :placeholder="t('panels.stepDetail.editConclusionsPlaceholder')"
             />
           </section>
@@ -781,9 +787,11 @@ async function copyOutput() {
               :ref="(el) => (sectionEls[s.id] = el as HTMLElement | null)"
               class="scroll-mt-4"
             >
-              <button
+              <UButton
+                color="neutral"
+                variant="ghost"
                 v-if="s.depth > 0"
-                class="group flex w-full items-center gap-2 rounded-md py-1 text-start transition hover:text-highlighted"
+                class="group flex w-full items-center gap-2 rounded-md px-0 py-1 text-start transition hover:bg-transparent hover:text-highlighted"
                 @click="toggle(s.id)"
               >
                 <UIcon
@@ -796,11 +804,11 @@ async function copyOutput() {
                   :class="s.depth <= 1 ? 'text-lg' : s.depth === 2 ? 'text-base' : 'text-sm'"
                   v-html="s.titleHtml"
                 />
-              </button>
+              </UButton>
               <!-- eslint-disable-next-line vue/no-v-html -->
               <div
                 v-show="!collapsed[s.id]"
-                class="reader-prose mt-1 text-[13px] leading-relaxed text-toned"
+                class="reader-prose mt-1 text-sm leading-relaxed text-toned"
                 :class="[
                   s.depth > 0 ? 'ps-6' : '',
                   genericApprovalPending && !editing ? 'review-mode' : '',
@@ -829,25 +837,21 @@ async function copyOutput() {
       class="absolute inset-x-0 bottom-0 z-10 flex max-h-[70dvh] flex-col rounded-t-2xl border-t border-muted bg-default/95 shadow-2xl backdrop-blur lg:static lg:inset-auto lg:z-auto lg:max-h-none lg:w-96 lg:shrink-0 lg:rounded-none lg:border-s lg:border-t-0 lg:border-default lg:bg-default/60 lg:shadow-none lg:backdrop-blur-none"
     >
       <div class="border-b border-default px-4 py-3">
-        <div class="text-[11px] font-semibold uppercase tracking-wide text-app-warning-400">
+        <div class="text-2xs font-semibold uppercase tracking-wide text-app-warning-400">
           {{
             editing
               ? t('panels.stepDetail.approveWithCorrections')
               : t('panels.stepDetail.reviewAndApprove')
           }}
         </div>
-        <p class="mt-1 text-[12px] text-muted">
+        <p class="mt-1 text-xs text-muted">
           {{ editing ? t('panels.stepDetail.editHint') : t('panels.stepDetail.reviewHint') }}
         </p>
         <!-- The gate's configured POLICY, when it has one. Both lines exist because an
            approve on such a gate legitimately may not advance the run: without the tally, a
            correctly-recorded approval is indistinguishable from a call that failed, and
            without the refusal a person would press a button the server answers 403. -->
-        <p
-          v-if="gateQuorum"
-          class="mt-1 text-[12px] text-app-warning-300/90"
-          data-testid="gate-quorum"
-        >
+        <p v-if="gateQuorum" class="mt-1 text-xs text-app-warning-300/90" data-testid="gate-quorum">
           {{
             t('panels.stepDetail.quorumProgress', {
               recorded: gateQuorum.recorded,
@@ -856,7 +860,7 @@ async function copyOutput() {
           }}
           <span v-if="viewerHasApproved">{{ t('panels.stepDetail.quorumYours') }}</span>
         </p>
-        <p v-if="gateRefusal" class="mt-1 text-[12px] text-muted" data-testid="gate-not-approver">
+        <p v-if="gateRefusal" class="mt-1 text-xs text-muted" data-testid="gate-not-approver">
           {{ t(GATE_REFUSAL_KEYS[gateRefusal]) }}
         </p>
       </div>
@@ -864,7 +868,7 @@ async function copyOutput() {
       <div class="flex-1 space-y-3 overflow-auto overscroll-contain px-4 py-3">
         <p
           v-if="editing"
-          class="rounded-lg border border-app-warning-500/30 bg-app-warning-500/5 p-3 text-[12px] leading-relaxed text-app-warning-200/90"
+          class="rounded-lg border border-app-warning-500/30 bg-app-warning-500/5 p-3 text-xs leading-relaxed text-app-warning-200/90"
         >
           {{ t('panels.stepDetail.editingNotice') }}
         </p>
@@ -875,11 +879,11 @@ async function copyOutput() {
             data-testid="step-review-composer"
             class="rounded-lg border border-primary/40 bg-primary/5 p-3"
           >
-            <div class="mb-1 text-[10px] uppercase tracking-wide text-primary">
+            <div class="mb-1 text-3xs uppercase tracking-wide text-primary">
               {{ t('panels.stepDetail.commentingOn') }}
             </div>
             <pre
-              class="mb-2 max-h-24 overflow-auto whitespace-pre-wrap rounded bg-app-950/60 p-2 text-[11px] text-toned"
+              class="mb-2 max-h-24 overflow-auto whitespace-pre-wrap rounded-sm bg-app-950/60 p-2 text-2xs text-toned"
               >{{ draftTarget.quotedSource }}</pre>
             <UTextarea
               v-model="draftBody"
@@ -914,27 +918,31 @@ async function copyOutput() {
             class="rounded-lg border border-default bg-default/50 p-3"
           >
             <div class="mb-1 flex items-start justify-between gap-2">
-              <div class="text-[10px] uppercase tracking-wide text-dimmed">
+              <SectionLabel>
                 {{ t('panels.stepDetail.commentN', { number: idx + 1 }) }}
-              </div>
-              <button
-                class="text-dimmed transition hover:text-app-error-400"
-                :title="t('panels.stepDetail.removeComment')"
+              </SectionLabel>
+              <IconButton
+                color="neutral"
+                variant="ghost"
+                icon="i-lucide-x"
+                :label="t('panels.stepDetail.removeComment')"
+                :ui="{
+                  base: 'p-0 text-dimmed transition hover:bg-transparent hover:text-app-error-400',
+                  leadingIcon: 'h-3.5 w-3.5',
+                }"
                 @click="removeComment(idx)"
-              >
-                <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
-              </button>
+              />
             </div>
             <pre
-              class="mb-1 max-h-20 overflow-auto whitespace-pre-wrap rounded bg-app-950/50 p-1.5 text-[10px] text-muted"
+              class="mb-1 max-h-20 overflow-auto whitespace-pre-wrap rounded-sm bg-app-950/50 p-1.5 text-3xs text-muted"
               >{{ c.quotedSource }}</pre>
-            <p class="text-[12px] text-default">{{ c.body }}</p>
+            <p class="text-xs text-default">{{ c.body }}</p>
           </div>
 
           <div>
-            <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="label" class="mb-1 block">
               {{ t('panels.stepDetail.overallFeedback') }}
-            </label>
+            </SectionLabel>
             <UTextarea
               v-model="feedback"
               data-testid="step-review-feedback"
@@ -1005,14 +1013,14 @@ async function copyOutput() {
         </UButton>
         <p
           v-else-if="!proposalEditable"
-          class="text-[10px] text-dimmed"
+          class="text-3xs text-dimmed"
           data-testid="step-rendered-output-note"
         >
           {{ t('panels.stepDetail.renderedOutputNote') }}
         </p>
         <!-- Withheld only until the quorum is one approval away, so it says so rather than
            leaving a reviewer to wonder where the affordance went. -->
-        <p v-else class="text-[10px] text-dimmed" data-testid="step-quorum-edit-locked">
+        <p v-else class="text-3xs text-dimmed" data-testid="step-quorum-edit-locked">
           {{ t('panels.stepDetail.quorumEditLocked') }}
         </p>
 
@@ -1021,7 +1029,7 @@ async function copyOutput() {
           v-if="rejectArmed"
           class="rounded-lg border border-app-error-500/40 bg-app-error-500/5 p-2.5"
         >
-          <p class="mb-2 text-[11px] text-app-error-200">
+          <p class="mb-2 text-2xs text-app-error-200">
             {{ t('panels.stepDetail.rejectConfirmPrompt') }}
           </p>
           <div class="flex gap-2">
@@ -1073,7 +1081,7 @@ async function copyOutput() {
             {{ t('panels.stepDetail.reject') }}
           </UButton>
         </div>
-        <p class="text-[10px] text-dimmed">
+        <p class="text-3xs text-dimmed">
           {{ t('panels.stepDetail.requestChangesHint') }}
         </p>
       </div>

package/app/components/panels/AttemptEntryHeader.vue

@@ -23,11 +23,11 @@ function formatClock(ms: number | null | undefined, fmt: 'short' | 'long'): stri
 <template>
   <div class="flex items-center gap-2">
     <UIcon v-if="icon" :name="icon" class="h-3.5 w-3.5 shrink-0" :class="iconClass" />
-    <span class="text-[13px] font-medium text-default">{{ label }}</span>
+    <span class="text-sm font-medium text-default">{{ label }}</span>
     <UBadge :color="outcome === 'failed' ? 'error' : 'neutral'" variant="subtle" size="sm">{{
       outcomeLabel
     }}</UBadge>
-    <span v-if="formatClock(at, dateFormat ?? 'short')" class="ms-auto text-[11px] text-dimmed">{{
+    <span v-if="formatClock(at, dateFormat ?? 'short')" class="ms-auto text-2xs text-dimmed">{{
       formatClock(at, dateFormat ?? 'short')
     }}</span>
   </div>

package/app/components/panels/DecisionModal.vue

@@ -93,7 +93,7 @@ async function choose(option: string) {
             {{ opt }}
           </UButton>
         </div>
-        <p class="text-[11px] text-dimmed">
+        <p class="text-2xs text-dimmed">
           {{ t('panels.decision.visualizationHint') }}
         </p>
       </div>

package/app/components/panels/GenericStructuredResultView.vue

@@ -11,6 +11,7 @@ import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -71,18 +72,18 @@ const customJson = computed<string | null>(() => {
         <MarkdownProse
           v-if="step?.output"
           :text="step.output"
-          class="mb-4 text-[13px] leading-relaxed text-toned"
+          class="mb-4 text-sm leading-relaxed text-toned"
         />
 
         <template v-if="customJson">
           <div class="mb-2 flex items-center gap-2">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3">
               {{ t('panels.structuredResult.structuredOutput') }}
-            </h3>
+            </SectionLabel>
             <CopyButton :text="customJson" class="-my-1" />
           </div>
           <pre
-            class="overflow-x-auto rounded-lg border border-default bg-app-950/60 p-3 text-[12px] leading-relaxed text-default"
+            class="overflow-x-auto rounded-lg border border-default bg-app-950/60 p-3 text-xs leading-relaxed text-default"
           ><code>{{ customJson }}</code></pre>
         </template>
 
@@ -92,7 +93,7 @@ const customJson = computed<string | null>(() => {
         >
           <UIcon name="i-lucide-braces" class="h-8 w-8 opacity-40" />
           <p class="text-sm">{{ t('panels.structuredResult.noResult') }}</p>
-          <p class="max-w-sm text-[11px] text-dimmed">
+          <p class="max-w-sm text-2xs text-dimmed">
             {{ t('panels.structuredResult.noResultHint') }}
           </p>
         </div>

package/app/components/panels/InspectorPanel.vue

@@ -10,6 +10,7 @@ import AgentStopButton from '~/components/board/AgentStopButton.vue'
 import BootstrapRunSteps from '~/components/bootstrap/BootstrapRunSteps.vue'
 import { BLUEPRINT_AGENT_KIND } from '@cat-factory/contracts'
 import { VCS_PROVIDER_ICONS } from '~/utils/vcs'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const pipelines = usePipelinesStore()
@@ -368,7 +369,10 @@ const showOriginalDescription = ref(false)
               <UBadge :color="statusMeta.chip" variant="subtle" size="sm">
                 {{ statusLabel }}
               </UBadge>
-              <span class="text-[10px] uppercase tracking-wide text-dimmed">{{ level }}</span>
+              <!-- The block's LEVEL, beside its status chip: a category this block is in, not a
+                   heading over what follows, so it keeps its own classes rather than adopting the
+                   eyebrow recipe (`common/SectionLabel.vue`). -->
+              <span class="text-3xs uppercase tracking-wide text-dimmed">{{ level }}</span>
             </div>
           </div>
         </div>
@@ -403,16 +407,16 @@ const showOriginalDescription = ref(false)
         <template v-if="frozenByRework">
           <div class="rounded-lg border border-app-success-900/60 bg-app-success-950/20 p-3">
             <div
-              class="mb-1.5 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-app-success-400"
+              class="mb-1.5 flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wide text-app-success-400"
             >
               <UIcon name="i-lucide-file-check-2" class="h-3.5 w-3.5" />
               {{ t('panels.inspector.reworkedRequirements') }}
             </div>
-            <p class="line-clamp-5 whitespace-pre-line text-[13px] leading-relaxed text-toned">
+            <p class="line-clamp-5 whitespace-pre-line text-sm leading-relaxed text-toned">
               {{ reqReworkedText }}
             </p>
             <div class="mt-2 flex items-center justify-between gap-2">
-              <p class="text-[11px] text-dimmed">
+              <p class="text-2xs text-dimmed">
                 {{ t('panels.inspector.agentStepsUseDocument') }}
               </p>
               <UButton
@@ -464,23 +468,21 @@ const showOriginalDescription = ref(false)
             @change="saveDescription"
             @blur="saveDescription"
           />
-          <p v-if="isTask && !editable" class="flex items-center gap-1 text-[11px] text-dimmed">
+          <p v-if="isTask && !editable" class="flex items-center gap-1 text-2xs text-dimmed">
             <UIcon name="i-lucide-lock" class="h-3 w-3" />
             {{ t('panels.inspector.taskStartedLocked') }}
           </p>
 
           <!-- prior incorporated requirements kept as a base after a review-driven reset -->
           <div v-if="reqHasPriorDoc" class="rounded-lg border border-muted bg-elevated/40 p-3">
-            <div
-              class="mb-1.5 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted"
-            >
+            <SectionLabel class="mb-1.5 flex items-center gap-1.5">
               <UIcon name="i-lucide-history" class="h-3.5 w-3.5" />
               {{ t('panels.inspector.lastIncorporatedRequirements') }}
-            </div>
-            <p class="line-clamp-5 whitespace-pre-line text-[13px] leading-relaxed text-toned">
+            </SectionLabel>
+            <p class="line-clamp-5 whitespace-pre-line text-sm leading-relaxed text-toned">
               {{ reqReworkedText }}
             </p>
-            <p class="mt-2 text-[11px] text-dimmed">
+            <p class="mt-2 text-2xs text-dimmed">
               {{ t('panels.inspector.priorDocHint') }}
             </p>
           </div>
@@ -586,7 +588,7 @@ const showOriginalDescription = ref(false)
       >
         {{ t('panels.inspector.mapService') }}
       </UButton>
-      <p v-if="isFrame && !serviceRepo" class="text-[11px] text-dimmed">
+      <p v-if="isFrame && !serviceRepo" class="text-2xs text-dimmed">
         {{ t('panels.inspector.mapServiceNoRepo') }}
       </p>
 
@@ -613,7 +615,7 @@ const showOriginalDescription = ref(false)
            on a disabled button doesn't fire hover events. -->
       <p
         v-if="isTask && runBlockedReason"
-        class="flex items-start gap-1.5 text-[11px] text-app-warning-300/90"
+        class="flex items-start gap-1.5 text-2xs text-app-warning-300/90"
         data-testid="run-blocked-reason"
       >
         <UIcon name="i-lucide-lock" class="mt-px h-3 w-3 shrink-0" />

package/app/components/panels/MergerResultView.vue

@@ -11,6 +11,7 @@ import type { ChangeClass, MergeAxis, MergeDecision, WorkspaceRole } from '@cat-
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -217,15 +218,15 @@ const reasonText = computed(() => {
                   {{ changeClassLabel }}
                 </UBadge>
               </div>
-              <p class="mt-0.5 text-[13px] leading-relaxed text-toned">{{ reasonText }}</p>
+              <p class="mt-0.5 text-sm leading-relaxed text-toned">{{ reasonText }}</p>
             </div>
           </div>
 
           <!-- Scores vs the resolved preset's ceilings. -->
           <template v-if="axes.length">
-            <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-2">
               {{ t('panels.mergerResult.scores') }}
-            </h3>
+            </SectionLabel>
             <div class="space-y-2 rounded-lg border border-default bg-app-950/40 p-3">
               <div v-for="axis in axes" :key="axis.key" class="flex items-center gap-2">
                 <span class="w-20 shrink-0 text-xs text-muted">{{ axis.label }}</span>
@@ -242,7 +243,7 @@ const reasonText = computed(() => {
                 >
                   {{ n(axis.score, { key: 'percent' }) }}
                 </span>
-                <span class="w-24 shrink-0 text-end text-[10px] tabular-nums text-dimmed">
+                <span class="w-24 shrink-0 text-end text-3xs tabular-nums text-dimmed">
                   {{
                     t('panels.mergerResult.ceiling', {
                       value: n(axis.ceiling, { key: 'percent' }),
@@ -255,15 +256,15 @@ const reasonText = computed(() => {
 
           <!-- The agent's prose justification. -->
           <template v-if="decision.assessment?.rationale">
-            <h3 class="mb-2 mt-4 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-2 mt-4">
               {{ t('panels.mergerResult.rationale') }}
-            </h3>
+            </SectionLabel>
             <MarkdownProse
               :text="decision.assessment.rationale"
-              class="text-[13px] leading-relaxed text-toned"
+              class="text-sm leading-relaxed text-toned"
             />
           </template>
-          <p v-else class="text-[13px] italic leading-relaxed text-dimmed">
+          <p v-else class="text-sm italic leading-relaxed text-dimmed">
             {{ t('panels.mergerResult.noAssessment') }}
           </p>
         </template>
@@ -272,7 +273,7 @@ const reasonText = computed(() => {
         <MarkdownProse
           v-else-if="step?.output"
           :text="step.output"
-          class="text-[13px] leading-relaxed text-toned"
+          class="text-sm leading-relaxed text-toned"
         />
         <div
           v-else