Spaces:

ml-intern-explorers
/

MiniCoder-1-Inference

Running

App Files Files Community

Bc-AI commited on 4 days ago

Commit

befafa1

verified ·

1 Parent(s): 2b1b1ec

Update index.html

Browse files

Files changed (1) hide show

index.html +432 -229

index.html CHANGED Viewed

@@ -3,43 +3,69 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>CodVa-2 · Code Assistant</title>
 <style>
   /* ── RESET & BASE ─────────────────────────────────────────────────── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   :root {
-    --bg:        #0d0f14;
-    --surface:   #13161f;
-    --surface2:  #1a1e2b;
-    --surface3:  #21263a;
-    --border:    #2a2f45;
-    --accent:    #7c6aff;
-    --accent2:   #4fc3f7;
-    --accent3:   #43e97b;
-    --think:     #f7971e;
-    --text:      #e8eaf6;
-    --text2:     #9099bb;
-    --text3:     #5a6280;
-    --red:       #ff5370;
-    --radius:    12px;
-    --radius-sm: 8px;
   }
   html, body {
     height: 100%;
     background: var(--bg);
     color: var(--text);
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     font-size: 14px;
     line-height: 1.6;
   }
   /* ── LAYOUT ───────────────────────────────────────────────────────── */
   .app {
     display: grid;
     grid-template-rows: auto 1fr;
-    grid-template-columns: 340px 1fr;
     grid-template-areas:
       "header header"
       "sidebar main";
@@ -52,8 +78,9 @@
     grid-area: header;
     display: flex;
     align-items: center;
-    gap: 16px;
-    padding: 12px 24px;
     background: var(--surface);
     border-bottom: 1px solid var(--border);
     z-index: 10;
@@ -62,42 +89,62 @@
   .logo {
     display: flex;
     align-items: center;
-    gap: 10px;
   }
   .logo-icon {
-    width: 36px;
-    height: 36px;
-    background: linear-gradient(135deg, var(--accent), var(--accent2));
-    border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 18px;
-    font-weight: 800;
-    color: white;
-    letter-spacing: -1px;
     flex-shrink: 0;
   }
   .logo-text h1 {
-    font-size: 16px;
     font-weight: 700;
-    background: linear-gradient(90deg, var(--accent), var(--accent2));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
   }
   .logo-text p {
-    font-size: 11px;
-    color: var(--text3);
   }
   .header-stats {
     margin-left: auto;
     display: flex;
-    gap: 12px;
     align-items: center;
   }
@@ -105,25 +152,28 @@
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: 20px;
-    padding: 4px 12px;
     font-size: 11px;
-    color: var(--text2);
     display: flex;
     align-items: center;
-    gap: 6px;
   }
   .stat-pill .dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background: var(--accent3);
     animation: pulse 2s infinite;
   }
   @keyframes pulse {
     0%, 100% { opacity: 1; }
-    50%       { opacity: 0.4; }
   }
   /* ── SIDEBAR ──────────────────────────────────────────────────────── */
@@ -138,70 +188,93 @@
   }
   .sidebar-section {
-    padding: 16px;
     border-bottom: 1px solid var(--border);
   }
   .sidebar-section:last-child { border-bottom: none; }
   .section-label {
     font-size: 10px;
-    font-weight: 700;
-    letter-spacing: 1px;
     text-transform: uppercase;
-    color: var(--text3);
-    margin-bottom: 12px;
   }
-  /* ── CONTEXT RING ─────────────────────────────────────────────────── */
   .ctx-ring-wrap {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 12px;
-    padding: 8px 0;
   }
   .ctx-ring-svg {
     position: relative;
-    width: 140px;
-    height: 140px;
   }
   .ctx-ring-svg svg {
-    width: 140px;
-    height: 140px;
-    transform: rotate(-90deg);
   }
   .ctx-track {
     fill: none;
     stroke: var(--surface3);
-    stroke-width: 10;
   }
   .ctx-prompt {
     fill: none;
-    stroke: var(--accent2);
-    stroke-width: 10;
     stroke-linecap: round;
     transition: stroke-dashoffset 0.3s ease;
   }
   .ctx-generated {
     fill: none;
-    stroke: var(--accent);
-    stroke-width: 10;
     stroke-linecap: round;
     transition: stroke-dashoffset 0.3s ease;
   }
   .ctx-think {
     fill: none;
-    stroke: var(--think);
-    stroke-width: 10;
     stroke-linecap: round;
     transition: stroke-dashoffset 0.3s ease;
   }
   .ctx-ring-center {
@@ -214,21 +287,26 @@
   }
   .ctx-ring-center .ctx-num {
-    font-size: 22px;
-    font-weight: 800;
     color: var(--text);
     line-height: 1;
   }
   .ctx-ring-center .ctx-denom {
-    font-size: 11px;
-    color: var(--text3);
   }
   .ctx-legend {
     display: flex;
     flex-direction: column;
-    gap: 6px;
     width: 100%;
   }
@@ -236,21 +314,22 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    font-size: 12px;
-    color: var(--text2);
   }
   .legend-dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 3px;
     flex-shrink: 0;
   }
   .legend-row span:last-child {
     margin-left: auto;
     font-variant-numeric: tabular-nums;
-    color: var(--text3);
     font-size: 11px;
   }
@@ -258,33 +337,39 @@
   .think-budget {
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
-    padding: 10px 12px;
   }
   .think-budget-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 8px;
-    font-size: 12px;
   }
   .think-budget-label {
-    color: var(--think);
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 6px;
   }
   .think-budget-val {
-    color: var(--text2);
     font-variant-numeric: tabular-nums;
   }
   .think-bar-track {
-    height: 6px;
     background: var(--surface3);
     border-radius: 3px;
     overflow: hidden;
@@ -292,40 +377,43 @@
   .think-bar-fill {
     height: 100%;
-    background: linear-gradient(90deg, var(--think), #ff6b6b);
     border-radius: 3px;
     transition: width 0.3s ease;
     width: 0%;
   }
   .think-hint {
     font-size: 10px;
-    color: var(--text3);
-    margin-top: 6px;
   }
   /* ── CONTROLS ─────────────────────────────────────────────────────── */
   label {
     display: block;
-    font-size: 11px;
     font-weight: 600;
-    color: var(--text3);
-    margin-bottom: 6px;
     text-transform: uppercase;
-    letter-spacing: 0.5px;
   }
   .slider-wrap {
     display: flex;
     align-items: center;
     gap: 10px;
-    margin-bottom: 14px;
   }
   input[type=range] {
     flex: 1;
     -webkit-appearance: none;
-    height: 4px;
     border-radius: 2px;
     background: var(--surface3);
     outline: none;
@@ -334,25 +422,42 @@
   input[type=range]::-webkit-slider-thumb {
     -webkit-appearance: none;
-    width: 14px;
-    height: 14px;
-    border-radius: 50%;
-    background: var(--accent);
     cursor: pointer;
-    transition: background 0.2s;
   }
   input[type=range]::-webkit-slider-thumb:hover {
-    background: var(--accent2);
   }
   .slider-val {
-    font-size: 12px;
     color: var(--text);
     font-variant-numeric: tabular-nums;
-    min-width: 36px;
     text-align: right;
     font-weight: 600;
   }
   /* ── EXAMPLES ─────────────────────────────────────────────────────── */
@@ -366,19 +471,24 @@
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
-    padding: 8px 10px;
-    color: var(--text2);
     font-size: 12px;
     cursor: pointer;
     text-align: left;
     transition: all 0.15s;
     line-height: 1.4;
   }
   .example-btn:hover {
-    border-color: var(--accent);
     color: var(--text);
     background: var(--surface3);
   }
   /* ── MAIN ─────────────────────────────────────────────────────────── */
@@ -389,14 +499,52 @@
     overflow: hidden;
   }
   /* ── CHAT AREA ────────────────────────────────────────────────────── */
   .chat-area {
     flex: 1;
     overflow-y: auto;
-    padding: 24px;
     display: flex;
     flex-direction: column;
-    gap: 16px;
   }
   .chat-area::-webkit-scrollbar { width: 6px; }
@@ -405,7 +553,7 @@
   /* ── MESSAGES ─────────────────────────────────────────────────────── */
   .msg {
-    max-width: 820px;
     width: 100%;
   }
@@ -421,35 +569,38 @@
     border-radius: var(--radius);
     padding: 14px 18px;
     line-height: 1.7;
   }
   .msg-user .msg-bubble {
-    background: linear-gradient(135deg, var(--accent), #5a4fcf);
-    color: white;
-    border-bottom-right-radius: 4px;
   }
   .msg-assistant .msg-bubble {
     background: var(--surface);
     border: 1px solid var(--border);
-    border-bottom-left-radius: 4px;
   }
   .msg-label {
-    font-size: 11px;
-    color: var(--text3);
-    margin-bottom: 6px;
     font-weight: 600;
     text-transform: uppercase;
-    letter-spacing: 0.5px;
   }
   .msg-user .msg-label { text-align: right; }
   /* ── THINK BLOCK ──────────────────────────────────────────────────── */
   .think-block {
-    background: rgba(247, 151, 30, 0.06);
-    border: 1px solid rgba(247, 151, 30, 0.25);
     border-radius: var(--radius-sm);
     margin-bottom: 12px;
     overflow: hidden;
@@ -459,17 +610,20 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    padding: 8px 12px;
-    background: rgba(247, 151, 30, 0.08);
-    border-bottom: 1px solid rgba(247, 151, 30, 0.15);
     cursor: pointer;
     user-select: none;
-    font-size: 12px;
     font-weight: 600;
-    color: var(--think);
   }
-  .think-header:hover { background: rgba(247, 151, 30, 0.12); }
   .think-chevron {
     margin-left: auto;
@@ -482,12 +636,12 @@
   }
   .think-body {
-    padding: 12px 14px;
-    font-size: 13px;
-    color: var(--text2);
     white-space: pre-wrap;
-    font-family: 'JetBrains Mono', 'Fira Code', monospace;
-    line-height: 1.6;
     max-height: 300px;
     overflow-y: auto;
   }
@@ -496,7 +650,7 @@
   /* ── CODE BLOCK ───────────────────────────────────────────────────── */
   .code-block {
-    background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     overflow: hidden;
@@ -507,32 +661,36 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 6px 12px;
     background: var(--surface3);
     border-bottom: 1px solid var(--border);
-    font-size: 11px;
-    color: var(--text3);
   }
   .copy-btn {
     background: none;
-    border: 1px solid var(--border);
     border-radius: 4px;
-    padding: 2px 8px;
-    color: var(--text3);
-    font-size: 11px;
     cursor: pointer;
     transition: all 0.15s;
   }
-  .copy-btn:hover { border-color: var(--accent); color: var(--accent); }
   pre {
-    padding: 14px;
     overflow-x: auto;
-    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
-    font-size: 13px;
-    line-height: 1.6;
     color: var(--text);
     margin: 0;
   }
@@ -548,7 +706,7 @@
     display: inline-block;
     width: 2px;
     height: 1em;
-    background: var(--accent);
     margin-left: 2px;
     vertical-align: text-bottom;
     animation: blink 0.8s steps(1) infinite;
@@ -556,34 +714,9 @@
   @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
-  /* ── STATUS BAR ───────────────────────────────────────────────────── */
-  .status-bar {
-    display: flex;
-    gap: 16px;
-    padding: 8px 18px;
-    background: var(--surface);
-    border-top: 1px solid var(--border);
-    border-bottom: 1px solid var(--border);
-    font-size: 11px;
-    color: var(--text3);
-    font-variant-numeric: tabular-nums;
-    flex-wrap: wrap;
-  }
-  .status-item {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-  .status-item .val {
-    color: var(--text2);
-    font-weight: 600;
-  }
   /* ── INPUT AREA ───────────────────────────────────────────────────── */
   .input-area {
-    padding: 16px 24px 20px;
     background: var(--surface);
     border-top: 1px solid var(--border);
   }
@@ -595,12 +728,13 @@
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    padding: 10px 12px;
-    transition: border-color 0.2s;
   }
   .input-wrap:focus-within {
-    border-color: var(--accent);
   }
   textarea {
@@ -609,8 +743,8 @@
     border: none;
     outline: none;
     color: var(--text);
-    font-size: 14px;
-    font-family: inherit;
     line-height: 1.6;
     resize: none;
     min-height: 44px;
@@ -618,16 +752,16 @@
     overflow-y: auto;
   }
-  textarea::placeholder { color: var(--text3); }
   .send-btn {
     width: 40px;
     height: 40px;
     border-radius: var(--radius-sm);
-    border: none;
-    background: linear-gradient(135deg, var(--accent), #5a4fcf);
-    color: white;
-    font-size: 18px;
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -637,20 +771,20 @@
   }
   .send-btn:hover:not(:disabled) {
-    transform: scale(1.05);
-    box-shadow: 0 4px 12px rgba(124, 106, 255, 0.4);
   }
-  .send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
   .stop-btn {
     width: 40px;
     height: 40px;
     border-radius: var(--radius-sm);
-    border: 1px solid var(--red);
-    background: rgba(255, 83, 112, 0.1);
-    color: var(--red);
-    font-size: 14px;
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -660,11 +794,27 @@
   }
   .stop-btn:hover {
-    background: rgba(255, 83, 112, 0.2);
   }
   .stop-btn.hidden { display: none; }
   /* ── EMPTY STATE ──────────────────────────────────────────────────── */
   .empty-state {
     flex: 1;
@@ -672,26 +822,38 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 16px;
-    opacity: 0.6;
     pointer-events: none;
   }
   .empty-icon {
-    font-size: 48px;
   }
   .empty-state h2 {
-    font-size: 20px;
     font-weight: 700;
-    color: var(--text2);
   }
   .empty-state p {
     font-size: 13px;
-    color: var(--text3);
     text-align: center;
     max-width: 300px;
   }
   /* ── SCROLLBAR ────────────────────────────────────────────────────── */
@@ -699,6 +861,12 @@
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
   /* ── RESPONSIVE ───────────────────────────────────────────────────── */
   @media (max-width: 700px) {
     .app {
@@ -707,11 +875,15 @@
       grid-template-areas: "header" "sidebar" "main";
     }
     .sidebar {
-      max-height: 260px;
       border-right: none;
       border-bottom: 1px solid var(--border);
     }
   }
 </style>
 </head>
 <body>
@@ -720,65 +892,71 @@
   <!-- ── HEADER ──────────────────────────────────────────────────────── -->
   <header>
     <div class="logo">
-      <div class="logo-icon">C2</div>
       <div class="logo-text">
-        <h1>CodVa-2</h1>
-        <p>213M · Instruction Tuned · SFT</p>
       </div>
     </div>
     <div class="header-stats">
       <div class="stat-pill">
         <div class="dot"></div>
         <span id="hdr-status">Ready</span>
       </div>
-      <div class="stat-pill">⚡ <span id="hdr-tps">—</span> tok/s</div>
-      <div class="stat-pill">🧠 213M params</div>
     </div>
   </header>
   <!-- ── SIDEBAR ─────────────────────────────────────────────────────── -->
   <aside class="sidebar">
-    <!-- Context Ring -->
     <div class="sidebar-section">
       <div class="section-label">Context Window</div>
       <div class="ctx-ring-wrap">
         <div class="ctx-ring-svg">
-          <svg viewBox="0 0 140 140">
-            <circle class="ctx-track" cx="70" cy="70" r="55"/>
             <!-- Prompt arc (cyan) -->
-            <circle class="ctx-prompt" id="ring-prompt" cx="70" cy="70" r="55"
               stroke-dasharray="345.6" stroke-dashoffset="345.6"/>
-            <!-- Think arc (orange) -->
-            <circle class="ctx-think" id="ring-think" cx="70" cy="70" r="55"
               stroke-dasharray="345.6" stroke-dashoffset="345.6"/>
-            <!-- Generated arc (purple) -->
-            <circle class="ctx-generated" id="ring-gen" cx="70" cy="70" r="55"
               stroke-dasharray="345.6" stroke-dashoffset="345.6"/>
           </svg>
           <div class="ctx-ring-center">
             <div class="ctx-num" id="ring-used">0</div>
-            <div class="ctx-denom">/ 2048</div>
           </div>
         </div>
         <div class="ctx-legend">
           <div class="legend-row">
-            <div class="legend-dot" style="background:var(--accent2)"></div>
             <span>Prompt</span>
             <span id="leg-prompt">0 tok</span>
           </div>
           <div class="legend-row">
-            <div class="legend-dot" style="background:var(--think)"></div>
             <span>Thinking</span>
             <span id="leg-think">0 tok</span>
           </div>
           <div class="legend-row">
-            <div class="legend-dot" style="background:var(--accent)"></div>
             <span>Response</span>
             <span id="leg-gen">0 tok</span>
           </div>
           <div class="legend-row">
-            <div class="legend-dot" style="background:var(--surface3)"></div>
             <span>Free</span>
             <span id="leg-free">2048 tok</span>
           </div>
@@ -792,7 +970,7 @@
       <div class="think-budget">
         <div class="think-budget-header">
           <div class="think-budget-label">
-            <span>🧠</span> Think tokens
           </div>
           <div class="think-budget-val">
             <span id="think-used">0</span> / <span id="think-max">512</span>
@@ -801,7 +979,7 @@
         <div class="think-bar-track">
           <div class="think-bar-fill" id="think-bar"></div>
         </div>
-        <div class="think-hint">Orange = model reasoning tokens</div>
       </div>
     </div>
@@ -839,22 +1017,22 @@
       <div class="section-label">Examples</div>
       <div class="examples-list">
         <button class="example-btn" onclick="setPrompt('Write a Python function to compute fibonacci numbers recursively with memoization')">
-          🐍 Fibonacci with memoization
         </button>
         <button class="example-btn" onclick="setPrompt('Implement a binary search algorithm in Python with detailed comments')">
-          🔍 Binary search
         </button>
         <button class="example-btn" onclick="setPrompt('Write a quicksort implementation and explain the time complexity')">
-          ⚡ Quicksort + complexity
         </button>
         <button class="example-btn" onclick="setPrompt('Create a Python class for a linked list with insert, delete, and search methods')">
-          🔗 Linked list class
         </button>
         <button class="example-btn" onclick="setPrompt('How do I reverse a string in Python? Show multiple methods')">
-          🔄 Reverse a string
         </button>
         <button class="example-btn" onclick="setPrompt('Explain what a decorator is in Python and write an example')">
-          🎨 Python decorators
         </button>
       </div>
     </div>
@@ -866,19 +1044,19 @@
     <!-- Status bar -->
     <div class="status-bar" id="status-bar">
-      <div class="status-item">🟢 <span class="val" id="st-state">Idle</span></div>
-      <div class="status-item">⏱ <span class="val" id="st-time">—</span></div>
-      <div class="status-item">⚡ <span class="val" id="st-tps">—</span> tok/s</div>
-      <div class="status-item">🔤 <span class="val" id="st-tokens">—</span> tokens</div>
-      <div class="status-item">💭 <span class="val" id="st-think">no thinking</span></div>
     </div>
     <!-- Chat area -->
     <div class="chat-area" id="chat-area">
       <div class="empty-state" id="empty-state">
-        <div class="empty-icon">🧠</div>
-        <h2>CodVa-2 SFT</h2>
-        <p>Instruction-tuned code assistant.<br>Ask me anything about code!</p>
       </div>
     </div>
@@ -895,6 +1073,7 @@
         <button class="stop-btn hidden" id="stop-btn" onclick="stopGen()" title="Stop generation">■</button>
         <button class="send-btn" id="send-btn" onclick="sendMessage()" title="Send (Ctrl+Enter)">▶</button>
       </div>
     </div>
   </main>
@@ -909,6 +1088,28 @@ let   thinkTokens = 0;
 let   genTokens   = 0;
 let   promptTokens = 0;
 // ── SLIDERS ──────────────────────────────────────────────────────────────
 function linkSlider(id, valId, decimals = 0) {
   const s = document.getElementById(id);
@@ -1046,7 +1247,7 @@ function renderAnswer(text, isStreaming) {
 function copyCode(btn) {
   const code = btn.closest('.code-block').querySelector('pre').textContent;
   navigator.clipboard.writeText(code).then(() => {
-    btn.textContent = 'Copied!';
     setTimeout(() => btn.textContent = 'Copy', 1500);
   });
 }
@@ -1069,7 +1270,7 @@ function addAssistantMsg() {
   const div = document.createElement('div');
   div.className = 'msg msg-assistant';
   div.innerHTML = `
-    <div class="msg-label">CodVa-2</div>
     <div class="msg-bubble" id="current-bubble">
       <span class="cursor"></span>
     </div>
@@ -1092,9 +1293,8 @@ function updateBubble(raw, streaming) {
     html += `
       <div class="think-block">
         <div class="think-header" onclick="toggleThink(this)">
-          <span>🧠</span>
-          <span>Thinking${streaming && !raw.includes('</THINK>') && !raw.includes('<|/think|>') ? '...' : ''}</span>
-          <span>~${thinkTokEst} tokens</span>
           <span class="think-chevron">▼</span>
         </div>
         <div class="think-body">${thinkContent.replace(/</g,'&lt;').replace(/>/g,'&gt;')}</div>
@@ -1123,9 +1323,12 @@ function updateStatus(state, tps, elapsed, tokens, thinkTok) {
   document.getElementById('st-time').textContent   = elapsed ? elapsed + 's' : '—';
   document.getElementById('st-tps').textContent    = tps ? tps : '—';
   document.getElementById('st-tokens').textContent = tokens ? tokens : '—';
-  document.getElementById('st-think').textContent  = thinkTok > 0 ? `${thinkTok} think tok` : 'no thinking';
   document.getElementById('hdr-status').textContent = state;
   document.getElementById('hdr-tps').textContent    = tps || '—';
 }
 // ── SEND MESSAGE ──────────────────────────────────────────────────────────
@@ -1211,7 +1414,7 @@ async function sendMessage() {
     }
   } catch (e) {
     const bubble = document.getElementById('current-bubble');
-    if (bubble) bubble.innerHTML = `<span style="color:var(--red)">Error: ${e.message}</span>`;
     updateStatus('Error', null, null, null, 0);
   }

 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>MiniCoder-1 Instruct · Inference Console</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
 <style>
   /* ── RESET & BASE ─────────────────────────────────────────────────── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   :root {
+    /* base surfaces — dim instrument-panel graphite */
+    --bg:          #0a0c0b;
+    --surface:     #111512;
+    --surface2:    #171d19;
+    --surface3:    #1e2621;
+    --border:      #253028;
+    --border-hi:   #3a4a3f;
+    /* signal colors — three token streams, each its own channel */
+    --sig-prompt:  #5fd0d6;   /* cyan   — prompt tokens   */
+    --sig-think:   #ffb454;   /* amber  — reasoning tokens */
+    --sig-gen:     #8b7bff;   /* violet — response tokens */
+    --sig-free:    #2a352d;
+    --ok:          #7ee787;
+    --danger:      #ff6b6b;
+    --text:        #e8ece6;
+    --text-dim:    #93a099;
+    --text-faint:  #56635b;
+    --radius:      10px;
+    --radius-sm:   6px;
+    --font-display: 'Space Grotesk', sans-serif;
+    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
+    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
   }
   html, body {
     height: 100%;
     background: var(--bg);
     color: var(--text);
+    font-family: var(--font-body);
     font-size: 14px;
     line-height: 1.6;
   }
+  /* faint fixed grain / vignette — sets the instrument-panel mood without being loud */
+  body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 999;
+    background:
+      radial-gradient(ellipse at 50% -10%, rgba(255,255,255,0.035), transparent 55%);
+    mix-blend-mode: screen;
+  }
   /* ── LAYOUT ───────────────────────────────────────────────────────── */
   .app {
     display: grid;
     grid-template-rows: auto 1fr;
+    grid-template-columns: 320px 1fr;
     grid-template-areas:
       "header header"
       "sidebar main";
     grid-area: header;
     display: flex;
     align-items: center;
+    gap: 18px;
+    padding: 0 22px;
+    height: 60px;
     background: var(--surface);
     border-bottom: 1px solid var(--border);
     z-index: 10;
   .logo {
     display: flex;
     align-items: center;
+    gap: 12px;
   }
   .logo-icon {
+    width: 34px;
+    height: 34px;
+    background: var(--surface3);
+    border: 1px solid var(--border-hi);
+    border-radius: var(--radius-sm);
     display: flex;
     align-items: center;
     justify-content: center;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--sig-think);
+    letter-spacing: -0.5px;
     flex-shrink: 0;
+    position: relative;
+  }
+  .logo-icon::after {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    border-radius: inherit;
+    box-shadow: 0 0 12px 0 rgba(255,180,84,0.25);
+    pointer-events: none;
   }
   .logo-text h1 {
+    font-family: var(--font-display);
+    font-size: 15px;
     font-weight: 700;
+    letter-spacing: 0.2px;
+    color: var(--text);
   }
   .logo-text p {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--text-faint);
+    letter-spacing: 0.5px;
+    margin-top: 1px;
+  }
+  .header-divider {
+    width: 1px;
+    height: 26px;
+    background: var(--border);
+    margin: 0 2px;
   }
   .header-stats {
     margin-left: auto;
     display: flex;
+    gap: 10px;
     align-items: center;
   }
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: 20px;
+    padding: 5px 12px;
+    font-family: var(--font-mono);
     font-size: 11px;
+    color: var(--text-dim);
     display: flex;
     align-items: center;
+    gap: 7px;
+    letter-spacing: 0.2px;
   }
   .stat-pill .dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
+    background: var(--ok);
+    box-shadow: 0 0 6px var(--ok);
     animation: pulse 2s infinite;
   }
   @keyframes pulse {
     0%, 100% { opacity: 1; }
+    50%       { opacity: 0.35; }
   }
   /* ── SIDEBAR ──────────────────────────────────────────────────────── */
   }
   .sidebar-section {
+    padding: 18px 16px;
     border-bottom: 1px solid var(--border);
   }
   .sidebar-section:last-child { border-bottom: none; }
   .section-label {
+    font-family: var(--font-mono);
     font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 1.4px;
     text-transform: uppercase;
+    color: var(--text-faint);
+    margin-bottom: 14px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .section-label::before {
+    content: "";
+    width: 3px;
+    height: 3px;
+    background: var(--text-faint);
+    border-radius: 50%;
   }
+  /* ── CONTEXT GAUGE (signature element) ───────────────────────────── */
   .ctx-ring-wrap {
     display: flex;
     flex-direction: column;
     align-items: center;
+    gap: 14px;
+    padding: 4px 0 2px;
   }
   .ctx-ring-svg {
     position: relative;
+    width: 152px;
+    height: 152px;
   }
   .ctx-ring-svg svg {
+    width: 152px;
+    height: 152px;
+  }
+  /* tick ring, decorative — analog gauge marks */
+  .ctx-ticks line {
+    stroke: var(--border-hi);
+    stroke-width: 1;
+  }
+  .ctx-ticks line.major {
+    stroke: var(--text-faint);
+    stroke-width: 1.5;
   }
   .ctx-track {
     fill: none;
     stroke: var(--surface3);
+    stroke-width: 8;
   }
   .ctx-prompt {
     fill: none;
+    stroke: var(--sig-prompt);
+    stroke-width: 8;
     stroke-linecap: round;
     transition: stroke-dashoffset 0.3s ease;
+    filter: drop-shadow(0 0 3px rgba(95,208,214,0.5));
   }
   .ctx-generated {
     fill: none;
+    stroke: var(--sig-gen);
+    stroke-width: 8;
     stroke-linecap: round;
     transition: stroke-dashoffset 0.3s ease;
+    filter: drop-shadow(0 0 3px rgba(139,123,255,0.5));
   }
   .ctx-think {
     fill: none;
+    stroke: var(--sig-think);
+    stroke-width: 8;
     stroke-linecap: round;
     transition: stroke-dashoffset 0.3s ease;
+    filter: drop-shadow(0 0 3px rgba(255,180,84,0.5));
   }
   .ctx-ring-center {
   }
   .ctx-ring-center .ctx-num {
+    font-family: var(--font-mono);
+    font-size: 24px;
+    font-weight: 700;
     color: var(--text);
     line-height: 1;
+    font-variant-numeric: tabular-nums;
   }
   .ctx-ring-center .ctx-denom {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--text-faint);
+    margin-top: 3px;
+    letter-spacing: 0.4px;
   }
   .ctx-legend {
     display: flex;
     flex-direction: column;
+    gap: 7px;
     width: 100%;
   }
     display: flex;
     align-items: center;
     gap: 8px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-dim);
   }
   .legend-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
     flex-shrink: 0;
   }
   .legend-row span:last-child {
     margin-left: auto;
     font-variant-numeric: tabular-nums;
+    color: var(--text-faint);
     font-size: 11px;
   }
   .think-budget {
     background: var(--surface2);
     border: 1px solid var(--border);
+    border-left: 2px solid var(--sig-think);
     border-radius: var(--radius-sm);
+    padding: 11px 13px;
   }
   .think-budget-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin-bottom: 9px;
   }
   .think-budget-label {
+    color: var(--sig-think);
+    font-family: var(--font-mono);
+    font-size: 11px;
     font-weight: 600;
+    letter-spacing: 0.3px;
     display: flex;
     align-items: center;
     gap: 6px;
+    text-transform: uppercase;
   }
   .think-budget-val {
+    color: var(--text-dim);
+    font-family: var(--font-mono);
+    font-size: 11px;
     font-variant-numeric: tabular-nums;
   }
   .think-bar-track {
+    height: 5px;
     background: var(--surface3);
     border-radius: 3px;
     overflow: hidden;
   .think-bar-fill {
     height: 100%;
+    background: var(--sig-think);
+    box-shadow: 0 0 6px rgba(255,180,84,0.6);
     border-radius: 3px;
     transition: width 0.3s ease;
     width: 0%;
   }
   .think-hint {
+    font-family: var(--font-mono);
     font-size: 10px;
+    color: var(--text-faint);
+    margin-top: 7px;
   }
   /* ── CONTROLS ─────────────────────────────────────────────────────── */
   label {
     display: block;
+    font-family: var(--font-mono);
+    font-size: 10px;
     font-weight: 600;
+    color: var(--text-faint);
+    margin-bottom: 7px;
     text-transform: uppercase;
+    letter-spacing: 0.8px;
   }
   .slider-wrap {
     display: flex;
     align-items: center;
     gap: 10px;
+    margin-bottom: 16px;
   }
   input[type=range] {
     flex: 1;
     -webkit-appearance: none;
+    height: 3px;
     border-radius: 2px;
     background: var(--surface3);
     outline: none;
   input[type=range]::-webkit-slider-thumb {
     -webkit-appearance: none;
+    width: 13px;
+    height: 13px;
+    border-radius: 3px;
+    background: var(--text);
+    border: 2px solid var(--bg);
+    box-shadow: 0 0 0 1px var(--border-hi);
     cursor: pointer;
+    transition: box-shadow 0.15s;
   }
   input[type=range]::-webkit-slider-thumb:hover {
+    box-shadow: 0 0 0 1px var(--sig-prompt), 0 0 8px rgba(95,208,214,0.5);
+  }
+  input[type=range]::-moz-range-thumb {
+    width: 13px;
+    height: 13px;
+    border-radius: 3px;
+    background: var(--text);
+    border: 2px solid var(--bg);
+    box-shadow: 0 0 0 1px var(--border-hi);
+    cursor: pointer;
   }
   .slider-val {
+    font-family: var(--font-mono);
+    font-size: 11px;
     color: var(--text);
     font-variant-numeric: tabular-nums;
+    min-width: 34px;
     text-align: right;
     font-weight: 600;
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 2px 5px;
   }
   /* ── EXAMPLES ─────────────────────────────────────────────────────── */
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
+    padding: 9px 11px;
+    color: var(--text-dim);
+    font-family: var(--font-body);
     font-size: 12px;
     cursor: pointer;
     text-align: left;
     transition: all 0.15s;
     line-height: 1.4;
+    display: flex;
+    align-items: center;
+    gap: 9px;
   }
   .example-btn:hover {
+    border-color: var(--sig-prompt);
     color: var(--text);
     background: var(--surface3);
+    transform: translateX(2px);
   }
   /* ── MAIN ─────────────────────────────────────────────────────────── */
     overflow: hidden;
   }
+  /* ── STATUS BAR ───────────────────────────────────────────────────── */
+  .status-bar {
+    display: flex;
+    gap: 20px;
+    padding: 9px 20px;
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-faint);
+    font-variant-numeric: tabular-nums;
+    flex-wrap: wrap;
+  }
+  .status-item {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+  .status-item .status-icon {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--text-faint);
+    flex-shrink: 0;
+  }
+  .status-item .status-icon.live {
+    background: var(--ok);
+    box-shadow: 0 0 5px var(--ok);
+    animation: pulse 1.4s infinite;
+  }
+  .status-item .val {
+    color: var(--text-dim);
+    font-weight: 600;
+  }
   /* ── CHAT AREA ────────────────────────────────────────────────────── */
   .chat-area {
     flex: 1;
     overflow-y: auto;
+    padding: 26px 28px;
     display: flex;
     flex-direction: column;
+    gap: 18px;
   }
   .chat-area::-webkit-scrollbar { width: 6px; }
   /* ── MESSAGES ─────────────────────────────────────────────────────── */
   .msg {
+    max-width: 800px;
     width: 100%;
   }
     border-radius: var(--radius);
     padding: 14px 18px;
     line-height: 1.7;
+    font-size: 13.5px;
   }
   .msg-user .msg-bubble {
+    background: var(--surface2);
+    border: 1px solid var(--border-hi);
+    border-right: 2px solid var(--sig-prompt);
+    color: var(--text);
   }
   .msg-assistant .msg-bubble {
     background: var(--surface);
     border: 1px solid var(--border);
+    border-left: 2px solid var(--sig-gen);
   }
   .msg-label {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--text-faint);
+    margin-bottom: 7px;
     font-weight: 600;
     text-transform: uppercase;
+    letter-spacing: 1px;
   }
   .msg-user .msg-label { text-align: right; }
   /* ── THINK BLOCK ──────────────────────────────────────────────────── */
   .think-block {
+    background: rgba(255, 180, 84, 0.05);
+    border: 1px solid rgba(255, 180, 84, 0.22);
     border-radius: var(--radius-sm);
     margin-bottom: 12px;
     overflow: hidden;
     display: flex;
     align-items: center;
     gap: 8px;
+    padding: 9px 12px;
+    background: rgba(255, 180, 84, 0.07);
+    border-bottom: 1px solid rgba(255, 180, 84, 0.15);
     cursor: pointer;
     user-select: none;
+    font-family: var(--font-mono);
+    font-size: 11px;
     font-weight: 600;
+    color: var(--sig-think);
+    letter-spacing: 0.3px;
+    text-transform: uppercase;
   }
+  .think-header:hover { background: rgba(255, 180, 84, 0.12); }
   .think-chevron {
     margin-left: auto;
   }
   .think-body {
+    padding: 13px 15px;
+    font-size: 12.5px;
+    color: var(--text-dim);
     white-space: pre-wrap;
+    font-family: var(--font-mono);
+    line-height: 1.65;
     max-height: 300px;
     overflow-y: auto;
   }
   /* ── CODE BLOCK ───────────────────────────────────────────────────── */
   .code-block {
+    background: #0d100e;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    padding: 7px 12px;
     background: var(--surface3);
     border-bottom: 1px solid var(--border);
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--text-faint);
+    letter-spacing: 0.3px;
+    text-transform: uppercase;
   }
   .copy-btn {
     background: none;
+    border: 1px solid var(--border-hi);
     border-radius: 4px;
+    padding: 2px 9px;
+    color: var(--text-dim);
+    font-family: var(--font-mono);
+    font-size: 10.5px;
     cursor: pointer;
     transition: all 0.15s;
   }
+  .copy-btn:hover { border-color: var(--sig-prompt); color: var(--sig-prompt); }
   pre {
+    padding: 15px;
     overflow-x: auto;
+    font-family: var(--font-mono);
+    font-size: 12.5px;
+    line-height: 1.65;
     color: var(--text);
     margin: 0;
   }
     display: inline-block;
     width: 2px;
     height: 1em;
+    background: var(--sig-gen);
     margin-left: 2px;
     vertical-align: text-bottom;
     animation: blink 0.8s steps(1) infinite;
   @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
   /* ── INPUT AREA ───────────────────────────────────────────────────── */
   .input-area {
+    padding: 16px 26px 22px;
     background: var(--surface);
     border-top: 1px solid var(--border);
   }
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: var(--radius);
+    padding: 11px 12px;
+    transition: border-color 0.2s, box-shadow 0.2s;
   }
   .input-wrap:focus-within {
+    border-color: var(--sig-prompt);
+    box-shadow: 0 0 0 3px rgba(95,208,214,0.08);
   }
   textarea {
     border: none;
     outline: none;
     color: var(--text);
+    font-size: 13.5px;
+    font-family: var(--font-body);
     line-height: 1.6;
     resize: none;
     min-height: 44px;
     overflow-y: auto;
   }
+  textarea::placeholder { color: var(--text-faint); }
   .send-btn {
     width: 40px;
     height: 40px;
     border-radius: var(--radius-sm);
+    border: 1px solid var(--border-hi);
+    background: var(--surface3);
+    color: var(--sig-prompt);
+    font-size: 15px;
     cursor: pointer;
     display: flex;
     align-items: center;
   }
   .send-btn:hover:not(:disabled) {
+    border-color: var(--sig-prompt);
+    box-shadow: 0 0 10px rgba(95,208,214,0.25);
   }
+  .send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
   .stop-btn {
     width: 40px;
     height: 40px;
     border-radius: var(--radius-sm);
+    border: 1px solid var(--danger);
+    background: rgba(255, 107, 107, 0.08);
+    color: var(--danger);
+    font-size: 13px;
     cursor: pointer;
     display: flex;
     align-items: center;
   }
   .stop-btn:hover {
+    background: rgba(255, 107, 107, 0.18);
   }
   .stop-btn.hidden { display: none; }
+  .input-hint {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--text-faint);
+    margin-top: 8px;
+    padding-left: 2px;
+  }
+  .input-hint kbd {
+    font-family: var(--font-mono);
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: 3px;
+    padding: 1px 5px;
+    color: var(--text-dim);
+  }
   /* ── EMPTY STATE ──────────────────────────────────────────────────── */
   .empty-state {
     flex: 1;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    gap: 14px;
     pointer-events: none;
   }
   .empty-icon {
+    width: 56px;
+    height: 56px;
+    border: 1px solid var(--border-hi);
+    border-radius: var(--radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-mono);
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--sig-think);
+    background: var(--surface2);
   }
   .empty-state h2 {
+    font-family: var(--font-display);
+    font-size: 19px;
     font-weight: 700;
+    color: var(--text);
   }
   .empty-state p {
     font-size: 13px;
+    color: var(--text-faint);
     text-align: center;
     max-width: 300px;
+    line-height: 1.6;
   }
   /* ── SCROLLBAR ────────────────────────────────────────────────────── */
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+  /* ── FOCUS VISIBILITY ─────────────────────────────────────────────── */
+  button:focus-visible, input:focus-visible, textarea:focus-visible {
+    outline: 2px solid var(--sig-prompt);
+    outline-offset: 2px;
+  }
   /* ── RESPONSIVE ───────────────────────────────────────────────────── */
   @media (max-width: 700px) {
     .app {
       grid-template-areas: "header" "sidebar" "main";
     }
     .sidebar {
+      max-height: 280px;
       border-right: none;
       border-bottom: 1px solid var(--border);
     }
   }
+  @media (prefers-reduced-motion: reduce) {
+    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
+  }
 </style>
 </head>
 <body>
   <!-- ── HEADER ──────────────────────────────────────────────────────── -->
   <header>
     <div class="logo">
+      <div class="logo-icon">M1</div>
       <div class="logo-text">
+        <h1>MiniCoder-1 Instruct</h1>
+        <p>213M · SFT · LOCAL INFERENCE</p>
       </div>
     </div>
+    <div class="header-divider"></div>
     <div class="header-stats">
       <div class="stat-pill">
         <div class="dot"></div>
         <span id="hdr-status">Ready</span>
       </div>
+      <div class="stat-pill"><span id="hdr-tps">—</span> tok/s</div>
+      <div class="stat-pill">213M params</div>
     </div>
   </header>
   <!-- ── SIDEBAR ─────────────────────────────────────────────────────── -->
   <aside class="sidebar">
+    <!-- Context Gauge -->
     <div class="sidebar-section">
       <div class="section-label">Context Window</div>
       <div class="ctx-ring-wrap">
         <div class="ctx-ring-svg">
+          <svg viewBox="0 0 152 152">
+            <!-- decorative tick ring -->
+            <g class="ctx-ticks" transform="translate(76,76)" id="ctx-ticks"></g>
+            <circle class="ctx-track" cx="76" cy="76" r="55" transform="rotate(-90 76 76)"/>
             <!-- Prompt arc (cyan) -->
+            <circle class="ctx-prompt" id="ring-prompt" cx="76" cy="76" r="55"
+              transform="rotate(-90 76 76)"
               stroke-dasharray="345.6" stroke-dashoffset="345.6"/>
+            <!-- Think arc (amber) -->
+            <circle class="ctx-think" id="ring-think" cx="76" cy="76" r="55"
+              transform="rotate(-90 76 76)"
               stroke-dasharray="345.6" stroke-dashoffset="345.6"/>
+            <!-- Generated arc (violet) -->
+            <circle class="ctx-generated" id="ring-gen" cx="76" cy="76" r="55"
+              transform="rotate(-90 76 76)"
               stroke-dasharray="345.6" stroke-dashoffset="345.6"/>
           </svg>
           <div class="ctx-ring-center">
             <div class="ctx-num" id="ring-used">0</div>
+            <div class="ctx-denom">/ 2048 TOK</div>
           </div>
         </div>
         <div class="ctx-legend">
           <div class="legend-row">
+            <div class="legend-dot" style="background:var(--sig-prompt)"></div>
             <span>Prompt</span>
             <span id="leg-prompt">0 tok</span>
           </div>
           <div class="legend-row">
+            <div class="legend-dot" style="background:var(--sig-think)"></div>
             <span>Thinking</span>
             <span id="leg-think">0 tok</span>
           </div>
           <div class="legend-row">
+            <div class="legend-dot" style="background:var(--sig-gen)"></div>
             <span>Response</span>
             <span id="leg-gen">0 tok</span>
           </div>
           <div class="legend-row">
+            <div class="legend-dot" style="background:var(--sig-free)"></div>
             <span>Free</span>
             <span id="leg-free">2048 tok</span>
           </div>
       <div class="think-budget">
         <div class="think-budget-header">
           <div class="think-budget-label">
+            Think tokens
           </div>
           <div class="think-budget-val">
             <span id="think-used">0</span> / <span id="think-max">512</span>
         <div class="think-bar-track">
           <div class="think-bar-fill" id="think-bar"></div>
         </div>
+        <div class="think-hint">Amber = model reasoning tokens</div>
       </div>
     </div>
       <div class="section-label">Examples</div>
       <div class="examples-list">
         <button class="example-btn" onclick="setPrompt('Write a Python function to compute fibonacci numbers recursively with memoization')">
+          <span>🐍</span> Fibonacci with memoization
         </button>
         <button class="example-btn" onclick="setPrompt('Implement a binary search algorithm in Python with detailed comments')">
+          <span>🔍</span> Binary search
         </button>
         <button class="example-btn" onclick="setPrompt('Write a quicksort implementation and explain the time complexity')">
+          <span>⚡</span> Quicksort + complexity
         </button>
         <button class="example-btn" onclick="setPrompt('Create a Python class for a linked list with insert, delete, and search methods')">
+          <span>🔗</span> Linked list class
         </button>
         <button class="example-btn" onclick="setPrompt('How do I reverse a string in Python? Show multiple methods')">
+          <span>🔄</span> Reverse a string
         </button>
         <button class="example-btn" onclick="setPrompt('Explain what a decorator is in Python and write an example')">
+          <span>🎨</span> Python decorators
         </button>
       </div>
     </div>
     <!-- Status bar -->
     <div class="status-bar" id="status-bar">
+      <div class="status-item"><span class="status-icon" id="st-icon"></span><span class="val" id="st-state">Idle</span></div>
+      <div class="status-item">TIME <span class="val" id="st-time">—</span></div>
+      <div class="status-item">SPEED <span class="val" id="st-tps">—</span> tok/s</div>
+      <div class="status-item">TOKENS <span class="val" id="st-tokens">—</span></div>
+      <div class="status-item">THINK <span class="val" id="st-think">no thinking</span></div>
     </div>
     <!-- Chat area -->
     <div class="chat-area" id="chat-area">
       <div class="empty-state" id="empty-state">
+        <div class="empty-icon">M1</div>
+        <h2>MiniCoder-1 Instruct</h2>
+        <p>Instruction-tuned code assistant. Ask for code, an explanation, or a debug pass.</p>
       </div>
     </div>
         <button class="stop-btn hidden" id="stop-btn" onclick="stopGen()" title="Stop generation">■</button>
         <button class="send-btn" id="send-btn" onclick="sendMessage()" title="Send (Ctrl+Enter)">▶</button>
       </div>
+      <div class="input-hint"><kbd>Ctrl</kbd> + <kbd>Enter</kbd> to send</div>
     </div>
   </main>
 let   genTokens   = 0;
 let   promptTokens = 0;
+// ── DECORATIVE TICK RING (signature gauge marks) ──────────────────────────
+(function drawTicks() {
+  const g = document.getElementById('ctx-ticks');
+  const rOuter = 68, rInnerMinor = 62, rInnerMajor = 59;
+  const count = 40;
+  let svgNS = "http://www.w3.org/2000/svg";
+  for (let i = 0; i < count; i++) {
+    const angle = (i / count) * 2 * Math.PI - Math.PI / 2;
+    const major = i % 5 === 0;
+    const rInner = major ? rInnerMajor : rInnerMinor;
+    const x1 = Math.cos(angle) * rOuter, y1 = Math.sin(angle) * rOuter;
+    const x2 = Math.cos(angle) * rInner, y2 = Math.sin(angle) * rInner;
+    const line = document.createElementNS(svgNS, 'line');
+    line.setAttribute('x1', x1.toFixed(2));
+    line.setAttribute('y1', y1.toFixed(2));
+    line.setAttribute('x2', x2.toFixed(2));
+    line.setAttribute('y2', y2.toFixed(2));
+    if (major) line.setAttribute('class', 'major');
+    g.appendChild(line);
+  }
+})();
 // ── SLIDERS ──────────────────────────────────────────────────────────────
 function linkSlider(id, valId, decimals = 0) {
   const s = document.getElementById(id);
 function copyCode(btn) {
   const code = btn.closest('.code-block').querySelector('pre').textContent;
   navigator.clipboard.writeText(code).then(() => {
+    btn.textContent = 'Copied';
     setTimeout(() => btn.textContent = 'Copy', 1500);
   });
 }
   const div = document.createElement('div');
   div.className = 'msg msg-assistant';
   div.innerHTML = `
+    <div class="msg-label">MiniCoder-1</div>
     <div class="msg-bubble" id="current-bubble">
       <span class="cursor"></span>
     </div>
     html += `
       <div class="think-block">
         <div class="think-header" onclick="toggleThink(this)">
+          <span>Reasoning${streaming && !raw.includes('</THINK>') && !raw.includes('<|/think|>') ? '...' : ''}</span>
+          <span>~${thinkTokEst} tok</span>
           <span class="think-chevron">▼</span>
         </div>
         <div class="think-body">${thinkContent.replace(/</g,'&lt;').replace(/>/g,'&gt;')}</div>
   document.getElementById('st-time').textContent   = elapsed ? elapsed + 's' : '—';
   document.getElementById('st-tps').textContent    = tps ? tps : '—';
   document.getElementById('st-tokens').textContent = tokens ? tokens : '—';
+  document.getElementById('st-think').textContent  = thinkTok > 0 ? `${thinkTok} tok` : 'no thinking';
   document.getElementById('hdr-status').textContent = state;
   document.getElementById('hdr-tps').textContent    = tps || '—';
+  const icon = document.getElementById('st-icon');
+  icon.classList.toggle('live', state === 'Generating...');
 }
 // ── SEND MESSAGE ──────────────────────────────────────────────────────────
     }
   } catch (e) {
     const bubble = document.getElementById('current-bubble');
+    if (bubble) bubble.innerHTML = `<span style="color:var(--danger)">Error: ${e.message}</span>`;
     updateStatus('Error', null, null, null, 0);
   }