codexmate 0.0.6 → 0.0.8

package/web-ui.html

@@ -13,10 +13,10 @@
            设计系统 - Design Tokens
            ============================================ */
         :root {
-            /* 色彩系统 */
-            --color-brand: #C95E4B;
-            --color-brand-dark: #A94637;
-            --color-brand-light: rgba(201, 94, 75, 0.14);
+            /* 色彩系统：去除杂纹，强调干净留白与温柔橙红 */
+            --color-brand: #D0583A;
+            --color-brand-dark: #B8442B;
+            --color-brand-light: rgba(208, 88, 58, 0.14);
             --color-brand-subtle: rgba(201, 94, 75, 0.2);
 
             --color-bg: #F6EFE6;
@@ -32,8 +32,8 @@
             --color-border-soft: rgba(216, 201, 184, 0.45);
             --color-border-strong: rgba(216, 201, 184, 0.8);
 
-            --color-success: #4E8B66;
-            --color-error: #C1483B;
+            --color-success: #4B8B6A;
+            --color-error: #C44536;
 
             --bg-warm-gradient:
                 radial-gradient(circle at 16% 10%, rgba(201, 94, 75, 0.18), transparent 45%),
@@ -133,6 +133,9 @@
             overflow-x: hidden;
         }
 
+        /* ============================================
+           容器
+           ============================================ */
         body::before {
             content: "";
             position: fixed;
@@ -146,18 +149,230 @@
             z-index: 0;
         }
 
+        /* 背景网格 */
+        body::after {
+            content: "";
+            position: fixed;
+            inset: 0;
+            background-image:
+                linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
+                linear-gradient(0deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
+            background-size: 120px 120px;
+            opacity: 0.5;
+            pointer-events: none;
+            z-index: 0;
+        }
+
         /* ============================================
            容器
            ============================================ */
         .container {
             width: 100%;
-            max-width: 1160px;
+            max-width: 1200px;
             margin: 0 auto;
-            padding-bottom: var(--spacing-lg);
+            padding: var(--spacing-md) var(--spacing-sm) var(--spacing-lg);
             position: relative;
             z-index: 1;
         }
 
+        /* ============================================
+           布局：单列居中
+           ============================================ */
+        .app-shell {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: var(--spacing-md);
+            align-items: flex-start;
+        }
+
+        .side-nav {
+            display: none;
+        }
+
+        .brand-block {
+            margin-bottom: var(--spacing-md);
+        }
+
+        .brand-title {
+            font-size: 30px;
+            line-height: 1.05;
+            font-family: var(--font-family-display);
+            color: var(--color-text-primary);
+            letter-spacing: -0.02em;
+        }
+
+        .brand-title .accent {
+            color: var(--color-brand);
+        }
+
+        .brand-subtitle {
+            margin-top: 8px;
+            font-size: var(--font-size-secondary);
+            color: var(--color-text-tertiary);
+            line-height: 1.45;
+        }
+
+        .main-tabs {
+            display: flex;
+            gap: 10px;
+        }
+
+        .main-tab-btn {
+            flex: 1;
+            text-align: center;
+            border: 1px solid rgba(216, 201, 184, 0.55);
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: var(--radius-lg);
+            padding: 12px 14px;
+            cursor: pointer;
+            color: var(--color-text-secondary);
+            font-size: var(--font-size-body);
+            font-weight: var(--font-weight-secondary);
+            box-shadow: var(--shadow-subtle);
+            transition: all var(--transition-normal) var(--ease-spring);
+        }
+
+        .main-tab-btn:hover {
+            border-color: var(--color-brand);
+            color: var(--color-text-primary);
+            transform: translateY(-1px);
+        }
+
+        .main-tab-btn.active {
+            border-color: var(--color-brand);
+            box-shadow: 0 10px 24px rgba(27, 23, 20, 0.08);
+            color: var(--color-text-primary);
+            background: linear-gradient(135deg, rgba(201, 94, 75, 0.12), rgba(255, 255, 255, 0.95));
+        }
+
+        .main-panel {
+            min-width: 0;
+            background: rgba(255, 255, 255, 0.9);
+            border: 1px solid rgba(255, 255, 255, 0.65);
+            border-radius: 18px;
+            box-shadow: 0 12px 30px rgba(27, 23, 20, 0.08);
+            padding: var(--spacing-md) var(--spacing-lg);
+            backdrop-filter: blur(8px);
+        }
+
+        .panel-header {
+            margin-bottom: 12px;
+            text-align: left;
+        }
+
+        .hero {
+            margin-bottom: var(--spacing-sm);
+        }
+
+        .hero-title {
+            font-size: 48px;
+            line-height: 1.05;
+            font-family: var(--font-family-display);
+            color: var(--color-text-primary);
+            letter-spacing: -0.02em;
+        }
+
+        .hero-title .accent {
+            color: var(--color-brand);
+        }
+
+        .hero-subtitle {
+            margin-top: 8px;
+            font-size: var(--font-size-body);
+            color: var(--color-text-tertiary);
+            line-height: 1.5;
+        }
+
+        .top-tabs {
+            margin: 14px 0 18px;
+            background: rgba(255, 255, 255, 0.92);
+            border: 1px solid rgba(255, 255, 255, 0.7);
+            border-radius: 14px;
+            padding: 6px;
+            box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.06);
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 8px;
+            backdrop-filter: blur(6px);
+        }
+
+        .top-tab {
+            border: 1px solid rgba(216, 201, 184, 0.55);
+            border-radius: 12px;
+            background: rgba(255, 255, 255, 0.96);
+            padding: 11px 10px;
+            font-size: var(--font-size-body);
+            color: var(--color-text-secondary);
+            text-align: center;
+            cursor: pointer;
+            transition: all var(--transition-normal) var(--ease-spring);
+            box-shadow: var(--shadow-subtle);
+        }
+
+        .top-tab:hover {
+            border-color: var(--color-brand);
+            color: var(--color-text-primary);
+            transform: translateY(-1px);
+        }
+
+        .top-tab.active {
+            border-color: var(--color-brand);
+            color: var(--color-text-primary);
+            background: linear-gradient(135deg, rgba(201, 94, 75, 0.12), rgba(255, 255, 255, 0.95));
+            box-shadow: 0 10px 24px rgba(27, 23, 20, 0.08);
+        }
+
+        .config-subtabs {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 16px;
+            padding: 6px;
+            background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.7));
+            border-radius: var(--radius-lg);
+            border: 1px solid rgba(255, 255, 255, 0.7);
+            box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.05);
+        }
+
+        .config-subtab {
+            border: 1px solid var(--color-border-soft);
+            border-radius: var(--radius-lg);
+            padding: 10px 14px;
+            background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 245, 0.9));
+            color: var(--color-text-secondary);
+            cursor: pointer;
+            font-size: var(--font-size-body);
+            font-weight: var(--font-weight-secondary);
+            transition: all var(--transition-normal) var(--ease-spring);
+            box-shadow: var(--shadow-subtle);
+        }
+
+        .config-subtab:hover {
+            border-color: var(--color-border-strong);
+            color: var(--color-text-primary);
+        }
+
+        .config-subtab.active {
+            border-color: var(--color-brand);
+            color: var(--color-text-primary);
+            background: linear-gradient(135deg, rgba(201, 94, 75, 0.18), rgba(255, 255, 255, 0.95));
+            box-shadow: var(--shadow-card);
+        }
+
+        .content-wrapper {
+            background: rgba(255, 255, 255, 0.9);
+            border: 1px solid rgba(255, 255, 255, 0.7);
+            border-radius: var(--radius-lg);
+            box-shadow: var(--shadow-card);
+            padding: var(--spacing-md);
+        }
+
+        .mode-content {
+            border-radius: var(--radius-lg);
+            background: rgba(255, 255, 255, 0.85);
+            box-shadow: var(--shadow-subtle);
+            padding: var(--spacing-sm);
+        }
+
         /* ============================================
            主标题
            ============================================ */
@@ -195,14 +410,14 @@
            ============================================ */
         .segmented-control {
             display: flex;
-            background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.55) 100%);
-            border-radius: var(--radius-lg);
-            padding: 5px;
-            margin-bottom: 16px;
+            background: rgba(255, 255, 255, 0.92);
+            border-radius: var(--radius-xl);
+            padding: 6px;
+            margin-bottom: 20px;
             position: relative;
-            box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.08);
+            box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.06);
             border: 1px solid rgba(255, 255, 255, 0.7);
-            backdrop-filter: blur(10px);
+            backdrop-filter: blur(6px);
         }
 
         .segment {
@@ -245,7 +460,7 @@
            卡片
            ============================================ */
         .card {
-            background: linear-gradient(to bottom, var(--color-surface) 0%, rgba(255, 255, 255, 0.95) 100%);
+            background: linear-gradient(180deg, #fffdf9 0%, #fff8f2 100%);
             border-radius: var(--radius-lg);
             padding: var(--spacing-sm);
             display: flex;
@@ -256,17 +471,17 @@
                 transform var(--transition-normal) var(--ease-spring),
                 box-shadow var(--transition-normal) var(--ease-spring),
                 background-color var(--transition-fast) var(--ease-smooth);
-            box-shadow: var(--shadow-card);
+            box-shadow: 0 10px 24px rgba(27, 23, 20, 0.08);
             user-select: none;
             will-change: transform;
-            border: 1px solid var(--color-border-soft);
+            border: 1px solid rgba(216, 201, 184, 0.55);
             position: relative;
             overflow: hidden;
         }
 
         .card:hover {
             transform: translateY(-2px) scale(1.005);
-            box-shadow: var(--shadow-float);
+            box-shadow: 0 16px 32px rgba(27, 23, 20, 0.1);
         }
 
         .card::before,
@@ -393,6 +608,11 @@
             transform: translateX(0);
         }
 
+        .mode-cards .card-actions {
+            opacity: 1;
+            transform: translateX(0);
+        }
+
         .card-action-btn {
             width: 28px;
             height: 28px;
@@ -524,54 +744,6 @@
             gap: var(--spacing-xs);
         }
 
-        .recent-list {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 8px;
-            margin-top: 8px;
-        }
-
-        .recent-item {
-            border: 1px solid var(--color-border-soft);
-            background: var(--color-surface-elevated);
-            border-radius: var(--radius-md);
-            padding: 10px 12px;
-            min-width: 170px;
-            text-align: left;
-            cursor: pointer;
-            transition: all var(--transition-fast) var(--ease-spring);
-            box-shadow: 0 2px 6px rgba(27, 23, 20, 0.06);
-        }
-
-        .recent-item:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(27, 23, 20, 0.12);
-            border-color: var(--color-border);
-        }
-
-        .recent-item:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-        }
-
-        .recent-provider {
-            font-size: var(--font-size-body);
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-primary);
-            margin-bottom: 4px;
-        }
-
-        .recent-model {
-            font-size: var(--font-size-caption);
-            color: var(--color-text-tertiary);
-            line-height: 1.4;
-        }
-
-        .recent-empty {
-            font-size: var(--font-size-caption);
-            color: var(--color-text-tertiary);
-        }
-
         .health-report {
             margin-top: 10px;
             padding: 10px 12px;
@@ -657,7 +829,7 @@
             outline: none;
             cursor: pointer;
             appearance: none;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%235C5046' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23505A66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
             background-repeat: no-repeat;
             background-position: right 14px center;
             background-size: 12px;
@@ -807,6 +979,32 @@
             justify-content: flex-end;
         }
 
+        .session-toolbar-footer {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            gap: var(--spacing-xs);
+            margin-top: -2px;
+            padding-top: 6px;
+            margin-bottom: 12px;
+            border-top: 1px dashed var(--color-border-soft);
+        }
+
+        .session-toolbar-footer .quick-option {
+            margin: 0;
+            padding: 6px 10px;
+            border-radius: var(--radius-sm);
+            border: 1px solid var(--color-border-soft);
+            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
+            box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.04);
+            transition: all var(--transition-fast) var(--ease-spring);
+            line-height: 1.2;
+        }
+
+        .session-toolbar-footer .quick-option:hover {
+            border-color: var(--color-border-strong);
+        }
+
         .session-source-select,
         .session-path-select,
         .session-query-input,
@@ -906,37 +1104,10 @@
             margin-left: auto;
         }
 
-        .btn-session-export {
-            border: 1px solid var(--color-border-soft);
-            border-radius: var(--radius-sm);
-            background: linear-gradient(to bottom, var(--color-surface) 0%, rgba(255, 255, 255, 0.9) 100%);
-            color: var(--color-text-secondary);
-            padding: 8px 12px;
-            font-size: var(--font-size-secondary);
-            font-weight: var(--font-weight-secondary);
-            cursor: pointer;
-            transition: all var(--transition-fast) var(--ease-spring);
-            white-space: nowrap;
-            box-shadow: var(--shadow-subtle);
-            letter-spacing: -0.01em;
-        }
-
-        .btn-session-open {
-            border: 1px solid var(--color-border-soft);
-            border-radius: var(--radius-sm);
-            background: linear-gradient(to bottom, var(--color-surface) 0%, rgba(255, 255, 255, 0.9) 100%);
-            color: var(--color-text-secondary);
-            padding: 8px 12px;
-            font-size: var(--font-size-secondary);
-            font-weight: var(--font-weight-secondary);
-            cursor: pointer;
-            transition: all var(--transition-fast) var(--ease-spring);
-            white-space: nowrap;
-            box-shadow: var(--shadow-subtle);
-            letter-spacing: -0.01em;
-        }
-
-        .btn-session-clone {
+        .btn-session-export,
+        .btn-session-open,
+        .btn-session-clone,
+        .btn-session-refresh {
             border: 1px solid var(--color-border-soft);
             border-radius: var(--radius-sm);
             background: linear-gradient(to bottom, var(--color-surface) 0%, rgba(255, 255, 255, 0.9) 100%);
@@ -952,7 +1123,7 @@
         }
 
         .btn-session-delete {
-            border: 1px solid rgba(189, 70, 68, 0.4);
+            border: 1px solid rgba(189, 70, 68, 0.45);
             border-radius: var(--radius-sm);
             background: linear-gradient(to bottom, rgba(255, 245, 245, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
             color: #b74545;
@@ -966,21 +1137,6 @@
             letter-spacing: -0.01em;
         }
 
-        .btn-session-refresh {
-            border: 1px solid var(--color-border-soft);
-            border-radius: var(--radius-sm);
-            background: linear-gradient(to bottom, var(--color-surface) 0%, rgba(255, 255, 255, 0.9) 100%);
-            color: var(--color-text-secondary);
-            padding: 8px 12px;
-            font-size: var(--font-size-secondary);
-            font-weight: var(--font-weight-secondary);
-            cursor: pointer;
-            transition: all var(--transition-fast) var(--ease-spring);
-            white-space: nowrap;
-            box-shadow: var(--shadow-subtle);
-            letter-spacing: -0.01em;
-        }
-
         .btn-session-refresh:hover {
             border-color: var(--color-brand);
             color: var(--color-brand);
@@ -1062,38 +1218,38 @@
             min-height: 520px;
         }
 
-        .session-layout.session-standalone {
-            grid-template-columns: minmax(0, 1fr);
-        }
-
-        .session-standalone-page {
-            max-width: 960px;
-            margin: 0 auto;
-            padding: var(--spacing-sm) 0;
-        }
-
-        .session-standalone-title {
-            font-size: var(--font-size-title);
-            font-weight: var(--font-weight-title);
-            color: var(--color-text-primary);
-            margin-bottom: var(--spacing-sm);
-            letter-spacing: -0.01em;
-        }
-
-        .session-standalone-text {
-            white-space: pre-wrap;
-            font-family: var(--font-family-body);
-            font-size: var(--font-size-body);
-            line-height: 1.7;
-            color: var(--color-text-primary);
-            word-break: break-word;
-        }
-
-        .session-list {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-xs);
-            position: sticky;
+        .session-layout.session-standalone {
+            grid-template-columns: minmax(0, 1fr);
+        }
+
+        .session-standalone-page {
+            max-width: 960px;
+            margin: 0 auto;
+            padding: var(--spacing-sm) 0;
+        }
+
+        .session-standalone-title {
+            font-size: var(--font-size-title);
+            font-weight: var(--font-weight-title);
+            color: var(--color-text-primary);
+            margin-bottom: var(--spacing-sm);
+            letter-spacing: -0.01em;
+        }
+
+        .session-standalone-text {
+            white-space: pre-wrap;
+            font-family: var(--font-family-body);
+            font-size: var(--font-size-body);
+            line-height: 1.7;
+            color: var(--color-text-primary);
+            word-break: break-word;
+        }
+
+        .session-list {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-xs);
+            position: sticky;
             top: 12px;
             height: 100%;
             max-height: none;
@@ -1207,21 +1363,6 @@
             transition: all var(--transition-fast) var(--ease-spring);
         }
 
-        .session-item-delete {
-            border: 1px solid rgba(189, 70, 68, 0.35);
-            background: rgba(189, 70, 68, 0.08);
-            color: #b74545;
-            width: 28px;
-            height: 28px;
-            border-radius: 8px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            flex-shrink: 0;
-            transition: all var(--transition-fast) var(--ease-spring);
-        }
-
         .session-item-copy:hover {
             border-color: rgba(70, 86, 110, 0.7);
             background: rgba(70, 86, 110, 0.16);
@@ -1229,35 +1370,17 @@
             transform: translateY(-1px);
         }
 
-        .session-item-delete:hover {
-            border-color: rgba(189, 70, 68, 0.7);
-            background: rgba(189, 70, 68, 0.18);
-            color: #9f3b3b;
-            transform: translateY(-1px);
-        }
-
         .session-item-copy:disabled {
             opacity: 0.5;
             cursor: not-allowed;
             transform: none;
         }
 
-        .session-item-delete:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            transform: none;
-        }
-
         .session-item-copy svg {
             width: 16px;
             height: 16px;
         }
 
-        .session-item-delete svg {
-            width: 16px;
-            height: 16px;
-        }
-
         .session-item-sub {
             font-size: var(--font-size-caption);
             color: var(--color-text-tertiary);
@@ -1510,6 +1633,10 @@
                 justify-content: flex-start;
             }
 
+            .session-toolbar-footer {
+                justify-content: flex-start;
+            }
+
             .session-list {
                 position: static;
                 max-height: 300px;
@@ -2221,6 +2348,19 @@
             outline-offset: 2px;
         }
 
+        @media (max-width: 960px) {
+            .container {
+                padding: var(--spacing-sm);
+            }
+            .main-panel {
+                padding: var(--spacing-sm) var(--spacing-sm);
+                border-radius: 14px;
+            }
+            .top-tabs {
+                grid-template-columns: repeat(2, minmax(0, 1fr));
+            }
+        }
+
         @media (max-width: 720px) {
             .main-title {
                 font-size: 40px;
@@ -2236,37 +2376,93 @@
                 gap: 6px;
             }
         }
+
+        @media (max-width: 540px) {
+            body {
+                padding: var(--spacing-md) var(--spacing-sm);
+            }
+            .container {
+                padding: 0 var(--spacing-sm) var(--spacing-md);
+            }
+            .hero-title {
+                font-size: 36px;
+            }
+            .hero-subtitle {
+                font-size: var(--font-size-secondary);
+            }
+            .top-tabs {
+                grid-template-columns: repeat(1, minmax(0, 1fr));
+            }
+            .main-panel {
+                padding: var(--spacing-sm);
+            }
+            .card {
+                padding: 12px;
+            }
+            .session-layout {
+                grid-template-columns: 1fr;
+                height: auto;
+                min-height: 0;
+            }
+        }
     </style>
 </head>
 <body>
     <div id="app" class="container" v-cloak>
-        <!-- 主标题 -->
-        <h1 v-if="!sessionStandalone" class="main-title">
-            Codex<br>
-            <span class="accent">Mate.</span>
-        </h1>
-        <p v-if="!sessionStandalone" class="subtitle">本地配置中枢，统一管理 Codex / Claude Code / OpenClaw / 会话。</p>
-
-        <!-- 模式切换器 -->
-        <div v-if="!sessionStandalone" class="segmented-control">
-            <button :class="['segment', { active: configMode === 'codex' }]" @click="switchConfigMode('codex')">
-                Codex 配置
-            </button>
-            <button :class="['segment', { active: configMode === 'claude' }]" @click="switchConfigMode('claude')">
-                Claude Code 配置
-            </button>
-            <button :class="['segment', { active: configMode === 'openclaw' }]" @click="switchConfigMode('openclaw')">
-                OpenClaw 配置
-            </button>
-            <button :class="['segment', { active: configMode === 'sessions' }]" @click="switchConfigMode('sessions')">
-                会话浏览
-            </button>
+        <div class="hero" v-if="!sessionStandalone">
+            <div class="hero-title">
+                Codex <span class="accent">Mate.</span>
+            </div>
+            <div class="hero-subtitle">
+                本地配置中枢，统一管理 Codex / Claude Code / OpenClaw / 会话。
+            </div>
+        </div>
+
+        <div v-if="!sessionStandalone" class="top-tabs">
+            <button class="top-tab"
+                :class="{ active: mainTab === 'config' && configMode === 'codex' }"
+                @click="switchConfigMode('codex')">Codex 配置</button>
+            <button class="top-tab"
+                :class="{ active: mainTab === 'config' && configMode === 'claude' }"
+                @click="switchConfigMode('claude')">Claude Code 配置</button>
+            <button class="top-tab"
+                :class="{ active: mainTab === 'config' && configMode === 'openclaw' }"
+                @click="switchConfigMode('openclaw')">OpenClaw 配置</button>
+            <button class="top-tab"
+                :class="{ active: mainTab === 'sessions' }"
+                @click="switchMainTab('sessions')">会话浏览</button>
         </div>
 
-        <!-- 内容包裹器 - 稳定布局 -->
-        <div class="content-wrapper">
-            <!-- Codex 配置模式 -->
-            <div v-show="configMode === 'codex'" class="mode-content">
+        <div :class="['app-shell', { standalone: sessionStandalone }]">
+            <main class="main-panel">
+                <div class="panel-header" v-if="!sessionStandalone">
+                    <h1 class="main-title">
+                        {{ mainTab === 'config' ? '配置中心' : '会话浏览' }}
+                    </h1>
+                    <p class="subtitle" v-if="mainTab === 'config'">
+                        本地配置中枢，统一管理 Codex / Claude Code / OpenClaw。
+                    </p>
+                    <p class="subtitle" v-else>
+                        浏览、导出或独立查看 Codex / Claude 会话记录。
+                    </p>
+                </div>
+
+                <div v-if="false && mainTab === 'config' && !sessionStandalone" class="config-subtabs">
+                    <button :class="['config-subtab', { active: configMode === 'codex' }]" @click="switchConfigMode('codex')">
+                        Codex 配置
+                    </button>
+                    <button :class="['config-subtab', { active: configMode === 'claude' }]" @click="switchConfigMode('claude')">
+                        Claude Code 配置
+                    </button>
+                    <button :class="['config-subtab', { active: configMode === 'openclaw' }]" @click="switchConfigMode('openclaw')">
+                        OpenClaw 配置
+                    </button>
+                </div>
+
+                <!-- 内容包裹器 - 稳定布局 -->
+                <div class="content-wrapper">
+                    <!-- Codex 配置模式 -->
+                    <div v-show="mainTab === 'config' && configMode === 'codex'" class="mode-content mode-cards">
                 <!-- 添加提供商按钮 -->
                 <button class="btn-add" @click="showAddModal = true" v-if="!loading && !initError">
                     <svg class="icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
@@ -2320,22 +2516,14 @@
 
                 <div class="selector-section">
                     <div class="selector-header">
-                        <span class="selector-title">最近使用</span>
-                        <span v-if="recentLoading" class="selector-title">加载中...</span>
-                    </div>
-                    <div v-if="recentConfigs.length === 0" class="recent-empty">
-                        暂无记录
+                        <span class="selector-title">服务档位</span>
                     </div>
-                    <div v-else class="recent-list">
-                        <button
-                            v-for="item in recentConfigs"
-                            :key="item.provider + '::' + item.model + '::' + (item.usedAt || '')"
-                            class="recent-item"
-                            @click="applyRecentConfig(item)"
-                            :disabled="loading || !!initError">
-                            <div class="recent-provider">{{ item.provider }}</div>
-                            <div class="recent-model">{{ item.model }}</div>
-                        </button>
+                    <select class="model-select" v-model="serviceTier" @change="onServiceTierChange">
+                        <option value="fast">fast（默认）</option>
+                        <option value="standard">standard</option>
+                    </select>
+                    <div class="config-template-hint">
+                        仅 fast 会写入 <code>service_tier</code>。
                     </div>
                 </div>
 
@@ -2384,6 +2572,13 @@
                                         <path d="M13 2L3 14h7l-1 8 12-14h-7l-1-6z"/>
                                     </svg>
                                 </button>
+                                <button class="card-action-btn" :class="{ loading: providerShareLoading[provider.name] }" @click="copyProviderShareCommand(provider)" title="分享导入命令">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/>
+                                        <path d="M16 6l-4-4-4 4"/>
+                                        <path d="M12 2v14"/>
+                                    </svg>
+                                </button>
                                 <button class="card-action-btn" @click="openEditModal(provider)" title="编辑">
                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                         <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
@@ -2403,7 +2598,7 @@
             </div>
 
             <!-- Claude Code 配置模式 -->
-            <div v-show="configMode === 'claude'" class="mode-content">
+            <div v-show="mainTab === 'config' && configMode === 'claude'" class="mode-content mode-cards">
                 <!-- 添加提供商按钮 -->
                 <button class="btn-add" @click="openClaudeConfigModal" v-if="!loading && !initError">
                     <svg class="icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
@@ -2419,7 +2614,16 @@
                     <div class="selector-header">
                         <span class="selector-title">模型</span>
                     </div>
+                    <select
+                        v-if="claudeModelHasList"
+                        class="model-select"
+                        v-model="currentClaudeModel"
+                        @change="onClaudeModelChange"
+                    >
+                        <option v-for="model in claudeModelOptions" :key="model" :value="model">{{ model }}</option>
+                    </select>
                     <input
+                        v-else
                         class="model-input"
                         v-model="currentClaudeModel"
                         @blur="onClaudeModelChange"
@@ -2431,6 +2635,15 @@
                     </div>
                 </div>
 
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">配置健康检查</span>
+                    </div>
+                    <button class="btn-tool" @click="runHealthCheck" :disabled="healthCheckLoading || loading || !!initError">
+                        {{ healthCheckLoading ? '检查中...' : '运行检查' }}
+                    </button>
+                </div>
+
                 <div class="card-list">
                     <div v-for="(config, name) in claudeConfigs" :key="name"
                          :class="['card', { active: currentClaudeConfig === name }]"
@@ -2446,6 +2659,9 @@
                             <span :class="['pill', config.hasKey ? 'configured' : 'empty']">
                                 {{ config.hasKey ? '已配置' : '未配置' }}
                             </span>
+                            <span v-if="claudeSpeedResults[name]" :class="['latency', claudeSpeedResults[name].ok ? 'ok' : 'error']">
+                                {{ formatLatency(claudeSpeedResults[name]) }}
+                            </span>
                             <div class="card-actions" @click.stop>
                                 <button class="card-action-btn" @click="openEditConfigModal(name)" title="编辑">
                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -2453,6 +2669,13 @@
                                         <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                                     </svg>
                                 </button>
+                                <button class="card-action-btn" :class="{ loading: claudeShareLoading[name] }" @click="copyClaudeShareCommand(name)" title="分享导入命令" aria-label="Share import command">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/>
+                                        <path d="M16 6l-4-4-4 4"/>
+                                        <path d="M12 2v14"/>
+                                    </svg>
+                                </button>
                                 <button class="card-action-btn delete" @click="deleteClaudeConfig(name)" title="删除">
                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                         <path d="M3 6h18"/>
@@ -2466,7 +2689,7 @@
             </div>
 
             <!-- OpenClaw 配置模式 -->
-            <div v-show="configMode === 'openclaw'" class="mode-content">
+            <div v-show="mainTab === 'config' && configMode === 'openclaw'" class="mode-content mode-cards">
                 <button class="btn-add" @click="openOpenclawAddModal" v-if="!loading && !initError">
                     <svg class="icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
                         <path d="M10 4v12M4 10h12"/>
@@ -2539,29 +2762,29 @@
                 </div>
             </div>
 
-            <!-- 会话浏览模式 -->
-            <div v-show="configMode === 'sessions'" class="mode-content">
-                <div v-if="sessionStandalone" class="session-standalone-page">
-                    <div v-if="sessionStandaloneLoading" class="state-message">
-                        加载中...
-                    </div>
-                    <div v-else-if="sessionStandaloneError" class="state-message error">
-                        {{ sessionStandaloneError }}
-                    </div>
-                    <div v-else>
-                        <div class="session-standalone-title">
-                            {{ sessionStandaloneTitle }}
-                            <span v-if="sessionStandaloneSourceLabel"> · {{ sessionStandaloneSourceLabel }}</span>
-                        </div>
-                        <pre class="session-standalone-text">{{ sessionStandaloneText }}</pre>
-                    </div>
-                </div>
-
-                <div v-else>
-                <div v-if="!sessionStandalone" class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">会话来源</span>
-                    </div>
+            <!-- 会话浏览模式 -->
+            <div v-show="mainTab === 'sessions'" class="mode-content">
+                <div v-if="sessionStandalone" class="session-standalone-page">
+                    <div v-if="sessionStandaloneLoading" class="state-message">
+                        加载中...
+                    </div>
+                    <div v-else-if="sessionStandaloneError" class="state-message error">
+                        {{ sessionStandaloneError }}
+                    </div>
+                    <div v-else>
+                        <div class="session-standalone-title">
+                            {{ sessionStandaloneTitle }}
+                            <span v-if="sessionStandaloneSourceLabel"> · {{ sessionStandaloneSourceLabel }}</span>
+                        </div>
+                        <pre class="session-standalone-text">{{ sessionStandaloneText }}</pre>
+                    </div>
+                </div>
+
+                <div v-else>
+                <div v-if="!sessionStandalone" class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">会话来源</span>
+                    </div>
                     <div class="session-toolbar">
                         <div class="session-toolbar-group">
                             <select class="session-source-select" v-model="sessionFilterSource" @change="onSessionSourceChange" :disabled="sessionsLoading">
@@ -2617,10 +2840,15 @@
                             </button>
                         </div>
                     </div>
-                    <div class="session-hint">
-                        关键词检索仅 Codex 可用；<br>
-                        角色/时间筛选暂不可用；<br>
-                        仅支持来源与路径筛选，右侧仅查看/导出。
+                    <div class="session-toolbar-footer">
+                        <label class="quick-option">
+                            <input
+                                type="checkbox"
+                                v-model="sessionResumeWithYolo"
+                                @change="onSessionResumeYoloChange"
+                            >
+                            复制恢复命令附带 --yolo
+                        </label>
                     </div>
                 </div>
 
@@ -2661,21 +2889,6 @@
                                             <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"></path>
                                         </svg>
                                     </button>
-                                    <button
-                                        v-if="isDeleteAvailable(session)"
-                                        class="session-item-delete"
-                                        @click.stop="deleteSession(session)"
-                                        :disabled="sessionsLoading || sessionDeleting[getSessionExportKey(session)]"
-                                        aria-label="删除会话"
-                                        title="删除会话">
-                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                            <path d="M3 6h18"></path>
-                                            <path d="M8 6V4h8v2"></path>
-                                            <path d="M19 6l-1 14H6L5 6"></path>
-                                            <path d="M10 11v6"></path>
-                                            <path d="M14 11v6"></path>
-                                        </svg>
-                                    </button>
                                 </div>
                             </div>
                             <div class="session-item-meta">
@@ -2704,7 +2917,7 @@
                                             <span class="session-preview-meta-item">{{ activeSession.cwd }}</span>
                                         </div>
                                     </div>
-                                    <div v-if="!sessionStandalone" class="session-actions">
+                                    <div v-if="!sessionStandalone" class="session-actions">
                                         <button class="btn-session-refresh" @click="loadActiveSessionDetail" :disabled="sessionDetailLoading || !activeSession">
                                             {{ sessionDetailLoading ? '加载中...' : '刷新内容' }}
                                         </button>
@@ -2770,14 +2983,14 @@
                             </div>
                         </template>
 
-                    <div v-else class="session-preview-empty">
-                        <span v-if="sessionStandaloneError">{{ sessionStandaloneError }}</span>
-                        <span v-else>请先在左侧选择一个会话</span>
-                    </div>
-                </div>
-                </div>
-                </div>
-            </div>
+                    <div v-else class="session-preview-empty">
+                        <span v-if="sessionStandaloneError">{{ sessionStandaloneError }}</span>
+                        <span v-else>请先在左侧选择一个会话</span>
+                    </div>
+                </div>
+                </div>
+                </div>
+            </div>
 
             <!-- 加载状态 -->
             <div v-if="loading" class="state-message">
@@ -2790,6 +3003,9 @@
             </div>
         </div>
 
+            </main>
+        </div>
+
         <!-- 添加提供商模态框 -->
         <div v-if="showAddModal" class="modal-overlay" @click.self="showAddModal = false">
             <div class="modal">
@@ -3278,7 +3494,9 @@
 
     <script>
         const { createApp } = Vue;
-        const API_BASE = 'http://localhost:3737';
+        const API_BASE = (location && location.origin && location.origin !== 'null')
+            ? location.origin
+            : 'http://localhost:3737';
         const DEFAULT_OPENCLAW_TEMPLATE = `{
   // OpenClaw config (JSON5)
   agent: {
@@ -3303,9 +3521,11 @@
         const app = createApp({
             data() {
                 return {
+                    mainTab: 'config',
                     configMode: 'codex',
                     currentProvider: '',
                     currentModel: '',
+                    serviceTier: 'fast',
                     providersList: [],
                     models: [],
                     codexModelsLoading: false,
@@ -3346,6 +3566,7 @@
                     sessionQuery: '',
                     sessionRoleFilter: 'all',
                     sessionTimePreset: 'all',
+                    sessionResumeWithYolo: true,
                     sessionPathOptions: [],
                     sessionPathOptionsLoading: false,
                     sessionPathOptionsMap: {
@@ -3366,17 +3587,21 @@
                     activeSessionMessages: [],
                     activeSessionDetailError: '',
                     activeSessionDetailClipped: false,
-                    sessionDetailLoading: false,
-                    sessionDetailRequestSeq: 0,
-                    sessionStandalone: false,
-                    sessionStandaloneError: '',
-                    sessionStandaloneText: '',
-                    sessionStandaloneTitle: '',
-                    sessionStandaloneSourceLabel: '',
-                    sessionStandaloneLoading: false,
-                    sessionStandaloneRequestSeq: 0,
-                    speedResults: {},
+                    sessionDetailLoading: false,
+                    sessionDetailRequestSeq: 0,
+                    sessionStandalone: false,
+                    sessionStandaloneError: '',
+                    sessionStandaloneText: '',
+                    sessionStandaloneTitle: '',
+                    sessionStandaloneSourceLabel: '',
+                    sessionStandaloneLoading: false,
+                    sessionStandaloneRequestSeq: 0,
+                    speedResults: {},
                     speedLoading: {},
+                    claudeSpeedResults: {},
+                    claudeSpeedLoading: {},
+                    claudeShareLoading: {},
+                    providerShareLoading: {},
                     newProvider: { name: '', url: '', key: '' },
                     editingProvider: { name: '', url: '', key: '' },
                     newModelName: '',
@@ -3442,8 +3667,6 @@
                     openclawAgentsList: [],
                     openclawProviders: [],
                     openclawMissingProviders: [],
-                    recentConfigs: [],
-                    recentLoading: false,
                     healthCheckLoading: false,
                     healthCheckResult: null,
                     healthCheckRemote: false
@@ -3451,6 +3674,12 @@
             },
             mounted() {
                 this.initSessionStandalone();
+                const savedSessionYolo = localStorage.getItem('codexmateSessionResumeYolo');
+                if (savedSessionYolo === '0' || savedSessionYolo === 'false') {
+                    this.sessionResumeWithYolo = false;
+                } else if (savedSessionYolo === '1' || savedSessionYolo === 'true') {
+                    this.sessionResumeWithYolo = true;
+                }
                 const savedConfigs = localStorage.getItem('claudeConfigs');
                 if (savedConfigs) {
                     try {
@@ -3462,22 +3691,11 @@
                             }
                         }
                         localStorage.setItem('claudeConfigs', JSON.stringify(this.claudeConfigs));
-
-                        const configNames = Object.keys(this.claudeConfigs);
-                        if (configNames.length > 0) {
-                            this.currentClaudeConfig = configNames[0];
-                        }
                     } catch (e) {
                         console.error('加载 Claude 配置失败:', e);
                     }
                 }
-                if (!this.currentClaudeConfig) {
-                    const configNames = Object.keys(this.claudeConfigs);
-                    if (configNames.length > 0) {
-                        this.currentClaudeConfig = configNames[0];
-                    }
-                }
-                this.syncClaudeModelFromConfig();
+                void this.refreshClaudeSelectionFromSettings({ silent: true });
                 const savedOpenclawConfigs = localStorage.getItem('openclawConfigs');
                 if (savedOpenclawConfigs) {
                     try {
@@ -3504,6 +3722,17 @@
                 },
                 sessionQueryPlaceholder() {
                     return this.isSessionQueryEnabled ? '关键词检索' : '仅 Codex 支持关键词检索';
+                },
+                claudeModelHasList() {
+                    return Array.isArray(this.claudeModels) && this.claudeModels.length > 0;
+                },
+                claudeModelOptions() {
+                    const list = Array.isArray(this.claudeModels) ? [...this.claudeModels] : [];
+                    const current = (this.currentClaudeModel || '').trim();
+                    if (current && !list.includes(current)) {
+                        list.unshift(current);
+                    }
+                    return list;
                 }
             },
             methods: {
@@ -3519,6 +3748,12 @@
                         } else {
                             this.currentProvider = statusRes.provider;
                             this.currentModel = statusRes.model;
+                            {
+                                const tier = typeof statusRes.serviceTier === 'string'
+                                    ? statusRes.serviceTier.trim().toLowerCase()
+                                    : '';
+                                this.serviceTier = tier === 'fast' ? 'fast' : (tier ? 'standard' : 'fast');
+                            }
                             this.providersList = listRes.providers;
                             await this.loadModelsForProvider(this.currentProvider);
                             if (statusRes.configReady === false) {
@@ -3529,7 +3764,6 @@
                             }
                             this.maybeShowStarPrompt();
                         }
-                        await this.loadRecentConfigs();
                     } catch (e) {
                         this.initError = '连接失败: ' + e.message;
                     } finally {
@@ -3580,6 +3814,109 @@
                     return this.claudeConfigs[this.currentClaudeConfig] || null;
                 },
 
+                normalizeClaudeValue(value) {
+                    return typeof value === 'string' ? value.trim() : '';
+                },
+
+                normalizeClaudeConfig(config) {
+                    const safe = config && typeof config === 'object' ? config : {};
+                    return {
+                        apiKey: this.normalizeClaudeValue(safe.apiKey),
+                        baseUrl: this.normalizeClaudeValue(safe.baseUrl),
+                        model: this.normalizeClaudeValue(safe.model)
+                    };
+                },
+
+                normalizeClaudeSettingsEnv(env) {
+                    const safe = env && typeof env === 'object' ? env : {};
+                    return {
+                        apiKey: this.normalizeClaudeValue(safe.ANTHROPIC_API_KEY),
+                        baseUrl: this.normalizeClaudeValue(safe.ANTHROPIC_BASE_URL),
+                        model: this.normalizeClaudeValue(safe.ANTHROPIC_MODEL)
+                    };
+                },
+
+                matchClaudeConfigFromSettings(env) {
+                    const normalizedSettings = this.normalizeClaudeSettingsEnv(env);
+                    if (!normalizedSettings.apiKey || !normalizedSettings.baseUrl || !normalizedSettings.model) {
+                        return '';
+                    }
+                    const entries = Object.entries(this.claudeConfigs || {});
+                    for (const [name, config] of entries) {
+                        const normalizedConfig = this.normalizeClaudeConfig(config);
+                        if (!normalizedConfig.apiKey || !normalizedConfig.baseUrl || !normalizedConfig.model) {
+                            continue;
+                        }
+                        if (normalizedConfig.apiKey === normalizedSettings.apiKey
+                            && normalizedConfig.baseUrl === normalizedSettings.baseUrl
+                            && normalizedConfig.model === normalizedSettings.model) {
+                            return name;
+                        }
+                    }
+                    return '';
+                },
+
+                findDuplicateClaudeConfigName(config) {
+                    const normalized = this.normalizeClaudeConfig(config);
+                    if (!normalized.apiKey || !normalized.baseUrl || !normalized.model) {
+                        return '';
+                    }
+                    const entries = Object.entries(this.claudeConfigs || {});
+                    for (const [name, existing] of entries) {
+                        const normalizedExisting = this.normalizeClaudeConfig(existing);
+                        if (!normalizedExisting.apiKey || !normalizedExisting.baseUrl || !normalizedExisting.model) {
+                            continue;
+                        }
+                        if (normalizedExisting.apiKey === normalized.apiKey
+                            && normalizedExisting.baseUrl === normalized.baseUrl
+                            && normalizedExisting.model === normalized.model) {
+                            return name;
+                        }
+                    }
+                    return '';
+                },
+
+                async refreshClaudeSelectionFromSettings(options = {}) {
+                    const configNames = Object.keys(this.claudeConfigs || {});
+                    if (configNames.length === 0) {
+                        this.currentClaudeConfig = '';
+                        this.currentClaudeModel = '';
+                        this.resetClaudeModelsState();
+                        return;
+                    }
+                    const silent = !!options.silent;
+                    try {
+                        const res = await api('get-claude-settings');
+                        if (res && res.error) {
+                            if (!silent) {
+                                this.showMessage('读取 Claude 配置失败: ' + res.error, 'error');
+                            }
+                            return;
+                        }
+                        const matchName = this.matchClaudeConfigFromSettings((res && res.env) || {});
+                        if (matchName) {
+                            if (this.currentClaudeConfig !== matchName) {
+                                this.currentClaudeConfig = matchName;
+                            }
+                            this.refreshClaudeModelContext();
+                            return;
+                        }
+                        this.currentClaudeConfig = '';
+                        this.currentClaudeModel = '';
+                        this.resetClaudeModelsState();
+                        if (!silent) {
+                            const tip = res && res.exists
+                                ? '当前 Claude settings.json 与本地配置不匹配，已取消选中'
+                                : '未检测到 Claude settings.json，已取消选中';
+                            this.showMessage(tip, 'info');
+                        }
+                    } catch (e) {
+                        if (!silent) {
+                            this.showMessage('读取 Claude 配置失败: ' + e.message, 'error');
+                        }
+                    }
+                },
+
                 syncClaudeModelFromConfig() {
                     const config = this.getCurrentClaudeConfig();
                     this.currentClaudeModel = config && config.model ? config.model : '';
@@ -3604,6 +3941,10 @@
 
                 async loadClaudeModels() {
                     const config = this.getCurrentClaudeConfig();
+                    if (!config) {
+                        this.resetClaudeModelsState();
+                        return;
+                    }
                     const baseUrl = (config.baseUrl || '').trim();
                     const apiKey = (config.apiKey || '').trim();
 
@@ -3656,13 +3997,21 @@
                 },
 
                 switchConfigMode(mode) {
+                    this.mainTab = 'config';
                     this.configMode = mode;
                     if (mode === 'claude') {
                         this.refreshClaudeModelContext();
                     }
-                    if (mode === 'sessions' && this.sessionsList.length === 0) {
+                },
+
+                switchMainTab(tab) {
+                    this.mainTab = tab;
+                    if (tab === 'sessions' && this.sessionsList.length === 0) {
                         this.loadSessions();
                     }
+                    if (tab === 'config' && this.configMode === 'claude') {
+                        this.refreshClaudeModelContext();
+                    }
                 },
 
                 getSessionStandaloneContext() {
@@ -3708,7 +4057,7 @@
                     if (!context.requested) return;
 
                     this.sessionStandalone = true;
-                    this.configMode = 'sessions';
+                    this.mainTab = 'sessions';
 
                     if (context.error || !context.params) {
                         this.sessionStandaloneError = `会话链接参数不完整：${context.error || '参数解析失败'}`;
@@ -3716,22 +4065,22 @@
                     }
 
                     const sourceLabel = context.params.source === 'codex' ? 'Codex' : 'Claude Code';
-                    this.activeSession = {
-                        source: context.params.source,
-                        sourceLabel,
-                        sessionId: context.params.sessionId,
-                        filePath: context.params.filePath,
-                        title: context.params.sessionId || context.params.filePath || '会话'
-                    };
-                    this.activeSessionMessages = [];
-                    this.activeSessionDetailError = '';
-                    this.activeSessionDetailClipped = false;
-                    this.sessionStandaloneError = '';
-                    this.sessionStandaloneText = '';
-                    this.sessionStandaloneTitle = this.activeSession.title || '会话';
-                    this.sessionStandaloneSourceLabel = sourceLabel;
-                    this.loadSessionStandalonePlain();
-                },
+                    this.activeSession = {
+                        source: context.params.source,
+                        sourceLabel,
+                        sessionId: context.params.sessionId,
+                        filePath: context.params.filePath,
+                        title: context.params.sessionId || context.params.filePath || '会话'
+                    };
+                    this.activeSessionMessages = [];
+                    this.activeSessionDetailError = '';
+                    this.activeSessionDetailClipped = false;
+                    this.sessionStandaloneError = '';
+                    this.sessionStandaloneText = '';
+                    this.sessionStandaloneTitle = this.activeSession.title || '会话';
+                    this.sessionStandaloneSourceLabel = sourceLabel;
+                    this.loadSessionStandalonePlain();
+                },
 
                 buildSessionStandaloneUrl(session) {
                     if (!session) return '';
@@ -3789,10 +4138,14 @@
 
                 buildResumeCommand(session) {
                     const sessionId = session && session.sessionId ? String(session.sessionId).trim() : '';
-                    return `codex resume ${this.quoteResumeArg(sessionId)}`;
+                    const arg = this.quoteResumeArg(sessionId);
+                    if (this.sessionResumeWithYolo) {
+                        return `codex --yolo resume ${arg}`;
+                    }
+                    return `codex resume ${arg}`;
                 },
 
-                quoteResumeArg(value) {
+                quoteShellArg(value) {
                     const text = typeof value === 'string' ? value : String(value || '');
                     if (!text) return "''";
                     if (/^[a-zA-Z0-9._-]+$/.test(text)) return text;
@@ -3800,6 +4153,10 @@
                     return `'${escaped}'`;
                 },
 
+                quoteResumeArg(value) {
+                    return this.quoteShellArg(value);
+                },
+
                 fallbackCopyText(text) {
                     let textarea = null;
                     try {
@@ -3860,6 +4217,121 @@
                     this.showMessage('复制失败，请手动复制命令', 'error');
                 },
 
+                buildProviderShareCommand(payload) {
+                    if (!payload || typeof payload !== 'object') return '';
+                    const name = typeof payload.name === 'string' ? payload.name.trim() : '';
+                    const baseUrl = typeof payload.baseUrl === 'string' ? payload.baseUrl.trim() : '';
+                    const apiKey = typeof payload.apiKey === 'string' ? payload.apiKey : '';
+                    if (!name || !baseUrl) return '';
+
+                    const nameArg = this.quoteShellArg(name);
+                    const urlArg = this.quoteShellArg(baseUrl);
+                    const keyArg = apiKey ? this.quoteShellArg(apiKey) : '';
+                    const switchCmd = `codexmate switch ${nameArg}`;
+                    const addCmd = apiKey
+                        ? `codexmate add ${nameArg} ${urlArg} ${keyArg}`
+                        : `codexmate add ${nameArg} ${urlArg}`;
+                    return `${addCmd} && ${switchCmd}`;
+                },
+
+                buildClaudeShareCommand(payload) {
+                    if (!payload || typeof payload !== 'object') return '';
+                    const baseUrl = typeof payload.baseUrl === 'string' ? payload.baseUrl.trim() : '';
+                    const apiKey = typeof payload.apiKey === 'string' ? payload.apiKey : '';
+                    const model = typeof payload.model === 'string' && payload.model.trim()
+                        ? payload.model.trim()
+                        : 'glm-4.7';
+                    if (!baseUrl || !apiKey) return '';
+                    const urlArg = this.quoteShellArg(baseUrl);
+                    const keyArg = this.quoteShellArg(apiKey);
+                    const modelArg = this.quoteShellArg(model);
+                    return `codexmate claude ${urlArg} ${keyArg} ${modelArg}`;
+                },
+
+                async copyProviderShareCommand(provider) {
+                    const name = provider && typeof provider.name === 'string' ? provider.name.trim() : '';
+                    if (!name) {
+                        this.showMessage('提供商名称无效', 'error');
+                        return;
+                    }
+                    if (this.providerShareLoading[name]) {
+                        return;
+                    }
+                    this.providerShareLoading[name] = true;
+                    try {
+                        const res = await api('export-provider', { name });
+                        if (res && res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        const command = this.buildProviderShareCommand(res && res.payload ? res.payload : null);
+                        if (!command) {
+                            this.showMessage('分享命令生成失败', 'error');
+                            return;
+                        }
+                        const ok = this.fallbackCopyText(command);
+                        if (ok) {
+                            this.showMessage('已复制分享命令', 'success');
+                            return;
+                        }
+                        try {
+                            if (navigator.clipboard && window.isSecureContext) {
+                                await navigator.clipboard.writeText(command);
+                                this.showMessage('已复制分享命令', 'success');
+                                return;
+                            }
+                        } catch (e) {
+                            // keep fallback failure message
+                        }
+                        this.showMessage('复制失败，请手动复制命令', 'error');
+                    } catch (e) {
+                        this.showMessage('生成分享命令失败: ' + e.message, 'error');
+                    } finally {
+                        this.providerShareLoading[name] = false;
+                    }
+                },
+
+                async copyClaudeShareCommand(name) {
+                    const config = this.claudeConfigs[name];
+                    if (!config) {
+                        this.showMessage('配置不存在', 'error');
+                        return;
+                    }
+                    if (this.claudeShareLoading[name]) return;
+                    this.claudeShareLoading[name] = true;
+                    try {
+                        const res = await api('export-claude-share', { config });
+                        if (res && res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        const command = this.buildClaudeShareCommand(res && res.payload ? res.payload : null);
+                        if (!command) {
+                            this.showMessage('分享命令生成失败', 'error');
+                            return;
+                        }
+                        const ok = this.fallbackCopyText(command);
+                        if (ok) {
+                            this.showMessage('已复制分享命令', 'success');
+                            return;
+                        }
+                        try {
+                            if (navigator.clipboard && window.isSecureContext) {
+                                await navigator.clipboard.writeText(command);
+                                this.showMessage('已复制分享命令', 'success');
+                                return;
+                            }
+                        } catch (e) {
+                            // fall through
+                        }
+                        this.showMessage('复制失败，请手动复制命令', 'error');
+                    } catch (e) {
+                        this.showMessage('生成分享命令失败: ' + e.message, 'error');
+                    } finally {
+                        this.claudeShareLoading[name] = false;
+                    }
+                },
+
                 async cloneSession(session) {
                     if (!this.isCloneAvailable(session)) {
                         this.showMessage('当前会话不支持克隆', 'error');
@@ -4034,6 +4506,11 @@
                     }
                 },
 
+                onSessionResumeYoloChange() {
+                    const value = this.sessionResumeWithYolo ? '1' : '0';
+                    localStorage.setItem('codexmateSessionResumeYolo', value);
+                },
+
                 async onSessionSourceChange() {
                     this.refreshSessionPathOptions(this.sessionFilterSource);
                     await this.loadSessions();
@@ -4138,66 +4615,66 @@
                     }
                 },
 
-                async selectSession(session) {
-                    if (!session) return;
-                    if (this.activeSession && this.getSessionExportKey(this.activeSession) === this.getSessionExportKey(session)) return;
-                    this.activeSession = session;
-                    this.activeSessionMessages = [];
-                    this.activeSessionDetailError = '';
-                    this.activeSessionDetailClipped = false;
-                    await this.loadActiveSessionDetail();
-                },
-
-                async loadSessionStandalonePlain() {
-                    if (!this.activeSession) {
-                        this.sessionStandaloneText = '';
-                        this.sessionStandaloneTitle = '会话';
-                        this.sessionStandaloneSourceLabel = '';
-                        this.sessionStandaloneError = '';
-                        return;
-                    }
-
-                    const requestSeq = ++this.sessionStandaloneRequestSeq;
-                    this.sessionStandaloneLoading = true;
-                    this.sessionStandaloneError = '';
-                    try {
-                        const res = await api('session-plain', {
-                            source: this.activeSession.source,
-                            sessionId: this.activeSession.sessionId,
-                            filePath: this.activeSession.filePath
-                        });
-
-                        if (requestSeq !== this.sessionStandaloneRequestSeq) {
-                            return;
-                        }
-
-                        if (res.error) {
-                            this.sessionStandaloneText = '';
-                            this.sessionStandaloneError = res.error;
-                            return;
-                        }
-
-                        this.sessionStandaloneSourceLabel = res.sourceLabel || this.activeSession.sourceLabel || '';
-                        this.sessionStandaloneTitle = res.sessionId || this.activeSession.title || '会话';
-                        this.sessionStandaloneText = typeof res.text === 'string' ? res.text : '';
-                    } catch (e) {
-                        if (requestSeq !== this.sessionStandaloneRequestSeq) {
-                            return;
-                        }
-                        this.sessionStandaloneText = '';
-                        this.sessionStandaloneError = '加载会话内容失败: ' + e.message;
-                    } finally {
-                        if (requestSeq === this.sessionStandaloneRequestSeq) {
-                            this.sessionStandaloneLoading = false;
-                        }
-                    }
-                },
-
-                async loadActiveSessionDetail() {
-                    if (!this.activeSession) {
-                        this.activeSessionMessages = [];
-                        this.activeSessionDetailError = '';
-                        this.activeSessionDetailClipped = false;
+                async selectSession(session) {
+                    if (!session) return;
+                    if (this.activeSession && this.getSessionExportKey(this.activeSession) === this.getSessionExportKey(session)) return;
+                    this.activeSession = session;
+                    this.activeSessionMessages = [];
+                    this.activeSessionDetailError = '';
+                    this.activeSessionDetailClipped = false;
+                    await this.loadActiveSessionDetail();
+                },
+
+                async loadSessionStandalonePlain() {
+                    if (!this.activeSession) {
+                        this.sessionStandaloneText = '';
+                        this.sessionStandaloneTitle = '会话';
+                        this.sessionStandaloneSourceLabel = '';
+                        this.sessionStandaloneError = '';
+                        return;
+                    }
+
+                    const requestSeq = ++this.sessionStandaloneRequestSeq;
+                    this.sessionStandaloneLoading = true;
+                    this.sessionStandaloneError = '';
+                    try {
+                        const res = await api('session-plain', {
+                            source: this.activeSession.source,
+                            sessionId: this.activeSession.sessionId,
+                            filePath: this.activeSession.filePath
+                        });
+
+                        if (requestSeq !== this.sessionStandaloneRequestSeq) {
+                            return;
+                        }
+
+                        if (res.error) {
+                            this.sessionStandaloneText = '';
+                            this.sessionStandaloneError = res.error;
+                            return;
+                        }
+
+                        this.sessionStandaloneSourceLabel = res.sourceLabel || this.activeSession.sourceLabel || '';
+                        this.sessionStandaloneTitle = res.sessionId || this.activeSession.title || '会话';
+                        this.sessionStandaloneText = typeof res.text === 'string' ? res.text : '';
+                    } catch (e) {
+                        if (requestSeq !== this.sessionStandaloneRequestSeq) {
+                            return;
+                        }
+                        this.sessionStandaloneText = '';
+                        this.sessionStandaloneError = '加载会话内容失败: ' + e.message;
+                    } finally {
+                        if (requestSeq === this.sessionStandaloneRequestSeq) {
+                            this.sessionStandaloneLoading = false;
+                        }
+                    }
+                },
+
+                async loadActiveSessionDetail() {
+                    if (!this.activeSession) {
+                        this.activeSessionMessages = [];
+                        this.activeSessionDetailError = '';
+                        this.activeSessionDetailClipped = false;
                         return;
                     }
 
@@ -4283,22 +4760,22 @@
                             sessionId: session.sessionId,
                             filePath: session.filePath
                         });
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
-                            return;
-                        }
-
-                        const fileName = res.fileName || `${session.source || 'session'}-${session.sessionId || Date.now()}.md`;
-                        this.downloadTextFile(fileName, res.content || '');
-                        if (res.truncated) {
-                            const maxLabel = res.maxMessages === 'all' ? 'all' : res.maxMessages;
-                            this.showMessage(`会话导出完成（已截断：最多 ${maxLabel} 条消息）`, 'info');
-                        } else {
-                            this.showMessage('会话导出完成', 'success');
-                        }
-                    } catch (e) {
-                        this.showMessage('导出失败: ' + e.message, 'error');
-                    } finally {
+                        if (res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+
+                        const fileName = res.fileName || `${session.source || 'session'}-${session.sessionId || Date.now()}.md`;
+                        this.downloadTextFile(fileName, res.content || '');
+                        if (res.truncated) {
+                            const maxLabel = res.maxMessages === 'all' ? 'all' : res.maxMessages;
+                            this.showMessage(`会话导出完成（已截断：最多 ${maxLabel} 条消息）`, 'info');
+                        } else {
+                            this.showMessage('会话导出完成', 'success');
+                        }
+                    } catch (e) {
+                        this.showMessage('导出失败: ' + e.message, 'error');
+                    } finally {
                         this.sessionExporting[key] = false;
                     }
                 },
@@ -4313,32 +4790,8 @@
                     await this.openConfigTemplateEditor();
                 },
 
-                async loadRecentConfigs() {
-                    this.recentLoading = true;
-                    try {
-                        const res = await api('get-recent-configs');
-                        if (res && Array.isArray(res.items)) {
-                            this.recentConfigs = res.items;
-                        } else {
-                            this.recentConfigs = [];
-                        }
-                    } catch (e) {
-                        this.recentConfigs = [];
-                    } finally {
-                        this.recentLoading = false;
-                    }
-                },
-
-                async applyRecentConfig(item) {
-                    if (!item || !item.provider || !item.model) {
-                        this.showMessage('最近配置无效，无法应用', 'error');
-                        return;
-                    }
-                    this.currentProvider = item.provider;
-                    this.currentModel = item.model;
-                    await this.openConfigTemplateEditor({
-                        appendHint: '最近使用配置，确认后将写入 config.toml'
-                    });
+                async onServiceTierChange() {
+                    await this.openConfigTemplateEditor();
                 },
 
                 async runHealthCheck() {
@@ -4393,6 +4846,12 @@
                         this.healthCheckResult = null;
                         this.showMessage('健康检查失败: ' + e.message, 'error');
                     } finally {
+                        if (this.configMode === 'claude') {
+                            try {
+                                const entries = Object.entries(this.claudeConfigs || {});
+                                await Promise.all(entries.map(([name, config]) => this.runClaudeSpeedTest(name, config)));
+                            } catch (e) {}
+                        }
                         this.healthCheckLoading = false;
                     }
                 },
@@ -4407,7 +4866,8 @@
                     try {
                         const res = await api('get-config-template', {
                             provider: this.currentProvider,
-                            model: this.currentModel
+                            model: this.currentModel,
+                            serviceTier: this.serviceTier
                         });
                         if (res.error) {
                             this.showMessage(res.error, 'error');
@@ -4816,6 +5276,10 @@
                     if (this.claudeConfigs[name]) {
                         return this.showMessage('配置名称已存在', 'error');
                     }
+                    const duplicateName = this.findDuplicateClaudeConfigName(this.newClaudeConfig);
+                    if (duplicateName) {
+                        return this.showMessage('已存在相同配置，已忽略添加', 'info');
+                    }
 
                     this.claudeConfigs[name] = {
                         apiKey: this.newClaudeConfig.apiKey,
@@ -5910,6 +6374,33 @@
                     }
                 },
 
+                async runClaudeSpeedTest(name, config) {
+                    if (!name || this.claudeSpeedLoading[name]) return null;
+                    const baseUrl = config && typeof config.baseUrl === 'string' ? config.baseUrl.trim() : '';
+                    this.claudeSpeedLoading[name] = true;
+                    try {
+                        if (!baseUrl) {
+                            const res = { ok: false, error: 'Missing base URL' };
+                            this.claudeSpeedResults[name] = res;
+                            return res;
+                        }
+                        const res = await api('speed-test', { url: baseUrl });
+                        if (res.error) {
+                            this.claudeSpeedResults[name] = { ok: false, error: res.error };
+                            return { ok: false, error: res.error };
+                        }
+                        this.claudeSpeedResults[name] = res;
+                        return res;
+                    } catch (e) {
+                        const message = e && e.message ? e.message : 'Speed test failed';
+                        const res = { ok: false, error: message };
+                        this.claudeSpeedResults[name] = res;
+                        return res;
+                    } finally {
+                        this.claudeSpeedLoading[name] = false;
+                    }
+                },
+
                 showMessage(text, type) {
                     this.message = text;
                     this.messageType = type || 'info';