@flowdrop/flowdrop 1.13.0 → 1.14.0

package/dist/components/playground/MessageStream.svelte

@@ -24,7 +24,8 @@
     getChatMessages,
     getIsExecuting,
     getCurrentSession,
-    getShowLogs
+    getShowLogs,
+    getHasOlder
   } from '../../stores/playgroundStore.svelte.js';
   import {
     getInterruptsMap,
@@ -51,6 +52,11 @@
     compactSystemMessages?: boolean;
     /** Called when an interrupt is resolved */
     onInterruptResolved?: () => void;
+    /**
+     * Called when the user scrolls near the top, to load older messages.
+     * When omitted, scroll-up paging is disabled (e.g. view-only surfaces).
+     */
+    onLoadOlder?: () => void | Promise<void>;
     /** Custom render for the no-session welcome state */
     welcome?: Snippet;
     /** Custom render for the empty-session state */
@@ -64,6 +70,7 @@
     allowLogs = false,
     compactSystemMessages = true,
     onInterruptResolved,
+    onLoadOlder,
     welcome,
     emptySession
   }: Props = $props();
@@ -71,14 +78,14 @@
   const states = $derived(m().playground.states);
 
   /** Reference to the messages container for scrolling */
-  let messagesContainer: HTMLDivElement | undefined;
+  let messagesContainer = $state<HTMLDivElement | undefined>();
 
-  const displayMessages = $derived(
-    allowLogs && getShowLogs() ? getMessages() : getChatMessages()
-  );
+  const displayMessages = $derived(allowLogs && getShowLogs() ? getMessages() : getChatMessages());
 
   let previousMessageCount = 0;
   let userScrolledUp = false;
+  let isLoadingOlder = $state(false);
+  let topSentinel = $state<HTMLDivElement | undefined>();
 
   function handleScroll() {
     if (!messagesContainer) return;
@@ -86,6 +93,48 @@
     userScrolledUp = scrollHeight - scrollTop - clientHeight > 50;
   }
 
+  // Load older messages when the top sentinel scrolls into view. An observer is
+  // self-throttling and keeps layout reads off the scroll path; rootMargin
+  // pre-fetches the next page slightly before the user reaches the very top.
+  $effect(() => {
+    if (!topSentinel || !messagesContainer || !onLoadOlder) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) void loadOlder();
+      },
+      { root: messagesContainer, rootMargin: '300px 0px 0px 0px' }
+    );
+    observer.observe(topSentinel);
+    return () => observer.disconnect();
+  });
+
+  /**
+   * Fetch the previous page and keep the viewport pinned to the message the
+   * user is reading. We anchor on a real DOM node (the first rendered message)
+   * and compensate scrollTop by however far it moved — robust against the
+   * loading spinner (which is out of flow) and any late reflow above it.
+   * A scroll during the in-flight fetch is intentionally overridden so the
+   * prepend doesn't shift the reading position.
+   */
+  async function loadOlder() {
+    if (!onLoadOlder || !messagesContainer || isLoadingOlder || !getHasOlder()) return;
+
+    const anchor = topSentinel?.nextElementSibling as HTMLElement | null;
+    const anchorTopBefore = anchor?.getBoundingClientRect().top ?? 0;
+
+    isLoadingOlder = true;
+    try {
+      await onLoadOlder();
+      await tick();
+      if (messagesContainer && anchor) {
+        const shift = anchor.getBoundingClientRect().top - anchorTopBefore;
+        messagesContainer.scrollTop += shift;
+      }
+    } finally {
+      isLoadingOlder = false;
+    }
+  }
+
   function isFormFocused(): boolean {
     if (!messagesContainer) return false;
     const activeElement = document.activeElement;
@@ -154,14 +203,20 @@
     const currentCount = displayMessages.length;
 
     if (!autoScroll || !messagesContainer) {
-      untrack(() => { previousMessageCount = currentCount; });
+      untrack(() => {
+        previousMessageCount = currentCount;
+      });
       return;
     }
 
     const hasNewMessage = currentCount > previousMessageCount;
-    untrack(() => { previousMessageCount = currentCount; });
+    untrack(() => {
+      previousMessageCount = currentCount;
+    });
 
-    if (!hasNewMessage || userScrolledUp || isFormFocused()) return;
+    // Don't chase the bottom while a backward page is landing — loadOlder owns
+    // scroll position during a prepend and anchors it to the message in view.
+    if (!hasNewMessage || userScrolledUp || isFormFocused() || isLoadingOlder) return;
 
     tick().then(() => {
       if (messagesContainer) {
@@ -171,7 +226,13 @@
   });
 </script>
 
-<div class="message-stream" role="log" aria-label={m().playground.controlPanel.messageStreamLabel} bind:this={messagesContainer} onscroll={handleScroll}>
+<div
+  class="message-stream"
+  role="log"
+  aria-label={m().playground.controlPanel.messageStreamLabel}
+  bind:this={messagesContainer}
+  onscroll={handleScroll}
+>
   {#if showWelcome}
     {#if welcome}
       {@render welcome()}
@@ -181,6 +242,12 @@
       {@render emptySession()}
     {/if}
   {:else}
+    <div bind:this={topSentinel} class="message-stream__sentinel" aria-hidden="true"></div>
+    {#if isLoadingOlder}
+      <div class="message-stream__loading-older" aria-hidden="true">
+        <span class="message-stream__loading-older-spinner"></span>
+      </div>
+    {/if}
     {#each displayMessages as message, index (message.id)}
       {#if isInterruptMessage(message)}
         {@const interrupt = getInterruptForMessage(message)}
@@ -219,6 +286,7 @@
 
 <style>
   .message-stream {
+    position: relative;
     flex: 1;
     min-height: 0;
     overflow-y: auto;
@@ -232,6 +300,12 @@
     container-name: fd-message-stream;
   }
 
+  /* Zero-height marker the IntersectionObserver watches to trigger
+     backward pagination as it nears the top of the scroll area. */
+  .message-stream__sentinel {
+    height: 0;
+  }
+
   /* Shared fade-in for newly-appended message rows. `-global-` so
      ChatBubble.svelte / MessageCard.svelte can reference it without
      redeclaring. Honour reduced-motion in the same place. */
@@ -264,24 +338,35 @@
       display: grid;
       grid-template-columns: auto 1fr auto;
       grid-template-areas:
-        "level body      body"
-        ".     tags      timestamp";
+        'level body      body'
+        '.     tags      timestamp';
       align-items: baseline;
       row-gap: var(--fd-space-2xs);
       column-gap: var(--fd-space-sm);
     }
-    :global(.log-row__level) { grid-area: level; }
-    :global(.log-row__body) { grid-area: body; min-width: 0; }
-    :global(.log-row__tags) { grid-area: tags; justify-self: start; }
-    :global(.log-row__timestamp) { grid-area: timestamp; justify-self: end; }
+    :global(.log-row__level) {
+      grid-area: level;
+    }
+    :global(.log-row__body) {
+      grid-area: body;
+      min-width: 0;
+    }
+    :global(.log-row__tags) {
+      grid-area: tags;
+      justify-self: start;
+    }
+    :global(.log-row__timestamp) {
+      grid-area: timestamp;
+      justify-self: end;
+    }
   }
 
   @container fd-message-stream (max-width: 480px) {
     :global(.log-row) {
       grid-template-columns: auto 1fr;
       grid-template-areas:
-        "level body"
-        ".     tags";
+        'level body'
+        '.     tags';
     }
     :global(.log-row__text) {
       flex-basis: 100%;
@@ -307,6 +392,42 @@
     }
   }
 
+  /* Overlay, out of flow — its presence must not shift message layout, or it
+     would corrupt the scroll anchoring in loadOlder(). */
+  .message-stream__loading-older {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--fd-space-sm) 0;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .message-stream__loading-older-spinner {
+    width: var(--fd-space-lg);
+    height: var(--fd-space-lg);
+    border: 2px solid var(--fd-border-strong);
+    border-top-color: transparent;
+    border-radius: var(--fd-radius-full);
+    animation: message-stream-spin 0.8s linear infinite;
+  }
+
+  @keyframes message-stream-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .message-stream__loading-older-spinner {
+      animation: none;
+    }
+  }
+
   .message-stream__typing {
     display: flex;
     align-items: center;

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

@@ -17,6 +17,11 @@ interface Props {
     compactSystemMessages?: boolean;
     /** Called when an interrupt is resolved */
     onInterruptResolved?: () => void;
+    /**
+     * Called when the user scrolls near the top, to load older messages.
+     * When omitted, scroll-up paging is disabled (e.g. view-only surfaces).
+     */
+    onLoadOlder?: () => void | Promise<void>;
     /** Custom render for the no-session welcome state */
     welcome?: Snippet;
     /** Custom render for the empty-session state */

package/dist/components/playground/MessageTagChip.svelte

@@ -66,12 +66,30 @@
   }
 
   /* Color hooks — one line per color. To add a color, add a row here. */
-  .message-tag-chip[data-color='muted']   { --chip-c: var(--fd-muted-foreground); --chip-c-on: var(--fd-background); }
-  .message-tag-chip[data-color='primary'] { --chip-c: var(--fd-primary);          --chip-c-on: var(--fd-primary-foreground); }
-  .message-tag-chip[data-color='success'] { --chip-c: var(--fd-success, oklch(55% 0.15 145)); --chip-c-on: white; }
-  .message-tag-chip[data-color='warning'] { --chip-c: var(--fd-warning);          --chip-c-on: var(--fd-background); }
-  .message-tag-chip[data-color='error']   { --chip-c: var(--fd-error);            --chip-c-on: white; }
-  .message-tag-chip[data-color='info']    { --chip-c: var(--fd-info);             --chip-c-on: var(--fd-background); }
+  .message-tag-chip[data-color='muted'] {
+    --chip-c: var(--fd-muted-foreground);
+    --chip-c-on: var(--fd-background);
+  }
+  .message-tag-chip[data-color='primary'] {
+    --chip-c: var(--fd-primary);
+    --chip-c-on: var(--fd-primary-foreground);
+  }
+  .message-tag-chip[data-color='success'] {
+    --chip-c: var(--fd-success, oklch(55% 0.15 145));
+    --chip-c-on: white;
+  }
+  .message-tag-chip[data-color='warning'] {
+    --chip-c: var(--fd-warning);
+    --chip-c-on: var(--fd-background);
+  }
+  .message-tag-chip[data-color='error'] {
+    --chip-c: var(--fd-error);
+    --chip-c-on: white;
+  }
+  .message-tag-chip[data-color='info'] {
+    --chip-c: var(--fd-info);
+    --chip-c-on: var(--fd-background);
+  }
 
   /* Variants — derive bg/fg/border from --chip-c. */
   .message-tag-chip[data-variant='subtle'] {

package/dist/components/playground/PipelineKanbanView.svelte

@@ -2,10 +2,34 @@
   import type { KanbanColumnDef } from '../../types/index.js';
 
   const DEFAULT_COLUMNS: KanbanColumnDef[] = [
-    { key: 'pending',     label: 'Pending',     statuses: ['idle', 'pending'],                    icon: 'mdi:clock-outline',        color: 'var(--fd-muted-foreground)' },
-    { key: 'in_progress', label: 'In Progress', statuses: ['running', 'paused', 'interrupted'],   icon: 'mdi:play-circle-outline',  color: 'var(--fd-warning)'          },
-    { key: 'done',        label: 'Done',        statuses: ['completed', 'skipped'],               icon: 'mdi:check-circle',         color: 'var(--fd-success)'          },
-    { key: 'failed',      label: 'Failed',      statuses: ['failed', 'cancelled'],                icon: 'mdi:alert-circle',         color: 'var(--fd-error)'            },
+    {
+      key: 'pending',
+      label: 'Pending',
+      statuses: ['idle', 'pending'],
+      icon: 'mdi:clock-outline',
+      color: 'var(--fd-muted-foreground)'
+    },
+    {
+      key: 'in_progress',
+      label: 'In Progress',
+      statuses: ['running', 'paused', 'interrupted'],
+      icon: 'mdi:play-circle-outline',
+      color: 'var(--fd-warning)'
+    },
+    {
+      key: 'done',
+      label: 'Done',
+      statuses: ['completed', 'skipped'],
+      icon: 'mdi:check-circle',
+      color: 'var(--fd-success)'
+    },
+    {
+      key: 'failed',
+      label: 'Failed',
+      statuses: ['failed', 'cancelled'],
+      icon: 'mdi:alert-circle',
+      color: 'var(--fd-error)'
+    }
   ];
 </script>
 
@@ -13,7 +37,11 @@
   import { onMount } from 'svelte';
   import Icon from '@iconify/svelte';
   import { createPipelineDataFetcher, resolveStatus } from './pipelineViewUtils.svelte.js';
-  import { getStatusLabel, getStatusTextColor, getStatusBackgroundColor } from '../../utils/nodeStatus.js';
+  import {
+    getStatusLabel,
+    getStatusTextColor,
+    getStatusBackgroundColor
+  } from '../../utils/nodeStatus.js';
   import type { NodeStatus } from './pipelineViewUtils.svelte.js';
   import type { Workflow, WorkflowNode } from '../../types/index.js';
   import type { EndpointConfig } from '../../config/endpoints.js';
@@ -27,6 +55,7 @@
 
   let { pipelineId, workflow, endpointConfig, refreshTrigger = 0 }: Props = $props();
 
+  // svelte-ignore state_referenced_locally — endpointConfig is consumed once to build the API client; it must be stable
   const fetcher = createPipelineDataFetcher(() => pipelineId, endpointConfig);
 
   $effect(() => {
@@ -88,10 +117,7 @@
           style="--col-color: {col.color ?? 'var(--fd-muted-foreground)'}"
         >
           <div class="pipeline-kanban__column-header">
-            <Icon
-              icon={col.icon ?? 'mdi:circle-outline'}
-              class="pipeline-kanban__col-icon"
-            />
+            <Icon icon={col.icon ?? 'mdi:circle-outline'} class="pipeline-kanban__col-icon" />
             <span class="pipeline-kanban__col-label">{col.label}</span>
             <span class="pipeline-kanban__col-count">{items.length}</span>
           </div>
@@ -104,8 +130,11 @@
                     {#if showStatusPill}
                       <span
                         class="pipeline-kanban__card-status"
-                        style="color: {getStatusTextColor(status)}; background-color: {getStatusBackgroundColor(status)}"
-                      >{getStatusLabel(status)}</span>
+                        style="color: {getStatusTextColor(
+                          status
+                        )}; background-color: {getStatusBackgroundColor(status)}"
+                        >{getStatusLabel(status)}</span
+                      >
                     {/if}
                   </div>
                   <span class="pipeline-kanban__card-type">{node.data.metadata.id}</span>

package/dist/components/playground/PipelinePanel.svelte

@@ -2,7 +2,7 @@
   const VIEW_MODE_KEY = 'fd-pipeline-view-mode';
   const BUILTIN_VIEWS = ['graph', 'kanban', 'table'] as const;
   // `string & {}` preserves autocomplete for built-in values while still accepting arbitrary strings from extraViews.
-  type ViewMode = typeof BUILTIN_VIEWS[number] | (string & {});
+  type ViewMode = (typeof BUILTIN_VIEWS)[number] | (string & {});
 </script>
 
 <script lang="ts">
@@ -177,6 +177,7 @@
             class="pipeline-panel__run-popover"
             bind:this={runPopoverEl}
             role="menu"
+            tabindex="-1"
             onkeydown={(e) => {
               if (e.key === 'Escape') {
                 runDropdownOpen = false;
@@ -415,6 +416,9 @@
     right: 0;
     z-index: 50;
     min-width: 160px;
+    max-width: 320px;
+    max-height: min(60vh, 420px);
+    overflow-y: auto;
     padding: var(--fd-space-xs);
     background-color: var(--fd-background);
     border: 1px solid var(--fd-border);

package/dist/components/playground/PipelineTableView.svelte

@@ -64,6 +64,7 @@
     statusData: NodeStatusData | undefined;
   }
 
+  // svelte-ignore state_referenced_locally — endpointConfig is consumed once to build the API client; it must be stable
   const fetcher = createPipelineDataFetcher(() => pipelineId, endpointConfig);
 
   $effect(() => {
@@ -137,14 +138,24 @@
                 {#if expandable}
                   <Icon
                     icon="mdi:chevron-right"
-                    class="pipeline-table__chevron {expanded ? 'pipeline-table__chevron--open' : ''}"
+                    class="pipeline-table__chevron {expanded
+                      ? 'pipeline-table__chevron--open'
+                      : ''}"
                   />
                 {/if}
               </td>
-              <td class="pipeline-table__td pipeline-table__td--label" title={row.node.data.label}>{row.node.data.label}</td>
-              <td class="pipeline-table__td pipeline-table__td--muted" title={row.node.data.metadata.id}>{row.node.data.metadata.id}</td>
+              <td class="pipeline-table__td pipeline-table__td--label" title={row.node.data.label}
+                >{row.node.data.label}</td
+              >
+              <td
+                class="pipeline-table__td pipeline-table__td--muted"
+                title={row.node.data.metadata.id}>{row.node.data.metadata.id}</td
+              >
               <td class="pipeline-table__td">
-                <span class="pipeline-table__status" style="color: {getStatusTextColor(row.status)}">
+                <span
+                  class="pipeline-table__status"
+                  style="color: {getStatusTextColor(row.status)}"
+                >
                   <Icon
                     icon={STATUS_ICON[row.status] ?? 'mdi:circle-outline'}
                     class="pipeline-table__status-icon"
@@ -152,7 +163,9 @@
                   {row.status}
                 </span>
               </td>
-              <td class="pipeline-table__td pipeline-table__td--id" title={row.node.id}>{row.node.id}</td>
+              <td class="pipeline-table__td pipeline-table__td--id" title={row.node.id}
+                >{row.node.id}</td
+              >
             </tr>
             {#if expanded && expandable}
               <tr class="pipeline-table__detail-row">
@@ -320,7 +333,8 @@
   }
 
   .pipeline-table__detail-cell {
-    padding: var(--fd-space-sm) var(--fd-space-md) var(--fd-space-sm) calc(1.5rem + var(--fd-space-md));
+    padding: var(--fd-space-sm) var(--fd-space-md) var(--fd-space-sm)
+      calc(1.5rem + var(--fd-space-md));
     border-bottom: 1px solid var(--fd-border);
   }
 

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}