feat(web): add Mission Control page layout shell

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

@@ -0,0 +1,16 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function GlobalAgentRoster(): React.JSX.Element {
+  return (
+    <Card className="flex h-full min-h-0 flex-col">
+      <CardHeader>
+        <CardTitle className="text-base">Agent Roster</CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
+        No active agents
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,21 @@
+"use client";
+
+import { GlobalAgentRoster } from "@/components/mission-control/GlobalAgentRoster";
+import { MissionControlPanel } from "@/components/mission-control/MissionControlPanel";
+
+const DEFAULT_PANEL_SLOTS = ["panel-1", "panel-2", "panel-3", "panel-4"] as const;
+
+export function MissionControlLayout(): React.JSX.Element {
+  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 />
+        </aside>
+        <main className="h-full min-h-0 overflow-hidden">
+          <MissionControlPanel panels={DEFAULT_PANEL_SLOTS} />
+        </main>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,17 @@
+"use client";
+
+import { OrchestratorPanel } from "@/components/mission-control/OrchestratorPanel";
+
+interface MissionControlPanelProps {
+  panels: readonly string[];
+}
+
+export function MissionControlPanel({ panels }: MissionControlPanelProps): React.JSX.Element {
+  return (
+    <div className="grid h-full min-h-0 auto-rows-fr grid-cols-1 gap-4 overflow-y-auto pr-1 md:grid-cols-2">
+      {panels.map((panelId) => (
+        <OrchestratorPanel key={panelId} />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,16 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function OrchestratorPanel(): React.JSX.Element {
+  return (
+    <Card className="flex h-full min-h-[220px] flex-col">
+      <CardHeader>
+        <CardTitle className="text-base">Orchestrator Panel</CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
+        Select an agent
+      </CardContent>
+    </Card>
+  );
+}