@swiss-ai-hub/web 0.290.11

package/layouts/anonymous.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>

package/layouts/default.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="flex min-h-screen w-full flex-row bg-white dark:bg-surface-900">
+    <div class="fixed flex h-screen w-[50px] flex-col items-center justify-between bg-surface-50 dark:bg-surface-950">
+      <div class="flex h-[50px] w-full items-center justify-center">
+        <ServiceSelection />
+      </div>
+      <div class="flex flex-col justify-center gap-2">
+        <NuxtLink
+          v-for="app in nonAdminApps"
+          :key="app.path"
+          :to="app.path === '/' ? tenantPath('/') : tenantPath(app.path)"
+          class="flex h-[50px] w-full items-center justify-center"
+        >
+          <Button
+            v-tooltip="{ value: app.label, showDelay: 0 }"
+            rounded
+            :aria-label="app.label"
+            :variant="appIsActive(app) ? undefined : 'text'"
+            size="large"
+          >
+            <Icon
+              :name="app.icon"
+              class="h-[1.7rem] w-[1.2rem]"
+            />
+          </Button>
+        </NuxtLink>
+      </div>
+      <div>
+        <UserSettings />
+      </div>
+    </div>
+    <div class="w-full pl-[50px]">
+      <div class="fixed z-50 flex h-[50px] w-full items-center justify-between bg-surface-50 pr-[50px] dark:bg-surface-950">
+        <Breadcrumb
+          class="!bg-transparent text-xs opacity-70"
+          :home="apps[0]"
+          :model="breadcrumbItems"
+        >
+          <template #item="{ item }">
+            <NuxtLink
+              :to="item.route"
+              class="hover:underline"
+            >
+              {{ item.label }}
+            </NuxtLink>
+          </template>
+        </Breadcrumb>
+        <img
+          :src="logo"
+          alt="AI Hub"
+          class="h-[25px]"
+        >
+        <div class="flex h-full items-center overflow-hidden">
+          <UserBar />
+        </div>
+      </div>
+      <div class="h-[50px] w-full" />
+      <div v-if="online">
+        <slot />
+      </div>
+      <div
+        v-else
+        class="flex h-screen w-full items-center justify-center"
+      >
+        <AppLoader />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import logo from '@core/assets/images/logo.png'
+import { getHealth } from '@core/sdk/client'
+
+import type { MenuItem } from 'primevue/menuitem'
+
+const route = useRoute()
+const tenantPath = useTenantPath()
+
+const online = ref<boolean>(false)
+
+const { apps } = useApps()
+
+const nonAdminApps = computed<MenuItem>(() => {
+  return apps.value.filter((app: MenuItem) => !app.isAdmin)
+})
+
+const appIsActive = (app: MenuItem) => {
+  const resolvedPath = app.path === '/' ? tenantPath('/') : tenantPath(app.path)
+  if (app.path === '/') {
+    return route.path === resolvedPath
+  }
+  return route.path.startsWith(resolvedPath)
+}
+
+const breadcrumbItems = computed(() => {
+  const segments = route.path.split('/').filter(Boolean)
+  const prefixSegments = segments.slice(0, 2)
+  const contentSegments = segments.slice(2)
+  return contentSegments.map((label: string, index: number) => ({
+    label,
+    route: '/' + [...prefixSegments, ...contentSegments.slice(0, index + 1)].join('/'),
+  }))
+})
+
+try {
+  const response = await getHealth({
+    composable: '$fetch',
+    baseURL: '/api/v1',
+  })
+  online.value = response.code == 200
+}
+catch {
+  online.value = false
+}
+</script>

package/middleware/auth.global.ts

@@ -0,0 +1,62 @@
+/**
+ * Tracks the last tenant synced with the backend to avoid redundant PUT calls
+ * on every navigation within the same tenant.
+ */
+let lastSyncedTenant: string | null = null
+
+const REDIRECT_KEY = 'aihub_redirect_after_login'
+
+export default defineNuxtRouteMiddleware(async (to) => {
+  const { $auth, $i18n } = useNuxtApp()
+  const locale = $i18n.locale.value
+
+  const noAuthPaths = [
+    `/${locale}/auth/login`,
+    `/${locale}/auth/callback`,
+    `/${locale}/auth/renew`,
+  ]
+
+  // No auth check for public paths (normalize trailing slashes on both sides)
+  const normalize = (p: string) => (p.endsWith('/') ? p.slice(0, -1) : p)
+  const normalizedPath = normalize(to.path)
+  if (noAuthPaths.some(p => normalize(p) === normalizedPath)) {
+    return
+  }
+
+  try {
+    const user = await $auth.getUser()
+
+    const isAuthPath = to.path.includes('/auth/')
+
+    if (!user) {
+      if (import.meta.client && to.fullPath !== '/' && !isAuthPath) {
+        sessionStorage.setItem(REDIRECT_KEY, to.fullPath)
+      }
+      return navigateTo(`/${locale}/auth/login`)
+    }
+
+    if (user.expired) {
+      try {
+        await $auth.signinSilent()
+      }
+      catch {
+        if (import.meta.client && to.fullPath !== '/' && !isAuthPath) {
+          sessionStorage.setItem(REDIRECT_KEY, to.fullPath)
+        }
+        return navigateTo(`/${locale}/auth/login`)
+      }
+    }
+
+    // Tenant sync: track which tenant the frontend is operating in
+    const urlTenant = to.params.tenant as string | undefined
+    if (urlTenant && urlTenant !== lastSyncedTenant) {
+      lastSyncedTenant = urlTenant
+    }
+
+    return
+  }
+  catch (error) {
+    console.error('Error in auth middleware:', error)
+    return navigateTo(`/${locale}/auth/login`)
+  }
+})

package/nuxt.config.ts

@@ -0,0 +1,145 @@
+import { fileURLToPath } from 'node:url'
+
+import { defineNuxtConfig } from 'nuxt/config'
+
+export const wrappedPrimeInputs: string[] = [
+  'AutoComplete',
+  'CascadeSelect',
+  'Checkbox',
+  'Chip',
+  'ColorPicker',
+  'DatePicker',
+  'Editor',
+  'InputMask',
+  'InputNumber',
+  'InputOtp',
+  'InputText',
+  'Knob',
+  'Listbox',
+  'MultiSelect',
+  'Password',
+  'RadioButton',
+  'Rating',
+  'Select',
+  'SelectButton',
+  'Slider',
+  'Textarea',
+  'ToggleButton',
+  'ToggleSwitch',
+  'TreeSelect',
+]
+
+export default defineNuxtConfig({
+  modules: [
+    '@vueuse/nuxt',
+    '@pinia/nuxt',
+    '@vee-validate/nuxt',
+    '@nuxtjs/tailwindcss',
+    '@nuxtjs/i18n',
+    '@nuxt/icon',
+    '@nuxt/fonts',
+    '@nuxtjs/robots',
+    '@pinia/colada-nuxt',
+    '@primevue/nuxt-module',
+    '@nuxtjs/mdc',
+    '@sfxcode/formkit-primevue-nuxt',
+  ],
+
+  ssr: false,
+
+  imports: {
+    dirs: [
+      'composables',
+      'composables/**',
+    ],
+  },
+
+  app: {
+    head: {
+      // Runtime config for the static SPA. nginx envsubst's config.template.js
+      // into /config.js at container start; this classic <script> in <head>
+      // runs synchronously before Nuxt's deferred module entry, so
+      // window.__AIHUB_CONFIG__ exists before any plugin (see
+      // plugins/0.runtime-config.client.ts). Inherited by layer extenders.
+      // Build-time gated: dev has no nginx and no /config.js, so omit the tag
+      // (avoids a dev 404). Container images are always built with ENV != dev.
+      script: process.env.ENV === 'dev'
+        ? []
+        : [{ src: '/config.js', tagPosition: 'head' as const }],
+    },
+  },
+
+  css: [
+    fileURLToPath(new URL('./assets/css/main.css', import.meta.url)),
+  ],
+
+  mdc: {
+    components: {
+      prose: false,
+      map: {
+        img: 'ResolveImageComponent',
+      },
+    },
+  },
+
+  alias: {
+    '@core': fileURLToPath(new URL('./', import.meta.url)),
+  },
+
+  compatibilityDate: '2025-01-18',
+
+  formkit: {
+    configFile: fileURLToPath(new URL('./formkit.config', import.meta.url)),
+  },
+
+  formkitPrimevue: {
+    includePrimeIcons: true,
+    includeStyles: true,
+    installFormKit: true,
+    installI18N: true,
+  },
+
+  i18n: {
+    strategy: 'prefix',
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieKey: 'i18n_redirected',
+      redirectOn: 'root',
+    },
+    locales: [
+      {
+        code: 'en',
+        file: 'en.yaml',
+        name: 'English',
+      },
+      {
+        code: 'de',
+        file: 'de.yaml',
+        name: 'Deutsch',
+      },
+      {
+        code: 'it',
+        file: 'it.yaml',
+        name: 'Italiano',
+      },
+      {
+        code: 'fr',
+        file: 'fr.yaml',
+        name: 'Français',
+      },
+    ],
+    lazy: true,
+    defaultLocale: 'en',
+  },
+
+  primevue: {
+    autoImport: true,
+    components: {
+      exclude: [...wrappedPrimeInputs, 'Button', 'Form', 'FormField', 'Chart'],
+    },
+    importTheme: {
+      from: fileURLToPath(new URL('./themes/aihub-theme.ts', import.meta.url)),
+    },
+  },
+
+})

package/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "@swiss-ai-hub/web",
+  "license": "AGPL-3.0-or-later",
+  "author": "bbv Software Services AG (https://www.bbv.ch)",
+  "type": "module",
+  "version": "0.290.11",
+  "description": "Swiss AI Hub - Admin & Management UI (Nuxt 3 layer)",
+  "main": "./nuxt.config.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bbvch-ai/aihub-core.git",
+    "directory": "packages/web"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "app.config.ts",
+    "app.vue",
+    "formkit.config.ts",
+    "nuxt.config.ts",
+    "tailwind.config.mjs",
+    "assets/",
+    "components/",
+    "composables/",
+    "i18n/",
+    "layouts/",
+    "middleware/",
+    "pages/",
+    "plugins/",
+    "sdk/",
+    "themes/",
+    "types/"
+  ],
+  "scripts": {
+    "dev": "nuxi prepare && nuxi dev .app --port 3333 --dotenv ../../../.env",
+    "dev:prepare": "nuxi prepare && nuxt prepare .app",
+    "build": "nuxt generate .app",
+    "preview": "nuxt preview .app",
+    "lint": "(test -f .app/.nuxt/eslint.config.mjs || nuxi prepare .app) && eslint . --fix",
+    "generate-sdk": "openapi-ts"
+  },
+  "dependencies": {
+    "@formkit/i18n": "^1.7.2",
+    "@formkit/nuxt": "^2.0.0",
+    "@hey-api/nuxt": "^0.2.1",
+    "@nuxt/fonts": "^0.14.0",
+    "@nuxt/icon": "^1.15.0",
+    "@nuxtjs/i18n": "10.3.0",
+    "@nuxtjs/mdc": "^0.22.0",
+    "@nuxtjs/robots": "^6.0.8",
+    "@nuxtjs/tailwindcss": "^6.14.0",
+    "@pinia/colada": "^1.3.0",
+    "@pinia/colada-nuxt": "^1.0.1",
+    "@pinia/nuxt": "^0.11.3",
+    "@primeuix/themes": "1.2.5",
+    "@primevue/forms": "4.5.5",
+    "@primevue/nuxt-module": "4.5.5",
+    "@sfxcode/formkit-primevue": "4.0.0",
+    "@sfxcode/formkit-primevue-nuxt": "^1.7.0",
+    "@sigma/edge-curve": "^3.1.0",
+    "@vee-validate/nuxt": "^4.15.1",
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/controls": "^1.1.3",
+    "@vue-flow/core": "^1.48.2",
+    "@vue-flow/minimap": "^1.5.4",
+    "@vueuse/integrations": "^13.9.0",
+    "@vueuse/math": "^13.9.0",
+    "@vueuse/nuxt": "^13.9.0",
+    "@vueuse/router": "^13.9.0",
+    "apexcharts": "^4.7.0",
+    "change-case": "^5.4.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "graphology": "^0.26.0",
+    "graphology-layout-forceatlas2": "^0.10.1",
+    "gridstack": "^12.6.0",
+    "lodash-es": "^4.18.1",
+    "lucide-vue-next": "^0.577.0",
+    "oidc-client-ts": "^3.5.0",
+    "pinia": "^3.0.4",
+    "primeicons": "^7.0.0",
+    "quill": "^2.0.3",
+    "radix-vue": "^1.9.17",
+    "sigma": "^3.0.3",
+    "socket.io-client": "^4.8.3",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-primeui": "^0.6.1",
+    "uuid": "^11.1.1",
+    "vue3-apexcharts": "^1.11.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@hey-api/openapi-ts": "^0.97.1",
+    "@intlify/message-compiler": "^11.4.2",
+    "@nuxt/eslint": "^1.15.2",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.19.19",
+    "eslint": "^9.39.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-sonarjs": "^4.0.3",
+    "eslint-plugin-tailwindcss": "^3.18.3",
+    "nuxt": "3.21.0",
+    "tailwindcss": "^3.4.19",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.59.3"
+  },
+  "peerDependencies": {
+    "primevue": "4.5.5",
+    "vue": "3.5.17"
+  }
+}

package/pages/[tenant]/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div v-if="isAgentAdmin">
+    <h1 class="w-full pb-32 pt-72 text-center text-6xl">
+      {{ t('welcome') }}
+    </h1>
+    <DashboardGrid />
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+const { myUser, myUserIsLoading } = useMyUser()
+const tenantPath = useTenantPath()
+
+const ACCESS_LEVEL_ADMIN = 2
+
+const isAgentAdmin = computed(() => {
+  const agents = myUser.value?.access?.agents ?? []
+  return agents.some(agent => agent.level === ACCESS_LEVEL_ADMIN)
+})
+
+watch(
+  [myUserIsLoading, isAgentAdmin],
+  ([isLoading, isAdmin]) => {
+    if (!isLoading && !isAdmin) {
+      navigateTo(tenantPath('/service/openai'), { replace: true })
+    }
+  },
+  { immediate: true },
+)
+</script>