Container Conduit - 02-terminal-exec.html

Overview Files Skills Packages Releases Dependencies Issues Breadcrumbs Pull Requests Activity
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125
<!DOCTYPE html>
<html lang="en">
<head><script>(function(){var n=0;function show(p,m){var el=document.createElement('div');el.style.cssText='position:fixed;left:0;right:0;background:#e04040;color:#fff;padding:6px 12px;z-index:'+(99999-n)+';font:13px/1.4 monospace;white-space:pre-wrap;border-bottom:1px solid #b02020;top:'+n*30+'px';el.textContent=p+m;document.body.appendChild(el);n++}window.onerror=function(msg,src,line){show('ERROR '+(src||'').split('/').pop()+':'+line+' \u2014 ',msg)};window.addEventListener('unhandledrejection',function(e){show('REJECT \u2014 ',e.reason&&e.reason.message||e.reason||'unknown')})})()</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  :root {
    --bg: #0d1117; --bg-surface: #161b22; --bg-elevated: #1c2128;
    --border: #30363d; --border-muted: #21262d;
    --text: #e6edf3; --text-secondary: #8b949e; --text-muted: #484f58;
    --accent: #00b8b0; --accent-bright: #00e6dc; --accent-muted: rgba(0,184,176,0.12);
    --success: #3fb950; --warning: #d29922; --danger: #f85149;
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'Cascadia Code', Consolas, monospace;
    --radius-sm: 4px; --radius-md: 6px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: var(--bg); color: var(--text); font-family: var(--font); height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
  .header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-surface); }
  .header h1 { font-size: 16px; font-weight: 600; color: var(--accent); }
  .header .count { font-size: 13px; color: var(--text-secondary); margin-left: auto; }
  .header .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: pulse 2s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
  .main { display: flex; flex: 1; overflow: hidden; }
  .panel-left { width: 320px; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
  .section-title { padding: 10px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border-muted); }
  .container-list { flex: 1; overflow-y: auto; padding: 8px; }
  .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 6px; }
  .card.selected { border-color: var(--accent); background: var(--accent-muted); }
  .card .name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
  .card .name .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
  .card .meta { font-size: 11px; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }
  .panel-right { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
  .tab-bar { display: flex; border-bottom: 1px solid var(--border); background: var(--bg-surface); }
  .tab { padding: 8px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; }
  .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
  .command-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--bg-surface); }
  .command-bar select { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 13px; }
  .command-bar input { flex: 1; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 13px; font-family: var(--font-mono); }
  .command-bar button { background: var(--accent); color: var(--bg); border: none; border-radius: var(--radius-sm); padding: 6px 14px; font-size: 13px; font-weight: 600; }
  .output { flex: 1; overflow-y: auto; padding: 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; }
  .entry { margin-bottom: 12px; }
  .cmd-target { color: var(--text-secondary); }
  .cmd-line { color: var(--accent); font-weight: 600; }
  .stdout { color: var(--text); white-space: pre-wrap; }
  .exit-code { color: var(--text-muted); }
  .bottom-bar { border-top: 1px solid var(--border); background: var(--bg-surface); padding: 10px 12px; }
  .bottom-bar .label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 6px; }
  .install-row { display: flex; gap: 8px; align-items: center; }
  .install-row code { flex: 1; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; font-family: var(--font-mono); font-size: 12px; color: var(--accent); white-space: nowrap; }
  .install-row .btn-sm { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 12px; }
  .demo-note { text-align: center; padding: 6px; font-size: 10px; color: var(--text-muted); background: var(--bg); border-top: 1px solid var(--border-muted); }
</style>
</head>
<body>
<div class="header">
  <div class="dot"></div>
  <h1>Container Conduit</h1>
  <span class="count">3 containers</span>
</div>
<div class="main">
  <div class="panel-left">
    <div class="section-title">Connected Containers</div>
    <div class="container-list">
      <div class="card selected">
        <div class="name"><span class="dot"></span>service-test1</div>
        <div class="meta">adom-test1 &middot; 10.0.4.12<br>Connected 2h ago &middot; exec, file, status, pty</div>
      </div>
      <div class="card">
        <div class="name"><span class="dot"></span>service-chess</div>
        <div class="meta">adom-chess &middot; 10.0.4.18<br>Connected 45m ago &middot; exec, file, status, pty</div>
      </div>
      <div class="card">
        <div class="name"><span class="dot"></span>service-api</div>
        <div class="meta">adom-api &middot; 10.0.4.22<br>Connected 12m ago &middot; exec, file, status, pty</div>
      </div>
    </div>
  </div>
  <div class="panel-right">
    <div class="tab-bar">
      <div class="tab active">Terminal</div>
      <div class="tab">Shell</div>
      <div class="tab">Claude Prompts</div>
    </div>
    <div class="command-bar">
      <select><option>All containers</option><option selected>service-test1</option></select>
      <input type="text" value="free -h" style="font-family: 'SF Mono', Consolas, monospace;" />
      <button>Run</button>
    </div>
    <div class="output">
      <div class="entry">
        <div><span class="cmd-target">[*]</span> <span class="cmd-line">$ uname -a</span></div>
        <div class="stdout">[service-test1] Linux adom-test1 6.8.0-87-generic #87-Ubuntu SMP x86_64 GNU/Linux
[service-chess] Linux adom-chess 6.8.0-87-generic #87-Ubuntu SMP x86_64 GNU/Linux
[service-api] Linux adom-api 6.8.0-87-generic #87-Ubuntu SMP x86_64 GNU/Linux</div>
        <div class="exit-code">exit 0 (all)</div>
      </div>
      <div class="entry">
        <div><span class="cmd-target">[service-test1]</span> <span class="cmd-line">$ df -h /</span></div>
        <div class="stdout">Filesystem      Size  Used Avail Use% Mounted on
/dev/sda1        50G   12G   35G  26% /</div>
        <div class="exit-code">exit 0</div>
      </div>
      <div class="entry">
        <div><span class="cmd-target">[service-test1]</span> <span class="cmd-line">$ ps aux | head -5</span></div>
        <div class="stdout">USER         PID %CPU %MEM    VSZ   RSS TTY      STAT START   TIME COMMAND
root           1  0.0  0.0   4624  3456 ?        Ss   08:00   0:01 /sbin/init
adom         142  0.1  0.3 746284 52480 ?        Sl   08:01   0:15 node agent.js
adom         287  0.0  0.1 621432 18720 ?        Sl   08:02   0:03 node server.js
root         312  0.0  0.0  72316  6400 ?        Ss   08:00   0:00 /usr/sbin/sshd</div>
        <div class="exit-code">exit 0</div>
      </div>
    </div>
  </div>
</div>
<div class="bottom-bar">
  <div class="label">One-line install for satellite containers</div>
  <div class="install-row">
    <code>curl -sL http://10.0.4.5:8800/agent/install | CC_NAME=my-service bash</code>
    <div class="btn-sm">Copy</div>
  </div>
</div>
<div class="demo-note">Demo — simulated data</div>
</body>
</html>