codexmate 0.0.8 → 0.0.10

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');
 
@@ -168,25 +168,113 @@
            ============================================ */
         .container {
             width: 100%;
-            max-width: 1200px;
+            max-width: 1280px;
             margin: 0 auto;
-            padding: var(--spacing-md) var(--spacing-sm) var(--spacing-lg);
+            padding: 16px 12px 28px;
             position: relative;
             z-index: 1;
         }
 
         /* ============================================
-           布局：单列居中
+           布局：双列（侧栏 + 主区）
            ============================================ */
         .app-shell {
             display: grid;
-            grid-template-columns: 1fr;
+            grid-template-columns: 320px minmax(0, 1fr);
             gap: var(--spacing-md);
             align-items: flex-start;
         }
 
-        .side-nav {
-            display: none;
+        .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 {
@@ -245,6 +333,40 @@
             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);
@@ -253,6 +375,9 @@
             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 {
@@ -363,14 +488,14 @@
             border: 1px solid rgba(255, 255, 255, 0.7);
             border-radius: var(--radius-lg);
             box-shadow: var(--shadow-card);
-            padding: var(--spacing-md);
+            padding: 0;
         }
 
         .mode-content {
             border-radius: var(--radius-lg);
             background: rgba(255, 255, 255, 0.85);
             box-shadow: var(--shadow-subtle);
-            padding: var(--spacing-sm);
+            padding: 10px;
         }
 
         /* ============================================
@@ -462,7 +587,7 @@
         .card {
             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;
@@ -515,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 {
@@ -597,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);
@@ -614,23 +739,24 @@
         }
 
         .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 {
@@ -639,8 +765,8 @@
         }
 
         .card-action-btn svg {
-            width: 16px;
-            height: 16px;
+            width: 18px;
+            height: 18px;
         }
 
         /* ============================================
@@ -1094,11 +1220,16 @@
         }
 
         .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;
@@ -1209,14 +1340,14 @@
             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);
@@ -1289,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 {
@@ -1318,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);
         }
@@ -1328,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;
@@ -1409,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 {
@@ -1506,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;
@@ -1618,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;
@@ -1647,6 +1809,9 @@
                 min-height: 360px;
                 max-height: none;
                 height: auto;
+                position: relative;
+                transform: none;
+                box-shadow: var(--shadow-card);
             }
 
             .session-preview-header {
@@ -1657,6 +1822,10 @@
             .session-actions {
                 justify-content: flex-start;
             }
+
+            .session-preview.active {
+                box-shadow: var(--shadow-float);
+            }
         }
 
         @media (max-width: 520px) {
@@ -2350,15 +2519,30 @@
 
         @media (max-width: 960px) {
             .container {
-                padding: var(--spacing-sm);
+                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) {
@@ -2366,6 +2550,10 @@
                 font-size: 40px;
             }
 
+            .hero-title {
+                font-size: 32px;
+            }
+
             .subtitle {
                 font-size: var(--font-size-secondary);
                 margin-bottom: 16px;
@@ -2375,6 +2563,15 @@
                 flex-direction: column;
                 gap: 6px;
             }
+
+            .status-strip {
+                flex-direction: row;
+                flex-wrap: wrap;
+            }
+
+            .status-chip {
+                flex: 1 1 100%;
+            }
         }
 
         @media (max-width: 540px) {
@@ -2385,7 +2582,7 @@
                 padding: 0 var(--spacing-sm) var(--spacing-md);
             }
             .hero-title {
-                font-size: 36px;
+                font-size: 32px;
             }
             .hero-subtitle {
                 font-size: var(--font-size-secondary);
@@ -2404,6 +2601,125 @@
                 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>
@@ -2418,22 +2734,124 @@
             </div>
         </div>
 
-        <div v-if="!sessionStandalone" class="top-tabs">
+        <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="['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">
@@ -2447,6 +2865,49 @@
                     </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 配置
@@ -2462,7 +2923,12 @@
                 <!-- 内容包裹器 - 稳定布局 -->
                 <div class="content-wrapper">
                     <!-- Codex 配置模式 -->
-                    <div v-show="mainTab === 'config' && configMode === 'codex'" class="mode-content mode-cards">
+                    <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">
@@ -2597,8 +3063,13 @@
                 </div>
             </div>
 
-            <!-- Claude Code 配置模式 -->
-            <div v-show="mainTab === 'config' && configMode === 'claude'" class="mode-content mode-cards">
+                <!-- 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">
@@ -2688,8 +3159,13 @@
                 </div>
             </div>
 
-            <!-- OpenClaw 配置模式 -->
-            <div v-show="mainTab === 'config' && configMode === 'openclaw'" class="mode-content mode-cards">
+                <!-- 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"/>
@@ -2762,8 +3238,13 @@
                 </div>
             </div>
 
-            <!-- 会话浏览模式 -->
-            <div v-show="mainTab === 'sessions'" class="mode-content">
+                <!-- 会话浏览模式 -->
+                <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">
                         加载中...
@@ -2788,10 +3269,9 @@
                     <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"
@@ -2865,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>
@@ -2903,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">
@@ -3492,2926 +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 {
-                    mainTab: 'config',
-                    configMode: 'codex',
-                    currentProvider: '',
-                    currentModel: '',
-                    serviceTier: 'fast',
-                    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',
-                    sessionResumeWithYolo: true,
-                    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: {},
-                    claudeSpeedResults: {},
-                    claudeSpeedLoading: {},
-                    claudeShareLoading: {},
-                    providerShareLoading: {},
-                    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: [],
-                    healthCheckLoading: false,
-                    healthCheckResult: null,
-                    healthCheckRemote: false
-                }
-            },
-            mounted() {
-                this.initSessionStandalone();
-                const savedSessionYolo = localStorage.getItem('codexmateSessionResumeYolo');
-                if (savedSessionYolo === '0' || savedSessionYolo === 'false') {
-                    this.sessionResumeWithYolo = false;
-                } else if (savedSessionYolo === '1' || savedSessionYolo === 'true') {
-                    this.sessionResumeWithYolo = true;
-                }
-                const savedConfigs = localStorage.getItem('claudeConfigs');
-                if (savedConfigs) {
-                    try {
-                        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));
-                    } catch (e) {
-                        console.error('加载 Claude 配置失败:', e);
-                    }
-                }
-                void this.refreshClaudeSelectionFromSettings({ silent: true });
-                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 支持关键词检索';
-                },
-                claudeModelHasList() {
-                    return Array.isArray(this.claudeModels) && this.claudeModels.length > 0;
-                },
-                claudeModelOptions() {
-                    const list = Array.isArray(this.claudeModels) ? [...this.claudeModels] : [];
-                    const current = (this.currentClaudeModel || '').trim();
-                    if (current && !list.includes(current)) {
-                        list.unshift(current);
-                    }
-                    return list;
-                }
-            },
-            methods: {
-                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;
-                            {
-                                const tier = typeof statusRes.serviceTier === 'string'
-                                    ? statusRes.serviceTier.trim().toLowerCase()
-                                    : '';
-                                this.serviceTier = tier === 'fast' ? 'fast' : (tier ? 'standard' : 'fast');
-                            }
-                            this.providersList = listRes.providers;
-                            await this.loadModelsForProvider(this.currentProvider);
-                            if (statusRes.configReady === false) {
-                                this.showMessage(statusRes.configNotice || '未检测到 config.toml，已加载默认模板。请在模板编辑器确认后创建。', 'info');
-                            }
-                            if (statusRes.initNotice) {
-                                this.showMessage(statusRes.initNotice, 'info');
-                            }
-                            this.maybeShowStarPrompt();
-                        }
-                    } 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;
-                },
-
-                normalizeClaudeValue(value) {
-                    return typeof value === 'string' ? value.trim() : '';
-                },
-
-                normalizeClaudeConfig(config) {
-                    const safe = config && typeof config === 'object' ? config : {};
-                    return {
-                        apiKey: this.normalizeClaudeValue(safe.apiKey),
-                        baseUrl: this.normalizeClaudeValue(safe.baseUrl),
-                        model: this.normalizeClaudeValue(safe.model)
-                    };
-                },
-
-                normalizeClaudeSettingsEnv(env) {
-                    const safe = env && typeof env === 'object' ? env : {};
-                    return {
-                        apiKey: this.normalizeClaudeValue(safe.ANTHROPIC_API_KEY),
-                        baseUrl: this.normalizeClaudeValue(safe.ANTHROPIC_BASE_URL),
-                        model: this.normalizeClaudeValue(safe.ANTHROPIC_MODEL)
-                    };
-                },
-
-                matchClaudeConfigFromSettings(env) {
-                    const normalizedSettings = this.normalizeClaudeSettingsEnv(env);
-                    if (!normalizedSettings.apiKey || !normalizedSettings.baseUrl || !normalizedSettings.model) {
-                        return '';
-                    }
-                    const entries = Object.entries(this.claudeConfigs || {});
-                    for (const [name, config] of entries) {
-                        const normalizedConfig = this.normalizeClaudeConfig(config);
-                        if (!normalizedConfig.apiKey || !normalizedConfig.baseUrl || !normalizedConfig.model) {
-                            continue;
-                        }
-                        if (normalizedConfig.apiKey === normalizedSettings.apiKey
-                            && normalizedConfig.baseUrl === normalizedSettings.baseUrl
-                            && normalizedConfig.model === normalizedSettings.model) {
-                            return name;
-                        }
-                    }
-                    return '';
-                },
-
-                findDuplicateClaudeConfigName(config) {
-                    const normalized = this.normalizeClaudeConfig(config);
-                    if (!normalized.apiKey || !normalized.baseUrl || !normalized.model) {
-                        return '';
-                    }
-                    const entries = Object.entries(this.claudeConfigs || {});
-                    for (const [name, existing] of entries) {
-                        const normalizedExisting = this.normalizeClaudeConfig(existing);
-                        if (!normalizedExisting.apiKey || !normalizedExisting.baseUrl || !normalizedExisting.model) {
-                            continue;
-                        }
-                        if (normalizedExisting.apiKey === normalized.apiKey
-                            && normalizedExisting.baseUrl === normalized.baseUrl
-                            && normalizedExisting.model === normalized.model) {
-                            return name;
-                        }
-                    }
-                    return '';
-                },
-
-                async refreshClaudeSelectionFromSettings(options = {}) {
-                    const configNames = Object.keys(this.claudeConfigs || {});
-                    if (configNames.length === 0) {
-                        this.currentClaudeConfig = '';
-                        this.currentClaudeModel = '';
-                        this.resetClaudeModelsState();
-                        return;
-                    }
-                    const silent = !!options.silent;
-                    try {
-                        const res = await api('get-claude-settings');
-                        if (res && res.error) {
-                            if (!silent) {
-                                this.showMessage('读取 Claude 配置失败: ' + res.error, 'error');
-                            }
-                            return;
-                        }
-                        const matchName = this.matchClaudeConfigFromSettings((res && res.env) || {});
-                        if (matchName) {
-                            if (this.currentClaudeConfig !== matchName) {
-                                this.currentClaudeConfig = matchName;
-                            }
-                            this.refreshClaudeModelContext();
-                            return;
-                        }
-                        this.currentClaudeConfig = '';
-                        this.currentClaudeModel = '';
-                        this.resetClaudeModelsState();
-                        if (!silent) {
-                            const tip = res && res.exists
-                                ? '当前 Claude settings.json 与本地配置不匹配，已取消选中'
-                                : '未检测到 Claude settings.json，已取消选中';
-                            this.showMessage(tip, 'info');
-                        }
-                    } catch (e) {
-                        if (!silent) {
-                            this.showMessage('读取 Claude 配置失败: ' + e.message, 'error');
-                        }
-                    }
-                },
-
-                syncClaudeModelFromConfig() {
-                    const config = this.getCurrentClaudeConfig();
-                    this.currentClaudeModel = config && config.model ? config.model : '';
-                },
-
-                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();
-                    if (!config) {
-                        this.resetClaudeModelsState();
-                        return;
-                    }
-                    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.mainTab = 'config';
-                    this.configMode = mode;
-                    if (mode === 'claude') {
-                        this.refreshClaudeModelContext();
-                    }
-                },
-
-                switchMainTab(tab) {
-                    this.mainTab = tab;
-                    if (tab === 'sessions' && this.sessionsList.length === 0) {
-                        this.loadSessions();
-                    }
-                    if (tab === 'config' && this.configMode === 'claude') {
-                        this.refreshClaudeModelContext();
-                    }
-                },
-
-                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.mainTab = '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() : '';
-                    const arg = this.quoteResumeArg(sessionId);
-                    if (this.sessionResumeWithYolo) {
-                        return `codex --yolo resume ${arg}`;
-                    }
-                    return `codex resume ${arg}`;
-                },
-
-                quoteShellArg(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}'`;
-                },
-
-                quoteResumeArg(value) {
-                    return this.quoteShellArg(value);
-                },
-
-                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');
-                },
-
-                buildProviderShareCommand(payload) {
-                    if (!payload || typeof payload !== 'object') return '';
-                    const name = typeof payload.name === 'string' ? payload.name.trim() : '';
-                    const baseUrl = typeof payload.baseUrl === 'string' ? payload.baseUrl.trim() : '';
-                    const apiKey = typeof payload.apiKey === 'string' ? payload.apiKey : '';
-                    if (!name || !baseUrl) return '';
-
-                    const nameArg = this.quoteShellArg(name);
-                    const urlArg = this.quoteShellArg(baseUrl);
-                    const keyArg = apiKey ? this.quoteShellArg(apiKey) : '';
-                    const switchCmd = `codexmate switch ${nameArg}`;
-                    const addCmd = apiKey
-                        ? `codexmate add ${nameArg} ${urlArg} ${keyArg}`
-                        : `codexmate add ${nameArg} ${urlArg}`;
-                    return `${addCmd} && ${switchCmd}`;
-                },
-
-                buildClaudeShareCommand(payload) {
-                    if (!payload || typeof payload !== 'object') return '';
-                    const baseUrl = typeof payload.baseUrl === 'string' ? payload.baseUrl.trim() : '';
-                    const apiKey = typeof payload.apiKey === 'string' ? payload.apiKey : '';
-                    const model = typeof payload.model === 'string' && payload.model.trim()
-                        ? payload.model.trim()
-                        : 'glm-4.7';
-                    if (!baseUrl || !apiKey) return '';
-                    const urlArg = this.quoteShellArg(baseUrl);
-                    const keyArg = this.quoteShellArg(apiKey);
-                    const modelArg = this.quoteShellArg(model);
-                    return `codexmate claude ${urlArg} ${keyArg} ${modelArg}`;
-                },
-
-                async copyProviderShareCommand(provider) {
-                    const name = provider && typeof provider.name === 'string' ? provider.name.trim() : '';
-                    if (!name) {
-                        this.showMessage('提供商名称无效', 'error');
-                        return;
-                    }
-                    if (this.providerShareLoading[name]) {
-                        return;
-                    }
-                    this.providerShareLoading[name] = true;
-                    try {
-                        const res = await api('export-provider', { name });
-                        if (res && res.error) {
-                            this.showMessage(res.error, 'error');
-                            return;
-                        }
-                        const command = this.buildProviderShareCommand(res && res.payload ? res.payload : null);
-                        if (!command) {
-                            this.showMessage('分享命令生成失败', 'error');
-                            return;
-                        }
-                        const ok = this.fallbackCopyText(command);
-                        if (ok) {
-                            this.showMessage('已复制分享命令', 'success');
-                            return;
-                        }
-                        try {
-                            if (navigator.clipboard && window.isSecureContext) {
-                                await navigator.clipboard.writeText(command);
-                                this.showMessage('已复制分享命令', 'success');
-                                return;
-                            }
-                        } catch (e) {
-                            // keep fallback failure message
-                        }
-                        this.showMessage('复制失败，请手动复制命令', 'error');
-                    } catch (e) {
-                        this.showMessage('生成分享命令失败: ' + e.message, 'error');
-                    } finally {
-                        this.providerShareLoading[name] = false;
-                    }
-                },
-
-                async copyClaudeShareCommand(name) {
-                    const config = this.claudeConfigs[name];
-                    if (!config) {
-                        this.showMessage('配置不存在', 'error');
-                        return;
-                    }
-                    if (this.claudeShareLoading[name]) return;
-                    this.claudeShareLoading[name] = true;
-                    try {
-                        const res = await api('export-claude-share', { config });
-                        if (res && res.error) {
-                            this.showMessage(res.error, 'error');
-                            return;
-                        }
-                        const command = this.buildClaudeShareCommand(res && res.payload ? res.payload : null);
-                        if (!command) {
-                            this.showMessage('分享命令生成失败', 'error');
-                            return;
-                        }
-                        const ok = this.fallbackCopyText(command);
-                        if (ok) {
-                            this.showMessage('已复制分享命令', 'success');
-                            return;
-                        }
-                        try {
-                            if (navigator.clipboard && window.isSecureContext) {
-                                await navigator.clipboard.writeText(command);
-                                this.showMessage('已复制分享命令', 'success');
-                                return;
-                            }
-                        } catch (e) {
-                            // fall through
-                        }
-                        this.showMessage('复制失败，请手动复制命令', 'error');
-                    } catch (e) {
-                        this.showMessage('生成分享命令失败: ' + e.message, 'error');
-                    } finally {
-                        this.claudeShareLoading[name] = false;
-                    }
-                },
-
-                async cloneSession(session) {
-                    if (!this.isCloneAvailable(session)) {
-                        this.showMessage('当前会话不支持克隆', 'error');
-                        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;
-                        }
-                    }
-                },
-
-                onSessionResumeYoloChange() {
-                    const value = this.sessionResumeWithYolo ? '1' : '0';
-                    localStorage.setItem('codexmateSessionResumeYolo', value);
-                },
-
-                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 onServiceTierChange() {
-                    await this.openConfigTemplateEditor();
-                },
-
-                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 {
-                        if (this.configMode === 'claude') {
-                            try {
-                                const entries = Object.entries(this.claudeConfigs || {});
-                                await Promise.all(entries.map(([name, config]) => this.runClaudeSpeedTest(name, config)));
-                            } catch (e) {}
-                        }
-                        this.healthCheckLoading = false;
-                    }
-                },
-
-                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,
-                            serviceTier: this.serviceTier
-                        });
-                        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');
-                    }
-                    const duplicateName = this.findDuplicateClaudeConfigName(this.newClaudeConfig);
-                    if (duplicateName) {
-                        return this.showMessage('已存在相同配置，已忽略添加', 'info');
-                    }
-
-                    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;
-                    }
-                },
-
-                async runClaudeSpeedTest(name, config) {
-                    if (!name || this.claudeSpeedLoading[name]) return null;
-                    const baseUrl = config && typeof config.baseUrl === 'string' ? config.baseUrl.trim() : '';
-                    this.claudeSpeedLoading[name] = true;
-                    try {
-                        if (!baseUrl) {
-                            const res = { ok: false, error: 'Missing base URL' };
-                            this.claudeSpeedResults[name] = res;
-                            return res;
-                        }
-                        const res = await api('speed-test', { url: baseUrl });
-                        if (res.error) {
-                            this.claudeSpeedResults[name] = { ok: false, error: res.error };
-                            return { ok: false, error: res.error };
-                        }
-                        this.claudeSpeedResults[name] = res;
-                        return res;
-                    } catch (e) {
-                        const message = e && e.message ? e.message : 'Speed test failed';
-                        const res = { ok: false, error: message };
-                        this.claudeSpeedResults[name] = res;
-                        return res;
-                    } finally {
-                        this.claudeSpeedLoading[name] = false;
-                    }
-                },
-
-                showMessage(text, type) {
-                    this.message = text;
-                    this.messageType = type || 'info';
-                    setTimeout(() => {
-                        this.message = '';
-                    }, 3000);
-                }
-            }
-        });
-
-        app.mount('#app');
-    </script>
+    <script type="module" src="web-ui/app.js"></script>
 </body>
 </html>