claude-relay 2.1.3 → 2.2.1

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**
 
@@ -170,6 +185,10 @@ npx claude-relay -p 8080      # Specify port
 npx claude-relay --no-https   # Disable HTTPS
 npx claude-relay --no-update  # Skip update check
 npx claude-relay --debug      # Enable debug panel
+npx claude-relay --add .      # Add current directory to running daemon
+npx claude-relay --add /path  # Add a project by path
+npx claude-relay --remove .   # Remove a project
+npx claude-relay --list       # List registered projects
 ```
 
 ## Requirements
@@ -205,6 +224,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

@@ -18,6 +18,9 @@ var debugMode = false;
 var autoYes = false;
 var cliPin = null;
 var shutdownMode = false;
+var addPath = null;
+var removePath = null;
+var listMode = false;
 
 for (var i = 0; i < args.length; i++) {
   if (args[i] === "-p" || args[i] === "--port") {
@@ -40,8 +43,19 @@ for (var i = 0; i < args.length; i++) {
     i++;
   } else if (args[i] === "--shutdown") {
     shutdownMode = true;
+  } else if (args[i] === "--add") {
+    addPath = args[i + 1] || ".";
+    i++;
+  } else if (args[i] === "--remove") {
+    removePath = args[i + 1] || null;
+    i++;
+  } else if (args[i] === "--list") {
+    listMode = true;
   } else if (args[i] === "-h" || args[i] === "--help") {
     console.log("Usage: claude-relay [-p|--port <port>] [--no-https] [--no-update] [--debug] [-y|--yes] [--pin <pin>] [--shutdown]");
+    console.log("       claude-relay --add <path>     Add a project to the running daemon");
+    console.log("       claude-relay --remove <path>  Remove a project from the running daemon");
+    console.log("       claude-relay --list            List registered projects");
     console.log("");
     console.log("Options:");
     console.log("  -p, --port <port>  Port to listen on (default: 2633)");
@@ -51,6 +65,9 @@ for (var i = 0; i < args.length; i++) {
     console.log("  -y, --yes          Skip interactive prompts (accept defaults)");
     console.log("  --pin <pin>        Set 6-digit PIN (use with --yes)");
     console.log("  --shutdown         Shut down the running relay daemon");
+    console.log("  --add <path>       Add a project directory (use '.' for current)");
+    console.log("  --remove <path>    Remove a project directory");
+    console.log("  --list             List all registered projects");
     process.exit(0);
   }
 }
@@ -75,9 +92,97 @@ if (shutdownMode) {
   return;
 }
 
+// --- Handle --add before anything else ---
+if (addPath !== null) {
+  var absAdd = path.resolve(addPath);
+  try {
+    var stat = fs.statSync(absAdd);
+    if (!stat.isDirectory()) {
+      console.error("Not a directory: " + absAdd);
+      process.exit(1);
+    }
+  } catch (e) {
+    console.error("Directory not found: " + absAdd);
+    process.exit(1);
+  }
+  var addConfig = loadConfig();
+  isDaemonAliveAsync(addConfig).then(function (alive) {
+    if (!alive) {
+      console.error("No running daemon. Start with: npx claude-relay");
+      process.exit(1);
+    }
+    sendIPCCommand(socketPath(), { cmd: "add_project", path: absAdd }).then(function (res) {
+      if (res.ok) {
+        if (res.existing) {
+          console.log("Already registered: " + res.slug);
+        } else {
+          console.log("Added: " + res.slug + " \u2192 " + absAdd);
+        }
+        process.exit(0);
+      } else {
+        console.error("Failed: " + (res.error || "unknown error"));
+        process.exit(1);
+      }
+    });
+  });
+  return;
+}
+
+// --- Handle --remove before anything else ---
+if (removePath !== null) {
+  var absRemove = path.resolve(removePath);
+  var removeConfig = loadConfig();
+  isDaemonAliveAsync(removeConfig).then(function (alive) {
+    if (!alive) {
+      console.error("No running daemon. Start with: npx claude-relay");
+      process.exit(1);
+    }
+    sendIPCCommand(socketPath(), { cmd: "remove_project", path: absRemove }).then(function (res) {
+      if (res.ok) {
+        console.log("Removed: " + path.basename(absRemove));
+        process.exit(0);
+      } else {
+        console.error("Failed: " + (res.error || "project not found"));
+        process.exit(1);
+      }
+    });
+  });
+  return;
+}
+
+// --- Handle --list before anything else ---
+if (listMode) {
+  var listConfig = loadConfig();
+  isDaemonAliveAsync(listConfig).then(function (alive) {
+    if (!alive) {
+      console.error("No running daemon. Start with: npx claude-relay");
+      process.exit(1);
+    }
+    sendIPCCommand(socketPath(), { cmd: "get_status" }).then(function (res) {
+      if (!res.ok || !res.projects || res.projects.length === 0) {
+        console.log("No projects registered.");
+        process.exit(0);
+        return;
+      }
+      console.log("Projects (" + res.projects.length + "):\n");
+      for (var p = 0; p < res.projects.length; p++) {
+        var proj = res.projects[p];
+        var label = "  " + proj.slug;
+        if (proj.title) label += " (" + proj.title + ")";
+        label += "\n    " + proj.path;
+        console.log(label);
+      }
+      console.log("");
+      process.exit(0);
+    });
+  });
+  return;
+}
+
 var cwd = process.cwd();
 
 // --- ANSI helpers ---
+var isBasicTerm = process.env.TERM_PROGRAM === "Apple_Terminal";
 var a = {
   reset: "\x1b[0m",
   bold: "\x1b[1m",
@@ -89,6 +194,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 +366,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 +1137,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 +1572,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/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();