@cat-factory/app 0.124.0 → 0.126.0

package/app/components/panels/OperatorDashboardPanel.vue

@@ -345,8 +345,12 @@ watch(
                     >
                       {{ t('platformObservability.durations.empty') }}
                     </div>
-                    <dl v-else class="flex items-center justify-between gap-2 text-center">
-                      <div class="flex-1">
+                    <dl
+                      v-else
+                      class="grid grid-cols-3 gap-y-3 text-center"
+                      data-testid="operator-durations"
+                    >
+                      <div>
                         <dt class="text-[11px] text-slate-500">
                           {{ t('platformObservability.durations.avg') }}
                         </dt>
@@ -354,7 +358,7 @@ watch(
                           {{ view.durations.avgMs == null ? '—' : formatMs(view.durations.avgMs) }}
                         </dd>
                       </div>
-                      <div class="flex-1">
+                      <div>
                         <dt class="text-[11px] text-slate-500">
                           {{ t('platformObservability.durations.min') }}
                         </dt>
@@ -362,7 +366,7 @@ watch(
                           {{ view.durations.minMs == null ? '—' : formatMs(view.durations.minMs) }}
                         </dd>
                       </div>
-                      <div class="flex-1">
+                      <div>
                         <dt class="text-[11px] text-slate-500">
                           {{ t('platformObservability.durations.max') }}
                         </dt>
@@ -370,6 +374,39 @@ watch(
                           {{ view.durations.maxMs == null ? '—' : formatMs(view.durations.maxMs) }}
                         </dd>
                       </div>
+                      <div>
+                        <dt class="text-[11px] text-slate-500">
+                          {{ t('platformObservability.durations.p50') }}
+                        </dt>
+                        <dd
+                          class="font-semibold text-slate-300"
+                          data-testid="operator-duration-p50"
+                        >
+                          {{ view.durations.p50Ms == null ? '—' : formatMs(view.durations.p50Ms) }}
+                        </dd>
+                      </div>
+                      <div>
+                        <dt class="text-[11px] text-slate-500">
+                          {{ t('platformObservability.durations.p90') }}
+                        </dt>
+                        <dd
+                          class="font-semibold text-slate-300"
+                          data-testid="operator-duration-p90"
+                        >
+                          {{ view.durations.p90Ms == null ? '—' : formatMs(view.durations.p90Ms) }}
+                        </dd>
+                      </div>
+                      <div>
+                        <dt class="text-[11px] text-slate-500">
+                          {{ t('platformObservability.durations.p99') }}
+                        </dt>
+                        <dd
+                          class="font-semibold text-slate-300"
+                          data-testid="operator-duration-p99"
+                        >
+                          {{ view.durations.p99Ms == null ? '—' : formatMs(view.durations.p99Ms) }}
+                        </dd>
+                      </div>
                     </dl>
                   </div>
                 </div>

package/app/components/settings/ApiTokensPanel.vue

@@ -5,11 +5,30 @@
 // only (label + created / last-used). To rotate a token, revoke it and mint a new one.
 // Opened from the Integrations hub.
 import { computed, ref, watch } from 'vue'
-import type { PublicApiKey } from '~/types/publicApiKeys'
+import type { PublicApiKey, PublicApiScope } from '~/types/publicApiKeys'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
 
 const { t, d } = useI18n()
+
+// The permission ladder a minted key can carry (read ⊂ write ⊂ admin), mirroring the backend
+// contract. A `read` key can only observe; `write` adds create/start/manage; `admin` adds the
+// destructive/merge-adjacent operations (e.g. deleting a task).
+const SCOPES: PublicApiScope[] = ['read', 'write', 'admin']
+
+/** Localized label for a scope — an exhaustive switch, so a new scope is a compile error here. */
+function scopeLabel(scope: PublicApiScope): string {
+  switch (scope) {
+    case 'read':
+      return t('settings.apiTokens.scopes.read')
+    case 'write':
+      return t('settings.apiTokens.scopes.write')
+    case 'admin':
+      return t('settings.apiTokens.scopes.admin')
+  }
+}
+
+const scopeItems = computed(() => SCOPES.map((value) => ({ value, label: scopeLabel(value) })))
 const ui = useUiStore()
 const store = usePublicApiKeysStore()
 const toast = useToast()
@@ -22,6 +41,8 @@ const open = computed({
 const back = useIntegrationBack(open)
 
 const label = ref('')
+// The scope the next minted key will carry; defaults to the safe middle of the ladder.
+const scope = ref<PublicApiScope>('write')
 const busy = ref(false)
 // The full raw secret from the most recent create — surfaced once, then dismissed. Never
 // re-fetchable, so it lives only in this transient ref (not the store).
@@ -58,9 +79,10 @@ async function createToken() {
   if (!trimmed) return
   busy.value = true
   try {
-    const created = await store.create(trimmed)
+    const created = await store.create(trimmed, scope.value)
     newSecret.value = created.secret
     label.value = ''
+    scope.value = 'write'
     toast.add({
       title: t('settings.apiTokens.toast.created'),
       icon: 'i-lucide-check',
@@ -145,7 +167,17 @@ async function revokeToken(key: PublicApiKey) {
             class="flex items-center justify-between gap-2 rounded-md border border-slate-800 px-3 py-2"
           >
             <div class="min-w-0 space-y-0.5">
-              <div class="truncate text-sm font-medium">{{ key.label }}</div>
+              <div class="flex items-center gap-2">
+                <span class="truncate text-sm font-medium">{{ key.label }}</span>
+                <UBadge
+                  color="neutral"
+                  variant="subtle"
+                  size="sm"
+                  :data-testid="`api-token-scope-${key.id}`"
+                >
+                  {{ scopeLabel(key.scope) }}
+                </UBadge>
+              </div>
               <div class="text-[11px] text-slate-500">
                 {{
                   t('settings.apiTokens.list.created', {
@@ -190,6 +222,17 @@ async function revokeToken(key: PublicApiKey) {
               @keyup.enter="createToken"
             />
           </UFormField>
+          <UFormField
+            :label="t('settings.apiTokens.add.scope')"
+            :help="t('settings.apiTokens.add.scopeHelp')"
+          >
+            <USelect
+              v-model="scope"
+              :items="scopeItems"
+              class="w-full"
+              data-testid="api-token-scope"
+            />
+          </UFormField>
           <UButton
             :loading="busy"
             :disabled="!label.trim()"

package/app/stores/publicApiKeys.spec.ts

@@ -10,6 +10,7 @@ function key(over: Partial<PublicApiKey> = {}): PublicApiKey {
     accountId: 'acc1',
     workspaceId: 'ws1',
     label: 'CI',
+    scope: 'write',
     createdAt: 1,
     lastUsedAt: null,
     revokedAt: null,
@@ -83,7 +84,7 @@ describe('publicApiKeys store', () => {
 
     const store = usePublicApiKeysStore()
     await store.load()
-    const result = await store.create('deploy')
+    const result = await store.create('deploy', 'admin')
 
     expect(result.secret).toBe('cf_live_pak_new.abc')
     expect(store.keys.map((k) => k.id)).toEqual(['pak_new', 'pak_old'])

package/app/stores/publicApiKeys.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import type { CreatedPublicApiKey, PublicApiKey } from '~/types/publicApiKeys'
+import type { CreatedPublicApiKey, PublicApiKey, PublicApiScope } from '~/types/publicApiKeys'
 import { useWorkspaceStore } from '~/stores/workspace'
 import { apiErrorStatus } from '~/composables/api/errors'
 
@@ -51,10 +51,13 @@ export const usePublicApiKeysStore = defineStore('publicApiKeys', () => {
     return inFlight
   }
 
-  /** Mint a key. Returns the created record PLUS the one-time raw secret (shown once). */
-  async function create(label: string): Promise<CreatedPublicApiKey> {
+  /**
+   * Mint a key with a permission `scope` (read ⊂ write ⊂ admin). Returns the created record
+   * PLUS the one-time raw secret (shown once).
+   */
+  async function create(label: string, scope: PublicApiScope): Promise<CreatedPublicApiKey> {
     const ws = useWorkspaceStore()
-    const created = await api.createPublicApiKey(ws.requireId(), { label })
+    const created = await api.createPublicApiKey(ws.requireId(), { label, scope })
     // Prepend: the backend lists newest-first, so the freshly minted key belongs at the
     // top — matching the order a subsequent `load()` would produce.
     keys.value = [created.key, ...keys.value]

package/app/types/publicApiKeys.ts

@@ -4,6 +4,7 @@
 // Re-exported from the shared contracts package (the single source of truth).
 export type {
   PublicApiKey,
+  PublicApiScope,
   PublicApiKeyListResult,
   CreatePublicApiKeyInput,
   CreatedPublicApiKey,

package/i18n/locales/de.json

@@ -541,8 +541,15 @@
         "label": "Bezeichnung",
         "labelHelp": "Ein Name, um dieses Token später wiederzuerkennen.",
         "labelPlaceholder": "z. B. CI-Pipeline",
+        "scope": "Berechtigung",
+        "scopeHelp": "Was dieses Token darf: nur Lesen, Lesen und Schreiben oder Vollzugriff (der auch das Löschen erlaubt).",
         "create": "Token erstellen"
       },
+      "scopes": {
+        "read": "Nur Lesen",
+        "write": "Lesen und Schreiben",
+        "admin": "Vollzugriff"
+      },
       "toast": {
         "loadFailed": "API-Tokens konnten nicht geladen werden",
         "created": "Token erstellt",
@@ -2801,6 +2808,9 @@
       "avg": "Durchschnitt",
       "min": "Min.",
       "max": "Max.",
+      "p50": "p50",
+      "p90": "p90",
+      "p99": "p99",
       "empty": "Keine abgeschlossenen Läufe in diesem Zeitraum."
     },
     "live": {

package/i18n/locales/en.json

@@ -1416,6 +1416,9 @@
       "avg": "Average",
       "min": "Min",
       "max": "Max",
+      "p50": "p50",
+      "p90": "p90",
+      "p99": "p99",
       "empty": "No completed runs in this window."
     },
     "live": {
@@ -2485,8 +2488,15 @@
         "label": "Label",
         "labelHelp": "A name to recognize this token by later.",
         "labelPlaceholder": "e.g. CI pipeline",
+        "scope": "Scope",
+        "scopeHelp": "What this token can do: read-only, read and write, or full access (which also allows deleting).",
         "create": "Create token"
       },
+      "scopes": {
+        "read": "Read only",
+        "write": "Read and write",
+        "admin": "Full access"
+      },
       "toast": {
         "loadFailed": "Could not load API tokens",
         "created": "Token created",

package/i18n/locales/es.json

@@ -1359,6 +1359,9 @@
       "avg": "Media",
       "min": "Mín.",
       "max": "Máx.",
+      "p50": "p50",
+      "p90": "p90",
+      "p99": "p99",
       "empty": "No hay ejecuciones completadas en este periodo."
     },
     "live": {
@@ -2300,8 +2303,15 @@
         "label": "Etiqueta",
         "labelHelp": "Un nombre para reconocer este token más adelante.",
         "labelPlaceholder": "p. ej. pipeline de CI",
+        "scope": "Alcance",
+        "scopeHelp": "Lo que puede hacer este token: solo lectura, lectura y escritura o acceso completo (que también permite eliminar).",
         "create": "Crear token"
       },
+      "scopes": {
+        "read": "Solo lectura",
+        "write": "Lectura y escritura",
+        "admin": "Acceso completo"
+      },
       "toast": {
         "loadFailed": "No se pudieron cargar los tokens de la API",
         "created": "Token creado",

package/i18n/locales/fr.json

@@ -1359,6 +1359,9 @@
       "avg": "Moyenne",
       "min": "Min.",
       "max": "Max.",
+      "p50": "p50",
+      "p90": "p90",
+      "p99": "p99",
       "empty": "Aucune exécution terminée sur cette période."
     },
     "live": {
@@ -2300,8 +2303,15 @@
         "label": "Libellé",
         "labelHelp": "Un nom pour reconnaître ce jeton plus tard.",
         "labelPlaceholder": "ex. pipeline CI",
+        "scope": "Portée",
+        "scopeHelp": "Ce que ce jeton peut faire : lecture seule, lecture et écriture, ou accès complet (qui autorise aussi la suppression).",
         "create": "Créer le jeton"
       },
+      "scopes": {
+        "read": "Lecture seule",
+        "write": "Lecture et écriture",
+        "admin": "Accès complet"
+      },
       "toast": {
         "loadFailed": "Impossible de charger les jetons d'API",
         "created": "Jeton créé",

package/i18n/locales/he.json

@@ -1359,6 +1359,9 @@
       "avg": "ממוצע",
       "min": "מינימום",
       "max": "מקסימום",
+      "p50": "p50",
+      "p90": "p90",
+      "p99": "p99",
       "empty": "אין הרצות שהושלמו בטווח זה."
     },
     "live": {
@@ -2421,8 +2424,15 @@
         "label": "תווית",
         "labelHelp": "שם שיעזור לך לזהות את האסימון הזה בהמשך.",
         "labelPlaceholder": "לדוגמה, צינור CI",
+        "scope": "היקף הרשאות",
+        "scopeHelp": "מה האסימון הזה יכול לעשות: קריאה בלבד, קריאה וכתיבה, או גישה מלאה (שמאפשרת גם מחיקה).",
         "create": "צור אסימון"
       },
+      "scopes": {
+        "read": "קריאה בלבד",
+        "write": "קריאה וכתיבה",
+        "admin": "גישה מלאה"
+      },
       "toast": {
         "loadFailed": "לא ניתן לטעון את אסימוני ה-API",
         "created": "האסימון נוצר",

package/i18n/locales/it.json

@@ -541,8 +541,15 @@
         "label": "Etichetta",
         "labelHelp": "Un nome per riconoscere questo token in seguito.",
         "labelPlaceholder": "es. pipeline CI",
+        "scope": "Ambito",
+        "scopeHelp": "Cosa può fare questo token: sola lettura, lettura e scrittura o accesso completo (che consente anche l'eliminazione).",
         "create": "Crea token"
       },
+      "scopes": {
+        "read": "Sola lettura",
+        "write": "Lettura e scrittura",
+        "admin": "Accesso completo"
+      },
       "toast": {
         "loadFailed": "Impossibile caricare i token API",
         "created": "Token creato",
@@ -2801,6 +2808,9 @@
       "avg": "Media",
       "min": "Min",
       "max": "Max",
+      "p50": "p50",
+      "p90": "p90",
+      "p99": "p99",
       "empty": "Nessuna esecuzione completata in questo periodo."
     },
     "live": {

package/i18n/locales/ja.json

@@ -1359,6 +1359,9 @@
       "avg": "平均",
       "min": "最小",
       "max": "最大",
+      "p50": "p50",
+      "p90": "p90",
+      "p99": "p99",
       "empty": "この期間に完了した実行はありません。"
     },
     "live": {
@@ -2422,8 +2425,15 @@
         "label": "ラベル",
         "labelHelp": "後でこのトークンを識別するための名前。",
         "labelPlaceholder": "例: CI パイプライン",
+        "scope": "権限範囲",
+        "scopeHelp": "このトークンでできること: 読み取り専用、読み取りと書き込み、またはフルアクセス（削除も可能）。",
         "create": "トークンを作成"
       },
+      "scopes": {
+        "read": "読み取り専用",
+        "write": "読み取りと書き込み",
+        "admin": "フルアクセス"
+      },
       "toast": {
         "loadFailed": "APIトークンを読み込めませんでした",
         "created": "トークンを作成しました",

package/i18n/locales/pl.json

@@ -1359,6 +1359,9 @@
       "avg": "Średnia",
       "min": "Min",
       "max": "Maks",
+      "p50": "p50",
+      "p90": "p90",
+      "p99": "p99",
       "empty": "Brak ukończonych uruchomień w tym okresie."
     },
     "live": {
@@ -2300,8 +2303,15 @@
         "label": "Etykieta",
         "labelHelp": "Nazwa, po której później rozpoznasz ten token.",
         "labelPlaceholder": "np. potok CI",
+        "scope": "Zakres",
+        "scopeHelp": "Co może ten token: tylko odczyt, odczyt i zapis lub pełny dostęp (który pozwala także na usuwanie).",
         "create": "Utwórz token"
       },
+      "scopes": {
+        "read": "Tylko odczyt",
+        "write": "Odczyt i zapis",
+        "admin": "Pełny dostęp"
+      },
       "toast": {
         "loadFailed": "Nie udało się załadować tokenów API",
         "created": "Token utworzony",

package/i18n/locales/tr.json

@@ -1359,6 +1359,9 @@
       "avg": "Ortalama",
       "min": "En düşük",
       "max": "En yüksek",
+      "p50": "p50",
+      "p90": "p90",
+      "p99": "p99",
       "empty": "Bu aralıkta tamamlanmış çalıştırma yok."
     },
     "live": {
@@ -2422,8 +2425,15 @@
         "label": "Etiket",
         "labelHelp": "Bu belirteci daha sonra tanımak için bir ad.",
         "labelPlaceholder": "örn. CI hattı",
+        "scope": "Kapsam",
+        "scopeHelp": "Bu belirtecin yapabilecekleri: yalnızca okuma, okuma ve yazma ya da tam erişim (silmeye de izin verir).",
         "create": "Belirteç oluştur"
       },
+      "scopes": {
+        "read": "Yalnızca okuma",
+        "write": "Okuma ve yazma",
+        "admin": "Tam erişim"
+      },
       "toast": {
         "loadFailed": "API belirteçleri yüklenemedi",
         "created": "Belirteç oluşturuldu",

package/i18n/locales/uk.json

@@ -1359,6 +1359,9 @@
       "avg": "Середня",
       "min": "Мін",
       "max": "Макс",
+      "p50": "p50",
+      "p90": "p90",
+      "p99": "p99",
       "empty": "У цьому періоді немає завершених запусків."
     },
     "live": {
@@ -2300,8 +2303,15 @@
         "label": "Мітка",
         "labelHelp": "Назва, за якою ви пізніше впізнаєте цей токен.",
         "labelPlaceholder": "напр. конвеєр CI",
+        "scope": "Обсяг доступу",
+        "scopeHelp": "Що може цей токен: лише читання, читання та запис або повний доступ (який також дозволяє видалення).",
         "create": "Створити токен"
       },
+      "scopes": {
+        "read": "Лише читання",
+        "write": "Читання та запис",
+        "admin": "Повний доступ"
+      },
       "toast": {
         "loadFailed": "Не вдалося завантажити токени API",
         "created": "Токен створено",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.124.0",
+  "version": "0.126.0",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "valibot": "^1.4.2",
     "vue": "3.5.39",
     "wretch": "^3.0.9",
-    "@cat-factory/contracts": "0.141.0"
+    "@cat-factory/contracts": "0.143.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.2",