codexmate 0.0.7 → 0.0.9

package/web-ui.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Codex Mate</title>
-    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
-    <script src="https://unpkg.com/json5@2/dist/index.min.js"></script>
+    <script src="res/vue.global.js"></script>
+    <script src="res/json5.min.js"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Source+Sans+3:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');
 
@@ -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,355 @@
             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: 1280px;
             margin: 0 auto;
-            padding-bottom: var(--spacing-lg);
+            padding: 16px 12px 28px;
             position: relative;
             z-index: 1;
         }
 
+        /* ============================================
+           布局：双列（侧栏 + 主区）
+           ============================================ */
+        .app-shell {
+            display: grid;
+            grid-template-columns: 320px minmax(0, 1fr);
+            gap: var(--spacing-md);
+            align-items: flex-start;
+        }
+
+        .app-shell.standalone {
+            grid-template-columns: 1fr;
+        }
+
+        .side-rail {
+            position: sticky;
+            top: var(--spacing-md);
+            align-self: start;
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-sm);
+            padding: var(--spacing-md) var(--spacing-sm);
+            background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 250, 245, 0.9) 100%);
+            border: 1px solid rgba(216, 201, 184, 0.65);
+            border-radius: var(--radius-xl);
+            box-shadow: var(--shadow-card);
+            min-height: 420px;
+        }
+
+        .side-rail .brand-title {
+            font-size: 24px;
+            margin-bottom: 2px;
+        }
+
+        .side-section {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .side-section-title {
+            font-size: var(--font-size-secondary);
+            font-weight: var(--font-weight-secondary);
+            color: var(--color-text-tertiary);
+            letter-spacing: 0.01em;
+            padding: 0 var(--spacing-xs);
+        }
+
+        .side-item {
+            width: 100%;
+            text-align: left;
+            padding: 12px var(--spacing-sm);
+            border-radius: var(--radius-lg);
+            border: 1px solid var(--color-border-soft);
+            background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 247, 240, 0.95) 100%);
+            color: var(--color-text-secondary);
+            cursor: pointer;
+            transition: all var(--transition-normal) var(--ease-spring);
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            box-shadow: var(--shadow-subtle);
+        }
+
+        .side-item:hover {
+            border-color: var(--color-brand);
+            color: var(--color-text-primary);
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-card-hover);
+        }
+
+        .side-item.active {
+            border-color: var(--color-brand);
+            background: linear-gradient(135deg, rgba(201, 94, 75, 0.14), rgba(255, 255, 255, 0.96));
+            color: var(--color-text-primary);
+            box-shadow: var(--shadow-float);
+        }
+
+        .side-item-title {
+            font-size: var(--font-size-body);
+            font-weight: var(--font-weight-secondary);
+            letter-spacing: -0.01em;
+        }
+
+        .side-item-meta {
+            font-size: var(--font-size-caption);
+            color: var(--color-text-tertiary);
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .side-item-meta > span {
+            min-width: 0;
+            overflow-wrap: anywhere;
+            word-break: break-word;
+        }
+
+        .top-tabs {
+            display: none !important;
+        }
+
+        .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));
+        }
+
+        .status-strip {
+            display: flex;
+            flex-wrap: wrap;
+            gap: var(--spacing-xs);
+            margin-bottom: var(--spacing-sm);
+            margin-top: 6px;
+        }
+
+        .status-chip {
+            min-width: 200px;
+            padding: 10px 12px;
+            border-radius: var(--radius-lg);
+            border: 1px solid var(--color-border-soft);
+            background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 247, 240, 0.96) 100%);
+            box-shadow: var(--shadow-subtle);
+        }
+
+        .status-chip .label {
+            display: block;
+            font-size: var(--font-size-caption);
+            color: var(--color-text-tertiary);
+            margin-bottom: 4px;
+        }
+
+        .status-chip .value {
+            font-size: var(--font-size-body);
+            font-weight: var(--font-weight-secondary);
+            color: var(--color-text-primary);
+            letter-spacing: -0.01em;
+            white-space: normal;
+            overflow-wrap: anywhere;
+            word-break: break-word;
+        }
+
+        .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);
+            position: relative;
+            overflow-x: hidden;
+            overflow-y: visible;
+        }
+
+        .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: 0;
+        }
+
+        .mode-content {
+            border-radius: var(--radius-lg);
+            background: rgba(255, 255, 255, 0.85);
+            box-shadow: var(--shadow-subtle);
+            padding: 10px;
+        }
+
         /* ============================================
            主标题
            ============================================ */
@@ -195,14 +535,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,9 +585,9 @@
            卡片
            ============================================ */
         .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);
+            padding: 10px;
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -256,17 +596,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,
@@ -300,9 +640,9 @@
         }
 
         .card.active {
-            background: linear-gradient(to bottom, rgba(210, 107, 90, 0.12) 0%, rgba(255, 255, 255, 0.98) 100%);
-            border-color: rgba(201, 94, 75, 0.45);
-            box-shadow: var(--shadow-float);
+            background: linear-gradient(to bottom, rgba(210, 107, 90, 0.14) 0%, rgba(255, 255, 255, 0.98) 100%);
+            border-color: rgba(201, 94, 75, 0.55);
+            box-shadow: 0 10px 28px rgba(210, 107, 90, 0.14);
         }
 
         .card.active::before {
@@ -382,7 +722,7 @@
         /* 卡片操作按钮 - hover 显示 */
         .card-actions {
             display: flex;
-            gap: 4px;
+            gap: 8px;
             opacity: 0;
             transform: translateX(4px);
             transition: all var(--transition-normal) var(--ease-spring);
@@ -393,24 +733,30 @@
             transform: translateX(0);
         }
 
+        .mode-cards .card-actions {
+            opacity: 1;
+            transform: translateX(0);
+        }
+
         .card-action-btn {
-            width: 28px;
-            height: 28px;
-            border-radius: var(--radius-sm);
-            border: none;
-            background: transparent;
-            color: var(--color-text-tertiary);
+            width: 40px;
+            height: 40px;
+            border-radius: 10px;
+            border: 1px solid rgba(70, 86, 110, 0.22);
+            background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9));
+            color: var(--color-text-secondary);
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: all var(--transition-fast) var(--ease-spring);
+            box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.04);
         }
 
         .card-action-btn:hover {
-            background: linear-gradient(135deg, var(--color-bg) 0%, rgba(247, 241, 232, 0.8) 100%);
-            color: var(--color-text-secondary);
-            transform: scale(1.08);
+            background: linear-gradient(135deg, rgba(210, 107, 90, 0.08) 0%, rgba(255, 255, 255, 0.95) 100%);
+            color: var(--color-text-primary);
+            transform: translateY(-1px);
         }
 
         .card-action-btn.delete:hover {
@@ -419,8 +765,8 @@
         }
 
         .card-action-btn svg {
-            width: 16px;
-            height: 16px;
+            width: 18px;
+            height: 18px;
         }
 
         /* ============================================
@@ -524,54 +870,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 +955,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 +1105,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,
@@ -896,47 +1220,25 @@
         }
 
         .session-count-pill {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
             font-size: var(--font-size-caption);
             color: var(--color-text-secondary);
             border: 1px solid var(--color-border-soft);
             border-radius: 999px;
-            padding: 2px 8px;
+            padding: 0 8px;
+            height: 22px;
+            line-height: 1;
             background: rgba(247, 241, 232, 0.7);
             white-space: nowrap;
             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 +1254,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 +1268,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);
@@ -1053,47 +1340,47 @@
             box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.7);
         }
 
-        .session-layout {
-            display: grid;
-            grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
-            gap: var(--spacing-sm);
-            align-items: start;
-            height: min(72vh, 760px);
-            min-height: 520px;
+        .session-layout {
+            display: grid;
+            grid-template-columns: minmax(215px, 295px) minmax(0, 1fr);
+            gap: var(--spacing-sm);
+            align-items: start;
+            height: min(72vh, 760px);
+            min-height: 520px;
+        }
+
+        .session-layout.session-standalone {
+            grid-template-columns: minmax(0, 1fr);
         }
 
-        .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-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;
@@ -1133,11 +1420,14 @@
             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.92) 100%);
-            padding: 10px 12px;
+            padding: 14px 16px;
             cursor: pointer;
             transition: all var(--transition-fast) var(--ease-spring);
             user-select: none;
             min-width: 0;
+            position: relative;
+            overflow: hidden;
+            min-height: 88px;
         }
 
         .session-item-header {
@@ -1162,6 +1452,18 @@
             transform: translateY(-1px);
         }
 
+        .session-item::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 10px;
+            bottom: 10px;
+            width: 3px;
+            border-radius: 999px;
+            background: rgba(210, 107, 90, 0.15);
+            transition: background var(--transition-fast) var(--ease-spring);
+        }
+
         .session-item:active {
             transform: scale(0.99);
         }
@@ -1172,19 +1474,23 @@
             box-shadow: 0 6px 16px rgba(210, 107, 90, 0.12);
         }
 
-        .session-item-title {
-            font-size: var(--font-size-body);
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-primary);
-            line-height: 1.35;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            word-break: break-word;
-            flex: 1;
+        .session-item.active::before {
+            background: linear-gradient(180deg, rgba(201, 94, 75, 0.9), rgba(201, 94, 75, 0.4));
         }
 
+        .session-item-title {
+            font-size: var(--font-size-body);
+            font-weight: var(--font-weight-secondary);
+            color: var(--color-text-primary);
+            line-height: 1.5;
+            display: block;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            flex: 1;
+            max-width: 75%;
+        }
+
         .session-item-actions {
             display: inline-flex;
             align-items: center;
@@ -1207,21 +1513,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 +1520,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);
@@ -1286,26 +1559,37 @@
             white-space: nowrap;
         }
 
-        .session-item-snippet {
-            color: var(--color-text-secondary);
-            white-space: normal;
-            background: rgba(210, 107, 90, 0.08);
-            border-radius: 8px;
-            padding: 6px 8px;
-            border: 1px solid rgba(210, 107, 90, 0.15);
-        }
-
-        .session-preview {
-            border: 1px solid var(--color-border-soft);
-            border-radius: var(--radius-xl);
-            background: linear-gradient(to bottom, var(--color-surface-elevated) 0%, rgba(255, 255, 255, 0.96) 100%);
-            box-shadow: var(--shadow-card);
+        .session-item-snippet {
+            color: var(--color-text-secondary);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: block;
+            max-width: 100%;
+            background: rgba(210, 107, 90, 0.08);
+            border-radius: 8px;
+            padding: 6px 8px;
+            border: 1px solid rgba(210, 107, 90, 0.15);
+        }
+
+        .session-preview {
+            border: 1px solid var(--color-border-soft);
+            border-radius: var(--radius-xl);
+            background: linear-gradient(to bottom, var(--color-surface-elevated) 0%, rgba(255, 255, 255, 0.96) 100%);
+            box-shadow: var(--shadow-card);
             min-height: 0;
             max-height: none;
             height: 100%;
             display: flex;
             flex-direction: column;
             overflow: hidden;
+            transform: translateX(4px);
+            transition: transform var(--transition-normal) var(--ease-spring-soft), box-shadow var(--transition-normal) var(--ease-spring-soft);
+        }
+
+        .session-preview.active {
+            box-shadow: var(--shadow-float);
+            transform: translateX(0);
         }
 
         .session-preview-scroll {
@@ -1383,15 +1667,16 @@
             opacity: 0.7;
         }
 
-        .session-actions {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            flex-shrink: 0;
-            margin-left: 0;
-            flex-wrap: wrap;
-            justify-content: flex-end;
-        }
+        .session-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex: 0 1 auto;
+            max-width: 100%;
+            margin-left: 0;
+            flex-wrap: wrap;
+            justify-content: flex-end;
+        }
 
         .session-preview-body {
             flex: 1;
@@ -1495,7 +1780,7 @@
             box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.7);
         }
 
-        @media (max-width: 900px) {
+        @media (max-width: 1100px) {
             .session-layout {
                 grid-template-columns: 1fr;
                 height: auto;
@@ -1510,6 +1795,10 @@
                 justify-content: flex-start;
             }
 
+            .session-toolbar-footer {
+                justify-content: flex-start;
+            }
+
             .session-list {
                 position: static;
                 max-height: 300px;
@@ -1520,6 +1809,9 @@
                 min-height: 360px;
                 max-height: none;
                 height: auto;
+                position: relative;
+                transform: none;
+                box-shadow: var(--shadow-card);
             }
 
             .session-preview-header {
@@ -1530,6 +1822,10 @@
             .session-actions {
                 justify-content: flex-start;
             }
+
+            .session-preview.active {
+                box-shadow: var(--shadow-float);
+            }
         }
 
         @media (max-width: 520px) {
@@ -2221,11 +2517,43 @@
             outline-offset: 2px;
         }
 
+        @media (max-width: 960px) {
+            .container {
+                padding: 12px;
+            }
+            .app-shell {
+                grid-template-columns: 1fr;
+            }
+            .side-rail {
+                display: none;
+            }
+            .main-panel {
+                padding: var(--spacing-sm) var(--spacing-sm);
+                border-radius: 14px;
+            }
+            .top-tabs {
+                display: grid !important;
+                grid-template-columns: repeat(2, minmax(0, 1fr));
+            }
+            .status-strip {
+                gap: var(--spacing-sm);
+                margin-top: 4px;
+            }
+            .status-chip {
+                flex: 1 1 calc(50% - var(--spacing-sm));
+                min-width: 0;
+            }
+        }
+
         @media (max-width: 720px) {
             .main-title {
                 font-size: 40px;
             }
 
+            .hero-title {
+                font-size: 32px;
+            }
+
             .subtitle {
                 font-size: var(--font-size-secondary);
                 margin-bottom: 16px;
@@ -2235,38 +2563,372 @@
                 flex-direction: column;
                 gap: 6px;
             }
+
+            .status-strip {
+                flex-direction: row;
+                flex-wrap: wrap;
+            }
+
+            .status-chip {
+                flex: 1 1 100%;
+            }
+        }
+
+        @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: 32px;
+            }
+            .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;
+            }
+
+            .status-strip {
+                gap: var(--spacing-xs);
+            }
+
+            .status-chip {
+                flex: 1 1 100%;
+                min-width: 100%;
+            }
+
+            .btn-add,
+            .btn-tool,
+            .card-action-btn,
+            .btn-session-export,
+            .btn-session-open,
+            .btn-session-clone,
+            .btn-session-refresh,
+            .btn-session-delete,
+            .btn-icon,
+            .session-item-copy {
+                min-height: 44px;
+                padding-top: 12px;
+                padding-bottom: 12px;
+            }
+
+            .btn-icon,
+            .session-item-copy {
+                min-width: 44px;
+            }
+
+            .session-item {
+                min-height: 75px;
+                height: 75px;
+                padding: 12px 14px;
+            }
+
+            .session-item-header {
+                flex-direction: row;
+                align-items: center;
+                gap: 8px;
+            }
+
+            .session-item-main {
+                align-items: center;
+            }
+
+            .session-item-copy {
+                width: 20px;
+                height: 20px;
+                min-width: 20px;
+                min-height: 20px;
+                border-radius: 6px;
+                padding: 2px;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                transform: translate(-3px, 0);
+            }
+
+            .session-item-copy svg {
+                width: 12px;
+                height: 12px;
+            }
+
+            .session-item-title {
+                -webkit-line-clamp: 1;
+                max-height: none;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+
+            .session-item-actions {
+                margin-top: 0;
+            }
+
+            .session-item-meta {
+                margin-top: -2px;
+                margin-bottom: 0;
+                gap: 4px;
+                align-items: center;
+            }
+
+            .session-count-pill {
+                transform: translateY(-6px);
+            }
+
+            .card {
+                padding: 8px;
+            }
+
+            .card-list {
+                gap: 4px;
+                margin-bottom: 4px;
+            }
+
+            .card-actions {
+                gap: 8px;
+            }
+
+            .card-action-btn {
+                width: 40px;
+                height: 40px;
+                border-radius: 10px;
+            }
+
+            .card-action-btn svg {
+                width: 18px;
+                height: 18px;
+            }
+
+            /* 移动端不显示配置状态 pill，节省空间 */
+            .card-trailing .pill {
+                display: none;
+            }
+
+            .session-preview {
+                border-radius: var(--radius-lg);
+            }
         }
     </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" role="tablist" aria-label="主导航">
+            <button class="top-tab"
+                id="tab-config-codex"
+                role="tab"
+                :tabindex="mainTab === 'config' && configMode === 'codex' ? 0 : -1"
+                :aria-selected="mainTab === 'config' && configMode === 'codex'"
+                :aria-pressed="mainTab === 'config' && configMode === 'codex'"
+                aria-controls="panel-config-codex"
+                :class="{ active: mainTab === 'config' && configMode === 'codex' }"
+                @click="switchConfigMode('codex')">Codex 配置</button>
+            <button class="top-tab"
+                id="tab-config-claude"
+                role="tab"
+                :tabindex="mainTab === 'config' && configMode === 'claude' ? 0 : -1"
+                :aria-selected="mainTab === 'config' && configMode === 'claude'"
+                :aria-pressed="mainTab === 'config' && configMode === 'claude'"
+                aria-controls="panel-config-claude"
+                :class="{ active: mainTab === 'config' && configMode === 'claude' }"
+                @click="switchConfigMode('claude')">Claude Code 配置</button>
+            <button class="top-tab"
+                id="tab-config-openclaw"
+                role="tab"
+                :tabindex="mainTab === 'config' && configMode === 'openclaw' ? 0 : -1"
+                :aria-selected="mainTab === 'config' && configMode === 'openclaw'"
+                :aria-pressed="mainTab === 'config' && configMode === 'openclaw'"
+                aria-controls="panel-config-openclaw"
+                :class="{ active: mainTab === 'config' && configMode === 'openclaw' }"
+                @click="switchConfigMode('openclaw')">OpenClaw 配置</button>
+            <button class="top-tab"
+                id="tab-sessions"
+                role="tab"
+                :tabindex="mainTab === 'sessions' ? 0 : -1"
+                :aria-selected="mainTab === 'sessions'"
+                :aria-pressed="mainTab === 'sessions'"
+                aria-controls="panel-sessions"
+                :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 }]">
+            <aside class="side-rail" v-if="!sessionStandalone">
+                <div class="brand-block">
+                    <div class="brand-title">
+                        Codex <span class="accent">Mate</span>
+                    </div>
+                    <div class="brand-subtitle">
+                        配置 / 会话切换器
+                    </div>
+                </div>
+
+                <div class="side-section" role="tablist" aria-label="配置管理">
+                    <div class="side-section-title">配置管理</div>
+                    <button
+                        role="tab"
+                        id="side-tab-config-codex"
+                        aria-controls="panel-config-codex"
+                        :tabindex="mainTab === 'config' && configMode === 'codex' ? 0 : -1"
+                        :aria-selected="mainTab === 'config' && configMode === 'codex'"
+                        :aria-pressed="mainTab === 'config' && configMode === 'codex'"
+                        :class="['side-item', { active: mainTab === 'config' && configMode === 'codex' }]"
+                        @click="switchConfigMode('codex')">
+                        <div class="side-item-title">Codex 配置</div>
+                        <div class="side-item-meta">
+                            <span>提供商 / 模型</span>
+                            <span v-if="currentProvider">当前 {{ currentProvider }}</span>
+                        </div>
+                    </button>
+                    <button
+                        role="tab"
+                        id="side-tab-config-claude"
+                        aria-controls="panel-config-claude"
+                        :tabindex="mainTab === 'config' && configMode === 'claude' ? 0 : -1"
+                        :aria-selected="mainTab === 'config' && configMode === 'claude'"
+                        :aria-pressed="mainTab === 'config' && configMode === 'claude'"
+                        :class="['side-item', { active: mainTab === 'config' && configMode === 'claude' }]"
+                        @click="switchConfigMode('claude')">
+                        <div class="side-item-title">Claude Code 配置</div>
+                        <div class="side-item-meta">
+                            <span>Base URL / Key</span>
+                            <span v-if="currentClaudeConfig">当前 {{ currentClaudeConfig }}</span>
+                        </div>
+                    </button>
+                    <button
+                        role="tab"
+                        id="side-tab-config-openclaw"
+                        aria-controls="panel-config-openclaw"
+                        :tabindex="mainTab === 'config' && configMode === 'openclaw' ? 0 : -1"
+                        :aria-selected="mainTab === 'config' && configMode === 'openclaw'"
+                        :aria-pressed="mainTab === 'config' && configMode === 'openclaw'"
+                        :class="['side-item', { active: mainTab === 'config' && configMode === 'openclaw' }]"
+                        @click="switchConfigMode('openclaw')">
+                        <div class="side-item-title">OpenClaw 配置</div>
+                        <div class="side-item-meta">
+                            <span>JSON5 / Workspace</span>
+                            <span v-if="currentOpenclawConfig">当前 {{ currentOpenclawConfig }}</span>
+                        </div>
+                    </button>
+                </div>
+
+                <div class="side-section" role="tablist" aria-label="会话管理">
+                    <div class="side-section-title">会话管理</div>
+                    <button
+                        role="tab"
+                        id="side-tab-sessions"
+                        aria-controls="panel-sessions"
+                        :tabindex="mainTab === 'sessions' ? 0 : -1"
+                        :aria-selected="mainTab === 'sessions'"
+                        :aria-pressed="mainTab === 'sessions'"
+                        :class="['side-item', { active: mainTab === 'sessions' }]"
+                        @click="switchMainTab('sessions')">
+                        <div class="side-item-title">会话浏览</div>
+                        <div class="side-item-meta">
+                            <span>快速预览 / 导出</span>
+                            <span>来源：{{ sessionFilterSource === 'all' ? '全部' : (sessionFilterSource === 'codex' ? 'Codex' : 'Claude') }}</span>
+                        </div>
+                    </button>
+                </div>
+            </aside>
+            <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 class="status-strip" v-if="!sessionStandalone && mainTab === 'config'">
+                    <template v-if="configMode === 'codex'">
+                        <div class="status-chip">
+                            <span class="label">Codex 提供商</span>
+                            <span class="value">{{ currentProvider || '未选择' }}</span>
+                        </div>
+                        <div class="status-chip">
+                            <span class="label">Codex 模型</span>
+                            <span class="value">{{ currentModel || '未选择' }}</span>
+                        </div>
+                    </template>
+                    <template v-else-if="configMode === 'claude'">
+                        <div class="status-chip">
+                            <span class="label">Claude 配置</span>
+                            <span class="value">{{ currentClaudeConfig || '未选择' }}</span>
+                        </div>
+                        <div class="status-chip">
+                            <span class="label">Claude 模型</span>
+                            <span class="value">{{ currentClaudeModel || '未选择' }}</span>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="status-chip">
+                            <span class="label">OpenClaw 配置</span>
+                            <span class="value">{{ currentOpenclawConfig || '未选择' }}</span>
+                        </div>
+                        <div class="status-chip">
+                            <span class="label">工作区文件</span>
+                            <span class="value">{{ openclawWorkspaceFileName || '未选择' }}</span>
+                        </div>
+                    </template>
+                </div>
+                <div class="status-strip" v-else-if="!sessionStandalone && mainTab === 'sessions'">
+                    <div class="status-chip">
+                        <span class="label">当前来源</span>
+                        <span class="value">{{ sessionFilterSource === 'claude' ? 'Claude Code' : 'Codex' }}</span>
+                    </div>
+                    <div class="status-chip">
+                        <span class="label">会话数</span>
+                        <span class="value">{{ sessionsList.length }}</span>
+                    </div>
+                </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"
+                        id="panel-config-codex"
+                        role="tabpanel"
+                        :aria-labelledby="'tab-config-codex'">
                 <!-- 添加提供商按钮 -->
                 <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 +2982,14 @@
 
                 <div class="selector-section">
                     <div class="selector-header">
-                        <span class="selector-title">最近使用</span>
-                        <span v-if="recentLoading" class="selector-title">加载中...</span>
+                        <span class="selector-title">服务档位</span>
                     </div>
-                    <div v-if="recentConfigs.length === 0" class="recent-empty">
-                        暂无记录
-                    </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 +3038,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"/>
@@ -2402,8 +3063,13 @@
                 </div>
             </div>
 
-            <!-- Claude Code 配置模式 -->
-            <div v-show="configMode === 'claude'" class="mode-content">
+                <!-- Claude Code 配置模式 -->
+                <div
+                    v-show="mainTab === 'config' && configMode === 'claude'"
+                    class="mode-content mode-cards"
+                    id="panel-config-claude"
+                    role="tabpanel"
+                    :aria-labelledby="'tab-config-claude'">
                 <!-- 添加提供商按钮 -->
                 <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 +3085,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 +3106,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 +3130,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 +3140,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"/>
@@ -2465,8 +3159,13 @@
                 </div>
             </div>
 
-            <!-- OpenClaw 配置模式 -->
-            <div v-show="configMode === 'openclaw'" class="mode-content">
+                <!-- OpenClaw 配置模式 -->
+                <div
+                    v-show="mainTab === 'config' && configMode === 'openclaw'"
+                    class="mode-content mode-cards"
+                    id="panel-config-openclaw"
+                    role="tabpanel"
+                    :aria-labelledby="'tab-config-openclaw'">
                 <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,36 +3238,40 @@
                 </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"
+                    id="panel-sessions"
+                    role="tabpanel"
+                    :aria-labelledby="'tab-sessions'">
+                <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">
-                                <option value="all">全部（Codex + Claude）</option>
-                                <option value="codex">仅 Codex</option>
-                                <option value="claude">仅 Claude Code</option>
-                            </select>
+                                <option value="codex">Codex</option>
+                                <option value="claude">Claude Code</option>
+                            </select>
                             <select
                                 class="session-path-select"
                                 v-model="sessionPathFilter"
@@ -2617,10 +3320,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>
 
@@ -2637,13 +3345,13 @@
                         <div
                             v-for="session in sessionsList"
                             :key="session.source + '-' + session.sessionId + '-' + session.filePath"
-                            :class="[
-                                'session-item',
-                                {
-                                    active: activeSession && getSessionExportKey(activeSession) === getSessionExportKey(session)
-                                }
-                            ]"
-                            @click="selectSession(session)">
+                            :class="[
+                                'session-item',
+                                {
+                                    active: activeSession && getSessionExportKey(activeSession) === getSessionExportKey(session)
+                                }
+                            ]"
+                            @click="selectSession(session)">
                             <div class="session-item-header">
                                 <div class="session-item-main">
                                     <div class="session-item-title">{{ session.title || session.sessionId }}</div>
@@ -2661,21 +3369,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">
@@ -2690,7 +3383,7 @@
                         </div>
                     </div>
 
-                    <div class="session-preview">
+                    <div :class="['session-preview', { active: !!activeSession }]">
                         <template v-if="activeSession">
                             <div class="session-preview-scroll">
                                 <div class="session-preview-header">
@@ -2704,7 +3397,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 +3463,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 +3483,9 @@
             </div>
         </div>
 
+            </main>
+        </div>
+
         <!-- 添加提供商模态框 -->
         <div v-if="showAddModal" class="modal-overlay" @click.self="showAddModal = false">
             <div class="modal">
@@ -3276,2653 +3972,6 @@
         <div v-if="message" :class="['toast', messageType]">{{ message }}</div>
     </div>
 
-    <script>
-        const { createApp } = Vue;
-        const API_BASE = (location && location.origin && location.origin !== 'null')
-            ? location.origin
-            : 'http://localhost:3737';
-        const DEFAULT_OPENCLAW_TEMPLATE = `{
-  // OpenClaw config (JSON5)
-  agent: {
-    model: "gpt-4.1"
-  },
-  agents: {
-    defaults: {
-      workspace: "~/.openclaw/workspace"
-    }
-  }
-}`;
-
-        async function api(action, params = {}) {
-            const res = await fetch(`${API_BASE}/api`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ action, params })
-            });
-            return await res.json();
-        }
-
-        const app = createApp({
-            data() {
-                return {
-                    configMode: 'codex',
-                    currentProvider: '',
-                    currentModel: '',
-                    providersList: [],
-                    models: [],
-                    codexModelsLoading: false,
-                    modelsSource: 'remote',
-                    modelsHasCurrent: true,
-                    claudeModels: [],
-                    claudeModelsSource: 'idle',
-                    claudeModelsHasCurrent: true,
-                    claudeModelsLoading: false,
-                    loading: true,
-                    initError: '',
-                    message: '',
-                    messageType: '',
-                    showAddModal: false,
-                    showEditModal: false,
-                    showModelModal: false,
-                    showModelListModal: false,
-                    showClaudeConfigModal: false,
-                    showEditConfigModal: false,
-                    showOpenclawConfigModal: false,
-                    showConfigTemplateModal: false,
-                    showAgentsModal: false,
-                    configTemplateContent: '',
-                    configTemplateApplying: false,
-                    agentsContent: '',
-                    agentsPath: '',
-                    agentsExists: false,
-                    agentsLineEnding: '\n',
-                    agentsLoading: false,
-                    agentsSaving: false,
-                    agentsContext: 'codex',
-                    agentsModalTitle: 'AGENTS.md 编辑器',
-                    agentsModalHint: '保存后会写入目标 AGENTS.md（与 config.toml 同级）。',
-                    sessionsList: [],
-                    sessionsLoading: false,
-                    sessionFilterSource: 'all',
-                    sessionPathFilter: '',
-                    sessionQuery: '',
-                    sessionRoleFilter: 'all',
-                    sessionTimePreset: 'all',
-                    sessionPathOptions: [],
-                    sessionPathOptionsLoading: false,
-                    sessionPathOptionsMap: {
-                        all: [],
-                        codex: [],
-                        claude: []
-                    },
-                    sessionPathOptionsLoadedMap: {
-                        all: false,
-                        codex: false,
-                        claude: false
-                    },
-                    sessionPathRequestSeq: 0,
-                    sessionExporting: {},
-                    sessionCloning: {},
-                    sessionDeleting: {},
-                    activeSession: null,
-                    activeSessionMessages: [],
-                    activeSessionDetailError: '',
-                    activeSessionDetailClipped: false,
-                    sessionDetailLoading: false,
-                    sessionDetailRequestSeq: 0,
-                    sessionStandalone: false,
-                    sessionStandaloneError: '',
-                    sessionStandaloneText: '',
-                    sessionStandaloneTitle: '',
-                    sessionStandaloneSourceLabel: '',
-                    sessionStandaloneLoading: false,
-                    sessionStandaloneRequestSeq: 0,
-                    speedResults: {},
-                    speedLoading: {},
-                    newProvider: { name: '', url: '', key: '' },
-                    editingProvider: { name: '', url: '', key: '' },
-                    newModelName: '',
-                    currentClaudeConfig: '',
-                    currentClaudeModel: '',
-                    editingConfig: { name: '', apiKey: '', baseUrl: '', model: '' },
-                    claudeConfigs: {
-                        '智谱GLM': {
-                            apiKey: '',
-                            baseUrl: 'https://open.bigmodel.cn/api/anthropic',
-                            model: 'glm-4.7',
-                            hasKey: false
-                        }
-                    },
-                    newClaudeConfig: {
-                        name: '',
-                        apiKey: '',
-                        baseUrl: 'https://open.bigmodel.cn/api/anthropic',
-                        model: 'glm-4.7'
-                    },
-                    currentOpenclawConfig: '',
-                    openclawConfigs: {
-                        '默认配置': {
-                            content: DEFAULT_OPENCLAW_TEMPLATE
-                        }
-                    },
-                    openclawEditing: { name: '', content: '', lockName: false },
-                    openclawEditorTitle: '添加 OpenClaw 配置',
-                    openclawConfigPath: '',
-                    openclawConfigExists: false,
-                    openclawLineEnding: '\n',
-                    openclawFileLoading: false,
-                    openclawSaving: false,
-                    openclawApplying: false,
-                    openclawWorkspaceFileName: 'SOUL.md',
-                    agentsWorkspaceFileName: '',
-                    openclawStructured: {
-                        agentPrimary: '',
-                        agentFallbacks: [],
-                        workspace: '',
-                        timeout: '',
-                        contextTokens: '',
-                        maxConcurrent: '',
-                        envItems: [],
-                        toolsProfile: 'default',
-                        toolsAllow: [],
-                        toolsDeny: []
-                    },
-                    openclawQuick: {
-                        providerName: '',
-                        baseUrl: '',
-                        apiKey: '',
-                        apiType: 'openai-responses',
-                        modelId: '',
-                        modelName: '',
-                        contextWindow: '',
-                        maxTokens: '',
-                        setPrimary: true,
-                        overrideProvider: true,
-                        overrideModels: true,
-                        showKey: false
-                    },
-                    openclawAgentsList: [],
-                    openclawProviders: [],
-                    openclawMissingProviders: [],
-                    recentConfigs: [],
-                    recentLoading: false,
-                    healthCheckLoading: false,
-                    healthCheckResult: null,
-                    healthCheckRemote: false
-                }
-            },
-            mounted() {
-                this.initSessionStandalone();
-                const savedConfigs = localStorage.getItem('claudeConfigs');
-                if (savedConfigs) {
-                    try {
-                        this.claudeConfigs = JSON.parse(savedConfigs);
-                        for (const [name, config] of Object.entries(this.claudeConfigs)) {
-                            if (config.apiKey && config.apiKey.includes('****')) {
-                                config.apiKey = '';
-                                config.hasKey = false;
-                            }
-                        }
-                        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();
-                const savedOpenclawConfigs = localStorage.getItem('openclawConfigs');
-                if (savedOpenclawConfigs) {
-                    try {
-                        this.openclawConfigs = JSON.parse(savedOpenclawConfigs);
-                        const configNames = Object.keys(this.openclawConfigs);
-                        if (configNames.length > 0) {
-                            this.currentOpenclawConfig = configNames[0];
-                        }
-                    } catch (e) {
-                        console.error('加载 OpenClaw 配置失败:', e);
-                    }
-                } else {
-                    const configNames = Object.keys(this.openclawConfigs);
-                    if (configNames.length > 0) {
-                        this.currentOpenclawConfig = configNames[0];
-                    }
-                }
-                this.loadAll();
-            },
-
-            computed: {
-                isSessionQueryEnabled() {
-                    return this.sessionFilterSource === 'codex';
-                },
-                sessionQueryPlaceholder() {
-                    return this.isSessionQueryEnabled ? '关键词检索' : '仅 Codex 支持关键词检索';
-                }
-            },
-            methods: {
-                async loadAll() {
-                    this.loading = true;
-                    this.initError = '';
-                    try {
-                        const statusRes = await api('status');
-                        const listRes = await api('list');
-
-                        if (statusRes.error) {
-                            this.initError = statusRes.error;
-                        } else {
-                            this.currentProvider = statusRes.provider;
-                            this.currentModel = statusRes.model;
-                            this.providersList = listRes.providers;
-                            await this.loadModelsForProvider(this.currentProvider);
-                            if (statusRes.configReady === false) {
-                                this.showMessage(statusRes.configNotice || '未检测到 config.toml，已加载默认模板。请在模板编辑器确认后创建。', 'info');
-                            }
-                            if (statusRes.initNotice) {
-                                this.showMessage(statusRes.initNotice, 'info');
-                            }
-                            this.maybeShowStarPrompt();
-                        }
-                        await this.loadRecentConfigs();
-                    } catch (e) {
-                        this.initError = '连接失败: ' + e.message;
-                    } finally {
-                        this.loading = false;
-                    }
-                },
-
-                async loadModelsForProvider(providerName) {
-                    this.codexModelsLoading = true;
-                    if (!providerName) {
-                        this.models = [];
-                        this.modelsSource = 'unlimited';
-                        this.modelsHasCurrent = true;
-                        this.codexModelsLoading = false;
-                        return;
-                    }
-                    try {
-                        const res = await api('models', { provider: providerName });
-                        if (res.unlimited) {
-                            this.models = [];
-                            this.modelsSource = 'unlimited';
-                            this.modelsHasCurrent = true;
-                            return;
-                        }
-                        if (res.error) {
-                            this.showMessage('模型列表获取失败: ' + res.error, 'error');
-                            this.models = [];
-                            this.modelsSource = 'error';
-                            this.modelsHasCurrent = true;
-                            return;
-                        }
-                        const list = Array.isArray(res.models) ? res.models : [];
-                        this.models = list;
-                        this.modelsSource = res.source || 'remote';
-                        this.modelsHasCurrent = !!this.currentModel && list.includes(this.currentModel);
-                    } catch (e) {
-                        this.showMessage('模型列表获取失败: ' + e.message, 'error');
-                        this.models = [];
-                        this.modelsSource = 'error';
-                        this.modelsHasCurrent = true;
-                    } finally {
-                        this.codexModelsLoading = false;
-                    }
-                },
-
-                getCurrentClaudeConfig() {
-                    if (!this.currentClaudeConfig) return null;
-                    return this.claudeConfigs[this.currentClaudeConfig] || null;
-                },
-
-                syncClaudeModelFromConfig() {
-                    const config = this.getCurrentClaudeConfig();
-                    this.currentClaudeModel = config && config.model ? config.model : '';
-                },
-
-                refreshClaudeModelContext() {
-                    this.syncClaudeModelFromConfig();
-                    this.loadClaudeModels();
-                },
-
-                resetClaudeModelsState() {
-                    this.claudeModels = [];
-                    this.claudeModelsSource = 'idle';
-                    this.claudeModelsHasCurrent = true;
-                    this.claudeModelsLoading = false;
-                },
-
-                updateClaudeModelsCurrent() {
-                    const currentModel = (this.currentClaudeModel || '').trim();
-                    this.claudeModelsHasCurrent = !!currentModel && this.claudeModels.includes(currentModel);
-                },
-
-                async loadClaudeModels() {
-                    const config = this.getCurrentClaudeConfig();
-                    const baseUrl = (config.baseUrl || '').trim();
-                    const apiKey = (config.apiKey || '').trim();
-
-                    if (!baseUrl) {
-                        this.resetClaudeModelsState();
-                        return;
-                    }
-
-                    this.claudeModelsLoading = true;
-                    try {
-                        const res = await api('models-by-url', { baseUrl, apiKey });
-                        if (res.unlimited) {
-                            this.claudeModels = [];
-                            this.claudeModelsSource = 'unlimited';
-                            this.claudeModelsHasCurrent = true;
-                            return;
-                        }
-                        if (res.error) {
-                            this.showMessage('模型列表获取失败: ' + res.error, 'error');
-                            this.claudeModels = [];
-                            this.claudeModelsSource = 'error';
-                            this.claudeModelsHasCurrent = true;
-                            return;
-                        }
-                        const list = Array.isArray(res.models) ? res.models : [];
-                        this.claudeModels = list;
-                        this.claudeModelsSource = res.source || 'remote';
-                        this.updateClaudeModelsCurrent();
-                    } catch (e) {
-                        this.showMessage('模型列表获取失败: ' + e.message, 'error');
-                        this.claudeModels = [];
-                        this.claudeModelsSource = 'error';
-                        this.claudeModelsHasCurrent = true;
-                    } finally {
-                        this.claudeModelsLoading = false;
-                    }
-                },
-
-                openClaudeConfigModal() {
-                    this.showClaudeConfigModal = true;
-                },
-
-                maybeShowStarPrompt() {
-                    const storageKey = 'codexmateStarPrompted';
-                    if (localStorage.getItem(storageKey)) {
-                        return;
-                    }
-                    this.showMessage('如果 Codex Mate 对你有帮助，欢迎到 GitHub 点个 Star。', 'info');
-                    localStorage.setItem(storageKey, '1');
-                },
-
-                switchConfigMode(mode) {
-                    this.configMode = mode;
-                    if (mode === 'claude') {
-                        this.refreshClaudeModelContext();
-                    }
-                    if (mode === 'sessions' && this.sessionsList.length === 0) {
-                        this.loadSessions();
-                    }
-                },
-
-                getSessionStandaloneContext() {
-                    try {
-                        const url = new URL(window.location.href);
-                        if (url.pathname !== '/session') {
-                            return { requested: false, params: null, error: '' };
-                        }
-
-                        const source = (url.searchParams.get('source') || '').trim().toLowerCase();
-                        const sessionId = (url.searchParams.get('sessionId') || url.searchParams.get('id') || '').trim();
-                        const filePath = (url.searchParams.get('filePath') || url.searchParams.get('path') || '').trim();
-                        let error = '';
-                        if (!source) {
-                            error = '缺少 source 参数';
-                        } else if (source !== 'codex' && source !== 'claude') {
-                            error = 'source 仅支持 codex 或 claude';
-                        }
-                        if (!sessionId && !filePath) {
-                            error = error ? `${error}，还缺少 sessionId 或 filePath` : '缺少 sessionId 或 filePath 参数';
-                        }
-
-                        if (error) {
-                            return { requested: true, params: null, error };
-                        }
-
-                        return {
-                            requested: true,
-                            params: {
-                                source,
-                                sessionId,
-                                filePath
-                            },
-                            error: ''
-                        };
-                    } catch (_) {
-                        return { requested: false, params: null, error: '' };
-                    }
-                },
-
-                initSessionStandalone() {
-                    const context = this.getSessionStandaloneContext();
-                    if (!context.requested) return;
-
-                    this.sessionStandalone = true;
-                    this.configMode = 'sessions';
-
-                    if (context.error || !context.params) {
-                        this.sessionStandaloneError = `会话链接参数不完整：${context.error || '参数解析失败'}`;
-                        return;
-                    }
-
-                    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();
-                },
-
-                buildSessionStandaloneUrl(session) {
-                    if (!session) return '';
-                    const source = typeof session.source === 'string' ? session.source.trim().toLowerCase() : '';
-                    if (!source || (source !== 'codex' && source !== 'claude')) return '';
-                    const sessionId = typeof session.sessionId === 'string' ? session.sessionId.trim() : '';
-                    const filePath = typeof session.filePath === 'string' ? session.filePath.trim() : '';
-                    if (!sessionId && !filePath) return '';
-                    const origin = window.location.origin && window.location.origin !== 'null'
-                        ? window.location.origin
-                        : API_BASE;
-                    const params = new URLSearchParams();
-                    params.set('source', source);
-                    if (sessionId) params.set('sessionId', sessionId);
-                    if (filePath) params.set('filePath', filePath);
-                    return `${origin}/session?${params.toString()}`;
-                },
-
-                openSessionStandalone(session) {
-                    const url = this.buildSessionStandaloneUrl(session);
-                    if (!url) {
-                        this.showMessage('当前会话无法生成新页链接', 'error');
-                        return;
-                    }
-                    window.open(url, '_blank', 'noopener');
-                },
-
-                getSessionExportKey(session) {
-                    return `${session.source || 'unknown'}:${session.sessionId || ''}:${session.filePath || ''}`;
-                },
-
-                isResumeCommandAvailable(session) {
-                    if (!session) return false;
-                    const source = String(session.source || '').trim().toLowerCase();
-                    const sessionId = typeof session.sessionId === 'string' ? session.sessionId.trim() : '';
-                    return source === 'codex' && !!sessionId;
-                },
-
-                isCloneAvailable(session) {
-                    if (!session) return false;
-                    const source = String(session.source || '').trim().toLowerCase();
-                    const sessionId = typeof session.sessionId === 'string' ? session.sessionId.trim() : '';
-                    const filePath = typeof session.filePath === 'string' ? session.filePath.trim() : '';
-                    return source === 'codex' && (!!sessionId || !!filePath);
-                },
-
-                isDeleteAvailable(session) {
-                    if (!session) return false;
-                    const source = String(session.source || '').trim().toLowerCase();
-                    if (source !== 'codex' && source !== 'claude') return false;
-                    const sessionId = typeof session.sessionId === 'string' ? session.sessionId.trim() : '';
-                    const filePath = typeof session.filePath === 'string' ? session.filePath.trim() : '';
-                    return !!sessionId || !!filePath;
-                },
-
-                buildResumeCommand(session) {
-                    const sessionId = session && session.sessionId ? String(session.sessionId).trim() : '';
-                    return `codex resume ${this.quoteResumeArg(sessionId)}`;
-                },
-
-                quoteResumeArg(value) {
-                    const text = typeof value === 'string' ? value : String(value || '');
-                    if (!text) return "''";
-                    if (/^[a-zA-Z0-9._-]+$/.test(text)) return text;
-                    const escaped = text.replace(/'/g, "'\\''");
-                    return `'${escaped}'`;
-                },
-
-                fallbackCopyText(text) {
-                    let textarea = null;
-                    try {
-                        textarea = document.createElement('textarea');
-                        textarea.value = text;
-                        textarea.setAttribute('readonly', '');
-                        textarea.style.position = 'fixed';
-                        textarea.style.top = '-9999px';
-                        textarea.style.left = '-9999px';
-                        textarea.style.opacity = '0';
-                        document.body.appendChild(textarea);
-                        textarea.select();
-                        textarea.setSelectionRange(0, textarea.value.length);
-                        return document.execCommand('copy');
-                    } catch (e) {
-                        return false;
-                    } finally {
-                        if (textarea && textarea.parentNode) {
-                            textarea.parentNode.removeChild(textarea);
-                        }
-                    }
-                },
-
-                copyAgentsContent() {
-                    const text = typeof this.agentsContent === 'string' ? this.agentsContent : '';
-                    if (!text) {
-                        this.showMessage('没有可复制的内容', 'info');
-                        return;
-                    }
-                    const ok = this.fallbackCopyText(text);
-                    if (ok) {
-                        this.showMessage('已复制 AGENTS.md 内容', 'success');
-                        return;
-                    }
-                    this.showMessage('复制失败，请手动复制内容', 'error');
-                },
-
-                async copyResumeCommand(session) {
-                    if (!this.isResumeCommandAvailable(session)) {
-                        this.showMessage('当前会话不支持生成恢复命令', 'error');
-                        return;
-                    }
-                    const command = this.buildResumeCommand(session);
-                    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');
-                },
-
-                async cloneSession(session) {
-                    if (!this.isCloneAvailable(session)) {
-                        this.showMessage('当前会话不支持克隆', 'error');
-                        return;
-                    }
-                    const key = this.getSessionExportKey(session);
-                    if (this.sessionCloning[key]) {
-                        return;
-                    }
-                    this.sessionCloning[key] = true;
-                    try {
-                        const res = await api('clone-session', {
-                            source: session.source,
-                            sessionId: session.sessionId,
-                            filePath: session.filePath
-                        });
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
-                            return;
-                        }
-
-                        this.showMessage('会话已克隆', 'success');
-                        await this.loadSessions();
-                        if (res.sessionId) {
-                            const matched = this.sessionsList.find(item => item.source === 'codex' && item.sessionId === res.sessionId);
-                            if (matched) {
-                                await this.selectSession(matched);
-                            }
-                        }
-                    } catch (e) {
-                        this.showMessage('克隆失败: ' + e.message, 'error');
-                    } finally {
-                        this.sessionCloning[key] = false;
-                    }
-                },
-
-                async deleteSession(session) {
-                    if (!this.isDeleteAvailable(session)) {
-                        this.showMessage('当前会话不支持删除', 'error');
-                        return;
-                    }
-                    const key = this.getSessionExportKey(session);
-                    if (this.sessionDeleting[key]) {
-                        return;
-                    }
-                    this.sessionDeleting[key] = true;
-                    try {
-                        const res = await api('delete-session', {
-                            source: session.source,
-                            sessionId: session.sessionId,
-                            filePath: session.filePath
-                        });
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
-                            return;
-                        }
-                        this.showMessage('会话已删除', 'success');
-                        await this.loadSessions();
-                    } catch (e) {
-                        this.showMessage('删除失败: ' + e.message, 'error');
-                    } finally {
-                        this.sessionDeleting[key] = false;
-                    }
-                },
-
-                normalizeSessionPathValue(value) {
-                    if (typeof value !== 'string') return '';
-                    return value.trim();
-                },
-
-                mergeSessionPathOptions(baseList = [], incomingList = []) {
-                    const merged = [];
-                    const seen = new Set();
-                    const append = (items) => {
-                        if (!Array.isArray(items)) return;
-                        for (const item of items) {
-                            const value = this.normalizeSessionPathValue(item);
-                            if (!value) continue;
-                            const key = value.toLowerCase();
-                            if (seen.has(key)) continue;
-                            seen.add(key);
-                            merged.push(value);
-                        }
-                    };
-
-                    append(baseList);
-                    append(incomingList);
-                    return merged;
-                },
-
-                extractPathOptionsFromSessions(sessions) {
-                    const paths = [];
-                    if (!Array.isArray(sessions)) {
-                        return paths;
-                    }
-
-                    const seen = new Set();
-                    for (const session of sessions) {
-                        const value = this.normalizeSessionPathValue(session && session.cwd ? session.cwd : '');
-                        if (!value) continue;
-                        const key = value.toLowerCase();
-                        if (seen.has(key)) continue;
-                        seen.add(key);
-                        paths.push(value);
-                    }
-                    return paths;
-                },
-
-                syncSessionPathOptionsForSource(source, nextOptions, mergeWithExisting = false) {
-                    const targetSource = source === 'codex' || source === 'claude' ? source : 'all';
-                    const current = Array.isArray(this.sessionPathOptionsMap[targetSource])
-                        ? this.sessionPathOptionsMap[targetSource]
-                        : [];
-                    const merged = mergeWithExisting
-                        ? this.mergeSessionPathOptions(current, nextOptions)
-                        : this.mergeSessionPathOptions([], nextOptions);
-                    this.sessionPathOptionsMap = {
-                        ...this.sessionPathOptionsMap,
-                        [targetSource]: merged
-                    };
-                    this.refreshSessionPathOptions(targetSource);
-                },
-
-                refreshSessionPathOptions(source) {
-                    const targetSource = source === 'codex' || source === 'claude' ? source : 'all';
-                    const base = Array.isArray(this.sessionPathOptionsMap[targetSource])
-                        ? [...this.sessionPathOptionsMap[targetSource]]
-                        : [];
-                    const selected = this.normalizeSessionPathValue(this.sessionPathFilter);
-                    if (selected && !base.some(item => item.toLowerCase() === selected.toLowerCase())) {
-                        base.unshift(selected);
-                    }
-                    if (targetSource === this.sessionFilterSource) {
-                        this.sessionPathOptions = base;
-                    }
-                },
-
-                async loadSessionPathOptions(options = {}) {
-                    const source = options.source === 'codex' || options.source === 'claude'
-                        ? options.source
-                        : 'all';
-                    const forceRefresh = !!options.forceRefresh;
-                    const loaded = !!this.sessionPathOptionsLoadedMap[source];
-                    if (!forceRefresh && loaded) {
-                        return;
-                    }
-
-                    const requestSeq = ++this.sessionPathRequestSeq;
-                    this.sessionPathOptionsLoading = true;
-                    try {
-                        const res = await api('list-session-paths', {
-                            source,
-                            limit: 500,
-                            forceRefresh
-                        });
-                        if (requestSeq !== this.sessionPathRequestSeq) {
-                            return;
-                        }
-                        if (res && !res.error && Array.isArray(res.paths)) {
-                            this.syncSessionPathOptionsForSource(source, res.paths, true);
-                            this.sessionPathOptionsLoadedMap = {
-                                ...this.sessionPathOptionsLoadedMap,
-                                [source]: true
-                            };
-                        }
-                    } catch (_) {
-                        // 路径补全失败不影响会话主流程
-                    } finally {
-                        if (requestSeq === this.sessionPathRequestSeq) {
-                            this.sessionPathOptionsLoading = false;
-                        }
-                    }
-                },
-
-                async onSessionSourceChange() {
-                    this.refreshSessionPathOptions(this.sessionFilterSource);
-                    await this.loadSessions();
-                },
-
-                async onSessionPathFilterChange() {
-                    await this.loadSessions();
-                },
-
-                async onSessionFilterChange() {
-                    await this.loadSessions();
-                },
-
-                async clearSessionFilters() {
-                    this.sessionFilterSource = 'all';
-                    this.sessionPathFilter = '';
-                    this.sessionQuery = '';
-                    this.sessionRoleFilter = 'all';
-                    this.sessionTimePreset = 'all';
-                    await this.onSessionSourceChange();
-                },
-
-                getRecordKey(message) {
-                    if (!message || !Number.isInteger(message.recordLineIndex) || message.recordLineIndex < 0) {
-                        return '';
-                    }
-                    return String(message.recordLineIndex);
-                },
-
-                getRecordRenderKey(message, idx) {
-                    const recordKey = this.getRecordKey(message);
-                    if (recordKey) {
-                        return `record-${recordKey}`;
-                    }
-                    return `record-fallback-${idx}-${message && message.timestamp ? message.timestamp : ''}`;
-                },
-
-                syncActiveSessionMessageCount(messageCount) {
-                    if (!Number.isFinite(messageCount) || messageCount < 0) return;
-                    if (this.activeSession) {
-                        this.activeSession.messageCount = messageCount;
-                    }
-                    const activeKey = this.activeSession ? this.getSessionExportKey(this.activeSession) : '';
-                    if (!activeKey) return;
-                    const matched = this.sessionsList.find(item => this.getSessionExportKey(item) === activeKey);
-                    if (matched) {
-                        matched.messageCount = messageCount;
-                    }
-                },
-
-                async loadSessions() {
-                    if (this.sessionsLoading) return;
-                    this.sessionsLoading = true;
-                    this.activeSessionDetailError = '';
-                    const query = this.isSessionQueryEnabled ? this.sessionQuery : '';
-                    try {
-                        const res = await api('list-sessions', {
-                            source: this.sessionFilterSource,
-                            pathFilter: this.sessionPathFilter,
-                            query,
-                            queryMode: 'and',
-                            queryScope: 'content',
-                            contentScanLimit: 50,
-                            roleFilter: this.sessionRoleFilter,
-                            timeRangePreset: this.sessionTimePreset,
-                            limit: 200,
-                            forceRefresh: true
-                        });
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
-                            this.sessionsList = [];
-                            this.activeSession = null;
-                            this.activeSessionMessages = [];
-                            this.activeSessionDetailClipped = false;
-                        } else {
-                            this.sessionsList = Array.isArray(res.sessions) ? res.sessions : [];
-                            this.syncSessionPathOptionsForSource(
-                                this.sessionFilterSource,
-                                this.extractPathOptionsFromSessions(this.sessionsList),
-                                true
-                            );
-                            if (this.sessionsList.length === 0) {
-                                this.activeSession = null;
-                                this.activeSessionMessages = [];
-                                this.activeSessionDetailClipped = false;
-                            } else {
-                                const oldKey = this.activeSession ? this.getSessionExportKey(this.activeSession) : '';
-                                const matched = this.sessionsList.find(item => this.getSessionExportKey(item) === oldKey);
-                                this.activeSession = matched || this.sessionsList[0];
-                                await this.loadActiveSessionDetail();
-                            }
-                            void this.loadSessionPathOptions({ source: this.sessionFilterSource });
-                        }
-                    } catch (e) {
-                        this.sessionsList = [];
-                        this.activeSession = null;
-                        this.activeSessionMessages = [];
-                        this.activeSessionDetailClipped = false;
-                        this.showMessage('加载会话失败: ' + e.message, 'error');
-                    } finally {
-                        this.sessionsLoading = 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;
-                    }
-
-                    const requestSeq = ++this.sessionDetailRequestSeq;
-                    this.sessionDetailLoading = true;
-                    this.activeSessionDetailError = '';
-                    try {
-                        const res = await api('session-detail', {
-                            source: this.activeSession.source,
-                            sessionId: this.activeSession.sessionId,
-                            filePath: this.activeSession.filePath,
-                            messageLimit: 300
-                        });
-
-                        if (requestSeq !== this.sessionDetailRequestSeq) {
-                            return;
-                        }
-
-                        if (res.error) {
-                            this.activeSessionMessages = [];
-                            this.activeSessionDetailClipped = false;
-                            this.activeSessionDetailError = res.error;
-                            return;
-                        }
-
-                        this.activeSessionMessages = Array.isArray(res.messages) ? res.messages : [];
-                        this.activeSessionDetailClipped = !!res.clipped;
-                        if (this.activeSession) {
-                            if (res.sourceLabel) {
-                                this.activeSession.sourceLabel = res.sourceLabel;
-                            }
-                            if (res.sessionId) {
-                                this.activeSession.sessionId = res.sessionId;
-                                if (!this.activeSession.title) {
-                                    this.activeSession.title = res.sessionId;
-                                }
-                            }
-                            if (res.filePath) {
-                                this.activeSession.filePath = res.filePath;
-                            }
-                        }
-                        if (res.updatedAt) {
-                            this.activeSession.updatedAt = res.updatedAt;
-                        }
-                        if (res.cwd) {
-                            this.activeSession.cwd = res.cwd;
-                        }
-                        if (Number.isFinite(res.totalMessages)) {
-                            this.syncActiveSessionMessageCount(res.totalMessages);
-                        }
-                    } catch (e) {
-                        if (requestSeq !== this.sessionDetailRequestSeq) {
-                            return;
-                        }
-                        this.activeSessionMessages = [];
-                        this.activeSessionDetailClipped = false;
-                        this.activeSessionDetailError = '加载会话内容失败: ' + e.message;
-                    } finally {
-                        if (requestSeq === this.sessionDetailRequestSeq) {
-                            this.sessionDetailLoading = false;
-                        }
-                    }
-                },
-
-                downloadTextFile(fileName, content) {
-                    const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' });
-                    const url = URL.createObjectURL(blob);
-                    const link = document.createElement('a');
-                    link.href = url;
-                    link.download = fileName;
-                    link.click();
-                    URL.revokeObjectURL(url);
-                },
-
-                async exportSession(session) {
-                    const key = this.getSessionExportKey(session);
-                    if (this.sessionExporting[key]) return;
-
-                    this.sessionExporting[key] = true;
-                    try {
-                        const res = await api('export-session', {
-                            source: session.source,
-                            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 {
-                        this.sessionExporting[key] = false;
-                    }
-                },
-
-                async switchProvider(name) {
-                    this.currentProvider = name;
-                    await this.loadModelsForProvider(name);
-                    await this.openConfigTemplateEditor();
-                },
-
-                async onModelChange() {
-                    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 runHealthCheck() {
-                    this.healthCheckLoading = true;
-                    this.healthCheckResult = null;
-                    try {
-                        const res = await api('config-health-check', {
-                            remote: false
-                        });
-                        if (res && typeof res === 'object') {
-                            const issues = Array.isArray(res.issues) ? [...res.issues] : [];
-                            let remote = res.remote || null;
-                            {
-                                const providers = (this.providersList || [])
-                                    .filter(provider => provider && provider.name);
-                                const tasks = providers.map(provider =>
-                                    this.runSpeedTest(provider.name, { silent: true })
-                                        .then(result => ({ name: provider.name, result }))
-                                        .catch(err => ({
-                                            name: provider.name,
-                                            result: { ok: false, error: err && err.message ? err.message : 'Speed test failed' }
-                                        }))
-                                );
-                                const pairs = await Promise.all(tasks);
-                                const results = {};
-                                for (const pair of pairs) {
-                                    results[pair.name] = pair.result || null;
-                                    const issue = this.buildSpeedTestIssue(pair.name, pair.result);
-                                    if (issue) issues.push(issue);
-                                }
-                                remote = {
-                                    type: 'speed-test',
-                                    results
-                                };
-                            }
-
-                            const ok = issues.length === 0;
-                            this.healthCheckResult = {
-                                ...res,
-                                ok,
-                                issues,
-                                remote
-                            };
-                            if (ok) {
-                                this.showMessage('健康检查通过', 'success');
-                            }
-                        } else {
-                            this.healthCheckResult = null;
-                            this.showMessage('健康检查失败：返回数据异常', 'error');
-                        }
-                    } catch (e) {
-                        this.healthCheckResult = null;
-                        this.showMessage('健康检查失败: ' + e.message, 'error');
-                    } finally {
-                        this.healthCheckLoading = false;
-                    }
-                },
-
-                escapeTomlString(value) {
-                    return String(value || '')
-                        .replace(/\\/g, '\\\\')
-                        .replace(/"/g, '\\"');
-                },
-
-                async openConfigTemplateEditor(options = {}) {
-                    try {
-                        const res = await api('get-config-template', {
-                            provider: this.currentProvider,
-                            model: this.currentModel
-                        });
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
-                            return;
-                        }
-                        let template = res.template || '';
-                        const appendHint = typeof options.appendHint === 'string' ? options.appendHint.trim() : '';
-                        const appendBlock = typeof options.appendBlock === 'string' ? options.appendBlock.trim() : '';
-                        if (appendHint) {
-                            template = `${template.trimEnd()}\n\n# -------------------------------\n# ${appendHint}\n# -------------------------------\n`;
-                        }
-                        if (appendBlock) {
-                            template = `${template.trimEnd()}\n\n${appendBlock}\n`;
-                        }
-                        this.configTemplateContent = template;
-                        this.showConfigTemplateModal = true;
-                    } catch (e) {
-                        this.showMessage('加载模板失败: ' + e.message, 'error');
-                    }
-                },
-
-                closeConfigTemplateModal() {
-                    this.showConfigTemplateModal = false;
-                    this.configTemplateContent = '';
-                },
-
-                async applyConfigTemplate() {
-                    if (!this.configTemplateContent || !this.configTemplateContent.trim()) {
-                        this.showMessage('模板内容不能为空', 'error');
-                        return;
-                    }
-
-                    this.configTemplateApplying = true;
-                    try {
-                        const res = await api('apply-config-template', {
-                            template: this.configTemplateContent
-                        });
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
-                            return;
-                        }
-                        this.showMessage('模板已应用到 config.toml', 'success');
-                        this.closeConfigTemplateModal();
-                        await this.loadAll();
-                    } catch (e) {
-                        this.showMessage('应用模板失败: ' + e.message, 'error');
-                    } finally {
-                        this.configTemplateApplying = false;
-                    }
-                },
-
-                async openAgentsEditor() {
-                    this.setAgentsModalContext('codex');
-                    this.agentsLoading = true;
-                    try {
-                        const res = await api('get-agents-file');
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
-                            return;
-                        }
-                        this.agentsContent = res.content || '';
-                        this.agentsPath = res.path || '';
-                        this.agentsExists = !!res.exists;
-                        this.agentsLineEnding = res.lineEnding === '\r\n' ? '\r\n' : '\n';
-                        this.showAgentsModal = true;
-                    } catch (e) {
-                        this.showMessage('加载 AGENTS.md 失败: ' + e.message, 'error');
-                    } finally {
-                        this.agentsLoading = false;
-                    }
-                },
-
-                async openOpenclawAgentsEditor() {
-                    this.setAgentsModalContext('openclaw');
-                    this.agentsLoading = true;
-                    try {
-                        const res = await api('get-openclaw-agents-file');
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
-                            return;
-                        }
-                        if (res.configError) {
-                            this.showMessage(`OpenClaw 配置解析失败，已使用默认 Workspace：${res.configError}`, 'error');
-                        }
-                        this.agentsContent = res.content || '';
-                        this.agentsPath = res.path || '';
-                        this.agentsExists = !!res.exists;
-                        this.agentsLineEnding = res.lineEnding === '\r\n' ? '\r\n' : '\n';
-                        this.showAgentsModal = true;
-                    } catch (e) {
-                        this.showMessage('加载 OpenClaw AGENTS.md 失败: ' + e.message, 'error');
-                    } finally {
-                        this.agentsLoading = false;
-                    }
-                },
-
-                async openOpenclawWorkspaceEditor() {
-                    const fileName = (this.openclawWorkspaceFileName || '').trim();
-                    if (!fileName) {
-                        this.showMessage('请输入工作区文件名', 'error');
-                        return;
-                    }
-                    this.setAgentsModalContext('openclaw-workspace', { fileName });
-                    this.agentsLoading = true;
-                    try {
-                        const res = await api('get-openclaw-workspace-file', { fileName });
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
-                            return;
-                        }
-                        if (res.configError) {
-                            this.showMessage(`OpenClaw 配置解析失败，已使用默认 Workspace：${res.configError}`, 'error');
-                        }
-                        this.agentsContent = res.content || '';
-                        this.agentsPath = res.path || '';
-                        this.agentsExists = !!res.exists;
-                        this.agentsLineEnding = res.lineEnding === '\r\n' ? '\r\n' : '\n';
-                        this.showAgentsModal = true;
-                    } catch (e) {
-                        this.showMessage('加载 OpenClaw 工作区文件失败: ' + e.message, 'error');
-                    } finally {
-                        this.agentsLoading = false;
-                    }
-                },
-
-                setAgentsModalContext(context, options = {}) {
-                    if (context === 'openclaw-workspace') {
-                        const fileName = (options.fileName || this.openclawWorkspaceFileName || 'AGENTS.md').trim();
-                        this.agentsContext = 'openclaw-workspace';
-                        this.agentsWorkspaceFileName = fileName;
-                        this.agentsModalTitle = `OpenClaw 工作区文件: ${fileName}`;
-                        this.agentsModalHint = `保存后会写入 OpenClaw Workspace 下的 ${fileName}。`;
-                        return;
-                    }
-                    this.agentsContext = context === 'openclaw' ? 'openclaw' : 'codex';
-                    if (this.agentsContext === 'openclaw') {
-                        this.agentsModalTitle = 'OpenClaw AGENTS.md 编辑器';
-                        this.agentsModalHint = '保存后会写入 OpenClaw Workspace 下的 AGENTS.md。';
-                    } else {
-                        this.agentsModalTitle = 'AGENTS.md 编辑器';
-                        this.agentsModalHint = '保存后会写入目标 AGENTS.md（与 config.toml 同级）。';
-                    }
-                    this.agentsWorkspaceFileName = '';
-                },
-
-                closeAgentsModal() {
-                    this.showAgentsModal = false;
-                    this.agentsContent = '';
-                    this.agentsPath = '';
-                    this.agentsExists = false;
-                    this.agentsLineEnding = '\n';
-                    this.agentsSaving = false;
-                    this.agentsWorkspaceFileName = '';
-                    this.setAgentsModalContext('codex');
-                },
-
-                async applyAgentsContent() {
-                    this.agentsSaving = true;
-                    try {
-                        let action = 'apply-agents-file';
-                        const params = {
-                            content: this.agentsContent,
-                            lineEnding: this.agentsLineEnding
-                        };
-                        if (this.agentsContext === 'openclaw') {
-                            action = 'apply-openclaw-agents-file';
-                        } else if (this.agentsContext === 'openclaw-workspace') {
-                            action = 'apply-openclaw-workspace-file';
-                            params.fileName = this.agentsWorkspaceFileName;
-                        }
-                        const res = await api(action, params);
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
-                            return;
-                        }
-                        const successLabel = this.agentsContext === 'openclaw-workspace'
-                            ? `工作区文件已保存${this.agentsWorkspaceFileName ? `: ${this.agentsWorkspaceFileName}` : ''}`
-                            : (this.agentsContext === 'openclaw' ? 'OpenClaw AGENTS.md 已保存' : 'AGENTS.md 已保存');
-                        this.showMessage(successLabel, 'success');
-                        this.closeAgentsModal();
-                    } catch (e) {
-                        this.showMessage('保存文件失败: ' + e.message, 'error');
-                    } finally {
-                        this.agentsSaving = false;
-                    }
-                },
-
-                async addProvider() {
-                    if (!this.newProvider.name || !this.newProvider.url) {
-                        return this.showMessage('名称和URL必填', 'error');
-                    }
-                    const name = this.newProvider.name.trim();
-                    if (!name) {
-                        return this.showMessage('名称不能为空', 'error');
-                    }
-                    if (this.providersList.some(item => item.name === name)) {
-                        return this.showMessage('提供商已存在', 'error');
-                    }
-
-                    const safeName = this.escapeTomlString(name);
-                    const safeUrl = this.escapeTomlString(this.newProvider.url.trim());
-                    const safeKey = this.escapeTomlString(this.newProvider.key || '');
-                    const newProviderBlock = `[model_providers.${safeName}]\nname = "${safeName}"\nbase_url = "${safeUrl}"\nwire_api = "responses"\nrequires_openai_auth = false\npreferred_auth_method = "${safeKey}"\nrequest_max_retries = 4\nstream_max_retries = 10\nstream_idle_timeout_ms = 300000`;
-
-                    this.currentProvider = name;
-                    this.showMessage('已生成新增模板，请确认后应用', 'info');
-                    this.closeAddModal();
-                    await this.openConfigTemplateEditor({
-                        appendHint: `新增 provider: ${name}（请检查字段后应用）`,
-                        appendBlock: newProviderBlock
-                    });
-                },
-
-                async deleteProvider(name) {
-                    if (!confirm(`确定删除提供商 "${name}"?`)) return;
-                    this.showMessage('请在模板中手动删除该 provider 配置块后应用', 'info');
-                    await this.openConfigTemplateEditor({
-                        appendHint: `请手动删除 [model_providers.${name}] 配置块，并确认 model_provider 指向有效 provider`
-                    });
-                },
-
-                openEditModal(provider) {
-                    this.editingProvider = {
-                        name: provider.name,
-                        url: provider.url || '',
-                        key: ''
-                    };
-                    this.showEditModal = true;
-                },
-
-                async updateProvider() {
-                    if (!this.editingProvider.url) {
-                        return this.showMessage('URL 必填', 'error');
-                    }
-
-                    const name = this.editingProvider.name;
-                    const safeUrl = this.escapeTomlString(this.editingProvider.url.trim());
-                    const safeKey = this.escapeTomlString(this.editingProvider.key || '');
-                    this.closeEditModal();
-                    this.showMessage('已生成更新模板，请确认后应用', 'info');
-                    await this.openConfigTemplateEditor({
-                        appendHint: `请将 [model_providers.${name}] 中 base_url 更新为 ${safeUrl}${safeKey ? '，并更新 preferred_auth_method' : ''}`
-                    });
-                },
-
-                closeEditModal() {
-                    this.showEditModal = false;
-                    this.editingProvider = { name: '', url: '', key: '' };
-                },
-
-                async addModel() {
-                    if (!this.newModelName || !this.newModelName.trim()) {
-                        return this.showMessage('请输入模型名称', 'error');
-                    }
-                    const res = await api('add-model', { model: this.newModelName.trim() });
-                    if (res.error) {
-                        this.showMessage(res.error, 'error');
-                    } else {
-                        this.showMessage('已添加', 'success');
-                        this.closeModelModal();
-                        await this.loadAll();
-                    }
-                },
-
-                async removeModel(model) {
-                    if (!confirm(`确定删除模型 "${model}"?`)) return;
-                    const res = await api('delete-model', { model });
-                    if (res.error) {
-                        this.showMessage(res.error, 'error');
-                    } else {
-                        this.showMessage('已删除', 'success');
-                        await this.loadAll();
-                    }
-                },
-
-                closeAddModal() {
-                    this.showAddModal = false;
-                    this.newProvider = { name: '', url: '', key: '' };
-                },
-
-                closeModelModal() {
-                    this.showModelModal = false;
-                    this.newModelName = '';
-                },
-
-                formatKey(key) {
-                    if (!key) return '(未设置)';
-                    if (key.length > 10) {
-                        return key.substring(0, 3) + '****' + key.substring(key.length - 3);
-                    }
-                    return '****';
-                },
-
-                displayApiKey(configName) {
-                    const key = this.claudeConfigs[configName]?.apiKey;
-                    return this.formatKey(key);
-                },
-
-                switchClaudeConfig(name) {
-                    this.currentClaudeConfig = name;
-                    this.refreshClaudeModelContext();
-                },
-
-                onClaudeModelChange() {
-                    const name = this.currentClaudeConfig;
-                    if (!name) {
-                        this.showMessage('请先选择配置', 'error');
-                        return;
-                    }
-                    const model = (this.currentClaudeModel || '').trim();
-                    if (!model) {
-                        this.showMessage('请输入模型', 'error');
-                        return;
-                    }
-                    const existing = this.claudeConfigs[name] || {};
-                    this.currentClaudeModel = model;
-                    this.claudeConfigs[name] = {
-                        apiKey: existing.apiKey || '',
-                        baseUrl: existing.baseUrl || '',
-                        model: model,
-                        hasKey: !!existing.apiKey
-                    };
-                    this.saveClaudeConfigs();
-                    this.updateClaudeModelsCurrent();
-                    if (!this.claudeConfigs[name].apiKey) {
-                        this.showMessage('该配置未设置 API Key，请先编辑', 'error');
-                        return;
-                    }
-                    this.applyClaudeConfig(name);
-                },
-
-                saveClaudeConfigs() {
-                    localStorage.setItem('claudeConfigs', JSON.stringify(this.claudeConfigs));
-                },
-
-                openEditConfigModal(name) {
-                    const config = this.claudeConfigs[name];
-                    this.editingConfig = {
-                        name: name,
-                        apiKey: config.apiKey || '',
-                        baseUrl: config.baseUrl || '',
-                        model: config.model || ''
-                    };
-                    this.showEditConfigModal = true;
-                },
-
-                updateConfig() {
-                    const name = this.editingConfig.name;
-                    this.claudeConfigs[name] = {
-                        apiKey: this.editingConfig.apiKey,
-                        baseUrl: this.editingConfig.baseUrl,
-                        model: this.editingConfig.model,
-                        hasKey: !!this.editingConfig.apiKey
-                    };
-                    this.saveClaudeConfigs();
-                    this.showMessage('配置已更新', 'success');
-                    this.closeEditConfigModal();
-                    if (name === this.currentClaudeConfig) {
-                        this.refreshClaudeModelContext();
-                    }
-                },
-
-                closeEditConfigModal() {
-                    this.showEditConfigModal = false;
-                    this.editingConfig = { name: '', apiKey: '', baseUrl: '', model: '' };
-                },
-
-                async saveAndApplyConfig() {
-                    const name = this.editingConfig.name;
-                    this.claudeConfigs[name] = {
-                        apiKey: this.editingConfig.apiKey,
-                        baseUrl: this.editingConfig.baseUrl,
-                        model: this.editingConfig.model,
-                        hasKey: !!this.editingConfig.apiKey
-                    };
-                    this.saveClaudeConfigs();
-
-                    const config = this.claudeConfigs[name];
-                    if (!config.apiKey) {
-                        this.showMessage('已保存，未应用：请先输入 API Key', 'info');
-                        this.closeEditConfigModal();
-                        if (name === this.currentClaudeConfig) {
-                            this.refreshClaudeModelContext();
-                        }
-                        return;
-                    }
-
-                    const res = await api('apply-claude-config', { config });
-                    if (res.error || res.success === false) {
-                        this.showMessage(res.error || '应用 Claude 配置失败', 'error');
-                    } else {
-                        const targetTip = res.targetPath ? `（${res.targetPath}）` : '';
-                        this.showMessage(`已保存并应用到 Claude 配置${targetTip}`, 'success');
-                        this.closeEditConfigModal();
-                        if (name === this.currentClaudeConfig) {
-                            this.refreshClaudeModelContext();
-                        }
-                    }
-                },
-
-                addClaudeConfig() {
-                    if (!this.newClaudeConfig.name || !this.newClaudeConfig.name.trim()) {
-                        return this.showMessage('请输入配置名称', 'error');
-                    }
-                    const name = this.newClaudeConfig.name.trim();
-                    if (this.claudeConfigs[name]) {
-                        return this.showMessage('配置名称已存在', 'error');
-                    }
-
-                    this.claudeConfigs[name] = {
-                        apiKey: this.newClaudeConfig.apiKey,
-                        baseUrl: this.newClaudeConfig.baseUrl,
-                        model: this.newClaudeConfig.model,
-                        hasKey: !!this.newClaudeConfig.apiKey
-                    };
-
-                    this.currentClaudeConfig = name;
-                    this.saveClaudeConfigs();
-                    this.showMessage('配置已添加', 'success');
-                    this.closeClaudeConfigModal();
-                    this.refreshClaudeModelContext();
-                },
-
-                deleteClaudeConfig(name) {
-                    if (Object.keys(this.claudeConfigs).length <= 1) {
-                        return this.showMessage('至少保留一个配置', 'error');
-                    }
-
-                    if (!confirm(`确定删除配置 "${name}"?`)) return;
-
-                    delete this.claudeConfigs[name];
-                    if (this.currentClaudeConfig === name) {
-                        this.currentClaudeConfig = Object.keys(this.claudeConfigs)[0];
-                    }
-                    this.saveClaudeConfigs();
-                    this.showMessage('配置已删除', 'success');
-                    this.refreshClaudeModelContext();
-                },
-
-                async applyClaudeConfig(name) {
-                    this.currentClaudeConfig = name;
-                    this.refreshClaudeModelContext();
-                    const config = this.claudeConfigs[name];
-
-                    if (!config.apiKey) {
-                        return this.showMessage('该配置未设置 API Key，请先编辑', 'error');
-                    }
-
-                    const res = await api('apply-claude-config', { config });
-                    if (res.error || res.success === false) {
-                        this.showMessage(res.error || '应用 Claude 配置失败', 'error');
-                    } else {
-                        const targetTip = res.targetPath ? `（${res.targetPath}）` : '';
-                        this.showMessage(`已应用配置到 Claude 设置: ${name}${targetTip}`, 'success');
-                    }
-                },
-
-                closeClaudeConfigModal() {
-                    this.showClaudeConfigModal = false;
-                    this.newClaudeConfig = {
-                        name: '',
-                        apiKey: '',
-                        baseUrl: 'https://open.bigmodel.cn/api/anthropic',
-                        model: 'glm-4.7'
-                    };
-                },
-
-                getOpenclawParser() {
-                    if (window.JSON5 && typeof window.JSON5.parse === 'function' && typeof window.JSON5.stringify === 'function') {
-                        return {
-                            parse: window.JSON5.parse,
-                            stringify: window.JSON5.stringify
-                        };
-                    }
-                    return {
-                        parse: JSON.parse,
-                        stringify: JSON.stringify
-                    };
-                },
-
-                parseOpenclawContent(content, options = {}) {
-                    const allowEmpty = !!options.allowEmpty;
-                    const raw = typeof content === 'string' ? content.trim() : '';
-                    if (!raw) {
-                        if (allowEmpty) {
-                            return { ok: true, data: {} };
-                        }
-                        return { ok: false, error: '配置内容为空' };
-                    }
-                    try {
-                        const parser = this.getOpenclawParser();
-                        const data = parser.parse(raw);
-                        if (!data || typeof data !== 'object' || Array.isArray(data)) {
-                            return { ok: false, error: '配置格式错误（根节点必须是对象）' };
-                        }
-                        return { ok: true, data };
-                    } catch (e) {
-                        return { ok: false, error: e.message || '解析失败' };
-                    }
-                },
-
-                stringifyOpenclawConfig(data) {
-                    const parser = this.getOpenclawParser();
-                    try {
-                        return parser.stringify(data, null, 2);
-                    } catch (e) {
-                        return JSON.stringify(data, null, 2);
-                    }
-                },
-
-                resetOpenclawStructured() {
-                    this.openclawStructured = {
-                        agentPrimary: '',
-                        agentFallbacks: [''],
-                        workspace: '',
-                        timeout: '',
-                        contextTokens: '',
-                        maxConcurrent: '',
-                        envItems: [{ key: '', value: '', show: false }],
-                        toolsProfile: 'default',
-                        toolsAllow: [''],
-                        toolsDeny: ['']
-                    };
-                    this.openclawAgentsList = [];
-                    this.openclawProviders = [];
-                    this.openclawMissingProviders = [];
-                },
-
-                getOpenclawQuickDefaults() {
-                    return {
-                        providerName: '',
-                        baseUrl: '',
-                        apiKey: '',
-                        apiType: 'openai-responses',
-                        modelId: '',
-                        modelName: '',
-                        contextWindow: '',
-                        maxTokens: '',
-                        setPrimary: true,
-                        overrideProvider: true,
-                        overrideModels: true,
-                        showKey: false
-                    };
-                },
-
-                resetOpenclawQuick() {
-                    this.openclawQuick = this.getOpenclawQuickDefaults();
-                },
-
-                toggleOpenclawQuickKey() {
-                    this.openclawQuick.showKey = !this.openclawQuick.showKey;
-                },
-
-                fillOpenclawQuickFromConfig(config) {
-                    const defaults = this.getOpenclawQuickDefaults();
-                    if (!config || typeof config !== 'object' || Array.isArray(config)) {
-                        this.openclawQuick = defaults;
-                        return;
-                    }
-
-                    const agentDefaults = config.agents && typeof config.agents === 'object' && !Array.isArray(config.agents)
-                        && config.agents.defaults && typeof config.agents.defaults === 'object' && !Array.isArray(config.agents.defaults)
-                        ? config.agents.defaults
-                        : {};
-                    const modelConfig = agentDefaults.model;
-                    const legacyAgent = config.agent && typeof config.agent === 'object' && !Array.isArray(config.agent)
-                        ? config.agent
-                        : {};
-
-                    let primaryRef = '';
-                    if (modelConfig && typeof modelConfig === 'object' && !Array.isArray(modelConfig) && typeof modelConfig.primary === 'string') {
-                        primaryRef = modelConfig.primary;
-                    } else if (typeof modelConfig === 'string') {
-                        primaryRef = modelConfig;
-                    }
-                    if (!primaryRef) {
-                        if (typeof legacyAgent.model === 'string') {
-                            primaryRef = legacyAgent.model;
-                        } else if (legacyAgent.model && typeof legacyAgent.model === 'object' && typeof legacyAgent.model.primary === 'string') {
-                            primaryRef = legacyAgent.model.primary;
-                        }
-                    }
-
-                    let providerName = '';
-                    let modelId = '';
-                    if (primaryRef) {
-                        const parts = primaryRef.split('/');
-                        if (parts.length >= 2) {
-                            providerName = parts.shift().trim();
-                            modelId = parts.join('/').trim();
-                        }
-                    }
-
-                    const providers = config.models && typeof config.models === 'object' && !Array.isArray(config.models)
-                        && config.models.providers && typeof config.models.providers === 'object' && !Array.isArray(config.models.providers)
-                        ? config.models.providers
-                        : null;
-                    let providerConfig = providerName && providers ? providers[providerName] : null;
-                    if (!providerName && providers) {
-                        const providerKeys = Object.keys(providers);
-                        if (providerKeys.length === 1) {
-                            providerName = providerKeys[0];
-                            providerConfig = providers[providerName];
-                        }
-                    }
-
-                    let modelEntry = null;
-                    if (providerConfig && typeof providerConfig === 'object' && Array.isArray(providerConfig.models)) {
-                        if (modelId) {
-                            modelEntry = providerConfig.models.find(item => item && item.id === modelId);
-                        }
-                        if (!modelEntry && providerConfig.models.length === 1) {
-                            modelEntry = providerConfig.models[0];
-                            if (!modelId && modelEntry && typeof modelEntry.id === 'string') {
-                                modelId = modelEntry.id;
-                            }
-                        }
-                    }
-
-                    const baseUrl = providerConfig && typeof providerConfig === 'object' && typeof providerConfig.baseUrl === 'string'
-                        ? providerConfig.baseUrl
-                        : '';
-                    const apiKey = providerConfig && typeof providerConfig === 'object' && typeof providerConfig.apiKey === 'string'
-                        ? providerConfig.apiKey
-                        : '';
-                    const apiType = providerConfig && typeof providerConfig === 'object' && typeof providerConfig.api === 'string'
-                        ? providerConfig.api
-                        : defaults.apiType;
-
-                    this.openclawQuick = {
-                        ...defaults,
-                        providerName,
-                        baseUrl,
-                        apiKey,
-                        apiType,
-                        modelId: modelId || '',
-                        modelName: modelEntry && typeof modelEntry.name === 'string' ? modelEntry.name : '',
-                        contextWindow: modelEntry && typeof modelEntry.contextWindow === 'number'
-                            ? String(modelEntry.contextWindow)
-                            : '',
-                        maxTokens: modelEntry && typeof modelEntry.maxTokens === 'number'
-                            ? String(modelEntry.maxTokens)
-                            : ''
-                    };
-                },
-
-                syncOpenclawQuickFromText(options = {}) {
-                    const silent = !!options.silent;
-                    const parsed = this.parseOpenclawContent(this.openclawEditing.content, { allowEmpty: true });
-                    if (!parsed.ok) {
-                        this.resetOpenclawQuick();
-                        if (!silent) {
-                            this.showMessage('解析 OpenClaw 配置失败: ' + parsed.error, 'error');
-                        }
-                        return false;
-                    }
-                    this.fillOpenclawQuickFromConfig(parsed.data);
-                    if (!silent) {
-                        this.showMessage('已从编辑器读取快速配置', 'success');
-                    }
-                    return true;
-                },
-
-                mergeOpenclawModelEntry(existing, incoming, overwrite = false) {
-                    if (!existing || typeof existing !== 'object' || Array.isArray(existing)) {
-                        return { ...incoming };
-                    }
-                    if (overwrite) {
-                        return { ...incoming };
-                    }
-                    const merged = { ...existing };
-                    for (const [key, value] of Object.entries(incoming || {})) {
-                        if (merged[key] === undefined || merged[key] === null || merged[key] === '') {
-                            merged[key] = value;
-                        }
-                    }
-                    return merged;
-                },
-
-                fillOpenclawStructured(config) {
-                    const defaults = config && config.agents && typeof config.agents === 'object' && !Array.isArray(config.agents)
-                        && config.agents.defaults && typeof config.agents.defaults === 'object' && !Array.isArray(config.agents.defaults)
-                        ? config.agents.defaults
-                        : {};
-                    const model = defaults.model && typeof defaults.model === 'object' && !Array.isArray(defaults.model)
-                        ? defaults.model
-                        : {};
-                    const legacyAgent = config && config.agent && typeof config.agent === 'object' && !Array.isArray(config.agent)
-                        ? config.agent
-                        : {};
-                    const fallbackList = Array.isArray(model.fallbacks)
-                        ? model.fallbacks.filter(item => typeof item === 'string' && item.trim()).map(item => item.trim())
-                        : [];
-                    const env = config && config.env && typeof config.env === 'object' && !Array.isArray(config.env)
-                        ? config.env
-                        : {};
-                    const envItems = Object.entries(env).map(([key, value]) => ({
-                        key,
-                        value: value == null ? '' : String(value),
-                        show: false
-                    }));
-                    const tools = config && config.tools && typeof config.tools === 'object' && !Array.isArray(config.tools)
-                        ? config.tools
-                        : {};
-
-                    let primary = typeof model.primary === 'string' ? model.primary : '';
-                    if (!primary) {
-                        if (typeof legacyAgent.model === 'string') {
-                            primary = legacyAgent.model;
-                        } else if (legacyAgent.model && typeof legacyAgent.model === 'object' && typeof legacyAgent.model.primary === 'string') {
-                            primary = legacyAgent.model.primary;
-                        }
-                    }
-
-                    this.openclawStructured = {
-                        agentPrimary: primary,
-                        agentFallbacks: fallbackList.length ? fallbackList : [''],
-                        workspace: typeof defaults.workspace === 'string' ? defaults.workspace : '',
-                        timeout: typeof defaults.timeout === 'number' && Number.isFinite(defaults.timeout)
-                            ? String(defaults.timeout)
-                            : '',
-                        contextTokens: typeof defaults.contextTokens === 'number' && Number.isFinite(defaults.contextTokens)
-                            ? String(defaults.contextTokens)
-                            : '',
-                        maxConcurrent: typeof defaults.maxConcurrent === 'number' && Number.isFinite(defaults.maxConcurrent)
-                            ? String(defaults.maxConcurrent)
-                            : '',
-                        envItems: envItems.length ? envItems : [{ key: '', value: '', show: false }],
-                        toolsProfile: typeof tools.profile === 'string' && tools.profile.trim() ? tools.profile : 'default',
-                        toolsAllow: Array.isArray(tools.allow) && tools.allow.length
-                            ? tools.allow.filter(item => typeof item === 'string' && item.trim()).map(item => item.trim())
-                            : [''],
-                        toolsDeny: Array.isArray(tools.deny) && tools.deny.length
-                            ? tools.deny.filter(item => typeof item === 'string' && item.trim()).map(item => item.trim())
-                            : ['']
-                    };
-                },
-
-                syncOpenclawStructuredFromText(options = {}) {
-                    const silent = !!options.silent;
-                    const parsed = this.parseOpenclawContent(this.openclawEditing.content, { allowEmpty: true });
-                    if (!parsed.ok) {
-                        this.resetOpenclawStructured();
-                        this.resetOpenclawQuick();
-                        if (!silent) {
-                            this.showMessage('解析 OpenClaw 配置失败: ' + parsed.error, 'error');
-                        }
-                        return false;
-                    }
-                    this.fillOpenclawStructured(parsed.data);
-                    this.fillOpenclawQuickFromConfig(parsed.data);
-                    this.refreshOpenclawProviders(parsed.data);
-                    this.refreshOpenclawAgentsList(parsed.data);
-                    if (!silent) {
-                        this.showMessage('已从文本刷新结构化配置', 'success');
-                    }
-                    return true;
-                },
-
-                getOpenclawActiveProviders(config) {
-                    const active = new Set();
-                    const addProvider = (ref) => {
-                        if (typeof ref !== 'string') return;
-                        const text = ref.trim();
-                        if (!text) return;
-                        const parts = text.split('/');
-                        if (parts.length < 2) return;
-                        const provider = parts[0].trim();
-                        if (provider) active.add(provider);
-                    };
-                    const defaults = config && config.agents && config.agents.defaults
-                        ? config.agents.defaults
-                        : {};
-                    const model = defaults && defaults.model;
-                    if (model && typeof model === 'object' && !Array.isArray(model)) {
-                        addProvider(model.primary);
-                        if (Array.isArray(model.fallbacks)) {
-                            for (const item of model.fallbacks) {
-                                addProvider(item);
-                            }
-                        }
-                    } else if (typeof model === 'string') {
-                        addProvider(model);
-                    }
-                    const modelsDefaults = config && config.models && config.models.defaults
-                        ? config.models.defaults
-                        : {};
-                    if (modelsDefaults && typeof modelsDefaults.provider === 'string' && modelsDefaults.provider.trim()) {
-                        active.add(modelsDefaults.provider.trim());
-                    }
-                    if (modelsDefaults && typeof modelsDefaults.model === 'string') {
-                        addProvider(modelsDefaults.model);
-                    }
-                    return active;
-                },
-
-                maskProviderValue(value) {
-                    const text = value == null ? '' : String(value);
-                    if (!text) return '****';
-                    if (text.length <= 6) return '****';
-                    return `${text.slice(0, 3)}****${text.slice(-3)}`;
-                },
-
-                formatProviderValue(key, value) {
-                    if (typeof value === 'undefined' || value === null) {
-                        return '';
-                    }
-                    let text = '';
-                    if (typeof value === 'string') {
-                        text = value;
-                    } else if (typeof value === 'number' || typeof value === 'boolean') {
-                        text = String(value);
-                    } else {
-                        try {
-                            text = JSON.stringify(value);
-                        } catch (_) {
-                            text = String(value);
-                        }
-                    }
-                    if (!text) return '';
-                    if (/key|token|secret|password/i.test(key)) {
-                        return this.maskProviderValue(text);
-                    }
-                    if (text.length > 160) {
-                        return `${text.slice(0, 157)}...`;
-                    }
-                    return text;
-                },
-
-                collectOpenclawProviders(source, providerMap, activeProviders, entries) {
-                    if (!providerMap || typeof providerMap !== 'object' || Array.isArray(providerMap)) {
-                        return;
-                    }
-                    const keys = Object.keys(providerMap).sort();
-                    for (const key of keys) {
-                        const value = providerMap[key];
-                        const fields = [];
-                        if (value && typeof value === 'object' && !Array.isArray(value)) {
-                            const fieldKeys = Object.keys(value).sort();
-                            for (const fieldKey of fieldKeys) {
-                                const fieldValue = this.formatProviderValue(fieldKey, value[fieldKey]);
-                                if (fieldValue === '') continue;
-                                fields.push({ key: fieldKey, value: fieldValue });
-                            }
-                        } else {
-                            const fieldValue = this.formatProviderValue('value', value);
-                            if (fieldValue !== '') {
-                                fields.push({ key: 'value', value: fieldValue });
-                            }
-                        }
-                        entries.push({
-                            key,
-                            source,
-                            fields,
-                            isActive: activeProviders.has(key)
-                        });
-                    }
-                },
-
-                refreshOpenclawProviders(config) {
-                    const activeProviders = this.getOpenclawActiveProviders(config || {});
-                    const entries = [];
-                    const modelsProviders = config && config.models ? config.models.providers : null;
-                    const rootProviders = config && config.providers ? config.providers : null;
-                    this.collectOpenclawProviders('models.providers', modelsProviders, activeProviders, entries);
-                    this.collectOpenclawProviders('providers', rootProviders, activeProviders, entries);
-                    const existing = new Set(entries.map(item => item.key));
-                    const missing = [];
-                    for (const provider of activeProviders) {
-                        if (!existing.has(provider)) {
-                            missing.push(provider);
-                        }
-                    }
-                    this.openclawProviders = entries;
-                    this.openclawMissingProviders = missing;
-                },
-
-                refreshOpenclawAgentsList(config) {
-                    const list = config && config.agents && typeof config.agents === 'object' && !Array.isArray(config.agents)
-                        ? config.agents.list
-                        : null;
-                    if (!Array.isArray(list)) {
-                        this.openclawAgentsList = [];
-                        return;
-                    }
-                    const entries = [];
-                    list.forEach((item, index) => {
-                        if (!item || typeof item !== 'object') return;
-                        const id = typeof item.id === 'string' && item.id.trim() ? item.id.trim() : `agent-${index + 1}`;
-                        const identity = item.identity && typeof item.identity === 'object' && !Array.isArray(item.identity)
-                            ? item.identity
-                            : {};
-                        const name = typeof identity.name === 'string' && identity.name.trim()
-                            ? identity.name.trim()
-                            : id;
-                        entries.push({
-                            key: `${id}-${index}`,
-                            id,
-                            name,
-                            theme: typeof identity.theme === 'string' ? identity.theme : '',
-                            emoji: typeof identity.emoji === 'string' ? identity.emoji : '',
-                            avatar: typeof identity.avatar === 'string' ? identity.avatar : ''
-                        });
-                    });
-                    this.openclawAgentsList = entries;
-                },
-
-                normalizeStringList(list) {
-                    if (!Array.isArray(list)) return [];
-                    const result = [];
-                    const seen = new Set();
-                    for (const item of list) {
-                        const value = typeof item === 'string' ? item.trim() : String(item || '').trim();
-                        if (!value) continue;
-                        const key = value;
-                        if (seen.has(key)) continue;
-                        seen.add(key);
-                        result.push(value);
-                    }
-                    return result;
-                },
-
-                normalizeEnvItems(items) {
-                    if (!Array.isArray(items)) {
-                        return { ok: true, items: {} };
-                    }
-                    const output = {};
-                    const seen = new Set();
-                    for (const item of items) {
-                        const key = item && typeof item.key === 'string' ? item.key.trim() : '';
-                        if (!key) continue;
-                        if (seen.has(key)) {
-                            return { ok: false, error: `环境变量重复: ${key}` };
-                        }
-                        seen.add(key);
-                        const value = item && typeof item.value !== 'undefined' ? String(item.value) : '';
-                        output[key] = value;
-                    }
-                    return { ok: true, items: output };
-                },
-
-                parseOptionalNumber(value, label) {
-                    const text = typeof value === 'string' ? value.trim() : String(value || '').trim();
-                    if (!text) {
-                        return { ok: true, value: null };
-                    }
-                    const num = Number(text);
-                    if (!Number.isFinite(num) || num < 0) {
-                        return { ok: false, error: `${label} 请输入有效数字` };
-                    }
-                    return { ok: true, value: num };
-                },
-
-                applyOpenclawStructuredToText() {
-                    const parsed = this.parseOpenclawContent(this.openclawEditing.content, { allowEmpty: true });
-                    if (!parsed.ok) {
-                        this.showMessage('解析 OpenClaw 配置失败: ' + parsed.error, 'error');
-                        return;
-                    }
-
-                    const config = parsed.data;
-                    const agents = config.agents && typeof config.agents === 'object' && !Array.isArray(config.agents)
-                        ? config.agents
-                        : {};
-                    const defaults = agents.defaults && typeof agents.defaults === 'object' && !Array.isArray(agents.defaults)
-                        ? agents.defaults
-                        : {};
-                    const model = defaults.model && typeof defaults.model === 'object' && !Array.isArray(defaults.model)
-                        ? defaults.model
-                        : {};
-
-                    const primary = (this.openclawStructured.agentPrimary || '').trim();
-                    const fallbacks = this.normalizeStringList(this.openclawStructured.agentFallbacks);
-                    if (primary) {
-                        model.primary = primary;
-                    }
-                    if (fallbacks.length) {
-                        model.fallbacks = fallbacks;
-                    }
-                    if (primary || fallbacks.length) {
-                        defaults.model = model;
-                    }
-                    if (primary && config.agent && typeof config.agent === 'object' && !Array.isArray(config.agent)) {
-                        config.agent.model = primary;
-                    }
-
-                    const workspace = (this.openclawStructured.workspace || '').trim();
-                    if (workspace) {
-                        defaults.workspace = workspace;
-                    }
-
-                    const timeout = this.parseOptionalNumber(this.openclawStructured.timeout, 'Timeout');
-                    if (!timeout.ok) {
-                        this.showMessage(timeout.error, 'error');
-                        return;
-                    }
-                    if (timeout.value !== null) {
-                        defaults.timeout = timeout.value;
-                    }
-
-                    const contextTokens = this.parseOptionalNumber(this.openclawStructured.contextTokens, 'Context Tokens');
-                    if (!contextTokens.ok) {
-                        this.showMessage(contextTokens.error, 'error');
-                        return;
-                    }
-                    if (contextTokens.value !== null) {
-                        defaults.contextTokens = contextTokens.value;
-                    }
-
-                    const maxConcurrent = this.parseOptionalNumber(this.openclawStructured.maxConcurrent, 'Max Concurrent');
-                    if (!maxConcurrent.ok) {
-                        this.showMessage(maxConcurrent.error, 'error');
-                        return;
-                    }
-                    if (maxConcurrent.value !== null) {
-                        defaults.maxConcurrent = maxConcurrent.value;
-                    }
-
-                    if (Object.keys(defaults).length > 0) {
-                        config.agents = agents;
-                        config.agents.defaults = defaults;
-                    }
-
-                    const envResult = this.normalizeEnvItems(this.openclawStructured.envItems);
-                    if (!envResult.ok) {
-                        this.showMessage(envResult.error, 'error');
-                        return;
-                    }
-                    if (Object.keys(envResult.items).length > 0) {
-                        config.env = envResult.items;
-                    } else if (config.env) {
-                        delete config.env;
-                    }
-
-                    const profile = (this.openclawStructured.toolsProfile || '').trim();
-                    const allowList = this.normalizeStringList(this.openclawStructured.toolsAllow);
-                    const denyList = this.normalizeStringList(this.openclawStructured.toolsDeny);
-                    const hasTools = profile || allowList.length || denyList.length || (config.tools && typeof config.tools === 'object');
-                    if (hasTools) {
-                        const tools = config.tools && typeof config.tools === 'object' && !Array.isArray(config.tools)
-                            ? config.tools
-                            : {};
-                        tools.profile = profile || tools.profile || 'default';
-                        tools.allow = allowList;
-                        tools.deny = denyList;
-                        config.tools = tools;
-                    }
-
-                    this.openclawEditing.content = this.stringifyOpenclawConfig(config);
-                    this.refreshOpenclawProviders(config);
-                    this.refreshOpenclawAgentsList(config);
-                    this.fillOpenclawQuickFromConfig(config);
-                    this.showMessage('已写入编辑器', 'success');
-                },
-
-                applyOpenclawQuickToText() {
-                    const parsed = this.parseOpenclawContent(this.openclawEditing.content, { allowEmpty: true });
-                    if (!parsed.ok) {
-                        this.showMessage('解析 OpenClaw 配置失败: ' + parsed.error, 'error');
-                        return;
-                    }
-
-                    const providerName = (this.openclawQuick.providerName || '').trim();
-                    const modelId = (this.openclawQuick.modelId || '').trim();
-                    if (!providerName) {
-                        this.showMessage('请填写 Provider 名称', 'error');
-                        return;
-                    }
-                    if (providerName.includes('/')) {
-                        this.showMessage('Provider 名称不能包含 "/"', 'error');
-                        return;
-                    }
-                    if (!modelId) {
-                        this.showMessage('请填写模型 ID', 'error');
-                        return;
-                    }
-
-                    const config = parsed.data;
-                    const ensureObject = (value) => (value && typeof value === 'object' && !Array.isArray(value)) ? value : {};
-                    const models = ensureObject(config.models);
-                    const providers = ensureObject(models.providers);
-                    const provider = ensureObject(providers[providerName]);
-                    const baseUrl = (this.openclawQuick.baseUrl || '').trim();
-                    if (!baseUrl && !provider.baseUrl) {
-                        this.showMessage('请填写 Base URL', 'error');
-                        return;
-                    }
-
-                    const contextWindow = this.parseOptionalNumber(this.openclawQuick.contextWindow, '上下文长度');
-                    if (!contextWindow.ok) {
-                        this.showMessage(contextWindow.error, 'error');
-                        return;
-                    }
-                    const maxTokens = this.parseOptionalNumber(this.openclawQuick.maxTokens, '最大输出');
-                    if (!maxTokens.ok) {
-                        this.showMessage(maxTokens.error, 'error');
-                        return;
-                    }
-
-                    const shouldOverrideProvider = !!this.openclawQuick.overrideProvider;
-                    const apiKey = (this.openclawQuick.apiKey || '').trim();
-                    const apiType = (this.openclawQuick.apiType || '').trim();
-                    const setProviderField = (key, value) => {
-                        if (!value) return;
-                        if (shouldOverrideProvider || provider[key] === undefined || provider[key] === null || provider[key] === '') {
-                            provider[key] = value;
-                        }
-                    };
-                    setProviderField('baseUrl', baseUrl);
-                    setProviderField('api', apiType);
-                    if (apiKey) {
-                        setProviderField('apiKey', apiKey);
-                    }
-
-                    const modelName = (this.openclawQuick.modelName || '').trim() || modelId;
-                    const modelEntry = {
-                        id: modelId,
-                        name: modelName,
-                        reasoning: false,
-                        input: ['text'],
-                        cost: {
-                            input: 0,
-                            output: 0,
-                            cacheRead: 0,
-                            cacheWrite: 0
-                        }
-                    };
-                    if (contextWindow.value !== null) {
-                        modelEntry.contextWindow = contextWindow.value;
-                    }
-                    if (maxTokens.value !== null) {
-                        modelEntry.maxTokens = maxTokens.value;
-                    }
-
-                    const existingModels = Array.isArray(provider.models) ? [...provider.models] : [];
-                    if (this.openclawQuick.overrideModels || existingModels.length === 0) {
-                        provider.models = [modelEntry];
-                    } else {
-                        const idx = existingModels.findIndex(item => item && item.id === modelId);
-                        if (idx >= 0) {
-                            existingModels[idx] = this.mergeOpenclawModelEntry(existingModels[idx], modelEntry, false);
-                        } else {
-                            existingModels.push(modelEntry);
-                        }
-                        provider.models = existingModels;
-                    }
-
-                    providers[providerName] = provider;
-                    models.providers = providers;
-                    config.models = models;
-
-                    if (this.openclawQuick.setPrimary) {
-                        const agents = ensureObject(config.agents);
-                        const defaults = ensureObject(agents.defaults);
-                        const modelConfig = defaults.model && typeof defaults.model === 'object' && !Array.isArray(defaults.model)
-                            ? defaults.model
-                            : {};
-                        modelConfig.primary = `${providerName}/${modelId}`;
-                        defaults.model = modelConfig;
-                        agents.defaults = defaults;
-                        config.agents = agents;
-                        if (config.agent && typeof config.agent === 'object' && !Array.isArray(config.agent)) {
-                            config.agent.model = modelConfig.primary;
-                        }
-                    }
-
-                    this.openclawEditing.content = this.stringifyOpenclawConfig(config);
-                    this.fillOpenclawStructured(config);
-                    this.refreshOpenclawProviders(config);
-                    this.refreshOpenclawAgentsList(config);
-                    this.showMessage('快速配置已写入编辑器', 'success');
-                },
-
-                addOpenclawFallback() {
-                    this.openclawStructured.agentFallbacks.push('');
-                },
-
-                removeOpenclawFallback(index) {
-                    this.openclawStructured.agentFallbacks.splice(index, 1);
-                    if (this.openclawStructured.agentFallbacks.length === 0) {
-                        this.openclawStructured.agentFallbacks.push('');
-                    }
-                },
-
-                addOpenclawEnvItem() {
-                    this.openclawStructured.envItems.push({ key: '', value: '', show: false });
-                },
-
-                removeOpenclawEnvItem(index) {
-                    this.openclawStructured.envItems.splice(index, 1);
-                    if (this.openclawStructured.envItems.length === 0) {
-                        this.openclawStructured.envItems.push({ key: '', value: '', show: false });
-                    }
-                },
-
-                toggleOpenclawEnvItem(index) {
-                    const item = this.openclawStructured.envItems[index];
-                    if (item) {
-                        item.show = !item.show;
-                    }
-                },
-
-                addOpenclawToolsAllow() {
-                    this.openclawStructured.toolsAllow.push('');
-                },
-
-                removeOpenclawToolsAllow(index) {
-                    this.openclawStructured.toolsAllow.splice(index, 1);
-                    if (this.openclawStructured.toolsAllow.length === 0) {
-                        this.openclawStructured.toolsAllow.push('');
-                    }
-                },
-
-                addOpenclawToolsDeny() {
-                    this.openclawStructured.toolsDeny.push('');
-                },
-
-                removeOpenclawToolsDeny(index) {
-                    this.openclawStructured.toolsDeny.splice(index, 1);
-                    if (this.openclawStructured.toolsDeny.length === 0) {
-                        this.openclawStructured.toolsDeny.push('');
-                    }
-                },
-
-                openclawHasContent(config) {
-                    return !!(config && typeof config.content === 'string' && config.content.trim());
-                },
-
-                openclawSubtitle(config) {
-                    if (!this.openclawHasContent(config)) {
-                        return '未设置配置';
-                    }
-                    const length = config.content.trim().length;
-                    return `已保存 ${length} 字符`;
-                },
-
-                saveOpenclawConfigs() {
-                    localStorage.setItem('openclawConfigs', JSON.stringify(this.openclawConfigs));
-                },
-
-                openOpenclawAddModal() {
-                    this.openclawEditorTitle = '添加 OpenClaw 配置';
-                    this.openclawEditing = {
-                        name: '',
-                        content: '',
-                        lockName: false
-                    };
-                    this.openclawConfigPath = '';
-                    this.openclawConfigExists = false;
-                    this.openclawLineEnding = '\n';
-                    void this.loadOpenclawConfigFromFile({ silent: true, force: true, fallbackToTemplate: true });
-                    this.showOpenclawConfigModal = true;
-                },
-
-                openOpenclawEditModal(name) {
-                    this.openclawEditorTitle = `编辑 OpenClaw 配置: ${name}`;
-                    this.openclawEditing = {
-                        name,
-                        content: '',
-                        lockName: true
-                    };
-                    void this.loadOpenclawConfigFromFile({ silent: true, force: true, fallbackToTemplate: true });
-                    this.showOpenclawConfigModal = true;
-                },
-
-                closeOpenclawConfigModal() {
-                    this.showOpenclawConfigModal = false;
-                    this.openclawEditing = { name: '', content: '', lockName: false };
-                    this.openclawSaving = false;
-                    this.openclawApplying = false;
-                    this.resetOpenclawStructured();
-                    this.resetOpenclawQuick();
-                },
-
-                async loadOpenclawConfigFromFile(options = {}) {
-                    const silent = !!options.silent;
-                    const force = !!options.force;
-                    const fallbackToTemplate = options.fallbackToTemplate !== false;
-                    this.openclawFileLoading = true;
-                    try {
-                        const res = await api('get-openclaw-config');
-                        if (res.error) {
-                            if (!silent) {
-                                this.showMessage(res.error, 'error');
-                            }
-                            return;
-                        }
-                        this.openclawConfigPath = res.path || '';
-                        this.openclawConfigExists = !!res.exists;
-                        this.openclawLineEnding = res.lineEnding === '\r\n' ? '\r\n' : '\n';
-                        const hasContent = !!(res.content && res.content.trim());
-                        const shouldOverride = force || !this.openclawEditing.content || !this.openclawEditing.content.trim();
-                        if (hasContent && shouldOverride) {
-                            this.openclawEditing.content = res.content;
-                        } else if (!hasContent && shouldOverride && fallbackToTemplate) {
-                            this.openclawEditing.content = DEFAULT_OPENCLAW_TEMPLATE;
-                        }
-                        this.syncOpenclawStructuredFromText({ silent: true });
-                        if (!silent) {
-                            this.showMessage('已加载当前 OpenClaw 配置', 'success');
-                        }
-                    } catch (e) {
-                        if (!silent) {
-                            this.showMessage('加载 OpenClaw 配置失败: ' + e.message, 'error');
-                        }
-                    } finally {
-                        this.openclawFileLoading = false;
-                    }
-                },
-
-                persistOpenclawConfig({ closeModal = true } = {}) {
-                    if (!this.openclawEditing.name || !this.openclawEditing.name.trim()) {
-                        this.showMessage('请输入配置名称', 'error');
-                        return '';
-                    }
-                    const name = this.openclawEditing.name.trim();
-                    if (!this.openclawEditing.lockName && this.openclawConfigs[name]) {
-                        this.showMessage('配置名称已存在', 'error');
-                        return '';
-                    }
-                    if (!this.openclawEditing.content || !this.openclawEditing.content.trim()) {
-                        this.showMessage('配置内容不能为空', 'error');
-                        return '';
-                    }
-
-                    this.openclawConfigs[name] = {
-                        content: this.openclawEditing.content
-                    };
-                    this.currentOpenclawConfig = name;
-                    this.saveOpenclawConfigs();
-                    if (closeModal) {
-                        this.closeOpenclawConfigModal();
-                    }
-                    return name;
-                },
-
-                async saveOpenclawConfig() {
-                    this.openclawSaving = true;
-                    try {
-                        const name = this.persistOpenclawConfig();
-                        if (!name) return;
-                        this.showMessage('OpenClaw 配置已保存', 'success');
-                    } finally {
-                        this.openclawSaving = false;
-                    }
-                },
-
-                async saveAndApplyOpenclawConfig() {
-                    this.openclawApplying = true;
-                    try {
-                        const name = this.persistOpenclawConfig({ closeModal: false });
-                        if (!name) return;
-                        const config = this.openclawConfigs[name];
-                        const res = await api('apply-openclaw-config', {
-                            content: config.content,
-                            lineEnding: this.openclawLineEnding
-                        });
-                        if (res.error || res.success === false) {
-                            this.showMessage(res.error || '应用 OpenClaw 配置失败', 'error');
-                            return;
-                        }
-                        this.openclawConfigPath = res.targetPath || this.openclawConfigPath;
-                        this.openclawConfigExists = true;
-                        const targetTip = res.targetPath ? `（${res.targetPath}）` : '';
-                        this.showMessage(`已保存并应用 OpenClaw 配置${targetTip}`, 'success');
-                        this.closeOpenclawConfigModal();
-                    } catch (e) {
-                        this.showMessage('应用 OpenClaw 配置失败: ' + e.message, 'error');
-                    } finally {
-                        this.openclawApplying = false;
-                    }
-                },
-
-                deleteOpenclawConfig(name) {
-                    if (Object.keys(this.openclawConfigs).length <= 1) {
-                        return this.showMessage('至少保留一个配置', 'error');
-                    }
-                    if (!confirm(`确定删除配置 "${name}"?`)) return;
-                    delete this.openclawConfigs[name];
-                    if (this.currentOpenclawConfig === name) {
-                        this.currentOpenclawConfig = Object.keys(this.openclawConfigs)[0];
-                    }
-                    this.saveOpenclawConfigs();
-                    this.showMessage('OpenClaw 配置已删除', 'success');
-                },
-
-                async applyOpenclawConfig(name) {
-                    this.currentOpenclawConfig = name;
-                    const config = this.openclawConfigs[name];
-                    if (!this.openclawHasContent(config)) {
-                        return this.showMessage('该配置为空，请先编辑', 'error');
-                    }
-                    const res = await api('apply-openclaw-config', {
-                        content: config.content,
-                        lineEnding: this.openclawLineEnding
-                    });
-                    if (res.error || res.success === false) {
-                        this.showMessage(res.error || '应用 OpenClaw 配置失败', 'error');
-                    } else {
-                        this.openclawConfigPath = res.targetPath || this.openclawConfigPath;
-                        this.openclawConfigExists = true;
-                        const targetTip = res.targetPath ? `（${res.targetPath}）` : '';
-                        this.showMessage(`已应用 OpenClaw 配置: ${name}${targetTip}`, 'success');
-                    }
-                },
-
-                formatLatency(result) {
-                    if (!result) return '';
-                    if (!result.ok) return result.status ? `ERR ${result.status}` : 'ERR';
-                    const ms = typeof result.durationMs === 'number' ? result.durationMs : 0;
-                    return `${ms}ms`;
-                },
-
-                buildSpeedTestIssue(name, result) {
-                    if (!name || !result) return null;
-                    if (result.error) {
-                        const error = String(result.error || '');
-                        const errorLower = error.toLowerCase();
-                        if (error === 'Provider not found') {
-                            return {
-                                code: 'remote-speedtest-provider-missing',
-                                message: `提供商 ${name} 未找到，无法测速`,
-                                suggestion: '检查配置是否存在该 provider'
-                            };
-                        }
-                        if (error === 'Provider missing URL' || error === 'Missing name or url') {
-                            return {
-                                code: 'remote-speedtest-baseurl-missing',
-                                message: `提供商 ${name} 缺少 base_url`,
-                                suggestion: '补全 base_url 后重试'
-                            };
-                        }
-                        if (errorLower.includes('invalid url')) {
-                            return {
-                                code: 'remote-speedtest-invalid-url',
-                                message: `提供商 ${name} 的 base_url 无效`,
-                                suggestion: '请设置为 http/https 的完整 URL'
-                            };
-                        }
-                        if (errorLower.includes('timeout')) {
-                            return {
-                                code: 'remote-speedtest-timeout',
-                                message: `提供商 ${name} 远程测速超时`,
-                                suggestion: '检查网络或 base_url 是否可达'
-                            };
-                        }
-                        return {
-                            code: 'remote-speedtest-unreachable',
-                            message: `提供商 ${name} 远程测速失败：${error || '无法连接'}`,
-                            suggestion: '检查网络或 base_url 是否可用'
-                        };
-                    }
-
-                    const status = typeof result.status === 'number' ? result.status : 0;
-                    if (status === 401 || status === 403) {
-                        return {
-                            code: 'remote-speedtest-auth-failed',
-                            message: `提供商 ${name} 远程测速鉴权失败（401/403）`,
-                            suggestion: '检查 API Key 或认证方式'
-                        };
-                    }
-                    if (status >= 400) {
-                        return {
-                            code: 'remote-speedtest-http-error',
-                            message: `提供商 ${name} 远程测速返回异常状态: ${status}`,
-                            suggestion: '检查 base_url 或服务状态'
-                        };
-                    }
-                    return null;
-                },
-
-                async runSpeedTest(name, options = {}) {
-                    if (!name || this.speedLoading[name]) return null;
-                    const silent = !!options.silent;
-                    this.speedLoading[name] = true;
-                    try {
-                        const res = await api('speed-test', { name });
-                        if (res.error) {
-                            this.speedResults[name] = { ok: false, error: res.error };
-                            if (!silent) {
-                                this.showMessage(res.error, 'error');
-                            }
-                            return { ok: false, error: res.error };
-                        }
-                        this.speedResults[name] = res;
-                        if (!silent) {
-                            const status = res.status ? ` (${res.status})` : '';
-                            this.showMessage(`Speed ${name}: ${this.formatLatency(res)}${status}`, 'success');
-                        }
-                        return res;
-                    } catch (e) {
-                        const message = e && e.message ? e.message : 'Speed test failed';
-                        this.speedResults[name] = { ok: false, error: message };
-                        if (!silent) {
-                            this.showMessage(message, 'error');
-                        }
-                        return { ok: false, error: message };
-                    } finally {
-                        this.speedLoading[name] = false;
-                    }
-                },
-
-                showMessage(text, type) {
-                    this.message = text;
-                    this.messageType = type || 'info';
-                    setTimeout(() => {
-                        this.message = '';
-                    }, 3000);
-                }
-            }
-        });
-
-        app.mount('#app');
-    </script>
+    <script type="module" src="web-ui/app.js"></script>
 </body>
 </html>