codexmate 0.0.27 → 0.0.28

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

@@ -1,475 +1,475 @@
-    <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"
-                data-main-tab="docs"
-                :tabindex="mainTab === 'docs' ? 0 : -1"
-                :aria-selected="mainTab === 'docs'"
-                aria-controls="panel-docs"
-                :class="{ active: isMainTabNavActive('docs') }"
-                @pointerdown="onMainTabPointerDown('docs', $event)"
-                @click="onMainTabClick('docs', $event)">{{ t('tab.docs') }}</button>
-            <button class="top-tab"
-                id="tab-config"
-                role="tab"
-                data-main-tab="config"
-                :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"
-                data-main-tab="sessions"
-                :tabindex="mainTab === 'sessions' ? 0 : -1"
-                :aria-selected="mainTab === 'sessions'"
-                aria-controls="panel-sessions"
-                :class="{ active: isMainTabNavActive('sessions') }"
-                @pointerdown="onMainTabPointerDown('sessions', $event)"
-                @click="onMainTabClick('sessions', $event)">{{ t('tab.sessions') }}</button>
-            <button class="top-tab"
-                id="tab-usage"
-                role="tab"
-                data-main-tab="usage"
-                :tabindex="mainTab === 'usage' ? 0 : -1"
-                :aria-selected="mainTab === 'usage'"
-                aria-controls="panel-usage"
-                :class="{ active: isMainTabNavActive('usage') }"
-                @pointerdown="onMainTabPointerDown('usage', $event)"
-                @click="onMainTabClick('usage', $event)">{{ t('tab.usage') }}</button>
-            <button v-if="taskOrchestrationTabEnabled" class="top-tab"
-                id="tab-orchestration"
-                role="tab"
-                data-main-tab="orchestration"
-                :tabindex="mainTab === 'orchestration' ? 0 : -1"
-                :aria-selected="mainTab === 'orchestration'"
-                aria-controls="panel-orchestration"
-                :class="{ active: isMainTabNavActive('orchestration') }"
-                @pointerdown="onMainTabPointerDown('orchestration', $event)"
-                @click="onMainTabClick('orchestration', $event)">{{ t('tab.orchestration') }}</button>
-            <button class="top-tab"
-                id="tab-market"
-                role="tab"
-                data-main-tab="market"
-                :tabindex="mainTab === 'market' ? 0 : -1"
-                :aria-selected="mainTab === 'market'"
-                aria-controls="panel-market"
-                :class="{ active: isMainTabNavActive('market') }"
-                @pointerdown="onMainTabPointerDown('market', $event)"
-                @click="onMainTabClick('market', $event)">{{ t('tab.market') }}</button>
-            <button class="top-tab"
-                id="tab-plugins"
-                role="tab"
-                data-main-tab="plugins"
-                :tabindex="mainTab === 'plugins' ? 0 : -1"
-                :aria-selected="mainTab === 'plugins'"
-                aria-controls="panel-plugins"
-                :class="{ active: isMainTabNavActive('plugins') }"
-                @pointerdown="onMainTabPointerDown('plugins', $event)"
-                @click="onMainTabClick('plugins', $event)">{{ t('tab.plugins') }}</button>
-            <button class="top-tab"
-                id="tab-settings"
-                role="tab"
-                data-main-tab="settings"
-                :tabindex="mainTab === 'settings' ? 0 : -1"
-                :aria-selected="mainTab === 'settings'"
-                aria-controls="panel-settings"
-                :class="{ active: isMainTabNavActive('settings') }"
-                @pointerdown="onMainTabPointerDown('settings', $event)"
-                @click="onMainTabClick('settings', $event)">{{ t('tab.settings') }}</button>
-        </div>
-
-        <div v-if="!sessionStandalone" class="lang-fab" role="group" :aria-label="t('lang.label')">
-            <div class="lang-choice" role="group" :aria-label="t('lang.label')">
-                <button
-                    type="button"
-                    class="lang-choice-btn"
-                    :aria-pressed="(lang || 'zh') === 'zh'"
-                    :class="{ active: (lang || 'zh') === 'zh' }"
-                    @click="setLang('zh')">ZH</button>
-                <button
-                    type="button"
-                    class="lang-choice-btn"
-                    :aria-pressed="(lang || 'zh') === 'en'"
-                    :class="{ active: (lang || 'zh') === 'en' }"
-                    @click="setLang('en')">EN</button>
-            </div>
-        </div>
-
-        <div :class="['app-shell', { standalone: sessionStandalone }]">
-            <aside class="side-rail" v-if="!sessionStandalone">
-                <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">{{ t('brand.kicker.workspace') }}</div>
-                            <div class="brand-title">Codex Mate</div>
-                        </div>
-                    </div>
-                    <div class="brand-subtitle">{{ t('brand.subtitle.localConfigSessionsWorkspace') }}</div>
-                </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
-                        id="side-tab-docs"
-                        data-main-tab="docs"
-                        :aria-current="mainTab === 'docs' ? 'page' : null"
-                        :class="['side-item', { active: isMainTabNavActive('docs') }]"
-                        @pointerdown="onMainTabPointerDown('docs', $event)"
-                        @click="onMainTabClick('docs', $event)">
-                        <div class="side-item-title">{{ t('side.docs.cliInstall') }}</div>
-                        <div class="side-item-meta">
-                            <span>{{ t('side.docs.cliInstall.meta') }}</span>
-                            <span>{{ String(installPackageManager || 'npm').toUpperCase() }} · {{ installCommandAction === 'update' ? t('common.update') : (installCommandAction === 'uninstall' ? t('common.uninstall') : t('common.install')) }}</span>
-                        </div>
-                    </button>
-                </div>
-                <div class="side-section" role="navigation" :aria-label="t('side.config')">
-                    <div class="side-section-title">{{ t('side.config') }}</div>
-                    <button
-                        id="side-tab-config-codex"
-                        data-main-tab="config"
-                        data-config-mode="codex"
-                        :aria-current="mainTab === 'config' && configMode === 'codex' ? 'page' : null"
-                        :class="['side-item', { active: isConfigModeNavActive('codex') }]"
-                        @pointerdown="onConfigTabPointerDown('codex', $event)"
-                        @click="onConfigTabClick('codex', $event)">
-                        <div class="side-item-title">{{ t('side.config.codex') }}</div>
-                        <div class="side-item-meta">
-                            <span>{{ t('side.config.codex.meta') }}</span>
-                            <span v-if="currentProvider">{{ t('common.current', { value: currentProvider }) }}</span>
-                        </div>
-                    </button>
-                    <button
-                        id="side-tab-config-claude"
-                        data-main-tab="config"
-                        data-config-mode="claude"
-                        :aria-current="mainTab === 'config' && configMode === 'claude' ? 'page' : null"
-                        :class="['side-item', { active: isConfigModeNavActive('claude') }]"
-                        @pointerdown="onConfigTabPointerDown('claude', $event)"
-                        @click="onConfigTabClick('claude', $event)">
-                        <div class="side-item-title">{{ t('side.config.claude') }}</div>
-                        <div class="side-item-meta">
-                            <span>{{ t('side.config.claude.meta') }}</span>
-                            <span v-if="currentClaudeConfig">{{ t('common.current', { value: currentClaudeConfig }) }}</span>
-                        </div>
-                    </button>
-                    <button
-                        id="side-tab-config-openclaw"
-                        data-main-tab="config"
-                        data-config-mode="openclaw"
-                        :aria-current="mainTab === 'config' && configMode === 'openclaw' ? 'page' : null"
-                        :class="['side-item', { active: isConfigModeNavActive('openclaw') }]"
-                        @pointerdown="onConfigTabPointerDown('openclaw', $event)"
-                        @click="onConfigTabClick('openclaw', $event)">
-                        <div class="side-item-title">{{ t('side.config.openclaw') }}</div>
-                        <div class="side-item-meta">
-                            <span>{{ t('side.config.openclaw.meta') }}</span>
-                            <span v-if="currentOpenclawConfig">{{ t('common.current', { value: currentOpenclawConfig }) }}</span>
-                        </div>
-                    </button>
-                </div>
-
-                <div class="side-section" role="navigation" :aria-label="t('side.sessions')">
-                    <div class="side-section-title">{{ t('side.sessions') }}</div>
-                    <button
-                        id="side-tab-sessions"
-                        data-main-tab="sessions"
-                        :aria-current="mainTab === 'sessions' ? 'page' : null"
-                        :class="['side-item', { active: isMainTabNavActive('sessions') }]"
-                        @pointerdown="onMainTabPointerDown('sessions', $event)"
-                        @click="onMainTabClick('sessions', $event)">
-                        <div class="side-item-title">{{ t('side.sessions.browser') }}</div>
-                        <div class="side-item-meta">
-                            <span>{{ t('side.sessions.browser.meta') }}</span>
-                            <span>{{ t('sessions.sourceLabel', { value: (sessionFilterSource === 'all' ? t('sessions.source.all') : (sessionFilterSource === 'claude' ? 'Claude Code' : (sessionFilterSource === 'gemini' ? 'Gemini CLI' : (sessionFilterSource === 'codebuddy' ? 'CodeBuddy Code' : 'Codex')))) }) }}</span>
-                        </div>
-                    </button>
-                    <button
-                        id="side-tab-usage"
-                        data-main-tab="usage"
-                        :aria-current="mainTab === 'usage' ? 'page' : null"
-                        :class="['side-item', { active: isMainTabNavActive('usage') }]"
-                        @pointerdown="onMainTabPointerDown('usage', $event)"
-                        @click="onMainTabClick('usage', $event)">
-                        <div class="side-item-title">{{ t('tab.usage') }}</div>
-                        <div class="side-item-meta">
-                            <span>{{ t('side.usage.meta') }}</span>
-                            <span>{{ t('usage.rangeLabel', { value: (sessionsUsageTimeRange === 'all' ? t('usage.range.all') : (sessionsUsageTimeRange === '30d' ? t('usage.range.30d.short') : t('usage.range.7d.short'))) }) }}</span>
-                        </div>
-                    </button>
-                </div>
-
-                <div v-if="taskOrchestrationTabEnabled" class="side-section" role="navigation" :aria-label="t('side.orchestration')">
-                    <div class="side-section-title">{{ t('side.orchestration') }}</div>
-                    <button
-                        id="side-tab-orchestration"
-                        data-main-tab="orchestration"
-                        :aria-current="mainTab === 'orchestration' ? 'page' : null"
-                        :class="['side-item', { active: isMainTabNavActive('orchestration') }]"
-                        @pointerdown="onMainTabPointerDown('orchestration', $event)"
-                        @click="onMainTabClick('orchestration', $event)">
-                        <div class="side-item-title">{{ t('tab.orchestration') }}</div>
-                        <div class="side-item-meta">
-                            <span>{{ t('side.orchestration.meta') }}</span>
-                            <span>{{ t('orchestration.queueStats', { running: taskOrchestrationQueueStats.running, queued: taskOrchestrationQueueStats.queued }) }}</span>
-                        </div>
-                    </button>
-                </div>
-
-                <div class="side-section" role="navigation" :aria-label="t('side.skills')">
-                    <div class="side-section-title">{{ t('side.skills') }}</div>
-                    <button
-                        id="side-tab-market"
-                        data-main-tab="market"
-                        :aria-current="mainTab === 'market' ? 'page' : null"
-                        :class="['side-item', { active: isMainTabNavActive('market') }]"
-                        @pointerdown="onMainTabPointerDown('market', $event)"
-                        @click="onMainTabClick('market', $event)">
-                        <div class="side-item-title">{{ t('tab.market') }}</div>
-                        <div class="side-item-meta">
-                            <span>{{ t('skills.localLabel', { target: skillsTargetLabel }) }}</span>
-                            <span>{{ t('skills.counts', { installed: skillsList.length, importable: skillsImportList.length }) }}</span>
-                        </div>
-                    </button>
-                </div>
-
-                <div class="side-section" role="navigation" :aria-label="t('side.plugins')">
-                    <div class="side-section-title">{{ t('side.plugins') }}</div>
-                    <button
-                        id="side-tab-plugins"
-                        data-main-tab="plugins"
-                        :aria-current="mainTab === 'plugins' ? 'page' : null"
-                        :class="['side-item', { active: isMainTabNavActive('plugins') }]"
-                        @pointerdown="onMainTabPointerDown('plugins', $event)"
-                        @click="onMainTabClick('plugins', $event)">
-                        <div class="side-item-title">{{ t('side.plugins.tools') }}</div>
-                        <div class="side-item-meta">
-                            <span>{{ t('side.plugins.tools.meta') }}</span>
-                            <span>{{ promptTemplatesList.length }} templates</span>
-                        </div>
-                    </button>
-                </div>
-
-                <div class="side-section" role="navigation" :aria-label="t('side.system')">
-                    <div class="side-section-title">{{ t('side.system') }}</div>
-                    <button
-                        id="side-tab-settings"
-                        data-main-tab="settings"
-                        :aria-current="mainTab === 'settings' ? 'page' : null"
-                        :class="['side-item', { active: isMainTabNavActive('settings') }]"
-                        @pointerdown="onMainTabPointerDown('settings', $event)"
-                        @click="onMainTabClick('settings', $event)">
-                        <div class="side-item-title">{{ t('side.system.settings') }}</div>
-                        <div class="side-item-meta">
-                            <span>{{ t('side.system.settings.meta') }}</span>
-                        </div>
-                    </button>
-                </div>
-                </div>
-
-                <div class="side-rail-lang" role="group" :aria-label="t('lang.label')">
-                    <div class="lang-choice" role="group" :aria-label="t('lang.label')">
-                        <button
-                            type="button"
-                            class="lang-choice-btn"
-                            :aria-pressed="(lang || 'zh') === 'zh'"
-                            :class="{ active: (lang || 'zh') === 'zh' }"
-                            @click="setLang('zh')">ZH</button>
-                        <button
-                            type="button"
-                            class="lang-choice-btn"
-                            :aria-pressed="(lang || 'zh') === 'en'"
-                            :class="{ active: (lang || 'zh') === 'en' }"
-                            @click="setLang('en')">EN</button>
-                    </div>
-                </div>
-            </aside>
-            <main class="main-panel">
-                <div class="main-panel-topbar">
-                    <div class="panel-header panel-header-refined" v-if="!sessionStandalone">
-                        <div class="panel-header-copy">
-                            <div class="panel-kicker">{{ mainTabKicker }}</div>
-                            <h1 class="main-title">{{ mainTabTitle }}</h1>
-                            <p class="subtitle">{{ mainTabSubtitle }}</p>
-                        </div>
-                    </div>
-
-                    <div class="status-strip" v-if="!sessionStandalone && mainTab === 'config'">
-                        <template v-if="isProviderConfigMode">
-                            <div class="status-chip">
-                                <span class="label">{{ activeProviderConfigChipLabel }}</span>
-                                <span class="value">{{ currentProvider || t('common.notSelected') }}</span>
-                            </div>
-                            <div class="status-chip">
-                                <span class="label">{{ activeProviderModelChipLabel }}</span>
-                                <span class="value">{{ currentModel || t('common.notSelected') }}</span>
-                            </div>
-                        </template>
-                        <template v-else-if="configMode === 'claude'">
-                            <div class="status-chip">
-                                <span class="label">{{ t('status.claudeConfig') }}</span>
-                                <span class="value">{{ currentClaudeConfig || t('common.notSelected') }}</span>
-                            </div>
-                            <div class="status-chip">
-                                <span class="label">{{ t('status.claudeModel') }}</span>
-                                <span class="value">{{ currentClaudeModel || t('common.notSelected') }}</span>
-                            </div>
-                        </template>
-                        <template v-else-if="configMode === 'openclaw'">
-                            <div class="status-chip">
-                                <span class="label">{{ t('status.openclawConfig') }}</span>
-                                <span class="value">{{ currentOpenclawConfig || t('common.notSelected') }}</span>
-                            </div>
-                            <div class="status-chip">
-                                <span class="label">{{ t('status.workspaceFile') }}</span>
-                                <span class="value">{{ openclawWorkspaceFileName || t('common.notSelected') }}</span>
-                            </div>
-                        </template>
-                        <template v-else>
-                            <div class="status-chip">
-                                <span class="label">{{ t('status.configMode') }}</span>
-                                <span class="value">{{ t('common.notSelected') }}</span>
-                            </div>
-                        </template>
-                    </div>
-                    <div class="status-strip" v-else-if="!sessionStandalone && mainTab === 'sessions'">
-                        <div class="status-chip">
-                            <span class="label">{{ t('status.currentSource') }}</span>
-                            <span class="value">
-                                {{ sessionFilterSource === 'all'
-                                    ? t('sessions.source.all')
-                                    : (sessionFilterSource === 'codex'
-                                        ? t('sessions.source.codex')
-                                        : (sessionFilterSource === 'claude'
-                                            ? t('sessions.source.claudeCode')
-                                            : (sessionFilterSource === 'gemini'
-                                                ? t('sessions.source.gemini')
-                                                : (sessionFilterSource === 'codebuddy'
-                                                    ? t('sessions.source.codebuddy')
-                                                    : t('sessions.source.codex'))))) }}
-                            </span>
-                        </div>
-                        <div class="status-chip">
-                            <span class="label">{{ t('status.sessionCount') }}</span>
-                            <span class="value">{{ sessionsList.length }}</span>
-                        </div>
-                    </div>
-                    <div class="status-strip" v-else-if="!sessionStandalone && mainTab === 'usage'">
-                        <div class="status-chip">
-                            <span class="label">{{ t('status.range') }}</span>
-                            <span class="value">{{ sessionsUsageTimeRange === 'all' ? t('usage.range.all') : (sessionsUsageTimeRange === '30d' ? t('usage.range.30d.short') : t('usage.range.7d.short')) }}</span>
-                        </div>
-                        <div class="status-chip">
-                            <span class="label">{{ t('status.totalSessions') }}</span>
-                            <span class="value">{{ sessionUsageSummaryCards[0] ? sessionUsageSummaryCards[0].value : 0 }}</span>
-                        </div>
-                        <div class="status-chip">
-                            <span class="label">{{ t('status.totalMessages') }}</span>
-                            <span class="value">{{ sessionUsageSummaryCards[1] ? sessionUsageSummaryCards[1].value : 0 }}</span>
-                        </div>
-                    </div>
-                    <div class="status-strip" v-else-if="!sessionStandalone && taskOrchestrationTabEnabled && mainTab === 'orchestration'">
-                        <div class="status-chip">
-                            <span class="label">{{ t('status.engine') }}</span>
-                            <span class="value">{{ taskOrchestration.selectedEngine === 'workflow' ? 'Workflow' : 'Codex' }}</span>
-                        </div>
-                        <div class="status-chip">
-                            <span class="label">{{ t('status.concurrency') }}</span>
-                            <span class="value">{{ taskOrchestration.concurrency }}</span>
-                        </div>
-                        <div class="status-chip">
-                            <span class="label">{{ t('status.running') }}</span>
-                            <span class="value">{{ taskOrchestrationQueueStats.running }}</span>
-                        </div>
-                        <div class="status-chip">
-                            <span class="label">{{ t('status.queued') }}</span>
-                            <span class="value">{{ taskOrchestrationQueueStats.queued }}</span>
-                        </div>
-                        <div class="status-chip">
-                            <span class="label">{{ t('status.runs') }}</span>
-                            <span class="value">{{ taskOrchestration.runs.length }}</span>
-                        </div>
-                    </div>
-                    <div class="status-strip" v-else-if="!sessionStandalone && mainTab === 'market'">
-                        <div class="status-chip">
-                            <span class="label">{{ t('status.currentTarget') }}</span>
-                            <span class="value">{{ skillsTargetLabel }}</span>
-                        </div>
-                        <div class="status-chip">
-                            <span class="label">{{ t('status.localSkills') }}</span>
-                            <span class="value">{{ skillsList.length }}</span>
-                        </div>
-                        <div class="status-chip">
-                            <span class="label">{{ t('status.importable') }}</span>
-                            <span class="value">{{ skillsImportList.length }}</span>
-                        </div>
-                        <div class="status-chip">
-                            <span class="label">{{ t('status.importableDirect') }}</span>
-                            <span class="value">{{ skillsImportConfiguredCount }}</span>
-                        </div>
-                    </div>
-                    <div class="status-strip" v-else-if="!sessionStandalone && mainTab === 'docs'">
-                        <div class="status-chip">
-                            <span class="label">{{ t('status.pm') }}</span>
-                            <span class="value">{{ String(installPackageManager || 'npm').toUpperCase() }}</span>
-                        </div>
-                        <div class="status-chip">
-                            <span class="label">{{ t('status.action') }}</span>
-                            <span class="value">{{ installCommandAction === 'update' ? t('common.update') : (installCommandAction === 'uninstall' ? t('common.uninstall') : t('common.install')) }}</span>
-                        </div>
-                        <div class="status-chip">
-                            <span class="label">{{ t('status.registry') }}</span>
-                            <span class="value">{{ installRegistryPreview || t('common.defaultOfficial') }}</span>
-                        </div>
-                    </div>
-                    <div
-                        v-if="!sessionStandalone && mainTab === 'config' && isProviderConfigMode && forceCompactLayout && !loading && !initError && displayProvidersList.length > 1"
-                        class="provider-fast-switch">
-                        <label class="provider-fast-switch-label" for="provider-fast-switch-select">{{ t('status.quickSwitchProvider') }}</label>
-                        <select
-                            id="provider-fast-switch-select"
-                            class="provider-fast-switch-select"
-                            :value="displayCurrentProvider"
-                            @change="quickSwitchProvider($event.target.value)">
-                            <option v-for="provider in displayProvidersList" :key="'quick-switch-' + provider.name" :value="provider.name">
-                                {{ provider.name }}
-                            </option>
-                        </select>
-                    </div>
-                </div>
-
-                <!-- 内容包裹器 - 稳定布局 -->
-                <div class="content-wrapper">
+    <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"
+                data-main-tab="docs"
+                :tabindex="mainTab === 'docs' ? 0 : -1"
+                :aria-selected="mainTab === 'docs'"
+                aria-controls="panel-docs"
+                :class="{ active: isMainTabNavActive('docs') }"
+                @pointerdown="onMainTabPointerDown('docs', $event)"
+                @click="onMainTabClick('docs', $event)">{{ t('tab.docs') }}</button>
+            <button class="top-tab"
+                id="tab-config"
+                role="tab"
+                data-main-tab="config"
+                :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"
+                data-main-tab="sessions"
+                :tabindex="mainTab === 'sessions' ? 0 : -1"
+                :aria-selected="mainTab === 'sessions'"
+                aria-controls="panel-sessions"
+                :class="{ active: isMainTabNavActive('sessions') }"
+                @pointerdown="onMainTabPointerDown('sessions', $event)"
+                @click="onMainTabClick('sessions', $event)">{{ t('tab.sessions') }}</button>
+            <button class="top-tab"
+                id="tab-usage"
+                role="tab"
+                data-main-tab="usage"
+                :tabindex="mainTab === 'usage' ? 0 : -1"
+                :aria-selected="mainTab === 'usage'"
+                aria-controls="panel-usage"
+                :class="{ active: isMainTabNavActive('usage') }"
+                @pointerdown="onMainTabPointerDown('usage', $event)"
+                @click="onMainTabClick('usage', $event)">{{ t('tab.usage') }}</button>
+            <button v-if="taskOrchestrationTabEnabled" class="top-tab"
+                id="tab-orchestration"
+                role="tab"
+                data-main-tab="orchestration"
+                :tabindex="mainTab === 'orchestration' ? 0 : -1"
+                :aria-selected="mainTab === 'orchestration'"
+                aria-controls="panel-orchestration"
+                :class="{ active: isMainTabNavActive('orchestration') }"
+                @pointerdown="onMainTabPointerDown('orchestration', $event)"
+                @click="onMainTabClick('orchestration', $event)">{{ t('tab.orchestration') }}</button>
+            <button class="top-tab"
+                id="tab-market"
+                role="tab"
+                data-main-tab="market"
+                :tabindex="mainTab === 'market' ? 0 : -1"
+                :aria-selected="mainTab === 'market'"
+                aria-controls="panel-market"
+                :class="{ active: isMainTabNavActive('market') }"
+                @pointerdown="onMainTabPointerDown('market', $event)"
+                @click="onMainTabClick('market', $event)">{{ t('tab.market') }}</button>
+            <button class="top-tab"
+                id="tab-plugins"
+                role="tab"
+                data-main-tab="plugins"
+                :tabindex="mainTab === 'plugins' ? 0 : -1"
+                :aria-selected="mainTab === 'plugins'"
+                aria-controls="panel-plugins"
+                :class="{ active: isMainTabNavActive('plugins') }"
+                @pointerdown="onMainTabPointerDown('plugins', $event)"
+                @click="onMainTabClick('plugins', $event)">{{ t('tab.plugins') }}</button>
+            <button class="top-tab"
+                id="tab-settings"
+                role="tab"
+                data-main-tab="settings"
+                :tabindex="mainTab === 'settings' ? 0 : -1"
+                :aria-selected="mainTab === 'settings'"
+                aria-controls="panel-settings"
+                :class="{ active: isMainTabNavActive('settings') }"
+                @pointerdown="onMainTabPointerDown('settings', $event)"
+                @click="onMainTabClick('settings', $event)">{{ t('tab.settings') }}</button>
+        </div>
+
+        <div v-if="!sessionStandalone" class="lang-fab" role="group" :aria-label="t('lang.label')">
+            <div class="lang-choice" role="group" :aria-label="t('lang.label')">
+                <button
+                    type="button"
+                    class="lang-choice-btn"
+                    :aria-pressed="(lang || 'zh') === 'zh'"
+                    :class="{ active: (lang || 'zh') === 'zh' }"
+                    @click="setLang('zh')">ZH</button>
+                <button
+                    type="button"
+                    class="lang-choice-btn"
+                    :aria-pressed="(lang || 'zh') === 'en'"
+                    :class="{ active: (lang || 'zh') === 'en' }"
+                    @click="setLang('en')">EN</button>
+            </div>
+        </div>
+
+        <div :class="['app-shell', { standalone: sessionStandalone }]">
+            <aside class="side-rail" v-if="!sessionStandalone">
+                <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">{{ t('brand.kicker.workspace') }}</div>
+                            <div class="brand-title">Codex Mate</div>
+                        </div>
+                    </div>
+                    <div class="brand-subtitle">{{ t('brand.subtitle.localConfigSessionsWorkspace') }}</div>
+                </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
+                        id="side-tab-docs"
+                        data-main-tab="docs"
+                        :aria-current="mainTab === 'docs' ? 'page' : null"
+                        :class="['side-item', { active: isMainTabNavActive('docs') }]"
+                        @pointerdown="onMainTabPointerDown('docs', $event)"
+                        @click="onMainTabClick('docs', $event)">
+                        <div class="side-item-title">{{ t('side.docs.cliInstall') }}</div>
+                        <div class="side-item-meta">
+                            <span>{{ t('side.docs.cliInstall.meta') }}</span>
+                            <span>{{ String(installPackageManager || 'npm').toUpperCase() }} · {{ installCommandAction === 'update' ? t('common.update') : (installCommandAction === 'uninstall' ? t('common.uninstall') : t('common.install')) }}</span>
+                        </div>
+                    </button>
+                </div>
+                <div class="side-section" role="navigation" :aria-label="t('side.config')">
+                    <div class="side-section-title">{{ t('side.config') }}</div>
+                    <button
+                        id="side-tab-config-codex"
+                        data-main-tab="config"
+                        data-config-mode="codex"
+                        :aria-current="mainTab === 'config' && configMode === 'codex' ? 'page' : null"
+                        :class="['side-item', { active: isConfigModeNavActive('codex') }]"
+                        @pointerdown="onConfigTabPointerDown('codex', $event)"
+                        @click="onConfigTabClick('codex', $event)">
+                        <div class="side-item-title">{{ t('side.config.codex') }}</div>
+                        <div class="side-item-meta">
+                            <span>{{ t('side.config.codex.meta') }}</span>
+                            <span v-if="currentProvider">{{ t('common.current', { value: currentProvider }) }}</span>
+                        </div>
+                    </button>
+                    <button
+                        id="side-tab-config-claude"
+                        data-main-tab="config"
+                        data-config-mode="claude"
+                        :aria-current="mainTab === 'config' && configMode === 'claude' ? 'page' : null"
+                        :class="['side-item', { active: isConfigModeNavActive('claude') }]"
+                        @pointerdown="onConfigTabPointerDown('claude', $event)"
+                        @click="onConfigTabClick('claude', $event)">
+                        <div class="side-item-title">{{ t('side.config.claude') }}</div>
+                        <div class="side-item-meta">
+                            <span>{{ t('side.config.claude.meta') }}</span>
+                            <span v-if="currentClaudeConfig">{{ t('common.current', { value: currentClaudeConfig }) }}</span>
+                        </div>
+                    </button>
+                    <button
+                        id="side-tab-config-openclaw"
+                        data-main-tab="config"
+                        data-config-mode="openclaw"
+                        :aria-current="mainTab === 'config' && configMode === 'openclaw' ? 'page' : null"
+                        :class="['side-item', { active: isConfigModeNavActive('openclaw') }]"
+                        @pointerdown="onConfigTabPointerDown('openclaw', $event)"
+                        @click="onConfigTabClick('openclaw', $event)">
+                        <div class="side-item-title">{{ t('side.config.openclaw') }}</div>
+                        <div class="side-item-meta">
+                            <span>{{ t('side.config.openclaw.meta') }}</span>
+                            <span v-if="currentOpenclawConfig">{{ t('common.current', { value: currentOpenclawConfig }) }}</span>
+                        </div>
+                    </button>
+                </div>
+
+                <div class="side-section" role="navigation" :aria-label="t('side.sessions')">
+                    <div class="side-section-title">{{ t('side.sessions') }}</div>
+                    <button
+                        id="side-tab-sessions"
+                        data-main-tab="sessions"
+                        :aria-current="mainTab === 'sessions' ? 'page' : null"
+                        :class="['side-item', { active: isMainTabNavActive('sessions') }]"
+                        @pointerdown="onMainTabPointerDown('sessions', $event)"
+                        @click="onMainTabClick('sessions', $event)">
+                        <div class="side-item-title">{{ t('side.sessions.browser') }}</div>
+                        <div class="side-item-meta">
+                            <span>{{ t('side.sessions.browser.meta') }}</span>
+                            <span>{{ t('sessions.sourceLabel', { value: (sessionFilterSource === 'all' ? t('sessions.source.all') : (sessionFilterSource === 'claude' ? 'Claude Code' : (sessionFilterSource === 'gemini' ? 'Gemini CLI' : (sessionFilterSource === 'codebuddy' ? 'CodeBuddy Code' : 'Codex')))) }) }}</span>
+                        </div>
+                    </button>
+                    <button
+                        id="side-tab-usage"
+                        data-main-tab="usage"
+                        :aria-current="mainTab === 'usage' ? 'page' : null"
+                        :class="['side-item', { active: isMainTabNavActive('usage') }]"
+                        @pointerdown="onMainTabPointerDown('usage', $event)"
+                        @click="onMainTabClick('usage', $event)">
+                        <div class="side-item-title">{{ t('tab.usage') }}</div>
+                        <div class="side-item-meta">
+                            <span>{{ t('side.usage.meta') }}</span>
+                            <span>{{ t('usage.rangeLabel', { value: (sessionsUsageTimeRange === 'all' ? t('usage.range.all') : (sessionsUsageTimeRange === '30d' ? t('usage.range.30d.short') : t('usage.range.7d.short'))) }) }}</span>
+                        </div>
+                    </button>
+                </div>
+
+                <div v-if="taskOrchestrationTabEnabled" class="side-section" role="navigation" :aria-label="t('side.orchestration')">
+                    <div class="side-section-title">{{ t('side.orchestration') }}</div>
+                    <button
+                        id="side-tab-orchestration"
+                        data-main-tab="orchestration"
+                        :aria-current="mainTab === 'orchestration' ? 'page' : null"
+                        :class="['side-item', { active: isMainTabNavActive('orchestration') }]"
+                        @pointerdown="onMainTabPointerDown('orchestration', $event)"
+                        @click="onMainTabClick('orchestration', $event)">
+                        <div class="side-item-title">{{ t('tab.orchestration') }}</div>
+                        <div class="side-item-meta">
+                            <span>{{ t('side.orchestration.meta') }}</span>
+                            <span>{{ t('orchestration.queueStats', { running: taskOrchestrationQueueStats.running, queued: taskOrchestrationQueueStats.queued }) }}</span>
+                        </div>
+                    </button>
+                </div>
+
+                <div class="side-section" role="navigation" :aria-label="t('side.skills')">
+                    <div class="side-section-title">{{ t('side.skills') }}</div>
+                    <button
+                        id="side-tab-market"
+                        data-main-tab="market"
+                        :aria-current="mainTab === 'market' ? 'page' : null"
+                        :class="['side-item', { active: isMainTabNavActive('market') }]"
+                        @pointerdown="onMainTabPointerDown('market', $event)"
+                        @click="onMainTabClick('market', $event)">
+                        <div class="side-item-title">{{ t('tab.market') }}</div>
+                        <div class="side-item-meta">
+                            <span>{{ t('skills.localLabel', { target: skillsTargetLabel }) }}</span>
+                            <span>{{ t('skills.counts', { installed: skillsList.length, importable: skillsImportList.length }) }}</span>
+                        </div>
+                    </button>
+                </div>
+
+                <div class="side-section" role="navigation" :aria-label="t('side.plugins')">
+                    <div class="side-section-title">{{ t('side.plugins') }}</div>
+                    <button
+                        id="side-tab-plugins"
+                        data-main-tab="plugins"
+                        :aria-current="mainTab === 'plugins' ? 'page' : null"
+                        :class="['side-item', { active: isMainTabNavActive('plugins') }]"
+                        @pointerdown="onMainTabPointerDown('plugins', $event)"
+                        @click="onMainTabClick('plugins', $event)">
+                        <div class="side-item-title">{{ t('side.plugins.tools') }}</div>
+                        <div class="side-item-meta">
+                            <span>{{ t('side.plugins.tools.meta') }}</span>
+                            <span>{{ promptTemplatesList.length }} templates</span>
+                        </div>
+                    </button>
+                </div>
+
+                <div class="side-section" role="navigation" :aria-label="t('side.system')">
+                    <div class="side-section-title">{{ t('side.system') }}</div>
+                    <button
+                        id="side-tab-settings"
+                        data-main-tab="settings"
+                        :aria-current="mainTab === 'settings' ? 'page' : null"
+                        :class="['side-item', { active: isMainTabNavActive('settings') }]"
+                        @pointerdown="onMainTabPointerDown('settings', $event)"
+                        @click="onMainTabClick('settings', $event)">
+                        <div class="side-item-title">{{ t('side.system.settings') }}</div>
+                        <div class="side-item-meta">
+                            <span>{{ t('side.system.settings.meta') }}</span>
+                        </div>
+                    </button>
+                </div>
+                </div>
+
+                <div class="side-rail-lang" role="group" :aria-label="t('lang.label')">
+                    <div class="lang-choice" role="group" :aria-label="t('lang.label')">
+                        <button
+                            type="button"
+                            class="lang-choice-btn"
+                            :aria-pressed="(lang || 'zh') === 'zh'"
+                            :class="{ active: (lang || 'zh') === 'zh' }"
+                            @click="setLang('zh')">ZH</button>
+                        <button
+                            type="button"
+                            class="lang-choice-btn"
+                            :aria-pressed="(lang || 'zh') === 'en'"
+                            :class="{ active: (lang || 'zh') === 'en' }"
+                            @click="setLang('en')">EN</button>
+                    </div>
+                </div>
+            </aside>
+            <main class="main-panel">
+                <div class="main-panel-topbar">
+                    <div class="panel-header panel-header-refined" v-if="!sessionStandalone">
+                        <div class="panel-header-copy">
+                            <div class="panel-kicker">{{ mainTabKicker }}</div>
+                            <h1 class="main-title">{{ mainTabTitle }}</h1>
+                            <p class="subtitle">{{ mainTabSubtitle }}</p>
+                        </div>
+                    </div>
+
+                    <div class="status-strip" v-if="!sessionStandalone && mainTab === 'config'">
+                        <template v-if="isProviderConfigMode">
+                            <div class="status-chip">
+                                <span class="label">{{ activeProviderConfigChipLabel }}</span>
+                                <span class="value">{{ currentProvider || t('common.notSelected') }}</span>
+                            </div>
+                            <div class="status-chip">
+                                <span class="label">{{ activeProviderModelChipLabel }}</span>
+                                <span class="value">{{ currentModel || t('common.notSelected') }}</span>
+                            </div>
+                        </template>
+                        <template v-else-if="configMode === 'claude'">
+                            <div class="status-chip">
+                                <span class="label">{{ t('status.claudeConfig') }}</span>
+                                <span class="value">{{ currentClaudeConfig || t('common.notSelected') }}</span>
+                            </div>
+                            <div class="status-chip">
+                                <span class="label">{{ t('status.claudeModel') }}</span>
+                                <span class="value">{{ currentClaudeModel || t('common.notSelected') }}</span>
+                            </div>
+                        </template>
+                        <template v-else-if="configMode === 'openclaw'">
+                            <div class="status-chip">
+                                <span class="label">{{ t('status.openclawConfig') }}</span>
+                                <span class="value">{{ currentOpenclawConfig || t('common.notSelected') }}</span>
+                            </div>
+                            <div class="status-chip">
+                                <span class="label">{{ t('status.workspaceFile') }}</span>
+                                <span class="value">{{ openclawWorkspaceFileName || t('common.notSelected') }}</span>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div class="status-chip">
+                                <span class="label">{{ t('status.configMode') }}</span>
+                                <span class="value">{{ t('common.notSelected') }}</span>
+                            </div>
+                        </template>
+                    </div>
+                    <div class="status-strip" v-else-if="!sessionStandalone && mainTab === 'sessions'">
+                        <div class="status-chip">
+                            <span class="label">{{ t('status.currentSource') }}</span>
+                            <span class="value">
+                                {{ sessionFilterSource === 'all'
+                                    ? t('sessions.source.all')
+                                    : (sessionFilterSource === 'codex'
+                                        ? t('sessions.source.codex')
+                                        : (sessionFilterSource === 'claude'
+                                            ? t('sessions.source.claudeCode')
+                                            : (sessionFilterSource === 'gemini'
+                                                ? t('sessions.source.gemini')
+                                                : (sessionFilterSource === 'codebuddy'
+                                                    ? t('sessions.source.codebuddy')
+                                                    : t('sessions.source.codex'))))) }}
+                            </span>
+                        </div>
+                        <div class="status-chip">
+                            <span class="label">{{ t('status.sessionCount') }}</span>
+                            <span class="value">{{ sessionsList.length }}</span>
+                        </div>
+                    </div>
+                    <div class="status-strip" v-else-if="!sessionStandalone && mainTab === 'usage'">
+                        <div class="status-chip">
+                            <span class="label">{{ t('status.range') }}</span>
+                            <span class="value">{{ sessionsUsageTimeRange === 'all' ? t('usage.range.all') : (sessionsUsageTimeRange === '30d' ? t('usage.range.30d.short') : t('usage.range.7d.short')) }}</span>
+                        </div>
+                        <div class="status-chip">
+                            <span class="label">{{ t('status.totalSessions') }}</span>
+                            <span class="value">{{ sessionUsageSummaryCards[0] ? sessionUsageSummaryCards[0].value : 0 }}</span>
+                        </div>
+                        <div class="status-chip">
+                            <span class="label">{{ t('status.totalMessages') }}</span>
+                            <span class="value">{{ sessionUsageSummaryCards[1] ? sessionUsageSummaryCards[1].value : 0 }}</span>
+                        </div>
+                    </div>
+                    <div class="status-strip" v-else-if="!sessionStandalone && taskOrchestrationTabEnabled && mainTab === 'orchestration'">
+                        <div class="status-chip">
+                            <span class="label">{{ t('status.engine') }}</span>
+                            <span class="value">{{ taskOrchestration.selectedEngine === 'workflow' ? 'Workflow' : 'Codex' }}</span>
+                        </div>
+                        <div class="status-chip">
+                            <span class="label">{{ t('status.concurrency') }}</span>
+                            <span class="value">{{ taskOrchestration.concurrency }}</span>
+                        </div>
+                        <div class="status-chip">
+                            <span class="label">{{ t('status.running') }}</span>
+                            <span class="value">{{ taskOrchestrationQueueStats.running }}</span>
+                        </div>
+                        <div class="status-chip">
+                            <span class="label">{{ t('status.queued') }}</span>
+                            <span class="value">{{ taskOrchestrationQueueStats.queued }}</span>
+                        </div>
+                        <div class="status-chip">
+                            <span class="label">{{ t('status.runs') }}</span>
+                            <span class="value">{{ taskOrchestration.runs.length }}</span>
+                        </div>
+                    </div>
+                    <div class="status-strip" v-else-if="!sessionStandalone && mainTab === 'market'">
+                        <div class="status-chip">
+                            <span class="label">{{ t('status.currentTarget') }}</span>
+                            <span class="value">{{ skillsTargetLabel }}</span>
+                        </div>
+                        <div class="status-chip">
+                            <span class="label">{{ t('status.localSkills') }}</span>
+                            <span class="value">{{ skillsList.length }}</span>
+                        </div>
+                        <div class="status-chip">
+                            <span class="label">{{ t('status.importable') }}</span>
+                            <span class="value">{{ skillsImportList.length }}</span>
+                        </div>
+                        <div class="status-chip">
+                            <span class="label">{{ t('status.importableDirect') }}</span>
+                            <span class="value">{{ skillsImportConfiguredCount }}</span>
+                        </div>
+                    </div>
+                    <div class="status-strip" v-else-if="!sessionStandalone && mainTab === 'docs'">
+                        <div class="status-chip">
+                            <span class="label">{{ t('status.pm') }}</span>
+                            <span class="value">{{ String(installPackageManager || 'npm').toUpperCase() }}</span>
+                        </div>
+                        <div class="status-chip">
+                            <span class="label">{{ t('status.action') }}</span>
+                            <span class="value">{{ installCommandAction === 'update' ? t('common.update') : (installCommandAction === 'uninstall' ? t('common.uninstall') : t('common.install')) }}</span>
+                        </div>
+                        <div class="status-chip">
+                            <span class="label">{{ t('status.registry') }}</span>
+                            <span class="value">{{ installRegistryPreview || t('common.defaultOfficial') }}</span>
+                        </div>
+                    </div>
+                    <div
+                        v-if="!sessionStandalone && mainTab === 'config' && isProviderConfigMode && forceCompactLayout && !loading && !initError && displayProvidersList.length > 1"
+                        class="provider-fast-switch">
+                        <label class="provider-fast-switch-label" for="provider-fast-switch-select">{{ t('status.quickSwitchProvider') }}</label>
+                        <select
+                            id="provider-fast-switch-select"
+                            class="provider-fast-switch-select"
+                            :value="displayCurrentProvider"
+                            @change="quickSwitchProvider($event.target.value)">
+                            <option v-for="provider in displayProvidersList" :key="'quick-switch-' + provider.name" :value="provider.name">
+                                {{ provider.name }}
+                            </option>
+                        </select>
+                    </div>
+                </div>
+
+                <!-- 内容包裹器 - 稳定布局 -->
+                <div class="content-wrapper">