@cat-factory/app 0.309.0 → 0.310.0

package/app/components/fragments/FragmentSelector.vue

@@ -102,10 +102,11 @@ function manageAccount() {
                   <SectionLabel as="p" class="px-2 pb-0.5 pt-1.5">
                     {{ group.category }}
                   </SectionLabel>
-                  <button
+                  <UButton
+                    color="neutral"
+                    variant="ghost"
                     v-for="f in group.fragments"
                     :key="f.id"
-                    type="button"
                     class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm hover:bg-elevated/60"
                     :class="selectedSet.has(f.id) ? 'text-app-100' : 'text-toned'"
                     :title="f.summary"
@@ -119,7 +120,7 @@ function manageAccount() {
                       :class="selectedSet.has(f.id) ? 'text-primary' : 'text-dimmed'"
                     />
                     <span class="flex-1 truncate">{{ f.title }}</span>
-                  </button>
+                  </UButton>
                 </div>
               </template>
               <p v-else class="px-2 py-3 text-xs text-dimmed">
@@ -127,23 +128,25 @@ function manageAccount() {
               </p>
 
               <div class="mt-1 border-t border-default pt-1">
-                <button
-                  type="button"
+                <UButton
+                  color="neutral"
+                  variant="ghost"
                   class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm text-toned hover:bg-elevated/60"
                   @click="manageBoard"
                 >
                   <UIcon name="i-lucide-book-marked" class="h-4 w-4 shrink-0 text-muted" />
                   <span class="flex-1 truncate">{{ t('inspector.fragments.manageBoard') }}</span>
-                </button>
-                <button
+                </UButton>
+                <UButton
+                  color="neutral"
+                  variant="ghost"
                   v-if="accounts.enabled"
-                  type="button"
                   class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm text-toned hover:bg-elevated/60"
                   @click="manageAccount"
                 >
                   <UIcon name="i-lucide-users" class="h-4 w-4 shrink-0 text-muted" />
                   <span class="flex-1 truncate">{{ t('inspector.fragments.manageAccount') }}</span>
-                </button>
+                </UButton>
               </div>
             </div>
 

package/app/components/gates/GateFailingCheckList.vue

@@ -31,9 +31,10 @@ const { t } = useI18n()
         class="shrink-0 text-app-error-400"
         :class="dense ? 'h-3 w-3' : 'h-3.5 w-3.5'"
       />
-      <a
+      <ULink
+        raw
         v-if="c.url"
-        :href="c.url"
+        :to="c.url"
         target="_blank"
         rel="noopener"
         class="group min-w-0 flex-1 truncate text-app-info-300 hover:text-app-info-200 hover:underline"
@@ -45,7 +46,7 @@ const { t } = useI18n()
           name="i-lucide-external-link"
           class="ms-0.5 inline h-3 w-3 opacity-60 group-hover:opacity-100"
         />
-      </a>
+      </ULink>
       <span
         v-else
         class="min-w-0 flex-1 truncate"

package/app/components/gates/GateResultView.vue

@@ -271,16 +271,17 @@ const conflictVerdict = computed(() => {
                 {{ gate.lastFailureSummary }}
               </p>
             </div>
-            <a
+            <ULink
+              raw
               v-if="prUrl"
-              :href="prUrl"
+              :to="prUrl"
               target="_blank"
               rel="noopener"
               class="mt-2 inline-flex items-center gap-1 text-xs text-app-info-300 hover:text-app-info-200 hover:underline"
             >
               {{ t('gates.humanReview.reviewPr') }}
               <UIcon name="i-lucide-external-link" class="h-3 w-3" />
-            </a>
+            </ULink>
 
             <!-- Freeform fix request: dispatch the fixer now with these instructions. -->
             <section v-if="status !== 'gave-up'" class="mt-4">
@@ -290,12 +291,14 @@ const conflictVerdict = computed(() => {
               <p class="mb-2 text-2xs leading-relaxed text-dimmed">
                 {{ t('gates.humanReview.requestFixDescription') }}
               </p>
-              <textarea
+              <UTextarea
                 v-model="fixInstructions"
-                rows="3"
+                :rows="3"
                 :disabled="fixBusy"
                 :placeholder="t('gates.humanReview.requestFixPlaceholder')"
-                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-secondary-500/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-secondary-500/60"
+                size="sm"
+                class="w-full"
+                :ui="{ base: 'resize-y' }"
               />
               <div class="mt-2 flex justify-end">
                 <UButton
@@ -343,16 +346,17 @@ const conflictVerdict = computed(() => {
             <p v-else class="text-sm leading-relaxed text-toned">
               {{ t('gates.docQuality.findingsFallback') }}
             </p>
-            <a
+            <ULink
+              raw
               v-if="prUrl"
-              :href="prUrl"
+              :to="prUrl"
               target="_blank"
               rel="noopener"
               class="mt-2 inline-flex items-center gap-1 text-xs text-app-info-300 hover:text-app-info-200 hover:underline"
             >
               {{ t('gates.docQuality.viewPr') }}
               <UIcon name="i-lucide-external-link" class="h-3 w-3" />
-            </a>
+            </ULink>
           </template>
 
           <!-- Conflicts: verdict + the resolver's account of what it left -->
@@ -382,16 +386,17 @@ const conflictVerdict = computed(() => {
                 {{ gate.lastFailureSummary }}
               </p>
             </div>
-            <a
+            <ULink
+              raw
               v-if="prUrl"
-              :href="prUrl"
+              :to="prUrl"
               target="_blank"
               rel="noopener"
               class="mt-2 inline-flex items-center gap-1 text-xs text-app-info-300 hover:text-app-info-200 hover:underline"
             >
               {{ t('gates.conflicts.viewPr') }}
               <UIcon name="i-lucide-external-link" class="h-3 w-3" />
-            </a>
+            </ULink>
           </template>
 
           <!-- Attempt history (both gates): what each helper run did and how it ended. -->

package/app/components/github/AddServiceFromRepoModal.vue

@@ -28,6 +28,7 @@ import ServiceTestConfig from '~/components/panels/inspector/ServiceTestConfig.v
 import ServiceFragments from '~/components/panels/inspector/ServiceFragments.vue'
 import { appInstallationManageUrl, VCS_PROVIDER_LABELS } from '~/utils/vcs'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const { t } = useI18n()
 
@@ -559,14 +560,17 @@ function done() {
                     class="inline-flex items-center gap-1 rounded-sm bg-elevated px-2 py-0.5 text-xs text-default"
                   >
                     <code class="text-default">{{ dir }}</code>
-                    <button
-                      type="button"
-                      class="text-muted hover:text-app-100"
-                      :aria-label="t('github.addService.removeService', { directory: dir })"
+                    <IconButton
+                      color="neutral"
+                      variant="ghost"
+                      icon="i-lucide-x"
+                      :label="t('github.addService.removeService', { directory: dir })"
+                      :ui="{
+                        base: 'p-0 text-muted hover:bg-transparent hover:text-app-100',
+                        leadingIcon: 'h-3 w-3',
+                      }"
                       @click="removeSelected(dir)"
-                    >
-                      <UIcon name="i-lucide-x" class="h-3 w-3" />
-                    </button>
+                    />
                   </span>
                 </div>
                 <p v-else class="text-xs text-dimmed">

package/app/components/github/GitHubOnboarding.vue

@@ -44,9 +44,14 @@ const title = computed(() =>
         class="mt-6 border-t border-default pt-4 text-center text-xs text-dimmed"
       >
         {{ t('github.onboarding.signedInAs', { login: auth.user.login }) }} ·
-        <button class="text-toned underline-offset-2 hover:underline" @click="auth.logout()">
+        <UButton
+          color="neutral"
+          variant="link"
+          class="p-0 text-xs text-toned underline-offset-2 hover:underline"
+          @click="auth.logout()"
+        >
           {{ t('github.onboarding.signOut') }}
-        </button>
+        </UButton>
       </p>
     </div>
   </div>

package/app/components/github/GitHubPanel.vue

@@ -420,10 +420,11 @@ async function merge(pr: GitHubPullRequest) {
                 }}
               </p>
               <div v-else class="max-h-64 space-y-1 overflow-y-auto">
-                <button
+                <UButton
+                  color="neutral"
+                  variant="ghost"
                   v-for="r in github.availableRepos"
                   :key="r.githubId"
-                  type="button"
                   class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start transition hover:bg-elevated/60"
                   @click="toggleSelected(r.githubId)"
                 >
@@ -436,7 +437,7 @@ async function merge(pr: GitHubPullRequest) {
                   <UBadge v-if="r.private" color="neutral" variant="subtle" size="sm">
                     {{ t('github.panel.private') }}
                   </UBadge>
-                </button>
+                </UButton>
               </div>
               <div class="flex items-center justify-end gap-2 pt-1">
                 <UButton
@@ -484,8 +485,10 @@ async function merge(pr: GitHubPullRequest) {
               class="rounded-md border border-default bg-default/60"
             >
               <div class="flex items-center justify-between gap-2 px-3 py-2">
-                <button
-                  class="flex min-w-0 items-center gap-2 text-start"
+                <UButton
+                  color="neutral"
+                  variant="ghost"
+                  class="flex min-w-0 items-center gap-2 p-0 text-start hover:bg-transparent"
                   @click="toggleRepo(repo)"
                 >
                   <UIcon
@@ -502,7 +505,7 @@ async function merge(pr: GitHubPullRequest) {
                   <UBadge v-if="repo.private" color="neutral" variant="subtle" size="sm">
                     {{ t('github.panel.private') }}
                   </UBadge>
-                </button>
+                </UButton>
                 <div class="flex items-center gap-2">
                   <span v-if="repo.defaultBranch" class="text-2xs text-dimmed">
                     {{ repo.defaultBranch }}

package/app/components/github/RepoTreeBrowser.vue

@@ -206,14 +206,15 @@ watch(
           :key="entry.path"
           class="flex items-center justify-between gap-2 px-3 py-1.5"
         >
-          <button
-            type="button"
-            class="flex items-center gap-2 truncate text-sm text-default hover:text-primary"
+          <UButton
+            color="primary"
+            variant="ghost"
+            class="flex items-center gap-2 truncate p-0 text-sm text-default hover:bg-transparent hover:text-primary"
             @click="browseTo(entry.path)"
           >
             <UIcon name="i-lucide-folder" class="h-4 w-4 shrink-0 text-app-warning-400" />
             <span class="truncate">{{ entry.name }}</span>
-          </button>
+          </UButton>
           <span
             v-if="clashes(entry)"
             class="flex shrink-0 items-center gap-1 text-xs text-app-warning-400"
@@ -256,9 +257,10 @@ watch(
               data-testid="repo-tree-select-all"
               @update:model-value="toggleAllFiles"
             />
-            <button
-              type="button"
-              class="text-xs text-muted hover:text-primary"
+            <UButton
+              color="primary"
+              variant="ghost"
+              class="p-0 text-xs text-muted hover:bg-transparent hover:text-primary"
               @click="toggleAllFiles"
             >
               {{
@@ -268,7 +270,7 @@ watch(
                   selectableFiles.length,
                 )
               }}
-            </button>
+            </UButton>
           </li>
           <li
             v-for="entry in fileEntries"
@@ -282,16 +284,17 @@ watch(
                 :aria-label="entry.name"
                 @update:model-value="pick(entry.path)"
               />
-              <button
-                type="button"
-                class="flex items-center gap-2 truncate text-sm hover:text-primary"
+              <UButton
+                color="primary"
+                variant="ghost"
+                class="flex items-center gap-2 truncate p-0 text-sm hover:bg-transparent hover:text-primary"
                 :class="isPicked(entry.path) ? 'text-primary' : 'text-toned'"
                 :disabled="isAdded(entry.path)"
                 @click="pick(entry.path)"
               >
                 <UIcon name="i-lucide-file" class="h-4 w-4 shrink-0 text-muted" />
                 <span class="truncate">{{ entry.name }}</span>
-              </button>
+              </UButton>
             </div>
             <span
               v-if="isAdded(entry.path)"

package/app/components/humanTest/HumanTestWindow.vue

@@ -183,16 +183,17 @@ const canDestroy = computed(
                 t(ENV_STATUS_LABEL[env.status])
               }}</span>
             </div>
-            <a
+            <ULink
+              raw
               v-if="env.url"
-              :href="env.url"
+              :to="env.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" />
               {{ env.url }}
-            </a>
+            </ULink>
             <p v-else class="text-xs italic text-dimmed">
               {{ t('humanTest.environment.noUrl') }}
             </p>
@@ -262,19 +263,22 @@ const canDestroy = computed(
             <SectionLabel as="h3">
               {{ t('humanTest.fix.heading') }}
             </SectionLabel>
-            <button
-              class="text-xs text-muted hover:text-default"
+            <UButton
+              color="neutral"
+              variant="ghost"
+              class="p-0 text-xs text-muted hover:bg-transparent hover:text-default"
               @click="showFindings = !showFindings"
             >
               {{ showFindings ? t('humanTest.fix.cancel') : t('humanTest.fix.requestFix') }}
-            </button>
+            </UButton>
           </div>
           <div v-if="showFindings" class="mt-2 space-y-2">
-            <textarea
+            <UTextarea
               v-model="findings"
-              rows="4"
+              :rows="4"
               :placeholder="t('humanTest.fix.placeholder')"
-              class="w-full rounded-md border border-muted bg-app-950 px-3 py-2 text-sm text-default placeholder:text-app-600 focus:border-app-warning-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-warning-500/60"
+              size="sm"
+              class="w-full"
             />
             <UButton
               size="sm"

package/app/components/initiative/InitiativePlanReview.vue

@@ -31,6 +31,7 @@ import { useStepProse } from '~/composables/useStepProse'
 import { useProseComments } from '~/composables/useProseComments'
 import InitiativePlanDecision from '~/components/initiative/InitiativePlanDecision.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{
   /** The parked gate under review. */
@@ -159,23 +160,23 @@ async function copyPlan() {
              preamble, which renders no toggle of its own, so collapsing it would hide the whole
              plan with nothing on screen to bring it back. Copying it does not — that is about the
              document, which exists either way. -->
-        <UButton
+        <IconButton
           v-if="outline.hasToc"
           :icon="allCollapsed ? 'i-lucide-unfold-vertical' : 'i-lucide-fold-vertical'"
           color="neutral"
           variant="ghost"
           size="xs"
-          :title="
+          :label="
             allCollapsed ? t('panels.stepDetail.expandAll') : t('panels.stepDetail.collapseAll')
           "
           @click="setAll(!allCollapsed)"
         />
-        <UButton
+        <IconButton
           icon="i-lucide-copy"
           color="neutral"
           variant="ghost"
           size="xs"
-          :title="t('panels.stepDetail.copyRawOutput')"
+          :label="t('panels.stepDetail.copyRawOutput')"
           @click="copyPlan"
         />
       </div>
@@ -185,7 +186,9 @@ async function copyPlan() {
         :aria-label="t('panels.stepDetail.contents')"
         class="flex-1 space-y-0.5 overflow-y-auto px-2 py-2"
       >
-        <button
+        <UButton
+          color="neutral"
+          variant="ghost"
           v-for="s in tocSections"
           :key="s.id"
           class="block w-full truncate rounded-md px-2 py-1 text-start text-xs transition"
@@ -199,7 +202,7 @@ async function copyPlan() {
           @click="goTo(s.id)"
         >
           {{ s.title }}
-        </button>
+        </UButton>
       </nav>
       <!-- Run details (the model, the run id, the token telemetry). Filled by the host, which
            already resolves the bundle through `useResultViewRunMeta`; it keeps its home in a
@@ -212,8 +215,9 @@ async function copyPlan() {
         class="flex flex-col"
         :class="outline.hasToc ? 'max-h-[45%] shrink-0 border-t border-default' : 'min-h-0 flex-1'"
       >
-        <button
-          type="button"
+        <UButton
+          color="neutral"
+          variant="ghost"
           data-testid="initiative-plan-run-meta-toggle"
           class="flex shrink-0 items-center gap-1.5 px-3 py-2 text-start transition hover:bg-elevated/40"
           :aria-expanded="runDetailsOpen"
@@ -226,7 +230,7 @@ async function copyPlan() {
             :name="runDetailsOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
             class="h-3.5 w-3.5 shrink-0 text-dimmed"
           />
-        </button>
+        </UButton>
         <div
           v-if="runDetailsOpen"
           data-testid="initiative-plan-run-meta"
@@ -260,9 +264,11 @@ async function copyPlan() {
           :ref="(el) => (sectionEls[s.id] = el as HTMLElement | null)"
           class="scroll-mt-2"
         >
-          <button
+          <UButton
+            color="neutral"
+            variant="ghost"
             v-if="s.depth > 0"
-            class="group flex w-full items-center gap-1.5 rounded-sm py-0.5 text-start transition hover:text-highlighted"
+            class="group flex w-full items-center gap-1.5 rounded-sm px-0 py-0.5 text-start transition hover:bg-transparent hover:text-highlighted"
             :aria-expanded="!collapsed[s.id]"
             @click="toggle(s.id)"
           >
@@ -276,7 +282,7 @@ async function copyPlan() {
               :class="s.depth <= 1 ? 'text-base' : s.depth === 2 ? 'text-sm' : 'text-xs'"
               v-html="s.titleHtml"
             />
-          </button>
+          </UButton>
           <!-- `review-mode` carries the click-to-comment affordance, so it tracks the same RBAC
                gate the composer does — a viewer gets the document, not hover targets that lead
                nowhere. -->
@@ -362,13 +368,17 @@ async function copyPlan() {
             <SectionLabel>
               {{ t('panels.stepDetail.commentN', { number: idx + 1 }) }}
             </SectionLabel>
-            <button
-              class="text-dimmed transition hover:text-app-error-400"
-              :title="t('panels.stepDetail.removeComment')"
+            <IconButton
+              color="neutral"
+              variant="ghost"
+              icon="i-lucide-x"
+              :label="t('panels.stepDetail.removeComment')"
+              :ui="{
+                base: 'p-0 text-dimmed transition hover:bg-transparent hover:text-app-error-400',
+                leadingIcon: 'h-3.5 w-3.5',
+              }"
               @click="removeComment(idx)"
-            >
-              <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
-            </button>
+            />
           </div>
           <pre
             class="mb-1 max-h-16 overflow-auto whitespace-pre-wrap rounded-sm bg-app-950/50 p-1.5 text-3xs text-muted"