@flowdrop/flowdrop 1.12.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)}
@@ -189,6 +256,8 @@
             {interrupt}
             showTimestamp={showTimestamps}
             onResolved={onInterruptResolved}
+            hierarchy={message.hierarchy}
+            tags={message.tags}
           />
         {/if}
       {:else}
@@ -217,10 +286,146 @@
 
 <style>
   .message-stream {
+    position: relative;
     flex: 1;
     min-height: 0;
     overflow-y: auto;
     padding: var(--fd-space-3xl);
+
+    /* Establish a containment context so message rows can adapt to the
+       stream's actual width (not the viewport's). The matching @container
+       queries (for .log-row) live below in the same <style> block, so
+       renaming the container only requires editing this file. */
+    container-type: inline-size;
+    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. */
+  @keyframes -global-fd-fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :global(.message-bubble),
+    :global(.message-card) {
+      animation: none;
+    }
+  }
+
+  /* Container-query reshaping for log rows. Lives next to the
+     container-name declaration so the coupling is local — selectors are
+     :global because .log-row is a sibling component's class.
+
+       Tier 1 (≤720px): two rows — level/body, then tags/timestamp.
+       Tier 2 (≤480px): collapse further; body forces internal line break. */
+  @container fd-message-stream (max-width: 720px) {
+    :global(.log-row) {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      grid-template-areas:
+        '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;
+    }
+  }
+
+  @container fd-message-stream (max-width: 480px) {
+    :global(.log-row) {
+      grid-template-columns: auto 1fr;
+      grid-template-areas:
+        'level body'
+        '.     tags';
+    }
+    :global(.log-row__text) {
+      flex-basis: 100%;
+      min-width: 0;
+    }
+    :global(.log-row__timestamp) {
+      display: none;
+    }
+    /* Drop the source + node chips: source is implied by the level
+       colour, node duplicates the hierarchy trail's last entry. Keeping
+       them at this width forced each chip onto its own line and made
+       log rows 5–6 lines tall. */
+    :global(.log-row__source),
+    :global(.log-row__node) {
+      display: none;
+    }
+    /* Reclaim horizontal room by tightening the row's own padding —
+       can't shrink the stream's padding from inside its own
+       container query. */
+    :global(.log-row) {
+      padding-left: var(--fd-space-xs);
+      padding-right: var(--fd-space-xs);
+    }
+  }
+
+  /* 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 {
@@ -277,7 +482,7 @@
 
   @media (max-width: 640px) {
     .message-stream {
-      padding: var(--fd-space-xl);
+      padding: var(--fd-space-md) 0;
     }
   }
 </style>

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

@@ -0,0 +1,117 @@
+<!--
+  MessageTagChip Component
+
+  Renders a single server-emitted MessageTag as a compact chip. Semantic
+  color comes from tag.color, visual emphasis from tag.variant. Used by
+  MessageBubble and InterruptBubble.
+
+  Styling: a single base rule reads from CSS custom properties; one rule
+  per color sets --chip-c, one rule per variant sets bg/fg/border in terms
+  of --chip-c. Adding a color is one line.
+-->
+
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import type { MessageTag } from '../../types/playground.js';
+
+  interface Props {
+    tag: MessageTag;
+  }
+
+  let { tag }: Props = $props();
+
+  const color = $derived(tag.color ?? 'muted');
+  const variant = $derived(tag.variant ?? 'subtle');
+</script>
+
+<span
+  class="message-tag-chip"
+  data-color={color}
+  data-variant={variant}
+  aria-label={tag.type ? `${tag.type}: ${tag.label}` : undefined}
+>
+  {#if tag.icon}
+    <Icon icon={tag.icon} class="message-tag-chip__icon" aria-hidden="true" />
+  {/if}
+  <span class="message-tag-chip__label">{tag.label}</span>
+</span>
+
+<style>
+  .message-tag-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fd-space-3xs);
+    padding: 0 var(--fd-space-3xs);
+    border-radius: var(--fd-radius-sm);
+    font-family: var(--fd-font-mono);
+    font-size: var(--fd-text-2xs);
+    line-height: 1.4;
+    white-space: nowrap;
+    min-width: 0;
+    max-width: 100%;
+    background-color: var(--chip-bg);
+    color: var(--chip-fg);
+    border: 1px solid var(--chip-border, transparent);
+  }
+
+  .message-tag-chip__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .message-tag-chip :global(.message-tag-chip__icon) {
+    flex-shrink: 0;
+    font-size: 0.875em;
+    opacity: 0.8;
+  }
+
+  /* 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);
+  }
+
+  /* Variants — derive bg/fg/border from --chip-c. */
+  .message-tag-chip[data-variant='subtle'] {
+    --chip-bg: color-mix(in srgb, var(--chip-c) 14%, transparent);
+    --chip-fg: var(--chip-c);
+  }
+  .message-tag-chip[data-variant='subtle'][data-color='muted'] {
+    /* Muted is the only color we render against the design's --fd-muted
+       surface for legibility; the color-mix path would lose contrast. */
+    --chip-bg: var(--fd-muted);
+    --chip-fg: var(--fd-muted-foreground);
+  }
+  .message-tag-chip[data-variant='solid'] {
+    --chip-bg: var(--chip-c);
+    --chip-fg: var(--chip-c-on);
+  }
+  .message-tag-chip[data-variant='outline'] {
+    --chip-bg: transparent;
+    --chip-fg: var(--chip-c);
+    --chip-border: var(--chip-c);
+  }
+  .message-tag-chip[data-variant='outline'][data-color='muted'] {
+    --chip-border: var(--fd-border);
+  }
+</style>

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

@@ -0,0 +1,7 @@
+import type { MessageTag } from '../../types/playground.js';
+interface Props {
+    tag: MessageTag;
+}
+declare const MessageTagChip: import("svelte").Component<Props, {}, "">;
+type MessageTagChip = ReturnType<typeof MessageTagChip>;
+export default MessageTagChip;

package/dist/components/playground/MessageTagStrip.svelte

@@ -0,0 +1,37 @@
+<!--
+  MessageTagStrip Component
+
+  A flex-wrapped row of MessageTagChips. Encapsulates the layout the four
+  message variants used to copy individually.
+-->
+
+<script lang="ts">
+  import type { MessageTag } from '../../types/playground.js';
+  import MessageTagChip from './MessageTagChip.svelte';
+
+  interface Props {
+    tags: MessageTag[];
+  }
+
+  let { tags }: Props = $props();
+</script>
+
+{#if tags.length > 0}
+  <!-- No role/label — each chip is already labelled (via tag.type when set)
+       and a one-element group adds nothing for AT users. -->
+  <span class="message-tag-strip">
+    {#each tags as tag (tag.id)}
+      <MessageTagChip {tag} />
+    {/each}
+  </span>
+{/if}
+
+<style>
+  .message-tag-strip {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--fd-space-2xs);
+    min-width: 0;
+  }
+</style>

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

@@ -0,0 +1,7 @@
+import type { MessageTag } from '../../types/playground.js';
+interface Props {
+    tags: MessageTag[];
+}
+declare const MessageTagStrip: import("svelte").Component<Props, {}, "">;
+type MessageTagStrip = ReturnType<typeof MessageTagStrip>;
+export default MessageTagStrip;

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);
   }