From 7cee1d504f9530a5362685eb80bebbf9142ad3c8 Mon Sep 17 00:00:00 2001
From: Rolando Santamaria Maso <kyberneees@gmail.com>
Date: Sun, 26 Jul 2026 14:46:32 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui):=20WebUI=20modernization=20PR4=20?=
 =?UTF-8?q?=E2=80=94=20completion=20keyboard=20nav,=20attachments,=20sideb?=
 =?UTF-8?q?ar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fourth PR of the WebUI modernization roadmap (Phase 2c + 2d). Stacked on
#111 (feat/webui-modernization-3).

Input & @-completion (2c):
- ArrowUp/ArrowDown move the selection (with wrap-around), Enter/Tab
  accept, Esc dismisses. Previously mouse-only with Tab-to-accept, and
  Enter would send the prompt even with the popup open.
- role="listbox"/role="option" + aria-selected kept in sync for keyboard,
  mouse, and hover selection.
- Attachments: per-file error chips (oversized/unreadable/over the 10 MB
  total cap) that dismiss on click or after 6s, replacing toast-only
  errors; total-size meter ("1.2 MB / 10 MB", amber when above 8 MB)
  rendered next to the chips.

Sessions sidebar (2d):
- Session items restructured: the whole body is a real <button>
  (keyboard-focusable, Enter opens) with separate real rename/delete
  buttons. Row actions now reveal on hover, focus-within, and always on
  touch devices (hover: none) - they were hover-only and unreachable by
  keyboard/touch.
- Rename is an inline edit in the task label (Enter commits, Esc cancels,
  blur commits) - window.prompt() is gone.
- Incremental list updates: loadSessions runs after every turn and used
  to re-render the whole list (stealing scroll position and hover state);
  it now skips the re-render when the session signature is unchanged and
  only syncs the active marker.
- Skeleton rows while the list loads on cold start.

Verified: node --check, go vet, full cmd/odek test suite.
---
 cmd/odek/ui/app.js     | 229 ++++++++++++++++++++++++++++++++---------
 cmd/odek/ui/index.html |   2 +-
 cmd/odek/ui/style.css  |  91 ++++++++++++++--
 3 files changed, 263 insertions(+), 59 deletions(-)

diff --git a/cmd/odek/ui/app.js b/cmd/odek/ui/app.js
index e5e9c75..9a5a43b 100644
--- a/cmd/odek/ui/app.js
+++ b/cmd/odek/ui/app.js
@@ -1268,16 +1268,46 @@ window.switchModel = function(modelId) {
 };
 
 // ── Session Rename ──
-window.renameSession = async function(sid, el) {
+// Inline edit: swaps the task label for an input; Enter commits, Esc
+// cancels, blur commits. No window.prompt.
+window.renameSession = function(sid, el) {
   const item = el.closest('.session-item');
   if (!item) return;
   const taskEl = item.querySelector('.task');
-  const currentName = taskEl ? taskEl.textContent : '';
-  const newName = prompt('Rename session:', currentName);
-  if (!newName || newName === currentName) return;
+  if (!taskEl || taskEl.querySelector('.si-rename-input')) return;
+  const currentName = taskEl.textContent;
+
+  const input = document.createElement('input');
+  input.className = 'si-rename-input';
+  input.type = 'text';
+  input.value = currentName === 'untitled' ? '' : currentName;
+  input.placeholder = 'session name…';
+  taskEl.textContent = '';
+  taskEl.appendChild(input);
+  input.focus();
+  input.select();
+
+  let done = false;
+  const finish = (commit) => {
+    if (done) return;
+    done = true;
+    const newName = input.value.trim();
+    taskEl.textContent = currentName;
+    if (commit && newName && newName !== currentName) {
+      doRenameSession(sid, newName);
+    }
+  };
+  input.addEventListener('keydown', (e) => {
+    e.stopPropagation();
+    if (e.key === 'Enter') { e.preventDefault(); finish(true); }
+    if (e.key === 'Escape') { e.preventDefault(); finish(false); }
+  });
+  input.addEventListener('click', (e) => e.stopPropagation());
+  input.addEventListener('blur', () => finish(true));
+};
 
+async function doRenameSession(sid, newName) {
   const token = await ensureSessionToken(sid);
-
   fetch('/api/sessions/' + encodeURIComponent(sid), {
     method: 'POST',
     headers: apiHeaders({
@@ -1292,7 +1322,7 @@ window.renameSession = async function(sid, el) {
       showToast('Session renamed');
     })
     .catch(() => showToast('Failed to rename session'));
-};
+}
 
 // ── Skill Events ──
 function handleSkillEvent(event) {
@@ -1596,7 +1626,7 @@ function addAttachedFile(file) {
   // Check total size (max 10MB total)
   const totalSize = attachedFiles.reduce((s, f) => s + f.size, 0) + file.size;
   if (totalSize > 10 * 1024 * 1024) {
-    showToast('Total attachment size exceeds 10 MB');
+    addErrorChip(file.name, 'total attachments exceed 10 MB');
     return;
   }
   attachedFiles.push(file);
@@ -1641,6 +1671,38 @@ function renderFileChips() {
     chip.append(icon, name, size, remove);
     fileChips.appendChild(chip);
   });
+
+  // Total-size meter against the 10 MB cap.
+  if (attachedFiles.length > 0) {
+    const total = attachedFiles.reduce((s, f) => s + f.size, 0);
+    const meter = document.createElement('span');
+    meter.className = 'chips-total';
+    meter.textContent = formatFileSize(total) + ' / 10 MB';
+    if (total > 8 * 1024 * 1024) meter.classList.add('warn');
+    fileChips.appendChild(meter);
+  }
+}
+
+// addErrorChip shows a transient error chip for a file that could not be
+// attached (too large, unreadable). Dismisses on click or after 6s.
+function addErrorChip(name, reason) {
+  const chip = document.createElement('span');
+  chip.className = 'file-chip error';
+  chip.title = reason;
+  const icon = document.createElement('span');
+  icon.className = 'chip-icon';
+  icon.textContent = '⚠️';
+  const label = document.createElement('span');
+  label.className = 'chip-name';
+  label.textContent = name + ' — ' + reason;
+  const remove = document.createElement('span');
+  remove.className = 'chip-remove';
+  remove.textContent = '✕';
+  chip.append(icon, label, remove);
+  fileChips.appendChild(chip);
+  const dismiss = () => chip.remove();
+  remove.addEventListener('click', dismiss);
+  setTimeout(dismiss, 6000);
 }
 
 function readFileAsText(file) {
@@ -1665,7 +1727,7 @@ function handleFiles(fileList) {
       readFileAsText(file).then(content => {
         addAttachedFile({name: file.name, size: file.size, content});
       }).catch(err => {
-        showToast(err.message);
+        addErrorChip(file.name, err.message || 'could not read file');
       })
     );
   }
@@ -1705,6 +1767,26 @@ messagesEl.addEventListener('drop', (e) => {
 
 // ── Input handlers ──
 promptEl.addEventListener('keydown', (e) => {
+  // @-completion keyboard navigation takes precedence while visible:
+  // ↑/↓ move, Enter/Tab accept, Esc dismisses.
+  if (completionEl.classList.contains('visible')) {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      moveCompletionSelection(e.key === 'ArrowDown' ? 1 : -1);
+      return;
+    }
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      selectCompletion();
+      return;
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      completionEl.classList.remove('visible');
+      return;
+    }
+  }
+
   if (e.key === 'Enter' && !e.shiftKey) {
     e.preventDefault();
     send();
@@ -1784,8 +1866,10 @@ completionEl.addEventListener('click', (e) => {
 completionEl.addEventListener('mousemove', (e) => {
   const item = e.target.closest('.comp-item');
   if (!item) return;
-  completionEl.querySelectorAll('.comp-item').forEach(el => el.classList.remove('selected'));
-  item.classList.add('selected');
+  completionEl.querySelectorAll('.comp-item').forEach(el => {
+    el.classList.toggle('selected', el === item);
+    el.setAttribute('aria-selected', el === item);
+  });
 });
 
 let lastAtIdx = -1;
@@ -1824,7 +1908,7 @@ async function checkCompletion() {
     }
 
     completionEl.innerHTML = results.map((r, i) =>
-      `<div class="comp-item${i === 0 ? ' selected' : ''}" data-id="${escapeAttr(r.id)}">
+      `<div class="comp-item${i === 0 ? ' selected' : ''}" role="option" aria-selected="${i === 0}" data-id="${escapeAttr(r.id)}">
         <span class="comp-type">${escapeAttr(r.type)}</span>
         <span class="comp-label">${escapeHtml(r.label)}</span>
         <span class="comp-detail">${escapeHtml(r.detail || '')}</span>
@@ -1837,6 +1921,19 @@ async function checkCompletion() {
   }
 }
 
+// moveCompletionSelection moves the .selected marker by delta (+1/-1),
+// keeping aria-selected in sync for assistive technology.
+function moveCompletionSelection(delta) {
+  const items = Array.from(completionEl.querySelectorAll('.comp-item'));
+  if (items.length === 0) return;
+  let idx = items.findIndex(el => el.classList.contains('selected'));
+  idx = (idx + delta + items.length) % items.length;
+  items.forEach((el, i) => {
+    el.classList.toggle('selected', i === idx);
+    el.setAttribute('aria-selected', i === idx);
+  });
+}
+
 function selectCompletion() {
   const selected = completionEl.querySelector('.selected');
   if (!selected) return;
@@ -1867,14 +1964,16 @@ function relativeTime(dateStr) {
 // ── Sessions ──
 let allSessions = [];
 let pendingDeleteId = null;
+let sessionsSig = '';
 
 sessionListEl.addEventListener('click', (e) => {
+  const item = e.target.closest('.session-item');
+  if (!item) return;
+  const sid = item.dataset.id;
+  if (!sid) return;
+
   // Delete button
-  if (e.target.classList.contains('del-btn')) {
-    const item = e.target.closest('.session-item');
-    if (!item) return;
-    const sid = item.dataset.id;
-    if (!sid) return;
+  if (e.target.closest('.del-btn')) {
     e.stopPropagation();
     pendingDeleteId = sid;
     document.getElementById('confirm-msg').textContent = 'Delete session ' + sid.slice(0, 8) + '...?';
@@ -1883,19 +1982,73 @@ sessionListEl.addEventListener('click', (e) => {
   }
 
   // Rename button
-  if (e.target.classList.contains('rename-btn')) return; // handled by inline onclick
+  if (e.target.closest('.rename-btn')) {
+    e.stopPropagation();
+    renameSession(sid, e.target);
+    return;
+  }
 
-  // Load and render session
-  const item = e.target.closest('.session-item');
-  if (!item) return;
-  const sid = item.dataset.id;
-  if (!sid || sid === sessionId) return;
+  // Load and render session (click on the item body)
+  if (e.target.closest('.si-body')) {
+    if (sid === sessionId) return;
+    sessionListEl.querySelectorAll('.session-item').forEach(s => s.classList.remove('active'));
+    item.classList.add('active');
+    loadAndRenderSession(sid);
+  }
+});
 
-  sessionListEl.querySelectorAll('.session-item').forEach(s => s.classList.remove('active'));
-  item.classList.add('active');
+// updateActiveSessionItem syncs the .active marker with the current
+// sessionId without re-rendering the list.
+function updateActiveSessionItem() {
+  sessionListEl.querySelectorAll('.session-item').forEach(el => {
+    el.classList.toggle('active', el.dataset.id === sessionId);
+  });
+}
 
-  loadAndRenderSession(sid);
-});
+async function loadSessions() {
+  // Skeleton rows only on cold start (empty list); refreshes keep the
+  // existing items so scroll position and hover state survive.
+  if (!sessionListEl.querySelector('.session-item')) {
+    sessionListEl.innerHTML = '<div class="session-skel"></div>'.repeat(3);
+  }
+  try {
+    const resp = await fetch('/api/sessions', { headers: apiHeaders() });
+    const sessions = await resp.json();
+    if (!sessions || !Array.isArray(sessions)) {
+      sessionListEl.querySelectorAll('.session-skel').forEach(el => el.remove());
+      return;
+    }
+    allSessions = sessions;
+
+    // Skip the full re-render when nothing changed — this runs after every
+    // turn, and re-rendering would steal scroll position and hover state.
+    const sig = sessions.map(s => [s.id, s.task, s.turns, s.updated_at, s.model].join('|')).join('\n');
+    if (sig === sessionsSig) {
+      updateActiveSessionItem();
+      return;
+    }
+    sessionsSig = sig;
+
+    sessionListEl.innerHTML = sessions.map(s =>
+      `<div class="session-item${s.id === sessionId ? ' active' : ''}" data-id="${escapeAttr(s.id)}">
+        <button class="si-body" type="button" title="Open session">
+          <span class="id">${escapeHtml(s.id.slice(0, 8))}</span>
+          <span class="task${!s.task ? ' untitled' : ''}">${escapeHtml(s.task || 'untitled')}</span>
+          <span class="meta">
+            <span>${s.turns || 0} turn${s.turns !== 1 ? 's' : ''}</span><span>${relativeTime(s.updated_at)}</span>
+            ${s.model ? `<span class="model-chip">${escapeHtml(s.model)}</span>` : ''}
+          </span>
+        </button>
+        <span class="si-actions">
+          <button class="rename-btn" type="button" title="Rename">✎</button>
+          <button class="del-btn" type="button" title="Delete">✕</button>
+        </span>
+      </div>`
+    ).join('');
+  } catch {
+    sessionListEl.querySelectorAll('.session-skel').forEach(el => el.remove());
+  }
+}
 
 // ── Session history rendering ──
 // Renders the full persisted transcript on session load: user/assistant
@@ -2092,30 +2245,6 @@ sidebarSearch.addEventListener('input', () => {
   });
 });
 
-async function loadSessions() {
-  try {
-    const resp = await fetch('/api/sessions', { headers: apiHeaders() });
-    const sessions = await resp.json();
-    if (!sessions || !Array.isArray(sessions)) return;
-    allSessions = sessions;
-
-    sessionListEl.innerHTML = sessions.map(s =>
-      `<div class="session-item${s.id === sessionId ? ' active' : ''}" data-id="${escapeAttr(s.id)}">
-        <div style="display:flex;align-items:center;gap:4px">
-          <div class="id">${escapeHtml(s.id.slice(0, 8))}</div>
-          <span class="rename-btn" title="Rename" onclick="event.stopPropagation();renameSession('${escapeAttr(s.id)}', this)">✎</span>
-          <span class="del-btn" title="Delete">✕</span>
-        </div>
-        <div class="task${!s.task ? ' untitled' : ''}">${escapeHtml(s.task || 'untitled')}</div>
-        <div class="meta">
-          <span>${s.turns || 0} turn${s.turns !== 1 ? 's' : ''}</span><span>${relativeTime(s.updated_at)}</span>
-          ${s.model ? `<span class="model-chip">${escapeHtml(s.model)}</span>` : ''}
-        </div>
-      </div>`
-    ).join('');
-  } catch { /* ignore */ }
-}
-
 // ── Init ──
 // Save references so newSession() can restore the empty state after clearing.
 savedEmptyStateNode = document.getElementById('empty-state');
diff --git a/cmd/odek/ui/index.html b/cmd/odek/ui/index.html
index d3a14ef..dfc25ed 100644
--- a/cmd/odek/ui/index.html
+++ b/cmd/odek/ui/index.html
@@ -76,7 +76,7 @@ <h3>Sessions</h3>
     <div id="input-area">
       <div class="input-inner">
         <div id="file-chips"></div>
-        <div id="completion"></div>
+        <div id="completion" role="listbox" aria-label="Resource completion"></div>
         <div id="input-row">
           <button id="attach-btn" title="Attach files">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
diff --git a/cmd/odek/ui/style.css b/cmd/odek/ui/style.css
index 494bc35..8243035 100644
--- a/cmd/odek/ui/style.css
+++ b/cmd/odek/ui/style.css
@@ -427,9 +427,11 @@ body.light {
 
 /* ── Session items ── */
 .session-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
   padding: 9px 10px 8px 12px;
   border-radius: 3px;
-  cursor: pointer;
   margin-bottom: 2px;
   transition: background .18s var(--ease), padding-left .2s var(--ease);
   position: relative;
@@ -465,6 +467,22 @@ body.light {
   box-shadow: 0 0 8px rgba(200,134,10,.5);
 }
 
+/* Item body: the whole clickable area is a real <button> */
+.si-body {
+  flex: 1;
+  min-width: 0;
+  display: block;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  text-align: left;
+  color: inherit;
+  cursor: pointer;
+}
+.si-body .id, .si-body .task, .si-body .meta { display: block; }
+
 /* Session ID line — de-emphasised */
 .session-item .id {
   font-family: var(--ui);
@@ -509,17 +527,57 @@ body.light {
   color: var(--amber-2);
 }
 
-.session-item .del-btn, .session-item .rename-btn {
-  opacity: 0;
-  transition: opacity .12s;
+/* Row actions: visible on hover, keyboard focus, and touch devices */
+.si-actions {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+.si-actions button {
+  background: none;
+  border: none;
+  padding: 0 3px;
+  font: inherit;
   font-size: 11px;
   color: var(--text-3);
   cursor: pointer;
-  padding: 0 3px;
+  opacity: 0;
+  transition: opacity .12s;
+}
+.session-item:hover .si-actions button,
+.session-item:focus-within .si-actions button { opacity: .7; }
+@media (hover: none) {
+  .si-actions button { opacity: .7; }
+}
+.si-actions .del-btn:hover { opacity: 1; color: var(--red); }
+.si-actions .rename-btn:hover { opacity: 1; color: var(--amber-2); }
+
+/* Inline rename input */
+.si-rename-input {
+  width: 100%;
+  font-family: var(--ui);
+  font-size: 12px;
+  background: var(--bg-3);
+  border: 1px solid var(--amber);
+  border-radius: 2px;
+  color: var(--text);
+  padding: 1px 4px;
+  outline: none;
+}
+
+/* Loading skeleton rows */
+.session-skel {
+  height: 54px;
+  border-radius: 3px;
+  margin-bottom: 2px;
+  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
+  background-size: 200% 100%;
+  animation: skelSlide 1.4s infinite;
+}
+@keyframes skelSlide {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
 }
-.session-item:hover .del-btn, .session-item:hover .rename-btn { opacity: .7; }
-.session-item .del-btn:hover { opacity: 1; color: var(--red); }
-.session-item .rename-btn:hover { opacity: 1; color: var(--amber-2); }
 
 /* ── Main ──────────────────────────────────────────────────────────── */
 #main { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
@@ -1251,6 +1309,23 @@ body.light {
 }
 .chip-remove:hover { opacity: 1; color: var(--red); background: rgba(224,82,82,.12); }
 
+/* Attachment error chip + total-size meter */
+.file-chip.error {
+  background: rgba(224,82,82,.1);
+  border-color: rgba(224,82,82,.35);
+  color: var(--red);
+}
+.file-chip.error .chip-name { color: var(--red); }
+.chips-total {
+  align-self: center;
+  font-size: 11px;
+  color: var(--text-3);
+  letter-spacing: .04em;
+  margin-left: auto;
+  padding-right: 2px;
+}
+.chips-total.warn { color: var(--amber-2); }
+
 /* Completion */
 #completion {
   position: absolute;