npm - @ia-ccun/code-agent-claw - Versions diffs - 0.0.3 → 0.0.4 - Mend

@ia-ccun/code-agent-claw 0.0.3 → 0.0.4

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 (23) hide show

package/bin/cli.js +20 -0
package/dist/public/index.html +42 -21
package/package.json +1 -1
package/public/index.html +42 -21
package/package/.claude/plan/aicode-ui-npm.md +0 -477
package/package/README.md +0 -108
package/package/bin/cli.js +0 -16
package/package/config/default.json +0 -18
package/package/package.json +0 -43
package/package/public/aicode.svg +0 -1
package/package/public/index-v3.html +0 -1757
package/package/public/index.html +0 -1818
package/package/public/index_v3.html +0 -1757
package/package/public/juejin.css +0 -143
package/package/src/config.ts +0 -239
package/package/src/index.ts +0 -40
package/package/src/server/index.ts +0 -103
package/package/src/server/routes.ts +0 -342
package/package/src/server/websocket.ts +0 -82
package/package/src/services/agent-rpc.ts +0 -397
package/package/src/types/index.ts +0 -60
package/package/src/utils/logger.ts +0 -13
package/package/tsconfig.json +0 -19

package/package/public/index-v3.html DELETED Viewed

@@ -1,1757 +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>AICode Agent</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="juejin.css">
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <style>
-        /* ========================================
-           ANTHROPIC STYLE - AI Agent Console
-           Warm earth tones with terracotta accents
-        ======================================== */
-        :root {
-            /* Anthropic Design System - Warm earth palette */
-            --primary: #f0eee6;
-            --primary-light: #ffffff;
-            --primary-dark: #e8e6dc;
-            --secondary: #3d3d3a;
-            --accent: #d97757;
-            --accent-light: rgba(217, 119, 87, 0.15);
-            --muted: #b0aea5;
-            /* Backgrounds */
-            --bg-primary: #f0eee6;
-            --bg-secondary: #ffffff;
-            --bg-tertiary: #e8e6dc;
-            --bg-elevated: #ffffff;
-            --bg-hover: #e8e6dc;
-            --bg-code: #f5f4f0;
-            /* Borders */
-            --border-subtle: #e0e0dc;
-            --border-default: #d0cec5;
-            --border-active: #d97757;
-            /* Accent - terracotta */
-            --accent-primary: #d97757;
-            --accent-secondary: #c45d3d;
-            --accent-glow: rgba(217, 119, 87, 0.2);
-            --accent-subtle: rgba(217, 119, 87, 0.1);
-            /* Text */
-            --text-primary: #3d3d3a;
-            --text-secondary: #5a5a55;
-            --text-muted: #87867f;
-            --text-accent: #d97757;
-            /* Status colors */
-            --success: #4a9d6d;
-            --warning: #c9852d;
-            --error: #c94a4a;
-            /* Spacing */
-            --space-xs: 4px;
-            --space-sm: 8px;
-            --space-md: 12px;
-            --space-lg: 16px;
-            --space-xl: 24px;
-            --space-2xl: 32px;
-            /* Typography - Inter for clean readability */
-            --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-            --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
-            /* Effects */
-            --shadow-sm: 0 1px 3px rgba(61, 61, 58, 0.08);
-            --shadow-md: 0 4px 12px rgba(61, 61, 58, 0.1);
-            --shadow-glow: 0 0 20px var(--accent-glow);
-            --radius-sm: 6px;
-            --radius-md: 10px;
-            --radius-lg: 14px;
-            --radius-xl: 20px;
-        }
-        /* Dark theme - preserve dark aesthetic with terracotta accent */
-        body.dark {
-            --primary: #1a1a18;
-            --primary-light: #252523;
-            --primary-dark: #141413;
-            --secondary: #b0aea5;
-            --accent: #d97757;
-            --muted: #6a6a65;
-            --bg-primary: #141413;
-            --bg-secondary: #1a1a18;
-            --bg-tertiary: #222220;
-            --bg-elevated: #2a2a28;
-            --bg-hover: #323230;
-            --bg-code: #1e1e1c;
-            --border-subtle: #2a2a28;
-            --border-default: #3a3a38;
-            --text-primary: #f0eee6;
-            --text-secondary: #b0aea5;
-            --text-muted: #6a6a65;
-            --text-accent: #d97757;
-            --accent-glow: rgba(217, 119, 87, 0.25);
-            --accent-subtle: rgba(217, 119, 87, 0.12);
-        }
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-        body {
-            font-family: var(--font-display);
-            background: var(--bg-primary);
-            min-height: 100vh;
-            color: var(--text-primary);
-            line-height: 1.5;
-            -webkit-font-smoothing: antialiased;
-        }
-        /* Background texture - subtle warmth */
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background:
-                radial-gradient(ellipse at 0% 0%, var(--accent-subtle) 0%, transparent 60%),
-                radial-gradient(ellipse at 100% 100%, rgba(217, 119, 87, 0.05) 0%, transparent 50%);
-            pointer-events: none;
-            z-index: 0;
-        }
-        .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-            position: relative;
-            z-index: 1;
-        }
-        /* ========================================
-           HEADER
-        ======================================== */
-        .header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: var(--space-lg) var(--space-xl);
-            background: var(--bg-secondary);
-            border-bottom: 1px solid var(--border-subtle);
-            animation: slideDown 0.4s ease-out;
-        }
-        @keyframes slideDown {
-            from { opacity: 0; transform: translateY(-10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .header-left {
-            display: flex;
-            align-items: center;
-            gap: var(--space-md);
-        }
-        .logo {
-            display: flex;
-            align-items: center;
-            gap: var(--space-sm);
-        }
-        .logo-icon {
-            width: 32px;
-            height: 32px;
-            border-radius: var(--radius-md);
-            box-shadow: var(--shadow-glow);
-        }
-        .logo-text {
-            font-size: 1.25rem;
-            font-weight: 700;
-            letter-spacing: -0.02em;
-            background: linear-gradient(135deg, var(--text-primary) 60%, var(--accent-primary) 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .header-right {
-            display: flex;
-            align-items: center;
-            gap: var(--space-md);
-        }
-        /* 配置弹窗 */
-        .modal-overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.6);
-            z-index: 1000;
-            justify-content: center;
-            align-items: center;
-        }
-        .modal-overlay.show {
-            display: flex;
-        }
-        .modal {
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-default);
-            padding: 32px;
-            width: 90%;
-            max-width: 500px;
-            border-radius: 12px;
-        }
-        .modal h2 {
-            color: var(--text-primary);
-            font-size: 1.25rem;
-            margin-bottom: 16px;
-            padding-bottom: 16px;
-            border-bottom: 1px solid var(--border-subtle);
-        }
-        .modal .config-tips {
-            color: var(--text-secondary);
-            font-size: 0.8rem;
-            margin-top: 16px;
-            padding: 12px;
-            background: var(--bg-secondary);
-            border-radius: 6px;
-            border: 1px solid var(--border-subtle);
-        }
-        .modal .config-tips p {
-            margin-bottom: 8px;
-            color: var(--text-primary);
-        }
-        .modal .config-tips ul {
-            margin: 0;
-            padding-left: 20px;
-        }
-        .modal .config-tips li {
-            margin-bottom: 4px;
-            color: var(--text-secondary);
-        }
-        .modal .config-tips code {
-            background: var(--bg-tertiary);
-            padding: 2px 6px;
-            border-radius: 4px;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.75rem;
-            color: var(--accent-green);
-        }
-        .modal label .field-tip {
-            font-size: 0.7rem;
-            color: var(--text-muted);
-            font-weight: 400;
-            margin-left: 8px;
-        }
-        .modal .form-group {
-            margin-bottom: 16px;
-        }
-        .modal label {
-            display: block;
-            margin-bottom: 8px;
-            color: var(--text-secondary);
-            font-size: 0.75rem;
-            font-weight: 500;
-        }
-        .modal input[type="text"], .modal select {
-            width: 100%;
-            padding: 10px;
-            background: var(--bg-primary);
-            border: 1px solid var(--border-default);
-            border-radius: 6px;
-            font-size: 0.875rem;
-            color: var(--text-primary);
-        }
-        .modal input[type="text"]:focus, .modal select:focus {
-            outline: none;
-            border-color: var(--accent);
-        }
-        .modal input[type="checkbox"] {
-            margin-right: 8px;
-        }
-        .modal .btn-group {
-            display: flex;
-            gap: 12px;
-            margin-top: 24px;
-        }
-        .modal .btn-primary {
-            padding: 10px 20px;
-            background: var(--accent);
-            color: white;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-        }
-        .modal .btn-secondary {
-            padding: 10px 20px;
-            background: transparent;
-            border: 1px solid var(--border-default);
-            border-radius: 6px;
-            cursor: pointer;
-            color: var(--text-secondary);
-        }
-        .modal .error-message {
-            color: #ef4444;
-            font-size: 0.75rem;
-            margin-top: 8px;
-            display: none;
-        }
-        .modal .error-message.show {
-            display: block;
-        }
-        .modal .loading {
-            color: var(--text-muted);
-            font-size: 0.75rem;
-            margin-top: 8px;
-        }
-        /* Status indicator */
-        .status-badge {
-            display: flex;
-            align-items: center;
-            gap: var(--space-sm);
-            padding: var(--space-sm) var(--space-md);
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border-subtle);
-            border-radius: 20px;
-            font-size: 0.75rem;
-            color: var(--text-secondary);
-        }
-        .status-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: var(--text-muted);
-            transition: all 0.3s ease;
-        }
-        .status-dot.active {
-            background: var(--success);
-            box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
-            animation: pulse 2s ease-in-out infinite;
-        }
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.6; }
-        }
-        /* Action buttons */
-        .action-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: var(--radius-md);
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border-subtle);
-            color: var(--text-secondary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1rem;
-            transition: all 0.2s ease;
-        }
-        .action-btn:hover {
-            background: var(--bg-hover);
-            color: var(--text-primary);
-            border-color: var(--border-default);
-        }
-        .action-btn.active {
-            background: var(--accent-subtle);
-            border-color: var(--accent-primary);
-            color: var(--accent-primary);
-        }
-        /* ========================================
-           MAIN CONTENT - Two Panel Layout
-        ======================================== */
-        .main-content {
-            flex: 1;
-            display: grid;
-            grid-template-columns: 1fr 380px;
-            gap: 0;
-            min-height: 0;
-            overflow: hidden;
-        }
-        /* Left Panel - Messages */
-        .messages-panel {
-            display: flex;
-            flex-direction: column;
-            border-right: 1px solid var(--border-subtle);
-            animation: fadeIn 0.5s ease-out 0.1s both;
-            min-height: 0;
-            overflow-y: auto;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-        /* Tabs */
-        .panel-tabs {
-            display: flex;
-            gap: var(--space-xs);
-            padding: var(--space-md) var(--space-lg);
-            background: var(--bg-secondary);
-            border-bottom: 1px solid var(--border-subtle);
-        }
-        .panel-tab {
-            padding: var(--space-sm) var(--space-lg);
-            background: transparent;
-            border: none;
-            color: var(--text-muted);
-            font-family: var(--font-mono);
-            font-size: 0.75rem;
-            font-weight: 500;
-            cursor: pointer;
-            border-radius: var(--radius-sm);
-            transition: all 0.2s ease;
-            position: relative;
-        }
-        .panel-tab:hover {
-            color: var(--text-secondary);
-            background: var(--bg-hover);
-        }
-        .panel-tab.active {
-            color: var(--accent-primary);
-            background: var(--accent-subtle);
-        }
-        .panel-tab.active::after {
-            content: '';
-            position: absolute;
-            bottom: -13px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 20px;
-            height: 2px;
-            background: var(--accent-primary);
-            border-radius: 1px;
-        }
-        /* Panel content */
-        .panel-content {
-            flex: 1;
-            overflow-y: auto;
-            padding: var(--space-lg);
-            display: flex;
-            flex-direction: column;
-        }
-        .panel-content.hidden {
-            display: none;
-        }
-        /* Empty state */
-        .empty-state {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            color: var(--text-muted);
-            gap: var(--space-md);
-            padding: var(--space-2xl);
-            text-align: center;
-        }
-        .empty-logo {
-            width: 80px;
-            height: 80px;
-            margin-bottom: var(--space-lg);
-            opacity: 0.9;
-            animation: float 3s ease-in-out infinite;
-        }
-        @keyframes float {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-8px); }
-        }
-        .empty-title {
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: var(--text-primary);
-            margin-bottom: var(--space-sm);
-            letter-spacing: -0.02em;
-            overflow: hidden;
-            white-space: nowrap;
-            display: inline-block;
-            max-width: 320px;
-            animation:
-                typing 1.5s steps(17) forwards,
-                delete-typing 1.5s steps(17) 2s forwards,
-                show-again 0.3s steps(17) 3.5s forwards;
-        }
-        @keyframes typing {
-            from { max-width: 0; }
-            to { max-width: 320px; }
-        }
-        @keyframes delete-typing {
-            from { max-width: 320px; }
-            to { max-width: 0; }
-        }
-        @keyframes show-again {
-            from { max-width: 0; opacity: 0; }
-            to { max-width: 320px; opacity: 1; }
-        }
-        .empty-desc {
-            font-size: 0.875rem;
-            color: var(--text-secondary);
-            margin-bottom: var(--space-xl);
-            opacity: 0;
-            animation: fadeIn 0.5s ease 2.5s forwards;
-        }
-        .empty-features {
-            display: flex;
-            flex-direction: column;
-            gap: var(--space-md);
-            width: 100%;
-            max-width: 280px;
-            opacity: 0;
-            animation: fadeIn 0.5s ease 3s forwards;
-        }
-        .feature-item {
-            display: flex;
-            align-items: center;
-            gap: var(--space-md);
-            padding: var(--space-md) var(--space-lg);
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border-subtle);
-            border-radius: var(--radius-md);
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            transition: all 0.2s ease;
-        }
-        .feature-item:hover {
-            border-color: var(--accent-primary);
-            background: var(--accent-subtle);
-            transform: translateX(4px);
-        }
-        .feature-icon {
-            font-size: 1.1rem;
-            flex-shrink: 0;
-        }
-        .empty-hint {
-            margin-top: var(--space-xl);
-            font-size: 0.75rem;
-            color: var(--text-muted);
-            padding: var(--space-sm) var(--space-md);
-            background: var(--bg-tertiary);
-            border-radius: var(--radius-sm);
-            border: 1px dashed var(--border-default);
-            opacity: 0;
-            animation: fadeIn 0.5s ease 3.5s forwards;
-            text-align: center;
-        }
-        .empty-icon {
-            font-size: 3rem;
-            opacity: 0.3;
-        }
-        .empty-text {
-            font-size: 0.875rem;
-        }
-        /* Output items */
-        .output-item {
-            margin-bottom: var(--space-lg);
-            padding: var(--space-lg);
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-subtle);
-            border-radius: var(--radius-md);
-            animation: slideUp 0.3s ease-out;
-            max-width: 85%;
-        }
-        /* AI messages - left aligned */
-        .output-item.assistant {
-            align-self: flex-start;
-        }
-        /* User messages - right aligned */
-        .output-item.user {
-            align-self: flex-end;
-            margin-left: auto;
-            border-color: var(--accent-subtle);
-            background: var(--bg-tertiary);
-        }
-        @keyframes slideUp {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .output-item:hover {
-            border-color: var(--border-default);
-        }
-        .output-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: var(--space-md);
-            padding-bottom: var(--space-sm);
-            border-bottom: 1px solid var(--border-subtle);
-        }
-        .output-meta {
-            display: flex;
-            align-items: center;
-            gap: var(--space-sm);
-        }
-        .output-role {
-            font-family: var(--font-mono);
-            font-size: 0.7rem;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            padding: 2px 8px;
-            background: var(--bg-tertiary);
-            border-radius: var(--radius-sm);
-            color: var(--accent-primary);
-        }
-        .output-item.user .output-role {
-            color: var(--success);
-        }
-        .output-time {
-            font-family: var(--font-mono);
-            font-size: 0.65rem;
-            color: var(--text-muted);
-        }
-        .output-actions {
-            display: flex;
-            align-items: center;
-            gap: var(--space-xs);
-            opacity: 0;
-            transition: opacity 0.2s ease;
-        }
-        .output-item:hover .output-actions {
-            opacity: 1;
-        }
-        .copy-btn {
-            width: 22px;
-            height: 22px;
-            border-radius: var(--radius-sm);
-            background: transparent;
-            border: none;
-            color: var(--text-muted);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s ease;
-        }
-        .copy-btn:hover {
-            background: var(--accent-subtle);
-            color: var(--accent-primary);
-        }
-        .copy-btn.copied {
-            color: var(--success);
-        }
-        .copy-btn svg {
-            width: 14px;
-            height: 14px;
-        }
-        .output-content {
-            font-family: var(--font-mono);
-            font-size: 0.8rem;
-            line-height: 1.7;
-            color: var(--text-secondary);
-            white-space: pre-wrap;
-            word-break: break-word;
-        }
-        /* Event log */
-        .event-log {
-            font-family: var(--font-mono);
-            font-size: 0.7rem;
-        }
-        .event-item {
-            padding: var(--space-sm) 0;
-            border-bottom: 1px solid var(--border-subtle);
-            display: flex;
-            gap: var(--space-md);
-            animation: fadeIn 0.2s ease-out;
-        }
-        .event-time {
-            color: var(--text-muted);
-            flex-shrink: 0;
-        }
-        .event-type {
-            color: var(--accent-primary);
-            flex-shrink: 0;
-            min-width: 120px;
-        }
-        .event-data {
-            color: var(--text-muted);
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            max-width: 800px;
-            position: relative;
-            cursor: pointer;
-        }
-        .event-data:hover {
-            white-space: normal;
-            word-break: break-all;
-            max-width: 1200px;
-            background: var(--bg-tertiary);
-            padding: 4px 8px;
-            border-radius: var(--radius-sm);
-            margin: -4px -8px;
-        }
-        .event-actions {
-            display: none;
-            margin-left: auto;
-        }
-        .event-item:hover .event-actions {
-            display: flex;
-            gap: var(--space-xs);
-        }
-        .event-item {
-            padding: var(--space-sm) 0;
-            border-bottom: 1px solid var(--border-subtle);
-            display: flex;
-            gap: var(--space-md);
-            align-items: flex-start;
-            animation: fadeIn 0.2s ease-out;
-        }
-        /* ========================================
-           RIGHT PANEL - Input
-        ======================================== */
-        .input-panel {
-            display: flex;
-            flex-direction: column;
-            padding: var(--space-lg);
-            gap: var(--space-lg);
-            background: var(--bg-secondary);
-            animation: fadeIn 0.5s ease-out 0.2s both;
-            height: calc(100vh - 65px);
-            flex-shrink: 0;
-        }
-        /* Cards */
-        .card {
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border-subtle);
-            border-radius: var(--radius-md);
-            padding: var(--space-lg);
-            transition: all 0.2s ease;
-        }
-        .card:hover {
-            border-color: var(--border-default);
-        }
-        .card-title {
-            font-family: var(--font-mono);
-            font-size: 0.65rem;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.1em;
-            color: var(--text-muted);
-            margin-bottom: var(--space-md);
-            display: flex;
-            align-items: center;
-            gap: var(--space-sm);
-        }
-        .card-title::before {
-            content: '';
-            width: 8px;
-            height: 8px;
-            background: var(--accent-primary);
-            border-radius: 2px;
-        }
-        /* Quick questions */
-        .quick-questions {
-            display: flex;
-            flex-wrap: wrap;
-            gap: var(--space-sm);
-        }
-        .quick-question {
-            padding: var(--space-sm) var(--space-md);
-            background: var(--bg-elevated);
-            border: 1px solid var(--border-subtle);
-            border-radius: var(--radius-sm);
-            font-family: var(--font-mono);
-            font-size: 0.7rem;
-            color: var(--text-secondary);
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-        .quick-question:hover {
-            background: var(--accent-subtle);
-            border-color: var(--accent-primary);
-            color: var(--accent-primary);
-            transform: translateY(-1px);
-        }
-        /* Message type selector */
-        .msg-type-group {
-            display: flex;
-            flex-wrap: wrap;
-            gap: var(--space-xs);
-        }
-        .msg-type-group input[type="radio"] {
-            display: none;
-        }
-        .msg-type-group label {
-            padding: var(--space-sm) var(--space-md);
-            background: var(--bg-elevated);
-            border: 1px solid var(--border-subtle);
-            border-radius: var(--radius-sm);
-            font-family: var(--font-mono);
-            font-size: 0.7rem;
-            color: var(--text-secondary);
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-        .msg-type-group label:hover {
-            border-color: var(--border-default);
-            color: var(--text-primary);
-        }
-        .msg-type-group input[type="radio"]:checked + label {
-            background: var(--accent-subtle);
-            border-color: var(--accent-primary);
-            color: var(--accent-primary);
-        }
-        /* Type-specific colors */
-        #type-prompt:checked + label { border-color: var(--accent-primary); color: var(--accent-primary); }
-        #type-steer:checked + label { border-color: var(--warning); color: var(--warning); }
-        #type-follow:checked + label { border-color: var(--success); color: var(--success); }
-        #type-abort:checked + label { border-color: var(--error); color: var(--error); }
-        /* Input area */
-        .input-card {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            min-height: 200px;
-        }
-        .input-wrapper {
-            flex: 1;
-            position: relative;
-            display: flex;
-            flex-direction: column;
-        }
-        textarea {
-            flex: 1;
-            width: 100%;
-            padding: var(--space-md);
-            background: var(--bg-elevated);
-            border: 1px solid var(--border-subtle);
-            border-radius: var(--radius-md);
-            font-family: var(--font-mono);
-            font-size: 0.8rem;
-            color: var(--text-primary);
-            resize: none;
-            transition: all 0.2s ease;
-        }
-        textarea:focus {
-            outline: none;
-            border-color: var(--accent-primary);
-            box-shadow: 0 0 0 3px var(--accent-glow);
-        }
-        textarea::placeholder {
-            color: var(--text-muted);
-        }
-        .input-actions {
-            display: flex;
-            justify-content: flex-end;
-            margin-top: var(--space-md);
-        }
-        .btn-send {
-            padding: var(--space-sm) var(--space-xl);
-            background: var(--accent-primary);
-            border: none;
-            border-radius: var(--radius-md);
-            font-family: var(--font-mono);
-            font-size: 0.75rem;
-            font-weight: 600;
-            color: var(--bg-primary);
-            cursor: pointer;
-            transition: all 0.2s ease;
-            display: flex;
-            align-items: center;
-            gap: var(--space-sm);
-        }
-        .btn-send:hover {
-            background: var(--accent-secondary);
-            transform: translateY(-1px);
-            box-shadow: var(--shadow-glow);
-        }
-        .btn-send:disabled {
-            background: var(--bg-hover);
-            color: var(--text-muted);
-            cursor: not-allowed;
-            transform: none;
-            box-shadow: none;
-        }
-        /* Loading animation */
-        .loading {
-            display: inline-flex;
-            gap: 4px;
-        }
-        .loading span {
-            width: 6px;
-            height: 6px;
-            background: var(--accent-primary);
-            border-radius: 50%;
-            animation: bounce 1.4s infinite ease-in-out;
-        }
-        .loading span:nth-child(1) { animation-delay: -0.32s; }
-        .loading span:nth-child(2) { animation-delay: -0.16s; }
-        @keyframes bounce {
-            0%, 80%, 100% { transform: scale(0); }
-            40% { transform: scale(1); }
-        }
-        /* Cursor blink */
-        .cursor {
-            display: inline-block;
-            width: 2px;
-            height: 1em;
-            background: var(--accent-primary);
-            margin-left: 2px;
-            animation: blink 1s infinite;
-            vertical-align: text-bottom;
-        }
-        @keyframes blink {
-            0%, 50% { opacity: 1; }
-            51%, 100% { opacity: 0; }
-        }
-        /* Scrollbar */
-        ::-webkit-scrollbar {
-            width: 6px;
-        }
-        ::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: var(--border-default);
-            border-radius: 3px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: var(--text-muted);
-        }
-        /* Responsive */
-        @media (max-width: 900px) {
-            .main-content {
-                grid-template-columns: 1fr;
-                grid-template-rows: 1fr 1fr;
-            }
-            .messages-panel {
-                border-right: none;
-                border-bottom: 1px solid var(--border-subtle);
-            }
-        }
-    </style>
-</head>
-<body class="light">
-    <div class="container">
-        <!-- Header -->
-        <header class="header">
-            <div class="header-left">
-                <div class="logo">
-                    <img class="logo-icon" src="aicode.svg" alt="AICode">
-                    <span class="logo-text">AICode Agent</span>
-                </div>
-                <div class="status-badge">
-                    <div class="status-dot" id="statusDot"></div>
-                    <span id="statusText">Connecting...</span>
-                    <span id="clientCount" style="margin-left: 8px; color: var(--text-muted); font-size: 0.75rem;"></span>
-                </div>
-            </div>
-            <div class="header-right">
-                <button class="action-btn" id="wideBtn" onclick="toggleWide()" title="Toggle Width">
-                    <span id="wideIcon">⤢</span>
-                </button>
-                <button class="action-btn" onclick="openConfigModal()" title="Settings">
-                    <span>⚙</span>
-                </button>
-                <button class="action-btn" onclick="toggleTheme()" title="Toggle Theme">
-                    <span id="themeIcon">☀</span>
-                </button>
-            </div>
-        </header>
-        <!-- 配置弹窗 -->
-        <div class="modal-overlay" id="configModal">
-            <div class="modal">
-                <h2>Agent Configuration</h2>
-                <div class="form-group">
-                    <label>aicode Command Path</label>
-                    <input type="text" id="configCommand" placeholder="aicode">
-                </div>
-                <div class="form-group">
-                    <label>Provider</label>
-                    <select id="configProvider" onchange="onProviderChange()">
-                        <option value="">Select Provider</option>
-                    </select>
-                </div>
-                <div class="form-group">
-                    <label>Model</label>
-                    <select id="configModel">
-                        <option value="">Select Model</option>
-                    </select>
-                </div>
-                <div class="form-group">
-                    <label>
-                        <input type="checkbox" id="configNoSession" checked>
-                        No Session Mode
-                    </label>
-                </div>
-                <div class="form-group">
-                    <label>Session Directory</label>
-                    <input type="text" id="configSessionDir" placeholder="~/.aicode-cli/agent/sessions">
-                </div>
-                <div class="form-group">
-                    <label>Working Directory</label>
-                    <input type="text" id="configWorkingDir" placeholder="~/.aicode-cli">
-                </div>
-                <div class="error-message" id="configError"></div>
-                <div class="loading" id="configLoading" style="display: none;">Initializing agent...</div>
-                <div class="btn-group">
-                    <button class="btn-primary" onclick="saveConfig()">Initialize</button>
-                    <button class="btn-secondary" onclick="closeConfigModal()">Cancel</button>
-                </div>
-                <div class="config-tips">
-                    <p>💡 提示：</p>
-                    <ul>
-                        <li>Provider/Model 参考 <code>~/.aicode-cli/agent/models.json</code></li>
-                        <li>Command 路径可用 <code>whereis aicode</code> 获取</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <!-- Main Content -->
-        <main class="main-content">
-            <!-- Left Panel: Messages -->
-            <section class="messages-panel">
-                <div class="panel-tabs">
-                    <button class="panel-tab active" onclick="switchMsgTab('response')">Response</button>
-                    <button class="panel-tab" onclick="switchMsgTab('events')">Events</button>
-                </div>
-                <!-- Response Tab -->
-                <div id="responseTab" class="panel-content">
-                    <div class="empty-state" id="emptyState">
-                        <img class="empty-logo" src="aicode.svg" alt="AICode">
-                        <div class="empty-title">你好，我是 AICode Agent</div>
-                        <div class="empty-desc">我可以帮助你完成以下任务：</div>
-                        <div class="empty-features">
-                            <div class="feature-item"><span class="feature-icon">📝</span> 代码编写与调试</div>
-                            <div class="feature-item"><span class="feature-icon">🔍</span> 代码审查与优化</div>
-                            <div class="feature-item"><span class="feature-icon">💡</span> 技术问题解答</div>
-                            <div class="feature-item"><span class="feature-icon">🔄</span> Git 操作辅助</div>
-                        </div>
-                        <div class="empty-hint">在右侧输入框中输入你的问题或任务</div>
-                    </div>
-                </div>
-                <!-- Events Tab -->
-                <div id="eventsTab" class="panel-content hidden">
-                    <div class="event-log" id="eventLog">
-                        <div class="empty-state">
-                            <div class="empty-text">No events yet</div>
-                        </div>
-                    </div>
-                </div>
-            </section>
-            <!-- Right Panel: Input -->
-            <aside class="input-panel">
-                <!-- Quick Questions Card -->
-                <div class="card">
-                    <div class="card-title">Quick Commands</div>
-                    <div class="quick-questions">
-                        <span class="quick-question" onclick="setPrompt('你好，请介绍一下你自己')">👋 自我介绍</span>
-                        <span class="quick-question" onclick="setPrompt('帮我写一个 Hello World')">Hello World</span>
-                        <span class="quick-question" onclick="setPrompt('解释什么是 RPC 协议')">RPC 协议</span>
-                        <span class="quick-question" onclick="setPrompt('介绍下你的技能')">你有哪些技能</span>
-                    </div>
-                </div>
-                <!-- Message Type Card -->
-                <div class="card">
-                    <div class="card-title">Message Type</div>
-                    <div class="msg-type-group">
-                        <input type="radio" id="type-prompt" name="msgType" value="prompt" checked onchange="onMsgTypeChange()">
-                        <label for="type-prompt">Prompt</label>
-                        <input type="radio" id="type-steer" name="msgType" value="steer" onchange="onMsgTypeChange()">
-                        <label for="type-steer">Steer</label>
-                        <input type="radio" id="type-follow" name="msgType" value="follow_up" onchange="onMsgTypeChange()">
-                        <label for="type-follow">Follow</label>
-                        <input type="radio" id="type-abort" name="msgType" value="abort" onchange="onMsgTypeChange()">
-                        <label for="type-abort">Abort</label>
-                    </div>
-                </div>
-                <!-- Input Card -->
-                <div class="card input-card">
-                    <div class="card-title">Input</div>
-                    <div class="input-wrapper">
-                        <textarea id="promptInput" placeholder="Enter your message..." onkeydown="handleKeyDown(event)"></textarea>
-                    </div>
-                    <div class="input-actions">
-                        <button class="btn-send" onclick="sendPrompt()" id="sendBtn">
-                            <span>Send</span>
-                            <span>↵</span>
-                        </button>
-                    </div>
-                </div>
-            </aside>
-        </main>
-    </div>
-    <script>
-        const API_BASE = '';
-        let messages = [];
-        // Configure marked
-        marked.setOptions({
-            breaks: true,
-            gfm: true
-        });
-        let isStreaming = false;
-        let lastRenderTime = 0;
-        const RENDER_THROTTLE = 100;
-        let events = [];
-        // Initialize
-        window.onload = function() {
-            checkStatus();
-            connectWebSocket();
-            setInterval(checkStatus, 30000);
-            document.getElementById('promptInput').focus();
-        };
-        // Toggle theme
-        function toggleTheme() {
-            document.body.classList.toggle('light');
-            const icon = document.getElementById('themeIcon');
-            icon.textContent = document.body.classList.contains('light') ? '☾' : '☀';
-        }
-        // Toggle width
-        function toggleWide() {
-            document.body.classList.toggle('wide');
-            const container = document.querySelector('.container');
-            if (document.body.classList.contains('wide')) {
-                container.style.maxWidth = '100%';
-            } else {
-                container.style.maxWidth = '1400px';
-            }
-            document.getElementById('wideBtn').classList.toggle('active');
-        }
-        // 全局变量存储 providers 数据
-        let availableProviders = [];
-        // 打开配置弹窗
-        async function openConfigModal() {
-            const modal = document.getElementById('configModal');
-            const errorEl = document.getElementById('configError');
-            errorEl.classList.remove('show');
-            try {
-                const res = await fetch('/api/aicode/config');
-                const data = await res.json();
-                if (data.success && data.data) {
-                    const config = data.data.config;
-                    const models = data.data.models;
-                    // 填充 providers 下拉框
-                    const providerSelect = document.getElementById('configProvider');
-                    providerSelect.innerHTML = '<option value="">Select Provider</option>';
-                    if (models && models.providers) {
-                        availableProviders = models.providers;
-                        models.providers.forEach(p => {
-                            const option = document.createElement('option');
-                            option.value = p.id;
-                            option.textContent = p.name || p.id;
-                            providerSelect.appendChild(option);
-                        });
-                    }
-                    // 设置当前值
-                    document.getElementById('configCommand').value = config.command || '';
-                    document.getElementById('configNoSession').checked = config.noSession !== false;
-                    document.getElementById('configSessionDir').value = config.sessionDir || '~/.aicode-cli/agent/sessions';
-                    document.getElementById('configWorkingDir').value = config.workingDir || '~/.aicode-cli';
-                    // 选择 provider 后填充 models
-                    if (config.provider) {
-                        providerSelect.value = config.provider;
-                        onProviderChange();
-                        // 选择 model
-                        if (config.model) {
-                            document.getElementById('configModel').value = config.model;
-                        }
-                    }
-                }
-            } catch (e) {
-                document.getElementById('configCommand').value = '';
-                document.getElementById('configProvider').innerHTML = '<option value="minimax-custom">minimax-custom</option>';
-                document.getElementById('configModel').innerHTML = '<option value="MiniMax-M2.5">MiniMax-M2.5</option>';
-                document.getElementById('configNoSession').checked = true;
-                document.getElementById('configSessionDir').value = '~/.aicode-cli/agent/sessions';
-                document.getElementById('configWorkingDir').value = '~/.aicode-cli';
-            }
-            modal.classList.add('show');
-        }
-        // Provider 变化时更新 Model 下拉框
-        function onProviderChange() {
-            const providerId = document.getElementById('configProvider').value;
-            const modelSelect = document.getElementById('configModel');
-            modelSelect.innerHTML = '<option value="">Select Model</option>';
-            if (providerId && availableProviders) {
-                const provider = availableProviders.find(p => p.id === providerId);
-                if (provider && provider.models) {
-                    provider.models.forEach(m => {
-                        const option = document.createElement('option');
-                        option.value = m.id;
-                        option.textContent = m.name || m.id;
-                        modelSelect.appendChild(option);
-                    });
-                }
-            }
-        }
-        // 关闭配置弹窗
-        function closeConfigModal() {
-            document.getElementById('configModal').classList.remove('show');
-        }
-        // 保存配置并初始化
-        async function saveConfig() {
-            const errorEl = document.getElementById('configError');
-            const loadingEl = document.getElementById('configLoading');
-            const config = {
-                command: document.getElementById('configCommand').value || 'aicode',
-                provider: document.getElementById('configProvider').value || 'minimax-custom',
-                model: document.getElementById('configModel').value || 'MiniMax-M2.5',
-                noSession: document.getElementById('configNoSession').checked,
-                sessionDir: document.getElementById('configSessionDir').value || '~/.aicode-cli/agent/sessions',
-                workingDir: document.getElementById('configWorkingDir').value || '~/.aicode-cli'
-            };
-            errorEl.classList.remove('show');
-            loadingEl.style.display = 'block';
-            try {
-                const res = await fetch('/api/aicode/config', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(config)
-                });
-                const data = await res.json();
-                if (data.success) {
-                    closeConfigModal();
-                    checkStatus();
-                    connectWebSocket();
-                } else {
-                    errorEl.textContent = data.message || 'Failed to initialize agent';
-                    errorEl.classList.add('show');
-                }
-            } catch (e) {
-                errorEl.textContent = 'Request failed: ' + e.message;
-                errorEl.classList.add('show');
-            } finally {
-                loadingEl.style.display = 'none';
-            }
-        }
-        // 检查状态
-        async function checkStatus() {
-            try {
-                const res = await fetch('/api/aicode/status');
-                const data = await res.json();
-                const statusDot = document.getElementById('statusDot');
-                const statusText = document.getElementById('statusText');
-                if (data.success && data.data && data.data.running) {
-                    statusDot.classList.add('active');
-                    statusText.textContent = 'Connected';
-                } else {
-                    statusDot.classList.remove('active');
-                    statusText.textContent = 'Not Connected';
-                    openConfigModal();
-                }
-            } catch (e) {
-                console.error('Check status error:', e);
-            }
-        }
-        // 初始化时检查状态
-        checkStatus();
-        // Switch message tab
-        function switchMsgTab(tab) {
-            document.querySelectorAll('.panel-tab').forEach(t => t.classList.remove('active'));
-            document.querySelector(`.panel-tab[onclick="switchMsgTab('${tab}')"]`).classList.add('active');
-            document.getElementById('responseTab').classList.toggle('hidden', tab !== 'response');
-            document.getElementById('eventsTab').classList.toggle('hidden', tab !== 'events');
-        }
-        // Check health
-        async function checkHealth() {
-            try {
-                const res = await fetch(`${API_BASE}/api/aicode/health`);
-                const data = await res.json();
-                const statusDot = document.getElementById('statusDot');
-                const statusText = document.getElementById('statusText');
-                if (data.running) {
-                    statusDot.classList.add('active');
-                    statusText.textContent = 'Connected';
-                } else {
-                    statusDot.classList.remove('active');
-                    statusText.textContent = 'Disconnected';
-                }
-            } catch (e) {
-                document.getElementById('statusText').textContent = 'Error';
-            }
-        }
-        // Get message type
-        function getMsgType() {
-            return document.querySelector('input[name="msgType"]:checked').value;
-        }
-        // On message type change
-        function onMsgTypeChange() {
-            const msgType = getMsgType();
-            const input = document.getElementById('promptInput');
-            const placeholder = {
-                'prompt': 'Enter your message...',
-                'steer': 'Enter steer message (interrupts current operation)...',
-                'follow_up': 'Enter follow-up message...',
-                'abort': 'Confirm abort?'
-            };
-            input.placeholder = placeholder[msgType] || 'Enter your message...';
-            if (msgType === 'abort') {
-                input.value = '';
-                input.disabled = true;
-            } else {
-                input.disabled = false;
-            }
-        }
-        // Set prompt
-        function setPrompt(text) {
-            document.getElementById('promptInput').value = text;
-            document.getElementById('promptInput').focus();
-        }
-        // Handle key down
-        function handleKeyDown(event) {
-            if (event.key === 'Enter' && !event.shiftKey) {
-                event.preventDefault();
-                sendPrompt();
-            }
-        }
-        // Send prompt
-        async function sendPrompt() {
-            const msgType = getMsgType();
-            const input = document.getElementById('promptInput');
-            const message = input.value.trim();
-            if (msgType !== 'abort' && !message) return;
-            if (isStreaming) return;
-            // Add user message
-            const displayMsg = msgType === 'abort' ? '[Abort]' : message;
-            addMessage('user', `[${msgType}] ${displayMsg}`);
-            // Add AI placeholder
-            addMessage('assistant', '');
-            if (msgType !== 'abort') {
-                input.value = '';
-            }
-            isStreaming = true;
-            setButtonsDisabled(true);
-            try {
-                let endpoint = `${API_BASE}/api/aicode/${msgType}`;
-                const res = await fetch(endpoint, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: msgType === 'abort' ? JSON.stringify({}) : JSON.stringify({ message })
-                });
-                const data = await res.json();
-                if (!data.success) {
-                    updateLastMessage(`Error: ${data.message}`, false);
-                } else if (msgType === 'abort') {
-                    updateLastMessage('✓ Abort command sent', false);
-                }
-            } catch (e) {
-                updateLastMessage(`Request failed: ${e.message}`, false);
-            }
-            isStreaming = false;
-            setButtonsDisabled(false);
-        }
-        // Add message
-        function addMessage(role, content) {
-            messages.push({
-                role: role,
-                content: content,
-                time: new Date().toLocaleTimeString()
-            });
-            renderMessages();
-        }
-        // Render messages
-        function renderMessages() {
-            const section = document.getElementById('responseTab');
-            const empty = document.getElementById('emptyState');
-            const existingEmpty = section.querySelector('#emptyState');
-            section.innerHTML = '';
-            if (existingEmpty) {
-                section.appendChild(existingEmpty);
-            } else {
-                section.appendChild(empty);
-            }
-            if (messages.length === 0) {
-                empty.style.display = 'flex';
-                return;
-            }
-            empty.style.display = 'none';
-            messages.forEach((msg, index) => {
-                const div = document.createElement('div');
-                div.className = `output-item ${msg.role}`;
-                div.dataset.index = index;
-                const roleLabel = msg.role === 'user' ? 'You' : 'AI';
-                div.innerHTML = `
-                    <div class="output-header">
-                        <div class="output-meta">
-                            <span class="output-role">${roleLabel}</span>
-                            <span class="output-time">${msg.time}</span>
-                        </div>
-                        <div class="output-actions">
-                            <button class="copy-btn" onclick="copyMessage(this, '${msg.role}')" title="Copy">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                    <pre class="output-content">${escapeHtml(msg.content)}</pre>
-                `;
-                section.appendChild(div);
-            });
-            scrollToBottom();
-        }
-        // Update last message
-        function updateLastMessage(content, showCursor = false) {
-            const section = document.getElementById('responseTab');
-            const msgElements = section.querySelectorAll('.output-item.assistant');
-            if (msgElements.length === 0) return;
-            const lastMsg = msgElements[msgElements.length - 1];
-            const outputContent = lastMsg.querySelector('.output-content');
-            if (outputContent) {
-                outputContent.innerHTML = escapeHtml(content) + (showCursor ? '<span class="cursor"></span>' : '');
-                scrollToBottom();
-            }
-        }
-        // Scroll to bottom
-        function scrollToBottom() {
-            const section = document.getElementById('responseTab');
-            section.scrollTop = section.scrollHeight;
-        }
-        // Escape HTML
-        function escapeHtml(text) {
-            const div = document.createElement('div');
-            div.textContent = text;
-            return div.innerHTML;
-        }
-        // Copy message to clipboard
-        function copyMessage(btn, role) {
-            const outputItem = btn.closest('.output-item');
-            const content = outputItem.querySelector('.output-content').textContent;
-            navigator.clipboard.writeText(content).then(() => {
-                btn.classList.add('copied');
-                btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <polyline points="20 6 9 17 4 12"></polyline>
-                </svg>`;
-                setTimeout(() => {
-                    btn.classList.remove('copied');
-                    btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-                    </svg>`;
-                }, 1500);
-            });
-        }
-        // Set buttons disabled
-        function setButtonsDisabled(disabled) {
-            document.getElementById('sendBtn').disabled = disabled;
-        }
-        // Add event to log
-        function addEvent(type, data) {
-            events.push({
-                type: type,
-                data: data,
-                time: new Date().toLocaleTimeString()
-            });
-            // 只保留最后 40 个
-            if (events.length > 40) {
-                events = events.slice(-40);
-            }
-            renderEvents();
-        }
-        // Render events (倒序显示，最新的在最上方)
-        function renderEvents() {
-            const log = document.getElementById('eventLog');
-            if (events.length === 0) {
-                log.innerHTML = '<div class="empty-state"><div class="empty-text">No events yet</div></div>';
-                return;
-            }
-            // 倒序显示
-            const reversedEvents = [...events].reverse();
-            log.innerHTML = reversedEvents.map((evt, index) => {
-                const fullData = JSON.stringify(evt.data);
-                const shortData = fullData.substring(0, 300);
-                return `
-                    <div class="event-item">
-                        <span class="event-time">${evt.time}</span>
-                        <span class="event-type">${evt.type}</span>
-                        <span class="event-data" data-full="${escapeHtml(fullData)}">${escapeHtml(shortData)}</span>
-                        <div class="event-actions">
-                            <button class="copy-btn" onclick="copyEventData(this, ${index})" title="Copy">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                `;
-            }).join('');
-            scrollToBottom();
-        }
-        // Copy event data (倒序后需要反向计算索引)
-        function copyEventData(btn, index) {
-            const actualIndex = events.length - 1 - index;
-            const evt = events[actualIndex];
-            const fullData = JSON.stringify(evt.data, null, 2);
-            navigator.clipboard.writeText(fullData).then(() => {
-                btn.classList.add('copied');
-                btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <polyline points="20 6 9 17 4 12"></polyline>
-                </svg>`;
-                setTimeout(() => {
-                    btn.classList.remove('copied');
-                    btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-                    </svg>`;
-                }, 1500);
-            });
-        }
-        // WebSocket
-        let ws;
-        function connectWebSocket() {
-            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-            const wsUrl = `${protocol}//${window.location.host}/ws/agent`;
-            ws = new WebSocket(wsUrl);
-            ws.onmessage = (event) => {
-                try {
-                    const data = JSON.parse(event.data);
-                    // 处理客户端连接数消息
-                    if (data.type === 'client_count') {
-                        document.getElementById('clientCount').textContent = `Clients: ${data.count}`;
-                        return;
-                    }
-                    handleEvent(data);
-                } catch (e) {
-                    console.error('Parse error:', e);
-                }
-            };
-            ws.onclose = () => {
-                setTimeout(connectWebSocket, 3000);
-            };
-        }
-        // Handle event
-        function handleEvent(event) {
-            addEvent(event.type, event);
-            if (event.type === 'message_update' && event.messageType === 'text_delta') {
-                let lastMsg = messages[messages.length - 1];
-                if (!lastMsg || lastMsg.role !== 'assistant') {
-                    messages.push({ role: 'assistant', content: '', time: new Date().toLocaleTimeString() });
-                    lastMsg = messages[messages.length - 1];
-                }
-                lastMsg.content += event.delta;
-                const now = Date.now();
-                if (now - lastRenderTime > RENDER_THROTTLE) {
-                    lastRenderTime = now;
-                    updateLastMessage(lastMsg.content, true);
-                }
-            } else if (event.type === 'agent_end') {
-                const lastMsg = messages[messages.length - 1];
-                if (lastMsg && lastMsg.role === 'assistant') {
-                    if (event.usage) {
-                        lastMsg.content += `\n\nTokens: ${event.usage.completionTokens || 0} (completion) / ${event.usage.promptTokens || 0} (prompt)`;
-                    }
-                    updateLastMessage(lastMsg.content, false);
-                }
-            }
-        }
-    </script>
-</body>
-</html>