B-214: keep desktop header commands visible instead of behind ellipsis

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>

frontend/index.html

@@ -19,9 +19,9 @@
   </script>
   <link rel="stylesheet" href="/shared/tokens.css?v=20260820-2">
   <link rel="stylesheet" href="/shared/base.css?v=20260806-1">
-  <link rel="stylesheet" href="/shared/shell.css?v=20260820-2">
-  <link rel="stylesheet" href="/shared/auth.css?v=20260820-3">
-  <link rel="stylesheet" href="/shared/components/controls.css?v=20260820-1">
+  <link rel="stylesheet" href="/shared/shell.css?v=20260820-5">
+  <link rel="stylesheet" href="/shared/auth.css?v=20260820-4">
+  <link rel="stylesheet" href="/shared/components/controls.css?v=20260820-2">
   <link rel="stylesheet" href="/shared/components/navigation.css?v=20260820-1">
   <link rel="stylesheet" href="/shared/components/cards.css?v=20260820-1">
   <link rel="stylesheet" href="/shared/components/tables.css?v=20260820-1">
@@ -137,12 +137,12 @@
           <button class="button mobile-command-shortcut" type="button" data-mobile-command-target="alertButton"><i data-lucide="bell"></i><span>提醒</span></button>
           <button class="button mobile-command-shortcut" type="button" data-mobile-command-target="assistantButton"><i data-lucide="message-circle-more"></i><span>助手</span></button>
         </div>
-        <button id="refreshButton" class="button command-button" type="button"><i data-lucide="refresh-cw"></i><span>刷新</span></button>
-        <button id="syncButton" class="button primary command-button" type="button" hidden><i data-lucide="cloud-download"></i><span>后台刷新</span></button>
-        <button id="settingsButton" class="button command-button" type="button" hidden><i data-lucide="settings-2"></i><span>系统管理</span></button>
+        <button id="refreshButton" class="button command-button" type="button" title="刷新"><i data-lucide="refresh-cw"></i><span>刷新</span></button>
+        <button id="syncButton" class="button primary command-button" type="button" title="后台刷新" hidden><i data-lucide="cloud-download"></i><span>后台刷新</span></button>
+        <button id="settingsButton" class="button command-button" type="button" title="系统管理" hidden><i data-lucide="settings-2"></i><span>系统管理</span></button>
         <div class="account-menu-shell">
           <div id="accountRoleBadges" class="account-role-badges" aria-label="账号身份">
-            <span id="accountAdminBadge" class="account-role-badge admin-role-badge" hidden><i data-lucide="shield-check"></i><span>管理员</span></span>
+            <span id="accountAdminBadge" class="account-role-badge admin-role-badge" title="管理员" hidden><i data-lucide="shield-check"></i><span>管理员</span></span>
             <button id="accountVipBadge" class="account-role-badge vip-role-badge" type="button" title="查看会员状态" hidden><b aria-hidden="true">V</b><span id="accountVipLabel">非会员</span></button>
           </div>
           <button id="accountButton" class="button account-button command-button" type="button" title="账号菜单" aria-haspopup="menu" aria-expanded="false" aria-controls="accountDropdown"><i data-lucide="circle-user-round"></i><span id="accountName">--</span><i class="account-menu-chevron" data-lucide="chevron-down"></i></button>

frontend/pages.config.js

@@ -86,7 +86,7 @@
     "/pages/review/page.js?v=20260729-1",
     "/shared/state.js?v=20260729-1",
     "/shared/api.js?v=20260729-1",
-    "/shared/shell.js?v=20260820-1",
+    "/shared/shell.js?v=20260820-2",
     "/shared/export.js?v=20260731-1",
     "/pages/heaven/loading-v2.js?v=20260728-2",
     "/shared/context.js?v=20260804-1",

frontend/shared/auth.css

@@ -1179,27 +1179,27 @@ button.account-role-badge:focus-visible {
   gap: 3px;
 }
 
-@media (min-width: 1280px) and (max-width: 1510px) {
+@media (min-width: 1280px) {
   .app-header .header-command-group .account-role-badge span {
-    display: inline;
+    display: none;
   }
 
   .app-header .header-command-group .account-role-badge {
-    min-width: 0;
+    min-width: 28px;
 
-    justify-content: flex-start;
+    justify-content: center;
+
+    padding-inline: 6px;
   }
-}
 
-@media (min-width: 1380px) and (max-width: 1510px) {
-  #settingsButton,
   .header-command-group .account-button {
     width: auto;
 
-    padding: 0px 9px;
+    max-width: 108px;
+
+    padding: 0px 8px;
   }
 
-  #settingsButton > span,
   .header-command-group .account-button > span {
     display: inline;
   }

frontend/shared/components/controls.css

@@ -635,14 +635,16 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
   height: 14px;
 }
 
-@media (min-width: 1280px) and (max-width: 1510px) {
-  .header-command-group .command-button {
-    width: 31px;
+@media (min-width: 1280px) {
+  .header-command-group .command-button:not(.account-button) {
+    width: 32px;
+
+    min-width: 32px;
 
     padding: 0px;
   }
 
-  .header-command-group .command-button > span {
+  .header-command-group .command-button:not(.account-button) > span {
     display: none;
   }
 }
@@ -1010,7 +1012,7 @@ textarea {
 
 @media (min-width: 768px) {
   .header-menu-button {
-    display: inline-flex;
+    display: none;
   }
 }
 

frontend/shared/shell.css

@@ -3013,6 +3013,11 @@ body.sidebar-collapsed .status-bar {
     justify-content: flex-start;
   }
 
+  body.mobile-shell .header-command-group .account-button > span,
+  body.mobile-shell .header-command-group .account-role-badge span {
+    display: inline;
+  }
+
   body.mobile-shell .header-command-group .account-dropdown {
     position: static;
     grid-column: 1 / -1;
@@ -3329,8 +3334,24 @@ body.sidebar-collapsed .status-bar {
   color: var(--warn);
 }
 
-.tape-sentiment .sentiment-gauge {
+@media (min-width: 1440px) and (max-width: 1599px) {
+  .app-header .overview-strip .tape-sentiment.sentiment-block {
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+  }
+}
+
+.app-header .overview-strip .tape-sentiment .metric-label,
+.app-header .overview-strip .tape-sentiment .sentiment-text {
+  font-size: var(--fs-caption);
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.app-header .overview-strip .tape-sentiment > .sentiment-gauge {
   position: absolute;
+  display: none;
   width: 0;
   height: 0;
   overflow: hidden;
@@ -3573,12 +3594,43 @@ body.sidebar-collapsed .status-bar {
   --focus-ring: rgba(108, 168, 232, .22);
 }
 
-@media (min-width: 1024px) and (max-width: 1439px) {
+@media (min-width: 1024px) and (max-width: 1599px) {
   .tape-optional {
     display: none;
   }
 }
 
+@media (min-width: 1280px) {
+  .tape-metric {
+    padding: 0 10px;
+  }
+
+  .app-header {
+    gap: 16px;
+  }
+}
+
+@media (min-width: 1280px) and (max-width: 1599px) {
+  .app-page-context {
+    min-width: 96px;
+    max-width: 128px;
+  }
+
+  .app-header .header-actions {
+    gap: 4px;
+  }
+
+  .app-header .header-command-group {
+    gap: 4px;
+  }
+}
+
+@media (max-width: 1440px) {
+  .app-page-context {
+    display: none;
+  }
+}
+
 @media (max-width: 1023px) {
   .app-header {
     gap: 8px;
@@ -3587,10 +3639,6 @@ body.sidebar-collapsed .status-bar {
     padding: 0 10px;
   }
 
-  .app-page-context {
-    display: none;
-  }
-
   .app-header .overview-strip,
   .app-header .overview-strip[data-overview-expanded="true"] {
     flex: 0 0 auto;
@@ -3653,53 +3701,48 @@ body.sidebar-collapsed .status-bar {
 
 @media (min-width: 768px) {
   .app-header .header-menu-button {
-    display: inline-flex;
+    display: none;
   }
 
   .app-header .header-command-group {
-    position: absolute;
-    top: calc(100% + 8px);
-    right: 0;
-    z-index: 60;
-    display: none;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 6px;
-    width: 240px;
-    padding: 8px;
-    overflow: visible;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    background: var(--surface);
-    box-shadow: var(--shadow-float);
-  }
-
-  .app-header .header-command-group.is-open {
+    position: static;
     display: flex;
+    flex: 0 0 auto;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    width: auto;
+    max-width: none;
+    padding: 0;
+    overflow: visible;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
   }
 
   .app-header .header-command-group .command-button,
   .app-header .header-command-group .account-button {
-    width: 100%;
-    justify-content: flex-start;
+    width: auto;
+    justify-content: center;
   }
 
   .app-header .header-command-group .account-menu-shell {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    width: 100%;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    width: auto;
   }
 
   .app-header .header-command-group .account-role-badges {
-    display: flex;
-    flex-wrap: wrap;
-    min-height: 0;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    min-height: 32px;
   }
 
   .app-header .header-command-group .account-dropdown {
-    left: 0;
-    right: auto;
+    left: auto;
+    right: 0;
   }
 }
 

frontend/shared/shell.js

@@ -22,12 +22,19 @@
       const button = document.querySelector("#headerMenuButton");
       const backdrop = document.querySelector("#mobileCommandBackdrop");
       if (!menu || !button) return;
+      if (!isMobileViewport()) {
+        menu.classList.remove("is-open");
+        button.setAttribute("aria-expanded", "false");
+        document.body.classList.remove("mobile-command-open");
+        if (backdrop) backdrop.hidden = true;
+        return;
+      }
       const open = typeof force === "boolean" ? force : !menu.classList.contains("is-open");
       menu.classList.toggle("is-open", open);
       button.setAttribute("aria-expanded", String(open));
-      document.body.classList.toggle("mobile-command-open", open && isMobileViewport());
-      if (backdrop) backdrop.hidden = !(open && isMobileViewport());
-      if (open && isMobileViewport()) {
+      document.body.classList.toggle("mobile-command-open", open);
+      if (backdrop) backdrop.hidden = !open;
+      if (open) {
         global.requestAnimationFrame(() => menu.querySelector("button:not([hidden])")?.focus({ preventScroll: true }));
       } else if (force === false && document.activeElement && menu.contains(document.activeElement)) {
         button.focus({ preventScroll: true });