wip

apps/companion/renderer/components/BrowserModeToggle.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+
+export function BrowserModeToggle() {
+  const [mode, setMode] = useState<'headed' | 'headless'>('headed');
+  const [isDevelopment, setIsDevelopment] = useState(false);
+
+  useEffect(() => {
+    window.electronAPI.getBrowserMode().then(({ mode, isDevelopment }) => {
+      setMode(mode);
+      setIsDevelopment(isDevelopment);
+    });
+  }, []);
+
+  if (!isDevelopment) return null;
+
+  const handleToggle = async () => {
+    const newMode = mode === 'headed' ? 'headless' : 'headed';
+    const result = await window.electronAPI.setBrowserMode(newMode);
+    if (result.success) {
+      setMode(newMode);
+    }
+  };
+
+  return (
+    <div style={{ padding: '10px', borderTop: '1px solid #333' }}>
+      <label style={{ color: '#aaa', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <input
+          type="checkbox"
+          checked={mode === 'headless'}
+          onChange={handleToggle}
+          style={{ cursor: 'pointer' }}
+        />
+        Headless Browser Mode
+      </label>
+      <div style={{ fontSize: '0.85rem', color: '#666', marginTop: '4px', marginLeft: '24px' }}>
+        {mode === 'headless' ? 'Browser runs in background' : 'Browser window visible'}
+      </div>
+    </div>
+  );
+}