Update index.html

index.html

@@ -4,149 +4,196 @@
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <title>KVInfer Studio</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet">
 <style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 :root {
-  --bg0: #0c0e13;  --bg1: #12151c;  --bg2: #191d27;  --bg3: #212738;
-  --accent: #5b8dee;  --accent2: #3de68f;  --warn: #f5a623;  --danger: #e85d75;
-  --text0: #e8ecf4;  --text1: #a3adc4;  --text2: #5a6278;
-  --radius: 12px;  --sidebar: 310px;  --font: 'Inter', system-ui, sans-serif;
+  --bg0: #0f0e0c;  --bg1: #1a1916;  --bg2: #252420;  --bg3: #302e28;
+  --amber: #e8a030;  --amber2: #f5c060;
+  --green: #5dbd7a;  --red: #d95f52;  --blue: #5b8dee;
+  --text0: #ffffff;  --text1: #e8e4d8;  --text2: #c8c4b4;  --text3: #8a8478;
+  --radius: 6px;  --sidebar: 290px;
+  --mono: 'Space Mono', monospace;
+  --sans: 'Syne', sans-serif;
 }
-html,body { height:100%; background:var(--bg0); color:var(--text0); font-family:var(--font); font-size:14px; }
-.app { display:flex; height:100vh; overflow:hidden; }
+html, body { height: 100%; background: var(--bg0); color: var(--text0); font-family: var(--mono); font-size: 13px; }
+.app { display: flex; height: 100vh; overflow: hidden; }
 
 /* ── Sidebar ── */
-.sidebar { width:var(--sidebar); min-width:var(--sidebar); background:var(--bg1);
-  border-right:1px solid var(--bg3); display:flex; flex-direction:column; overflow:hidden; }
-.sb-head { padding:14px 16px; border-bottom:1px solid var(--bg3); background:var(--bg0); }
-.sb-head h2 { font-size:13px; font-weight:700; letter-spacing:.07em;
-  color:var(--text1); text-transform:uppercase; }
-.sb-head p  { font-size:11px; color:var(--text2); margin-top:2px; }
-.sb-body  { flex:1; overflow-y:auto; padding:10px;
-  scrollbar-width:thin; scrollbar-color:var(--bg3) transparent; }
+.sidebar { width: var(--sidebar); min-width: var(--sidebar); background: var(--bg1);
+  border-right: 1px solid var(--bg3); display: flex; flex-direction: column; overflow: hidden; }
+
+.sb-head { padding: 16px 18px 14px; border-bottom: 1px solid var(--bg3); background: var(--bg0); }
+.sb-head h2 { font-family: var(--sans); font-size: 20px; font-weight: 800;
+  letter-spacing: -0.03em; color: var(--text0); }
+.sb-head h2 span { color: var(--amber); }
+.sb-head p { font-size: 10px; color: var(--text2); margin-top: 3px;
+  letter-spacing: 0.08em; text-transform: uppercase; }
+
+.sb-body { flex: 1; overflow-y: auto; padding: 10px 12px;
+  scrollbar-width: thin; scrollbar-color: var(--bg3) transparent; }
 
 /* Cards */
-.card { background:var(--bg2); border:1px solid var(--bg3); border-radius:var(--radius);
-  padding:11px 13px; margin-bottom:9px; }
-.card-title { font-size:10.5px; font-weight:700; color:var(--text2);
-  text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
+.card { background: var(--bg2); border: 1px solid var(--bg3); border-radius: var(--radius);
+  padding: 11px 13px; margin-bottom: 8px; }
+.card-title { font-size: 9px; font-weight: 700; color: var(--text2);
+  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 9px;
+  display: flex; align-items: center; gap: 6px; }
 
 /* Stats */
-.srow { display:flex; justify-content:space-between; align-items:center; padding:3px 0; }
-.slabel { color:var(--text1); font-size:12px; }
-.sval   { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
-.green  { color:var(--accent2); }  .blue { color:var(--accent); }
-.yellow { color:var(--warn); }     .red  { color:var(--danger); }
+.srow { display: flex; justify-content: space-between; align-items: center; padding: 3.5px 0; }
+.slabel { color: var(--text2); font-size: 11px; }
+.sval { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text0); }
+.green  { color: var(--green); }
+.blue   { color: var(--blue); }
+.yellow { color: var(--amber); }
+.red    { color: var(--red); }
 
 /* Live dot */
-.dot { display:inline-block; width:7px; height:7px; border-radius:50%;
-  background:var(--accent2); margin-right:5px; }
-.dot.idle { background:var(--text2); }
-.dot.live { animation:pulse 1.4s infinite; }
+.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+.dot.idle { background: var(--text3); }
+.dot.live { background: var(--green); animation: pulse 1.4s infinite; }
 @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.7)} }
 
 /* Sparkline */
-canvas#spark { width:100%; height:50px; display:block; border-radius:6px; }
+canvas#spark { width: 100%; height: 48px; display: block; border-radius: var(--radius);
+  background: var(--bg0); }
 
 /* System prompt */
-.sysprompt { width:100%; background:var(--bg0); border:1px solid var(--bg3);
-  border-radius:8px; color:var(--text0); font-size:12px; padding:8px;
-  resize:vertical; min-height:56px; font-family:var(--font); line-height:1.5; }
-.sysprompt:focus { outline:none; border-color:var(--accent); }
+.sysprompt { width: 100%; background: var(--bg0); border: 1px solid var(--bg3);
+  border-radius: var(--radius); color: var(--text0); font-size: 11px; padding: 8px 10px;
+  resize: vertical; min-height: 56px; font-family: var(--mono); line-height: 1.6; }
+.sysprompt:focus { outline: none; border-color: var(--amber); }
 
 /* Sliders */
-.pgroup { display:flex; flex-direction:column; gap:2px; }
-.pgroup label { font-size:10px; color:var(--text2); text-transform:uppercase;
-  letter-spacing:.06em; display:flex; justify-content:space-between; }
-.pgroup label span { color:var(--accent); font-weight:700; }
-.pgroup input[type=range] { width:100%; accent-color:var(--accent); }
+.pgroup { display: flex; flex-direction: column; gap: 4px; }
+.pgroup label { font-size: 9px; color: var(--text2); text-transform: uppercase;
+  letter-spacing: 0.08em; display: flex; justify-content: space-between; }
+.pgroup label span { color: var(--amber); font-weight: 700; }
+.pgroup input[type=range] {
+  width: 100%; -webkit-appearance: none; height: 2px;
+  background: var(--bg3); border-radius: 1px; outline: none;
+}
+.pgroup input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%;
+  background: var(--amber); cursor: pointer; border: 2px solid var(--bg1);
+}
 
 /* Buttons */
-.btn { display:inline-flex; align-items:center; gap:5px; padding:6px 13px;
-  border-radius:8px; border:none; cursor:pointer; font-size:12px; font-weight:600;
-  font-family:var(--font); transition:all .13s; }
-.btn-p { background:var(--accent); color:#fff; }
-.btn-p:hover { background:#4879d4; }
-.btn-s { background:var(--bg3); color:var(--text0); }
-.btn-s:hover { background:#2b3149; }
-.btn-sm { padding:5px 9px; font-size:11px; border-radius:6px; }
-.btn-full { width:100%; justify-content:center; }
-.btn:disabled { opacity:.35; cursor:not-allowed; }
+.btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
+  border-radius: var(--radius); border: 1px solid var(--bg3); cursor: pointer;
+  font-size: 10px; font-weight: 700; font-family: var(--mono);
+  text-transform: uppercase; letter-spacing: 0.05em; transition: all .13s; }
+.btn-p { background: var(--amber); color: var(--bg0); border-color: var(--amber); }
+.btn-p:hover { background: var(--amber2); border-color: var(--amber2); }
+.btn-s { background: var(--bg3); color: var(--text1); }
+.btn-s:hover { background: #3a3830; color: var(--text0); border-color: var(--text3); }
+.btn-sm { padding: 5px 9px; font-size: 10px; }
+.btn-full { width: 100%; justify-content: center; }
+.btn:disabled { opacity: .35; cursor: not-allowed; }
 
 /* ── Chat Main ── */
-.chat { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--bg0); }
-.chat-hdr { height:54px; display:flex; align-items:center; padding:0 20px;
-  border-bottom:1px solid var(--bg3); background:var(--bg1); gap:10px; }
-.badge { background:var(--bg3); border-radius:6px; padding:3px 9px;
-  font-size:11px; font-weight:700; color:var(--accent); letter-spacing:.04em; }
-.chat-hdr h1 { font-size:15px; font-weight:700; }
-.chat-hdr .spc { flex:1; }
-.statpill { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text1); }
+.chat { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg0); }
+.chat-hdr { height: 52px; display: flex; align-items: center; padding: 0 22px;
+  border-bottom: 1px solid var(--bg3); background: var(--bg1); gap: 10px; }
+.badge { background: rgba(232,160,48,0.12); border: 1px solid rgba(232,160,48,0.3);
+  border-radius: var(--radius); padding: 3px 10px;
+  font-size: 11px; font-weight: 700; color: var(--amber); letter-spacing: 0.05em;
+  font-family: var(--sans); }
+.chat-hdr h1 { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--text0); }
+.chat-hdr .spc { flex: 1; }
+.statpill { display: flex; align-items: center; gap: 6px;
+  font-size: 10px; color: var(--text2); letter-spacing: 0.06em; text-transform: uppercase; }
 
 /* Messages */
-.msgs { flex:1; overflow-y:auto; padding:18px 20px;
-  display:flex; flex-direction:column; gap:14px; scroll-behavior:smooth;
-  scrollbar-width:thin; scrollbar-color:var(--bg3) transparent; }
-.mg { display:flex; flex-direction:column; gap:3px; max-width:700px; }
-.mg.user { align-self:flex-end; align-items:flex-end; }
-.mg.asst { align-self:flex-start; align-items:flex-start; }
-.mlabel { font-size:10.5px; color:var(--text2); padding:0 4px; }
-.bubble { padding:10px 14px; border-radius:14px; line-height:1.65;
-  white-space:pre-wrap; word-break:break-word; max-width:560px; }
-.mg.user .bubble { background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
-.mg.asst .bubble { background:var(--bg2); color:var(--text0);
-  border:1px solid var(--bg3); border-bottom-left-radius:4px; }
-.cursor2 { display:inline-block; width:2px; height:.9em;
-  background:var(--accent2); margin-left:2px;
-  animation:blink .55s infinite; vertical-align:text-bottom; }
+.msgs { flex: 1; overflow-y: auto; padding: 0;
+  display: flex; flex-direction: column; scroll-behavior: smooth;
+  scrollbar-width: thin; scrollbar-color: var(--bg3) transparent; }
+
+.mg { display: flex; gap: 0; padding: 16px 24px;
+  border-bottom: 1px solid var(--bg3); animation: fadeup 0.18s ease; }
+.mg:last-child { border-bottom: none; }
+@keyframes fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+
+.mg-role { width: 64px; flex-shrink: 0; padding-top: 1px; }
+.mlabel { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
+.mg.user .mlabel { color: var(--amber); }
+.mg.asst .mlabel { color: var(--green); }
+.mg-body { flex: 1; min-width: 0; }
+
+.bubble { font-family: var(--mono); font-size: 13px; line-height: 1.75;
+  color: var(--text1); white-space: pre-wrap; word-break: break-word; max-width: 680px; }
+.mg.user .bubble { color: var(--text2); }
+
+.cursor2 { display: inline-block; width: 8px; height: 2px;
+  background: var(--amber); margin-left: 3px;
+  vertical-align: middle; animation: blink .6s infinite; }
 @keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
-.bmeta { font-size:10px; color:var(--text2); padding:0 4px; display:flex; gap:10px; }
-.bmeta b { color:var(--accent2); }
+
+.bmeta { font-size: 10px; color: var(--text3); margin-top: 6px; display: flex; gap: 12px; }
+.bmeta b { color: var(--amber); }
 
 /* Welcome */
-.welcome { flex:1; display:flex; flex-direction:column;
-  align-items:center; justify-content:center; gap:8px;
-  color:var(--text2); text-align:center; padding:40px; }
-.welcome .logo { font-size:44px; margin-bottom:6px; }
-.welcome h2 { font-size:19px; color:var(--text1); font-weight:600; }
-.welcome p  { max-width:340px; line-height:1.6; font-size:13px; }
+.welcome { flex: 1; display: flex; flex-direction: column;
+  align-items: center; justify-content: center; gap: 14px;
+  text-align: center; padding: 40px; animation: fadeup 0.4s ease; }
+.welcome .logo { font-family: var(--sans); font-size: 80px; font-weight: 800;
+  color: var(--amber); letter-spacing: -0.06em; line-height: 1;
+  text-shadow: 0 0 80px rgba(232,160,48,0.2); }
+.welcome h2 { font-family: var(--sans); font-size: 26px; font-weight: 700;
+  color: var(--text0); letter-spacing: -0.02em; }
+.welcome p { max-width: 420px; line-height: 1.8; font-size: 13px; color: var(--text2); }
+.spec-chips { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
+.chip { font-size: 10px; padding: 4px 12px; border: 1px solid var(--bg3);
+  border-radius: 20px; color: var(--text2); letter-spacing: 0.07em;
+  text-transform: uppercase; background: var(--bg2); }
 
 /* Input */
-.inputbar { padding:12px 18px; border-top:1px solid var(--bg3);
-  background:var(--bg1); display:flex; gap:9px; align-items:flex-end; }
-.inputwrap { flex:1; background:var(--bg2); border:1px solid var(--bg3);
-  border-radius:11px; display:flex; align-items:flex-end;
-  padding:3px 3px 3px 13px; gap:5px; transition:border-color .13s; }
-.inputwrap:focus-within { border-color:var(--accent); }
-#inp { flex:1; background:none; border:none; outline:none;
-  color:var(--text0); font-size:14px; font-family:var(--font);
-  resize:none; line-height:1.5; max-height:120px; padding:7px 0; }
-#inp::placeholder { color:var(--text2); }
-.sbtn { background:var(--accent); border:none; cursor:pointer;
-  width:34px; height:34px; border-radius:8px; display:flex;
-  align-items:center; justify-content:center; flex-shrink:0; transition:.13s; }
-.sbtn:hover { background:#4879d4; }
-.sbtn:disabled { opacity:.3; cursor:not-allowed; }
-.sbtn svg { fill:white; }
+.inputbar { padding: 14px 20px; border-top: 1px solid var(--bg3); background: var(--bg1); }
+.inputwrap { background: var(--bg2); border: 1px solid var(--bg3);
+  border-radius: var(--radius); display: flex; align-items: flex-end;
+  padding: 3px 3px 3px 14px; gap: 5px; transition: border-color .13s; }
+.inputwrap:focus-within { border-color: var(--amber); }
+#inp { flex: 1; background: none; border: none; outline: none;
+  color: var(--text0); font-size: 13px; font-family: var(--mono);
+  resize: none; line-height: 1.6; max-height: 120px; padding: 8px 0; }
+#inp::placeholder { color: var(--text3); }
+.sbtn { background: var(--amber); border: none; cursor: pointer;
+  width: 34px; height: 34px; border-radius: var(--radius); display: flex;
+  align-items: center; justify-content: center; flex-shrink: 0;
+  transition: .13s; align-self: flex-end; margin-bottom: 3px; }
+.sbtn:hover { background: var(--amber2); }
+.sbtn:disabled { opacity: .3; cursor: not-allowed; }
+.sbtn svg { fill: var(--bg0); }
+.input-hint { margin-top: 6px; font-size: 10px; color: var(--text3);
+  text-align: right; letter-spacing: 0.04em; }
 
 /* Benchmark modal */
-#bov { display:none; position:fixed; inset:0; background:rgba(0,0,0,.72);
-  z-index:100; align-items:center; justify-content:center; }
-#bov.on { display:flex; }
-.bmod { background:var(--bg1); border:1px solid var(--bg3);
-  border-radius:16px; padding:22px; width:510px; max-height:80vh; overflow-y:auto; }
-.bmod h3 { font-size:15px; margin-bottom:14px; }
-.btbl { width:100%; border-collapse:collapse; font-size:12px; }
-.btbl th,.btbl td { padding:6px 9px; text-align:left; border-bottom:1px solid var(--bg3); }
-.btbl th { color:var(--text2); font-weight:600; }
-.btbl td.good { color:var(--accent2); } .btbl td.mid { color:var(--warn); }
-.btbl td.bad  { color:var(--danger); }
-
-/* Perf badge row */
-.perf-badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
-.pb { background:var(--bg3); border-radius:6px; padding:4px 9px;
-  font-size:11px; display:flex; gap:5px; align-items:center; }
-.pb .pbl { color:var(--text2); } .pb .pbv { font-weight:700; }
+#bov { display: none; position: fixed; inset: 0; background: rgba(10,9,8,.85);
+  z-index: 100; align-items: center; justify-content: center; }
+#bov.on { display: flex; }
+.bmod { background: var(--bg1); border: 1px solid var(--bg3);
+  border-radius: 8px; padding: 24px; width: 520px; max-height: 80vh; overflow-y: auto;
+  animation: fadeup 0.18s ease; }
+.bmod h3 { font-family: var(--sans); font-size: 16px; font-weight: 700;
+  margin-bottom: 16px; color: var(--text0); }
+.btbl { width: 100%; border-collapse: collapse; font-size: 11px; font-family: var(--mono); }
+.btbl th, .btbl td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--bg3); }
+.btbl th { color: var(--text3); font-weight: 400; font-size: 9px;
+  text-transform: uppercase; letter-spacing: 0.1em; }
+.btbl td { color: var(--text2); }
+.btbl td.good { color: var(--green); }
+.btbl td.mid  { color: var(--amber); }
+.btbl td.bad  { color: var(--red); }
+.bench-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
+  background: var(--bg3); border: 1px solid var(--bg3); border-radius: var(--radius);
+  overflow: hidden; margin-bottom: 16px; }
+.bench-stat { background: var(--bg2); padding: 14px 16px; text-align: center; }
+.bench-stat .bval { font-family: var(--sans); font-size: 26px; font-weight: 800;
+  color: var(--amber); letter-spacing: -0.03em; }
+.bench-stat .blbl { font-size: 9px; color: var(--text3);
+  text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; }
 </style>
 </head>
 <body>
@@ -155,7 +202,7 @@ canvas#spark { width:100%; height:50px; display:block; border-radius:6px; }
 <!-- ── Sidebar ── -->
 <aside class="sidebar">
   <div class="sb-head">
-    <h2>⚡ KVInfer Studio</h2>
+    <h2><span>KV</span>Infer</h2>
     <p>152M · GPT-2 · AVX2 + OpenMP · KV-Cache</p>
   </div>
   <div class="sb-body">
@@ -179,7 +226,7 @@ canvas#spark { width:100%; height:50px; display:block; border-radius:6px; }
     <div class="card">
       <div class="card-title">Throughput History (tok/s)</div>
       <canvas id="spark"></canvas>
-      <div style="margin-top:6px">
+      <div style="margin-top:7px">
         <div class="srow"><span class="slabel">Session avg</span>
           <span class="sval green" id="s-avg">—</span></div>
         <div class="srow"><span class="slabel">Session peak</span>
@@ -198,9 +245,9 @@ canvas#spark { width:100%; height:50px; display:block; border-radius:6px; }
         <span class="sval blue" id="s-engcache">—</span></div>
       <div class="srow"><span class="slabel">Server RAM</span>
         <span class="sval" id="s-ram">—</span></div>
-      <div style="display:flex;gap:6px;margin-top:9px">
-        <button class="btn btn-s btn-sm btn-full" onclick="clearChat()">🗑 Clear</button>
-        <button class="btn btn-s btn-sm btn-full" onclick="openBench()">📊 Benchmark</button>
+      <div style="display:flex;gap:6px;margin-top:10px">
+        <button class="btn btn-s btn-sm btn-full" onclick="clearChat()">↺ Clear</button>
+        <button class="btn btn-p btn-sm btn-full" onclick="openBench()">⊞ Benchmark</button>
       </div>
     </div>
 
@@ -214,7 +261,7 @@ canvas#spark { width:100%; height:50px; display:block; border-radius:6px; }
     <!-- Params -->
     <div class="card">
       <div class="card-title">Generation</div>
-      <div style="display:flex;flex-direction:column;gap:9px;margin-top:2px">
+      <div style="display:flex;flex-direction:column;gap:10px;margin-top:2px">
         <div class="pgroup">
           <label>Temperature <span id="v-temp">0.70</span></label>
           <input type="range" id="p-temp" min="0.1" max="2.0" step="0.05" value="0.7"
@@ -250,21 +297,28 @@ canvas#spark { width:100%; height:50px; display:block; border-radius:6px; }
 
   <div class="msgs" id="msgs">
     <div class="welcome" id="welcome">
-      <div class="logo">🤖</div>
+      <div class="logo">KV</div>
       <h2>KVInfer Studio</h2>
       <p>152M · GPT-2 Decoder-Only · Custom C++ inference engine with AVX2 SIMD, OpenMP parallelism &amp; persistent session KV-cache.</p>
-      <p style="margin-top:8px;color:var(--text2)">Type a message below to begin.</p>
+      <div class="spec-chips">
+        <span class="chip">152M params</span>
+        <span class="chip">AVX2 SIMD</span>
+        <span class="chip">OpenMP</span>
+        <span class="chip">KV Cache</span>
+        <span class="chip">Streaming</span>
+      </div>
     </div>
   </div>
 
   <div class="inputbar">
     <div class="inputwrap">
-      <textarea id="inp" rows="1" placeholder="Send a message…"
+      <textarea id="inp" rows="1" placeholder="Send a message..."
         onkeydown="handleKey(event)"></textarea>
       <button class="sbtn" id="sbtn" onclick="send()">
         <svg width="15" height="15" viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/></svg>
       </button>
     </div>
+    <div class="input-hint">Enter to send &nbsp;·&nbsp; Shift+Enter for newline</div>
   </div>
 </main>
 
@@ -273,13 +327,13 @@ canvas#spark { width:100%; height:50px; display:block; border-radius:6px; }
 <!-- ── Benchmark modal ── -->
 <div id="bov">
   <div class="bmod">
-    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
       <h3>📊 Quick Benchmark</h3>
       <button class="btn btn-s btn-sm" onclick="closeBench()">✕</button>
     </div>
     <div id="bcontent">
-      <p style="color:var(--text1);font-size:13px">Runs 5 built-in prompts and measures throughput, TTFT, and per-token latency.</p>
-      <button class="btn btn-p btn-full" style="margin-top:13px" id="btnbench" onclick="runBench()">▶ Run Benchmark</button>
+      <p style="color:var(--text2);font-size:12px;line-height:1.7;margin-bottom:14px">Runs 5 built-in prompts and measures throughput, TTFT, and per-token latency.</p>
+      <button class="btn btn-p btn-full" style="margin-top:4px" id="btnbench" onclick="runBench()">▶ Run Benchmark</button>
     </div>
   </div>
 </div>
@@ -296,7 +350,6 @@ let totalToks  = 0;
 let tpsHist    = [];
 let peakTps    = 0;
 let engCache   = 0;
-
 // ─────────────────────────────────────────
 // Textarea auto-resize
 // ─────────────────────────────────────────
@@ -308,7 +361,6 @@ inp.addEventListener('input', () => {
 function handleKey(e) {
   if (e.key==='Enter' && !e.shiftKey) { e.preventDefault(); send(); }
 }
-
 // ─────────────────────────────────────────
 // UI helpers
 // ─────────────────────────────────────────
@@ -319,44 +371,40 @@ function setBusy(v) {
     const d = document.getElementById(id);
     d.className = 'dot' + (v ? ' live' : ' idle');
   });
-  document.getElementById('hstatus').textContent = v ? 'Generating…' : 'Idle';
+  document.getElementById('hstatus').textContent = v ? 'Generating...' : 'Idle';
 }
-
 function scrollBot() {
   const el = document.getElementById('msgs');
   el.scrollTop = el.scrollHeight;
 }
-
 function hideWelcome() {
   const w = document.getElementById('welcome');
   if (w) w.remove();
 }
-
 function esc(s) {
   return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\n/g,'<br>');
 }
-
 function addUserMsg(text) {
   hideWelcome();
   const g = document.createElement('div');
   g.className = 'mg user';
-  g.innerHTML = `<div class="mlabel">You</div><div class="bubble">${esc(text)}</div>`;
+  g.innerHTML = `<div class="mg-role"><div class="mlabel">You</div></div><div class="mg-body"><div class="bubble">${esc(text)}</div></div>`;
   document.getElementById('msgs').appendChild(g);
   scrollBot();
 }
-
 function createAssistantSlot() {
   const g = document.createElement('div');
   g.className = 'mg asst';
   g.innerHTML = `
-    <div class="mlabel">Assistant</div>
-    <div class="bubble" id="bubble"><span class="cursor2"></span></div>
-    <div class="bmeta" id="bmeta"></div>`;
+    <div class="mg-role"><div class="mlabel">Model</div></div>
+    <div class="mg-body">
+      <div class="bubble" id="bubble"><span class="cursor2"></span></div>
+      <div class="bmeta" id="bmeta"></div>
+    </div>`;
   document.getElementById('msgs').appendChild(g);
   scrollBot();
   return document.getElementById('bubble');
 }
-
 // ─────────────────────────────────────────
 // FIX #5 — TTFT: use explicit null, not falsy check
 // ─────────────────────────────────────────
@@ -367,13 +415,11 @@ async function send() {
   inp.value = ''; inp.style.height = 'auto';
   addUserMsg(text);
   setBusy(true);
-
   const bubble = createAssistantSlot();
   let content   = '';
   let t0        = Date.now();
   let firstTokT = null;   // ← FIX: explicit null, not undefined
   let tokCount  = 0;
-
   const payload = {
     message: text,
     session_id: sessId,
@@ -382,7 +428,6 @@ async function send() {
     temperature: parseFloat(document.getElementById('p-temp').value),
     top_k: parseInt(document.getElementById('p-topk').value),
   };
-
   try {
     const resp = await fetch(`${API}/chat`, {
       method: 'POST',
@@ -390,11 +435,9 @@ async function send() {
       body: JSON.stringify(payload),
     });
     if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-
     const reader  = resp.body.getReader();
     const decoder = new TextDecoder();
     let buf = '';
-
     while (true) {
       const {done, value} = await reader.read();
       if (done) break;
@@ -408,9 +451,7 @@ async function send() {
         if (raw === '[DONE]') break;
         let chunk;
         try { chunk = JSON.parse(raw); } catch { continue; }
-
         const now = Date.now();
-
         if (chunk.type === 'token') {
           // FIX #5 — correct null check
           if (firstTokT === null) {
@@ -424,29 +465,24 @@ async function send() {
           document.getElementById('s-ttft').textContent  = (firstTokT - t0) + ' ms';
           bubble.innerHTML = esc(content) + '<span class="cursor2"></span>';
           scrollBot();
-
         } else if (chunk.type === 'done') {
           bubble.innerHTML = esc(content);
           const ttft = firstTokT !== null ? (firstTokT - t0) : 0;
           const tps  = chunk.tps;
           const ms   = chunk.total_ms;
-
           // Update meta line
           document.getElementById('bmeta').innerHTML =
             `<b>${tps}</b> tok/s · <b>TTFT</b> ${ttft}ms · ` +
             `<b>${tokCount}</b> tokens · <b>${ms.toFixed(0)}ms</b> total`;
-
           // Update sidebar stats
           document.getElementById('s-tps').textContent  = tps + ' tok/s';
           document.getElementById('s-lat').textContent  = ms.toFixed(0) + ' ms';
-
           tpsHist.push(tps);
           if (tpsHist.length > 30) tpsHist.shift();
           if (tps > peakTps) peakTps = tps;
           const avg = (tpsHist.reduce((a,b)=>a+b,0)/tpsHist.length).toFixed(1);
           document.getElementById('s-avg').textContent  = avg + ' tok/s';
           document.getElementById('s-peak').textContent = peakTps.toFixed(1) + ' tok/s';
-
           // FIX #2 indicator — show how many tokens are cached in engine
           if (chunk.session_id) {
             fetch(`${API}/chat/history?session_id=${chunk.session_id}`)
@@ -456,18 +492,16 @@ async function send() {
                 document.getElementById('s-engcache').textContent = engCache + ' tok';
               }).catch(()=>{});
           }
-
           turnCount++;
           document.getElementById('s-turns').textContent = turnCount;
           drawSpark();
-
         } else if (chunk.type === 'error') {
-          bubble.innerHTML = `<span style="color:var(--danger)">Error: ${esc(chunk.message)}</span>`;
+          bubble.innerHTML = `<span style="color:var(--red)">Error: ${esc(chunk.message)}</span>`;
         }
       }
     }
   } catch (err) {
-    bubble.innerHTML = `<span style="color:var(--danger)">Connection error: ${esc(err.message)}</span>`;
+    bubble.innerHTML = `<span style="color:var(--red)">Connection error: ${esc(err.message)}</span>`;
   } finally {
     const cur = bubble.querySelector('.cursor2');
     if (cur) cur.remove();
@@ -475,7 +509,6 @@ async function send() {
     scrollBot();
   }
 }
-
 // ─────────────────────────────────────────
 // Sparkline
 // ─────────────────────────────────────────
@@ -493,18 +526,17 @@ function drawSpark() {
   const mx   = Math.max(...d) * 1.15 || 1;
   const step = W / (d.length-1);
   const grad = ctx.createLinearGradient(0,0,0,H);
-  grad.addColorStop(0, 'rgba(61,230,143,.3)');
-  grad.addColorStop(1, 'rgba(61,230,143,.02)');
+  grad.addColorStop(0, 'rgba(232,160,48,.28)');
+  grad.addColorStop(1, 'rgba(232,160,48,.02)');
   ctx.beginPath();
   d.forEach((v,i) => {
     const x=i*step, y=H-(v/mx)*(H-4)-2;
     i===0 ? ctx.moveTo(x,y) : ctx.lineTo(x,y);
   });
-  ctx.strokeStyle='#3de68f'; ctx.lineWidth=2; ctx.stroke();
+  ctx.strokeStyle='#e8a030'; ctx.lineWidth=1.5; ctx.stroke();
   ctx.lineTo((d.length-1)*step,H); ctx.lineTo(0,H); ctx.closePath();
   ctx.fillStyle=grad; ctx.fill();
 }
-
 // ─────────────────────────────────────────
 // Clear chat
 // ─────────────────────────────────────────
@@ -518,25 +550,29 @@ async function clearChat() {
   turnCount  = 0; totalToks = 0; tpsHist = []; peakTps = 0; engCache = 0;
   document.getElementById('msgs').innerHTML = `
     <div class="welcome" id="welcome">
-      <div class="logo">🤖</div><h2>KVInfer Studio</h2>
+      <div class="logo">KV</div>
+      <h2>KVInfer Studio</h2>
       <p>152M · GPT-2 Decoder-Only · C++ AVX2 + OpenMP · Persistent session KV-cache.</p>
-      <p style="margin-top:8px;color:var(--text2)">Type a message below to begin.</p>
+      <div class="spec-chips">
+        <span class="chip">152M params</span>
+        <span class="chip">AVX2 SIMD</span>
+        <span class="chip">OpenMP</span>
+        <span class="chip">KV Cache</span>
+      </div>
     </div>`;
   ['s-turns','s-totok'].forEach(id => document.getElementById(id).textContent = '0');
   ['s-tps','s-ttft','s-lat','s-avg','s-peak','s-toks','s-engcache'].forEach(
     id => document.getElementById(id).textContent = '—');
   drawSpark();
 }
-
 // ─────────────────────────────────────────
 // Benchmark modal
 // ─────────────────────────────────────────
 function openBench()  { document.getElementById('bov').classList.add('on'); }
 function closeBench() { document.getElementById('bov').classList.remove('on'); }
-
 async function runBench() {
   const btn = document.getElementById('btnbench');
-  btn.disabled = true; btn.textContent = '⏳ Running…';
+  btn.disabled = true; btn.textContent = '⏳ Running...';
   try {
     const r = await fetch(`${API}/benchmark/run`);
     if (!r.ok) throw new Error(`HTTP ${r.status}`);
@@ -551,34 +587,31 @@ async function runBench() {
         <td>${x.tokens_out}</td></tr>`;
     }).join('');
     document.getElementById('bcontent').innerHTML = `
-      <div style="display:flex;gap:10px;margin-bottom:14px">
-        <div class="card" style="flex:1;text-align:center">
-          <div class="card-title">Avg Throughput</div>
-          <div class="sval green" style="font-size:22px">${d.summary.avg_tps}</div>
-          <div style="color:var(--text2);font-size:11px">tok/s</div>
+      <div class="bench-summary">
+        <div class="bench-stat">
+          <div class="bval">${d.summary.avg_tps}</div>
+          <div class="blbl">Avg Throughput (tok/s)</div>
         </div>
-        <div class="card" style="flex:1;text-align:center">
-          <div class="card-title">Avg TTFT</div>
-          <div class="sval blue" style="font-size:22px">${d.summary.avg_ttft_ms}</div>
-          <div style="color:var(--text2);font-size:11px">ms</div>
+        <div class="bench-stat">
+          <div class="bval">${d.summary.avg_ttft_ms}</div>
+          <div class="blbl">Avg TTFT (ms)</div>
         </div>
       </div>
       <table class="btbl">
         <thead><tr><th>Prompt</th><th>tok/s</th><th>TTFT</th><th>Total</th><th>Toks</th></tr></thead>
         <tbody>${rows}</tbody>
       </table>
-      <div style="margin-top:12px;display:flex;gap:7px">
+      <div style="margin-top:14px;display:flex;gap:8px">
         <button class="btn btn-p btn-sm" onclick="runBench()">↺ Rerun</button>
         <button class="btn btn-s btn-sm" onclick="closeBench()">Close</button>
       </div>`;
   } catch(e) {
     document.getElementById('bcontent').innerHTML =
-      `<p style="color:var(--danger)">Error: ${e.message}</p>
-       <button class="btn btn-s btn-sm" style="margin-top:10px" onclick="runBench()">Retry</button>`;
+      `<p style="color:var(--red);margin-bottom:12px">Error: ${e.message}</p>
+       <button class="btn btn-s btn-sm" onclick="runBench()">Retry</button>`;
   }
   btn.disabled = false;
 }
-
 // ─────────────────────────────────────────
 // Poll server metrics every 8s
 // ─────────────────────────────────────────
@@ -596,4 +629,4 @@ pollMetrics();
 setInterval(pollMetrics, 8000);
 </script>
 </body>
-</html>
+</html>