tmux-ide 2.9.0-beta.19 → 2.9.0-beta.21

package/packages/daemon/dist/tui/mirror/automatic-contrast.js

@@ -0,0 +1,161 @@
+/** Quantized sRGB contrast; Oklab matrices: https://bottosson.github.io/posts/oklab/ . */
+const LINEAR = Float64Array.from({ length: 256 }, (_, n) => {
+    const c = n / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+});
+const luminance = (rgb) => 0.2126 * LINEAR[(rgb >>> 16) & 255] +
+    0.7152 * LINEAR[(rgb >>> 8) & 255] +
+    0.0722 * LINEAR[rgb & 255];
+export function packedContrastRatio(a, b) {
+    const x = luminance(a) + 0.05, y = luminance(b) + 0.05;
+    return Math.max(x, y) / Math.min(x, y);
+}
+function byte(c) {
+    return Math.round(Math.max(0, Math.min(1, c <= 0.0031308 ? c * 12.92 : 1.055 * c ** (1 / 2.4) - 0.055)) * 255);
+}
+function candidate(L, a, b) {
+    // Reduce chroma along the same hue ray until inside sRGB, then quantize.
+    let lo = 0, hi = 1, result = -1;
+    for (let i = 0; i < 10; i++) {
+        const scale = i === 0 ? 1 : (lo + hi) / 2;
+        const l = (L + 0.3963377774 * a * scale + 0.2158037573 * b * scale) ** 3;
+        const m = (L - 0.1055613458 * a * scale - 0.0638541728 * b * scale) ** 3;
+        const s = (L - 0.0894841775 * a * scale - 1.291485548 * b * scale) ** 3;
+        const r = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+        const g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+        const blue = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
+        if (Math.min(r, g, blue) >= 0 && Math.max(r, g, blue) <= 1) {
+            result = (byte(r) << 16) | (byte(g) << 8) | byte(blue);
+            if (i === 0)
+                return result;
+            lo = scale;
+        }
+        else
+            hi = scale;
+    }
+    return result < 0 ? byte(L ** 3) * 0x10101 : result;
+}
+/** Leave passing pairs exact. Search both lightness directions with a verified endpoint fallback. */
+export function correctContrastForeground(fg, bg) {
+    if (packedContrastRatio(fg, bg) >= 4.5)
+        return fg;
+    const r = LINEAR[(fg >>> 16) & 255], g = LINEAR[(fg >>> 8) & 255], b = LINEAR[fg & 255];
+    const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+    const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+    const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+    const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+    const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+    const bb = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+    let best = 0, distance = Infinity;
+    for (const end of [0, 1]) {
+        let passing = end, failing = L;
+        let rgb = end === 0 ? 0 : 0xffffff;
+        if (packedContrastRatio(rgb, bg) < 4.5)
+            continue;
+        for (let i = 0; i < 12; i++) {
+            const mid = (passing + failing) / 2;
+            const trial = candidate(mid, a, bb);
+            if (packedContrastRatio(trial, bg) >= 4.5) {
+                passing = mid;
+                rgb = trial;
+            }
+            else
+                failing = mid;
+        }
+        if (Math.abs(passing - L) < distance) {
+            best = rgb;
+            distance = Math.abs(passing - L);
+        }
+    }
+    return best;
+}
+/** Cheap high-color-churn fallback: linear-sRGB blend to the nearer passing endpoint. */
+export function fastContrastForeground(fg, bg) {
+    if (packedContrastRatio(fg, bg) >= 4.5)
+        return fg;
+    const y = luminance(fg), base = luminance(bg);
+    const darkTarget = (base + 0.05) / 4.5 - 0.05;
+    const lightTarget = (base + 0.05) * 4.5 - 0.05;
+    const darkMix = darkTarget >= 0 ? (y - darkTarget) / y : Infinity;
+    const lightMix = lightTarget <= 1 ? (lightTarget - y) / (1 - y) : Infinity;
+    const end = darkMix <= lightMix ? 0 : 1;
+    // A small quantization margin usually avoids endpoint fallback. Always verify.
+    const amount = Math.min(1, Math.max(0, Math.min(darkMix, lightMix)) + 0.012);
+    const r = LINEAR[(fg >>> 16) & 255], g = LINEAR[(fg >>> 8) & 255], b = LINEAR[fg & 255];
+    const result = (byte(r + (end - r) * amount) << 16) |
+        (byte(g + (end - g) * amount) << 8) |
+        byte(b + (end - b) * amount);
+    return packedContrastRatio(result, bg) >= 4.5 ? result : end === 0 ? 0 : 0xffffff;
+}
+export function createContrastPairCache(limit = 4096) {
+    const pairs = new Map();
+    let remaining = Infinity;
+    return {
+        beginFrame() {
+            remaining = 128;
+        },
+        get size() {
+            return pairs.size;
+        },
+        correct(fg, bg) {
+            const key = fg * 0x1000000 + bg;
+            const cached = pairs.get(key);
+            if (cached !== undefined)
+                return cached;
+            const corrected = packedContrastRatio(fg, bg) >= 4.5
+                ? fg
+                : remaining-- > 0
+                    ? correctContrastForeground(fg, bg)
+                    : fastContrastForeground(fg, bg);
+            if (pairs.size >= limit)
+                pairs.clear();
+            pairs.set(key, corrected);
+            return corrected;
+        },
+    };
+}
+const read = (c, i) => ((c[i] & 255) << 16) | ((c[i + 1] & 255) << 8) | (c[i + 2] & 255);
+/** Final composed surface only: no canonical state or scheduling; allocation-free cache hits. */
+export function createAutomaticContrastPass() {
+    const cache = createContrastPairCache();
+    return (buffer) => {
+        cache.beginFrame();
+        const { char, fg, bg, attributes } = buffer.buffers;
+        for (let cell = 0; cell < char.length; cell++) {
+            const cp = char[cell], attr = attributes[cell], i = cell * 4;
+            // Preserve concealment, whitespace and pixel-art coverage. Grapheme IDs and
+            // wide continuations are opaque and retained byte-for-byte.
+            if (attr & 64 ||
+                cp === 0 ||
+                cp === 32 ||
+                cp === 160 ||
+                (cp >= 0x2580 && cp <= 0x259f) ||
+                (cp >= 0x2800 && cp <= 0x28ff))
+                continue;
+            if ((fg[i + 3] & 255) !== 255 || (bg[i + 3] & 255) !== 255)
+                continue;
+            const foreground = attr & 32 ? bg : fg;
+            const background = attr & 32 ? fg : bg;
+            const original = read(foreground, i);
+            const base = read(background, i);
+            // DIM is emulator-dependent. Materialize a deterministic 50% sRGB blend
+            // before correction and clear only the final composed DIM bit.
+            let visible = original;
+            if (attr & 2) {
+                visible =
+                    (Math.round(((original >>> 16) + (base >>> 16)) / 2) << 16) |
+                        (Math.round((((original >>> 8) & 255) + ((base >>> 8) & 255)) / 2) << 8) |
+                        Math.round(((original & 255) + (base & 255)) / 2);
+                attributes[cell] = attr & ~2;
+            }
+            const corrected = cache.correct(visible, base);
+            if (corrected === original && !(attr & 2))
+                continue;
+            // RGB intent is zero. Indexed/default metadata must not override correction.
+            foreground[i] = corrected >>> 16;
+            foreground[i + 1] = (corrected >>> 8) & 255;
+            foreground[i + 2] = corrected & 255;
+            foreground[i + 3] = 255;
+        }
+    };
+}

package/packages/daemon/dist/tui/mirror/open-tui-workspace-runtime-port.js

@@ -1124,7 +1124,7 @@ export async function connectOpenTuiWorkspaceRuntimePort(options) {
             }
         }) ?? null;
     let pendingInitialFit = null;
-    const fitViewport = (cols, rows) => {
+    const fitViewport = (cols, rows, semanticWindowId) => {
         if (closed)
             return Promise.resolve("geometry-authority-conflict");
         // Keep only the latest requested geometry while hidden seeds arrive. All
@@ -1133,23 +1133,29 @@ export async function connectOpenTuiWorkspaceRuntimePort(options) {
             if (pendingInitialFit) {
                 pendingInitialFit.cols = cols;
                 pendingInitialFit.rows = rows;
+                pendingInitialFit.semanticWindowId = semanticWindowId;
                 return pendingInitialFit.result;
             }
             const request = {
                 cols,
                 rows,
+                semanticWindowId,
                 result: Promise.resolve("geometry-authority-conflict"),
             };
             pendingInitialFit = request;
             request.result = allSeeds.then((ready) => {
                 pendingInitialFit = null;
-                return ready ? fitViewport(request.cols, request.rows) : "geometry-authority-conflict";
+                return ready
+                    ? fitViewport(request.cols, request.rows, request.semanticWindowId)
+                    : "geometry-authority-conflict";
             });
             return request.result;
         }
         if ([...endpoints.values()].some((endpoint) => !endpoint.inputReady))
             return Promise.resolve("geometry-authority-conflict");
-        return opened.fitViewport(cols, rows).catch((error) => {
+        return (semanticWindowId === undefined
+            ? opened.fitViewport(cols, rows)
+            : opened.fitViewport(cols, rows, semanticWindowId)).catch((error) => {
             if (error instanceof PaneStreamOperationError && error.code === "authority-rejected")
                 return "geometry-authority-conflict";
             throw error;

package/packages/daemon/dist/tui/mirror/pane-surface.jsx

@@ -422,11 +422,11 @@ class PaneSurfaceRenderable extends FrameBufferRenderable {
         if (v === this._presentationGeneration)
             return;
         this._presentationGeneration = v;
-        // Framebuffer validity is independent from terminal content freshness. A
-        // quiet pane must be able to repaint its retained canonical snapshot after
-        // visibility/composition changes without waiting for another terminal byte.
-        this._forceFull = true;
-        this.invalidate();
+        // Composition reuses the retained framebuffer. Geometry reallocation,
+        // source replacement and palette changes independently force a full walk.
+        // Reclaim the hardware cursor at the new absolute position on visibility.
+        this._needsCursorPresentation = true;
+        this.requestRender();
     }
     set sourceEpoch(v) {
         if (v === this._sourceEpoch)
@@ -453,6 +453,8 @@ class PaneSurfaceRenderable extends FrameBufferRenderable {
             // Detailed focus correlation never owns renderer replacement.
         }
         this._rendererEpoch = v;
+        this._forceFull = true;
+        this.invalidate();
     }
     set hostFocusTransitionOwner(v) {
         if (v !== this._hostFocusTransitionOwner)

package/packages/daemon/dist/tui/mirror/resize-transaction.js

@@ -12,6 +12,7 @@ function nonEmpty(value, label) {
 }
 function sameTarget(state, observation) {
     return (state.operationId === observation.operationId &&
+        state.authorityGeneration === observation.authorityGeneration &&
         state.workspaceName === observation.workspaceName &&
         state.semanticPaneId === observation.semanticPaneId &&
         state.axis === observation.axis);
@@ -19,9 +20,9 @@ function sameTarget(state, observation) {
 /**
  * Renderer-local pane-resize transaction.
  *
- * Pointer motion only changes the preview state. Release authors exactly one
- * semantic intent and keeps that preview visible until the matching observed
- * operation settles or rejects. The controller owns no timers, transport, or
+ * Pointer motion submits the first target immediately, then retains only the
+ * latest desired size while receipt and canonical layout settle the pending
+ * operation. Release closes the gesture and flushes that latest target. The controller owns no timers, transport, or
  * rendering effects beyond the functions supplied by its caller.
  */
 export class ResizeTransactionController {
@@ -35,6 +36,8 @@ export class ResizeTransactionController {
     #projection = null;
     #revision = 0;
     #disposed = false;
+    #dragOpen = false;
+    #submittedCells = null;
     constructor(options) {
         if (!Number.isFinite(options.timeoutMs) || options.timeoutMs <= 0) {
             throw new RangeError("resize transaction timeout must be positive");
@@ -54,6 +57,8 @@ export class ResizeTransactionController {
         const workspaceName = nonEmpty(input.workspaceName, "workspaceName");
         const semanticPaneId = nonEmpty(input.semanticPaneId, "semanticPaneId");
         const canonicalCells = positiveCells(input.canonicalCells, "canonicalCells");
+        this.#dragOpen = true;
+        this.#submittedCells = null;
         this.#projection = createOptimisticProjection({
             generation: authorityGeneration,
             revision: this.#revision,
@@ -71,30 +76,36 @@ export class ResizeTransactionController {
         });
         return true;
     }
-    /** Purely local preview update. It never calls submit or schedules work. */
+    /** First/latest coalescing: at most one mutation awaits canonical settlement. */
     move(previewCells) {
-        if (this.#state.phase !== "dragging")
+        if (!this.#dragOpen || this.#state.phase === "idle")
             return false;
         const next = positiveCells(previewCells, "previewCells");
         if (next === this.#state.previewCells)
             return false;
         this.#emit({ ...this.#state, previewCells: next });
+        if (this.#state.phase === "dragging")
+            this.#submit();
         return true;
     }
-    /**
-     * Submit once. Duplicate physical release/up/drop events return the existing
-     * operation id without authoring another mutation.
-     */
+    /** Duplicate releases never author another mutation. */
     release() {
+        this.#dragOpen = false;
         if (this.#state.phase === "pending")
             return this.#state.operationId;
+        if (this.#state.phase !== "dragging")
+            return null;
+        const canonicalCells = this.#state.canonicalCells;
+        this.#emit({ phase: "idle", canonicalCells, outcome: null });
+        return null;
+    }
+    #submit() {
         if (this.#state.phase !== "dragging")
             return null;
         const dragging = this.#state;
-        if (dragging.previewCells === dragging.canonicalCells) {
-            this.#emit({ phase: "idle", canonicalCells: dragging.canonicalCells, outcome: null });
+        if (dragging.previewCells === dragging.canonicalCells)
             return null;
-        }
+        this.#submittedCells = dragging.previewCells;
         const operationId = nonEmpty(this.#options.operationId(), "operationId");
         const submittedAt = this.#options.now();
         if (!this.#projection)
@@ -146,10 +157,15 @@ export class ResizeTransactionController {
             message: rejection.message,
         });
     }
-    /** Escape/cancel is only meaningful before release. */
+    /** Discard queued motion; an already dispatched mutation cannot be undone. */
     cancelDrag() {
-        if (this.#state.phase !== "dragging")
+        if (!this.#dragOpen || this.#state.phase === "idle")
             return false;
+        this.#dragOpen = false;
+        if (this.#state.phase === "pending") {
+            this.#emit({ ...this.#state, previewCells: this.#submittedCells });
+            return true;
+        }
         const canonicalCells = this.#state.canonicalCells;
         this.#emit({ phase: "idle", canonicalCells, outcome: null });
         return true;
@@ -160,6 +176,8 @@ export class ResizeTransactionController {
     }
     /** Retire one runtime lane without permanently disposing the controller. */
     retire() {
+        this.#dragOpen = false;
+        this.#submittedCells = null;
         this.#clearTimeout();
         this.#projection = null;
         if (this.#state.phase !== "idle" || this.#state.canonicalCells !== null) {
@@ -172,7 +190,8 @@ export class ResizeTransactionController {
             !this.#projection?.pending.some((operation) => operation.operationId === observation.operationId))
             return false;
         const cells = positiveCells(observation.cells, "observed cells");
-        const operationId = this.#state.operationId;
+        const pending = this.#state;
+        const operationId = pending.operationId;
         if (!this.#projection)
             return false;
         this.#revision += 1;
@@ -182,11 +201,19 @@ export class ResizeTransactionController {
             value: cells,
         }, { observedOperationIds: [operationId], nowMs: this.#options.now() });
         this.#clearTimeout();
-        this.#emit({
-            phase: "idle",
-            canonicalCells: cells,
-            outcome: { kind: "settled", operationId, source, cells },
-        });
+        const hasLatest = pending.previewCells !== this.#submittedCells && pending.previewCells !== cells;
+        if (this.#dragOpen || hasLatest) {
+            this.#emit({ ...pending, phase: "dragging", canonicalCells: cells });
+            if (hasLatest)
+                this.#submit();
+        }
+        else {
+            this.#emit({
+                phase: "idle",
+                canonicalCells: cells,
+                outcome: { kind: "settled", operationId, source, cells },
+            });
+        }
         return true;
     }
     #revertTimedOut(operationId) {
@@ -202,6 +229,7 @@ export class ResizeTransactionController {
             this.#projection = reconcileOptimisticOperation(this.#projection, operationId, reason.kind === "timed-out" ? "timed-out" : "rejected");
         }
         const canonicalCells = this.#state.canonicalCells;
+        this.#dragOpen = false;
         this.#clearTimeout();
         this.#emit({
             phase: "idle",

package/packages/daemon/dist/tui/mirror/runtime/application-appearance-owner.js

@@ -1,14 +1,32 @@
+import { createAutomaticContrastPass } from "../automatic-contrast.js";
 import { VISUAL_THEME_PRESETS, findVisualThemePreset } from "@tmux-ide/contracts";
 import { batch, createSignal } from "solid-js";
 import { updateAppConfig } from "../../../lib/app-config.js";
 import { createSemanticThemeStore, createTerminalPaletteProjection, deriveSystemVisualHostDefaults, } from "../theme.js";
 import { createApplicationTransientNoteOwner } from "./application-transient-note-owner.js";
 function hostDefaults(snapshot) {
-    if (snapshot.availability !== "available")
-        return null;
-    return deriveSystemVisualHostDefaults(snapshot);
+    return (deriveSystemVisualHostDefaults(snapshot) ?? { appearance: snapshot.detectedMode, overrides: {} });
 }
 export function createAppearanceOwner(config, renderer, terminalPaletteOwner) {
+    const [automaticContrast, setAutomaticContrast] = createSignal(config.theme.automaticContrast ?? true);
+    const correct = createAutomaticContrastPass();
+    const postProcess = (buffer) => {
+        if (automaticContrast())
+            correct(buffer);
+    };
+    renderer.addPostProcessFn?.(postProcess);
+    const setContrast = (enabled) => {
+        if (enabled === automaticContrast())
+            return;
+        setAutomaticContrast(enabled);
+        renderer.requestRender?.();
+    };
+    const toggleAutomaticContrast = () => {
+        if (pickerOpen()) {
+            setContrast(!automaticContrast());
+            setPickerError(null);
+        }
+    };
     const initialHostPalette = terminalPaletteOwner.getSnapshot();
     const store = createSemanticThemeStore(config.theme, {
         rendererMode: renderer.themeMode,
@@ -65,10 +83,18 @@ export function createAppearanceOwner(config, renderer, terminalPaletteOwner) {
     const apply = (id) => {
         const preset = findVisualThemePreset(id);
         const mode = preset?.appearance ?? id;
-        store.configure({ ...config.theme, mode, preset: preset?.id });
+        const wasSystem = theme().setting === "system";
+        store.configure({
+            ...config.theme,
+            mode,
+            preset: preset?.id,
+        });
+        if (mode === "system" && !wasSystem)
+            void terminalPaletteOwner.refresh();
         setPickerSelection(id);
     };
     let originalSelection = pickerSelection();
+    let originalContrast = automaticContrast();
     const preview = (id) => {
         if (!pickerOpen())
             return;
@@ -79,6 +105,7 @@ export function createAppearanceOwner(config, renderer, terminalPaletteOwner) {
     const cancelPicker = () => {
         if (!pickerOpen())
             return;
+        setContrast(originalContrast);
         apply(originalSelection);
         setPickerOpen(false);
         setPickerError(null);
@@ -89,6 +116,7 @@ export function createAppearanceOwner(config, renderer, terminalPaletteOwner) {
         try {
             updateAppConfig({
                 theme: {
+                    automaticContrast: automaticContrast(),
                     mode: theme().setting,
                     preset: findVisualThemePreset(pickerSelection())?.id ?? "",
                 },
@@ -105,7 +133,7 @@ export function createAppearanceOwner(config, renderer, terminalPaletteOwner) {
         const order = ["dark", "light", "system"];
         const next = order[(order.indexOf(theme().setting) + 1) % order.length];
         apply(next);
-        updateAppConfig({ theme: { mode: next, preset: "" } });
+        updateAppConfig({ theme: { mode: next, preset: "", automaticContrast: automaticContrast() } });
         notice.publish(`theme → ${next}`);
     };
     return {
@@ -116,6 +144,8 @@ export function createAppearanceOwner(config, renderer, terminalPaletteOwner) {
         palette,
         hostPalette,
         setTransientNote: notice.publish,
+        automaticContrast,
+        toggleAutomaticContrast,
         pickerOpen,
         pickerError,
         pickerQuery,
@@ -125,6 +155,7 @@ export function createAppearanceOwner(config, renderer, terminalPaletteOwner) {
             if (pickerOpen())
                 return;
             originalSelection = pickerSelection();
+            originalContrast = automaticContrast();
             setPickerQuery("");
             setPickerError(null);
             setPickerOpen(true);
@@ -139,7 +170,9 @@ export function createAppearanceOwner(config, renderer, terminalPaletteOwner) {
                 return true;
             const name = event.name.toLowerCase();
             const choices = pickerOptions();
-            if (name === "escape")
+            if (event.ctrl && name === "a")
+                toggleAutomaticContrast();
+            else if (name === "escape")
                 cancelPicker();
             else if (name === "return" || name === "enter")
                 savePicker();
@@ -166,6 +199,7 @@ export function createAppearanceOwner(config, renderer, terminalPaletteOwner) {
         },
         cycleTheme,
         dispose() {
+            renderer.removePostProcessFn?.(postProcess);
             stopTheme();
             stopRendererTheme();
             stopHostPalette();

package/packages/daemon/dist/tui/mirror/runtime/application-fleet-preview.js

@@ -1,7 +1,7 @@
 import { canonicalDaemonUrl } from "../../../lib/canonical-daemon.js";
 import { stripVTControlCharacters } from "node:util";
 /** One-shot snapshot pinned to this route's exact authority; never the selected-machine singleton. */
-export async function readFleetWindowPreview(handle, liveSessionId, signal, windowId) {
+export async function readFleetWindowPreview(handle, liveSessionId, signal, windowId, paneId) {
     const daemon = handle.read();
     const epoch = handle.endpoint().epoch;
     if (!daemon?.authToken || handle.endpoint().state !== "ready")
@@ -18,6 +18,7 @@ export async function readFleetWindowPreview(handle, liveSessionId, signal, wind
             body: JSON.stringify({
                 expectedInstanceId: daemon.instanceId,
                 liveSessionId,
+                ...(paneId ? { paneId } : {}),
                 ...(windowId ? { windowId } : {}),
             }),
         });
@@ -50,6 +51,7 @@ export async function readFleetWindowPreview(handle, liveSessionId, signal, wind
             body.daemon?.instanceId !== daemon.instanceId ||
             body.daemon?.startedAt !== daemon.startedAt ||
             body.liveSessionId !== liveSessionId ||
+            (paneId && body.selectedPaneId !== paneId) ||
             typeof body.text !== "string" ||
             body.text.length > 8192)
             return { status: "unavailable" };
@@ -87,6 +89,7 @@ export async function readFleetWindowPreview(handle, liveSessionId, signal, wind
             status: "ready",
             snapshot: {
                 text: clean(body.text),
+                ...(body.selectedPaneId ? { selectedPaneId: body.selectedPaneId } : {}),
                 selectedWindowId,
                 windows: windows.map((w) => ({
                     id: w.id,

package/packages/daemon/dist/tui/mirror/runtime/application-machine-sidebar.jsx

@@ -68,6 +68,7 @@ export function ApplicationMachineSidebar(props) {
             }))
             : []),
     ]));
+    const rowsByKey = createMemo(() => new Map(rows().map((row) => [row.key, row])));
     const index = () => Math.max(0, rows().findIndex((row) => row.key === selectedKey()));
     const controlGroup = () => {
         const group = rows()[index()]?.group;
@@ -281,49 +282,69 @@ export function ApplicationMachineSidebar(props) {
                 revealFocusedRow();
             };
         }} height={machineHeight()} width={props.width} scrollX={false} scrollY={true} horizontalScrollbarOptions={{ visible: false }}>
-        <For each={rows()}>
-          {(row) => (<box width={Math.max(1, props.width - 1)} height={row.agent ? (row.agentHeading ? 3 : 2) : 1} flexShrink={0} flexDirection="column">
-              <Show when={row.agentHeading}>
-                <text height={1} fg={props.theme.roles.text.secondary}>
-                  {" "}
-                  Agents
-                </text>
-              </Show>
-              <NavigationRow theme={props.theme} id={`machine:${row.key}`} width={Math.max(1, props.width - 1)} labelColor={!row.agent && !row.session ? fleetHostColor(row.group) : undefined} label={row.agent
-                ? row.agent.name
-                : row.session
-                    ? friendlySessionLabel(row.session.name)
-                    : row.group.label} marker={row.agent
-                ? active(row)
-                    ? row.agent.attention
-                        ? "›!"
-                        : "›"
-                    : row.agent.attention
-                        ? "!"
-                        : "•"
-                : row.session
-                    ? props.model.favorites?.().includes(row.session.id)
-                        ? " ★"
-                        : active(row)
-                            ? " ›"
-                            : "  "
-                    : collapsed().has(preferenceKey(row.group))
-                        ? "▸"
-                        : "▾"} detail={row.agent
-                ? row.group.state !== "ready" || row.agent.disabled
-                    ? "unavailable"
-                    : `[${terminalAgentStatusLabel(row.agent.activity)}]`
-                : row.session
-                    ? row.group.state !== "ready" || row.session.disabled
+        <For each={rows().map((row) => row.key)}>
+          {(key) => {
+            // The semantic key owns the native row; fresh snapshots update its
+            // props instead of destroying and recreating identical renderables.
+            const current = createMemo((previous) => rowsByKey().get(key) ?? previous, rowsByKey().get(key));
+            const row = {
+                key,
+                get group() {
+                    return current().group;
+                },
+                get session() {
+                    return current().session;
+                },
+                get agent() {
+                    return current().agent;
+                },
+                get agentHeading() {
+                    return current().agentHeading;
+                },
+            };
+            return (<box width={Math.max(1, props.width - 1)} height={row.agent ? (row.agentHeading ? 3 : 2) : 1} flexShrink={0} flexDirection="column">
+                <Show when={row.agentHeading}>
+                  <text height={1} fg={props.theme.roles.text.secondary}>
+                    {" "}
+                    Agents
+                  </text>
+                </Show>
+                <NavigationRow theme={props.theme} id={`machine:${row.key}`} width={Math.max(1, props.width - 1)} labelColor={!row.agent && !row.session ? fleetHostColor(row.group) : undefined} label={row.agent
+                    ? row.agent.name
+                    : row.session
+                        ? friendlySessionLabel(row.session.name)
+                        : row.group.label} marker={row.agent
+                    ? active(row)
+                        ? row.agent.attention
+                            ? "›!"
+                            : "›"
+                        : row.agent.attention
+                            ? "!"
+                            : "•"
+                    : row.session
+                        ? props.model.favorites?.().includes(row.session.id)
+                            ? " ★"
+                            : active(row)
+                                ? " ›"
+                                : "  "
+                        : collapsed().has(preferenceKey(row.group))
+                            ? "▸"
+                            : "▾"} detail={row.agent
+                    ? row.group.state !== "ready" || row.agent.disabled
                         ? "unavailable"
-                        : `${row.session.paneCount}p${row.group.agents?.length ? ` ${activity(row).label}` : ""}`
-                    : row.group.agents?.length && row.group.state === "ready"
-                        ? activity(row).label
-                        : `${connectionDetail(row.group)}${row.group.agents?.length ? " ?" : ""}`} selected={Boolean((row.session || row.agent) && active(row))} focused={Boolean(focused() && row.key === selectedKey())} attention={row.agent?.attention ?? activity(row).kind === "attention"} onActivate={(source) => activate(row, source)}/>
-              <Show when={row.agent}>
-                {(agent) => (<text height={1} fg={props.theme.roles.text.muted} content={clipTerminal(`  ${friendlySessionLabel(agent().sessionName)}`, Math.max(1, props.width - 1))}/>)}
-              </Show>
-            </box>)}
+                        : `[${terminalAgentStatusLabel(row.agent.activity)}]`
+                    : row.session
+                        ? row.group.state !== "ready" || row.session.disabled
+                            ? "unavailable"
+                            : `${row.session.paneCount}p${row.group.agents?.length ? ` ${activity(row).label}` : ""}`
+                        : row.group.agents?.length && row.group.state === "ready"
+                            ? activity(row).label
+                            : `${connectionDetail(row.group)}${row.group.agents?.length ? " ?" : ""}`} selected={Boolean((row.session || row.agent) && active(row))} focused={Boolean(focused() && row.key === selectedKey())} attention={row.agent?.attention ?? activity(row).kind === "attention"} onActivate={(source) => activate(row, source)}/>
+                <Show when={row.agent}>
+                  {(agent) => (<text height={1} fg={props.theme.roles.text.muted} content={clipTerminal(`  ${friendlySessionLabel(agent().sessionName)}`, Math.max(1, props.width - 1))}/>)}
+                </Show>
+              </box>);
+        }}
         </For>
       </scrollbox>
       <For each={agentHeight() > 0 ? [true] : []}>