fix(desktop): logo-only rail switcher, workspace name in status bar

Match Nexus UX: icon rail shows only the logo button (dropdown portal to
the right with glass card, Workspaces header, active checkmark). Workspace
basename and git branch live in the status bar as read-only context.

Author: jravenel

libs/naas-abi/naas_abi/apps/desktop/AGENTS.md

@@ -124,7 +124,7 @@ desktop/
 
 A workspace is a **folder on disk** (VS Code / Cursor semantics), not a Nexus tenant.
 
-- **UI**: icon rail top (Nexus sidebar-top pattern): ABI logo + workspace basename + chevron opens a dropdown downward (square corners). Hover shows the full path; the menu lists the current path (dimmed), recent workspaces, and **Open Folder…**. The status bar left shows the current workspace basename and git branch as read-only context (no switch action). Top bar and main body stay clean (panel toggle + section title only).
+- **UI**: icon rail top (Nexus sidebar-top pattern): **logo button only** opens a glass portal dropdown to the right (square corners). Hover on the logo shows the full path; the menu lists recent workspaces with a checkmark on the active entry and **Open Folder…**. The status bar left shows the current workspace basename and git branch as read-only context (no switch action). Top bar and main body stay clean (panel toggle + section title only).
 - **Switch / open**: `POST /api/workspaces/open` or `PUT /api/settings` with a new `workspace_root`. Triggers `ensure_workspace`, harness restart, terminal reconnect, file index refresh, org/model context reload, and graph rescaffold.
 - **Recent list**: `recent_workspaces` setting (JSON array, max 10 paths). Updated on every open/switch.
 - **First run**: `maybe_upgrade_workspace_setting()` auto-detects `~/abi` (git + `.env`) when still on the factory default.

libs/naas-abi/naas_abi/apps/desktop/README.md

@@ -27,7 +27,7 @@ uv run python libs/naas-abi/naas_abi/apps/desktop/run.py --browser-only
 
 Open [http://127.0.0.1:54242](http://127.0.0.1:54242). Override the port with `ABI_DESKTOP_PORT` if needed.
 
-Use the **workspace switcher** (icon rail top: logo + folder name + chevron) to open or switch IDE workspaces. The status bar shows the current workspace and git branch as read-only context. Each workspace is a folder on disk (e.g. `~/abi`). In browser dev, **Open Folder…** accepts a typed path; in the pywebview app, **Browse…** opens the native folder picker.
+Use the **workspace switcher** (icon rail top: logo only, Nexus-style) to open or switch IDE workspaces. The **status bar** (left) shows the current workspace basename and git branch as read-only context. Each workspace is a folder on disk (e.g. `~/abi`). In browser dev, **Open Folder…** accepts a typed path; in the pywebview app, **Browse…** opens the native folder picker.
 
 Useful flags:
 

libs/naas-abi/naas_abi/apps/desktop/gui/web/app.js

@@ -2503,10 +2503,8 @@ function hasNativeFolderPicker() {
 
 function renderWorkspaceSwitcher() {
   const trigger = $("workspace-switcher");
-  const nameEl = $("workspace-name");
-  const pathEl = $("workspace-menu-path");
   const listEl = $("workspace-menu-recent");
-  if (!trigger || !nameEl || !pathEl || !listEl) return;
+  if (!trigger || !listEl) return;
 
   const active =
     state.workspaces?.active ||
@@ -2518,35 +2516,35 @@ function renderWorkspaceSwitcher() {
         }
       : null);
 
-  const displayName = active?.name || "workspace";
   const fullPath = active?.path || "Workspace root";
-  nameEl.textContent = displayName;
   trigger.title = fullPath;
-  pathEl.textContent = active?.path || "";
 
   listEl.innerHTML = "";
-  const recent = (state.workspaces?.recent || []).filter(
-    (item) => !active || item.path !== active.path
-  );
-  if (!recent.length && active) {
+  const items = [];
+  if (active) items.push(active);
+  for (const item of state.workspaces?.recent || []) {
+    if (!active || item.path !== active.path) items.push(item);
+  }
+  if (!items.length) {
     const empty = document.createElement("p");
-    empty.className = "workspace-menu-path";
-    empty.textContent = "No other recent workspaces";
+    empty.className = "workspace-menu-empty";
+    empty.textContent = "No workspaces yet";
     listEl.appendChild(empty);
   }
-  for (const item of recent) {
+  for (const item of items) {
+    const isActive = Boolean(active && item.path === active.path);
     const btn = document.createElement("button");
     btn.type = "button";
     btn.className = "workspace-menu-item";
     if (!item.exists) btn.classList.add("missing");
-    if (active && item.path === active.path) btn.classList.add("active");
+    if (isActive) btn.classList.add("active");
     btn.title = item.path;
     btn.dataset.path = item.path;
     const label = document.createElement("span");
     label.className = "workspace-menu-item-name";
     label.textContent = item.name;
     btn.appendChild(label);
-    if (active && item.path === active.path) {
+    if (isActive) {
       const check = document.createElement("span");
       check.className = "workspace-menu-item-check";
       check.innerHTML = icon("check", 14);
@@ -2571,9 +2569,9 @@ function positionWorkspaceMenu() {
   const menu = $("workspace-menu");
   if (!trigger || !menu) return;
   const rect = trigger.getBoundingClientRect();
-  menu.style.top = `${rect.bottom + 6}px`;
+  menu.style.top = `${rect.top}px`;
   menu.style.bottom = "auto";
-  menu.style.left = `${rect.left}px`;
+  menu.style.left = `${rect.right + 8}px`;
 }
 
 function openWorkspaceMenu() {

libs/naas-abi/naas_abi/apps/desktop/gui/web/index.html

@@ -22,10 +22,6 @@
           aria-expanded="false"
         >
           <img id="workspace-logo" src="/static/assets/abi-logo.png" alt="ABI" width="28" height="28" />
-          <span class="workspace-switcher-label">
-            <span id="workspace-name">workspace</span>
-            <span class="workspace-chevron" data-icon="chevron-down" data-size="12"></span>
-          </span>
         </button>
       </div>
       <div class="rail-nav">
@@ -395,7 +391,7 @@ <h2>Models</h2>
   <!-- Workspace switcher dropdown (portal, Nexus-inspired) -->
   <div id="workspace-menu-backdrop" class="workspace-menu-backdrop hidden"></div>
   <div id="workspace-menu" class="workspace-menu glass-card hidden" role="menu" aria-label="Workspaces">
-    <p id="workspace-menu-path" class="workspace-menu-path"></p>
+    <p class="workspace-menu-heading">Workspaces</p>
     <div id="workspace-menu-recent" class="workspace-menu-list"></div>
     <button type="button" id="workspace-menu-open-folder" class="workspace-menu-action">
       <span data-icon="folder" data-size="14"></span><span>Open Folder…</span>

libs/naas-abi/naas_abi/apps/desktop/gui/web/shell_ui_test.py

@@ -0,0 +1,60 @@
+"""Shell layout conventions for ABI Desktop web UI."""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+WEB_DIR = Path(__file__).resolve().parent
+
+
+def _read(name: str) -> str:
+    return (WEB_DIR / name).read_text(encoding="utf-8")
+
+
+def test_rail_logo_only_workspace_switcher() -> None:
+    html = _read("index.html")
+    assert 'id="workspace-switcher"' in html
+    assert 'id="workspace-logo"' in html
+    assert 'id="workspace-name"' not in html
+    assert "workspace-switcher-label" not in html
+    assert "workspace-chevron" not in html
+
+
+def test_status_bar_shows_workspace_name() -> None:
+    html = _read("index.html")
+    assert 'id="status-workspace"' in html
+    assert 'id="status-git"' in html
+    assert html.index('id="status-workspace"') < html.index('id="status-git"')
+
+
+def test_workspace_menu_nexus_style() -> None:
+    html = _read("index.html")
+    assert 'id="workspace-menu"' in html
+    assert 'class="workspace-menu glass-card' in html
+    assert "workspace-menu-heading" in html
+    assert "Workspaces" in html
+    assert 'id="workspace-menu-open-folder"' in html
+    assert "workspace-menu-path" not in html
+
+
+def test_app_shell_status_bar_layout() -> None:
+    html = _read("index.html")
+    assert 'id="app-shell"' in html
+    assert 'id="status-bar"' in html
+    assert html.index('id="app-shell"') < html.index('id="status-bar"')
+
+
+def test_workspace_switcher_js_uses_status_not_rail_name() -> None:
+    js = _read("app.js")
+    assert "status-workspace" in js
+    assert "workspace-name" not in js
+    assert "workspace-menu-path" not in js
+    assert "rect.right + 8" in js
+
+
+def test_workspace_switcher_css_logo_button() -> None:
+    css = _read("style.css")
+    assert ".glass-card" in css
+    assert ".workspace-switcher" in css
+    assert "workspace-switcher-label" not in css
+    assert "#workspace-name" not in css

libs/naas-abi/naas_abi/apps/desktop/gui/web/style.css

@@ -76,6 +76,15 @@ input, textarea, select { font: inherit; color: inherit; }
   -webkit-backdrop-filter: blur(12px);
 }
 
+.glass-card {
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+  border-radius: 0;
+}
+
 #app {
   display: flex;
   flex-direction: column;
@@ -105,89 +114,71 @@ svg.icon { flex-shrink: 0; }
   height: 56px;
   flex-shrink: 0;
   display: flex;
-  align-items: stretch;
+  align-items: center;
   justify-content: center;
   padding: 0;
   border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
 }
 
 #workspace-logo {
-  width: 26px;
-  height: 26px;
+  width: 100%;
+  height: 100%;
   border-radius: 0;
   display: block;
-  object-fit: contain;
+  object-fit: cover;
   flex-shrink: 0;
 }
 
 .workspace-switcher {
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 3px;
-  width: 100%;
-  height: 100%;
-  padding: 6px 4px;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  padding: 0;
+  overflow: hidden;
   border-radius: 0;
   color: var(--foreground);
-  background: transparent;
-  border: 1px solid transparent;
+  background: var(--workspace-accent);
+  border: none;
   font: inherit;
-  transition: background 0.15s, border-color 0.15s;
+  transition: box-shadow 0.15s, background 0.15s;
 }
 .workspace-switcher:hover {
-  background: var(--accent-10);
-  border-color: color-mix(in srgb, var(--workspace-accent) 35%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--workspace-accent) 50%, transparent);
 }
 .workspace-switcher[aria-expanded="true"] {
-  background: var(--accent-15);
-  border-color: color-mix(in srgb, var(--workspace-accent) 45%, transparent);
-}
-.workspace-switcher-label {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1px;
-  max-width: 100%;
-  min-width: 0;
-}
-#workspace-name {
-  font-size: 10px;
-  font-weight: 600;
-  max-width: 40px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.1;
-}
-.workspace-chevron {
-  display: inline-flex;
-  color: var(--muted-foreground);
-  flex-shrink: 0;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--workspace-accent) 65%, transparent);
 }
 
 .workspace-menu-backdrop {
   position: fixed;
   inset: 0;
-  z-index: 198;
+  z-index: 199;
   background: transparent;
 }
 .workspace-menu {
   position: fixed;
-  z-index: 199;
-  width: 280px;
+  z-index: 200;
+  width: 240px;
   padding: 4px 0;
   border-radius: 0;
-  box-shadow: var(--glass-shadow);
 }
-.workspace-menu-path {
+.workspace-menu-heading {
   margin: 0;
-  padding: 8px 12px 6px;
-  font-size: 11px;
-  line-height: 1.35;
+  padding: 6px 12px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--muted-foreground);
+}
+.workspace-menu-empty {
+  margin: 0;
+  padding: 8px 12px;
+  font-size: 12px;
   color: var(--muted-foreground);
-  word-break: break-all;
 }
 .workspace-menu-list {
   display: flex;
@@ -211,7 +202,7 @@ svg.icon { flex-shrink: 0; }
   background: var(--accent-10);
 }
 .workspace-menu-item.active {
-  background: var(--accent-15);
+  background: var(--accent-5);
 }
 .workspace-menu-item.missing {
   color: var(--muted-foreground);