feat: complete Phase 1 - Full Log Viewer implementation

Phase 1 Complete: Log Viewer with Real-time Monitoring
======================================================

Features Added:
- Real-time log viewer with syntax highlighting (ERROR, WARNING, INFO)
- Play/Pause controls for auto-refresh
- Auto-scroll with user scroll detection
- Search and filter functionality with highlighting
- Process selector (all processes + supervisord main log)
- Stdout/Stderr log type switching
- Download logs to file
- Clear logs (process-specific or main log)
- Responsive layout with proper height handling

API Routes Added:
- GET /api/supervisor/logs - Read main supervisord log
- DELETE /api/supervisor/logs - Clear main log
- DELETE /api/supervisor/processes/[name]/logs - Clear process logs
- POST /api/supervisor/processes/logs/clear-all - Clear all logs

Hooks Added:
- useMainLog() - Query main supervisord log with auto-refresh
- useClearMainLog() - Mutation to clear main log
- useClearProcessLogs() - Mutation to clear process logs
- useClearAllLogs() - Mutation to clear all process logs

Components:
- LogViewer - Displays logs with syntax highlighting and search
- LogControls - Control panel with play/pause, auto-scroll, actions
- LogSearch - Search input with clear button
- Full logs page implementation with process/log type selection

UX Improvements:
- Color-coded log levels (red for errors, yellow for warnings, cyan for info)
- Search term highlighting in logs
- Auto-scroll with "Scroll to bottom" button when paused
- Confirmation dialogs for destructive actions
- Loading states and error handling
- Download logs with timestamped filenames

This completes the most requested feature (log viewing) with production-ready
functionality including real-time tailing, search, and management capabilities.

🤖 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/api/supervisor/logs/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createSupervisorClient } from '@/lib/supervisor/client';
+
+export const dynamic = 'force-dynamic';
+
+// GET main supervisord log
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams;
+    const offset = parseInt(searchParams.get('offset') || '-4096', 10);
+    const length = parseInt(searchParams.get('length') || '4096', 10);
+
+    const client = createSupervisorClient();
+    const logs = await client.readLog(offset, length);
+
+    return NextResponse.json({ logs, offset, length });
+  } catch (error: any) {
+    console.error('Supervisor main log error:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch main log' },
+      { status: 500 }
+    );
+  }
+}
+
+// DELETE - Clear main supervisord log
+export async function DELETE() {
+  try {
+    const client = createSupervisorClient();
+    const result = await client.clearLog();
+    return NextResponse.json({ success: result, message: 'Main log cleared' });
+  } catch (error: any) {
+    console.error('Supervisor clear main log error:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to clear main log' },
+      { status: 500 }
+    );
+  }
+}

app/api/supervisor/processes/[name]/logs/route.ts

@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createSupervisorClient } from '@/lib/supervisor/client';
+
+interface RouteParams {
+  params: Promise<{ name: string }>;
+}
+
+// DELETE - Clear process logs (both stdout and stderr)
+export async function DELETE(request: NextRequest, { params }: RouteParams) {
+  try {
+    const { name } = await params;
+    const client = createSupervisorClient();
+    const result = await client.clearProcessLogs(name);
+    return NextResponse.json({ success: result, message: `Logs cleared for ${name}` });
+  } catch (error: any) {
+    console.error('Supervisor clear process logs error:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to clear process logs' },
+      { status: 500 }
+    );
+  }
+}

app/api/supervisor/processes/logs/clear-all/route.ts

@@ -0,0 +1,21 @@
+import { NextResponse } from 'next/server';
+import { createSupervisorClient } from '@/lib/supervisor/client';
+
+// POST - Clear all process logs
+export async function POST() {
+  try {
+    const client = createSupervisorClient();
+    const results = await client.clearAllProcessLogs();
+    return NextResponse.json({
+      success: true,
+      message: 'All process logs cleared',
+      results
+    });
+  } catch (error: any) {
+    console.error('Supervisor clear all logs error:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to clear all logs' },
+      { status: 500 }
+    );
+  }
+}

app/logs/page.tsx

@@ -1,25 +1,177 @@
 'use client';
 
+import { useState } from 'react';
+import { useProcesses, useProcessLogs, useMainLog, useClearProcessLogs, useClearMainLog } from '@/lib/hooks/useSupervisor';
+import { LogViewer } from '@/components/logs/LogViewer';
+import { LogControls } from '@/components/logs/LogControls';
+import { LogSearch } from '@/components/logs/LogSearch';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
 import { AlertCircle } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
 
 export default function LogsPage() {
+  const [selectedProcess, setSelectedProcess] = useState<string | 'main'>('main');
+  const [logType, setLogType] = useState<'stdout' | 'stderr'>('stdout');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isPlaying, setIsPlaying] = useState(true);
+  const [autoScroll, setAutoScroll] = useState(true);
+
+  const { data: processes, isError: processesError } = useProcesses({
+    refetchInterval: isPlaying ? 3000 : undefined,
+  });
+
+  // Fetch logs based on selection
+  const { data: processLogs, isLoading: processLogsLoading, refetch: refetchProcessLogs } = useProcessLogs(
+    selectedProcess as string,
+    logType,
+    {
+      enabled: selectedProcess !== 'main' && isPlaying,
+      refetchInterval: isPlaying ? 2000 : undefined,
+    }
+  );
+
+  const { data: mainLogData, isLoading: mainLogLoading, refetch: refetchMainLog } = useMainLog({
+    enabled: selectedProcess === 'main' && isPlaying,
+    refetchInterval: isPlaying ? 2000 : undefined,
+  });
+
+  const clearProcessLogsMutation = useClearProcessLogs();
+  const clearMainLogMutation = useClearMainLog();
+
+  const currentLogs = selectedProcess === 'main'
+    ? mainLogData?.logs || ''
+    : processLogs?.bytes || '';
+
+  const isLoading = selectedProcess === 'main' ? mainLogLoading : processLogsLoading;
+
+  const handleRefresh = () => {
+    if (selectedProcess === 'main') {
+      refetchMainLog();
+    } else {
+      refetchProcessLogs();
+    }
+  };
+
+  const handleClear = () => {
+    if (!confirm('Are you sure you want to clear these logs?')) return;
+
+    if (selectedProcess === 'main') {
+      clearMainLogMutation.mutate();
+    } else {
+      clearProcessLogsMutation.mutate(selectedProcess);
+    }
+  };
+
+  const handleDownload = () => {
+    const blob = new Blob([currentLogs], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${selectedProcess === 'main' ? 'supervisord' : selectedProcess}-${logType}-${Date.now()}.log`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  if (processesError) {
     return (
       <div className="space-y-6">
-      <div>
         <h1 className="text-3xl font-bold">Process Logs</h1>
-        <p className="text-muted-foreground mt-1">Real-time log viewing</p>
-      </div>
-
-      <Card>
+        <Card className="border-destructive/50">
           <CardContent className="p-12 text-center">
-          <AlertCircle className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-          <h2 className="text-xl font-semibold mb-2">Logs View Coming Soon</h2>
+            <AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
+            <h2 className="text-xl font-semibold mb-2">Failed to load processes</h2>
             <p className="text-muted-foreground">
-            This feature will display real-time logs from your processes with filtering and search capabilities.
+              Could not connect to Supervisor. Please check your configuration.
             </p>
           </CardContent>
         </Card>
       </div>
     );
   }
+
+  return (
+    <div className="space-y-6 h-[calc(100vh-12rem)] flex flex-col">
+      <div className="flex-shrink-0">
+        <h1 className="text-3xl font-bold">Process Logs</h1>
+        <p className="text-muted-foreground mt-1">Real-time log viewing and management</p>
+      </div>
+
+      {/* Controls */}
+      <Card className="flex-shrink-0">
+        <CardHeader className="pb-4">
+          <CardTitle className="text-lg">Log Controls</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Process Selector */}
+          <div className="flex flex-wrap gap-4">
+            <div className="flex-1 min-w-[200px]">
+              <label className="block text-sm font-medium mb-2">Select Process</label>
+              <select
+                value={selectedProcess}
+                onChange={(e) => setSelectedProcess(e.target.value)}
+                className="w-full h-10 rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <option value="main">Supervisord (Main Log)</option>
+                {processes?.map((proc) => (
+                  <option key={`${proc.group}:${proc.name}`} value={`${proc.group}:${proc.name}`}>
+                    {proc.group}:{proc.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Log Type Selector (only for processes, not main) */}
+            {selectedProcess !== 'main' && (
+              <div>
+                <label className="block text-sm font-medium mb-2">Log Type</label>
+                <div className="flex gap-2">
+                  <Button
+                    variant={logType === 'stdout' ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => setLogType('stdout')}
+                  >
+                    Stdout
+                  </Button>
+                  <Button
+                    variant={logType === 'stderr' ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => setLogType('stderr')}
+                  >
+                    Stderr
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Search and Controls */}
+          <div className="flex flex-wrap gap-4 items-end">
+            <LogSearch value={searchTerm} onChange={setSearchTerm} />
+            <LogControls
+              isPlaying={isPlaying}
+              onPlayPause={() => setIsPlaying(!isPlaying)}
+              autoScroll={autoScroll}
+              onToggleAutoScroll={() => setAutoScroll(!autoScroll)}
+              onRefresh={handleRefresh}
+              onClear={handleClear}
+              onDownload={handleDownload}
+              isClearing={clearProcessLogsMutation.isPending || clearMainLogMutation.isPending}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Log Viewer */}
+      <div className="flex-1 min-h-0">
+        <LogViewer
+          logs={currentLogs}
+          isLoading={isLoading}
+          autoScroll={autoScroll}
+          searchTerm={searchTerm}
+        />
+      </div>
+    </div>
+  );
+}

lib/hooks/useSupervisor.ts

@@ -188,3 +188,99 @@ export function useRestartProcess() {
     },
   });
 }
+
+// Log Management
+
+async function fetchMainLog(offset: number = -4096, length: number = 4096): Promise<{ logs: string }> {
+  const response = await fetch(`/api/supervisor/logs?offset=${offset}&length=${length}`);
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to fetch main log');
+  }
+  return response.json();
+}
+
+async function clearMainLog(): Promise<{ success: boolean; message: string }> {
+  const response = await fetch('/api/supervisor/logs', { method: 'DELETE' });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to clear main log');
+  }
+  return response.json();
+}
+
+async function clearProcessLogs(name: string): Promise<{ success: boolean; message: string }> {
+  const response = await fetch(`/api/supervisor/processes/${encodeURIComponent(name)}/logs`, {
+    method: 'DELETE',
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to clear process logs');
+  }
+  return response.json();
+}
+
+async function clearAllLogs(): Promise<{ success: boolean; message: string }> {
+  const response = await fetch('/api/supervisor/processes/logs/clear-all', {
+    method: 'POST',
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to clear all logs');
+  }
+  return response.json();
+}
+
+export function useMainLog(options?: { offset?: number; length?: number; enabled?: boolean; refetchInterval?: number }) {
+  return useQuery({
+    queryKey: [...supervisorKeys.all, 'mainLog', options?.offset, options?.length],
+    queryFn: () => fetchMainLog(options?.offset, options?.length),
+    enabled: options?.enabled ?? true,
+    refetchInterval: options?.refetchInterval ?? 2000,
+  });
+}
+
+export function useClearMainLog() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: clearMainLog,
+    onSuccess: (data) => {
+      toast.success(data.message);
+      queryClient.invalidateQueries({ queryKey: [...supervisorKeys.all, 'mainLog'] });
+    },
+    onError: (error: Error) => {
+      toast.error(`Failed to clear main log: ${error.message}`);
+    },
+  });
+}
+
+export function useClearProcessLogs() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (name: string) => clearProcessLogs(name),
+    onSuccess: (data, name) => {
+      toast.success(data.message);
+      queryClient.invalidateQueries({ queryKey: supervisorKeys.process(name) });
+    },
+    onError: (error: Error) => {
+      toast.error(`Failed to clear process logs: ${error.message}`);
+    },
+  });
+}
+
+export function useClearAllLogs() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: clearAllLogs,
+    onSuccess: (data) => {
+      toast.success(data.message);
+      queryClient.invalidateQueries({ queryKey: supervisorKeys.all });
+    },
+    onError: (error: Error) => {
+      toast.error(`Failed to clear all logs: ${error.message}`);
+    },
+  });
+}