claude-relay 2.1.2 → 2.2.0

package/README.md

@@ -6,13 +6,14 @@
 
 <h3 align="center">Web UI for Claude Code. Any device. Push notifications.</h3>
 
+[![npm version](https://img.shields.io/npm/v/claude-relay)](https://www.npmjs.com/package/claude-relay) [![npm downloads](https://img.shields.io/npm/dw/claude-relay)](https://www.npmjs.com/package/claude-relay) [![GitHub stars](https://img.shields.io/github/stars/chadbyte/claude-relay)](https://github.com/chadbyte/claude-relay)
+
 Claude Code. Anywhere.  
 Same session. Same files. Same machine.  
 Your files stay on your computer. Nothing leaves for the cloud.
 
 Pick up the same Claude Code session on your phone.  
-Start in the terminal, continue on your phone, switch back anytime.  
-Same session, same files, now in your pocket.
+Start in the terminal, continue on your phone, switch back anytime.
 
 Claude Code is automating more of your editing and execution workflow.
 But when it needs approval or asks a question, it halts in the terminal. If you walk away, it just sits there waiting.
@@ -45,6 +46,10 @@ It works in browser tabs too. When input is awaited, the favicon blinks and the
 
 ## Side by Side Workflow
 
+<p align="center">
+  <img src="media/split.gif" alt="split-screen workflow" width="700">
+</p>
+
 Keep claude-relay on one side and your localhost on the other.
 Watch the results update live while Claude Code fixes your source files.
 
@@ -82,8 +87,10 @@ Scan the QR code with your phone to connect instantly, or open the URL displayed
 
 * **Push Approvals** - Approve or reject from your phone while away, so Claude Code does not get stuck waiting.
 * **Multi Project Daemon** - Manage all projects via a single port.
+* **Usage and Model Switching** - View token usage, rate limit bars, and switch models from the browser.
+* **Session Search** - Full-text search across all session messages with hit timeline.
 * **Auto Session Logs (JSONL)** - Conversations and execution history are always saved locally. No data loss on crashes or restarts. Location: `./.claude-relay/sessions/`
-* **File Browser and Terminal** - Inspect files and execute commands directly from the browser.
+* **File Browser and Terminal** - Inspect files, execute commands, and manage multiple terminal tabs from the browser.
 
 > Note: Session logs may contain prompts, outputs, and commands. Do not share this folder.
 
@@ -102,22 +109,30 @@ Scan the QR code with your phone to connect instantly, or open the URL displayed
 * **Project Names** - Custom names make it easy to distinguish tabs.
 * **Session Persistence** - Sessions survive server restarts, browser crashes, and network drops.
 * **Session Handoff** - Start in the terminal, continue on your phone, pass back to desktop.
+* **Session Search** - Full-text search across all session content with highlighted results and a rewind-style hit timeline.
 * **Rewind (Native Claude Code)** - Accessible directly from the browser UI.
+* **Draft Persistence** - Unsent messages are saved per session and restored when you switch back.
 
 **Rendering and Tools**
 
 * **Mermaid and Markdown** - Proper rendering for diagrams, tables, and code blocks.
 * **Syntax Highlighting** - Support for over 180 languages with copy buttons on every block.
-* **File Browser** - Sidebar navigation with file previews and markdown rendering.
-* **Built in Terminal** - Full shell access within the browser.
+* **File Browser** - Sidebar navigation with file previews, markdown rendering, and live-reload on external changes.
+* **Built in Terminal** - Multi-tab terminal sessions with rename, reorder, and a mobile special-key toolbar.
 * **Slash Commands** - Execute standard Claude Code commands from the browser, with autocomplete.
+* **Usage Panel** - View token counts and rate limit progress bars via `/usage` command or header button.
+* **Model Switching** - Change the active model directly from the browser header.
+* **Plan Approval** - Review and approve Claude implementation plans from the browser UI.
 
 **UI**
 
 * **Mobile Optimized** - Large approve and reject buttons. Behaves like a native app via PWA.
 * **Real time Sync** - All devices view the exact same session state.
 * **QR Code** - Scan to connect instantly.
-* **Image Paste** - Paste images directly from your clipboard into the input.
+* **Image Paste and Camera** - Paste images from clipboard or attach photos directly from your camera.
+* **Send While Processing** - Queue messages without waiting for the current response to finish.
+* **Sticky Todo Overlay** - TodoWrite tasks float as a progress bar while you scroll through the conversation.
+* **Scroll Position Hold** - Reading earlier messages will not get interrupted by new content arriving.
 
 **Server and Security**
 
@@ -205,6 +220,16 @@ graph LR
 
 For a detailed sequence diagram, daemon structure, and design decisions, refer to [docs/architecture.md](docs/architecture.md).
 
+## Star History
+
+<a href="https://star-history.com/#chadbyte/claude-relay&Date">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=chadbyte/claude-relay&type=Date&theme=dark" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=chadbyte/claude-relay&type=Date" />
+   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=chadbyte/claude-relay&type=Date" width="600" />
+ </picture>
+</a>
+
 ---
 
 ## Contributing

package/bin/cli.js

@@ -78,6 +78,7 @@ if (shutdownMode) {
 var cwd = process.cwd();
 
 // --- ANSI helpers ---
+var isBasicTerm = process.env.TERM_PROGRAM === "Apple_Terminal";
 var a = {
   reset: "\x1b[0m",
   bold: "\x1b[1m",
@@ -89,6 +90,9 @@ var a = {
 };
 
 function gradient(text) {
+  if (isBasicTerm) {
+    return a.yellow + text + a.reset;
+  }
   // Orange (#DA7756) → Gold (#D4A574)
   var r0 = 218, g0 = 119, b0 = 86;
   var r1 = 212, g1 = 165, b1 = 116;
@@ -258,7 +262,7 @@ function ensureCerts(ip) {
 
 // --- Logo ---
 function printLogo() {
-  var c = "\x1b[38;2;218;119;86m";
+  var c = isBasicTerm ? a.yellow : "\x1b[38;2;218;119;86m";
   var r = a.reset;
   var lines = [
     "  ██████╗ ██╗       █████╗  ██╗   ██╗ ██████╗  ███████╗     ██████╗  ███████╗ ██╗       █████╗  ██╗   ██╗",
@@ -1029,7 +1033,7 @@ function showMainMenu(config, ip) {
     }
 
     if (ip !== "localhost") {
-      qrcode.generate(url, { small: true }, function (code) {
+      qrcode.generate(url, { small: !isBasicTerm }, function (code) {
         var lines = code.split("\n").map(function (l) { return "  " + l; }).join("\n");
         console.log(lines);
         afterQr();
@@ -1464,7 +1468,7 @@ function showSetupGuide(config, ip, goBack) {
     log(sym.bar + "  " + a.dim + "Scan the QR code or open:" + a.reset);
     log(sym.bar + "  " + a.bold + setupUrl + a.reset);
     log(sym.bar);
-    qrcode.generate(setupUrl, { small: true }, function (code) {
+    qrcode.generate(setupUrl, { small: !isBasicTerm }, function (code) {
       var lines = code.split("\n").map(function (l) { return "  " + sym.bar + "  " + l; }).join("\n");
       console.log(lines);
       log(sym.bar);

package/lib/pages.js

@@ -444,8 +444,9 @@ function checkHttps() {
 
   var ac = new AbortController();
   setTimeout(function() { ac.abort(); }, 3000);
-  fetch(httpsUrl + "/info", { signal: ac.signal })
+  fetch(httpsUrl + "/info", { signal: ac.signal, mode: "no-cors" })
     .then(function() {
+      // Any response (even opaque/401) means TLS handshake succeeded = cert is trusted
       certStatus.className = "check-status ok";
       certStatus.textContent = "HTTPS connection verified. Certificate is trusted.";
       certNext.disabled = false;
@@ -614,7 +615,7 @@ if (!isHttps && !isLocal) {
     if (!info.httpsUrl) { init(); return; }
     var ac = new AbortController();
     setTimeout(function() { ac.abort(); }, 3000);
-    fetch(info.httpsUrl + "/info", { signal: ac.signal })
+    fetch(info.httpsUrl + "/info", { signal: ac.signal, mode: "no-cors" })
       .then(function() { location.replace(info.httpsUrl + "/setup"); })
       .catch(function() { init(); });
   }).catch(function() { init(); });

package/lib/project.js

@@ -2,8 +2,9 @@ var fs = require("fs");
 var path = require("path");
 var { createSessionManager } = require("./sessions");
 var { createSDKBridge } = require("./sdk-bridge");
-var { createTerminal } = require("./terminal");
+var { createTerminalManager } = require("./terminal-manager");
 var { fetchLatestVersion, isNewer } = require("./updater");
+var { fetchUsageData } = require("./usage");
 var { execFileSync } = require("child_process");
 
 // SDK loaded dynamically (ESM module)
@@ -94,6 +95,48 @@ function createProjectContext(opts) {
     }
   }
 
+  // --- File watcher ---
+  var fileWatcher = null;
+  var watchedPath = null;
+  var watchDebounce = null;
+
+  function startFileWatch(relPath) {
+    var absPath = safePath(cwd, relPath);
+    if (!absPath) return;
+    if (watchedPath === relPath) return;
+    stopFileWatch();
+    watchedPath = relPath;
+    try {
+      fileWatcher = fs.watch(absPath, function () {
+        clearTimeout(watchDebounce);
+        watchDebounce = setTimeout(function () {
+          try {
+            var stat = fs.statSync(absPath);
+            var ext = path.extname(absPath).toLowerCase();
+            if (stat.size > FS_MAX_SIZE || BINARY_EXTS.has(ext)) return;
+            var content = fs.readFileSync(absPath, "utf8");
+            send({ type: "fs_file_changed", path: relPath, content: content, size: stat.size });
+          } catch (e) {
+            stopFileWatch();
+          }
+        }, 200);
+      });
+      fileWatcher.on("error", function () { stopFileWatch(); });
+    } catch (e) {
+      watchedPath = null;
+    }
+  }
+
+  function stopFileWatch() {
+    if (fileWatcher) {
+      try { fileWatcher.close(); } catch (e) {}
+      fileWatcher = null;
+    }
+    clearTimeout(watchDebounce);
+    watchDebounce = null;
+    watchedPath = null;
+  }
+
   // --- Session manager ---
   var sm = createSessionManager({ cwd: cwd, send: send });
 
@@ -106,6 +149,9 @@ function createProjectContext(opts) {
     getSDK: getSDK,
   });
 
+  // --- Terminal manager ---
+  var tm = createTerminalManager({ cwd: cwd, send: send, sendTo: sendTo });
+
   // Check for updates in background
   fetchLatestVersion().then(function (v) {
     if (v && isNewer(v, currentVersion)) {
@@ -127,6 +173,10 @@ function createProjectContext(opts) {
     if (sm.slashCommands) {
       sendTo(ws, { type: "slash_commands", commands: sm.slashCommands });
     }
+    if (sm.currentModel) {
+      sendTo(ws, { type: "model_info", model: sm.currentModel, models: sm.availableModels || [] });
+    }
+    sendTo(ws, { type: "term_list", terminals: tm.list() });
 
     // Session list
     sendTo(ws, {
@@ -243,6 +293,12 @@ function createProjectContext(opts) {
       return;
     }
 
+    if (msg.type === "search_sessions") {
+      var results = sm.searchSessions(msg.query || "");
+      sendTo(ws, { type: "search_results", query: msg.query || "", results: results });
+      return;
+    }
+
     if (msg.type === "check_update") {
       fetchLatestVersion().then(function (v) {
         if (v && isNewer(v, currentVersion)) {
@@ -261,6 +317,23 @@ function createProjectContext(opts) {
       return;
     }
 
+    if (msg.type === "get_usage") {
+      fetchUsageData().then(function (data) {
+        sendTo(ws, { type: "usage_data", data: data });
+      }).catch(function (err) {
+        sendTo(ws, { type: "usage_data", error: err.message || "Failed to fetch usage data" });
+      });
+      return;
+    }
+
+    if (msg.type === "set_model" && msg.model) {
+      var session = sm.getActiveSession();
+      if (session) {
+        sdk.setModel(session, msg.model);
+      }
+      return;
+    }
+
     if (msg.type === "rewind_preview") {
       var session = sm.getActiveSession();
       if (!session || !session.cliSessionId || !msg.uuid) return;
@@ -358,6 +431,7 @@ function createProjectContext(opts) {
       var pending = session.pendingAskUser[toolId];
       if (!pending) return;
       delete session.pendingAskUser[toolId];
+      sm.sendAndRecord(session, { type: "ask_user_answered", toolId: toolId });
       pending.resolve({
         behavior: "allow",
         updatedInput: Object.assign({}, pending.input, { answers: answers }),
@@ -450,41 +524,64 @@ function createProjectContext(opts) {
       return;
     }
 
+    // --- File watcher ---
+    if (msg.type === "fs_watch") {
+      if (msg.path) startFileWatch(msg.path);
+      return;
+    }
+
+    if (msg.type === "fs_unwatch") {
+      stopFileWatch();
+      return;
+    }
+
     // --- Web terminal ---
-    if (msg.type === "term_open") {
-      if (ws._term) return;
-      var term = createTerminal(cwd);
-      if (!term) {
-        sendTo(ws, { type: "term_output", data: "\r\n[node-pty not available]\r\n" });
+    if (msg.type === "term_create") {
+      var t = tm.create(msg.cols || 80, msg.rows || 24);
+      if (!t) {
+        sendTo(ws, { type: "term_error", error: "Cannot create terminal (node-pty not available or limit reached)" });
         return;
       }
-      ws._term = term;
-      term.onData(function (data) {
-        sendTo(ws, { type: "term_output", data: data });
-      });
-      term.onExit(function () {
-        ws._term = null;
-        sendTo(ws, { type: "term_exited" });
-      });
+      tm.attach(t.id, ws);
+      send({ type: "term_list", terminals: tm.list() });
+      sendTo(ws, { type: "term_created", id: t.id });
+      return;
+    }
+
+    if (msg.type === "term_attach") {
+      if (msg.id) tm.attach(msg.id, ws);
+      return;
+    }
+
+    if (msg.type === "term_detach") {
+      if (msg.id) tm.detach(msg.id, ws);
       return;
     }
 
     if (msg.type === "term_input") {
-      if (ws._term) ws._term.write(msg.data);
+      if (msg.id) tm.write(msg.id, msg.data);
       return;
     }
 
     if (msg.type === "term_resize") {
-      if (ws._term && msg.cols > 0 && msg.rows > 0) {
-        try { ws._term.resize(msg.cols, msg.rows); } catch (e) {}
+      if (msg.id && msg.cols > 0 && msg.rows > 0) {
+        tm.resize(msg.id, msg.cols, msg.rows);
       }
       return;
     }
 
     if (msg.type === "term_close") {
-      if (ws._term) {
-        try { ws._term.kill(); } catch (e) {}
-        ws._term = null;
+      if (msg.id) {
+        tm.close(msg.id);
+        send({ type: "term_list", terminals: tm.list() });
+      }
+      return;
+    }
+
+    if (msg.type === "term_rename") {
+      if (msg.id && msg.title) {
+        tm.rename(msg.id, msg.title);
+        send({ type: "term_list", terminals: tm.list() });
       }
       return;
     }
@@ -495,14 +592,6 @@ function createProjectContext(opts) {
     var session = sm.getActiveSession();
     if (!session) return;
 
-    if (session.isProcessing) {
-      send({ type: "error", text: "Still processing previous message. Please wait." });
-      return;
-    }
-
-    session.isProcessing = true;
-    session.sentToolResults = {};
-
     var userMsg = { type: "user_message", text: msg.text || "" };
     if (msg.images && msg.images.length > 0) {
       userMsg.imageCount = msg.images.length;
@@ -513,7 +602,6 @@ function createProjectContext(opts) {
     session.history.push(userMsg);
     sm.appendToSessionFile(session, userMsg);
     sendToOthers(ws, userMsg);
-    send({ type: "status", status: "processing" });
 
     if (!session.title) {
       session.title = (msg.text || "Image").substring(0, 50);
@@ -529,8 +617,15 @@ function createProjectContext(opts) {
       }
     }
 
-    if (!session.queryInstance) {
-      sdk.startQuery(session, fullText, msg.images);
+    if (!session.isProcessing) {
+      session.isProcessing = true;
+      session.sentToolResults = {};
+      send({ type: "status", status: "processing" });
+      if (!session.queryInstance) {
+        sdk.startQuery(session, fullText, msg.images);
+      } else {
+        sdk.pushMessage(session, fullText, msg.images);
+      }
     } else {
       sdk.pushMessage(session, fullText, msg.images);
     }
@@ -539,11 +634,9 @@ function createProjectContext(opts) {
 
   // --- WS disconnection handler ---
   function handleDisconnection(ws) {
-    if (ws._term) {
-      try { ws._term.kill(); } catch (e) {}
-      ws._term = null;
-    }
+    tm.detachAll(ws);
     clients.delete(ws);
+    if (clients.size === 0) stopFileWatch();
     broadcastClientCount();
   }
 
@@ -651,6 +744,7 @@ function createProjectContext(opts) {
 
   // --- Destroy ---
   function destroy() {
+    stopFileWatch();
     // Abort all active sessions
     sm.sessions.forEach(function (session) {
       if (session.abortController) {
@@ -661,11 +755,8 @@ function createProjectContext(opts) {
       }
     });
     // Kill all terminals
+    tm.destroyAll();
     for (var ws of clients) {
-      if (ws._term) {
-        try { ws._term.kill(); } catch (e) {}
-        ws._term = null;
-      }
       try { ws.close(); } catch (e) {}
     }
     clients.clear();