@cat-factory/app 0.128.0 → 0.130.0

package/app/components/layout/SideBar.vue

@@ -23,11 +23,30 @@ const accounts = useAccountsStore()
 const auth = useAuthStore()
 const providerConnections = useProviderConnectionsStore()
 const ui = useUiStore()
+const access = useWorkspaceAccess()
 
 // The operator dashboard (deployment-level run health) is sensitive cross-workspace data,
 // so it's shown only to an admin of the active account (matching the backend admin gate).
 const isAccountAdmin = computed(() => accounts.activeAccount?.roles?.includes('admin') ?? false)
 
+// Workspace-RBAC nav gating: each management destination is shown only when the caller
+// holds the permission its writes require (the SPA mirror of the admin-tier controller
+// middleware — a member/viewer who'd only get a 403 never sees the entry). Board authoring
+// (create/repos) needs `board.write`; connections/infra/sandbox/bootstrap need
+// `integrations.manage`; workspace + model configuration and the fragment library need
+// `settings.manage`. Kaizen and account settings are reads / account-scoped and stay.
+// Absent access (dev-open) ⇒ every `can*` is true, so nothing is hidden.
+const showCreate = computed(() => access.canWriteBoard.value)
+const showAddFromRepo = computed(() => github.available && access.canWriteBoard.value)
+const showBootstrap = computed(() => access.canManageIntegrations.value)
+const showRepositories = computed(() => showAddFromRepo.value || showBootstrap.value)
+const showIntegrationsHub = computed(() => access.canManageIntegrations.value)
+const showSandbox = computed(() => access.canManageIntegrations.value)
+// The Configuration section carries workspace/model settings (`settings.manage`) AND the
+// account-scoped account-settings / operator-dashboard entries, so it shows when the caller
+// can manage settings OR accounts are enabled (the account entries have their own gates).
+const showConfiguration = computed(() => access.canManageSettings.value || accounts.enabled)
+
 // The Infrastructure menu (agent-container execution + test environments) shows whenever the
 // deployment reports its infrastructure capability — every facade populates `auth.infrastructure`
 // (it drives the execution-backend selector), so there is always an execution + test-env backend
@@ -36,12 +55,18 @@ const isAccountAdmin = computed(() => accounts.activeAccount?.roles?.includes('a
 // (somehow) omits the descriptor.
 const showInfrastructure = computed(
   () =>
-    auth.infrastructure != null ||
-    auth.localMode?.enabled === true ||
-    providerConnections.isAvailable('runner-pool') ||
-    providerConnections.isAvailable('environment'),
+    // Provisioning/managing infrastructure is `integrations.manage`, so a member/viewer
+    // never sees the section (they'd only 403 on the writes inside it).
+    access.canManageIntegrations.value &&
+    (auth.infrastructure != null ||
+      auth.localMode?.enabled === true ||
+      providerConnections.isAvailable('runner-pool') ||
+      providerConnections.isAvailable('environment')),
 )
 
+// The prompt-fragment library is a `settings.manage` authoring surface.
+const showWorkspaceContext = computed(() => library.available && access.canManageSettings.value)
+
 // `isCompact` (< lg) is the breakpoint at which the navbar is an off-canvas drawer;
 // above it the aside is static and the drawer flag is inert.
 const { isCompact } = useViewport()
@@ -166,57 +191,65 @@ watch(
         <UKbd value="⌘K" />
       </button>
 
-      <section>
-        <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          {{ t('nav.create') }}
-        </h2>
-        <div class="space-y-1.5">
-          <UButton
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-workflow"
-            class="justify-start"
-            @click="ui.openBuilder()"
-          >
-            {{ t('nav.buildPipeline') }}
-          </UButton>
-        </div>
-      </section>
-
-      <USeparator />
+      <template v-if="showCreate">
+        <USeparator />
+        <section>
+          <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            {{ t('nav.create') }}
+          </h2>
+          <div class="space-y-1.5">
+            <UButton
+              block
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-workflow"
+              class="justify-start"
+              data-testid="nav-build-pipeline"
+              @click="ui.openBuilder()"
+            >
+              {{ t('nav.buildPipeline') }}
+            </UButton>
+          </div>
+        </section>
+      </template>
 
-      <section>
-        <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          {{ t('nav.repositories') }}
-        </h2>
-        <div class="space-y-1.5">
-          <UButton
-            v-if="github.available"
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-folder-git-2"
-            class="justify-start"
-            @click="ui.openAddService()"
-          >
-            {{ t('nav.addFromRepo') }}
-          </UButton>
-          <UButton
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-git-branch-plus"
-            class="justify-start"
-            @click="ui.openBootstrap()"
-          >
-            {{ t('nav.bootstrapRepo') }}
-          </UButton>
-        </div>
-      </section>
+      <template v-if="showRepositories">
+        <USeparator />
+        <section>
+          <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            {{ t('nav.repositories') }}
+          </h2>
+          <div class="space-y-1.5">
+            <UButton
+              v-if="showAddFromRepo"
+              block
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-folder-git-2"
+              class="justify-start"
+              data-testid="nav-add-from-repo"
+              @click="ui.openAddService()"
+            >
+              {{ t('nav.addFromRepo') }}
+            </UButton>
+            <UButton
+              v-if="showBootstrap"
+              block
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-git-branch-plus"
+              class="justify-start"
+              data-testid="nav-bootstrap-repo"
+              @click="ui.openBootstrap()"
+            >
+              {{ t('nav.bootstrapRepo') }}
+            </UButton>
+          </div>
+        </section>
+      </template>
 
       <USeparator />
 
@@ -229,12 +262,14 @@ watch(
              this single button — the hub modal lists them grouped (source control,
              communication, documents, trackers, observability, model providers). -->
           <UButton
+            v-if="showIntegrationsHub"
             block
             color="primary"
             variant="soft"
             size="sm"
             icon="i-lucide-blocks"
             class="justify-start"
+            data-testid="nav-integrations"
             @click="ui.openIntegrations()"
           >
             {{ t('nav.integrations') }}
@@ -242,6 +277,7 @@ watch(
           <!-- The Sandbox: try prompt versions/models against graded fixtures, off to the
              side of the board. Opens the on-demand testing window. -->
           <UButton
+            v-if="showSandbox"
             block
             color="primary"
             variant="soft"
@@ -252,7 +288,8 @@ watch(
           >
             {{ t('nav.sandbox') }}
           </UButton>
-          <!-- The Kaizen screen: grading history + verified prompt/agent/model combos. -->
+          <!-- The Kaizen screen: grading history + verified prompt/agent/model combos. A
+             read surface (grading history), so it stays visible to every resolved role. -->
           <UButton
             block
             color="primary"
@@ -307,7 +344,7 @@ watch(
         </section>
       </template>
 
-      <template v-if="library.available">
+      <template v-if="showWorkspaceContext">
         <USeparator />
         <section>
           <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
@@ -327,66 +364,71 @@ watch(
         </section>
       </template>
 
-      <USeparator />
-      <section>
-        <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          {{ t('nav.configuration') }}
-        </h2>
-        <div class="space-y-1.5">
-          <!-- Merge thresholds, issue writeback and default service best practices are
-             now tabs inside Workspace settings. -->
-          <UButton
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-sliders-horizontal"
-            class="justify-start"
-            @click="ui.openWorkspaceSettings()"
-          >
-            {{ t('nav.workspaceSettings') }}
-          </UButton>
-          <UButton
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-cpu"
-            class="justify-start"
-            @click="ui.openModelConfig()"
-          >
-            {{ t('nav.modelConfiguration') }}
-          </UButton>
-          <!-- Account & team: members + roles, invitations, email sender, account API keys.
+      <template v-if="showConfiguration">
+        <USeparator />
+        <section>
+          <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            {{ t('nav.configuration') }}
+          </h2>
+          <div class="space-y-1.5">
+            <!-- Merge thresholds, issue writeback and default service best practices are
+             now tabs inside Workspace settings. `settings.manage` — hidden for members/viewers. -->
+            <UButton
+              v-if="access.canManageSettings.value"
+              block
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-sliders-horizontal"
+              class="justify-start"
+              data-testid="nav-workspace-settings"
+              @click="ui.openWorkspaceSettings()"
+            >
+              {{ t('nav.workspaceSettings') }}
+            </UButton>
+            <UButton
+              v-if="access.canManageSettings.value"
+              block
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-cpu"
+              class="justify-start"
+              @click="ui.openModelConfig()"
+            >
+              {{ t('nav.modelConfiguration') }}
+            </UButton>
+            <!-- Account & team: members + roles, invitations, email sender, account API keys.
              Shown once accounts (auth) are enabled. -->
-          <UButton
-            v-if="accounts.enabled"
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-users"
-            class="justify-start"
-            @click="ui.openAccountSettings()"
-          >
-            {{ t('nav.accountSettings') }}
-          </UButton>
-          <!-- Platform observability: deployment-level run health. Admin-only, like the backend gate. -->
-          <UButton
-            v-if="accounts.enabled && isAccountAdmin"
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-gauge"
-            class="justify-start"
-            data-testid="nav-operator-dashboard"
-            @click="ui.openOperatorDashboard()"
-          >
-            {{ t('nav.operatorDashboard') }}
-          </UButton>
-        </div>
-      </section>
+            <UButton
+              v-if="accounts.enabled"
+              block
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-users"
+              class="justify-start"
+              @click="ui.openAccountSettings()"
+            >
+              {{ t('nav.accountSettings') }}
+            </UButton>
+            <!-- Platform observability: deployment-level run health. Admin-only, like the backend gate. -->
+            <UButton
+              v-if="accounts.enabled && isAccountAdmin"
+              block
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-gauge"
+              class="justify-start"
+              data-testid="nav-operator-dashboard"
+              @click="ui.openOperatorDashboard()"
+            >
+              {{ t('nav.operatorDashboard') }}
+            </UButton>
+          </div>
+        </section>
+      </template>
     </div>
 
     <div class="mt-auto space-y-2">

package/app/components/layout/SpendWarningBanner.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 
 const { t, n } = useI18n()
 const workspace = useWorkspaceStore()
+const access = useWorkspaceAccess()
 
 const spend = computed(() => workspace.spend)
 /** Show the large warning only once the budget has been reached. */
@@ -80,6 +81,8 @@ async function resume() {
                 variant="solid"
                 icon="i-lucide-play"
                 :loading="resuming"
+                :disabled="!access.canExecuteRuns.value"
+                :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
                 @click="resume"
               >
                 {{ t('layout.spendWarningBanner.resume') }}

package/app/components/panels/InspectorPanel.vue

@@ -35,6 +35,7 @@ const agentRuns = useAgentRunsStore()
 const github = useGitHubStore()
 const recurring = useRecurringPipelinesStore()
 const requirements = useRequirementsStore()
+const access = useWorkspaceAccess()
 const { t } = useI18n()
 
 // When the selected task block backs a recurring pipeline, the inspector shows the
@@ -105,15 +106,20 @@ const runnable = computed(() => (block.value ? board.isRunnable(block.value.id)
 const unmetDepTitles = computed(() =>
   block.value && isTask.value ? board.unmetDeps(block.value.id).map((b) => b.title) : [],
 )
-const runBlockedReason = computed(() =>
-  unmetDepTitles.value.length
+const runBlockedReason = computed(() => {
+  // A read-only viewer can inspect a task but never start/re-run it — surface WHY on the
+  // locked trigger, exactly like an unmet-dependency lock (the backend rejects it anyway).
+  if (!access.canExecuteRuns.value) return t('access.noRunExecute')
+  return unmetDepTitles.value.length
     ? t(
         'panels.inspector.runBlocked',
         { count: unmetDepTitles.value.length, names: unmetDepTitles.value.join(', ') },
         unmetDepTitles.value.length,
       )
-    : null,
-)
+    : null
+})
+// The Run trigger is enabled only when the task is runnable AND the caller may execute runs.
+const canRun = computed(() => runnable.value && access.canExecuteRuns.value)
 
 // The delete control names what it removes, so selecting a task and deleting it
 // reads as "Delete task" rather than ambiguously removing the whole service.
@@ -564,15 +570,16 @@ const showOriginalDescription = ref(false)
 
       <!-- actions -->
       <div class="flex items-center gap-2">
-        <UDropdownMenu v-if="isTask" :items="runMenu">
+        <UDropdownMenu v-if="isTask" :items="runMenu" :disabled="!canRun">
           <UButton
-            :color="runnable ? 'primary' : 'neutral'"
+            :color="canRun ? 'primary' : 'neutral'"
             variant="soft"
             size="sm"
-            :icon="runnable ? 'i-lucide-play' : 'i-lucide-lock'"
+            :icon="canRun ? 'i-lucide-play' : 'i-lucide-lock'"
             trailing-icon="i-lucide-chevron-down"
-            :disabled="!runnable"
+            :disabled="!canRun"
             :title="runBlockedReason ?? undefined"
+            data-testid="run-start"
           >
             {{ instance ? t('panels.inspector.reRun') : t('panels.inspector.run') }}
           </UButton>
@@ -595,7 +602,12 @@ const showOriginalDescription = ref(false)
           icon="i-lucide-archive"
           :class="isServiceFrame ? 'ms-auto' : ''"
           data-testid="inspector-archive"
-          :title="t('panels.inspector.archiveService')"
+          :disabled="!access.canWriteBoard.value"
+          :title="
+            access.canWriteBoard.value
+              ? t('panels.inspector.archiveService')
+              : t('access.noBoardWrite')
+          "
           @click="archive"
         >
           {{ t('panels.inspector.archiveService') }}
@@ -607,7 +619,8 @@ const showOriginalDescription = ref(false)
           icon="i-lucide-trash-2"
           :class="isServiceFrame ? '' : 'ms-auto'"
           data-testid="inspector-delete"
-          :title="deleteLabel"
+          :disabled="!access.canWriteBoard.value"
+          :title="access.canWriteBoard.value ? deleteLabel : t('access.noBoardWrite')"
           @click="remove"
         >
           {{ deleteLabel }}

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

@@ -21,6 +21,7 @@ const agentRuns = useAgentRunsStore()
 const ui = useUiStore()
 const models = useModelsStore()
 const reviews = useReviewStage()
+const access = useWorkspaceAccess()
 const { t, te } = useI18n()
 const { confirm } = useConfirm()
 
@@ -232,8 +233,12 @@ async function mergePr() {
             variant="ghost"
             size="xs"
             :loading="stopping"
-            :disabled="resetting"
-            :title="t('inspector.execution.stopTooltip')"
+            :disabled="resetting || !access.canExecuteRuns.value"
+            :title="
+              access.canExecuteRuns.value
+                ? t('inspector.execution.stopTooltip')
+                : t('access.noRunExecute')
+            "
             data-testid="run-stop"
             @click="stopRun"
           >
@@ -246,8 +251,12 @@ async function mergePr() {
             variant="ghost"
             size="xs"
             :loading="resetting"
-            :disabled="stopping"
-            :title="t('inspector.execution.resetTooltip')"
+            :disabled="stopping || !access.canExecuteRuns.value"
+            :title="
+              access.canExecuteRuns.value
+                ? t('inspector.execution.resetTooltip')
+                : t('access.noRunExecute')
+            "
             data-testid="run-reset"
             @click="resetRun"
           >

package/app/components/prReview/PrReviewWindow.vue

@@ -22,6 +22,7 @@ import type {
 const execution = useExecutionStore()
 const board = useBoardStore()
 const prReview = usePrReviewStore()
+const access = useWorkspaceAccess()
 
 const { t } = useI18n()
 
@@ -305,7 +306,8 @@ async function onResolve(action: PrReviewResolution): Promise<void> {
           <UButton
             color="neutral"
             variant="ghost"
-            :disabled="!canResolve"
+            :disabled="!canResolve || !access.canExecuteRuns.value"
+            :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
             data-testid="pr-review-finish"
             @click="onResolve('finish')"
           >
@@ -314,7 +316,8 @@ async function onResolve(action: PrReviewResolution): Promise<void> {
           <UButton
             color="neutral"
             variant="soft"
-            :disabled="!canResolve || !hasSelection"
+            :disabled="!canResolve || !hasSelection || !access.canExecuteRuns.value"
+            :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
             data-testid="pr-review-post"
             @click="onResolve('post')"
           >
@@ -323,7 +326,8 @@ async function onResolve(action: PrReviewResolution): Promise<void> {
           <UButton
             color="primary"
             :loading="prReview.resolving"
-            :disabled="!canResolve || !hasSelection"
+            :disabled="!canResolve || !hasSelection || !access.canExecuteRuns.value"
+            :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
             data-testid="pr-review-fix"
             @click="onResolve('fix')"
           >

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -25,6 +25,7 @@ const requirements = useRequirementsStore()
 const models = useModelsStore()
 const toast = useToast()
 const { t } = useI18n()
+const access = useWorkspaceAccess()
 
 // Draft replies, keyed by item id, so editing one item doesn't disturb others.
 const drafts = ref<Record<string, string>>({})
@@ -837,7 +838,12 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                                   variant="soft"
                                   size="xs"
                                   icon="i-lucide-check"
-                                  :disabled="frozen"
+                                  :disabled="frozen || !access.canExecuteRuns.value"
+                                  :title="
+                                    access.canExecuteRuns.value
+                                      ? undefined
+                                      : t('access.noRunExecute')
+                                  "
                                   @click="acceptRecommendation(rec)"
                                 >
                                   {{ t('requirements.accept') }}
@@ -847,7 +853,12 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                                   variant="ghost"
                                   size="xs"
                                   icon="i-lucide-x"
-                                  :disabled="frozen"
+                                  :disabled="frozen || !access.canExecuteRuns.value"
+                                  :title="
+                                    access.canExecuteRuns.value
+                                      ? undefined
+                                      : t('access.noRunExecute')
+                                  "
                                   @click="rejectRecommendation(rec)"
                                 >
                                   {{ t('requirements.reject') }}
@@ -869,7 +880,16 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                                   size="xs"
                                   icon="i-lucide-rotate-cw"
                                   :loading="recommending"
-                                  :disabled="!(reRequestNotes[rec.id] ?? '').trim() || frozen"
+                                  :disabled="
+                                    !(reRequestNotes[rec.id] ?? '').trim() ||
+                                    frozen ||
+                                    !access.canExecuteRuns.value
+                                  "
+                                  :title="
+                                    access.canExecuteRuns.value
+                                      ? undefined
+                                      : t('access.noRunExecute')
+                                  "
                                   @click="reRequestRecommendation(rec)"
                                 >
                                   {{ t('requirements.reRequest') }}
@@ -1025,6 +1045,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   block
                   icon="i-lucide-wand-2"
                   :loading="recommending"
+                  :disabled="!access.canExecuteRuns.value"
+                  :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
                   @click="requestRecommendations"
                 >
                   {{
@@ -1050,6 +1072,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   icon="i-lucide-arrow-right"
                   :ui="{ leadingIcon: 'rtl:-scale-x-100', trailingIcon: 'rtl:-scale-x-100' }"
                   :loading="acting"
+                  :disabled="!access.canExecuteRuns.value"
+                  :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
                   @click="proceed"
                 >
                   {{ t('requirements.actions.proceedNothing') }}
@@ -1061,7 +1085,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   block
                   icon="i-lucide-wand-sparkles"
                   :loading="reworking"
-                  :disabled="!canIncorporate"
+                  :disabled="!canIncorporate || !access.canExecuteRuns.value"
+                  :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
                   @click="incorporate()"
                 >
                   {{ t('requirements.actions.incorporateAnswers') }}
@@ -1085,6 +1110,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   block
                   icon="i-lucide-sparkles"
                   :loading="busy"
+                  :disabled="!access.canExecuteRuns.value"
+                  :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
                   @click="reReview"
                 >
                   {{
@@ -1123,7 +1150,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                     block
                     icon="i-lucide-wand-sparkles"
                     :loading="reworking"
-                    :disabled="!redoComment.trim()"
+                    :disabled="!redoComment.trim() || !access.canExecuteRuns.value"
+                    :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
                     @click="incorporate(redoComment.trim())"
                   >
                     {{ t('requirements.actions.redoWithDirection') }}

package/app/components/settings/ApiTokensPanel.vue

@@ -30,7 +30,21 @@ function scopeLabel(scope: PublicApiScope): string {
 
 const scopeItems = computed(() => SCOPES.map((value) => ({ value, label: scopeLabel(value) })))
 const ui = useUiStore()
+const auth = useAuthStore()
 const store = usePublicApiKeysStore()
+
+/**
+ * The minter to attribute a key to. `null` when the key predates the audit column (or was
+ * minted with no session), so the row simply omits the segment. When the minter is the
+ * signed-in user we show a localized "you"; otherwise the raw `usr_*` id (the list has no
+ * user-name lookup — the audit id is the honest, non-misleading thing to show).
+ */
+function minterLabel(key: PublicApiKey): string | null {
+  if (!key.createdByUserId) return null
+  return key.createdByUserId === auth.user?.id
+    ? t('settings.apiTokens.list.createdByYou')
+    : key.createdByUserId
+}
 const toast = useToast()
 const { confirmAction, toastDone } = useConfirmAction()
 
@@ -191,6 +205,10 @@ async function revokeToken(key: PublicApiKey) {
                   })
                 }}</template>
                 <template v-else>{{ t('settings.apiTokens.list.neverUsed') }}</template>
+                <template v-if="minterLabel(key)">
+                  <span aria-hidden="true"> · </span>
+                  {{ t('settings.apiTokens.list.createdBy', { user: minterLabel(key) }) }}
+                </template>
               </div>
             </div>
             <UButton