From 10cb94588d890c2ff2e293ee457f5ad9be4e58e1 Mon Sep 17 00:00:00 2001
From: Corey Johnson <probablycorey@gmail.com>
Date: Thu, 22 Jan 2026 00:49:21 +0000
Subject: [PATCH] Add live log streaming via SSE

- Add /logs/stream SSE endpoint that spawns journalctl -f
- Stream new log lines to client in real-time
- Auto-scroll to bottom unless user has scrolled up
- Clean up process when client disconnects

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/services/server/components/LogsPage.tsx | 32 ++++++++++++++++++++-
 src/services/server/server.tsx              | 31 ++++++++++++++++++++
 2 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/src/services/server/components/LogsPage.tsx b/src/services/server/components/LogsPage.tsx
index aeb2165..df597c1 100644
--- a/src/services/server/components/LogsPage.tsx
+++ b/src/services/server/components/LogsPage.tsx
@@ -33,8 +33,38 @@ export const LogsPage = ({ service, logs }: LogsPageProps) => (
       </a>
     </div>
 
-    <pre style="margin-top: 1rem;">
+    <pre id="logs" style="margin-top: 1rem; max-height: 70vh; overflow-y: auto;">
       <code>{logs.trim()}</code>
     </pre>
+
+    <script dangerouslySetInnerHTML={{ __html: `
+      (function() {
+        const logsEl = document.getElementById('logs');
+        const codeEl = logsEl.querySelector('code');
+        let userScrolledUp = false;
+
+        logsEl.addEventListener('scroll', () => {
+          const atBottom = logsEl.scrollTop + logsEl.clientHeight >= logsEl.scrollHeight - 50;
+          userScrolledUp = !atBottom;
+        });
+
+        // Scroll to bottom initially
+        logsEl.scrollTop = logsEl.scrollHeight;
+
+        const service = new URLSearchParams(location.search).get('service') || 'phone-ap';
+        const es = new EventSource('/logs/stream?service=' + encodeURIComponent(service));
+
+        es.onmessage = (e) => {
+          codeEl.textContent += '\\n' + e.data;
+          if (!userScrolledUp) {
+            logsEl.scrollTop = logsEl.scrollHeight;
+          }
+        };
+
+        es.onerror = () => {
+          console.error('SSE connection lost, reconnecting...');
+        };
+      })();
+    `}} />
   </Layout>
 );
diff --git a/src/services/server/server.tsx b/src/services/server/server.tsx
index 0fad238..b4fc13b 100644
--- a/src/services/server/server.tsx
+++ b/src/services/server/server.tsx
@@ -1,4 +1,5 @@
 import { Hono } from "hono"
+import { streamSSE } from "hono/streaming"
 import { join } from "node:path"
 import { $ } from "bun"
 import { IndexPage } from "./components/IndexPage"
@@ -55,6 +56,36 @@ app.get("/logs", async (c) => {
   }
 })
 
+// SSE endpoint for live log streaming
+app.get("/logs/stream", async (c) => {
+  const service = c.req.query("service") || "phone"
+  const validServices = ["phone-ap", "phone-web", "phone"]
+  const selectedService = validServices.includes(service) ? service : "phone"
+
+  return streamSSE(c, async (stream) => {
+    const proc = Bun.spawn(
+      ["journalctl", "-u", `${selectedService}.service`, "-f", "-n", "0", "--no-pager", "--no-hostname"],
+      { stdout: "pipe" }
+    )
+
+    const reader = proc.stdout.getReader()
+    const decoder = new TextDecoder()
+
+    try {
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+        const text = decoder.decode(value)
+        for (const line of text.split("\n").filter(Boolean)) {
+          await stream.writeSSE({ data: line })
+        }
+      }
+    } finally {
+      proc.kill()
+    }
+  })
+})
+
 // Handle WiFi configuration submission
 app.post("/save", async (c) => {
   const formData = await c.req.parseBody()