From 1971436c26582979bf178e2b8b3b46551f65bee9 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 10 Sep 2026 00:04:25 +0200 Subject: [PATCH] feat: workspace mode keeps both the rail menu and the cards, merged into one look MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Both surfaces render from the same pass over the app's real .tab-btn list, so neither can drift from the menu it mirrors. - The card view now shares the empty state's graph-paper ground, card language and spacing, and is centred with a max width, so switching modes reads as the same app instead of a page that looks nothing like it. - Cards carry the clinical work tabs only: Settings, Admin, Docs and FAQ stay in the rail list, where someone looking for them will go, rather than sitting alongside Encounter HPI and Calculators. - On phones the card grid is hidden entirely and the chat stays on screen — the drawer already is the menu there, so a second copy only pushed it away. - The Sources column and its 330px grid track both go in workspace mode. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01BkfrkQwA4YGrGw9LZSpeAq --- public/components/assistant.html | 13 ++++++++----- public/css/assistant.css | 17 +++++++++++++++++ public/js/clinicalAssistant.js | 22 ++++++++++++++++++++-- test/assistant-workspace-layout.test.js | 12 +++++++++--- 4 files changed, 54 insertions(+), 10 deletions(-) diff --git a/public/components/assistant.html b/public/components/assistant.html index 37671251..ec14875c 100644 --- a/public/components/assistant.html +++ b/public/components/assistant.html @@ -22,6 +22,11 @@ + +
- -
+
diff --git a/public/css/assistant.css b/public/css/assistant.css index 0807b78a..bee1ac38 100644 --- a/public/css/assistant.css +++ b/public/css/assistant.css @@ -20,6 +20,8 @@ body.assistant-workspace .assistant-topbar-title h2 { position:absolute; width:1 .assistant-main { display:flex; flex-direction:column; min-height:calc(100vh - 200px); min-width:0; } #assistant-chat-view { display:grid; grid-template-rows:auto minmax(420px,1fr) auto; min-height:calc(100vh - 200px); min-width:0; } #assistant-chat-view[hidden] { display:none; } +/* Phones keep the chat visible: the drawer carries the workspace menu there. */ +@media (max-width:640px) { body.assistant-mode-workspace #assistant-chat-view[hidden] { display:flex; } } .assistant-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--g200); background:var(--g50); } .assistant-toolbar-actions { display:flex; gap:6px; flex-wrap:wrap; } .assistant-messages { padding:16px; max-height:65vh; overflow-y:auto; overflow-x:hidden; background:linear-gradient(180deg,#fff,var(--g50)); min-width:0; } @@ -161,6 +163,21 @@ body.assistant-workspace .assistant-topbar-title h2 { position:absolute; width:1 .assistant-mode-switch button i { font-size:11px; } .assistant-mode-switch button.active { background:white; color:var(--purple); box-shadow:var(--shadow); } +/* Workspace view: same ground, same card language and same spacing as the empty + state, so switching modes reads as the same app rather than a separate page. */ +.assistant-workspace-view { padding:24px 18px; overflow-y:auto; min-height:0; + background-image:linear-gradient(var(--g100) 1px, transparent 1px), linear-gradient(90deg, var(--g100) 1px, transparent 1px); + background-size:28px 28px; background-position:-1px -1px; } +.assistant-workspace-view[hidden] { display:none; } +.assistant-workspace-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; max-width:860px; margin:0 auto; } +.assistant-workspace-card { display:flex; align-items:center; gap:10px; border:1px solid var(--g200); background:white; border-radius:10px; padding:12px 14px; font-size:12.5px; color:var(--g700); text-align:left; cursor:pointer; box-shadow:var(--shadow); } +.assistant-workspace-card:hover { border-color:var(--purple-light); background:#faf5ff; color:var(--purple); } +.assistant-workspace-card i { width:16px; text-align:center; color:var(--g400); font-size:13px; } +.assistant-workspace-card:hover i { color:var(--purple); } +/* On a phone the rail IS the drawer menu; a second copy as cards is redundant + and pushes the real list off the screen. */ +@media (max-width:640px) { .assistant-workspace-view { display:none !important; } } + /* Workspace mode: the sources column goes with it, and the track goes too — hiding the panel alone left an empty 330px gutter. */ body.assistant-mode-workspace .assistant-layout { grid-template-columns:260px minmax(0,1fr); } diff --git a/public/js/clinicalAssistant.js b/public/js/clinicalAssistant.js index 10b5535c..2c5b3dd3 100644 --- a/public/js/clinicalAssistant.js +++ b/public/js/clinicalAssistant.js @@ -163,10 +163,17 @@ import { // The rail mirrors the app's real tab list rather than restating it, so a tab // added, renamed or hidden in index.html shows up here with no extra work. + // Cards are the clinical work surface: account and administration tabs stay + // in the rail list, where someone looking for them will go, but they do not + // sit alongside Encounter HPI and Calculators. + var NON_WORK_TABS = ['settings', 'admin', 'docs', 'faq']; + var renderWorkspaceLinks = function() { var host = document.getElementById('assistant-workspace-links'); + var cards = document.getElementById('assistant-workspace-cards'); if (!host) return; host.innerHTML = ''; + if (cards) cards.innerHTML = ''; Array.prototype.forEach.call(document.querySelectorAll('.tab-btn'), function(tab) { var name = tab.getAttribute('data-tab'); if (!name || name === 'assistant' || tab.classList.contains('hidden')) return; @@ -179,6 +186,15 @@ import { link.innerHTML = '' + '' + escapeHtml(label ? label.textContent : name) + ''; host.appendChild(link); + if (cards && NON_WORK_TABS.indexOf(name) === -1) { + var card = document.createElement('button'); + card.type = 'button'; + card.className = 'assistant-workspace-card'; + card.setAttribute('data-assistant-workspace-tab', name); + card.innerHTML = '' + + '' + escapeHtml(label ? label.textContent : name) + ''; + cards.appendChild(card); + } }); }; @@ -192,12 +208,14 @@ import { var newChat = document.getElementById('btn-assistant-clear'); var createImage = document.getElementById('btn-assistant-create-image'); if (workspace) renderWorkspaceLinks(); + var chatView = document.getElementById('assistant-chat-view'); + var workspaceView = document.getElementById('assistant-workspace-view'); + if (chatView) chatView.hidden = workspace; + if (workspaceView) workspaceView.hidden = !workspace; if (rail) rail.hidden = !workspace; if (chats) chats.hidden = workspace; if (newChat) newChat.hidden = workspace; if (createImage) createImage.hidden = workspace; - // The chat column stays put. Only the rail swaps, so switching modes is a - // change of menu rather than a jump to a page that looks nothing like it. var side = document.querySelector('.assistant-side'); if (side) side.hidden = workspace || !citationsOn; document.body.classList.toggle('assistant-mode-workspace', workspace); diff --git a/test/assistant-workspace-layout.test.js b/test/assistant-workspace-layout.test.js index 2544307d..3fec8eb0 100644 --- a/test/assistant-workspace-layout.test.js +++ b/test/assistant-workspace-layout.test.js @@ -188,18 +188,24 @@ test('the rail switches between Assistant and Workspace like Home and Code', () assert.match(html, /assistant-mode-switch/, 'a two-pill switch sits at the top of the rail'); assert.match(html, /data-assistant-mode="assistant"/); assert.match(html, /data-assistant-mode="workspace"/); - // ONE menu, not two: switching modes swaps the rail, it does not jump to a - // page that looks nothing like the assistant. - assert.doesNotMatch(html, /assistant-workspace-cards/, 'no second copy of the menu in the main column'); + assert.match(html, /id="assistant-workspace-cards"/, 'cards carry the work tabs'); + assert.match(html, /id="assistant-workspace-links"/, 'and the rail carries the full menu'); const js = fs.readFileSync(path.join(root, 'public/js/clinicalAssistant.js'), 'utf8'); assert.match(js, /if \(side\) side\.hidden = workspace \|\| !citationsOn;/, 'sources are hidden in workspace mode'); assert.match(js, /if \(chats\) chats\.hidden = workspace;/, 'and the saved-chat list'); + // Account and administration are not clinical work surfaces. + assert.match(js, /NON_WORK_TABS = \['settings', 'admin', 'docs', 'faq'\]/); + assert.match(js, /cards && NON_WORK_TABS\.indexOf\(name\) === -1/, 'excluded from the cards only'); const css = fs.readFileSync(path.join(root, 'public/css/assistant.css'), 'utf8'); // Hiding the panel without dropping its track leaves an empty 330px gutter. assert.match(css, /body\.assistant-mode-workspace \.assistant-layout \{ grid-template-columns:260px minmax\(0,1fr\); \}/); assert.match(css, /body\.assistant-mode-workspace \.assistant-layout\.history-collapsed \{ grid-template-columns:0 minmax\(0,1fr\); \}/); + // On a phone the drawer already is the menu; a card grid would push it away. + assert.match(css, /@media \(max-width:640px\) \{ \.assistant-workspace-view \{ display:none !important; \} \}/); + assert.match(css, /body\.assistant-mode-workspace #assistant-chat-view\[hidden\] \{ display:flex; \}/, + 'so the chat stays on screen there'); }); test('Learning Hub sits with the content tools, not above the clinical ones', () => {