fix(web): keep sidebar version and trash tab visible (#176)

* feat(web): keep sidebar version visible

* fix(web): remove inert brand tab stop

* fix(web): move sidebar ghost tab to nav end

* docs: remove setup command from quick start

* chore: bump version to 0.0.37

Author: awsl233777

README.md

@@ -84,7 +84,6 @@ Requires [Node.js](https://nodejs.org/) (`brew install node` if not present).
 
 ```bash
 npm install -g codexmate
-codexmate setup
 codexmate run
 ```
 

README.zh.md

@@ -84,7 +84,6 @@ brew install codexmate
 
 ```bash
 npm install -g codexmate
-codexmate setup
 codexmate run
 ```
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "codexmate",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "description": "Codex/Claude Code/OpenClaw 配置、会话与任务编排 CLI + Web 工具",
   "main": "cli.js",
   "bin": {

package.json

@@ -18,6 +18,7 @@ test('config template keeps expected config tabs in top and side navigation', ()
     const baseTheme = readProjectFile('web-ui/styles/base-theme.css');
     const controlsForms = readProjectFile('web-ui/styles/controls-forms.css');
     const taskOrchestrationStyles = readProjectFile('web-ui/styles/task-orchestration.css');
+    const layoutShell = readProjectFile('web-ui/styles/layout-shell.css');
     const bundledStyles = readBundledWebUiCss();
     const sideRail = html.match(/<aside class="side-rail"[\s\S]*?<\/aside>/)?.[0] || '';
     const sideTabModes = [...html.matchAll(/id="side-tab-config-([a-z]+)"/g)]
@@ -120,6 +121,23 @@ test('config template keeps expected config tabs in top and side navigation', ()
         assert.match(styles, /\.task-action-row-right\s*\{[\s\S]*display:\s*flex;[\s\S]*flex-wrap:\s*wrap;/);
         assert.match(styles, /\.task-runtime-item-actions\s*\{[\s\S]*flex-direction:\s*row;[\s\S]*align-items:\s*center;/);
     }
+    const sideGhostTab = sideRail.match(/<div id="side-tab-new"[\s\S]*?<\/div>\s*<\/div>/)?.[0] || '';
+    assert.match(sideGhostTab, /class="side-item side-item-ghost"/);
+    assert.match(sideGhostTab, /tabindex="-1"/);
+    assert.match(sideGhostTab, /aria-hidden="true"/);
+    assert.doesNotMatch(sideGhostTab, /data-main-tab=/);
+    assert.doesNotMatch(sideGhostTab, /@click=/);
+    assert.doesNotMatch(sideGhostTab, /@keydown/);
+    assert.ok(html.indexOf('id="side-tab-trash"') < html.indexOf('id="side-tab-new"'), 'ghost side tab should remain after trash tab to reserve end scroll space');
+    assert.match(html, /<div class="brand-kicker">Codex Mate<span v-if="appVersion" class="brand-version"> v\{\{ appVersion \}\}<\/span><\/div>/);
+    assert.doesNotMatch(html, /class="brand-block" tabindex="0"/);
+    assert.doesNotMatch(html, /appVersion && brandHovered/);
+    assert.doesNotMatch(html, /brandHovered = true/);
+    for (const styles of [layoutShell, bundledStyles]) {
+        assert.match(styles, /\.side-item-ghost\s*\{[\s\S]*opacity:\s*0;[\s\S]*pointer-events:\s*none;[\s\S]*user-select:\s*none;/);
+        assert.match(styles, /\.brand-kicker\s*\{[\s\S]*font-size:\s*15px;/);
+        assert.match(styles, /\.brand-version\s*\{[\s\S]*font-size:\s*13px;/);
+    }
     assert.match(html, /id="side-tab-market"/);
     assert.match(html, /id="tab-market"/);
     assert.match(html, /id="side-tab-docs"/);

tests/unit/config-tabs-ui.test.mjs

@@ -325,7 +325,6 @@ test('captured bundled app skeleton only exposes expected data key drift versus
     const missingCurrentKeys = headDataKeys.filter((key) => !currentDataKeys.includes(key)).sort();
     const allowedExtraCurrentKeys = parityAgainstHead ? [
         'appVersion',
-        'brandHovered',
         'sessionListInitialBatchSize',
         'sessionListLoadStep',
         'sessionListVisibleCount',
@@ -355,7 +354,6 @@ test('captured bundled app skeleton only exposes expected data key drift versus
         'showEditProviderKey'
     ] : [
         'appVersion',
-        'brandHovered',
         '__mainTabSwitchState',
         'openclawAuthProfilesByProvider',
         'openclawPendingAuthProfileUpdates',
@@ -410,6 +408,7 @@ test('captured bundled app skeleton only exposes expected data key drift versus
         'promptTemplateVarDraftError',
         'promptTemplateVarDraftName',
         'showPromptTemplateVarModal',
+        'brandHovered',
     ];
     allowedExtraCurrentKeys.push(
         'lang',

tests/unit/web-ui-behavior-parity.test.mjs

@@ -31,7 +31,6 @@ document.addEventListener('DOMContentLoaded', () => {
     const appOptions = {
         data() {
             return {
-                brandHovered: false,
                 lang: 'zh',
                 appVersion: '',
                 mainTab: 'dashboard',

web-ui/app.js

@@ -118,11 +118,11 @@
 
         <div :class="['app-shell', { standalone: sessionStandalone }]">
             <aside class="side-rail" v-if="!sessionStandalone">
-                <div class="brand-block" tabindex="0" @mouseenter="brandHovered = true" @mouseleave="brandHovered = false" @focus="brandHovered = true" @blur="brandHovered = false">
+                <div class="brand-block">
                     <div class="brand-head">
                         <img class="brand-logo" src="/res/logo-pack.webp" alt="Codex Mate logo">
                         <div class="brand-copy">
-                            <div class="brand-kicker">Codex Mate<transition name="brand-version-fade"><span v-if="appVersion && brandHovered" class="brand-version"> v{{ appVersion }}</span></transition></div>
+                            <div class="brand-kicker">Codex Mate<span v-if="appVersion" class="brand-version"> v{{ appVersion }}</span></div>
                         </div>
                     </div>
                 </div>
@@ -315,6 +315,10 @@
                         </div>
                     </button>
                 </div>
+                <div id="side-tab-new" class="side-item side-item-ghost" tabindex="-1" aria-hidden="true">
+                    <div class="side-item-title">New Tab</div>
+                    <div class="side-item-meta"><span>&nbsp;</span></div>
+                </div>
                 </div>
 
                 <div class="side-rail-lang" role="group" :aria-label="t('lang.label')">

web-ui/partials/index/layout-header.html

@@ -1,5 +1,5 @@
 window.__CODEXMATE_WEB_UI_RENDER__ = (() => {
-const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, Transition: _Transition, withCtx: _withCtx, createVNode: _createVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, vShow: _vShow, withDirectives: _withDirectives, vModelSelect: _vModelSelect, vModelText: _vModelText, withKeys: _withKeys, withModifiers: _withModifiers, isMemoSame: _isMemoSame, withMemo: _withMemo, normalizeStyle: _normalizeStyle, vModelCheckbox: _vModelCheckbox, vModelDynamic: _vModelDynamic } = Vue
+const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, vShow: _vShow, withDirectives: _withDirectives, vModelSelect: _vModelSelect, vModelText: _vModelText, withKeys: _withKeys, withModifiers: _withModifiers, isMemoSame: _isMemoSame, withMemo: _withMemo, normalizeStyle: _normalizeStyle, vModelCheckbox: _vModelCheckbox, vModelDynamic: _vModelDynamic } = Vue
 
 return function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
@@ -165,14 +165,7 @@ return function render(_ctx, _cache) {
             key: 0,
             class: "side-rail"
           }, [
-            _createElementVNode("div", {
-              class: "brand-block",
-              tabindex: "0",
-              onMouseenter: $event => (_ctx.brandHovered = true),
-              onMouseleave: $event => (_ctx.brandHovered = false),
-              onFocus: $event => (_ctx.brandHovered = true),
-              onBlur: $event => (_ctx.brandHovered = false)
-            }, [
+            _createElementVNode("div", { class: "brand-block" }, [
               _createElementVNode("div", { class: "brand-head" }, [
                 _createElementVNode("img", {
                   class: "brand-logo",
@@ -182,21 +175,16 @@ return function render(_ctx, _cache) {
                 _createElementVNode("div", { class: "brand-copy" }, [
                   _createElementVNode("div", { class: "brand-kicker" }, [
                     _createTextVNode("Codex Mate"),
-                    _createVNode(_Transition, { name: "brand-version-fade" }, {
-                      default: _withCtx(() => [
-                        (_ctx.appVersion && _ctx.brandHovered)
-                          ? (_openBlock(), _createElementBlock("span", {
-                              key: 0,
-                              class: "brand-version"
-                            }, " v" + _toDisplayString(_ctx.appVersion), 1 /* TEXT */))
-                          : _createCommentVNode("v-if", true)
-                      ]),
-                      _: 1 /* STABLE */
-                    })
+                    (_ctx.appVersion)
+                      ? (_openBlock(), _createElementBlock("span", {
+                          key: 0,
+                          class: "brand-version"
+                        }, " v" + _toDisplayString(_ctx.appVersion), 1 /* TEXT */))
+                      : _createCommentVNode("v-if", true)
                   ])
                 ])
               ])
-            ], 40 /* PROPS, NEED_HYDRATION */, ["onMouseenter", "onMouseleave", "onFocus", "onBlur"]),
+            ]),
             _createElementVNode("div", { class: "side-rail-nav" }, [
               _createElementVNode("div", {
                 class: "side-section",
@@ -437,7 +425,18 @@ return function render(_ctx, _cache) {
                       : _createCommentVNode("v-if", true)
                   ])
                 ], 42 /* CLASS, PROPS, NEED_HYDRATION */, ["aria-current", "onPointerdown", "onClick"])
-              ], 8 /* PROPS */, ["aria-label"])
+              ], 8 /* PROPS */, ["aria-label"]),
+              _createElementVNode("div", {
+                id: "side-tab-new",
+                class: "side-item side-item-ghost",
+                tabindex: "-1",
+                "aria-hidden": "true"
+              }, [
+                _createElementVNode("div", { class: "side-item-title" }, "New Tab"),
+                _createElementVNode("div", { class: "side-item-meta" }, [
+                  _createElementVNode("span", null, " ")
+                ])
+              ])
             ]),
             _createElementVNode("div", {
               class: "side-rail-lang",

web-ui/res/web-ui-render.precompiled.js

@@ -415,6 +415,14 @@ body::after {
     word-break: break-word;
 }
 
+.side-item-ghost {
+    opacity: 0;
+    pointer-events: none;
+    user-select: none;
+    cursor: default;
+    flex: 0 0 auto;
+}
+
 @media (min-width: 721px) {
     body:not(.force-compact) #app > .top-tabs {
         display: none;
@@ -431,16 +439,6 @@ body::after {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
 }
 
-.brand-block:focus-visible {
-    outline: 2px solid rgba(0, 122, 255, 0.5);
-    outline-offset: -2px;
-    border-radius: 4px;
-}
-
-.brand-block:focus:not(:focus-visible) {
-    outline: none;
-}
-
 .brand-head {
     display: flex;
     align-items: center;
@@ -484,7 +482,7 @@ body::after {
 }
 
 .brand-kicker {
-    font-size: 13px;
+    font-size: 15px;
     line-height: 1.2;
     font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
     color: #1d1d1f;
@@ -502,10 +500,11 @@ body::after {
 }
 
 .brand-version {
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 400;
     color: #8e8e93;
     vertical-align: baseline;
+    -webkit-text-fill-color: #8e8e93;
 }
 
 .brand-version-fade-enter-active,