diff --git a/tests/unit/config-tabs-ui.test.mjs b/tests/unit/config-tabs-ui.test.mjs
index 6886d3cd..b1529756 100644
--- a/tests/unit/config-tabs-ui.test.mjs
+++ b/tests/unit/config-tabs-ui.test.mjs
@@ -64,7 +64,7 @@ test('config template keeps expected config tabs in top and side navigation', ()
     assert.match(html, /configTemplateDiffConfirmEnabled/);
     assert.match(html, /sessionTrashCount/);
     assert.match(html, /v-if="taskOrchestrationTabEnabled" class="top-tab"[\s\S]*id="tab-orchestration"/);
-    assert.match(html, /v-if="taskOrchestrationTabEnabled" class="side-section" role="navigation" aria-label="任务编排"/);
+    assert.match(html, /v-if="taskOrchestrationTabEnabled" class="side-section" role="navigation" aria-label="Orchestration"/);
     assert.match(html, /v-if="taskOrchestrationTabEnabled"[\s\S]*id="panel-orchestration"/);
     assert.match(html, /taskOrchestrationTabEnabled && mainTab === 'orchestration'/);
     assert.match(bundledScript, /taskOrchestrationTabEnabled:\s*false/);
@@ -180,12 +180,12 @@ test('config template keeps expected config tabs in top and side navigation', ()
     assert.match(html, /class="market-target-switch market-target-switch-compact" role="group" aria-label="选择 Skills 管理目标"/);
     assert.doesNotMatch(html, /class="market-target-switch" role="tablist" aria-label="选择 Skills 安装目标"/);
     assert.doesNotMatch(html, /class="market-target-switch market-target-switch-compact" role="tablist" aria-label="选择 Skills 管理目标"/);
-    assert.match(html, /class="side-section" role="navigation" aria-label="配置管理"/);
+    assert.match(html, /class="side-section" role="navigation" aria-label="Config"/);
     assert.match(html, /class="side-section" role="navigation" aria-label="会话管理"/);
-    assert.match(html, /class="side-section" role="navigation" aria-label="任务编排"/);
-    assert.match(html, /class="side-section" role="navigation" aria-label="技能市场"/);
-    assert.match(html, /class="side-section" role="navigation" aria-label="文档"/);
-    assert.match(html, /class="side-section" role="navigation" aria-label="设置"/);
+    assert.match(html, /class="side-section" role="navigation" aria-label="Orchestration"/);
+    assert.match(html, /class="side-section" role="navigation" aria-label="Skills"/);
+    assert.match(html, /class="side-section" role="navigation" aria-label="Docs"/);
+    assert.match(html, /class="side-section" role="navigation" aria-label="Settings"/);
     assert.doesNotMatch(sideRail, /role="tablist"/);
     assert.doesNotMatch(sideRail, /role="tab"/);
     assert.match(sideRail, /id="side-tab-config-codex"[\s\S]*:aria-current="mainTab === 'config' && configMode === 'codex' \? 'page' : null"/);
@@ -219,18 +219,18 @@ test('config template keeps expected config tabs in top and side navigation', ()
     assert.match(html, /<div[\s\S]*v-show="settingsTab === 'backup'"[\s\S]*id="settings-panel-backup"[\s\S]*aria-labelledby="settings-tab-backup">/);
     assert.match(html, /<div[\s\S]*v-show="settingsTab === 'trash'"[\s\S]*id="settings-panel-trash"[\s\S]*aria-labelledby="settings-tab-trash">/);
     assert.match(html, /<div[\s\S]*v-show="settingsTab === 'device'"[\s\S]*id="settings-panel-device"[\s\S]*aria-labelledby="settings-tab-device">/);
-    assert.match(html, /id="settings-panel-backup"[\s\S]*?<span class="selector-title">分享命令前缀<\/span>/);
-    assert.match(html, /<select class="model-select" :value="shareCommandPrefix" @change="setShareCommandPrefix\(\$event\.target\.value\)">/);
+    assert.match(html, /id="settings-panel-backup"[\s\S]*?<div class="settings-card-title">分享命令前缀<\/div>/);
+    assert.match(html, /id="settings-share-prefix"[\s\S]*class="model-select"[\s\S]*:value="shareCommandPrefix"[\s\S]*@change="setShareCommandPrefix\(\$event\.target\.value\)"/);
     assert.match(html, /<option value="npm start">npm start<\/option>/);
     assert.match(html, /<option value="codexmate">codexmate<\/option>/);
-    assert.match(html, /id="settings-panel-device"[\s\S]*?<span class="selector-title">配置重置<\/span>/);
+    assert.match(html, /id="settings-panel-device"[\s\S]*?<div class="settings-card-title">配置重置<\/div>/);
     assert.match(html, /id="settings-panel-device"[\s\S]*?@click="resetConfig"/);
     assert.doesNotMatch(
         html.match(/id="panel-config-provider"[\s\S]*?<\/template>/)?.[0] || '',
         /<span class="selector-title">配置重置<\/span>/
     );
-    assert.match(html, /class="settings-tab-actions trash-header-actions"/);
-    assert.match(html, /<span class="selector-title">会话删除行为<\/span>/);
+    assert.match(html, /class="settings-card-actions"/);
+    assert.match(html, /<div class="settings-card-title">会话删除行为<\/div>/);
     assert.match(html, /<input type="checkbox" :checked="sessionTrashEnabled" @change="setSessionTrashEnabled\(\$event\.target\.checked\)">/);
     assert.match(html, /默认开启。关闭后，会话浏览里的删除会直接永久删除，不再进入回收站。/);
     assert.match(html, /<button class="btn-tool btn-tool-compact" @click="loadSessionTrash\(\{ forceRefresh: true \}\)"/);
diff --git a/tests/unit/web-ui-behavior-parity.test.mjs b/tests/unit/web-ui-behavior-parity.test.mjs
index 4a6b4349..2bee471f 100644
--- a/tests/unit/web-ui-behavior-parity.test.mjs
+++ b/tests/unit/web-ui-behavior-parity.test.mjs
@@ -497,6 +497,8 @@ test('captured bundled app skeleton only exposes expected data key drift versus
         'mainTabTitle',
         'mainTabSubtitle',
         'configTemplateDiffHasChanges',
+        'sessionUsageDaily',
+        'sessionUsageDailyTableRows',
         'taskOrchestrationSelectedRun',
         'taskOrchestrationSelectedRunNodes',
         'taskOrchestrationQueueStats',
diff --git a/web-ui/modules/app.computed.session.mjs b/web-ui/modules/app.computed.session.mjs
index 575403a0..35cbe3cb 100644
--- a/web-ui/modules/app.computed.session.mjs
+++ b/web-ui/modules/app.computed.session.mjs
@@ -229,39 +229,21 @@ function estimateUsageCostSummary(sessions, providersList, currentProvider) {
             continue;
         }
         supportedSessions += 1;
-        const inputTokens = Number.isFinite(Number(session.inputTokens)) ? Math.max(0, Math.floor(Number(session.inputTokens))) : null;
-        const cachedInputTokens = Number.isFinite(Number(session.cachedInputTokens)) ? Math.max(0, Math.floor(Number(session.cachedInputTokens))) : 0;
-        const outputTokens = Number.isFinite(Number(session.outputTokens)) ? Math.max(0, Math.floor(Number(session.outputTokens))) : null;
-        const reasoningOutputTokens = Number.isFinite(Number(session.reasoningOutputTokens)) ? Math.max(0, Math.floor(Number(session.reasoningOutputTokens))) : 0;
-        const billableInputTokens = Math.max(0, (inputTokens || 0) - cachedInputTokens);
-        const fallbackSessionTokens = billableInputTokens + cachedInputTokens + (outputTokens || 0) + reasoningOutputTokens;
-        const totalSessionTokens = Number.isFinite(Number(session.totalTokens))
-            ? Math.max(0, Math.floor(Number(session.totalTokens)))
-            : fallbackSessionTokens;
-        totalTokens += totalSessionTokens;
-        const pricing = resolveUsagePricingForSession(session, pricingIndex, currentProvider);
-        if (!pricing) {
+        const cost = estimateUsageCostForSession(session, pricingIndex, currentProvider);
+        totalTokens += cost.totalSessionTokens;
+        if (!cost.pricing) {
             missingPricingSessions += 1;
             continue;
         }
-        if (inputTokens === null && outputTokens === null && reasoningOutputTokens === 0) {
+        if (!cost.hasTokenBreakdown) {
             missingTokenSessions += 1;
             continue;
         }
-        const estimatedUsd = (
-            ((pricing.input || 0) * billableInputTokens)
-            + ((pricing.cacheRead || 0) * cachedInputTokens)
-            + (((pricing.reasoningOutput ?? pricing.output) || 0) * reasoningOutputTokens)
-            + ((pricing.output || 0) * (outputTokens || 0))
-        ) / 1000000;
-        totalCostUsd += estimatedUsd;
+        totalCostUsd += cost.estimatedUsd;
         estimatedSessions += 1;
-        estimatedTokens += totalSessionTokens;
-        if (pricing.source === 'public-catalog') {
-            catalogSessions += 1;
-        } else {
-            configuredSessions += 1;
-        }
+        estimatedTokens += cost.totalSessionTokens;
+        if (cost.pricing.source === 'public-catalog') catalogSessions += 1;
+        else configuredSessions += 1;
     }
 
     const coveragePercent = totalTokens > 0
@@ -283,6 +265,34 @@ function estimateUsageCostSummary(sessions, providersList, currentProvider) {
     };
 }
 
+function estimateUsageCostForSession(session, pricingIndex, currentProvider) {
+    const inputTokens = Number.isFinite(Number(session.inputTokens)) ? Math.max(0, Math.floor(Number(session.inputTokens))) : null;
+    const cachedInputTokens = Number.isFinite(Number(session.cachedInputTokens)) ? Math.max(0, Math.floor(Number(session.cachedInputTokens))) : 0;
+    const outputTokens = Number.isFinite(Number(session.outputTokens)) ? Math.max(0, Math.floor(Number(session.outputTokens))) : null;
+    const reasoningOutputTokens = Number.isFinite(Number(session.reasoningOutputTokens)) ? Math.max(0, Math.floor(Number(session.reasoningOutputTokens))) : 0;
+    const billableInputTokens = Math.max(0, (inputTokens || 0) - cachedInputTokens);
+    const fallbackSessionTokens = billableInputTokens + cachedInputTokens + (outputTokens || 0) + reasoningOutputTokens;
+    const totalSessionTokens = Number.isFinite(Number(session.totalTokens))
+        ? Math.max(0, Math.floor(Number(session.totalTokens)))
+        : fallbackSessionTokens;
+    const pricing = resolveUsagePricingForSession(session, pricingIndex, currentProvider);
+    const hasTokenBreakdown = !(inputTokens === null && outputTokens === null && reasoningOutputTokens === 0);
+    const estimatedUsd = pricing && hasTokenBreakdown
+        ? (
+            ((pricing.input || 0) * billableInputTokens)
+            + ((pricing.cacheRead || 0) * cachedInputTokens)
+            + (((pricing.reasoningOutput ?? pricing.output) || 0) * reasoningOutputTokens)
+            + ((pricing.output || 0) * (outputTokens || 0))
+        ) / 1000000
+        : 0;
+    return {
+        pricing,
+        hasTokenBreakdown,
+        totalSessionTokens,
+        estimatedUsd
+    };
+}
+
 export function createSessionComputed() {
     return {
         isSessionQueryEnabled() {
@@ -482,6 +492,85 @@ export function createSessionComputed() {
                 }
             ];
         },
+
+        sessionUsageDaily() {
+            const baseBuckets = this.sessionUsageCharts && Array.isArray(this.sessionUsageCharts.buckets)
+                ? this.sessionUsageCharts.buckets
+                : [];
+            const sessions = this.sessionUsageCharts && Array.isArray(this.sessionUsageCharts.filteredSessions)
+                ? this.sessionUsageCharts.filteredSessions
+                : this.sessionsUsageList;
+            const pricingIndex = buildUsagePricingIndex(this.providersList);
+            const byDay = new Map();
+
+            for (const bucket of baseBuckets) {
+                if (!bucket || !bucket.key) continue;
+                byDay.set(bucket.key, {
+                    key: bucket.key,
+                    label: bucket.label || bucket.key.slice(5),
+                    sessionCount: 0,
+                    messageCount: 0,
+                    tokenTotal: 0,
+                    estimatedCostUsd: 0,
+                    estimatedSessions: 0,
+                    hasCostEstimate: false
+                });
+            }
+
+            for (const session of (Array.isArray(sessions) ? sessions : [])) {
+                if (!session || typeof session !== 'object') continue;
+                const updatedAtMs = Date.parse(session.updatedAt || '');
+                if (!Number.isFinite(updatedAtMs)) continue;
+                const dayKey = new Date(updatedAtMs).toISOString().slice(0, 10);
+                const row = byDay.get(dayKey);
+                if (!row) continue;
+
+                const messageCount = Number.isFinite(Number(session.messageCount))
+                    ? Math.max(0, Math.floor(Number(session.messageCount)))
+                    : 0;
+                const tokenTotal = Number.isFinite(Number(session.totalTokens))
+                    ? Math.max(0, Math.floor(Number(session.totalTokens)))
+                    : 0;
+                row.sessionCount += 1;
+                row.messageCount += messageCount;
+                row.tokenTotal += tokenTotal;
+
+                if (shouldEstimateUsageCostForSession(session)) {
+                    const cost = estimateUsageCostForSession(session, pricingIndex, this.currentProvider);
+                    if (cost.pricing && cost.hasTokenBreakdown) {
+                        row.estimatedCostUsd += cost.estimatedUsd;
+                        row.estimatedSessions += 1;
+                        row.hasCostEstimate = true;
+                    }
+                }
+            }
+
+            const rows = [...byDay.values()].sort((a, b) => a.key.localeCompare(b.key, 'en-US'));
+            const maxTokens = rows.reduce((max, item) => Math.max(max, item.tokenTotal), 0);
+            const maxCost = rows.reduce((max, item) => Math.max(max, item.estimatedCostUsd), 0);
+
+            return {
+                rows: rows.map((row) => ({
+                    ...row,
+                    tokenLabel: formatCompactUsageSummaryNumber(row.tokenTotal),
+                    tokenTitle: formatUsageSummaryNumber(row.tokenTotal),
+                    tokenPercent: maxTokens > 0 ? Math.round((row.tokenTotal / maxTokens) * 1000) / 10 : 0,
+                    costLabel: row.hasCostEstimate ? formatUsageEstimatedCost(row.estimatedCostUsd) : '暂无',
+                    costTitle: row.hasCostEstimate ? formatUsageEstimatedCost(row.estimatedCostUsd, { precise: true }) : '暂无',
+                    costPercent: maxCost > 0 ? Math.round((row.estimatedCostUsd / maxCost) * 1000) / 10 : 0
+                })),
+                maxTokens,
+                maxCost
+            };
+        },
+
+        sessionUsageDailyTableRows() {
+            const daily = this.sessionUsageDaily && typeof this.sessionUsageDaily === 'object'
+                ? this.sessionUsageDaily
+                : null;
+            return daily && Array.isArray(daily.rows) ? daily.rows : [];
+        },
+
         visibleSessionTrashItems() {
             const items = Array.isArray(this.sessionTrashItems) ? this.sessionTrashItems : [];
             const visibleCount = Number(this.sessionTrashVisibleCount);
diff --git a/web-ui/partials/index/layout-header.html b/web-ui/partials/index/layout-header.html
index 328253be..4b4d7439 100644
--- a/web-ui/partials/index/layout-header.html
+++ b/web-ui/partials/index/layout-header.html
@@ -1,5 +1,5 @@
     <div id="app" class="container" v-cloak>
-        <div v-if="!sessionStandalone" class="top-tabs" role="tablist" aria-label="主导航">
+        <div v-if="!sessionStandalone" class="top-tabs" role="tablist" aria-label="Navigation">
             <button class="top-tab"
                 id="tab-config-codex"
                 role="tab"
@@ -42,7 +42,7 @@
                 aria-controls="panel-sessions"
                 :class="{ active: isMainTabNavActive('sessions') }"
                 @pointerdown="onMainTabPointerDown('sessions', $event)"
-                @click="onMainTabClick('sessions', $event)">会话</button>
+                @click="onMainTabClick('sessions', $event)">Sessions</button>
             <button class="top-tab"
                 id="tab-usage"
                 role="tab"
@@ -62,7 +62,7 @@
                 aria-controls="panel-orchestration"
                 :class="{ active: isMainTabNavActive('orchestration') }"
                 @pointerdown="onMainTabPointerDown('orchestration', $event)"
-                @click="onMainTabClick('orchestration', $event)">任务编排</button>
+                @click="onMainTabClick('orchestration', $event)">Orchestration</button>
             <button class="top-tab"
                 id="tab-market"
                 role="tab"
@@ -82,7 +82,7 @@
                 aria-controls="panel-docs"
                 :class="{ active: isMainTabNavActive('docs') }"
                 @pointerdown="onMainTabPointerDown('docs', $event)"
-                @click="onMainTabClick('docs', $event)">文档</button>
+                @click="onMainTabClick('docs', $event)">Docs</button>
             <button class="top-tab"
                 id="tab-settings"
                 role="tab"
@@ -92,7 +92,7 @@
                 aria-controls="panel-settings"
                 :class="{ active: isMainTabNavActive('settings') }"
                 @pointerdown="onMainTabPointerDown('settings', $event)"
-                @click="onMainTabClick('settings', $event)">设置</button>
+                @click="onMainTabClick('settings', $event)">Settings</button>
         </div>
 
         <div :class="['app-shell', { standalone: sessionStandalone }]">
@@ -105,12 +105,12 @@
                             <div class="brand-title">Codex Mate</div>
                         </div>
                     </div>
-                    <div class="brand-subtitle">本地配置与会话工作台</div>
+                    <div class="brand-subtitle">Local config & sessions workspace</div>
                 </div>
 
                 <div class="side-rail-nav">
-                <div class="side-section" role="navigation" aria-label="配置管理">
-                    <div class="side-section-title">配置</div>
+                <div class="side-section" role="navigation" aria-label="Config">
+                    <div class="side-section-title">Config</div>
                     <button
                         id="side-tab-config-codex"
                         data-main-tab="config"
@@ -156,7 +156,7 @@
                 </div>
 
                 <div class="side-section" role="navigation" aria-label="会话管理">
-                    <div class="side-section-title">会话</div>
+                    <div class="side-section-title">Sessions</div>
                     <button
                         id="side-tab-sessions"
                         data-main-tab="sessions"
@@ -164,9 +164,9 @@
                         :class="['side-item', { active: isMainTabNavActive('sessions') }]"
                         @pointerdown="onMainTabPointerDown('sessions', $event)"
                         @click="onMainTabClick('sessions', $event)">
-                        <div class="side-item-title">会话浏览</div>
+                        <div class="side-item-title">Session Browser</div>
                         <div class="side-item-meta">
-                            <span>浏览 / 导出 / 清理</span>
+                            <span>Browse / Export / Cleanup</span>
                             <span>来源：{{ sessionFilterSource === 'all' ? '全部' : (sessionFilterSource === 'codex' ? 'Codex' : 'Claude') }}</span>
                         </div>
                     </button>
@@ -177,16 +177,16 @@
                         :class="['side-item', { active: isMainTabNavActive('usage') }]"
                         @pointerdown="onMainTabPointerDown('usage', $event)"
                         @click="onMainTabClick('usage', $event)">
-                        <div class="side-item-title">Usage 趋势</div>
+                        <div class="side-item-title">Usage</div>
                         <div class="side-item-meta">
-                            <span>本地统计 / 趋势</span>
+                            <span>Local stats / Trends</span>
                             <span>范围：{{ sessionsUsageTimeRange === 'all' ? '全部' : (sessionsUsageTimeRange === '30d' ? '近 30 天' : '近 7 天') }}</span>
                         </div>
                     </button>
                 </div>
 
-                <div v-if="taskOrchestrationTabEnabled" class="side-section" role="navigation" aria-label="任务编排">
-                    <div class="side-section-title">任务</div>
+                <div v-if="taskOrchestrationTabEnabled" class="side-section" role="navigation" aria-label="Orchestration">
+                    <div class="side-section-title">Tasks</div>
                     <button
                         id="side-tab-orchestration"
                         data-main-tab="orchestration"
@@ -194,16 +194,16 @@
                         :class="['side-item', { active: isMainTabNavActive('orchestration') }]"
                         @pointerdown="onMainTabPointerDown('orchestration', $event)"
                         @click="onMainTabClick('orchestration', $event)">
-                        <div class="side-item-title">任务编排</div>
+                        <div class="side-item-title">Orchestration</div>
                         <div class="side-item-meta">
-                            <span>计划 / 队列 / 运行记录</span>
+                            <span>Plan / Queue / Runs</span>
                             <span>队列 {{ taskOrchestrationQueueStats.running }} 运行中 · {{ taskOrchestrationQueueStats.queued }} 等待中</span>
                         </div>
                     </button>
                 </div>
 
-                <div class="side-section" role="navigation" aria-label="技能市场">
-                    <div class="side-section-title">扩展</div>
+                <div class="side-section" role="navigation" aria-label="Skills">
+                    <div class="side-section-title">Skills</div>
                     <button
                         id="side-tab-market"
                         data-main-tab="market"
@@ -211,7 +211,7 @@
                         :class="['side-item', { active: isMainTabNavActive('market') }]"
                         @pointerdown="onMainTabPointerDown('market', $event)"
                         @click="onMainTabClick('market', $event)">
-                        <div class="side-item-title">Skills 市场</div>
+                        <div class="side-item-title">Skills</div>
                         <div class="side-item-meta">
                             <span>{{ skillsTargetLabel }} / 本地 Skills</span>
                             <span>已装 {{ skillsList.length }} · 可导入 {{ skillsImportList.length }}</span>
@@ -219,8 +219,8 @@
                     </button>
                 </div>
 
-                <div class="side-section" role="navigation" aria-label="文档">
-                    <div class="side-section-title">文档</div>
+                <div class="side-section" role="navigation" aria-label="Docs">
+                    <div class="side-section-title">Docs</div>
                     <button
                         id="side-tab-docs"
                         data-main-tab="docs"
@@ -228,16 +228,16 @@
                         :class="['side-item', { active: isMainTabNavActive('docs') }]"
                         @pointerdown="onMainTabPointerDown('docs', $event)"
                         @click="onMainTabClick('docs', $event)">
-                        <div class="side-item-title">CLI 安装</div>
+                        <div class="side-item-title">CLI Install</div>
                         <div class="side-item-meta">
-                            <span>安装 / 升级 / 卸载</span>
-                            <span>{{ String(installPackageManager || 'npm').toUpperCase() }} · {{ installCommandAction === 'update' ? '升级' : (installCommandAction === 'uninstall' ? '卸载' : '安装') }}</span>
+                            <span>Install / Update / Uninstall</span>
+                            <span>{{ String(installPackageManager || 'npm').toUpperCase() }} · {{ installCommandAction === 'update' ? 'Update' : (installCommandAction === 'uninstall' ? 'Uninstall' : 'Install') }}</span>
                         </div>
                     </button>
                 </div>
 
-                <div class="side-section" role="navigation" aria-label="设置">
-                    <div class="side-section-title">系统</div>
+                <div class="side-section" role="navigation" aria-label="Settings">
+                    <div class="side-section-title">System</div>
                     <button
                         id="side-tab-settings"
                         data-main-tab="settings"
@@ -245,9 +245,9 @@
                         :class="['side-item', { active: isMainTabNavActive('settings') }]"
                         @pointerdown="onMainTabPointerDown('settings', $event)"
                         @click="onMainTabClick('settings', $event)">
-                        <div class="side-item-title">运行设置</div>
+                        <div class="side-item-title">Runtime Settings</div>
                         <div class="side-item-meta">
-                            <span>数据管理 / 下载</span>
+                            <span>Data / Backup</span>
                         </div>
                     </button>
                 </div>
diff --git a/web-ui/partials/index/modal-skills.html b/web-ui/partials/index/modal-skills.html
index 5991bf9d..b9a558fa 100644
--- a/web-ui/partials/index/modal-skills.html
+++ b/web-ui/partials/index/modal-skills.html
@@ -58,121 +58,137 @@
                     </div>
                 </div>
 
-                <div class="skills-panel">
-                    <div class="skills-panel-header">
-                        <div class="skills-panel-title-wrap">
-                            <div class="skills-panel-title">本地 Skills</div>
-                            <div class="skills-panel-note">可检索、筛选与批量删除。</div>
-                        </div>
-                        <button
-                            class="btn-mini"
-                            @click="resetSkillsFilters"
-                            :disabled="skillsLoading || skillsDeleting || !skillsFilterDirty">
-                            重置筛选
-                        </button>
-                    </div>
+                <div class="skills-manager-grid" aria-label="Skills 管理面板">
+                    <div class="skills-manager-col skills-manager-left">
+                        <div class="skills-panel">
+                            <div class="skills-panel-header">
+                                <div class="skills-panel-title-wrap">
+                                    <div class="skills-panel-title">本地 Skills</div>
+                                    <div class="skills-panel-note">可检索、筛选与批量删除。</div>
+                                </div>
+                                <button
+                                    class="btn-mini"
+                                    @click="resetSkillsFilters"
+                                    :disabled="skillsLoading || skillsDeleting || !skillsFilterDirty">
+                                    重置筛选
+                                </button>
+                            </div>
 
-                    <div class="skills-filter-row">
-                        <input
-                            class="form-input"
-                            type="text"
-                            v-model.trim="skillsKeyword"
-                            aria-label="按名称或描述筛选 skill"
-                            placeholder="按目录名/显示名/描述检索">
-                        <select class="form-select skills-status-select" v-model="skillsStatusFilter" aria-label="按 SKILL.md 状态筛选 skill">
-                            <option value="all">全部状态</option>
-                            <option value="with-skill-file">仅含 SKILL.md</option>
-                            <option value="missing-skill-file">仅缺少 SKILL.md</option>
-                        </select>
-                    </div>
+                            <div class="skills-filter-row">
+                                <input
+                                    class="form-input"
+                                    type="text"
+                                    v-model.trim="skillsKeyword"
+                                    aria-label="按名称或描述筛选 skill"
+                                    placeholder="按目录名/显示名/描述检索">
+                                <select class="form-select skills-status-select" v-model="skillsStatusFilter" aria-label="按 SKILL.md 状态筛选 skill">
+                                    <option value="all">全部状态</option>
+                                    <option value="with-skill-file">仅含 SKILL.md</option>
+                                    <option value="missing-skill-file">仅缺少 SKILL.md</option>
+                                </select>
+                            </div>
 
-                    <div class="skill-toolbar">
-                        <label class="skill-select-all">
-                            <input type="checkbox" :checked="skillsAllSelected" @change="toggleAllSkillsSelection" :disabled="skillsLoading || skillsDeleting || skillsSelectableNames.length === 0">
-                            <span>{{ skillsAllSelected ? '取消全选' : '全选' }}</span>
-                        </label>
-                        <span class="skill-toolbar-count">已选 {{ skillsSelectedCount }}（筛选命中 {{ filteredSkillsList.length }} / {{ skillsList.length }}，筛选内已选 {{ skillsVisibleSelectedCount }}）</span>
-                    </div>
+                            <div class="skill-toolbar">
+                                <label class="skill-select-all">
+                                    <input type="checkbox" :checked="skillsAllSelected" @change="toggleAllSkillsSelection" :disabled="skillsLoading || skillsDeleting || skillsSelectableNames.length === 0">
+                                    <span>{{ skillsAllSelected ? '取消全选' : '全选' }}</span>
+                                </label>
+                                <span class="skill-toolbar-count">已选 {{ skillsSelectedCount }}（筛选命中 {{ filteredSkillsList.length }} / {{ skillsList.length }}，筛选内已选 {{ skillsVisibleSelectedCount }}）</span>
+                            </div>
 
-                    <div v-if="skillsList.length === 0" class="skills-empty-state">暂无可管理的 skill。</div>
-                    <div v-else-if="filteredSkillsList.length === 0" class="skills-empty-state">当前筛选条件下没有匹配的 skill。</div>
-                    <div v-else class="skill-list">
-                        <label
-                            class="skill-item"
-                            :class="{ selected: skillsSelectedNames.includes(skill.name) }"
-                            v-for="skill in filteredSkillsList"
-                            :key="'skill-' + skill.name">
-                            <input type="checkbox" v-model="skillsSelectedNames" :value="skill.name" :disabled="skillsDeleting">
-                            <div class="skill-item-main">
-                                <div class="skill-item-title">{{ skill.displayName || skill.name }}</div>
-                                <div v-if="skill.description" class="skill-item-description">{{ skill.description }}</div>
-                                <div class="skill-item-meta">
-                                    <span class="skill-item-path" :title="skill.path">{{ skill.path }}</span>
-                                    <span :class="['pill', skill.hasSkillFile ? 'configured' : 'empty']">
-                                        {{ skill.hasSkillFile ? '含 SKILL.md' : '缺少 SKILL.md' }}
-                                    </span>
-                                    <span class="pill source">{{ skill.sourceType === 'symlink' ? '符号链接' : '目录' }}</span>
-                                </div>
+                            <div v-if="skillsList.length === 0" class="skills-empty-state">暂无可管理的 skill。</div>
+                            <div v-else-if="filteredSkillsList.length === 0" class="skills-empty-state">当前筛选条件下没有匹配的 skill。</div>
+                            <div v-else class="skill-list">
+                                <label
+                                    class="skill-item"
+                                    :class="{ selected: skillsSelectedNames.includes(skill.name) }"
+                                    v-for="skill in filteredSkillsList"
+                                    :key="'skill-' + skill.name">
+                                    <input type="checkbox" v-model="skillsSelectedNames" :value="skill.name" :disabled="skillsDeleting">
+                                    <div class="skill-item-main">
+                                        <div class="skill-item-title">{{ skill.displayName || skill.name }}</div>
+                                        <div v-if="skill.description" class="skill-item-description">{{ skill.description }}</div>
+                                        <div class="skill-item-meta">
+                                            <span class="skill-item-path" :title="skill.path">{{ skill.path }}</span>
+                                            <span :class="['pill', skill.hasSkillFile ? 'configured' : 'empty']">
+                                                {{ skill.hasSkillFile ? '含 SKILL.md' : '缺少 SKILL.md' }}
+                                            </span>
+                                            <span class="pill source">{{ skill.sourceType === 'symlink' ? '符号链接' : '目录' }}</span>
+                                        </div>
+                                    </div>
+                                </label>
                             </div>
-                        </label>
+                        </div>
                     </div>
-                </div>
 
-                <div class="skills-panel skills-import-block">
-                    <div class="skills-panel-header">
-                        <div class="skills-panel-title-wrap">
-                            <div class="skills-import-title">跨应用导入</div>
-                            <div class="skills-panel-note">扫描并导入到当前 {{ skillsTargetLabel }}。</div>
+                    <div class="skills-manager-col skills-manager-right">
+                        <div class="skills-panel skills-import-block">
+                            <div class="skills-panel-header">
+                                <div class="skills-panel-title-wrap">
+                                    <div class="skills-import-title">跨应用导入</div>
+                                    <div class="skills-panel-note">扫描并导入到当前 {{ skillsTargetLabel }}。</div>
+                                </div>
+                                <button class="btn-mini" @click="scanImportableSkills" :disabled="skillsLoading || skillsDeleting || skillsScanningImports || skillsImporting || skillsZipImporting || skillsExporting">
+                                    {{ skillsScanningImports ? '扫描中...' : '扫描可导入' }}
+                                </button>
+                            </div>
+                            <div class="skill-toolbar">
+                                <label class="skill-select-all">
+                                    <input type="checkbox" :checked="skillsImportAllSelected" @change="toggleAllSkillsImportSelection" :disabled="skillsScanningImports || skillsImporting || skillsImportSelectableKeys.length === 0">
+                                    <span>{{ skillsImportAllSelected ? '取消全选' : '全选' }}</span>
+                                </label>
+                                <span class="skill-toolbar-count">已选 {{ skillsImportSelectedCount }} / {{ skillsImportSelectableKeys.length }}，含 SKILL.md {{ skillsImportConfiguredCount }}，缺失 {{ skillsImportMissingSkillFileCount }}</span>
+                            </div>
+                            <div v-if="skillsImportList.length === 0" class="skills-empty-state skills-import-empty">暂无可导入 skill，点击“扫描可导入”。</div>
+                            <div v-else class="skill-list skills-import-list">
+                                <label
+                                    class="skill-item"
+                                    :class="{ selected: skillsImportSelectedKeys.includes(buildSkillImportKey(skill)) }"
+                                    v-for="skill in skillsImportList"
+                                    :key="'import-skill-' + buildSkillImportKey(skill)">
+                                    <input type="checkbox" v-model="skillsImportSelectedKeys" :value="buildSkillImportKey(skill)" :disabled="skillsImporting">
+                                    <div class="skill-item-main">
+                                        <div class="skill-item-title">{{ skill.displayName || skill.name }}</div>
+                                        <div v-if="skill.description" class="skill-item-description">{{ skill.description }}</div>
+                                        <div class="skill-item-meta">
+                                            <span class="skill-item-path" :title="skill.sourcePath">{{ skill.sourcePath }}</span>
+                                            <span class="pill source">{{ skill.sourceLabel }}</span>
+                                            <span :class="['pill', skill.hasSkillFile ? 'configured' : 'empty']">
+                                                {{ skill.hasSkillFile ? '含 SKILL.md' : '缺少 SKILL.md' }}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </label>
+                            </div>
                         </div>
-                        <button class="btn-mini" @click="scanImportableSkills" :disabled="skillsLoading || skillsDeleting || skillsScanningImports || skillsImporting || skillsZipImporting || skillsExporting">
-                            {{ skillsScanningImports ? '扫描中...' : '扫描可导入' }}
-                        </button>
-                    </div>
-                    <div class="skill-toolbar">
-                        <label class="skill-select-all">
-                            <input type="checkbox" :checked="skillsImportAllSelected" @change="toggleAllSkillsImportSelection" :disabled="skillsScanningImports || skillsImporting || skillsImportSelectableKeys.length === 0">
-                            <span>{{ skillsImportAllSelected ? '取消全选' : '全选' }}</span>
-                        </label>
-                        <span class="skill-toolbar-count">已选 {{ skillsImportSelectedCount }} / {{ skillsImportSelectableKeys.length }}，含 SKILL.md {{ skillsImportConfiguredCount }}，缺失 {{ skillsImportMissingSkillFileCount }}</span>
-                    </div>
-                    <div v-if="skillsImportList.length === 0" class="skills-empty-state skills-import-empty">暂无可导入 skill，点击“扫描可导入”。</div>
-                    <div v-else class="skill-list skills-import-list">
-                        <label
-                            class="skill-item"
-                            :class="{ selected: skillsImportSelectedKeys.includes(buildSkillImportKey(skill)) }"
-                            v-for="skill in skillsImportList"
-                            :key="'import-skill-' + buildSkillImportKey(skill)">
-                            <input type="checkbox" v-model="skillsImportSelectedKeys" :value="buildSkillImportKey(skill)" :disabled="skillsImporting">
-                            <div class="skill-item-main">
-                                <div class="skill-item-title">{{ skill.displayName || skill.name }}</div>
-                                <div v-if="skill.description" class="skill-item-description">{{ skill.description }}</div>
-                                <div class="skill-item-meta">
-                                    <span class="skill-item-path" :title="skill.sourcePath">{{ skill.sourcePath }}</span>
-                                    <span class="pill source">{{ skill.sourceLabel }}</span>
-                                    <span :class="['pill', skill.hasSkillFile ? 'configured' : 'empty']">
-                                        {{ skill.hasSkillFile ? '含 SKILL.md' : '缺少 SKILL.md' }}
-                                    </span>
+
+                        <div class="skills-panel skills-actions-panel">
+                            <div class="skills-panel-header">
+                                <div class="skills-panel-title-wrap">
+                                    <div class="skills-panel-title">批量操作</div>
+                                    <div class="skills-panel-note">右侧为导入操作，左侧为本地选择。</div>
                                 </div>
                             </div>
-                        </label>
+                            <div class="skills-actions-grid">
+                                <button class="btn btn-cancel" @click="triggerSkillsZipImport" :disabled="skillsZipImporting || skillsDeleting || skillsImporting || skillsScanningImports || skillsExporting">
+                                    {{ skillsZipImporting ? 'ZIP 导入中...' : '导入 ZIP' }}
+                                </button>
+                                <button class="btn btn-confirm" @click="exportSelectedSkills" :disabled="skillsExporting || skillsSelectedCount === 0 || skillsDeleting || skillsImporting || skillsScanningImports || skillsZipImporting">
+                                    {{ skillsExporting ? '导出中...' : '导出选中' }}
+                                </button>
+                                <button class="btn btn-confirm secondary" @click="importSelectedSkills" :disabled="skillsImporting || skillsScanningImports || skillsImportSelectedCount === 0 || skillsZipImporting || skillsExporting || skillsDeleting">
+                                    {{ skillsImporting ? '导入中...' : '导入选中' }}
+                                </button>
+                                <button class="btn btn-confirm btn-danger" @click="deleteSelectedSkills" :disabled="skillsDeleting || skillsSelectedCount === 0 || skillsImporting || skillsZipImporting || skillsExporting">
+                                    {{ skillsDeleting ? '删除中...' : '删除选中' }}
+                                </button>
+                                <button class="btn btn-cancel skills-close-btn" @click="closeSkillsModal" :disabled="skillsLoading || skillsDeleting || skillsImporting || skillsScanningImports || skillsZipImporting || skillsExporting">
+                                    关闭
+                                </button>
+                            </div>
+                        </div>
                     </div>
                 </div>
-
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeSkillsModal" :disabled="skillsLoading || skillsDeleting || skillsImporting || skillsScanningImports || skillsZipImporting || skillsExporting">关闭</button>
-                    <button class="btn btn-cancel" @click="triggerSkillsZipImport" :disabled="skillsZipImporting || skillsDeleting || skillsImporting || skillsScanningImports || skillsExporting">
-                        {{ skillsZipImporting ? 'ZIP 导入中...' : '导入 ZIP' }}
-                    </button>
-                    <button class="btn btn-confirm" @click="exportSelectedSkills" :disabled="skillsExporting || skillsSelectedCount === 0 || skillsDeleting || skillsImporting || skillsScanningImports || skillsZipImporting">
-                        {{ skillsExporting ? '导出中...' : '导出选中' }}
-                    </button>
-                    <button class="btn btn-confirm" @click="importSelectedSkills" :disabled="skillsImporting || skillsScanningImports || skillsImportSelectedCount === 0 || skillsZipImporting || skillsExporting || skillsDeleting">
-                        {{ skillsImporting ? '导入中...' : '导入选中' }}
-                    </button>
-                    <button class="btn btn-confirm btn-danger" @click="deleteSelectedSkills" :disabled="skillsDeleting || skillsSelectedCount === 0 || skillsImporting || skillsZipImporting || skillsExporting">
-                        {{ skillsDeleting ? '删除中...' : '删除选中' }}
-                    </button>
-                </div>
             </div>
         </div>
 
diff --git a/web-ui/partials/index/panel-settings.html b/web-ui/partials/index/panel-settings.html
index 9fb13fe6..d4c561c0 100644
--- a/web-ui/partials/index/panel-settings.html
+++ b/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="设置子标签">
+                    <div class="config-subtabs settings-subtabs" role="tablist" aria-label="Settings tabs">
                         <button
                             id="settings-tab-backup"
                             role="tab"
@@ -14,7 +14,7 @@
                             :tabindex="settingsTab === 'backup' ? 0 : -1"
                             :class="['config-subtab', { active: settingsTab === 'backup' }]"
                             @click="onSettingsTabClick('backup')">
-                            备份与导入
+                            Backup & Import
                         </button>
                         <button
                             id="settings-tab-trash"
@@ -24,7 +24,7 @@
                             :tabindex="settingsTab === 'trash' ? 0 : -1"
                             :class="['config-subtab', { active: settingsTab === 'trash' }]"
                             @click="onSettingsTabClick('trash')">
-                            回收站
+                            Trash
                             <span class="settings-tab-badge">{{ sessionTrashCount }}</span>
                         </button>
                         <button
@@ -35,7 +35,7 @@
                             :tabindex="settingsTab === 'device' ? 0 : -1"
                             :class="['config-subtab', { active: settingsTab === 'device' }]"
                             @click="onSettingsTabClick('device')">
-                            设备
+                            Device
                         </button>
                     </div>
 
@@ -44,51 +44,77 @@
                         id="settings-panel-backup"
                         role="tabpanel"
                         aria-labelledby="settings-tab-backup">
-                        <div class="selector-section">
-                            <div class="selector-header">
-                                <span class="selector-title">分享命令前缀</span>
-                            </div>
-                            <select class="model-select" :value="shareCommandPrefix" @change="setShareCommandPrefix($event.target.value)">
-                                <option value="npm start">npm start</option>
-                                <option value="codexmate">codexmate</option>
-                            </select>
-                            <div class="config-template-hint">
-                                默认走项目内 <code>npm start</code>，也可切到全局 <code>codexmate</code>。该设置会缓存到浏览器本地。
-                            </div>
-                        </div>
-                        <div class="selector-section">
-                            <div class="selector-header">
-                                <span class="selector-title">Claude 配置</span>
-                            </div>
-                            <button class="btn-tool" @click="downloadClaudeDirectory" :disabled="claudeDownloadLoading">
-                                {{ claudeDownloadLoading ? ('备份中 ' + claudeDownloadProgress + '%') : '一键备份 ~/.claude' }}
-                            </button>
-                            <button class="btn-tool" @click="triggerClaudeImport" :disabled="claudeImportLoading">
-                                {{ claudeImportLoading ? '导入中...' : '导入 ~/.claude 备份' }}
-                            </button>
-                            <input
-                                ref="claudeImportInput"
-                                class="sr-only"
-                                type="file"
-                                accept=".zip"
-                                @change="handleClaudeImportChange">
-                        </div>
-                        <div class="selector-section">
-                            <div class="selector-header">
-                                <span class="selector-title">Codex 配置</span>
+                        <div class="settings-layout">
+                            <div class="settings-grid">
+                                <section class="settings-card settings-card--wide" aria-label="分享命令前缀">
+                                    <div class="settings-card-header">
+                                        <div class="settings-card-title">分享命令前缀</div>
+                                        <div class="settings-card-meta">影响 Web UI 里“复制分享命令”的前缀</div>
+                                    </div>
+                                    <div class="settings-card-body">
+                                        <div class="settings-field-row">
+                                            <label class="settings-field-label" for="settings-share-prefix">前缀</label>
+                                            <select
+                                                id="settings-share-prefix"
+                                                class="model-select"
+                                                :value="shareCommandPrefix"
+                                                @change="setShareCommandPrefix($event.target.value)">
+                                                <option value="npm start">npm start</option>
+                                                <option value="codexmate">codexmate</option>
+                                            </select>
+                                        </div>
+                                        <div class="settings-card-hint">
+                                            默认走项目内 <code>npm start</code>，也可切到全局 <code>codexmate</code>。该设置会缓存到浏览器本地。
+                                        </div>
+                                    </div>
+                                </section>
+
+                                <section class="settings-card" aria-label="Claude 配置备份与导入">
+                                    <div class="settings-card-header">
+                                        <div class="settings-card-title">Claude 配置</div>
+                                        <div class="settings-card-meta">备份 / 导入 <code>~/.claude</code></div>
+                                    </div>
+                                    <div class="settings-card-body">
+                                        <div class="settings-actions">
+                                            <button class="btn-tool" @click="downloadClaudeDirectory" :disabled="claudeDownloadLoading">
+                                                {{ claudeDownloadLoading ? ('备份中 ' + claudeDownloadProgress + '%') : '一键备份 ~/.claude' }}
+                                            </button>
+                                            <button class="btn-tool" @click="triggerClaudeImport" :disabled="claudeImportLoading">
+                                                {{ claudeImportLoading ? '导入中...' : '导入 ~/.claude 备份' }}
+                                            </button>
+                                        </div>
+                                        <input
+                                            ref="claudeImportInput"
+                                            class="sr-only"
+                                            type="file"
+                                            accept=".zip"
+                                            @change="handleClaudeImportChange">
+                                    </div>
+                                </section>
+
+                                <section class="settings-card" aria-label="Codex 配置备份与导入">
+                                    <div class="settings-card-header">
+                                        <div class="settings-card-title">Codex 配置</div>
+                                        <div class="settings-card-meta">备份 / 导入 <code>~/.codex</code></div>
+                                    </div>
+                                    <div class="settings-card-body">
+                                        <div class="settings-actions">
+                                            <button class="btn-tool" @click="downloadCodexDirectory" :disabled="codexDownloadLoading">
+                                                {{ codexDownloadLoading ? ('备份中 ' + codexDownloadProgress + '%') : '一键备份 ~/.codex' }}
+                                            </button>
+                                            <button class="btn-tool" @click="triggerCodexImport" :disabled="codexImportLoading">
+                                                {{ codexImportLoading ? '导入中...' : '导入 ~/.codex 备份' }}
+                                            </button>
+                                        </div>
+                                        <input
+                                            ref="codexImportInput"
+                                            class="sr-only"
+                                            type="file"
+                                            accept=".zip"
+                                            @change="handleCodexImportChange">
+                                    </div>
+                                </section>
                             </div>
-                            <button class="btn-tool" @click="downloadCodexDirectory" :disabled="codexDownloadLoading">
-                                {{ codexDownloadLoading ? ('备份中 ' + codexDownloadProgress + '%') : '一键备份 ~/.codex' }}
-                            </button>
-                            <button class="btn-tool" @click="triggerCodexImport" :disabled="codexImportLoading">
-                                {{ codexImportLoading ? '导入中...' : '导入 ~/.codex 备份' }}
-                            </button>
-                            <input
-                                ref="codexImportInput"
-                                class="sr-only"
-                                type="file"
-                                accept=".zip"
-                                @change="handleCodexImportChange">
                         </div>
                     </div>
 
@@ -97,77 +123,91 @@
                         id="settings-panel-trash"
                         role="tabpanel"
                         aria-labelledby="settings-tab-trash">
-                        <div class="selector-section">
-                            <div class="selector-header">
-                                <span class="selector-title">会话删除行为</span>
-                            </div>
-                            <label class="health-remote-toggle">
-                                <input type="checkbox" :checked="sessionTrashEnabled" @change="setSessionTrashEnabled($event.target.checked)">
-                                <span>删除会话时先移入回收站</span>
-                            </label>
-                            <div class="config-template-hint">
-                                默认开启。关闭后，会话浏览里的删除会直接永久删除，不再进入回收站。
-                            </div>
-                        </div>
-                        <div class="selector-section">
-                            <div class="selector-header settings-tab-header">
-                                <div class="settings-tab-actions trash-header-actions">
-                                    <button class="btn-tool btn-tool-compact" @click="loadSessionTrash({ forceRefresh: true })" :disabled="sessionTrashLoading || sessionTrashClearing">
-                                        {{ sessionTrashLoading ? '刷新中...' : '刷新列表' }}
-                                    </button>
-                                    <button class="btn-tool btn-tool-compact" @click="clearSessionTrash" :disabled="sessionTrashClearing || sessionTrashLoading || !(Number(sessionTrashCount) > 0)">
-                                        {{ sessionTrashClearing ? '清空中...' : '清空回收站' }}
-                                    </button>
-                                </div>
-                            </div>
+                        <div class="settings-layout">
+                            <div class="settings-grid">
+                                <section class="settings-card settings-card--wide" aria-label="会话删除行为">
+                                    <div class="settings-card-header">
+                                        <div class="settings-card-title">会话删除行为</div>
+                                        <div class="settings-card-meta">决定“删除”是否先进入回收站</div>
+                                    </div>
+                                    <div class="settings-card-body">
+                                        <label class="health-remote-toggle settings-toggle">
+                                            <input type="checkbox" :checked="sessionTrashEnabled" @change="setSessionTrashEnabled($event.target.checked)">
+                                            <span>删除会话时先移入回收站</span>
+                                        </label>
+                                        <div class="settings-card-hint">
+                                            默认开启。关闭后，会话浏览里的删除会直接永久删除，不再进入回收站。
+                                        </div>
+                                    </div>
+                                </section>
 
-                            <div v-if="getSessionTrashViewState() === 'loading'" class="session-empty">
-                                正在加载回收站...
-                            </div>
-                            <div v-else-if="getSessionTrashViewState() === 'empty'" class="session-empty">
-                                回收站为空
-                            </div>
-                            <div v-else-if="getSessionTrashViewState() === 'retry'" class="session-empty">
-                                回收站列表加载失败，请刷新重试
-                            </div>
-                            <div v-else class="trash-list">
-                                <div v-for="item in visibleSessionTrashItems" :key="item.trashId" class="trash-item session-item session-card">
-                                    <div class="trash-item-header session-item-header">
-                                        <div class="trash-item-main">
-                                            <div class="trash-item-mainline">
-                                                <div class="trash-item-title">{{ item.title || item.sessionId }}</div>
-                                                <span class="session-count-badge">{{ item.messageCount ?? 0 }}</span>
-                                            </div>
-                                            <div class="trash-item-meta session-item-meta">
-                                                <span class="session-source">{{ item.sourceLabel }}</span>
-                                            </div>
+                                <section class="settings-card settings-card--wide" aria-label="回收站列表">
+                                    <div class="settings-card-header settings-card-header-row">
+                                        <div>
+                                            <div class="settings-card-title">回收站</div>
+                                            <div class="settings-card-meta">已删除会话（可恢复/彻底删除）</div>
                                         </div>
-                                        <div class="trash-item-side">
-                                            <div class="trash-item-actions session-item-actions">
-                                                <button class="btn-mini" @click="restoreSessionTrash(item)" :disabled="sessionTrashLoading || sessionTrashClearing || isSessionTrashActionBusy(item)">
-                                                    {{ sessionTrashRestoring[getSessionTrashActionKey(item)] ? '恢复中...' : '恢复' }}
-                                                </button>
-                                                <button class="btn-mini delete" @click="purgeSessionTrash(item)" :disabled="sessionTrashLoading || sessionTrashClearing || isSessionTrashActionBusy(item)">
-                                                    {{ sessionTrashPurging[getSessionTrashActionKey(item)] ? '删除中...' : '彻底删除' }}
+                                        <div class="settings-card-actions">
+                                            <button class="btn-tool btn-tool-compact" @click="loadSessionTrash({ forceRefresh: true })" :disabled="sessionTrashLoading || sessionTrashClearing">
+                                                {{ sessionTrashLoading ? '刷新中...' : '刷新列表' }}
+                                            </button>
+                                            <button class="btn-tool btn-tool-compact" @click="clearSessionTrash" :disabled="sessionTrashClearing || sessionTrashLoading || !(Number(sessionTrashCount) > 0)">
+                                                {{ sessionTrashClearing ? '清空中...' : '清空回收站' }}
+                                            </button>
+                                        </div>
+                                    </div>
+
+                                    <div class="settings-card-body">
+                                        <div v-if="getSessionTrashViewState() === 'loading'" class="session-empty">
+                                            正在加载回收站...
+                                        </div>
+                                        <div v-else-if="getSessionTrashViewState() === 'empty'" class="session-empty">
+                                            回收站为空
+                                        </div>
+                                        <div v-else-if="getSessionTrashViewState() === 'retry'" class="session-empty">
+                                            回收站列表加载失败，请刷新重试
+                                        </div>
+                                        <div v-else class="trash-list">
+                                            <div v-for="item in visibleSessionTrashItems" :key="item.trashId" class="trash-item session-item session-card">
+                                                <div class="trash-item-header session-item-header">
+                                                    <div class="trash-item-main">
+                                                        <div class="trash-item-mainline">
+                                                            <div class="trash-item-title">{{ item.title || item.sessionId }}</div>
+                                                            <span class="session-count-badge">{{ item.messageCount ?? 0 }}</span>
+                                                        </div>
+                                                        <div class="trash-item-meta session-item-meta">
+                                                            <span class="session-source">{{ item.sourceLabel }}</span>
+                                                        </div>
+                                                    </div>
+                                                    <div class="trash-item-side">
+                                                        <div class="trash-item-actions session-item-actions">
+                                                            <button class="btn-mini" @click="restoreSessionTrash(item)" :disabled="sessionTrashLoading || sessionTrashClearing || isSessionTrashActionBusy(item)">
+                                                                {{ sessionTrashRestoring[getSessionTrashActionKey(item)] ? '恢复中...' : '恢复' }}
+                                                            </button>
+                                                            <button class="btn-mini delete" @click="purgeSessionTrash(item)" :disabled="sessionTrashLoading || sessionTrashClearing || isSessionTrashActionBusy(item)">
+                                                                {{ sessionTrashPurging[getSessionTrashActionKey(item)] ? '删除中...' : '彻底删除' }}
+                                                            </button>
+                                                        </div>
+                                                        <div class="trash-item-time session-item-time">{{ item.deletedAt || item.updatedAt || 'unknown time' }}</div>
+                                                    </div>
+                                                </div>
+                                                <div v-if="item.cwd" class="trash-item-path session-item-sub session-item-wrap">
+                                                    <span class="trash-item-label">工作区</span>
+                                                    <span>{{ item.cwd }}</span>
+                                                </div>
+                                                <div class="trash-item-path session-item-sub session-item-wrap">
+                                                    <span class="trash-item-label">原文件</span>
+                                                    <span>{{ item.originalFilePath }}</span>
+                                                </div>
+                                            </div>
+                                            <div v-if="sessionTrashHasMoreItems" class="trash-list-footer">
+                                                <button class="btn-tool btn-tool-compact" @click="loadMoreSessionTrashItems" :disabled="sessionTrashLoading || sessionTrashClearing">
+                                                    加载更多（剩余 {{ sessionTrashHiddenCount }} 项）
                                                 </button>
                                             </div>
-                                            <div class="trash-item-time session-item-time">{{ item.deletedAt || item.updatedAt || 'unknown time' }}</div>
                                         </div>
                                     </div>
-                                    <div v-if="item.cwd" class="trash-item-path session-item-sub session-item-wrap">
-                                        <span class="trash-item-label">工作区</span>
-                                        <span>{{ item.cwd }}</span>
-                                    </div>
-                                    <div class="trash-item-path session-item-sub session-item-wrap">
-                                        <span class="trash-item-label">原文件</span>
-                                        <span>{{ item.originalFilePath }}</span>
-                                    </div>
-                                </div>
-                                <div v-if="sessionTrashHasMoreItems" class="trash-list-footer">
-                                    <button class="btn-tool btn-tool-compact" @click="loadMoreSessionTrashItems" :disabled="sessionTrashLoading || sessionTrashClearing">
-                                        加载更多（剩余 {{ sessionTrashHiddenCount }} 项）
-                                    </button>
-                                </div>
+                                </section>
                             </div>
                         </div>
                     </div>
@@ -177,29 +217,42 @@
                         id="settings-panel-device"
                         role="tabpanel"
                         aria-labelledby="settings-tab-device">
-                        <div class="selector-section">
-                            <div class="selector-header">
-                                <span class="selector-title">配置模板二次确认</span>
-                            </div>
-                            <label class="health-remote-toggle">
-                                <input
-                                    type="checkbox"
-                                    :checked="configTemplateDiffConfirmEnabled"
-                                    @change="setConfigTemplateDiffConfirmEnabled($event.target.checked)">
-                                <span>应用模板前先预览差异（两步：确认 → 应用）</span>
-                            </label>
-                            <div class="config-template-hint">
-                                开启后：先展示差异预览，再确认写入。
-                            </div>
-                        </div>
-                        <div class="selector-section">
-                            <div class="selector-header">
-                                <span class="selector-title">配置重置</span>
+                        <div class="settings-layout">
+                            <div class="settings-grid">
+                                <section class="settings-card settings-card--wide" aria-label="配置模板二次确认">
+                                    <div class="settings-card-header">
+                                        <div class="settings-card-title">配置模板二次确认</div>
+                                        <div class="settings-card-meta">降低误写入风险</div>
+                                    </div>
+                                    <div class="settings-card-body">
+                                        <label class="health-remote-toggle settings-toggle">
+                                            <input
+                                                type="checkbox"
+                                                :checked="configTemplateDiffConfirmEnabled"
+                                                @change="setConfigTemplateDiffConfirmEnabled($event.target.checked)">
+                                            <span>应用模板前先预览差异（两步：确认 → 应用）</span>
+                                        </label>
+                                        <div class="settings-card-hint">
+                                            开启后：先展示差异预览，再确认写入。
+                                        </div>
+                                    </div>
+                                </section>
+
+                                <section class="settings-card settings-card--wide settings-card--danger" aria-label="配置重置">
+                                    <div class="settings-card-header">
+                                        <div class="settings-card-title">配置重置</div>
+                                        <div class="settings-card-meta">谨慎操作</div>
+                                    </div>
+                                    <div class="settings-card-body">
+                                        <div class="settings-card-hint">会先备份 config.toml，再写入默认配置。</div>
+                                        <div class="settings-actions">
+                                            <button class="btn-tool" @click="resetConfig" :disabled="resetConfigLoading || loading || !!initError">
+                                                {{ resetConfigLoading ? '重装中...' : '重装配置' }}
+                                            </button>
+                                        </div>
+                                    </div>
+                                </section>
                             </div>
-                            <div class="config-template-hint">先备份 config.toml，再写默认配置。</div>
-                            <button class="btn-tool" @click="resetConfig" :disabled="resetConfigLoading || loading || !!initError">
-                                {{ resetConfigLoading ? '重装中...' : '重装配置' }}
-                            </button>
                         </div>
                     </div>
                 </div>
diff --git a/web-ui/partials/index/panel-usage.html b/web-ui/partials/index/panel-usage.html
index 3aef423e..5d2d1d7b 100644
--- a/web-ui/partials/index/panel-usage.html
+++ b/web-ui/partials/index/panel-usage.html
@@ -30,6 +30,58 @@
                         </div>
 
                         <div class="usage-chart-grid">
+                            <section class="usage-card usage-card-wide usage-card-daily">
+                                <div class="usage-card-head">
+                                    <div>
+                                        <div class="usage-card-title">每天消耗</div>
+                                        <div class="usage-card-subtitle">按天汇总 token 与预估费用（费用各自按最大值归一显示）。</div>
+                                    </div>
+                                    <div class="usage-card-kicker">{{ sessionsUsageTimeRange === 'all' ? '全部' : (sessionsUsageTimeRange === '30d' ? '近 30 天' : '近 7 天') }}</div>
+                                </div>
+
+                                <div class="usage-daily-legend">
+                                    <span><span class="usage-legend-dot usage-daily-dot usage-daily-dot-tokens"></span>Token</span>
+                                    <span><span class="usage-legend-dot usage-daily-dot usage-daily-dot-cost"></span>预估费用</span>
+                                </div>
+
+                                <div class="usage-daily-bars usage-bars">
+                                    <div v-for="day in (sessionUsageDaily && sessionUsageDaily.rows ? sessionUsageDaily.rows : [])" :key="day.key" class="usage-bar-group">
+                                        <div class="usage-daily-bar-stack" :title="`${day.key} · ${day.tokenTitle} token · ${day.costTitle}`">
+                                            <div class="usage-daily-bar usage-daily-bar-tokens" :style="{ height: day.tokenPercent + '%' }"></div>
+                                            <div class="usage-daily-bar usage-daily-bar-cost" :style="{ height: day.costPercent + '%' }"></div>
+                                        </div>
+                                        <div class="usage-bar-label">{{ day.label }}</div>
+                                    </div>
+                                </div>
+
+                                <div class="usage-daily-table-wrap">
+                                    <table class="usage-daily-table">
+                                        <thead>
+                                            <tr>
+                                                <th>日期</th>
+                                                <th class="right">会话</th>
+                                                <th class="right">消息</th>
+                                                <th class="right">Token</th>
+                                                <th class="right">预估费用</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr v-for="day in sessionUsageDailyTableRows" :key="day.key">
+                                                <td class="mono">{{ day.key }}</td>
+                                                <td class="right">{{ day.sessionCount }}</td>
+                                                <td class="right">{{ day.messageCount }}</td>
+                                                <td class="right mono" :title="day.tokenTitle">{{ day.tokenLabel }}</td>
+                                                <td class="right mono" :title="day.costTitle">{{ day.costLabel }}</td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+
+                                <div class="usage-daily-note">
+                                    说明：预估费用默认不含 Claude；仅在可匹配模型单价且会话记录 input/output token 时计算。
+                                </div>
+                            </section>
+
                             <section class="usage-card">
                                 <div class="usage-card-title">会话趋势</div>
                                 <div class="usage-legend">
diff --git a/web-ui/styles.css b/web-ui/styles.css
index 1b9116cb..cea32ba5 100644
--- a/web-ui/styles.css
+++ b/web-ui/styles.css
@@ -3,6 +3,7 @@
 @import url('./styles/navigation-panels.css');
 @import url('./styles/titles-cards.css');
 @import url('./styles/controls-forms.css');
+@import url('./styles/settings-panel.css');
 @import url('./styles/sessions-toolbar-trash.css');
 @import url('./styles/sessions-list.css');
 @import url('./styles/sessions-preview.css');
diff --git a/web-ui/styles/sessions-usage.css b/web-ui/styles/sessions-usage.css
index ea058a72..812aa22a 100644
--- a/web-ui/styles/sessions-usage.css
+++ b/web-ui/styles/sessions-usage.css
@@ -239,6 +239,120 @@
     background: var(--color-brand);
 }
 
+/* =========================
+   Daily usage (token + cost)
+   ========================= */
+
+.usage-card-wide {
+    grid-column: 1 / -1;
+}
+
+.usage-daily-legend {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px;
+    margin: 0 0 10px;
+    font-size: 12px;
+    color: var(--color-text-secondary);
+}
+
+.usage-daily-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 999px;
+}
+
+.usage-daily-dot-tokens {
+    background: var(--color-brand);
+}
+
+.usage-daily-dot-cost {
+    background: linear-gradient(135deg, rgba(139, 107, 214, 0.95), rgba(199, 116, 98, 0.95));
+}
+
+.usage-daily-bar-stack {
+    width: 100%;
+    max-width: 40px;
+    height: 160px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 4px;
+}
+
+.usage-daily-bar {
+    flex: 1;
+    min-height: 4px;
+    border-radius: 10px 10px 4px 4px;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
+}
+
+.usage-daily-bar-tokens {
+    background: linear-gradient(180deg, rgba(199, 116, 98, 1) 0%, rgba(180, 94, 78, 1) 100%);
+}
+
+.usage-daily-bar-cost {
+    background: linear-gradient(180deg, rgba(139, 107, 214, 0.92) 0%, rgba(95, 72, 170, 0.98) 100%);
+}
+
+.usage-daily-table-wrap {
+    margin-top: 12px;
+    border-radius: 14px;
+    border: 1px solid var(--color-border-soft);
+    background: var(--color-surface-alt);
+    overflow: auto;
+}
+
+.usage-daily-table {
+    width: 100%;
+    border-collapse: collapse;
+    min-width: 560px;
+}
+
+.usage-daily-table th,
+.usage-daily-table td {
+    padding: 10px 12px;
+    border-bottom: 1px solid rgba(216, 201, 184, 0.22);
+    font-size: 12px;
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+}
+
+.usage-daily-table thead th {
+    position: sticky;
+    top: 0;
+    background: rgba(248, 243, 238, 0.92);
+    backdrop-filter: blur(6px);
+    font-weight: 700;
+    color: var(--color-text-primary);
+    z-index: 1;
+}
+
+.usage-daily-table tr:last-child td {
+    border-bottom: none;
+}
+
+.usage-daily-table .right {
+    text-align: right;
+}
+
+.usage-daily-table .mono {
+    font-family: var(--font-family-mono);
+    letter-spacing: -0.01em;
+}
+
+.usage-daily-note {
+    margin-top: 10px;
+    padding: 10px 12px;
+    border-radius: 12px;
+    background: rgba(255, 244, 220, 0.58);
+    border: 1px solid rgba(216, 201, 184, 0.22);
+    color: #7a5110;
+    font-size: 12px;
+    line-height: 1.45;
+}
+
 .usage-bar.claude {
     background: #8b6bd6;
 }
diff --git a/web-ui/styles/settings-panel.css b/web-ui/styles/settings-panel.css
new file mode 100644
index 00000000..7a3917f5
--- /dev/null
+++ b/web-ui/styles/settings-panel.css
@@ -0,0 +1,166 @@
+/* ============================================
+   Settings Panel (refined layout)
+   - Keep existing warm-neutral theme
+   - Add clearer hierarchy, grid rhythm, and card affordance
+   ============================================ */
+
+.settings-layout {
+    padding: 4px 0 0;
+}
+
+.settings-grid {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: 12px;
+}
+
+.settings-card {
+    grid-column: span 6;
+    border-radius: var(--radius-xl);
+    border: 1px solid rgba(216, 201, 184, 0.42);
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 253, 252, 0.88) 100%);
+    box-shadow: var(--shadow-card);
+    padding: 14px 14px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.settings-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+        radial-gradient(900px 240px at 10% 0%, rgba(199, 116, 98, 0.12) 0%, rgba(199, 116, 98, 0) 55%),
+        radial-gradient(700px 240px at 90% 10%, rgba(199, 116, 98, 0.07) 0%, rgba(199, 116, 98, 0) 60%);
+    pointer-events: none;
+    opacity: 0.7;
+}
+
+.settings-card > * {
+    position: relative;
+    z-index: 1;
+}
+
+.settings-card--wide {
+    grid-column: 1 / -1;
+}
+
+.settings-card--danger {
+    border-color: rgba(196, 69, 54, 0.28);
+}
+
+.settings-card--danger::before {
+    background:
+        radial-gradient(980px 260px at 10% 0%, rgba(196, 69, 54, 0.13) 0%, rgba(196, 69, 54, 0) 55%),
+        radial-gradient(740px 240px at 90% 10%, rgba(199, 116, 98, 0.08) 0%, rgba(199, 116, 98, 0) 60%);
+}
+
+.settings-card-header {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.settings-card-header-row {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.settings-card-title {
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: var(--color-text-primary);
+}
+
+.settings-card-meta {
+    font-size: 11px;
+    color: var(--color-text-tertiary);
+    line-height: 1.35;
+}
+
+.settings-card-body {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 0;
+}
+
+.settings-card-hint {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+    line-height: 1.45;
+}
+
+.settings-card-hint code {
+    font-family: var(--font-family-mono);
+    font-size: 11px;
+    padding: 1px 6px;
+    border-radius: 999px;
+    border: 1px solid var(--color-border);
+    background: rgba(248, 243, 238, 0.7);
+    color: var(--color-text-secondary);
+}
+
+.settings-field-row {
+    display: grid;
+    grid-template-columns: 88px minmax(0, 1fr);
+    align-items: center;
+    gap: 10px;
+}
+
+.settings-field-label {
+    font-size: 11px;
+    color: var(--color-text-muted);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+}
+
+.settings-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.settings-card-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 2px;
+}
+
+.settings-toggle {
+    padding: 8px 10px;
+    border-radius: 12px;
+    border: 1px solid rgba(216, 201, 184, 0.4);
+    background: rgba(248, 243, 238, 0.6);
+}
+
+/* Re-balance action buttons inside cards */
+.settings-card .btn-tool {
+    width: auto;
+    max-width: 100%;
+}
+
+/* Mobile / narrow */
+@media (max-width: 860px) {
+    .settings-card {
+        grid-column: 1 / -1;
+    }
+    .settings-field-row {
+        grid-template-columns: 1fr;
+        align-items: stretch;
+    }
+}
+
diff --git a/web-ui/styles/skills-list.css b/web-ui/styles/skills-list.css
index d52fdd36..1cdc528e 100644
--- a/web-ui/styles/skills-list.css
+++ b/web-ui/styles/skills-list.css
@@ -19,6 +19,14 @@
     -ms-overflow-style: none;
 }
 
+.skills-manager-grid .skill-list {
+    max-height: min(60vh, 520px);
+}
+
+.skills-manager-grid .skills-import-list {
+    max-height: min(34vh, 320px);
+}
+
 .skill-list::-webkit-scrollbar {
     width: 0;
     height: 0;
@@ -293,4 +301,3 @@
     box-shadow: 0 2px 6px rgba(200, 74, 58, 0.25);
     border-color: transparent;
 }
-
diff --git a/web-ui/styles/skills-market.css b/web-ui/styles/skills-market.css
index 09c50c36..555cd2ea 100644
--- a/web-ui/styles/skills-market.css
+++ b/web-ui/styles/skills-market.css
@@ -61,7 +61,7 @@
 }
 
 .skills-modal {
-    width: min(96vw, 920px);
+    width: min(96vw, 1100px);
 }
 
 .skills-modal-header {
@@ -83,6 +83,54 @@
     gap: 8px;
 }
 
+/* =========================
+   Skills manager two-column layout
+   ========================= */
+
+.skills-manager-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
+    gap: var(--spacing-sm);
+    align-items: start;
+}
+
+.skills-manager-col {
+    min-width: 0;
+}
+
+.skills-actions-panel {
+    margin-bottom: 0;
+}
+
+.skills-actions-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+}
+
+.skills-actions-grid .btn {
+    margin-top: 0;
+    min-height: 44px;
+    padding: 12px 14px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1.1;
+}
+
+.skills-actions-grid .skills-close-btn {
+    grid-column: 1 / -1;
+}
+
+@media (max-width: 980px) {
+    .skills-manager-grid {
+        grid-template-columns: 1fr;
+    }
+    .skills-actions-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
 .skills-root-box {
     border: 1px solid var(--color-border-soft);
     border-radius: var(--radius-sm);
@@ -332,4 +380,3 @@
     width: 210px;
     flex: 0 0 auto;
 }
-