From c3991d2b605091077e86978f6ff57903258e9cad Mon Sep 17 00:00:00 2001
From: Rolando Santamaria Maso <kyberneees@gmail.com>
Date: Sun, 26 Jul 2026 15:46:19 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui):=20WebUI=20modernization=20PR7=20?=
 =?UTF-8?q?=E2=80=94=20mobile=20layout=20+=20WCAG=20accessibility=20pass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Accessibility (desktop visuals unchanged):
- Landmarks: <header> topbar, <nav aria-label="Sessions"> sidebar,
  <main> chat column; #messages is now role="log" aria-live="polite"
  aria-relevant="additions".
- Visually-hidden #sr-status live region + announce() helper; announces
  connection state, system/error messages, approval shown/answered
  (with risk class), session loaded/renamed/deleted.
- Dialog semantics: shortcuts + confirm overlays get role="dialog"
  aria-modal="true" aria-labelledby; focus moves in on open
  (data-autofocus), returns on close, Tab cycles within (openDialog/
  closeDialog/focus trap in utils.js); Escape closes via the same helper.
- Keyboard activation: role="button" tabindex="0" + Enter/Space for
  .tb-header, .thinking-toggle, .tb-result-more, .collapse-toggle,
  .es-hints spans, .chip-remove; aria-expanded tracked on disclosure
  toggles and the hamburger.
- :focus-visible ring now covers [tabindex]/[role="button"] (the dead
  [onclick] selector was removed); shortcuts dialog documents @
  completion navigation.

Mobile (all inside @media (max-width: 767px), except 100dvh):
- #app uses 100dvh with 100vh fallback; grid rows go auto so the topbar
  can grow to two rows — model picker + custom-model input wrap to a
  second row inside .top-controls, theme/cancel stay on row one.
- Sidebar becomes an over-top drawer (top:0, z-index 30) so the taller
  topbar never clips it.
- ≥40px touch targets via padding/min-size: hamburger, theme, cancel,
  new-session, session row actions, attach, scroll-bottom, approval
  action buttons.
- Approval card full-width minus margins; toast wraps at 92vw instead
  of overflowing; completion popup verified full-width of input row.
---
 cmd/odek/ui/index.html      | 32 ++++++++++---------
 cmd/odek/ui/js/approvals.js |  5 ++-
 cmd/odek/ui/js/input.js     | 12 +++++++
 cmd/odek/ui/js/main.js      | 18 +++++++----
 cmd/odek/ui/js/render.js    | 27 ++++++++++++----
 cmd/odek/ui/js/sessions.js  | 15 ++++++---
 cmd/odek/ui/js/utils.js     | 63 ++++++++++++++++++++++++++++++++++++-
 cmd/odek/ui/js/ws.js        |  4 ++-
 cmd/odek/ui/style.css       | 41 ++++++++++++++++++++----
 9 files changed, 178 insertions(+), 39 deletions(-)
diff --git a/cmd/odek/ui/index.html b/cmd/odek/ui/index.html
index 78b869f..3140f4e 100644
--- a/cmd/odek/ui/index.html
+++ b/cmd/odek/ui/index.html
@@ -11,7 +11,7 @@
 <body>
 <div id="app">
   <!-- Top Bar -->
-  <div id="topbar">
+  <header id="topbar">
     <button id="hamburger-btn" 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>
@@ -34,28 +34,28 @@
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
       </button>
     </div>
-  </div>
+  </header>
 
   <!-- Sidebar -->
-  <div id="sidebar">
+  <nav id="sidebar" aria-label="Sessions">
     <div id="sidebar-header">
       <h3>Sessions</h3>
       <button class="new-session-btn" title="New session">＋</button>
     </div>
     <input id="sidebar-search" type="text" placeholder="Filter…" />
     <div id="session-list"></div>
-  </div>
+  </nav>
 
   <div id="sidebar-overlay"></div>
 
   <!-- Main Chat -->
-  <div id="main">
+  <main id="main">
     <div id="loading-skeleton">
       <div class="skeleton-bar"></div>
       <div class="skeleton-bar"></div>
       <div class="skeleton-bar"></div>
     </div>
-    <div id="messages">
+    <div id="messages" role="log" aria-live="polite" aria-relevant="additions">
       <button id="scroll-bottom-btn" aria-label="Scroll to bottom">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
       </button>
@@ -65,8 +65,8 @@ <h3>Sessions</h3>
           <div class="es-name">odek</div>
           <p class="es-sub">autonomous agent runtime</p>
           <div class="es-hints">
-            <span>shortcuts /?/</span>
-            <span>refresh sessions</span>
+            <span role="button" tabindex="0">shortcuts /?/</span>
+            <span role="button" tabindex="0">refresh sessions</span>
           </div>
         </div>
       </div>
@@ -91,18 +91,19 @@ <h3>Sessions</h3>
         </div>
       </div>
     </div>
-  </div>
+  </main>
 </div>
 
 <!-- Keyboard Shortcuts -->
 <div id="shortcuts-overlay">
-  <div id="shortcuts-dialog">
-    <h3>Keyboard shortcuts</h3>
+  <div id="shortcuts-dialog" role="dialog" aria-modal="true" aria-labelledby="shortcuts-title" tabindex="-1">
+    <h3 id="shortcuts-title">Keyboard shortcuts</h3>
     <div class="shortcut-row"><span class="sc-label">Send message</span><span class="sc-key">Enter</span></div>
     <div class="shortcut-row"><span class="sc-label">New line</span><span class="sc-key">Shift+Enter</span></div>
     <div class="shortcut-row"><span class="sc-label">History up</span><span class="sc-key">↑</span></div>
     <div class="shortcut-row"><span class="sc-label">History down</span><span class="sc-key">↓</span></div>
     <div class="shortcut-row"><span class="sc-label">File/session reference</span><span class="sc-key">@</span></div>
+    <div class="shortcut-row"><span class="sc-label">Completion navigation</span><span class="sc-key">↑↓ · Enter/Tab · Esc</span></div>
     <div class="shortcut-row"><span class="sc-label">Toggle shortcuts</span><span class="sc-key">?</span></div>
     <div class="shortcut-row"><span class="sc-label">Refresh sessions</span><span class="sc-key">⌘R</span></div>
     <div class="shortcut-row"><span class="sc-label">Toggle thinking</span><span class="sc-key">Alt+T</span></div>
@@ -114,17 +115,20 @@ <h3>Keyboard shortcuts</h3>
 
 <!-- Confirm Dialog -->
 <div id="confirm-overlay">
-  <div id="confirm-dialog">
+  <div id="confirm-dialog" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
     <div class="confirm-icon">⚠</div>
-    <h3>Delete session?</h3>
+    <h3 id="confirm-title">Delete session?</h3>
     <p id="confirm-msg">This action cannot be undone.</p>
     <div id="confirm-actions">
-      <button class="cancel">Cancel</button>
+      <button class="cancel" data-autofocus>Cancel</button>
       <button class="delete-confirm" id="confirm-delete-btn">Delete</button>
     </div>
   </div>
 </div>
 
+<!-- Screen-reader-only live status region (announce() in js/utils.js) -->
+<div id="sr-status" class="sr-only" role="status" aria-live="polite"></div>
+
 <div class="toast" id="toast"></div>
 
 <script type="module" src="/app.js"></script>
diff --git a/cmd/odek/ui/js/approvals.js b/cmd/odek/ui/js/approvals.js
index 62d0808..b65d007 100644
--- a/cmd/odek/ui/js/approvals.js
+++ b/cmd/odek/ui/js/approvals.js
@@ -2,7 +2,7 @@
 // inline decision card pinned at the bottom of the message stream.
 import { S } from './state.js';
 import { messagesEl } from './dom.js';
-import { forceScrollBottom } from './utils.js';
+import { forceScrollBottom, announce } from './utils.js';
 import { hideEmptyState } from './render.js';
 
 // Approval requests are queued and rendered one at a time as an inline
@@ -193,6 +193,7 @@ function renderApprovalCard(event) {
   messagesEl.appendChild(card);
   forceScrollBottom();
   card.focus({ preventScroll: true });
+  announce('Approval required: ' + (event.risk || 'unknown') + ' risk operation');
 }
 
 export function sendApproval(action) {
@@ -211,6 +212,8 @@ export function sendApproval(action) {
   S.approvalQueue.shift();
   removeActiveApprovalCard();
   showNextApproval();
+  announce(action === 'trust' ? 'Risk class trusted for this session' :
+           action === 'approve' ? 'Approved' : 'Denied');
 }
 
 // Keyboard operation while an approval card is active. Ignored when the
diff --git a/cmd/odek/ui/js/input.js b/cmd/odek/ui/js/input.js
index 97dac8b..d2cc4f1 100644
--- a/cmd/odek/ui/js/input.js
+++ b/cmd/odek/ui/js/input.js
@@ -107,7 +107,13 @@ function renderFileChips() {
     const remove = document.createElement('span');
     remove.className = 'chip-remove';
     remove.textContent = '✕';
+    remove.setAttribute('role', 'button');
+    remove.setAttribute('tabindex', '0');
+    remove.setAttribute('aria-label', 'Remove ' + f.name);
     remove.addEventListener('click', () => removeAttachedFile(i));
+    remove.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); removeAttachedFile(i); }
+    });
 
     chip.append(icon, name, size, remove);
     fileChips.appendChild(chip);
@@ -139,10 +145,16 @@ function addErrorChip(name, reason) {
   const remove = document.createElement('span');
   remove.className = 'chip-remove';
   remove.textContent = '✕';
+  remove.setAttribute('role', 'button');
+  remove.setAttribute('tabindex', '0');
+  remove.setAttribute('aria-label', 'Dismiss');
   chip.append(icon, label, remove);
   fileChips.appendChild(chip);
   const dismiss = () => chip.remove();
   remove.addEventListener('click', dismiss);
+  remove.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); dismiss(); }
+  });
   setTimeout(dismiss, 6000);
 }
 
diff --git a/cmd/odek/ui/js/main.js b/cmd/odek/ui/js/main.js
index 5ddc939..6e24eab 100644
--- a/cmd/odek/ui/js/main.js
+++ b/cmd/odek/ui/js/main.js
@@ -3,7 +3,7 @@
 import { S, getSessionToken } from './state.js';
 import { apiHeaders } from './net.js';
 import { promptEl, skeletonEl, thinkBtn } from './dom.js';
-import { escapeHtml, escapeAttr, showToast, toggleShortcuts, hideCancel } from './utils.js';
+import { escapeHtml, escapeAttr, showToast, toggleShortcuts, hideCancel, closeDialog } from './utils.js';
 import { addSystemMessage } from './render.js';
 import { loadSessions } from './sessions.js';
 import { connect } from './ws.js';
@@ -16,11 +16,18 @@ S.savedEmptyStateNode = document.getElementById('empty-state');
 S.savedScrollBtnNode = document.getElementById('scroll-bottom-btn');
 
 // Empty-state hint actions (the saved node is re-appended on session
-// switches, so direct listeners persist).
+// switches, so direct listeners persist). The hints are role="button"
+// spans, so Enter/Space must activate them like a click.
+function activateOnKey(el, fn) {
+  el.addEventListener('click', fn);
+  el.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fn(); }
+  });
+}
 if (S.savedEmptyStateNode) {
   const hints = S.savedEmptyStateNode.querySelectorAll('.es-hints span');
-  if (hints[0]) hints[0].addEventListener('click', toggleShortcuts);
-  if (hints[1]) hints[1].addEventListener('click', loadSessions);
+  if (hints[0]) activateOnKey(hints[0], toggleShortcuts);
+  if (hints[1]) activateOnKey(hints[1], loadSessions);
 }
 
 // ── Theme Toggle ──
@@ -189,8 +196,7 @@ document.addEventListener('keydown', (e) => {
   // Escape closes overlays. Approval cards are deliberately NOT dismissed —
   // a decision must be made explicitly.
   if (e.key === 'Escape') {
-    document.getElementById('shortcuts-overlay').classList.remove('active');
-    document.getElementById('confirm-overlay').classList.remove('active');
+    closeDialog(); // whichever overlay dialog is open (shortcuts / confirm)
     S.pendingDeleteId = null;
   }
   // Ctrl+R refreshes sessions
diff --git a/cmd/odek/ui/js/render.js b/cmd/odek/ui/js/render.js
index 6282ad5..6b5430b 100644
--- a/cmd/odek/ui/js/render.js
+++ b/cmd/odek/ui/js/render.js
@@ -6,7 +6,7 @@ import { messagesEl, promptEl, sendBtn, emptyState } from './dom.js';
 import {
   escapeHtml, escapeAttr, truncateStr, copyTextToClipboard,
   pruneMessages, scrollBottom, forceScrollBottom, stripAttachmentBodies,
-  showCancel, hideCancel,
+  showCancel, hideCancel, announce,
 } from './utils.js';
 import { markdownToHtml } from './markdown.js';
 
@@ -88,7 +88,7 @@ export function streamThinking(content) {
     const block = document.createElement('div');
     block.className = 'thinking-block';
     block.innerHTML =
-      '<div class="thinking-toggle">' +
+      '<div class="thinking-toggle" role="button" tabindex="0" aria-expanded="false">' +
         '<span class="arrow">▶</span> reasoning' +
       '</div>' +
       '<div class="thinking-content">' + escapeHtml(content) + '</div>';
@@ -110,6 +110,7 @@ function toggleThinking(el) {
   if (content) {
     content.classList.toggle('open');
     arrow.classList.toggle('open');
+    el.setAttribute('aria-expanded', content.classList.contains('open'));
     // Auto-open on first click
     if (content.classList.contains('open')) {
       scrollBottom();
@@ -248,6 +249,7 @@ export function addSystemMessage(content) {
   el.className = 'msg system';
   el.innerHTML = '<div class="bubble"><div class="content">' + escapeHtml(content) + '</div></div>';
   messagesEl.appendChild(el);
+  announce(content);
   pruneMessages();
   scrollBottom();
 }
@@ -346,7 +348,7 @@ export function addToolCall(name, data) {
   const el = document.createElement('div');
   el.className = 'tool-block';
   el.innerHTML =
-    '<div class="tb-header">' +
+    '<div class="tb-header" role="button" tabindex="0" aria-expanded="false">' +
       '<span class="arrow">▶</span>' +
       ' <span class="tb-emoji">' + emoji + '</span>' +
       ' <span class="tb-name">' + escapeHtml(name) + '</span>' +
@@ -381,7 +383,7 @@ function appendToolResultContent(block, output) {
   if (truncated) {
     resultEl.innerHTML =
       escapeHtml(output.slice(0, MAX_RESULT)) +
-      '<span class="tb-result-more" data-full="' +
+      '<span class="tb-result-more" role="button" tabindex="0" data-full="' +
         escapeAttr(output) + '"> …show all (' + output.length + ' chars)</span>';
   } else {
     resultEl.textContent = output || '';
@@ -421,6 +423,7 @@ function toggleToolBody(header) {
   if (body) {
     body.classList.toggle('open');
     arrow.classList.toggle('open');
+    header.setAttribute('aria-expanded', body.classList.contains('open'));
   }
 }
 
@@ -645,7 +648,7 @@ function renderHistoricalThinking(content) {
   const block = document.createElement('div');
   block.className = 'thinking-block';
   block.innerHTML =
-    '<div class="thinking-toggle">' +
+    '<div class="thinking-toggle" role="button" tabindex="0" aria-expanded="false">' +
       '<span class="arrow">▶</span> reasoning' +
     '</div>' +
     '<div class="thinking-content">' + escapeHtml(content) + '</div>';
@@ -659,7 +662,7 @@ function renderHistoricalToolBlock(name, args, result) {
   const el = document.createElement('div');
   el.className = 'tool-block';
   el.innerHTML =
-    '<div class="tb-header">' +
+    '<div class="tb-header" role="button" tabindex="0" aria-expanded="false">' +
       '<span class="arrow">▶</span>' +
       ' <span class="tb-emoji">' + toolEmoji(name) + '</span>' +
       ' <span class="tb-name">' + escapeHtml(name) + '</span>' +
@@ -722,6 +725,8 @@ function checkCollapse(bubble) {
   bubble.classList.add('collapsible');
   const toggle = document.createElement('div');
   toggle.className = 'collapse-toggle';
+  toggle.setAttribute('role', 'button');
+  toggle.setAttribute('tabindex', '0');
   toggle.textContent = 'Show more ▼';
   bubble.appendChild(toggle);
 }
@@ -797,3 +802,13 @@ messagesEl.addEventListener('click', (e) => {
   const saDetails = t.closest('.sa-details');
   if (saDetails) { toggleSaDetails(saDetails); return; }
 });
+
+// Keyboard activation for the role="button" elements above: Enter/Space
+// re-dispatches as a click so the same delegation handles it.
+messagesEl.addEventListener('keydown', (e) => {
+  if (e.key !== 'Enter' && e.key !== ' ') return;
+  const btn = e.target.closest('[role="button"]');
+  if (!btn || !messagesEl.contains(btn)) return;
+  e.preventDefault();
+  btn.click();
+});
diff --git a/cmd/odek/ui/js/sessions.js b/cmd/odek/ui/js/sessions.js
index b0c7e70..3a8f185 100644
--- a/cmd/odek/ui/js/sessions.js
+++ b/cmd/odek/ui/js/sessions.js
@@ -3,7 +3,7 @@
 import { S, getSessionToken, setSessionToken, clearSessionToken, ensureSessionToken } from './state.js';
 import { apiHeaders } from './net.js';
 import { messagesEl, promptEl, sendBtn, sessionListEl, sidebarSearch, sidebarOverlay } from './dom.js';
-import { escapeHtml, escapeAttr, relativeTime, showToast, forceScrollBottom, hideCancel } from './utils.js';
+import { escapeHtml, escapeAttr, relativeTime, showToast, forceScrollBottom, hideCancel, announce, openDialog, closeDialog, isDialogOpen } from './utils.js';
 import { resetTurnState, hideLoading, renderSessionHistory } from './render.js';
 import { removeActiveApprovalCard } from './approvals.js';
 
@@ -131,6 +131,7 @@ export async function loadAndRenderSession(sid) {
 
     forceScrollBottom();
     showToast('Session loaded');
+    announce('Session loaded');
   } catch (err) {
     showToast('Error loading session');
   }
@@ -189,13 +190,16 @@ async function doRenameSession(sid, newName) {
       if (!resp.ok) throw new Error('rename failed');
       loadSessions();
       showToast('Session renamed');
+      announce('Session renamed');
     })
     .catch(() => showToast('Failed to rename session'));
 }
 
 // ── Confirm Dialog ──
 export function hideConfirmDialog() {
-  document.getElementById('confirm-overlay').classList.remove('active');
+  const overlay = document.getElementById('confirm-overlay');
+  if (isDialogOpen(overlay)) closeDialog();
+  else overlay.classList.remove('active');
   S.pendingDeleteId = null;
 }
 
@@ -203,7 +207,7 @@ export async function executeDeleteSession() {
   if (!S.pendingDeleteId) return;
   const sid = S.pendingDeleteId;
   S.pendingDeleteId = null;
-  document.getElementById('confirm-overlay').classList.remove('active');
+  hideConfirmDialog();
 
   const token = await ensureSessionToken(sid);
 
@@ -215,6 +219,7 @@ export async function executeDeleteSession() {
       clearSessionToken(sid);
       if (S.sessionId === sid) newSession();
       loadSessions();
+      announce('Session deleted');
     })
     .catch(() => showToast('Failed to delete session'));
 }
@@ -225,6 +230,8 @@ export function toggleSidebar() {
   if (!sidebar) return;
   sidebar.classList.toggle('active');
   if (sidebarOverlay) sidebarOverlay.classList.toggle('active');
+  const hamburger = document.getElementById('hamburger-btn');
+  if (hamburger) hamburger.setAttribute('aria-expanded', sidebar.classList.contains('active'));
 }
 
 // ── Session list click delegation ──
@@ -239,7 +246,7 @@ sessionListEl.addEventListener('click', (e) => {
     e.stopPropagation();
     S.pendingDeleteId = sid;
     document.getElementById('confirm-msg').textContent = 'Delete session ' + sid.slice(0, 8) + '...?';
-    document.getElementById('confirm-overlay').classList.add('active');
+    openDialog(document.getElementById('confirm-overlay'));
     return;
   }
 
diff --git a/cmd/odek/ui/js/utils.js b/cmd/odek/ui/js/utils.js
index b31f5fd..0082c07 100644
--- a/cmd/odek/ui/js/utils.js
+++ b/cmd/odek/ui/js/utils.js
@@ -135,5 +135,66 @@ export function hideCancel() {
 }
 
 export function toggleShortcuts() {
-  document.getElementById('shortcuts-overlay').classList.toggle('active');
+  const overlay = document.getElementById('shortcuts-overlay');
+  if (isDialogOpen(overlay)) closeDialog();
+  else openDialog(overlay);
 }
+
+// ── Screen-reader announcements ──
+// announce writes to the visually-hidden #sr-status live region. The clear-
+// then-set cycle forces re-announcement of identical consecutive messages.
+export function announce(msg) {
+  const el = document.getElementById('sr-status');
+  if (!el) return;
+  el.textContent = '';
+  setTimeout(() => { el.textContent = msg; }, 30);
+}
+
+// ── Modal dialog focus management ──
+// openDialog moves focus into the dialog, closeDialog returns it to the
+// previously focused element, and a global Tab handler cycles focus within
+// the open dialog (focus trap). Only one modal dialog is open at a time.
+const FOCUSABLE_SEL = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+let activeDialog = null; // { overlay, returnFocus }
+
+export function openDialog(overlay) {
+  if (!overlay) return;
+  closeDialog();
+  const dialog = overlay.querySelector('[role="dialog"]');
+  activeDialog = { overlay, returnFocus: document.activeElement };
+  overlay.classList.add('active');
+  if (dialog) {
+    const preferred = dialog.querySelector('[data-autofocus]') || dialog.querySelector(FOCUSABLE_SEL);
+    (preferred || dialog).focus();
+  }
+}
+
+export function closeDialog() {
+  if (!activeDialog) return;
+  const { overlay, returnFocus } = activeDialog;
+  activeDialog = null;
+  overlay.classList.remove('active');
+  if (returnFocus && returnFocus.focus) returnFocus.focus();
+}
+
+export function isDialogOpen(overlay) {
+  return !!(activeDialog && activeDialog.overlay === overlay);
+}
+
+// Focus trap: keep Tab / Shift+Tab cycling inside the open dialog.
+document.addEventListener('keydown', (e) => {
+  if (e.key !== 'Tab' || !activeDialog) return;
+  const dialog = activeDialog.overlay.querySelector('[role="dialog"]');
+  if (!dialog) return;
+  const items = Array.from(dialog.querySelectorAll(FOCUSABLE_SEL)).filter(el => !el.disabled);
+  if (!items.length) { e.preventDefault(); dialog.focus(); return; }
+  const first = items[0], last = items[items.length - 1];
+  const active = document.activeElement;
+  if (e.shiftKey && (active === first || active === dialog)) {
+    e.preventDefault();
+    last.focus();
+  } else if (!e.shiftKey && (active === last || active === dialog)) {
+    e.preventDefault();
+    first.focus();
+  }
+});
diff --git a/cmd/odek/ui/js/ws.js b/cmd/odek/ui/js/ws.js
index b085227..389b5de 100644
--- a/cmd/odek/ui/js/ws.js
+++ b/cmd/odek/ui/js/ws.js
@@ -2,7 +2,7 @@
 import { S, setSessionToken } from './state.js';
 import { getWsToken } from './net.js';
 import { dotEl, statusEl, sendBtn, skeletonEl, messagesEl, modelLabel } from './dom.js';
-import { formatNum, formatErrorMessage, showToast, scrollBottom, escapeHtml } from './utils.js';
+import { formatNum, formatErrorMessage, showToast, scrollBottom, escapeHtml, announce } from './utils.js';
 import {
   streamToken, streamThinking, streamFlush, endThinking, endStream,
   addToolCall, addToolResult, addSubagentGroup, completeSubagents,
@@ -23,12 +23,14 @@ export function connect() {
     sendBtn.disabled = false;
     // Hide loading skeleton when connected
     if (skeletonEl) skeletonEl.classList.remove('visible');
+    announce('Connected');
   };
 
   S.ws.onclose = () => {
     dotEl.className = 'dot disconnected';
     statusEl.textContent = 'reconnecting...';
     sendBtn.disabled = true;
+    announce('Connection lost — reconnecting');
     setTimeout(connect, 2000);
   };
 
diff --git a/cmd/odek/ui/style.css b/cmd/odek/ui/style.css
index 91ab7c9..c2b1be6 100644
--- a/cmd/odek/ui/style.css
+++ b/cmd/odek/ui/style.css
@@ -102,11 +102,23 @@ button:focus-visible,
 select:focus-visible,
 input:focus-visible,
 textarea:focus-visible,
-[onclick]:focus-visible {
+[tabindex]:focus-visible,
+[role="button"]:focus-visible {
   box-shadow: var(--ring);
   border-radius: 3px;
 }
 
+/* Visually hidden but available to screen readers (live status region) */
+.sr-only {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* Honor user motion preference: kill arrivals/pulses/shimmers, keep state changes. */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
@@ -138,6 +150,7 @@ body.light {
   grid-template-columns: 224px 1fr;
   grid-template-rows: 46px 1fr;
   height: 100vh;
+  height: 100dvh; /* dynamic viewport: avoids mobile browser chrome overlap */
 }
 
 /* ── Topbar ────────────────────────────────────────────────────────── */
@@ -1842,20 +1855,36 @@ body.light .msg.assistant .bubble .content { color: var(--text); }
 
 /* ── Responsive ────────────────────────────────────────────────────── */
 @media (max-width: 767px) {
-  #app { grid-template-columns: 1fr; }
+  #app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
   #sidebar {
     position: fixed;
-    top: 46px; left: 0; bottom: 0;
+    top: 0; left: 0; bottom: 0;
     width: 240px;
-    z-index: 16;
+    z-index: 30; /* drawer slides over the (now auto-height) topbar */
     transform: translateX(-100%);
     transition: transform .22s ease-out;
     border-right: 1px solid var(--border-2);
   }
   #sidebar.active { transform: translateX(0); }
-  #hamburger-btn { display: flex; }
+  #sidebar-overlay { z-index: 25; }
+  #hamburger-btn { display: flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; }
   #session-stats, .model { display: none !important; }
-  .top-controls { border-left: none; padding-left: 0; }
+  /* Model picker + custom input drop to a second row inside .top-controls,
+     keeping theme/cancel on the first row. */
+  .top-controls { border-left: none; padding-left: 0; flex-wrap: wrap; row-gap: 4px; }
+  #model-picker, #custom-model-input { order: 10; flex: 1 1 100%; max-width: none; min-height: 40px; }
+  /* ≥ 40px touch targets (padding/min-size only — no visual redesign) */
+  #theme-btn { padding: 9px 12px; }
+  #cancel-btn { min-height: 40px; align-items: center; }
+  .new-session-btn { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
+  .si-actions button { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
+  #attach-btn { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
+  #scroll-bottom-btn { width: 40px; height: 40px; }
+  .ac-actions button { min-height: 40px; }
   #cancel-btn.visible { display: inline-flex; }
+  /* Approval card: full width minus margins on narrow screens */
+  .approval-card { width: calc(100% - 16px); padding: var(--space-4); }
+  /* Toast may wrap instead of overflowing */
+  .toast { max-width: 92vw; white-space: normal; text-align: center; }
   .es-name { font-size: 36px; }
 }
