@flowdrop/flowdrop 1.13.0 → 1.15.0

package/dist/components/nodes/AtomNode.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { ConfigValues, NodeMetadata, NodeExtensions } from '../../types/index.js';
+interface AtomNodeData {
+    label: string;
+    config: ConfigValues;
+    metadata: NodeMetadata;
+    nodeId?: string;
+    extensions?: NodeExtensions;
+    onConfigOpen?: (node: {
+        id: string;
+        type: string;
+        data: {
+            label: string;
+            config: ConfigValues;
+            metadata: NodeMetadata;
+        };
+    }) => void;
+}
+interface Props {
+    data: AtomNodeData;
+    selected?: boolean;
+    isProcessing?: boolean;
+    isError?: boolean;
+}
+declare const AtomNode: import("svelte").Component<Props, {}, "">;
+type AtomNode = ReturnType<typeof AtomNode>;
+export default AtomNode;

package/dist/components/playground/ChatBubble.svelte

@@ -10,12 +10,7 @@
   import HierarchyTrail from './HierarchyTrail.svelte';
   import MessageTagStrip from './MessageTagStrip.svelte';
   import MessageMarkdown from './MessageMarkdown.svelte';
-  import {
-    formatDuration,
-    formatTimestamp,
-    getRoleIcon,
-    getRoleLabel
-  } from './messageDisplay.js';
+  import { formatDuration, formatTimestamp, getRoleIcon, getRoleLabel } from './messageDisplay.js';
   import { m } from '../../messages/index.js';
 
   interface Props {
@@ -55,7 +50,8 @@
           class="message-bubble__timestamp"
           datetime={message.timestamp}
           aria-label="sent at {formatTimestamp(message.timestamp)}"
-        >{formatTimestamp(message.timestamp)}</time>
+          >{formatTimestamp(message.timestamp)}</time
+        >
       {/if}
     </div>
 
@@ -157,7 +153,9 @@
     background-color: var(--fd-card);
     border: 1px solid var(--fd-border);
     color: var(--fd-card-foreground);
-    box-shadow: 0 1px 3px 0 oklch(0% 0 0 / 0.06), 0 1px 2px -1px oklch(0% 0 0 / 0.04);
+    box-shadow:
+      0 1px 3px 0 oklch(0% 0 0 / 0.06),
+      0 1px 2px -1px oklch(0% 0 0 / 0.04);
     border-bottom-left-radius: var(--fd-radius-sm);
   }
 

package/dist/components/playground/ChatInput.svelte

@@ -58,23 +58,27 @@
   let runEnabled = $state(true);
 
   let inputValue = $state('');
-  let inputField: HTMLTextAreaElement | undefined;
+  let inputField: HTMLTextAreaElement | undefined = $state();
 
   // Count of enableRun messages seen so far — plain let, not $state.
   // Written with untrack to make the bookkeeping intent explicit.
   let seenEnableRunCount = 0;
 
   $effect(() => {
-    const count = getMessages().filter(m => hasEnableRunFlag(m.metadata)).length;
+    const count = getMessages().filter((m) => hasEnableRunFlag(m.metadata)).length;
     if (count > seenEnableRunCount) {
-      untrack(() => { seenEnableRunCount = count; });
+      untrack(() => {
+        seenEnableRunCount = count;
+      });
       runEnabled = true;
     }
   });
 
   $effect(() => {
     if (getCurrentSession()?.id) {
-      untrack(() => { seenEnableRunCount = 0; });
+      untrack(() => {
+        seenEnableRunCount = 0;
+      });
       runEnabled = true;
     }
   });
@@ -87,7 +91,9 @@
     if (wasExecuting && !nowExecuting && inputField) {
       tick().then(() => inputField?.focus({ preventScroll: true }));
     }
-    untrack(() => { wasExecuting = nowExecuting; });
+    untrack(() => {
+      wasExecuting = nowExecuting;
+    });
   });
 
   function handleSend(): void {

package/dist/components/playground/ControlPanel.svelte

@@ -159,35 +159,37 @@
           </button>
           {#if getSessions().length > 0}
             <div class="control-panel__session-popover-divider"></div>
-            {#each getSessions() as session (session.id)}
-              {@const isActive = getCurrentSession()?.id === session.id}
-              <div class="control-panel__session-popover-row">
-                <button
-                  type="button"
-                  role="menuitem"
-                  class="control-panel__session-popover-item"
-                  class:control-panel__session-popover-item--active={isActive}
-                  onclick={() => handleSelect(session.id)}
-                >
-                  {#if isActive}
-                    <Icon icon="mdi:check" class="control-panel__session-popover-check" />
-                  {:else}
-                    <Icon icon="mdi:message-outline" />
-                  {/if}
-                  <span>{session.name}</span>
-                </button>
-                <button
-                  type="button"
-                  role="menuitem"
-                  class="control-panel__session-popover-delete"
-                  onclick={(e) => handleDelete(e, session.id)}
-                  title={cp.deleteSession}
-                  aria-label={cp.deleteSession}
-                >
-                  <Icon icon="mdi:delete-outline" />
-                </button>
-              </div>
-            {/each}
+            <div class="control-panel__session-popover-list">
+              {#each getSessions() as session (session.id)}
+                {@const isActive = getCurrentSession()?.id === session.id}
+                <div class="control-panel__session-popover-row">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    class="control-panel__session-popover-item"
+                    class:control-panel__session-popover-item--active={isActive}
+                    onclick={() => handleSelect(session.id)}
+                  >
+                    {#if isActive}
+                      <Icon icon="mdi:check" class="control-panel__session-popover-check" />
+                    {:else}
+                      <Icon icon="mdi:message-outline" />
+                    {/if}
+                    <span>{session.name}</span>
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    class="control-panel__session-popover-delete"
+                    onclick={(e) => handleDelete(e, session.id)}
+                    title={cp.deleteSession}
+                    aria-label={cp.deleteSession}
+                  >
+                    <Icon icon="mdi:delete-outline" />
+                  </button>
+                </div>
+              {/each}
+            </div>
           {/if}
         </div>
       {/if}
@@ -333,6 +335,9 @@
     z-index: 50;
     min-width: 220px;
     max-width: 300px;
+    max-height: min(60vh, 420px);
+    display: flex;
+    flex-direction: column;
     padding: var(--fd-space-xs);
     background-color: var(--fd-background);
     border: 1px solid var(--fd-border);
@@ -344,6 +349,13 @@
     height: 1px;
     background-color: var(--fd-border-muted);
     margin: var(--fd-space-xs) 0;
+    flex-shrink: 0;
+  }
+
+  .control-panel__session-popover-list {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
   }
 
   .control-panel__session-popover-row {
@@ -396,6 +408,7 @@
     color: var(--fd-primary);
     font-weight: 500;
     width: 100%;
+    flex: 0 0 auto;
   }
 
   .control-panel__session-popover-item--new :global(svg) {

package/dist/components/playground/ExecutionConsole.svelte

@@ -22,6 +22,8 @@
     onInterruptResolved?: () => void;
     /** Optional callback that, when provided, shows a "New session" CTA in the welcome state */
     onCreateSession?: () => void;
+    /** Called when the user scrolls near the top to load older messages */
+    onLoadOlder?: () => void | Promise<void>;
   }
 
   let {
@@ -31,7 +33,8 @@
     allowLogs = true,
     compactSystemMessages = true,
     onInterruptResolved,
-    onCreateSession
+    onCreateSession,
+    onLoadOlder
   }: Props = $props();
 
   const ec = $derived(m().playground.executionConsole);
@@ -50,6 +53,7 @@
     {allowLogs}
     {compactSystemMessages}
     {onInterruptResolved}
+    {onLoadOlder}
     welcome={welcomeState}
     emptySession={readyState}
   />

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

@@ -8,6 +8,8 @@ interface Props {
     onInterruptResolved?: () => void;
     /** Optional callback that, when provided, shows a "New session" CTA in the welcome state */
     onCreateSession?: () => void;
+    /** Called when the user scrolls near the top to load older messages */
+    onLoadOlder?: () => void | Promise<void>;
 }
 declare const ExecutionConsole: import("svelte").Component<Props, {}, "">;
 type ExecutionConsole = ReturnType<typeof ExecutionConsole>;

package/dist/components/playground/ExecutionList.svelte

@@ -119,8 +119,13 @@
   }
 
   @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.4; }
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
   }
 
   :global(.execution-list__status-icon) {

package/dist/components/playground/LogRow.svelte

@@ -55,7 +55,8 @@
       class="log-row__timestamp"
       datetime={message.timestamp}
       aria-label="sent at {formatTimestamp(message.timestamp)}"
-    >{formatTimestamp(message.timestamp)}</time>
+      >{formatTimestamp(message.timestamp)}</time
+    >
   {/if}
 </div>
 

package/dist/components/playground/MessageBubble.svelte

@@ -10,10 +10,7 @@
 -->
 
 <script lang="ts">
-  import {
-    resolveMessageDisplay,
-    type PlaygroundMessage
-  } from '../../types/playground.js';
+  import { resolveMessageDisplay, type PlaygroundMessage } from '../../types/playground.js';
   import ChatBubble from './ChatBubble.svelte';
   import LogRow from './LogRow.svelte';
   import MessageNotice from './MessageNotice.svelte';

package/dist/components/playground/MessageCard.svelte

@@ -43,7 +43,8 @@
           class="message-card__timestamp"
           datetime={message.timestamp}
           aria-label="sent at {formatTimestamp(message.timestamp)}"
-        >{formatTimestamp(message.timestamp)}</time>
+          >{formatTimestamp(message.timestamp)}</time
+        >
       {/if}
     </header>
   {/if}

package/dist/components/playground/MessageMarkdown.svelte

@@ -72,9 +72,15 @@
     margin-top: 0;
   }
 
-  .message-markdown :global(h1) { font-size: var(--fd-text-xl); }
-  .message-markdown :global(h2) { font-size: var(--fd-text-lg); }
-  .message-markdown :global(h3) { font-size: var(--fd-text-base); }
+  .message-markdown :global(h1) {
+    font-size: var(--fd-text-xl);
+  }
+  .message-markdown :global(h2) {
+    font-size: var(--fd-text-lg);
+  }
+  .message-markdown :global(h3) {
+    font-size: var(--fd-text-base);
+  }
 
   .message-markdown :global(ul),
   .message-markdown :global(ol) {
@@ -155,6 +161,10 @@
     font-weight: 600;
   }
 
-  .message-markdown :global(strong) { font-weight: 600; }
-  .message-markdown :global(em) { font-style: italic; }
+  .message-markdown :global(strong) {
+    font-weight: 600;
+  }
+  .message-markdown :global(em) {
+    font-style: italic;
+  }
 </style>

package/dist/components/playground/MessageNotice.svelte

@@ -42,7 +42,8 @@
       class="system-notice__timestamp"
       datetime={message.timestamp}
       aria-label="sent at {formatTimestamp(message.timestamp)}"
-    >{formatTimestamp(message.timestamp)}</time>
+      >{formatTimestamp(message.timestamp)}</time
+    >
   {/if}
 </div>
 

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'] {