@builderos/create-agent-os 0.0.2

package/src/template/design/src/sections/persistent-memory-system/PersistentMemory.tsx

@@ -0,0 +1,308 @@
+import React, { useState } from 'react';
+import {
+    History,
+    Search,
+    Filter,
+    Play,
+    Pause,
+    FileText,
+    Tag,
+    Calendar,
+    ChevronRight,
+    GitCommit,
+    Quote,
+    Database,
+    ShieldAlert,
+    Clock
+} from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+import { Progress } from '@/components/ui/progress';
+
+// Mock Data Types
+interface ContextSnippet {
+    id: string;
+    type: string;
+    start?: string;
+    duration?: string;
+    speaker?: string;
+    transcript: string;
+}
+
+interface Decision {
+    id: string;
+    title: string;
+    summary: string;
+    outcome: string;
+    createdAt: string;
+    tags: string[];
+    contextSnippets: ContextSnippet[];
+    impact: 'high' | 'medium' | 'low' | 'critical';
+}
+
+const MOCK_DATA = {
+    "decisions": [
+        {
+            "id": "d_1",
+            "title": "Adopt PostgreSQL for primary data store",
+            "summary": "We chose Postgres over MongoDB due to strict relational data requirements and better ACID compliance for financial transactions.",
+            "outcome": "approved",
+            "createdAt": "2023-11-15T10:00:00Z",
+            "tags": ["Architecture", "Database", "Backend"],
+            "contextSnippets": [
+                {
+                    "id": "ctx_1",
+                    "type": "audio",
+                    "start": "14:20",
+                    "duration": "45s",
+                    "speaker": "Sarah Chen",
+                    "transcript": "Look, if we lose a single transaction record, we're liable. Mongo's flexibility is nice, but we need rigid schemas here."
+                }
+            ],
+            "impact": "high"
+        },
+        {
+            "id": "d_2",
+            "title": "Delay Q4 Launch by 2 weeks",
+            "summary": "To address critical security vulnerabilities found in the penetration test.",
+            "outcome": "approved",
+            "createdAt": "2023-10-01T15:30:00Z",
+            "tags": ["Schedule", "Security", "Risk"],
+            "contextSnippets": [
+                {
+                    "id": "ctx_2",
+                    "type": "transcript",
+                    "speaker": "David Kim",
+                    "transcript": "I'd rather be late than hacked. It's a non-negotiable for me."
+                }
+            ],
+            "impact": "critical"
+        },
+        {
+            "id": "d_3",
+            "title": "Use 'Inter' font family",
+            "summary": "Standardizing on a Google Font for better load times and legibility.",
+            "outcome": "consensus",
+            "createdAt": "2023-09-20T09:12:00Z",
+            "tags": ["Design", "UI", "Performance"],
+            "contextSnippets": [],
+            "impact": "low"
+        }
+    ] as Decision[],
+    "tags": [
+        "Architecture", "Database", "Backend", "Schedule", "Security", "Risk", "Design", "UI", "Performance"
+    ]
+};
+
+const ImpactBadge = ({ impact }: { impact: Decision['impact'] }) => {
+    const styles = {
+        critical: "bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800",
+        high: "bg-orange-100 text-orange-700 border-orange-200 dark:bg-orange-900/30 dark:text-orange-400 dark:border-orange-800",
+        medium: "bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800",
+        low: "bg-stone-100 text-stone-700 border-stone-200 dark:bg-stone-800 dark:text-stone-400 dark:border-stone-700",
+    };
+
+    return (
+        <span className={cn("text-[10px] font-bold uppercase px-1.5 py-0.5 rounded border", styles[impact])}>
+            {impact} Impact
+        </span>
+    );
+};
+
+export default function PersistentMemory() {
+    const [selectedDecision, setSelectedDecision] = useState<Decision | null>(MOCK_DATA.decisions[0]);
+    const [isPlaying, setIsPlaying] = useState(false);
+
+    return (
+        <div className="flex h-screen w-full bg-stone-50 dark:bg-stone-950 font-sans overflow-hidden">
+
+            {/* Sidebar: Filters & Graph Nav */}
+            <aside className="w-64 bg-white dark:bg-stone-900 border-r border-stone-200 dark:border-stone-800 flex flex-col p-4 z-20">
+                <div className="mb-6">
+                    <h2 className="text-lg font-bold text-stone-800 dark:text-stone-100 flex items-center gap-2">
+                        <Database size={20} className="text-indigo-600" />
+                        Memory Bank
+                    </h2>
+                    <p className="text-xs text-stone-500 mt-1">Organizational Wisdom Graph</p>
+                </div>
+
+                <div className="relative mb-4">
+                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-stone-400" />
+                    <Input placeholder="Search decisions..." className="pl-9 bg-stone-50 dark:bg-stone-800 border-stone-200 dark:border-stone-700" />
+                </div>
+
+                <div className="space-y-4 flex-1">
+                    <div>
+                        <h3 className="text-xs font-semibold uppercase text-stone-400 mb-2">Filters</h3>
+                        <div className="flex flex-wrap gap-1.5">
+                            {MOCK_DATA.tags.slice(0, 6).map(tag => (
+                                <Badge key={tag} variant="outline" className="cursor-pointer hover:bg-stone-100 dark:hover:bg-stone-800">
+                                    {tag}
+                                </Badge>
+                            ))}
+                        </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="bg-indigo-50 dark:bg-indigo-900/10 p-3 rounded-lg border border-indigo-100 dark:border-indigo-900/30">
+                        <h3 className="text-xs font-semibold text-indigo-700 dark:text-indigo-400 mb-1 flex items-center gap-1">
+                            <History size={12} /> Insight of the Day
+                        </h3>
+                        <p className="text-xs text-indigo-900 dark:text-indigo-300 italic">
+                            "Most security delays happened in Q4. Consider shifting penetration tests to Q3."
+                        </p>
+                    </div>
+                </div>
+            </aside>
+
+            {/* Main Content: Split View */}
+            <div className="flex-1 flex overflow-hidden">
+
+                {/* Left: Decision Timeline */}
+                <div className="w-1/3 border-r border-stone-200 dark:border-stone-800 bg-white/50 dark:bg-stone-900/50 flex flex-col">
+                    <div className="p-4 border-b border-stone-200 dark:border-stone-800 bg-white dark:bg-stone-900">
+                        <h3 className="font-semibold text-sm">Decision Timeline</h3>
+                    </div>
+                    <ScrollArea className="flex-1 p-4">
+                        <div className="relative border-l-2 border-stone-200 dark:border-stone-800 ml-3 space-y-6">
+                            {MOCK_DATA.decisions.map(decision => (
+                                <div
+                                    key={decision.id}
+                                    className={cn(
+                                        "relative pl-6 cursor-pointer group transition-all",
+                                        selectedDecision?.id === decision.id ? "opacity-100 scale-100" : "opacity-70 hover:opacity-100"
+                                    )}
+                                    onClick={() => setSelectedDecision(decision)}
+                                >
+                                    <div className={cn(
+                                        "absolute -left-[9px] top-1 h-4 w-4 rounded-full border-2 transition-colors",
+                                        selectedDecision?.id === decision.id
+                                            ? "bg-white border-indigo-600 dark:bg-stone-900 dark:border-indigo-500"
+                                            : "bg-stone-200 border-white dark:bg-stone-700 dark:border-stone-900 group-hover:bg-indigo-200"
+                                    )} />
+
+                                    <div className={cn(
+                                        "p-3 rounded-lg border shadow-sm transition-all",
+                                        selectedDecision?.id === decision.id
+                                            ? "bg-white dark:bg-stone-900 border-indigo-200 dark:border-indigo-800 shadow-md ring-1 ring-indigo-50 dark:ring-indigo-900/20"
+                                            : "bg-white dark:bg-stone-900 border-stone-200 dark:border-stone-800 hover:border-indigo-200 dark:hover:border-indigo-800"
+                                    )}>
+                                        <div className="flex justify-between items-start mb-1">
+                                            <span className="text-[10px] text-stone-500 font-mono">
+                                                {new Date(decision.createdAt).toLocaleDateString()}
+                                            </span>
+                                            <ImpactBadge impact={decision.impact} />
+                                        </div>
+                                        <h4 className="font-medium text-stone-900 dark:text-stone-100 text-sm leading-tight mb-2">
+                                            {decision.title}
+                                        </h4>
+                                        <div className="flex gap-1 flex-wrap">
+                                            {decision.tags.slice(0, 2).map(tag => (
+                                                <span key={tag} className="text-[10px] text-stone-500 bg-stone-50 dark:bg-stone-800 px-1 py-0.5 rounded">
+                                                    #{tag}
+                                                </span>
+                                            ))}
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </ScrollArea>
+                </div>
+
+                {/* Right: Detail View ("The Why") */}
+                <div className="flex-1 bg-stone-50 dark:bg-stone-950 flex flex-col h-full overflow-hidden">
+                    {selectedDecision ? (
+                        <div className="flex-1 overflow-y-auto">
+                            {/* Header */}
+                            <div className="p-8 pb-4">
+                                <div className="flex items-center gap-3 mb-4">
+                                    <div className="h-10 w-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center text-indigo-600 dark:text-indigo-400">
+                                        <GitCommit size={20} />
+                                    </div>
+                                    <div>
+                                        <h1 className="text-2xl font-bold text-stone-900 dark:text-stone-50">{selectedDecision.title}</h1>
+                                        <p className="text-stone-500 text-sm flex items-center gap-2">
+                                            Status: <span className="text-emerald-600 font-medium capitalize">{selectedDecision.outcome}</span>
+                                        </p>
+                                    </div>
+                                </div>
+
+                                <div className="flex gap-2 mb-6">
+                                    {selectedDecision.tags.map(tag => (
+                                        <Badge key={tag} variant="secondary">
+                                            {tag}
+                                        </Badge>
+                                    ))}
+                                </div>
+
+                                <Card className="mb-6">
+                                    <CardHeader className="bg-stone-50/50 dark:bg-stone-900/50 border-b border-stone-100 dark:border-stone-800 py-3">
+                                        <CardTitle className="text-sm font-semibold flex items-center gap-2">
+                                            <FileText size={16} /> The Rationale
+                                        </CardTitle>
+                                    </CardHeader>
+                                    <CardContent className="p-4">
+                                        <p className="text-stone-700 dark:text-stone-300 leading-relaxed">
+                                            {selectedDecision.summary}
+                                        </p>
+                                    </CardContent>
+                                </Card>
+
+                                {/* Context / Media Player */}
+                                {selectedDecision.contextSnippets.length > 0 && (
+                                    <div className="space-y-4">
+                                        <h3 className="text-sm font-semibold text-stone-500 uppercase tracking-wider">Historical Context</h3>
+                                        {selectedDecision.contextSnippets.map(snippet => (
+                                            <Card key={snippet.id} className="overflow-hidden border-indigo-100 dark:border-indigo-900/50">
+                                                <div className="bg-indigo-50/50 dark:bg-indigo-900/10 p-3 flex items-center gap-3 border-b border-indigo-100 dark:border-indigo-900/20">
+                                                    <Button
+                                                        size="icon"
+                                                        className="h-8 w-8 rounded-full bg-indigo-600 hover:bg-indigo-700 text-white shadow-sm shrink-0"
+                                                        onClick={() => setIsPlaying(!isPlaying)}
+                                                    >
+                                                        {isPlaying ? <Pause size={14} /> : <Play size={14} className="ml-0.5" />}
+                                                    </Button>
+                                                    <div className="flex-1">
+                                                        <div className="flex justify-between items-center text-xs mb-1">
+                                                            <span className="font-semibold text-indigo-900 dark:text-indigo-300">
+                                                                {snippet.speaker}
+                                                            </span>
+                                                            <span className="font-mono text-stone-400">
+                                                                {snippet.start} ({snippet.duration})
+                                                            </span>
+                                                        </div>
+                                                        <Progress value={isPlaying ? 45 : 0} className="h-1 bg-indigo-200 dark:bg-indigo-900/50" />
+                                                    </div>
+                                                </div>
+                                                <div className="p-4 bg-white dark:bg-stone-900">
+                                                    <div className="flex gap-3">
+                                                        <Quote size={16} className="text-stone-300 shrink-0 mt-1" />
+                                                        <p className="text-stone-600 dark:text-stone-400 italic text-sm">
+                                                            "{snippet.transcript}"
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                            </Card>
+                                        ))}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    ) : (
+                        <div className="flex-1 flex items-center justify-center text-stone-400">
+                            Select a decision to view details
+                        </div>
+                    )}
+                </div>
+
+            </div>
+        </div>
+    );
+}

package/src/template/design/src/sections/real-time-communication-layer/VideoSession.tsx

@@ -0,0 +1,342 @@
+import React, { useState } from 'react';
+import {
+    Mic,
+    MicOff,
+    Video,
+    VideoOff,
+    Monitor,
+    MoreVertical,
+    PhoneOff,
+    Settings,
+    Users,
+    MessageSquare,
+    Wifi,
+    WifiOff,
+    Activity,
+    Maximize2
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+import { Label } from '@/components/ui/label';
+
+// Mock Data Types
+interface Participant {
+    id: string;
+    name: string;
+    isLocal: boolean;
+    isMuted: boolean;
+    isVideoOff: boolean;
+    volume: number;
+    avatarUrl: string;
+    connectionQuality: 'excellent' | 'good' | 'poor';
+}
+
+interface NetworkStats {
+    latency: number;
+    packetLoss: number;
+    bandwidth: string;
+    serverRegion: string;
+}
+
+const MOCK_DATA = {
+    "session": {
+        "id": "sess_rtc_live_01",
+        "startTime": "2023-11-20T14:00:00Z",
+        "duration": "15:30",
+        "status": "connected"
+    },
+    "participants": [
+        {
+            "id": "p_1",
+            "name": "You",
+            "isLocal": true,
+            "isMuted": false,
+            "isVideoOff": false,
+            "volume": 0,
+            "avatarUrl": "https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah",
+            "connectionQuality": "excellent"
+        },
+        {
+            "id": "p_2",
+            "name": "David Kim",
+            "isLocal": false,
+            "isMuted": false,
+            "isVideoOff": false,
+            "volume": 65,
+            "avatarUrl": "https://api.dicebear.com/7.x/avataaars/svg?seed=David",
+            "connectionQuality": "good"
+        },
+        {
+            "id": "p_3",
+            "name": "Maria Garcia",
+            "isLocal": false,
+            "isMuted": true,
+            "isVideoOff": true,
+            "volume": 0,
+            "avatarUrl": "https://api.dicebear.com/7.x/avataaars/svg?seed=Maria",
+            "connectionQuality": "excellent"
+        },
+        {
+            "id": "p_4",
+            "name": "James Wilson",
+            "isLocal": false,
+            "isMuted": false,
+            "isVideoOff": false,
+            "volume": 12,
+            "avatarUrl": "https://api.dicebear.com/7.x/avataaars/svg?seed=James",
+            "connectionQuality": "poor"
+        }
+    ] as Participant[],
+    "networkStats": {
+        "latency": 45,
+        "packetLoss": 0.1,
+        "bandwidth": "2.4 Mbps",
+        "serverRegion": "us-east-1"
+    } as NetworkStats,
+    "devices": {
+        "audioInputs": ["MacBook Pro Microphone", "AirPods Pro"],
+        "audioOutputs": ["MacBook Pro Speakers", "AirPods Pro"],
+        "videoInputs": ["FaceTime HD Camera", "Logitech Brio"]
+    }
+};
+
+const ConnectionBadge = ({ quality, latency }: { quality: string, latency: number }) => {
+    const getColor = () => {
+        switch (quality) {
+            case 'excellent': return 'text-emerald-500 bg-emerald-50 border-emerald-200 dark:bg-emerald-900/20 dark:border-emerald-800';
+            case 'good': return 'text-yellow-500 bg-yellow-50 border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-800';
+            case 'poor': return 'text-red-500 bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800';
+            default: return 'text-stone-500 bg-stone-50 border-stone-200';
+        }
+    };
+
+    return (
+        <div className={`flex items-center gap-2 px-2 py-1 rounded-full border text-xs font-medium ${getColor()}`}>
+            {quality === 'poor' ? <WifiOff size={14} /> : <Wifi size={14} />}
+            <span>{latency}ms</span>
+        </div>
+    );
+};
+
+const ParticipantTile = ({ participant }: { participant: Participant }) => {
+    return (
+        <div className="relative aspect-video bg-stone-900 rounded-xl overflow-hidden shadow-sm border border-stone-800 group">
+            {/* Video Placeholder or Avatar */}
+            <div className="absolute inset-0 flex items-center justify-center">
+                {participant.isVideoOff ? (
+                    <Avatar className="w-24 h-24 border-2 border-stone-700">
+                        <AvatarImage src={participant.avatarUrl} />
+                        <AvatarFallback>{participant.name[0]}</AvatarFallback>
+                    </Avatar>
+                ) : (
+                    <div className="w-full h-full bg-stone-800 flex items-center justify-center text-stone-600">
+                        {/* Simulated Video Stream Gradient */}
+                        <div className="w-full h-full bg-gradient-to-br from-stone-800 to-stone-900 opacity-50" />
+                    </div>
+                )}
+            </div>
+
+            {/* Overlay Info */}
+            <div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent flex items-end justify-between">
+                <div className="flex items-center gap-2">
+                    <span className="text-white text-sm font-medium drop-shadow-md">
+                        {participant.name} {participant.isLocal && "(You)"}
+                    </span>
+                    {participant.isMuted && <MicOff size={14} className="text-red-400" />}
+                </div>
+                <ConnectionBadge quality={participant.connectionQuality} latency={30 + Math.random() * 50} />
+            </div>
+
+            {/* Audio Visualizer (Active Speaker) */}
+            {!participant.isMuted && participant.volume > 0 && (
+                <div className="absolute top-3 right-3 flex items-end gap-0.5 h-4">
+                    {[...Array(4)].map((_, i) => (
+                        <div
+                            key={i}
+                            className="w-1 bg-emerald-500 rounded-full animate-pulse"
+                            style={{
+                                height: `${Math.random() * 100}%`,
+                                animationDuration: `${0.2 + Math.random() * 0.3}s`
+                            }}
+                        />
+                    ))}
+                </div>
+            )}
+
+            {/* Speaking border */}
+            {!participant.isMuted && participant.volume > 20 && (
+                <div className="absolute inset-0 border-2 border-emerald-500 rounded-xl pointer-events-none" />
+            )}
+        </div>
+    );
+};
+
+export default function VideoSession() {
+    const [micOn, setMicOn] = useState(true);
+    const [videoOn, setVideoOn] = useState(true);
+
+    // Update local participant state based on controls
+    const participants = MOCK_DATA.participants.map(p =>
+        p.isLocal ? { ...p, isMuted: !micOn, isVideoOff: !videoOn } : p
+    );
+
+    return (
+        <div className="flex flex-col h-screen bg-stone-950 text-stone-100 overflow-hidden font-sans">
+
+            {/* Top Bar */}
+            <header className="h-16 flex items-center justify-between px-6 border-b border-stone-900 bg-stone-950/90 backdrop-blur">
+                <div className="flex items-center gap-4">
+                    <div className="flex flex-col">
+                        <h1 className="font-semibold text-sm">Product Strategy Sync</h1>
+                        <div className="flex items-center gap-2 text-xs text-stone-400">
+                            <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+                            {MOCK_DATA.session.duration}
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-stone-900 border border-stone-800">
+                        <Activity size={14} className="text-emerald-500" />
+                        <span className="text-xs text-stone-400">Region: {MOCK_DATA.networkStats.serverRegion}</span>
+                        <span className="w-px h-3 bg-stone-800 mx-1" />
+                        <span className="text-xs text-stone-400">{MOCK_DATA.networkStats.bandwidth}</span>
+                    </div>
+
+                    <Dialog>
+                        <DialogTrigger asChild>
+                            <Button variant="ghost" size="icon" className="text-stone-400 hover:text-white hover:bg-stone-800">
+                                <Settings size={20} />
+                            </Button>
+                        </DialogTrigger>
+                        <DialogContent className="sm:max-w-[425px] bg-stone-900 border-stone-800 text-stone-100">
+                            <DialogHeader>
+                                <DialogTitle>Audio & Video Settings</DialogTitle>
+                                <DialogDescription className="text-stone-400">
+                                    Configure your devices for the session.
+                                </DialogDescription>
+                            </DialogHeader>
+                            <div className="grid gap-4 py-4">
+                                <div className="grid gap-2">
+                                    <Label htmlFor="audio-input">Microphone</Label>
+                                    <Select defaultValue={MOCK_DATA.devices.audioInputs[0]}>
+                                        <SelectTrigger id="audio-input" className="bg-stone-800 border-stone-700">
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent className="bg-stone-800 border-stone-700 text-stone-100">
+                                            {MOCK_DATA.devices.audioInputs.map(d => <SelectItem key={d} value={d}>{d}</SelectItem>)}
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div className="grid gap-2">
+                                    <Label htmlFor="audio-output">Speakers</Label>
+                                    <Select defaultValue={MOCK_DATA.devices.audioOutputs[0]}>
+                                        <SelectTrigger id="audio-output" className="bg-stone-800 border-stone-700">
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent className="bg-stone-800 border-stone-700 text-stone-100">
+                                            {MOCK_DATA.devices.audioOutputs.map(d => <SelectItem key={d} value={d}>{d}</SelectItem>)}
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div className="grid gap-2">
+                                    <Label htmlFor="video-input">Camera</Label>
+                                    <Select defaultValue={MOCK_DATA.devices.videoInputs[0]}>
+                                        <SelectTrigger id="video-input" className="bg-stone-800 border-stone-700">
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent className="bg-stone-800 border-stone-700 text-stone-100">
+                                            {MOCK_DATA.devices.videoInputs.map(d => <SelectItem key={d} value={d}>{d}</SelectItem>)}
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+                        </DialogContent>
+                    </Dialog>
+                </div>
+            </header>
+
+            {/* Main Grid */}
+            <main className="flex-1 p-4 overflow-hidden">
+                <div className="h-full grid grid-cols-2 gap-4 auto-rows-fr max-w-6xl mx-auto items-center justify-center">
+                    {participants.map(p => (
+                        <ParticipantTile key={p.id} participant={p} />
+                    ))}
+                </div>
+            </main>
+
+            {/* Control Bar */}
+            <footer className="h-20 shrink-0 flex items-center justify-center gap-4 px-6 pb-6 mt-auto">
+                <div className="flex items-center gap-2 p-2 rounded-2xl bg-stone-900 border border-stone-800 shadow-2xl">
+                    <Button
+                        size="icon"
+                        variant={micOn ? "secondary" : "destructive"}
+                        className={`rounded-xl h-12 w-12 ${micOn ? 'bg-stone-800 text-white hover:bg-stone-700' : ''}`}
+                        onClick={() => setMicOn(!micOn)}
+                    >
+                        {micOn ? <Mic /> : <MicOff />}
+                    </Button>
+
+                    <Button
+                        size="icon"
+                        variant={videoOn ? "secondary" : "destructive"}
+                        className={`rounded-xl h-12 w-12 ${videoOn ? 'bg-stone-800 text-white hover:bg-stone-700' : ''}`}
+                        onClick={() => setVideoOn(!videoOn)}
+                    >
+                        {videoOn ? <Video /> : <VideoOff />}
+                    </Button>
+
+                    <div className="w-px h-8 bg-stone-800 mx-2" />
+
+                    <Button size="icon" variant="ghost" className="rounded-xl h-12 w-12 text-stone-400 hover:text-white hover:bg-stone-800">
+                        <Monitor />
+                    </Button>
+                    <Button size="icon" variant="ghost" className="rounded-xl h-12 w-12 text-stone-400 hover:text-white hover:bg-stone-800">
+                        <Users />
+                    </Button>
+                    <Button size="icon" variant="ghost" className="rounded-xl h-12 w-12 text-stone-400 hover:text-white hover:bg-stone-800">
+                        <MessageSquare />
+                    </Button>
+                    <Button size="icon" variant="ghost" className="rounded-xl h-12 w-12 text-stone-400 hover:text-white hover:bg-stone-800">
+                        <MoreVertical />
+                    </Button>
+
+                    <div className="w-px h-8 bg-stone-800 mx-2" />
+
+                    <Button
+                        variant="destructive"
+                        className="rounded-xl h-12 px-6 bg-red-600 hover:bg-red-700"
+                    >
+                        <PhoneOff className="mr-2 h-5 w-5" />
+                        End
+                    </Button>
+                </div>
+            </footer>
+        </div>
+    );
+}