From 8c3ecc02c898f1aa13a16fb8d9fd3f48aff393af Mon Sep 17 00:00:00 2001
From: Alexander Whitestone <alexpaynex@gmail.com>
Date: Sun, 12 Apr 2026 20:31:19 -0400
Subject: [PATCH] Add web frontend + README

web/index.html: Browser chat interface (48 lines, dark theme)
README.md: Architecture, API reference, quick start, crisis protocol
---
 web/index.html | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 web/index.html
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 00000000..b30975be
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>MUD Bridge</title>
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:'Courier New',monospace;background:#1a1a2e;color:#e0e0e0;display:flex;height:100vh}
+#sidebar{width:220px;background:#16213e;padding:16px;display:flex;flex-direction:column;gap:12px;border-right:1px solid #0f3460}
+#sidebar h2{color:#e94560;font-size:16px}
+#sidebar label{font-size:12px;color:#a0a0a0}
+#sidebar input,#sidebar select{background:#0f3460;color:#e0e0e0;border:1px solid #533483;padding:8px;font-family:inherit;font-size:13px;border-radius:4px}
+#main{flex:1;display:flex;flex-direction:column}
+#room-header{background:#16213e;padding:12px 16px;border-bottom:1px solid #0f3460;font-size:14px;color:#e94560}
+#messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
+.msg{padding:8px 12px;border-radius:6px;max-width:80%;font-size:13px;line-height:1.4}
+.msg.user{background:#533483;align-self:flex-end;text-align:right}
+.msg.system{background:#0f3460;align-self:center;text-align:center;color:#a0a0a0;font-size:11px;max-width:100%}
+.msg.bot{background:#1a3a5c;align-self:flex-start}
+.msg .nick{font-weight:bold;font-size:11px;margin-bottom:2px}
+.msg.user .nick{color:#c8a0e8}.msg.bot .nick{color:#e94560}
+#input-bar{display:flex;padding:12px;gap:8px;background:#16213e;border-top:1px solid #0f3460}
+#msg-input{flex:1;background:#0f3460;color:#e0e0e0;border:1px solid #533483;padding:10px;font-family:inherit;font-size:13px;border-radius:4px}
+#send-btn{background:#e94560;color:#fff;border:none;padding:10px 20px;font-family:inherit;font-size:13px;cursor:pointer;border-radius:4px}
+#send-btn:hover{background:#c73e54}#send-btn:disabled{background:#666;cursor:not-allowed}
+</style>
+</head>
+<body>
+<div id="sidebar">
+  <h2>== MUD Bridge ==</h2>
+  <label>Username</label><input id="username" placeholder="Your name" value="Adventurer">
+  <label>Room</label>
+  <select id="room"><option>The Tower</option><option>The Garden</option><option>The Forge</option><option>The Bridge</option><option>The Threshold</option></select>
+</div>
+<div id="main">
+  <div id="room-header">Room: <span id="room-name">The Tower</span></div>
+  <div id="messages"><div class="msg system">Welcome to the MUD Bridge.</div></div>
+  <div id="input-bar"><input id="msg-input" placeholder="Say something..." autocomplete="off"><button id="send-btn">Send</button></div>
+</div>
+<script>
+const $=id=>document.getElementById(id),messages=$('messages'),input=$('msg-input'),btn=$('send-btn'),API='http://127.0.0.1:4004/bridge/chat';
+$('room').onchange=()=>{$('room-name').textContent=$('room').value;addMsg('system','','--- Entered '+$('room').value+' ---')};
+function addMsg(t,nick,text){const d=document.createElement('div');d.className='msg '+t;const e=document.createElement('span');e.textContent=text;const safe=e.innerHTML;e.textContent=nick;d.innerHTML=nick?'<div class="nick">'+e.innerHTML+'</div>'+safe:safe;messages.appendChild(d);messages.scrollTop=messages.scrollHeight}
+async function send(){const text=input.value.trim();if(!text)return;const username=$('username').value.trim()||'Adventurer',room=$('room').value;addMsg('user',username,text);input.value='';btn.disabled=true;btn.textContent='...';try{const r=await fetch(API,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({username,room,message:text})});const d=await r.json();addMsg('bot','Timmy',d.response||d.message||JSON.stringify(d))}catch(e){addMsg('system','','Error: '+e.message)}finally{btn.disabled=false;btn.textContent='Send';input.focus()}}
+btn.onclick=send;input.onkeydown=e=>{if(e.key==='Enter')send()};input.focus();
+</script>
+</body>
+</html>
