From eb2dd03ef9092cd0bfebd4665b4097a1f8eb35b9 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Mon, 18 May 2026 15:42:10 +0200
Subject: [PATCH] KI-AGENT: Matrix-Kommunikation im Frontend anbinden

---
 frontend/components/MainNav.vue        |   5 +
 frontend/pages/communication/index.vue | 245 +++++++++++++++++++++++++
 2 files changed, 250 insertions(+)
 create mode 100644 frontend/pages/communication/index.vue

diff --git a/frontend/components/MainNav.vue b/frontend/components/MainNav.vue
index 655c6b5..660126f 100644
--- a/frontend/components/MainNav.vue
+++ b/frontend/components/MainNav.vue
@@ -75,6 +75,11 @@ const links = computed(() => {
   ]
 
   const communicationChildren = [
+    {
+      label: "Matrix",
+      to: "/communication",
+      icon: "i-heroicons-chat-bubble-left-right"
+    },
     featureEnabled("helpdesk") ? {
       label: "Helpdesk",
       to: "/helpdesk",
diff --git a/frontend/pages/communication/index.vue b/frontend/pages/communication/index.vue
new file mode 100644
index 0000000..8512bc6
--- /dev/null
+++ b/frontend/pages/communication/index.vue
@@ -0,0 +1,245 @@
+<script setup>
+const toast = useToast()
+const { $api } = useNuxtApp()
+
+const status = ref(null)
+const identity = ref(null)
+const provisionResult = ref(null)
+const loading = ref(false)
+const provisioning = ref(false)
+const lastUpdated = ref(null)
+
+const statusItems = computed(() => [
+  {
+    label: "Konfiguration",
+    value: status.value?.configured ? "Aktiv" : "Nicht aktiv",
+    icon: status.value?.configured ? "i-heroicons-check-circle" : "i-heroicons-x-circle",
+    color: status.value?.configured ? "success" : "error"
+  },
+  {
+    label: "Homeserver",
+    value: status.value?.homeserverUrl || "-",
+    icon: "i-heroicons-server-stack",
+    color: "neutral"
+  },
+  {
+    label: "Servername",
+    value: status.value?.serverName || "-",
+    icon: "i-heroicons-identification",
+    color: "neutral"
+  },
+  {
+    label: "Erreichbarkeit",
+    value: status.value?.reachable ? "Erreichbar" : "Nicht erreichbar",
+    icon: status.value?.reachable ? "i-heroicons-signal" : "i-heroicons-signal-slash",
+    color: status.value?.reachable ? "success" : "error"
+  }
+])
+
+const loadMatrixInfo = async () => {
+  loading.value = true
+  try {
+    const [statusRes, identityRes] = await Promise.all([
+      $api("/api/communication/matrix/status"),
+      $api("/api/communication/matrix/me")
+    ])
+
+    status.value = statusRes
+    identity.value = identityRes
+    lastUpdated.value = new Date()
+  } catch (error) {
+    toast.add({
+      title: "Matrix-Status konnte nicht geladen werden",
+      color: "error"
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+const provisionMatrixAccount = async () => {
+  provisioning.value = true
+  try {
+    const res = await $api("/api/communication/matrix/me/provision", {
+      method: "POST"
+    })
+
+    provisionResult.value = res
+    identity.value = {
+      ...identity.value,
+      matrixUserId: res.matrixUserId,
+      displayName: res.displayName
+    }
+
+    toast.add({
+      title: res.alreadyExisted ? "Matrix-Konto ist bereits vorhanden" : "Matrix-Konto erstellt",
+      color: "success"
+    })
+  } catch (error) {
+    toast.add({
+      title: "Matrix-Konto konnte nicht erstellt werden",
+      color: "error"
+    })
+  } finally {
+    provisioning.value = false
+  }
+}
+
+const formatDateTime = (value) => {
+  if (!value) return "-"
+
+  return new Intl.DateTimeFormat("de-DE", {
+    dateStyle: "short",
+    timeStyle: "short"
+  }).format(value)
+}
+
+onMounted(loadMatrixInfo)
+</script>
+
+<template>
+  <div class="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 sm:p-6">
+    <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+      <div>
+        <h1 class="text-2xl font-semibold text-highlighted">
+          Kommunikation
+        </h1>
+        <p class="mt-1 text-sm text-muted">
+          Matrix-Verbindung und persönliche Kommunikationsidentität.
+        </p>
+      </div>
+
+      <UButton
+          icon="i-heroicons-arrow-path"
+          color="neutral"
+          variant="outline"
+          :loading="loading"
+          @click="loadMatrixInfo"
+      >
+        Aktualisieren
+      </UButton>
+    </div>
+
+    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+      <UCard
+          v-for="item in statusItems"
+          :key="item.label"
+          :ui="{ root: 'rounded-lg', body: 'p-4 sm:p-4' }"
+      >
+        <div class="flex items-start gap-3">
+          <UIcon
+              :name="item.icon"
+              class="mt-0.5 size-5 shrink-0"
+              :class="{
+                'text-success': item.color === 'success',
+                'text-error': item.color === 'error',
+                'text-muted': item.color === 'neutral'
+              }"
+          />
+          <div class="min-w-0">
+            <p class="text-xs font-medium uppercase text-muted">
+              {{ item.label }}
+            </p>
+            <p class="mt-1 break-words text-sm font-medium text-highlighted">
+              {{ item.value }}
+            </p>
+          </div>
+        </div>
+      </UCard>
+    </div>
+
+    <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_360px]">
+      <UCard :ui="{ root: 'rounded-lg' }">
+        <template #header>
+          <div class="flex items-center gap-2">
+            <UIcon name="i-heroicons-user-circle" class="size-5 text-primary" />
+            <h2 class="text-base font-semibold text-highlighted">
+              Eigene Matrix-Identität
+            </h2>
+          </div>
+        </template>
+
+        <div class="space-y-4">
+          <div class="grid gap-3 sm:grid-cols-2">
+            <div>
+              <p class="text-xs font-medium uppercase text-muted">
+                Matrix-ID
+              </p>
+              <p class="mt-1 break-all font-mono text-sm text-highlighted">
+                {{ identity?.matrixUserId || "-" }}
+              </p>
+            </div>
+            <div>
+              <p class="text-xs font-medium uppercase text-muted">
+                Anzeigename
+              </p>
+              <p class="mt-1 text-sm text-highlighted">
+                {{ identity?.displayName || "-" }}
+              </p>
+            </div>
+          </div>
+
+          <UAlert
+              v-if="provisionResult"
+              icon="i-heroicons-check-circle"
+              color="success"
+              variant="soft"
+              :title="provisionResult.alreadyExisted ? 'Matrix-Konto vorhanden' : 'Matrix-Konto erstellt'"
+              :description="provisionResult.matrixUserId"
+          />
+
+          <UAlert
+              v-if="status && !status.reachable"
+              icon="i-heroicons-exclamation-triangle"
+              color="error"
+              variant="soft"
+              title="Matrix-Homeserver nicht erreichbar"
+              :description="status.error || 'Bitte prüfe den lokalen Matrix-Stack und die Backend-Konfiguration.'"
+          />
+        </div>
+
+        <template #footer>
+          <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <p class="text-xs text-muted">
+              Aktualisiert: {{ formatDateTime(lastUpdated) }}
+            </p>
+            <UButton
+                icon="i-heroicons-user-plus"
+                :loading="provisioning"
+                :disabled="!status?.reachable"
+                @click="provisionMatrixAccount"
+            >
+              Matrix-Konto erstellen
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+
+      <UCard :ui="{ root: 'rounded-lg' }">
+        <template #header>
+          <div class="flex items-center gap-2">
+            <UIcon name="i-heroicons-video-camera" class="size-5 text-primary" />
+            <h2 class="text-base font-semibold text-highlighted">
+              Nächste Ausbaustufe
+            </h2>
+          </div>
+        </template>
+
+        <div class="space-y-3 text-sm text-muted">
+          <div class="flex gap-2">
+            <UIcon name="i-heroicons-building-office-2" class="mt-0.5 size-4 shrink-0" />
+            <span>Mandanten-Space automatisch anlegen.</span>
+          </div>
+          <div class="flex gap-2">
+            <UIcon name="i-heroicons-users" class="mt-0.5 size-4 shrink-0" />
+            <span>FEDEO-Nutzer in Matrix-Räume synchronisieren.</span>
+          </div>
+          <div class="flex gap-2">
+            <UIcon name="i-heroicons-chat-bubble-left-right" class="mt-0.5 size-4 shrink-0" />
+            <span>Chat-Client in FEDEO einbetten.</span>
+          </div>
+        </div>
+      </UCard>
+    </div>
+  </div>
+</template>