Add studio mode status display and preview/program indicators

- Enhanced obsStatus API to include studio mode and preview scene information
- Updated Footer component to show studio mode status (STUDIO/DIRECT)
- Added preview scene display in footer when studio mode is enabled
- Implemented dynamic scene button states showing Program/Preview/Both status
- Scene buttons now clearly indicate preview vs program with distinct colors
- Added proper state management for studio mode and preview scenes

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

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

components/Footer.tsx

@@ -13,9 +13,11 @@ type OBSStatus = {
     obsWebSocketVersion: string;
   };
   currentScene?: string;
+  currentPreviewScene?: string;
   sceneCount?: number;
   streaming?: boolean;
   recording?: boolean;
+  studioModeEnabled?: boolean;
   error?: string;
 };
 
@@ -96,7 +98,7 @@ export default function Footer() {
                 <div>{obsStatus.host}:{obsStatus.port}</div>
                 {obsStatus.hasPassword && <div>🔒 Authenticated</div>}
                 
-                {/* Streaming/Recording Status */}
+                {/* Streaming/Recording/Studio Mode Status */}
                 {obsStatus.connected && (
                   <div className="flex gap-4 mt-4">
                     <div className={`flex items-center gap-2 ${obsStatus.streaming ? 'text-red-400' : 'opacity-60'}`}>
@@ -108,6 +110,11 @@ export default function Footer() {
                       <div className={`status-dot ${obsStatus.recording ? 'streaming' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
                       <span className="text-sm">{obsStatus.recording ? 'REC' : 'IDLE'}</span>
                     </div>
+                    
+                    <div className={`flex items-center gap-2 ${obsStatus.studioModeEnabled ? 'text-yellow-400' : 'opacity-60'}`}>
+                      <div className={`status-dot ${obsStatus.studioModeEnabled ? 'connected' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
+                      <span className="text-sm">{obsStatus.studioModeEnabled ? 'STUDIO' : 'DIRECT'}</span>
+                    </div>
                   </div>
                 )}
               </div>
@@ -138,11 +145,18 @@ export default function Footer() {
               <div className="space-y-2 text-sm">
                 {obsStatus.currentScene && (
                   <div className="flex justify-between">
-                    <span>Scene:</span>
+                    <span>{obsStatus.studioModeEnabled ? 'Program:' : 'Scene:'}</span>
                     <span className="font-medium">{obsStatus.currentScene}</span>
                   </div>
                 )}
                 
+                {obsStatus.studioModeEnabled && obsStatus.currentPreviewScene && (
+                  <div className="flex justify-between">
+                    <span>Preview:</span>
+                    <span className="font-medium text-yellow-400">{obsStatus.currentPreviewScene}</span>
+                  </div>
+                )}
+                
                 {obsStatus.sceneCount !== null && (
                   <div className="flex justify-between">
                     <span>Total Scenes:</span>