From acb1205653cbfa689f4ab91c82978376e91ed389 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 21:34:56 +0000
Subject: [PATCH 1/6] Initial plan


From 62f0d167610d5599459940103a85a1108351cd79 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 21:39:50 +0000
Subject: [PATCH 2/6] Add SSE infrastructure and integrate with backend
 mutations

Co-authored-by: danielswiatek <9080990+danielswiatek@users.noreply.github.com>
---
 apps/api/src/server.ts                        |   2 +
 .../anmeldung/anmeldungPublicCreate.ts        |   3 +
 .../anmeldung/anmeldungVerwaltungPatch.ts     |   5 +-
 .../veranstaltungVerwaltungCreate.ts          |   5 +-
 .../veranstaltungVerwaltungPatch.ts           |   5 +-
 apps/api/src/sse/SSEManager.ts                | 103 +++++++++++++++++
 apps/api/src/sse/helpers.ts                   |  30 +++++
 apps/api/src/sse/index.ts                     |   4 +
 apps/api/src/sse/routes.ts                    | 104 ++++++++++++++++++
 9 files changed, 258 insertions(+), 3 deletions(-)
 create mode 100644 apps/api/src/sse/SSEManager.ts
 create mode 100644 apps/api/src/sse/helpers.ts
 create mode 100644 apps/api/src/sse/index.ts
 create mode 100644 apps/api/src/sse/routes.ts

diff --git a/apps/api/src/server.ts b/apps/api/src/server.ts
index d7319e59..60e4abef 100644
--- a/apps/api/src/server.ts
+++ b/apps/api/src/server.ts
@@ -11,6 +11,7 @@ import { createContext } from './context.js'
 import { appRouter } from './index.js'
 import { logger as appLogger } from './logger.js'
 import * as routes from './routes/index.js'
+import { sseRouter } from './sse/index.js'
 import { makeApp } from './util/make-app.js'
 
 const staticRoot = resolve('./static')
@@ -52,6 +53,7 @@ const app = makeApp()
   .route('/api/import', routes.importRouter)
   .route('/api/file', routes.fileRouter)
   .route('/api/connect', routes.oidcRouter)
+  .route('/api/events', sseRouter)
   .use(
     serveStatic({
       root: staticRoot,
diff --git a/apps/api/src/services/anmeldung/anmeldungPublicCreate.ts b/apps/api/src/services/anmeldung/anmeldungPublicCreate.ts
index 857e69a7..d4a847f5 100644
--- a/apps/api/src/services/anmeldung/anmeldungPublicCreate.ts
+++ b/apps/api/src/services/anmeldung/anmeldungPublicCreate.ts
@@ -7,6 +7,7 @@ import prisma from '../../prisma.js'
 import { customFieldValuesCreateMany, defineCustomFieldValues } from '../../types/defineCustomFieldValues.js'
 import { definePublicMutateProcedure } from '../../types/defineProcedure.js'
 import logActivity from '../../util/activity.js'
+import { emitTableUpdate } from '../../sse/index.js'
 import { sendMail } from '../../util/mail.js'
 import { getPersonCreateData, personSchema } from '../person/schema/person.schema.js'
 import { updateMeiliPerson } from '../../meilisearch/person.js'
@@ -216,5 +217,7 @@ export const anmeldungPublicCreateProcedure = definePublicMutateProcedure({
         accessToken,
       },
     })
+
+    emitTableUpdate('anmeldung')
   },
 })
diff --git a/apps/api/src/services/anmeldung/anmeldungVerwaltungPatch.ts b/apps/api/src/services/anmeldung/anmeldungVerwaltungPatch.ts
index c69a1acb..86a61551 100644
--- a/apps/api/src/services/anmeldung/anmeldungVerwaltungPatch.ts
+++ b/apps/api/src/services/anmeldung/anmeldungVerwaltungPatch.ts
@@ -2,6 +2,7 @@ import { Role } from '@prisma/client'
 import z from 'zod'
 
 import prisma from '../../prisma.js'
+import { emitTableUpdate } from '../../sse/index.js'
 import { defineProtectedMutateProcedure } from '../../types/defineProcedure.js'
 
 export const anmeldungVerwaltungPatchProcedure = defineProtectedMutateProcedure({
@@ -15,7 +16,7 @@ export const anmeldungVerwaltungPatchProcedure = defineProtectedMutateProcedure(
     }),
   }),
   async handler(options) {
-    return prisma.anmeldung.update({
+    const result = await prisma.anmeldung.update({
       where: {
         id: options.input.id,
       },
@@ -24,5 +25,7 @@ export const anmeldungVerwaltungPatchProcedure = defineProtectedMutateProcedure(
         id: true,
       },
     })
+    emitTableUpdate('anmeldung')
+    return result
   },
 })
diff --git a/apps/api/src/services/veranstaltung/veranstaltungVerwaltungCreate.ts b/apps/api/src/services/veranstaltung/veranstaltungVerwaltungCreate.ts
index 6d116ff5..dd12815a 100644
--- a/apps/api/src/services/veranstaltung/veranstaltungVerwaltungCreate.ts
+++ b/apps/api/src/services/veranstaltung/veranstaltungVerwaltungCreate.ts
@@ -2,6 +2,7 @@ import { Role } from '@prisma/client'
 import z from 'zod'
 
 import prisma from '../../prisma.js'
+import { emitTableUpdate } from '../../sse/index.js'
 import { defineProtectedMutateProcedure } from '../../types/defineProcedure.js'
 
 export const veranstaltungVerwaltungCreateProcedure = defineProtectedMutateProcedure({
@@ -26,11 +27,13 @@ export const veranstaltungVerwaltungCreateProcedure = defineProtectedMutateProce
     }),
   }),
   async handler(options) {
-    return prisma.veranstaltung.create({
+    const result = await prisma.veranstaltung.create({
       data: options.input.data,
       select: {
         id: true,
       },
     })
+    emitTableUpdate('veranstaltung')
+    return result
   },
 })
diff --git a/apps/api/src/services/veranstaltung/veranstaltungVerwaltungPatch.ts b/apps/api/src/services/veranstaltung/veranstaltungVerwaltungPatch.ts
index e2e8111d..033c1523 100644
--- a/apps/api/src/services/veranstaltung/veranstaltungVerwaltungPatch.ts
+++ b/apps/api/src/services/veranstaltung/veranstaltungVerwaltungPatch.ts
@@ -2,6 +2,7 @@ import { Role } from '@prisma/client'
 import z from 'zod'
 
 import prisma from '../../prisma.js'
+import { emitTableUpdate } from '../../sse/index.js'
 import { defineProtectedMutateProcedure } from '../../types/defineProcedure.js'
 
 export const veranstaltungVerwaltungPatchProcedure = defineProtectedMutateProcedure({
@@ -27,7 +28,7 @@ export const veranstaltungVerwaltungPatchProcedure = defineProtectedMutateProced
     }),
   }),
   async handler(options) {
-    return prisma.veranstaltung.update({
+    const result = await prisma.veranstaltung.update({
       where: {
         id: options.input.id,
       },
@@ -51,5 +52,7 @@ export const veranstaltungVerwaltungPatchProcedure = defineProtectedMutateProced
         id: true,
       },
     })
+    emitTableUpdate('veranstaltung')
+    return result
   },
 })
diff --git a/apps/api/src/sse/SSEManager.ts b/apps/api/src/sse/SSEManager.ts
new file mode 100644
index 00000000..a5f17fdc
--- /dev/null
+++ b/apps/api/src/sse/SSEManager.ts
@@ -0,0 +1,103 @@
+import { logger } from '../logger.js'
+
+export type SSEClient = {
+  id: string
+  accountId: string
+  controller: ReadableStreamDefaultController
+  subscriptions: Set<string>
+}
+
+export type SSEEvent = {
+  type: 'table-update'
+  resource: string
+  data?: Record<string, unknown>
+}
+
+class SSEManager {
+  private clients: Map<string, SSEClient> = new Map()
+
+  addClient(clientId: string, accountId: string, controller: ReadableStreamDefaultController) {
+    const client: SSEClient = {
+      id: clientId,
+      accountId,
+      controller,
+      subscriptions: new Set(),
+    }
+    this.clients.set(clientId, client)
+    logger.info(`SSE client connected: ${clientId} (account: ${accountId})`)
+    return client
+  }
+
+  removeClient(clientId: string) {
+    const client = this.clients.get(clientId)
+    if (client) {
+      this.clients.delete(clientId)
+      logger.info(`SSE client disconnected: ${clientId}`)
+    }
+  }
+
+  subscribe(clientId: string, resource: string) {
+    const client = this.clients.get(clientId)
+    if (client) {
+      client.subscriptions.add(resource)
+      logger.debug(`Client ${clientId} subscribed to ${resource}`)
+    }
+  }
+
+  unsubscribe(clientId: string, resource: string) {
+    const client = this.clients.get(clientId)
+    if (client) {
+      client.subscriptions.delete(resource)
+      logger.debug(`Client ${clientId} unsubscribed from ${resource}`)
+    }
+  }
+
+  broadcast(event: SSEEvent) {
+    const { type, resource, data } = event
+    let sentCount = 0
+
+    for (const client of this.clients.values()) {
+      if (client.subscriptions.has(resource) || client.subscriptions.has('*')) {
+        try {
+          const message = `event: ${type}\ndata: ${JSON.stringify({ resource, ...data })}\n\n`
+          client.controller.enqueue(new TextEncoder().encode(message))
+          sentCount++
+        } catch (error) {
+          logger.error(`Failed to send SSE to client ${client.id}:`, error)
+          this.removeClient(client.id)
+        }
+      }
+    }
+
+    if (sentCount > 0) {
+      logger.debug(`Broadcasted ${type} event for ${resource} to ${sentCount} clients`)
+    }
+  }
+
+  sendToClient(clientId: string, event: SSEEvent) {
+    const client = this.clients.get(clientId)
+    if (!client) {
+      logger.warn(`Attempted to send to non-existent client: ${clientId}`)
+      return
+    }
+
+    try {
+      const { type, resource, data } = event
+      const message = `event: ${type}\ndata: ${JSON.stringify({ resource, ...data })}\n\n`
+      client.controller.enqueue(new TextEncoder().encode(message))
+    } catch (error) {
+      logger.error(`Failed to send SSE to client ${clientId}:`, error)
+      this.removeClient(clientId)
+    }
+  }
+
+  getClientCount(): number {
+    return this.clients.size
+  }
+
+  getClients(): SSEClient[] {
+    return Array.from(this.clients.values())
+  }
+}
+
+export const sseManager = new SSEManager()
diff --git a/apps/api/src/sse/helpers.ts b/apps/api/src/sse/helpers.ts
new file mode 100644
index 00000000..c9c52272
--- /dev/null
+++ b/apps/api/src/sse/helpers.ts
@@ -0,0 +1,30 @@
+import { sseManager, type SSEEvent } from './SSEManager.js'
+
+/**
+ * Emit a table update event to all subscribed SSE clients
+ * @param resource - The resource type (e.g., 'veranstaltung', 'anmeldung', 'person')
+ * @param data - Optional additional data to send with the event
+ */
+export function emitTableUpdate(resource: string, data?: Record<string, unknown>) {
+  const event: SSEEvent = {
+    type: 'table-update',
+    resource,
+    data,
+  }
+  sseManager.broadcast(event)
+}
+
+/**
+ * Helper to wrap mutations and automatically emit SSE events
+ * @param resource - The resource type
+ * @param mutationFn - The mutation function to execute
+ * @returns The result of the mutation
+ */
+export async function withSSENotification<T>(
+  resource: string,
+  mutationFn: () => Promise<T>
+): Promise<T> {
+  const result = await mutationFn()
+  emitTableUpdate(resource)
+  return result
+}
diff --git a/apps/api/src/sse/index.ts b/apps/api/src/sse/index.ts
new file mode 100644
index 00000000..9502f85d
--- /dev/null
+++ b/apps/api/src/sse/index.ts
@@ -0,0 +1,4 @@
+export { sseRouter } from './routes.js'
+export { sseManager } from './SSEManager.js'
+export { emitTableUpdate, withSSENotification } from './helpers.js'
+export type { SSEClient, SSEEvent } from './SSEManager.js'
diff --git a/apps/api/src/sse/routes.ts b/apps/api/src/sse/routes.ts
new file mode 100644
index 00000000..1ceeba83
--- /dev/null
+++ b/apps/api/src/sse/routes.ts
@@ -0,0 +1,104 @@
+import { makeApp } from '../util/make-app.js'
+import { getEntityIdFromHeader } from '../authentication.js'
+import { sseManager } from './SSEManager.js'
+import { logger } from '../logger.js'
+import { randomUUID } from 'crypto'
+
+export const sseRouter = makeApp()
+
+sseRouter.get('/', async (c) => {
+  // Authenticate the connection
+  const authorization = c.req.header('authorization')
+  if (!authorization) {
+    return c.json({ error: 'Unauthorized' }, 401)
+  }
+
+  let accountId: string | undefined
+  try {
+    accountId = getEntityIdFromHeader(authorization)
+  } catch (error) {
+    logger.error('SSE authentication failed:', error)
+    return c.json({ error: 'Invalid token' }, 401)
+  }
+
+  if (!accountId) {
+    return c.json({ error: 'Unauthorized' }, 401)
+  }
+
+  // Generate unique client ID
+  const clientId = randomUUID()
+
+  // Create SSE stream
+  const stream = new ReadableStream({
+    start(controller) {
+      // Add client to manager
+      sseManager.addClient(clientId, accountId, controller)
+
+      // Send initial connection message
+      const message = `event: connected\ndata: ${JSON.stringify({ clientId })}\n\n`
+      controller.enqueue(new TextEncoder().encode(message))
+
+      // Send periodic heartbeat to keep connection alive
+      const heartbeatInterval = setInterval(() => {
+        try {
+          const heartbeat = `: heartbeat\n\n`
+          controller.enqueue(new TextEncoder().encode(heartbeat))
+        } catch (error) {
+          clearInterval(heartbeatInterval)
+          sseManager.removeClient(clientId)
+        }
+      }, 30000) // Every 30 seconds
+
+      // Handle client disconnect
+      c.req.raw.signal.addEventListener('abort', () => {
+        clearInterval(heartbeatInterval)
+        sseManager.removeClient(clientId)
+        controller.close()
+      })
+    },
+  })
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive',
+    },
+  })
+})
+
+// Subscribe endpoint
+sseRouter.post('/subscribe', async (c) => {
+  const authorization = c.req.header('authorization')
+  if (!authorization) {
+    return c.json({ error: 'Unauthorized' }, 401)
+  }
+
+  const body = await c.req.json<{ clientId: string; resource: string }>()
+  const { clientId, resource } = body
+
+  if (!clientId || !resource) {
+    return c.json({ error: 'Missing clientId or resource' }, 400)
+  }
+
+  sseManager.subscribe(clientId, resource)
+  return c.json({ success: true })
+})
+
+// Unsubscribe endpoint
+sseRouter.post('/unsubscribe', async (c) => {
+  const authorization = c.req.header('authorization')
+  if (!authorization) {
+    return c.json({ error: 'Unauthorized' }, 401)
+  }
+
+  const body = await c.req.json<{ clientId: string; resource: string }>()
+  const { clientId, resource } = body
+
+  if (!clientId || !resource) {
+    return c.json({ error: 'Missing clientId or resource' }, 400)
+  }
+
+  sseManager.unsubscribe(clientId, resource)
+  return c.json({ success: true })
+})

From 3595f7bf4faf4e5ca4d24745e5caf234e8f8ba03 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 21:41:37 +0000
Subject: [PATCH 3/6] Add SSE frontend integration with table components

Co-authored-by: danielswiatek <9080990+danielswiatek@users.noreply.github.com>
---
 apps/api/src/sse/routes.ts                    |  10 +-
 .../src/components/data/AnmeldungenTable.vue  |   7 +
 apps/frontend/src/composables/useSSE.ts       | 245 ++++++++++++++++++
 .../Veranstaltungen/VeranstaltungList.vue     |  12 +-
 4 files changed, 271 insertions(+), 3 deletions(-)
 create mode 100644 apps/frontend/src/composables/useSSE.ts

diff --git a/apps/api/src/sse/routes.ts b/apps/api/src/sse/routes.ts
index 1ceeba83..101ac491 100644
--- a/apps/api/src/sse/routes.ts
+++ b/apps/api/src/sse/routes.ts
@@ -7,8 +7,14 @@ import { randomUUID } from 'crypto'
 export const sseRouter = makeApp()
 
 sseRouter.get('/', async (c) => {
-  // Authenticate the connection
-  const authorization = c.req.header('authorization')
+  // Authenticate the connection - support both header and query parameter
+  let authorization = c.req.header('authorization')
+  const tokenParam = c.req.query('token')
+  
+  if (tokenParam) {
+    authorization = `Bearer ${tokenParam}`
+  }
+  
   if (!authorization) {
     return c.json({ error: 'Unauthorized' }, 401)
   }
diff --git a/apps/frontend/src/components/data/AnmeldungenTable.vue b/apps/frontend/src/components/data/AnmeldungenTable.vue
index e73332e3..441fcf10 100644
--- a/apps/frontend/src/components/data/AnmeldungenTable.vue
+++ b/apps/frontend/src/components/data/AnmeldungenTable.vue
@@ -13,6 +13,7 @@ import initialData from '@/components/Table/initialData'
 import Tab from '@/components/UIComponents/components/Tab.vue'
 import Tabs from '@/components/UIComponents/Tabs.vue'
 import { loggedInAccount } from '@/composables/useAuthentication'
+import { useSSE } from '@/composables/useSSE'
 import { getAnmeldungStatusColor } from '@/helpers/getAnmeldungStatusColors'
 import {
   AnmeldungStatusMapping,
@@ -270,6 +271,12 @@ const query: Query<Anmeldung> = (pagination, filter) =>
     initialData,
     placeholderData: keepPreviousData,
   })
+
+// Set up SSE to auto-refresh table when data changes
+useSSE('anmeldung', () => {
+  console.log('Anmeldung table updated, refreshing...')
+  dataTable.value?.query.refetch()
+})
 </script>
 
 <template>
diff --git a/apps/frontend/src/composables/useSSE.ts b/apps/frontend/src/composables/useSSE.ts
new file mode 100644
index 00000000..251b9b4c
--- /dev/null
+++ b/apps/frontend/src/composables/useSSE.ts
@@ -0,0 +1,245 @@
+import { ref, onMounted, onUnmounted, type Ref } from 'vue'
+
+export type SSEEventType = 'table-update'
+
+export type SSEEventCallback = (data: {
+  resource: string
+  [key: string]: unknown
+}) => void
+
+const host = import.meta.env[`VITE_APP_API_HOST`] || ''
+
+class SSEService {
+  private eventSource: EventSource | null = null
+  private clientId: string | null = null
+  private listeners: Map<string, Set<SSEEventCallback>> = new Map()
+  private reconnectAttempts = 0
+  private maxReconnectAttempts = 5
+  private reconnectTimeout: NodeJS.Timeout | null = null
+  private isConnected = ref(false)
+  private isConnecting = ref(false)
+
+  get connected(): Ref<boolean> {
+    return this.isConnected
+  }
+
+  get connecting(): Ref<boolean> {
+    return this.isConnecting
+  }
+
+  connect() {
+    if (this.eventSource || this.isConnecting.value) {
+      return
+    }
+
+    const jwt = localStorage.getItem('jwt')
+    if (!jwt) {
+      console.warn('Cannot connect to SSE: No JWT token found')
+      return
+    }
+
+    this.isConnecting.value = true
+
+    const url = `${host}/api/events`
+    this.eventSource = new EventSource(url, {
+      // Note: EventSource doesn't support custom headers in standard API
+      // We'll need to pass token via query parameter or use a polyfill
+    } as EventSourceInit)
+
+    // Add authorization via URL parameter as EventSource doesn't support headers
+    this.eventSource = new EventSource(`${url}?token=${encodeURIComponent(jwt)}`)
+
+    this.eventSource.addEventListener('connected', (event) => {
+      const data = JSON.parse(event.data)
+      this.clientId = data.clientId
+      this.isConnected.value = true
+      this.isConnecting.value = false
+      this.reconnectAttempts = 0
+      console.log('SSE connected with client ID:', this.clientId)
+    })
+
+    this.eventSource.addEventListener('table-update', (event) => {
+      const data = JSON.parse(event.data)
+      this.notifyListeners('table-update', data)
+    })
+
+    this.eventSource.onerror = () => {
+      console.error('SSE connection error')
+      this.handleDisconnect()
+    }
+  }
+
+  private handleDisconnect() {
+    this.isConnected.value = false
+    this.isConnecting.value = false
+    this.clientId = null
+
+    if (this.eventSource) {
+      this.eventSource.close()
+      this.eventSource = null
+    }
+
+    // Attempt reconnection with exponential backoff
+    if (this.reconnectAttempts < this.maxReconnectAttempts) {
+      this.reconnectAttempts++
+      const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000)
+      console.log(`SSE reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`)
+
+      this.reconnectTimeout = setTimeout(() => {
+        this.connect()
+      }, delay)
+    } else {
+      console.error('SSE max reconnection attempts reached')
+    }
+  }
+
+  disconnect() {
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout)
+      this.reconnectTimeout = null
+    }
+
+    if (this.eventSource) {
+      this.eventSource.close()
+      this.eventSource = null
+    }
+
+    this.isConnected.value = false
+    this.isConnecting.value = false
+    this.clientId = null
+    this.reconnectAttempts = 0
+  }
+
+  subscribe(resource: string) {
+    if (!this.clientId) {
+      console.warn('Cannot subscribe: Not connected to SSE')
+      return
+    }
+
+    const jwt = localStorage.getItem('jwt')
+    if (!jwt) {
+      console.warn('Cannot subscribe: No JWT token found')
+      return
+    }
+
+    fetch(`${host}/api/events/subscribe`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${jwt}`,
+      },
+      body: JSON.stringify({
+        clientId: this.clientId,
+        resource,
+      }),
+    }).catch((error) => {
+      console.error('Failed to subscribe to resource:', resource, error)
+    })
+  }
+
+  unsubscribe(resource: string) {
+    if (!this.clientId) {
+      return
+    }
+
+    const jwt = localStorage.getItem('jwt')
+    if (!jwt) {
+      return
+    }
+
+    fetch(`${host}/api/events/unsubscribe`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${jwt}`,
+      },
+      body: JSON.stringify({
+        clientId: this.clientId,
+        resource,
+      }),
+    }).catch((error) => {
+      console.error('Failed to unsubscribe from resource:', resource, error)
+    })
+  }
+
+  on(eventType: SSEEventType, resource: string, callback: SSEEventCallback) {
+    const key = `${eventType}:${resource}`
+    if (!this.listeners.has(key)) {
+      this.listeners.set(key, new Set())
+    }
+    this.listeners.get(key)!.add(callback)
+
+    // Auto-subscribe when listener is added
+    if (this.isConnected.value) {
+      this.subscribe(resource)
+    }
+
+    return () => this.off(eventType, resource, callback)
+  }
+
+  off(eventType: SSEEventType, resource: string, callback: SSEEventCallback) {
+    const key = `${eventType}:${resource}`
+    const listeners = this.listeners.get(key)
+    if (listeners) {
+      listeners.delete(callback)
+      if (listeners.size === 0) {
+        this.listeners.delete(key)
+        // Auto-unsubscribe when no listeners remain
+        if (this.isConnected.value) {
+          this.unsubscribe(resource)
+        }
+      }
+    }
+  }
+
+  private notifyListeners(eventType: SSEEventType, data: { resource: string; [key: string]: unknown }) {
+    const key = `${eventType}:${data.resource}`
+    const listeners = this.listeners.get(key)
+    if (listeners) {
+      listeners.forEach((callback) => callback(data))
+    }
+  }
+}
+
+const sseService = new SSEService()
+
+/**
+ * Composable to use SSE for real-time table updates
+ * @param resource - The resource type to listen for (e.g., 'veranstaltung', 'anmeldung')
+ * @param onUpdate - Callback function to execute when the table is updated
+ * @returns Object with connection state and manual control functions
+ */
+export function useSSE(resource: string, onUpdate: SSEEventCallback) {
+  onMounted(() => {
+    // Connect if not already connected
+    if (!sseService.connected.value && !sseService.connecting.value) {
+      sseService.connect()
+    }
+
+    // Wait for connection before subscribing
+    const checkConnection = setInterval(() => {
+      if (sseService.connected.value) {
+        clearInterval(checkConnection)
+        sseService.subscribe(resource)
+      }
+    }, 100)
+
+    // Set up listener
+    const unsubscribe = sseService.on('table-update', resource, onUpdate)
+
+    // Clean up on unmount
+    onUnmounted(() => {
+      clearInterval(checkConnection)
+      unsubscribe()
+    })
+  })
+
+  return {
+    connected: sseService.connected,
+    connecting: sseService.connecting,
+    connect: () => sseService.connect(),
+    disconnect: () => sseService.disconnect(),
+  }
+}
+
+export { sseService }
diff --git a/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungList.vue b/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungList.vue
index a0448609..27a29778 100644
--- a/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungList.vue
+++ b/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungList.vue
@@ -5,12 +5,13 @@ import { apiClient } from '@/api'
 import DataTable, { type Query } from '@/components/Table/DataTable.vue'
 import initialData from '@/components/Table/initialData'
 import { useRouteTitle } from '@/composables/useRouteTitle'
+import { useSSE } from '@/composables/useSSE'
 import { type RouterOutput } from '@codeanker/api'
 import { keepPreviousData, useQuery } from '@tanstack/vue-query'
 import { createColumnHelper } from '@tanstack/vue-table'
 import { dayjs, formatCurrency, formatDateWith } from '@codeanker/helpers'
 import { useRouter } from 'vue-router'
-import { h } from 'vue'
+import { h, ref } from 'vue'
 
 const router = useRouter()
 
@@ -96,6 +97,14 @@ const query: Query<Veranstaltung> = (pagination, filter, orderBy) =>
     placeholderData: keepPreviousData,
   })
 
+const dataTableRef = ref<InstanceType<typeof DataTable>>()
+
+// Set up SSE to auto-refresh table when data changes
+useSSE('veranstaltung', () => {
+  console.log('Veranstaltung table updated, refreshing...')
+  dataTableRef.value?.query.refetch()
+})
+
 function onClick(veranstaltung: Veranstaltung) {
   router.push({ name: 'Verwaltung Veranstaltungsdetails', params: { veranstaltungId: veranstaltung.id } })
 }
@@ -117,6 +126,7 @@ function onClick(veranstaltung: Veranstaltung) {
     </div>
 
     <DataTable
+      ref="dataTableRef"
       :query="query"
       :columns="columns"
       :initial-sort="[{ id: 'name', desc: false }]"

From 498cc64a3bb2dcbddd62e1464975ca81a3682f03 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 21:44:43 +0000
Subject: [PATCH 4/6] Fix TypeScript and linting errors

Co-authored-by: danielswiatek <9080990+danielswiatek@users.noreply.github.com>
---
 apps/api/src/sse/routes.ts                                | 8 ++++----
 .../Verwaltung/Veranstaltungen/VeranstaltungList.vue      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/api/src/sse/routes.ts b/apps/api/src/sse/routes.ts
index 101ac491..79898b59 100644
--- a/apps/api/src/sse/routes.ts
+++ b/apps/api/src/sse/routes.ts
@@ -6,7 +6,7 @@ import { randomUUID } from 'crypto'
 
 export const sseRouter = makeApp()
 
-sseRouter.get('/', async (c) => {
+sseRouter.get('/', (c) => {
   // Authenticate the connection - support both header and query parameter
   let authorization = c.req.header('authorization')
   const tokenParam = c.req.query('token')
@@ -22,8 +22,8 @@ sseRouter.get('/', async (c) => {
   let accountId: string | undefined
   try {
     accountId = getEntityIdFromHeader(authorization)
-  } catch (error) {
-    logger.error('SSE authentication failed:', error)
+  } catch (err) {
+    logger.error('SSE authentication failed:', err)
     return c.json({ error: 'Invalid token' }, 401)
   }
 
@@ -49,7 +49,7 @@ sseRouter.get('/', async (c) => {
         try {
           const heartbeat = `: heartbeat\n\n`
           controller.enqueue(new TextEncoder().encode(heartbeat))
-        } catch (error) {
+        } catch {
           clearInterval(heartbeatInterval)
           sseManager.removeClient(clientId)
         }
diff --git a/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungList.vue b/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungList.vue
index 27a29778..4554173d 100644
--- a/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungList.vue
+++ b/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungList.vue
@@ -97,7 +97,7 @@ const query: Query<Veranstaltung> = (pagination, filter, orderBy) =>
     placeholderData: keepPreviousData,
   })
 
-const dataTableRef = ref<InstanceType<typeof DataTable>>()
+const dataTableRef = ref<{ query: ReturnType<Query<Veranstaltung>> }>()
 
 // Set up SSE to auto-refresh table when data changes
 useSSE('veranstaltung', () => {

From 0e8dd78771b1fab4376fb26e34779d6615183a82 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 21:45:59 +0000
Subject: [PATCH 5/6] Address code review feedback: fix EventSource
 instantiation and add timeout

Co-authored-by: danielswiatek <9080990+danielswiatek@users.noreply.github.com>
---
 apps/frontend/src/composables/useSSE.ts | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/composables/useSSE.ts b/apps/frontend/src/composables/useSSE.ts
index 251b9b4c..11c300b6 100644
--- a/apps/frontend/src/composables/useSSE.ts
+++ b/apps/frontend/src/composables/useSSE.ts
@@ -41,10 +41,11 @@ class SSEService {
     this.isConnecting.value = true
 
     const url = `${host}/api/events`
-    this.eventSource = new EventSource(url, {
-      // Note: EventSource doesn't support custom headers in standard API
-      // We'll need to pass token via query parameter or use a polyfill
-    } as EventSourceInit)
+    const jwt = localStorage.getItem('jwt')
+    if (!jwt) {
+      console.warn('Cannot connect to SSE: No JWT token found')
+      return
+    }
 
     // Add authorization via URL parameter as EventSource doesn't support headers
     this.eventSource = new EventSource(`${url}?token=${encodeURIComponent(jwt)}`)
@@ -216,11 +217,17 @@ export function useSSE(resource: string, onUpdate: SSEEventCallback) {
       sseService.connect()
     }
 
-    // Wait for connection before subscribing
+    // Wait for connection before subscribing (max 10 seconds)
+    let attempts = 0
+    const maxAttempts = 100 // 100 * 100ms = 10 seconds
     const checkConnection = setInterval(() => {
+      attempts++
       if (sseService.connected.value) {
         clearInterval(checkConnection)
         sseService.subscribe(resource)
+      } else if (attempts >= maxAttempts) {
+        clearInterval(checkConnection)
+        console.warn(`Failed to connect to SSE after ${maxAttempts * 100}ms`)
       }
     }, 100)
 

From 8819618edd40c8ef6e8a301fc9240e19307cf285 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 21:48:23 +0000
Subject: [PATCH 6/6] Add comprehensive SSE architecture documentation

Co-authored-by: danielswiatek <9080990+danielswiatek@users.noreply.github.com>
---
 docs/SSE_ARCHITECTURE.md | 217 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 217 insertions(+)
 create mode 100644 docs/SSE_ARCHITECTURE.md

diff --git a/docs/SSE_ARCHITECTURE.md b/docs/SSE_ARCHITECTURE.md
new file mode 100644
index 00000000..c4b45635
--- /dev/null
+++ b/docs/SSE_ARCHITECTURE.md
@@ -0,0 +1,217 @@
+# Server-Sent Events (SSE) Architecture
+
+## Overview
+
+This application uses Server-Sent Events (SSE) to provide real-time notifications when table data changes. When a user creates, updates, or deletes data through the API, all connected clients receive notifications and automatically refresh their tables.
+
+## Architecture
+
+### Backend Components
+
+#### 1. SSE Manager (`apps/api/src/sse/SSEManager.ts`)
+
+The `SSEManager` class manages all SSE client connections and handles event broadcasting:
+
+- **Client Management**: Maintains a map of connected clients with their IDs and subscriptions
+- **Subscription System**: Clients can subscribe to specific resources (e.g., 'veranstaltung', 'anmeldung')
+- **Broadcasting**: Sends events to all clients subscribed to a specific resource
+- **Cleanup**: Automatically removes disconnected clients
+
+#### 2. SSE Routes (`apps/api/src/sse/routes.ts`)
+
+HTTP endpoints for SSE functionality:
+
+- **`GET /api/events`**: Main SSE connection endpoint
+  - Accepts JWT token via query parameter (EventSource limitation)
+  - Returns event stream with `text/event-stream` content type
+  - Sends heartbeat every 30 seconds to keep connection alive
+  - Handles client disconnect and cleanup
+
+- **`POST /api/events/subscribe`**: Subscribe to specific resource updates
+- **`POST /api/events/unsubscribe`**: Unsubscribe from resource updates
+
+#### 3. Helper Functions (`apps/api/src/sse/helpers.ts`)
+
+Utility functions for emitting events:
+
+- **`emitTableUpdate(resource, data?)`**: Broadcast update event for a resource
+- **`withSSENotification(resource, mutationFn)`**: Wrapper for mutations that automatically emits events
+
+### Frontend Components
+
+#### 1. SSE Service (`apps/frontend/src/composables/useSSE.ts`)
+
+The `SSEService` singleton manages the SSE connection:
+
+- **Connection Management**: Establishes and maintains SSE connection
+- **Authentication**: Passes JWT token via query parameter
+- **Reconnection Logic**: Exponential backoff with max 5 attempts
+- **Subscription Management**: Auto-subscribe/unsubscribe based on active listeners
+- **Event Handling**: Routes events to registered callbacks
+
+#### 2. useSSE Composable
+
+Vue composable for easy SSE integration in components:
+
+```typescript
+useSSE('veranstaltung', () => {
+  console.log('Veranstaltung updated, refreshing...')
+  dataTableRef.value?.query.refetch()
+})
+```
+
+Features:
+- Automatic connection on mount
+- Subscription to specific resource
+- Cleanup on unmount
+- Returns connection state and control functions
+
+## Integration Points
+
+### Backend Mutations
+
+SSE events are emitted after successful database operations:
+
+```typescript
+// Example from veranstaltungVerwaltungCreate.ts
+async handler(options) {
+  const result = await prisma.veranstaltung.create({
+    data: options.input.data,
+    select: { id: true },
+  })
+  emitTableUpdate('veranstaltung')  // ← Emit SSE event
+  return result
+}
+```
+
+Currently integrated with:
+- ✅ Veranstaltung create/update
+- ✅ Anmeldung create/update
+
+### Frontend Tables
+
+Tables automatically refresh when receiving SSE events:
+
+```typescript
+// Example from VeranstaltungList.vue
+const dataTableRef = ref<{ query: ReturnType<Query<Veranstaltung>> }>()
+
+useSSE('veranstaltung', () => {
+  console.log('Veranstaltung table updated, refreshing...')
+  dataTableRef.value?.query.refetch()  // ← Trigger refetch
+})
+```
+
+Currently integrated with:
+- ✅ VeranstaltungList
+- ✅ AnmeldungenTable
+
+## Technical Details
+
+### Authentication
+
+EventSource API doesn't support custom headers, so authentication uses URL query parameters:
+
+```typescript
+const jwt = localStorage.getItem('jwt')
+const url = `/api/events?token=${encodeURIComponent(jwt)}`
+this.eventSource = new EventSource(url)
+```
+
+The backend extracts and validates the token from the query parameter.
+
+### Event Format
+
+SSE events follow this format:
+
+```
+event: table-update
+data: {"resource":"veranstaltung"}
+
+```
+
+Event types:
+- `connected`: Initial connection confirmation with clientId
+- `table-update`: Notification that a table's data has changed
+- `: heartbeat`: Keep-alive comment (every 30s)
+
+### Reconnection Strategy
+
+The client uses exponential backoff for reconnection:
+
+1. Initial connection attempt
+2. On disconnect: wait 2^attempt seconds (max 30s)
+3. Max 5 reconnection attempts
+4. Manual reconnection possible via `sseService.connect()`
+
+### Resource Subscriptions
+
+Clients can subscribe to specific resources or use `*` for all updates:
+
+```typescript
+sseManager.subscribe(clientId, 'veranstaltung')  // Only veranstaltung updates
+sseManager.subscribe(clientId, '*')              // All updates
+```
+
+## Adding SSE to New Resources
+
+### 1. Backend: Emit events in mutations
+
+```typescript
+import { emitTableUpdate } from '../../sse/index.js'
+
+async handler(options) {
+  const result = await prisma.myResource.create({ ... })
+  emitTableUpdate('myResource')  // Add this line
+  return result
+}
+```
+
+### 2. Frontend: Add to table component
+
+```typescript
+import { useSSE } from '@/composables/useSSE'
+
+const dataTableRef = ref<{ query: ReturnType<Query<MyResource>> }>()
+
+useSSE('myResource', () => {
+  console.log('MyResource table updated, refreshing...')
+  dataTableRef.value?.query.refetch()
+})
+```
+
+## Performance Considerations
+
+- **Connection Overhead**: Each client maintains one persistent HTTP connection
+- **Broadcast Efficiency**: Events only sent to subscribed clients
+- **Network Usage**: Heartbeat every 30s (~10 bytes per client)
+- **Memory**: Manager keeps client map in memory (cleaned up on disconnect)
+
+## Limitations
+
+- EventSource doesn't support custom headers (authentication via query param)
+- One-way communication only (server → client)
+- No guaranteed delivery (client might miss events during disconnect)
+- Browser connection limits (typically 6 per domain)
+
+## Troubleshooting
+
+### Connection Issues
+
+Check browser console for:
+- `SSE connected with client ID: ...` → Success
+- `SSE connection error` → Connection failed
+- `SSE reconnecting in Xms` → Automatic retry
+
+### Missing Updates
+
+1. Verify mutation emits SSE event: `emitTableUpdate('resource')`
+2. Check frontend subscription: `useSSE('resource', callback)`
+3. Confirm resource name matches exactly
+4. Check browser Network tab for `/api/events` connection
+
+### Authentication Errors
+
+- Ensure JWT token exists in localStorage
+- Check token hasn't expired
+- Verify token is valid on backend