feat: refine web-ui layout hierarchy with dory-inspired composition

cmd/reset-main.js

@@ -2,6 +2,7 @@
 /**
  * Reset working tree to origin/main:
  * - fetch origin/main
+ * - discard local changes
  * - checkout main
  * - hard reset to origin/main
  * - clean untracked files/dirs
@@ -24,19 +25,25 @@ function main() {
     process.exit(1);
   }
 
-  console.log('[1/5] Fetch origin/main');
+  console.log('[1/6] Fetch origin/main');
   run('git fetch origin main --prune');
 
-  console.log('[2/5] Checkout main');
+  console.log('[2/6] Discard local changes');
+  run('git reset --hard');
+  run('git clean -fd');
+
+  console.log('[3/6] Checkout main');
   run('git checkout main');
 
-  console.log('[3/5] Reset local changes to origin/main');
+  console.log('[4/6] Reset local changes to origin/main');
   run('git reset --hard origin/main');
 
-  console.log('[4/5] Remove untracked files');
+  // Defensive extra clean: keep this pass in case future reset steps create
+  // untracked files before the final status check.
+  console.log('[5/6] Remove untracked files');
   run('git clean -fd');
 
-  console.log('[5/5] Final status');
+  console.log('[6/6] Final status');
   run('git status --short --branch');
 
   console.log('Done. Working tree synced to origin/main.');

tests/unit/web-ui-behavior-parity.test.mjs

@@ -319,10 +319,10 @@ test('captured bundled app skeleton only exposes expected data key drift versus
     const headDataKeys = Object.keys(headAppOptions.data()).sort();
     const extraCurrentKeys = currentDataKeys.filter((key) => !headDataKeys.includes(key)).sort();
     const missingCurrentKeys = headDataKeys.filter((key) => !currentDataKeys.includes(key)).sort();
-    const allowedExtraCurrentKeys = [];
-    const allowedMissingCurrentKeys = [
+    const allowedExtraCurrentKeys = parityAgainstHead ? [] : [
         'sessionsViewMode'
     ];
+    const allowedMissingCurrentKeys = parityAgainstHead ? [] : [];
     if (parityAgainstHead) {
         const allowedExtraKeySet = new Set(allowedExtraCurrentKeys);
         const allowedMissingKeySet = new Set(allowedMissingCurrentKeys);

web-ui/app.js

@@ -117,6 +117,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 skillsMarketLocalLoadedOnce: false,
                 skillsMarketImportLoadedOnce: false,
                 sessionPinnedMap: {},
+                sessionsViewMode: 'browser',
                 sessionsUsageTimeRange: '7d',
                 sessionsList: [],
                 sessionsLoadedOnce: false,

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

@@ -8,22 +8,39 @@
             </span>
         </button>
 
-        <div class="hero" v-if="!sessionStandalone">
-            <img class="hero-logo" src="/res/logo.png" alt="Codex Mate logo">
-            <div class="hero-title">
-                Codex <span class="accent">Mate.</span>
-            </div>
-            <div class="hero-subtitle">
-                配置中枢：管理 Codex / Claude / OpenClaw / 会话
-                <span class="sr-only">本地配置中枢，统一管理 Codex / Claude Code / OpenClaw / 会话。</span>
+        <section class="hero-surface" v-if="!sessionStandalone">
+            <div class="hero-copy">
+                <div class="hero-meta-row">
+                    <div class="hero-eyebrow">Codex Mate 工作台</div>
+                    <div class="hero-summary-pill">
+                        <span class="hero-summary-label">当前区域</span>
+                        <span class="hero-summary-value">{{ mainTab === 'config' ? '配置中心' : (mainTab === 'sessions' ? '会话浏览' : (mainTab === 'usage' ? 'Usage' : (mainTab === 'market' ? '技能市场' : '设置'))) }}</span>
+                    </div>
+                    <a
+                        class="hero-link-pill"
+                        href="https://github.com/SakuraByteCore/codexmate"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        title="打开 GitHub 仓库">
+                        <span class="hero-link-label">仓库</span>
+                        <span class="hero-link-value">SakuraByteCore/codexmate</span>
+                    </a>
+                </div>
+                <div class="hero-title-block">
+                    <div class="hero-title">本地配置、会话与技能入口</div>
+                    <div class="hero-subtitle">
+                        统一处理 Codex、Claude Code、OpenClaw 与本地会话。
+                        <span class="sr-only">本地配置中枢，统一管理 Codex / Claude Code / OpenClaw / 会话。</span>
+                    </div>
+                </div>
             </div>
-        </div>
+        </section>
         <div v-if="!sessionStandalone" class="hero-github">
             <a
                 class="github-badge github-badge-mobile"
                 href="https://github.com/SakuraByteCore/codexmate"
                 target="_blank"
-                rel="noopener"
+                rel="noopener noreferrer"
                 title="打开 GitHub 仓库">
                 <span class="github-badge-left">
                     <svg class="github-badge-icon" viewBox="0 0 24 24" aria-hidden="true">
@@ -131,7 +148,7 @@
                         class="github-badge github-badge-rail"
                         href="https://github.com/SakuraByteCore/codexmate"
                         target="_blank"
-                        rel="noopener"
+                        rel="noopener noreferrer"
                         title="打开 GitHub 仓库">
                         <span class="github-badge-left">
                             <svg class="github-badge-icon" viewBox="0 0 24 24" aria-hidden="true">
@@ -257,23 +274,12 @@
                 </div>
             </aside>
             <main class="main-panel">
-                <div class="panel-header" v-if="!sessionStandalone">
-                    <h1 class="main-title">
-                        {{ mainTab === 'config' ? '配置中心' : (mainTab === 'sessions' ? '会话浏览' : (mainTab === 'usage' ? 'Usage' : (mainTab === 'market' ? '技能市场' : '设置'))) }}
-                    </h1>
-                    <p class="subtitle" v-if="mainTab === 'config'">
-                        配置中枢：管理 Codex / Claude / OpenClaw
-                        <span class="sr-only">本地配置中枢，统一管理 Codex / Claude Code / OpenClaw。</span>
-                    </p>
-                    <p class="subtitle" v-else-if="mainTab === 'sessions'">
-                        统一查看与导出 Codex / Claude 会话。
-                    </p>
-                    <p class="subtitle" v-else-if="mainTab === 'usage'">
-                        单独查看本地会话用量、趋势与高频路径。
-                    </p>
-                    <p class="subtitle" v-else-if="mainTab === 'market'">
-                        统一管理 Codex / Claude Skills，并聚焦本地导入与分发。
-                    </p>
+                <div class="panel-header panel-header-refined" v-if="!sessionStandalone">
+                    <div class="panel-header-copy">
+                        <div class="panel-kicker">{{ mainTab === 'config' ? '配置中心' : (mainTab === 'sessions' ? '会话浏览' : (mainTab === 'usage' ? 'Usage' : (mainTab === 'market' ? '技能市场' : '设置'))) }}</div>
+                        <h1 class="main-title">{{ mainTab === 'config' ? '配置与运行' : (mainTab === 'sessions' ? '会话与上下文' : (mainTab === 'usage' ? '本地用量与趋势' : (mainTab === 'market' ? '技能与分发' : '运行与数据设置'))) }}</h1>
+                        <p class="subtitle">{{ mainTab === 'config' ? '统一处理 Provider、Claude Code 与 OpenClaw 配置。' : (mainTab === 'sessions' ? '查看、检索、导出并继续处理本地会话记录。' : (mainTab === 'usage' ? '单独查看本地使用趋势与活跃来源。' : (mainTab === 'market' ? '围绕本地 Skills 的安装、导入与同步整理入口。' : '管理下载、数据目录与全局行为。'))) }}</p>
+                    </div>
                 </div>
 
                 <div class="status-strip" v-if="!sessionStandalone && mainTab === 'config'">