cli-tunnel 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tamir Dresher
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,100 @@
+# cli-tunnel
+
+Tunnel any CLI app to your phone — see the exact terminal output in your browser and type back into it.
+
+```bash
+npx cli-tunnel --tunnel copilot --yolo
+npx cli-tunnel --tunnel python -i
+npx cli-tunnel --tunnel htop
+```
+
+## How It Works
+
+1. Your command runs in a **PTY** (pseudo-terminal) — full TUI with colors, diffs, interactive prompts
+2. Raw terminal output is streamed over **WebSocket** to **xterm.js** in your browser
+3. **Microsoft Dev Tunnels** provide an authenticated HTTPS relay — zero servers to deploy
+4. **Bidirectional**: type on your phone → keystrokes go into the CLI session
+5. **Private by default**: only your Microsoft/GitHub account can access the tunnel
+
+## Install
+
+```bash
+npm install -g cli-tunnel
+```
+
+Or use directly with npx:
+
+```bash
+npx cli-tunnel --tunnel <command> [args...]
+```
+
+## Usage
+
+Any flags after the command name are passed directly to the underlying app — cli-tunnel doesn't interpret them.
+
+```bash
+# Start copilot with remote access (--yolo is a copilot flag, not ours)
+cli-tunnel --tunnel copilot --yolo
+
+# Pass any flags to the underlying command
+cli-tunnel --tunnel copilot --model claude-sonnet-4 --agent squad
+cli-tunnel --tunnel copilot --allow-all --resume
+
+# Name your session (shows in dashboard)
+cli-tunnel --tunnel --name wizard copilot --agent squad
+
+# Specific port
+cli-tunnel --tunnel --port 4000 copilot
+
+# Works with any CLI app — all their flags pass through
+cli-tunnel --tunnel python -i
+cli-tunnel --tunnel vim myfile.txt
+cli-tunnel --tunnel htop
+cli-tunnel --tunnel ssh user@server
+
+# Local only (no tunnel)
+cli-tunnel copilot
+```
+
+**cli-tunnel's own flags** (`--tunnel`, `--port`, `--name`) must come **before** the command. Everything after the command name passes through unchanged.
+
+## What You See on Your Phone
+
+- **Full terminal** rendered by xterm.js — exact same output as your local terminal
+- **Key bar** with ↑ ↓ → ← Tab Enter Esc Ctrl+C for mobile navigation
+- **Sessions dashboard** — see all running sessions, tap to connect
+- **Session cleanup** — remove stale tunnels
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/) 22+
+- [Microsoft Dev Tunnels CLI](https://aka.ms/devtunnels/doc) (for `--tunnel` mode)
+  ```bash
+  winget install Microsoft.devtunnel   # Windows
+  brew install --cask devtunnel        # macOS
+  ```
+  Then authenticate once: `devtunnel user login`
+
+## Security
+
+Tunnels are **private by default** — only the Microsoft/GitHub account that created the tunnel can connect. Auth is enforced at Microsoft's relay layer before traffic reaches your machine.
+
+- No inbound ports opened
+- No anonymous access
+- No central server
+- TLS encryption via devtunnel relay
+
+## How It's Built
+
+- **[node-pty](https://github.com/microsoft/node-pty)** — spawns the command in a pseudo-terminal
+- **[xterm.js](https://xtermjs.org/)** — terminal emulator in the browser (loaded from CDN)
+- **[ws](https://github.com/websockets/ws)** — WebSocket server for real-time streaming
+- **[Dev Tunnels](https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/)** — authenticated HTTPS relay
+
+## Blog Post
+
+[Your Copilot CLI on Your Phone — Building Squad Remote Control](https://www.tamirdresher.com/blog/2026/02/26/squad-remote-control)
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+/**
+ * cli-tunnel — Tunnel any CLI app to your phone
+ *
+ * Usage:
+ *   cli-tunnel <command> [args...]              # local only
+ *   cli-tunnel --tunnel <command> [args...]      # with devtunnel remote access
+ *   cli-tunnel --tunnel --name myapp <command>   # named session
+ *
+ * Examples:
+ *   cli-tunnel copilot --yolo
+ *   cli-tunnel --tunnel copilot --yolo
+ *   cli-tunnel --tunnel --name wizard copilot --agent squad
+ *   cli-tunnel --tunnel python -i
+ *   cli-tunnel --tunnel --port 4000 node server.js
+ */
+export {};

package/dist/index.js

@@ -0,0 +1,308 @@
+#!/usr/bin/env node
+/**
+ * cli-tunnel — Tunnel any CLI app to your phone
+ *
+ * Usage:
+ *   cli-tunnel <command> [args...]              # local only
+ *   cli-tunnel --tunnel <command> [args...]      # with devtunnel remote access
+ *   cli-tunnel --tunnel --name myapp <command>   # named session
+ *
+ * Examples:
+ *   cli-tunnel copilot --yolo
+ *   cli-tunnel --tunnel copilot --yolo
+ *   cli-tunnel --tunnel --name wizard copilot --agent squad
+ *   cli-tunnel --tunnel python -i
+ *   cli-tunnel --tunnel --port 4000 node server.js
+ */
+import path from 'node:path';
+import fs from 'node:fs';
+import { execSync, spawn } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+import http from 'node:http';
+import { WebSocketServer, WebSocket } from 'ws';
+import os from 'node:os';
+const BOLD = '\x1b[1m';
+const RESET = '\x1b[0m';
+const DIM = '\x1b[2m';
+const GREEN = '\x1b[32m';
+const YELLOW = '\x1b[33m';
+// ─── Parse args ─────────────────────────────────────────────
+const args = process.argv.slice(2);
+if (args.includes('--help') || args.includes('-h') || args.length === 0) {
+    console.log(`
+${BOLD}cli-tunnel${RESET} — Tunnel any CLI app to your phone
+
+${BOLD}Usage:${RESET}
+  cli-tunnel [options] <command> [args...]
+
+${BOLD}Options:${RESET}
+  --tunnel           Enable remote access via devtunnel
+  --port <n>         Bridge port (default: random)
+  --name <name>      Session name (shown in dashboard)
+  --help, -h         Show this help
+
+${BOLD}Examples:${RESET}
+  cli-tunnel copilot
+  cli-tunnel --tunnel copilot --yolo
+  cli-tunnel --tunnel copilot --model claude-sonnet-4 --agent squad
+  cli-tunnel --tunnel --name wizard copilot --allow-all
+  cli-tunnel --tunnel python -i
+  cli-tunnel --tunnel htop
+
+Any flags after the command name pass through to the underlying
+app. cli-tunnel's own flags (--tunnel, --port, --name) must come
+before the command.
+`);
+    process.exit(0);
+}
+const hasTunnel = args.includes('--tunnel');
+const portIdx = args.indexOf('--port');
+const port = (portIdx !== -1 && args[portIdx + 1]) ? parseInt(args[portIdx + 1], 10) : 0;
+const nameIdx = args.indexOf('--name');
+const sessionName = (nameIdx !== -1 && args[nameIdx + 1]) ? args[nameIdx + 1] : '';
+// Everything that's not our flags is the command
+const ourFlags = new Set(['--tunnel', '--port', '--name']);
+const cmdArgs = [];
+let skip = false;
+for (let i = 0; i < args.length; i++) {
+    if (skip) {
+        skip = false;
+        continue;
+    }
+    if (ourFlags.has(args[i]) && args[i] !== '--tunnel') {
+        skip = true;
+        continue;
+    }
+    if (args[i] === '--tunnel')
+        continue;
+    cmdArgs.push(args[i]);
+}
+if (cmdArgs.length === 0) {
+    console.error('Error: no command specified. Run cli-tunnel --help for usage.');
+    process.exit(1);
+}
+const command = cmdArgs[0];
+const commandArgs = cmdArgs.slice(1);
+const cwd = process.cwd();
+// ─── Tunnel helpers ─────────────────────────────────────────
+function sanitizeLabel(l) {
+    const clean = l.replace(/[^a-zA-Z0-9_\-=]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '').substring(0, 50);
+    return clean || 'unknown';
+}
+function getGitInfo() {
+    try {
+        const remote = execSync('git remote get-url origin', { cwd, encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] }).trim();
+        const repo = remote.split('/').pop()?.replace('.git', '') || 'unknown';
+        const branch = execSync('git branch --show-current', { cwd, encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] }).trim() || 'unknown';
+        return { repo, branch };
+    }
+    catch {
+        return { repo: path.basename(cwd), branch: 'unknown' };
+    }
+}
+// ─── Bridge server ──────────────────────────────────────────
+const acpEventLog = [];
+const connections = new Map();
+const server = http.createServer((req, res) => {
+    // Sessions API
+    if (req.url === '/api/sessions' && req.method === 'GET') {
+        try {
+            const output = execSync('devtunnel list --labels cli-tunnel --json', { encoding: 'utf-8', timeout: 10000, stdio: ['pipe', 'pipe', 'pipe'] });
+            const data = JSON.parse(output);
+            const sessions = (data.tunnels || []).map((t) => {
+                const labels = t.labels || [];
+                const id = t.tunnelId?.replace(/\.\w+$/, '') || t.tunnelId;
+                const cluster = t.tunnelId?.split('.').pop() || 'euw';
+                const portLabel = labels.find((l) => l.startsWith('port-'));
+                const p = portLabel ? parseInt(portLabel.replace('port-', ''), 10) : 3456;
+                return {
+                    id, tunnelId: t.tunnelId,
+                    name: labels[1] || 'unnamed',
+                    repo: labels[2] || 'unknown',
+                    branch: (labels[3] || 'unknown').replace(/_/g, '/'),
+                    machine: labels[4] || 'unknown',
+                    online: (t.hostConnections || 0) > 0,
+                    port: p,
+                    url: `https://${id}-${p}.${cluster}.devtunnels.ms`,
+                };
+            });
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ sessions }));
+        }
+        catch {
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ sessions: [] }));
+        }
+        return;
+    }
+    // Delete session
+    if (req.url?.startsWith('/api/sessions/') && req.method === 'DELETE') {
+        const tunnelId = req.url.replace('/api/sessions/', '').replace(/\.\w+$/, '');
+        try {
+            execSync(`devtunnel delete ${tunnelId} --force`, { encoding: 'utf-8', timeout: 10000, stdio: ['pipe', 'pipe', 'pipe'] });
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ deleted: true }));
+        }
+        catch {
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ deleted: false }));
+        }
+        return;
+    }
+    // Static files
+    const uiDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../remote-ui');
+    let filePath = path.join(uiDir, req.url === '/' ? 'index.html' : req.url || 'index.html');
+    if (!filePath.startsWith(uiDir)) {
+        res.writeHead(403);
+        res.end();
+        return;
+    }
+    if (!fs.existsSync(filePath))
+        filePath = path.join(uiDir, 'index.html');
+    const ext = path.extname(filePath);
+    const mimes = { '.html': 'text/html', '.js': 'application/javascript', '.css': 'text/css', '.json': 'application/json' };
+    res.writeHead(200, { 'Content-Type': mimes[ext] || 'application/octet-stream' });
+    fs.createReadStream(filePath).pipe(res);
+});
+const wss = new WebSocketServer({ server });
+wss.on('connection', (ws) => {
+    const id = Math.random().toString(36).substring(2);
+    connections.set(id, ws);
+    // Replay history
+    for (const event of acpEventLog) {
+        ws.send(JSON.stringify({ type: '_replay', data: event }));
+    }
+    ws.send(JSON.stringify({ type: '_replay_done' }));
+    ws.on('message', (data) => {
+        const raw = data.toString();
+        try {
+            const msg = JSON.parse(raw);
+            if (msg.type === 'pty_input' && ptyProcess) {
+                ptyProcess.write(msg.data);
+            }
+            if (msg.type === 'pty_resize' && ptyProcess) {
+                ptyProcess.resize(msg.cols, msg.rows);
+            }
+        }
+        catch {
+            if (ptyProcess)
+                ptyProcess.write(raw + '\r');
+        }
+    });
+    ws.on('close', () => connections.delete(id));
+});
+function broadcast(data) {
+    const msg = JSON.stringify({ type: 'pty', data });
+    acpEventLog.push(msg);
+    if (acpEventLog.length > 2000)
+        acpEventLog.splice(0, acpEventLog.length - 2000);
+    for (const [, ws] of connections) {
+        if (ws.readyState === WebSocket.OPEN)
+            ws.send(msg);
+    }
+}
+// ─── Start bridge ───────────────────────────────────────────
+let ptyProcess = null;
+async function main() {
+    const actualPort = await new Promise((resolve, reject) => {
+        server.listen(port, () => {
+            const addr = server.address();
+            resolve(typeof addr === 'object' ? addr.port : port);
+        });
+        server.on('error', reject);
+    });
+    const { repo, branch } = getGitInfo();
+    const machine = os.hostname();
+    const displayName = sessionName || command;
+    console.log(`\n${BOLD}cli-tunnel${RESET} ${DIM}v1.0.0${RESET}\n`);
+    console.log(`  ${DIM}Command:${RESET}  ${command} ${commandArgs.join(' ')}`);
+    console.log(`  ${DIM}Name:${RESET}     ${displayName}`);
+    console.log(`  ${DIM}Port:${RESET}     ${actualPort}`);
+    // Tunnel
+    if (hasTunnel) {
+        try {
+            execSync('devtunnel --version', { stdio: 'pipe' });
+            const labels = ['cli-tunnel', sanitizeLabel(sessionName || command), sanitizeLabel(repo), sanitizeLabel(branch), sanitizeLabel(machine), `port-${actualPort}`]
+                .map(l => `--labels ${l}`).join(' ');
+            const createOut = execSync(`devtunnel create ${labels} --expiration 1d --json`, { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] });
+            const tunnelId = JSON.parse(createOut).tunnel?.tunnelId?.split('.')[0];
+            const cluster = JSON.parse(createOut).tunnel?.tunnelId?.split('.')[1] || 'euw';
+            execSync(`devtunnel port create ${tunnelId} -p ${actualPort} --protocol http`, { stdio: 'pipe' });
+            const hostProc = spawn('devtunnel', ['host', tunnelId], { stdio: 'pipe', detached: false });
+            const url = await new Promise((resolve, reject) => {
+                const timeout = setTimeout(() => reject(new Error('Tunnel timeout')), 15000);
+                let out = '';
+                hostProc.stdout?.on('data', (d) => {
+                    out += d.toString();
+                    const match = out.match(/https:\/\/[^\s]+/);
+                    if (match) {
+                        clearTimeout(timeout);
+                        resolve(match[0]);
+                    }
+                });
+                hostProc.on('error', (e) => { clearTimeout(timeout); reject(e); });
+            });
+            console.log(`  ${GREEN}✓${RESET} Tunnel: ${BOLD}${url}${RESET}\n`);
+            try {
+                // @ts-ignore
+                const qr = (await import('qrcode-terminal'));
+                qr.default.generate(url, { small: true }, (code) => console.log(code));
+            }
+            catch { }
+            process.on('SIGINT', () => { hostProc.kill(); try {
+                execSync(`devtunnel delete ${tunnelId} --force`, { stdio: 'pipe' });
+            }
+            catch { } });
+            process.on('exit', () => { hostProc.kill(); try {
+                execSync(`devtunnel delete ${tunnelId} --force`, { stdio: 'pipe' });
+            }
+            catch { } });
+        }
+        catch (err) {
+            console.log(`  ${YELLOW}⚠${RESET} Tunnel failed: ${err.message}\n`);
+        }
+    }
+    console.log(`  ${DIM}Starting ${command}...${RESET}\n`);
+    // Spawn PTY
+    const nodePty = await import('node-pty');
+    const cols = process.stdout.columns || 120;
+    const rows = process.stdout.rows || 30;
+    // Resolve command path for node-pty on Windows
+    let resolvedCmd = command;
+    if (process.platform === 'win32') {
+        try {
+            const wherePaths = execSync(`where ${command}`, { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] }).trim().split('\n');
+            // Prefer .exe or .cmd over .ps1 for node-pty compatibility
+            const exePath = wherePaths.find(p => p.trim().endsWith('.exe')) || wherePaths.find(p => p.trim().endsWith('.cmd'));
+            if (exePath) {
+                resolvedCmd = exePath.trim();
+            }
+            else {
+                // For .ps1 scripts, wrap with powershell
+                resolvedCmd = 'powershell';
+                commandArgs.unshift('-File', wherePaths[0].trim());
+            }
+        }
+        catch { /* use as-is */ }
+    }
+    ptyProcess = nodePty.spawn(resolvedCmd, commandArgs, {
+        name: 'xterm-256color',
+        cols, rows, cwd,
+        env: process.env,
+    });
+    ptyProcess.onData((data) => {
+        process.stdout.write(data);
+        broadcast(data);
+    });
+    ptyProcess.onExit(({ exitCode }) => {
+        console.log(`\n${DIM}Process exited (code ${exitCode}).${RESET}`);
+        server.close();
+        process.exit(exitCode);
+    });
+    if (process.stdin.isTTY)
+        process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.on('data', (data) => ptyProcess.write(data.toString()));
+    process.stdout.on('resize', () => ptyProcess.resize(process.stdout.columns || 120, process.stdout.rows || 30));
+}
+main().catch((err) => { console.error(err); process.exit(1); });

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "cli-tunnel",
+  "version": "1.0.0",
+  "description": "Tunnel any CLI app to your phone - PTY + devtunnel + xterm.js",
+  "type": "module",
+  "main": "dist/index.js",
+  "bin": {
+    "cli-tunnel": "./dist/index.js"
+  },
+  "files": ["dist", "remote-ui"],
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run"
+  },
+  "keywords": ["cli", "tunnel", "remote", "pty", "xterm", "devtunnel", "copilot", "terminal"],
+  "author": "Tamir Dresher",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tamirdresher/cli-tunnel.git"
+  },
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "dependencies": {
+    "node-pty": "^1.1.0",
+    "qrcode-terminal": "^0.12.0",
+    "ws": "^8.19.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.3.2",
+    "@types/ws": "^8.18.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
+  }
+}

package/remote-ui/app.js

@@ -0,0 +1,551 @@
+/**
+ * cli-tunnel — Terminal-Style PWA (ACP Protocol)
+ * Raw terminal rendering matching Copilot CLI output
+ */
+(function () {
+  'use strict';
+
+  let ws = null;
+  let connected = false;
+  let sessionId = null;
+  let requestId = 0;
+  let pendingRequests = {};
+  let acpReady = false;
+  let streamingEl = null;
+  let replaying = false;
+  let toolCalls = {};
+
+  const $ = (sel) => document.querySelector(sel);
+  const terminal = $('#terminal');
+  const inputEl = $('#input');
+  const formEl = $('#input-form');
+  const statusEl = $('#status-indicator');
+  const statusText = $('#status-text');
+  const permOverlay = $('#permission-overlay');
+  const dashboard = $('#dashboard');
+  const termContainer = $('#terminal-container');
+  let currentView = 'terminal'; // 'dashboard' or 'terminal'
+
+  // ─── xterm.js Terminal ───────────────────────────────────
+  let xterm = null;
+  let fitAddon = null;
+
+  function initXterm() {
+    if (xterm) return;
+    xterm = new Terminal({
+      theme: {
+        background: '#0d1117',
+        foreground: '#c9d1d9',
+        cursor: '#3fb950',
+        selectionBackground: '#264f78',
+        black: '#0d1117',
+        red: '#f85149',
+        green: '#3fb950',
+        yellow: '#d29922',
+        blue: '#58a6ff',
+        magenta: '#bc8cff',
+        cyan: '#39c5cf',
+        white: '#c9d1d9',
+        brightBlack: '#6e7681',
+        brightRed: '#f85149',
+        brightGreen: '#3fb950',
+        brightYellow: '#d29922',
+        brightBlue: '#58a6ff',
+        brightMagenta: '#bc8cff',
+        brightCyan: '#39c5cf',
+        brightWhite: '#f0f6fc',
+      },
+      fontFamily: "'Cascadia Code', 'SF Mono', 'Fira Code', 'Menlo', monospace",
+      fontSize: 13,
+      scrollback: 5000,
+      cursorBlink: true,
+    });
+
+    fitAddon = new FitAddon.FitAddon();
+    xterm.loadAddon(fitAddon);
+    xterm.open(termContainer);
+    fitAddon.fit();
+
+    // Send terminal size to PTY so copilot renders correctly
+    function sendResize() {
+      if (ws && ws.readyState === WebSocket.OPEN && xterm) {
+        ws.send(JSON.stringify({ type: 'pty_resize', cols: xterm.cols, rows: xterm.rows }));
+      }
+    }
+
+    // Handle resize
+    window.addEventListener('resize', () => {
+      if (fitAddon) { fitAddon.fit(); sendResize(); }
+    });
+
+    // Send initial size
+    setTimeout(sendResize, 500);
+
+    // Keyboard input → send to bridge → PTY
+    xterm.onData((data) => {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: 'pty_input', data }));
+      }
+    });
+  }
+
+  // ─── Dashboard ───────────────────────────────────────────
+  let showOffline = false;
+
+  async function loadSessions() {
+    try {
+      const resp = await fetch('/api/sessions');
+      const data = await resp.json();
+      renderDashboard(data.sessions || []);
+    } catch (err) {
+      dashboard.innerHTML = '<div style="padding:12px;color:var(--red)">Failed to load sessions: ' + err.message + '</div>';
+    }
+  }
+
+  function renderDashboard(sessions) {
+    const filtered = showOffline ? sessions : sessions.filter(s => s.online);
+    const offlineCount = sessions.filter(s => !s.online).length;
+    const onlineCount = sessions.filter(s => s.online).length;
+
+    let html = `<div style="padding:8px 4px;display:flex;align-items:center;gap:8px">
+      <span style="color:var(--text-dim);font-size:12px">${onlineCount} online${offlineCount > 0 ? ', ' + offlineCount + ' offline' : ''}</span>
+      <span style="flex:1"></span>
+      <button onclick="toggleOffline()" style="background:none;border:1px solid var(--border);color:var(--text-dim);font-family:var(--font);font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer">${showOffline ? 'Hide offline' : 'Show offline'}</button>
+      ${offlineCount > 0 ? '<button onclick="cleanOffline()" style="background:none;border:1px solid var(--red);color:var(--red);font-family:var(--font);font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer">Clean offline</button>' : ''}
+      <button onclick="loadSessions()" style="background:none;border:1px solid var(--border);color:var(--text-dim);font-family:var(--font);font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer">↻</button>
+    </div>`;
+
+    if (filtered.length === 0) {
+      html += '<div style="padding:20px 12px;color:var(--text-dim);text-align:center">' +
+        (sessions.length === 0 ? 'No Squad RC sessions found.' : 'No online sessions. Tap "Show offline" to see stale ones.') +
+        '</div>';
+    } else {
+      html += filtered.map(s => `
+        <div class="session-card" ${s.online ? 'onclick="openSession(\'' + escapeHtml(s.url) + '\')"' : ''}>
+          <span class="status-dot ${s.online ? 'online' : 'offline'}"></span>
+          <div class="info">
+            <div class="repo">📦 ${escapeHtml(s.repo)}</div>
+            <div class="branch">🌿 ${escapeHtml(s.branch)}</div>
+            <div class="machine">💻 ${escapeHtml(s.machine)}</div>
+          </div>
+          ${s.online ? '<span class="arrow">→</span>' :
+            '<button onclick="event.stopPropagation();deleteSession(\'' + escapeHtml(s.id) + '\')" style="background:none;border:none;color:var(--red);cursor:pointer;font-size:14px" title="Remove">✕</button>'}
+        </div>
+      `).join('');
+    }
+    dashboard.innerHTML = html;
+  }
+
+  window.openSession = (url) => {
+    window.location.href = url;
+  };
+
+  window.toggleOffline = () => {
+    showOffline = !showOffline;
+    loadSessions();
+  };
+
+  window.cleanOffline = async () => {
+    const resp = await fetch('/api/sessions');
+    const data = await resp.json();
+    const offline = (data.sessions || []).filter(s => !s.online);
+    for (const s of offline) {
+      await fetch('/api/sessions/' + s.id, { method: 'DELETE' });
+    }
+    loadSessions();
+  };
+
+  window.deleteSession = async (id) => {
+    await fetch('/api/sessions/' + id, { method: 'DELETE' });
+    loadSessions();
+  };
+
+  window.toggleView = () => {
+    if (currentView === 'terminal') {
+      currentView = 'dashboard';
+      terminal.classList.add('hidden');
+      termContainer.classList.add('hidden');
+      $('#input-area').classList.add('hidden');
+      dashboard.classList.remove('hidden');
+      $('#btn-sessions').textContent = 'Terminal';
+      loadSessions();
+    } else {
+      currentView = 'terminal';
+      dashboard.classList.add('hidden');
+      $('#input-area').classList.remove('hidden');
+      if (ptyMode) {
+        termContainer.classList.remove('hidden');
+        $('#input-form').classList.add('hidden');
+        if (fitAddon) fitAddon.fit();
+        if (xterm) xterm.focus();
+      } else {
+        terminal.classList.remove('hidden');
+      }
+      $('#btn-sessions').textContent = 'Sessions';
+    }
+  };
+
+  // ─── Terminal Output ─────────────────────────────────────
+  function write(html, cls) {
+    const div = document.createElement('div');
+    if (cls) div.className = cls;
+    div.innerHTML = html;
+    terminal.appendChild(div);
+    if (!replaying) scrollToBottom();
+  }
+
+  function writeSys(text) { write(escapeHtml(text), 'sys'); }
+
+  function writeUserInput(text) {
+    write(escapeHtml(text), 'user-input');
+  }
+
+  function startStreaming() {
+    streamingEl = document.createElement('div');
+    streamingEl.className = 'agent-text';
+    streamingEl.innerHTML = '<span class="cursor"></span>';
+    terminal.appendChild(streamingEl);
+  }
+
+  function appendStreaming(text) {
+    if (!streamingEl) startStreaming();
+    // Remove cursor, append text, re-add cursor
+    const cursor = streamingEl.querySelector('.cursor');
+    if (cursor) cursor.remove();
+    streamingEl.innerHTML += escapeHtml(text);
+    const c = document.createElement('span');
+    c.className = 'cursor';
+    streamingEl.appendChild(c);
+    if (!replaying) scrollToBottom();
+  }
+
+  function endStreaming() {
+    if (streamingEl) {
+      const cursor = streamingEl.querySelector('.cursor');
+      if (cursor) cursor.remove();
+      // Render markdown-ish formatting
+      streamingEl.innerHTML = formatText(streamingEl.textContent || '');
+      streamingEl = null;
+    }
+  }
+
+  // ─── Tool Call Rendering ─────────────────────────────────
+  function renderToolCall(update) {
+    const id = update.id || update.toolCallId || ('tc-' + Date.now());
+    const name = update.name || 'tool';
+    const icons = { read: '📖', edit: '✏️', write: '✏️', shell: '▶️', search: '🔍', think: '💭', fetch: '🌐' };
+    const guessKind = name.includes('read') ? 'read' : name.includes('edit') || name.includes('write') ? 'edit' :
+      name.includes('shell') || name.includes('exec') || name.includes('run') ? 'shell' :
+      name.includes('search') || name.includes('grep') || name.includes('glob') ? 'search' :
+      name.includes('think') || name.includes('reason') ? 'think' : 'other';
+    const icon = icons[guessKind] || '⚙️';
+
+    const el = document.createElement('div');
+    el.className = 'tool-call';
+    el.id = 'tool-' + id;
+    el.dataset.toolId = id;
+
+    const inputStr = update.input ? (typeof update.input === 'string' ? update.input : JSON.stringify(update.input)) : '';
+    const shortInput = inputStr.length > 80 ? inputStr.substring(0, 80) + '...' : inputStr;
+
+    el.innerHTML = `<span class="tool-icon">${icon}</span><span class="tool-name">${escapeHtml(name)}</span> ${escapeHtml(shortInput)}<span class="tool-status in_progress">⟳</span><div class="tool-body"></div>`;
+    el.addEventListener('click', () => el.classList.toggle('expanded'));
+
+    terminal.appendChild(el);
+    toolCalls[id] = el;
+    if (!replaying) scrollToBottom();
+  }
+
+  function updateToolCall(update) {
+    const id = update.id || update.toolCallId;
+    const el = toolCalls[id];
+    if (!el) return;
+
+    if (update.status) {
+      el.classList.remove('completed', 'failed');
+      if (update.status === 'completed') el.classList.add('completed');
+      if (update.status === 'failed' || update.status === 'errored') el.classList.add('failed');
+
+      const badge = el.querySelector('.tool-status');
+      if (badge) {
+        badge.className = 'tool-status ' + update.status;
+        badge.textContent = update.status === 'completed' ? '✓' : update.status === 'failed' || update.status === 'errored' ? '✗' : '⟳';
+      }
+    }
+
+    if (update.content) {
+      const body = el.querySelector('.tool-body');
+      if (body) {
+        for (const item of (Array.isArray(update.content) ? update.content : [update.content])) {
+          if (item.type === 'diff' && item.diff) {
+            let diffHtml = `<div class="diff"><div class="diff-header">${escapeHtml(item.path || '')}</div>`;
+            if (item.diff.before) diffHtml += `<div class="diff-del">${escapeHtml(item.diff.before)}</div>`;
+            if (item.diff.after) diffHtml += `<div class="diff-add">${escapeHtml(item.diff.after)}</div>`;
+            diffHtml += '</div>';
+            body.innerHTML += diffHtml;
+          } else if (item.type === 'text' && item.text) {
+            body.innerHTML += `<div class="code-block">${escapeHtml(item.text)}</div>`;
+          } else if (typeof item === 'string') {
+            body.innerHTML += `<div class="code-block">${escapeHtml(item)}</div>`;
+          }
+        }
+        el.classList.add('expanded');
+      }
+    }
+  }
+
+  // ─── ACP JSON-RPC ────────────────────────────────────────
+  function sendRequest(method, params, timeoutMs) {
+    return new Promise((resolve, reject) => {
+      const id = ++requestId;
+      pendingRequests[id] = { resolve, reject };
+      const msg = JSON.stringify({ jsonrpc: '2.0', id, method, params });
+      if (ws && ws.readyState === WebSocket.OPEN) ws.send(msg);
+      const timeout = timeoutMs !== undefined ? timeoutMs : (method === 'initialize' ? 60000 : 120000);
+      if (timeout > 0) {
+        setTimeout(() => {
+          if (pendingRequests[id]) { delete pendingRequests[id]; reject(new Error(`${method} timed out`)); }
+        }, timeout);
+      }
+    });
+  }
+
+  // ─── ACP Initialize ─────────────────────────────────────
+  async function initializeACP(attempt) {
+    attempt = attempt || 1;
+    setStatus('connecting', attempt === 1 ? 'Initializing...' : `Retry ${attempt}/5...`);
+    if (attempt === 1) writeSys('Waiting for Copilot to load (~15-20s)...');
+
+    try {
+      const result = await sendRequest('initialize', {
+        protocolVersion: 1, clientCapabilities: {},
+        clientInfo: { name: 'squad-rc', title: 'Squad RC', version: '1.0.0' },
+      });
+      writeSys('Connected to Copilot ' + (result.agentInfo?.version || ''));
+      const sessionResult = await sendRequest('session/new', { cwd: '.', mcpServers: [] });
+      sessionId = sessionResult.sessionId;
+      acpReady = true;
+      setStatus('online', 'Ready');
+      writeSys('Session ready. Type a message below.');
+    } catch (err) {
+      if (attempt < 5) {
+        writeSys('Not ready, retrying in 5s... (' + attempt + '/5)');
+        setTimeout(() => initializeACP(attempt + 1), 5000);
+      } else {
+        setStatus('offline', 'Failed');
+        writeSys('Failed to connect: ' + err.message);
+      }
+    }
+  }
+
+  // ─── WebSocket ───────────────────────────────────────────
+  function connect() {
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    ws = new WebSocket(`${proto}//${location.host}`);
+    setStatus('connecting', 'Connecting...');
+
+    ws.onopen = () => {
+      connected = true;
+      setTimeout(() => initializeACP(1), 1000);
+    };
+    ws.onclose = () => {
+      connected = false; acpReady = false; sessionId = null;
+      setStatus('offline', 'Disconnected');
+      setTimeout(connect, 3000);
+    };
+    ws.onerror = () => setStatus('offline', 'Error');
+    ws.onmessage = (e) => {
+      try {
+        const msg = JSON.parse(e.data);
+        handleMessage(msg);
+      } catch {}
+    };
+  }
+
+  // ─── Message Handler ─────────────────────────────────────
+  function handleMessage(msg) {
+    // Replay events from bridge recording
+    if (msg.type === '_replay') {
+      replaying = true;
+      try { handleMessage(JSON.parse(msg.data)); } catch {}
+      return;
+    }
+    if (msg.type === '_replay_done') {
+      replaying = false;
+      scrollToBottom();
+      return;
+    }
+
+    // PTY data — raw terminal output → xterm.js
+    if (msg.type === 'pty') {
+      if (!ptyMode) {
+        ptyMode = true;
+        setStatus('online', 'PTY Mirror');
+        terminal.classList.add('hidden');
+        // Hide text input form but keep key bar visible
+        $('#input-form').classList.add('hidden');
+        termContainer.classList.remove('hidden');
+        initXterm();
+      }
+      xterm.write(msg.data);
+      return;
+    }
+
+    // JSON-RPC response (ACP mode fallback)
+    if (msg.id !== undefined && (msg.result !== undefined || msg.error !== undefined)) {
+      const p = pendingRequests[msg.id];
+      if (p) {
+        delete pendingRequests[msg.id];
+        msg.error ? p.reject(new Error(msg.error.message || 'Error')) : p.resolve(msg.result);
+      }
+      if (msg.result?.stopReason) endStreaming();
+      return;
+    }
+
+    // session/update notification (ACP mode fallback)
+    if (msg.method === 'session/update' && msg.params) {
+      const u = msg.params.update || msg.params;
+      if (u.sessionUpdate === 'agent_message_chunk' && u.content?.text) {
+        appendStreaming(u.content.text);
+      }
+      if (u.sessionUpdate === 'tool_call') renderToolCall(u);
+      if (u.sessionUpdate === 'tool_call_update') updateToolCall(u);
+      return;
+    }
+
+    // Permission request (ACP mode)
+    if (msg.method === 'session/request_permission') {
+      showPermission(msg);
+      return;
+    }
+  }
+
+  // ─── PTY Terminal Rendering ──────────────────────────────
+  function appendTerminalData(data) {
+    // Strip some ANSI sequences that don't render well in HTML
+    // but keep colors and basic formatting
+    const html = ansiToHtml(data);
+    terminal.innerHTML += html;
+    if (!replaying) scrollToBottom();
+  }
+
+  function ansiToHtml(text) {
+    // Convert ANSI escape codes to HTML spans
+    let html = escapeHtml(text);
+
+    // Color codes → spans
+    const colorMap = {
+      '30': '#6e7681', '31': '#f85149', '32': '#3fb950', '33': '#d29922',
+      '34': '#58a6ff', '35': '#bc8cff', '36': '#39c5cf', '37': '#c9d1d9',
+      '90': '#6e7681', '91': '#f85149', '92': '#3fb950', '93': '#d29922',
+      '94': '#58a6ff', '95': '#bc8cff', '96': '#39c5cf', '97': '#f0f6fc',
+    };
+
+    // Replace \x1b[Xm patterns
+    html = html.replace(/\x1b\[(\d+)m/g, (_, code) => {
+      if (code === '0') return '</span>';
+      if (code === '1') return '<span style="font-weight:bold">';
+      if (code === '2') return '<span style="opacity:0.6">';
+      if (code === '4') return '<span style="text-decoration:underline">';
+      if (colorMap[code]) return `<span style="color:${colorMap[code]}">`;
+      return '';
+    });
+
+    // Clean up escape sequences we don't handle
+    html = html.replace(/\x1b\[[0-9;]*[A-Za-z]/g, '');
+    // Clean \r
+    html = html.replace(/\r/g, '');
+
+    return html;
+  }
+
+  // ─── Permission Dialog ───────────────────────────────────
+  function showPermission(msg) {
+    const p = msg.params || {};
+    // Extract readable info from the permission request
+    const toolCall = p.toolCall || {};
+    const title = toolCall.title || p.tool || 'Tool action';
+    const kind = toolCall.kind || 'unknown';
+    const kindIcons = { read: '📖', edit: '✏️', execute: '▶️', delete: '🗑️' };
+    const icon = kindIcons[kind] || '🔧';
+    // For shell commands, show just the first line
+    const command = toolCall.rawInput?.command || toolCall.rawInput?.commands?.[0] || '';
+    const shortCmd = command.split('\n')[0].substring(0, 100) + (command.length > 100 ? '...' : '');
+
+    permOverlay.classList.remove('hidden');
+    permOverlay.innerHTML = `<div class="perm-dialog">
+      <h3>${icon} ${escapeHtml(title)}</h3>
+      <p>${escapeHtml(shortCmd || JSON.stringify(p).substring(0, 200))}</p>
+      <div class="perm-actions">
+        <button class="btn-deny" onclick="handlePerm(${msg.id}, false)">Deny</button>
+        <button class="btn-approve" onclick="handlePerm(${msg.id}, true)">Approve</button>
+      </div>
+    </div>`;
+  }
+  window.handlePerm = (id, approved) => {
+    if (ws?.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ jsonrpc: '2.0', id, result: { outcome: approved ? 'approved' : 'denied' } }));
+    }
+    permOverlay.classList.add('hidden');
+  };
+
+  // ─── Mobile Key Bar ───────────────────────────────────────
+  window.sendKey = (key) => {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'pty_input', data: key }));
+    }
+    if (xterm) xterm.focus();
+  };
+
+  // ─── Send Prompt ─────────────────────────────────────────
+  let ptyMode = false;
+
+  formEl.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const text = inputEl.value.trim();
+    if (!text) return;
+    inputEl.value = '';
+
+    if (ptyMode) {
+      // xterm.js handles input directly — focus it
+      if (xterm) xterm.focus();
+      return;
+    }
+
+    // ACP mode
+    if (!acpReady || !sessionId) return;
+    writeUserInput(text);
+    try {
+      await sendRequest('session/prompt', {
+        sessionId, prompt: [{ type: 'text', text }],
+      }, 0);
+    } catch (err) {
+      endStreaming();
+      writeSys('Error: ' + err.message);
+    }
+  });
+
+  // ─── Helpers ─────────────────────────────────────────────
+  function setStatus(state, text) {
+    statusEl.className = state;
+    statusText.textContent = text;
+  }
+  function scrollToBottom() {
+    requestAnimationFrame(() => { terminal.scrollTop = terminal.scrollHeight; });
+  }
+  function escapeHtml(s) {
+    const d = document.createElement('div'); d.textContent = s || ''; return d.innerHTML;
+  }
+  function formatText(text) {
+    return escapeHtml(text)
+      .replace(/```(\w*)\n([\s\S]*?)```/g, '<div class="code-block">$2</div>')
+      .replace(/`([^`]+)`/g, '<code style="background:var(--bg-tool);padding:1px 4px;border-radius:3px">$1</code>')
+      .replace(/\*\*([^*]+)\*\*/g, '<strong style="color:var(--text-bright)">$1</strong>')
+      .replace(/\n/g, '<br>');
+  }
+
+  // ─── Start ───────────────────────────────────────────────
+  writeSys('cli-tunnel');
+  connect();
+})();
+

package/remote-ui/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="theme-color" content="#0d1117">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <title>cli-tunnel</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css">
+  <link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+  <div id="app">
+    <header id="header">
+      <span id="status-indicator">●</span>
+      <span id="status-text">Connecting...</span>
+      <span style="flex:1"></span>
+      <button id="btn-sessions" onclick="toggleView()" style="background:none;border:none;color:var(--text-dim);font-family:var(--font);font-size:12px;cursor:pointer">Sessions</button>
+    </header>
+
+    <!-- Dashboard view -->
+    <div id="dashboard" class="hidden">
+      <div style="padding:12px;color:var(--text-dim);font-size:12px">Loading sessions...</div>
+    </div>
+
+    <!-- Terminal view (xterm.js) -->
+    <div id="terminal-container"></div>
+
+    <!-- Legacy terminal (ACP mode fallback) -->
+    <main id="terminal" class="hidden"></main>
+
+    <footer id="input-area">
+      <div id="key-bar">
+        <button onclick="sendKey('\x1b[A')">↑</button>
+        <button onclick="sendKey('\x1b[B')">↓</button>
+        <button onclick="sendKey('\x1b[C')">→</button>
+        <button onclick="sendKey('\x1b[D')">←</button>
+        <button onclick="sendKey('\t')">Tab</button>
+        <button onclick="sendKey('\r')">Enter</button>
+        <button onclick="sendKey('\x1b')">Esc</button>
+        <button onclick="sendKey('\x03')">Ctrl+C</button>
+        <button onclick="sendKey(' ')">Space</button>
+        <button onclick="sendKey('\x7f')">⌫</button>
+      </div>
+      <form id="input-form">
+        <span class="prompt">&gt;</span>
+        <input type="text" id="input" placeholder="Send a message..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+      </form>
+    </footer>
+  </div>
+  <div id="permission-overlay" class="hidden"></div>
+  <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
+  <script src="/app.js"></script>
+</body>
+</html>
+

package/remote-ui/manifest.json

@@ -0,0 +1,10 @@
+{
+  "name": "Squad RC",
+  "short_name": "Squad",
+  "description": "Remote control for your Squad AI team",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#1a1a2e",
+  "theme_color": "#1a1a2e",
+  "icons": []
+}

package/remote-ui/styles.css

@@ -0,0 +1,249 @@
+:root {
+  --bg: #0d1117;
+  --bg-tool: #161b22;
+  --text: #c9d1d9;
+  --text-dim: #6e7681;
+  --text-bright: #f0f6fc;
+  --green: #3fb950;
+  --red: #f85149;
+  --yellow: #d29922;
+  --blue: #58a6ff;
+  --purple: #bc8cff;
+  --cyan: #39c5cf;
+  --border: #30363d;
+  --font: 'Cascadia Code', 'SF Mono', 'Fira Code', 'Menlo', 'Consolas', monospace;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: var(--font);
+  font-size: 13px;
+  background: var(--bg);
+  color: var(--text);
+  height: 100dvh;
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+}
+
+/* Header — minimal status bar */
+header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  background: var(--bg-tool);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  font-size: 12px;
+}
+#status-indicator { font-size: 10px; }
+#status-indicator.online { color: var(--green); }
+#status-indicator.offline { color: var(--red); }
+#status-indicator.connecting { color: var(--yellow); }
+#status-text { color: var(--text-dim); }
+
+/* Terminal area (legacy) */
+#terminal {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 12px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  line-height: 1.5;
+  scroll-behavior: smooth;
+}
+
+/* xterm.js container */
+#terminal-container {
+  flex: 1;
+  overflow: hidden;
+}
+#terminal-container .xterm {
+  height: 100%;
+  padding: 4px;
+}
+
+/* System messages */
+.sys { color: var(--text-dim); font-style: italic; }
+
+/* User input echo */
+.user-input { color: var(--blue); }
+.user-input::before { content: '❯ '; color: var(--green); }
+
+/* Agent text */
+.agent-text { color: var(--text); }
+
+/* Streaming cursor */
+.cursor { 
+  display: inline-block; 
+  width: 7px; height: 14px; 
+  background: var(--text); 
+  animation: blink 0.7s infinite; 
+  vertical-align: text-bottom;
+  margin-left: 1px;
+}
+@keyframes blink { 50% { opacity: 0; } }
+
+/* Tool calls */
+.tool-call {
+  margin: 4px 0;
+  border-left: 2px solid var(--blue);
+  padding: 2px 0 2px 8px;
+  color: var(--text-dim);
+  font-size: 12px;
+}
+.tool-call.completed { border-left-color: var(--green); }
+.tool-call.failed { border-left-color: var(--red); }
+.tool-call .tool-icon { margin-right: 4px; }
+.tool-call .tool-name { color: var(--cyan); }
+.tool-call .tool-status { margin-left: 8px; }
+.tool-call .tool-status.completed { color: var(--green); }
+.tool-call .tool-status.failed { color: var(--red); }
+.tool-call .tool-status.in_progress { color: var(--yellow); }
+
+/* Tool call content (expandable) */
+.tool-body { display: none; margin-top: 4px; }
+.tool-call.expanded .tool-body { display: block; }
+
+/* Diff blocks */
+.diff { margin: 4px 0; font-size: 12px; }
+.diff-header { color: var(--text-dim); }
+.diff-add { color: var(--green); }
+.diff-add::before { content: '+ '; }
+.diff-del { color: var(--red); }
+.diff-del::before { content: '- '; }
+
+/* Code blocks */
+.code-block {
+  background: var(--bg-tool);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 6px 8px;
+  margin: 4px 0;
+  overflow-x: auto;
+  font-size: 12px;
+}
+.code-header { color: var(--text-dim); font-size: 11px; margin-bottom: 2px; }
+
+/* Permission dialog */
+#permission-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.7);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding-bottom: 60px;
+  z-index: 100;
+}
+#permission-overlay.hidden { display: none; }
+.perm-dialog {
+  background: var(--bg-tool);
+  border: 1px solid var(--yellow);
+  border-radius: 8px;
+  padding: 12px;
+  width: calc(100% - 24px);
+  max-width: 400px;
+  max-height: 40vh;
+  display: flex;
+  flex-direction: column;
+}
+.perm-dialog h3 { color: var(--yellow); font-size: 14px; margin-bottom: 6px; flex-shrink: 0; }
+.perm-dialog p { font-size: 12px; color: var(--text); margin-bottom: 10px; overflow-y: auto; flex: 1; min-height: 0; }
+.perm-actions { display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; padding-top: 4px; }
+.perm-actions { display: flex; gap: 8px; justify-content: flex-end; }
+.perm-actions button {
+  padding: 6px 16px; border: none; border-radius: 4px;
+  cursor: pointer; font-size: 13px; font-family: var(--font);
+}
+.btn-approve { background: var(--green); color: #000; }
+.btn-deny { background: var(--red); color: #fff; }
+
+/* Input area */
+#input-area {
+  padding: 4px 8px 6px;
+  background: var(--bg-tool);
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+}
+#key-bar {
+  display: flex;
+  gap: 4px;
+  padding: 4px 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+#key-bar button {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 13px;
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  flex-shrink: 0;
+  min-width: 36px;
+  -webkit-tap-highlight-color: transparent;
+}
+#key-bar button:active { background: var(--blue); color: #000; }
+#input-form {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.prompt { color: var(--green); font-weight: bold; }
+#input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: var(--text-bright);
+  font-size: 14px;
+  font-family: var(--font);
+  outline: none;
+  caret-color: var(--green);
+}
+#input::placeholder { color: var(--text-dim); }
+
+.hidden { display: none !important; }
+
+/* Dashboard */
+#dashboard {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+.session-card {
+  background: var(--bg-tool);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 10px 12px;
+  margin-bottom: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.session-card:hover { border-color: var(--blue); }
+.session-card .status-dot {
+  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
+}
+.session-card .status-dot.online { background: var(--green); }
+.session-card .status-dot.offline { background: var(--text-dim); }
+.session-card .info { flex: 1; min-width: 0; }
+.session-card .repo { color: var(--blue); font-weight: bold; font-size: 13px; }
+.session-card .branch { color: var(--text-dim); font-size: 11px; }
+.session-card .machine { color: var(--text-dim); font-size: 11px; }
+.session-card .arrow { color: var(--text-dim); }
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }