npm - codexmate - Versions diffs - 0.0.10 → 0.0.12 - Mend

codexmate 0.0.10 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

package/README.md +29 -11
package/README.zh-CN.md +29 -11
package/package.json +53 -36
package/res/logo.png +0 -0
package/{cli.js → src/cli.js} +822 -327
package/src/lib/cli-file-utils.js +151 -0
package/src/lib/cli-models-utils.js +152 -0
package/src/lib/cli-network-utils.js +148 -0
package/src/lib/cli-session-utils.js +121 -0
package/src/lib/cli-utils.js +139 -0
package/src/res/json5.min.js +1 -0
package/src/res/logo.png +0 -0
package/src/res/screenshot.png +0 -0
package/src/res/vue.global.js +18552 -0
package/src/web-ui/app.js +2970 -0
package/src/web-ui/index.html +1310 -0
package/src/web-ui/logic.mjs +157 -0
package/src/web-ui/styles.css +2868 -0
package/src/web-ui.html +17 -0
package/web-ui/app.js +273 -144
package/web-ui/index.html +1310 -0
package/web-ui/logic.mjs +21 -21
package/web-ui/styles.css +2868 -0
package/.github/ISSUE_TEMPLATE/bug_report.md +0 -27
package/.github/ISSUE_TEMPLATE/feature_request.md +0 -17
package/.github/workflows/ci.yml +0 -26
package/.github/workflows/release.yml +0 -159
package/.planning/.fix-attempts +0 -1
package/.planning/.lock +0 -6
package/.planning/.verify-cache.json +0 -14
package/.planning/CHECKPOINT.json +0 -46
package/.planning/DESIGN.md +0 -26
package/.planning/HISTORY.json +0 -124
package/.planning/PLAN.md +0 -69
package/.planning/REVIEW.md +0 -41
package/.planning/STATE.md +0 -12
package/.planning/STATS.json +0 -13
package/.planning/VERIFICATION.md +0 -70
package/.planning/daude-code-plan.md +0 -51
package/.planning/research/architecture.md +0 -32
package/.planning/research/conventions.md +0 -36
package/.planning/task_1-REVIEW.md +0 -29
package/.planning/task_1-SUMMARY.md +0 -32
package/.planning/task_2-REVIEW.md +0 -24
package/.planning/task_2-SUMMARY.md +0 -37
package/.planning/task_3-REVIEW.md +0 -25
package/.planning/task_3-SUMMARY.md +0 -31
package/cmd/publish-npm.cmd +0 -65
package/tests/e2e/helpers.js +0 -214
package/tests/e2e/recent-health.e2e.js +0 -142
package/tests/e2e/run.js +0 -154
package/tests/e2e/test-claude.js +0 -21
package/tests/e2e/test-config.js +0 -124
package/tests/e2e/test-health-speed.js +0 -79
package/tests/e2e/test-openclaw.js +0 -47
package/tests/e2e/test-session-search.js +0 -114
package/tests/e2e/test-sessions.js +0 -69
package/tests/e2e/test-setup.js +0 -159
package/tests/unit/run.mjs +0 -29
package/tests/unit/web-ui-logic.test.mjs +0 -186
package/web-ui.html +0 -3977
/package/{CHANGELOG.md → doc/CHANGELOG.md} +0 -0
/package/{CHANGELOG.zh-CN.md → doc/CHANGELOG.zh-CN.md} +0 -0

package/web-ui.html DELETED Viewed

@@ -1,3977 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Codex Mate</title>
-    <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');
-        /* ============================================
-           设计系统 - Design Tokens
-           ============================================ */
-        :root {
-            /* 色彩系统：去除杂纹，强调干净留白与温柔橙红 */
-            --color-brand: #D0583A;
-            --color-brand-dark: #B8442B;
-            --color-brand-light: rgba(208, 88, 58, 0.14);
-            --color-brand-subtle: rgba(201, 94, 75, 0.2);
-            --color-bg: #F6EFE6;
-            --color-surface: #FFFDF9;
-            --color-surface-alt: #FFF7F0;
-            --color-surface-elevated: #FFFFFF;
-            --color-surface-tint: rgba(255, 255, 255, 0.78);
-            --color-text-primary: #1B1714;
-            --color-text-secondary: #4B4038;
-            --color-text-tertiary: #7A6A5D;
-            --color-text-muted: #6C5B50;
-            --color-border: #D8C9B8;
-            --color-border-soft: rgba(216, 201, 184, 0.45);
-            --color-border-strong: rgba(216, 201, 184, 0.8);
-            --color-success: #4B8B6A;
-            --color-error: #C44536;
-            --bg-warm-gradient:
-                radial-gradient(circle at 16% 10%, rgba(201, 94, 75, 0.18), transparent 45%),
-                radial-gradient(circle at 90% 6%, rgba(255, 255, 255, 0.85), transparent 40%),
-                linear-gradient(135deg, #F6EFE6 0%, #EFE1D4 45%, #F6EFE6 100%);
-            /* 字体系统 */
-            --font-family-body: 'Source Sans 3', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
-            --font-family-display: 'Space Grotesk', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
-            --font-family-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
-            --font-family: var(--font-family-body);
-            --font-size-display: 52px;
-            --font-size-title: 18px;
-            --font-size-body: 15px;
-            --font-size-secondary: 13px;
-            --font-size-caption: 11px;
-            --font-weight-display: 600;
-            --font-weight-title: 600;
-            --font-weight-body: 400;
-            --font-weight-secondary: 500;
-            --font-weight-caption: 500;
-            --line-height-tight: 1.12;
-            --line-height-normal: 1.5;
-            /* 间距系统 */
-            --spacing-xs: 8px;
-            --spacing-sm: 16px;
-            --spacing-md: 24px;
-            --spacing-lg: 40px;
-            --spacing-xl: 64px;
-            /* 圆角系统 */
-            --radius-sm: 8px;
-            --radius-lg: 12px;
-            --radius-xl: 18px;
-            --radius-full: 50px;
-            /* 阴影系统 - 多层叠加提升真实感 */
-            --shadow-subtle:
-                0 1px 2px rgba(31, 26, 23, 0.04),
-                0 1px 3px rgba(31, 26, 23, 0.02);
-            --shadow-card:
-                0 1px 3px rgba(31, 26, 23, 0.04),
-                0 4px 12px rgba(31, 26, 23, 0.03);
-            --shadow-card-hover:
-                0 2px 4px rgba(31, 26, 23, 0.04),
-                0 8px 20px rgba(31, 26, 23, 0.06);
-            --shadow-float:
-                0 6px 16px rgba(31, 26, 23, 0.08),
-                0 18px 36px rgba(31, 26, 23, 0.06);
-            --shadow-raised:
-                0 4px 12px rgba(31, 26, 23, 0.06),
-                0 12px 32px rgba(31, 26, 23, 0.04);
-            --shadow-modal:
-                0 8px 24px rgba(31, 26, 23, 0.08),
-                0 24px 64px rgba(31, 26, 23, 0.06);
-            --shadow-input-focus:
-                0 0 0 3px var(--color-brand-light),
-                0 1px 3px rgba(31, 26, 23, 0.04);
-            /* 动画 - 更细腻的曲线 */
-            --transition-instant: 100ms;
-            --transition-fast: 150ms;
-            --transition-normal: 250ms;
-            --transition-slow: 350ms;
-            --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
-            --ease-spring-soft: cubic-bezier(0.25, 1, 0.5, 1);
-            --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
-            --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
-        }
-        /* ============================================
-           基础重置
-           ============================================ */
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: var(--font-family-body);
-            background-color: var(--color-bg);
-            background: var(--bg-warm-gradient);
-            color: var(--color-text-primary);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-            padding: var(--spacing-lg) var(--spacing-md);
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-            position: relative;
-            overflow-x: hidden;
-        }
-        /* ============================================
-           容器
-           ============================================ */
-        body::before {
-            content: "";
-            position: fixed;
-            inset: 0;
-            background-image:
-                radial-gradient(circle at 12% 18%, rgba(201, 94, 75, 0.1), transparent 38%),
-                repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0 1px, transparent 1px 120px),
-                repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px 120px);
-            opacity: 0.45;
-            pointer-events: none;
-            z-index: 0;
-        }
-        /* 背景网格 */
-        body::after {
-            content: "";
-            position: fixed;
-            inset: 0;
-            background-image:
-                linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
-                linear-gradient(0deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
-            background-size: 120px 120px;
-            opacity: 0.5;
-            pointer-events: none;
-            z-index: 0;
-        }
-        /* ============================================
-           容器
-           ============================================ */
-        .container {
-            width: 100%;
-            max-width: 1280px;
-            margin: 0 auto;
-            padding: 16px 12px 28px;
-            position: relative;
-            z-index: 1;
-        }
-        /* ============================================
-           布局：双列（侧栏 + 主区）
-           ============================================ */
-        .app-shell {
-            display: grid;
-            grid-template-columns: 320px minmax(0, 1fr);
-            gap: var(--spacing-md);
-            align-items: flex-start;
-        }
-        .app-shell.standalone {
-            grid-template-columns: 1fr;
-        }
-        .side-rail {
-            position: sticky;
-            top: var(--spacing-md);
-            align-self: start;
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-sm);
-            padding: var(--spacing-md) var(--spacing-sm);
-            background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 250, 245, 0.9) 100%);
-            border: 1px solid rgba(216, 201, 184, 0.65);
-            border-radius: var(--radius-xl);
-            box-shadow: var(--shadow-card);
-            min-height: 420px;
-        }
-        .side-rail .brand-title {
-            font-size: 24px;
-            margin-bottom: 2px;
-        }
-        .side-section {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-        }
-        .side-section-title {
-            font-size: var(--font-size-secondary);
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-tertiary);
-            letter-spacing: 0.01em;
-            padding: 0 var(--spacing-xs);
-        }
-        .side-item {
-            width: 100%;
-            text-align: left;
-            padding: 12px var(--spacing-sm);
-            border-radius: var(--radius-lg);
-            border: 1px solid var(--color-border-soft);
-            background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 247, 240, 0.95) 100%);
-            color: var(--color-text-secondary);
-            cursor: pointer;
-            transition: all var(--transition-normal) var(--ease-spring);
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-            box-shadow: var(--shadow-subtle);
-        }
-        .side-item:hover {
-            border-color: var(--color-brand);
-            color: var(--color-text-primary);
-            transform: translateY(-1px);
-            box-shadow: var(--shadow-card-hover);
-        }
-        .side-item.active {
-            border-color: var(--color-brand);
-            background: linear-gradient(135deg, rgba(201, 94, 75, 0.14), rgba(255, 255, 255, 0.96));
-            color: var(--color-text-primary);
-            box-shadow: var(--shadow-float);
-        }
-        .side-item-title {
-            font-size: var(--font-size-body);
-            font-weight: var(--font-weight-secondary);
-            letter-spacing: -0.01em;
-        }
-        .side-item-meta {
-            font-size: var(--font-size-caption);
-            color: var(--color-text-tertiary);
-            display: flex;
-            gap: 8px;
-            flex-wrap: wrap;
-        }
-        .side-item-meta > span {
-            min-width: 0;
-            overflow-wrap: anywhere;
-            word-break: break-word;
-        }
-        .top-tabs {
-            display: none !important;
-        }
-        .brand-block {
-            margin-bottom: var(--spacing-md);
-        }
-        .brand-title {
-            font-size: 30px;
-            line-height: 1.05;
-            font-family: var(--font-family-display);
-            color: var(--color-text-primary);
-            letter-spacing: -0.02em;
-        }
-        .brand-title .accent {
-            color: var(--color-brand);
-        }
-        .brand-subtitle {
-            margin-top: 8px;
-            font-size: var(--font-size-secondary);
-            color: var(--color-text-tertiary);
-            line-height: 1.45;
-        }
-        .main-tabs {
-            display: flex;
-            gap: 10px;
-        }
-        .main-tab-btn {
-            flex: 1;
-            text-align: center;
-            border: 1px solid rgba(216, 201, 184, 0.55);
-            background: rgba(255, 255, 255, 0.95);
-            border-radius: var(--radius-lg);
-            padding: 12px 14px;
-            cursor: pointer;
-            color: var(--color-text-secondary);
-            font-size: var(--font-size-body);
-            font-weight: var(--font-weight-secondary);
-            box-shadow: var(--shadow-subtle);
-            transition: all var(--transition-normal) var(--ease-spring);
-        }
-        .main-tab-btn:hover {
-            border-color: var(--color-brand);
-            color: var(--color-text-primary);
-            transform: translateY(-1px);
-        }
-        .main-tab-btn.active {
-            border-color: var(--color-brand);
-            box-shadow: 0 10px 24px rgba(27, 23, 20, 0.08);
-            color: var(--color-text-primary);
-            background: linear-gradient(135deg, rgba(201, 94, 75, 0.12), rgba(255, 255, 255, 0.95));
-        }
-        .status-strip {
-            display: flex;
-            flex-wrap: wrap;
-            gap: var(--spacing-xs);
-            margin-bottom: var(--spacing-sm);
-            margin-top: 6px;
-        }
-        .status-chip {
-            min-width: 200px;
-            padding: 10px 12px;
-            border-radius: var(--radius-lg);
-            border: 1px solid var(--color-border-soft);
-            background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 247, 240, 0.96) 100%);
-            box-shadow: var(--shadow-subtle);
-        }
-        .status-chip .label {
-            display: block;
-            font-size: var(--font-size-caption);
-            color: var(--color-text-tertiary);
-            margin-bottom: 4px;
-        }
-        .status-chip .value {
-            font-size: var(--font-size-body);
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-primary);
-            letter-spacing: -0.01em;
-            white-space: normal;
-            overflow-wrap: anywhere;
-            word-break: break-word;
-        }
-        .main-panel {
-            min-width: 0;
-            background: rgba(255, 255, 255, 0.9);
-            border: 1px solid rgba(255, 255, 255, 0.65);
-            border-radius: 18px;
-            box-shadow: 0 12px 30px rgba(27, 23, 20, 0.08);
-            padding: var(--spacing-md) var(--spacing-lg);
-            backdrop-filter: blur(8px);
-            position: relative;
-            overflow-x: hidden;
-            overflow-y: visible;
-        }
-        .panel-header {
-            margin-bottom: 12px;
-            text-align: left;
-        }
-        .hero {
-            margin-bottom: var(--spacing-sm);
-        }
-        .hero-title {
-            font-size: 48px;
-            line-height: 1.05;
-            font-family: var(--font-family-display);
-            color: var(--color-text-primary);
-            letter-spacing: -0.02em;
-        }
-        .hero-title .accent {
-            color: var(--color-brand);
-        }
-        .hero-subtitle {
-            margin-top: 8px;
-            font-size: var(--font-size-body);
-            color: var(--color-text-tertiary);
-            line-height: 1.5;
-        }
-        .top-tabs {
-            margin: 14px 0 18px;
-            background: rgba(255, 255, 255, 0.92);
-            border: 1px solid rgba(255, 255, 255, 0.7);
-            border-radius: 14px;
-            padding: 6px;
-            box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.06);
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 8px;
-            backdrop-filter: blur(6px);
-        }
-        .top-tab {
-            border: 1px solid rgba(216, 201, 184, 0.55);
-            border-radius: 12px;
-            background: rgba(255, 255, 255, 0.96);
-            padding: 11px 10px;
-            font-size: var(--font-size-body);
-            color: var(--color-text-secondary);
-            text-align: center;
-            cursor: pointer;
-            transition: all var(--transition-normal) var(--ease-spring);
-            box-shadow: var(--shadow-subtle);
-        }
-        .top-tab:hover {
-            border-color: var(--color-brand);
-            color: var(--color-text-primary);
-            transform: translateY(-1px);
-        }
-        .top-tab.active {
-            border-color: var(--color-brand);
-            color: var(--color-text-primary);
-            background: linear-gradient(135deg, rgba(201, 94, 75, 0.12), rgba(255, 255, 255, 0.95));
-            box-shadow: 0 10px 24px rgba(27, 23, 20, 0.08);
-        }
-        .config-subtabs {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 16px;
-            padding: 6px;
-            background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.7));
-            border-radius: var(--radius-lg);
-            border: 1px solid rgba(255, 255, 255, 0.7);
-            box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.05);
-        }
-        .config-subtab {
-            border: 1px solid var(--color-border-soft);
-            border-radius: var(--radius-lg);
-            padding: 10px 14px;
-            background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 245, 0.9));
-            color: var(--color-text-secondary);
-            cursor: pointer;
-            font-size: var(--font-size-body);
-            font-weight: var(--font-weight-secondary);
-            transition: all var(--transition-normal) var(--ease-spring);
-            box-shadow: var(--shadow-subtle);
-        }
-        .config-subtab:hover {
-            border-color: var(--color-border-strong);
-            color: var(--color-text-primary);
-        }
-        .config-subtab.active {
-            border-color: var(--color-brand);
-            color: var(--color-text-primary);
-            background: linear-gradient(135deg, rgba(201, 94, 75, 0.18), rgba(255, 255, 255, 0.95));
-            box-shadow: var(--shadow-card);
-        }
-        .content-wrapper {
-            background: rgba(255, 255, 255, 0.9);
-            border: 1px solid rgba(255, 255, 255, 0.7);
-            border-radius: var(--radius-lg);
-            box-shadow: var(--shadow-card);
-            padding: 0;
-        }
-        .mode-content {
-            border-radius: var(--radius-lg);
-            background: rgba(255, 255, 255, 0.85);
-            box-shadow: var(--shadow-subtle);
-            padding: 10px;
-        }
-        /* ============================================
-           主标题
-           ============================================ */
-        .main-title {
-            font-size: var(--font-size-display);
-            font-weight: var(--font-weight-display);
-            line-height: var(--line-height-tight);
-            letter-spacing: -0.03em;
-            margin-bottom: 10px;
-            color: var(--color-text-primary);
-            font-family: var(--font-family-display);
-            background: linear-gradient(135deg, var(--color-text-primary) 0%, rgba(27, 23, 20, 0.78) 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .main-title .accent {
-            color: var(--color-brand);
-            -webkit-text-fill-color: var(--color-brand);
-            position: relative;
-        }
-        .subtitle {
-            font-size: var(--font-size-body);
-            color: var(--color-text-tertiary);
-            line-height: var(--line-height-normal);
-            margin-bottom: 20px;
-            max-width: 640px;
-            letter-spacing: 0.01em;
-        }
-        /* ============================================
-           模式切换器 - Segmented Control
-           ============================================ */
-        .segmented-control {
-            display: flex;
-            background: rgba(255, 255, 255, 0.92);
-            border-radius: var(--radius-xl);
-            padding: 6px;
-            margin-bottom: 20px;
-            position: relative;
-            box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.06);
-            border: 1px solid rgba(255, 255, 255, 0.7);
-            backdrop-filter: blur(6px);
-        }
-        .segment {
-            flex: 1;
-            padding: 11px 16px;
-            border: none;
-            background: transparent;
-            font-size: var(--font-size-body);
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-secondary);
-            cursor: pointer;
-            border-radius: 10px;
-            transition: all var(--transition-normal) var(--ease-spring);
-            position: relative;
-            z-index: 2;
-            letter-spacing: 0.01em;
-        }
-        .segment:hover {
-            color: var(--color-text-primary);
-        }
-        .segment.active {
-            color: var(--color-text-primary);
-            background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
-            box-shadow: var(--shadow-subtle), inset 0 1px 0 rgba(255, 255, 255, 0.85);
-        }
-        /* ============================================
-           卡片列表
-           ============================================ */
-        .card-list {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            margin-bottom: 12px;
-        }
-        /* ============================================
-           卡片
-           ============================================ */
-        .card {
-            background: linear-gradient(180deg, #fffdf9 0%, #fff8f2 100%);
-            border-radius: var(--radius-lg);
-            padding: 10px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            cursor: pointer;
-            transition:
-                transform var(--transition-normal) var(--ease-spring),
-                box-shadow var(--transition-normal) var(--ease-spring),
-                background-color var(--transition-fast) var(--ease-smooth);
-            box-shadow: 0 10px 24px rgba(27, 23, 20, 0.08);
-            user-select: none;
-            will-change: transform;
-            border: 1px solid rgba(216, 201, 184, 0.55);
-            position: relative;
-            overflow: hidden;
-        }
-        .card:hover {
-            transform: translateY(-2px) scale(1.005);
-            box-shadow: 0 16px 32px rgba(27, 23, 20, 0.1);
-        }
-        .card::before,
-        .card::after {
-            content: "";
-            position: absolute;
-            pointer-events: none;
-        }
-        .card::before {
-            left: 0;
-            top: 10px;
-            bottom: 10px;
-            width: 3px;
-            border-radius: 999px;
-            background: transparent;
-            transition: background var(--transition-fast) var(--ease-smooth);
-        }
-        .card::after {
-            inset: 0;
-            border-radius: inherit;
-            background: linear-gradient(120deg, rgba(255, 255, 255, 0.7) 0%, transparent 55%);
-            opacity: 0;
-            transition: opacity var(--transition-normal) var(--ease-smooth);
-        }
-        .card:active {
-            transform: translateY(0) scale(0.995);
-            transition: transform var(--transition-instant) var(--ease-smooth);
-        }
-        .card.active {
-            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 {
-            background: linear-gradient(180deg, rgba(201, 94, 75, 0.95) 0%, rgba(201, 94, 75, 0.35) 100%);
-        }
-        .card:hover::after {
-            opacity: 0.6;
-        }
-        .card.active .card-icon {
-            transform: scale(1.05);
-        }
-        .card-leading {
-            display: flex;
-            align-items: center;
-            gap: var(--spacing-sm);
-            flex: 1;
-            min-width: 0;
-        }
-        .card-icon {
-            width: 40px;
-            height: 40px;
-            border-radius: var(--radius-sm);
-            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(247, 241, 232, 0.65) 100%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: var(--font-size-title);
-            font-weight: var(--font-weight-title);
-            color: var(--color-text-secondary);
-            flex-shrink: 0;
-            transition: all var(--transition-normal) var(--ease-spring-soft);
-            box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.7);
-        }
-        .card.active .card-icon {
-            background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
-            color: white;
-            box-shadow: 0 2px 8px rgba(210, 107, 90, 0.3);
-        }
-        .card-content {
-            display: flex;
-            flex-direction: column;
-            gap: 2px;
-            min-width: 0;
-        }
-        .card-title {
-            font-size: var(--font-size-body);
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-primary);
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            letter-spacing: -0.01em;
-        }
-        .card-subtitle {
-            font-size: var(--font-size-secondary);
-            color: var(--color-text-tertiary);
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            opacity: 0.8;
-        }
-        .card-trailing {
-            display: flex;
-            align-items: center;
-            gap: var(--spacing-xs);
-        }
-        /* 卡片操作按钮 - hover 显示 */
-        .card-actions {
-            display: flex;
-            gap: 8px;
-            opacity: 0;
-            transform: translateX(4px);
-            transition: all var(--transition-normal) var(--ease-spring);
-        }
-        .card:hover .card-actions {
-            opacity: 1;
-            transform: translateX(0);
-        }
-        .mode-cards .card-actions {
-            opacity: 1;
-            transform: translateX(0);
-        }
-        .card-action-btn {
-            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, 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 {
-            background: linear-gradient(135deg, rgba(200, 74, 58, 0.1) 0%, rgba(200, 74, 58, 0.05) 100%);
-            color: var(--color-error);
-        }
-        .card-action-btn svg {
-            width: 18px;
-            height: 18px;
-        }
-        /* ============================================
-           状态徽章
-           ============================================ */
-        .pill {
-            padding: 5px 11px;
-            border-radius: var(--radius-full);
-            font-size: var(--font-size-caption);
-            font-weight: var(--font-weight-caption);
-            background-color: rgba(255, 255, 255, 0.8);
-            color: var(--color-text-tertiary);
-            text-transform: uppercase;
-            letter-spacing: 0.06em;
-            transition: all var(--transition-fast) var(--ease-smooth);
-            box-shadow: inset 0 0.5px 1px rgba(0, 0, 0, 0.04);
-        }
-        .pill.configured {
-            background: linear-gradient(135deg, rgba(90, 139, 106, 0.15) 0%, rgba(90, 139, 106, 0.08) 100%);
-            color: var(--color-success);
-            box-shadow: inset 0 0.5px 1px rgba(90, 139, 106, 0.2);
-        }
-        .pill.empty {
-            background: linear-gradient(135deg, rgba(200, 74, 58, 0.1) 0%, rgba(200, 74, 58, 0.05) 100%);
-            color: var(--color-error);
-            box-shadow: inset 0 0.5px 1px rgba(200, 74, 58, 0.15);
-        }
-        .latency {
-            padding: 4px 10px;
-            border-radius: var(--radius-full);
-            font-size: var(--font-size-caption);
-            font-weight: var(--font-weight-caption);
-            background: var(--color-bg);
-            color: var(--color-text-tertiary);
-            letter-spacing: 0.02em;
-        }
-        .latency.ok {
-            color: var(--color-success);
-            background: rgba(90, 139, 106, 0.1);
-        }
-        .latency.error {
-            color: var(--color-error);
-            background: rgba(200, 74, 58, 0.08);
-        }
-        .card-action-btn.loading svg {
-            animation: spin 0.9s linear infinite;
-        }
-        /* ============================================
-           图标 - SVG 优化
-           ============================================ */
-        .icon {
-            width: 20px;
-            height: 20px;
-            flex-shrink: 0;
-            stroke-linecap: round;
-            stroke-linejoin: round;
-        }
-        .icon-chevron-right {
-            color: var(--color-text-tertiary);
-            opacity: 0.5;
-        }
-        /* ============================================
-           选择器 - 用于模型选择
-           ============================================ */
-        .selector-section {
-            background: linear-gradient(to bottom, var(--color-surface) 0%, rgba(255, 255, 255, 0.92) 100%);
-            border-radius: var(--radius-lg);
-            padding: calc(var(--spacing-sm) + 2px);
-            margin-bottom: 16px;
-            box-shadow: var(--shadow-card);
-            border: 1px solid var(--color-border-soft);
-        }
-        .selector-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: var(--spacing-xs);
-        }
-        .selector-title {
-            font-size: var(--font-size-caption);
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-muted);
-            text-transform: none;
-            letter-spacing: 0.04em;
-            opacity: 0.85;
-        }
-        .selector-actions {
-            display: flex;
-            gap: var(--spacing-xs);
-        }
-        .health-report {
-            margin-top: 10px;
-            padding: 10px 12px;
-            border-radius: var(--radius-md);
-            border: 1px solid var(--color-border-soft);
-            background: var(--color-surface-alt);
-            display: grid;
-            gap: 8px;
-        }
-        .health-remote-toggle {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            font-size: var(--font-size-caption);
-            color: var(--color-text-secondary);
-        }
-        .health-remote-toggle input {
-            accent-color: var(--color-brand);
-        }
-        .health-ok {
-            color: var(--color-success);
-            font-weight: var(--font-weight-secondary);
-        }
-        .health-issue {
-            background: #fff6f5;
-            border-left: 3px solid var(--color-error);
-            padding: 8px 10px;
-            border-radius: 10px;
-        }
-        .health-issue-title {
-            font-size: var(--font-size-caption);
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-primary);
-            margin-bottom: 4px;
-        }
-        .health-issue-suggestion {
-            font-size: var(--font-size-caption);
-            color: var(--color-text-secondary);
-            line-height: 1.4;
-        }
-        .btn-icon {
-            width: 28px;
-            height: 28px;
-            border-radius: var(--radius-sm);
-            border: none;
-            background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
-            color: white;
-            cursor: pointer;
-            font-size: 16px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all var(--transition-fast) var(--ease-spring);
-            box-shadow: 0 2px 4px rgba(210, 107, 90, 0.2);
-        }
-        .btn-icon:hover {
-            transform: translateY(-1px) scale(1.05);
-            box-shadow: 0 4px 8px rgba(210, 107, 90, 0.25);
-        }
-        .btn-icon:active {
-            transform: translateY(0) scale(0.98);
-        }
-        .model-select {
-            width: 100%;
-            padding: 12px var(--spacing-sm);
-            padding-right: 40px;
-            border: 1px solid var(--color-border-soft);
-            border-radius: var(--radius-sm);
-            font-size: var(--font-size-body);
-            font-weight: var(--font-weight-body);
-            background-color: var(--color-surface-alt);
-            color: var(--color-text-primary);
-            outline: none;
-            cursor: pointer;
-            appearance: none;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23505A66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
-            background-repeat: no-repeat;
-            background-position: right 14px center;
-            background-size: 12px;
-            transition: all var(--transition-fast) var(--ease-smooth);
-            box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.04);
-        }
-        .model-select:hover {
-            border-color: var(--color-border-strong);
-            background-color: var(--color-surface);
-        }
-        .model-select:focus {
-            background-color: var(--color-surface);
-            border-color: var(--color-brand);
-            box-shadow: var(--shadow-input-focus);
-        }
-        .model-input {
-            width: 100%;
-            padding: 12px var(--spacing-sm);
-            border: 1px solid var(--color-border-soft);
-            border-radius: var(--radius-sm);
-            font-size: var(--font-size-body);
-            font-weight: var(--font-weight-body);
-            background-color: var(--color-surface-alt);
-            color: var(--color-text-primary);
-            outline: none;
-            transition: all var(--transition-fast) var(--ease-smooth);
-            box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.04);
-        }
-        .model-input:hover {
-            border-color: var(--color-border-strong);
-            background-color: var(--color-surface);
-        }
-        .model-input:focus {
-            background-color: var(--color-surface);
-            border-color: var(--color-brand);
-            box-shadow: var(--shadow-input-focus);
-        }
-        .config-template-hint {
-            margin-top: 8px;
-            margin-bottom: 10px;
-            font-size: var(--font-size-caption);
-            color: var(--color-text-tertiary);
-            line-height: 1.4;
-        }
-        .btn-template-editor {
-            width: 100%;
-            margin-top: 2px;
-        }
-        /* ============================================
-           按钮
-           ============================================ */
-        .btn-add {
-            width: 100%;
-            padding: 14px var(--spacing-sm);
-            border: 1.5px dashed rgba(208, 196, 182, 0.6);
-            border-radius: var(--radius-lg);
-            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 100%);
-            font-size: var(--font-size-body);
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-tertiary);
-            cursor: pointer;
-            transition: all var(--transition-normal) var(--ease-spring);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: var(--spacing-xs);
-        }
-        .btn-add + .selector-section,
-        .selector-section + .btn-add,
-        .btn-add + .card-list,
-        .card-list + .btn-add {
-            margin-top: 12px;
-        }
-        .btn-add:hover {
-            border-color: var(--color-brand);
-            color: var(--color-brand);
-            background: linear-gradient(to bottom, rgba(210, 107, 90, 0.05) 0%, rgba(210, 107, 90, 0.02) 100%);
-            transform: translateY(-1px);
-        }
-        .btn-add:active {
-            transform: translateY(0) scale(0.99);
-        }
-        .btn-add .icon {
-            width: 18px;
-            height: 18px;
-            transition: transform var(--transition-normal) var(--ease-spring);
-        }
-        .btn-add:hover .icon {
-            transform: rotate(90deg);
-        }
-        .btn-tool {
-            padding: 12px var(--spacing-sm);
-            border-radius: var(--radius-sm);
-            border: 1px solid var(--color-border-soft);
-            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
-            font-size: var(--font-size-body);
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-secondary);
-            cursor: pointer;
-            transition: all var(--transition-fast) var(--ease-spring);
-            box-shadow: var(--shadow-subtle);
-            letter-spacing: -0.01em;
-        }
-        .btn-tool:hover {
-            border-color: var(--color-brand);
-            color: var(--color-brand);
-            transform: translateY(-1px);
-            box-shadow: 0 4px 8px rgba(210, 107, 90, 0.12);
-        }
-        .session-toolbar {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-            gap: var(--spacing-xs);
-            margin-bottom: var(--spacing-sm);
-            align-items: end;
-        }
-        .session-toolbar-group {
-            display: flex;
-            align-items: center;
-            gap: var(--spacing-xs);
-            flex-wrap: wrap;
-            min-width: 0;
-        }
-        .session-toolbar-grow {
-            grid-column: span 2;
-        }
-        .session-toolbar-actions {
-            justify-content: flex-end;
-        }
-        .session-toolbar-footer {
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-            gap: var(--spacing-xs);
-            margin-top: -2px;
-            padding-top: 6px;
-            margin-bottom: 12px;
-            border-top: 1px dashed var(--color-border-soft);
-        }
-        .session-toolbar-footer .quick-option {
-            margin: 0;
-            padding: 6px 10px;
-            border-radius: var(--radius-sm);
-            border: 1px solid var(--color-border-soft);
-            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
-            box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.04);
-            transition: all var(--transition-fast) var(--ease-spring);
-            line-height: 1.2;
-        }
-        .session-toolbar-footer .quick-option:hover {
-            border-color: var(--color-border-strong);
-        }
-        .session-source-select,
-        .session-path-select,
-        .session-query-input,
-        .session-role-select,
-        .session-time-select {
-            flex: 1;
-            min-width: 160px;
-            padding: 10px 12px;
-            border-radius: var(--radius-sm);
-            border: 1px solid var(--color-border-soft);
-            background: linear-gradient(to bottom, var(--color-surface) 0%, rgba(255, 255, 255, 0.92) 100%);
-            color: var(--color-text-secondary);
-            font-size: var(--font-size-body);
-            font-family: var(--font-family);
-            outline: none;
-            transition: all var(--transition-fast) var(--ease-spring);
-            box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.04);
-        }
-        .session-query-input {
-            flex: 2;
-            min-width: 220px;
-        }
-        .session-source-select:hover,
-        .session-path-select:hover,
-        .session-query-input:hover,
-        .session-role-select:hover,
-        .session-time-select:hover {
-            border-color: var(--color-border-strong);
-        }
-        .session-source-select:focus,
-        .session-path-select:focus,
-        .session-query-input:focus,
-        .session-role-select:focus,
-        .session-time-select:focus {
-            border-color: var(--color-brand);
-            box-shadow: var(--shadow-input-focus);
-        }
-        .session-hint {
-            font-size: var(--font-size-secondary);
-            color: var(--color-text-tertiary);
-            margin-bottom: 12px;
-            line-height: 1.45;
-        }
-        .session-card {
-            align-items: flex-start;
-            cursor: default;
-        }
-        .session-card:hover {
-            transform: none;
-            box-shadow: var(--shadow-card);
-        }
-        .session-card .card-leading {
-            align-items: flex-start;
-        }
-        .session-meta {
-            margin-top: 6px;
-            font-size: var(--font-size-caption);
-            color: var(--color-text-tertiary);
-            line-height: 1.4;
-            word-break: break-all;
-        }
-        .session-actions {
-            display: flex;
-            gap: var(--spacing-xs);
-            align-items: center;
-            margin-left: var(--spacing-sm);
-            flex-shrink: 0;
-        }
-        .session-source {
-            font-size: var(--font-size-caption);
-            color: var(--color-brand);
-            border: 1px solid rgba(210, 107, 90, 0.25);
-            border-radius: 999px;
-            padding: 2px 8px;
-            background: rgba(210, 107, 90, 0.08);
-            white-space: nowrap;
-        }
-        .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: 0 8px;
-            height: 22px;
-            line-height: 1;
-            background: rgba(247, 241, 232, 0.7);
-            white-space: nowrap;
-            margin-left: auto;
-        }
-        .btn-session-export,
-        .btn-session-open,
-        .btn-session-clone,
-        .btn-session-refresh {
-            border: 1px solid var(--color-border-soft);
-            border-radius: var(--radius-sm);
-            background: linear-gradient(to bottom, var(--color-surface) 0%, rgba(255, 255, 255, 0.9) 100%);
-            color: var(--color-text-secondary);
-            padding: 8px 12px;
-            font-size: var(--font-size-secondary);
-            font-weight: var(--font-weight-secondary);
-            cursor: pointer;
-            transition: all var(--transition-fast) var(--ease-spring);
-            white-space: nowrap;
-            box-shadow: var(--shadow-subtle);
-            letter-spacing: -0.01em;
-        }
-        .btn-session-delete {
-            border: 1px solid rgba(189, 70, 68, 0.45);
-            border-radius: var(--radius-sm);
-            background: linear-gradient(to bottom, rgba(255, 245, 245, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
-            color: #b74545;
-            padding: 8px 12px;
-            font-size: var(--font-size-secondary);
-            font-weight: var(--font-weight-secondary);
-            cursor: pointer;
-            transition: all var(--transition-fast) var(--ease-spring);
-            white-space: nowrap;
-            box-shadow: var(--shadow-subtle);
-            letter-spacing: -0.01em;
-        }
-        .btn-session-refresh:hover {
-            border-color: var(--color-brand);
-            color: var(--color-brand);
-            transform: translateY(-1px);
-        }
-        .btn-session-refresh:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            transform: none;
-        }
-        .btn-session-export:hover,
-        .btn-session-open:hover {
-            border-color: var(--color-brand);
-            color: var(--color-brand);
-            transform: translateY(-1px);
-        }
-        .btn-session-export:disabled,
-        .btn-session-open:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            transform: none;
-        }
-        .btn-session-clone:hover {
-            border-color: var(--color-brand);
-            color: var(--color-brand);
-            transform: translateY(-1px);
-        }
-        .btn-session-clone:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            transform: none;
-        }
-        .btn-session-delete:hover {
-            border-color: rgba(189, 70, 68, 0.8);
-            color: #9f3b3b;
-            transform: translateY(-1px);
-        }
-        .btn-session-delete:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            transform: none;
-        }
-        .session-empty {
-            padding: 28px var(--spacing-sm);
-            text-align: center;
-            border: 1px dashed var(--color-border-soft);
-            border-radius: var(--radius-lg);
-            color: var(--color-text-tertiary);
-            background: var(--bg-warm-gradient);
-            position: relative;
-            box-shadow: var(--shadow-subtle);
-        }
-        .session-empty::before {
-            content: "";
-            display: block;
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            margin: 0 auto 10px;
-            background: rgba(210, 107, 90, 0.12);
-            box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.7);
-        }
-        .session-layout {
-            display: grid;
-            grid-template-columns: minmax(215px, 295px) minmax(0, 1fr);
-            gap: var(--spacing-sm);
-            align-items: start;
-            height: min(72vh, 760px);
-            min-height: 520px;
-        }
-        .session-layout.session-standalone {
-            grid-template-columns: minmax(0, 1fr);
-        }
-        .session-standalone-page {
-            max-width: 960px;
-            margin: 0 auto;
-            padding: var(--spacing-sm) 0;
-        }
-        .session-standalone-title {
-            font-size: var(--font-size-title);
-            font-weight: var(--font-weight-title);
-            color: var(--color-text-primary);
-            margin-bottom: var(--spacing-sm);
-            letter-spacing: -0.01em;
-        }
-        .session-standalone-text {
-            white-space: pre-wrap;
-            font-family: var(--font-family-body);
-            font-size: var(--font-size-body);
-            line-height: 1.7;
-            color: var(--color-text-primary);
-            word-break: break-word;
-        }
-        .session-list {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-xs);
-            position: sticky;
-            top: 12px;
-            height: 100%;
-            max-height: none;
-            overflow-y: auto;
-            overflow-x: hidden;
-            padding-right: 4px;
-            min-width: 0;
-            scrollbar-width: thin;
-            scrollbar-color: rgba(166, 149, 130, 0.85) transparent;
-        }
-        .session-list::-webkit-scrollbar,
-        .session-preview-scroll::-webkit-scrollbar {
-            width: 10px;
-            height: 10px;
-        }
-        .session-list::-webkit-scrollbar-track,
-        .session-preview-scroll::-webkit-scrollbar-track {
-            background: transparent;
-            border-radius: 999px;
-        }
-        .session-list::-webkit-scrollbar-thumb,
-        .session-preview-scroll::-webkit-scrollbar-thumb {
-            background: linear-gradient(to bottom, rgba(191, 174, 154, 0.95) 0%, rgba(160, 141, 121, 0.95) 100%);
-            border-radius: 999px;
-            border: 2px solid rgba(255, 255, 255, 0.9);
-        }
-        .session-list::-webkit-scrollbar-thumb:hover,
-        .session-preview-scroll::-webkit-scrollbar-thumb:hover {
-            background: linear-gradient(to bottom, rgba(175, 156, 136, 0.95) 0%, rgba(145, 126, 107, 0.95) 100%);
-        }
-        .session-item {
-            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: 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 {
-            display: flex;
-            align-items: flex-start;
-            justify-content: space-between;
-            gap: 10px;
-            margin-bottom: 4px;
-        }
-        .session-item-main {
-            min-width: 0;
-            flex: 1;
-            display: flex;
-            align-items: flex-start;
-            gap: 8px;
-        }
-        .session-item:hover {
-            border-color: var(--color-brand);
-            background: linear-gradient(to bottom, rgba(210, 107, 90, 0.08) 0%, rgba(255, 255, 255, 0.98) 100%);
-            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);
-        }
-        .session-item.active {
-            border-color: var(--color-brand);
-            background: linear-gradient(to bottom, rgba(210, 107, 90, 0.1) 0%, rgba(255, 255, 255, 0.98) 100%);
-            box-shadow: 0 6px 16px rgba(210, 107, 90, 0.12);
-        }
-        .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;
-            gap: 6px;
-            flex-shrink: 0;
-        }
-        .session-item-copy {
-            border: 1px solid rgba(70, 86, 110, 0.35);
-            background: rgba(70, 86, 110, 0.08);
-            color: var(--color-text-secondary);
-            width: 28px;
-            height: 28px;
-            border-radius: 8px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            flex-shrink: 0;
-            transition: all var(--transition-fast) var(--ease-spring);
-        }
-        .session-item-copy:hover {
-            border-color: rgba(70, 86, 110, 0.7);
-            background: rgba(70, 86, 110, 0.16);
-            color: var(--color-text-primary);
-            transform: translateY(-1px);
-        }
-        .session-item-copy:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            transform: none;
-        }
-        .session-item-copy svg {
-            width: 16px;
-            height: 16px;
-        }
-        .session-item-sub {
-            font-size: var(--font-size-caption);
-            color: var(--color-text-tertiary);
-            line-height: 1.35;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        .session-item-sub.session-item-wrap {
-            white-space: normal;
-        }
-        .session-item-meta {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            gap: 6px;
-            margin-top: 2px;
-            margin-bottom: 2px;
-        }
-        .session-item-time {
-            font-size: var(--font-size-caption);
-            color: var(--color-text-tertiary);
-            white-space: nowrap;
-        }
-        .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 {
-            flex: 1;
-            min-height: 0;
-            overflow-y: auto;
-            overflow-x: hidden;
-            display: flex;
-            flex-direction: column;
-            scrollbar-width: thin;
-            scrollbar-color: rgba(166, 149, 130, 0.85) transparent;
-        }
-        .session-preview-header {
-            padding: 12px var(--spacing-sm);
-            border-bottom: 1px solid var(--color-border-soft);
-            display: flex;
-            align-items: flex-start;
-            justify-content: space-between;
-            gap: var(--spacing-sm);
-            position: sticky;
-            top: 0;
-            z-index: 2;
-            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 100%);
-            backdrop-filter: blur(6px);
-        }
-        .session-preview-header > div:first-child {
-            min-width: 0;
-            flex: 1;
-        }
-        .session-preview-title {
-            font-size: var(--font-size-body);
-            font-weight: var(--font-weight-title);
-            color: var(--color-text-primary);
-            line-height: 1.4;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            word-break: break-word;
-        }
-        .session-preview-sub {
-            margin-top: 4px;
-            font-size: var(--font-size-caption);
-            color: var(--color-text-tertiary);
-            line-height: 1.35;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        .session-preview-meta {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            margin-top: 4px;
-        }
-        .session-preview-meta-item {
-            font-size: var(--font-size-caption);
-            color: var(--color-text-tertiary);
-            line-height: 1.35;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        .session-preview-meta-item:not(:last-child)::after {
-            content: "·";
-            margin: 0 6px;
-            color: var(--color-text-tertiary);
-            opacity: 0.7;
-        }
-        .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;
-            min-height: 0;
-            padding: var(--spacing-sm);
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-        }
-        .session-msg {
-            border-radius: 10px;
-            padding: 10px 12px 10px 18px;
-            border: 1px solid rgba(208, 196, 182, 0.45);
-            background: rgba(255, 255, 255, 0.75);
-            position: relative;
-            box-shadow: 0 2px 6px rgba(31, 26, 23, 0.04);
-        }
-        .session-msg.user {
-            border-color: rgba(210, 107, 90, 0.35);
-            background: rgba(210, 107, 90, 0.08);
-        }
-        .session-msg::before {
-            content: "";
-            position: absolute;
-            left: 8px;
-            top: 10px;
-            bottom: 10px;
-            width: 3px;
-            border-radius: 999px;
-            background: rgba(139, 118, 104, 0.45);
-        }
-        .session-msg.user::before {
-            background: rgba(210, 107, 90, 0.85);
-        }
-        .session-msg.assistant::before {
-            background: rgba(90, 139, 106, 0.6);
-        }
-        .session-msg-header {
-            display: flex;
-            align-items: flex-start;
-            justify-content: space-between;
-            gap: var(--spacing-xs);
-            margin-bottom: 6px;
-            font-size: var(--font-size-caption);
-            color: var(--color-text-tertiary);
-        }
-        .session-msg-meta {
-            min-width: 0;
-            flex: 1;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .session-msg-role {
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-secondary);
-        }
-        .session-msg-time {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            color: var(--color-text-tertiary);
-        }
-        .session-msg-content {
-            font-size: var(--font-size-secondary);
-            line-height: 1.55;
-            color: var(--color-text-primary);
-            white-space: pre-wrap;
-            word-break: break-word;
-        }
-        .session-preview-empty {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--color-text-tertiary);
-            font-size: var(--font-size-secondary);
-            padding: var(--spacing-md);
-            text-align: center;
-            flex-direction: column;
-            gap: 8px;
-        }
-        .session-preview-empty::before {
-            content: "";
-            width: 34px;
-            height: 34px;
-            border-radius: 50%;
-            background: rgba(210, 107, 90, 0.12);
-            box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.7);
-        }
-        @media (max-width: 1100px) {
-            .session-layout {
-                grid-template-columns: 1fr;
-                height: auto;
-                min-height: 0;
-            }
-            .session-toolbar {
-                grid-template-columns: 1fr;
-            }
-            .session-toolbar-actions {
-                justify-content: flex-start;
-            }
-            .session-toolbar-footer {
-                justify-content: flex-start;
-            }
-            .session-list {
-                position: static;
-                max-height: 300px;
-                height: auto;
-            }
-            .session-preview {
-                min-height: 360px;
-                max-height: none;
-                height: auto;
-                position: relative;
-                transform: none;
-                box-shadow: var(--shadow-card);
-            }
-            .session-preview-header {
-                flex-direction: column;
-                align-items: stretch;
-            }
-            .session-actions {
-                justify-content: flex-start;
-            }
-            .session-preview.active {
-                box-shadow: var(--shadow-float);
-            }
-        }
-        @media (max-width: 520px) {
-            .session-item-header {
-                flex-direction: column;
-                align-items: stretch;
-            }
-            .session-item-actions {
-                justify-content: flex-end;
-            }
-            .session-actions {
-                width: 100%;
-                flex-direction: column;
-                align-items: stretch;
-            }
-            .btn-session-refresh,
-            .btn-session-export {
-                width: 100%;
-            }
-            .session-toolbar-group.session-toolbar-actions {
-                flex-direction: column;
-                align-items: stretch;
-            }
-            .session-toolbar-group.session-toolbar-actions .btn-tool {
-                width: 100%;
-            }
-        }
-        .btn[disabled] {
-            opacity: 0.5;
-            cursor: not-allowed;
-            transform: none;
-            box-shadow: none;
-        }
-        /* ============================================
-           模态框
-           ============================================ */
-        .modal-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: linear-gradient(to bottom, rgba(31, 26, 23, 0.3) 0%, rgba(31, 26, 23, 0.5) 100%);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            z-index: 100;
-            backdrop-filter: blur(8px) saturate(180%);
-            -webkit-backdrop-filter: blur(8px) saturate(180%);
-            animation: fadeIn var(--transition-normal) var(--ease-out-expo);
-        }
-        .modal {
-            background: linear-gradient(to bottom, var(--color-surface) 0%, rgba(255, 255, 255, 0.98) 100%);
-            width: 90%;
-            max-width: 400px;
-            max-height: 90vh;
-            overflow-y: auto;
-            overscroll-behavior: contain;
-            border-radius: var(--radius-lg);
-            padding: var(--spacing-md);
-            box-shadow: var(--shadow-modal);
-            border: 1px solid rgba(255, 255, 255, 0.8);
-            animation: slideUp var(--transition-slow) var(--ease-spring);
-        }
-        .modal-wide {
-            max-width: 980px;
-        }
-        .modal-title {
-            font-size: var(--font-size-title);
-            font-weight: var(--font-weight-title);
-            margin-bottom: var(--spacing-md);
-            color: var(--color-text-primary);
-            letter-spacing: -0.01em;
-        }
-        .modal-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: var(--spacing-sm);
-            margin-bottom: var(--spacing-md);
-            flex-wrap: wrap;
-        }
-        .modal-header .modal-title {
-            margin-bottom: 0;
-        }
-        .btn-modal-copy {
-            padding: 6px 12px;
-            white-space: nowrap;
-            flex-shrink: 0;
-        }
-        .form-group {
-            margin-bottom: var(--spacing-sm);
-        }
-        .form-label {
-            display: block;
-            font-size: var(--font-size-secondary);
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-secondary);
-            margin-bottom: 7px;
-            letter-spacing: 0.01em;
-        }
-        .form-input {
-            width: 100%;
-            padding: 13px var(--spacing-sm);
-            border: 1.5px solid var(--color-border-soft);
-            border-radius: var(--radius-sm);
-            font-size: var(--font-size-body);
-            background-color: var(--color-surface-alt);
-            color: var(--color-text-primary);
-            outline: none;
-            transition: all var(--transition-fast) var(--ease-spring);
-            font-family: var(--font-family-body);
-            box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.04);
-        }
-        .form-input:hover {
-            border-color: var(--color-border-strong);
-        }
-        .form-input:focus {
-            border-color: var(--color-brand);
-            background-color: var(--color-surface);
-            box-shadow: var(--shadow-input-focus);
-        }
-        .form-input::placeholder {
-            color: var(--color-text-tertiary);
-            opacity: 0.7;
-        }
-        .template-editor {
-            min-height: min(60vh, 520px);
-            max-height: min(65vh, 620px);
-            resize: vertical;
-            overflow: auto;
-            white-space: pre;
-            font-family: var(--font-family-mono);
-            font-size: 13px;
-            line-height: 1.45;
-        }
-        .template-editor-warning {
-            margin-top: 8px;
-            color: #8d5b31;
-            font-size: var(--font-size-caption);
-            line-height: 1.4;
-        }
-        .form-input:disabled,
-        .form-input[readonly] {
-            background: linear-gradient(to right, var(--color-bg) 0%, rgba(247, 241, 232, 0.5) 100%);
-            color: var(--color-text-tertiary);
-            cursor: not-allowed;
-            border-color: transparent;
-        }
-        .form-hint {
-            font-size: var(--font-size-caption);
-            color: var(--color-text-tertiary);
-            margin-top: 5px;
-            opacity: 0.8;
-        }
-        .quick-section {
-            margin-top: var(--spacing-md);
-            padding: var(--spacing-sm);
-            border-radius: var(--radius-lg);
-            border: 1px solid var(--color-border-soft);
-            background: linear-gradient(140deg, rgba(255, 252, 247, 0.95), rgba(255, 255, 255, 0.6));
-        }
-        .quick-header {
-            display: flex;
-            flex-wrap: wrap;
-            gap: var(--spacing-xs);
-            align-items: flex-start;
-            justify-content: space-between;
-            margin-bottom: var(--spacing-sm);
-        }
-        .quick-title {
-            font-size: var(--font-size-secondary);
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-secondary);
-        }
-        .quick-actions {
-            display: flex;
-            flex-wrap: wrap;
-            gap: var(--spacing-xs);
-        }
-        .quick-steps {
-            display: flex;
-            flex-wrap: wrap;
-            gap: var(--spacing-xs);
-            margin-bottom: var(--spacing-sm);
-        }
-        .quick-step {
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-            padding: 4px 10px;
-            border-radius: 999px;
-            border: 1px dashed var(--color-border-soft);
-            background: var(--color-surface);
-            font-size: var(--font-size-caption);
-            color: var(--color-text-secondary);
-        }
-        .step-badge {
-            width: 20px;
-            height: 20px;
-            border-radius: 999px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            background: var(--color-brand);
-            color: #fff;
-            font-size: 12px;
-            font-weight: var(--font-weight-secondary);
-        }
-        .quick-grid {
-            display: grid;
-            gap: var(--spacing-sm);
-            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-        }
-        .quick-card {
-            background: var(--color-surface);
-            border: 1px solid var(--color-border-soft);
-            border-radius: var(--radius-sm);
-            padding: var(--spacing-sm);
-            box-shadow: var(--shadow-subtle);
-        }
-        .quick-option {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            font-size: var(--font-size-caption);
-            color: var(--color-text-secondary);
-            margin-bottom: 6px;
-        }
-        .quick-option input {
-            accent-color: var(--color-brand);
-        }
-        .structured-section {
-            margin-top: var(--spacing-md);
-            padding: var(--spacing-sm);
-            border-radius: var(--radius-lg);
-            border: 1px solid var(--color-border-soft);
-            background: rgba(255, 255, 255, 0.6);
-        }
-        .structured-header {
-            display: flex;
-            flex-wrap: wrap;
-            gap: var(--spacing-xs);
-            align-items: baseline;
-            justify-content: space-between;
-            margin-bottom: var(--spacing-sm);
-        }
-        .structured-title {
-            font-size: var(--font-size-secondary);
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-secondary);
-        }
-        .structured-grid {
-            display: grid;
-            gap: var(--spacing-sm);
-            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-        }
-        .structured-card {
-            background: var(--color-surface);
-            border: 1px solid var(--color-border-soft);
-            border-radius: var(--radius-sm);
-            padding: var(--spacing-sm);
-            box-shadow: var(--shadow-subtle);
-        }
-        .structured-card-title {
-            font-size: var(--font-size-body);
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-secondary);
-            margin-bottom: 8px;
-        }
-        .provider-list {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-xs);
-        }
-        .provider-item {
-            border: 1px dashed var(--color-border-soft);
-            border-radius: var(--radius-sm);
-            padding: var(--spacing-xs);
-            background: var(--color-surface-alt);
-        }
-        .provider-header {
-            display: flex;
-            flex-wrap: wrap;
-            gap: var(--spacing-xs);
-            align-items: center;
-            margin-bottom: 6px;
-        }
-        .provider-name {
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-secondary);
-        }
-        .provider-source {
-            font-size: var(--font-size-caption);
-            color: var(--color-text-tertiary);
-        }
-        .provider-fields {
-            display: grid;
-            gap: 6px;
-        }
-        .provider-field {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 6px;
-            align-items: baseline;
-        }
-        .provider-field-key {
-            font-family: var(--font-family-mono);
-            font-size: var(--font-size-caption);
-            color: var(--color-text-muted);
-            min-width: 110px;
-        }
-        .provider-field-value {
-            font-family: var(--font-family-mono);
-            font-size: var(--font-size-caption);
-            color: var(--color-text-secondary);
-            word-break: break-all;
-        }
-        .agent-list {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-xs);
-        }
-        .agent-item {
-            border: 1px dashed var(--color-border-soft);
-            border-radius: var(--radius-sm);
-            padding: var(--spacing-xs);
-            background: var(--color-surface-alt);
-        }
-        .agent-header {
-            display: flex;
-            flex-wrap: wrap;
-            gap: var(--spacing-xs);
-            align-items: center;
-            margin-bottom: 6px;
-        }
-        .agent-name {
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-secondary);
-        }
-        .agent-id {
-            font-size: var(--font-size-caption);
-            color: var(--color-text-tertiary);
-        }
-        .agent-meta {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 8px;
-            font-size: var(--font-size-caption);
-            color: var(--color-text-secondary);
-        }
-        .list-row {
-            display: flex;
-            flex-wrap: wrap;
-            gap: var(--spacing-xs);
-            align-items: center;
-            margin-bottom: var(--spacing-xs);
-        }
-        .list-row:last-child {
-            margin-bottom: 0;
-        }
-        .list-row .form-input {
-            flex: 1;
-            min-width: 140px;
-        }
-        .btn-mini {
-            padding: 6px 10px;
-            border-radius: var(--radius-sm);
-            border: 1px solid var(--color-border-soft);
-            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
-            font-size: var(--font-size-caption);
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-secondary);
-            cursor: pointer;
-            transition: all var(--transition-fast) var(--ease-spring);
-            box-shadow: var(--shadow-subtle);
-        }
-        .btn-mini:hover {
-            border-color: var(--color-brand);
-            color: var(--color-brand);
-            transform: translateY(-1px);
-        }
-        .btn-mini.delete {
-            color: var(--color-error);
-            border-color: rgba(193, 72, 59, 0.35);
-        }
-        .btn-mini.delete:hover {
-            border-color: rgba(193, 72, 59, 0.7);
-            color: var(--color-error);
-        }
-        .btn-group {
-            display: flex;
-            gap: var(--spacing-sm);
-            margin-top: var(--spacing-md);
-        }
-        .btn {
-            flex: 1;
-            padding: 14px var(--spacing-sm);
-            border-radius: var(--radius-sm);
-            font-size: var(--font-size-body);
-            font-weight: var(--font-weight-secondary);
-            cursor: pointer;
-            transition: all var(--transition-fast) var(--ease-spring);
-            border: 1px solid var(--color-border-soft);
-            background: linear-gradient(to bottom, var(--color-surface) 0%, rgba(255, 255, 255, 0.95) 100%);
-            color: var(--color-text-secondary);
-            box-shadow: var(--shadow-subtle);
-            letter-spacing: -0.01em;
-        }
-        .btn:active {
-            transform: scale(0.97);
-        }
-        .btn-cancel {
-            background: linear-gradient(to bottom, var(--color-bg) 0%, rgba(247, 241, 232, 0.8) 100%);
-            color: var(--color-text-primary);
-            border: 1px solid var(--color-border-soft);
-        }
-        .btn-cancel:hover {
-            background: linear-gradient(to bottom, var(--color-border) 0%, rgba(208, 196, 182, 0.5) 100%);
-        }
-        .btn-confirm {
-            background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
-            color: white;
-            box-shadow: 0 2px 4px rgba(210, 107, 90, 0.2);
-            border: none;
-        }
-        .btn-confirm:hover {
-            box-shadow: 0 4px 8px rgba(210, 107, 90, 0.25);
-            filter: brightness(1.05);
-        }
-        .btn-confirm.secondary {
-            background: linear-gradient(135deg, var(--color-success) 0%, rgba(90, 139, 106, 0.85) 100%);
-            box-shadow: 0 2px 4px rgba(90, 139, 106, 0.2);
-            border: none;
-        }
-        .btn-confirm.secondary:hover {
-            box-shadow: 0 4px 8px rgba(90, 139, 106, 0.25);
-            filter: brightness(1.05);
-        }
-        /* ============================================
-           模型列表
-           ============================================ */
-        .model-list {
-            max-height: 200px;
-            overflow-y: auto;
-            border: 1px solid rgba(208, 196, 182, 0.4);
-            border-radius: var(--radius-sm);
-            margin-bottom: var(--spacing-sm);
-            scrollbar-width: none;
-            background: linear-gradient(to bottom, var(--color-surface) 0%, rgba(255, 255, 255, 0.8) 100%);
-            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
-        }
-        .model-list::-webkit-scrollbar {
-            display: none;
-        }
-        .model-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 11px var(--spacing-sm);
-            border-bottom: 1px solid rgba(208, 196, 182, 0.3);
-            font-size: var(--font-size-body);
-            color: var(--color-text-primary);
-            transition: all var(--transition-fast) var(--ease-spring);
-            letter-spacing: -0.005em;
-        }
-        .model-item:last-child {
-            border-bottom: none;
-        }
-        .model-item:hover {
-            background: linear-gradient(to right, rgba(247, 241, 232, 0.6) 0%, rgba(247, 241, 232, 0.3) 100%);
-        }
-        .btn-remove-model {
-            font-size: var(--font-size-caption);
-            font-weight: var(--font-weight-caption);
-            color: var(--color-text-tertiary);
-            cursor: pointer;
-            padding: 5px 10px;
-            border-radius: var(--radius-full);
-            transition: all var(--transition-fast) var(--ease-spring);
-            background: transparent;
-            border: 1px solid rgba(139, 118, 104, 0.2);
-            letter-spacing: 0.03em;
-        }
-        .btn-remove-model:hover {
-            background: linear-gradient(135deg, var(--color-error) 0%, rgba(200, 74, 58, 0.9) 100%);
-            color: white;
-            transform: scale(1.08);
-            box-shadow: 0 2px 6px rgba(200, 74, 58, 0.25);
-            border-color: transparent;
-        }
-        /* ============================================
-           Toast - 顶部横幅
-           ============================================ */
-        .toast {
-            position: fixed;
-            top: 16px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: linear-gradient(to bottom, var(--color-surface) 0%, rgba(255, 255, 255, 0.95) 100%);
-            padding: 12px 24px;
-            border-radius: var(--radius-full);
-            box-shadow: var(--shadow-raised);
-            z-index: 200;
-            animation: slideDown var(--transition-slow) var(--ease-spring);
-            display: flex;
-            align-items: center;
-            gap: var(--spacing-xs);
-            font-size: var(--font-size-body);
-            font-weight: var(--font-weight-body);
-            border: 1px solid rgba(255, 255, 255, 0.8);
-            backdrop-filter: blur(8px);
-            -webkit-backdrop-filter: blur(8px);
-        }
-        .toast.error {
-            border-left: 3px solid var(--color-error);
-        }
-        .toast.success {
-            border-left: 3px solid var(--color-success);
-        }
-        /* ============================================
-           状态消息
-           ============================================ */
-        .state-message {
-            text-align: center;
-            padding: 60px var(--spacing-md);
-            color: var(--color-text-tertiary);
-            font-size: var(--font-size-body);
-            opacity: 0.7;
-            letter-spacing: -0.005em;
-        }
-        .state-message.error {
-            color: var(--color-error);
-        }
-        /* 空状态 */
-        .empty-state {
-            text-align: center;
-            padding: 48px var(--spacing-md);
-            color: var(--color-text-tertiary);
-        }
-        .empty-state-icon {
-            width: 48px;
-            height: 48px;
-            margin: 0 auto var(--spacing-sm);
-            opacity: 0.3;
-        }
-        .empty-state-title {
-            font-size: var(--font-size-body);
-            font-weight: var(--font-weight-secondary);
-            color: var(--color-text-secondary);
-            margin-bottom: 4px;
-        }
-        .empty-state-subtitle {
-            font-size: var(--font-size-secondary);
-            color: var(--color-text-tertiary);
-            opacity: 0.8;
-        }
-        /* ============================================
-           动画
-           ============================================ */
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-        @keyframes slideUp {
-            from { transform: translateY(24px); opacity: 0; }
-            to { transform: translateY(0); opacity: 1; }
-        }
-        @keyframes slideDown {
-            from { transform: translateX(-50%) translateY(-100%); opacity: 0; }
-            to { transform: translateX(-50%) translateY(0); opacity: 1; }
-        }
-        @keyframes spin {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-        }
-        [v-cloak] {
-            display: none !important;
-        }
-        /* 模式内容容器 */
-        .mode-content {
-            animation: fadeIn var(--transition-normal) var(--ease-spring);
-        }
-        /* 内容区域包裹器 - 稳定高度 */
-        .content-wrapper {
-            min-height: 300px;
-            position: relative;
-        }
-        button:focus-visible,
-        select:focus-visible,
-        input:focus-visible,
-        textarea:focus-visible {
-            outline: 3px solid rgba(201, 94, 75, 0.25);
-            outline-offset: 2px;
-        }
-        @media (max-width: 960px) {
-            .container {
-                padding: 12px;
-            }
-            .app-shell {
-                grid-template-columns: 1fr;
-            }
-            .side-rail {
-                display: none;
-            }
-            .main-panel {
-                padding: var(--spacing-sm) var(--spacing-sm);
-                border-radius: 14px;
-            }
-            .top-tabs {
-                display: grid !important;
-                grid-template-columns: repeat(2, minmax(0, 1fr));
-            }
-            .status-strip {
-                gap: var(--spacing-sm);
-                margin-top: 4px;
-            }
-            .status-chip {
-                flex: 1 1 calc(50% - var(--spacing-sm));
-                min-width: 0;
-            }
-        }
-        @media (max-width: 720px) {
-            .main-title {
-                font-size: 40px;
-            }
-            .hero-title {
-                font-size: 32px;
-            }
-            .subtitle {
-                font-size: var(--font-size-secondary);
-                margin-bottom: 16px;
-            }
-            .segmented-control {
-                flex-direction: column;
-                gap: 6px;
-            }
-            .status-strip {
-                flex-direction: row;
-                flex-wrap: wrap;
-            }
-            .status-chip {
-                flex: 1 1 100%;
-            }
-        }
-        @media (max-width: 540px) {
-            body {
-                padding: var(--spacing-md) var(--spacing-sm);
-            }
-            .container {
-                padding: 0 var(--spacing-sm) var(--spacing-md);
-            }
-            .hero-title {
-                font-size: 32px;
-            }
-            .hero-subtitle {
-                font-size: var(--font-size-secondary);
-            }
-            .top-tabs {
-                grid-template-columns: repeat(1, minmax(0, 1fr));
-            }
-            .main-panel {
-                padding: var(--spacing-sm);
-            }
-            .card {
-                padding: 12px;
-            }
-            .session-layout {
-                grid-template-columns: 1fr;
-                height: auto;
-                min-height: 0;
-            }
-            .status-strip {
-                gap: var(--spacing-xs);
-            }
-            .status-chip {
-                flex: 1 1 100%;
-                min-width: 100%;
-            }
-            .btn-add,
-            .btn-tool,
-            .card-action-btn,
-            .btn-session-export,
-            .btn-session-open,
-            .btn-session-clone,
-            .btn-session-refresh,
-            .btn-session-delete,
-            .btn-icon,
-            .session-item-copy {
-                min-height: 44px;
-                padding-top: 12px;
-                padding-bottom: 12px;
-            }
-            .btn-icon,
-            .session-item-copy {
-                min-width: 44px;
-            }
-            .session-item {
-                min-height: 75px;
-                height: 75px;
-                padding: 12px 14px;
-            }
-            .session-item-header {
-                flex-direction: row;
-                align-items: center;
-                gap: 8px;
-            }
-            .session-item-main {
-                align-items: center;
-            }
-            .session-item-copy {
-                width: 20px;
-                height: 20px;
-                min-width: 20px;
-                min-height: 20px;
-                border-radius: 6px;
-                padding: 2px;
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-                transform: translate(-3px, 0);
-            }
-            .session-item-copy svg {
-                width: 12px;
-                height: 12px;
-            }
-            .session-item-title {
-                -webkit-line-clamp: 1;
-                max-height: none;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
-            }
-            .session-item-actions {
-                margin-top: 0;
-            }
-            .session-item-meta {
-                margin-top: -2px;
-                margin-bottom: 0;
-                gap: 4px;
-                align-items: center;
-            }
-            .session-count-pill {
-                transform: translateY(-6px);
-            }
-            .card {
-                padding: 8px;
-            }
-            .card-list {
-                gap: 4px;
-                margin-bottom: 4px;
-            }
-            .card-actions {
-                gap: 8px;
-            }
-            .card-action-btn {
-                width: 40px;
-                height: 40px;
-                border-radius: 10px;
-            }
-            .card-action-btn svg {
-                width: 18px;
-                height: 18px;
-            }
-            /* 移动端不显示配置状态 pill，节省空间 */
-            .card-trailing .pill {
-                display: none;
-            }
-            .session-preview {
-                border-radius: var(--radius-lg);
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="app" class="container" v-cloak>
-        <div class="hero" v-if="!sessionStandalone">
-            <div class="hero-title">
-                Codex <span class="accent">Mate.</span>
-            </div>
-            <div class="hero-subtitle">
-                本地配置中枢，统一管理 Codex / Claude Code / OpenClaw / 会话。
-            </div>
-        </div>
-        <div v-if="!sessionStandalone" class="top-tabs" role="tablist" aria-label="主导航">
-            <button class="top-tab"
-                id="tab-config-codex"
-                role="tab"
-                :tabindex="mainTab === 'config' && configMode === 'codex' ? 0 : -1"
-                :aria-selected="mainTab === 'config' && configMode === 'codex'"
-                :aria-pressed="mainTab === 'config' && configMode === 'codex'"
-                aria-controls="panel-config-codex"
-                :class="{ active: mainTab === 'config' && configMode === 'codex' }"
-                @click="switchConfigMode('codex')">Codex 配置</button>
-            <button class="top-tab"
-                id="tab-config-claude"
-                role="tab"
-                :tabindex="mainTab === 'config' && configMode === 'claude' ? 0 : -1"
-                :aria-selected="mainTab === 'config' && configMode === 'claude'"
-                :aria-pressed="mainTab === 'config' && configMode === 'claude'"
-                aria-controls="panel-config-claude"
-                :class="{ active: mainTab === 'config' && configMode === 'claude' }"
-                @click="switchConfigMode('claude')">Claude Code 配置</button>
-            <button class="top-tab"
-                id="tab-config-openclaw"
-                role="tab"
-                :tabindex="mainTab === 'config' && configMode === 'openclaw' ? 0 : -1"
-                :aria-selected="mainTab === 'config' && configMode === 'openclaw'"
-                :aria-pressed="mainTab === 'config' && configMode === 'openclaw'"
-                aria-controls="panel-config-openclaw"
-                :class="{ active: mainTab === 'config' && configMode === 'openclaw' }"
-                @click="switchConfigMode('openclaw')">OpenClaw 配置</button>
-            <button class="top-tab"
-                id="tab-sessions"
-                role="tab"
-                :tabindex="mainTab === 'sessions' ? 0 : -1"
-                :aria-selected="mainTab === 'sessions'"
-                :aria-pressed="mainTab === 'sessions'"
-                aria-controls="panel-sessions"
-                :class="{ active: mainTab === 'sessions' }"
-                @click="switchMainTab('sessions')">会话浏览</button>
-        </div>
-        <div :class="['app-shell', { standalone: sessionStandalone }]">
-            <aside class="side-rail" v-if="!sessionStandalone">
-                <div class="brand-block">
-                    <div class="brand-title">
-                        Codex <span class="accent">Mate</span>
-                    </div>
-                    <div class="brand-subtitle">
-                        配置 / 会话切换器
-                    </div>
-                </div>
-                <div class="side-section" role="tablist" aria-label="配置管理">
-                    <div class="side-section-title">配置管理</div>
-                    <button
-                        role="tab"
-                        id="side-tab-config-codex"
-                        aria-controls="panel-config-codex"
-                        :tabindex="mainTab === 'config' && configMode === 'codex' ? 0 : -1"
-                        :aria-selected="mainTab === 'config' && configMode === 'codex'"
-                        :aria-pressed="mainTab === 'config' && configMode === 'codex'"
-                        :class="['side-item', { active: mainTab === 'config' && configMode === 'codex' }]"
-                        @click="switchConfigMode('codex')">
-                        <div class="side-item-title">Codex 配置</div>
-                        <div class="side-item-meta">
-                            <span>提供商 / 模型</span>
-                            <span v-if="currentProvider">当前 {{ currentProvider }}</span>
-                        </div>
-                    </button>
-                    <button
-                        role="tab"
-                        id="side-tab-config-claude"
-                        aria-controls="panel-config-claude"
-                        :tabindex="mainTab === 'config' && configMode === 'claude' ? 0 : -1"
-                        :aria-selected="mainTab === 'config' && configMode === 'claude'"
-                        :aria-pressed="mainTab === 'config' && configMode === 'claude'"
-                        :class="['side-item', { active: mainTab === 'config' && configMode === 'claude' }]"
-                        @click="switchConfigMode('claude')">
-                        <div class="side-item-title">Claude Code 配置</div>
-                        <div class="side-item-meta">
-                            <span>Base URL / Key</span>
-                            <span v-if="currentClaudeConfig">当前 {{ currentClaudeConfig }}</span>
-                        </div>
-                    </button>
-                    <button
-                        role="tab"
-                        id="side-tab-config-openclaw"
-                        aria-controls="panel-config-openclaw"
-                        :tabindex="mainTab === 'config' && configMode === 'openclaw' ? 0 : -1"
-                        :aria-selected="mainTab === 'config' && configMode === 'openclaw'"
-                        :aria-pressed="mainTab === 'config' && configMode === 'openclaw'"
-                        :class="['side-item', { active: mainTab === 'config' && configMode === 'openclaw' }]"
-                        @click="switchConfigMode('openclaw')">
-                        <div class="side-item-title">OpenClaw 配置</div>
-                        <div class="side-item-meta">
-                            <span>JSON5 / Workspace</span>
-                            <span v-if="currentOpenclawConfig">当前 {{ currentOpenclawConfig }}</span>
-                        </div>
-                    </button>
-                </div>
-                <div class="side-section" role="tablist" aria-label="会话管理">
-                    <div class="side-section-title">会话管理</div>
-                    <button
-                        role="tab"
-                        id="side-tab-sessions"
-                        aria-controls="panel-sessions"
-                        :tabindex="mainTab === 'sessions' ? 0 : -1"
-                        :aria-selected="mainTab === 'sessions'"
-                        :aria-pressed="mainTab === 'sessions'"
-                        :class="['side-item', { active: mainTab === 'sessions' }]"
-                        @click="switchMainTab('sessions')">
-                        <div class="side-item-title">会话浏览</div>
-                        <div class="side-item-meta">
-                            <span>快速预览 / 导出</span>
-                            <span>来源：{{ sessionFilterSource === 'all' ? '全部' : (sessionFilterSource === 'codex' ? 'Codex' : 'Claude') }}</span>
-                        </div>
-                    </button>
-                </div>
-            </aside>
-            <main class="main-panel">
-                <div class="panel-header" v-if="!sessionStandalone">
-                    <h1 class="main-title">
-                        {{ mainTab === 'config' ? '配置中心' : '会话浏览' }}
-                    </h1>
-                    <p class="subtitle" v-if="mainTab === 'config'">
-                        本地配置中枢，统一管理 Codex / Claude Code / OpenClaw。
-                    </p>
-                    <p class="subtitle" v-else>
-                        浏览、导出或独立查看 Codex / Claude 会话记录。
-                    </p>
-                </div>
-                <div class="status-strip" v-if="!sessionStandalone && mainTab === 'config'">
-                    <template v-if="configMode === 'codex'">
-                        <div class="status-chip">
-                            <span class="label">Codex 提供商</span>
-                            <span class="value">{{ currentProvider || '未选择' }}</span>
-                        </div>
-                        <div class="status-chip">
-                            <span class="label">Codex 模型</span>
-                            <span class="value">{{ currentModel || '未选择' }}</span>
-                        </div>
-                    </template>
-                    <template v-else-if="configMode === 'claude'">
-                        <div class="status-chip">
-                            <span class="label">Claude 配置</span>
-                            <span class="value">{{ currentClaudeConfig || '未选择' }}</span>
-                        </div>
-                        <div class="status-chip">
-                            <span class="label">Claude 模型</span>
-                            <span class="value">{{ currentClaudeModel || '未选择' }}</span>
-                        </div>
-                    </template>
-                    <template v-else>
-                        <div class="status-chip">
-                            <span class="label">OpenClaw 配置</span>
-                            <span class="value">{{ currentOpenclawConfig || '未选择' }}</span>
-                        </div>
-                        <div class="status-chip">
-                            <span class="label">工作区文件</span>
-                            <span class="value">{{ openclawWorkspaceFileName || '未选择' }}</span>
-                        </div>
-                    </template>
-                </div>
-                <div class="status-strip" v-else-if="!sessionStandalone && mainTab === 'sessions'">
-                    <div class="status-chip">
-                        <span class="label">当前来源</span>
-                        <span class="value">{{ sessionFilterSource === 'claude' ? 'Claude Code' : 'Codex' }}</span>
-                    </div>
-                    <div class="status-chip">
-                        <span class="label">会话数</span>
-                        <span class="value">{{ sessionsList.length }}</span>
-                    </div>
-                </div>
-                <div v-if="false && mainTab === 'config' && !sessionStandalone" class="config-subtabs">
-                    <button :class="['config-subtab', { active: configMode === 'codex' }]" @click="switchConfigMode('codex')">
-                        Codex 配置
-                    </button>
-                    <button :class="['config-subtab', { active: configMode === 'claude' }]" @click="switchConfigMode('claude')">
-                        Claude Code 配置
-                    </button>
-                    <button :class="['config-subtab', { active: configMode === 'openclaw' }]" @click="switchConfigMode('openclaw')">
-                        OpenClaw 配置
-                    </button>
-                </div>
-                <!-- 内容包裹器 - 稳定布局 -->
-                <div class="content-wrapper">
-                    <!-- Codex 配置模式 -->
-                    <div
-                        v-show="mainTab === 'config' && configMode === 'codex'"
-                        class="mode-content mode-cards"
-                        id="panel-config-codex"
-                        role="tabpanel"
-                        :aria-labelledby="'tab-config-codex'">
-                <!-- 添加提供商按钮 -->
-                <button class="btn-add" @click="showAddModal = true" v-if="!loading && !initError">
-                    <svg class="icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M10 4v12M4 10h12"/>
-                    </svg>
-                    添加提供商
-                </button>
-                <!-- 模型选择器 -->
-                <div class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">模型</span>
-                        <div class="selector-actions">
-                            <button class="btn-icon" @click="showModelModal = true" title="添加模型" v-if="modelsSource === 'legacy'">+</button>
-                            <button class="btn-icon" @click="showModelListModal = true" title="管理模型" v-if="modelsSource === 'legacy'">≡</button>
-                        </div>
-                    </div>
-                    <select
-                        v-if="codexModelsLoading || modelsSource === 'remote'"
-                        class="model-select"
-                        v-model="currentModel"
-                        @change="onModelChange"
-                        :disabled="codexModelsLoading"
-                    >
-                        <option v-if="codexModelsLoading" value="">加载中...</option>
-                        <option v-else v-for="model in models" :key="model" :value="model">{{ model }}</option>
-                    </select>
-                    <input
-                        v-if="!codexModelsLoading && (modelsSource !== 'remote' || !modelsHasCurrent)"
-                        class="model-input"
-                        v-model="currentModel"
-                        @blur="onModelChange"
-                        placeholder="例如: gpt-5.3-codex"
-                    >
-                    <div class="config-template-hint" v-if="modelsSource === 'unlimited'">
-                        当前提供商未提供模型列表，视为不限。模型可手动输入。
-                    </div>
-                    <div class="config-template-hint" v-if="modelsSource === 'error'">
-                        模型列表获取失败，请检查接口或手动输入。
-                    </div>
-                    <div class="config-template-hint" v-if="modelsSource === 'remote' && !modelsHasCurrent">
-                        当前模型不在接口列表中，请手动输入或在模板中调整。
-                    </div>
-                    <div class="config-template-hint">
-                        Codex 配置需先改模板，再手动应用。
-                    </div>
-                    <button class="btn-tool btn-template-editor" @click="openConfigTemplateEditor" :disabled="loading || !!initError">
-                        打开 Config 模板编辑器
-                    </button>
-                </div>
-                <div class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">服务档位</span>
-                    </div>
-                    <select class="model-select" v-model="serviceTier" @change="onServiceTierChange">
-                        <option value="fast">fast（默认）</option>
-                        <option value="standard">standard</option>
-                    </select>
-                    <div class="config-template-hint">
-                        仅 fast 会写入 <code>service_tier</code>。
-                    </div>
-                </div>
-                <div class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">AGENTS.md</span>
-                    </div>
-                    <div class="config-template-hint">
-                        Codex 指令：<code>~/.codex/AGENTS.md</code>（同级 <code>config.toml</code>）。
-                    </div>
-                    <button class="btn-tool" @click="openAgentsEditor" :disabled="loading || !!initError || agentsLoading">
-                        {{ agentsLoading ? '加载中...' : '打开 AGENTS.md 编辑器' }}
-                    </button>
-                </div>
-                <div class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">配置健康检查</span>
-                    </div>
-                    <button class="btn-tool" @click="runHealthCheck" :disabled="healthCheckLoading || loading || !!initError">
-                        {{ healthCheckLoading ? '检查中...' : '运行检查' }}
-                    </button>
-                </div>
-                <div v-if="!loading && !initError" class="card-list">
-                    <div v-for="provider in providersList" :key="provider.name"
-                         :class="['card', { active: currentProvider === provider.name }]"
-                         @click="switchProvider(provider.name)">
-                        <div class="card-leading">
-                            <div class="card-icon">{{ provider.name.charAt(0).toUpperCase() }}</div>
-                            <div class="card-content">
-                                <div class="card-title">{{ provider.name }}</div>
-                                <div class="card-subtitle">{{ provider.url || '未设置 URL' }}</div>
-                            </div>
-                        </div>
-                        <div class="card-trailing">
-                            <span :class="['pill', provider.hasKey ? 'configured' : 'empty']">
-                                {{ provider.hasKey ? '已配置' : '未配置' }}
-                            </span>
-                            <span v-if="speedResults[provider.name]" :class="['latency', speedResults[provider.name].ok ? 'ok' : 'error']">
-                                {{ formatLatency(speedResults[provider.name]) }}
-                            </span>
-                            <div class="card-actions" @click.stop>
-                                <button class="card-action-btn" :class="{ loading: speedLoading[provider.name] }" @click="runSpeedTest(provider.name)" title="Speed Test">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M13 2L3 14h7l-1 8 12-14h-7l-1-6z"/>
-                                    </svg>
-                                </button>
-                                <button class="card-action-btn" :class="{ loading: providerShareLoading[provider.name] }" @click="copyProviderShareCommand(provider)" title="分享导入命令">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/>
-                                        <path d="M16 6l-4-4-4 4"/>
-                                        <path d="M12 2v14"/>
-                                    </svg>
-                                </button>
-                                <button class="card-action-btn" @click="openEditModal(provider)" title="编辑">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
-                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
-                                    </svg>
-                                </button>
-                                <button class="card-action-btn delete" @click="deleteProvider(provider.name)" title="删除">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M3 6h18"/>
-                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-                <!-- 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">
-                        <path d="M10 4v12M4 10h12"/>
-                    </svg>
-                    添加提供商
-                </button>
-                <div class="config-template-hint">
-                    默认应用到 <code>~/.claude/settings.json</code>。
-                </div>
-                <div class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">模型</span>
-                    </div>
-                    <select
-                        v-if="claudeModelHasList"
-                        class="model-select"
-                        v-model="currentClaudeModel"
-                        @change="onClaudeModelChange"
-                    >
-                        <option v-for="model in claudeModelOptions" :key="model" :value="model">{{ model }}</option>
-                    </select>
-                    <input
-                        v-else
-                        class="model-input"
-                        v-model="currentClaudeModel"
-                        @blur="onClaudeModelChange"
-                        @keyup.enter="onClaudeModelChange"
-                        placeholder="例如: claude-3-7-sonnet"
-                    >
-                    <div class="config-template-hint">
-                        模型修改后会自动保存并应用到当前配置。
-                    </div>
-                </div>
-                <div class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">配置健康检查</span>
-                    </div>
-                    <button class="btn-tool" @click="runHealthCheck" :disabled="healthCheckLoading || loading || !!initError">
-                        {{ healthCheckLoading ? '检查中...' : '运行检查' }}
-                    </button>
-                </div>
-                <div class="card-list">
-                    <div v-for="(config, name) in claudeConfigs" :key="name"
-                         :class="['card', { active: currentClaudeConfig === name }]"
-                         @click="applyClaudeConfig(name)">
-                        <div class="card-leading">
-                            <div class="card-icon">{{ name.charAt(0).toUpperCase() }}</div>
-                            <div class="card-content">
-                                <div class="card-title">{{ name }}</div>
-                                <div class="card-subtitle">{{ config.model || '未设置模型' }}</div>
-                            </div>
-                        </div>
-                        <div class="card-trailing">
-                            <span :class="['pill', config.hasKey ? 'configured' : 'empty']">
-                                {{ config.hasKey ? '已配置' : '未配置' }}
-                            </span>
-                            <span v-if="claudeSpeedResults[name]" :class="['latency', claudeSpeedResults[name].ok ? 'ok' : 'error']">
-                                {{ formatLatency(claudeSpeedResults[name]) }}
-                            </span>
-                            <div class="card-actions" @click.stop>
-                                <button class="card-action-btn" @click="openEditConfigModal(name)" title="编辑">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
-                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
-                                    </svg>
-                                </button>
-                                <button class="card-action-btn" :class="{ loading: claudeShareLoading[name] }" @click="copyClaudeShareCommand(name)" title="分享导入命令" aria-label="Share import command">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/>
-                                        <path d="M16 6l-4-4-4 4"/>
-                                        <path d="M12 2v14"/>
-                                    </svg>
-                                </button>
-                                <button class="card-action-btn delete" @click="deleteClaudeConfig(name)" title="删除">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M3 6h18"/>
-                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-                <!-- 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"/>
-                    </svg>
-                    添加 OpenClaw 配置
-                </button>
-                <div class="config-template-hint">
-                    默认应用到 <code>~/.openclaw/openclaw.json</code>。支持 JSON5（注释/尾逗号）。
-                </div>
-                <div class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">AGENTS.md</span>
-                    </div>
-                    <div class="config-template-hint">
-                        管理 OpenClaw Workspace 指令文件，默认读写 <code>~/.openclaw/workspace/AGENTS.md</code>。
-                    </div>
-                    <button class="btn-tool" @click="openOpenclawAgentsEditor" :disabled="loading || !!initError || agentsLoading">
-                        {{ agentsLoading ? '加载中...' : '打开 AGENTS.md 编辑器' }}
-                    </button>
-                </div>
-                <div class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">工作区文件</span>
-                    </div>
-                    <input
-                        class="form-input"
-                        v-model="openclawWorkspaceFileName"
-                        placeholder="例如: SOUL.md">
-                    <div class="config-template-hint">
-                        仅支持 OpenClaw Workspace 内的 <code>.md</code> 文件。
-                    </div>
-                    <button class="btn-tool" @click="openOpenclawWorkspaceEditor" :disabled="loading || !!initError || agentsLoading">
-                        {{ agentsLoading ? '加载中...' : '打开工作区文件' }}
-                    </button>
-                </div>
-                <div class="card-list">
-                    <div v-for="(config, name) in openclawConfigs" :key="name"
-                         :class="['card', { active: currentOpenclawConfig === name }]"
-                         @click="applyOpenclawConfig(name)">
-                        <div class="card-leading">
-                            <div class="card-icon">{{ name.charAt(0).toUpperCase() }}</div>
-                            <div class="card-content">
-                                <div class="card-title">{{ name }}</div>
-                                <div class="card-subtitle">{{ openclawSubtitle(config) }}</div>
-                            </div>
-                        </div>
-                        <div class="card-trailing">
-                            <span :class="['pill', openclawHasContent(config) ? 'configured' : 'empty']">
-                                {{ openclawHasContent(config) ? '已配置' : '未配置' }}
-                            </span>
-                            <div class="card-actions" @click.stop>
-                                <button class="card-action-btn" @click="openOpenclawEditModal(name)" title="编辑">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
-                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
-                                    </svg>
-                                </button>
-                                <button class="card-action-btn delete" @click="deleteOpenclawConfig(name)" title="删除">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M3 6h18"/>
-                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-                <!-- 会话浏览模式 -->
-                <div
-                    v-show="mainTab === 'sessions'"
-                    class="mode-content"
-                    id="panel-sessions"
-                    role="tabpanel"
-                    :aria-labelledby="'tab-sessions'">
-                <div v-if="sessionStandalone" class="session-standalone-page">
-                    <div v-if="sessionStandaloneLoading" class="state-message">
-                        加载中...
-                    </div>
-                    <div v-else-if="sessionStandaloneError" class="state-message error">
-                        {{ sessionStandaloneError }}
-                    </div>
-                    <div v-else>
-                        <div class="session-standalone-title">
-                            {{ sessionStandaloneTitle }}
-                            <span v-if="sessionStandaloneSourceLabel"> · {{ sessionStandaloneSourceLabel }}</span>
-                        </div>
-                        <pre class="session-standalone-text">{{ sessionStandaloneText }}</pre>
-                    </div>
-                </div>
-                <div v-else>
-                <div v-if="!sessionStandalone" class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">会话来源</span>
-                    </div>
-                    <div class="session-toolbar">
-                        <div class="session-toolbar-group">
-                            <select class="session-source-select" v-model="sessionFilterSource" @change="onSessionSourceChange" :disabled="sessionsLoading">
-                                <option value="codex">Codex</option>
-                                <option value="claude">Claude Code</option>
-                            </select>
-                            <select
-                                class="session-path-select"
-                                v-model="sessionPathFilter"
-                                @change="onSessionPathFilterChange"
-                                :disabled="sessionsLoading">
-                                <option value="">全部路径</option>
-                                <option v-for="cwd in sessionPathOptions" :key="cwd" :value="cwd">{{ cwd }}</option>
-                            </select>
-                        </div>
-                        <div class="session-toolbar-group session-toolbar-grow">
-                            <input
-                                class="session-query-input"
-                                v-model="sessionQuery"
-                                @keyup.enter="loadSessions"
-                                :disabled="sessionsLoading || !isSessionQueryEnabled"
-                                :placeholder="sessionQueryPlaceholder">
-                        </div>
-                        <div class="session-toolbar-group">
-                            <select
-                                class="session-role-select"
-                                v-model="sessionRoleFilter"
-                                @change="onSessionFilterChange"
-                                disabled>
-                                <option value="all">全部角色</option>
-                                <option value="user">仅 User</option>
-                                <option value="assistant">仅 Assistant</option>
-                                <option value="system">仅 System</option>
-                            </select>
-                            <select
-                                class="session-time-select"
-                                v-model="sessionTimePreset"
-                                @change="onSessionFilterChange"
-                                disabled>
-                                <option value="all">全部时间</option>
-                                <option value="7d">近 7 天</option>
-                                <option value="30d">近 30 天</option>
-                                <option value="90d">近 90 天</option>
-                            </select>
-                        </div>
-                        <div class="session-toolbar-group session-toolbar-actions">
-                            <button class="btn-tool" @click="loadSessions" :disabled="sessionsLoading">
-                                {{ sessionsLoading ? '刷新中...' : '刷新会话' }}
-                            </button>
-                            <button class="btn-tool" @click="clearSessionFilters" :disabled="sessionsLoading">
-                                清空筛选
-                            </button>
-                        </div>
-                    </div>
-                    <div class="session-toolbar-footer">
-                        <label class="quick-option">
-                            <input
-                                type="checkbox"
-                                v-model="sessionResumeWithYolo"
-                                @change="onSessionResumeYoloChange"
-                            >
-                            复制恢复命令附带 --yolo
-                        </label>
-                    </div>
-                </div>
-                <div v-if="!sessionStandalone && sessionsLoading" class="state-message">
-                    会话加载中...
-                </div>
-                <div v-else-if="!sessionStandalone && sessionsList.length === 0" class="session-empty">
-                    暂无可用会话记录
-                </div>
-                <div v-else :class="['session-layout', { 'session-standalone': sessionStandalone }]">
-                    <div v-if="!sessionStandalone" class="session-list">
-                        <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)">
-                            <div class="session-item-header">
-                                <div class="session-item-main">
-                                    <div class="session-item-title">{{ session.title || session.sessionId }}</div>
-                                </div>
-                                <div class="session-item-actions">
-                                    <button
-                                        v-if="isResumeCommandAvailable(session)"
-                                        class="session-item-copy"
-                                        @click.stop="copyResumeCommand(session)"
-                                        :disabled="sessionsLoading"
-                                        aria-label="复制恢复命令"
-                                        title="复制恢复命令">
-                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                            <rect x="8" y="8" width="12" height="12" rx="2"></rect>
-                                            <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"></path>
-                                        </svg>
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="session-item-meta">
-                                <span class="session-source">{{ session.sourceLabel }}</span>
-                                <span class="session-item-time">{{ session.updatedAt || 'unknown time' }}</span>
-                                <span class="session-count-pill">{{ session.messageCount || 0 }} 条</span>
-                            </div>
-                            <div v-if="session.match && session.match.hit" class="session-item-sub session-item-snippet">
-                                <span v-if="session.match.snippets && session.match.snippets.length">{{ session.match.snippets.join(' · ') }}</span>
-                                <span v-else>命中 {{ session.match.count || 1 }} 处</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div :class="['session-preview', { active: !!activeSession }]">
-                        <template v-if="activeSession">
-                            <div class="session-preview-scroll">
-                                <div class="session-preview-header">
-                                    <div>
-                                        <div class="session-preview-title">{{ activeSession.title || activeSession.sessionId }}</div>
-                                        <div class="session-preview-meta">
-                                            <span class="session-preview-meta-item">{{ activeSession.sourceLabel }}</span>
-                                            <span class="session-preview-meta-item">{{ activeSession.updatedAt || 'unknown time' }}</span>
-                                        </div>
-                                        <div class="session-preview-meta" v-if="activeSession.cwd">
-                                            <span class="session-preview-meta-item">{{ activeSession.cwd }}</span>
-                                        </div>
-                                    </div>
-                                    <div v-if="!sessionStandalone" class="session-actions">
-                                        <button class="btn-session-refresh" @click="loadActiveSessionDetail" :disabled="sessionDetailLoading || !activeSession">
-                                            {{ sessionDetailLoading ? '加载中...' : '刷新内容' }}
-                                        </button>
-                                        <button
-                                            v-if="isCloneAvailable(activeSession)"
-                                            class="btn-session-clone"
-                                            @click="cloneSession(activeSession)"
-                                            :disabled="!activeSession || sessionsLoading || sessionCloning[getSessionExportKey(activeSession)]">
-                                            {{ (activeSession && sessionCloning[getSessionExportKey(activeSession)]) ? '克隆中...' : '克隆会话' }}
-                                        </button>
-                                        <button
-                                            v-if="isDeleteAvailable(activeSession)"
-                                            class="btn-session-delete"
-                                            @click="deleteSession(activeSession)"
-                                            :disabled="!activeSession || sessionsLoading || sessionDeleting[getSessionExportKey(activeSession)]">
-                                            {{ (activeSession && sessionDeleting[getSessionExportKey(activeSession)]) ? '删除中...' : '删除会话' }}
-                                        </button>
-                                        <button
-                                            class="btn-session-export"
-                                            @click="exportSession(activeSession)"
-                                            :disabled="!activeSession || sessionExporting[getSessionExportKey(activeSession)]">
-                                            {{ (activeSession && sessionExporting[getSessionExportKey(activeSession)]) ? '导出中...' : '导出记录' }}
-                                        </button>
-                                        <button
-                                            v-if="!sessionStandalone"
-                                            class="btn-session-open"
-                                            @click="openSessionStandalone(activeSession)"
-                                            :disabled="!activeSession">
-                                            新页查看
-                                        </button>
-                                    </div>
-                                </div>
-                                <div v-if="sessionDetailLoading" class="session-preview-empty">
-                                    正在加载会话内容...
-                                </div>
-                                <div v-else-if="activeSessionDetailError" class="session-preview-empty">
-                                    {{ activeSessionDetailError }}
-                                </div>
-                                <div v-else-if="!activeSessionMessages.length" class="session-preview-empty">
-                                    当前会话暂无可展示消息
-                                </div>
-                                <div v-else class="session-preview-body">
-                                    <div v-if="activeSessionDetailClipped" class="session-item-sub session-item-wrap">
-                                        仅展示最近 {{ activeSessionMessages.length }} 条消息。
-                                    </div>
-                                    <div
-                                        v-for="(msg, idx) in activeSessionMessages"
-                                        :key="getRecordRenderKey(msg, idx)"
-                                        :class="['session-msg', msg.role === 'user' ? 'user' : (msg.role === 'system' ? 'system' : 'assistant')]">
-                                        <div class="session-msg-header">
-                                            <div class="session-msg-meta">
-                                                <span class="session-msg-role">{{ msg.role === 'user' ? 'User' : (msg.role === 'system' ? 'System' : 'Assistant') }}</span>
-                                                <span class="session-msg-time">{{ msg.timestamp || '' }}</span>
-                                            </div>
-                                        </div>
-                                        <div class="session-msg-content">{{ msg.text || '' }}</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </template>
-                    <div v-else class="session-preview-empty">
-                        <span v-if="sessionStandaloneError">{{ sessionStandaloneError }}</span>
-                        <span v-else>请先在左侧选择一个会话</span>
-                    </div>
-                </div>
-                </div>
-                </div>
-            </div>
-            <!-- 加载状态 -->
-            <div v-if="loading" class="state-message">
-                加载配置中...
-            </div>
-            <!-- 错误状态 -->
-            <div v-else-if="initError" class="state-message error">
-                {{ initError }}
-            </div>
-        </div>
-            </main>
-        </div>
-        <!-- 添加提供商模态框 -->
-        <div v-if="showAddModal" class="modal-overlay" @click.self="showAddModal = false">
-            <div class="modal">
-                <div class="modal-title">添加提供商</div>
-                <div class="form-group">
-                    <label class="form-label">名称</label>
-                    <input v-model="newProvider.name" class="form-input" placeholder="例如: myapi">
-                </div>
-                <div class="form-group">
-                    <label class="form-label">API 端点</label>
-                    <input v-model="newProvider.url" class="form-input" placeholder="https://api.example.com/v1">
-                </div>
-                <div class="form-group">
-                    <label class="form-label">认证密钥</label>
-                    <input v-model="newProvider.key" class="form-input" placeholder="sk-...">
-                </div>
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeAddModal">取消</button>
-                    <button class="btn btn-confirm" @click="addProvider">添加</button>
-                </div>
-            </div>
-        </div>
-        <!-- 编辑提供商模态框 -->
-        <div v-if="showEditModal" class="modal-overlay" @click.self="closeEditModal">
-            <div class="modal">
-                <div class="modal-title">编辑提供商</div>
-                <div class="form-group">
-                    <label class="form-label">名称</label>
-                    <input v-model="editingProvider.name" class="form-input" placeholder="提供商名称" readonly>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">API 端点</label>
-                    <input v-model="editingProvider.url" class="form-input" placeholder="https://api.example.com/v1">
-                </div>
-                <div class="form-group">
-                    <label class="form-label">认证密钥</label>
-                    <input v-model="editingProvider.key" class="form-input" placeholder="留空则保持不变">
-                    <div class="form-hint">留空表示不修改密钥</div>
-                </div>
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeEditModal">取消</button>
-                    <button class="btn btn-confirm" @click="updateProvider">保存</button>
-                </div>
-            </div>
-        </div>
-        <!-- 添加模型模态框 -->
-        <div v-if="showModelModal" class="modal-overlay" @click.self="showModelModal = false">
-            <div class="modal">
-                <div class="modal-title">添加模型</div>
-                <div class="form-group">
-                    <label class="form-label">模型名称</label>
-                    <input v-model="newModelName" class="form-input" placeholder="例如: gpt-5">
-                </div>
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeModelModal">取消</button>
-                    <button class="btn btn-confirm" @click="addModel">添加</button>
-                </div>
-            </div>
-        </div>
-        <!-- 模型列表模态框 -->
-        <div v-if="showModelListModal" class="modal-overlay" @click.self="showModelListModal = false">
-            <div class="modal">
-                <div class="modal-title">管理模型</div>
-                <div class="model-list">
-                    <div v-for="model in models" :key="model" class="model-item">
-                        <span>{{ model }}</span>
-                        <span class="btn-remove-model" @click="removeModel(model)">删除</span>
-                    </div>
-                </div>
-                <div class="btn-group">
-                    <button class="btn btn-confirm" @click="showModelListModal = false">关闭</button>
-                </div>
-            </div>
-        </div>
-        <!-- 添加Claude配置模态框 -->
-        <div v-if="showClaudeConfigModal" class="modal-overlay" @click.self="showClaudeConfigModal = false">
-            <div class="modal">
-                <div class="modal-title">添加 Claude Code 配置</div>
-                <div class="form-group">
-                    <label class="form-label">配置名称</label>
-                    <input v-model="newClaudeConfig.name" class="form-input" placeholder="例如: 智谱GLM">
-                </div>
-                <div class="form-group">
-                    <label class="form-label">API Key</label>
-                    <input v-model="newClaudeConfig.apiKey" class="form-input" placeholder="sk-ant-...">
-                </div>
-                <div class="form-group">
-                    <label class="form-label">Base URL</label>
-                    <input v-model="newClaudeConfig.baseUrl" class="form-input" placeholder="https://open.bigmodel.cn/api/anthropic">
-                </div>
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeClaudeConfigModal">取消</button>
-                    <button class="btn btn-confirm" @click="addClaudeConfig">添加</button>
-                </div>
-            </div>
-        </div>
-        <!-- 编辑Claude配置模态框 -->
-        <div v-if="showEditConfigModal" class="modal-overlay" @click.self="closeEditConfigModal">
-            <div class="modal">
-                <div class="modal-title">编辑 Claude Code 配置</div>
-                <div class="form-group">
-                    <label class="form-label">配置名称</label>
-                    <input v-model="editingConfig.name" class="form-input" placeholder="配置名称" readonly>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">API Key</label>
-                    <input v-model="editingConfig.apiKey" class="form-input" placeholder="sk-ant-...">
-                </div>
-                <div class="form-group">
-                    <label class="form-label">Base URL</label>
-                    <input v-model="editingConfig.baseUrl" class="form-input" placeholder="https://open.bigmodel.cn/api/anthropic">
-                </div>
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeEditConfigModal">取消</button>
-                    <button class="btn btn-confirm" @click="saveAndApplyConfig">保存并应用</button>
-                </div>
-            </div>
-        </div>
-        <div v-if="showOpenclawConfigModal" class="modal-overlay" @click.self="closeOpenclawConfigModal">
-            <div class="modal modal-wide">
-                <div class="modal-title">{{ openclawEditorTitle }}</div>
-                <div class="form-group">
-                    <label class="form-label">配置名称</label>
-                    <input v-model="openclawEditing.name" class="form-input" :readonly="openclawEditing.lockName" placeholder="例如: 默认配置">
-                </div>
-                <div class="form-group">
-                    <label class="form-label">目标文件</label>
-                    <div class="form-hint">
-                        {{ openclawConfigPath || '未加载' }}
-                        <span v-if="openclawConfigPath">
-                            （{{ openclawConfigExists ? '已存在' : '不存在，将在应用时创建' }}）
-                        </span>
-                    </div>
-                    <div class="btn-group" style="justify-content:flex-start;">
-                        <button class="btn btn-confirm secondary" @click="loadOpenclawConfigFromFile" :disabled="openclawFileLoading">
-                            {{ openclawFileLoading ? '加载中...' : '加载当前配置' }}
-                        </button>
-                    </div>
-                </div>
-                <div class="quick-section">
-                    <div class="quick-header">
-                        <div>
-                            <div class="quick-title">新手快速配置</div>
-                            <div class="form-hint">按 3 步完成：填 Provider 和模型，写入编辑器，保存并应用。</div>
-                        </div>
-                        <div class="quick-actions">
-                            <button class="btn-mini" @click="syncOpenclawQuickFromText">从编辑器读取</button>
-                            <button class="btn-mini" @click="resetOpenclawQuick">清空</button>
-                        </div>
-                    </div>
-                    <div class="quick-steps">
-                        <div class="quick-step"><span class="step-badge">1</span><span>填写 Provider 与模型</span></div>
-                        <div class="quick-step"><span class="step-badge">2</span><span>点击写入编辑器</span></div>
-                        <div class="quick-step"><span class="step-badge">3</span><span>保存并应用</span></div>
-                    </div>
-                    <div class="quick-grid">
-                        <div class="quick-card">
-                            <div class="structured-card-title">Provider</div>
-                            <div class="form-group">
-                                <label class="form-label">Provider 名称</label>
-                                <input v-model="openclawQuick.providerName" class="form-input" placeholder="例如: custom-myapi">
-                                <div class="form-hint">会拼成 provider/model 作为主模型标识。</div>
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">Base URL</label>
-                                <input v-model="openclawQuick.baseUrl" class="form-input" placeholder="https://api.example.com/v1">
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">API Key</label>
-                                <div class="list-row">
-                                    <input v-model="openclawQuick.apiKey" class="form-input" :type="openclawQuick.showKey ? 'text' : 'password'" placeholder="sk-...">
-                                    <button class="btn-mini" @click="toggleOpenclawQuickKey">
-                                        {{ openclawQuick.showKey ? '隐藏' : '显示' }}
-                                    </button>
-                                </div>
-                                <div class="form-hint">留空表示不覆盖现有 key。</div>
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">API 类型</label>
-                                <input v-model="openclawQuick.apiType" class="form-input" list="openclawApiTypeList" placeholder="例如: openai-responses">
-                                <datalist id="openclawApiTypeList">
-                                    <option value="openai-responses"></option>
-                                    <option value="openai-chat"></option>
-                                    <option value="anthropic"></option>
-                                    <option value="custom"></option>
-                                </datalist>
-                            </div>
-                        </div>
-                        <div class="quick-card">
-                            <div class="structured-card-title">模型</div>
-                            <div class="form-group">
-                                <label class="form-label">模型 ID</label>
-                                <input v-model="openclawQuick.modelId" class="form-input" placeholder="例如: gpt-4.1">
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">展示名称</label>
-                                <input v-model="openclawQuick.modelName" class="form-input" placeholder="留空则使用模型 ID">
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">上下文与最大输出</label>
-                                <div class="list-row">
-                                    <input v-model="openclawQuick.contextWindow" class="form-input" placeholder="上下文长度">
-                                    <input v-model="openclawQuick.maxTokens" class="form-input" placeholder="最大输出">
-                                </div>
-                                <div class="form-hint">留空表示不改动已有配置。</div>
-                            </div>
-                        </div>
-                        <div class="quick-card">
-                            <div class="structured-card-title">选项</div>
-                            <label class="quick-option">
-                                <input type="checkbox" v-model="openclawQuick.setPrimary">
-                                设为主模型
-                            </label>
-                            <label class="quick-option">
-                                <input type="checkbox" v-model="openclawQuick.overrideProvider">
-                                覆盖同名 Provider 基础信息
-                            </label>
-                            <label class="quick-option">
-                                <input type="checkbox" v-model="openclawQuick.overrideModels">
-                                覆盖同名模型列表
-                            </label>
-                            <div class="form-hint">关闭覆盖会只补空缺字段。</div>
-                        </div>
-                    </div>
-                    <div class="btn-group">
-                        <button class="btn btn-confirm" @click="applyOpenclawQuickToText">写入编辑器</button>
-                    </div>
-                </div>
-                <div class="structured-section">
-                    <div class="structured-header">
-                        <span class="structured-title">结构化配置（高级）</span>
-                        <span class="form-hint">写入编辑器会重排 JSON，注释可能丢失。</span>
-                    </div>
-                    <div class="structured-grid">
-                        <div class="structured-card">
-                            <div class="structured-card-title">Agents Defaults</div>
-                            <div class="form-group">
-                                <label class="form-label">主模型</label>
-                                <input v-model="openclawStructured.agentPrimary" class="form-input" placeholder="例如: provider/model">
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">备选模型</label>
-                                <div class="list-row" v-for="(item, index) in openclawStructured.agentFallbacks" :key="'fallback-' + index">
-                                    <input v-model="openclawStructured.agentFallbacks[index]" class="form-input" placeholder="例如: provider/model">
-                                    <button class="btn-mini delete" @click="removeOpenclawFallback(index)">删除</button>
-                                </div>
-                                <button class="btn-mini" @click="addOpenclawFallback">添加备选</button>
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">Workspace</label>
-                                <input v-model="openclawStructured.workspace" class="form-input" placeholder="例如: ~/.openclaw/workspace">
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">Timeout(s)</label>
-                                <input v-model="openclawStructured.timeout" class="form-input" placeholder="例如: 600">
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">Context Tokens</label>
-                                <input v-model="openclawStructured.contextTokens" class="form-input" placeholder="例如: 4096">
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">Max Concurrent</label>
-                                <input v-model="openclawStructured.maxConcurrent" class="form-input" placeholder="例如: 2">
-                            </div>
-                        </div>
-                        <div class="structured-card">
-                            <div class="structured-card-title">Env</div>
-                            <div class="form-group">
-                                <label class="form-label">环境变量</label>
-                                <div class="list-row" v-for="(item, index) in openclawStructured.envItems" :key="'env-' + index">
-                                    <input v-model="item.key" class="form-input" placeholder="KEY">
-                                    <input v-model="item.value" class="form-input" :type="item.show ? 'text' : 'password'" placeholder="VALUE">
-                                    <button class="btn-mini" @click="toggleOpenclawEnvItem(index)">
-                                        {{ item.show ? '隐藏' : '显示' }}
-                                    </button>
-                                    <button class="btn-mini delete" @click="removeOpenclawEnvItem(index)">删除</button>
-                                </div>
-                                <button class="btn-mini" @click="addOpenclawEnvItem">添加变量</button>
-                            </div>
-                        </div>
-                        <div class="structured-card">
-                            <div class="structured-card-title">Tools</div>
-                            <div class="form-group">
-                                <label class="form-label">Profile</label>
-                                <select v-model="openclawStructured.toolsProfile" class="form-input">
-                                    <option value="default">default</option>
-                                    <option value="strict">strict</option>
-                                    <option value="permissive">permissive</option>
-                                    <option value="custom">custom</option>
-                                </select>
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">Allow</label>
-                                <div class="list-row" v-for="(item, index) in openclawStructured.toolsAllow" :key="'allow-' + index">
-                                    <input v-model="openclawStructured.toolsAllow[index]" class="form-input" placeholder="例如: fs.read*">
-                                    <button class="btn-mini delete" @click="removeOpenclawToolsAllow(index)">删除</button>
-                                </div>
-                                <button class="btn-mini" @click="addOpenclawToolsAllow">添加 allow</button>
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">Deny</label>
-                                <div class="list-row" v-for="(item, index) in openclawStructured.toolsDeny" :key="'deny-' + index">
-                                    <input v-model="openclawStructured.toolsDeny[index]" class="form-input" placeholder="例如: net.*">
-                                    <button class="btn-mini delete" @click="removeOpenclawToolsDeny(index)">删除</button>
-                                </div>
-                                <button class="btn-mini" @click="addOpenclawToolsDeny">添加 deny</button>
-                            </div>
-                        </div>
-                        <div class="structured-card">
-                            <div class="structured-card-title">Providers（只读）</div>
-                            <div v-if="openclawProviders.length === 0" class="form-hint">
-                                未发现 providers 配置（可能使用内置 provider 或 auth profiles）。
-                            </div>
-                            <div v-else class="provider-list">
-                                <div class="provider-item" v-for="(provider, index) in openclawProviders" :key="provider.key + '-' + provider.source + '-' + index">
-                                    <div class="provider-header">
-                                        <span class="provider-name">{{ provider.key }}</span>
-                                        <span class="provider-source">来源: {{ provider.source }}</span>
-                                        <span v-if="provider.isActive" class="pill configured">使用中</span>
-                                    </div>
-                                    <div v-if="provider.fields.length === 0" class="form-hint">未配置字段</div>
-                                    <div v-else class="provider-fields">
-                                        <div class="provider-field" v-for="field in provider.fields" :key="provider.key + '-' + field.key">
-                                            <span class="provider-field-key">{{ field.key }}</span>
-                                            <span class="provider-field-value">{{ field.value }}</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div v-if="openclawMissingProviders.length" class="form-hint">
-                                使用中的 provider 未在配置中显示：{{ openclawMissingProviders.join(', ') }}。
-                            </div>
-                        </div>
-                        <div class="structured-card">
-                            <div class="structured-card-title">Agents（只读）</div>
-                            <div v-if="openclawAgentsList.length === 0" class="form-hint">
-                                未发现 agents.list 配置。
-                            </div>
-                            <div v-else class="agent-list">
-                                <div class="agent-item" v-for="(agent, index) in openclawAgentsList" :key="agent.key + '-' + index">
-                                    <div class="agent-header">
-                                        <span class="agent-name">{{ agent.name }}</span>
-                                        <span class="agent-id">ID: {{ agent.id }}</span>
-                                    </div>
-                                    <div class="agent-meta" v-if="agent.theme || agent.emoji || agent.avatar">
-                                        <span v-if="agent.theme">主题: {{ agent.theme }}</span>
-                                        <span v-if="agent.emoji">表情: {{ agent.emoji }}</span>
-                                        <span v-if="agent.avatar">头像: {{ agent.avatar }}</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="btn-group">
-                        <button class="btn btn-confirm secondary" @click="syncOpenclawStructuredFromText">从文本刷新</button>
-                        <button class="btn btn-confirm" @click="applyOpenclawStructuredToText">写入编辑器</button>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">OpenClaw 配置（JSON5）</label>
-                    <textarea
-                        v-model="openclawEditing.content"
-                        class="form-input template-editor"
-                        spellcheck="false"
-                        placeholder="在这里编辑 OpenClaw 配置（JSON5）"></textarea>
-                    <div class="template-editor-warning">
-                        保存仅写入本地配置库。点击“保存并应用”后会写入 openclaw.json。
-                    </div>
-                </div>
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeOpenclawConfigModal">取消</button>
-                    <button class="btn btn-confirm" @click="saveOpenclawConfig" :disabled="openclawSaving">
-                        {{ openclawSaving ? '保存中...' : '保存' }}
-                    </button>
-                    <button class="btn btn-confirm secondary" @click="saveAndApplyOpenclawConfig" :disabled="openclawApplying">
-                        {{ openclawApplying ? '应用中...' : '保存并应用' }}
-                    </button>
-                </div>
-            </div>
-        </div>
-        <div v-if="showConfigTemplateModal" class="modal-overlay" @click.self="closeConfigTemplateModal">
-            <div class="modal modal-wide">
-                <div class="modal-title">Config 模板编辑器（手动确认应用）</div>
-                <div class="form-group">
-                    <label class="form-label">config.toml 模板</label>
-                    <textarea
-                        v-model="configTemplateContent"
-                        class="form-input template-editor"
-                        spellcheck="false"
-                        placeholder="在这里编辑 config.toml 模板内容"></textarea>
-                    <div class="template-editor-warning">
-                        工具不会自动改动 `config.toml`。只有点击“确认应用模板”后才写入。
-                    </div>
-                </div>
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeConfigTemplateModal">取消</button>
-                    <button class="btn btn-confirm" @click="applyConfigTemplate" :disabled="configTemplateApplying">
-                        {{ configTemplateApplying ? '应用中...' : '确认应用模板' }}
-                    </button>
-                </div>
-            </div>
-        </div>
-        <div v-if="showAgentsModal" class="modal-overlay" @click.self="closeAgentsModal">
-            <div class="modal modal-wide">
-                <div class="modal-header">
-                    <div class="modal-title">{{ agentsModalTitle }}</div>
-                    <button
-                        class="btn-mini btn-modal-copy"
-                        @click="copyAgentsContent"
-                        :disabled="agentsLoading">
-                        复制
-                    </button>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">目标文件</label>
-                    <div class="form-hint">
-                        {{ agentsPath || '未加载' }}
-                        <span v-if="agentsPath">
-                            （{{ agentsExists ? '已存在' : '不存在，将在保存时创建' }}）
-                        </span>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">AGENTS.md 内容</label>
-                    <textarea
-                        v-model="agentsContent"
-                        class="form-input template-editor"
-                        spellcheck="false"
-                        :readonly="agentsLoading"
-                        placeholder="在这里编辑 AGENTS.md 内容"></textarea>
-                    <div class="template-editor-warning">
-                        {{ agentsModalHint }}
-                    </div>
-                </div>
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeAgentsModal">取消</button>
-                    <button class="btn btn-confirm" @click="applyAgentsContent" :disabled="agentsSaving || agentsLoading">
-                        {{ agentsSaving ? '保存中...' : '保存' }}
-                    </button>
-                </div>
-            </div>
-        </div>
-        <!-- Toast通知 -->
-        <!-- Toast -->
-        <div v-if="message" :class="['toast', messageType]">{{ message }}</div>
-    </div>
-    <script type="module" src="web-ui/app.js"></script>
-</body>
-</html>