create-walle 0.9.19 → 0.9.21

package/template/claude-task-manager/public/m/app.js

@@ -25,12 +25,14 @@
     remoteOutbox: [],
     remoteOutboxTimer: null,
     remoteOutboxDraining: false,
+    expandedTimelineTurnsBySession: new Map(),
     detail: {
       sessionId: null,
       messages: [],
       messageIndexByKey: new Map(),
       liveTail: null,
       walleActivity: null,
+      expandedMessageKeys: new Set(),
       viewMode: 'conversation',
       refreshTimer: null,
       refreshInFlight: null,
@@ -85,6 +87,16 @@
       touchStartX: null,
       touchStartY: null,
     },
+    modelPicker: {
+      open: false,
+      sessionId: '',
+      inputId: '',
+      loading: false,
+      error: '',
+      models: [],
+      loaded: false,
+      requestSeq: 0,
+    },
     push: {
       loaded: false,
       supported: false,
@@ -113,7 +125,7 @@
   };
 
   const $ = (id) => document.getElementById(id);
-  const MOBILE_ASSET_VERSION = '20260519-copy-session-url';
+  const MOBILE_ASSET_VERSION = '20260519-walle-phone-model-picker';
   const THEME_STORAGE_KEY = 'ctm.theme.mode';
   const MOBILE_ATTACHMENT_MAX_BYTES = 10 * 1024 * 1024;
   const SEND_LONG_PRESS_MS = 520;
@@ -162,6 +174,7 @@
         attachments: 'walle-composer-attachments',
         clear: 'walle-clear',
         send: 'walle-send',
+        model: 'walle-model',
         picker: 'walle-skill-picker',
       }
       : {
@@ -171,6 +184,7 @@
         attachments: 'composer-attachments',
         clear: 'detail-clear',
         send: 'detail-send',
+        model: 'detail-model',
         picker: 'mobile-skill-picker',
     };
     return $(ids[kind]);
@@ -219,23 +233,60 @@
     return !!(input && input.isContentEditable);
   }
 
-  function configureComposerInput(input = $('detail-input')) {
+  function composerCursorToken(text, cursor) {
+    const before = String(text || '').slice(0, Math.max(0, cursor || 0));
+    const match = before.match(/(?:^|\s)(\S*)$/);
+    return match ? match[1] : '';
+  }
+
+  function composerCurrentLine(text, cursor) {
+    const before = String(text || '').slice(0, Math.max(0, cursor || 0));
+    return before.slice(before.lastIndexOf('\n') + 1);
+  }
+
+  function composerShouldUseLiteralTextAssist(input) {
+    if (!input) return false;
+    const text = getComposerText(input);
+    const selection = getComposerSelection(input);
+    if (selection.start !== selection.end) return false;
+    const triggerInfo = findSkillTriggerInText(text, selection.start, selection.end);
+    if (triggerInfo) return true;
+    const token = composerCursorToken(text, selection.start);
+    const line = composerCurrentLine(text, selection.start);
+    if (/^[$/][^\s]*$/.test(token)) return true;
+    if (/^@[\w./-]*$/.test(token)) return true;
+    if (/^--?[\w-]*$/.test(token)) return true;
+    if (/^(https?:\/\/|[~./][\w./-]*|\w:[\\/])/.test(token)) return true;
+    if (/^[\w.-]+\.[A-Za-z0-9_-]{1,8}$/.test(token)) return true;
+    if (/`[^`]*$/.test(line) || /^\s*```/.test(line)) return true;
+    if (/^\s*(git|npm|npx|pnpm|yarn|node|uv|python3?|pip|cargo|go|docker|kubectl|ssh|scp|rsync|claude|codex|rg|grep|sed|awk|curl)\b/.test(line)) return true;
+    return false;
+  }
+
+  function applyComposerTextAssistMode(input = $('detail-input')) {
     const form = composerElement('form', input);
     if (form) {
       form.setAttribute('autocomplete', 'off');
-      form.setAttribute('autocorrect', 'off');
+      form.setAttribute('autocorrect', 'on');
       form.setAttribute('autocapitalize', 'sentences');
-      form.setAttribute('spellcheck', 'false');
-      form.spellcheck = false;
+      form.setAttribute('spellcheck', 'true');
+      form.spellcheck = true;
     }
     if (!input) return;
+    const literal = composerShouldUseLiteralTextAssist(input);
     input.setAttribute('autocomplete', 'off');
-    input.setAttribute('autocorrect', 'off');
-    input.setAttribute('autocapitalize', 'sentences');
+    input.setAttribute('inputmode', 'text');
     input.setAttribute('enterkeyhint', 'send');
     input.setAttribute('data-form-type', 'other');
-    input.setAttribute('spellcheck', 'false');
-    input.spellcheck = false;
+    input.setAttribute('data-text-assist', literal ? 'literal' : 'natural');
+    input.setAttribute('autocorrect', literal ? 'off' : 'on');
+    input.setAttribute('autocapitalize', literal ? 'none' : 'sentences');
+    input.setAttribute('spellcheck', literal ? 'false' : 'true');
+    input.spellcheck = !literal;
+  }
+
+  function configureComposerInput(input = $('detail-input')) {
+    applyComposerTextAssistMode(input);
   }
 
   function composerEditorPlainText(input) {
@@ -335,6 +386,7 @@
       const cursor = Number.isFinite(opts.cursor) ? opts.cursor : value.length;
       setComposerSelection(input, cursor, cursor);
     }
+    applyComposerTextAssistMode(input);
   }
 
   function normalizeComposerEditor(input = $('detail-input')) {
@@ -367,6 +419,16 @@
     dispatchComposerInput(input, 'insertText', insertion);
   }
 
+  function updateMobileViewportInset() {
+    const vv = window.visualViewport;
+    let offset = 0;
+    if (vv && Number.isFinite(vv.height)) {
+      const layoutHeight = window.innerHeight || document.documentElement.clientHeight || vv.height;
+      offset = Math.max(0, Math.round(layoutHeight - vv.height - vv.offsetTop));
+    }
+    document.documentElement.style.setProperty('--mobile-keyboard-offset', `${offset}px`);
+  }
+
   function lockDetailBackgroundScroll() {
     if (state.detailScrollLock.locked) return;
     const scrollY = window.scrollY || document.documentElement.scrollTop || 0;
@@ -550,6 +612,40 @@
     return AI_PROVIDER_LABELS[key] || (key ? key.replace(/(^|-)([a-z])/g, (_, sep, ch) => (sep ? ' ' : '') + ch.toUpperCase()) : '');
   }
 
+  function modelDisplayLabel(model) {
+    return String(model || '')
+      .replace(/@\d{6,8}\b/g, '')
+      .replace(/^[a-z][a-z0-9_-]+[:/]/i, '')
+      .replace(/\s+/g, ' ')
+      .trim();
+  }
+
+  function modelButtonLabel(card) {
+    const provider = providerKey(card?.walle_model_provider || card?.model_provider || card?.modelProvider || card?.providerType || '');
+    const model = modelDisplayLabel(card?.walle_model_id || card?.model_id || card?.model || '');
+    const providerText = providerLabel(provider);
+    if (providerText && model) return `${providerText} · ${model}`;
+    if (model) return model;
+    return 'Auto model';
+  }
+
+  function modelButtonShortLabel(card) {
+    const provider = providerKey(card?.walle_model_provider || card?.model_provider || card?.modelProvider || card?.providerType || '');
+    if (provider === 'anthropic') return 'Claude';
+    if (provider === 'openai') return 'GPT';
+    if (provider === 'google') return 'Gemini';
+    if (provider === 'deepseek') return 'DeepSeek';
+    if (provider === 'moonshot') return 'Kimi';
+    if (provider === 'ollama') return 'Ollama';
+    if (provider === 'mlx') return 'MLX';
+    const model = modelDisplayLabel(card?.walle_model_id || card?.model_id || card?.model || '');
+    if (/claude|opus|sonnet|haiku/i.test(model)) return 'Claude';
+    if (/gpt|o[1-9]|codex/i.test(model)) return 'GPT';
+    if (/gemini/i.test(model)) return 'Gemini';
+    if (/deepseek/i.test(model)) return 'DeepSeek';
+    return 'Model';
+  }
+
   function providerBadge(card) {
     const key = sessionAiProviderKey(card);
     if (!key) return '';
@@ -1194,7 +1290,7 @@
         <section id="walle-messages" class="detail-messages walle-chat-messages" aria-live="polite">
           <div class="empty-state">Loading Wall-E conversation...</div>
         </section>
-        <form id="walle-chat-composer" class="composer walle-chat-composer" autocomplete="off" autocorrect="off" autocapitalize="sentences" spellcheck="false">
+        <form id="walle-chat-composer" class="composer walle-chat-composer" autocomplete="off" autocorrect="on" autocapitalize="sentences" spellcheck="true">
           <div class="composer-field">
             <span id="walle-input-label" class="sr-only">Message Wall-E</span>
             <div id="walle-composer-attachments" class="composer-attachments" aria-label="Attachments" hidden></div>
@@ -1202,11 +1298,15 @@
               <button id="walle-attach-image" class="walle-tool-btn" type="button" aria-label="Attach image" title="Attach image" data-walle-attach="image"><span aria-hidden="true">▧</span></button>
               <button id="walle-attach-file" class="walle-tool-btn" type="button" aria-label="Attach file" title="Attach file" data-walle-attach="file"><span aria-hidden="true">▤</span></button>
             </div>
-            <div id="walle-input" class="composer-editor" contenteditable="true" role="textbox" aria-multiline="true" aria-labelledby="walle-input-label" aria-describedby="walle-composer-status" data-placeholder="Message Wall-E" data-skill-agent="walle" data-skill-mode="walle-mobile-composer" inputmode="text" enterkeyhint="send" autocomplete="off" autocorrect="off" autocapitalize="sentences" spellcheck="false" data-form-type="other"></div>
+            <div id="walle-input" class="composer-editor" contenteditable="true" role="textbox" aria-multiline="true" aria-labelledby="walle-input-label" aria-describedby="walle-composer-status" data-placeholder="Message Wall-E" data-skill-agent="walle" data-skill-mode="walle-mobile-composer" inputmode="text" enterkeyhint="send" autocomplete="off" autocorrect="on" autocapitalize="sentences" spellcheck="true" data-form-type="other" data-text-assist="natural"></div>
             <button id="walle-clear" class="composer-clear" type="button" aria-label="Clear Wall-E message" title="Clear message" hidden><span aria-hidden="true">&times;</span></button>
             <div id="walle-skill-picker" class="mobile-skill-picker" role="listbox" aria-label="Skill suggestions" hidden></div>
             <div id="walle-composer-status" class="composer-status" aria-live="polite"></div>
           </div>
+          <button id="walle-model" class="model-picker-btn" type="button" aria-label="Choose model for this Wall-E session" aria-haspopup="dialog" aria-expanded="false" hidden>
+            <span class="model-picker-btn-kicker">Model</span>
+            <span id="walle-model-label" class="model-picker-btn-label">Auto</span>
+          </button>
           <button id="walle-send" class="send-btn" type="submit" aria-label="Send to Wall-E"><span aria-hidden="true">➤</span></button>
         </form>
       </div>
@@ -1541,7 +1641,8 @@
     if (!card || !card.id) return null;
     const copy = {};
     for (const key of [
-      'id', 'sessionId', 'title', 'agent', 'provider', 'model', 'model_id',
+      'id', 'sessionId', 'title', 'aiTitle', 'displayTitle', 'userRenamed',
+      'agent', 'provider', 'model', 'model_id',
       'modelProvider', 'model_provider', 'providerType', 'llmProvider',
       'walle_model_id', 'walle_model_provider', 'runtime_model_id', 'runtime_model_provider',
       'project', 'cwd', 'projectPath', 'branch', 'lane', 'status',
@@ -1631,12 +1732,29 @@
       return false;
     }
 
+    const mergeLocalUserRename = (incoming, existing = null) => {
+      if (!incoming || typeof incoming !== 'object') return incoming;
+      const local = existing || findSession(incoming.id || incoming.sessionId);
+      if (!local?.userRenamed) return incoming;
+      const localTitle = detailTitleText(local);
+      if (!localTitle) return incoming;
+      const incomingTitle = detailTitleText(incoming);
+      if (incoming.userRenamed && incomingTitle && incomingTitle !== localTitle) return incoming;
+      return {
+        ...incoming,
+        title: localTitle,
+        aiTitle: localTitle,
+        displayTitle: localTitle,
+        userRenamed: true,
+      };
+    };
+
     if (standup.incremental && Array.isArray(standup.sessionOrder) && Array.isArray(standup.sessions)) {
       const byId = new Map(state.sessions.map((session) => [String(session.id || ''), session]).filter(([id]) => id));
       for (const id of standup.removedSessionIds || []) byId.delete(String(id));
       for (const session of standup.sessions) {
         const id = String(session?.id || '');
-        if (id) byId.set(id, session);
+        if (id) byId.set(id, mergeLocalUserRename(session, byId.get(id)));
       }
       state.sessions = standup.sessionOrder.map((id) => byId.get(String(id))).filter(Boolean);
       state.lanes = Array.isArray(standup.lanes) ? standup.lanes : state.lanes;
@@ -1644,7 +1762,9 @@
       return true;
     }
 
-    state.sessions = Array.isArray(standup.sessions) ? standup.sessions : [];
+    state.sessions = Array.isArray(standup.sessions)
+      ? standup.sessions.map((session) => mergeLocalUserRename(session))
+      : [];
     state.lanes = Array.isArray(standup.lanes) ? standup.lanes : [];
     persistSessionSnapshot();
     return true;
@@ -1833,7 +1953,6 @@
     $('detail-status').className = `state-chip ${card.lane || card.status || 'idle'}`;
     renderDetailAlert(card);
     renderDetailControls(card);
-    if (!isTerminalControlSession(card)) hideSendMenu();
     updateComposerState();
   }
 
@@ -2474,7 +2593,23 @@
     const id = String(raw.id || remoteMessageId()).slice(0, 160);
     const now = Date.now();
     const normalizedBody = { session_id: sessionId, text };
-    if (type === 'wall_e.send_message' && cleanAttachments.length) normalizedBody.attachments = cleanAttachments;
+    if (type === 'wall_e.send_message') {
+      if (cleanAttachments.length) normalizedBody.attachments = cleanAttachments;
+      const modelId = String(body.model_id || body.model || raw.model_id || raw.model || '').trim();
+      const modelProvider = providerKey(body.model_provider || body.provider || raw.model_provider || raw.provider || '');
+      const registryId = String(body.model_registry_id || body.modelRegistryId || raw.model_registry_id || raw.modelRegistryId || '').trim();
+      const providerId = String(body.model_provider_id || body.modelProviderId || body.provider_id || raw.model_provider_id || raw.modelProviderId || raw.provider_id || '').trim();
+      if (modelId) {
+        normalizedBody.model_id = modelId;
+        normalizedBody.model = modelId;
+        normalizedBody.model_provider = modelProvider;
+        normalizedBody.provider = modelProvider;
+        normalizedBody.model_registry_id = registryId;
+        normalizedBody.model_provider_id = providerId;
+        normalizedBody.modelPinned = true;
+        normalizedBody.allowProviderFallback = false;
+      }
+    }
     return {
       id,
       type,
@@ -2719,6 +2854,7 @@
     updateRemoteOutboxStatus();
     $('detail-view').classList.add('active');
     $('detail-view').setAttribute('aria-hidden', 'false');
+    updateComposerState();
     $('detail-messages').innerHTML = card._placeholder
       ? '<div class="empty-state">Loading session context. You can still type and send a prompt.</div>'
       : '<div class="empty-state">Connecting to live stream...</div>';
@@ -2736,6 +2872,7 @@
     setComposerStatus('', '');
     hideMobileSkillPicker();
     hideSendMenu();
+    closeModelPicker();
     clearComposerAttachments();
     state.composerSending = false;
     state.controlSending = false;
@@ -2770,6 +2907,13 @@
     return /walle|wall-e/i.test(kind);
   }
 
+  function isWalleCodingSession(card) {
+    if (!card || !isWalleSession(card)) return false;
+    const caps = card.agentCapabilities || card.capabilities || {};
+    if (caps.structuredTranscript === false && caps.terminalInput === false && caps.review === false) return false;
+    return true;
+  }
+
   function terminalControlCapability(card) {
     const caps = card?.capabilities || card?.agentCapabilities || {};
     if (caps.terminalControl === true || caps.terminalInput === true || caps.canSendEscape === true) return true;
@@ -2860,6 +3004,7 @@
       messageIndexByKey: new Map(),
       liveTail: null,
       walleActivity: null,
+      expandedMessageKeys: new Set(),
       viewMode: 'conversation',
       refreshTimer: null,
       refreshInFlight: null,
@@ -2867,6 +3012,31 @@
     updateDetailTimelineModeButton();
   }
 
+  function activeTimelineExpansionSessionId() {
+    return String(state.detail?.sessionId || state.activeSession?.id || '');
+  }
+
+  function timelineTurnExpansionSet(sessionId = activeTimelineExpansionSessionId()) {
+    if (!sessionId) return null;
+    if (!state.expandedTimelineTurnsBySession.has(sessionId)) {
+      state.expandedTimelineTurnsBySession.set(sessionId, new Set());
+    }
+    return state.expandedTimelineTurnsBySession.get(sessionId);
+  }
+
+  function isTimelineTurnExpanded(key) {
+    if (!key) return false;
+    return !!timelineTurnExpansionSet()?.has(key);
+  }
+
+  function rememberTimelineTurnExpanded(key, expanded) {
+    if (!key) return;
+    const set = timelineTurnExpansionSet();
+    if (!set) return;
+    if (expanded) set.add(key);
+    else set.delete(key);
+  }
+
   function renderMessages(messages, opts = {}) {
     const pendingLiveMessages = state.detail.messages.slice();
     state.detail.messages = [];
@@ -2898,6 +3068,22 @@
   }
 
   function handleWalleSessionMessage(msg) {
+    if (msg.type === 'walle-model') {
+      const provider = providerKey(msg.model_provider || msg.provider || '');
+      const item = msg.model_id
+        ? {
+          id: String(msg.model_registry_id || msg.modelRegistryId || '').trim(),
+          modelId: String(msg.model_id || '').trim(),
+          label: modelDisplayLabel(msg.model_id),
+          provider,
+          providerId: String(msg.model_provider_id || msg.modelProviderId || '').trim(),
+          providerLabel: providerLabel(provider) || 'Provider',
+        }
+        : null;
+      applyWalleModelLocally(msg.id || msg.sessionId, item);
+      renderModelPickerSheet();
+      return;
+    }
     if (msg.type === 'walle-history') {
       state.detail.walleActivity = null;
       renderMessages(Array.isArray(msg.messages) ? msg.messages : []);
@@ -3127,7 +3313,9 @@
   }
 
   const TERMINAL_PROMPT_PLACEHOLDERS = [
+    // Codex starter suggestions look like prompt rows in PTY snapshots, but are not submitted user text.
     /^explain this codebase$/i,
+    /^find and fix a bug in @filename$/i,
   ];
 
   function isTerminalPromptPlaceholder(text) {
@@ -3159,6 +3347,24 @@
     return false;
   }
 
+  function stripTerminalEdgeDecorations(line) {
+    return stripAnsi(String(line || ''))
+      .replace(/\u00a0/g, ' ')
+      .replace(/^[\s|│┃┆┊╎╏·•●◦▪*─━═╌╍┄┅⎯—_=~-]+/g, '')
+      .replace(/[\s|│┃┆┊╎╏·•●◦▪*─━═╌╍┄┅⎯—_=~-]+$/g, '')
+      .trim();
+  }
+
+  function isTerminalCompletionFooterLine(line) {
+    const text = stripTerminalEdgeDecorations(line);
+    if (!text) return false;
+    return /^Worked for\s+\d+(?:\.\d+)?\s*(?:ms|msec|milliseconds?|s|sec|secs|seconds?|m|min|mins|minutes?|h|hr|hrs|hours?)(?:\s+\d+(?:\.\d+)?\s*(?:ms|msec|milliseconds?|s|sec|secs|seconds?|m|min|mins|minutes?|h|hr|hrs|hours?))*$/i.test(text);
+  }
+
+  function isTerminalNonContentLine(line) {
+    return isTerminalDividerLine(line) || isTerminalCompletionFooterLine(line);
+  }
+
   function isTerminalStatusLine(line) {
     const text = String(line || '').trim();
     if (!text) return false;
@@ -3203,7 +3409,7 @@
   }
 
   function cleanLiveTerminalRows(rows) {
-    return (rows || []).filter((row) => !isTerminalDividerLine(row?.text));
+    return (rows || []).filter((row) => !isTerminalNonContentLine(row?.text));
   }
 
   function terminalRowsText(rows) {
@@ -3231,9 +3437,17 @@
     if (!text) return true;
     if (terminalPromptLineText(text) != null) return false;
     if (isTerminalChromeLine(text) || isTerminalStatusLine(text) || isTerminalDividerLine(text)) return false;
+    if (isTerminalAgentOutputLine(text)) return false;
     return true;
   }
 
+  function isTerminalAgentOutputLine(line) {
+    const text = String(line || '').trim();
+    if (!text) return false;
+    if (/^[⚠✓✔✗✘]\s*/.test(text)) return true;
+    return /^(?:Error|Warning|Falling back|stream disconnected|Failed|Retrying)\b/i.test(text);
+  }
+
   function promptContinuationFallback(promptText, rows, promptIndex) {
     const text = String(promptText || '').trim();
     const nextRow = rows[promptIndex + 1];
@@ -3242,6 +3456,7 @@
     if (!isPromptContinuationRow(nextRow)) return false;
     const statusIndex = findBusyStatusBeforeNextPrompt(rows, promptIndex);
     if (statusIndex > promptIndex + 1 && text.length >= 64) return true;
+    if (/^\$[\w-]+\b/.test(text) && text.length >= 40) return true;
     if (text.length >= 82) return true;
     if (/[([{,;:]$/.test(text)) return true;
     return /\b(?:a|an|and|as|at|by|for|from|in|into|of|on|or|the|to|with|without)$/i.test(text);
@@ -3341,6 +3556,101 @@
     `;
   }
 
+  function renderLiveTerminalResponse(turn, tail, index, total) {
+    const agent = state.activeSession?.agent || state.activeSession?.provider || 'Agent';
+    const time = index === total - 1 ? messageTime(tail) : '';
+    const body = window.MR?.formatMsgText
+      ? window.MR.formatMsgText(String(turn?.text || ''))
+      : esc(turn?.text || '').replace(/\n/g, '<br>');
+    return `
+      <div class="review-msg assistant live-terminal-response">
+        <div class="msg-header">
+          <span class="msg-role">${esc(agent)} <span class="live-pill">Live</span></span>
+          ${time ? `<span class="msg-time">${esc(time)}</span>` : ''}
+        </div>
+        <div class="msg-text live-tail-text">${body}</div>
+      </div>
+    `;
+  }
+
+  function renderLiveTerminalPromptTurn(promptTurn, responseTurns, tail, index) {
+    const key = mobileLiveTurnKey(tail, promptTurn?.text || '', index);
+    const expanded = isTimelineTurnExpanded(key);
+    const promptBody = esc(promptTurn?.text || '').replace(/\n/g, '<br>');
+    const responseHtml = responseTurns.length
+      ? responseTurns.map((turn, responseIndex) => renderLiveTerminalResponse(turn, tail, responseIndex, responseTurns.length)).join('')
+      : '<div class="prompt-turn-empty">Live response is still streaming.</div>';
+    return `
+      <section class="prompt-turn live-prompt-turn live-tail-row${expanded ? ' expanded' : ''}" data-mobile-turn-key="${esc(key)}" data-turn-id="${esc(key)}" data-live-tail="true" data-live-tail-kind="prompt">
+        <div class="prompt-turn-header" role="button" tabindex="0" aria-expanded="${expanded ? 'true' : 'false'}">
+          <span class="prompt-turn-chevron">▶</span>
+          <div class="prompt-turn-head-main">
+            <div class="review-msg user key-msg prompt-turn-prompt">
+              <div class="msg-header">
+                <span class="msg-role">You <span class="live-pill">Live</span></span>
+              </div>
+              <div class="msg-text live-terminal-prompt-text">${promptBody}</div>
+            </div>
+          </div>
+          <div class="prompt-turn-meta">
+            <span class="prompt-turn-badge">live</span>
+            <span class="prompt-turn-badge">${responseTurns.length || 'no'} repl${responseTurns.length === 1 ? 'y' : 'ies'}</span>
+          </div>
+        </div>
+        <div class="prompt-turn-response">
+          ${responseHtml}
+        </div>
+      </section>
+    `;
+  }
+
+  function renderLiveTerminalStandaloneTurn(turn, tail, index) {
+    const key = mobileLiveTurnKey(tail, turn?.text || '', index);
+    const expanded = isTimelineTurnExpanded(key);
+    const agent = state.activeSession?.agent || state.activeSession?.provider || 'Agent';
+    const preview = compactPreview(turn?.text || '');
+    return `
+      <section class="prompt-turn live-prompt-turn live-standalone-turn live-tail-row${expanded ? ' expanded' : ''}" data-mobile-turn-key="${esc(key)}" data-turn-id="${esc(key)}" data-live-tail="true" data-live-tail-kind="response">
+        <div class="prompt-turn-header" role="button" tabindex="0" aria-expanded="${expanded ? 'true' : 'false'}">
+          <span class="prompt-turn-chevron">▶</span>
+          <div class="prompt-turn-head-main">
+            <div class="prompt-turn-live-title">
+              <span>Live terminal</span>
+              <span class="terminal-tail-preview">${esc(preview)}</span>
+            </div>
+          </div>
+          <div class="prompt-turn-meta">
+            <span class="prompt-turn-badge">${esc(agent)}</span>
+            <span class="prompt-turn-badge">live</span>
+          </div>
+        </div>
+        <div class="prompt-turn-response">
+          ${renderLiveTerminalResponse(turn, tail, 0, 1)}
+        </div>
+      </section>
+    `;
+  }
+
+  function renderLiveTerminalConversationTurns(turns, tail) {
+    const rows = [];
+    for (let index = 0; index < turns.length; index += 1) {
+      const turn = turns[index];
+      if (turn?.role !== 'user') {
+        rows.push(renderLiveTerminalStandaloneTurn(turn, tail, index));
+        continue;
+      }
+      const responses = [];
+      let cursor = index + 1;
+      while (cursor < turns.length && turns[cursor]?.role !== 'user') {
+        responses.push(turns[cursor]);
+        cursor += 1;
+      }
+      rows.push(renderLiveTerminalPromptTurn(turn, responses, tail, index));
+      index = cursor - 1;
+    }
+    return rows.join('');
+  }
+
   function hasTimelineContent(box) {
     return !!(box && box.querySelector('.prompt-turn, .review-msg, .thought-group, .message-row, .live-tail-row'));
   }
@@ -3358,16 +3668,16 @@
     const turns = mode === 'conversation' ? parseLiveTerminalTurns(cleanRows) : null;
     if (turns) {
       if (!turns.length) return '';
-      return turns.map((turn, index) => renderLiveTerminalTurn(turn, tail, index, turns.length)).join('');
+      return renderLiveTerminalConversationTurns(turns, tail);
     }
-    const hasSemanticMessages = state.detail.messages.some((item) => messageText(item).trim());
-    const openAttr = mode === 'normal' || !hasSemanticMessages ? ' open' : '';
+    const key = mobileLiveTurnKey(tail, cleanText, 0);
+    const openAttr = mode === 'normal' || isTimelineTurnExpanded(key) ? ' open' : '';
     const preview = compactPreview(cleanText);
     const formatted = window.MR?.formatMsgText
       ? window.MR.formatMsgText(cleanText)
       : esc(cleanText).replace(/\n/g, '<br>');
     return `
-      <details class="terminal-tail-panel live-tail-row"${openAttr} data-live-tail="true">
+      <details class="terminal-tail-panel live-tail-row"${openAttr} data-live-tail="true" data-mobile-turn-key="${esc(key)}">
         <summary class="terminal-tail-summary">
           <span class="terminal-tail-main">
             <span class="terminal-tail-kicker">Live terminal</span>
@@ -3439,14 +3749,34 @@
     };
   }
 
+  function mobilePromptTurnKey(turn, idx) {
+    if (!turn || typeof turn !== 'object') return `turn:${idx}`;
+    if (turn.type === 'setup') return 'turn:setup';
+    const prompt = turn.prompt?.m || turn.prompt || null;
+    const stable = prompt && timelineMessageKey(prompt);
+    if (stable) return `turn:${stable}`;
+    const text = normalizeCompareText(prompt?.text || '').slice(0, 180);
+    return `turn:${idx}:${text}`;
+  }
+
+  function mobileLiveTurnKey(tail, text, index = 0) {
+    const sessionId = activeTimelineExpansionSessionId();
+    const normalized = normalizeCompareText(text).slice(0, 180);
+    return `live:${sessionId}:${index}:${normalized || tail?.reason || 'terminal'}`;
+  }
+
   function renderMobileConversationTurns(messages) {
     const normalized = (messages || []).map(normalizeMobileReviewMessage).filter(Boolean);
     if (!normalized.length) return [];
-    if (window.MR?.renderReviewTurns) {
-      const hasPromptTurn = normalized.some((item) => item.role === 'user');
-      const html = window.MR.renderReviewTurns(normalized, {
-        expanded: (turn) => turn?.type !== 'setup' || !hasPromptTurn,
-      });
+    if (window.MR?.groupMessagesIntoTurns && window.MR?.renderReviewTurn) {
+      const html = window.MR.groupMessagesIntoTurns(normalized)
+        .map((turn, idx) => window.MR.renderReviewTurn(turn, idx, {
+          expanded: () => isTimelineTurnExpanded(mobilePromptTurnKey(turn, idx)),
+        }))
+        .join('');
+      if (String(html || '').trim()) return [html];
+    } else if (window.MR?.renderReviewTurns) {
+      const html = window.MR.renderReviewTurns(normalized, { expanded: false });
       if (String(html || '').trim()) return [html];
     }
     return messages.map(renderMobileMessage).filter(Boolean);
@@ -3495,10 +3825,16 @@
     box.querySelectorAll('.prompt-turn-header').forEach((header) => {
       const turn = header.closest('.prompt-turn');
       if (!turn) return;
+      const setExpanded = (next) => {
+        window.MR.setPromptTurnExpanded(turn, next);
+        syncMobilePromptTurnAction(turn, next);
+        rememberTimelineTurnExpanded(turn.dataset.mobileTurnKey || turn.dataset.turnId || '', next);
+      };
       const toggle = (ev) => {
         if (ev?.target?.closest?.('a,button,input,textarea,select')) return;
         if (window.MR?.shouldKeepPromptTextSelection?.(ev, header)) return;
-        window.MR.setPromptTurnExpanded(turn, !turn.classList.contains('expanded'));
+        const next = !turn.classList.contains('expanded');
+        setExpanded(next);
       };
       header.addEventListener('click', toggle);
       header.addEventListener('keydown', (ev) => {
@@ -3506,6 +3842,48 @@
         ev.preventDefault();
         toggle(ev);
       });
+      const action = turn.querySelector('[data-prompt-turn-action="toggle"]');
+      if (action) {
+        action.addEventListener('click', (ev) => {
+          ev.preventDefault();
+          ev.stopPropagation();
+          setExpanded(!turn.classList.contains('expanded'));
+        });
+      }
+    });
+  }
+
+  function syncMobilePromptTurnAction(turn, expanded = turn?.classList?.contains('expanded')) {
+    const button = turn?.querySelector?.('[data-prompt-turn-action="toggle"]');
+    if (!button) return;
+    const isExpanded = !!expanded;
+    button.textContent = isExpanded ? 'Hide details' : 'Full prompt';
+    button.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');
+    button.setAttribute('aria-label', isExpanded ? 'Hide full prompt details' : 'Show full prompt');
+  }
+
+  function ensureMobilePromptTurnAction(turn) {
+    if (!turn || turn.classList?.contains('setup-turn')) return;
+    const meta = turn.querySelector?.('.prompt-turn-meta');
+    const prompt = turn.querySelector?.('.prompt-turn-prompt .msg-text');
+    if (!meta || !prompt) return;
+    let button = meta.querySelector('[data-prompt-turn-action="toggle"]');
+    if (!button) {
+      button = document.createElement('button');
+      button.className = 'prompt-turn-action';
+      button.type = 'button';
+      button.dataset.promptTurnAction = 'toggle';
+      meta.prepend(button);
+    }
+    syncMobilePromptTurnAction(turn);
+  }
+
+  function wireMobileLiveDetails(box) {
+    if (!box) return;
+    box.querySelectorAll('details.terminal-tail-panel[data-mobile-turn-key]').forEach((details) => {
+      details.addEventListener('toggle', () => {
+        rememberTimelineTurnExpanded(details.dataset.mobileTurnKey || '', details.open);
+      });
     });
   }
 
@@ -3516,15 +3894,56 @@
     textEl.classList.toggle('collapsed', !willExpand);
     button.textContent = willExpand ? 'Show less' : 'Show more';
     button.setAttribute('aria-expanded', willExpand ? 'true' : 'false');
+    const key = mobileMessageKeyForText(textEl);
+    if (key) {
+      if (willExpand) state.detail.expandedMessageKeys.add(key);
+      else state.detail.expandedMessageKeys.delete(key);
+    }
     return true;
   }
 
+  function mobileMessageKeyForText(textEl) {
+    if (!textEl) return '';
+    const direct = textEl.dataset?.mobileMessageKey || '';
+    if (direct) return direct;
+    const host = textEl.closest?.('[data-mobile-message-key]');
+    return host?.dataset?.mobileMessageKey || '';
+  }
+
+  function annotateMobileMessageKeys(box, messages, mode) {
+    if (!box) return;
+    const source = mode === 'conversation'
+      ? (messages || []).map(normalizeMobileReviewMessage).filter(Boolean)
+      : (messages || []);
+    box.querySelectorAll('.msg-text[data-msg-idx]').forEach((textEl) => {
+      const idx = Number(textEl.dataset.msgIdx);
+      if (!Number.isInteger(idx) || idx < 0 || idx >= source.length) return;
+      const key = timelineMessageKey(source[idx]);
+      if (!key) return;
+      textEl.dataset.mobileMessageKey = key;
+      const row = textEl.closest('.review-msg, .message-row');
+      if (row) row.dataset.mobileMessageKey = key;
+    });
+    box.querySelectorAll('[data-mobile-event-key]').forEach((row) => {
+      const key = row.dataset.mobileEventKey || '';
+      if (!key) return;
+      row.dataset.mobileMessageKey = key;
+      row.querySelectorAll('.msg-text, .message-body').forEach((textEl) => {
+        textEl.dataset.mobileMessageKey = key;
+      });
+    });
+  }
+
   function wireMobileMsgExpandButtons(box) {
     if (!box) return;
     box.querySelectorAll('.msg-expand').forEach((button) => {
       button.removeAttribute('onclick');
       button.type = 'button';
       const textEl = button.previousElementSibling;
+      const key = mobileMessageKeyForText(textEl);
+      if (key && state.detail.expandedMessageKeys.has(key) && textEl?.classList) {
+        textEl.classList.remove('collapsed');
+      }
       const expanded = !!(textEl && textEl.classList && !textEl.classList.contains('collapsed'));
       button.textContent = expanded ? 'Show less' : 'Show more';
       button.setAttribute('aria-expanded', expanded ? 'true' : 'false');
@@ -3540,16 +3959,25 @@
     toggleMobileMsgExpand(button);
   }
 
-  function annotateMobilePromptTurns(box, mode) {
+  function annotateMobilePromptTurns(box, mode, messages = []) {
     if (!box) return;
     if (mode === 'conversation') {
       box.setAttribute('role', 'feed');
       box.setAttribute('aria-label', 'Session conversation grouped by prompt');
       const turns = Array.from(box.querySelectorAll('.prompt-turn'));
+      const sourceTurns = window.MR?.groupMessagesIntoTurns
+        ? window.MR.groupMessagesIntoTurns((messages || []).map(normalizeMobileReviewMessage).filter(Boolean))
+        : [];
       turns.forEach((turn, idx) => {
         turn.setAttribute('role', 'article');
         turn.setAttribute('aria-posinset', String(idx + 1));
         turn.setAttribute('aria-setsize', String(turns.length));
+        const key = turn.dataset.mobileTurnKey || mobilePromptTurnKey(sourceTurns[idx], idx);
+        if (key) turn.dataset.mobileTurnKey = key;
+        if (window.MR?.setPromptTurnExpanded) {
+          window.MR.setPromptTurnExpanded(turn, isTimelineTurnExpanded(key));
+        }
+        ensureMobilePromptTurnAction(turn);
         const label = turn.querySelector('.prompt-turn-prompt .msg-text, .prompt-turn-setup-title')?.textContent?.trim();
         if (label) turn.setAttribute('aria-label', label.slice(0, 120));
       });
@@ -3580,8 +4008,10 @@
     box.innerHTML = rows.length
       ? rows.join('')
       : '<div class="empty-state">No transcript is available yet.</div>';
-    annotateMobilePromptTurns(box, mode);
+    annotateMobileMessageKeys(box, timelineMessages, mode);
+    annotateMobilePromptTurns(box, mode, timelineMessages);
     if (mode === 'conversation') wireMobilePromptTurns(box);
+    wireMobileLiveDetails(box);
     wireMobileMsgExpandButtons(box);
     updateDetailTimelineModeButton();
     if (wasNearBottom) box.scrollTop = box.scrollHeight;
@@ -3695,7 +4125,7 @@
     menu.hidden = false;
     button.setAttribute('aria-expanded', 'true');
     state.sendMenu.suppressNextClick = opts.suppressNextClick !== false;
-    ($('send-prev-prompt-option') || $('send-esc-option'))?.focus({ preventScroll: true });
+    if (opts.focus !== false) ($('send-prev-prompt-option') || $('send-esc-option'))?.focus({ preventScroll: true });
     return true;
   }
 
@@ -3710,7 +4140,7 @@
       state.sendMenu.holdTimer = null;
       state.sendMenu.touchStartX = null;
       state.sendMenu.touchStartY = null;
-      showSendMenu();
+      showSendMenu({ focus: false });
     }, SEND_LONG_PRESS_MS);
   }
 
@@ -3752,7 +4182,7 @@
   function handleSendButtonContextMenu(event) {
     if (!state.activeSession) return;
     event.preventDefault();
-    showSendMenu();
+    showSendMenu({ focus: false });
   }
 
   function handleSendButtonKeydown(event) {
@@ -3762,7 +4192,7 @@
     }
     if ((event.key === 'ArrowUp' || event.key === 'ContextMenu') && state.activeSession) {
       event.preventDefault();
-      showSendMenu();
+      showSendMenu({ focus: true });
     }
   }
 
@@ -3770,6 +4200,255 @@
     return !!target.closest?.('#send-menu, #detail-send');
   }
 
+  function walleModelProviderSort(provider) {
+    const order = { anthropic: 1, openai: 2, google: 3, deepseek: 4, moonshot: 5, ollama: 6, mlx: 7 };
+    return order[providerKey(provider)] || 20;
+  }
+
+  function normalizeWallePhoneModels(payload) {
+    const rows = Array.isArray(payload) ? payload : (Array.isArray(payload?.models) ? payload.models : []);
+    const out = [];
+    for (const row of rows) {
+      if (!row || row.enabled === false || row.enabled === 0 || row.available === false || row.coding_capable === false) continue;
+      const provider = providerKey(row.provider_type || row.provider || '');
+      const modelId = String(row.model_id || row.modelId || row.id || '').trim();
+      const label = modelDisplayLabel(row.display_name || row.name || modelId);
+      if (!modelId || !label) continue;
+      out.push({
+        id: String(row.id || `${provider}:${modelId}`).trim(),
+        modelId,
+        label,
+        provider,
+        providerId: String(row.provider_id || row.providerId || '').trim(),
+        providerLabel: row.provider_name || providerLabel(provider) || 'Provider',
+        reason: String(row.coding_reason || row.reason || '').trim(),
+      });
+    }
+    out.sort((a, b) => {
+      const providerCmp = walleModelProviderSort(a.provider) - walleModelProviderSort(b.provider);
+      if (providerCmp) return providerCmp;
+      return a.label.localeCompare(b.label);
+    });
+    return out;
+  }
+
+  function selectedWalleModelIds(card) {
+    return {
+      modelId: String(card?.walle_model_id || card?.model_id || card?.model || '').trim(),
+      provider: providerKey(card?.walle_model_provider || card?.model_provider || card?.modelProvider || card?.providerType || ''),
+      registryId: String(card?.model_registry_id || card?.modelRegistryId || '').trim(),
+      providerId: String(card?.model_provider_id || card?.modelProviderId || '').trim(),
+    };
+  }
+
+  function updateModelPickerButtons() {
+    const visible = isWalleCodingSession(state.activeSession);
+    const label = visible ? modelButtonShortLabel(state.activeSession) : 'Model';
+    const controls = [
+      { input: $('detail-input'), form: $('detail-composer'), button: $('detail-model'), surface: 'detail' },
+      { input: $('walle-input'), form: $('walle-chat-composer'), button: $('walle-model'), surface: 'walle' },
+    ];
+    for (const control of controls) {
+      const { input, form, button, surface } = control;
+      if (!button || !form) continue;
+      const show = visible && !!input && (surface === 'detail' ? isDetailOpen() : state.activeTab === 'walle');
+      button.hidden = !show;
+      button.disabled = !show || state.composerSending;
+      button.setAttribute('aria-expanded', show && state.modelPicker.open ? 'true' : 'false');
+      button.title = show ? modelButtonLabel(state.activeSession) : 'Choose model';
+      const value = button.querySelector('.model-picker-btn-label');
+      if (value) value.textContent = label;
+      form.classList.toggle('has-model-picker', show);
+    }
+  }
+
+  function renderModelPickerSheet() {
+    const sheet = $('model-picker-sheet');
+    const list = $('model-picker-list');
+    const current = $('model-picker-current');
+    if (!sheet || !list || !current) return;
+    sheet.hidden = !state.modelPicker.open;
+    updateModelPickerButtons();
+    if (!state.modelPicker.open) return;
+
+    const card = findSession(state.modelPicker.sessionId) || state.activeSession;
+    current.textContent = card
+      ? `Current: ${modelButtonLabel(card)}`
+      : 'Use a specific coding model for this Wall-E session.';
+
+    if (state.modelPicker.loading) {
+      list.innerHTML = '<div class="model-picker-empty">Loading coding models from Wall-E...</div>';
+      return;
+    }
+    if (state.modelPicker.error) {
+      list.innerHTML = `<div class="model-picker-empty">${esc(state.modelPicker.error)}</div>`;
+      return;
+    }
+    const selected = selectedWalleModelIds(card);
+    const autoSelected = !selected.modelId;
+    const rows = [
+      `<button class="model-picker-option" type="button" role="option" aria-selected="${autoSelected ? 'true' : 'false'}" data-model-choice="auto">
+        <span class="model-picker-option-main">
+          <span class="model-picker-option-title">Auto routing</span>
+          <span class="model-picker-option-meta">Let Wall-E pick the configured coding default</span>
+        </span>
+        <span class="model-picker-option-check" aria-hidden="true">${autoSelected ? '✓' : ''}</span>
+      </button>`,
+    ];
+    for (let i = 0; i < state.modelPicker.models.length; i += 1) {
+      const item = state.modelPicker.models[i];
+      const isSelected = (!!selected.registryId && item.id === selected.registryId)
+        || (!!selected.modelId && item.modelId === selected.modelId && (!selected.provider || selected.provider === item.provider));
+      const meta = [item.providerLabel, item.reason].filter(Boolean).join(' · ');
+      rows.push(`
+        <button class="model-picker-option" type="button" role="option" aria-selected="${isSelected ? 'true' : 'false'}" data-model-choice="${i}">
+          <span class="model-picker-option-main">
+            <span class="model-picker-option-title">${esc(item.label)}</span>
+            <span class="model-picker-option-meta">${esc(meta || item.modelId)}</span>
+          </span>
+          <span class="model-picker-option-check" aria-hidden="true">${isSelected ? '✓' : ''}</span>
+        </button>
+      `);
+    }
+    list.innerHTML = rows.join('');
+  }
+
+  async function loadWallePhoneModels(force = false) {
+    if (state.modelPicker.loaded && !force) return state.modelPicker.models;
+    const requestSeq = state.modelPicker.requestSeq + 1;
+    state.modelPicker.requestSeq = requestSeq;
+    state.modelPicker.loading = true;
+    state.modelPicker.error = '';
+    renderModelPickerSheet();
+    try {
+      const payload = await api('/api/models/coding-availability');
+      if (requestSeq !== state.modelPicker.requestSeq) return state.modelPicker.models;
+      state.modelPicker.models = normalizeWallePhoneModels(payload);
+      state.modelPicker.loaded = true;
+      if (!state.modelPicker.models.length) state.modelPicker.error = 'No coding-capable models are available.';
+    } catch (err) {
+      if (requestSeq === state.modelPicker.requestSeq) {
+        state.modelPicker.error = err?.message || 'Could not load coding models.';
+      }
+    } finally {
+      if (requestSeq === state.modelPicker.requestSeq) {
+        state.modelPicker.loading = false;
+        renderModelPickerSheet();
+      }
+    }
+    return state.modelPicker.models;
+  }
+
+  function openModelPickerForActiveSession(input = composerElement('input')) {
+    const card = state.activeSession;
+    if (!isWalleCodingSession(card)) return;
+    hideMobileSkillPicker();
+    hideSendMenu();
+    state.modelPicker.open = true;
+    state.modelPicker.sessionId = card.id;
+    state.modelPicker.inputId = input?.id || '';
+    state.modelPicker.error = '';
+    renderModelPickerSheet();
+    loadWallePhoneModels().catch(() => {});
+  }
+
+  function closeModelPicker() {
+    state.modelPicker.open = false;
+    state.modelPicker.sessionId = '';
+    state.modelPicker.inputId = '';
+    renderModelPickerSheet();
+  }
+
+  function applyWalleModelLocally(sessionId, item) {
+    if (!sessionId) return;
+    const patch = item
+      ? {
+        model: item.modelId,
+        model_id: item.modelId,
+        modelProvider: item.provider,
+        model_provider: item.provider,
+        model_registry_id: item.id || '',
+        model_provider_id: item.providerId || '',
+        walle_model_id: item.modelId,
+        walle_model_provider: item.provider,
+        model_pinned: true,
+      }
+      : {
+        model: '',
+        model_id: '',
+        modelProvider: '',
+        model_provider: '',
+        model_registry_id: '',
+        model_provider_id: '',
+        walle_model_id: null,
+        walle_model_provider: null,
+        model_pinned: false,
+      };
+    const idx = findSessionIndex(sessionId);
+    if (idx >= 0) state.sessions[idx] = { ...state.sessions[idx], ...patch };
+    if (state.activeSession && (state.activeSession.id === sessionId || state.activeSession.sessionId === sessionId)) {
+      state.activeSession = { ...state.activeSession, ...patch };
+    }
+    if (state.walle.sessionId === sessionId) {
+      const active = findSession(sessionId) || state.activeSession;
+      if (active && $('walle-context')) updateWalleContext(active, walleSessionCards());
+    }
+    persistSessionSnapshot();
+    updateModelPickerButtons();
+  }
+
+  function appendWalleModelSelection(body, card) {
+    if (!body || !card) return body;
+    const selected = selectedWalleModelIds(card);
+    if (selected.modelId) {
+      body.model_id = selected.modelId;
+      body.model = selected.modelId;
+      body.model_provider = selected.provider || '';
+      body.provider = selected.provider || '';
+      body.model_registry_id = selected.registryId || '';
+      body.model_provider_id = selected.providerId || '';
+      body.modelPinned = true;
+      body.allowProviderFallback = false;
+    }
+    return body;
+  }
+
+  async function chooseWallePhoneModel(choice) {
+    const sessionId = state.modelPicker.sessionId || state.activeSession?.id || '';
+    if (!sessionId) return;
+    const item = choice === 'auto' ? null : state.modelPicker.models[Number(choice)];
+    if (choice !== 'auto' && !item) return;
+    const input = $(state.modelPicker.inputId) || composerElement('input');
+    try {
+      setComposerStatus('Saving model for this session...', '', input);
+      const body = item
+        ? {
+          session_id: sessionId,
+          model_id: item.modelId,
+          model_provider: item.provider,
+          model_registry_id: item.id || '',
+          model_provider_id: item.providerId || '',
+          scope: 'session',
+          pinned: true,
+        }
+        : {
+          session_id: sessionId,
+          model_id: '',
+          model_provider: '',
+          scope: 'session',
+          pinned: false,
+        };
+      await sendRemoteMessage('wall_e.set_model', body);
+      applyWalleModelLocally(sessionId, item);
+      closeModelPicker();
+      setComposerStatus(item ? `Model set to ${item.label}.` : 'Model reset to auto routing.', 'ok', input);
+    } catch (err) {
+      state.modelPicker.error = remoteSendErrorMessage(err);
+      renderModelPickerSheet();
+      setComposerStatus(state.modelPicker.error, 'error', input);
+    }
+  }
+
   function formatBytes(bytes) {
     const value = Number(bytes) || 0;
     if (value < 1024) return `${value} B`;
@@ -3874,6 +4553,7 @@
     setComposerText('', { input });
     state.promptHistory.index = -1;
     state.promptHistory.draft = '';
+    updatePromptHistoryStrip({ hide: true });
     autoSizeComposer(input);
     setComposerStatus('', '');
     hideMobileSkillPicker();
@@ -3891,6 +4571,7 @@
     state.promptHistory.requestSeq += 1;
     state.promptHistory.applying = false;
     state.promptHistory.loadPromise = null;
+    updatePromptHistoryStrip({ hide: true });
   }
 
   function normalizePromptHistoryEntries(items) {
@@ -3956,14 +4637,59 @@
     return promise;
   }
 
-  function setComposerTextFromHistory(text) {
+  function promptHistoryMeta() {
+    const prompts = state.promptHistory.prompts || [];
+    const index = state.promptHistory.index;
+    if (index < 0 || !prompts.length) return '';
+    return `Prompt ${index + 1} of ${prompts.length}. Tap Edit to open the keyboard, or Send to reuse it.`;
+  }
+
+  function updatePromptHistoryStrip(opts = {}) {
+    const strip = $('prompt-history-strip');
+    if (!strip) return;
+    if (opts.hide || state.promptHistory.index < 0) {
+      strip.hidden = true;
+      return;
+    }
+    const prompts = state.promptHistory.prompts || [];
+    const index = state.promptHistory.index;
+    strip.hidden = false;
+    const title = $('prompt-history-title');
+    const meta = $('prompt-history-meta');
+    if (title) title.textContent = 'Recalled prompt';
+    if (meta) meta.textContent = promptHistoryMeta();
+    const prev = $('prompt-history-prev');
+    const next = $('prompt-history-next');
+    if (prev) prev.disabled = index <= 0;
+    if (next) next.disabled = index < 0 || index >= prompts.length;
+  }
+
+  function finishPromptHistoryEditing() {
+    const input = composerElement('input');
+    if (!input) return;
+    const text = getComposerText(input);
+    setComposerText(text, { input, focus: true, cursor: text.length });
+    setComposerStatus('Editing recalled prompt.', 'ok');
+  }
+
+  function closePromptHistoryStrip() {
+    const input = composerElement('input');
+    state.promptHistory.index = -1;
+    state.promptHistory.draft = input ? getComposerText(input) : '';
+    updatePromptHistoryStrip({ hide: true });
+    setComposerStatus('Prompt history controls hidden.', '');
+  }
+
+  function setComposerTextFromHistory(text, opts = {}) {
     const input = composerElement('input');
     if (!input) return;
     state.promptHistory.applying = true;
-    setComposerText(text || '', { input });
+    setComposerText(text || '', { input, focus: opts.focus === true, cursor: opts.focus === true ? undefined : false });
+    if (opts.focus !== true && document.activeElement === input) input.blur();
     autoSizeComposer(input);
     hideMobileSkillPicker();
     updateComposerState(input);
+    updatePromptHistoryStrip();
     state.promptHistory.applying = false;
   }
 
@@ -3986,6 +4712,7 @@
       if (state.promptHistory.index >= prompts.length) {
         state.promptHistory.index = -1;
         setComposerTextFromHistory(state.promptHistory.draft || '');
+        updatePromptHistoryStrip({ hide: true });
         setComposerStatus(state.promptHistory.draft ? 'Draft restored.' : 'Back to current draft.', 'ok');
         return true;
       }
@@ -4184,6 +4911,7 @@
     const button = composerElement('send', input);
     if (!input || !button) return;
     const text = getComposerText(input);
+    applyComposerTextAssistMode(input);
     const hasText = !!text.trim();
     const hasAttachments = state.composerAttachments.length > 0;
     const canMenu = !!state.activeSession;
@@ -4205,6 +4933,7 @@
       button.setAttribute('aria-label', state.composerSending ? 'Sending to Wall-E' : 'Send to Wall-E');
       button.title = 'Send to Wall-E';
     }
+    updateModelPickerButtons();
     const clear = composerElement('clear', input);
     if (clear) {
       clear.hidden = text.length === 0;
@@ -4475,6 +5204,9 @@
     const payload = err?.payload || {};
     const code = payload.error || payload.result?.error || payload.result?.result?.error || err?.message || '';
     const message = payload.message || payload.result?.message || payload.result?.result?.message || '';
+    if (/session_busy/.test(code)) return 'The agent is still working. This reply will stay queued and retry automatically.';
+    if (/session_input_in_flight/.test(code)) return 'Another phone reply is already being delivered. This reply will retry automatically.';
+    if (/session_waiting_for_approval/.test(code)) return 'This session is waiting for an approval or choice. Respond to that prompt before sending a new message.';
     if (/session_not_live/.test(code)) return 'This session is not live on the Mac. Open a live terminal session before sending.';
     if (/session_not_found/.test(code)) return 'This session no longer exists on the Mac. Refresh the session list.';
     if (/remote_action_not_enabled|approval.respond/.test(code)) return 'This action is not enabled from phone yet.';
@@ -4529,19 +5261,23 @@
     const card = state.activeSession;
     if (!card) return;
     if (!text && !attachments.length) {
-      showSendMenu({ suppressNextClick: false });
+      showSendMenu({ suppressNextClick: false, focus: false });
       return;
     }
     const outboundText = buildComposerTransportText(text, attachments);
     try {
       const messageType = isWalleSession(card) ? 'wall_e.send_message' : 'session.send_message';
       const body = { session_id: card.id, text: outboundText };
-      if (messageType === 'wall_e.send_message' && attachments.length) body.attachments = attachments;
+      if (messageType === 'wall_e.send_message') {
+        if (attachments.length) body.attachments = attachments;
+        appendWalleModelSelection(body, card);
+      }
       const entry = enqueueRemoteReply(messageType, body);
       appendQueuedUserMessage(entry);
       setComposerText('', { input, focus: false, cursor: false });
       state.promptHistory.index = -1;
       state.promptHistory.draft = '';
+      updatePromptHistoryStrip({ hide: true });
       autoSizeComposer(input);
       clearComposerAttachments();
       updateComposerState(input);
@@ -4566,12 +5302,14 @@
     try {
       const body = { session_id: card.id, text: outboundText };
       if (attachments.length) body.attachments = attachments;
+      appendWalleModelSelection(body, card);
       const entry = enqueueRemoteReply('wall_e.send_message', body);
       appendQueuedUserMessage(entry);
       state.walle.draft = '';
       setComposerText('', { input, focus: false, cursor: false });
       state.promptHistory.index = -1;
       state.promptHistory.draft = '';
+      updatePromptHistoryStrip({ hide: true });
       autoSizeComposer(input);
       clearComposerAttachments();
       updateComposerState(input);
@@ -4863,20 +5601,43 @@
   async function createSession(event) {
     event.preventDefault();
     const cwd = $('new-session-project').value || undefined;
-    const agent = $('new-session-agent').value;
+    const agentSelect = $('new-session-agent');
+    const agent = agentSelect.value;
+    const agentLabel = agentSelect.selectedOptions?.[0]?.textContent?.trim() || agent;
     const prompt = $('new-session-prompt').value.trim();
-    const cmd = agent === 'codex' ? 'codex' : agent === 'gemini' ? 'gemini' : agent === 'shell' ? undefined : 'claude';
-    const args = prompt ? [prompt] : [];
+    const isWalle = agent === 'walle';
+    const cmd = agent === 'codex'
+      ? 'codex'
+      : agent === 'gemini'
+        ? 'gemini'
+        : agent === 'shell'
+          ? undefined
+          : isWalle
+            ? 'walle'
+            : 'claude';
+    const args = prompt && !isWalle ? [prompt] : [];
     await withStepUp({
       title: 'Confirm new session',
-      copy: `Spawn ${agent} in ${compactPath(cwd || 'the selected project')}.`,
+      copy: `Spawn ${agentLabel} in ${compactPath(cwd || 'the selected project')}.`,
       label: 'Face ID & Spawn',
       action: async () => {
         const id = randomId();
-        await sendWs({ type: 'create', id, cwd, cmd, args });
+        const payload = { type: 'create', id, cwd, cmd, args };
+        if (isWalle) {
+          Object.assign(payload, {
+            label: 'Wall-E Coding',
+            agentType: 'walle',
+            agentMode: 'coding',
+            agentKind: 'walle-coding',
+            taskType: 'coding',
+            _skipProjectConfig: true,
+          });
+          if (prompt) payload.initialMessage = prompt;
+        }
+        await sendWs(payload);
         $('new-session-sheet').hidden = true;
         await refresh();
-        const card = { id, title: 'New session', cwd, agent, lane: 'running', status: 'running' };
+        const card = { id, title: agentLabel, cwd, agent, lane: 'running', status: 'running' };
         state.sessions.unshift(card);
         openDetail(id);
       },
@@ -4915,9 +5676,23 @@
     $('detail-send').addEventListener('click', handleSendButtonClick);
     $('detail-send').addEventListener('contextmenu', handleSendButtonContextMenu);
     $('detail-send').addEventListener('keydown', handleSendButtonKeydown);
+    $('detail-model')?.addEventListener('click', () => openModelPickerForActiveSession($('detail-input')));
+    $('model-picker-close')?.addEventListener('click', closeModelPicker);
+    $('model-picker-sheet')?.addEventListener('click', (event) => {
+      if (event.target?.id === 'model-picker-sheet') {
+        closeModelPicker();
+        return;
+      }
+      const choice = event.target.closest?.('[data-model-choice]');
+      if (choice) chooseWallePhoneModel(choice.dataset.modelChoice);
+    });
     $('detail-clear')?.addEventListener('click', () => clearComposerText());
     $('send-prev-prompt-option')?.addEventListener('click', () => sendPromptHistoryToSession('previous'));
     $('send-next-prompt-option')?.addEventListener('click', () => sendPromptHistoryToSession('next'));
+    $('prompt-history-prev')?.addEventListener('click', () => applyPromptHistoryNavigation('previous'));
+    $('prompt-history-next')?.addEventListener('click', () => applyPromptHistoryNavigation('next'));
+    $('prompt-history-edit')?.addEventListener('click', finishPromptHistoryEditing);
+    $('prompt-history-close')?.addEventListener('click', closePromptHistoryStrip);
     $('send-copy-url-option')?.addEventListener('click', copySessionUrlFromMenu);
     $('send-esc-option')?.addEventListener('click', sendEscapeToSession);
     $('send-attach-image-option')?.addEventListener('click', () => triggerAttachmentInput('image'));
@@ -4935,6 +5710,7 @@
       if (!state.promptHistory.applying) {
         state.promptHistory.index = -1;
         state.promptHistory.draft = getComposerText(event.currentTarget);
+        updatePromptHistoryStrip({ hide: true });
       }
       updateComposerState();
       updateMobileSkillPicker(event.currentTarget);
@@ -4974,6 +5750,10 @@
     $('walle-content')?.addEventListener('click', (event) => {
       const input = $('walle-input');
       if (event.target?.id === 'walle-input') updateMobileSkillPicker(event.target);
+      if (event.target.closest?.('#walle-model')) {
+        openModelPickerForActiveSession(input);
+        return;
+      }
       if (event.target.closest?.('#walle-clear')) clearComposerText(input);
       const attach = event.target.closest?.('[data-walle-attach]');
       if (attach) triggerAttachmentInput(attach.dataset.walleAttach === 'image' ? 'image' : 'file');
@@ -5019,7 +5799,10 @@
       if (!shouldKeepSendMenuOpen(event.target)) hideSendMenu();
     });
     document.addEventListener('keydown', (event) => {
-      if (event.key === 'Escape') hideSendMenu();
+      if (event.key === 'Escape') {
+        hideSendMenu();
+        closeModelPicker();
+      }
     });
     $('stepup-cancel').addEventListener('click', () => {
       $('stepup-sheet').hidden = true;
@@ -5045,6 +5828,9 @@
       applySearchSuggestion(chip.dataset.searchSuggestion || '');
     });
     window.addEventListener('hashchange', handleDeepLink);
+    window.addEventListener('resize', updateMobileViewportInset);
+    window.visualViewport?.addEventListener?.('resize', updateMobileViewportInset);
+    window.visualViewport?.addEventListener?.('scroll', updateMobileViewportInset);
     window.addEventListener('online', () => {
       recoverMobileConnection('online').finally(() => scheduleRemoteOutboxDrain(0));
     });
@@ -5078,6 +5864,7 @@
 
   async function init() {
     loadThemePreference();
+    updateMobileViewportInset();
     configureComposerInput();
     bindEvents();
     loadRemoteOutbox();