From bf19c7b122516131391fdc83f2c503a848a2ce78 Mon Sep 17 00:00:00 2001
From: Rolando Santamaria Maso <4096860+jkyberneees@users.noreply.github.com>
Date: Wed, 7 Oct 2026 16:06:45 +0200
Subject: [PATCH 1/2] feat(ui): simplify client management flows

Consolidate the inspector from nine tabs to four workspaces:
- Deliverables absorbs Activity behind a collapsible All-activity section
- Server tab merges Diagnostics, Scheduled work, Maintenance, and Tools
- Sessions list lives only in the hamburger rail; sessions tab removed
- Preferences move to a topbar gear popover
- Approvals render in a global overlay above the transcript instead of
  inside the Overview panel
- Speed chip removed; speed/token detail stays in the health popover
- Single writer for hamburger aria-expanded; Escape dismisses only the
  topmost layer; dead speed-chip CSS dropped; test coverage extended to
  the approval overlay lifecycle
---
 cmd/odek/ui/index.html           | 70 ++++++++++++-----------
 cmd/odek/ui/js/approvals.js      | 16 +++++-
 cmd/odek/ui/js/approvals.test.js | 13 ++++-
 cmd/odek/ui/js/commands.js       | 25 +++++++--
 cmd/odek/ui/js/lifecycle.test.js | 31 +++++++----
 cmd/odek/ui/js/main.js           | 50 ++++++++++++++---
 cmd/odek/ui/js/management.js     | 49 +++++++++-------
 cmd/odek/ui/js/metrics.js        | 18 ++++--
 cmd/odek/ui/js/metrics.test.js   | 29 +++++-----
 cmd/odek/ui/js/panels.js         | 26 ++++-----
 cmd/odek/ui/js/sessions.js       | 11 +---
 cmd/odek/ui/js/supervision.js    | 12 ++--
 cmd/odek/ui/js/workspace.js      | 23 +++++---
 cmd/odek/ui/style.css            | 96 ++++++++++++++++++++++++++++----
 14 files changed, 320 insertions(+), 149 deletions(-)

diff --git a/cmd/odek/ui/index.html b/cmd/odek/ui/index.html
index 6a3f4112..5d1a61ee 100644
--- a/cmd/odek/ui/index.html
+++ b/cmd/odek/ui/index.html
@@ -30,7 +30,7 @@
       <span class="m-chip" id="plan-chip" hidden role="button" tabindex="0" title="Open plan"></span>
       <span class="m-chip" id="jobs-chip" hidden role="button" tabindex="0" title="Open jobs"></span>
     </div>
-    <span class="m-chip" id="speed-chip" hidden role="button" tabindex="0" title="Generation speed"></span>
+    <span class="m-chip" id="ctx-chip" hidden role="button" tabindex="0" title="Context window usage"></span>
     <span class="m-chip" id="cost-chip" hidden role="button" tabindex="0" title="Session cost"></span>
     <span class="model" id="model-label"></span>
     <div class="top-controls">
@@ -46,8 +46,9 @@
       <input id="custom-model-input" type="text" placeholder="model id…" title="Custom model ID — press Enter to apply" />
 <p class="management-note">Optional caps tighten server limits. Blank inherits the operator setting.</p>
 <label>Runtime (seconds)<input id="limit-runtime" type="number" min="1" step="1"></label><label>Tool calls<input id="limit-tools" type="number" min="1" step="1"></label><label>Input tokens<input id="limit-input" type="number" min="1" step="1"></label><label>Output tokens<input id="limit-output" type="number" min="1" step="1"></label><label>Cost (USD)<input id="limit-cost" type="number" min="0.000001" step="0.000001"></label><div id="effective-limits"></div></div></details>
-      <button id="schedules-btn" type="button" aria-label="Scheduled work">Schedules</button>
-      <button id="settings-btn" type="button" aria-label="Settings and administration">Settings</button>
+      <button id="prefs-btn" type="button" aria-label="Preferences" title="Preferences" aria-expanded="false" aria-haspopup="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+      </button>
       <button id="palette-btn" type="button" title="Command palette (⌘K)" aria-label="Command palette">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
       </button>
@@ -81,39 +82,46 @@
 
   </div>
 
+  <div id="prefs-popover" hidden>
+    <h3>Appearance and notifications</h3>
+    <div class="hp-actions">
+      <button id="density-btn" type="button" aria-label="Toggle display density">Comfortable</button>
+      <button id="theme-btn" title="Cycle theme" aria-label="Cycle theme">◐</button>
+      <button id="notify-btn" title="Desktop notifications" aria-label="Desktop notifications" aria-pressed="false">◌</button>
+    </div>
+    <label class="management-field">Reading text size<select id="reading-size"><option value="15">Comfortable · 15px</option><option value="17">Large · 17px</option><option value="19">Larger · 19px</option></select></label>
+    <h4 class="ws-head">Connection permissions</h4>
+    <p class="management-note">Temporary grants apply to this browser connection, across its sessions, until revoked or disconnected. Operator policy still applies.</p>
+    <div id="permissions-view">Checking permissions…</div>
+    <button id="permissions-revoke" type="button" class="management-action">Revoke temporary grants</button>
+    <button id="shutdown-open" type="button" class="management-action">Shut down server…</button>
+  </div>
+
   <div id="sidebar-overlay"></div>
 
-  <aside id="session-rail" aria-label="Session navigation" hidden aria-hidden="true"></aside>
+  <aside id="session-rail" aria-label="Session navigation" hidden aria-hidden="true"><nav id="sidebar" aria-label="Sessions">
+          <div id="sidebar-header">
+            <h3><span>Sessions</span> <span id="sidebar-count" class="sidebar-count"></span></h3>
+            <button class="new-session-btn" type="button" title="New session">＋</button>
+          </div>
+          <div class="sidebar-search-wrap">
+            <input id="sidebar-search" type="text" placeholder="Search sessions…" aria-label="Search sessions" autocomplete="off" />
+          </div>
+          <div id="session-list"></div>
+          <button id="sessions-more" type="button" hidden>more</button>
+        </nav></aside>
   <aside id="panels" inert role="complementary" aria-label="Inspector" aria-hidden="true">
     <div id="inspector-resize" role="separator" aria-label="Resize inspector" aria-orientation="vertical" aria-valuemin="320" aria-valuemax="700" aria-valuenow="420" tabindex="0"></div>
     <div id="panels-header">
       <div id="panels-tabs" role="tablist" aria-label="Inspector workspaces">
-        <button class="ptab" id="ptab-sessions" data-surface="sessions" data-tab="sessions" role="tab" aria-selected="false" aria-controls="ppanel-sessions" tabindex="-1">sessions</button>
         <button class="ptab active" id="ptab-now" data-surface="task" data-tab="now" role="tab" aria-selected="true" aria-controls="ppanel-now" tabindex="0">Overview</button>
         <button class="ptab" id="ptab-outputs" data-surface="task" data-tab="outputs" role="tab" aria-selected="false" aria-controls="ppanel-outputs" tabindex="-1">Deliverables <span id="output-count">0</span></button>
         <button class="ptab" id="ptab-memory" data-surface="admin" data-tab="memory" role="tab" aria-selected="false" aria-controls="ppanel-memory" tabindex="-1">Knowledge</button>
-        <button class="ptab" id="ptab-ops" data-surface="admin" data-tab="ops" role="tab" aria-selected="false" aria-controls="ppanel-ops" tabindex="-1">Diagnostics</button>
-      <button class="ptab" id="ptab-manage" data-surface="schedules" data-tab="manage" role="tab" aria-selected="false" aria-controls="ppanel-manage" tabindex="-1">Scheduled work</button>
-        <button class="ptab" id="ptab-activity" data-surface="task" data-tab="activity" role="tab" aria-selected="false" aria-controls="ppanel-activity" tabindex="-1">Activity</button>
-        <button class="ptab" id="ptab-preferences" data-surface="admin" data-tab="preferences" role="tab" aria-selected="false" aria-controls="ppanel-preferences" tabindex="-1">Preferences</button>
-        <button class="ptab" id="ptab-maintenance" data-surface="admin" data-tab="maintenance" role="tab" aria-selected="false" aria-controls="ppanel-maintenance" tabindex="-1">Maintenance</button>
+        <button class="ptab" id="ptab-ops" data-surface="admin" data-tab="ops" role="tab" aria-selected="false" aria-controls="ppanel-ops" tabindex="-1">Server</button>
       </div>
       <button id="panels-close" title="Close" aria-label="Close inspector">✕</button>
     </div>
     <div id="panels-body">
-      <section class="ppanel" id="ppanel-sessions" data-panel="sessions" role="tabpanel" aria-labelledby="ptab-sessions" hidden aria-hidden="true">
-        <nav id="sidebar" aria-label="Sessions">
-          <div id="sidebar-header">
-            <h3><span>Sessions</span> <span id="sidebar-count" class="sidebar-count"></span></h3>
-            <button class="new-session-btn" type="button" title="New session">＋</button>
-          </div>
-          <div class="sidebar-search-wrap">
-            <input id="sidebar-search" type="text" placeholder="Search sessions…" aria-label="Search sessions" autocomplete="off" />
-          </div>
-          <div id="session-list"></div>
-          <button id="sessions-more" type="button" hidden>more</button>
-        </nav>
-      </section>
       <section class="ppanel active" id="ppanel-now" data-panel="now" role="tabpanel" aria-labelledby="ptab-now">
         <div class="ppanel-scroll">
           <h3 id="task-status" tabindex="-1">Ready for your next task</h3>
@@ -129,14 +137,7 @@ <h4 class="ws-head">agents</h4>
           <div id="agents-list"></div>
         </div>
       </section>
-      <section class="ppanel" id="ppanel-outputs" data-panel="outputs" role="tabpanel" aria-labelledby="ptab-outputs" hidden aria-hidden="true"><div class="ppanel-scroll"><h3>Deliverables and evidence</h3><div id="completion-view"></div><h4 class="ws-head">Decisions</h4><div id="decision-receipts"></div><h4 class="ws-head">Artifacts</h4><div id="artifact-list"></div><button id="all-activity-btn" type="button" class="management-action">Inspect all activity</button></div></section>
-      <section class="ppanel" id="ppanel-activity" data-panel="activity" role="tabpanel" aria-labelledby="ptab-activity" hidden aria-hidden="true"><div class="ppanel-scroll"><p class="management-note">Tool returns and their recorded execution outcomes. A completed tool is not proof of task success.</p><label class="management-field">Filter activity<input id="activity-search" type="search" placeholder="Tool, file, command…"></label><div id="output-list"></div><div id="output-detail" hidden></div></div></section>
-      <section class="ppanel" id="ppanel-preferences" data-panel="preferences" role="tabpanel" aria-labelledby="ptab-preferences" hidden aria-hidden="true"><div class="ppanel-scroll"><h3>Appearance and notifications</h3>    <div class="hp-actions">
-      <button id="density-btn" type="button" aria-label="Toggle display density">Comfortable</button>
-      <button id="theme-btn" title="Cycle theme" aria-label="Cycle theme">◐</button>
-      <button id="notify-btn" title="Desktop notifications" aria-label="Desktop notifications" aria-pressed="false">◌</button>
-    </div><label class="management-field">Reading text size<select id="reading-size"><option value="15">Comfortable · 15px</option><option value="17">Large · 17px</option><option value="19">Larger · 19px</option></select></label><h4 class="ws-head">Connection permissions</h4><p class="management-note">Temporary grants apply to this browser connection, across its sessions, until revoked or disconnected. Operator policy still applies.</p><div id="permissions-view">Checking permissions…</div><button id="permissions-revoke" type="button" class="management-action">Revoke temporary grants</button><button id="shutdown-open" type="button" class="management-action">Shut down server…</button></div></section>
-      <section class="ppanel" id="ppanel-maintenance" data-panel="maintenance" role="tabpanel" aria-labelledby="ptab-maintenance" hidden aria-hidden="true"><div class="ppanel-scroll" id="maintenance-body"></div></section>
+      <section class="ppanel" id="ppanel-outputs" data-panel="outputs" role="tabpanel" aria-labelledby="ptab-outputs" hidden aria-hidden="true"><div class="ppanel-scroll"><h3>Deliverables and evidence</h3><div id="completion-view"></div><h4 class="ws-head">Decisions</h4><div id="decision-receipts"></div><h4 class="ws-head">Artifacts</h4><div id="artifact-list"></div><button id="all-activity-btn" type="button" class="management-action">Inspect all activity</button><details class="ws-details" id="activity-details"><summary>All activity</summary><p class="management-note">Tool returns and their recorded execution outcomes. A completed tool is not proof of task success.</p><label class="management-field">Filter activity<input id="activity-search" type="search" placeholder="Tool, file, command…"></label><div id="output-list"></div><div id="output-detail" hidden></div></details></div></section>
       <section class="ppanel" id="ppanel-memory" data-panel="memory" role="tabpanel" aria-labelledby="ptab-memory" hidden aria-hidden="true">
         <div class="ppanel-scroll">
           <div class="mf-section">
@@ -163,11 +164,8 @@ <h4 class="ws-head">agents</h4>
           </div>
           <h4 class="ws-head">skills</h4>
           <div id="skills-list"></div>
-          <h4 class="ws-head">tools</h4>
-          <label class="management-field">Find a tool<input id="tools-search" type="search" placeholder="Name or capability…"></label><div id="tools-list"></div>
         </div>
       </section>
-      <section class="ppanel" id="ppanel-manage" data-panel="manage" role="tabpanel" aria-labelledby="ptab-manage" hidden aria-hidden="true"><div class="ppanel-scroll" id="management-body"></div></section>
       <section class="ppanel" id="ppanel-ops" data-panel="ops" role="tabpanel" aria-labelledby="ptab-ops" hidden aria-hidden="true">
         <div class="ppanel-scroll">
           <h4 class="ws-head">runs</h4>
@@ -177,6 +175,9 @@ <h4 class="ws-head">events</h4>
           <label class="management-field">Filter events<input id="events-search" type="search" placeholder="Tool, event type, run…"></label><label class="event-filter"><input id="events-session-filter" type="checkbox"> Current session only</label><div id="events-list"></div>
           <h4 class="ws-head">config</h4>
           <div id="config-list"></div>
+          <details class="ws-details" id="schedules-details"><summary>Scheduled work</summary><div id="management-body"></div></details>
+          <details class="ws-details" id="maintenance-details"><summary>Maintenance</summary><div id="maintenance-body"></div></details>
+          <details class="ws-details" id="tools-details"><summary>Tools</summary><label class="management-field">Find a tool<input id="tools-search" type="search" placeholder="Name or capability…"></label><div id="tools-list"></div></details>
         </div>
       </section>
     </div>
@@ -287,6 +288,7 @@ <h3 id="shutdown-title">Shut down serve?</h3>
 
 <div id="context-overlay"><div id="context-dialog" role="dialog" aria-modal="true" aria-labelledby="context-title" tabindex="-1"><h3 id="context-title">Add context</h3><p>Find a workspace file or saved session. Selected references appear in your message.</p><label class="management-field">Find files or sessions<input id="context-search" type="search" placeholder="Filename or sess:session-id" data-autofocus></label><div id="context-results"></div><button id="context-close" type="button" class="management-action">Done</button></div></div>
 <div id="sr-status" class="sr-only" role="status" aria-live="polite"></div>
+<div id="approval-overlay" hidden></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 eb63df94..a778c1d3 100644
--- a/cmd/odek/ui/js/approvals.js
+++ b/cmd/odek/ui/js/approvals.js
@@ -174,6 +174,8 @@ export function removeActiveApprovalCard() {
     S.activeApprovalCard.remove();
     S.activeApprovalCard = null;
   }
+  const overlay = document.getElementById('approval-overlay');
+  if (overlay && !overlay.children.length) overlay.hidden = true;
 }
 
 // clearApprovals drops every pending request and the rendered card — used on
@@ -319,8 +321,16 @@ function renderApprovalCard(event) {
   // F-B4: stamp arrival so every approve path (button, Enter, global 'a')
   // enforces the same 1.5s friction cool-down.
   card.dataset.shownAt = String(Date.now());
-  hideEmptyState();
-  insertTurnWork(card, 'tool');
+  // Global overlay: approvals render above the transcript regardless of
+  // inspector state, so they are never buried inside a panel.
+  const overlay = document.getElementById('approval-overlay');
+  if (overlay) {
+    overlay.hidden = false;
+    overlay.appendChild(card);
+  } else {
+    hideEmptyState();
+    insertTurnWork(card, 'tool');
+  }
   forceScrollBottom();
   card.focus({ preventScroll: true });
   announce('Approval required: ' + (event.risk || 'unknown') + ' risk operation');
@@ -371,7 +381,7 @@ document.addEventListener('keydown', (e) => {
   const active = document.activeElement;
   if (active && S.activeApprovalCard && !S.activeApprovalCard.contains(active)) return;
   const trustVisible = S.activeApprovalCard &&
-    !S.activeApprovalCard.querySelector('.trust').style.display;
+    !S.activeApprovalCard.querySelector('.trust')?.style.display;
   if (e.key === 'a' || e.key === 'A') {
     e.preventDefault();
     sendApproval('approve');
diff --git a/cmd/odek/ui/js/approvals.test.js b/cmd/odek/ui/js/approvals.test.js
index 35133143..07f23aff 100644
--- a/cmd/odek/ui/js/approvals.test.js
+++ b/cmd/odek/ui/js/approvals.test.js
@@ -182,11 +182,22 @@ test('approval request renders an inline decision card with the active id set',
   // Regression: the id used to be nulled during render, deadening every
   // button. It must equal the shown request the moment the card appears.
   assert.equal(S.activeApprovalId, 'apr-1');
-  assert.ok(el('messages').children.includes(card), 'card appended to #messages');
+  assert.ok(el('approval-overlay').children.includes(card), 'card appended to #approval-overlay');
   assert.equal(card.querySelector('.ac-command').textContent, 'echo hi');
   assert.equal(card.getAttribute('role'), 'alertdialog');
 });
 
+test('approval overlay hides again once the queue drains', () => {
+  const overlay = el('approval-overlay');
+  queueOne();
+  assert.equal(overlay.hidden, false, 'overlay un-hides while a card is shown');
+  assert.ok(overlay.children.includes(S.activeApprovalCard));
+  approvals.clearApprovals();
+  assert.equal(S.activeApprovalId, null);
+  assert.equal(overlay.children.length, 0);
+  assert.equal(overlay.hidden, true, 'overlay must not stay visible with an empty queue');
+});
+
 test('trust button hidden when the server disallows class trust', () => {
   const { trust } = queueOne({ risk: 'destructive', allow_trust: false });
   assert.equal(trust.style.display, 'none');
diff --git a/cmd/odek/ui/js/commands.js b/cmd/odek/ui/js/commands.js
index a1a131df..4e62452f 100644
--- a/cmd/odek/ui/js/commands.js
+++ b/cmd/odek/ui/js/commands.js
@@ -55,28 +55,35 @@ export function isComposerSlashInput(val, cursor) {
   }
   return false;
 }
-export const WORKSPACES = { sessions: {id:'ptab-sessions', surface:'sessions'}, now: {id:'ptab-now',surface:'task'}, outputs:{id:'ptab-outputs',surface:'task'}, activity:{id:'ptab-activity',surface:'task'}, preferences:{id:'ptab-preferences',surface:'admin'}, memory:{id:'ptab-memory',surface:'admin'}, ops:{id:'ptab-ops',surface:'admin'}, manage:{id:'ptab-manage',surface:'schedules'}, maintenance:{id:'ptab-maintenance',surface:'admin'} };
-for (const [id,title] of [['outputs','Deliverables and evidence'],['activity','Inspect activity'],['preferences','Preferences and permissions'],['manage','Scheduled work'],['maintenance','Storage maintenance']]) COMMANDS.push({id:'tab-'+id,title,hint:'workspace',run:()=>openTab(id)});
+export const WORKSPACES = { now: {id:'ptab-now', surface:'task'}, outputs:{id:'ptab-outputs',surface:'task'}, memory:{id:'ptab-memory',surface:'admin'}, ops:{id:'ptab-ops',surface:'admin'} };
+for (const [id,title] of [['outputs','Deliverables and evidence'],['server','Server: runs, events, schedules, maintenance']]) COMMANDS.push({id:'tab-'+id,title,hint:'workspace',run:()=>openTab(id)});
 
 const TAB_WS = {
   sessions: 'sessions', session: 'sessions',
   plan: 'now', jobs: 'now', agents: 'now', now: 'now',
   memory: 'memory', skills: 'memory', tools: 'memory',
-  runs: 'ops', events: 'ops', config: 'ops', ops: 'ops',
+  runs: 'ops', events: 'ops', config: 'ops', ops: 'ops', server: 'ops',
+  // Removed tabs keep their slash verbs working by retargeting:
+  manage: 'ops', maintenance: 'ops', schedules: 'ops',
+  activity: 'outputs',
+  preferences: 'preferences',
 };
 const TAB_ID = {
-  sessions: 'ptab-sessions',
   now: 'ptab-now',
   memory: 'ptab-memory',
   ops: 'ptab-ops',
 };
 
 export function openTab(name) {
-  if ((name === 'sessions' || name === 'session') && document.body.classList.contains('workspace-wide')) { if (!S.sessionRailOpen) S.toggleSessionRail?.(); document.getElementById('sidebar-search')?.focus(); return; }
+  if (name === 'preferences') { S.openPrefsPopover?.(); return; }
+  if (name === 'sessions' || name === 'session') {
+    if (!S.sessionRailOpen) S.toggleSessionRail?.();
+    document.getElementById('sidebar-search')?.focus();
+    return;
+  }
   const ws = TAB_WS[name] || name;
   S.setPanelSurface?.(WORKSPACES[ws]?.surface || 'task');
   togglePanels(true);
-  S.setPanelSurface?.(WORKSPACES[ws]?.surface || 'task');
   const btn = document.getElementById(WORKSPACES[ws]?.id || TAB_ID[ws] || 'ptab-now');
   if (btn) {btn.click();btn.focus?.();}
 }
@@ -243,6 +250,7 @@ export function dispatchSlash(raw) {
     case 'now':
     case 'memory':
     case 'ops':
+    case 'server':
     case 'plan':
     case 'jobs':
     case 'agents':
@@ -251,6 +259,11 @@ export function dispatchSlash(raw) {
     case 'runs':
     case 'events':
     case 'config':
+    case 'outputs':
+    case 'activity':
+    case 'manage':
+    case 'maintenance':
+    case 'preferences':
       openTab(cmd);
       break;
     case 'sessions':
diff --git a/cmd/odek/ui/js/lifecycle.test.js b/cmd/odek/ui/js/lifecycle.test.js
index c0d05fb4..f441bbbd 100644
--- a/cmd/odek/ui/js/lifecycle.test.js
+++ b/cmd/odek/ui/js/lifecycle.test.js
@@ -948,7 +948,7 @@ let inspector;
 async function prepareInspector() {
   const drawer = document.getElementById('panels');
   if (!inspector) {
-    for (const name of ['now', 'manage', 'ops']) {
+    for (const name of ['now', 'outputs', 'memory', 'ops']) {
       const tab = document.getElementById('ptab-' + name);
       tab.className = 'ptab' + (name === 'now' ? ' active' : '');
       tab.dataset.tab = name;
@@ -1001,21 +1001,32 @@ test('late jobs response cannot repopulate a new session', async () => {
 test('management ignores pre-reset responses and reloads when reopened', async () => {
   const drawer = await prepareInspector();
   const oldFetch = globalThis.fetch;
-  let finish;
-  let requests = 0;
+  let requests;
+  const reply = (body) => ({ ok: true, headers: { get: () => 'application/json' }, json: async () => body });
   try {
-    drawer.querySelectorAll('.ptab').forEach(tab => tab.classList.toggle('active', tab.dataset.tab === 'manage'));
-    globalThis.fetch = () => { requests++; return new Promise(resolve => { finish = resolve; }); };
+    drawer.querySelectorAll('.ptab').forEach(tab => tab.classList.toggle('active', tab.dataset.tab === 'ops'));
+    requests = [];
+    globalThis.fetch = (path) => {
+      const req = { path: String(path), resolve: null };
+      req.promise = new Promise(res => { req.resolve = res; });
+      requests.push(req);
+      return req.promise;
+    };
     inspector.togglePanels(true);
     sessions.newSession();
-    finish({ok:true, headers:{get:()=> 'application/json'}, json:async()=>({features:{schedules:true}})});
+    const staleCaps = requests.find(r => r.path.includes('capabilit'));
+    assert.ok(staleCaps, 'capabilities requested before reset');
+    staleCaps.resolve(reply({ features: { schedules: true } }));
     await new Promise(resolve => setTimeout(resolve, 0));
-    assert.equal(byId['management-body'].textContent, '');
-    assert.equal(requests, 1, 'stale capabilities must not start schedule fetch');
+    assert.equal(requests.filter(r => r.path.includes('schedules')).length, 0, 'stale capabilities must not start schedule fetch');
     inspector.togglePanels(true);
-    assert.equal(requests, 2, 'reopening reloads selected Manage tab');
+    const freshCaps = requests.filter(r => r.path.includes('capabilit')).pop();
+    assert.ok(freshCaps, 'reopening re-requests capabilities');
+    freshCaps.resolve(reply({ features: { schedules: true } }));
+    await new Promise(resolve => setTimeout(resolve, 0));
+    assert.ok(requests.some(r => r.path.includes('schedules')), 'reopening reloads the Server tab');
     S.resetManagement();
-    finish({ok:true, headers:{get:()=> 'application/json'}, json:async()=>({features:{}})});
+    for (const r of requests) r.resolve(reply({}));
     await new Promise(resolve => setTimeout(resolve, 0));
   } finally { globalThis.fetch = oldFetch; inspector.togglePanels(false); }
 });
diff --git a/cmd/odek/ui/js/main.js b/cmd/odek/ui/js/main.js
index bbff608c..efd627cc 100644
--- a/cmd/odek/ui/js/main.js
+++ b/cmd/odek/ui/js/main.js
@@ -282,15 +282,26 @@ function openNowFromChip() {
 });
 
 const costChip = document.getElementById('cost-chip');
-const speedChip = document.getElementById('speed-chip');
-for (const chip of [costChip, speedChip]) {
-  if (!chip) continue;
+if (costChip) {
   const openCost = (e) => {
     e.stopPropagation();
     togglePopover();
   };
-  chip.addEventListener('click', openCost);
-  chip.addEventListener('keydown', (e) => {
+  costChip.addEventListener('click', openCost);
+  costChip.addEventListener('keydown', (e) => {
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    e.preventDefault();
+    openCost(e);
+  });
+}
+const ctxChip = document.getElementById('ctx-chip');
+if (ctxChip) {
+  const openCost = (e) => {
+    e.stopPropagation();
+    togglePopover();
+  };
+  ctxChip.addEventListener('click', openCost);
+  ctxChip.addEventListener('keydown', (e) => {
     if (e.key !== 'Enter' && e.key !== ' ') return;
     e.preventDefault();
     openCost(e);
@@ -425,6 +436,31 @@ function jumpTurn(dir) {
   if (turns[idx].scrollIntoView) turns[idx].scrollIntoView({ block: 'start' });
 }
 
-document.getElementById('settings-btn')?.addEventListener('click',()=>openTab('preferences'));
-document.getElementById('schedules-btn')?.addEventListener('click',()=>openTab('manage'));
+// Preferences gear: small topbar popover (mirrors #health-popover behavior).
+const prefsPopover = () => document.getElementById('prefs-popover');
+function togglePrefsPopover(force) {
+  const p = prefsPopover();
+  const btn = document.getElementById('prefs-btn');
+  if (!p) return;
+  const want = force != null ? !!force : p.hidden;
+  p.hidden = !want;
+  btn?.setAttribute('aria-expanded', String(want));
+  if (want) {
+    S.refreshPermissions?.();
+    setTimeout(() => {
+      document.addEventListener('click', prefsOutsideDismiss, { once: true });
+      document.addEventListener('keydown', prefsEscDismiss, { once: true });
+    }, 0);
+  }
+}
+function prefsOutsideDismiss(e) {
+  const p = prefsPopover();
+  if (p && !p.hidden && !p.contains(e.target) && !document.getElementById('prefs-btn')?.contains(e.target)) togglePrefsPopover(false);
+  else if (p && !p.hidden) document.addEventListener('click', prefsOutsideDismiss, { once: true });
+}
+function prefsEscDismiss(e) {
+  if (e.key === 'Escape' && prefsPopover() && !prefsPopover().hidden) togglePrefsPopover(false);
+}
+S.openPrefsPopover = () => togglePrefsPopover(true);
+document.getElementById('prefs-btn')?.addEventListener('click', (e) => { e.stopPropagation(); togglePrefsPopover(); });
 document.getElementById('shutdown-open')?.addEventListener('click',openShutdown);
diff --git a/cmd/odek/ui/js/management.js b/cmd/odek/ui/js/management.js
index d76ae7e8..3be9c70d 100644
--- a/cmd/odek/ui/js/management.js
+++ b/cmd/odek/ui/js/management.js
@@ -13,47 +13,56 @@ function field(form, title, value = '', type = 'text') {
 }
 function action(title, fn) { const b = el('button', 'management-action', title); b.type = 'button'; b.addEventListener('click', async () => { b.disabled = true; try { await fn(); } catch (e) { showToast(e.message); } finally { b.disabled = false; } }); return b; }
 let generation = 0;
-async function loadManagement(surface='manage') {
+async function loadManagement(surface='ops') {
   const version = ++generation;
-  const root = byId(surface==='maintenance'?'maintenance-body':'management-body'); if (!root) return;
-  root.textContent = 'Loading…';
+  const wantSchedules = surface === 'manage' || surface === 'ops';
+  const wantMaintenance = surface === 'maintenance' || surface === 'ops';
+  const schedRoot = byId('management-body');
+  const maintRoot = byId('maintenance-body');
+  const legacyRoot = surface === 'maintenance' ? maintRoot : schedRoot;
+  if (wantSchedules && wantMaintenance) { if (schedRoot) schedRoot.textContent = 'Loading…'; if (maintRoot) maintRoot.textContent = 'Loading…'; }
+  else if (legacyRoot) legacyRoot.textContent = 'Loading…';
   try {
     const caps = await getCapabilities();
     if (version !== generation) return;
-    root.textContent = '';
-    if (surface==='manage' && caps.features?.schedules) {
-      root.appendChild(el('h3', 'management-title', 'Scheduled work'));
-      root.appendChild(el('p', 'management-note', 'Manage recurring tasks. A running scheduler daemon or Telegram host executes enabled schedules.'));
-      root.appendChild(action('New schedule', () => editSchedule(root)));
+    if (wantSchedules && schedRoot) {
+      const r = schedRoot; r.textContent = '';
+      if (caps.features?.schedules) {
+      r.appendChild(el('h3', 'management-title', 'Scheduled work'));
+      r.appendChild(el('p', 'management-note', 'Manage recurring tasks. A running scheduler daemon or Telegram host executes enabled schedules.'));
+      r.appendChild(action('New schedule', () => editSchedule(r)));
       const data = await listSchedules();
       if (version !== generation) return;
-      const health=data.host_health;root.appendChild(el('p','scheduler-health',health?.status==='recent_heartbeat'?'Scheduler recently active.':'Start odek schedule daemon or the Telegram host to run enabled schedules.'));
-      root.appendChild(action('Refresh host status',()=>loadManagement()));
+      const health=data.host_health;r.appendChild(el('p','scheduler-health',health?.status==='recent_heartbeat'?'Scheduler recently active.':'Start odek schedule daemon or the Telegram host to run enabled schedules.'));
+      r.appendChild(action('Refresh host status',()=>loadManagement()));
       for (const job of data.jobs || []) {
         const row = el('article', 'management-card');
         row.append(el('strong', '', job.name || job.id), el('p', 'management-note', job.cron + ' · ' + (job.timezone || 'UTC') + ' · ' + (job.enabled ? 'Enabled' : 'Paused')));
         if (job.enabled && data.next?.[job.id]) row.appendChild(el('p', 'management-note', 'Next scheduled time: ' + new Date(data.next[job.id]).toLocaleString()));
         const state = data.states?.[job.id]; if (state) row.appendChild(el('p', 'management-note', 'Last run: ' + (state.last_status || 'Never') + (state.last_error ? ' · ' + state.last_error : '')));
         if(state?.last_result){const detail=el('details','schedule-result');detail.append(el('summary','','Last run result'),el('pre','management-report',state.last_result));row.appendChild(detail);}
-        row.append(action('Edit', () => editSchedule(root, job)), action(job.enabled ? 'Pause' : 'Enable', async () => { await saveSchedule({...job, enabled:!job.enabled}); await loadManagement(); }), action('Delete', async () => { if (confirm('Delete schedule “' + (job.name || job.id) + '”?')) { await removeSchedule(job.id); await loadManagement(); } }));
-        root.appendChild(row);
+        row.append(action('Edit', () => editSchedule(r, job)), action(job.enabled ? 'Pause' : 'Enable', async () => { await saveSchedule({...job, enabled:!job.enabled}); await loadManagement(); }), action('Delete', async () => { if (confirm('Delete schedule “' + (job.name || job.id) + '”?')) { await removeSchedule(job.id); await loadManagement(); } }));
+        r.appendChild(row);
       }
-      if (!(data.jobs || []).length) root.appendChild(el('p', 'workspace-empty', 'No schedules yet. Create one to make recurring work easier.'));
+      if (!(data.jobs || []).length) r.appendChild(el('p', 'workspace-empty', 'No schedules yet. Create one to make recurring work easier.'));
+      } else r.appendChild(el('p','workspace-empty','This server does not expose scheduling controls.'));
     }
-    if (surface==='maintenance' && caps.features?.maintenance) {
+    if (wantMaintenance && maintRoot) {
+      const m = maintRoot; m.textContent = '';
+      if (caps.features?.maintenance) {
       const data = await getMaintenance(); if (version !== generation) return;
-      root.appendChild(el('h3', 'management-title', 'Storage maintenance'));
-      root.appendChild(el('p', 'management-note', data.description));
+      m.appendChild(el('h3', 'management-title', 'Storage maintenance'));
+      m.appendChild(el('p', 'management-note', data.description));
       const policy = el('dl', 'management-policy');
       for (const [key,value] of Object.entries(data.policy || {})) { policy.append(el('dt','',key.replace(/_/g,' ').replace(/([A-Z])/g,' $1').trim()),el('dd','',typeof value==='number'?value.toLocaleString():String(value))); }
-      root.appendChild(policy);
+      m.appendChild(policy);
       const form = el('div','management-card');
       const confirmInput = field(form, 'Type cleanup to apply the retention policy');
       form.appendChild(action('Run cleanup', async () => { if (confirmInput.value !== 'cleanup') { showToast('Type cleanup first'); return; } const report = await runMaintenance(confirmInput.value); confirmInput.value = ''; const result=el('pre','management-report',JSON.stringify(report,null,2));form.appendChild(result); }));
-      root.appendChild(form);
+      m.appendChild(form);
+      } else m.appendChild(el('p','workspace-empty','This server does not expose maintenance controls.'));
     }
-    if (!(surface==='manage'?caps.features?.schedules:caps.features?.maintenance)) root.appendChild(el('p','workspace-empty','This server does not expose scheduling or maintenance controls.'));
-  } catch (e) { if (version === generation) root.textContent = 'Management unavailable: ' + e.message; }
+  } catch (e) { if (version === generation && legacyRoot) legacyRoot.textContent = 'Management unavailable: ' + e.message; }
 }
 function editSchedule(root, job = {}) {
   root.querySelector('.schedule-editor')?.remove();
diff --git a/cmd/odek/ui/js/metrics.js b/cmd/odek/ui/js/metrics.js
index 6d08a0dd..d80e385c 100644
--- a/cmd/odek/ui/js/metrics.js
+++ b/cmd/odek/ui/js/metrics.js
@@ -376,10 +376,18 @@ export function renderMetrics() {
     speed.title = speedTip;
     speed.classList.toggle('on', !!speedLabel);
   }
-  const speedChip = document.getElementById('speed-chip');
-  if (speedChip) {
-    speedChip.hidden = !speedLabel;
-    speedChip.textContent = speedLabel;
-    speedChip.title = speedTip || 'Generation speed';
+
+  // Context chip: the only topbar context metric; full detail lives in the
+  // health popover. Shows the percentage against the window when known,
+  // otherwise the raw token count.
+  const ctxChip = document.getElementById('ctx-chip');
+  if (ctxChip) {
+    ctxChip.hidden = shownCtx <= 0;
+    if (shownCtx > 0) {
+      const pctLabel = m.maxContext > 0 ? Math.round(Math.min(1, shownCtx / m.maxContext) * 100) + '%' : formatNum(shownCtx);
+      ctxChip.textContent = 'ctx ' + pctLabel;
+      ctxChip.title = 'Context: ' + formatNum(shownCtx) + ' tokens' +
+        (m.maxContext > 0 ? ' of ~' + formatNum(m.maxContext) : '');
+    }
   }
 }
diff --git a/cmd/odek/ui/js/metrics.test.js b/cmd/odek/ui/js/metrics.test.js
index 5b49e2e9..febb20c1 100644
--- a/cmd/odek/ui/js/metrics.test.js
+++ b/cmd/odek/ui/js/metrics.test.js
@@ -36,7 +36,7 @@ const byId = {
   'm-cost': new FakeEl(),
   'm-speed': new FakeEl(),
   'cost-chip': new FakeEl(),
-  'speed-chip': new FakeEl(),
+  'ctx-chip': new FakeEl(),
 };
 globalThis.document = {
   getElementById: (id) => byId[id] || null,
@@ -69,8 +69,8 @@ beforeEach(() => {
   S.metrics.streamedOutChars = 0;
   byId['cost-chip'].hidden = true;
   byId['cost-chip'].textContent = '';
-  byId['speed-chip'].hidden = true;
-  byId['speed-chip'].textContent = '';
+  byId['ctx-chip'].hidden = true;
+  byId['ctx-chip'].textContent = '';
   byId['m-speed'].textContent = '—';
 });
 
@@ -129,35 +129,34 @@ test('formatTokPerSec matches the CLI one-decimal suffix', () => {
   assert.equal(formatTokPerSec(100), '100.0 tok/s');
 });
 
-test('speed chip stays hidden until a think-step rate arrives', () => {
+test('speed chip is gone; the rate lives in the popover row only', () => {
   renderMetrics();
-  assert.equal(byId['speed-chip'].hidden, true);
+  assert.equal(document.getElementById('speed-chip'), null);
   assert.equal(byId['m-speed'].textContent, '—');
+  assert.equal(byId['ctx-chip'].hidden, true);
 });
 
-test('usage-style applySpeed shows generation rate on the chip and popover', () => {
+test('usage-style applySpeed shows generation rate in the popover row', () => {
   metricsApplySpeed({ generationTokensPerSecond: 25.2, tokensPerSecond: 9.6 });
-  assert.equal(byId['speed-chip'].hidden, false);
-  assert.equal(byId['speed-chip'].textContent, '25.2 tok/s');
   assert.equal(byId['m-speed'].textContent, '25.2 tok/s');
-  assert.match(byId['speed-chip'].title, /first streamed token/);
+  assert.match(byId['m-speed'].title, /first streamed token/);
 });
 
-test('a usage frame without a rate holds the last chip', () => {
+test('a usage frame without a rate holds the last rate', () => {
   metricsApplySpeed({ tokensPerSecond: 9.6 });
   metricsApplySpeed({ outputTokens: 10 });
   assert.equal(S.metrics.tokPerSec, 9.6);
-  assert.equal(byId['speed-chip'].textContent, '9.6 tok/s');
+  assert.equal(byId['m-speed'].textContent, '9.6 tok/s');
 });
 
-test('resetSpeed and resetMetrics hide the chip', () => {
+test('resetSpeed and resetMetrics clear the rate and context chip', () => {
   metricsApplySpeed({ tokensPerSecond: 9.6 });
   metricsResetSpeed();
-  assert.equal(byId['speed-chip'].hidden, true);
+  assert.equal(S.metrics.tokPerSec, 0);
   metricsApplySpeed({ tokensPerSecond: 9.6 });
   resetMetrics();
   assert.equal(S.metrics.tokPerSec, 0);
-  assert.equal(byId['speed-chip'].hidden, true);
+  assert.equal(byId['ctx-chip'].hidden, true);
 });
 
 test('done applies last-call speed without using cumulative outputTokens', () => {
@@ -166,7 +165,7 @@ test('done applies last-call speed without using cumulative outputTokens', () =>
     tokensPerSecond: 9.6, outputTokens: 800, latency: 0.05,
   });
   assert.equal(S.metrics.tokPerSec, 9.6);
-  assert.equal(byId['speed-chip'].textContent, '9.6 tok/s');
+  assert.equal(byId['m-speed'].textContent, '9.6 tok/s');
 });
 
 test('turnStatsHTML includes tok/s from this-call fields, never invented from totals', () => {
diff --git a/cmd/odek/ui/js/panels.js b/cmd/odek/ui/js/panels.js
index bdd8397a..f194d376 100644
--- a/cmd/odek/ui/js/panels.js
+++ b/cmd/odek/ui/js/panels.js
@@ -1,4 +1,5 @@
-// Inspector drawer: four workspaces (sessions / now / memory / ops).
+// Inspector drawer: three workspaces (now / memory / ops). The session list
+// lives in the topbar session rail, not in the inspector.
 // Opened via the topbar button or ⌘. All data flows through js/api.js.
 import { S, getSessionToken } from './state.js';
 import { showToast, announce, escapeHtml, isDialogOpen } from './utils.js';
@@ -57,8 +58,6 @@ export function togglePanels(force) {
     stopAgentsPolling();
     if (panelOpener?.isConnected && panelOpener.focus) panelOpener.focus(); else if(pbtn?.focus) pbtn.focus();
   }
-  const hamburger = document.getElementById('hamburger-btn');
-  if (hamburger && !document.body.classList.contains('workspace-wide')) hamburger.setAttribute('aria-expanded', String(want && activeWorkspace() === 'sessions'));
 }
 S.closePanels = () => togglePanels(false);
 
@@ -91,9 +90,7 @@ function refreshActivePanel() {
     stopAgentsPolling();
   }
   if (name !== 'ops') stopRunPolling();
-  if (name === 'sessions') {
-    if (typeof S.refreshSessions === 'function') S.refreshSessions();
-  } else if (name === 'now') {
+  if (name === 'now') {
     refreshPlanPanel();
     startPlanPolling();
     loadJobs();
@@ -102,17 +99,14 @@ function refreshActivePanel() {
   } else if (name === 'memory') {
     loadMemory();
     loadSkills();
-    loadTools();
-  } else if (name === 'manage' || name === 'maintenance') {
-    S.loadManagement?.(name);
-  } else if (name === 'preferences') {
-    S.refreshPermissions?.();
-  } else if (name === 'outputs') {
-    S.loadArtifacts?.();
   } else if (name === 'ops') {
     loadRuns();
     loadEvents();
     loadConfig();
+    loadTools();
+    S.loadManagement?.('ops');
+  } else if (name === 'outputs') {
+    S.loadArtifacts?.();
   }
 }
 
@@ -132,7 +126,7 @@ drawer.querySelectorAll('.ptab').forEach(btn => {
     btn.scrollIntoView?.({block:'nearest',inline:'nearest'});
     refreshActivePanel();
     const hamburger = document.getElementById('hamburger-btn');
-    if (hamburger && !document.body.classList.contains('workspace-wide')) {
+    if (hamburger) {
       hamburger.setAttribute('aria-expanded', String(drawer.classList.contains('active') && btn.dataset.tab === 'sessions'));
     }
   });
@@ -140,7 +134,7 @@ drawer.querySelectorAll('.ptab').forEach(btn => {
 const tabsEl = document.getElementById('panels-tabs');
 if (tabsEl) {
   tabsEl.addEventListener('keydown', (e) => {
-    const tabs = Array.from(drawer.querySelectorAll('.ptab')).filter(tab => !tab.hidden && !(tab.dataset.tab === 'sessions' && document.body.classList.contains('workspace-wide')));
+    const tabs = Array.from(drawer.querySelectorAll('.ptab')).filter(tab => !tab.hidden);
     const i = tabs.indexOf(document.activeElement);
     if (i < 0) return;
     let next = -1;
@@ -156,6 +150,8 @@ if (tabsEl) {
 }
 document.addEventListener('keydown',e=>{
   if(!drawer.classList.contains('active') || isDialogOpen())return;
+  const prefs=document.getElementById('prefs-popover');
+  if(prefs&&!prefs.hidden)return;
   if(e.key==='Escape'){e.preventDefault();togglePanels(false);return;}
   if(e.key!=='Tab' || (typeof matchMedia==='function' && matchMedia('(min-width: 1100px)').matches))return;
   const items=Array.from(drawer.querySelectorAll('button,input,select,textarea,[tabindex="0"]')).filter(el=>!el.disabled && !el.hidden && el.tabIndex!==-1 && !el.closest('[hidden]'));
diff --git a/cmd/odek/ui/js/sessions.js b/cmd/odek/ui/js/sessions.js
index 4bedbf68..6ebfcd8e 100644
--- a/cmd/odek/ui/js/sessions.js
+++ b/cmd/odek/ui/js/sessions.js
@@ -473,16 +473,9 @@ export async function executeDeleteSession() {
   }
 }
 
-// ── Open the inspector sessions tab ──
+// ── Toggle the single session rail ──
 export function toggleSidebar() {
-  if (document.body.classList.contains("workspace-wide")) { S.toggleSessionRail?.(); return; }
-  const drawer = document.getElementById('panels');
-  const tab = drawer && drawer.querySelector('.ptab.active');
-  if (drawer && drawer.classList.contains('active') && tab && tab.dataset.tab === 'sessions') {
-    if (typeof S.closePanels === 'function') S.closePanels();
-    return;
-  }
-  if (typeof S.openSessionsPanel === 'function') S.openSessionsPanel();
+  S.toggleSessionRail?.();
 }
 
 // ── Session list click delegation ──
diff --git a/cmd/odek/ui/js/supervision.js b/cmd/odek/ui/js/supervision.js
index 7be3a30e..1c488de7 100644
--- a/cmd/odek/ui/js/supervision.js
+++ b/cmd/odek/ui/js/supervision.js
@@ -38,7 +38,9 @@ S.refreshSupervision=()=>{
  const title=byId('task-status');if(title)title.textContent=S.stopRequested&&S.busy?'Stopping…':S.busy?'Working on your task':S.recoveryReason?'Work needs review':'Ready to continue';
  const root=byId('attention-view');if(!root)return;root.textContent='';
  const items=[];
- if(S.activeApprovalId)items.push(['Approval waiting',()=>{S.closePanels?.();S.activeApprovalCard?.scrollIntoView?.({block:'center'});S.activeApprovalCard?.focus();}]);
+ // Approvals render in the global #approval-overlay above the transcript,
+ // so they are not attention-view rows — the chip routes to them instead.
+ const approvalCount = S.approvalQueue?.length || (S.activeApprovalId ? 1 : 0);
  if(S.activeClarifyCard)items.push(['Answer the agent',()=>{S.closePanels?.();S.activeClarifyCard.scrollIntoView?.({block:'center'});S.activeClarifyCard.querySelector('textarea')?.focus();}]);
  for(const step of S.plan?.steps||[])if(step.status==='blocked')items.push(['Blocked: '+step.title,()=>S.requestFollowup('Help resolve blocked step '+step.id+': '+step.title)]);
  if(S.failedChecks)items.push([S.failedChecks+' failed checks · review evidence',()=>openTab('outputs')]);
@@ -46,9 +48,9 @@ S.refreshSupervision=()=>{
  if(S.knowledgeNeedsReview)items.push(['Review memory before allowing reuse',()=>openTab('memory')]);
  for(const item of S.agentAttention?.values() || [])items.push([item.label+' · '+item.status,()=>S.requestFollowup('Review delegated work: '+item.label+'. Verify its evidence and continue unfinished work.')]);
  const activeJobs=(S.jobs||[]).filter(job=>job.status==='running');if(!S.busy && activeJobs.length)items.push([activeJobs.length+' background jobs still running',()=>openTab('now')]);
- if(!items.length)root.appendChild(node('p','management-note','Nothing needs your decision.'));
+ if(!items.length && !approvalCount)root.appendChild(node('p','management-note','Nothing needs your decision.'));
  for(const [label,fn] of items)root.appendChild(action(label,fn));
- const chip=byId('attention-chip');if(chip){chip.hidden=!items.length;chip.textContent=items.length+' need attention';}
+ const chip=byId('attention-chip');if(chip){chip.hidden=!(items.length||approvalCount);chip.textContent=(items.length+approvalCount)+' need attention';}
 };
 
 let recoveryVersion=0;
@@ -111,8 +113,8 @@ const size=byId('reading-size');
 function setReadingSize(value){const n=[15,17,19].includes(Number(value))?Number(value):15;document.documentElement.style.setProperty('--reading-size',n+'px');if(size)size.value=String(n);try{localStorage.setItem('odek_reading_size',String(n));}catch{/* optional preference */}}
 try{setReadingSize(localStorage.getItem('odek_reading_size'));}catch{setReadingSize(15);}
 size?.addEventListener('change',()=>setReadingSize(size.value));
-byId('all-activity-btn')?.addEventListener('click',()=>openTab('activity'));
-byId('attention-chip')?.addEventListener('click',()=>openTab('now'));
+byId('all-activity-btn')?.addEventListener('click',()=>S.openActivityDetails?.());
+byId('attention-chip')?.addEventListener('click',()=>{if(S.approvalQueue?.length){S.activeApprovalCard?.scrollIntoView?.({block:'center'});S.activeApprovalCard?.focus();}else openTab('now');});
 S.refreshSupervision();
 
 let decisions=new Map();
diff --git a/cmd/odek/ui/js/workspace.js b/cmd/odek/ui/js/workspace.js
index 9fb7d046..96aad19e 100644
--- a/cmd/odek/ui/js/workspace.js
+++ b/cmd/odek/ui/js/workspace.js
@@ -48,8 +48,16 @@ function inspect(item) {
   detail.append(back, jump, textNode('h3', 'output-title', item.name));
   renderResult(detail, item);
   detail.hidden = false; byId('output-list').hidden = true;
-  openTab('activity');detail.tabIndex=-1;detail.focus();
+  openActivityDetails();detail.tabIndex=-1;detail.focus();
 }
+// Reveal the collapsed in-panel activity view instead of a separate tab.
+function openActivityDetails() {
+  openTab('outputs');
+  const d = byId('activity-details');
+  if (d) { d.open = true; d.scrollIntoView?.({ block: 'start' }); }
+}
+S.openActivityDetails = openActivityDetails;
+
 S.recordResult = (block, output) => {
   const item = { block, output, outcome:block.dataset.outcome || 'unknown', turnId:block.dataset.turnId || '', callId:block.dataset.callId || '', name: block.dataset.toolName || 'tool', args: block.dataset.toolArgs || '', preview: toolPreview(block.dataset.toolName || '', block.dataset.toolArgs || '') };
   item.stepId=(S.plan?.steps || []).find(step=>step.status==='in_progress')?.id || '';
@@ -88,23 +96,22 @@ density?.addEventListener('click', () => setDensity(document.body.classList.cont
 
 S.sessionRailOpen = false;
 function syncSessionRail() {
-  const wide = document.body.classList.contains('workspace-wide');
-  const open = wide && S.sessionRailOpen;
+  const open = S.sessionRailOpen;
   document.body.classList.toggle('sessions-open', open);
   const rail = byId('session-rail');
   if (rail) { rail.hidden = !open; rail.setAttribute('aria-hidden', String(!open)); }
   const button = byId('hamburger-btn');
-  if (button && wide) { button.setAttribute('aria-expanded', String(open)); button.setAttribute('aria-controls','session-rail'); }
-  else if (button) button.setAttribute('aria-controls','panels');
+  if (button) { button.setAttribute('aria-expanded', String(open)); button.setAttribute('aria-controls','session-rail'); }
 }
 S.toggleSessionRail = () => { S.sessionRailOpen = !S.sessionRailOpen; syncSessionRail(); };
 
-// Move the existing session navigation instead of maintaining duplicate lists.
+// Keep the workspace-wide marker for CSS/behavior branches; the rail hosts
+// the single session list on every width.
 if (typeof matchMedia === 'function') {
   const wide = matchMedia('(min-width: 1100px)');
   const relocate = () => {
-    const target = byId(wide.matches ? 'session-rail' : 'ppanel-sessions');
-    const sidebar = byId('sidebar'); if (target && sidebar) target.appendChild(sidebar);
+    const target = byId('session-rail');
+    const sidebar = byId('sidebar'); if (target && sidebar && sidebar.parentElement !== target) target.appendChild(sidebar);
     document.body.classList.toggle('workspace-wide', wide.matches);
     syncSessionRail();
   };
diff --git a/cmd/odek/ui/style.css b/cmd/odek/ui/style.css
index 097a3a34..4cef8b7f 100644
--- a/cmd/odek/ui/style.css
+++ b/cmd/odek/ui/style.css
@@ -499,10 +499,6 @@ button:disabled { cursor: not-allowed; }
 /* ═══════════════════════════════════════════════════════════════════════
    SIDEBAR — session index
 ═══════════════════════════════════════════════════════════════════════ */
-#ppanel-sessions.ppanel.active {
-  display: flex;
-  flex-direction: column;
-}
 #sidebar {
   background: transparent;
   border-right: none;
@@ -2507,6 +2503,22 @@ body.light .composer-bar { border-top-color: rgba(0, 0, 0, .06); }
 }
 #confirm-actions .delete-confirm:hover { filter: brightness(1.1); }
 
+/* Global approval overlay: sits above the transcript regardless of the
+   inspector state so queued approvals are never buried in a panel. */
+#approval-overlay {
+  position: fixed;
+  top: calc(var(--topbar-h) + 12px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 60;
+  width: min(640px, calc(100vw - 32px));
+  max-height: min(70vh, 560px);
+  overflow: auto;
+  pointer-events: none;
+}
+#approval-overlay:not([hidden]) { pointer-events: auto; }
+#approval-overlay .approval-card { box-shadow: 0 12px 36px rgba(0,0,0,.35); margin-bottom: 8px; }
+
 .toast {
   position: fixed;
   bottom: var(--space-5);
@@ -2588,11 +2600,11 @@ body.light .composer-bar { border-top-color: rgba(0, 0, 0, .06); }
   padding: 1px 8px;
 }
 .m-chip.hot { color: var(--red); border-color: var(--red); }
-#plan-chip, #jobs-chip, #cost-chip, #speed-chip {
+#plan-chip, #jobs-chip, #cost-chip {
   cursor: pointer;
   user-select: none;
 }
-#plan-chip[hidden], #jobs-chip[hidden], #cost-chip[hidden], #speed-chip[hidden] { display: none; }
+#plan-chip[hidden], #jobs-chip[hidden], #cost-chip[hidden] { display: none; }
 #sandbox-badge, #stream-badge {
   font-size: var(--fs-xs);
   letter-spacing: .04em;
@@ -2893,6 +2905,13 @@ body { font-family: var(--ui); }
 body.density-compact { --fs-base: 13px; --fs-md: 13px; --fs-sm: 12px; --fs-xs: 11px; --topbar-h: 44px; --content-w: 760px; }
 #topbar { background: var(--bg-1); border-bottom: 1px solid var(--line-2); gap: 12px; }
 #session-rail { display: none; }
+@media (max-width: 1099px) {
+  body.sessions-open #session-rail {
+    display: flex; position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
+    width: min(320px, 85vw); z-index: 55; overflow: auto;
+    border-right: 1px solid var(--line-2); background: var(--bg-1); padding: 12px 8px;
+  }
+}
 #main { min-width: 0; background: var(--bg-0); }
 #messages { padding: 40px 24px; }
 #messages > * { max-width: min(var(--content-w), 100%); }
@@ -2948,13 +2967,12 @@ body.density-compact { --fs-base: 13px; --fs-md: 13px; --fs-sm: 12px; --fs-xs: 1
 .tb-body { white-space: pre-wrap; }
 .tb-result { padding: 0; border: 0; }
 @media (min-width: 1100px) {
-  #app { grid-template-columns: 240px minmax(0, 1fr); }
+  #app { grid-template-columns: minmax(0, 1fr); }
   #session-rail { display: flex; grid-column: 1; grid-row: 2; min-height: 0; border-right: 1px solid var(--line-2); background: var(--bg-1); padding: 12px 8px; }
-  #main { grid-column: 2; grid-row: 2; }
+  #main { grid-row: 2; }
   #sidebar { width: 100%; }
   #sidebar-header { padding: 12px 10px 16px; }
   #sidebar-header h3 { font: 600 13px var(--ui); color: var(--text-2); }
-  #hamburger-btn, #ptab-sessions { display: none; }
   .session-item { border-radius: 8px; margin: 3px 0; padding: 12px; }
   .session-item .task { font: 500 13px/1.5 var(--ui); }
   .session-item.active { background: var(--amber-dim); }
@@ -3047,7 +3065,7 @@ body.workspace-wide #session-rail { min-width: 0; }
   #hamburger-btn { grid-column: 1; grid-row: 1; }
   .top-brand { grid-column: 2; grid-row: 1; }
   #status-group { grid-column: 3; grid-row: 1; justify-self: start; }
-  .top-spacer, #metrics, #busy-spin, #speed-chip, #cost-chip { display: none !important; }
+  .top-spacer, #metrics, #busy-spin, #cost-chip { display: none !important; }
   .top-controls { display: contents; }
   #palette-btn { grid-column: 4; grid-row: 1; width: 40px; height: 40px; }
   #panels-btn { grid-column: 5; grid-row: 1; width: 40px; height: 40px; }
@@ -3185,7 +3203,6 @@ body.theme-high-contrast #empty-state-inner::before { display:none; }
 .run-settings-fields label { display:flex; flex-direction:column; gap:6px; }
 .run-settings-fields input, .run-settings-fields select { width:100%; min-height:36px; border:1px solid var(--line-3); background:var(--bg-1); color:var(--text); padding:6px 8px; border-radius:6px; }
 #model-picker, #thinking-picker { display:block !important; max-width:100%; min-width:0; }
-#speed-chip { display:none !important; }
 #schedules-btn, #settings-btn, #attention-chip { width:auto; height:auto; min-height:32px; padding:4px 8px; font:12px var(--ui); color:var(--text-2); }
 #attention-chip { color:var(--amber-hi); }
 #panels[inert] { pointer-events:none; }
@@ -3265,3 +3282,60 @@ body.theme-high-contrast #empty-state-inner::before { display:none; }
 
 #health-popover #ctx-gauge { display:flex; }
 #health-popover .ctx-label { display:none; }
+
+/* ── Collapsed workspace sections (Activity inside Deliverables, Server merges) ── */
+.ws-details {
+  margin: var(--space-4) 0;
+  border: 1px solid var(--line-1);
+  border-radius: 8px;
+  padding: 0;
+}
+.ws-details > summary {
+  cursor: pointer;
+  padding: 8px 12px;
+  font: 12px var(--ui);
+  color: var(--text-2);
+  user-select: none;
+}
+.ws-details > summary:hover { color: var(--text); background: var(--bg-2); }
+.ws-details[open] > summary { border-bottom: 1px solid var(--line-1); color: var(--text); }
+.ws-details > *:not(summary) { margin: 12px; }
+
+/* ── Preferences gear button + popover ─────────────────────────────── */
+#prefs-btn {
+  width: 32px;
+  height: 32px;
+  min-height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid var(--line-2);
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--text-2);
+}
+#prefs-btn:hover { background: var(--bg-2); color: var(--text); }
+#prefs-btn svg { width: 16px; height: 16px; }
+
+/* NOTE: visibility is driven by the `hidden` attribute — no `display`
+   rule may be set here or it would override it. */
+#prefs-popover {
+  position: fixed;
+  top: calc(var(--topbar-h) + 8px);
+  right: 16px;
+  z-index: 260;
+  min-width: 280px;
+  max-width: min(360px, calc(100vw - 32px));
+  padding: var(--space-3) var(--space-4);
+  background: var(--bg-0);
+  border: 1px solid var(--line-2);
+  border-radius: 0;
+  box-shadow: none;
+  animation: pop-in var(--dur-slow) var(--ease-spring) both;
+}
+#prefs-popover h3 { margin: 0 0 var(--space-2); font-size: var(--fs-sm); }
+#prefs-popover .ws-head { margin-top: var(--space-3); }
+@media (max-width: 640px) {
+  #prefs-popover { left: var(--space-3); right: var(--space-3); min-width: 0; }
+}

From f2aa8eb90b7018bba78b5add8c1c8efe324f3503 Mon Sep 17 00:00:00 2001
From: Rolando Santamaria Maso <4096860+jkyberneees@users.noreply.github.com>
Date: Wed, 7 Oct 2026 16:16:19 +0200
Subject: [PATCH 2/2] fix(ui): use defined --line-3 variable in workspace
 details styles

---
 cmd/odek/ui/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cmd/odek/ui/style.css b/cmd/odek/ui/style.css
index 4cef8b7f..743248ad 100644
--- a/cmd/odek/ui/style.css
+++ b/cmd/odek/ui/style.css
@@ -3286,7 +3286,7 @@ body.theme-high-contrast #empty-state-inner::before { display:none; }
 /* ── Collapsed workspace sections (Activity inside Deliverables, Server merges) ── */
 .ws-details {
   margin: var(--space-4) 0;
-  border: 1px solid var(--line-1);
+  border: 1px solid var(--line-3);
   border-radius: 8px;
   padding: 0;
 }
@@ -3298,7 +3298,7 @@ body.theme-high-contrast #empty-state-inner::before { display:none; }
   user-select: none;
 }
 .ws-details > summary:hover { color: var(--text); background: var(--bg-2); }
-.ws-details[open] > summary { border-bottom: 1px solid var(--line-1); color: var(--text); }
+.ws-details[open] > summary { border-bottom: 1px solid var(--line-3); color: var(--text); }
 .ws-details > *:not(summary) { margin: 12px; }
 
 /* ── Preferences gear button + popover ─────────────────────────────── */