@cat-factory/app 0.308.0 → 0.310.0

package/app/components/layout/NotificationsInbox.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Notification } from '~/types/domain'
 import type { ReviewEffort } from '~/types/merge'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The board's notification inbox: a bell with an open-count badge that opens a
 // panel of human-actionable items (a PR awaiting a merge decision, a completed
@@ -406,9 +407,9 @@ function revealDecision(n: Notification) {
 
     <template #content>
       <div class="max-h-[28rem] w-[min(24rem,92vw)] overflow-y-auto p-2">
-        <div class="px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel class="px-2 py-1">
           {{ t('layout.notifications.heading') }}
-        </div>
+        </SectionLabel>
         <div
           v-for="n in notifications.open"
           :key="n.id"
@@ -428,31 +429,34 @@ function revealDecision(n: Notification) {
             />
             <div class="min-w-0 flex-1">
               <div class="flex items-center gap-1.5">
-                <button
-                  class="block min-w-0 flex-1 truncate text-start text-sm font-medium text-default hover:underline"
+                <UButton
+                  color="neutral"
+                  variant="link"
+                  class="block min-w-0 flex-1 truncate p-0 text-start text-sm font-medium text-default hover:underline"
                   :title="n.title"
                   @click="reveal(n)"
                 >
                   {{ n.title }}
-                </button>
+                </UButton>
                 <span
                   v-if="isUrgent(n)"
-                  class="shrink-0 rounded bg-app-error-500/20 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-app-error-400"
+                  class="shrink-0 rounded-sm bg-app-error-500/20 px-1.5 py-0.5 text-3xs font-semibold uppercase tracking-wide text-app-error-400"
                 >
                   {{ t('layout.notifications.overdue') }}
                 </span>
               </div>
-              <p class="mt-0.5 text-[11px] leading-snug text-muted">{{ n.body }}</p>
-              <a
+              <p class="mt-0.5 text-2xs leading-snug text-muted">{{ n.body }}</p>
+              <ULink
+                raw
                 v-if="n.payload?.prUrl"
-                :href="n.payload.prUrl"
+                :to="n.payload.prUrl"
                 target="_blank"
                 rel="noopener"
-                class="mt-1 inline-flex items-center gap-1 text-[11px] text-app-info-400 hover:underline"
+                class="mt-1 inline-flex items-center gap-1 text-2xs text-app-info-400 hover:underline"
               >
                 <UIcon name="i-lucide-external-link" class="h-3 w-3" />
                 {{ t('layout.notifications.openPr') }}
-              </a>
+              </ULink>
               <!--
                 A platform-health card deep-links to the runs it aggregated, so the operator
                 lands on the evidence rather than only on the dashboard.
@@ -462,31 +466,38 @@ function revealDecision(n: Notification) {
                 class="mt-1.5 flex flex-col gap-0.5"
                 data-testid="notification-failing-runs"
               >
-                <component
-                  :is="canOpenFailingRun(run) ? 'button' : 'span'"
-                  v-for="run in failingRuns(n)"
-                  :key="run.executionId"
-                  :type="canOpenFailingRun(run) ? 'button' : undefined"
-                  class="flex items-center gap-1 text-start text-[11px]"
-                  :class="
-                    canOpenFailingRun(run)
-                      ? 'text-app-info-400 hover:underline'
-                      : 'cursor-default text-dimmed'
-                  "
-                  :title="
-                    canOpenFailingRun(run) ? undefined : t('layout.notifications.failingRunGone')
-                  "
-                  @click="canOpenFailingRun(run) && revealFailingRun(run)"
-                >
-                  <UIcon name="i-lucide-circle-alert" class="h-3 w-3 shrink-0" />
-                  <span class="truncate">{{
-                    t('layout.notifications.failingRun', {
-                      kind: run.failureKind,
-                      at: d(new Date(run.createdAt), 'short'),
-                    })
-                  }}</span>
-                </component>
-                <span v-if="failingRunsOmitted(n) > 0" class="text-[11px] text-dimmed">
+                <template v-for="run in failingRuns(n)" :key="run.executionId">
+                  <UButton
+                    v-if="canOpenFailingRun(run)"
+                    color="neutral"
+                    variant="link"
+                    size="xs"
+                    class="gap-1 p-0 text-start text-2xs text-app-info-400 hover:text-app-info-400 hover:underline"
+                    @click="revealFailingRun(run)"
+                  >
+                    <UIcon name="i-lucide-circle-alert" class="h-3 w-3 shrink-0" />
+                    <span class="truncate">{{
+                      t('layout.notifications.failingRun', {
+                        kind: run.failureKind,
+                        at: d(new Date(run.createdAt), 'short'),
+                      })
+                    }}</span>
+                  </UButton>
+                  <span
+                    v-else
+                    class="flex cursor-default items-center gap-1 text-start text-2xs text-dimmed"
+                    :title="t('layout.notifications.failingRunGone')"
+                  >
+                    <UIcon name="i-lucide-circle-alert" class="h-3 w-3 shrink-0" />
+                    <span class="truncate">{{
+                      t('layout.notifications.failingRun', {
+                        kind: run.failureKind,
+                        at: d(new Date(run.createdAt), 'short'),
+                      })
+                    }}</span>
+                  </span>
+                </template>
+                <span v-if="failingRunsOmitted(n) > 0" class="text-2xs text-dimmed">
                   {{ t('layout.notifications.failingRunsMore', { count: failingRunsOmitted(n) }) }}
                 </span>
               </div>

package/app/components/layout/PersonalSetupModal.vue

@@ -5,6 +5,8 @@
 // previously sat, confusingly, among the workspace-wide integrations. Each row reuses the
 // existing per-panel handlers via `ui.openFromPersonal(...)`, so opening one closes this
 // hub, reveals that panel, and gives it a "Back to My setup" control (IntegrationBackTitle).
+import SectionLabel from '~/components/common/SectionLabel.vue'
+
 const { t } = useI18n()
 const ui = useUiStore()
 const userSecrets = useUserSecretsStore()
@@ -117,14 +119,15 @@ const groups = computed<PersonalGroup[]>(() => {
         </p>
 
         <section v-for="group in groups" :key="group.title">
-          <h3 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h3" class="mb-2 px-1">
             {{ group.title }}
-          </h3>
+          </SectionLabel>
           <div class="space-y-1.5">
-            <button
+            <UButton
+              color="neutral"
+              variant="ghost"
               v-for="item in group.items"
               :key="item.key"
-              type="button"
               class="flex w-full items-center gap-3 rounded-lg border border-default bg-default/50 px-3 py-2.5 text-start transition hover:border-muted hover:bg-default"
               @click="item.onClick()"
             >
@@ -135,7 +138,7 @@ const groups = computed<PersonalGroup[]>(() => {
                   <UBadge v-if="item.connected" color="success" variant="subtle" size="sm">
                     {{ item.status || t('layout.personalSetup.connected') }}
                   </UBadge>
-                  <span v-else class="text-[11px] text-dimmed">
+                  <span v-else class="text-2xs text-dimmed">
                     {{ t('layout.personalSetup.notConnected') }}
                   </span>
                 </div>
@@ -145,7 +148,7 @@ const groups = computed<PersonalGroup[]>(() => {
                 name="i-lucide-chevron-right"
                 class="h-4 w-4 shrink-0 text-dimmed rtl:-scale-x-100"
               />
-            </button>
+            </UButton>
           </div>
         </section>
       </div>

package/app/components/layout/RolePrompt.vue

@@ -31,10 +31,11 @@ function pick(role: UiRole) {
       <div class="space-y-4" data-testid="role-prompt">
         <p class="text-sm text-toned">{{ t('uiRole.prompt.intro') }}</p>
         <div class="space-y-2">
-          <button
+          <UButton
+            color="neutral"
+            variant="ghost"
             v-for="role in UI_ROLES"
             :key="role"
-            type="button"
             :data-testid="`role-option-${role}`"
             :aria-pressed="role === uiRole.role && uiRole.chosen"
             class="flex w-full items-center gap-3 rounded-lg border p-3 text-start transition"
@@ -52,11 +53,11 @@ function pick(role: UiRole) {
               </div>
               <p class="text-xs text-muted">{{ t(ROLE_PRESENTATION[role].hintKey) }}</p>
             </div>
-          </button>
+          </UButton>
         </div>
         <!-- The choice is not a commitment, and saying so is what makes the narrowed role
              pickable: it is one dropdown at the top of the sidebar to leave again. -->
-        <p class="text-[11px] leading-snug text-dimmed">{{ t('uiRole.prompt.change') }}</p>
+        <p class="text-2xs leading-snug text-dimmed">{{ t('uiRole.prompt.change') }}</p>
       </div>
     </template>
     <template #footer>

package/app/components/layout/SideBar.vue

@@ -20,6 +20,7 @@ import UiRoleSwitcher from '~/components/layout/UiRoleSwitcher.vue'
 import UserMenu from '~/components/auth/UserMenu.vue'
 import { useViewport } from '~/composables/useViewport'
 import type { NavContribution } from '~/modular/nav-contributions'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 
@@ -225,8 +226,9 @@ watch(
     <div class="contents" @click="onNavAction">
       <!-- Command bar launcher (⌘K) — the primary way to create blocks / pipelines
          and reach every action below. -->
-      <button
-        type="button"
+      <UButton
+        color="neutral"
+        variant="ghost"
         class="flex items-center gap-2 rounded-lg border border-muted bg-elevated/60 py-2 text-start text-sm text-muted transition hover:border-app-500 hover:bg-elevated"
         :class="railed ? 'justify-center px-0' : 'px-2.5'"
         :aria-label="t('nav.commandBar')"
@@ -237,7 +239,7 @@ watch(
         <UIcon name="i-lucide-search" class="h-4 w-4 shrink-0" />
         <span v-if="!railed" class="flex-1 truncate">{{ t('nav.commandBar') }}</span>
         <UKbd v-if="!railed" value="⌘K" />
-      </button>
+      </UButton>
 
       <!-- Sections + items come from the shared nav manifest, already gated by the
          reactive slotFilter (backend/docs/adr/0049-modular-vue-adoption.md, slice 1) — which
@@ -248,12 +250,9 @@ watch(
       <template v-for="section in sidebarGroups" :key="section.group">
         <USeparator />
         <section>
-          <h2
-            v-if="!railed"
-            class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-muted"
-          >
+          <SectionLabel v-if="!railed" as="h2" class="mb-2 px-1">
             {{ t(section.labelKey) }}
-          </h2>
+          </SectionLabel>
           <div class="space-y-1.5">
             <UButton
               v-for="item in section.items"

package/app/components/layout/SpendWarningBanner.vue

@@ -54,7 +54,7 @@ async function resume() {
 
             <dl class="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3">
               <div class="rounded-lg bg-app-error-900/50 px-3 py-2">
-                <dt class="text-[11px] uppercase tracking-wide text-app-error-300/80">
+                <dt class="text-2xs uppercase tracking-wide text-app-error-300/80">
                   {{ t('layout.spendWarningBanner.spent') }}
                 </dt>
                 <dd class="text-base font-semibold tabular-nums text-app-error-50">
@@ -62,7 +62,7 @@ async function resume() {
                 </dd>
               </div>
               <div class="rounded-lg bg-app-error-900/50 px-3 py-2">
-                <dt class="text-[11px] uppercase tracking-wide text-app-error-300/80">
+                <dt class="text-2xs uppercase tracking-wide text-app-error-300/80">
                   {{ t('layout.spendWarningBanner.budget') }}
                 </dt>
                 <dd class="text-base font-semibold tabular-nums text-app-error-50">
@@ -70,7 +70,7 @@ async function resume() {
                 </dd>
               </div>
               <div class="rounded-lg bg-app-error-900/50 px-3 py-2">
-                <dt class="text-[11px] uppercase tracking-wide text-app-error-300/80">
+                <dt class="text-2xs uppercase tracking-wide text-app-error-300/80">
                   {{ t('layout.spendWarningBanner.tokens') }}
                 </dt>
                 <dd class="text-base font-semibold tabular-nums text-app-error-50">{{ tokens }}</dd>

package/app/components/layout/TranslationWarningBanner.vue

@@ -31,7 +31,7 @@ function dismiss() {
       v-if="show"
       data-testid="translation-warning"
       role="alert"
-      class="flex shrink-0 items-center gap-3 border-b border-app-warning-500/40 bg-app-warning-950/95 px-4 py-2 text-[13px] text-app-warning-100 shadow-lg backdrop-blur"
+      class="flex shrink-0 items-center gap-3 border-b border-app-warning-500/40 bg-app-warning-950/95 px-4 py-2 text-sm text-app-warning-100 shadow-lg backdrop-blur"
     >
       <UIcon name="i-lucide-languages" class="h-4 w-4 shrink-0 text-app-warning-400" />
       <p class="min-w-0 flex-1">
@@ -39,15 +39,16 @@ function dismiss() {
         <span class="mx-1.5 text-app-warning-400/60">·</span>
         <i18n-t keypath="language.warning.body" tag="span" scope="global">
           <template #repoLink>
-            <a
-              :href="REPO_URL"
+            <ULink
+              raw
+              :to="REPO_URL"
               target="_blank"
               rel="noopener noreferrer"
               class="inline-flex items-center gap-1 font-medium text-app-info-300 hover:underline"
             >
               {{ t('language.warning.repoLinkLabel') }}
               <UIcon name="i-lucide-external-link" class="h-3 w-3" />
-            </a>
+            </ULink>
           </template>
         </i18n-t>
       </p>

package/app/components/layout/UiModeSwitcher.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { UI_MODES, type UiMode } from '~/utils/uiMode'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Interface-tier picker, shown at the TOP of the sidebar under the board switcher. Basic mode
 // hides the power-user destinations and the less-used run options; advanced shows everything.
@@ -55,9 +56,9 @@ const pinnedTitle = computed(
   >
     <UIcon :name="icon" class="h-4 w-4 shrink-0 text-dimmed" />
     <div v-if="!collapsed" class="min-w-0 flex-1">
-      <div class="truncate text-[10px] uppercase tracking-wide text-dimmed">
+      <SectionLabel class="truncate">
         {{ t('uiMode.switcher') }}
-      </div>
+      </SectionLabel>
       <div class="truncate text-xs font-medium text-toned">{{ currentLabel }}</div>
     </div>
     <UIcon v-if="!collapsed" name="i-lucide-lock" class="h-3.5 w-3.5 shrink-0 text-app-600" />
@@ -66,9 +67,10 @@ const pinnedTitle = computed(
   <!-- Rail: one button, flips the tier. The label rides under the glyph so the rail still says
        which tier is on — the audience that needs to find the advanced half is exactly the one
        sitting in basic mode's collapsed default. -->
-  <button
+  <UButton
+    color="neutral"
+    variant="ghost"
     v-else-if="collapsed"
-    type="button"
     data-testid="ui-mode-toggle"
     :aria-label="t('uiMode.switchTo', { mode: t(MODE_LABELS[otherMode]) })"
     :title="t('uiMode.switchTo', { mode: t(MODE_LABELS[otherMode]) })"
@@ -76,24 +78,25 @@ const pinnedTitle = computed(
     @click="uiMode.toggleMode()"
   >
     <UIcon :name="icon" class="h-4 w-4 shrink-0 text-primary" />
-    <span class="w-full truncate text-center text-[9px] font-medium uppercase text-toned">
+    <span class="w-full truncate text-center text-3xs font-medium uppercase text-toned">
       {{ currentLabel }}
     </span>
-  </button>
+  </UButton>
 
   <div v-else data-testid="ui-mode-switcher" class="w-full">
-    <div class="mb-1 px-1 text-[10px] uppercase tracking-wide text-dimmed">
+    <SectionLabel class="mb-1 px-1">
       {{ t('uiMode.switcher') }}
-    </div>
+    </SectionLabel>
     <div
       role="group"
       :aria-label="t('uiMode.switcher')"
       class="flex w-full gap-1 rounded-lg border border-muted bg-default/60 p-1"
     >
-      <button
+      <UButton
+        color="neutral"
+        variant="ghost"
         v-for="mode in UI_MODES"
         :key="mode"
-        type="button"
         :data-testid="`ui-mode-option-${mode}`"
         :aria-pressed="mode === uiMode.mode"
         class="flex-1 truncate rounded-md px-2 py-1 text-xs font-medium transition"
@@ -105,13 +108,13 @@ const pinnedTitle = computed(
         @click="uiMode.setMode(mode)"
       >
         {{ t(MODE_LABELS[mode]) }}
-      </button>
+      </UButton>
     </div>
   </div>
 
   <!-- The one-line "what this tier gives you", so the choice is self-explanatory. Dropped in
        the collapsed rail, where the tooltip above carries the mode instead. -->
-  <p v-if="!collapsed" class="px-1 text-[10px] leading-snug text-dimmed">
+  <p v-if="!collapsed" class="px-1 text-3xs leading-snug text-dimmed">
     {{ t(MODE_HINTS[uiMode.mode]) }}
   </p>
 </template>

package/app/components/layout/UiRoleSwitcher.vue

@@ -38,23 +38,25 @@ const items = computed(() =>
 <template>
   <UDropdownMenu :items="items" :ui="{ content: 'min-w-48' }">
     <!-- Rail: glyph over the role name, matching the tier button beside it. -->
-    <button
+    <UButton
+      color="neutral"
+      variant="ghost"
       v-if="collapsed"
-      type="button"
       data-testid="ui-role-toggle"
       :aria-label="`${t('uiRole.switcher')}: ${currentLabel}`"
       :title="`${t('uiRole.switcher')}: ${currentLabel}`"
       class="flex w-full flex-col items-center gap-0.5 rounded-lg border border-muted bg-default/60 px-1 py-1.5 transition hover:border-primary/60 hover:bg-elevated/60"
     >
       <UIcon :name="current.icon" class="h-4 w-4 shrink-0 text-primary" />
-      <span class="w-full truncate text-center text-[9px] font-medium uppercase text-toned">
+      <span class="w-full truncate text-center text-3xs font-medium uppercase text-toned">
         {{ currentLabel }}
       </span>
-    </button>
+    </UButton>
 
-    <button
+    <UButton
+      color="neutral"
+      variant="ghost"
       v-else
-      type="button"
       data-testid="ui-role-switcher"
       :aria-label="t('uiRole.switcher')"
       :title="t(current.hintKey)"
@@ -62,12 +64,12 @@ const items = computed(() =>
     >
       <UIcon :name="current.icon" class="h-4 w-4 shrink-0 text-primary" />
       <div class="min-w-0 flex-1">
-        <div class="truncate text-[10px] uppercase tracking-wide text-dimmed">
+        <div class="truncate text-2xs uppercase tracking-wide text-muted">
           {{ t('uiRole.switcher') }}
         </div>
         <div class="truncate text-xs font-medium text-default">{{ currentLabel }}</div>
       </div>
       <UIcon name="i-lucide-chevron-down" class="h-3.5 w-3.5 shrink-0 text-dimmed" />
-    </button>
+    </UButton>
   </UDropdownMenu>
 </template>

package/app/components/layout/WorkspaceMembersSettings.vue

@@ -221,7 +221,7 @@ function memberLabel(userId: string, name?: string | null, email?: string | null
         {{ t('layout.workspaceMembers.add.noAccount') }}
       </p>
       <template v-else>
-        <form class="flex gap-2" @submit.prevent="addMember">
+        <UForm class="flex gap-2" @submit="addMember">
           <USelect
             v-model="addUserId"
             :items="candidates"
@@ -242,7 +242,7 @@ function memberLabel(userId: string, name?: string | null, email?: string | null
           >
             {{ t('layout.workspaceMembers.add.submit') }}
           </UButton>
-        </form>
+        </UForm>
         <p v-if="candidates.length === 0" class="mt-2 text-dimmed">
           {{ t('layout.workspaceMembers.add.allAdded') }}
         </p>

package/app/components/media/ArtifactLightbox.vue

@@ -9,6 +9,7 @@
 import { computed, ref, watch } from 'vue'
 import { useModalBehavior } from '@modular-vue/core'
 import type { ArtifactBlobs } from '~/composables/useArtifactBlobs'
+import IconButton from '~/components/common/IconButton.vue'
 
 interface LightboxItem {
   artifactId: string
@@ -173,46 +174,63 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
     >
       <!-- Toolbar -->
       <div class="flex items-center gap-3 border-b border-default/60 px-4 py-2.5">
-        <span class="min-w-0 flex-1 truncate text-[13px] font-medium text-default">
+        <span class="min-w-0 flex-1 truncate text-sm font-medium text-default">
           {{ current?.label ?? t('media.lightbox.fallbackTitle') }}
         </span>
-        <span v-if="total > 1" class="shrink-0 text-[12px] tabular-nums text-muted">
+        <span v-if="total > 1" class="shrink-0 text-xs tabular-nums text-muted">
           {{ t('media.lightbox.counter', { current: index + 1, total }) }}
         </span>
         <div class="flex shrink-0 items-center gap-1">
-          <button
-            class="rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default disabled:opacity-40"
-            :title="t('media.lightbox.zoomOut')"
+          <IconButton
+            color="neutral"
+            variant="ghost"
+            icon="i-lucide-zoom-out"
+            :label="t('media.lightbox.zoomOut')"
+            :ui="{
+              base: 'rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default disabled:opacity-40',
+              leadingIcon: 'h-4 w-4',
+            }"
             :disabled="scale <= MIN_SCALE"
             @click="zoomBy(1 / 1.25)"
-          >
-            <UIcon name="i-lucide-zoom-out" class="h-4 w-4" />
-          </button>
-          <span class="w-10 text-center text-[11px] tabular-nums text-dimmed">{{
+          />
+          <span class="w-10 text-center text-2xs tabular-nums text-dimmed">{{
             n(scale, 'percent')
           }}</span>
-          <button
-            class="rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default disabled:opacity-40"
-            :title="t('media.lightbox.zoomIn')"
+          <IconButton
+            color="neutral"
+            variant="ghost"
+            icon="i-lucide-zoom-in"
+            :label="t('media.lightbox.zoomIn')"
+            :ui="{
+              base: 'rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default disabled:opacity-40',
+              leadingIcon: 'h-4 w-4',
+            }"
             :disabled="scale >= MAX_SCALE"
             @click="zoomBy(1.25)"
-          >
-            <UIcon name="i-lucide-zoom-in" class="h-4 w-4" />
-          </button>
-          <button
-            class="rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default"
-            :title="t('media.lightbox.reset')"
+          />
+          <IconButton
+            color="neutral"
+            variant="ghost"
+            icon="i-lucide-maximize"
+            :label="t('media.lightbox.reset')"
+            :ui="{
+              base: 'rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default',
+              leadingIcon: 'h-4 w-4',
+            }"
             @click="resetView"
-          >
-            <UIcon name="i-lucide-maximize" class="h-4 w-4" />
-          </button>
-          <button
-            class="ms-1 rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default"
-            :title="t('media.lightbox.close')"
+          />
+          <IconButton
+            color="neutral"
+            variant="ghost"
+            icon="i-lucide-x"
+            class="ms-1"
+            :label="t('media.lightbox.close')"
+            :ui="{
+              base: 'rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default',
+              leadingIcon: 'h-4 w-4',
+            }"
             @click="close"
-          >
-            <UIcon name="i-lucide-x" class="h-4 w-4" />
-          </button>
+          />
         </div>
       </div>
 
@@ -222,21 +240,26 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
         @wheel="onWheel"
         @click.self="close"
       >
-        <button
+        <IconButton
           v-if="total > 1"
-          class="absolute start-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-default/80 p-2 text-toned hover:bg-elevated hover:text-highlighted"
-          :title="t('media.lightbox.prev')"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-chevron-left"
+          class="absolute start-3 top-1/2 z-10 -translate-y-1/2"
+          :label="t('media.lightbox.prev')"
+          :ui="{
+            base: 'rounded-full bg-default/80 p-2 text-toned hover:bg-elevated hover:text-highlighted',
+            leadingIcon: 'h-5 w-5 rtl:-scale-x-100',
+          }"
           @click="go(-1)"
-        >
-          <UIcon name="i-lucide-chevron-left" class="h-5 w-5 rtl:-scale-x-100" />
-        </button>
+        />
 
         <img
           v-if="url"
           :src="url"
           :alt="current?.alt ?? ''"
           draggable="false"
-          class="max-h-full max-w-full select-none rounded shadow-2xl"
+          class="max-h-full max-w-full select-none rounded-sm shadow-2xl"
           :class="[
             scale > 1 ? (dragging ? 'cursor-grabbing' : 'cursor-grab') : 'cursor-zoom-in',
             dragging ? '' : 'transition-transform duration-100',
@@ -254,26 +277,33 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
             class="h-8 w-8"
             :class="state === 'error' ? '' : 'animate-spin'"
           />
-          <p class="text-[12px]">
+          <p class="text-xs">
             {{ state === 'error' ? t('media.lightbox.failed') : t('media.lightbox.loading') }}
           </p>
-          <button
+          <UButton
+            color="neutral"
+            variant="link"
             v-if="state === 'error' && current"
-            class="text-[12px] text-app-warning-300 hover:underline"
+            class="p-0 text-xs text-app-warning-300 hover:underline"
             @click="props.blobs.retry(current.artifactId)"
           >
             {{ t('common.retry') }}
-          </button>
+          </UButton>
         </div>
 
-        <button
+        <IconButton
           v-if="total > 1"
-          class="absolute end-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-default/80 p-2 text-toned hover:bg-elevated hover:text-highlighted"
-          :title="t('media.lightbox.next')"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-chevron-right"
+          class="absolute end-3 top-1/2 z-10 -translate-y-1/2"
+          :label="t('media.lightbox.next')"
+          :ui="{
+            base: 'rounded-full bg-default/80 p-2 text-toned hover:bg-elevated hover:text-highlighted',
+            leadingIcon: 'h-5 w-5 rtl:-scale-x-100',
+          }"
           @click="go(1)"
-        >
-          <UIcon name="i-lucide-chevron-right" class="h-5 w-5 rtl:-scale-x-100" />
-        </button>
+        />
       </div>
     </div>
   </Teleport>