From c493b10d2d0a34045147227b66a056177dd84403 Mon Sep 17 00:00:00 2001
From: root <root@island37.com>
Date: Wed, 25 Mar 2026 03:39:52 -0500
Subject: [PATCH] UI polish: consistent nav, login glow, cleaner header

- Consistent nav across all pages (Team UI / Lab / Admin / Logout)
- Main header: separator between nav and auth actions, smaller text
- Login box: subtle purple glow shadow, wider card
- Demo banner: gradient background, bolder text, larger font
- Lab + Admin: matching nav with logout link
- Reduced visual clutter in main header

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 llm_team_ui.py | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/llm_team_ui.py b/llm_team_ui.py
index ca3a42d..fcea33b 100644
--- a/llm_team_ui.py
+++ b/llm_team_ui.py
@@ -135,7 +135,7 @@ LOGIN_HTML = """
   :root{--bg:#0a0c10;--surface:#151820;--border:#272d3f;--text:#e4e4e7;--text2:#a1a1aa;--accent:#6366f1;--accent2:#818cf8;--red:#ef4444;--green:#22c55e}
   *{box-sizing:border-box;margin:0;padding:0}
   body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center}
-  .login-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:32px;width:360px}
+  .login-box{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:36px;width:380px;box-shadow:0 0 40px rgba(99,102,241,0.06),0 8px 32px rgba(0,0,0,0.3)}
   .login-box h1{font-size:22px;margin-bottom:6px;font-weight:700}
   .login-box h1 span{background:linear-gradient(135deg,var(--accent2),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
   .login-box .sub{color:var(--text2);font-size:13px;margin-bottom:24px}
@@ -537,13 +537,14 @@ HTML = r"""
   <header>
     <h1><span>LLM</span> Team</h1>
     <div class="badge" id="model-count"><span class="dot"></span>0 models</div>
-    <div style="margin-left:auto;display:flex;gap:6px">
-      <button onclick="toggleHistory()" style="color:var(--text2);background:none;font-size:12px;padding:4px 10px;border:1px solid var(--border);border-radius:6px;cursor:pointer;">History</button>
-      <a href="/lab" style="color:var(--green);text-decoration:none;font-size:12px;padding:4px 10px;border:1px solid rgba(34,197,94,0.3);border-radius:6px;">Lab</a>
-      <a href="/admin" style="color:var(--text2);text-decoration:none;font-size:12px;padding:4px 10px;border:1px solid var(--border);border-radius:6px;">Admin</a>
-      <button id="demo-toggle" onclick="toggleDemo()" style="display:none;color:var(--orange);background:none;font-size:11px;padding:4px 8px;border:1px solid rgba(245,158,11,0.3);border-radius:6px;cursor:pointer">Demo</button>
-      <a href="/logout" style="color:#ef4444;text-decoration:none;font-size:11px;padding:4px 8px;border:1px solid rgba(239,68,68,0.2);border-radius:6px;opacity:0.7">Logout</a>
-    </div>
+    <nav style="margin-left:auto;display:flex;align-items:center;gap:4px">
+      <button onclick="toggleHistory()" style="color:var(--text2);background:none;font-size:11px;padding:5px 10px;border:1px solid var(--border);border-radius:6px;cursor:pointer">History</button>
+      <a href="/lab" style="color:var(--green);text-decoration:none;font-size:11px;padding:5px 10px;border:1px solid rgba(34,197,94,0.2);border-radius:6px">Lab</a>
+      <a href="/admin" style="color:var(--text2);text-decoration:none;font-size:11px;padding:5px 10px;border:1px solid var(--border);border-radius:6px">Admin</a>
+      <span style="width:1px;height:16px;background:var(--border);margin:0 2px"></span>
+      <button id="demo-toggle" onclick="toggleDemo()" style="display:none;color:var(--orange);background:none;font-size:10px;padding:4px 8px;border:1px solid rgba(245,158,11,0.3);border-radius:6px;cursor:pointer">Demo</button>
+      <a href="/logout" style="color:var(--text2);text-decoration:none;font-size:10px;padding:4px 8px;opacity:0.5">Logout</a>
+    </nav>
   </header>
   <div class="grid">
     <div class="left-scroll">
@@ -1153,8 +1154,8 @@ function updateDemoUI(active) {
     if (!banner) {
       const b = document.createElement('div');
       b.id = 'demo-banner';
-      b.style.cssText = 'position:fixed;top:0;left:0;right:0;background:rgba(34,197,94,0.1);border-bottom:1px solid rgba(34,197,94,0.3);color:#22c55e;text-align:center;font-size:11px;padding:4px;z-index:50;font-weight:500';
-      b.textContent = 'DEMO MODE — public access enabled';
+      b.style.cssText = 'position:fixed;top:0;left:0;right:0;background:linear-gradient(90deg,rgba(34,197,94,0.08),rgba(34,197,94,0.15),rgba(34,197,94,0.08));border-bottom:1px solid rgba(34,197,94,0.25);color:#22c55e;text-align:center;font-size:12px;padding:6px;z-index:50;font-weight:600;letter-spacing:1px';
+      b.textContent = 'DEMO MODE';
       document.body.prepend(b);
     }
   } else if (banner) {
@@ -1274,7 +1275,7 @@ ADMIN_HTML = r"""
 <div class="container">
   <header>
     <h1><span>LLM</span> Team Admin</h1>
-    <a href="/">Team UI</a> <a href="/lab" style="color:var(--green)">Lab</a>
+    <nav style="margin-left:auto;display:flex;gap:8px;align-items:center"><a href="/">Team UI</a><a href="/lab" style="color:var(--green)">Lab</a><span style="opacity:0.3">|</span><a href="/logout" style="opacity:0.5;font-size:11px">Logout</a></nav>
   </header>
   <div class="tabs">
     <div class="tab active" onclick="switchTab('providers')">Providers</div>
@@ -1731,7 +1732,7 @@ LAB_HTML = r"""
 <div class="c">
   <header>
     <h1><span>Lab</span> AutoResearch</h1>
-    <nav><a href="/">Team UI</a><a href="/admin">Admin</a></nav>
+    <nav style="margin-left:auto;display:flex;gap:8px;align-items:center"><a href="/">Team UI</a><a href="/admin">Admin</a><span style="opacity:0.3">|</span><a href="/logout" style="opacity:0.5;font-size:11px">Logout</a></nav>
   </header>
   <div class="tabs">
     <div class="tab active" onclick="labTab('experiments')">Experiments</div>