@flowdrop/flowdrop 1.12.0 → 1.14.0

package/dist/components/playground/Playground.svelte

@@ -33,8 +33,11 @@
     getError,
     playgroundActions,
     applyServerResponse,
-    getLatestSequenceNumber
+    getLatestSequenceNumber,
+    getOldestSequenceNumber,
+    setHasOlder
   } from '../../stores/playgroundStore.svelte.js';
+  import type { PlaygroundMessagesApiResponse } from '../../types/playground.js';
   import { interruptActions } from '../../stores/interruptStore.svelte.js';
   import { logger } from '../../utils/logger.js';
 
@@ -67,6 +70,11 @@
   let loadedInitialSessionId = $state<string | undefined>(undefined);
   let autoRunTriggered = $state(false);
   let isRefreshing = $state(false);
+  // Monotonic token so a slow session load can't overwrite a newer one when the
+  // user switches sessions faster than the network responds (last-load wins).
+  let loadToken = 0;
+
+  const messagePageSize = $derived(config.messagePageSize ?? 50);
 
   // Vertical resizer state for the ExecutionConsole ↔ ControlPanel split.
   let playgroundContentEl = $state<HTMLElement | null>(null);
@@ -90,16 +98,15 @@
     }
   });
 
-  const maxControlPanelHeight = $derived(
-    containerHeight ? Math.round(containerHeight * 0.6) : 600
-  );
+  const maxControlPanelHeight = $derived(containerHeight ? Math.round(containerHeight * 0.6) : 600);
 
   function clampControlPanelHeight(h: number): number {
     return Math.min(Math.max(h, 140), maxControlPanelHeight);
   }
 
   function handleVerticalResizerPointerDown(e: PointerEvent) {
-    if (playgroundContentEl) dragContainerBottom = playgroundContentEl.getBoundingClientRect().bottom;
+    if (playgroundContentEl)
+      dragContainerBottom = playgroundContentEl.getBoundingClientRect().bottom;
     isVerticalResizing = true;
     (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
   }
@@ -133,7 +140,9 @@
         const sessionId = getCurrentSession()?.id;
         if (sessionId) {
           void playgroundService
-            .getMessages(sessionId, playgroundService.getLastSequenceNumber() ?? undefined)
+            .getMessages(sessionId, {
+              since: playgroundService.getLastSequenceNumber() ?? undefined
+            })
             .then((response) => applyServerResponse(response))
             .catch((err) => logger.error('[Playground] Visibility catchup failed:', err));
         }
@@ -231,26 +240,79 @@
   async function loadSession(sessionId: string): Promise<void> {
     playgroundActions.setLoading(true);
     playgroundActions.setError(null);
+    const token = ++loadToken;
 
     try {
       const session = await playgroundService.getSession(sessionId);
+      if (token !== loadToken) return; // a newer session load superseded us
       playgroundActions.setCurrentSession(session);
 
-      const response = await playgroundService.getMessages(sessionId);
+      // Load only the most recent page; older messages load on demand when the
+      // user scrolls up (loadOlderMessages). Clear right before applying the
+      // fresh page — not before the await — so switching sessions doesn't blank
+      // the view for the duration of the fetch.
+      const response = await playgroundService.getMessages(sessionId, {
+        latest: true,
+        limit: messagePageSize
+      });
+      if (token !== loadToken) return;
+      playgroundActions.clearMessages();
       applyServerResponse(response);
+      setHasOlder(deriveHasOlder(response));
 
       if (session.status !== 'idle') {
+        // Seed polling from the newest loaded message so it tails live updates
+        // instead of crawling forward from the start of the conversation.
         startPolling(sessionId, true);
       }
     } catch (err) {
+      if (token !== loadToken) return; // don't surface a superseded load's error
       const errorMessage = err instanceof Error ? err.message : 'Failed to load session';
       playgroundActions.setError(errorMessage);
       logger.error('Failed to load session:', err);
     } finally {
-      playgroundActions.setLoading(false);
+      if (token === loadToken) playgroundActions.setLoading(false);
     }
   }
 
+  /**
+   * Load the page of messages immediately older than the oldest one currently
+   * shown. Triggered by scroll-up in MessageStream, which serializes calls and
+   * owns the in-flight/anchoring state. Bypasses applyServerResponse so a
+   * historical fetch never disturbs the live polling cursor or pipeline view.
+   */
+  async function loadOlderMessages(): Promise<void> {
+    const sessionId = getCurrentSession()?.id;
+    const before = getOldestSequenceNumber();
+    if (!sessionId || before === null) return;
+
+    try {
+      const response = await playgroundService.getMessages(sessionId, {
+        before,
+        limit: messagePageSize
+      });
+      // The session may have changed while the fetch was in flight — don't
+      // splice an old session's page into the new session's store.
+      if (getCurrentSession()?.id !== sessionId) return;
+      if (response.data && response.data.length > 0) {
+        playgroundActions.addMessages(response.data);
+      }
+      setHasOlder(deriveHasOlder(response));
+    } catch (err) {
+      logger.error('[Playground] Failed to load older messages:', err);
+    }
+  }
+
+  /**
+   * Whether older messages remain after a backward-pagination response. Prefer
+   * the server's explicit `hasOlder` flag; fall back to inferring from page
+   * fullness for backends that haven't adopted the field yet.
+   */
+  function deriveHasOlder(response: PlaygroundMessagesApiResponse): boolean {
+    if (typeof response.hasOlder === 'boolean') return response.hasOlder;
+    return (response.data?.length ?? 0) >= messagePageSize;
+  }
+
   async function handleCreateSession(): Promise<void> {
     playgroundActions.setLoading(true);
     playgroundActions.setError(null);
@@ -320,8 +382,10 @@
       playgroundActions.addMessage(message);
       // Only start polling if not already active — avoids resetting the cursor
       // mid-session and re-fetching messages that are already in the store.
+      // Seed from the newest loaded message so polling tails live updates
+      // rather than crawling forward from the start of the conversation.
       if (!playgroundService.isPolling()) {
-        startPolling(sessionId);
+        startPolling(sessionId, true);
       }
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to send message';
@@ -370,10 +434,9 @@
     if (!sessionId || isRefreshing) return;
     isRefreshing = true;
     try {
-      const response = await playgroundService.getMessages(
-        sessionId,
-        playgroundService.getLastSequenceNumber() ?? undefined
-      );
+      const response = await playgroundService.getMessages(sessionId, {
+        since: playgroundService.getLastSequenceNumber() ?? undefined
+      });
       applyServerResponse(response);
       if (response.sessionStatus === 'running' && !playgroundService.isPolling()) {
         startPolling(sessionId, true);
@@ -392,10 +455,9 @@
     try {
       // Catch up immediately rather than waiting for the next poll interval.
       // Use the service's sequence cursor so we only fetch new messages.
-      const response = await playgroundService.getMessages(
-        sessionId,
-        playgroundService.getLastSequenceNumber() ?? undefined
-      );
+      const response = await playgroundService.getMessages(sessionId, {
+        since: playgroundService.getLastSequenceNumber() ?? undefined
+      });
       applyServerResponse(response);
     } catch (err) {
       logger.error('[Playground] Failed to refresh after interrupt:', err);
@@ -430,10 +492,7 @@
       </div>
     {/if}
 
-    <div
-      class="playground__content"
-      bind:this={playgroundContentEl}
-    >
+    <div class="playground__content" bind:this={playgroundContentEl}>
       {#if getIsLoading() && !getCurrentSession()}
         <div class="playground__loading">
           <Icon icon="mdi:loading" class="playground__loading-icon" />
@@ -444,11 +503,14 @@
           showTimestamps={config.showTimestamps ?? true}
           autoScroll={config.autoScroll ?? true}
           enableMarkdown={config.enableMarkdown ?? true}
-          showLogsInline={config.logDisplayMode === 'inline'}
           onInterruptResolved={handleInterruptResolved}
           onCreateSession={getSessions().length === 0 ? handleCreateSession : undefined}
+          onLoadOlder={loadOlderMessages}
         />
 
+        <!-- Focusable ARIA splitter: keyboard/pointer handlers drive the resize -->
+        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+        <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
         <div
           class="playground__vertical-resizer"
           class:playground__vertical-resizer--active={isVerticalResizing}

package/dist/components/playground/PlaygroundStudio.svelte

@@ -3,14 +3,17 @@
   import Icon from '@iconify/svelte';
   import Playground from './Playground.svelte';
   import PipelinePanel from './PipelinePanel.svelte';
-  import { getPipelinePanelOpen, pipelinePanelActions } from '../../stores/pipelinePanelStore.svelte.js';
+  import {
+    getPipelinePanelOpen,
+    pipelinePanelActions
+  } from '../../stores/pipelinePanelStore.svelte.js';
   import {
     getActiveExecutionId,
     getPinnedExecutionId,
     getLatestExecutionId,
     getPipelineRefreshTrigger,
-    getCurrentSession,
-    playgroundActions,
+    getSelectableExecutions,
+    playgroundActions
   } from '../../stores/playgroundStore.svelte.js';
   import { setEndpointConfig, workflowApi } from '../../services/api.js';
   import { logger } from '../../utils/logger.js';
@@ -57,14 +60,17 @@
     initialPipelineWidth = 500,
     onSessionNavigate,
     onClose,
-    extraPipelineViews = [],
+    extraPipelineViews = []
   }: Props = $props();
 
+  // svelte-ignore state_referenced_locally — seed mutable state from the prop's initial value; workflow may load asynchronously below
   let resolvedWorkflow = $state<Workflow | null>(workflowProp ?? null);
+  // svelte-ignore state_referenced_locally — initial loading flag derived from whether a workflow was provided up front
   let workflowLoading = $state(workflowProp === undefined);
   let workflowError = $state<string | null>(null);
 
   let splitEl = $state<HTMLElement | null>(null);
+  // svelte-ignore state_referenced_locally — seed mutable width from the initial prop; it changes as the user drags the resizer
   let pipelineWidth = $state(initialPipelineWidth);
   let isResizing = $state(false);
   let containerWidth = $state(0);
@@ -100,7 +106,8 @@
 
   async function loadWorkflow(): Promise<void> {
     if (!endpointConfig) {
-      workflowError = 'Provide a workflow prop or an endpointConfig so the workflow can be fetched.';
+      workflowError =
+        'Provide a workflow prop or an endpointConfig so the workflow can be fetched.';
       workflowLoading = false;
       return;
     }
@@ -149,13 +156,26 @@
   }
 </script>
 
-<div class="playground-studio" class:playground-studio--resizing={isResizing} style="--playground-studio-min-chat-width: {minChatWidth}px">
+<div
+  class="playground-studio"
+  class:playground-studio--resizing={isResizing}
+  style="--playground-studio-min-chat-width: {minChatWidth}px"
+>
   <div class="playground-studio__panes" bind:this={splitEl}>
     {#if getPipelinePanelOpen() && resolvedWorkflow && endpointConfig}
       {@const activeId = getActiveExecutionId()}
-      {@const executions = getCurrentSession()?.executions ?? []}
+      {@const executions = getSelectableExecutions()}
 
       <div class="playground-studio__pipeline" style="width: {pipelineWidth}px;">
+        <button
+          type="button"
+          class="playground-studio__back-to-chat"
+          aria-label="Back to chat"
+          onclick={pipelinePanelActions.toggle}
+        >
+          <Icon icon="mdi:arrow-left" aria-hidden="true" />
+          <span>Back to chat</span>
+        </button>
         <PipelinePanel
           pipelineId={activeId}
           workflow={resolvedWorkflow}
@@ -169,6 +189,9 @@
         />
       </div>
 
+      <!-- Focusable ARIA splitter: keyboard/pointer handlers drive the resize -->
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
       <div
         class="playground-studio__resizer"
         class:playground-studio__resizer--active={isResizing}
@@ -254,6 +277,13 @@
   .playground-studio__pipeline {
     overflow: hidden;
     flex-shrink: 0;
+    position: relative;
+  }
+
+  /* Mobile-only "back to chat" affordance. Hidden on wider viewports where
+     the ControlPanel's pipeline toggle remains reachable. */
+  .playground-studio__back-to-chat {
+    display: none;
   }
 
   /* Drag handle between the two panes */
@@ -375,4 +405,66 @@
   .playground-studio__retry-btn:hover {
     background-color: var(--fd-primary-hover);
   }
+
+  /* ============================================================
+     Mobile layout (< 768px)
+     Switch from side-by-side panes to one-at-a-time fullscreen.
+     The pipeline panel, when open, covers the chat. Users toggle
+     between them via the pipeline panel button. The resizer is
+     hidden — at this width there's nothing to resize.
+     ============================================================ */
+  @media (max-width: 768px) {
+    .playground-studio__pipeline {
+      /* Override the JS-driven width — take the whole row */
+      width: 100% !important;
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .playground-studio__resizer {
+      display: none;
+    }
+
+    /* When pipeline is open (chat is NOT solo), hide chat to give the
+       pipeline the full viewport. When pipeline closes, chat goes back
+       to full-width via the existing --solo class. */
+    .playground-studio__chat:not(.playground-studio__chat--solo) {
+      display: none;
+    }
+
+    .playground-studio__back-to-chat {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--fd-space-2xs);
+      align-self: flex-start;
+      margin: var(--fd-space-xs);
+      padding: var(--fd-space-2xs) var(--fd-space-md);
+      min-height: 2.5rem;
+      font-size: var(--fd-text-sm);
+      font-weight: 500;
+      font-family: inherit;
+      color: var(--fd-foreground);
+      background-color: var(--fd-card);
+      border: 1px solid var(--fd-border);
+      border-radius: var(--fd-radius-md);
+      cursor: pointer;
+      transition: background-color var(--fd-transition-fast);
+    }
+
+    .playground-studio__back-to-chat:hover {
+      background-color: var(--fd-muted);
+    }
+
+    .playground-studio__back-to-chat:focus-visible {
+      outline: 2px solid var(--fd-ring);
+      outline-offset: 2px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .playground-studio__back-to-chat {
+      transition: none;
+    }
+  }
 </style>

package/dist/components/playground/messageDisplay.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared formatters / icon maps / label resolver for the message layout
+ * components. Pure functions only — i18n strings come in via the `roles`
+ * argument; the helper has no runtime dependency on the messages context.
+ */
+import type { PlaygroundMessage, PlaygroundMessageLevel, PlaygroundMessageRole } from '../../types/playground.js';
+import type { Messages } from '../../messages/types.js';
+export type RoleLabels = Messages['playground']['roles'];
+export declare function formatTimestamp(timestamp: string): string;
+export declare function formatDuration(ms: number): string;
+export declare function getLogLevelIcon(level: PlaygroundMessageLevel | undefined): string;
+export declare function getRoleIcon(role: PlaygroundMessageRole): string;
+/**
+ * Localised author label. Backend-supplied overrides win:
+ *   - user → metadata.userName (display name)
+ *   - log  → metadata.nodeLabel (human-readable node label)
+ * Anything else returns the role's i18n default.
+ */
+export declare function getRoleLabel(message: Pick<PlaygroundMessage, 'role' | 'metadata'>, roles: RoleLabels): string;

package/dist/components/playground/messageDisplay.js

@@ -0,0 +1,62 @@
+/**
+ * Shared formatters / icon maps / label resolver for the message layout
+ * components. Pure functions only — i18n strings come in via the `roles`
+ * argument; the helper has no runtime dependency on the messages context.
+ */
+export function formatTimestamp(timestamp) {
+    return new Date(timestamp).toLocaleTimeString('en-US', {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+    });
+}
+export function formatDuration(ms) {
+    return ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(2)}s`;
+}
+export function getLogLevelIcon(level) {
+    switch (level) {
+        case 'error':
+            return 'mdi:alert-circle';
+        case 'warning':
+            return 'mdi:alert';
+        case 'debug':
+            return 'mdi:bug';
+        default:
+            return 'mdi:information';
+    }
+}
+export function getRoleIcon(role) {
+    switch (role) {
+        case 'user':
+            return 'mdi:account';
+        case 'assistant':
+            return 'mdi:robot';
+        case 'system':
+            return 'mdi:cog';
+        case 'log':
+            return 'mdi:console';
+        default:
+            return 'mdi:message';
+    }
+}
+/**
+ * Localised author label. Backend-supplied overrides win:
+ *   - user → metadata.userName (display name)
+ *   - log  → metadata.nodeLabel (human-readable node label)
+ * Anything else returns the role's i18n default.
+ */
+export function getRoleLabel(message, roles) {
+    switch (message.role) {
+        case 'user':
+            return message.metadata?.userName ?? roles.you;
+        case 'assistant':
+            return roles.assistant;
+        case 'system':
+            return roles.system;
+        case 'log':
+            return message.metadata?.nodeLabel ?? roles.log;
+        default:
+            return roles.message;
+    }
+}

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

@@ -1,8 +1,15 @@
 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'
+    'idle',
+    'pending',
+    'running',
+    'paused',
+    'interrupted',
+    'completed',
+    'skipped',
+    'failed',
+    'cancelled'
 ]);
 export function resolveStatus(raw) {
     if (!raw)
@@ -36,7 +43,7 @@ export function createPipelineDataFetcher(getPipelineId, endpointConfig) {
                     status: info.status,
                     last_executed: info.last_executed,
                     execution_time: info.execution_time,
-                    error: info.error,
+                    error: info.error
                 };
             }
             nodeStatusMap = map;
@@ -48,7 +55,7 @@ export function createPipelineDataFetcher(getPipelineId, endpointConfig) {
                     label: col.label,
                     statuses: col.statuses,
                     icon: col.icon,
-                    color: col.color,
+                    color: col.color
                 }));
             }
         }

package/dist/form/autocomplete.d.ts

@@ -0,0 +1 @@
+export { default as FormAutocomplete } from '../components/form/FormAutocomplete.svelte';

package/dist/form/autocomplete.js

@@ -0,0 +1 @@
+export { default as FormAutocomplete } from '../components/form/FormAutocomplete.svelte';

package/dist/form/index.d.ts

@@ -75,3 +75,20 @@ export type { FieldSchema, FieldType, FieldFormat, FieldOption, OneOfItem, Schem
 export { isFieldOptionArray, isOneOfArray, normalizeOptions, oneOfToOptions, getSchemaOptions } from '../components/form/types.js';
 export { fieldComponentRegistry, hiddenFieldMatcher, checkboxGroupMatcher, enumSelectMatcher, textareaMatcher, rangeMatcher, textFieldMatcher, numberFieldMatcher, toggleMatcher, selectOptionsMatcher, arrayMatcher } from './fieldRegistry.js';
 export type { FieldComponentProps, FieldMatcher, FieldMatcherRegistration, FieldComponent, FieldComponentRegistration } from './fieldRegistry.js';
+/**
+ * Use with Svelte's `getContext` inside custom field components registered
+ * via `fieldComponentRegistry` to read sibling form field values.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { getContext } from 'svelte';
+ *   import { FORM_VALUES_KEY, type FormValuesGetter } from '@flowdrop/flowdrop/form';
+ *
+ *   const getFormValues = getContext<FormValuesGetter | undefined>(FORM_VALUES_KEY);
+ *   const account = $derived(getFormValues?.()['account']);
+ * </script>
+ * ```
+ */
+export declare const FORM_VALUES_KEY: "flowdrop:getFormValues";
+export type FormValuesGetter = () => Record<string, unknown>;

package/dist/form/index.js

@@ -89,3 +89,22 @@ export {
 fieldComponentRegistry, 
 // Built-in matchers for custom components
 hiddenFieldMatcher, checkboxGroupMatcher, enumSelectMatcher, textareaMatcher, rangeMatcher, textFieldMatcher, numberFieldMatcher, toggleMatcher, selectOptionsMatcher, arrayMatcher } from './fieldRegistry.js';
+// ============================================================================
+// Context keys (for custom field components)
+// ============================================================================
+/**
+ * Use with Svelte's `getContext` inside custom field components registered
+ * via `fieldComponentRegistry` to read sibling form field values.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { getContext } from 'svelte';
+ *   import { FORM_VALUES_KEY, type FormValuesGetter } from '@flowdrop/flowdrop/form';
+ *
+ *   const getFormValues = getContext<FormValuesGetter | undefined>(FORM_VALUES_KEY);
+ *   const account = $derived(getFormValues?.()['account']);
+ * </script>
+ * ```
+ */
+export const FORM_VALUES_KEY = 'flowdrop:getFormValues';

package/dist/messages/defaults.d.ts

@@ -310,6 +310,11 @@ export declare const defaultMessages: {
             }) => string;
             readonly executionDuration: "Execution duration";
         };
+        readonly messageAnnotations: {
+            readonly hierarchyOf: ({ path }: {
+                path: string;
+            }) => string;
+        };
         readonly sessions: {
             readonly header: "Sessions";
             readonly newSession: "New Session";

package/dist/messages/defaults.js

@@ -288,6 +288,12 @@ export const defaultMessages = {
             nodeId: ({ id }) => `Node ID: ${id}`,
             executionDuration: 'Execution duration'
         },
+        // ARIA labels for message annotations. The hierarchy trail names the
+        // actual path so AT users hear "From: ForEach Loop / Greeter" rather
+        // than a generic "hierarchy".
+        messageAnnotations: {
+            hierarchyOf: ({ path }) => `From: ${path}`
+        },
         sessions: {
             header: 'Sessions',
             newSession: 'New Session',