feat: implement real-time container log streaming via SSE

frontend/src/components/EditorLayout.tsx

@@ -13,7 +13,7 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 import { Tabs, TabsList, TabsTrigger } from './ui/tabs';
 import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
 import { Badge } from './ui/badge';
-import { Plus, Trash2, Play, Square, Save, Terminal, RotateCw, CloudDownload, Pencil, X, Home, LogOut, ExternalLink, Bell, Settings, MoreVertical, BellRing, Rocket, HardDrive } from 'lucide-react';
+import { Plus, Trash2, Play, Square, Save, Terminal, RotateCw, CloudDownload, Pencil, X, Home, LogOut, ExternalLink, Bell, Settings, MoreVertical, BellRing, Rocket, HardDrive, ScrollText } from 'lucide-react';
 import { useAuth } from '@/context/AuthContext';
 import { apiFetch } from '@/lib/api';
 import { toast } from 'sonner';
@@ -29,6 +29,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { SettingsModal } from './SettingsModal';
 import { StackAlertSheet } from './StackAlertSheet';
 import { AppStoreView } from './AppStoreView';
+import { LogViewer } from './LogViewer';
 
 interface ContainerInfo {
   Id: string;
@@ -87,6 +88,10 @@ export default function EditorLayout() {
   const [bashModalOpen, setBashModalOpen] = useState(false);
   const [selectedContainer, setSelectedContainer] = useState<{ id: string; name: string } | null>(null);
 
+  // LogViewer state
+  const [logViewerOpen, setLogViewerOpen] = useState(false);
+  const [logContainer, setLogContainer] = useState<{ id: string; name: string } | null>(null);
+
 
   // Notifications & Settings state
   const [notifications, setNotifications] = useState<any[]>([]);
@@ -569,6 +574,16 @@ export default function EditorLayout() {
     setSelectedContainer(null);
   };
 
+  const openLogViewer = (containerId: string, containerName: string) => {
+    setLogContainer({ id: containerId, name: containerName });
+    setLogViewerOpen(true);
+  };
+
+  const closeLogViewer = () => {
+    setLogViewerOpen(false);
+    setLogContainer(null);
+  };
+
   // Safe container list with fallback
   const safeContainers = containers || [];
   // Safe content strings with fallback
@@ -986,6 +1001,22 @@ export default function EditorLayout() {
                                         </Tooltip>
                                       </TooltipProvider>
                                     )}
+                                    <TooltipProvider>
+                                      <Tooltip>
+                                        <TooltipTrigger asChild>
+                                          <Button
+                                            size="icon"
+                                            variant="ghost"
+                                            className="rounded-lg h-8 w-8"
+                                            onClick={() => openLogViewer(container?.Id, container?.Names?.[0]?.replace('/', '') || 'container')}
+                                            disabled={container?.State !== 'running'}
+                                          >
+                                            <ScrollText className="w-4 h-4" />
+                                          </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>View Live Logs</TooltipContent>
+                                      </Tooltip>
+                                    </TooltipProvider>
                                     <TooltipProvider>
                                       <Tooltip>
                                         <TooltipTrigger asChild>
@@ -1147,6 +1178,16 @@ export default function EditorLayout() {
         />
       )}
 
+      {/* LogViewer Modal */}
+      {logContainer && (
+        <LogViewer
+          isOpen={logViewerOpen}
+          onClose={closeLogViewer}
+          containerId={logContainer.id}
+          containerName={logContainer.name}
+        />
+      )}
+
 
       {/* Settings Modal */}
       <SettingsModal

frontend/src/components/LogViewer.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState, useRef } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Loader2, Terminal } from "lucide-react";
+
+interface LogViewerProps {
+    containerId: string | null;
+    containerName: string;
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export function LogViewer({ containerId, containerName, isOpen, onClose }: LogViewerProps) {
+    const [logs, setLogs] = useState<string[]>([]);
+    const [isConnected, setIsConnected] = useState(false);
+    const scrollRef = useRef<HTMLDivElement>(null);
+
+    // Auto-scroll to bottom when new logs arrive
+    useEffect(() => {
+        if (scrollRef.current) {
+            scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+        }
+    }, [logs]);
+
+    useEffect(() => {
+        if (!isOpen || !containerId) return;
+
+        setLogs([]);
+        setIsConnected(false);
+
+        const eventSource = new EventSource(`/api/containers/${containerId}/logs`);
+
+        eventSource.onopen = () => setIsConnected(true);
+
+        eventSource.onmessage = (event) => {
+            try {
+                const newLog = JSON.parse(event.data);
+                setLogs(prev => {
+                    const updated = [...prev, newLog];
+                    return updated.length > 1000 ? updated.slice(updated.length - 1000) : updated;
+                });
+            } catch (err) {
+                console.error("Failed to parse log line", err);
+            }
+        };
+
+        eventSource.onerror = () => {
+            setIsConnected(false);
+            eventSource.close();
+        };
+
+        return () => {
+            eventSource.close();
+        };
+    }, [isOpen, containerId]);
+
+    return (
+        <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+            <DialogContent className="max-w-4xl h-[80vh] flex flex-col bg-background border-border">
+                <DialogHeader className="flex flex-row items-center gap-2 pb-2 border-b">
+                    <Terminal className="w-5 h-5" />
+                    <DialogTitle className="flex-1 text-left font-mono text-sm">
+                        {containerName} {isConnected ? <span className="text-green-500 text-xs ml-2">(connected)</span> : <Loader2 className="inline w-3 h-3 ml-2 animate-spin" />}
+                    </DialogTitle>
+                </DialogHeader>
+
+                <div
+                    ref={scrollRef}
+                    className="flex-1 w-full bg-[#0c0c0c] text-green-400 p-4 rounded-md overflow-y-auto font-mono text-xs mt-2"
+                >
+                    {logs.length === 0 && !isConnected ? (
+                        <div className="text-muted-foreground">Connecting to container stream...</div>
+                    ) : (
+                        logs.map((log, i) => (
+                            <div key={i} className="break-all whitespace-pre-wrap leading-tight mb-1">
+                                {log}
+                            </div>
+                        ))
+                    )}
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}