@linxin666/dsh-remote-web-ui 0.3.18 → 0.3.20

package/lib/types/client/mobile-adapt.js

@@ -38,6 +38,34 @@ const MODEL_BTN_ID = 'dshRemoteModelPick';
 const EFFORT_BTN_ID = 'dshRemoteEffortPick';
 /** Body class while the compact picker buttons are wired. */
 const COMPACT_CLASS = 'dsh-remote-compact-picker';
+/** Body class while the header actions are seated in the tabs row. */
+const HEADER_SEATED_CLASS = 'dsh-remote-header-seated';
+/** Locale-dependent fast path for the official picker cells (zh/en). */
+const PICKER_CELL_PATTERN = {
+    model: /模型|Model/, // i18n-allow: matches official picker cell text, not plugin copy
+    effort: /推理等级|Reasoning|Effort/i, // i18n-allow: matches official picker cell text, not plugin copy
+};
+/** Position of each drill cell among the sheet's chevron cells. */
+const DRILL_INDEX = { model: 0, effort: 1 };
+/**
+ * The official application frame. The layout column classes are the anchor:
+ * `_frame` is shared by unrelated official components (the chat turn rail,
+ * message-image thumbnails, the subagent pill, PlanReviewPanel), so a bare
+ * suffix match would restyle and hit-block those. `data-dsh-frame` is the
+ * aggregate compat stamp, kept as the fast path.
+ */
+const APP_FRAME_SELECTOR = '[data-dsh-frame], [class*="_frame"]:has([class*="_centerCol"])';
+/**
+ * The official composer surface. `_composerSeat` is the plugin's historical
+ * anchor; the official `data-dsh-surface="composer"` part attribute is the
+ * stable alternative if the class ever gains a modifier.
+ */
+const COMPOSER_SELECTOR = '[class$="_composerSeat"], [data-dsh-surface="composer"]';
+/** Resolve the official application frame (never a nested `_frame` surface). */
+function appFrame() {
+    const frame = document.querySelector(APP_FRAME_SELECTOR);
+    return frame instanceof HTMLElement ? frame : null;
+}
 /**
  * Whether the current viewport is a portrait touch device small enough to
  * need the adaptation.
@@ -64,7 +92,10 @@ function isMobilePortrait() {
 const ADAPT_CSS = [
     'html,body{height:100%}',
     // The app frame fills the dynamic viewport (browser chrome collapse).
-    '[class$="_frame"]{width:100%;height:100dvh}',
+    // Scoped to the application frame: a bare [class$="_frame"] also matches the
+    // chat turn rail, message thumbnails, the subagent pill and PlanReviewPanel,
+    // stretching each to a full-width 100dvh pointer-events:auto block.
+    '[class*="_frame"]:has([class*="_centerCol"]){width:100%;height:100dvh}',
     // Collapsed rail: bigger touch targets.
     '[class$="_railFish"] button,[class$="_panelIcon"],[class$="_newSession"]{min-width:44px;min-height:44px}',
     // Message list padding on narrow screens.
@@ -76,8 +107,8 @@ const ADAPT_CSS = [
     '[class$="_scrollBody"] [class$="_root"]{font-size:14.5px}',
     '[class$="_scrollBody"] [class$="_bubble"]{font-size:14.5px}',
     '[class$="_titleRow"] *{font-size:13px}',
-    '[class$="_sidebarCol"] [class$="_root"],[class$="_sidebarCol"] [class$="_newSession"],[class$="_sidebarCol"] [class$="_trigger"],[class$="_sidebarCol"] [class$="_title"]{font-size:13px}',
-    '[class$="_sidebarCol"] [class$="_meta"],[class$="_sidebarCol"] [class$="_time"]{font-size:11.5px}',
+    '[class*="_sidebarCol"] [class$="_root"],[class*="_sidebarCol"] [class$="_newSession"],[class*="_sidebarCol"] [class$="_trigger"],[class*="_sidebarCol"] [class$="_title"]{font-size:13px}',
+    '[class*="_sidebarCol"] [class$="_meta"],[class*="_sidebarCol"] [class$="_time"]{font-size:11.5px}',
     // v50: collapsed rail hidden; the whale button is the entry. The frame's
     // grid is inline-styled (56px rail track when collapsed); pin the first
     // track to 0 so content uses the full width. On portrait phones the
@@ -91,7 +122,7 @@ const ADAPT_CSS = [
     // host overlay mounts). Pin every column to an explicit track so the
     // center always lands on the 1fr track regardless of the sidebar's
     // computed position.
-    '[class$="_frame"][data-sidebar-collapsed] [class$="_sidebarCol"]{grid-column:1/2}',
+    '[class$="_frame"][data-sidebar-collapsed] [class*="_sidebarCol"]{grid-column:1/2}',
     '[class$="_frame"][data-sidebar-collapsed] [class$="_centerCol"]{grid-column:2/3}',
     '[class$="_frame"][data-sidebar-collapsed] [class$="_detailsCol"]{grid-column:3/4}',
     // Keep the chat header title clear of the floating whale.
@@ -105,13 +136,13 @@ const ADAPT_CSS = [
     // carries two classes, so match by containment); v47's panelIcon touch
     // rule forces a 44px min on the icon itself — zero it out so the 13px
     // glyph fits the 18px button.
-    '[class$="_sidebarCol"] [class$="_logoRow"] [class*="_iconButton"]{width:18px;height:18px}',
-    '[class$="_sidebarCol"] [class$="_logoRow"] [class*="_iconButton"] svg{width:13px;height:13px;min-width:0;min-height:0}',
+    '[class*="_sidebarCol"] [class$="_logoRow"] [class*="_iconButton"]{width:18px;height:18px}',
+    '[class*="_sidebarCol"] [class$="_logoRow"] [class*="_iconButton"] svg{width:13px;height:13px;min-width:0;min-height:0}',
     // v77: workspace rows' right-side actions (menu + new session) are
     // hover-only on desktop; always show them on mobile touch.
-    '[class$="_sidebarCol"] [class$="_projectRow"] [class$="_rowActions"]{display:inline-flex}',
+    '[class*="_sidebarCol"] [class*="_projectRow"] [class*="_rowActions"]{display:inline-flex}',
     // v78: mobile long-press on a row must not start native drag.
-    '[class$="_sidebarCol"] [class$="_sessionRow"],[class$="_sidebarCol"] [class$="_projectRow"]{-webkit-user-drag:none;user-select:none}',
+    '[class*="_sidebarCol"] [class*="_sessionRow"],[class*="_sidebarCol"] [class*="_projectRow"]{-webkit-user-drag:none;user-select:none}',
     // Hide the header Session-log download button (no space on phones).
     '[class$="_headerUtilities"]{display:none}',
     // v52 composer: the two lines (permission / model) stay stacked with zero
@@ -189,17 +220,14 @@ const ADAPT_CSS = [
     // v67: header actions (agent-preset mode label + background-task badge)
     // are re-seated from the title row into the tabs row; hidden in the
     // original spot so React re-renders do not flicker them back.
-    '[class$="_header"] [class$="_titleCluster"] [class$="_headerActions"]{display:none}',
-    // The official header keeps a 78px right padding on phones; stretch the
-    // tabs row so the seated actions sit flush against the right edge
-    // (verified 360/390/480 on the reference).
-    '[class$="_header"] [class$="_tabs"]{margin-right:-58px}',
+    // Only while the layer has taken the actions over: out of flow (so the
+    // title row keeps its own layout and React keeps owning the node) and
+    // painted over the tabs row by the transform alignActionsText computes.
+    `body.${HEADER_SEATED_CLASS} [class$="_header"] [class$="_titleCluster"] [class$="_headerActions"]{position:absolute;left:0;top:0;margin:0;display:flex;align-items:center;gap:6px;flex:none;z-index:2}`,
     // v70: match the tab text size with the seated mode label (12px); NB
     // [class$="_tab"] misses the active tab (its class ends in "_tabActive")
     // — containment so BOTH tabs match.
     '[class$="_header"] [class$="_tabs"] [class*="_tab"]{font-size:12px;white-space:nowrap}',
-    // Text-bottom alignment is dynamic (alignActionsText below); flex seat.
-    '[class$="_header"] [class$="_tabs"] [class$="_headerActions"]{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}',
     // Mobile scope: hide the plugin surfaces that do not fit a phone — the
     // right-hand details column and every desktop-oriented tool surface. The
     // list keys on the L2 semantic roots (data-dsh-plugin, ownership stays
@@ -269,6 +297,11 @@ export function startMobileAdapt() {
     let savedViewportContent = null;
     let whaleEl = null;
     let whaleObserver = null;
+    /** Header subtree observer: marks the geometry measurement dirty on re-render. */
+    let headerObserver = null;
+    let observedHeader = null;
+    /** Whether the seated-actions geometry needs re-measuring (see alignActionsText). */
+    let headerGeometryDirty = true;
     let whaleTimer = null;
     let whaleSuppressClick = false;
     let whaleShown = false;
@@ -330,6 +363,7 @@ export function startMobileAdapt() {
             return;
         active = false;
         unseatHeaderActions();
+        restoreRowDrag();
         removeCompactPicker();
         document.body.classList.remove(ACTIVE_CLASS);
         document.body.classList.remove(RAIL_HIDDEN_CLASS);
@@ -343,6 +377,10 @@ export function startMobileAdapt() {
         if (whaleEl !== null)
             whaleEl.style.display = 'none';
         setWhaleTimer(false);
+        if (whaleObserver !== null) {
+            whaleObserver.disconnect();
+            whaleObserver = null;
+        }
     }
     /** Start/stop the 600ms sync tick; a no-op when already in the asked state. */
     function setWhaleTimer(on) {
@@ -368,7 +406,7 @@ export function startMobileAdapt() {
         document.getElementById(MODEL_BTN_ID)?.remove();
         document.getElementById(EFFORT_BTN_ID)?.remove();
     }
-    function drillIntoPicker(cellPattern) {
+    function drillIntoPicker(kind) {
         const trigger = document.querySelector('[class$="_composerSeat"] [class$="_trailing"] [class$="_trigger"]:has([class$="_triggerEffort"])');
         if (trigger === null)
             return;
@@ -378,8 +416,13 @@ export function startMobileAdapt() {
         let tries = 0;
         const tapCell = () => {
             tries += 1;
-            const cell = Array.from(document.querySelectorAll('[class$="_composerSeat"] [class$="_menu"] [class$="_cell"]'))
-                .find((c) => cellPattern.test(c.textContent ?? ''));
+            const cells = Array.from(document.querySelectorAll('[class$="_composerSeat"] [class$="_menu"] [class$="_cell"]'));
+            // The official cell copy is localized (zh/en/ru), so the label match is
+            // only the fast path; the sheet's drill cells (label + value + chevron)
+            // are the structural anchor: model first, effort second, on every locale.
+            const byLabel = cells.find((c) => PICKER_CELL_PATTERN[kind].test(c.textContent ?? ''));
+            const drillable = cells.filter((c) => c.querySelector('[class*="_cellChevron"], [class*="_chevron"]'));
+            const cell = byLabel ?? drillable[DRILL_INDEX[kind]];
             if (cell !== undefined) {
                 ;
                 cell.click();
@@ -390,7 +433,7 @@ export function startMobileAdapt() {
         };
         window.setTimeout(tapCell, 150);
     }
-    function makeCompactButton(id, title, icon, cellPattern) {
+    function makeCompactButton(id, title, icon, kind) {
         const btn = document.createElement('button');
         btn.id = id;
         btn.type = 'button';
@@ -398,7 +441,7 @@ export function startMobileAdapt() {
         btn.title = title;
         btn.setAttribute('aria-label', title);
         btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${icon}</svg>`;
-        btn.addEventListener('click', () => { drillIntoPicker(cellPattern); });
+        btn.addEventListener('click', () => { drillIntoPicker(kind); });
         return btn;
     }
     function syncCompactPicker() {
@@ -413,10 +456,10 @@ export function startMobileAdapt() {
         if (document.getElementById(MODEL_BTN_ID) === null) {
             // The cell pattern matches the OFFICIAL picker cell text (the official
             // client's own zh/en copy), not plugin-owned text.
-            tools.appendChild(makeCompactButton(MODEL_BTN_ID, surfaceText('mobile.composer.pickModel', 'Pick model'), CUBE_ICON, /模型|Model/)); // i18n-allow: matches official picker cell text, not plugin copy
+            tools.appendChild(makeCompactButton(MODEL_BTN_ID, surfaceText('mobile.composer.pickModel', 'Pick model'), CUBE_ICON, 'model'));
         }
         if (document.getElementById(EFFORT_BTN_ID) === null) {
-            tools.appendChild(makeCompactButton(EFFORT_BTN_ID, surfaceText('mobile.composer.pickEffort', 'Pick reasoning effort'), LEVELS_ICON, /推理等级|Reasoning|Effort/i)); // i18n-allow: matches official picker cell text, not plugin copy
+            tools.appendChild(makeCompactButton(EFFORT_BTN_ID, surfaceText('mobile.composer.pickEffort', 'Pick reasoning effort'), LEVELS_ICON, 'effort'));
         }
         // Titles re-read every tick so a locale switch (or the translate seat
         // arriving after this layer installed) is picked up without a reload.
@@ -434,30 +477,76 @@ export function startMobileAdapt() {
         document.body.classList.add(COMPACT_CLASS);
     }
     /**
-     * Toggle the sidebar through the wired layout face, then verify the flip:
-     * the official LayoutController can be mounted yet inert (its bound store
-     * actions race the root entry on this cohort — observed on the running
-     * local build, where the face call silently did nothing and the whale
-     * was dead). When the frame state did not change shortly after the call,
-     * drive the official rail/logo toggle instead: that button owns its own
-     * store actions and flips the same state on every cohort we support.
+     * The official sidebar toggle in the logo row. The row's own `_toggle` class
+     * is the precise anchor; the row's last button is the fallback for cohorts
+     * that only expose the generic icon-button class (the first button is the
+     * brand, which navigates home — never click that one). `_railFish` is kept
+     * for older compositions that carried a rail fish button.
+     */
+    function officialSidebarToggle() {
+        const rail = document.querySelector('[class$="_railFish"] button');
+        if (rail instanceof HTMLElement)
+            return rail;
+        const row = document.querySelector('[class$="_logoRow"]');
+        if (row === null)
+            return null;
+        const toggles = row.querySelectorAll('button[class*="_toggle"]');
+        const last = toggles.length > 0 ? toggles[toggles.length - 1] : row.querySelectorAll('button')[row.querySelectorAll('button').length - 1];
+        return last instanceof HTMLElement ? last : null;
+    }
+    /**
+     * Toggle the sidebar through the official rail/logo toggle first, then
+     * verify the flip and fall back to the wired layout face.
+     *
+     * The order is evidence-driven: the official toggle owns its own store
+     * actions and flips the state on every cohort we support, while the wired
+     * LayoutController is mounted yet inert on the installed cohort — calling it
+     * left `data-sidebar-collapsed` untouched for the whole 800ms observation
+     * window, so face-first made every whale tap wait out the verification
+     * delay before anything moved. The face stays the fallback for compositions
+     * that render no logo-row toggle, and it is only called after the toggle
+     * demonstrably failed, so the two can never cancel each other out.
      */
     function toggleSidebarVerified() {
-        const frame = document.querySelector('[class$="_frame"]');
-        const collapsedBefore = frame instanceof HTMLElement ? frame.hasAttribute('data-sidebar-collapsed') : null;
-        w.__dshRemoteAdapt?.toggleSidebar?.();
-        if (collapsedBefore === null)
+        const frame = appFrame();
+        const collapsedBefore = frame !== null ? frame.hasAttribute('data-sidebar-collapsed') : null;
+        const face = w.__dshRemoteAdapt?.toggleSidebar;
+        const callFace = () => {
+            if (typeof face !== 'function')
+                return;
+            try {
+                face();
+            }
+            catch { }
+        };
+        const toggle = officialSidebarToggle();
+        if (collapsedBefore === null || toggle === null) {
+            // No frame to verify against, or no official toggle: the face is the
+            // only available control.
+            if (toggle !== null)
+                toggle.click();
+            else
+                callFace();
             return;
-        window.setTimeout(() => {
+        }
+        toggle.click();
+        let tries = 0;
+        const verify = () => {
             if (!active)
                 return;
-            const frameNow = document.querySelector('[class$="_frame"]');
-            if (!(frameNow instanceof HTMLElement))
+            const frameNow = appFrame();
+            if (frameNow === null)
                 return;
             if (frameNow.hasAttribute('data-sidebar-collapsed') !== collapsedBefore)
                 return;
-            document.querySelector('[class$="_railFish"] button, [class$="_logoRow"] [class*="_iconButton"]')?.click();
-        }, 150);
+            tries += 1;
+            if (tries < 2) {
+                window.setTimeout(verify, 120);
+                return;
+            }
+            callFace();
+        };
+        window.setTimeout(verify, 120);
     }
     function ensureWhale() {
         if (whaleEl !== null || !document.body)
@@ -490,12 +579,12 @@ export function startMobileAdapt() {
             // the keyboard (iOS) or keeps it open. Blur at pointerdown (before the
             // tap completes; click is too late for iOS) and block pending
             // programmatic refocus.
-            if (active) {
-                const ta = document.querySelector('[class$="_composerSeat"] textarea, [class$="_composerSeat"] input');
-                if (ta !== null && document.activeElement === ta) {
-                    ta.blur();
-                    lastComposerTap = 0;
-                }
+            if (active && isComposerField(document.activeElement)) {
+                // The composer field is a contenteditable div (the official client
+                // renders no textarea), so the old textarea/input lookup never matched
+                // it while a bare `input` branch could blur an unrelated field.
+                document.activeElement.blur();
+                lastComposerTap = 0;
             }
             drag = { x: e.clientX, y: e.clientY, left: whale.offsetLeft, top: whale.offsetTop, moved: false };
             try {
@@ -528,10 +617,33 @@ export function startMobileAdapt() {
             catch { }
         };
         whale.addEventListener('pointerup', endWhaleDrag);
-        whale.addEventListener('pointercancel', endWhaleDrag);
+        // A cancelled pointer (system gesture, incoming call) is not a drag end:
+        // keep the click un-suppressed so the next real tap still toggles.
+        whale.addEventListener('pointercancel', () => {
+            drag = null;
+            whaleSuppressClick = false;
+        });
         whaleEl = whale;
         document.body.appendChild(whale);
     }
+    /**
+     * Restore the official draggable state this layer overrode while active.
+     * Rows are React-owned and may have been re-created meanwhile, so only the
+     * tracked elements are touched; a detached element is skipped.
+     */
+    function restoreRowDrag() {
+        if (dragOverridden.size === 0)
+            return;
+        for (const [row, original] of dragOverridden) {
+            if (!row.isConnected)
+                continue;
+            if (original === null)
+                row.removeAttribute('draggable');
+            else
+                row.setAttribute('draggable', original);
+        }
+        dragOverridden.clear();
+    }
     /** Restore a dragged position when the whale becomes visible again. */
     function applyWhalePos() {
         if (whaleEl === null)
@@ -555,13 +667,18 @@ export function startMobileAdapt() {
     // reordering; a long-press would start native drag instead of our action
     // menu. Force them non-draggable while the adapt is active (React may
     // re-create rows, so re-apply on the sync tick).
+    /** Rows whose official draggable state this layer overrode (restored on revert). */
+    const dragOverridden = new Map();
     function disableRowDrag() {
         if (!active)
             return;
-        const rows = document.querySelectorAll('[class$="_sidebarCol"] [class$="_sessionRow"], [class$="_sidebarCol"] [class$="_projectRow"]');
+        const rows = document.querySelectorAll('[class*="_sidebarCol"] [class*="_sessionRow"], [class*="_sidebarCol"] [class*="_projectRow"]');
         for (const row of rows) {
-            if (row.getAttribute('draggable') !== 'false')
+            if (row.getAttribute('draggable') !== 'false') {
+                if (!dragOverridden.has(row))
+                    dragOverridden.set(row, row.getAttribute('draggable'));
                 row.setAttribute('draggable', 'false');
+            }
         }
     }
     function syncWhale() {
@@ -575,7 +692,7 @@ export function startMobileAdapt() {
             whaleEl.style.display = 'none';
             return;
         }
-        const collapsed = document.querySelector('[class$="_frame"][data-sidebar-collapsed]') !== null;
+        const collapsed = appFrame()?.hasAttribute('data-sidebar-collapsed') === true;
         const overlayUp = document.querySelector('[class$="_overlay"]') !== null;
         const show = collapsed && !overlayUp;
         // Restore on every hidden-to-shown transition — including the very
@@ -600,35 +717,45 @@ export function startMobileAdapt() {
     // v67: on mobile the header actions (agent-preset mode label + background
     // task badge) move from the title row into the tabs row. React re-creates
     // the node in its original spot on re-render, so the interval re-seats it;
-    // stale seated copies are removed first.
+    // stale seated copies are removed first. The original spot is only hidden
+    // while a seat actually exists: the tabs row renders only for multi-tab
+    // sessions, and hiding the actions without a seat target made them vanish.
     function seatHeaderActions() {
         if (!active)
             return;
-        const tabs = document.querySelector('[class$="_header"] [class$="_tabs"]');
-        const fresh = document.querySelector('[class$="_titleCluster"] [class$="_headerActions"]');
-        const seated = tabs !== null ? tabs.querySelector(':scope > [class$="_headerActions"]') : null;
-        // fresh === null means the node is either not rendered yet or already
-        // seated — the seated copy IS the moved node, so never remove it.
-        if (fresh !== null && tabs !== null) {
-            seated?.remove();
-            tabs.appendChild(fresh);
-        }
+        const header = document.querySelector('[class$="_header"]');
+        const tabs = header !== null ? header.querySelector('[class$="_tabs"]') : null;
+        const actions = header !== null ? header.querySelector('[class$="_titleCluster"] [class$="_headerActions"]') : null;
+        // The actions node is NOT moved: it is a React-owned host node whose badge
+        // button carries live handlers, and re-parenting it makes React's later
+        // insertBefore/removeChild anchors point at a node that is no longer a
+        // child of the recorded parent (a NotFoundError in the commit phase). The
+        // injected CSS takes it out of flow and the transform below paints it over
+        // the tabs row instead.
+        const seated = header !== null && tabs !== null && actions !== null;
+        document.body.classList.toggle(HEADER_SEATED_CLASS, seated);
+        ensureHeaderObserver(seated ? header : null);
     }
-    // Align the mode/badge text bottom edge with the tab text. The tabs row
-    // height is not stable (a background task badge grows it), so a static
-    // transform would be wrong half the time — measure the real text boxes
-    // each tick and compensate (converges; the previous transform is
-    // subtracted from the measurement).
+    // Paint the mode/badge over the tabs row: the actions keep their DOM slot in
+    // the title cluster (out of flow via CSS) and are moved with a transform, so
+    // the tabs row reserves room with padding instead of the node being moved.
+    // The tabs row height is not stable (a background task badge grows it) and
+    // the official right padding differs per cohort, so both axes are measured
+    // and converged each time the header geometry is dirty.
     function alignActionsText() {
         if (!active)
             return;
-        const tabs = document.querySelector('[class$="_header"] [class$="_tabs"]');
-        if (tabs === null)
+        const header = document.querySelector('[class$="_header"]');
+        if (header === null)
             return;
-        const actions = tabs.querySelector(':scope > [class$="_headerActions"]');
-        const tabBtn = tabs.querySelector(':scope > [class*="_tab"]');
-        if (actions === null || tabBtn === null)
+        const tabs = header.querySelector('[class$="_tabs"]');
+        const actions = header.querySelector('[class$="_titleCluster"] [class$="_headerActions"]');
+        if (tabs === null || actions === null || !(tabs instanceof HTMLElement) || !(actions instanceof HTMLElement))
+            return;
+        if (!headerGeometryDirty)
             return;
+        headerGeometryDirty = false;
+        const tabBtn = tabs.querySelector(':scope > [class*="_tab"]');
         const textBottom = (el) => {
             if (el === null)
                 return null;
@@ -644,37 +771,51 @@ export function startMobileAdapt() {
                 return null;
             }
         };
+        const translate = /translate\((-?[\d.]+)px,\s*(-?[\d.]+)px\)/.exec(actions.style.transform ?? '');
+        let dx = translate !== null ? parseFloat(translate[1] ?? '0') : 0;
+        let dy = translate !== null ? parseFloat(translate[2] ?? '0') : 0;
+        const actionsRect = actions.getBoundingClientRect();
+        const tabsRect = tabs.getBoundingClientRect();
+        // Horizontal: the actions' right edge lands on the tabs row's right edge.
+        const rightDiff = tabsRect.right - actionsRect.right;
+        if (Math.abs(rightDiff) >= 0.5)
+            dx = Math.round((dx + rightDiff) * 10) / 10;
+        // Vertical: the actions' text bottom lands on the tab text bottom.
         const tabBottom = textBottom(tabBtn);
-        if (tabBottom === null)
-            return;
-        const curMatch = /translateY\((-?[\d.]+)px\)/.exec(actions.style.transform ?? '');
-        const cur = curMatch !== null ? parseFloat(curMatch[1] ?? '0') : 0;
-        let maxBottom = null;
-        for (const sel of ['[class$="_label"]', '[class$="_count"]']) {
-            const b = textBottom(actions.querySelector(sel));
-            if (b !== null && (maxBottom === null || b - cur > maxBottom))
-                maxBottom = b - cur;
-        }
-        if (maxBottom === null)
-            return;
-        const delta = Math.round((tabBottom - maxBottom) * 10) / 10;
-        if (Math.abs(delta) < 0.5) {
-            if (actions.style.transform !== '')
-                actions.style.transform = '';
-            return;
+        if (tabBottom !== null) {
+            let maxBottom = null;
+            for (const sel of ['[class$="_label"]', '[class$="_count"]']) {
+                const b = textBottom(actions.querySelector(sel));
+                if (b !== null && (maxBottom === null || b > maxBottom))
+                    maxBottom = b;
+            }
+            if (maxBottom !== null) {
+                const bottomDiff = tabBottom - maxBottom;
+                if (Math.abs(bottomDiff) >= 0.5)
+                    dy = Math.round((dy + bottomDiff) * 10) / 10;
+            }
         }
-        ;
-        actions.style.transform = `translateY(${delta}px)`;
+        const next = `translate(${dx}px, ${dy}px)`;
+        if (actions.style.transform !== next)
+            actions.style.transform = next;
+        // Reserve the painted width so the tab labels never slide under it.
+        const reserve = `${Math.ceil(actionsRect.width) + 8}px`;
+        if (tabs.style.paddingRight !== reserve)
+            tabs.style.paddingRight = reserve;
     }
     function unseatHeaderActions() {
-        const tabs = document.querySelector('[class$="_header"] [class$="_tabs"]');
-        const seated = tabs !== null ? tabs.querySelector(':scope > [class$="_headerActions"]') : null;
-        const wrap = document.querySelector('[class$="_titleCluster"] > div');
-        if (seated !== null) {
-            if (wrap !== null)
-                wrap.appendChild(seated);
-            else
-                seated.remove();
+        document.body.classList.remove(HEADER_SEATED_CLASS);
+        const header = document.querySelector('[class$="_header"]');
+        const tabs = header !== null ? header.querySelector('[class$="_tabs"]') : null;
+        const actions = header !== null ? header.querySelector('[class$="_titleCluster"] [class$="_headerActions"]') : null;
+        if (actions instanceof HTMLElement)
+            actions.style.transform = '';
+        if (tabs instanceof HTMLElement)
+            tabs.style.paddingRight = '';
+        if (headerObserver !== null) {
+            headerObserver.disconnect();
+            headerObserver = null;
+            observedHeader = null;
         }
     }
     function ensureWhaleObserver() {
@@ -683,7 +824,31 @@ export function startMobileAdapt() {
         whaleObserver = new MutationObserver(() => { syncWhale(); });
         whaleObserver.observe(document.body, { attributes: true, attributeFilter: ['data-sidebar-collapsed'], subtree: true });
     }
+    /**
+     * Observe the conversation header subtree and mark its geometry dirty on any
+     * re-render (label text, badge count, node replacement). The per-tick
+     * alignment then reads layout only when the header actually changed instead
+     * of on every tick while a message streams. The observer is swapped when the
+     * header node is replaced and disconnected with the layer.
+     */
+    function ensureHeaderObserver(header) {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        if (observedHeader === header && headerObserver !== null)
+            return;
+        headerObserver?.disconnect();
+        headerObserver = null;
+        observedHeader = null;
+        if (header === null)
+            return;
+        headerObserver = new MutationObserver(() => { headerGeometryDirty = true; });
+        headerObserver.observe(header, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ['class'] });
+        observedHeader = header;
+        headerGeometryDirty = true;
+    }
     function evaluate() {
+        // A viewport change invalidates every measured position.
+        headerGeometryDirty = true;
         if (!adaptEnabled) {
             revert();
             return;
@@ -704,7 +869,10 @@ export function startMobileAdapt() {
     document.addEventListener('visibilitychange', () => { setWhaleTimer(document.visibilityState !== 'hidden'); });
     // v51: Enter only inserts a newline on mobile (send goes through the send
     // button). Captured at document level so the official Enter-to-send
-    // handler never sees the event.
+    // handler never sees the event. The rewrite is scoped to the composer:
+    // `_input` is also the class of the settings, plugin and agent-preset text
+    // fields, where swallowing Enter and inserting a newline into a single-line
+    // input left the key dead.
     function onKeydownCapture(e) {
         if (!active)
             return;
@@ -713,7 +881,7 @@ export function startMobileAdapt() {
         const t = e.target;
         if (!(t instanceof HTMLElement))
             return;
-        if (t.closest('[class$="_input"]') === null)
+        if (composerFieldOf(t) === null)
             return;
         // keyCode 229 is the classic IME-confirm signal (Safari fires
         // compositionend before the Enter keydown) — never treat it as a
@@ -737,13 +905,13 @@ export function startMobileAdapt() {
     function onClickCapture(e) {
         if (!active)
             return;
-        const frame = document.querySelector('[class$="_frame"]');
+        const frame = appFrame();
         if (frame === null || frame.hasAttribute('data-sidebar-collapsed'))
             return;
         const t = e.target;
         if (!(t instanceof Element))
             return;
-        if (t.closest('[class$="_sidebarCol"]') !== null) {
+        if (t.closest('[class*="_sidebarCol"]') !== null) {
             // v68: opening settings also folds the sidebar so the modal closes
             // back into a clean conversation view. Clicks on the session
             // row-actions ellipsis (or its opened menu anchor) must NOT collapse
@@ -752,15 +920,15 @@ export function startMobileAdapt() {
             // button also folds.
             const topNewSessionClicked = t.closest('[class$="_newSession"], [class$="_brand"]') !== null;
             let projectNewSessionClicked = false;
-            const projectActions = t.closest('[class$="_projectRow"] [class$="_rowActions"]');
+            const projectActions = t.closest('[class*="_projectRow"] [class*="_rowActions"]');
             if (projectActions !== null) {
                 const btn = t.closest('button');
                 const btns = projectActions.querySelectorAll('button');
                 projectNewSessionClicked = btn !== null && btns.length > 0 && btn === btns[btns.length - 1];
             }
             let shouldCollapse = false;
-            if (t.closest('[class$="_sessionRow"]') !== null) {
-                shouldCollapse = t.closest('[class$="_rowActions"]') === null;
+            if (t.closest('[class*="_sessionRow"]') !== null) {
+                shouldCollapse = t.closest('[class*="_rowActions"]') === null;
             }
             else if (t.closest('[class$="_settingsArea"]') !== null || topNewSessionClicked || projectNewSessionClicked) {
                 shouldCollapse = true;
@@ -791,8 +959,15 @@ export function startMobileAdapt() {
     document.addEventListener('touchstart', (e) => {
         if (!active)
             return;
+        // Multi-finger touches are never a swipe: a pinch that happens to end with
+        // >60px of horizontal finger travel would otherwise toggle the sidebar.
+        if (e.touches.length > 1) {
+            swipeTouch = null;
+            return;
+        }
         const t = e.target;
-        if (t instanceof Element && (t.tagName === 'TEXTAREA' || t.tagName === 'INPUT' || t.closest(`#${WHALE_ID}`) !== null || insideHScrollable(t) || t.closest('table, [class$="_table"], [class$="_tablePane"]') !== null)) {
+        const editable = t instanceof HTMLElement && t.isContentEditable;
+        if (t instanceof Element && (t.tagName === 'TEXTAREA' || t.tagName === 'INPUT' || editable || t.closest(`#${WHALE_ID}`) !== null || insideHScrollable(t) || t.closest('table, [class$="_table"], [class$="_tablePane"]') !== null)) {
             swipeTouch = null;
             return;
         }
@@ -804,6 +979,9 @@ export function startMobileAdapt() {
     document.addEventListener('touchend', (e) => {
         if (swipeTouch === null)
             return;
+        // Still more than one finger down: a pinch is in progress, not a swipe.
+        if (e.touches.length > 0)
+            return;
         const ct = e.changedTouches[0];
         if (ct === undefined || ct.identifier !== swipeTouch.id)
             return;
@@ -814,7 +992,7 @@ export function startMobileAdapt() {
             return;
         if (Math.abs(dx) < 60 || Math.abs(dx) < Math.abs(dy) * 1.5)
             return;
-        const frame = document.querySelector('[class$="_frame"]');
+        const frame = appFrame();
         if (frame === null)
             return;
         if (document.querySelector('[class$="_overlay"], [class$="_dialog"], [class$="_menu"], [class*="_portal"]') !== null)
@@ -845,7 +1023,7 @@ export function startMobileAdapt() {
         }
     }
     function openSessionMenu(row) {
-        const actions = row.querySelector('[class$="_rowActions"]');
+        const actions = row.querySelector('[class*="_rowActions"]');
         const btn = actions?.querySelector('button');
         if (actions === null || btn === null)
             return;
@@ -868,8 +1046,8 @@ export function startMobileAdapt() {
             clearLongPress();
             return;
         }
-        const row = t.closest('[class$="_sessionRow"]');
-        if (row === null || t.closest('[class$="_rowActions"]') !== null) {
+        const row = t.closest('[class*="_sessionRow"]');
+        if (row === null || t.closest('[class*="_rowActions"]') !== null) {
             clearLongPress();
             return;
         }
@@ -939,7 +1117,7 @@ export function startMobileAdapt() {
         const t = e.target;
         if (!(t instanceof Element))
             return;
-        if (t.closest('[class$="_sessionRow"]') !== null && ((longPress !== null && longPress.triggered) || Date.now() <= suppressSessionClickUntil)) {
+        if (t.closest('[class*="_sessionRow"]') !== null && ((longPress !== null && longPress.triggered) || Date.now() <= suppressSessionClickUntil)) {
             e.preventDefault();
         }
     }, true);
@@ -949,26 +1127,44 @@ export function startMobileAdapt() {
         if (!active || Date.now() > longPressMenuGuardUntil)
             return;
         const t = e.target;
-        if (t instanceof Element && (t.closest('[class$="_rowActions"]') !== null || t.closest('[class$="_sessionRow"]') !== null || t.closest('[class$="_projectRow"]') !== null)) {
+        if (t instanceof Element && (t.closest('[class*="_rowActions"]') !== null || t.closest('[class*="_sessionRow"]') !== null || t.closest('[class*="_projectRow"]') !== null)) {
             e.stopPropagation();
         }
     }, true);
-    // Intercept programmatic .focus() on the composer input: the official
-    // conversation component focuses it on mount and on session changes;
-    // user taps focus it through the browser's own pipeline. Only allow
-    // composer focus that follows a real tap on the input itself.
+    // Intercept programmatic .focus() on the composer field: the official
+    // conversation component focuses it on mount and on session changes; user
+    // taps focus it through the browser's own pipeline. Only allow composer
+    // focus that follows a real tap on the field itself. The composer field is
+    // the official contenteditable input root (`data-composer-input`) on this
+    // cohort — matching only textarea/input missed it entirely, so every session
+    // open popped the phone keyboard. The queue-row editor input is deliberately
+    // NOT a composer field: its autoFocus must keep working.
+    const isComposerField = (el) => {
+        if (!(el instanceof HTMLElement))
+            return false;
+        if (el.closest(COMPOSER_SELECTOR) === null)
+            return false;
+        if (el.matches('[data-composer-input]'))
+            return true;
+        if (el.tagName === 'TEXTAREA')
+            return true;
+        return el.tagName === 'INPUT' && el.matches('[class*="_input"]');
+    };
+    /** The composer field that owns an event target, if any. */
+    const composerFieldOf = (target) => {
+        const el = target instanceof Element ? target.closest('[data-composer-input], [class*="_input"], textarea') : null;
+        return isComposerField(el) ? el : null;
+    };
     const lanOrigFocus = HTMLElement.prototype.focus;
     HTMLElement.prototype.focus = function (options) {
-        if (active && (this.tagName === 'TEXTAREA' || this.tagName === 'INPUT') && this.closest('[class$="_composerSeat"]') !== null && Date.now() - lastComposerTap >= 800) {
+        if (active && isComposerField(this) && Date.now() - lastComposerTap >= 800)
             return;
-        }
         lanOrigFocus.call(this, options);
     };
     document.addEventListener('pointerdown', (e) => {
         if (!active)
             return;
-        const t = e.target;
-        if (t instanceof Element && (t.tagName === 'TEXTAREA' || t.tagName === 'INPUT') && t.closest('[class$="_composerSeat"]') !== null)
+        if (composerFieldOf(e.target) !== null)
             lastComposerTap = Date.now();
     }, true);
     // The plugin apply() wires toggleSidebar/closeDetails to ctx.layout once