-import { cn } from '@/lib/utils'
-import { computed, type HTMLAttributes } from 'vue'
-import TableCell from './TableCell.vue'
-import TableRow from './TableRow.vue'
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { cn } from '@/utils/utils'
+import TableCell from "./TableCell.vue"
+import TableRow from "./TableRow.vue"
const props = withDefaults(defineProps<{
- class?: HTMLAttributes['class']
+ class?: HTMLAttributes["class"]
colspan?: number
}>(), {
colspan: 1,
})
-const delegatedProps = computed(() => {
- const { class: _, ...delegated } = props
-
- return delegated
-})
+const delegatedProps = reactiveOmit(props, "class")
diff --git a/frontend/app/components/ui/table/TableFooter.vue b/frontend/app/components/ui/table/TableFooter.vue
index 693a4386..2bddb40d 100644
--- a/frontend/app/components/ui/table/TableFooter.vue
+++ b/frontend/app/components/ui/table/TableFooter.vue
@@ -1,14 +1,17 @@
-
+
diff --git a/frontend/app/components/ui/table/TableHead.vue b/frontend/app/components/ui/table/TableHead.vue
index e882b608..bba315ff 100644
--- a/frontend/app/components/ui/table/TableHead.vue
+++ b/frontend/app/components/ui/table/TableHead.vue
@@ -1,14 +1,17 @@
- |
+ |
|
diff --git a/frontend/app/components/ui/table/TableHeader.vue b/frontend/app/components/ui/table/TableHeader.vue
index 220352f6..4a7cdfd5 100644
--- a/frontend/app/components/ui/table/TableHeader.vue
+++ b/frontend/app/components/ui/table/TableHeader.vue
@@ -1,14 +1,17 @@
-
+
diff --git a/frontend/app/components/ui/table/TableRow.vue b/frontend/app/components/ui/table/TableRow.vue
index 5b9e8749..2b8656f3 100644
--- a/frontend/app/components/ui/table/TableRow.vue
+++ b/frontend/app/components/ui/table/TableRow.vue
@@ -1,14 +1,17 @@
-
+
diff --git a/frontend/app/components/ui/table/index.ts b/frontend/app/components/ui/table/index.ts
index 2b4ce391..3be308b5 100644
--- a/frontend/app/components/ui/table/index.ts
+++ b/frontend/app/components/ui/table/index.ts
@@ -1,9 +1,9 @@
-export { default as Table } from './Table.vue'
-export { default as TableBody } from './TableBody.vue'
-export { default as TableCaption } from './TableCaption.vue'
-export { default as TableCell } from './TableCell.vue'
-export { default as TableEmpty } from './TableEmpty.vue'
-export { default as TableFooter } from './TableFooter.vue'
-export { default as TableHead } from './TableHead.vue'
-export { default as TableHeader } from './TableHeader.vue'
-export { default as TableRow } from './TableRow.vue'
+export { default as Table } from "./Table.vue"
+export { default as TableBody } from "./TableBody.vue"
+export { default as TableCaption } from "./TableCaption.vue"
+export { default as TableCell } from "./TableCell.vue"
+export { default as TableEmpty } from "./TableEmpty.vue"
+export { default as TableFooter } from "./TableFooter.vue"
+export { default as TableHead } from "./TableHead.vue"
+export { default as TableHeader } from "./TableHeader.vue"
+export { default as TableRow } from "./TableRow.vue"
diff --git a/frontend/app/components/ui/tabs/Tabs.vue b/frontend/app/components/ui/tabs/Tabs.vue
new file mode 100644
index 00000000..34813057
--- /dev/null
+++ b/frontend/app/components/ui/tabs/Tabs.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
diff --git a/frontend/app/components/ui/tabs/TabsContent.vue b/frontend/app/components/ui/tabs/TabsContent.vue
new file mode 100644
index 00000000..5e0eec01
--- /dev/null
+++ b/frontend/app/components/ui/tabs/TabsContent.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
diff --git a/frontend/app/components/ui/tabs/TabsList.vue b/frontend/app/components/ui/tabs/TabsList.vue
new file mode 100644
index 00000000..80aaab73
--- /dev/null
+++ b/frontend/app/components/ui/tabs/TabsList.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
diff --git a/frontend/app/components/ui/tabs/TabsTrigger.vue b/frontend/app/components/ui/tabs/TabsTrigger.vue
new file mode 100644
index 00000000..95d326db
--- /dev/null
+++ b/frontend/app/components/ui/tabs/TabsTrigger.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
diff --git a/frontend/app/components/ui/tabs/index.ts b/frontend/app/components/ui/tabs/index.ts
new file mode 100644
index 00000000..7f99b7f2
--- /dev/null
+++ b/frontend/app/components/ui/tabs/index.ts
@@ -0,0 +1,4 @@
+export { default as Tabs } from "./Tabs.vue"
+export { default as TabsContent } from "./TabsContent.vue"
+export { default as TabsList } from "./TabsList.vue"
+export { default as TabsTrigger } from "./TabsTrigger.vue"
diff --git a/frontend/app/components/ui/textarea/Textarea.vue b/frontend/app/components/ui/textarea/Textarea.vue
new file mode 100644
index 00000000..dbafdc9a
--- /dev/null
+++ b/frontend/app/components/ui/textarea/Textarea.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
diff --git a/frontend/app/components/ui/textarea/index.ts b/frontend/app/components/ui/textarea/index.ts
new file mode 100644
index 00000000..8ce91e9c
--- /dev/null
+++ b/frontend/app/components/ui/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from "./Textarea.vue"
diff --git a/frontend/app/components/ui/tooltip/Tooltip.vue b/frontend/app/components/ui/tooltip/Tooltip.vue
new file mode 100644
index 00000000..2a393d6d
--- /dev/null
+++ b/frontend/app/components/ui/tooltip/Tooltip.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
diff --git a/frontend/app/components/ui/tooltip/TooltipContent.vue b/frontend/app/components/ui/tooltip/TooltipContent.vue
new file mode 100644
index 00000000..9f05463a
--- /dev/null
+++ b/frontend/app/components/ui/tooltip/TooltipContent.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/app/components/ui/tooltip/TooltipProvider.vue b/frontend/app/components/ui/tooltip/TooltipProvider.vue
new file mode 100644
index 00000000..395927d5
--- /dev/null
+++ b/frontend/app/components/ui/tooltip/TooltipProvider.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
diff --git a/frontend/app/components/ui/tooltip/TooltipTrigger.vue b/frontend/app/components/ui/tooltip/TooltipTrigger.vue
new file mode 100644
index 00000000..3332950e
--- /dev/null
+++ b/frontend/app/components/ui/tooltip/TooltipTrigger.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
diff --git a/frontend/app/components/ui/tooltip/index.ts b/frontend/app/components/ui/tooltip/index.ts
new file mode 100644
index 00000000..8f8d514d
--- /dev/null
+++ b/frontend/app/components/ui/tooltip/index.ts
@@ -0,0 +1,4 @@
+export { default as Tooltip } from "./Tooltip.vue"
+export { default as TooltipContent } from "./TooltipContent.vue"
+export { default as TooltipProvider } from "./TooltipProvider.vue"
+export { default as TooltipTrigger } from "./TooltipTrigger.vue"
diff --git a/frontend/app/composables/columns.ts b/frontend/app/composables/columns.ts
deleted file mode 100644
index 55840de2..00000000
--- a/frontend/app/composables/columns.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import type { ColumnDef } from '@tanstack/vue-table'
-import type { Alert } from '~/composables/useAlerts'
-import { Badge } from '@/components/ui/badge'
-import { Checkbox } from '@/components/ui/checkbox'
-import { h } from 'vue'
-import DataTableColumnHeader from '@/components/DataTableColumnHeader.vue'
-
-export const severityOptions = [
- {
- value: 'high',
- label: 'High',
- },
- {
- value: 'medium',
- label: 'Medium',
- },
- {
- value: 'low',
- label: 'Low',
- },
-]
-
-export const columns: ColumnDef[] = [
- {
- id: 'select',
- header: ({ table }) => h('div', { class: 'w-[48px] flex items-center justify-center' }, [
- h(Checkbox, {
- 'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() ? 'indeterminate' : false),
- 'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
- 'aria-label': 'Select all',
- 'class': 'translate-y-[2px]',
- }),
- ]),
- cell: ({ row }) => h('div', { class: 'w-[48px] flex items-center justify-center' }, [
- h(Checkbox, {
- 'checked': row.getIsSelected(),
- 'onUpdate:checked': value => row.toggleSelected(!!value),
- 'aria-label': 'Select row',
- 'class': 'translate-y-[2px]',
- }),
- ]),
- enableSorting: false,
- enableHiding: false,
- },
- {
- accessorKey: 'alert_id',
- header: ({ column }) => h(DataTableColumnHeader, { column, title: 'ID' }),
- cell: ({ row }) => h('div', { class: 'w-[80px] font-medium' }, row.getValue('alert_id')),
- enableHiding: false,
- },
- {
- accessorKey: 'severity',
- header: ({ column }) => h(DataTableColumnHeader, { column, title: 'Severity' }),
- cell: ({ row }) => {
- const severity = severityOptions.find(
- status => status.value === row.getValue('severity'),
- )
- if (!severity) return null
- return h('div', { class: 'flex items-center' }, [
- h('div', { class: 'flex items-center gap-2' }, [
- h(Badge, {
- variant: severity.value === 'high' ? 'destructive' : 'default',
- class: 'capitalize',
- }, () => severity.label),
- ]),
- ])
- },
- filterFn: (row, id, value) => {
- return value.includes(row.getValue(id))
- },
- },
- {
- accessorKey: 'detect_time',
- header: ({ column }) => h(DataTableColumnHeader, { column, title: 'Time' }),
- cell: ({ row }) => {
- const timeObj = row.getValue('detect_time') as { time: string; usec: number; gmtoff: number }
-
- try {
- // Parse the base time
- const baseDate = new Date(timeObj.time)
-
- // Add microseconds (convert to milliseconds by dividing by 1000)
- baseDate.setMilliseconds(timeObj.usec / 1000)
-
- // Adjust for GMT offset (gmtoff is in seconds)
- const userTimezoneOffset = baseDate.getTimezoneOffset() * 60 // Convert minutes to seconds
- const targetOffset = timeObj.gmtoff
- const offsetDiff = targetOffset + userTimezoneOffset
- baseDate.setSeconds(baseDate.getSeconds() + offsetDiff)
-
- // Format the date in a readable way
- const dateFormatter = new Intl.DateTimeFormat('de', {
- day: '2-digit',
- month: 'short',
- year: '2-digit',
- hour: '2-digit',
- minute: '2-digit',
- })
-
- return h('div', { class: 'w-[150px]' }, dateFormatter.format(baseDate))
- } catch (error) {
- console.error('Error parsing date:', error, timeObj)
- return h('div', { class: 'w-[150px] text-destructive' }, 'Invalid Date Format')
- }
- },
- },
- {
- accessorKey: 'classification_text',
- id: 'classification_text',
- header: ({ column }) => h(DataTableColumnHeader, { column, title: 'Classification' }),
- cell: ({ row }) => h('div', { class: 'max-w-[500px] truncate' }, row.getValue('classification_text')),
- },
- {
- accessorKey: 'source_ipv4',
- header: ({ column }) => h(DataTableColumnHeader, { column, title: 'Source IP' }),
- cell: ({ row }) => h('div', { class: 'w-[120px]' }, row.getValue('source_ipv4')),
- },
- {
- accessorKey: 'target_ipv4',
- header: ({ column }) => h(DataTableColumnHeader, { column, title: 'Target IP' }),
- cell: ({ row }) => h('div', { class: 'w-[120px]' }, row.getValue('target_ipv4')),
- },
- {
- accessorKey: 'analyzer.name',
- id: 'analyzer',
- header: ({ column }) => h(DataTableColumnHeader, { column, title: 'Analyzer' }),
- cell: ({ row }) => h('div', { class: 'w-[150px]' }, row.original.analyzer.name),
- },
-]
\ No newline at end of file
diff --git a/frontend/app/composables/useAlertStream.ts b/frontend/app/composables/useAlertStream.ts
new file mode 100644
index 00000000..eb048f04
--- /dev/null
+++ b/frontend/app/composables/useAlertStream.ts
@@ -0,0 +1,59 @@
+interface UseAlertStreamOptions {
+ immediate?: boolean
+ onNewAlerts?: (count: number) => void
+ debounceMs?: number
+ requireIps?: Ref
+}
+
+interface AlertNotification {
+ count: number
+ latest_id: number
+}
+
+export function useAlertStream(options: UseAlertStreamOptions = {}) {
+ const { immediate = true, onNewAlerts, debounceMs = 1000, requireIps } = options
+
+ const debouncedOnNewAlerts = onNewAlerts
+ ? useDebounceFn(onNewAlerts, debounceMs)
+ : undefined
+
+ const url = computed(() => {
+ const base = '/api/alerts-stream'
+ if (requireIps && !requireIps.value) {
+ return `${base}?require_ips=false`
+ }
+ return base
+ })
+
+ const { status, data, error, close, open } = useEventSource(url, ['alerts'], {
+ immediate,
+ withCredentials: true,
+ autoReconnect: {
+ retries: 10,
+ delay: 5000,
+ onFailed() {
+ console.error('[AlertStream] Failed to reconnect after max retries')
+ },
+ },
+ })
+
+ if (import.meta.client) {
+ useEventListener('beforeunload', close)
+ onScopeDispose(close)
+ }
+
+ watch(data, (raw) => {
+ if (!raw) return
+ try {
+ const notification = JSON.parse(raw) as AlertNotification
+ debouncedOnNewAlerts?.(notification.count)
+ } catch {}
+ })
+
+ return {
+ status,
+ error,
+ close,
+ open,
+ }
+}
diff --git a/frontend/app/composables/useAlertTableContext.ts b/frontend/app/composables/useAlertTableContext.ts
new file mode 100644
index 00000000..18b878ac
--- /dev/null
+++ b/frontend/app/composables/useAlertTableContext.ts
@@ -0,0 +1,23 @@
+import type { Table } from '@tanstack/vue-table'
+import type { useNavigableUrlState } from './useNavigableUrlState'
+
+export interface AlertTableContext {
+ urlState: ReturnType
+ table: Table
+ isGrouped: ComputedRef
+ pending: Ref
+}
+
+const AlertTableKey = Symbol('AlertTableContext') as InjectionKey
+
+export function provideAlertTableContext(context: AlertTableContext) {
+ provide(AlertTableKey, context)
+}
+
+export function useAlertTableContext() {
+ const context = inject(AlertTableKey)
+ if (!context) {
+ throw new Error('AlertTableContext not provided. Make sure to call provideAlertTableContext in a parent component.')
+ }
+ return context
+}
diff --git a/frontend/app/composables/useAlerts.ts b/frontend/app/composables/useAlerts.ts
deleted file mode 100644
index d8f27c59..00000000
--- a/frontend/app/composables/useAlerts.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-export interface Alert {
- alert_id: number
- message_id: string
- create_time: string
- detect_time: string
- classification_text: string
- severity: 'high' | 'medium' | 'low'
- source_ipv4: string
- target_ipv4: string
- analyzer: {
- id: string
- name: string
- }
-}
-
-interface AlertsResponse {
- total: number
- items: Alert[]
- page: number
- size: number
-}
-
-interface AlertsFilter {
- search: string
- severity: string[]
- timeRange: string
- page: number
- size: number
- sort_by?: 'detect_time' | 'create_time' | 'severity' | 'classification' | 'source_ip' | 'target_ip' | 'analyzer' | 'alert_id'
- sort_order?: 'asc' | 'desc'
-}
-
-export function useAlerts() {
- const filters = reactive({
- search: '',
- severity: [],
- timeRange: '1 day',
- page: 1,
- size: 20,
- })
-
- const { data, pending, error, refresh } = useFetch('/api/alerts', {
- query: computed(() => ({
- ...filters,
- })),
- })
-
- const alerts = computed(() => data.value?.items ?? [])
- const total = computed(() => data.value?.total ?? 0)
- const totalPages = computed(() => {
- if (!total.value) return 0
- return Math.ceil(total.value / filters.size)
- })
-
- const setFilter = (key: K, value: AlertsFilter[K]) => {
- filters[key] = value
- if (key !== 'page') {
- filters.page = 1 // Reset page when filters change
- }
- }
-
- const clearFilters = () => {
- filters.search = ''
- filters.severity = []
- filters.timeRange = '1 day'
- filters.page = 1
- filters.size = 20
- filters.sort_by = undefined
- filters.sort_order = undefined
- }
-
- const setPage = (page: number) => {
- filters.page = page
- }
-
- const setPageSize = (size: number) => {
- filters.size = size
- filters.page = 1
- }
-
- const setSorting = (
- field?: 'detect_time' | 'create_time' | 'severity' | 'classification' | 'source_ip' | 'target_ip' | 'analyzer' | 'alert_id',
- order?: 'asc' | 'desc'
- ) => {
- filters.sort_by = field
- filters.sort_order = order
- }
-
- return {
- alerts,
- pending,
- error,
- filters: readonly(filters),
- total,
- totalPages,
- setFilter,
- clearFilters,
- refresh,
- setPage,
- setPageSize,
- setSorting
- }
-}
\ No newline at end of file
diff --git a/frontend/app/composables/useAlertsData.ts b/frontend/app/composables/useAlertsData.ts
new file mode 100644
index 00000000..1e24c960
--- /dev/null
+++ b/frontend/app/composables/useAlertsData.ts
@@ -0,0 +1,143 @@
+/**
+ * Alerts data fetching composable.
+ * Minimal wrapper around useFetch with URL state sync.
+ *
+ * SSE refresh behavior:
+ * - All presets: Token in fetchKey β triggers data refresh on SSE
+ * - Relative presets (last-24h): Token in fetchQuery β dates recalculate with fresh Date()
+ * - Non-relative presets (today): Dates stay fixed, but data still refreshes
+ * - Explicit user dates: No SSE refresh (user-selected range)
+ */
+import { getPresetRange, isRelativePreset, getActivePresetId, type DatePresetId } from '@/utils/datePresets'
+
+export function useAlertsData(urlState: ReturnType) {
+ const { sortFieldMap, filterFieldMap } = useAlertTableColumns()
+ const { token: sseRefreshToken } = useSseRefreshToken()
+
+ const isGrouped = computed(() => urlState.view.value === 'grouped')
+ const fetchUrl = computed(() => isGrouped.value ? '/api/alerts/groups' : '/api/alerts')
+
+ const fetchKey = computed(() => {
+ const presetId = getActivePresetId(urlState.filters.value)
+ const filters = urlState.filters.value
+ const hasExplicitDates = !!(filters.start_date && filters.end_date) && !presetId
+ // Include token for SSE refresh: any preset OR default fallback (but not explicit user dates)
+ const includeToken = !!presetId || !hasExplicitDates
+
+ return `alerts-${btoa(JSON.stringify({
+ view: urlState.view.value,
+ page: urlState.page.value,
+ pageSize: urlState.pageSize.value,
+ sortBy: urlState.sortBy.value,
+ sortOrder: urlState.sortOrder.value,
+ filters: filters,
+ ...(includeToken && { t: sseRefreshToken.value }),
+ }))}`
+ })
+
+ const fetchQuery = computed(() => {
+ const activePreset = getActivePresetId(urlState.filters.value)
+ const sortBy = urlState.sortBy.value
+ const mappedSort = sortBy in sortFieldMap ? sortFieldMap[sortBy as keyof typeof sortFieldMap] : sortBy
+ const urlFilters = urlState.filters.value
+ const hasExplicitDates = !!(urlFilters.start_date && urlFilters.end_date)
+
+ // Build filters without date_preset
+ const filters: Record = {}
+ for (const [k, v] of Object.entries(urlFilters)) {
+ if (k === 'date_preset') continue
+ filters[k in filterFieldMap ? filterFieldMap[k as keyof typeof filterFieldMap] : k] = v
+ }
+
+ // Convert preset to dates (with SSE token dependency for sliding windows)
+ if (activePreset) {
+ if (isRelativePreset(activePreset)) {
+ void sseRefreshToken.value
+ }
+ const range = getPresetRange(activePreset)
+ filters.start_date = range.from.toISOString()
+ filters.end_date = range.to.toISOString()
+ } else if (!hasExplicitDates) {
+ // Default fallback - sliding 24h window
+ void sseRefreshToken.value
+ const range = getPresetRange('last-24-hours')
+ filters.start_date = range.from.toISOString()
+ filters.end_date = range.to.toISOString()
+ }
+
+ return {
+ page: urlState.page.value,
+ size: urlState.pageSize.value,
+ sort_by: mappedSort || 'detect_time',
+ sort_order: urlState.sortOrder.value,
+ ...filters
+ }
+ })
+
+ // Explicit generic required - catch-all proxy returns untyped data
+ // Nuxt natively watches reactive query - no manual watchers needed
+ const { data, pending, error, refresh, status } = useFetch(fetchUrl, {
+ key: fetchKey,
+ query: fetchQuery,
+ server: true,
+ lazy: false,
+ dedupe: 'defer',
+ // Strip analyzer/analyzer_host from grouped alert details before SSR serialization.
+ // These arrays are never rendered in the table β only classification, count, detected_at are used.
+ // Saves ~30-50% of grouped response payload from the SSR HTML.
+ transform: (response) => {
+ if ('groups' in response) {
+ return {
+ ...response,
+ groups: response.groups.map(g => ({
+ ...g,
+ alerts: g.alerts.map(({ classification, count, detected_at }) => ({
+ classification, count, detected_at,
+ })),
+ })),
+ } as GroupedAlertResponse
+ }
+ return response
+ },
+ })
+
+ // Type guard - zero runtime cost, just checks property existence
+ const isGroupedResponse = (d: unknown): d is GroupedAlertResponse =>
+ d !== null && typeof d === 'object' && 'groups' in d
+
+ // Derived state - returns empty during view transition to prevent column/data mismatch
+ const displayData = computed(() => {
+ if (!data.value) return []
+ if (isGroupedResponse(data.value)) {
+ if (!isGrouped.value) return [] // Grouped data but ungrouped view - transitioning
+ return data.value.groups
+ }
+ if (isGrouped.value) return [] // Ungrouped data but grouped view - transitioning
+ return data.value.items ?? []
+ })
+
+ const paginationInfo = computed(() => {
+ if (!data.value) return { total: 0, pages: 0, page: 1, size: 100 }
+ return isGroupedResponse(data.value)
+ ? data.value.pagination
+ : (data.value as AlertListResponse).pagination
+ })
+
+ const tableTotals = computed(() => {
+ if (!data.value) return { rows: 0, alerts: 0, total: 0 }
+ if (isGroupedResponse(data.value)) {
+ return {
+ rows: data.value.groups.length,
+ alerts: data.value.total_alerts,
+ total: data.value.pagination.total
+ }
+ }
+ const items = (data.value as AlertListResponse).items ?? []
+ return { rows: items.length, alerts: items.length, total: paginationInfo.value.total }
+ })
+
+ return {
+ data, pending, error, status, refresh,
+ isGrouped, displayData, paginationInfo, tableTotals, fetchKey,
+ }
+}
diff --git a/frontend/app/composables/useAlertsLiveMode.ts b/frontend/app/composables/useAlertsLiveMode.ts
new file mode 100644
index 00000000..a69401da
--- /dev/null
+++ b/frontend/app/composables/useAlertsLiveMode.ts
@@ -0,0 +1,35 @@
+export function useAlertsLiveMode(opts: {
+ status: Ref<'idle' | 'pending' | 'success' | 'error'>
+ rowSelection: Ref>
+ requireIps?: Ref
+}) {
+ const isSilentRefresh = ref(false)
+ const isLive = ref(true)
+ const { bump: bumpSseToken } = useSseRefreshToken()
+
+ function performSseRefresh() {
+ if (opts.status.value === 'pending' || Object.keys(opts.rowSelection.value).length > 0) return
+
+ isSilentRefresh.value = true
+ bumpSseToken()
+ }
+
+ const { status: sseStatus, error: sseError, close: sseClose, open: sseOpen } = useAlertStream({
+ onNewAlerts: (_count) => { if (isLive.value) performSseRefresh() },
+ debounceMs: 2000,
+ requireIps: opts.requireIps,
+ })
+
+ function toggleLive() {
+ isLive.value = !isLive.value
+ if (isLive.value) sseOpen()
+ else sseClose()
+ }
+
+ const showLoadingOverlay = computed(() => opts.status.value === 'pending' && !isSilentRefresh.value)
+
+ return {
+ isLive, isSilentRefresh, sseStatus, sseError, showLoadingOverlay,
+ toggleLive, resetSilentRefresh: () => { isSilentRefresh.value = false },
+ }
+}
diff --git a/frontend/app/composables/useHeartbeatStream.ts b/frontend/app/composables/useHeartbeatStream.ts
new file mode 100644
index 00000000..70c104f1
--- /dev/null
+++ b/frontend/app/composables/useHeartbeatStream.ts
@@ -0,0 +1,44 @@
+interface UseHeartbeatStreamOptions {
+ immediate?: boolean
+ onNewHeartbeats?: () => void
+ debounceMs?: number
+}
+
+export function useHeartbeatStream(options: UseHeartbeatStreamOptions = {}) {
+ const { immediate = true, onNewHeartbeats, debounceMs = 1000 } = options
+
+ const debouncedOnNewHeartbeats = onNewHeartbeats
+ ? useDebounceFn(onNewHeartbeats, debounceMs)
+ : undefined
+
+ const url = '/api/heartbeats-stream'
+
+ const { status, data, error, close, open } = useEventSource(url, ['heartbeat_update'], {
+ immediate,
+ withCredentials: true,
+ autoReconnect: {
+ retries: 10,
+ delay: 5000,
+ onFailed() {
+ console.error('[HeartbeatStream] Failed to connect after max retries')
+ },
+ },
+ })
+
+ if (import.meta.client) {
+ useEventListener('beforeunload', close)
+ onScopeDispose(close)
+ }
+
+ watch(data, (raw) => {
+ if (!raw) return
+ debouncedOnNewHeartbeats?.()
+ })
+
+ return {
+ status,
+ error,
+ close,
+ open,
+ }
+}
diff --git a/frontend/app/composables/useHeartbeats.ts b/frontend/app/composables/useHeartbeats.ts
new file mode 100644
index 00000000..d245c148
--- /dev/null
+++ b/frontend/app/composables/useHeartbeats.ts
@@ -0,0 +1,223 @@
+const WELL_KNOWN_STATUSES = ['active', 'inactive', 'offline', 'unknown'] as const
+
+type WellKnownStatus = (typeof WELL_KNOWN_STATUSES)[number]
+
+export function useHeartbeatStatus(options: {
+ days?: number
+ autoRefreshMs?: number
+ immediate?: boolean
+} = {}) {
+ const days = ref(options.days ?? 1)
+ const lastUpdated = ref(null)
+ const autoRefreshInterval = ref(options.autoRefreshMs ?? 30_000)
+ const autoRefreshEnabled = ref(true)
+
+ const fetchKey = computed(() => `heartbeat-status-${days.value}`)
+ const fetchQuery = computed(() => ({ days: days.value }))
+
+ const fetchResult = useFetch('/api/heartbeats/status', {
+ key: fetchKey,
+ query: fetchQuery,
+ watch: [days],
+ immediate: options.immediate ?? true,
+ lazy: !(options.immediate ?? true),
+ server: true,
+ })
+
+ const { data, pending, error, refresh, status } = fetchResult
+
+ // Only true on INITIAL load - not during background refresh
+ // This prevents skeleton flash when we already have data
+ const isInitialLoading = computed(() => pending.value && !data.value)
+
+ const nodes = computed(() => data.value?.nodes ?? [])
+ const totalNodes = computed(() => data.value?.total_nodes ?? 0)
+ const totalAgents = computed(() => data.value?.total_agents ?? 0)
+
+ const statusSummary = computed(() => {
+ const summary = data.value?.status_summary ?? {}
+ const normalised: HeartbeatStatusSummary = {}
+
+ for (const key of WELL_KNOWN_STATUSES) {
+ normalised[key] = summary[key] ?? 0
+ }
+
+ for (const [key, value] of Object.entries(summary)) {
+ if (normalised[key] === undefined) {
+ normalised[key] = value
+ }
+ }
+
+ return normalised
+ })
+
+ const statusSummaryList = computed(() => {
+ const base = WELL_KNOWN_STATUSES.map((statusKey) => ({
+ status: statusKey as string,
+ count: statusSummary.value[statusKey] ?? 0,
+ }))
+
+ const extras = Object.entries(statusSummary.value)
+ .filter(([key]) => !WELL_KNOWN_STATUSES.includes(key as WellKnownStatus))
+ .map(([statusKey, count]) => ({ status: statusKey, count }))
+
+ return [...base, ...extras]
+ })
+
+ watch(
+ data,
+ (value) => {
+ if (value) {
+ lastUpdated.value = new Date()
+ }
+ },
+ { immediate: true }
+ )
+
+ // Only set up interval-based refresh if autoRefreshMs > 0
+ // When SSE is used, pass autoRefreshMs: 0 to disable polling
+ const { pause: pauseAutoRefresh, resume: resumeAutoRefresh } = useIntervalFn(
+ () => {
+ refresh()
+ },
+ autoRefreshInterval,
+ { immediate: false }
+ )
+
+ watch(
+ autoRefreshEnabled,
+ (enabled) => {
+ // Don't start polling if interval is 0 (SSE mode)
+ if (enabled && autoRefreshInterval.value > 0) {
+ resumeAutoRefresh()
+ } else {
+ pauseAutoRefresh()
+ }
+ },
+ { immediate: true }
+ )
+
+ onBeforeUnmount(() => {
+ pauseAutoRefresh()
+ })
+
+ return {
+ data,
+ nodes,
+ totalNodes,
+ totalAgents,
+ statusSummary,
+ statusSummaryList,
+ pending,
+ isInitialLoading, // Use this for skeletons instead of pending
+ error,
+ refresh,
+ status,
+ days,
+ setDays(value: number) {
+ days.value = value
+ },
+ lastUpdated,
+ autoRefreshEnabled,
+ autoRefreshInterval,
+ setAutoRefreshInterval(value: number) {
+ autoRefreshInterval.value = value
+ },
+ }
+}
+
+export function useHeartbeatTimeline(options: { hours?: number; pageSize?: number } = {}) {
+ const hours = ref(options.hours ?? 24)
+ const page = ref(1)
+ const pageSize = ref(options.pageSize ?? 100)
+
+ const fetchKey = computed(() => `heartbeat-timeline-${hours.value}-${page.value}-${pageSize.value}`)
+ const fetchQuery = computed(() => ({
+ hours: hours.value,
+ page: page.value,
+ size: pageSize.value,
+ }))
+
+ const fetchResult = useFetch('/api/heartbeats/timeline', {
+ key: fetchKey,
+ query: fetchQuery,
+ watch: [hours, page, pageSize],
+ immediate: true,
+ lazy: false,
+ server: true,
+ })
+
+ const { data, pending, error, refresh, status } = fetchResult
+
+ // Only true on INITIAL load - not during background refresh
+ const isInitialLoading = computed(() => pending.value && !data.value)
+
+ const items = computed(() => data.value?.items ?? [])
+ const pagination = computed(() => data.value?.pagination ?? {
+ total: 0,
+ page: page.value,
+ size: pageSize.value,
+ pages: 0,
+ })
+
+ const setPage = (value: number) => {
+ page.value = Math.max(1, value)
+ }
+
+ const setHours = (value: number) => {
+ hours.value = value
+ page.value = 1
+ }
+
+ return {
+ data,
+ items,
+ pending,
+ isInitialLoading, // Use this for skeletons instead of pending
+ error,
+ refresh,
+ status,
+ pagination,
+ hours,
+ page,
+ pageSize,
+ setPage,
+ setHours,
+ setPageSize(value: number) {
+ pageSize.value = Math.max(1, value)
+ },
+ }
+}
+
+export function formatRelativeFromSeconds(seconds: number | null | undefined) {
+ if (seconds == null || seconds < 0) {
+ return 'No heartbeat received yet'
+ }
+
+ if (seconds < 60) {
+ return `${seconds} second${seconds === 1 ? '' : 's'} ago`
+ }
+
+ const minutes = Math.floor(seconds / 60)
+ if (minutes < 60) {
+ return `${minutes} minute${minutes === 1 ? '' : 's'} ago`
+ }
+
+ const hours = Math.floor(minutes / 60)
+ if (hours < 24) {
+ return `${hours} hour${hours === 1 ? '' : 's'} ago`
+ }
+
+ const days = Math.floor(hours / 24)
+ if (days < 30) {
+ return `${days} day${days === 1 ? '' : 's'} ago`
+ }
+
+ const months = Math.floor(days / 30)
+ if (months < 12) {
+ return `${months} month${months === 1 ? '' : 's'} ago`
+ }
+
+ const years = Math.floor(months / 12)
+ return `${years} year${years === 1 ? '' : 's'} ago`
+}
diff --git a/frontend/app/composables/useNavigableUrlState.ts b/frontend/app/composables/useNavigableUrlState.ts
new file mode 100644
index 00000000..2da81e90
--- /dev/null
+++ b/frontend/app/composables/useNavigableUrlState.ts
@@ -0,0 +1,324 @@
+import type { LocationQuery } from 'vue-router'
+import type { SortingState, ColumnFiltersState, VisibilityState } from '@tanstack/vue-table'
+import { useDebounceFn } from '@vueuse/core'
+
+type PageSize = 10 | 20 | 50 | 100
+type SortOrder = 'asc' | 'desc'
+type ViewMode = 'grouped' | 'ungrouped'
+
+const VALID_PAGE_SIZES: readonly PageSize[] = [10, 20, 50, 100] as const
+
+export function useNavigableUrlState(options: {
+ defaultView?: ViewMode
+ defaultPageSize?: number
+ defaultSortBy?: string
+ defaultSortOrder?: SortOrder
+ defaultGroupedSortBy?: string
+ defaultUngroupedSortBy?: string
+} = {}) {
+ const route = useRoute()
+ const router = useRouter()
+
+ const defaults = {
+ view: (options.defaultView || 'grouped') as ViewMode,
+ pageSize: (options.defaultPageSize || 100) as PageSize,
+ sortBy: options.defaultSortBy || 'detected_at',
+ sortOrder: (options.defaultSortOrder || 'desc') as SortOrder,
+ groupedSortBy: options.defaultGroupedSortBy || 'detected_at',
+ ungroupedSortBy: options.defaultUngroupedSortBy || 'detected_at',
+ } as const
+
+ const validatePageSize = (size: number): PageSize => {
+ return VALID_PAGE_SIZES.includes(size as PageSize) ? (size as PageSize) : defaults.pageSize
+ }
+
+ const validateSortOrder = (order: string): SortOrder => {
+ return order === 'asc' ? 'asc' : 'desc'
+ }
+
+ const validateView = (view: string): ViewMode => {
+ return view === 'ungrouped' ? 'ungrouped' : 'grouped'
+ }
+
+ const parseFilters = (filterString: string): Record => {
+ if (!filterString?.trim()) return {}
+
+ try {
+ const parsed = JSON.parse(filterString)
+
+ if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+ return parsed as Record
+ }
+
+ return {}
+ } catch {
+ return {}
+ }
+ }
+
+ const serializeFilters = (filters: Record): string => {
+ const keys = Object.keys(filters)
+ if (keys.length === 0) return ''
+ return JSON.stringify(filters)
+ }
+
+ const parseHiddenColumns = (colString: string): string[] => {
+ if (!colString?.trim()) return []
+ return colString.split(',').filter(col => col.trim())
+ }
+
+ // Debounce accumulator - batches rapid URL updates to prevent race conditions
+ // Uses plain object (not ref) to avoid reactivity overhead
+ let pendingUpdates: LocationQuery = {}
+ let pendingHasUserAction = false
+
+ // Clear pending updates to prevent stale debounced flushes from corrupting URL
+ // MUST be called before any direct router.push/replace that bypasses the debounce
+ const clearPendingUpdates = () => {
+ pendingUpdates = {}
+ pendingHasUserAction = false
+ }
+
+ const flushPendingUpdates = async () => {
+ if (Object.keys(pendingUpdates).length === 0) return
+
+ // CRITICAL: Capture and reset BEFORE await to prevent concurrent flush issues
+ const updates = { ...pendingUpdates }
+ const isUserAction = pendingHasUserAction
+ pendingUpdates = {}
+ pendingHasUserAction = false
+
+ const currentQuery = { ...route.query }
+ const newQuery = { ...currentQuery, ...updates }
+
+ Object.keys(newQuery).forEach(key => {
+ if (newQuery[key] === '' || newQuery[key] === null || newQuery[key] === undefined) {
+ delete newQuery[key]
+ }
+ })
+
+ if (isUserAction) {
+ await router.push({ query: newQuery })
+ } else {
+ await router.replace({ query: newQuery })
+ }
+ }
+
+ // 50ms debounce / 200ms maxWait: balances batching rapid updates vs responsiveness
+ const debouncedFlush = useDebounceFn(flushPendingUpdates, 50, { maxWait: 200 })
+
+ const updateUrl = (updates: LocationQuery, isUserAction = false) => {
+ Object.assign(pendingUpdates, updates)
+ if (isUserAction) pendingHasUserAction = true // Sticky: once true, stays true until flush
+ debouncedFlush()
+ }
+
+ // Computed refs that read from route.query
+ const view = computed<'grouped' | 'ungrouped'>({
+ get: () => validateView(route.query.view as string || defaults.view),
+ set: (value) => updateUrl({ view: value }, true) // User changing view
+ })
+
+ const getDefaultSortString = () => {
+ const field = view.value === 'grouped' ? defaults.groupedSortBy : defaults.ungroupedSortBy
+ return `${field}:${defaults.sortOrder}`
+ }
+
+ const page = computed({
+ get: () => Math.max(1, parseInt(String(route.query.page || 1))),
+ set: (value) => updateUrl({ page: String(value) }, true) // User changing page
+ })
+
+ const pageSize = computed({
+ get: () => validatePageSize(parseInt(String(route.query.size || defaults.pageSize))),
+ set: (value) => updateUrl({ size: String(value) }, true) // User changing page size
+ })
+
+ const sortBy = computed({
+ get: () => {
+ const sortValue = route.query.sort as string || getDefaultSortString()
+ const [field] = sortValue.split(':')
+ return field || defaults.sortBy
+ },
+ set: (value) => {
+ const currentOrder = sortOrder.value
+ updateUrl({ sort: `${value}:${currentOrder}` }, true) // User sorting
+ }
+ })
+
+ const sortOrder = computed<'asc' | 'desc'>({
+ get: () => {
+ const sortValue = route.query.sort as string || getDefaultSortString()
+ const [, order] = sortValue.split(':')
+ return validateSortOrder(order || defaults.sortOrder)
+ },
+ set: (value) => {
+ const currentBy = sortBy.value
+ updateUrl({ sort: `${currentBy}:${value}` }, true) // User sorting
+ }
+ })
+
+ const filters = computed>({
+ get: () => parseFilters(route.query.filter as string || ''),
+ set: (value) => updateUrl({ filter: serializeFilters(value) }, true) // User filtering
+ })
+
+ const hiddenColumns = computed({
+ get: () => parseHiddenColumns(route.query.cols as string || ''),
+ set: (value) => updateUrl({ cols: value.join(',') }, true) // User toggling columns
+ })
+
+ const autoRefresh = computed({
+ get: () => {
+ const value = parseInt(String(route.query.refresh || 30))
+ return [0, 30, 60, 300, 600].includes(value) ? value : 30
+ },
+ set: (value) => updateUrl({ refresh: String(value) }, true) // User changing refresh
+ })
+
+ // Convert to/from TanStack Table state
+ const toSortingState = computed((): SortingState => [{
+ id: sortBy.value,
+ desc: sortOrder.value === 'desc'
+ }])
+
+ const fromSortingState = (state: SortingState, isUserAction = true): void => {
+ const firstSort = state[0]
+ if (firstSort) {
+ const newSort = `${firstSort.id}:${firstSort.desc ? 'desc' : 'asc'}`
+ updateUrl({ sort: newSort }, isUserAction)
+ }
+ }
+
+ const toFilterState = computed((): ColumnFiltersState => {
+ return Object.entries(filters.value).map(([id, value]) => ({ id, value }))
+ })
+
+ const fromFilterState = (state: ColumnFiltersState, isUserAction = true): void => {
+ const newFilters: Record = {}
+
+ for (const filter of state) {
+ if (filter.value && (typeof filter.value === 'string' || typeof filter.value === 'number')) {
+ newFilters[filter.id] = filter.value
+ }
+ }
+
+ updateUrl({ filter: serializeFilters(newFilters) }, isUserAction)
+ }
+
+ const toVisibilityState = computed((): VisibilityState => {
+ const visibility: VisibilityState = {}
+
+ const allColumnIds = [
+ 'source_ipv4', 'target_ipv4',
+ 'detected_at', 'severity', 'classification_text', 'analyzer',
+ 'total_count'
+ ]
+
+ for (const col of allColumnIds) {
+ visibility[col] = true
+ }
+
+ for (const col of hiddenColumns.value) {
+ visibility[col] = false
+ }
+
+ return visibility
+ })
+
+ const fromVisibilityState = (state: VisibilityState, isUserAction = true): void => {
+ const hidden: string[] = []
+ for (const [col, visible] of Object.entries(state)) {
+ if (!visible) {
+ hidden.push(col)
+ }
+ }
+ updateUrl({ cols: hidden.join(',') }, isUserAction)
+ }
+
+ const toPaginationState = computed(() => ({
+ pageIndex: page.value - 1,
+ pageSize: pageSize.value
+ }))
+
+ const fromPaginationState = (pageIndex: number, size: number, isUserAction = true): void => {
+ updateUrl({
+ page: String(pageIndex + 1),
+ size: String(size)
+ }, isUserAction)
+ }
+
+ // High-level update functions
+ const updateFilters = (newFilters: Record, isUserAction = true): void => {
+ updateUrl({ filter: serializeFilters(newFilters) }, isUserAction)
+ }
+
+ const updateView = (newView: 'grouped' | 'ungrouped', isUserAction = true): void => {
+ updateUrl({ view: newView }, isUserAction)
+ }
+
+ // Safe navigation wrapper β clears pending debounced updates before pushing
+ // MUST be used instead of raw router.push() to prevent stale flushes from corrupting URL
+ const navigateTo = async (to: Parameters[0]) => {
+ clearPendingUpdates()
+ await router.push(to)
+ }
+
+ // Navigate to alert details (always a user action)
+ const navigateToDetails = async (details: { sourceIp: string; targetIp: string; classification: string; expectedCount?: number }) => {
+ // Set skeleton hint if we know expected row count
+ if (details.expectedCount) {
+ const { setHint } = useSkeletonHint()
+ setHint(details.expectedCount)
+ }
+
+ const currentFilters = filters.value
+
+ await navigateTo({
+ query: {
+ ...route.query,
+ view: 'ungrouped',
+ size: '100', // Show 100 alerts by default when viewing group details
+ filter: serializeFilters({
+ ...currentFilters,
+ source_ipv4: details.sourceIp,
+ target_ipv4: details.targetIp,
+ classification_text: details.classification
+ }),
+ page: '1',
+ sort: 'detected_at:desc'
+ }
+ })
+ }
+
+ const resetToDefaults = (): void => {
+ clearPendingUpdates()
+ router.replace({ query: {} })
+ }
+
+ return {
+ view,
+ page,
+ pageSize,
+ sortBy,
+ sortOrder,
+ filters,
+ hiddenColumns,
+ autoRefresh,
+
+ toSortingState,
+ fromSortingState,
+ toFilterState,
+ fromFilterState,
+ toVisibilityState,
+ fromVisibilityState,
+ toPaginationState,
+ fromPaginationState,
+
+ updateFilters,
+ updateView,
+ navigateTo,
+ navigateToDetails,
+ resetToDefaults
+ }
+}
diff --git a/frontend/app/composables/useSkeletonHint.ts b/frontend/app/composables/useSkeletonHint.ts
new file mode 100644
index 00000000..18404947
--- /dev/null
+++ b/frontend/app/composables/useSkeletonHint.ts
@@ -0,0 +1,24 @@
+/**
+ * Shared skeleton row hint for smoother transitions.
+ * When navigating to a view with known row count (e.g., clicking badge "3"),
+ * set the hint so skeleton shows correct number of rows.
+ *
+ * Uses useState() for SSR safety - prevents state pollution between requests.
+ */
+export function useSkeletonHint() {
+ const skeletonHint = useState('skeleton-hint', () => null)
+
+ function setHint(count: number) {
+ skeletonHint.value = count
+ }
+
+ function clearHint() {
+ skeletonHint.value = null
+ }
+
+ return {
+ hint: skeletonHint,
+ setHint,
+ clearHint,
+ }
+}
diff --git a/frontend/app/composables/useSseRefreshToken.ts b/frontend/app/composables/useSseRefreshToken.ts
new file mode 100644
index 00000000..27206958
--- /dev/null
+++ b/frontend/app/composables/useSseRefreshToken.ts
@@ -0,0 +1,19 @@
+/**
+ * Shared SSE refresh token for coordinating updates between components.
+ * When SSE receives new alerts, bump this token to trigger refetches
+ * in all components that depend on it.
+ *
+ * Uses useState() for SSR safety - prevents state pollution between requests.
+ */
+export function useSseRefreshToken() {
+ const sseRefreshToken = useState('sse-refresh-token', () => 0)
+
+ function bump() {
+ sseRefreshToken.value = Date.now()
+ }
+
+ return {
+ token: sseRefreshToken,
+ bump,
+ }
+}
diff --git a/frontend/app/composables/useTimelineData.ts b/frontend/app/composables/useTimelineData.ts
new file mode 100644
index 00000000..8125ee8a
--- /dev/null
+++ b/frontend/app/composables/useTimelineData.ts
@@ -0,0 +1,92 @@
+import type { TimelineResponse, TimeFrame } from '~~/shared/types/timeline'
+import { getPresetRange, isRelativePreset, getActivePresetId } from '@/utils/datePresets'
+
+export function useTimelineData(urlState: ReturnType) {
+ const { token: sseRefreshToken } = useSseRefreshToken()
+
+ const dateRange = computed(() => {
+ const presetId = getActivePresetId(urlState.filters.value)
+ const filters = urlState.filters.value
+
+ if (presetId) {
+ if (isRelativePreset(presetId)) {
+ void sseRefreshToken.value
+ }
+ const range = getPresetRange(presetId)
+ return { start: range.from, end: range.to }
+ }
+
+ if (filters.start_date && filters.end_date) {
+ return { start: new Date(filters.start_date as string), end: new Date(filters.end_date as string) }
+ }
+
+ // Default: sliding 24h window - needs token dependency for SSE refresh
+ void sseRefreshToken.value
+ return { start: new Date(Date.now() - 24 * 60 * 60 * 1000), end: new Date() }
+ })
+
+ const timeFrame = computed(() => {
+ const hours = (dateRange.value.end.getTime() - dateRange.value.start.getTime()) / (1000 * 60 * 60)
+ if (hours <= 168) return 'hour'
+ if (hours <= 2160) return 'day'
+ return 'week'
+ })
+
+ const fetchKey = computed(() => {
+ const presetId = getActivePresetId(urlState.filters.value)
+ const filters = urlState.filters.value
+ const hasExplicitDates = !!(filters.start_date && filters.end_date) && !presetId
+ const includeToken = !!presetId || !hasExplicitDates
+
+ return `timeline-${btoa(JSON.stringify({
+ filters,
+ ...(includeToken && { t: sseRefreshToken.value }),
+ }))}`
+ })
+
+ const fetchQuery = computed(() => {
+ const query: Record = {
+ time_frame: timeFrame.value,
+ start_date: dateRange.value.start.toISOString(),
+ end_date: dateRange.value.end.toISOString(),
+ }
+ const { severity, classification_text, source_ipv4, target_ipv4, require_ips } = urlState.filters.value
+ if (severity) query.severity = String(severity)
+ if (classification_text) query.classification = String(classification_text)
+ if (source_ipv4) query.source_ip = String(source_ipv4)
+ if (target_ipv4) query.target_ip = String(target_ipv4)
+ if (require_ips === 'false') query.require_ips = false
+ return query
+ })
+
+ // server: false β Timeline.client.vue never renders on server,
+ // so shipping this data in the SSR HTML payload is pure waste
+ const { data, pending, error, refresh, status } = useFetch('/api/statistics/timeline', {
+ key: fetchKey,
+ query: fetchQuery,
+ server: false,
+ lazy: false,
+ dedupe: 'defer',
+ })
+
+ const chartSeries = computed(() => {
+ if (!data.value?.data) return [{ name: 'Alerts', data: [] as { x: number; y: number }[] }]
+
+ return [{
+ name: 'Alerts',
+ data: data.value.data
+ .map(p => ({ x: new Date(p.timestamp).getTime(), y: p.total }))
+ .filter(p => Number.isFinite(p.x))
+ }]
+ })
+
+ const totalAlerts = computed(() =>
+ data.value?.data?.reduce((sum, p) => sum + p.total, 0) ?? 0
+ )
+
+ return {
+ data, pending, error, status, refresh,
+ chartSeries, totalAlerts, timeFrame, dateRange,
+ fetchKey,
+ }
+}
diff --git a/frontend/app/error.vue b/frontend/app/error.vue
new file mode 100644
index 00000000..21d27ad6
--- /dev/null
+++ b/frontend/app/error.vue
@@ -0,0 +1,134 @@
+
+
+
+
+
+
+
+ {{ error?.statusCode || '500' }}
+
+
+ {{ errorTitle }}
+
+
+
+
+ {{ errorMessage }}
+
+
+
+
+
+
+
+
+
+ Developer Information
+
+
+ {{ JSON.stringify(error, null, 2) }}
+
+
+
+
+
+
+
+ {{ decodedNode }}
+
+ {{ decodedAgent }}
+
+
+
+
+
+
+ {{ decodedAgent }}
+ Node {{ decodedNode }}
+
+
+
+
+
+
+
+ Loading agent detailsβ¦
+
+
+
+
+
+ Agent not found
+
+ We could not find recent heartbeats for this agent within the selected window. Try expanding the lookback range or verify the agent is still reporting.
+
+
+
+
+
+
+ - Status
+ -
+
+
+
+
+ - Last heartbeat
+ -
+ {{ relativeLastHeartbeat }}
+
+ {{ formatAbsolute(agentInfo.latest_heartbeat_at) }}
+
+
+
+
+ - Heartbeat interval
+ -
+ Every {{ agentInfo.heartbeat_interval }} seconds
+ Not supplied
+
+
+
+ - Metadata
+ -
+ {{ agentInfo.model || 'Unknown model' }}
+ Β· v{{ agentInfo.version }}
+ Β· {{ agentInfo.class }}
+
+
+
+
+
+
+
+ Status lookback
+
+
+
+ Auto refresh
+
+
+
+
+
+
+
+
+
+ Timeline window
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Click to enable real-time updates
+
+
+ Connected - receiving live updates
+
+
+ Establishing connection...
+
+
+ Connection error - will retry automatically
+
+
+ Disconnected - will retry automatically
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
- Security Alerts
-
-
- View and manage security alerts for your organization
-
-
-
-
-
-
- Error
-
- {{ error.message }}
-
-
-
-
-
-
-
+
+
+ Prebetter
+ Prebetter Login
+ Sign in to access your security dashboard.
+
+
+
+
+ Sign in
+ Enter your credentials to continue.
+
+
+
+
+
+
+
+ Profile
+
+
+
+ Your Information
+
+
+
+
+
+ Username:
+ {{ user?.username }}
+
+
+ Email:
+ {{ user?.email }}
+
+
+ Full Name:
+ {{ user?.full_name || 'Not set' }}
+
+
+ Role:
+
+ {{ user?.is_superuser ? 'Administrator' : 'User' }}
+
+
+
+
+
+
+ Administration
+
+ Manage users and system settings
+
+
+
+
+
+
+
+
+
+
+ {{ alert.title }}
+
+ {{ alert.description }}
+
+
+
+ |