pilotswarm 0.4.0 → 0.5.0

package/ui/core/src/controller.js

@@ -2,6 +2,7 @@ import { UI_COMMANDS, FOCUS_REGIONS, INSPECTOR_TABS, cycleValue } from "./comman
 import {
     appendEventToHistory,
     buildHistoryModel,
+    CHAT_HISTORY_EVENT_TYPES,
     DEFAULT_HISTORY_EVENT_LIMIT,
     dedupeChatMessages,
     getNextHistoryEventLimit,
@@ -1833,6 +1834,57 @@ export class PilotSwarmUiController {
         await Promise.all(sessionIds.map((sessionId) => this.syncSessionDetail(sessionId).catch(() => {})));
     }
 
+    /**
+     * Append the events recorded after `afterSeq` to an in-memory history.
+     * Returns the merged history, the unchanged history when there is
+     * nothing new, or null when the delta is clamped (caller reloads).
+     */
+    async catchUpSessionHistory(sessionId, existingHistory, afterSeq) {
+        const CATCH_UP_PAGE_LIMIT = 1000;
+        let newEvents;
+        try {
+            newEvents = await this.transport.getSessionEvents(sessionId, afterSeq, CATCH_UP_PAGE_LIMIT);
+        } catch {
+            return null;
+        }
+        if (!Array.isArray(newEvents) || newEvents.length >= CATCH_UP_PAGE_LIMIT) {
+            return null;
+        }
+        if (newEvents.length === 0) {
+            return existingHistory;
+        }
+        let history = existingHistory;
+        for (const event of newEvents) {
+            history = appendEventToHistory(history, event);
+        }
+        history = {
+            ...history,
+            // Appends must never shrink the expanded window's clamp budget.
+            loadedEventLimit: Math.max(
+                Number(existingHistory.loadedEventLimit) || 0,
+                Array.isArray(history.events) ? history.events.length : 0,
+            ),
+        };
+        this.dispatch({ type: "history/set", sessionId, history });
+        for (const event of newEvents) {
+            this.reconcileOutboxAgainstEvent(sessionId, event);
+        }
+        const derivedModel = extractSessionModelFromEvents(newEvents);
+        const currentSession = this.getState().sessions.byId[sessionId] || { sessionId };
+        const derivedContextUsage = extractSessionContextUsageFromEvents(currentSession.contextUsage, newEvents);
+        if (derivedModel || derivedContextUsage) {
+            this.dispatch({
+                type: "sessions/merged",
+                session: {
+                    sessionId,
+                    ...(derivedModel || {}),
+                    ...(derivedContextUsage ? { contextUsage: derivedContextUsage } : {}),
+                },
+            });
+        }
+        return history;
+    }
+
     async ensureSessionHistory(sessionId, { force = false } = {}) {
         if (!sessionId) return null;
         const existingHistory = this.getState().history.bySessionId.get(sessionId);
@@ -1847,6 +1899,17 @@ export class PilotSwarmUiController {
             return this.sessionHistoryLoads.get(sessionId);
         }
 
+        // Re-entry catch-up: when the expanded window is already in memory,
+        // fetch only the delta after lastSeq and append — the user's pulled-in
+        // older history (and its cursor) survives switching sessions. Fall
+        // back to a full window reload when the delta hits the server's
+        // 1000-row page clamp (too far behind to append reliably).
+        const catchUpFrom = Number(existingHistory?.lastSeq) || 0;
+        if (force && catchUpFrom > 0 && Array.isArray(existingHistory?.events) && existingHistory.events.length > 0) {
+            const caughtUp = await this.catchUpSessionHistory(sessionId, existingHistory, catchUpFrom);
+            if (caughtUp) return caughtUp;
+        }
+
         const loadPromise = (async () => {
             const events = await this.transport.getSessionEvents(sessionId, undefined, requestedLimit);
             const history = {
@@ -3285,6 +3348,7 @@ export class PilotSwarmUiController {
                 description: "Open-ended session with no specialized agent boundary.",
                 tools: [],
                 splash: null,
+                splashMobile: null,
                 initialPrompt: null,
             });
         }
@@ -3300,6 +3364,7 @@ export class PilotSwarmUiController {
                 description: String(agent?.description || "").trim(),
                 tools: Array.isArray(agent?.tools) ? agent.tools.filter(Boolean) : [],
                 splash: typeof agent?.splash === "string" && agent.splash.trim() ? agent.splash : null,
+                splashMobile: typeof agent?.splashMobile === "string" && agent.splashMobile.trim() ? agent.splashMobile : null,
                 initialPrompt: typeof agent?.initialPrompt === "string" && agent.initialPrompt.trim() ? agent.initialPrompt : null,
             });
         }
@@ -4275,6 +4340,7 @@ export class PilotSwarmUiController {
                 ...sessionOptions,
                 ...(item.title ? { title: item.title } : {}),
                 ...(item.splash ? { splash: item.splash } : {}),
+                ...(item.splashMobile ? { splashMobile: item.splashMobile } : {}),
                 ...(item.initialPrompt ? { initialPrompt: item.initialPrompt } : {}),
             });
             return;
@@ -4906,17 +4972,18 @@ export class PilotSwarmUiController {
         this.chatTopHistoryLoadSessionId = null;
     }
 
-    async handleChatTopHistoryScrollIntent(requestedScrollOffset) {
+    async handleChatTopHistoryScrollIntent(requestedScrollOffset, options = {}) {
         const state = this.getState();
         const sessionId = state.sessions.activeSessionId;
         if (!sessionId) return;
-        if (!this.chatTopHistoryLoadArmed || this.chatTopHistoryLoadSessionId !== sessionId) {
+        if (!options.force && (!this.chatTopHistoryLoadArmed || this.chatTopHistoryLoadSessionId !== sessionId)) {
             this.armChatTopHistoryLoad();
             return;
         }
 
         await this.maybeAutoExpandActiveHistory(requestedScrollOffset, {
             pages: AUTO_HISTORY_SCROLL_PAGE_COUNT,
+            force: Boolean(options.force),
         });
     }
 
@@ -5204,14 +5271,26 @@ export class PilotSwarmUiController {
             return;
         }
 
-        const { contentHeight, totalLines } = this.getActiveChatRenderMetrics(state);
-        const maxOffset = Math.max(0, totalLines - contentHeight);
-        if (targetOffset < maxOffset) return;
+        // The scroll-position gate compares a DOM-derived target offset with
+        // ui-core render metrics, and the two disagree on narrow viewports.
+        // Skip it when the caller vouches for the gesture (options.force: an
+        // explicit touch pull at the top of the pane) or when the transcript
+        // has no real chat messages (splash-only: tall art inflates
+        // totalLines past the viewport, so the gate can never pass).
+        const hasChatMessages = Array.isArray(currentHistory?.chat) && currentHistory.chat.length > 0;
+        if (!options.force && hasChatMessages) {
+            const { contentHeight, totalLines } = this.getActiveChatRenderMetrics(state);
+            const maxOffset = Math.max(0, totalLines - contentHeight);
+            if (targetOffset < maxOffset) return;
+        }
 
         await this.expandSessionHistory(sessionId, {
             requestedScrollOffset: targetOffset,
             autoTriggered: true,
             pages: options.pages,
+            // Chat-driven pull: page backward over renderable message types
+            // only, so each page is transcript instead of raw event noise.
+            eventTypes: CHAT_HISTORY_EVENT_TYPES,
         });
     }
 
@@ -5249,6 +5328,14 @@ export class PilotSwarmUiController {
         const loadPromise = (async () => {
             let history;
             const pagesToLoad = Math.max(1, Math.floor(Number(options.pages) || 1));
+            // Optional server-side type filter (chat pull passes the renderable
+            // message types). A short/empty filtered page means the transcript
+            // is complete, so exhausting it clears hasOlderEvents like a raw
+            // page would. Servers without filter support return unfiltered
+            // pages, which this loop already handles (today's raw paging).
+            const eventTypes = Array.isArray(options.eventTypes) && options.eventTypes.length > 0
+                ? options.eventTypes
+                : undefined;
             if (typeof this.transport.getSessionEventsBefore === "function" && oldestSeq > 0) {
                 history = currentHistory || buildHistoryModel([], { requestedLimit: currentLimit });
                 for (let pageIndex = 0; pageIndex < pagesToLoad; pageIndex += 1) {
@@ -5265,7 +5352,7 @@ export class PilotSwarmUiController {
                     if (Number(history.loadedEventCount || 0) >= AUTO_HISTORY_EVENT_SOFT_CAP) {
                         break;
                     }
-                    const olderEvents = await this.transport.getSessionEventsBefore(sessionId, pageOldestSeq, pageLimit);
+                    const olderEvents = await this.transport.getSessionEventsBefore(sessionId, pageOldestSeq, pageLimit, eventTypes);
                     if (!Array.isArray(olderEvents) || olderEvents.length === 0) {
                         history = {
                             ...history,
@@ -5321,7 +5408,17 @@ export class PilotSwarmUiController {
                 this.reconcileOutboxAgainstEvent(sessionId, event);
             }
 
-            if (preserveChatView && previousScrollOffset > 0) {
+            const hadChatBefore = Array.isArray(currentHistory?.chat) && currentHistory.chat.length > 0;
+            if (preserveChatView && !hadChatBefore) {
+                // The splash (or an empty transcript) was showing — there is no
+                // reading position to preserve, so land on the latest messages
+                // instead of wherever the offset math would leave the view.
+                this.dispatch({
+                    type: "ui/scroll",
+                    pane: "chat",
+                    offset: 0,
+                });
+            } else if (preserveChatView && previousScrollOffset > 0) {
                 const nextState = this.getState();
                 const nextRenderedLines = this.getActiveChatRenderMetrics(nextState).totalLines;
                 const addedLines = Math.max(0, nextRenderedLines - previousRenderedLines);

package/ui/core/src/history.js

@@ -10,6 +10,16 @@ export const HISTORY_EVENT_LIMIT_STEPS = [
     10_000,
 ];
 
+// The event types buildHistoryModel can render as chat transcript items.
+// Passed as the server-side filter when paging backward for chat history, so
+// noisy sessions (thousands of tool/orchestration events between messages)
+// load transcript pages instead of raw-stream pages.
+export const CHAT_HISTORY_EVENT_TYPES = [
+    "user.message",
+    "assistant.message",
+    "system.message",
+];
+
 function clampHistoryItems(items, maxItems) {
     const list = Array.isArray(items) ? items.filter(Boolean) : [];
     const safeMax = Math.max(DEFAULT_HISTORY_EVENT_LIMIT, Number(maxItems) || DEFAULT_HISTORY_EVENT_LIMIT);
@@ -908,10 +918,17 @@ export function appendEventToHistory(history, event) {
 }
 
 export function createSplashCard(branding, session = null) {
-    const splash = typeof session?.splash === "string" && session.splash.trim()
+    const sessionSplash = typeof session?.splash === "string" && session.splash.trim()
         ? session.splash
-        : branding?.splash;
+        : null;
+    const splash = sessionSplash || branding?.splash;
     if (!splash) return [];
+    // The narrow-viewport variant must come from the same source as the
+    // splash it replaces (a session splash never falls back to the branding
+    // mobile art). The renderer swaps it in when the main art is wider than
+    // the pane.
+    const mobileSource = sessionSplash ? session?.splashMobile : branding?.splashMobile;
+    const mobileSplash = typeof mobileSource === "string" && mobileSource.trim() ? mobileSource : null;
     const title = session?.isSystem
         ? canonicalSystemTitle(session, branding?.title || "PilotSwarm")
         : (session?.title || branding?.title || "PilotSwarm");
@@ -920,6 +937,7 @@ export function createSplashCard(branding, session = null) {
         id: `splash:${title}`,
         role: "system",
         text: `${splash}\n\n${hint}`,
+        ...(mobileSplash ? { mobileText: `${mobileSplash}\n\n${hint}` } : {}),
         time: "",
         splash: true,
     }];

package/ui/core/src/reducer.js

@@ -951,7 +951,16 @@ export function appReducer(state, action) {
             };
         }
 
-        case "sessions/selected":
+        case "sessions/selected": {
+            // Per-session chat scroll memory: stash the outgoing session's
+            // offset and restore the incoming one's. If new chat arrives on
+            // re-entry, history/set's activeChatUpdated reset still snaps to
+            // latest — "latest chat, or where you left it".
+            const previousActiveId = state.sessions.activeSessionId;
+            const savedChatScroll = { ...(state.ui.chatScrollBySession || {}) };
+            if (previousActiveId && previousActiveId !== action.sessionId) {
+                savedChatScroll[previousActiveId] = Number(state.ui.scroll?.chat) || 0;
+            }
             return {
                 ...state,
                 sessions: {
@@ -960,9 +969,10 @@ export function appReducer(state, action) {
                 },
                 ui: {
                     ...state.ui,
+                    chatScrollBySession: savedChatScroll,
                     scroll: {
                         ...state.ui.scroll,
-                        chat: 0,
+                        chat: Number(savedChatScroll[action.sessionId]) || 0,
                         inspector: 0,
                         activity: 0,
                     },
@@ -973,6 +983,7 @@ export function appReducer(state, action) {
                     },
                 },
             };
+        }
 
         case "ui/fullscreenPane": {
             const fullscreenPane = normalizeFullscreenPane(action.fullscreenPane);
@@ -1152,6 +1163,8 @@ export function appReducer(state, action) {
             for (const id of ids) nextHistory.delete(id);
             const nextOutbox = cloneOutboxBySessionId(state.outbox?.bySessionId);
             for (const id of ids) delete nextOutbox[id];
+            const nextChatScroll = { ...(state.ui.chatScrollBySession || {}) };
+            for (const id of ids) delete nextChatScroll[id];
             return {
                 ...state,
                 history: {
@@ -1162,6 +1175,10 @@ export function appReducer(state, action) {
                     ...state.outbox,
                     bySessionId: nextOutbox,
                 },
+                ui: {
+                    ...state.ui,
+                    chatScrollBySession: nextChatScroll,
+                },
             };
         }
 

package/ui/core/src/selectors.js

@@ -17,6 +17,7 @@ import {
     parseMarkdownLines,
     shortModelName,
     shortSessionId,
+    stripTerminalMarkupTags,
     wrapRunsToDisplayWidth,
 } from "./formatting.js";
 import {
@@ -1696,9 +1697,26 @@ function buildThinkingCardLines(message, maxWidth) {
     return lines;
 }
 
+function splashArtWidth(text) {
+    return String(text || "")
+        .split("\n")
+        .reduce((widest, line) => Math.max(widest, stripTerminalMarkupTags(line).length), 0);
+}
+
 function buildChatMessageLines(message, maxWidth, options = {}) {
     if (message?.splash) {
-        return [{ kind: "markup", value: message.text }];
+        // Swap in the narrow-viewport variant when the main art would
+        // overflow the pane (mobile portal, narrow terminals). When the
+        // width metrics keep the desktop art, still hand renderers the
+        // mobile variant (splashAlt) so environments with real media
+        // queries (the browser) can make the final call by CSS viewport —
+        // character metrics and device width can disagree.
+        const useMobile = message.mobileText && splashArtWidth(message.text) > maxWidth;
+        return [{
+            kind: "markup",
+            value: useMobile ? message.mobileText : message.text,
+            splashAlt: !useMobile && message.mobileText ? message.mobileText : null,
+        }];
     }
 
     if (message?.thinking) {
@@ -2838,6 +2856,15 @@ function formatCompactBytes(value) {
     return `${mb >= 10 ? Math.round(mb) : mb.toFixed(1)} MB`;
 }
 
+/** "12.4×" compression ratio (raw / stored); null when either is missing. */
+function formatCompressionRatio(rawBytes, storedBytes) {
+    const raw = Number(rawBytes);
+    const stored = Number(storedBytes);
+    if (!Number.isFinite(raw) || !Number.isFinite(stored) || raw <= 0 || stored <= 0) return null;
+    const ratio = raw / stored;
+    return `${ratio >= 10 ? ratio.toFixed(0) : ratio.toFixed(1)}×`;
+}
+
 function summarizeEventPreview(text, maxLength = 18) {
     const normalized = String(text || "")
         .replace(/\s+/g, " ")
@@ -4453,6 +4480,8 @@ function buildSessionStatsLines(state, session, maxWidth) {
         title: "Persistence",
         body: formatKeyValueTable([
             ["Snapshot",        formatCompactBytes(summary.snapshotSizeBytes)],
+            ["Uncompressed",    summary.rawSizeBytes ? formatCompactBytes(summary.rawSizeBytes) : null],
+            ["Compression",     formatCompressionRatio(summary.rawSizeBytes, summary.snapshotSizeBytes)],
             ["Dehydrations",    String(summary.dehydrationCount)],
             ["Hydrations",      String(summary.hydrationCount)],
             ["Lossy Handoffs",  String(summary.lossyHandoffCount)],
@@ -4482,6 +4511,8 @@ function buildSessionStatsLines(state, session, maxWidth) {
                 ["Cache Write",  formatCompactNumber(tree.totalTokensCacheWrite)],
                 ["Hit Ratio",    treeHitLabel],
                 ["Snapshot",     formatCompactBytes(tree.totalSnapshotSizeBytes)],
+                ["Uncompressed", tree.totalRawSizeBytes ? formatCompactBytes(tree.totalRawSizeBytes) : null],
+                ["Compression",  formatCompressionRatio(tree.totalRawSizeBytes, tree.totalSnapshotSizeBytes)],
                 ["Dehydrations", String(tree.totalDehydrationCount)],
                 ["Hydrations",   String(tree.totalHydrationCount)],
             ]),

package/ui/core/src/state.js

@@ -150,6 +150,9 @@ export function createInitialState({ mode = "local", branding = null, themeId =
                 activity: 0,
                 filePreview: 0,
             },
+            // Per-session chat scroll memory (rows from bottom), restored on
+            // sessions/selected and evicted with the session's history.
+            chatScrollBySession: {},
             followBottom: {
                 inspector: true,
                 activity: true,

package/ui/react/src/web-app.js

@@ -55,6 +55,13 @@ const PORTAL_SESSION_HIDDEN_COLUMN_PX = 48;
 const SCROLL_ROW_HEIGHT = 16;
 const SCROLL_BOTTOM_EPSILON_PX = 0.5;
 const PROGRAMMATIC_SCROLL_TOLERANCE_PX = SCROLL_BOTTOM_EPSILON_PX;
+// Minimum downward finger travel (px) while at the top of the chat pane before
+// a touch pull counts as a load-older-history request.
+const TOUCH_TOP_PULL_THRESHOLD_PX = 24;
+// How long after the last user-driven scroll event the pane still counts as
+// momentum-scrolling (native flick glide), during which programmatic scrollTop
+// restores are suppressed so they don't kill the glide.
+const TOUCH_MOMENTUM_GRACE_MS = 700;
 const PROFILE_SETTINGS_POLL_MS = 5000;
 const REASONING_EFFORT_LABELS = new Set(["low", "medium", "high", "xhigh"]);
 const LEGACY_BROWSER_PREFERENCE_STORAGE_KEYS = [
@@ -335,9 +342,17 @@ function normalizeLines(lines) {
             // Markup lines carry preformatted art (splash screens). Tag them
             // so the chat renderer keeps each line intact: the pane's
             // pre-wrap/overflow-wrap rules would rewrap wide art lines at
-            // arbitrary points and scramble the image.
-            for (const parsedLine of parseTerminalMarkupRuns(line.value || "")) {
-                normalized.push({ kind: "runs", runs: parsedLine, preserve: true });
+            // arbitrary points and scramble the image. When a splashAlt is
+            // present, emit BOTH variants tagged by name — CSS shows exactly
+            // one based on the real device viewport, which beats character
+            // metrics at deciding what actually fits.
+            const variants = line.splashAlt
+                ? [{ text: line.value, variant: "desktop" }, { text: line.splashAlt, variant: "mobile" }]
+                : [{ text: line.value, variant: null }];
+            for (const v of variants) {
+                for (const parsedLine of parseTerminalMarkupRuns(v.text || "")) {
+                    normalized.push({ kind: "runs", runs: parsedLine, preserve: true, splashVariant: v.variant });
+                }
             }
             continue;
         }
@@ -515,11 +530,32 @@ function useScrollSync(ref, lines, scrollOffset, scrollMode, paneKey, controller
         scrollMode,
         scrollOffset,
     });
+    // Touch scrolling relies on native momentum for speed: a hard flick keeps
+    // scrolling long after the finger lifts. Re-asserting scrollTop from state
+    // on every render (live events, status updates) kills that momentum at the
+    // first re-render, so flicks degrade to slow drags. While a touch gesture
+    // or its momentum is in flight, the DOM is the source of truth and state
+    // echoes of our own scroll dispatches must not snap the pane back.
+    const userScrollRef = React.useRef({ touching: false, lastUserScrollAt: 0, lastDispatchedOffset: null });
 
     React.useLayoutEffect(() => {
         const node = ref.current;
         if (!node) return;
         const previousViewportState = previousViewportStateRef.current;
+        const interaction = userScrollRef.current;
+        const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+        const interacting = interaction.touching
+            || (now - (interaction.lastUserScrollAt || 0)) < TOUCH_MOMENTUM_GRACE_MS;
+        const isEchoOffset = interaction.lastDispatchedOffset != null
+            && Math.abs((Number(scrollOffset) || 0) - interaction.lastDispatchedOffset) < 2;
+        if (
+            interacting
+            && scrollMode === previousViewportState?.scrollMode
+            && (scrollOffset === previousViewportState?.scrollOffset || isEchoOffset)
+        ) {
+            previousViewportStateRef.current = { scrollMode, scrollOffset };
+            return;
+        }
         const maxScroll = Math.max(0, node.scrollHeight - node.clientHeight);
         const preservePausedStickyScroll = stickyBottom
             && scrollMode === "top"
@@ -559,6 +595,7 @@ function useScrollSync(ref, lines, scrollOffset, scrollMode, paneKey, controller
             }
             programmaticScrollRef.current = null;
         }
+        userScrollRef.current.lastUserScrollAt = typeof performance !== "undefined" ? performance.now() : Date.now();
         const maxScroll = Math.max(0, node.scrollHeight - node.clientHeight);
         // When the pane has no scrollable content (transient loading state
         // that briefly collapses the body to one line), the browser auto-
@@ -568,9 +605,11 @@ function useScrollSync(ref, lines, scrollOffset, scrollMode, paneKey, controller
         // the desired scroll position from preserved state.
         if (maxScroll <= 0) return;
         if (stickyBottom && typeof controller.updatePaneScrollFromViewport === "function") {
+            const rowOffset = Math.max(0, node.scrollTop) / SCROLL_ROW_HEIGHT;
+            userScrollRef.current.lastDispatchedOffset = rowOffset;
             controller.updatePaneScrollFromViewport(
                 paneKey,
-                Math.max(0, node.scrollTop) / SCROLL_ROW_HEIGHT,
+                rowOffset,
                 { atBottom: isScrollViewportAtBottom(node) },
             );
             return;
@@ -579,6 +618,7 @@ function useScrollSync(ref, lines, scrollOffset, scrollMode, paneKey, controller
         const pixels = scrollMode === "bottom"
             ? Math.max(0, maxScroll - node.scrollTop)
             : Math.max(0, node.scrollTop);
+        userScrollRef.current.lastDispatchedOffset = pixels / SCROLL_ROW_HEIGHT;
         controller.dispatch({
             type: "ui/scroll",
             pane: paneKey,
@@ -597,7 +637,42 @@ function useScrollSync(ref, lines, scrollOffset, scrollMode, paneKey, controller
         controller.handleChatTopHistoryScrollIntent?.(maxScroll / SCROLL_ROW_HEIGHT);
     }, [controller, paneKey, ref, scrollMode]);
 
-    return { normalizedLines, onScroll, onWheel };
+    // Touch equivalent of the wheel-at-top gesture: touch devices never fire
+    // wheel events, and once scrollTop sits at 0 a further swipe-down emits no
+    // scroll events either — so mobile had no way to request older history.
+    // A downward pull that starts while the pane is at (or near) the top fires
+    // the same top-history intent, once per gesture.
+    const touchPullRef = React.useRef({ startY: null, fired: false });
+    const onTouchStart = React.useCallback((event) => {
+        userScrollRef.current.touching = true;
+        if (paneKey !== "chat" || scrollMode !== "bottom") return;
+        touchPullRef.current = { startY: event.touches?.[0]?.clientY ?? null, fired: false };
+    }, [paneKey, scrollMode]);
+    const onTouchEnd = React.useCallback(() => {
+        userScrollRef.current.touching = false;
+        // Momentum continues past the finger lift; onScroll keeps refreshing
+        // lastUserScrollAt for as long as the glide emits scroll events.
+        userScrollRef.current.lastUserScrollAt = typeof performance !== "undefined" ? performance.now() : Date.now();
+    }, []);
+    const onTouchMove = React.useCallback((event) => {
+        const node = ref.current;
+        const pull = touchPullRef.current;
+        if (!node || paneKey !== "chat" || scrollMode !== "bottom") return;
+        if (pull.fired || pull.startY == null) return;
+        if (node.scrollTop > PROGRAMMATIC_SCROLL_TOLERANCE_PX) return;
+        const y = event.touches?.[0]?.clientY;
+        if (y == null || y - pull.startY < TOUCH_TOP_PULL_THRESHOLD_PX) return;
+        pull.fired = true;
+        // A deliberate pull at the top of the pane is an unambiguous request:
+        // force the load, bypassing both the arm/load two-stage handshake and
+        // the DOM-vs-render-metric offset gate (the two measurements disagree
+        // on narrow viewports). The wheel path keeps the handshake — one
+        // physical scroll emits MANY wheel events, so it needs debouncing.
+        const maxScroll = Math.max(0, node.scrollHeight - node.clientHeight);
+        controller.handleChatTopHistoryScrollIntent?.(maxScroll / SCROLL_ROW_HEIGHT + 1, { force: true });
+    }, [controller, paneKey, ref, scrollMode]);
+
+    return { normalizedLines, onScroll, onWheel, onTouchStart, onTouchMove, onTouchEnd };
 }
 
 function Runs({ runs, theme }) {
@@ -1255,12 +1330,13 @@ function parseStructuredChatBlocks(lines = []) {
         // detection entirely and render as one preserve block, so no line
         // ever rewraps or gets reinterpreted as a structured element.
         if (currentLine?.preserve) {
+            const variant = currentLine.splashVariant || null;
             const preserveLines = [];
-            while (index < lines.length && lines[index]?.preserve) {
+            while (index < lines.length && lines[index]?.preserve && (lines[index].splashVariant || null) === variant) {
                 preserveLines.push(lines[index]);
                 index += 1;
             }
-            blocks.push({ type: "preserve", lines: preserveLines });
+            blocks.push({ type: "preserve", lines: preserveLines, splashVariant: variant });
             continue;
         }
 
@@ -1416,7 +1492,8 @@ function StructuredChatBlocks({ lines, theme }) {
     return React.createElement(React.Fragment, null,
         blocks.map((block, index) => {
             if (block.type === "preserve") {
-                return React.createElement("div", { key: `preserve:${index}`, className: "ps-chat-preserve-block" },
+                const variantClass = block.splashVariant ? ` is-splash-${block.splashVariant}` : "";
+                return React.createElement("div", { key: `preserve:${index}`, className: `ps-chat-preserve-block${variantClass}` },
                     block.lines.map((line, lineIndex) => React.createElement(Line, {
                         key: `preserve:${index}:${lineIndex}`,
                         line,
@@ -1643,7 +1720,7 @@ function ScrollLinesPanel({ title, titleRight = null, color, focused, actions, l
     const ref = React.useRef(null);
     const stickyRef = React.useRef(null);
     const syncingHorizontalRef = React.useRef(false);
-    const { normalizedLines, onScroll, onWheel } = useScrollSync(ref, lines, scrollOffset, scrollMode, paneKey, controller, { stickyBottom });
+    const { normalizedLines, onScroll, onWheel, onTouchStart, onTouchMove, onTouchEnd } = useScrollSync(ref, lines, scrollOffset, scrollMode, paneKey, controller, { stickyBottom });
     const normalizedSticky = React.useMemo(() => normalizeLines(stickyLines), [stickyLines]);
     const normalizedBottomSticky = React.useMemo(() => normalizeLines(bottomStickyLines), [bottomStickyLines]);
     const preserveHorizontalScroll = className.includes("is-preserve") && panelClassName.includes("has-preserved-sticky");
@@ -1680,7 +1757,7 @@ function ScrollLinesPanel({ title, titleRight = null, color, focused, actions, l
                 normalizedSticky.map((line, index) => React.createElement(Line, { key: `sticky:${index}`, line, theme })),
             )
             : null,
-        React.createElement("div", { ref, className: `ps-scroll-panel ${className}`.trim(), onScroll: handleBodyScroll, onWheel },
+        React.createElement("div", { ref, className: `ps-scroll-panel ${className}`.trim(), onScroll: handleBodyScroll, onWheel, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel: onTouchEnd },
             typeof renderBody === "function"
                 ? renderBody(normalizedLines, theme)
                 : structuredBlocks
@@ -4078,6 +4155,41 @@ export function PilotSwarmWebApp({ controller }) {
     const viewport = useMeasuredViewport(viewportRef);
     const mainGridViewport = useMeasuredViewport(mainGridRef);
     const gridViewport = computeGridViewport(viewport);
+
+    // Publish the real viewport in character cells. Without this the ui-core
+    // layout model runs on its 120×40 fallback everywhere in the browser, so
+    // width-derived behavior (markdown wrap width, render metrics, the
+    // splashMobile width swap) assumed a ~120-column terminal regardless of
+    // device — phones kept getting desktop splash art narrower than ~76 cols.
+    React.useEffect(() => {
+        const publish = () => {
+            const probe = document.createElement("span");
+            probe.style.cssText = "position:absolute;visibility:hidden;white-space:pre;";
+            // Measure with the font real lines render in — an off-context
+            // probe can inherit a different size and skew the column count.
+            const sample = document.querySelector(".ps-scroll-panel .ps-line") || document.querySelector(".ps-line");
+            if (sample) probe.style.font = window.getComputedStyle(sample).font;
+            probe.textContent = "0".repeat(100);
+            (sample?.parentElement || document.body).appendChild(probe);
+            const charWidth = (probe.getBoundingClientRect().width / 100) || 8;
+            probe.remove();
+            controller.dispatch({
+                type: "ui/viewport",
+                width: Math.floor(window.innerWidth / charWidth),
+                height: Math.floor(window.innerHeight / SCROLL_ROW_HEIGHT),
+            });
+        };
+        publish();
+        let timer;
+        const onResize = () => { clearTimeout(timer); timer = setTimeout(publish, 150); };
+        window.addEventListener("resize", onResize);
+        window.addEventListener("orientationchange", onResize);
+        return () => {
+            clearTimeout(timer);
+            window.removeEventListener("resize", onResize);
+            window.removeEventListener("orientationchange", onResize);
+        };
+    }, [controller]);
     const [chatFocusMode, setChatFocusMode] = React.useState(false);
     const [chatFocusPane, setChatFocusPane] = React.useState(null);
     const state = useControllerSelector(controller, (rootState) => ({