Add CSS variables and settings infrastructure for UI polish

public/index.html

@@ -5,6 +5,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>claude-remote</title>
   <style>
+    :root {
+      --columns: 1;
+      --font-size: 12px;
+      --terminal-height: 400px;
+      --wrap-mode: pre-wrap;
+    }
+
     * {
       margin: 0;
       padding: 0;
@@ -57,6 +64,12 @@
       max-width: 100%;
     }
 
+    #sessions {
+      display: grid;
+      grid-template-columns: repeat(var(--columns), 1fr);
+      gap: 12px;
+    }
+
     .section {
       margin-bottom: 24px;
     }
@@ -179,7 +192,7 @@
       padding: 16px;
       background: #1a1a1a;
       border-top: 1px solid #3a3a3a;
-      max-height: 400px;
+      max-height: var(--terminal-height);
       overflow-y: auto;
     }
 
@@ -189,9 +202,9 @@
 
     .terminal {
       font-family: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;
-      font-size: 12px;
+      font-size: var(--font-size);
       line-height: 1.5;
-      white-space: pre-wrap;
+      white-space: var(--wrap-mode);
       word-wrap: break-word;
       color: #e0e0e0;
     }
@@ -451,7 +464,7 @@
       padding: 8px 12px;
       background: #1e1e1e;
       border-bottom: 1px solid #333;
-      font-size: 12px;
+      font-size: var(--font-size);
       color: #888;
     }
 
@@ -460,6 +473,7 @@
       gap: 12px;
       flex-wrap: wrap;
       margin-bottom: 4px;
+      font-size: var(--font-size);
     }
 
     .stats-line:last-child {
@@ -696,6 +710,14 @@
       eventSource: null,
       reconnectTimeout: null,
       instructionsModalPromptId: null,
+      settings: {
+        columns: 1,           // 1, 2, 3, or 'fit'
+        fontSize: 12,         // px value
+        terminalHeight: 400,  // px value
+        wrapText: true,       // true = pre-wrap, false = pre (horizontal scroll)
+        focusSessionId: null, // session ID for filtering, null = show all
+        autoScroll: true,     // true = auto-scroll to bottom on new output
+      },
     };
 
     const $status = document.getElementById('status');
@@ -1464,7 +1486,51 @@
       return div.innerHTML;
     }
 
+    function loadSettings() {
+      try {
+        const saved = localStorage.getItem('claude-remote-prefs');
+        if (saved) {
+          const parsed = JSON.parse(saved);
+          state.settings = { ...state.settings, ...parsed };
+        }
+      } catch (e) {
+        console.error('Failed to load settings:', e);
+      }
+    }
+
+    function saveSettings() {
+      try {
+        localStorage.setItem('claude-remote-prefs', JSON.stringify(state.settings));
+      } catch (e) {
+        console.error('Failed to save settings:', e);
+      }
+    }
+
+    function applySettings() {
+      const root = document.documentElement;
+
+      // Apply columns
+      if (state.settings.columns === 'fit') {
+        root.style.setProperty('--columns', 'auto-fit');
+        $sessions.style.gridTemplateColumns = 'repeat(auto-fit, minmax(400px, 1fr))';
+      } else {
+        root.style.setProperty('--columns', state.settings.columns);
+        $sessions.style.gridTemplateColumns = `repeat(${state.settings.columns}, 1fr)`;
+      }
+
+      // Apply font size
+      root.style.setProperty('--font-size', `${state.settings.fontSize}px`);
+
+      // Apply terminal height
+      root.style.setProperty('--terminal-height', `${state.settings.terminalHeight}px`);
+
+      // Apply wrap mode
+      root.style.setProperty('--wrap-mode', state.settings.wrapText ? 'pre-wrap' : 'pre');
+    }
+
     // Initialize
+    loadSettings();
+    applySettings();
     connectSSE();
   </script>
 </body>