@cat-factory/app 0.308.0 → 0.309.0

package/app/components/fragments/FragmentSelector.vue

@@ -10,6 +10,7 @@
 // (labelled by their raw id) so they stay visible and removable.
 import type { PromptFragment } from '~/types/domain'
 import { buildFragmentCategoryGroups } from '~/utils/fragmentPicker'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -76,9 +77,9 @@ function manageAccount() {
 <template>
   <div>
     <div class="mb-1 flex items-center justify-between gap-2">
-      <span v-if="label" class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel v-if="label" as="span">
         {{ label }}
-      </span>
+      </SectionLabel>
       <span v-else />
       <UPopover v-model:open="open" :content="{ align: 'end' }">
         <UButton
@@ -98,16 +99,14 @@ function manageAccount() {
             <div class="min-h-0 flex-1 overflow-y-auto p-1">
               <template v-if="categoryGroups.length">
                 <div v-for="group in categoryGroups" :key="group.category">
-                  <p
-                    class="px-2 pb-0.5 pt-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed"
-                  >
+                  <SectionLabel as="p" class="px-2 pb-0.5 pt-1.5">
                     {{ group.category }}
-                  </p>
+                  </SectionLabel>
                   <button
                     v-for="f in group.fragments"
                     :key="f.id"
                     type="button"
-                    class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm hover:bg-elevated/60"
+                    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"
                     :data-testid="`fragment-option-${f.id}`"
@@ -123,14 +122,14 @@ function manageAccount() {
                   </button>
                 </div>
               </template>
-              <p v-else class="px-2 py-3 text-[12px] text-dimmed">
+              <p v-else class="px-2 py-3 text-xs text-dimmed">
                 {{ t('inspector.fragments.pickerEmpty') }}
               </p>
 
               <div class="mt-1 border-t border-default pt-1">
                 <button
                   type="button"
-                  class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm text-toned hover:bg-elevated/60"
+                  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" />
@@ -139,7 +138,7 @@ function manageAccount() {
                 <button
                   v-if="accounts.enabled"
                   type="button"
-                  class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm text-toned hover:bg-elevated/60"
+                  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" />
@@ -178,7 +177,7 @@ function manageAccount() {
         {{ f.title }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
       </UBadge>
     </div>
-    <div v-else-if="emptyText" class="text-[11px] text-dimmed">
+    <div v-else-if="emptyText" class="text-2xs text-dimmed">
       {{ emptyText }}
     </div>
   </div>

package/app/components/gates/GateFailingCheckList.vue

@@ -37,7 +37,7 @@ const { t } = useI18n()
         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 }}
@@ -49,12 +49,12 @@ const { t } = useI18n()
       <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,7 +267,7 @@ 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>
@@ -275,7 +276,7 @@ const conflictVerdict = computed(() => {
               :href="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" />
@@ -283,10 +284,10 @@ const conflictVerdict = computed(() => {
 
             <!-- 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
@@ -294,7 +295,7 @@ const conflictVerdict = computed(() => {
                 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"
+                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"
               />
               <div class="mt-2 flex justify-end">
                 <UButton
@@ -316,30 +317,30 @@ 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
@@ -347,7 +348,7 @@ const conflictVerdict = computed(() => {
               :href="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" />
@@ -356,9 +357,9 @@ const conflictVerdict = computed(() => {
 
           <!-- 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 +368,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,7 +378,7 @@ 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>
@@ -386,7 +387,7 @@ const conflictVerdict = computed(() => {
               :href="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" />
@@ -395,9 +396,9 @@ const conflictVerdict = computed(() => {
 
           <!-- 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 +419,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 +430,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 +455,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 +469,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 +497,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 +515,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,7 @@ 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'
 
 const { t } = useI18n()
 
@@ -548,14 +549,14 @@ 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
@@ -620,7 +621,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/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')
                 }}
@@ -423,7 +424,7 @@ async function merge(pr: GitHubPullRequest) {
                   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
@@ -503,13 +504,13 @@ async function merge(pr: GitHubPullRequest) {
                   </UBadge>
                 </button>
                 <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 +524,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 +533,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 +645,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 +670,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 +692,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 +708,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>

package/app/components/github/RepoTreeBrowser.vue

@@ -193,7 +193,7 @@ watch(
     </div>
 
     <!-- listing -->
-    <div class="max-h-56 overflow-auto rounded border border-default">
+    <div class="max-h-56 overflow-auto rounded-sm border border-default">
       <div v-if="loading" class="p-3 text-sm text-muted">
         {{ t('github.repoTree.loading') }}
       </div>