skill
Container Conduit
Public UnreviewedWebSocket bridge connecting a main Gallia container to satellite Adom containers — remote command execution, persistent shell sessions, file transfer, system monitoring, and an interactive terminal da
← Commit history
01-dashboard-connected.htmladded+116@@ -0,0 +1,116 @@+<!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); } + .shell-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg-surface); font-size: 12px; } + .shell-toolbar select { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; font-size: 12px; } + .btn-shell { background: var(--danger); color: var(--bg); border: none; border-radius: var(--radius-sm); padding: 4px 12px; font-size: 12px; font-weight: 600; } + .shell-status { margin-left: auto; color: var(--success); font-size: 12px; } + .terminal { flex: 1; background: #0d1117; padding: 12px; font-family: var(--font-mono); font-size: 13px; line-height: 1.5; overflow: hidden; } + .terminal .prompt { color: var(--success); } + .terminal .cmd { color: var(--text); } + .terminal .output { color: var(--text-secondary); } + .terminal .dir { color: #58a6ff; } + .terminal .cursor { background: var(--text); width: 8px; height: 16px; display: inline-block; animation: blink 1s step-end infinite; } + @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} } + .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; overflow-x: auto; } + .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 · 10.0.4.12<br>Connected 2h ago · exec, file, status, pty</div> + </div> + <div class="card"> + <div class="name"><span class="dot"></span>service-chess</div> + <div class="meta">adom-chess · 10.0.4.18<br>Connected 45m ago · exec, file, status, pty</div> + </div> + <div class="card"> + <div class="name"><span class="dot"></span>service-api</div> + <div class="meta">adom-api · 10.0.4.22<br>Connected 12m ago · exec, file, status, pty</div> + </div> + </div> + </div> + <div class="panel-right"> + <div class="tab-bar"> + <div class="tab">Terminal</div> + <div class="tab active">Shell</div> + <div class="tab">Claude Prompts</div> + </div> + <div class="shell-toolbar"> + <select><option>service-test1</option></select> + <div class="btn-shell">Disconnect</div> + <span class="shell-status">Connected to service-test1</span> + </div> + <div class="terminal"> + <div><span class="prompt">adom@service-test1</span>:<span class="dir">~/project</span>$ <span class="cmd">ls -la</span></div> + <div class="output">total 48 +drwxr-xr-x 6 adom adom 4096 Mar 5 10:23 . +drwxr-xr-x 4 adom adom 4096 Mar 1 08:00 .. +drwxr-xr-x 8 adom adom 4096 Mar 5 10:23 .git +-rw-r--r-- 1 adom adom 245 Mar 1 08:00 package.json +drwxr-xr-x 3 adom adom 4096 Mar 3 14:12 src +-rw-r--r-- 1 adom adom 1847 Mar 5 09:45 server.js +drwxr-xr-x 2 adom adom 4096 Mar 4 16:30 tests</div> + <div><span class="prompt">adom@service-test1</span>:<span class="dir">~/project</span>$ <span class="cmd">node --version</span></div> + <div class="output">v20.11.1</div> + <div><span class="prompt">adom@service-test1</span>:<span class="dir">~/project</span>$ <span class="cursor"></span></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>