KI-AGENT: Telefonie und Setup trennen

frontend/components/MainNav.vue

@@ -85,6 +85,11 @@ const links = computed(() => {
       to: "/communication/phone",
       icon: "i-heroicons-phone"
     },
+    {
+      label: "Telefonie Setup",
+      to: "/communication/phone-setup",
+      icon: "i-heroicons-cog-6-tooth"
+    },
     featureEnabled("helpdesk") ? {
       label: "Helpdesk",
       to: "/helpdesk",

frontend/components/TelephonyCallOverlay.vue

@@ -0,0 +1,70 @@
+<script setup>
+const {
+  incomingCall,
+  incomingCaller,
+  selectedExtension,
+  sipLoading,
+  acceptIncomingCall,
+  rejectIncomingCall,
+} = useTelephonySoftphone()
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="-translate-y-3 opacity-0"
+      enter-to-class="translate-y-0 opacity-100"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="translate-y-0 opacity-100"
+      leave-to-class="-translate-y-3 opacity-0"
+    >
+      <div
+        v-if="incomingCall"
+        class="fixed inset-x-3 top-3 z-[1000] mx-auto max-w-2xl rounded-lg border border-primary-200 bg-white p-4 shadow-xl ring-1 ring-primary-100 sm:top-5"
+      >
+        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div class="flex min-w-0 items-center gap-3">
+            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-primary-50 text-primary-600 ring-8 ring-primary-100">
+              <UIcon name="i-heroicons-phone-arrow-down-left" class="h-6 w-6" />
+            </div>
+            <div class="min-w-0">
+              <p class="text-xs font-medium uppercase text-primary-600">
+                Eingehender Anruf
+              </p>
+              <h2 class="truncate text-lg font-semibold text-gray-950">
+                {{ incomingCaller }}
+              </h2>
+              <p class="mt-1 text-xs text-gray-500">
+                Nebenstelle {{ selectedExtension }}
+              </p>
+            </div>
+          </div>
+
+          <div class="grid gap-2 sm:min-w-64 sm:grid-cols-2">
+            <UButton
+              color="success"
+              icon="i-heroicons-phone"
+              size="lg"
+              block
+              :loading="sipLoading"
+              @click="acceptIncomingCall"
+            >
+              Annehmen
+            </UButton>
+            <UButton
+              color="error"
+              variant="soft"
+              icon="i-heroicons-phone-x-mark"
+              size="lg"
+              block
+              @click="rejectIncomingCall"
+            >
+              Ablehnen
+            </UButton>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

frontend/composables/useTelephonySoftphone.js

@@ -0,0 +1,592 @@
+const loading = ref(false)
+const statusLoading = ref(false)
+const websocketTesting = ref(false)
+const config = ref(null)
+const status = ref(null)
+const websocketResult = ref(null)
+const lastUpdated = ref(null)
+const selectedExtension = ref("1001")
+const dialTarget = ref("600")
+const sipModule = ref(null)
+const userAgent = shallowRef(null)
+const registerer = shallowRef(null)
+const activeSession = shallowRef(null)
+const remoteAudio = ref(null)
+const sipLoading = ref(false)
+const sipRegistered = ref(false)
+const sipStatus = ref("Nicht verbunden")
+const sipError = ref(null)
+const incomingCall = ref(null)
+const callState = ref("idle")
+const registererState = ref("Initial")
+const sipEvents = ref([])
+const ringtoneTimer = shallowRef(null)
+const ringtoneAudioContext = shallowRef(null)
+const callSignalStatus = ref("Bereit")
+const originalDocumentTitle = ref("")
+
+export const useTelephonySoftphone = () => {
+  const toast = useToast()
+  const { $api } = useNuxtApp()
+
+  const incomingCaller = computed(() => {
+    const identity = incomingCall.value?.remoteIdentity
+    return identity?.displayName || identity?.uri?.user || "Unbekannter Anrufer"
+  })
+
+  const selectedAccount = computed(() =>
+    (config.value?.testAccounts || []).find((account) => account.extension === selectedExtension.value)
+      || config.value?.testAccounts?.[0]
+  )
+
+  const canRegisterSip = computed(() =>
+    Boolean(config.value?.sipWebSocketUrl && config.value?.sipDomain && selectedAccount.value && !sipLoading.value)
+  )
+
+  const canStartCall = computed(() =>
+    Boolean(sipRegistered.value && dialTarget.value?.trim() && !activeSession.value && !sipLoading.value)
+  )
+
+  const canHangup = computed(() =>
+    Boolean(activeSession.value && callState.value !== "terminated")
+  )
+
+  const statusColor = computed(() => {
+    if (status.value?.reachable) return "success"
+    if (!status.value?.enabled) return "warning"
+    return "error"
+  })
+
+  const statusIcon = computed(() => {
+    if (status.value?.reachable) return "i-heroicons-signal"
+    if (!status.value?.enabled) return "i-heroicons-pause-circle"
+    return "i-heroicons-signal-slash"
+  })
+
+  const websocketColor = computed(() => {
+    if (!websocketResult.value) return "neutral"
+    return websocketResult.value.ok ? "success" : "error"
+  })
+
+  const addSipEvent = (message) => {
+    sipEvents.value = [
+      {
+        time: new Date().toLocaleTimeString("de-DE"),
+        message,
+      },
+      ...sipEvents.value,
+    ].slice(0, 8)
+  }
+
+  const ensureSipModule = async () => {
+    if (!sipModule.value) {
+      sipModule.value = await import("sip.js")
+    }
+
+    return sipModule.value
+  }
+
+  const cleanupRemoteAudio = () => {
+    if (!remoteAudio.value?.srcObject) return
+
+    const stream = remoteAudio.value.srcObject
+    if (stream?.getTracks) {
+      stream.getTracks().forEach((track) => track.stop())
+    }
+
+    remoteAudio.value.srcObject = null
+  }
+
+  const attachRemoteAudio = async (session) => {
+    const peerConnection = session?.sessionDescriptionHandler?.peerConnection
+    if (!peerConnection || !remoteAudio.value) return
+
+    const remoteStream = new MediaStream()
+    peerConnection.getReceivers().forEach((receiver) => {
+      if (receiver.track) remoteStream.addTrack(receiver.track)
+    })
+
+    remoteAudio.value.srcObject = remoteStream
+
+    try {
+      await remoteAudio.value.play()
+    } catch (error) {
+      addSipEvent(`Audioausgabe blockiert: ${error?.message || "Browser-Autoplay"}`)
+    }
+  }
+
+  const playRingtoneTick = async () => {
+    if (!window.AudioContext && !window.webkitAudioContext) return
+
+    const AudioContextConstructor = window.AudioContext || window.webkitAudioContext
+    const context = ringtoneAudioContext.value || new AudioContextConstructor()
+    ringtoneAudioContext.value = context
+
+    if (context.state === "suspended") {
+      await context.resume()
+    }
+
+    const oscillator = context.createOscillator()
+    const gain = context.createGain()
+    oscillator.type = "sine"
+    oscillator.frequency.value = 880
+    gain.gain.setValueAtTime(0.0001, context.currentTime)
+    gain.gain.exponentialRampToValueAtTime(0.12, context.currentTime + 0.03)
+    gain.gain.exponentialRampToValueAtTime(0.0001, context.currentTime + 0.35)
+    oscillator.connect(gain)
+    gain.connect(context.destination)
+    oscillator.start()
+    oscillator.stop(context.currentTime + 0.38)
+  }
+
+  const stopCallSignaling = () => {
+    if (ringtoneTimer.value) {
+      window.clearInterval(ringtoneTimer.value)
+      ringtoneTimer.value = null
+    }
+
+    if (originalDocumentTitle.value) {
+      document.title = originalDocumentTitle.value
+      originalDocumentTitle.value = ""
+    }
+
+    if (navigator.vibrate) {
+      navigator.vibrate(0)
+    }
+
+    callSignalStatus.value = "Bereit"
+  }
+
+  const startCallSignaling = async () => {
+    stopCallSignaling()
+    callSignalStatus.value = "Signalisiert"
+    originalDocumentTitle.value = document.title
+    document.title = "Eingehender Anruf - FEDEO"
+
+    if (navigator.vibrate) {
+      navigator.vibrate([180, 90, 180])
+    }
+
+    try {
+      await playRingtoneTick()
+      ringtoneTimer.value = window.setInterval(() => {
+        playRingtoneTick().catch((error) => {
+          callSignalStatus.value = "Klingelton blockiert"
+          addSipEvent(`Klingelton blockiert: ${error?.message || "Browser-Autoplay"}`)
+        })
+      }, 1400)
+    } catch (error) {
+      callSignalStatus.value = "Klingelton blockiert"
+      addSipEvent(`Klingelton blockiert: ${error?.message || "Browser-Autoplay"}`)
+    }
+  }
+
+  const setupSession = (session, direction = "outgoing") => {
+    const { SessionState } = sipModule.value
+
+    activeSession.value = session
+    callState.value = direction === "incoming" ? "incoming" : "connecting"
+    sipStatus.value = direction === "incoming" ? "Eingehender Anruf" : "Anruf wird aufgebaut"
+
+    session.stateChange.addListener(async (state) => {
+      if (state === SessionState.Establishing) {
+        callState.value = "connecting"
+        sipStatus.value = "Anruf wird aufgebaut"
+      }
+
+      if (state === SessionState.Established) {
+        stopCallSignaling()
+        callState.value = "active"
+        sipStatus.value = "Im Gespräch"
+        incomingCall.value = null
+        await attachRemoteAudio(session)
+      }
+
+      if (state === SessionState.Terminated) {
+        stopCallSignaling()
+        callState.value = "terminated"
+        sipStatus.value = sipRegistered.value ? "Registriert" : "Nicht verbunden"
+        activeSession.value = null
+        incomingCall.value = null
+        cleanupRemoteAudio()
+      }
+    })
+  }
+
+  const loadTelephony = async () => {
+    loading.value = true
+    try {
+      const [configRes, statusRes] = await Promise.all([
+        $api("/api/telephony/config"),
+        $api("/api/telephony/status")
+      ])
+
+      config.value = configRes
+      status.value = statusRes
+      lastUpdated.value = new Date()
+
+      if (!selectedAccount.value && configRes?.testAccounts?.length) {
+        selectedExtension.value = configRes.testAccounts[0].extension
+      }
+    } catch (error) {
+      toast.add({
+        title: "Telefonie-Status konnte nicht geladen werden",
+        color: "error"
+      })
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const refreshStatus = async () => {
+    statusLoading.value = true
+    try {
+      status.value = await $api("/api/telephony/status")
+      lastUpdated.value = new Date()
+    } catch (error) {
+      toast.add({
+        title: "Asterisk-Status konnte nicht geprüft werden",
+        color: "error"
+      })
+    } finally {
+      statusLoading.value = false
+    }
+  }
+
+  const testWebSocket = async () => {
+    if (!config.value?.sipWebSocketUrl || websocketTesting.value) return
+
+    websocketTesting.value = true
+    websocketResult.value = null
+
+    await new Promise((resolve) => {
+      let settled = false
+      const socket = new WebSocket(config.value.sipWebSocketUrl, "sip")
+      const timer = window.setTimeout(() => {
+        if (settled) return
+        settled = true
+        socket.close()
+        websocketResult.value = {
+          ok: false,
+          message: "WebSocket-Verbindung ist abgelaufen."
+        }
+        resolve()
+      }, 3000)
+
+      socket.onopen = () => {
+        if (settled) return
+        settled = true
+        window.clearTimeout(timer)
+        websocketResult.value = {
+          ok: true,
+          message: "SIP-WebSocket ist aus dem Browser erreichbar."
+        }
+        socket.close()
+        resolve()
+      }
+
+      socket.onerror = () => {
+        if (settled) return
+        settled = true
+        window.clearTimeout(timer)
+        websocketResult.value = {
+          ok: false,
+          message: "SIP-WebSocket konnte nicht geöffnet werden."
+        }
+        resolve()
+      }
+    })
+
+    websocketTesting.value = false
+  }
+
+  const stopSip = async () => {
+    sipLoading.value = true
+    sipError.value = null
+
+    try {
+      if (activeSession.value) {
+        await hangupCall()
+      }
+
+      if (registerer.value) {
+        await registerer.value.unregister()
+        registerer.value = null
+      }
+
+      if (userAgent.value) {
+        await userAgent.value.stop()
+        userAgent.value = null
+      }
+
+      sipRegistered.value = false
+      registererState.value = "Initial"
+      sipStatus.value = "Nicht verbunden"
+      callState.value = "idle"
+    } catch (error) {
+      sipError.value = error?.message || "SIP-Verbindung konnte nicht getrennt werden."
+    } finally {
+      sipLoading.value = false
+    }
+  }
+
+  const registerSip = async () => {
+    if (!canRegisterSip.value) return
+
+    sipLoading.value = true
+    sipError.value = null
+
+    try {
+      await stopSip()
+
+      const sip = await ensureSipModule()
+      const account = selectedAccount.value
+      const uri = sip.UserAgent.makeURI(`sip:${account.extension}@${config.value.sipDomain}`)
+
+      if (!uri) throw new Error("SIP-URI konnte nicht erstellt werden.")
+
+      const handleIncomingInvite = (invitation) => {
+        addSipEvent(`INVITE von ${invitation.remoteIdentity?.uri?.user || "unbekannt"} empfangen`)
+        incomingCall.value = invitation
+        setupSession(invitation, "incoming")
+        startCallSignaling()
+
+        toast.add({
+          title: "Eingehender Anruf",
+          description: `Anruf für ${account.extension}`,
+          color: "primary"
+        })
+      }
+
+      const ua = new sip.UserAgent({
+        uri,
+        displayName: account.displayName,
+        contactName: account.extension,
+        authorizationUsername: account.extension,
+        authorizationPassword: account.password,
+        logBuiltinEnabled: true,
+        logLevel: "log",
+        logConnector: (level, category, label, content) => {
+          if (category === "sip.Transport" && content.includes("Received WebSocket")) {
+            addSipEvent("SIP-Nachricht über WebSocket empfangen")
+          }
+
+          if (content.includes("INVITE")) {
+            addSipEvent(`${category}: ${content.split("\n")[0]}`)
+          }
+
+          if (level === "error" || level === "warn") {
+            addSipEvent(`${category}: ${content.split("\n")[0]}`)
+          }
+        },
+        delegate: {
+          onInvite: handleIncomingInvite,
+          onConnect: () => {
+            addSipEvent("SIP-WebSocket verbunden")
+            sipStatus.value = sipRegistered.value ? `Registriert als ${account.extension}` : "SIP-WebSocket verbunden"
+          },
+          onDisconnect: () => {
+            addSipEvent("SIP-WebSocket getrennt")
+            sipRegistered.value = false
+            sipStatus.value = "SIP-WebSocket getrennt"
+          },
+        },
+        transportOptions: {
+          server: config.value.sipWebSocketUrl,
+          keepAliveInterval: 20,
+          traceSip: true,
+        },
+        sessionDescriptionHandlerFactoryOptions: {
+          constraints: {
+            audio: true,
+            video: false,
+          },
+          peerConnectionConfiguration: {
+            iceServers: [],
+          },
+        },
+      })
+
+      const reg = new sip.Registerer(ua, {
+        expires: 120,
+      })
+
+      reg.stateChange.addListener((state) => {
+        registererState.value = state
+
+        if (state === sip.RegistererState.Registered) {
+          addSipEvent(`Registrierung ${account.extension}: Registered`)
+          sipRegistered.value = true
+          sipStatus.value = `Registriert als ${account.extension}`
+        }
+
+        if (state === sip.RegistererState.Unregistered || state === sip.RegistererState.Terminated) {
+          addSipEvent(`Registrierung ${account.extension}: ${state}`)
+          sipRegistered.value = false
+          sipStatus.value = "Nicht verbunden"
+        }
+      })
+
+      userAgent.value = ua
+      registerer.value = reg
+
+      await ua.start()
+      await reg.register({
+        requestDelegate: {
+          onAccept: () => {
+            addSipEvent(`REGISTER ${account.extension}: 200 OK`)
+            sipRegistered.value = true
+            sipStatus.value = `Registriert als ${account.extension}`
+            registererState.value = sip.RegistererState.Registered
+          },
+          onReject: (response) => {
+            sipRegistered.value = false
+            sipStatus.value = "Registrierung abgelehnt"
+            sipError.value = `Asterisk hat REGISTER mit HTTP/SIP ${response.message.statusCode} abgelehnt.`
+            addSipEvent(`REGISTER ${account.extension}: ${response.message.statusCode}`)
+          },
+        },
+      })
+    } catch (error) {
+      sipRegistered.value = false
+      sipStatus.value = "Nicht verbunden"
+      sipError.value = error?.message || "SIP-Registrierung fehlgeschlagen."
+    } finally {
+      sipLoading.value = false
+    }
+  }
+
+  const startCall = async () => {
+    if (!canStartCall.value) return
+
+    sipLoading.value = true
+    sipError.value = null
+
+    try {
+      const sip = await ensureSipModule()
+      const target = sip.UserAgent.makeURI(`sip:${dialTarget.value.trim()}@${config.value.sipDomain}`)
+
+      if (!target) throw new Error("Zielnummer ist keine gültige SIP-Adresse.")
+
+      const inviter = new sip.Inviter(userAgent.value, target, {
+        sessionDescriptionHandlerOptions: {
+          constraints: {
+            audio: true,
+            video: false,
+          },
+        },
+      })
+
+      setupSession(inviter, "outgoing")
+      await inviter.invite()
+    } catch (error) {
+      activeSession.value = null
+      callState.value = "idle"
+      sipError.value = error?.message || "Anruf konnte nicht gestartet werden."
+    } finally {
+      sipLoading.value = false
+    }
+  }
+
+  const acceptIncomingCall = async () => {
+    if (!incomingCall.value) return
+
+    sipLoading.value = true
+    sipError.value = null
+    stopCallSignaling()
+
+    try {
+      await incomingCall.value.accept({
+        sessionDescriptionHandlerOptions: {
+          constraints: {
+            audio: true,
+            video: false,
+          },
+        },
+      })
+    } catch (error) {
+      sipError.value = error?.message || "Anruf konnte nicht angenommen werden."
+    } finally {
+      sipLoading.value = false
+    }
+  }
+
+  const rejectIncomingCall = async () => {
+    if (!incomingCall.value) return
+
+    try {
+      stopCallSignaling()
+      await incomingCall.value.reject()
+    } finally {
+      incomingCall.value = null
+      activeSession.value = null
+      callState.value = "idle"
+    }
+  }
+
+  const hangupCall = async () => {
+    const session = activeSession.value
+    if (!session) return
+
+    const { SessionState } = sipModule.value || await ensureSipModule()
+
+    try {
+      if (session.state === SessionState.Initial && session.reject) {
+        await session.reject()
+      } else if (session.state === SessionState.Establishing && session.cancel) {
+        await session.cancel()
+      } else if (session.state === SessionState.Established && session.bye) {
+        await session.bye()
+      } else if (session.dispose) {
+        session.dispose()
+      }
+    } finally {
+      stopCallSignaling()
+      activeSession.value = null
+      incomingCall.value = null
+      callState.value = "idle"
+      cleanupRemoteAudio()
+      sipStatus.value = sipRegistered.value ? "Registriert" : "Nicht verbunden"
+    }
+  }
+
+  return {
+    loading,
+    statusLoading,
+    websocketTesting,
+    config,
+    status,
+    websocketResult,
+    lastUpdated,
+    selectedExtension,
+    dialTarget,
+    activeSession,
+    remoteAudio,
+    sipLoading,
+    sipRegistered,
+    sipStatus,
+    sipError,
+    incomingCall,
+    incomingCaller,
+    callState,
+    registererState,
+    sipEvents,
+    callSignalStatus,
+    selectedAccount,
+    canRegisterSip,
+    canStartCall,
+    canHangup,
+    statusColor,
+    statusIcon,
+    websocketColor,
+    loadTelephony,
+    refreshStatus,
+    testWebSocket,
+    registerSip,
+    stopSip,
+    startCall,
+    acceptIncomingCall,
+    rejectIncomingCall,
+    hangupCall,
+  }
+}

frontend/layouts/default.vue

@@ -311,6 +311,7 @@ onMounted(() => {
         </UDashboardPanel>
       </UDashboardGroup>
 
+      <TelephonyCallOverlay/>
       <HelpSlideover/>
 
       <Calculator v-if="calculatorStore.isOpen"/>

frontend/pages/communication/phone-setup.vue

@@ -0,0 +1,288 @@
+<script setup>
+const {
+  loading,
+  statusLoading,
+  websocketTesting,
+  config,
+  status,
+  websocketResult,
+  lastUpdated,
+  selectedExtension,
+  sipRegistered,
+  sipStatus,
+  registererState,
+  sipEvents,
+  statusColor,
+  statusIcon,
+  websocketColor,
+  loadTelephony,
+  refreshStatus,
+  testWebSocket,
+} = useTelephonySoftphone()
+
+onMounted(loadTelephony)
+</script>
+
+<template>
+  <div class="min-h-0 flex-1 overflow-y-auto bg-gray-50 px-4 py-6 sm:px-6 lg:px-8">
+    <div class="mx-auto flex max-w-7xl flex-col gap-6">
+      <div class="flex flex-col gap-4 border-b border-gray-200 pb-5 lg:flex-row lg:items-end lg:justify-between">
+        <div>
+          <p class="text-sm font-medium text-primary-600">
+            Kommunikation
+          </p>
+          <h1 class="mt-1 text-2xl font-semibold text-gray-950">
+            Telefonie Setup
+          </h1>
+          <p class="mt-2 max-w-3xl text-sm text-gray-600">
+            Asterisk-Status, Browser-Verbindung und lokale Test-Nebenstellen.
+          </p>
+        </div>
+
+        <div class="flex flex-wrap gap-2">
+          <UButton
+            icon="i-heroicons-arrow-path"
+            variant="soft"
+            :loading="loading"
+            @click="loadTelephony"
+          >
+            Aktualisieren
+          </UButton>
+          <UButton
+            to="/communication/phone"
+            icon="i-heroicons-phone"
+            variant="outline"
+          >
+            Zur Telefonie
+          </UButton>
+        </div>
+      </div>
+
+      <div class="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between gap-3">
+              <div>
+                <h2 class="text-base font-semibold text-gray-950">
+                  Asterisk-Status
+                </h2>
+                <p class="mt-1 text-sm text-gray-500">
+                  Backend-Abfrage gegen den lokalen Telefonie-Stack.
+                </p>
+              </div>
+              <UButton
+                icon="i-heroicons-signal"
+                variant="ghost"
+                :loading="statusLoading"
+                @click="refreshStatus"
+              />
+            </div>
+          </template>
+
+          <div class="grid gap-4 sm:grid-cols-3">
+            <div class="rounded-lg border border-gray-200 bg-white p-4">
+              <div class="flex items-center gap-2">
+                <UIcon :name="statusIcon" :class="status?.reachable ? 'text-green-600' : 'text-amber-600'" />
+                <span class="text-sm font-medium text-gray-700">Status</span>
+              </div>
+              <p class="mt-3 text-lg font-semibold text-gray-950">
+                {{ status?.reachable ? "Erreichbar" : (status?.enabled ? "Nicht erreichbar" : "Deaktiviert") }}
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-gray-200 bg-white p-4">
+              <div class="flex items-center gap-2">
+                <UIcon name="i-heroicons-server-stack" class="text-gray-500" />
+                <span class="text-sm font-medium text-gray-700">Provider</span>
+              </div>
+              <p class="mt-3 text-lg font-semibold text-gray-950">
+                {{ config?.provider || "asterisk" }}
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-gray-200 bg-white p-4">
+              <div class="flex items-center gap-2">
+                <UIcon name="i-heroicons-phone-arrow-up-right" class="text-gray-500" />
+                <span class="text-sm font-medium text-gray-700">Echo-Test</span>
+              </div>
+              <p class="mt-3 text-lg font-semibold text-gray-950">
+                {{ config?.echoExtension || "600" }}
+              </p>
+            </div>
+          </div>
+
+          <UAlert
+            class="mt-4"
+            :color="statusColor"
+            :icon="statusIcon"
+            :title="status?.message || 'Telefonie wird geladen'"
+            :description="status?.statusUrl || 'Noch keine Status-URL geladen.'"
+          />
+
+          <div v-if="status?.attempts?.length" class="mt-4 rounded-lg border border-gray-200 bg-gray-50 p-3">
+            <p class="text-xs font-medium uppercase tracking-wide text-gray-500">
+              Geprüfte Status-Ziele
+            </p>
+            <div class="mt-2 grid gap-2">
+              <div
+                v-for="attempt in status.attempts"
+                :key="attempt.url"
+                class="flex items-center justify-between gap-3 text-sm"
+              >
+                <span class="break-all font-mono text-gray-700">{{ attempt.url }}</span>
+                <UBadge :color="attempt.reachable ? 'success' : 'neutral'" variant="soft">
+                  {{ attempt.reachable ? `HTTP ${attempt.statusCode}` : "offline" }}
+                </UBadge>
+              </div>
+            </div>
+          </div>
+        </UCard>
+
+        <UCard>
+          <template #header>
+            <div>
+              <h2 class="text-base font-semibold text-gray-950">
+                Lokalen Stack starten
+              </h2>
+              <p class="mt-1 text-sm text-gray-500">
+                Asterisk läuft getrennt vom normalen Stack im Compose-Profil.
+              </p>
+            </div>
+          </template>
+
+          <div class="rounded-lg bg-gray-950 p-4 font-mono text-sm text-gray-100">
+            docker compose --profile telephony-dev up -d asterisk-dev
+          </div>
+
+          <div class="mt-4 grid gap-3 text-sm text-gray-600">
+            <div class="flex items-center justify-between gap-4">
+              <span>SIP-Domain</span>
+              <span class="font-mono text-gray-950">{{ config?.sipDomain || "localhost" }}</span>
+            </div>
+            <div class="flex items-center justify-between gap-4">
+              <span>WebSocket</span>
+              <span class="break-all text-right font-mono text-gray-950">{{ config?.sipWebSocketUrl || "-" }}</span>
+            </div>
+          </div>
+        </UCard>
+      </div>
+
+      <div class="grid gap-4 lg:grid-cols-[0.9fr_1.1fr]">
+        <UCard>
+          <template #header>
+            <div>
+              <h2 class="text-base font-semibold text-gray-950">
+                Browser-Test
+              </h2>
+              <p class="mt-1 text-sm text-gray-500">
+                Prüft, ob FEDEO den SIP-WebSocket im Browser öffnen kann.
+              </p>
+            </div>
+          </template>
+
+          <div class="flex flex-col gap-3">
+            <UButton
+              icon="i-heroicons-bolt"
+              :loading="websocketTesting"
+              :disabled="!config?.sipWebSocketUrl"
+              @click="testWebSocket"
+            >
+              WebSocket prüfen
+            </UButton>
+
+            <UAlert
+              v-if="websocketResult"
+              :color="websocketColor"
+              :icon="websocketResult.ok ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'"
+              :title="websocketResult.message"
+            />
+          </div>
+        </UCard>
+
+        <UCard>
+          <template #header>
+            <div>
+              <h2 class="text-base font-semibold text-gray-950">
+                Test-Nebenstellen
+              </h2>
+              <p class="mt-1 text-sm text-gray-500">
+                Für lokale Call-Tests zwischen zwei Browser-Sessions.
+              </p>
+            </div>
+          </template>
+
+          <div class="grid gap-3 sm:grid-cols-2">
+            <div
+              v-for="account in config?.testAccounts || []"
+              :key="account.extension"
+              class="rounded-lg border border-gray-200 bg-white p-4"
+            >
+              <div class="flex items-center gap-2">
+                <UIcon name="i-heroicons-user-circle" class="text-primary-600" />
+                <h3 class="font-semibold text-gray-950">
+                  {{ account.displayName }}
+                </h3>
+              </div>
+              <dl class="mt-4 grid gap-2 text-sm">
+                <div class="flex items-center justify-between gap-3">
+                  <dt class="text-gray-500">Nebenstelle</dt>
+                  <dd class="font-mono text-gray-950">{{ account.extension }}</dd>
+                </div>
+                <div class="flex items-center justify-between gap-3">
+                  <dt class="text-gray-500">Passwort</dt>
+                  <dd class="font-mono text-gray-950">{{ account.password }}</dd>
+                </div>
+              </dl>
+            </div>
+          </div>
+        </UCard>
+      </div>
+
+      <UCard>
+        <template #header>
+          <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+            <div>
+              <h2 class="text-base font-semibold text-gray-950">
+                SIP-Diagnose
+              </h2>
+              <p class="mt-1 text-sm text-gray-500">
+                Aktuelle Registrierung und letzte SIP-Ereignisse.
+              </p>
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <UBadge :color="sipRegistered ? 'success' : 'neutral'" variant="soft">
+                {{ sipStatus }}
+              </UBadge>
+              <UBadge color="neutral" variant="soft">
+                Nebenstelle {{ selectedExtension }}
+              </UBadge>
+              <UBadge color="neutral" variant="soft">
+                {{ registererState }}
+              </UBadge>
+            </div>
+          </div>
+        </template>
+
+        <div v-if="sipEvents.length" class="rounded-lg border border-gray-200 bg-gray-50 p-3">
+          <ul class="space-y-1 text-xs text-gray-600">
+            <li
+              v-for="event in sipEvents"
+              :key="`${event.time}-${event.message}`"
+              class="grid grid-cols-[4.5rem_1fr] gap-2"
+            >
+              <span class="font-mono text-gray-400">{{ event.time }}</span>
+              <span class="break-words">{{ event.message }}</span>
+            </li>
+          </ul>
+        </div>
+        <p v-else class="text-sm text-gray-500">
+          Noch keine SIP-Ereignisse vorhanden.
+        </p>
+      </UCard>
+
+      <p v-if="lastUpdated" class="text-xs text-gray-500">
+        Zuletzt geprüft: {{ lastUpdated.toLocaleString("de-DE") }}
+      </p>
+    </div>
+  </div>
+</template>

frontend/pages/communication/phone.vue

@@ -1,622 +1,33 @@
 <script setup>
-const toast = useToast()
+const {
-const { $api } = useNuxtApp()
+  loading,
-
+  config,
-const loading = ref(false)
+  selectedExtension,
-const statusLoading = ref(false)
+  dialTarget,
-const websocketTesting = ref(false)
+  activeSession,
-const config = ref(null)
+  remoteAudio,
-const status = ref(null)
+  sipLoading,
-const websocketResult = ref(null)
+  sipRegistered,
-const lastUpdated = ref(null)
+  sipStatus,
-const selectedExtension = ref("1001")
+  sipError,
-const dialTarget = ref("600")
+  callState,
-const sipModule = ref(null)
+  registererState,
-const userAgent = shallowRef(null)
+  canRegisterSip,
-const registerer = shallowRef(null)
+  canStartCall,
-const activeSession = shallowRef(null)
+  canHangup,
-const remoteAudio = ref(null)
+  loadTelephony,
-const sipLoading = ref(false)
+  registerSip,
-const sipRegistered = ref(false)
+  stopSip,
-const sipStatus = ref("Nicht verbunden")
+  startCall,
-const sipError = ref(null)
+  hangupCall,
-const incomingCall = ref(null)
+} = useTelephonySoftphone()
-const callState = ref("idle")
-const registererState = ref("Initial")
-const sipEvents = ref([])
-const ringtoneTimer = shallowRef(null)
-const ringtoneAudioContext = shallowRef(null)
-const callSignalStatus = ref("Bereit")
-const originalDocumentTitle = ref("")
-
-const incomingCaller = computed(() => {
-  const identity = incomingCall.value?.remoteIdentity
-  return identity?.displayName || identity?.uri?.user || "Unbekannter Anrufer"
-})
-
-const addSipEvent = (message) => {
-  sipEvents.value = [
-    {
-      time: new Date().toLocaleTimeString("de-DE"),
-      message,
-    },
-    ...sipEvents.value,
-  ].slice(0, 8)
-}
-
-const playRingtoneTick = async () => {
-  if (!window.AudioContext && !window.webkitAudioContext) return
-
-  const AudioContextConstructor = window.AudioContext || window.webkitAudioContext
-  const context = ringtoneAudioContext.value || new AudioContextConstructor()
-  ringtoneAudioContext.value = context
-
-  if (context.state === "suspended") {
-    await context.resume()
-  }
-
-  const oscillator = context.createOscillator()
-  const gain = context.createGain()
-  oscillator.type = "sine"
-  oscillator.frequency.value = 880
-  gain.gain.setValueAtTime(0.0001, context.currentTime)
-  gain.gain.exponentialRampToValueAtTime(0.12, context.currentTime + 0.03)
-  gain.gain.exponentialRampToValueAtTime(0.0001, context.currentTime + 0.35)
-  oscillator.connect(gain)
-  gain.connect(context.destination)
-  oscillator.start()
-  oscillator.stop(context.currentTime + 0.38)
-}
-
-const startCallSignaling = async () => {
-  stopCallSignaling()
-  callSignalStatus.value = "Signalisiert"
-  originalDocumentTitle.value = document.title
-  document.title = "Eingehender Anruf - FEDEO"
-
-  if (navigator.vibrate) {
-    navigator.vibrate([180, 90, 180])
-  }
-
-  try {
-    await playRingtoneTick()
-    ringtoneTimer.value = window.setInterval(() => {
-      playRingtoneTick().catch((error) => {
-        callSignalStatus.value = "Klingelton blockiert"
-        addSipEvent(`Klingelton blockiert: ${error?.message || "Browser-Autoplay"}`)
-      })
-    }, 1400)
-  } catch (error) {
-    callSignalStatus.value = "Klingelton blockiert"
-    addSipEvent(`Klingelton blockiert: ${error?.message || "Browser-Autoplay"}`)
-  }
-}
-
-const stopCallSignaling = () => {
-  if (ringtoneTimer.value) {
-    window.clearInterval(ringtoneTimer.value)
-    ringtoneTimer.value = null
-  }
-
-  if (originalDocumentTitle.value) {
-    document.title = originalDocumentTitle.value
-    originalDocumentTitle.value = ""
-  }
-
-  if (navigator.vibrate) {
-    navigator.vibrate(0)
-  }
-
-  callSignalStatus.value = "Bereit"
-}
-
-const selectedAccount = computed(() =>
-  (config.value?.testAccounts || []).find((account) => account.extension === selectedExtension.value)
-    || config.value?.testAccounts?.[0]
-)
-
-const canRegisterSip = computed(() =>
-  Boolean(config.value?.sipWebSocketUrl && config.value?.sipDomain && selectedAccount.value && !sipLoading.value)
-)
-
-const canStartCall = computed(() =>
-  Boolean(sipRegistered.value && dialTarget.value?.trim() && !activeSession.value && !sipLoading.value)
-)
-
-const canHangup = computed(() =>
-  Boolean(activeSession.value && callState.value !== "terminated")
-)
-
-const statusColor = computed(() => {
-  if (status.value?.reachable) return "success"
-  if (!status.value?.enabled) return "warning"
-  return "error"
-})
-
-const statusIcon = computed(() => {
-  if (status.value?.reachable) return "i-heroicons-signal"
-  if (!status.value?.enabled) return "i-heroicons-pause-circle"
-  return "i-heroicons-signal-slash"
-})
-
-const websocketColor = computed(() => {
-  if (!websocketResult.value) return "neutral"
-  return websocketResult.value.ok ? "success" : "error"
-})
-
-const loadTelephony = async () => {
-  loading.value = true
-  try {
-    const [configRes, statusRes] = await Promise.all([
-      $api("/api/telephony/config"),
-      $api("/api/telephony/status")
-    ])
-
-    config.value = configRes
-    status.value = statusRes
-    lastUpdated.value = new Date()
-  } catch (error) {
-    toast.add({
-      title: "Telefonie-Status konnte nicht geladen werden",
-      color: "error"
-    })
-  } finally {
-    loading.value = false
-  }
-}
-
-const refreshStatus = async () => {
-  statusLoading.value = true
-  try {
-    status.value = await $api("/api/telephony/status")
-    lastUpdated.value = new Date()
-  } catch (error) {
-    toast.add({
-      title: "Asterisk-Status konnte nicht geprüft werden",
-      color: "error"
-    })
-  } finally {
-    statusLoading.value = false
-  }
-}
-
-const testWebSocket = async () => {
-  if (!config.value?.sipWebSocketUrl || websocketTesting.value) return
-
-  websocketTesting.value = true
-  websocketResult.value = null
-
-  await new Promise((resolve) => {
-    let settled = false
-    const socket = new WebSocket(config.value.sipWebSocketUrl, "sip")
-    const timer = window.setTimeout(() => {
-      if (settled) return
-      settled = true
-      socket.close()
-      websocketResult.value = {
-        ok: false,
-        message: "WebSocket-Verbindung ist abgelaufen."
-      }
-      resolve()
-    }, 3000)
-
-    socket.onopen = () => {
-      if (settled) return
-      settled = true
-      window.clearTimeout(timer)
-      websocketResult.value = {
-        ok: true,
-        message: "SIP-WebSocket ist aus dem Browser erreichbar."
-      }
-      socket.close()
-      resolve()
-    }
-
-    socket.onerror = () => {
-      if (settled) return
-      settled = true
-      window.clearTimeout(timer)
-      websocketResult.value = {
-        ok: false,
-        message: "SIP-WebSocket konnte nicht geöffnet werden."
-      }
-      resolve()
-    }
-  })
-
-  websocketTesting.value = false
-}
-
-const ensureSipModule = async () => {
-  if (!sipModule.value) {
-    sipModule.value = await import("sip.js")
-  }
-
-  return sipModule.value
-}
-
-const cleanupRemoteAudio = () => {
-  if (!remoteAudio.value?.srcObject) return
-
-  const stream = remoteAudio.value.srcObject
-  if (stream?.getTracks) {
-    stream.getTracks().forEach((track) => track.stop())
-  }
-
-  remoteAudio.value.srcObject = null
-}
-
-const attachRemoteAudio = async (session) => {
-  const peerConnection = session?.sessionDescriptionHandler?.peerConnection
-  if (!peerConnection || !remoteAudio.value) return
-
-  const remoteStream = new MediaStream()
-  peerConnection.getReceivers().forEach((receiver) => {
-    if (receiver.track) remoteStream.addTrack(receiver.track)
-  })
-
-  remoteAudio.value.srcObject = remoteStream
-
-  try {
-    await remoteAudio.value.play()
-  } catch (error) {
-    // Browser dürfen Autoplay blockieren; der Call selbst bleibt davon unberührt.
-  }
-}
-
-const setupSession = (session, direction = "outgoing") => {
-  const { SessionState } = sipModule.value
-
-  activeSession.value = session
-  callState.value = direction === "incoming" ? "incoming" : "connecting"
-  sipStatus.value = direction === "incoming" ? "Eingehender Anruf" : "Anruf wird aufgebaut"
-
-  session.stateChange.addListener(async (state) => {
-    if (state === SessionState.Establishing) {
-      callState.value = "connecting"
-      sipStatus.value = "Anruf wird aufgebaut"
-    }
-
-    if (state === SessionState.Established) {
-      stopCallSignaling()
-      callState.value = "active"
-      sipStatus.value = "Im Gespräch"
-      incomingCall.value = null
-      await attachRemoteAudio(session)
-    }
-
-    if (state === SessionState.Terminated) {
-      stopCallSignaling()
-      callState.value = "terminated"
-      sipStatus.value = sipRegistered.value ? "Registriert" : "Nicht verbunden"
-      activeSession.value = null
-      incomingCall.value = null
-      cleanupRemoteAudio()
-    }
-  })
-}
-
-const stopSip = async () => {
-  sipLoading.value = true
-  sipError.value = null
-
-  try {
-    if (activeSession.value) {
-      await hangupCall()
-    }
-
-    if (registerer.value) {
-      await registerer.value.unregister()
-      registerer.value = null
-    }
-
-    if (userAgent.value) {
-      await userAgent.value.stop()
-      userAgent.value = null
-    }
-
-    sipRegistered.value = false
-    registererState.value = "Initial"
-    sipStatus.value = "Nicht verbunden"
-    callState.value = "idle"
-  } catch (error) {
-    sipError.value = error?.message || "SIP-Verbindung konnte nicht getrennt werden."
-  } finally {
-    sipLoading.value = false
-  }
-}
-
-const registerSip = async () => {
-  if (!canRegisterSip.value) return
-
-  sipLoading.value = true
-  sipError.value = null
-
-  try {
-    await stopSip()
-
-    const sip = await ensureSipModule()
-    const account = selectedAccount.value
-    const uri = sip.UserAgent.makeURI(`sip:${account.extension}@${config.value.sipDomain}`)
-
-    if (!uri) throw new Error("SIP-URI konnte nicht erstellt werden.")
-
-    const handleIncomingInvite = (invitation) => {
-      addSipEvent(`INVITE von ${invitation.remoteIdentity?.uri?.user || "unbekannt"} empfangen`)
-      incomingCall.value = invitation
-      setupSession(invitation, "incoming")
-      startCallSignaling()
-
-      toast.add({
-        title: "Eingehender Anruf",
-        description: `Anruf für ${account.extension}`,
-        color: "primary"
-      })
-    }
-
-    const ua = new sip.UserAgent({
-      uri,
-      displayName: account.displayName,
-      contactName: account.extension,
-      authorizationUsername: account.extension,
-      authorizationPassword: account.password,
-      logBuiltinEnabled: true,
-      logLevel: "log",
-      logConnector: (level, category, label, content) => {
-        if (category === "sip.Transport" && content.includes("Received WebSocket")) {
-          addSipEvent("SIP-Nachricht über WebSocket empfangen")
-        }
-
-        if (content.includes("INVITE")) {
-          addSipEvent(`${category}: ${content.split("\n")[0]}`)
-        }
-
-        if (level === "error" || level === "warn") {
-          addSipEvent(`${category}: ${content.split("\n")[0]}`)
-        }
-      },
-      delegate: {
-        onInvite: handleIncomingInvite,
-        onConnect: () => {
-          addSipEvent("SIP-WebSocket verbunden")
-          sipStatus.value = sipRegistered.value ? `Registriert als ${account.extension}` : "SIP-WebSocket verbunden"
-        },
-        onDisconnect: () => {
-          addSipEvent("SIP-WebSocket getrennt")
-          sipRegistered.value = false
-          sipStatus.value = "SIP-WebSocket getrennt"
-        },
-      },
-      transportOptions: {
-        server: config.value.sipWebSocketUrl,
-        keepAliveInterval: 20,
-        traceSip: true,
-      },
-      sessionDescriptionHandlerFactoryOptions: {
-        constraints: {
-          audio: true,
-          video: false,
-        },
-        peerConnectionConfiguration: {
-          iceServers: [],
-        },
-      },
-    })
-
-    const reg = new sip.Registerer(ua, {
-      expires: 120,
-    })
-
-    reg.stateChange.addListener((state) => {
-      registererState.value = state
-
-      if (state === sip.RegistererState.Registered) {
-        addSipEvent(`Registrierung ${account.extension}: Registered`)
-        sipRegistered.value = true
-        sipStatus.value = `Registriert als ${account.extension}`
-      }
-
-      if (state === sip.RegistererState.Unregistered || state === sip.RegistererState.Terminated) {
-        addSipEvent(`Registrierung ${account.extension}: ${state}`)
-        sipRegistered.value = false
-        sipStatus.value = "Nicht verbunden"
-      }
-    })
-
-    userAgent.value = ua
-    registerer.value = reg
-
-    await ua.start()
-    await reg.register({
-      requestDelegate: {
-        onAccept: () => {
-          addSipEvent(`REGISTER ${account.extension}: 200 OK`)
-          sipRegistered.value = true
-          sipStatus.value = `Registriert als ${account.extension}`
-          registererState.value = sip.RegistererState.Registered
-        },
-        onReject: (response) => {
-          sipRegistered.value = false
-          sipStatus.value = "Registrierung abgelehnt"
-          sipError.value = `Asterisk hat REGISTER mit HTTP/SIP ${response.message.statusCode} abgelehnt.`
-          addSipEvent(`REGISTER ${account.extension}: ${response.message.statusCode}`)
-        },
-      },
-    })
-  } catch (error) {
-    sipRegistered.value = false
-    sipStatus.value = "Nicht verbunden"
-    sipError.value = error?.message || "SIP-Registrierung fehlgeschlagen."
-  } finally {
-    sipLoading.value = false
-  }
-}
-
-const startCall = async () => {
-  if (!canStartCall.value) return
-
-  sipLoading.value = true
-  sipError.value = null
-
-  try {
-    const sip = await ensureSipModule()
-    const target = sip.UserAgent.makeURI(`sip:${dialTarget.value.trim()}@${config.value.sipDomain}`)
-
-    if (!target) throw new Error("Zielnummer ist keine gültige SIP-Adresse.")
-
-    const inviter = new sip.Inviter(userAgent.value, target, {
-      sessionDescriptionHandlerOptions: {
-        constraints: {
-          audio: true,
-          video: false,
-        },
-      },
-    })
-
-    setupSession(inviter, "outgoing")
-    await inviter.invite()
-  } catch (error) {
-    activeSession.value = null
-    callState.value = "idle"
-    sipError.value = error?.message || "Anruf konnte nicht gestartet werden."
-  } finally {
-    sipLoading.value = false
-  }
-}
-
-const acceptIncomingCall = async () => {
-  if (!incomingCall.value) return
-
-  sipLoading.value = true
-  sipError.value = null
-  stopCallSignaling()
-
-  try {
-    await incomingCall.value.accept({
-      sessionDescriptionHandlerOptions: {
-        constraints: {
-          audio: true,
-          video: false,
-        },
-      },
-    })
-  } catch (error) {
-    sipError.value = error?.message || "Anruf konnte nicht angenommen werden."
-  } finally {
-    sipLoading.value = false
-  }
-}
-
-const rejectIncomingCall = async () => {
-  if (!incomingCall.value) return
-
-  try {
-    stopCallSignaling()
-    await incomingCall.value.reject()
-  } finally {
-    incomingCall.value = null
-    activeSession.value = null
-    callState.value = "idle"
-  }
-}
-
-const hangupCall = async () => {
-  const session = activeSession.value
-  if (!session) return
-
-  const { SessionState } = sipModule.value || await ensureSipModule()
-
-  try {
-    if (session.state === SessionState.Initial && session.reject) {
-      await session.reject()
-    } else if (session.state === SessionState.Establishing && session.cancel) {
-      await session.cancel()
-    } else if (session.state === SessionState.Established && session.bye) {
-      await session.bye()
-    } else if (session.dispose) {
-      session.dispose()
-    }
-  } finally {
-    stopCallSignaling()
-    activeSession.value = null
-    incomingCall.value = null
-    callState.value = "idle"
-    cleanupRemoteAudio()
-    sipStatus.value = sipRegistered.value ? "Registriert" : "Nicht verbunden"
-  }
-}
-
-watch(config, (nextConfig) => {
-  if (!selectedAccount.value && nextConfig?.testAccounts?.length) {
-    selectedExtension.value = nextConfig.testAccounts[0].extension
-  }
-})
 
 onMounted(loadTelephony)
-
-onBeforeUnmount(() => {
-  stopCallSignaling()
-  stopSip()
-})
 </script>
 
 <template>
   <div class="min-h-0 flex-1 overflow-y-auto bg-gray-50 px-4 py-6 sm:px-6 lg:px-8">
     <div class="mx-auto flex max-w-7xl flex-col gap-6">
-      <div
-        v-if="incomingCall"
-        class="sticky top-0 z-30 rounded-lg border border-primary-200 bg-white p-4 shadow-lg ring-1 ring-primary-100"
-      >
-        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-          <div class="flex min-w-0 items-center gap-3">
-            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-primary-50 text-primary-600 ring-8 ring-primary-100">
-              <UIcon name="i-heroicons-phone-arrow-down-left" class="h-6 w-6" />
-            </div>
-            <div class="min-w-0">
-              <p class="text-xs font-medium uppercase text-primary-600">
-                Eingehender Anruf
-              </p>
-              <h2 class="truncate text-lg font-semibold text-gray-950">
-                {{ incomingCaller }}
-              </h2>
-              <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-gray-500">
-                <span>Nebenstelle {{ selectedExtension }}</span>
-                <UBadge color="primary" variant="soft">
-                  {{ callSignalStatus }}
-                </UBadge>
-              </div>
-            </div>
-          </div>
-
-          <div class="grid gap-2 sm:grid-cols-2 lg:min-w-72">
-            <UButton
-              color="success"
-              icon="i-heroicons-phone"
-              size="lg"
-              block
-              :loading="sipLoading"
-              @click="acceptIncomingCall"
-            >
-              Annehmen
-            </UButton>
-            <UButton
-              color="error"
-              variant="soft"
-              icon="i-heroicons-phone-x-mark"
-              size="lg"
-              block
-              @click="rejectIncomingCall"
-            >
-              Ablehnen
-            </UButton>
-          </div>
-        </div>
-
-        <div class="mt-3 rounded-md bg-gray-50 px-3 py-2 text-xs text-gray-500">
-          Debug: INVITE empfangen, Session aktiv, Signalisierung {{ callSignalStatus }}.
-        </div>
-      </div>
-
       <div class="flex flex-col gap-4 border-b border-gray-200 pb-5 lg:flex-row lg:items-end lg:justify-between">
         <div>
           <p class="text-sm font-medium text-primary-600">
@@ -626,7 +37,7 @@ onBeforeUnmount(() => {
             Telefonie
           </h1>
           <p class="mt-2 max-w-3xl text-sm text-gray-600">
-            Lokaler Asterisk-Test für SIP, WebRTC und spätere Voice-Integration in FEDEO.
+            Anrufe direkt in FEDEO starten und annehmen.
           </p>
         </div>
 
@@ -639,6 +50,13 @@ onBeforeUnmount(() => {
           >
             Aktualisieren
           </UButton>
+          <UButton
+            to="/communication/phone-setup"
+            icon="i-heroicons-cog-6-tooth"
+            variant="outline"
+          >
+            Telefonie-Setup
+          </UButton>
           <UButton
             to="/communication/chat"
             icon="i-heroicons-chat-bubble-left-right"
@@ -657,7 +75,7 @@ onBeforeUnmount(() => {
                 FEDEO Softphone
               </h2>
               <p class="mt-1 text-sm text-gray-500">
-                Registrierung und Testanrufe direkt über den lokalen Asterisk.
+                Registrierung und Anrufe über den lokalen Asterisk.
               </p>
             </div>
             <UBadge
@@ -747,55 +165,6 @@ onBeforeUnmount(() => {
               </UBadge>
             </div>
 
-            <div
-              v-if="sipEvents.length"
-              class="mt-4 rounded-lg border border-gray-200 bg-gray-50 p-3"
-            >
-              <p class="text-xs font-medium uppercase text-gray-500">
-                SIP-Ereignisse
-              </p>
-              <ul class="mt-2 space-y-1 text-xs text-gray-600">
-                <li
-                  v-for="event in sipEvents"
-                  :key="`${event.time}-${event.message}`"
-                  class="grid grid-cols-[4.5rem_1fr] gap-2"
-                >
-                  <span class="font-mono text-gray-400">{{ event.time }}</span>
-                  <span class="break-words">{{ event.message }}</span>
-                </li>
-              </ul>
-            </div>
-
-            <UAlert
-              v-if="incomingCall"
-              class="mt-4"
-              color="primary"
-              icon="i-heroicons-phone-arrow-down-left"
-              title="Eingehender Anruf"
-              description="Ein lokaler SIP-Testanruf wartet auf Annahme."
-            >
-              <template #actions>
-                <UButton
-                  size="xs"
-                  color="success"
-                  icon="i-heroicons-phone"
-                  :loading="sipLoading"
-                  @click="acceptIncomingCall"
-                >
-                  Annehmen
-                </UButton>
-                <UButton
-                  size="xs"
-                  color="error"
-                  variant="soft"
-                  icon="i-heroicons-phone-x-mark"
-                  @click="rejectIncomingCall"
-                >
-                  Ablehnen
-                </UButton>
-              </template>
-            </UAlert>
-
             <UAlert
               v-if="sipError"
               class="mt-4"
@@ -809,190 +178,6 @@ onBeforeUnmount(() => {
           </div>
         </div>
       </UCard>
-
-      <div class="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
-        <UCard>
-          <template #header>
-            <div class="flex items-center justify-between gap-3">
-              <div>
-                <h2 class="text-base font-semibold text-gray-950">
-                  Asterisk-Status
-                </h2>
-                <p class="mt-1 text-sm text-gray-500">
-                  Backend-Abfrage gegen den lokalen Telefonie-Stack.
-                </p>
-              </div>
-              <UButton
-                icon="i-heroicons-signal"
-                variant="ghost"
-                :loading="statusLoading"
-                @click="refreshStatus"
-              />
-            </div>
-          </template>
-
-          <div class="grid gap-4 sm:grid-cols-3">
-            <div class="rounded-lg border border-gray-200 bg-white p-4">
-              <div class="flex items-center gap-2">
-                <UIcon :name="statusIcon" :class="status?.reachable ? 'text-green-600' : 'text-amber-600'" />
-                <span class="text-sm font-medium text-gray-700">Status</span>
-              </div>
-              <p class="mt-3 text-lg font-semibold text-gray-950">
-                {{ status?.reachable ? "Erreichbar" : (status?.enabled ? "Nicht erreichbar" : "Deaktiviert") }}
-              </p>
-            </div>
-
-            <div class="rounded-lg border border-gray-200 bg-white p-4">
-              <div class="flex items-center gap-2">
-                <UIcon name="i-heroicons-server-stack" class="text-gray-500" />
-                <span class="text-sm font-medium text-gray-700">Provider</span>
-              </div>
-              <p class="mt-3 text-lg font-semibold text-gray-950">
-                {{ config?.provider || "asterisk" }}
-              </p>
-            </div>
-
-            <div class="rounded-lg border border-gray-200 bg-white p-4">
-              <div class="flex items-center gap-2">
-                <UIcon name="i-heroicons-phone-arrow-up-right" class="text-gray-500" />
-                <span class="text-sm font-medium text-gray-700">Echo-Test</span>
-              </div>
-              <p class="mt-3 text-lg font-semibold text-gray-950">
-                {{ config?.echoExtension || "600" }}
-              </p>
-            </div>
-          </div>
-
-          <UAlert
-            class="mt-4"
-            :color="statusColor"
-            :icon="statusIcon"
-            :title="status?.message || 'Telefonie wird geladen'"
-            :description="status?.statusUrl || 'Noch keine Status-URL geladen.'"
-          />
-
-          <div v-if="status?.attempts?.length" class="mt-4 rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <p class="text-xs font-medium uppercase tracking-wide text-gray-500">
-              Geprüfte Status-Ziele
-            </p>
-            <div class="mt-2 grid gap-2">
-              <div
-                v-for="attempt in status.attempts"
-                :key="attempt.url"
-                class="flex items-center justify-between gap-3 text-sm"
-              >
-                <span class="break-all font-mono text-gray-700">{{ attempt.url }}</span>
-                <UBadge :color="attempt.reachable ? 'success' : 'neutral'" variant="soft">
-                  {{ attempt.reachable ? `HTTP ${attempt.statusCode}` : "offline" }}
-                </UBadge>
-              </div>
-            </div>
-          </div>
-        </UCard>
-
-        <UCard>
-          <template #header>
-            <div>
-              <h2 class="text-base font-semibold text-gray-950">
-                Lokalen Stack starten
-              </h2>
-              <p class="mt-1 text-sm text-gray-500">
-                Asterisk läuft getrennt vom normalen Stack im Compose-Profil.
-              </p>
-            </div>
-          </template>
-
-          <div class="rounded-lg bg-gray-950 p-4 font-mono text-sm text-gray-100">
-            docker compose --profile telephony-dev up -d asterisk-dev
-          </div>
-
-          <div class="mt-4 grid gap-3 text-sm text-gray-600">
-            <div class="flex items-center justify-between gap-4">
-              <span>SIP-Domain</span>
-              <span class="font-mono text-gray-950">{{ config?.sipDomain || "localhost" }}</span>
-            </div>
-            <div class="flex items-center justify-between gap-4">
-              <span>WebSocket</span>
-              <span class="break-all text-right font-mono text-gray-950">{{ config?.sipWebSocketUrl || "-" }}</span>
-            </div>
-          </div>
-        </UCard>
-      </div>
-
-      <div class="grid gap-4 lg:grid-cols-[0.9fr_1.1fr]">
-        <UCard>
-          <template #header>
-            <div>
-              <h2 class="text-base font-semibold text-gray-950">
-                Browser-Test
-              </h2>
-              <p class="mt-1 text-sm text-gray-500">
-                Prüft, ob FEDEO den SIP-WebSocket im Browser öffnen kann.
-              </p>
-            </div>
-          </template>
-
-          <div class="flex flex-col gap-3">
-            <UButton
-              icon="i-heroicons-bolt"
-              :loading="websocketTesting"
-              :disabled="!config?.sipWebSocketUrl"
-              @click="testWebSocket"
-            >
-              WebSocket prüfen
-            </UButton>
-
-            <UAlert
-              v-if="websocketResult"
-              :color="websocketColor"
-              :icon="websocketResult.ok ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'"
-              :title="websocketResult.message"
-            />
-          </div>
-        </UCard>
-
-        <UCard>
-          <template #header>
-            <div>
-              <h2 class="text-base font-semibold text-gray-950">
-                Test-Nebenstellen
-              </h2>
-              <p class="mt-1 text-sm text-gray-500">
-                Für den ersten lokalen Call-Test zwischen zwei Browser-Sessions.
-              </p>
-            </div>
-          </template>
-
-          <div class="grid gap-3 sm:grid-cols-2">
-            <div
-              v-for="account in config?.testAccounts || []"
-              :key="account.extension"
-              class="rounded-lg border border-gray-200 bg-white p-4"
-            >
-              <div class="flex items-center gap-2">
-                <UIcon name="i-heroicons-user-circle" class="text-primary-600" />
-                <h3 class="font-semibold text-gray-950">
-                  {{ account.displayName }}
-                </h3>
-              </div>
-              <dl class="mt-4 grid gap-2 text-sm">
-                <div class="flex items-center justify-between gap-3">
-                  <dt class="text-gray-500">Nebenstelle</dt>
-                  <dd class="font-mono text-gray-950">{{ account.extension }}</dd>
-                </div>
-                <div class="flex items-center justify-between gap-3">
-                  <dt class="text-gray-500">Passwort</dt>
-                  <dd class="font-mono text-gray-950">{{ account.password }}</dd>
-                </div>
-              </dl>
-            </div>
-          </div>
-        </UCard>
-      </div>
-
-      <p v-if="lastUpdated" class="text-xs text-gray-500">
-        Zuletzt geprüft: {{ lastUpdated.toLocaleString("de-DE") }}
-      </p>
     </div>
   </div>
 </template>