df667e0db8
- 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
128 lines
3.6 KiB
HTML
128 lines
3.6 KiB
HTML
<!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>
|