farming-code 2.2.8 → 2.2.11

package/frontend/skins/crt/app.js

@@ -5,6 +5,7 @@ let focusedAgentId = null;
 let keyMap = {};
 let agents = [];
 let waitingForAgent = false;
+let workspaceDirectoryPrompt = null;
 let selectedAgentIndex = null;
 let terminal = null;
 let fitAddon = null;
@@ -53,15 +54,23 @@ let billingError = '';
 let billingRequestSequence = 0;
 let billingAbortController = null;
 let billingRefreshTimer = null;
+let billingLiveDayRefreshTimer = null;
 let billingCanvasFrame = null;
 let billingMode = 'days';
 let billingSelectedDate = '';
+let billingSelectedHour = null;
 let billingDailyRenderSignature = '';
 let billingDayDetail = null;
 let billingDayDetailLoading = false;
 let billingDayDetailError = '';
 let billingDayDetailRequestSequence = 0;
 let billingDayDetailAbortController = null;
+let billingDayDetailRetryTimer = null;
+let billingDisplayedTotalDate = '';
+let billingDisplayedTotalValue = null;
+let billingTotalAnimationFrame = null;
+let billingTotalAnimationTarget = null;
+const billingAnimatedMetrics = new Map();
 const billingDayDetailCache = new Map();
 let crtAgentPage = 0;
 let crtAgentPageSize = 1;
@@ -71,8 +80,9 @@ let dashboardRenderDeferred = false;
 let lastCrtDashboardSignature = '';
 let crtPreviewRenderTimer = null;
 const pendingCrtPreviewRenders = new Map();
+const crtStructuredPreviewCache = new Map();
+const crtStructuredPreviewTimers = new Map();
 let sessionRuntime = null;
-let legacySessionPoller = null;
 let structuredSessionPoller = null;
 let structuredSessionLoading = false;
 let structuredSessionRenderedAt = '';
@@ -92,19 +102,13 @@ let structuredComposerRestoreFocusAfterInterrupt = false;
 let runtimeSwitchPending = false;
 let pendingRuntimeSwitchAgentId = '';
 let runtimeSwitchRequestSequence = 0;
-let terminalInputBridge = null;
-let terminalInputComposing = false;
-let terminalInputLastBackspaceAt = 0;
-let terminalInputLastDeleteAt = 0;
-let terminalInputPendingTexts = [];
+let crtTerminalReplication = null;
 const terminalPreviewSnapshots = new Map();
 const crtBrandPulseTimers = new Map();
-const SESSION_INPUT_SETTINGS = {
-  // xterm's native textarea is the same low-latency input path used by Farming Code.
-  imeEnabled: false
-};
 const SESSION_LINK_LIMIT = 6;
+const CRT_PROTOCOL_VERSION = 2;
 const CRT_PREVIEW_RENDER_INTERVAL_MS = 1000;
+const CRT_STRUCTURED_PREVIEW_REFRESH_MS = 240;
 const CRT_AGENT_CARD_MIN_WIDTH = 200;
 const CRT_AGENT_CARD_MIN_HEIGHT = 160;
 const CRT_AGENT_GRID_GAP = 15;
@@ -112,7 +116,15 @@ const CRT_AGENT_GRID_PADDING = 20;
 const CRT_SEARCH_DEBOUNCE_MS = 180;
 const CRT_SEARCH_RESULT_LIMIT = 100;
 const CRT_BILLING_REFRESH_MS = 30_000;
+const CRT_BILLING_LIVE_DAY_REFRESH_MS = 5_000;
 const CRT_BILLING_DAY_DETAIL_CACHE_MS = 30_000;
+const CRT_BILLING_TOTAL_ANIMATION_MS = 900;
+const CRT_BILLING_DAY_DETAIL_RETRY_MS = 750;
+const CRT_BILLING_DAY_DETAIL_MAX_RETRIES = 4;
+const CRT_TERMINAL_CHECKPOINT_REQUEST_TIMEOUT_MS = 5_000;
+const CRT_TERMINAL_RESIZE_SETTLE_MS = 250;
+const CRT_TERMINAL_MIN_COLS = 40;
+const CRT_TERMINAL_MIN_ROWS = 10;
 const CRT_AGENT_DISPLAY_NAMES = {
   qwen: 'Qwen Code',
   codex: 'Codex',
@@ -129,6 +141,7 @@ const CRT_AGENT_DISPLAY_NAMES = {
 const CRT_TITLE_STATUS_PREFIX_PATTERN = /^[\s*＊✳✱✲✶·•◇✋✦⏲\u2800-\u28FF]+/u;
 const CRT_QODER_RUNTIME_TITLE_PATTERN = /^[◇✋✦⏲]/u;
 const RUNTIME_PATHS = typeof window !== 'undefined' ? window.FarmingRuntimePaths : null;
+const TERMINAL_REPLAY = typeof window !== 'undefined' ? window.FarmingTerminalReplay : null;
 
 function farmingApiPath(path) {
   return RUNTIME_PATHS ? RUNTIME_PATHS.apiPath(path) : `/api${path.startsWith('/') ? path : `/${path}`}`;
@@ -362,9 +375,7 @@ function crtHistorySessionDisplayKey(item) {
 function buildCrtHistoryItems({ taskHistory = [], agents: agentRecords = [], sessions = [], mainPageSessionKeys = [] } = {}) {
   const liveAgents = agentRecords.filter((agent) => (
     agent.isMain !== true
-    && agent.archived !== true
-    && agent.status !== 'dead'
-    && agent.status !== 'stopped'
+    && isCrtLiveAgent(agent)
   ));
   const claimedSessionKeys = new Set(liveAgents.map((agent) => (
     agent.providerSessionKey || (() => {
@@ -427,9 +438,7 @@ function buildCrtSearchResults({ query = '', agents: agentRecords = [], sessions
     agent
     && agent.id !== mainAgentId
     && agent.isMain !== true
-    && agent.archived !== true
-    && agent.status !== 'dead'
-    && agent.status !== 'stopped'
+    && isCrtLiveAgent(agent)
   ));
   const claimedSessionKeys = new Set(liveAgents.map((agent) => {
     if (agent.providerSessionKey) return agent.providerSessionKey;
@@ -478,6 +487,8 @@ function buildCrtSearchResults({ query = '', agents: agentRecords = [], sessions
 }
 
 function getCrtNavigationScope() {
+  const sessionModal = document.getElementById('session-modal');
+  if (sessionModal && sessionModal.classList.contains('active')) return sessionModal;
   const settingsModal = document.getElementById('settings-modal');
   if (settingsModal && settingsModal.classList.contains('active')) return settingsModal;
   const inputDialog = document.getElementById('input-dialog');
@@ -669,72 +680,10 @@ function disposeTerminal() {
   fitAddon = null;
 }
 
-function destroyTerminalInputBridge() {
-  if (terminalInputBridge) {
-    terminalInputBridge.remove();
-    terminalInputBridge = null;
-  }
-  clearPendingPrintableInput();
-  terminalInputComposing = false;
-  document.body.removeAttribute('data-ime-input-focused');
-  document.body.removeAttribute('data-ime-composing');
-}
-
-function clearPendingPrintableInput() {
-  terminalInputPendingTexts.forEach((pending) => {
-    clearTimeout(pending.timeoutId);
-  });
-  terminalInputPendingTexts = [];
-}
-
-function resetTerminalInputBridgeValue() {
-  if (!terminalInputBridge) return;
-  terminalInputBridge.value = ' ';
-  terminalInputBridge.setSelectionRange(1, 1);
-}
-
-function schedulePrintableInput(text) {
-  const pending = {
-    text,
-    timeoutId: setTimeout(() => {
-      if (!terminalInputComposing) {
-        sendTerminalInput(text);
-        resetTerminalInputBridgeValue();
-      }
-      terminalInputPendingTexts = terminalInputPendingTexts.filter((item) => item !== pending);
-    }, 0)
-  };
-  terminalInputPendingTexts.push(pending);
-}
-
-function focusTerminalInputBridge() {
-  if (!SESSION_INPUT_SETTINGS.imeEnabled) return;
-  if (!terminalInputBridge) return;
-  if (isOverlayBlockingTerminalInput()) return;
-  syncTerminalInputBridgePosition();
-  terminalInputBridge.focus();
-  resetTerminalInputBridgeValue();
-}
-
-function isOverlayBlockingTerminalInput() {
-  const inputDialog = document.getElementById('input-dialog');
-  if (inputDialog && inputDialog.classList.contains('active')) {
-    return true;
-  }
-
-  const settingsModal = document.getElementById('settings-modal');
-  if (settingsModal && settingsModal.classList.contains('active')) {
-    return true;
-  }
-
-  return false;
-}
-
 function focusSessionTerminal() {
   if (terminal && typeof terminal.focus === 'function') {
     terminal.focus();
   }
-  focusTerminalInputBridge();
 }
 
 function getDocumentSelectionText() {
@@ -899,11 +848,24 @@ async function pasteTerminalText(text) {
     return false;
   }
 
-  sendTerminalInput(text.replace(/\r\n/g, '\n'));
+  const normalized = text.replace(/\r\n/g, '\n');
+  if (terminal && typeof terminal.paste === 'function') {
+    terminal.paste(normalized);
+  } else {
+    sendTerminalInput(normalized);
+  }
   focusSessionTerminal();
   return true;
 }
 
+function isCrtNativeTerminalPasteTarget(target) {
+  return Boolean(
+    target &&
+    typeof target.closest === 'function' &&
+    target.closest('#terminal-output .xterm')
+  );
+}
+
 async function pasteFromClipboard() {
   if (!navigator.clipboard || !navigator.clipboard.readText) {
     return false;
@@ -918,34 +880,6 @@ async function pasteFromClipboard() {
   }
 }
 
-function routeSessionKey(event) {
-  if (!focusedAgentId || terminalInputComposing || isBrowserShortcut(event)) {
-    return false;
-  }
-
-  if (event.ctrlKey && !event.metaKey && !event.altKey && event.key.length === 1 && event.key !== 'Enter') {
-    const controlChar = getControlChar(event.key);
-    if (controlChar) {
-      sendTerminalInput(controlChar);
-      return true;
-    }
-  }
-
-  const sequence = getTerminalSequenceForKey(event);
-  if (sequence) {
-    sendTerminalInput(sequence);
-    return true;
-  }
-
-  return false;
-}
-
-function getControlChar(key) {
-  const lower = key.toLowerCase();
-  if (!/^[a-z]$/.test(lower)) return null;
-  return String.fromCharCode(lower.charCodeAt(0) - 96);
-}
-
 function getSessionClient() {
   if (!window.FarmingSessionBridge || !window.FarmingSessionBridge.createClient) {
     return null;
@@ -961,291 +895,6 @@ function getSessionClient() {
   return sessionClient;
 }
 
-function getTerminalSequenceForKey(event) {
-  const { key, shiftKey, altKey, ctrlKey, metaKey } = event;
-
-  if (metaKey) return null;
-
-  if (altKey && !ctrlKey) {
-    if (key === 'ArrowLeft') return '\x1bb';
-    if (key === 'ArrowRight') return '\x1bf';
-    if (key === 'Backspace') return '\x17';
-  }
-
-  switch (key) {
-    case 'Enter':
-      return '\r';
-    case 'Backspace':
-      return '\x7f';
-    case 'Tab':
-      return shiftKey ? '\x1b[Z' : '\t';
-    case 'Delete':
-      return '\x1b[3~';
-    case 'ArrowUp':
-      return '\x1b[A';
-    case 'ArrowDown':
-      return '\x1b[B';
-    case 'ArrowRight':
-      return '\x1b[C';
-    case 'ArrowLeft':
-      return '\x1b[D';
-    case 'Home':
-      return '\x1b[H';
-    case 'End':
-      return '\x1b[F';
-    case 'PageUp':
-      return '\x1b[5~';
-    case 'PageDown':
-      return '\x1b[6~';
-    default:
-      return null;
-  }
-}
-
-function setupTerminalInputBridge() {
-  destroyTerminalInputBridge();
-
-  if (!SESSION_INPUT_SETTINGS.imeEnabled) {
-    return;
-  }
-
-  const input = document.createElement('input');
-  input.type = 'text';
-  input.setAttribute('autocomplete', 'off');
-  input.setAttribute('autocorrect', 'off');
-  input.setAttribute('autocapitalize', 'off');
-  input.setAttribute('spellcheck', 'false');
-  input.setAttribute('inputmode', 'text');
-  input.setAttribute('aria-hidden', 'true');
-  input.style.position = 'absolute';
-  input.style.top = '0';
-  input.style.left = '0';
-  input.style.width = '200px';
-  input.style.height = '24px';
-  input.style.opacity = '0.01';
-  input.style.background = 'transparent';
-  input.style.color = 'transparent';
-  input.style.caretColor = 'transparent';
-  input.style.border = 'none';
-  input.style.outline = 'none';
-  input.style.fontSize = `${getCrtTerminalFontSize()}px`;
-  input.style.fontFamily = TERMINAL_FONT_FAMILY;
-  input.style.pointerEvents = 'none';
-  input.style.zIndex = '2';
-
-  input.addEventListener('compositionstart', () => {
-    syncTerminalInputBridgePosition();
-    clearPendingPrintableInput();
-    terminalInputComposing = true;
-    document.body.setAttribute('data-ime-composing', 'true');
-  });
-
-  input.addEventListener('compositionend', (event) => {
-    terminalInputComposing = false;
-    document.body.removeAttribute('data-ime-composing');
-    clearPendingPrintableInput();
-    if (event.data) {
-      sendTerminalInput(event.data);
-    }
-    resetTerminalInputBridgeValue();
-  });
-
-  input.addEventListener('compositionupdate', syncTerminalInputBridgePosition);
-
-  input.addEventListener('beforeinput', (event) => {
-    if (terminalInputComposing) {
-      return;
-    }
-
-    const inputEvent = event;
-    if (inputEvent.inputType === 'insertText' && inputEvent.data) {
-      clearPendingPrintableInput();
-      event.preventDefault();
-      sendTerminalInput(inputEvent.data);
-      resetTerminalInputBridgeValue();
-    }
-  });
-
-  input.addEventListener('input', (event) => {
-    if (terminalInputComposing) {
-      return;
-    }
-
-    const inputEvent = event;
-    if (inputEvent.inputType === 'deleteContentBackward') {
-      clearPendingPrintableInput();
-      const now = Date.now();
-      if (now - terminalInputLastBackspaceAt > 50) {
-        sendTerminalInput('\x7f');
-      }
-      terminalInputLastBackspaceAt = now;
-      requestAnimationFrame(() => {
-        if (document.activeElement === input) {
-          resetTerminalInputBridgeValue();
-        }
-      });
-      return;
-    }
-
-    if (inputEvent.inputType === 'deleteContentForward') {
-      clearPendingPrintableInput();
-      const now = Date.now();
-      if (now - terminalInputLastDeleteAt > 50) {
-        sendTerminalInput('\x1b[3~');
-      }
-      terminalInputLastDeleteAt = now;
-      requestAnimationFrame(() => {
-        if (document.activeElement === input) {
-          resetTerminalInputBridgeValue();
-        }
-      });
-      return;
-    }
-
-    clearPendingPrintableInput();
-    resetTerminalInputBridgeValue();
-  });
-
-  input.addEventListener('keydown', (event) => {
-    if (event.defaultPrevented) {
-      return;
-    }
-
-    if (isOverlayBlockingTerminalInput()) {
-      return;
-    }
-
-    if (isBrowserShortcut(event)) {
-      return;
-    }
-
-    if ((event.ctrlKey || event.metaKey) && event.key === 'Escape') {
-      return;
-    }
-
-    if ((event.ctrlKey || event.metaKey) && (event.key === 'k' || event.key === 'K')) {
-      return;
-    }
-
-    if (terminalInputComposing) {
-      return;
-    }
-
-    if (['Enter', 'Tab', 'Escape'].includes(event.key)) {
-      event.preventDefault();
-    }
-
-    if (event.ctrlKey && !event.metaKey && !event.altKey && event.key.length === 1 && event.key !== 'Enter') {
-      clearPendingPrintableInput();
-      const controlChar = getControlChar(event.key);
-      if (controlChar) {
-        event.preventDefault();
-        sendTerminalInput(controlChar);
-        resetTerminalInputBridgeValue();
-      }
-      return;
-    }
-
-    if (!event.ctrlKey && !event.metaKey && !event.altKey && event.key.length === 1) {
-      schedulePrintableInput(event.key);
-      return;
-    }
-
-    if (event.key === 'Backspace') {
-      clearPendingPrintableInput();
-      terminalInputLastBackspaceAt = Date.now();
-      sendTerminalInput('\x7f');
-      requestAnimationFrame(() => {
-        if (document.activeElement === input) {
-          resetTerminalInputBridgeValue();
-        }
-      });
-      return;
-    }
-
-    const sequence = getTerminalSequenceForKey(event);
-    if (!sequence) {
-      return;
-    }
-
-    if (event.key === 'Delete') {
-      terminalInputLastDeleteAt = Date.now();
-    }
-
-    event.preventDefault();
-    sendTerminalInput(sequence);
-    if (event.key !== 'Tab') {
-      resetTerminalInputBridgeValue();
-    }
-  });
-
-  input.addEventListener('focus', () => {
-    document.body.setAttribute('data-ime-input-focused', 'true');
-    requestAnimationFrame(() => {
-      if (document.activeElement === input) {
-        resetTerminalInputBridgeValue();
-      }
-    });
-  });
-
-  input.addEventListener('blur', () => {
-    document.body.removeAttribute('data-ime-input-focused');
-    setTimeout(() => {
-      const sessionActive = document.getElementById('session-modal')?.classList.contains('active');
-      if (!sessionActive || terminalInputComposing || !terminalInputBridge || isOverlayBlockingTerminalInput()) {
-        return;
-      }
-      focusTerminalInputBridge();
-    }, 0);
-  });
-
-  const sessionModal = document.getElementById('session-modal');
-  if (sessionModal) {
-    sessionModal.appendChild(input);
-  } else {
-    document.body.appendChild(input);
-  }
-  terminalInputBridge = input;
-  syncTerminalInputBridgePosition();
-}
-
-function calculateTerminalInputBridgePosition(cursor, dimensions, screenRect, parentRect) {
-  if (!cursor || !dimensions || !screenRect || !parentRect) return null;
-  if (dimensions.cols <= 0 || dimensions.rows <= 0) return null;
-
-  const cellWidth = screenRect.width / dimensions.cols;
-  const cellHeight = screenRect.height / dimensions.rows;
-  return {
-    left: Math.max(0, screenRect.left - parentRect.left + cursor.x * cellWidth),
-    top: Math.max(0, screenRect.top - parentRect.top + cursor.y * cellHeight),
-    height: Math.max(getCrtTerminalFontSize() + 2, cellHeight)
-  };
-}
-
-function syncTerminalInputBridgePosition() {
-  if (!terminalInputBridge || !terminal) return;
-  const sessionModal = document.getElementById('session-modal');
-  const terminalElement = terminal.element;
-  const screen = terminalElement && terminalElement.querySelector
-    ? terminalElement.querySelector('.xterm-screen')
-    : null;
-  const activeBuffer = terminal.buffer && terminal.buffer.active;
-  if (!sessionModal || !(screen instanceof HTMLElement) || !activeBuffer) return;
-
-  const position = calculateTerminalInputBridgePosition(
-    { x: activeBuffer.cursorX, y: activeBuffer.cursorY },
-    { cols: terminal.cols, rows: terminal.rows },
-    screen.getBoundingClientRect(),
-    sessionModal.getBoundingClientRect()
-  );
-  if (!position) return;
-
-  terminalInputBridge.style.left = `${position.left}px`;
-  terminalInputBridge.style.top = `${position.top}px`;
-  terminalInputBridge.style.height = `${position.height}px`;
-  terminalInputBridge.style.lineHeight = `${position.height}px`;
-}
-
 function normalizeCrtTerminalFontSize(value) {
   const fontSize = Number(value);
   if (!Number.isFinite(fontSize)) return DEFAULT_TERMINAL_FONT_SIZE;
@@ -1281,24 +930,32 @@ async function createTerminalInstance(options = {}) {
   return null;
 }
 
-function showCrtWebglFailure(error) {
+function showCrtTerminalFailure(titleText, error, detailText) {
   const terminalContainer = document.getElementById('terminal-output');
   if (!terminalContainer) return;
   terminalContainer.querySelector('.crt-webgl-error')?.remove();
   const panel = document.createElement('div');
   panel.className = 'crt-webgl-error';
   const title = document.createElement('strong');
-  title.textContent = 'CRT WEBGL ERROR';
+  title.textContent = titleText;
   const message = document.createElement('span');
   message.textContent = error && error.message
     ? error.message
-    : 'Farming CRT requires WebGL2 hardware acceleration.';
+    : String(error || 'Terminal unavailable');
   const detail = document.createElement('small');
-  detail.textContent = 'The Agent is still running. Close and reopen this terminal after WebGL is available.';
+  detail.textContent = detailText;
   panel.append(title, message, detail);
   terminalContainer.appendChild(panel);
 }
 
+function showCrtWebglFailure(error) {
+  showCrtTerminalFailure(
+    'CRT WEBGL ERROR',
+    error,
+    'The Agent is still running. Close and reopen this terminal after WebGL is available.'
+  );
+}
+
 function shouldUseLiveSessionText(agent) {
   return Boolean(agent && agent.sessionSource === 'live-text');
 }
@@ -1353,10 +1010,32 @@ function getCrtPreviewCellStyle(cell) {
   };
 }
 
+function getCrtTerminalSnapshotRows(snapshot) {
+  if (!snapshot || !Array.isArray(snapshot.cells)) return [];
+  let lastMeaningfulRow = -1;
+  snapshot.cells.forEach((cells, rowIndex) => {
+    if (!Array.isArray(cells)) return;
+    const meaningful = cells.some((cell) => {
+      if (!cell || cell.width === 0) return false;
+      const attributes = cell.attributes || 0;
+      const hasBackground = Number.isFinite(cell.bg) && cell.bg >= 0;
+      return String(cell.char || '').trim() !== '' || hasBackground || Boolean(attributes & 0x10);
+    });
+    if (meaningful) lastMeaningfulRow = rowIndex;
+  });
+  const cursorRow = snapshot.cursorVisible === true && Number.isInteger(snapshot.cursorY)
+    ? Math.min(snapshot.cells.length - 1, Math.max(0, snapshot.cursorY))
+    : -1;
+  const lastVisibleRow = Math.max(lastMeaningfulRow, cursorRow);
+  return lastVisibleRow >= 0 ? snapshot.cells.slice(0, lastVisibleRow + 1) : [];
+}
+
 function renderCrtTerminalSnapshot(container, snapshot) {
-  if (!container || !snapshot || !Array.isArray(snapshot.cells)) return false;
+  if (!container) return false;
+  const rows = getCrtTerminalSnapshotRows(snapshot);
+  if (rows.length === 0) return false;
   container.classList.add('terminal-snapshot');
-  snapshot.cells.forEach((cells) => {
+  rows.forEach((cells) => {
     const row = document.createElement('div');
     row.className = 'terminal-snapshot-row';
     let currentSpan = null;
@@ -1378,6 +1057,104 @@ function renderCrtTerminalSnapshot(container, snapshot) {
   return true;
 }
 
+function crtStructuredPreviewStatus(agent, cached) {
+  if (cached && cached.error && !cached.preview) return 'PREVIEW OFFLINE';
+  if ((!cached || !cached.preview) && (!cached || cached.loading)) return 'SYNCING';
+  const status = String(structuredRuntimeStatus(agent) || 'idle').toUpperCase().replaceAll('-', ' ');
+  if (status === 'WAITING FOR PERMISSION') return 'PERMISSION NEEDED';
+  if (status === 'WAITING FOR INPUT') return 'INPUT NEEDED';
+  return status;
+}
+
+function appendCrtStructuredPreviewLine(container, role, label, text) {
+  if (!text) return;
+  const line = document.createElement('div');
+  line.className = `agent-chat-preview-line ${role}`;
+  line.dataset.previewRole = role;
+  const roleLabel = document.createElement('span');
+  roleLabel.className = 'agent-chat-preview-role';
+  roleLabel.textContent = label;
+  const content = document.createElement('span');
+  content.className = 'agent-chat-preview-text';
+  content.textContent = text;
+  line.append(roleLabel, content);
+  container.appendChild(line);
+}
+
+function renderCrtStructuredPreview(output, agent) {
+  output.classList.add('structured-preview');
+  const cached = crtStructuredPreviewCache.get(agent.id) || null;
+  const preview = cached && cached.preview;
+  const runtimeStatus = String(structuredRuntimeStatus(agent) || '').toLowerCase();
+  const active = ['connecting', 'working', 'waiting-for-permission', 'waiting-for-input', 'interrupting']
+    .includes(runtimeStatus);
+  const panel = document.createElement('div');
+  panel.className = `agent-chat-preview${active ? ' active' : ''}`;
+  panel.dataset.previewKind = 'chat';
+
+  const meta = document.createElement('div');
+  meta.className = 'agent-chat-preview-meta';
+  const channel = document.createElement('span');
+  channel.textContent = `CHAT / ${structuredRuntimeKind(agent)}`;
+  const stateLabel = document.createElement('span');
+  stateLabel.className = 'agent-chat-preview-state';
+  const signal = document.createElement('i');
+  signal.setAttribute('aria-hidden', 'true');
+  const stateText = document.createElement('span');
+  stateText.textContent = crtStructuredPreviewStatus(agent, cached);
+  stateLabel.append(signal, stateText);
+  meta.append(channel, stateLabel);
+  panel.appendChild(meta);
+
+  const trail = document.createElement('div');
+  trail.className = 'agent-chat-preview-trail';
+  panel.appendChild(trail);
+
+  if (preview) {
+    const messageLines = Array.isArray(preview.messageLines) && preview.messageLines.length > 0
+      ? preview.messageLines
+      : [
+        { role: 'user', label: 'YOU', text: preview.userText },
+        { role: 'assistant', label: 'AGENT', text: preview.assistantText },
+      ];
+    messageLines.forEach((line) => {
+      appendCrtStructuredPreviewLine(trail, line.role, line.label, line.text);
+    });
+    if (active && preview.activityText && preview.activityText !== preview.assistantText) {
+      appendCrtStructuredPreviewLine(trail, 'activity', 'NOW', preview.activityText);
+    }
+  }
+
+  if (!trail.querySelector('.agent-chat-preview-line')) {
+    const empty = document.createElement('div');
+    empty.className = 'agent-chat-preview-empty';
+    empty.textContent = cached && cached.error
+      ? 'Conversation preview unavailable'
+      : active ? 'Establishing conversation stream…' : 'Ready for the first message';
+    trail.appendChild(empty);
+  }
+
+  output.replaceChildren(panel);
+  scheduleCrtStructuredPreviewRefresh(agent);
+}
+
+function renderCrtAgentOutput(output, agent, { main = false } = {}) {
+  output.classList.remove('structured-preview');
+  if (isStructuredRuntimeAgent(agent)) {
+    renderCrtStructuredPreview(output, agent);
+    return;
+  }
+  const outputTail = document.createElement('div');
+  outputTail.className = 'agent-output-tail';
+  const cleanOutput = getAgentDisplayText(agent);
+  if (!renderCrtTerminalSnapshot(outputTail, agent.previewSnapshot)) {
+    outputTail.textContent = main
+      ? cleanOutput.slice(-150) || 'No output yet...'
+      : cleanOutput || 'No output yet...';
+  }
+  output.replaceChildren(outputTail);
+}
+
 function crtDashboardStateSignature(value) {
   if (!value || !Array.isArray(value.agents)) return '';
   return JSON.stringify([
@@ -1417,8 +1194,17 @@ function renderCrtDashboardIfNeeded(force = false) {
   return true;
 }
 
+function scheduleCrtRenderedStructuredPreviews() {
+  if (typeof document === 'undefined' || !state) return;
+  document.querySelectorAll('#map-area .agent-block[data-agent-id], #main-agent-block[data-agent-id]')
+    .forEach((block) => {
+      const agent = state.agents.find((candidate) => candidate.id === block.dataset.agentId);
+      if (agent) scheduleCrtStructuredPreviewRefresh(agent);
+    });
+}
+
 function updateCrtAgentPreviewCard(agent) {
-  if (typeof document === 'undefined' || !agent) return false;
+  if (typeof document === 'undefined' || !isCrtLiveAgent(agent)) return false;
   const block = Array.from(document.querySelectorAll('[data-agent-id]'))
     .find((candidate) => candidate.dataset.agentId === agent.id);
   if (!block) return false;
@@ -1441,15 +1227,7 @@ function updateCrtAgentPreviewCard(agent) {
     status.textContent = [agent.status, agent.activityLevel, projectName].filter(Boolean).join(' | ');
   }
 
-  const outputTail = document.createElement('div');
-  outputTail.className = 'agent-output-tail';
-  const cleanOutput = getAgentDisplayText(agent);
-  if (!renderCrtTerminalSnapshot(outputTail, agent.previewSnapshot)) {
-    outputTail.textContent = isMain
-      ? cleanOutput.slice(-150) || 'No output yet...'
-      : cleanOutput || 'No output yet...';
-  }
-  output.replaceChildren(outputTail);
+  renderCrtAgentOutput(output, agent, { main: isMain });
   lastCrtDashboardSignature = crtDashboardStateSignature(state);
   return true;
 }
@@ -1465,8 +1243,10 @@ function flushCrtPreviewCardRenders() {
   }
 
   pending.forEach(({ agent, previousSnapshot, previousText, previewChanged }) => {
-    if (!updateCrtAgentPreviewCard(agent)) {
-      if (agent.id !== state.mainAgentId && !isCrtAgentOnCurrentPage(agent.id)) {
+    const currentAgent = state && state.agents.find((candidate) => candidate.id === agent.id);
+    if (!isCrtLiveAgent(currentAgent)) return;
+    if (!updateCrtAgentPreviewCard(currentAgent)) {
+      if (currentAgent.id !== state.mainAgentId && !isCrtAgentOnCurrentPage(currentAgent.id)) {
         if (previewChanged) pulseCrtBrandForAgent(agent.id);
         return;
       }
@@ -1481,6 +1261,7 @@ function flushCrtPreviewCardRenders() {
 }
 
 function scheduleCrtPreviewCardRender(agent, previousSnapshot, previousText, previewChanged) {
+  if (!isCrtLiveAgent(agent)) return;
   const existing = pendingCrtPreviewRenders.get(agent.id);
   pendingCrtPreviewRenders.set(agent.id, {
     agent,
@@ -1617,10 +1398,10 @@ function isCrtAgentWorking(agent) {
   if (activity === 'busy') return true;
   if (activity === 'idle' || activity === 'exited') return false;
   if (agent.terminalStatus && agent.terminalStatus.busy === true) return true;
+  const runtime = agent.runtimeBinding || { kind: 'terminal' };
   if (
-    agent.providerSessionProvider === 'codex' &&
-    agent.codexRuntimeMode === 'app-server' &&
-    ['working', 'waiting-for-input', 'interrupting'].includes(agent.codexAppServerState || '')
+    runtime.kind === 'app-server' &&
+    ['working', 'waiting-for-input', 'interrupting'].includes(runtime.state || '')
   ) {
     return true;
   }
@@ -1850,6 +1631,150 @@ function buildTerminalLineProjection(line) {
   return { text, offsetToCell };
 }
 
+const CRT_READING_ANCHOR_LINE_COUNT = 3;
+
+function crtReadingAnchorApi() {
+  return window.FarmingReadingAnchors || null;
+}
+
+function crtTerminalVisibleBufferBase(currentTerminal) {
+  if (!currentTerminal) return 0;
+  if (typeof currentTerminal.getVisibleBufferBase === 'function') {
+    return Math.max(0, Number(currentTerminal.getVisibleBufferBase()) || 0);
+  }
+  return Math.max(0, Number(currentTerminal.buffer && currentTerminal.buffer.active && currentTerminal.buffer.active.viewportY) || 0);
+}
+
+function crtLogicalTerminalLineAtRow(currentTerminal, row) {
+  const buffer = currentTerminal && currentTerminal.buffer && currentTerminal.buffer.active;
+  if (!buffer || typeof buffer.getLine !== 'function' || !Number.isFinite(row) || row < 0) return null;
+  let startRow = row;
+  while (startRow > 0 && buffer.getLine(startRow)?.isWrapped) startRow -= 1;
+  let endRow = row;
+  while (buffer.getLine(endRow + 1)?.isWrapped) endRow += 1;
+  const lines = [];
+  for (let index = startRow; index <= endRow; index += 1) {
+    lines.push(buildTerminalLineProjection(buffer.getLine(index)).text.trimEnd());
+  }
+  return { startRow, endRow, text: lines.join('') };
+}
+
+function saveCrtTerminalReadingAnchor(agentId, currentTerminal = terminal) {
+  const api = crtReadingAnchorApi();
+  if (!api || !agentId || !currentTerminal) return;
+  const key = api.agentKey(agentId, 'terminal');
+  const buffer = currentTerminal.buffer && currentTerminal.buffer.active;
+  const base = crtTerminalVisibleBufferBase(currentTerminal);
+  const maxRow = Math.max(0, Number(buffer && buffer.length) || 0);
+  if (!buffer || base >= maxRow - Math.max(1, Number(currentTerminal.rows) || 1)) {
+    api.remove(key);
+    return;
+  }
+  const firstLine = crtLogicalTerminalLineAtRow(currentTerminal, base);
+  if (!firstLine) return;
+  const lines = [];
+  let row = firstLine.startRow;
+  for (let index = 0; index < CRT_READING_ANCHOR_LINE_COUNT; index += 1) {
+    const line = crtLogicalTerminalLineAtRow(currentTerminal, row);
+    if (!line) break;
+    lines.push(line.text);
+    row = line.endRow + 1;
+  }
+  if (!lines.length) return;
+  api.save({
+    version: 1,
+    surface: 'terminal',
+    resource: { kind: 'agent', id: agentId },
+    locator: { kind: 'terminal-lines', id: api.fingerprint(lines), lineCount: lines.length },
+    position: { unit: 'row', value: Math.max(0, base - firstLine.startRow) },
+  });
+}
+
+function restoreCrtTerminalReadingAnchor(agentId, currentTerminal = terminal) {
+  const api = crtReadingAnchorApi();
+  if (!api || !agentId || !currentTerminal) return false;
+  const key = api.agentKey(agentId, 'terminal');
+  const anchor = api.read(key);
+  if (!anchor || anchor.surface !== 'terminal') return false;
+  const buffer = currentTerminal.buffer && currentTerminal.buffer.active;
+  const lineCount = Math.max(1, Number(anchor.locator && anchor.locator.lineCount) || 1);
+  const lastRow = Math.max(0, Number(buffer && buffer.length) || 0);
+  let closest = null;
+  let closestDistance = Number.POSITIVE_INFINITY;
+  for (let row = 0; row <= lastRow;) {
+    const firstLine = crtLogicalTerminalLineAtRow(currentTerminal, row);
+    if (!firstLine) {
+      row += 1;
+      continue;
+    }
+    const lines = [firstLine.text];
+    let nextRow = firstLine.endRow + 1;
+    for (let index = 1; index < lineCount; index += 1) {
+      const line = crtLogicalTerminalLineAtRow(currentTerminal, nextRow);
+      if (!line) break;
+      lines.push(line.text);
+      nextRow = line.endRow + 1;
+    }
+    if (lines.length === lineCount && api.fingerprint(lines) === anchor.locator.id) {
+      const distance = Math.abs(firstLine.startRow - crtTerminalVisibleBufferBase(currentTerminal));
+      if (distance < closestDistance) {
+        closest = firstLine;
+        closestDistance = distance;
+      }
+    }
+    row = Math.max(row + 1, firstLine.endRow + 1);
+  }
+  if (!closest || typeof currentTerminal.scrollToLine !== 'function') {
+    api.remove(key);
+    currentTerminal.scrollToBottom?.();
+    return false;
+  }
+  currentTerminal.scrollToLine(Math.min(closest.endRow, closest.startRow + Math.max(0, Number(anchor.position.value) || 0)));
+  return true;
+}
+
+function saveCrtStructuredReadingAnchor(agentId) {
+  const api = crtReadingAnchorApi();
+  const container = document.getElementById('terminal-output');
+  if (!api || !agentId || !container) return;
+  const key = api.agentKey(agentId, 'chat');
+  if (container.scrollHeight - container.scrollTop - container.clientHeight < 80) {
+    api.remove(key);
+    return;
+  }
+  const containerRect = container.getBoundingClientRect();
+  const turn = Array.from(container.querySelectorAll('[data-reading-anchor-id]'))
+    .find((candidate) => candidate.getBoundingClientRect().bottom > containerRect.top);
+  if (!turn) return;
+  const turnRect = turn.getBoundingClientRect();
+  api.save({
+    version: 1,
+    surface: 'chat',
+    resource: { kind: 'agent', id: agentId },
+    locator: { kind: 'message', id: turn.dataset.readingAnchorId },
+    position: { unit: 'fraction', value: Math.max(0, Math.min(1, (containerRect.top - turnRect.top) / Math.max(1, turnRect.height))) },
+  });
+}
+
+function restoreCrtStructuredReadingAnchor(agentId) {
+  const api = crtReadingAnchorApi();
+  const container = document.getElementById('terminal-output');
+  if (!api || !agentId || !container) return false;
+  const key = api.agentKey(agentId, 'chat');
+  const anchor = api.read(key);
+  if (!anchor || anchor.surface !== 'chat') return false;
+  const target = container.querySelector(`[data-reading-anchor-id="${CSS.escape(anchor.locator.id)}"]`);
+  if (!target) {
+    api.remove(key);
+    container.scrollTop = container.scrollHeight;
+    return false;
+  }
+  const containerRect = container.getBoundingClientRect();
+  const targetRect = target.getBoundingClientRect();
+  container.scrollTop += targetRect.top + targetRect.height * anchor.position.value - containerRect.top;
+  return true;
+}
+
 function collectWrappedLinkContext(buffer, row) {
   if (!buffer || typeof buffer.getLine !== 'function') {
     return null;
@@ -2267,7 +2192,9 @@ function normalizeSessionViewPayload(payload, fallbackAgent = null) {
     sessionSource: session.sessionSource || (fallbackAgent && fallbackAgent.sessionSource) || 'buffer',
     output: typeof session.output === 'string' ? session.output : ((fallbackAgent && fallbackAgent.output) || ''),
     renderOutput: typeof session.renderOutput === 'string' ? session.renderOutput : '',
+    runtimeEpoch: typeof session.runtimeEpoch === 'string' ? session.runtimeEpoch : '',
     outputSeq: Number.isFinite(session.outputSeq) ? session.outputSeq : null,
+    stateRevision: Number.isFinite(session.stateRevision) ? session.stateRevision : null,
     previewCols: Number.isFinite(session.previewCols) ? session.previewCols : null,
     previewRows: Number.isFinite(session.previewRows) ? session.previewRows : null,
     previewText: typeof session.previewText === 'string' ? session.previewText : ((fallbackAgent && fallbackAgent.previewText) || ''),
@@ -2282,25 +2209,438 @@ function normalizeSessionViewPayload(payload, fallbackAgent = null) {
   };
 }
 
-function applySessionReplayCursorVisibility(text, sessionView, agent) {
-  if (!text) return text;
-  if (/\x1b\[\?25[hl]/.test(text)) return text;
+function createCrtTerminalReplication(agentId) {
+  return {
+    agentId,
+    lastResizeCols: null,
+    lastResizeRows: null,
+    pendingFitResize: null,
+    fitResizeTimer: null,
+    applyingLocalResize: false,
+    replayState: TERMINAL_REPLAY.createState(),
+    checkpointInFlight: false,
+    checkpointSeq: 0,
+    checkpointAbortController: null,
+    checkpointRetryTimer: null,
+    installSeq: 0,
+    installInProgress: false,
+    pendingCheckpoint: null,
+    writeInProgress: false,
+    disposed: false
+  };
+}
+
+function installCrtTerminalTestApi() {
+  if (
+    typeof window === 'undefined' ||
+    !window.__FARMING_E2E__ ||
+    window.__farmingCrtTerminalTest
+  ) return;
+  window.__farmingCrtTerminalTest = {
+    getState() {
+      const replication = crtTerminalReplication;
+      if (!replication || replication.disposed) return null;
+      return {
+        runtimeEpoch: replication.replayState.runtimeEpoch,
+        outputSeq: replication.replayState.outputSeq,
+        stateRevision: replication.replayState.stateRevision,
+        cols: terminal?.cols || 0,
+        rows: terminal?.rows || 0,
+        replaying: replication.replayState.recovering,
+        checkpointHalted: replication.replayState.halted,
+        writeInProgress: replication.writeInProgress,
+        checkpointInFlight: replication.checkpointInFlight,
+        checkpointInstallInProgress: replication.installInProgress,
+        pendingFitResize: replication.pendingFitResize,
+        fitResizeTimerPending: replication.fitResizeTimer !== null
+      };
+    },
+    getRows() {
+      const buffer = terminal && terminal.buffer && terminal.buffer.active;
+      if (!buffer || typeof buffer.getLine !== 'function') return [];
+      const rows = [];
+      for (let index = 0; index < buffer.length; index += 1) {
+        rows.push(buffer.getLine(index)?.translateToString(true) || '');
+      }
+      return rows;
+    },
+    notifyResizeForTest(cols, rows) {
+      sendSessionResize(focusedAgentId, { cols, rows });
+    },
+    streamSequenced(data, outputSeq, runtimeEpoch, stateRevision) {
+      const replication = crtTerminalReplication;
+      if (!replication || replication.disposed) return false;
+      handleCrtTerminalStream({
+        agentId: replication.agentId,
+        kind: 'output',
+        data: String(data || ''),
+        outputSeq,
+        runtimeEpoch,
+        stateRevision
+      });
+      return true;
+    },
+    replaceStream(stream) {
+      const replication = crtTerminalReplication;
+      if (!replication || replication.disposed || !stream) return false;
+      handleCrtTerminalStream({
+        ...stream,
+        agentId: replication.agentId,
+        replace: true
+      });
+      return true;
+    }
+  };
+}
+
+function disposeCrtTerminalReplication() {
+  const replication = crtTerminalReplication;
+  if (!replication) return;
+  replication.disposed = true;
+  if (replication.fitResizeTimer) clearTimeout(replication.fitResizeTimer);
+  replication.fitResizeTimer = null;
+  replication.pendingFitResize = null;
+  if (replication.checkpointRetryTimer) clearTimeout(replication.checkpointRetryTimer);
+  replication.checkpointRetryTimer = null;
+  replication.checkpointAbortController?.abort();
+  replication.checkpointAbortController = null;
+  document.getElementById('terminal-output')?.classList.remove('crt-terminal-checkpoint-installing');
+  crtTerminalReplication = null;
+}
+
+function queueCrtTerminalInput(input) {
+  const replication = crtTerminalReplication;
+  if (!replication || replication.disposed) return false;
+  const text = String(input || '');
+  if (!text) return false;
+  return Boolean(getSessionClient()?.sendTerminalInput(replication.agentId, text));
+}
+
+function requestCrtTerminalReplay() {
+  const replication = crtTerminalReplication;
+  if (
+    !replication ||
+    replication.disposed ||
+    replication.replayState.halted ||
+    replication.checkpointRetryTimer ||
+    replication.checkpointInFlight ||
+    replication.installInProgress
+  ) return;
+  TERMINAL_REPLAY.beginRecovery(replication.replayState);
+  void refreshSessionView(true, replication.agentId, getCurrentSessionToken());
+}
+
+function queueCrtTerminalTransition(event) {
+  const replication = crtTerminalReplication;
+  if (!replication || replication.disposed) return;
+  const result = TERMINAL_REPLAY.queueTransition(replication.replayState, event);
+  if (!result.queued) {
+    requestCrtTerminalReplay();
+  }
+}
+
+function scheduleCrtTerminalCheckpointRetry(replication, delay) {
+  if (
+    !replication ||
+    replication.disposed ||
+    replication.replayState.halted ||
+    replication.checkpointRetryTimer
+  ) return;
+  replication.checkpointRetryTimer = setTimeout(() => {
+    replication.checkpointRetryTimer = null;
+    if (!crtTerminalReplication || crtTerminalReplication !== replication || replication.disposed) return;
+    requestCrtTerminalReplay();
+  }, delay);
+}
+
+function retryCrtTerminalReplayAfterFailure(replication, failure, error = null) {
+  if (!replication || replication.disposed) return;
+  replication.checkpointInFlight = false;
+  if (failure.halted) {
+    stopCrtTerminalReplay(replication, failure.message);
+    return;
+  }
+  if (error) console.warn('Terminal replay request failed; retrying:', error);
+  scheduleCrtTerminalCheckpointRetry(replication, failure.delay);
+}
+
+function finishCrtTerminalReplay(replication = crtTerminalReplication) {
+  if (
+    !replication ||
+    replication.disposed ||
+    replication.checkpointInFlight ||
+    replication.installInProgress ||
+    replication.pendingCheckpoint ||
+    replication.writeInProgress
+  ) return;
+  if (replication.replayState.queuedTransitions.length > 0 && !replication.replayState.recovering) {
+    flushCrtTerminalTransitions();
+    if (
+      replication.replayState.queuedTransitions.length > 0 ||
+      replication.writeInProgress ||
+      replication.checkpointInFlight ||
+      replication.replayState.recovering
+    ) return;
+  }
+  if (
+    replication.replayState.recovering ||
+    TERMINAL_REPLAY.isReplayTargetPending(replication.replayState)
+  ) {
+    requestCrtTerminalReplay();
+    return;
+  }
+  requestAnimationFrame(() => {
+    if (!crtTerminalReplication || crtTerminalReplication !== replication || replication.disposed) return;
+    document.getElementById('terminal-output')?.classList.remove('crt-terminal-checkpoint-installing');
+    sendSessionResize(replication.agentId);
+  });
+}
+
+function stopCrtTerminalReplay(replication, error) {
+  if (!replication || replication.disposed) return;
+  replication.checkpointInFlight = false;
+  replication.installInProgress = false;
+  replication.pendingCheckpoint = null;
+  TERMINAL_REPLAY.clearQueuedTransitions(replication.replayState);
+  document.getElementById('terminal-output')?.classList.add('crt-terminal-checkpoint-installing');
+  console.error('Terminal replay failed:', error);
+  showCrtTerminalFailure(
+    'CRT TERMINAL SYNC ERROR',
+    error,
+    'The Agent is still running. Close and reopen this terminal to retry recovery.'
+  );
+}
+
+function applyCrtTerminalTransition(event) {
+  const replication = crtTerminalReplication;
+  if (!replication || !terminal || replication.disposed) return;
+  const decision = TERMINAL_REPLAY.classifyTransition(replication.replayState, event);
+  if (decision.action === 'drop') return;
+  if (decision.action === 'recover') {
+    queueCrtTerminalTransition(event);
+    requestCrtTerminalReplay();
+    return;
+  }
+
+  if (event.kind === 'resize') {
+    replication.applyingLocalResize = true;
+    try {
+      terminal.resize(Math.floor(event.cols), Math.floor(event.rows));
+    } finally {
+      replication.applyingLocalResize = false;
+    }
+    TERMINAL_REPLAY.commitTransition(replication.replayState, event);
+    refreshSessionTerminalUi({ preserveSearchIndex: true });
+    flushCrtTerminalTransitions();
+    return;
+  }
+
+  const transitionData = event.kind === 'clear' ? '\x1b[2J\x1b[3J\x1b[H' : event.data;
+  if (!transitionData) {
+    TERMINAL_REPLAY.commitTransition(replication.replayState, event);
+    flushCrtTerminalTransitions();
+    return;
+  }
+
+  replication.writeInProgress = true;
+  terminal.write(transitionData, () => {
+    if (!crtTerminalReplication || crtTerminalReplication !== replication || replication.disposed) return;
+    TERMINAL_REPLAY.commitTransition(replication.replayState, event);
+    if (event.kind === 'clear') terminal.clearSelection?.();
+    replication.writeInProgress = false;
+    refreshSessionTerminalUi({ preserveSearchIndex: true });
+    if (drainCrtTerminalCheckpointInstall(replication)) return;
+    flushCrtTerminalTransitions();
+    finishCrtTerminalReplay(replication);
+  });
+}
+
+function flushCrtTerminalTransitions() {
+  const replication = crtTerminalReplication;
+  if (
+    !replication ||
+    replication.disposed ||
+    replication.replayState.recovering ||
+    replication.checkpointInFlight ||
+    replication.installInProgress ||
+    replication.writeInProgress
+  ) return;
+
+  while (
+    !replication.replayState.recovering &&
+    !replication.checkpointInFlight &&
+    !replication.installInProgress &&
+    !replication.writeInProgress
+  ) {
+    const next = TERMINAL_REPLAY.takeQueuedTransition(replication.replayState);
+    if (!next) break;
+    applyCrtTerminalTransition(next);
+  }
+}
+
+function performCrtTerminalCheckpointInstall(replication, sessionView) {
+  if (
+    !crtTerminalReplication ||
+    crtTerminalReplication !== replication ||
+    !terminal ||
+    replication.disposed
+  ) return false;
+
+  const installSeq = replication.installSeq + 1;
+  replication.installSeq = installSeq;
+  replication.installInProgress = true;
+  TERMINAL_REPLAY.beginRecovery(replication.replayState, sessionView);
+  const container = document.getElementById('terminal-output');
+  container?.classList.add('crt-terminal-checkpoint-installing');
+
+  replication.applyingLocalResize = true;
+  try {
+    terminal.resize(sessionView.previewCols, sessionView.previewRows);
+  } finally {
+    replication.applyingLocalResize = false;
+  }
+  terminal.reset();
+
+  const finishInstall = () => {
+    if (
+      !crtTerminalReplication ||
+      crtTerminalReplication !== replication ||
+      replication.disposed ||
+      replication.installSeq !== installSeq
+    ) return;
+
+    TERMINAL_REPLAY.commitCheckpoint(replication.replayState, {
+      runtimeEpoch: sessionView.runtimeEpoch,
+      outputSeq: sessionView.outputSeq,
+      stateRevision: sessionView.stateRevision,
+      cols: sessionView.previewCols,
+      rows: sessionView.previewRows
+    });
+    replication.installInProgress = false;
+    refreshSessionTerminalUi({ preserveSearchIndex: true });
+    const runtime = getSessionRuntime();
+    if (runtime) {
+      runtime.markHydrated(sessionView.renderOutput.length);
+      syncSessionRuntimeState();
+    }
+    if (drainCrtTerminalCheckpointInstall(replication)) return;
+    flushCrtTerminalTransitions();
+    finishCrtTerminalReplay(replication);
+  };
+
+  if (sessionView.renderOutput) {
+    terminal.write(sessionView.renderOutput, finishInstall);
+  } else {
+    finishInstall();
+  }
+  return true;
+}
 
-  const snapshotVisibility = sessionView
-    && sessionView.previewSnapshot
-    && sessionView.previewSnapshot.cursorVisible;
-  if (typeof snapshotVisibility === 'boolean') {
-    return `${text}\x1b[?25${snapshotVisibility ? 'h' : 'l'}`;
+function drainCrtTerminalCheckpointInstall(replication = crtTerminalReplication) {
+  if (
+    !replication ||
+    replication.disposed ||
+    replication.installInProgress ||
+    replication.writeInProgress ||
+    !replication.pendingCheckpoint
+  ) return false;
+  const sessionView = replication.pendingCheckpoint;
+  replication.pendingCheckpoint = null;
+  return performCrtTerminalCheckpointInstall(replication, sessionView);
+}
+
+function installCrtTerminalCheckpoint(sessionView) {
+  const replication = crtTerminalReplication;
+  if (!replication || !terminal || replication.disposed) return false;
+  const checkpoint = {
+    runtimeEpoch: sessionView.runtimeEpoch,
+    outputSeq: sessionView.outputSeq,
+    stateRevision: sessionView.stateRevision,
+    cols: sessionView.previewCols,
+    rows: sessionView.previewRows
+  };
+  const decision = TERMINAL_REPLAY.evaluateCheckpoint(replication.replayState, checkpoint);
+  if (decision.action === 'reject') {
+    retryCrtTerminalReplayAfterFailure(
+      replication,
+      TERMINAL_REPLAY.recordInvariantFailure(
+        replication.replayState,
+        decision.signature || 'invalid-checkpoint',
+        decision.message || 'Terminal replay returned an invalid screen state'
+      )
+    );
+    return false;
+  }
+  if (
+    decision.action === 'current' &&
+    terminal.cols === sessionView.previewCols &&
+    terminal.rows === sessionView.previewRows
+  ) {
+    TERMINAL_REPLAY.commitCheckpoint(replication.replayState, checkpoint);
+    flushCrtTerminalTransitions();
+    finishCrtTerminalReplay(replication);
+    return true;
   }
 
-  // Compatibility for a live native PTY host started before cursor visibility
-  // was added to snapshots. Claude's TUI paints its own input cursor and hides
-  // the hardware cursor, so its replay must not expose xterm's default cursor.
-  return crtCommandProgram(agent && agent.command) === 'claude'
-    ? `${text}\x1b[?25l`
-    : text;
+  replication.pendingCheckpoint = sessionView;
+  TERMINAL_REPLAY.beginRecovery(replication.replayState, sessionView);
+  drainCrtTerminalCheckpointInstall(replication);
+  return true;
 }
 
+function handleCrtTerminalStream(stream) {
+  const replication = crtTerminalReplication;
+  if (!replication || !stream || stream.agentId !== replication.agentId) return;
+  if (stream.replace === true) {
+    replication.checkpointSeq += 1;
+    replication.checkpointAbortController?.abort();
+    replication.checkpointAbortController = null;
+    replication.checkpointInFlight = false;
+    installCrtTerminalCheckpoint({
+      runtimeEpoch: stream.runtimeEpoch,
+      outputSeq: stream.outputSeq,
+      stateRevision: stream.stateRevision,
+      previewCols: stream.cols,
+      previewRows: stream.rows,
+      renderOutput: typeof stream.data === 'string' ? stream.data : ''
+    });
+    if (Array.isArray(stream.chunks)) {
+      stream.chunks.forEach((chunk) => queueCrtTerminalTransition({
+        kind: chunk.kind || 'output',
+        data: typeof chunk.data === 'string' ? chunk.data : '',
+        runtimeEpoch: chunk.runtimeEpoch || stream.runtimeEpoch,
+        outputSeq: chunk.outputSeq,
+        stateRevision: chunk.stateRevision,
+        cols: chunk.cols,
+        rows: chunk.rows
+      }));
+    }
+    return;
+  }
+
+  const chunks = Array.isArray(stream.chunks) ? stream.chunks : [stream];
+  chunks.forEach((chunk) => {
+    const event = {
+      kind: chunk.kind || 'output',
+      data: typeof chunk.data === 'string' ? chunk.data : '',
+      runtimeEpoch: chunk.runtimeEpoch || stream.runtimeEpoch,
+      outputSeq: chunk.outputSeq,
+      stateRevision: chunk.stateRevision,
+      cols: chunk.cols,
+      rows: chunk.rows
+    };
+    if (
+      replication.replayState.recovering ||
+      replication.checkpointInFlight ||
+      replication.installInProgress ||
+      replication.writeInProgress
+    ) {
+      queueCrtTerminalTransition(event);
+    } else {
+      applyCrtTerminalTransition(event);
+    }
+  });
+}
 function deriveSessionStreamPatch(stream, currentFocusedAgentId, currentSessionSource) {
   if (!stream) return null;
   if (stream.agentId !== currentFocusedAgentId) return null;
@@ -2335,7 +2675,7 @@ function shouldPollSessionView(sessionSource) {
   if (SESSION_MODAL_BRIDGE && SESSION_MODAL_BRIDGE.shouldPollSessionView) {
     return SESSION_MODAL_BRIDGE.shouldPollSessionView(sessionSource);
   }
-  return sessionSource === 'live-text';
+  return false;
 }
 
 function getSessionModalDomState(documentRef) {
@@ -2354,8 +2694,6 @@ function getSessionRuntime() {
     sessionRuntime = SESSION_MODAL_BRIDGE.createRuntime({
       deriveSessionStreamPatch,
       refreshSessionView,
-      schedulePoll: (handler) => setInterval(handler, 350),
-      clearPoll: (poller) => clearInterval(poller)
     });
   }
 
@@ -2384,11 +2722,6 @@ function getCurrentSessionToken() {
   return runtime ? runtime.getSessionToken() : 0;
 }
 
-function isAwaitingInitialSessionSync() {
-  const runtime = getSessionRuntime();
-  return runtime ? runtime.isAwaitingInitialSync() : false;
-}
-
 function setSessionOutputLength(length) {
   const runtime = getSessionRuntime();
   if (runtime) {
@@ -2550,12 +2883,9 @@ function applyCrtTerminalFontSize(value) {
   if (input) input.value = String(fontSize);
   if (output) output.textContent = `${fontSize} px`;
   if (terminal && terminal.options) terminal.options.fontSize = fontSize;
-  if (terminalInputBridge) terminalInputBridge.style.fontSize = `${fontSize}px`;
   if (terminal && fitAddon && focusedAgentId && typeof requestAnimationFrame === 'function') {
     requestAnimationFrame(() => {
       if (!terminal || !fitAddon || !focusedAgentId) return;
-      fitAddon.fit();
-      syncTerminalInputBridgePosition();
       sendSessionResize();
     });
   }
@@ -3064,6 +3394,7 @@ function formatCrtExactUsageValue(value) {
 }
 
 function formatCrtCompactTotalValue(value) {
+  if (value === null || value === undefined || value === '') return '--';
   const numberValue = Number(value);
   if (!Number.isFinite(numberValue) || numberValue < 0) return '--';
   const units = [
@@ -3098,26 +3429,199 @@ function crtBillingDayPoint(dateValue = billingSelectedDate) {
   return points.find(point => point && point.date === dateValue) || null;
 }
 
-function crtBillingLogPosition(value, minimum, maximum) {
+function crtBillingSelectedDayIsCurrent(point = crtBillingDayPoint()) {
+  const daily = billingSummary && billingSummary.daily;
+  return Boolean(daily && point && point.date === daily.endDate);
+}
+
+function cancelCrtBillingTotalAnimation() {
+  if (billingTotalAnimationFrame !== null) {
+    window.cancelAnimationFrame(billingTotalAnimationFrame);
+    billingTotalAnimationFrame = null;
+  }
+  billingTotalAnimationTarget = null;
+}
+
+function cancelCrtBillingMetricAnimations() {
+  billingAnimatedMetrics.forEach((metric) => {
+    if (metric.frame !== null) window.cancelAnimationFrame(metric.frame);
+  });
+  billingAnimatedMetrics.clear();
+}
+
+function updateCrtBillingAnimatedMetric(key, value, {
+  date = '',
+  live = false,
+  write,
+} = {}) {
+  const target = Number(value);
+  const existing = billingAnimatedMetrics.get(key);
+  if (!Number.isFinite(target) || target < 0 || typeof write !== 'function') {
+    if (existing && existing.frame !== null) window.cancelAnimationFrame(existing.frame);
+    billingAnimatedMetrics.delete(key);
+    write?.(null, null);
+    return;
+  }
+
+  const roundedTarget = Math.round(target);
+  if (existing && existing.frame !== null && existing.target === roundedTarget && existing.date === date) {
+    existing.write = write;
+    return;
+  }
+  if (existing && existing.frame !== null) window.cancelAnimationFrame(existing.frame);
+  const shouldSnap = !live
+    || !existing
+    || existing.date !== date
+    || !Number.isFinite(existing.value)
+    || roundedTarget <= existing.value;
+  if (shouldSnap) {
+    const metric = { date, value: roundedTarget, target: roundedTarget, frame: null, write };
+    billingAnimatedMetrics.set(key, metric);
+    write(roundedTarget, roundedTarget);
+    return;
+  }
+
+  const metric = {
+    date,
+    value: existing.value,
+    target: roundedTarget,
+    frame: null,
+    write,
+  };
+  billingAnimatedMetrics.set(key, metric);
+  const startValue = existing.value;
+  const startedAt = window.performance.now();
+  const step = (now) => {
+    const current = billingAnimatedMetrics.get(key);
+    if (current !== metric) return;
+    const progress = Math.min(1, Math.max(0, (now - startedAt) / CRT_BILLING_TOTAL_ANIMATION_MS));
+    const steppedProgress = Math.min(1, Math.floor(progress * 18) / 18);
+    const easedProgress = 1 - ((1 - steppedProgress) ** 3);
+    metric.value = Math.round(startValue + (roundedTarget - startValue) * easedProgress);
+    metric.write(metric.value, roundedTarget);
+    if (progress < 1) {
+      metric.frame = window.requestAnimationFrame(step);
+      return;
+    }
+    metric.value = roundedTarget;
+    metric.frame = null;
+    metric.write(roundedTarget, roundedTarget);
+  };
+  metric.frame = window.requestAnimationFrame(step);
+}
+
+function updateCrtBillingExactMetric(id, value, { date = '', live = false } = {}) {
+  const element = document.getElementById(id);
+  if (!element) return;
+  updateCrtBillingAnimatedMetric(id, value, {
+    date,
+    live,
+    write: (displayed, target) => {
+      element.textContent = formatCrtExactUsageValue(displayed);
+      element.dataset.displayedValue = displayed === null ? '' : String(displayed);
+      element.dataset.targetValue = target === null ? '' : String(target);
+    },
+  });
+}
+
+function writeCrtBillingTotalDisplay(value, target, { live = false } = {}) {
+  const total = document.getElementById('billing-day-total');
+  const compact = document.getElementById('billing-day-total-compact');
+  const meter = document.getElementById('billing-day-total-meter');
+  const numericValue = Number.isFinite(Number(value)) ? Math.max(0, Math.round(Number(value))) : null;
+  const numericTarget = Number.isFinite(Number(target)) ? Math.max(0, Math.round(Number(target))) : null;
+  if (total) total.textContent = formatCrtExactUsageValue(numericValue);
+  if (compact) compact.textContent = formatCrtCompactTotalValue(numericValue);
+  if (meter) {
+    meter.classList.toggle('is-live', live);
+    meter.dataset.displayedTotal = numericValue === null ? '' : String(numericValue);
+    meter.dataset.targetTotal = numericTarget === null ? '' : String(numericTarget);
+    meter.setAttribute('aria-label', numericTarget === null
+      ? 'Total tokens unavailable'
+      : `${formatCrtExactUsageValue(numericTarget)} total tokens${live ? ', live refresh every 5 seconds' : ''}`);
+  }
+}
+
+function updateCrtBillingTotalDisplay(value, { date = '', live = false } = {}) {
+  const target = Number(value);
+  if (!Number.isFinite(target) || target < 0) {
+    cancelCrtBillingTotalAnimation();
+    billingDisplayedTotalDate = date;
+    billingDisplayedTotalValue = null;
+    writeCrtBillingTotalDisplay(null, null, { live });
+    return;
+  }
+
+  const roundedTarget = Math.round(target);
+  const shouldSnap = !live
+    || billingDisplayedTotalDate !== date
+    || !Number.isFinite(billingDisplayedTotalValue)
+    || roundedTarget <= billingDisplayedTotalValue;
+  if (shouldSnap) {
+    cancelCrtBillingTotalAnimation();
+    billingDisplayedTotalDate = date;
+    billingDisplayedTotalValue = roundedTarget;
+    writeCrtBillingTotalDisplay(roundedTarget, roundedTarget, { live });
+    return;
+  }
+  if (billingTotalAnimationFrame !== null && billingTotalAnimationTarget === roundedTarget) return;
+
+  cancelCrtBillingTotalAnimation();
+  const startValue = billingDisplayedTotalValue;
+  const startedAt = window.performance.now();
+  billingTotalAnimationTarget = roundedTarget;
+  const step = (now) => {
+    const progress = Math.min(1, Math.max(0, (now - startedAt) / CRT_BILLING_TOTAL_ANIMATION_MS));
+    const steppedProgress = Math.min(1, Math.floor(progress * 18) / 18);
+    const easedProgress = 1 - ((1 - steppedProgress) ** 3);
+    billingDisplayedTotalValue = Math.round(startValue + (roundedTarget - startValue) * easedProgress);
+    writeCrtBillingTotalDisplay(billingDisplayedTotalValue, roundedTarget, { live: true });
+    if (progress < 1) {
+      billingTotalAnimationFrame = window.requestAnimationFrame(step);
+      return;
+    }
+    billingDisplayedTotalValue = roundedTarget;
+    billingTotalAnimationFrame = null;
+    billingTotalAnimationTarget = null;
+    writeCrtBillingTotalDisplay(roundedTarget, roundedTarget, { live: true });
+  };
+  billingTotalAnimationFrame = window.requestAnimationFrame(step);
+}
+
+const CRT_BILLING_OVERRANGE_BASE = 1_000_000_000;
+
+function crtBillingOverrangeTier(value) {
+  const total = Math.max(0, Number(value) || 0);
+  if (total < CRT_BILLING_OVERRANGE_BASE) return 0;
+  return Math.min(4, Math.floor(Math.log2(total / CRT_BILLING_OVERRANGE_BASE)) + 1);
+}
+
+function crtBillingOverrangeLabel(tier) {
+  return tier > 0 ? `${2 ** (tier - 1)}B+ OVERRANGE` : '';
+}
+
+function crtBillingHeatThresholds(values) {
+  const activeValues = (Array.isArray(values) ? values : [])
+    .map(value => Math.max(0, Number(value) || 0))
+    .filter(value => value > 0 && value < CRT_BILLING_OVERRANGE_BASE)
+    .sort((left, right) => left - right);
+  if (activeValues.length === 0) return [];
+  return [0.2, 0.4, 0.6, 0.8].map(quantile => (
+    activeValues[Math.min(activeValues.length - 1, Math.ceil(activeValues.length * quantile) - 1)]
+  ));
+}
+
+function crtBillingHeatLevel(value, thresholds) {
   const total = Math.max(0, Number(value) || 0);
   if (total <= 0) return 0;
-  if (total <= minimum || maximum <= minimum) return 2;
-  const position = (Math.log10(total) - Math.log10(minimum))
-    / (Math.log10(maximum) - Math.log10(minimum)) * 100;
-  return Math.max(2, Math.min(100, position));
+  const bands = Array.isArray(thresholds) ? thresholds : [];
+  return Math.max(1, Math.min(5, 1 + bands.filter(threshold => total > threshold).length));
 }
 
-function crtBillingLogGuideValues(minimum, maximum) {
-  const values = [];
-  const firstExponent = Math.ceil(Math.log10(Math.max(1, minimum)));
-  const lastExponent = Math.floor(Math.log10(Math.max(1, maximum)));
-  for (let exponent = firstExponent; exponent <= lastExponent; exponent += 1) {
-    const value = 10 ** exponent;
-    if (value > minimum && value < maximum) values.push(value);
-  }
-  const upperThird = 3 * (10 ** lastExponent);
-  if (upperThird > minimum && upperThird < maximum) values.push(upperThird);
-  return Array.from(new Set(values)).sort((left, right) => left - right);
+function crtBillingDayDetailHasHourlyActivity(detail) {
+  return Boolean(detail && Array.isArray(detail.hours) && detail.hours.some(hour => (
+    Math.max(0, Number(hour && hour.totalTokens) || 0) > 0
+  )));
 }
 
 function crtBillingHourlyPath(hours, valueForHour, maximum) {
@@ -3126,10 +3630,11 @@ function crtBillingHourlyPath(hours, valueForHour, maximum) {
   const points = Array.isArray(hours) ? hours : [];
   if (points.length === 0 || maximum <= 0) return '';
   return points.map((hour, index) => {
-    const x = points.length === 1 ? 0 : index / (points.length - 1) * width;
+    const startX = index / points.length * width;
+    const endX = (index + 1) / points.length * width;
     const value = Math.max(0, Number(valueForHour(hour)) || 0);
     const y = height - Math.min(1, value / maximum) * height;
-    return `${index === 0 ? 'M' : 'L'}${x.toFixed(1)} ${y.toFixed(1)}`;
+    return `${index === 0 ? 'M' : 'L'}${startX.toFixed(1)} ${y.toFixed(1)} L${endX.toFixed(1)} ${y.toFixed(1)}`;
   }).join(' ');
 }
 
@@ -3145,6 +3650,8 @@ function renderCrtBillingDayInsight() {
   const cachePath = document.getElementById('billing-day-cache-path');
   const scale = document.getElementById('billing-day-curve-scale');
   const maximumLabel = document.getElementById('billing-day-curve-max');
+  const hourStrip = document.getElementById('billing-day-hour-strip');
+  const hourReadout = document.getElementById('billing-day-hour-readout');
   const shares = document.getElementById('billing-day-provider-shares');
   const maximum = Math.max(0, ...hours.map(hour => Math.max(0, Number(hour && hour.totalTokens) || 0)));
 
@@ -3154,19 +3661,94 @@ function renderCrtBillingDayInsight() {
     hour => (Number(hour.cacheReadTokens) || 0) + (Number(hour.cacheWriteTokens) || 0),
     maximum,
   ));
-  if (scale) scale.textContent = maximum > 0 ? `${formatCrtUsageValue(maximum)} TOK/H PEAK` : '-- TOK/H PEAK';
-  if (maximumLabel) maximumLabel.textContent = maximum > 0 ? formatCrtUsageValue(maximum) : '--';
+  const isToday = crtBillingSelectedDayIsCurrent(point);
+  updateCrtBillingAnimatedMetric('billing-day-curve-scale', maximum > 0 ? maximum : null, {
+    date: point && point.date || '',
+    live: isToday,
+    write: displayed => {
+      if (scale) scale.textContent = displayed === null ? '-- TOK/H PEAK' : `${formatCrtUsageValue(displayed)} TOK/H PEAK`;
+    },
+  });
+  updateCrtBillingAnimatedMetric('billing-day-curve-max', maximum > 0 ? maximum : null, {
+    date: point && point.date || '',
+    live: isToday,
+    write: displayed => {
+      if (maximumLabel) maximumLabel.textContent = displayed === null ? '--' : formatCrtUsageValue(displayed);
+    },
+  });
+  if (hourStrip) {
+    hourStrip.replaceChildren();
+    if (hours.length > 0) {
+      const heatThresholds = crtBillingHeatThresholds(hours.map(hour => hour && hour.totalTokens));
+      if (!Number.isInteger(billingSelectedHour) || billingSelectedHour < 0 || billingSelectedHour >= hours.length) {
+        billingSelectedHour = hours.reduce((peakIndex, hour, index) => (
+          Number(hour && hour.totalTokens) > Number(hours[peakIndex] && hours[peakIndex].totalTokens) ? index : peakIndex
+        ), 0);
+      }
+      const selectHour = (index, { focus = false } = {}) => {
+        billingSelectedHour = index;
+        hourStrip.querySelectorAll('.billing-day-hour-cell').forEach((cell, cellIndex) => {
+          const selected = cellIndex === index;
+          cell.classList.toggle('selected', selected);
+          cell.setAttribute('aria-selected', selected ? 'true' : 'false');
+          cell.tabIndex = selected ? 0 : -1;
+        });
+        const hour = hours[index] || {};
+        const hourValue = Number.isFinite(Number(hour.hour)) ? Number(hour.hour) : index;
+        const total = Math.max(0, Number(hour.totalTokens) || 0);
+        const cache = Math.max(0, (Number(hour.cacheReadTokens) || 0) + (Number(hour.cacheWriteTokens) || 0));
+        if (hourReadout) {
+          const endHour = hourValue + 1;
+          const cacheShare = total > 0 ? `${(cache / total * 100).toFixed(1)}% CACHE` : 'NO ACTIVITY';
+          hourReadout.textContent = `[${String(hourValue).padStart(2, '0')}:00—${String(endHour).padStart(2, '0')}:00]  TOTAL ${formatCrtUsageValue(total)}  //  CACHE ${formatCrtUsageValue(cache)}  //  ${cacheShare}`;
+          hourReadout.title = `${String(hourValue).padStart(2, '0')}:00—${String(endHour).padStart(2, '0')}:00 · ${formatCrtExactUsageValue(total)} total tokens · ${formatCrtExactUsageValue(cache)} cache tokens`;
+        }
+        if (focus) hourStrip.children[index]?.focus();
+      };
+      hours.forEach((hour, index) => {
+        const total = Math.max(0, Number(hour && hour.totalTokens) || 0);
+        const cache = Math.max(0, (Number(hour && hour.cacheReadTokens) || 0) + (Number(hour && hour.cacheWriteTokens) || 0));
+        const hourValue = Number.isFinite(Number(hour && hour.hour)) ? Number(hour.hour) : index;
+        const overrangeTier = crtBillingOverrangeTier(total);
+        const cell = document.createElement('button');
+        cell.type = 'button';
+        cell.className = 'billing-day-hour-cell';
+        cell.dataset.level = overrangeTier ? 'overrange' : String(crtBillingHeatLevel(total, heatThresholds));
+        if (overrangeTier) cell.dataset.overrange = String(overrangeTier);
+        cell.dataset.hour = String(hourValue);
+        cell.setAttribute('role', 'gridcell');
+        cell.setAttribute('aria-label', `${String(hourValue).padStart(2, '0')}:00 to ${String(hourValue + 1).padStart(2, '0')}:00, ${formatCrtExactUsageValue(total)} total tokens, ${formatCrtExactUsageValue(cache)} cache tokens`);
+        cell.tabIndex = index === billingSelectedHour ? 0 : -1;
+        cell.addEventListener('click', () => selectHour(index));
+        cell.addEventListener('mouseenter', () => selectHour(index));
+        cell.addEventListener('focus', () => selectHour(index));
+        cell.addEventListener('keydown', (event) => {
+          if (!['ArrowLeft', 'ArrowRight'].includes(event.key)) return;
+          event.preventDefault();
+          event.stopPropagation();
+          selectHour(Math.max(0, Math.min(hours.length - 1, index + (event.key === 'ArrowLeft' ? -1 : 1))), { focus: true });
+        });
+        hourStrip.appendChild(cell);
+      });
+      selectHour(billingSelectedHour);
+    } else if (hourReadout) {
+      hourReadout.textContent = billingDayDetailLoading ? 'READING HOURLY COORDINATES' : 'NO HOURLY ACTIVITY';
+      hourReadout.removeAttribute('title');
+    }
+  }
   if (state) {
-    state.classList.toggle('is-error', Boolean(billingDayDetailError));
-    state.textContent = billingDayDetailError
-      ? 'DAY SIGNAL LOST'
-      : billingDayDetailLoading && !selectedDetail
-        ? 'READING 24 HOURLY BINS'
-        : selectedDetail && maximum > 0
-          ? '24 HOURLY BINS READY'
-          : selectedDetail
-            ? 'NO HOURLY ACTIVITY'
-            : 'SELECTED DAY DETAIL';
+    state.classList.toggle('is-error', Boolean(billingDayDetailError && !selectedDetail));
+    state.textContent = billingDayDetailError && selectedDetail
+      ? '24 HOURLY BINS READY · STALE'
+      : billingDayDetailError
+        ? 'DAY SIGNAL LOST'
+        : billingDayDetailLoading && !selectedDetail
+          ? 'READING 24 HOURLY BINS'
+          : selectedDetail && maximum > 0
+            ? '24 HOURLY BINS READY'
+            : selectedDetail
+              ? 'NO HOURLY ACTIVITY'
+              : 'SELECTED DAY DETAIL';
   }
 
   if (!shares) return;
@@ -3209,42 +3791,46 @@ function renderCrtBillingDayInsight() {
   });
 }
 
-function renderCrtBillingSelectedDay() {
+function renderCrtBillingSelectedDay({ preferSummary = false } = {}) {
   const daily = billingSummary && billingSummary.daily;
   const point = crtBillingDayPoint();
+  const cachedEntry = billingDayDetailCache.get(billingSelectedDate);
+  const selectedDetail = billingDayDetail && billingDayDetail.date === billingSelectedDate
+    ? billingDayDetail
+    : cachedEntry && cachedEntry.detail || null;
+  const displayDetail = preferSummary ? null : selectedDetail;
+  const displayPoint = displayDetail && displayDetail.total || point;
+  const displayProviders = displayDetail && displayDetail.providers || point && point.providers;
+  const isToday = crtBillingSelectedDayIsCurrent(point);
   const date = document.getElementById('billing-day-date');
   const stateLabel = document.getElementById('billing-day-state');
-  const total = document.getElementById('billing-day-total');
-  const compactTotal = document.getElementById('billing-day-total-compact');
-  const input = document.getElementById('billing-day-input');
-  const output = document.getElementById('billing-day-output');
-  const cacheRead = document.getElementById('billing-day-cache-read');
-  const cacheWrite = document.getElementById('billing-day-cache-write');
   const providers = document.getElementById('billing-day-providers');
   if (date) date.textContent = crtBillingDayLabel(point && point.date);
-  if (total) total.textContent = formatCrtExactUsageValue(point && point.totalTokens);
-  if (compactTotal) compactTotal.textContent = formatCrtCompactTotalValue(point && point.totalTokens);
-  if (input) input.textContent = formatCrtExactUsageValue(point && point.inputTokens);
-  if (output) output.textContent = formatCrtExactUsageValue(point && point.outputTokens);
-  if (cacheRead) cacheRead.textContent = formatCrtExactUsageValue(point && point.cacheReadTokens);
-  if (cacheWrite) cacheWrite.textContent = formatCrtExactUsageValue(point && point.cacheWriteTokens);
+  updateCrtBillingTotalDisplay(displayPoint && displayPoint.totalTokens, {
+    date: point && point.date || '',
+    live: isToday,
+  });
+  const selectedDate = point && point.date || '';
+  updateCrtBillingExactMetric('billing-day-input', displayPoint && displayPoint.inputTokens, { date: selectedDate, live: isToday });
+  updateCrtBillingExactMetric('billing-day-output', displayPoint && displayPoint.outputTokens, { date: selectedDate, live: isToday });
+  updateCrtBillingExactMetric('billing-day-cache-read', displayPoint && displayPoint.cacheReadTokens, { date: selectedDate, live: isToday });
+  updateCrtBillingExactMetric('billing-day-cache-write', displayPoint && displayPoint.cacheWriteTokens, { date: selectedDate, live: isToday });
   if (providers) {
-    const providerTotals = point && point.providers ? Object.entries(point.providers) : [];
+    const providerTotals = displayProviders ? Object.entries(displayProviders) : [];
     providers.textContent = providerTotals
       .map(([provider, usage]) => `${provider.toUpperCase()} ${formatCrtExactUsageValue(usage && usage.totalTokens)}`)
       .join(' · ') || '--';
     providers.title = providers.textContent;
   }
   if (stateLabel) {
-    const isToday = Boolean(daily && point && point.date === daily.endDate);
-    const notes = [isToday ? 'PARTIAL DAY' : 'COMPLETE DAY', 'INCL CACHE'];
+    const notes = isToday ? ['LIVE 5S', 'PARTIAL DAY', 'INCL CACHE'] : ['COMPLETE DAY', 'INCL CACHE'];
     if (daily && daily.partial) notes.push('PARTIAL SOURCE');
     if (point && Number(point.unattributedTokens) > 0) {
       notes.push(`${formatCrtUsageValue(point.unattributedTokens)} UNCLASSIFIED`);
     }
     stateLabel.textContent = point ? notes.join(' · ') : 'LOCAL HISTORY';
   }
-  document.querySelectorAll('#billing-daily-bars .billing-daily-column').forEach((cell) => {
+  document.querySelectorAll('#billing-calendar-grid .billing-calendar-day').forEach((cell) => {
     const selected = cell.dataset.date === billingSelectedDate;
     cell.classList.toggle('selected', selected);
     cell.setAttribute('aria-selected', selected ? 'true' : 'false');
@@ -3254,13 +3840,16 @@ function renderCrtBillingSelectedDay() {
 
 function selectCrtBillingDay(dateValue, { focus = false } = {}) {
   if (!crtBillingDayPoint(dateValue)) return false;
+  cancelCrtBillingDayDetailRetry();
   billingSelectedDate = dateValue;
+  billingSelectedHour = null;
+  const isToday = crtBillingSelectedDayIsCurrent(crtBillingDayPoint(dateValue));
   billingDayDetail = billingDayDetailCache.get(dateValue)?.detail || null;
   billingDayDetailError = '';
-  renderCrtBillingSelectedDay();
-  void loadCrtBillingDayDetail(dateValue);
+  renderCrtBillingSelectedDay({ preferSummary: isToday });
+  void loadCrtBillingDayDetail(dateValue, { force: isToday, live: isToday });
   if (focus) {
-    const cell = document.querySelector(`#billing-daily-bars .billing-daily-column[data-date="${dateValue}"]`);
+    const cell = document.querySelector(`#billing-calendar-grid .billing-calendar-day[data-date="${dateValue}"]`);
     if (cell) {
       cell.focus({ preventScroll: true });
       scrollCrtBillingSelectedDayIntoView();
@@ -3269,18 +3858,27 @@ function selectCrtBillingDay(dateValue, { focus = false } = {}) {
   return true;
 }
 
-async function loadCrtBillingDayDetail(dateValue, { force = false } = {}) {
+function cancelCrtBillingDayDetailRetry() {
+  if (billingDayDetailRetryTimer !== null) {
+    clearTimeout(billingDayDetailRetryTimer);
+    billingDayDetailRetryTimer = null;
+  }
+}
+
+async function loadCrtBillingDayDetail(dateValue, { force = false, live = false, retryCount = 0 } = {}) {
   const date = String(dateValue || '').trim();
   if (!crtBillingDayPoint(date)) return;
+  if (retryCount === 0) cancelCrtBillingDayDetailRetry();
   const cachedEntry = billingDayDetailCache.get(date);
   const cached = cachedEntry && cachedEntry.detail;
-  const cacheFresh = cachedEntry && Date.now() - cachedEntry.fetchedAt <= CRT_BILLING_DAY_DETAIL_CACHE_MS;
+  const cacheMaxAge = live ? CRT_BILLING_LIVE_DAY_REFRESH_MS : CRT_BILLING_DAY_DETAIL_CACHE_MS;
+  const cacheFresh = cachedEntry && Date.now() - cachedEntry.fetchedAt <= cacheMaxAge;
   if (cached && cacheFresh && !force) {
     if (billingSelectedDate === date) {
       billingDayDetail = cached;
       billingDayDetailLoading = false;
       billingDayDetailError = '';
-      renderCrtBillingDayInsight();
+      renderCrtBillingSelectedDay();
     }
     return;
   }
@@ -3293,11 +3891,12 @@ async function loadCrtBillingDayDetail(dateValue, { force = false } = {}) {
   billingDayDetailLoading = true;
   billingDayDetailError = '';
   if (billingSelectedDate === date) {
-    billingDayDetail = null;
+    if (!cached) billingDayDetail = null;
     renderCrtBillingDayInsight();
   }
+  let shouldRetry = false;
   try {
-    const response = await fetch(farmingApiPath(`/usage/day?date=${encodeURIComponent(date)}`), {
+    const response = await fetch(farmingApiPath(`/usage/day?date=${encodeURIComponent(date)}${live ? '&live=1' : ''}`), {
       signal: controller.signal,
       cache: 'no-store',
     });
@@ -3306,18 +3905,44 @@ async function loadCrtBillingDayDetail(dateValue, { force = false } = {}) {
       throw new Error(data && data.error ? data.error : `Usage day request failed (${response.status})`);
     }
     if (requestSequence !== billingDayDetailRequestSequence) return;
+    const previousDetail = cached || (billingDayDetail && billingDayDetail.date === date ? billingDayDetail : null);
+    const nextTotal = Math.max(0, Number(data.detail.total && data.detail.total.totalTokens) || 0);
+    if (
+      nextTotal > 0
+      && crtBillingDayDetailHasHourlyActivity(previousDetail)
+      && !crtBillingDayDetailHasHourlyActivity(data.detail)
+    ) {
+      throw new Error('Usage day response omitted previously available hourly bins');
+    }
     billingDayDetailCache.set(date, { detail: data.detail, fetchedAt: Date.now() });
     if (billingSelectedDate === date) billingDayDetail = data.detail;
+    if (live) renderCrtBillingDaily();
   } catch (error) {
     if (controller.signal.aborted || requestSequence !== billingDayDetailRequestSequence) return;
-    if (billingSelectedDate === date) {
+    if (billingSelectedDate === date && retryCount < CRT_BILLING_DAY_DETAIL_MAX_RETRIES) {
+      shouldRetry = true;
+    } else if (billingSelectedDate === date) {
       billingDayDetailError = error instanceof Error ? error.message : 'Failed to load selected day';
     }
   } finally {
     if (requestSequence === billingDayDetailRequestSequence) {
-      billingDayDetailLoading = false;
       billingDayDetailAbortController = null;
-      if (billingSelectedDate === date) renderCrtBillingDayInsight();
+      if (shouldRetry) {
+        billingDayDetailLoading = true;
+        cancelCrtBillingDayDetailRetry();
+        const retryDelay = CRT_BILLING_DAY_DETAIL_RETRY_MS * (2 ** retryCount);
+        billingDayDetailRetryTimer = setTimeout(() => {
+          billingDayDetailRetryTimer = null;
+          if (billingSelectedDate !== date || crtMainView !== 'billing') {
+            billingDayDetailLoading = false;
+            return;
+          }
+          void loadCrtBillingDayDetail(date, { force: true, live, retryCount: retryCount + 1 });
+        }, retryDelay);
+      } else {
+        billingDayDetailLoading = false;
+      }
+      if (billingSelectedDate === date) renderCrtBillingSelectedDay();
     }
   }
 }
@@ -3325,7 +3950,7 @@ async function loadCrtBillingDayDetail(dateValue, { force = false } = {}) {
 function scrollCrtBillingSelectedDayIntoView() {
   const scroll = document.getElementById('billing-daily-scroll');
   const cell = billingSelectedDate
-    ? document.querySelector(`#billing-daily-bars .billing-daily-column[data-date="${billingSelectedDate}"]`)
+    ? document.querySelector(`#billing-calendar-grid .billing-calendar-day[data-date="${billingSelectedDate}"]`)
     : null;
   if (!scroll || !cell) return;
   const left = cell.offsetLeft;
@@ -3355,7 +3980,19 @@ function renderCrtBillingDaily(summary = billingSummary) {
     const element = document.getElementById(id);
     if (element) element.textContent = formatCrtUsageValue(value);
   };
-  setValue('billing-today-total', totals.todayTokens);
+  const todayDetail = daily && billingDayDetailCache.get(daily.endDate)?.detail;
+  const todayTokens = todayDetail && todayDetail.total ? todayDetail.total.totalTokens : totals.todayTokens;
+  updateCrtBillingAnimatedMetric('billing-today-total', todayTokens, {
+    date: daily && daily.endDate || '',
+    live: true,
+    write: (displayed, target) => {
+      const element = document.getElementById('billing-today-total');
+      if (!element) return;
+      element.textContent = formatCrtUsageValue(displayed);
+      element.dataset.displayedValue = displayed === null ? '' : String(displayed);
+      element.dataset.targetValue = target === null ? '' : String(target);
+    },
+  });
   setValue('billing-7d-total', totals.sevenDayTokens);
   setValue('billing-30d-total', totals.thirtyDayTokens);
   setValue('billing-period-total', totals.periodTokens);
@@ -3376,12 +4013,9 @@ function renderCrtBillingDaily(summary = billingSummary) {
       : 'LOCAL TIME';
   }
 
-  const bars = document.getElementById('billing-daily-bars');
-  const xAxis = document.getElementById('billing-daily-x-axis');
-  const yAxis = document.getElementById('billing-y-axis');
-  const guides = document.getElementById('billing-log-guides');
-  const activity = document.getElementById('billing-activity-strip');
-  if (!bars || !xAxis || !yAxis || !guides || !activity) return;
+  const calendar = document.getElementById('billing-calendar-grid');
+  const months = document.getElementById('billing-calendar-months');
+  if (!calendar || !months) return;
   const signature = points.map(point => [
     point.date,
     point.totalTokens,
@@ -3390,95 +4024,62 @@ function renderCrtBillingDaily(summary = billingSummary) {
   ].join(':')).join('|');
   if (signature !== billingDailyRenderSignature) {
     billingDailyRenderSignature = signature;
-    bars.replaceChildren();
-    xAxis.replaceChildren();
-    yAxis.replaceChildren();
-    guides.replaceChildren();
-    activity.replaceChildren();
-
-    const chartPoints = points.slice(-120);
-    const peakTokens = Math.max(1_000, ...chartPoints.map(point => Math.max(0, Number(point.totalTokens) || 0)));
-    const maximum = peakTokens * 1.08;
-    const minimum = Math.max(1, maximum / 1_000);
-    crtBillingLogGuideValues(minimum, maximum).forEach((value) => {
-      const position = crtBillingLogPosition(value, minimum, maximum);
-      const guide = document.createElement('div');
-      guide.className = 'billing-log-guide';
-      guide.style.bottom = `${position}%`;
-      guides.appendChild(guide);
-
-      const axisLabel = document.createElement('span');
-      axisLabel.className = 'billing-y-axis-label';
-      axisLabel.style.bottom = `${position}%`;
-      axisLabel.textContent = formatCrtUsageValue(value);
-      yAxis.appendChild(axisLabel);
+    calendar.replaceChildren();
+    months.replaceChildren();
+
+    const chartPoints = points.slice(-(52 * 7));
+    const heatThresholds = crtBillingHeatThresholds(chartPoints.map(point => point && point.totalTokens));
+    const firstDate = parseCrtBillingDate(chartPoints[0] && chartPoints[0].date);
+    const leadingDays = firstDate ? (firstDate.getDay() + 6) % 7 : 0;
+    const weekCount = Math.max(1, Math.ceil((leadingDays + chartPoints.length) / 7));
+    calendar.style.setProperty('--billing-calendar-weeks', String(weekCount));
+    months.style.setProperty('--billing-calendar-weeks', String(weekCount));
+    Array.from({ length: leadingDays }).forEach(() => {
+      const spacer = document.createElement('span');
+      spacer.className = 'billing-calendar-spacer';
+      spacer.setAttribute('aria-hidden', 'true');
+      calendar.appendChild(spacer);
     });
-    const floorLabel = document.createElement('span');
-    floorLabel.className = 'billing-y-axis-label is-floor';
-    floorLabel.style.bottom = '0';
-    floorLabel.textContent = `≤${formatCrtUsageValue(minimum)}`;
-    yAxis.appendChild(floorLabel);
-
-    bars.style.setProperty('--billing-chart-days', String(Math.max(1, chartPoints.length)));
-    xAxis.style.setProperty('--billing-chart-days', String(Math.max(1, chartPoints.length)));
+
+    const monthLabels = Array.from({ length: weekCount }, () => '');
     chartPoints.forEach((point, index) => {
       const pointDate = parseCrtBillingDate(point.date);
-      const axisTick = document.createElement('span');
-      const isFirst = index === 0;
-      const isLast = index === chartPoints.length - 1;
-      const isHalfMonth = pointDate && [1, 15].includes(pointDate.getDate());
-      if (pointDate && (isFirst || isLast || isHalfMonth)) {
-        const month = pointDate.toLocaleDateString('en-US', { month: 'short' }).toUpperCase();
-        axisTick.textContent = `${month} ${String(pointDate.getDate()).padStart(2, '0')}`;
-        axisTick.className = `has-label${isLast ? ' is-end' : ''}`;
+      const weekIndex = Math.floor((leadingDays + index) / 7);
+      if (pointDate && (index === 0 || pointDate.getDate() === 1) && !monthLabels[weekIndex]) {
+        monthLabels[weekIndex] = pointDate.toLocaleDateString('en-US', { month: 'short' }).toUpperCase();
       }
-      xAxis.appendChild(axisTick);
-
       const total = Math.max(0, Number(point.totalTokens) || 0);
       const cache = Math.min(total, Math.max(0, Number(point.cacheReadTokens) || 0)
         + Math.max(0, Number(point.cacheWriteTokens) || 0));
-      const direct = Math.max(0, total - cache);
-      const column = document.createElement('button');
-      column.type = 'button';
-      column.className = 'billing-daily-column';
-      column.dataset.date = point.date;
-      column.dataset.billion = total >= 1_000_000_000 ? 'true' : 'false';
-      column.setAttribute('role', 'gridcell');
-      column.setAttribute('aria-label', `${point.date}: ${formatCrtExactUsageValue(total)} tokens, ${formatCrtExactUsageValue(cache)} cache tokens`);
-      column.setAttribute('aria-selected', 'false');
-      column.tabIndex = -1;
-      column.title = `${point.date} · ${formatCrtExactUsageValue(total)} total · ${formatCrtExactUsageValue(cache)} cache`;
-      column.addEventListener('click', () => selectCrtBillingDay(point.date));
-      if (total > 0) {
-        const bar = document.createElement('span');
-        bar.className = 'billing-daily-bar';
-        bar.style.height = `${crtBillingLogPosition(total, minimum, maximum)}%`;
-        if (direct > 0) {
-          const directSegment = document.createElement('span');
-          directSegment.className = 'billing-daily-direct';
-          directSegment.style.height = `${direct / total * 100}%`;
-          bar.appendChild(directSegment);
-        }
-        if (cache > 0) {
-          const cacheSegment = document.createElement('span');
-          cacheSegment.className = 'billing-daily-cache';
-          cacheSegment.style.height = `${cache / total * 100}%`;
-          bar.appendChild(cacheSegment);
-        }
-        column.appendChild(bar);
-      }
-      bars.appendChild(column);
+      const overrangeTier = crtBillingOverrangeTier(total);
+      const overrangeLabel = crtBillingOverrangeLabel(overrangeTier);
+      const day = document.createElement('button');
+      day.type = 'button';
+      day.className = 'billing-calendar-day';
+      day.dataset.date = point.date;
+      day.dataset.level = overrangeTier ? 'overrange' : String(crtBillingHeatLevel(total, heatThresholds));
+      if (overrangeTier) day.dataset.overrange = String(overrangeTier);
+      day.setAttribute('role', 'gridcell');
+      day.setAttribute('aria-label', `${point.date}: ${formatCrtExactUsageValue(total)} tokens, ${formatCrtExactUsageValue(cache)} cache tokens${overrangeLabel ? `, ${overrangeLabel}` : ''}`);
+      day.setAttribute('aria-selected', 'false');
+      day.tabIndex = -1;
+      day.title = `${point.date} · ${formatCrtExactUsageValue(total)} total · ${formatCrtExactUsageValue(cache)} cache${overrangeLabel ? ` · ${overrangeLabel}` : ''}`;
+      day.addEventListener('click', () => selectCrtBillingDay(point.date));
+      calendar.appendChild(day);
     });
-
-    activity.style.setProperty('--billing-activity-days', String(Math.max(1, points.length)));
-    activity.setAttribute('aria-label', `${points.length}-day activity: ${activeDays} active days, ${billionDays} days at or above one billion tokens`);
-    points.forEach((point) => {
-      const tick = document.createElement('span');
-      const total = Math.max(0, Number(point.totalTokens) || 0);
-      tick.className = `billing-activity-tick${total > 0 ? ' is-active' : ''}${total >= 1_000_000_000 ? ' is-billion' : ''}`;
-      tick.title = `${point.date} · ${formatCrtExactUsageValue(total)} tokens`;
-      activity.appendChild(tick);
+    const trailingDays = weekCount * 7 - leadingDays - chartPoints.length;
+    Array.from({ length: trailingDays }).forEach(() => {
+      const spacer = document.createElement('span');
+      spacer.className = 'billing-calendar-spacer';
+      spacer.setAttribute('aria-hidden', 'true');
+      calendar.appendChild(spacer);
     });
+    monthLabels.forEach((label) => {
+      const month = document.createElement('span');
+      month.textContent = label;
+      months.appendChild(month);
+    });
+    calendar.setAttribute('aria-label', `${chartPoints.length}-day token activity: ${activeDays} active days, ${billionDays} days at or above one billion tokens`);
 
     if (!billingSelectedDate || !points.some(point => point.date === billingSelectedDate)) {
       billingSelectedDate = daily && daily.endDate || points.at(-1)?.date || '';
@@ -3765,10 +4366,6 @@ async function loadCrtBilling({ fresh = false } = {}) {
   billingAbortController = controller;
   billingLoading = true;
   billingError = '';
-  if (fresh) {
-    billingDayDetailCache.clear();
-    billingDayDetail = null;
-  }
   renderCrtBilling();
   try {
     const response = await fetch(farmingApiPath(`/usage${fresh ? '?fresh=1' : ''}`), {
@@ -3788,7 +4385,10 @@ async function loadCrtBilling({ fresh = false } = {}) {
       billingAbortController = null;
       renderCrtBilling();
       if (!billingError && billingSelectedDate) {
-        void loadCrtBillingDayDetail(billingSelectedDate, { force: fresh });
+        void loadCrtBillingDayDetail(billingSelectedDate, {
+          force: fresh,
+          live: crtBillingSelectedDayIsCurrent(),
+        });
       }
     }
   }
@@ -3799,6 +4399,10 @@ function stopCrtBillingRefresh({ abort = false } = {}) {
     clearInterval(billingRefreshTimer);
     billingRefreshTimer = null;
   }
+  if (billingLiveDayRefreshTimer !== null) {
+    clearInterval(billingLiveDayRefreshTimer);
+    billingLiveDayRefreshTimer = null;
+  }
   if (abort && billingAbortController) {
     billingRequestSequence += 1;
     billingAbortController.abort();
@@ -3811,6 +4415,11 @@ function stopCrtBillingRefresh({ abort = false } = {}) {
     billingDayDetailAbortController = null;
     billingDayDetailLoading = false;
   }
+  if (abort) {
+    cancelCrtBillingDayDetailRetry();
+    cancelCrtBillingTotalAnimation();
+    cancelCrtBillingMetricAnimations();
+  }
 }
 
 function startCrtBillingRefresh() {
@@ -3818,6 +4427,16 @@ function startCrtBillingRefresh() {
   billingRefreshTimer = setInterval(() => {
     if (crtMainView === 'billing' && document.visibilityState !== 'hidden') void loadCrtBilling();
   }, CRT_BILLING_REFRESH_MS);
+  billingLiveDayRefreshTimer = setInterval(() => {
+    if (
+      crtMainView !== 'billing'
+      || billingMode !== 'days'
+      || document.visibilityState === 'hidden'
+      || billingDayDetailLoading
+      || !crtBillingSelectedDayIsCurrent()
+    ) return;
+    void loadCrtBillingDayDetail(billingSelectedDate, { force: true, live: true });
+  }, CRT_BILLING_LIVE_DAY_REFRESH_MS);
 }
 
 function refreshCrtBilling() {
@@ -4140,7 +4759,7 @@ function needsMainAgent(currentState = state) {
   const mainAgent = currentState && currentState.mainAgentId
     ? currentState.agents.find((agent) => agent.id === currentState.mainAgentId)
     : null;
-  return !currentState || !currentState.mainAgentId || (mainAgent && mainAgent.status === 'dead');
+  return !currentState || !currentState.mainAgentId || !isCrtLiveAgent(mainAgent);
 }
 
 function getDefaultWorkspaceForDialog(asMainAgent) {
@@ -4337,6 +4956,7 @@ function refreshWorkspaceMemoryUI() {
 function seedWorkspaceInput() {
   const workspaceInput = document.getElementById('workspace-input');
   if (!workspaceInput) return;
+  hideWorkspaceDirectoryPrompt({ focusInput: false });
   workspaceInput.value = '';
   workspaceInput.placeholder = pendingMainAgentLaunch
     ? formatWorkspaceForDisplay(getDefaultWorkspaceForDialog(true))
@@ -4400,13 +5020,129 @@ function setupWorkspaceHistoryControls() {
 }
 
 async function confirmStartAgent() {
-  if (waitingForAgent || selectedAgentIndex === null || selectedAgentIndex < 0 || selectedAgentIndex >= agents.length) return;
+  if (waitingForAgent || workspaceDirectoryPrompt || selectedAgentIndex === null || selectedAgentIndex < 0 || selectedAgentIndex >= agents.length) return;
 
   const agent = agents[selectedAgentIndex];
   const workspaceInput = normalizeWorkspaceValue(document.getElementById('workspace-input').value);
   const asMainAgent = pendingMainAgentLaunch;
   const workspaceToUse = resolveWorkspaceToStart(workspaceInput, asMainAgent);
 
+  if (asMainAgent || !workspaceToUse) {
+    await startCrtAgent(agent, workspaceToUse, asMainAgent);
+    return;
+  }
+
+  try {
+    const result = await prepareCrtWorkspaceDirectory(workspaceToUse, false);
+    if (result.status === 'ready') {
+      await startCrtAgent(agent, result.workspace, false);
+      return;
+    }
+    showWorkspaceDirectoryPrompt(result.status === 'missing' ? 'confirm' : 'error', {
+      workspace: result.workspace || workspaceToUse,
+      code: result.code || ''
+    });
+  } catch {
+    showWorkspaceDirectoryPrompt('error', { workspace: workspaceToUse, code: '' });
+  }
+}
+
+async function prepareCrtWorkspaceDirectory(workspace, create) {
+  const response = await fetch(farmingApiPath('/workspaces/prepare'), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ workspace, create: create === true })
+  });
+  const result = await response.json().catch(() => null);
+  if (result && typeof result.status === 'string' && typeof result.workspace === 'string') {
+    return result;
+  }
+  throw new Error(result && result.message ? result.message : `Failed to prepare workspace (${response.status})`);
+}
+
+function showWorkspaceDirectoryPrompt(kind, { workspace, code = '' }) {
+  const prompt = document.getElementById('workspace-directory-prompt');
+  const input = document.getElementById('workspace-input');
+  const history = document.getElementById('workspace-history');
+  const startActions = document.getElementById('workspace-start-actions');
+  const createButton = document.getElementById('workspace-directory-create');
+  const cancelButton = document.getElementById('workspace-directory-cancel');
+  const errorBackButton = document.getElementById('workspace-directory-error-back');
+  if (!prompt || !input || !createButton || !cancelButton || !errorBackButton) return;
+
+  workspaceDirectoryPrompt = { kind, workspace, code };
+  const isError = kind === 'error';
+  const isCreating = kind === 'creating';
+  prompt.hidden = false;
+  prompt.classList.toggle('error', isError);
+  input.disabled = true;
+  if (history) history.style.display = 'none';
+  if (startActions) startActions.style.display = 'none';
+
+  document.getElementById('workspace-directory-prompt-icon').textContent = isError ? '[!]' : '[+]';
+  document.getElementById('workspace-directory-prompt-title').textContent = isError
+    ? 'Could not create workspace'
+    : isCreating
+      ? 'Creating workspace...'
+      : 'Create this workspace?';
+  document.getElementById('workspace-directory-prompt-description').textContent = isError
+    ? code === 'workspace-create-forbidden'
+      ? 'Farming does not have permission to create this directory. Choose another location or update the parent directory permissions.'
+      : 'Farming could not create this directory. Check the path and try again.'
+    : 'This directory does not exist yet. Farming can create it and start the Agent there.';
+  document.getElementById('workspace-directory-prompt-path').textContent = formatWorkspaceForDisplay(workspace);
+
+  createButton.hidden = isError;
+  cancelButton.hidden = isError;
+  errorBackButton.hidden = !isError;
+  createButton.disabled = isCreating;
+  cancelButton.disabled = isCreating;
+  createButton.textContent = isCreating ? 'Creating...' : 'Create & Start [Enter]';
+  clearCrtNavigationSelection();
+  const primary = isError ? errorBackButton : createButton;
+  if (!isCreating) {
+    setCrtNavigationSelection(primary);
+    primary.focus();
+  }
+}
+
+function hideWorkspaceDirectoryPrompt({ focusInput = true } = {}) {
+  const prompt = document.getElementById('workspace-directory-prompt');
+  const input = document.getElementById('workspace-input');
+  const startActions = document.getElementById('workspace-start-actions');
+  workspaceDirectoryPrompt = null;
+  if (prompt) prompt.hidden = true;
+  if (input) input.disabled = false;
+  if (startActions) startActions.style.display = 'block';
+  renderWorkspaceHistoryUI();
+  if (focusInput && input) {
+    input.focus();
+    input.setSelectionRange(input.value.length, input.value.length);
+  }
+}
+
+async function createCrtWorkspaceAndStart() {
+  if (!workspaceDirectoryPrompt || workspaceDirectoryPrompt.kind !== 'confirm') return;
+  const target = workspaceDirectoryPrompt.workspace;
+  const agent = selectedAgentIndex === null ? null : agents[selectedAgentIndex];
+  if (!agent) return;
+  showWorkspaceDirectoryPrompt('creating', { workspace: target });
+  try {
+    const result = await prepareCrtWorkspaceDirectory(target, true);
+    if (result.status === 'created' || result.status === 'ready') {
+      await startCrtAgent(agent, result.workspace, false);
+      return;
+    }
+    showWorkspaceDirectoryPrompt('error', {
+      workspace: result.workspace || target,
+      code: result.code || ''
+    });
+  } catch {
+    showWorkspaceDirectoryPrompt('error', { workspace: target, code: '' });
+  }
+}
+
+async function startCrtAgent(agent, workspaceToUse, asMainAgent) {
   console.log('Starting agent:', agent.name, 'workspace:', workspaceToUse || 'default');
 
   waitingForAgent = true;
@@ -4436,7 +5172,10 @@ async function confirmStartAgent() {
   }));
 }
 
+globalThis.createCrtWorkspaceAndStart = createCrtWorkspaceAndStart;
+
 function backToAgentList() {
+  hideWorkspaceDirectoryPrompt({ focusInput: false });
   clearCrtNavigationSelection();
   selectedAgentIndex = null;
   document.getElementById('agent-list').style.display = 'block';
@@ -4449,6 +5188,7 @@ function selectAgent(index) {
   if (index < 0 || index >= agents.length) return;
 
   const agent = agents[index];
+  hideWorkspaceDirectoryPrompt({ focusInput: false });
 
   console.log('Selected agent:', agent.name);
   clearCrtNavigationSelection();
@@ -4478,10 +5218,11 @@ function requestedCrtAgentId(search = typeof window !== 'undefined' ? window.loc
 function openCrtAgentDeeplinkIfReady() {
   if (didApplyAgentDeeplink || !state) return false;
   didApplyAgentDeeplink = true;
+  crtReadingAnchorApi()?.importFromSearch(window.location.search);
 
   const agentId = requestedCrtAgentId();
   const agent = agentId
-    ? state.agents.find((candidate) => candidate.id === agentId && candidate.archived !== true)
+    ? state.agents.find((candidate) => candidate.id === agentId && isCrtLiveAgent(candidate))
     : null;
   if (!agent) return false;
 
@@ -4505,13 +5246,25 @@ function connect() {
   socket.onopen = () => {
     if (ws !== socket) return;
     console.log('Connected to server');
+    socket.send(JSON.stringify({ type: 'protocol-hello', protocolVersion: CRT_PROTOCOL_VERSION }));
     const activeAgentId = isCrtSessionOpen() ? focusedAgentId : null;
     getSessionClient()?.focusAgent(activeAgentId, {
       streamScope: 'focused',
       previewScope: activeAgentId ? 'none' : 'all',
     });
     if (activeAgentId && terminal) {
-      void refreshSessionView(true, activeAgentId, getCurrentSessionToken());
+      if (crtTerminalReplication) {
+        clearPendingCrtTerminalFitResize(crtTerminalReplication);
+        crtTerminalReplication.lastResizeCols = null;
+        crtTerminalReplication.lastResizeRows = null;
+        if (crtTerminalReplication.checkpointRetryTimer) {
+          clearTimeout(crtTerminalReplication.checkpointRetryTimer);
+          crtTerminalReplication.checkpointRetryTimer = null;
+        }
+        TERMINAL_REPLAY.resetRecovery(crtTerminalReplication.replayState);
+        TERMINAL_REPLAY.beginRecovery(crtTerminalReplication.replayState);
+        requestCrtTerminalReplay();
+      }
     }
     loadAgents();
   };
@@ -4519,9 +5272,20 @@ function connect() {
   socket.onmessage = (event) => {
     if (ws !== socket) return;
     const data = JSON.parse(event.data);
+    if (data.type === 'protocol-hello') {
+      if (data.protocolVersion !== CRT_PROTOCOL_VERSION) {
+        socket.close(4002, `Unsupported Farming protocol version ${data.protocolVersion}`);
+      }
+      return;
+    }
+    if (data.type === 'protocol-error') {
+      console.error(data.message || 'Farming protocol error');
+      return;
+    }
     if (data.type === 'state') {
       const prevAgentCount = state ? state.agents.length : 0;
       state = data.state;
+      pruneCrtStructuredPreviews(state);
       const activeAgentIds = new Set(state.agents.map((agent) => agent.id));
       terminalPreviewSnapshots.forEach((_snapshot, agentId) => {
         if (!activeAgentIds.has(agentId)) terminalPreviewSnapshots.delete(agentId);
@@ -4532,6 +5296,7 @@ function connect() {
         }
       });
       const dashboardRendered = renderCrtDashboardIfNeeded();
+      scheduleCrtRenderedStructuredPreviews();
       if (dashboardRendered && crtMainView === 'history') renderCrtHistory();
       if (crtMainView === 'search') renderCrtSearch();
       generateKeyMap();
@@ -4558,6 +5323,14 @@ function connect() {
       openCrtAgentDeeplinkIfReady();
     } else if (data.type === 'agent-started') {
       selectCrtStartedAgent(data.agentId);
+    } else if (data.type === 'agent-update') {
+      const update = data.update;
+      const agent = update && state && state.agents.find(candidate => candidate.id === update.agentId);
+      if (agent && update.patch && typeof update.patch === 'object') {
+        Object.assign(agent, update.patch);
+        renderCrtDashboardIfNeeded();
+        if (agent.id === focusedAgentId) updateCrtRuntimeSwitchControl(agent);
+      }
     } else if (data.type === 'session-preview') {
       const preview = data.preview;
       if (preview && preview.agentId) {
@@ -4573,11 +5346,16 @@ function connect() {
           agent.previewRows = preview.rows || agent.previewRows;
           agent.previewSnapshot = preview.previewSnapshot || null;
           if (preview.terminalStatus) agent.terminalStatus = preview.terminalStatus;
+          if (preview.runtimeObservation) agent.runtimeObservation = preview.runtimeObservation;
           if (isCrtSessionOpen()) dashboardRenderDeferred = true;
           else scheduleCrtPreviewCardRender(agent, previousSnapshot, previousText, previewChanged);
         }
       }
     } else if (data.type === 'session-output') {
+      if (crtTerminalReplication) {
+        handleCrtTerminalStream(data.stream);
+        return;
+      }
       const runtime = getSessionRuntime();
       const sessionToken = runtime ? runtime.getSessionToken() : 0;
       const runtimeResult = runtime ? runtime.handleStreamMessage(data.stream) : null;
@@ -4596,10 +5374,20 @@ function connect() {
           setSessionOutputLength(getSessionOutputLength() + patch.nextLengthDelta);
         }
       }
+    } else if (data.type === 'agent-activity') {
+      const activity = data.activity;
+      const agent = activity && state && state.agents.find((candidate) => candidate.id === activity.agentId);
+      if (agent) {
+        Object.assign(agent, activity);
+        renderCrtDashboardIfNeeded();
+      }
     } else if (data.type === 'system-stats') {
       updateSystemStats(data.stats, data.uptime, data.usageRate);
     } else if (data.type === 'error') {
       waitingForAgent = false;
+      if (workspaceDirectoryPrompt?.kind === 'creating') {
+        hideWorkspaceDirectoryPrompt({ focusInput: false });
+      }
       alert('Error: ' + data.message);
     }
   };
@@ -4608,6 +5396,21 @@ function connect() {
     if (ws !== socket) return;
     ws = null;
     console.log('Disconnected from server');
+    if (crtTerminalReplication) {
+      clearPendingCrtTerminalFitResize(crtTerminalReplication);
+      crtTerminalReplication.lastResizeCols = null;
+      crtTerminalReplication.lastResizeRows = null;
+      crtTerminalReplication.checkpointSeq += 1;
+      crtTerminalReplication.checkpointAbortController?.abort();
+      crtTerminalReplication.checkpointAbortController = null;
+      crtTerminalReplication.checkpointInFlight = false;
+      if (crtTerminalReplication.checkpointRetryTimer) {
+        clearTimeout(crtTerminalReplication.checkpointRetryTimer);
+        crtTerminalReplication.checkpointRetryTimer = null;
+      }
+      TERMINAL_REPLAY.resetRecovery(crtTerminalReplication.replayState);
+      TERMINAL_REPLAY.beginRecovery(crtTerminalReplication.replayState);
+    }
     if (typeof document === 'undefined' || document.visibilityState !== 'hidden') {
       wsReconnectTimer = setTimeout(() => {
         wsReconnectTimer = null;
@@ -4651,7 +5454,7 @@ function checkMainAgentStatus() {
     ? state.agents.find(a => a.id === state.mainAgentId)
     : null;
 
-  if (!state.mainAgentId || (mainAgent && mainAgent.status === 'dead')) {
+  if (!state.mainAgentId || !isCrtLiveAgent(mainAgent)) {
     showInputDialog();
   }
 }
@@ -4729,9 +5532,34 @@ function updateSystemStats(stats, uptime, usageRate) {
   }
 }
 
+function isCrtLiveAgent(agent) {
+  return Boolean(
+    agent
+    && agent.archived !== true
+    && agent.status !== 'dead'
+    && agent.status !== 'stopped'
+  );
+}
+
+function getCrtLiveAgents(currentState = state) {
+  if (!currentState || !Array.isArray(currentState.agents)) return [];
+  return currentState.agents.filter(isCrtLiveAgent);
+}
+
 function getCrtRegularAgents(currentState = state) {
   if (!currentState || !Array.isArray(currentState.agents)) return [];
-  return currentState.agents.filter((agent) => agent.id !== currentState.mainAgentId);
+  return getCrtLiveAgents(currentState).filter((agent) => (
+    agent.id !== currentState.mainAgentId && agent.isMain !== true
+  ));
+}
+
+function getCrtAgentRemovalFallback(currentState, removedAgentId) {
+  const liveAgents = getCrtLiveAgents(currentState);
+  const removedIndex = liveAgents.findIndex((agent) => agent.id === removedAgentId);
+  const remaining = liveAgents.filter((agent) => agent.id !== removedAgentId);
+  if (!remaining.length) return '';
+  if (removedIndex < 0) return remaining[0].id;
+  return remaining[Math.min(removedIndex, remaining.length - 1)].id;
 }
 
 function updateCrtAgentPageStatus(pageState) {
@@ -4774,8 +5602,9 @@ function renderState() {
   lastCrtDashboardSignature = crtDashboardStateSignature(state);
 
   // 更新吊顶的 Agent 数量
-  const activeAgents = state.agents.filter(a => a.status === 'running').length;
-  const totalAgents = state.agents.length;
+  const visibleAgents = getCrtLiveAgents(state);
+  const activeAgents = visibleAgents.filter(a => a.status === 'running').length;
+  const totalAgents = visibleAgents.length;
   document.getElementById('active-agents').textContent = activeAgents;
   document.getElementById('total-agents').textContent = totalAgents;
   updateCrtBrandState(state);
@@ -4789,18 +5618,21 @@ function renderState() {
   agentBlocks.forEach(block => block.remove());
 
   mainAgentBlock.innerHTML = '';
+  mainAgentBlock.removeAttribute('data-agent-id');
+  mainAgentBlock.removeAttribute('data-crt-nav-key');
 
-  if (state.agents.length === 0) {
-    emptyState.style.display = 'flex';
+  const regularAgents = getCrtRegularAgents(state);
+  const hasRegularAgents = regularAgents.length > 0;
+  mapArea.classList.toggle('empty', !hasRegularAgents);
+  emptyState.style.display = hasRegularAgents ? 'none' : 'flex';
+
+  if (visibleAgents.length === 0) {
     mainAgentPanel.style.display = 'none';
     updateCrtAgentPageStatus(getCrtAgentPage([], 0, 1));
     showInputDialog();
     return;
   }
 
-  emptyState.style.display = 'none';
-
-  const regularAgents = getCrtRegularAgents(state);
   const pageLayout = calculateCrtAgentPageLayout(
     mapArea.clientWidth,
     mapArea.clientHeight,
@@ -4823,7 +5655,7 @@ function renderState() {
   // 渲染 Main Agent 到右下角
   if (state.mainAgentId) {
     const mainAgent = state.agents.find(a => a.id === state.mainAgentId);
-    if (mainAgent) {
+    if (isCrtLiveAgent(mainAgent)) {
       mainAgentPanel.style.display = 'block';
       mainAgentBlock.dataset.crtNavKey = `agent:${mainAgent.id}`;
       mainAgentBlock.dataset.agentId = mainAgent.id;
@@ -4843,13 +5675,7 @@ function renderState() {
       const output = document.createElement('div');
       output.className = 'agent-output';
       output.style.height = '80px';
-      const cleanOutput = getAgentDisplayText(mainAgent);
-      const outputTail = document.createElement('div');
-      outputTail.className = 'agent-output-tail';
-      if (!renderCrtTerminalSnapshot(outputTail, mainAgent.previewSnapshot)) {
-        outputTail.textContent = cleanOutput.slice(-150) || 'No output yet...';
-      }
-      output.appendChild(outputTail);
+      renderCrtAgentOutput(output, mainAgent, { main: true });
       mainAgentBlock.appendChild(output);
 
       mainAgentBlock.onclick = () => openSession(mainAgent.id);
@@ -4893,13 +5719,7 @@ function renderState() {
 
     const output = document.createElement('div');
     output.className = 'agent-output';
-    const cleanOutput = getAgentDisplayText(agent);
-    const outputTail = document.createElement('div');
-    outputTail.className = 'agent-output-tail';
-    if (!renderCrtTerminalSnapshot(outputTail, agent.previewSnapshot)) {
-      outputTail.textContent = cleanOutput || 'No output yet...';
-    }
-    output.appendChild(outputTail);
+    renderCrtAgentOutput(output, agent);
     block.appendChild(output);
 
     block.onclick = () => openSession(agent.id);
@@ -4914,14 +5734,14 @@ function generateKeyMap() {
 
   keyMap = {};
   let keyIndex = 1;
-  state.agents.forEach((agent) => {
-    if (agent.id === state.mainAgentId) return; // 跳过 Main Agent
+  getCrtRegularAgents(state).forEach((agent) => {
     keyMap[keyIndex] = agent.id;
     keyIndex++;
   });
 }
 
 function showInputDialog(prefill = null) {
+  hideWorkspaceDirectoryPrompt({ focusInput: false });
   clearCrtNavigationSelection();
   void loadAgents();
   const title = document.getElementById('dialog-title');
@@ -4972,6 +5792,7 @@ function hideInputDialog() {
   pendingMainAgentLaunch = false;
   pendingAgentLaunchPrefill = null;
   waitingForAgent = false;
+  hideWorkspaceDirectoryPrompt({ focusInput: false });
   document.getElementById('agent-list').style.display = 'block';
   document.getElementById('workspace-input-container').style.display = 'none';
   document.getElementById('input-dialog').classList.remove('active');
@@ -4993,10 +5814,10 @@ function isCrtAgentInteractive(agent) {
 }
 
 function structuredRuntimeKind(agent) {
-  if (!agent) return '';
-  if (agent.agentRuntimeMode === 'acp') return 'ACP';
-  if (agent.agentRuntimeMode === 'json') return 'JSON';
-  if (agent.providerSessionProvider === 'codex' && agent.codexRuntimeMode === 'app-server') return 'APP SERVER';
+  const kind = agent && agent.runtimeBinding && agent.runtimeBinding.kind;
+  if (kind === 'acp') return 'ACP';
+  if (kind === 'json') return 'JSON';
+  if (kind === 'app-server') return 'APP SERVER';
   return '';
 }
 
@@ -5011,7 +5832,7 @@ function crtRuntimeView(agent) {
 function canSwitchCrtAgentRuntime(agent) {
   const freshCodexTerminal = agent
     && agent.providerSessionProvider === 'codex'
-    && agent.agentRuntimeMode === 'terminal'
+    && agent.runtimeBinding?.kind === 'terminal'
     && agent.providerSessionTemporary === true
     && agent.terminalInputReceived !== true;
   return Boolean(
@@ -5033,6 +5854,43 @@ function isCrtRuntimeSwitchShortcut(event) {
   );
 }
 
+function hasCrtStructuredLocalEscapeAction(context = {}) {
+  return Boolean(
+    context.structuredTranscriptFocused
+    || context.structuredToolFocused
+    || context.structuredMenuItemFocused
+    || context.structuredInterruptFocused
+    || (context.structuredInputFocused && context.structuredComposerMenuOpen)
+  );
+}
+
+function resolveCrtSessionKeyboardCommand(event, context = {}) {
+  if (!event) return '';
+  const key = String(event.key || '').toLowerCase();
+  const primaryModifier = Boolean(event.ctrlKey || event.metaKey);
+
+  // Session-wide commands must remain reachable from every focus owner,
+  // including the hidden Terminal IME bridge and every structured Chat control.
+  if (primaryModifier && key === 'k') return 'kill';
+  if (primaryModifier && key === 'escape') return 'close';
+
+  // Plain Escape closes an idle Chat only when a more local transition does
+  // not own it. Terminal keeps plain Escape for the running TUI.
+  if (
+    context.structuredSessionActive === true
+    && key === 'escape'
+    && !event.altKey
+    && !event.shiftKey
+    && event.isComposing !== true
+    && context.composing !== true
+    && !hasCrtStructuredLocalEscapeAction(context)
+  ) {
+    return 'close';
+  }
+
+  return '';
+}
+
 function setCrtRuntimeSwitchStatus(message = '', error = false) {
   const status = document.getElementById('crt-runtime-switch-status');
   const messageNode = document.getElementById('crt-runtime-switch-message');
@@ -5128,23 +5986,19 @@ function toggleCrtSessionRuntimeMode() {
 }
 
 function structuredTranscriptEndpoint(agent) {
-  if (agent.agentRuntimeMode === 'acp') return 'acp-transcript';
-  if (agent.agentRuntimeMode === 'json') return 'json-cli-transcript';
+  if (agent.runtimeBinding.kind === 'acp') return 'acp-transcript';
+  if (agent.runtimeBinding.kind === 'json') return 'json-cli-transcript';
   return 'codex-app-server-transcript';
 }
 
 function structuredRuntimeStatus(agent) {
   if (!agent) return '';
-  if (agent.agentRuntimeMode === 'acp') return agent.acpState || 'idle';
-  if (agent.agentRuntimeMode === 'json') return agent.jsonCliState || 'idle';
-  return agent.codexAppServerState || 'idle';
+  return agent.runtimeBinding?.state || 'idle';
 }
 
 function structuredRuntimeError(agent) {
   if (!agent) return '';
-  if (agent.agentRuntimeMode === 'acp') return agent.acpError || '';
-  if (agent.agentRuntimeMode === 'json') return agent.jsonCliError || '';
-  return agent.codexAppServerError || '';
+  return agent.runtimeBinding?.error || '';
 }
 
 function structuredComposerAction(agent, draft = '') {
@@ -5153,12 +6007,8 @@ function structuredComposerAction(agent, draft = '') {
   const status = String(structuredRuntimeStatus(agent) || 'idle');
   const working = ['working', 'waiting-for-permission'].includes(status);
   if (working) {
-    if (agent.agentRuntimeMode === 'acp' && String(draft || '').trim()) return 'send';
-    if (
-      agent.providerSessionProvider === 'codex'
-      && agent.codexRuntimeMode === 'app-server'
-      && String(draft || '').trim()
-    ) return 'steer';
+    if (agent.runtimeBinding?.kind === 'acp' && String(draft || '').trim()) return 'send';
+    if (agent.runtimeBinding?.kind === 'app-server' && String(draft || '').trim()) return 'steer';
     return 'interrupt';
   }
   if (['starting', 'interrupting'].includes(status)) return 'disabled';
@@ -5295,6 +6145,37 @@ function focusStructuredComposerMenuButton(current, offset = 0) {
   return true;
 }
 
+function structuredComposerMenuPath() {
+  return `${structuredComposerMenu}:${structuredComposerConfigId}`;
+}
+
+function captureStructuredComposerMenuFocus(menu) {
+  const focused = document.activeElement && document.activeElement.closest
+    ? document.activeElement.closest('.crt-structured-menu-item')
+    : null;
+  if (!focused || !menu.contains(focused)) return null;
+  const buttons = structuredComposerMenuButtons();
+  return {
+    path: structuredComposerMenuPath(),
+    key: focused.dataset.menuKey || '',
+    index: buttons.indexOf(focused)
+  };
+}
+
+function restoreStructuredComposerMenuFocus(snapshot) {
+  if (!snapshot || snapshot.path !== structuredComposerMenuPath()) return false;
+  const buttons = structuredComposerMenuButtons();
+  if (!buttons.length) return false;
+  const matching = snapshot.key
+    ? buttons.find((button) => button.dataset.menuKey === snapshot.key)
+    : null;
+  const fallbackIndex = Math.min(Math.max(snapshot.index, 0), buttons.length - 1);
+  const target = matching || buttons[fallbackIndex];
+  target.focus();
+  target.scrollIntoView({ block: 'nearest' });
+  return true;
+}
+
 function closeStructuredComposerMenu({ restoreFocus = true } = {}) {
   structuredComposerMenu = '';
   structuredComposerConfigId = '';
@@ -5334,10 +6215,11 @@ async function patchStructuredAcpSession(patch) {
   if (opener && !opener.hidden && !opener.disabled) opener.focus();
 }
 
-function structuredMenuButton(label, description, active, onClick) {
+function structuredMenuButton(label, description, active, onClick, menuKey = '') {
   const button = document.createElement('button');
   button.type = 'button';
   button.className = `crt-structured-menu-item${active ? ' active' : ''}`;
+  button.dataset.menuKey = menuKey;
   const title = document.createElement('span');
   title.textContent = label;
   button.appendChild(title);
@@ -5353,6 +6235,7 @@ function structuredMenuButton(label, description, active, onClick) {
 function renderStructuredComposerMenu() {
   const menu = document.getElementById('crt-structured-composer-menu');
   if (!menu) return;
+  const retainedFocus = captureStructuredComposerMenuFocus(menu);
   menu.replaceChildren();
   const session = structuredSessionSnapshot;
   if (!structuredComposerMenu || !session) {
@@ -5389,7 +6272,7 @@ function renderStructuredComposerMenu() {
           renderStructuredSessionControls();
           updateStructuredComposerState(state && state.agents.find((agent) => agent.id === focusedAgentId));
           input.focus();
-        }));
+        }, `command:${command.name}`));
       });
   } else if (structuredComposerMenu === 'mode') {
     const modes = session.modes && Array.isArray(session.modes.availableModes) ? session.modes.availableModes : [];
@@ -5397,7 +6280,7 @@ function renderStructuredComposerMenu() {
     modes.forEach((mode) => {
       items.appendChild(structuredMenuButton(mode.name || mode.id, mode.description || '', mode.id === current, () => {
         void patchStructuredAcpSession({ modeId: mode.id }).catch(showStructuredComposerError);
-      }));
+      }, `mode:${mode.id}`));
     });
   } else if (!selectedConfig) {
     structuredVisibleConfigOptions(session).forEach((option) => {
@@ -5409,20 +6292,21 @@ function renderStructuredComposerMenu() {
           structuredComposerConfigId = option.id;
           structuredComposerMenuFocusPending = true;
           renderStructuredSessionControls();
-        }
+        },
+        `config:${option.id}`
       ));
     });
   } else if (selectedConfig.type === 'boolean') {
     [false, true].forEach((value) => {
       items.appendChild(structuredMenuButton(value ? 'ON' : 'OFF', selectedConfig.description || '', selectedConfig.currentValue === value, () => {
         void patchStructuredAcpSession({ configId: selectedConfig.id, value }).catch(showStructuredComposerError);
-      }));
+      }, `boolean:${value}`));
     });
   } else {
     structuredSelectOptions(selectedConfig).forEach((candidate) => {
       items.appendChild(structuredMenuButton(candidate.name || candidate.value, candidate.description || '', candidate.value === selectedConfig.currentValue, () => {
         void patchStructuredAcpSession({ configId: selectedConfig.id, value: candidate.value }).catch(showStructuredComposerError);
-      }));
+      }, `option:${candidate.value}`));
     });
   }
 
@@ -5431,6 +6315,8 @@ function renderStructuredComposerMenu() {
   if (structuredComposerMenuFocusPending) {
     structuredComposerMenuFocusPending = false;
     window.requestAnimationFrame(() => focusStructuredComposerMenuButton(null, 0));
+  } else {
+    restoreStructuredComposerMenuFocus(retainedFocus);
   }
 }
 
@@ -5457,11 +6343,11 @@ function renderStructuredSessionControls() {
 async function refreshStructuredSessionControls(agentId = focusedAgentId, force = false) {
   if (!agentId || structuredSessionControlsLoading) return;
   const agent = state && state.agents.find((candidate) => candidate.id === agentId);
-  if (!agent || agent.agentRuntimeMode !== 'acp') {
+  if (!agent || agent.runtimeBinding?.kind !== 'acp') {
     resetStructuredSessionControls();
     return;
   }
-  const revision = String(agent.acpSessionUpdatedAt || '');
+  const revision = String(agent.runtimeBinding.sessionUpdatedAt || '');
   if (!force && (
     (revision && revision === structuredSessionControlsRevision)
     || (!revision && structuredSessionSnapshot)
@@ -5579,7 +6465,7 @@ function updateStructuredComposerState(agent) {
   statusNode.textContent = error || `${kind} ${String(runtimeStatus || 'idle').toUpperCase()}`;
   statusNode.classList.toggle('error', Boolean(error));
   renderStructuredPermissions(agent);
-  if (agent && agent.agentRuntimeMode === 'acp') void refreshStructuredSessionControls(agent.id);
+  if (agent && agent.runtimeBinding?.kind === 'acp') void refreshStructuredSessionControls(agent.id);
 }
 
 function structuredAttachmentId(file) {
@@ -5716,10 +6602,11 @@ function renderStructuredPermissions(agent) {
   const container = document.getElementById('crt-structured-composer-notices');
   if (!container) return;
   container.replaceChildren();
-  if (!agent || agent.agentRuntimeMode !== 'acp') return;
-  const requests = Array.isArray(agent.acpPendingPermissions) && agent.acpPendingPermissions.length
-    ? agent.acpPendingPermissions
-    : (agent.acpPendingPermission ? [agent.acpPendingPermission] : []);
+  if (!agent || agent.runtimeBinding?.kind !== 'acp') return;
+  const runtime = agent.runtimeBinding;
+  const requests = Array.isArray(runtime.pendingPermissions) && runtime.pendingPermissions.length
+    ? runtime.pendingPermissions
+    : (runtime.pendingPermission ? [runtime.pendingPermission] : []);
   requests.forEach((request) => {
     const panel = document.createElement('section');
     panel.className = 'crt-structured-permission';
@@ -5778,13 +6665,13 @@ function structuredTranscriptTurns(transcript) {
     const text = structuredTranscriptContentText(entry.content);
     if (!text) return;
     if (entry.role === 'user') {
-      current = { userMessage: text, finalMessage: '' };
+      current = { id: entry.id || `user-${turns.length}`, userMessage: text, finalMessage: '' };
       turns.push(current);
       return;
     }
     if (entry.role !== 'assistant') return;
     if (!current) {
-      current = { userMessage: '', finalMessage: '' };
+      current = { id: entry.id || `assistant-${turns.length}`, userMessage: '', finalMessage: '' };
       turns.push(current);
     }
     current.finalMessage = text;
@@ -5792,12 +6679,215 @@ function structuredTranscriptTurns(transcript) {
   return turns;
 }
 
+function normalizeCrtStructuredPreviewText(value, limit = 240) {
+  const text = String(value || '').replace(/\s+/g, ' ').trim();
+  if (text.length <= limit) return text;
+  return `${text.slice(0, Math.max(1, limit - 1)).trimEnd()}…`;
+}
+
+function structuredTranscriptAttachmentLabel(content) {
+  const labels = (Array.isArray(content) ? content : []).flatMap((block) => {
+    const type = String(block && block.type || '').toLowerCase();
+    if (type.includes('image')) return ['Image attachment'];
+    if (type.includes('audio')) return ['Audio attachment'];
+    if (type.includes('file') || type.includes('resource')) return ['File attachment'];
+    return [];
+  });
+  return Array.from(new Set(labels)).join(' + ');
+}
+
+function crtStructuredPreviewMessageLines(transcript, limit = 8) {
+  const maxLines = Math.max(1, Number(limit) || 8);
+  const turnLines = structuredTranscriptTurns(transcript).flatMap((turn) => [
+    turn && turn.userMessage
+      ? { role: 'user', label: 'YOU', text: normalizeCrtStructuredPreviewText(turn.userMessage) }
+      : null,
+    turn && turn.finalMessage
+      ? { role: 'assistant', label: 'AGENT', text: normalizeCrtStructuredPreviewText(turn.finalMessage) }
+      : null,
+  ]).filter(Boolean);
+  if (turnLines.length > 0) return turnLines.slice(-maxLines);
+
+  const entries = transcript && Array.isArray(transcript.entries)
+    ? transcript.entries
+      .filter((entry) => (
+        entry
+        && entry.internal !== true
+        && entry.type === 'message'
+        && (entry.role === 'user' || entry.role === 'assistant')
+      ))
+      .map((entry) => ({
+        role: entry.role,
+        label: entry.role === 'user' ? 'YOU' : 'AGENT',
+        text: normalizeCrtStructuredPreviewText(structuredTranscriptContentText(entry.content))
+          || structuredTranscriptAttachmentLabel(entry.content),
+      }))
+      .filter((line) => line.text)
+    : [];
+  return entries.slice(-maxLines);
+}
+
+function structuredEntryActivityText(entry) {
+  if (!entry || entry.internal === true) return '';
+  if (entry.type === 'tool') {
+    const title = normalizeCrtStructuredPreviewText(entry.title || entry.kind || 'Tool activity', 160);
+    const status = normalizeCrtStructuredPreviewText(entry.status, 40).replaceAll('_', ' ');
+    return [title, status].filter(Boolean).join(' · ');
+  }
+  if (entry.type === 'thought') {
+    return normalizeCrtStructuredPreviewText(structuredTranscriptContentText(entry.content), 180);
+  }
+  if (entry.type === 'plan') {
+    const steps = Array.isArray(entry.entries) ? entry.entries : [];
+    const current = steps.find((step) => step && step.status === 'in_progress')
+      || [...steps].reverse().find((step) => step && step.status !== 'completed')
+      || steps.at(-1);
+    return normalizeCrtStructuredPreviewText(current && (current.content || current.title), 180);
+  }
+  return '';
+}
+
+function buildCrtStructuredPreview(transcript, agent = null) {
+  const entries = transcript && Array.isArray(transcript.entries)
+    ? transcript.entries.filter((entry) => entry && entry.internal !== true)
+    : [];
+  const turns = structuredTranscriptTurns(transcript);
+  const latestTurn = turns.at(-1) || null;
+  const messageLines = crtStructuredPreviewMessageLines(transcript);
+  let userText = normalizeCrtStructuredPreviewText(latestTurn && latestTurn.userMessage);
+  let assistantText = normalizeCrtStructuredPreviewText(latestTurn && latestTurn.finalMessage);
+  let activityText = '';
+
+  if (entries.length > 0) {
+    const latestUserIndex = entries.findLastIndex((entry) => entry.type === 'message' && entry.role === 'user');
+    const latestUser = latestUserIndex >= 0 ? entries[latestUserIndex] : null;
+    if (latestUser) {
+      userText = normalizeCrtStructuredPreviewText(structuredTranscriptContentText(latestUser.content))
+        || structuredTranscriptAttachmentLabel(latestUser.content);
+    }
+    const turnEntries = latestUserIndex >= 0 ? entries.slice(latestUserIndex + 1) : entries;
+    const latestAssistant = [...turnEntries].reverse().find((entry) => (
+      entry.type === 'message' && entry.role === 'assistant'
+    ));
+    if (latestAssistant) {
+      assistantText = normalizeCrtStructuredPreviewText(structuredTranscriptContentText(latestAssistant.content))
+        || structuredTranscriptAttachmentLabel(latestAssistant.content);
+    }
+    activityText = [...turnEntries].reverse().map(structuredEntryActivityText).find(Boolean) || '';
+  } else if (latestTurn && Array.isArray(latestTurn.processItems)) {
+    const processItem = [...latestTurn.processItems].reverse().find(Boolean);
+    activityText = normalizeCrtStructuredPreviewText(
+      processItem && (processItem.detail || processItem.title),
+      180,
+    );
+  }
+
+  return {
+    messageLines,
+    userText,
+    assistantText,
+    activityText,
+    state: String(structuredRuntimeStatus(agent) || (transcript && transcript.state) || ''),
+  };
+}
+
+function crtStructuredPreviewRevision(agent) {
+  if (!agent || !isStructuredRuntimeAgent(agent)) return '';
+  const runtime = agent.runtimeBinding;
+  return JSON.stringify([
+    structuredRuntimeKind(agent),
+    structuredRuntimeStatus(agent),
+    runtime.sessionRevision || 0,
+    runtime.sessionUpdatedAt || '',
+    runtime.transcriptUpdatedAt || '',
+    runtime.turnId || '',
+    agent.lastActivity || 0,
+  ]);
+}
+
+function pruneCrtStructuredPreviews(currentState = state) {
+  const visibleIds = new Set(getCrtLiveAgents(currentState).map((agent) => agent.id));
+  crtStructuredPreviewCache.forEach((_value, agentId) => {
+    if (!visibleIds.has(agentId)) crtStructuredPreviewCache.delete(agentId);
+  });
+  crtStructuredPreviewTimers.forEach((timer, agentId) => {
+    if (visibleIds.has(agentId)) return;
+    clearTimeout(timer);
+    crtStructuredPreviewTimers.delete(agentId);
+  });
+}
+
+function scheduleCrtStructuredPreviewRefresh(agent) {
+  if (!isCrtLiveAgent(agent) || !isStructuredRuntimeAgent(agent)) return;
+  const revision = crtStructuredPreviewRevision(agent);
+  const cached = crtStructuredPreviewCache.get(agent.id);
+  if (cached && cached.revision === revision && (cached.loading || cached.ready)) return;
+  if (crtStructuredPreviewTimers.has(agent.id)) return;
+  const timer = setTimeout(() => {
+    crtStructuredPreviewTimers.delete(agent.id);
+    const currentAgent = state && state.agents.find((candidate) => candidate.id === agent.id);
+    if (isCrtLiveAgent(currentAgent) && isStructuredRuntimeAgent(currentAgent)) {
+      void refreshCrtStructuredPreview(currentAgent);
+    }
+  }, CRT_STRUCTURED_PREVIEW_REFRESH_MS);
+  crtStructuredPreviewTimers.set(agent.id, timer);
+}
+
+async function refreshCrtStructuredPreview(agent) {
+  const revision = crtStructuredPreviewRevision(agent);
+  const cached = crtStructuredPreviewCache.get(agent.id);
+  if (cached && cached.revision === revision && (cached.loading || cached.ready)) return;
+  crtStructuredPreviewCache.set(agent.id, {
+    revision,
+    loading: true,
+    ready: false,
+    preview: cached && cached.preview || null,
+    error: '',
+  });
+
+  try {
+    const endpoint = structuredTranscriptEndpoint(agent);
+    const response = await fetch(farmingApiPath(`/agents/${encodeURIComponent(agent.id)}/${endpoint}?maxTurns=20`));
+    const body = await response.json().catch(() => null);
+    if (!response.ok || !body || !body.transcript) {
+      throw new Error(body && body.error ? body.error : `Conversation preview failed (${response.status})`);
+    }
+    const currentAgent = state && state.agents.find((candidate) => candidate.id === agent.id);
+    if (!isCrtLiveAgent(currentAgent) || crtStructuredPreviewRevision(currentAgent) !== revision) {
+      if (isCrtLiveAgent(currentAgent)) scheduleCrtStructuredPreviewRefresh(currentAgent);
+      return;
+    }
+    crtStructuredPreviewCache.set(agent.id, {
+      revision,
+      loading: false,
+      ready: true,
+      preview: buildCrtStructuredPreview(body.transcript, currentAgent),
+      error: '',
+    });
+    if (isCrtSessionOpen()) dashboardRenderDeferred = true;
+    else updateCrtAgentPreviewCard(currentAgent);
+  } catch (error) {
+    const currentAgent = state && state.agents.find((candidate) => candidate.id === agent.id);
+    if (!isCrtLiveAgent(currentAgent) || crtStructuredPreviewRevision(currentAgent) !== revision) return;
+    crtStructuredPreviewCache.set(agent.id, {
+      revision,
+      loading: false,
+      ready: true,
+      preview: cached && cached.preview || null,
+      error: error && error.message ? error.message : 'Conversation preview unavailable',
+    });
+    if (isCrtSessionOpen()) dashboardRenderDeferred = true;
+    else updateCrtAgentPreviewCard(currentAgent);
+  }
+}
+
 function renderStructuredTranscript(transcript, force = false) {
   const container = document.getElementById('terminal-output');
   if (!container) return;
   const updatedAt = String(transcript && transcript.updatedAt || '');
   if (!force && updatedAt && updatedAt === structuredSessionRenderedAt) return;
   const nearBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 80;
+  if (!nearBottom && focusedAgentId) saveCrtStructuredReadingAnchor(focusedAgentId);
   const transcriptNode = document.createElement('div');
   transcriptNode.className = 'crt-structured-transcript';
   const turns = structuredTranscriptTurns(transcript);
@@ -5811,6 +6901,7 @@ function renderStructuredTranscript(transcript, force = false) {
     turns.forEach((turn) => {
       const section = document.createElement('section');
       section.className = 'crt-structured-turn';
+      section.dataset.readingAnchorId = String(turn.id || `${turn.userMessage || ''}\n${turn.finalMessage || ''}`.slice(0, 160));
       if (turn.userMessage) {
         const user = document.createElement('p');
         user.className = 'crt-structured-message user';
@@ -5829,7 +6920,10 @@ function renderStructuredTranscript(transcript, force = false) {
 
   container.replaceChildren(transcriptNode);
   structuredSessionRenderedAt = updatedAt;
-  if (force || nearBottom) container.scrollTop = container.scrollHeight;
+  if (!focusedAgentId || !restoreCrtStructuredReadingAnchor(focusedAgentId)) {
+    if (force || nearBottom) container.scrollTop = container.scrollHeight;
+  }
+  container.onscroll = () => saveCrtStructuredReadingAnchor(focusedAgentId);
   requestAnimationFrame(updateStructuredTranscriptScrollState);
 }
 
@@ -6104,8 +7198,8 @@ async function openStructuredSession(agent, sessionToken) {
 function teardownSessionSurface() {
   stopSessionViewPolling();
   stopStructuredSessionPolling();
+  disposeCrtTerminalReplication();
   disposeTerminal();
-  destroyTerminalInputBridge();
   setStructuredComposerActive(false);
   document.getElementById('terminal-output')?.classList.remove('crt-structured-session');
   if (SESSION_MODAL_BRIDGE && SESSION_MODAL_BRIDGE.resetTerminalShell) {
@@ -6126,6 +7220,7 @@ async function openSession(agentId) {
 
   const agent = state.agents.find(a => a.id === agentId);
   if (!agent) return;
+  crtNavigationKey = `agent:${agentId}`;
   void markCrtAgentReadIfNeeded(agent);
 
   const sessionModal = document.getElementById('session-modal');
@@ -6207,10 +7302,13 @@ async function openSession(agentId) {
   }
 
   disposeTerminal();
+  disposeCrtTerminalReplication();
+  crtTerminalReplication = createCrtTerminalReplication(agentId);
   let mountedTerminal = null;
   try {
     mountedTerminal = SESSION_MODAL_BRIDGE && SESSION_MODAL_BRIDGE.mountTerminal
       ? SESSION_MODAL_BRIDGE.mountTerminal(document, terminalBundle, {
+        authoritativeGeometry: true,
         initialOutput: shouldUseLiveSessionText(agent)
           ? (runtime ? runtime.prepareInitialOutput(agent.output) : agent.output)
           : '',
@@ -6220,11 +7318,10 @@ async function openSession(agentId) {
           sendTerminalInput(data);
         },
         onResize: (cols, rows) => {
+          void cols;
+          void rows;
           if (runtime && !runtime.isCurrentSession(agentId, sessionToken)) return;
-          if (!focusedAgentId) return;
-          const sessionClient = getSessionClient();
-          if (!sessionClient) return;
-          sessionClient.resizeAgent(focusedAgentId, cols, rows);
+          sendSessionResize(agentId);
         },
         hasSelection: hasAnySelection,
         focusTerminal: focusSessionTerminal,
@@ -6265,12 +7362,13 @@ async function openSession(agentId) {
       updateSessionSelectionStatus();
     });
   }
+  if (terminal && typeof terminal.onScroll === 'function') {
+    terminal.onScroll(() => saveCrtTerminalReadingAnchor(agentId, terminal));
+  }
   if (runtime) {
     runtime.setLastOutputLength(mountedTerminal ? mountedTerminal.outputLength : (runtime.prepareInitialOutput(agent.output)).length);
     syncSessionRuntimeState();
   }
-  setupTerminalInputBridge();
-
   if (!mountedTerminal) {
     terminal.loadAddon(fitAddon);
     terminal.onData((data) => {
@@ -6279,11 +7377,11 @@ async function openSession(agentId) {
       sendTerminalInput(data);
     });
     terminal.onResize(({ cols, rows }) => {
+      void cols;
+      void rows;
       if (runtime && !runtime.isCurrentSession(agentId, sessionToken)) return;
-      if (!focusedAgentId) return;
-      const sessionClient = getSessionClient();
-      if (!sessionClient) return;
-      sessionClient.resizeAgent(focusedAgentId, cols, rows);
+      if (crtTerminalReplication?.applyingLocalResize) return;
+      sendSessionResize(agentId, { cols, rows });
     });
 
     terminalContainer.innerHTML = '';
@@ -6312,7 +7410,6 @@ async function openSession(agentId) {
       if (!terminal || !fitAddon) return;
       if (runtime && !runtime.isCurrentSession(agentId, sessionToken)) return;
       if (!runtime && focusedAgentId !== agentId) return;
-      fitAddon.fit();
       const initialOutput = runtime ? runtime.prepareInitialOutput(agent.output) : agent.output;
       if (initialOutput) {
         terminal.write(initialOutput);
@@ -6336,13 +7433,20 @@ async function openSession(agentId) {
     showCrtWebglFailure(error);
   }
 
+  // Hydrate one authoritative reducer cut before reducing live transitions.
   await refreshSessionView(true, agentId, sessionToken);
-  if (shouldPollSessionView(modalState.sessionSource)) {
+  restoreCrtTerminalReadingAnchor(agentId, terminal);
+  sendSessionResize(agentId);
+  if (!crtTerminalReplication && shouldPollSessionView(modalState.sessionSource)) {
     startSessionViewPolling(agentId, sessionToken);
   }
 }
 
 function closeSession() {
+  if (focusedAgentId) {
+    if (terminal) saveCrtTerminalReadingAnchor(focusedAgentId, terminal);
+    else saveCrtStructuredReadingAnchor(focusedAgentId);
+  }
   resetCrtRuntimeSwitchState();
   const runtime = getSessionRuntime();
   if (runtime) {
@@ -6379,14 +7483,19 @@ function closeSession() {
     if (crtMainView === 'history') renderCrtHistory();
     generateKeyMap();
   }
+  restoreCrtNavigationSelection();
 }
 
 function killCurrentAgent() {
   if (!focusedAgentId) return;
 
+  const killedAgentId = focusedAgentId;
+  const fallbackAgentId = getCrtAgentRemovalFallback(state, killedAgentId);
+  crtNavigationKey = fallbackAgentId ? `agent:${fallbackAgentId}` : '';
+
   const sessionClient = getSessionClient();
   if (sessionClient) {
-    sessionClient.killAgent(focusedAgentId);
+    sessionClient.killAgent(killedAgentId);
   }
 
   closeSession();
@@ -6394,97 +7503,178 @@ function killCurrentAgent() {
 
 function sendTerminalInput(input) {
   if (!focusedAgentId) return;
+  queueCrtTerminalInput(input);
+}
 
-  const sessionClient = getSessionClient();
-  if (sessionClient) {
-    sessionClient.sendInput(focusedAgentId, input);
+function clearPendingCrtTerminalFitResize(replication) {
+  if (!replication) return;
+  if (replication.fitResizeTimer) clearTimeout(replication.fitResizeTimer);
+  replication.fitResizeTimer = null;
+  replication.pendingFitResize = null;
+}
+
+function commitCrtTerminalResize(agentId, normalizedDimensions) {
+  const replication = crtTerminalReplication;
+  if (
+    !agentId ||
+    !terminal ||
+    !replication ||
+    replication.disposed ||
+    replication.agentId !== agentId ||
+    replication.replayState.recovering ||
+    (
+      normalizedDimensions.cols === replication.lastResizeCols &&
+      normalizedDimensions.rows === replication.lastResizeRows
+    )
+  ) return;
+  if (terminal.cols !== normalizedDimensions.cols || terminal.rows !== normalizedDimensions.rows) {
+    replication.applyingLocalResize = true;
+    try {
+      terminal.resize(normalizedDimensions.cols, normalizedDimensions.rows);
+    } finally {
+      replication.applyingLocalResize = false;
+    }
+  }
+  const delivered = getSessionClient()?.resizeAgent(
+    agentId,
+    normalizedDimensions.cols,
+    normalizedDimensions.rows
+  );
+  if (delivered) {
+    replication.lastResizeCols = normalizedDimensions.cols;
+    replication.lastResizeRows = normalizedDimensions.rows;
   }
 }
 
-function sendSessionResize(agentId = focusedAgentId) {
-  if (!agentId || !terminal) return;
-  if (!Number.isFinite(terminal.cols) || !Number.isFinite(terminal.rows)) return;
-  const sessionClient = getSessionClient();
-  if (!sessionClient) return;
-  sessionClient.resizeAgent(agentId, terminal.cols, terminal.rows);
+function scheduleCrtTerminalFitResize(replication, agentId, normalizedDimensions) {
+  if (replication.fitResizeTimer) clearTimeout(replication.fitResizeTimer);
+  replication.pendingFitResize = normalizedDimensions;
+  replication.fitResizeTimer = setTimeout(() => {
+    replication.fitResizeTimer = null;
+    const next = replication.pendingFitResize;
+    replication.pendingFitResize = null;
+    if (
+      !next ||
+      replication.disposed ||
+      crtTerminalReplication !== replication ||
+      replication.agentId !== agentId
+    ) return;
+    commitCrtTerminalResize(agentId, next);
+  }, CRT_TERMINAL_RESIZE_SETTLE_MS);
+}
+
+function sendSessionResize(agentId = focusedAgentId, requestedDimensions = null) {
+  const replication = crtTerminalReplication;
+  if (
+    !agentId ||
+    !terminal ||
+    !fitAddon ||
+    !replication ||
+    replication.agentId !== agentId ||
+    replication.replayState.recovering
+  ) return;
+  const dimensions = requestedDimensions || (
+    typeof fitAddon.proposeDimensions === 'function'
+      ? fitAddon.proposeDimensions()
+      : null
+  );
+  const normalizedDimensions = dimensions && {
+    cols: Math.floor(Number(dimensions.cols)),
+    rows: Math.floor(Number(dimensions.rows))
+  };
+  if (
+    !normalizedDimensions ||
+    !Number.isFinite(normalizedDimensions.cols) ||
+    !Number.isFinite(normalizedDimensions.rows) ||
+    normalizedDimensions.cols < CRT_TERMINAL_MIN_COLS ||
+    normalizedDimensions.rows < CRT_TERMINAL_MIN_ROWS
+  ) return;
+  if (!requestedDimensions) {
+    if (
+      normalizedDimensions.cols === replication.lastResizeCols &&
+      normalizedDimensions.rows === replication.lastResizeRows
+    ) {
+      clearPendingCrtTerminalFitResize(replication);
+      return;
+    }
+    scheduleCrtTerminalFitResize(replication, agentId, normalizedDimensions);
+    return;
+  }
+  clearPendingCrtTerminalFitResize(replication);
+  commitCrtTerminalResize(agentId, normalizedDimensions);
 }
 
-async function refreshSessionView(forceReplace = false, expectedAgentId = focusedAgentId, expectedSessionToken = getCurrentSessionToken()) {
+async function refreshSessionView(_forceReplace = false, expectedAgentId = focusedAgentId, expectedSessionToken = getCurrentSessionToken()) {
   if (!expectedAgentId || !terminal) return;
 
   const runtime = getSessionRuntime();
+  const replication = crtTerminalReplication;
+  if (
+    !replication ||
+    replication.agentId !== expectedAgentId ||
+    replication.replayState.halted ||
+    replication.checkpointRetryTimer ||
+    replication.checkpointInFlight
+  ) return;
+
+  const checkpointSeq = replication.checkpointSeq + 1;
+  replication.checkpointSeq = checkpointSeq;
+  replication.checkpointInFlight = true;
+  TERMINAL_REPLAY.beginRecovery(replication.replayState);
+  const controller = new globalThis.AbortController();
+  replication.checkpointAbortController = controller;
+  const timeout = setTimeout(
+    () => controller.abort(),
+    CRT_TERMINAL_CHECKPOINT_REQUEST_TIMEOUT_MS
+  );
+
   try {
     const sessionClient = getSessionClient();
-    if (!sessionClient) return;
-    let payload = null;
-    const retryDelays = forceReplace ? [0, 60, 140] : [0];
-    for (const delay of retryDelays) {
-      if (delay > 0) {
-        await new Promise((resolve) => setTimeout(resolve, delay));
-      }
-      payload = await sessionClient.getSessionView(expectedAgentId);
-      const candidate = normalizeSessionViewPayload(payload);
-      const dimensionsMatch = !Number.isFinite(candidate.previewCols)
-        || !Number.isFinite(candidate.previewRows)
-        || (candidate.previewCols === terminal.cols && candidate.previewRows === terminal.rows);
-      if (dimensionsMatch) {
-        break;
-      }
-    }
-    if (runtime && !runtime.isCurrentSession(expectedAgentId, expectedSessionToken)) {
-      return;
-    }
+    if (!sessionClient) throw new Error('Terminal session client is unavailable');
+    const payload = await sessionClient.getSessionView(expectedAgentId, {
+      signal: controller.signal
+    });
+    if (
+      !crtTerminalReplication ||
+      crtTerminalReplication !== replication ||
+      replication.checkpointSeq !== checkpointSeq
+    ) return;
+    if (runtime && !runtime.isCurrentSession(expectedAgentId, expectedSessionToken)) return;
+
     const currentAgent = state && state.agents
       ? state.agents.find((agent) => agent.id === expectedAgentId)
       : null;
-    const sessionView = normalizeSessionViewPayload(payload, currentAgent);
-    const sessionText = sessionView.renderOutput || sessionView.output;
-    const patch = deriveSessionTextPatch(sessionText, getSessionOutputLength(), forceReplace);
-
-    if (patch.mode === 'replace') {
-      replaceTerminalOutput(
-        terminal,
-        applySessionReplayCursorVisibility(patch.text, sessionView, currentAgent),
+    installCrtTerminalCheckpoint(normalizeSessionViewPayload(payload, currentAgent));
+  } catch (error) {
+    if (
+      crtTerminalReplication === replication &&
+      replication.checkpointSeq === checkpointSeq
+    ) {
+      retryCrtTerminalReplayAfterFailure(
+        replication,
+        TERMINAL_REPLAY.recordTransportFailure(replication.replayState),
+        error
       );
-      refreshSessionTerminalUi({ preserveSearchIndex: true });
-      if (runtime) {
-        runtime.markHydrated(patch.nextLength);
-        syncSessionRuntimeState();
-      }
-      return;
     }
-
-    if (patch.mode === 'append') {
-      terminal.write(patch.text);
-      refreshSessionTerminalUi({ preserveSearchIndex: true });
-      if (runtime) {
-        if (isAwaitingInitialSessionSync()) {
-          runtime.markHydrated(patch.nextLength);
-        } else {
-          runtime.setLastOutputLength(patch.nextLength);
-        }
-        syncSessionRuntimeState();
-      }
-    }
-  } catch (error) {
-    console.error('Failed to refresh session view:', error);
-    if (runtime && runtime.isCurrentSession(expectedAgentId, expectedSessionToken) && runtime.isAwaitingInitialSync()) {
-      runtime.markHydrated(getSessionOutputLength());
-      syncSessionRuntimeState();
+  } finally {
+    clearTimeout(timeout);
+    if (
+      crtTerminalReplication === replication &&
+      replication.checkpointSeq === checkpointSeq
+    ) {
+      replication.checkpointInFlight = false;
+      replication.checkpointAbortController = null;
+      finishCrtTerminalReplay(replication);
     }
   }
 }
-
 function startSessionViewPolling(agentId = focusedAgentId, sessionToken = getCurrentSessionToken()) {
   const runtime = getSessionRuntime();
   if (runtime) {
     runtime.startPolling({ agentId, sessionToken });
-    return;
+    return null;
   }
-  stopSessionViewPolling();
-  legacySessionPoller = setInterval(() => {
-    refreshSessionView(false, agentId, sessionToken);
-  }, 350);
+  return null;
 }
 
 function stopSessionViewPolling() {
@@ -6493,10 +7683,6 @@ function stopSessionViewPolling() {
     runtime.stopPolling();
     return;
   }
-  if (legacySessionPoller) {
-    clearInterval(legacySessionPoller);
-    legacySessionPoller = null;
-  }
 }
 
 if (typeof document !== 'undefined') {
@@ -6516,8 +7702,6 @@ if (typeof document !== 'undefined') {
     }
     if (!terminal || !fitAddon || !focusedAgentId) return;
 
-    fitAddon.fit();
-    syncTerminalInputBridgePosition();
     sendSessionResize();
   });
 
@@ -6542,9 +7726,12 @@ if (typeof document !== 'undefined') {
     const searchInputFocused = crtMainView === 'search'
       && document.activeElement === document.getElementById('crt-search-input');
     const navigationArrow = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key);
+    const billingHourCellFocused = crtMainView === 'billing'
+      && document.activeElement?.classList?.contains('billing-day-hour-cell');
 
     if (terminalFontSizeInputFocused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) return;
     if (searchInputFocused) return;
+    if (billingHourCellFocused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) return;
 
     if (
       crtMainView === 'billing'
@@ -6650,6 +7837,13 @@ if (typeof document !== 'undefined') {
     }
 
     if (dialogActive) {
+      if (workspaceDirectoryPrompt) {
+        if (e.key === 'Escape' && workspaceDirectoryPrompt.kind !== 'creating') {
+          hideWorkspaceDirectoryPrompt();
+          e.preventDefault();
+        }
+        return;
+      }
       if (workspaceInputVisible) {
         if (workspaceInputFocused) {
           return;
@@ -6771,14 +7965,28 @@ if (typeof document !== 'undefined') {
       const structuredInputFocused = structuredInput && document.activeElement === structuredInput;
       const structuredSessionActive = document.getElementById('crt-structured-composer')?.classList.contains('active');
       const structuredTranscriptFocused = document.activeElement === document.getElementById('terminal-output');
-      if (
-        structuredSessionActive
-        && e.key === 'Escape'
-        && (e.ctrlKey || e.metaKey || !structuredComposerMenu)
-        && !(!e.ctrlKey && !e.metaKey && structuredTranscriptFocused)
-      ) {
-        closeSession();
+      const structuredToolFocused = Boolean(document.activeElement?.closest?.('.crt-structured-tool'));
+      const structuredMenuItemFocused = Boolean(document.activeElement?.closest?.('.crt-structured-menu-item'));
+      const focusedAgent = state && state.agents.find((candidate) => candidate.id === focusedAgentId);
+      const structuredInterruptFocused = Boolean(
+        structuredInputFocused
+        && structuredComposerAction(focusedAgent, structuredInput.value) === 'interrupt'
+      );
+      const sessionCommand = resolveCrtSessionKeyboardCommand(e, {
+        structuredSessionActive,
+        composing: e.isComposing,
+        structuredInputFocused,
+        structuredTranscriptFocused,
+        structuredToolFocused,
+        structuredMenuItemFocused,
+        structuredInterruptFocused,
+        structuredComposerMenuOpen: Boolean(structuredComposerMenu),
+      });
+      if (sessionCommand) {
         e.preventDefault();
+        e.stopPropagation();
+        if (sessionCommand === 'kill') killCurrentAgent();
+        else closeSession();
         return;
       }
       if (structuredInputFocused) {
@@ -6806,48 +8014,6 @@ if (typeof document !== 'undefined') {
       if (isBrowserShortcut(e)) {
         return;
       }
-      if (e.isComposing || terminalInputComposing) {
-        if (SESSION_INPUT_SETTINGS.imeEnabled) {
-          e.preventDefault();
-        }
-        return;
-      }
-      if ((e.ctrlKey || e.metaKey) && e.key === 'Escape') {
-        closeSession();
-        e.preventDefault();
-        return;
-      }
-      if ((e.ctrlKey || e.metaKey) && (e.key === 'k' || e.key === 'K')) {
-        killCurrentAgent();
-        e.preventDefault();
-        return;
-      }
-      if (!SESSION_INPUT_SETTINGS.imeEnabled) {
-        return;
-      }
-      if (
-        SESSION_INPUT_SETTINGS.imeEnabled &&
-        !e.ctrlKey &&
-        !e.metaKey &&
-        !e.altKey &&
-        e.key.length === 1 &&
-        document.activeElement !== terminalInputBridge
-      ) {
-        e.preventDefault();
-        schedulePrintableInput(e.key);
-        focusTerminalInputBridge();
-        return;
-      }
-      if (routeSessionKey(e)) {
-        e.preventDefault();
-        focusTerminalInputBridge();
-        return;
-      }
-      if (!e.ctrlKey && !e.metaKey && e.key === 'Escape') {
-        sendTerminalInput('\x1b');
-        e.preventDefault();
-        return;
-      }
       return;
     }
 
@@ -6912,6 +8078,12 @@ if (typeof document !== 'undefined') {
       return;
     }
 
+    // xterm owns paste events targeting its textarea. Calling terminal.paste()
+    // here as well would submit the same clipboard text twice.
+    if (isCrtNativeTerminalPasteTarget(e.target)) {
+      return;
+    }
+
     const pastedText = e.clipboardData && e.clipboardData.getData
       ? e.clipboardData.getData('text/plain')
       : '';
@@ -6921,7 +8093,9 @@ if (typeof document !== 'undefined') {
     }
 
     e.preventDefault();
-    pasteTerminalText(pastedText);
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    void pasteTerminalText(pastedText);
   }, true);
 
 }
@@ -6930,6 +8104,7 @@ if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     buildCrtHistoryItems,
     buildCrtSearchResults,
+    buildCrtStructuredPreview,
     calculateCrtAgentPageLayout,
     calculateCrtHistoryPageSize,
     crtHistoryAgentName,
@@ -6941,8 +8116,8 @@ if (typeof module !== 'undefined' && module.exports) {
     findDirectionalNavigationIndex,
     isBrowserShortcut,
     isCopyShortcut,
+    isCrtNativeTerminalPasteTarget,
     isPasteShortcut,
-    getTerminalSequenceForKey,
     shouldUseLiveSessionText,
     shouldPollSessionView,
     deriveSessionTextPatch,
@@ -6956,19 +8131,26 @@ if (typeof module !== 'undefined' && module.exports) {
     getCrtHistoryPage,
     getCrtAgentPage,
     getCrtAgentVerticalPageTarget,
+    getCrtLiveAgents,
+    getCrtRegularAgents,
+    getCrtAgentRemovalFallback,
     getAgentDisplayText,
     getCrtPreviewCellStyle,
+    getCrtTerminalSnapshotRows,
     getCrtAgentTitle,
     getCrtProjectName,
-    calculateTerminalInputBridgePosition,
     getCrtTerminalFontSize,
     isCrtAgentWorking,
+    isCrtLiveAgent,
     getCrtAgentReadPatch,
     crtRuntimeView,
     canSwitchCrtAgentRuntime,
     isCrtRuntimeSwitchShortcut,
+    hasCrtStructuredLocalEscapeAction,
+    resolveCrtSessionKeyboardCommand,
     structuredComposerAction,
     structuredTranscriptTurns,
+    crtStructuredPreviewMessageLines,
     getCrtBrandPaneKey,
     extractSessionLinks,
     formatSelectionStatus,
@@ -6984,6 +8166,7 @@ if (typeof module !== 'undefined' && module.exports) {
     getSessionModalDomState
   };
 } else {
+  installCrtTerminalTestApi();
   setupWorkspaceHistoryControls();
   setupCrtSearchControls();
   document.addEventListener('visibilitychange', () => {