hypercore-cli 1.1.0

package/dist/web/static/workspace.js

@@ -0,0 +1,1683 @@
+/**
+ * Hypercore Workbench — 客户端逻辑
+ * WebSocket 驱动，与 CLI REPL 共享会话
+ */
+
+class HypercoreWorkspace {
+  constructor() {
+    this.ws = null;
+    this.state = {};
+    this.isStreaming = false;
+    this.streamBuffer = '';
+    this.reconnectDelay = 1000;
+    this.maxReconnectDelay = 30000;
+    this.heartbeatInterval = null;
+
+    this.els = {
+      connStatus: document.getElementById('connStatus'),
+      modelBadge: document.getElementById('modelBadge'),
+      chatMessages: document.getElementById('chatMessages'),
+      chatInput: document.getElementById('chatInput'),
+      btnSend: document.getElementById('btnSend'),
+      sessionInfo: document.getElementById('sessionInfo'),
+      // Context panel
+      ctxSession: document.getElementById('ctxSession'),
+      ctxModel: document.getElementById('ctxModel'),
+      ctxProvider: document.getElementById('ctxProvider'),
+      ctxInputTokens: document.getElementById('ctxInputTokens'),
+      ctxOutputTokens: document.getElementById('ctxOutputTokens'),
+      ctxTotalTokens: document.getElementById('ctxTotalTokens'),
+      ctxTokenBar: document.getElementById('ctxTokenBar'),
+      ctxToolCount: document.getElementById('ctxToolCount'),
+      ctxCwd: document.getElementById('ctxCwd'),
+      ctxGitBranch: document.getElementById('ctxGitBranch'),
+      ctxGitStatus: document.getElementById('ctxGitStatus'),
+      // Footer
+      footerConn: document.getElementById('footerConn'),
+      footerSession: document.getElementById('footerSession'),
+      footerModel: document.getElementById('footerModel'),
+      footerTokens: document.getElementById('footerTokens'),
+      // Panels
+      fileList: document.getElementById('fileList'),
+      memoryStats: document.getElementById('memoryStats'),
+      memoryList: document.getElementById('memoryList'),
+      memorySearch: document.getElementById('memorySearch'),
+      toolList: document.getElementById('toolList'),
+      currentPath: document.getElementById('currentPath'),
+      // Modal
+      filePreviewModal: document.getElementById('filePreviewModal'),
+      previewFileName: document.getElementById('previewFileName'),
+      previewContent: document.getElementById('previewContent'),
+    };
+
+    this.init();
+  }
+
+  init() {
+    this.bindEvents();
+    this.connect();
+    this.restoreActiveTab();
+    this.initTeam();
+    this.loadWorkspaceProfile();
+  }
+
+  // ===== WebSocket =====
+
+  connect() {
+    const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${location.host}/ws/repl`;
+    console.log(`[HyperWS] Connecting to ${wsUrl} (attempt #${++this._connectAttempts || (this._connectAttempts = 1)})`);
+    this.setStatus('connecting');
+
+    try {
+      this.ws = new WebSocket(wsUrl);
+    } catch (e) {
+      console.error('[HyperWS] Failed to create WebSocket:', e);
+      this.fallbackHTTPState();
+      this.scheduleReconnect();
+      return;
+    }
+
+    // Connection timeout: if not open within 5s, force close and retry
+    const connectTimeout = setTimeout(() => {
+      if (this.ws && this.ws.readyState === WebSocket.CONNECTING) {
+        console.warn('[HyperWS] Connection timeout after 5s, retrying...');
+        this.ws.close();
+      }
+    }, 5000);
+
+    this.ws.onopen = () => {
+      clearTimeout(connectTimeout);
+      console.log('[HyperWS] ✅ WebSocket OPEN');
+      this.reconnectDelay = 1000;
+      this.startHeartbeat();
+      // Request fresh state after connection
+      this.send('state_request');
+    };
+
+    this.ws.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data);
+        console.log(`[HyperWS] ← ${msg.type}`, msg.payload ? Object.keys(msg.payload) : '');
+        this.handleMessage(msg);
+      } catch { /* ignore parse errors */ }
+    };
+
+    this.ws.onclose = (event) => {
+      clearTimeout(connectTimeout);
+      console.warn(`[HyperWS] WebSocket closed: code=${event.code} reason=${event.reason || 'none'} wasClean=${event.wasClean}`);
+      this.setStatus('disconnected');
+      this.stopHeartbeat();
+      this.scheduleReconnect();
+    };
+
+    this.ws.onerror = (e) => {
+      console.error('[HyperWS] WebSocket error event fired');
+      // onclose will fire after this — try HTTP fallback for state
+      this.fallbackHTTPState();
+    };
+  }
+
+  /** When WebSocket is down, try REST API to at least get state info */
+  async fallbackHTTPState() {
+    try {
+      const res = await fetch('/api/repl/state');
+      if (res.ok) {
+        const data = await res.json();
+        if (data && !data.error) {
+          this.updateState(data);
+        }
+      }
+    } catch { /* REST also unavailable */ }
+    // Also try loading side panels via REST
+    this.loadSidePanels();
+  }
+
+  scheduleReconnect() {
+    setTimeout(() => {
+      this.reconnectDelay = Math.min(this.reconnectDelay * 1.5, this.maxReconnectDelay);
+      this.connect();
+    }, this.reconnectDelay);
+  }
+
+  send(type, payload = {}) {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify({
+        type,
+        payload,
+        timestamp: new Date().toISOString(),
+        source: 'gui',
+      }));
+    }
+  }
+
+  startHeartbeat() {
+    this.stopHeartbeat();
+    this.heartbeatInterval = setInterval(() => {
+      this.send('heartbeat');
+    }, 30000);
+  }
+
+  stopHeartbeat() {
+    if (this.heartbeatInterval) {
+      clearInterval(this.heartbeatInterval);
+      this.heartbeatInterval = null;
+    }
+  }
+
+  // ===== Message Router =====
+
+  handleMessage(msg) {
+    switch (msg.type) {
+      case 'connected':
+        this.setStatus('connected');
+        if (msg.payload.state) {
+          this.updateState(msg.payload.state);
+          this.restoreHistory(msg.payload.state.chatHistory || []);
+        }
+        this.loadSidePanels();
+        break;
+
+      case 'session_sync':
+      case 'state_sync':
+        this.updateState(msg.payload);
+        break;
+
+      case 'user_input_cli':
+        this.renderUserMessage(msg.payload.content, 'cli');
+        break;
+
+      case 'assistant_text':
+        this.appendStreamText(msg.payload.content);
+        break;
+
+      case 'assistant_done':
+        this.finishStream(msg.payload);
+        break;
+
+      case 'tool_call':
+        this.renderToolCall(msg.payload);
+        break;
+
+      case 'tool_result':
+        this.renderToolResult(msg.payload);
+        break;
+
+      case 'command_output':
+        this.renderCommandOutput(msg.payload.output);
+        break;
+
+      case 'error':
+        this.renderError(msg.payload.message || 'Unknown error');
+        break;
+
+      case 'heartbeat':
+        // pong received
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  // ===== State Management =====
+
+  updateState(state) {
+    this.state = { ...this.state, ...state };
+
+    const s = this.state;
+    this.els.ctxSession.textContent = s.sessionId ? s.sessionId.slice(0, 12) : '--';
+    this.els.ctxModel.textContent = s.model || '--';
+    this.els.ctxProvider.textContent = s.provider || '--';
+
+    const inTok = s.tokens?.inputTokens || s.tokens?.input || 0;
+    const outTok = s.tokens?.outputTokens || s.tokens?.output || 0;
+    const totalTok = inTok + outTok;
+    this.els.ctxInputTokens.textContent = this.formatNumber(inTok);
+    this.els.ctxOutputTokens.textContent = this.formatNumber(outTok);
+    this.els.ctxTotalTokens.textContent = this.formatNumber(totalTok);
+
+    // Token bar (assume 128K context window)
+    const maxTokens = 128000;
+    const pct = Math.min((totalTok / maxTokens) * 100, 100);
+    this.els.ctxTokenBar.style.width = pct + '%';
+
+    this.els.ctxToolCount.textContent = `${s.toolCount || 0} 个注册工具`;
+    this.els.ctxCwd.textContent = s.cwd || '--';
+
+    this.els.modelBadge.textContent = this.shortModel(s.model || '');
+    this.els.sessionInfo.querySelector('.wb-session-id').textContent =
+      s.sessionId ? s.sessionId.slice(0, 16) : '--';
+
+    // Footer
+    this.els.footerSession.textContent = s.sessionId ? s.sessionId.slice(0, 12) : '--';
+    this.els.footerModel.textContent = this.shortModel(s.model || '');
+    this.els.footerTokens.textContent = `${this.formatNumber(inTok)} / ${this.formatNumber(outTok)}`;
+  }
+
+  setStatus(status) {
+    const dot = this.els.connStatus.querySelector('.wb-dot');
+    dot.className = 'wb-dot';
+
+    if (status === 'connected') {
+      dot.classList.add('wb-dot-connected');
+      this.els.connStatus.lastChild.textContent = ' 已连接';
+      this.els.footerConn.textContent = '🟢 已连接';
+    } else if (status === 'connecting') {
+      dot.classList.add('wb-dot-connecting');
+      this.els.connStatus.lastChild.textContent = ' 连接中…';
+      this.els.footerConn.textContent = '🟡 连接中…';
+    } else {
+      dot.classList.add('wb-dot-disconnected');
+      this.els.connStatus.lastChild.textContent = ' 未连接';
+      this.els.footerConn.textContent = '🔴 未连接';
+    }
+  }
+
+  // ===== Chat Rendering =====
+
+  renderUserMessage(content, source = 'gui') {
+    const msgEl = document.createElement('div');
+    msgEl.className = 'wb-msg wb-msg-user';
+
+    const header = document.createElement('div');
+    header.className = 'wb-msg-header';
+
+    const sourceTag = document.createElement('span');
+    sourceTag.className = `wb-msg-source wb-msg-source-${source}`;
+    sourceTag.textContent = source.toUpperCase();
+    header.appendChild(sourceTag);
+
+    const label = document.createElement('span');
+    label.textContent = '你';
+    header.appendChild(label);
+
+    const body = document.createElement('div');
+    body.className = 'wb-msg-body';
+    body.textContent = content;
+
+    msgEl.appendChild(header);
+    msgEl.appendChild(body);
+
+    this.removeWelcome();
+    this.els.chatMessages.appendChild(msgEl);
+    this.scrollToBottom();
+  }
+
+  appendStreamText(text) {
+    if (!this.isStreaming) {
+      this.isStreaming = true;
+      this.streamBuffer = '';
+
+      const msgEl = document.createElement('div');
+      msgEl.className = 'wb-msg wb-msg-assistant';
+      msgEl.id = 'streaming-msg';
+
+      const header = document.createElement('div');
+      header.className = 'wb-msg-header';
+      header.innerHTML = '<span>AI</span>';
+
+      const body = document.createElement('div');
+      body.className = 'wb-msg-body';
+
+      const cursor = document.createElement('span');
+      cursor.className = 'wb-streaming';
+
+      body.appendChild(document.createTextNode(''));
+      body.appendChild(cursor);
+
+      msgEl.appendChild(header);
+      msgEl.appendChild(body);
+
+      this.removeWelcome();
+      this.els.chatMessages.appendChild(msgEl);
+    }
+
+    this.streamBuffer += text;
+    const streamMsg = document.getElementById('streaming-msg');
+    if (streamMsg) {
+      const body = streamMsg.querySelector('.wb-msg-body');
+      const cursor = body.querySelector('.wb-streaming');
+      // Update text before cursor
+      if (cursor) {
+        cursor.previousSibling.textContent = this.streamBuffer;
+      } else {
+        body.textContent = this.streamBuffer;
+      }
+    }
+    this.scrollToBottom();
+  }
+
+  finishStream(payload) {
+    this.isStreaming = false;
+    const streamMsg = document.getElementById('streaming-msg');
+    if (streamMsg) {
+      streamMsg.removeAttribute('id');
+      const body = streamMsg.querySelector('.wb-msg-body');
+      const cursor = body.querySelector('.wb-streaming');
+      if (cursor) cursor.remove();
+
+      // Use final content from server if available
+      const finalContent = payload.content || this.streamBuffer;
+      body.innerHTML = this.renderMarkdown(finalContent);
+    }
+    this.streamBuffer = '';
+
+    // Update tokens
+    if (payload.tokens) {
+      const current = this.state.tokens || {};
+      this.updateState({
+        tokens: {
+          inputTokens: (current.inputTokens || current.input || 0) + (payload.tokens.input || 0),
+          outputTokens: (current.outputTokens || current.output || 0) + (payload.tokens.output || 0),
+        }
+      });
+    }
+
+    this.scrollToBottom();
+  }
+
+  renderToolCall(payload) {
+    const el = document.createElement('div');
+    el.className = 'wb-msg wb-tool-detail';
+
+    const toolName = this.escapeHtml(payload.name || 'tool');
+    const inputStr = payload.input ? JSON.stringify(payload.input, null, 2) : '';
+
+    el.innerHTML = `
+      <div class="wb-tool-header" onclick="this.classList.toggle('expanded');this.nextElementSibling.classList.toggle('visible')">
+        <span>🔧</span>
+        <span class="wb-tool-name">${toolName}</span>
+        ${inputStr ? '<span class="wb-tool-chevron">▶</span>' : ''}
+      </div>
+      ${inputStr ? `<div class="wb-tool-params">${this.escapeHtml(inputStr)}</div>` : ''}
+    `;
+
+    this.els.chatMessages.appendChild(el);
+    this.scrollToBottom();
+  }
+
+  renderToolResult(payload) {
+    const el = document.createElement('div');
+    el.className = 'wb-msg wb-tool-detail';
+    const isError = !!payload.error;
+    const statusClass = isError ? 'wb-tool-status-err' : 'wb-tool-status-ok';
+    const icon = isError ? '❌' : '✅';
+    el.innerHTML = `<div class="wb-tool-status ${statusClass}">${icon} ${this.escapeHtml(payload.name || 'tool')} 完成</div>`;
+    this.els.chatMessages.appendChild(el);
+    this.scrollToBottom();
+  }
+
+  renderCommandOutput(output) {
+    const el = document.createElement('div');
+    el.className = 'wb-msg wb-msg-assistant';
+    const body = document.createElement('div');
+    body.className = 'wb-msg-body';
+    body.style.fontFamily = "'SF Mono', Monaco, monospace";
+    body.style.fontSize = '12px';
+    body.textContent = output;
+    el.appendChild(body);
+    this.els.chatMessages.appendChild(el);
+    this.scrollToBottom();
+  }
+
+  renderError(message) {
+    const el = document.createElement('div');
+    el.className = 'wb-msg wb-msg-assistant';
+    const body = document.createElement('div');
+    body.className = 'wb-msg-body';
+    body.style.borderColor = 'var(--wb-red)';
+    body.style.color = 'var(--wb-red)';
+    body.textContent = `❌ ${message}`;
+    el.appendChild(body);
+    this.els.chatMessages.appendChild(el);
+    this.scrollToBottom();
+  }
+
+  restoreHistory(history) {
+    // Render existing chat history from state snapshot
+    if (!history || history.length === 0) return;
+
+    this.removeWelcome();
+    for (const msg of history) {
+      if (msg.role === 'user') {
+        this.renderUserMessage(msg.content, 'cli');
+      } else if (msg.role === 'assistant') {
+        const el = document.createElement('div');
+        el.className = 'wb-msg wb-msg-assistant';
+        const header = document.createElement('div');
+        header.className = 'wb-msg-header';
+        header.innerHTML = '<span>AI</span>';
+        const body = document.createElement('div');
+        body.className = 'wb-msg-body';
+        body.innerHTML = this.renderMarkdown(msg.content);
+        el.appendChild(header);
+        el.appendChild(body);
+        this.els.chatMessages.appendChild(el);
+      }
+    }
+    this.scrollToBottom();
+  }
+
+  // ===== Side Panels =====
+
+  async loadSidePanels() {
+    this.loadFiles('.');
+    this.loadMemory();
+    this.loadTools();
+    this.loadGitStatus();
+  }
+
+  async loadFiles(dirPath) {
+    try {
+      const res = await fetch(`/api/files?path=${encodeURIComponent(dirPath)}`);
+      const data = await res.json();
+      this.els.currentPath.textContent = dirPath;
+
+      if (data.error) {
+        this.els.fileList.innerHTML = `<div class="wb-empty">${this.escapeHtml(data.error)}</div>`;
+        return;
+      }
+
+      const items = data.entries || [];
+      if (items.length === 0) {
+        this.els.fileList.innerHTML = '<div class="wb-empty">空目录</div>';
+        return;
+      }
+
+      this.els.fileList.innerHTML = '';
+
+      // Parent directory
+      if (dirPath !== '.') {
+        const parent = document.createElement('div');
+        parent.className = 'wb-file-item';
+        parent.innerHTML = `<span class="wb-file-icon">📁</span><span class="wb-file-name">..</span>`;
+        parent.onclick = () => {
+          const parts = dirPath.split('/');
+          parts.pop();
+          this.loadFiles(parts.join('/') || '.');
+        };
+        this.els.fileList.appendChild(parent);
+      }
+
+      for (const item of items) {
+        const el = document.createElement('div');
+        el.className = 'wb-file-item';
+        const icon = item.type === 'directory' ? '📁' : '📄';
+        const size = item.type === 'file' && item.size ? this.formatSize(item.size) : '';
+        el.innerHTML = `
+          <span class="wb-file-icon">${icon}</span>
+          <span class="wb-file-name">${this.escapeHtml(item.name)}</span>
+          <span class="wb-file-size">${size}</span>
+        `;
+        if (item.type === 'directory') {
+          el.onclick = () => this.loadFiles(dirPath === '.' ? item.name : `${dirPath}/${item.name}`);
+        } else {
+          el.onclick = () => this.openFilePreview(dirPath === '.' ? item.name : `${dirPath}/${item.name}`);
+        }
+        this.els.fileList.appendChild(el);
+      }
+    } catch {
+      this.els.fileList.innerHTML = '<div class="wb-empty">无法加载文件</div>';
+    }
+  }
+
+  async loadMemory() {
+    try {
+      const res = await fetch('/api/memory');
+      const data = await res.json();
+
+      if (data.error) {
+        this.els.memoryStats.innerHTML = `<div class="wb-empty">${this.escapeHtml(data.error)}</div>`;
+        return;
+      }
+
+      const layers = data.layers || {};
+      let statsHtml = '';
+      let totalCount = 0;
+
+      for (const [layer, info] of Object.entries(layers)) {
+        const count = info.count || 0;
+        totalCount += count;
+        statsHtml += `
+          <div class="wb-memory-stat">
+            <span class="wb-memory-stat-label">${this.escapeHtml(layer)}</span>
+            <span class="wb-memory-stat-value">${count} 条</span>
+          </div>`;
+      }
+
+      if (totalCount === 0) {
+        statsHtml = '<div class="wb-empty">暂无记忆</div>';
+      }
+
+      this.els.memoryStats.innerHTML = statsHtml;
+
+      // Load records
+      if (data.records && data.records.length > 0) {
+        this.els.memoryList.innerHTML = '';
+        for (const r of data.records.slice(0, 30)) {
+          const el = document.createElement('div');
+          el.className = 'wb-memory-item';
+          const tags = (r.tags || []).map(t => `#${t}`).join(' ');
+          el.innerHTML = `
+            <span class="wb-memory-category">${this.escapeHtml(r.category)}</span>
+            <div class="wb-memory-content">${this.escapeHtml(r.content)}</div>
+            ${tags ? `<div class="wb-memory-tags">${this.escapeHtml(tags)}</div>` : ''}
+          `;
+          this.els.memoryList.appendChild(el);
+        }
+      }
+    } catch {
+      this.els.memoryStats.innerHTML = '<div class="wb-empty">无法加载记忆</div>';
+    }
+  }
+
+  async loadTools() {
+    try {
+      const res = await fetch('/api/tools');
+      const data = await res.json();
+
+      if (!data.tools || data.tools.length === 0) {
+        this.els.toolList.innerHTML = '<div class="wb-empty">无注册工具</div>';
+        return;
+      }
+
+      this.els.toolList.innerHTML = '';
+      for (const tool of data.tools) {
+        const el = document.createElement('div');
+        el.className = 'wb-tool-item';
+        el.innerHTML = `
+          <div class="wb-tool-name">${this.escapeHtml(tool.name)}</div>
+          <div class="wb-tool-desc">${this.escapeHtml((tool.description || '').slice(0, 100))}</div>
+        `;
+        this.els.toolList.appendChild(el);
+      }
+    } catch {
+      this.els.toolList.innerHTML = '<div class="wb-empty">无法加载工具</div>';
+    }
+  }
+
+  // ===== Events =====
+
+  bindEvents() {
+    // Send button
+    this.els.btnSend.addEventListener('click', () => this.sendMessage());
+
+    // Enter to send, Shift+Enter for newline
+    this.els.chatInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        this.sendMessage();
+      }
+    });
+
+    // Auto-resize textarea
+    this.els.chatInput.addEventListener('input', () => {
+      const el = this.els.chatInput;
+      el.style.height = 'auto';
+      el.style.height = Math.min(el.scrollHeight, 150) + 'px';
+    });
+
+    // Tab navigation
+    document.querySelectorAll('.wb-nav-item').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const tab = btn.dataset.tab;
+        this.switchTab(tab);
+      });
+    });
+
+    // Shortcut commands
+    document.querySelectorAll('.wb-shortcut').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const cmd = btn.dataset.cmd;
+        if (cmd) {
+          this.sendCommand(cmd);
+        }
+      });
+    });
+
+    // Memory search
+    const searchBtn = document.getElementById('btnMemorySearch');
+    if (searchBtn) {
+      searchBtn.addEventListener('click', () => this.searchMemory());
+    }
+    if (this.els.memorySearch) {
+      this.els.memorySearch.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') this.searchMemory();
+      });
+      this.els.memorySearch.addEventListener('input', () => {
+        clearTimeout(this._memSearchTimer);
+        this._memSearchTimer = setTimeout(() => this.searchMemory(), 300);
+      });
+    }
+
+    // File preview modal close
+    const closeBtn = document.getElementById('btnClosePreview');
+    if (closeBtn) {
+      closeBtn.addEventListener('click', () => this.closeFilePreview());
+    }
+    if (this.els.filePreviewModal) {
+      this.els.filePreviewModal.addEventListener('click', (e) => {
+        if (e.target === this.els.filePreviewModal) this.closeFilePreview();
+      });
+    }
+
+    // Global Escape key
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') this.closeFilePreview();
+    });
+  }
+
+  sendMessage() {
+    const text = this.els.chatInput.value.trim();
+    if (!text) return;
+
+    this.els.chatInput.value = '';
+    this.els.chatInput.style.height = 'auto';
+
+    // Render in chat
+    this.renderUserMessage(text, 'gui');
+
+    // Send via WebSocket
+    this.send('user_input', { content: text });
+  }
+
+  sendCommand(cmd) {
+    this.send('slash_command', { command: cmd });
+    // Show in chat
+    const el = document.createElement('div');
+    el.className = 'wb-msg wb-msg-user';
+    const body = document.createElement('div');
+    body.className = 'wb-msg-body';
+    body.style.fontFamily = "'SF Mono', Monaco, monospace";
+    body.style.fontSize = '12px';
+    body.textContent = cmd;
+    el.appendChild(body);
+    this.els.chatMessages.appendChild(el);
+    this.scrollToBottom();
+  }
+
+  switchTab(tab) {
+    // Update nav
+    document.querySelectorAll('.wb-nav-item').forEach(btn => {
+      btn.classList.toggle('active', btn.dataset.tab === tab);
+    });
+
+    // Update panels
+    document.querySelectorAll('.wb-tab-panel').forEach(panel => {
+      panel.classList.toggle('active', panel.id === `panel-${tab}`);
+    });
+
+    // Save preference
+    try { localStorage.setItem('wb-active-tab', tab); } catch {}
+  }
+
+  restoreActiveTab() {
+    try {
+      const saved = localStorage.getItem('wb-active-tab');
+      if (saved) {
+        // 验证 tab 是否存在于 DOM 中
+        const validTab = document.querySelector(`.wb-nav-item[data-tab="${saved}"]`);
+        if (validTab) {
+          this.switchTab(saved);
+        }
+      }
+    } catch {}
+  }
+
+  // ===== Git Status =====
+
+  async loadGitStatus() {
+    try {
+      const res = await fetch('/api/git/status');
+      const data = await res.json();
+      if (data.available) {
+        this.els.ctxGitBranch.textContent = data.branch || '--';
+        if (data.uncommitted) {
+          this.els.ctxGitStatus.textContent = data.summary || '有未提交更改';
+          this.els.ctxGitStatus.style.color = 'var(--wb-orange)';
+        } else {
+          this.els.ctxGitStatus.textContent = 'Clean';
+          this.els.ctxGitStatus.style.color = 'var(--wb-green)';
+        }
+      } else {
+        this.els.ctxGitBranch.textContent = 'N/A';
+        this.els.ctxGitStatus.textContent = '非 Git 仓库';
+      }
+    } catch {
+      this.els.ctxGitBranch.textContent = '--';
+      this.els.ctxGitStatus.textContent = '--';
+    }
+  }
+
+  // ===== File Preview =====
+
+  async openFilePreview(filePath) {
+    try {
+      const res = await fetch(`/api/files/read?path=${encodeURIComponent(filePath)}`);
+      const data = await res.json();
+      if (data.error) {
+        this.els.previewContent.textContent = `Error: ${data.error}`;
+      } else {
+        const content = data.content || '';
+        const MAX_PREVIEW = 5000;
+        if (content.length > MAX_PREVIEW) {
+          this.els.previewContent.textContent = content.slice(0, MAX_PREVIEW) + '\n\n--- 文件过大，仅显示前 5000 字符 ---';
+        } else {
+          this.els.previewContent.textContent = content;
+        }
+      }
+      this.els.previewFileName.textContent = filePath;
+      this.els.filePreviewModal.classList.add('visible');
+    } catch {
+      this.els.previewContent.textContent = '无法加载文件';
+      this.els.previewFileName.textContent = filePath;
+      this.els.filePreviewModal.classList.add('visible');
+    }
+  }
+
+  closeFilePreview() {
+    this.els.filePreviewModal.classList.remove('visible');
+  }
+
+  // ===== Memory Search =====
+
+  async searchMemory() {
+    const query = this.els.memorySearch?.value?.trim();
+    if (!query) return;
+
+    this.els.memoryList.innerHTML = '<div class="wb-empty">搜索中…</div>';
+
+    try {
+      const res = await fetch('/api/memory/search', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query }),
+      });
+      const data = await res.json();
+
+      if (!data.results || data.results.length === 0) {
+        this.els.memoryList.innerHTML = '<div class="wb-empty">未找到匹配记忆</div>';
+        return;
+      }
+
+      this.els.memoryList.innerHTML = '';
+      for (const r of data.results) {
+        const el = document.createElement('div');
+        el.className = 'wb-memory-item';
+        const tags = (r.tags || []).map(t => `#${t}`).join(' ');
+        const score = r.score ? ` (${(r.score * 100).toFixed(0)}%)` : '';
+        el.innerHTML = `
+          <span class="wb-memory-category">${this.escapeHtml(r.category)}${score}</span>
+          <div class="wb-memory-content">${this.escapeHtml(r.content)}</div>
+          ${tags ? `<div class="wb-memory-tags">${this.escapeHtml(tags)}</div>` : ''}
+        `;
+        this.els.memoryList.appendChild(el);
+      }
+    } catch {
+      this.els.memoryList.innerHTML = '<div class="wb-empty">搜索失败</div>';
+    }
+  }
+
+  // ===== Helpers =====
+
+  removeWelcome() {
+    const welcome = this.els.chatMessages.querySelector('.wb-welcome-msg');
+    if (welcome) welcome.remove();
+  }
+
+  scrollToBottom() {
+    requestAnimationFrame(() => {
+      this.els.chatMessages.scrollTop = this.els.chatMessages.scrollHeight;
+    });
+  }
+
+  escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  renderMarkdown(text) {
+    if (!text) return '';
+    // Enhanced markdown rendering
+    let html = this.escapeHtml(text);
+
+    // Code blocks (must be first)
+    html = html.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre><code>$2</code></pre>');
+
+    // Horizontal rules
+    html = html.replace(/^(-{3,}|_{3,}|\*{3,})$/gm, '<hr>');
+
+    // Headings
+    html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+    html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+    html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
+
+    // Blockquotes
+    html = html.replace(/^&gt; (.+)$/gm, '<blockquote>$1</blockquote>');
+
+    // Unordered lists
+    html = html.replace(/^[*\-+] (.+)$/gm, '<li>$1</li>');
+    html = html.replace(/((?:<li>.*<\/li>\n?)+)/g, '<ul>$1</ul>');
+
+    // Ordered lists
+    html = html.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
+
+    // Links
+    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+
+    // Inline code
+    html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+    // Bold
+    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+
+    // Italic
+    html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+
+    // Strikethrough
+    html = html.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+
+    // Line breaks (but not inside pre blocks)
+    html = html.replace(/\n/g, '<br>');
+
+    // Clean up: remove <br> after block elements
+    html = html.replace(/<\/(h[1-3]|hr|pre|ul|ol|blockquote|li)><br>/g, '</$1>');
+    html = html.replace(/<br><(h[1-3]|hr|pre|ul|ol|blockquote)/g, '<$1');
+
+    return html;
+  }
+
+  shortModel(model) {
+    if (!model) return '--';
+    // Extract short name
+    const parts = model.split('/');
+    const name = parts[parts.length - 1];
+    if (name.length > 20) {
+      return name.slice(0, 18) + '…';
+    }
+    return name;
+  }
+
+  formatNumber(n) {
+    if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+    if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
+    return String(n);
+  }
+
+  formatSize(bytes) {
+    if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + ' MB';
+    if (bytes >= 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return bytes + ' B';
+  }
+
+  // ===== Toast Notification =====
+
+  showToast(message, type = 'info') {
+    let container = document.getElementById('toastContainer');
+    if (!container) {
+      container = document.createElement('div');
+      container.id = 'toastContainer';
+      container.className = 'wb-toast-container';
+      document.body.appendChild(container);
+    }
+    const toast = document.createElement('div');
+    toast.className = `wb-toast wb-toast-${type}`;
+    toast.textContent = message;
+    container.appendChild(toast);
+    setTimeout(() => { toast.classList.add('wb-toast-out'); }, 3000);
+    setTimeout(() => { toast.remove(); }, 3500);
+  }
+
+  // ===== Team Module =====
+
+  initTeam() {
+    this.teamWs = null;
+    this.teamAuth = null;
+    this.teamMembers = [];
+    this.teamTasks = [];
+    this.teamTypingTimer = null;
+
+    // Try restore saved team session
+    try {
+      const saved = localStorage.getItem('wb-team-auth');
+      if (saved) {
+        this.teamAuth = JSON.parse(saved);
+        this.onTeamJoined();
+      }
+    } catch {}
+
+    this.bindTeamEvents();
+  }
+
+  bindTeamEvents() {
+    // Create team
+    const btnCreate = document.getElementById('btnTeamCreate');
+    if (btnCreate) btnCreate.addEventListener('click', () => this.createTeam());
+
+    // Join team
+    const btnJoin = document.getElementById('btnTeamJoin');
+    if (btnJoin) btnJoin.addEventListener('click', () => this.joinTeam());
+
+    // Sub-tabs
+    document.querySelectorAll('.wb-subtab').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const subtab = btn.dataset.subtab;
+        document.querySelectorAll('.wb-subtab').forEach(b => b.classList.toggle('active', b.dataset.subtab === subtab));
+        document.querySelectorAll('.wb-subtab-panel').forEach(p => p.classList.toggle('active', p.id === `subtab-${subtab}`));
+      });
+    });
+
+    // Add task
+    const btnAddTask = document.getElementById('btnAddTask');
+    if (btnAddTask) btnAddTask.addEventListener('click', () => {
+      const form = document.getElementById('taskAddForm');
+      form.style.display = form.style.display === 'none' ? 'flex' : 'none';
+    });
+
+    const btnSubmit = document.getElementById('btnTaskSubmit');
+    if (btnSubmit) btnSubmit.addEventListener('click', () => this.createTask());
+
+    // Team chat send
+    const btnChatSend = document.getElementById('btnTeamChatSend');
+    if (btnChatSend) btnChatSend.addEventListener('click', () => this.sendTeamChat());
+    const chatInput = document.getElementById('teamChatInput');
+    if (chatInput) {
+      chatInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') this.sendTeamChat();
+        else this.sendTeamTyping();
+      });
+    }
+
+    // Copy join code
+    const codeDisplay = document.getElementById('teamJoinCodeDisplay');
+    if (codeDisplay) codeDisplay.addEventListener('click', () => {
+      navigator.clipboard.writeText(codeDisplay.textContent).catch(() => {});
+    });
+
+    // Task edit modal
+    const btnTaskSave = document.getElementById('btnTaskSave');
+    if (btnTaskSave) btnTaskSave.addEventListener('click', () => this.saveTaskEdit());
+    const btnTaskDelete = document.getElementById('btnTaskDelete');
+    if (btnTaskDelete) btnTaskDelete.addEventListener('click', () => this.deleteTask());
+
+    // Run network
+    const btnRun = document.getElementById('btnRunNetwork');
+    if (btnRun) btnRun.addEventListener('click', () => this.runNetworkRound());
+  }
+
+  async createTeam() {
+    const name = document.getElementById('teamCreateName')?.value?.trim();
+    const ownerName = document.getElementById('teamCreateOwner')?.value?.trim() || 'owner';
+    if (!name) return;
+    const btn = document.getElementById('btnTeamCreate');
+    if (btn) { btn.disabled = true; btn.textContent = '创建中…'; }
+    try {
+      const res = await fetch('/api/team/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, ownerName }),
+      });
+      const data = await res.json();
+      if (data.error) { alert(data.error); return; }
+      this.teamAuth = { teamId: data.team.id, token: data.ownerToken, memberName: ownerName };
+      try { localStorage.setItem('wb-team-auth', JSON.stringify(this.teamAuth)); } catch {}
+      document.getElementById('teamCreateName').value = '';
+      document.getElementById('teamCreateOwner').value = '';
+      this.onTeamJoined();
+    } catch (e) { this.showToast('创建失败: ' + e.message, 'error'); } finally {
+      if (btn) { btn.disabled = false; btn.textContent = '创建'; }
+    }
+  }
+
+  async joinTeam() {
+    const joinCode = document.getElementById('teamJoinCode')?.value?.trim();
+    const memberName = document.getElementById('teamJoinName')?.value?.trim();
+    if (!joinCode || !memberName) return;
+    const btn = document.getElementById('btnTeamJoin');
+    if (btn) { btn.disabled = true; btn.textContent = '加入中…'; }
+    try {
+      const res = await fetch('/api/team/join', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ joinCode, memberName }),
+      });
+      const data = await res.json();
+      if (data.error) { alert(data.error); return; }
+      this.teamAuth = { teamId: data.team.id, token: data.token, memberName: data.member.name };
+      try { localStorage.setItem('wb-team-auth', JSON.stringify(this.teamAuth)); } catch {}
+      document.getElementById('teamJoinCode').value = '';
+      document.getElementById('teamJoinName').value = '';
+      this.onTeamJoined();
+    } catch (e) { this.showToast('加入失败: ' + e.message, 'error'); } finally {
+      if (btn) { btn.disabled = false; btn.textContent = '加入'; }
+    }
+  }
+
+  async onTeamJoined() {
+    document.getElementById('teamJoinSection').style.display = 'none';
+    document.getElementById('teamContent').style.display = '';
+    document.getElementById('networkNeedTeam').style.display = 'none';
+    document.getElementById('networkContent').style.display = '';
+
+    const safeCall = (fn, label) => fn.call(this).catch(e => console.warn(`[${label}]`, e));
+    await safeCall(this.loadTeamStatus, 'TeamStatus');
+    await safeCall(this.loadTeamTasks, 'TeamTasks');
+    this.connectTeamWS();
+    safeCall(this.loadNetworkProfile, 'NetworkProfile');
+    safeCall(this.loadNetworkRounds, 'NetworkRounds');
+    safeCall(this.loadNetworkDigest, 'NetworkDigest');
+  }
+
+  async loadTeamStatus() {
+    if (!this.teamAuth) return;
+    try {
+      const res = await fetch(`/api/team/${this.teamAuth.teamId}/status`, {
+        headers: { 'Authorization': `Bearer ${this.teamAuth.token}` },
+      });
+      const data = await res.json();
+      if (data.error) return;
+
+      document.getElementById('teamName').textContent = data.team?.name || '--';
+      document.getElementById('teamJoinCodeDisplay').textContent = data.team?.joinCode || '--';
+
+      this.teamMembers = data.members || [];
+      const online = this.teamMembers.filter(m => m.status === 'online').length;
+      document.getElementById('teamOnlineCount').textContent = `${online} 在线`;
+
+      this.renderMembers();
+    } catch (e) { console.warn('[Team] loadStatus', e); }
+  }
+
+  renderMembers() {
+    const list = document.getElementById('memberList');
+    if (!list) return;
+    list.innerHTML = '';
+    for (const m of this.teamMembers) {
+      const el = document.createElement('div');
+      el.className = 'wb-member-item';
+      const dotClass = m.status === 'online' ? 'wb-member-dot-online' : 'wb-member-dot-offline';
+      el.innerHTML = `
+        <span class="wb-member-dot ${dotClass}"></span>
+        <span class="wb-member-name">${this.escapeHtml(m.name)}</span>
+        <span class="wb-member-role">${this.escapeHtml(m.role)}</span>
+      `;
+      list.appendChild(el);
+    }
+  }
+
+  // ===== Team Tasks =====
+
+  async loadTeamTasks() {
+    if (!this.teamAuth) return;
+    try {
+      const res = await fetch(`/api/team/${this.teamAuth.teamId}/tasks`, {
+        headers: { 'Authorization': `Bearer ${this.teamAuth.token}` },
+      });
+      const data = await res.json();
+      this.teamTasks = data.tasks || [];
+      this.renderKanban();
+    } catch (e) { console.warn('[Team] loadTasks', e); }
+  }
+
+  renderKanban() {
+    const cols = { todo: [], doing: [], review: [], done: [] };
+    for (const t of this.teamTasks) {
+      const status = t.status || 'todo';
+      if (cols[status]) cols[status].push(t);
+    }
+
+    for (const [status, tasks] of Object.entries(cols)) {
+      const container = document.getElementById(`col-${status}`);
+      if (!container) continue;
+      container.innerHTML = '';
+      for (const t of tasks) {
+        const card = document.createElement('div');
+        card.className = 'wb-task-card';
+        card.dataset.priority = t.priority || 'B';
+        card.onclick = () => this.openTaskEdit(t);
+        card.innerHTML = `
+          <div class="wb-task-title">${this.escapeHtml(t.title)}</div>
+          <div class="wb-task-meta">
+            <span class="wb-task-priority">${t.priority || 'B'}</span>
+            ${t.assignee ? `<span class="wb-task-assignee">${this.escapeHtml(t.assignee)}</span>` : ''}
+          </div>
+        `;
+        container.appendChild(card);
+      }
+    }
+  }
+
+  async createTask() {
+    const title = document.getElementById('taskTitle')?.value?.trim();
+    const priority = document.getElementById('taskPriority')?.value || 'A';
+    if (!title || !this.teamAuth) return;
+
+    try {
+      const res = await fetch(`/api/team/${this.teamAuth.teamId}/tasks`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${this.teamAuth.token}` },
+        body: JSON.stringify({ title, priority }),
+      });
+      const data = await res.json();
+      if (data.error) { this.showToast(data.error, 'error'); return; }
+        document.getElementById('taskTitle').value = '';
+        document.getElementById('taskAddForm').style.display = 'none';
+        await this.loadTeamTasks();
+    } catch (e) { this.showToast('添加任务失败: ' + e.message, 'error'); }
+  }
+
+  openTaskEdit(task) {
+    document.getElementById('editTaskId').value = task.id;
+    document.getElementById('editTaskTitle').value = task.title;
+    document.getElementById('editTaskStatus').value = task.status || 'todo';
+    document.getElementById('editTaskPriority').value = task.priority || 'B';
+    document.getElementById('editTaskAssignee').value = task.assignee || '';
+    document.getElementById('taskEditModal').classList.add('visible');
+  }
+
+  async saveTaskEdit() {
+    const id = document.getElementById('editTaskId').value;
+    if (!id || !this.teamAuth) return;
+
+    const updates = {
+      title: document.getElementById('editTaskTitle').value,
+      status: document.getElementById('editTaskStatus').value,
+      priority: document.getElementById('editTaskPriority').value,
+      assignee: document.getElementById('editTaskAssignee').value || undefined,
+    };
+
+    try {
+      await fetch(`/api/team/${this.teamAuth.teamId}/tasks/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${this.teamAuth.token}` },
+        body: JSON.stringify(updates),
+      });
+      document.getElementById('taskEditModal').classList.remove('visible');
+      await this.loadTeamTasks();
+    } catch (e) { this.showToast('保存失败: ' + e.message, 'error'); }
+  }
+
+  async deleteTask() {
+    const id = document.getElementById('editTaskId').value;
+    if (!id || !this.teamAuth) return;
+    try {
+      await fetch(`/api/team/${this.teamAuth.teamId}/tasks/${id}`, {
+        method: 'DELETE',
+        headers: { 'Authorization': `Bearer ${this.teamAuth.token}` },
+      });
+      document.getElementById('taskEditModal').classList.remove('visible');
+      await this.loadTeamTasks();
+    } catch (e) { this.showToast('删除失败: ' + e.message, 'error'); }
+  }
+
+  // ===== Team WebSocket =====
+
+  connectTeamWS() {
+    if (!this.teamAuth || this.teamWs) return;
+
+    const wsProto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${wsProto}//${location.host}/ws/team`;
+    this.teamWs = new WebSocket(wsUrl);
+
+    this.teamWs.onopen = () => {
+      this.teamWs.send(JSON.stringify({
+        type: 'auth',
+        payload: { teamId: this.teamAuth.teamId, token: this.teamAuth.token },
+      }));
+    };
+
+    this.teamWs.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data);
+        this.handleTeamMessage(msg);
+      } catch (e) { console.warn('[TeamWS] message parse error', e); }
+    };
+
+    this.teamWs.onclose = () => {
+      this.teamWs = null;
+      // Reconnect after 3s
+      setTimeout(() => this.connectTeamWS(), 3000);
+    };
+  }
+
+  handleTeamMessage(msg) {
+    switch (msg.type) {
+      case 'auth_ok':
+        break;
+      case 'auth_fail':
+        this.teamAuth = null;
+        try { localStorage.removeItem('wb-team-auth'); } catch {}
+        document.getElementById('teamJoinSection').style.display = '';
+        document.getElementById('teamContent').style.display = 'none';
+        break;
+      case 'member_joined':
+      case 'member_left':
+        this.loadTeamStatus();
+        break;
+      case 'task_created':
+      case 'task_updated':
+      case 'task_deleted':
+        this.loadTeamTasks();
+        break;
+      case 'chat_message':
+        this.appendTeamChat(msg.payload);
+        break;
+      case 'chat_typing':
+        this.showTeamTyping(msg.payload);
+        break;
+      // Network events
+      case 'network_round_start':
+        this.loadNetworkRounds();
+        break;
+      case 'network_digest_ready':
+        this.loadNetworkDigest();
+        break;
+      case 'network_dialogue_complete':
+      case 'network_match_found':
+        this.loadNetworkRounds();
+        break;
+    }
+  }
+
+  // ===== Team Chat =====
+
+  sendTeamChat() {
+    const input = document.getElementById('teamChatInput');
+    const content = input?.value?.trim();
+    if (!content || !this.teamWs) return;
+    input.value = '';
+    this.teamWs.send(JSON.stringify({
+      type: 'chat_message',
+      payload: { content },
+    }));
+  }
+
+  sendTeamTyping() {
+    if (!this.teamWs || this.teamTypingTimer) return;
+    this.teamWs.send(JSON.stringify({ type: 'chat_typing', payload: {} }));
+    this.teamTypingTimer = setTimeout(() => { this.teamTypingTimer = null; }, 2000);
+  }
+
+  appendTeamChat(payload) {
+    const container = document.getElementById('teamChatMessages');
+    if (!container) return;
+    // Remove empty placeholder
+    const empty = container.querySelector('.wb-empty');
+    if (empty) empty.remove();
+
+    const el = document.createElement('div');
+    el.className = 'wb-team-chat-msg';
+    const time = payload.timestamp ? new Date(payload.timestamp).toLocaleTimeString() : '';
+    el.innerHTML = `
+      <span class="wb-team-chat-sender">${this.escapeHtml(payload.senderName || '???')}</span>
+      <span class="wb-team-chat-text">${this.escapeHtml(payload.content)}</span>
+      <span class="wb-team-chat-time">${time}</span>
+    `;
+    container.appendChild(el);
+    container.scrollTop = container.scrollHeight;
+  }
+
+  showTeamTyping(payload) {
+    const el = document.getElementById('teamTyping');
+    if (!el) return;
+    el.textContent = `${payload.memberName || '???'} 正在输入…`;
+    clearTimeout(this._typingClear);
+    this._typingClear = setTimeout(() => { el.textContent = ''; }, 3000);
+  }
+
+  // ===== Network Module =====
+
+  async loadNetworkProfile() {
+    if (!this.teamAuth) return;
+    try {
+      const res = await fetch(`/api/network/${this.teamAuth.teamId}/profile`, {
+        headers: { 'Authorization': `Bearer ${this.teamAuth.token}` },
+      });
+      const data = await res.json();
+      if (data.error) return;
+
+      const profile = data.profile || {};
+      this.renderTagList('profileSkills', profile.skills || [], 'skills');
+      this.renderTagList('profileNeeds', profile.needs || [], 'needs');
+      this.renderTagList('profileOfferings', profile.offerings || [], 'offerings');
+    } catch (e) { console.warn('[Network] loadProfile', e); }
+  }
+
+  renderTagList(containerId, tags, field) {
+    const el = document.getElementById(containerId);
+    if (!el) return;
+    el.innerHTML = '';
+    for (const tag of tags) {
+      const span = document.createElement('span');
+      span.className = 'wb-tag';
+      span.textContent = tag + ' ';
+      const removeBtn = document.createElement('span');
+      removeBtn.className = 'wb-tag-remove';
+      removeBtn.textContent = '\u00d7';
+      removeBtn.addEventListener('click', () => this.removeProfileTag(field, tag));
+      span.appendChild(removeBtn);
+      el.appendChild(span);
+    }
+  }
+
+  async addProfileTag(field, inputId) {
+    const input = document.getElementById(inputId);
+    const value = input?.value?.trim();
+    if (!value || !this.teamAuth) return;
+    input.value = '';
+
+    try {
+      // Get current profile
+      const res = await fetch(`/api/network/${this.teamAuth.teamId}/profile`, {
+        headers: { 'Authorization': `Bearer ${this.teamAuth.token}` },
+      });
+      const data = await res.json();
+      const current = data.profile?.[field] || [];
+      if (current.includes(value)) return;
+
+      await fetch(`/api/network/${this.teamAuth.teamId}/profile`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${this.teamAuth.token}` },
+        body: JSON.stringify({ field, value: [...current, value] }),
+      });
+      this.loadNetworkProfile();
+    } catch (e) { console.warn('[Network] addProfileTag', e); }
+  }
+
+  async removeProfileTag(field, tag) {
+    if (!this.teamAuth) return;
+    try {
+      const res = await fetch(`/api/network/${this.teamAuth.teamId}/profile`, {
+        headers: { 'Authorization': `Bearer ${this.teamAuth.token}` },
+      });
+      const data = await res.json();
+      const current = (data.profile?.[field] || []).filter(t => t !== tag);
+
+      await fetch(`/api/network/${this.teamAuth.teamId}/profile`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${this.teamAuth.token}` },
+        body: JSON.stringify({ field, value: current }),
+      });
+      this.loadNetworkProfile();
+    } catch (e) { console.warn('[Network] removeProfileTag', e); }
+  }
+
+  async runNetworkRound() {
+    if (!this.teamAuth) return;
+    const btn = document.getElementById('btnRunNetwork');
+    if (btn) { btn.disabled = true; btn.textContent = '匹配中…'; }
+    try {
+      await fetch(`/api/network/${this.teamAuth.teamId}/run`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${this.teamAuth.token}` },
+      });
+      await this.loadNetworkRounds();
+      await this.loadNetworkDigest();
+    } catch {} finally {
+      if (btn) { btn.disabled = false; btn.textContent = '运行匹配'; }
+    }
+  }
+
+  async loadNetworkRounds() {
+    if (!this.teamAuth) return;
+    try {
+      const res = await fetch(`/api/network/${this.teamAuth.teamId}/rounds`, {
+        headers: { 'Authorization': `Bearer ${this.teamAuth.token}` },
+      });
+      const data = await res.json();
+      const rounds = data.rounds || [];
+      const container = document.getElementById('networkRoundList');
+      if (!container) return;
+
+      if (rounds.length === 0) {
+        container.innerHTML = '<div class="wb-empty">暂无轮次</div>';
+        return;
+      }
+
+      container.innerHTML = '';
+      for (const r of rounds.slice(0, 20)) {
+        const card = document.createElement('div');
+        card.className = 'wb-round-card';
+        const time = r.startedAt ? new Date(r.startedAt).toLocaleString() : '--';
+        const matchCount = r.matchCount || r.matches?.length || 0;
+        const statusClass = `wb-round-status-${r.status || 'completed'}`;
+        card.innerHTML = `
+          <div class="wb-round-header" onclick="this.nextElementSibling.classList.toggle('visible')">
+            <span class="wb-round-time">${time}</span>
+            <span class="wb-round-matches">${matchCount} 对匹配</span>
+            <span class="wb-round-status ${statusClass}">${r.status || '--'}</span>
+          </div>
+          <div class="wb-round-detail" id="round-${r.id}">
+            <div class="wb-empty">点击加载详情…</div>
+          </div>
+        `;
+        // Lazy load detail
+        card.querySelector('.wb-round-header').addEventListener('click', () => this.loadRoundDetail(r.id));
+        container.appendChild(card);
+      }
+    } catch {}
+  }
+
+  async loadRoundDetail(roundId) {
+    if (!this.teamAuth) return;
+    const container = document.getElementById(`round-${roundId}`);
+    if (!container || container.dataset.loaded) return;
+    container.dataset.loaded = 'true';
+
+    try {
+      const res = await fetch(`/api/network/${this.teamAuth.teamId}/rounds/${roundId}`, {
+        headers: { 'Authorization': `Bearer ${this.teamAuth.token}` },
+      });
+      const data = await res.json();
+      const matches = data.matches || [];
+
+      if (matches.length === 0) {
+        container.innerHTML = '<div class="wb-empty">无匹配</div>';
+        return;
+      }
+
+      container.innerHTML = '';
+      for (const m of matches) {
+        const el = document.createElement('div');
+        el.className = 'wb-match-pair';
+        el.innerHTML = `
+          <div class="wb-match-names">${this.escapeHtml(m.memberA?.name || '?')} ↔ ${this.escapeHtml(m.memberB?.name || '?')}</div>
+          <div class="wb-match-reason">${this.escapeHtml(m.reason || m.suggestedTopic || '')}</div>
+          <span class="wb-match-score">匹配度: ${m.score || 0}%</span>
+        `;
+        container.appendChild(el);
+      }
+    } catch {
+      container.innerHTML = '<div class="wb-empty">加载失败</div>';
+    }
+  }
+
+  async loadNetworkDigest() {
+    if (!this.teamAuth) return;
+    try {
+      const res = await fetch(`/api/network/${this.teamAuth.teamId}/digest`, {
+        headers: { 'Authorization': `Bearer ${this.teamAuth.token}` },
+      });
+      if (!res.ok) return;
+      const data = await res.json();
+      const container = document.getElementById('networkDigest');
+      if (!container) return;
+
+      const digest = data.digest;
+      if (!digest) {
+        container.innerHTML = '<div class="wb-empty">暂无摘要 — 运行一次匹配后将生成</div>';
+        return;
+      }
+
+      const entries = digest.matches || [];
+      if (entries.length === 0) {
+        container.innerHTML = '<div class="wb-empty">暂无匹配结果</div>';
+        return;
+      }
+
+      container.innerHTML = '';
+      for (const m of entries) {
+        const card = document.createElement('div');
+        card.className = 'wb-digest-card';
+        const actions = (m.actionItems || []).map(a => `<li>${this.escapeHtml(a)}</li>`).join('');
+        const insights = (m.keyInsights || []).map(i => this.escapeHtml(i)).join(' | ');
+        card.innerHTML = `
+          <div class="wb-digest-partner">${this.escapeHtml(m.partnerName || '?')}</div>
+          <div class="wb-digest-value">${this.escapeHtml(m.valueForMe || '')}</div>
+          ${actions ? `<ul class="wb-digest-actions">${actions}</ul>` : ''}
+          ${insights ? `<div class="wb-digest-insights">${insights}</div>` : ''}
+        `;
+        container.appendChild(card);
+      }
+    } catch (e) { console.warn('[Network] loadDigest', e); }
+  }
+
+  // ===== Workspace Profile =====
+
+  async loadWorkspaceProfile() {
+    try {
+      const res = await fetch('/api/workspace-profile');
+      if (!res.ok) return;
+      const data = await res.json();
+      if (data.profile) {
+        this.applyProfile(data.profile);
+      }
+    } catch (e) {
+      console.warn('[Profile] loadWorkspaceProfile', e);
+    }
+  }
+
+  applyProfile(profile) {
+    if (!profile) return;
+    this.workspaceProfile = profile;
+
+    // 1. 显示/隐藏导航 Tab（team 和 network 始终保留）
+    const ALWAYS_ENABLED = ['chat', 'files', 'memory', 'tools', 'team', 'network'];
+    const profileModules = Array.isArray(profile.enabledModules) ? profile.enabledModules : [];
+    const enabledModules = new Set([...ALWAYS_ENABLED, ...profileModules]);
+    document.querySelectorAll('.wb-nav-item[data-tab]').forEach(btn => {
+      const tab = btn.dataset.tab;
+      if (tab && !enabledModules.has(tab)) {
+        btn.style.display = 'none';
+      } else {
+        btn.style.display = '';
+      }
+    });
+
+    // 确保当前 tab 仍可见，否则切到 chat
+    try {
+      const saved = localStorage.getItem('wb-active-tab');
+      if (saved && !enabledModules.has(saved)) {
+        this.switchTab('chat');
+      }
+    } catch {}
+
+    // 2. 替换欢迎文案
+    const welcomeText = document.querySelector('.wb-welcome-text');
+    const welcomeSub = document.querySelector('.wb-welcome-sub');
+    if (welcomeText && profile.workspaceLabel) {
+      const label = profile.workspaceLabel;
+      welcomeText.textContent = label.length > 20 ? label.slice(0, 18) + '…' : label;
+    }
+    if (welcomeSub && profile.welcomeMessage) {
+      welcomeSub.textContent = profile.welcomeMessage;
+    }
+
+    // 3. 渲染个性化快捷命令
+    const shortcutsEl = document.getElementById('shortcuts');
+    const quickCommands = Array.isArray(profile.quickCommands) ? profile.quickCommands : [];
+    if (shortcutsEl && quickCommands.length > 0) {
+      shortcutsEl.innerHTML = '';
+      for (const cmd of quickCommands) {
+        if (!cmd || !cmd.cmd) continue;
+        const btn = document.createElement('button');
+        btn.className = 'wb-shortcut';
+        btn.dataset.cmd = cmd.cmd;
+        btn.textContent = `${cmd.icon || '⚡'} ${cmd.label || cmd.cmd}`;
+        btn.addEventListener('click', () => this.sendShortcut(cmd.cmd));
+        shortcutsEl.appendChild(btn);
+      }
+    }
+
+    // 4. 渲染推荐生产线
+    const linesSection = document.getElementById('recommendedLinesSection');
+    const linesContainer = document.getElementById('recommendedLines');
+    const recommendedLines = Array.isArray(profile.recommendedLines) ? profile.recommendedLines : [];
+    if (linesSection && linesContainer && recommendedLines.length > 0) {
+      linesSection.style.display = '';
+      linesContainer.innerHTML = '';
+      for (const lineName of recommendedLines) {
+        if (!lineName) continue;
+        const btn = document.createElement('button');
+        btn.className = 'wb-shortcut';
+        btn.textContent = `🏭 ${lineName}`;
+        btn.addEventListener('click', () => this.sendShortcut(`/run ${lineName}`));
+        linesContainer.appendChild(btn);
+      }
+    }
+  }
+
+  sendShortcut(cmd) {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.send('user_input', { content: cmd });
+      this.renderUserMessage(cmd, 'gui');
+    }
+  }
+
+  // ===== Theme Switching =====
+
+  setTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('hypercore-theme', theme);
+    // 更新主题选择器（如果存在）
+    const themeBtn = document.getElementById('themeToggle');
+    if (themeBtn) {
+      const labels = { dark: '🌙', light: '☀️', 'high-contrast': '🔲' };
+      themeBtn.textContent = labels[theme] || '🌙';
+    }
+  }
+
+  cycleTheme() {
+    const themes = ['dark', 'light', 'high-contrast'];
+    const current = document.documentElement.getAttribute('data-theme') || 'dark';
+    const idx = themes.indexOf(current);
+    const next = themes[(idx + 1) % themes.length];
+    this.setTheme(next);
+  }
+
+  loadSavedTheme() {
+    const saved = localStorage.getItem('hypercore-theme');
+    if (saved) {
+      this.setTheme(saved);
+    }
+  }
+
+  // ===== Browser Notifications =====
+
+  async requestNotificationPermission() {
+    if ('Notification' in window && Notification.permission === 'default') {
+      await Notification.requestPermission();
+    }
+  }
+
+  sendBrowserNotification(title, body) {
+    if ('Notification' in window && Notification.permission === 'granted') {
+      new Notification(title, {
+        body,
+        icon: '/static/favicon.ico',
+        tag: 'hypercore-notify',
+      });
+    }
+  }
+}
+
+// ===== Launch =====
+document.addEventListener('DOMContentLoaded', () => {
+  window.workspace = new HypercoreWorkspace();
+  // 加载保存的主题
+  window.workspace.loadSavedTheme();
+  // 请求通知权限
+  window.workspace.requestNotificationPermission();
+});