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/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 }
+    );
+  }
+}