@cat-factory/app 0.309.0 → 0.310.1

package/app/components/layout/AccountTeamSettings.vue

@@ -8,6 +8,7 @@ import AccountModelPolicySettings from '~/components/layout/AccountModelPolicySe
 import AccountPlatformAlertSettings from '~/components/layout/AccountPlatformAlertSettings.vue'
 import AccountRunCredentialSettings from '~/components/layout/AccountRunCredentialSettings.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 // Team settings for an org account: the member roster (with combinable admin /
 // developer / product roles), pending email invitations, and the per-account
@@ -207,7 +208,7 @@ async function disconnectEmail() {
       <p class="mb-3 text-muted">
         {{ t('layout.accountTeam.org.ctaBody') }}
       </p>
-      <form class="flex gap-2" @submit.prevent="createOrganization">
+      <UForm class="flex gap-2" @submit="createOrganization">
         <UInput
           v-model="newOrgName"
           :placeholder="t('layout.accountTeam.org.namePlaceholder')"
@@ -216,7 +217,7 @@ async function disconnectEmail() {
         <UButton type="submit" color="primary" :loading="busy" icon="i-lucide-plus">
           {{ t('layout.accountTeam.org.create') }}
         </UButton>
-      </form>
+      </UForm>
     </section>
 
     <!-- members -->
@@ -249,14 +250,13 @@ async function disconnectEmail() {
           <!-- Offboarding: end every session this member holds, leaving their membership and
                roles alone. Confirmed, because it is not undoable from here (the person simply
                signs in again) and because it is the sort of thing a mis-click should not do. -->
-          <UButton
+          <IconButton
             v-if="isAdmin"
             size="xs"
             color="neutral"
             variant="ghost"
             icon="i-lucide-log-out"
-            :title="t('layout.accountTeam.members.revokeSessions')"
-            :aria-label="t('layout.accountTeam.members.revokeSessions')"
+            :label="t('layout.accountTeam.members.revokeSessions')"
             data-testid="revoke-member-sessions"
             @click="revokeSessions(m.userId, m.name || m.email || m.userId)"
           />
@@ -272,7 +272,7 @@ async function disconnectEmail() {
       <h3 class="mb-2 font-semibold text-highlighted">
         {{ t('layout.accountTeam.invite.title') }}
       </h3>
-      <form class="flex gap-2" @submit.prevent="sendInvite">
+      <UForm class="flex gap-2" @submit="sendInvite">
         <UInput
           v-model="inviteEmail"
           type="email"
@@ -283,7 +283,7 @@ async function disconnectEmail() {
         <UButton type="submit" color="primary" :loading="busy" icon="i-lucide-send">
           {{ t('layout.accountTeam.invite.submit') }}
         </UButton>
-      </form>
+      </UForm>
 
       <ul v-if="accounts.invitations.length" class="mt-3 space-y-1">
         <li
@@ -332,7 +332,7 @@ async function disconnectEmail() {
             {{ t('layout.accountTeam.email.disconnect') }}
           </UButton>
         </div>
-        <form v-else class="space-y-2" @submit.prevent="connectEmail">
+        <UForm v-else class="space-y-2" @submit="connectEmail">
           <USelect v-model="emailProvider" :items="EMAIL_PROVIDER_ITEMS" class="w-full" />
           <UInput
             v-model="emailFrom"
@@ -348,7 +348,7 @@ async function disconnectEmail() {
           <UButton type="submit" color="primary" :loading="busy">
             {{ t('layout.accountTeam.email.connect') }}
           </UButton>
-        </form>
+        </UForm>
       </template>
     </section>
 

package/app/components/layout/AppearanceSwitcher.vue

@@ -86,8 +86,9 @@ const items = computed<DropdownMenuItem[][]>(() => [
 
 <template>
   <UDropdownMenu :items="items" :content="{ side: 'top', align: 'start' }">
-    <button
-      type="button"
+    <UButton
+      color="neutral"
+      variant="ghost"
       data-testid="appearance-switcher"
       :aria-label="t('appearance.switcher')"
       :title="collapsed ? `${t('appearance.switcher')}: ${summary}` : undefined"
@@ -102,7 +103,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
         <div class="truncate text-xs font-medium text-highlighted">{{ summary }}</div>
       </div>
       <UIcon v-if="!collapsed" name="i-lucide-chevron-up" class="h-4 w-4 shrink-0 text-dimmed" />
-    </button>
+    </UButton>
   </UDropdownMenu>
   <ThemeImportModal v-model:open="importOpen" />
 </template>

package/app/components/layout/BoardSwitcher.vue

@@ -257,8 +257,9 @@ async function submitPrompt() {
       :content="{ align: 'start' }"
       class="w-full"
     >
-      <button
-        type="button"
+      <UButton
+        color="neutral"
+        variant="ghost"
         class="flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-start transition hover:bg-elevated/60"
         :disabled="busy"
       >
@@ -270,13 +271,14 @@ async function submitPrompt() {
           {{ accounts.activeAccount?.name ?? t('layout.boardSwitcher.accountFallback') }}
         </SectionLabel>
         <UIcon name="i-lucide-chevrons-up-down" class="ms-auto h-3.5 w-3.5 shrink-0 text-app-600" />
-      </button>
+      </UButton>
     </UDropdownMenu>
 
     <!-- board selector -->
     <UDropdownMenu :items="boardItems" :content="{ align: 'start' }" class="w-full">
-      <button
-        type="button"
+      <UButton
+        color="neutral"
+        variant="ghost"
         :title="
           collapsed
             ? (workspace.activeWorkspace?.name ?? t('layout.boardSwitcher.boardFallback'))
@@ -297,13 +299,13 @@ async function submitPrompt() {
           name="i-lucide-chevron-down"
           class="ms-auto h-4 w-4 shrink-0 text-dimmed"
         />
-      </button>
+      </UButton>
     </UDropdownMenu>
 
     <!-- create / rename prompt -->
     <UModal v-model:open="promptOpen" :title="prompt ? promptMeta[prompt].title : ''">
       <template #body>
-        <form class="space-y-3" @submit.prevent="submitPrompt">
+        <UForm class="space-y-3" @submit="submitPrompt">
           <UFormField :label="t('layout.boardSwitcher.prompt.nameLabel')">
             <UInput
               v-model="promptValue"
@@ -341,7 +343,7 @@ async function submitPrompt() {
               {{ prompt ? promptMeta[prompt].cta : '' }}
             </UButton>
           </div>
-        </form>
+        </UForm>
       </template>
     </UModal>
   </div>

package/app/components/layout/BoardToolbar.vue

@@ -151,9 +151,10 @@ const decisionItems = computed(() =>
     />
     <!-- Click the readout to snap back to 100%. Always visible (only the LOD sub-label
          drops on narrow viewports) so the zoom level is never a mystery. -->
-    <button
-      type="button"
-      class="w-16 rounded-sm text-center text-xs tabular-nums text-toned hover:bg-elevated focus-visible:ring-2 focus-visible:ring-app-400/60 sm:w-20"
+    <UButton
+      color="neutral"
+      variant="ghost"
+      class="flex w-16 flex-col items-center gap-0 rounded-sm p-0 text-center text-xs tabular-nums text-toned hover:bg-elevated sm:w-20"
       :title="t('board.toolbar.resetZoom')"
       :aria-label="t('board.toolbar.resetZoom')"
       data-testid="board-zoom-reset"
@@ -167,7 +168,7 @@ const decisionItems = computed(() =>
       <span class="hidden text-3xs uppercase tracking-wide text-dimmed sm:block">{{
         lodLabel
       }}</span>
-    </button>
+    </UButton>
     <IconButton
       :label="t('board.toolbar.zoomIn')"
       icon="i-lucide-zoom-in"

package/app/components/layout/CommandBar.vue

@@ -281,10 +281,11 @@ function indexOf(cmd: Command) {
             <SectionLabel as="p" class="px-2 pb-1 pt-2">
               {{ group.name }}
             </SectionLabel>
-            <button
+            <UButton
+              color="neutral"
+              variant="ghost"
               v-for="cmd in group.items"
               :key="cmd.id"
-              type="button"
               :data-testid="`command-${cmd.id}`"
               class="flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-start text-sm transition"
               :class="
@@ -297,7 +298,7 @@ function indexOf(cmd: Command) {
             >
               <UIcon :name="cmd.icon" class="h-4 w-4 shrink-0 text-muted" />
               <span class="truncate">{{ cmd.label }}</span>
-            </button>
+            </UButton>
           </div>
         </div>
       </div>

package/app/components/layout/DefaultTestEnvBanner.vue

@@ -90,14 +90,15 @@ function openConfig(event: MouseEvent) {
               {{ t('layout.defaultTestEnvBanner.action') }}
             </UButton>
             <!-- The URL itself, shown so it can be read and copied, not just clicked. -->
-            <a
-              :href="configUrl"
+            <ULink
+              raw
+              :to="configUrl"
               class="min-w-0 truncate font-mono text-2xs text-app-info-300/80 underline decoration-dotted underline-offset-2 hover:text-app-info-200"
               data-testid="default-test-env-url"
               @click="openConfig"
             >
               {{ configUrl }}
-            </a>
+            </ULink>
           </div>
         </div>
       </div>

package/app/components/layout/IntegrationsHub.vue

@@ -427,10 +427,11 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
             {{ group.title }}
           </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()"
             >
@@ -462,13 +463,14 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
                 name="i-lucide-chevron-right"
                 class="h-4 w-4 shrink-0 text-dimmed rtl:-scale-x-100"
               />
-            </button>
+            </UButton>
           </div>
 
           <!-- De-emphasised workspace-config link (e.g. issue tracker settings). -->
-          <button
+          <UButton
+            color="neutral"
+            variant="ghost"
             v-if="group.footerLink"
-            type="button"
             class="mt-1.5 flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-start text-xs text-muted transition hover:bg-default/60 hover:text-default"
             @click="group.footerLink.onClick()"
           >
@@ -481,7 +483,7 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
               name="i-lucide-chevron-right"
               class="h-3.5 w-3.5 shrink-0 text-app-600 rtl:-scale-x-100"
             />
-          </button>
+          </UButton>
         </section>
       </div>
     </template>

package/app/components/layout/LanguageSwitcher.vue

@@ -40,8 +40,9 @@ const items = computed<DropdownMenuItem[][]>(() => [
 
 <template>
   <UDropdownMenu :items="items" :content="{ side: 'top', align: 'start' }">
-    <button
-      type="button"
+    <UButton
+      color="neutral"
+      variant="ghost"
       data-testid="language-switcher"
       :aria-label="t('language.switcher')"
       :title="collapsed ? `${t('language.switcher')}: ${current}` : undefined"
@@ -56,6 +57,6 @@ const items = computed<DropdownMenuItem[][]>(() => [
         <div class="truncate text-xs font-medium text-highlighted">{{ current }}</div>
       </div>
       <UIcon v-if="!collapsed" name="i-lucide-chevron-up" class="h-4 w-4 shrink-0 text-dimmed" />
-    </button>
+    </UButton>
   </UDropdownMenu>
 </template>

package/app/components/layout/ModelProvidersHub.vue

@@ -206,10 +206,11 @@ const filteredGroups = computed<ProviderGroup[]>(() => {
             {{ group.title }}
           </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"
               :data-testid="`model-provider-${item.key}`"
               @click="item.onClick()"
@@ -239,7 +240,7 @@ const filteredGroups = computed<ProviderGroup[]>(() => {
                 name="i-lucide-chevron-right"
                 class="h-4 w-4 shrink-0 text-dimmed rtl:-scale-x-100"
               />
-            </button>
+            </UButton>
           </div>
           <p v-if="group.note" class="mt-1.5 px-1 text-2xs text-dimmed">{{ group.note }}</p>
         </section>

package/app/components/layout/NotificationsInbox.vue

@@ -429,13 +429,15 @@ 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-sm bg-app-error-500/20 px-1.5 py-0.5 text-3xs font-semibold uppercase tracking-wide text-app-error-400"
@@ -444,16 +446,17 @@ function revealDecision(n: Notification) {
                 </span>
               </div>
               <p class="mt-0.5 text-2xs leading-snug text-muted">{{ n.body }}</p>
-              <a
+              <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-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.
@@ -463,30 +466,37 @@ 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-2xs"
-                  :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>
+                <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>

package/app/components/layout/PersonalSetupModal.vue

@@ -123,10 +123,11 @@ const groups = computed<PersonalGroup[]>(() => {
             {{ group.title }}
           </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()"
             >
@@ -147,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,7 +53,7 @@ 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. -->

package/app/components/layout/SideBar.vue

@@ -226,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')"
@@ -238,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

package/app/components/layout/TranslationWarningBanner.vue

@@ -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

@@ -67,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]) })"
@@ -80,7 +81,7 @@ const pinnedTitle = computed(
     <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">
     <SectionLabel class="mb-1 px-1">
@@ -91,10 +92,11 @@ const pinnedTitle = computed(
       :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"
@@ -106,7 +108,7 @@ const pinnedTitle = computed(
         @click="uiMode.setMode(mode)"
       >
         {{ t(MODE_LABELS[mode]) }}
-      </button>
+      </UButton>
     </div>
   </div>
 

package/app/components/layout/UiRoleSwitcher.vue

@@ -38,9 +38,10 @@ 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}`"
@@ -50,11 +51,12 @@ const items = computed(() =>
       <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)"
@@ -68,6 +70,6 @@ const items = computed(() =>
         <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>