codexmate 0.0.23 → 0.0.25

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

@@ -1,5 +1,15 @@
     <div id="app" class="container" v-cloak>
-        <div v-if="!sessionStandalone" class="top-tabs" role="tablist" aria-label="Navigation">
+        <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"
@@ -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"
@@ -126,7 +114,7 @@
             <aside class="side-rail" v-if="!sessionStandalone">
                 <div class="brand-block">
                     <div class="brand-head">
-                        <img class="brand-logo" src="/res/logo.png" alt="Codex Mate logo">
+                        <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>
@@ -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
@@ -210,7 +214,7 @@
                         <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 === 'codex' ? 'Codex' : 'Claude')) }) }}</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
@@ -365,7 +369,17 @@
                         <div class="status-chip">
                             <span class="label">{{ t('status.currentSource') }}</span>
                             <span class="value">
-                                {{ sessionFilterSource === 'all' ? t('sessions.source.all') : (sessionFilterSource === 'claude' ? 'Claude Code' : 'Codex') }}
+                                {{ 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">

package/web-ui/partials/index/modal-config-template-agents.html

@@ -107,7 +107,7 @@
 
 
                     <div class="form-group">
-                        <label class="form-label">{{ t('modal.agents.contentLabel') }}</label>
+                        <label class="form-label">{{ t(agentsContext === 'claude-md' ? 'modal.agents.contentLabel.claudeMd' : 'modal.agents.contentLabel') }}</label>
                         <div
                             v-if="!agentsLoading && (hasAgentsContentChanged() || agentsDiffVisible)"
                             class="agents-diff-save-alert">
@@ -137,13 +137,12 @@
                             </div>
                         </div>
                         <textarea
-                            v-else
                             v-model="agentsContent"
                             class="form-input template-editor"
                             spellcheck="false"
-                            :readonly="agentsLoading || agentsSaving"
+                            :readonly="agentsLoading || agentsSaving || agentsDiffVisible"
                             @input="onAgentsContentInput"
-                            :placeholder="t('modal.agents.placeholder')"></textarea>
+                            :placeholder="t(agentsContext === 'claude-md' ? 'modal.agents.placeholder.claudeMd' : 'modal.agents.placeholder')"></textarea>
                         <div class="template-editor-warning">
                             {{ agentsModalHint }}
                             <div class="agents-diff-hint">{{ t('modal.agents.hint.shortcuts') }}</div>

package/web-ui/partials/index/modal-health-check.html

@@ -1,72 +1,45 @@
-        <div v-if="showHealthCheckDialog" class="modal-overlay" @click.self="closeHealthCheckDialog()">
-            <div class="modal modal-wide health-check-dialog" role="dialog" aria-modal="true" aria-labelledby="health-check-dialog-title">
-                <div class="modal-header">
-                    <div>
-                        <div class="modal-title" id="health-check-dialog-title">{{ t('modal.healthCheck.title') }}</div>
-                        <div class="health-check-dialog-subtitle">{{ t('modal.healthCheck.subtitle') }}</div>
-                    </div>
-                    <div v-if="healthCheckDialogLockedProvider" class="health-check-dialog-lock">
-                        {{ t('modal.healthCheck.lockedPrefix', { value: healthCheckDialogLockedProvider }) }}
-                    </div>
-                </div>
+        <div v-if="showHealthCheckModal" class="modal-overlay" @click.self="showHealthCheckModal = false">
+            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="health-check-modal-title">
+                <div class="modal-title" id="health-check-modal-title">{{ t('config.health.title') }}</div>
 
-                <div class="health-check-dialog-controls">
-                    <div class="form-group health-check-dialog-provider">
-                        <label class="form-label">{{ t('field.provider') }}</label>
-                        <select
-                            v-model="healthCheckDialogSelectedProvider"
-                            class="form-select"
-                            :disabled="!!healthCheckDialogLockedProvider || healthCheckDialogSending">
-                            <option value="" disabled>{{ t('placeholder.selectProvider') }}</option>
-                            <option v-for="provider in displayProvidersList" :key="'health-check-provider-' + provider.name" :value="provider.name">
-                                {{ provider.name }}
-                            </option>
-                        </select>
+                <div v-if="!healthCheckResult" class="state-message">{{ t('common.notLoaded') }}</div>
+                <template v-else>
+                    <div class="form-hint">
+                        {{ healthCheckResult.ok ? t('config.health.ok') : t('config.health.fail') }}
+                        <span v-if="healthCheckResult.issues">（{{ t('config.health.issues', { count: healthCheckResult.issues.length }) }}）</span>
                     </div>
-                    <div v-if="healthCheckDialogLastResult" class="health-check-dialog-result" :class="healthCheckDialogLastResult.ok ? 'ok' : 'error'">
-                        <span>{{ healthCheckDialogLastResult.ok ? t('modal.healthCheck.result.ok') : t('modal.healthCheck.result.fail') }}</span>
-                        <span v-if="healthCheckDialogLastResult.model">{{ t('label.model') }}{{ healthCheckDialogLastResult.model }}</span>
-                        <span v-if="healthCheckDialogLastResult.status">HTTP {{ healthCheckDialogLastResult.status }}</span>
-                        <span v-if="healthCheckDialogLastResult.durationMs">{{ healthCheckDialogLastResult.durationMs }} ms</span>
-                    </div>
-                </div>
 
-                <div class="health-check-dialog-thread">
-                    <div v-if="healthCheckDialogMessages.length === 0" class="health-check-dialog-empty">
-                        {{ t('modal.healthCheck.emptyHint') }}
+                    <div v-if="healthCheckResult.remote && healthCheckResult.remote.type === 'remote-health-check'" class="form-hint">
+                        {{ healthCheckResult.remote.endpoint || '' }}
+                        <span v-if="healthCheckResult.remote.statusCode"> · {{ healthCheckResult.remote.statusCode }}</span>
+                        <span v-if="healthCheckResult.remote.message"> · {{ healthCheckResult.remote.message }}</span>
                     </div>
-                    <div
-                        v-for="item in healthCheckDialogMessages"
-                        :key="item.id"
-                        :class="['health-check-message', item.role, item.ok === false ? 'error' : '']">
-                        <div class="health-check-message-meta">
-                            <span>{{ item.role === 'user' ? t('role.you') : t('role.provider') }}</span>
-                            <span v-if="item.model">{{ item.model }}</span>
-                            <span v-if="item.status">HTTP {{ item.status }}</span>
-                            <span v-if="item.durationMs">{{ item.durationMs }} ms</span>
+
+                    <div v-if="healthCheckResult.remote && healthCheckResult.remote.speedTests" class="model-list">
+                        <div
+                            v-for="(result, name) in healthCheckResult.remote.speedTests"
+                            :key="'health-speed-' + name"
+                            class="model-item"
+                        >
+                            <span>{{ name }}</span>
+                            <span v-if="result && result.ok" class="latency ok">{{ formatLatency(result) }}</span>
+                            <span v-else class="latency error">{{ (result && result.error) ? result.error : t('config.health.fail') }}</span>
                         </div>
-                        <div class="health-check-message-text">{{ item.text }}</div>
-                        <pre v-if="item.rawPreview" class="health-check-message-raw">{{ item.rawPreview }}</pre>
                     </div>
-                </div>
 
-                <div class="form-group">
-                    <label class="form-label">{{ t('field.message') }}</label>
-                    <textarea
-                        v-model="healthCheckDialogPrompt"
-                        class="form-input health-check-dialog-textarea"
-                        rows="4"
-                        :disabled="healthCheckDialogSending"
-                        :placeholder="t('placeholder.healthCheckPromptExample')"
-                        @keydown.ctrl.enter.prevent="sendHealthCheckDialogMessage"></textarea>
-                    <div class="form-hint">{{ t('modal.healthCheck.realApiHint') }}</div>
-                </div>
+                    <div v-if="healthCheckResult.issues && healthCheckResult.issues.length" class="model-list">
+                        <div
+                            v-for="(issue, index) in healthCheckResult.issues"
+                            :key="issue.code || ('health-issue-' + index)"
+                            class="model-item"
+                        >
+                            <span>{{ issue.message || issue.code || '' }}</span>
+                        </div>
+                    </div>
+                </template>
 
                 <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeHealthCheckDialog()" :disabled="healthCheckDialogSending">{{ t('common.close') }}</button>
-                    <button class="btn btn-confirm" @click="sendHealthCheckDialogMessage" :disabled="healthCheckDialogSending">
-                        {{ healthCheckDialogSending ? t('common.sending') : t('modal.healthCheck.send') }}
-                    </button>
+                    <button class="btn btn-confirm" @click="showHealthCheckModal = false">{{ t('common.close') }}</button>
                 </div>
             </div>
         </div>

package/web-ui/partials/index/panel-config-claude.html

@@ -4,7 +4,12 @@
                     class="mode-content mode-cards"
                     id="panel-config-claude"
                     role="tabpanel"
-                    :aria-labelledby="'tab-config-claude'">
+                    :aria-labelledby="forceCompactLayout ? 'tab-config' : 'side-tab-config-claude'">
+                <div v-if="forceCompactLayout && !sessionStandalone" class="segmented-control">
+                    <button type="button" :class="['segment', { active: configMode === 'codex' }]" @click="switchConfigMode('codex')">{{ t('tab.config.codex') }}</button>
+                    <button type="button" :class="['segment', { active: configMode === 'claude' }]" @click="switchConfigMode('claude')">{{ t('tab.config.claude') }}</button>
+                    <button type="button" :class="['segment', { active: configMode === 'openclaw' }]" @click="switchConfigMode('openclaw')">{{ t('tab.config.openclaw') }}</button>
+                </div>
                 <template v-if="shouldShowCliInstallPlaceholder('claude')">
                     <div class="selector-section">
                         <div class="empty-state">
@@ -89,22 +94,37 @@
 
                 <div class="selector-section">
                     <div class="selector-header">
-                        <span class="selector-title">{{ t('claude.health.title') }}</span>
+                        <span class="selector-title">CLAUDE.md</span>
                     </div>
-                    <button class="btn-tool" @click="runHealthCheck" :disabled="healthCheckLoading || loading || !!initError">
-                        {{ healthCheckLoading ? t('claude.health.running') : t('claude.health.run') }}
+                    <button class="btn-tool" @click="openClaudeMdEditor" :disabled="loading || !!initError || agentsLoading">
+                        {{ agentsLoading ? t('config.modelLoading') : t('claude.md.open') }}
                     </button>
+                    <div class="config-template-hint">
+                        {{ t('claude.md.hint') }}
+                    </div>
                 </div>
 
                 <div class="selector-section">
                     <div class="selector-header">
-                        <span class="selector-title">CLAUDE.md</span>
+                        <span class="selector-title">{{ t('claude.health.title') }}</span>
                     </div>
-                    <button class="btn-tool" @click="openClaudeMdEditor" :disabled="loading || !!initError || agentsLoading">
-                        {{ agentsLoading ? t('config.modelLoading') : t('claude.md.open') }}
+                    <button class="btn-tool" @click="runHealthCheck" :disabled="healthCheckLoading || loading || !!initError">
+                        {{ healthCheckLoading ? t('claude.health.running') : t('claude.health.run') }}
                     </button>
-                    <div class="config-template-hint">
-                        {{ t('claude.md.hint') }}
+                    <div class="config-template-hint">{{ t('claude.health.hint') }}</div>
+                    <div v-if="healthCheckLoading && healthCheckBatchTotal" class="config-template-hint">
+                        {{ t('claude.health.progress', { done: healthCheckBatchDone, total: healthCheckBatchTotal, failed: healthCheckBatchFailed }) }}
+                    </div>
+                    <div v-if="healthCheckResult && !healthCheckLoading" class="config-template-hint">
+                        {{ healthCheckResult.ok ? t('config.health.ok') : t('config.health.fail') }} · {{ t('config.health.issues', { count: (healthCheckResult.issues || []).length }) }}
+                    </div>
+                    <button v-if="healthCheckResult && !healthCheckLoading" type="button" class="btn-mini" @click="showHealthCheckModal = true">
+                        {{ t('common.detail') }}
+                    </button>
+                    <div v-if="healthCheckResult && !healthCheckLoading && (healthCheckResult.issues || []).length">
+                        <div v-for="(issue, index) in healthCheckResult.issues" :key="issue.code || ('issue-' + index)" class="config-template-hint">
+                            {{ issue.message || issue.code || '' }}<span v-if="issue.suggestion"> · {{ issue.suggestion }}</span>
+                        </div>
                     </div>
                 </div>
 
@@ -125,27 +145,27 @@
                             </div>
                         </div>
                         <div class="card-trailing">
-                            <span :class="['pill', config.hasKey ? 'configured' : 'empty']">
-                                {{ config.hasKey ? t('claude.configured') : t('claude.notConfigured') }}
-                            </span>
                             <span v-if="claudeSpeedResults[name]" :class="['latency', claudeSpeedResults[name].ok ? 'ok' : 'error']">
                                 {{ formatLatency(claudeSpeedResults[name]) }}
                             </span>
+                            <span :class="['pill', config.hasKey ? 'configured' : 'empty']">
+                                {{ config.hasKey ? t('claude.configured') : t('claude.notConfigured') }}
+                            </span>
                             <div class="card-actions" @click.stop>
-                                <button class="card-action-btn" @click="openEditConfigModal(name)" :aria-label="`Edit Claude config ${name}`" :title="t('claude.action.edit')">
+                                <button class="card-action-btn" @click="openEditConfigModal(name)" :aria-label="t('claude.action.editAria', { name })" :title="t('claude.action.edit')">
                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                         <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                         <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                                     </svg>
                                 </button>
-                                <button class="card-action-btn" :class="{ loading: claudeShareLoading[name] }" @click="copyClaudeShareCommand(name)" disabled :title="t('claude.action.shareDisabled')" aria-label="Share import command">
+                                <button class="card-action-btn" :class="{ loading: claudeShareLoading[name] }" @click="copyClaudeShareCommand(name)" disabled :title="t('claude.action.shareDisabled')" :aria-label="t('config.shareCommand.aria')">
                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                         <path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/>
                                         <path d="M16 6l-4-4-4 4"/>
                                         <path d="M12 2v14"/>
                                     </svg>
                                 </button>
-                                <button class="card-action-btn delete" @click="deleteClaudeConfig(name)" :aria-label="`Delete Claude config ${name}`" :title="t('claude.action.delete')">
+                                <button class="card-action-btn delete" @click="deleteClaudeConfig(name)" :aria-label="t('claude.action.deleteAria', { name })" :title="t('claude.action.delete')">
                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                         <path d="M3 6h18"/>
                                         <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>

package/web-ui/partials/index/panel-config-codex.html

@@ -4,7 +4,12 @@
                         class="mode-content mode-cards"
                         id="panel-config-provider"
                         role="tabpanel"
-                        :aria-labelledby="'tab-config-' + configMode">
+                        :aria-labelledby="forceCompactLayout ? 'tab-config' : ('side-tab-config-' + configMode)">
+                <div v-if="forceCompactLayout && !sessionStandalone" class="segmented-control">
+                    <button type="button" :class="['segment', { active: configMode === 'codex' }]" @click="switchConfigMode('codex')">{{ t('tab.config.codex') }}</button>
+                    <button type="button" :class="['segment', { active: configMode === 'claude' }]" @click="switchConfigMode('claude')">{{ t('tab.config.claude') }}</button>
+                    <button type="button" :class="['segment', { active: configMode === 'openclaw' }]" @click="switchConfigMode('openclaw')">{{ t('tab.config.openclaw') }}</button>
+                </div>
                 <template v-if="isCodexConfigMode && shouldShowCliInstallPlaceholder('codex')">
                     <div class="selector-section">
                         <div class="empty-state">
@@ -38,8 +43,8 @@
                     <div class="selector-header">
                         <span class="selector-title">{{ t('config.models') }}</span>
                         <div class="selector-actions">
-                            <button class="btn-icon" @click="showModelModal = true" aria-label="Add model" title="添加模型" v-if="modelsSource === 'legacy'">+</button>
-                            <button class="btn-icon" @click="showModelListModal = true" aria-label="Manage models" title="管理模型" v-if="modelsSource === 'legacy'">≡</button>
+                            <button class="btn-icon" @click="showModelModal = true" :aria-label="t('modal.modelAdd.title')" :title="t('modal.modelAdd.title')" v-if="modelsSource === 'legacy'">+</button>
+                            <button class="btn-icon" @click="showModelListModal = true" :aria-label="t('modal.modelManage.title')" :title="t('modal.modelManage.title')" v-if="modelsSource === 'legacy'">≡</button>
                         </div>
                     </div>
                     <select
@@ -86,7 +91,7 @@
                     </div>
                     <select class="model-select" v-model="serviceTier" @change="onServiceTierChange">
                         <option value="fast">{{ t('config.serviceTier.fast') }}</option>
-                        <option value="standard">standard</option>
+                        <option value="standard">{{ t('config.serviceTier.standard') }}</option>
                     </select>
                     <div class="config-template-hint">
                         {{ t('config.serviceTier.hint', { field: 'service_tier' }) }}
@@ -163,6 +168,30 @@
                     </button>
                 </div>
 
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">{{ t('config.health.title') }}</span>
+                    </div>
+                    <button class="btn-tool" @click="runHealthCheck" :disabled="healthCheckLoading || loading || !!initError">
+                        {{ healthCheckLoading ? t('config.health.running') : t('config.health.run') }}
+                    </button>
+                    <div class="config-template-hint">{{ t('config.health.hint') }}</div>
+                    <div v-if="healthCheckLoading && healthCheckBatchTotal" class="config-template-hint">
+                        {{ t('config.health.progress', { done: healthCheckBatchDone, total: healthCheckBatchTotal, failed: healthCheckBatchFailed }) }}
+                    </div>
+                    <div v-if="healthCheckResult && !healthCheckLoading" class="config-template-hint">
+                        {{ healthCheckResult.ok ? t('config.health.ok') : t('config.health.fail') }} · {{ t('config.health.issues', { count: (healthCheckResult.issues || []).length }) }}
+                    </div>
+                    <button v-if="healthCheckResult && !healthCheckLoading" type="button" class="btn-mini" @click="showHealthCheckModal = true">
+                        {{ t('common.detail') }}
+                    </button>
+                    <div v-if="healthCheckResult && !healthCheckLoading && (healthCheckResult.issues || []).length">
+                        <div v-for="(issue, index) in healthCheckResult.issues" :key="issue.code || ('issue-' + index)" class="config-template-hint">
+                            {{ issue.message || issue.code || '' }}<span v-if="issue.suggestion"> · {{ issue.suggestion }}</span>
+                        </div>
+                    </div>
+                </div>
+
                 </template>
 
                 <div v-if="!loading && !initError" class="card-list">
@@ -187,24 +216,23 @@
                             </div>
                         </div>
                         <div class="card-trailing">
-                            <span :class="['pill', providerPillConfigured(provider) ? 'configured' : 'empty']">
-                                {{ providerPillText(provider) }}
-                            </span>
                             <span v-if="speedResults[provider.name]" :class="['latency', speedResults[provider.name].ok ? 'ok' : 'error']">
                                 {{ formatLatency(speedResults[provider.name]) }}
                             </span>
+                            <span :class="['pill', providerPillConfigured(provider) ? 'configured' : 'empty']">
+                                {{ providerPillText(provider) }}
+                            </span>
                             <div class="card-actions" @click.stop>
                                 <button
                                     class="card-action-btn"
-                                    @click="openHealthCheckDialog({ providerName: provider.name, locked: true })"
-                                    :disabled="displayCurrentProvider !== provider.name"
-                                    :aria-label="`Open health dialog for ${provider.name}`"
-                                    :title="displayCurrentProvider === provider.name ? t('config.healthTest') : t('config.switchProviderFirst')"
+                                    :class="{ loading: speedLoading[provider.name] }"
+                                    :disabled="!!speedLoading[provider.name]"
+                                    @click="runSpeedTest(provider.name, { silent: true })"
+                                    :aria-label="t('config.availabilityTestAria', { name: provider.name })"
+                                    :title="t('config.availabilityTest')"
                                 >
                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-                                        <path d="M8 9h8"/>
-                                        <path d="M8 13h5"/>
+                                        <path d="M13 2L3 14h7l-1 8 12-14h-7l1-6z"/>
                                     </svg>
                                 </button>
                                 <button
@@ -214,7 +242,7 @@
                                     :disabled="providerShareLoading[provider.name] || !shouldAllowProviderShare(provider)"
                                     @click="copyProviderShareCommand(provider)"
                                     :title="shouldAllowProviderShare(provider) ? t('config.shareCommand') : t('config.shareDisabled')"
-                                    aria-label="Share import command">
+                                    :aria-label="t('config.shareCommand.aria')">
                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                         <path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/>
                                         <path d="M16 6l-4-4-4 4"/>
@@ -227,8 +255,8 @@
                                     :class="{ disabled: !shouldShowProviderEdit(provider) }"
                                     :disabled="!shouldShowProviderEdit(provider)"
                                     @click="openEditModal(provider)"
-                                    :aria-label="`Edit provider ${provider.name}`"
-                                    :title="shouldShowProviderEdit(provider) ? '编辑' : '不可编辑'">
+                                    :aria-label="t('config.provider.edit.aria', { name: provider.name })"
+                                    :title="shouldShowProviderEdit(provider) ? t('common.edit') : t('common.notEditable')">
                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                         <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                         <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
@@ -240,8 +268,8 @@
                                     :class="{ disabled: !shouldShowProviderDelete(provider) }"
                                     :disabled="!shouldShowProviderDelete(provider)"
                                     @click="deleteProvider(provider.name)"
-                                    :aria-label="`Delete provider ${provider.name}`"
-                                    :title="shouldShowProviderDelete(provider) ? '删除' : '不可删除'">
+                                    :aria-label="t('config.provider.delete.aria', { name: provider.name })"
+                                    :title="shouldShowProviderDelete(provider) ? t('common.delete') : t('common.notDeletable')">
                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                         <path d="M3 6h18"/>
                                         <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>

package/web-ui/partials/index/panel-config-openclaw.html

@@ -4,7 +4,12 @@
                     class="mode-content mode-cards"
                     id="panel-config-openclaw"
                     role="tabpanel"
-                    :aria-labelledby="'tab-config-openclaw'">
+                    :aria-labelledby="forceCompactLayout ? 'tab-config' : 'side-tab-config-openclaw'">
+                <div v-if="forceCompactLayout && !sessionStandalone" class="segmented-control">
+                    <button type="button" :class="['segment', { active: configMode === 'codex' }]" @click="switchConfigMode('codex')">{{ t('tab.config.codex') }}</button>
+                    <button type="button" :class="['segment', { active: configMode === 'claude' }]" @click="switchConfigMode('claude')">{{ t('tab.config.claude') }}</button>
+                    <button type="button" :class="['segment', { active: configMode === 'openclaw' }]" @click="switchConfigMode('openclaw')">{{ t('tab.config.openclaw') }}</button>
+                </div>
                 <div class="config-template-hint">
                     {{ t('openclaw.applyHint') }}
                 </div>
@@ -59,13 +64,13 @@
                                 {{ openclawHasContent(config) ? t('openclaw.configured') : t('openclaw.notConfigured') }}
                             </span>
                             <div class="card-actions" @click.stop>
-                                <button class="card-action-btn" @click="openOpenclawEditModal(name)" :aria-label="`Edit OpenClaw config ${name}`" :title="t('openclaw.action.edit')">
+                                <button class="card-action-btn" @click="openOpenclawEditModal(name)" :aria-label="t('openclaw.action.editAria', { name })" :title="t('openclaw.action.edit')">
                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                         <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                         <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                                     </svg>
                                 </button>
-                                <button v-if="name !== '默认配置'" class="card-action-btn delete" @click="deleteOpenclawConfig(name)" :aria-label="`Delete OpenClaw config ${name}`" :title="t('openclaw.action.delete')">
+                                <button v-if="name !== '默认配置'" class="card-action-btn delete" @click="deleteOpenclawConfig(name)" :aria-label="t('openclaw.action.deleteAria', { name })" :title="t('openclaw.action.delete')">
                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                         <path d="M3 6h18"/>
                                         <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>