@swiss-ai-hub/web 0.295.4 → 0.296.1

package/components/Thread/List.vue

@@ -1,15 +1,20 @@
 <template>
   <DataTable
     :value="threads"
+    lazy
+    :sort-field="sortField"
+    :sort-order="sortOrder"
     table-style="min-width: 50rem"
     selection-mode="single"
     :selection="selectedThread"
     size="small"
     @update:selection="emit('selected', $event)"
+    @sort="onSort"
   >
     <Column
       field="name"
       :header="t('thread.list.name')"
+      sortable
     />
     <Column
       field="agents"
@@ -50,8 +55,9 @@
       </template>
     </Column>
     <Column
-      field="Created"
+      field="created_at"
       :header="t('thread.list.created')"
+      sortable
     >
       <template #body="{ data }">
         <p>{{ formatted(data.created_at) }}</p>
@@ -112,18 +118,29 @@
 
 <script setup lang="ts">
 import type { ThreadDto, MinimalUserDto } from '@core/sdk/client'
+import type { DataTableSortEvent } from 'primevue'
 
 const route = useRoute()
 const { t } = useI18n()
 
 const props = defineProps<{
   threads: ThreadDto[]
+  sortField: string
+  sortOrder: 1 | -1
 }>()
 
 const emit = defineEmits<{
   selected: [thread: ThreadDto]
+  sort: [payload: { field: string, order: 1 | -1 }]
 }>()
 
+const onSort = (event: DataTableSortEvent) => {
+  emit('sort', {
+    field: event.sortField as string,
+    order: (event.sortOrder ?? -1) as 1 | -1,
+  })
+}
+
 const initials = (user: MinimalUserDto) => user.name?.split(' ').map(n => n[0]).join('')
 const formatted = (datestr: string) => useDateFormat(new Date(datestr), 'DD.MM.YYYY HH:mm:ss')
 const { pendingType } = useThreadUtils()

package/composables/agent/useAgentInstances.ts

@@ -1,25 +1,43 @@
 import { type FullAgentInstanceDto, getAllAgentInstances } from '@core/sdk/client'
 import { minutesToMilliseconds } from 'date-fns'
 
-export const useAgentInstances = defineQuery((options?: { online?: boolean }) => {
+export const useAgentInstances = defineQuery(() => {
   const { tenantId } = useTenant()
+  const searchQuery = ref<string | null>(null)
+  const agentClass = useRouteQuery<string | null>('agent_type', null)
+  const status = useRouteQuery<string | null>('agent_status', null)
+
+  const debouncedSearch = refDebounced(searchQuery, 300)
+
+  const getOnlineStatus = () => {
+    if (status.value === 'enabled') return true
+    if (status.value === 'disabled') return false
+    return undefined
+  }
 
   const { data: agentInstances, isPending: agentInstancesAreLoading } = useQuery<FullAgentInstanceDto[]>({
-    key: () => ['tenant', tenantId.value, 'agent-instances', options?.online],
+    key: () => ['tenant', tenantId.value, 'agent-instances', status.value, agentClass.value, debouncedSearch.value],
     staleTime: minutesToMilliseconds(5),
     enabled: useTenantReady(),
+    placeholderData: previousData => previousData,
     query: async () => {
       return await getAllAgentInstances({
         composable: '$fetch',
         path: { tenant_id: tenantId.value! },
         query: {
-          online: options?.online,
+          online: getOnlineStatus(),
+          agent_class: agentClass.value || undefined,
+          search: debouncedSearch.value || undefined,
         },
       })
     },
   })
+
   return {
     agentInstances,
     agentInstancesAreLoading,
+    searchQuery,
+    agentClass,
+    status,
   }
 })

package/composables/thread/useThreads.ts

@@ -1,13 +1,29 @@
 import { getUserThreads, type ThreadDto } from '@core/sdk/client'
+import { endOfDay } from 'date-fns/endOfDay'
+import { format } from 'date-fns/format'
+import { startOfDay } from 'date-fns/startOfDay'
+
+export type ThreadSortField = 'created_at' | 'name'
+export type ThreadSortOrder = 1 | -1
 
 export const useThreads = defineQuery(() => {
   const { tenantId } = useTenant()
   const currentPage = ref(1)
   const pageSize = ref(10)
+  const sortField = ref<ThreadSortField>('created_at')
+  const sortOrder = ref<ThreadSortOrder>(-1)
+  const searchQuery = ref<string | null>(null)
+  const debouncedSearch = refDebounced(searchQuery, 300)
+  const agentInstanceId = useRouteQuery<string | null>('agent_id', null)
+  const userSearchId = useRouteQuery<string | null>('user_id', null)
+  const status = useRouteQuery<string | null>('thread_status', null)
+  const fromDate = useRouteQuery<string | null>('from', null)
+  const toDate = useRouteQuery<string | null>('to', null)
 
   const threadsQuery = useQuery({
-    key: () => ['tenant', tenantId.value, 'threads', { page: currentPage.value, size: pageSize.value }],
+    key: () => ['tenant', tenantId.value, 'threads', currentPage.value, pageSize.value, sortField.value, sortOrder.value, debouncedSearch.value, agentInstanceId.value, userSearchId.value, status.value, fromDate.value, toDate.value],
     enabled: useTenantReady(),
+    placeholderData: previousData => previousData,
     query: async () => {
       const pageToFetch = Math.max(1, currentPage.value)
 
@@ -17,10 +33,17 @@ export const useThreads = defineQuery(() => {
         query: {
           page: pageToFetch,
           page_size: pageSize.value,
+          sort_field: sortField.value,
+          sort_order: sortOrder.value,
+          search: debouncedSearch.value || undefined,
+          agent_id: agentInstanceId.value || undefined,
+          user_id: userSearchId.value || undefined,
+          status: status.value || undefined,
+          from: fromDate.value ? startOfDay(new Date(fromDate.value)).toISOString() : undefined,
+          to: toDate.value ? endOfDay(new Date(toDate.value)).toISOString() : undefined,
         },
       })
     },
-    placeholderData: previousData => previousData,
   })
 
   const setPageSize = (newSize: number) => {
@@ -49,7 +72,34 @@ export const useThreads = defineQuery(() => {
 
   const threads = computed(() => (threadsQuery.state.value?.data)?.threads ?? [] as ThreadDto[])
 
-  const isLoading = computed(() => threadsQuery.asyncStatus.value === 'loading')
+  const isLoading = computed(() => threadsQuery.asyncStatus.value === 'loading' && !threadsQuery.state.value?.data)
+
+  const setSort = (field: ThreadSortField, order: ThreadSortOrder) => {
+    sortField.value = field
+    sortOrder.value = order
+    currentPage.value = 1
+  }
+
+  const dateRange = computed<(Date | null)[] | null>({
+    get() {
+      if (!fromDate.value && !toDate.value) return null
+
+      return [
+        fromDate.value ? new Date(fromDate.value) : null,
+        toDate.value ? new Date(toDate.value) : null,
+      ]
+    },
+    set(range) {
+      const [start, end] = range ?? [null, null]
+      if (range && start && !end) return
+
+      fromDate.value = start ? format(start, 'yyyy-MM-dd') : null
+      toDate.value = end ? format(end, 'yyyy-MM-dd') : null
+      currentPage.value = 1
+    },
+  })
+
+  watch([status, agentInstanceId, userSearchId, debouncedSearch], () => currentPage.value = 1)
 
   return {
     threads,
@@ -59,6 +109,14 @@ export const useThreads = defineQuery(() => {
     pageSize,
     setPage,
     setPageSize,
+    setSort,
     refetch: threadsQuery.refetch,
+    sortField,
+    sortOrder,
+    searchQuery,
+    agentInstanceId,
+    userSearchId,
+    status,
+    dateRange,
   }
 })

package/i18n/locales/de.yaml

@@ -140,6 +140,15 @@ thread:
     numEvents: Anzahl der Ereignisse
     status: Status
     pending: Ausstehend
+    search_placeholder: Nach Namen suchen
+    filter:
+      status_placeholder: Nach Status filtern
+      active: Aktiv
+      completed: Abgeschlossen
+      failed: Fehlgeschlagen
+      agent_name_placeholder: Nach Agent filtern
+      user_name_placeholder: Nach Benutzer filtern
+      date_range_placeholder: Nach Datum filtern
   utils:
     pendingTypes:
       hitl: Mensch in der Schleife
@@ -341,6 +350,13 @@ agent:
     online: Online
     offline: Offline
     clone: Klonen
+    search_placeholder: Nach Namen suchen
+    no_results: Keine Agenten gefunden
+    filter:
+      type_placeholder: Nach Agententyp filtern
+      status_placeholder: Nach Status filtern
+      enabled: Aktiviert
+      disabled: Deaktiviert
   workflow:
     title: Agenten-Workflow
     view_tooltip: Workflow anzeigen

package/i18n/locales/en.yaml

@@ -139,6 +139,15 @@ thread:
     numEvents: Number of Events
     status: Status
     pending: Pending
+    search_placeholder: Search by name
+    filter:
+      status_placeholder: Filter by status
+      active: Active
+      completed: Completed
+      failed: Failed
+      agent_name_placeholder: Filter by agent
+      user_name_placeholder: Filter by user
+      date_range_placeholder: Filter by date
   utils:
     pendingTypes:
       hitl: Human in the Loop
@@ -337,6 +346,13 @@ agent:
     online: Online
     offline: Offline
     clone: Clone
+    search_placeholder: Search by name
+    no_results: No agents found
+    filter:
+      type_placeholder: Filter by agent type
+      status_placeholder: Filter by status
+      enabled: Enabled
+      disabled: Disabled
   workflow:
     title: Agentic Workflow
     view_tooltip: View workflow

package/i18n/locales/fr.yaml

@@ -139,6 +139,15 @@ thread:
     numEvents: Nombre d'événements
     status: Statut
     pending: En attente
+    search_placeholder: Rechercher par nom
+    filter:
+      status_placeholder: Filtrer par statut
+      active: Actif
+      completed: Terminé
+      failed: Échoué
+      agent_name_placeholder: Filtrer par agent
+      user_name_placeholder: Filtrer par utilisateur
+      date_range_placeholder: Filtrer par date
   utils:
     pendingTypes:
       hitl: Humain dans la boucle
@@ -338,6 +347,13 @@ agent:
     online: En ligne
     offline: Hors ligne
     clone: Cloner
+    search_placeholder: Rechercher par nom
+    no_results: Aucun agent trouvé
+    filter:
+      type_placeholder: Filtrer par type d'agent
+      status_placeholder: Filtrer par statut
+      enabled: Activé
+      disabled: Désactivé
   workflow:
     title: Flux de travail agentique
     view_tooltip: Afficher le flux de travail

package/i18n/locales/it.yaml

@@ -139,6 +139,15 @@ thread:
     numEvents: Numero di eventi
     status: Stato
     pending: In attesa
+    search_placeholder: Cerca per nome
+    filter:
+      status_placeholder: Filtra per stato
+      active: Attivo
+      completed: Completato
+      failed: Fallito
+      agent_name_placeholder: Filtra per agente
+      user_name_placeholder: Filtra per utente
+      date_range_placeholder: Filtra per data
   utils:
     pendingTypes:
       hitl: Umano nel loop
@@ -338,6 +347,13 @@ agent:
     online: Online
     offline: Offline
     clone: Clonare
+    search_placeholder: Cerca per nome
+    no_results: Nessun agente trovato
+    filter:
+      type_placeholder: Filtra per tipo di agente
+      status_placeholder: Filtra per stato
+      enabled: Abilitato
+      disabled: Disabilitato
   workflow:
     title: Flusso di lavoro agentico
     view_tooltip: Visualizza il flusso di lavoro

package/package.json

@@ -3,7 +3,7 @@
   "license": "AGPL-3.0-or-later",
   "author": "bbv Software Services AG (https://www.bbv.ch)",
   "type": "module",
-  "version": "0.295.4",
+  "version": "0.296.1",
   "description": "Swiss AI Hub - Admin & Management UI (Nuxt 3 layer)",
   "main": "./nuxt.config.ts",
   "repository": {

package/pages/[tenant]/service/agents.vue

@@ -6,20 +6,50 @@
       :loading="isLoading"
       size="large"
     >
-      <SelectButton
-        :model-value="activeNavItem"
-        :options="navItems"
-        data-key="key"
-        option-label="name"
-        size="small"
-        @update:model-value="toNavItem"
-      />
-      <div class="flex flex-col gap-12 pt-4">
+      <div class="flex justify-between">
+        <SelectButton
+          :model-value="activeNavItem"
+          :options="navItems"
+          data-key="key"
+          option-label="name"
+          size="small"
+          @update:model-value="toNavItem"
+        />
+        <div class="flex items-center gap-4">
+          <Select
+            v-model="agentClass"
+            :options="agentClassOptions"
+            option-label="label"
+            option-value="value"
+            :placeholder="t('agent.list.filter.type_placeholder')"
+            show-clear
+            class="w-52"
+          />
+          <Select
+            v-model="status"
+            :options="statusOptions"
+            option-label="label"
+            option-value="value"
+            :placeholder="t('agent.list.filter.status_placeholder')"
+            show-clear
+            class="w-52"
+          />
+          <InputText
+            v-model="searchQuery"
+            :placeholder="t('agent.list.search_placeholder')"
+            class="w-80"
+          />
+        </div>
+      </div>
+      <div class="flex flex-col gap-8 pt-4">
         <div
           v-for="group in groupedAgents"
           :key="group.agentClass"
         >
-          <div class="pb-4">
+          <div
+            v-if="group.instances.length > 0 && !showNoResults"
+            class="pb-4"
+          >
             <div class="flex items-center gap-2 pb-2">
               <Icon
                 :name="group.icon"
@@ -58,11 +88,17 @@
               @clone="handleClone"
             />
             <AgentEmptyCard
-              v-if="group.isAvailable"
+              v-if="group.isAvailable && (!searchQuery && !status && !agentClass)"
               @add="openCreateModal(group.agentClass)"
             />
           </div>
         </div>
+        <div
+          v-if="showNoResults"
+          class="flex items-center justify-center py-8 text-surface-500"
+        >
+          <span class="text-xl">{{ t('agent.list.no_results') }}</span>
+        </div>
       </div>
       <AgentCreateModal
         v-model="createModalOpen"
@@ -99,7 +135,7 @@ const route = useRoute()
 const tenantPath = useTenantPath()
 const { t, locale } = useI18n()
 
-const { agentInstances, agentInstancesAreLoading } = useAgentInstances()
+const { agentInstances, agentInstancesAreLoading, searchQuery, agentClass, status } = useAgentInstances()
 const { agentClasses, agentClassesAreLoading } = useAgentClasses()
 const { navItems, activeNavItem, toNavItem } = useAgentNavigation()
 
@@ -113,6 +149,29 @@ const initialDataForCreate = ref<Record<string, unknown> | null>(null)
 const workflowModalOpen = ref(false)
 const selectedGroupForWorkflow = ref<AgentGroup | null>(null)
 
+const agentClassOptions = computed(() => {
+  if (!agentClasses.value) return []
+
+  return agentClasses.value.map(c => ({
+    label: c.name?.[locale.value] ?? c.agent_class,
+    value: c.agent_class,
+  }))
+},
+)
+
+const statusOptions = computed(() => [
+  { label: t('agent.list.filter.enabled'), value: 'enabled' },
+  { label: t('agent.list.filter.disabled'), value: 'disabled' },
+])
+
+const hasVisibleInstances = computed(() =>
+  groupedAgents.value.some(group => group.instances.length > 0),
+)
+
+const showNoResults = computed(() =>
+  !hasVisibleInstances.value && (!!searchQuery.value || !!agentClass.value || !!status.value),
+)
+
 const openWorkflowModal = (group: AgentGroup) => {
   selectedGroupForWorkflow.value = group
   workflowModalOpen.value = true

package/pages/[tenant]/service/threads.vue

@@ -4,9 +4,59 @@
       :title="t('thread.title')"
       :loading="isLoading"
     >
+      <div class="mb-4 flex items-center justify-between">
+        <div class="mr-2 flex items-center gap-2">
+          <DatePicker
+            v-model="dateRange"
+            show-button-bar
+            selection-mode="range"
+            :manual-input="false"
+            :placeholder="t('thread.list.filter.date_range_placeholder')"
+            update-model-type="string"
+            show-clear
+            show-icon
+            date-format="yy-mm-dd"
+            class="w-48"
+          />
+          <Select
+            v-model="status"
+            :options="statusOptions"
+            option-label="label"
+            option-value="value"
+            :placeholder="t('thread.list.filter.status_placeholder')"
+            show-clear
+            class="w-48"
+          />
+          <Select
+            v-model="agentInstanceId"
+            :options="agentInstanceOptions"
+            option-label="label"
+            option-value="value"
+            :placeholder="t('thread.list.filter.agent_name_placeholder')"
+            show-clear
+            class="w-48"
+          />
+          <Select
+            v-model="userSearchId"
+            :options="userOptions"
+            option-label="label"
+            option-value="value"
+            :placeholder="t('thread.list.filter.user_name_placeholder')"
+            show-clear
+            class="w-48"
+          />
+        </div>
+        <InputText
+          v-model="searchQuery"
+          :placeholder="t('thread.list.search_placeholder')"
+        />
+      </div>
       <ThreadList
         :threads="threads"
+        :sort-field="sortField"
+        :sort-order="sortOrder"
         @selected="toThread"
+        @sort="onSort"
       />
 
       <div class="mt-4">
@@ -15,6 +65,8 @@
           :total-records="pagination.total"
           :rows-per-page-options="[10, 20, 30, 50]"
           :first="(currentPage - 1) * pageSize"
+          template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown"
+          current-page-report-template="Showing {first} to {last} of {totalRecords}"
           @page="onPageChange"
         />
       </div>
@@ -38,8 +90,23 @@ const {
   pageSize,
   setPage,
   setPageSize,
+  sortField,
+  sortOrder,
+  setSort,
+  searchQuery,
+  agentInstanceId,
+  userSearchId,
+  status,
+  dateRange,
 } = useThreads()
 
+const { agentInstances } = useAgentInstances()
+
+const { users } = useUsers()
+
+const onSort = ({ field, order }: { field: string, order: 1 | -1 }) =>
+  setSort(field as ThreadSortField, order)
+
 const toThread = (thread: ThreadDto) => {
   router.push(tenantPath(`/service/threads/${thread.id}/overview`))
 }
@@ -49,4 +116,30 @@ const onPageChange = (event) => {
   const newPage = Math.floor(event.first / event.rows) + 1
   setPage(newPage)
 }
+
+const agentInstanceOptions = computed(() => {
+  if (!agentInstances.value) return []
+
+  return agentInstances.value.map(agentInstance => ({
+    label: agentInstance.agent_config.name,
+    value: agentInstance.agent_config.agent_id,
+  }))
+},
+)
+
+const userOptions = computed(() => {
+  if (!users.value) return []
+
+  return users.value.map(user => ({
+    label: user.name,
+    value: user.id,
+  }))
+},
+)
+
+const statusOptions = computed(() => [
+  { label: t('thread.list.filter.active'), value: 'active' },
+  { label: t('thread.list.filter.completed'), value: 'completed' },
+  { label: t('thread.list.filter.failed'), value: 'failed' },
+])
 </script>

package/sdk/client/sdk.gen.ts

@@ -1429,6 +1429,7 @@ export const getAgentInstanceThreads = <
  *
  * Retrieve a list of all agent instances across all classes.
  * Use `?online=true` for online instances only, `?online=false` for offline only.
+ * Use `?search={agentName}` to search an agent with its name.
  */
 export const getAllAgentInstances = <
   TComposable extends Composable = "$fetch",

package/sdk/client/types.gen.ts

@@ -24311,6 +24311,42 @@ export type GetUserThreadsData = {
     tenant_id: string;
   };
   query?: {
+    /**
+     * Search
+     *
+     * Search by thread name
+     */
+    search?: string | null;
+    /**
+     * Agent Id
+     *
+     * Filter by agent id
+     */
+    agent_id?: string | null;
+    /**
+     * User Id
+     *
+     * Filter by user id
+     */
+    user_id?: string | null;
+    /**
+     * Status
+     *
+     * Filter by status: active, completed, failed
+     */
+    status?: string | null;
+    /**
+     * From
+     *
+     * Filter threads created from this date
+     */
+    from?: string | null;
+    /**
+     * To
+     *
+     * Filter threads created up to this date
+     */
+    to?: string | null;
     /**
      * Page Number
      *
@@ -24323,6 +24359,18 @@ export type GetUserThreadsData = {
      * Number of items per page (maximum 100)
      */
     page_size?: number;
+    /**
+     * Sort Field
+     *
+     * Field to sort by: name, created_at
+     */
+    sort_field?: string;
+    /**
+     * Sort Order
+     *
+     * Sort order: 1 for ascending, -1 for descending
+     */
+    sort_order?: -1 | 1;
   };
   url: "/{tenant_id}/threads/";
 };
@@ -24974,6 +25022,18 @@ export type GetAllAgentInstancesData = {
      * Filter by online status
      */
     online?: boolean | null;
+    /**
+     * Agent Class
+     *
+     * Filter by agent class
+     */
+    agent_class?: string | null;
+    /**
+     * Search
+     *
+     * Search by agent name
+     */
+    search?: string | null;
   };
   url: "/{tenant_id}/agents/instances";
 };