codexmate 0.0.23 → 0.0.25

package/web-ui/partials/index/panel-dashboard.html

@@ -0,0 +1,186 @@
+                <div
+                    v-show="mainTab === 'dashboard'"
+                    class="mode-content"
+                    id="panel-dashboard"
+                    role="tabpanel"
+                    :aria-labelledby="'tab-dashboard'">
+                    <div class="selector-section doctor-hero">
+                        <div class="selector-header">
+                            <span class="selector-title">{{ t('dashboard.doctor.title') }}</span>
+                            <div class="selector-actions">
+                                <button
+                                    class="btn-tool btn-tool-compact"
+                                    @click="runHealthCheck"
+                                    :disabled="loading || !!initError || healthCheckLoading">
+                                    {{ healthCheckLoading ? t('dashboard.doctor.checking') : t('dashboard.doctor.runChecks') }}
+                                </button>
+                            </div>
+                        </div>
+                        <div class="doctor-grid">
+                            <button type="button" class="doctor-card" @click="switchMainTab('config')" :disabled="loading || !!initError">
+                                <div class="doctor-card-title">{{ t('dashboard.card.config') }}</div>
+                                <div class="doctor-card-meta">
+                                    <span>{{ inspectorConfigModeLabel }}</span>
+                                    <span>·</span>
+                                    <span>{{ inspectorCurrentConfigLabel }}</span>
+                                </div>
+                                <div class="doctor-card-kv">
+                                    <span>{{ t('dashboard.kv.model') }}</span>
+                                    <span>{{ inspectorCurrentModelLabel }}</span>
+                                </div>
+                            </button>
+                            <button type="button" class="doctor-card" @click="switchMainTab('sessions')" :disabled="loading || !!initError">
+                                <div class="doctor-card-title">{{ t('dashboard.card.sessions') }}</div>
+                                <div class="doctor-card-meta">
+                                    <span>{{ sessionsLoading ? t('dashboard.state.loading') : (sessionsLoadedOnce ? t('dashboard.state.ready') : t('dashboard.state.idle')) }}</span>
+                                    <span>·</span>
+                                    <span>{{ t('dashboard.sessions.count', { count: sessionsList.length }) }}</span>
+                                </div>
+                                <div class="doctor-card-kv" v-if="activeSessionDetailError">
+                                    <span>{{ t('dashboard.kv.issue') }}</span>
+                                    <span class="doctor-kv-error">{{ activeSessionDetailError }}</span>
+                                </div>
+                                <div class="doctor-card-kv" v-else>
+                                    <span>{{ t('dashboard.kv.active') }}</span>
+                                    <span>{{ activeSession ? (activeSession.title || activeSession.sessionId) : t('dashboard.none') }}</span>
+                                </div>
+                            </button>
+                            <button type="button" class="doctor-card" @click="switchMainTab('usage')" :disabled="loading || !!initError">
+                                <div class="doctor-card-title">{{ t('dashboard.card.usage') }}</div>
+                                <div class="doctor-card-meta">
+                                    <span>{{ sessionsUsageLoading ? t('dashboard.state.loading') : (sessionsUsageLoadedOnce ? t('dashboard.state.ready') : t('dashboard.state.idle')) }}</span>
+                                    <span>·</span>
+                                    <span>{{ t('dashboard.usage.range', { value: (sessionsUsageTimeRange === 'all' ? t('usage.range.all') : (sessionsUsageTimeRange === '30d' ? t('usage.range.30d.short') : t('usage.range.7d.short'))) }) }}</span>
+                                </div>
+                                <div class="doctor-card-kv" v-if="sessionsUsageError">
+                                    <span>{{ t('dashboard.kv.issue') }}</span>
+                                    <span class="doctor-kv-error">{{ sessionsUsageError }}</span>
+                                </div>
+                                <div class="doctor-card-kv" v-else>
+                                    <span>{{ t('dashboard.kv.sessions') }}</span>
+                                    <span>{{ sessionUsageSummaryCards[0] ? sessionUsageSummaryCards[0].value : 0 }}</span>
+                                </div>
+                                <div class="doctor-card-kv"
+                                    v-if="sessionsUsageLoadedOnce
+                                        && sessionsUsageList.filter(session => !(session && typeof session.model === 'string' && session.model.trim())).length">
+                                    <span>{{ t('dashboard.kv.missingModel') }}</span>
+                                    <span>{{ sessionsUsageList.filter(session => !(session && typeof session.model === 'string' && session.model.trim())).length }}</span>
+                                </div>
+                            </button>
+                            <button
+                                v-if="taskOrchestrationTabEnabled"
+                                type="button"
+                                class="doctor-card"
+                                @click="switchMainTab('orchestration')"
+                                :disabled="loading || !!initError">
+                                <div class="doctor-card-title">{{ t('dashboard.card.tasks') }}</div>
+                                <div class="doctor-card-meta">
+                                    <span>{{ taskOrchestration && taskOrchestration.loading ? t('dashboard.state.loading') : t('dashboard.state.ready') }}</span>
+                                    <span>·</span>
+                                    <span>{{ t('dashboard.tasks.queue', { running: taskOrchestrationQueueStats.running, queued: taskOrchestrationQueueStats.queued }) }}</span>
+                                </div>
+                                <div class="doctor-card-kv" v-if="taskOrchestration && taskOrchestration.planIssues && taskOrchestration.planIssues.length">
+                                    <span>{{ t('dashboard.kv.blockers') }}</span>
+                                    <span>{{ taskOrchestration.planIssues.length }}</span>
+                                </div>
+                                <div class="doctor-card-kv" v-else>
+                                    <span>{{ t('dashboard.kv.runs') }}</span>
+                                    <span>{{ taskOrchestration && taskOrchestration.runs ? taskOrchestration.runs.length : 0 }}</span>
+                                </div>
+                            </button>
+                            <button type="button" class="doctor-card" @click="switchMainTab('market')" :disabled="loading || !!initError">
+                                <div class="doctor-card-title">{{ t('dashboard.card.skills') }}</div>
+                                <div class="doctor-card-meta">
+                                    <span>{{ skillsMarketBusy ? t('dashboard.state.loading') : t('dashboard.state.ready') }}</span>
+                                    <span>·</span>
+                                    <span>{{ t('dashboard.skills.count', { installed: skillsList.length, importable: skillsImportList.length }) }}</span>
+                                </div>
+                                <div class="doctor-card-kv">
+                                    <span>{{ t('dashboard.kv.target') }}</span>
+                                    <span>{{ skillsTargetLabel }}</span>
+                                </div>
+                                <div class="doctor-card-kv" v-if="skillsRootPath">
+                                    <span>{{ t('dashboard.kv.root') }}</span>
+                                    <span>{{ skillsRootPath }}</span>
+                                </div>
+                            </button>
+                        </div>
+                        <div class="doctor-status-row">
+                            <div class="doctor-status-chip" :class="inspectorHealthTone">
+                                <span>{{ t('dashboard.status.health') }}</span>
+                                <strong>{{ inspectorHealthStatus }}</strong>
+                            </div>
+                            <div class="doctor-status-chip">
+                                <span>{{ t('dashboard.status.busy') }}</span>
+                                <strong>{{ inspectorBusyStatus }}</strong>
+                            </div>
+                            <div class="doctor-status-chip">
+                                <span>{{ t('dashboard.status.models') }}</span>
+                                <strong>{{ inspectorModelLoadStatus }}</strong>
+                            </div>
+                        </div>
+                        <div v-if="healthCheckResult" class="doctor-health-result" :class="healthCheckResult.ok ? 'ok' : 'error'">
+                            <div class="doctor-health-title">
+                                {{ healthCheckResult.ok ? t('dashboard.health.ok') : t('dashboard.health.fail') }}
+                                <span v-if="healthCheckResult.issues && healthCheckResult.issues.length">（{{ t('dashboard.health.issues', { count: healthCheckResult.issues.length }) }}）</span>
+                            </div>
+                        </div>
+                        <div v-if="healthCheckResult && healthCheckResult.report && healthCheckResult.report.issues && healthCheckResult.report.issues.length" class="doctor-action-list">
+                            <div v-for="issue in healthCheckResult.report.issues" :key="issue.id" class="doctor-action-card">
+                                <div class="doctor-action-head">
+                                    <div class="doctor-action-title">{{ issue.problem || (issue.problemKey ? t(issue.problemKey, issue.problemParams) : '') }}</div>
+                                    <div :class="['doctor-action-severity', issue.severity]">{{ issue.severityLabel || issue.severity }}</div>
+                                </div>
+                                <div class="doctor-action-impact">{{ issue.impact || (issue.impactKey ? t(issue.impactKey, issue.impactParams) : '') }}</div>
+                                <div v-if="issue.actions && issue.actions.length" class="doctor-action-buttons">
+                                    <template v-for="(action, index) in issue.actions" :key="issue.id + '-action-' + index">
+                                        <button
+                                            v-if="action.type === 'navigate'"
+                                            type="button"
+                                            class="btn-tool btn-tool-compact"
+                                            @click="switchMainTab(action.target)">
+                                            {{ action.label || (action.labelKey ? t(action.labelKey, action.labelParams) : t('dashboard.doctor.open')) }}
+                                        </button>
+                                        <button
+                                            v-else-if="action.type === 'run-check'"
+                                            type="button"
+                                            class="btn-tool btn-tool-compact"
+                                            @click="runHealthCheck({ doctor: true, forceRefresh: true })"
+                                            :disabled="healthCheckLoading">
+                                            {{ t('dashboard.doctor.runChecks') }}
+                                        </button>
+                                        <button
+                                            v-else-if="action.type === 'export'"
+                                            type="button"
+                                            class="btn-tool btn-tool-compact"
+                                            @click="healthCheckResult && healthCheckResult.report
+                                                ? (action.format === 'md'
+                                                    ? downloadTextFile('codexmate-doctor.md', String(healthCheckResult.markdown || ''), 'text/markdown;charset=utf-8')
+                                                    : downloadTextFile('codexmate-doctor.json', JSON.stringify(healthCheckResult.report, null, 2), 'application/json;charset=utf-8'))
+                                                : null">
+                                            {{ action.format === 'md' ? t('dashboard.doctor.export.md') : t('dashboard.doctor.export.json') }}
+                                        </button>
+                                    </template>
+                                </div>
+                            </div>
+                            <div class="doctor-action-footer">
+                                <button
+                                    type="button"
+                                    class="btn-tool btn-tool-compact"
+                                    @click="healthCheckResult && healthCheckResult.report
+                                        ? downloadTextFile('codexmate-doctor.json', JSON.stringify(healthCheckResult.report, null, 2), 'application/json;charset=utf-8')
+                                        : null">
+                                    {{ t('dashboard.doctor.export.json') }}
+                                </button>
+                                <button
+                                    type="button"
+                                    class="btn-tool btn-tool-compact"
+                                    @click="healthCheckResult && healthCheckResult.report
+                                        ? downloadTextFile('codexmate-doctor.md', String(healthCheckResult.markdown || ''), 'text/markdown;charset=utf-8')
+                                        : null">
+                                    {{ t('dashboard.doctor.export.md') }}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>

package/web-ui/partials/index/panel-docs.html

@@ -95,7 +95,7 @@
                                         </div>
                                     </div>
                                     <div class="docs-command-row">
-                                        <div class="docs-command-box" role="group" :aria-label="`${target.name} command`">
+                                        <div class="docs-command-box" role="group" :aria-label="t('docs.command.aria', { name: target.name })">
                                             <code class="install-command">{{ target.command }}</code>
                                             <button
                                                 type="button"

package/web-ui/partials/index/panel-market.html

@@ -17,6 +17,9 @@
                                 <button type="button" class="btn-tool btn-tool-compact" @click="openSkillsManager" :disabled="loading || !!initError || skillsMarketBusy">
                                     {{ t('market.openManager') }}
                                 </button>
+                                <button type="button" class="btn-tool btn-tool-compact" @click="switchMainTab('dashboard')" :disabled="loading || !!initError || skillsMarketBusy">
+                                    {{ t('dashboard.doctor.title') }}
+                                </button>
                             </div>
                         </div>
 

package/web-ui/partials/index/panel-orchestration.html

@@ -19,6 +19,9 @@
                                 <button type="button" class="btn-tool btn-tool-compact" @click="resetTaskOrchestrationDraft()" :disabled="taskOrchestration.running || taskOrchestration.queueAdding || taskOrchestration.planning">
                                     {{ t('orchestration.draft.reset') }}
                                 </button>
+                                <button type="button" class="btn-tool btn-tool-compact" @click="switchMainTab('dashboard')" :disabled="loading || !!initError">
+                                    {{ t('dashboard.doctor.title') }}
+                                </button>
                             </div>
                         </div>
                         <div v-if="taskOrchestrationQueueStats.running || taskOrchestrationQueueStats.queued || taskOrchestration.runs.length" class="task-hero-meta-strip" :aria-label="t('orchestration.summary.aria')">

package/web-ui/partials/index/panel-plugins.html

@@ -45,7 +45,7 @@
                             <div v-else-if="pluginsActiveId === 'prompt-templates'" class="plugins-panel">
                                 <div class="plugins-panel-head">
                                     <div class="plugins-panel-title">{{ t('plugins.promptTemplates.title') }}</div>
-                                    <div class="plugins-panel-subtitle">{{ t('plugins.promptTemplates.subtitle') }}</div>
+                                    <div v-if="pluginsActiveAttribution" class="plugins-panel-note">{{ pluginsActiveAttribution }}</div>
                                 </div>
 
                                 <div class="prompt-templates-modebar" role="tablist" :aria-label="t('plugins.promptTemplates.mode.aria')">
@@ -68,6 +68,9 @@
                                         <div class="prompt-compose-selected">
                                             <div class="prompt-compose-selected-title">{{ (promptComposerActiveTemplate && promptComposerActiveTemplate.name) ? promptComposerActiveTemplate.name : t('plugins.promptTemplates.compose.chooseTemplate') }}</div>
                                             <div class="prompt-compose-selected-meta">{{ (promptComposerActiveTemplate && promptComposerActiveTemplate.description) ? promptComposerActiveTemplate.description : t('plugins.promptTemplates.compose.chooseTemplateHint') }}</div>
+                                            <div v-if="promptComposerActiveTemplate && promptComposerActiveTemplate.isBuiltin && (promptComposerActiveTemplate.createdBy || (promptComposerActiveTemplate.maintainers && promptComposerActiveTemplate.maintainers.length))" class="plugins-panel-note">
+                                                {{ t('plugins.meta.attribution', { createdBy: promptComposerActiveTemplate.createdBy || '', maintainers: (promptComposerActiveTemplate.maintainers || []).join(', ') }) }}
+                                            </div>
                                         </div>
 
                                         <div class="prompt-compose-form">
@@ -78,7 +81,7 @@
                                                 @change="selectPromptComposerTemplate($event.target.value)"
                                                 :disabled="pluginsLoading || !promptTemplatesList.length">
                                                 <option v-for="tpl in promptTemplatesList" :key="'compose-tpl-' + tpl.id" :value="tpl.id">
-                                                    {{ tpl.name }}{{ tpl.isBuiltin ? '（内置）' : '' }}
+                                                    {{ tpl.name }}{{ tpl.isBuiltin ? t('plugins.promptTemplates.compose.builtinSuffix') : '' }}
                                                 </option>
                                             </select>
 
@@ -98,10 +101,10 @@
                                                 <div>
                                                     <div class="prompt-vars-title">{{ t('plugins.promptTemplates.vars.title') }}</div>
                                                     <div v-if="!promptComposerActiveTemplate.isBuiltin" class="plugins-panel-note">{{ t('plugins.promptTemplates.compose.varsHint') }}</div>
-                                                    <div v-if="promptComposerMissingVars.length" class="plugins-panel-note">未填 {{ promptComposerMissingVars.length }} 项</div>
+                                                    <div v-if="promptComposerMissingVars.length" class="plugins-panel-note">{{ t('plugins.promptTemplates.compose.missingCount', { count: promptComposerMissingVars.length }) }}</div>
                                                 </div>
                                                 <div class="prompt-editor-actions">
-                                                    <button v-if="promptComposerMissingVars.length" type="button" class="btn-mini" @click="focusPromptComposerFirstMissingVar" :disabled="pluginsLoading">跳到未填</button>
+                                                    <button v-if="promptComposerMissingVars.length" type="button" class="btn-mini" @click="focusPromptComposerFirstMissingVar" :disabled="pluginsLoading">{{ t('plugins.promptTemplates.compose.jumpToMissing') }}</button>
                                                     <button type="button" class="btn-mini" @click="resetPromptComposerVarValues" :disabled="pluginsLoading">{{ t('plugins.promptTemplates.vars.reset') }}</button>
                                                 </div>
                                             </div>
@@ -126,7 +129,7 @@
                                                 </div>
                                                 <button type="button" class="btn-mini" @click="copyPromptComposerRendered" :disabled="pluginsLoading || !promptComposerRendered">{{ t('plugins.promptTemplates.compose.copy') }}</button>
                                             </div>
-                                            <textarea class="form-input prompt-preview-textarea" :value="promptComposerRendered" rows="10" readonly spellcheck="false" aria-label="Rendered prompt (composer)"></textarea>
+                                            <textarea class="form-input prompt-preview-textarea" :value="promptComposerRendered" rows="10" readonly spellcheck="false" :aria-label="t('plugins.promptTemplates.compose.outputAria')"></textarea>
                                         </div>
                                     </div>
                                 </div>
@@ -138,7 +141,7 @@
                                                 class="form-input"
                                                 type="text"
                                                 v-model.trim="promptTemplatesKeyword"
-                                                aria-label="Search templates"
+                                                :aria-label="t('plugins.promptTemplates.manage.searchAria')"
                                                 :placeholder="t('plugins.promptTemplates.manage.searchPlaceholder')">
                                             <button type="button" class="btn-mini" @click="createPromptTemplate" :disabled="pluginsLoading">{{ t('plugins.promptTemplates.manage.create') }}</button>
                                             <button type="button" class="btn-mini" @click="exportPromptTemplates" :disabled="pluginsLoading || !promptTemplatesList.length">{{ t('plugins.promptTemplates.manage.export') }}</button>
@@ -173,7 +176,7 @@
                                         <template v-else>
                                             <div class="prompt-editor-head">
                                                 <div class="prompt-editor-title-row">
-                                                    <input class="form-input prompt-editor-name" type="text" v-model.trim="promptTemplateDraft.name" :disabled="promptTemplateDraft.isBuiltin" :placeholder="t('plugins.promptTemplates.editor.namePlaceholder')" aria-label="Template name">
+                                                    <input class="form-input prompt-editor-name" type="text" v-model.trim="promptTemplateDraft.name" :disabled="promptTemplateDraft.isBuiltin" :placeholder="t('plugins.promptTemplates.editor.namePlaceholder')" :aria-label="t('plugins.promptTemplates.editor.nameAria')">
                                                     <div v-if="!promptTemplateDraft.isBuiltin" class="prompt-editor-actions">
                                                         <button type="button" class="btn-mini" @click="duplicatePromptTemplate" :disabled="pluginsLoading">{{ t('plugins.promptTemplates.editor.duplicate') }}</button>
                                                         <button type="button" class="btn-mini delete" @click="deletePromptTemplate" :disabled="pluginsLoading">{{ t('plugins.promptTemplates.editor.delete') }}</button>
@@ -183,7 +186,10 @@
                                                 <div v-if="promptTemplateDraft.isBuiltin" class="plugins-panel-note">
                                                     {{ t('plugins.promptTemplates.editor.builtinReadOnly') }}
                                                 </div>
-                                                <input class="form-input" type="text" v-model.trim="promptTemplateDraft.description" :disabled="promptTemplateDraft.isBuiltin" :placeholder="t('plugins.promptTemplates.editor.descPlaceholder')" aria-label="Template description">
+                                                <div v-if="promptTemplateDraft.isBuiltin && (promptTemplateDraft.createdBy || (promptTemplateDraft.maintainers && promptTemplateDraft.maintainers.length))" class="plugins-panel-note">
+                                                    {{ t('plugins.meta.attribution', { createdBy: promptTemplateDraft.createdBy || '', maintainers: (promptTemplateDraft.maintainers || []).join(', ') }) }}
+                                                </div>
+                                                <input class="form-input" type="text" v-model.trim="promptTemplateDraft.description" :disabled="promptTemplateDraft.isBuiltin" :placeholder="t('plugins.promptTemplates.editor.descPlaceholder')" :aria-label="t('plugins.promptTemplates.editor.descAria')">
                                             </div>
 
                                             <div class="prompt-editor-body">
@@ -194,7 +200,7 @@
                                                     :disabled="promptTemplateDraft.isBuiltin"
                                                     rows="10"
                                                     spellcheck="false"
-                                                    aria-label="Template body"
+                                                    :aria-label="t('plugins.promptTemplates.editor.templateAria')"
                                                     :placeholder="t('plugins.promptTemplates.editor.templatePlaceholder')"></textarea>
 
                                                 <div class="prompt-vars-block">
@@ -226,7 +232,7 @@
                                                         </div>
                                                         <button type="button" class="btn-mini" @click="copyRenderedPrompt" :disabled="pluginsLoading">{{ t('plugins.promptTemplates.preview.copy') }}</button>
                                                     </div>
-                                                    <textarea class="form-input prompt-preview-textarea" :value="renderedPrompt" rows="10" readonly spellcheck="false" aria-label="Rendered prompt"></textarea>
+                                                    <textarea class="form-input prompt-preview-textarea" :value="renderedPrompt" rows="10" readonly spellcheck="false" :aria-label="t('plugins.promptTemplates.preview.outputAria')"></textarea>
                                                 </div>
                                             </div>
                                         </template>

package/web-ui/partials/index/panel-sessions.html

@@ -24,18 +24,23 @@
                 <div class="selector-section">
                     <div class="selector-header">
                         <span class="selector-title">{{ t('sessions.sourceTitle') }}</span>
-                        <div class="selector-actions">
+                        <div class="selector-actions sessions-header-actions">
                             <button class="btn-tool btn-tool-compact" @click="loadSessions({ forceRefresh: true })" :disabled="sessionsLoading">
                                 {{ sessionsLoading ? t('sessions.refreshing') : t('sessions.refresh') }}
                             </button>
+                            <button class="btn-tool btn-tool-compact" type="button" @click="switchMainTab('dashboard')">
+                                {{ t('dashboard.doctor.title') }}
+                            </button>
                         </div>
                     </div>
                     <div class="session-toolbar">
                         <div class="session-toolbar-group session-toolbar-primary">
-                            <select class="session-source-select" v-model="sessionFilterSource" @change="onSessionSourceChange" :disabled="sessionsLoading">
+                            <select class="session-source-select" v-model="sessionFilterSource" @change="onSessionSourceChange($event)" :disabled="sessionsLoading">
                                 <option value="all">{{ t('common.all') }}</option>
                                 <option value="codex">{{ t('sessions.source.codex') }}</option>
                                 <option value="claude">{{ t('sessions.source.claudeCode') }}</option>
+                                <option value="gemini">{{ t('sessions.source.gemini') }}</option>
+                                <option value="codebuddy">{{ t('sessions.source.codebuddy') }}</option>
                             </select>
                             <select
                                 class="session-path-select"
@@ -77,7 +82,7 @@
                                 <option value="90d">{{ t('sessions.time.90d') }}</option>
                             </select>
                             <button class="btn-tool btn-tool-compact" type="button" @click="copySessionsFilterShareUrl" :disabled="sessionsLoading">
-                                复制筛选链接
+                                {{ t('sessions.filters.copyLink') }}
                             </button>
                             <button class="btn-tool btn-tool-compact" type="button" @click="clearSessionFilters" :disabled="sessionsLoading">
                                 {{ t('common.resetFilters') }}

package/web-ui/partials/index/panel-settings.html

@@ -5,7 +5,7 @@
                     id="panel-settings"
                     role="tabpanel"
                     :aria-labelledby="'tab-settings'">
-                    <div class="config-subtabs settings-subtabs" role="tablist" aria-label="Settings tabs">
+                    <div class="config-subtabs settings-subtabs" role="tablist" :aria-label="t('settings.tabs.aria')">
                         <button
                             id="settings-tab-backup"
                             role="tab"

package/web-ui/partials/index/panel-usage.html

@@ -14,6 +14,7 @@
                             <button type="button" class="usage-range-btn" :class="{ active: sessionsUsageTimeRange === '30d' }" @click="setSessionsUsageTimeRange('30d')">{{ t('usage.range.30d') }}</button>
                             <button type="button" class="usage-range-btn" :class="{ active: sessionsUsageTimeRange === 'all' }" @click="setSessionsUsageTimeRange('all')">{{ t('usage.range.all') }}</button>
                             <button type="button" class="usage-range-btn" @click="loadSessionsUsage({ forceRefresh: true, range: sessionsUsageTimeRange })" :disabled="sessionsUsageLoading">{{ sessionsUsageLoading ? t('usage.refreshing') : t('usage.refresh') }}</button>
+                            <button type="button" class="usage-range-btn" @click="switchMainTab('dashboard')">{{ t('dashboard.doctor.title') }}</button>
                         </div>
                     </div>
 
@@ -41,6 +42,13 @@
                                 {{ t('usage.refreshOverlay') }}
                             </div>
 
+                            <div v-if="usageCurrentSessionStats" class="usage-current-session-bar">
+                                <span class="usage-current-session-label">{{ usageCurrentSessionStats.label }}</span>
+                                <span class="usage-current-session-item">{{ usageCurrentSessionStats.apiDurationText }} <strong>{{ usageCurrentSessionStats.apiDurationLabel }}</strong></span>
+                                <span class="usage-current-session-item">{{ usageCurrentSessionStats.totalDurationText }} <strong>{{ usageCurrentSessionStats.totalDurationLabel }}</strong></span>
+                                <span class="usage-current-session-item">{{ usageCurrentSessionStats.tokenText }} <strong>{{ usageCurrentSessionStats.tokenLabel }}</strong></span>
+                            </div>
+
                             <div class="usage-summary-grid">
                                 <div
                                     v-for="card in sessionUsageSummaryCards"
@@ -299,7 +307,7 @@
                                 </div>
                             </section>
 
-                            <section class="usage-card">
+                            <section class="usage-card usage-card-top-paths">
                                 <div class="usage-card-title">{{ t('usage.paths.title') }}</div>
                                 <div v-if="!sessionUsageCharts.topPaths.length" class="usage-list-value">{{ t('usage.paths.empty') }}</div>
                                 <div v-else class="usage-list usage-list-scroll usage-list-top-paths">

package/web-ui/styles/controls-forms.css

@@ -18,6 +18,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-wrap: nowrap;
+    gap: 10px;
     margin-bottom: 2px;
 }
 
@@ -81,11 +83,57 @@
     text-transform: none;
     letter-spacing: 0.03em;
     opacity: 0.85;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .selector-actions {
-    display: flex;
-    gap: var(--spacing-xs);
+    display: inline-grid;
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
+    column-gap: var(--spacing-xs);
+    align-items: center;
+    justify-content: end;
+    white-space: nowrap;
+    flex: 0 0 auto;
+}
+
+.selector-actions > .btn-tool,
+.selector-actions > .btn-tool-compact {
+    flex: 0 0 auto;
+}
+
+.sessions-header-actions {
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: nowrap !important;
+    align-items: center !important;
+    gap: 8px !important;
+    white-space: nowrap;
+}
+
+.sessions-header-actions > .btn-tool,
+.sessions-header-actions > .btn-tool-compact {
+    display: inline-flex !important;
+    width: auto !important;
+    margin: 0 !important;
+    white-space: nowrap;
+    flex: 0 0 auto;
+    height: 28px !important;
+    min-height: 28px !important;
+    padding: 0 10px !important;
+    line-height: 1 !important;
+    border-radius: 8px !important;
+    border: 1px solid var(--color-border-soft) !important;
+    background: rgba(255, 255, 255, 0.72) !important;
+    font-size: 12px !important;
+    font-weight: var(--font-weight-secondary) !important;
+    color: var(--color-text-secondary) !important;
+    box-shadow: none !important;
+    letter-spacing: -0.01em !important;
+    justify-content: center !important;
 }
 
 .health-report {
@@ -360,10 +408,16 @@
 }
 
 .selector-header .btn-tool-compact {
-    padding: 3px 7px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: auto;
+    min-width: 0;
+    padding: 2px 6px;
     font-size: 10px;
     line-height: 1;
     box-shadow: none;
-    min-height: 24px;
+    height: 22px;
+    min-height: 22px;
     white-space: nowrap;
 }