@flowdrop/flowdrop 1.15.0 → 2.0.0-beta.1

package/dist/stores/playgroundStore.svelte.js

@@ -4,273 +4,16 @@
  * Svelte 5 rune-based state for managing playground state including sessions,
  * messages, and execution status.
  *
+ * The reactive state lives in the {@link PlaygroundStore} class — one per
+ * FlowDrop instance, created by `createFlowDropInstance()` and resolved in
+ * components via `getInstance().playground`.
+ *
  * @module stores/playgroundStore
  */
 import { isChatInputNode } from '../types/playground.js';
 import { logger } from '../utils/logger.js';
 // =========================================================================
-// Core State
-// =========================================================================
-/**
- * Currently active playground session
- */
-let _currentSession = $state(null);
-/**
- * List of all sessions for the current workflow
- */
-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
- */
-let _isLoading = $state(false);
-/**
- * Current error message, if any
- */
-let _error = $state(null);
-/**
- * Current workflow being tested
- */
-let _currentWorkflow = $state(null);
-/**
- * Last polling timestamp for incremental message fetching
- */
-let _lastPollSequenceNumber = $state(null);
-/** Execution ID explicitly pinned by the user (null = follow latest) */
-let _pinnedExecutionId = $state(null);
-/** Incremented on every message batch that should trigger a pipeline re-fetch */
-let _pipelineRefreshTrigger = $state(0);
-/** Whether log messages are visible in the execution console */
-let _showLogs = $state(true);
-/**
- * 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.
-// Exception: updateSessionStatus('running') in handleSendMessage is an
-// acknowledged optimistic write, overwritten by the next server response.
-const _isExecuting = $derived(_currentSession?.status === 'running');
-// =========================================================================
-// Getter Functions (for reactive access in components)
-// =========================================================================
-/**
- * Get the current session
- */
-export function getCurrentSession() {
-    return _currentSession;
-}
-/**
- * Get all sessions
- */
-export function getSessions() {
-    return _sessions;
-}
-/**
- * Get all messages
- */
-export function getMessages() {
-    return _messages;
-}
-/**
- * Get executing state
- */
-export function getIsExecuting() {
-    return _isExecuting;
-}
-/**
- * Get loading state
- */
-export function getIsLoading() {
-    return _isLoading;
-}
-/**
- * Get error state
- */
-export function getError() {
-    return _error;
-}
-/**
- * Get the current workflow
- */
-export function getCurrentWorkflow() {
-    return _currentWorkflow;
-}
-/**
- * Get the last poll sequence number cursor
- */
-export function getLastPollSequenceNumber() {
-    return _lastPollSequenceNumber;
-}
-// =========================================================================
-// Derived Getters
-// =========================================================================
-/**
- * Get current session status
- */
-export function getSessionStatus() {
-    return _currentSession?.status ?? 'idle';
-}
-/**
- * Whether the user can currently send a message.
- * False when executing, when awaiting input, or when no session exists.
- */
-export function getCanSendMessage() {
-    const status = _currentSession?.status ?? 'idle';
-    return _currentSession !== null && !_isExecuting && status !== 'awaiting_input';
-}
-/**
- * Get message count
- */
-export function getMessageCount() {
-    return _messages.length;
-}
-/**
- * Get chat messages (excludes log messages)
- */
-export function getChatMessages() {
-    return _messages.filter((m) => m.role !== 'log');
-}
-/**
- * Get log messages only
- */
-export function getLogMessages() {
-    return _messages.filter((m) => m.role === 'log');
-}
-/**
- * Get the latest message
- */
-export function getLatestMessage() {
-    return _messages.length > 0 ? _messages[_messages.length - 1] : null;
-}
-/**
- * Get input fields from workflow input nodes
- *
- * Analyzes the workflow to extract input nodes and their configuration
- * schemas for auto-generating input forms.
- */
-export function getInputFields() {
-    const workflow = _currentWorkflow;
-    if (!workflow) {
-        return [];
-    }
-    const fields = [];
-    // Find input nodes in the workflow
-    workflow.nodes.forEach((node) => {
-        const category = node.data.metadata?.category;
-        const nodeTypeId = node.data.metadata?.id ?? node.type;
-        // Check if this is an input-type node
-        // The category can be "inputs" (standard) or variations like "input"
-        const categoryStr = String(category || '');
-        const isInputCategory = categoryStr === 'inputs' || categoryStr === 'input';
-        if (isInputCategory || isChatInputNode(nodeTypeId)) {
-            // Get output ports that provide data
-            const outputs = node.data.metadata?.outputs ?? [];
-            outputs.forEach((output) => {
-                if (output.type === 'output') {
-                    // Create a field for each output
-                    const field = {
-                        nodeId: node.id,
-                        fieldId: output.id,
-                        label: node.data.label || output.name || nodeTypeId,
-                        type: output.dataType || 'string',
-                        defaultValue: node.data.config?.[output.id],
-                        required: output.required ?? false
-                    };
-                    // Check for schema in configSchema
-                    const configSchema = node.data.metadata?.configSchema;
-                    if (configSchema?.properties?.[output.id]) {
-                        field.schema = configSchema.properties[output.id];
-                    }
-                    fields.push(field);
-                }
-            });
-            // If no outputs defined, create a default field based on node config
-            if (outputs.length === 0) {
-                const configSchema = node.data.metadata?.configSchema;
-                if (configSchema?.properties) {
-                    Object.entries(configSchema.properties).forEach(([key, schema]) => {
-                        const field = {
-                            nodeId: node.id,
-                            fieldId: key,
-                            label: schema.title || key,
-                            type: schema.type || 'string',
-                            defaultValue: node.data.config?.[key] ?? schema.default,
-                            required: configSchema.required?.includes(key) ?? false,
-                            schema
-                        };
-                        fields.push(field);
-                    });
-                }
-            }
-        }
-    });
-    return fields;
-}
-/**
- * Check if workflow has a chat input
- */
-export function getHasChatInput() {
-    const fields = getInputFields();
-    return fields.some((field) => isChatInputNode(field.nodeId) || field.type === 'string');
-}
-/**
- * Get session count
- */
-export function getSessionCount() {
-    return _sessions.length;
-}
-export function getPinnedExecutionId() {
-    return _pinnedExecutionId;
-}
-export function getLatestExecutionId() {
-    return _latestExecutionId;
-}
-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.
- * Pass to PipelinePanel's refreshTrigger prop.
- */
-export function getPipelineRefreshTrigger() {
-    return _pipelineRefreshTrigger;
-}
-/**
- * Whether log messages should be shown in the execution console
- */
-export function getShowLogs() {
-    return _showLogs;
-}
-// =========================================================================
-// Helper Functions
+// Helper Functions (pure, instance-independent)
 // =========================================================================
 /**
  * Sort messages chronologically by sequenceNumber
@@ -312,86 +55,352 @@ function sortMessagesChronologically(messageList) {
 function isSubflowMessage(msg) {
     return msg.parentPipelineId != null;
 }
-/**
- * Syncs the current session's executions list from incoming messages.
- *
- * 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 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 || 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 (!added)
-        return;
-    _currentSession = { ..._currentSession, executions };
-    // Auto-follow the new main run by dropping any manual pin.
-    if (gainedMainRun)
-        _pinnedExecutionId = null;
-}
 // =========================================================================
-// Actions
+// PlaygroundStore (per-instance reactive state)
 // =========================================================================
 /**
- * Playground store actions for modifying state
+ * Per-instance playground state: sessions, messages, executions, and the
+ * polling/refresh machinery around them.
  */
-export const playgroundActions = {
+export class PlaygroundStore {
+    /** Currently active playground session */
+    #currentSession = $state(null);
+    /** List of all sessions for the current workflow */
+    #sessions = $state([]);
+    /** Messages in the current session */
+    #messages = $state([]);
     /**
-     * Set the current workflow
-     *
-     * @param workflow - The workflow to test
+     * 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).
+     */
+    #hasOlder = $state(false);
+    /** Whether we are currently loading data */
+    #isLoading = $state(false);
+    /** Current error message, if any */
+    #error = $state(null);
+    /** Current workflow being tested */
+    #currentWorkflow = $state(null);
+    /** Last polling cursor for incremental message fetching */
+    #lastPollSequenceNumber = $state(null);
+    /** Execution ID explicitly pinned by the user (null = follow latest) */
+    #pinnedExecutionId = $state(null);
+    /** Incremented on every message batch that should trigger a pipeline re-fetch */
+    #pipelineRefreshTrigger = $state(0);
+    /** Whether log messages are visible in the execution console */
+    #showLogs = $state(true);
+    /**
+     * 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".
+     */
+    #selectableExecutions = $derived((this.#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.
+     */
+    #latestExecutionId = $derived(this.#selectableExecutions.at(-1)?.id ?? null);
+    /** Active execution: pinned if set, otherwise latest */
+    #activeExecutionId = $derived(this.#pinnedExecutionId ?? this.#latestExecutionId);
+    // Derived from server status — never manually set.
+    // Exception: updateSessionStatus('running') in handleSendMessage is an
+    // acknowledged optimistic write, overwritten by the next server response.
+    #isExecuting = $derived(this.#currentSession?.status === 'running');
+    /** Cleanups for active subscribeToSessionStatus effect roots. */
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- non-reactive bookkeeping registry; nothing renders from it
+    #statusSubscriptions = new Set();
+    /** Bound mutation facade — see {@link PlaygroundStoreActions}. */
+    actions;
+    constructor() {
+        this.actions = Object.freeze({
+            setWorkflow: this.setWorkflow.bind(this),
+            setCurrentSession: this.setCurrentSession.bind(this),
+            updateSessionStatus: this.updateSessionStatus.bind(this),
+            setSessions: this.setSessions.bind(this),
+            addSession: this.addSession.bind(this),
+            removeSession: this.removeSession.bind(this),
+            setMessages: this.setMessages.bind(this),
+            addMessage: this.addMessage.bind(this),
+            addMessages: this.addMessages.bind(this),
+            clearMessages: this.clearMessages.bind(this),
+            setLoading: this.setLoading.bind(this),
+            setError: this.setError.bind(this),
+            updateLastPollSequenceNumber: this.updateLastPollSequenceNumber.bind(this),
+            reset: this.reset.bind(this),
+            switchSession: this.switchSession.bind(this),
+            pinExecution: this.pinExecution.bind(this),
+            setShowLogs: this.setShowLogs.bind(this),
+            toggleShowLogs: this.toggleShowLogs.bind(this)
+        });
+    }
+    // -----------------------------------------------------------------------
+    // Reactive getters
+    // -----------------------------------------------------------------------
+    /** The current session. */
+    get currentSession() {
+        return this.#currentSession;
+    }
+    /** All sessions. */
+    get sessions() {
+        return this.#sessions;
+    }
+    /** All messages (chronological). */
+    get messages() {
+        return this.#messages;
+    }
+    /** Executing state (derived from server status). */
+    get isExecuting() {
+        return this.#isExecuting;
+    }
+    /** Loading state. */
+    get isLoading() {
+        return this.#isLoading;
+    }
+    /** Error state. */
+    get error() {
+        return this.#error;
+    }
+    /** The current workflow. */
+    get currentWorkflow() {
+        return this.#currentWorkflow;
+    }
+    /** The last poll sequence number cursor. */
+    get lastPollSequenceNumber() {
+        return this.#lastPollSequenceNumber;
+    }
+    /** Current session status. */
+    get sessionStatus() {
+        return this.#currentSession?.status ?? 'idle';
+    }
+    /**
+     * Whether the user can currently send a message.
+     * False when executing, when awaiting input, or when no session exists.
      */
-    setWorkflow: (workflow) => {
-        _currentWorkflow = workflow;
-    },
+    get canSendMessage() {
+        const status = this.#currentSession?.status ?? 'idle';
+        return this.#currentSession !== null && !this.#isExecuting && status !== 'awaiting_input';
+    }
+    /** Message count. */
+    get messageCount() {
+        return this.#messages.length;
+    }
+    /** Chat messages (excludes log messages). */
+    get chatMessages() {
+        return this.#messages.filter((m) => m.role !== 'log');
+    }
+    /** Log messages only. */
+    get logMessages() {
+        return this.#messages.filter((m) => m.role === 'log');
+    }
+    /** The latest message, or null. */
+    get latestMessage() {
+        return this.#messages.length > 0 ? this.#messages[this.#messages.length - 1] : null;
+    }
     /**
-     * Set the current session
+     * Input fields from workflow input nodes.
      *
-     * @param session - The session to set as active
+     * Analyzes the workflow to extract input nodes and their configuration
+     * schemas for auto-generating input forms.
      */
-    setCurrentSession: (session) => {
-        _pinnedExecutionId = null;
-        _currentSession = session;
-        if (session) {
-            // Update session in the list
-            _sessions = _sessions.map((s) => (s.id === session.id ? session : s));
+    get inputFields() {
+        const workflow = this.#currentWorkflow;
+        if (!workflow) {
+            return [];
+        }
+        const fields = [];
+        // Find input nodes in the workflow
+        workflow.nodes.forEach((node) => {
+            const category = node.data.metadata?.category;
+            const nodeTypeId = node.data.metadata?.id ?? node.type;
+            // Check if this is an input-type node
+            // The category can be "inputs" (standard) or variations like "input"
+            const categoryStr = String(category || '');
+            const isInputCategory = categoryStr === 'inputs' || categoryStr === 'input';
+            if (isInputCategory || isChatInputNode(nodeTypeId)) {
+                // Get output ports that provide data
+                const outputs = node.data.metadata?.outputs ?? [];
+                outputs.forEach((output) => {
+                    if (output.type === 'output') {
+                        // Create a field for each output
+                        const field = {
+                            nodeId: node.id,
+                            fieldId: output.id,
+                            label: node.data.label || output.name || nodeTypeId,
+                            type: output.dataType || 'string',
+                            defaultValue: node.data.config?.[output.id],
+                            required: output.required ?? false
+                        };
+                        // Check for schema in configSchema
+                        const configSchema = node.data.metadata?.configSchema;
+                        if (configSchema?.properties?.[output.id]) {
+                            field.schema = configSchema.properties[output.id];
+                        }
+                        fields.push(field);
+                    }
+                });
+                // If no outputs defined, create a default field based on node config
+                if (outputs.length === 0) {
+                    const configSchema = node.data.metadata?.configSchema;
+                    if (configSchema?.properties) {
+                        Object.entries(configSchema.properties).forEach(([key, schema]) => {
+                            const field = {
+                                nodeId: node.id,
+                                fieldId: key,
+                                label: schema.title || key,
+                                type: schema.type || 'string',
+                                defaultValue: node.data.config?.[key] ?? schema.default,
+                                required: configSchema.required?.includes(key) ?? false,
+                                schema
+                            };
+                            fields.push(field);
+                        });
+                    }
+                }
+            }
+        });
+        return fields;
+    }
+    /** Whether the workflow has a chat input. */
+    get hasChatInput() {
+        const fields = this.inputFields;
+        return fields.some((field) => isChatInputNode(field.nodeId) || field.type === 'string');
+    }
+    /** Session count. */
+    get sessionCount() {
+        return this.#sessions.length;
+    }
+    /** Execution ID explicitly pinned by the user (null = follow latest). */
+    get pinnedExecutionId() {
+        return this.#pinnedExecutionId;
+    }
+    /** Latest main-run execution ID. */
+    get latestExecutionId() {
+        return this.#latestExecutionId;
+    }
+    /** Active execution: pinned if set, otherwise latest. */
+    get activeExecutionId() {
+        return this.#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.
+     */
+    get selectableExecutions() {
+        return this.#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.
+     * Pass to PipelinePanel's refreshTrigger prop.
+     */
+    get pipelineRefreshTrigger() {
+        return this.#pipelineRefreshTrigger;
+    }
+    /** Whether log messages should be shown in the execution console. */
+    get showLogs() {
+        return this.#showLogs;
+    }
+    /** The current session ID, or null. */
+    get currentSessionId() {
+        return this.#currentSession?.id ?? null;
+    }
+    /** Whether older messages exist before the oldest one currently loaded. */
+    get hasOlder() {
+        return this.#hasOlder;
+    }
+    /**
+     * The sequence number of the latest message, used to seed incremental polling.
+     */
+    get latestSequenceNumber() {
+        for (let i = this.#messages.length - 1; i >= 0; i--) {
+            if (this.#messages[i].sequenceNumber !== undefined) {
+                return this.#messages[i].sequenceNumber;
+            }
         }
-    },
+        return null;
+    }
     /**
-     * Update session status
+     * The sequence number of the oldest loaded message, used as the cursor
+     * for backward "load older" pagination.
+     */
+    get oldestSequenceNumber() {
+        for (let i = 0; i < this.#messages.length; i++) {
+            if (this.#messages[i].sequenceNumber !== undefined) {
+                return this.#messages[i].sequenceNumber;
+            }
+        }
+        return null;
+    }
+    // -----------------------------------------------------------------------
+    // Internal helpers
+    // -----------------------------------------------------------------------
+    /**
+     * Syncs the current session's executions list from incoming messages.
      *
-     * @param status - The new status
+     * 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.
      */
-    updateSessionStatus: (status) => {
-        if (_currentSession) {
-            _currentSession = {
-                ..._currentSession,
+    #syncExecutionsFromMessages(messages) {
+        if (!this.#currentSession)
+            return;
+        const executions = [...(this.#currentSession.executions ?? [])];
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity -- transient local for dedup within this call
+        const seenIds = new Set(executions.map((e) => e.id));
+        let added = false;
+        let gainedMainRun = false;
+        for (const msg of messages) {
+            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 (!added)
+            return;
+        this.#currentSession = { ...this.#currentSession, executions };
+        // Auto-follow the new main run by dropping any manual pin.
+        if (gainedMainRun)
+            this.#pinnedExecutionId = null;
+    }
+    // -----------------------------------------------------------------------
+    // Mutation actions
+    // -----------------------------------------------------------------------
+    /** Set the current workflow. */
+    setWorkflow(workflow) {
+        this.#currentWorkflow = workflow;
+    }
+    /** Set the current session. */
+    setCurrentSession(session) {
+        this.#pinnedExecutionId = null;
+        this.#currentSession = session;
+        if (session) {
+            // Update session in the list
+            this.#sessions = this.#sessions.map((s) => (s.id === session.id ? session : s));
+        }
+    }
+    /** Update session status. */
+    updateSessionStatus(status) {
+        if (this.#currentSession) {
+            this.#currentSession = {
+                ...this.#currentSession,
                 status,
                 updatedAt: new Date().toISOString()
             };
@@ -406,93 +415,75 @@ export const playgroundActions = {
             : status === 'completed' || status === 'idle'
                 ? 'completed'
                 : null;
-        if (terminalExecutionStatus && _currentSession?.executions?.length) {
-            const hasRunning = _currentSession.executions.some((e) => e.status === 'running');
+        if (terminalExecutionStatus && this.#currentSession?.executions?.length) {
+            const hasRunning = this.#currentSession.executions.some((e) => e.status === 'running');
             if (hasRunning) {
-                _currentSession = {
-                    ..._currentSession,
-                    executions: _currentSession.executions.map((e) => e.status === 'running' ? { ...e, status: terminalExecutionStatus } : e)
+                this.#currentSession = {
+                    ...this.#currentSession,
+                    executions: this.#currentSession.executions.map((e) => e.status === 'running' ? { ...e, status: terminalExecutionStatus } : e)
                 };
             }
         }
         // Also update in sessions list
-        const session = _currentSession;
+        const session = this.#currentSession;
         if (session) {
-            _sessions = _sessions.map((s) => (s.id === session.id ? { ...s, status } : s));
+            this.#sessions = this.#sessions.map((s) => (s.id === session.id ? { ...s, status } : s));
         }
-    },
-    /**
-     * Set the sessions list
-     *
-     * @param sessionList - Array of sessions
-     */
-    setSessions: (sessionList) => {
-        _sessions = sessionList;
-    },
-    /**
-     * Add a new session to the list
-     *
-     * @param session - The session to add
-     */
-    addSession: (session) => {
-        _sessions = [session, ..._sessions];
-    },
-    /**
-     * Remove a session from the list
-     *
-     * @param sessionId - The session ID to remove
-     */
-    removeSession: (sessionId) => {
-        _sessions = _sessions.filter((s) => s.id !== sessionId);
+    }
+    /** Set the sessions list. */
+    setSessions(sessionList) {
+        this.#sessions = sessionList;
+    }
+    /** Add a new session to the list. */
+    addSession(session) {
+        this.#sessions = [session, ...this.#sessions];
+    }
+    /** Remove a session from the list. */
+    removeSession(sessionId) {
+        this.#sessions = this.#sessions.filter((s) => s.id !== sessionId);
         // Clear current session if it was removed
-        if (_currentSession?.id === sessionId) {
-            _currentSession = null;
-            _messages = [];
+        if (this.#currentSession?.id === sessionId) {
+            this.#currentSession = null;
+            this.#messages = [];
         }
-    },
+    }
     /**
-     * Set messages for the current session
-     * Messages are automatically sorted chronologically
-     *
-     * @param messageList - Array of messages
+     * Set messages for the current session.
+     * Messages are automatically sorted chronologically.
      */
-    setMessages: (messageList) => {
-        _messages = sortMessagesChronologically(messageList);
-    },
+    setMessages(messageList) {
+        this.#messages = sortMessagesChronologically(messageList);
+    }
     /**
-     * Add a message to the current session
+     * Add a message to the current session.
      * Uses binary search insertion for O(log n) instead of full sort.
-     *
-     * @param message - The message to add
      */
-    addMessage: (message) => {
-        if (_messages.some((m) => m.id === message.id))
+    addMessage(message) {
+        if (this.#messages.some((m) => m.id === message.id))
             return;
         const seq = message.sequenceNumber ?? 0;
-        let lo = 0, hi = _messages.length;
+        let lo = 0, hi = this.#messages.length;
         while (lo < hi) {
             const mid = (lo + hi) >>> 1;
-            if ((_messages[mid].sequenceNumber ?? 0) <= seq)
+            if ((this.#messages[mid].sequenceNumber ?? 0) <= seq)
                 lo = mid + 1;
             else
                 hi = mid;
         }
-        _messages = [..._messages.slice(0, lo), message, ..._messages.slice(lo)];
-    },
+        this.#messages = [...this.#messages.slice(0, lo), message, ...this.#messages.slice(lo)];
+    }
     /**
-     * Add multiple messages to the current session
-     * Messages are deduplicated and automatically sorted chronologically
-     *
-     * @param newMessages - Array of messages to add
+     * Add multiple messages to the current session.
+     * Messages are deduplicated and automatically sorted chronologically.
      */
-    addMessages: (newMessages) => {
+    addMessages(newMessages) {
         if (newMessages.length === 0)
             return;
         // Deduplicate against existing messages AND within the incoming batch itself.
         // The latter matters when the backend returns the same page twice (e.g. broken
-        // offset pagination), which would otherwise create duplicate IDs in _messages
+        // offset pagination), which would otherwise create duplicate IDs in #messages
         // and trigger Svelte's each_key_duplicate error.
-        const existingIds = new Set(_messages.map((m) => m.id));
+        const existingIds = new Set(this.#messages.map((m) => m.id));
         const seenInBatch = new Set();
         const uniqueNewMessages = newMessages.filter((m) => {
             if (existingIds.has(m.id) || seenInBatch.has(m.id))
@@ -500,213 +491,157 @@ export const playgroundActions = {
             seenInBatch.add(m.id);
             return true;
         });
-        _messages = sortMessagesChronologically([..._messages, ...uniqueNewMessages]);
-        syncExecutionsFromMessages(uniqueNewMessages);
-    },
-    /**
-     * Clear all messages
-     */
-    clearMessages: () => {
-        _messages = [];
-        _lastPollSequenceNumber = null;
-        _hasOlder = false;
-    },
+        this.#messages = sortMessagesChronologically([...this.#messages, ...uniqueNewMessages]);
+        this.#syncExecutionsFromMessages(uniqueNewMessages);
+    }
+    /** Clear all messages. */
+    clearMessages() {
+        this.#messages = [];
+        this.#lastPollSequenceNumber = null;
+        this.#hasOlder = false;
+    }
+    /** Set the loading state. */
+    setLoading(loading) {
+        this.#isLoading = loading;
+    }
+    /** Set an error message (or null to clear). */
+    setError(errorMessage) {
+        this.#error = errorMessage;
+    }
+    /** Update the last poll cursor. */
+    updateLastPollSequenceNumber(seq) {
+        this.#lastPollSequenceNumber = seq;
+    }
+    /** Reset all playground state. */
+    reset() {
+        this.#currentSession = null;
+        this.#sessions = [];
+        this.#messages = [];
+        this.#isLoading = false;
+        this.#error = null;
+        this.#currentWorkflow = null;
+        this.#lastPollSequenceNumber = null;
+        this.#pipelineRefreshTrigger = 0;
+    }
+    /** Switch to a different session. */
+    switchSession(sessionId) {
+        this.#pinnedExecutionId = null;
+        const session = this.#sessions.find((s) => s.id === sessionId);
+        if (session) {
+            this.#currentSession = session;
+            this.#messages = [];
+            this.#lastPollSequenceNumber = null;
+        }
+    }
+    /** Pin an execution (null = follow latest). */
+    pinExecution(executionId) {
+        this.#pinnedExecutionId = executionId;
+    }
+    /** Set log message visibility. */
+    setShowLogs(value) {
+        this.#showLogs = value;
+    }
+    /** Toggle log message visibility. */
+    toggleShowLogs() {
+        this.#showLogs = !this.#showLogs;
+    }
+    // -----------------------------------------------------------------------
+    // Server response application & utilities
+    // -----------------------------------------------------------------------
     /**
-     * Set the loading state
+     * 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.
      *
-     * @param loading - Whether loading is in progress
+     * 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.
      */
-    setLoading: (loading) => {
-        _isLoading = loading;
-    },
+    applyServerResponse(response, sessionId) {
+        if (sessionId !== null && this.#currentSession?.id !== sessionId)
+            return;
+        if (response.data && response.data.length > 0) {
+            this.addMessages(response.data);
+            // 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 (this.#pinnedExecutionId === null || this.#pinnedExecutionId === this.#latestExecutionId) {
+                this.#pipelineRefreshTrigger++;
+            }
+        }
+        if (response.sessionStatus) {
+            this.updateSessionStatus(response.sessionStatus);
+        }
+    }
+    /** Check if a specific session is selected. */
+    isSessionSelected(sessionId) {
+        return this.#currentSession?.id === sessionId;
+    }
     /**
-     * Set an error message
-     *
-     * @param errorMessage - The error message or null to clear
+     * Set whether older messages remain to be loaded, derived from a
+     * backward-pagination response.
      */
-    setError: (errorMessage) => {
-        _error = errorMessage;
-    },
+    setHasOlder(hasOlder) {
+        this.#hasOlder = hasOlder;
+    }
     /**
-     * Update the last poll timestamp
+     * Subscribe to session status changes using $effect.root.
+     * This is designed for use in non-component contexts (e.g., mount.ts).
      *
-     * @param timestamp - ISO 8601 timestamp
+     * The effect root is tracked by the store and also disposed by
+     * {@link dispose} (via the owning instance's `destroy()`), so a forgotten
+     * unsubscribe can't outlive the instance.
+     *
+     * @param callback - Called when session status changes
+     * @returns Cleanup function to stop the subscription
      */
-    updateLastPollSequenceNumber: (seq) => {
-        _lastPollSequenceNumber = seq;
-    },
+    subscribeToSessionStatus(callback) {
+        let previousStatus = this.sessionStatus;
+        const cleanup = $effect.root(() => {
+            $effect(() => {
+                const status = this.sessionStatus;
+                if (status !== previousStatus) {
+                    callback(status, previousStatus);
+                    previousStatus = status;
+                }
+            });
+        });
+        const tracked = () => {
+            this.#statusSubscriptions.delete(tracked);
+            cleanup();
+        };
+        this.#statusSubscriptions.add(tracked);
+        return tracked;
+    }
     /**
-     * Reset all playground state
+     * Dispose all active session-status effect roots.
+     * Called by the owning instance's destroy(); safe to call repeatedly.
      */
-    reset: () => {
-        _currentSession = null;
-        _sessions = [];
-        _messages = [];
-        _isLoading = false;
-        _error = null;
-        _currentWorkflow = null;
-        _lastPollSequenceNumber = null;
-        _pipelineRefreshTrigger = 0;
-    },
+    dispose() {
+        for (const cleanup of [...this.#statusSubscriptions]) {
+            cleanup();
+        }
+    }
     /**
-     * Switch to a different session
+     * Refresh messages for the current session.
      *
-     * @param sessionId - The session ID to switch to
+     * This function is useful after interrupt resolution when polling
+     * has stopped but new messages may exist on the server.
+     *
+     * @param fetchMessages - Async function to fetch messages from the API
+     * @returns Promise that resolves when messages are refreshed
      */
-    switchSession: (sessionId) => {
-        _pinnedExecutionId = null;
-        const session = _sessions.find((s) => s.id === sessionId);
-        if (session) {
-            _currentSession = session;
-            _messages = [];
-            _lastPollSequenceNumber = null;
-        }
-    },
-    pinExecution(executionId) {
-        _pinnedExecutionId = executionId;
-    },
-    setShowLogs(value) {
-        _showLogs = value;
-    },
-    toggleShowLogs() {
-        _showLogs = !_showLogs;
-    }
-};
-// =========================================================================
-// Server Response Application
-// =========================================================================
-/**
- * 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 function applyServerResponse(response, sessionId) {
-    if (sessionId !== null && _currentSession?.id !== sessionId)
-        return;
-    if (response.data && response.data.length > 0) {
-        playgroundActions.addMessages(response.data);
-        // 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++;
-        }
-    }
-    if (response.sessionStatus) {
-        playgroundActions.updateSessionStatus(response.sessionStatus);
-    }
-}
-// =========================================================================
-// Utilities
-// =========================================================================
-/**
- * Get the current session ID
- *
- * @returns The current session ID or null
- */
-export function getCurrentSessionId() {
-    return _currentSession?.id ?? null;
-}
-/**
- * Check if a specific session is selected
- *
- * @param sessionId - The session ID to check
- * @returns True if the session is currently selected
- */
-export function isSessionSelected(sessionId) {
-    return _currentSession?.id === sessionId;
-}
-/**
- * Get all messages as a snapshot
- *
- * @returns Array of all messages
- */
-export function getMessagesSnapshot() {
-    return _messages;
-}
-/**
- * Get the sequence number of the latest message, used to seed incremental polling.
- *
- * @returns Sequence number of the last message, or null
- */
-export function getLatestSequenceNumber() {
-    for (let i = _messages.length - 1; i >= 0; i--) {
-        if (_messages[i].sequenceNumber !== undefined) {
-            return _messages[i].sequenceNumber;
+    async refreshSessionMessages(fetchMessages) {
+        const session = this.#currentSession;
+        if (!session)
+            return;
+        try {
+            const response = await fetchMessages(session.id);
+            this.applyServerResponse(response, session.id);
         }
-    }
-    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;
+        catch (err) {
+            logger.error('[playgroundStore] Failed to refresh messages:', err);
         }
     }
-    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).
- *
- * @param callback - Called when session status changes
- * @returns Cleanup function to stop the subscription
- */
-export function subscribeToSessionStatus(callback) {
-    let previousStatus = getSessionStatus();
-    const cleanup = $effect.root(() => {
-        $effect(() => {
-            const status = getSessionStatus();
-            if (status !== previousStatus) {
-                callback(status, previousStatus);
-                previousStatus = status;
-            }
-        });
-    });
-    return cleanup;
-}
-/**
- * Refresh messages for the current session
- *
- * This function is useful after interrupt resolution when polling
- * has stopped but new messages may exist on the server.
- *
- * @param fetchMessages - Async function to fetch messages from the API
- * @returns Promise that resolves when messages are refreshed
- */
-export async function refreshSessionMessages(fetchMessages) {
-    const session = _currentSession;
-    if (!session)
-        return;
-    try {
-        const response = await fetchMessages(session.id);
-        applyServerResponse(response, session.id);
-    }
-    catch (err) {
-        logger.error('[playgroundStore] Failed to refresh messages:', err);
-    }
 }