@flowdrop/flowdrop 1.13.0 → 1.15.0

package/dist/playground/mount.js

@@ -106,10 +106,10 @@ function buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusCh
         startPolling: () => {
             const session = getCurrentSession();
             if (session) {
-                playgroundService.startPolling(session.id, (response) => applyServerResponse(response), pollingInterval, config.shouldStopPolling, playgroundService.getLastSequenceNumber());
+                playgroundService.startPolling(session.id, (response) => applyServerResponse(response, session.id), pollingInterval, config.shouldStopPolling, playgroundService.getLastSequenceNumber());
             }
         },
-        pushMessages: (response) => applyServerResponse(response),
+        pushMessages: (response) => applyServerResponse(response, null),
         reset: () => {
             playgroundService.stopPolling();
             playgroundActions.reset();

package/dist/registry/builtinNodes.d.ts

@@ -70,7 +70,7 @@ export declare function getBuiltinTypes(): string[];
  * Type for built-in node types.
  * Use this when you specifically need a built-in type.
  */
-export type BuiltinNodeType = 'workflowNode' | 'simple' | 'square' | 'tool' | 'gateway' | 'note' | 'terminal' | 'idea';
+export type BuiltinNodeType = 'workflowNode' | 'simple' | 'square' | 'atom' | 'tool' | 'gateway' | 'note' | 'terminal' | 'idea';
 /**
  * Array of built-in type strings for runtime validation.
  */

package/dist/registry/builtinNodes.js

@@ -9,6 +9,7 @@ import { nodeComponentRegistry } from './nodeComponentRegistry.js';
 import WorkflowNode from '../components/nodes/WorkflowNode.svelte';
 import SimpleNode from '../components/nodes/SimpleNode.svelte';
 import SquareNode from '../components/nodes/SquareNode.svelte';
+import AtomNode from '../components/nodes/AtomNode.svelte';
 import ToolNode from '../components/nodes/ToolNode.svelte';
 import GatewayNode from '../components/nodes/GatewayNode.svelte';
 import NotesNode from '../components/nodes/NotesNode.svelte';
@@ -56,6 +57,17 @@ export const BUILTIN_NODE_COMPONENTS = [
         statusPosition: 'top-right',
         statusSize: 'sm'
     },
+    {
+        type: 'atom',
+        displayName: 'Atom (Minimal Value/Transform)',
+        description: 'Low-chrome label-only node for constants and inline transforms',
+        component: AtomNode,
+        icon: 'mdi:circle-small',
+        category: 'visual',
+        source: FLOWDROP_SOURCE,
+        statusPosition: 'top-right',
+        statusSize: 'sm'
+    },
     {
         type: 'tool',
         displayName: 'Tool (Agent Tool)',
@@ -197,6 +209,7 @@ export const BUILTIN_NODE_TYPES = [
     'workflowNode',
     'simple',
     'square',
+    'atom',
     'tool',
     'gateway',
     'note',

package/dist/schemas/v1/workflow.schema.json

@@ -51,6 +51,46 @@
     "metadata"
   ],
   "$defs": {
+    "AtomUIConfig": {
+      "type": "object",
+      "description": "Display/behaviour settings for minimalist `atom` nodes (e.g. Constant, Cast).\nLives under `extensions.ui.atom`. The atom renderer reads these to decide what\nto show, and `valueTypeKey` drives the bound output port's `dataType` from\nconfig so connection validation matches the type the user picked.\n\nAll fields are optional — an empty object renders a label-only pill using the\nnode's `label`.\n",
+      "properties": {
+        "valueKey": {
+          "type": "string",
+          "description": "Config key whose value becomes the node body text.\nFalls back to the node `label` when unset or empty.\n"
+        },
+        "valueTypeKey": {
+          "type": "string",
+          "description": "Config key holding the selected value's type (a port dataType id).\nThe bound output port adopts this dataType.\n"
+        },
+        "outputPortId": {
+          "type": "string",
+          "description": "Output port id driven by `valueTypeKey`.\nDefaults to the first output port when unset.\n"
+        },
+        "shape": {
+          "type": "string",
+          "enum": [
+            "pill",
+            "rectangle"
+          ],
+          "default": "pill",
+          "description": "Body shape. `pill` (default) is fully rounded; `rectangle` is lightly rounded.\n"
+        },
+        "prefix": {
+          "type": "string",
+          "description": "Dimmed affordance rendered before the body (e.g. `\"→ \"` to mark a transform).\nStays visible while the body value ellipsizes. Hidden in the empty state.\n"
+        },
+        "placeholder": {
+          "type": "string",
+          "description": "Text shown (dimmed) when the resolved body value is empty/unset."
+        },
+        "maxWidth": {
+          "type": "integer",
+          "description": "Max body width in px before the label ellipsizes."
+        }
+      },
+      "additionalProperties": false
+    },
     "AutocompleteConfig": {
       "type": "object",
       "description": "Configuration for autocomplete fields that fetch suggestions from a callback URL.\nUsed when format is \"autocomplete\".\n",
@@ -279,6 +319,42 @@
               "description": "Configuration for autocomplete fields (when format is \"autocomplete\")"
             }
           ]
+        },
+        "readOnly": {
+          "type": "boolean",
+          "description": "JSON Schema `readOnly` keyword. When true, the field is displayed but\ncannot be edited (rendered in a disabled state).\n"
+        },
+        "height": {
+          "type": "string",
+          "description": "Editor height as a CSS value (e.g. `200px`).\nApplies to editor fields: `json`/`code`, `markdown`, and `template`.\nDefaults: `200px` (code), `300px` (markdown), `250px` (template).\n"
+        },
+        "darkTheme": {
+          "type": "boolean",
+          "description": "Force the editor's dark theme on or off.\nApplies to `json`/`code` and `template` fields.\nWhen omitted, the editor follows the resolved app theme.\n"
+        },
+        "autoFormat": {
+          "type": "boolean",
+          "default": true,
+          "description": "Whether to auto-format JSON on blur.\nApplies to `json`/`code` editor fields.\n"
+        },
+        "showToolbar": {
+          "type": "boolean",
+          "default": true,
+          "description": "Whether to show the editor toolbar.\nApplies to `markdown` editor fields.\n"
+        },
+        "showStatusBar": {
+          "type": "boolean",
+          "default": true,
+          "description": "Whether to show the editor status bar.\nApplies to `markdown` editor fields.\n"
+        },
+        "spellChecker": {
+          "type": "boolean",
+          "default": false,
+          "description": "Whether to enable spell checking.\nApplies to `markdown` editor fields.\n"
+        },
+        "placeholderExample": {
+          "type": "string",
+          "description": "Example template string shown as a placeholder hint.\nApplies to `template` fields.\n"
         }
       },
       "required": [
@@ -378,15 +454,17 @@
         },
         "nodeType": {
           "type": "string",
-          "description": "Changes how the node is visually rendered. This allows a single node definition\nto support multiple visual representations.\n\nAvailable built-in types:\n- `default`: Standard workflow node with full details\n- `simple`: Compact layout with minimal chrome\n- `square`: Geometric square layout (icon-only)\n- `tool`: Specialized style for agent tools\n- `gateway`: Branching control flow visualization\n- `terminal`: Start/end/exit node styling\n- `note`: Sticky note style for annotations\n\nThe node's `metadata.supportedTypes` defines which types are allowed.\nIf invalid or missing, falls back to `metadata.type` or \"default\".\n",
+          "description": "Changes how the node is visually rendered. This allows a single node definition\nto support multiple visual representations.\n\nAvailable built-in types:\n- `default`: Standard workflow node with full details\n- `simple`: Compact layout with minimal chrome\n- `square`: Geometric square layout (icon-only)\n- `atom`: Minimal label-only pill/rectangle (uses extensions.ui.atom)\n- `tool`: Specialized style for agent tools\n- `gateway`: Branching control flow visualization\n- `terminal`: Start/end/exit node styling\n- `note`: Sticky note style for annotations\n- `idea`: Conceptual idea node for BPMN-like flow diagrams\n\nThe node's `metadata.supportedTypes` defines which types are allowed.\nIf invalid or missing, falls back to `metadata.type` or \"default\".\n",
           "enum": [
             "default",
             "simple",
             "square",
+            "atom",
             "tool",
             "gateway",
             "terminal",
-            "note"
+            "note",
+            "idea"
           ]
         },
         "dynamicInputs": {
@@ -641,12 +719,14 @@
         "note",
         "simple",
         "square",
+        "atom",
         "tool",
         "gateway",
         "terminal",
+        "idea",
         "default"
       ],
-      "description": "Visual rendering type for the node.\n\nBuilt-in types:\n- `note` - Sticky note with markdown support\n- `simple` - Compact layout with header and description\n- `square` - Minimal square node with centered icon\n- `tool` - Specialized node for agent tools\n- `gateway` - Branching control flow with dynamic branches (uses config.branches)\n- `terminal` - Circular node for workflow start/end/exit points\n- `default` - Full-featured workflow node with dynamic port support\n\n## Dynamic Port Support\n\nThe `default` and `gateway` node types support dynamic ports:\n\n- **default**: Supports `config.dynamicInputs` and `config.dynamicOutputs`\n  for user-defined input/output handles\n- **gateway**: Supports `config.branches` for conditional branching paths\n\n## UI Extensions\n\nAll node types support `extensions.ui.hideUnconnectedHandles` to control\nvisibility of unconnected ports.\n"
+      "description": "Visual rendering type for the node.\n\nBuilt-in types:\n- `note` - Sticky note with markdown support\n- `simple` - Compact layout with header and description\n- `square` - Minimal square node with centered icon\n- `atom` - Minimal label-only pill/rectangle for value/transform nodes (uses extensions.ui.atom)\n- `tool` - Specialized node for agent tools\n- `gateway` - Branching control flow with dynamic branches (uses config.branches)\n- `terminal` - Circular node for workflow start/end/exit points\n- `idea` - Conceptual idea node for BPMN-like flow diagrams\n- `default` - Full-featured workflow node with dynamic port support\n\n## Dynamic Port Support\n\nThe `default` and `gateway` node types support dynamic ports:\n\n- **default**: Supports `config.dynamicInputs` and `config.dynamicOutputs`\n  for user-defined input/output handles\n- **gateway**: Supports `config.branches` for conditional branching paths\n\n## UI Extensions\n\nAll node types support `extensions.ui.hideUnconnectedHandles` to control\nvisibility of unconnected ports.\n"
     },
     "NodeUIExtensions": {
       "type": "object",
@@ -656,6 +736,9 @@
           "type": "boolean",
           "description": "Show/hide unconnected handles (ports) to reduce visual noise.\nWhen true, only ports with active connections are displayed.\nUseful for nodes with many optional ports.\n"
         },
+        "atom": {
+          "$ref": "#/$defs/AtomUIConfig"
+        },
         "style": {
           "type": "object",
           "additionalProperties": true,

package/dist/services/playgroundService.d.ts

@@ -7,6 +7,20 @@
  * @module services/playgroundService
  */
 import type { PlaygroundSession, PlaygroundMessage, PlaygroundMessagesApiResponse, PlaygroundSessionStatus } from '../types/playground.js';
+/**
+ * Pagination options for {@link PlaygroundService.getMessages}.
+ * `since`, `before`, and `latest` are mutually exclusive.
+ */
+export interface GetMessagesOptions {
+    /** Forward cursor — only messages with sequenceNumber greater than this value */
+    since?: number;
+    /** Backward cursor — the page of messages immediately older than this sequence number */
+    before?: number;
+    /** Return the most recent `limit` messages (conversation tail) */
+    latest?: boolean;
+    /** Maximum number of messages to return */
+    limit?: number;
+}
 /**
  * Playground Service class
  *
@@ -75,14 +89,19 @@ export declare class PlaygroundService {
      */
     deleteSession(sessionId: string): Promise<void>;
     /**
-     * Get messages from a playground session
+     * Get messages from a playground session.
+     *
+     * Three pagination modes (see the OpenAPI spec for the contract):
+     *  - `since`: forward cursor, returns messages with sequenceNumber > value (polling the live tail)
+     *  - `before`: backward cursor, returns the page immediately older than the value (scroll-up)
+     *  - `latest`: returns the most recent `limit` messages (initial load)
+     * `since`, `before`, and `latest` are mutually exclusive.
      *
      * @param sessionId - The session UUID
-     * @param afterSequence - Optional sequence number cursor — returns only messages with sequenceNumber > this value
-     * @param limit - Maximum number of messages to return
+     * @param options - Pagination options
      * @returns Messages and session status
      */
-    getMessages(sessionId: string, afterSequence?: number, limit?: number): Promise<PlaygroundMessagesApiResponse>;
+    getMessages(sessionId: string, options?: GetMessagesOptions): Promise<PlaygroundMessagesApiResponse>;
     /**
      * Send a message to a playground session
      *

package/dist/services/playgroundService.js

@@ -168,24 +168,35 @@ export class PlaygroundService {
     // Message Handling
     // =========================================================================
     /**
-     * Get messages from a playground session
+     * Get messages from a playground session.
+     *
+     * Three pagination modes (see the OpenAPI spec for the contract):
+     *  - `since`: forward cursor, returns messages with sequenceNumber > value (polling the live tail)
+     *  - `before`: backward cursor, returns the page immediately older than the value (scroll-up)
+     *  - `latest`: returns the most recent `limit` messages (initial load)
+     * `since`, `before`, and `latest` are mutually exclusive.
      *
      * @param sessionId - The session UUID
-     * @param afterSequence - Optional sequence number cursor — returns only messages with sequenceNumber > this value
-     * @param limit - Maximum number of messages to return
+     * @param options - Pagination options
      * @returns Messages and session status
      */
-    async getMessages(sessionId, afterSequence, limit) {
+    async getMessages(sessionId, options = {}) {
         const config = this.getConfig();
         let url = buildEndpointUrl(config, config.endpoints.playground.getMessages, {
             sessionId
         });
         const params = new URLSearchParams();
-        if (afterSequence !== undefined) {
-            params.append('since', afterSequence.toString());
+        if (options.since !== undefined) {
+            params.append('since', options.since.toString());
+        }
+        if (options.before !== undefined) {
+            params.append('before', options.before.toString());
         }
-        if (limit !== undefined) {
-            params.append('limit', limit.toString());
+        if (options.latest) {
+            params.append('latest', 'true');
+        }
+        if (options.limit !== undefined) {
+            params.append('limit', options.limit.toString());
         }
         const queryString = params.toString();
         if (queryString) {
@@ -257,7 +268,9 @@ export class PlaygroundService {
                 return;
             }
             try {
-                const response = await this.getMessages(sessionId, this.lastSequenceNumber ?? undefined);
+                const response = await this.getMessages(sessionId, {
+                    since: this.lastSequenceNumber ?? undefined
+                });
                 // Update last sequence number cursor
                 if (response.data && response.data.length > 0) {
                     const lastMessage = response.data[response.data.length - 1];

package/dist/stores/playgroundStore.svelte.d.ts

@@ -6,7 +6,7 @@
  *
  * @module stores/playgroundStore
  */
-import type { PlaygroundSession, PlaygroundMessage, PlaygroundInputField, PlaygroundSessionStatus, PlaygroundMessagesApiResponse } from '../types/playground.js';
+import type { PlaygroundSession, PlaygroundMessage, PlaygroundInputField, PlaygroundSessionStatus, PlaygroundMessagesApiResponse, PlaygroundExecution } from '../types/playground.js';
 import type { Workflow } from '../types/index.js';
 /**
  * Get the current session
@@ -83,6 +83,11 @@ export declare function getSessionCount(): number;
 export declare function getPinnedExecutionId(): string | null;
 export declare function getLatestExecutionId(): string | null;
 export declare function getActiveExecutionId(): string | null;
+/**
+ * Main pipeline runs for the run-switcher. Excludes sub-flow runs, which can't
+ * render their own graph and so aren't user-selectable.
+ */
+export declare function getSelectableExecutions(): PlaygroundExecution[];
 /**
  * Counter that increments whenever new messages arrive and the pipeline display
  * should re-fetch — i.e. when following latest or pinned to the latest execution.
@@ -194,8 +199,14 @@ export declare const playgroundActions: {
  * Apply a server response to the store. All message and status updates from
  * the server flow through here — polling callback, manual fetches, interrupt
  * resolution. Nothing updates messages or session status except this function.
+ *
+ * Pass `sessionId` (the session the response was fetched for) so a response
+ * that resolves after the user switched sessions is dropped instead of writing
+ * the old session's status/messages onto the new current session. Pass `null`
+ * to deliberately opt out of the guard (non-session-scoped callers only) — the
+ * argument is required so every new caller has to make that choice explicitly.
  */
-export declare function applyServerResponse(response: PlaygroundMessagesApiResponse): void;
+export declare function applyServerResponse(response: PlaygroundMessagesApiResponse, sessionId: string | null): void;
 /**
  * Get the current session ID
  *
@@ -221,6 +232,22 @@ export declare function getMessagesSnapshot(): PlaygroundMessage[];
  * @returns Sequence number of the last message, or null
  */
 export declare function getLatestSequenceNumber(): number | null;
+/**
+ * Get the sequence number of the oldest loaded message, used as the cursor
+ * for backward "load older" pagination.
+ *
+ * @returns Sequence number of the first message, or null
+ */
+export declare function getOldestSequenceNumber(): number | null;
+/**
+ * Whether older messages exist before the oldest one currently loaded.
+ */
+export declare function getHasOlder(): boolean;
+/**
+ * Set whether older messages remain to be loaded, derived from a
+ * backward-pagination response.
+ */
+export declare function setHasOlder(hasOlder: boolean): void;
 /**
  * Subscribe to session status changes using $effect.root.
  * This is designed for use in non-component contexts (e.g., mount.ts).

package/dist/stores/playgroundStore.svelte.js

@@ -23,6 +23,12 @@ let _sessions = $state([]);
  * Messages in the current session
  */
 let _messages = $state([]);
+/**
+ * Whether older messages exist before the oldest one currently loaded.
+ * Drives the scroll-up "load older" affordance. Reset whenever the message
+ * set is replaced (session switch / clear).
+ */
+let _hasOlder = $state(false);
 /**
  * Whether we are currently loading data
  */
@@ -45,8 +51,19 @@ let _pinnedExecutionId = $state(null);
 let _pipelineRefreshTrigger = $state(0);
 /** Whether log messages are visible in the execution console */
 let _showLogs = $state(true);
-/** Latest execution ID derived from current session's executions list */
-const _latestExecutionId = $derived(_currentSession?.executions?.at(-1)?.id ?? null);
+/**
+ * The main pipeline runs — the single source of truth for "what's selectable".
+ * Sub-flow runs are tracked for classification but excluded here: selecting one
+ * can't show its own graph (the panel renders the main pipeline regardless), so
+ * listing them would be dead UI. Feeds both the run-switcher and "latest".
+ */
+const _selectableExecutions = $derived((_currentSession?.executions ?? []).filter((e) => !e.isSubflow));
+/**
+ * Latest execution ID: the most recent main run, so the sidebar keeps the main
+ * pipeline in focus and never auto-follows a sub-flow. Null when no main run is
+ * known yet — better an empty panel for a poll than the wrong graph.
+ */
+const _latestExecutionId = $derived(_selectableExecutions.at(-1)?.id ?? null);
 /** Active execution: pinned if set, otherwise latest */
 const _activeExecutionId = $derived(_pinnedExecutionId ?? _latestExecutionId);
 // Derived from server status — never manually set.
@@ -231,6 +248,13 @@ export function getLatestExecutionId() {
 export function getActiveExecutionId() {
     return _activeExecutionId;
 }
+/**
+ * Main pipeline runs for the run-switcher. Excludes sub-flow runs, which can't
+ * render their own graph and so aren't user-selectable.
+ */
+export function getSelectableExecutions() {
+    return _selectableExecutions;
+}
 /**
  * Counter that increments whenever new messages arrive and the pipeline display
  * should re-fetch — i.e. when following latest or pinned to the latest execution.
@@ -279,33 +303,57 @@ function sortMessagesChronologically(messageList) {
         return a.id.localeCompare(b.id);
     });
 }
+/**
+ * Whether a message was produced by a nested sub-flow (vs the main pipeline).
+ * `parentPipelineId` is the authoritative signal — non-null means a parent run
+ * triggered this one. Legacy runs that predate the field carry no nesting info,
+ * so they're treated as main runs (by design — we don't reclassify history).
+ */
+function isSubflowMessage(msg) {
+    return msg.parentPipelineId != null;
+}
 /**
  * Syncs the current session's executions list from incoming messages.
- * When a message has a new executionId not yet tracked, adds it as a new execution entry.
+ *
+ * Each message's `executionId` identifies the run that produced it, and
+ * `parentPipelineId` says whether that run is the main pipeline or a nested
+ * sub-flow (see {@link isSubflowMessage}). A run's classification is fixed by
+ * its first sighting — every message from a run reports the same parent — so we
+ * only act on executionIds we haven't seen before. Sub-flows are tracked but
+ * hidden from the run-switcher; a new *main* run clears the pin so the panel
+ * auto-follows it, while sub-flow runs never take focus.
+ *
+ * Executions are appended in arrival order; new runs land at the tail, which is
+ * why "latest" reads the last main run.
  */
 function syncExecutionsFromMessages(messages) {
     if (!_currentSession)
         return;
-    const existingIds = new Set((_currentSession.executions ?? []).map((e) => e.id));
-    const newExecutions = [];
+    const executions = [...(_currentSession.executions ?? [])];
+    const seenIds = new Set(executions.map((e) => e.id));
+    let added = false;
+    let gainedMainRun = false;
     for (const msg of messages) {
-        if (msg.executionId && !existingIds.has(msg.executionId)) {
-            existingIds.add(msg.executionId);
-            newExecutions.push({
-                id: msg.executionId,
-                startedAt: msg.timestamp,
-                status: 'running'
-            });
-        }
+        if (!msg.executionId || seenIds.has(msg.executionId))
+            continue;
+        seenIds.add(msg.executionId);
+        const isSubflow = isSubflowMessage(msg);
+        executions.push({
+            id: msg.executionId,
+            startedAt: msg.timestamp,
+            status: 'running',
+            isSubflow
+        });
+        added = true;
+        if (!isSubflow)
+            gainedMainRun = true;
     }
-    if (newExecutions.length > 0) {
-        _currentSession = {
-            ..._currentSession,
-            executions: [...(_currentSession.executions ?? []), ...newExecutions]
-        };
-        // Clear any manual pin so the panel automatically follows the new run.
+    if (!added)
+        return;
+    _currentSession = { ..._currentSession, executions };
+    // Auto-follow the new main run by dropping any manual pin.
+    if (gainedMainRun)
         _pinnedExecutionId = null;
-    }
 }
 // =========================================================================
 // Actions
@@ -348,22 +396,23 @@ export const playgroundActions = {
                 updatedAt: new Date().toISOString()
             };
         }
-        // Update the latest execution status when the session reaches a terminal state.
-        // Only the last execution can be running at any time (sessions are single-pipeline),
-        // so we only need to check and update the tail entry.
+        // When the session reaches a terminal state, the whole run is finished —
+        // including any sub-flow executions, which may sit anywhere in the list
+        // (not just the tail), so mark every still-running execution terminal.
         // 'idle' means the run finished normally (server returns 'idle' post-completion,
-        // not 'completed'), so map it to 'completed' for the execution entry.
+        // not 'completed'), so map it to 'completed' for the execution entries.
         const terminalExecutionStatus = status === 'failed'
             ? 'failed'
             : status === 'completed' || status === 'idle'
                 ? 'completed'
                 : null;
         if (terminalExecutionStatus && _currentSession?.executions?.length) {
-            const execs = [..._currentSession.executions];
-            const last = execs[execs.length - 1];
-            if (last.status === 'running') {
-                execs[execs.length - 1] = { ...last, status: terminalExecutionStatus };
-                _currentSession = { ..._currentSession, executions: execs };
+            const hasRunning = _currentSession.executions.some((e) => e.status === 'running');
+            if (hasRunning) {
+                _currentSession = {
+                    ..._currentSession,
+                    executions: _currentSession.executions.map((e) => e.status === 'running' ? { ...e, status: terminalExecutionStatus } : e)
+                };
             }
         }
         // Also update in sessions list
@@ -417,7 +466,7 @@ export const playgroundActions = {
      * @param message - The message to add
      */
     addMessage: (message) => {
-        if (_messages.some(m => m.id === message.id))
+        if (_messages.some((m) => m.id === message.id))
             return;
         const seq = message.sequenceNumber ?? 0;
         let lo = 0, hi = _messages.length;
@@ -460,6 +509,7 @@ export const playgroundActions = {
     clearMessages: () => {
         _messages = [];
         _lastPollSequenceNumber = null;
+        _hasOlder = false;
     },
     /**
      * Set the loading state
@@ -529,12 +579,20 @@ export const playgroundActions = {
  * Apply a server response to the store. All message and status updates from
  * the server flow through here — polling callback, manual fetches, interrupt
  * resolution. Nothing updates messages or session status except this function.
- */
-export function applyServerResponse(response) {
+ *
+ * Pass `sessionId` (the session the response was fetched for) so a response
+ * that resolves after the user switched sessions is dropped instead of writing
+ * the old session's status/messages onto the new current session. Pass `null`
+ * to deliberately opt out of the guard (non-session-scoped callers only) — the
+ * argument is required so every new caller has to make that choice explicitly.
+ */
+export function applyServerResponse(response, sessionId) {
+    if (sessionId !== null && _currentSession?.id !== sessionId)
+        return;
     if (response.data && response.data.length > 0) {
         playgroundActions.addMessages(response.data);
-        // Refresh pipeline when following latest or pinned to the latest execution.
-        // Skip only when the user is viewing a historical run.
+        // Refresh the pipeline panel when following latest or pinned to the latest
+        // run. Skip when pinned to an older run — a historical view that won't change.
         if (_pinnedExecutionId === null || _pinnedExecutionId === _latestExecutionId) {
             _pipelineRefreshTrigger++;
         }
@@ -584,6 +642,33 @@ export function getLatestSequenceNumber() {
     }
     return null;
 }
+/**
+ * Get the sequence number of the oldest loaded message, used as the cursor
+ * for backward "load older" pagination.
+ *
+ * @returns Sequence number of the first message, or null
+ */
+export function getOldestSequenceNumber() {
+    for (let i = 0; i < _messages.length; i++) {
+        if (_messages[i].sequenceNumber !== undefined) {
+            return _messages[i].sequenceNumber;
+        }
+    }
+    return null;
+}
+/**
+ * Whether older messages exist before the oldest one currently loaded.
+ */
+export function getHasOlder() {
+    return _hasOlder;
+}
+/**
+ * Set whether older messages remain to be loaded, derived from a
+ * backward-pagination response.
+ */
+export function setHasOlder(hasOlder) {
+    _hasOlder = hasOlder;
+}
 /**
  * Subscribe to session status changes using $effect.root.
  * This is designed for use in non-component contexts (e.g., mount.ts).
@@ -619,7 +704,7 @@ export async function refreshSessionMessages(fetchMessages) {
         return;
     try {
         const response = await fetchMessages(session.id);
-        applyServerResponse(response);
+        applyServerResponse(response, session.id);
     }
     catch (err) {
         logger.error('[playgroundStore] Failed to refresh messages:', err);