@swiss-ai-hub/web 0.290.11

package/pages/auth/renew.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="hidden">
+    {{ t('auth.renew.processing') }}
+  </div>
+</template>
+
+<script setup lang="ts">
+const { $auth } = useNuxtApp()
+
+definePageMeta({
+  layout: 'anonymous',
+})
+
+const { t } = useI18n()
+
+await $auth.signinSilentCallback()
+</script>
+
+<style scoped>
+/* Hide this page since it's loaded in an iframe */
+.hidden {
+  display: none;
+}
+</style>

package/pages/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="flex h-screen items-center justify-center">
+    <ProgressSpinner v-if="tenantsAreLoading" />
+    <div
+      v-else-if="!tenants?.length"
+      class="text-center"
+    >
+      <h1 class="mb-4 text-2xl font-bold">
+        {{ t('tenant.no_tenant_title') }}
+      </h1>
+      <p class="text-muted-color">
+        {{ t('tenant.no_tenant_description') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getMyTenants } from '@core/sdk/client'
+
+const REDIRECT_KEY = 'aihub_redirect_after_login'
+
+const { t } = useI18n()
+const localePath = useLocalePath()
+
+const tenantsAreLoading = ref(true)
+const tenants = ref<{ id: string }[] | null>(null)
+
+onMounted(async () => {
+  try {
+    const response = await getMyTenants({ composable: '$fetch' })
+    tenants.value = response.tenants
+
+    if (!response.tenants?.length) {
+      tenantsAreLoading.value = false
+      return
+    }
+
+    const storedRedirect = sessionStorage.getItem(REDIRECT_KEY)
+    sessionStorage.removeItem(REDIRECT_KEY)
+
+    if (storedRedirect && storedRedirect !== '/') {
+      await navigateTo(storedRedirect, { replace: true })
+      return
+    }
+
+    if (response.tenants.length === 1) {
+      const tenant = response.tenants[0]
+      await navigateTo(localePath(`/${tenant.id}/service/openai`), { replace: true })
+      return
+    }
+
+    await navigateTo(localePath('/select-tenant'), { replace: true })
+  }
+  catch {
+    tenantsAreLoading.value = false
+  }
+})
+</script>

package/pages/select-tenant.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="flex h-screen items-center justify-center">
+    <div class="w-full max-w-2xl px-4">
+      <h1 class="mb-2 text-center text-2xl font-bold">
+        {{ t('tenant.select_title') }}
+      </h1>
+      <p class="mb-8 text-center text-muted-color">
+        {{ t('tenant.select_description') }}
+      </p>
+
+      <div
+        v-if="tenantsAreLoading"
+        class="flex justify-center"
+      >
+        <AppLoader :size="48" />
+      </div>
+
+      <div
+        v-else
+        class="grid grid-cols-1 gap-4 md:grid-cols-2"
+      >
+        <Card
+          v-for="tenant in tenants"
+          :key="tenant.id"
+          class="cursor-pointer border border-transparent hover:border-primary-200 dark:hover:border-primary-700"
+          @click="selectTenant(tenant)"
+        >
+          <template #title>
+            {{ tenant.name }}
+          </template>
+          <template #content>
+            <p class="text-sm text-muted-color">
+              {{ tenant.description }}
+            </p>
+          </template>
+        </Card>
+
+        <Card
+          v-if="isSysAdmin"
+          class="cursor-pointer border border-dashed border-surface-300 hover:border-primary-200 dark:border-surface-600 dark:hover:border-primary-700"
+          @click="enterSysAdmin"
+        >
+          <template #title>
+            <div class="flex items-center gap-2">
+              <i class="pi pi-cog text-primary" />
+              {{ t('tenant.administration_title') }}
+            </div>
+          </template>
+          <template #content>
+            <p class="text-sm text-muted-color">
+              {{ t('tenant.administration_description') }}
+            </p>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { setMyActiveTenant } from '@core/sdk/client'
+
+import type { TenantMembershipDto } from '@core/sdk/client'
+
+definePageMeta({ layout: 'anonymous' })
+
+const { t } = useI18n()
+const localePath = useLocalePath()
+const { tenants, tenantsAreLoading, isSysAdmin } = useTenantMemberships()
+const { enterSysadmin: enterSysAdmin } = useSysadminNavigation()
+
+async function selectTenant(tenant: TenantMembershipDto) {
+  await setMyActiveTenant({ composable: '$fetch', body: { tenant_id: tenant.id } })
+  await navigateTo(localePath(`/${tenant.id}/service/openai`), { replace: true })
+}
+</script>

package/plugins/0.runtime-config.client.ts

@@ -0,0 +1,55 @@
+// The ONE place runtime configuration enters the app.
+//
+// In a production container, nginx envsubst's config.template.js into
+// /config.js, which index.html loads as a classic <script> in <head> — so
+// `window.__AIHUB_CONFIG__` is already populated, synchronously, before any
+// Nuxt plugin runs. This plugin maps it into `runtimeConfig.public` so every
+// existing downstream reader (oidc-client, api-client, composables) keeps
+// working unchanged. No $fetch, no async, no plugin-ordering concerns — which
+// is why it replaced three separate config.json-fetching plugins.
+//
+// The numeric `0.` filename prefix makes this the first plugin in the layer
+// so api-client.client.ts (and any extender plugin) sees a fully-populated
+// runtimeConfig.
+//
+// Ships in the @swiss-ai-hub/web layer, so it also runs in extenders
+// (@swiss-ai-hub/sysadmin-web, customer UIs). It writes defensively: only into
+// config groups the consuming app declared, and only from injected keys that
+// are present, so an extender that uses a subset of the config is unaffected.
+export default defineNuxtPlugin(() => {
+  const isConfigLoaded = useState('isConfigLoaded', () => false)
+  const publicConfig = useRuntimeConfig().public as Record<string, unknown>
+
+  // Dev: values are already injected from .env via .app/nuxt.config.ts and
+  // there is no nginx to produce /config.js — nothing to map.
+  if (publicConfig.env === 'dev') {
+    isConfigLoaded.value = true
+    return
+  }
+
+  const injected
+    = (globalThis as unknown as { __AIHUB_CONFIG__?: Record<string, string> }).__AIHUB_CONFIG__ ?? {}
+
+  const group = (name: string): Record<string, unknown> | undefined =>
+    publicConfig[name] as Record<string, unknown> | undefined
+
+  // Assigns only when the consuming app declared `target` and the injected
+  // value is a non-empty string (envsubst leaves unset vars as '').
+  const assign = (
+    target: Record<string, unknown> | undefined,
+    key: string,
+    value: string | undefined,
+  ): void => {
+    if (target && value) target[key] = value
+  }
+
+  assign(group('oidc'), 'clientId', injected.OAUTH_CLIENT_ID)
+  assign(group('oidc'), 'authorityUrl', injected.OAUTH_AUTHORITY_URL)
+  assign(group('webui'), 'url', injected.WEBUI_URL)
+  assign(group('ws'), 'endpoint', injected.WS_ENDPOINT)
+  assign(group('sysadmin'), 'url', injected.SYSADMIN_URL)
+  assign(group('mainApp'), 'url', injected.MAIN_APP_URL)
+  if (injected.API_BASE_URL) publicConfig.apiBaseUrl = injected.API_BASE_URL
+
+  isConfigLoaded.value = true
+})

package/plugins/apexcharts.client.ts

@@ -0,0 +1,5 @@
+import VueApexCharts from 'vue3-apexcharts'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueApexCharts)
+})

package/plugins/api-client.client.ts

@@ -0,0 +1,38 @@
+import { client } from '@core/sdk/client/client.gen'
+
+// Configures the @swiss-ai-hub/web SDK client (`@core/sdk/client`) that every
+// composable shipped in this layer uses.
+//
+// This MUST live in a plugin, not in app.vue: app.vue is app-singular, so any
+// app that EXTENDS this layer (@swiss-ai-hub/sysadmin-web, or a customer UI)
+// supplies its own app.vue and the layer's app.vue never runs — leaving the
+// SDK client unconfigured and every inherited layer composable firing against
+// an unconfigured client. Plugins, by contrast, run in every extender.
+//
+// Where the AI-Hub API lives is the layer's extension point. The base URL is
+// resolved once by 0.runtime-config.client.ts (which runs first — numeric
+// filename prefix) into `runtimeConfig.public.apiBaseUrl`:
+//   - dev: from .env via .app/nuxt.config.ts (defaults to same-origin /api/v1)
+//   - prod container: from API_BASE_URL in window.__AIHUB_CONFIG__ (/config.js)
+// web leaves it at the same-origin default; sysadmin-web (and customers whose
+// UI is on a different origin than the API) point it at the API instance.
+export default defineNuxtPlugin((nuxtApp) => {
+  const publicConfig = useRuntimeConfig().public as Record<string, unknown>
+  const { getToken } = useAuth()
+
+  const baseURL = (publicConfig.apiBaseUrl as string) || '/api/v1'
+
+  client.setConfig({
+    baseURL,
+    // getToken() throws when the user is not logged in; auth-optional
+    // endpoints (e.g. auth providers on the login page) still resolve.
+    auth: async () => await getToken(),
+    onRequest: ({ options }) => {
+      const locale = (nuxtApp.$i18n as { locale?: { value?: string } } | undefined)?.locale?.value
+      if (locale) options.headers.set('lang', locale)
+    },
+    onResponseError: ({ response }) => {
+      console.error('AI-Hub API error', response.status, response._data?.detail)
+    },
+  })
+})

package/plugins/dark-mode.client.ts

@@ -0,0 +1,12 @@
+/**
+ * Eagerly initializes dark mode on app startup so the ``.dark`` class is on
+ * ``<html>`` before the first page renders. Without this, a reload of a page
+ * that doesn't itself call ``useDarkMode`` would render in light mode until
+ * some later component happens to touch the composable.
+ *
+ * Uses the shared composable (``useDarkMode``) rather than ``useDark``
+ * directly so the plugin and any component share the same ref instance.
+ */
+export default defineNuxtPlugin(() => {
+  useDarkMode()
+})

package/plugins/keycloak-client.ts

@@ -0,0 +1,41 @@
+import { defineNuxtPlugin } from '#app'
+
+class KeycloakClient {
+  private readonly logoutUrl: string
+  private readonly clientId: string
+
+  constructor(authorityUrl: string, clientId: string) {
+    this.logoutUrl = `${authorityUrl}/protocol/openid-connect/logout`
+    this.clientId = clientId
+  }
+
+  async logout(refreshToken: string): Promise<void> {
+    const response = await fetch(this.logoutUrl, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: new URLSearchParams({
+        client_id: this.clientId,
+        refresh_token: refreshToken,
+      }),
+    })
+
+    if (!response.ok) {
+      throw new Error(`Keycloak logout failed with status ${response.status}`)
+    }
+  }
+}
+
+export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig()
+
+  const keycloakClient = new KeycloakClient(
+    config.public.oidc.authorityUrl,
+    config.public.oidc.clientId,
+  )
+
+  return {
+    provide: {
+      keycloakClient,
+    },
+  }
+})

package/plugins/oidc-client.ts

@@ -0,0 +1,78 @@
+import { UserManager, WebStorageStateStore } from 'oidc-client-ts'
+
+import { defineNuxtPlugin } from '#app'
+
+export default defineNuxtPlugin(async ({ $i18n, $router }) => {
+  const config = useRuntimeConfig()
+
+  // Keycloak-compatible OIDC configuration
+  // Authority URL is the Keycloak realm URL (e.g., http://localhost:8180/realms/aihub)
+  const auth = new UserManager({
+    authority: config.public.oidc.authorityUrl,
+    client_id: config.public.oidc.clientId,
+    redirect_uri: `${globalThis.location.origin}/${$i18n.locale.value}/auth/callback`,
+    silent_redirect_uri: `${globalThis.location.origin}/${$i18n.locale.value}/auth/renew`,
+    post_logout_redirect_uri: globalThis.location.origin,
+    response_type: 'code',
+    scope: 'openid profile email',
+    filterProtocolClaims: true,
+    automaticSilentRenew: true,
+    silentRequestTimeoutInSeconds: 30,
+    accessTokenExpiringNotificationTimeInSeconds: 120,
+    userStore: new WebStorageStateStore({ store: globalThis?.localStorage }),
+    // Keycloak supports PKCE
+    disablePKCE: false,
+    // Disabled: OpenWebUI logout destroys the Keycloak SSO session, but we
+    // intentionally keep the parent app session alive (local JWT stays valid).
+    // The iframe @load handler in openai.vue redirects to home instead.
+    monitorSession: false,
+  })
+
+  // Add event handlers for token lifecycle events
+  auth.events.addAccessTokenExpiring(() => {
+    console.log('Access token expiring, attempting silent renewal')
+  })
+
+  auth.events.addAccessTokenExpired(() => {
+    console.log('Access token expired')
+    // Redirect to login when token expires and cannot be renewed
+    const locale = $i18n.locale.value
+    $router.push(`/${locale}/auth/login`)
+  })
+
+  auth.events.addSilentRenewError((error) => {
+    console.error('Silent renew error:', error)
+    // The refresh token is rejected (typically: Keycloak invalidated it).
+    // Without a working renew path, the SDK starts sending unauthenticated
+    // requests on the next navigation — surfacing as 401s downstream. Send
+    // the user to the login page now so they re-auth in place.
+    const locale = $i18n.locale.value
+    $router.push(`/${locale}/auth/login`)
+  })
+
+  // Check for user session on startup
+  try {
+    const user = await auth.getUser()
+    if (user && !user.expired) {
+      console.log('User already logged in')
+    }
+    else if (user?.expired) {
+      console.log('User session expired, attempting renewal')
+      try {
+        await auth.signinSilent()
+      }
+      catch (e) {
+        console.error('Failed to renew session:', e)
+      }
+    }
+  }
+  catch (e) {
+    console.error('Error checking initial user state:', e)
+  }
+
+  return {
+    provide: {
+      auth,
+    },
+  }
+})

package/sdk/client/client/client.gen.ts

@@ -0,0 +1,237 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import {
+  useAsyncData,
+  useFetch,
+  useLazyAsyncData,
+  useLazyFetch,
+} from "nuxt/app";
+import { reactive, ref, toValue, watch } from "vue";
+
+import { createSseClient } from "../core/serverSentEvents.gen";
+import type { HttpMethod } from "../core/types.gen";
+import { getValidRequestBody } from "../core/utils.gen";
+import type { Client, Config, RequestOptions } from "./types.gen";
+import {
+  buildUrl,
+  createConfig,
+  executeFetchFn,
+  mergeConfigs,
+  mergeHeaders,
+  mergeInterceptors,
+  serializeBody,
+  setAuthParams,
+  unwrapRefs,
+} from "./utils.gen";
+
+export const createClient = (config: Config = {}): Client => {
+  let _config = mergeConfigs(createConfig(), config);
+
+  const getConfig = (): Config => ({ ..._config });
+
+  const setConfig = (config: Config): Config => {
+    _config = mergeConfigs(_config, config);
+    return getConfig();
+  };
+
+  const beforeRequest = async (options: RequestOptions) => {
+    const opts = {
+      ..._config,
+      ...options,
+      $fetch: options.$fetch ?? _config.$fetch ?? $fetch,
+      headers: mergeHeaders(_config.headers, options.headers),
+      onRequest: mergeInterceptors(_config.onRequest, options.onRequest),
+      onResponse: mergeInterceptors(_config.onResponse, options.onResponse),
+    };
+
+    if (opts.security) {
+      await setAuthParams({
+        ...opts,
+        security: opts.security,
+      });
+    }
+
+    if (opts.requestValidator) {
+      await opts.requestValidator(opts);
+    }
+
+    const url = buildUrl(opts);
+
+    return { opts, url };
+  };
+
+  const request: Client["request"] = ({
+    asyncDataOptions,
+    composable = "$fetch",
+    ...options
+  }) => {
+    const key = options.key;
+    const opts = {
+      ..._config,
+      ...options,
+      $fetch: options.$fetch ?? _config.$fetch ?? $fetch,
+      headers: mergeHeaders(_config.headers, options.headers),
+      onRequest: mergeInterceptors(_config.onRequest, options.onRequest),
+      onResponse: mergeInterceptors(_config.onResponse, options.onResponse),
+    };
+
+    const {
+      requestValidator,
+      responseTransformer,
+      responseValidator,
+      security,
+    } = opts;
+    if (requestValidator || security) {
+      // auth must happen in interceptors otherwise we'd need to require
+      // asyncContext enabled
+      // https://nuxt.com/docs/guide/going-further/experimental-features#asynccontext
+      opts.onRequest = [
+        async ({ options }) => {
+          if (security) {
+            await setAuthParams({
+              auth: opts.auth,
+              headers: options.headers,
+              query: options.query,
+              security,
+            });
+          }
+
+          if (requestValidator) {
+            await requestValidator({
+              ...options,
+              // @ts-expect-error
+              body: options.rawBody,
+            });
+          }
+        },
+        ...opts.onRequest,
+      ];
+    }
+
+    if (responseTransformer || responseValidator) {
+      opts.onResponse = [
+        ...opts.onResponse,
+        async ({ options, response }) => {
+          if (options.responseType && options.responseType !== "json") {
+            return;
+          }
+
+          if (!response.ok) {
+            return;
+          }
+
+          if (responseValidator) {
+            await responseValidator(response._data);
+          }
+
+          if (responseTransformer) {
+            response._data = await responseTransformer(response._data);
+          }
+        },
+      ];
+    }
+
+    // remove Content-Type header if body is empty to avoid sending invalid requests
+    if (opts.body === undefined || opts.body === "") {
+      opts.headers.delete("Content-Type");
+    }
+
+    const fetchFn = opts.$fetch;
+
+    if (composable === "$fetch") {
+      return executeFetchFn(
+        // @ts-expect-error
+        opts,
+        fetchFn,
+      );
+    }
+
+    if (composable === "useFetch" || composable === "useLazyFetch") {
+      opts.rawBody = opts.body;
+      const bodyParams = reactive({
+        body: opts.body,
+        bodySerializer: opts.bodySerializer,
+      });
+      const body = ref(serializeBody({ ...opts, body: toValue(opts.body) }));
+      opts.body = body;
+      watch(bodyParams, (changed) => {
+        body.value = serializeBody(changed);
+      });
+      return composable === "useLazyFetch"
+        ? useLazyFetch(() => buildUrl(opts), { ...opts, ...asyncDataOptions })
+        : useFetch(() => buildUrl(opts), { ...opts, ...asyncDataOptions });
+    }
+
+    const handler: any = () =>
+      executeFetchFn(
+        // @ts-expect-error
+        opts,
+        fetchFn,
+      );
+
+    if (composable === "useAsyncData") {
+      return key
+        ? useAsyncData(key, handler, asyncDataOptions)
+        : useAsyncData(handler, asyncDataOptions);
+    }
+
+    if (composable === "useLazyAsyncData") {
+      return key
+        ? useLazyAsyncData(key, handler, asyncDataOptions)
+        : useLazyAsyncData(handler, asyncDataOptions);
+    }
+
+    return undefined as any;
+  };
+
+  const makeMethodFn =
+    (method: Uppercase<HttpMethod>) => (options: RequestOptions) =>
+      request({ ...options, method });
+
+  const makeSseFn =
+    (method: Uppercase<HttpMethod>) => async (options: RequestOptions) => {
+      const { opts, url } = await beforeRequest(options);
+      return createSseClient({
+        ...unwrapRefs(opts),
+        body: opts.body as BodyInit | null | undefined,
+        method,
+        onRequest: undefined,
+        serializedBody: getValidRequestBody(opts) as
+          | BodyInit
+          | null
+          | undefined,
+        signal: unwrapRefs(opts.signal) as AbortSignal,
+        url,
+      });
+    };
+
+  const _buildUrl: Client["buildUrl"] = (options) =>
+    buildUrl({ ..._config, ...options } as typeof options);
+
+  return {
+    buildUrl: _buildUrl,
+    connect: makeMethodFn("CONNECT"),
+    delete: makeMethodFn("DELETE"),
+    get: makeMethodFn("GET"),
+    getConfig,
+    head: makeMethodFn("HEAD"),
+    options: makeMethodFn("OPTIONS"),
+    patch: makeMethodFn("PATCH"),
+    post: makeMethodFn("POST"),
+    put: makeMethodFn("PUT"),
+    request,
+    setConfig,
+    sse: {
+      connect: makeSseFn("CONNECT"),
+      delete: makeSseFn("DELETE"),
+      get: makeSseFn("GET"),
+      head: makeSseFn("HEAD"),
+      options: makeSseFn("OPTIONS"),
+      patch: makeSseFn("PATCH"),
+      post: makeSseFn("POST"),
+      put: makeSseFn("PUT"),
+      trace: makeSseFn("TRACE"),
+    },
+    trace: makeMethodFn("TRACE"),
+  } as Client;
+};

package/sdk/client/client/index.ts

@@ -0,0 +1,24 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+export type { Auth } from "../core/auth.gen";
+export type { QuerySerializerOptions } from "../core/bodySerializer.gen";
+export {
+  formDataBodySerializer,
+  jsonBodySerializer,
+  urlSearchParamsBodySerializer,
+} from "../core/bodySerializer.gen";
+export { buildClientParams } from "../core/params.gen";
+export { serializeQueryKeyValue } from "../core/queryKeySerializer.gen";
+export { createClient } from "./client.gen";
+export type {
+  Client,
+  ClientOptions,
+  Composable,
+  Config,
+  CreateClientConfig,
+  Options,
+  RequestOptions,
+  RequestResult,
+  TDataShape,
+} from "./types.gen";
+export { createConfig } from "./utils.gen";