@cat-factory/app 0.309.0 → 0.310.1

package/app/components/panels/ResultWindowShell.vue

@@ -22,6 +22,7 @@
 // self-assessment (see the footer block below), so a window never renders it itself.
 import { computed, ref, watch } from 'vue'
 import { useModalBehavior } from '@modular-vue/core'
+import IconButton from '~/components/common/IconButton.vue'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
 import RunDetailLoadState from '~/components/panels/RunDetailLoadState.vue'
 import StepEffortReport from '~/components/panels/StepEffortReport.vue'
@@ -300,14 +301,15 @@ const panelClass = computed(() => [
             :step-index="stepRef.stepIndex"
             @restarted="requestClose"
           />
-          <button
-            class="rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default"
+          <IconButton
+            icon="i-lucide-x"
+            color="neutral"
+            variant="ghost"
+            size="sm"
             data-testid="result-window-close"
-            :aria-label="t('common.close')"
+            :label="t('common.close')"
             @click="requestClose"
-          >
-            <UIcon name="i-lucide-x" class="h-4 w-4" />
-          </button>
+          />
         </header>
         <!-- Whether the whole-run fetch behind this window's prose has landed. -->
         <RunDetailLoadState :instance-id="activeInstanceId" />
@@ -322,34 +324,37 @@ const panelClass = computed(() => [
           class="shrink-0 border-t border-default bg-default/60"
           data-testid="result-window-effort"
         >
-          <button
-            type="button"
-            class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-elevated/40"
-            :aria-expanded="effortOpen"
-            data-testid="result-window-effort-toggle"
-            @click="effortOpen = !effortOpen"
-          >
-            <UIcon name="i-lucide-gauge" class="h-3.5 w-3.5 shrink-0 text-muted" />
-            <SectionLabel as="span">
-              {{ t('panels.stepDetail.effort.heading') }}
-            </SectionLabel>
-            <span
-              class="shrink-0 rounded-sm px-1.5 py-0.5 text-2xs font-medium tabular-nums"
-              :class="chipClass"
+          <UCollapsible v-model:open="effortOpen">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-elevated/40"
+              data-testid="result-window-effort-toggle"
             >
-              {{ t('panels.stepDetail.effort.outOfTen', { value: effortReport.difficulty }) }}
-            </span>
-            <span v-if="hint" class="min-w-0 flex-1 truncate text-xs text-muted">
-              {{ hint }}
-            </span>
-            <UIcon
-              :name="effortOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
-              class="ms-auto h-3.5 w-3.5 shrink-0 text-dimmed"
-            />
-          </button>
-          <div v-if="effortOpen" class="max-h-56 overflow-y-auto px-5 pb-3">
-            <StepEffortReport :report="effortReport" variant="flat" />
-          </div>
+              <UIcon name="i-lucide-gauge" class="h-3.5 w-3.5 shrink-0 text-muted" />
+              <SectionLabel as="span">
+                {{ t('panels.stepDetail.effort.heading') }}
+              </SectionLabel>
+              <span
+                class="shrink-0 rounded-sm px-1.5 py-0.5 text-2xs font-medium tabular-nums"
+                :class="chipClass"
+              >
+                {{ t('panels.stepDetail.effort.outOfTen', { value: effortReport.difficulty }) }}
+              </span>
+              <span v-if="hint" class="min-w-0 flex-1 truncate text-xs text-muted">
+                {{ hint }}
+              </span>
+              <UIcon
+                :name="effortOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
+                class="ms-auto h-3.5 w-3.5 shrink-0 text-dimmed"
+              />
+            </UButton>
+            <template #content>
+              <div class="max-h-56 overflow-y-auto px-5 pb-3">
+                <StepEffortReport :report="effortReport" variant="flat" />
+              </div>
+            </template>
+          </UCollapsible>
         </section>
 
         <!-- Shared trailing section: the pre-PR validation report (the service's check commands
@@ -360,51 +365,54 @@ const panelClass = computed(() => [
           class="shrink-0 border-t border-default bg-default/60"
           data-testid="result-window-validation"
         >
-          <button
-            type="button"
-            class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-elevated/40"
-            :aria-expanded="validationOpen"
-            data-testid="result-window-validation-toggle"
-            @click="validationOpen = !validationOpen"
-          >
-            <UIcon
-              :name="validationReport.passed ? 'i-lucide-shield-check' : 'i-lucide-shield-alert'"
-              class="h-3.5 w-3.5 shrink-0"
-              :class="validationReport.passed ? 'text-app-success-400' : 'text-app-error-400'"
-            />
-            <SectionLabel as="span">
-              {{ t('panels.stepDetail.validation.heading') }}
-            </SectionLabel>
-            <span
-              class="shrink-0 rounded-sm px-1.5 py-0.5 text-2xs font-medium tabular-nums"
-              :class="
-                validationReport.passed
-                  ? 'bg-app-success-500/15 text-app-success-300'
-                  : 'bg-app-error-500/15 text-app-error-300'
-              "
+          <UCollapsible v-model:open="validationOpen">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-elevated/40"
+              data-testid="result-window-validation-toggle"
             >
-              {{
-                validationReport.passed
-                  ? t('panels.stepDetail.validation.passed')
-                  : t('panels.stepDetail.validation.failed')
-              }}
-            </span>
-            <span class="min-w-0 flex-1 truncate text-xs text-muted">
-              {{
-                t('panels.stepDetail.validation.attempts', {
-                  attempts: validationReport.attempts,
-                  maxAttempts: validationReport.maxAttempts,
-                })
-              }}
-            </span>
-            <UIcon
-              :name="validationOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
-              class="ms-auto h-3.5 w-3.5 shrink-0 text-dimmed"
-            />
-          </button>
-          <div v-if="validationOpen" class="max-h-72 overflow-y-auto px-5 pb-3">
-            <StepValidationReport :report="validationReport" />
-          </div>
+              <UIcon
+                :name="validationReport.passed ? 'i-lucide-shield-check' : 'i-lucide-shield-alert'"
+                class="h-3.5 w-3.5 shrink-0"
+                :class="validationReport.passed ? 'text-app-success-400' : 'text-app-error-400'"
+              />
+              <SectionLabel as="span">
+                {{ t('panels.stepDetail.validation.heading') }}
+              </SectionLabel>
+              <span
+                class="shrink-0 rounded-sm px-1.5 py-0.5 text-2xs font-medium tabular-nums"
+                :class="
+                  validationReport.passed
+                    ? 'bg-app-success-500/15 text-app-success-300'
+                    : 'bg-app-error-500/15 text-app-error-300'
+                "
+              >
+                {{
+                  validationReport.passed
+                    ? t('panels.stepDetail.validation.passed')
+                    : t('panels.stepDetail.validation.failed')
+                }}
+              </span>
+              <span class="min-w-0 flex-1 truncate text-xs text-muted">
+                {{
+                  t('panels.stepDetail.validation.attempts', {
+                    attempts: validationReport.attempts,
+                    maxAttempts: validationReport.maxAttempts,
+                  })
+                }}
+              </span>
+              <UIcon
+                :name="validationOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
+                class="ms-auto h-3.5 w-3.5 shrink-0 text-dimmed"
+              />
+            </UButton>
+            <template #content>
+              <div class="max-h-72 overflow-y-auto px-5 pb-3">
+                <StepValidationReport :report="validationReport" />
+              </div>
+            </template>
+          </UCollapsible>
         </section>
 
         <!-- Shared trailing section: the bugfix reproduction proof (the declared check run against
@@ -416,42 +424,45 @@ const panelClass = computed(() => [
           class="shrink-0 border-t border-default bg-default/60"
           data-testid="result-window-reproduction"
         >
-          <button
-            type="button"
-            class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-elevated/40"
-            :aria-expanded="reproductionOpen"
-            data-testid="result-window-reproduction-toggle"
-            @click="reproductionOpen = !reproductionOpen"
-          >
-            <UIcon
-              :name="reproductionKeys!.icon"
-              class="h-3.5 w-3.5 shrink-0"
-              :class="reproductionKeys!.proven ? 'text-app-success-400' : 'text-app-warning-400'"
-            />
-            <SectionLabel as="span">
-              {{ t('panels.stepDetail.reproduction.heading') }}
-            </SectionLabel>
-            <span
-              class="shrink-0 rounded-sm px-1.5 py-0.5 text-2xs font-medium"
-              :class="
-                reproductionKeys!.proven
-                  ? 'bg-app-success-500/15 text-app-success-300'
-                  : 'bg-app-warning-500/15 text-app-warning-300'
-              "
+          <UCollapsible v-model:open="reproductionOpen">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-elevated/40"
+              data-testid="result-window-reproduction-toggle"
             >
-              {{ t(reproductionKeys!.chip) }}
-            </span>
-            <span class="min-w-0 flex-1 truncate text-xs text-muted">
-              {{ t(reproductionKeys!.verdict) }}
-            </span>
-            <UIcon
-              :name="reproductionOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
-              class="ms-auto h-3.5 w-3.5 shrink-0 text-dimmed"
-            />
-          </button>
-          <div v-if="reproductionOpen" class="max-h-72 overflow-y-auto px-5 pb-3">
-            <StepReproductionReport :report="reproductionReport" />
-          </div>
+              <UIcon
+                :name="reproductionKeys!.icon"
+                class="h-3.5 w-3.5 shrink-0"
+                :class="reproductionKeys!.proven ? 'text-app-success-400' : 'text-app-warning-400'"
+              />
+              <SectionLabel as="span">
+                {{ t('panels.stepDetail.reproduction.heading') }}
+              </SectionLabel>
+              <span
+                class="shrink-0 rounded-sm px-1.5 py-0.5 text-2xs font-medium"
+                :class="
+                  reproductionKeys!.proven
+                    ? 'bg-app-success-500/15 text-app-success-300'
+                    : 'bg-app-warning-500/15 text-app-warning-300'
+                "
+              >
+                {{ t(reproductionKeys!.chip) }}
+              </span>
+              <span class="min-w-0 flex-1 truncate text-xs text-muted">
+                {{ t(reproductionKeys!.verdict) }}
+              </span>
+              <UIcon
+                :name="reproductionOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
+                class="ms-auto h-3.5 w-3.5 shrink-0 text-dimmed"
+              />
+            </UButton>
+            <template #content>
+              <div class="max-h-72 overflow-y-auto px-5 pb-3">
+                <StepReproductionReport :report="reproductionReport" />
+              </div>
+            </template>
+          </UCollapsible>
         </section>
 
         <!-- Shared trailing section: what this step's agent declared it stored through a
@@ -464,28 +475,31 @@ const panelClass = computed(() => [
           class="shrink-0 border-t border-default bg-default/60"
           data-testid="result-window-binary-outputs"
         >
-          <button
-            type="button"
-            class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-elevated/40"
-            :aria-expanded="binaryOutputsOpen"
-            data-testid="result-window-binary-outputs-toggle"
-            @click="binaryOutputsOpen = !binaryOutputsOpen"
-          >
-            <UIcon name="i-lucide-image" class="h-3.5 w-3.5 shrink-0 text-muted" />
-            <SectionLabel as="span">
-              {{ t('binaryOutput.heading') }}
-            </SectionLabel>
-            <span class="min-w-0 flex-1 truncate text-xs text-muted">
-              {{ binaryOutputSummary }}
-            </span>
-            <UIcon
-              :name="binaryOutputsOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
-              class="ms-auto h-3.5 w-3.5 shrink-0 text-dimmed"
-            />
-          </button>
-          <div v-if="binaryOutputsOpen && activeStep" class="max-h-72 overflow-y-auto px-5 pb-3">
-            <BinaryOutputReport :step="activeStep" />
-          </div>
+          <UCollapsible v-model:open="binaryOutputsOpen">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-elevated/40"
+              data-testid="result-window-binary-outputs-toggle"
+            >
+              <UIcon name="i-lucide-image" class="h-3.5 w-3.5 shrink-0 text-muted" />
+              <SectionLabel as="span">
+                {{ t('binaryOutput.heading') }}
+              </SectionLabel>
+              <span class="min-w-0 flex-1 truncate text-xs text-muted">
+                {{ binaryOutputSummary }}
+              </span>
+              <UIcon
+                :name="binaryOutputsOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
+                class="ms-auto h-3.5 w-3.5 shrink-0 text-dimmed"
+              />
+            </UButton>
+            <template #content>
+              <div v-if="activeStep" class="max-h-72 overflow-y-auto px-5 pb-3">
+                <BinaryOutputReport :step="activeStep" />
+              </div>
+            </template>
+          </UCollapsible>
         </section>
       </div>
     </div>

package/app/components/panels/StepContainerStatus.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import type { PipelineStep, RunContainerStatus } from '~/types/execution'
 import { containerPhaseLabel } from '~/utils/pipelineRender'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 // The per-run container lifecycle for a container-backed step: its status (spinning up /
 // running / errored / reclaimed), the live phase (preparing the checkout vs the agent
@@ -118,14 +119,13 @@ const { copy: copyText } = useCopyToClipboard()
           <dd class="truncate font-mono text-2xs text-toned" :title="step.container.id">
             {{ step.container.id }}
           </dd>
-          <UButton
+          <IconButton
             icon="i-lucide-copy"
             color="neutral"
             variant="ghost"
             size="xs"
             class="ms-auto shrink-0"
-            :title="t('panels.stepMeta.container.copyId')"
-            :aria-label="t('panels.stepMeta.container.copyId')"
+            :label="t('panels.stepMeta.container.copyId')"
             @click="copyText(step.container.id)"
           />
         </div>
@@ -134,23 +134,23 @@ const { copy: copyText } = useCopyToClipboard()
             {{ t('panels.stepMeta.container.url') }}
           </SectionLabel>
           <dd class="truncate font-mono text-2xs text-toned">
-            <a
-              :href="step.container.url"
+            <ULink
+              raw
+              :to="step.container.url"
               target="_blank"
               rel="noopener noreferrer"
               class="hover:underline"
             >
               {{ step.container.url }}
-            </a>
+            </ULink>
           </dd>
-          <UButton
+          <IconButton
             icon="i-lucide-copy"
             color="neutral"
             variant="ghost"
             size="xs"
             class="ms-auto shrink-0"
-            :title="t('panels.stepMeta.container.copyUrl')"
-            :aria-label="t('panels.stepMeta.container.copyUrl')"
+            :label="t('panels.stepMeta.container.copyUrl')"
             @click="copyText(step.container.url)"
           />
         </div>

package/app/components/panels/StepDelegatedStatus.vue

@@ -7,6 +7,7 @@ import {
 } from './StepDelegatedStatus.logic'
 import type { PipelineStep } from '~/types/execution'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 // The EXTERNAL work a delegated step dispatched: which registered executor is running it, what it
 // is doing, and the link to that system's own logs, which is the affordance everything else here
@@ -106,25 +107,25 @@ const { copy: copyText } = useCopyToClipboard()
              it is: refusing to follow it is right, and hiding it would report a run that named
              no link at all. -->
         <dd class="truncate font-mono text-2xs text-toned">
-          <a
+          <ULink
+            raw
             v-if="runHref"
-            :href="runHref"
+            :to="runHref"
             target="_blank"
             rel="noopener noreferrer"
             class="hover:underline"
           >
             {{ record.url }}
-          </a>
+          </ULink>
           <span v-else>{{ record.url }}</span>
         </dd>
-        <UButton
+        <IconButton
           icon="i-lucide-copy"
           color="neutral"
           variant="ghost"
           size="xs"
           class="ms-auto shrink-0"
-          :title="t('panels.stepMeta.delegated.copyUrl')"
-          :aria-label="t('panels.stepMeta.delegated.copyUrl')"
+          :label="t('panels.stepMeta.delegated.copyUrl')"
           @click="copyText(record.url)"
         />
       </div>
@@ -166,15 +167,16 @@ const { copy: copyText } = useCopyToClipboard()
           <span class="truncate">{{
             attempt.outcome || t('panels.stepMeta.delegated.noOutcome')
           }}</span>
-          <a
+          <ULink
+            raw
             v-if="externalRunHref(attempt.url)"
-            :href="externalRunHref(attempt.url)!"
+            :to="externalRunHref(attempt.url)!"
             target="_blank"
             rel="noopener noreferrer"
             class="ms-auto shrink-0 font-mono hover:underline"
           >
             {{ t('panels.stepMeta.delegated.openRun') }}
-          </a>
+          </ULink>
         </li>
       </ul>
     </div>

package/app/components/panels/StepRestartControl.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 // Shared "Restart pipeline from this step" control.
 //
@@ -57,13 +58,13 @@ async function restart() {
 
 <template>
   <template v-if="canRestart">
-    <UButton
+    <IconButton
       v-if="!armed"
       icon="i-lucide-rotate-ccw"
       color="neutral"
       variant="ghost"
       size="sm"
-      :title="t('panels.stepRestart.restartFromStep')"
+      :label="t('panels.stepRestart.restartFromStep')"
       @click="
         () => {
           armed = true

package/app/components/panels/inspector/EpicChildren.vue

@@ -72,10 +72,11 @@ const groups = computed(() => {
           <SectionLabel v-if="mod.module">
             {{ mod.module.title }}
           </SectionLabel>
-          <button
+          <UButton
+            color="neutral"
+            variant="ghost"
             v-for="task in mod.tasks"
             :key="task.id"
-            type="button"
             class="flex w-full items-center gap-1.5 rounded-sm px-1 py-0.5 text-start text-xs text-default hover:bg-elevated"
             @click="ui.select(task.id)"
           >
@@ -87,7 +88,7 @@ const groups = computed(() => {
             <span class="ms-auto shrink-0 text-3xs text-dimmed">
               {{ STATUS_META[task.status].label }}
             </span>
-          </button>
+          </UButton>
         </div>
       </div>
     </div>

package/app/components/panels/inspector/FrontendConfig.vue

@@ -12,6 +12,7 @@ import type {
 } from '~/types/domain'
 import FrontendBindingsResolved from '~/components/panels/inspector/FrontendBindingsResolved.vue'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import IconButton from '~/components/common/IconButton.vue'
 import { apiErrorEnvelope } from '~/composables/api/errors'
 
 // Frontend-frame (`type: 'frontend'`) configuration: how to build, serve, and mock this
@@ -556,12 +557,12 @@ onUnmounted(() => preview.stopPolling(props.block.id))
               class="flex-1"
               @update:model-value="(v: string) => setBindingSource(i, v)"
             />
-            <UButton
+            <IconButton
               size="xs"
               variant="ghost"
               color="neutral"
               icon="i-lucide-x"
-              :title="t('inspector.frontendConfig.bindings.remove')"
+              :label="t('inspector.frontendConfig.bindings.remove')"
               @click="removeBinding(i)"
             />
           </div>

package/app/components/panels/inspector/InspectorSection.vue

@@ -28,27 +28,32 @@ if (props.defaultOpen) open.value = true
 <template>
   <section class="border-t border-default pt-2" data-testid="inspector-section">
     <div class="flex items-center gap-1.5">
-      <SectionLabel
-        as="button"
-        type="button"
-        class="flex min-w-0 flex-1 items-center gap-1.5 text-start hover:text-default"
+      <UButton
+        color="neutral"
+        variant="link"
+        class="group min-w-0 flex-1 p-0"
         :aria-expanded="open"
         data-testid="inspector-section-toggle"
         @click="open = !open"
       >
-        <UIcon
-          :name="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
-          class="h-3.5 w-3.5 shrink-0 text-dimmed"
-        />
-        <UIcon v-if="icon" :name="icon" class="h-3.5 w-3.5 shrink-0" />
-        <span class="truncate">{{ title }}</span>
-        <span v-if="count" class="font-normal normal-case text-dimmed">({{ count }})</span>
-        <UIcon
-          v-if="warning"
-          name="i-lucide-triangle-alert"
-          class="h-3.5 w-3.5 shrink-0 text-app-warning-400"
-        />
-      </SectionLabel>
+        <SectionLabel
+          as="span"
+          class="flex min-w-0 flex-1 items-center gap-1.5 group-hover:text-default"
+        >
+          <UIcon
+            :name="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+            class="h-3.5 w-3.5 shrink-0 text-dimmed"
+          />
+          <UIcon v-if="icon" :name="icon" class="h-3.5 w-3.5 shrink-0" />
+          <span class="truncate">{{ title }}</span>
+          <span v-if="count" class="font-normal normal-case text-dimmed">({{ count }})</span>
+          <UIcon
+            v-if="warning"
+            name="i-lucide-triangle-alert"
+            class="h-3.5 w-3.5 shrink-0 text-app-warning-400"
+          />
+        </SectionLabel>
+      </UButton>
       <!-- An action ("+", attach, menu) mutates the body list, so expand (never collapse)
            on interaction — otherwise the new row lands inside the collapsed body. -->
       <div v-if="$slots.actions" class="contents" @click="open = true">

package/app/components/panels/inspector/ServiceConnections.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import type { Block, ServiceConnection } from '~/types/domain'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 // Service-frame (`type: 'service'`) connections: the other services this one USES
 // (consumer→provider edges, stored on this frame — the consumer end). Each row picks a
@@ -124,12 +125,12 @@ const usedBy = computed(() =>
             (e: KeyboardEvent) => setDescription(i, (e.target as HTMLInputElement).value)
           "
         />
-        <UButton
+        <IconButton
           size="xs"
           variant="ghost"
           color="neutral"
           icon="i-lucide-x"
-          :title="t('inspector.serviceConnections.remove')"
+          :label="t('inspector.serviceConnections.remove')"
           data-testid="service-connection-remove"
           @click="removeConnection(i)"
         />

package/app/components/panels/inspector/ServiceTestConfig.vue

@@ -19,6 +19,7 @@ import type {
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 import ServiceSelfTests from '~/components/panels/inspector/ServiceSelfTests.vue'
+import IconButton from '~/components/common/IconButton.vue'
 import { apiErrorEnvelope } from '~/composables/api/errors'
 
 // Service-level (frame) configuration: the service-owned PROVISIONING — the provision
@@ -634,13 +635,13 @@ function setSize(value: InstanceSize) {
               (e: KeyboardEvent) => setComposePath((e.target as HTMLInputElement).value)
             "
           />
-          <UButton
+          <IconButton
             v-if="repoContext"
             size="xs"
             variant="soft"
             color="neutral"
             icon="i-lucide-folder-search"
-            :title="t('inspector.testConfig.browseRepo')"
+            :label="t('inspector.testConfig.browseRepo')"
             @click="openBrowse('compose')"
           />
         </div>
@@ -715,13 +716,13 @@ function setSize(value: InstanceSize) {
             @blur="(e: FocusEvent) => setKubePath((e.target as HTMLInputElement).value)"
             @keydown.enter="(e: KeyboardEvent) => setKubePath((e.target as HTMLInputElement).value)"
           />
-          <UButton
+          <IconButton
             v-if="repoContext && kubeSourceType === 'colocated'"
             size="xs"
             variant="soft"
             color="neutral"
             icon="i-lucide-folder-search"
-            :title="t('inspector.testConfig.browseRepo')"
+            :label="t('inspector.testConfig.browseRepo')"
             @click="openBrowse('k8s')"
           />
         </div>