From cf8f4ea3be323bede265e20cca8ad4e5726fee4d Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@valueon.ch>
Date: Mon, 16 Feb 2026 09:02:44 +0100
Subject: [PATCH] fix(teamsbot): session switcher in session view, fix
 navigation from dashboard details button

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../views/teamsbot/TeamsbotSessionView.tsx    | 44 ++++++++++++++++---
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/pages/views/teamsbot/TeamsbotSessionView.tsx b/src/pages/views/teamsbot/TeamsbotSessionView.tsx
index 80b70a5..1e3f562 100644
--- a/src/pages/views/teamsbot/TeamsbotSessionView.tsx
+++ b/src/pages/views/teamsbot/TeamsbotSessionView.tsx
@@ -15,6 +15,7 @@ export const TeamsbotSessionView: React.FC = () => {
   const sessionId = searchParams.get('sessionId') || '';
 
   const [session, setSession] = useState<TeamsbotSession | null>(null);
+  const [allSessions, setAllSessions] = useState<TeamsbotSession[]>([]);
   const [transcripts, setTranscripts] = useState<TeamsbotTranscript[]>([]);
   const [botResponses, setBotResponses] = useState<TeamsbotBotResponse[]>([]);
   const [loading, setLoading] = useState(true);
@@ -32,19 +33,23 @@ export const TeamsbotSessionView: React.FC = () => {
       setLoading(true);
       setNoSessions(false);
 
+      // Always load the full session list for the switcher
+      const listResult = await teamsbotApi.listSessions(instanceId, true);
+      const sessions = listResult.sessions || [];
+      setAllSessions(sessions);
+
       let targetSessionId = sessionId;
 
-      // No sessionId in URL -> find the most recent session
+      // No sessionId in URL -> find the most recent active or latest session
       if (!targetSessionId) {
-        const listResult = await teamsbotApi.listSessions(instanceId, true);
-        const sessions = listResult.sessions || [];
         if (sessions.length === 0) {
           setNoSessions(true);
           setLoading(false);
           return;
         }
-        // Pick the most recent (first in list, sorted by creation date desc)
-        targetSessionId = sessions[0].id;
+        // Prefer active sessions, then most recent
+        const activeSession = sessions.find(s => ['active', 'joining', 'pending'].includes(s.status));
+        targetSessionId = activeSession ? activeSession.id : sessions[0].id;
         setSearchParams({ sessionId: targetSessionId }, { replace: true });
       }
 
@@ -178,8 +183,37 @@ export const TeamsbotSessionView: React.FC = () => {
   );
   if (!session) return <div className={styles.errorBanner}>Sitzung nicht gefunden</div>;
 
+  const _switchSession = (newSessionId: string) => {
+    setSearchParams({ sessionId: newSessionId });
+  };
+
   return (
     <div className={styles.sessionContainer}>
+      {/* Session Switcher (if multiple sessions exist) */}
+      {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>
+      )}
+
       {/* Session Header */}
       <div className={styles.sessionViewHeader}>
         <div className={styles.sessionInfo}>