34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
"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";
|
|
|
|
const DEFAULT_PANEL_SLOTS = ["panel-1", "panel-2", "panel-3", "panel-4"] as const;
|
|
|
|
export function MissionControlLayout(): React.JSX.Element {
|
|
const { sessions } = useSessions();
|
|
const [selectedSessionId, setSelectedSessionId] = useState<string>();
|
|
|
|
// 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
|
|
onSelectSession={setSelectedSessionId}
|
|
selectedSessionId={selectedSessionId}
|
|
/>
|
|
</aside>
|
|
<main className="h-full min-h-0 overflow-hidden">
|
|
<MissionControlPanel panels={DEFAULT_PANEL_SLOTS} panelSessionIds={panelSessionIds} />
|
|
</main>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|