Add OBS scene switching controls with dynamic button states

- Add setScene API endpoint for OBS scene switching (1-Screen, 2-Screen, 4-Screen)
- Add getCurrentScene API endpoint to fetch active OBS scene
- Implement scene switching buttons in main UI with dynamic state tracking
- Buttons change color and text based on current active scene
- Glass morphism styling with Solarized Dark gradients
- Real-time scene state synchronization with optimistic UI updates
- Toast notifications for user feedback

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

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

app/api/getCurrentScene/route.ts

@@ -0,0 +1,30 @@
+import { NextResponse } from 'next/server';
+import { getOBSClient } from '../../../lib/obsClient';
+
+export async function GET() {
+  try {
+    const obsClient = await getOBSClient();
+    
+    // Get the current program scene
+    const response = await obsClient.call('GetCurrentProgramScene');
+    const { currentProgramSceneName } = response;
+    
+    console.log(`Current OBS scene: ${currentProgramSceneName}`);
+    
+    return NextResponse.json({
+      success: true,
+      data: { sceneName: currentProgramSceneName },
+      message: 'Current scene retrieved successfully'
+    });
+  } catch (obsError) {
+    console.error('OBS WebSocket error:', obsError);
+    return NextResponse.json(
+      { 
+        success: false, 
+        error: 'Failed to get current scene from OBS',
+        details: obsError instanceof Error ? obsError.message : 'Unknown error'
+      },
+      { status: 500 }
+    );
+  }
+}

app/api/setScene/route.ts

@@ -0,0 +1,66 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getOBSClient } from '../../../lib/obsClient';
+
+// Valid scene names for this application
+const VALID_SCENES = ['1-Screen', '2-Screen', '4-Screen'] as const;
+type ValidScene = typeof VALID_SCENES[number];
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { sceneName } = body;
+
+    // Validate scene name
+    if (!sceneName || typeof sceneName !== 'string') {
+      return NextResponse.json(
+        { success: false, error: 'Scene name is required' },
+        { status: 400 }
+      );
+    }
+
+    if (!VALID_SCENES.includes(sceneName as ValidScene)) {
+      return NextResponse.json(
+        { 
+          success: false, 
+          error: 'Invalid scene name', 
+          validScenes: VALID_SCENES 
+        },
+        { status: 400 }
+      );
+    }
+
+    try {
+      const obsClient = await getOBSClient();
+      
+      // Switch to the requested scene
+      await obsClient.call('SetCurrentProgramScene', { sceneName });
+      
+      console.log(`Successfully switched to scene: ${sceneName}`);
+      
+      return NextResponse.json({
+        success: true,
+        data: { sceneName },
+        message: `Switched to ${sceneName} layout`
+      });
+    } catch (obsError) {
+      console.error('OBS WebSocket error:', obsError);
+      return NextResponse.json(
+        { 
+          success: false, 
+          error: 'Failed to switch scene in OBS',
+          details: obsError instanceof Error ? obsError.message : 'Unknown error'
+        },
+        { status: 500 }
+      );
+    }
+  } catch (error) {
+    console.error('Error switching scene:', error);
+    return NextResponse.json(
+      { 
+        success: false, 
+        error: 'Invalid request format' 
+      },
+      { status: 400 }
+    );
+  }
+}

app/page.tsx

@@ -5,24 +5,20 @@ import Dropdown from '@/components/Dropdown';
 import { useToast } from '@/lib/useToast';
 import { ToastContainer } from '@/components/Toast';
 import { useActiveSourceLookup, useDebounce, PerformanceMonitor } from '@/lib/performance';
+import { SCREEN_POSITIONS } from '@/lib/constants';
 
 import { StreamWithTeam } from '@/types';
 
-type ScreenType = 'large' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+type ScreenType = typeof SCREEN_POSITIONS[number];
 
 export default function Home() {
   const [streams, setStreams] = useState<StreamWithTeam[]>([]);
-  const [activeSources, setActiveSources] = useState<Record<ScreenType, string | null>>({
-    large: null,
-    left: null,
-    right: null,
-    topLeft: null,
-    topRight: null,
-    bottomLeft: null,
-    bottomRight: null,
-  });
+  const [activeSources, setActiveSources] = useState<Record<ScreenType, string | null>>(
+    Object.fromEntries(SCREEN_POSITIONS.map(screen => [screen, null])) as Record<ScreenType, string | null>
+  );
   const [isLoading, setIsLoading] = useState(true);
   const [openDropdown, setOpenDropdown] = useState<string | null>(null);
+  const [currentScene, setCurrentScene] = useState<string | null>(null);
   const { toasts, removeToast, showSuccess, showError } = useToast();
 
   // Memoized active source lookup for performance
@@ -63,22 +59,27 @@ export default function Home() {
   const fetchData = useCallback(async () => {
     const endTimer = PerformanceMonitor.startTimer('fetchData');
     try {
-      // Fetch streams and active sources in parallel
-      const [streamsRes, activeRes] = await Promise.all([
+      // Fetch streams, active sources, and current scene in parallel
+      const [streamsRes, activeRes, sceneRes] = await Promise.all([
         fetch('/api/streams'),
-        fetch('/api/getActive')
+        fetch('/api/getActive'),
+        fetch('/api/getCurrentScene')
       ]);
       
-      const [streamsData, activeData] = await Promise.all([
+      const [streamsData, activeData, sceneData] = await Promise.all([
         streamsRes.json(),
-        activeRes.json()
+        activeRes.json(),
+        sceneRes.json()
       ]);
       
       // Handle both old and new API response formats
       const streams = streamsData.success ? streamsData.data : streamsData;
       const activeSources = activeData.success ? activeData.data : activeData;
+      const sceneName = sceneData.success ? sceneData.data.sceneName : null;
+      
       setStreams(streams);
       setActiveSources(activeSources);
+      setCurrentScene(sceneName);
     } catch (error) {
       console.error('Error fetching data:', error);
       showError('Failed to Load Data', 'Could not fetch streams. Please refresh the page.');
@@ -114,14 +115,48 @@ export default function Home() {
     setOpenDropdown((prev) => (prev === screen ? null : screen));
   }, []);
 
+  const handleSceneSwitch = useCallback(async (sceneName: string) => {
+    try {
+      const response = await fetch('/api/setScene', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sceneName }),
+      });
+
+      const result = await response.json();
+
+      if (result.success) {
+        // Update local state immediately for responsive UI
+        setCurrentScene(sceneName);
+        showSuccess('Scene Changed', `Switched to ${sceneName} layout`);
+      } else {
+        throw new Error(result.error || 'Failed to switch scene');
+      }
+    } catch (error) {
+      console.error('Error switching scene:', error);
+      showError('Scene Switch Failed', error instanceof Error ? error.message : 'Could not switch scene. Please try again.');
+    }
+  }, [showSuccess, showError]);
+
   // Memoized corner displays to prevent re-renders
   const cornerDisplays = useMemo(() => [
-    { screen: 'topLeft' as const, label: 'Top Left' },
-    { screen: 'topRight' as const, label: 'Top Right' },
-    { screen: 'bottomLeft' as const, label: 'Bottom Left' },
-    { screen: 'bottomRight' as const, label: 'Bottom Right' },
+    { screen: 'top_left' as const, label: 'Top Left' },
+    { screen: 'top_right' as const, label: 'Top Right' },
+    { screen: 'bottom_left' as const, label: 'Bottom Left' },
+    { screen: 'bottom_right' as const, label: 'Bottom Right' },
   ], []);
 
+  // Transform and sort streams for dropdown display
+  const dropdownStreams = useMemo(() => {
+    return streams
+      .map(stream => ({
+        id: stream.id,
+        name: `${stream.team_name} - ${stream.name}`,
+        originalStream: stream
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }, [streams]);
+
   if (isLoading) {
     return (
       <div className="container section">
@@ -145,10 +180,23 @@ export default function Home() {
 
       {/* Main Screen */}
       <div className="glass p-6 mb-6">
-        <h2 className="card-title">Primary Display</h2>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="card-title mb-0">Primary Display</h2>
+          <button
+            onClick={() => handleSceneSwitch('1-Screen')}
+            className={`btn ${currentScene === '1-Screen' ? 'active' : ''}`}
+            style={{
+              background: currentScene === '1-Screen' 
+                ? 'linear-gradient(135deg, var(--solarized-green), var(--solarized-yellow))'
+                : 'linear-gradient(135deg, var(--solarized-blue), var(--solarized-cyan))'
+            }}
+          >
+            {currentScene === '1-Screen' ? 'Active: 1-Screen' : 'Switch to 1-Screen'}
+          </button>
+        </div>
         <div className="max-w-md mx-auto">
           <Dropdown
-            options={streams}
+            options={dropdownStreams}
             activeId={activeSourceIds.large}
             onSelect={(id) => handleSetActive('large', id)}
             label="Select Primary Stream..."
@@ -160,12 +208,25 @@ export default function Home() {
 
       {/* Side Displays */}
       <div className="glass p-6 mb-6">
-        <h2 className="card-title">Side Displays</h2>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="card-title mb-0">Side Displays</h2>
+          <button
+            onClick={() => handleSceneSwitch('2-Screen')}
+            className={`btn ${currentScene === '2-Screen' ? 'active' : ''}`}
+            style={{
+              background: currentScene === '2-Screen' 
+                ? 'linear-gradient(135deg, var(--solarized-green), var(--solarized-yellow))'
+                : 'linear-gradient(135deg, var(--solarized-blue), var(--solarized-cyan))'
+            }}
+          >
+            {currentScene === '2-Screen' ? 'Active: 2-Screen' : 'Switch to 2-Screen'}
+          </button>
+        </div>
         <div className="grid-2">
           <div>
             <h3 className="text-lg font-semibold mb-4 text-center">Left Display</h3>
             <Dropdown
-              options={streams}
+              options={dropdownStreams}
               activeId={activeSourceIds.left}
               onSelect={(id) => handleSetActive('left', id)}
               label="Select Left Stream..."
@@ -176,7 +237,7 @@ export default function Home() {
           <div>
             <h3 className="text-lg font-semibold mb-4 text-center">Right Display</h3>
             <Dropdown
-              options={streams}
+              options={dropdownStreams}
               activeId={activeSourceIds.right}
               onSelect={(id) => handleSetActive('right', id)}
               label="Select Right Stream..."
@@ -189,13 +250,26 @@ export default function Home() {
 
       {/* Corner Displays */}
       <div className="glass p-6">
-        <h2 className="card-title">Corner Displays</h2>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="card-title mb-0">Corner Displays</h2>
+          <button
+            onClick={() => handleSceneSwitch('4-Screen')}
+            className={`btn ${currentScene === '4-Screen' ? 'active' : ''}`}
+            style={{
+              background: currentScene === '4-Screen' 
+                ? 'linear-gradient(135deg, var(--solarized-green), var(--solarized-yellow))'
+                : 'linear-gradient(135deg, var(--solarized-blue), var(--solarized-cyan))'
+            }}
+          >
+            {currentScene === '4-Screen' ? 'Active: 4-Screen' : 'Switch to 4-Screen'}
+          </button>
+        </div>
         <div className="grid-4">
           {cornerDisplays.map(({ screen, label }) => (
             <div key={screen}>
               <h3 className="text-md font-semibold mb-3 text-center">{label}</h3>
               <Dropdown
-                options={streams}
+                options={dropdownStreams}
                 activeId={activeSourceIds[screen]}
                 onSelect={(id) => handleSetActive(screen, id)}
                 label="Select Stream..."