jinzd-ai-cli 0.4.53 → 0.4.55

package/dist/web/client/app.js

@@ -182,7 +182,7 @@ function handleServerMessage(msg) {
     case 'todo_update':     handleTodoUpdate(msg.todos); break;
     case 'status':          handleStatus(msg); break;
     case 'session_list':    renderSessionList(msg.sessions); break;
-    case 'session_messages':renderSessionMessages(msg.messages); break;
+    case 'session_messages':renderSessionMessages(msg); break;
     case 'tools_list':      renderToolsList(msg); switchSidebarTab('tools'); break;
     case 'export_data':     handleExportData(msg); break;
     case 'memory_content':  handleMemoryContent(msg); break;
@@ -449,34 +449,77 @@ function handleTodoUpdate(todos) {
 }
 
 function handleStatus(msg) {
+  // Global UI (provider list, toolbar toggles) always reflects the latest
+  // server state regardless of which Tab the status belongs to — these are
+  // handler-scoped, not session-scoped.
   providers = msg.providers || [];
   updateProviderSelect(msg.provider);
   updateModelSelect(msg.provider, msg.model);
 
-  btnThink.classList.toggle('btn-active-toggle', msg.thinkingMode);
-  btnPlan.classList.toggle('btn-active-toggle', msg.planMode);
-
-  statusSession.textContent = `📋 ${msg.sessionId?.slice(0, 8) || '—'} (${msg.messageCount} msgs)`;
-  if (msg.tokenUsage) {
-    statusTokens.textContent = `📊 in: ${msg.tokenUsage.inputTokens}  out: ${msg.tokenUsage.outputTokens}`;
+  // ── Route by sessionId ────────────────────────────────────────────
+  // Find the Tab this status payload belongs to. If the active Tab matches,
+  // we apply the full UI update. Otherwise we just refresh that Tab's stored
+  // metadata (title, token usage) without touching the live DOM — prevents
+  // "wrong content flashing on wrong tab" during fast tab switches.
+  let targetIdx = sessionTabs.findIndex(t => t.sessionId && t.sessionId === msg.sessionId);
+
+  // Fallback: if no tab owns this sessionId yet, bind it to the first tab
+  // that is still waiting for a `session new` response (FIFO matches the
+  // serial order of server command processing).
+  if (targetIdx < 0 && msg.sessionId) {
+    targetIdx = sessionTabs.findIndex(t => t.pendingBind);
+    if (targetIdx >= 0) {
+      sessionTabs[targetIdx].sessionId = msg.sessionId;
+      sessionTabs[targetIdx].pendingBind = false;
+    }
   }
 
-  // Update sidebar active state
-  sessionListEl.querySelectorAll('.session-item').forEach(el => {
-    el.classList.toggle('active', el.dataset.sessionId === msg.sessionId);
-  });
-
-  // Persist active session for this tab (for page reload restore)
-  if (msg.sessionId) {
-    sessionStorage.setItem('aicli-active-session', msg.sessionId);
+  if (targetIdx < 0) {
+    // Stale response — the tab that asked for it was closed before the
+    // server responded. Drop silently.
+    return;
   }
 
-  // Update multi-tab state
-  updateActiveTabFromStatus(msg);
+  const targetTab = sessionTabs[targetIdx];
+  const isActiveTarget = targetIdx === activeTabIdx;
+
+  // Update tab-owned metadata (applies whether active or not)
+  if (msg.sessionTitle) targetTab.title = msg.sessionTitle;
+  else if (msg.sessionId && (!targetTab.title || targetTab.title === 'New Chat')) {
+    targetTab.title = msg.sessionId.slice(0, 8);
+  }
+  if (msg.tokenUsage) targetTab.tokenUsage = msg.tokenUsage;
+
+  if (isActiveTarget) {
+    // Active tab: full UI reflection
+    btnThink.classList.toggle('btn-active-toggle', msg.thinkingMode);
+    btnPlan.classList.toggle('btn-active-toggle', msg.planMode);
+    statusSession.textContent = `📋 ${msg.sessionId?.slice(0, 8) || '—'} (${msg.messageCount} msgs)`;
+    if (msg.tokenUsage) {
+      const u = msg.tokenUsage;
+      const cacheRead = u.cacheReadTokens || 0;
+      let line = `📊 in: ${u.inputTokens.toLocaleString()}  out: ${u.outputTokens.toLocaleString()}`;
+      if (cacheRead > 0) line += `  cache: ${cacheRead.toLocaleString()}`;
+      if (msg.costUsd != null) {
+        const cost = msg.costUsd;
+        const costStr = cost === 0 ? '$0' : cost < 0.01 ? `$${cost.toFixed(4)}` : cost < 1 ? `$${cost.toFixed(3)}` : `$${cost.toFixed(2)}`;
+        line += `  💰 ${costStr}`;
+      }
+      statusTokens.textContent = line;
+    }
+    sessionListEl.querySelectorAll('.session-item').forEach(el => {
+      el.classList.toggle('active', el.dataset.sessionId === msg.sessionId);
+    });
+    if (msg.sessionId) {
+      sessionStorage.setItem('aicli-active-session', msg.sessionId);
+    }
+    targetTab.isProcessing = processing;
+    const title = msg.sessionTitle || msg.sessionId?.slice(0, 8) || 'New Session';
+    document.title = `ai-cli — ${title}`;
+  }
 
-  // Update browser tab title to reflect current session
-  const title = msg.sessionTitle || msg.sessionId?.slice(0, 8) || 'New Session';
-  document.title = `ai-cli — ${title}`;
+  renderTabBar();
+  saveTabState();
 }
 
 // ── Response helpers ───────────────────────────────────────────────
@@ -795,6 +838,7 @@ function loadSessionInTab(sessionId, title) {
   // Load in current active tab
   if (activeTabIdx >= 0 && activeTabIdx < sessionTabs.length) {
     sessionTabs[activeTabIdx].sessionId = sessionId;
+    sessionTabs[activeTabIdx].pendingBind = false; // explicit load cancels any pending bind
     if (title) sessionTabs[activeTabIdx].title = title;
     renderTabBar();
     saveTabState();
@@ -965,18 +1009,97 @@ function updateBatchBar() {
   }
 }
 
-function renderSessionMessages(messages) {
-  // Clear chat and re-render all messages from loaded session
-  messagesEl.innerHTML = '';
-  for (const msg of messages) {
-    if (msg.role === 'user') {
-      addUserMessage(msg.content);
-    } else if (msg.role === 'assistant') {
-      const el = createAssistantMessage();
-      renderMarkdown(el, msg.content);
+/**
+ * Render the `session_messages` payload for a session.
+ * Routes to the correct UI tab based on payload.sessionId so that fast
+ * tab-switching does not cause content to be applied to the wrong tab.
+ *
+ *   msg = { type: 'session_messages', sessionId, messages: [...] }
+ *
+ * If the matched tab is active → render directly to the live DOM (and
+ * snapshot into the tab cache). Otherwise build the HTML off-DOM and
+ * write it into the tab's `messagesHtml` cache; the live DOM is left
+ * untouched so the active tab's content never flashes wrong data.
+ */
+function renderSessionMessages(msg) {
+  // Back-compat: if called with a bare array (legacy), treat as active-tab apply
+  const messages = Array.isArray(msg) ? msg : msg.messages;
+  const sessionId = Array.isArray(msg) ? null : msg.sessionId;
+
+  // Locate the target tab
+  let targetIdx = -1;
+  if (sessionId) {
+    targetIdx = sessionTabs.findIndex(t => t.sessionId === sessionId);
+  }
+  if (targetIdx < 0) {
+    // No explicit match — fall back to active tab (legacy behavior)
+    targetIdx = activeTabIdx;
+  }
+  if (targetIdx < 0 || targetIdx >= sessionTabs.length) return;
+
+  const isActiveTarget = targetIdx === activeTabIdx;
+
+  if (isActiveTarget) {
+    // Active tab: paint directly into the live DOM (preserves any in-flight
+    // streaming helpers that rely on messagesEl)
+    messagesEl.innerHTML = '';
+    for (const m of messages) {
+      if (m.role === 'user') {
+        addUserMessage(m.content);
+      } else if (m.role === 'assistant') {
+        const el = createAssistantMessage();
+        renderMarkdown(el, m.content);
+      }
     }
+    scrollToBottom();
+    // Snapshot into cache so subsequent tab-snapshots see the latest content
+    sessionTabs[targetIdx].messagesHtml = messagesEl.innerHTML;
+  } else {
+    // Inactive tab: build HTML off-DOM, store in tab cache, do NOT touch
+    // the live DOM. When the user eventually switches to this tab,
+    // restoreTab() will paint the cached HTML.
+    sessionTabs[targetIdx].messagesHtml = buildMessagesHtmlOffDom(messages);
+  }
+}
+
+/**
+ * Build the HTML string for a list of messages without affecting the
+ * currently visible DOM. Uses a save-clear-render-capture-restore cycle
+ * on the existing messagesEl so we can re-use addUserMessage /
+ * createAssistantMessage (both of which reference messagesEl directly).
+ * The round-trip is synchronous so the user never sees it.
+ */
+function buildMessagesHtmlOffDom(messages) {
+  const savedHtml = messagesEl.innerHTML;
+  const savedScroll = chatArea.scrollTop;
+  // Save streaming pointers so we don't orphan them
+  const savedAssistantEl = currentAssistantEl;
+  const savedAssistantContent = currentAssistantContent;
+  const savedThinkingEl = currentThinkingEl;
+  const savedThinkingContent = currentThinkingContent;
+  try {
+    messagesEl.innerHTML = '';
+    currentAssistantEl = null;
+    currentAssistantContent = '';
+    currentThinkingEl = null;
+    currentThinkingContent = '';
+    for (const m of messages) {
+      if (m.role === 'user') {
+        addUserMessage(m.content);
+      } else if (m.role === 'assistant') {
+        const el = createAssistantMessage();
+        renderMarkdown(el, m.content);
+      }
+    }
+    return messagesEl.innerHTML;
+  } finally {
+    messagesEl.innerHTML = savedHtml;
+    chatArea.scrollTop = savedScroll;
+    currentAssistantEl = savedAssistantEl;
+    currentAssistantContent = savedAssistantContent;
+    currentThinkingEl = savedThinkingEl;
+    currentThinkingContent = savedThinkingContent;
   }
-  scrollToBottom();
 }
 
 // New session button — opens in a new tab
@@ -1867,6 +1990,10 @@ function addTab(sessionId, title) {
     scrollPos: 0,
     tokenUsage: { inputTokens: 0, outputTokens: 0 },
     isProcessing: false,
+    // pendingBind: this tab is waiting for the server to assign a sessionId.
+    // Set when `session new` is dispatched; cleared once `status` arrives with
+    // the assigned id. Prevents duplicate `session new` requests on fast re-switch.
+    pendingBind: !sessionId,
     _currentAssistantContent: '',
   };
   sessionTabs.push(tab);
@@ -1908,7 +2035,11 @@ function switchToTab(index) {
   // Tell server to switch session
   if (tab.sessionId) {
     send({ type: 'command', name: 'session', args: ['load', tab.sessionId] });
-  } else {
+  } else if (!tab.pendingBind) {
+    // No id yet AND no outstanding `session new` in flight — request one.
+    // If pendingBind is true, the original `session new` response is still
+    // inbound; don't send another request or we'd create a dangling session.
+    tab.pendingBind = true;
     send({ type: 'command', name: 'session', args: ['new'] });
   }
 
@@ -1942,19 +2073,6 @@ function findTabBySessionId(sessionId) {
   return sessionTabs.findIndex(t => t.sessionId === sessionId);
 }
 
-/** Update the active tab's metadata from a status message */
-function updateActiveTabFromStatus(msg) {
-  if (activeTabIdx < 0 || activeTabIdx >= sessionTabs.length) return;
-  const tab = sessionTabs[activeTabIdx];
-  if (msg.sessionId) tab.sessionId = msg.sessionId;
-  if (msg.sessionTitle) tab.title = msg.sessionTitle;
-  else if (msg.sessionId && !tab.title) tab.title = msg.sessionId.slice(0, 8);
-  tab.isProcessing = processing;
-  if (msg.tokenUsage) tab.tokenUsage = msg.tokenUsage;
-  renderTabBar();
-  saveTabState();
-}
-
 /** Persist tab state to sessionStorage for page reload */
 function saveTabState() {
   try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jinzd-ai-cli",
-  "version": "0.4.53",
+  "version": "0.4.55",
   "description": "Cross-platform REPL-style AI CLI with multi-provider support",
   "type": "module",
   "main": "./dist/index.js",