46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { AuditLogDrawer } from "@/components/mission-control/AuditLogDrawer";
|
|
import { GlobalAgentRoster } from "@/components/mission-control/GlobalAgentRoster";
|
|
import { MissionControlPanel } from "@/components/mission-control/MissionControlPanel";
|
|
import { Button } from "@/components/ui/button";
|
|
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="flex h-full min-h-0 flex-col overflow-hidden" aria-label="Mission Control">
|
|
<header className="mb-3 flex items-center justify-end">
|
|
<AuditLogDrawer
|
|
trigger={
|
|
<Button variant="outline" size="sm">
|
|
Audit Log
|
|
</Button>
|
|
}
|
|
/>
|
|
</header>
|
|
|
|
<div className="grid min-h-0 flex-1 gap-4 xl:grid-cols-[280px_minmax(0,1fr)]">
|
|
<aside className="h-full min-h-0">
|
|
<GlobalAgentRoster
|
|
onSelectSession={setSelectedSessionId}
|
|
{...(selectedSessionId !== undefined ? { selectedSessionId } : {})}
|
|
/>
|
|
</aside>
|
|
<main className="h-full min-h-0 overflow-hidden">
|
|
<MissionControlPanel panels={DEFAULT_PANEL_SLOTS} panelSessionIds={panelSessionIds} />
|
|
</main>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|