create-walle 0.9.21 → 0.9.22

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

@@ -40,6 +40,9 @@
     walle: {
       sessionId: null,
       draft: '',
+      alerts: [],
+      health: null,
+      healthTest: null,
     },
     detailScrollLock: {
       locked: false,
@@ -122,13 +125,22 @@
       lastTapX: 0,
       lastTapY: 0,
     },
+    appRuntime: {
+      loaded: null,
+      latest: null,
+      reloadRequired: false,
+      reloadReason: '',
+    },
   };
 
   const $ = (id) => document.getElementById(id);
-  const MOBILE_ASSET_VERSION = '20260519-walle-phone-model-picker';
+  const MOBILE_ASSET_VERSION = '20260519-walle-default-chat';
+  const APP_RELOAD_CHANNEL_NAME = 'ctm-app-update';
   const THEME_STORAGE_KEY = 'ctm.theme.mode';
   const MOBILE_ATTACHMENT_MAX_BYTES = 10 * 1024 * 1024;
   const SEND_LONG_PRESS_MS = 520;
+  const DETAIL_SPLIT_QUERY = '(min-width: 900px) and (min-height: 650px)';
+  const WALLE_SINGLETON_CHAT_ID = 'default';
   const MOBILE_SESSION_CACHE_KEY = 'ctm.mobile.sessionSnapshot.v1';
   const MOBILE_SESSION_CACHE_MAX_AGE_MS = 12 * 60 * 60 * 1000;
   const MOBILE_SESSION_CACHE_MAX_SESSIONS = 500;
@@ -137,6 +149,15 @@
   const REMOTE_OUTBOX_RETRY_DELAYS_MS = [1200, 3000, 7000, 15000, 30000, 60000, 120000];
   const SW_RELOAD_SESSION_KEY = 'ctm.mobile.swReloaded';
   const SW_RELOAD_SESSION_VALUE = MOBILE_ASSET_VERSION;
+  const AUTH_RECOVERY_CODES = new Set([
+    'ip_locked',
+    'unauthorized',
+    'invalid_token',
+    'missing_token',
+    'token_revoked',
+    'token_expired',
+    'device_token_lookup_failed',
+  ]);
   const PROVIDER_GENERATED_USER_CONTEXT_PATTERNS = [
     /^<environment_context>/i,
     /^<permissions instructions>/i,
@@ -146,11 +167,193 @@
     /^<skill>\s*<name>/i,
     /^# AGENTS\.md instructions for\b/i,
   ];
+  let appReloadChannel = null;
+
+  function normalizeAppVersionInfo(info) {
+    if (!info || typeof info !== 'object') return null;
+    const version = String(info.version || '').trim();
+    const buildId = String(info.buildId || '').trim();
+    const product = String(info.product || 'create-walle').trim();
+    const components = info.components && typeof info.components === 'object' ? {
+      ctm: String(info.components.ctm || '').trim(),
+      wallE: String(info.components.wallE || '').trim(),
+    } : {};
+    if (!version && !buildId) return null;
+    return { version, buildId, product, components };
+  }
+
+  function appVersionIdentity(info) {
+    const normalized = normalizeAppVersionInfo(info);
+    if (!normalized) return '';
+    return normalized.buildId || `${normalized.product}:${normalized.version}:${normalized.components.ctm || ''}:${normalized.components.wallE || ''}`;
+  }
+
+  function sameAppVersionIdentity(a, b) {
+    const aid = appVersionIdentity(a);
+    const bid = appVersionIdentity(b);
+    return !!aid && !!bid && aid === bid;
+  }
+
+  function initAppReloadChannel() {
+    if (appReloadChannel || typeof BroadcastChannel === 'undefined') return appReloadChannel;
+    try {
+      appReloadChannel = new BroadcastChannel(APP_RELOAD_CHANNEL_NAME);
+      appReloadChannel.onmessage = (event) => {
+        const data = event?.data;
+        if (!data || data.type !== 'reload-required') return;
+        requestInstalledUpdateReload({
+          server: data.server,
+          reason: data.reason || 'peer-detected',
+          source: 'broadcast',
+          rebroadcast: false,
+        });
+      };
+    } catch {
+      appReloadChannel = null;
+    }
+    return appReloadChannel;
+  }
+
+  function broadcastInstalledUpdateReload(server, reason) {
+    const channel = initAppReloadChannel();
+    if (!channel) return;
+    try {
+      channel.postMessage({ type: 'reload-required', server, reason, at: Date.now() });
+    } catch {}
+  }
+
+  function handleServerHello(msg) {
+    markHostReachable();
+    const server = normalizeAppVersionInfo(msg?.appVersion);
+    if (!server) return;
+    if (!state.appRuntime.loaded) {
+      state.appRuntime.loaded = server;
+      state.appRuntime.latest = server;
+      return;
+    }
+    state.appRuntime.latest = server;
+    if (!sameAppVersionIdentity(state.appRuntime.loaded, server)) {
+      requestInstalledUpdateReload({ server, reason: 'server-version-changed', source: 'hello' });
+    }
+  }
+
+  function isEditableElement(el) {
+    if (!el || el === document.body || el === document.documentElement) return false;
+    if (el.isContentEditable) return true;
+    const tag = String(el.tagName || '').toLowerCase();
+    if (tag === 'textarea' || tag === 'input' || tag === 'select') return true;
+    return el.getAttribute?.('role') === 'textbox';
+  }
+
+  function isMobileReloadUnsafe() {
+    if (isEditableElement(document.activeElement)) return true;
+    if (state.activeSession || state.activeTab === 'walle') return true;
+    if (!$('send-menu')?.hidden) return true;
+    for (const id of ['stepup-sheet', 'model-picker-sheet', 'new-session-sheet']) {
+      const sheet = $(id);
+      if (sheet && !sheet.hidden) return true;
+    }
+    return false;
+  }
+
+  function showInstalledUpdateReloadBanner(server) {
+    const banner = $('app-reload-banner');
+    const msg = $('app-reload-msg');
+    if (!banner) return;
+    const loaded = state.appRuntime.loaded || {};
+    const latest = normalizeAppVersionInfo(server) || state.appRuntime.latest || {};
+    if (msg) {
+      const from = loaded.version ? `v${loaded.version}` : 'old UI';
+      const to = latest.version ? `v${latest.version}` : 'the installed update';
+      msg.textContent = `Reload to use ${to}. This page is still running ${from}.`;
+    }
+    banner.hidden = false;
+  }
+
+  function requestInstalledUpdateReload(opts = {}) {
+    const server = normalizeAppVersionInfo(opts.server) || state.appRuntime.latest;
+    state.appRuntime.latest = server || state.appRuntime.latest;
+    state.appRuntime.reloadRequired = true;
+    state.appRuntime.reloadReason = opts.reason || 'app-updated';
+    if (opts.rebroadcast !== false) broadcastInstalledUpdateReload(server, state.appRuntime.reloadReason);
+    if (!isMobileReloadUnsafe()) {
+      reloadForInstalledUpdate(opts.source || 'auto');
+      return;
+    }
+    showInstalledUpdateReloadBanner(server);
+  }
+
+  function reloadForInstalledUpdate(source = 'button') {
+    const detail = {
+      source,
+      reason: state.appRuntime.reloadReason || 'app-updated',
+      loaded: state.appRuntime.loaded,
+      latest: state.appRuntime.latest,
+    };
+    try { sessionStorage.setItem('ctm_mobile_app_update_reload', JSON.stringify({ ...detail, at: Date.now() })); } catch {}
+    if (typeof window.__ctmAppReload === 'function') {
+      window.__ctmAppReload(detail);
+      return;
+    }
+    location.reload();
+  }
+
+  window.__ctmMobileHandleServerHello = handleServerHello;
+  window.__ctmMobileRequestInstalledUpdateReload = requestInstalledUpdateReload;
+  window.__ctmMobileSetLoadedAppForTest = (info) => {
+    state.appRuntime.loaded = normalizeAppVersionInfo(info);
+  };
+  window.__ctmMobileAppRuntime = state.appRuntime;
 
   function isDetailOpen() {
     return !!$('detail-view')?.classList.contains('active');
   }
 
+  function isDetailSplitLayout() {
+    try {
+      return !!(window.matchMedia && window.matchMedia(DETAIL_SPLIT_QUERY).matches);
+    } catch {
+      return false;
+    }
+  }
+
+  function setBackgroundInteractive(interactive) {
+    const main = $('app-main');
+    const nav = document.querySelector('.bottom-nav');
+    if (interactive) {
+      main?.removeAttribute('aria-hidden');
+      nav?.removeAttribute('aria-hidden');
+      if (main && 'inert' in main) main.inert = false;
+      if (nav && 'inert' in nav) nav.inert = false;
+      return;
+    }
+    main?.setAttribute('aria-hidden', 'true');
+    nav?.setAttribute('aria-hidden', 'true');
+    if (main && 'inert' in main) main.inert = true;
+    if (nav && 'inert' in nav) nav.inert = true;
+  }
+
+  function syncDetailLayoutMode() {
+    const split = isDetailSplitLayout();
+    const detail = $('detail-view');
+    document.documentElement.classList.toggle('detail-split-layout', split);
+    document.body.classList.toggle('detail-split-layout', split);
+    const open = isDetailOpen();
+    document.documentElement.classList.toggle('detail-open', open);
+    document.body.classList.toggle('detail-open', open);
+    if (detail) {
+      detail.setAttribute('role', split ? 'region' : 'dialog');
+      detail.setAttribute('aria-modal', split ? 'false' : 'true');
+    }
+    if (!open) return;
+    if (split) {
+      unlockDetailBackgroundScroll();
+      setBackgroundInteractive(true);
+    } else {
+      lockDetailBackgroundScroll();
+    }
+  }
+
   function activeTimelineBox() {
     if (isDetailOpen()) return $('detail-messages');
     if (state.activeTab === 'walle') return $('walle-messages') || $('detail-messages');
@@ -184,7 +387,6 @@
         attachments: 'composer-attachments',
         clear: 'detail-clear',
         send: 'detail-send',
-        model: 'detail-model',
         picker: 'mobile-skill-picker',
     };
     return $(ids[kind]);
@@ -430,6 +632,10 @@
   }
 
   function lockDetailBackgroundScroll() {
+    if (isDetailSplitLayout()) {
+      setBackgroundInteractive(true);
+      return;
+    }
     if (state.detailScrollLock.locked) return;
     const scrollY = window.scrollY || document.documentElement.scrollTop || 0;
     state.detailScrollLock.locked = true;
@@ -441,12 +647,7 @@
     document.body.style.left = '0';
     document.body.style.right = '0';
     document.body.style.width = '100%';
-    const main = $('app-main');
-    const nav = document.querySelector('.bottom-nav');
-    main?.setAttribute('aria-hidden', 'true');
-    nav?.setAttribute('aria-hidden', 'true');
-    if (main && 'inert' in main) main.inert = true;
-    if (nav && 'inert' in nav) nav.inert = true;
+    setBackgroundInteractive(false);
   }
 
   function unlockDetailBackgroundScroll() {
@@ -461,12 +662,7 @@
     document.body.style.left = '';
     document.body.style.right = '';
     document.body.style.width = '';
-    const main = $('app-main');
-    const nav = document.querySelector('.bottom-nav');
-    main?.removeAttribute('aria-hidden');
-    nav?.removeAttribute('aria-hidden');
-    if (main && 'inert' in main) main.inert = false;
-    if (nav && 'inert' in nav) nav.inert = false;
+    setBackgroundInteractive(true);
     window.scrollTo(0, scrollY);
   }
 
@@ -506,11 +702,39 @@
       const err = new Error(json?.error || json?.message || `HTTP ${res.status}`);
       err.status = res.status;
       err.payload = json;
+      if (shouldRecoverMobileAuth(err)) beginMobileAuthRecovery(err);
       throw err;
     }
     return json;
   }
 
+  function shouldRecoverMobileAuth(err) {
+    const code = String(err?.payload?.error || err?.message || '');
+    return err?.status === 401 || AUTH_RECOVERY_CODES.has(code);
+  }
+
+  let mobileAuthRecoveryStarted = false;
+  function beginMobileAuthRecovery(err) {
+    if (mobileAuthRecoveryStarted) return;
+    mobileAuthRecoveryStarted = true;
+    const code = String(err?.payload?.error || err?.message || 'auth_required');
+    state.auth = null;
+    setConnection('offline', 'Sign in');
+    toast(code === 'ip_locked'
+      ? 'This phone session is locked after failed auth. Pair again from the Mac.'
+      : 'This phone session is signed out. Pair again from the Mac.');
+    fetch('/api/auth/logout-local', {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: { 'content-type': 'application/json' },
+      body: '{}',
+    }).catch(() => {}).finally(() => {
+      const target = new URL('/m/claim', window.location.origin);
+      target.searchParams.set('reason', code);
+      window.location.href = target.toString();
+    });
+  }
+
   function ageLabel(value) {
     const ms = value ? Date.parse(value) || Number(value) || 0 : 0;
     if (!ms) return '';
@@ -620,10 +844,17 @@
       .trim();
   }
 
+  function modelProviderLabel(provider) {
+    const key = providerKey(provider);
+    if (key === 'anthropic') return 'Claude';
+    if (key === 'openai') return 'GPT';
+    return providerLabel(key);
+  }
+
   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);
+    const providerText = modelProviderLabel(provider);
     if (providerText && model) return `${providerText} · ${model}`;
     if (model) return model;
     return 'Auto model';
@@ -666,15 +897,35 @@
     return `${count} ${singular}${count === 1 ? '' : 's'}`;
   }
 
+  function isMainBranch(branch, wt) {
+    const value = String(branch || '').trim();
+    return wt?.isMain === true || value === 'main' || value === 'master';
+  }
+
   function sessionWorktreeDiff(card) {
     const wt = card?.worktreeStatus || card?.worktree || card?.meta?.worktreeStatus || null;
-    if (!wt || wt.needsAttention === false || wt.isMain) return null;
-    const branch = String(wt.branch || card?.branch || card?.gitBranch || '').trim();
-    if (!branch || branch === 'main' || branch === 'master') return null;
+    if (!wt) return null;
+    const branch = String(wt.branch || card?.branch || card?.gitBranch || (wt.isMain ? 'main' : '')).trim();
+    if (!branch) return null;
+    const isMain = isMainBranch(branch, wt);
     const dirtyFiles = positiveCount(wt.dirtyFiles);
-    const unmergedCommits = positiveCount(wt.unmergedCommits);
+    const unmergedCommits = isMain
+      ? (
+        positiveCount(wt.unpushedCommits) ||
+        positiveCount(wt.mainRemote?.ahead) ||
+        positiveCount(wt.ahead) ||
+        positiveCount(wt.unmergedCommits)
+      )
+      : (positiveCount(wt.unmergedCommits) || positiveCount(wt.ahead));
     if (dirtyFiles <= 0 && unmergedCommits <= 0) return null;
-    return { branch, dirtyFiles, unmergedCommits };
+    return {
+      branch,
+      dirtyFiles,
+      unmergedCommits,
+      isMain,
+      worktreeName: wt.worktreeName || '',
+      worktreePath: wt.worktreePath || card?.project || card?.cwd || '',
+    };
   }
 
   function sessionDiffTags(card) {
@@ -683,15 +934,20 @@
     const chips = [];
     if (diff.dirtyFiles > 0) {
       const label = pluralize(diff.dirtyFiles, 'file');
-      const title = `${diff.branch}: ${pluralize(diff.dirtyFiles, 'uncommitted file')}`;
+      const title = diff.isMain
+        ? `${diff.branch}: ${pluralize(diff.dirtyFiles, 'uncommitted file')} on main`
+        : `${diff.branch}: ${pluralize(diff.dirtyFiles, 'uncommitted file')}`;
       chips.push(`<span class="session-diff-chip files" title="${esc(title)}" aria-label="${esc(title)}">${esc(label)}</span>`);
     }
     if (diff.unmergedCommits > 0) {
       const label = pluralize(diff.unmergedCommits, 'commit');
-      const title = `${diff.branch}: ${pluralize(diff.unmergedCommits, 'commit')} not on main`;
+      const title = diff.isMain
+        ? `${diff.branch}: ${pluralize(diff.unmergedCommits, 'local commit')} on main`
+        : `${diff.branch}: ${pluralize(diff.unmergedCommits, 'commit')} not on main`;
       chips.push(`<span class="session-diff-chip commits" title="${esc(title)}" aria-label="${esc(title)}">${esc(label)}</span>`);
     }
-    return `<span class="session-diff-tags" aria-label="${esc(`Branch diff for ${diff.branch}`)}">${chips.join('')}</span>`;
+    const label = diff.isMain ? `Main branch changes for ${diff.branch}` : `Branch diff for ${diff.branch}`;
+    return `<span class="session-diff-tags" aria-label="${esc(label)}">${chips.join('')}</span>`;
   }
 
   function randomId() {
@@ -713,6 +969,11 @@
     $('app-title').textContent = tab === 'walle' ? 'Wall-E' : tab.charAt(0).toUpperCase() + tab.slice(1);
     if (tab === 'search') setTimeout(() => $('search-input')?.focus(), 50);
     render();
+    if (tab === 'walle') {
+      refreshWalleHealth({ quiet: true }).then((payload) => {
+        if (payload && state.activeTab === 'walle') renderWalle();
+      }).catch(() => {});
+    }
     if (tab === 'more') loadPushState().then(() => renderMore()).catch(() => renderMore());
   }
 
@@ -785,6 +1046,10 @@
       worktree.worktreePath,
       worktree.state,
       worktree.summary,
+      worktree.isMain ? 'main branch local work' : '',
+      worktree.dirtyFiles ? `${worktree.dirtyFiles} changed files` : '',
+      worktree.unpushedCommits ? `${worktree.unpushedCommits} local commits` : '',
+      worktree.unmergedCommits ? `${worktree.unmergedCommits} unmerged commits` : '',
       ...(card.evidence || []),
       ...snippets,
     ].filter(Boolean).join(' '));
@@ -888,8 +1153,9 @@
     const diffTags = sessionDiffTags(card);
     const searchMatch = renderHomeSearchMatch(card, opts.searchTokens || []);
     const action = opts.action || card.actionLabel || 'Open';
+    const selected = state.activeSession && state.activeSession.id === card.id;
     return `
-      <button class="session-row" type="button" data-open-session="${esc(card.id)}">
+      <button class="session-row ${selected ? 'selected' : ''}" type="button" data-open-session="${esc(card.id)}" ${selected ? 'aria-pressed="true"' : ''}>
         <span class="rail ${esc(lane)}"></span>
         <span class="session-main">
           <span class="session-title-line">
@@ -909,6 +1175,72 @@
     `;
   }
 
+  function worktreeSummaryItems(sessions) {
+    const seen = new Set();
+    const items = [];
+    for (const card of sessions || []) {
+      const diff = sessionWorktreeDiff(card);
+      if (!diff || !card?.id) continue;
+      const key = `${diff.branch}\n${diff.worktreePath || card.project || card.cwd || card.id}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      const changedCount = diff.dirtyFiles + diff.unmergedCommits;
+      const lastActivity = Date.parse(card.lastActivity || '') || 0;
+      items.push({ card, diff, changedCount, lastActivity });
+    }
+    return items.sort((a, b) => {
+      if (a.diff.isMain !== b.diff.isMain) return a.diff.isMain ? -1 : 1;
+      if (b.changedCount !== a.changedCount) return b.changedCount - a.changedCount;
+      return b.lastActivity - a.lastActivity;
+    });
+  }
+
+  function renderWorktreeSummary(view) {
+    const items = worktreeSummaryItems(view.sessions);
+    if (!items.length) return '';
+    const totalFiles = items.reduce((sum, item) => sum + item.diff.dirtyFiles, 0);
+    const totalCommits = items.reduce((sum, item) => sum + item.diff.unmergedCommits, 0);
+    const stats = [
+      totalFiles > 0 ? pluralize(totalFiles, 'file') : '',
+      totalCommits > 0 ? pluralize(totalCommits, 'commit') : '',
+    ].filter(Boolean).join(' · ');
+    const rows = items.slice(0, 4).map(({ card, diff }) => {
+      const title = diff.isMain ? 'Main branch' : diff.branch;
+      const metaParts = [
+        diff.isMain ? 'primary checkout' : (diff.worktreeName || 'worktree'),
+        compactPath(diff.worktreePath || card.project || card.cwd || ''),
+      ].filter(Boolean);
+      return `
+        <button class="worktree-summary-row ${diff.isMain ? 'main' : ''}" type="button" data-open-worktree-session="${esc(card.id)}" data-worktree-branch="${esc(diff.branch)}" aria-label="${esc(`Open ${title} changes`)}">
+          <span class="worktree-summary-copy">
+            <span class="worktree-summary-title">${esc(title)}</span>
+            <span class="worktree-summary-meta">${esc(metaParts.join(' · '))}</span>
+          </span>
+          ${sessionDiffTags(card)}
+        </button>
+      `;
+    }).join('');
+    const remaining = items.length - 4;
+    const more = remaining > 0
+      ? `<div class="worktree-summary-more">${esc(`+${remaining} more changed ${remaining === 1 ? 'worktree' : 'worktrees'}`)}</div>`
+      : '';
+    return `
+      <section class="worktree-summary" aria-label="Changed files and commits">
+        <div class="worktree-summary-head">
+          <span>
+            <span class="worktree-summary-kicker">Local work</span>
+            <strong>${view.searchActive ? 'Matching branch changes' : 'Branch changes'}</strong>
+          </span>
+          <span class="worktree-summary-stats">${esc(stats || pluralize(items.length, 'worktree'))}</span>
+        </div>
+        <div class="worktree-summary-list">
+          ${rows}
+          ${more}
+        </div>
+      </section>
+    `;
+  }
+
   function renderLoadingRows(label = 'Loading CTM sessions...') {
     return `<div class="empty-state">${esc(label)}</div>`;
   }
@@ -933,6 +1265,7 @@
     const byLane = (lane) => view.sessions.filter((s) => s.lane === lane);
     const empty = (text) => view.searchActive ? 'No matches.' : text;
     $('status-content').innerHTML = [
+      renderWorktreeSummary(view),
       section('Needs you', counts.needs, byLane('needs_user').map((card) => sessionRow(card, { action: card.actionKind === 'approval_needed' ? 'Review' : 'Open', searchTokens: view.tokens })), empty('No agents are waiting on you.'), 'needs_user'),
       section('Running', counts.running, byLane('running').map((card) => sessionRow(card, { action: 'Watch', searchTokens: view.tokens })), empty('No active agents right now.'), 'running'),
       section('Ready review', counts.review, byLane('ready_review').map((card) => sessionRow(card, { action: 'Review', searchTokens: view.tokens })), empty('No finished work is waiting for review.'), 'ready_review'),
@@ -1241,17 +1574,253 @@
     $('agents-content').innerHTML = rows.length ? rows.join('') : '<div class="empty-state">No CTM sessions are available.</div>';
   }
 
+  function isWalleSingletonChat(card) {
+    if (!card) return false;
+    if (card._singleton_walle_chat === true || card.singletonWalleChat === true) return true;
+    const id = String(card.id || card.sessionId || '').trim();
+    return id === WALLE_SINGLETON_CHAT_ID && hasWalleChatIdentity(card) && !hasWalleCodingIdentity(card);
+  }
+
+  function singletonWalleChatCard() {
+    return {
+      id: WALLE_SINGLETON_CHAT_ID,
+      title: 'Wall-E',
+      label: 'Wall-E',
+      agent: 'walle',
+      provider: 'walle',
+      type: 'walle',
+      session_type: 'walle',
+      runtime_type: 'walle',
+      native_walle_session: true,
+      nativeWalleSession: true,
+      walle_chat_session: true,
+      walleChatSession: true,
+      agentMode: 'chat',
+      agentKind: 'walle-chat',
+      taskType: 'chat',
+      project: '',
+      cwd: '',
+      lane: 'idle',
+      status: 'idle',
+      actionLabel: 'Open',
+      goal: 'Wall-E chat',
+      evidence: ['default chat'],
+      lastActivity: state.standupGeneratedAt || new Date().toISOString(),
+      singletonWalleChat: true,
+      _singleton_walle_chat: true,
+      agentCapabilities: {
+        structuredTranscript: true,
+        promptNavigation: 'none',
+        review: false,
+        resume: false,
+        terminalInput: false,
+        terminalControl: false,
+      },
+    };
+  }
+
   function walleSessionCards() {
-    return state.sessions.filter((s) => isWalleSession(s) || /walle|wall-e/i.test(`${s.title || ''}`));
+    const cards = state.sessions.filter((s) => isWalleChatSession(s));
+    return cards.length ? cards : [singletonWalleChatCard()];
   }
 
   function selectedWalleSession(cards = walleSessionCards()) {
-    const preferred = state.walle.sessionId || (isWalleSession(state.activeSession) ? state.activeSession.id : '');
+    const preferred = state.walle.sessionId || (isWalleChatSession(state.activeSession) ? state.activeSession.id : '');
     return cards.find((s) => s.id === preferred) || cards[0] || null;
   }
 
+  function defaultWalleChatCwd() {
+    const project = state.projects.find((item) => item && (item.path || item.cwd));
+    return project?.path || project?.cwd || state.activeSession?.project || state.activeSession?.cwd || '';
+  }
+
+  function localWalleChatCard(id, cwd) {
+    const now = new Date().toISOString();
+    return {
+      id,
+      title: 'Wall-E Chat',
+      label: 'Wall-E Chat',
+      agent: 'walle',
+      provider: 'walle',
+      type: 'walle',
+      session_type: 'walle',
+      runtime_type: 'walle',
+      native_walle_session: true,
+      nativeWalleSession: true,
+      walle_chat_session: true,
+      walleChatSession: true,
+      agentMode: 'chat',
+      agentKind: 'walle-chat',
+      taskType: 'chat',
+      project: cwd || '',
+      cwd: cwd || '',
+      lane: 'running',
+      status: 'starting',
+      actionLabel: 'Open',
+      goal: 'Wall-E chat is starting.',
+      evidence: ['chat'],
+      lastActivity: now,
+      agentCapabilities: {
+        structuredTranscript: true,
+        promptNavigation: 'none',
+        review: false,
+        resume: false,
+        terminalInput: false,
+        terminalControl: false,
+      },
+    };
+  }
+
+  async function startWalleChat() {
+    if (!state.auth?.scopes?.includes('create') && !state.auth?.scopes?.includes('admin')) {
+      toast('This phone token needs create scope. Upgrade it on the Mac.');
+      return;
+    }
+    const cwd = defaultWalleChatCwd();
+    await withStepUp({
+      title: 'Start Wall-E chat',
+      copy: `Start a Wall-E chat${cwd ? ` in ${compactPath(cwd)}` : ''}.`,
+      label: 'Face ID & Start',
+      action: async () => {
+        const id = randomId();
+        const payload = {
+          type: 'create',
+          id,
+          cwd: cwd || undefined,
+          cmd: 'walle',
+          args: [],
+          label: 'Wall-E Chat',
+          agentType: 'walle',
+          agentMode: 'chat',
+          agentKind: 'walle-chat',
+          taskType: 'chat',
+          _skipProjectConfig: true,
+        };
+        await sendWs(payload);
+        const card = localWalleChatCard(id, cwd);
+        state.sessions = [card, ...state.sessions.filter((session) => session.id !== id)];
+        state.walle.sessionId = id;
+        renderWalle();
+      },
+    });
+  }
+
+  function walleHealthCountMeta(health) {
+    const counts = health?.counts || {};
+    const parts = [];
+    if (health?.current_issue) parts.push('current blocker');
+    if (counts.disabled_skills) parts.push(`${counts.disabled_skills} skill${counts.disabled_skills === 1 ? '' : 's'}`);
+    if (counts.integration) parts.push(`${counts.integration} integration${counts.integration === 1 ? '' : 's'}`);
+    if (counts.provider_history) parts.push(`${counts.provider_history} older provider`);
+    if (counts.system) parts.push(`${counts.system} system`);
+    return parts.join(' · ');
+  }
+
+  function walleHealthProviderLabel(provider) {
+    const normalized = String(provider || '').trim();
+    if (!normalized) return 'provider';
+    if (normalized === 'deepseek') return 'DeepSeek';
+    if (normalized === 'openai') return 'OpenAI';
+    if (normalized === 'moonshot') return 'Moonshot / Kimi';
+    return normalized.charAt(0).toUpperCase() + normalized.slice(1);
+  }
+
+  function walleHealthSkillName(item) {
+    if (!item) return '';
+    if (item.skill) return String(item.skill);
+    const service = String(item.service || '');
+    if (service && service !== 'ai_provider' && service !== 'system') return service;
+    const message = String(item.message || '');
+    const quoted = message.match(/Skill\s+"([^"]+)"/i);
+    if (quoted) return quoted[1];
+    const named = message.match(/Skill\s+([A-Za-z0-9_.-]+)/i);
+    return named ? named[1] : '';
+  }
+
+  function walleHealthItemActionHtml(item) {
+    const id = item?.id ? esc(item.id) : '';
+    const type = String(item?.type || '').toLowerCase();
+    const action = String(item?.action || '').toLowerCase();
+    if (type === 'skill_disabled' && id) {
+      return `<button type="button" class="mobile-health-row-action" data-walle-health-action="enable-skill" data-walle-health-alert-id="${id}">Re-enable</button>`;
+    }
+    if (action === 'repair_slack_owner' && id) {
+      return `<button type="button" class="mobile-health-row-action" data-walle-health-action="repair-alert" data-walle-health-alert-id="${id}">Fix</button>`;
+    }
+    if (action === 'gws_reauth' || item?.action_url) {
+      return '<a class="mobile-health-row-action" href="/setup.html">Setup</a>';
+    }
+    return '';
+  }
+
+  function walleHealthGroupHtml(title, items, options = {}) {
+    if (!Array.isArray(items) || !items.length) return '';
+    const open = options.open ? ' open' : '';
+    const rows = items.slice(0, options.limit || 8).map((item) => `
+      <div class="mobile-health-row">
+        <span class="mobile-health-row-dot" aria-hidden="true"></span>
+        <span class="mobile-health-row-copy">${esc(item.message || item.title || item.skill || item.service || 'Service alert')}</span>
+        ${walleHealthItemActionHtml(item)}
+      </div>
+    `).join('');
+    const more = items.length > (options.limit || 8)
+      ? `<div class="mobile-health-more">${items.length - (options.limit || 8)} more in desktop Wall-E</div>`
+      : '';
+    return `
+      <details class="mobile-health-group"${open}>
+        <summary><span>${esc(title)}</span><strong>${items.length}</strong></summary>
+        <div class="mobile-health-group-body">${rows}${more}</div>
+      </details>
+    `;
+  }
+
+  function walleHealthHtml() {
+    const health = state.walle.health;
+    const alerts = state.walle.alerts || [];
+    if (!health || (!alerts.length && health.level === 'ok')) return '';
+    const level = health.level || 'info';
+    const issue = health.current_issue;
+    const meta = walleHealthCountMeta(health);
+    const provider = issue?.provider || health.active_provider?.provider || '';
+    const model = issue?.model || health.active_provider?.model || '';
+    const test = state.walle.healthTest;
+    return `
+      <section id="walle-health-card" class="mobile-health-card ${esc(level)}" aria-label="Wall-E service health">
+        <div class="mobile-health-header">
+          <span class="mobile-health-dot" aria-hidden="true"></span>
+          <div class="mobile-health-copy">
+            <div class="mobile-health-kicker">Service health</div>
+            <h3>${esc(health.title || 'Wall-E services')}</h3>
+            <p>${esc(health.message || '')}</p>
+            ${meta ? `<div class="mobile-health-meta">${esc(meta)}</div>` : ''}
+          </div>
+        </div>
+        ${issue ? `
+          <div class="mobile-health-current">
+            <div class="mobile-health-current-meta">${esc([provider, model].filter(Boolean).join(' / '))}</div>
+            <div class="mobile-health-actions">
+              <button type="button" class="mobile-health-btn primary" data-walle-health-action="test-provider">Test ${esc(walleHealthProviderLabel(provider))}</button>
+              <a class="mobile-health-btn" href="/setup.html">Setup</a>
+              <button type="button" class="mobile-health-icon-btn" data-walle-health-action="dismiss-current" aria-label="Dismiss current Wall-E service alert">&times;</button>
+            </div>
+          </div>
+        ` : ''}
+        ${test ? `<div class="mobile-health-test ${esc(test.ok ? 'ok' : 'error')}">${esc(test.message || '')}</div>` : ''}
+        ${walleHealthGroupHtml('Integrations', health.integration_alerts, { open: !issue })}
+        ${walleHealthGroupHtml('Disabled skills', health.disabled_skills, { open: !issue && !(health.integration_alerts || []).length })}
+        ${walleHealthGroupHtml('Older provider history', health.provider_history)}
+        ${walleHealthGroupHtml('System alerts', health.system_alerts)}
+        <div class="mobile-health-footer">
+          <a href="/#walle" class="mobile-health-link">Open full Wall-E panel</a>
+        </div>
+      </section>
+    `;
+  }
+
   function walleContextHtml(active, cards) {
-    const meta = compactPath(active.project || active.cwd || active.projectPath || '');
+    const meta = isWalleSingletonChat(active)
+      ? 'Main Wall-E chat'
+      : compactPath(active.project || active.cwd || active.projectPath || '');
     const status = active.lane || active.status || 'idle';
     const picker = cards.length > 1
       ? `
@@ -1262,6 +1831,9 @@
           </select>
         </label>`
       : '';
+    const action = isWalleSingletonChat(active)
+      ? '<a class="row-action" href="/#walle" aria-label="Open full Wall-E panel">Full panel</a>'
+      : `<button class="row-action" type="button" data-open-session="${esc(active.id)}" aria-label="Open full Wall-E session">Open</button>`;
     return `
       <div class="walle-context-main">
         <span class="walle-avatar" aria-hidden="true">◆</span>
@@ -1276,7 +1848,7 @@
       <div class="walle-context-actions">
         <span class="state-chip ${esc(status)}">${esc(active.status || active.lane || 'idle')}</span>
         ${picker}
-        <button class="row-action" type="button" data-open-session="${esc(active.id)}" aria-label="Open full Wall-E session">Open</button>
+        ${action}
       </div>
     `;
   }
@@ -1287,6 +1859,7 @@
         <section id="walle-context" class="walle-chat-context" aria-label="Wall-E session context">
           ${walleContextHtml(active, cards)}
         </section>
+        ${walleHealthHtml()}
         <section id="walle-messages" class="detail-messages walle-chat-messages" aria-live="polite">
           <div class="empty-state">Loading Wall-E conversation...</div>
         </section>
@@ -1333,7 +1906,8 @@
     }
     if (state.activeStreamSessionId && state.activeStreamSessionId !== active.id) unsubscribeActiveStream(state.activeStreamSessionId);
     state.activeSession = active;
-    state.activeStreamSessionId = active.id;
+    const singletonChat = isWalleSingletonChat(active);
+    state.activeStreamSessionId = singletonChat ? null : active.id;
     resetDetailTimeline(active.id);
     resetPromptHistory(active.id);
     clearComposerAttachments();
@@ -1341,8 +1915,10 @@
     hideMobileSkillPicker();
     const box = $('walle-messages');
     if (box) box.innerHTML = '<div class="empty-state">Connecting to Wall-E conversation...</div>';
-    subscribeActiveStream(active.id).catch(() => {});
-    warmPromptHistory(active).catch(() => {});
+    if (!singletonChat) {
+      subscribeActiveStream(active.id).catch(() => {});
+      warmPromptHistory(active).catch(() => {});
+    }
     loadMessages(active).catch(() => {});
     return true;
   }
@@ -1351,10 +1927,17 @@
     const cards = walleSessionCards();
     const active = selectedWalleSession(cards);
     if (!active) {
+      const hasCodingSessions = state.sessions.some((session) => isWalleOwnedSession(session) && !isWalleChatSession(session));
       $('walle-content').innerHTML = `
         <div class="walle-empty-chat">
-          <h3>No Wall-E chat is open</h3>
-          <p>Start or open a Wall-E session on the Mac, then this tab will show the live conversation.</p>
+          <span class="walle-empty-icon" aria-hidden="true">◆</span>
+          <h3>Wall-E chat</h3>
+          <p>Chat with Wall-E here. Coding and skills sessions stay in Status and Agents so this tab stays focused.</p>
+          <div class="walle-empty-actions">
+            <button id="walle-start-chat" class="primary-action" type="button">Start chat</button>
+          </div>
+          ${walleHealthHtml()}
+          ${hasCodingSessions ? '<p class="walle-empty-note">Existing Wall-E coding sessions are still available from Status and Agents.</p>' : ''}
         </div>
       `;
       return;
@@ -1366,6 +1949,11 @@
       renderWalleShell(active, cards);
     } else {
       updateWalleContext(active, cards);
+      const health = $('walle-health-card');
+      const nextHealth = walleHealthHtml();
+      if (health && nextHealth) health.outerHTML = nextHealth;
+      else if (health && !nextHealth) health.remove();
+      else if (!health && nextHealth) $('walle-context')?.insertAdjacentHTML('afterend', nextHealth);
     }
     const activated = activateWalleChat(active);
     if (!activated) {
@@ -1541,11 +2129,25 @@
     }
     if (restart?.status === 'blocked') {
       const count = Number(restart.activeSessions || 0);
-      const noun = count === 1 ? 'active session' : 'active sessions';
+      const noun = count === 1 ? 'session' : 'sessions';
+      const blockers = Array.isArray(restart.blockingSessions) ? restart.blockingSessions : [];
+      const restorable = Number(restart.restorableSessions || 0);
+      const blockerNames = blockers
+        .map((item) => String(item?.label || item?.id || '').trim())
+        .filter(Boolean)
+        .slice(0, 3);
+      const blockerText = blockerNames.length
+        ? `<span>Blocking: ${esc(blockerNames.join(', '))}${blockers.length > blockerNames.length ? '...' : ''}</span>`
+        : '';
+      const restorableText = restorable > 0
+        ? `<span>${restorable} idle/review ${restorable === 1 ? 'session can' : 'sessions can'} reconnect after restart.</span>`
+        : '';
       return `
         <div class="restart-notice blocked" role="alert">
-          <span class="restart-notice-title">${count || 'Some'} ${noun} running</span>
-          <span>Normal restart was blocked to avoid interrupting live terminals.</span>
+          <span class="restart-notice-title">${count || 'Some'} ${noun} still active</span>
+          <span>Normal restart was blocked to avoid interrupting running work or a waiting approval.</span>
+          ${blockerText}
+          ${restorableText}
           <button id="restart-force-btn" class="row-action warn" type="button">Force restart</button>
         </div>
       `;
@@ -1613,6 +2215,9 @@
         state.restart = {
           status: 'blocked',
           activeSessions: Number(err.payload?.active_sessions || 0),
+          blockingSessions: Array.isArray(err.payload?.blocking_sessions) ? err.payload.blocking_sessions : [],
+          restorableSessions: Number(err.payload?.restorable_sessions || 0),
+          totalSessions: Number(err.payload?.total_sessions || 0),
           message: err.payload?.error || err.message || 'Restart blocked by active sessions.',
         };
         renderMore();
@@ -1642,6 +2247,10 @@
     const copy = {};
     for (const key of [
       'id', 'sessionId', 'title', 'aiTitle', 'displayTitle', 'userRenamed',
+      'type', 'session_type', 'sessionType', 'runtime_type', 'runtimeType',
+      'walle_owned', 'walleOwned', 'native_walle_session', 'nativeWalleSession',
+      'walle_chat_session', 'walleChatSession',
+      'agentMode', 'agent_mode', 'agentKind', 'agent_kind', 'taskType', 'task_type',
       'agent', 'provider', 'model', 'model_id',
       'modelProvider', 'model_provider', 'providerType', 'llmProvider',
       'walle_model_id', 'walle_model_provider', 'runtime_model_id', 'runtime_model_provider',
@@ -1656,7 +2265,8 @@
       copy.worktreeStatus = {};
       for (const key of [
         'branch', 'worktreeName', 'worktreePath', 'state', 'summary',
-        'dirtyFiles', 'unmergedCommits', 'ahead', 'behind', 'needsAttention',
+        'isMain', 'dirtyFiles', 'unmergedCommits', 'unpushedCommits', 'ahead', 'behind',
+        'needsAttention', 'mainRemote',
       ]) {
         if (wt[key] != null) copy.worktreeStatus[key] = wt[key];
       }
@@ -2220,6 +2830,141 @@
     }, delayMs);
   }
 
+  function applyWalleHealth(payload) {
+    const alerts = Array.isArray(payload?.alerts) ? payload.alerts : [];
+    state.walle.alerts = alerts;
+    state.walle.health = payload?.summary || null;
+    if (!state.walle.health && alerts.length) {
+      state.walle.health = {
+        level: 'warning',
+        title: 'Wall-E service alerts',
+        message: 'Review current provider, integration, and skill alerts.',
+        counts: { total: alerts.length },
+        current_issue: null,
+        disabled_skills: alerts.filter((a) => String(a?.type || '') === 'skill_disabled'),
+        integration_alerts: alerts.filter((a) => /(auth|owner|reauth|slack|gws|google)/i.test(`${a?.type || ''} ${a?.service || ''} ${a?.action || ''}`)),
+        provider_history: alerts.filter((a) => String(a?.service || '') === 'ai_provider'),
+        system_alerts: [],
+      };
+    }
+  }
+
+  async function refreshWalleHealth(options = {}) {
+    try {
+      const payload = await api('/api/wall-e/alerts');
+      applyWalleHealth(payload);
+      return payload;
+    } catch (err) {
+      if (!options.quiet) toast(err?.message || 'Could not load Wall-E health.');
+      return null;
+    }
+  }
+
+  async function testWalleHealthProvider() {
+    const health = state.walle.health || {};
+    const issue = health.current_issue || {};
+    const provider = String(issue.provider || health.active_provider?.provider || '').trim();
+    if (!provider) {
+      state.walle.healthTest = { ok: false, message: 'No active provider to test.' };
+      renderWalle();
+      return;
+    }
+    state.walle.healthTest = { ok: true, message: `Testing ${walleHealthProviderLabel(provider)}...` };
+    renderWalle();
+    const params = new URLSearchParams({ provider });
+    const result = await api(`/api/setup/test-key?${params.toString()}`).catch((err) => ({ ok: false, error: err?.message || 'Provider test failed.' }));
+    if (result?.ok) {
+      state.walle.healthTest = { ok: true, message: `${walleHealthProviderLabel(provider)} is reachable.` };
+      if (issue.id) await api(`/api/wall-e/alerts/${encodeURIComponent(issue.id)}`, { method: 'DELETE' }).catch(() => null);
+      await refreshWalleHealth({ quiet: true });
+    } else {
+      state.walle.healthTest = { ok: false, message: result?.error || 'Provider test failed.' };
+    }
+    renderWalle();
+  }
+
+  async function dismissCurrentWalleHealthAlert() {
+    const id = state.walle.health?.current_issue?.id;
+    if (!id) return;
+    await api(`/api/wall-e/alerts/${encodeURIComponent(id)}`, { method: 'DELETE' });
+    state.walle.healthTest = null;
+    await refreshWalleHealth({ quiet: true });
+    renderWalle();
+  }
+
+  function findWalleHealthAlert(alertId) {
+    const id = String(alertId || '');
+    if (!id) return null;
+    const health = state.walle.health || {};
+    const pools = [
+      state.walle.alerts || [],
+      health.current_issue ? [health.current_issue] : [],
+      health.disabled_skills || [],
+      health.integration_alerts || [],
+      health.provider_history || [],
+      health.system_alerts || [],
+    ];
+    for (const pool of pools) {
+      const found = pool.find((item) => String(item?.id || '') === id);
+      if (found) return found;
+    }
+    return null;
+  }
+
+  async function enableWalleHealthSkill(alertId) {
+    const alert = findWalleHealthAlert(alertId);
+    const skillName = walleHealthSkillName(alert);
+    if (!skillName) throw new Error('Could not identify the disabled skill.');
+    state.walle.healthTest = { ok: true, message: `Re-enabling ${skillName}...` };
+    renderWalle();
+    const response = await api('/api/wall-e/skills?enabled=0');
+    const skills = response?.data || response?.skills || [];
+    const match = skills.find((skill) => String(skill?.name || '').toLowerCase() === skillName.toLowerCase());
+    if (!match?.id) throw new Error(`${skillName} is not listed as disabled.`);
+    await api(`/api/wall-e/skills/${encodeURIComponent(match.id)}`, {
+      method: 'PUT',
+      body: { enabled: 1 },
+    });
+    if (alertId) await api(`/api/wall-e/alerts/${encodeURIComponent(alertId)}`, { method: 'DELETE' }).catch(() => null);
+    state.walle.healthTest = { ok: true, message: `${skillName} is enabled.` };
+    await refreshWalleHealth({ quiet: true });
+    renderWalle();
+  }
+
+  async function repairWalleHealthAlert(alertId) {
+    const alert = findWalleHealthAlert(alertId);
+    const action = String(alert?.action || '').toLowerCase();
+    if (action !== 'repair_slack_owner') throw new Error('Open the full Wall-E panel to fix this alert.');
+    state.walle.healthTest = { ok: true, message: 'Fixing Slack owner identity...' };
+    renderWalle();
+    const result = await api('/api/wall-e/slack/repair-owner', { method: 'POST' });
+    if (!result?.ok) throw new Error(result?.error || 'Could not fix Slack owner identity.');
+    state.walle.healthTest = { ok: true, message: 'Slack owner identity is fixed.' };
+    await refreshWalleHealth({ quiet: true });
+    renderWalle();
+  }
+
+  function handleWalleHealthAction(action, alertId) {
+    if (action === 'test-provider') {
+      testWalleHealthProvider().catch((err) => {
+        state.walle.healthTest = { ok: false, message: err?.message || 'Provider test failed.' };
+        renderWalle();
+      });
+    } else if (action === 'dismiss-current') {
+      dismissCurrentWalleHealthAlert().catch((err) => toast(err?.message || 'Could not dismiss alert.'));
+    } else if (action === 'enable-skill') {
+      enableWalleHealthSkill(alertId).catch((err) => {
+        state.walle.healthTest = { ok: false, message: err?.message || 'Could not re-enable skill.' };
+        renderWalle();
+      });
+    } else if (action === 'repair-alert') {
+      repairWalleHealthAlert(alertId).catch((err) => {
+        state.walle.healthTest = { ok: false, message: err?.message || 'Could not fix alert.' };
+        renderWalle();
+      });
+    }
+  }
+
   async function refresh() {
     if (state.refreshInFlight) return state.refreshInFlight;
     state.refreshInFlight = (async () => {
@@ -2227,11 +2972,14 @@
         if (!navigator.onLine) setConnection('offline');
         else if (!state.wsReady) setConnection('stale', 'Syncing');
         const activeBefore = state.activeSession;
-        const [auth, standup] = await Promise.all([
+        const shouldLoadWalleHealth = state.activeTab === 'walle';
+        const [auth, standup, walleHealth] = await Promise.all([
           api('/api/auth/me'),
           api(standupRequestPath()),
+          shouldLoadWalleHealth ? refreshWalleHealth({ quiet: true }) : Promise.resolve(null),
         ]);
         state.auth = auth.auth || null;
+        if (walleHealth) applyWalleHealth(walleHealth);
         applyStandupSnapshot(standup);
         state.sessionsLoaded = true;
         if (activeBefore && findSessionIndex(activeBefore.id) < 0) {
@@ -2469,7 +3217,7 @@
     let msg = null;
     try { msg = JSON.parse(event.data); } catch { return; }
     if (msg.type === 'hello') {
-      markHostReachable();
+      handleServerHello(msg);
       return;
     }
     if (msg.type === 'server-restarting') {
@@ -2750,7 +3498,29 @@
     updateRemoteOutboxStatus();
   }
 
+  function reconcileRemoteOutboxEntryTransport(entry) {
+    if (!entry || entry.type !== 'wall_e.send_message') return true;
+    const card = findSession(entry.sessionId);
+    if ((!card || card._placeholder) && !state.sessionsLoaded) {
+      entry.nextAttemptAt = Date.now() + 500;
+      persistRemoteOutbox();
+      return false;
+    }
+    if (card && isWalleOwnedSession(card) && !isNativeWalleSession(card)) {
+      entry.type = 'session.send_message';
+      entry.body = {
+        session_id: entry.sessionId,
+        text: entry.text,
+      };
+      entry.lastError = '';
+      entry.status = 'queued';
+      persistRemoteOutbox();
+    }
+    return true;
+  }
+
   async function deliverRemoteOutboxEntry(entry) {
+    if (!reconcileRemoteOutboxEntryTransport(entry)) return false;
     entry.status = 'sending';
     entry.attempts = Math.max(0, Number(entry.attempts || 0) || 0) + 1;
     entry.lastError = '';
@@ -2772,6 +3542,9 @@
           });
         }
         if (!updateRemoteOutboxStatus()) setComposerStatus('Sent to Mac.', 'ok');
+        if (isWalleSingletonChat(state.activeSession)) {
+          loadMessages(state.activeSession, { background: true, fresh: true }).catch(() => {});
+        }
       }
       return true;
     } catch (err) {
@@ -2841,6 +3614,7 @@
     if (state.activeStreamSessionId && state.activeStreamSessionId !== card.id) unsubscribeActiveStream(state.activeStreamSessionId);
     state.activeSession = card;
     state.activeStreamSessionId = card.id;
+    render();
     resetDetailTimeline(card.id);
     resetPromptHistory(card.id);
     updateDetailChrome(card);
@@ -2850,10 +3624,11 @@
     setComposerText('', { focus: false, cursor: false });
     autoSizeComposer();
     updateComposerState();
-    lockDetailBackgroundScroll();
     updateRemoteOutboxStatus();
     $('detail-view').classList.add('active');
     $('detail-view').setAttribute('aria-hidden', 'false');
+    syncDetailLayoutMode();
+    lockDetailBackgroundScroll();
     updateComposerState();
     $('detail-messages').innerHTML = card._placeholder
       ? '<div class="empty-state">Loading session context. You can still type and send a prompt.</div>'
@@ -2884,7 +3659,9 @@
     updateComposerState();
     $('detail-view').classList.remove('active');
     $('detail-view').setAttribute('aria-hidden', 'true');
+    syncDetailLayoutMode();
     unlockDetailBackgroundScroll();
+    render();
   }
 
   function renderDetailAlert(card) {
@@ -2903,17 +3680,135 @@
   }
 
   function isWalleSession(card) {
-    const kind = `${card?.agent || ''} ${card?.provider || ''} ${card?.type || ''}`;
-    return /walle|wall-e/i.test(kind);
+    return isWalleOwnedSession(card) || isNativeWalleSession(card);
+  }
+
+  function normalizedCardType(card) {
+    return String(card?.session_type || card?.sessionType || card?.runtime_type || card?.runtimeType || card?.type || '')
+      .trim()
+      .toLowerCase()
+      .replace(/_/g, '-');
+  }
+
+  function cardCapabilities(card) {
+    return card?.agentCapabilities || card?.capabilities || {};
+  }
+
+  function walleIdentityText(card) {
+    return [
+      card?.agent,
+      card?.provider,
+      card?.type,
+      card?.session_type,
+      card?.sessionType,
+      card?.runtime_type,
+      card?.runtimeType,
+      card?.agentMode,
+      card?.agent_mode,
+      card?.agentKind,
+      card?.agent_kind,
+      card?.taskType,
+      card?.task_type,
+      card?.title,
+      card?.label,
+      card?.branch,
+    ].filter(Boolean).join(' ').toLowerCase();
+  }
+
+  function wallePathText(card) {
+    return [
+      card?.cwd,
+      card?.project,
+      card?.projectPath,
+      card?.project_path,
+      card?.worktree_path,
+      card?.worktreeStatus?.worktreePath,
+    ].filter(Boolean).join(' ').replace(/\\/g, '/').toLowerCase();
+  }
+
+  function hasWalleCodingIdentity(card) {
+    if (!card) return false;
+    const type = normalizedCardType(card);
+    const mode = String(card.agentMode || card.agent_mode || '').trim().toLowerCase();
+    const taskType = String(card.taskType || card.task_type || '').trim().toLowerCase();
+    const identity = walleIdentityText(card);
+    const pathText = wallePathText(card);
+    if (mode === 'coding' || taskType === 'coding') return true;
+    if (type === 'walle-coding' || type === 'wall-e-coding') return true;
+    if (/wall-?e[-\s]?coding|walle[-\s]?coding|\bcoding agent\b/.test(identity)) return true;
+    if (/\/\.(?:walle|claude)\/worktrees\//.test(pathText)) return true;
+    return false;
+  }
+
+  function hasWalleChatIdentity(card) {
+    if (!card) return false;
+    const type = normalizedCardType(card);
+    const mode = String(card.agentMode || card.agent_mode || '').trim().toLowerCase();
+    const taskType = String(card.taskType || card.task_type || '').trim().toLowerCase();
+    const identity = walleIdentityText(card);
+    if (mode === 'coding' || taskType === 'coding') return false;
+    if (card.walle_chat_session === true || card.walleChatSession === true) return true;
+    if (mode === 'chat' || taskType === 'chat') return true;
+    if (type === 'walle-chat' || type === 'wall-e-chat') return true;
+    return /wall-?e[-\s]?chat|walle[-\s]?chat/.test(identity);
+  }
+
+  function isNativeWalleSession(card) {
+    if (!card) return false;
+    if (card.native_walle_session === true || card.nativeWalleSession === true) return true;
+    const type = normalizedCardType(card);
+    if (type === 'walle' || type === 'wall-e' || type === 'walle-chat' || type === 'wall-e-chat') return true;
+    const agentKind = String(card.agentKind || card.agent_kind || card.taskType || card.task_type || '').toLowerCase();
+    if (/walle-chat|wall-e-chat/.test(agentKind)) return true;
+    const agent = String(card.agent || '').toLowerCase();
+    const provider = String(card.provider || '').toLowerCase();
+    const caps = cardCapabilities(card);
+    const hasTerminalCapability = caps.terminalControl === true || caps.terminalInput === true || caps.canSendEscape === true;
+    const looksLikeCodingAgent = /codex|claude|gemini|opencode|terminal|pty|coding/.test(`${agent} ${card.title || ''} ${agentKind}`);
+    return /^(walle|wall-e)$/.test(agent || provider) && !hasTerminalCapability && !looksLikeCodingAgent;
+  }
+
+  function isWalleChatSession(card) {
+    if (!card) return false;
+    if (!isNativeWalleSession(card) && !isWalleOwnedSession(card)) return false;
+    if (hasWalleChatIdentity(card)) return true;
+    if (hasWalleCodingIdentity(card)) return false;
+    if (card.native_walle_session === true || card.nativeWalleSession === true) return true;
+    const type = normalizedCardType(card);
+    if (type === 'walle' || type === 'wall-e') return true;
+    const agent = String(card.agent || '').toLowerCase();
+    const provider = String(card.provider || '').toLowerCase();
+    const caps = cardCapabilities(card);
+    const hasTerminalCapability = caps.terminalControl === true || caps.terminalInput === true || caps.canSendEscape === true;
+    const looksLikeCodingAgent = /codex|claude|gemini|opencode|terminal|pty|coding/.test(walleIdentityText(card));
+    return /^(walle|wall-e)$/.test(agent || provider) && !hasTerminalCapability && !looksLikeCodingAgent;
+  }
+
+  function isWalleOwnedSession(card) {
+    if (!card) return false;
+    if (card.walle_owned === true || card.walleOwned === true) return true;
+    if (isNativeWalleSession(card)) return true;
+    const kind = `${card.agent || ''} ${card.provider || ''} ${card.type || ''} ${card.agentKind || ''} ${card.taskType || ''} ${card.title || ''} ${card.branch || ''} ${card.cwd || ''} ${card.project || ''}`;
+    if (/walle|wall-e/i.test(`${card.provider || ''} ${card.agentKind || ''} ${card.taskType || ''}`)) return true;
+    if (/walle[-\s]?coding|wall[-\s]?e[-\s]?coding/i.test(kind)) return true;
+    if (card.walle_model_id || card.walle_model_provider) return true;
+    return false;
   }
 
   function isWalleCodingSession(card) {
-    if (!card || !isWalleSession(card)) return false;
-    const caps = card.agentCapabilities || card.capabilities || {};
+    if (!card || !isWalleOwnedSession(card)) return false;
+    if (isWalleSingletonChat(card)) return false;
+    const caps = cardCapabilities(card);
     if (caps.structuredTranscript === false && caps.terminalInput === false && caps.review === false) return false;
     return true;
   }
 
+  function walleTransportSessionId(card) {
+    return isWalleSingletonChat(card)
+      ? WALLE_SINGLETON_CHAT_ID
+      : String(card?.id || card?.sessionId || '').trim();
+  }
+
   function terminalControlCapability(card) {
     const caps = card?.capabilities || card?.agentCapabilities || {};
     if (caps.terminalControl === true || caps.terminalInput === true || caps.canSendEscape === true) return true;
@@ -2923,7 +3818,7 @@
 
   function isTerminalControlSession(card) {
     if (!card) return false;
-    if (isWalleSession(card)) return false;
+    if (isNativeWalleSession(card)) return false;
     const explicit = terminalControlCapability(card);
     if (explicit !== null) return explicit;
     const kind = `${card.agent || ''} ${card.provider || ''} ${card.title || ''} ${card.type || ''}`;
@@ -2950,12 +3845,24 @@
     }
     try {
       const fresh = opts.fresh ? '&nocache=1' : '';
-      const data = await api(`/api/session/messages?id=${encodeURIComponent(card.id)}&offset=0&limit=80${fresh}`);
+      const data = isWalleSingletonChat(card)
+        ? await api(`/api/wall-e/chat/history?session_id=${encodeURIComponent(WALLE_SINGLETON_CHAT_ID)}&limit=200${fresh}`)
+        : await api(`/api/session/messages?id=${encodeURIComponent(card.id)}&offset=0&limit=80${fresh}`);
       if (state.activeSession?.id !== card.id) return;
-      const messages = Array.isArray(data) ? data : (data.messages || data.items || []);
+      const rawMessages = Array.isArray(data) ? data : (data.data || data.messages || data.items || []);
+      const messages = isWalleSingletonChat(card)
+        ? rawMessages.map((message) => ({
+          role: message.role,
+          text: message.content || message.text || '',
+          timestamp: message.created_at || message.createdAt || message.timestamp || new Date().toISOString(),
+          uuid: message.id || message.uuid || undefined,
+          agentLabel: message.role === 'assistant' ? 'Wall-E' : undefined,
+          attachments: message.attachments,
+        }))
+        : rawMessages;
       renderMessages(messages, { forceBottom: opts.forceBottom !== false });
       seedPromptHistoryFromTimeline();
-      if (!background) warmPromptHistory(card).catch(() => {});
+      if (!background && !isWalleSingletonChat(card)) warmPromptHistory(card).catch(() => {});
     } catch (err) {
       if (state.activeSession?.id !== card.id) return;
       if (state.detail.messages.length || state.detail.liveTail || hasTimelineContent(box)) {
@@ -3210,6 +4117,38 @@
     return recent.includes(live);
   }
 
+  function normalizedTimelineTextMatches(candidate, reference) {
+    const left = normalizeCompareText(candidate);
+    const right = normalizeCompareText(reference);
+    if (!left || !right || Math.min(left.length, right.length) < 12) return false;
+    if (left === right) return true;
+    if (Math.min(left.length, right.length) < 24) return false;
+    return left.includes(right) || right.includes(left);
+  }
+
+  function timelineMessageMatchesText(item, text, roles = null) {
+    if (Array.isArray(roles) && !roles.includes(mobileReviewRole(item))) return false;
+    return normalizedTimelineTextMatches(messageText(item), text);
+  }
+
+  function latestDurableUserMessageIndex() {
+    for (let index = state.detail.messages.length - 1; index >= 0; index -= 1) {
+      if (mobileReviewRole(state.detail.messages[index]) === 'user') return index;
+    }
+    return -1;
+  }
+
+  function durableUserPromptIndex(text) {
+    for (let index = state.detail.messages.length - 1; index >= 0; index -= 1) {
+      if (timelineMessageMatchesText(state.detail.messages[index], text, ['user'])) return index;
+    }
+    return -1;
+  }
+
+  function durableTimelineCoversMessageText(text, roles = null) {
+    return state.detail.messages.some((item) => timelineMessageMatchesText(item, text, roles));
+  }
+
   function cleanTerminalTail(tail) {
     const rows = stripTerminalPromptPlaceholderRows(cleanLiveTerminalRows(normalizeLiveTerminalRows(tail?.rows, stripAnsi(tail?.text || ''))));
     return {
@@ -3449,10 +4388,14 @@
   }
 
   function promptContinuationFallback(promptText, rows, promptIndex) {
+    // Codex can echo pasted or soft-wrapped prompts as several PTY rows where
+    // only the first row has the prompt glyph. Treat likely continuation rows
+    // as user text until a terminal boundary appears, so prompt fragments are
+    // not rendered as assistant output.
     const text = String(promptText || '').trim();
     const nextRow = rows[promptIndex + 1];
     const next = String(nextRow?.text || '').trim();
-    if (!text || !next || nextRow?.wrapKnown) return false;
+    if (!text || !next) return false;
     if (!isPromptContinuationRow(nextRow)) return false;
     const statusIndex = findBusyStatusBeforeNextPrompt(rows, promptIndex);
     if (statusIndex > promptIndex + 1 && text.length >= 64) return true;
@@ -3505,20 +4448,21 @@
           role: 'user',
           rows: promptText ? [{ text: promptText, wrapped: false, wrapKnown: row.wrapKnown }] : [],
           fallbackContinuation: promptContinuationFallback(promptText, rows, index),
-          fallbackCount: 0,
         };
         continue;
       }
       if (isTerminalDividerLine(line)) continue;
-      if (isTerminalChromeLine(line)) continue;
+      if (isTerminalChromeLine(line) || isTerminalStatusLine(line)) {
+        flush();
+        continue;
+      }
       if (current?.role === 'user') {
-        if (row.wrapped || (current.fallbackContinuation && current.fallbackCount < 6 && isPromptContinuationRow(row))) {
+        if (row.wrapped || (current.fallbackContinuation && isPromptContinuationRow(row))) {
           current.rows.push({
             text: line,
             wrapped: true,
             wrapKnown: row.wrapKnown,
           });
-          if (!row.wrapped) current.fallbackCount += 1;
           continue;
         }
         flush();
@@ -3574,12 +4518,14 @@
   }
 
   function renderLiveTerminalPromptTurn(promptTurn, responseTurns, tail, index) {
+    // A prompt echo without any agent output is only provisional terminal state. The
+    // grouped conversation timeline should show durable turns or live answer content,
+    // not a duplicate "You live / no replies" card for the active composer prompt.
+    if (!responseTurns.length) return '';
     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>';
+    const responseHtml = responseTurns.map((turn, responseIndex) => renderLiveTerminalResponse(turn, tail, responseIndex, responseTurns.length)).join('');
     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'}">
@@ -3633,10 +4579,13 @@
 
   function renderLiveTerminalConversationTurns(turns, tail) {
     const rows = [];
+    const latestUserIndex = latestDurableUserMessageIndex();
     for (let index = 0; index < turns.length; index += 1) {
       const turn = turns[index];
       if (turn?.role !== 'user') {
-        rows.push(renderLiveTerminalStandaloneTurn(turn, tail, index));
+        if (!durableTimelineCoversMessageText(turn?.text || '', ['assistant', 'summary', 'system'])) {
+          rows.push(renderLiveTerminalStandaloneTurn(turn, tail, index));
+        }
         continue;
       }
       const responses = [];
@@ -3645,7 +4594,19 @@
         responses.push(turns[cursor]);
         cursor += 1;
       }
-      rows.push(renderLiveTerminalPromptTurn(turn, responses, tail, index));
+      const visibleResponses = responses.filter((response) => (
+        !durableTimelineCoversMessageText(response?.text || '', ['assistant', 'summary', 'system'])
+      ));
+      const durablePromptIndex = durableUserPromptIndex(turn?.text || '');
+      if (durablePromptIndex >= 0) {
+        if (durablePromptIndex >= latestUserIndex) {
+          visibleResponses.forEach((response, responseIndex) => {
+            rows.push(renderLiveTerminalStandaloneTurn(response, tail, `${index}-${responseIndex}`));
+          });
+        }
+      } else {
+        rows.push(renderLiveTerminalPromptTurn(turn, visibleResponses, tail, index));
+      }
       index = cursor - 1;
     }
     return rows.join('');
@@ -3831,8 +4792,10 @@
         rememberTimelineTurnExpanded(turn.dataset.mobileTurnKey || turn.dataset.turnId || '', next);
       };
       const toggle = (ev) => {
+        if (window.MR?.shouldIgnorePromptTurnHeaderToggle?.(ev, header)) return;
         if (ev?.target?.closest?.('a,button,input,textarea,select')) return;
-        if (window.MR?.shouldKeepPromptTextSelection?.(ev, header)) return;
+        if (ev?.target?.closest?.('.prompt-turn-prompt .msg-text')) return;
+        if (window.MR?.hasTextSelectionInside?.(header)) return;
         const next = !turn.classList.contains('expanded');
         setExpanded(next);
       };
@@ -4122,10 +5085,11 @@
     const button = $('detail-send');
     if (!menu || !button || button.disabled) return false;
     hideMobileSkillPicker();
+    updateModelPickerButtons();
     menu.hidden = false;
     button.setAttribute('aria-expanded', 'true');
     state.sendMenu.suppressNextClick = opts.suppressNextClick !== false;
-    if (opts.focus !== false) ($('send-prev-prompt-option') || $('send-esc-option'))?.focus({ preventScroll: true });
+    if (opts.focus !== false) menu.querySelector('.send-menu-item:not([hidden]):not(:disabled)')?.focus({ preventScroll: true });
     return true;
   }
 
@@ -4243,9 +5207,19 @@
 
   function updateModelPickerButtons() {
     const visible = isWalleCodingSession(state.activeSession);
+    const detailVisible = visible && isDetailOpen();
     const label = visible ? modelButtonShortLabel(state.activeSession) : 'Model';
+    const fullLabel = visible ? modelButtonLabel(state.activeSession) : 'Choose model';
+    const sendModelOption = $('send-model-option');
+    if (sendModelOption) {
+      sendModelOption.hidden = !detailVisible;
+      sendModelOption.disabled = !detailVisible || state.composerSending;
+      sendModelOption.title = detailVisible ? `Choose model: ${fullLabel}` : 'Choose model';
+      sendModelOption.setAttribute('aria-expanded', detailVisible && state.modelPicker.open ? 'true' : 'false');
+      const value = $('send-model-label');
+      if (value) value.textContent = detailVisible ? fullLabel : 'Auto 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) {
@@ -4260,6 +5234,8 @@
       if (value) value.textContent = label;
       form.classList.toggle('has-model-picker', show);
     }
+    const detailForm = $('detail-composer');
+    if (detailForm) detailForm.classList.remove('has-model-picker');
   }
 
   function renderModelPickerSheet() {
@@ -5266,7 +6242,7 @@
     }
     const outboundText = buildComposerTransportText(text, attachments);
     try {
-      const messageType = isWalleSession(card) ? 'wall_e.send_message' : 'session.send_message';
+      const messageType = isNativeWalleSession(card) ? 'wall_e.send_message' : 'session.send_message';
       const body = { session_id: card.id, text: outboundText };
       if (messageType === 'wall_e.send_message') {
         if (attachments.length) body.attachments = attachments;
@@ -5300,7 +6276,7 @@
     if (state.activeSession?.id !== card.id) activateWalleChat(card);
     const outboundText = buildComposerTransportText(text, attachments);
     try {
-      const body = { session_id: card.id, text: outboundText };
+      const body = { session_id: walleTransportSessionId(card), text: outboundText };
       if (attachments.length) body.attachments = attachments;
       appendWalleModelSelection(body, card);
       const entry = enqueueRemoteReply('wall_e.send_message', body);
@@ -5654,10 +6630,11 @@
       btn.addEventListener('click', () => setTab(btn.dataset.tab));
     });
     document.body.addEventListener('click', (event) => {
-      const open = event.target.closest('[data-open-session]');
-      if (open) openDetail(open.dataset.openSession);
+      const open = event.target.closest('[data-open-session], [data-open-worktree-session]');
+      if (open) openDetail(open.dataset.openSession || open.dataset.openWorktreeSession);
     });
     $('refresh-btn').addEventListener('click', refresh);
+    $('app-reload-now-btn')?.addEventListener('click', () => reloadForInstalledUpdate('banner'));
     $('detail-back').addEventListener('click', closeDetail);
     $('detail-title')?.addEventListener('dblclick', startDetailTitleEdit);
     $('detail-title')?.addEventListener('pointerup', handleDetailTitlePointerUp);
@@ -5676,7 +6653,6 @@
     $('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') {
@@ -5693,6 +6669,7 @@
     $('prompt-history-next')?.addEventListener('click', () => applyPromptHistoryNavigation('next'));
     $('prompt-history-edit')?.addEventListener('click', finishPromptHistoryEditing);
     $('prompt-history-close')?.addEventListener('click', closePromptHistoryStrip);
+    $('send-model-option')?.addEventListener('click', () => openModelPickerForActiveSession($('detail-input')));
     $('send-copy-url-option')?.addEventListener('click', copySessionUrlFromMenu);
     $('send-esc-option')?.addEventListener('click', sendEscapeToSession);
     $('send-attach-image-option')?.addEventListener('click', () => triggerAttachmentInput('image'));
@@ -5748,6 +6725,19 @@
       updateMobileSkillPicker(event.target);
     });
     $('walle-content')?.addEventListener('click', (event) => {
+      const healthAction = event.target.closest?.('[data-walle-health-action]');
+      if (healthAction) {
+        event.preventDefault();
+        handleWalleHealthAction(
+          healthAction.dataset.walleHealthAction,
+          healthAction.dataset.walleHealthAlertId,
+        );
+        return;
+      }
+      if (event.target.closest?.('#walle-start-chat')) {
+        startWalleChat().catch((err) => toast(err?.message || 'Could not start Wall-E chat.'));
+        return;
+      }
       const input = $('walle-input');
       if (event.target?.id === 'walle-input') updateMobileSkillPicker(event.target);
       if (event.target.closest?.('#walle-model')) {
@@ -5828,7 +6818,15 @@
       applySearchSuggestion(chip.dataset.searchSuggestion || '');
     });
     window.addEventListener('hashchange', handleDeepLink);
-    window.addEventListener('resize', updateMobileViewportInset);
+    window.addEventListener('resize', () => {
+      updateMobileViewportInset();
+      syncDetailLayoutMode();
+    });
+    try {
+      const detailSplitMedia = window.matchMedia && window.matchMedia(DETAIL_SPLIT_QUERY);
+      if (detailSplitMedia?.addEventListener) detailSplitMedia.addEventListener('change', syncDetailLayoutMode);
+      else detailSplitMedia?.addListener?.(syncDetailLayoutMode);
+    } catch {}
     window.visualViewport?.addEventListener?.('resize', updateMobileViewportInset);
     window.visualViewport?.addEventListener?.('scroll', updateMobileViewportInset);
     window.addEventListener('online', () => {
@@ -5865,12 +6863,14 @@
   async function init() {
     loadThemePreference();
     updateMobileViewportInset();
+    syncDetailLayoutMode();
     configureComposerInput();
     bindEvents();
     loadRemoteOutbox();
     restoreSessionSnapshot();
     handleDeepLink();
     render();
+    initAppReloadChannel();
     connectWs().catch(() => {});
     const firstRefresh = refresh().catch(() => {});
     loadProjects().catch(() => {});
@@ -5891,6 +6891,9 @@
       normalizeMobileSkillItems,
       getComposerText: () => getComposerText(),
       recoverMobileConnection,
+      handleServerHello,
+      requestInstalledUpdateReload,
+      isMobileReloadUnsafe,
       handleWsMessage: (msg) => onWsMessage({ data: JSON.stringify(msg) }),
       sessionSnapshot: () => state.sessions.map((item) => ({
         id: item.id,