@cat-factory/app 0.308.0 → 0.310.0

package/app/components/gates/GateFailingCheckList.vue

@@ -31,13 +31,14 @@ 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"
-        :class="dense ? 'text-[12px]' : 'text-[13px]'"
+        :class="dense ? 'text-xs' : 'text-sm'"
         :title="t('gates.ci.openOnGithub', { name: c.name })"
       >
         {{ c.name }}
@@ -45,16 +46,16 @@ 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"
-        :class="dense ? 'text-[12px] text-toned' : 'text-[13px] text-default'"
+        :class="dense ? 'text-xs text-toned' : 'text-sm text-default'"
         >{{ c.name }}</span
       >
       <span
         class="shrink-0 uppercase text-app-error-300"
-        :class="dense ? 'text-[10px]' : 'text-[11px]'"
+        :class="dense ? 'text-3xs' : 'text-2xs'"
         >{{ c.conclusion ?? t('gates.ci.conclusionFallback') }}</span
       >
     </li>

package/app/components/gates/GateResultView.vue

@@ -13,6 +13,7 @@ import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import AttemptEntryHeader from '~/components/panels/AttemptEntryHeader.vue'
 import GateFailingCheckList from '~/components/gates/GateFailingCheckList.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -218,7 +219,7 @@ const conflictVerdict = computed(() => {
         >
           <UIcon :name="meta.icon" class="h-8 w-8 opacity-40" />
           <p class="text-sm">{{ t('gates.noActivity') }}</p>
-          <p class="max-w-sm text-[11px] text-dimmed">
+          <p class="max-w-sm text-2xs text-dimmed">
             {{ t('gates.noActivityHint') }}
           </p>
         </div>
@@ -233,7 +234,7 @@ const conflictVerdict = computed(() => {
               name="i-lucide-circle-check"
               class="mt-0.5 h-4 w-4 shrink-0 text-app-success-400"
             />
-            <p class="text-[13px] leading-relaxed text-app-success-200">
+            <p class="text-sm leading-relaxed text-app-success-200">
               {{ step?.output || (isCi ? t('gates.passedCi') : t('gates.passedConflicts')) }}
             </p>
           </div>
@@ -244,7 +245,7 @@ const conflictVerdict = computed(() => {
               class="flex items-center gap-2 rounded-md border border-default bg-app-950/40 px-3 py-2"
             >
               <UIcon name="i-lucide-users" class="h-4 w-4 shrink-0 text-app-secondary-300" />
-              <span class="text-[13px] text-default">
+              <span class="text-sm text-default">
                 {{
                   t(
                     'gates.humanReview.approvals',
@@ -266,35 +267,38 @@ const conflictVerdict = computed(() => {
               class="relative mt-2 rounded-md border border-default bg-app-950/40 px-3 py-2"
             >
               <CopyButton :text="gate.lastFailureSummary" class="absolute end-1 top-1" />
-              <p class="whitespace-pre-wrap pe-8 text-[12px] leading-relaxed text-toned">
+              <p class="whitespace-pre-wrap pe-8 text-xs leading-relaxed text-toned">
                 {{ 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-[12px] text-app-info-300 hover:text-app-info-200 hover:underline"
+              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">
-              <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+              <SectionLabel as="h3" class="mb-1.5">
                 {{ t('gates.humanReview.requestFixHeading') }}
-              </h3>
-              <p class="mb-2 text-[11px] leading-relaxed text-dimmed">
+              </SectionLabel>
+              <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-[13px] 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
@@ -316,49 +320,50 @@ const conflictVerdict = computed(() => {
 
           <!-- CI: failing checks -->
           <template v-else-if="isCi">
-            <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-2">
               {{ t('gates.ci.failingChecks') }}
-            </h3>
+            </SectionLabel>
             <GateFailingCheckList v-if="failingChecks.length" :checks="failingChecks" />
-            <p v-else class="text-[13px] leading-relaxed text-toned">
+            <p v-else class="text-sm leading-relaxed text-toned">
               {{ gate.lastFailureSummary || t('gates.ci.failureFallback') }}
             </p>
           </template>
 
           <!-- Doc quality: the deterministic structural findings the gate raised -->
           <template v-else-if="isDocQuality">
-            <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-2">
               {{ t('gates.docQuality.findings') }}
-            </h3>
+            </SectionLabel>
             <div
               v-if="gate.lastFailureSummary"
               class="relative rounded-md border border-default bg-app-950/40 px-3 py-2"
             >
               <CopyButton :text="gate.lastFailureSummary" class="absolute end-1 top-1" />
-              <p class="whitespace-pre-wrap pe-8 text-[12px] leading-relaxed text-toned">
+              <p class="whitespace-pre-wrap pe-8 text-xs leading-relaxed text-toned">
                 {{ gate.lastFailureSummary }}
               </p>
             </div>
-            <p v-else class="text-[13px] leading-relaxed text-toned">
+            <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-[12px] text-app-info-300 hover:text-app-info-200 hover:underline"
+              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 -->
           <template v-else>
-            <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-2">
               {{ t('gates.conflicts.mergeability') }}
-            </h3>
+            </SectionLabel>
             <div
               class="flex items-center gap-2 rounded-md border border-default bg-app-950/40 px-3 py-2"
             >
@@ -367,7 +372,7 @@ const conflictVerdict = computed(() => {
                 class="h-4 w-4 shrink-0"
                 :class="STATUS_META[status].text"
               />
-              <span class="text-[13px] text-default">{{ conflictVerdict }}</span>
+              <span class="text-sm text-default">{{ conflictVerdict }}</span>
             </div>
             <!-- GitHub's API reports mergeability as a single bit (no file list), but the
                      conflict resolver discovers the conflicting files in the container and
@@ -377,27 +382,28 @@ const conflictVerdict = computed(() => {
               class="relative mt-2 rounded-md border border-default bg-app-950/40 px-3 py-2"
             >
               <CopyButton :text="gate.lastFailureSummary" class="absolute end-1 top-1" />
-              <p class="whitespace-pre-wrap pe-8 text-[12px] leading-relaxed text-toned">
+              <p class="whitespace-pre-wrap pe-8 text-xs leading-relaxed text-toned">
                 {{ 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-[12px] text-app-info-300 hover:text-app-info-200 hover:underline"
+              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. -->
           <section v-if="attempts.length" class="mt-5">
-            <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-2">
               {{ t('gates.attemptsHeading', { helper: helperMeta.label }) }}
-            </h3>
+            </SectionLabel>
             <ol class="space-y-2">
               <li
                 v-for="a in attempts"
@@ -418,7 +424,7 @@ const conflictVerdict = computed(() => {
                   v-if="a.instructions || (a.failingChecks && a.failingChecks.length)"
                   class="mt-1.5"
                 >
-                  <p class="text-[11px] text-dimmed">
+                  <p class="text-2xs text-dimmed">
                     {{ t('gates.attemptInstructions', { helper: helperMeta.label }) }}
                   </p>
                   <GateFailingCheckList
@@ -429,17 +435,17 @@ const conflictVerdict = computed(() => {
                   />
                   <p
                     v-else-if="a.instructions"
-                    class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-toned"
+                    class="mt-1 whitespace-pre-wrap text-xs leading-relaxed text-toned"
                   >
                     {{ a.instructions }}
                   </p>
                 </div>
                 <!-- The helper's own report of what it did / what remains. -->
                 <template v-if="a.summary">
-                  <p class="mt-1.5 text-[11px] text-dimmed">
+                  <p class="mt-1.5 text-2xs text-dimmed">
                     {{ t('gates.attemptReport', { helper: helperMeta.label }) }}
                   </p>
-                  <p class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-muted">
+                  <p class="mt-1 whitespace-pre-wrap text-xs leading-relaxed text-muted">
                     {{ a.summary }}
                   </p>
                 </template>
@@ -454,10 +460,10 @@ const conflictVerdict = computed(() => {
         class="hidden w-60 shrink-0 flex-col gap-4 border-s border-default bg-default/50 px-4 py-4 lg:flex"
       >
         <div v-if="gate">
-          <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h4" class="mb-2">
             {{ t('gates.sidebar.state') }}
-          </h4>
-          <div class="flex items-center gap-2 text-[13px]">
+          </SectionLabel>
+          <div class="flex items-center gap-2 text-sm">
             <UIcon
               :name="STATUS_META[status].icon"
               class="h-4 w-4"
@@ -468,10 +474,10 @@ const conflictVerdict = computed(() => {
         </div>
 
         <div v-if="gate">
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h4" class="mb-1">
             {{ helperMeta.label }}
-          </h4>
-          <p class="text-[12px] text-toned">
+          </SectionLabel>
+          <p class="text-xs text-toned">
             <!-- The human-review gate's budget is effectively unbounded (it waits for a human
                      indefinitely), so render a plain round count rather than "0/9007199254740991". -->
             <template v-if="isHumanReview">
@@ -496,10 +502,10 @@ const conflictVerdict = computed(() => {
         </div>
 
         <div v-if="shortSha">
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h4" class="mb-1">
             {{ t('gates.sidebar.gatedCommit') }}
-          </h4>
-          <p class="font-mono text-[12px] text-toned">{{ shortSha }}</p>
+          </SectionLabel>
+          <p class="font-mono text-xs text-toned">{{ shortSha }}</p>
         </div>
 
         <!-- Shared run metadata + embedded observability (model, run id, timing,
@@ -514,7 +520,7 @@ const conflictVerdict = computed(() => {
           :failure-at="instance?.failure?.occurredAt"
         />
 
-        <p class="mt-auto text-[10px] leading-relaxed text-app-600">
+        <p class="mt-auto text-3xs leading-relaxed text-app-600">
           {{ t('gates.sidebar.footer', { helper: helperMeta.label }) }}
         </p>
       </aside>

package/app/components/github/AddServiceFromRepoModal.vue

@@ -27,6 +27,8 @@ import VcsConnectSurfaces from '~/components/vcs/VcsConnectSurfaces.vue'
 import ServiceTestConfig from '~/components/panels/inspector/ServiceTestConfig.vue'
 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()
 
@@ -548,24 +550,27 @@ function done() {
               <!-- the selection cart + the add action sit right beside the tree, so the
                    picked services and the button that adds them are never scrolled apart -->
               <div class="space-y-2 rounded-md border border-default bg-app-950/40 p-2.5">
-                <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+                <SectionLabel as="p">
                   {{ t('github.addService.selectedServices') }}
-                </p>
+                </SectionLabel>
                 <div v-if="selectedDirectories.length" class="flex flex-wrap gap-1.5">
                   <span
                     v-for="dir in selectedDirectories"
                     :key="dir"
-                    class="inline-flex items-center gap-1 rounded bg-elevated px-2 py-0.5 text-xs text-default"
+                    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">
@@ -620,7 +625,7 @@ function done() {
             class="space-y-4 rounded-md border border-app-success-900/50 bg-app-success-950/20 p-3"
           >
             <div
-              class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-app-success-400"
+              class="flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wide text-app-success-400"
             >
               <UIcon name="i-lucide-check" class="h-3.5 w-3.5" />
               {{ t('github.addService.addedConfigure', { title: configuredBlock.title }) }}

package/app/components/github/BranchProtectionPreflight.vue

@@ -116,7 +116,7 @@ async function check() {
 <template>
   <section class="space-y-2" data-testid="branch-protection-preflight">
     <h3 class="text-sm font-semibold text-default">{{ t('vcs.branchProtection.heading') }}</h3>
-    <p class="text-[11px] text-muted">{{ t('vcs.branchProtection.body') }}</p>
+    <p class="text-2xs text-muted">{{ t('vcs.branchProtection.body') }}</p>
 
     <UButton
       color="neutral"
@@ -146,7 +146,7 @@ async function check() {
       >
         {{ t('errors.generic.showDetail') }}
       </UButton>
-      <p v-if="showFailureDetail" class="font-mono text-[10px] break-all text-dimmed">
+      <p v-if="showFailureDetail" class="font-mono text-3xs break-all text-dimmed">
         {{ failure.detail }}
       </p>
     </div>
@@ -182,11 +182,11 @@ async function check() {
         >
           <div class="flex items-baseline justify-between gap-2">
             <span class="font-mono text-xs text-toned">{{ row.owner }}/{{ row.name }}</span>
-            <span class="text-[11px]" :class="STATE_STYLE[row.protection.state]">
+            <span class="text-2xs" :class="STATE_STYLE[row.protection.state]">
               {{ STATE_LABEL[row.protection.state]() }}
             </span>
           </div>
-          <p class="text-[10px] text-dimmed">
+          <p class="text-3xs text-dimmed">
             {{ row.defaultBranch }}<span v-if="detailLine(row)"> — {{ detailLine(row) }}</span>
           </p>
         </li>
@@ -194,7 +194,7 @@ async function check() {
 
       <!-- A cap that truncated silently would read as "these are all your repositories", which
            on a security report is the same failure as calling an unprobed repo protected. -->
-      <p v-if="report.omittedRepos > 0" class="text-[11px] text-app-warning-300">
+      <p v-if="report.omittedRepos > 0" class="text-2xs text-app-warning-300">
         {{ t('vcs.branchProtection.omitted', { count: report.omittedRepos }, report.omittedRepos) }}
       </p>
     </template>

package/app/components/github/GitHubConnect.vue

@@ -6,6 +6,8 @@
 // successful connect the github store flips `connected`, which the host surfaces
 // react to. Shared by the GitHub panel and the bootstrap modal so the connect
 // flow lives in one place.
+import SectionLabel from '~/components/common/SectionLabel.vue'
+
 const { t } = useI18n()
 const github = useGitHubStore()
 const toast = useToast()
@@ -73,9 +75,9 @@ async function connectManually() {
     <!-- discovered installations: pick one the App is already on -->
     <section class="space-y-2">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-dimmed">
+        <SectionLabel as="span">
           {{ t('github.connect.yourInstallations') }}
-        </span>
+        </SectionLabel>
         <UButton
           size="xs"
           color="neutral"
@@ -118,7 +120,7 @@ async function connectManually() {
           <UIcon v-else name="i-lucide-github" class="h-4 w-4 text-muted" />
           <div class="min-w-0">
             <div class="truncate text-sm text-default">{{ inst.accountLogin }}</div>
-            <div class="text-[11px] text-dimmed">
+            <div class="text-2xs text-dimmed">
               {{
                 t('github.connect.installationMeta', {
                   targetType: inst.targetType,

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

@@ -11,6 +11,7 @@ import BranchProtectionPreflight from './BranchProtectionPreflight.vue'
 import VcsConnectSurfaces from '~/components/vcs/VcsConnectSurfaces.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import { VCS_PROVIDER_ICONS, VCS_PROVIDER_LABELS } from '~/utils/vcs'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -317,7 +318,7 @@ async function merge(pr: GitHubPullRequest) {
                 <div class="truncate text-sm text-default">
                   {{ github.connection?.accountLogin }}
                 </div>
-                <div class="text-[11px] text-dimmed">{{ connectionMeta }}</div>
+                <div class="text-2xs text-dimmed">{{ connectionMeta }}</div>
               </div>
             </div>
             <div class="flex items-center gap-1">
@@ -380,9 +381,9 @@ async function merge(pr: GitHubPullRequest) {
           <section v-else-if="tab === 'repos'" class="space-y-2">
             <!-- manage which repos this board links -->
             <div class="flex items-center justify-between">
-              <span class="text-[11px] uppercase tracking-wide text-dimmed">
+              <SectionLabel as="span">
                 {{ t('github.panel.linkedToBoard') }}
-              </span>
+              </SectionLabel>
               <UButton
                 size="xs"
                 color="neutral"
@@ -399,7 +400,7 @@ async function merge(pr: GitHubPullRequest) {
             </div>
 
             <div v-if="managing" class="space-y-2 rounded-md border border-muted bg-default/80 p-3">
-              <p class="text-[12px] text-muted">
+              <p class="text-xs text-muted">
                 {{
                   isAppConnection ? t('vcs.panel.manageHintApp') : t('vcs.panel.manageHintToken')
                 }}
@@ -419,11 +420,12 @@ 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 px-2 py-1.5 text-start transition hover:bg-elevated/60"
+                  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)"
                 >
                   <UIcon
@@ -435,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
@@ -483,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
@@ -501,15 +505,15 @@ 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-[11px] text-dimmed">
+                  <span v-if="repo.defaultBranch" class="text-2xs text-dimmed">
                     {{ repo.defaultBranch }}
                   </span>
                   <ULink
                     :to="github.repoUrl(repo.githubId) ?? '#'"
                     target="_blank"
-                    class="text-[11px] text-primary hover:underline"
+                    class="text-2xs text-primary hover:underline"
                   >
                     {{ t('github.panel.open') }}
                   </ULink>
@@ -523,7 +527,7 @@ async function merge(pr: GitHubPullRequest) {
                 <div
                   v-for="b in github.branches[repo.githubId] ?? []"
                   :key="b.name"
-                  class="flex items-center justify-between gap-2 text-[12px]"
+                  class="flex items-center justify-between gap-2 text-xs"
                 >
                   <span class="flex items-center gap-1.5 truncate text-toned">
                     <UIcon name="i-lucide-git-branch" class="h-3.5 w-3.5 text-dimmed" />
@@ -532,7 +536,7 @@ async function merge(pr: GitHubPullRequest) {
                       {{ t('github.panel.protected') }}
                     </UBadge>
                   </span>
-                  <code class="text-[10px] text-dimmed">{{ b.headSha.slice(0, 7) }}</code>
+                  <code class="text-3xs text-dimmed">{{ b.headSha.slice(0, 7) }}</code>
                 </div>
 
                 <!-- new branch -->
@@ -644,7 +648,7 @@ async function merge(pr: GitHubPullRequest) {
                 <div class="truncate text-sm text-default">
                   <span class="text-dimmed">#{{ pr.number }}</span> {{ pr.title }}
                 </div>
-                <div class="truncate text-[11px] text-dimmed">
+                <div class="truncate text-2xs text-dimmed">
                   {{ github.repoFor(pr.repoGithubId)?.name }} · {{ pr.headRef }} → {{ pr.baseRef }}
                 </div>
               </div>
@@ -669,7 +673,7 @@ async function merge(pr: GitHubPullRequest) {
                 <ULink
                   :to="github.pullUrl(pr) ?? '#'"
                   target="_blank"
-                  class="text-[11px] text-primary hover:underline"
+                  class="text-2xs text-primary hover:underline"
                 >
                   {{ t('github.panel.open') }}
                 </ULink>
@@ -691,7 +695,7 @@ async function merge(pr: GitHubPullRequest) {
                 <div class="truncate text-sm text-default">
                   <span class="text-dimmed">#{{ issue.number }}</span> {{ issue.title }}
                 </div>
-                <div class="truncate text-[11px] text-dimmed">
+                <div class="truncate text-2xs text-dimmed">
                   {{ github.repoFor(issue.repoGithubId)?.name }}
                   <span v-if="issue.labels.length">· {{ issue.labels.join(', ') }}</span>
                 </div>
@@ -707,7 +711,7 @@ async function merge(pr: GitHubPullRequest) {
                 <ULink
                   :to="github.issueUrl(issue) ?? '#'"
                   target="_blank"
-                  class="text-[11px] text-primary hover:underline"
+                  class="text-2xs text-primary hover:underline"
                 >
                   {{ t('github.panel.open') }}
                 </ULink>