clideck 1.22.7 → 1.23.1

package/.github/pull_request_template.md

@@ -0,0 +1,27 @@
+## What changed
+
+<!-- One or two sentences. What does this PR do? -->
+
+## Why
+
+<!-- What problem does this solve? Link to an issue or discussion if one exists. -->
+
+## How to verify
+
+<!--
+Steps to test this locally:
+1. Run `node server.js`
+2. Open http://localhost:4000
+3. ...
+-->
+
+## What's out of scope
+
+<!-- What did you intentionally NOT change? Helps reviewers stay focused. -->
+
+## Checklist
+
+- [ ] Tested locally with `node server.js`
+- [ ] One focused change, not bundled with unrelated fixes
+- [ ] No new external service dependencies
+- [ ] Does not read, store, or intercept agent prompts/responses

package/CONTRIBUTING.md

@@ -0,0 +1,53 @@
+# Contributing to CliDeck
+
+This document explains what we accept, what needs discussion first, and how to structure a PR so it gets reviewed fast.
+
+## What to contribute
+
+**Bug fixes and small improvements** — open a PR directly.
+Crashes, rendering glitches, typos, broken links, edge cases, performance fixes.
+
+**New features, architecture changes, or new agent presets** — [start a Discussion](https://github.com/rustykuntz/clideck/discussions) first.
+Describe the problem, your proposed approach, and any trade-offs. If the idea gets a thumbs up, then open a PR.
+
+**Plugins** — the best way to contribute new functionality.
+CliDeck has a plugin system so features can be added without touching core code. If your idea can be a plugin, it should be. See the [documentation](https://docs.clideck.dev/) for how to build one.
+
+## What we will reject
+
+- PRs that change multiple unrelated things. One change per PR.
+- PRs with no description of what changed or why.
+- Formatting-only changes (whitespace, semicolons, reordering imports).
+- Features that add external service dependencies or phone home.
+- Changes that break the zero-interference guarantee — CliDeck never reads, stores, or intercepts agent prompts and responses.
+
+## Before you open a PR
+
+1. **Test locally.** Run `node server.js`, open `http://localhost:4000`, and verify your change works.
+2. **Keep it focused.** If you found a bug while working on a feature, that's two PRs.
+3. **Match the existing style.** No linter is enforced, but stay consistent with surrounding code.
+4. **Don't bundle dependency changes** unless your PR specifically requires them.
+
+## PR structure
+
+Fill out the PR template. The key fields:
+
+- **What changed** — one or two sentences.
+- **Why** — the problem this solves.
+- **How to verify** — steps to confirm it works.
+- **What's out of scope** — what you intentionally did not change.
+
+Small PRs get reviewed faster. If your diff is over 300 lines, consider splitting it.
+
+## Built a fork?
+
+If you've forked CliDeck and built something — a new agent integration, a workflow improvement, a plugin — open a Discussion in **Show & Tell**. The best fork features get upstreamed.
+
+## Licensing of contributions
+
+By submitting a contribution that is accepted into the repository, you agree
+that it will be licensed under the MIT License.
+
+## Conduct
+
+Be constructive. Review comments are about the code, not the person. If a PR is rejected, the reason will be explained.

package/README.md

@@ -75,6 +75,10 @@ Full setup guides, agent configuration, and plugin development:
 
 **[Documentation](https://docs.clideck.dev/)**
 
+## Acknowledgments
+
+Built with [xterm.js](https://xtermjs.org/).
+
 ## License
 
-MIT
+MIT — see [LICENSE](LICENSE).

package/activity.js

@@ -51,6 +51,11 @@ function stop() {
   interval = null;
 }
 
+function isActive(id) {
+  const s = stream[id];
+  return s ? (Date.now() - s.lastOutAt < 2000) : false;
+}
+
 function clear(id) { delete net[id]; delete stream[id]; }
 
-module.exports = { start, stop, trackIn, trackOut, clear };
+module.exports = { start, stop, trackIn, trackOut, isActive, clear };

package/handlers.js

@@ -11,6 +11,23 @@ for (const p of presets) if (p.presetId === 'shell') p.command = defaultShell;
 const transcript = require('./transcript');
 const plugins = require('./plugin-loader');
 
+const opencodePluginDir = join(
+  process.platform === 'win32' ? (process.env.APPDATA || join(os.homedir(), 'AppData', 'Roaming')) : join(os.homedir(), '.config'),
+  'opencode', 'plugins'
+);
+// Resolve opencode preset paths for current platform
+for (const p of presets) {
+  if (p.presetId !== 'opencode') continue;
+  const bridgePath = join(opencodePluginDir, 'clideck-bridge.js');
+  if (p.pluginPath) p.pluginPath = bridgePath;
+  if (p.pluginSetup) {
+    const copyCmd = process.platform === 'win32'
+      ? `copy opencode-plugin\\clideck-bridge.js "${opencodePluginDir}\\"`
+      : `cp opencode-plugin/clideck-bridge.js ${opencodePluginDir}/`;
+    p.pluginSetup = `Install the CliDeck bridge plugin to enable real-time status and resume.\n\n${copyCmd}`;
+  }
+}
+
 // Check which agent binaries are available on PATH
 const whichCmd = process.platform === 'win32' ? 'where' : 'which';
 function checkAvailability() {
@@ -47,8 +64,7 @@ function detectTelemetryConfig(c) {
         detected = !!s.telemetry?.enabled && (s.telemetry?.otlpEndpoint || '').includes(`localhost:${port}`);
       } catch {}
     } else if (preset.presetId === 'opencode') {
-      const ocPlugins = join(home, '.config', 'opencode', 'plugins');
-      detected = existsSync(join(ocPlugins, 'clideck-bridge.js')) || existsSync(join(ocPlugins, 'termix-bridge.js'));
+      detected = existsSync(join(opencodePluginDir, 'clideck-bridge.js')) || existsSync(join(opencodePluginDir, 'termix-bridge.js'));
     } else { continue; }
     if (detected !== !!cmd.telemetryEnabled) {
       cmd.telemetryEnabled = detected;
@@ -60,14 +76,18 @@ function detectTelemetryConfig(c) {
   return changed;
 }
 
+function configForClient() {
+  return { ...cfg, pluginsDir: plugins.PLUGINS_DIR };
+}
+
 function onConnection(ws) {
   sessions.clients.add(ws);
 
-  ws.send(JSON.stringify({ type: 'config', config: cfg }));
+  ws.send(JSON.stringify({ type: 'config', config: configForClient() }));
   ws.send(JSON.stringify({ type: 'themes', themes }));
   ws.send(JSON.stringify({ type: 'presets', presets }));
   ws.send(JSON.stringify({ type: 'sessions', list: sessions.list() }));
-  ws.send(JSON.stringify({ type: 'sessions.resumable', list: sessions.getResumable() }));
+  ws.send(JSON.stringify({ type: 'sessions.resumable', list: sessions.getResumable(cfg) }));
   ws.send(JSON.stringify({ type: 'transcript.cache', cache: transcript.getCache() }));
   ws.send(JSON.stringify({ type: 'plugins', list: plugins.getInfo() }));
   sessions.sendBuffers(ws);
@@ -82,14 +102,20 @@ function onConnection(ws) {
       case 'session.restart': console.log('[handler] session.restart', msg.id); sessions.restart(msg, ws, cfg); break;
       case 'input':                sessions.input(msg); break;
       case 'session.statusReport':
-        if (sessions.getSessions().has(msg.id)) plugins.notifyStatus(msg.id, !!msg.working);
+        if (sessions.getSessions().has(msg.id)) {
+          plugins.notifyStatus(msg.id, !!msg.working);
+        }
+        break;
+      case 'terminal.buffer':
+        require('./transcript').storeBuffer(msg.id, msg.lines);
+        sessions.broadcast({ type: 'screen.updated', id: msg.id });
         break;
       case 'resize':               sessions.resize(msg); break;
       case 'rename':          sessions.rename(msg); break;
-      case 'close':           sessions.close(msg); break;
+      case 'close':           sessions.close(msg, cfg); break;
 
       case 'config.get':
-        ws.send(JSON.stringify({ type: 'config', config: cfg }));
+        ws.send(JSON.stringify({ type: 'config', config: configForClient() }));
         break;
 
       case 'checkAvailability':
@@ -98,10 +124,11 @@ function onConnection(ws) {
         break;
 
       case 'config.update':
+        delete msg.config.pluginsDir;
         cfg = { ...cfg, ...msg.config };
         detectTelemetryConfig(cfg);
         config.save(cfg);
-        sessions.broadcast({ type: 'config', config: cfg });
+        sessions.broadcast({ type: 'config', config: configForClient() });
         break;
 
       case 'session.theme': {
@@ -129,7 +156,7 @@ function onConnection(ws) {
           }
         }
         config.save(cfg);
-        sessions.broadcast({ type: 'config', config: cfg });
+        sessions.broadcast({ type: 'config', config: configForClient() });
         ws.send(JSON.stringify({
           type: 'telemetry.autosetup.result',
           presetId: msg.presetId,
@@ -159,7 +186,7 @@ function onConnection(ws) {
           }
         }
         config.save(cfg);
-        sessions.broadcast({ type: 'config', config: cfg });
+        sessions.broadcast({ type: 'config', config: configForClient() });
         break;
       }
 
@@ -185,11 +212,11 @@ function onConnection(ws) {
         if (!proj) break;
         // Kill all sessions in this project
         for (const s of sessions.list()) {
-          if (s.projectId === msg.id) sessions.close({ id: s.id });
+          if (s.projectId === msg.id) sessions.close({ id: s.id }, cfg);
         }
         cfg.projects = cfg.projects.filter(p => p.id !== msg.id);
         config.save(cfg);
-        sessions.broadcast({ type: 'config', config: cfg });
+        sessions.broadcast({ type: 'config', config: configForClient() });
         break;
       }
 
@@ -207,6 +234,55 @@ function onConnection(ws) {
         sessions.broadcast({ type: 'plugins', list: plugins.getInfo() });
         break;
 
+      case 'remote.status': {
+        let installed = false;
+        try { execFileSync(whichCmd, ['clideck-remote'], { stdio: 'ignore' }); installed = true; } catch {}
+        if (!installed) { ws.send(JSON.stringify({ type: 'remote.status', installed: false })); break; }
+        require('child_process').execFile('clideck-remote', ['status', '--json'], { timeout: 5000 }, (err, stdout) => {
+          if (err) { ws.send(JSON.stringify({ type: 'remote.status', installed: true })); return; }
+          try { ws.send(JSON.stringify({ type: 'remote.status', installed: true, ...JSON.parse(stdout) })); }
+          catch { ws.send(JSON.stringify({ type: 'remote.status', installed: true })); }
+        });
+        break;
+      }
+
+      case 'remote.pair': {
+        require('child_process').execFile('clideck-remote', ['pair', '--json'], { timeout: 15000 }, (err, stdout) => {
+          if (err) { ws.send(JSON.stringify({ type: 'remote.error', error: err.message })); return; }
+          try { ws.send(JSON.stringify({ type: 'remote.paired', ...JSON.parse(stdout) })); }
+          catch { ws.send(JSON.stringify({ type: 'remote.error', error: 'Invalid response from clideck-remote' })); }
+        });
+        break;
+      }
+
+      case 'remote.unpair': {
+        require('child_process').execFile('clideck-remote', ['unpair', '--json'], { timeout: 5000 }, (err) => {
+          if (err) {
+            ws.send(JSON.stringify({ type: 'remote.error', error: err.message }));
+          } else {
+            sessions.broadcast({ type: 'remote.unpaired' });
+          }
+        });
+        break;
+      }
+
+      case 'remote.getHistory': {
+        const turns = transcript.getScreenTurns(msg.id, sessions.getSessions().get(msg.id)?.presetId)
+          || transcript.getLastTurns(msg.id, msg.limit || 50);
+        ws.send(JSON.stringify({ type: 'remote.history', id: msg.id, turns: turns || [] }));
+        break;
+      }
+
+      case 'remote.install': {
+        const proc = require('child_process').spawn('npm', ['install', '-g', 'clideck-remote'], {
+          shell: true, stdio: ['ignore', 'pipe', 'pipe'],
+        });
+        proc.stdout.on('data', d => ws.send(JSON.stringify({ type: 'remote.install.progress', text: d.toString() })));
+        proc.stderr.on('data', d => ws.send(JSON.stringify({ type: 'remote.install.progress', text: d.toString() })));
+        proc.on('close', code => ws.send(JSON.stringify({ type: 'remote.install.done', success: code === 0 })));
+        break;
+      }
+
       default:
         if (msg.type?.startsWith('plugin.')) plugins.handleMessage(msg);
         break;
@@ -256,14 +332,13 @@ function applyTelemetryConfig(preset) {
     }
 
     if (preset.presetId === 'opencode') {
-      const pluginDir = join(home, '.config', 'opencode', 'plugins');
       const src = join(__dirname, 'opencode-plugin', 'clideck-bridge.js');
-      mkdirSync(pluginDir, { recursive: true });
-      copyFileSync(src, join(pluginDir, 'clideck-bridge.js'));
+      mkdirSync(opencodePluginDir, { recursive: true });
+      copyFileSync(src, join(opencodePluginDir, 'clideck-bridge.js'));
       // Remove old termix-bridge.js if present
-      const old = join(pluginDir, 'termix-bridge.js');
+      const old = join(opencodePluginDir, 'termix-bridge.js');
       if (existsSync(old)) try { unlinkSync(old); } catch {}
-      return { success: true, message: 'Installed bridge plugin to ~/.config/opencode/plugins/' };
+      return { success: true, message: `Installed bridge plugin to ${opencodePluginDir}` };
     }
 
     return { success: false, message: `No auto-setup for ${preset.presetId}` };
@@ -297,9 +372,8 @@ function removeTelemetryConfig(preset) {
     }
 
     if (preset.presetId === 'opencode') {
-      const dir = join(home, '.config', 'opencode', 'plugins');
-      try { unlinkSync(join(dir, 'clideck-bridge.js')); } catch {}
-      try { unlinkSync(join(dir, 'termix-bridge.js')); } catch {}
+      try { unlinkSync(join(opencodePluginDir, 'clideck-bridge.js')); } catch {}
+      try { unlinkSync(join(opencodePluginDir, 'termix-bridge.js')); } catch {}
       return { success: true, message: 'Removed bridge plugin' };
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clideck",
-  "version": "1.22.7",
+  "version": "1.23.1",
   "description": "One screen for all your AI coding agents — run, monitor, and manage multiple CLI agents from a single browser tab",
   "main": "server.js",
   "bin": {

package/plugin-loader.js

@@ -32,6 +32,7 @@ const plugins = new Map();
 const inputHooks = [];
 const outputHooks = [];
 const statusHooks = [];
+const transcriptHooks = [];
 const sessionStatus = new Map(); // sessionId → boolean (dedup multi-client reports)
 const frontendHandlers = new Map();
 let broadcastFn = null;
@@ -41,7 +42,7 @@ let saveConfigFn = null;
 const settingsChangeHandlers = new Map(); // pluginId → [fn]
 
 function removeHooks(pluginId) {
-  for (const arr of [inputHooks, outputHooks, statusHooks]) {
+  for (const arr of [inputHooks, outputHooks, statusHooks, transcriptHooks]) {
     for (let i = arr.length - 1; i >= 0; i--) {
       if (arr[i].pluginId === pluginId) arr.splice(i, 1);
     }
@@ -111,6 +112,7 @@ function buildApi(pluginId, pluginDir, state) {
     onSessionInput(fn) { inputHooks.push({ pluginId, fn }); },
     onSessionOutput(fn) { outputHooks.push({ pluginId, fn }); },
     onStatusChange(fn) { statusHooks.push({ pluginId, fn }); },
+    onTranscriptEntry(fn) { transcriptHooks.push({ pluginId, fn }); },
 
     sendToFrontend(event, data = {}) {
       broadcastFn?.({ ...data, type: `plugin.${pluginId}.${event}` });
@@ -184,6 +186,13 @@ function notifyStatus(id, working) {
   }
 }
 
+function notifyTranscript(id, role, text) {
+  for (const h of transcriptHooks) {
+    try { h.fn(id, role, text); }
+    catch (e) { console.error(`[plugin:${h.pluginId}] transcript error: ${e.message}`); }
+  }
+}
+
 function updateSetting(pluginId, key, value) {
   // Validate plugin exists (also prevents __proto__ pollution — Map lookup returns undefined)
   const plugin = plugins.get(pluginId);
@@ -281,7 +290,8 @@ function shutdown() {
 function clearStatus(id) { sessionStatus.delete(id); }
 
 module.exports = {
+  PLUGINS_DIR,
   init, shutdown,
-  transformInput, notifyOutput, notifyStatus, clearStatus,
+  transformInput, notifyOutput, notifyStatus, notifyTranscript, clearStatus,
   handleMessage, updateSetting, getInfo, resolveFile,
 };

package/public/index.html

@@ -148,6 +148,9 @@
       <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4m0 12v4M2 12h4m12 0h4"/><circle cx="12" cy="12" r="3"/><path d="M12 8V6m0 12v-2M8 12H6m12 0h-2"/></svg>
     </button>
     <div class="flex-1"></div>
+    <button class="rail-btn w-9 h-9 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-800/50 transition-colors" id="btn-remote" title="Mobile Remote">
+      <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
+    </button>
     <button class="theme-toggle rail-btn w-9 h-9 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-800/50 transition-colors" id="btn-theme-toggle" title="Toggle light/dark mode">
       <svg class="icon-sun w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
       <svg class="icon-moon w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
@@ -338,6 +341,104 @@
 
     </div>
 
+    <!-- Remote modal -->
+    <div id="remote-modal" class="absolute inset-0 z-[260] bg-black/60 backdrop-blur-sm hidden items-center justify-center">
+      <div style="background:var(--color-dialog);border:1px solid color-mix(in srgb, var(--color-muted) 40%, transparent);box-shadow:0 25px 60px -12px var(--color-shadow)" class="rounded-2xl w-[340px] flex flex-col overflow-hidden">
+        <div class="px-5 py-3.5 flex items-center justify-between">
+          <span class="text-[13px] font-semibold text-slate-200">Mobile Remote</span>
+          <button id="remote-close" class="w-6 h-6 flex items-center justify-center rounded-md text-slate-500 hover:text-slate-300 hover:bg-slate-700/50 transition-colors">
+            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+          </button>
+        </div>
+
+        <!-- Intro (not installed) -->
+        <div id="remote-intro" class="hidden px-6 py-6 flex flex-col items-center gap-4">
+          <svg class="w-12 h-12 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
+          <h3 class="text-[13px] font-semibold text-slate-200">CliDeck Mobile Remote</h3>
+          <p class="text-xs text-slate-400 text-center leading-relaxed">Control your AI agents from your phone. See live status, send messages, and get notifications — all end-to-end encrypted.</p>
+          <button id="remote-add" class="mt-1 w-full px-4 py-2.5 text-[13px] font-medium bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors">Add to CliDeck</button>
+          <p class="text-[11px] text-slate-600 text-center">Installs the <code class="text-slate-500">clideck-remote</code> package via npm</p>
+        </div>
+
+        <!-- Installing -->
+        <div id="remote-installing" class="hidden px-5 py-4 flex flex-col gap-3">
+          <div class="flex items-center gap-2">
+            <svg class="w-4 h-4 animate-spin text-blue-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 2a10 10 0 0 1 10 10"/></svg>
+            <span class="text-xs text-slate-300">Installing clideck-remote…</span>
+          </div>
+          <pre id="remote-install-log" class="max-h-[160px] overflow-y-auto px-3 py-2 bg-slate-900/70 rounded-lg border border-slate-700/40 text-[11px] text-slate-400 font-mono leading-relaxed whitespace-pre-wrap"></pre>
+        </div>
+
+        <!-- Connecting -->
+        <div id="remote-connecting" class="hidden px-5 py-6 flex flex-col items-center gap-2">
+          <svg class="w-6 h-6 animate-spin text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 2a10 10 0 0 1 10 10"/></svg>
+          <span class="text-xs text-slate-400">Connecting to relay…</span>
+        </div>
+
+        <!-- QR / waiting for phone -->
+        <div id="remote-qr" class="hidden flex flex-col items-center w-full">
+          <div id="remote-url-box" class="hidden"></div>
+          <div class="py-6 px-6 flex flex-col items-center w-full">
+            <p class="text-sm font-medium text-slate-300 mb-4">Scan with your phone</p>
+            <img id="remote-qr-img" class="w-[180px] h-[180px] rounded-2xl hidden" alt="QR code" style="padding:12px;background:white">
+            <p class="mt-4 text-xs text-slate-400">or <button id="remote-copy" class="font-semibold underline underline-offset-2 text-slate-300 hover:text-slate-200 transition-colors">copy the link</button> to open on your device</p>
+            <div class="mt-5 w-full px-4 py-3 rounded-lg text-center" style="background:color-mix(in srgb, var(--color-surface) 70%, transparent)">
+              <div class="flex items-center justify-center gap-1.5">
+                <span id="remote-plan-badge" class="text-[9px] font-semibold uppercase tracking-wider px-1.5 py-px rounded-full bg-slate-700 text-slate-400">Free</span>
+                <span class="text-[11px] text-slate-500">&middot; 1 active session</span>
+              </div>
+              <p class="mt-1 text-[11px] text-slate-500"><a id="remote-upgrade" href="https://clideck.dev/pro" target="_blank" class="text-blue-400 hover:text-blue-300 transition-colors">Upgrade to Pro</a> for unlimited sessions</p>
+            </div>
+            <button id="remote-disconnect" class="mt-3 w-full py-2 text-[11px] text-slate-500 hover:text-slate-400 transition-colors">Disconnect</button>
+          </div>
+          <div class="w-full border-t border-slate-700/40 px-6 py-3 flex items-center justify-center gap-1.5 text-slate-400">
+            <svg class="w-3 h-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+            <span class="text-[11px] font-medium">Your sessions are end-to-end encrypted</span>
+          </div>
+        </div>
+
+        <!-- Paired / active -->
+        <div id="remote-active" class="hidden flex flex-col items-center w-full">
+          <div class="py-6 px-6 flex flex-col items-center w-full gap-4">
+            <div class="flex items-center gap-2 text-emerald-400">
+              <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg>
+              <span class="text-[13px] font-medium">Connected</span>
+            </div>
+            <p id="remote-device-info" class="text-[11px] text-slate-500 -mt-2"></p>
+
+            <div id="remote-stats" class="w-full grid grid-cols-2 gap-2 text-center">
+              <div class="px-3 py-2.5 rounded-lg" style="background:color-mix(in srgb, var(--color-surface) 70%, transparent)">
+                <div id="remote-stat-time" class="text-sm font-mono text-slate-200">0:00</div>
+                <div class="text-[10px] text-slate-500 uppercase tracking-wider mt-0.5">Connected</div>
+              </div>
+              <div class="px-3 py-2.5 rounded-lg" style="background:color-mix(in srgb, var(--color-surface) 70%, transparent)">
+                <div id="remote-stat-sessions" class="text-sm font-mono text-slate-200">0</div>
+                <div class="text-[10px] text-slate-500 uppercase tracking-wider mt-0.5">Sessions</div>
+              </div>
+            </div>
+
+            <button id="remote-disconnect2" class="w-full py-2.5 text-[11px] font-medium text-red-400 hover:text-red-300 rounded-lg transition-colors" style="background:color-mix(in srgb, var(--color-surface) 70%, transparent)">Disconnect</button>
+          </div>
+          <div class="w-full border-t border-slate-700/40 px-6 py-3 flex items-center justify-between">
+            <div class="flex items-center gap-1.5 text-emerald-500/70">
+              <svg class="w-3 h-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+              <span class="text-[11px]">End-to-end encrypted</span>
+            </div>
+            <div id="remote-plan-active" class="flex items-center gap-1.5">
+              <span id="remote-plan-badge2" class="text-[9px] font-semibold uppercase tracking-wider px-1.5 py-px rounded-full bg-slate-700 text-slate-400">Free</span>
+              <a id="remote-upgrade2" href="https://clideck.dev/pro" target="_blank" class="text-[11px] text-blue-400 hover:text-blue-300 transition-colors">Upgrade</a>
+            </div>
+          </div>
+        </div>
+
+        <!-- Error -->
+        <div id="remote-error" class="hidden px-5 py-4 flex flex-col items-center gap-3">
+          <p id="remote-error-text" class="text-xs text-red-400 text-center"></p>
+          <button id="remote-error-dismiss" class="px-4 py-2 text-xs text-slate-400 hover:text-slate-300 transition-colors">Close</button>
+        </div>
+      </div>
+    </div>
+
     <!-- Confirmation dialog -->
     <div id="confirm-close" class="absolute inset-0 z-[250] bg-black/60 backdrop-blur-sm hidden items-center justify-center">
       <div class="bg-slate-800 border border-slate-600 rounded-xl shadow-2xl shadow-black/50 w-80 flex flex-col">