@cat-factory/app 0.309.0 → 0.310.1

package/app/components/context/ContextAttachmentFields.vue

@@ -22,6 +22,7 @@ import { connectableSources } from '~/utils/sourcePicker'
 import ContextDocumentPicker from '~/components/documents/ContextDocumentPicker.vue'
 import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{
   /** The staged attachments; the host owns the array and commits it after creating the block. */
@@ -289,13 +290,18 @@ function removePending(item: PendingContext) {
             >
               {{ t('contextAttachments.importsOnAdd') }}
             </UBadge>
-            <button
-              type="button"
-              class="ms-auto shrink-0 text-muted hover:text-default"
+            <IconButton
+              color="neutral"
+              variant="ghost"
+              icon="i-lucide-x"
+              class="ms-auto shrink-0"
+              :label="t('contextAttachments.removePending', { name: item.title })"
+              :ui="{
+                base: 'p-0 text-muted hover:bg-transparent hover:text-default',
+                leadingIcon: 'h-3.5 w-3.5',
+              }"
               @click="removePending(item)"
-            >
-              <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
-            </button>
+            />
           </div>
           <p
             v-if="item.unreadable"
@@ -397,13 +403,18 @@ function removePending(item: PendingContext) {
             >
               {{ t('contextAttachments.importsOnAdd') }}
             </UBadge>
-            <button
-              type="button"
-              class="ms-auto shrink-0 text-muted hover:text-default"
+            <IconButton
+              color="neutral"
+              variant="ghost"
+              icon="i-lucide-x"
+              class="ms-auto shrink-0"
+              :label="t('contextAttachments.removePending', { name: item.title })"
+              :ui="{
+                base: 'p-0 text-muted hover:bg-transparent hover:text-default',
+                leadingIcon: 'h-3.5 w-3.5',
+              }"
               @click="removePending(item)"
-            >
-              <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
-            </button>
+            />
           </div>
           <!-- An issue reference gets no pre-flight of its own (there is no `parseRef` to ask a
                tracker), so this line IS its warning: the fetch is attempted when the form opens and

package/app/components/documents/ContextDocumentPicker.vue

@@ -538,10 +538,11 @@ onMounted(() => {
 
       <div class="max-h-56 space-y-0.5 overflow-y-auto">
         <!-- Already-imported documents (linked directly, no re-fetch). -->
-        <button
+        <UButton
+          color="neutral"
+          variant="ghost"
           v-for="d in importedRows"
           :key="`imp:${d.externalId}`"
-          type="button"
           class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
           @click="pickImported(d.externalId, d.title, d.excerpt)"
         >
@@ -550,26 +551,28 @@ onMounted(() => {
           <UBadge color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">{{
             t('documents.picker.importedBadge')
           }}</UBadge>
-        </button>
+        </UButton>
 
         <!-- Source search hits (imported on add). -->
-        <button
+        <UButton
+          color="neutral"
+          variant="ghost"
           v-for="r in searchRows"
           :key="`hit:${r.externalId}`"
-          type="button"
           class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
           @click="pickSearch(r)"
         >
           <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-muted" />
           <span class="truncate">{{ r.title }}</span>
-        </button>
+        </UButton>
 
         <!-- Explicit URL/ID reference, RESOLVED: the row shows the canonical form the source
              settled on, so a share link's title segment and tracking params are visibly gone
              before the attachment is staged. -->
-        <button
+        <UButton
+          color="neutral"
+          variant="ghost"
           v-if="refRow"
-          type="button"
           class="flex w-full items-start gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
           data-testid="doc-ref-attach"
           @click="pickRef(refRow)"
@@ -606,7 +609,7 @@ onMounted(() => {
           >
             {{ t('documents.picker.importedBadge') }}
           </UBadge>
-        </button>
+        </UButton>
 
         <EmptyState
           v-if="empty"

package/app/components/documents/DocumentImportModal.vue

@@ -136,14 +136,15 @@ function preview(externalId: string) {
           >
             <div class="flex items-start justify-between gap-2">
               <div class="min-w-0">
-                <a
-                  :href="doc.url"
+                <ULink
+                  raw
+                  :to="doc.url"
                   target="_blank"
                   rel="noopener"
                   class="truncate text-sm font-medium text-highlighted hover:underline"
                 >
                   {{ doc.title }}
-                </a>
+                </ULink>
                 <p class="mt-0.5 line-clamp-2 text-xs text-dimmed">{{ doc.excerpt }}</p>
                 <DocumentSyncState :doc="doc" class="mt-1" />
               </div>

package/app/components/documents/DocumentOriginLink.vue

@@ -16,15 +16,18 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <component
-    :is="props.url ? 'a' : 'span'"
-    :class="props.url ? props.hoverClass : undefined"
-    v-bind="
-      props.url
-        ? { href: props.url, title: props.url, target: '_blank', rel: 'noopener' }
-        : { title: t('documents.taskDocs.uploadedHint') }
-    "
+  <ULink
+    v-if="props.url"
+    raw
+    :to="props.url"
+    target="_blank"
+    rel="noopener"
+    :title="props.url"
+    :class="props.hoverClass"
   >
     <slot />
-  </component>
+  </ULink>
+  <span v-else :title="t('documents.taskDocs.uploadedHint')">
+    <slot />
+  </span>
 </template>

package/app/components/documents/DocumentSyncState.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { isConnectableSource } from '@cat-factory/contracts'
+import IconButton from '~/components/common/IconButton.vue'
 import type { SourceDocument } from '~/types/domain'
 import {
   CHANGE_KEYS,
@@ -182,15 +183,14 @@ async function refresh() {
       <UIcon name="i-lucide-image-off" class="h-3 w-3 shrink-0" />
       <span class="truncate">{{ renders }}</span>
     </span>
-    <UButton
+    <IconButton
       v-if="askable"
       color="neutral"
       variant="ghost"
       size="xs"
       icon="i-lucide-refresh-cw"
       :loading="busy"
-      :aria-label="t('documents.freshness.refresh')"
-      :title="t('documents.freshness.refresh')"
+      :label="t('documents.freshness.refresh')"
       class="ml-auto shrink-0"
       @click="refresh"
     />

package/app/components/documents/RepoContextDocPicker.vue

@@ -242,16 +242,17 @@ onMounted(() => {
           {{ t('documents.repoPicker.filesFailed', { error: filesError }) }}
         </p>
         <div class="max-h-56 space-y-0.5 overflow-y-auto">
-          <button
+          <UButton
+            color="neutral"
+            variant="ghost"
             v-for="f in fileMatches"
             :key="f.path"
-            type="button"
             class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
             @click="pickFile(f.path)"
           >
             <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-primary" />
             <span class="truncate">{{ f.path }}</span>
-          </button>
+          </UButton>
           <p v-if="fileMatchesTruncated" class="px-2 py-1 text-2xs text-dimmed">
             {{ t('documents.repoPicker.moreFiles', { count: FILE_RESULTS_CAP }) }}
           </p>

package/app/components/environments/EnvironmentStatusPanel.vue

@@ -124,16 +124,17 @@ const envInTransition = computed(
           ENV_STATUS_META[environment.status].label
         }}</span>
       </div>
-      <a
+      <ULink
+        raw
         v-if="environment.url"
-        :href="environment.url"
+        :to="environment.url"
         target="_blank"
         rel="noopener"
         class="inline-flex items-center gap-1.5 break-all text-sm text-app-info-300 hover:underline"
       >
         <UIcon name="i-lucide-external-link" class="h-3.5 w-3.5 shrink-0" />
         {{ environment.url }}
-      </a>
+      </ULink>
       <p v-if="environment.expiresAt" class="text-2xs text-dimmed">
         {{ t('environments.expires', { date: d(new Date(environment.expiresAt), 'long') }) }}
       </p>

package/app/components/followUp/FollowUpWindow.vue

@@ -204,14 +204,15 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
                 {{ item.suggestedAction }}
               </p>
               <p v-if="item.status === 'filed' && item.ticketUrl" class="mt-1 text-2xs">
-                <a
-                  :href="item.ticketUrl"
+                <ULink
+                  raw
+                  :to="item.ticketUrl"
                   target="_blank"
                   rel="noopener"
                   class="text-app-success-300 hover:underline"
                 >
                   {{ item.ticketExternalId ?? t('followUp.viewIssue') }}
-                </a>
+                </ULink>
               </p>
               <p v-if="hasRecordedAnswer(item)" class="mt-1 text-2xs text-toned">
                 <span class="text-dimmed">
@@ -231,11 +232,13 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
               <div v-if="item.status === 'pending'" class="mt-2.5">
                 <!-- A question: answer it -->
                 <div v-if="item.kind === 'question'" class="space-y-2">
-                  <textarea
+                  <UTextarea
                     v-model="drafts[item.id]"
-                    rows="2"
+                    :rows="2"
                     :placeholder="t('followUp.answerPlaceholder')"
-                    class="w-full resize-y rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-xs text-app-100 placeholder:text-app-600 focus:border-app-info-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-info-500/60"
+                    size="xs"
+                    class="w-full"
+                    :ui="{ base: 'resize-y' }"
                   />
                   <!-- Wraps, like the follow-up row below: three buttons whose labels are two
                        words each in English are one long line in most of the other locales, and

package/app/components/forkDecision/ForkDecisionWindow.vue

@@ -64,6 +64,12 @@ const canChat = computed(() => awaiting.value && !chatBudgetSpent.value && !fork
 
 // The human's selection: a proposed fork id, or the sentinel 'custom' for the free-text path.
 const selected = ref<string | null>(null)
+// The proposed forks and "my own approach" are one choice, so they are one item list. `fork` is
+// null on the custom entry, which is what the label and description slots branch on.
+const forkItems = computed(() => [
+  ...forks.value.map((fork) => ({ value: fork.id, label: fork.title, fork })),
+  { value: 'custom', label: t('forkDecision.custom.title'), fork: null as ForkOption | null },
+])
 const customText = ref('')
 const note = ref('')
 const chatInput = ref('')
@@ -217,92 +223,75 @@ const { requestClose } = useUnsavedGuard({
           {{ state.seamSummary }}
         </p>
 
-        <!-- Proposed fork cards -->
-        <article
-          v-for="fork in forks"
-          :key="fork.id"
-          data-testid="fork-option-card"
-          class="cursor-pointer rounded-xl border px-4 py-3 transition"
-          :class="
-            selected === fork.id
-              ? 'border-app-secondary-500/70 bg-app-secondary-500/5'
-              : 'border-default bg-default/60 hover:border-muted'
-          "
-          @click="selected = fork.id"
+        <!-- The proposed forks and "my own approach" are ONE choice, so they are one radio
+             group rather than a set of cards each holding their own radio. `variant="card"`
+             is the shape these already had; the rich body rides the description slot. -->
+        <URadioGroup
+          :model-value="selected ?? undefined"
+          color="secondary"
+          variant="card"
+          :items="forkItems"
+          data-testid="fork-options"
+          :ui="{ item: 'px-4 py-3' }"
+          @update:model-value="selected = String($event)"
         >
-          <div class="flex items-start gap-2">
-            <input
-              type="radio"
-              class="mt-1 accent-app-secondary-500"
-              :checked="selected === fork.id"
-              @change="selected = fork.id"
-            />
-            <div class="min-w-0 flex-1">
-              <div class="flex items-center gap-2">
-                <h3 class="min-w-0 flex-1 text-sm font-medium text-app-100">
-                  {{ fork.title }}
-                </h3>
-                <UBadge v-if="fork.recommended" color="primary" variant="subtle" size="sm">
-                  {{ t('forkDecision.recommended') }}
-                </UBadge>
-              </div>
-              <p v-if="fork.summary" class="mt-0.5 text-xs text-muted">
-                {{ fork.summary }}
-              </p>
-              <p class="mt-1.5 whitespace-pre-wrap text-xs text-toned">
-                {{ fork.approach }}
-              </p>
-              <ul v-if="fork.tradeoffs.length" class="mt-1.5 space-y-0.5">
-                <li
-                  v-for="(tr, i) in fork.tradeoffs"
+          <template #label="{ item }">
+            <span class="flex items-center gap-2">
+              <span class="min-w-0 flex-1 text-sm font-medium text-app-100">{{ item.label }}</span>
+              <UBadge v-if="item.fork?.recommended" color="primary" variant="subtle" size="sm">
+                {{ t('forkDecision.recommended') }}
+              </UBadge>
+            </span>
+          </template>
+          <template #description="{ item }">
+            <template v-if="item.fork">
+              <span v-if="item.fork.summary" class="block text-xs text-muted">
+                {{ item.fork.summary }}
+              </span>
+              <span class="mt-1.5 block whitespace-pre-wrap text-xs text-toned">
+                {{ item.fork.approach }}
+              </span>
+              <span v-if="item.fork.tradeoffs.length" class="mt-1.5 block space-y-0.5">
+                <span
+                  v-for="(tr, i) in item.fork.tradeoffs"
                   :key="i"
                   class="flex gap-1.5 text-2xs text-muted"
                 >
                   <span class="text-app-600">•</span>{{ tr }}
-                </li>
-              </ul>
-              <p v-if="fork.riskNotes" class="mt-1.5 text-2xs text-app-warning-300/90">
+                </span>
+              </span>
+              <span
+                v-if="item.fork.riskNotes"
+                class="mt-1.5 block text-2xs text-app-warning-300/90"
+              >
                 <span class="text-app-warning-500/70">{{ t('forkDecision.riskNotes') }}</span>
-                {{ fork.riskNotes }}
-              </p>
-            </div>
-          </div>
-        </article>
-
-        <!-- Custom approach -->
-        <article
-          class="rounded-xl border px-4 py-3 transition"
-          :class="
-            selected === 'custom'
-              ? 'border-app-secondary-500/70 bg-app-secondary-500/5'
-              : 'border-default bg-default/60'
-          "
-        >
-          <label class="flex cursor-pointer items-center gap-2" @click="selected = 'custom'">
-            <input type="radio" class="accent-app-secondary-500" :checked="selected === 'custom'" />
-            <span class="text-sm font-medium text-app-100">{{
-              t('forkDecision.custom.title')
-            }}</span>
-          </label>
-          <textarea
-            v-model="customText"
-            data-testid="fork-custom-input"
-            rows="3"
-            :placeholder="t('forkDecision.custom.placeholder')"
-            class="mt-2 w-full resize-y rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-xs text-app-100 placeholder:text-app-600 focus:border-app-secondary-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-secondary-500/60"
-            @focus="selected = 'custom'"
-          />
-        </article>
+                {{ item.fork.riskNotes }}
+              </span>
+            </template>
+            <UTextarea
+              v-else
+              v-model="customText"
+              data-testid="fork-custom-input"
+              :rows="3"
+              size="xs"
+              class="mt-2 w-full"
+              :ui="{ base: 'resize-y' }"
+              :placeholder="t('forkDecision.custom.placeholder')"
+              @focus="selected = 'custom'"
+            />
+          </template>
+        </URadioGroup>
 
         <!-- Optional steering note -->
         <div>
-          <label class="mb-1 block text-2xs text-muted">{{ t('forkDecision.noteLabel') }}</label>
-          <input
-            v-model="note"
-            type="text"
-            :placeholder="t('forkDecision.notePlaceholder')"
-            class="w-full rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-xs text-app-100 placeholder:text-app-600 focus:border-app-secondary-500 focus:outline-none"
-          />
+          <UFormField size="xs" :label="t('forkDecision.noteLabel')">
+            <UInput
+              v-model="note"
+              size="xs"
+              class="w-full"
+              :placeholder="t('forkDecision.notePlaceholder')"
+            />
+          </UFormField>
         </div>
 
         <!-- Grounded chat: ask about the forks before deciding. -->
@@ -342,18 +331,20 @@ const { requestClose } = useUnsavedGuard({
             {{ t('forkDecision.chat.hint') }}
           </p>
           <div class="mt-2 flex items-end gap-2">
-            <textarea
+            <UTextarea
               v-model="chatInput"
               data-testid="fork-chat-input"
-              rows="2"
+              :rows="2"
               :disabled="!canChat"
               :placeholder="
                 chatBudgetSpent
                   ? t('forkDecision.chat.budgetSpent')
                   : t('forkDecision.chat.placeholder')
               "
-              class="min-h-0 flex-1 resize-y rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-xs text-app-100 placeholder:text-app-600 focus:border-app-secondary-500 focus:outline-none disabled:opacity-50"
               @keydown.enter.exact.prevent="onSend"
+              size="xs"
+              class="min-h-0 flex-1"
+              :ui="{ base: 'resize-y' }"
             />
             <UButton
               data-testid="fork-chat-send"

package/app/components/foundational/FoundationalServiceCatalogList.vue

@@ -19,6 +19,7 @@ import { useBusyRows } from '~/composables/useBusyRows'
 import type { ApiContractFormat, FoundationalServiceTier } from '~/types/domain'
 import { useFoundationalServicesStore } from '~/stores/foundationalServices'
 import FoundationalContractSummary from '~/components/foundational/FoundationalContractSummary.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const catalog = useFoundationalServicesStore()
 const toast = useToast()
@@ -139,13 +140,13 @@ async function suppress(serviceId: string) {
           <!-- Only an INHERITED entry can be suppressed — an account service or one the
                deployment registered in code; the board's own row is managed in the registry tab,
                where deleting it is the honest action. -->
-          <UButton
+          <IconButton
             v-if="s.tier !== 'workspace'"
             icon="i-lucide-eye-off"
             size="xs"
             variant="ghost"
             :loading="rowBusy(`suppress:${s.id}`)"
-            :title="t('foundational.catalog.suppress')"
+            :label="t('foundational.catalog.suppress')"
             :data-testid="`foundational-suppress-${s.id}`"
             @click="suppress(s.id)"
           />

package/app/components/foundational/FoundationalServiceRegistry.vue

@@ -20,6 +20,7 @@ import {
   useFoundationalServicesStore,
 } from '~/stores/foundationalServices'
 import FoundationalContractSummary from '~/components/foundational/FoundationalContractSummary.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{ kind: FoundationalServiceOwnerKind; ownerId: string }>()
 
@@ -203,20 +204,20 @@ async function remove(service: FoundationalService) {
           </p>
         </div>
         <div class="flex shrink-0 gap-1">
-          <UButton
+          <IconButton
             v-if="!s.sourceId"
             icon="i-lucide-pencil"
             size="xs"
             variant="ghost"
-            :title="t('foundational.registry.edit')"
+            :label="t('foundational.registry.edit')"
             @click="openEdit(s)"
           />
-          <UButton
+          <IconButton
             icon="i-lucide-trash-2"
             size="xs"
             color="error"
             variant="ghost"
-            :title="t('foundational.registry.delete')"
+            :label="t('foundational.registry.delete')"
             @click="remove(s)"
           />
         </div>
@@ -289,12 +290,12 @@ async function remove(service: FoundationalService) {
                 class="flex-1"
               />
               <USelect v-model="c.format" :items="formatItems" class="w-56" />
-              <UButton
+              <IconButton
                 icon="i-lucide-x"
                 size="xs"
                 color="error"
                 variant="ghost"
-                :title="t('foundational.registry.removeContract')"
+                :label="t('foundational.registry.removeContract')"
                 @click="removeContract(i)"
               />
             </div>

package/app/components/foundational/FoundationalServiceSources.vue

@@ -27,6 +27,7 @@ import {
 } from '~/stores/foundationalServices'
 import GitHubRepoSearchSelect from '~/components/github/GitHubRepoSearchSelect.vue'
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{ kind: FoundationalServiceOwnerKind; ownerId: string }>()
 
@@ -295,29 +296,29 @@ async function unlink(id: string) {
         {{ t('foundational.sources.changes') }}
       </UBadge>
       <div class="ms-auto flex gap-1">
-        <UButton
+        <IconButton
           icon="i-lucide-search-check"
           size="xs"
           variant="ghost"
           :loading="rowBusy(`check:${s.id}`)"
-          :title="t('foundational.sources.check')"
+          :label="t('foundational.sources.check')"
           @click="check(s.id)"
         />
-        <UButton
+        <IconButton
           icon="i-lucide-refresh-cw"
           size="xs"
           variant="ghost"
           :loading="rowBusy(`sync:${s.id}`)"
-          :title="t('foundational.sources.sync')"
+          :label="t('foundational.sources.sync')"
           @click="sync(s.id)"
         />
-        <UButton
+        <IconButton
           icon="i-lucide-unplug"
           size="xs"
           color="error"
           variant="ghost"
           :loading="rowBusy(`unlink:${s.id}`)"
-          :title="t('foundational.sources.unlink')"
+          :label="t('foundational.sources.unlink')"
           @click="unlink(s.id)"
         />
       </div>

package/app/components/fragments/FragmentLibraryManager.vue

@@ -19,6 +19,7 @@ import { showOverrideField } from '~/utils/uiMode'
 import GitHubRepoSearchSelect from '~/components/github/GitHubRepoSearchSelect.vue'
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import GitHubDocUrlImport from '~/components/fragments/GitHubDocUrlImport.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -750,12 +751,12 @@ async function unlinkSource(id: string) {
             <div class="ms-auto flex gap-1">
               <!-- Editing a repo-SOURCED fragment locally would be overwritten on the next sync,
                    so only hand-authored fragments are editable here. -->
-              <UButton
+              <IconButton
                 v-if="!f.source"
                 icon="i-lucide-pencil"
                 size="xs"
                 variant="ghost"
-                :title="t('common.edit')"
+                :label="t('common.edit')"
                 @click="startEdit(f)"
               />
               <UButton
@@ -866,12 +867,12 @@ async function unlinkSource(id: string) {
             </p>
           </div>
           <div class="ms-auto flex gap-1">
-            <UButton
+            <IconButton
               icon="i-lucide-refresh-cw"
               size="xs"
               variant="ghost"
               :loading="rowBusy(`refresh:${f.id}`)"
-              :title="t('fragments.documents.refreshTitle')"
+              :label="t('fragments.documents.refreshTitle')"
               @click="refreshFragment(f.id)"
             />
             <UButton