Skip to content
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion tests/unit/compact-layout-ui.test.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ test('styles keep desktop layout wide and session history readable on large scre
assert.match(styles, /\.session-layout\s*\{[\s\S]*grid-template-columns:\s*minmax\(260px,\s*360px\)\s*minmax\(0,\s*1fr\);/);
assert.match(styles, /\.session-preview-scroll\s*\{[\s\S]*padding-right:\s*52px;/);
assert.match(styles, /\.session-timeline\s*\{[\s\S]*right:\s*4px;[\s\S]*width:\s*44px;/);
assert.match(styles, /\.session-item\s*\{[\s\S]*min-height:\s*102px;/);
assert.match(styles, /\.session-item\s*\{[\s\S]*min-height:\s*80px;/);

const html = readBundledWebUiHtml();
assert.match(html, /class="brand-logo"\s+src="\/res\/logo\.png"/);
Expand Down
14 changes: 10 additions & 4 deletions tests/unit/config-tabs-ui.test.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,16 @@ test('config template keeps expected config tabs in top and side navigation', ()
const taskOrchestrationStyles = readProjectFile('web-ui/styles/task-orchestration.css');
const bundledStyles = readBundledWebUiCss();
const sideRail = html.match(/<aside class="side-rail"[\s\S]*?<\/aside>/)?.[0] || '';
const topTabModes = [...html.matchAll(/id="tab-config-([a-z]+)"/g)]
.map((match) => match[1]);
const sideTabModes = [...html.matchAll(/id="side-tab-config-([a-z]+)"/g)]
.map((match) => match[1]);

assert.deepStrictEqual(topTabModes, ['codex', 'claude', 'openclaw']);
assert.deepStrictEqual(sideTabModes, ['codex', 'claude', 'openclaw']);
assert.match(html, /id="tab-dashboard"/);
assert.match(html, /id="tab-config"/);
assert.match(html, /:data-config-mode="configMode"/);
assert.doesNotMatch(html, /id="tab-config-codex"/);
assert.doesNotMatch(html, /id="tab-config-claude"/);
assert.doesNotMatch(html, /id="tab-config-openclaw"/);
assert.match(html, /activeProviderBridgeHint/);
assert.match(html, /isProviderConfigMode/);
assert.match(html, /provider-fast-switch-select/);
Expand Down Expand Up @@ -185,6 +188,9 @@ test('config template keeps expected config tabs in top and side navigation', ()
assert.match(html, /class="side-section" role="navigation" :aria-label="t\('side\.skills'\)"/);
assert.match(html, /class="side-section" role="navigation" :aria-label="t\('side\.docs'\)"/);
assert.match(html, /class="side-section" role="navigation" :aria-label="t\('side\.system'\)"/);
assert.match(html, /class="segmented-control"[\s\S]*@click="switchConfigMode\('codex'\)"/);
assert.match(html, /class="segmented-control"[\s\S]*@click="switchConfigMode\('claude'\)"/);
assert.match(html, /class="segmented-control"[\s\S]*@click="switchConfigMode\('openclaw'\)"/);
Comment on lines +191 to +193

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Scope these compact-switcher assertions to all three panels.

These regexes can all pass from a single segmented-control block in the bundled HTML, so a regression in two config panels would still slip through. Count the occurrences or assert per panel instead.

Possible fix
-    assert.match(html, /class="segmented-control"[\s\S]*@click="switchConfigMode\('codex'\)"/);
-    assert.match(html, /class="segmented-control"[\s\S]*@click="switchConfigMode\('claude'\)"/);
-    assert.match(html, /class="segmented-control"[\s\S]*@click="switchConfigMode\('openclaw'\)"/);
+    assert.strictEqual([...html.matchAll(/class="segmented-control"/g)].length, 3);
+    assert.strictEqual([...html.matchAll(/@click="switchConfigMode\('codex'\)"/g)].length, 3);
+    assert.strictEqual([...html.matchAll(/@click="switchConfigMode\('claude'\)"/g)].length, 3);
+    assert.strictEqual([...html.matchAll(/@click="switchConfigMode\('openclaw'\)"/g)].length, 3);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
assert.match(html, /class="segmented-control"[\s\S]*@click="switchConfigMode\('codex'\)"/);
assert.match(html, /class="segmented-control"[\s\S]*@click="switchConfigMode\('claude'\)"/);
assert.match(html, /class="segmented-control"[\s\S]*@click="switchConfigMode\('openclaw'\)"/);
assert.strictEqual([...html.matchAll(/class="segmented-control"/g)].length, 3);
assert.strictEqual([...html.matchAll(/@click="switchConfigMode\('codex'\)"/g)].length, 3);
assert.strictEqual([...html.matchAll(/@click="switchConfigMode\('claude'\)"/g)].length, 3);
assert.strictEqual([...html.matchAll(/@click="switchConfigMode\('openclaw'\)"/g)].length, 3);
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@tests/unit/config-tabs-ui.test.mjs` around lines 191 - 193, The three current
regex assertions for class="segmented-control" and
`@click`="switchConfigMode('codex'/'claude'/'openclaw')" are too loose and can all
match a single segmented-control block; update the test in
tests/unit/config-tabs-ui.test.mjs to scope checks to each panel by either
counting matches (assert the match count equals 3) or asserting each panel
separately (locate each panel's HTML segment and assert it contains a
segmented-control with the appropriate `@click` handler), referencing the existing
patterns "segmented-control" and "switchConfigMode" to implement the per-panel
or count-based verification.

assert.doesNotMatch(sideRail, /role="tablist"/);
assert.doesNotMatch(sideRail, /role="tab"/);
assert.match(sideRail, /id="side-tab-config-codex"[\s\S]*:aria-current="mainTab === 'config' && configMode === 'codex' \? 'page' : null"/);
Expand Down Expand Up @@ -307,7 +313,7 @@ test('config template keeps expected config tabs in top and side navigation', ()
assert.match(html, /class="pin-icon"/);
assert.match(html, /:aria-selected="mainTab === 'sessions'"/);
assert.match(html, /:aria-selected="mainTab === 'usage'"/);
assert.match(html, /:aria-selected="mainTab === 'config' && configMode === 'codex'"/);
assert.match(html, /:aria-selected="mainTab === 'config'"/);
assert.match(html, /v-for="session in visibleSessionsList"/);
assert.match(html, /<div[\s\S]*v-if="sessionListRenderEnabled"[\s\S]*class="session-list"/);
assert.match(html, /:ref="setSessionListRef"/);
Expand Down
3 changes: 1 addition & 2 deletions web-ui/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,7 @@ document.addEventListener('DOMContentLoaded', () => {
data() {
return {
lang: 'zh',
// 默认选中首个主标签:Docs
mainTab: 'docs',
mainTab: 'dashboard',
configMode: 'codex',
currentProvider: '',
currentModel: '',
Expand Down
1 change: 1 addition & 0 deletions web-ui/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
</head>
<body>
<!-- @include ./partials/index/layout-header.html -->
<!-- @include ./partials/index/panel-dashboard.html -->
<!-- @include ./partials/index/panel-config-codex.html -->
<!-- @include ./partials/index/panel-config-claude.html -->
<!-- @include ./partials/index/panel-config-openclaw.html -->
Expand Down
3 changes: 3 additions & 0 deletions web-ui/modules/app.computed.main-tabs.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@ function createTaskDraftReadiness(metrics) {
export function createMainTabsComputed() {
return {
mainTabKicker() {
if (this.mainTab === 'dashboard') return this.t('kicker.dashboard');
if (this.mainTab === 'config') return this.t('kicker.config');
if (this.mainTab === 'sessions') return this.t('kicker.sessions');
if (this.mainTab === 'usage') return this.t('kicker.usage');
Expand All @@ -146,6 +147,7 @@ export function createMainTabsComputed() {
return this.t('kicker.settings');
},
mainTabTitle() {
if (this.mainTab === 'dashboard') return this.t('title.dashboard');
if (this.mainTab === 'config') return this.t('title.config');
if (this.mainTab === 'sessions') return this.t('title.sessions');
if (this.mainTab === 'usage') return this.t('title.usage');
Expand All @@ -156,6 +158,7 @@ export function createMainTabsComputed() {
return this.t('title.settings');
},
mainTabSubtitle() {
if (this.mainTab === 'dashboard') return this.t('subtitle.dashboard');
if (this.mainTab === 'config') return this.t('subtitle.config');
if (this.mainTab === 'sessions') return this.t('subtitle.sessions');
if (this.mainTab === 'usage') return this.t('subtitle.usage');
Expand Down
3 changes: 2 additions & 1 deletion web-ui/modules/app.methods.navigation.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export function createNavigationMethods(options = {}) {
} = options;
const NAV_STATE_STORAGE_KEY = 'codexmateNavState.v1';
const MAIN_TAB_SET = new Set([
'dashboard',
'config',
'sessions',
'usage',
Expand Down Expand Up @@ -37,7 +38,7 @@ export function createNavigationMethods(options = {}) {
const mainTab = typeof vm.mainTab === 'string' ? vm.mainTab.trim().toLowerCase() : '';
const configMode = typeof vm.configMode === 'string' ? vm.configMode.trim().toLowerCase() : '';
const snapshot = {
mainTab: MAIN_TAB_SET.has(mainTab) ? mainTab : 'docs',
mainTab: MAIN_TAB_SET.has(mainTab) ? mainTab : 'dashboard',
configMode: configModeSet && configModeSet.has(configMode) ? configMode : 'codex'
};
try {
Expand Down
1 change: 1 addition & 0 deletions web-ui/modules/config-mode.computed.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export function createConfigModeComputed() {
return `${this.activeProviderModeLabel} 当前复用 Codex Provider / Model 管理链路。`;
},
inspectorMainTabLabel() {
if (this.mainTab === 'dashboard') return '概览';
if (this.mainTab === 'config') return '配置中心';
if (this.mainTab === 'sessions') return '会话浏览';
if (this.mainTab === 'usage') return 'Usage';
Expand Down
78 changes: 78 additions & 0 deletions web-ui/modules/i18n.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,9 @@ const DICT = Object.freeze({
'label.model': '模型:',

// Top tabs
'tab.dashboard': '概览',
'tab.docs': '文档',
'tab.config': '配置',
'tab.config.codex': 'Codex',
'tab.config.claude': 'Claude',
'tab.config.openclaw': 'OpenClaw',
Expand All @@ -131,6 +133,7 @@ const DICT = Object.freeze({
'tab.settings': '设置',

// Side rail section titles
'side.overview': '概览',
'side.docs': '文档',
'side.config': '配置',
'side.sessions': '会话',
Expand All @@ -140,6 +143,8 @@ const DICT = Object.freeze({
'side.skills': 'Skills',

// Side rail items
'side.overview.doctor': 'Doctor 面板',
'side.overview.doctor.meta': '总览 / 诊断 / 跳转',
'side.docs.cliInstall': 'CLI 安装',
'side.docs.cliInstall.meta': '安装 / 升级 / 卸载',
'side.config.codex': 'Codex',
Expand All @@ -156,6 +161,7 @@ const DICT = Object.freeze({
'side.system.settings.meta': '数据 / 备份',

// Header titles
'kicker.dashboard': 'Doctor',
'kicker.config': 'Configuration',
'kicker.sessions': 'Sessions',
'kicker.usage': 'Usage',
Expand All @@ -165,6 +171,7 @@ const DICT = Object.freeze({
'kicker.docs': 'Docs',
'kicker.settings': 'Settings',

'title.dashboard': 'Dashboard / Doctor',
'title.config': '本地配置控制台',
'title.sessions': '会话与导出',
'title.usage': '本地用量与趋势',
Expand All @@ -174,6 +181,7 @@ const DICT = Object.freeze({
'title.docs': 'CLI 安装与文档',
'title.settings': '系统与数据设置',

'subtitle.dashboard': '聚合状态与诊断入口。',
'subtitle.config': '管理本地配置与模型。',
'subtitle.sessions': '浏览与导出会话。',
'subtitle.usage': '查看近 7 / 30 天用量。',
Expand All @@ -183,6 +191,37 @@ const DICT = Object.freeze({
'subtitle.docs': '查看 CLI 安装命令与排障。',
'subtitle.settings': '管理下载、目录与回收站。'
,
'dashboard.doctor.title': 'Doctor',
'dashboard.doctor.runChecks': '运行检查',
'dashboard.doctor.checking': '检查中...',
'dashboard.card.config': '配置',
'dashboard.card.sessions': '会话',
'dashboard.card.usage': '用量',
'dashboard.card.tasks': '任务',
'dashboard.card.skills': 'Skills',
'dashboard.kv.model': '模型',
'dashboard.kv.issue': '异常',
'dashboard.kv.active': '当前',
'dashboard.kv.sessions': '会话数',
'dashboard.kv.missingModel': '缺失模型',
'dashboard.kv.blockers': '阻塞',
'dashboard.kv.runs': '运行',
'dashboard.kv.target': '目标',
'dashboard.kv.root': '目录',
'dashboard.status.health': '健康',
'dashboard.status.busy': '忙闲',
'dashboard.status.models': '模型',
'dashboard.health.ok': '检查通过',
'dashboard.health.fail': '检查失败',
'dashboard.health.issues': '{count} 条问题',
'dashboard.state.loading': '加载中',
'dashboard.state.ready': '就绪',
'dashboard.state.idle': '未加载',
'dashboard.none': '无',
'dashboard.sessions.count': '{count} 条会话',
'dashboard.usage.range': '范围 {value}',
'dashboard.tasks.queue': 'run {running} / queue {queued}',
'dashboard.skills.count': 'installed {installed} / import {importable}',

// Plugins panel
'plugins.sidebar.title': 'Plugins',
Expand Down Expand Up @@ -1038,7 +1077,9 @@ const DICT = Object.freeze({
'label.model': 'Model:',

// Top tabs
'tab.dashboard': 'Dashboard',
'tab.docs': 'Docs',
'tab.config': 'Config',
'tab.config.codex': 'Codex',
'tab.config.claude': 'Claude',
'tab.config.openclaw': 'OpenClaw',
Expand All @@ -1050,6 +1091,7 @@ const DICT = Object.freeze({
'tab.settings': 'Settings',

// Side rail section titles
'side.overview': 'Overview',
'side.docs': 'Docs',
'side.config': 'Config',
'side.sessions': 'Sessions',
Expand All @@ -1059,6 +1101,8 @@ const DICT = Object.freeze({
'side.skills': 'Skills',

// Side rail items
'side.overview.doctor': 'Doctor',
'side.overview.doctor.meta': 'Overview / Diagnostics',
'side.docs.cliInstall': 'CLI Install',
'side.docs.cliInstall.meta': 'Install / Update / Uninstall',
'side.config.codex': 'Codex',
Expand All @@ -1075,6 +1119,7 @@ const DICT = Object.freeze({
'side.system.settings.meta': 'Data / Backup',

// Header titles
'kicker.dashboard': 'Doctor',
'kicker.config': 'Configuration',
'kicker.sessions': 'Sessions',
'kicker.usage': 'Usage',
Expand All @@ -1084,6 +1129,7 @@ const DICT = Object.freeze({
'kicker.docs': 'Docs',
'kicker.settings': 'Settings',

'title.dashboard': 'Dashboard / Doctor',
'title.config': 'Local Configuration Console',
'title.sessions': 'Sessions & Export',
'title.usage': 'Local Usage & Trends',
Expand All @@ -1093,6 +1139,7 @@ const DICT = Object.freeze({
'title.docs': 'CLI Install & Docs',
'title.settings': 'System & Data Settings',

'subtitle.dashboard': 'Aggregate status and diagnostics.',
'subtitle.config': 'Manage local configs and models.',
'subtitle.sessions': 'Browse and export sessions.',
'subtitle.usage': 'View usage for the last 7/30 days.',
Expand All @@ -1102,6 +1149,37 @@ const DICT = Object.freeze({
'subtitle.docs': 'CLI install commands and troubleshooting.',
'subtitle.settings': 'Manage downloads, directories, and trash.'
,
'dashboard.doctor.title': 'Doctor',
'dashboard.doctor.runChecks': 'Run checks',
'dashboard.doctor.checking': 'Checking...',
'dashboard.card.config': 'Config',
'dashboard.card.sessions': 'Sessions',
'dashboard.card.usage': 'Usage',
'dashboard.card.tasks': 'Tasks',
'dashboard.card.skills': 'Skills',
'dashboard.kv.model': 'Model',
'dashboard.kv.issue': 'Issue',
'dashboard.kv.active': 'Active',
'dashboard.kv.sessions': 'Sessions',
'dashboard.kv.missingModel': 'Missing model',
'dashboard.kv.blockers': 'Blockers',
'dashboard.kv.runs': 'Runs',
'dashboard.kv.target': 'Target',
'dashboard.kv.root': 'Root',
'dashboard.status.health': 'Health',
'dashboard.status.busy': 'Busy',
'dashboard.status.models': 'Models',
'dashboard.health.ok': 'Checks passed',
'dashboard.health.fail': 'Checks failed',
'dashboard.health.issues': '{count} issues',
'dashboard.state.loading': 'Loading',
'dashboard.state.ready': 'Ready',
'dashboard.state.idle': 'Idle',
'dashboard.none': 'None',
'dashboard.sessions.count': '{count} sessions',
'dashboard.usage.range': 'Range {value}',
'dashboard.tasks.queue': 'run {running} / queue {queued}',
'dashboard.skills.count': 'installed {installed} / import {importable}',

// Plugins panel
'plugins.sidebar.title': 'Plugins',
Expand Down
64 changes: 34 additions & 30 deletions web-ui/partials/index/layout-header.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
<div id="app" class="container" v-cloak>
<div v-if="!sessionStandalone" class="top-tabs" role="tablist" :aria-label="t('nav.topTabs.aria')">
<button class="top-tab"
id="tab-dashboard"
role="tab"
data-main-tab="dashboard"
:tabindex="mainTab === 'dashboard' ? 0 : -1"
:aria-selected="mainTab === 'dashboard'"
aria-controls="panel-dashboard"
:class="{ active: isMainTabNavActive('dashboard') }"
@pointerdown="onMainTabPointerDown('dashboard', $event)"
@click="onMainTabClick('dashboard', $event)">{{ t('tab.dashboard') }}</button>
<button class="top-tab"
id="tab-docs"
role="tab"
Expand All @@ -11,38 +21,16 @@
@pointerdown="onMainTabPointerDown('docs', $event)"
@click="onMainTabClick('docs', $event)">{{ t('tab.docs') }}</button>
<button class="top-tab"
id="tab-config-codex"
id="tab-config"
role="tab"
data-main-tab="config"
data-config-mode="codex"
:tabindex="mainTab === 'config' && configMode === 'codex' ? 0 : -1"
:aria-selected="mainTab === 'config' && configMode === 'codex'"
aria-controls="panel-config-provider"
:class="{ active: isConfigModeNavActive('codex') }"
@pointerdown="onConfigTabPointerDown('codex', $event)"
@click="onConfigTabClick('codex', $event)">{{ t('tab.config.codex') }}</button>
<button class="top-tab"
id="tab-config-claude"
role="tab"
data-main-tab="config"
data-config-mode="claude"
:tabindex="mainTab === 'config' && configMode === 'claude' ? 0 : -1"
:aria-selected="mainTab === 'config' && configMode === 'claude'"
aria-controls="panel-config-claude"
:class="{ active: isConfigModeNavActive('claude') }"
@pointerdown="onConfigTabPointerDown('claude', $event)"
@click="onConfigTabClick('claude', $event)">{{ t('tab.config.claude') }}</button>
<button class="top-tab"
id="tab-config-openclaw"
role="tab"
data-main-tab="config"
data-config-mode="openclaw"
:tabindex="mainTab === 'config' && configMode === 'openclaw' ? 0 : -1"
:aria-selected="mainTab === 'config' && configMode === 'openclaw'"
aria-controls="panel-config-openclaw"
:class="{ active: isConfigModeNavActive('openclaw') }"
@pointerdown="onConfigTabPointerDown('openclaw', $event)"
@click="onConfigTabClick('openclaw', $event)">{{ t('tab.config.openclaw') }}</button>
:data-config-mode="configMode"
:tabindex="mainTab === 'config' ? 0 : -1"
:aria-selected="mainTab === 'config'"
:aria-controls="configMode === 'claude' ? 'panel-config-claude' : (configMode === 'openclaw' ? 'panel-config-openclaw' : 'panel-config-provider')"
:class="{ active: isMainTabNavActive('config') }"
@pointerdown="onMainTabPointerDown('config', $event)"
@click="onMainTabClick('config', $event)">{{ t('tab.config') }}</button>
<button class="top-tab"
id="tab-sessions"
role="tab"
Expand Down Expand Up @@ -136,6 +124,22 @@
</div>

<div class="side-rail-nav">
<div class="side-section" role="navigation" :aria-label="t('side.overview')">
<div class="side-section-title">{{ t('side.overview') }}</div>
<button
id="side-tab-dashboard"
data-main-tab="dashboard"
:aria-current="mainTab === 'dashboard' ? 'page' : null"
:class="['side-item', { active: isMainTabNavActive('dashboard') }]"
@pointerdown="onMainTabPointerDown('dashboard', $event)"
@click="onMainTabClick('dashboard', $event)">
<div class="side-item-title">{{ t('side.overview.doctor') }}</div>
<div class="side-item-meta">
<span>{{ t('side.overview.doctor.meta') }}</span>
<span>{{ inspectorHealthStatus }}</span>
</div>
</button>
</div>
<div class="side-section" role="navigation" :aria-label="t('side.docs')">
<div class="side-section-title">{{ t('side.docs') }}</div>
<button
Expand Down
Loading
Loading