feat(web): MS23-P2-005 GlobalAgentRoster sidebar tree

apps/web/src/components/mission-control/MissionControlLayout.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { GlobalAgentRoster } from "@/components/mission-control/GlobalAgentRoster";
 import { MissionControlPanel } from "@/components/mission-control/MissionControlPanel";
 import { useSessions } from "@/hooks/useMissionControl";
@@ -8,14 +9,20 @@ const DEFAULT_PANEL_SLOTS = ["panel-1", "panel-2", "panel-3", "panel-4"] as cons
 
 export function MissionControlLayout(): React.JSX.Element {
   const { sessions } = useSessions();
+  const [selectedSessionId, setSelectedSessionId] = useState<string>();
 
-  const panelSessionIds = [sessions[0]?.id, undefined, undefined, undefined] as const;
+  // First panel: selected session (from roster click) or first available session
+  const firstPanelSessionId = selectedSessionId ?? sessions[0]?.id;
+  const panelSessionIds = [firstPanelSessionId, undefined, undefined, undefined] as const;
 
   return (
     <section className="h-full min-h-0 overflow-hidden" aria-label="Mission Control">
       <div className="grid h-full min-h-0 gap-4 xl:grid-cols-[280px_minmax(0,1fr)]">
         <aside className="h-full min-h-0">
-          <GlobalAgentRoster />
+          <GlobalAgentRoster
+            onSelectSession={setSelectedSessionId}
+            selectedSessionId={selectedSessionId}
+          />
         </aside>
         <main className="h-full min-h-0 overflow-hidden">
           <MissionControlPanel panels={DEFAULT_PANEL_SLOTS} panelSessionIds={panelSessionIds} />