    <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>
                <button
                    type="button"
                    class="lang-choice-btn"
                    :aria-pressed="(lang || 'zh') === 'ja'"
                    :class="{ active: (lang || 'zh') === 'ja' }"
                    @click="setLang('ja')">日本語</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">Codex Mate <span v-if="appVersion" class="brand-version">v{{ appVersion }}</span></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>
                    <button
                        id="side-tab-trash"
                        data-main-tab="trash"
                        :aria-current="mainTab === 'trash' ? 'page' : null"
                        :class="['side-item', { active: isMainTabNavActive('trash') }]"
                        @pointerdown="onMainTabPointerDown('trash', $event)"
                        @click="onMainTabClick('trash', $event)">
                        <div class="side-item-title">回收站</div>
                        <div class="side-item-meta">
                            <span>已删除会话</span>
                            <span v-if="sessionTrashCount > 0" class="side-item-badge">{{ sessionTrashCount }}</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>
                        <button
                            type="button"
                            class="lang-choice-btn"
                            :aria-pressed="(lang || 'zh') === 'ja'"
                            :class="{ active: (lang || 'zh') === 'ja' }"
                            @click="setLang('ja')">日本語</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">
