@cat-factory/app 0.308.0 → 0.310.0

package/app/components/initiative/InitiativeTrackerWindow.vue

@@ -13,6 +13,7 @@
 // request-changes rail has to live here or the gate has no resolving surface at all —
 // which is exactly how an approved-only-over-REST plan gate shipped.
 import { computed, reactive, ref } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
 import type { InitiativeFollowUp, InitiativeItem } from '~/types/domain'
 import { useInitiativePlanning } from '~/composables/useInitiativePlanning'
 import {
@@ -29,6 +30,7 @@ import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import InitiativePlanReview from '~/components/initiative/InitiativePlanReview.vue'
 import InitiativePlanNotice from '~/components/initiative/InitiativePlanNotice.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const initiatives = useInitiativesStore()
@@ -86,6 +88,16 @@ function itemsOf(phaseId: string): InitiativeItem[] {
   return (initiative.value?.items ?? []).filter((i) => i.phaseId === phaseId)
 }
 
+// One column set for every phase's table, so the header typography is the table theme's rather
+// than a per-file recipe.
+const phaseItems = computed(() => phases.value.map((p) => ({ label: p.title, value: p.id })))
+
+const itemColumns = computed<TableColumn<InitiativeItem>[]>(() => [
+  { id: 'item', header: t('initiative.tracker.colItem') },
+  { id: 'status', header: t('initiative.tracker.colStatus') },
+  { id: 'pr', header: t('initiative.tracker.colPr') },
+])
+
 const progress = computed(() => initiativeProgress(initiative.value?.items))
 const progressPct = computed(() =>
   progress.value && progress.value.total > 0
@@ -313,7 +325,7 @@ const { requestClose } = useUnsavedGuard({
             :style="{ width: `${progressPct}%` }"
           />
         </div>
-        <span class="text-[11px] tabular-nums text-muted">
+        <span class="text-2xs tabular-nums text-muted">
           {{ t('initiative.card.progress', { done: progress.settled, total: progress.total }) }}
         </span>
       </div>
@@ -385,29 +397,33 @@ const { requestClose } = useUnsavedGuard({
                 class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-300"
               />
               <div class="min-w-0 flex-1">
-                <h3 class="text-[13px] font-semibold text-app-warning-200">
+                <h3 class="text-sm font-semibold text-app-warning-200">
                   {{ t('initiative.checkpoint.pausedTitle') }}
                 </h3>
-                <p class="mt-0.5 text-[12px] leading-relaxed text-app-warning-100/80">
+                <p class="mt-0.5 text-xs leading-relaxed text-app-warning-100/80">
                   {{ t('initiative.checkpoint.pausedBody', { phase: checkpointPhase!.title }) }}
                 </p>
                 <div class="mt-2.5 flex flex-wrap gap-2">
-                  <button
-                    class="rounded bg-primary/90 px-2.5 py-1 text-[11px] font-medium text-inverted hover:bg-primary disabled:opacity-50"
+                  <UButton
+                    color="neutral"
+                    variant="ghost"
+                    class="rounded-sm bg-primary/90 px-2.5 py-1 text-2xs font-medium text-inverted hover:bg-primary disabled:opacity-50"
                     :disabled="initiatives.controlling"
                     data-testid="initiative-checkpoint-resume"
                     @click="checkpointControl('resume')"
                   >
                     {{ t('initiative.inspector.resume') }}
-                  </button>
-                  <button
-                    class="rounded border border-app-error-500/50 px-2.5 py-1 text-[11px] font-medium text-app-error-300 hover:bg-app-error-500/10 disabled:opacity-50"
+                  </UButton>
+                  <UButton
+                    color="neutral"
+                    variant="ghost"
+                    class="rounded-sm border border-app-error-500/50 px-2.5 py-1 text-2xs font-medium text-app-error-300 hover:bg-app-error-500/10 disabled:opacity-50"
                     :disabled="initiatives.controlling"
                     data-testid="initiative-checkpoint-cancel"
                     @click="checkpointControl('cancel')"
                   >
                     {{ t('initiative.inspector.cancel') }}
-                  </button>
+                  </UButton>
                 </div>
               </div>
             </div>
@@ -418,34 +434,34 @@ const { requestClose } = useUnsavedGuard({
                structure that reads better at the full span, but these are paragraphs and bullets
                of agent-written text that would otherwise run the width of the display. -->
           <section v-if="initiative.goal" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1">
               {{ t('initiative.tracker.goal') }}
-            </h3>
-            <p class="max-w-3xl whitespace-pre-wrap text-[13px] leading-relaxed text-toned">
+            </SectionLabel>
+            <p class="max-w-3xl whitespace-pre-wrap text-sm leading-relaxed text-toned">
               {{ initiative.goal }}
             </p>
           </section>
           <section v-if="initiative.constraints?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1">
               {{ t('initiative.tracker.constraints') }}
-            </h3>
-            <ul class="max-w-3xl list-inside list-disc text-[13px] text-toned">
+            </SectionLabel>
+            <ul class="max-w-3xl list-inside list-disc text-sm text-toned">
               <li v-for="(c, i) in initiative.constraints" :key="i">{{ c }}</li>
             </ul>
           </section>
           <section v-if="initiative.nonGoals?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1">
               {{ t('initiative.tracker.nonGoals') }}
-            </h3>
-            <ul class="max-w-3xl list-inside list-disc text-[13px] text-toned">
+            </SectionLabel>
+            <ul class="max-w-3xl list-inside list-disc text-sm text-toned">
               <li v-for="(g, i) in initiative.nonGoals" :key="i">{{ g }}</li>
             </ul>
           </section>
           <section v-if="initiative.analysisSummary" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1">
               {{ t('initiative.tracker.analysis') }}
-            </h3>
-            <p class="max-w-3xl whitespace-pre-wrap text-[13px] leading-relaxed text-toned">
+            </SectionLabel>
+            <p class="max-w-3xl whitespace-pre-wrap text-sm leading-relaxed text-toned">
               {{ initiative.analysisSummary }}
             </p>
           </section>
@@ -453,7 +469,7 @@ const { requestClose } = useUnsavedGuard({
           <!-- Awaiting planning -->
           <div
             v-if="phases.length === 0"
-            class="mb-4 rounded-lg border border-dashed border-muted p-4 text-center text-[12px] text-muted"
+            class="mb-4 rounded-lg border border-dashed border-muted p-4 text-center text-xs text-muted"
           >
             {{ t('initiative.tracker.noPlan') }}
           </div>
@@ -488,103 +504,112 @@ const { requestClose } = useUnsavedGuard({
                 }}
               </UBadge>
             </h3>
-            <p v-if="phase.goal" class="mb-2 text-[12px] text-muted">{{ phase.goal }}</p>
-            <div class="overflow-x-auto rounded-lg border border-default">
-              <table class="w-full text-[12px]">
-                <thead>
-                  <tr class="border-b border-default text-left text-dimmed">
-                    <th class="px-3 py-2 font-medium">{{ t('initiative.tracker.colItem') }}</th>
-                    <th class="px-3 py-2 font-medium">{{ t('initiative.tracker.colStatus') }}</th>
-                    <th class="px-3 py-2 font-medium">{{ t('initiative.tracker.colPr') }}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr
-                    v-for="item in itemsOf(phase.id)"
-                    :key="item.id"
-                    class="border-b border-default/60 last:border-0"
-                  >
-                    <td class="px-3 py-2 align-top">
-                      <div class="font-medium text-default">{{ item.title }}</div>
-                      <div v-if="item.dependsOn?.length" class="mt-0.5 text-[10px] text-dimmed">
-                        {{
-                          t('initiative.tracker.dependsOn', {
-                            items: item.dependsOn.join(', '),
-                          })
-                        }}
-                      </div>
-                      <div
-                        v-if="item.note"
-                        class="mt-0.5 max-w-3xl text-[10px] text-app-warning-300/80"
-                      >
-                        {{ item.note }}
-                      </div>
-                      <div
-                        v-if="editable && (item.status === 'blocked' || item.status === 'pending')"
-                        class="mt-1 flex gap-1.5"
-                      >
-                        <button
-                          v-if="item.status === 'blocked'"
-                          class="rounded border border-muted px-1.5 py-0.5 text-[10px] text-toned hover:bg-elevated disabled:opacity-50"
-                          :disabled="initiatives.curating"
-                          :data-testid="`initiative-item-retry-${item.id}`"
-                          @click="itemAction(item, 'retry')"
-                        >
-                          {{ t('initiative.curation.retry') }}
-                        </button>
-                        <button
-                          class="rounded border border-muted px-1.5 py-0.5 text-[10px] text-toned hover:bg-elevated disabled:opacity-50"
-                          :disabled="initiatives.curating"
-                          :data-testid="`initiative-item-skip-${item.id}`"
-                          @click="itemAction(item, 'skip')"
-                        >
-                          {{ t('initiative.curation.skip') }}
-                        </button>
-                      </div>
-                    </td>
-                    <td class="px-3 py-2 align-top">
-                      <UBadge
-                        :color="INITIATIVE_ITEM_STATUS_CHIPS[item.status]"
-                        variant="subtle"
-                        size="sm"
-                      >
-                        {{ t(INITIATIVE_ITEM_STATUS_LABEL_KEYS[item.status]) }}
-                      </UBadge>
-                    </td>
-                    <td class="px-3 py-2 align-top">
-                      <a
-                        v-if="item.pr"
-                        :href="item.pr.url"
-                        target="_blank"
-                        rel="noopener"
-                        class="text-app-info-400 hover:underline"
-                      >
-                        {{ item.pr.number ? `#${item.pr.number}` : t('initiative.tracker.prLink') }}
-                      </a>
-                      <span v-else class="text-app-600">—</span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+            <p v-if="phase.goal" class="mb-2 text-xs text-muted">{{ phase.goal }}</p>
+            <UTable
+              :data="itemsOf(phase.id)"
+              :columns="itemColumns"
+              :ui="{
+                root: 'overflow-x-auto rounded-lg border border-default',
+                base: 'text-xs',
+                th: 'px-3 py-2',
+                td: 'px-3 py-2 text-xs whitespace-normal',
+                empty: 'py-0',
+                tr: 'align-top',
+              }"
+            >
+              <template #item-cell="{ row }">
+                <div class="font-medium text-default">{{ row.original.title }}</div>
+                <div v-if="row.original.dependsOn?.length" class="mt-0.5 text-3xs text-dimmed">
+                  {{
+                    t('initiative.tracker.dependsOn', {
+                      items: row.original.dependsOn.join(', '),
+                    })
+                  }}
+                </div>
+                <div
+                  v-if="row.original.note"
+                  class="mt-0.5 max-w-3xl text-3xs text-app-warning-300/80"
+                >
+                  {{ row.original.note }}
+                </div>
+                <div
+                  v-if="
+                    editable &&
+                    (row.original.status === 'blocked' || row.original.status === 'pending')
+                  "
+                  class="mt-1 flex gap-1.5"
+                >
+                  <UButton
+                    v-if="row.original.status === 'blocked'"
+                    color="neutral"
+                    variant="outline"
+                    size="xs"
+                    :label="t('initiative.curation.retry')"
+                    :disabled="initiatives.curating"
+                    :data-testid="`initiative-item-retry-${row.original.id}`"
+                    @click="itemAction(row.original, 'retry')"
+                  />
+                  <UButton
+                    color="neutral"
+                    variant="outline"
+                    size="xs"
+                    :label="t('initiative.curation.skip')"
+                    :disabled="initiatives.curating"
+                    :data-testid="`initiative-item-skip-${row.original.id}`"
+                    @click="itemAction(row.original, 'skip')"
+                  />
+                </div>
+              </template>
+              <template #status-cell="{ row }">
+                <UBadge
+                  :color="INITIATIVE_ITEM_STATUS_CHIPS[row.original.status]"
+                  variant="subtle"
+                  size="sm"
+                >
+                  {{ t(INITIATIVE_ITEM_STATUS_LABEL_KEYS[row.original.status]) }}
+                </UBadge>
+              </template>
+              <template #pr-cell="{ row }">
+                <ULink
+                  raw
+                  v-if="row.original.pr"
+                  :to="row.original.pr.url"
+                  target="_blank"
+                  rel="noopener"
+                  class="text-app-info-400 hover:underline"
+                >
+                  {{
+                    row.original.pr.number
+                      ? `#${row.original.pr.number}`
+                      : t('initiative.tracker.prLink')
+                  }}
+                </ULink>
+                <span v-else class="text-app-600">&mdash;</span>
+              </template>
+              <!-- The hand-built table rendered its header and no row; Nuxt UI's fallback is
+                   an untranslated "No data.", so the slot states the same nothing. -->
+              <template #empty />
+            </UTable>
           </section>
 
           <!-- Execution policy -->
           <section v-if="initiative.policy" class="mb-4">
             <div class="mb-1 flex items-center gap-2">
-              <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+              <SectionLabel as="h3">
                 {{ t('initiative.tracker.policy') }}
-              </h3>
-              <button
+              </SectionLabel>
+              <UButton
+                color="neutral"
+                variant="ghost"
                 v-if="editable && !editingPolicy"
-                class="rounded border border-muted px-1.5 py-0.5 text-[10px] text-toned hover:bg-elevated"
+                class="rounded-sm border border-muted px-1.5 py-0.5 text-3xs text-toned hover:bg-elevated"
                 data-testid="initiative-policy-edit"
                 @click="startEditPolicy"
               >
                 {{ t('initiative.curation.edit') }}
-              </button>
+              </UButton>
             </div>
-            <ul v-if="!editingPolicy" class="text-[12px] text-toned">
+            <ul v-if="!editingPolicy" class="text-xs text-toned">
               <li>
                 {{
                   t('initiative.tracker.maxConcurrent', {
@@ -603,51 +628,66 @@ const { requestClose } = useUnsavedGuard({
             </ul>
             <!-- Edit form: the two scalar knobs; planner-authored rules are preserved. -->
             <div v-else class="flex flex-col gap-2 rounded-lg border border-default p-3">
-              <label class="flex items-center gap-2 text-[12px] text-toned">
-                <span class="w-40">{{ t('initiative.curation.maxConcurrentField') }}</span>
-                <input
-                  v-model.number="policyForm.maxConcurrent"
-                  type="number"
-                  min="1"
-                  max="20"
-                  class="w-20 rounded border border-muted bg-app-950 px-2 py-1 text-default"
+              <UFormField
+                size="xs"
+                :label="t('initiative.curation.maxConcurrentField')"
+                :ui="{ root: 'flex items-center gap-2', label: 'w-40', container: 'mt-0' }"
+              >
+                <UInputNumber
+                  v-model.optional="policyForm.maxConcurrent"
+                  :min="1"
+                  :max="20"
+                  size="xs"
+                  class="w-28"
                   data-testid="initiative-policy-max-concurrent"
                 />
-              </label>
-              <label class="flex items-center gap-2 text-[12px] text-toned">
-                <span class="w-40">{{ t('initiative.curation.defaultPipelineField') }}</span>
-                <input
+              </UFormField>
+              <UFormField
+                size="xs"
+                :label="t('initiative.curation.defaultPipelineField')"
+                :ui="{
+                  root: 'flex items-center gap-2',
+                  label: 'w-40',
+                  container: 'flex-1 mt-0',
+                }"
+              >
+                <UInput
                   v-model="policyForm.defaultPipelineId"
-                  type="text"
-                  class="flex-1 rounded border border-muted bg-app-950 px-2 py-1 font-mono text-[11px] text-default"
+                  size="xs"
+                  class="w-full"
+                  :ui="{ base: 'font-mono' }"
                   data-testid="initiative-policy-default-pipeline"
                 />
-              </label>
+              </UFormField>
               <div class="flex gap-2">
-                <button
-                  class="rounded bg-primary/90 px-2 py-1 text-[11px] text-inverted hover:bg-primary disabled:opacity-50"
+                <UButton
+                  color="neutral"
+                  variant="ghost"
+                  class="rounded-sm bg-primary/90 px-2 py-1 text-2xs text-inverted hover:bg-primary disabled:opacity-50"
                   :disabled="initiatives.curating"
                   data-testid="initiative-policy-save"
                   @click="savePolicy"
                 >
                   {{ t('initiative.curation.save') }}
-                </button>
-                <button
-                  class="rounded border border-muted px-2 py-1 text-[11px] text-toned hover:bg-elevated"
+                </UButton>
+                <UButton
+                  color="neutral"
+                  variant="ghost"
+                  class="rounded-sm border border-muted px-2 py-1 text-2xs text-toned hover:bg-elevated"
                   @click="editingPolicy = false"
                 >
                   {{ t('initiative.curation.cancel') }}
-                </button>
+                </UButton>
               </div>
             </div>
           </section>
 
           <!-- Logs -->
           <section v-if="initiative.decisions?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1">
               {{ t('initiative.tracker.decisions') }}
-            </h3>
-            <ul class="list-inside list-disc text-[13px] text-toned">
+            </SectionLabel>
+            <ul class="list-inside list-disc text-sm text-toned">
               <li v-for="d in initiative.decisions" :key="d.id">
                 <span class="font-medium">{{ d.title }}</span>
                 <span v-if="d.detail" class="text-muted"> — {{ d.detail }}</span>
@@ -655,10 +695,10 @@ const { requestClose } = useUnsavedGuard({
             </ul>
           </section>
           <section v-if="initiative.deviations?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1">
               {{ t('initiative.tracker.deviations') }}
-            </h3>
-            <ul class="max-w-3xl list-inside list-disc text-[13px] text-toned">
+            </SectionLabel>
+            <ul class="max-w-3xl list-inside list-disc text-sm text-toned">
               <li v-for="d in initiative.deviations" :key="d.id">
                 <code v-if="d.itemId" class="text-muted">{{ d.itemId }}</code>
                 {{ d.description }}
@@ -667,10 +707,10 @@ const { requestClose } = useUnsavedGuard({
             </ul>
           </section>
           <section v-if="initiative.followUps?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1">
               {{ t('initiative.tracker.followUps') }}
-            </h3>
-            <ul class="flex flex-col gap-2 text-[13px] text-toned">
+            </SectionLabel>
+            <ul class="flex flex-col gap-2 text-sm text-toned">
               <li
                 v-for="f in initiative.followUps"
                 :key="f.id"
@@ -693,68 +733,76 @@ const { requestClose } = useUnsavedGuard({
                 <!-- Triage actions for an open follow-up (only while executing) -->
                 <div v-if="editable && f.status === 'open'" class="mt-2">
                   <div v-if="promotingId === f.id" class="flex flex-col gap-2">
-                    <label class="flex items-center gap-2 text-[12px]">
-                      <span class="text-muted">{{ t('initiative.curation.phaseField') }}</span>
-                      <select
+                    <UFormField
+                      size="xs"
+                      :label="t('initiative.curation.phaseField')"
+                      :ui="{ root: 'flex items-center gap-2', container: 'flex-1 mt-0' }"
+                    >
+                      <USelect
                         v-model="promoteForm.phaseId"
-                        class="flex-1 rounded border border-muted bg-app-950 px-2 py-1 text-default"
+                        :items="phaseItems"
+                        size="xs"
+                        class="w-full"
                         data-testid="initiative-promote-phase"
-                      >
-                        <option v-for="p in phases" :key="p.id" :value="p.id">
-                          {{ p.title }}
-                        </option>
-                      </select>
-                    </label>
-                    <input
+                      />
+                    </UFormField>
+                    <UInput
                       v-model="promoteForm.title"
-                      type="text"
-                      class="rounded border border-muted bg-app-950 px-2 py-1 text-[12px] text-default"
+                      size="xs"
                       :placeholder="t('initiative.curation.itemTitlePlaceholder')"
                       data-testid="initiative-promote-title"
                     />
                     <div class="flex gap-2">
-                      <button
-                        class="rounded bg-primary/90 px-2 py-1 text-[11px] text-inverted hover:bg-primary disabled:opacity-50"
+                      <UButton
+                        color="neutral"
+                        variant="ghost"
+                        class="rounded-sm bg-primary/90 px-2 py-1 text-2xs text-inverted hover:bg-primary disabled:opacity-50"
                         :disabled="initiatives.curating || !promoteForm.phaseId"
                         data-testid="initiative-promote-submit"
                         @click="submitPromote(f)"
                       >
                         {{ t('initiative.curation.promoteConfirm') }}
-                      </button>
-                      <button
-                        class="rounded border border-muted px-2 py-1 text-[11px] text-toned hover:bg-elevated"
+                      </UButton>
+                      <UButton
+                        color="neutral"
+                        variant="ghost"
+                        class="rounded-sm border border-muted px-2 py-1 text-2xs text-toned hover:bg-elevated"
                         @click="promotingId = null"
                       >
                         {{ t('initiative.curation.cancel') }}
-                      </button>
+                      </UButton>
                     </div>
                   </div>
                   <div v-else class="flex gap-1.5">
-                    <button
-                      class="rounded border border-muted px-1.5 py-0.5 text-[10px] text-toned hover:bg-elevated"
+                    <UButton
+                      color="neutral"
+                      variant="ghost"
+                      class="rounded-sm border border-muted px-1.5 py-0.5 text-3xs text-toned hover:bg-elevated"
                       data-testid="initiative-followup-promote"
                       @click="startPromote(f)"
                     >
                       {{ t('initiative.curation.promote') }}
-                    </button>
-                    <button
-                      class="rounded border border-muted px-1.5 py-0.5 text-[10px] text-toned hover:bg-elevated disabled:opacity-50"
+                    </UButton>
+                    <UButton
+                      color="neutral"
+                      variant="ghost"
+                      class="rounded-sm border border-muted px-1.5 py-0.5 text-3xs text-toned hover:bg-elevated disabled:opacity-50"
                       :disabled="initiatives.curating"
                       data-testid="initiative-followup-dismiss"
                       @click="dismissFollowUp(f)"
                     >
                       {{ t('initiative.curation.dismiss') }}
-                    </button>
+                    </UButton>
                   </div>
                 </div>
               </li>
             </ul>
           </section>
           <section v-if="initiative.caveats?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1">
               {{ t('initiative.tracker.caveats') }}
-            </h3>
-            <ul class="max-w-3xl list-inside list-disc text-[13px] text-toned">
+            </SectionLabel>
+            <ul class="max-w-3xl list-inside list-disc text-sm text-toned">
               <li v-for="(c, i) in initiative.caveats" :key="i">{{ c }}</li>
             </ul>
           </section>