From b55a7483619d86f60893ced9053f2b1e6ef704a4 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 10 Sep 2026 04:25:10 +0200 Subject: [PATCH] fix: remove the assistant's second top bar and give the toggle a menu icon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The assistant carried its own bar above the layout, on top of the blue app header that both pages now share. On desktop it held a visually-hidden title, a mobile-only drawer button and a status pill — so it was mostly dead space, and it made the assistant taller than the app page it is supposed to match. The bar is gone. The ready/busy indicator moved into the composer footer, next to the work it describes, and the drawer button floats on phones rather than occupying a strip the desktop layout does not have. The rail now sticks to the top of the layout instead of 52px below a bar that no longer exists. The menu toggle used fa-table-columns, a split-pane glyph that does not read as "menu". Both copies now use fa-bars and rotate when collapsed to show which way they will act. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01GmpYHPSLGmXGZMyLpn2Lbe --- public/components/assistant.html | 15 ++-------- public/css/assistant.css | 25 +++++++++------- public/index.html | 2 +- test/assistant-workspace-layout.test.js | 39 ++++++++++++++++++------- 4 files changed, 46 insertions(+), 35 deletions(-) diff --git a/public/components/assistant.html b/public/components/assistant.html index 43c903e9..9ffdcb21 100644 --- a/public/components/assistant.html +++ b/public/components/assistant.html @@ -1,20 +1,10 @@ -
- -
-

AI Clinical Assistant

-
-
- - Ready -
-
-
+
- + diff --git a/test/assistant-workspace-layout.test.js b/test/assistant-workspace-layout.test.js index df2fb779..d586ae7b 100644 --- a/test/assistant-workspace-layout.test.js +++ b/test/assistant-workspace-layout.test.js @@ -60,8 +60,9 @@ test('assistant area is an OWUI-style three-column workspace with a slim go-back assert.equal(right.querySelector('#assistant-visual-output'), null, 'no image display in the right column — sources only'); assert.ok(right.querySelector('#assistant-sources'), 'sources panel in the right column'); assert.equal(right.querySelector('#assistant-saved-chats'), null, 'saved chats moved out of the right column'); - const topbar = app.document.querySelector('.assistant-topbar'); - assert.ok(topbar); + // No bar above the layout at all: the app page has only the blue header, so a + // second bar here made the assistant taller and left dead space on top. + assert.equal(app.document.querySelector('.assistant-topbar'), null, 'no assistant-only top bar'); // Go back is gone: the Assistant/Workspace switch is how you leave, so a // second exit control in the topbar was one affordance too many. assert.equal(app.document.querySelector('#btn-assistant-goback'), null, 'no Go back in the topbar'); @@ -154,15 +155,31 @@ test('collapsing the rail does not hand the chat column to the citations panel', assert.match(track, /grid-template-columns:0 minmax\(0,1fr\) 330px/, 'three tracks for three items'); }); -test('the assistant workspace does not repeat its own name in the topbar', () => { - const fs = require('node:fs'); - const path = require('node:path'); - const css = fs.readFileSync(path.join(__dirname, '..', 'public/css/assistant.css'), 'utf8'); - const rule = css.split('\n').find(l => l.startsWith('body.assistant-workspace .assistant-topbar-title h2')); - assert.ok(rule, 'the title is hidden inside the workspace'); - assert.match(rule, /clip:rect\(0 0 0 0\)/, 'visually hidden, still read by screen readers'); - const html = fs.readFileSync(path.join(__dirname, '..', 'public/components/assistant.html'), 'utf8'); - assert.match(html, /AI Clinical Assistant/, 'and still present in the DOM'); +test('the assistant and the app start at the same top edge', () => { + const rail = read('public/components/assistant.html'); + const css = read('public/css/assistant.css'); + // The assistant used to carry its own bar on top of the shared blue header, + // so switching modes changed the height of everything below it. + assert.doesNotMatch(rail, /assistant-topbar/, 'no second bar in the markup'); + assert.doesNotMatch(css, /assistant-topbar/, 'and none left in the stylesheet'); + assert.match(css, /\.assistant-history \{ display:grid; gap:10px; align-content:start; position:sticky; top:0; \}/, + 'the rail sticks to the top of the layout, not below a bar'); + // The status moved into the composer, next to the work it describes. + assert.match(rail, /assistant-composer-footer[\s\S]*?id="assistant-status"/, + 'the ready/busy indicator lives in the composer now'); +}); + +test('the menu toggle uses an icon that reads as a menu', () => { + for (const file of ['public/index.html', 'public/components/assistant.html']) { + const markup = read(file); + const button = markup.split('\n').find(l => l.includes('data-menu-toggle')); + assert.ok(button, file + ' has the toggle'); + // fa-table-columns draws a split-pane glyph, which does not say "menu". + assert.doesNotMatch(button, /fa-table-columns/, file + ' uses a menu icon'); + assert.match(button, /fa-bars/, file); + } + assert.match(read('public/css/assistant.css'), /\.assistant-menu-toggle\.is-collapsed i \{ transform:rotate\(180deg\); \}/, + 'and it turns to show the direction it will act in'); }); test('workspace mode does not override the mobile layout with a desktop header offset', () => {