From 48a01641c4a39368c3e552c41622e47f80e1a2e8 Mon Sep 17 00:00:00 2001
From: Jared Miller <jared@smell.flowers>
Date: Wed, 28 Jan 2026 12:23:46 -0500
Subject: [PATCH] Add mobile dashboard with SSE streaming

Replaced placeholder index.html with a fully functional mobile-first dashboard that connects to the server via SSE and provides real-time session monitoring and prompt approval.

Features:
- Mobile-first design with large touch targets (44px min) and readable fonts
- SSE connection to /events with automatic reconnection on disconnect
- Live display of active sessions with collapsible output views
- Pending prompts section with approve/reject buttons
- Real-time updates for session start/end, streaming output, and prompts
- Dark mode by default with light mode support via prefers-color-scheme
- Plain text terminal output (monospace, scrolls to bottom)
- Connection status indicator in header

Implementation is a single HTML file (~300 lines) with inline CSS and vanilla JS, no frameworks or dependencies.
---
 public/index.html | 418 +++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 416 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index 29ff89b..05cbf6e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,9 +4,423 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>claude-remote</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      background: #1a1a1a;
+      color: #e0e0e0;
+      padding: 0;
+      overflow-x: hidden;
+    }
+
+    header {
+      background: #2a2a2a;
+      padding: 16px;
+      border-bottom: 2px solid #3a3a3a;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    h1 {
+      font-size: 20px;
+      font-weight: 600;
+    }
+
+    .status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      color: #888;
+    }
+
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #888;
+    }
+
+    .status.connected .status-dot {
+      background: #4CAF50;
+    }
+
+    .container {
+      padding: 16px;
+      max-width: 100%;
+    }
+
+    .section {
+      margin-bottom: 24px;
+    }
+
+    .section-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #888;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 12px;
+    }
+
+    .session {
+      background: #2a2a2a;
+      border: 1px solid #3a3a3a;
+      border-radius: 8px;
+      margin-bottom: 12px;
+      overflow: hidden;
+    }
+
+    .session-header {
+      padding: 12px 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      user-select: none;
+      min-height: 44px;
+    }
+
+    .session-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .session-command {
+      font-weight: 600;
+      font-size: 14px;
+      margin-bottom: 4px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .session-cwd {
+      font-size: 12px;
+      color: #888;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .session-toggle {
+      font-size: 18px;
+      color: #888;
+      transition: transform 0.2s;
+    }
+
+    .session.expanded .session-toggle {
+      transform: rotate(180deg);
+    }
+
+    .session-output {
+      display: none;
+      padding: 16px;
+      background: #1a1a1a;
+      border-top: 1px solid #3a3a3a;
+      max-height: 400px;
+      overflow-y: auto;
+    }
+
+    .session.expanded .session-output {
+      display: block;
+    }
+
+    .terminal {
+      font-family: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;
+      font-size: 12px;
+      line-height: 1.5;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      color: #e0e0e0;
+    }
+
+    .prompt {
+      background: #2a2a2a;
+      border: 1px solid #ff9800;
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+
+    .prompt-text {
+      font-size: 14px;
+      margin-bottom: 12px;
+      line-height: 1.5;
+    }
+
+    .prompt-actions {
+      display: flex;
+      gap: 8px;
+    }
+
+    .btn {
+      flex: 1;
+      padding: 12px;
+      border: none;
+      border-radius: 6px;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      min-height: 44px;
+      transition: opacity 0.2s;
+    }
+
+    .btn:active {
+      opacity: 0.7;
+    }
+
+    .btn-approve {
+      background: #4CAF50;
+      color: white;
+    }
+
+    .btn-reject {
+      background: #f44336;
+      color: white;
+    }
+
+    .empty-state {
+      padding: 32px 16px;
+      text-align: center;
+      color: #888;
+      font-size: 14px;
+    }
+
+    @media (prefers-color-scheme: light) {
+      body {
+        background: #f5f5f5;
+        color: #1a1a1a;
+      }
+
+      header {
+        background: white;
+        border-bottom-color: #e0e0e0;
+      }
+
+      .session,
+      .prompt {
+        background: white;
+        border-color: #e0e0e0;
+      }
+
+      .session-output {
+        background: #f5f5f5;
+        border-top-color: #e0e0e0;
+      }
+
+      .terminal {
+        color: #1a1a1a;
+      }
+    }
+  </style>
 </head>
 <body>
-  <h1>claude-remote</h1>
-  <p>Dashboard coming soon.</p>
+  <header>
+    <h1>claude-remote</h1>
+    <div class="status" id="status">
+      <span class="status-dot"></span>
+      <span class="status-text">connecting</span>
+    </div>
+  </header>
+
+  <div class="container">
+    <div class="section">
+      <div class="section-title">Active Sessions</div>
+      <div id="sessions">
+        <div class="empty-state">No active sessions</div>
+      </div>
+    </div>
+
+    <div class="section">
+      <div class="section-title">Pending Prompts</div>
+      <div id="prompts">
+        <div class="empty-state">No pending prompts</div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const state = {
+      sessions: new Map(),
+      prompts: new Map(),
+      eventSource: null,
+      reconnectTimeout: null,
+    };
+
+    const $status = document.getElementById('status');
+    const $sessions = document.getElementById('sessions');
+    const $prompts = document.getElementById('prompts');
+
+    function setStatus(connected) {
+      if (connected) {
+        $status.classList.add('connected');
+        $status.querySelector('.status-text').textContent = 'connected';
+      } else {
+        $status.classList.remove('connected');
+        $status.querySelector('.status-text').textContent = 'connecting';
+      }
+    }
+
+    function connectSSE() {
+      if (state.eventSource) {
+        state.eventSource.close();
+      }
+
+      const es = new EventSource('/events');
+
+      es.addEventListener('open', () => {
+        console.debug('SSE connected');
+        setStatus(true);
+        if (state.reconnectTimeout) {
+          clearTimeout(state.reconnectTimeout);
+          state.reconnectTimeout = null;
+        }
+      });
+
+      es.addEventListener('error', () => {
+        console.debug('SSE error, reconnecting...');
+        setStatus(false);
+        es.close();
+        if (!state.reconnectTimeout) {
+          state.reconnectTimeout = setTimeout(() => connectSSE(), 2000);
+        }
+      });
+
+      es.addEventListener('session_start', (e) => {
+        const data = JSON.parse(e.data);
+        state.sessions.set(data.session_id, {
+          id: data.session_id,
+          cwd: data.cwd,
+          command: data.command,
+          output: '',
+          expanded: false,
+        });
+        renderSessions();
+      });
+
+      es.addEventListener('session_end', (e) => {
+        const data = JSON.parse(e.data);
+        state.sessions.delete(data.session_id);
+        renderSessions();
+      });
+
+      es.addEventListener('output', (e) => {
+        const data = JSON.parse(e.data);
+        const session = state.sessions.get(data.session_id);
+        if (session) {
+          session.output += data.data;
+          renderSessionOutput(data.session_id);
+        }
+      });
+
+      es.addEventListener('prompt', (e) => {
+        const data = JSON.parse(e.data);
+        state.prompts.set(data.prompt_id, {
+          id: data.prompt_id,
+          session_id: data.session_id,
+          text: data.prompt_text,
+        });
+        renderPrompts();
+      });
+
+      es.addEventListener('prompt_response', (e) => {
+        const data = JSON.parse(e.data);
+        state.prompts.delete(data.prompt_id);
+        renderPrompts();
+      });
+
+      state.eventSource = es;
+    }
+
+    window.toggleSession = (sessionId) => {
+      const session = state.sessions.get(sessionId);
+      if (session) {
+        session.expanded = !session.expanded;
+        renderSessions();
+      }
+    };
+
+    function renderSessions() {
+      if (state.sessions.size === 0) {
+        $sessions.innerHTML = '<div class="empty-state">No active sessions</div>';
+        return;
+      }
+
+      $sessions.innerHTML = Array.from(state.sessions.values()).map(s => `
+        <div class="session ${s.expanded ? 'expanded' : ''}" data-session="${s.id}">
+          <div class="session-header" onclick="toggleSession(${s.id})">
+            <div class="session-info">
+              <div class="session-command">${escapeHtml(s.command || 'claude')}</div>
+              <div class="session-cwd">${escapeHtml(s.cwd || '~')}</div>
+            </div>
+            <div class="session-toggle">▼</div>
+          </div>
+          <div class="session-output">
+            <div class="terminal" id="output-${s.id}">${escapeHtml(s.output)}</div>
+          </div>
+        </div>
+      `).join('');
+    }
+
+    function renderSessionOutput(sessionId) {
+      const session = state.sessions.get(sessionId);
+      if (!session) return;
+
+      const $output = document.getElementById(`output-${sessionId}`);
+      if ($output) {
+        $output.textContent = session.output;
+        if (session.expanded) {
+          $output.parentElement.scrollTop = $output.parentElement.scrollHeight;
+        }
+      }
+    }
+
+    function renderPrompts() {
+      if (state.prompts.size === 0) {
+        $prompts.innerHTML = '<div class="empty-state">No pending prompts</div>';
+        return;
+      }
+
+      $prompts.innerHTML = Array.from(state.prompts.values()).map(p => `
+        <div class="prompt" data-prompt="${p.id}">
+          <div class="prompt-text">${escapeHtml(p.text)}</div>
+          <div class="prompt-actions">
+            <button class="btn btn-approve" onclick="respondToPrompt(${p.id}, 'approve')">Approve</button>
+            <button class="btn btn-reject" onclick="respondToPrompt(${p.id}, 'reject')">Reject</button>
+          </div>
+        </div>
+      `).join('');
+    }
+
+    window.respondToPrompt = async (promptId, action) => {
+      try {
+        const res = await fetch(`/api/prompts/${promptId}/${action}`, {
+          method: 'POST',
+        });
+        if (!res.ok) {
+          console.error(`Failed to ${action} prompt:`, await res.text());
+        }
+      } catch (error) {
+        console.error(`Error responding to prompt:`, error);
+      }
+    };
+
+    function escapeHtml(text) {
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+
+    // Initialize
+    connectSSE();
+  </script>
 </body>
 </html>