@cat-factory/app 0.308.0 → 0.309.0

package/app/components/panels/inspector/TaskExecution.vue

@@ -22,6 +22,7 @@ import MergeEffortChips from '~/components/merge/MergeEffortChips.vue'
 import InputGateNotice from '~/components/inputGate/InputGateNotice.vue'
 import { inputGateNoticeFor } from '~/utils/inputGate'
 import { composeRunOutcome, hasOutcomeToShow } from '~/utils/runOutcome'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -306,9 +307,9 @@ async function mergePr() {
     <div v-if="instance">
       <div class="mb-1 flex items-center justify-between">
         <span class="flex min-w-0 items-center gap-1.5">
-          <span class="truncate text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="span" class="truncate">
             {{ instance.pipelineName }}
-          </span>
+          </SectionLabel>
           <!-- A sandboxed run looks exactly like one that simply has not reached the merge yet,
                right up until it stops there, so it says what it is from the start. -->
           <UBadge
@@ -406,7 +407,7 @@ async function mergePr() {
               </span>
               <span
                 v-if="isCompanionKind(s.agentKind)"
-                class="shrink-0 rounded bg-accented/60 px-1 text-[9px] font-medium uppercase tracking-wide text-toned"
+                class="shrink-0 rounded-sm bg-accented/60 px-1 text-3xs font-medium uppercase tracking-wide text-toned"
                 :title="t('inspector.execution.companionTooltip')"
               >
                 {{ t('inspector.execution.companion') }}
@@ -418,7 +419,7 @@ async function mergePr() {
             </button>
             <span
               v-if="s.subtasks && s.subtasks.total > 0"
-              class="ms-auto font-mono text-[10px] tabular-nums text-toned"
+              class="ms-auto font-mono text-3xs tabular-nums text-toned"
               data-testid="run-subtasks"
               :title="
                 s.subtasks.inProgress > 0
@@ -436,7 +437,7 @@ async function mergePr() {
               {{ s.subtasks.completed }}/{{ s.subtasks.total }}
             </span>
             <span
-              class="inline-flex items-center gap-1 text-[10px]"
+              class="inline-flex items-center gap-1 text-3xs"
               :class="[
                 stepFailed(s) ? 'text-app-error-400' : 'text-muted',
                 { 'ms-auto': !s.subtasks },
@@ -467,7 +468,7 @@ async function mergePr() {
                  indicator, NOT a "Review" gate (the human is summoned only if needed) -->
             <span
               v-else-if="reviews.isBackground(s.agentKind, block.id) && reviewStage"
-              class="inline-flex shrink-0 items-center gap-1 text-[10px] text-primary"
+              class="inline-flex shrink-0 items-center gap-1 text-3xs text-primary"
             >
               <UIcon name="i-lucide-loader-circle" class="h-3 w-3 animate-spin" />
               {{ reviewStageLabel }}
@@ -560,7 +561,7 @@ async function mergePr() {
           </div>
           <div
             v-if="s.model"
-            class="mt-0.5 flex items-center gap-1 ps-6 text-[10px] text-dimmed"
+            class="mt-0.5 flex items-center gap-1 ps-6 text-3xs text-dimmed"
             :title="s.model"
           >
             <UIcon name="i-lucide-cpu" class="h-3 w-3" />
@@ -569,7 +570,7 @@ async function mergePr() {
           <!-- Prompt-fragment standards the library selected for this step. -->
           <div
             v-if="s.selectedFragmentIds && s.selectedFragmentIds.length"
-            class="mt-0.5 flex flex-wrap items-center gap-1 ps-6 text-[10px] text-dimmed"
+            class="mt-0.5 flex flex-wrap items-center gap-1 ps-6 text-3xs text-dimmed"
             :title="
               t('inspector.execution.fragmentsTooltip', {
                 fragments: s.selectedFragmentIds.join(', '),
@@ -589,7 +590,7 @@ async function mergePr() {
                completed/skipped, so it's clear whether a fix pass ran. -->
           <div
             v-if="gateCompanionFor(s, runFailed)"
-            class="mt-0.5 flex items-center gap-1.5 ps-6 text-[10px]"
+            class="mt-0.5 flex items-center gap-1.5 ps-6 text-3xs"
           >
             <UIcon
               :name="agentKindMeta(gateCompanionFor(s, runFailed)!.kind).icon"
@@ -641,9 +642,9 @@ async function mergePr() {
 
     <!-- Open PR: link straight to it on GitHub -->
     <div v-if="pr" class="space-y-2">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="span">
         {{ t('inspector.execution.pullRequest') }}
-      </span>
+      </SectionLabel>
       <UButton
         :to="pr.url"
         target="_blank"
@@ -663,7 +664,7 @@ async function mergePr() {
           </UBadge>
         </span>
       </UButton>
-      <p v-if="pr.branch" class="flex items-center gap-1 truncate text-[10px] text-dimmed">
+      <p v-if="pr.branch" class="flex items-center gap-1 truncate text-3xs text-dimmed">
         <UIcon name="i-lucide-git-branch" class="h-3 w-3 shrink-0" />
         <span class="truncate" :title="pr.branch">{{ pr.branch }}</span>
       </p>

package/app/components/panels/inspector/TaskRunSettings.vue

@@ -9,6 +9,7 @@ import InspectorSection from '~/components/panels/inspector/InspectorSection.vue
 import RiskPolicyPicker from '~/components/riskPolicy/RiskPolicyPicker.vue'
 import TaskAprioriBranches from '~/components/panels/inspector/TaskAprioriBranches.vue'
 import DocReferenceRepos from '~/components/panels/inspector/DocReferenceRepos.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -283,9 +284,9 @@ const technicalLabel = computed(() => {
     <!-- pipeline -->
     <div>
       <div class="mb-1 flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('inspector.runSettings.pipeline') }}
-        </span>
+        </SectionLabel>
         <PipelinePicker
           :model-value="block.pipelineId ?? ''"
           :options="selectablePipelines"
@@ -314,10 +315,10 @@ const technicalLabel = computed(() => {
           {{ selectedPipeline.name }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
         </UBadge>
       </div>
-      <div v-else class="text-[11px] text-dimmed">
+      <div v-else class="text-2xs text-dimmed">
         {{ t('inspector.runSettings.pipelineEmpty') }}
       </div>
-      <p class="mt-1 text-[11px] leading-snug text-dimmed">
+      <p class="mt-1 text-2xs leading-snug text-dimmed">
         {{ t('inspector.runSettings.pipelineHint') }}
       </p>
     </div>
@@ -325,9 +326,9 @@ const technicalLabel = computed(() => {
     <!-- merge policy preset (advanced, or basic with an override already set) -->
     <div v-if="showOverrideField(uiMode.isAdvanced, block.riskPolicyId)">
       <div class="mb-1 flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('inspector.runSettings.mergePolicy') }}
-        </span>
+        </SectionLabel>
         <RiskPolicyPicker
           :model-value="block.riskPolicyId ?? ''"
           :options="riskPolicies.presets"
@@ -347,7 +348,7 @@ const technicalLabel = computed(() => {
           </template>
         </RiskPolicyPicker>
       </div>
-      <div v-if="selectedPreset" class="text-[11px] text-muted">
+      <div v-if="selectedPreset" class="text-2xs text-muted">
         <i18n-t
           v-if="selectedPreset.autoMergeEnabled"
           keypath="inspector.runSettings.riskPolicyDetail"
@@ -373,10 +374,10 @@ const technicalLabel = computed(() => {
           t('inspector.runSettings.workspaceDefaultParen')
         }}</span>
       </div>
-      <div v-else class="text-[11px] text-dimmed">
+      <div v-else class="text-2xs text-dimmed">
         {{ t('inspector.runSettings.riskPolicyEmpty') }}
       </div>
-      <p class="mt-1 text-[11px] leading-snug text-dimmed">
+      <p class="mt-1 text-2xs leading-snug text-dimmed">
         {{ t('inspector.runSettings.mergePolicyHint') }}
       </p>
     </div>
@@ -384,9 +385,9 @@ const technicalLabel = computed(() => {
     <!-- model preset (advanced, or basic with an override already set) -->
     <div v-if="showOverrideField(uiMode.isAdvanced, block.modelPresetId)">
       <div class="mb-1 flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('inspector.runSettings.modelPreset') }}
-        </span>
+        </SectionLabel>
         <UDropdownMenu :items="modelPresetMenu">
           <UButton
             size="xs"
@@ -397,7 +398,7 @@ const technicalLabel = computed(() => {
           />
         </UDropdownMenu>
       </div>
-      <div v-if="selectedModelPreset" class="text-[11px] text-muted">
+      <div v-if="selectedModelPreset" class="text-2xs text-muted">
         <span class="text-toned">{{ selectedModelPreset.name }}</span>
         {{ t('inspector.runSettings.modelPresetBase', { model: selectedModelPreset.baseModelId })
         }}<span v-if="Object.keys(selectedModelPreset.overrides).length">{{
@@ -412,12 +413,12 @@ const technicalLabel = computed(() => {
           t('inspector.runSettings.workspaceDefaultParen')
         }}</span>
       </div>
-      <div v-else class="text-[11px] text-dimmed">
+      <div v-else class="text-2xs text-dimmed">
         {{ t('inspector.runSettings.modelPresetEmpty') }}
       </div>
       <div
         v-if="unavailablePresetModels.length"
-        class="mt-2 rounded-md border border-app-warning-500/40 bg-app-warning-950/40 p-2 text-[11px] text-app-warning-200/90"
+        class="mt-2 rounded-md border border-app-warning-500/40 bg-app-warning-950/40 p-2 text-2xs text-app-warning-200/90"
       >
         <div class="flex items-start gap-1.5">
           <UIcon
@@ -449,7 +450,7 @@ const technicalLabel = computed(() => {
           </div>
         </div>
       </div>
-      <p class="mt-1 text-[11px] text-dimmed">
+      <p class="mt-1 text-2xs text-dimmed">
         {{ t('inspector.runSettings.modelPresetHint') }}
         {{ t('inspector.runSettings.modelPresetChangeHint') }}
       </p>
@@ -458,9 +459,9 @@ const technicalLabel = computed(() => {
     <!-- technical label (tri-state) — unset lets the engine infer it -->
     <div v-if="showOverrideField(uiMode.isAdvanced, block.technical)">
       <div class="mb-1 flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('inspector.runSettings.taskKind') }}
-        </span>
+        </SectionLabel>
         <UDropdownMenu :items="technicalMenu">
           <UButton
             size="xs"
@@ -473,7 +474,7 @@ const technicalLabel = computed(() => {
           </UButton>
         </UDropdownMenu>
       </div>
-      <div class="text-[11px] text-dimmed">
+      <div class="text-2xs text-dimmed">
         <template v-if="block.technical === true">
           {{ t('inspector.runSettings.technicalHint.technical') }}
         </template>
@@ -489,9 +490,9 @@ const technicalLabel = computed(() => {
     <!-- involved services: connected services this task spans (envs + possible code changes) -->
     <div data-testid="involved-services">
       <div class="mb-1 flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('inspector.runSettings.involvedServices') }}
-        </span>
+        </SectionLabel>
       </div>
       <div v-if="connectedServices.length" class="space-y-1">
         <UCheckbox
@@ -504,7 +505,7 @@ const technicalLabel = computed(() => {
           @update:model-value="(v: boolean | 'indeterminate') => toggleInvolved(s.id, v === true)"
         />
       </div>
-      <div v-else class="text-[11px] text-dimmed">
+      <div v-else class="text-2xs text-dimmed">
         {{ t('inspector.runSettings.involvedServicesEmpty') }}
       </div>
       <div v-if="staleInvolvedServices.length" class="mt-1 flex flex-wrap gap-1">
@@ -519,7 +520,7 @@ const technicalLabel = computed(() => {
           {{ board.getBlock(id)?.title ?? id }}
         </UBadge>
       </div>
-      <div class="mt-1 text-[11px] text-dimmed">
+      <div class="mt-1 text-2xs text-dimmed">
         {{ t('inspector.runSettings.involvedServicesHint') }}
       </div>
     </div>
@@ -543,15 +544,13 @@ const technicalLabel = computed(() => {
       "
     >
       <div class="mb-1 flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('inspector.runSettings.issueWriteback') }}
-        </span>
+        </SectionLabel>
       </div>
       <div class="space-y-1.5">
         <div class="flex items-center justify-between">
-          <span class="text-[11px] text-muted">{{
-            t('inspector.runSettings.commentOnPrOpen')
-          }}</span>
+          <span class="text-2xs text-muted">{{ t('inspector.runSettings.commentOnPrOpen') }}</span>
           <UDropdownMenu :items="writebackMenu(setCommentOnPrOpen)">
             <UButton
               size="xs"
@@ -564,7 +563,7 @@ const technicalLabel = computed(() => {
           </UDropdownMenu>
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-[11px] text-muted">{{ t('inspector.runSettings.closeOnMerge') }}</span>
+          <span class="text-2xs text-muted">{{ t('inspector.runSettings.closeOnMerge') }}</span>
           <UDropdownMenu :items="writebackMenu(setResolveOnMerge)">
             <UButton
               size="xs"
@@ -577,9 +576,7 @@ const technicalLabel = computed(() => {
           </UDropdownMenu>
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-[11px] text-muted">{{
-            t('inspector.runSettings.questionsOnPark')
-          }}</span>
+          <span class="text-2xs text-muted">{{ t('inspector.runSettings.questionsOnPark') }}</span>
           <UDropdownMenu :items="writebackMenu(setQuestionsOnPark)">
             <UButton
               size="xs"
@@ -592,7 +589,7 @@ const technicalLabel = computed(() => {
           </UDropdownMenu>
         </div>
       </div>
-      <div class="mt-1 text-[11px] text-dimmed">
+      <div class="mt-1 text-2xs text-dimmed">
         {{ t('inspector.runSettings.writebackHint') }}
       </div>
     </div>
@@ -600,9 +597,9 @@ const technicalLabel = computed(() => {
     <!-- responsible product person -->
     <div>
       <div class="mb-1 flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('inspector.runSettings.responsibleProduct') }}
-        </span>
+        </SectionLabel>
         <UDropdownMenu :items="responsibleMenu">
           <UButton
             size="xs"
@@ -624,7 +621,7 @@ const technicalLabel = computed(() => {
           {{ responsibleLabel }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
         </UBadge>
       </div>
-      <div v-else class="text-[11px] text-dimmed">
+      <div v-else class="text-2xs text-dimmed">
         {{ t('inspector.runSettings.responsibleEmpty') }}
       </div>
     </div>
@@ -632,16 +629,16 @@ const technicalLabel = computed(() => {
     <!-- auto-start dependents: when this task merges, start the tasks that depend on it -->
     <div>
       <div class="flex items-center justify-between gap-2">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('inspector.runSettings.autoStartDependents') }}
-        </span>
+        </SectionLabel>
         <USwitch
           size="sm"
           :model-value="block.autoStartDependents ?? false"
           @update:model-value="setAutoStartDependents"
         />
       </div>
-      <div class="mt-1 text-[11px] text-dimmed">
+      <div class="mt-1 text-2xs text-dimmed">
         {{ t('inspector.runSettings.autoStartHint') }}
       </div>
     </div>

package/app/components/panels/inspector/TaskStructure.vue

@@ -2,6 +2,7 @@
 import type { Block } from '~/types/domain'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 import FragmentSelector from '~/components/fragments/FragmentSelector.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -83,9 +84,9 @@ function setFragments(ids: string[]) {
   <InspectorSection :title="t('inspector.structure.title')" :hint="t('inspector.structure.hint')">
     <!-- module assignment -->
     <div>
-      <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel class="mb-1">
         {{ t('inspector.structure.module') }}
-      </div>
+      </SectionLabel>
       <USelectMenu
         :model-value="selectedModule"
         :items="moduleOptions"
@@ -99,7 +100,7 @@ function setFragments(ids: string[]) {
         @update:model-value="setModule"
         @create="setModule"
       />
-      <p class="mt-1 text-[11px] leading-snug text-dimmed">
+      <p class="mt-1 text-2xs leading-snug text-dimmed">
         {{ t('inspector.structure.moduleHint') }}
       </p>
     </div>
@@ -113,7 +114,7 @@ function setFragments(ids: string[]) {
         :empty-text="t('inspector.structure.bestPracticesEmpty')"
         @update:model-value="setFragments"
       />
-      <p class="mt-1 text-[11px] leading-snug text-dimmed">
+      <p class="mt-1 text-2xs leading-snug text-dimmed">
         {{ t('inspector.structure.bestPracticesHint') }}
       </p>
     </div>

package/app/components/pipeline/AgentPromptEditor.vue

@@ -10,6 +10,7 @@ import {
   isRevisionConflict,
   saveIntent,
 } from '~/components/pipeline/AgentPromptEditor.logic'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The per-workspace system-prompt editor for ONE agent kind, opened from the pipeline builder
 // (where the kinds are actually chosen). It edits the SHIPPED track prompt only: the platform
@@ -192,14 +193,14 @@ function revisionLabel(revision: AgentPromptRevision): string {
         <!-- The workspace-wide output ceiling for this kind. Same per-agent-kind scope as the
              prompt below it; saves on change, since there is no revision log to commit to. -->
         <div class="flex flex-wrap items-center gap-2">
-          <span class="text-[11px] text-muted">{{ t('pipeline.outputBudget.kindLabel') }}</span>
+          <span class="text-2xs text-muted">{{ t('pipeline.outputBudget.kindLabel') }}</span>
           <OutputBudgetInput
             class="w-32"
             :model-value="budget"
             :disabled="agentSettings.saving"
             @update:model-value="saveBudget"
           />
-          <span class="text-[10px] text-dimmed">
+          <span class="text-3xs text-dimmed">
             {{ t('pipeline.outputBudget.kindHint') }}
           </span>
         </div>
@@ -207,7 +208,7 @@ function revisionLabel(revision: AgentPromptRevision): string {
         <!-- What the platform appends is SHOWN, not described. A prose summary of it is copy
              that silently goes stale the moment a directive is added, and a user who does not
              know what is already there writes a prompt that fights it. -->
-        <p v-if="directives" class="text-[11px] leading-relaxed text-dimmed">
+        <p v-if="directives" class="text-2xs leading-relaxed text-dimmed">
           {{ t('agentPrompt.managedNotice') }}
           <UButton
             variant="link"
@@ -222,11 +223,11 @@ function revisionLabel(revision: AgentPromptRevision): string {
           v-if="directives && showDirectives"
           class="rounded-md border border-default bg-app-950/60 p-2"
         >
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h4" class="mb-1">
             {{ t('agentPrompt.appendedHeading') }}
-          </h4>
+          </SectionLabel>
           <pre
-            class="max-h-64 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] text-toned"
+            class="max-h-64 overflow-auto whitespace-pre-wrap break-words font-mono text-2xs text-toned"
             >{{ directives.trim() }}</pre>
         </div>
 
@@ -278,25 +279,25 @@ function revisionLabel(revision: AgentPromptRevision): string {
           >
             {{ showBuiltin ? t('agentPrompt.hideBuiltin') : t('agentPrompt.showBuiltin') }}
           </UButton>
-          <span v-if="restoredFrom !== undefined" class="text-[11px] text-muted">
+          <span v-if="restoredFrom !== undefined" class="text-2xs text-muted">
             {{ t('agentPrompt.restoringFrom', { n: restoredFrom }) }}
           </span>
         </div>
 
         <div v-if="showBuiltin" class="rounded-md border border-default bg-app-950/60 p-2">
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h4" class="mb-1">
             {{ t('agentPrompt.builtinHeading') }}
-          </h4>
+          </SectionLabel>
           <pre
-            class="max-h-64 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] text-toned"
+            class="max-h-64 overflow-auto whitespace-pre-wrap break-words font-mono text-2xs text-toned"
             >{{ detail.builtinText }}</pre>
         </div>
 
         <div>
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h4" class="mb-1">
             {{ t('agentPrompt.historyHeading') }}
-          </h4>
-          <p v-if="!detail.revisions.length" class="text-[11px] text-dimmed">
+          </SectionLabel>
+          <p v-if="!detail.revisions.length" class="text-2xs text-dimmed">
             {{ t('agentPrompt.historyEmpty') }}
           </p>
           <ul v-else class="max-h-52 divide-y divide-default overflow-y-auto text-xs">
@@ -316,7 +317,7 @@ function revisionLabel(revision: AgentPromptRevision): string {
               <span class="min-w-0 flex-1 truncate text-toned">
                 {{ revisionLabel(revision) }}
               </span>
-              <span class="shrink-0 text-[11px] text-dimmed">
+              <span class="shrink-0 text-2xs text-dimmed">
                 {{ d(new Date(revision.createdAt), 'short') }}
               </span>
               <UButton