feat: scaffold HTML v2 — full-width desktop layout, no terminal panel

2026-03-30 07:28:54 -04:00
parent 9755828ae4
commit 918261c3a5
1 changed files with 131 additions and 0 deletions
@@ -0,0 +1,131 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>{{TITLE}}</title>
 <style>
  :root {
    --bg: #0a0f0c;
    --panel-bg: #111a15;
    --border: #2a3a2e;
    --text: #aaccaa;
    --text-dim: #557755;
    --accent: #33ff66;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: monospace;
    font-size: 14px;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  #content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
  }
  #log-feed {
    border-top: 1px solid var(--border);
    padding: 8px 12px;
    max-height: 200px;
    overflow-y: auto;
  }
  #log-feed h3 {
    color: var(--text-dim);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .log-entry {
    font-size: 12px;
    color: var(--text-dim);
    padding: 2px 0;
  }
  .log-entry .log-time {
    color: var(--accent);
    margin-right: 8px;
  }
  #status {
    background: var(--panel-bg);
    border-top: 1px solid var(--border);
    padding: 4px 12px;
    font-size: 11px;
    color: var(--text-dim);
  }
  #status.connected { color: var(--accent); }
 </style>
 </head>
 <body>
  <div id="content">
    <h1 style="color: var(--accent); font-size: 18px;">{{TITLE}}</h1>
    <p style="color: var(--text-dim); margin-top: 8px;">{{DESCRIPTION}}</p>
    <p style="color: var(--text-dim); margin-top: 16px;">Waiting for content...</p>
  </div>
  <div id="log-feed">
    <h3>Session Log</h3>
    <div id="log-entries"></div>
  </div>
  <div id="status">Connecting...</div>
 <script>
 const WS_URL = `ws://${location.host}/ws`;
 let ws;
 function connect() {
  ws = new WebSocket(WS_URL);
  ws.onopen = () => {
    document.getElementById('status').textContent = 'Connected';
    document.getElementById('status').className = 'connected';
  };
  ws.onclose = () => {
    document.getElementById('status').textContent = 'Disconnected — reconnecting...';
    document.getElementById('status').className = '';
    setTimeout(connect, 2000);
  };
  ws.onmessage = (e) => {
    const msg = JSON.parse(e.data);
    if (msg.type === 'state') handleState(msg.state);
    if (msg.type === 'log') handleLog(msg.entry);
  };
 }
 function handleState(state) {
  if (state.template) {
    document.getElementById('content').innerHTML = state.template;
  }
  if (state.styles) {
    let el = document.getElementById('dynamic-styles');
    if (!el) { el = document.createElement('style'); el.id = 'dynamic-styles'; document.head.appendChild(el); }
    el.textContent = state.styles;
  }
  if (state.script) {
    try { new Function(state.script)(); } catch(e) { console.error('Script error:', e); }
  }
  window.__workbench_state = state;
  try { localStorage.setItem('workbench-state', JSON.stringify(state)); } catch(e) {}
 }
 function handleLog(entry) {
  const div = document.createElement('div');
  div.className = 'log-entry';
  const time = new Date().toLocaleTimeString();
  div.innerHTML = `<span class="log-time">${time}</span>${entry}`;
  const feed = document.getElementById('log-entries');
  feed.appendChild(div);
  feed.scrollTop = feed.scrollHeight;
 }
 try {
  const saved = JSON.parse(localStorage.getItem('workbench-state'));
  if (saved) handleState(saved);
 } catch(e) {}
 connect();
 </script>
 </body>
 </html>