feat(ui): WebUI modernization PR1 — hygiene, design tokens, type floor, self-hosted font

First PR of the WebUI modernization roadmap (Phase 0 + Phase 1 foundation).

Phase 0 — hygiene:
- Remove dead code: initParticles (targeted nonexistent #particles),
  addTypingIndicator (never called), #stats-bar element + writes,
  .li-spinner legacy CSS, dead .approval-dialog fallback branch.
- Deduplicate: extract resetTurnState() from the three identical
  streaming-state reset blocks (send / newSession / loadAndRenderSession);
  extract ensureSessionToken() from the two identical session-token
  bootstrap blocks (delete / rename); unify clipboard writes behind
  copyTextToClipboard() with execCommand fallback.
- Micro-bugs: collapse threshold mismatch (JS measured 500px, CSS capped
  460px — content could clip with no expander; now shared constant 460),
  escapeAttr now also escapes < and >, tb- class-prefix collision between
  topbar and tool blocks resolved (topbar renamed to top-*), Mesage typo.

Phase 1 — design system foundation:
- Token scales in :root: type (--fs-xs..xl, 11px floor), spacing
  (--space-1..8, 4px grid), radius (--r-sm/md/lg).
- 11px type floor: every font-size below 11px (42 declarations down to
  8px) raised to 11px for WCAG AA readability.
- Contrast: --text-3 lifted from #706e68 to #8a8880 (~5.5:1 on the carbon
  background) so tertiary text passes AA at the new floor size.
- Self-hosted font: Azeret Mono variable woff2 (26 KB, weights 100-700)
  embedded at ui/fonts/ and served at /fonts/azeret-mono.woff2 via the
  static file map; Google Fonts CDN links removed - the UI now works
  fully offline/air-gapped.

Verified: node --check, go vet, full cmd/odek test suite, and a live
smoke test of odek serve (/, /style.css, /app.js, /fonts/azeret-mono.woff2
all 200). No behavioral changes beyond readability improvements.

Author: jkyberneees

cmd/odek/serve.go

@@ -1748,6 +1748,9 @@ var staticFiles = map[string][2]string{
 	"/":          {"ui/index.html", "text/html; charset=utf-8"},
 	"/style.css": {"ui/style.css", "text/css; charset=utf-8"},
 	"/app.js":    {"ui/app.js", "application/javascript; charset=utf-8"},
+	// Self-hosted font (variable weight 100–700) so the UI works offline and
+	// does not depend on the Google Fonts CDN.
+	"/fonts/azeret-mono.woff2": {"ui/fonts/azeret-mono.woff2", "font/woff2"},
 }
 
 func handleStatic(wsToken string) http.HandlerFunc {

cmd/odek/ui/app.js

@@ -39,6 +39,26 @@ function clearSessionToken(sid) {
   localStorage.removeItem('odek_session_token_' + sid);
 }
 
+// ensureSessionToken returns a stored token for sid, bootstrapping one from
+// the server (GET /api/sessions/<id>) when missing. Used by session REST
+// mutations (rename/delete) whose tokens may predate this browser. Returns
+// '' on failure — the server will answer 401 if a token was required.
+async function ensureSessionToken(sid) {
+  let token = getSessionToken(sid);
+  if (token) return token;
+  try {
+    const bootstrap = await fetch('/api/sessions/' + encodeURIComponent(sid), {
+      headers: apiHeaders()
+    });
+    if (bootstrap.ok) {
+      const bs = await bootstrap.json();
+      token = bootstrap.headers.get('X-Session-Token') || bs.auth_token;
+      if (token) setSessionToken(sid, token);
+    }
+  } catch { /* continue — server will return 401 if token required */ }
+  return token || '';
+}
+
 // ── DOM ──
 const messagesEl = document.getElementById('messages');
 const promptEl = document.getElementById('prompt');
@@ -47,7 +67,6 @@ const completionEl = document.getElementById('completion');
 const statusEl = document.getElementById('ws-status');
 const dotEl = document.getElementById('ws-dot');
 const modelLabel = document.getElementById('model-label');
-const statsBar = document.getElementById('stats-bar');
 const sessionListEl = document.getElementById('session-list');
 const sidebarSearch = document.getElementById('sidebar-search');
 const emptyState = document.getElementById('empty-state');
@@ -73,6 +92,24 @@ let inToolGroup = false;
 // Timestamps for tool latency (name → start ms, queue-based like above).
 const toolStartQueues = new Map();
 
+// resetTurnState clears all per-turn streaming/tool/sub-agent state. Called
+// before a new turn (send), on new session, and when loading a session.
+function resetTurnState() {
+  streamBuffer = '';
+  if (streamRAF) {
+    cancelAnimationFrame(streamRAF);
+    streamRAF = null;
+  }
+  streamBubbleEl = null;
+  streamContentEl = null;
+  currentToolBlock = null;
+  subagentGroup = null;
+  thinkingContentEl = null;
+  toolBlockQueues.clear();
+  toolStartQueues.clear();
+  inToolGroup = false;
+}
+
 // ── Sub-agent state ──
 let subagentGroup = null;
 
@@ -173,10 +210,10 @@ function formatNum(n) {
   return String(n);
 }
 
-// ── Mesage cap ──
+// ── Message cap ──
 const MAX_MESSAGES = 80;
 function pruneMessages() {
-  const items = messagesEl.querySelectorAll(':scope > .msg, :scope > .tool-block, :scope > .subagent-group, :scope > .thinking-block, :scope > .typing-indicator');
+  const items = messagesEl.querySelectorAll(':scope > .msg, :scope > .tool-block, :scope > .subagent-group, :scope > .thinking-block');
   if (items.length > MAX_MESSAGES) {
     for (let i = 0, n = items.length - MAX_MESSAGES; i < n; i++) {
       items[i].remove();
@@ -190,22 +227,6 @@ promptEl.addEventListener('input', () => {
   promptEl.style.height = Math.min(promptEl.scrollHeight, 200) + 'px';
 });
 
-// ── Particles ──
-function initParticles() {
-  const el = document.getElementById('particles');
-  if (!el) return;
-  for (let i = 0; i < 15; i++) {
-    const p = document.createElement('div');
-    p.className = 'particle';
-    p.style.left = Math.random() * 100 + '%';
-    p.style.animationDelay = Math.random() * 6 + 's';
-    p.style.animationDuration = (4 + Math.random() * 4) + 's';
-    p.style.width = p.style.height = (1 + Math.random() * 3) + 'px';
-    el.appendChild(p);
-  }
-}
-initParticles();
-
 // ── WebSocket ──
 function getWsToken() {
   const meta = document.querySelector('meta[name="odek-ws-token"]');
@@ -233,7 +254,6 @@ function connect() {
     dotEl.className = 'dot connected';
     statusEl.textContent = 'connected';
     sendBtn.disabled = false;
-    statsBar.textContent = '';
     // Hide loading skeleton when connected
     if (skeletonEl) skeletonEl.classList.remove('visible');
   };
@@ -538,15 +558,6 @@ function addSystemMessage(content) {
   scrollBottom();
 }
 
-function addTypingIndicator() {
-  const el = document.createElement('div');
-  el.className = 'typing-indicator';
-  el.innerHTML = '<div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div>';
-  messagesEl.appendChild(el);
-  scrollBottom();
-  return el;
-}
-
 function addDivider(text) {
   const el = document.createElement('div');
   el.className = 'msg-divider';
@@ -906,8 +917,7 @@ window.showApprovalDialog = function(event) {
       frictionMsg = document.createElement('div');
       frictionMsg.id = 'approval-friction-msg';
       frictionMsg.style.cssText = 'color: var(--accent); font-size: 13px; margin-top: 8px;';
-      overlay.querySelector('.approval-dialog')?.appendChild(frictionMsg)
-        || document.getElementById('approval-actions').parentNode.insertBefore(frictionMsg, document.getElementById('approval-actions'));
+      document.getElementById('approval-actions').parentNode.insertBefore(frictionMsg, document.getElementById('approval-actions'));
     }
     frictionMsg.textContent =
       `⚠️ You have approved ${event.friction_approvals || 0} ${event.risk} operations in the last minute. ` +
@@ -968,19 +978,7 @@ window.executeDeleteSession = async function() {
   pendingDeleteId = null;
   document.getElementById('confirm-overlay').classList.remove('active');
 
-  let token = getSessionToken(sid);
-  if (!token) {
-    try {
-      const bootstrap = await fetch('/api/sessions/' + encodeURIComponent(sid), {
-        headers: apiHeaders()
-      });
-      if (bootstrap.ok) {
-        const bs = await bootstrap.json();
-        token = bootstrap.headers.get('X-Session-Token') || bs.auth_token;
-        if (token) setSessionToken(sid, token);
-      }
-    } catch { /* continue — server will return 401 if token required */ }
-  }
+  const token = await ensureSessionToken(sid);
 
   fetch('/api/sessions/' + encodeURIComponent(sid), {
     method: 'DELETE',
@@ -1114,19 +1112,7 @@ window.renameSession = async function(sid, el) {
   const newName = prompt('Rename session:', currentName);
   if (!newName || newName === currentName) return;
 
-  let token = getSessionToken(sid);
-  if (!token) {
-    try {
-      const bootstrap = await fetch('/api/sessions/' + encodeURIComponent(sid), {
-        headers: apiHeaders()
-      });
-      if (bootstrap.ok) {
-        const bs = await bootstrap.json();
-        token = bootstrap.headers.get('X-Session-Token') || bs.auth_token;
-        if (token) setSessionToken(sid, token);
-      }
-    } catch { /* continue — server will return 401 if token required */ }
-  }
+  const token = await ensureSessionToken(sid);
 
   fetch('/api/sessions/' + encodeURIComponent(sid), {
     method: 'POST',
@@ -1229,11 +1215,7 @@ window.newSession = function() {
   sessionId = null;
 
   // Reset all streaming + tool state.
-  streamBuffer = '';
-  if (streamRAF) { cancelAnimationFrame(streamRAF); streamRAF = null; }
-  streamBubbleEl = null; streamContentEl = null;
-  currentToolBlock = null; subagentGroup = null; thinkingContentEl = null;
-  toolBlockQueues.clear(); toolStartQueues.clear(); inToolGroup = false;
+  resetTurnState();
   busy = false;
   hideLoading(); hideCancel();
   sendBtn.disabled = !ws || ws.readyState !== WebSocket.OPEN;
@@ -1276,7 +1258,8 @@ function escapeAttr(s) {
   if (!s) return '';
   // & must be replaced first — doing it last double-escapes the entities
   // introduced by the quote replacements (&quot; → &amp;quot;).
-  return s.replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
+  return s.replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/'/g,'&#39;')
+          .replace(/</g,'&lt;').replace(/>/g,'&gt;');
 }
 
 // ── Markdown to HTML (safe, no DOMPurify needed since we control input) ──
@@ -1346,30 +1329,38 @@ function markdownToHtml(text) {
   return html;
 }
 
-// ── Copy code ──
+// ── Copy helpers ──
+// copyTextToClipboard writes text to the clipboard, falling back to the
+// legacy execCommand path when the async Clipboard API is unavailable or
+// denied (non-secure contexts). Returns a Promise.
+function copyTextToClipboard(text) {
+  const fallback = () => {
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    document.body.appendChild(ta);
+    ta.select();
+    document.execCommand('copy');
+    document.body.removeChild(ta);
+  };
+  if (!navigator.clipboard || !navigator.clipboard.writeText) {
+    fallback();
+    return Promise.resolve();
+  }
+  return navigator.clipboard.writeText(text).catch(fallback);
+}
+
 window.copyCode = function(el) {
   const block = el.closest('.code-block');
   if (!block) return;
   const code = block.querySelector('pre code');
   if (!code) return;
-  const text = code.textContent;
-  navigator.clipboard.writeText(text).then(() => {
+  copyTextToClipboard(code.textContent).then(() => {
     el.textContent = '✓ copied';
     el.classList.add('copied');
     setTimeout(() => {
       el.textContent = '📋 copy';
       el.classList.remove('copied');
     }, 2000);
-  }).catch(() => {
-    // Fallback
-    const ta = document.createElement('textarea');
-    ta.value = text;
-    document.body.appendChild(ta);
-    ta.select();
-    document.execCommand('copy');
-    document.body.removeChild(ta);
-    el.textContent = '✓ copied';
-    setTimeout(() => { el.textContent = '📋 copy'; }, 2000);
   });
 };
 
@@ -1403,19 +1394,7 @@ function send() {
   addMessage('user', display);
 
   // Reset streaming + tool state for the new turn.
-  streamBuffer = '';
-  if (streamRAF) {
-    cancelAnimationFrame(streamRAF);
-    streamRAF = null;
-  }
-  streamBubbleEl = null;
-  streamContentEl = null;
-  currentToolBlock = null;
-  subagentGroup = null;
-  thinkingContentEl = null;
-  toolBlockQueues.clear();
-  toolStartQueues.clear();
-  inToolGroup = false;
+  resetTurnState();
 
   busy = true;
   sendBtn.disabled = true;
@@ -1769,11 +1748,7 @@ async function loadAndRenderSession(sid) {
     sessionId = sid;
 
     // Clear current messages and reset all streaming state.
-    streamBuffer = '';
-    if (streamRAF) { cancelAnimationFrame(streamRAF); streamRAF = null; }
-    streamBubbleEl = null; streamContentEl = null;
-    currentToolBlock = null; subagentGroup = null; thinkingContentEl = null;
-    toolBlockQueues.clear(); toolStartQueues.clear(); inToolGroup = false;
+    resetTurnState();
     busy = false; hideLoading(); hideCancel();
     sendBtn.disabled = !ws || ws.readyState !== WebSocket.OPEN;
     promptEl.disabled = false;
@@ -1972,14 +1947,14 @@ window.copyMessage = function(btn, content) {
     }
   }
   if (!content) return;
-  navigator.clipboard.writeText(content).then(function() {
+  copyTextToClipboard(content).then(function() {
     btn.classList.add('copied');
     btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Copied';
     setTimeout(function() {
       btn.classList.remove('copied');
       btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
     }, 2000);
-  }).catch(function(){});
+  });
 };
 
 // ── Phase 1: Add copy buttons to rendered messages ──
@@ -1994,9 +1969,11 @@ function addCopyButton(bubble) {
 }
 
 // ── Phase 1: Collapse long messages after rendering ──
+// Must match the max-height of .bubble.collapsible in style.css.
+const COLLAPSE_MAX_HEIGHT_PX = 460;
 function checkCollapse(bubble) {
   var content = bubble.querySelector('.content');
-  if (!content || content.scrollHeight <= 500) return;
+  if (!content || content.scrollHeight <= COLLAPSE_MAX_HEIGHT_PX) return;
   bubble.classList.add('collapsible');
   var toggle = document.createElement('div');
   toggle.className = 'collapse-toggle';

cmd/odek/ui/fonts/azeret-mono.woff2

@@ -5,10 +5,8 @@
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <meta name="odek-ws-token" content="{{ODEK_WS_TOKEN}}"/>
 <title>odek ⚡</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=Azeret+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css"/>
+<link rel="preload" href="/fonts/azeret-mono.woff2" as="font" type="font/woff2" crossorigin>
 </head>
 <body>
 <div id="app">
@@ -17,17 +15,16 @@
     <button id="hamburger-btn" onclick="toggleSidebar()" aria-label="Toggle sidebar">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
     </button>
-    <span class="tb-brand"><span class="tb-brand-text">odek</span></span>
-    <span class="tb-status-group">
+    <span class="top-brand"><span class="top-brand-text">odek</span></span>
+    <span class="top-status-group">
       <span class="dot" id="ws-dot"></span>
       <span class="status" id="ws-status">connecting</span>
       <span id="sandbox-badge" style="display:none" title="Sandbox mode — shell commands run in an isolated Docker container">🔒</span>
     </span>
-    <div class="tb-spacer"></div>
-    <div class="stats" id="stats-bar"></div>
+    <div class="top-spacer"></div>
     <span class="session-stats" id="session-stats"></span>
     <span class="model" id="model-label"></span>
-    <div class="tb-controls">
+    <div class="top-controls">
       <select id="model-picker" onchange="onPickerChange(this.value)" title="Switch model">
         <option value="">Loading...</option>
       </select>