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', () => {