Update UI to match consistent layout patterns between pages

- Refactor Add Stream page to match Teams page layout with glass panels
- Rename "Add Stream" to "Streams" in navigation and page title
- Add existing streams display with loading states and empty state
- Implement unified design system with modern glass morphism styling
- Add Header and Footer components with OBS status monitoring
- Update global CSS with comprehensive component styling
- Consolidate client components into main page files
- Add real-time OBS connection status with 30-second polling

🤖 Generated with [Claude Code](https://claude.ai/code)

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

app/api/obsStatus/route.ts

@@ -0,0 +1,82 @@
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  try {
+    const OBS_HOST = process.env.OBS_WEBSOCKET_HOST || '127.0.0.1';
+    const OBS_PORT = process.env.OBS_WEBSOCKET_PORT || '4455';
+    const OBS_PASSWORD = process.env.OBS_WEBSOCKET_PASSWORD || '';
+    
+    // Use the persistent connection from obsClient
+    const { getOBSClient, getConnectionStatus } = require('@/lib/obsClient');
+    
+    const connectionStatus: {
+      host: string;
+      port: string;
+      hasPassword: boolean;
+      connected: boolean;
+      version?: {
+        obsVersion: string;
+        obsWebSocketVersion: string;
+      };
+      currentScene?: string;
+      sceneCount?: number;
+      streaming?: boolean;
+      recording?: boolean;
+      error?: string;
+    } = {
+      host: OBS_HOST,
+      port: OBS_PORT,
+      hasPassword: !!OBS_PASSWORD,
+      connected: false
+    };
+
+    try {
+      // Check current connection status first
+      const currentStatus = getConnectionStatus();
+      
+      let obs;
+      if (currentStatus.connected) {
+        // Use existing connection
+        obs = currentStatus.client;
+      } else {
+        // Try to establish connection
+        obs = await getOBSClient();
+      }
+
+      // Get version info
+      const versionInfo = await obs.call('GetVersion');
+      
+      // Get current scene info
+      const currentSceneInfo = await obs.call('GetCurrentProgramScene');
+      
+      // Get scene list
+      const sceneList = await obs.call('GetSceneList');
+      
+      // Get streaming status
+      const streamStatus = await obs.call('GetStreamStatus');
+      
+      // Get recording status
+      const recordStatus = await obs.call('GetRecordStatus');
+      
+      connectionStatus.connected = true;
+      connectionStatus.version = {
+        obsVersion: versionInfo.obsVersion,
+        obsWebSocketVersion: versionInfo.obsWebSocketVersion
+      };
+      connectionStatus.currentScene = currentSceneInfo.sceneName;
+      connectionStatus.sceneCount = sceneList.scenes.length;
+      connectionStatus.streaming = streamStatus.outputActive;
+      connectionStatus.recording = recordStatus.outputActive;
+      
+    } catch (err) {
+      connectionStatus.error = err instanceof Error ? err.message : 'Unknown error occurred';
+    }
+
+    return NextResponse.json(connectionStatus);
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to check OBS status', details: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}

app/api/streams/[id]/route.ts

@@ -0,0 +1,125 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getDatabase } from '../../../../lib/database';
+import { TABLE_NAMES } from '../../../../lib/constants';
+
+// GET single stream
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const resolvedParams = await params;
+    const db = await getDatabase();
+    const stream = await db.get(
+      `SELECT * FROM ${TABLE_NAMES.STREAMS} WHERE id = ?`,
+      [resolvedParams.id]
+    );
+    
+    if (!stream) {
+      return NextResponse.json(
+        { error: 'Stream not found' },
+        { status: 404 }
+      );
+    }
+    
+    return NextResponse.json(stream);
+  } catch (error) {
+    console.error('Error fetching stream:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch stream' },
+      { status: 500 }
+    );
+  }
+}
+
+// PUT update stream
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const resolvedParams = await params;
+    const { name, obs_source_name, url, team_id } = await request.json();
+    
+    if (!name || !obs_source_name || !url) {
+      return NextResponse.json(
+        { error: 'Name, OBS source name, and URL are required' },
+        { status: 400 }
+      );
+    }
+
+    const db = await getDatabase();
+    
+    // Check if stream exists
+    const existingStream = await db.get(
+      `SELECT * FROM ${TABLE_NAMES.STREAMS} WHERE id = ?`,
+      [resolvedParams.id]
+    );
+    
+    if (!existingStream) {
+      return NextResponse.json(
+        { error: 'Stream not found' },
+        { status: 404 }
+      );
+    }
+    
+    // Update stream
+    await db.run(
+      `UPDATE ${TABLE_NAMES.STREAMS} 
+       SET name = ?, obs_source_name = ?, url = ?, team_id = ?
+       WHERE id = ?`,
+      [name, obs_source_name, url, team_id, resolvedParams.id]
+    );
+    
+    return NextResponse.json({ 
+      message: 'Stream updated successfully',
+      id: resolvedParams.id 
+    });
+  } catch (error) {
+    console.error('Error updating stream:', error);
+    return NextResponse.json(
+      { error: 'Failed to update stream' },
+      { status: 500 }
+    );
+  }
+}
+
+// DELETE stream
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const resolvedParams = await params;
+    const db = await getDatabase();
+    
+    // Check if stream exists
+    const existingStream = await db.get(
+      `SELECT * FROM ${TABLE_NAMES.STREAMS} WHERE id = ?`,
+      [resolvedParams.id]
+    );
+    
+    if (!existingStream) {
+      return NextResponse.json(
+        { error: 'Stream not found' },
+        { status: 404 }
+      );
+    }
+    
+    // Delete stream
+    await db.run(
+      `DELETE FROM ${TABLE_NAMES.STREAMS} WHERE id = ?`,
+      [resolvedParams.id]
+    );
+    
+    return NextResponse.json({ 
+      message: 'Stream deleted successfully' 
+    });
+  } catch (error) {
+    console.error('Error deleting stream:', error);
+    return NextResponse.json(
+      { error: 'Failed to delete stream' },
+      { status: 500 }
+    );
+  }
+}