223-template-240
/
blank
برگرفته از 137-template-113/blank


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCP 助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .chat-container {
            height: calc(100vh - 200px);
        }

        /* 移动端优化 */
        @media (max-width: 768px) {
            .chat-container {
                height: calc(100vh - 180px);
            }

            /* 头部固定 */
            header {
                position: sticky;
                top: 0;
                z-index: 50;
            }

            /* 消息气泡宽度 */
            .message-bubble {
                max-width: 85vw !important;
            }

            /* 输入区域固定 */
            .input-area {
                position: sticky;
                bottom: 0;
                z-index: 50;
                background: white;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }
        }

        /* 参数/结果可折叠区域 */
        .collapsible-section {
            margin-top: 6px;
        }

        .collapsible-header {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            color: #9ca3af;
            user-select: none;
        }

        .collapsible-header:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        .collapsible-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        .collapsible-content.expanded {
            max-height: 300px;
            overflow-y: auto;
        }

        .collapsible-icon {
            transition: transform 0.3s;
            font-size: 10px;
        }

        .collapsible-icon.expanded {
            transform: rotate(90deg);
        }

        /* MCP 服务器横向滚动 */
        .mcp-servers-scroll {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 4px 0;
            scrollbar-width: thin;
            -webkit-overflow-scrolling: touch;
        }

        .mcp-servers-scroll::-webkit-scrollbar {
            height: 4px;
        }

        .mcp-servers-scroll::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 2px;
        }

        .mcp-server-tag {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 12px;
            white-space: nowrap;
        }

        .mcp-server-tag.enabled {
            background: #d1fae5;
            color: #065f46;
        }

        .mcp-server-tag.disabled {
            background: #f3f4f6;
            color: #6b7280;
        }

        .mcp-status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .mcp-status-dot.online {
            background: #10b981;
        }

        .mcp-status-dot.offline {
            background: #9ca3af;
        }
        .message-user {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .message-assistant {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }
        .typing-indicator span {
            animation: bounce 1.4s infinite ease-in-out both;
        }
        .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
        .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
        @keyframes bounce {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }

        /* 工具调用面板样式 */
        .tool-call-panel {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border-radius: 8px;
            margin: 12px 0;
            overflow: hidden;
            border: 1px solid #3a3a5a;
        }

        .tool-panel-header {
            background: rgba(255, 255, 255, 0.05);
            padding: 10px 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: background 0.2s;
        }

        .tool-panel-header:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        .tool-panel-title {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #e0e0e0;
            font-size: 13px;
            font-weight: 500;
        }

        .tool-panel-content {
            padding: 0;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, padding 0.3s ease-out;
        }

        .tool-panel-content.collapsed {
            max-height: 0;
        }

        .tool-panel-content.expanded {
            max-height: 800px;
            padding: 12px;
            overflow-y: auto;
        }

        .tool-panel-content::-webkit-scrollbar {
            width: 6px;
        }

        .tool-panel-content::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .tool-panel-content::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
        }

        /* 工具调用项样式 */
        .tool-call-item {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 6px;
            padding: 10px 12px;
            margin-bottom: 8px;
            border-left: 3px solid #555;
            transition: all 0.2s;
        }

        .tool-call-item:last-child {
            margin-bottom: 0;
        }

        .tool-call-item.pending {
            border-left-color: #f59e0b;
            animation: pulse-border 1.5s infinite;
        }

        .tool-call-item.success {
            border-left-color: #10b981;
        }

        .tool-call-item.error {
            border-left-color: #ef4444;
        }

        @keyframes pulse-border {
            0%, 100% { border-left-color: #f59e0b; }
            50% { border-left-color: #fbbf24; }
        }

        .tool-call-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px;
        }

        .tool-name {
            color: #e0e0e0;
            font-size: 13px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .tool-status {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 500;
        }

        .tool-status.pending {
            background: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
        }

        .tool-status.success {
            background: rgba(16, 185, 129, 0.2);
            color: #34d399;
        }

        .tool-status.error {
            background: rgba(239, 68, 68, 0.2);
            color: #f87171;
        }

        .tool-params {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 4px;
            padding: 8px;
            margin-top: 6px;
            font-size: 11px;
            color: #9ca3af;
            overflow-x: auto;
        }

        .tool-params::-webkit-scrollbar {
            height: 4px;
        }

        .tool-params::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 2px;
        }

        .tool-result {
            background: rgba(16, 185, 129, 0.1);
            border-radius: 4px;
            padding: 8px;
            margin-top: 6px;
            font-size: 11px;
            color: #6ee7b7;
        }

        .tool-result.error {
            background: rgba(239, 68, 68, 0.1);
            color: #fca5a5;
        }

        .tool-result-content {
            max-height: 100px;
            overflow-y: auto;
            word-break: break-all;
        }

        .tool-result-content::-webkit-scrollbar {
            width: 4px;
        }

        .tool-result-content::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 2px;
        }

        .expand-icon {
            transition: transform 0.3s;
        }

        .expand-icon.expanded {
            transform: rotate(180deg);
        }

        /* 加载动画 */
        .spinner {
            width: 14px;
            height: 14px;
            border: 2px solid rgba(251, 191, 36, 0.3);
            border-top-color: #fbbf24;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* 状态指示器 */
        .process-indicator {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: rgba(245, 158, 11, 0.1);
            border-radius: 6px;
            font-size: 12px;
            color: #fbbf24;
        }

        .process-indicator.success {
            background: rgba(16, 185, 129, 0.1);
            color: #34d399;
        }

        .process-indicator .spinner {
            width: 12px;
            height: 12px;
        }

        pre {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 1rem;
            border-radius: 0.5rem;
            overflow-x: auto;
        }
        code {
            font-family: 'Courier New', monospace;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-6 max-w-4xl">
        <!-- Header -->
        <header class="bg-white rounded-lg shadow-md p-4 mb-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-lg flex items-center justify-center">
                        <span class="text-white font-bold">AI</span>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold text-gray-800">AI MCP Web UI</h1>
                        <p class="text-sm text-gray-500">通用 MCP 服务器 Web 界面</p>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <!-- 用户菜单 (登录后显示) -->
                    <div id="user-menu" class="hidden relative">
                        <button id="user-menu-btn" class="flex items-center space-x-2 px-3 py-1.5 bg-purple-50 rounded-lg hover:bg-purple-100 transition-colors">
                            <div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-full flex items-center justify-center">
                                <span id="user-avatar" class="text-white text-sm font-bold">U</span>
                            </div>
                            <span id="user-name" class="text-sm font-medium text-gray-700">用户</span>
                            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                        <!-- 下拉菜单 -->
                        <div id="user-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50">
                            <div class="px-4 py-2 border-b border-gray-100">
                                <p class="text-xs text-gray-500">已登录</p>
                                <p id="dropdown-username" class="text-sm font-medium text-gray-800">用户名</p>
                            </div>
                            <button id="logout-btn" class="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 transition-colors flex items-center space-x-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
                                </svg>
                                <span>退出登录</span>
                            </button>
                        </div>
                    </div>
                    <!-- 登录按钮 (未登录时显示) -->
                    <button id="header-login-btn" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm font-medium">
                        登录
                    </button>
                    <!-- 状态指示器 -->
                    <div id="status-indicator" class="flex items-center space-x-2">
                        <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
                        <span class="text-sm text-gray-600">已连接</span>
                    </div>
                </div>
            </div>
        </header>

        <!-- Chat Container -->
        <div class="bg-white rounded-lg shadow-md">
            <!-- Messages -->
            <div id="chat-messages" class="chat-container overflow-y-auto p-4 space-y-4">
                <!-- Welcome Message -->
                <div class="flex justify-start">
                    <div class="message-assistant message-bubble rounded-lg p-4 max-w-[80%] shadow-sm">
                        <p class="text-gray-800">你好！我是 AI MCP Web UI 助手。我可以帮助你：</p>
                        <ul class="mt-2 text-gray-700 list-disc list-inside">
                            <li>与 Claude AI 进行对话</li>
                            <li>调用 MCP 服务器工具</li>
                            <li>自动化各种任务</li>
                        </ul>
                        <p class="mt-2 text-gray-600 text-sm">请问有什么可以帮助你的？</p>
                    </div>
                </div>
            </div>

            <!-- Input Area -->
            <div class="border-t border-gray-200 p-4 input-area">
                <form id="chat-form" class="flex space-x-3">
                    <input
                        type="text"
                        id="user-input"
                        placeholder="输入你的消息..."
                        class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                        style="font-size: 16px;"
                        autocomplete="off"
                    >
                    <button
                        type="submit"
                        id="send-button"
                        class="px-6 py-3 bg-gradient-to-r from-purple-500 to-indigo-600 text-white rounded-lg hover:from-purple-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                        style="font-size: 16px;"
                    >
                        发送
                    </button>
                </form>
            </div>
        </div>

        <!-- MCP Servers Status -->
        <div class="mt-4 bg-white rounded-lg shadow-md p-4">
            <h2 class="text-sm font-semibold text-gray-800 mb-2">MCP 服务器</h2>
            <div id="mcp-servers" class="mcp-servers-scroll">
                <!-- MCP server tags will be inserted here -->
            </div>
        </div>
    </div>

    <!-- 登录/注册对话框 -->
    <div id="login-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4 shadow-2xl">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-xl font-bold text-gray-800" id="login-title">登录 Novel Platform</h3>
                <button id="login-close-x" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
            </div>

            <!-- Tab 切换 -->
            <div class="flex border-b border-gray-200 mb-4">
                <button id="tab-login" class="flex-1 py-2 text-center font-medium text-purple-600 border-b-2 border-purple-600 transition-colors">
                    登录
                </button>
                <button id="tab-register" class="flex-1 py-2 text-center font-medium text-gray-500 hover:text-gray-700 transition-colors">
                    注册
                </button>
            </div>

            <p id="login-description" class="text-sm text-gray-600 mb-4">请输入您的账号密码以访问需要认证的 MCP 工具</p>

            <!-- 登录表单 -->
            <form id="login-form">
                <div class="mb-3">
                    <label for="login-username" class="block text-sm font-medium text-gray-700 mb-1">用户名/邮箱</label>
                    <input type="text" id="login-username" placeholder="请输入用户名或邮箱" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                </div>
                <div class="mb-3">
                    <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                    <input type="password" id="login-password" placeholder="请输入密码" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                </div>
                <p id="login-error" class="text-red-500 text-sm mb-3 hidden"></p>
                <div class="flex justify-end gap-2">
                    <button type="button" id="login-cancel" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">取消</button>
                    <button type="submit" id="login-submit" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">登录</button>
                </div>
            </form>

            <!-- 注册表单 (默认隐藏) -->
            <form id="register-form" class="hidden">
                <div class="mb-3">
                    <label for="register-email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                    <input type="email" id="register-email" placeholder="请输入邮箱" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                </div>
                <div class="mb-3">
                    <label for="register-username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                    <input type="text" id="register-username" placeholder="请输入用户名" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                </div>
                <div class="mb-3">
                    <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                    <input type="password" id="register-password" placeholder="请输入密码" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                </div>
                <div class="mb-3">
                    <label for="register-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                    <input type="password" id="register-confirm-password" placeholder="请再次输入密码" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                </div>
                <p id="register-error" class="text-red-500 text-sm mb-3 hidden"></p>
                <p id="register-success" class="text-green-500 text-sm mb-3 hidden"></p>
                <div class="flex justify-end gap-2">
                    <button type="button" id="register-cancel" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">取消</button>
                    <button type="submit" id="register-submit" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">注册</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // State
        let conversationHistory = [];
        let isTyping = false;

        // DOM Elements
        const chatMessages = document.getElementById('chat-messages');
        const chatForm = document.getElementById('chat-form');
        const userInput = document.getElementById('user-input');
        const sendButton = document.getElementById('send-button');
        const mcpServers = document.getElementById('mcp-servers');
        const statusIndicator = document.getElementById('status-indicator');

        // API Base URL
        const API_BASE = window.location.origin;

        // ========== MCP 服务器配置 ==========
        const MCP_SERVERS = {
            "novel-translator": {
                "name": "Novel Translator MCP",
                "auth_type": "none"
            },
            "novel-platform-user": {
                "name": "Novel Platform User MCP",
                "url": "https://d8d-ai-vscode-8080-223-238-template-6-group.dev.d8d.fun/mcp/",
                "auth_type": "jwt",
                "login_api": "/api/v1/auth/login",
                "base_url": "https://d8d-ai-vscode-8080-223-238-template-6-group.dev.d8d.fun"
            },
            "novel-platform-admin": {
                "name": "Novel Platform Admin MCP",
                "url": "https://d8d-ai-vscode-8080-223-238-template-6-group.dev.d8d.fun/admin-mcp/",
                "auth_type": "jwt",
                "login_api": "/api/v1/auth/login",
                "base_url": "https://d8d-ai-vscode-8080-223-238-template-6-group.dev.d8d.fun"
            }
        };

        // ========== Token 管理器 ==========
        const TokenManager = {
            // 保存 token
            saveToken(mcpType, token, username = null) {
                localStorage.setItem(`mcp_token_${mcpType}`, token);
                localStorage.setItem(`mcp_token_${mcpType}_time`, Date.now());
                if (username) {
                    localStorage.setItem(`mcp_username_${mcpType}`, username);
                }
            },

            // 获取 token
            getToken(mcpType) {
                return localStorage.getItem(`mcp_token_${mcpType}`);
            },

            // 获取用户名
            getUsername(mcpType) {
                return localStorage.getItem(`mcp_username_${mcpType}`);
            },

            // 清除 token
            clearToken(mcpType) {
                localStorage.removeItem(`mcp_token_${mcpType}`);
                localStorage.removeItem(`mcp_token_${mcpType}_time`);
                localStorage.removeItem(`mcp_username_${mcpType}`);
            },

            // 检查是否已登录
            isLoggedIn(mcpType) {
                return !!this.getToken(mcpType);
            },

            // 获取 token 存储时长（毫秒）
            getTokenAge(mcpType) {
                const time = localStorage.getItem(`mcp_token_${mcpType}_time`);
                return time ? (Date.now() - parseInt(time)) : null;
            }
        };

        // ========== 登录/注册相关 ==========
        let currentLoginMcpType = null;
        let currentAuthTab = 'login'; // 'login' or 'register'
        let currentUser = null; // 当前登录用户

        const loginModal = document.getElementById('login-modal');
        const loginForm = document.getElementById('login-form');
        const registerForm = document.getElementById('register-form');
        const loginUsername = document.getElementById('login-username');
        const loginPassword = document.getElementById('login-password');
        const loginError = document.getElementById('login-error');
        const loginTitle = document.getElementById('login-title');
        const loginSubmit = document.getElementById('login-submit');
        const loginDescription = document.getElementById('login-description');

        // Tab 切换
        const tabLogin = document.getElementById('tab-login');
        const tabRegister = document.getElementById('tab-register');

        function switchTab(tab) {
            currentAuthTab = tab;
            if (tab === 'login') {
                tabLogin.classList.add('text-purple-600', 'border-b-2', 'border-purple-600');
                tabLogin.classList.remove('text-gray-500');
                tabRegister.classList.remove('text-purple-600', 'border-b-2', 'border-purple-600');
                tabRegister.classList.add('text-gray-500');
                loginForm.classList.remove('hidden');
                registerForm.classList.add('hidden');
                loginDescription.textContent = '请输入您的账号密码以访问需要认证的 MCP 工具';
            } else {
                tabRegister.classList.add('text-purple-600', 'border-b-2', 'border-purple-600');
                tabRegister.classList.remove('text-gray-500');
                tabLogin.classList.remove('text-purple-600', 'border-b-2', 'border-purple-600');
                tabLogin.classList.add('text-gray-500');
                registerForm.classList.remove('hidden');
                loginForm.classList.add('hidden');
                loginDescription.textContent = '创建新账号以访问需要认证的 MCP 工具';
            }
        }

        tabLogin.addEventListener('click', () => switchTab('login'));
        tabRegister.addEventListener('click', () => switchTab('register'));

        // 显示登录对话框
        function showLoginModal(mcpType) {
            currentLoginMcpType = mcpType;
            const config = MCP_SERVERS[mcpType];
            if (!config) return;

            loginTitle.textContent = config.name;
            // 重置为登录 Tab
            switchTab('login');
            loginUsername.value = '';
            loginPassword.value = '';
            loginError.classList.add('hidden');
            loginSubmit.disabled = false;
            loginModal.classList.remove('hidden');
            loginUsername.focus();

            // 清空注册表单
            document.getElementById('register-email').value = '';
            document.getElementById('register-username').value = '';
            document.getElementById('register-password').value = '';
            document.getElementById('register-confirm-password').value = '';
            document.getElementById('register-error').classList.add('hidden');
            document.getElementById('register-success').classList.add('hidden');
        }

        // 隐藏登录对话框
        function hideLoginModal() {
            loginModal.classList.add('hidden');
            currentLoginMcpType = null;
        }

        // 执行登录 - 使用本地后端代理避免 CORS 问题
        async function performLogin(mcpType, username, password) {
            const config = MCP_SERVERS[mcpType];
            if (!config || config.auth_type !== 'jwt') {
                return { success: false, error: '该 MCP 不需要登录' };
            }

            // 使用本地后端代理端点，避免直接调用外部 API 导致 CORS 错误
            const is_admin = mcpType === 'novel-platform-admin';
            const proxyUrl = is_admin ? '/api/auth/admin-login' : '/api/auth/login';

            try {
                const response = await fetch(proxyUrl, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        email: username,
                        password: password
                    })
                });

                const data = await response.json();

                if (response.ok && data.success) {
                    const token = data.token;
                    const loggedUsername = data.username || username;
                    TokenManager.saveToken(mcpType, token, loggedUsername);
                    currentUser = loggedUsername;
                    updateUserMenu();
                    return { success: true, token, username: loggedUsername };
                } else {
                    return { success: false, error: data.detail || data.error || '登录失败' };
                }
            } catch (e) {
                return { success: false, error: e.message };
            }
        }

        // 执行注册
        async function performRegister(email, username, password) {
            try {
                const response = await fetch('/api/auth/register', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        email: email,
                        username: username,
                        password: password
                    })
                });

                const data = await response.json();

                if (response.ok) {
                    return { success: true, message: data.message || '注册成功' };
                } else {
                    return { success: false, error: data.detail || data.error || '注册失败' };
                }
            } catch (e) {
                return { success: false, error: e.message };
            }
        }

        // 登录表单提交处理
        loginForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            if (!currentLoginMcpType) return;

            const username = loginUsername.value.trim();
            const password = loginPassword.value;

            if (!username || !password) {
                loginError.textContent = '请输入用户名和密码';
                loginError.classList.remove('hidden');
                return;
            }

            loginSubmit.disabled = true;
            loginError.classList.add('hidden');

            const result = await performLogin(currentLoginMcpType, username, password);

            if (result.success) {
                hideLoginModal();
                loadMCPServers(); // 刷新 MCP 服务器列表
            } else {
                loginError.textContent = result.error;
                loginError.classList.remove('hidden');
                loginSubmit.disabled = false;
            }
        });

        // 注册表单提交处理
        registerForm.addEventListener('submit', async (e) => {
            e.preventDefault();

            const email = document.getElementById('register-email').value.trim();
            const username = document.getElementById('register-username').value.trim();
            const password = document.getElementById('register-password').value;
            const confirmPassword = document.getElementById('register-confirm-password').value;
            const registerError = document.getElementById('register-error');
            const registerSuccess = document.getElementById('register-success');
            const registerSubmit = document.getElementById('register-submit');

            // 验证输入
            if (!email || !username || !password || !confirmPassword) {
                registerError.textContent = '请填写所有字段';
                registerError.classList.remove('hidden');
                registerSuccess.classList.add('hidden');
                return;
            }

            // 验证邮箱格式
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                registerError.textContent = '请输入有效的邮箱地址';
                registerError.classList.remove('hidden');
                registerSuccess.classList.add('hidden');
                return;
            }

            // 验证密码匹配
            if (password !== confirmPassword) {
                registerError.textContent = '两次输入的密码不一致';
                registerError.classList.remove('hidden');
                registerSuccess.classList.add('hidden');
                return;
            }

            // 验证密码长度
            if (password.length < 6) {
                registerError.textContent = '密码长度至少为 6 位';
                registerError.classList.remove('hidden');
                registerSuccess.classList.add('hidden');
                return;
            }

            registerSubmit.disabled = true;
            registerError.classList.add('hidden');
            registerSuccess.classList.add('hidden');

            const result = await performRegister(email, username, password);

            if (result.success) {
                registerSuccess.textContent = result.message + '，请切换到登录页面登录';
                registerSuccess.classList.remove('hidden');
                registerSubmit.disabled = false;
            } else {
                registerError.textContent = result.error;
                registerError.classList.remove('hidden');
                registerSubmit.disabled = false;
            }
        });

        // 登录对话框事件绑定
        document.getElementById('login-cancel').addEventListener('click', hideLoginModal);
        document.getElementById('register-cancel').addEventListener('click', hideLoginModal);
        document.getElementById('login-close-x').addEventListener('click', hideLoginModal);

        // 点击背景关闭
        loginModal.addEventListener('click', (e) => {
            if (e.target === loginModal) {
                hideLoginModal();
            }
        });

        // ========== 用户菜单相关 ==========
        const userMenu = document.getElementById('user-menu');
        const userMenuBtn = document.getElementById('user-menu-btn');
        const userDropdown = document.getElementById('user-dropdown');
        const headerLoginBtn = document.getElementById('header-login-btn');
        const logoutBtn = document.getElementById('logout-btn');

        // 更新用户菜单显示状态
        function updateUserMenu() {
            // 检查是否有任何 MCP 服务器已登录
            let isLoggedIn = false;
            let loggedInUsername = null;

            for (const [mcpType, config] of Object.entries(MCP_SERVERS)) {
                if (config.auth_type === 'jwt' && TokenManager.isLoggedIn(mcpType)) {
                    isLoggedIn = true;
                    loggedInUsername = TokenManager.getUsername(mcpType);
                    break;
                }
            }

            if (isLoggedIn) {
                userMenu.classList.remove('hidden');
                headerLoginBtn.classList.add('hidden');

                // 更新用户信息显示
                if (loggedInUsername) {
                    document.getElementById('user-name').textContent = loggedInUsername;
                    document.getElementById('dropdown-username').textContent = loggedInUsername;
                    document.getElementById('user-avatar').textContent = loggedInUsername.charAt(0).toUpperCase();
                    currentUser = loggedInUsername;
                }
            } else {
                userMenu.classList.add('hidden');
                headerLoginBtn.classList.remove('hidden');
                currentUser = null;
            }
        }

        // 用户菜单按钮点击 - 切换下拉菜单
        userMenuBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            userDropdown.classList.toggle('hidden');
        });

        // 点击其他地方关闭下拉菜单
        document.addEventListener('click', () => {
            if (!userDropdown.classList.contains('hidden')) {
                userDropdown.classList.add('hidden');
            }
        });

        // 头部登录按钮点击
        headerLoginBtn.addEventListener('click', () => {
            // 显示登录对话框，默认登录到 novel-platform-user
            showLoginModal('novel-platform-user');
        });

        // 退出登录
        logoutBtn.addEventListener('click', () => {
            // 清除所有 MCP 的 token
            for (const mcpType of Object.keys(MCP_SERVERS)) {
                TokenManager.clearToken(mcpType);
            }
            currentUser = null;
            updateUserMenu();
            loadMCPServers(); // 刷新 MCP 服务器列表
            userDropdown.classList.add('hidden');
        });

        // 初始化用户菜单状态
        updateUserMenu();

        // ========== Token 传递到后端 ==========
        // 为每个请求添加 Authorization header
        async function fetchWithAuth(url, options = {}) {
            // 检查 URL 路径，确定是哪个 MCP
            let mcpType = null;
            if (url.includes('/chat') || url.includes('/mcp')) {
                // 对于需要认证的 MCP，检查本地存储的 token
                for (const [type, config] of Object.entries(MCP_SERVERS)) {
                    if (config.auth_type === 'jwt' && TokenManager.isLoggedIn(type)) {
                        mcpType = type;
                        break;
                    }
                }
            }

            // 添加 token 到请求头
            if (mcpType) {
                const token = TokenManager.getToken(mcpType);
                if (token) {
                    options.headers = options.headers || {};
                    options.headers['X-MCP-Token'] = token;
                    options.headers['X-MCP-Type'] = mcpType;
                }
            }

            return fetch(url, options);
        }

        // ========== Format message content (handle code blocks, etc.) ==========
        function formatMessage(content) {
            // Simple markdown-like formatting
            let formatted = content
                .replace(/```(\w+)?\n([\s\S]*?)```/g, '<pre><code>$2</code></pre>')
                .replace(/`([^`]+)`/g, '<code class="bg-gray-200 px-1 rounded">$1</code>')
                .replace(/\n/g, '<br>');
            return formatted;
        }

        // Add message to chat
        function addMessage(role, content) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `flex ${role === 'user' ? 'justify-end' : 'justify-start'}`;

            const bubbleClass = role === 'user' ? 'message-user text-white' : 'message-assistant text-gray-800';
            messageDiv.innerHTML = `
                <div class="${bubbleClass} message-bubble rounded-lg p-4 max-w-[80%] shadow-sm">
                    <div>${formatMessage(content)}</div>
                </div>
            `;

            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // Add typing indicator
        function addTypingIndicator() {
            const typingDiv = document.createElement('div');
            typingDiv.id = 'typing-indicator';
            typingDiv.className = 'flex justify-start';
            typingDiv.innerHTML = `
                <div class="message-assistant rounded-lg p-4 shadow-sm">
                    <div class="typing-indicator flex space-x-1">
                        <span class="w-2 h-2 bg-gray-500 rounded-full"></span>
                        <span class="w-2 h-2 bg-gray-500 rounded-full"></span>
                        <span class="w-2 h-2 bg-gray-500 rounded-full"></span>
                    </div>
                </div>
            `;
            chatMessages.appendChild(typingDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // Remove typing indicator
        function removeTypingIndicator() {
            const indicator = document.getElementById('typing-indicator');
            if (indicator) indicator.remove();
        }

        // 创建工具调用面板
        function createToolCallPanel() {
            const panel = document.createElement('div');
            panel.className = 'tool-call-panel';
            panel.innerHTML = `
                <div class="tool-panel-header" onclick="toggleToolPanel(this)">
                    <div class="tool-panel-title">
                        <span class="expand-icon">▶</span>
                        <span>🔧 工具调用</span>
                        <span class="tool-count">(0)</span>
                    </div>
                    <div class="process-indicator">
                        <div class="spinner"></div>
                        <span>处理中...</span>
                    </div>
                </div>
                <div class="tool-panel-content">
                    <div class="tool-calls-container"></div>
                </div>
            `;
            return panel;
        }

        // 切换工具面板展开/收起
        function toggleToolPanel(header) {
            const content = header.nextElementSibling;
            const icon = header.querySelector('.expand-icon');
            content.classList.toggle('expanded');
            icon.classList.toggle('expanded');
        }

        // 切换参数/结果折叠区域
        function toggleCollapsible(header) {
            const content = header.nextElementSibling;
            const icon = header.querySelector('.collapsible-icon');
            content.classList.toggle('expanded');
            icon.classList.toggle('expanded');
        }

        // 添加工具调用项
        function addToolCallItem(container, toolName, params, toolUseId = null) {
            const item = document.createElement('div');
            item.className = 'tool-call-item pending';
            const uniqueId = `tool-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
            item.id = uniqueId;

            // 存储 tool_use_id 和 tool_name 以便后续匹配
            if (toolUseId) {
                item.dataset.toolUseId = toolUseId;
            }
            item.dataset.toolName = toolName;

            console.log('[addToolCallItem] Created item:', { id: uniqueId, toolName, toolUseId });

            // 简化工具名称显示 - 去掉 mcp__ 前缀和下划线
            let displayName = toolName;
            if (toolName.startsWith('mcp__')) {
                displayName = toolName.replace('mcp__', '').replace(/_/g, ' ');
            }
            // 首字母大写
            displayName = displayName.charAt(0).toUpperCase() + displayName.slice(1);

            const paramsStr = params ? JSON.stringify(params, null, 2) : '{}';
            const hasParams = params && Object.keys(params).length > 0;

            item.innerHTML = `
                <div class="tool-call-header">
                    <div class="tool-name">
                        <span>🔧</span>
                        <span>${escapeHtml(displayName)}</span>
                    </div>
                    <div class="tool-status pending">
                        <div class="spinner"></div>
                        <span>执行中</span>
                    </div>
                </div>
                ${hasParams ? `
                <div class="collapsible-section">
                    <div class="collapsible-header" onclick="toggleCollapsible(this)">
                        <span class="collapsible-icon">▶</span>
                        <span>查看参数</span>
                    </div>
                    <div class="collapsible-content">
                        <div class="tool-params"><pre style="margin:0;padding:0;background:transparent;font-size:10px;">${escapeHtml(paramsStr)}</pre></div>
                    </div>
                </div>
                ` : ''}
            `;

            container.appendChild(item);
            return { id: uniqueId, toolUseId: toolUseId, toolName: toolName };
        }

        // 更新工具调用状态
        function updateToolCallStatus(itemId, status, result = null) {
            const item = document.getElementById(itemId);
            if (!item) {
                console.warn('[updateToolCallStatus] Item not found:', itemId);
                return;
            }

            const statusEl = item.querySelector('.tool-status');
            item.classList.remove('pending', 'success', 'error');

            if (status === 'success') {
                item.classList.add('success');
                statusEl.className = 'tool-status success';
                statusEl.innerHTML = '✅ 完成';

                // 总是显示结果区域（即使结果为空）
                const resultText = result ? (typeof result === 'string' ? result : JSON.stringify(result, null, 2)) : '';
                const displayResult = resultText || '(无返回结果)';
                const truncatedResult = displayResult.substring(0, 1000) + (displayResult.length > 1000 ? '...' : '');

                const resultDiv = document.createElement('div');
                resultDiv.className = 'collapsible-section';
                resultDiv.innerHTML = `
                    <div class="collapsible-header" onclick="toggleCollapsible(this)">
                        <span class="collapsible-icon">▶</span>
                        <span>查看结果</span>
                    </div>
                    <div class="collapsible-content">
                        <div class="tool-result"><div class="tool-result-content">${escapeHtml(truncatedResult)}</div></div>
                    </div>
                `;
                item.appendChild(resultDiv);
            } else if (status === 'error') {
                item.classList.add('error');
                statusEl.className = 'tool-status error';
                statusEl.innerHTML = '❌ 失败';

                const errorDiv = document.createElement('div');
                errorDiv.className = 'collapsible-section';
                errorDiv.innerHTML = `
                    <div class="collapsible-header" onclick="toggleCollapsible(this)">
                        <span class="collapsible-icon">▶</span>
                        <span>查看错误</span>
                    </div>
                    <div class="collapsible-content expanded">
                        <div class="tool-result error">${escapeHtml(result || '未知错误')}</div>
                    </div>
                `;
                item.appendChild(errorDiv);
            }
        }

        // 更新工具面板状态
        function updateToolPanelStatus(panel, status, totalCalls = 0) {
            const indicator = panel.querySelector('.process-indicator');
            const countEl = panel.querySelector('.tool-count');
            const content = panel.querySelector('.tool-panel-content');
            const icon = panel.querySelector('.expand-icon');

            countEl.textContent = `(${totalCalls})`;

            if (status === 'running') {
                // 保持处理中状态，不改变
                indicator.className = 'process-indicator';
                indicator.innerHTML = `<div class="spinner"></div><span>处理中...</span>`;
            } else if (status === 'complete') {
                indicator.className = 'process-indicator success';
                indicator.innerHTML = `<span>✅ 完成 - ${totalCalls} 个工具调用</span>`;
                // 自动展开面板以便查看结果
                if (content && !content.classList.contains('expanded')) {
                    content.classList.add('expanded');
                    if (icon) icon.classList.add('expanded');
                }
            } else if (status === 'error') {
                indicator.className = 'process-indicator';
                indicator.style.background = 'rgba(239, 68, 68, 0.1)';
                indicator.style.color = '#f87171';
                indicator.innerHTML = `<span>❌ 部分失败</span>`;
            }
        }

        // HTML 转义
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        function scrollToBottom() {
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // ========== 流式聊天功能 ==========

        async function chatStream(message, onEvent) {
            const events = [];

            try {
                // 收集所有已登录 MCP 的 tokens
                const mcpTokens = {};
                for (const [type, config] of Object.entries(MCP_SERVERS)) {
                    if (config.auth_type === 'jwt' && TokenManager.isLoggedIn(type)) {
                        mcpTokens[type] = TokenManager.getToken(type);
                    }
                }

                const headers = { 'Content-Type': 'application/json' };
                // 将 tokens 作为 JSON 字符串传递
                if (Object.keys(mcpTokens).length > 0) {
                    headers['X-MCP-Tokens'] = JSON.stringify(mcpTokens);
                }

                const response = await fetch('/api/chat/stream', {
                    method: 'POST',
                    headers: headers,
                    body: JSON.stringify({ message, history: conversationHistory })
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';

                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;

                    buffer += decoder.decode(value, { stream: true });

                    // 处理 SSE 格式: "event: xxx\ndata: {...}\n\n"
                    const lines = buffer.split('\n');
                    buffer = lines.pop() || '';  // 保留未完成的行

                    for (let i = 0; i < lines.length; i++) {
                        const line = lines[i].trim();
                        if (!line) continue;

                        if (line.startsWith('event:')) {
                            const eventType = line.substring(6).trim();
                            events.push({ type: eventType, data: null });
                        } else if (line.startsWith('data:')) {
                            const data = line.substring(5).trim();
                            if (events.length > 0) {
                                events[events.length - 1].data = data;
                            }
                        }

                        // 处理完整的事件
                        while (events.length > 0 && events[0].data) {
                            const event = events.shift();
                            try {
                                const data = JSON.parse(event.data);
                                onEvent(event.type, data);
                            } catch (e) {
                                console.error('Parse error:', e, event.data);
                            }
                        }
                    }
                }
            } catch (error) {
                onEvent('error', { error: error.message });
            }
        }

        async function sendMessageStream(message) {
            if (isTyping) return;

            isTyping = true;
            sendButton.disabled = true;

            // 添加用户消息
            addMessage('user', message);
            conversationHistory.push({ role: 'user', content: message });

            // 创建助手消息容器
            const assistantMsgDiv = document.createElement('div');
            assistantMsgDiv.className = 'flex justify-start';
            assistantMsgDiv.innerHTML = `
                <div class="message-assistant message-bubble rounded-lg p-4 shadow-sm">
                    <div class="response-content">
                        <div class="text" id="currentResponse"></div>
                    </div>
                    <div id="toolCallContainer"></div>
                </div>
            `;
            chatMessages.appendChild(assistantMsgDiv);

            const responseDiv = assistantMsgDiv.querySelector('#currentResponse');
            const toolContainer = assistantMsgDiv.querySelector('#toolCallContainer');

            let currentText = '';
            let toolCallsCount = 0;
            let toolCallItems = [];  // 改为数组存储，按索引匹配
            let finalResponse = '';
            let toolCallPanel = null;
            let toolCallsContainer = null;

            await chatStream(message, (eventType, data) => {
                switch (eventType) {
                    case 'start':
                        responseDiv.innerHTML = '<span style="color: #888; font-style: italic;">🤔 AI 正在思考...</span>';
                        break;

                    case 'token':
                        // 移除思考提示
                        if (currentText === '') {
                            responseDiv.innerHTML = '';
                        }
                        currentText += data.text || '';
                        responseDiv.innerHTML = formatMessage(currentText);
                        scrollToBottom();
                        break;

                    case 'tool_call':
                        // 首次工具调用时创建面板
                        if (!toolCallPanel) {
                            toolCallPanel = createToolCallPanel();
                            toolContainer.appendChild(toolCallPanel);
                            toolCallsContainer = toolCallPanel.querySelector('.tool-calls-container');

                            // 清空思考提示
                            if (currentText === '' || currentText.includes('正在思考')) {
                                responseDiv.innerHTML = '<span style="color: #888; font-style: italic;">🔧 正在调用工具...</span>';
                            }
                        }

                        // 添加工具调用项
                        const toolName = data.tool || 'unknown';
                        const params = data.args || data.params || null;
                        const toolUseId = data.tool_id || null;

                        console.log('[tool_call] Adding tool:', { toolName, toolUseId, params });

                        const itemInfo = addToolCallItem(toolCallsContainer, toolName, params, toolUseId);
                        toolCallItems.push(itemInfo);
                        toolCallsCount++;

                        console.log('[tool_call] Current toolCallItems:', toolCallItems);

                        updateToolPanelStatus(toolCallPanel, 'running', toolCallsCount);
                        scrollToBottom();
                        break;

                    case 'tools_start':
                        // 批量工具开始
                        if (!toolCallPanel) {
                            toolCallPanel = createToolCallPanel();
                            toolContainer.appendChild(toolCallPanel);
                            toolCallsContainer = toolCallPanel.querySelector('.tool-calls-container');
                        }
                        if (currentText === '' || currentText.includes('正在思考')) {
                            responseDiv.innerHTML = '<span style="color: #888; font-style: italic;">🔧 正在调用工具...</span>';
                        }
                        scrollToBottom();
                        break;

                    case 'tool_done':
                        // 工具执行完成 - 按 tool_use_id 或 tool_name 匹配
                        const doneToolUseId = data.tool_id;
                        const doneToolName = data.tool;
                        const doneResult = data.result;

                        console.log('[tool_done] Looking for tool:', { tool_id: doneToolUseId, tool: doneToolName });
                        console.log('[tool_done] Current toolCallItems:', toolCallItems);

                        // 查找匹配的工具调用项
                        const doneItem = toolCallItems.find(item =>
                            item.toolUseId === doneToolUseId || item.toolName === doneToolName
                        );

                        if (doneItem) {
                            console.log('[tool_done] Found item, updating status:', doneItem.id);
                            updateToolCallStatus(doneItem.id, 'success', doneResult);
                        } else {
                            console.warn('[tool_done] Tool item not found for:', { tool_id: doneToolUseId, tool: doneToolName });
                            // 如果找不到匹配项，尝试通过 DOM 查找
                            const fallbackItem = Array.from(document.querySelectorAll('.tool-call-item')).find(el => {
                                return el.dataset.toolUseId === doneToolUseId || el.dataset.toolName === doneToolName;
                            });
                            if (fallbackItem) {
                                console.log('[tool_done] Found via DOM fallback:', fallbackItem.id);
                                updateToolCallStatus(fallbackItem.id, 'success', doneResult);
                            }
                        }
                        scrollToBottom();
                        break;

                    case 'tool_error':
                        // 工具执行错误 - 按 tool_use_id 或 tool_name 匹配
                        const errorToolUseId = data.tool_id;
                        const errorToolName = data.tool;

                        const errorItem = toolCallItems.find(item =>
                            item.toolUseId === errorToolUseId || item.toolName === errorToolName
                        );

                        if (errorItem) {
                            updateToolCallStatus(errorItem.id, 'error', data.error);
                        }
                        if (toolCallPanel) {
                            updateToolPanelStatus(toolCallPanel, 'error', toolCallsCount);
                        }
                        scrollToBottom();
                        break;

                    case 'complete':
                        // 完成
                        console.log('[complete] Tool calls finished, updating panel status');
                        if (toolCallPanel) {
                            updateToolPanelStatus(toolCallPanel, 'complete', toolCallsCount);
                        }

                        // 清空临时提示并显示最终响应
                        if (data.response || currentText) {
                            finalResponse = data.response || currentText;
                            responseDiv.innerHTML = formatMessage(finalResponse);
                        }
                        conversationHistory.push({ role: 'assistant', content: finalResponse });
                        scrollToBottom();
                        break;

                    case 'error':
                        responseDiv.innerHTML = `<span style="color: #ef4444;">❌ 错误: ${escapeHtml(data.error || '未知错误')}</span>`;
                        if (toolCallPanel) {
                            updateToolPanelStatus(toolCallPanel, 'error', toolCallsCount);
                        }
                        scrollToBottom();
                        break;
                }
            });

            // 重置状态
            isTyping = false;
            sendButton.disabled = false;
            userInput.focus();
        }

        // Load MCP servers
        async function loadMCPServers() {
            try {
                const response = await fetch(`${API_BASE}/api/mcp/servers`);
                const data = await response.json();

                mcpServers.innerHTML = data.servers.map(server => {
                    const mcpType = server.id;
                    const isLoggedIn = TokenManager.isLoggedIn(mcpType);
                    const username = TokenManager.getUsername(mcpType);

                    let authStatus = '';
                    let clickHandler = '';

                    if (server.auth_type === 'jwt') {
                        if (isLoggedIn) {
                            authStatus = `<span class="text-green-600 font-medium" title="已登录为 ${username}">✅ ${username || '已登录'}</span>`;
                            clickHandler = `onclick="handleMcpClick('${mcpType}', '${server.auth_type}')"`;
                        } else {
                            authStatus = '<span class="text-amber-600" title="需要登录">🔒 需要登录</span>';
                            clickHandler = `onclick="handleMcpClick('${mcpType}', '${server.auth_type}')"`;
                        }
                    } else {
                        authStatus = '<span class="text-gray-500">🔓 公开</span>';
                    }

                    return `
                        <div class="mcp-server-tag ${server.enabled ? 'enabled' : 'disabled'}" ${clickHandler} style="cursor: ${server.auth_type === 'jwt' ? 'pointer' : 'default'}">
                            <span class="mcp-status-dot ${server.enabled ? 'online' : 'offline'}"></span>
                            <span class="font-medium">${server.name}</span>
                            ${authStatus}
                        </div>
                    `;
                }).join('');
            } catch (error) {
                console.error('Failed to load MCP servers:', error);
            }
        }

        // 处理 MCP 服务器点击
        function handleMcpClick(mcpType, authType) {
            if (authType !== 'jwt') return;

            if (TokenManager.isLoggedIn(mcpType)) {
                // 已登录，询问是否登出
                const username = TokenManager.getUsername(mcpType);
                if (confirm(`当前已登录为 ${username}\n\n是否要登出？`)) {
                    TokenManager.clearToken(mcpType);
                    loadMCPServers();
                }
            } else {
                // 未登录，显示登录对话框
                showLoginModal(mcpType);
            }
        }

        // 将 handleMcpClick 暴露到全局作用域
        window.handleMcpClick = handleMcpClick;

        // Check health
        async function checkHealth() {
            try {
                const response = await fetch(`${API_BASE}/api/health`);
                if (response.ok) {
                    statusIndicator.innerHTML = `
                        <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
                        <span class="text-sm text-gray-600">已连接</span>
                    `;
                } else {
                    throw new Error('Health check failed');
                }
            } catch (error) {
                statusIndicator.innerHTML = `
                    <span class="w-2 h-2 bg-red-500 rounded-full"></span>
                    <span class="text-sm text-gray-600">连接失败</span>
                `;
            }
        }

        // Event listeners
        chatForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const message = userInput.value.trim();
            if (message) {
                sendMessageStream(message);
                userInput.value = '';
            }
        });

        // Initialize
        loadMCPServers();
        checkHealth();
        userInput.focus();

        // Make toggle functions global
        window.toggleToolPanel = toggleToolPanel;
        window.toggleCollapsible = toggleCollapsible;
    </script>
</body>
</html>