refactored comcoach und teamsbot

src/App.tsx

@@ -179,12 +179,15 @@ function App() {
                                 <Route path="sessions" element={<FeatureViewPage view="sessions" />} />
                                 <Route path="settings" element={<FeatureViewPage view="settings" />} />
                                 
+                                {/* Shared: assistant + modules routes (ComCoach + TeamsBot) */}
+                                <Route path="assistant" element={<FeatureViewPage view="assistant" />} />
+                                <Route path="modules" element={<FeatureViewPage view="modules" />} />
+                                
                                 {/* Neutralization Feature Views */}
                                 <Route path="playground" element={<FeatureViewPage view="playground" />} />
                                 
                                 {/* CommCoach Feature Views */}
-                                <Route path="coaching" element={<FeatureViewPage view="coaching" />} />
+                                <Route path="session" element={<FeatureViewPage view="session" />} />
-                                <Route path="dossier" element={<FeatureViewPage view="dossier" />} />
                                 
                                 {/* Redmine Feature Views */}
                                 <Route path="stats" element={<FeatureViewPage view="stats" />} />

src/api/commcoachApi.ts

@@ -109,8 +109,8 @@ export interface CoachingUserProfile {
 }
 
 export interface DashboardData {
-  totalContexts: number;
+  totalModules: number;
-  activeContexts: number;
+  activeModules: number;
   totalSessions: number;
   totalMinutes: number;
   streakDays: number;
@@ -122,7 +122,11 @@ export interface DashboardData {
   goalProgress?: number;
   badges?: CoachingBadge[];
   level?: { number: number; label: string; totalSessions: number };
-  contexts: Array<{ id: string; title: string; category: string; sessionCount: number; lastSessionAt?: string; goalProgress?: number }>;
+  modules: Array<{ id: string; title: string; moduleType: string; sessionCount: number; lastSessionAt?: string; goalProgress?: number }>;
+  /** @deprecated Use totalModules/activeModules/modules instead */
+  totalContexts?: number;
+  activeContexts?: number;
+  contexts?: Array<{ id: string; title: string; category: string; sessionCount: number; lastSessionAt?: string; goalProgress?: number }>;
 }
 
 export interface SSEEvent {
@@ -133,31 +137,73 @@ export interface SSEEvent {
 
 export type ApiRequestFunction = (options: ApiRequestOptions<any>) => Promise<any>;
 
+export function getApiRequest(): ApiRequestFunction {
+  return async (options: ApiRequestOptions<any>) => {
+    const response = await api(options);
+    return response.data;
+  };
+}
+
 // ============================================================================
-// Context API
+// Module API (TrainingModule — replaces Context API)
+// ============================================================================
+
+export async function listModulesApi(request: ApiRequestFunction, instanceId: string): Promise<any[]> {
+  const data = await request({ url: `/api/commcoach/${instanceId}/modules`, method: 'get' });
+  return data.modules || [];
+}
+
+export async function createModuleApi(request: ApiRequestFunction, instanceId: string, body: {
+  title: string; moduleType?: string; goals?: string; personaId?: string; kpiTargets?: string;
+}): Promise<any> {
+  const data = await request({ url: `/api/commcoach/${instanceId}/modules`, method: 'post', data: body });
+  return data.module;
+}
+
+export async function getModuleDetailApi(request: ApiRequestFunction, instanceId: string, moduleId: string): Promise<any> {
+  const data = await request({ url: `/api/commcoach/${instanceId}/modules/${moduleId}`, method: 'get' });
+  return data;
+}
+
+export async function updateModuleApi(request: ApiRequestFunction, instanceId: string, moduleId: string, body: any): Promise<any> {
+  const data = await request({ url: `/api/commcoach/${instanceId}/modules/${moduleId}`, method: 'put', data: body });
+  return data.module;
+}
+
+export async function deleteModuleApi(request: ApiRequestFunction, instanceId: string, moduleId: string): Promise<void> {
+  await request({ url: `/api/commcoach/${instanceId}/modules/${moduleId}`, method: 'delete' });
+}
+
+export async function listSessionsApi(request: ApiRequestFunction, instanceId: string, moduleId: string): Promise<any[]> {
+  const data = await request({ url: `/api/commcoach/${instanceId}/modules/${moduleId}/sessions`, method: 'get' });
+  return data.sessions || [];
+}
+
+// ============================================================================
+// Context / Module API (uses /modules/ endpoints)
 // ============================================================================
 
 export async function getContextsApi(request: ApiRequestFunction, instanceId: string): Promise<CoachingContext[]> {
-  const data = await request({ url: `/api/commcoach/${instanceId}/contexts`, method: 'get' });
+  const data = await request({ url: `/api/commcoach/${instanceId}/modules`, method: 'get' });
-  return data.contexts || [];
+  return data.modules || [];
 }
 
 export async function createContextApi(request: ApiRequestFunction, instanceId: string, body: {
   title: string; description?: string; category?: string; goals?: string[];
 }): Promise<CoachingContext> {
-  const data = await request({ url: `/api/commcoach/${instanceId}/contexts`, method: 'post', data: body });
+  const data = await request({ url: `/api/commcoach/${instanceId}/modules`, method: 'post', data: body });
-  return data.context;
+  return data.module;
 }
 
 export async function getContextDetailApi(request: ApiRequestFunction, instanceId: string, contextId: string): Promise<{
   context: CoachingContext; tasks: CoachingTask[]; scores: CoachingScore[]; sessions: CoachingSession[];
 }> {
   const data = await request({
-    url: `/api/commcoach/${instanceId}/contexts/${contextId}`,
+    url: `/api/commcoach/${instanceId}/modules/${contextId}`,
     method: 'get',
     params: { _t: Date.now() },
   });
-  const ctx = data?.context ?? data;
+  const ctx = data?.module ?? data;
   return {
     context: ctx,
     tasks: data?.tasks ?? [],
@@ -167,22 +213,22 @@ export async function getContextDetailApi(request: ApiRequestFunction, instanceI
 }
 
 export async function updateContextApi(request: ApiRequestFunction, instanceId: string, contextId: string, body: any): Promise<CoachingContext> {
-  const data = await request({ url: `/api/commcoach/${instanceId}/contexts/${contextId}`, method: 'put', data: body });
+  const data = await request({ url: `/api/commcoach/${instanceId}/modules/${contextId}`, method: 'put', data: body });
-  return data.context;
+  return data.module;
 }
 
 export async function deleteContextApi(request: ApiRequestFunction, instanceId: string, contextId: string): Promise<void> {
-  await request({ url: `/api/commcoach/${instanceId}/contexts/${contextId}`, method: 'delete' });
+  await request({ url: `/api/commcoach/${instanceId}/modules/${contextId}`, method: 'delete' });
 }
 
 export async function archiveContextApi(request: ApiRequestFunction, instanceId: string, contextId: string): Promise<CoachingContext> {
-  const data = await request({ url: `/api/commcoach/${instanceId}/contexts/${contextId}/archive`, method: 'post' });
+  const data = await request({ url: `/api/commcoach/${instanceId}/modules/${contextId}/archive`, method: 'post' });
-  return data.context;
+  return data.module;
 }
 
 export async function activateContextApi(request: ApiRequestFunction, instanceId: string, contextId: string): Promise<CoachingContext> {
-  const data = await request({ url: `/api/commcoach/${instanceId}/contexts/${contextId}/activate`, method: 'post' });
+  const data = await request({ url: `/api/commcoach/${instanceId}/modules/${contextId}/activate`, method: 'post' });
-  return data.context;
+  return data.module;
 }
 
 // ============================================================================
@@ -192,7 +238,7 @@ export async function activateContextApi(request: ApiRequestFunction, instanceId
 export async function startSessionApi(request: ApiRequestFunction, instanceId: string, contextId: string): Promise<{
   session: CoachingSession; messages: CoachingMessage[]; resumed: boolean;
 }> {
-  const data = await request({ url: `/api/commcoach/${instanceId}/contexts/${contextId}/sessions/start`, method: 'post' });
+  const data = await request({ url: `/api/commcoach/${instanceId}/modules/${contextId}/sessions/start`, method: 'post' });
   return data;
 }
 
@@ -207,7 +253,7 @@ export async function startSessionStreamApi(
   try {
     const baseURL = api.defaults.baseURL || '';
     const personaParam = personaId ? `?personaId=${encodeURIComponent(personaId)}` : '';
-    const url = `${baseURL}/api/commcoach/${instanceId}/contexts/${contextId}/sessions/start${personaParam}`;
+    const url = `${baseURL}/api/commcoach/${instanceId}/modules/${contextId}/sessions/start${personaParam}`;
 
     const headers: Record<string, string> = { 'Content-Type': 'application/json' };
     const authToken = localStorage.getItem('authToken');
@@ -243,14 +289,11 @@ export async function startSessionStreamApi(
 
         for (const line of lines) {
           if (line.startsWith('data: ')) {
-            try {
+            const jsonStr = line.slice(6);
-              const jsonStr = line.slice(6);
+            if (jsonStr.trim()) {
-              if (jsonStr.trim()) {
+              let event: SSEEvent;
-                const event: SSEEvent = JSON.parse(jsonStr);
+              try { event = JSON.parse(jsonStr); } catch { continue; }
-                onEvent(event);
+              onEvent(event);
-              }
-            } catch {
-              // skip malformed lines
             }
           }
         }
@@ -348,14 +391,11 @@ export async function sendMessageStreamApi(
 
         for (const line of lines) {
           if (line.startsWith('data: ')) {
-            try {
+            const jsonStr = line.slice(6);
-              const jsonStr = line.slice(6);
+            if (jsonStr.trim()) {
-              if (jsonStr.trim()) {
+              let event: SSEEvent;
-                const event: SSEEvent = JSON.parse(jsonStr);
+              try { event = JSON.parse(jsonStr); } catch { continue; }
-                onEvent(event);
+              onEvent(event);
-              }
-            } catch {
-              // skip malformed lines
             }
           }
         }
@@ -424,10 +464,12 @@ export async function sendAudioStreamApi(
 
         for (const line of lines) {
           if (line.startsWith('data: ')) {
-            try {
+            const jsonStr = line.slice(6);
-              const jsonStr = line.slice(6);
+            if (jsonStr.trim()) {
-              if (jsonStr.trim()) onEvent(JSON.parse(jsonStr));
+              let event: SSEEvent;
-            } catch { /* skip */ }
+              try { event = JSON.parse(jsonStr); } catch { continue; }
+              onEvent(event);
+            }
           }
         }
       }
@@ -446,14 +488,14 @@ export async function sendAudioStreamApi(
 // ============================================================================
 
 export async function getTasksApi(request: ApiRequestFunction, instanceId: string, contextId: string): Promise<CoachingTask[]> {
-  const data = await request({ url: `/api/commcoach/${instanceId}/contexts/${contextId}/tasks`, method: 'get' });
+  const data = await request({ url: `/api/commcoach/${instanceId}/modules/${contextId}/tasks`, method: 'get' });
   return data.tasks || [];
 }
 
 export async function createTaskApi(request: ApiRequestFunction, instanceId: string, contextId: string, body: {
   title: string; description?: string; priority?: string; dueDate?: string;
 }): Promise<CoachingTask> {
-  const data = await request({ url: `/api/commcoach/${instanceId}/contexts/${contextId}/tasks`, method: 'post', data: body });
+  const data = await request({ url: `/api/commcoach/${instanceId}/modules/${contextId}/tasks`, method: 'post', data: body });
   return data.task;
 }
 
@@ -500,7 +542,14 @@ export async function updateProfileApi(request: ApiRequestFunction, instanceId:
 
 export async function getPersonasApi(request: ApiRequestFunction, instanceId: string): Promise<CoachingPersona[]> {
   const data = await request({ url: `/api/commcoach/${instanceId}/personas`, method: 'get' });
-  return data.personas || [];
+  return data.items || data.personas || [];
+}
+
+export async function fetchPersonasPaginated(request: ApiRequestFunction, instanceId: string, params?: any): Promise<any> {
+  const queryParams: Record<string, string> = {};
+  if (params) queryParams.pagination = JSON.stringify(params);
+  const data = await request({ url: `/api/commcoach/${instanceId}/personas`, method: 'get', params: queryParams });
+  return data;
 }
 
 export async function createPersonaApi(request: ApiRequestFunction, instanceId: string, body: {
@@ -510,10 +559,31 @@ export async function createPersonaApi(request: ApiRequestFunction, instanceId:
   return data.persona;
 }
 
+export async function updatePersonaApi(request: ApiRequestFunction, instanceId: string, personaId: string, body: {
+  label?: string; description?: string; gender?: string; systemPromptOverride?: string; isActive?: boolean;
+}): Promise<CoachingPersona> {
+  const data = await request({ url: `/api/commcoach/${instanceId}/personas/${personaId}`, method: 'put', data: body });
+  return data.persona;
+}
+
 export async function deletePersonaApi(request: ApiRequestFunction, instanceId: string, personaId: string): Promise<void> {
   await request({ url: `/api/commcoach/${instanceId}/personas/${personaId}`, method: 'delete' });
 }
 
+// ============================================================================
+// Module-Persona Mapping API
+// ============================================================================
+
+export async function getModulePersonasApi(request: ApiRequestFunction, instanceId: string, moduleId: string): Promise<string[]> {
+  const data = await request({ url: `/api/commcoach/${instanceId}/modules/${moduleId}/personas`, method: 'get' });
+  return data.personaIds || [];
+}
+
+export async function setModulePersonasApi(request: ApiRequestFunction, instanceId: string, moduleId: string, personaIds: string[]): Promise<string[]> {
+  const data = await request({ url: `/api/commcoach/${instanceId}/modules/${moduleId}/personas`, method: 'put', data: { personaIds } });
+  return data.personaIds || [];
+}
+
 // ============================================================================
 // Badge API (Iteration 2)
 // ============================================================================
@@ -529,7 +599,7 @@ export async function getBadgesApi(request: ApiRequestFunction, instanceId: stri
 
 export function getDossierExportUrl(instanceId: string, contextId: string, format: string = 'md'): string {
   const baseURL = api.defaults.baseURL || '';
-  return `${baseURL}/api/commcoach/${instanceId}/contexts/${contextId}/export?format=${format}`;
+  return `${baseURL}/api/commcoach/${instanceId}/modules/${contextId}/export?format=${format}`;
 }
 
 export function getSessionExportUrl(instanceId: string, sessionId: string, format: string = 'md'): string {
@@ -544,6 +614,6 @@ export function getSessionExportUrl(instanceId: string, sessionId: string, forma
 export async function getScoreHistoryApi(request: ApiRequestFunction, instanceId: string, contextId: string): Promise<Record<string, Array<{
   score: number; trend: string; evidence?: string; createdAt?: string; sessionId?: string;
 }>>> {
-  const data = await request({ url: `/api/commcoach/${instanceId}/contexts/${contextId}/scores/history`, method: 'get' });
+  const data = await request({ url: `/api/commcoach/${instanceId}/modules/${contextId}/scores/history`, method: 'get' });
   return data.history || {};
 }

src/api/teamsbotApi.ts

@@ -9,6 +9,7 @@ export interface TeamsbotSession {
   id: string;
   instanceId: string;
   mandateId: string;
+  moduleId?: string;
   meetingLink: string;
   botName: string;
   status: 'pending' | 'joining' | 'active' | 'leaving' | 'ended' | 'error';
@@ -574,3 +575,48 @@ export async function deleteDirectorPrompt(
   );
   return response.data;
 }
+
+
+// ============================================================================
+// Meeting Module API
+// ============================================================================
+
+export interface MeetingModule {
+  id: string;
+  instanceId: string;
+  mandateId: string;
+  ownerUserId: string;
+  title: string;
+  seriesType: string;
+  defaultBotId?: string;
+  defaultDirectorPrompts?: string;
+  goals?: string;
+  kpiTargets?: string;
+  status: string;
+}
+
+export async function listModules(instanceId: string): Promise<MeetingModule[]> {
+  const response = await api.get(`/api/teamsbot/${instanceId}/modules`);
+  return response.data?.modules || [];
+}
+
+export async function createModule(instanceId: string, body: {
+  title: string; seriesType?: string; defaultBotId?: string; goals?: string; kpiTargets?: string;
+}): Promise<MeetingModule> {
+  const response = await api.post(`/api/teamsbot/${instanceId}/modules`, body);
+  return response.data?.module;
+}
+
+export async function getModuleDetail(instanceId: string, moduleId: string): Promise<{ module: MeetingModule; sessions: TeamsbotSession[] }> {
+  const response = await api.get(`/api/teamsbot/${instanceId}/modules/${moduleId}`);
+  return response.data;
+}
+
+export async function updateModule(instanceId: string, moduleId: string, body: Partial<MeetingModule>): Promise<MeetingModule> {
+  const response = await api.put(`/api/teamsbot/${instanceId}/modules/${moduleId}`, body);
+  return response.data?.module;
+}
+
+export async function deleteModule(instanceId: string, moduleId: string): Promise<void> {
+  await api.delete(`/api/teamsbot/${instanceId}/modules/${moduleId}`);
+}

src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.module.css

@@ -352,10 +352,18 @@
   min-width: 0;
 }
 
+/* File size + hover actions group (overlapping layout to save width) */
+.nodeSizeGroup {
+  position: relative;
+  flex-shrink: 0;
+  width: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
 /* File size column */
 .nodeSize {
-  width: 52px;
-  flex-shrink: 0;
   font-size: 10px;
   color: var(--color-text-muted, #94a3b8);
   text-align: right;
@@ -388,20 +396,29 @@
   min-width: 0;
 }
 
-/* Hover action icons (download, delete) -- only visible on hover, left of persistent */
+/* Hover action icons -- overlay on top of file size to save width */
 .nodeActionsHover {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
   display: flex;
   align-items: center;
+  justify-content: flex-end;
   gap: 2px;
-  flex-shrink: 0;
   opacity: 0;
   transition: opacity 0.15s ease;
+  z-index: 1;
 }
 
 .nodeRow:hover .nodeActionsHover {
   opacity: 1;
 }
 
+.nodeRow:hover .nodeSize {
+  visibility: hidden;
+}
+
 /* Persistent action icons (scope, neutralize) -- always visible, right-aligned */
 .nodeActionsPersistent {
   display: flex;
@@ -626,6 +643,10 @@
   .nodeActionsHover {
     opacity: 1;
   }
+
+  .nodeSize {
+    visibility: hidden;
+  }
 }
 
 /* Accessibility */

src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx

@@ -12,6 +12,8 @@ import type {
   ScopeValue,
   TreeBatchAction,
 } from './types';
+import { useConfirm } from '../../../hooks/useConfirm';
+import { useLanguage } from '../../../providers/language/LanguageContext';
 import styles from './FormGeneratorTree.module.css';
 
 const INDENT_PX = 24;
@@ -290,43 +292,45 @@ const TreeNodeRow = React.memo(function TreeNodeRow<T>({
         </span>
       )}
 
-      <span className={styles.nodeSize}>
+      <div className={styles.nodeSizeGroup}>
-        {node.sizeBytes != null ? _formatSize(node.sizeBytes) : ''}
+        <span className={styles.nodeSize}>
-      </span>
+          {node.sizeBytes != null ? _formatSize(node.sizeBytes) : ''}
+        </span>
 
-      <div className={styles.nodeActionsHover}>
+        <div className={styles.nodeActionsHover}>
-        {canRename && (
+          {canRename && (
-          <button
+            <button
-            className={styles.emojiBtn}
+              className={styles.emojiBtn}
-            onClick={(e) => { e.stopPropagation(); onStartRename(node.id); }}
+              onClick={(e) => { e.stopPropagation(); onStartRename(node.id); }}
-            title="Umbenennen"
+              title="Umbenennen"
-            tabIndex={-1}
+              tabIndex={-1}
-          >
+            >
-            {'\u270F\uFE0F'}
+              {'\u270F\uFE0F'}
-          </button>
+            </button>
-        )}
+          )}
 
-        {node.type !== 'folder' && (
+          {node.type !== 'folder' && (
-          <button
+            <button
-            className={styles.emojiBtn}
+              className={styles.emojiBtn}
-            onClick={(e) => { e.stopPropagation(); onDownload(node); }}
+              onClick={(e) => { e.stopPropagation(); onDownload(node); }}
-            title="Datei herunterladen"
+              title="Datei herunterladen"
-            tabIndex={-1}
+              tabIndex={-1}
-          >
+            >
-            {'\u{1F4E5}'}
+              {'\u{1F4E5}'}
-          </button>
+            </button>
-        )}
+          )}
 
-        {canDelete && (
+          {canDelete && (
-          <button
+            <button
-            className={styles.emojiBtn}
+              className={styles.emojiBtn}
-            onClick={(e) => { e.stopPropagation(); onDelete(node.id); }}
+              onClick={(e) => { e.stopPropagation(); onDelete(node.id); }}
-            title="Loeschen"
+              title="Loeschen"
-            tabIndex={-1}
+              tabIndex={-1}
-          >
+            >
-            {'\u{1F5D1}\uFE0F'}
+              {'\u{1F5D1}\uFE0F'}
-          </button>
+            </button>
-        )}
+          )}
+        </div>
       </div>
 
       <div className={styles.nodeActionsPersistent}>
@@ -392,6 +396,8 @@ export function FormGeneratorTree<T = any>({
   onSendToChat,
   className,
 }: FormGeneratorTreeProps<T>) {
+  const { t } = useLanguage();
+  const { confirm, ConfirmDialog } = useConfirm();
   const [nodes, setNodes] = useState<TreeNode<T>[]>([]);
   const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
@@ -581,7 +587,11 @@ export function FormGeneratorTree<T = any>({
     async (id: string) => {
       const node = nodes.find((n) => n.id === id);
       const label = node?.name ?? id;
-      if (!window.confirm(`"${label}" wirklich loeschen?`)) return;
+      const ok = await confirm(
+        t('"{label}" wirklich loeschen?', { label }),
+        { confirmLabel: t('Loeschen'), variant: 'danger' },
+      );
+      if (!ok) return;
       await provider.deleteNodes?.([id]);
       setNodes((prev) => {
         const toRemove = new Set([id, ..._collectDescendantIds(id, prev)]);
@@ -811,6 +821,7 @@ export function FormGeneratorTree<T = any>({
 
   return (
     <div className={wrapperClasses}>
+      <ConfirmDialog />
       {title && (
         <div
           className={`${styles.sectionHeader} ${collapsible ? '' : styles.sectionHeaderNonCollapsible}`}
@@ -874,7 +885,11 @@ export function FormGeneratorTree<T = any>({
                     className={`${styles.batchButton} ${action.danger ? styles.batchButtonDanger : ''}`}
                     onClick={async () => {
                       if (action.danger) {
-                        if (!window.confirm(`${ids.length} ${action.label} wirklich loeschen?`)) return;
+                        const ok = await confirm(
+                          t('{count} {label} wirklich loeschen?', { count: String(ids.length), label: action.label }),
+                          { confirmLabel: t('Loeschen'), variant: 'danger' },
+                        );
+                        if (!ok) return;
                       }
                       await action.onClick(ids);
                       await _handleRefresh();

src/components/UnifiedDataBar/FilesTab.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useMemo, useState } from 'react';
+import React, { useCallback, useRef, useMemo, useState, useEffect } from 'react';
 import type { UdbContext } from './UnifiedDataBar';
 import api from '../../api';
 import { useApiRequest } from '../../hooks/useApi';
@@ -45,6 +45,12 @@ const FilesTab: React.FC<FilesTabProps> = ({ context, onFileSelect, onSendToChat
     setSharedTreeKey(k => k + 1);
   }, []);
 
+  useEffect(() => {
+    const _onFileUploaded = () => _handleRefresh();
+    window.addEventListener('fileUploaded', _onFileUploaded);
+    return () => window.removeEventListener('fileUploaded', _onFileUploaded);
+  }, [_handleRefresh]);
+
   const _uploadFiles = useCallback(async (fileList: FileList | File[]) => {
     if (!context.instanceId || uploading) return;
     setUploading(true);
@@ -76,7 +82,9 @@ const FilesTab: React.FC<FilesTabProps> = ({ context, onFileSelect, onSendToChat
   const _handleDragLeave = useCallback((e: React.DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    setIsDragOver(false);
+    if (!e.relatedTarget || !(e.currentTarget as Node).contains(e.relatedTarget as Node)) {
+      setIsDragOver(false);
+    }
   }, []);
 
   const _handleDrop = useCallback((e: React.DragEvent) => {

src/components/UnifiedDataBar/UnifiedDataBar.tsx

@@ -64,7 +64,7 @@ interface UnifiedDataBarProps {
 
 function _tabLabel(tab: UdbTab, t: (k: string) => string): string {
   switch (tab) {
-    case 'chats': return t('Chatverläufe');
+    case 'chats': return t('Dossiers');
     case 'files': return t('Dateien');
     case 'sources': return t('Quellen');
     default: return tab;

src/hooks/useCommcoach.ts

@@ -289,6 +289,16 @@ export function useCommcoach(instanceIdOverride?: string): CommcoachHookReturn {
             setTasks(prev => [eventData, ...prev]);
           } else if (eventType === 'documentCreated' && eventData) {
             onDocumentCreatedRef.current?.(eventData);
+            const docMsg: CoachingMessage = {
+              id: `doc-${Date.now()}`,
+              sessionId: session.id,
+              contextId: session.contextId,
+              role: 'assistant',
+              content: `📄 **Dokument erstellt:** ${eventData.fileName || 'Dokument'}\n\n_Das Dokument ist in der Seitenleiste unter "Dateien" verfuegbar._`,
+              contentType: 'systemNote',
+              createdAt: new Date().toISOString(),
+            };
+            setMessages(prev => [...prev, docMsg]);
           } else if (eventType === 'error' && eventData) {
             setError(eventData.message || 'Stream-Fehler');
           }
@@ -397,6 +407,16 @@ export function useCommcoach(instanceIdOverride?: string): CommcoachHookReturn {
             setTasks(prev => [eventData, ...prev]);
           } else if (eventType === 'documentCreated' && eventData) {
             onDocumentCreatedRef.current?.(eventData);
+            const docMsg: CoachingMessage = {
+              id: `doc-${Date.now()}`,
+              sessionId: session.id,
+              contextId: session.contextId,
+              role: 'assistant',
+              content: `📄 **Dokument erstellt:** ${eventData.fileName || 'Dokument'}\n\n_Das Dokument ist in der Seitenleiste unter "Dateien" verfuegbar._`,
+              contentType: 'systemNote',
+              createdAt: new Date().toISOString(),
+            };
+            setMessages(prev => [...prev, docMsg]);
           } else if (eventType === 'scoreUpdate') {
             // Will refresh on complete
           } else if (eventType === 'error' && eventData) {
@@ -474,6 +494,16 @@ export function useCommcoach(instanceIdOverride?: string): CommcoachHookReturn {
             setTasks(prev => [eventData, ...prev]);
           } else if (eventType === 'documentCreated' && eventData) {
             onDocumentCreatedRef.current?.(eventData);
+            const docMsg: CoachingMessage = {
+              id: `doc-${Date.now()}`,
+              sessionId: session.id,
+              contextId: session.contextId,
+              role: 'assistant',
+              content: `📄 **Dokument erstellt:** ${eventData.fileName || 'Dokument'}\n\n_Das Dokument ist in der Seitenleiste unter "Dateien" verfuegbar._`,
+              contentType: 'systemNote',
+              createdAt: new Date().toISOString(),
+            };
+            setMessages(prev => [...prev, docMsg]);
           } else if (eventType === 'error' && eventData) {
             setError(eventData.message || 'Audio-Fehler');
           }

src/hooks/useTtsPlayback.ts

@@ -41,8 +41,11 @@ export function useTtsPlayback(callbacks?: TtsPlaybackCallbacks): TtsPlaybackApi
 
   const stop = useCallback(() => {
     if (audioRef.current) {
-      audioRef.current.pause();
+      const audio = audioRef.current;
+      audio.onpause = null;
+      audio.onended = null;
       audioRef.current = null;
+      audio.pause();
     }
     setIsPlaying(false);
     setIsPaused(false);

src/layouts/MainLayout.tsx

@@ -19,7 +19,7 @@ import styles from './MainLayout.module.css';
 import { useLanguage } from '../providers/language/LanguageContext';
 
 const _WORKSPACE_ROUTE_RE = /\/mandates\/[^/]+\/workspace\/[^/]+\/dashboard/;
-const _COMMCOACH_ROUTE_RE = /\/mandates\/[^/]+\/commcoach\/[^/]+\/(?:coaching|dossier)/;
+const _COMMCOACH_ROUTE_RE = /\/mandates\/[^/]+\/commcoach\/[^/]+\/session/;
 const _GE_EDITOR_ROUTE_RE = /\/mandates\/[^/]+\/graphicalEditor\/[^/]+\/editor/;
 const _ADMIN_LANGUAGES_RE = /\/admin\/languages(?:$|\/)/;
 

src/pages/FeatureView.tsx

@@ -39,6 +39,8 @@ import { WorkspaceRagInsightsPage } from './views/workspace/WorkspaceRagInsights
 
 // Teamsbot Views
 import { TeamsbotDashboardView } from './views/teamsbot/TeamsbotDashboardView';
+import { TeamsbotAssistantView } from './views/teamsbot/TeamsbotAssistantView';
+import { TeamsbotModulesView } from './views/teamsbot/TeamsbotModulesView';
 import { TeamsbotSessionView } from './views/teamsbot/TeamsbotSessionView';
 import { TeamsbotSettingsView } from './views/teamsbot/TeamsbotSettingsView';
 
@@ -46,7 +48,7 @@ import { TeamsbotSettingsView } from './views/teamsbot/TeamsbotSettingsView';
 import { NeutralizationView } from './views/neutralization';
 
 // CommCoach Views
-import { CommcoachDashboardView, CommcoachDossierView, CommcoachSettingsView } from './views/commcoach';
+import { CommcoachDashboardView, CommcoachAssistantView, CommcoachModulesView, CommcoachSessionView, CommcoachDossierView, CommcoachSettingsView } from './views/commcoach';
 
 // Redmine Views
 import { RedmineSettingsView, RedmineStatsView, RedmineBrowserView } from './views/redmine';
@@ -158,6 +160,8 @@ const VIEW_COMPONENTS: Record<string, Record<string, ViewComponent>> = {
   },
   teamsbot: {
     dashboard: TeamsbotDashboardView,
+    assistant: TeamsbotAssistantView,
+    modules: TeamsbotModulesView,
     sessions: TeamsbotSessionView,
     settings: TeamsbotSettingsView,
   },
@@ -167,7 +171,9 @@ const VIEW_COMPONENTS: Record<string, Record<string, ViewComponent>> = {
   },
   commcoach: {
     dashboard: CommcoachDashboardView,
-    coaching: CommcoachDossierView,
+    assistant: CommcoachAssistantView,
+    modules: CommcoachModulesView,
+    session: CommcoachSessionView,
     dossier: CommcoachDossierView,
     settings: CommcoachSettingsView,
   },
@@ -228,8 +234,8 @@ export const FeatureViewPage: React.FC<FeatureViewPageProps> = ({ view }) => {
     return null;
   }
 
-  // CommCoach coaching/dossier is rendered persistently by CommcoachKeepAlive at MainLayout level.
+  // CommCoach session is rendered persistently by CommcoachKeepAlive at MainLayout level.
-  if (featureCode === 'commcoach' && (view === 'coaching' || view === 'dossier')) {
+  if (featureCode === 'commcoach' && view === 'session') {
     return null;
   }
 

src/pages/views/commcoach/Commcoach.module.css

@@ -0,0 +1,349 @@
+/* CommCoach Shared Styles — Assistant, Modules, Session views */
+
+.assistantContainer,
+.modulesContainer {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.wizardHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.stepIndicator {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.stepDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--border-color, #ccc);
+}
+
+.stepActive {
+  background: var(--primary-color, #F25843);
+}
+
+.wizardContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.wizardStep {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.typeGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 1rem;
+}
+
+.typeCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.25rem;
+  border-radius: 12px;
+  border: 2px solid var(--border-color, #ddd);
+  background: var(--bg-card, #fff);
+  color: var(--text-primary, #333);
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+
+.typeCard:hover {
+  border-color: var(--primary-color, #F25843);
+}
+
+.typeCardActive {
+  border-color: var(--primary-color, #F25843);
+  background: rgba(242, 88, 67, 0.06);
+}
+
+.typeIcon {
+  font-size: 2rem;
+}
+
+.wizardInput {
+  padding: 0.75rem;
+  border-radius: 8px;
+  border: 1px solid var(--border-color, #ddd);
+  background: var(--bg-input, #fff);
+  color: var(--text-primary, #333);
+  font-size: 1rem;
+}
+
+.wizardTextarea {
+  padding: 0.75rem;
+  border-radius: 8px;
+  border: 1px solid var(--border-color, #ddd);
+  background: var(--bg-input, #fff);
+  color: var(--text-primary, #333);
+  font-size: 1rem;
+  resize: vertical;
+}
+
+.wizardActions {
+  display: flex;
+  gap: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-color, #e0e0e0);
+}
+
+.wizardHint {
+  color: var(--text-secondary, #666);
+  font-size: 0.9rem;
+}
+
+.confirmSummary {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: var(--surface-color, #f5f5f5);
+  border-radius: 8px;
+}
+
+.errorBanner {
+  background: rgba(241, 76, 76, 0.1);
+  color: #f14c4c;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+}
+
+.modulesHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.modulesFilters {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.modulesFilters select {
+  padding: 0.4rem 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--border-color, #ddd);
+  background: var(--bg-input, #fff);
+  color: var(--text-primary, #333);
+  font-size: 0.85rem;
+}
+
+.modulesList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.moduleCard {
+  background: var(--bg-card, #fff);
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--border-color, #e0e0e0);
+}
+
+.moduleExpanded {
+  border-color: var(--primary-color, #F25843);
+}
+
+.moduleHighlighted {
+  box-shadow: 0 0 0 2px var(--primary-color, #F25843);
+}
+
+.moduleRow {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+}
+
+.moduleRow:hover {
+  background: var(--bg-hover, #f5f5f5);
+}
+
+.moduleType {
+  font-size: 0.75rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  background: rgba(242, 88, 67, 0.1);
+  color: var(--primary-color, #F25843);
+  white-space: nowrap;
+}
+
+.moduleTitle {
+  flex: 1;
+  font-weight: 500;
+}
+
+.moduleStatus {
+  font-size: 0.8rem;
+  color: var(--text-secondary, #666);
+}
+
+.moduleSessions {
+  font-size: 0.85rem;
+  color: var(--text-secondary, #666);
+}
+
+.moduleActions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.sessionList {
+  padding: 0.5rem 0 0 1rem;
+  border-top: 1px solid var(--border-color, #e0e0e0);
+}
+
+.sessionRow {
+  display: flex;
+  gap: 1rem;
+  padding: 0.4rem 0;
+  font-size: 0.9rem;
+}
+
+.sessionStatus {
+  font-size: 0.8rem;
+  color: var(--text-secondary, #666);
+}
+
+.sessionDate {
+  font-size: 0.8rem;
+  color: var(--text-secondary, #666);
+}
+
+.noSessions {
+  color: var(--text-secondary, #666);
+  font-style: italic;
+  font-size: 0.9rem;
+  padding: 0.5rem 0;
+}
+
+.confirmOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.confirmDialog,
+.editDialog {
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 12px;
+  padding: 1.5rem;
+  max-width: 400px;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+}
+
+.confirmActions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+}
+
+.btnPrimary {
+  padding: 0.6rem 1.2rem;
+  border-radius: 8px;
+  border: none;
+  background: var(--primary-color, #F25843);
+  color: #fff;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.btnPrimary:hover:not(:disabled) { filter: brightness(1.08); }
+.btnPrimary:disabled {
+  background: var(--color-medium-gray, #ccc);
+  color: var(--text-secondary, #888);
+  cursor: not-allowed;
+  opacity: 0.8;
+}
+
+.btnSecondary {
+  padding: 0.6rem 1.2rem;
+  border-radius: 8px;
+  border: 1px solid var(--border-color, #ddd);
+  background: transparent;
+  color: var(--text-primary, #333);
+  cursor: pointer;
+}
+
+.btnSecondary:hover:not(:disabled) { background: var(--hover-bg, #f5f5f5); border-color: var(--primary-color, #F25843); color: var(--primary-color, #F25843); }
+
+.btnDanger {
+  padding: 0.6rem 1.2rem;
+  border-radius: 8px;
+  border: none;
+  background: #f14c4c;
+  color: #fff;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.btnDanger:hover:not(:disabled) { filter: brightness(1.08); }
+
+.btnSmall {
+  padding: 0.3rem 0.7rem;
+  border-radius: 4px;
+  border: 1px solid var(--border-color, #ddd);
+  background: transparent;
+  color: var(--text-primary, #333);
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.btnSmall:hover:not(:disabled) { border-color: var(--primary-color, #F25843); color: var(--primary-color, #F25843); }
+
+.btnSmall.btnSmallActive {
+  background: var(--primary-color, #F25843);
+  border-color: var(--primary-color, #F25843);
+  color: #fff;
+}
+
+.btnSmall.btnSmallActive:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }
+
+.btnSmallDanger {
+  padding: 0.3rem 0.7rem;
+  border-radius: 4px;
+  border: 1px solid #f14c4c;
+  background: transparent;
+  color: #f14c4c;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.btnSmallDanger:hover:not(:disabled) { background: var(--error-color, #dc2626); color: #fff; }
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  color: var(--text-secondary, #666);
+}

src/pages/views/commcoach/CommcoachAssistantView.tsx

@@ -0,0 +1,175 @@
+/**
+ * CommCoach Assistant View
+ *
+ * Wizard flow: Module type → Topic → Persona → KPIs → "Start first session"
+ */
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
+import * as commcoachApi from '../../../api/commcoachApi';
+import { useLanguage } from '../../../providers/language/LanguageContext';
+import styles from './Commcoach.module.css';
+
+type WizardStep = 'type' | 'topic' | 'persona' | 'kpis' | 'confirm';
+
+const STEPS: WizardStep[] = ['type', 'topic', 'persona', 'kpis', 'confirm'];
+
+const MODULE_TYPES = [
+  { value: 'coaching', label: 'Coaching', icon: '🎯' },
+  { value: 'training', label: 'Training', icon: '📚' },
+  { value: 'exam', label: 'Prüfung', icon: '✍️' },
+  { value: 'elearning', label: 'E-Learning', icon: '💻' },
+];
+
+export const CommcoachAssistantView: React.FC = () => {
+  const { t } = useLanguage();
+  const { instance, mandateId } = useCurrentInstance();
+  const instanceId = instance?.id || '';
+  const navigate = useNavigate();
+
+  const [step, setStep] = useState<WizardStep>('type');
+  const [moduleType, setModuleType] = useState('coaching');
+  const [title, setTitle] = useState('');
+  const [goals, setGoals] = useState('');
+  const [personaId, setPersonaId] = useState<string | null>(null);
+  const [personas, setPersonas] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const stepIdx = STEPS.indexOf(step);
+
+  const _handleNext = () => {
+    const nextIdx = stepIdx + 1;
+    if (nextIdx < STEPS.length) setStep(STEPS[nextIdx]);
+  };
+
+  const _handleBack = () => {
+    const prevIdx = stepIdx - 1;
+    if (prevIdx >= 0) setStep(STEPS[prevIdx]);
+  };
+
+  const _handleCreate = async () => {
+    if (!title.trim()) {
+      setError(t('Bitte einen Titel eingeben'));
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const params = new URLSearchParams(window.location.search);
+      const apiRequest = commcoachApi.getApiRequest();
+      const module = await commcoachApi.createModuleApi(apiRequest, instanceId, {
+        title: title.trim(),
+        moduleType,
+        goals: goals.trim() || undefined,
+        personaId: personaId || undefined,
+      });
+      navigate(`/mandates/${mandateId}/commcoach/${instanceId}/session?moduleId=${module.id}`);
+    } catch (err: any) {
+      setError(err?.message || t('Fehler beim Erstellen'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className={styles.assistantContainer}>
+      <div className={styles.wizardHeader}>
+        <h2>{t('Neues Modul erstellen')}</h2>
+        <div className={styles.stepIndicator}>
+          {STEPS.map((s, i) => (
+            <div key={s} className={`${styles.stepDot} ${i <= stepIdx ? styles.stepActive : ''}`} />
+          ))}
+        </div>
+      </div>
+
+      {error && <div className={styles.errorBanner}>{error}</div>}
+
+      <div className={styles.wizardContent}>
+        {step === 'type' && (
+          <div className={styles.wizardStep}>
+            <h3>{t('Modul-Typ wählen')}</h3>
+            <div className={styles.typeGrid}>
+              {MODULE_TYPES.map(mt => (
+                <button
+                  key={mt.value}
+                  className={`${styles.typeCard} ${moduleType === mt.value ? styles.typeCardActive : ''}`}
+                  onClick={() => setModuleType(mt.value)}
+                >
+                  <span className={styles.typeIcon}>{mt.icon}</span>
+                  <span>{t(mt.label)}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {step === 'topic' && (
+          <div className={styles.wizardStep}>
+            <h3>{t('Thema & Titel')}</h3>
+            <input
+              type="text"
+              className={styles.wizardInput}
+              placeholder={t('z.B. Konfliktgespräche, Sales Training...')}
+              value={title}
+              onChange={e => setTitle(e.target.value)}
+              autoFocus
+            />
+            <textarea
+              className={styles.wizardTextarea}
+              placeholder={t('Ziele beschreiben (optional)')}
+              value={goals}
+              onChange={e => setGoals(e.target.value)}
+              rows={4}
+            />
+          </div>
+        )}
+
+        {step === 'persona' && (
+          <div className={styles.wizardStep}>
+            <h3>{t('Persona wählen (optional)')}</h3>
+            <p className={styles.wizardHint}>{t('Eine Persona bestimmt den Coaching-Stil. Du kannst dies später ändern.')}</p>
+            <button
+              className={`${styles.typeCard} ${!personaId ? styles.typeCardActive : ''}`}
+              onClick={() => setPersonaId(null)}
+            >
+              {t('Standard (kein Persona-Override)')}
+            </button>
+          </div>
+        )}
+
+        {step === 'kpis' && (
+          <div className={styles.wizardStep}>
+            <h3>{t('KPIs (optional)')}</h3>
+            <p className={styles.wizardHint}>{t('KPI-Ziele können später in den Modul-Einstellungen definiert werden.')}</p>
+          </div>
+        )}
+
+        {step === 'confirm' && (
+          <div className={styles.wizardStep}>
+            <h3>{t('Zusammenfassung')}</h3>
+            <div className={styles.confirmSummary}>
+              <div><strong>{t('Typ')}:</strong> {MODULE_TYPES.find(m => m.value === moduleType)?.label}</div>
+              <div><strong>{t('Titel')}:</strong> {title || t('(kein Titel)')}</div>
+              {goals && <div><strong>{t('Ziele')}:</strong> {goals}</div>}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className={styles.wizardActions}>
+        {stepIdx > 0 && (
+          <button className={styles.btnSecondary} onClick={_handleBack}>{t('Zurück')}</button>
+        )}
+        <div style={{ flex: 1 }} />
+        {step !== 'confirm' ? (
+          <button className={styles.btnPrimary} onClick={_handleNext}>{t('Weiter')}</button>
+        ) : (
+          <button className={styles.btnPrimary} onClick={_handleCreate} disabled={loading}>
+            {loading ? t('Erstelle...') : t('Modul erstellen & erste Session starten')}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};

src/pages/views/commcoach/CommcoachDashboardView.tsx

@@ -19,15 +19,21 @@ export const CommcoachDashboardView: React.FC = () => {
   const { mandateId, instanceId } = useCurrentInstance();
   const { dashboard, loading, error } = useCommcoachDashboard();
 
-  const handleContextClick = (contextId: string) => {
+  const handleModuleClick = (moduleId: string) => {
     if (mandateId && instanceId) {
-      navigate(`/mandates/${mandateId}/commcoach/${instanceId}/coaching?context=${contextId}`);
+      navigate(`/mandates/${mandateId}/commcoach/${instanceId}/modules?moduleId=${moduleId}`);
     }
   };
 
   const _handleNewTopic = useCallback(() => {
     if (mandateId && instanceId) {
-      navigate(`/mandates/${mandateId}/commcoach/${instanceId}/coaching?newContext=true`);
+      navigate(`/mandates/${mandateId}/commcoach/${instanceId}/assistant`);
+    }
+  }, [mandateId, instanceId, navigate]);
+
+  const _handleOpenDossier = useCallback(() => {
+    if (mandateId && instanceId) {
+      navigate(`/mandates/${mandateId}/commcoach/${instanceId}/dossier`);
     }
   }, [mandateId, instanceId, navigate]);
 
@@ -96,25 +102,30 @@ export const CommcoachDashboardView: React.FC = () => {
       <div className={styles.section}>
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
           <h3 className={styles.sectionTitle} style={{ margin: 0 }}>{t('Aktive Coaching-Themen')}</h3>
-          <button className={styles.newTopicBtn} onClick={_handleNewTopic}>
+          <div style={{ display: 'flex', gap: '0.5rem' }}>
-            + {t('Neues Thema')}
+            <button className={styles.newTopicBtn} onClick={_handleOpenDossier}>
-          </button>
+              {t('Dossier')}
+            </button>
+            <button className={styles.newTopicBtn} onClick={_handleNewTopic}>
+              + {t('Neues Thema')}
+            </button>
+          </div>
         </div>
-        {dashboard.contexts.length === 0 ? (
+        {(dashboard.modules || dashboard.contexts || []).length === 0 ? (
           <div className={styles.emptyState}>
             <p>{t('Noch keine Coaching-Themen angelegt.')}</p>
             <p>{t('Klicken Sie auf "Neues Thema" um zu starten.')}</p>
           </div>
         ) : (
           <div className={styles.contextGrid}>
-            {dashboard.contexts.map(ctx => (
+            {(dashboard.modules || dashboard.contexts || []).map(ctx => (
               <div
                 key={ctx.id}
                 className={styles.contextCard}
-                onClick={() => handleContextClick(ctx.id)}
+                onClick={() => handleModuleClick(ctx.id)}
                 role="button"
                 tabIndex={0}
-                onKeyDown={e => e.key === 'Enter' && handleContextClick(ctx.id)}
+                onKeyDown={e => e.key === 'Enter' && handleModuleClick(ctx.id)}
               >
                 <div className={styles.contextTitle}>{ctx.title}</div>
                 <div className={styles.contextMeta}>

src/pages/views/commcoach/CommcoachDossierView.module.css

@@ -7,14 +7,14 @@
 
 .udbSidebar {
   width: 280px;
-  min-width: 280px;
+  min-width: 180px;
-  border-right: 1px solid var(--border-color, #e0e0e0);
+  border-right: none;
   display: flex;
   flex-direction: column;
   background: var(--bg-card, #fff);
   overflow: hidden;
   position: relative;
-  transition: width 0.2s, min-width 0.2s;
+  flex-shrink: 0;
 }
 
 .udbSidebarCollapsed {
@@ -22,6 +22,20 @@
   min-width: 36px;
 }
 
+.udbResizeHandle {
+  width: 5px;
+  flex-shrink: 0;
+  cursor: col-resize;
+  background: transparent;
+  transition: background 0.15s;
+  z-index: 3;
+}
+
+.udbResizeHandle:hover,
+.udbResizeHandle:active {
+  background: var(--accent-color, #4a90d9);
+}
+
 @media (max-width: 768px) {
   .dossierLayout {
     flex-direction: column;

src/pages/views/commcoach/CommcoachDossierView.tsx

@@ -58,10 +58,12 @@ type TabKey = 'coaching' | 'tasks' | 'sessions' | 'scores';
 interface CommcoachDossierViewProps {
   persistentInstanceId?: string;
   persistentMandateId?: string;
+  initialModuleId?: string;
 }
 
 export const CommcoachDossierView: React.FC<CommcoachDossierViewProps> = ({ persistentInstanceId,
   persistentMandateId,
+  initialModuleId,
 }) => {
   const { t } = useLanguage();
   const _toolPayloadForDisplay = (payload: Record<string, unknown>): string => {
@@ -83,6 +85,8 @@ export const CommcoachDossierView: React.FC<CommcoachDossierViewProps> = ({ pers
   const [newCategory, setNewCategory] = useState('custom');
   const [udbCollapsed, setUdbCollapsed] = useState(false);
   const [udbTab, setUdbTab] = useState<UdbTab>('files');
+  const [udbWidth, setUdbWidth] = useState(280);
+  const udbResizing = useRef(false);
 
   const [newTaskTitle, setNewTaskTitle] = useState('');
   const [scoreHistory, setScoreHistory] = useState<Record<string, Array<{ score: number; createdAt?: string }>>>({});
@@ -271,7 +275,10 @@ export const CommcoachDossierView: React.FC<CommcoachDossierViewProps> = ({ pers
     <div className={styles.dossierLayout}>
       {/* UDB Sidebar */}
       {_udbContext && (
-        <div className={`${styles.udbSidebar} ${udbCollapsed ? styles.udbSidebarCollapsed : ''}`}>
+        <div
+          className={`${styles.udbSidebar} ${udbCollapsed ? styles.udbSidebarCollapsed : ''}`}
+          style={udbCollapsed ? undefined : { width: udbWidth, minWidth: 180 }}
+        >
           <button
             className={styles.udbToggle}
             onClick={() => setUdbCollapsed(v => !v)}
@@ -280,12 +287,35 @@ export const CommcoachDossierView: React.FC<CommcoachDossierViewProps> = ({ pers
             {udbCollapsed ? '\u25B6' : '\u25C0'}
           </button>
           {!udbCollapsed && (
-            <UnifiedDataBar
+            <>
-              context={_udbContext}
+              <UnifiedDataBar
-              activeTab={udbTab}
+                context={_udbContext}
-              onTabChange={setUdbTab}
+                activeTab={udbTab}
-              hideTabs={['chats']}
+                onTabChange={setUdbTab}
-            />
+                hideTabs={['chats']}
+              />
+              <div
+                className={styles.udbResizeHandle}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  udbResizing.current = true;
+                  const startX = e.clientX;
+                  const startW = udbWidth;
+                  const onMove = (ev: MouseEvent) => {
+                    if (!udbResizing.current) return;
+                    const newW = Math.max(180, Math.min(600, startW + (ev.clientX - startX)));
+                    setUdbWidth(newW);
+                  };
+                  const onUp = () => {
+                    udbResizing.current = false;
+                    document.removeEventListener('mousemove', onMove);
+                    document.removeEventListener('mouseup', onUp);
+                  };
+                  document.addEventListener('mousemove', onMove);
+                  document.addEventListener('mouseup', onUp);
+                }}
+              />
+            </>
           )}
         </div>
       )}

src/pages/views/commcoach/CommcoachKeepAlive.tsx

@@ -1,20 +1,19 @@
 /**
  * CommcoachKeepAlive
  *
- * Keeps the CommCoach dossier/coaching page mounted across route changes.
+ * Keeps the CommCoach session page mounted across route changes.
- * Visibility is toggled via CSS so session state, messages, and input state
+ * The voice session must persist when the user navigates to other tabs.
- * stay alive when the user leaves and later returns.
+ * Only the "session" tab is kept alive; modules/dashboard can unmount freely.
  *
  * Persistence is scoped per `(mandateId, instanceId)` — switching to a
- * different mandate or instance via the navigator unmounts the previous
+ * different mandate or instance unmounts the previous view.
- * view and mounts a fresh one.
  */
 
 import React, { useRef } from 'react';
 import { useLocation } from 'react-router-dom';
-import { CommcoachDossierView } from './CommcoachDossierView';
+import { CommcoachSessionView } from './CommcoachSessionView';
 
-const _COMMCOACH_ROUTE_RE = /\/mandates\/([^/]+)\/commcoach\/([^/]+)\/(?:coaching|dossier)/;
+const _COMMCOACH_SESSION_ROUTE_RE = /\/mandates\/([^/]+)\/commcoach\/([^/]+)\/session/;
 
 interface CommcoachKeepAliveProps {
   isVisible: boolean;
@@ -25,7 +24,7 @@ export const CommcoachKeepAlive: React.FC<CommcoachKeepAliveProps> = ({ isVisibl
   const cachedMandateIdRef = useRef<string>('');
   const cachedInstanceIdRef = useRef<string>('');
 
-  const match = location.pathname.match(_COMMCOACH_ROUTE_RE);
+  const match = location.pathname.match(_COMMCOACH_SESSION_ROUTE_RE);
   if (match?.[1] && match?.[2]) {
     cachedMandateIdRef.current = match[1];
     cachedInstanceIdRef.current = match[2];
@@ -48,11 +47,7 @@ export const CommcoachKeepAlive: React.FC<CommcoachKeepAliveProps> = ({ isVisibl
         bottom: 0,
       }}
     >
-      <CommcoachDossierView
+      <CommcoachSessionView key={scopeKey} />
-        key={scopeKey}
-        persistentInstanceId={instanceId}
-        persistentMandateId={mandateId}
-      />
     </div>
   );
 };

src/pages/views/commcoach/CommcoachModulesView.tsx

@@ -0,0 +1,293 @@
+/**
+ * CommCoach Modules View
+ *
+ * CRUD list of all TrainingModules, filterable by status/type.
+ * Each module row expands to show its sessions.
+ * Edit dialog includes persona multi-select for module-persona mapping.
+ */
+import React, { useState, useEffect, useCallback } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
+import * as commcoachApi from '../../../api/commcoachApi';
+import type { CoachingPersona } from '../../../api/commcoachApi';
+import { useLanguage } from '../../../providers/language/LanguageContext';
+import styles from './Commcoach.module.css';
+
+const MODULE_TYPE_LABELS: Record<string, string> = {
+  coaching: 'Coaching',
+  training: 'Training',
+  exam: 'Prüfung',
+  elearning: 'E-Learning',
+};
+
+const STATUS_LABELS: Record<string, string> = {
+  active: 'Aktiv',
+  paused: 'Pausiert',
+  archived: 'Archiviert',
+  completed: 'Abgeschlossen',
+};
+
+export const CommcoachModulesView: React.FC = () => {
+  const { t } = useLanguage();
+  const { instance, mandateId } = useCurrentInstance();
+  const instanceId = instance?.id || '';
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const highlightModuleId = searchParams.get('moduleId');
+
+  const [modules, setModules] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [expandedId, setExpandedId] = useState<string | null>(highlightModuleId);
+  const [sessions, setSessions] = useState<Record<string, any[]>>({});
+  const [editingModule, setEditingModule] = useState<any | null>(null);
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+  const [filterType, setFilterType] = useState<string>('');
+  const [filterStatus, setFilterStatus] = useState<string>('');
+
+  const [allPersonas, setAllPersonas] = useState<CoachingPersona[]>([]);
+  const [editPersonaIds, setEditPersonaIds] = useState<string[]>([]);
+  const [personasLoaded, setPersonasLoaded] = useState(false);
+
+  const _loadModules = useCallback(async () => {
+    if (!instanceId) return;
+    setLoading(true);
+    try {
+      const apiRequest = commcoachApi.getApiRequest();
+      const result = await commcoachApi.listModulesApi(apiRequest, instanceId);
+      setModules(result || []);
+    } catch (err) {
+      console.error('Failed to load modules:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [instanceId]);
+
+  useEffect(() => { _loadModules(); }, [_loadModules]);
+
+  useEffect(() => {
+    if (!instanceId || personasLoaded) return;
+    const _loadAllPersonas = async () => {
+      try {
+        const apiRequest = commcoachApi.getApiRequest();
+        const personas = await commcoachApi.getPersonasApi(apiRequest, instanceId);
+        setAllPersonas(personas);
+        setPersonasLoaded(true);
+      } catch {}
+    };
+    _loadAllPersonas();
+  }, [instanceId, personasLoaded]);
+
+  const _loadSessions = useCallback(async (moduleId: string) => {
+    if (!instanceId) return;
+    try {
+      const apiRequest = commcoachApi.getApiRequest();
+      const result = await commcoachApi.listSessionsApi(apiRequest, instanceId, moduleId);
+      setSessions(prev => ({ ...prev, [moduleId]: result || [] }));
+    } catch (err) {
+      console.error('Failed to load sessions:', err);
+    }
+  }, [instanceId]);
+
+  const _toggleExpand = (moduleId: string) => {
+    if (expandedId === moduleId) {
+      setExpandedId(null);
+    } else {
+      setExpandedId(moduleId);
+      if (!sessions[moduleId]) _loadSessions(moduleId);
+    }
+  };
+
+  const _handleDelete = async (moduleId: string) => {
+    try {
+      const apiRequest = commcoachApi.getApiRequest();
+      await commcoachApi.deleteModuleApi(apiRequest, instanceId, moduleId);
+      setDeleteConfirm(null);
+      _loadModules();
+    } catch (err) {
+      console.error('Delete failed:', err);
+    }
+  };
+
+  const _handleEdit = async (moduleId: string, updates: any) => {
+    try {
+      const apiRequest = commcoachApi.getApiRequest();
+      await commcoachApi.updateModuleApi(apiRequest, instanceId, moduleId, updates);
+      await commcoachApi.setModulePersonasApi(apiRequest, instanceId, moduleId, editPersonaIds);
+      setEditingModule(null);
+      _loadModules();
+    } catch (err) {
+      console.error('Update failed:', err);
+    }
+  };
+
+  const _openEditDialog = async (mod: any) => {
+    setEditingModule(mod);
+    try {
+      const apiRequest = commcoachApi.getApiRequest();
+      const ids = await commcoachApi.getModulePersonasApi(apiRequest, instanceId, mod.id);
+      setEditPersonaIds(ids);
+    } catch {
+      setEditPersonaIds([]);
+    }
+  };
+
+  const _togglePersonaId = (personaId: string) => {
+    setEditPersonaIds(prev =>
+      prev.includes(personaId)
+        ? prev.filter(id => id !== personaId)
+        : [...prev, personaId]
+    );
+  };
+
+  const filteredModules = modules.filter(m => {
+    if (filterType && m.moduleType !== filterType) return false;
+    if (filterStatus && m.status !== filterStatus) return false;
+    return true;
+  });
+
+  return (
+    <div className={styles.modulesContainer}>
+      <div className={styles.modulesHeader}>
+        <h2>{t('Module')}</h2>
+        <div className={styles.modulesFilters}>
+          <select value={filterType} onChange={e => setFilterType(e.target.value)}>
+            <option value="">{t('Alle Typen')}</option>
+            {Object.entries(MODULE_TYPE_LABELS).map(([k, v]) => (
+              <option key={k} value={k}>{t(v)}</option>
+            ))}
+          </select>
+          <select value={filterStatus} onChange={e => setFilterStatus(e.target.value)}>
+            <option value="">{t('Alle Status')}</option>
+            {Object.entries(STATUS_LABELS).map(([k, v]) => (
+              <option key={k} value={k}>{t(v)}</option>
+            ))}
+          </select>
+        </div>
+        <button
+          className={styles.btnPrimary}
+          onClick={() => navigate(`/mandates/${mandateId}/commcoach/${instanceId}/assistant`)}
+        >
+          {t('Neues Modul')}
+        </button>
+      </div>
+
+      {loading && <div className={styles.loading}>{t('Laden...')}</div>}
+
+      <div className={styles.modulesList}>
+        {filteredModules.map(mod => (
+          <div
+            key={mod.id}
+            className={`${styles.moduleCard} ${expandedId === mod.id ? styles.moduleExpanded : ''} ${highlightModuleId === mod.id ? styles.moduleHighlighted : ''}`}
+          >
+            <div className={styles.moduleRow} onClick={() => _toggleExpand(mod.id)}>
+              <span className={styles.moduleType}>{t(MODULE_TYPE_LABELS[mod.moduleType] || mod.moduleType)}</span>
+              <span className={styles.moduleTitle}>{mod.title}</span>
+              <span className={styles.moduleStatus}>{t(STATUS_LABELS[mod.status] || mod.status)}</span>
+              <span className={styles.moduleSessions}>{mod.sessionCount || 0} {t('Sessions')}</span>
+              <div className={styles.moduleActions}>
+                <button className={styles.btnPrimary} style={{ padding: '0.3rem 0.7rem', fontSize: '0.8rem' }} onClick={e => {
+                  e.stopPropagation();
+                  navigate(`/mandates/${mandateId}/commcoach/${instanceId}/session?moduleId=${mod.id}`);
+                }}>{t('Session starten')}</button>
+                <button className={styles.btnSmall} onClick={e => { e.stopPropagation(); _openEditDialog(mod); }}>{t('Bearbeiten')}</button>
+                <button className={styles.btnSmallDanger} onClick={e => { e.stopPropagation(); setDeleteConfirm(mod.id); }}>{t('Löschen')}</button>
+              </div>
+            </div>
+
+            {expandedId === mod.id && (
+              <div className={styles.moduleSessions}>
+                {(sessions[mod.id] || []).length === 0 ? (
+                  <p className={styles.noSessions}>{t('Keine Sessions vorhanden')}</p>
+                ) : (
+                  <div className={styles.sessionList}>
+                    {(sessions[mod.id] || []).map((sess: any) => (
+                      <div key={sess.id} className={styles.sessionRow}>
+                        <span>{sess.summary || t('Session')}</span>
+                        <span className={styles.sessionStatus}>{sess.status}</span>
+                        <span className={styles.sessionDate}>
+                          {sess.startedAt ? new Date(sess.startedAt * 1000).toLocaleDateString() : '-'}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {deleteConfirm && (
+        <div className={styles.confirmOverlay}>
+          <div className={styles.confirmDialog}>
+            <p>{t('Modul und alle zugehörigen Sessions wirklich löschen?')}</p>
+            <div className={styles.confirmActions}>
+              <button className={styles.btnSecondary} onClick={() => setDeleteConfirm(null)}>{t('Abbrechen')}</button>
+              <button className={styles.btnDanger} onClick={() => _handleDelete(deleteConfirm)}>{t('Löschen')}</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {editingModule && (
+        <div className={styles.confirmOverlay}>
+          <div className={styles.editDialog}>
+            <h3>{t('Modul bearbeiten')}</h3>
+            <input
+              type="text"
+              defaultValue={editingModule.title}
+              className={styles.wizardInput}
+              onBlur={e => setEditingModule({ ...editingModule, title: e.target.value })}
+            />
+            <textarea
+              defaultValue={editingModule.goals || ''}
+              className={styles.wizardTextarea}
+              placeholder={t('Ziele')}
+              rows={3}
+              onBlur={e => setEditingModule({ ...editingModule, goals: e.target.value })}
+            />
+
+            {/* Persona Multi-Select */}
+            <div style={{ marginTop: '1rem' }}>
+              <label className={styles.wizardLabel} style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
+                {t('Verfuegbare Gespraechspartner')}
+              </label>
+              <p style={{ fontSize: '0.8rem', color: 'var(--text-secondary, #888)', margin: '0 0 0.5rem' }}>
+                {t('Waehle, welche Gespraechspartner in Sessions dieses Moduls zur Verfuegung stehen. Ohne Auswahl sind alle verfuegbar.')}
+              </p>
+              <div style={{
+                maxHeight: 200, overflowY: 'auto', border: '1px solid var(--border-color, #ddd)',
+                borderRadius: 6, padding: '0.5rem',
+              }}>
+                {allPersonas.filter(p => p.isActive).map(p => (
+                  <label key={p.id} style={{
+                    display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.3rem 0',
+                    cursor: 'pointer', fontSize: '0.85rem',
+                  }}>
+                    <input
+                      type="checkbox"
+                      checked={editPersonaIds.includes(p.id)}
+                      onChange={() => _togglePersonaId(p.id)}
+                    />
+                    <span>{p.label}</span>
+                    <span style={{ fontSize: '0.75rem', color: 'var(--text-secondary, #888)' }}>
+                      ({p.category === 'builtin' ? t('System') : t('Eigene')})
+                    </span>
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            <div className={styles.confirmActions}>
+              <button className={styles.btnSecondary} onClick={() => setEditingModule(null)}>{t('Abbrechen')}</button>
+              <button className={styles.btnPrimary} onClick={() => _handleEdit(editingModule.id, {
+                title: editingModule.title,
+                goals: editingModule.goals,
+              })}>{t('Speichern')}</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

src/pages/views/commcoach/CommcoachSessionView.tsx

@@ -0,0 +1,610 @@
+/**
+ * CommCoach Session View (Refactored)
+ *
+ * Shows ONLY the active coaching session: Chat, Voice, TTS, Agent activity.
+ * Three states:
+ *   1. No module selected -> hint with links to Assistant / Modules
+ *   2. Module selected, no session -> persona picker + "Start session"
+ *   3. Session active -> full chat/voice/TTS interface
+ *
+ * Reachable via Assistant wizard or Modules page ("Session starten" button).
+ * KeepAlive-wrapped — voice sessions persist across tab switches.
+ */
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { useSearchParams, useNavigate, useLocation } from 'react-router-dom';
+import { useCommcoach } from '../../../hooks/useCommcoach';
+import { type TtsEvent } from '../../../hooks/useTtsPlayback';
+import { useApiRequest } from '../../../hooks/useApi';
+import { useInstanceId, useMandateId } from '../../../hooks/useCurrentInstance';
+import {
+  getPersonasApi, getModulePersonasApi,
+  type CoachingPersona,
+  type SendMessageOptions,
+} from '../../../api/commcoachApi';
+import api from '../../../api';
+import AutoScroll from '../../../components/UiComponents/AutoScroll/AutoScroll';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { UnifiedDataBar } from '../../../components/UnifiedDataBar';
+import type { UdbContext, UdbTab, AddToChat_FileItem } from '../../../components/UnifiedDataBar';
+import { ProviderMultiSelect, _defaultProviderSelection } from '../../../components/ProviderSelector';
+import type { ProviderSelection } from '../../../components/ProviderSelector';
+import { getPageIcon } from '../../../config/pageRegistry';
+import styles from './CommcoachDossierView.module.css';
+import sessionStyles from './Commcoach.module.css';
+import { useVoiceController } from './useVoiceController';
+import { useLanguage } from '../../../providers/language/LanguageContext';
+
+interface WorkspaceFileInfo { id: string; fileName: string; mimeType: string; fileSize: number; }
+interface DataSourceInfo { id: string; connectionId: string; sourceType: string; path: string; label: string; }
+interface FeatureDataSourceInfo { id: string; featureInstanceId: string; featureCode: string; tableName: string; label: string; }
+
+function _formatToolPayload(payload: Record<string, unknown>): string {
+  try {
+    const s = JSON.stringify(payload, null, 0);
+    return s.length > 120 ? s.substring(0, 120) + '...' : s;
+  } catch { return '[unlesbar]'; }
+}
+
+export const CommcoachSessionView: React.FC = () => {
+  const { t } = useLanguage();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const instanceId = useInstanceId();
+  const mandateId = useMandateId();
+  const coach = useCommcoach(instanceId);
+  const { request } = useApiRequest();
+  const [searchParams] = useSearchParams();
+  const moduleId = searchParams.get('moduleId');
+
+  const isSessionRoute = /\/commcoach\/[^/]+\/session/.test(location.pathname);
+
+  const [personas, setPersonas] = useState<CoachingPersona[]>([]);
+  const [modulePersonaIds, setModulePersonaIds] = useState<string[] | null>(null);
+  const [selectedPersonaId, setSelectedPersonaId] = useState<string | undefined>(undefined);
+  const [showAgentActivity, setShowAgentActivity] = useState(true);
+
+  const [udbCollapsed, setUdbCollapsed] = useState(false);
+  const [udbTab, setUdbTab] = useState<UdbTab>('files');
+  const [udbWidth, setUdbWidth] = useState(280);
+  const udbResizing = useRef(false);
+
+  const [wsFiles, setWsFiles] = useState<WorkspaceFileInfo[]>([]);
+  const [wsDataSources, setWsDataSources] = useState<DataSourceInfo[]>([]);
+  const [wsFeatureDataSources, setWsFeatureDataSources] = useState<FeatureDataSourceInfo[]>([]);
+  const [attachedFileIds, setAttachedFileIds] = useState<string[]>([]);
+  const [attachedDsIds, setAttachedDsIds] = useState<string[]>([]);
+  const [attachedFdsIds, setAttachedFdsIds] = useState<string[]>([]);
+  const [providerSelection, setProviderSelection] = useState<ProviderSelection>(_defaultProviderSelection);
+  const [showFilePicker, setShowFilePicker] = useState(false);
+  const [showSourcePicker, setShowSourcePicker] = useState(false);
+
+  const _udbContext: UdbContext | null = instanceId
+    ? { instanceId, mandateId: mandateId || undefined, featureInstanceId: instanceId }
+    : null;
+
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const sendMessageRef = useRef(coach.sendMessage);
+  sendMessageRef.current = coach.sendMessage;
+  const attachedFileIdsRef = useRef(attachedFileIds);
+  attachedFileIdsRef.current = attachedFileIds;
+  const attachedDsIdsRef = useRef(attachedDsIds);
+  attachedDsIdsRef.current = attachedDsIds;
+  const attachedFdsIdsRef = useRef(attachedFdsIds);
+  attachedFdsIdsRef.current = attachedFdsIds;
+  const providerSelRef = useRef(providerSelection);
+  providerSelRef.current = providerSelection;
+
+  const voice = useVoiceController({
+    onFinalText: (text) => {
+      const opts: SendMessageOptions = {};
+      if (attachedFileIdsRef.current.length) opts.fileIds = attachedFileIdsRef.current;
+      if (attachedDsIdsRef.current.length) opts.dataSourceIds = attachedDsIdsRef.current;
+      if (attachedFdsIdsRef.current.length) opts.featureDataSourceIds = attachedFdsIdsRef.current;
+      const allowed = providerSelRef.current.include.length > 0 ? providerSelRef.current.include : undefined;
+      if (allowed) opts.allowedProviders = allowed;
+      sendMessageRef.current(text, Object.keys(opts).length ? opts : undefined);
+    },
+  });
+
+  useEffect(() => {
+    coach.onTtsEventRef.current = (event: TtsEvent) => {
+      if (event === 'playing') voice.ttsPlaying();
+      else if (event === 'ended') voice.ttsEnded();
+      else if (event === 'paused') voice.ttsPaused();
+      else if (event === 'error') voice.ttsEnded();
+    };
+    return () => { coach.onTtsEventRef.current = null; };
+  }, [coach.onTtsEventRef, voice.ttsPlaying, voice.ttsEnded, voice.ttsPaused]);
+
+  // Auto-select module from URL param
+  useEffect(() => {
+    if (moduleId && coach.contexts.length > 0 && coach.selectedContextId !== moduleId) {
+      const found = coach.contexts.find(c => c.id === moduleId);
+      if (found) coach.selectContext(moduleId);
+    } else if (!moduleId && !coach.selectedContextId && coach.contexts.length > 0) {
+      coach.selectContext(coach.contexts[0].id, { skipSessionResume: true });
+    }
+  }, [moduleId, coach.contexts, coach.selectedContextId, coach.selectContext]);
+
+  useEffect(() => {
+    if (!instanceId || !isSessionRoute) return;
+    getPersonasApi(request, instanceId).then(p => setPersonas(p)).catch(() => {});
+  }, [instanceId, request, isSessionRoute]);
+
+  useEffect(() => {
+    if (!instanceId || !coach.selectedContextId || !isSessionRoute) { setModulePersonaIds(null); return; }
+    getModulePersonasApi(request, instanceId, coach.selectedContextId)
+      .then(ids => setModulePersonaIds(ids.length > 0 ? ids : null))
+      .catch(() => setModulePersonaIds(null));
+  }, [instanceId, request, coach.selectedContextId, isSessionRoute]);
+
+  const _refreshWorkspaceAssets = useCallback(() => {
+    if (!instanceId) return;
+    api.get(`/api/workspace/${instanceId}/files`).then(r => setWsFiles(r.data.files || [])).catch(() => {});
+    api.get(`/api/workspace/${instanceId}/datasources`).then(r => setWsDataSources(r.data.dataSources || [])).catch(() => {});
+    api.get(`/api/workspace/${instanceId}/feature-datasources`).then(r => setWsFeatureDataSources(r.data.featureDataSources || [])).catch(() => {});
+  }, [instanceId]);
+
+  useEffect(() => { _refreshWorkspaceAssets(); }, [_refreshWorkspaceAssets]);
+  useEffect(() => {
+    const h = () => _refreshWorkspaceAssets();
+    window.addEventListener('fileUploaded', h);
+    return () => window.removeEventListener('fileUploaded', h);
+  }, [_refreshWorkspaceAssets]);
+
+  useEffect(() => {
+    if (!coach.session) {
+      voice.deactivate();
+    } else if (voice.state === 'idle') {
+      voice.activate();
+    }
+  }, [coach.session?.id, voice]);
+
+  useEffect(() => {
+    coach.onDocumentCreatedRef.current = () => {
+      window.dispatchEvent(new CustomEvent('fileUploaded', { detail: { source: 'commcoachDocument' } }));
+    };
+    return () => { coach.onDocumentCreatedRef.current = null; };
+  }, [coach, _refreshWorkspaceAssets]);
+
+  useEffect(() => {
+    if (coach.agentToolCalls.length > 0) setShowAgentActivity(true);
+  }, [coach.agentToolCalls.length]);
+
+  const handleStopTts = useCallback(() => { coach.stopTts(); voice.ttsStopped(); }, [coach, voice]);
+  const handlePauseTts = useCallback(() => coach.pauseTts(), [coach]);
+  const handleResumeTts = useCallback(() => coach.resumeTts(), [coach]);
+
+  const handleSend = useCallback(async () => {
+    if (!coach.inputValue.trim() || coach.isStreaming) return;
+    const opts: SendMessageOptions = {};
+    if (attachedFileIds.length) opts.fileIds = attachedFileIds;
+    if (attachedDsIds.length) opts.dataSourceIds = attachedDsIds;
+    if (attachedFdsIds.length) opts.featureDataSourceIds = attachedFdsIds;
+    const allowed = providerSelection.include.length > 0 ? providerSelection.include : undefined;
+    if (allowed) opts.allowedProviders = allowed;
+    await coach.sendMessage(coach.inputValue, Object.keys(opts).length ? opts : undefined);
+    setAttachedFileIds([]);
+    setShowSourcePicker(false);
+    setShowFilePicker(false);
+  }, [coach, attachedFileIds, attachedDsIds, attachedFdsIds, providerSelection]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); }
+  }, [handleSend]);
+
+  const _toggleFile = useCallback((fileId: string) => {
+    setAttachedFileIds(prev => prev.includes(fileId) ? prev.filter(id => id !== fileId) : [...prev, fileId]);
+  }, []);
+  const _toggleDs = useCallback((dsId: string) => {
+    setAttachedDsIds(prev => prev.includes(dsId) ? prev.filter(id => id !== dsId) : [...prev, dsId]);
+  }, []);
+  const _toggleFds = useCallback((fdsId: string) => {
+    setAttachedFdsIds(prev => prev.includes(fdsId) ? prev.filter(id => id !== fdsId) : [...prev, fdsId]);
+  }, []);
+
+  const attachedFileNamesRef = useRef<Record<string, string>>({});
+
+  const _handleUdbFileSelect = useCallback((fileId: string, fileName?: string) => {
+    if (fileName) attachedFileNamesRef.current[fileId] = fileName;
+    setAttachedFileIds(prev => prev.includes(fileId) ? prev : [...prev, fileId]);
+  }, []);
+
+  const _handleUdbSendToChat = useCallback((items: AddToChat_FileItem[]) => {
+    for (const item of items) {
+      if (item.name) attachedFileNamesRef.current[item.id] = item.name;
+    }
+    const fileIds = items.filter(i => i.type === 'file').map(i => i.id);
+    setAttachedFileIds(prev => {
+      const merged = [...prev];
+      for (const fId of fileIds) {
+        if (!merged.includes(fId)) merged.push(fId);
+      }
+      return merged;
+    });
+  }, []);
+
+  const _isTreeDrag = useCallback((e: React.DragEvent) => {
+    return e.dataTransfer.types.includes('application/tree-items') ||
+      e.dataTransfer.types.includes('application/file-id') ||
+      e.dataTransfer.types.includes('application/file-ids');
+  }, []);
+
+  const _handleInputDragOver = useCallback((e: React.DragEvent) => {
+    if (_isTreeDrag(e)) {
+      e.preventDefault();
+      e.stopPropagation();
+      e.dataTransfer.dropEffect = 'copy';
+    }
+  }, [_isTreeDrag]);
+
+  const _handleInputDrop = useCallback((e: React.DragEvent) => {
+    const treeJson = e.dataTransfer.getData('application/tree-items');
+    if (treeJson) {
+      e.preventDefault();
+      e.stopPropagation();
+      try {
+        const items: AddToChat_FileItem[] = JSON.parse(treeJson);
+        for (const item of items) {
+          if (item.name) attachedFileNamesRef.current[item.id] = item.name;
+        }
+        const fileIds = items.filter(i => i.type === 'file').map(i => i.id);
+        setAttachedFileIds(prev => {
+          const merged = [...prev];
+          for (const fId of fileIds) {
+            if (!merged.includes(fId)) merged.push(fId);
+          }
+          return merged;
+        });
+      } catch {}
+      return;
+    }
+    const fileId = e.dataTransfer.getData('application/file-id');
+    if (fileId) {
+      e.preventDefault();
+      e.stopPropagation();
+      const name = e.dataTransfer.getData('text/plain');
+      if (name) attachedFileNamesRef.current[fileId] = name;
+      setAttachedFileIds(prev => prev.includes(fileId) ? prev : [...prev, fileId]);
+    }
+  }, []);
+
+  const _toolPayloadForDisplay = (payload: Record<string, unknown>): string => {
+    const formatted = _formatToolPayload(payload);
+    return formatted === '[unlesbar]' ? t('[unlesbar]') : formatted;
+  };
+
+  if (coach.loadingContexts) {
+    return <div className={sessionStyles.loading}>{t('Laden...')}</div>;
+  }
+
+  // ========== STATE 1: No module selected ==========
+  if (!coach.selectedContextId && coach.contexts.length === 0) {
+    return (
+      <div className={sessionStyles.modulesContainer} style={{ alignItems: 'center', justifyContent: 'center' }}>
+        <h3>{t('Keine aktive Session')}</h3>
+        <p style={{ color: 'var(--text-secondary, #666)', textAlign: 'center', maxWidth: 400 }}>
+          {t('Erstelle zuerst ein Modul ueber den Assistenten oder starte eine Session ueber die Module-Seite.')}
+        </p>
+        <div style={{ display: 'flex', gap: '0.75rem', marginTop: '1rem' }}>
+          <button className={sessionStyles.btnPrimary}
+            onClick={() => navigate(`/mandates/${mandateId}/commcoach/${instanceId}/assistant`)}
+          >{t('Zum Assistenten')}</button>
+          <button className={sessionStyles.btnSecondary}
+            onClick={() => navigate(`/mandates/${mandateId}/commcoach/${instanceId}/modules`)}
+          >{t('Zu den Modulen')}</button>
+        </div>
+      </div>
+    );
+  }
+
+  // ========== STATE 2: Module selected, no active session ==========
+  if (coach.selectedContextId && !coach.session) {
+    return (
+      <div className={sessionStyles.modulesContainer}>
+        <div style={{ marginBottom: '1rem' }}>
+          <h3>{coach.selectedContext?.title || t('Modul')}</h3>
+          {coach.selectedContext?.description && (
+            <p style={{ color: 'var(--text-secondary, #666)', marginTop: '0.25rem' }}>{coach.selectedContext.description}</p>
+          )}
+        </div>
+
+        {personas.length > 0 && (() => {
+          const availablePersonas = modulePersonaIds
+            ? personas.filter(p => modulePersonaIds.includes(p.id))
+            : personas;
+          return availablePersonas.length > 0 ? (
+            <div style={{ marginBottom: '1rem' }}>
+              <label style={{ display: 'block', fontWeight: 500, marginBottom: '0.5rem' }}>{t('Gespraechspartner waehlen')}</label>
+              {modulePersonaIds && (
+                <p style={{ fontSize: '0.8rem', color: 'var(--text-secondary, #888)', margin: '0 0 0.5rem' }}>
+                  {t('Fuer dieses Modul sind bestimmte Gespraechspartner konfiguriert.')}
+                </p>
+              )}
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+                {availablePersonas.map(p => (
+                  <button
+                    key={p.id}
+                    className={`${sessionStyles.btnSmall} ${selectedPersonaId === p.id ? sessionStyles.btnSmallActive : ''}`}
+                    onClick={() => setSelectedPersonaId(selectedPersonaId === p.id ? undefined : p.id)}
+                    title={p.description}
+                  >
+                    <span>{p.gender === 'f' ? '\u2640' : p.gender === 'm' ? '\u2642' : '\u25CB'}</span>
+                    {' '}{p.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          ) : null;
+        })()}
+
+        <button
+          className={sessionStyles.btnPrimary}
+          onClick={() => coach.startSession(selectedPersonaId)}
+          disabled={!!coach.actionLoading}
+          style={{ alignSelf: 'flex-start' }}
+        >
+          {coach.actionLoading === 'starting'
+            ? t('Wird gestartet...')
+            : selectedPersonaId && personas.find(p => p.id === selectedPersonaId)
+              ? `${t('Session starten mit')} ${personas.find(p => p.id === selectedPersonaId)!.label}`
+              : t('Session starten')}
+        </button>
+
+        {coach.error && <div className={sessionStyles.errorBanner}>{coach.error}</div>}
+      </div>
+    );
+  }
+
+  // ========== STATE 3: Active session ==========
+  return (
+    <div className={styles.dossierLayout}>
+      {/* UDB Sidebar */}
+      {_udbContext && (
+        <div
+          className={`${styles.udbSidebar} ${udbCollapsed ? styles.udbSidebarCollapsed : ''}`}
+          style={udbCollapsed ? undefined : { width: udbWidth, minWidth: 180 }}
+        >
+          <button
+            className={styles.udbToggle}
+            onClick={() => setUdbCollapsed(v => !v)}
+            title={udbCollapsed ? t('Seitenleiste einblenden') : t('Seitenleiste ausblenden')}
+          >
+            {udbCollapsed ? '\u25B6' : '\u25C0'}
+          </button>
+          {!udbCollapsed && (
+              <UnifiedDataBar
+                context={_udbContext}
+                activeTab={udbTab}
+                onTabChange={setUdbTab}
+                hideTabs={['chats']}
+                onFileSelect={_handleUdbFileSelect}
+                onSendToChat_Files={_handleUdbSendToChat}
+              />
+          )}
+        </div>
+      )}
+      {_udbContext && !udbCollapsed && (
+        <div
+          className={styles.udbResizeHandle}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            udbResizing.current = true;
+            const startX = e.clientX;
+            const startW = udbWidth;
+            const onMove = (ev: MouseEvent) => {
+              if (!udbResizing.current) return;
+              const newW = Math.max(180, Math.min(600, startW + (ev.clientX - startX)));
+              setUdbWidth(newW);
+            };
+            const onUp = () => {
+              udbResizing.current = false;
+              document.removeEventListener('mousemove', onMove);
+              document.removeEventListener('mouseup', onUp);
+            };
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onUp);
+          }}
+        />
+      )}
+
+      {/* Main Session Content */}
+      <div className={styles.dossier}>
+        {/* Session Header */}
+        <div className={styles.sessionHeader}>
+          <span className={styles.sessionLabel}>
+            {coach.selectedContext?.title ? `${coach.selectedContext.title} — ` : ''}
+            {t('Session aktiv')}
+          </span>
+          <div className={styles.sessionActions}>
+            {voice.state === 'botSpeaking' && (
+              <>
+                <button className={styles.btnSmall} onClick={handlePauseTts}>Pause</button>
+                <button className={styles.btnSmallDanger} onClick={handleStopTts}>Stop</button>
+              </>
+            )}
+            {voice.state === 'interrupted' && coach.hasAudioToResume() && (
+              <button className={styles.btnSmall} onClick={handleResumeTts}>{t('Weitersprechen')}</button>
+            )}
+            <button
+              className={`${styles.btnSmall} ${voice.muted ? styles.mutedActive : ''}`}
+              onClick={voice.toggleMute}
+              title={voice.muted ? t('Stummschaltung aufheben') : t('stummschalten')}
+            >
+              {voice.muted ? t('Stumm') : t('Ton an')}
+            </button>
+            <button className={styles.btnSmall} onClick={coach.completeSession} disabled={!!coach.actionLoading}>
+              {coach.actionLoading === 'completing' ? t('wird abgeschlossen') : t('abschliessen')}
+            </button>
+            <button className={styles.btnSmallDanger} onClick={coach.cancelSession} disabled={!!coach.actionLoading}>
+              {coach.actionLoading === 'cancelling' ? t('wird abgebrochen') : t('Abbrechen')}
+            </button>
+          </div>
+        </div>
+
+        {coach.error && <div className={styles.errorBanner || sessionStyles.errorBanner}>{coach.error}</div>}
+
+        {/* Messages */}
+        <AutoScroll scrollDependency={coach.messages.length + (coach.isStreaming ? 1 : 0) + voice.liveTranscript.length}>
+          <div className={styles.messages}>
+            {coach.messages.map(msg => (
+              <div key={msg.id} className={`${styles.message} ${msg.role === 'user' ? styles.messageUser : styles.messageAssistant}`}>
+                <div className={styles.messageBubble}>
+                  <ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown>
+                </div>
+                <div className={styles.messageTime}>
+                  {msg.createdAt ? new Date(msg.createdAt).toLocaleTimeString('de-CH', { hour: '2-digit', minute: '2-digit' }) : ''}
+                </div>
+              </div>
+            ))}
+            {voice.liveTranscript && (
+              <div className={`${styles.message} ${styles.messageUser}`}>
+                <div className={`${styles.messageBubble} ${styles.messageLive}`}>{voice.liveTranscript}</div>
+              </div>
+            )}
+            {coach.isStreaming && (
+              <div className={`${styles.message} ${styles.messageAssistant}`}>
+                <div className={styles.messageBubble}>
+                  {coach.streamingMessage ? (
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{coach.streamingMessage}</ReactMarkdown>
+                  ) : (
+                    <div className={styles.typing}>{coach.streamingStatus || t('Coach denkt nach')}<span className={styles.typingDots}>...</span></div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </AutoScroll>
+
+        {/* Agent Activity Panel */}
+        {(coach.isStreaming || coach.agentToolCalls.length > 0) && (
+          <div className={styles.agentActivityPanel}>
+            <button
+              className={styles.agentActivityHeader}
+              onClick={() => setShowAgentActivity(prev => !prev)}
+              type="button"
+            >
+              <span className={styles.agentActivityTitle}>
+                {t('Agent-Aktivitaet')}
+                {coach.agentToolCalls.length > 0 ? ` (${coach.agentToolCalls.length})` : ''}
+              </span>
+              <span className={styles.agentActivityStatus}>
+                {coach.streamingStatus || (coach.agentToolCalls.length > 0 ? t('Toolaufrufe vorhanden') : t('Warte auf Agent'))}
+              </span>
+              <span className={styles.agentActivityChevron}>{showAgentActivity ? '\u25BE' : '\u25B8'}</span>
+            </button>
+            {showAgentActivity && (
+              <div className={styles.agentActivityBody}>
+                {coach.agentToolCalls.length === 0 ? (
+                  <div className={styles.agentActivityEmpty}>{t('Noch keine Tool-Aufrufe in dieser Antwort.')}</div>
+                ) : (
+                  coach.agentToolCalls.map((toolCall, idx) => (
+                    <div key={`${toolCall.toolName}-${idx}`} className={styles.agentActivityItem}>
+                      <div className={styles.agentActivityItemHeader}>
+                        <span className={styles.agentActivityToolName}>{toolCall.toolName}</span>
+                        <span className={`${styles.agentActivityBadge} ${
+                          toolCall.success === true ? styles.agentActivityBadgeSuccess
+                            : toolCall.success === false ? styles.agentActivityBadgeError
+                              : styles.agentActivityBadgeRunning
+                        }`}>
+                          {toolCall.success === true ? t('fertig') : toolCall.success === false ? t('fehler') : t('laeuft')}
+                        </span>
+                      </div>
+                      {toolCall.args && (
+                        <div className={styles.agentActivityMeta}>
+                          <strong>{t('Argumente:')}</strong> {_toolPayloadForDisplay(toolCall.args)}
+                        </div>
+                      )}
+                      {toolCall.result && (
+                        <div className={styles.agentActivityMeta}>
+                          <strong>{t('Ergebnis:')}</strong> {toolCall.result}
+                        </div>
+                      )}
+                    </div>
+                  ))
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Input Area */}
+        <div className={styles.inputArea} onDragOver={_handleInputDragOver} onDrop={_handleInputDrop}>
+          <div className={styles.voiceStatus}>
+            <span className={`${styles.voiceIndicator} ${voice.state === 'listening' ? styles.voiceActive : ''}`}>
+              {voice.muted
+                ? t('Stumm - Mikrofon aus')
+                : voice.state === 'botSpeaking'
+                  ? (coach.streamingStatus || t('Coach spricht...'))
+                  : coach.isStreaming
+                    ? (coach.streamingStatus || t('Coach denkt nach...'))
+                    : voice.state === 'interrupted'
+                      ? t('Unterbrochen - Mikrofon an')
+                      : voice.state === 'listening'
+                        ? (voice.liveTranscript ? t('Spricht...') : t('Mikrofon an - bitte sprechen'))
+                        : t('Mikrofon wird gestartet...')}
+            </span>
+          </div>
+
+          {/* Attachment Chips */}
+          {(attachedFileIds.length > 0 || attachedDsIds.length > 0 || attachedFdsIds.length > 0) && (
+            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', paddingBottom: 4 }}>
+              {attachedFileIds.map(fId => {
+                const file = wsFiles.find(f => f.id === fId);
+                const displayName = file?.fileName || attachedFileNamesRef.current[fId] || fId;
+                return (
+                  <span key={fId} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px', borderRadius: 12, fontSize: 11, background: '#e3f2fd', color: '#1565c0', fontWeight: 500 }}>
+                    {displayName}
+                    <button onClick={() => _toggleFile(fId)} style={{ border: 'none', background: 'none', cursor: 'pointer', fontSize: 11, color: '#1565c0', padding: 0, lineHeight: 1 }}>x</button>
+                  </span>
+                );
+              })}
+              {attachedDsIds.map(dsId => {
+                const ds = wsDataSources.find(d => d.id === dsId);
+                return (
+                  <span key={dsId} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px', borderRadius: 12, fontSize: 11, background: '#e8f5e9', color: '#2e7d32', fontWeight: 500 }}>
+                    {ds?.label || ds?.path || dsId}
+                    <button onClick={() => _toggleDs(dsId)} style={{ border: 'none', background: 'none', cursor: 'pointer', fontSize: 11, color: '#2e7d32', padding: 0, lineHeight: 1 }}>x</button>
+                  </span>
+                );
+              })}
+              {attachedFdsIds.map(fdsId => {
+                const fds = wsFeatureDataSources.find(d => d.id === fdsId);
+                return (
+                  <span key={fdsId} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px', borderRadius: 12, fontSize: 11, background: '#f3e5f5', color: '#7b1fa2', fontWeight: 500 }}>
+                    <span style={{ fontSize: 12 }}>{fds ? getPageIcon(`feature.${fds.featureCode}`) || '\uD83D\uDDC3\uFE0F' : '\uD83D\uDDC3\uFE0F'}</span>
+                    {fds?.label || fdsId}
+                    <button onClick={() => _toggleFds(fdsId)} style={{ border: 'none', background: 'none', cursor: 'pointer', fontSize: 11, color: '#7b1fa2', padding: 0, lineHeight: 1 }}>x</button>
+                  </span>
+                );
+              })}
+            </div>
+          )}
+
+          <div className={styles.textInputRow}>
+            <textarea
+              ref={inputRef}
+              className={styles.textInput}
+              placeholder={t('Nachricht eingeben')}
+              value={coach.inputValue}
+              onChange={e => coach.setInputValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              onDragOver={_handleInputDragOver}
+              onDrop={_handleInputDrop}
+              rows={1}
+              disabled={coach.isStreaming}
+            />
+            <button
+              className={styles.sendBtn}
+              onClick={handleSend}
+              disabled={coach.isStreaming || !coach.inputValue.trim()}
+            >
+              {t('Senden')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/pages/views/commcoach/CommcoachSettingsView.module.css

@@ -169,10 +169,142 @@
   }
 }
 
+/* Tab Bar */
+.tabBar {
+  display: flex;
+  gap: 0;
+  border-bottom: 2px solid var(--border-color, #ddd);
+  margin-bottom: 1.5rem;
+}
+
+.tab {
+  padding: 0.6rem 1.2rem;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--text-secondary, #666);
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.tab:hover {
+  color: var(--text-primary, #333);
+}
+
+.tabActive {
+  color: var(--primary-color, #F25843);
+  border-bottom-color: var(--primary-color, #F25843);
+}
+
+/* Personas Tab */
+.personasTab {
+  width: 100%;
+}
+
+.personasHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.textarea {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border-color, #ddd);
+  border-radius: 6px;
+  font-size: 0.9rem;
+  background: var(--bg-input, #fff);
+  color: var(--text-primary, #333);
+  resize: vertical;
+  font-family: inherit;
+}
+
+/* Modal */
+.modalOverlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal {
+  background: var(--bg-card, #fff);
+  border-radius: 12px;
+  width: 520px;
+  max-width: 90vw;
+  max-height: 80vh;
+  overflow-y: auto;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+}
+
+.modalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--border-color, #e0e0e0);
+}
+
+.modalHeader h3 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.modalClose {
+  background: none;
+  border: none;
+  font-size: 1.2rem;
+  cursor: pointer;
+  color: var(--text-secondary, #666);
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+}
+
+.modalClose:hover {
+  background: var(--bg-hover, #f5f5f5);
+}
+
+.modalBody {
+  padding: 1rem 1.25rem;
+}
+
+.modalFooter {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.75rem 1.25rem;
+  border-top: 1px solid var(--border-color, #e0e0e0);
+}
+
+.btnSecondary {
+  padding: 0.4rem 1rem;
+  background: transparent;
+  color: var(--text-primary, #333);
+  border: 1px solid var(--border-color, #ddd);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.btnSecondary:hover {
+  background: var(--bg-hover, #f5f5f5);
+  border-color: var(--primary-color, #F25843);
+  color: var(--primary-color, #F25843);
+}
+
 @media (max-width: 768px) {
   .settings { padding: 0.75rem; max-width: 100%; }
   .statsGrid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
   .statItem { padding: 0.5rem; }
   .statValue { font-size: 1.2rem; }
   .voiceRow { flex-direction: column; }
+  .modal { width: 95vw; }
 }

src/pages/views/commcoach/CommcoachSettingsView.tsx

@@ -1,28 +1,37 @@
 /**
  * CommCoach Settings View
  *
- * Coaching-specific settings: reminders, email notifications, stats.
+ * Two tabs:
- * Voice/language settings are in user-level settings (/settings -> "Stimme & Sprache").
+ *  1. Allgemein – Reminders, email notifications, voice/language link
+ *  2. Gespraechspartner – Persona CRUD with FormGeneratorTable (apiEndpoint-driven)
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { useApiRequest } from '../../../hooks/useApi';
 import { useInstanceId } from '../../../hooks/useCurrentInstance';
 import {
   getProfileApi, updateProfileApi,
-  type CoachingUserProfile,
+  fetchPersonasPaginated, createPersonaApi, updatePersonaApi, deletePersonaApi,
+  type CoachingUserProfile, type CoachingPersona,
 } from '../../../api/commcoachApi';
+import { FormGeneratorTable, type ColumnConfig } from '../../../components/FormGenerator/FormGeneratorTable';
 import styles from './CommcoachSettingsView.module.css';
-
+import adminStyles from '../../admin/Admin.module.css';
 import { useLanguage } from '../../../providers/language/LanguageContext';
 
-export const CommcoachSettingsView: React.FC = () => {
+type SettingsTab = 'general' | 'personas';
-    const { t } = useLanguage();
 
+export const CommcoachSettingsView: React.FC = () => {
+  const { t } = useLanguage();
   const { request } = useApiRequest();
   const instanceId = useInstanceId();
 
+  const [activeTab, setActiveTab] = useState<SettingsTab>('general');
+
+  // =========================================================================
+  // Tab: Allgemein
+  // =========================================================================
   const [profile, setProfile] = useState<CoachingUserProfile | null>(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
@@ -35,7 +44,7 @@ export const CommcoachSettingsView: React.FC = () => {
 
   useEffect(() => {
     if (!instanceId) return;
-    const loadData = async () => {
+    const _loadProfile = async () => {
       setLoading(true);
       try {
         const profileData = await getProfileApi(request, instanceId);
@@ -51,7 +60,7 @@ export const CommcoachSettingsView: React.FC = () => {
         setLoading(false);
       }
     };
-    loadData();
+    _loadProfile();
   }, [request, instanceId]);
 
   const handleSave = useCallback(async () => {
@@ -73,64 +82,302 @@ export const CommcoachSettingsView: React.FC = () => {
     } finally {
       setSaving(false);
     }
-  }, [request, instanceId, reminderEnabled, reminderTime, emailEnabled]);
+  }, [request, instanceId, reminderEnabled, reminderTime, emailEnabled, t]);
 
-  if (loading) {
+  // =========================================================================
+  // Tab: Gespraechspartner (FormGeneratorTable with apiEndpoint)
+  // =========================================================================
+  const [personas, setPersonas] = useState<CoachingPersona[]>([]);
+  const [personasLoading, setPersonasLoading] = useState(false);
+  const [personaPagination, setPersonaPagination] = useState<{
+    currentPage: number; pageSize: number; totalItems: number; totalPages: number;
+  } | null>(null);
+  const [showCreatePersona, setShowCreatePersona] = useState(false);
+  const [editingPersona, setEditingPersona] = useState<CoachingPersona | null>(null);
+  const [personaForm, setPersonaForm] = useState({ label: '', description: '', gender: '' });
+  const [personaSaving, setPersonaSaving] = useState(false);
+  const [personaError, setPersonaError] = useState<string | null>(null);
+
+  const personaApiEndpoint = instanceId ? `/api/commcoach/${instanceId}/personas` : undefined;
+
+  const _refetchPersonas = useCallback(async (params?: any) => {
+    if (!instanceId) return;
+    setPersonasLoading(true);
+    try {
+      const data = await fetchPersonasPaginated(request, instanceId, params);
+      const items = data.items || data.personas || [];
+      setPersonas(items);
+      if (data.pagination) {
+        setPersonaPagination(data.pagination);
+      } else {
+        setPersonaPagination(null);
+      }
+    } catch (err: any) {
+      setPersonaError(err.message || 'Fehler beim Laden');
+      setPersonas([]);
+    } finally {
+      setPersonasLoading(false);
+    }
+  }, [request, instanceId]);
+
+  useEffect(() => {
+    if (activeTab === 'personas' && instanceId) {
+      _refetchPersonas({ page: 1, pageSize: 50 });
+    }
+  }, [activeTab, instanceId, _refetchPersonas]);
+
+  const personaColumns: ColumnConfig[] = useMemo(() => [
+    { key: 'label', label: t('Name'), minWidth: 160, sortable: true, searchable: true },
+    { key: 'description', label: t('Beschreibung'), minWidth: 250 },
+    {
+      key: 'gender', label: t('Geschlecht'), width: 100, sortable: true,
+      formatter: (v: string) => v === 'f' ? t('Weiblich') : v === 'm' ? t('Maennlich') : '-',
+    },
+    {
+      key: 'category', label: t('Typ'), width: 100, sortable: true, filterable: true,
+      formatter: (v: string) => v === 'builtin' ? t('System') : t('Eigene'),
+      filterOptions: ['builtin', 'custom'],
+      filterLabelResolver: (v: string) => v === 'builtin' ? t('System') : t('Eigene'),
+    },
+    {
+      key: 'isActive', label: t('Aktiv'), width: 70, sortable: true, type: 'boolean' as any,
+    },
+  ], [t]);
+
+  const _handleCreatePersona = useCallback(async () => {
+    if (!instanceId || !personaForm.label.trim()) return;
+    setPersonaSaving(true);
+    setPersonaError(null);
+    try {
+      await createPersonaApi(request, instanceId, {
+        label: personaForm.label.trim(),
+        description: personaForm.description.trim(),
+        gender: personaForm.gender || undefined,
+      });
+      setPersonaForm({ label: '', description: '', gender: '' });
+      setShowCreatePersona(false);
+      await _refetchPersonas({ page: 1, pageSize: 50 });
+    } catch (err: any) {
+      setPersonaError(err.message || 'Fehler beim Erstellen');
+    } finally {
+      setPersonaSaving(false);
+    }
+  }, [request, instanceId, personaForm, _refetchPersonas]);
+
+  const _handleUpdatePersona = useCallback(async () => {
+    if (!instanceId || !editingPersona) return;
+    setPersonaSaving(true);
+    setPersonaError(null);
+    try {
+      await updatePersonaApi(request, instanceId, editingPersona.id, {
+        label: personaForm.label.trim() || undefined,
+        description: personaForm.description.trim() || undefined,
+        gender: personaForm.gender || undefined,
+      });
+      setEditingPersona(null);
+      setPersonaForm({ label: '', description: '', gender: '' });
+      await _refetchPersonas({ page: 1, pageSize: 50 });
+    } catch (err: any) {
+      setPersonaError(err.message || 'Fehler beim Speichern');
+    } finally {
+      setPersonaSaving(false);
+    }
+  }, [request, instanceId, editingPersona, personaForm, _refetchPersonas]);
+
+  const _handleDeletePersona = useCallback(async (itemId: string): Promise<boolean> => {
+    if (!instanceId) return false;
+    try {
+      await deletePersonaApi(request, instanceId, itemId);
+      return true;
+    } catch (err: any) {
+      setPersonaError(err.message || 'Fehler beim Loeschen');
+      return false;
+    }
+  }, [request, instanceId]);
+
+  const _handleEditClick = useCallback((row: CoachingPersona) => {
+    setEditingPersona(row);
+    setPersonaForm({ label: row.label, description: row.description, gender: row.gender || '' });
+  }, []);
+
+  const _handleInlineToggleActive = useCallback(async (row: CoachingPersona, _field: string, newValue: any) => {
+    if (!instanceId || row.category === 'builtin') return;
+    try {
+      await updatePersonaApi(request, instanceId, row.id, { isActive: newValue });
+      setPersonas(prev => prev.map(p => p.id === row.id ? { ...p, isActive: newValue } : p));
+    } catch {}
+  }, [request, instanceId]);
+
+  const personaHookData = useMemo(() => ({
+    refetch: _refetchPersonas,
+    pagination: personaPagination,
+    handleDelete: _handleDeletePersona,
+  }), [_refetchPersonas, personaPagination, _handleDeletePersona]);
+
+  // =========================================================================
+  // Render
+  // =========================================================================
+  if (loading && activeTab === 'general') {
     return <div className={styles.loading}>{t('Einstellungen werden geladen')}</div>;
   }
 
+  const isPersonasTab = activeTab === 'personas';
+
   return (
-    <div className={styles.settings}>
+    <div className={isPersonasTab ? `${adminStyles.adminPage} ${adminStyles.adminPageFill}` : styles.settings}>
-      {error && <div className={styles.error}>{error}</div>}
+      {/* Tab Bar */}
-      {success && <div className={styles.success}>{success}</div>}
+      <div className={styles.tabBar} style={{ flexShrink: 0 }}>
-
+        <button
-      <div className={styles.section}>
+          className={`${styles.tab} ${activeTab === 'general' ? styles.tabActive : ''}`}
-        <h3 className={styles.sectionTitle}>{t('Stimme/Sprache')}</h3>
+          onClick={() => setActiveTab('general')}
-        <p style={{ fontSize: '0.85rem', color: 'var(--text-secondary, #888)', margin: '0 0 0.5rem' }}>
+        >{t('Allgemein')}</button>
-          {t('Stimme und Sprache werden zentral in den Benutzereinstellungen konfiguriert.')}
+        <button
-        </p>
+          className={`${styles.tab} ${activeTab === 'personas' ? styles.tabActive : ''}`}
-        <Link to="/settings" onClick={() => {}} style={{ fontSize: '0.85rem', color: 'var(--primary-color, #2563eb)' }}>
+          onClick={() => setActiveTab('personas')}
-          {t('Benutzereinstellungen öffnen (Tab "Stimme & Sprache")')}
+        >{t('Gespraechspartner')}</button>
-        </Link>
       </div>
 
-      <div className={styles.section}>
+      {/* Tab: Allgemein */}
-        <h3 className={styles.sectionTitle}>{t('Erinnerungen')}</h3>
+      {activeTab === 'general' && (
-        <div className={styles.field}>
+        <>
-          <label className={styles.checkboxLabel}>
+          {error && <div className={styles.error}>{error}</div>}
-            <input type="checkbox" checked={reminderEnabled} onChange={e => setReminderEnabled(e.target.checked)} />
+          {success && <div className={styles.success}>{success}</div>}
-            {t('Tägliche Coaching-Erinnerung per E-Mail')}
-          </label>
-        </div>
-        {reminderEnabled && (
-          <div className={styles.field}>
-            <label className={styles.label}>{t('Uhrzeit')}</label>
-            <input type="time" className={styles.input} value={reminderTime} onChange={e => setReminderTime(e.target.value)} />
-          </div>
-        )}
-        <div className={styles.field}>
-          <label className={styles.checkboxLabel}>
-            <input type="checkbox" checked={emailEnabled} onChange={e => setEmailEnabled(e.target.checked)} />
-            {t('Session-Zusammenfassung per E-Mail senden')}
-          </label>
-        </div>
-      </div>
 
-      {profile && (
+          <div className={styles.section}>
-        <div className={styles.section}>
+            <h3 className={styles.sectionTitle}>{t('Stimme/Sprache')}</h3>
-          <h3 className={styles.sectionTitle}>{t('Statistik')}</h3>
+            <p style={{ fontSize: '0.85rem', color: 'var(--text-secondary, #888)', margin: '0 0 0.5rem' }}>
-          <div className={styles.statsGrid}>
+              {t('Stimme und Sprache werden zentral in den Benutzereinstellungen konfiguriert.')}
-            <div className={styles.statItem}><span className={styles.statValue}>{profile.totalSessions}</span><span className={styles.statLabel}>{t('Sessions gesamt')}</span></div>
+            </p>
-            <div className={styles.statItem}><span className={styles.statValue}>{profile.totalMinutes}</span><span className={styles.statLabel}>{t('Minuten gesamt')}</span></div>
+            <Link to="/settings" style={{ fontSize: '0.85rem', color: 'var(--primary-color, #2563eb)' }}>
-            <div className={styles.statItem}><span className={styles.statValue}>{profile.streakDays}</span><span className={styles.statLabel}>{t('Aktueller Streak')}</span></div>
+              {t('Benutzereinstellungen oeffnen (Tab "Stimme & Sprache")')}
-            <div className={styles.statItem}><span className={styles.statValue}>{profile.longestStreak}</span><span className={styles.statLabel}>{t('Längster Streak')}</span></div>
+            </Link>
           </div>
-        </div>
+
+          <div className={styles.section}>
+            <h3 className={styles.sectionTitle}>{t('Erinnerungen')}</h3>
+            <div className={styles.field}>
+              <label className={styles.checkboxLabel}>
+                <input type="checkbox" checked={reminderEnabled} onChange={e => setReminderEnabled(e.target.checked)} />
+                {t('Taegliche Coaching-Erinnerung per E-Mail')}
+              </label>
+            </div>
+            {reminderEnabled && (
+              <div className={styles.field}>
+                <label className={styles.label}>{t('Uhrzeit')}</label>
+                <input type="time" className={styles.input} value={reminderTime} onChange={e => setReminderTime(e.target.value)} />
+              </div>
+            )}
+            <div className={styles.field}>
+              <label className={styles.checkboxLabel}>
+                <input type="checkbox" checked={emailEnabled} onChange={e => setEmailEnabled(e.target.checked)} />
+                {t('Session-Zusammenfassung per E-Mail senden')}
+              </label>
+            </div>
+          </div>
+
+          <button className={styles.saveBtn} onClick={handleSave} disabled={saving}>
+            {saving ? t('speichern') : t('Einstellungen speichern')}
+          </button>
+        </>
       )}
 
-      <button className={styles.saveBtn} onClick={handleSave} disabled={saving}>
+      {/* Tab: Gespraechspartner */}
-        {saving ? t('speichern') : t('Einstellungen speichern')}
+      {activeTab === 'personas' && (
-      </button>
+        <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, width: '100%' }}>
+          {personaError && <div className={styles.error} style={{ flexShrink: 0 }}>{personaError}</div>}
+
+          <div className={styles.personasHeader} style={{ flexShrink: 0 }}>
+            <h3 className={styles.sectionTitle}>{t('Gespraechspartner verwalten')}</h3>
+            <button className={styles.saveBtn} style={{ width: 'auto', padding: '0.4rem 1rem' }} onClick={() => {
+              setShowCreatePersona(true);
+              setPersonaForm({ label: '', description: '', gender: '' });
+            }}>
+              {t('+ Neuer Gespraechspartner')}
+            </button>
+          </div>
+
+          <p style={{ fontSize: '0.85rem', color: 'var(--text-secondary, #888)', margin: '0 0 1rem', flexShrink: 0 }}>
+            {t('System-Personas koennen nicht bearbeitet oder geloescht werden. Eigene Personas koennen pro Modul zugeordnet werden.')}
+          </p>
+
+          <div className={adminStyles.tableContainer}>
+          <FormGeneratorTable
+            data={personas}
+            columns={personaColumns}
+            apiEndpoint={personaApiEndpoint}
+            loading={personasLoading}
+            pagination={true}
+            pageSize={50}
+            searchable={true}
+            filterable={true}
+            sortable={true}
+            selectable={false}
+            inlineEditable={true}
+            onInlineUpdate={_handleInlineToggleActive}
+            actionButtons={[
+              {
+                type: 'edit' as const,
+                onAction: _handleEditClick,
+                title: t('Bearbeiten'),
+                visible: (row: CoachingPersona) => row.category !== 'builtin',
+              },
+              {
+                type: 'delete' as const,
+                title: t('Loeschen'),
+                visible: (row: CoachingPersona) => row.category !== 'builtin',
+              },
+            ]}
+            hookData={personaHookData}
+            emptyMessage={t('Keine Gespraechspartner vorhanden')}
+          />
+          </div>
+
+          {/* Create / Edit Modal */}
+          {(showCreatePersona || editingPersona) && (
+            <div className={styles.modalOverlay}>
+              <div className={styles.modal}>
+                <div className={styles.modalHeader}>
+                  <h3>{editingPersona ? t('Gespraechspartner bearbeiten') : t('Neuer Gespraechspartner')}</h3>
+                  <button className={styles.modalClose} onClick={() => { setShowCreatePersona(false); setEditingPersona(null); }}>x</button>
+                </div>
+                <div className={styles.modalBody}>
+                  <div className={styles.field}>
+                    <label className={styles.label}>{t('Name')}</label>
+                    <input className={styles.input} value={personaForm.label}
+                      onChange={e => setPersonaForm(f => ({ ...f, label: e.target.value }))}
+                      placeholder={t('z.B. Kritischer Investor')} />
+                  </div>
+                  <div className={styles.field}>
+                    <label className={styles.label}>{t('Beschreibung / Rollenbeschreibung')}</label>
+                    <textarea className={styles.textarea} rows={5} value={personaForm.description}
+                      onChange={e => setPersonaForm(f => ({ ...f, description: e.target.value }))}
+                      placeholder={t('Detaillierte Beschreibung der Rolle und des Verhaltens...')} />
+                  </div>
+                  <div className={styles.field}>
+                    <label className={styles.label}>{t('Geschlecht')}</label>
+                    <select className={styles.select} value={personaForm.gender}
+                      onChange={e => setPersonaForm(f => ({ ...f, gender: e.target.value }))}>
+                      <option value="">{t('Nicht angegeben')}</option>
+                      <option value="f">{t('Weiblich')}</option>
+                      <option value="m">{t('Maennlich')}</option>
+                    </select>
+                  </div>
+                </div>
+                <div className={styles.modalFooter}>
+                  <button className={styles.btnSecondary} onClick={() => { setShowCreatePersona(false); setEditingPersona(null); }}>
+                    {t('Abbrechen')}
+                  </button>
+                  <button className={styles.saveBtn} style={{ width: 'auto', padding: '0.4rem 1rem' }}
+                    disabled={personaSaving || !personaForm.label.trim()}
+                    onClick={editingPersona ? _handleUpdatePersona : _handleCreatePersona}>
+                    {personaSaving ? t('Speichern...') : editingPersona ? t('Speichern') : t('Erstellen')}
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 };

src/pages/views/commcoach/index.ts

@@ -1,3 +1,6 @@
 export { CommcoachDashboardView } from './CommcoachDashboardView';
+export { CommcoachAssistantView } from './CommcoachAssistantView';
+export { CommcoachModulesView } from './CommcoachModulesView';
+export { CommcoachSessionView } from './CommcoachSessionView';
 export { CommcoachDossierView } from './CommcoachDossierView';
 export { CommcoachSettingsView } from './CommcoachSettingsView';

src/pages/views/teamsbot/Teamsbot.module.css

@@ -436,7 +436,7 @@
 
 .udbSidebar {
   width: 280px;
-  min-width: 280px;
+  min-width: 180px;
   border: 1px solid var(--border-color, #e0e0e0);
   border-radius: 8px;
   display: flex;
@@ -444,7 +444,7 @@
   background: var(--bg-card, #fff);
   overflow: hidden;
   position: relative;
-  transition: width 0.2s, min-width 0.2s;
+  flex-shrink: 0;
 }
 
 .udbSidebarCollapsed {
@@ -452,6 +452,20 @@
   min-width: 36px;
 }
 
+.udbResizeHandle {
+  width: 5px;
+  flex-shrink: 0;
+  cursor: col-resize;
+  background: transparent;
+  transition: background 0.15s;
+  z-index: 3;
+}
+
+.udbResizeHandle:hover,
+.udbResizeHandle:active {
+  background: var(--accent-color, #4a90d9);
+}
+
 .udbToggle {
   position: absolute;
   top: 8px;
@@ -1303,3 +1317,340 @@
 .spinner {
   animation: spin 1s linear infinite;
 }
+
+/* ============================================================================
+   Agent Status Bubble + Stats Cards + Module Views (Greenfield IA)
+   ============================================================================ */
+
+.agentStatusBubble {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: rgba(74, 144, 217, 0.08);
+  border-radius: 8px;
+  margin: 0.5rem 1rem;
+  font-size: 0.85rem;
+  animation: agentPulse 2s ease-in-out infinite;
+}
+
+@keyframes agentPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+.agentStatusDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--primary-color, #4A90D9);
+  animation: agentPulse 1s ease-in-out infinite;
+}
+
+.statsCards {
+  display: flex;
+  gap: 1rem;
+  padding: 0.5rem 1rem;
+  flex-wrap: wrap;
+}
+
+.statsCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.75rem 1.25rem;
+  background: var(--surface-color, #f5f5f5);
+  border-radius: 8px;
+  min-width: 100px;
+}
+
+.statsValue {
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--text-primary, #fff);
+}
+
+.statsLabel {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #888);
+  margin-top: 0.25rem;
+}
+
+.assistantContainer,
+.modulesContainer {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.wizardHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.stepIndicator {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.stepDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--border-color, #ccc);
+}
+
+.stepActive {
+  background: var(--primary-color, #4A90D9);
+}
+
+.wizardContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.wizardStep {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.wizardInput,
+.wizardSelect {
+  padding: 0.75rem;
+  border-radius: 8px;
+  border: 1px solid var(--border-color, #ddd);
+  background: var(--bg-input, #fff);
+  color: var(--text-primary, #333);
+  font-size: 1rem;
+}
+
+.wizardTextarea {
+  padding: 0.75rem;
+  border-radius: 8px;
+  border: 1px solid var(--border-color, #ddd);
+  background: var(--bg-input, #fff);
+  color: var(--text-primary, #333);
+  font-size: 1rem;
+  resize: vertical;
+}
+
+.wizardActions {
+  display: flex;
+  gap: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-color, #e0e0e0);
+}
+
+.moduleChoice {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.modulesHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.modulesList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.moduleCard {
+  background: var(--bg-card, #fff);
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--border-color, #e0e0e0);
+}
+
+.moduleExpanded {
+  border-color: var(--primary-color, #4A90D9);
+}
+
+.moduleRow {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+}
+
+.moduleRow:hover {
+  background: var(--bg-hover, #f5f5f5);
+}
+
+.moduleType {
+  font-size: 0.75rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  background: rgba(74, 144, 217, 0.1);
+  color: var(--primary-color, #4A90D9);
+  white-space: nowrap;
+}
+
+.moduleTitle {
+  flex: 1;
+  font-weight: 500;
+}
+
+.moduleStatus {
+  font-size: 0.8rem;
+  color: var(--text-secondary, #666);
+}
+
+.moduleActions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.moduleSessionsList {
+  padding: 0.5rem 1rem 1rem 2rem;
+  border-top: 1px solid var(--border-color, #e0e0e0);
+}
+
+.sessionRow {
+  display: flex;
+  gap: 1rem;
+  padding: 0.4rem 0;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.sessionRow:hover {
+  color: var(--primary-color, #4A90D9);
+}
+
+.sessionStatus {
+  font-size: 0.8rem;
+  color: var(--text-secondary, #666);
+}
+
+.noSessions {
+  color: var(--text-secondary, #666);
+  font-style: italic;
+  font-size: 0.9rem;
+}
+
+.confirmOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.confirmDialog,
+.editDialog {
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 12px;
+  padding: 1.5rem;
+  max-width: 400px;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+}
+
+.confirmActions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+}
+
+.confirmSummary {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: var(--surface-color, #f5f5f5);
+  border-radius: 8px;
+}
+
+.wizardHint {
+  color: var(--text-secondary, #666);
+  font-size: 0.9rem;
+}
+
+.errorBanner {
+  background: rgba(241, 76, 76, 0.1);
+  color: #f14c4c;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+}
+
+.btnPrimary {
+  padding: 0.6rem 1.2rem;
+  border-radius: 8px;
+  border: none;
+  background: var(--primary-color, #4A90D9);
+  color: #fff;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.btnPrimary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btnSecondary {
+  padding: 0.6rem 1.2rem;
+  border-radius: 8px;
+  border: 1px solid var(--border-color, #ddd);
+  background: transparent;
+  color: var(--text-primary, #333);
+  cursor: pointer;
+}
+
+.btnDanger {
+  padding: 0.6rem 1.2rem;
+  border-radius: 8px;
+  border: none;
+  background: #f14c4c;
+  color: #fff;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.btnSmall {
+  padding: 0.3rem 0.7rem;
+  border-radius: 4px;
+  border: 1px solid var(--border-color, #ddd);
+  background: transparent;
+  color: var(--text-primary, #333);
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.btnSmallDanger {
+  padding: 0.3rem 0.7rem;
+  border-radius: 4px;
+  border: 1px solid #f14c4c;
+  background: transparent;
+  color: #f14c4c;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  color: var(--text-secondary, #666);
+}

src/pages/views/teamsbot/TeamsbotAssistantView.tsx

@@ -0,0 +1,190 @@
+/**
+ * TeamsBot Assistant View
+ *
+ * Wizard: Select/create module → Meeting link → Bot selection → "Start bot"
+ */
+import React, { useState, useEffect, useCallback } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
+import * as teamsbotApi from '../../../api/teamsbotApi';
+import { useLanguage } from '../../../providers/language/LanguageContext';
+import styles from './Teamsbot.module.css';
+
+type WizardStep = 'module' | 'meeting' | 'bot' | 'confirm';
+const STEPS: WizardStep[] = ['module', 'meeting', 'bot', 'confirm'];
+
+export const TeamsbotAssistantView: React.FC = () => {
+  const { t } = useLanguage();
+  const { instance, mandateId } = useCurrentInstance();
+  const instanceId = instance?.id || '';
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const preselectedModuleId = searchParams.get('moduleId');
+
+  const [step, setStep] = useState<WizardStep>(preselectedModuleId ? 'meeting' : 'module');
+  const [modules, setModules] = useState<any[]>([]);
+  const [selectedModuleId, setSelectedModuleId] = useState<string | null>(preselectedModuleId);
+  const [newModuleTitle, setNewModuleTitle] = useState('');
+  const [createNewModule, setCreateNewModule] = useState(false);
+  const [meetingLink, setMeetingLink] = useState('');
+  const [botName, setBotName] = useState('AI Assistant');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const stepIdx = STEPS.indexOf(step);
+
+  const _loadModules = useCallback(async () => {
+    if (!instanceId) return;
+    try {
+      const result = await teamsbotApi.listModules(instanceId);
+      setModules(result || []);
+    } catch (err) {
+      console.error('Failed to load modules:', err);
+    }
+  }, [instanceId]);
+
+  useEffect(() => { _loadModules(); }, [_loadModules]);
+
+  const _handleNext = () => {
+    const nextIdx = stepIdx + 1;
+    if (nextIdx < STEPS.length) setStep(STEPS[nextIdx]);
+  };
+
+  const _handleBack = () => {
+    const prevIdx = stepIdx - 1;
+    if (prevIdx >= 0) setStep(STEPS[prevIdx]);
+  };
+
+  const _handleStart = async () => {
+    if (!meetingLink.trim()) {
+      setError(t('Meeting-Link erforderlich'));
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      let moduleId = selectedModuleId;
+      if (createNewModule && newModuleTitle.trim()) {
+        const mod = await teamsbotApi.createModule(instanceId, { title: newModuleTitle.trim() });
+        moduleId = mod.id;
+      }
+
+      const session = await teamsbotApi.startSession(instanceId, {
+        meetingLink: meetingLink.trim(),
+        botName,
+        moduleId: moduleId || undefined,
+      } as any);
+
+      navigate(`/mandates/${mandateId}/teamsbot/${instanceId}/sessions?sessionId=${session.sessionId || session.id}`);
+    } catch (err: any) {
+      setError(err?.message || t('Fehler beim Starten'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className={styles.assistantContainer}>
+      <div className={styles.wizardHeader}>
+        <h2>{t('Neues Meeting starten')}</h2>
+        <div className={styles.stepIndicator}>
+          {STEPS.map((s, i) => (
+            <div key={s} className={`${styles.stepDot} ${i <= stepIdx ? styles.stepActive : ''}`} />
+          ))}
+        </div>
+      </div>
+
+      {error && <div className={styles.errorBanner}>{error}</div>}
+
+      <div className={styles.wizardContent}>
+        {step === 'module' && (
+          <div className={styles.wizardStep}>
+            <h3>{t('Meeting-Modul wählen')}</h3>
+            <div className={styles.moduleChoice}>
+              <label>
+                <input type="radio" checked={!createNewModule} onChange={() => setCreateNewModule(false)} />
+                {t('Bestehendes Modul')}
+              </label>
+              {!createNewModule && (
+                <select
+                  value={selectedModuleId || ''}
+                  onChange={e => setSelectedModuleId(e.target.value || null)}
+                  className={styles.wizardSelect}
+                >
+                  <option value="">{t('Kein Modul (Adhoc)')}</option>
+                  {modules.map(m => (
+                    <option key={m.id} value={m.id}>{m.title}</option>
+                  ))}
+                </select>
+              )}
+              <label>
+                <input type="radio" checked={createNewModule} onChange={() => setCreateNewModule(true)} />
+                {t('Neues Modul erstellen')}
+              </label>
+              {createNewModule && (
+                <input
+                  type="text"
+                  className={styles.wizardInput}
+                  placeholder={t('z.B. Weekly Standup, Q3 Review...')}
+                  value={newModuleTitle}
+                  onChange={e => setNewModuleTitle(e.target.value)}
+                />
+              )}
+            </div>
+          </div>
+        )}
+
+        {step === 'meeting' && (
+          <div className={styles.wizardStep}>
+            <h3>{t('Meeting-Link')}</h3>
+            <input
+              type="text"
+              className={styles.wizardInput}
+              placeholder="https://teams.microsoft.com/l/meetup-join/..."
+              value={meetingLink}
+              onChange={e => setMeetingLink(e.target.value)}
+              autoFocus
+            />
+          </div>
+        )}
+
+        {step === 'bot' && (
+          <div className={styles.wizardStep}>
+            <h3>{t('Bot-Name')}</h3>
+            <input
+              type="text"
+              className={styles.wizardInput}
+              value={botName}
+              onChange={e => setBotName(e.target.value)}
+            />
+          </div>
+        )}
+
+        {step === 'confirm' && (
+          <div className={styles.wizardStep}>
+            <h3>{t('Zusammenfassung')}</h3>
+            <div className={styles.confirmSummary}>
+              <div><strong>{t('Modul')}:</strong> {createNewModule ? newModuleTitle : (modules.find(m => m.id === selectedModuleId)?.title || t('Adhoc'))}</div>
+              <div><strong>{t('Meeting')}:</strong> {meetingLink}</div>
+              <div><strong>{t('Bot')}:</strong> {botName}</div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className={styles.wizardActions}>
+        {stepIdx > 0 && (
+          <button className={styles.btnSecondary} onClick={_handleBack}>{t('Zurück')}</button>
+        )}
+        <div style={{ flex: 1 }} />
+        {step !== 'confirm' ? (
+          <button className={styles.btnPrimary} onClick={_handleNext}>{t('Weiter')}</button>
+        ) : (
+          <button className={styles.btnPrimary} onClick={_handleStart} disabled={loading}>
+            {loading ? t('Starte...') : t('Bot starten')}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};

src/pages/views/teamsbot/TeamsbotDashboardView.tsx

@@ -73,14 +73,15 @@ export const TeamsbotDashboardView: React.FC = () => {
     }
   }, [joinMode, instanceId]);
 
-  // Auto-refresh: poll every 10s when there are active sessions
+  // Adaptive polling: 3s with active sessions, 30s otherwise
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
   useEffect(() => {
     const hasActiveSessions = sessions.some(s => ['pending', 'joining', 'active'].includes(s.status));
-    if (hasActiveSessions && instanceId) {
+    const interval = hasActiveSessions ? 3000 : 30000;
+    if (instanceId) {
       pollRef.current = setInterval(() => {
         teamsbotApi.listSessions(instanceId).then(r => setSessions(r.sessions || [])).catch(() => {});
-      }, 10000);
+      }, interval);
     }
     return () => { if (pollRef.current) clearInterval(pollRef.current); };
   }, [sessions, instanceId]);

src/pages/views/teamsbot/TeamsbotModulesView.tsx

@@ -0,0 +1,189 @@
+/**
+ * TeamsBot Modules View
+ *
+ * CRUD list of MeetingModules with expandable session lists per module.
+ */
+import React, { useState, useEffect, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
+import * as teamsbotApi from '../../../api/teamsbotApi';
+import { useLanguage } from '../../../providers/language/LanguageContext';
+import styles from './Teamsbot.module.css';
+
+const SERIES_TYPE_LABELS: Record<string, string> = {
+  weekly: 'Wöchentlich',
+  biweekly: 'Zweiwöchentlich',
+  monthly: 'Monatlich',
+  adhoc: 'Adhoc',
+  project: 'Projekt',
+};
+
+const STATUS_LABELS: Record<string, string> = {
+  active: 'Aktiv',
+  archived: 'Archiviert',
+  completed: 'Abgeschlossen',
+};
+
+export const TeamsbotModulesView: React.FC = () => {
+  const { t } = useLanguage();
+  const { instance, mandateId } = useCurrentInstance();
+  const instanceId = instance?.id || '';
+  const navigate = useNavigate();
+
+  const [modules, setModules] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [moduleSessions, setModuleSessions] = useState<Record<string, any[]>>({});
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+  const [editingModule, setEditingModule] = useState<any | null>(null);
+
+  const _loadModules = useCallback(async () => {
+    if (!instanceId) return;
+    setLoading(true);
+    try {
+      const result = await teamsbotApi.listModules(instanceId);
+      setModules(result || []);
+    } catch (err) {
+      console.error('Failed to load modules:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [instanceId]);
+
+  useEffect(() => { _loadModules(); }, [_loadModules]);
+
+  const _loadModuleSessions = useCallback(async (moduleId: string) => {
+    if (!instanceId) return;
+    try {
+      const detail = await teamsbotApi.getModuleDetail(instanceId, moduleId);
+      setModuleSessions(prev => ({ ...prev, [moduleId]: detail?.sessions || [] }));
+    } catch (err) {
+      console.error('Failed to load module sessions:', err);
+    }
+  }, [instanceId]);
+
+  const _toggleExpand = (moduleId: string) => {
+    if (expandedId === moduleId) {
+      setExpandedId(null);
+    } else {
+      setExpandedId(moduleId);
+      if (!moduleSessions[moduleId]) _loadModuleSessions(moduleId);
+    }
+  };
+
+  const _handleDelete = async (moduleId: string) => {
+    try {
+      await teamsbotApi.deleteModule(instanceId, moduleId);
+      setDeleteConfirm(null);
+      _loadModules();
+    } catch (err) {
+      console.error('Delete failed:', err);
+    }
+  };
+
+  const _handleUpdate = async (moduleId: string, updates: any) => {
+    try {
+      await teamsbotApi.updateModule(instanceId, moduleId, updates);
+      setEditingModule(null);
+      _loadModules();
+    } catch (err) {
+      console.error('Update failed:', err);
+    }
+  };
+
+  return (
+    <div className={styles.modulesContainer}>
+      <div className={styles.modulesHeader}>
+        <h2>{t('Meeting-Module')}</h2>
+        <button
+          className={styles.btnPrimary}
+          onClick={() => navigate(`/mandates/${mandateId}/teamsbot/${instanceId}/assistant`)}
+        >
+          {t('Neues Modul')}
+        </button>
+      </div>
+
+      {loading && <div className={styles.loading}>{t('Laden...')}</div>}
+
+      <div className={styles.modulesList}>
+        {modules.map(mod => (
+          <div key={mod.id} className={`${styles.moduleCard} ${expandedId === mod.id ? styles.moduleExpanded : ''}`}>
+            <div className={styles.moduleRow} onClick={() => _toggleExpand(mod.id)}>
+              <span className={styles.moduleType}>{t(SERIES_TYPE_LABELS[mod.seriesType] || mod.seriesType)}</span>
+              <span className={styles.moduleTitle}>{mod.title}</span>
+              <span className={styles.moduleStatus}>{t(STATUS_LABELS[mod.status] || mod.status)}</span>
+              <div className={styles.moduleActions}>
+                <button className={styles.btnPrimary} style={{ padding: '0.3rem 0.7rem', fontSize: '0.8rem' }} onClick={e => {
+                  e.stopPropagation();
+                  navigate(`/mandates/${mandateId}/teamsbot/${instanceId}/assistant?moduleId=${mod.id}`);
+                }}>{t('Meeting starten')}</button>
+                <button className={styles.btnSmall} onClick={e => { e.stopPropagation(); setEditingModule(mod); }}>{t('Bearbeiten')}</button>
+                <button className={styles.btnSmallDanger} onClick={e => { e.stopPropagation(); setDeleteConfirm(mod.id); }}>{t('Löschen')}</button>
+              </div>
+            </div>
+
+            {expandedId === mod.id && (
+              <div className={styles.moduleSessionsList}>
+                {(moduleSessions[mod.id] || []).length === 0 ? (
+                  <p className={styles.noSessions}>{t('Keine Sitzungen')}</p>
+                ) : (
+                  (moduleSessions[mod.id] || []).map((sess: any) => (
+                    <div
+                      key={sess.id}
+                      className={styles.sessionRow}
+                      onClick={() => navigate(`/mandates/${mandateId}/teamsbot/${instanceId}/sessions?sessionId=${sess.id}`)}
+                    >
+                      <span>{sess.botName || 'Bot'}</span>
+                      <span className={styles.sessionStatus}>{sess.status}</span>
+                      <span>{sess.startedAt ? new Date(sess.startedAt * 1000).toLocaleDateString() : '-'}</span>
+                    </div>
+                  ))
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {deleteConfirm && (
+        <div className={styles.confirmOverlay}>
+          <div className={styles.confirmDialog}>
+            <p>{t('Modul wirklich löschen? Sessions werden dem Modul entkoppelt.')}</p>
+            <div className={styles.confirmActions}>
+              <button className={styles.btnSecondary} onClick={() => setDeleteConfirm(null)}>{t('Abbrechen')}</button>
+              <button className={styles.btnDanger} onClick={() => _handleDelete(deleteConfirm)}>{t('Löschen')}</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {editingModule && (
+        <div className={styles.confirmOverlay}>
+          <div className={styles.editDialog}>
+            <h3>{t('Modul bearbeiten')}</h3>
+            <input
+              type="text"
+              defaultValue={editingModule.title}
+              className={styles.wizardInput}
+              onBlur={e => setEditingModule({ ...editingModule, title: e.target.value })}
+            />
+            <textarea
+              defaultValue={editingModule.goals || ''}
+              className={styles.wizardTextarea}
+              placeholder={t('Ziele')}
+              rows={3}
+              onBlur={e => setEditingModule({ ...editingModule, goals: e.target.value })}
+            />
+            <div className={styles.confirmActions}>
+              <button className={styles.btnSecondary} onClick={() => setEditingModule(null)}>{t('Abbrechen')}</button>
+              <button className={styles.btnPrimary} onClick={() => _handleUpdate(editingModule.id, {
+                title: editingModule.title,
+                goals: editingModule.goals,
+              })}>{t('Speichern')}</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

src/pages/views/teamsbot/TeamsbotSessionView.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams, useNavigate } from 'react-router-dom';
 import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
 import * as teamsbotApi from '../../../api/teamsbotApi';
 import type {
@@ -28,8 +28,9 @@ import { useLanguage } from '../../../providers/language/LanguageContext';
  */
 export const TeamsbotSessionView: React.FC = () => {
     const { t } = useLanguage();
+  const navigate = useNavigate();
 
-  const { instance } = useCurrentInstance();
+  const { instance, mandateId } = useCurrentInstance();
   const instanceId = instance?.id || '';
   const [searchParams, setSearchParams] = useSearchParams();
   const sessionId = searchParams.get('sessionId') || '';
@@ -56,6 +57,12 @@ export const TeamsbotSessionView: React.FC = () => {
     timestamp: string;
   }>>([]);
 
+  const [agentStatus, setAgentStatus] = useState<{ toolName?: string; status?: string; reason?: string } | null>(null);
+  const agentStatusTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [sessionStats, setSessionStats] = useState<any>(null);
+  const [reconnectTick, setReconnectTick] = useState(0);
+  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   // Director Prompt panel state
   const [directorPrompts, setDirectorPrompts] = useState<DirectorPrompt[]>([]);
   const [directorText, setDirectorText] = useState('');
@@ -76,6 +83,8 @@ export const TeamsbotSessionView: React.FC = () => {
   // UDB Sidebar state
   const [udbCollapsed, setUdbCollapsed] = useState(false);
   const [udbTab, setUdbTab] = useState<UdbTab>('files');
+  const [udbWidth, setUdbWidth] = useState(280);
+  const udbResizing = useRef(false);
   const _udbContext: UdbContext | null = instanceId
     ? { instanceId, featureInstanceId: instanceId }
     : null;
@@ -156,22 +165,21 @@ export const TeamsbotSessionView: React.FC = () => {
     };
   }, [instanceId, sessionId]);
 
-  // SSE Live Stream - connect once per session, don't re-create on status changes.
+  // SSE Live Stream with reconnect support.
-  // We deliberately depend ONLY on (instanceId, sessionId), not on session.status,
+  // Depends on (instanceId, sessionId, reconnectTick) -- reconnectTick is bumped
-  // so transient status transitions (pending -> joining -> active) don't tear down
+  // to force reconnect after connection loss without changing sessionId.
-  // and rebuild the EventSource (which used to flicker botConnected and spawn
-  // multiple parallel /stream connections to the gateway).
   const sseSessionRef = useRef<string | null>(null);
   const sessionStatusRef = useRef<string | undefined>(session?.status);
   sessionStatusRef.current = session?.status;
   useEffect(() => {
     if (!instanceId || !sessionId) return;
-    // Avoid reconnecting if already streaming this session
+    // Avoid reconnecting if already streaming this session (unless reconnectTick changed)
-    if (sseSessionRef.current === sessionId && eventSourceRef.current) return;
+    if (sseSessionRef.current === sessionId && eventSourceRef.current && eventSourceRef.current.readyState !== EventSource.CLOSED) return;
     // Don't open a stream for sessions that are known to already be terminal.
     const initialStatus = sessionStatusRef.current;
     if (initialStatus && !['active', 'joining', 'pending'].includes(initialStatus)) return;
 
+    if (reconnectTimerRef.current) { clearTimeout(reconnectTimerRef.current); reconnectTimerRef.current = null; }
     eventSourceRef.current?.close();
     sseSessionRef.current = sessionId;
 
@@ -189,7 +197,10 @@ export const TeamsbotSessionView: React.FC = () => {
 
         switch (evType) {
           case 'sessionState':
-            if (sseEvent.data) setSession(prev => prev ? { ...prev, ...sseEvent.data } : sseEvent.data);
+            if (sseEvent.data) {
+              setSession(prev => prev ? { ...prev, ...sseEvent.data } : sseEvent.data);
+              if (sseEvent.data.stats) setSessionStats(sseEvent.data.stats);
+            }
             break;
 
           case 'transcript': {
@@ -289,7 +300,15 @@ export const TeamsbotSessionView: React.FC = () => {
 
           case 'agentRun': {
             const data = sseEvent.data || {};
-            _dlog('AGENT', `${data.status || ''} ${data.reason || ''}`.trim());
+            _dlog('AGENT', `${data.status || ''} ${data.toolName || ''} ${data.reason || ''}`.trim());
+            if (data.status === 'started' || data.status === 'running') {
+              setAgentStatus({ toolName: data.toolName, status: data.status, reason: data.reason });
+              if (agentStatusTimerRef.current) clearTimeout(agentStatusTimerRef.current);
+              agentStatusTimerRef.current = setTimeout(() => setAgentStatus(null), 15000);
+            } else {
+              if (agentStatusTimerRef.current) clearTimeout(agentStatusTimerRef.current);
+              agentStatusTimerRef.current = setTimeout(() => setAgentStatus(null), 2000);
+            }
             break;
           }
 
@@ -315,6 +334,17 @@ export const TeamsbotSessionView: React.FC = () => {
 
     eventSource.onerror = () => {
       setIsLive(false);
+      if (eventSource.readyState === EventSource.CLOSED) {
+        _dlog('SSE', 'connection closed, scheduling reconnect');
+        eventSourceRef.current = null;
+        sseSessionRef.current = null;
+        const status = sessionStatusRef.current;
+        if (status && ['active', 'joining', 'pending'].includes(status)) {
+          reconnectTimerRef.current = setTimeout(() => {
+            setReconnectTick(v => v + 1);
+          }, 2000);
+        }
+      }
     };
 
     return () => {
@@ -323,27 +353,36 @@ export const TeamsbotSessionView: React.FC = () => {
       sseSessionRef.current = null;
       setIsLive(false);
       setBotConnected(false);
+      if (reconnectTimerRef.current) { clearTimeout(reconnectTimerRef.current); reconnectTimerRef.current = null; }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [instanceId, sessionId]);
+  }, [instanceId, sessionId, reconnectTick]);
 
-  // Polling fallback: refresh session data every 5s when SSE is not connected
+  // Polling fallback: refresh session data every 5s when SSE is not connected.
+  // Uses isActive (boolean) instead of session object to prevent interval resets.
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
-  const isActive = useMemo(() => session && ['pending', 'joining', 'active'].includes(session.status), [session]);
+  const isActive = useMemo(() => session && ['pending', 'joining', 'active'].includes(session.status), [session?.status]);
+  const isLiveRef = useRef(isLive);
+  isLiveRef.current = isLive;
   useEffect(() => {
-    if (instanceId && sessionId && (isActive || !session)) {
+    if (!instanceId || !sessionId) return;
-      pollRef.current = setInterval(async () => {
+    if (!isActive) return;
-        if (isLive) return;
+    pollRef.current = setInterval(async () => {
-        try {
+      if (isLiveRef.current) return;
-          const result = await teamsbotApi.getSession(instanceId, sessionId);
+      try {
-          setSession(result.session);
+        const result = await teamsbotApi.getSession(instanceId, sessionId);
-          if (result.transcripts) setTranscripts(result.transcripts);
+        setSession(result.session);
-          if (result.botResponses) setBotResponses(result.botResponses);
+        if (result.transcripts) setTranscripts(result.transcripts);
-        } catch {}
+        if (result.botResponses) setBotResponses(result.botResponses);
-      }, 5000);
+        // If session became active and SSE is dead, trigger reconnect
-    }
+        const newStatus = result.session?.status;
+        if (newStatus && ['active', 'joining', 'pending'].includes(newStatus) && !eventSourceRef.current) {
+          setReconnectTick(v => v + 1);
+        }
+      } catch {}
+    }, 5000);
     return () => { if (pollRef.current) clearInterval(pollRef.current); };
-  }, [isActive, instanceId, sessionId, isLive, session]);
+  }, [isActive, instanceId, sessionId]);
 
   // Auto-scroll transcript
   useEffect(() => {
@@ -588,9 +627,19 @@ export const TeamsbotSessionView: React.FC = () => {
 
   if (loading) return <div className={styles.loading}>{t('Sitzung laden')}</div>;
   if (noSessions) return (
-    <div className={styles.emptyState || styles.loading}>
+    <div className={styles.emptyState || styles.loading} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '1rem', padding: '3rem' }}>
-      <p>{t('Keine Sitzungen vorhanden')}</p>
+      <h3>{t('Keine aktive Sitzung')}</h3>
-      <p>{t('Starte eine neue Sitzung im Dashboard.')}</p>
+      <p style={{ color: 'var(--text-secondary, #666)', textAlign: 'center', maxWidth: 400 }}>
+        {t('Starte ein neues Meeting ueber den Assistenten oder die Module-Seite.')}
+      </p>
+      <div style={{ display: 'flex', gap: '0.75rem' }}>
+        <button className={styles.btnPrimary}
+          onClick={() => navigate(`/mandates/${mandateId}/teamsbot/${instanceId}/assistant`)}
+        >{t('Zum Assistenten')}</button>
+        <button className={styles.btnSecondary}
+          onClick={() => navigate(`/mandates/${mandateId}/teamsbot/${instanceId}/modules`)}
+        >{t('Zu den Modulen')}</button>
+      </div>
     </div>
   );
   if (!session) return <div className={styles.errorBanner}>{t('Sitzung nicht gefunden')}</div>;
@@ -626,6 +675,38 @@ export const TeamsbotSessionView: React.FC = () => {
         </div>
       )}
 
+      {/* Agent Status Bubble (F-fix-2) */}
+      {agentStatus && (
+        <div className={styles.agentStatusBubble}>
+          <span className={styles.agentStatusDot} />
+          <span>{t('Agent denkt nach')}{agentStatus.toolName ? `: ${agentStatus.toolName}` : '...'}</span>
+        </div>
+      )}
+
+      {/* Stats Cards (F-fix-3) */}
+      {sessionStats && (
+        <div className={styles.statsCards}>
+          {sessionStats.talkingMinutes != null && (
+            <div className={styles.statsCard}>
+              <span className={styles.statsValue}>{Math.round(sessionStats.talkingMinutes)}</span>
+              <span className={styles.statsLabel}>{t('Sprechminuten')}</span>
+            </div>
+          )}
+          {sessionStats.botResponseCount != null && (
+            <div className={styles.statsCard}>
+              <span className={styles.statsValue}>{sessionStats.botResponseCount}</span>
+              <span className={styles.statsLabel}>{t('Bot-Antworten')}</span>
+            </div>
+          )}
+          {sessionStats.avgLatencyMs != null && (
+            <div className={styles.statsCard}>
+              <span className={styles.statsValue}>{Math.round(sessionStats.avgLatencyMs)}ms</span>
+              <span className={styles.statsLabel}>{t('Ø Latenz')}</span>
+            </div>
+          )}
+        </div>
+      )}
+
       {/* Session Header */}
       <div className={styles.sessionViewHeader}>
         <div className={styles.sessionInfo}>
@@ -648,7 +729,10 @@ export const TeamsbotSessionView: React.FC = () => {
       <div className={styles.sessionLayout}>
         {/* UDB Sidebar (Files / Sources) */}
         {_udbContext && (
-          <div className={`${styles.udbSidebar} ${udbCollapsed ? styles.udbSidebarCollapsed : ''}`}>
+          <div
+            className={`${styles.udbSidebar} ${udbCollapsed ? styles.udbSidebarCollapsed : ''}`}
+            style={udbCollapsed ? undefined : { width: udbWidth, minWidth: 180 }}
+          >
             <button
               className={styles.udbToggle}
               onClick={() => setUdbCollapsed((v) => !v)}
@@ -657,16 +741,39 @@ export const TeamsbotSessionView: React.FC = () => {
               {udbCollapsed ? '\u25B6' : '\u25C0'}
             </button>
             {!udbCollapsed && (
-              <UnifiedDataBar
+                <UnifiedDataBar
-                context={_udbContext}
+                  context={_udbContext}
-                activeTab={udbTab}
+                  activeTab={udbTab}
-                onTabChange={setUdbTab}
+                  onTabChange={setUdbTab}
-                hideTabs={['chats']}
+                  hideTabs={['chats']}
-                onFileSelect={_handleUdbFileSelect}
+                  onFileSelect={_handleUdbFileSelect}
-              />
+                />
             )}
           </div>
         )}
+        {_udbContext && !udbCollapsed && (
+          <div
+            className={styles.udbResizeHandle}
+            onMouseDown={(e) => {
+              e.preventDefault();
+              udbResizing.current = true;
+              const startX = e.clientX;
+              const startW = udbWidth;
+              const onMove = (ev: MouseEvent) => {
+                if (!udbResizing.current) return;
+                const newW = Math.max(180, Math.min(600, startW + (ev.clientX - startX)));
+                setUdbWidth(newW);
+              };
+              const onUp = () => {
+                udbResizing.current = false;
+                document.removeEventListener('mousemove', onMove);
+                document.removeEventListener('mouseup', onUp);
+              };
+              document.addEventListener('mousemove', onMove);
+              document.addEventListener('mouseup', onUp);
+            }}
+          />
+        )}
 
         {/* Main column */}
         <div className={styles.sessionMain}>

src/types/mandate.ts

@@ -247,7 +247,9 @@ export const FEATURE_REGISTRY: Record<string, FeatureConfig> = {
     icon: 'headset_mic',
     views: [
       { code: 'dashboard', label: 'Übersicht', path: 'dashboard' },
-      { code: 'sessions', label: 'Sitzungen', path: 'sessions' },
+      { code: 'assistant', label: 'Assistent', path: 'assistant' },
+      { code: 'modules', label: 'Module', path: 'modules' },
+      { code: 'sessions', label: 'Live-Session', path: 'sessions' },
       { code: 'settings', label: 'Einstellungen', path: 'settings' },
     ]
   },
@@ -280,8 +282,9 @@ export const FEATURE_REGISTRY: Record<string, FeatureConfig> = {
     icon: 'account_voice',
     views: [
       { code: 'dashboard', label: 'Dashboard', path: 'dashboard' },
-      { code: 'coaching', label: 'Coaching', path: 'coaching' },
+      { code: 'assistant', label: 'Assistent', path: 'assistant' },
-      { code: 'dossier', label: 'Dossier', path: 'dossier' },
+      { code: 'modules', label: 'Module', path: 'modules' },
+      { code: 'session', label: 'Session', path: 'session' },
       { code: 'settings', label: 'Einstellungen', path: 'settings' },
     ]
   },