create-walle 0.9.21 → 0.9.23

package/template/claude-task-manager/public/js/walle-session.js

@@ -8,11 +8,16 @@ window.WalleSession = (function() {
 
   var TRANSCRIPT_ATTACH_DEBOUNCE_MS = 120;
   var TRANSCRIPT_LIVE_ECHO_SKIP_MS = 1500;
+  var HISTORY_RETRY_AFTER_MS = 2500;
   var COMPOSER_HEIGHT_STORAGE_KEY = 'ctm.walle.composerHeightPx';
   var COMPOSER_HEIGHT_STEP_PX = 16;
   var COMPOSER_HEIGHT_DEFAULT_PX = 44;
   var COMPOSER_HEIGHT_MIN_PX = 44;
   var COMPOSER_HEIGHT_MAX_PX = 420;
+  var MESSAGE_RENDER_SYNC_LIMIT = 60;
+  var MESSAGE_RENDER_BATCH_SIZE = 24;
+  var MESSAGE_RENDER_FRAME_BUDGET_MS = 8;
+  var _cancelConfirmationOpen = false;
 
   function loadSavedComposerHeight() {
     try {
@@ -40,7 +45,7 @@ window.WalleSession = (function() {
   // ---------- state helper ----------
   function initialModelFromSession(s) {
     var meta = (s && s.meta) || {};
-    var model = meta.model_id || meta.model || '';
+    var model = normalizeSessionModelId(meta.model_id || meta.model || '');
     return {
       model: model,
       registryId: meta.model_registry_id || meta.modelRegistryId || '',
@@ -73,10 +78,31 @@ window.WalleSession = (function() {
         inputHistory: [],
         inputHistoryIdx: -1,
         inputDraft: '',
+        composerDraft: {
+          value: '',
+          selectionStart: 0,
+          selectionEnd: 0,
+          focused: false,
+          updatedAt: 0
+        },
         inputAttachments: [],
+        queueState: null,
+        workState: null,
+        workDrawerOpen: false,
+        isQueueingMessage: false,
         composerPreviewOpen: false,
         isPreparingLocation: false,
-        composerHeightPx: loadSavedComposerHeight()
+        historyStatus: s.needsAttach ? 'loading' : (s._walleHistoryLoaded ? 'loaded' : 'idle'),
+        historyRequestedAt: s._walleHistoryRequestedAt || 0,
+        historyLoadedAt: s._walleHistoryLoadedAt || 0,
+        historyLoadReason: '',
+        composerHeightPx: loadSavedComposerHeight(),
+        branches: {},
+        branchActive: {},
+        editingMessageIndex: -1,
+        _branchHistoryLoaded: false,
+        _branchHistoryAuthoritative: false,
+        _branchActiveHistory: []
       };
     } else if (!s.walleState._modelHydrated) {
       s.walleState.selectedModel = s.walleState.selectedModel || initialModel.model;
@@ -94,9 +120,33 @@ window.WalleSession = (function() {
     if (!Array.isArray(s.walleState.inputHistory)) s.walleState.inputHistory = [];
     if (typeof s.walleState.inputHistoryIdx !== 'number') s.walleState.inputHistoryIdx = -1;
     if (typeof s.walleState.inputDraft !== 'string') s.walleState.inputDraft = '';
+    if (!s.walleState.composerDraft || typeof s.walleState.composerDraft !== 'object') {
+      s.walleState.composerDraft = { value: '', selectionStart: 0, selectionEnd: 0, focused: false, updatedAt: 0 };
+    }
+    if (typeof s.walleState.composerDraft.value !== 'string') s.walleState.composerDraft.value = '';
+    if (typeof s.walleState.composerDraft.selectionStart !== 'number') s.walleState.composerDraft.selectionStart = 0;
+    if (typeof s.walleState.composerDraft.selectionEnd !== 'number') s.walleState.composerDraft.selectionEnd = s.walleState.composerDraft.selectionStart;
+    if (typeof s.walleState.composerDraft.focused !== 'boolean') s.walleState.composerDraft.focused = false;
+    if (typeof s.walleState.composerDraft.updatedAt !== 'number') s.walleState.composerDraft.updatedAt = 0;
     if (!Array.isArray(s.walleState.inputAttachments)) s.walleState.inputAttachments = [];
+    if (typeof s.walleState.isQueueingMessage !== 'boolean') s.walleState.isQueueingMessage = false;
+    if (s.walleState.queueState && typeof s.walleState.queueState !== 'object') s.walleState.queueState = null;
+    if (s.walleState.workState && typeof s.walleState.workState !== 'object') s.walleState.workState = null;
+    if (typeof s.walleState.workDrawerOpen !== 'boolean') s.walleState.workDrawerOpen = false;
+    if (!s.walleState.branches || typeof s.walleState.branches !== 'object') s.walleState.branches = {};
+    if (!s.walleState.branchActive || typeof s.walleState.branchActive !== 'object') s.walleState.branchActive = {};
+    if (typeof s.walleState.editingMessageIndex !== 'number') s.walleState.editingMessageIndex = -1;
+    if (!Array.isArray(s.walleState._branchActiveHistory)) s.walleState._branchActiveHistory = [];
+    if (typeof s.walleState._branchHistoryLoaded !== 'boolean') s.walleState._branchHistoryLoaded = false;
+    if (typeof s.walleState._branchHistoryAuthoritative !== 'boolean') s.walleState._branchHistoryAuthoritative = false;
     if (typeof s.walleState.composerPreviewOpen !== 'boolean') s.walleState.composerPreviewOpen = false;
     if (typeof s.walleState.isPreparingLocation !== 'boolean') s.walleState.isPreparingLocation = false;
+    if (!s.walleState.historyStatus) {
+      s.walleState.historyStatus = s.needsAttach ? 'loading' : (s._walleHistoryLoaded ? 'loaded' : 'idle');
+    }
+    if (typeof s.walleState.historyRequestedAt !== 'number') s.walleState.historyRequestedAt = s._walleHistoryRequestedAt || 0;
+    if (typeof s.walleState.historyLoadedAt !== 'number') s.walleState.historyLoadedAt = s._walleHistoryLoadedAt || 0;
+    if (typeof s.walleState.historyLoadReason !== 'string') s.walleState.historyLoadReason = '';
     if (typeof s.walleState.selectedModelRegistryId !== 'string') s.walleState.selectedModelRegistryId = '';
     if (typeof s.walleState.selectedModelProviderType !== 'string') s.walleState.selectedModelProviderType = '';
     if ((s.meta && (s.meta.model_pinned === true || s.meta.modelPinned === true)) && s.walleState.selectedModel) {
@@ -108,6 +158,383 @@ window.WalleSession = (function() {
     return s.walleState;
   }
 
+  function walleBranchSessionId(id) {
+    var s = state.sessions.get(id);
+    var meta = (s && s.meta) || {};
+    return meta.chatSessionId
+      || meta.chat_session_id
+      || meta.agentSessionId
+      || meta.agent_session_id
+      || meta.walleChatSessionId
+      || meta.walle_chat_session_id
+      || ('walle-' + id);
+  }
+
+  function cloneJsonSafe(value, fallback) {
+    if (value == null) return fallback;
+    try {
+      return JSON.parse(JSON.stringify(value));
+    } catch (_) {
+      return fallback;
+    }
+  }
+
+  // Branch snapshots are persisted/transmitted as JSON, so they must not carry
+  // base64 image payloads: a single screenshot can be hundreds of KB, and a
+  // snapshot serializes the whole conversation across every branch version.
+  // Strip the heavy `data` field and keep only the lightweight reference fields
+  // — the renderer displays from `url` (renderAttachmentStrip) and the server
+  // rehydrates the base64 from disk by path/url/filename on resend
+  // (_hydrateWalleAttachment). The image lives in the images dir regardless.
+  var BRANCH_ATTACHMENT_REF_FIELDS = [
+    'type', 'name', 'filename', 'label', 'url', 'path', 'file_path', 'id',
+    'mediaType', 'mimeType', 'imageWidth', 'imageHeight',
+    'originalWidth', 'originalHeight', 'resizedForProvider'
+  ];
+
+  function branchSafeAttachments(attachments) {
+    return (Array.isArray(attachments) ? attachments : []).map(function(att) {
+      if (!att || typeof att !== 'object') return att;
+      var out = {};
+      BRANCH_ATTACHMENT_REF_FIELDS.forEach(function(key) {
+        if (att[key] != null) out[key] = att[key];
+      });
+      return out;
+    });
+  }
+
+  function normalizeBranchMessage(msg) {
+    if (!msg || typeof msg !== 'object') return null;
+    var role = String(msg.role || '').trim();
+    if (!role) return null;
+    var content = msg.content != null ? msg.content : msg.text;
+    var out = {
+      role: role,
+      content: typeof content === 'string' ? content : String(content || ''),
+      timestamp: msg.timestamp || msg.created_at || msg.createdAt || Date.now()
+    };
+    var model = msg.model_id || msg.model || '';
+    if (model) out.model = model;
+    var latency = msg.latency_ms != null ? msg.latency_ms : msg.latencyMs;
+    if (latency != null) out.latency_ms = latency;
+    if (Array.isArray(msg.toolCalls)) out.toolCalls = cloneJsonSafe(msg.toolCalls, []);
+    else if (Array.isArray(msg.tool_calls)) out.toolCalls = cloneJsonSafe(msg.tool_calls, []);
+    if (Array.isArray(msg.attachments)) out.attachments = branchSafeAttachments(msg.attachments);
+    if (msg.metadata) out.metadata = cloneJsonSafe(msg.metadata, msg.metadata);
+    if (msg.liveActivity) out.liveActivity = true;
+    if (msg.agentLabel) out.agentLabel = msg.agentLabel;
+    return out;
+  }
+
+  function cloneBranchMessage(msg) {
+    return normalizeBranchMessage(msg) || {
+      role: '',
+      content: '',
+      timestamp: Date.now()
+    };
+  }
+
+  function normalizeBranchTail(tail) {
+    return (Array.isArray(tail) ? tail : [])
+      .map(normalizeBranchMessage)
+      .filter(function(msg) { return !!msg && !!msg.role; });
+  }
+
+  function branchMessageTimestampMs(msg) {
+    if (!msg) return 0;
+    var value = msg.timestamp || msg.created_at || msg.createdAt || 0;
+    if (typeof value === 'number') return Number.isFinite(value) ? value : 0;
+    var parsed = Date.parse(String(value || ''));
+    return Number.isFinite(parsed) ? parsed : 0;
+  }
+
+  function branchAttachmentFingerprint(att) {
+    if (!att || typeof att !== 'object') return '';
+    return [
+      att.label || '',
+      att.filename || att.name || '',
+      att.url || '',
+      att.path || att.file_path || '',
+      att.id || ''
+    ].join('\u001f');
+  }
+
+  function branchMessageFingerprint(msg) {
+    if (!msg || !msg.role) return '';
+    var attachments = (Array.isArray(msg.attachments) ? msg.attachments : [])
+      .map(branchAttachmentFingerprint)
+      .filter(Boolean)
+      .sort()
+      .join('\u001e');
+    return [
+      String(msg.role || ''),
+      String(msg.content || ''),
+      String(branchMessageTimestampMs(msg) || ''),
+      attachments
+    ].join('\u001f');
+  }
+
+  function reconcileBranchHistoryWithDurable(branchHistory, durableHistory, snapshotSavedAtMs) {
+    var branch = normalizeBranchTail(branchHistory);
+    var durable = normalizeBranchTail(durableHistory);
+    if (!branch.length) return durable;
+    if (!durable.length) return branch;
+
+    var branchFingerprints = {};
+    branch.forEach(function(msg) {
+      var fp = branchMessageFingerprint(msg);
+      if (fp) branchFingerprints[fp] = true;
+    });
+
+    var lastDurableMatch = -1;
+    for (var b = branch.length - 1; b >= 0 && lastDurableMatch < 0; b--) {
+      var branchFp = branchMessageFingerprint(branch[b]);
+      if (!branchFp) continue;
+      for (var d = durable.length - 1; d >= 0; d--) {
+        if (branchMessageFingerprint(durable[d]) === branchFp) {
+          lastDurableMatch = d;
+          break;
+        }
+      }
+    }
+
+    var watermark = Number(snapshotSavedAtMs || 0) || 0;
+    var appendStart = lastDurableMatch >= 0 ? lastDurableMatch + 1 : 0;
+    var appended = [];
+    for (var i = appendStart; i < durable.length; i++) {
+      var candidate = durable[i];
+      var fp = branchMessageFingerprint(candidate);
+      if (fp && branchFingerprints[fp]) continue;
+      if (watermark > 0) {
+        var ts = branchMessageTimestampMs(candidate);
+        // New snapshots carry a save watermark. Do not resurrect old durable
+        // transcript tails that a branch edit/delete intentionally abandoned.
+        if (ts > 0 && ts <= watermark) continue;
+      } else if (lastDurableMatch < 0) {
+        continue;
+      }
+      appended.push(cloneBranchMessage(candidate));
+    }
+
+    return branch.map(cloneBranchMessage).concat(appended);
+  }
+
+  function normalizeBranchMap(branches) {
+    var out = {};
+    if (!branches || typeof branches !== 'object') return out;
+    Object.keys(branches).forEach(function(key) {
+      var idx = parseInt(key, 10);
+      if (!Number.isFinite(idx) || idx < 0) return;
+      var versions = Array.isArray(branches[key]) ? branches[key] : [];
+      var normalized = versions.map(normalizeBranchTail).filter(function(tail) { return tail.length > 0; });
+      if (normalized.length) out[String(idx)] = normalized;
+    });
+    return out;
+  }
+
+  function activeHistorySnapshot(ws) {
+    return ((ws && ws.messages) || []).map(cloneBranchMessage).filter(function(msg) { return !!msg.role; });
+  }
+
+  function branchKeys(ws) {
+    return Object.keys((ws && ws.branches) || {})
+      .map(function(key) { return parseInt(key, 10); })
+      .filter(function(idx) { return Number.isFinite(idx); })
+      .sort(function(a, b) { return a - b; });
+  }
+
+  function hasBranchSnapshot(ws) {
+    return branchKeys(ws).length > 0 || !!(ws && ws._branchHistoryAuthoritative);
+  }
+
+  function refreshActiveBranchSlots(ws) {
+    if (!ws || !ws.branches) return;
+    branchKeys(ws).forEach(function(splitIdx) {
+      if (splitIdx >= ws.messages.length) {
+        delete ws.branches[String(splitIdx)];
+        delete ws.branchActive[String(splitIdx)];
+        return;
+      }
+      var branches = ws.branches[String(splitIdx)];
+      if (!Array.isArray(branches) || !branches.length) return;
+      var active = Number(ws.branchActive[String(splitIdx)] || 0);
+      if (!Number.isFinite(active) || active < 0 || active >= branches.length) active = 0;
+      branches[active] = ws.messages.slice(splitIdx).map(cloneBranchMessage);
+      ws.branchActive[String(splitIdx)] = active;
+    });
+  }
+
+  function clearBranchesAfter(ws, splitIdx, inclusive) {
+    if (!ws || !ws.branches) return;
+    branchKeys(ws).forEach(function(key) {
+      if (inclusive ? key >= splitIdx : key > splitIdx) {
+        delete ws.branches[String(key)];
+        delete ws.branchActive[String(key)];
+      }
+    });
+  }
+
+  function markBranchHistoryAuthoritative(ws) {
+    if (!ws) return;
+    ws._branchHistoryAuthoritative = true;
+    ws._branchActiveHistory = activeHistorySnapshot(ws);
+  }
+
+  function applyBranchHistoryIfAuthoritative(ws, durableHistory) {
+    if (!ws || !ws._branchHistoryAuthoritative || !Array.isArray(ws._branchActiveHistory)) return false;
+    ws.messages = reconcileBranchHistoryWithDurable(
+      ws._branchActiveHistory,
+      durableHistory,
+      ws._branchSnapshotSavedAtMs
+    );
+    ws.messageCount = ws.messages.length;
+    return true;
+  }
+
+  function branchApiUrl(sessionId) {
+    return '/api/wall-e/chat/branches?session_id=' + encodeURIComponent(sessionId || 'default');
+  }
+
+  function saveWalleBranchSnapshot(id) {
+    var ws = getState(id);
+    if (!ws) return Promise.resolve(false);
+    refreshActiveBranchSlots(ws);
+    markBranchHistoryAuthoritative(ws);
+    var payload = {
+      session_id: walleBranchSessionId(id),
+      branches: ws.branches || {},
+      active: ws.branchActive || {},
+      history: activeHistorySnapshot(ws),
+      updated_at_ms: Date.now()
+    };
+    var previousSave = ws._branchSavePromise || Promise.resolve();
+    ws._branchSavePromise = previousSave.catch(function() {}).then(function() {
+      return fetch('/api/wall-e/chat/branches', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+      });
+    }).then(function(resp) {
+      if (!resp.ok) {
+        // Surface the server's error message (e.g. a 413 "Body too large")
+        // instead of a bare status — the body carries { error, code }.
+        return resp.json().catch(function() { return null; }).then(function(body) {
+          var detail = body && body.error ? body.error : 'HTTP ' + resp.status;
+          throw new Error('Wall-E branch save failed: ' + detail);
+        });
+      }
+      ws._branchHistoryLoaded = true;
+      ws._branchActiveHistory = payload.history;
+      ws._branchSnapshotSavedAtMs = payload.updated_at_ms;
+      return true;
+    }).catch(function(err) {
+      console.warn('[walle-session] branch snapshot save failed:', err && err.message || err);
+      if (typeof toast === 'function') {
+        toast('Could not save Wall-E branch history: ' + (err && err.message ? err.message : err), { type: 'error', duration: 5000 });
+      }
+      return false;
+    });
+    return ws._branchSavePromise;
+  }
+
+  function applyLoadedBranchSnapshot(id, data) {
+    var ws = getState(id);
+    if (!ws || !data || typeof data !== 'object') return false;
+    var branches = normalizeBranchMap(data.branches || {});
+    var active = data.active && typeof data.active === 'object' ? data.active : {};
+    var history = normalizeBranchTail(data.history || []);
+    var snapshotSavedAtMs = Number(data.updated_at_ms || data.updatedAtMs || data.saved_at_ms || data.savedAtMs || 0) || 0;
+    if (!history.length && Object.keys(branches).length === 0) {
+      ws._branchHistoryLoaded = true;
+      if (data.exists === true) {
+        ws.branches = {};
+        ws.branchActive = {};
+        ws._branchActiveHistory = [];
+        ws._branchHistoryAuthoritative = false;
+        ws._branchSnapshotSavedAtMs = snapshotSavedAtMs;
+      }
+      return false;
+    }
+    ws.branches = branches;
+    ws.branchActive = {};
+    Object.keys(active).forEach(function(key) {
+      var n = Number(active[key]);
+      if (Number.isFinite(n)) ws.branchActive[String(parseInt(key, 10))] = n;
+    });
+    if (history.length) {
+      ws.messages = reconcileBranchHistoryWithDurable(history, activeHistorySnapshot(ws), snapshotSavedAtMs);
+      ws.messageCount = ws.messages.length;
+      ws._branchActiveHistory = ws.messages.map(cloneBranchMessage);
+      ws._branchHistoryAuthoritative = true;
+    } else {
+      ws._branchActiveHistory = activeHistorySnapshot(ws);
+      ws._branchHistoryAuthoritative = branchKeys(ws).length > 0;
+    }
+    ws._branchSnapshotSavedAtMs = snapshotSavedAtMs;
+    ws._branchHistoryLoaded = true;
+    return history.length > 0 || branchKeys(ws).length > 0;
+  }
+
+  function ensureWalleBranchSnapshotLoaded(id) {
+    var ws = getState(id);
+    if (!ws || ws._branchLoadStarted) return;
+    ws._branchLoadStarted = true;
+    fetch(branchApiUrl(walleBranchSessionId(id)), { cache: 'no-store' })
+      .then(function(resp) {
+        if (!resp.ok) throw new Error('HTTP ' + resp.status);
+        return resp.json();
+      })
+      .then(function(json) {
+        var changed = applyLoadedBranchSnapshot(id, json && (json.data || json));
+        var latest = getState(id);
+        if (changed && latest && document.getElementById('walle-session-' + id)) {
+          latest.renderPending = true;
+          if (!isWalleSessionVisible(id)) return;
+          var composerSnapshot = captureComposerState(id);
+          renderSession(id);
+          restoreComposerState(id, composerSnapshot);
+        }
+      })
+      .catch(function(err) {
+        console.warn('[walle-session] branch snapshot load failed:', err && err.message || err);
+      })
+      .finally(function() {
+        var latest = getState(id);
+        if (latest) latest._branchHistoryLoaded = true;
+      });
+  }
+
+  function messageContentForContext(msg) {
+    if (!msg) return '';
+    if (typeof msg.content === 'string') return msg.content;
+    if (typeof msg.text === 'string') return msg.text;
+    return String(msg.content || '');
+  }
+
+  function contextMessagesForModel(ws, outboundText) {
+    var messages = ((ws && ws.messages) || [])
+      .map(function(msg) {
+        var role = String(msg && msg.role || '').trim();
+        if (role !== 'user' && role !== 'assistant') return null;
+        var out = {
+          role: role,
+          content: messageContentForContext(msg)
+        };
+        if (Array.isArray(msg.attachments) && msg.attachments.length) out.attachments = cloneJsonSafe(msg.attachments, []);
+        return out;
+      })
+      .filter(function(msg) { return !!msg && (!!msg.content || (msg.attachments && msg.attachments.length)); });
+    if (outboundText && messages.length) {
+      for (var i = messages.length - 1; i >= 0; i--) {
+        if (messages[i].role === 'user') {
+          messages[i].content = outboundText;
+          break;
+        }
+      }
+    }
+    return messages.slice(-60);
+  }
+
   var _walleModelRegistryCache = null;
   var _walleModelRegistryLoaded = false;
   var _walleModelRegistryPromise = null;
@@ -497,15 +924,104 @@ window.WalleSession = (function() {
     { label: 'Find a bug', prompt: 'Run the test suite and help me debug whatever fails.' },
     { label: 'Paste a screenshot', prompt: 'I will paste a screenshot — tell me what is wrong with the UI.' }
   ];
+  function _hasRenderableMessages(ws) {
+    return !!(ws && ((ws.messageCount || 0) > 0 || (ws.messages && ws.messages.length)));
+  }
+  function historyStatusForSession(id, ws) {
+    var s = state.sessions.get(id);
+    if (_hasRenderableMessages(ws)) return 'loaded';
+    if (ws && ws.historyStatus === 'error') return 'error';
+    if ((ws && ws.historyStatus === 'loaded') || (s && s._walleHistoryLoaded)) return 'loaded';
+    if ((ws && ws.historyStatus === 'loading') ||
+        (s && (s.needsAttach || s._walleHistoryLoading || (s._walleHistoryRequested && !s._walleHistoryLoaded)))) {
+      return 'loading';
+    }
+    return 'idle';
+  }
+  function markHistoryLoading(id, reason) {
+    var s = state.sessions.get(id);
+    var ws = getState(id);
+    if (!s || !ws) return false;
+    ws.historyRequestSeq = (Number(ws.historyRequestSeq || 0) || 0) + 1;
+    ws.historyStatus = 'loading';
+    ws.historyRequestedAt = Date.now();
+    ws.historyLoadReason = reason || 'attach';
+    ws.historyRequestId = ws.historyRequestSeq;
+    s._walleHistoryRequested = true;
+    s._walleHistoryRequestedAt = ws.historyRequestedAt;
+    s._walleHistoryRequestSeq = ws.historyRequestSeq;
+    s._walleHistoryLoading = true;
+    s._walleHistoryLoaded = false;
+    var messagesArea = document.getElementById('walle-messages-' + id);
+    if (messagesArea && !_hasRenderableMessages(ws)) {
+      _renderEmptyStateChipsIfNeeded(id, messagesArea);
+    }
+    updateHeaderStats(id);
+    return true;
+  }
+
+  function shouldRequestHistory(id, opts) {
+    opts = opts || {};
+    var s = state.sessions.get(id);
+    var ws = getState(id);
+    if (!s || !ws) return false;
+    if (opts.force === true) return true;
+    if (_hasRenderableMessages(ws)) return false;
+    if (ws.historyStatus === 'loaded' || s._walleHistoryLoaded) return false;
+    var requested = !!(s._walleHistoryRequested || ws.historyStatus === 'loading' || s._walleHistoryLoading);
+    if (!requested) return true;
+    var requestedAt = Number(ws.historyRequestedAt || s._walleHistoryRequestedAt || 0);
+    if (!requestedAt) return true;
+    return Date.now() - requestedAt >= HISTORY_RETRY_AFTER_MS;
+  }
+
+  function requestHistory(id, reason, opts) {
+    opts = opts || {};
+    if (!shouldRequestHistory(id, opts)) return false;
+    var s = state.sessions.get(id);
+    var ws = getState(id);
+    if (!s || !ws) return false;
+    s.needsAttach = false;
+    if (!markHistoryLoading(id, reason || 'walle-history-request')) return false;
+    send({
+      type: 'walle-history-request',
+      id: id,
+      reason: reason || 'walle-history-request',
+      historyRequestId: ws.historyRequestId,
+      limit: opts.limit || 500,
+      noCache: opts.noCache === true,
+    });
+    return true;
+  }
+  function markHistoryLoaded(id) {
+    var s = state.sessions.get(id);
+    var ws = getState(id);
+    if (!s || !ws) return false;
+    ws.historyStatus = 'loaded';
+    ws.historyLoadedAt = Date.now();
+    ws.historyLoadReason = '';
+    s._walleHistoryRequested = true;
+    s._walleHistoryLoading = false;
+    s._walleHistoryLoaded = true;
+    s._walleHistoryLoadedAt = ws.historyLoadedAt;
+    return true;
+  }
   function _renderEmptyStateChipsIfNeeded(id, messagesArea) {
     if (!messagesArea) return;
     var ws = getState(id);
     if (!ws) return;
     // Don't render if there are already messages in this session.
-    if ((ws.messageCount || 0) > 0 || (ws.messages && ws.messages.length)) {
+    if (_hasRenderableMessages(ws)) {
+      _removeEmptyAndLoadingState(messagesArea);
+      return;
+    }
+    var historyStatus = historyStatusForSession(id, ws);
+    if (historyStatus === 'loading') {
       _removeEmptyStateChips(messagesArea);
+      _renderHistoryLoadingState(messagesArea);
       return;
     }
+    _removeHistoryLoadingState(messagesArea);
     if (messagesArea.querySelector('.walle-empty-state')) return;
     var wrap = document.createElement('div');
     wrap.className = 'walle-empty-state';
@@ -535,11 +1051,58 @@ window.WalleSession = (function() {
     wrap.appendChild(chips);
     messagesArea.appendChild(wrap);
   }
+  function _renderHistoryLoadingState(messagesArea) {
+    if (!messagesArea || messagesArea.querySelector('.walle-history-loading-state')) return;
+    var wrap = document.createElement('div');
+    wrap.className = 'walle-history-loading-state';
+    wrap.setAttribute('role', 'status');
+    wrap.setAttribute('aria-live', 'polite');
+
+    var badge = document.createElement('div');
+    badge.className = 'walle-history-loading-badge';
+    var spinner = document.createElement('span');
+    spinner.className = 'walle-history-loading-spinner';
+    spinner.setAttribute('aria-hidden', 'true');
+    badge.appendChild(spinner);
+    var badgeText = document.createElement('span');
+    badgeText.textContent = 'Loading';
+    badge.appendChild(badgeText);
+    wrap.appendChild(badge);
+
+    var title = document.createElement('div');
+    title.className = 'walle-history-loading-title';
+    title.textContent = 'Rehydrating Wall-E session history';
+    wrap.appendChild(title);
+
+    var copy = document.createElement('div');
+    copy.className = 'walle-history-loading-copy';
+    copy.textContent = 'Messages are being replayed after restart. You can keep typing while CTM catches up.';
+    wrap.appendChild(copy);
+
+    var skeleton = document.createElement('div');
+    skeleton.className = 'walle-history-loading-skeleton';
+    for (var i = 0; i < 3; i++) {
+      var row = document.createElement('span');
+      row.className = 'walle-history-loading-line';
+      skeleton.appendChild(row);
+    }
+    wrap.appendChild(skeleton);
+    messagesArea.appendChild(wrap);
+  }
+  function _removeHistoryLoadingState(messagesArea) {
+    if (!messagesArea) return;
+    var ex = messagesArea.querySelector('.walle-history-loading-state');
+    if (ex && ex.parentNode) ex.parentNode.removeChild(ex);
+  }
   function _removeEmptyStateChips(messagesArea) {
     if (!messagesArea) return;
     var ex = messagesArea.querySelector('.walle-empty-state');
     if (ex && ex.parentNode) ex.parentNode.removeChild(ex);
   }
+  function _removeEmptyAndLoadingState(messagesArea) {
+    _removeEmptyStateChips(messagesArea);
+    _removeHistoryLoadingState(messagesArea);
+  }
 
   function tokenParam() {
     return state && state.token ? '&token=' + encodeURIComponent(state.token) : '';
@@ -607,10 +1170,17 @@ window.WalleSession = (function() {
     ws.inputDraft = '';
   }
 
-  function canRecallHistory(textarea, key) {
-    var multiline = (textarea.value || '').indexOf('\n') >= 0;
-    if (key === 'ArrowUp') return !multiline || textarea.selectionStart === 0;
-    if (key === 'ArrowDown') return !multiline || textarea.selectionEnd === textarea.value.length;
+  function canRecallHistory(textarea, key, browsingHistory) {
+    if (!textarea) return false;
+    var value = textarea.value || '';
+    var start = typeof textarea.selectionStart === 'number' ? textarea.selectionStart : value.length;
+    var end = typeof textarea.selectionEnd === 'number' ? textarea.selectionEnd : start;
+    if (start !== end) return false;
+    var atStart = start === 0;
+    var atEnd = end === value.length;
+    var singleLine = value.indexOf('\n') < 0;
+    if (key === 'ArrowUp') return atStart || (atEnd && (singleLine || browsingHistory));
+    if (key === 'ArrowDown') return atEnd;
     return false;
   }
 
@@ -678,18 +1248,17 @@ window.WalleSession = (function() {
     if (!isFinite(minHeight) || minHeight <= 0) minHeight = 44;
     if (!isFinite(maxHeight) || maxHeight <= 0) maxHeight = 260;
     textarea.style.height = 'auto';
+    var preferredHeight = null;
+    var effectiveMaxHeight = maxHeight;
     if (ws && ws.composerHeightPx != null) {
-      var fixedHeight = clampComposerHeight(id, textarea, ws.composerHeightPx);
-      textarea.style.height = fixedHeight + 'px';
-      var fixedScrollable = textarea.scrollHeight > fixedHeight + 1;
-      textarea.classList.toggle('is-scrollable', fixedScrollable);
-      textarea.style.overflowY = fixedScrollable ? 'auto' : 'hidden';
-      if (id) syncComposerResizeHandle(id, textarea);
-      return;
+      preferredHeight = clampComposerHeight(id, textarea, ws.composerHeightPx);
+      var bounds = composerHeightBounds(id, textarea);
+      effectiveMaxHeight = Math.min(bounds.max, Math.max(maxHeight, preferredHeight));
     }
-    var next = Math.max(minHeight, Math.min(textarea.scrollHeight, maxHeight));
+    var next = Math.max(minHeight, Math.min(textarea.scrollHeight, effectiveMaxHeight));
+    if (preferredHeight != null) next = Math.min(effectiveMaxHeight, Math.max(preferredHeight, next));
     textarea.style.height = next + 'px';
-    var scrollable = textarea.scrollHeight > maxHeight + 1;
+    var scrollable = textarea.scrollHeight > next + 1;
     textarea.classList.toggle('is-scrollable', scrollable);
     textarea.style.overflowY = scrollable ? 'auto' : 'hidden';
     if (id) syncComposerResizeHandle(id, textarea);
@@ -720,7 +1289,68 @@ window.WalleSession = (function() {
     }
   }
 
+  function snapshotComposerTextarea(textarea) {
+    if (!textarea) return null;
+    var value = textarea.value || '';
+    var start = typeof textarea.selectionStart === 'number' ? textarea.selectionStart : value.length;
+    var end = typeof textarea.selectionEnd === 'number' ? textarea.selectionEnd : start;
+    start = Math.max(0, Math.min(start, value.length));
+    end = Math.max(0, Math.min(end, value.length));
+    return {
+      value: value,
+      selectionStart: start,
+      selectionEnd: end,
+      focused: document.activeElement === textarea,
+      updatedAt: Date.now()
+    };
+  }
+
+  function cloneComposerSnapshot(snapshot) {
+    if (!snapshot || typeof snapshot !== 'object') return null;
+    var value = typeof snapshot.value === 'string' ? snapshot.value : '';
+    var start = typeof snapshot.selectionStart === 'number' ? snapshot.selectionStart : value.length;
+    var end = typeof snapshot.selectionEnd === 'number' ? snapshot.selectionEnd : start;
+    start = Math.max(0, Math.min(start, value.length));
+    end = Math.max(0, Math.min(end, value.length));
+    return {
+      value: value,
+      selectionStart: start,
+      selectionEnd: end,
+      focused: snapshot.focused === true,
+      updatedAt: typeof snapshot.updatedAt === 'number' ? snapshot.updatedAt : Date.now()
+    };
+  }
+
+  function rememberComposerSnapshot(id, snapshot) {
+    var ws = getState(id);
+    var normalized = cloneComposerSnapshot(snapshot);
+    if (!ws || !normalized) return normalized;
+    ws.composerDraft = normalized;
+    return normalized;
+  }
+
+  function rememberComposerTextarea(id, textarea) {
+    if (!textarea) return null;
+    return rememberComposerSnapshot(id, snapshotComposerTextarea(textarea));
+  }
+
+  function storedComposerSnapshot(id) {
+    var ws = getState(id);
+    return ws ? cloneComposerSnapshot(ws.composerDraft) : null;
+  }
+
+  function clearComposerDraft(id, textarea) {
+    var snapshot = { value: '', selectionStart: 0, selectionEnd: 0, focused: !!(textarea && document.activeElement === textarea), updatedAt: Date.now() };
+    rememberComposerSnapshot(id, snapshot);
+    var ws = getState(id);
+    if (ws) {
+      ws.inputHistoryIdx = -1;
+      ws.inputDraft = '';
+    }
+  }
+
   function syncComposerChrome(id, textarea) {
+    rememberComposerTextarea(id, textarea);
     resizeComposerTextarea(textarea);
     syncComposerPreview(id);
   }
@@ -734,7 +1364,7 @@ window.WalleSession = (function() {
     handle.setAttribute('aria-label', 'Resize Wall-E composer');
     handle.setAttribute('aria-controls', 'walle-input-' + id);
     handle.tabIndex = 0;
-    handle.title = 'Drag to resize composer. Double-click to reset.';
+    handle.title = 'Drag to set the minimum composer height. Double-click to reset.';
     var grip = document.createElement('span');
     grip.className = 'walle-composer-resize-grip';
     grip.setAttribute('aria-hidden', 'true');
@@ -811,28 +1441,25 @@ window.WalleSession = (function() {
     var root = document.getElementById('walle-session-' + id);
     var textarea = root && root.querySelector ? root.querySelector('.walle-input') : null;
     if (!textarea) return null;
-    return {
-      value: textarea.value || '',
-      selectionStart: textarea.selectionStart || 0,
-      selectionEnd: textarea.selectionEnd || textarea.selectionStart || 0,
-      focused: document.activeElement === textarea,
-    };
+    return rememberComposerTextarea(id, textarea);
   }
 
   function restoreComposerState(id, snapshot) {
-    if (!snapshot) return;
+    var restore = cloneComposerSnapshot(snapshot) || storedComposerSnapshot(id);
+    if (!restore) return;
     var root = document.getElementById('walle-session-' + id);
     var textarea = root && root.querySelector ? root.querySelector('.walle-input') : null;
     if (!textarea) return;
-    textarea.value = snapshot.value || '';
+    textarea.value = restore.value || '';
     syncComposerChrome(id, textarea);
     try {
       textarea.setSelectionRange(
-        Math.min(snapshot.selectionStart || 0, textarea.value.length),
-        Math.min(snapshot.selectionEnd || snapshot.selectionStart || 0, textarea.value.length)
+        Math.min(restore.selectionStart || 0, textarea.value.length),
+        Math.min(restore.selectionEnd || restore.selectionStart || 0, textarea.value.length)
       );
     } catch (_) {}
-    if (snapshot.focused) {
+    rememberComposerTextarea(id, textarea);
+    if (restore.focused) {
       try { textarea.focus(); } catch (_) {}
     }
   }
@@ -847,8 +1474,10 @@ window.WalleSession = (function() {
   function recallInputHistory(id, textarea, dir) {
     var ws = getState(id);
     if (!ws || !textarea || !Array.isArray(ws.inputHistory) || ws.inputHistory.length === 0) return false;
+    var browsingHistory = ws.inputHistoryIdx !== -1;
     if (dir < 0) {
-      if (!canRecallHistory(textarea, 'ArrowUp')) return false;
+      if (!canRecallHistory(textarea, 'ArrowUp', browsingHistory)) return false;
+      if (!browsingHistory && (textarea.value || '').length > 0) return false;
       if (ws.inputHistoryIdx === -1) {
         ws.inputDraft = textarea.value;
         ws.inputHistoryIdx = 0;
@@ -858,7 +1487,7 @@ window.WalleSession = (function() {
       setTextareaValue(textarea, ws.inputHistory[ws.inputHistoryIdx] || '');
       return true;
     }
-    if (!canRecallHistory(textarea, 'ArrowDown') || ws.inputHistoryIdx === -1) return false;
+    if (!canRecallHistory(textarea, 'ArrowDown', browsingHistory) || ws.inputHistoryIdx === -1) return false;
     ws.inputHistoryIdx--;
     if (ws.inputHistoryIdx < 0) {
       ws.inputHistoryIdx = -1;
@@ -870,6 +1499,14 @@ window.WalleSession = (function() {
     return true;
   }
 
+  function shouldProtectDraftHistoryArrow(id, textarea, key) {
+    var ws = getState(id);
+    if (!ws || !textarea || !Array.isArray(ws.inputHistory) || ws.inputHistory.length === 0) return false;
+    if (ws.inputHistoryIdx !== -1) return false;
+    if (!(textarea.value || '').length) return false;
+    return canRecallHistory(textarea, key, false);
+  }
+
   function resetInputHistoryBrowse(ws) {
     if (!ws) return;
     ws.inputHistoryIdx = -1;
@@ -904,6 +1541,131 @@ window.WalleSession = (function() {
     });
   }
 
+  function isWalleSessionVisible(id) {
+    var root = document.getElementById('walle-session-' + id);
+    if (state && state.activeTab === id) return true;
+    if (root && root.classList && root.classList.contains('active')) return true;
+    try {
+      if (typeof isSessionVisibleInSplit === 'function' && isSessionVisibleInSplit(id)) return true;
+    } catch (_) {}
+    return false;
+  }
+
+  function nextFrame(fn) {
+    if (typeof requestAnimationFrame === 'function') return requestAnimationFrame(fn);
+    return setTimeout(fn, 16);
+  }
+
+  function cancelFrame(handle) {
+    if (!handle) return;
+    try {
+      if (typeof cancelAnimationFrame === 'function') cancelAnimationFrame(handle);
+      else clearTimeout(handle);
+    } catch (_) {}
+  }
+
+  function cancelMessageRender(ws) {
+    if (!ws) return;
+    ws.messageRenderEpoch = Number(ws.messageRenderEpoch || 0) + 1;
+    cancelFrame(ws.messageRenderFrame);
+    ws.messageRenderFrame = 0;
+    ws.renderingMessages = false;
+  }
+
+  function finalizeMessageRender(id, ws, messagesArea, textarea, epoch) {
+    if (!ws || Number(ws.messageRenderEpoch || 0) !== epoch) return;
+    ws.messageRenderFrame = 0;
+    ws.renderingMessages = false;
+    ws.renderPending = false;
+    if (messagesArea) messagesArea.dataset.walleRenderState = 'complete';
+    syncPromptMessageDomIndices(id);
+    updatePromptNav(id);
+    renderWorkBar(id);
+    renderQueuePreview(id);
+    renderComposerAttachments(id);
+    if (textarea) syncComposerChrome(id, textarea);
+    if (messagesArea && isWalleSessionVisible(id)) scrollToBottom(messagesArea);
+    focusInput(id);
+  }
+
+  function renderMessagesIncrementally(id, ws, messagesArea, textarea) {
+    if (!ws || !messagesArea) return;
+    cancelMessageRender(ws);
+    messagesArea.dataset.lastDate = '';
+    messagesArea.dataset.walleRenderState = 'idle';
+
+    var messages = Array.isArray(ws.messages) ? ws.messages.slice() : [];
+    if (!messages.length) {
+      finalizeMessageRender(id, ws, messagesArea, textarea, Number(ws.messageRenderEpoch || 0));
+      return;
+    }
+
+    var epoch = Number(ws.messageRenderEpoch || 0) + 1;
+    ws.messageRenderEpoch = epoch;
+    ws.renderPending = false;
+    ws.renderingMessages = messages.length > MESSAGE_RENDER_SYNC_LIMIT;
+
+    var index = 0;
+    var renderOne = function() {
+      renderMessage(messagesArea, messages[index], index);
+      index += 1;
+    };
+
+    if (messages.length <= MESSAGE_RENDER_SYNC_LIMIT) {
+      while (index < messages.length) renderOne();
+      finalizeMessageRender(id, ws, messagesArea, textarea, epoch);
+      return;
+    }
+
+    messagesArea.dataset.walleRenderState = 'rendering';
+    var appendBatch = function() {
+      if (!ws || Number(ws.messageRenderEpoch || 0) !== epoch || !messagesArea.isConnected) return;
+      if (!isWalleSessionVisible(id)) {
+        ws.messageRenderFrame = 0;
+        ws.renderingMessages = false;
+        ws.renderPending = true;
+        messagesArea.dataset.walleRenderState = 'paused';
+        return;
+      }
+
+      var started = (typeof performance !== 'undefined' && performance.now) ? performance.now() : Date.now();
+      var rendered = 0;
+      while (index < messages.length && rendered < MESSAGE_RENDER_BATCH_SIZE) {
+        renderOne();
+        rendered += 1;
+        var now = (typeof performance !== 'undefined' && performance.now) ? performance.now() : Date.now();
+        if (now - started >= MESSAGE_RENDER_FRAME_BUDGET_MS) break;
+      }
+
+      if (messagesArea && isWalleSessionVisible(id)) scrollToBottom(messagesArea);
+      if (index < messages.length) {
+        ws.messageRenderFrame = nextFrame(appendBatch);
+        return;
+      }
+      finalizeMessageRender(id, ws, messagesArea, textarea, epoch);
+      // Re-attach inline queued-prompt bubbles after a full message re-render.
+      renderPendingQueueBubbles(id);
+    };
+
+    appendBatch();
+  }
+
+  function messageRenderNeedsRestart(id) {
+    var ws = getState(id);
+    return !!(ws && ws.renderPending);
+  }
+
+  function restartVisibleMessageRenderIfBusy(id, ws) {
+    if (!ws || !ws.renderingMessages) return false;
+    ws.renderPending = true;
+    if (isWalleSessionVisible(id)) {
+      var composerSnapshot = captureComposerState(id);
+      renderSession(id);
+      restoreComposerState(id, composerSnapshot);
+    }
+    return true;
+  }
+
   function isComposerTextTarget(target) {
     if (!target || !target.closest) return false;
     return !!target.closest('input, textarea, select, button, a, [contenteditable="true"], [contenteditable=""]');
@@ -1147,6 +1909,10 @@ window.WalleSession = (function() {
 
   function redirectComposerKeydown(id, e) {
     if (!e || isComposerTextTarget(e.target)) return;
+    if (e.key === 'Escape') {
+      confirmCancelActiveRun(id, e);
+      return;
+    }
     if (isMacCtrlVPasteShortcut(e)) {
       var pasteContainer = document.getElementById('walle-session-' + id);
       var pasteTextarea = pasteContainer && pasteContainer.querySelector('.walle-input');
@@ -1230,8 +1996,43 @@ window.WalleSession = (function() {
       var a = attachments[i] || {};
       var thumb = document.createElement('button');
       thumb.type = 'button';
-      thumb.className = 'walle-attachment-thumb';
       var label = a.label || ('[Image #' + (i + 1) + ']');
+      if (a.pending) {
+        // Optimistic placeholder while the image resizes+compresses.
+        thumb.className = 'walle-attachment-thumb walle-attachment-thumb--pending';
+        thumb.disabled = true;
+        thumb.title = label + ' — compressing…';
+        var spinner = document.createElement('span');
+        spinner.className = 'walle-attachment-spinner';
+        spinner.setAttribute('aria-hidden', 'true');
+        thumb.appendChild(spinner);
+        var pendingToken = document.createElement('span');
+        pendingToken.className = 'walle-attachment-token';
+        pendingToken.textContent = 'compressing…';
+        thumb.appendChild(pendingToken);
+        if (editable) {
+          var pendingRemove = document.createElement('span');
+          pendingRemove.className = 'walle-attachment-remove';
+          pendingRemove.textContent = '×';
+          pendingRemove.title = 'Remove image';
+          pendingRemove.addEventListener('click', (function(idx) {
+            return function(e) {
+              e.preventDefault();
+              e.stopPropagation();
+              var ws = getState(id);
+              if (ws && Array.isArray(ws.inputAttachments)) {
+                ws.inputAttachments.splice(idx, 1);
+                renderComposerAttachments(id);
+                updateSendButton(id, !!ws.isGenerating);
+              }
+            };
+          })(i));
+          thumb.appendChild(pendingRemove);
+        }
+        strip.appendChild(thumb);
+        continue;
+      }
+      thumb.className = 'walle-attachment-thumb';
       thumb.title = label + ' — click to preview, right-click for path or URL';
       thumb.dataset.index = String(i);
       var img = document.createElement('img');
@@ -1326,20 +2127,50 @@ window.WalleSession = (function() {
     });
   }
 
+  function hasPendingAttachments(ws) {
+    return !!(ws && Array.isArray(ws.inputAttachments)
+      && ws.inputAttachments.some(function(a) { return a && a.pending; }));
+  }
+
   async function attachImageBlob(id, blob, filename) {
     var ws = getState(id);
     if (!ws || !blob) return;
-    var dataUrl = await readBlobAsDataUrl(blob);
-    var img = await uploadAttachmentBlob(blob, filename);
-    img.label = nextAttachmentLabel(ws);
-    img.type = 'image';
-    img.name = img.filename || sanitizeImageFilename(filename, extensionForMime(blob.type));
-    img.mediaType = blob.type || 'image/png';
-    img.data = dataUrl;
-    ws.inputAttachments.push(img);
-    insertAttachmentToken(id, img.label);
+    var label = nextAttachmentLabel(ws);
+    var safeName = sanitizeImageFilename(filename, extensionForMime(blob.type));
+    // Show an optimistic "compressing…" chip the instant the image is pasted and
+    // gate send until it's resized+compressed (a large screenshot takes ~0.5-1s),
+    // so a fast Enter can't fire the message before the attachment is attached.
+    var pendingKey = 'pending-' + Date.now() + '-' + Math.floor(Math.random() * 1e9);
+    ws.inputAttachments.push({
+      type: 'image', label: label, name: safeName,
+      mediaType: blob.type || 'image/png', pending: true, _pendingKey: pendingKey,
+    });
+    insertAttachmentToken(id, label);
     renderComposerAttachments(id);
+    updateSendButton(id, !!ws.isGenerating);
     focusInput(id);
+    try {
+      var dataUrl = await readBlobAsDataUrl(blob);
+      var img = await uploadAttachmentBlob(blob, filename);
+      img.label = label;
+      img.type = 'image';
+      img.name = img.filename || safeName;
+      img.mediaType = blob.type || 'image/png';
+      img.data = dataUrl;
+      img.pending = false;
+      // Replace the placeholder in place. If the user removed it while it was
+      // processing, honor that and don't re-add the image.
+      var idx = ws.inputAttachments.findIndex(function(a) { return a && a._pendingKey === pendingKey; });
+      if (idx >= 0) ws.inputAttachments[idx] = img;
+      renderComposerAttachments(id);
+    } catch (err) {
+      var failIdx = ws.inputAttachments.findIndex(function(a) { return a && a._pendingKey === pendingKey; });
+      if (failIdx >= 0) ws.inputAttachments.splice(failIdx, 1);
+      renderComposerAttachments(id);
+      throw err;
+    } finally {
+      updateSendButton(id, !!ws.isGenerating);
+    }
   }
 
   async function handlePaste(id, e) {
@@ -1484,7 +2315,9 @@ window.WalleSession = (function() {
   function renderSession(id) {
     var s = state.sessions.get(id);
     if (!s) return;
+    var composerSnapshot = captureComposerState(id);
     var ws = getState(id);
+    var initialComposerSnapshot = composerSnapshot || storedComposerSnapshot(id);
 
     var container = s.container || document.getElementById('walle-session-' + id);
     if (!container) return;
@@ -1505,7 +2338,9 @@ window.WalleSession = (function() {
     info.className = 'session-info';
     var title = document.createElement('div');
     title.className = 'session-title';
-    title.textContent = s.meta?.label || 'Wall-E';
+    title.textContent = (typeof activeSessionDisplayLabel === 'function'
+      ? activeSessionDisplayLabel(s, id)
+      : (s.meta?.displayTitle || s.meta?.aiTitle || s.meta?.title || s.meta?.label)) || 'Wall-E';
     info.appendChild(title);
 
     var meta = document.createElement('div');
@@ -1513,7 +2348,24 @@ window.WalleSession = (function() {
     meta.id = 'walle-meta-' + id;
     var cwd = s.meta?.cwd || '';
     var msgCount = ws.messageCount || 0;
-    meta.textContent = (cwd ? cwd + '  ' : '') + msgCount + ' messages';
+    // Working directory is editable: clicking it opens an inline input that
+    // sends `update-session-cwd`. A Wall-E chat session is bound to the dir it
+    // was created in; when the user wants work to happen elsewhere (e.g. "build
+    // it under ~/ws/sl-web, don't touch ~/ws/octo") the model otherwise has to
+    // prefix every run_shell with `cd <target>`, which trips the `cd * -> ask`
+    // permission rule on every command. Setting the cwd here points the coding
+    // runtime (effectiveCwd) at the intended dir so no `cd` prefix is needed.
+    var cwdEl = renderSessionCwdControl(id, cwd);
+    meta.appendChild(cwdEl);
+    var countText = document.createElement('span');
+    countText.className = 'session-meta-count';
+    countText.style.marginLeft = cwd ? '8px' : '0';
+    if (historyStatusForSession(id, ws) === 'loading' && msgCount === 0) {
+      countText.textContent = 'Loading messages...';
+    } else {
+      countText.textContent = msgCount + ' messages';
+    }
+    meta.appendChild(countText);
     info.appendChild(meta);
     header.appendChild(info);
 
@@ -1606,6 +2458,11 @@ window.WalleSession = (function() {
     messagesArea.id = 'walle-messages-' + id;
     messagesArea.tabIndex = -1;
 
+    var workbarSlot = document.createElement('div');
+    workbarSlot.className = 'walle-workbar-slot';
+    workbarSlot.id = 'walle-workbar-' + id;
+    workbarSlot.style.display = 'none';
+
     // Input bar
     var inputBar = document.createElement('div');
     inputBar.className = 'walle-input-bar';
@@ -1613,6 +2470,11 @@ window.WalleSession = (function() {
     var inputStack = document.createElement('div');
     inputStack.className = 'walle-input-stack';
 
+    var queuePreview = document.createElement('div');
+    queuePreview.className = 'walle-queue-preview';
+    queuePreview.id = 'walle-queue-preview-' + id;
+    inputStack.appendChild(queuePreview);
+
     var attachmentPreview = document.createElement('div');
     attachmentPreview.className = 'walle-composer-attachments';
     attachmentPreview.id = 'walle-attachments-' + id;
@@ -1628,6 +2490,9 @@ window.WalleSession = (function() {
     textarea.id = 'walle-input-' + id;
     textarea.placeholder = 'Message Wall-E... paste images here';
     textarea.rows = 1;
+    if (initialComposerSnapshot && initialComposerSnapshot.value) {
+      textarea.value = initialComposerSnapshot.value;
+    }
     textarea.dataset.skillAgent = 'walle';
     textarea.dataset.skillCwd = s.meta?.cwd || s.meta?.project_path || s.meta?.project || '';
     textarea.dataset.skillMode = 'walle-composer';
@@ -1649,23 +2514,22 @@ window.WalleSession = (function() {
           e.preventDefault();
           return;
         }
-      }
-      if (e.key === 'Escape') {
-        var ws = getState(id);
-        if (ws && ws.isGenerating) {
+        if (shouldProtectDraftHistoryArrow(id, textarea, e.key)) {
           e.preventDefault();
-          send({ type: 'walle-cancel', id: id });
+          rememberComposerTextarea(id, textarea);
+          return;
         }
-        return;
+      }
+      if (e.key === 'Escape') {
+        confirmCancelActiveRun(id, e);
+        return;
       }
       if (e.key === 'Enter' && !e.shiftKey) {
-        // Plain Enter sends. Shift+Enter inserts newline.
-        // Cmd/Ctrl+Enter also sends (Slack/Cursor muscle memory).
+        // Shift+Enter inserts a newline. ⌘/Ctrl+Enter = "send now" (interrupt a
+        // busy run and send next); plain Enter = send, or queue when busy.
         e.preventDefault();
-        sendMessage(id);
-      } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        sendMessage(id);
+        if (e.metaKey || e.ctrlKey) sendNow(id);
+        else sendMessage(id);
       }
     });
     textarea.addEventListener('input', function() {
@@ -1677,7 +2541,11 @@ window.WalleSession = (function() {
         pe.checkSlashTriggerAtCursor(textarea);
       }
     });
+    textarea.addEventListener('keyup', function() { rememberComposerTextarea(id, textarea); });
+    textarea.addEventListener('click', function() { rememberComposerTextarea(id, textarea); });
+    textarea.addEventListener('select', function() { rememberComposerTextarea(id, textarea); });
     textarea.addEventListener('blur', function() {
+      rememberComposerTextarea(id, textarea);
       var pe = promptEditorApi();
       if (!pe || typeof pe.hideSlashPicker !== 'function') return;
       setTimeout(function() {
@@ -1716,13 +2584,14 @@ window.WalleSession = (function() {
     // send key in Sprint 1). Mac users see ⌘; everyone else sees Ctrl.
     var isMac = (navigator.platform || '').toUpperCase().indexOf('MAC') >= 0;
     var sendChord = isMac ? '⌘' : 'Ctrl';
-    hints.textContent = 'Enter or ' + sendChord + '+Enter to send · Shift+Enter for newline · Up/Down for prompt history · Markdown toolbar supports ' + sendChord + '+B/I/K · paste images to attach';
+    hints.textContent = 'Enter to send (queues while busy) · ' + sendChord + '+Enter to send now · Shift+Enter for newline · Up/Down for history · ' + sendChord + '+B/I/K · paste images to attach';
 
     // Assemble — clear and rebuild. Sprint 2: only one chrome row now
     // (the merged header). Reclaims ~36px of vertical space.
     while (container.firstChild) container.removeChild(container.firstChild);
     container.appendChild(header);
     container.appendChild(messagesArea);
+    container.appendChild(workbarSlot);
     container.appendChild(createComposerResizeHandle(id));
     container.appendChild(inputBar);
     container.appendChild(hints);
@@ -1742,18 +2611,16 @@ window.WalleSession = (function() {
       });
     }
 
-    // Render existing messages
-    for (var i = 0; i < ws.messages.length; i++) {
-      renderMessage(messagesArea, ws.messages[i]);
-    }
-    syncPromptMessageDomIndices(id);
-    updatePromptNav(id);
+    renderWorkBar(id);
+    renderQueuePreview(id);
     renderComposerAttachments(id);
-    syncComposerChrome(id, textarea);
-    scrollToBottom(messagesArea);
-    focusInput(id);
+    restoreComposerState(id, initialComposerSnapshot);
+    updateSendButton(id, !!ws.isGenerating);
+    if (!initialComposerSnapshot || !initialComposerSnapshot.focused) focusInput(id);
+    renderMessagesIncrementally(id, ws, messagesArea, textarea);
 
     loadWalleModels().then(function() { syncWalleModelButtons(id); }).catch(function() {});
+    ensureWalleBranchSnapshotLoaded(id);
   }
 
   // ---------- date divider ----------
@@ -1778,18 +2645,169 @@ window.WalleSession = (function() {
     container.appendChild(divider);
   }
 
+  function renderBranchNav(id, messageIndex) {
+    var ws = getState(id);
+    var branches = ws && ws.branches ? ws.branches[String(messageIndex)] : null;
+    if (!Array.isArray(branches) || branches.length <= 1) return null;
+    var active = Number(ws.branchActive[String(messageIndex)] || 0);
+    if (!Number.isFinite(active) || active < 0 || active >= branches.length) active = 0;
+    var nav = document.createElement('span');
+    nav.className = 'walle-branch-nav';
+
+    var prev = document.createElement('button');
+    prev.type = 'button';
+    prev.className = 'walle-branch-btn';
+    prev.textContent = '<';
+    prev.title = 'Previous prompt version';
+    prev.setAttribute('aria-label', 'Previous prompt version');
+    prev.disabled = active <= 0;
+    prev.addEventListener('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      switchBranch(id, messageIndex, -1);
+    });
+    nav.appendChild(prev);
+
+    var label = document.createElement('span');
+    label.className = 'walle-branch-label';
+    label.textContent = (active + 1) + '/' + branches.length;
+    label.title = 'Prompt versions';
+    nav.appendChild(label);
+
+    var next = document.createElement('button');
+    next.type = 'button';
+    next.className = 'walle-branch-btn';
+    next.textContent = '>';
+    next.title = 'Next prompt version';
+    next.setAttribute('aria-label', 'Next prompt version');
+    next.disabled = active >= branches.length - 1;
+    next.addEventListener('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      switchBranch(id, messageIndex, 1);
+    });
+    nav.appendChild(next);
+    return nav;
+  }
+
+  function renderUserMessageActions(id, messageIndex) {
+    var wrap = document.createElement('span');
+    wrap.className = 'walle-msg-actions';
+    var branchNav = renderBranchNav(id, messageIndex);
+    if (branchNav) wrap.appendChild(branchNav);
+
+    var edit = document.createElement('button');
+    edit.type = 'button';
+    edit.className = 'walle-msg-action';
+    edit.textContent = 'Edit';
+    edit.title = 'Edit and resend this prompt';
+    edit.setAttribute('aria-label', 'Edit and resend prompt');
+    edit.addEventListener('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      editMessage(id, messageIndex);
+    });
+    wrap.appendChild(edit);
+
+    var del = document.createElement('button');
+    del.type = 'button';
+    del.className = 'walle-msg-action danger';
+    del.textContent = 'Delete';
+    del.title = 'Delete this prompt and everything after it';
+    del.setAttribute('aria-label', 'Delete prompt and truncate history');
+    del.addEventListener('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      deleteFromPrompt(id, messageIndex);
+    });
+    wrap.appendChild(del);
+    return wrap;
+  }
+
+  function renderUserEditForm(id, messageIndex, msg) {
+    var wrap = document.createElement('div');
+    wrap.className = 'walle-edit-card';
+
+    var textarea = document.createElement('textarea');
+    textarea.className = 'walle-edit-input';
+    textarea.value = msg.content || '';
+    textarea.rows = Math.min(10, Math.max(3, String(textarea.value || '').split('\n').length + 1));
+    textarea.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        cancelEdit(id);
+      } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        submitEdit(id, messageIndex);
+      }
+    });
+    wrap.appendChild(textarea);
+
+    var hint = document.createElement('div');
+    hint.className = 'walle-edit-hint';
+    hint.textContent = 'Resending creates a new version. Later messages stay available in the version switcher.';
+    wrap.appendChild(hint);
+
+    var actions = document.createElement('div');
+    actions.className = 'walle-edit-actions';
+    var sendBtn = document.createElement('button');
+    sendBtn.type = 'button';
+    sendBtn.className = 'walle-session-action-btn primary';
+    sendBtn.textContent = 'Resend';
+    sendBtn.addEventListener('click', function(e) {
+      e.preventDefault();
+      submitEdit(id, messageIndex);
+    });
+    actions.appendChild(sendBtn);
+
+    var cancelBtn = document.createElement('button');
+    cancelBtn.type = 'button';
+    cancelBtn.className = 'walle-session-action-btn';
+    cancelBtn.textContent = 'Cancel';
+    cancelBtn.addEventListener('click', function(e) {
+      e.preventDefault();
+      cancelEdit(id);
+    });
+    actions.appendChild(cancelBtn);
+    wrap.appendChild(actions);
+    return wrap;
+  }
+
   // ---------- renderMessage ----------
-  function renderMessage(container, msg) {
+  function renderMessage(container, msg, messageIndex) {
     var sessionId = '';
     if (container && container.id && container.id.indexOf('walle-messages-') === 0) {
       sessionId = container.id.slice('walle-messages-'.length);
     }
-    // Sprint 3: any time a real message lands, drop the empty-state chips.
-    _removeEmptyStateChips(container);
+    if (msg && msg.liveActivity) {
+      var livePanel = renderLiveActivity(msg.toolCalls || []);
+      if (livePanel) {
+        _removeEmptyAndLoadingState(container);
+        _maybeAppendDateDivider(container, msg);
+        livePanel.dataset.walleRole = msg.role || 'system';
+        if (typeof messageIndex === 'number') livePanel.dataset.walleMessageIndex = String(messageIndex);
+        container.appendChild(livePanel);
+        return;
+      }
+    }
+    // Durable approval card (persisted permission_request part): render it as the
+    // same card the live stream shows, so a reload keeps a pending approval
+    // actionable (and an answered one shown as resolved).
+    if (msg && msg.metadata && msg.metadata.permission && msg.metadata.permission.permId) {
+      _removeEmptyAndLoadingState(container);
+      _maybeAppendDateDivider(container, msg);
+      var histPermCard = renderPermissionCardForHistory(sessionId, msg.metadata.permission);
+      if (typeof messageIndex === 'number') histPermCard.dataset.walleMessageIndex = String(messageIndex);
+      container.appendChild(histPermCard);
+      return;
+    }
+    // Sprint 3: any time a real message lands, drop the empty/loading state.
+    _removeEmptyAndLoadingState(container);
     _maybeAppendDateDivider(container, msg);
     var el = document.createElement('div');
     el.className = 'walle-msg';
     el.dataset.walleRole = msg.role || '';
+    if (typeof messageIndex === 'number') el.dataset.walleMessageIndex = String(messageIndex);
 
     var avatar = document.createElement('div');
     avatar.className = 'walle-msg-avatar ' + (msg.role === 'user' ? 'user' : 'assistant');
@@ -1839,6 +2857,10 @@ window.WalleSession = (function() {
       hdr.appendChild(lat);
     }
 
+    if (msg.role === 'user' && sessionId && typeof messageIndex === 'number') {
+      hdr.appendChild(renderUserMessageActions(sessionId, messageIndex));
+    }
+
     body.appendChild(hdr);
 
     // Tool activity (before body text). While a response is running, progress
@@ -1854,6 +2876,14 @@ window.WalleSession = (function() {
       body.appendChild(renderAttachmentStrip(sessionId, msg.attachments, false));
     }
 
+    var wsForEdit = sessionId ? getState(sessionId) : null;
+    if (msg.role === 'user' && wsForEdit && wsForEdit.editingMessageIndex === messageIndex) {
+      body.appendChild(renderUserEditForm(sessionId, messageIndex, msg));
+      el.appendChild(body);
+      container.appendChild(el);
+      return;
+    }
+
     // Message body — rendered as sanitized markdown
     var content = document.createElement('div');
     content.className = 'walle-msg-body';
@@ -1880,10 +2910,14 @@ window.WalleSession = (function() {
     card.className = 'walle-tool-card';
     card.dataset.expanded = 'false';
 
-    var header = document.createElement('div');
+    var header = document.createElement('button');
+    header.type = 'button';
     header.className = 'walle-tool-header';
+    header.setAttribute('aria-expanded', 'false');
     header.onclick = function() {
-      card.dataset.expanded = card.dataset.expanded === 'true' ? 'false' : 'true';
+      var expanded = card.dataset.expanded !== 'true';
+      card.dataset.expanded = expanded ? 'true' : 'false';
+      header.setAttribute('aria-expanded', expanded ? 'true' : 'false');
     };
 
     var arrow = document.createElement('span');
@@ -1930,10 +2964,7 @@ window.WalleSession = (function() {
 
     card.appendChild(header);
 
-    var output = document.createElement('div');
-    output.className = 'walle-tool-output';
-    output.textContent = _formatToolOutput(tc.output);
-    card.appendChild(output);
+    card.appendChild(renderToolDetail(tc));
 
     return card;
   }
@@ -1977,6 +3008,162 @@ window.WalleSession = (function() {
     return '';
   }
 
+  function toolPrimaryLabel(toolName) {
+    var name = String(toolName || '').toLowerCase();
+    if (name === 'run_shell' || name === 'shell' || name === 'bash') return 'Command';
+    if (name === 'browser_screenshot') return 'URL';
+    if (name === 'read_file' || name === 'read' || name === 'cat') return 'Path';
+    if (name === 'glob') return 'Pattern';
+    if (name === 'grep_files' || name === 'grep') return 'Search';
+    if (name === 'think') return 'Thought';
+    return 'Input';
+  }
+
+  function fullScalarText(value) {
+    if (value == null) return '';
+    if (typeof value === 'string') return value;
+    if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+    return '';
+  }
+
+  function toolPrimaryText(tc) {
+    if (!tc) return '';
+    var toolName = String(tc.name || tc.tool || '').toLowerCase();
+    var args = tc.args != null ? tc.args : tc.input;
+    if (args == null) return '';
+    if (typeof args === 'string' || typeof args === 'number' || typeof args === 'boolean') return String(args);
+    if (typeof args !== 'object') return '';
+    try {
+      if (toolName === 'run_shell' || toolName === 'shell' || toolName === 'bash') {
+        if (args.command) return String(args.command);
+        if (Array.isArray(args.cmd)) return args.cmd.join(' ');
+      }
+      if (toolName === 'browser_screenshot') {
+        return fullScalarText(args.url || args.href || args.target);
+      }
+      if (toolName === 'read_file' || toolName === 'read' || toolName === 'cat') {
+        return fullScalarText(args.path || args.file_path);
+      }
+      if (toolName === 'glob') {
+        return fullScalarText(args.pattern || args.path);
+      }
+      if (toolName === 'grep_files' || toolName === 'grep') {
+        var p = fullScalarText(args.pattern || args.query);
+        var loc = fullScalarText(args.path || args.glob);
+        if (p && loc) return '"' + p + '" in ' + loc;
+        return p || loc;
+      }
+      if (toolName === 'edit_file' || toolName === 'write_file' || toolName === 'edit' || toolName === 'write') {
+        return fullScalarText(args.path || args.file_path);
+      }
+      if (toolName === 'list_directory' || toolName === 'ls') {
+        return fullScalarText(args.path);
+      }
+      if (toolName === 'think') {
+        return fullScalarText(args.thought || args.text);
+      }
+      if (toolName === 'search_memories') {
+        return fullScalarText(args.query);
+      }
+    } catch (_) {
+      return '';
+    }
+    return '';
+  }
+
+  function formatToolArgs(args) {
+    if (args == null) return '';
+    if (typeof args === 'string') return args;
+    if (typeof args === 'number' || typeof args === 'boolean') return String(args);
+    try {
+      return JSON.stringify(args, null, 2);
+    } catch (_) {
+      return String(args || '');
+    }
+  }
+
+  function appendToolDetailSection(parent, labelText, value, opts) {
+    var text = value == null ? '' : String(value);
+    if (!text.trim()) return null;
+    opts = opts || {};
+    var section = document.createElement('div');
+    section.className = 'walle-tool-detail-section';
+
+    var label = document.createElement('div');
+    label.className = 'walle-tool-detail-label';
+    label.textContent = labelText;
+    section.appendChild(label);
+
+    var pre = document.createElement('pre');
+    pre.className = 'walle-tool-detail-pre' + (opts.output ? ' output' : '');
+    pre.textContent = opts.output ? _formatToolOutput(text) : text;
+    section.appendChild(pre);
+
+    parent.appendChild(section);
+    return section;
+  }
+
+  function renderToolDetail(tc) {
+    var detail = document.createElement('div');
+    detail.className = 'walle-tool-detail';
+
+    var meta = document.createElement('div');
+    meta.className = 'walle-tool-detail-meta';
+
+    var statusChip = document.createElement('span');
+    statusChip.className = 'walle-tool-detail-chip ' + (tc && tc.status ? tc.status : 'working');
+    statusChip.textContent = tc && tc.status === 'error'
+      ? 'Error'
+      : (tc && tc.status === 'done' ? 'Done' : 'Running');
+    meta.appendChild(statusChip);
+
+    var name = tc && (tc.name || tc.tool) ? displayToolName(tc.name || tc.tool) : '';
+    if (name) {
+      var nameChip = document.createElement('span');
+      nameChip.className = 'walle-tool-detail-chip name';
+      nameChip.textContent = name;
+      meta.appendChild(nameChip);
+    }
+
+    var duration = _extractDurationLabel(tc);
+    if (duration) {
+      var durationChip = document.createElement('span');
+      durationChip.className = 'walle-tool-detail-chip';
+      durationChip.textContent = duration;
+      meta.appendChild(durationChip);
+    }
+    detail.appendChild(meta);
+
+    var summaryText = (tc && (tc.summary || tc.result_summary)) || '';
+    if (summaryText) {
+      var summary = document.createElement('div');
+      summary.className = 'walle-tool-detail-summary';
+      summary.textContent = summaryText;
+      detail.appendChild(summary);
+    }
+
+    var toolName = tc && (tc.name || tc.tool) || '';
+    var primary = toolPrimaryText(tc);
+    appendToolDetailSection(detail, toolPrimaryLabel(toolName), primary);
+
+    var args = tc ? (tc.args != null ? tc.args : tc.input) : null;
+    var argsText = formatToolArgs(args);
+    if (argsText && argsText !== primary) appendToolDetailSection(detail, 'Arguments', argsText);
+
+    var output = tc && (tc.output || tc.result || tc.error);
+    appendToolDetailSection(detail, tc && tc.status === 'error' ? 'Error' : 'Output', output, { output: true });
+
+    if (!detail.querySelector('.walle-tool-detail-section') && !summaryText) {
+      var empty = document.createElement('div');
+      empty.className = 'walle-tool-detail-empty';
+      empty.textContent = 'No detailed payload was recorded for this activity.';
+      detail.appendChild(empty);
+    }
+
+    addCopyButtonsToBlocks(detail);
+    return detail;
+  }
+
   function isRenderableToolCall(tc) {
     if (!tc) return false;
     var toolName = tc.name || tc.tool || '';
@@ -2041,43 +3228,75 @@ window.WalleSession = (function() {
     var maxRows = 6;
     var start = Math.max(0, visible.length - maxRows);
     if (start > 0) {
-      var more = document.createElement('div');
+      var more = document.createElement('button');
+      more.type = 'button';
       more.className = 'walle-live-activity-more';
-      more.textContent = '+' + start + ' earlier';
+      more.textContent = '+' + start + ' earlier · Show';
       list.appendChild(more);
+
+      var hiddenList = document.createElement('div');
+      hiddenList.className = 'walle-live-activity-hidden';
+      hiddenList.hidden = true;
+      for (var h = 0; h < start; h++) hiddenList.appendChild(renderLiveActivityItem(visible[h]));
+      more.onclick = function() {
+        var showing = hiddenList.hidden;
+        hiddenList.hidden = !showing;
+        more.textContent = showing ? 'Hide earlier' : '+' + start + ' earlier · Show';
+      };
+      list.appendChild(hiddenList);
     }
     for (var i = start; i < visible.length; i++) {
-      var tc = visible[i];
-      var status = tc.status || 'working';
-      var row = document.createElement('div');
-      row.className = 'walle-live-activity-row ' + status;
+      list.appendChild(renderLiveActivityItem(visible[i]));
+    }
+    panel.appendChild(list);
+    return panel;
+  }
 
-      var dot = document.createElement('span');
-      dot.className = 'walle-live-activity-dot';
-      row.appendChild(dot);
+  function renderLiveActivityItem(tc) {
+    var status = (tc && tc.status) || 'working';
+    var item = document.createElement('details');
+    item.className = 'walle-live-activity-item ' + status;
 
-      var main = document.createElement('div');
-      main.className = 'walle-live-activity-main';
+    var row = document.createElement('summary');
+    row.className = 'walle-live-activity-row ' + status;
+    var label = displayToolName((tc && (tc.name || tc.tool)) || 'tool') || 'activity';
+    var preview = toolPreviewText(tc);
+    row.title = preview ? label + ': ' + preview : label;
+    row.setAttribute('aria-label', 'Show details for ' + label + (preview ? ': ' + preview : ''));
 
-      var name = document.createElement('span');
-      name.className = 'walle-live-activity-name';
-      name.textContent = displayToolName(tc.name || tc.tool || 'tool') || 'activity';
-      main.appendChild(name);
-
-      var text = document.createElement('span');
-      text.className = 'walle-live-activity-text';
-      text.textContent = toolPreviewText(tc);
-      main.appendChild(text);
-      row.appendChild(main);
+    var arrow = document.createElement('span');
+    arrow.className = 'walle-live-activity-arrow';
+    arrow.textContent = '\u25B6';
+    row.appendChild(arrow);
 
-      var meta = document.createElement('span');
-      meta.className = 'walle-live-activity-meta';
-      meta.textContent = toolStatusLabel(tc);
-      row.appendChild(meta);
-      list.appendChild(row);
-    }
-    panel.appendChild(list);
-    return panel;
+    var dot = document.createElement('span');
+    dot.className = 'walle-live-activity-dot';
+    row.appendChild(dot);
+
+    var main = document.createElement('div');
+    main.className = 'walle-live-activity-main';
+
+    var name = document.createElement('span');
+    name.className = 'walle-live-activity-name';
+    name.textContent = label;
+    main.appendChild(name);
+
+    var text = document.createElement('span');
+    text.className = 'walle-live-activity-text';
+    text.textContent = preview;
+    main.appendChild(text);
+    row.appendChild(main);
+
+    var meta = document.createElement('span');
+    meta.className = 'walle-live-activity-meta';
+    meta.textContent = toolStatusLabel(tc);
+    row.appendChild(meta);
+    item.appendChild(row);
+
+    var detail = renderToolDetail(tc);
+    detail.classList.add('walle-live-activity-detail');
+    item.appendChild(detail);
+    return item;
   }
 
   function normalizeToolCall(tc) {
@@ -2345,6 +3564,75 @@ window.WalleSession = (function() {
   }
 
   // ---------- permission card ----------
+  // Editable working-directory control for the session header. Clicking the
+  // path opens an inline input; committing sends `update-session-cwd` (the same
+  // message the worktree-create flow uses), which updates session.cwd so the
+  // next coding turn's effectiveCwd points there — no `cd <target>` prefix that
+  // would trip the `cd * -> ask` permission rule on every command.
+  function renderSessionCwdControl(sessionId, cwd) {
+    var wrap = document.createElement('span');
+    wrap.className = 'session-cwd';
+    var current = cwd || '';
+    var label = document.createElement('span');
+    label.className = 'session-cwd-label' + (current ? '' : ' session-cwd-empty');
+    label.textContent = current || 'Set working directory';
+    label.title = "Click to change this session's working directory";
+    label.tabIndex = 0;
+    label.style.cursor = 'pointer';
+    label.style.borderBottom = '1px dotted currentColor';
+    wrap.appendChild(label);
+
+    function restore() {
+      wrap.replaceChildren();
+      label.textContent = current || 'Set working directory';
+      label.className = 'session-cwd-label' + (current ? '' : ' session-cwd-empty');
+      wrap.appendChild(label);
+    }
+    function commit(rawVal) {
+      var val = (rawVal || '').trim();
+      if (val && val !== current) {
+        current = val;
+        send({ type: 'update-session-cwd', id: sessionId, cwd: val });
+      }
+      restore();
+    }
+    function beginEdit() {
+      var input = document.createElement('input');
+      input.type = 'text';
+      input.className = 'session-cwd-input';
+      input.value = current;
+      input.placeholder = '/absolute/path/to/project';
+      input.style.minWidth = '220px';
+      // Fit the dark session-meta row rather than a default white box.
+      input.style.background = 'rgba(255,255,255,0.06)';
+      input.style.color = 'inherit';
+      input.style.border = '1px solid rgba(255,255,255,0.25)';
+      input.style.borderRadius = '4px';
+      input.style.padding = '1px 5px';
+      input.style.font = 'inherit';
+      wrap.replaceChildren();
+      wrap.appendChild(input);
+      input.focus();
+      input.select();
+      var done = false;
+      var finish = function(save) {
+        if (done) return;
+        done = true;
+        if (save) commit(input.value); else restore();
+      };
+      input.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter') { e.preventDefault(); finish(true); }
+        else if (e.key === 'Escape') { e.preventDefault(); finish(false); }
+      });
+      input.addEventListener('blur', function() { finish(true); });
+    }
+    label.addEventListener('click', beginEdit);
+    label.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); beginEdit(); }
+    });
+    return wrap;
+  }
+
   function renderPermissionCard(sessionId, ev) {
     var card = document.createElement('div');
     card.className = 'walle-perm-card';
@@ -2380,15 +3668,7 @@ window.WalleSession = (function() {
             permId: ev.permId,
             decision: decision,
           });
-          // Mark card as resolved
-          card.classList.add('resolved');
-          if (decision === 'deny') {
-            card.classList.add('perm-denied');
-            card.setAttribute('data-resolved', 'Denied');
-          } else {
-            card.classList.add('perm-approved');
-            card.setAttribute('data-resolved', decision === 'allow_always' ? 'Allowed (always)' : 'Allowed (once)');
-          }
+          markPermissionCardResolved(card, decision === 'deny' ? 'deny' : decision, '');
         };
       })(buttons[i]));
     }
@@ -2396,6 +3676,38 @@ window.WalleSession = (function() {
     return card;
   }
 
+  // Apply the resolved visual state to a permission card. `decision` is the
+  // card's button decision (allow_once/allow_always/deny) or a backend decision
+  // (allow/deny); `label` overrides the badge text when provided.
+  function markPermissionCardResolved(card, decision, label) {
+    if (!card || card.classList.contains('resolved')) return;
+    card.classList.add('resolved');
+    var denied = decision === 'deny' || decision === 'reject';
+    if (denied) {
+      card.classList.add('perm-denied');
+      card.setAttribute('data-resolved', label || 'Denied');
+    } else {
+      card.classList.add('perm-approved');
+      var allowedLabel = label || (decision === 'allow_always' || decision === 'always'
+        ? 'Allowed (always)'
+        : 'Allowed (once)');
+      card.setAttribute('data-resolved', allowedLabel);
+    }
+    var btns = card.querySelectorAll('.walle-perm-actions button');
+    for (var b = 0; b < btns.length; b++) btns[b].disabled = true;
+  }
+
+  // Render a permission card from persisted history. Pending cards stay
+  // actionable (reply re-routes to the same handler); resolved cards render in
+  // their final state with the decision badge and disabled buttons.
+  function renderPermissionCardForHistory(sessionId, permission) {
+    var card = renderPermissionCard(sessionId, permission);
+    if (permission && permission.status === 'resolved') {
+      markPermissionCardResolved(card, permission.decision || 'allow', '');
+    }
+    return card;
+  }
+
   // ---------- sendMessage ----------
   function resolveContextSessionId(id) {
     var preferred = state.lastActiveWorkSessionId || state._savedActiveSession || '';
@@ -2428,10 +3740,12 @@ window.WalleSession = (function() {
     ws.messages.push(msg);
     ws.messageCount++;
     recordLiveRoleDelivery(ws, 'user');
+    if (hasBranchSnapshot(ws)) saveWalleBranchSnapshot(id);
 
     var messagesArea = document.getElementById('walle-messages-' + id);
     if (messagesArea) {
-      renderMessage(messagesArea, msg);
+      if (restartVisibleMessageRenderIfBusy(id, ws)) return msg;
+      renderMessage(messagesArea, msg, ws.messages.length - 1);
       syncPromptMessageDomIndices(id);
       updatePromptNav(id);
       scrollToBottom(messagesArea);
@@ -2439,6 +3753,145 @@ window.WalleSession = (function() {
     return msg;
   }
 
+  function rerenderWalleSessionPreservingComposer(id, focusSelector) {
+    var composerSnapshot = captureComposerState(id);
+    renderSession(id);
+    restoreComposerState(id, composerSnapshot);
+    if (focusSelector) {
+      setTimeout(function() {
+        var root = document.getElementById('walle-session-' + id);
+        var target = root && root.querySelector(focusSelector);
+        if (target && typeof target.focus === 'function') {
+          target.focus();
+          if (target.setSelectionRange) {
+            var len = target.value ? target.value.length : 0;
+            target.setSelectionRange(len, len);
+          }
+        }
+      }, 0);
+    }
+  }
+
+  function editMessage(id, messageIndex) {
+    var ws = getState(id);
+    if (!ws) return;
+    if (ws.isGenerating) {
+      if (typeof toast === 'function') toast('Stop Wall-E before editing history.', { type: 'warning', duration: 2500 });
+      return;
+    }
+    var msg = ws.messages[messageIndex];
+    if (!msg || msg.role !== 'user') return;
+    ws.editingMessageIndex = messageIndex;
+    rerenderWalleSessionPreservingComposer(id, '.walle-edit-input');
+  }
+
+  function cancelEdit(id) {
+    var ws = getState(id);
+    if (!ws) return;
+    ws.editingMessageIndex = -1;
+    rerenderWalleSessionPreservingComposer(id);
+  }
+
+  function submitEdit(id, messageIndex) {
+    var ws = getState(id);
+    if (!ws) return;
+    if (ws.isGenerating) {
+      if (typeof toast === 'function') toast('Stop Wall-E before editing history.', { type: 'warning', duration: 2500 });
+      return;
+    }
+    var root = document.getElementById('walle-session-' + id);
+    var textarea = root && root.querySelector('.walle-edit-input');
+    var text = String(textarea && textarea.value || '').trim();
+    var original = ws.messages[messageIndex];
+    if (!original || original.role !== 'user') return;
+    var attachments = Array.isArray(original.attachments) ? cloneJsonSafe(original.attachments, []) : [];
+    if (!text && !attachments.length) {
+      if (typeof toast === 'function') toast('Edited prompt is empty.', { type: 'warning', duration: 2000 });
+      return;
+    }
+
+    var oldTail = ws.messages.slice(messageIndex).map(cloneBranchMessage);
+    var key = String(messageIndex);
+    var branches = Array.isArray(ws.branches[key]) ? ws.branches[key] : null;
+    if (!branches) {
+      branches = [oldTail];
+      ws.branches[key] = branches;
+      ws.branchActive[key] = 1;
+    } else {
+      var current = Number(ws.branchActive[key] || 0);
+      if (!Number.isFinite(current) || current < 0 || current >= branches.length) current = 0;
+      branches[current] = oldTail;
+      ws.branchActive[key] = branches.length;
+    }
+
+    var editedMessage = cloneBranchMessage(original);
+    editedMessage.content = text;
+    editedMessage.timestamp = Date.now();
+    editedMessage.attachments = attachments;
+    branches.push([editedMessage]);
+    clearBranchesAfter(ws, messageIndex, false);
+
+    ws.messages = ws.messages.slice(0, messageIndex).map(cloneBranchMessage).concat([editedMessage]);
+    ws.messageCount = ws.messages.length;
+    ws.editingMessageIndex = -1;
+    markBranchHistoryAuthoritative(ws);
+    recordLiveRoleDelivery(ws, 'user');
+    rerenderWalleSessionPreservingComposer(id);
+    saveWalleBranchSnapshot(id);
+
+    sendOutboundMessage(id, text, attachments, {
+      appendUser: false,
+      recordHistory: true,
+      outboundText: appendAttachmentReferences(text, attachments),
+      timestamp: editedMessage.timestamp
+    });
+  }
+
+  function deleteFromPrompt(id, messageIndex) {
+    var ws = getState(id);
+    if (!ws) return;
+    if (ws.isGenerating) {
+      if (typeof toast === 'function') toast('Stop Wall-E before deleting history.', { type: 'warning', duration: 2500 });
+      return;
+    }
+    var msg = ws.messages[messageIndex];
+    if (!msg || msg.role !== 'user') return;
+    var ok = window.confirm('Delete this prompt and all messages after it? This truncates the active conversation. Existing earlier prompt versions are kept.');
+    if (!ok) return;
+    ws.messages = ws.messages.slice(0, messageIndex).map(cloneBranchMessage);
+    ws.messageCount = ws.messages.length;
+    ws.editingMessageIndex = -1;
+    clearBranchesAfter(ws, messageIndex, true);
+    refreshActiveBranchSlots(ws);
+    markBranchHistoryAuthoritative(ws);
+    rerenderWalleSessionPreservingComposer(id);
+    saveWalleBranchSnapshot(id);
+  }
+
+  function switchBranch(id, messageIndex, direction) {
+    var ws = getState(id);
+    if (!ws || ws.isGenerating) {
+      if (ws && ws.isGenerating && typeof toast === 'function') toast('Stop Wall-E before switching prompt versions.', { type: 'warning', duration: 2500 });
+      return;
+    }
+    var key = String(messageIndex);
+    var branches = ws.branches[key];
+    if (!Array.isArray(branches) || branches.length <= 1) return;
+    var current = Number(ws.branchActive[key] || 0);
+    if (!Number.isFinite(current) || current < 0 || current >= branches.length) current = 0;
+    var next = current + direction;
+    if (next < 0 || next >= branches.length) return;
+    branches[current] = ws.messages.slice(messageIndex).map(cloneBranchMessage);
+    ws.branchActive[key] = next;
+    ws.messages = ws.messages.slice(0, messageIndex).map(cloneBranchMessage).concat(normalizeBranchTail(branches[next]));
+    ws.messageCount = ws.messages.length;
+    ws.editingMessageIndex = -1;
+    clearBranchesAfter(ws, messageIndex, false);
+    markBranchHistoryAuthoritative(ws);
+    rerenderWalleSessionPreservingComposer(id);
+    saveWalleBranchSnapshot(id);
+  }
+
   function recordLiveRoleDelivery(ws, role) {
     if (!ws || !role) return;
     if (!ws._lastLiveRoleAt) ws._lastLiveRoleAt = {};
@@ -2467,6 +3920,27 @@ window.WalleSession = (function() {
     return false;
   }
 
+  function isOpenTurnActivityMessage(msg) {
+    if (!msg || !msg.liveActivity) return false;
+    var meta = msg.metadata || {};
+    if (meta.source === 'walle-open-turn-activity') return true;
+    var content = String(msg.content || msg.text || '').trim();
+    return msg.role === 'system' && content.indexOf('Wall-E is working on this prompt.') === 0;
+  }
+
+  function captureLiveTurnState(id, ws) {
+    if (!ws || !ws.isGenerating) return null;
+    var messagesArea = document.getElementById('walle-messages-' + id);
+    var hasLiveDom = !!(messagesArea && messagesArea.querySelector('.walle-live-activity, .walle-thinking'));
+    var assistant = ws._currentAssistant || null;
+    var hasAssistantActivity = !!(assistant && Array.isArray(assistant.toolCalls) && assistant.toolCalls.length);
+    if (!hasOpenUserTurn(ws) && !hasLiveDom && !hasAssistantActivity) return null;
+    return {
+      currentAssistant: assistant,
+      hadLiveDom: hasLiveDom || hasAssistantActivity
+    };
+  }
+
   function ensurePendingThinking(id) {
     var ws = getState(id);
     var messagesArea = document.getElementById('walle-messages-' + id);
@@ -2487,8 +3961,7 @@ window.WalleSession = (function() {
       var latestSession = state.sessions.get(id);
       if (!latestSession || !walleSessionIsActive(id)) return;
       latestSession.needsAttach = false;
-      latestSession._walleHistoryRequested = true;
-      send({ type: 'attach', id: id, reason: reason || 'walle-transcript-append' });
+      requestHistory(id, reason || 'walle-transcript-append', { force: true, noCache: true });
     }, TRANSCRIPT_ATTACH_DEBOUNCE_MS);
   }
 
@@ -2503,15 +3976,633 @@ window.WalleSession = (function() {
     return Promise.resolve();
   }
 
+  var WORK_ACTIVE_STATUSES = { queued: true, running: true, stopping: true };
+
+  function normalizeWorkState(raw, id) {
+    raw = raw && typeof raw === 'object' ? raw : {};
+    var tasks = Array.isArray(raw.tasks) ? raw.tasks : [];
+    var active = Array.isArray(raw.active) ? raw.active : tasks.filter(function(task) {
+      return !!WORK_ACTIVE_STATUSES[String(task && task.status || '').toLowerCase()];
+    });
+    var recent = Array.isArray(raw.recent) ? raw.recent : tasks.filter(function(task) {
+      return !WORK_ACTIVE_STATUSES[String(task && task.status || '').toLowerCase()];
+    });
+    var counts = raw.counts && typeof raw.counts === 'object' ? raw.counts : {};
+    return {
+      sessionId: raw.sessionId || raw.id || id,
+      updatedAt: Number(raw.updatedAt || Date.now()),
+      tasks: tasks,
+      active: active,
+      recent: recent,
+      counts: {
+        running: Number(counts.running || active.length || 0),
+        shells: Number(counts.shells || 0),
+        agents: Number(counts.agents || 0),
+        tools: Number(counts.tools || 0),
+        skills: Number(counts.skills || 0),
+        queued: Number(counts.queued || 0)
+      },
+      isolation: raw.isolation || null
+    };
+  }
+
+  function workStateHasSignal(work) {
+    if (!work) return false;
+    var counts = work.counts || {};
+    return (work.active && work.active.length)
+      || (work.recent && work.recent.length)
+      || Number(counts.queued || 0) > 0;
+  }
+
+  function workKindLabel(kind) {
+    var key = String(kind || '').toLowerCase();
+    if (key === 'shell') return 'shell';
+    if (key === 'agent') return 'agent';
+    if (key === 'skill') return 'skill';
+    if (key === 'turn') return 'turn';
+    return 'tool';
+  }
+
+  function workTaskAge(task) {
+    var start = Number(task && (task.startedAt || task.started_at) || 0);
+    if (!start) return '';
+    var ms = Math.max(0, Date.now() - start);
+    if (ms < 1000) return 'now';
+    if (ms < 60000) return Math.floor(ms / 1000) + 's';
+    if (ms < 3600000) return Math.floor(ms / 60000) + 'm';
+    return Math.floor(ms / 3600000) + 'h';
+  }
+
+  function workChip(label, value, tone) {
+    var chip = document.createElement('span');
+    chip.className = 'walle-work-chip' + (tone ? ' ' + tone : '');
+    chip.textContent = value ? label + ' ' + value : label;
+    return chip;
+  }
+
+  function createWorkTaskRow(id, task) {
+    task = task || {};
+    var row = document.createElement('div');
+    row.className = 'walle-work-row ' + String(task.status || 'running').toLowerCase();
+
+    var dot = document.createElement('span');
+    dot.className = 'walle-work-dot';
+    row.appendChild(dot);
+
+    var body = document.createElement('span');
+    body.className = 'walle-work-row-body';
+    var title = document.createElement('span');
+    title.className = 'walle-work-row-title';
+    title.textContent = task.label || task.summary || task.toolName || workKindLabel(task.kind);
+    body.appendChild(title);
+    var meta = document.createElement('span');
+    meta.className = 'walle-work-row-meta';
+    meta.textContent = [
+      workKindLabel(task.kind),
+      task.status || 'running',
+      task.workerScope || task.worker_scope || '',
+      workTaskAge(task)
+    ].filter(Boolean).join(' · ');
+    body.appendChild(meta);
+    if (task.inputPreview || task.input_preview || task.summary) {
+      var preview = document.createElement('span');
+      preview.className = 'walle-work-row-preview';
+      preview.textContent = task.inputPreview || task.input_preview || task.summary || '';
+      body.appendChild(preview);
+    }
+    row.appendChild(body);
+
+    var actions = document.createElement('span');
+    actions.className = 'walle-work-row-actions';
+    var view = document.createElement('button');
+    view.type = 'button';
+    view.textContent = 'View';
+    view.onclick = function() {
+      var area = document.getElementById('walle-messages-' + id);
+      var live = area && area.querySelector('.walle-live-activity, .walle-tool-group, .walle-thinking');
+      (live || area)?.scrollIntoView?.({ behavior: 'smooth', block: 'nearest' });
+      if (live && live.classList) live.classList.add('walle-work-focus');
+      setTimeout(function() { if (live && live.classList) live.classList.remove('walle-work-focus'); }, 1200);
+    };
+    actions.appendChild(view);
+    if (task.kind === 'turn' && WORK_ACTIVE_STATUSES[String(task.status || '').toLowerCase()]) {
+      var stop = document.createElement('button');
+      stop.type = 'button';
+      stop.className = 'danger';
+      stop.textContent = 'Stop';
+      stop.onclick = function() { send({ type: 'walle-cancel', id: id }); };
+      actions.appendChild(stop);
+    }
+    row.appendChild(actions);
+    return row;
+  }
+
+  function renderWorkDrawer(id, root, work) {
+    var drawer = document.createElement('div');
+    drawer.className = 'walle-work-drawer';
+    var headline = document.createElement('div');
+    headline.className = 'walle-work-drawer-head';
+    var title = document.createElement('strong');
+    title.textContent = 'Runtime work';
+    headline.appendChild(title);
+    var note = document.createElement('span');
+    note.textContent = 'metadata only · output stays in worker/runtime logs';
+    headline.appendChild(note);
+    drawer.appendChild(headline);
+
+    var active = (work.active || []).slice(0, 16);
+    var recent = (work.recent || []).slice(0, 8);
+    var groups = [
+      { label: 'Active', rows: active },
+      { label: 'Recent', rows: recent }
+    ];
+    groups.forEach(function(group) {
+      if (!group.rows.length) return;
+      var groupEl = document.createElement('div');
+      groupEl.className = 'walle-work-group';
+      var groupTitle = document.createElement('div');
+      groupTitle.className = 'walle-work-group-title';
+      groupTitle.textContent = group.label;
+      groupEl.appendChild(groupTitle);
+      group.rows.forEach(function(task) { groupEl.appendChild(createWorkTaskRow(id, task)); });
+      drawer.appendChild(groupEl);
+    });
+    if (!active.length && !recent.length) {
+      var empty = document.createElement('div');
+      empty.className = 'walle-work-empty';
+      empty.textContent = 'No runtime work is active for this session.';
+      drawer.appendChild(empty);
+    }
+    root.appendChild(drawer);
+  }
+
+  function renderWorkBar(id) {
+    var ws = getState(id);
+    var slot = document.getElementById('walle-workbar-' + id);
+    if (!ws || !slot) return;
+    var work = normalizeWorkState(ws.workState, id);
+    while (slot.firstChild) slot.removeChild(slot.firstChild);
+    if (!workStateHasSignal(work) && !ws.workDrawerOpen) {
+      slot.style.display = 'none';
+      return;
+    }
+    slot.style.display = 'block';
+
+    var root = document.createElement('div');
+    root.className = 'walle-workbar' + (ws.workDrawerOpen ? ' expanded' : '');
+
+    var rail = document.createElement('div');
+    rail.className = 'walle-workbar-rail';
+    var kicker = document.createElement('span');
+    kicker.className = 'walle-workbar-kicker';
+    kicker.textContent = 'WORK';
+    rail.appendChild(kicker);
+
+    var counts = work.counts || {};
+    if (counts.running) rail.appendChild(workChip('running', counts.running, 'active'));
+    if (counts.shells) rail.appendChild(workChip('shell', counts.shells, 'shell'));
+    if (counts.agents) rail.appendChild(workChip('agent', counts.agents, 'agent'));
+    if (counts.tools) rail.appendChild(workChip('tool', counts.tools, 'tool'));
+    if (counts.skills) rail.appendChild(workChip('skill', counts.skills, 'skill'));
+    // (queued count intentionally omitted — queued prompts now render inline as
+    // pending bubbles + a status line above the composer, not as a work-bar chip)
+    if (!counts.running && work.recent && work.recent.length) rail.appendChild(workChip('recent', work.recent.length, 'done'));
+    rail.appendChild(workChip('isolated', '', 'isolated'));
+    root.appendChild(rail);
+
+    var summary = document.createElement('div');
+    summary.className = 'walle-workbar-summary';
+    var focusTask = (work.active && work.active[0]) || (work.recent && work.recent[0]) || null;
+    summary.textContent = focusTask
+      ? (focusTask.summary || focusTask.label || 'Runtime work updated')
+      : 'Runtime work is idle.';
+    root.appendChild(summary);
+
+    var actions = document.createElement('div');
+    actions.className = 'walle-workbar-actions';
+    var manage = document.createElement('button');
+    manage.type = 'button';
+    manage.className = 'walle-workbar-manage';
+    manage.textContent = ws.workDrawerOpen ? 'Hide' : 'Manage';
+    manage.onclick = function() {
+      var latest = getState(id);
+      if (!latest) return;
+      latest.workDrawerOpen = !latest.workDrawerOpen;
+      renderWorkBar(id);
+    };
+    actions.appendChild(manage);
+    if (work.active && work.active.some(function(task) { return task.kind === 'turn'; })) {
+      var stop = document.createElement('button');
+      stop.type = 'button';
+      stop.className = 'walle-workbar-stop';
+      stop.textContent = 'Stop';
+      stop.onclick = function() { send({ type: 'walle-cancel', id: id }); };
+      actions.appendChild(stop);
+    }
+    root.appendChild(actions);
+    if (ws.workDrawerOpen) renderWorkDrawer(id, root, work);
+    slot.appendChild(root);
+  }
+
+  function confirmCancelActiveRun(id, event) {
+    var ws = getState(id);
+    if (!ws || !ws.isGenerating || _cancelConfirmationOpen) return false;
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    _cancelConfirmationOpen = true;
+    var accepted = false;
+    try {
+      accepted = window.confirm('Stop the current Wall-E run?');
+    } finally {
+      _cancelConfirmationOpen = false;
+    }
+    if (!accepted) return true;
+    send({ type: 'walle-cancel', id: id });
+    return true;
+  }
+
+  function hasEscapeDismissibleWalleUi() {
+    var picker = document.getElementById('slash-picker');
+    if (picker && picker.style && picker.style.display !== 'none') return true;
+    if (_walleModelPicker && _walleModelPicker.el && document.body.contains(_walleModelPicker.el)) return true;
+    return false;
+  }
+
+  function handleGlobalEscape(id, event) {
+    if (!id || !event || event.defaultPrevented) return false;
+    if (event.key !== 'Escape' || event.metaKey || event.ctrlKey || event.altKey) return false;
+    if (hasEscapeDismissibleWalleUi()) return false;
+    return confirmCancelActiveRun(id, event);
+  }
+
+  function handleWorkState(msg) {
+    var id = msg && (msg.sessionId || msg.id);
+    if (!id) return;
+    var ws = getState(id);
+    if (!ws) return;
+    ws.workState = normalizeWorkState(msg.state || msg.workState || msg, id);
+    renderWorkBar(id);
+  }
+
+  function queueApiUrl(path) {
+    return path;
+  }
+
+  function queueItemIsActive(item) {
+    var status = String(item && item.status || 'pending').toLowerCase();
+    return status !== 'sent' && status !== 'skipped';
+  }
+
+  function activeQueueItems(queue) {
+    var items = queue && Array.isArray(queue.items) ? queue.items : [];
+    return items.filter(queueItemIsActive);
+  }
+
+  function selectedQueueItem(queue) {
+    if (!queue) return null;
+    var items = queue.items || [];
+    var current = items[queue.currentIndex];
+    if (queueItemIsActive(current)) return current;
+    var active = activeQueueItems(queue);
+    return active.length ? active[0] : null;
+  }
+
+  function queueTitleForText(text) {
+    var compact = String(text || '').replace(/\s+/g, ' ').trim();
+    return compact ? compact.slice(0, 88) : 'Queued prompt';
+  }
+
+  function queueStateRevisionValue(value) {
+    var raw = Number(value && value.revision);
+    return Number.isFinite(raw) ? raw : null;
+  }
+
+  function shouldApplyQueueState(ws, msg) {
+    if (!ws || !msg || !msg.sessionId) return true;
+    var current = ws.queueState;
+    if (!current || current.sessionId !== msg.sessionId) return true;
+    var nextRevision = queueStateRevisionValue(msg);
+    var currentRevision = queueStateRevisionValue(current);
+    if (nextRevision === null || currentRevision === null) return true;
+    return nextRevision >= currentRevision;
+  }
+
+  function normalizeQueueImage(att, idx) {
+    att = att || {};
+    return {
+      type: att.type || 'image',
+      name: att.name || att.filename || ('image-' + (idx + 1) + '.png'),
+      filename: att.filename || att.name || '',
+      data: att.data || '',
+      label: att.label || ('[Image #' + (idx + 1) + ']'),
+      url: att.url || '',
+      path: att.path || att.file_path || '',
+      mediaType: att.mediaType || att.mimeType || '',
+      imageWidth: att.imageWidth || null,
+      imageHeight: att.imageHeight || null,
+      originalWidth: att.originalWidth || null,
+      originalHeight: att.originalHeight || null,
+      resizedForProvider: !!att.resizedForProvider
+    };
+  }
+
+  // POST a queue action (next/mode/remove…) and refresh the inline UI.
+  function queuePostAction(id, action, payload) {
+    var ws = getState(id);
+    return fetch(queueApiUrl('/api/queues/' + encodeURIComponent(id) + '/' + action), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + ((state && state.token) || '') },
+      body: payload ? JSON.stringify(payload) : undefined,
+    }).then(function(r) { return r.ok ? r.json() : null; })
+      .then(function(data) { if (data && ws) { ws.queueState = data; renderQueuePreview(id); renderPendingQueueBubbles(id); } })
+      .catch(function() {});
+  }
+
+  function removeQueuedItem(id, itemId, activeCount) {
+    // Removing the last active item == cancel the whole queue (clears state cleanly).
+    if (activeCount <= 1) { cancelQueuedMessages(id); return; }
+    queuePostAction(id, 'remove', { itemId: itemId });
+  }
+
+  // Edit a queued prompt: pull its text + images back into the composer and drop
+  // it from the queue, so the user re-sends after tweaking.
+  function editQueuedItem(id, item, activeCount) {
+    var ws = getState(id);
+    if (!ws) return;
+    var container = document.getElementById('walle-session-' + id);
+    var textarea = container && container.querySelector('.walle-input');
+    if (textarea) {
+      textarea.value = String(item.text || '');
+      if (typeof syncComposerChrome === 'function') syncComposerChrome(id, textarea);
+    }
+    ws.inputAttachments = (Array.isArray(item.images) ? item.images : []).map(function(im, i) { return normalizeQueueImage(im, i); });
+    renderComposerAttachments(id);
+    removeQueuedItem(id, item.id, activeCount);
+    focusInput(id);
+  }
+
+  // Render queued prompts INLINE in the conversation as faded "You · queued"
+  // bubbles pinned to the bottom of the message list (CSS order keeps them last
+  // even while Wall-E streams). This is where the user typed them, so they read
+  // as the natural continuation of the conversation — not a separate banner.
+  // Standard HTML5 drag-reorder helper: the pending bubble whose midpoint sits
+  // just below the cursor (the dragged element goes before it).
+  function getDragAfterElement(container, y) {
+    var els = Array.prototype.slice.call(container.querySelectorAll('.walle-msg-pending:not(.dragging)'));
+    var closest = { offset: -Infinity, element: null };
+    els.forEach(function(child) {
+      var box = child.getBoundingClientRect();
+      var offset = y - box.top - box.height / 2;
+      if (offset < 0 && offset > closest.offset) closest = { offset: offset, element: child };
+    });
+    return closest.element;
+  }
+
+  function reorderQueuedItems(id) {
+    var container = document.getElementById('walle-pending-' + id);
+    if (!container) return;
+    var order = Array.prototype.map.call(
+      container.querySelectorAll('.walle-msg-pending'),
+      function(el) { return el.dataset.queueItemId; }
+    ).filter(Boolean);
+    if (order.length) queuePostAction(id, 'reorder', { order: order });
+  }
+
+  function renderPendingQueueBubbles(id) {
+    var ws = getState(id);
+    var messagesArea = document.getElementById('walle-messages-' + id);
+    if (!ws || !messagesArea) return;
+    var container = document.getElementById('walle-pending-' + id);
+    var active = activeQueueItems(ws.queueState);
+    if (!active.length) { if (container) container.remove(); return; }
+    if (!container) {
+      container = document.createElement('div');
+      container.className = 'walle-pending-queue';
+      container.id = 'walle-pending-' + id;
+    }
+    while (container.firstChild) container.removeChild(container.firstChild);
+    messagesArea.appendChild(container); // re-append → stays last (also order:9999 in CSS)
+
+    // Drag-to-reorder: live-move the dragged bubble, persist the new order on drop.
+    container.ondragover = function(ev) {
+      ev.preventDefault();
+      var dragging = container.querySelector('.walle-msg-pending.dragging');
+      if (!dragging) return;
+      var after = getDragAfterElement(container, ev.clientY);
+      if (after == null) container.appendChild(dragging);
+      else if (after !== dragging) container.insertBefore(dragging, after);
+    };
+    container.ondrop = function(ev) { ev.preventDefault(); reorderQueuedItems(id); };
+
+    var reorderable = active.length > 1;
+    active.forEach(function(item, idx) {
+      var sending = String(item.status || '').toLowerCase() === 'sending';
+      var el = document.createElement('div');
+      el.className = 'walle-msg walle-msg-pending' + (sending ? ' sending' : '');
+      el.dataset.queueItemId = item.id;
+      if (reorderable && !sending) {
+        el.draggable = true;
+        el.addEventListener('dragstart', function(ev) {
+          el.classList.add('dragging');
+          try { ev.dataTransfer.effectAllowed = 'move'; ev.dataTransfer.setData('text/plain', item.id); } catch (_) {}
+        });
+        el.addEventListener('dragend', function() { el.classList.remove('dragging'); });
+      }
+
+      var avatar = document.createElement('div');
+      avatar.className = 'walle-msg-avatar user';
+      avatar.textContent = 'U';
+      el.appendChild(avatar);
+
+      var body = document.createElement('div');
+      body.style.flex = '1'; body.style.minWidth = '0';
+
+      var hdr = document.createElement('div');
+      hdr.className = 'walle-msg-header';
+      var name = document.createElement('span');
+      name.className = 'walle-msg-name';
+      name.textContent = 'You';
+      hdr.appendChild(name);
+      var badge = document.createElement('span');
+      badge.className = 'walle-pending-badge';
+      badge.textContent = sending ? 'sending…'
+        : (active.length > 1 ? ('queued · ' + (idx + 1) + '/' + active.length) : 'queued');
+      hdr.appendChild(badge);
+      if (!sending) {
+        var actions = document.createElement('span');
+        actions.className = 'walle-pending-actions';
+        var editBtn = document.createElement('button');
+        editBtn.type = 'button'; editBtn.className = 'walle-pending-action';
+        editBtn.title = 'Edit — move back to the composer'; editBtn.textContent = '✎';
+        editBtn.onclick = (function(it, cnt) { return function(e) { e.preventDefault(); editQueuedItem(id, it, cnt); }; })(item, active.length);
+        actions.appendChild(editBtn);
+        var cancelBtn = document.createElement('button');
+        cancelBtn.type = 'button'; cancelBtn.className = 'walle-pending-action danger';
+        cancelBtn.title = 'Remove from queue'; cancelBtn.textContent = '✕';
+        cancelBtn.onclick = (function(it, cnt) { return function(e) { e.preventDefault(); removeQueuedItem(id, it.id, cnt); }; })(item, active.length);
+        actions.appendChild(cancelBtn);
+        hdr.appendChild(actions);
+      }
+      body.appendChild(hdr);
+
+      var content = document.createElement('div');
+      content.className = 'walle-msg-content walle-pending-content';
+      content.textContent = String(item.text || item.title || 'Queued prompt');
+      body.appendChild(content);
+
+      if (Array.isArray(item.images) && item.images.length) {
+        body.appendChild(renderAttachmentStrip(id, item.images, false));
+      }
+
+      el.appendChild(body);
+      container.appendChild(el);
+    });
+  }
+
+  // A thin one-line status above the composer (replaces the bulky yellow card).
+  // The per-item controls live on the inline bubbles; this just shows count +
+  // mode + cancel-all, and a "Send next" when in manual mode.
+  function renderQueuePreview(id) {
+    var ws = getState(id);
+    var slot = document.getElementById('walle-queue-preview-' + id);
+    if (!ws || !slot) return;
+    while (slot.firstChild) slot.removeChild(slot.firstChild);
+
+    var queue = ws.queueState;
+    var active = activeQueueItems(queue);
+    if (!queue || queue.status === 'idle' || queue.status === 'done' || active.length === 0) {
+      slot.style.display = 'none';
+      return;
+    }
+    var mode = String(queue.mode || 'auto').toLowerCase();
+    var n = active.length;
+
+    var bar = document.createElement('div');
+    bar.className = 'walle-queue-status' + (queue.waitingMessage ? ' waiting' : '');
+
+    var label = document.createElement('span');
+    label.className = 'walle-queue-status-label';
+    label.textContent = queue.waitingMessage
+      ? queue.waitingMessage
+      : (n + (n === 1 ? ' message queued — ' : ' messages queued — ')
+          + (mode === 'manual' ? 'manual send' : 'auto-sends when Wall-E is idle'));
+    bar.appendChild(label);
+
+    var actions = document.createElement('span');
+    actions.className = 'walle-queue-status-actions';
+    if (mode === 'manual') {
+      var nextBtn = document.createElement('button');
+      nextBtn.type = 'button'; nextBtn.className = 'walle-queue-status-btn';
+      nextBtn.textContent = 'Send next';
+      nextBtn.onclick = function() { queuePostAction(id, 'next'); };
+      actions.appendChild(nextBtn);
+    }
+    var modeBtn = document.createElement('button');
+    modeBtn.type = 'button'; modeBtn.className = 'walle-queue-status-btn';
+    modeBtn.textContent = mode === 'manual' ? 'Auto' : 'Manual';
+    modeBtn.title = 'Switch to ' + (mode === 'manual' ? 'auto' : 'manual') + ' sending';
+    modeBtn.onclick = function() { queuePostAction(id, 'mode', { mode: mode === 'manual' ? 'auto' : 'manual' }); };
+    actions.appendChild(modeBtn);
+    var cancelBtn = document.createElement('button');
+    cancelBtn.type = 'button'; cancelBtn.className = 'walle-queue-status-btn danger';
+    cancelBtn.textContent = 'Cancel all';
+    cancelBtn.onclick = function() { cancelQueuedMessages(id); };
+    actions.appendChild(cancelBtn);
+    bar.appendChild(actions);
+
+    slot.style.display = 'block';
+    slot.appendChild(bar);
+  }
+
+  function handleQueueState(msg) {
+    var id = msg && (msg.sessionId || msg.id);
+    if (!id) return;
+    var ws = getState(id);
+    if (!ws) return;
+    if (!shouldApplyQueueState(ws, msg)) return;
+    ws.queueState = msg;
+    renderQueuePreview(id);
+    renderPendingQueueBubbles(id);
+  }
+
+  async function cancelQueuedMessages(id) {
+    var ws = getState(id);
+    try {
+      var res = await fetch(queueApiUrl('/api/queues/' + encodeURIComponent(id)), {
+        method: 'DELETE',
+        headers: { 'Authorization': 'Bearer ' + ((state && state.token) || '') }
+      });
+      if (!res.ok) throw new Error('Queue cancel failed');
+      if (ws) {
+        ws.queueState = { sessionId: id, status: 'idle', items: [] };
+        renderQueuePreview(id);
+      }
+      if (typeof toast === 'function') toast('Queued prompts cancelled', { type: 'info', duration: 1800 });
+    } catch (err) {
+      if (typeof toast === 'function') toast(err && err.message ? err.message : 'Queue cancel failed', { type: 'error' });
+    }
+  }
+
+  async function queueOutboundMessage(id, text, attachments, options) {
+    options = options || {};
+    var ws = getState(id);
+    if (!ws) return { ok: false, error: 'Wall-E session is not connected' };
+    if (ws.isQueueingMessage) return { ok: false, error: 'Already queueing this prompt' };
+    attachments = Array.isArray(attachments) ? attachments : [];
+    text = String(text || '').trim();
+    if (!text && !attachments.length) return { ok: false, error: 'Message is empty' };
+    if (!text && attachments.length) text = attachments.length === 1
+      ? 'Please use the attached image.'
+      : 'Please use the attached images.';
+
+    var queueText = options.outboundText || appendAttachmentReferences(text, attachments);
+    ws.isQueueingMessage = true;
+    try {
+      var res = await fetch(queueApiUrl('/api/queues'), {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': 'Bearer ' + ((state && state.token) || '')
+        },
+        body: JSON.stringify({
+          sessionId: id,
+          mode: 'auto',
+          append: true,
+          strategy: 'append',
+          autoStart: true,
+          items: [{
+            title: queueTitleForText(text || queueText),
+            text: queueText,
+            images: attachments.map(normalizeQueueImage)
+          }]
+        })
+      });
+      var data = await res.json().catch(function() { return {}; });
+      if (!res.ok || !data || !data.sessionId) throw new Error((data && data.error) || 'Failed to queue prompt');
+      ws.queueState = data;
+      renderQueuePreview(id);
+      if (options.recordHistory !== false) recordInputHistory(ws, text);
+      return { ok: true, state: data };
+    } catch (err) {
+      return { ok: false, error: err && err.message ? err.message : String(err || 'Failed to queue prompt') };
+    } finally {
+      ws.isQueueingMessage = false;
+    }
+  }
+
   function sendOutboundMessageNow(id, text, attachments, options, prepared) {
     var ws = getState(id);
     if (!ws) return;
     if (ws.isGenerating) return;
 
     if (options.recordHistory !== false) recordInputHistory(ws, text);
-    appendUserMessageToSession(id, text, attachments, options.timestamp);
+    if (options.appendUser !== false) {
+      appendUserMessageToSession(id, text, attachments, options.timestamp);
+    }
 
-    var model = ws.selectedModel || '';
+    var model = normalizeSessionModelId(ws.selectedModel || '');
     var modelItem = findModelItem(model) || findModelItem(ws.selectedModelRegistryId || '');
     var session = state.sessions.get(id);
     var meta = (session && session.meta) || {};
@@ -2522,14 +4613,35 @@ window.WalleSession = (function() {
       type: 'walle-message',
       id: id,
       text: prepared.outboundText,
-      attachments: attachments.filter(function(a) { return a && a.data; }).map(function(a) {
-        return { type: a.type || 'image', name: a.name || a.filename || 'image.png', data: a.data, label: a.label || undefined };
+      // Keep attachments that carry either inline base64 OR a disk reference.
+      // A reloaded branch message has no `data` (branchSafeAttachments strips
+      // it), but the image is still on disk — the server rehydrates the base64
+      // from path/url/filename via _hydrateWalleAttachment.
+      attachments: attachments.filter(function(a) {
+        return a && (a.data || a.url || a.path || a.file_path || a.filename);
+      }).map(function(a) {
+        return {
+          type: a.type || 'image',
+          name: a.name || a.filename || 'image.png',
+          filename: a.filename || a.name || '',
+          data: a.data || '',
+          label: a.label || undefined,
+          url: a.url || '',
+          path: a.path || a.file_path || '',
+          mediaType: a.mediaType || a.mimeType || '',
+          imageWidth: a.imageWidth || null,
+          imageHeight: a.imageHeight || null,
+          originalWidth: a.originalWidth || null,
+          originalHeight: a.originalHeight || null,
+          resizedForProvider: !!a.resizedForProvider
+        };
       }),
       model: model,
       provider: provider,
       modelPinned: modelPinned,
       allowProviderFallback: !modelPinned,
-      contextSessionId: resolveContextSessionId(id)
+      contextSessionId: resolveContextSessionId(id),
+      contextMessages: contextMessagesForModel(ws, prepared.outboundText)
     });
 
     ws.isGenerating = true;
@@ -2566,7 +4678,19 @@ window.WalleSession = (function() {
     return { ok: true };
   }
 
-  function sendMessage(id) {
+  // ⌘/Ctrl+Enter — "send now". Idle: send live immediately. Busy: interrupt the
+  // current run, then queue the message so it fires the instant Wall-E stops.
+  // (The server drops a walle-message received mid-run, so we route through the
+  // queue's send-when-ready path instead of racing the cancel.)
+  function sendNow(id) {
+    var ws = getState(id);
+    if (!ws || !ws.isGenerating) { sendMessage(id); return; }
+    try { send({ type: 'walle-cancel', id: id }); } catch (_) {}
+    if (typeof toast === 'function') toast('Interrupting Wall-E — sending your message next', { type: 'info' });
+    sendMessage(id); // still generating → queues (auto); fires once the run aborts
+  }
+
+  async function sendMessage(id) {
     var container = document.getElementById('walle-session-' + id);
     if (!container) return;
     var textarea = container.querySelector('.walle-input');
@@ -2577,12 +4701,36 @@ window.WalleSession = (function() {
 
     var ws = getState(id);
     if (!ws) return;
+    // Gate: don't send while a pasted image is still resizing/compressing —
+    // otherwise the text fires without its attachment.
+    if (hasPendingAttachments(ws)) {
+      if (typeof toast === 'function') toast('Image still compressing — one moment…', { type: 'info' });
+      return;
+    }
     var attachments = (ws.inputAttachments || []).slice();
+    if (ws.isGenerating) {
+      var queued = await queueOutboundMessage(id, text, attachments);
+      if (!queued.ok) {
+        if (queued.error !== 'Message is empty' && typeof toast === 'function') {
+          toast(queued.error || 'Failed to queue prompt', { type: 'error' });
+        }
+        return;
+      }
+      textarea.value = '';
+      clearComposerDraft(id, textarea);
+      syncComposerChrome(id, textarea);
+      ws.inputAttachments = [];
+      renderComposerAttachments(id);
+      focusInput(id);
+      return;
+    }
+
     var result = sendOutboundMessage(id, text, attachments);
     if (!result.ok) return;
 
     // Clear input
     textarea.value = '';
+    clearComposerDraft(id, textarea);
     syncComposerChrome(id, textarea);
     ws.inputAttachments = [];
     renderComposerAttachments(id);
@@ -2599,6 +4747,12 @@ window.WalleSession = (function() {
   function handleUser(msg) {
     var id = msg.id;
     var ws = getState(id);
+    try {
+      console.log('[queue-diag] client handleUser id=' + id + ' hasWs=' + !!ws
+        + ' contentLen=' + String(msg.content || msg.text || '').length
+        + ' areaExists=' + !!document.getElementById('walle-messages-' + id)
+        + ' activeTab=' + (typeof state !== 'undefined' && state.activeTab === id));
+    } catch (_) {}
     if (!ws) return;
     appendUserMessageToSession(id, msg.content || msg.text || '', msg.attachments || [], msg.timestamp);
     updateHeaderStats(id);
@@ -2712,9 +4866,18 @@ window.WalleSession = (function() {
 
       case 'permission_request':
         removeThinking(messagesArea);
-        var permCard = renderPermissionCard(id, ev);
-        messagesArea.appendChild(permCard);
-        scrollToBottom(messagesArea);
+        if (!ev.permId || !messagesArea.querySelector('#walle-perm-' + ev.permId)) {
+          var permCard = renderPermissionCard(id, ev);
+          messagesArea.appendChild(permCard);
+          scrollToBottom(messagesArea);
+        }
+        break;
+
+      case 'permission_resolved':
+        if (ev.permId) {
+          var resolvedCard = messagesArea.querySelector('#walle-perm-' + ev.permId);
+          if (resolvedCard) markPermissionCardResolved(resolvedCard, ev.decision || 'allow', '');
+        }
         break;
     }
   }
@@ -2751,12 +4914,20 @@ window.WalleSession = (function() {
     ws.isGenerating = false;
     recordLiveRoleDelivery(ws, 'assistant');
 
-    renderMessage(messagesArea, assistantMsg);
+    if (restartVisibleMessageRenderIfBusy(id, ws)) {
+      updateSendButton(id, false);
+      updateHeaderStats(id);
+      return;
+    }
+
+    renderMessage(messagesArea, assistantMsg, ws.messages.length - 1);
+    if (hasBranchSnapshot(ws)) saveWalleBranchSnapshot(id);
     syncPromptMessageDomIndices(id);
     updatePromptNav(id);
     scrollToBottom(messagesArea);
     updateSendButton(id, false);
     updateHeaderStats(id);
+    renderWorkBar(id);
     focusInput(id);
   }
 
@@ -2765,40 +4936,79 @@ window.WalleSession = (function() {
     var id = msg.id;
     var ws = getState(id);
     if (!ws) return;
+    var requestId = Number(msg.historyRequestId || 0);
+    var currentRequestId = Number(ws.historyRequestId || 0);
+    if (requestId && currentRequestId && requestId < currentRequestId) return;
     var composerSnapshot = captureComposerState(id);
+    var liveTurn = captureLiveTurnState(id, ws);
+    var messages = Array.isArray(msg.messages) ? msg.messages.slice() : [];
+    if (liveTurn) {
+      messages = messages.filter(function(m) { return !isOpenTurnActivityMessage(m); });
+    }
+    if (msg.error && (!Array.isArray(messages) || messages.length === 0)) {
+      ws.historyStatus = 'error';
+      ws.historyError = msg.error;
+      var errSession = state.sessions.get(id);
+      if (errSession) {
+        errSession._walleHistoryLoading = false;
+        errSession._walleHistoryLoaded = false;
+      }
+      renderSession(id);
+      restoreComposerState(id, composerSnapshot);
+      return;
+    }
 
     var session = state.sessions.get(id);
     if (session) {
       session.needsAttach = false;
       session._walleHistoryRequested = true;
+      session._walleHistoryLoading = false;
+      session._walleHistoryLoaded = true;
     }
+    markHistoryLoaded(id);
 
     ws.messages = [];
     ws.messageCount = 0;
     ws.totalCost = 0;
     ws._currentAssistant = null;
 
-    var messages = msg.messages || [];
     for (var i = 0; i < messages.length; i++) {
       var m = messages[i];
-      ws.messages.push({
+      var normalized = {
         role: m.role,
-        content: m.content || '',
+        content: m.content || m.text || '',
         model: m.model_id || m.model || '',
         latency_ms: m.latency_ms || 0,
         timestamp: m.created_at || m.timestamp || 0,
-        toolCalls: m.toolCalls || []
-      });
+        toolCalls: m.toolCalls || [],
+        attachments: Array.isArray(m.attachments) ? m.attachments : []
+      };
+      if (m.liveActivity) normalized.liveActivity = true;
+      if (m.agentLabel) normalized.agentLabel = m.agentLabel;
+      if (m.metadata) normalized.metadata = cloneJsonSafe(m.metadata, m.metadata);
+      if (m.runtimeDiagnostic) normalized.runtimeDiagnostic = cloneJsonSafe(m.runtimeDiagnostic, m.runtimeDiagnostic);
+      ws.messages.push(normalized);
       ws.messageCount++;
     }
+    if (liveTurn) {
+      ws.isGenerating = true;
+      ws._currentAssistant = liveTurn.currentAssistant;
+    }
+    var durableHistory = activeHistorySnapshot(ws);
+    applyBranchHistoryIfAuthoritative(ws, durableHistory);
     seedInputHistoryFromMessages(ws);
 
-    // Re-render if the session container exists (don't gate on activeTab —
-    // history may arrive before the tab is activated on reconnect)
-    if (document.getElementById('walle-session-' + id)) {
+    ws.renderPending = true;
+
+    // Re-render only when visible. A large Wall-E replay must not monopolize
+    // the browser while the user has already moved to an unrelated session.
+    if (document.getElementById('walle-session-' + id) && isWalleSessionVisible(id)) {
       renderSession(id);
       restoreComposerState(id, composerSnapshot);
       ensurePendingThinking(id);
+      if (liveTurn && liveTurn.currentAssistant) {
+        refreshLiveActivity(document.getElementById('walle-messages-' + id), id, ws);
+      }
     }
     updatePromptNav(id);
   }
@@ -2855,6 +5065,10 @@ window.WalleSession = (function() {
       message: issue.userMessage || issue.message || source.message || source.error || 'Wall-E could not get a response from the configured AI provider.',
       rawMessage: issue.rawMessage || '',
       provider: issue.provider || '',
+      providerId: issue.providerId || issue.provider_id || '',
+      registryId: issue.registryId || issue.registry_id || '',
+      routeLabel: issue.routeLabel || issue.route_label || '',
+      connectionKind: issue.connectionKind || issue.connection_kind || '',
       model: issue.model || '',
       status: issue.status || '',
       retryAfter: issue.retryAfter || '',
@@ -2878,6 +5092,10 @@ window.WalleSession = (function() {
 
     var detailLines = [];
     if (issue.status) detailLines.push('HTTP/status: ' + issue.status);
+    if (issue.routeLabel) detailLines.push('Route: ' + issue.routeLabel);
+    if (issue.providerId) detailLines.push('Provider ID: ' + issue.providerId);
+    if (issue.registryId) detailLines.push('Registry ID: ' + issue.registryId);
+    if (issue.connectionKind) detailLines.push('Connection: ' + issue.connectionKind);
     if (issue.provider) detailLines.push('Provider: ' + issue.provider);
     if (issue.model) detailLines.push('Model: ' + issue.model);
     if (issue.retryAfter) detailLines.push('Retry after: ' + issue.retryAfter);
@@ -2928,6 +5146,7 @@ window.WalleSession = (function() {
     messagesArea.appendChild(notice);
     scrollToBottom(messagesArea);
     updateSendButton(id, false);
+    renderWorkBar(id);
     focusInput(id);
   }
 
@@ -2943,7 +5162,11 @@ window.WalleSession = (function() {
       return Promise.resolve(_walleModelRegistryCache);
     }
     if (_walleModelRegistryPromise) return _walleModelRegistryPromise;
-    _walleModelRegistryPromise = fetch('/api/models/coding-availability', { cache: 'no-store' })
+    _walleModelRegistryPromise = fetch('/api/models/coding-catalog', { cache: 'no-store' })
+      .then(function(r) {
+        if (r.status === 404) return fetch('/api/models/coding-availability', { cache: 'no-store' });
+        return r;
+      })
       .then(function(r) {
         if (!r.ok) throw new Error('HTTP ' + r.status);
         return r.json();
@@ -2952,9 +5175,10 @@ window.WalleSession = (function() {
         if (data && data.error) throw new Error(data.error);
         var rows = Array.isArray(data) ? data : (Array.isArray(data?.models) ? data.models : []);
         _walleModelAvailabilityMeta = {
-          source: data?.source || 'live',
+          source: data?.source || 'catalog',
           generatedAt: data?.generated_at || '',
           providers: Array.isArray(data?.providers) ? data.providers : [],
+          counts: data?.counts || null,
           error: null
         };
         _walleModelRegistryCache = normalizeWalleModels(rows);
@@ -2964,9 +5188,10 @@ window.WalleSession = (function() {
       .catch(function(err) {
         invalidateWalleModelCache();
         _walleModelAvailabilityMeta = {
-          source: 'live',
+          source: 'catalog',
           generatedAt: '',
           providers: [],
+          counts: null,
           error: err && err.message ? err.message : String(err || 'Failed to load models')
         };
         return [];
@@ -2990,7 +5215,11 @@ window.WalleSession = (function() {
   }
 
   function stripModelAlias(label) {
-    return String(label || '').replace(/@\d{6,8}\b/g, '').replace(/\s+/g, ' ').trim();
+    return String(label || '').replace(/@(default|latest|\d{6,8})\b/gi, '').replace(/\s+/g, ' ').trim();
+  }
+
+  function normalizeSessionModelId(modelId) {
+    return String(modelId || '').trim().replace(/@(default|latest|20\d{6})$/i, '');
   }
 
   function isLegacyModel(m) {
@@ -3002,13 +5231,19 @@ window.WalleSession = (function() {
     for (var i = 0; i < models.length; i++) {
       var m = models[i];
       if (!m || m.enabled === 0 || m.enabled === false) continue;
-      if (m.available === false || m.coding_capable === false) continue;
+      if (m.selectable === false) continue;
+      if (m.selectable === undefined && (m.available === false || m.coding_capable === false)) continue;
       var provider = m.provider_type || m.provider || '';
       var label = String(m.display_name || m.model_id || m.id || '').trim();
       if (!label) continue;
+      var modelId = normalizeSessionModelId(m.model_id || m.modelId || m.id);
+      var catalogId = m.catalog_id || m.catalogId || ((provider || 'provider') + '|' + modelId);
       enabled.push({
-        id: m.id,
-        modelId: m.model_id || m.id,
+        id: catalogId,
+        catalogId: catalogId,
+        registryId: m.registry_id || m.registryId || '',
+        preferredRegistryId: m.preferred_registry_id || m.preferredRegistryId || '',
+        modelId: modelId,
         label: label,
         baseLabel: stripModelAlias(label),
         provider: provider,
@@ -3016,6 +5251,14 @@ window.WalleSession = (function() {
         providerLabel: m.provider_name || providerLabel(provider),
         capabilities: normalizeModelCapabilities(m.capabilities),
         source: m.source || 'live',
+        availabilityState: m.availability_state || m.availabilityState || (m.live_available ? 'available' : 'configured'),
+        liveAvailable: m.live_available === true || m.source === 'live' || m.source === 'live+registry',
+        routeMode: m.route_mode || m.routeMode || 'policy',
+        routeLabel: m.route_label || m.routeLabel || '',
+        routePolicy: m.route_policy || m.routePolicy || '',
+        routeProviderId: m.route_provider_id || m.routeProviderId || '',
+        routeProviderName: m.route_provider_name || m.routeProviderName || '',
+        routeConnectionKind: m.route_connection_kind || m.routeConnectionKind || '',
         codingCapable: m.coding_capable !== false,
         codingReason: m.coding_reason || '',
         speedTier: m.speed_tier || 3,
@@ -3055,7 +5298,7 @@ window.WalleSession = (function() {
     var byKey = {};
     for (var i = 0; i < items.length; i++) {
       var item = items[i];
-      var key = (item.provider || '') + '|' + item.baseLabel.toLowerCase();
+      var key = item.catalogId || ((item.provider || '') + '|' + item.modelId);
       if (!byKey[key]) byKey[key] = item;
     }
     return Object.keys(byKey).map(function(k) { return byKey[k]; });
@@ -3149,7 +5392,7 @@ window.WalleSession = (function() {
     var id = String(modelId);
     for (var i = 0; i < _walleModelRegistryCache.length; i++) {
       var item = _walleModelRegistryCache[i];
-      if (item.id === id || item.modelId === id) return item;
+      if (item.id === id || item.catalogId === id || item.modelId === id || item.registryId === id || item.preferredRegistryId === id) return item;
     }
     return null;
   }
@@ -3157,6 +5400,7 @@ window.WalleSession = (function() {
   function setSelectedModel(id, item) {
     var ws = getState(id);
     if (!ws) return;
+    var composerSnapshot = captureComposerState(id);
     ws.selectedModel = item ? item.modelId : '';
     ws.selectedModelRegistryId = item ? item.id : '';
     ws.selectedModelLabel = item ? item.baseLabel : '';
@@ -3165,19 +5409,23 @@ window.WalleSession = (function() {
     ws._modelManual = true;
     syncWalleModelButtons(id);
     if (item && typeof send === 'function') {
+      var exactRegistryId = item.routeMode === 'exact' ? (item.registryId || item.preferredRegistryId || '') : '';
       send({
         type: 'model-change',
         id: id,
         agent_type: 'walle',
         model_id: item.modelId,
         model_provider: item.provider,
-        model_registry_id: item.id || '',
-        model_provider_id: item.providerId || '',
+        model_registry_id: exactRegistryId,
+        model_provider_id: '',
+        model_route_mode: item.routeMode || 'policy',
         scope: 'session',
         pinned: true,
       });
     }
     closeModelPicker();
+    restoreComposerState(id, composerSnapshot);
+    focusInput(id);
   }
 
   function closeModelPicker() {
@@ -3273,7 +5521,19 @@ window.WalleSession = (function() {
         oldTag.textContent = 'Versioned';
         tags.appendChild(oldTag);
       }
-      if (item && item.source === 'live') {
+      if (item && item.routeConnectionKind) {
+        var routeTag = document.createElement('span');
+        routeTag.className = 'walle-model-tag muted';
+        routeTag.textContent = item.routeConnectionKind === 'portkey' ? 'Portkey' : item.routeConnectionKind.replace(/_/g, ' ');
+        tags.appendChild(routeTag);
+      }
+      if (item && item.availabilityState === 'route_issue') {
+        var issueTag = document.createElement('span');
+        issueTag.className = 'walle-model-tag muted';
+        issueTag.textContent = 'Route issue';
+        tags.appendChild(issueTag);
+      }
+      if (item && item.liveAvailable) {
         var liveTag = document.createElement('span');
         liveTag.className = 'walle-model-tag accent';
         liveTag.textContent = 'Live';
@@ -3287,30 +5547,37 @@ window.WalleSession = (function() {
       var q = search.value.trim().toLowerCase();
       var filtered = models.filter(function(item) {
         if (!q) return true;
-        return (item.label + ' ' + item.modelId + ' ' + item.providerLabel + ' ' + (item.capabilities || []).join(' ')).toLowerCase().indexOf(q) !== -1;
+        return (item.label + ' ' + item.modelId + ' ' + item.providerLabel + ' ' + item.routeLabel + ' ' + item.routeProviderName + ' ' + (item.capabilities || []).join(' ')).toLowerCase().indexOf(q) !== -1;
       });
       return dedupeVisibleModels(filtered);
     }
 
     function providerStatusSummary() {
       var meta = _walleModelAvailabilityMeta || {};
+      var counts = meta.counts || {};
       var providers = Array.isArray(meta.providers) ? meta.providers : [];
       var available = providers.filter(function(provider) { return provider.status === 'available'; }).length;
       var unavailable = providers.filter(function(provider) {
         return provider.status && provider.status !== 'available' && provider.status !== 'empty';
       }).length;
-      if (meta.error) return 'Live coding models unavailable';
-      if (available > 0) return models.length + ' live coding models · ' + available + ' provider' + (available === 1 ? '' : 's');
-      if (unavailable > 0) return 'No live coding models · check provider setup';
-      return 'Live coding models';
+      if (meta.error) return 'Model catalog unavailable';
+      if (counts && counts.models !== undefined) {
+        var parts = [models.length + ' models'];
+        if (counts.configured_routes) parts.push(counts.configured_routes + ' configured routes');
+        if (counts.live) parts.push(counts.live + ' live');
+        return parts.join(' · ');
+      }
+      if (available > 0) return models.length + ' models · ' + available + ' live provider' + (available === 1 ? '' : 's');
+      if (unavailable > 0) return models.length + ' models · route health in AI Providers';
+      return models.length + ' models';
     }
 
     function emptyModelMessage(hasQuery) {
-      if (hasQuery) return 'No matching live coding models';
+      if (hasQuery) return 'No matching models';
       if (_walleModelAvailabilityMeta && _walleModelAvailabilityMeta.error) {
-        return 'Could not load live coding models';
+        return 'Could not load model catalog';
       }
-      return 'No live coding models available';
+      return 'No configured models available';
     }
 
     function renderLoading() {
@@ -3319,7 +5586,7 @@ window.WalleSession = (function() {
       loading.className = 'walle-model-empty';
       loading.textContent = 'Loading models...';
       body.appendChild(loading);
-      sourceNote.textContent = 'Checking providers...';
+      sourceNote.textContent = 'Loading model catalog...';
     }
 
     function renderList() {
@@ -3421,7 +5688,11 @@ window.WalleSession = (function() {
         closeModelPicker();
       },
       onKeyDown: function(e) {
-        if (e.key === 'Escape') closeModelPicker();
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          e.stopPropagation();
+          closeModelPicker();
+        }
       },
       onResize: function() {
         positionModelPicker(anchor, popover);
@@ -3632,12 +5903,18 @@ window.WalleSession = (function() {
       focusInput(id);
     } else {
       // Show send button
+      var pendingAttach = hasPendingAttachments(getState(id));
       if (btn) {
         btn.textContent = '\u2191';
         btn.style.background = '';
-        btn.title = 'Send message';
-        btn.setAttribute('aria-label', 'Send message');
+        btn.setAttribute('aria-label', pendingAttach ? 'Waiting for image' : 'Send message');
         btn.onclick = function() { sendMessage(id); };
+        // Gate send until a pasted image finishes compressing, so the message
+        // can't fire without its attachment.
+        btn.disabled = pendingAttach;
+        btn.title = pendingAttach ? 'Waiting for image to finish compressing\u2026' : 'Send message';
+        btn.style.opacity = pendingAttach ? '0.5' : '';
+        btn.style.cursor = pendingAttach ? 'progress' : '';
       }
       if (input) input.disabled = false;
       if (attach) attach.disabled = false;
@@ -3663,7 +5940,11 @@ window.WalleSession = (function() {
       var cwd = s?.meta?.cwd || '';
       var parts = [];
       if (cwd) parts.push(cwd);
-      parts.push(ws.messageCount + ' messages');
+      if (historyStatusForSession(id, ws) === 'loading' && (ws.messageCount || 0) === 0) {
+        parts.push('Loading messages...');
+      } else {
+        parts.push(ws.messageCount + ' messages');
+      }
       meta.textContent = parts.join('  ');
     }
 
@@ -3700,7 +5981,7 @@ window.WalleSession = (function() {
       && ws.selectedModel === msg.model_id
       && (!msg.model_provider || ws.selectedModelProviderType === msg.model_provider);
     if (ws._modelManual && !sameManualModel) return;
-    ws.selectedModel = msg.model_id;
+    ws.selectedModel = normalizeSessionModelId(msg.model_id);
     ws.selectedModelRegistryId = msg.model_registry_id || msg.modelRegistryId || '';
     ws.selectedModelLabel = '';
     ws.selectedModelProviderType = msg.model_provider || ws.selectedModelProviderType || '';
@@ -3712,9 +5993,16 @@ window.WalleSession = (function() {
   // ---------- public API ----------
   return {
     getState: getState,
+    requestHistory: requestHistory,
+    markHistoryLoading: markHistoryLoading,
+    markHistoryLoaded: markHistoryLoaded,
+    historyStatusForSession: historyStatusForSession,
+    messageRenderNeedsRestart: messageRenderNeedsRestart,
     renderSession: renderSession,
     sendMessage: sendMessage,
     sendQueuedMessage: sendQueuedMessage,
+    handleQueueState: handleQueueState,
+    handleWorkState: handleWorkState,
     handleUser: handleUser,
     handleProgress: handleProgress,
     handleResponse: handleResponse,
@@ -3722,6 +6010,15 @@ window.WalleSession = (function() {
     handleTranscriptAppend: handleTranscriptAppend,
     handleError: handleError,
     handleModel: handleModel,
+    handleGlobalEscape: handleGlobalEscape,
+    confirmCancelActiveRun: confirmCancelActiveRun,
+    editMessage: editMessage,
+    cancelEdit: cancelEdit,
+    submitEdit: submitEdit,
+    deleteFromPrompt: deleteFromPrompt,
+    switchBranch: switchBranch,
+    saveWalleBranchSnapshot: saveWalleBranchSnapshot,
+    branchSafeAttachments: branchSafeAttachments,
     promptNavGo: promptNavGo,
     promptNavToggleList: promptNavToggleList,
     updatePromptNav: updatePromptNav,