First commit

.gitignore

@@ -31,3 +31,4 @@ Thumbs.db
 
 # RAG index files
 .faiss/
+/backup

app/templates/base.html

@@ -4,34 +4,208 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>matrix-ai</title>
+
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+
   <style>
-    :root { --bg:#0b1220; --card:#0f172a; --muted:#94a3b8; --text:#e2e8f0; --accent:#38bdf8; }
-    body { margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--text); }
-    header { padding:20px; display:flex; gap:16px; align-items:center; border-bottom:1px solid #1f2a44; }
-    a { color: var(--accent); text-decoration: none; }
-    .wrap { max-width: 980px; margin: 0 auto; padding: 24px; }
-    .card { background:var(--card); border:1px solid #1f2a44; border-radius: 16px; padding: 20px; }
-    input, textarea { width: 100%; background:#0b1220; color:var(--text); border:1px solid #1f2a44; border-radius:12px; padding:12px; font-size:14px; }
-    button { background: var(--accent); color:#06202a; border:0; padding:10px 16px; border-radius: 12px; font-weight: 600; cursor:pointer; }
-    pre { background:#0b1220; border:1px solid #1f2a44; padding:12px; border-radius:12px; overflow:auto; }
-    nav a { margin-right: 16px; }
+    :root {
+      --bg: #020402;
+      --bg2: #071007;
+      --text: #c8facc;
+      --muted: #7ef7a7;
+      --matrix: #00ff9c;
+      --matrix-dim: #00b86b;
+      --card: #061006cc; /* translucent */
+      --border: #0d1e0f;
+    }
+
+    html, body { height: 100%; }
+    body {
+      margin: 0;
+      color: var(--text);
+      background:
+        radial-gradient(1200px 800px at 100% -10%, rgba(0,255,156,0.06), transparent 40%),
+        radial-gradient(1000px 600px at -10% 100%, rgba(0,255,156,0.05), transparent 40%),
+        linear-gradient(180deg, var(--bg), var(--bg2) 60%, var(--bg));
+      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+      overflow-y: auto;
+    }
+
+    /* Subtle scanlines */
+    body::after {
+      content: "";
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      background: repeating-linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0.06) 0px,
+        rgba(0, 0, 0, 0.06) 1px,
+        transparent 2px,
+        transparent 3px
+      );
+      mix-blend-mode: overlay;
+      opacity: 0.6;
+      z-index: 0;
+    }
+
+    /* Code rain canvas (behind everything) */
+    #code-rain {
+      position: fixed;
+      inset: 0;
+      width: 100vw;
+      height: 100vh;
+      z-index: 0;
+      pointer-events: none;
+      opacity: 0.65; /* keep it subtle */
+    }
+
+    header {
+      position: sticky; top: 0; z-index: 3;
+      display: flex; align-items: center; gap: 18px;
+      padding: 18px 22px;
+      background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0));
+      border-bottom: 1px solid var(--border);
+      backdrop-filter: blur(4px);
+    }
+    .brand {
+      font-family: "Share Tech Mono", monospace;
+      color: var(--matrix);
+      text-shadow: 0 0 8px rgba(0,255,156,0.4);
+      letter-spacing: 0.04em;
+      font-size: 18px;
+    }
+    nav a {
+      color: var(--muted);
+      text-decoration: none;
+      margin-right: 16px;
+      transition: color .15s ease, text-shadow .15s ease;
+    }
+    nav a:hover {
+      color: var(--matrix);
+      text-shadow: 0 0 8px rgba(0,255,156,0.4);
+    }
+
+    .wrap { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; padding: 26px 22px 60px; }
+    .card {
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      box-shadow: 0 0 0 1px rgba(0,255,156,0.06), 0 8px 30px rgba(0,0,0,0.35);
+      padding: 20px;
+    }
+    h2, h3, h4 { font-family: "Share Tech Mono", monospace; color: var(--matrix); letter-spacing: .02em; }
+    p { color: var(--text); opacity: 0.95; }
+
+    input, textarea {
+      width: 100%;
+      color: var(--text);
+      background: #020a04;
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 12px 12px;
+      font-size: 14px;
+      font-family: "Share Tech Mono", monospace;
+      outline: none;
+      transition: border-color .15s ease, box-shadow .15s ease;
+    }
+    input:focus, textarea:focus {
+      border-color: var(--matrix);
+      box-shadow: 0 0 0 3px rgba(0,255,156,0.08), 0 0 12px rgba(0,255,156,0.25) inset;
+    }
+
+    button {
+      background: linear-gradient(180deg, #00ff9c, #00c97e);
+      color: #002f1b;
+      border: 0;
+      padding: 10px 16px;
+      border-radius: 12px;
+      font-weight: 700;
+      font-family: "Share Tech Mono", monospace;
+      letter-spacing: 0.03em;
+      cursor: pointer;
+      box-shadow: 0 6px 20px rgba(0,255,156,0.25);
+      transition: transform .05s ease, box-shadow .15s ease, filter .15s ease;
+    }
+    button:hover { filter: brightness(1.05); box-shadow: 0 10px 30px rgba(0,255,156,0.35); }
+    button:active { transform: translateY(1px); }
+
+    pre, code {
+      font-family: "Share Tech Mono", monospace;
+      background: #020a04;
+      border: 1px solid var(--border);
+      border-radius: 12px;
+    }
+    pre { padding: 12px; overflow: auto; }
+
+    @keyframes glow {
+      0%, 100% { text-shadow: 0 0 10px rgba(0,255,156,0.12); }
+      50%       { text-shadow: 0 0 14px rgba(0,255,156,0.28); }
+    }
+    h3 { animation: glow 3.5s ease-in-out infinite; }
   </style>
 </head>
 <body>
+  <canvas id="code-rain"></canvas>
+
   <header>
-    <strong>matrix-ai</strong>
+    <div class="brand">MATRIX-AI</div>
     <nav>
-      <a href="/">Home</a>
       <a href="/chat">Chat</a>
       <a href="/dev">Dev</a>
       <a href="/docs" target="_blank" rel="noreferrer">API Docs</a>
     </nav>
   </header>
+
   <div class="wrap">
     {% block body %}{% endblock %}
   </div>
+
+  <script>
+    // Lightweight "Matrix" code rain — tuned for Spaces
+    (function () {
+      const c = document.getElementById('code-rain');
+      const ctx = c.getContext('2d', { alpha: true });
+      let w, h, cols, drops;
+      const fontSize = 20;      // <-- CHANGED: Increased from 16 to 20
+      const charSet = 'アァカサタナハマヤラワ0123456789アイウエオｱｲｳｴｵ01';
+
+      function resize() {
+        w = c.width = window.innerWidth;
+        h = c.height = window.innerHeight;
+        cols = Math.floor(w / fontSize);
+        drops = Array(cols).fill(0).map(() => Math.floor(Math.random() * -50));
+        ctx.font = fontSize + "px 'Share Tech Mono', monospace";
+      }
+
+      function draw() {
+        // translucent rect to create trail effect
+        ctx.fillStyle = 'rgba(2, 10, 4, 0.10)';
+        ctx.fillRect(0, 0, w, h);
+
+        for (let i = 0; i < cols; i++) {
+          const x = i * fontSize;
+          const y = drops[i] * fontSize;
+          const ch = charSet[Math.floor(Math.random() * charSet.length)];
+          // leading glow + core
+          ctx.shadowColor = 'rgba(0,255,156,0.35)';
+          ctx.shadowBlur = 8;
+          ctx.fillStyle = '#00ff9c';
+          ctx.fillText(ch, x, y);
+
+          // advance
+          if (y > h && Math.random() > 0.975) drops[i] = 0;
+          else drops[i]++;
+        }
+        setTimeout(draw, 70); // <-- CHANGED: Replaced requestAnimationFrame for slower speed
+      }
+
+      window.addEventListener('resize', resize);
+      resize();
+      draw(); // Start the animation
+    })();
+  </script>
 </body>
-</html>
+</html>

app/templates/chat.html

@@ -1,14 +1,129 @@
 {% extends "base.html" %}
 {% block body %}
   <div class="card">
-    <h3>Chat about Matrix System 1.0</h3>
-    <form method="post" style="display:grid; gap:12px;">
-      <textarea name="question" rows="4" placeholder="Ask anything about the Matrix EcoSystem, Guardian, or Hub...">{{ question or '' }}</textarea>
-      <div><button type="submit">Ask</button></div>
+    <h3>Chat — Matrix System 1.0</h3>
+
+    <!-- Messages -->
+    <div id="messages" style="margin-top:14px; display:flex; flex-direction:column; gap:10px; max-height:60vh; overflow:auto;">
+      <!-- Filled by JS from localStorage -->
+    </div>
+
+    <!-- Composer -->
+    <form id="chatForm" style="display:grid; gap:12px; margin-top:14px;">
+      <textarea id="question" rows="4" placeholder="Ask anything about Matrix EcoSystem, Guardian, or Hub..."></textarea>
+      <div style="display:flex; gap:10px; align-items:center;">
+        <button id="sendBtn" type="submit">Send</button>
+        <button id="clearBtn" type="button" style="background:#0c1d13; color:#7ef7a7; box-shadow:none; border:1px solid var(--border);">Clear</button>
+      </div>
     </form>
-    {% if answer %}
-      <h4>Answer</h4>
-      <pre>{{ answer }}</pre>
-    {% endif %}
   </div>
+
+  <style>
+    .bubble {
+      max-width: 80%;
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      padding: 10px 12px;
+      line-height: 1.45;
+      white-space: pre-wrap;
+      word-break: break-word;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,255,156,0.05);
+      font-family: "Share Tech Mono", monospace;
+    }
+    .user   { align-self: flex-end; background: #062013; color: var(--text); border-color: #0e2e1a; }
+    .bot    { align-self: flex-start; background: #05140c; color: var(--text); border-color: #0c2416; }
+    .meta   { font-size: 11px; opacity: .6; margin-top: 2px; }
+  </style>
+
+  <script>
+    (function () {
+      const KEY = 'matrix_ai_chat_history';
+      const messagesEl = document.getElementById('messages');
+      const form = document.getElementById('chatForm');
+      const input = document.getElementById('question');
+      const sendBtn = document.getElementById('sendBtn');
+      const clearBtn = document.getElementById('clearBtn');
+
+      function loadHistory() {
+        try {
+          return JSON.parse(localStorage.getItem(KEY) || '[]');
+        } catch { return []; }
+      }
+      function saveHistory(hist) {
+        localStorage.setItem(KEY, JSON.stringify(hist.slice(-100))); // cap
+      }
+      function msgEl(role, text, ts) {
+        const wrap = document.createElement('div');
+        wrap.style.display = 'flex';
+        wrap.style.flexDirection = 'column';
+        wrap.style.gap = '2px';
+        const b = document.createElement('div');
+        b.className = 'bubble ' + (role === 'user' ? 'user' : 'bot');
+        b.textContent = text;
+        const meta = document.createElement('div');
+        meta.className = 'meta';
+        meta.textContent = new Date(ts).toLocaleString();
+        wrap.appendChild(b);
+        wrap.appendChild(meta);
+        return wrap;
+      }
+      function render(hist) {
+        messagesEl.innerHTML = '';
+        hist.forEach(m => messagesEl.appendChild(msgEl(m.role, m.text, m.ts)));
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+      }
+
+      let history = loadHistory();
+      if (history.length === 0) {
+        // seed a friendly welcome
+        history.push({ role: 'bot', text: 'Welcome to MATRIX-AI. Ask me about Matrix System 1.0, Guardian, or the Hub.', ts: Date.now() });
+        saveHistory(history);
+      }
+      render(history);
+
+      clearBtn.addEventListener('click', () => {
+        history = [];
+        saveHistory(history);
+        render(history);
+      });
+
+      form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const q = (input.value || '').trim();
+        if (!q) return;
+        input.value = '';
+        sendBtn.disabled = true;
+
+        // append user message
+        const userMsg = { role: 'user', text: q, ts: Date.now() };
+        history.push(userMsg);
+        saveHistory(history);
+        render(history);
+
+        try {
+          const port = (window.location.port || (window.location.href.includes('/+/') ? '' : ''));
+          const base = window.location.origin; // same origin (HF proxies handle it)
+          const r = await fetch(base.replace(/\/+$/, '') + '/v1/chat', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ query: q })
+          });
+          let answer = '(no answer)';
+          if (r.ok) {
+            const data = await r.json();
+            answer = (data && (data.answer || data.response || JSON.stringify(data))) || answer;
+          } else {
+            answer = `HTTP ${r.status}`;
+          }
+          history.push({ role: 'bot', text: answer, ts: Date.now() });
+        } catch (err) {
+          history.push({ role: 'bot', text: 'Error: ' + (err && err.message ? err.message : String(err)), ts: Date.now() });
+        } finally {
+          saveHistory(history);
+          render(history);
+          sendBtn.disabled = false;
+        }
+      });
+    })();
+  </script>
 {% endblock %}

app/templates/dev.html

@@ -1,12 +1,10 @@
 {% extends "base.html" %}
 {% block body %}
   <div class="card">
-    <h3>Dev – Exercise /v1/plan</h3>
-    <form method="post" style="display:grid; gap:12px;">
-      <textarea name="payload" rows="16" spellcheck="false">{{ sample }}</textarea>
-      <div style="display:flex; gap:8px;">
-        <button type="submit">Call /v1/plan</button>
-      </div>
+    <h3>Dev — Exercise /v1/plan</h3>
+    <form method="post" style="display:grid; gap:12px; margin-top:12px;">
+      <textarea name="payload" rows="18" spellcheck="false">{{ sample }}</textarea>
+      <div><button type="submit">Call /v1/plan</button></div>
     </form>
 
     {% if error %}

app/ui.py

@@ -1,5 +1,5 @@
 from fastapi import APIRouter, Request, Form
-from fastapi.responses import HTMLResponse
+from fastapi.responses import HTMLResponse, RedirectResponse
 from fastapi.templating import Jinja2Templates
 import httpx, os, json
 
@@ -7,13 +7,13 @@ router = APIRouter()
 templates = Jinja2Templates(directory="app/templates")
 
 def _self_base_url() -> str:
-    # When running inside HF Space Docker, use localhost + PORT
     port = os.getenv("PORT", "7860")
     return f"http://127.0.0.1:{port}"
 
-@router.get("/", response_class=HTMLResponse)
-async def home(request: Request):
-    return templates.TemplateResponse("home.html", {"request": request})
+@router.get("/", include_in_schema=False)
+async def home_redirect():
+    # Default to the Chat page
+    return RedirectResponse(url="/chat", status_code=302)
 
 @router.get("/chat", response_class=HTMLResponse)
 async def chat_get(request: Request):
@@ -21,11 +21,10 @@ async def chat_get(request: Request):
 
 @router.post("/chat", response_class=HTMLResponse)
 async def chat_post(request: Request, question: str = Form(...)):
-    # Call your /v1/chat (or return a placeholder)
-    base_url = _self_base_url()
     try:
-        async with httpx.AsyncClient(timeout=15.0) as client:
-            r = await client.post("/v1/chat", base_url=base_url, json={"query": question})
+        async with httpx.AsyncClient(base_url=_self_base_url(), timeout=15.0) as client:
+            r = await client.post("/v1/chat", json={"query": question})
+            r.raise_for_status()
             data = r.json()
             answer = data.get("answer", "(no answer)")
     except Exception as e:
@@ -34,7 +33,6 @@ async def chat_post(request: Request, question: str = Form(...)):
 
 @router.get("/dev", response_class=HTMLResponse)
 async def dev_get(request: Request):
-    # Prefill a realistic plan request used by Matrix-Guardian
     sample = {
         "context": {
             "entity_uid": "matrix-ai",
@@ -49,14 +47,14 @@ async def dev_get(request: Request):
 
 @router.post("/dev", response_class=HTMLResponse)
 async def dev_post(request: Request, payload: str = Form(...)):
-    base_url = _self_base_url()
     try:
         body = json.loads(payload)
     except Exception as e:
         return templates.TemplateResponse("dev.html", {"request": request, "sample": payload, "error": f"Invalid JSON: {e}"})
+
     try:
-        async with httpx.AsyncClient(timeout=15.0) as client:
-            r = await client.post("/v1/plan", base_url=base_url, json=body)
+        async with httpx.AsyncClient(base_url=_self_base_url(), timeout=15.0) as client:
+            r = await client.post("/v1/plan", json=body)
             r.raise_for_status()
             data = r.json()
             pretty = json.dumps(data, indent=2)