pilotswarm 0.5.37 → 0.5.38

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pilotswarm",
-    "version": "0.5.37",
+    "version": "0.5.38",
     "description": "PilotSwarm application package: terminal UI, browser portal + Web API server, and MCP server — one install, three bins.",
     "type": "module",
     "license": "MIT",
@@ -81,13 +81,13 @@
         "ink": "^6.8.0",
         "jose": "^6.2.2",
         "mermaid": "^11.16.0",
-        "pilotswarm-sdk": "0.5.37",
+        "pilotswarm-sdk": "0.5.38",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
         "ws": "^8.18.2"
     },
     "devDependencies": {
         "@vitejs/plugin-react": "^5.1.0",
-        "vite": "^7.2.0"
+        "vite": "7.3.5"
     }
 }

package/ui/core/src/controller.js

@@ -1,4 +1,5 @@
 import { UI_COMMANDS, FOCUS_REGIONS, INSPECTOR_TABS, cycleValue } from "./commands.js";
+import { canvasKey as canvasPrefKey } from "./state.js";
 import { parseAgentSourceLink } from "./repo-links.js";
 import { importPackageFilesFromLink, readImportedPackageName } from "./repo-import.js";
 import {
@@ -2414,6 +2415,17 @@ export class PilotSwarmUiController {
         if (pendingGroupRows) {
             this.dispatch({ type: "sessions/groupsLoaded", groups: pendingGroupRows, sessions });
         }
+        // Canvas summaries ride the list rows (session_canvases join) — seed
+        // the store so rows mark on cold load, before any session is selected
+        // or any live event arrives. Never regresses what live events already
+        // know; see the canvas/seed reducer.
+        const canvasSeed = [];
+        for (const row of sessions) {
+            for (const c of Array.isArray(row?.canvases) ? row.canvases : []) {
+                canvasSeed.push({ sessionId: row.sessionId, slot: c.slot, name: c.name, latestRev: c.latestRev, sizeBytes: c.sizeBytes });
+            }
+        }
+        if (canvasSeed.length) this.dispatch({ type: "canvas/seed", entries: canvasSeed });
         this.dispatch({ type: "sessions/loaded", sessions });
         this.refreshOpenSessionOwnerFilterModal();
         const selected = this.getState().sessions.activeSessionId;
@@ -4254,9 +4266,13 @@ export class PilotSwarmUiController {
     applyCanvasUpdate(sessionId, event) {
         const rev = Number(event?.data?.rev);
         if (!sessionId || !Number.isFinite(rev) || rev <= 0) return false;
+        const rawSlot = Number(event?.data?.slot);
+        const slot = Number.isInteger(rawSlot) && rawSlot >= 1 && rawSlot <= 5 ? rawSlot : 1;
         this.dispatch({
             type: "canvas/updated",
             sessionId,
+            slot,
+            ...(typeof event?.data?.name === "string" ? { name: event.data.name } : {}),
             rev,
             note: typeof event?.data?.note === "string" ? event.data.note : "",
             sizeBytes: event?.data?.sizeBytes,
@@ -4265,7 +4281,9 @@ export class PilotSwarmUiController {
 
         const state = this.getState();
         if (sessionId !== state.sessions.activeSessionId) return true;
-        if (state.canvas.prefs[sessionId]?.optedOut) return true;
+        // The opt-out is PER SLOT: leaving one canvas by hand must not
+        // silence a different canvas's first draw.
+        if (state.canvas.prefs[canvasPrefKey(sessionId, slot)]?.optedOut) return true;
         const createdAt = event?.createdAt ? Date.parse(event.createdAt) : Number.NaN;
         if (Number.isFinite(createdAt) && Date.now() - createdAt > PRESENTED_ARTIFACT_FRESHNESS_MS) {
             return true;
@@ -4274,7 +4292,7 @@ export class PilotSwarmUiController {
         // when the mode is already "canvas", because a phone can be off its
         // canvas tab while the mode state still says canvas — the tick is
         // what brings the tab back. On desktop the repeat dispatch is a no-op.
-        this.dispatch({ type: "canvas/flip", sessionId });
+        this.dispatch({ type: "canvas/flip", sessionId, slot });
         return true;
     }
 
@@ -4337,29 +4355,55 @@ export class PilotSwarmUiController {
             return;
         }
         try {
+            // A 30-event window, not 1: five interleaved slots mean the top
+            // event only describes the most recently drawn slot. Latest per
+            // slot wins; every drawn slot gets its snapshot.
             const rows = await this.transport.getSessionEventsBefore(
-                sessionId, Number.MAX_SAFE_INTEGER, 1, ["session.canvas_updated"],
+                sessionId, Number.MAX_SAFE_INTEGER, 30, ["session.canvas_updated"],
             );
-            const top = Array.isArray(rows) ? rows[0] : null;
-            this.dispatch({
-                type: "canvas/snapshot",
-                sessionId,
-                rev: Number(top?.data?.rev) || 0,
-                note: typeof top?.data?.note === "string" ? top.data.note : "",
-                sizeBytes: top?.data?.sizeBytes,
-                responseContract: top?.data?.responseContract,
-            });
-            // The latest data tick is the page's cold-load state — replay it
-            // so a freshly loaded shell can reconstruct without the agent.
-            if ((Number(top?.data?.rev) || 0) > 0) {
+            const bySlot = new Map();
+            for (const row of Array.isArray(rows) ? rows : []) {
+                const slot = Number(row?.data?.slot) || 1;
+                const rev = Number(row?.data?.rev) || 0;
+                if (!bySlot.has(slot) || rev > (Number(bySlot.get(slot)?.data?.rev) || 0)) bySlot.set(slot, row);
+            }
+            // Always at least a slot-1 snapshot (rev 0 marks snapshotLoaded
+            // so this does not respin).
+            if (!bySlot.has(1)) bySlot.set(1, null);
+            let anyDrawn = false;
+            for (const [slot, top] of bySlot) {
+                const rev = Number(top?.data?.rev) || 0;
+                if (rev > 0) anyDrawn = true;
+                this.dispatch({
+                    type: "canvas/snapshot",
+                    sessionId,
+                    slot,
+                    rev,
+                    ...(typeof top?.data?.name === "string" ? { name: top.data.name } : {}),
+                    note: typeof top?.data?.note === "string" ? top.data.note : "",
+                    sizeBytes: top?.data?.sizeBytes,
+                    responseContract: top?.data?.responseContract,
+                });
+            }
+            // The latest data tick per slot is that page's cold-load state —
+            // replay it so a freshly loaded shell reconstructs without the
+            // agent.
+            if (anyDrawn) {
                 const dataRows = await this.transport.getSessionEventsBefore(
-                    sessionId, Number.MAX_SAFE_INTEGER, 1, ["session.canvas_data"],
+                    sessionId, Number.MAX_SAFE_INTEGER, 30, ["session.canvas_data"],
                 ).catch(() => []);
-                const tick = Array.isArray(dataRows) ? dataRows[0] : null;
-                if (tick?.data?.dataRev) {
+                const tickBySlot = new Map();
+                for (const row of Array.isArray(dataRows) ? dataRows : []) {
+                    const slot = Number(row?.data?.slot) || 1;
+                    const dr = Number(row?.data?.dataRev) || 0;
+                    if (!tickBySlot.has(slot) || dr > (Number(tickBySlot.get(slot)?.data?.dataRev) || 0)) tickBySlot.set(slot, row);
+                }
+                for (const [slot, tick] of tickBySlot) {
+                    if (!tick?.data?.dataRev) continue;
                     this.dispatch({
                         type: "canvas/data",
                         sessionId,
+                        slot,
                         dataRev: Number(tick.data.dataRev),
                         payload: tick.data.payload,
                         note: typeof tick.data.note === "string" ? tick.data.note : "",
@@ -4371,6 +4415,27 @@ export class PilotSwarmUiController {
         }
     }
 
+    /**
+     * An agent asked to PRESENT an already-drawn canvas — no bytes, no rev,
+     * nothing marked unseen. Same guards as a draw's auto-flip: only the
+     * active session, only a fresh event (a reconnect replay must not yank
+     * the view), and the user's manual dismissal of that slot still wins.
+     */
+    applyCanvasPresented(sessionId, event) {
+        const rawSlot = Number(event?.data?.slot);
+        const slot = Number.isInteger(rawSlot) && rawSlot >= 1 && rawSlot <= 5 ? rawSlot : 1;
+        if (!sessionId) return false;
+        const state = this.getState();
+        if (sessionId !== state.sessions.activeSessionId) return false;
+        if (state.canvas.prefs[canvasPrefKey(sessionId, slot)]?.optedOut) return false;
+        const createdAt = event?.createdAt ? Date.parse(event.createdAt) : Number.NaN;
+        if (Number.isFinite(createdAt) && Date.now() - createdAt > PRESENTED_ARTIFACT_FRESHNESS_MS) {
+            return false;
+        }
+        this.dispatch({ type: "canvas/flip", sessionId, slot });
+        return true;
+    }
+
     mergeSessionEvent(sessionId, event) {
         if (!sessionId || !event) return false;
         const state = this.getState();
@@ -4429,10 +4494,14 @@ export class PilotSwarmUiController {
         if (event.eventType === "session.canvas_updated") {
             this.applyCanvasUpdate(sessionId, event);
         }
+        if (event.eventType === "session.canvas_presented") {
+            this.applyCanvasPresented(sessionId, event);
+        }
         if (event.eventType === "session.canvas_data") {
             this.dispatch({
                 type: "canvas/data",
                 sessionId,
+                slot: Number(event?.data?.slot) || 1,
                 dataRev: Number(event?.data?.dataRev),
                 payload: event?.data?.payload,
                 note: typeof event?.data?.note === "string" ? event.data.note : "",
@@ -7449,7 +7518,15 @@ export class PilotSwarmUiController {
 
     applyPaneVisualScrollOffset(pane, offset, options = {}, state = this.getState()) {
         const maxOffset = this.getPaneMaxScrollOffset(pane, state);
-        const nextOffset = Math.max(0, Math.min(Number(offset) || 0, maxOffset));
+        // fromViewport: the offset was measured off the real DOM (scrollTop /
+        // row height), which the browser has already bounded. Clamping it
+        // against the CONTROLLER's max — counted in TUI render-metric rows, a
+        // different unit — teleported the pane on the first wheel tick: one
+        // 100px notch re-applied as metric-max × 16px, thousands of pixels
+        // away. The two row spaces must never clamp each other.
+        const nextOffset = options.fromViewport
+            ? Math.max(0, Number(offset) || 0)
+            : Math.max(0, Math.min(Number(offset) || 0, maxOffset));
         if (this.paneUsesStickyBottomFollow(pane, state)) {
             const followBottom = options.followBottom !== undefined
                 ? Boolean(options.followBottom)
@@ -7468,7 +7545,7 @@ export class PilotSwarmUiController {
     updatePaneScrollFromViewport(pane, offset, options = {}) {
         const state = this.getState();
         if (this.paneUsesStickyBottomFollow(pane, state)) {
-            this.applyPaneVisualScrollOffset(pane, offset, options, state);
+            this.applyPaneVisualScrollOffset(pane, offset, { ...options, fromViewport: true }, state);
             return;
         }
         this.scrollPaneTo(pane, offset);

package/ui/core/src/reducer.js

@@ -9,7 +9,10 @@ import {
     normalizeSessionOwnerFilter,
     normalizeStoredActiveSessionId,
     normalizeStoredCanvasPrefs,
+    canvasKey,
+    parseCanvasKey,
     normalizeStoredCollapsedSessionIds,
+    normalizeStoredDesktopPanes,
     normalizeStoredLayoutAdjustments,
     normalizeStoredPinnedSessionIds,
     normalizeStoredSessionOrder,
@@ -112,10 +115,15 @@ function mergeCanvasPrefs(local, stored, byId) {
             optedOut: storedEntry ? storedEntry.optedOut : Boolean(localEntry?.optedOut),
             lastViewedRev: Math.max(storedEntry?.lastViewedRev || 0, localEntry?.lastViewedRev || 0),
             lastViewedDataRev: Math.max(storedEntry?.lastViewedDataRev || 0, localEntry?.lastViewedDataRev || 0),
+            // Latest write wins is unknowable here; the local value is the one
+            // this window just dragged, so it outranks the poll.
+            ...((localEntry?.zenRailPx || storedEntry?.zenRailPx)
+                ? { zenRailPx: localEntry?.zenRailPx || storedEntry?.zenRailPx }
+                : {}),
         };
-        if (!merged.optedOut && merged.lastViewedRev === 0 && merged.lastViewedDataRev === 0) continue;
-        const session = byId?.[sessionId];
-        if (session && (session.parentSessionId || session.isGroup)) continue;
+        if (!merged.optedOut && merged.lastViewedRev === 0 && merged.lastViewedDataRev === 0 && !merged.zenRailPx) continue;
+        const session = byId?.[parseCanvasKey(sessionId).sessionId];
+        if (session && session.isGroup) continue;
         out[sessionId] = merged;
     }
     return out;
@@ -808,6 +816,17 @@ export function appReducer(state, action) {
                 && typeof settings.touchScale === "boolean";
             const hasRightPaneMode = Object.prototype.hasOwnProperty.call(settings, "rightPaneMode")
                 && (settings.rightPaneMode === "canvas" || settings.rightPaneMode === "panes");
+            // The two independent columns. A profile written by a build that
+            // predates them carries only rightPaneMode, so fall back to
+            // migrating that — see normalizeStoredDesktopPanes.
+            const hasDesktopPanes = Object.prototype.hasOwnProperty.call(settings, "desktopPanes")
+                && settings.desktopPanes && typeof settings.desktopPanes === "object";
+            const nextDesktopPanes = (hasDesktopPanes || hasRightPaneMode)
+                ? normalizeStoredDesktopPanes(
+                    hasDesktopPanes ? settings.desktopPanes : null,
+                    hasRightPaneMode ? settings.rightPaneMode : null,
+                )
+                : null;
             const hasCanvasPrefs = Object.prototype.hasOwnProperty.call(settings, "canvasPrefs");
             const hasPins = Object.prototype.hasOwnProperty.call(settings, "pinnedSessionIds");
             const hasCollapsed = Object.prototype.hasOwnProperty.call(settings, "collapsedSessionIds");
@@ -872,6 +891,9 @@ export function appReducer(state, action) {
                     themeId: hasTheme ? settings.themeId.trim() : selection.ui.themeId,
                     touchScale: hasTouchScale ? settings.touchScale : selection.ui.touchScale,
                     rightPaneMode: hasRightPaneMode ? settings.rightPaneMode : selection.ui.rightPaneMode,
+                    ...(nextDesktopPanes
+                        ? { canvasOpen: nextDesktopPanes.canvasOpen, diagnosticsOpen: nextDesktopPanes.diagnosticsOpen, canvasZen: nextDesktopPanes.zen === true }
+                        : {}),
                     layout: nextLayout,
                 },
                 canvas: hasCanvasPrefs
@@ -946,6 +968,46 @@ export function appReducer(state, action) {
                 },
             };
 
+        // Where the canvas/diagnostics seam sits when both columns are open.
+        // A pixel delta from an even split of the right side, like the other
+        // adjusts. Closing a column is a separate action — see
+        // CanvasDiagnosticsResizeHandle, which decides that on release.
+        case "ui/canvasPaneAdjust":
+            return {
+                ...state,
+                ui: {
+                    ...state.ui,
+                    layout: {
+                        ...(state.ui.layout || {}),
+                        canvasPaneAdjust: Number(action.canvasPaneAdjust) || 0,
+                    },
+                },
+            };
+
+        case "ui/diagnosticsSplitAdjust":
+            return {
+                ...state,
+                ui: {
+                    ...state.ui,
+                    layout: {
+                        ...(state.ui.layout || {}),
+                        diagnosticsSplitAdjust: Number(action.diagnosticsSplitAdjust) || 0,
+                    },
+                },
+            };
+
+        case "ui/diagnosticsPaneAdjust":
+            return {
+                ...state,
+                ui: {
+                    ...state.ui,
+                    layout: {
+                        ...(state.ui.layout || {}),
+                        diagnosticsPaneAdjust: Number(action.diagnosticsPaneAdjust) || 0,
+                    },
+                },
+            };
+
         case "ui/activityPaneAdjust":
             return {
                 ...state,
@@ -2638,24 +2700,114 @@ export function appReducer(state, action) {
             }
             return {
                 ...state,
-                ui: { ...state.ui, rightPaneMode: mode },
+                ui: { ...state.ui, rightPaneMode: mode, canvasOpen: mode === "canvas" },
+                canvas: { ...state.canvas, prefs },
+            };
+        }
+
+        // Canvas as a column of its own. Same opt-out bookkeeping as the old
+        // mode switch above — closing by hand still says "do not flip me back",
+        // opening by hand still withdraws that — but closing the canvas no
+        // longer implies showing anything else, because Diagnostics is now a
+        // separate column with its own toggle.
+        //
+        // `open` may be omitted to mean "toggle".
+        case "ui/canvasOpen": {
+            const open = typeof action.open === "boolean" ? action.open : !state.ui.canvasOpen;
+            const sessionId = action.sessionId || state.sessions.activeSessionId || null;
+            let prefs = state.canvas.prefs;
+            if (sessionId) {
+                const prev = prefs[sessionId] || { optedOut: false, lastViewedRev: 0 };
+                if (open && prev.optedOut) {
+                    prefs = { ...prefs, [sessionId]: { ...prev, optedOut: false } };
+                } else if (!open && action.manual && !prev.optedOut) {
+                    prefs = { ...prefs, [sessionId]: { ...prev, optedOut: true } };
+                }
+            }
+            return {
+                ...state,
+                // rightPaneMode is kept in step for anything still reading it.
+                // Closing always drops full screen: otherwise the next open
+                // comes back covering the workspace with no warning.
+                ui: {
+                    ...state.ui,
+                    canvasOpen: open,
+                    rightPaneMode: open ? "canvas" : "panes",
+                    ...(open ? {} : { canvasMaximized: false, canvasZen: false }),
+                },
                 canvas: { ...state.canvas, prefs },
             };
         }
 
+        // Diagnostics — today's Inspector + Activity, travelling as one column.
+        // No canvas bookkeeping: it has nothing to do with the canvas, which is
+        // the whole point of splitting the old enum in two.
+        // Zen: sessions hidden, chat a narrow rail, canvas the workbench.
+        // Turning it on opens the canvas; it means nothing without one.
+        case "ui/canvasZen": {
+            const on = typeof action.on === "boolean" ? action.on : !state.ui.canvasZen;
+            if (on === Boolean(state.ui.canvasZen)) return state;
+            return {
+                ...state,
+                ui: { ...state.ui, canvasZen: on, ...(on ? { canvasOpen: true, rightPaneMode: "canvas" } : {}) },
+            };
+        }
+
+        // The zen chat-rail width for one session. Clamped so a wild drag can
+        // never wedge the rail off screen or crush the canvas.
+        case "canvas/zenRail": {
+            const sessionId = String(action.sessionId || "").trim();
+            const px = Number(action.px);
+            if (!sessionId || !Number.isFinite(px)) return state;
+            const prev = state.canvas.prefs[sessionId] || { optedOut: false, lastViewedRev: 0 };
+            const clamped = Math.max(260, Math.min(720, Math.round(px)));
+            return {
+                ...state,
+                canvas: { ...state.canvas, prefs: { ...state.canvas.prefs, [sessionId]: { ...prev, zenRailPx: clamped } } },
+            };
+        }
+
+        // Full-screen canvas. The header stays put and the canvas covers the
+        // workspace below it, so there is always a way back.
+        case "ui/canvasMaximized": {
+            const on = typeof action.on === "boolean" ? action.on : !state.ui.canvasMaximized;
+            if (on === Boolean(state.ui.canvasMaximized)) return state;
+            return { ...state, ui: { ...state.ui, canvasMaximized: on } };
+        }
+
+        case "ui/diagnosticsOpen": {
+            const open = typeof action.open === "boolean" ? action.open : !state.ui.diagnosticsOpen;
+            if (open === state.ui.diagnosticsOpen) return state;
+            return { ...state, ui: { ...state.ui, diagnosticsOpen: open } };
+        }
+
         // The agent-driven flip. The guards (active session, freshness,
         // opt-out) live in the controller; by the time this dispatches the
         // flip is decided. flipSeq ticks even when the mode is already
         // "canvas" — a phone can be off the canvas tab while the persisted
         // mode still says canvas, and the tick is what brings its tab back.
         case "canvas/flip": {
+            const slot = Number.isInteger(Number(action.slot)) && Number(action.slot) >= 1 && Number(action.slot) <= 5
+                ? Number(action.slot) : 1;
             return {
                 ...state,
-                ui: { ...state.ui, rightPaneMode: "canvas" },
+                // Opens the canvas column ON THE SLOT THAT DREW; leaves
+                // Diagnostics exactly as the user left it. An agent drawing
+                // must not close their panels.
+                ui: { ...state.ui, rightPaneMode: "canvas", canvasOpen: true, canvasSlot: slot },
                 canvas: { ...state.canvas, flipSeq: (state.canvas.flipSeq || 0) + 1 },
             };
         }
 
+        // Which of the active session's canvases the pane shows. In-memory
+        // only: a reload lands on slot 1 (or wherever the next flip points).
+        case "ui/canvasSlot": {
+            const slot = Number.isInteger(Number(action.slot)) && Number(action.slot) >= 1 && Number(action.slot) <= 5
+                ? Number(action.slot) : 1;
+            if (slot === (state.ui.canvasSlot || 1)) return state;
+            return { ...state, ui: { ...state.ui, canvasSlot: slot } };
+        }
+
         // The surface's receipt: revision `rev` (a draw) and/or `dataRev` (a
         // tick) actually rendered on screen. Both feed the unseen badge.
         case "canvas/viewed": {
@@ -2663,7 +2815,8 @@ export function appReducer(state, action) {
             if (!sessionId) return state;
             const rev = Number(action.rev);
             const dataRev = Number(action.dataRev);
-            const prev = state.canvas.prefs[sessionId] || { optedOut: false, lastViewedRev: 0, lastViewedDataRev: 0 };
+            const key = canvasKey(sessionId, action.slot);
+            const prev = state.canvas.prefs[key] || { optedOut: false, lastViewedRev: 0, lastViewedDataRev: 0 };
             const nextRev = Number.isFinite(rev) && rev > (prev.lastViewedRev || 0) ? rev : (prev.lastViewedRev || 0);
             const nextDataRev = Number.isFinite(dataRev) && dataRev > (prev.lastViewedDataRev || 0) ? dataRev : (prev.lastViewedDataRev || 0);
             if (nextRev === (prev.lastViewedRev || 0) && nextDataRev === (prev.lastViewedDataRev || 0)) return state;
@@ -2671,16 +2824,49 @@ export function appReducer(state, action) {
                 ...state,
                 canvas: {
                     ...state.canvas,
-                    prefs: { ...state.canvas.prefs, [sessionId]: { ...prev, lastViewedRev: nextRev, lastViewedDataRev: nextDataRev } },
-                },
-            };
+                    prefs: { ...state.canvas.prefs, [key]: { ...prev, lastViewedRev: nextRev, lastViewedDataRev: nextDataRev } },
+                },
+            };
+        }
+
+        // The sessions-list seed: rev+name per slot from session_canvases,
+        // merged under the live entries. Never regresses a rev a live event
+        // already delivered, never sets snapshotLoaded (the full snapshot —
+        // note, contract, data replay — still loads on selection).
+        case "canvas/seed": {
+            const entries = Array.isArray(action.entries) ? action.entries : [];
+            if (!entries.length) return state;
+            let next = null;
+            for (const e of entries) {
+                const sessionId = String(e?.sessionId || "").trim();
+                const rev = Number(e?.latestRev);
+                const slotN = Number(e?.slot);
+                if (!sessionId || !Number.isFinite(rev) || rev <= 0) continue;
+                if (!Number.isInteger(slotN) || slotN < 1 || slotN > 5) continue;
+                const key = canvasKey(sessionId, slotN);
+                const existing = (next || state.canvas.bySessionId)[key] || {};
+                if ((existing.latestRev || 0) >= rev && existing.name !== undefined) continue;
+                next = next || { ...state.canvas.bySessionId };
+                next[key] = {
+                    ...existing,
+                    slot: slotN,
+                    latestRev: Math.max(existing.latestRev || 0, rev),
+                    ...(typeof e.name === "string" && existing.name === undefined ? { name: e.name } : {}),
+                    ...(existing.sizeBytes === undefined && e.sizeBytes !== undefined ? { sizeBytes: e.sizeBytes } : {}),
+                };
+            }
+            if (!next) return state;
+            return { ...state, canvas: { ...state.canvas, bySessionId: next } };
         }
 
         case "canvas/updated": {
             const sessionId = String(action.sessionId || "").trim();
             const rev = Number(action.rev);
             if (!sessionId || !Number.isFinite(rev) || rev <= 0) return state;
-            const existing = state.canvas.bySessionId[sessionId] || {};
+            const slot = Number.isInteger(Number(action.slot)) && Number(action.slot) >= 1 && Number(action.slot) <= 5
+                ? Number(action.slot) : 1;
+            const key = canvasKey(sessionId, slot);
+            const existing = state.canvas.bySessionId[key] || {};
             // Monotonic: replays and out-of-order merges must never regress
             // the known revision (freshness gates the FLIP, never the data).
             if ((existing.latestRev || 0) >= rev) return state;
@@ -2690,8 +2876,10 @@ export function appReducer(state, action) {
                     ...state.canvas,
                     bySessionId: {
                         ...state.canvas.bySessionId,
-                        [sessionId]: {
+                        [key]: {
                             ...existing,
+                            slot,
+                            ...(typeof action.name === "string" ? { name: action.name } : {}),
                             latestRev: rev,
                             note: typeof action.note === "string" ? action.note : "",
                             sizeBytes: Number.isFinite(Number(action.sizeBytes)) ? Number(action.sizeBytes) : null,
@@ -2712,9 +2900,12 @@ export function appReducer(state, action) {
         // latestDataRev vs lastViewedDataRev. Monotonic like the draw rev.
         case "canvas/data": {
             const sessionId = String(action.sessionId || "").trim();
+            const slot = Number.isInteger(Number(action.slot)) && Number(action.slot) >= 1 && Number(action.slot) <= 5
+                ? Number(action.slot) : 1;
+            const key = canvasKey(sessionId, slot);
             const dataRev = Number(action.dataRev);
             if (!sessionId || !Number.isFinite(dataRev) || dataRev <= 0) return state;
-            const existing = state.canvas.bySessionId[sessionId] || {};
+            const existing = state.canvas.bySessionId[key] || {};
             if ((existing.latestDataRev || 0) >= dataRev) return state;
             return {
                 ...state,
@@ -2722,7 +2913,7 @@ export function appReducer(state, action) {
                     ...state.canvas,
                     bySessionId: {
                         ...state.canvas.bySessionId,
-                        [sessionId]: {
+                        [key]: {
                             ...existing,
                             latestDataRev: dataRev,
                             dataPayload: action.payload && typeof action.payload === "object" ? action.payload : null,
@@ -2735,7 +2926,10 @@ export function appReducer(state, action) {
         case "canvas/snapshot": {
             const sessionId = String(action.sessionId || "").trim();
             if (!sessionId) return state;
-            const existing = state.canvas.bySessionId[sessionId] || {};
+            const slot = Number.isInteger(Number(action.slot)) && Number(action.slot) >= 1 && Number(action.slot) <= 5
+                ? Number(action.slot) : 1;
+            const key = canvasKey(sessionId, slot);
+            const existing = state.canvas.bySessionId[key] || {};
             const rev = Number(action.rev) || 0;
             return {
                 ...state,
@@ -2743,8 +2937,10 @@ export function appReducer(state, action) {
                     ...state.canvas,
                     bySessionId: {
                         ...state.canvas.bySessionId,
-                        [sessionId]: {
+                        [key]: {
                             ...existing,
+                            slot,
+                            ...(typeof action.name === "string" && ((existing.latestRev || 0) <= rev) ? { name: action.name } : {}),
                             // Events may have beaten the snapshot; never regress.
                             latestRev: Math.max(existing.latestRev || 0, rev),
                             note: (existing.latestRev || 0) > rev ? existing.note : (typeof action.note === "string" ? action.note : existing.note || ""),
@@ -2765,6 +2961,8 @@ export function appReducer(state, action) {
             const sessionId = String(action.sessionId || "").trim();
             const existing = state.canvas.bySessionId[sessionId];
             if (!sessionId || !existing?.snapshotLoaded) return state;
+            // Slots 2-5 of the same session invalidate with slot 1: the flag
+            // that gates re-take lives on the slot-1 entry.
             return {
                 ...state,
                 canvas: {