@swiss-ai-hub/web 0.303.0 → 0.304.0

package/components/Role/AccessCapabilities.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="flex flex-col gap-1 rounded-lg border border-surface-200 p-6 dark:border-surface-700">
+    <div class="flex items-center gap-2">
+      <span class="text-xl font-bold">
+        {{ readonly ? t('role.capabilities_readonly_title') : t('role.capabilities_title') }}
+      </span>
+      <ProgressSpinner
+        v-if="capabilitiesAreLoading"
+        style="width: 1rem; height: 1rem"
+        stroke-width="6"
+      />
+    </div>
+    <p class="text-xs text-surface-500 dark:text-surface-400">
+      {{ readonly ? t('role.capabilities_readonly_subtitle') : t('role.capabilities_subtitle') }}
+    </p>
+
+    <div class="mt-5 flex flex-col gap-10">
+      <AccessCapabilityGroup
+        v-for="group in capabilities?.groups ?? []"
+        :key="group.key"
+        :group="group"
+        :depth="0"
+        :readonly="readonly"
+        @add="(rule) => emit('add', rule)"
+        @remove="(rule) => emit('remove', rule)"
+      />
+    </div>
+    <p
+      v-if="!capabilitiesAreLoading && !(capabilities?.groups?.length)"
+      class="text-sm italic text-surface-500 dark:text-surface-400"
+    >
+      {{ t('role.capabilities_empty') }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import AccessCapabilityGroup from './AccessCapabilityGroup.vue'
+
+import { useAccessCapabilities } from '@/composables/access/useAccessCapabilities'
+
+const { t } = useI18n()
+
+const props = withDefaults(defineProps<{
+  rules: string[]
+  restrictToTenant?: boolean
+  isSysAdmin?: boolean
+  readonly?: boolean
+}>(), {
+  restrictToTenant: true,
+  isSysAdmin: false,
+  readonly: false,
+})
+
+const emit = defineEmits<{
+  add: [rule: string]
+  remove: [rule: string]
+}>()
+
+const { capabilities, capabilitiesAreLoading } = useAccessCapabilities(
+  () => props.rules,
+  () => props.restrictToTenant,
+  () => props.isSysAdmin,
+)
+</script>

package/components/Role/AccessCapabilityGroup.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="flex flex-col">
+    <!-- Service header: icon + name + hairline rule -->
+    <div
+      v-if="depth === 0"
+      class="flex items-center gap-2.5 border-b border-surface-200 pb-2.5 dark:border-surface-800"
+    >
+      <Icon
+        v-if="group.icon"
+        :name="group.icon"
+        size="1.4em"
+        class="text-surface-500 dark:text-surface-400"
+      />
+      <span class="text-lg font-bold">{{ group.label }}</span>
+    </div>
+
+    <!-- Class subtitle -->
+    <div
+      v-else-if="depth === 1"
+      class="flex items-center gap-2"
+    >
+      <Icon
+        v-if="group.icon"
+        :name="group.icon"
+        size="1.2em"
+        class="text-surface-500 dark:text-surface-400"
+      />
+      <span class="text-base font-semibold text-surface-700 dark:text-surface-200">
+        {{ group.label }}
+      </span>
+    </div>
+
+    <!-- Instance subtitle -->
+    <div
+      v-else
+      class="flex items-center gap-2 text-sm font-medium text-surface-600 dark:text-surface-300"
+    >
+      <span class="size-1.5 rounded-full bg-surface-300 dark:bg-surface-600" />
+      {{ group.label }}
+    </div>
+
+    <!-- Capabilities -->
+    <div
+      class="flex flex-col gap-1"
+      :class="depth === 0 ? 'mt-3' : 'mt-2'"
+    >
+      <label
+        v-for="cap in group.capabilities ?? []"
+        :key="cap.key"
+        class="group/cap flex items-start gap-3 rounded-md py-1 pr-1"
+        :class="readonly || !cap.toggleable || cap.locked ? 'cursor-default' : 'cursor-pointer'"
+      >
+        <Checkbox
+          :model-value="cap.granted"
+          binary
+          :disabled="readonly || !cap.toggleable || cap.locked"
+          size="small"
+          class="mt-0.5"
+          @update:model-value="(value) => onToggle(cap, value)"
+        />
+        <span class="flex min-w-0 flex-1 flex-col">
+          <span class="flex items-center gap-1.5 text-sm leading-tight">
+            {{ cap.label }}
+            <template v-if="!readonly">
+              <i
+                v-if="cap.locked"
+                v-tooltip.top="t('role.capability_locked')"
+                class="pi pi-lock text-[10px] text-surface-400"
+              />
+              <i
+                v-else-if="!cap.toggleable"
+                v-tooltip.top="t('role.capability_readonly')"
+                class="pi pi-eye text-[10px] text-surface-400"
+              />
+            </template>
+          </span>
+          <span class="mt-0.5 text-xs leading-snug text-surface-500 dark:text-surface-400">{{ cap.description }}</span>
+        </span>
+        <code
+          v-if="cap.rule"
+          class="mt-0.5 shrink-0 font-mono text-[11px] text-surface-300 transition-colors group-hover/cap:text-surface-500 dark:text-surface-600 dark:group-hover/cap:text-surface-400"
+        >{{ cap.rule }}</code>
+      </label>
+    </div>
+
+    <!-- Nested groups (classes, then instances) -->
+    <div
+      v-if="group.groups?.length"
+      class="mt-4 flex flex-col gap-6"
+      :class="depth === 0 ? 'pl-1' : 'pl-4'"
+    >
+      <AccessCapabilityGroup
+        v-for="sub in group.groups ?? []"
+        :key="sub.key"
+        :group="sub"
+        :depth="depth + 1"
+        :readonly="readonly"
+        @add="(rule) => emit('add', rule)"
+        @remove="(rule) => emit('remove', rule)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import type { Capability, CapabilityGroup } from '@core/sdk/client'
+
+const { t } = useI18n()
+
+const props = withDefaults(defineProps<{
+  group: CapabilityGroup
+  depth?: number
+  readonly?: boolean
+}>(), {
+  depth: 0,
+  readonly: false,
+})
+
+const emit = defineEmits<{
+  add: [rule: string]
+  remove: [rule: string]
+}>()
+
+const onToggle = (cap: Capability, value: boolean) => {
+  if (props.readonly || !cap.rule) return
+  emit(value ? 'add' : 'remove', cap.rule)
+}
+</script>

package/components/Role/AccessRulesEditor.vue

@@ -1,116 +1,193 @@
 <template>
-  <div class="flex flex-col gap-2 rounded-lg border border-surface-200 p-4 dark:border-surface-700">
-    <span class="flex items-center gap-1 font-semibold">
-      {{ t('role.access_rules') }}
-      <i
-        class="pi pi-question-circle text-surface-400"
-        @mouseenter="(e: Event) => accessRulesHelp?.show(e)"
-        @mouseleave="() => accessRulesHelp?.hide()"
-      />
-      <Popover ref="accessRulesHelp">
-        <div class="text-sm font-normal">
-          <p class="mb-2">
-            {{ t('role.access_rules_help_intro') }}
-          </p>
-          <ul class="flex flex-col gap-1">
-            <li class="whitespace-nowrap"><Badge
-              value="aihub.user.agent.>"
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-2 rounded-lg border border-surface-200 p-4 dark:border-surface-700">
+      <span class="flex items-center gap-1 font-semibold">
+        {{ t('role.access_rules') }}
+        <i
+          class="pi pi-question-circle text-surface-400"
+          @mouseenter="(e: Event) => accessRulesHelp?.show(e)"
+          @mouseleave="() => accessRulesHelp?.hide()"
+        />
+        <Popover ref="accessRulesHelp">
+          <div class="text-sm font-normal">
+            <p class="mb-2">
+              {{ t('role.access_rules_help_intro') }}
+            </p>
+            <ul class="flex flex-col gap-1">
+              <li class="whitespace-nowrap"><Badge
+                value="aihub.user.agent.>"
+                severity="secondary"
+                size="small"
+              /> — {{ t('role.access_rules_help_all_agents') }}</li>
+              <li class="whitespace-nowrap"><Badge
+                value="aihub.user.agent.MyAgent.*"
+                severity="secondary"
+                size="small"
+              /> — {{ t('role.access_rules_help_agent_instances') }}</li>
+              <li class="whitespace-nowrap"><Badge
+                value="aihub.user.service.knowledge"
+                severity="secondary"
+                size="small"
+              /> — {{ t('role.access_rules_help_service') }}</li>
+              <li class="whitespace-nowrap"><Badge
+                value="aihub.admin.>"
+                severity="secondary"
+                size="small"
+              /> — {{ t('role.access_rules_help_admin') }}</li>
+            </ul>
+          </div>
+        </Popover>
+      </span>
+      <DataTable
+        v-if="rules.length"
+        :value="tableRows"
+        data-key="id"
+        size="small"
+      >
+        <Column field="accessRule">
+          <template #body="{ data }">
+            <Badge
+              :value="data.accessRule"
               severity="secondary"
-              size="small"
-            /> — {{ t('role.access_rules_help_all_agents') }}</li>
-            <li class="whitespace-nowrap"><Badge
-              value="aihub.user.agent.MyAgent.*"
+              class="border border-gray-400/30"
+            />
+          </template>
+        </Column>
+        <Column class="w-24 !text-end">
+          <template #body="{ data }">
+            <Tag
+              v-if="isNew(data.accessRule)"
+              :value="t('role.is_new')"
+              severity="success"
+            />
+          </template>
+        </Column>
+        <Column class="w-12">
+          <template #body="{ data }">
+            <Button
+              icon="pi pi-times"
               severity="secondary"
+              variant="text"
+              rounded
               size="small"
-            /> — {{ t('role.access_rules_help_agent_instances') }}</li>
-            <li class="whitespace-nowrap"><Badge
-              value="aihub.user.service.knowledge"
-              severity="secondary"
-              size="small"
-            /> — {{ t('role.access_rules_help_service') }}</li>
-            <li class="whitespace-nowrap"><Badge
-              value="aihub.admin.>"
-              severity="secondary"
-              size="small"
-            /> — {{ t('role.access_rules_help_admin') }}</li>
-          </ul>
+              @click="remove(data.accessRule)"
+            />
+          </template>
+        </Column>
+      </DataTable>
+      <span
+        v-else
+        class="text-sm italic text-muted-color"
+      >
+        {{ t('role.no_access_rules') }}
+      </span>
+      <div class="flex items-center gap-2">
+        <Button
+          type="button"
+          icon="pi pi-th-large"
+          :label="t('role.presets_button')"
+          severity="secondary"
+          outlined
+          size="small"
+          @click="(e: Event) => presetsPopover?.toggle(e)"
+        />
+        <InputText
+          v-model="newRule"
+          :placeholder="t('role.add_access_role')"
+          size="small"
+          class="flex-1"
+          @keyup.enter="add"
+        />
+        <Button
+          type="button"
+          icon="pi pi-plus"
+          :label="t('role.add_button')"
+          size="small"
+          :disabled="!newRule"
+          @click="add"
+        />
+      </div>
+
+      <Popover ref="presetsPopover">
+        <div class="flex max-h-96 w-80 flex-col gap-3 overflow-y-auto">
+          <span class="font-semibold">{{ t('role.presets_title') }}</span>
+          <div
+            v-for="group in presetGroups"
+            :key="group.category"
+            class="flex flex-col gap-1"
+          >
+            <span class="text-xs font-medium uppercase text-muted-color">{{ group.label }}</span>
+            <button
+              v-for="preset in group.presets"
+              :key="preset.rule"
+              type="button"
+              class="flex flex-col items-start gap-1 rounded-md p-2 text-left hover:bg-surface-100 disabled:opacity-40 dark:hover:bg-surface-800"
+              :disabled="rules.includes(preset.rule)"
+              @click="addPreset(preset.rule)"
+            >
+              <span class="flex items-center gap-2 text-sm font-medium">
+                {{ preset.name }}
+                <i
+                  v-if="rules.includes(preset.rule)"
+                  class="pi pi-check text-green-500"
+                />
+              </span>
+              <span class="text-xs text-muted-color">{{ preset.description }}</span>
+              <Badge
+                :value="preset.rule"
+                severity="secondary"
+                size="small"
+              />
+            </button>
+          </div>
         </div>
       </Popover>
-    </span>
-    <DataTable
-      v-if="rules.length"
-      :value="tableRows"
-      data-key="id"
-      size="small"
-    >
-      <Column field="accessRule">
-        <template #body="{ data }">
-          <Badge
-            :value="data.accessRule"
-            severity="secondary"
-            class="border border-gray-400/30"
-          />
-        </template>
-      </Column>
-      <Column class="w-24 !text-end">
-        <template #body="{ data }">
-          <Tag
-            v-if="isNew(data.accessRule)"
-            :value="t('role.is_new')"
-            severity="success"
-          />
-        </template>
-      </Column>
-      <Column class="w-12">
-        <template #body="{ data }">
-          <Button
-            icon="pi pi-times"
-            severity="secondary"
-            variant="text"
-            rounded
-            size="small"
-            @click="remove(data.accessRule)"
-          />
-        </template>
-      </Column>
-    </DataTable>
-    <span
-      v-else
-      class="text-sm italic text-muted-color"
-    >
-      {{ t('role.no_access_rules') }}
-    </span>
-    <div class="flex items-center gap-2">
-      <InputText
-        v-model="newRule"
-        :placeholder="t('role.add_access_role')"
-        size="small"
-        class="flex-1"
-        @keyup.enter="add"
-      />
-      <Button
-        type="button"
-        icon="pi pi-plus"
-        :label="t('role.add_button')"
-        size="small"
-        :disabled="!newRule"
-        @click="add"
-      />
     </div>
+
+    <AccessCapabilities
+      :rules="rules"
+      :restrict-to-tenant="restrictToTenant"
+      @add="addPreset"
+      @remove="remove"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
+import AccessCapabilities from './AccessCapabilities.vue'
+
+import type { AccessPresetDto } from '@core/sdk/client'
+
+import useAccessPresets from '@/composables/access/useAccessPresets'
+
 const { t } = useI18n()
 
 const accessRulesHelp = ref()
+const presetsPopover = ref()
 const rules = defineModel<string[]>('rules', { required: true })
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   initialRules: string[]
-}>()
+  restrictToTenant?: boolean
+}>(), {
+  restrictToTenant: true,
+})
+
+const { presets } = useAccessPresets()
+
+const presetGroups = computed<{ category: string, label: string, presets: AccessPresetDto[] }[]>(() => {
+  const order = ['everything', 'agents', 'processes', 'knowledge']
+  const byCategory = new Map<string, AccessPresetDto[]>()
+  for (const preset of presets.value ?? []) {
+    if (!byCategory.has(preset.category)) byCategory.set(preset.category, [])
+    byCategory.get(preset.category)!.push(preset)
+  }
+  return [...byCategory.keys()]
+    .sort((a, b) => order.indexOf(a) - order.indexOf(b))
+    .map(category => ({ category, label: t(`role.preset_category_${category}`), presets: byCategory.get(category)! }))
+})
 
 const tableRows = computed(() =>
   rules.value.map(accessRule => ({ accessRule, id: accessRule })),
@@ -122,10 +199,14 @@ const isNew = (rule: string) => !props.initialRules.includes(rule)
 
 const add = () => {
   if (!newRule.value) return
-  rules.value.push(newRule.value)
+  if (!rules.value.includes(newRule.value)) rules.value.push(newRule.value)
   newRule.value = ''
 }
 
+const addPreset = (rule: string) => {
+  if (!rules.value.includes(rule)) rules.value.push(rule)
+}
+
 const remove = (rule: string) => {
   rules.value = rules.value.filter(r => r !== rule)
 }

package/composables/access/useAccessCapabilities.ts

@@ -0,0 +1,49 @@
+import { type AccessCapabilitiesResponse, getAccessCapabilities } from '@core/sdk/client'
+
+import type { MaybeRefOrGetter } from 'vue'
+
+/**
+ * Evaluates the capability catalog (services / agents / processes) against a draft rule set.
+ *
+ * Keyed on the rules so it refetches whenever they change — ticking a capability adds its exact rule,
+ * which re-evaluates the whole catalog (e.g. a broad rule then locks the capabilities it covers).
+ */
+export function useAccessCapabilities(
+  rules: MaybeRefOrGetter<string[]>,
+  restrictToTenant: MaybeRefOrGetter<boolean> = true,
+  // The read-only user view passes the viewed user's AIHubSysAdmin flag: a sysadmin holds admin on
+  // everything via the short-circuit, not via rules, so the catalog must be evaluated with it set.
+  isSysAdmin: MaybeRefOrGetter<boolean> = false,
+) {
+  const { tenantId } = useTenant()
+  // The tenant-ceiling editor (configure-new-tenant) runs on a route with no tenant param. With
+  // restrict_to_tenant=false the catalog is tenant-independent, so 'active' is a safe path fallback.
+  const targetTenantId = computed(() => tenantId.value ?? 'active')
+
+  const {
+    data: capabilities,
+    isPending: capabilitiesAreLoading,
+  } = useQuery<AccessCapabilitiesResponse>({
+    key: () => [
+      'tenant', targetTenantId.value, 'access-capabilities',
+      toValue(restrictToTenant), toValue(isSysAdmin), JSON.stringify(toValue(rules)),
+    ],
+    staleTime: 0,
+    query: async () => {
+      return await getAccessCapabilities({
+        composable: '$fetch',
+        path: { tenant_id: targetTenantId.value },
+        body: {
+          access_rules: toValue(rules),
+          restrict_to_tenant: toValue(restrictToTenant),
+          is_sys_admin: toValue(isSysAdmin),
+        },
+      })
+    },
+  })
+
+  return {
+    capabilities,
+    capabilitiesAreLoading,
+  }
+}

package/composables/access/useAccessPresets.ts

@@ -0,0 +1,28 @@
+import { type AccessPresetDto, getAccessPresets } from '@core/sdk/client'
+import { minutesToMilliseconds } from 'date-fns'
+
+export default defineQuery(() => {
+  const { tenantId } = useTenant()
+  // Presets are tenant-independent; fall back to 'active' so the editor works on the
+  // configure-new-tenant route (which has no tenant param). See useAccessCapabilities.
+  const targetTenantId = computed(() => tenantId.value ?? 'active')
+
+  const {
+    data: presets,
+    isPending: presetsAreLoading,
+  } = useQuery<AccessPresetDto[]>({
+    key: () => ['tenant', targetTenantId.value, 'access-presets'],
+    staleTime: minutesToMilliseconds(30),
+    query: async () => {
+      return await getAccessPresets({
+        composable: '$fetch',
+        path: { tenant_id: targetTenantId.value },
+      })
+    },
+  })
+
+  return {
+    presets,
+    presetsAreLoading,
+  }
+})

package/i18n/locales/de.yaml

@@ -631,6 +631,23 @@ role:
   access_rules_help_agent_instances: Alle Instanzen von MyAgent
   access_rules_help_service: Knowledge-Service
   access_rules_help_admin: Admin-Zugriff auf alles
+  presets_button: Vorlagen
+  presets_title: Zugriffsvorlagen
+  preset_category_everything: Alles
+  preset_category_agents: Agenten
+  preset_category_processes: Prozesse
+  preset_category_knowledge: Wissen
+  capabilities_title: Was diese Regeln gewähren
+  capabilities_subtitle: Aktiviere eine Fähigkeit, um sie zu gewähren. Gesperrte Einträge
+    sind durch eine breitere Regel abgedeckt.
+  capabilities_readonly_title: Effektiver Zugriff
+  capabilities_readonly_subtitle: Was dieser Benutzer tun kann, basierend auf seinen
+    Rollen und innerhalb der Grenzen des Tenants.
+  capabilities_empty: Dieser Benutzer hat keinen Zugriff.
+  capability_locked: Durch eine breitere Regel gewährt — entferne diese Regel, um
+    dies zu ändern.
+  capability_readonly: Keine einzelne Regel gewährt dies allein — nutze eine Vorlage
+    oder eine breitere Regel.
   pattern_help_intro: 'Muster verwenden Platzhalter für Agenten:'
   pattern_help_all: Alle Agenten
   pattern_help_wildcard: Alle Instanzen von MyAgent

package/i18n/locales/en.yaml

@@ -621,6 +621,22 @@ role:
   access_rules_help_agent_instances: All instances of MyAgent
   access_rules_help_service: Knowledge service
   access_rules_help_admin: Admin access to everything
+  presets_button: Presets
+  presets_title: Access presets
+  preset_category_everything: Everything
+  preset_category_agents: Agents
+  preset_category_processes: Processes
+  preset_category_knowledge: Knowledge
+  capabilities_title: What these rules grant
+  capabilities_subtitle: Tick a capability to grant it. Locked items are covered by
+    a broader rule.
+  capabilities_readonly_title: Effective access
+  capabilities_readonly_subtitle: What this user can do, based on their roles and
+    within the tenant's limits.
+  capabilities_empty: This user has no access.
+  capability_locked: Granted by a broader rule — remove that rule to change this.
+  capability_readonly: No single rule grants this on its own — use a preset or a broader
+    rule.
   pattern_help_intro: 'Patterns use wildcards to match agents:'
   pattern_help_all: All agents
   pattern_help_wildcard: All instances of MyAgent

package/i18n/locales/fr.yaml

@@ -629,6 +629,23 @@ role:
   access_rules_help_agent_instances: Toutes les instances de MyAgent
   access_rules_help_service: Service Knowledge
   access_rules_help_admin: Accès admin à tout
+  presets_button: Modèles
+  presets_title: Modèles d'accès
+  preset_category_everything: Tout
+  preset_category_agents: Agents
+  preset_category_processes: Processus
+  preset_category_knowledge: Connaissances
+  capabilities_title: Ce que ces règles accordent
+  capabilities_subtitle: Cochez une capacité pour l'accorder. Les éléments verrouillés
+    sont couverts par une règle plus large.
+  capabilities_readonly_title: Accès effectif
+  capabilities_readonly_subtitle: Ce que cet utilisateur peut faire, selon ses rôles
+    et dans les limites du tenant.
+  capabilities_empty: Cet utilisateur n'a aucun accès.
+  capability_locked: Accordé par une règle plus large — supprimez cette règle pour
+    changer ceci.
+  capability_readonly: Aucune règle unique ne l'accorde — utilisez un modèle ou une
+    règle plus large.
   pattern_help_intro: 'Les modèles utilisent des jokers pour les agents :'
   pattern_help_all: Tous les agents
   pattern_help_wildcard: Toutes les instances de MyAgent

package/i18n/locales/it.yaml

@@ -626,6 +626,23 @@ role:
   access_rules_help_agent_instances: Tutte le istanze di MyAgent
   access_rules_help_service: Servizio Knowledge
   access_rules_help_admin: Accesso admin a tutto
+  presets_button: Modelli
+  presets_title: Modelli di accesso
+  preset_category_everything: Tutto
+  preset_category_agents: Agenti
+  preset_category_processes: Processi
+  preset_category_knowledge: Conoscenza
+  capabilities_title: Cosa concedono queste regole
+  capabilities_subtitle: Seleziona una capacità per concederla. Gli elementi bloccati
+    sono coperti da una regola più ampia.
+  capabilities_readonly_title: Accesso effettivo
+  capabilities_readonly_subtitle: Cosa può fare questo utente, in base ai suoi ruoli
+    e nei limiti del tenant.
+  capabilities_empty: Questo utente non ha accesso.
+  capability_locked: Concesso da una regola più ampia — rimuovi quella regola per
+    cambiare questo.
+  capability_readonly: Nessuna singola regola lo concede — usa un modello o una regola
+    più ampia.
   pattern_help_intro: 'I modelli usano caratteri jolly per gli agenti:'
   pattern_help_all: Tutti gli agenti
   pattern_help_wildcard: Tutte le istanze di MyAgent