@flowdrop/flowdrop 1.10.0 → 1.12.0

package/dist/components/playground/Playground.svelte.d.ts

@@ -1,29 +1,16 @@
 import type { Workflow } from '../../types/index.js';
 import type { EndpointConfig } from '../../config/endpoints.js';
 import type { PlaygroundMode, PlaygroundConfig } from '../../types/playground.js';
-/**
- * Component props
- */
 interface Props {
-    /** Target workflow ID */
     workflowId: string;
-    /** Pre-loaded workflow (optional, will be fetched if not provided) */
     workflow?: Workflow;
-    /** Display mode: embedded (panel) or standalone (page) */
     mode?: PlaygroundMode;
-    /** Resume a specific session */
     initialSessionId?: string;
-    /** API endpoint configuration */
     endpointConfig?: EndpointConfig;
-    /** Playground configuration options */
     config?: PlaygroundConfig;
-    /** Callback when playground is closed (for embedded mode) */
     onClose?: () => void;
-    /** Callback to toggle the pipeline panel (if undefined, toggle button is hidden) */
     onTogglePanel?: () => void;
-    /** Whether the pipeline panel is currently open (for toggle button active state) */
     isPipelinePanelOpen?: boolean;
-    /** When provided, session switches and creation navigate to a URL instead of mutating store state */
     onSessionNavigate?: (sessionId: string) => void;
 }
 declare const Playground: import("svelte").Component<Props, {}, "">;

package/dist/components/playground/PlaygroundApp.svelte

@@ -0,0 +1,110 @@
+<!--
+  PlaygroundApp Component
+
+  Full-page playground wrapper that pairs the FlowDrop Navbar with
+  PlaygroundStudio.
+
+  When importing this component directly (rather than via mountPlaygroundApp),
+  call initializeSettings() before mount — the navbar's settings modal reads
+  from the settings store.
+-->
+
+<script lang="ts">
+  import Navbar from '../Navbar.svelte';
+  import PlaygroundStudio from './PlaygroundStudio.svelte';
+  import type { Workflow } from '../../types/index.js';
+  import type { EndpointConfig } from '../../config/endpoints.js';
+  import type { PlaygroundConfig } from '../../types/playground.js';
+  import type { SettingsCategory } from '../../types/settings.js';
+  import type { NavbarAction } from '../../types/navbar.js';
+
+  interface Props {
+    workflowId: string;
+    workflow?: Workflow;
+    mode?: 'standalone' | 'embedded';
+    endpointConfig?: EndpointConfig;
+    config?: PlaygroundConfig;
+    showNavbar?: boolean;
+    navbarTitle?: string;
+    primaryActions?: NavbarAction[];
+    showSettings?: boolean;
+    settingsCategories?: SettingsCategory[];
+    showSettingsSyncButton?: boolean;
+    showSettingsResetButton?: boolean;
+    initialSessionId?: string;
+    initialPipelineOpen?: boolean;
+    minChatWidth?: number;
+    initialPipelineWidth?: number;
+    onClose?: () => void;
+    onSessionNavigate?: (sessionId: string) => void;
+  }
+
+  let {
+    workflowId,
+    workflow,
+    mode = 'standalone',
+    endpointConfig,
+    config = {},
+    showNavbar = true,
+    navbarTitle,
+    primaryActions = [],
+    showSettings = true,
+    settingsCategories,
+    showSettingsSyncButton,
+    showSettingsResetButton,
+    initialSessionId,
+    initialPipelineOpen,
+    minChatWidth,
+    initialPipelineWidth,
+    onClose,
+    onSessionNavigate
+  }: Props = $props();
+
+  const displayTitle = $derived(navbarTitle ?? workflow?.name ?? 'Playground');
+</script>
+
+<div class="fd-playground-app">
+  {#if showNavbar}
+    <Navbar
+      title={displayTitle}
+      {primaryActions}
+      showStatus={false}
+      {showSettings}
+      {settingsCategories}
+      {showSettingsSyncButton}
+      {showSettingsResetButton}
+    />
+  {/if}
+  <div class="fd-playground-app__content">
+    <PlaygroundStudio
+      {workflowId}
+      {workflow}
+      {mode}
+      {endpointConfig}
+      {config}
+      {initialSessionId}
+      {initialPipelineOpen}
+      {minChatWidth}
+      {initialPipelineWidth}
+      {onClose}
+      {onSessionNavigate}
+    />
+  </div>
+</div>
+
+<style>
+  .fd-playground-app {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    background: var(--fd-background);
+  }
+
+  .fd-playground-app__content {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+</style>

package/dist/components/playground/PlaygroundApp.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Workflow } from '../../types/index.js';
+import type { EndpointConfig } from '../../config/endpoints.js';
+import type { PlaygroundConfig } from '../../types/playground.js';
+import type { SettingsCategory } from '../../types/settings.js';
+import type { NavbarAction } from '../../types/navbar.js';
+interface Props {
+    workflowId: string;
+    workflow?: Workflow;
+    mode?: 'standalone' | 'embedded';
+    endpointConfig?: EndpointConfig;
+    config?: PlaygroundConfig;
+    showNavbar?: boolean;
+    navbarTitle?: string;
+    primaryActions?: NavbarAction[];
+    showSettings?: boolean;
+    settingsCategories?: SettingsCategory[];
+    showSettingsSyncButton?: boolean;
+    showSettingsResetButton?: boolean;
+    initialSessionId?: string;
+    initialPipelineOpen?: boolean;
+    minChatWidth?: number;
+    initialPipelineWidth?: number;
+    onClose?: () => void;
+    onSessionNavigate?: (sessionId: string) => void;
+}
+declare const PlaygroundApp: import("svelte").Component<Props, {}, "">;
+type PlaygroundApp = ReturnType<typeof PlaygroundApp>;
+export default PlaygroundApp;

package/dist/components/playground/PlaygroundStudio.svelte

@@ -1,48 +1,5 @@
-<!--
-  PlaygroundStudio Component
-
-  Drop-in embeddable split-pane layout: PipelinePanel (left, resizable) + Playground
-  chat (right). Provides the same integrated experience as the FlowDrop demo app with a
-  single import and zero layout glue code.
-
-  @example Basic usage — workflow fetched automatically
-  ```svelte
-  <script>
-    import { PlaygroundStudio, createEndpointConfig } from '@flowdrop/flowdrop/playground';
-    import '@flowdrop/flowdrop/styles';
-  </script>
-
-  <PlaygroundStudio
-    workflowId="wf-123"
-    endpointConfig={createEndpointConfig('/api/flowdrop')}
-  />
-  ```
-
-  @example With pre-loaded workflow and URL-based session routing
-  ```svelte
-  <script>
-    import { PlaygroundStudio, createEndpointConfig } from '@flowdrop/flowdrop/playground';
-
-    let { data } = $props();          // workflow from server load
-    let sessionId = $derived($page.params.sessionId);
-
-    function handleSessionNavigate(id) {
-      goto(`/playground/${id}`);
-    }
-  </script>
-
-  <PlaygroundStudio
-    workflowId={data.workflow.id}
-    workflow={data.workflow}
-    endpointConfig={createEndpointConfig('/api/flowdrop')}
-    initialSessionId={sessionId}
-    onSessionNavigate={handleSessionNavigate}
-  />
-  ```
--->
-
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onMount, untrack } from 'svelte';
   import Icon from '@iconify/svelte';
   import Playground from './Playground.svelte';
   import PipelinePanel from './PipelinePanel.svelte';
@@ -57,7 +14,7 @@
   } from '../../stores/playgroundStore.svelte.js';
   import { setEndpointConfig, workflowApi } from '../../services/api.js';
   import { logger } from '../../utils/logger.js';
-  import type { Workflow } from '../../types/index.js';
+  import type { Workflow, PipelineViewDef } from '../../types/index.js';
   import type { EndpointConfig } from '../../config/endpoints.js';
   import type { PlaygroundConfig, PlaygroundMode } from '../../types/playground.js';
 
@@ -84,6 +41,8 @@
     onSessionNavigate?: (sessionId: string) => void;
     /** Called when the playground is closed (embedded / modal mode) */
     onClose?: () => void;
+    /** Additional pipeline views injected by the consumer */
+    extraPipelineViews?: PipelineViewDef[];
   }
 
   let {
@@ -98,19 +57,18 @@
     initialPipelineWidth = 500,
     onSessionNavigate,
     onClose,
+    extraPipelineViews = [],
   }: Props = $props();
 
-  // svelte-ignore state_referenced_locally
   let resolvedWorkflow = $state<Workflow | null>(workflowProp ?? null);
-  // svelte-ignore state_referenced_locally
   let workflowLoading = $state(workflowProp === undefined);
   let workflowError = $state<string | null>(null);
 
   let splitEl = $state<HTMLElement | null>(null);
-  // svelte-ignore state_referenced_locally
   let pipelineWidth = $state(initialPipelineWidth);
   let isResizing = $state(false);
   let containerWidth = $state(0);
+  let dragContainerLeft = 0;
 
   $effect(() => {
     if (!splitEl) return;
@@ -121,6 +79,12 @@
     return () => observer.disconnect();
   });
 
+  $effect(() => {
+    if (containerWidth > 0) {
+      pipelineWidth = clampPipelineWidth(untrack(() => pipelineWidth));
+    }
+  });
+
   onMount(() => {
     pipelinePanelActions.init();
     if (initialPipelineOpen !== undefined) {
@@ -153,23 +117,36 @@
     }
   }
 
+  function clampPipelineWidth(w: number): number {
+    if (!containerWidth) return Math.max(w, 0);
+    return Math.min(Math.max(w, containerWidth - minChatWidth), containerWidth * 0.75);
+  }
+
   function handleResizerPointerDown(e: PointerEvent) {
+    if (splitEl) dragContainerLeft = splitEl.getBoundingClientRect().left;
     isResizing = true;
     (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
   }
 
   function handleResizerPointerMove(e: PointerEvent) {
-    if (!isResizing || !splitEl) return;
-    const rect = splitEl.getBoundingClientRect();
-    pipelineWidth = Math.min(
-      Math.max(e.clientX - rect.left, rect.width - minChatWidth),
-      rect.width * 0.75
-    );
+    if (!isResizing) return;
+    pipelineWidth = clampPipelineWidth(e.clientX - dragContainerLeft);
   }
 
   function handleResizerPointerUp() {
     isResizing = false;
   }
+
+  function handleResizerKeyDown(e: KeyboardEvent) {
+    const step = e.shiftKey ? 50 : 20;
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      pipelineWidth = clampPipelineWidth(pipelineWidth - step);
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      pipelineWidth = clampPipelineWidth(pipelineWidth + step);
+    }
+  }
 </script>
 
 <div class="playground-studio" class:playground-studio--resizing={isResizing} style="--playground-studio-min-chat-width: {minChatWidth}px">
@@ -188,10 +165,10 @@
           latestExecutionId={getLatestExecutionId()}
           onSelectExecution={(id) => playgroundActions.pinExecution(id)}
           refreshTrigger={getPipelineRefreshTrigger()}
+          extraViews={extraPipelineViews}
         />
       </div>
 
-      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
       <div
         class="playground-studio__resizer"
         class:playground-studio__resizer--active={isResizing}
@@ -200,11 +177,13 @@
         aria-valuenow={Math.round(pipelineWidth)}
         aria-valuemin={0}
         aria-valuemax={Math.round(containerWidth * 0.75)}
+        aria-label="Resize pipeline panel"
         tabindex="0"
         onpointerdown={handleResizerPointerDown}
         onpointermove={handleResizerPointerMove}
         onpointerup={handleResizerPointerUp}
         onpointercancel={handleResizerPointerUp}
+        onkeydown={handleResizerKeyDown}
       >
         <div class="playground-studio__resizer-handle"></div>
       </div>
@@ -271,10 +250,8 @@
     overflow: hidden;
   }
 
-  /* Pipeline pane — explicit width set via inline style */
+  /* Pipeline pane — explicit width driven by JS; clamping keeps it in bounds */
   .playground-studio__pipeline {
-    min-width: calc(100% - var(--playground-studio-min-chat-width));
-    max-width: 75%;
     overflow: hidden;
     flex-shrink: 0;
   }
@@ -351,9 +328,6 @@
   }
 
   @keyframes studio-spin {
-    from {
-      transform: rotate(0deg);
-    }
     to {
       transform: rotate(360deg);
     }

package/dist/components/playground/PlaygroundStudio.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Workflow } from '../../types/index.js';
+import type { Workflow, PipelineViewDef } from '../../types/index.js';
 import type { EndpointConfig } from '../../config/endpoints.js';
 import type { PlaygroundConfig, PlaygroundMode } from '../../types/playground.js';
 interface Props {
@@ -24,6 +24,8 @@ interface Props {
     onSessionNavigate?: (sessionId: string) => void;
     /** Called when the playground is closed (embedded / modal mode) */
     onClose?: () => void;
+    /** Additional pipeline views injected by the consumer */
+    extraPipelineViews?: PipelineViewDef[];
 }
 declare const PlaygroundStudio: import("svelte").Component<Props, {}, "">;
 type PlaygroundStudio = ReturnType<typeof PlaygroundStudio>;

package/dist/components/playground/pipelineViewUtils.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { EndpointConfig } from '../../config/endpoints.js';
+import type { NodeExecutionStatus, KanbanColumnDef } from '../../types/index.js';
+export type NodeStatus = NodeExecutionStatus;
+export interface NodeStatusData {
+    status: string;
+    last_executed?: string | null;
+    execution_time?: number | null;
+    error?: string | null;
+}
+export declare function resolveStatus(raw: NodeStatusData | undefined): NodeStatus;
+/**
+ * Creates a reactive pipeline data fetcher.
+ * `endpointConfig` is used once to construct the API client — it must be stable.
+ * `getPipelineId` is called on every fetch so pipeline ID changes are picked up.
+ */
+export declare function createPipelineDataFetcher(getPipelineId: () => string, endpointConfig: EndpointConfig): {
+    readonly nodeStatusMap: Record<string, NodeStatusData>;
+    readonly kanbanConfig: KanbanColumnDef[] | null;
+    readonly isLoading: boolean;
+    readonly isError: boolean;
+    fetchData: () => Promise<void>;
+};

package/dist/components/playground/pipelineViewUtils.svelte.js

@@ -0,0 +1,77 @@
+import { EnhancedFlowDropApiClient } from '../../api/enhanced-client.js';
+import { logger } from '../../utils/logger.js';
+const KNOWN_STATUSES = new Set([
+    'idle', 'pending', 'running', 'paused', 'interrupted',
+    'completed', 'skipped', 'failed', 'cancelled'
+]);
+export function resolveStatus(raw) {
+    if (!raw)
+        return 'pending';
+    const s = raw.status || 'pending';
+    if (!KNOWN_STATUSES.has(s)) {
+        logger.warn(`[FlowDrop] Unknown node status from server: "${s}" — falling back to "pending"`);
+        return 'pending';
+    }
+    return s;
+}
+/**
+ * Creates a reactive pipeline data fetcher.
+ * `endpointConfig` is used once to construct the API client — it must be stable.
+ * `getPipelineId` is called on every fetch so pipeline ID changes are picked up.
+ */
+export function createPipelineDataFetcher(getPipelineId, endpointConfig) {
+    const client = new EnhancedFlowDropApiClient(endpointConfig);
+    let nodeStatusMap = $state({});
+    let kanbanConfig = $state(null);
+    let isLoading = $state(false);
+    let isError = $state(false);
+    async function fetchData() {
+        try {
+            isLoading = true;
+            isError = false;
+            const data = await client.getPipelineData(getPipelineId());
+            const map = {};
+            for (const [nodeId, info] of Object.entries(data.node_statuses)) {
+                map[nodeId] = {
+                    status: info.status,
+                    last_executed: info.last_executed,
+                    execution_time: info.execution_time,
+                    error: info.error,
+                };
+            }
+            nodeStatusMap = map;
+            if (data.kanban_config?.columns) {
+                // Server sends statuses as string[]; trust the server and cast at this
+                // boundary. resolveStatus() handles unknown values at read time.
+                kanbanConfig = data.kanban_config.columns.map((col) => ({
+                    key: col.key,
+                    label: col.label,
+                    statuses: col.statuses,
+                    icon: col.icon,
+                    color: col.color,
+                }));
+            }
+        }
+        catch {
+            isError = true;
+        }
+        finally {
+            isLoading = false;
+        }
+    }
+    return {
+        get nodeStatusMap() {
+            return nodeStatusMap;
+        },
+        get kanbanConfig() {
+            return kanbanConfig;
+        },
+        get isLoading() {
+            return isLoading;
+        },
+        get isError() {
+            return isError;
+        },
+        fetchData
+    };
+}

package/dist/messages/defaults.d.ts

@@ -328,6 +328,30 @@ export declare const defaultMessages: {
                 n: number;
             }) => string;
         };
+        readonly executionConsole: {
+            readonly header: "Execution";
+            readonly noExecutionTitle: "No execution yet";
+            readonly noExecutionText: "Create or select a session below, then run your workflow to see execution output here.";
+            readonly readyTitle: "Ready to run";
+            readonly readyText: "Use the controls below to start the workflow. Output and interactive prompts will appear here.";
+            readonly newSession: "New session";
+        };
+        readonly controlPanel: {
+            readonly sessionsLabel: "Sessions";
+            readonly noSession: "No session";
+            readonly switchSession: "Switch session";
+            readonly newSession: "New session";
+            readonly pipeline: "Pipeline";
+            readonly showPipeline: "Show pipeline";
+            readonly hidePipeline: "Hide pipeline";
+            readonly refresh: "Refresh";
+            readonly refreshTitle: "Refresh status";
+            readonly logs: "Logs";
+            readonly showLogs: "Show log messages";
+            readonly hideLogs: "Hide log messages";
+            readonly deleteSession: "Delete session";
+            readonly messageStreamLabel: "Execution output";
+        };
     };
     readonly nodes: {
         readonly notes: {

package/dist/messages/defaults.js

@@ -300,6 +300,30 @@ export const defaultMessages = {
             minutesAgo: ({ n }) => `${n}m ago`,
             hoursAgo: ({ n }) => `${n}h ago`,
             daysAgo: ({ n }) => `${n}d ago`
+        },
+        executionConsole: {
+            header: 'Execution',
+            noExecutionTitle: 'No execution yet',
+            noExecutionText: 'Create or select a session below, then run your workflow to see execution output here.',
+            readyTitle: 'Ready to run',
+            readyText: 'Use the controls below to start the workflow. Output and interactive prompts will appear here.',
+            newSession: 'New session'
+        },
+        controlPanel: {
+            sessionsLabel: 'Sessions',
+            noSession: 'No session',
+            switchSession: 'Switch session',
+            newSession: 'New session',
+            pipeline: 'Pipeline',
+            showPipeline: 'Show pipeline',
+            hidePipeline: 'Hide pipeline',
+            refresh: 'Refresh',
+            refreshTitle: 'Refresh status',
+            logs: 'Logs',
+            showLogs: 'Show log messages',
+            hideLogs: 'Hide log messages',
+            deleteSession: 'Delete session',
+            messageStreamLabel: 'Execution output'
         }
     },
     nodes: {

package/dist/playground/index.d.ts

@@ -112,8 +112,13 @@
  */
 export { default as Playground } from '../components/playground/Playground.svelte';
 export { default as PlaygroundStudio } from '../components/playground/PlaygroundStudio.svelte';
+export { default as PlaygroundApp } from '../components/playground/PlaygroundApp.svelte';
 export { default as PlaygroundModal } from '../components/playground/PlaygroundModal.svelte';
 export { default as ChatPanel } from '../components/playground/ChatPanel.svelte';
+export { default as MessageStream } from '../components/playground/MessageStream.svelte';
+export { default as ChatInput } from '../components/playground/ChatInput.svelte';
+export { default as ExecutionConsole } from '../components/playground/ExecutionConsole.svelte';
+export { default as ControlPanel } from '../components/playground/ControlPanel.svelte';
 export { default as PipelinePanel } from '../components/playground/PipelinePanel.svelte';
 export { default as ExecutionList } from '../components/playground/ExecutionList.svelte';
 export { default as SessionManager } from '../components/playground/SessionManager.svelte';
@@ -123,7 +128,7 @@ export { default as MessageBubble } from '../components/playground/MessageBubble
 export { InterruptBubble, ConfirmationPrompt, ChoicePrompt, TextInputPrompt, FormPrompt, ReviewPrompt } from '../components/interrupt/index.js';
 export { PlaygroundService, playgroundService } from '../services/playgroundService.js';
 export { InterruptService, interruptService } from '../services/interruptService.js';
-export { getCurrentSession, getSessions, getMessages, getIsExecuting, getCanSendMessage, getIsLoading, getError as getPlaygroundError, getCurrentWorkflow, getLastPollSequenceNumber, getSessionStatus, getMessageCount, getChatMessages, getLogMessages, getLatestMessage, getInputFields, getHasChatInput, getSessionCount, getActiveExecutionId, getPinnedExecutionId, getLatestExecutionId, playgroundActions, applyServerResponse, subscribeToSessionStatus, getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestSequenceNumber } from '../stores/playgroundStore.svelte.js';
+export { getCurrentSession, getSessions, getMessages, getIsExecuting, getCanSendMessage, getIsLoading, getError as getPlaygroundError, getCurrentWorkflow, getLastPollSequenceNumber, getSessionStatus, getMessageCount, getChatMessages, getLogMessages, getLatestMessage, getInputFields, getHasChatInput, getSessionCount, getActiveExecutionId, getPinnedExecutionId, getLatestExecutionId, getShowLogs, playgroundActions, applyServerResponse, subscribeToSessionStatus, getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestSequenceNumber } from '../stores/playgroundStore.svelte.js';
 export { getPipelinePanelOpen, pipelinePanelActions } from '../stores/pipelinePanelStore.svelte.js';
 export type { PlaygroundSession, PlaygroundMessage, PlaygroundInputField, PlaygroundMessageRequest, PlaygroundMessagesResult, PlaygroundConfig, PlaygroundMode, PlaygroundSessionStatus, PlaygroundMessageRole, PlaygroundMessageLevel, PlaygroundMessageMetadata, PlaygroundApiResponse, PlaygroundSessionsResponse, PlaygroundSessionResponse, PlaygroundMessageResponse, PlaygroundMessagesApiResponse, PlaygroundExecution } from '../types/playground.js';
 export { isChatInputNode, CHAT_INPUT_PATTERNS, defaultShouldStopPolling, defaultIsTerminalStatus, DEFAULT_STOP_POLLING_STATUSES, DEFAULT_TERMINAL_STATUSES } from '../types/playground.js';
@@ -131,5 +136,6 @@ export type { InterruptType, InterruptStatus, Interrupt, InterruptChoice, Interr
 export { isInterruptMetadata, extractInterruptMetadata, metadataToInterrupt, defaultInterruptPollingConfig } from '../types/interrupt.js';
 export { getInterruptsMap, getPendingInterruptIds, getPendingInterrupts, getPendingInterruptCount, getResolvedInterrupts, getIsAnySubmitting, interruptActions, getInterrupt, isInterruptPending, isInterruptSubmitting, getInterruptError, getInterruptByMessageId, interruptHasError } from '../stores/interruptStore.svelte.js';
 export type { InterruptWithState } from '../stores/interruptStore.svelte.js';
-export { mountPlayground, unmountPlayground, mountPlaygroundStudio, type PlaygroundMountOptions, type PlaygroundStudioMountOptions, type MountedPlayground } from './mount.js';
+export { mountPlayground, unmountPlayground, mountPlaygroundStudio, mountPlaygroundApp, type PlaygroundMountOptions, type PlaygroundStudioMountOptions, type PlaygroundAppMountOptions, type MountedPlayground } from './mount.js';
+export type { PipelineViewDef, PipelineViewProps } from '../types/index.js';
 export { createEndpointConfig, defaultEndpointConfig, buildEndpointUrl, type EndpointConfig } from '../config/endpoints.js';

package/dist/playground/index.js

@@ -115,8 +115,13 @@
 // ============================================================================
 export { default as Playground } from '../components/playground/Playground.svelte';
 export { default as PlaygroundStudio } from '../components/playground/PlaygroundStudio.svelte';
+export { default as PlaygroundApp } from '../components/playground/PlaygroundApp.svelte';
 export { default as PlaygroundModal } from '../components/playground/PlaygroundModal.svelte';
 export { default as ChatPanel } from '../components/playground/ChatPanel.svelte';
+export { default as MessageStream } from '../components/playground/MessageStream.svelte';
+export { default as ChatInput } from '../components/playground/ChatInput.svelte';
+export { default as ExecutionConsole } from '../components/playground/ExecutionConsole.svelte';
+export { default as ControlPanel } from '../components/playground/ControlPanel.svelte';
 export { default as PipelinePanel } from '../components/playground/PipelinePanel.svelte';
 export { default as ExecutionList } from '../components/playground/ExecutionList.svelte';
 export { default as SessionManager } from '../components/playground/SessionManager.svelte';
@@ -145,6 +150,8 @@ getCurrentSession, getSessions, getMessages, getIsExecuting, getCanSendMessage,
 getSessionStatus, getMessageCount, getChatMessages, getLogMessages, getLatestMessage, getInputFields, getHasChatInput, getSessionCount, 
 // Execution getters (used with PipelinePanel / PlaygroundSplit)
 getActiveExecutionId, getPinnedExecutionId, getLatestExecutionId, 
+// UI state
+getShowLogs, 
 // Actions
 playgroundActions, 
 // Server response application (single update path)
@@ -174,7 +181,7 @@ getInterrupt, isInterruptPending, isInterruptSubmitting, getInterruptError, getI
 // ============================================================================
 // Playground Mount Functions (for vanilla JS / Drupal / IIFE integration)
 // ============================================================================
-export { mountPlayground, unmountPlayground, mountPlaygroundStudio } from './mount.js';
+export { mountPlayground, unmountPlayground, mountPlaygroundStudio, mountPlaygroundApp } from './mount.js';
 // ============================================================================
 // Endpoint Configuration (re-exported for convenience)
 // ============================================================================