@cat-factory/app 0.309.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 {
@@ -87,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
@@ -393,22 +404,26 @@ const { requestClose } = useUnsavedGuard({
                   {{ t('initiative.checkpoint.pausedBody', { phase: checkpointPhase!.title }) }}
                 </p>
                 <div class="mt-2.5 flex flex-wrap gap-2">
-                  <button
+                  <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
+                  </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>
@@ -490,84 +505,91 @@ const { requestClose } = useUnsavedGuard({
               </UBadge>
             </h3>
             <p v-if="phase.goal" class="mb-2 text-xs text-muted">{{ phase.goal }}</p>
-            <div class="overflow-x-auto rounded-lg border border-default">
-              <table class="w-full text-xs">
-                <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-3xs text-dimmed">
-                        {{
-                          t('initiative.tracker.dependsOn', {
-                            items: item.dependsOn.join(', '),
-                          })
-                        }}
-                      </div>
-                      <div
-                        v-if="item.note"
-                        class="mt-0.5 max-w-3xl text-3xs 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-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-item-retry-${item.id}`"
-                          @click="itemAction(item, 'retry')"
-                        >
-                          {{ t('initiative.curation.retry') }}
-                        </button>
-                        <button
-                          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-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>
+            <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 -->
@@ -576,14 +598,16 @@ const { requestClose } = useUnsavedGuard({
               <SectionLabel as="h3">
                 {{ t('initiative.tracker.policy') }}
               </SectionLabel>
-              <button
+              <UButton
+                color="neutral"
+                variant="ghost"
                 v-if="editable && !editingPolicy"
                 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-xs text-toned">
               <li>
@@ -604,41 +628,56 @@ 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-xs 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-sm 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-xs 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-sm border border-muted bg-app-950 px-2 py-1 font-mono text-2xs 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
+                <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
+                </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>
@@ -694,58 +733,66 @@ 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-xs">
-                      <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-sm 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-sm border border-muted bg-app-950 px-2 py-1 text-xs text-default"
+                      size="xs"
                       :placeholder="t('initiative.curation.itemTitlePlaceholder')"
                       data-testid="initiative-promote-title"
                     />
                     <div class="flex gap-2">
-                      <button
+                      <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
+                      </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
+                    <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
+                    </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>

package/app/components/judge/JudgeResultView.vue

@@ -253,12 +253,14 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
           <p class="mb-2 text-2xs leading-relaxed text-dimmed">
             {{ t('judge.decisionDescription') }}
           </p>
-          <textarea
+          <UTextarea
             v-model="feedback"
-            rows="3"
+            :rows="3"
             :disabled="busy"
             :placeholder="t('judge.feedbackPlaceholder')"
-            class="w-full resize-y rounded-md border border-default bg-app-950/60 px-3 py-2 text-sm text-default placeholder:text-app-600 focus:border-app-warning-500/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-warning-500/60"
+            size="sm"
+            class="w-full"
+            :ui="{ base: 'resize-y' }"
           />
           <p v-if="judgeStore.error" class="mt-2 text-xs text-app-error-300">
             {{ judgeStore.error }}

package/app/components/kaizen/KaizenPanel.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import { onKeyStroke } from '@vueuse/core'
+import type { TableColumn } from '@nuxt/ui'
 import type { KaizenGrading } from '~/types/domain'
 import { agentKindMeta } from '~/utils/catalog'
 
@@ -48,6 +49,16 @@ function statusLabel(g: KaizenGrading): string {
   if (g.status === 'failed') return t('kaizen.status.failed')
   return g.grade != null ? t('kaizen.gradeValue', { grade: g.grade }) : t('kaizen.status.graded')
 }
+
+// Column definitions rather than hand-written `<th>`s, so the header typography comes from the
+// table theme and is the same one every other table in the SPA renders.
+const historyColumns = computed<TableColumn<KaizenGrading>[]>(() => [
+  { id: 'when', header: t('kaizen.history.col.when') },
+  { id: 'agent', header: t('kaizen.history.col.agent') },
+  { id: 'model', header: t('kaizen.history.col.model') },
+  { id: 'grade', header: t('kaizen.history.col.grade') },
+  { id: 'recommendations', header: t('kaizen.history.col.recommendations') },
+])
 </script>
 
 <template>
@@ -155,59 +166,62 @@ function statusLabel(g: KaizenGrading): string {
               <UIcon name="i-lucide-history" class="h-4 w-4 text-app-hue-teal" />
               {{ t('kaizen.history.title') }}
             </h2>
-            <div class="overflow-hidden rounded-lg border border-default">
-              <table class="w-full text-start text-xs">
-                <thead class="bg-default/60 text-2xs uppercase tracking-wide text-dimmed">
-                  <tr>
-                    <th class="px-3 py-2 font-medium">{{ t('kaizen.history.col.when') }}</th>
-                    <th class="px-3 py-2 font-medium">{{ t('kaizen.history.col.agent') }}</th>
-                    <th class="px-3 py-2 font-medium">{{ t('kaizen.history.col.model') }}</th>
-                    <th class="px-3 py-2 font-medium">{{ t('kaizen.history.col.grade') }}</th>
-                    <th class="px-3 py-2 font-medium">
-                      {{ t('kaizen.history.col.recommendations') }}
-                    </th>
-                  </tr>
-                </thead>
-                <tbody class="divide-y divide-default/70">
-                  <tr v-for="g in kaizen.history" :key="g.id" class="align-top">
-                    <td class="whitespace-nowrap px-3 py-2 text-dimmed">
-                      {{ when(g.createdAt) }}
-                    </td>
-                    <td class="px-3 py-2">
-                      <span class="flex items-center gap-1.5">
-                        <UIcon
-                          :name="meta(g.agentKind).icon"
-                          class="h-3.5 w-3.5"
-                          :style="{ color: meta(g.agentKind).color }"
-                        />
-                        <span class="text-default">{{ meta(g.agentKind).label }}</span>
-                        <span class="text-app-600">{{
-                          t('kaizen.promptVersion', { version: g.promptVersion })
-                        }}</span>
-                      </span>
-                    </td>
-                    <td class="max-w-[12rem] truncate px-3 py-2 text-muted" :title="g.model">
-                      {{ g.model }}
-                    </td>
-                    <td class="whitespace-nowrap px-3 py-2 font-semibold" :class="gradeTone(g)">
-                      {{ statusLabel(g) }}
-                    </td>
-                    <td class="px-3 py-2 text-muted">
-                      <ul v-if="g.recommendations.length" class="list-disc space-y-0.5 ps-4">
-                        <li v-for="(r, i) in g.recommendations" :key="i">{{ r }}</li>
-                      </ul>
-                      <span v-else-if="g.status === 'complete'" class="text-app-600">—</span>
-                      <span v-else-if="g.error" class="text-app-error-400/80">{{ g.error }}</span>
-                    </td>
-                  </tr>
-                  <tr v-if="kaizen.history.length === 0">
-                    <td colspan="5" class="px-3 py-6 text-center text-app-600">
-                      {{ t('kaizen.history.empty') }}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+            <UTable
+              :data="kaizen.history"
+              :columns="historyColumns"
+              :ui="{
+                root: 'overflow-hidden rounded-lg border border-default',
+                base: 'text-xs',
+                th: 'px-3 py-2',
+                td: 'px-3 py-2 text-xs whitespace-normal',
+                tr: 'align-top',
+              }"
+            >
+              <template #when-cell="{ row }">
+                <span class="whitespace-nowrap text-dimmed">{{
+                  when(row.original.createdAt)
+                }}</span>
+              </template>
+              <template #agent-cell="{ row }">
+                <span class="flex items-center gap-1.5">
+                  <UIcon
+                    :name="meta(row.original.agentKind).icon"
+                    class="h-3.5 w-3.5"
+                    :style="{ color: meta(row.original.agentKind).color }"
+                  />
+                  <span class="text-default">{{ meta(row.original.agentKind).label }}</span>
+                  <span class="text-app-600">{{
+                    t('kaizen.promptVersion', { version: row.original.promptVersion })
+                  }}</span>
+                </span>
+              </template>
+              <template #model-cell="{ row }">
+                <span class="block max-w-[12rem] truncate text-muted" :title="row.original.model">
+                  {{ row.original.model }}
+                </span>
+              </template>
+              <template #grade-cell="{ row }">
+                <span class="whitespace-nowrap font-semibold" :class="gradeTone(row.original)">
+                  {{ statusLabel(row.original) }}
+                </span>
+              </template>
+              <template #recommendations-cell="{ row }">
+                <div class="text-muted">
+                  <ul v-if="row.original.recommendations.length" class="list-disc space-y-0.5 ps-4">
+                    <li v-for="(r, i) in row.original.recommendations" :key="i">{{ r }}</li>
+                  </ul>
+                  <span v-else-if="row.original.status === 'complete'" class="text-app-600">
+                    &mdash;
+                  </span>
+                  <span v-else-if="row.original.error" class="text-app-error-400/80">
+                    {{ row.original.error }}
+                  </span>
+                </div>
+              </template>
+              <template #empty>
+                <span class="text-app-600">{{ t('kaizen.history.empty') }}</span>
+              </template>
+            </UTable>
           </section>
         </div>
       </div>