From 544f36460a67bc1aea433d9ad1fa78dd5a045a96 Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@valueon.ch>
Date: Mon, 11 May 2026 21:26:24 +0200
Subject: [PATCH 01/10] google keys transferred to account poweron.center.ai

---
 public/poweron-home.html                      |   5 +-
 public/poweron-privacy.html                   |  13 +-
 public/poweron-terms.html                     |  13 +-
 src/api/teamsbotApi.ts                        |  11 +
 src/config/pageRegistry.tsx                   |   2 +
 src/hooks/useSpeechAudioCapture.ts            |  34 +-
 .../views/commcoach/useVoiceController.ts     |  11 +-
 src/pages/views/teamsbot/Teamsbot.module.css  | 223 ++++++
 .../views/teamsbot/TeamsbotAssistantView.tsx  | 194 ++++-
 .../views/teamsbot/TeamsbotDashboardView.tsx  | 708 +++++++-----------
 .../views/teamsbot/TeamsbotModulesView.tsx    | 182 ++++-
 .../views/teamsbot/TeamsbotSessionView.tsx    | 138 +++-
 src/types/mandate.ts                          |   2 +-
 13 files changed, 1050 insertions(+), 486 deletions(-)

diff --git a/public/poweron-home.html b/public/poweron-home.html
index 0a3c92a..2fb440a 100644
--- a/public/poweron-home.html
+++ b/public/poweron-home.html
@@ -185,7 +185,10 @@
         </div>
         
         <div class="footer">
-            <p>&copy; 2025 PowerOn AI Platform. All rights reserved.</p>
+            <p class="legal-meta" style="margin-bottom: 0.75rem; color: #64748b; font-size: 0.85rem;">Company &amp; legal details &middot; May 2026</p>
+            <p><strong>PowerOn AG</strong> · Birmensdorferstrasse 94 · CH-8003 Zürich · Switzerland</p>
+            <p><a href="mailto:p.motsch@poweron.swiss">p.motsch@poweron.swiss</a></p>
+            <p style="margin-top: 1rem;">&copy; 2026 PowerOn. All rights reserved.</p>
         </div>
     </div>
 </body>
diff --git a/public/poweron-privacy.html b/public/poweron-privacy.html
index 1045b30..76ef25c 100644
--- a/public/poweron-privacy.html
+++ b/public/poweron-privacy.html
@@ -140,7 +140,7 @@
         </div>
         
         <div class="last-updated">
-            <strong>Last Updated:</strong> August 2025
+            <strong>Last Updated:</strong> May 2026
         </div>
         
         <div class="content-section">
@@ -272,8 +272,13 @@
             <h2>Contact Us</h2>
             <p>If you have any questions about this Privacy Policy or our data practices, please contact us:</p>
             <div class="highlight-box">
-                <p><strong>Email:</strong> privacy@poweron-ai.com</p>
-                <p><strong>Address:</strong> PowerOn AI Platform, Privacy Team</p>
+                <p><strong>Email:</strong> <a href="mailto:p.motsch@poweron.swiss">p.motsch@poweron.swiss</a></p>
+                <p><strong>Address:</strong><br>
+                    PowerOn AG<br>
+                    Birmensdorferstrasse 94<br>
+                    CH-8003 Zürich<br>
+                    Switzerland
+                </p>
             </div>
         </div>
         
@@ -283,7 +288,7 @@
         </div>
         
         <div class="footer">
-            <p>&copy; 2025 PowerOn AI Platform. All rights reserved.</p>
+            <p>&copy; 2026 PowerOn. All rights reserved.</p>
         </div>
     </div>
 </body>
diff --git a/public/poweron-terms.html b/public/poweron-terms.html
index c9e057d..c049dbe 100644
--- a/public/poweron-terms.html
+++ b/public/poweron-terms.html
@@ -153,7 +153,7 @@
         </div>
         
         <div class="last-updated">
-            <strong>Last Updated:</strong> August 2025
+            <strong>Last Updated:</strong> May 2026
         </div>
         
         <div class="content-section">
@@ -315,8 +315,13 @@
             <h2>Contact Information</h2>
             <p>If you have any questions about these Terms of Service, please contact us:</p>
             <div class="highlight-box">
-                <p><strong>Email:</strong> legal@poweron-ai.com</p>
-                <p><strong>Address:</strong> PowerOn AI Platform, Legal Department</p>
+                <p><strong>Email:</strong> <a href="mailto:p.motsch@poweron.swiss">p.motsch@poweron.swiss</a></p>
+                <p><strong>Address:</strong><br>
+                    PowerOn AG<br>
+                    Birmensdorferstrasse 94<br>
+                    CH-8003 Zürich<br>
+                    Switzerland
+                </p>
             </div>
         </div>
         
@@ -326,7 +331,7 @@
         </div>
         
         <div class="footer">
-            <p>&copy; 2025 PowerOn AI Platform. All rights reserved.</p>
+            <p>&copy; 2026 PowerOn. All rights reserved.</p>
         </div>
     </div>
 </body>
diff --git a/src/api/teamsbotApi.ts b/src/api/teamsbotApi.ts
index 3918f7c..8f201c6 100644
--- a/src/api/teamsbotApi.ts
+++ b/src/api/teamsbotApi.ts
@@ -84,6 +84,7 @@ export interface TeamsbotSessionStats {
 export interface StartSessionRequest {
   meetingLink: string;
   botName?: string;
+  moduleId?: string;
   connectionId?: string;
   joinMode?: TeamsbotJoinMode;
   sessionContext?: string;
@@ -462,6 +463,13 @@ export function createSessionStream(instanceId: string, sessionId: string): Even
   return new EventSource(url, { withCredentials: true });
 }
 
+/** SSE dashboard stream: periodic { type: 'dashboardState', sessions, modules } */
+export function createDashboardStream(instanceId: string): EventSource {
+  const baseUrl = api.defaults.baseURL || '';
+  const url = `${baseUrl}/api/teamsbot/${instanceId}/dashboard/stream`;
+  return new EventSource(url, { withCredentials: true });
+}
+
 // =========================================================================
 // Debug Screenshots (SysAdmin only)
 // =========================================================================
@@ -592,6 +600,8 @@ export interface MeetingModule {
   defaultDirectorPrompts?: string;
   goals?: string;
   kpiTargets?: string;
+  defaultMeetingLink?: string;
+  defaultBotName?: string;
   status: string;
 }
 
@@ -602,6 +612,7 @@ export async function listModules(instanceId: string): Promise<MeetingModule[]>
 
 export async function createModule(instanceId: string, body: {
   title: string; seriesType?: string; defaultBotId?: string; goals?: string; kpiTargets?: string;
+  defaultMeetingLink?: string; defaultBotName?: string;
 }): Promise<MeetingModule> {
   const response = await api.post(`/api/teamsbot/${instanceId}/modules`, body);
   return response.data?.module;
diff --git a/src/config/pageRegistry.tsx b/src/config/pageRegistry.tsx
index d8b84c1..ea22f44 100644
--- a/src/config/pageRegistry.tsx
+++ b/src/config/pageRegistry.tsx
@@ -109,6 +109,8 @@ export const PAGE_ICONS: Record<string, React.ReactNode> = {
   
   // Feature pages - Teams Bot
   'page.feature.teamsbot.dashboard': <FaChartLine />,
+  'page.feature.teamsbot.assistant': <FaHatWizard />,
+  'page.feature.teamsbot.modules': <FaCubes />,
   'page.feature.teamsbot.sessions': <FaVideo />,
   'page.feature.teamsbot.settings': <FaCog />,
 
diff --git a/src/hooks/useSpeechAudioCapture.ts b/src/hooks/useSpeechAudioCapture.ts
index 1b6d7ac..6645289 100644
--- a/src/hooks/useSpeechAudioCapture.ts
+++ b/src/hooks/useSpeechAudioCapture.ts
@@ -21,10 +21,17 @@ export interface VoiceStreamCallbacks {
   onError?: (error: unknown) => void;
 }
 
+/** Options for the initial `open` message on the generic STT WebSocket (Google streaming). */
+export interface SttStreamOpenOptions {
+  model?: string;
+  lightweight?: boolean;
+  singleUtterance?: boolean;
+}
+
 export interface VoiceStreamApi {
   status: VoiceStreamStatus;
   interimText: string;
-  start: (language?: string) => Promise<void>;
+  start: (language?: string, sttOpenOptions?: SttStreamOpenOptions) => Promise<void>;
   stop: () => void;
 }
 
@@ -42,6 +49,7 @@ export function useVoiceStream(callbacks: VoiceStreamCallbacks): VoiceStreamApi
   const recorderRef = useRef<MediaRecorder | null>(null);
   const streamRef = useRef<MediaStream | null>(null);
   const languageRef = useRef('de-DE');
+  const sttOpenOptsRef = useRef<SttStreamOpenOptions | undefined>(undefined);
   const stoppingRef = useRef(false);
   const reconnectAttemptsRef = useRef(0);
 
@@ -94,11 +102,23 @@ export function useVoiceStream(callbacks: VoiceStreamCallbacks): VoiceStreamApi
     stoppingRef.current = false;
   }, [_stopRecorder, _closeWs, _releaseDevices, _setStatus]);
 
-  const start = useCallback(async (language?: string) => {
+  const _buildOpenPayload = useCallback(() => {
+    const o = sttOpenOptsRef.current;
+    return {
+      type: 'open' as const,
+      language: languageRef.current,
+      model: o?.model ?? 'latest_long',
+      lightweight: o?.lightweight ?? false,
+      singleUtterance: o?.singleUtterance ?? false,
+    };
+  }, []);
+
+  const start = useCallback(async (language?: string, sttOpenOptions?: SttStreamOpenOptions) => {
     if (status === 'listening' || status === 'connecting') return;
     stoppingRef.current = false;
     reconnectAttemptsRef.current = 0;
     languageRef.current = language || 'de-DE';
+    sttOpenOptsRef.current = sttOpenOptions;
     _setStatus('connecting');
 
     try {
@@ -120,7 +140,7 @@ export function useVoiceStream(callbacks: VoiceStreamCallbacks): VoiceStreamApi
 
       ws.onopen = () => {
         if (stoppingRef.current) { ws.close(); return; }
-        ws.send(JSON.stringify({ type: 'open', language: languageRef.current }));
+        ws.send(JSON.stringify(_buildOpenPayload()));
 
         const mimeType = _pickMimeType();
         const recorder = new MediaRecorder(streamRef.current!, { mimeType });
@@ -154,11 +174,15 @@ export function useVoiceStream(callbacks: VoiceStreamCallbacks): VoiceStreamApi
             cbRef.current.onFinal?.(msg.text);
           } else if (msg.type === 'error') {
             cbRef.current.onError?.(new Error(msg.message || msg.code || 'STT error'));
+          } else if (msg.type === 'end_of_single_utterance') {
+            if (!stoppingRef.current && ws.readyState === WebSocket.OPEN) {
+              ws.send(JSON.stringify(_buildOpenPayload()));
+            }
           } else if (msg.type === 'reconnect_required') {
             if (reconnectAttemptsRef.current < _MAX_RECONNECT_ATTEMPTS && !stoppingRef.current) {
               reconnectAttemptsRef.current++;
               _closeWs();
-              start(languageRef.current).catch(() => {});
+              start(languageRef.current, sttOpenOptsRef.current).catch(() => {});
             }
           }
         } catch { /* ignore parse errors */ }
@@ -183,7 +207,7 @@ export function useVoiceStream(callbacks: VoiceStreamCallbacks): VoiceStreamApi
       _releaseDevices();
       throw err;
     }
-  }, [status, _setStatus, _pickMimeType, _closeWs, _releaseDevices]);
+  }, [status, _setStatus, _pickMimeType, _closeWs, _releaseDevices, _buildOpenPayload]);
 
   useEffect(() => {
     return () => {
diff --git a/src/pages/views/commcoach/useVoiceController.ts b/src/pages/views/commcoach/useVoiceController.ts
index 148bbed..7a2ad29 100644
--- a/src/pages/views/commcoach/useVoiceController.ts
+++ b/src/pages/views/commcoach/useVoiceController.ts
@@ -10,7 +10,7 @@
  */
 
 import { useState, useRef, useCallback, useEffect } from 'react';
-import { useVoiceStream } from '../../../hooks/useSpeechAudioCapture';
+import { useVoiceStream, type SttStreamOpenOptions } from '../../../hooks/useSpeechAudioCapture';
 import api from '../../../api';
 
 export type VoiceState = 'idle' | 'listening' | 'botSpeaking' | 'interrupted';
@@ -35,6 +35,13 @@ export interface VoiceControllerCallbacks {
 
 const _DEFAULT_STT_LANGUAGE = 'de-DE';
 
+/** CommCoach: faster streaming STT profile + single-utterance endpointing (client re-opens stream). */
+const _commcoachSttOpen: SttStreamOpenOptions = {
+  model: 'latest_short',
+  lightweight: true,
+  singleUtterance: true,
+};
+
 export function useVoiceController(callbacks: VoiceControllerCallbacks): VoiceControllerApi {
   const [state, setState] = useState<VoiceState>('idle');
   const [muted, setMuted] = useState(false);
@@ -86,7 +93,7 @@ export function useVoiceController(callbacks: VoiceControllerCallbacks): VoiceCo
   });
 
   const _startStream = useCallback(() => {
-    return voiceStream.start(sttLanguageRef.current);
+    return voiceStream.start(sttLanguageRef.current, _commcoachSttOpen);
   }, [voiceStream]);
 
   const activate = useCallback(async () => {
diff --git a/src/pages/views/teamsbot/Teamsbot.module.css b/src/pages/views/teamsbot/Teamsbot.module.css
index 7d4ae26..4ca21b2 100644
--- a/src/pages/views/teamsbot/Teamsbot.module.css
+++ b/src/pages/views/teamsbot/Teamsbot.module.css
@@ -1478,6 +1478,10 @@
   border-color: var(--primary-color, #4A90D9);
 }
 
+.moduleRowFocused {
+  box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.45);
+}
+
 .moduleRow {
   display: flex;
   align-items: center;
@@ -1654,3 +1658,222 @@
   padding: 2rem;
   color: var(--text-secondary, #666);
 }
+
+/* --- TeamsBot Dashboard (Greenfield IA) --- */
+.tbDash {
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+  padding: 1.25rem 1.5rem 2rem;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.tbDashHero {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1.25rem;
+  padding: 1.5rem 1.75rem;
+  border-radius: 12px;
+  background: linear-gradient(135deg, rgba(74, 144, 217, 0.12) 0%, var(--surface-color, #fff) 48%);
+  border: 1px solid var(--border-color, #e6e6e6);
+}
+
+.tbDashTitle {
+  margin: 0 0 0.35rem 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-primary, #1a1a1a);
+}
+
+.tbDashSubtitle {
+  margin: 0;
+  max-width: 520px;
+  font-size: 0.95rem;
+  line-height: 1.45;
+  color: var(--text-secondary, #555);
+}
+
+.tbDashQuickActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  align-items: center;
+}
+
+.tbDashBtnPrimary {
+  padding: 0.65rem 1.35rem;
+  border-radius: 8px;
+  border: none;
+  background: var(--primary-color, #4A90D9);
+  color: #fff;
+  font-weight: 600;
+  font-size: 0.95rem;
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.tbDashBtnPrimary:hover {
+  background: var(--primary-hover, #3A7BC8);
+}
+
+.tbDashBtnSecondary {
+  padding: 0.65rem 1.1rem;
+  border-radius: 8px;
+  border: 1px solid var(--border-color, #d0d0d0);
+  background: var(--surface-color, #fff);
+  color: var(--text-primary, #333);
+  font-weight: 500;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.tbDashBtnSecondary:hover {
+  border-color: var(--primary-color, #4A90D9);
+  color: var(--primary-color, #4A90D9);
+}
+
+.tbDashKpiGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 1rem;
+}
+
+.tbDashKpiCard {
+  padding: 1.1rem 1.25rem;
+  border-radius: 10px;
+  border: 1px solid var(--border-color, #e8e8e8);
+  background: var(--surface-color, #fff);
+}
+
+.tbDashKpiValue {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--primary-color, #4A90D9);
+  line-height: 1.1;
+}
+
+.tbDashKpiLabel {
+  margin-top: 0.35rem;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--text-secondary, #666);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.tbDashKpiHint {
+  margin-top: 0.4rem;
+  font-size: 0.8rem;
+  color: var(--text-tertiary, #888);
+}
+
+.tbDashSection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+
+.tbDashSectionHead {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.tbDashSectionTitle {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--text-primary, #222);
+}
+
+.tbDashLinkBtn {
+  padding: 0.35rem 0.75rem;
+  border: none;
+  background: transparent;
+  color: var(--primary-color, #4A90D9);
+  font-size: 0.88rem;
+  font-weight: 500;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.tbDashModuleGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 0.75rem;
+}
+
+.tbDashModuleCard {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.35rem;
+  padding: 1rem 1.1rem;
+  border-radius: 10px;
+  border: 1px solid var(--border-color, #e6e6e6);
+  background: var(--surface-color, #fafafa);
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.tbDashModuleCard:hover {
+  border-color: var(--primary-color, #4A90D9);
+  box-shadow: 0 2px 8px rgba(74, 144, 217, 0.12);
+}
+
+.tbDashModuleTitle {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--text-primary, #222);
+}
+
+.tbDashModuleCount {
+  font-size: 0.82rem;
+  color: var(--text-secondary, #666);
+}
+
+.tbDashSessionList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.tbDashSessionRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1rem;
+  padding: 0.85rem 1rem;
+  border-radius: 10px;
+  border: 1px solid var(--border-color, #eaeaea);
+  background: var(--surface-color, #fff);
+}
+
+.tbDashSessionMain {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex: 1 1 200px;
+}
+
+.tbDashSessionMeta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+  font-size: 0.82rem;
+  color: var(--text-secondary, #666);
+  flex: 2 1 220px;
+}
+
+.tbDashSessionActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin-left: auto;
+}
diff --git a/src/pages/views/teamsbot/TeamsbotAssistantView.tsx b/src/pages/views/teamsbot/TeamsbotAssistantView.tsx
index a6a473b..b80493c 100644
--- a/src/pages/views/teamsbot/TeamsbotAssistantView.tsx
+++ b/src/pages/views/teamsbot/TeamsbotAssistantView.tsx
@@ -3,10 +3,12 @@
  *
  * Wizard: Select/create module → Meeting link → Bot selection → "Start bot"
  */
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
 import * as teamsbotApi from '../../../api/teamsbotApi';
+import type { MeetingModule, TeamsbotJoinMode, UserAccountStatus } from '../../../api/teamsbotApi';
+import { getUserDataCache } from '../../../utils/userCache';
 import { useLanguage } from '../../../providers/language/LanguageContext';
 import styles from './Teamsbot.module.css';
 
@@ -18,16 +20,26 @@ export const TeamsbotAssistantView: React.FC = () => {
   const { instance, mandateId } = useCurrentInstance();
   const instanceId = instance?.id || '';
   const navigate = useNavigate();
+  const cachedUser = getUserDataCache();
+  const isSysAdmin = cachedUser?.isSysAdmin === true;
   const [searchParams] = useSearchParams();
   const preselectedModuleId = searchParams.get('moduleId');
 
   const [step, setStep] = useState<WizardStep>(preselectedModuleId ? 'meeting' : 'module');
-  const [modules, setModules] = useState<any[]>([]);
+  const [modules, setModules] = useState<MeetingModule[]>([]);
+  const [moduleFilter, setModuleFilter] = useState('');
   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 [joinMode, setJoinMode] = useState<TeamsbotJoinMode>('anonymous');
+  const [sessionContext, setSessionContext] = useState('');
+  const [userAccount, setUserAccount] = useState<UserAccountStatus | null>(null);
+  const [showCredentialForm, setShowCredentialForm] = useState(false);
+  const [credEmail, setCredEmail] = useState('');
+  const [credPassword, setCredPassword] = useState('');
+  const [savingCredentials, setSavingCredentials] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -45,6 +57,33 @@ export const TeamsbotAssistantView: React.FC = () => {
 
   useEffect(() => { _loadModules(); }, [_loadModules]);
 
+  useEffect(() => {
+    if (joinMode === 'userAccount' && instanceId) {
+      teamsbotApi.getUserAccount(instanceId).then(setUserAccount).catch(() => setUserAccount(null));
+    }
+  }, [joinMode, instanceId]);
+
+  const filteredModules = useMemo(() => {
+    const q = moduleFilter.trim().toLowerCase();
+    if (!q) return modules;
+    return modules.filter(m => m.title.toLowerCase().includes(q));
+  }, [modules, moduleFilter]);
+
+  const modulePrefillKeyRef = useRef<string>('');
+  useEffect(() => {
+    if (!selectedModuleId || createNewModule) {
+      modulePrefillKeyRef.current = '';
+      return;
+    }
+    const mod = modules.find(m => m.id === selectedModuleId);
+    if (!mod) return;
+    const key = `${selectedModuleId}:${mod.defaultMeetingLink ?? ''}:${mod.defaultBotName ?? ''}`;
+    if (modulePrefillKeyRef.current === key) return;
+    modulePrefillKeyRef.current = key;
+    if (mod.defaultMeetingLink) setMeetingLink(mod.defaultMeetingLink);
+    if (mod.defaultBotName) setBotName(mod.defaultBotName);
+  }, [selectedModuleId, createNewModule, modules]);
+
   const _handleNext = () => {
     const nextIdx = stepIdx + 1;
     if (nextIdx < STEPS.length) setStep(STEPS[nextIdx]);
@@ -60,6 +99,27 @@ export const TeamsbotAssistantView: React.FC = () => {
       setError(t('Meeting-Link erforderlich'));
       return;
     }
+    if (joinMode === 'userAccount' && !userAccount?.hasSavedCredentials && !credEmail) {
+      setShowCredentialForm(true);
+      setError(t('Bitte Microsoft-Zugangsdaten eingeben oder speichern.'));
+      return;
+    }
+    const needsSave = joinMode === 'userAccount' && !userAccount?.hasSavedCredentials && credEmail && credPassword;
+    const needsUpdate = joinMode === 'userAccount' && showCredentialForm && credEmail && credPassword;
+    if (needsSave || needsUpdate) {
+      try {
+        setSavingCredentials(true);
+        await teamsbotApi.saveUserAccount(instanceId, credEmail, credPassword);
+        setUserAccount({ hasSavedCredentials: true, email: credEmail });
+        setShowCredentialForm(false);
+      } catch (err: any) {
+        setError(err?.message || t('Fehler beim Speichern der Zugangsdaten'));
+        setSavingCredentials(false);
+        return;
+      } finally {
+        setSavingCredentials(false);
+      }
+    }
     setLoading(true);
     setError(null);
     try {
@@ -73,7 +133,9 @@ export const TeamsbotAssistantView: React.FC = () => {
         meetingLink: meetingLink.trim(),
         botName,
         moduleId: moduleId || undefined,
-      } as any);
+        joinMode,
+        sessionContext: sessionContext.trim() || undefined,
+      });
 
       navigate(`/mandates/${mandateId}/teamsbot/${instanceId}/sessions?sessionId=${result.session.id}`);
     } catch (err: any) {
@@ -106,16 +168,27 @@ export const TeamsbotAssistantView: React.FC = () => {
                 {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>
+                <>
+                  <input
+                    type="search"
+                    className={styles.wizardInput}
+                    placeholder={t('Modul suchen…')}
+                    value={moduleFilter}
+                    onChange={e => setModuleFilter(e.target.value)}
+                    aria-label={t('Modul suchen')}
+                  />
+                  <select
+                    value={selectedModuleId || ''}
+                    onChange={e => setSelectedModuleId(e.target.value || null)}
+                    className={styles.wizardSelect}
+                    size={Math.min(12, Math.max(4, filteredModules.length + 1))}
+                  >
+                    <option value="">{t('Kein Modul (Adhoc)')}</option>
+                    {filteredModules.map(m => (
+                      <option key={m.id} value={m.id}>{m.title}</option>
+                    ))}
+                  </select>
+                </>
               )}
               <label>
                 <input type="radio" checked={createNewModule} onChange={() => setCreateNewModule(true)} />
@@ -136,7 +209,7 @@ export const TeamsbotAssistantView: React.FC = () => {
 
         {step === 'meeting' && (
           <div className={styles.wizardStep}>
-            <h3>{t('Meeting-Link')}</h3>
+            <h3>{t('Meeting-Link und Beitritt')}</h3>
             <input
               type="text"
               className={styles.wizardInput}
@@ -145,6 +218,87 @@ export const TeamsbotAssistantView: React.FC = () => {
               onChange={e => setMeetingLink(e.target.value)}
               autoFocus
             />
+            <label className={styles.label} style={{ marginTop: '1rem' }}>{t('Join-Modus')}</label>
+            <select
+              className={styles.wizardSelect}
+              value={joinMode}
+              onChange={e => setJoinMode(e.target.value as TeamsbotJoinMode)}
+            >
+              {isSysAdmin && <option value="systemBot">{t('Systembot authentifiziert')}</option>}
+              <option value="anonymous">{t('Anonymer Gast')}</option>
+              <option value="userAccount">{t('Mein Account')}</option>
+            </select>
+            {joinMode === 'userAccount' && (
+              <div className={styles.credentialsCard} style={{ marginTop: '0.75rem' }}>
+                {userAccount?.hasSavedCredentials && !showCredentialForm ? (
+                  <div className={styles.credentialsInfo}>
+                    <span>
+                      {t('Gespeichert:')} <span className={styles.credentialsEmail}>{userAccount.email}</span>
+                    </span>
+                    <div style={{ display: 'flex', gap: '0.5rem' }}>
+                      <button
+                        type="button"
+                        className={styles.viewButton}
+                        onClick={() => { setShowCredentialForm(true); setCredEmail(userAccount.email || ''); }}
+                      >
+                        {t('Ändern')}
+                      </button>
+                      <button
+                        type="button"
+                        className={styles.deleteButton}
+                        onClick={async () => {
+                          try {
+                            await teamsbotApi.deleteUserAccount(instanceId);
+                            setUserAccount({ hasSavedCredentials: false });
+                            setCredEmail('');
+                            setCredPassword('');
+                          } catch { /* ignore */ }
+                        }}
+                      >
+                        {t('Entfernen')}
+                      </button>
+                    </div>
+                  </div>
+                ) : (
+                  <>
+                    <div className={styles.formGroup}>
+                      <label className={styles.label}>{t('Microsoft E-Mail')}</label>
+                      <input
+                        type="email"
+                        className={styles.input}
+                        value={credEmail}
+                        onChange={e => setCredEmail(e.target.value)}
+                        disabled={savingCredentials}
+                      />
+                    </div>
+                    <div className={styles.formGroup}>
+                      <label className={styles.label}>{t('Passwort')}</label>
+                      <input
+                        type="password"
+                        className={styles.input}
+                        value={credPassword}
+                        onChange={e => setCredPassword(e.target.value)}
+                        disabled={savingCredentials}
+                      />
+                    </div>
+                    <span className={styles.hint}>{t('Zugangsdaten werden verschlüsselt gespeichert.')}</span>
+                    {userAccount?.hasSavedCredentials && (
+                      <button type="button" className={styles.viewButton} style={{ marginTop: '0.5rem' }} onClick={() => setShowCredentialForm(false)}>
+                        {t('Abbrechen')}
+                      </button>
+                    )}
+                  </>
+                )}
+              </div>
+            )}
+            <label className={styles.label} style={{ marginTop: '1rem' }}>{t('Sitzungskontext (optional)')}</label>
+            <textarea
+              className={styles.wizardTextarea}
+              placeholder={t('Agenda, Hintergrund …')}
+              value={sessionContext}
+              onChange={e => setSessionContext(e.target.value)}
+              rows={3}
+            />
           </div>
         )}
 
@@ -167,6 +321,8 @@ export const TeamsbotAssistantView: React.FC = () => {
               <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><strong>{t('Join-Modus')}:</strong> {joinMode}</div>
+              {sessionContext.trim() ? <div><strong>{t('Kontext')}:</strong> {sessionContext.trim().slice(0, 120)}{sessionContext.length > 120 ? '…' : ''}</div> : null}
             </div>
           </div>
         )}
@@ -180,7 +336,15 @@ export const TeamsbotAssistantView: React.FC = () => {
         {step !== 'confirm' ? (
           <button className={styles.btnPrimary} onClick={_handleNext}>{t('Weiter')}</button>
         ) : (
-          <button className={styles.btnPrimary} onClick={_handleStart} disabled={loading}>
+          <button
+            className={styles.btnPrimary}
+            onClick={_handleStart}
+            disabled={
+              loading
+              || savingCredentials
+              || (joinMode === 'userAccount' && showCredentialForm && (!credEmail || !credPassword))
+            }
+          >
             {loading ? t('Starte...') : t('Bot starten')}
           </button>
         )}
diff --git a/src/pages/views/teamsbot/TeamsbotDashboardView.tsx b/src/pages/views/teamsbot/TeamsbotDashboardView.tsx
index ec28ca0..089f121 100644
--- a/src/pages/views/teamsbot/TeamsbotDashboardView.tsx
+++ b/src/pages/views/teamsbot/TeamsbotDashboardView.tsx
@@ -1,230 +1,135 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
 import * as teamsbotApi from '../../../api/teamsbotApi';
-import type { TeamsbotSession, StartSessionRequest, TeamsbotJoinMode, UserAccountStatus, MfaChallengeEvent } from '../../../api/teamsbotApi';
-import { getUserDataCache } from '../../../utils/userCache';
+import type { TeamsbotSession, MeetingModule } from '../../../api/teamsbotApi';
 import styles from './Teamsbot.module.css';
-
 import { useLanguage } from '../../../providers/language/LanguageContext';
 
+const PAST_LIMIT = 10;
+
 /**
- * TeamsbotDashboardView - Overview of all Teams Bot sessions.
- * Allows starting new sessions and viewing active/past sessions.
- * Supports "Mein Account" login with saved credentials and MFA relay.
+ * TeamsBot Dashboard — IA: KPIs, Modul-Aggregate, Quick-Actions, kompakte Session-Listen.
+ * Neues Meeting: Assistent (Wizard). Kein paralleler Vollformular-Start hier.
  */
 export const TeamsbotDashboardView: React.FC = () => {
-    const { t } = useLanguage();
-
+  const { t } = useLanguage();
   const { instance, mandateId, featureCode } = useCurrentInstance();
   const instanceId = instance?.id || '';
   const navigate = useNavigate();
 
-  const cachedUser = getUserDataCache();
-  const _isSysAdmin = cachedUser?.isSysAdmin === true;
-
   const [sessions, setSessions] = useState<TeamsbotSession[]>([]);
+  const [modules, setModules] = useState<MeetingModule[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  // New session form
-  const [meetingLink, setMeetingLink] = useState('');
-  const [botName, setBotName] = useState('');
-  const [joinMode, setJoinMode] = useState<TeamsbotJoinMode>('anonymous');
-  const [sessionContext, setSessionContext] = useState('');
-  const [isStarting, setIsStarting] = useState(false);
+  const sessionsRef = useRef<TeamsbotSession[]>([]);
+  sessionsRef.current = sessions;
+  const dashboardEsRef = useRef<EventSource | null>(null);
+  const dashboardReconnectRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // User Account (Mein Account) state
-  const [userAccount, setUserAccount] = useState<UserAccountStatus | null>(null);
-  const [showCredentialForm, setShowCredentialForm] = useState(false);
-  const [credEmail, setCredEmail] = useState('');
-  const [credPassword, setCredPassword] = useState('');
-  const [savingCredentials, setSavingCredentials] = useState(false);
-
-  // MFA state
-  const [mfaChallenge, setMfaChallenge] = useState<MfaChallengeEvent | null>(null);
-  const [mfaCode, setMfaCode] = useState('');
-  const [mfaSessionId, setMfaSessionId] = useState<string | null>(null);
-  const [mfaWaitingPush, setMfaWaitingPush] = useState(false);
-  const sseRef = useRef<EventSource | null>(null);
-
-  const _loadSessions = useCallback(async () => {
-    if (!instanceId) return;
-    try {
-      setLoading(true);
-      const result = await teamsbotApi.listSessions(instanceId);
-      setSessions(result.sessions || []);
-      setError(null);
-    } catch (err: any) {
-      setError(err.message || t('Fehler beim Laden der Sitzungen'));
-    } finally {
-      setLoading(false);
-    }
-  }, [instanceId, t]);
-
-  useEffect(() => {
-    _loadSessions();
-  }, [_loadSessions]);
-
-  // Load user account status when joinMode changes to userAccount
-  useEffect(() => {
-    if (joinMode === 'userAccount' && instanceId) {
-      teamsbotApi.getUserAccount(instanceId).then(setUserAccount).catch(() => setUserAccount(null));
-    }
-  }, [joinMode, instanceId]);
-
-  // 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));
-    const interval = hasActiveSessions ? 3000 : 30000;
-    if (instanceId) {
-      pollRef.current = setInterval(() => {
-        teamsbotApi.listSessions(instanceId).then(r => setSessions(r.sessions || [])).catch(() => {});
-      }, interval);
-    }
-    return () => { if (pollRef.current) clearInterval(pollRef.current); };
-  }, [sessions, instanceId]);
-
-  // Cleanup SSE on unmount
-  useEffect(() => {
-    return () => { sseRef.current?.close(); };
+  const applyDashboardPayload = useCallback((nextSessions: TeamsbotSession[], nextModules: MeetingModule[]) => {
+    setSessions(nextSessions);
+    setModules(nextModules);
+    sessionsRef.current = nextSessions;
   }, []);
 
-  const _startMfaListener = useCallback((sessionId: string) => {
-    sseRef.current?.close();
-    const es = teamsbotApi.createSessionStream(instanceId, sessionId);
-    sseRef.current = es;
-    setMfaSessionId(sessionId);
+  useEffect(() => {
+    if (!instanceId) return;
+    let cancelled = false;
 
-    es.onmessage = (event) => {
-      try {
-        const parsed = JSON.parse(event.data);
-        if (parsed.type === 'mfaChallenge') {
-          const data = parsed.data as MfaChallengeEvent;
-          if (data.mfaType === 'timeout') {
-            setMfaChallenge(null);
-            setMfaWaitingPush(false);
-            setError(t('MFA-Zeitlimit überschritten, bitte erneut versuchen'));
-          } else {
-            setMfaChallenge(data);
-            setMfaCode('');
-            setMfaWaitingPush(data.mfaType === 'pushApproval' || data.mfaType === 'numberMatch');
-          }
-        } else if (parsed.type === 'mfaResolved') {
-          setMfaChallenge(null);
-          setMfaWaitingPush(false);
-          setMfaSessionId(null);
-          es.close();
-          sseRef.current = null;
-          _loadSessions();
-        }
-      } catch { /* ignore parse errors */ }
-    };
-  }, [instanceId, _loadSessions, t]);
-
-  const _handleStartSession = async () => {
-    if (!meetingLink.trim()) return;
-
-    // For userAccount: need credentials (saved or entered now)
-    if (joinMode === 'userAccount' && !userAccount?.hasSavedCredentials && !credEmail) {
-      setShowCredentialForm(true);
-      return;
-    }
-
-    // userAccount with new/unsaved credentials: save to DB before starting
-    const needsSave = joinMode === 'userAccount' && !userAccount?.hasSavedCredentials && credEmail && credPassword;
-    const needsUpdate = joinMode === 'userAccount' && showCredentialForm && credEmail && credPassword;
-    if (needsSave || needsUpdate) {
-      try {
-        setSavingCredentials(true);
-        await teamsbotApi.saveUserAccount(instanceId, credEmail, credPassword);
-        setUserAccount({ hasSavedCredentials: true, email: credEmail });
-      } catch (err: any) {
-        setError(err.message || t('Fehler beim Speichern der Zugangsdaten'));
-        setSavingCredentials(false);
-        return;
-      } finally {
-        setSavingCredentials(false);
+    const clearReconnect = () => {
+      if (dashboardReconnectRef.current) {
+        window.clearTimeout(dashboardReconnectRef.current);
+        dashboardReconnectRef.current = null;
       }
-      setShowCredentialForm(false);
-    }
+    };
 
-    setIsStarting(true);
-    setError(null);
+    const connect = () => {
+      if (cancelled) return;
+      dashboardEsRef.current?.close();
+      setLoading(true);
+      const es = teamsbotApi.createDashboardStream(instanceId);
+      dashboardEsRef.current = es;
 
-    try {
-      const request: StartSessionRequest = {
-        meetingLink: meetingLink.trim(),
-        botName: botName.trim() || undefined,
-        joinMode: joinMode,
-        sessionContext: sessionContext.trim() || undefined,
+      es.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data) as {
+            type?: string;
+            sessions?: TeamsbotSession[];
+            modules?: MeetingModule[];
+          };
+          if (msg.type === 'dashboardState' && Array.isArray(msg.sessions) && Array.isArray(msg.modules)) {
+            applyDashboardPayload(msg.sessions, msg.modules);
+            setError(null);
+            setLoading(false);
+          }
+        } catch {
+          /* ignore malformed SSE */
+        }
       };
 
-      const result = await teamsbotApi.startSession(instanceId, request);
-      const newSessionId = result.session?.id;
-      setMeetingLink('');
-      setBotName('');
+      es.onerror = () => {
+        es.close();
+        dashboardEsRef.current = null;
+        if (cancelled) return;
+        setLoading(false);
+        clearReconnect();
+        dashboardReconnectRef.current = window.setTimeout(connect, 2500);
+      };
+    };
 
-      // Start SSE listener for MFA events if userAccount mode
-      if (joinMode === 'userAccount' && newSessionId) {
-        _startMfaListener(newSessionId);
-      }
+    connect();
+    return () => {
+      cancelled = true;
+      clearReconnect();
+      dashboardEsRef.current?.close();
+      dashboardEsRef.current = null;
+    };
+  }, [instanceId, applyDashboardPayload]);
 
-      await _loadSessions();
-    } catch (err: any) {
-      setError(err.message || t('Fehler beim Starten der Sitzung'));
-    } finally {
-      setIsStarting(false);
-    }
-  };
+  const activeSessions = useMemo(
+    () => sessions.filter((s) => ['pending', 'joining', 'active'].includes(s.status)),
+    [sessions],
+  );
+  const pastSessions = useMemo(
+    () =>
+      sessions
+        .filter((s) => ['ended', 'error', 'leaving'].includes(s.status))
+        .sort((a, b) => {
+          const ta = a.startedAt ? new Date(a.startedAt).getTime() : 0;
+          const tb = b.startedAt ? new Date(b.startedAt).getTime() : 0;
+          return tb - ta;
+        }),
+    [sessions],
+  );
+  const pastVisible = pastSessions.slice(0, PAST_LIMIT);
 
-  const _handleSubmitMfaCode = async () => {
-    if (!mfaSessionId || !instanceId) return;
-    const needsCode = mfaChallenge?.mfaType === 'totpCode' || mfaChallenge?.mfaType === 'smsCode';
-    try {
-      await teamsbotApi.submitMfaCode(
-        instanceId,
-        mfaSessionId,
-        needsCode ? mfaCode : '',
-        needsCode ? 'code' : 'confirmed',
-      );
-      if (!needsCode) {
-        setMfaWaitingPush(true);
-      }
-    } catch (err: any) {
-      setError(err.message || t('Fehler beim Senden des MFA-Codes'));
-    }
-  };
+  const moduleTitleById = useMemo(() => {
+    const m = new Map<string, string>();
+    modules.forEach((mod) => m.set(mod.id, mod.title));
+    return m;
+  }, [modules]);
 
-  const _handleDeleteUserAccount = async () => {
-    try {
-      await teamsbotApi.deleteUserAccount(instanceId);
-      setUserAccount({ hasSavedCredentials: false });
-      setCredEmail('');
-      setCredPassword('');
-    } catch (err: any) {
-      setError(err.message || t('Fehler beim Löschen der Zugangsdaten'));
-    }
-  };
+  const topModules = useMemo(() => {
+    const counts = new Map<string, number>();
+    sessions.forEach((s) => {
+      const mid = s.moduleId || '_adhoc';
+      counts.set(mid, (counts.get(mid) || 0) + 1);
+    });
+    const rows = Array.from(counts.entries())
+      .map(([moduleId, sessionCount]) => ({
+        moduleId,
+        sessionCount,
+        title: moduleId === '_adhoc' ? t('Adhoc / ohne Modul') : (moduleTitleById.get(moduleId) || t('Unbekanntes Modul')),
+      }))
+      .sort((a, b) => b.sessionCount - a.sessionCount)
+      .slice(0, 6);
+    return rows;
+  }, [sessions, moduleTitleById, t]);
 
-  const _handleStopSession = async (sessionId: string) => {
-    try {
-      await teamsbotApi.stopSession(instanceId, sessionId);
-      await _loadSessions();
-    } catch (err: any) {
-      setError(err.message || t('Fehler beim Stoppen der Sitzung'));
-    }
-  };
-
-  const _handleDeleteSession = async (sessionId: string) => {
-    try {
-      await teamsbotApi.deleteSession(instanceId, sessionId);
-      await _loadSessions();
-    } catch (err: any) {
-      setError(err.message || t('Fehler beim Löschen der Sitzung'));
-    }
-  };
+  const totalSegments = useMemo(() => sessions.reduce((acc, s) => acc + (s.transcriptSegmentCount || 0), 0), [sessions]);
+  const totalResponses = useMemo(() => sessions.reduce((acc, s) => acc + (s.botResponseCount || 0), 0), [sessions]);
 
   const _getStatusBadgeClass = (status: string) => {
     switch (status) {
@@ -240,270 +145,213 @@ export const TeamsbotDashboardView: React.FC = () => {
 
   const _getStatusLabel = (status: string) => {
     const labels: Record<string, string> = {
-      pending: 'Wartend',
-      joining: 'Beitritt...',
-      active: 'Aktiv',
-      leaving: 'Verlassen...',
-      ended: 'Beendet',
-      error: 'Fehler',
+      pending: t('Wartend'),
+      joining: t('Beitritt…'),
+      active: t('Aktiv'),
+      leaving: t('Verlassen…'),
+      ended: t('Beendet'),
+      error: t('Fehler'),
     };
     return labels[status] || status;
   };
 
-  const activeSessions = sessions.filter(s => ['pending', 'joining', 'active'].includes(s.status));
-  const pastSessions = sessions.filter(s => ['ended', 'error', 'leaving'].includes(s.status));
+  const _sessionPath = (sessId: string) =>
+    `/mandates/${mandateId}/${featureCode}/${instanceId}/sessions?sessionId=${sessId}`;
 
-  const _needsCodeInput = mfaChallenge?.mfaType === 'totpCode' || mfaChallenge?.mfaType === 'smsCode';
+  const _refreshLists = useCallback(async () => {
+    if (!instanceId) return;
+    try {
+      const [r, m] = await Promise.all([
+        teamsbotApi.listSessions(instanceId, true),
+        teamsbotApi.listModules(instanceId),
+      ]);
+      const nextSessions = r.sessions || [];
+      setSessions(nextSessions);
+      setModules(m || []);
+      sessionsRef.current = nextSessions;
+    } catch { /* ignore */ }
+  }, [instanceId]);
+
+  const _handleStopSession = async (sid: string) => {
+    try {
+      await teamsbotApi.stopSession(instanceId, sid);
+      await _refreshLists();
+    } catch (err: any) {
+      setError(err.message || t('Fehler beim Stoppen'));
+    }
+  };
+
+  const _handleDeleteSession = async (sid: string) => {
+    try {
+      await teamsbotApi.deleteSession(instanceId, sid);
+      await _refreshLists();
+    } catch (err: any) {
+      setError(err.message || t('Fehler beim Löschen'));
+    }
+  };
 
   return (
-    <div className={styles.dashboardContainer}>
-      {/* MFA Challenge Dialog */}
-      {mfaChallenge && (
-        <div className={styles.mfaOverlay}>
-          <div className={styles.mfaDialog}>
-            <div className={styles.mfaTitle}>Multi-Faktor-Authentifizierung</div>
-
-            {mfaChallenge.displayNumber && (
-              <div className={styles.mfaNumber}>{mfaChallenge.displayNumber}</div>
-            )}
-
-            <div className={styles.mfaPrompt}>{mfaChallenge.prompt}</div>
-
-            {_needsCodeInput ? (
-              <>
-                <input
-                  type="text"
-                  className={styles.mfaCodeInput}
-                  placeholder={t('Code eingeben')}
-                  value={mfaCode}
-                  onChange={(e) => setMfaCode(e.target.value)}
-                  autoFocus
-                  onKeyDown={(e) => e.key === 'Enter' && _handleSubmitMfaCode()}
-                />
-                <button className={styles.startButton} onClick={_handleSubmitMfaCode} disabled={!mfaCode.trim()}>
-                  Bestaetigen
-                </button>
-              </>
-            ) : mfaWaitingPush ? (
-              <>
-                <div className={styles.mfaSpinner} />
-                <p style={{ fontSize: '0.85rem', color: '#888' }}>
-                  Warte auf Bestaetigung in der Authenticator App...
-                </p>
-              </>
-            ) : (
-              <button className={styles.startButton} onClick={_handleSubmitMfaCode}>
-                Ich habe bestaetigt
-              </button>
-            )}
-          </div>
+    <div className={styles.tbDash}>
+      <header className={styles.tbDashHero}>
+        <div className={styles.tbDashHeroText}>
+          <h1 className={styles.tbDashTitle}>{t('Teams Bot')}</h1>
+          <p className={styles.tbDashSubtitle}>
+            {t('Dashboard mit Übersicht, Modulen und Live-Sitzung — neues Meeting über den Assistenten starten.')}
+          </p>
         </div>
-      )}
-
-      {/* Start New Session Card */}
-      <div className={styles.startSessionCard}>
-        <h3 className={styles.cardTitle}>{t('Neue Botsitzung starten')}</h3>
-        <p className={styles.cardDescription}>
-          Fuege den Teams Meeting-Link ein, um den AI-Bot in ein Meeting einzuschleusen.
-        </p>
-        
-        <div className={styles.formGroup}>
-          <label className={styles.label}>{t('Teams-Meetinglink')}</label>
-          <input
-            type="url"
-            className={styles.input}
-            placeholder="https://teams.microsoft.com/l/meetup-join/..."
-            value={meetingLink}
-            onChange={(e) => setMeetingLink(e.target.value)}
-            disabled={isStarting}
-          />
-        </div>
-
-        <div className={styles.formGroup}>
-          <label className={styles.label}>Join-Modus</label>
-          <select
-            className={styles.select || styles.input}
-            value={joinMode}
-            onChange={(e) => setJoinMode(e.target.value as TeamsbotJoinMode)}
-            disabled={isStarting}
+        <div className={styles.tbDashQuickActions}>
+          <button
+            type="button"
+            className={styles.tbDashBtnPrimary}
+            onClick={() => navigate(`/mandates/${mandateId}/${featureCode}/${instanceId}/assistant`)}
           >
-            {_isSysAdmin && <option value="systemBot">{t('Systembot authentifiziert')}</option>}
-            <option value="anonymous">{t('Anonymer Gast')}</option>
-            <option value="userAccount">{t('Mein Account')}</option>
-          </select>
+            {t('Neues Meeting')}
+          </button>
+          <button
+            type="button"
+            className={styles.tbDashBtnSecondary}
+            onClick={() => navigate(`/mandates/${mandateId}/${featureCode}/${instanceId}/modules`)}
+          >
+            {t('Module')}
+          </button>
+          <button
+            type="button"
+            className={styles.tbDashBtnSecondary}
+            onClick={() => navigate(`/mandates/${mandateId}/${featureCode}/${instanceId}/sessions`)}
+          >
+            {t('Live-Session')}
+          </button>
         </div>
-
-        {/* User Account: saved credentials info or credential form */}
-        {joinMode === 'userAccount' && (
-          <div className={styles.credentialsCard}>
-            {userAccount?.hasSavedCredentials && !showCredentialForm ? (
-              <div className={styles.credentialsInfo}>
-                <span>
-                  Gespeichert: <span className={styles.credentialsEmail}>{userAccount.email}</span>
-                </span>
-                <div style={{ display: 'flex', gap: '0.5rem' }}>
-                  <button
-                    className={styles.viewButton}
-                    onClick={() => { setShowCredentialForm(true); setCredEmail(userAccount.email || ''); }}
-                  >
-                    Aendern
-                  </button>
-                  <button className={styles.deleteButton} onClick={_handleDeleteUserAccount}>
-                    Entfernen
-                  </button>
-                </div>
-              </div>
-            ) : (
-              <>
-                <div className={styles.formGroup}>
-                  <label className={styles.label}>{t('Microsoft E-Mail')}</label>
-                  <input
-                    type="email"
-                    className={styles.input}
-                    placeholder="name@example.com"
-                    value={credEmail}
-                    onChange={(e) => setCredEmail(e.target.value)}
-                    disabled={savingCredentials}
-                  />
-                </div>
-                <div className={styles.formGroup}>
-                  <label className={styles.label}>{t('Passwort')}</label>
-                  <input
-                    type="password"
-                    className={styles.input}
-                    placeholder="Microsoft-Passwort"
-                    value={credPassword}
-                    onChange={(e) => setCredPassword(e.target.value)}
-                    disabled={savingCredentials}
-                  />
-                </div>
-                <span style={{ fontSize: '12px', color: '#888', marginTop: '4px', display: 'block' }}>
-                  Zugangsdaten werden verschluesselt gespeichert.
-                </span>
-                {userAccount?.hasSavedCredentials && (
-                  <button
-                    className={styles.viewButton}
-                    style={{ marginTop: '0.5rem' }}
-                    onClick={() => setShowCredentialForm(false)}
-                  >
-                    Abbrechen
-                  </button>
-                )}
-              </>
-            )}
-          </div>
-        )}
-
-        <div className={styles.formGroup}>
-          <label className={styles.label}>{t('Botname (optional)')}</label>
-          <input
-            type="text"
-            className={styles.input}
-            placeholder={t('KI-Assistent')}
-            value={botName}
-            onChange={(e) => setBotName(e.target.value)}
-            disabled={isStarting}
-          />
-        </div>
-
-        <div className={styles.formGroup}>
-          <label className={styles.label}>{t('Sitzungskontext (optional)')}</label>
-          <textarea
-            className={styles.textarea || styles.input}
-            placeholder={t('Agenda, Hintergrundinfos, Dokumente oder …')}
-            value={sessionContext}
-            onChange={(e) => setSessionContext(e.target.value)}
-            disabled={isStarting}
-            rows={4}
-            style={{ resize: 'vertical', minHeight: '80px' }}
-          />
-          <span style={{ fontSize: '12px', color: '#888' }}>
-            Kontext den der Bot waehrend der Sitzung nutzen kann (z.B. Meeting-Agenda, Projektinfos).
-            {sessionContext.length > 0 && ` (${sessionContext.length} Zeichen)`}
-          </span>
-        </div>
-
-        <button
-          className={styles.startButton}
-          onClick={_handleStartSession}
-          disabled={isStarting || !meetingLink.trim() || (joinMode === 'userAccount' && showCredentialForm && (!credEmail || !credPassword))}
-        >
-          {isStarting ? t('Wird gestartet') : t('Bot ins Meeting senden')}
-        </button>
-      </div>
+      </header>
 
       {error && <div className={styles.errorBanner}>{error}</div>}
 
-      {/* Active Sessions */}
+      <section className={styles.tbDashKpiGrid} aria-label={t('Kennzahlen')}>
+        <div className={styles.tbDashKpiCard}>
+          <div className={styles.tbDashKpiValue}>{modules.length}</div>
+          <div className={styles.tbDashKpiLabel}>{t('Meeting-Module')}</div>
+        </div>
+        <div className={styles.tbDashKpiCard}>
+          <div className={styles.tbDashKpiValue}>{activeSessions.length}</div>
+          <div className={styles.tbDashKpiLabel}>{t('Aktive Sitzungen')}</div>
+        </div>
+        <div className={styles.tbDashKpiCard}>
+          <div className={styles.tbDashKpiValue}>{sessions.length}</div>
+          <div className={styles.tbDashKpiLabel}>{t('Sitzungen gesamt')}</div>
+        </div>
+        <div className={styles.tbDashKpiCard}>
+          <div className={styles.tbDashKpiValue}>{totalSegments}</div>
+          <div className={styles.tbDashKpiLabel}>{t('Transkript-Segmente')}</div>
+          <div className={styles.tbDashKpiHint}>{totalResponses} {t('Bot-Antworten')}</div>
+        </div>
+      </section>
+
+      <section className={styles.tbDashSection}>
+        <h2 className={styles.tbDashSectionTitle}>{t('Module nach Aktivität')}</h2>
+        {topModules.length === 0 ? (
+          <p className={styles.emptyState}>{t('Noch keine Sitzungen — starte ein Meeting im Assistenten.')}</p>
+        ) : (
+          <div className={styles.tbDashModuleGrid}>
+            {topModules.map((row) => (
+              <button
+                key={row.moduleId}
+                type="button"
+                className={styles.tbDashModuleCard}
+                onClick={() => navigate(
+                  row.moduleId === '_adhoc'
+                    ? `/mandates/${mandateId}/${featureCode}/${instanceId}/modules`
+                    : `/mandates/${mandateId}/${featureCode}/${instanceId}/modules?moduleId=${encodeURIComponent(row.moduleId)}`,
+                )}
+              >
+                <span className={styles.tbDashModuleTitle}>{row.title}</span>
+                <span className={styles.tbDashModuleCount}>{row.sessionCount} {t('Sitzungen')}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </section>
+
       {activeSessions.length > 0 && (
-        <div className={styles.sectionContainer}>
-          <h3 className={styles.sectionTitle}>{t('Aktive Sitzungen')}</h3>
-          <div className={styles.sessionList}>
+        <section className={styles.tbDashSection}>
+          <h2 className={styles.tbDashSectionTitle}>{t('Aktive Sitzungen')}</h2>
+          <div className={styles.tbDashSessionList}>
             {activeSessions.map((session) => (
-              <div key={session.id} className={styles.sessionCard}>
-                <div className={styles.sessionHeader}>
+              <div key={session.id} className={styles.tbDashSessionRow}>
+                <div className={styles.tbDashSessionMain}>
                   <span className={styles.sessionBotName}>{session.botName}</span>
                   <span className={`${styles.statusBadge} ${_getStatusBadgeClass(session.status)}`}>
                     {_getStatusLabel(session.status)}
                   </span>
                 </div>
-                <div className={styles.sessionMeta}>
-                  <span>{session.transcriptSegmentCount} Segmente</span>
-                  <span>{session.botResponseCount} Antworten</span>
-                  {session.startedAt && <span>Seit: {new Date(session.startedAt).toLocaleTimeString('de-CH')}</span>}
+                <div className={styles.tbDashSessionMeta}>
+                  {session.moduleId && (
+                    <span>{moduleTitleById.get(session.moduleId) || session.moduleId}</span>
+                  )}
+                  <span>{session.transcriptSegmentCount} {t('Segmente')}</span>
+                  <span>{session.botResponseCount} {t('Antworten')}</span>
                 </div>
-                <div className={styles.sessionActions}>
-                  <button className={styles.viewButton} onClick={() => navigate(`/mandates/${mandateId}/${featureCode}/${instanceId}/sessions?sessionId=${session.id}`)}>{t('Live ansehen')}</button>
-                  {session.status === 'active' && (
-                    <button className={styles.stopButton} onClick={() => _handleStopSession(session.id)}>
-                      Stoppen
+                <div className={styles.tbDashSessionActions}>
+                  <button type="button" className={styles.viewButton} onClick={() => navigate(_sessionPath(session.id))}>
+                    {t('Live ansehen')}
+                  </button>
+                  {['active', 'joining', 'pending'].includes(session.status) && (
+                    <button type="button" className={styles.stopButton} onClick={() => _handleStopSession(session.id)}>
+                      {t('Stoppen')}
                     </button>
                   )}
                 </div>
               </div>
             ))}
           </div>
-        </div>
+        </section>
       )}
 
-      {/* Past Sessions */}
-      <div className={styles.sectionContainer}>
-        <h3 className={styles.sectionTitle}>
-          {loading ? 'Lade Sitzungen...' : `Vergangene Sitzungen (${pastSessions.length})`}
-        </h3>
-        {pastSessions.length === 0 && !loading && (
-          <p className={styles.emptyState}>{t('Noch keine vergangenen Sitzungen')}</p>
-        )}
-        <div className={styles.sessionList}>
-          {pastSessions.map((session) => (
-            <div key={session.id} className={styles.sessionCard}>
-              <div className={styles.sessionHeader}>
-                <span className={styles.sessionBotName}>{session.botName}</span>
-                <span className={`${styles.statusBadge} ${_getStatusBadgeClass(session.status)}`}>
-                  {_getStatusLabel(session.status)}
-                </span>
-              </div>
-              <div className={styles.sessionMeta}>
-                <span>{session.transcriptSegmentCount} Segmente</span>
-                <span>{session.botResponseCount} Antworten</span>
-                {session.startedAt && <span>{new Date(session.startedAt).toLocaleDateString('de-CH')}</span>}
-              </div>
-              {session.summary && (
-                <div className={styles.sessionSummary}>{session.summary.substring(0, 200)}...</div>
-              )}
-              {session.errorMessage && (
-                <div className={styles.sessionError}>{session.errorMessage}</div>
-              )}
-              <div className={styles.sessionActions}>
-                <button className={styles.viewButton} onClick={() => navigate(`/mandates/${mandateId}/${featureCode}/${instanceId}/sessions?sessionId=${session.id}`)}>Details</button>
-                <button className={styles.deleteButton} onClick={() => _handleDeleteSession(session.id)}>
-                  Loeschen
-                </button>
-              </div>
-            </div>
-          ))}
+      <section className={styles.tbDashSection}>
+        <div className={styles.tbDashSectionHead}>
+          <h2 className={styles.tbDashSectionTitle}>
+            {loading ? t('Laden…') : t('Letzte Sitzungen')}
+          </h2>
+          {pastSessions.length > PAST_LIMIT && (
+            <button
+              type="button"
+              className={styles.tbDashLinkBtn}
+              onClick={() => navigate(`/mandates/${mandateId}/${featureCode}/${instanceId}/modules`)}
+            >
+              {t('Alle in Modulen')}
+            </button>
+          )}
         </div>
-      </div>
+        {pastVisible.length === 0 && !loading ? (
+          <p className={styles.emptyState}>{t('Noch keine beendeten Sitzungen')}</p>
+        ) : (
+          <div className={styles.tbDashSessionList}>
+            {pastVisible.map((session) => (
+              <div key={session.id} className={styles.tbDashSessionRow}>
+                <div className={styles.tbDashSessionMain}>
+                  <span className={styles.sessionBotName}>{session.botName}</span>
+                  <span className={`${styles.statusBadge} ${_getStatusBadgeClass(session.status)}`}>
+                    {_getStatusLabel(session.status)}
+                  </span>
+                </div>
+                <div className={styles.tbDashSessionMeta}>
+                  {session.startedAt && (
+                    <span>{new Date(session.startedAt).toLocaleString('de-CH')}</span>
+                  )}
+                  <span>{session.transcriptSegmentCount} {t('Segmente')}</span>
+                </div>
+                <div className={styles.tbDashSessionActions}>
+                  <button type="button" className={styles.viewButton} onClick={() => navigate(_sessionPath(session.id))}>
+                    {t('Details')}
+                  </button>
+                  <button type="button" className={styles.deleteButton} onClick={() => _handleDeleteSession(session.id)}>
+                    {t('Löschen')}
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
     </div>
   );
 };
diff --git a/src/pages/views/teamsbot/TeamsbotModulesView.tsx b/src/pages/views/teamsbot/TeamsbotModulesView.tsx
index d704e20..ad1526d 100644
--- a/src/pages/views/teamsbot/TeamsbotModulesView.tsx
+++ b/src/pages/views/teamsbot/TeamsbotModulesView.tsx
@@ -3,10 +3,11 @@
  *
  * CRUD list of MeetingModules with expandable session lists per module.
  */
-import React, { useState, useEffect, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
 import * as teamsbotApi from '../../../api/teamsbotApi';
+import type { MeetingModule, TeamsbotSession } from '../../../api/teamsbotApi';
 import { useLanguage } from '../../../providers/language/LanguageContext';
 import styles from './Teamsbot.module.css';
 
@@ -29,13 +30,23 @@ export const TeamsbotModulesView: React.FC = () => {
   const { instance, mandateId } = useCurrentInstance();
   const instanceId = instance?.id || '';
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const focusModuleId = searchParams.get('moduleId') || '';
+  const moduleRowRefs = useRef<Record<string, HTMLDivElement | null>>({});
 
-  const [modules, setModules] = useState<any[]>([]);
+  const [modules, setModules] = useState<MeetingModule[]>([]);
   const [loading, setLoading] = useState(true);
   const [expandedId, setExpandedId] = useState<string | null>(null);
-  const [moduleSessions, setModuleSessions] = useState<Record<string, any[]>>({});
+  const [moduleSessions, setModuleSessions] = useState<Record<string, TeamsbotSession[]>>({});
   const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
-  const [editingModule, setEditingModule] = useState<any | null>(null);
+  const [editingModule, setEditingModule] = useState<MeetingModule | null>(null);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [createTitle, setCreateTitle] = useState('');
+  const [createSeriesType, setCreateSeriesType] = useState<string>('adhoc');
+  const [createDefaultLink, setCreateDefaultLink] = useState('');
+  const [createDefaultBotName, setCreateDefaultBotName] = useState('');
+  const [createGoals, setCreateGoals] = useState('');
+  const [createSaving, setCreateSaving] = useState(false);
 
   const _loadModules = useCallback(async () => {
     if (!instanceId) return;
@@ -62,6 +73,20 @@ export const TeamsbotModulesView: React.FC = () => {
     }
   }, [instanceId]);
 
+  useEffect(() => {
+    if (!focusModuleId || modules.length === 0) return;
+    if (!modules.some((m) => m.id === focusModuleId)) return;
+    setExpandedId(focusModuleId);
+    _loadModuleSessions(focusModuleId);
+  }, [focusModuleId, modules, _loadModuleSessions]);
+
+  useEffect(() => {
+    if (!focusModuleId || expandedId !== focusModuleId) return;
+    requestAnimationFrame(() => {
+      moduleRowRefs.current[focusModuleId]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    });
+  }, [focusModuleId, expandedId]);
+
   const _toggleExpand = (moduleId: string) => {
     if (expandedId === moduleId) {
       setExpandedId(null);
@@ -81,7 +106,7 @@ export const TeamsbotModulesView: React.FC = () => {
     }
   };
 
-  const _handleUpdate = async (moduleId: string, updates: any) => {
+  const _handleUpdate = async (moduleId: string, updates: Partial<MeetingModule>) => {
     try {
       await teamsbotApi.updateModule(instanceId, moduleId, updates);
       setEditingModule(null);
@@ -91,23 +116,72 @@ export const TeamsbotModulesView: React.FC = () => {
     }
   };
 
+  const _handleCreateModule = async () => {
+    if (!createTitle.trim()) return;
+    setCreateSaving(true);
+    try {
+      await teamsbotApi.createModule(instanceId, {
+        title: createTitle.trim(),
+        seriesType: createSeriesType,
+        defaultMeetingLink: createDefaultLink.trim() || undefined,
+        defaultBotName: createDefaultBotName.trim() || undefined,
+        goals: createGoals.trim() || undefined,
+      });
+      setCreateOpen(false);
+      setCreateTitle('');
+      setCreateSeriesType('adhoc');
+      setCreateDefaultLink('');
+      setCreateDefaultBotName('');
+      setCreateGoals('');
+      _loadModules();
+    } catch (err) {
+      console.error('Create module failed:', err);
+    } finally {
+      setCreateSaving(false);
+    }
+  };
+
+  const _formatSessionDate = (startedAt?: string | number) => {
+    if (startedAt == null) return '-';
+    if (typeof startedAt === 'number') {
+      return new Date(startedAt * 1000).toLocaleDateString('de-CH');
+    }
+    const ms = Date.parse(String(startedAt));
+    if (!Number.isNaN(ms)) return new Date(ms).toLocaleDateString('de-CH');
+    return '-';
+  };
+
   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 style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+          <button
+            type="button"
+            className={styles.btnSecondary}
+            onClick={() => setCreateOpen(true)}
+          >
+            {t('Modul anlegen')}
+          </button>
+          <button
+            type="button"
+            className={styles.btnPrimary}
+            onClick={() => navigate(`/mandates/${mandateId}/teamsbot/${instanceId}/assistant`)}
+          >
+            {t('Meeting starten')}
+          </button>
+        </div>
       </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
+            key={mod.id}
+            ref={(el) => { moduleRowRefs.current[mod.id] = el; }}
+            className={`${styles.moduleCard} ${expandedId === mod.id ? styles.moduleExpanded : ''} ${focusModuleId === mod.id ? styles.moduleRowFocused : ''}`}
+          >
             <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>
@@ -127,7 +201,7 @@ export const TeamsbotModulesView: React.FC = () => {
                 {(moduleSessions[mod.id] || []).length === 0 ? (
                   <p className={styles.noSessions}>{t('Keine Sitzungen')}</p>
                 ) : (
-                  (moduleSessions[mod.id] || []).map((sess: any) => (
+                  (moduleSessions[mod.id] || []).map((sess) => (
                     <div
                       key={sess.id}
                       className={styles.sessionRow}
@@ -135,7 +209,7 @@ export const TeamsbotModulesView: React.FC = () => {
                     >
                       <span>{sess.botName || 'Bot'}</span>
                       <span className={styles.sessionStatus}>{sess.status}</span>
-                      <span>{sess.startedAt ? new Date(sess.startedAt * 1000).toLocaleDateString() : '-'}</span>
+                      <span>{_formatSessionDate(sess.startedAt)}</span>
                     </div>
                   ))
                 )}
@@ -145,6 +219,66 @@ export const TeamsbotModulesView: React.FC = () => {
         ))}
       </div>
 
+      {createOpen && (
+        <div className={styles.confirmOverlay}>
+          <div className={styles.editDialog}>
+            <h3>{t('Modul anlegen')}</h3>
+            <label className={styles.label}>{t('Titel')}</label>
+            <input
+              type="text"
+              className={styles.wizardInput}
+              value={createTitle}
+              onChange={e => setCreateTitle(e.target.value)}
+              placeholder={t('z.B. Weekly Standup')}
+              autoFocus
+            />
+            <label className={styles.label} style={{ display: 'block', marginTop: 8 }}>{t('Serientyp')}</label>
+            <select
+              className={styles.wizardSelect}
+              value={createSeriesType}
+              onChange={e => setCreateSeriesType(e.target.value)}
+            >
+              {Object.entries(SERIES_TYPE_LABELS).map(([code, lab]) => (
+                <option key={code} value={code}>{lab}</option>
+              ))}
+            </select>
+            <label className={styles.label} style={{ display: 'block', marginTop: 8 }}>{t('Standard-Meeting-Link')}</label>
+            <input
+              type="text"
+              className={styles.wizardInput}
+              value={createDefaultLink}
+              onChange={e => setCreateDefaultLink(e.target.value)}
+              placeholder="https://teams.microsoft.com/..."
+            />
+            <label className={styles.label} style={{ display: 'block', marginTop: 8 }}>{t('Standard-Bot-Name')}</label>
+            <input
+              type="text"
+              className={styles.wizardInput}
+              value={createDefaultBotName}
+              onChange={e => setCreateDefaultBotName(e.target.value)}
+            />
+            <label className={styles.label} style={{ display: 'block', marginTop: 8 }}>{t('Ziele')}</label>
+            <textarea
+              className={styles.wizardTextarea}
+              rows={2}
+              value={createGoals}
+              onChange={e => setCreateGoals(e.target.value)}
+            />
+            <div className={styles.confirmActions}>
+              <button type="button" className={styles.btnSecondary} onClick={() => setCreateOpen(false)}>{t('Abbrechen')}</button>
+              <button
+                type="button"
+                className={styles.btnPrimary}
+                onClick={_handleCreateModule}
+                disabled={!createTitle.trim() || createSaving}
+              >
+                {createSaving ? t('Speichern…') : t('Anlegen')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {deleteConfirm && (
         <div className={styles.confirmOverlay}>
           <div className={styles.confirmDialog}>
@@ -167,6 +301,22 @@ export const TeamsbotModulesView: React.FC = () => {
               className={styles.wizardInput}
               onBlur={e => setEditingModule({ ...editingModule, title: e.target.value })}
             />
+            <label className={styles.label} style={{ display: 'block', marginTop: 8 }}>{t('Standard-Meeting-Link')}</label>
+            <input
+              type="text"
+              defaultValue={editingModule.defaultMeetingLink || ''}
+              className={styles.wizardInput}
+              placeholder="https://teams.microsoft.com/l/meetup-join/..."
+              onBlur={e => setEditingModule({ ...editingModule, defaultMeetingLink: e.target.value })}
+            />
+            <label className={styles.label} style={{ display: 'block', marginTop: 8 }}>{t('Standard-Bot-Name')}</label>
+            <input
+              type="text"
+              defaultValue={editingModule.defaultBotName || ''}
+              className={styles.wizardInput}
+              placeholder={t('z.B. AI Assistant')}
+              onBlur={e => setEditingModule({ ...editingModule, defaultBotName: e.target.value })}
+            />
             <textarea
               defaultValue={editingModule.goals || ''}
               className={styles.wizardTextarea}
@@ -179,6 +329,8 @@ export const TeamsbotModulesView: React.FC = () => {
               <button className={styles.btnPrimary} onClick={() => _handleUpdate(editingModule.id, {
                 title: editingModule.title,
                 goals: editingModule.goals,
+                defaultMeetingLink: (editingModule.defaultMeetingLink || '').trim(),
+                defaultBotName: (editingModule.defaultBotName || '').trim(),
               })}>{t('Speichern')}</button>
             </div>
           </div>
diff --git a/src/pages/views/teamsbot/TeamsbotSessionView.tsx b/src/pages/views/teamsbot/TeamsbotSessionView.tsx
index 5fc975c..810ad70 100644
--- a/src/pages/views/teamsbot/TeamsbotSessionView.tsx
+++ b/src/pages/views/teamsbot/TeamsbotSessionView.tsx
@@ -10,6 +10,7 @@ import type {
   ScreenshotInfo,
   DirectorPrompt,
   DirectorPromptMode,
+  MfaChallengeEvent,
 } from '../../../api/teamsbotApi';
 import {
   DIRECTOR_PROMPT_TEXT_LIMIT,
@@ -80,6 +81,10 @@ export const TeamsbotSessionView: React.FC = () => {
   // the gateway. Director prompts can only be processed once botConnected=true.)
   const [botConnected, setBotConnected] = useState(false);
 
+  const [mfaChallenge, setMfaChallenge] = useState<MfaChallengeEvent | null>(null);
+  const [mfaCode, setMfaCode] = useState('');
+  const [mfaWaitingPush, setMfaWaitingPush] = useState(false);
+
   // UDB Sidebar state
   const [udbCollapsed, setUdbCollapsed] = useState(false);
   const [udbTab, setUdbTab] = useState<UdbTab>('files');
@@ -325,6 +330,31 @@ export const TeamsbotSessionView: React.FC = () => {
 
           case 'ping':
             break;
+
+          case 'mfaChallenge': {
+            const data = sseEvent.data as MfaChallengeEvent;
+            if (data.mfaType === 'timeout') {
+              setMfaChallenge(null);
+              setMfaWaitingPush(false);
+              setError(t('MFA-Zeitlimit überschritten, bitte erneut versuchen'));
+            } else {
+              setMfaChallenge(data);
+              setMfaCode('');
+              setMfaWaitingPush(data.mfaType === 'pushApproval' || data.mfaType === 'numberMatch');
+            }
+            break;
+          }
+
+          case 'mfaResolved': {
+            setMfaChallenge(null);
+            setMfaWaitingPush(false);
+            teamsbotApi.getSession(instanceId, sessionId).then((result) => {
+              setSession(result.session);
+              if (result.transcripts) setTranscripts(result.transcripts);
+              if (result.botResponses) setBotResponses(result.botResponses);
+            }).catch(() => {});
+            break;
+          }
         }
       } catch (err) {
         _dlog('SSE-ERR', String(err));
@@ -358,8 +388,35 @@ export const TeamsbotSessionView: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [instanceId, sessionId, reconnectTick]);
 
-  // Polling fallback: refresh session data every 5s when SSE is not connected.
-  // Uses isActive (boolean) instead of session object to prevent interval resets.
+  // Keep session switcher labels in sync when the selected session updates (SSE, poll, etc.).
+  useEffect(() => {
+    if (!session?.id) return;
+    setAllSessions((prev) => {
+      const idx = prev.findIndex((s) => s.id === session.id);
+      if (idx < 0) return prev;
+      const row = prev[idx];
+      if (
+        row.status === session.status
+        && row.botName === session.botName
+        && row.startedAt === session.startedAt
+        && row.endedAt === session.endedAt
+      ) {
+        return prev;
+      }
+      const next = [...prev];
+      next[idx] = {
+        ...next[idx],
+        status: session.status,
+        botName: session.botName,
+        startedAt: session.startedAt,
+        endedAt: session.endedAt,
+      };
+      return next;
+    });
+  }, [session?.id, session?.status, session?.botName, session?.startedAt, session?.endedAt]);
+
+  // Polling: while joining/pending, poll even if SSE is connected (status may not arrive on stream).
+  // For active-only, poll only when SSE is down (previous behavior).
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const isActive = useMemo(() => session && ['pending', 'joining', 'active'].includes(session.status), [session?.status]);
   const isLiveRef = useRef(isLive);
@@ -367,22 +424,24 @@ export const TeamsbotSessionView: React.FC = () => {
   useEffect(() => {
     if (!instanceId || !sessionId) return;
     if (!isActive) return;
+    const intervalMs = session?.status === 'active' ? 5000 : 2500;
     pollRef.current = setInterval(async () => {
-      if (isLiveRef.current) return;
+      const st = sessionStatusRef.current;
+      const pollWhileLive = st === 'pending' || st === 'joining';
+      if (!pollWhileLive && isLiveRef.current) return;
       try {
         const result = await teamsbotApi.getSession(instanceId, sessionId);
         setSession(result.session);
         if (result.transcripts) setTranscripts(result.transcripts);
         if (result.botResponses) setBotResponses(result.botResponses);
-        // 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);
+          setReconnectTick((v) => v + 1);
         }
-      } catch {}
-    }, 5000);
+      } catch { /* ignore */ }
+    }, intervalMs);
     return () => { if (pollRef.current) clearInterval(pollRef.current); };
-  }, [isActive, instanceId, sessionId]);
+  }, [isActive, instanceId, sessionId, session?.status]);
 
   // Auto-scroll transcript
   useEffect(() => {
@@ -398,6 +457,25 @@ export const TeamsbotSessionView: React.FC = () => {
     }
   };
 
+  const _mfaNeedsCodeInput = mfaChallenge?.mfaType === 'totpCode' || mfaChallenge?.mfaType === 'smsCode';
+
+  const _handleSubmitMfaCode = async () => {
+    if (!instanceId || !sessionId) return;
+    try {
+      await teamsbotApi.submitMfaCode(
+        instanceId,
+        sessionId,
+        _mfaNeedsCodeInput ? mfaCode : '',
+        _mfaNeedsCodeInput ? 'code' : 'confirmed',
+      );
+      if (!_mfaNeedsCodeInput) {
+        setMfaWaitingPush(true);
+      }
+    } catch (err: any) {
+      setError(err.message || t('Fehler beim Senden des MFA-Codes'));
+    }
+  };
+
   const _formatTime = (timestamp: string) => {
     try {
       const dt = new Date(timestamp);
@@ -632,13 +710,16 @@ export const TeamsbotSessionView: React.FC = () => {
       <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' }}>
+      <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', justifyContent: 'center' }}>
         <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>
+        <button className={styles.btnSecondary}
+          onClick={() => navigate(`/mandates/${mandateId}/teamsbot/${instanceId}/dashboard`)}
+        >{t('Zum Dashboard')}</button>
       </div>
     </div>
   );
@@ -650,6 +731,45 @@ export const TeamsbotSessionView: React.FC = () => {
 
   return (
     <div className={styles.sessionContainer}>
+      {mfaChallenge && (
+        <div className={styles.mfaOverlay}>
+          <div className={styles.mfaDialog}>
+            <div className={styles.mfaTitle}>{t('Multi-Faktor-Authentifizierung')}</div>
+            {mfaChallenge.displayNumber && (
+              <div className={styles.mfaNumber}>{mfaChallenge.displayNumber}</div>
+            )}
+            <div className={styles.mfaPrompt}>{mfaChallenge.prompt}</div>
+            {_mfaNeedsCodeInput ? (
+              <>
+                <input
+                  type="text"
+                  className={styles.mfaCodeInput}
+                  placeholder={t('Code eingeben')}
+                  value={mfaCode}
+                  onChange={(e) => setMfaCode(e.target.value)}
+                  autoFocus
+                  onKeyDown={(e) => e.key === 'Enter' && _handleSubmitMfaCode()}
+                />
+                <button type="button" className={styles.startButton} onClick={_handleSubmitMfaCode} disabled={!mfaCode.trim()}>
+                  {t('Bestätigen')}
+                </button>
+              </>
+            ) : mfaWaitingPush ? (
+              <>
+                <div className={styles.mfaSpinner} />
+                <p style={{ fontSize: '0.85rem', color: '#888' }}>
+                  {t('Warte auf Bestätigung in der Authenticator-App …')}
+                </p>
+              </>
+            ) : (
+              <button type="button" className={styles.startButton} onClick={_handleSubmitMfaCode}>
+                {t('Ich habe bestätigt')}
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
       {/* Session Switcher (if multiple sessions exist) */}
       {allSessions.length > 1 && (
         <div style={{ display: 'flex', gap: '8px', marginBottom: '12px', flexWrap: 'wrap' }}>
diff --git a/src/types/mandate.ts b/src/types/mandate.ts
index 1824530..fe3f03c 100644
--- a/src/types/mandate.ts
+++ b/src/types/mandate.ts
@@ -246,7 +246,7 @@ export const FEATURE_REGISTRY: Record<string, FeatureConfig> = {
     label: 'Teams Bot',
     icon: 'headset_mic',
     views: [
-      { code: 'dashboard', label: 'Übersicht', path: 'dashboard' },
+      { code: 'dashboard', label: 'Dashboard', path: 'dashboard' },
       { code: 'assistant', label: 'Assistent', path: 'assistant' },
       { code: 'modules', label: 'Module', path: 'modules' },
       { code: 'sessions', label: 'Live-Session', path: 'sessions' },

From 791d575b7db59b6670a4617a0e371cd6619b8c48 Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@valueon.ch>
Date: Mon, 11 May 2026 23:59:27 +0200
Subject: [PATCH 02/10] fixed teamsbot issues

---
 src/pages/views/teamsbot/Teamsbot.module.css  |   8 +-
 .../views/teamsbot/TeamsbotDashboardView.tsx  |  87 +------------
 .../views/teamsbot/TeamsbotSessionView.tsx    | 122 ++++++++++--------
 3 files changed, 75 insertions(+), 142 deletions(-)

diff --git a/src/pages/views/teamsbot/Teamsbot.module.css b/src/pages/views/teamsbot/Teamsbot.module.css
index 4ca21b2..73d6a02 100644
--- a/src/pages/views/teamsbot/Teamsbot.module.css
+++ b/src/pages/views/teamsbot/Teamsbot.module.css
@@ -413,15 +413,12 @@
   flex-direction: column;
   gap: 1rem;
   padding: 1rem;
-  height: 100%;
 }
 
 /* ----- Session Layout (UDB Sidebar + Main) ------------------------------- */
 
 .sessionLayout {
   display: flex;
-  flex: 1;
-  min-height: 0;
   gap: 1rem;
 }
 
@@ -430,7 +427,6 @@
   flex-direction: column;
   flex: 1;
   min-width: 0;
-  min-height: 0;
   gap: 1rem;
 }
 
@@ -820,8 +816,6 @@
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
-  flex: 1;
-  min-height: 0;
 }
 
 /* Transcript Panel */
@@ -833,6 +827,8 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  height: 50vh;
+  min-height: 250px;
 }
 
 .panelTitle {
diff --git a/src/pages/views/teamsbot/TeamsbotDashboardView.tsx b/src/pages/views/teamsbot/TeamsbotDashboardView.tsx
index 089f121..dd5efc8 100644
--- a/src/pages/views/teamsbot/TeamsbotDashboardView.tsx
+++ b/src/pages/views/teamsbot/TeamsbotDashboardView.tsx
@@ -6,11 +6,9 @@ import type { TeamsbotSession, MeetingModule } from '../../../api/teamsbotApi';
 import styles from './Teamsbot.module.css';
 import { useLanguage } from '../../../providers/language/LanguageContext';
 
-const PAST_LIMIT = 10;
-
 /**
- * TeamsBot Dashboard — IA: KPIs, Modul-Aggregate, Quick-Actions, kompakte Session-Listen.
- * Neues Meeting: Assistent (Wizard). Kein paralleler Vollformular-Start hier.
+ * TeamsBot Dashboard — IA: KPIs, Modul-Aggregate, Quick-Actions.
+ * Neues Meeting: Assistent (Wizard). Sessions sind via Module erreichbar.
  */
 export const TeamsbotDashboardView: React.FC = () => {
   const { t } = useLanguage();
@@ -20,18 +18,14 @@ export const TeamsbotDashboardView: React.FC = () => {
 
   const [sessions, setSessions] = useState<TeamsbotSession[]>([]);
   const [modules, setModules] = useState<MeetingModule[]>([]);
-  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  const sessionsRef = useRef<TeamsbotSession[]>([]);
-  sessionsRef.current = sessions;
   const dashboardEsRef = useRef<EventSource | null>(null);
-  const dashboardReconnectRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const dashboardReconnectRef = useRef<number | null>(null);
 
   const applyDashboardPayload = useCallback((nextSessions: TeamsbotSession[], nextModules: MeetingModule[]) => {
     setSessions(nextSessions);
     setModules(nextModules);
-    sessionsRef.current = nextSessions;
   }, []);
 
   useEffect(() => {
@@ -48,7 +42,6 @@ export const TeamsbotDashboardView: React.FC = () => {
     const connect = () => {
       if (cancelled) return;
       dashboardEsRef.current?.close();
-      setLoading(true);
       const es = teamsbotApi.createDashboardStream(instanceId);
       dashboardEsRef.current = es;
 
@@ -62,7 +55,6 @@ export const TeamsbotDashboardView: React.FC = () => {
           if (msg.type === 'dashboardState' && Array.isArray(msg.sessions) && Array.isArray(msg.modules)) {
             applyDashboardPayload(msg.sessions, msg.modules);
             setError(null);
-            setLoading(false);
           }
         } catch {
           /* ignore malformed SSE */
@@ -73,7 +65,6 @@ export const TeamsbotDashboardView: React.FC = () => {
         es.close();
         dashboardEsRef.current = null;
         if (cancelled) return;
-        setLoading(false);
         clearReconnect();
         dashboardReconnectRef.current = window.setTimeout(connect, 2500);
       };
@@ -92,19 +83,6 @@ export const TeamsbotDashboardView: React.FC = () => {
     () => sessions.filter((s) => ['pending', 'joining', 'active'].includes(s.status)),
     [sessions],
   );
-  const pastSessions = useMemo(
-    () =>
-      sessions
-        .filter((s) => ['ended', 'error', 'leaving'].includes(s.status))
-        .sort((a, b) => {
-          const ta = a.startedAt ? new Date(a.startedAt).getTime() : 0;
-          const tb = b.startedAt ? new Date(b.startedAt).getTime() : 0;
-          return tb - ta;
-        }),
-    [sessions],
-  );
-  const pastVisible = pastSessions.slice(0, PAST_LIMIT);
-
   const moduleTitleById = useMemo(() => {
     const m = new Map<string, string>();
     modules.forEach((mod) => m.set(mod.id, mod.title));
@@ -165,10 +143,8 @@ export const TeamsbotDashboardView: React.FC = () => {
         teamsbotApi.listSessions(instanceId, true),
         teamsbotApi.listModules(instanceId),
       ]);
-      const nextSessions = r.sessions || [];
-      setSessions(nextSessions);
+      setSessions(r.sessions || []);
       setModules(m || []);
-      sessionsRef.current = nextSessions;
     } catch { /* ignore */ }
   }, [instanceId]);
 
@@ -181,15 +157,6 @@ export const TeamsbotDashboardView: React.FC = () => {
     }
   };
 
-  const _handleDeleteSession = async (sid: string) => {
-    try {
-      await teamsbotApi.deleteSession(instanceId, sid);
-      await _refreshLists();
-    } catch (err: any) {
-      setError(err.message || t('Fehler beim Löschen'));
-    }
-  };
-
   return (
     <div className={styles.tbDash}>
       <header className={styles.tbDashHero}>
@@ -306,52 +273,6 @@ export const TeamsbotDashboardView: React.FC = () => {
         </section>
       )}
 
-      <section className={styles.tbDashSection}>
-        <div className={styles.tbDashSectionHead}>
-          <h2 className={styles.tbDashSectionTitle}>
-            {loading ? t('Laden…') : t('Letzte Sitzungen')}
-          </h2>
-          {pastSessions.length > PAST_LIMIT && (
-            <button
-              type="button"
-              className={styles.tbDashLinkBtn}
-              onClick={() => navigate(`/mandates/${mandateId}/${featureCode}/${instanceId}/modules`)}
-            >
-              {t('Alle in Modulen')}
-            </button>
-          )}
-        </div>
-        {pastVisible.length === 0 && !loading ? (
-          <p className={styles.emptyState}>{t('Noch keine beendeten Sitzungen')}</p>
-        ) : (
-          <div className={styles.tbDashSessionList}>
-            {pastVisible.map((session) => (
-              <div key={session.id} className={styles.tbDashSessionRow}>
-                <div className={styles.tbDashSessionMain}>
-                  <span className={styles.sessionBotName}>{session.botName}</span>
-                  <span className={`${styles.statusBadge} ${_getStatusBadgeClass(session.status)}`}>
-                    {_getStatusLabel(session.status)}
-                  </span>
-                </div>
-                <div className={styles.tbDashSessionMeta}>
-                  {session.startedAt && (
-                    <span>{new Date(session.startedAt).toLocaleString('de-CH')}</span>
-                  )}
-                  <span>{session.transcriptSegmentCount} {t('Segmente')}</span>
-                </div>
-                <div className={styles.tbDashSessionActions}>
-                  <button type="button" className={styles.viewButton} onClick={() => navigate(_sessionPath(session.id))}>
-                    {t('Details')}
-                  </button>
-                  <button type="button" className={styles.deleteButton} onClick={() => _handleDeleteSession(session.id)}>
-                    {t('Löschen')}
-                  </button>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </section>
     </div>
   );
 };
diff --git a/src/pages/views/teamsbot/TeamsbotSessionView.tsx b/src/pages/views/teamsbot/TeamsbotSessionView.tsx
index 810ad70..0bbc91c 100644
--- a/src/pages/views/teamsbot/TeamsbotSessionView.tsx
+++ b/src/pages/views/teamsbot/TeamsbotSessionView.tsx
@@ -51,6 +51,7 @@ export const TeamsbotSessionView: React.FC = () => {
   const [screenshots, setScreenshots] = useState<ScreenshotInfo[]>([]);
   const [screenshotsLoading, setScreenshotsLoading] = useState(false);
   const [screenshotsLoaded, setScreenshotsLoaded] = useState(false);
+  const [screenshotsExpanded, setScreenshotsExpanded] = useState(false);
   const [ttsStatusEvents, setTtsStatusEvents] = useState<Array<{
     status: string;
     message?: string;
@@ -1193,62 +1194,77 @@ export const TeamsbotSessionView: React.FC = () => {
         )}
       </div>
 
-      {/* Debug Screenshots (SysAdmin only) */}
+      {/* Debug Screenshots (SysAdmin only, collapsible) */}
       {_isSysAdmin && (
         <div className={styles.summaryCard}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
-            <h4 className={styles.panelTitle} style={{ margin: 0 }}>{t('Debug-Screenshots')}</h4>
-            <button
-              className={styles.viewButton}
-              onClick={async () => {
-                setScreenshotsLoading(true);
-                try {
-                  const result = await teamsbotApi.listScreenshots(instanceId, session.id);
-                  setScreenshots(result.screenshots || []);
-                  setScreenshotsLoaded(true);
-                } catch (err: any) {
-                  setScreenshots([]);
-                  setScreenshotsLoaded(true);
-                } finally {
-                  setScreenshotsLoading(false);
-                }
-              }}
-              disabled={screenshotsLoading}
-            >
-              {screenshotsLoading ? t('Laden…') : screenshotsLoaded ? t('Aktualisieren') : t('Screenshots laden')}
-            </button>
-          </div>
-          {screenshotsLoaded && screenshots.length === 0 && (
-            <div className={styles.emptyState}>{t('Keine Screenshots für diese Sitzung')}</div>
-          )}
-          {screenshots.length > 0 && (
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: '12px' }}>
-              {screenshots.map((s) => {
-                const imgUrl = teamsbotApi.getScreenshotUrl(instanceId, s.name);
-                return (
-                  <a
-                    key={s.name}
-                    href={imgUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    style={{ display: 'block', textDecoration: 'none', color: 'inherit', border: '1px solid #333', borderRadius: '8px', overflow: 'hidden', background: '#1a1a2e' }}
-                  >
-                    <img
-                      src={imgUrl}
-                      alt={s.step}
-                      style={{ width: '100%', height: '140px', objectFit: 'cover', display: 'block' }}
-                      loading="lazy"
-                    />
-                    <div style={{ padding: '8px', fontSize: '12px' }}>
-                      <div style={{ fontWeight: 600, marginBottom: '2px' }}>{s.step}</div>
-                      <div style={{ color: '#888' }}>
-                        {new Date(s.timestamp).toLocaleTimeString('de-CH')} — {(s.sizeBytes / 1024).toFixed(0)} KB
-                      </div>
-                    </div>
-                  </a>
-                );
-              })}
+          <div
+            style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer' }}
+            onClick={() => setScreenshotsExpanded((v) => !v)}
+          >
+            <h4 className={styles.panelTitle} style={{ margin: 0 }}>
+              {screenshotsExpanded ? '\u25BC' : '\u25B6'} {t('Debug-Screenshots')}
+              {screenshotsLoaded && screenshots.length > 0 && ` (${screenshots.length})`}
+            </h4>
+            <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+              {screenshotsExpanded && (
+                <button
+                  className={styles.viewButton}
+                  onClick={async (e) => {
+                    e.stopPropagation();
+                    setScreenshotsLoading(true);
+                    try {
+                      const result = await teamsbotApi.listScreenshots(instanceId, session.id);
+                      setScreenshots(result.screenshots || []);
+                      setScreenshotsLoaded(true);
+                    } catch (err: any) {
+                      setScreenshots([]);
+                      setScreenshotsLoaded(true);
+                    } finally {
+                      setScreenshotsLoading(false);
+                    }
+                  }}
+                  disabled={screenshotsLoading}
+                >
+                  {screenshotsLoading ? t('Laden…') : screenshotsLoaded ? t('Aktualisieren') : t('Screenshots laden')}
+                </button>
+              )}
             </div>
+          </div>
+          {screenshotsExpanded && (
+            <>
+              {screenshotsLoaded && screenshots.length === 0 && (
+                <div className={styles.emptyState} style={{ marginTop: '12px' }}>{t('Keine Screenshots für diese Sitzung')}</div>
+              )}
+              {screenshots.length > 0 && (
+                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: '12px', marginTop: '12px' }}>
+                  {screenshots.map((s) => {
+                    const imgUrl = teamsbotApi.getScreenshotUrl(instanceId, s.name);
+                    return (
+                      <a
+                        key={s.name}
+                        href={imgUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ display: 'block', textDecoration: 'none', color: 'inherit', border: '1px solid #333', borderRadius: '8px', overflow: 'hidden', background: '#1a1a2e' }}
+                      >
+                        <img
+                          src={imgUrl}
+                          alt={s.step}
+                          style={{ width: '100%', height: '140px', objectFit: 'cover', display: 'block' }}
+                          loading="lazy"
+                        />
+                        <div style={{ padding: '8px', fontSize: '12px' }}>
+                          <div style={{ fontWeight: 600, marginBottom: '2px' }}>{s.step}</div>
+                          <div style={{ color: '#888' }}>
+                            {new Date(s.timestamp).toLocaleTimeString('de-CH')} — {(s.sizeBytes / 1024).toFixed(0)} KB
+                          </div>
+                        </div>
+                      </a>
+                    );
+                  })}
+                </div>
+              )}
+            </>
           )}
         </div>
       )}

From a6b37ed684e00dc5dac2d5f18cf3ac95b043d139 Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@valueon.ch>
Date: Tue, 12 May 2026 15:19:07 +0200
Subject: [PATCH 03/10] rag

---
 src/App.tsx                                   |   6 +
 src/api/connectionApi.ts                      | 113 +++-
 .../AddConnectionWizard.module.css            |  21 +-
 .../AddConnectionWizard.tsx                   | 493 +++++-------------
 .../FormGeneratorTable.module.css             |   5 +-
 .../FormGeneratorTable/FormGeneratorTable.tsx |  61 ++-
 .../TableViewsBar/TableViewsBar.module.css    |  45 ++
 .../TableViewsBar/TableViewsBar.tsx           |  49 ++
 .../RagRunningBadge.module.css                |  95 ++++
 .../RagRunningBadge/RagRunningBadge.tsx       |  71 +++
 src/components/UnifiedDataBar/SourcesTab.tsx  |  41 +-
 src/config/pageRegistry.tsx                   |   1 +
 src/hooks/useConnections.ts                   |  12 +-
 src/hooks/useFiles.ts                         |  12 +-
 src/hooks/usePrompts.ts                       |  12 +-
 src/layouts/MainLayout.tsx                    |   3 +
 src/pages/FeatureView.tsx                     |   2 -
 src/pages/RagInventoryPage.module.css         | 334 ++++++++++++
 src/pages/RagInventoryPage.tsx                | 255 +++++++++
 src/pages/basedata/ConnectionsPage.tsx        | 253 +--------
 src/pages/basedata/FilesPage.tsx              |   2 +-
 src/pages/basedata/PromptsPage.tsx            |   2 +-
 src/pages/billing/BillingDataView.tsx         |  14 +-
 .../views/commcoach/Commcoach.module.css      |  23 +-
 .../commcoach/CommcoachAssistantView.tsx      |  35 +-
 src/pages/views/teamsbot/Teamsbot.module.css  |  23 +-
 .../views/teamsbot/TeamsbotAssistantView.tsx  |  51 +-
 .../WorkspaceRagInsightsPage.module.css       | 107 ----
 .../workspace/WorkspaceRagInsightsPage.tsx    | 352 -------------
 29 files changed, 1319 insertions(+), 1174 deletions(-)
 create mode 100644 src/components/RagRunningBadge/RagRunningBadge.module.css
 create mode 100644 src/components/RagRunningBadge/RagRunningBadge.tsx
 create mode 100644 src/pages/RagInventoryPage.module.css
 create mode 100644 src/pages/RagInventoryPage.tsx
 delete mode 100644 src/pages/views/workspace/WorkspaceRagInsightsPage.module.css
 delete mode 100644 src/pages/views/workspace/WorkspaceRagInsightsPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 499bb37..ecba5f5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -44,6 +44,7 @@ import { AdminMandateWizardPage, AdminInvitationWizardPage } from './pages/admin
 import { PromptsPage, FilesPage, ConnectionsPage } from './pages/basedata';
 import { BillingDataView, BillingAdmin, BillingMandateView, AdminSubscriptionsPage } from './pages/billing';
 import { AutomationsDashboardPage } from './pages/AutomationsDashboardPage';
+import { RagInventoryPage } from './pages/RagInventoryPage';
 import { ComplianceAuditPage } from './pages/ComplianceAuditPage';
 function App() {
     // Load saved theme preference and set app name on app mount
@@ -127,6 +128,11 @@ function App() {
                             {/* ============================================== */}
                             <Route path="automations" element={<AutomationsDashboardPage />} />
                             
+                            {/* ============================================== */}
+                            {/* RAG INVENTORY                                  */}
+                            {/* ============================================== */}
+                            <Route path="rag-inventory" element={<RagInventoryPage />} />
+                            
                             {/* Legacy top-level routes – redirect to dashboard (migrated to feature-instance routes) */}
                             <Route path="chatbot" element={<Navigate to="/" replace />} />
                             <Route path="pek" element={<Navigate to="/" replace />} />
diff --git a/src/api/connectionApi.ts b/src/api/connectionApi.ts
index 8c47c6d..5190f4b 100644
--- a/src/api/connectionApi.ts
+++ b/src/api/connectionApi.ts
@@ -6,17 +6,11 @@ import { ApiRequestOptions } from '../hooks/useApi';
 
 export interface KnowledgePreferences {
   schemaVersion?: number;
-  neutralizeBeforeEmbed?: boolean;
   mailContentDepth?: 'metadata' | 'snippet' | 'full';
   mailIndexAttachments?: boolean;
   filesIndexBinaries?: boolean;
-  mimeAllowlist?: string[];
   clickupScope?: 'titles' | 'title_description' | 'with_comments';
   clickupIndexAttachments?: boolean;
-  surfaceToggles?: {
-    google?: { gmail?: boolean; drive?: boolean };
-    msft?: { sharepoint?: boolean; outlook?: boolean };
-  };
   maxAgeDays?: number;
 }
 
@@ -292,3 +286,110 @@ export async function submitInfomaniakToken(
   });
 }
 
+// ============================================================================
+// RAG KNOWLEDGE CONSENT & CONTROL
+// ============================================================================
+
+export async function patchKnowledgeConsent(
+  request: ApiRequestFunction,
+  connectionId: string,
+  enabled: boolean
+): Promise<{ connectionId: string; knowledgeIngestionEnabled: boolean; purged?: any; cancelledJobs?: number; bootstrapEnqueued?: boolean }> {
+  return await request({
+    url: `/api/connections/${connectionId}/knowledge-consent`,
+    method: 'patch',
+    data: { enabled }
+  });
+}
+
+export async function patchKnowledgePreferences(
+  request: ApiRequestFunction,
+  connectionId: string,
+  preferences: KnowledgePreferences
+): Promise<{ connectionId: string; knowledgePreferences: KnowledgePreferences; updated: boolean }> {
+  return await request({
+    url: `/api/connections/${connectionId}/knowledge-preferences`,
+    method: 'patch',
+    data: { preferences }
+  });
+}
+
+export async function postKnowledgeStop(
+  request: ApiRequestFunction,
+  connectionId: string
+): Promise<{ connectionId: string; cancelled: number }> {
+  return await request({
+    url: `/api/connections/${connectionId}/knowledge-stop`,
+    method: 'post'
+  });
+}
+
+export async function patchDataSourceRagIndex(
+  request: ApiRequestFunction,
+  dataSourceId: string,
+  ragIndexEnabled: boolean
+): Promise<{ sourceId: string; ragIndexEnabled: boolean; updated: boolean }> {
+  return await request({
+    url: `/api/datasources/${dataSourceId}/rag-index`,
+    method: 'patch',
+    data: { ragIndexEnabled }
+  });
+}
+
+// ============================================================================
+// RAG INVENTORY
+// ============================================================================
+
+export interface RagDataSourceDto {
+  id: string;
+  label: string;
+  path: string;
+  sourceType: string;
+  ragIndexEnabled: boolean;
+  neutralize: boolean;
+  lastIndexed: number | null;
+  chunkCount: number;
+}
+
+export interface RagConnectionDto {
+  id: string;
+  authority: string;
+  externalEmail: string;
+  knowledgeIngestionEnabled: boolean;
+  preferences: KnowledgePreferences;
+  dataSources: RagDataSourceDto[];
+  totalChunks: number;
+  runningJobs: { jobId: string; progress: number; progressMessage: string }[];
+  lastError?: { jobId: string; errorMessage: string } | null;
+}
+
+export interface RagInventoryDto {
+  connections: RagConnectionDto[];
+  totals: { chunks: number; bytes?: number };
+}
+
+export interface RagActiveJobDto {
+  jobId: string;
+  connectionId: string;
+  connectionLabel?: string;
+  jobType: string;
+  progress: number | null;
+  progressMessage: string;
+}
+
+export async function getRagInventoryMe(request: ApiRequestFunction): Promise<RagInventoryDto> {
+  return await request({ url: '/api/rag/inventory/me', method: 'get' });
+}
+
+export async function getRagInventoryMandate(request: ApiRequestFunction): Promise<RagInventoryDto> {
+  return await request({ url: '/api/rag/inventory/mandate', method: 'get' });
+}
+
+export async function getRagInventoryPlatform(request: ApiRequestFunction): Promise<any> {
+  return await request({ url: '/api/rag/inventory/platform', method: 'get' });
+}
+
+export async function getRagActiveJobs(request: ApiRequestFunction): Promise<RagActiveJobDto[]> {
+  return await request({ url: '/api/rag/inventory/jobs', method: 'get' });
+}
+
diff --git a/src/components/AddConnectionWizard/AddConnectionWizard.module.css b/src/components/AddConnectionWizard/AddConnectionWizard.module.css
index 5cabd64..65cf185 100644
--- a/src/components/AddConnectionWizard/AddConnectionWizard.module.css
+++ b/src/components/AddConnectionWizard/AddConnectionWizard.module.css
@@ -73,13 +73,12 @@
 
 /* Connector grid (Step 0) */
 .connectorGrid {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: 1rem;
-  flex-wrap: wrap;
 }
 
 .connectorCard {
-  flex: 1 1 140px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -447,6 +446,22 @@
   cursor: not-allowed;
 }
 
+.patInput {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-family: monospace;
+  margin: 12px 0 16px;
+}
+
+.patInput:focus {
+  outline: none;
+  border-color: var(--primary, #2563eb);
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+}
+
 /* Dark theme */
 :global(.dark-theme) .connectorCard {
   background: var(--surface-color);
diff --git a/src/components/AddConnectionWizard/AddConnectionWizard.tsx b/src/components/AddConnectionWizard/AddConnectionWizard.tsx
index 85c9336..34c5cb0 100644
--- a/src/components/AddConnectionWizard/AddConnectionWizard.tsx
+++ b/src/components/AddConnectionWizard/AddConnectionWizard.tsx
@@ -1,153 +1,52 @@
 /**
  * AddConnectionWizard
  *
- * Multi-step modal for adding a new connector with optional knowledge
- * ingestion consent and per-connection preferences (§2.6).
- *
- * Steps:
- *   0 — Connector wählen
- *   1 — Consent (Wissensdatenbank Ja/Nein)
- *   2 — Präferenzen (nur wenn Ja)
- *   3 — Zusammenfassung + OAuth starten
+ * Streamlined multi-step modal for adding a new connector.
+ * Steps are connector-type-aware:
+ *   Base:        Connector → Consent → Connect
+ *   Microsoft:   Connector → Consent → Admin Consent (optional) → Connect
+ *   Infomaniak:  Connector → Consent → PAT Input → (done)
  */
 
 import React, { useState } from 'react';
 import { Modal } from '../UiComponents/Modal/Modal';
-import { FaGoogle, FaMicrosoft, FaTasks, FaDatabase, FaShieldAlt, FaCheck, FaArrowRight, FaInfoCircle } from 'react-icons/fa';
-import type { KnowledgePreferences } from '../../api/connectionApi';
+import { FaGoogle, FaMicrosoft, FaTasks, FaCloud, FaCheck, FaArrowRight, FaShieldAlt } from 'react-icons/fa';
 import styles from './AddConnectionWizard.module.css';
 
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
 
-export type ConnectorType = 'google' | 'msft' | 'clickup';
+export type ConnectorType = 'google' | 'msft' | 'clickup' | 'infomaniak';
+
+type StepId = 'connector' | 'consent' | 'msftAdminConsent' | 'infomaniakPat' | 'connect';
 
 interface WizardState {
-  step: 0 | 1 | 2 | 3;
+  currentStep: StepId;
   connector: ConnectorType | null;
   knowledgeEnabled: boolean;
-  prefs: KnowledgePreferences;
+  infomaniakToken: string;
+  adminConsentDone: boolean;
 }
 
-const DEFAULT_PREFS: KnowledgePreferences = {
-  schemaVersion: 1,
-  neutralizeBeforeEmbed: false,
-  mailContentDepth: 'full',
-  mailIndexAttachments: false,
-  filesIndexBinaries: true,
-  clickupScope: 'title_description',
-  clickupIndexAttachments: false,
-  maxAgeDays: 90,
-};
-
 const CONNECTOR_LABELS: Record<ConnectorType, string> = {
   google: 'Google',
   msft: 'Microsoft 365',
   clickup: 'ClickUp',
+  infomaniak: 'Infomaniak',
 };
 
 const CONNECTOR_ICONS: Record<ConnectorType, React.ReactNode> = {
   google: <FaGoogle style={{ color: '#4285f4' }} />,
   msft: <FaMicrosoft style={{ color: '#00a4ef' }} />,
   clickup: <FaTasks style={{ color: '#7b68ee' }} />,
+  infomaniak: <FaCloud style={{ color: '#0098db' }} />,
 };
 
-// ---------------------------------------------------------------------------
-// Cost estimate helper
-// ---------------------------------------------------------------------------
-
-/**
- * Returns a cost estimate broken into two lines:
- *
- * 1. Embedding (OpenAI text-embedding-3-small, $0.02 / 1M tokens) — always tiny.
- * 2. Neutralization (Private LLM / qwen2.5 on-premise, CHF 0.01 per LLM call)
- *    — this is the DOMINANT cost when enabled.  One call per email/task for
- *    short content; several calls for long threads or files.
- *
- * Numbers are conservative ranges.  Subsequent syncs are cheaper because
- * unchanged content is deduplicated before any LLM/embedding call.
- */
-function computeCostEstimate(
-  connector: ConnectorType | null,
-  prefs: KnowledgePreferences,
-): {
-  embeddingLow: string;
-  embeddingHigh: string;
-  neutralizationLow: string | null;
-  neutralizationHigh: string | null;
-  note: string;
-} | null {
-  if (!connector) return null;
-
-  // ---- Embedding (OpenAI, USD) ----
-  const EMBED_USD_PER_M = 0.02;
-  const tokensPerMail: Record<string, number> = { metadata: 30, snippet: 120, full: 500 };
-  const depth = prefs.mailContentDepth ?? 'full';
-  const maxAge = prefs.maxAgeDays ?? 90;
-  const mailCount = Math.min(500, Math.round((maxAge / 90) * 500));
-  const taskCount = Math.min(500, Math.round((maxAge / 90) * 300));
-
-  let embedLowTokens = 0;
-  let embedHighTokens = 0;
-
-  if (connector === 'google' || connector === 'msft') {
-    const mailTokens = mailCount * tokensPerMail[depth];
-    embedLowTokens += mailTokens * 0.6;
-    embedHighTokens += mailTokens * 1.5 + 500_000; // Drive/SharePoint
-    if (prefs.mailIndexAttachments) embedHighTokens += 200_000;
-  } else if (connector === 'clickup') {
-    const scope = prefs.clickupScope ?? 'title_description';
-    const tpt = scope === 'titles' ? 30 : scope === 'title_description' ? 200 : 400;
-    embedLowTokens += taskCount * tpt * 0.6;
-    embedHighTokens += taskCount * tpt * 1.5;
-  }
-
-  const fmtUsd = (tokens: number) => {
-    const usd = (tokens / 1_000_000) * EMBED_USD_PER_M;
-    if (usd < 0.001) return '< 0.01 $';
-    if (usd < 0.10) return `~${usd.toFixed(3)} $`;
-    return `~${usd.toFixed(2)} $`;
-  };
-
-  // ---- Neutralization (Private LLM, CHF 0.01/call) ----
-  // Each item (email / task / file) = 1 LLM call for short content,
-  // 2-4 for long threads/documents.
-  const NEUT_CHF_PER_CALL = 0.01;
-  let neutLow: string | null = null;
-  let neutHigh: string | null = null;
-
-  if (prefs.neutralizeBeforeEmbed) {
-    let lowCalls = 0;
-    let highCalls = 0;
-
-    if (connector === 'google' || connector === 'msft') {
-      lowCalls += mailCount * 1;     // 1 call / short email
-      highCalls += mailCount * 3;    // up to 3 calls / long thread
-      lowCalls += 20;                // Drive/SharePoint files (low)
-      highCalls += 200;              // Drive/SharePoint files (high, large PDFs)
-    } else if (connector === 'clickup') {
-      lowCalls += taskCount * 1;
-      highCalls += taskCount * 2;
-    }
-
-    const fmtChf = (calls: number) => {
-      const chf = calls * NEUT_CHF_PER_CALL;
-      if (chf < 0.01) return '< 0.01 CHF';
-      return `~${chf.toFixed(2)} CHF`;
-    };
-
-    neutLow = fmtChf(lowCalls);
-    neutHigh = fmtChf(highCalls);
-  }
-
-  return {
-    embeddingLow: fmtUsd(embedLowTokens),
-    embeddingHigh: fmtUsd(embedHighTokens),
-    neutralizationLow: neutLow,
-    neutralizationHigh: neutHigh,
-    note: 'Einmalig beim ersten Sync. Folge-Syncs kosten weniger (nur neue Inhalte).',
-  };
+function _getSteps(connector: ConnectorType | null): StepId[] {
+  if (connector === 'msft') return ['connector', 'consent', 'msftAdminConsent', 'connect'];
+  if (connector === 'infomaniak') return ['connector', 'consent', 'infomaniakPat'];
+  return ['connector', 'consent', 'connect'];
 }
 
 // ---------------------------------------------------------------------------
@@ -157,11 +56,9 @@ function computeCostEstimate(
 interface AddConnectionWizardProps {
   open: boolean;
   onClose: () => void;
-  onConnect: (
-    type: ConnectorType,
-    knowledgeEnabled: boolean,
-    prefs: KnowledgePreferences | null,
-  ) => Promise<void>;
+  onConnect: (type: ConnectorType, knowledgeEnabled: boolean) => Promise<void>;
+  onInfomaniakConnect?: (token: string, knowledgeEnabled: boolean) => Promise<void>;
+  onMsftAdminConsent?: () => void;
   isConnecting?: boolean;
 }
 
@@ -173,84 +70,91 @@ export const AddConnectionWizard: React.FC<AddConnectionWizardProps> = ({
   open,
   onClose,
   onConnect,
+  onInfomaniakConnect,
+  onMsftAdminConsent,
   isConnecting = false,
 }) => {
   const [state, setState] = useState<WizardState>({
-    step: 0,
+    currentStep: 'connector',
     connector: null,
     knowledgeEnabled: false,
-    prefs: { ...DEFAULT_PREFS },
+    infomaniakToken: '',
+    adminConsentDone: false,
   });
 
   const reset = () =>
-    setState({ step: 0, connector: null, knowledgeEnabled: false, prefs: { ...DEFAULT_PREFS } });
+    setState({ currentStep: 'connector', connector: null, knowledgeEnabled: false, infomaniakToken: '', adminConsentDone: false });
 
-  const handleClose = () => {
-    reset();
-    onClose();
+  const handleClose = () => { reset(); onClose(); };
+
+  const steps = _getSteps(state.connector);
+  const stepIndex = steps.indexOf(state.currentStep);
+
+  const goNext = () => {
+    const nextIdx = stepIndex + 1;
+    if (nextIdx < steps.length) {
+      setState(s => ({ ...s, currentStep: steps[nextIdx] }));
+    }
   };
 
-  const setStep = (step: WizardState['step']) => setState(s => ({ ...s, step }));
-  const setConnector = (connector: ConnectorType) =>
-    setState(s => ({ ...s, connector, step: 1 }));
-  const setKnowledgeEnabled = (v: boolean) =>
-    setState(s => ({ ...s, knowledgeEnabled: v, step: v ? 2 : 3 }));
-  const updatePref = <K extends keyof KnowledgePreferences>(key: K, value: KnowledgePreferences[K]) =>
-    setState(s => ({ ...s, prefs: { ...s.prefs, [key]: value } }));
+  const goBack = () => {
+    const prevIdx = stepIndex - 1;
+    if (prevIdx >= 0) {
+      setState(s => ({ ...s, currentStep: steps[prevIdx] }));
+    }
+  };
 
-  const handleConnect = async () => {
+  const selectConnector = (c: ConnectorType) => {
+    setState(s => ({ ...s, connector: c, currentStep: 'consent' }));
+  };
+
+  const setConsent = (enabled: boolean) => {
+    setState(s => ({ ...s, knowledgeEnabled: enabled }));
+    goNext();
+  };
+
+  const handleFinalConnect = async () => {
     if (!state.connector) return;
-    await onConnect(
-      state.connector,
-      state.knowledgeEnabled,
-      state.knowledgeEnabled ? state.prefs : null,
-    );
+    if (state.connector === 'infomaniak' && onInfomaniakConnect) {
+      await onInfomaniakConnect(state.infomaniakToken, state.knowledgeEnabled);
+    } else {
+      await onConnect(state.connector, state.knowledgeEnabled);
+    }
     reset();
     onClose();
   };
 
-  const visibleSteps = state.knowledgeEnabled
-    ? [0, 1, 2, 3]
-    : [0, 1, 3];
-
   return (
-    <Modal
-      open={open}
-      onClose={handleClose}
-      title="Verbindung hinzufügen"
-      size="md"
-      closeOnEscape
-    >
+    <Modal open={open} onClose={handleClose} title="Verbindung hinzufügen" size="md" closeOnEscape>
       {/* Stepper */}
       <div className={styles.stepper}>
-        {[0, 1, 2, 3].map(i => (
+        {steps.map((s, i) => (
           <div
-            key={i}
+            key={s}
             className={[
               styles.stepDot,
-              state.step === i ? styles.stepDotActive : '',
-              state.step > i ? styles.stepDotDone : '',
-              !visibleSteps.includes(i) ? styles.stepDotHidden : '',
+              stepIndex === i ? styles.stepDotActive : '',
+              stepIndex > i ? styles.stepDotDone : '',
             ].join(' ')}
           >
-            {state.step > i ? <FaCheck size={10} /> : i + 1}
+            {stepIndex > i ? <FaCheck size={10} /> : i + 1}
           </div>
         ))}
       </div>
 
       <div className={styles.body}>
-        {/* ---- Step 0: Connector ---- */}
-        {state.step === 0 && (
+        {/* ---- Step: Connector ---- */}
+        {state.currentStep === 'connector' && (
           <div className={styles.stepContent}>
             <h3 className={styles.stepTitle}>Anbieter wählen</h3>
             <p className={styles.stepHint}>Welchen Dienst möchtest du verbinden?</p>
             <div className={styles.connectorGrid}>
-              {(['google', 'msft', 'clickup'] as ConnectorType[]).map(type => (
+              {(['google', 'msft', 'clickup', 'infomaniak'] as ConnectorType[]).map(type => (
                 <button
                   key={type}
                   type="button"
                   className={styles.connectorCard}
-                  onClick={() => setConnector(type)}
+                  onClick={() => selectConnector(type)}
                 >
                   <span className={styles.connectorIcon}>{CONNECTOR_ICONS[type]}</span>
                   <span className={styles.connectorLabel}>{CONNECTOR_LABELS[type]}</span>
@@ -260,151 +164,103 @@ export const AddConnectionWizard: React.FC<AddConnectionWizardProps> = ({
           </div>
         )}
 
-        {/* ---- Step 1: Consent ---- */}
-        {state.step === 1 && (
+        {/* ---- Step: Consent ---- */}
+        {state.currentStep === 'consent' && (
           <div className={styles.stepContent}>
-            <div className={styles.consentIcon}><FaDatabase size={32} /></div>
             <h3 className={styles.stepTitle}>Wissensdatenbank</h3>
             <p className={styles.stepBody}>
               Möchtest du Inhalte aus dieser Verbindung in deine persönliche
               Wissensdatenbank aufnehmen, damit die KI beim Antworten auf Informationen
-              aus{' '}
-              {state.connector ? CONNECTOR_LABELS[state.connector] : 'diesem Dienst'}{' '}
-              zurückgreifen kann?
+              aus {state.connector ? CONNECTOR_LABELS[state.connector] : 'diesem Dienst'} zurückgreifen kann?
             </p>
             <p className={styles.stepHint}>
-              Du kannst diese Einstellung später in den Verbindungsdetails ändern.
+              Du kannst dies später jederzeit in der UDB pro Datenquelle steuern.
+            </p>
+            <div className={styles.consentButtons}>
+              <button type="button" className={styles.consentButtonYes} onClick={() => setConsent(true)}>
+                <FaCheck /> Ja, aktivieren
+              </button>
+              <button type="button" className={styles.consentButtonNo} onClick={() => setConsent(false)}>
+                Nein, überspringen
+              </button>
+            </div>
+            <div className={styles.stepNavLeft}>
+              <button type="button" className={styles.navBack} onClick={goBack}>Zurück</button>
+            </div>
+          </div>
+        )}
+
+        {/* ---- Step: MSFT Admin Consent ---- */}
+        {state.currentStep === 'msftAdminConsent' && (
+          <div className={styles.stepContent}>
+            <div style={{ textAlign: 'center', marginBottom: 16 }}>
+              <FaShieldAlt size={32} style={{ color: '#00a4ef' }} />
+            </div>
+            <h3 className={styles.stepTitle}>Organisations-Zustimmung (optional)</h3>
+            <p className={styles.stepBody}>
+              Falls du Mandant-Administrator bist, kannst du jetzt für deine ganze Organisation zustimmen.
+              So müssen andere Benutzer nicht einzeln bestätigen.
+            </p>
+            <p className={styles.stepHint}>
+              Wenn du kein Admin bist oder dies später tun möchtest, überspringe diesen Schritt.
             </p>
             <div className={styles.consentButtons}>
               <button
                 type="button"
                 className={styles.consentButtonYes}
-                onClick={() => setKnowledgeEnabled(true)}
+                onClick={() => { onMsftAdminConsent?.(); setState(s => ({ ...s, adminConsentDone: true })); goNext(); }}
               >
-                <FaCheck /> Ja, aufnehmen
+                <FaShieldAlt /> Admin-Zustimmung erteilen
               </button>
-              <button
-                type="button"
-                className={styles.consentButtonNo}
-                onClick={() => setKnowledgeEnabled(false)}
-              >
-                Nein, überspringen
+              <button type="button" className={styles.consentButtonNo} onClick={goNext}>
+                Überspringen
               </button>
             </div>
             <div className={styles.stepNavLeft}>
-              <button type="button" className={styles.navBack} onClick={() => setStep(0)}>
-                Zurück
-              </button>
+              <button type="button" className={styles.navBack} onClick={goBack}>Zurück</button>
             </div>
           </div>
         )}
 
-        {/* ---- Step 2: Preferences ---- */}
-        {state.step === 2 && (
+        {/* ---- Step: Infomaniak PAT ---- */}
+        {state.currentStep === 'infomaniakPat' && (
           <div className={styles.stepContent}>
-            <h3 className={styles.stepTitle}>Einstellungen</h3>
-            <p className={styles.stepHint}>
-              Steuere, welche Inhalte und in welcher Form sie indexiert werden.
+            <h3 className={styles.stepTitle}>Infomaniak Personal Access Token</h3>
+            <p className={styles.stepBody}>
+              Erstelle einen Personal Access Token in deinem Infomaniak-Konto und füge ihn hier ein.
             </p>
-
-            <div className={styles.prefGroup}>
-              <label className={styles.prefLabel}>
-                <FaShieldAlt className={styles.prefIcon} />
-                Anonymisierung vor dem Indexieren
-                <input
-                  type="checkbox"
-                  checked={!!state.prefs.neutralizeBeforeEmbed}
-                  onChange={e => updatePref('neutralizeBeforeEmbed', e.target.checked)}
-                  className={styles.prefCheck}
-                />
-              </label>
-              <p className={styles.prefHint}>
-                Persönliche Daten (Namen, E-Mail-Adressen) werden vor dem Speichern ersetzt.
-              </p>
-            </div>
-
-            {(state.connector === 'google' || state.connector === 'msft') && (
-              <>
-                <div className={styles.prefGroup}>
-                  <label className={styles.prefLabelRow}>
-                    E-Mail-Inhalt
-                    <select
-                      value={state.prefs.mailContentDepth ?? 'full'}
-                      onChange={e => updatePref('mailContentDepth', e.target.value as any)}
-                      className={styles.prefSelect}
-                    >
-                      <option value="metadata">Nur Metadaten (Betreff, Absender, Datum)</option>
-                      <option value="snippet">Vorschautext (ca. 250 Zeichen)</option>
-                      <option value="full">Vollständiger Text</option>
-                    </select>
-                  </label>
-                </div>
-                <div className={styles.prefGroup}>
-                  <label className={styles.prefLabel}>
-                    E-Mail-Anhänge indexieren
-                    <input
-                      type="checkbox"
-                      checked={!!state.prefs.mailIndexAttachments}
-                      onChange={e => updatePref('mailIndexAttachments', e.target.checked)}
-                      className={styles.prefCheck}
-                    />
-                  </label>
-                </div>
-              </>
-            )}
-
-            {state.connector === 'clickup' && (
-              <div className={styles.prefGroup}>
-                <label className={styles.prefLabelRow}>
-                  Aufgaben-Inhalt
-                  <select
-                    value={state.prefs.clickupScope ?? 'title_description'}
-                    onChange={e => updatePref('clickupScope', e.target.value as any)}
-                    className={styles.prefSelect}
-                  >
-                    <option value="titles">Nur Aufgabentitel</option>
-                    <option value="title_description">Titel + Beschreibung</option>
-                    <option value="with_comments">Titel + Beschreibung + Kommentare</option>
-                  </select>
-                </label>
-              </div>
-            )}
-
-            <div className={styles.prefGroup}>
-              <label className={styles.prefLabelRow}>
-                Zeitfenster (Tage)
-                <input
-                  type="number"
-                  min={0}
-                  max={3650}
-                  value={state.prefs.maxAgeDays ?? 90}
-                  onChange={e => updatePref('maxAgeDays', parseInt(e.target.value, 10) || 0)}
-                  className={styles.prefNumber}
-                />
-              </label>
-              <p className={styles.prefHint}>0 = kein Limit</p>
-            </div>
-
+            <input
+              type="password"
+              placeholder="pat_..."
+              value={state.infomaniakToken}
+              onChange={e => setState(s => ({ ...s, infomaniakToken: e.target.value }))}
+              className={styles.patInput}
+              autoFocus
+            />
             <div className={styles.stepNav}>
-              <button type="button" className={styles.navBack} onClick={() => setStep(1)}>
-                Zurück
-              </button>
-              <button type="button" className={styles.navNext} onClick={() => setStep(3)}>
-                Weiter <FaArrowRight size={12} />
+              <button type="button" className={styles.navBack} onClick={goBack}>Zurück</button>
+              <button
+                type="button"
+                className={styles.navConnect}
+                onClick={handleFinalConnect}
+                disabled={isConnecting || !state.infomaniakToken.trim()}
+              >
+                {isConnecting ? 'Verbinden…' : 'Verbinden'}
+                {!isConnecting && <FaArrowRight size={12} />}
               </button>
             </div>
           </div>
         )}
 
-        {/* ---- Step 3: Summary ---- */}
-        {state.step === 3 && (
+        {/* ---- Step: Connect ---- */}
+        {state.currentStep === 'connect' && (
           <div className={styles.stepContent}>
-            <h3 className={styles.stepTitle}>Zusammenfassung</h3>
+            <h3 className={styles.stepTitle}>Verbindung herstellen</h3>
             <div className={styles.summary}>
               <div className={styles.summaryRow}>
                 <span className={styles.summaryKey}>Anbieter</span>
                 <span className={styles.summaryVal}>
-                  {CONNECTOR_ICONS[state.connector!]}&nbsp;
+                  {state.connector && CONNECTOR_ICONS[state.connector]}&nbsp;
                   {state.connector ? CONNECTOR_LABELS[state.connector] : '—'}
                 </span>
               </div>
@@ -414,96 +270,13 @@ export const AddConnectionWizard: React.FC<AddConnectionWizardProps> = ({
                   {state.knowledgeEnabled ? '✓ Aktiv' : '✗ Nicht aktiv'}
                 </span>
               </div>
-              {state.knowledgeEnabled && (
-                <>
-                  <div className={styles.summaryRow}>
-                    <span className={styles.summaryKey}>Anonymisierung</span>
-                    <span className={styles.summaryVal}>
-                      {state.prefs.neutralizeBeforeEmbed ? 'Ja' : 'Nein'}
-                    </span>
-                  </div>
-                  {(state.connector === 'google' || state.connector === 'msft') && (
-                    <div className={styles.summaryRow}>
-                      <span className={styles.summaryKey}>E-Mail-Tiefe</span>
-                      <span className={styles.summaryVal}>
-                        {{ metadata: 'Nur Metadaten', snippet: 'Vorschautext', full: 'Volltext' }[
-                          state.prefs.mailContentDepth ?? 'full'
-                        ] ?? state.prefs.mailContentDepth}
-                      </span>
-                    </div>
-                  )}
-                  {state.connector === 'clickup' && (
-                    <div className={styles.summaryRow}>
-                      <span className={styles.summaryKey}>Aufgaben-Inhalt</span>
-                      <span className={styles.summaryVal}>
-                        {{
-                          titles: 'Nur Titel',
-                          title_description: 'Titel + Beschreibung',
-                          with_comments: 'Titel + Beschreibung + Kommentare',
-                        }[state.prefs.clickupScope ?? 'title_description'] ?? state.prefs.clickupScope}
-                      </span>
-                    </div>
-                  )}
-                  <div className={styles.summaryRow}>
-                    <span className={styles.summaryKey}>Zeitfenster</span>
-                    <span className={styles.summaryVal}>
-                      {state.prefs.maxAgeDays ? `${state.prefs.maxAgeDays} Tage` : 'Unbegrenzt'}
-                    </span>
-                  </div>
-                </>
-              )}
             </div>
-
-            {/* Cost estimate — only shown when knowledge ingestion is enabled */}
-            {state.knowledgeEnabled && (() => {
-              const est = computeCostEstimate(state.connector, state.prefs);
-              if (!est) return null;
-              return (
-                <div className={styles.costHint}>
-                  <FaInfoCircle className={styles.costHintIcon} />
-                  <div>
-                    <span className={styles.costHintTitle}>Geschätzte Kosten (erster Sync)</span>
-                    <table className={styles.costTable}>
-                      <tbody>
-                        <tr>
-                          <td className={styles.costLabel}>Embedding</td>
-                          <td className={styles.costVal}>
-                            {est.embeddingLow} – {est.embeddingHigh}
-                          </td>
-                        </tr>
-                        {est.neutralizationLow && (
-                          <tr className={styles.costRowNeut}>
-                            <td className={styles.costLabel}>Anonymisierung (Private LLM)</td>
-                            <td className={styles.costVal}>
-                              {est.neutralizationLow} – {est.neutralizationHigh}
-                            </td>
-                          </tr>
-                        )}
-                      </tbody>
-                    </table>
-                    {est.neutralizationLow && (
-                      <span className={styles.costHintWarn}>
-                        ⚠ Anonymisierung ist der Hauptkostentreiber (CHF 0.01 pro LLM-Aufruf, on-premise).
-                      </span>
-                    )}
-                    <span className={styles.costHintNote}>{est.note}</span>
-                  </div>
-                </div>
-              );
-            })()}
-
             <div className={styles.stepNav}>
-              <button
-                type="button"
-                className={styles.navBack}
-                onClick={() => setStep(state.knowledgeEnabled ? 2 : 1)}
-              >
-                Zurück
-              </button>
+              <button type="button" className={styles.navBack} onClick={goBack}>Zurück</button>
               <button
                 type="button"
                 className={styles.navConnect}
-                onClick={handleConnect}
+                onClick={handleFinalConnect}
                 disabled={isConnecting}
               >
                 {isConnecting ? 'Verbinden…' : `Mit ${state.connector ? CONNECTOR_LABELS[state.connector] : '…'} verbinden`}
diff --git a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css
index 3c1ab0f..db2673e 100644
--- a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css
+++ b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css
@@ -101,9 +101,8 @@
   flex-direction: column;
   gap: 0.5rem;
   min-width: 0;
-  /* Share remaining viewport among expanded groups; scroll when many groups */
-  flex: 1 1 280px;
-  min-height: 0;
+  flex: 1 1 400px;
+  min-height: 350px;
 }
 
 .groupSectionCollapsed {
diff --git a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx
index f8b39ec..352f8e8 100644
--- a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx
+++ b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx
@@ -681,7 +681,7 @@ export function FormGeneratorTable<T extends Record<string, any>>({
   resizable = true,
   pagination = true,
   pageSize = 10,
-  pageSizeOptions = [10, 25, 50, 100, 500],
+  pageSizeOptions = [10, 25, 50, 100, 500, 1000, 2000, 10000],
   showPageSizeSelector = true,
   onRowClick,
   onRowSelect,
@@ -740,13 +740,16 @@ export function FormGeneratorTable<T extends Record<string, any>>({
   const [activeViewKey, setActiveViewKey] = useState<string | null>(null);
   const [activeViewId, setActiveViewId] = useState<string | null>(null);
   const [groupByLevels, setGroupByLevels] = useState<GroupByLevelSpec[]>([]);
-  const useSectionsGroupLayout =
-    tableGroupLayoutMode === 'sections' &&
+  const [groupLayoutMode, setGroupLayoutMode] = useState<'inline' | 'sections'>(tableGroupLayoutMode ?? 'inline');
+
+  const canUseSections =
     !!tableContextKey &&
-    groupByLevels.length === 1 &&
+    groupByLevels.length > 0 &&
     typeof hookDataProp?.fetchGroupSectionSummaries === 'function' &&
     typeof hookDataProp?.refetchForSection === 'function';
 
+  const useSectionsGroupLayout = canUseSections && groupLayoutMode === 'sections';
+
   const [sectionSummaries, setSectionSummaries] = useState<
     Array<{ value: string | null; label: string; totalCount: number }>
   >([]);
@@ -1360,6 +1363,7 @@ export function FormGeneratorTable<T extends Record<string, any>>({
           viewKey: activeViewKey,
           groupField: spec.field,
           groupDirection: spec.direction || 'asc',
+          groupByLevels: groupLevelsToApiPayload(groupByLevels),
         });
         if (!cancelled) setSectionSummaries(Array.isArray(list) ? list : []);
       } catch (e) {
@@ -2750,6 +2754,27 @@ export function FormGeneratorTable<T extends Record<string, any>>({
           onUpdateViewGrouping={(id, levels) => void handleUpdateViewGrouping(id, levels)}
           onDeleteView={(id) => void handleDeleteView(id)}
           onReloadViews={() => void reloadViews()}
+          canUseSections={canUseSections}
+          groupLayoutMode={groupLayoutMode}
+          onGroupLayoutModeChange={(mode) => {
+            setGroupLayoutMode(mode);
+            setCollapsedGroups(new Set());
+            setCollapsedSectionKeys(new Set());
+            setCurrentPage(1);
+          }}
+          hasGroupBands={!!effectiveGroupLayout && effectiveGroupLayout.bands.length > 0}
+          onCollapseAll={() => {
+            if (effectiveGroupLayout) {
+              setCollapsedGroups(new Set(effectiveGroupLayout.bands.map((b) => b.path.join('///'))));
+            }
+            if (useSectionsGroupLayout) {
+              setCollapsedSectionKeys(new Set(sectionSummaries.map((g) => g.value === null || g.value === undefined ? '__empty__' : String(g.value))));
+            }
+          }}
+          onExpandAll={() => {
+            setCollapsedGroups(new Set());
+            setCollapsedSectionKeys(new Set());
+          }}
         />
       )}
 
@@ -3341,13 +3366,23 @@ export function FormGeneratorTable<T extends Record<string, any>>({
           )}
           <div className={styles.groupSections}>
             {sectionSummaries.map((g) => {
-              const field = groupByLevels[0].field;
-              const sectionFilter: Record<string, unknown> = {
-                [field]: g.value === null || g.value === undefined ? null : g.value,
-              };
+              const isMultiLevel = groupByLevels.length > 1 && (g as any).filters;
+              const sectionFilter: Record<string, unknown> = isMultiLevel
+                ? (g as any).filters
+                : { [groupByLevels[0].field]: g.value === null || g.value === undefined ? null : g.value };
+              const groupFields = isMultiLevel
+                ? groupByLevels.map((l) => l.field)
+                : [groupByLevels[0].field];
               const sk =
                 g.value === null || g.value === undefined ? '__empty__' : String(g.value);
               const sectionCollapsed = collapsedSectionKeys.has(sk);
+              const groupFieldSet = new Set(groupFields);
+              const sectionColumns = providedColumns.map((col: any) =>
+                groupFieldSet.has(col.key) ? { ...col, filterable: false } : col,
+              );
+              const sectionInitialFilters = Object.fromEntries(
+                Object.entries(filters).filter(([k]) => !groupFieldSet.has(k)),
+              );
               return (
                 <section
                   key={sk}
@@ -3382,9 +3417,9 @@ export function FormGeneratorTable<T extends Record<string, any>>({
                   </button>
                   {!sectionCollapsed && (
                   <FormGeneratorTable<T>
-                    key={`${sk}-r${refreshNonce}-${JSON.stringify(filters)}-${JSON.stringify(sortConfigs)}-${activeViewKey ?? ''}`}
+                    key={`${sk}-r${refreshNonce}-${JSON.stringify(sectionInitialFilters)}-${JSON.stringify(sortConfigs)}-${activeViewKey ?? ''}`}
                     className={styles.groupSectionTableWrap}
-                    columns={providedColumns}
+                    columns={sectionColumns}
                     data={[]}
                     searchable={false}
                     filterable={filterable}
@@ -3415,7 +3450,7 @@ export function FormGeneratorTable<T extends Record<string, any>>({
                     localDataMode
                     viewKeyForQueries={activeViewKey}
                     initialSearchTerm={debouncedSearchTerm}
-                    initialFilters={filters}
+                    initialFilters={sectionInitialFilters}
                     initialSort={sortConfigs}
                     apiEndpoint={apiEndpoint}
                     csvExportQueryParams={hookDataProp?.csvExportQueryParams}
@@ -3427,13 +3462,13 @@ export function FormGeneratorTable<T extends Record<string, any>>({
                         if (!hookDataProp?.refetchForSection) {
                           return { items: [], pagination: null };
                         }
-                        return hookDataProp.refetchForSection(p, sectionFilter, filters);
+                        return hookDataProp.refetchForSection(p, sectionFilter, sectionInitialFilters);
                       },
                       ...(hookDataProp?.fetchFilterValues && typeof hookDataProp.fetchFilterValues === 'function'
                         ? {
                             fetchFilterValues: async (columnKey: string, crossFilters?: Record<string, any>) => {
                               const merged: Record<string, any> = {
-                                ...filters,
+                                ...sectionInitialFilters,
                                 ...(crossFilters || {}),
                                 ...sectionFilter,
                               };
diff --git a/src/components/FormGenerator/TableViewsBar/TableViewsBar.module.css b/src/components/FormGenerator/TableViewsBar/TableViewsBar.module.css
index 090715d..82696c2 100644
--- a/src/components/FormGenerator/TableViewsBar/TableViewsBar.module.css
+++ b/src/components/FormGenerator/TableViewsBar/TableViewsBar.module.css
@@ -153,6 +153,51 @@
   white-space: nowrap;
 }
 
+.layoutToggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border, #cbd5e1);
+  background: var(--color-bg, #fff);
+  color: var(--color-text, #0f172a);
+  cursor: pointer;
+  font-size: 18px;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.layoutToggle:hover {
+  background: var(--bg-hover, rgba(15, 23, 42, 0.04));
+  border-color: var(--color-primary, #64748b);
+}
+
+.collapseExpandGroup {
+  display: inline-flex;
+  gap: 2px;
+}
+
+.collapseBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  border: 1px solid var(--color-border, #cbd5e1);
+  background: var(--color-bg, #fff);
+  color: var(--text-secondary, #94a3b8);
+  cursor: pointer;
+  font-size: 16px;
+  transition: background 0.15s, color 0.15s;
+}
+
+.collapseBtn:hover {
+  background: var(--bg-hover, rgba(15, 23, 42, 0.04));
+  color: var(--color-text, #0f172a);
+}
+
 .viewBlock {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/components/FormGenerator/TableViewsBar/TableViewsBar.tsx b/src/components/FormGenerator/TableViewsBar/TableViewsBar.tsx
index e59743c..80ac03a 100644
--- a/src/components/FormGenerator/TableViewsBar/TableViewsBar.tsx
+++ b/src/components/FormGenerator/TableViewsBar/TableViewsBar.tsx
@@ -1,5 +1,7 @@
 import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import { FaLayerGroup, FaTrash } from 'react-icons/fa';
+import { TbLayoutList, TbLayoutRows } from 'react-icons/tb';
+import { FiChevronsDown, FiChevronsUp } from 'react-icons/fi';
 import { useLanguage } from '../../../providers/language/LanguageContext';
 import styles from './TableViewsBar.module.css';
 
@@ -30,6 +32,12 @@ export interface TableViewsBarProps {
   onUpdateViewGrouping: (viewId: string, levels: GroupByLevelSpec[]) => void | Promise<void>;
   onDeleteView?: (viewId: string) => void | Promise<void>;
   onReloadViews: () => void;
+  canUseSections?: boolean;
+  groupLayoutMode?: 'inline' | 'sections';
+  onGroupLayoutModeChange?: (mode: 'inline' | 'sections') => void;
+  hasGroupBands?: boolean;
+  onCollapseAll?: () => void;
+  onExpandAll?: () => void;
 }
 
 function slugify(name: string): string {
@@ -74,6 +82,12 @@ export function TableViewsBar({
   onUpdateViewGrouping,
   onDeleteView,
   onReloadViews,
+  canUseSections,
+  groupLayoutMode,
+  onGroupLayoutModeChange,
+  hasGroupBands,
+  onCollapseAll,
+  onExpandAll,
 }: TableViewsBarProps) {
   const { t } = useLanguage();
   const [groupMenuOpen, setGroupMenuOpen] = useState(false);
@@ -249,6 +263,41 @@ export function TableViewsBar({
           : `${t('Aktiv')}: ${summary}`}
       </span>
 
+      {canUseSections && groupByLevels.length > 0 && onGroupLayoutModeChange && (
+        <button
+          type="button"
+          className={styles.layoutToggle}
+          title={groupLayoutMode === 'inline' ? t('Zu Sektionen wechseln') : t('Zu Inline wechseln')}
+          aria-label={groupLayoutMode === 'inline' ? t('Zu Sektionen wechseln') : t('Zu Inline wechseln')}
+          onClick={() => onGroupLayoutModeChange(groupLayoutMode === 'inline' ? 'sections' : 'inline')}
+        >
+          {groupLayoutMode === 'inline' ? <TbLayoutRows /> : <TbLayoutList />}
+        </button>
+      )}
+
+      {hasGroupBands && onCollapseAll && onExpandAll && (
+        <div className={styles.collapseExpandGroup}>
+          <button
+            type="button"
+            className={styles.collapseBtn}
+            title={t('Alle zuklappen')}
+            aria-label={t('Alle zuklappen')}
+            onClick={onCollapseAll}
+          >
+            <FiChevronsUp />
+          </button>
+          <button
+            type="button"
+            className={styles.collapseBtn}
+            title={t('Alle aufklappen')}
+            aria-label={t('Alle aufklappen')}
+            onClick={onExpandAll}
+          >
+            <FiChevronsDown />
+          </button>
+        </div>
+      )}
+
       <div className={styles.viewBlock}>
         <span className={styles.viewLabel}>{t('Ansicht')}</span>
         <select
diff --git a/src/components/RagRunningBadge/RagRunningBadge.module.css b/src/components/RagRunningBadge/RagRunningBadge.module.css
new file mode 100644
index 0000000..473a0b2
--- /dev/null
+++ b/src/components/RagRunningBadge/RagRunningBadge.module.css
@@ -0,0 +1,95 @@
+.badgeContainer {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 9000;
+}
+
+.badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  background: var(--primary-color, #F25843);
+  color: #fff;
+  border: none;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+
+.badge:hover {
+  transform: scale(1.04);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.pulseIcon {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #fff;
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(0.8); }
+}
+
+.badgeText {
+  white-space: nowrap;
+}
+
+.dropdown {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 8px;
+  background: var(--card-bg, #fff);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  min-width: 240px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.dropdownHeader {
+  padding: 10px 14px 6px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-secondary, #666);
+  border-bottom: 1px solid var(--border-color, #eee);
+}
+
+.jobRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 14px;
+  font-size: 12px;
+}
+
+.jobRow:not(:last-child) {
+  border-bottom: 1px solid var(--border-color, #f0f0f0);
+}
+
+.jobLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.jobProgress {
+  flex-shrink: 0;
+  margin-left: 8px;
+  font-weight: 600;
+  color: var(--primary-color, #F25843);
+}
diff --git a/src/components/RagRunningBadge/RagRunningBadge.tsx b/src/components/RagRunningBadge/RagRunningBadge.tsx
new file mode 100644
index 0000000..4d4c318
--- /dev/null
+++ b/src/components/RagRunningBadge/RagRunningBadge.tsx
@@ -0,0 +1,71 @@
+import React, { useEffect, useState, useRef, useCallback } from 'react';
+import { useApiRequest } from '../../hooks/useApi';
+import { useLanguage } from '../../providers/language/LanguageContext';
+import styles from './RagRunningBadge.module.css';
+
+interface _RagJob {
+  jobId: string;
+  connectionId: string;
+  connectionLabel?: string;
+  jobType: string;
+  progress: number | null;
+  progressMessage: string;
+}
+
+const _POLL_INTERVAL_MS = 60_000;
+
+export const RagRunningBadge: React.FC = () => {
+  const { t } = useLanguage();
+  const { request } = useApiRequest();
+  const [jobs, setJobs] = useState<_RagJob[]>([]);
+  const [expanded, setExpanded] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const _fetchJobs = useCallback(async () => {
+    try {
+      const result = await request({ url: '/api/rag/inventory/jobs', method: 'get' });
+      setJobs(Array.isArray(result) ? result : []);
+    } catch {
+      setJobs([]);
+    }
+  }, [request]);
+
+  useEffect(() => {
+    _fetchJobs();
+    timerRef.current = setInterval(_fetchJobs, _POLL_INTERVAL_MS);
+    return () => { if (timerRef.current) clearInterval(timerRef.current); };
+  }, [_fetchJobs]);
+
+  if (jobs.length === 0) return null;
+
+  return (
+    <div className={styles.badgeContainer}>
+      <button
+        className={styles.badge}
+        onClick={() => setExpanded(prev => !prev)}
+        title={t('RAG-Indexierung aktiv')}
+      >
+        <span className={styles.pulseIcon} />
+        <span className={styles.badgeText}>
+          {jobs.length} {jobs.length === 1 ? t('Job') : t('Jobs')}
+        </span>
+      </button>
+
+      {expanded && (
+        <div className={styles.dropdown}>
+          <div className={styles.dropdownHeader}>
+            {t('Aktive RAG-Jobs')}
+          </div>
+          {jobs.map(job => (
+            <div key={job.jobId} className={styles.jobRow}>
+              <span className={styles.jobLabel}>{job.connectionLabel || job.jobType}</span>
+              <span className={styles.jobProgress}>
+                {job.progress != null ? `${Math.round(job.progress * 100)}%` : '...'}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/UnifiedDataBar/SourcesTab.tsx b/src/components/UnifiedDataBar/SourcesTab.tsx
index 33605ad..e287097 100644
--- a/src/components/UnifiedDataBar/SourcesTab.tsx
+++ b/src/components/UnifiedDataBar/SourcesTab.tsx
@@ -42,6 +42,7 @@ interface UdbDataSource {
   displayPath?: string;
   scope: string;
   neutralize: boolean;
+  ragIndexEnabled?: boolean;
 }
 
 interface UdbFeatureDataSource {
@@ -689,6 +690,17 @@ const SourcesTab: React.FC<SourcesTabProps> = ({ context, onSourcesChanged, onSe
     }
   }, []);
 
+  /* ── RAG-Index toggle (personal data source, optimistic) ── */
+  const _togglePersonalRagIndex = useCallback(async (ds: UdbDataSource) => {
+    const newValue = !ds.ragIndexEnabled;
+    setDataSources(prev => prev.map(d => d.id === ds.id ? { ...d, ragIndexEnabled: newValue } : d));
+    try {
+      await api.patch(`/api/datasources/${ds.id}/rag-index`, { ragIndexEnabled: newValue });
+    } catch {
+      setDataSources(prev => prev.map(d => d.id === ds.id ? { ...d, ragIndexEnabled: ds.ragIndexEnabled } : d));
+    }
+  }, []);
+
   /* ── Scope change (feature data source, optimistic) ── */
   const _cycleFeatureScope = useCallback(async (fds: UdbFeatureDataSource) => {
     const newScope = _nextScope(fds.scope);
@@ -1018,6 +1030,7 @@ const SourcesTab: React.FC<SourcesTabProps> = ({ context, onSourcesChanged, onSe
           dataSources={dataSources}
           onCycleScope={_cyclePersonalScope}
           onToggleNeutralize={_togglePersonalNeutralize}
+          onToggleRagIndex={_togglePersonalRagIndex}
           onSendToChat={_sendNodeToChat}
           scopeCycleTitle={_scopeCycleTitle}
           selectedKeys={selectedKeys}
@@ -1105,18 +1118,20 @@ interface _TreeNodeViewProps {
   dataSources: UdbDataSource[];
   onCycleScope: (ds: UdbDataSource) => void;
   onToggleNeutralize: (ds: UdbDataSource) => void;
+  onToggleRagIndex: (ds: UdbDataSource) => void;
   onSendToChat?: (params: { connectionId: string; sourceType: string; path: string; label: string; displayPath?: string }) => void;
   scopeCycleTitle: (scope: string) => string;
   selectedKeys: Set<string>;
   onSelect: (node: TreeNode, e: React.MouseEvent) => void;
   inheritedScope?: string;
   inheritedNeutralize?: boolean;
+  inheritedRagIndex?: boolean;
 }
 
 const _TreeNodeView: React.FC<_TreeNodeViewProps> = ({
   node, depth, onToggle, onEnsureDs, isAdded, addingPath,
-  dataSources, onCycleScope, onToggleNeutralize, onSendToChat, scopeCycleTitle,
-  selectedKeys, onSelect, inheritedScope, inheritedNeutralize,
+  dataSources, onCycleScope, onToggleNeutralize, onToggleRagIndex, onSendToChat, scopeCycleTitle,
+  selectedKeys, onSelect, inheritedScope, inheritedNeutralize, inheritedRagIndex,
 }) => {
   const { t } = useLanguage();
   const [hovered, setHovered] = useState(false);
@@ -1128,8 +1143,10 @@ const _TreeNodeView: React.FC<_TreeNodeViewProps> = ({
 
   const effectiveScope = ds?.scope ?? inheritedScope;
   const effectiveNeutralize = ds?.neutralize ?? inheritedNeutralize ?? false;
+  const effectiveRagIndex = ds?.ragIndexEnabled ?? inheritedRagIndex ?? false;
   const childInheritedScope = ds?.scope ?? inheritedScope;
   const childInheritedNeutralize = ds?.neutralize ?? inheritedNeutralize;
+  const childInheritedRagIndex = ds?.ragIndexEnabled ?? inheritedRagIndex;
 
   const _dragPayload = {
     connectionId: node.connectionId,
@@ -1261,6 +1278,24 @@ const _TreeNodeView: React.FC<_TreeNodeViewProps> = ({
         >
           {'\uD83D\uDD12'}
         </button>
+        <button
+          onClick={async (e) => {
+            e.stopPropagation();
+            if (ds) { onToggleRagIndex(ds); return; }
+            const newId = await onEnsureDs(node);
+            if (newId) {
+              try { await api.patch(`/api/datasources/${newId}/rag-index`, { ragIndexEnabled: !effectiveRagIndex }); } catch {}
+            }
+          }}
+          style={{
+            background: 'none', border: 'none', cursor: 'pointer',
+            fontSize: 12, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center',
+            opacity: (ds?.ragIndexEnabled ?? effectiveRagIndex) ? 1 : 0.35,
+          }}
+          title={(ds?.ragIndexEnabled ?? effectiveRagIndex) ? t('RAG-Indexierung an') : t('RAG-Indexierung aus')}
+        >
+          {'\uD83E\uDDE0'}
+        </button>
 
       </div>
 
@@ -1278,12 +1313,14 @@ const _TreeNodeView: React.FC<_TreeNodeViewProps> = ({
               dataSources={dataSources}
               onCycleScope={onCycleScope}
               onToggleNeutralize={onToggleNeutralize}
+              onToggleRagIndex={onToggleRagIndex}
               onSendToChat={onSendToChat}
               scopeCycleTitle={scopeCycleTitle}
               selectedKeys={selectedKeys}
               onSelect={onSelect}
               inheritedScope={childInheritedScope}
               inheritedNeutralize={childInheritedNeutralize}
+              inheritedRagIndex={childInheritedRagIndex}
             />
           ))}
         </div>
diff --git a/src/config/pageRegistry.tsx b/src/config/pageRegistry.tsx
index ea22f44..51ccfbd 100644
--- a/src/config/pageRegistry.tsx
+++ b/src/config/pageRegistry.tsx
@@ -53,6 +53,7 @@ export const PAGE_ICONS: Record<string, React.ReactNode> = {
   'page.system.billingAdmin': <FaMoneyBillAlt />,
   'page.system.statistics': <FaChartBar />,
   'page.system.automations': <FaRobot />,
+  'page.system.ragInventory': <FaDatabase />,
 
   // Billing pages (legacy compat)
   'page.billing.dashboard': <FaWallet />,
diff --git a/src/hooks/useConnections.ts b/src/hooks/useConnections.ts
index 299480c..c6681d3 100644
--- a/src/hooks/useConnections.ts
+++ b/src/hooks/useConnections.ts
@@ -101,17 +101,15 @@ export function useConnections() {
       viewKey?: string | null;
       groupField: string;
       groupDirection?: 'asc' | 'desc';
+      groupByLevels?: Array<{ field: string; nullLabel?: string; direction?: string }>;
     }) => {
+      const levels = base.groupByLevels?.length
+        ? base.groupByLevels
+        : [{ field: base.groupField, nullLabel: '—', direction: base.groupDirection || 'asc' }];
       const pObj: Record<string, unknown> = {
         page: 1,
         pageSize: 25,
-        groupByLevels: [
-          {
-            field: base.groupField,
-            nullLabel: '—',
-            direction: base.groupDirection || 'asc',
-          },
-        ],
+        groupByLevels: levels,
       };
       if (base.search) (pObj as { search?: string }).search = base.search;
       if (base.filters && Object.keys(base.filters).length) (pObj as { filters: typeof base.filters }).filters = base.filters;
diff --git a/src/hooks/useFiles.ts b/src/hooks/useFiles.ts
index a770388..704d778 100644
--- a/src/hooks/useFiles.ts
+++ b/src/hooks/useFiles.ts
@@ -149,17 +149,15 @@ export function useUserFiles() {
       viewKey?: string | null;
       groupField: string;
       groupDirection?: 'asc' | 'desc';
+      groupByLevels?: Array<{ field: string; nullLabel?: string; direction?: string }>;
     }) => {
+      const levels = base.groupByLevels?.length
+        ? base.groupByLevels
+        : [{ field: base.groupField, nullLabel: '—', direction: base.groupDirection || 'asc' }];
       const pObj: Record<string, unknown> = {
         page: 1,
         pageSize: 25,
-        groupByLevels: [
-          {
-            field: base.groupField,
-            nullLabel: '—',
-            direction: base.groupDirection || 'asc',
-          },
-        ],
+        groupByLevels: levels,
       };
       if (base.search) (pObj as { search?: string }).search = base.search;
       if (base.filters && Object.keys(base.filters).length) (pObj as { filters: typeof base.filters }).filters = base.filters;
diff --git a/src/hooks/usePrompts.ts b/src/hooks/usePrompts.ts
index 26cef0b..004ed29 100644
--- a/src/hooks/usePrompts.ts
+++ b/src/hooks/usePrompts.ts
@@ -98,17 +98,15 @@ export function usePrompts() {
       viewKey?: string | null;
       groupField: string;
       groupDirection?: 'asc' | 'desc';
+      groupByLevels?: Array<{ field: string; nullLabel?: string; direction?: string }>;
     }) => {
+      const levels = base.groupByLevels?.length
+        ? base.groupByLevels
+        : [{ field: base.groupField, nullLabel: '—', direction: base.groupDirection || 'asc' }];
       const pObj: Record<string, unknown> = {
         page: 1,
         pageSize: 25,
-        groupByLevels: [
-          {
-            field: base.groupField,
-            nullLabel: '—',
-            direction: base.groupDirection || 'asc',
-          },
-        ],
+        groupByLevels: levels,
       };
       if (base.search) (pObj as { search?: string }).search = base.search;
       if (base.filters && Object.keys(base.filters).length) (pObj as { filters: typeof base.filters }).filters = base.filters;
diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
index 880c702..bc4e2c9 100644
--- a/src/layouts/MainLayout.tsx
+++ b/src/layouts/MainLayout.tsx
@@ -14,6 +14,7 @@ import { WorkspaceKeepAlive } from '../pages/views/workspace/WorkspaceKeepAlive'
 import { CommcoachKeepAlive } from '../pages/views/commcoach/CommcoachKeepAlive';
 import { GraphicalEditorKeepAlive } from '../pages/views/graphicalEditor/GraphicalEditorKeepAlive';
 import { AdminLanguagesKeepAlive } from '../pages/admin/AdminLanguagesKeepAlive';
+import { RagRunningBadge } from '../components/RagRunningBadge/RagRunningBadge';
 import styles from './MainLayout.module.css';
 
 import { useLanguage } from '../providers/language/LanguageContext';
@@ -132,6 +133,8 @@ const MainLayoutInner: React.FC = () => {
           <Outlet />
         </div>
       </main>
+
+      <RagRunningBadge />
     </div>
   );
 };
diff --git a/src/pages/FeatureView.tsx b/src/pages/FeatureView.tsx
index 826b195..cc0b8cb 100644
--- a/src/pages/FeatureView.tsx
+++ b/src/pages/FeatureView.tsx
@@ -35,7 +35,6 @@ import { GraphicalEditorTemplatesPage } from './views/graphicalEditor/GraphicalE
 import { WorkspacePage } from './views/workspace/WorkspacePage';
 import { WorkspaceEditorPage } from './views/workspace/WorkspaceEditorPage';
 import { WorkspaceSettingsPage } from './views/workspace/WorkspaceSettingsPage';
-import { WorkspaceRagInsightsPage } from './views/workspace/WorkspaceRagInsightsPage';
 
 // Teamsbot Views
 import { TeamsbotDashboardView } from './views/teamsbot/TeamsbotDashboardView';
@@ -155,7 +154,6 @@ const VIEW_COMPONENTS: Record<string, Record<string, ViewComponent>> = {
   workspace: {
     dashboard: WorkspacePage,
     editor: WorkspaceEditorPage,
-    'rag-insights': WorkspaceRagInsightsPage,
     settings: WorkspaceSettingsPage,
   },
   teamsbot: {
diff --git a/src/pages/RagInventoryPage.module.css b/src/pages/RagInventoryPage.module.css
new file mode 100644
index 0000000..b74811d
--- /dev/null
+++ b/src/pages/RagInventoryPage.module.css
@@ -0,0 +1,334 @@
+.page {
+  padding: 24px 32px;
+  max-width: 1100px;
+}
+
+/* ── Page Header ── */
+.pageHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.headerLeft {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.headerIcon {
+  font-size: 24px;
+  color: var(--color-primary, #2563eb);
+  flex-shrink: 0;
+}
+
+.pageTitle {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.pageDesc {
+  font-size: 0.8125rem;
+  color: var(--color-text-muted, #6b7280);
+  margin: 2px 0 0;
+}
+
+.headerRight {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.filterGroup {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filterLabel {
+  font-size: 0.8125rem;
+  color: var(--color-text-muted, #6b7280);
+  white-space: nowrap;
+}
+
+.scopeSelect {
+  padding: 7px 12px;
+  border: 1px solid var(--color-border, #e5e7eb);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  background: var(--color-surface, #fff);
+  color: var(--color-text, #111);
+  cursor: pointer;
+  min-width: 180px;
+}
+
+.scopeSelect:focus {
+  outline: none;
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
+}
+
+.checkboxLabel {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.8125rem;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.checkboxLabel input {
+  cursor: pointer;
+}
+
+/* ── Loading / Error ── */
+.loading {
+  padding: 32px;
+  text-align: center;
+  color: var(--color-text-muted, #6b7280);
+}
+
+.error {
+  padding: 12px 16px;
+  border-radius: 6px;
+  background: #fef2f2;
+  color: #b91c1c;
+  font-size: 0.875rem;
+  margin-bottom: 16px;
+}
+
+/* ── Totals ── */
+.totals {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 20px;
+  font-size: 0.875rem;
+}
+
+.totalLabel {
+  color: var(--color-text-muted, #6b7280);
+}
+
+.totalValue {
+  font-size: 1.125rem;
+}
+
+.totalBytes {
+  color: var(--color-text-muted, #6b7280);
+  font-size: 0.8125rem;
+}
+
+/* ── Content ── */
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* ── Connection Card ── */
+.connectionCard {
+  border: 1px solid var(--color-border, #e5e7eb);
+  border-radius: 8px;
+  padding: 16px;
+  background: var(--color-surface, #fff);
+}
+
+.connectionHeader {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.authority {
+  font-weight: 600;
+  font-size: 0.875rem;
+  text-transform: capitalize;
+}
+
+.email {
+  color: var(--color-text-muted, #6b7280);
+  font-size: 0.8125rem;
+  flex: 1;
+}
+
+.connChunks {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-primary, #2563eb);
+  background: var(--color-info-bg, #eff6ff);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+.consentToggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-primary, #2563eb);
+  display: flex;
+  align-items: center;
+}
+
+/* ── Consent Warning ── */
+.consentWarning {
+  padding: 8px 12px;
+  background: #fffbeb;
+  border: 1px solid #fde68a;
+  border-radius: 6px;
+  margin-bottom: 8px;
+  font-size: 0.8125rem;
+  color: #92400e;
+}
+
+/* ── Error Banner ── */
+.errorBanner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 6px;
+  margin-bottom: 8px;
+  font-size: 0.8125rem;
+  color: #b91c1c;
+}
+
+.reindexBtn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  background: var(--color-info-bg, #eff6ff);
+  color: var(--color-primary, #2563eb);
+  border: 1px solid var(--color-primary-light, #93c5fd);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+.reindexBtn:hover {
+  background: #dbeafe;
+}
+
+.reindexHint {
+  display: flex;
+  padding: 6px 0;
+  margin-bottom: 4px;
+}
+
+/* ── Job Banner ── */
+.jobBanner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--color-info-bg, #eff6ff);
+  border-radius: 6px;
+  margin-bottom: 8px;
+  font-size: 0.8125rem;
+}
+
+.spinIcon {
+  animation: spin 1.5s linear infinite;
+  color: var(--color-primary, #2563eb);
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.stopBtn {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  background: #fef2f2;
+  color: #b91c1c;
+  border: 1px solid #fecaca;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.stopBtn:hover {
+  background: #fee2e2;
+}
+
+/* ── DataSource List ── */
+.dsList {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.dsRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--color-border, #f3f4f6);
+  font-size: 0.8125rem;
+}
+
+.dsRow:last-child {
+  border-bottom: none;
+}
+
+.dsActive {
+  background: rgba(37, 99, 235, 0.03);
+}
+
+.dsLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dsType {
+  color: var(--color-text-muted, #6b7280);
+  font-size: 0.75rem;
+  min-width: 90px;
+}
+
+.dsChunks {
+  font-size: 0.75rem;
+  min-width: 70px;
+  text-align: right;
+}
+
+.dsIndex {
+  width: 24px;
+  text-align: center;
+}
+
+.dsEmpty {
+  padding: 12px;
+  text-align: center;
+  color: var(--color-text-muted, #9ca3af);
+  font-size: 0.8125rem;
+  font-style: italic;
+}
+
+/* ── Empty State ── */
+.emptyState {
+  padding: 48px;
+  text-align: center;
+  color: var(--color-text-muted, #9ca3af);
+  font-size: 0.9rem;
+}
diff --git a/src/pages/RagInventoryPage.tsx b/src/pages/RagInventoryPage.tsx
new file mode 100644
index 0000000..4d4a63e
--- /dev/null
+++ b/src/pages/RagInventoryPage.tsx
@@ -0,0 +1,255 @@
+/**
+ * RagInventoryPage — Global RAG knowledge store management.
+ *
+ * Accessible via Start > Nutzung > RAG-Inventar.
+ * Context selector top-right (same pattern as BillingDataView / Statistiken):
+ *   Dropdown: "Meine Verbindungen" | "Mandant: XY" | "Plattform (alle)"
+ *   Checkbox: "nur meine Daten"
+ */
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { useLanguage } from '../providers/language/LanguageContext';
+import { useApiRequest } from '../hooks/useApi';
+import { useUserMandates } from '../hooks/useUserMandates';
+import type { RagInventoryDto, RagConnectionDto } from '../api/connectionApi';
+import { FaDatabase, FaStop, FaSync, FaToggleOn, FaToggleOff, FaRedo, FaExclamationTriangle } from 'react-icons/fa';
+import { mandateDisplayLabel } from '../utils/mandateDisplayUtils';
+import styles from './RagInventoryPage.module.css';
+
+export const RagInventoryPage: React.FC = () => {
+  const { t } = useLanguage();
+  const { request } = useApiRequest();
+  const { fetchMandates } = useUserMandates();
+
+  const [mandates, setMandates] = useState<any[]>([]);
+  const [mandatesLoading, setMandatesLoading] = useState(true);
+  const [selectedScope, setSelectedScope] = useState<string>('personal');
+  const [onlyMyData, setOnlyMyData] = useState(false);
+
+  const [inventory, setInventory] = useState<RagInventoryDto | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      setMandatesLoading(true);
+      try {
+        const data = await fetchMandates();
+        if (!cancelled) {
+          const list = Array.isArray(data) ? data : [];
+          setMandates(list);
+          if (list.length === 1) setSelectedScope(list[0].id);
+        }
+      } catch {}
+      finally { if (!cancelled) setMandatesLoading(false); }
+    })();
+    return () => { cancelled = true; };
+  }, [fetchMandates]);
+
+  const _apiEndpoint = useMemo(() => {
+    if (selectedScope === 'personal') return '/api/rag/inventory/me';
+    if (selectedScope === 'platform') return '/api/rag/inventory/platform';
+    return '/api/rag/inventory/mandate';
+  }, [selectedScope]);
+
+  const _fetchInventory = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const params: Record<string, string> = {};
+      if (selectedScope !== 'personal' && selectedScope !== 'platform') {
+        params.mandateId = selectedScope;
+      }
+      if (onlyMyData) params.onlyMine = 'true';
+      const data = await request({ url: _apiEndpoint, method: 'get', params });
+      setInventory(data);
+    } catch (err: any) {
+      if (err?.message?.includes('403')) {
+        setError(t('Keine Berechtigung für diese Sicht.'));
+      } else {
+        setError(err?.message || t('Fehler beim Laden'));
+      }
+      setInventory(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [request, _apiEndpoint, selectedScope, onlyMyData, t]);
+
+  useEffect(() => {
+    _fetchInventory();
+  }, [_fetchInventory]);
+
+  useEffect(() => {
+    pollRef.current = setInterval(() => {
+      if (document.visibilityState === 'visible') _fetchInventory();
+    }, 60000);
+    return () => { if (pollRef.current) clearInterval(pollRef.current); };
+  }, [_fetchInventory]);
+
+  const _handleStop = async (connectionId: string) => {
+    try {
+      await request({ url: `/api/connections/${connectionId}/knowledge-stop`, method: 'post' });
+      _fetchInventory();
+    } catch {}
+  };
+
+  const _handleReindex = async (connectionId: string) => {
+    try {
+      await request({ url: `/api/rag/inventory/reindex/${connectionId}`, method: 'post' });
+      _fetchInventory();
+    } catch {}
+  };
+
+  const _handleConsentToggle = async (connectionId: string, currentEnabled: boolean) => {
+    if (!currentEnabled || window.confirm(t('Alle indexierten Inhalte dieser Verbindung werden entfernt. Fortfahren?'))) {
+      try {
+        await request({
+          url: `/api/connections/${connectionId}/knowledge-consent`,
+          method: 'patch',
+          data: { enabled: !currentEnabled },
+        });
+        _fetchInventory();
+      } catch {}
+    }
+  };
+
+  const scopeOptions = useMemo(() => {
+    const opts: { value: string; label: string }[] = [
+      { value: 'personal', label: t('Meine Verbindungen') },
+    ];
+    for (const m of mandates) {
+      opts.push({ value: m.id, label: t('Mandant: {name}', { name: mandateDisplayLabel(m) }) });
+    }
+    opts.push({ value: 'platform', label: t('Plattform (alle)') });
+    return opts;
+  }, [mandates, t]);
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.pageHeader}>
+        <div className={styles.headerLeft}>
+          <FaDatabase className={styles.headerIcon} />
+          <div>
+            <h1 className={styles.pageTitle}>{t('RAG-Inventar')}</h1>
+            <p className={styles.pageDesc}>
+              {t('Übersicht und Steuerung der indexierten Wissensdaten.')}
+            </p>
+          </div>
+        </div>
+        <div className={styles.headerRight}>
+          <div className={styles.filterGroup}>
+            <label className={styles.filterLabel}>{t('Kontext:')}</label>
+            <select
+              className={styles.scopeSelect}
+              value={selectedScope}
+              onChange={e => setSelectedScope(e.target.value)}
+              disabled={mandatesLoading}
+            >
+              {scopeOptions.map(opt => (
+                <option key={opt.value} value={opt.value}>{opt.label}</option>
+              ))}
+            </select>
+          </div>
+          <label className={styles.checkboxLabel}>
+            <input
+              type="checkbox"
+              checked={onlyMyData}
+              onChange={e => setOnlyMyData(e.target.checked)}
+            />
+            {t('nur meine Daten')}
+          </label>
+        </div>
+      </header>
+
+      {loading && !inventory && <div className={styles.loading}>{t('Laden...')}</div>}
+      {error && <div className={styles.error}>{error}</div>}
+
+      {inventory && (
+        <div className={styles.content}>
+          <div className={styles.totals}>
+            <span className={styles.totalLabel}>{t('Total Chunks')}:</span>
+            <strong className={styles.totalValue}>{inventory.totals?.chunks ?? 0}</strong>
+            {inventory.totals?.bytes != null && inventory.totals.bytes > 0 && (
+              <span className={styles.totalBytes}>{(inventory.totals.bytes / 1024 / 1024).toFixed(1)} MB</span>
+            )}
+          </div>
+
+          {(inventory.connections || []).map((conn: RagConnectionDto) => (
+            <div key={conn.id} className={styles.connectionCard}>
+              <div className={styles.connectionHeader}>
+                <span className={styles.authority}>{conn.authority}</span>
+                <span className={styles.email}>{conn.externalEmail}</span>
+                {conn.totalChunks > 0 && (
+                  <span className={styles.connChunks}>{conn.totalChunks} chunks</span>
+                )}
+                <button
+                  className={styles.consentToggle}
+                  onClick={() => _handleConsentToggle(conn.id, conn.knowledgeIngestionEnabled)}
+                  title={conn.knowledgeIngestionEnabled ? t('Wissensdatenbank deaktivieren') : t('Wissensdatenbank aktivieren')}
+                >
+                  {conn.knowledgeIngestionEnabled ? <FaToggleOn size={20} /> : <FaToggleOff size={20} />}
+                </button>
+              </div>
+
+              {!conn.knowledgeIngestionEnabled && conn.dataSources.length > 0 && (
+                <div className={styles.consentWarning}>
+                  {t('Wissensdatenbank deaktiviert — Indexierung pausiert. Toggle aktivieren um Daten zu indexieren.')}
+                </div>
+              )}
+
+              {conn.lastError && conn.runningJobs.length === 0 && (
+                <div className={styles.errorBanner}>
+                  <FaExclamationTriangle />
+                  <span>{t('Letzter Job fehlgeschlagen')}: {conn.lastError.errorMessage || t('unbekannter Fehler')}</span>
+                  <button className={styles.reindexBtn} onClick={() => _handleReindex(conn.id)} title={t('Neu indexieren')}>
+                    <FaRedo size={12} /> {t('Neu indexieren')}
+                  </button>
+                </div>
+              )}
+
+              {conn.runningJobs.length > 0 && (
+                <div className={styles.jobBanner}>
+                  <FaSync className={styles.spinIcon} />
+                  <span>{conn.runningJobs[0].progressMessage || `${Math.round(conn.runningJobs[0].progress * 100)}%`}</span>
+                  <button className={styles.stopBtn} onClick={() => _handleStop(conn.id)} title={t('Indexierung stoppen')}>
+                    <FaStop size={12} /> {t('Stop')}
+                  </button>
+                </div>
+              )}
+
+              {!conn.lastError && conn.runningJobs.length === 0 && conn.dataSources.some(ds => ds.ragIndexEnabled) && conn.totalChunks === 0 && conn.knowledgeIngestionEnabled && (
+                <div className={styles.reindexHint}>
+                  <button className={styles.reindexBtn} onClick={() => _handleReindex(conn.id)} title={t('Indexierung starten')}>
+                    <FaRedo size={12} /> {t('Indexierung starten')}
+                  </button>
+                </div>
+              )}
+
+              <div className={styles.dsList}>
+                {conn.dataSources.map(ds => (
+                  <div key={ds.id} className={`${styles.dsRow} ${ds.ragIndexEnabled ? styles.dsActive : ''}`}>
+                    <span className={styles.dsLabel}>{ds.label || ds.path}</span>
+                    <span className={styles.dsType}>{ds.sourceType}</span>
+                    <span className={styles.dsChunks}>{ds.chunkCount} chunks</span>
+                    <span className={styles.dsIndex}>{ds.ragIndexEnabled ? '\uD83E\uDDE0' : '\u2014'}</span>
+                  </div>
+                ))}
+                {conn.dataSources.length === 0 && (
+                  <div className={styles.dsEmpty}>{t('Keine Datenquellen konfiguriert')}</div>
+                )}
+              </div>
+            </div>
+          ))}
+
+          {(inventory.connections || []).length === 0 && (
+            <div className={styles.emptyState}>{t('Keine Daten für diese Sicht vorhanden.')}</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RagInventoryPage;
diff --git a/src/pages/basedata/ConnectionsPage.tsx b/src/pages/basedata/ConnectionsPage.tsx
index 64e7826..695d10a 100644
--- a/src/pages/basedata/ConnectionsPage.tsx
+++ b/src/pages/basedata/ConnectionsPage.tsx
@@ -9,8 +9,7 @@ import React, { useState, useMemo, useEffect, useRef } from 'react';
 import { useConnections, type Connection } from '../../hooks/useConnections';
 import { FormGeneratorTable } from '../../components/FormGenerator/FormGeneratorTable';
 import { FormGeneratorForm } from '../../components/FormGenerator/FormGeneratorForm';
-import { FaSync, FaLink, FaRedo, FaShieldAlt, FaPlus, FaSpinner, FaTimes, FaSyncAlt, FaCloud } from 'react-icons/fa';
-import { getApiBaseUrl } from '../../../config/config';
+import { FaSync, FaLink, FaRedo, FaPlus, FaSpinner, FaTimes, FaSyncAlt } from 'react-icons/fa';
 import styles from '../admin/Admin.module.css';
 import bannerStyles from './ConnectionsPage.module.css';
 import { AddConnectionWizard } from '../../components/AddConnectionWizard/AddConnectionWizard';
@@ -42,8 +41,6 @@ export const ConnectionsPage: React.FC = () => {
     deleteConnection,
     handleInlineUpdate,
     createConnectionAndAuth,
-    createInfomaniakConnection,
-    submitInfomaniakToken,
     connectWithPopup,
     refreshMicrosoftToken,
     refreshGoogleToken,
@@ -54,7 +51,6 @@ export const ConnectionsPage: React.FC = () => {
   const [deletingConnections, setDeletingConnections] = useState<Set<string>>(new Set());
   const [refreshingConnections, setRefreshingConnections] = useState<Set<string>>(new Set());
   const [reconnectingConnections, setReconnectingConnections] = useState<Set<string>>(new Set());
-  const [adminConsentPending, setAdminConsentPending] = useState(false);
   const [wizardOpen, setWizardOpen] = useState(false);
   // Banner shown while knowledge bootstrap is running in the background
   const [syncBanner, setSyncBanner] = useState<{
@@ -73,15 +69,6 @@ export const ConnectionsPage: React.FC = () => {
     setSyncBanner(null);
   };
 
-  // Infomaniak PAT modal: holds the pending connectionId (created up-front so the
-  // user only commits if they actually paste a valid token; on cancel we delete it).
-  const [infomaniakModal, setInfomaniakModal] = useState<{
-    connectionId: string;
-    token: string;
-    submitting: boolean;
-    error: string | null;
-  } | null>(null);
-
   // Initial fetch
   useEffect(() => {
     refetch();
@@ -242,76 +229,6 @@ export const ConnectionsPage: React.FC = () => {
     }
   };
 
-  const handleCreateInfomaniak = async () => {
-    if (isConnecting || infomaniakModal) return;
-    try {
-      const newConnection = await createInfomaniakConnection();
-      setInfomaniakModal({
-        connectionId: newConnection.id,
-        token: '',
-        submitting: false,
-        error: null,
-      });
-      refetch();
-    } catch (error) {
-      console.error('Error creating Infomaniak connection:', error);
-    }
-  };
-
-  const handleInfomaniakCancel = async () => {
-    if (!infomaniakModal) return;
-    const { connectionId, submitting } = infomaniakModal;
-    if (submitting) return;
-    setInfomaniakModal(null);
-    try {
-      await deleteConnection(connectionId);
-      refetch();
-    } catch (error) {
-      console.error('Error rolling back pending Infomaniak connection:', error);
-    }
-  };
-
-  const handleInfomaniakSubmit = async () => {
-    if (!infomaniakModal) return;
-    const trimmed = infomaniakModal.token.trim();
-    if (!trimmed) {
-      setInfomaniakModal({ ...infomaniakModal, error: t('Bitte Personal Access Token einfügen') });
-      return;
-    }
-    setInfomaniakModal({ ...infomaniakModal, submitting: true, error: null });
-    try {
-      await submitInfomaniakToken(infomaniakModal.connectionId, trimmed);
-      setInfomaniakModal(null);
-      refetch();
-    } catch (error: any) {
-      const detail =
-        error?.response?.data?.detail ||
-        error?.message ||
-        t('Token konnte nicht gespeichert werden');
-      setInfomaniakModal((prev) =>
-        prev ? { ...prev, submitting: false, error: String(detail) } : prev
-      );
-    }
-  };
-
-  // Open Microsoft Admin Consent flow in a popup
-  const handleAdminConsent = () => {
-    setAdminConsentPending(true);
-    const consentUrl = `${getApiBaseUrl()}/api/msft/adminconsent`;
-    const popup = window.open(consentUrl, 'msft-admin-consent', 'width=600,height=700,scrollbars=yes,resizable=yes');
-    if (!popup) {
-      setAdminConsentPending(false);
-      return;
-    }
-    const checkClosed = setInterval(() => {
-      if (popup.closed) {
-        clearInterval(checkClosed);
-        setAdminConsentPending(false);
-        refetch();
-      }
-    }, 1000);
-  };
-
   // Form attributes for edit modal
   const formAttributes = useMemo(() => {
     const excludedFields = [
@@ -348,14 +265,6 @@ export const ConnectionsPage: React.FC = () => {
           </p>
         </div>
         <div className={styles.headerActions}>
-          <button
-            className={styles.secondaryButton}
-            onClick={handleAdminConsent}
-            disabled={adminConsentPending}
-            title={t('Microsoft Admin-Zustimmung für die gesamte Organisation erteilen')}
-          >
-            <FaShieldAlt /> {t('Admin-Zustimmung')}
-          </button>
           <button 
             className={styles.secondaryButton} 
             onClick={() => refetch()}
@@ -364,25 +273,14 @@ export const ConnectionsPage: React.FC = () => {
             <FaSync className={loading ? 'spinning' : ''} /> {t('Aktualisieren')}
           </button>
           {canCreate && (
-            <>
-              <button
-                type="button"
-                className={styles.primaryButton}
-                onClick={() => setWizardOpen(true)}
-                disabled={isConnecting}
-              >
-                <FaPlus /> {t('Verbindung hinzufügen')}
-              </button>
-              <button
-                type="button"
-                className={styles.secondaryButton}
-                onClick={handleCreateInfomaniak}
-                disabled={isConnecting}
-                title={t('Infomaniak-Konto verbinden (kDrive + Mail)')}
-              >
-                <FaCloud /> Infomaniak
-              </button>
-            </>
+            <button
+              type="button"
+              className={styles.primaryButton}
+              onClick={() => setWizardOpen(true)}
+              disabled={isConnecting}
+            >
+              <FaPlus /> {t('Verbindung hinzufügen')}
+            </button>
           )}
         </div>
       </div>
@@ -419,7 +317,7 @@ export const ConnectionsPage: React.FC = () => {
             columns={columns}
             apiEndpoint="/api/connections/"
             tableContextKey="connections"
-            tableGroupLayoutMode="sections"
+            tableGroupLayoutMode="inline"
             loading={loading}
             pagination={true}
             pageSize={25}
@@ -519,137 +417,6 @@ export const ConnectionsPage: React.FC = () => {
         </div>
       )}
 
-      {/* Infomaniak Personal Access Token Modal */}
-      {infomaniakModal && (
-        <div className={styles.modalOverlay}>
-          <div className={styles.modal} style={{ maxWidth: 640 }}>
-            <div className={styles.modalHeader}>
-              <h2 className={styles.modalTitle}>{t('Infomaniak verbinden')}</h2>
-              <button
-                className={styles.modalClose}
-                onClick={handleInfomaniakCancel}
-                disabled={infomaniakModal.submitting}
-              >
-                ✕
-              </button>
-            </div>
-            <div className={styles.modalContent}>
-              <p style={{ marginTop: 0 }}>
-                {t(
-                  'Infomaniak nutzt für kDrive und kSuite keine OAuth-Anmeldung, sondern ein persönliches API-Token (PAT). Erstelle das Token einmalig im Infomaniak Manager und füge es unten ein.'
-                )}
-              </p>
-              <ol style={{ paddingLeft: 20 }}>
-                <li>
-                  {t('Öffne den Infomaniak-Manager:')}{' '}
-                  <a
-                    href="https://manager.infomaniak.com/v3/ng/accounts/token/list"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    manager.infomaniak.com – API-Tokens
-                  </a>
-                </li>
-                <li>
-                  {t('Klicke auf')} <code>{t('Token erstellen')}</code>{' '}
-                  {t('und vergib einen aussagekräftigen Namen, z. B.')}{' '}
-                  <code>PowerOn</code>.{' '}
-                  {t('Application bleibt auf')} <code>Default application</code>.
-                </li>
-                <li>
-                  {t('Suche im Scope-Feld nach')}{' '}
-                  <strong>{t('allen vier')}</strong>{' '}
-                  {t('Berechtigungen und kreuze sie an:')}
-                  <ul style={{ marginTop: 6, marginBottom: 6, paddingLeft: 20 }}>
-                    <li>
-                      <code>drive</code> — {t('kDrive (Pflicht, heute aktiv)')}
-                    </li>
-                    <li>
-                      <code>workspace:calendar</code> —{' '}
-                      {t('Kalender (Pflicht, heute aktiv)')}
-                    </li>
-                    <li>
-                      <code>workspace:contact</code> —{' '}
-                      {t('Kontakte (heute aktiv)')}
-                    </li>
-                    <li>
-                      <code>workspace:mail</code> —{' '}
-                      {t('Mail (in Vorbereitung, Scope schon mitnehmen)')}
-                    </li>
-                  </ul>
-                  <em>
-                    {t(
-                      'Nicht "All" auswählen und nicht user_info / accounts — wird nicht benötigt.'
-                    )}
-                  </em>
-                </li>
-                <li>
-                  {t(
-                    'Kopiere das Token sofort (Infomaniak zeigt es nur einmal) und füge es hier ein:'
-                  )}
-                </li>
-              </ol>
-              <input
-                type="password"
-                value={infomaniakModal.token}
-                onChange={(e) =>
-                  setInfomaniakModal((prev) =>
-                    prev ? { ...prev, token: e.target.value, error: null } : prev
-                  )
-                }
-                placeholder={t('Personal Access Token einfügen')}
-                disabled={infomaniakModal.submitting}
-                autoFocus
-                style={{
-                  width: '100%',
-                  padding: '8px 10px',
-                  fontFamily: 'monospace',
-                  fontSize: 13,
-                  border: '1px solid var(--border, #ccc)',
-                  borderRadius: 4,
-                  marginBottom: 12,
-                }}
-              />
-              {infomaniakModal.error && (
-                <div className={styles.errorMessage} style={{ marginBottom: 12 }}>
-                  {infomaniakModal.error}
-                </div>
-              )}
-              <p style={{ fontSize: 12, color: 'var(--text-secondary, #666)' }}>
-                {t(
-                  'Das Token wird verschlüsselt gespeichert und nur für API-Aufrufe an Infomaniak verwendet.'
-                )}
-              </p>
-              <div
-                style={{
-                  display: 'flex',
-                  justifyContent: 'flex-end',
-                  gap: 8,
-                  marginTop: 16,
-                }}
-              >
-                <button
-                  type="button"
-                  className={styles.secondaryButton}
-                  onClick={handleInfomaniakCancel}
-                  disabled={infomaniakModal.submitting}
-                >
-                  {t('Abbrechen')}
-                </button>
-                <button
-                  type="button"
-                  className={styles.primaryButton}
-                  onClick={handleInfomaniakSubmit}
-                  disabled={infomaniakModal.submitting || !infomaniakModal.token.trim()}
-                >
-                  {infomaniakModal.submitting ? t('Prüfen…') : t('Verbinden')}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
       <AddConnectionWizard
         open={wizardOpen}
         onClose={() => setWizardOpen(false)}
diff --git a/src/pages/basedata/FilesPage.tsx b/src/pages/basedata/FilesPage.tsx
index 5e69bd1..e5dbecd 100644
--- a/src/pages/basedata/FilesPage.tsx
+++ b/src/pages/basedata/FilesPage.tsx
@@ -448,7 +448,7 @@ export const FilesPage: React.FC = () => {
               columns={columns}
               apiEndpoint="/api/files/list"
               tableContextKey="files/list"
-              tableGroupLayoutMode="sections"
+              tableGroupLayoutMode="inline"
               loading={tableLoading}
               pagination={true}
               pageSize={25}
diff --git a/src/pages/basedata/PromptsPage.tsx b/src/pages/basedata/PromptsPage.tsx
index 3cbc1fa..31732e6 100644
--- a/src/pages/basedata/PromptsPage.tsx
+++ b/src/pages/basedata/PromptsPage.tsx
@@ -209,7 +209,7 @@ export const PromptsPage: React.FC = () => {
           columns={columns}
           apiEndpoint="/api/prompts"
           tableContextKey="prompts"
-          tableGroupLayoutMode="sections"
+          tableGroupLayoutMode="inline"
           loading={loading}
           pagination={true}
           pageSize={25}
diff --git a/src/pages/billing/BillingDataView.tsx b/src/pages/billing/BillingDataView.tsx
index ade7771..22d4300 100644
--- a/src/pages/billing/BillingDataView.tsx
+++ b/src/pages/billing/BillingDataView.tsx
@@ -527,17 +527,15 @@ export const BillingDataView: React.FC = () => {
       viewKey?: string | null;
       groupField: string;
       groupDirection?: 'asc' | 'desc';
+      groupByLevels?: Array<{ field: string; nullLabel?: string; direction?: string }>;
     }) => {
+      const levels = base.groupByLevels?.length
+        ? base.groupByLevels
+        : [{ field: base.groupField, nullLabel: '—', direction: base.groupDirection || 'asc' }];
       const pObj: Record<string, unknown> = {
         page: 1,
         pageSize: 25,
-        groupByLevels: [
-          {
-            field: base.groupField,
-            nullLabel: '—',
-            direction: base.groupDirection || 'asc',
-          },
-        ],
+        groupByLevels: levels,
       };
       if (base.search) (pObj as { search?: string }).search = base.search;
       if (base.filters && Object.keys(base.filters).length) (pObj as { filters: typeof base.filters }).filters = base.filters;
@@ -837,7 +835,7 @@ export const BillingDataView: React.FC = () => {
             columns={columns}
             apiEndpoint="/api/billing/view/users/transactions"
             tableContextKey="billing/view/users/transactions"
-            tableGroupLayoutMode="sections"
+            tableGroupLayoutMode="inline"
             loading={transactionsLoading}
             pagination={true}
             pageSize={25}
diff --git a/src/pages/views/commcoach/Commcoach.module.css b/src/pages/views/commcoach/Commcoach.module.css
index 4101cbf..396969a 100644
--- a/src/pages/views/commcoach/Commcoach.module.css
+++ b/src/pages/views/commcoach/Commcoach.module.css
@@ -1,6 +1,13 @@
 /* CommCoach Shared Styles — Assistant, Modules, Session views */
 
-.assistantContainer,
+.assistantContainer {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow-y: auto;
+}
+
 .modulesContainer {
   padding: 1.5rem;
   display: flex;
@@ -14,6 +21,14 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 1rem;
+}
+
+.wizardHeaderRight {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-shrink: 0;
 }
 
 .stepIndicator {
@@ -33,7 +48,6 @@
 }
 
 .wizardContent {
-  flex: 1;
   display: flex;
   flex-direction: column;
 }
@@ -98,9 +112,8 @@
 
 .wizardActions {
   display: flex;
-  gap: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--border-color, #e0e0e0);
+  gap: 0.5rem;
+  align-items: center;
 }
 
 .wizardHint {
diff --git a/src/pages/views/commcoach/CommcoachAssistantView.tsx b/src/pages/views/commcoach/CommcoachAssistantView.tsx
index 4747597..ba61cf1 100644
--- a/src/pages/views/commcoach/CommcoachAssistantView.tsx
+++ b/src/pages/views/commcoach/CommcoachAssistantView.tsx
@@ -75,10 +75,24 @@ export const CommcoachAssistantView: React.FC = () => {
     <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 className={styles.wizardHeaderRight}>
+          <div className={styles.stepIndicator}>
+            {STEPS.map((s, i) => (
+              <div key={s} className={`${styles.stepDot} ${i <= stepIdx ? styles.stepActive : ''}`} />
+            ))}
+          </div>
+          <div className={styles.wizardActions}>
+            {stepIdx > 0 && (
+              <button className={styles.btnSecondary} onClick={_handleBack}>{t('Zurück')}</button>
+            )}
+            {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>
       </div>
 
@@ -156,19 +170,6 @@ export const CommcoachAssistantView: React.FC = () => {
         )}
       </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>
   );
 };
diff --git a/src/pages/views/teamsbot/Teamsbot.module.css b/src/pages/views/teamsbot/Teamsbot.module.css
index 73d6a02..a096bdf 100644
--- a/src/pages/views/teamsbot/Teamsbot.module.css
+++ b/src/pages/views/teamsbot/Teamsbot.module.css
@@ -1372,7 +1372,14 @@
   margin-top: 0.25rem;
 }
 
-.assistantContainer,
+.assistantContainer {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow-y: auto;
+}
+
 .modulesContainer {
   padding: 1.5rem;
   display: flex;
@@ -1386,6 +1393,14 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 1rem;
+}
+
+.wizardHeaderRight {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-shrink: 0;
 }
 
 .stepIndicator {
@@ -1405,7 +1420,6 @@
 }
 
 .wizardContent {
-  flex: 1;
   display: flex;
   flex-direction: column;
 }
@@ -1438,9 +1452,8 @@
 
 .wizardActions {
   display: flex;
-  gap: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--border-color, #e0e0e0);
+  gap: 0.5rem;
+  align-items: center;
 }
 
 .moduleChoice {
diff --git a/src/pages/views/teamsbot/TeamsbotAssistantView.tsx b/src/pages/views/teamsbot/TeamsbotAssistantView.tsx
index b80493c..0718217 100644
--- a/src/pages/views/teamsbot/TeamsbotAssistantView.tsx
+++ b/src/pages/views/teamsbot/TeamsbotAssistantView.tsx
@@ -149,10 +149,32 @@ export const TeamsbotAssistantView: React.FC = () => {
     <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 className={styles.wizardHeaderRight}>
+          <div className={styles.stepIndicator}>
+            {STEPS.map((s, i) => (
+              <div key={s} className={`${styles.stepDot} ${i <= stepIdx ? styles.stepActive : ''}`} />
+            ))}
+          </div>
+          <div className={styles.wizardActions}>
+            {stepIdx > 0 && (
+              <button className={styles.btnSecondary} onClick={_handleBack}>{t('Zurück')}</button>
+            )}
+            {step !== 'confirm' ? (
+              <button className={styles.btnPrimary} onClick={_handleNext}>{t('Weiter')}</button>
+            ) : (
+              <button
+                className={styles.btnPrimary}
+                onClick={_handleStart}
+                disabled={
+                  loading
+                  || savingCredentials
+                  || (joinMode === 'userAccount' && showCredentialForm && (!credEmail || !credPassword))
+                }
+              >
+                {loading ? t('Starte...') : t('Bot starten')}
+              </button>
+            )}
+          </div>
         </div>
       </div>
 
@@ -328,27 +350,6 @@ export const TeamsbotAssistantView: React.FC = () => {
         )}
       </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
-              || savingCredentials
-              || (joinMode === 'userAccount' && showCredentialForm && (!credEmail || !credPassword))
-            }
-          >
-            {loading ? t('Starte...') : t('Bot starten')}
-          </button>
-        )}
-      </div>
     </div>
   );
 };
diff --git a/src/pages/views/workspace/WorkspaceRagInsightsPage.module.css b/src/pages/views/workspace/WorkspaceRagInsightsPage.module.css
deleted file mode 100644
index 2633881..0000000
--- a/src/pages/views/workspace/WorkspaceRagInsightsPage.module.css
+++ /dev/null
@@ -1,107 +0,0 @@
-.wrap {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  max-width: 1200px;
-}
-
-.disclaimer {
-  font-size: 0.85rem;
-  line-height: 1.45;
-  color: var(--text-secondary, #666);
-  padding: 0.75rem 1rem;
-  background: var(--bg-secondary, #f5f5f5);
-  border-radius: 8px;
-  border: 1px solid var(--border-color, #e8e8e8);
-}
-
-.kpiGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-  gap: 0.75rem;
-}
-
-.kpiCard {
-  padding: 1rem;
-  border-radius: 8px;
-  background: var(--bg-primary, #fff);
-  border: 1px solid var(--border-color, #e0e0e0);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-}
-
-.kpiValue {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--text-primary, #1a1a1a);
-  margin: 0 0 0.25rem;
-}
-
-.kpiLabel {
-  font-size: 0.8rem;
-  color: var(--text-secondary, #666);
-  margin: 0;
-  line-height: 1.3;
-}
-
-.chartBlock {
-  padding: 1rem;
-  border-radius: 8px;
-  background: var(--bg-primary, #fff);
-  border: 1px solid var(--border-color, #e0e0e0);
-  min-height: 280px;
-}
-
-.chartTitle {
-  font-size: 0.95rem;
-  font-weight: 600;
-  margin: 0 0 0.75rem;
-  color: var(--text-primary, #1a1a1a);
-}
-
-.row2 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-}
-
-@media (max-width: 900px) {
-  .row2 {
-    grid-template-columns: 1fr;
-  }
-}
-
-.meta {
-  font-size: 0.75rem;
-  color: var(--text-secondary, #888);
-  margin-top: 0.5rem;
-}
-
-.error {
-  color: #c62828;
-  padding: 1rem;
-}
-
-.recentTable {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.85rem;
-}
-
-.recentTable th {
-  text-align: left;
-  font-weight: 600;
-  color: var(--text-secondary, #666);
-  padding: 0.5rem 0.75rem;
-  border-bottom: 2px solid var(--border-color, #e0e0e0);
-  white-space: nowrap;
-}
-
-.recentTable td {
-  padding: 0.45rem 0.75rem;
-  border-bottom: 1px solid var(--border-color, #f0f0f0);
-  color: var(--text-primary, #1a1a1a);
-}
-
-.recentTable tbody tr:hover {
-  background: var(--bg-secondary, #fafafa);
-}
diff --git a/src/pages/views/workspace/WorkspaceRagInsightsPage.tsx b/src/pages/views/workspace/WorkspaceRagInsightsPage.tsx
deleted file mode 100644
index c473326..0000000
--- a/src/pages/views/workspace/WorkspaceRagInsightsPage.tsx
+++ /dev/null
@@ -1,352 +0,0 @@
-/**
- * WorkspaceRagInsightsPage — Aggregierte, nicht personenbezogene Kennzahlen zum
- * Knowledge Store / RAG dieser Workspace-Instanz (Präsentationen, Monitoring).
- */
-
-import React, { useCallback, useEffect, useState } from 'react';
-import {
-  ResponsiveContainer,
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  BarChart,
-  Bar,
-  PieChart,
-  Pie,
-  Cell,
-} from 'recharts';
-import { useInstanceId } from '../../../hooks/useCurrentInstance';
-import { useApiRequest } from '../../../hooks/useApi';
-import styles from './WorkspaceRagInsightsPage.module.css';
-import { formatBinaryDataSizeBytes } from '../../../utils/formatDataSize';
-
-import { useLanguage } from '../../../providers/language/LanguageContext';
-
-function _mimeLabel(key: string, t: (k: string) => string): string {
-  switch (key) {
-    case 'pdf': return t('PDF');
-    case 'office_doc': return t('Office (Text)');
-    case 'office_sheet': return t('Office (Tabellen)');
-    case 'office_slides': return t('Office (Folien)');
-    case 'text': return t('Text');
-    case 'image': return t('Bild');
-    case 'html': return t('HTML');
-    case 'other': return t('Sonstige');
-    default: return key;
-  }
-}
-
-const CHART_COLORS = ['#1976d2', '#00897b', '#6a1b9a', '#e65100', '#5d4037', '#455a64', '#c62828'];
-
-function _formatTimestamp(ts: number | null | undefined): string {
-  if (ts == null || ts <= 0) return '–';
-  try {
-    const d = new Date(ts * 1000);
-    return d.toLocaleString('de-CH', {
-      day: '2-digit', month: '2-digit', year: 'numeric',
-      hour: '2-digit', minute: '2-digit',
-    });
-  } catch {
-    return '–';
-  }
-}
-
-function _shortMime(mime: string): string {
-  const m = (mime || '').toLowerCase();
-  if (m.includes('pdf')) return 'PDF';
-  if (m.includes('wordprocessing') || m.includes('msword')) return 'Word';
-  if (m.includes('spreadsheet') || m.includes('excel')) return 'Excel';
-  if (m.includes('presentation') || m.includes('powerpoint')) return 'PowerPoint';
-  if (m.startsWith('text/')) return 'Text';
-  if (m.startsWith('image/')) return 'Bild';
-  if (m.includes('html')) return 'HTML';
-  return mime || '–';
-}
-
-const _STATUS_COLORS: Record<string, string> = {
-  indexed: '#2e7d32',
-  extracted: '#1565c0',
-  embedding: '#6a1b9a',
-  pending: '#e65100',
-  failed: '#c62828',
-};
-
-interface RagKpis {
-  indexedDocuments: number;
-  indexedBytesTotal: number;
-  contributorUsers: number;
-  contentChunks: number;
-  chunksWithEmbedding: number;
-  embeddingCoveragePercent: number;
-  workflowEntities: number;
-}
-
-interface RecentlyIndexedDoc {
-  fileName: string;
-  mimeType: string;
-  status: string;
-  extractedAt: number | null;
-  totalSize: number;
-}
-
-interface RagStatsResponse {
-  error?: string;
-  scope?: {
-    featureInstanceId?: string;
-    mandateScopedShared?: boolean;
-    workspaceFileIdsResolved?: number;
-  };
-  kpis?: RagKpis;
-  indexedDocumentsByStatus?: Record<string, number>;
-  documentsByMimeCategory?: Record<string, number>;
-  chunksByContentType?: Record<string, number>;
-  timelineIndexedDocuments?: Array<{ date: string; indexedDocuments: number }>;
-  recentlyIndexedDocuments?: RecentlyIndexedDoc[];
-  generatedAtUtc?: string;
-}
-
-export const WorkspaceRagInsightsPage: React.FC = () => {
-    const { t } = useLanguage();
-
-  const instanceId = useInstanceId();
-  const { request } = useApiRequest();
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [stats, setStats] = useState<RagStatsResponse | null>(null);
-
-  const load = useCallback(async () => {
-    if (!instanceId) return;
-    setLoading(true);
-    setError(null);
-    try {
-      const data = (await request({
-        url: `/api/workspace/${instanceId}/rag-statistics`,
-        method: 'get',
-      })) as RagStatsResponse;
-      if (data?.error) {
-        setError(String(data.error));
-        setStats(null);
-      } else {
-        setStats(data ?? null);
-      }
-    } catch (e) {
-      setError(e instanceof Error ? e.message : t('Laden fehlgeschlagen'));
-      setStats(null);
-    } finally {
-      setLoading(false);
-    }
-  }, [instanceId, request, t]);
-
-  useEffect(() => {
-    void load();
-  }, [load]);
-
-  if (!instanceId) {
-    return (
-      <div style={{ padding: 32, textAlign: 'center', color: '#999' }}>
-        {t('Keine Workspace-Instanz ausgewählt.')}
-      </div>
-    );
-  }
-
-  if (loading) {
-    return <div className={styles.wrap} style={{ padding: 24 }}>{t('Lade Kennzahlen')}</div>;
-  }
-
-  if (error) {
-    return <div className={styles.error}>{error}</div>;
-  }
-
-  const kpis = stats?.kpis;
-  const timeline = stats?.timelineIndexedDocuments ?? [];
-  const mimeRows = Object.entries(stats?.documentsByMimeCategory ?? {}).map(([key, value]) => ({
-    name: _mimeLabel(key, t),
-    value,
-  }));
-  const statusRows = Object.entries(stats?.indexedDocumentsByStatus ?? {}).map(([name, value]) => ({
-    name,
-    value,
-  }));
-  const chunkTypeRows = Object.entries(stats?.chunksByContentType ?? {}).map(([name, value]) => ({
-    name,
-    value,
-  }));
-
-  return (
-    <div className={styles.wrap}>
-      <p className={styles.disclaimer}>
-        {t(
-          'Dargestellt sind ausschliesslich aggregierte technische Masszahlen dieser Instanz (Anzahl Dokumente, Fragmente, Speicherumfang, Verteilungen). Es werden keine Inhalte, Dateinamen oder personenbezogene Angaben ausgewiesen. Geeignet für interne Berichte und Präsentationen.',
-        )}
-      </p>
-
-      {stats?.scope?.workspaceFileIdsResolved !== undefined && (
-        <p className={styles.meta} style={{ marginTop: 0 }}>
-          {t(
-            'Zuordnung Knowledge ↔ Dateien: {workspaceFileIdsResolved} Datei-ID(s) mit dieser Feature-Instanz in der Dateiverwaltung. Neu indexierte Uploads erhalten die Instanz automatisch; ältere Einträge ohne Zuordnung erscheinen erst nach erneuter Indexierung.',
-            { workspaceFileIdsResolved: stats.scope.workspaceFileIdsResolved },
-          )}
-        </p>
-      )}
-
-      {kpis && (
-        <div className={styles.kpiGrid}>
-          <div className={styles.kpiCard}>
-            <p className={styles.kpiValue}>{kpis.indexedDocuments}</p>
-            <p className={styles.kpiLabel}>{t('Indexierte Dokumente')}</p>
-          </div>
-          <div className={styles.kpiCard}>
-            <p className={styles.kpiValue}>{formatBinaryDataSizeBytes(kpis.indexedBytesTotal)}</p>
-            <p className={styles.kpiLabel}>{t('Indexiertes Datenvolumen (geschätzt)')}</p>
-          </div>
-          <div className={styles.kpiCard}>
-            <p className={styles.kpiValue}>{kpis.contentChunks}</p>
-            <p className={styles.kpiLabel}>{t('Inhaltsfragmente (Chunks)')}</p>
-          </div>
-          <div className={styles.kpiCard}>
-            <p className={styles.kpiValue}>
-              {kpis.embeddingCoveragePercent}%
-            </p>
-            <p className={styles.kpiLabel}>{t('Anteil Fragmente mit Embedding')}</p>
-          </div>
-          <div className={styles.kpiCard}>
-            <p className={styles.kpiValue}>{kpis.contributorUsers}</p>
-            <p className={styles.kpiLabel}>{t('Beitragende Benutzeranzahl')}</p>
-          </div>
-          <div className={styles.kpiCard}>
-            <p className={styles.kpiValue}>{kpis.workflowEntities}</p>
-            <p className={styles.kpiLabel}>{t('Workflowentitäten-Cache')}</p>
-          </div>
-        </div>
-      )}
-
-      {(stats?.recentlyIndexedDocuments ?? []).length > 0 && (
-        <div className={styles.chartBlock}>
-          <h3 className={styles.chartTitle}>{t('Zuletzt indexierte Dokumente')}</h3>
-          <div style={{ overflowX: 'auto' }}>
-            <table className={styles.recentTable}>
-              <thead>
-                <tr>
-                  <th>{t('Dateiname')}</th>
-                  <th>{t('Format')}</th>
-                  <th>{t('Grösse')}</th>
-                  <th>{t('Status')}</th>
-                  <th>{t('Indexiert am')}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {(stats?.recentlyIndexedDocuments ?? []).map((doc, i) => (
-                  <tr key={i}>
-                    <td title={doc.fileName} style={{ maxWidth: 280, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                      {doc.fileName || '–'}
-                    </td>
-                    <td>{_shortMime(doc.mimeType)}</td>
-                    <td style={{ whiteSpace: 'nowrap' }}>{formatBinaryDataSizeBytes(doc.totalSize)}</td>
-                    <td>
-                      <span style={{
-                        color: _STATUS_COLORS[doc.status] ?? '#666',
-                        fontWeight: 500,
-                      }}>
-                        {doc.status}
-                      </span>
-                    </td>
-                    <td style={{ whiteSpace: 'nowrap' }}>{_formatTimestamp(doc.extractedAt)}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      )}
-
-      <div className={styles.chartBlock}>
-        <h3 className={styles.chartTitle}>{t('Neu indexierte Dokumente pro Tag')}</h3>
-        {timeline.length === 0 ? (
-          <p className={styles.meta}>{t('Keine Zeitreihendaten für den gewählten')}</p>
-        ) : (
-          <ResponsiveContainer width="100%" height={240}>
-            <LineChart data={timeline}>
-              <CartesianGrid strokeDasharray="3 3" />
-              <XAxis dataKey="date" tick={{ fontSize: 11 }} />
-              <YAxis allowDecimals={false} tick={{ fontSize: 11 }} />
-              <Tooltip />
-              <Line type="monotone" dataKey="indexedDocuments" name={t('Dokumente')} stroke="#1976d2" dot={false} strokeWidth={2} />
-            </LineChart>
-          </ResponsiveContainer>
-        )}
-      </div>
-
-      <div className={styles.row2}>
-        <div className={styles.chartBlock}>
-          <h3 className={styles.chartTitle}>{t('Dokumente nach Formatkategorie')}</h3>
-          {mimeRows.length === 0 ? (
-            <p className={styles.meta}>{t('Keine Daten')}</p>
-          ) : (
-            <ResponsiveContainer width="100%" height={260}>
-              <BarChart data={mimeRows} layout="vertical" margin={{ left: 8, right: 16 }}>
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis type="number" allowDecimals={false} />
-                <YAxis type="category" dataKey="name" width={120} tick={{ fontSize: 11 }} />
-                <Tooltip />
-                <Bar dataKey="value" name={t('Anzahl')} fill="#00897b" radius={[0, 4, 4, 0]} />
-              </BarChart>
-            </ResponsiveContainer>
-          )}
-        </div>
-
-        <div className={styles.chartBlock}>
-          <h3 className={styles.chartTitle}>{t('Index-Status')}</h3>
-          {statusRows.length === 0 ? (
-            <p className={styles.meta}>{t('Keine Daten')}</p>
-          ) : (
-            <ResponsiveContainer width="100%" height={260}>
-              <PieChart>
-                <Pie
-                  data={statusRows}
-                  dataKey="value"
-                  nameKey="name"
-                  cx="50%"
-                  cy="50%"
-                  outerRadius={88}
-                  label={({ name, percent }) =>
-                    `${name ?? ''} ${percent != null ? (percent * 100).toFixed(0) : '0'}%`}
-                >
-                  {statusRows.map((_, i) => (
-                    <Cell key={`st-${i}`} fill={CHART_COLORS[i % CHART_COLORS.length]} />
-                  ))}
-                </Pie>
-                <Tooltip />
-              </PieChart>
-            </ResponsiveContainer>
-          )}
-        </div>
-      </div>
-
-      <div className={styles.chartBlock}>
-        <h3 className={styles.chartTitle}>{t('Fragmente nach Inhaltstyp')}</h3>
-        {chunkTypeRows.length === 0 ? (
-          <p className={styles.meta}>{t('Keine Chunkdaten')}</p>
-        ) : (
-          <ResponsiveContainer width="100%" height={240}>
-            <BarChart data={chunkTypeRows}>
-              <CartesianGrid strokeDasharray="3 3" />
-              <XAxis dataKey="name" tick={{ fontSize: 11 }} />
-              <YAxis allowDecimals={false} tick={{ fontSize: 11 }} />
-              <Tooltip />
-              <Bar dataKey="value" name={t('Fragmente')} fill="#6a1b9a" radius={[4, 4, 0, 0]} />
-            </BarChart>
-          </ResponsiveContainer>
-        )}
-      </div>
-
-      {stats?.generatedAtUtc && (
-        <p className={styles.meta}>
-          {t('Stand (UTC):')} {stats.generatedAtUtc}
-        </p>
-      )}
-    </div>
-  );
-};

From ccb27981708791947e412fb967efbc762ff15c60 Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@valueon.ch>
Date: Tue, 12 May 2026 17:49:44 +0200
Subject: [PATCH 04/10] fixed teams

---
 .../editor/Automation2FlowEditor.module.css   | 24 +++++++++----------
 .../RagRunningBadge/RagRunningBadge.tsx       |  2 +-
 src/pages/RagInventoryPage.tsx                |  2 +-
 .../views/teamsbot/TeamsbotDashboardView.tsx  |  2 +-
 .../views/teamsbot/TeamsbotSessionView.tsx    |  2 +-
 5 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/components/FlowEditor/editor/Automation2FlowEditor.module.css b/src/components/FlowEditor/editor/Automation2FlowEditor.module.css
index 1b32bfb..f754050 100644
--- a/src/components/FlowEditor/editor/Automation2FlowEditor.module.css
+++ b/src/components/FlowEditor/editor/Automation2FlowEditor.module.css
@@ -254,35 +254,30 @@
   padding: 0.75rem 1rem;
   border-bottom: 1px solid var(--border-color, #e0e0e0);
   background: var(--bg-primary, #fff);
+  overflow: visible;
 }
 
-/* Toolbar: context (load + name) is fluid with ellipsis; actions stay right-aligned. */
+/* Toolbar: context (load + name) is fluid with ellipsis; actions wrap below on narrow viewports. */
 .canvasHeaderRow {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.75rem;
   align-items: center;
   width: 100%;
 }
 
-@media (max-width: 900px) {
-  .canvasHeaderRow {
-    grid-template-columns: 1fr;
-  }
-}
-
 .canvasHeaderContext {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   min-width: 0;
-  flex: 1;
+  flex: 1 1 auto;
 }
 
 /* Closed <select> width must not follow the longest option label. */
 .canvasHeaderWorkflowSelect {
-  flex: 0 0 auto;
-  width: 12.5rem;
+  flex: 0 1 12.5rem;
+  min-width: 8rem;
   max-width: 100%;
   padding: 0.4rem 0.5rem;
   min-height: 2rem;
@@ -347,6 +342,7 @@
   background: var(--bg-secondary, #f8f9fa);
   flex: 0 1 auto;
   max-width: 100%;
+  margin-left: auto;
 }
 
 /* .retryButton sets margin-top for legacy error stacks — not wanted in the toolbar. */
@@ -366,6 +362,8 @@
 @media (max-width: 900px) {
   .canvasHeaderActionPanel {
     justify-content: flex-start;
+    margin-left: 0;
+    flex-basis: 100%;
   }
 }
 
diff --git a/src/components/RagRunningBadge/RagRunningBadge.tsx b/src/components/RagRunningBadge/RagRunningBadge.tsx
index 4d4c318..03dc329 100644
--- a/src/components/RagRunningBadge/RagRunningBadge.tsx
+++ b/src/components/RagRunningBadge/RagRunningBadge.tsx
@@ -60,7 +60,7 @@ export const RagRunningBadge: React.FC = () => {
             <div key={job.jobId} className={styles.jobRow}>
               <span className={styles.jobLabel}>{job.connectionLabel || job.jobType}</span>
               <span className={styles.jobProgress}>
-                {job.progress != null ? `${Math.round(job.progress * 100)}%` : '...'}
+                {job.progress != null ? `${Math.round(job.progress)}%` : '...'}
               </span>
             </div>
           ))}
diff --git a/src/pages/RagInventoryPage.tsx b/src/pages/RagInventoryPage.tsx
index 4d4a63e..81ca776 100644
--- a/src/pages/RagInventoryPage.tsx
+++ b/src/pages/RagInventoryPage.tsx
@@ -212,7 +212,7 @@ export const RagInventoryPage: React.FC = () => {
               {conn.runningJobs.length > 0 && (
                 <div className={styles.jobBanner}>
                   <FaSync className={styles.spinIcon} />
-                  <span>{conn.runningJobs[0].progressMessage || `${Math.round(conn.runningJobs[0].progress * 100)}%`}</span>
+                  <span>{conn.runningJobs[0].progressMessage || `${Math.round(conn.runningJobs[0].progress)}%`}</span>
                   <button className={styles.stopBtn} onClick={() => _handleStop(conn.id)} title={t('Indexierung stoppen')}>
                     <FaStop size={12} /> {t('Stop')}
                   </button>
diff --git a/src/pages/views/teamsbot/TeamsbotDashboardView.tsx b/src/pages/views/teamsbot/TeamsbotDashboardView.tsx
index dd5efc8..2620817 100644
--- a/src/pages/views/teamsbot/TeamsbotDashboardView.tsx
+++ b/src/pages/views/teamsbot/TeamsbotDashboardView.tsx
@@ -261,7 +261,7 @@ export const TeamsbotDashboardView: React.FC = () => {
                   <button type="button" className={styles.viewButton} onClick={() => navigate(_sessionPath(session.id))}>
                     {t('Live ansehen')}
                   </button>
-                  {['active', 'joining', 'pending'].includes(session.status) && (
+                  {!['ended', 'error', 'leaving'].includes(session.status) && (
                     <button type="button" className={styles.stopButton} onClick={() => _handleStopSession(session.id)}>
                       {t('Stoppen')}
                     </button>
diff --git a/src/pages/views/teamsbot/TeamsbotSessionView.tsx b/src/pages/views/teamsbot/TeamsbotSessionView.tsx
index 0bbc91c..1e85e01 100644
--- a/src/pages/views/teamsbot/TeamsbotSessionView.tsx
+++ b/src/pages/views/teamsbot/TeamsbotSessionView.tsx
@@ -838,7 +838,7 @@ export const TeamsbotSessionView: React.FC = () => {
           {isLive && <span className={styles.liveBadge}>LIVE</span>}
         </div>
         <div className={styles.sessionControls}>
-          {['active', 'joining', 'pending'].includes(session.status) && (
+          {!['ended', 'error', 'leaving'].includes(session.status) && (
             <button className={styles.stopButton} onClick={_handleStop}>{t('Sitzung beenden')}</button>
           )}
         </div>

From 2ee08c314b55cf114da194e1d25dbe0a2390e074 Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@valueon.ch>
Date: Tue, 12 May 2026 19:16:28 +0200
Subject: [PATCH 05/10] teamsbot anonymous bot working

---
 src/api/teamsbotApi.ts                        | 33 ++++++-
 .../views/teamsbot/TeamsbotModulesView.tsx    | 98 ++++++++++++++++++-
 .../views/teamsbot/TeamsbotSessionView.tsx    |  8 +-
 .../views/teamsbot/TeamsbotSettingsView.tsx   | 84 +++++++++++++++-
 4 files changed, 216 insertions(+), 7 deletions(-)

diff --git a/src/api/teamsbotApi.ts b/src/api/teamsbotApi.ts
index 8f201c6..627ecc9 100644
--- a/src/api/teamsbotApi.ts
+++ b/src/api/teamsbotApi.ts
@@ -71,6 +71,7 @@ export interface TeamsbotConfig {
   triggerCooldownSeconds: number;
   contextWindowSegments: number;
   debugMode?: boolean;
+  avatarFileId?: string;
 }
 
 export interface TeamsbotSessionStats {
@@ -103,6 +104,7 @@ export interface ConfigUpdateRequest {
   triggerCooldownSeconds?: number;
   contextWindowSegments?: number;
   debugMode?: boolean;
+  avatarFileId?: string;
 }
 
 // Voice option type re-exported from the central voice catalog API
@@ -602,6 +604,7 @@ export interface MeetingModule {
   kpiTargets?: string;
   defaultMeetingLink?: string;
   defaultBotName?: string;
+  defaultAvatarFileId?: string;
   status: string;
 }
 
@@ -612,7 +615,7 @@ export async function listModules(instanceId: string): Promise<MeetingModule[]>
 
 export async function createModule(instanceId: string, body: {
   title: string; seriesType?: string; defaultBotId?: string; goals?: string; kpiTargets?: string;
-  defaultMeetingLink?: string; defaultBotName?: string;
+  defaultMeetingLink?: string; defaultBotName?: string; defaultAvatarFileId?: string;
 }): Promise<MeetingModule> {
   const response = await api.post(`/api/teamsbot/${instanceId}/modules`, body);
   return response.data?.module;
@@ -631,3 +634,31 @@ export async function updateModule(instanceId: string, moduleId: string, body: P
 export async function deleteModule(instanceId: string, moduleId: string): Promise<void> {
   await api.delete(`/api/teamsbot/${instanceId}/modules/${moduleId}`);
 }
+
+export interface MediaFileInfo {
+  id: string;
+  fileName: string;
+  mimeType: string;
+}
+
+export async function listMediaFiles(): Promise<MediaFileInfo[]> {
+  const response = await api.get('/api/files/list', {
+    params: { pagination: JSON.stringify({ pageSize: 500 }) },
+  });
+  const data = response.data;
+  let items: any[];
+  if (Array.isArray(data)) {
+    items = data;
+  } else if (Array.isArray(data?.items)) {
+    items = data.items;
+  } else {
+    console.warn('[listMediaFiles] unexpected response shape:', Object.keys(data || {}));
+    items = [];
+  }
+  const filtered = items.filter((f: any) => {
+    const mime = (f.mimeType || '').toLowerCase();
+    return mime.startsWith('image/') || mime.startsWith('video/');
+  });
+  console.log(`[listMediaFiles] ${items.length} total files, ${filtered.length} media files`);
+  return filtered.map((f: any) => ({ id: f.id, fileName: f.fileName, mimeType: f.mimeType }));
+}
diff --git a/src/pages/views/teamsbot/TeamsbotModulesView.tsx b/src/pages/views/teamsbot/TeamsbotModulesView.tsx
index ad1526d..9e64240 100644
--- a/src/pages/views/teamsbot/TeamsbotModulesView.tsx
+++ b/src/pages/views/teamsbot/TeamsbotModulesView.tsx
@@ -7,8 +7,10 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
 import * as teamsbotApi from '../../../api/teamsbotApi';
-import type { MeetingModule, TeamsbotSession } from '../../../api/teamsbotApi';
+import type { MeetingModule, TeamsbotSession, MediaFileInfo } from '../../../api/teamsbotApi';
 import { useLanguage } from '../../../providers/language/LanguageContext';
+import { useFileContext } from '../../../contexts/FileContext';
+import { FaSpinner } from 'react-icons/fa';
 import styles from './Teamsbot.module.css';
 
 const SERIES_TYPE_LABELS: Record<string, string> = {
@@ -46,8 +48,47 @@ export const TeamsbotModulesView: React.FC = () => {
   const [createDefaultLink, setCreateDefaultLink] = useState('');
   const [createDefaultBotName, setCreateDefaultBotName] = useState('');
   const [createGoals, setCreateGoals] = useState('');
+  const [createDefaultAvatarFileId, setCreateDefaultAvatarFileId] = useState('');
   const [createSaving, setCreateSaving] = useState(false);
 
+  const [mediaFiles, setMediaFiles] = useState<MediaFileInfo[]>([]);
+  const fileCtx = useFileContext();
+  const avatarInputRef = useRef<HTMLInputElement | null>(null);
+  const [avatarUploading, setAvatarUploading] = useState(false);
+  const [avatarTarget, setAvatarTarget] = useState<'create' | 'edit'>('create');
+
+  const _refreshMediaFiles = useCallback(async () => {
+    const result = await teamsbotApi.listMediaFiles().catch(() => [] as MediaFileInfo[]);
+    setMediaFiles(result);
+  }, []);
+
+  const _handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file || !fileCtx?.handleFileUpload) return;
+    setAvatarUploading(true);
+    try {
+      const result = await fileCtx.handleFileUpload(file);
+      if (result?.success) {
+        const data: any = (result.fileData as any)?.file || result.fileData;
+        const id = data?.id || (result.fileData as any)?.id;
+        if (id) {
+          if (avatarTarget === 'create') {
+            setCreateDefaultAvatarFileId(id);
+          } else if (editingModule) {
+            setEditingModule({ ...editingModule, defaultAvatarFileId: id });
+          }
+          const refreshed = await teamsbotApi.listMediaFiles().catch(() => [] as MediaFileInfo[]);
+          setMediaFiles(refreshed);
+        }
+      }
+    } catch {
+      // upload error handled by FileContext
+    } finally {
+      setAvatarUploading(false);
+      if (avatarInputRef.current) avatarInputRef.current.value = '';
+    }
+  };
+
   const _loadModules = useCallback(async () => {
     if (!instanceId) return;
     setLoading(true);
@@ -63,6 +104,10 @@ export const TeamsbotModulesView: React.FC = () => {
 
   useEffect(() => { _loadModules(); }, [_loadModules]);
 
+  useEffect(() => {
+    teamsbotApi.listMediaFiles().then(setMediaFiles).catch(() => {});
+  }, []);
+
   const _loadModuleSessions = useCallback(async (moduleId: string) => {
     if (!instanceId) return;
     try {
@@ -125,6 +170,7 @@ export const TeamsbotModulesView: React.FC = () => {
         seriesType: createSeriesType,
         defaultMeetingLink: createDefaultLink.trim() || undefined,
         defaultBotName: createDefaultBotName.trim() || undefined,
+        defaultAvatarFileId: createDefaultAvatarFileId || undefined,
         goals: createGoals.trim() || undefined,
       });
       setCreateOpen(false);
@@ -132,6 +178,7 @@ export const TeamsbotModulesView: React.FC = () => {
       setCreateSeriesType('adhoc');
       setCreateDefaultLink('');
       setCreateDefaultBotName('');
+      setCreateDefaultAvatarFileId('');
       setCreateGoals('');
       _loadModules();
     } catch (err) {
@@ -185,7 +232,7 @@ export const TeamsbotModulesView: React.FC = () => {
             <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>
+              <span className={styles.moduleStatus}>{t(STATUS_LABELS[mod.status] || mod.status || 'Aktiv')}</span>
               <div className={styles.moduleActions}>
                 <button className={styles.btnPrimary} style={{ padding: '0.3rem 0.7rem', fontSize: '0.8rem' }} onClick={e => {
                   e.stopPropagation();
@@ -257,6 +304,25 @@ export const TeamsbotModulesView: React.FC = () => {
               value={createDefaultBotName}
               onChange={e => setCreateDefaultBotName(e.target.value)}
             />
+            <label className={styles.label} style={{ display: 'block', marginTop: 8 }}>{t('Avatar-Bild / Video')}</label>
+            <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
+              <select
+                className={styles.wizardSelect}
+                style={{ flex: 1 }}
+                value={createDefaultAvatarFileId}
+                onChange={e => setCreateDefaultAvatarFileId(e.target.value)}
+                onFocus={_refreshMediaFiles}
+              >
+                <option value="">{t('Standard (aus Bot-Einstellungen)')}</option>
+                {mediaFiles.map(f => (
+                  <option key={f.id} value={f.id}>{f.fileName} ({f.mimeType})</option>
+                ))}
+              </select>
+              <button type="button" className={styles.btnSmall} disabled={avatarUploading} onClick={() => { setAvatarTarget('create'); avatarInputRef.current?.click(); }} style={{ whiteSpace: 'nowrap' }}>
+                {avatarUploading && avatarTarget === 'create' ? <FaSpinner className={styles.spinner} /> : null}
+                {t('Hochladen')}
+              </button>
+            </div>
             <label className={styles.label} style={{ display: 'block', marginTop: 8 }}>{t('Ziele')}</label>
             <textarea
               className={styles.wizardTextarea}
@@ -317,6 +383,25 @@ export const TeamsbotModulesView: React.FC = () => {
               placeholder={t('z.B. AI Assistant')}
               onBlur={e => setEditingModule({ ...editingModule, defaultBotName: e.target.value })}
             />
+            <label className={styles.label} style={{ display: 'block', marginTop: 8 }}>{t('Avatar-Bild / Video')}</label>
+            <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
+            <select
+              className={styles.wizardSelect}
+              style={{ flex: 1 }}
+              value={editingModule.defaultAvatarFileId || ''}
+              onChange={e => setEditingModule({ ...editingModule, defaultAvatarFileId: e.target.value || undefined })}
+              onFocus={_refreshMediaFiles}
+            >
+              <option value="">{t('Standard (aus Bot-Einstellungen)')}</option>
+              {mediaFiles.map(f => (
+                <option key={f.id} value={f.id}>{f.fileName} ({f.mimeType})</option>
+              ))}
+            </select>
+              <button type="button" className={styles.btnSmall} disabled={avatarUploading} onClick={() => { setAvatarTarget('edit'); avatarInputRef.current?.click(); }} style={{ whiteSpace: 'nowrap' }}>
+                {avatarUploading && avatarTarget === 'edit' ? <FaSpinner className={styles.spinner} /> : null}
+                {t('Hochladen')}
+              </button>
+            </div>
             <textarea
               defaultValue={editingModule.goals || ''}
               className={styles.wizardTextarea}
@@ -331,11 +416,20 @@ export const TeamsbotModulesView: React.FC = () => {
                 goals: editingModule.goals,
                 defaultMeetingLink: (editingModule.defaultMeetingLink || '').trim(),
                 defaultBotName: (editingModule.defaultBotName || '').trim(),
+                defaultAvatarFileId: (editingModule.defaultAvatarFileId || '').trim() || undefined,
               })}>{t('Speichern')}</button>
             </div>
           </div>
         </div>
       )}
+
+      <input
+        ref={avatarInputRef}
+        type="file"
+        accept="image/*,video/*"
+        style={{ display: 'none' }}
+        onChange={_handleAvatarUpload}
+      />
     </div>
   );
 };
diff --git a/src/pages/views/teamsbot/TeamsbotSessionView.tsx b/src/pages/views/teamsbot/TeamsbotSessionView.tsx
index 1e85e01..67ba6af 100644
--- a/src/pages/views/teamsbot/TeamsbotSessionView.tsx
+++ b/src/pages/views/teamsbot/TeamsbotSessionView.tsx
@@ -899,8 +899,12 @@ export const TeamsbotSessionView: React.FC = () => {
         {/* Main column */}
         <div className={styles.sessionMain}>
 
-      {/* Director Prompt Panel (private operator instructions) */}
-      {['active', 'joining', 'pending'].includes(session.status) && (
+      {/* Director Prompt Panel (private operator instructions).
+          Blacklist statt Whitelist: zeigen ausser bei terminal-Status,
+          damit das Panel nicht waehrend kurzer SSE-Race-Conditions
+          (Status briefly leer/unbekannt direkt nach Mount) verschwindet
+          und erst nach Reload wieder auftaucht. */}
+      {!['ended', 'error', 'leaving'].includes(session.status) && (
         <div
           className={`${styles.directorPanel} ${directorDragOver ? styles.directorPanelDragOver : ''}`}
           onDragEnter={_onDirectorDragEnter}
diff --git a/src/pages/views/teamsbot/TeamsbotSettingsView.tsx b/src/pages/views/teamsbot/TeamsbotSettingsView.tsx
index edf7b46..b0f0872 100644
--- a/src/pages/views/teamsbot/TeamsbotSettingsView.tsx
+++ b/src/pages/views/teamsbot/TeamsbotSettingsView.tsx
@@ -1,11 +1,12 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
 import * as teamsbotApi from '../../../api/teamsbotApi';
-import type { TeamsbotConfig, ConfigUpdateRequest, VoiceOption, SystemBot } from '../../../api/teamsbotApi';
+import type { TeamsbotConfig, ConfigUpdateRequest, VoiceOption, SystemBot, MediaFileInfo } from '../../../api/teamsbotApi';
 import type { VoiceLanguage } from '../../../api/voiceCatalogApi';
 import { FaPlay, FaSpinner, FaTrash } from 'react-icons/fa';
 import styles from './Teamsbot.module.css';
 import { getUserDataCache } from '../../../utils/userCache';
+import { useFileContext } from '../../../contexts/FileContext';
 
 import { useLanguage } from '../../../providers/language/LanguageContext';
 
@@ -45,16 +46,24 @@ export const TeamsbotSettingsView: React.FC = () => {
   const [voices, setVoices] = useState<VoiceOption[]>([]);
   const [loadingVoices, setLoadingVoices] = useState(false);
 
+  // Media files for avatar picker
+  const [mediaFiles, setMediaFiles] = useState<MediaFileInfo[]>([]);
+  const fileCtx = useFileContext();
+  const avatarInputRef = useRef<HTMLInputElement | null>(null);
+  const [avatarUploading, setAvatarUploading] = useState(false);
+
 
   const _loadConfig = useCallback(async () => {
     if (!instanceId) return;
     try {
       setLoading(true);
       // Load per-user settings (merged with instance defaults)
-      const [settingsResult, languagesResult] = await Promise.all([
+      const [settingsResult, languagesResult, mediaResult] = await Promise.all([
         teamsbotApi.getUserSettings(instanceId),
         teamsbotApi.fetchLanguages(),
+        teamsbotApi.listMediaFiles().catch(() => [] as MediaFileInfo[]),
       ]);
+      setMediaFiles(mediaResult);
       const effectiveConfig = settingsResult.effectiveConfig;
       setConfig(effectiveConfig);
       setFormData(effectiveConfig);
@@ -117,6 +126,35 @@ export const TeamsbotSettingsView: React.FC = () => {
     }
   };
 
+  const _refreshMediaFiles = useCallback(async () => {
+    const result = await teamsbotApi.listMediaFiles().catch(() => [] as MediaFileInfo[]);
+    setMediaFiles(result);
+  }, []);
+
+  const _handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file || !fileCtx?.handleFileUpload) return;
+    setAvatarUploading(true);
+    try {
+      const result = await fileCtx.handleFileUpload(file);
+      if (result?.success) {
+        const data: any = (result.fileData as any)?.file || result.fileData;
+        const id = data?.id || (result.fileData as any)?.id;
+        if (id) {
+          _updateField('avatarFileId', id);
+          const refreshed = await teamsbotApi.listMediaFiles().catch(() => [] as MediaFileInfo[]);
+          setMediaFiles(refreshed);
+        }
+      }
+    } catch (err: any) {
+      setError(err.message || t('Upload fehlgeschlagen'));
+      setTimeout(() => setError(null), 3000);
+    } finally {
+      setAvatarUploading(false);
+      if (avatarInputRef.current) avatarInputRef.current.value = '';
+    }
+  };
+
   const _handleTestVoice = async () => {
     if (!instanceId) return;
     setTestingVoice(true);
@@ -210,6 +248,48 @@ export const TeamsbotSettingsView: React.FC = () => {
               Default-Name fuer den Bot im Meeting. Falls keiner angegeben, wird der Name des System-Bots verwendet (z.B. "Nyla Larsson").
             </span>
           </div>
+
+          <div className={styles.formGroup}>
+            <label className={styles.label}>{t('Avatar-Bild / Video')}</label>
+            <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+              <select
+                className={styles.select}
+                style={{ flex: 1 }}
+                value={formData.avatarFileId || ''}
+                onChange={(e) => _updateField('avatarFileId', e.target.value || undefined)}
+                onFocus={_refreshMediaFiles}
+              >
+                <option value="">{t('Standard (statische Farbfläche)')}</option>
+                {mediaFiles.map(f => (
+                  <option key={f.id} value={f.id}>
+                    {f.fileName} ({f.mimeType})
+                  </option>
+                ))}
+              </select>
+              <input
+                ref={avatarInputRef}
+                type="file"
+                accept="image/*,video/*"
+                style={{ display: 'none' }}
+                onChange={_handleAvatarUpload}
+              />
+              <button
+                type="button"
+                className={styles.testButton || styles.saveButton}
+                onClick={() => avatarInputRef.current?.click()}
+                disabled={avatarUploading}
+                style={{ minWidth: '44px', padding: '8px 12px', whiteSpace: 'nowrap' }}
+              >
+                {avatarUploading ? <FaSpinner className={styles.spinner} /> : null}
+                {avatarUploading ? t('Laden...') : t('Hochladen')}
+              </button>
+            </div>
+            <span className={styles.hint}>
+              {mediaFiles.length === 0
+                ? t('Noch keine Bild-/Video-Dateien vorhanden. Lade ein Bild oder Video hoch.')
+                : t('Bild oder Video, das als Bot-Video im Meeting angezeigt wird.')}
+            </span>
+          </div>
         </div>
 
         {/* AI Behavior */}

From 0d8e6501d3cdb0943c88c7df9595fe04e538c218 Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@valueon.ch>
Date: Tue, 12 May 2026 21:31:27 +0200
Subject: [PATCH 06/10] teamsbot auth fixes

---
 .../FormGeneratorTree/FormGeneratorTree.tsx   | 28 ++++++---
 src/components/UnifiedDataBar/SourcesTab.tsx  | 60 ++++++++++---------
 src/pages/views/teamsbot/Teamsbot.module.css  | 11 ++++
 .../views/teamsbot/TeamsbotSessionView.tsx    | 53 +++++++++-------
 4 files changed, 95 insertions(+), 57 deletions(-)

diff --git a/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx
index fa1087c..60b08ca 100644
--- a/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx
+++ b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx
@@ -58,6 +58,13 @@ function _buildChildMap<T>(nodes: TreeNode<T>[]): Map<string | '__root__', TreeN
     if (list) list.push(n);
     else map.set(key, [n]);
   }
+  for (const [, children] of map) {
+    children.sort((a, b) => {
+      if (a.type === 'folder' && b.type !== 'folder') return -1;
+      if (a.type !== 'folder' && b.type === 'folder') return 1;
+      return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
+    });
+  }
   return map;
 }
 
@@ -651,10 +658,14 @@ export function FormGeneratorTree<T = any>({
   const _handleCycleScope = useCallback(
     async (node: TreeNode<T>) => {
       const newScope = _nextScope(node.scope);
-      await provider.patchScope?.([node.id], newScope);
-      setNodes((prev) =>
-        prev.map((n) => (n.id === node.id ? { ...n, scope: newScope } : n)),
-      );
+      const isFolder = node.type === 'folder';
+      await provider.patchScope?.([node.id], newScope, isFolder);
+      setNodes((prev) => {
+        if (!isFolder) return prev.map((n) => (n.id === node.id ? { ...n, scope: newScope } : n));
+        const descendantIds = new Set(_collectDescendantIds(node.id, prev));
+        descendantIds.add(node.id);
+        return prev.map((n) => descendantIds.has(n.id) ? { ...n, scope: newScope } : n);
+      });
     },
     [provider],
   );
@@ -663,9 +674,12 @@ export function FormGeneratorTree<T = any>({
     async (node: TreeNode<T>) => {
       const newValue = !node.neutralize;
       await provider.patchNeutralize?.([node.id], newValue);
-      setNodes((prev) =>
-        prev.map((n) => (n.id === node.id ? { ...n, neutralize: newValue } : n)),
-      );
+      setNodes((prev) => {
+        if (node.type !== 'folder') return prev.map((n) => (n.id === node.id ? { ...n, neutralize: newValue } : n));
+        const descendantIds = new Set(_collectDescendantIds(node.id, prev));
+        descendantIds.add(node.id);
+        return prev.map((n) => descendantIds.has(n.id) ? { ...n, neutralize: newValue } : n);
+      });
     },
     [provider],
   );
diff --git a/src/components/UnifiedDataBar/SourcesTab.tsx b/src/components/UnifiedDataBar/SourcesTab.tsx
index e287097..4d2ccf4 100644
--- a/src/components/UnifiedDataBar/SourcesTab.tsx
+++ b/src/components/UnifiedDataBar/SourcesTab.tsx
@@ -343,7 +343,7 @@ async function _loadServices(instanceId: string, connectionId: string): Promise<
     service: s.service,
     path: '/',
     displayPath: s.label || s.service,
-  }));
+  })).sort((a: TreeNode, b: TreeNode) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }));
 }
 
 async function _browseService(
@@ -375,6 +375,10 @@ async function _browseService(
       path: entry.path,
       displayPath,
     };
+  }).sort((a: TreeNode, b: TreeNode) => {
+    if (a.type === 'folder' && b.type !== 'folder') return -1;
+    if (a.type !== 'folder' && b.type === 'folder') return 1;
+    return a.label.localeCompare(b.label, undefined, { sensitivity: 'base' });
   });
 }
 
@@ -496,6 +500,7 @@ const SourcesTab: React.FC<SourcesTabProps> = ({ context, onSourcesChanged, onSe
           scope: d.scope || 'personal',
           neutralize: d.neutralize ?? false,
         }));
+        list.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }));
         setDataSources(list);
       })
       .catch(() => { if (mountedRef.current) setDataSources([]); });
@@ -519,6 +524,7 @@ const SourcesTab: React.FC<SourcesTabProps> = ({ context, onSourcesChanged, onSe
           neutralizeFields: d.neutralizeFields || undefined,
           recordFilter: d.recordFilter || undefined,
         }));
+        list.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }));
         setFeatureDataSources(list);
       })
       .catch(() => { if (mountedRef.current) setFeatureDataSources([]); });
@@ -547,7 +553,8 @@ const SourcesTab: React.FC<SourcesTabProps> = ({ context, onSourcesChanged, onSe
             children: null,
             connectionId: c.id,
             authority: c.authority,
-          }));
+          }))
+          .sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }));
         setTree(nodes);
       })
       .catch(() => { if (mountedRef.current) setTree([]); })
@@ -760,7 +767,7 @@ const SourcesTab: React.FC<SourcesTabProps> = ({ context, onSourcesChanged, onSe
             expanded: false,
             loading: false,
             tables: null,
-          })),
+          })).sort((a: FeatureConnectionNode, b: FeatureConnectionNode) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' })),
         })));
       })
       .catch(() => { if (mountedRef.current) setFeatureTree([]); })
@@ -798,14 +805,14 @@ const SourcesTab: React.FC<SourcesTabProps> = ({ context, onSourcesChanged, onSe
         objectKey: t.objectKey ?? '',
         tableName: t.tableName ?? '',
         label: t.label ?? '',
-        fields: t.fields ?? [],
+        fields: (t.fields ?? []).slice().sort((a: string, b: string) => a.localeCompare(b, undefined, { sensitivity: 'base' })),
         isParent: Boolean(t.isParent),
         parentTable: t.parentTable ?? null,
         parentKey: t.parentKey ?? null,
         displayFields: t.displayFields ?? [],
         isGroup: Boolean(t.isGroup),
         group: t.group ?? null,
-      }));
+      })).sort((a: FeatureTableNode, b: FeatureTableNode) => (a.label || a.tableName).localeCompare(b.label || b.tableName, undefined, { sensitivity: 'base' }));
 
       // Default-expand all categorical groups so users immediately see their content.
       const defaultExpansions: string[] = tables
@@ -912,7 +919,7 @@ const SourcesTab: React.FC<SourcesTabProps> = ({ context, onSourcesChanged, onSe
         displayLabel: r.displayLabel || r.id,
         fields: r.fields || {},
         tableName: table.tableName,
-      }));
+      })).sort((a: ParentRecordNode, b: ParentRecordNode) => a.displayLabel.localeCompare(b.displayLabel, undefined, { sensitivity: 'base' }));
       if (mountedRef.current) {
         setFeatureRecordsByPath(prev => ({ ...prev, [pathKey]: records }));
       }
@@ -1229,11 +1236,24 @@ const _TreeNodeView: React.FC<_TreeNodeViewProps> = ({
           {node.label}
         </span>
 
-        {/* ── Stable trio: chat | scope | neutralize (always in this order).
-         * No "remove from workspace" button here by design: the UDB row only
-         * exposes the catalog state. Detach from the *current chat* happens
-         * via the chip "x" in WorkspaceInput; that chip is the single source
-         * of truth for chat-scoped attachment lifecycle. */}
+        <button
+          onClick={async (e) => {
+            e.stopPropagation();
+            if (ds) { onToggleRagIndex(ds); return; }
+            const newId = await onEnsureDs(node);
+            if (newId) {
+              try { await api.patch(`/api/datasources/${newId}/rag-index`, { ragIndexEnabled: !effectiveRagIndex }); } catch {}
+            }
+          }}
+          style={{
+            background: 'none', border: 'none', cursor: 'pointer',
+            fontSize: 12, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center',
+            opacity: (ds?.ragIndexEnabled ?? effectiveRagIndex) ? 1 : 0.35,
+          }}
+          title={(ds?.ragIndexEnabled ?? effectiveRagIndex) ? t('RAG-Indexierung an') : t('RAG-Indexierung aus')}
+        >
+          {'\uD83E\uDDE0'}
+        </button>
         <button
           onClick={e => { e.stopPropagation(); onSendToChat?.(_chatPayload); }}
           style={{
@@ -1278,24 +1298,6 @@ const _TreeNodeView: React.FC<_TreeNodeViewProps> = ({
         >
           {'\uD83D\uDD12'}
         </button>
-        <button
-          onClick={async (e) => {
-            e.stopPropagation();
-            if (ds) { onToggleRagIndex(ds); return; }
-            const newId = await onEnsureDs(node);
-            if (newId) {
-              try { await api.patch(`/api/datasources/${newId}/rag-index`, { ragIndexEnabled: !effectiveRagIndex }); } catch {}
-            }
-          }}
-          style={{
-            background: 'none', border: 'none', cursor: 'pointer',
-            fontSize: 12, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center',
-            opacity: (ds?.ragIndexEnabled ?? effectiveRagIndex) ? 1 : 0.35,
-          }}
-          title={(ds?.ragIndexEnabled ?? effectiveRagIndex) ? t('RAG-Indexierung an') : t('RAG-Indexierung aus')}
-        >
-          {'\uD83E\uDDE0'}
-        </button>
 
       </div>
 
diff --git a/src/pages/views/teamsbot/Teamsbot.module.css b/src/pages/views/teamsbot/Teamsbot.module.css
index a096bdf..eb06248 100644
--- a/src/pages/views/teamsbot/Teamsbot.module.css
+++ b/src/pages/views/teamsbot/Teamsbot.module.css
@@ -415,6 +415,17 @@
   padding: 1rem;
 }
 
+.sessionSwitcherSelect {
+  width: 100%;
+  max-width: 420px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.85rem;
+  border: 1px solid var(--border-color, #ccc);
+  border-radius: 8px;
+  background: var(--bg-primary, #fff);
+  color: var(--text-primary, #333);
+}
+
 /* ----- Session Layout (UDB Sidebar + Main) ------------------------------- */
 
 .sessionLayout {
diff --git a/src/pages/views/teamsbot/TeamsbotSessionView.tsx b/src/pages/views/teamsbot/TeamsbotSessionView.tsx
index 67ba6af..5de3056 100644
--- a/src/pages/views/teamsbot/TeamsbotSessionView.tsx
+++ b/src/pages/views/teamsbot/TeamsbotSessionView.tsx
@@ -771,28 +771,39 @@ export const TeamsbotSessionView: React.FC = () => {
         </div>
       )}
 
-      {/* Session Switcher (if multiple sessions exist) */}
+      {/* Session Switcher */}
       {allSessions.length > 1 && (
-        <div style={{ display: 'flex', gap: '8px', marginBottom: '12px', flexWrap: 'wrap' }}>
-          {allSessions.map((s) => (
-            <button
-              key={s.id}
-              onClick={() => _switchSession(s.id)}
-              style={{
-                padding: '6px 12px',
-                borderRadius: '6px',
-                border: s.id === sessionId ? '2px solid #4A90D9' : '1px solid #ddd',
-                background: s.id === sessionId ? '#EBF3FC' : '#fff',
-                cursor: 'pointer',
-                fontSize: '13px',
-                fontWeight: s.id === sessionId ? 600 : 400,
-              }}
-            >
-              {s.botName}
-              {['active', 'joining', 'pending'].includes(s.status) && ' (aktiv)'}
-              {s.status === 'ended' && ' (beendet)'}
-            </button>
-          ))}
+        <div style={{ marginBottom: '12px' }}>
+          <select
+            value={sessionId}
+            onChange={(e) => _switchSession(e.target.value)}
+            className={styles.sessionSwitcherSelect}
+          >
+            {[...allSessions]
+              .sort((a, b) => {
+                const ta = a.startedAt ? new Date(a.startedAt).getTime() : 0;
+                const tb = b.startedAt ? new Date(b.startedAt).getTime() : 0;
+                return tb - ta;
+              })
+              .map((s) => {
+                const dt = s.startedAt ? new Date(s.startedAt) : null;
+                const ts = dt && !Number.isNaN(dt.getTime())
+                  ? `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, '0')}-${String(dt.getDate()).padStart(2, '0')} ${String(dt.getHours()).padStart(2, '0')}:${String(dt.getMinutes()).padStart(2, '0')}`
+                  : '';
+                const statusTag = ['active', 'joining', 'pending'].includes(s.status)
+                  ? ` (${t('aktiv')})`
+                  : s.status === 'ended'
+                    ? ` (${t('beendet')})`
+                    : s.status === 'error'
+                      ? ` (${t('Fehler')})`
+                      : '';
+                return (
+                  <option key={s.id} value={s.id}>
+                    {ts ? `${ts} — ` : ''}{s.botName}{statusTag}
+                  </option>
+                );
+              })}
+          </select>
         </div>
       )}
 

From 230055a4fb6a9e3fb9fe2cca243c8f70a40acbea Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@valueon.ch>
Date: Tue, 12 May 2026 22:39:45 +0200
Subject: [PATCH 07/10] teamsbot ux fixes

---
 src/pages/views/teamsbot/Teamsbot.module.css  | 152 ++++++++++++++++--
 .../views/teamsbot/TeamsbotModulesView.tsx    |  89 +++++++---
 .../views/teamsbot/TeamsbotSessionView.tsx    |  65 ++++++--
 3 files changed, 268 insertions(+), 38 deletions(-)

diff --git a/src/pages/views/teamsbot/Teamsbot.module.css b/src/pages/views/teamsbot/Teamsbot.module.css
index eb06248..418b3a1 100644
--- a/src/pages/views/teamsbot/Teamsbot.module.css
+++ b/src/pages/views/teamsbot/Teamsbot.module.css
@@ -921,6 +921,68 @@
   color: var(--text-primary, #333);
 }
 
+.responseText h1,
+.responseText h2,
+.responseText h3 {
+  margin: 0.6em 0 0.3em;
+  font-size: 1em;
+  font-weight: 600;
+}
+
+.responseText p {
+  margin: 0.3em 0;
+}
+
+.responseText ul,
+.responseText ol {
+  margin: 0.3em 0;
+  padding-left: 1.4em;
+}
+
+.responseText code {
+  background: var(--bg-tertiary, #f0f0f0);
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+  font-size: 0.85em;
+}
+
+.responseText pre {
+  background: var(--bg-tertiary, #f0f0f0);
+  padding: 0.6em;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin: 0.4em 0;
+}
+
+.responseText pre code {
+  background: none;
+  padding: 0;
+}
+
+.responseText table {
+  border-collapse: collapse;
+  margin: 0.4em 0;
+  font-size: 0.85em;
+}
+
+.responseText th,
+.responseText td {
+  border: 1px solid var(--border-color, #ddd);
+  padding: 0.3em 0.6em;
+}
+
+.responseText th {
+  background: var(--bg-secondary, #f5f5f5);
+  font-weight: 600;
+}
+
+.responseText blockquote {
+  border-left: 3px solid var(--border-color, #ddd);
+  margin: 0.4em 0;
+  padding: 0.2em 0.8em;
+  color: var(--text-secondary, #666);
+}
+
 .responseReasoning {
   margin-top: 0.5rem;
   font-size: 0.8rem;
@@ -948,9 +1010,18 @@
   font-size: 0.9rem;
   line-height: 1.6;
   color: var(--text-primary, #333);
-  white-space: pre-wrap;
 }
 
+.summaryText p { margin: 0.3em 0; }
+.summaryText ul, .summaryText ol { margin: 0.3em 0; padding-left: 1.4em; }
+.summaryText h1, .summaryText h2, .summaryText h3 { margin: 0.6em 0 0.3em; font-size: 1em; font-weight: 600; }
+.summaryText code { background: var(--bg-tertiary, #f0f0f0); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.85em; }
+.summaryText pre { background: var(--bg-tertiary, #f0f0f0); padding: 0.6em; border-radius: 4px; overflow-x: auto; }
+.summaryText pre code { background: none; padding: 0; }
+.summaryText table { border-collapse: collapse; margin: 0.4em 0; font-size: 0.85em; }
+.summaryText th, .summaryText td { border: 1px solid var(--border-color, #ddd); padding: 0.3em 0.6em; }
+.summaryText th { background: var(--bg-secondary, #f5f5f5); font-weight: 600; }
+
 /* ============================================================================
    Settings View
    ============================================================================ */
@@ -1354,6 +1425,36 @@
   animation: agentPulse 1s ease-in-out infinite;
 }
 
+.agentProgressLog {
+  padding: 0.5rem 0;
+  max-height: 200px;
+  overflow-y: auto;
+  font-size: 0.8rem;
+  line-height: 1.4;
+}
+
+.agentProgressEntry {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.15rem 0;
+  border-bottom: 1px solid var(--border-color, #eee);
+}
+
+.agentProgressEntry:last-child {
+  border-bottom: none;
+}
+
+.agentProgressTime {
+  color: var(--text-tertiary, #999);
+  flex-shrink: 0;
+  font-size: 0.75rem;
+}
+
+.agentProgressText {
+  color: var(--text-secondary, #666);
+  word-break: break-word;
+}
+
 .statsCards {
   display: flex;
   gap: 1rem;
@@ -1543,16 +1644,49 @@
   border-top: 1px solid var(--border-color, #e0e0e0);
 }
 
-.sessionRow {
-  display: flex;
-  gap: 1rem;
-  padding: 0.4rem 0;
-  cursor: pointer;
-  font-size: 0.9rem;
+.sessionTable {
+  border-collapse: collapse;
+  font-size: 0.85rem;
 }
 
-.sessionRow:hover {
-  color: var(--primary-color, #4A90D9);
+.sessionTable th {
+  text-align: left;
+  padding: 0.35rem 0.5rem;
+  font-weight: 600;
+  font-size: 0.75rem;
+  color: var(--text-secondary, #666);
+  border-bottom: 1px solid var(--border-color, #ddd);
+}
+
+.sessionTableRow {
+  cursor: pointer;
+}
+
+.sessionTableRow td {
+  padding: 0.35rem 0.5rem;
+  border-bottom: 1px solid var(--border-color, #eee);
+}
+
+.sessionTableRow:hover td {
+  background: rgba(74, 144, 217, 0.05);
+}
+
+.sessionDeleteBtn {
+  background: none;
+  border: none;
+  color: #b91c1c;
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 0.1rem 0.35rem;
+  border-radius: 3px;
+  line-height: 1;
+  opacity: 0.5;
+}
+
+.sessionDeleteBtn:hover {
+  opacity: 1;
+  background: rgba(185, 28, 28, 0.1);
 }
 
 .sessionStatus {
diff --git a/src/pages/views/teamsbot/TeamsbotModulesView.tsx b/src/pages/views/teamsbot/TeamsbotModulesView.tsx
index 9e64240..7a9db37 100644
--- a/src/pages/views/teamsbot/TeamsbotModulesView.tsx
+++ b/src/pages/views/teamsbot/TeamsbotModulesView.tsx
@@ -188,16 +188,34 @@ export const TeamsbotModulesView: React.FC = () => {
     }
   };
 
-  const _formatSessionDate = (startedAt?: string | number) => {
-    if (startedAt == null) return '-';
-    if (typeof startedAt === 'number') {
-      return new Date(startedAt * 1000).toLocaleDateString('de-CH');
-    }
-    const ms = Date.parse(String(startedAt));
-    if (!Number.isNaN(ms)) return new Date(ms).toLocaleDateString('de-CH');
-    return '-';
+  const _formatSessionDateTime = (ts?: string | number): string => {
+    if (ts == null) return '-';
+    const ms = typeof ts === 'number' ? ts * 1000 : Date.parse(String(ts));
+    if (Number.isNaN(ms)) return '-';
+    const d = new Date(ms);
+    const pad = (n: number) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
   };
 
+  const _calcDurationMin = (startedAt?: string | number, endedAt?: string | number): string => {
+    if (!startedAt) return '-';
+    const startMs = typeof startedAt === 'number' ? startedAt * 1000 : Date.parse(String(startedAt));
+    if (Number.isNaN(startMs)) return '-';
+    const endMs = endedAt
+      ? (typeof endedAt === 'number' ? endedAt * 1000 : Date.parse(String(endedAt)))
+      : Date.now();
+    if (Number.isNaN(endMs)) return '-';
+    const mins = Math.round((endMs - startMs) / 60000);
+    return `${mins} min`;
+  };
+
+  const _sortedSessions = (sessions: TeamsbotSession[]): TeamsbotSession[] =>
+    [...sessions].sort((a, b) => {
+      const ta = a.startedAt ? (typeof a.startedAt === 'number' ? a.startedAt * 1000 : Date.parse(String(a.startedAt))) : 0;
+      const tb = b.startedAt ? (typeof b.startedAt === 'number' ? b.startedAt * 1000 : Date.parse(String(b.startedAt))) : 0;
+      return tb - ta;
+    });
+
   return (
     <div className={styles.modulesContainer}>
       <div className={styles.modulesHeader}>
@@ -248,17 +266,50 @@ export const TeamsbotModulesView: React.FC = () => {
                 {(moduleSessions[mod.id] || []).length === 0 ? (
                   <p className={styles.noSessions}>{t('Keine Sitzungen')}</p>
                 ) : (
-                  (moduleSessions[mod.id] || []).map((sess) => (
-                    <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>{_formatSessionDate(sess.startedAt)}</span>
-                    </div>
-                  ))
+                  <table className={styles.sessionTable}>
+                    <thead>
+                      <tr>
+                        <th style={{ width: 32 }}></th>
+                        <th>{t('Datum')}</th>
+                        <th>{t('Dauer')}</th>
+                        <th>{t('Status')}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {_sortedSessions(moduleSessions[mod.id] || []).map((sess) => (
+                        <tr
+                          key={sess.id}
+                          className={styles.sessionTableRow}
+                          onClick={() => navigate(`/mandates/${mandateId}/teamsbot/${instanceId}/sessions?sessionId=${sess.id}`)}
+                        >
+                          <td>
+                            <button
+                              type="button"
+                              className={styles.sessionDeleteBtn}
+                              title={t('Sitzung loeschen')}
+                              onClick={async (e) => {
+                                e.stopPropagation();
+                                try {
+                                  await teamsbotApi.deleteSession(instanceId, sess.id);
+                                  setModuleSessions((prev) => ({
+                                    ...prev,
+                                    [mod.id]: (prev[mod.id] || []).filter((s) => s.id !== sess.id),
+                                  }));
+                                } catch (err) {
+                                  console.error('Delete session failed:', err);
+                                }
+                              }}
+                            >
+                              x
+                            </button>
+                          </td>
+                          <td>{_formatSessionDateTime(sess.startedAt)}</td>
+                          <td>{_calcDurationMin(sess.startedAt, sess.endedAt)}</td>
+                          <td><span className={styles.sessionStatus}>{sess.status}</span></td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
                 )}
               </div>
             )}
diff --git a/src/pages/views/teamsbot/TeamsbotSessionView.tsx b/src/pages/views/teamsbot/TeamsbotSessionView.tsx
index 5de3056..e1b382f 100644
--- a/src/pages/views/teamsbot/TeamsbotSessionView.tsx
+++ b/src/pages/views/teamsbot/TeamsbotSessionView.tsx
@@ -23,6 +23,8 @@ import { useFileContext } from '../../../contexts/FileContext';
 import styles from './Teamsbot.module.css';
 
 import { useLanguage } from '../../../providers/language/LanguageContext';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 /**
  * TeamsbotSessionView - Live session view with real-time transcript and bot responses.
@@ -61,6 +63,8 @@ export const TeamsbotSessionView: React.FC = () => {
 
   const [agentStatus, setAgentStatus] = useState<{ toolName?: string; status?: string; reason?: string } | null>(null);
   const agentStatusTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [agentProgressLog, setAgentProgressLog] = useState<Array<{ id: number; text: string; ts: string }>>([]);
+  const agentProgressIdRef = useRef(0);
   const [sessionStats, setSessionStats] = useState<any>(null);
   const [reconnectTick, setReconnectTick] = useState(0);
   const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -311,6 +315,22 @@ export const TeamsbotSessionView: React.FC = () => {
               setAgentStatus({ toolName: data.toolName, status: data.status, reason: data.reason });
               if (agentStatusTimerRef.current) clearTimeout(agentStatusTimerRef.current);
               agentStatusTimerRef.current = setTimeout(() => setAgentStatus(null), 15000);
+            } else if (data.status === 'toolCall') {
+              const label = data.displayLabel || data.toolName || '';
+              setAgentStatus({ toolName: label, status: 'running' });
+              if (agentStatusTimerRef.current) clearTimeout(agentStatusTimerRef.current);
+              agentStatusTimerRef.current = setTimeout(() => setAgentStatus(null), 15000);
+              agentProgressIdRef.current += 1;
+              const entry = { id: agentProgressIdRef.current, text: `${label}`, ts: new Date().toLocaleTimeString() };
+              setAgentProgressLog((prev) => [...prev.slice(-19), entry]);
+            } else if (data.status === 'toolResult') {
+              const summary = data.summary ? `: ${data.summary.substring(0, 120)}` : '';
+              agentProgressIdRef.current += 1;
+              const entry = { id: agentProgressIdRef.current, text: `${data.toolName || ''}${summary}`, ts: new Date().toLocaleTimeString() };
+              setAgentProgressLog((prev) => [...prev.slice(-19), entry]);
+            } else if (data.status === 'completed') {
+              if (agentStatusTimerRef.current) clearTimeout(agentStatusTimerRef.current);
+              setAgentStatus(null);
             } else {
               if (agentStatusTimerRef.current) clearTimeout(agentStatusTimerRef.current);
               agentStatusTimerRef.current = setTimeout(() => setAgentStatus(null), 2000);
@@ -807,14 +827,13 @@ export const TeamsbotSessionView: React.FC = () => {
         </div>
       )}
 
-      {/* Agent Status Bubble (F-fix-2) */}
+      {/* Agent Status Bubble + Progress Log */}
       {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}>
@@ -1093,7 +1112,8 @@ export const TeamsbotSessionView: React.FC = () => {
                   <div className={styles.directorHistoryText}>{p.text}</div>
                   {p.responseText && (
                     <div className={styles.directorHistoryText} style={{ opacity: 0.85 }}>
-                      <em>{t('Antwort')}:</em> {p.responseText}
+                      <em>{t('Antwort')}:</em>
+                      <ReactMarkdown remarkPlugins={[remarkGfm]}>{p.responseText}</ReactMarkdown>
                     </div>
                   )}
                   {p.statusMessage && p.status === 'failed' && (
@@ -1145,7 +1165,9 @@ export const TeamsbotSessionView: React.FC = () => {
                   <span className={styles.responseIntent}>{r.detectedIntent}</span>
                   <span className={styles.responseTime}>{_formatTime(r.timestamp || '')}</span>
                 </div>
-                <div className={styles.responseText}>{r.responseText}</div>
+                <div className={styles.responseText}>
+                  <ReactMarkdown remarkPlugins={[remarkGfm]}>{r.responseText || ''}</ReactMarkdown>
+                </div>
                 {r.reasoning && (
                   <div className={styles.responseReasoning}>
                     <em>{t('Begründung: {text}', { text: r.reasoning })}</em>
@@ -1171,17 +1193,40 @@ export const TeamsbotSessionView: React.FC = () => {
       {session.summary && (
         <div className={styles.summaryCard}>
           <h4 className={styles.panelTitle}>{t('Meeting-Zusammenfassung')}</h4>
-          <div className={styles.summaryText}>{session.summary}</div>
+          <div className={styles.summaryText}>
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{session.summary || ''}</ReactMarkdown>
+          </div>
         </div>
       )}
 
-      {/* TTS Delivery Debug */}
-      <div className={styles.summaryCard}>
-        <h4 className={styles.panelTitle}>{t('TTS-Lieferstatus')}</h4>
+      {/* Agent Progress Log (collapsed by default) */}
+      <details className={styles.summaryCard}>
+        <summary className={styles.panelTitle} style={{ cursor: 'pointer' }}>
+          {t('Agent-Fortschritt')} ({agentProgressLog.length})
+        </summary>
+        {agentProgressLog.length === 0 ? (
+          <div className={styles.emptyState}>{t('Noch keine Agent-Aktivitaet')}</div>
+        ) : (
+          <div className={styles.agentProgressLog}>
+            {agentProgressLog.map((entry) => (
+              <div key={entry.id} className={styles.agentProgressEntry}>
+                <span className={styles.agentProgressTime}>{entry.ts}</span>
+                <span className={styles.agentProgressText}>{entry.text}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </details>
+
+      {/* TTS Delivery Debug (collapsed by default) */}
+      <details className={styles.summaryCard}>
+        <summary className={styles.panelTitle} style={{ cursor: 'pointer' }}>
+          {t('TTS-Lieferstatus')} ({ttsStatusEvents.length})
+        </summary>
         {ttsStatusEvents.length === 0 ? (
           <div className={styles.emptyState}>{t('Noch keine TTS-Events')}</div>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', padding: '0.5rem 0' }}>
             {ttsStatusEvents.slice(-10).reverse().map((ev, idx) => (
               <div key={`${ev.timestamp}-${idx}`} className={styles.responseMeta}>
                 <span>{_formatTime(ev.timestamp)}</span>
@@ -1192,7 +1237,7 @@ export const TeamsbotSessionView: React.FC = () => {
             ))}
           </div>
         )}
-      </div>
+      </details>
 
       {/* Debug Log (SSE/Transcript/Chat) */}
       <div style={{ position: 'fixed', bottom: 0, right: 0, zIndex: 9999 }}>

From ba5b0fa8e8cc0a5281998936d3a526b58fea649b Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@valueon.ch>
Date: Tue, 12 May 2026 22:44:20 +0200
Subject: [PATCH 08/10] fixes ui

---
 src/pages/views/teamsbot/Teamsbot.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/views/teamsbot/Teamsbot.module.css b/src/pages/views/teamsbot/Teamsbot.module.css
index 418b3a1..19414b2 100644
--- a/src/pages/views/teamsbot/Teamsbot.module.css
+++ b/src/pages/views/teamsbot/Teamsbot.module.css
@@ -1716,7 +1716,7 @@
   border: 1px solid var(--border-color, #e0e0e0);
   border-radius: 12px;
   padding: 1.5rem;
-  max-width: 400px;
+  max-width: 600px;
   width: 90%;
   display: flex;
   flex-direction: column;

From 0e89ed2a6493ab1282423b1118b77a2e187fbee0 Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@valueon.ch>
Date: Tue, 12 May 2026 23:33:44 +0200
Subject: [PATCH 09/10] fixes stt paras

---
 .../FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx
index 60b08ca..ef300db 100644
--- a/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx
+++ b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx
@@ -416,7 +416,7 @@ export function FormGeneratorTree<T = any>({
   className,
 }: FormGeneratorTreeProps<T>) {
   const { t } = useLanguage();
-  const { confirm } = useConfirm();
+  const { confirm, ConfirmDialog } = useConfirm();
   const { prompt, PromptDialog } = usePrompt();
   const [nodes, setNodes] = useState<TreeNode<T>[]>([]);
   const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
@@ -1032,6 +1032,7 @@ export function FormGeneratorTree<T = any>({
         </div>
       )}
       <PromptDialog />
+      <ConfirmDialog />
     </div>
   );
 }

From 8c0e2ee8afa4e85260ac96a6b0055cfcf84e257f Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@valueon.ch>
Date: Tue, 12 May 2026 23:40:28 +0200
Subject: [PATCH 10/10] build fixes

---
 .../FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx | 2 +-
 src/components/UnifiedDataBar/SourcesTab.tsx                | 2 +-
 src/hooks/useConnections.ts                                 | 2 +-
 src/pages/basedata/ConnectionsPage.tsx                      | 6 +++---
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx
index 352f8e8..48ba976 100644
--- a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx
+++ b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx
@@ -3377,7 +3377,7 @@ export function FormGeneratorTable<T extends Record<string, any>>({
                 g.value === null || g.value === undefined ? '__empty__' : String(g.value);
               const sectionCollapsed = collapsedSectionKeys.has(sk);
               const groupFieldSet = new Set(groupFields);
-              const sectionColumns = providedColumns.map((col: any) =>
+              const sectionColumns = (providedColumns ?? []).map((col: any) =>
                 groupFieldSet.has(col.key) ? { ...col, filterable: false } : col,
               );
               const sectionInitialFilters = Object.fromEntries(
diff --git a/src/components/UnifiedDataBar/SourcesTab.tsx b/src/components/UnifiedDataBar/SourcesTab.tsx
index 4d2ccf4..63c4486 100644
--- a/src/components/UnifiedDataBar/SourcesTab.tsx
+++ b/src/components/UnifiedDataBar/SourcesTab.tsx
@@ -554,7 +554,7 @@ const SourcesTab: React.FC<SourcesTabProps> = ({ context, onSourcesChanged, onSe
             connectionId: c.id,
             authority: c.authority,
           }))
-          .sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }));
+          .sort((a: TreeNode, b: TreeNode) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }));
         setTree(nodes);
       })
       .catch(() => { if (mountedRef.current) setTree([]); })
diff --git a/src/hooks/useConnections.ts b/src/hooks/useConnections.ts
index c6681d3..f53db1f 100644
--- a/src/hooks/useConnections.ts
+++ b/src/hooks/useConnections.ts
@@ -786,7 +786,7 @@ export function useConnections() {
    * for backward-compat but new wizard code should call this.
    */
   const createConnectionAndAuth = async (
-    type: 'google' | 'msft' | 'clickup',
+    type: 'google' | 'msft' | 'clickup' | 'infomaniak',
     knowledgeIngestionEnabled: boolean,
     knowledgePreferences?: import('../api/connectionApi').KnowledgePreferences | null,
   ): Promise<void> => {
diff --git a/src/pages/basedata/ConnectionsPage.tsx b/src/pages/basedata/ConnectionsPage.tsx
index 695d10a..081fc27 100644
--- a/src/pages/basedata/ConnectionsPage.tsx
+++ b/src/pages/basedata/ConnectionsPage.tsx
@@ -215,13 +215,13 @@ export const ConnectionsPage: React.FC = () => {
   const handleWizardConnect = async (
     type: ConnectorType,
     knowledgeEnabled: boolean,
-    knowledgePreferences: KnowledgePreferences | null,
+    knowledgePreferences?: KnowledgePreferences | null,
   ) => {
     try {
-      await createConnectionAndAuth(type, knowledgeEnabled, knowledgePreferences);
+      await createConnectionAndAuth(type, knowledgeEnabled, knowledgePreferences ?? null);
       refetch();
       if (knowledgeEnabled) {
-        const LABELS: Record<ConnectorType, string> = { google: 'Google', msft: 'Microsoft 365', clickup: 'ClickUp' };
+        const LABELS: Record<ConnectorType, string> = { google: 'Google', msft: 'Microsoft 365', clickup: 'ClickUp', infomaniak: 'Infomaniak' };
         showSyncBanner(LABELS[type] ?? type);
       }
     } catch (error) {