v2: Forge Console + Open WebUI artifacts + Docker

- web/: Local chat UI (Express + WS → Codex bridge) - openwebui/: Preset, pipelines, knowledge manifest - Dockerfile + docker-compose.yml - Updated README with 3 frontend options - CLI-agnostic: works with Codex, Claude Code, Kiro, Gemini
2026-02-27 06:56:34 +00:00
commit df667e0db8
38 changed files with 3206 additions and 0 deletions
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Forge Console</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div id="app">
+    <header id="status-bar">
+      <span class="logo">🔥 Forge Console</span>
+      <span id="conn-status"><span class="dot red"></span> Disconnected</span>
+    </header>
+    <main id="messages"></main>
+    <footer id="input-bar">
+      <textarea id="input" placeholder="Ask anything..." rows="1"></textarea>
+      <button id="send" title="Send">➤</button>
+    </footer>
+  </div>
+  <script>
+    const messages = document.getElementById('messages');
+    const input = document.getElementById('input');
+    const sendBtn = document.getElementById('send');
+    const connStatus = document.getElementById('conn-status');
+
+    let ws;
+    let currentAssistant = null;
+
+    function setStatus(connected) {
+      connStatus.innerHTML = connected
+        ? '<span class="dot green"></span> Connected'
+        : '<span class="dot red"></span> Disconnected';
+    }
+
+    function scrollBottom() {
+      messages.scrollTop = messages.scrollHeight;
+    }
+
+    function addMessage(role, text) {
+      const div = document.createElement('div');
+      div.className = `msg ${role}`;
+      div.textContent = text;
+      messages.appendChild(div);
+      scrollBottom();
+      return div;
+    }
+
+    function addThinking() {
+      const div = document.createElement('div');
+      div.className = 'msg assistant thinking';
+      div.innerHTML = '<span class="dots"><span>.</span><span>.</span><span>.</span></span>';
+      messages.appendChild(div);
+      scrollBottom();
+      return div;
+    }
+
+    function connect() {
+      const proto = location.protocol === 'https:' ? 'wss' : 'ws';
+      ws = new WebSocket(`${proto}://${location.host}/ws`);
+
+      ws.onopen = () => {
+        setStatus(true);
+        currentAssistant = null;
+      };
+
+      ws.onclose = () => {
+        setStatus(false);
+        currentAssistant = null;
+        setTimeout(connect, 2000);
+      };
+
+      ws.onmessage = (e) => {
+        let msg;
+        try { msg = JSON.parse(e.data); } catch { return; }
+
+        if (msg.type === 'stdout' || msg.type === 'stderr') {
+          // Remove thinking indicator if present
+          const thinking = messages.querySelector('.thinking');
+          if (thinking) thinking.remove();
+
+          if (!currentAssistant) {
+            currentAssistant = addMessage('assistant', '');
+          }
+          currentAssistant.textContent += msg.data;
+          scrollBottom();
+        } else if (msg.type === 'exit') {
+          addMessage('system', `Session ended (code ${msg.code}). Refresh to restart.`);
+          currentAssistant = null;
+        } else if (msg.type === 'error') {
+          addMessage('system', `Error: ${msg.data}`);
+          currentAssistant = null;
+        }
+      };
+    }
+
+    function send() {
+      const text = input.value.trim();
+      if (!text || !ws || ws.readyState !== 1) return;
+
+      addMessage('user', text);
+      currentAssistant = null;
+      addThinking();
+      ws.send(text);
+      input.value = '';
+      input.style.height = 'auto';
+    }
+
+    sendBtn.addEventListener('click', send);
+
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        send();
+      }
+    });
+
+    // Auto-resize textarea
+    input.addEventListener('input', () => {
+      input.style.height = 'auto';
+      input.style.height = Math.min(input.scrollHeight, 120) + 'px';
+    });
+
+    connect();
+  </script>
+</body>
+</html>