@cat-factory/app 0.308.0 → 0.310.0

package/app/components/panels/ResultWindowShell.vue

@@ -22,6 +22,7 @@
 // self-assessment (see the footer block below), so a window never renders it itself.
 import { computed, ref, watch } from 'vue'
 import { useModalBehavior } from '@modular-vue/core'
+import IconButton from '~/components/common/IconButton.vue'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
 import RunDetailLoadState from '~/components/panels/RunDetailLoadState.vue'
 import StepEffortReport from '~/components/panels/StepEffortReport.vue'
@@ -39,6 +40,7 @@ import {
   RESULT_WINDOW_WIDTH_CLASS,
   type ResultWindowWidth,
 } from '~/components/panels/ResultWindowShell.logic'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 /** A pipeline step reference — passed by step-result windows to surface the shared
  *  "restart from here" control. `StepRestartControl` self-hides for an off-path open
@@ -68,8 +70,8 @@ const props = withDefaults(
      * worse, not better.
      *
      * The obligation that comes with it: CONTINUOUS PROSE inside a `full` window carries its
-     * own reading measure (`PROSE_MEASURE_CLASS`, the step reader's own, over the same 13px
-     * `.reader-prose`), or the width lands as 200-character lines.
+     * own reading measure (`PROSE_MEASURE_CLASS`, the step reader's own, over the same
+     * `text-sm` `.reader-prose`), or the width lands as 200-character lines.
      *
      * The unit that obligation attaches to is the PARAGRAPH, not the section — which is the
      * distinction to get right, because "a findings list reads better at the full span" is
@@ -289,7 +291,7 @@ const panelClass = computed(() => [
           </span>
           <div class="min-w-0 flex-1">
             <h2 class="truncate text-sm font-semibold text-app-100">{{ title }}</h2>
-            <p v-if="subtitle" class="truncate text-[11px] text-muted">{{ subtitle }}</p>
+            <p v-if="subtitle" class="truncate text-2xs text-muted">{{ subtitle }}</p>
           </div>
           <!-- Window-specific header content (status badges, counts). -->
           <slot name="header-extras" />
@@ -299,14 +301,15 @@ const panelClass = computed(() => [
             :step-index="stepRef.stepIndex"
             @restarted="requestClose"
           />
-          <button
-            class="rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default"
+          <IconButton
+            icon="i-lucide-x"
+            color="neutral"
+            variant="ghost"
+            size="sm"
             data-testid="result-window-close"
-            :aria-label="t('common.close')"
+            :label="t('common.close')"
             @click="requestClose"
-          >
-            <UIcon name="i-lucide-x" class="h-4 w-4" />
-          </button>
+          />
         </header>
         <!-- Whether the whole-run fetch behind this window's prose has landed. -->
         <RunDetailLoadState :instance-id="activeInstanceId" />
@@ -321,34 +324,37 @@ const panelClass = computed(() => [
           class="shrink-0 border-t border-default bg-default/60"
           data-testid="result-window-effort"
         >
-          <button
-            type="button"
-            class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-elevated/40"
-            :aria-expanded="effortOpen"
-            data-testid="result-window-effort-toggle"
-            @click="effortOpen = !effortOpen"
-          >
-            <UIcon name="i-lucide-gauge" class="h-3.5 w-3.5 shrink-0 text-muted" />
-            <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
-              {{ t('panels.stepDetail.effort.heading') }}
-            </span>
-            <span
-              class="shrink-0 rounded px-1.5 py-0.5 text-[11px] font-medium tabular-nums"
-              :class="chipClass"
+          <UCollapsible v-model:open="effortOpen">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-elevated/40"
+              data-testid="result-window-effort-toggle"
             >
-              {{ t('panels.stepDetail.effort.outOfTen', { value: effortReport.difficulty }) }}
-            </span>
-            <span v-if="hint" class="min-w-0 flex-1 truncate text-[12px] text-muted">
-              {{ hint }}
-            </span>
-            <UIcon
-              :name="effortOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
-              class="ms-auto h-3.5 w-3.5 shrink-0 text-dimmed"
-            />
-          </button>
-          <div v-if="effortOpen" class="max-h-56 overflow-y-auto px-5 pb-3">
-            <StepEffortReport :report="effortReport" variant="flat" />
-          </div>
+              <UIcon name="i-lucide-gauge" class="h-3.5 w-3.5 shrink-0 text-muted" />
+              <SectionLabel as="span">
+                {{ t('panels.stepDetail.effort.heading') }}
+              </SectionLabel>
+              <span
+                class="shrink-0 rounded-sm px-1.5 py-0.5 text-2xs font-medium tabular-nums"
+                :class="chipClass"
+              >
+                {{ t('panels.stepDetail.effort.outOfTen', { value: effortReport.difficulty }) }}
+              </span>
+              <span v-if="hint" class="min-w-0 flex-1 truncate text-xs text-muted">
+                {{ hint }}
+              </span>
+              <UIcon
+                :name="effortOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
+                class="ms-auto h-3.5 w-3.5 shrink-0 text-dimmed"
+              />
+            </UButton>
+            <template #content>
+              <div class="max-h-56 overflow-y-auto px-5 pb-3">
+                <StepEffortReport :report="effortReport" variant="flat" />
+              </div>
+            </template>
+          </UCollapsible>
         </section>
 
         <!-- Shared trailing section: the pre-PR validation report (the service's check commands
@@ -359,51 +365,54 @@ const panelClass = computed(() => [
           class="shrink-0 border-t border-default bg-default/60"
           data-testid="result-window-validation"
         >
-          <button
-            type="button"
-            class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-elevated/40"
-            :aria-expanded="validationOpen"
-            data-testid="result-window-validation-toggle"
-            @click="validationOpen = !validationOpen"
-          >
-            <UIcon
-              :name="validationReport.passed ? 'i-lucide-shield-check' : 'i-lucide-shield-alert'"
-              class="h-3.5 w-3.5 shrink-0"
-              :class="validationReport.passed ? 'text-app-success-400' : 'text-app-error-400'"
-            />
-            <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
-              {{ t('panels.stepDetail.validation.heading') }}
-            </span>
-            <span
-              class="shrink-0 rounded px-1.5 py-0.5 text-[11px] font-medium tabular-nums"
-              :class="
-                validationReport.passed
-                  ? 'bg-app-success-500/15 text-app-success-300'
-                  : 'bg-app-error-500/15 text-app-error-300'
-              "
+          <UCollapsible v-model:open="validationOpen">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-elevated/40"
+              data-testid="result-window-validation-toggle"
             >
-              {{
-                validationReport.passed
-                  ? t('panels.stepDetail.validation.passed')
-                  : t('panels.stepDetail.validation.failed')
-              }}
-            </span>
-            <span class="min-w-0 flex-1 truncate text-[12px] text-muted">
-              {{
-                t('panels.stepDetail.validation.attempts', {
-                  attempts: validationReport.attempts,
-                  maxAttempts: validationReport.maxAttempts,
-                })
-              }}
-            </span>
-            <UIcon
-              :name="validationOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
-              class="ms-auto h-3.5 w-3.5 shrink-0 text-dimmed"
-            />
-          </button>
-          <div v-if="validationOpen" class="max-h-72 overflow-y-auto px-5 pb-3">
-            <StepValidationReport :report="validationReport" />
-          </div>
+              <UIcon
+                :name="validationReport.passed ? 'i-lucide-shield-check' : 'i-lucide-shield-alert'"
+                class="h-3.5 w-3.5 shrink-0"
+                :class="validationReport.passed ? 'text-app-success-400' : 'text-app-error-400'"
+              />
+              <SectionLabel as="span">
+                {{ t('panels.stepDetail.validation.heading') }}
+              </SectionLabel>
+              <span
+                class="shrink-0 rounded-sm px-1.5 py-0.5 text-2xs font-medium tabular-nums"
+                :class="
+                  validationReport.passed
+                    ? 'bg-app-success-500/15 text-app-success-300'
+                    : 'bg-app-error-500/15 text-app-error-300'
+                "
+              >
+                {{
+                  validationReport.passed
+                    ? t('panels.stepDetail.validation.passed')
+                    : t('panels.stepDetail.validation.failed')
+                }}
+              </span>
+              <span class="min-w-0 flex-1 truncate text-xs text-muted">
+                {{
+                  t('panels.stepDetail.validation.attempts', {
+                    attempts: validationReport.attempts,
+                    maxAttempts: validationReport.maxAttempts,
+                  })
+                }}
+              </span>
+              <UIcon
+                :name="validationOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
+                class="ms-auto h-3.5 w-3.5 shrink-0 text-dimmed"
+              />
+            </UButton>
+            <template #content>
+              <div class="max-h-72 overflow-y-auto px-5 pb-3">
+                <StepValidationReport :report="validationReport" />
+              </div>
+            </template>
+          </UCollapsible>
         </section>
 
         <!-- Shared trailing section: the bugfix reproduction proof (the declared check run against
@@ -415,42 +424,45 @@ const panelClass = computed(() => [
           class="shrink-0 border-t border-default bg-default/60"
           data-testid="result-window-reproduction"
         >
-          <button
-            type="button"
-            class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-elevated/40"
-            :aria-expanded="reproductionOpen"
-            data-testid="result-window-reproduction-toggle"
-            @click="reproductionOpen = !reproductionOpen"
-          >
-            <UIcon
-              :name="reproductionKeys!.icon"
-              class="h-3.5 w-3.5 shrink-0"
-              :class="reproductionKeys!.proven ? 'text-app-success-400' : 'text-app-warning-400'"
-            />
-            <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
-              {{ t('panels.stepDetail.reproduction.heading') }}
-            </span>
-            <span
-              class="shrink-0 rounded px-1.5 py-0.5 text-[11px] font-medium"
-              :class="
-                reproductionKeys!.proven
-                  ? 'bg-app-success-500/15 text-app-success-300'
-                  : 'bg-app-warning-500/15 text-app-warning-300'
-              "
+          <UCollapsible v-model:open="reproductionOpen">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-elevated/40"
+              data-testid="result-window-reproduction-toggle"
             >
-              {{ t(reproductionKeys!.chip) }}
-            </span>
-            <span class="min-w-0 flex-1 truncate text-[12px] text-muted">
-              {{ t(reproductionKeys!.verdict) }}
-            </span>
-            <UIcon
-              :name="reproductionOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
-              class="ms-auto h-3.5 w-3.5 shrink-0 text-dimmed"
-            />
-          </button>
-          <div v-if="reproductionOpen" class="max-h-72 overflow-y-auto px-5 pb-3">
-            <StepReproductionReport :report="reproductionReport" />
-          </div>
+              <UIcon
+                :name="reproductionKeys!.icon"
+                class="h-3.5 w-3.5 shrink-0"
+                :class="reproductionKeys!.proven ? 'text-app-success-400' : 'text-app-warning-400'"
+              />
+              <SectionLabel as="span">
+                {{ t('panels.stepDetail.reproduction.heading') }}
+              </SectionLabel>
+              <span
+                class="shrink-0 rounded-sm px-1.5 py-0.5 text-2xs font-medium"
+                :class="
+                  reproductionKeys!.proven
+                    ? 'bg-app-success-500/15 text-app-success-300'
+                    : 'bg-app-warning-500/15 text-app-warning-300'
+                "
+              >
+                {{ t(reproductionKeys!.chip) }}
+              </span>
+              <span class="min-w-0 flex-1 truncate text-xs text-muted">
+                {{ t(reproductionKeys!.verdict) }}
+              </span>
+              <UIcon
+                :name="reproductionOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
+                class="ms-auto h-3.5 w-3.5 shrink-0 text-dimmed"
+              />
+            </UButton>
+            <template #content>
+              <div class="max-h-72 overflow-y-auto px-5 pb-3">
+                <StepReproductionReport :report="reproductionReport" />
+              </div>
+            </template>
+          </UCollapsible>
         </section>
 
         <!-- Shared trailing section: what this step's agent declared it stored through a
@@ -463,28 +475,31 @@ const panelClass = computed(() => [
           class="shrink-0 border-t border-default bg-default/60"
           data-testid="result-window-binary-outputs"
         >
-          <button
-            type="button"
-            class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-elevated/40"
-            :aria-expanded="binaryOutputsOpen"
-            data-testid="result-window-binary-outputs-toggle"
-            @click="binaryOutputsOpen = !binaryOutputsOpen"
-          >
-            <UIcon name="i-lucide-image" class="h-3.5 w-3.5 shrink-0 text-muted" />
-            <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
-              {{ t('binaryOutput.heading') }}
-            </span>
-            <span class="min-w-0 flex-1 truncate text-[12px] text-muted">
-              {{ binaryOutputSummary }}
-            </span>
-            <UIcon
-              :name="binaryOutputsOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
-              class="ms-auto h-3.5 w-3.5 shrink-0 text-dimmed"
-            />
-          </button>
-          <div v-if="binaryOutputsOpen && activeStep" class="max-h-72 overflow-y-auto px-5 pb-3">
-            <BinaryOutputReport :step="activeStep" />
-          </div>
+          <UCollapsible v-model:open="binaryOutputsOpen">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-elevated/40"
+              data-testid="result-window-binary-outputs-toggle"
+            >
+              <UIcon name="i-lucide-image" class="h-3.5 w-3.5 shrink-0 text-muted" />
+              <SectionLabel as="span">
+                {{ t('binaryOutput.heading') }}
+              </SectionLabel>
+              <span class="min-w-0 flex-1 truncate text-xs text-muted">
+                {{ binaryOutputSummary }}
+              </span>
+              <UIcon
+                :name="binaryOutputsOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
+                class="ms-auto h-3.5 w-3.5 shrink-0 text-dimmed"
+              />
+            </UButton>
+            <template #content>
+              <div v-if="activeStep" class="max-h-72 overflow-y-auto px-5 pb-3">
+                <BinaryOutputReport :step="activeStep" />
+              </div>
+            </template>
+          </UCollapsible>
         </section>
       </div>
     </div>

package/app/components/panels/RunDetailLoadState.vue

@@ -25,7 +25,7 @@ const error = computed(() => execution.fullError(props.instanceId))
 <template>
   <div
     v-if="loading || error"
-    class="flex items-center gap-2 border-b border-default px-4 py-2 text-[11px]"
+    class="flex items-center gap-2 border-b border-default px-4 py-2 text-2xs"
     :class="error ? 'text-app-error-300' : 'text-muted'"
     data-testid="run-detail-load-state"
   >

package/app/components/panels/StepContainerStatus.vue

@@ -2,6 +2,8 @@
 import { computed } from 'vue'
 import type { PipelineStep, RunContainerStatus } from '~/types/execution'
 import { containerPhaseLabel } from '~/utils/pipelineRender'
+import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 // The per-run container lifecycle for a container-backed step: its status (spinning up /
 // running / errored / reclaimed), the live phase (preparing the checkout vs the agent
@@ -94,7 +96,7 @@ const { copy: copyText } = useCopyToClipboard()
          live phase (preparing the checkout vs the agent making calls), and the
          container's id + reachable URL once up. -->
     <div
-      class="rounded-lg border px-3 py-2 text-[12px]"
+      class="rounded-lg border px-3 py-2 text-xs"
       :class="CONTAINER_STATUS_META[containerStatus].cls"
     >
       <div class="flex items-center gap-2">
@@ -111,45 +113,44 @@ const { copy: copyText } = useCopyToClipboard()
       </div>
       <dl v-if="step.container?.id || step.container?.url" class="mt-2 space-y-1">
         <div v-if="step.container?.id" class="flex items-center gap-2">
-          <dt class="shrink-0 text-[11px] uppercase tracking-wide text-dimmed">
+          <SectionLabel as="dt" class="shrink-0">
             {{ t('panels.stepMeta.container.id') }}
-          </dt>
-          <dd class="truncate font-mono text-[11px] text-toned" :title="step.container.id">
+          </SectionLabel>
+          <dd class="truncate font-mono text-2xs text-toned" :title="step.container.id">
             {{ step.container.id }}
           </dd>
-          <UButton
+          <IconButton
             icon="i-lucide-copy"
             color="neutral"
             variant="ghost"
             size="xs"
             class="ms-auto shrink-0"
-            :title="t('panels.stepMeta.container.copyId')"
-            :aria-label="t('panels.stepMeta.container.copyId')"
+            :label="t('panels.stepMeta.container.copyId')"
             @click="copyText(step.container.id)"
           />
         </div>
         <div v-if="step.container?.url" class="flex items-center gap-2">
-          <dt class="shrink-0 text-[11px] uppercase tracking-wide text-dimmed">
+          <SectionLabel as="dt" class="shrink-0">
             {{ t('panels.stepMeta.container.url') }}
-          </dt>
-          <dd class="truncate font-mono text-[11px] text-toned">
-            <a
-              :href="step.container.url"
+          </SectionLabel>
+          <dd class="truncate font-mono text-2xs text-toned">
+            <ULink
+              raw
+              :to="step.container.url"
               target="_blank"
               rel="noopener noreferrer"
               class="hover:underline"
             >
               {{ step.container.url }}
-            </a>
+            </ULink>
           </dd>
-          <UButton
+          <IconButton
             icon="i-lucide-copy"
             color="neutral"
             variant="ghost"
             size="xs"
             class="ms-auto shrink-0"
-            :title="t('panels.stepMeta.container.copyUrl')"
-            :aria-label="t('panels.stepMeta.container.copyUrl')"
+            :label="t('panels.stepMeta.container.copyUrl')"
             @click="copyText(step.container.url)"
           />
         </div>

package/app/components/panels/StepDelegatedStatus.vue

@@ -6,6 +6,8 @@ import {
   externalRunHref,
 } from './StepDelegatedStatus.logic'
 import type { PipelineStep } from '~/types/execution'
+import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 // The EXTERNAL work a delegated step dispatched: which registered executor is running it, what it
 // is doing, and the link to that system's own logs, which is the affordance everything else here
@@ -77,7 +79,7 @@ const { copy: copyText } = useCopyToClipboard()
   <!-- Single conditional root so a passed-through `class` (e.g. layout margin) applies cleanly.
        Renders nothing for a step that dispatched nowhere external. -->
   <div v-if="record" data-testid="step-delegated-status">
-    <div class="rounded-lg border px-3 py-2 text-[12px]" :class="statusView.meta.cls">
+    <div class="rounded-lg border px-3 py-2 text-xs" :class="statusView.meta.cls">
       <div class="flex items-center gap-2">
         <UIcon
           :name="statusView.meta.icon"
@@ -98,32 +100,32 @@ const { copy: copyText } = useCopyToClipboard()
       <!-- The PRIMARY affordance: the executor's own logs. It is the only place the detail of
            what happened exists, which is why a failed delegated step without it is a dead end. -->
       <div v-if="record.url" class="mt-2 flex items-center gap-2">
-        <dt class="shrink-0 text-[11px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="dt" class="shrink-0">
           {{ t('panels.stepMeta.delegated.run') }}
-        </dt>
+        </SectionLabel>
         <!-- Linked only when the executor's URL is `http(s)`. Anything else is shown as the text
              it is: refusing to follow it is right, and hiding it would report a run that named
              no link at all. -->
-        <dd class="truncate font-mono text-[11px] text-toned">
-          <a
+        <dd class="truncate font-mono text-2xs text-toned">
+          <ULink
+            raw
             v-if="runHref"
-            :href="runHref"
+            :to="runHref"
             target="_blank"
             rel="noopener noreferrer"
             class="hover:underline"
           >
             {{ record.url }}
-          </a>
+          </ULink>
           <span v-else>{{ record.url }}</span>
         </dd>
-        <UButton
+        <IconButton
           icon="i-lucide-copy"
           color="neutral"
           variant="ghost"
           size="xs"
           class="ms-auto shrink-0"
-          :title="t('panels.stepMeta.delegated.copyUrl')"
-          :aria-label="t('panels.stepMeta.delegated.copyUrl')"
+          :label="t('panels.stepMeta.delegated.copyUrl')"
           @click="copyText(record.url)"
         />
       </div>
@@ -132,48 +134,49 @@ const { copy: copyText } = useCopyToClipboard()
            request. Rendered here because the platform holds nothing else about that run's
            product. -->
       <div v-if="landedBranch" class="mt-2 flex items-center gap-2">
-        <dt class="shrink-0 text-[11px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="dt" class="shrink-0">
           {{ t('panels.stepMeta.delegated.branch') }}
-        </dt>
-        <dd class="truncate font-mono text-[11px] text-toned">{{ landedBranch }}</dd>
+        </SectionLabel>
+        <dd class="truncate font-mono text-2xs text-toned">{{ landedBranch }}</dd>
       </div>
 
       <!-- What the platform could not do, stated rather than left to read as a clean outcome:
            a cancelled run whose executor declares no cancel is still going. -->
-      <p v-if="record.note" class="mt-2 text-[11px] text-toned">{{ record.note }}</p>
+      <p v-if="record.note" class="mt-2 text-2xs text-toned">{{ record.note }}</p>
     </div>
 
     <!-- "Absent" and "zero" must never render the same. Without this line a delegated step shows
          no tokens beside a container step that shows some, and the only available reading is that
          it was free. -->
-    <p v-if="usageUnreported" class="mt-2 text-[11px] text-dimmed">
+    <p v-if="usageUnreported" class="mt-2 text-2xs text-dimmed">
       {{ t('panels.stepMeta.delegated.usageNotReported', { executor: executorName }) }}
     </p>
 
     <!-- Earlier attempts. Kept across a re-run on purpose: the previous run's logs are the
          evidence for why this step is being run again, and the platform holds nothing else. -->
     <div v-if="priorAttempts.length" class="mt-3">
-      <div class="text-[11px] uppercase tracking-wide text-dimmed">
+      <SectionLabel>
         {{ t('panels.stepMeta.delegated.earlierAttempts') }}
-      </div>
+      </SectionLabel>
       <ul class="mt-1 space-y-1">
         <li
           v-for="(attempt, index) in priorAttempts"
           :key="`${attempt.startedAt}-${index}`"
-          class="flex items-center gap-2 text-[11px] text-muted"
+          class="flex items-center gap-2 text-2xs text-muted"
         >
           <span class="truncate">{{
             attempt.outcome || t('panels.stepMeta.delegated.noOutcome')
           }}</span>
-          <a
+          <ULink
+            raw
             v-if="externalRunHref(attempt.url)"
-            :href="externalRunHref(attempt.url)!"
+            :to="externalRunHref(attempt.url)!"
             target="_blank"
             rel="noopener noreferrer"
             class="ms-auto shrink-0 font-mono hover:underline"
           >
             {{ t('panels.stepMeta.delegated.openRun') }}
-          </a>
+          </ULink>
         </li>
       </ul>
     </div>

package/app/components/panels/StepEffortReport.vue

@@ -10,6 +10,7 @@
 // second one plus a nested border would just be chrome inside chrome.
 import type { AgentEffortReport } from '~/types/execution'
 import { effortBand } from '~/utils/effort'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = withDefaults(
   defineProps<{ report: AgentEffortReport; variant?: 'card' | 'flat' }>(),
@@ -37,16 +38,13 @@ const difficultyClass = computed(() => BAR_CLASS[effortBand(props.report.difficu
       variant === 'card' ? 'scroll-mt-4 rounded-xl border border-default bg-default/50 p-4' : ''
     "
   >
-    <div
-      v-if="variant === 'card'"
-      class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted"
-    >
+    <SectionLabel v-if="variant === 'card'" class="mb-2 flex items-center gap-1.5">
       <UIcon name="i-lucide-gauge" class="h-3.5 w-3.5" />
       <span>{{ t('panels.stepDetail.effort.heading') }}</span>
-    </div>
+    </SectionLabel>
 
     <div class="flex items-center gap-2">
-      <span class="text-[12px] text-toned" :title="t('panels.stepDetail.effort.difficultyHint')">
+      <span class="text-xs text-toned" :title="t('panels.stepDetail.effort.difficultyHint')">
         {{ t('panels.stepDetail.effort.difficulty') }}
       </span>
       <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-accented/60">
@@ -58,38 +56,35 @@ const difficultyClass = computed(() => BAR_CLASS[effortBand(props.report.difficu
       </div>
       <span
         data-testid="step-effort-difficulty"
-        class="text-[12px] font-medium text-default"
+        class="text-xs font-medium text-default"
         :title="t('panels.stepDetail.effort.difficultyHint')"
       >
         {{ t('panels.stepDetail.effort.outOfTen', { value: report.difficulty }) }}
       </span>
     </div>
 
-    <p
-      v-if="report.summary"
-      class="mt-2 whitespace-pre-wrap text-[13px] leading-relaxed text-toned"
-    >
+    <p v-if="report.summary" class="mt-2 whitespace-pre-wrap text-sm leading-relaxed text-toned">
       {{ report.summary }}
     </p>
 
     <div v-if="report.reducedEffectiveness" class="mt-3">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+      <SectionLabel as="p">
         {{ t('panels.stepDetail.effort.reduced') }}
-      </p>
-      <p class="mt-0.5 whitespace-pre-wrap text-[12px] text-toned">
+      </SectionLabel>
+      <p class="mt-0.5 whitespace-pre-wrap text-xs text-toned">
         {{ report.reducedEffectiveness }}
       </p>
     </div>
 
     <div v-if="report.obstacles?.length" class="mt-3">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+      <SectionLabel as="p">
         {{ t('panels.stepDetail.effort.obstacles') }}
-      </p>
+      </SectionLabel>
       <ul class="mt-0.5 space-y-1">
         <li
           v-for="(obstacle, i) in report.obstacles"
           :key="i"
-          class="flex items-start gap-1.5 text-[12px] text-toned"
+          class="flex items-start gap-1.5 text-xs text-toned"
         >
           <UIcon
             name="i-lucide-alert-triangle"