@flowdrop/flowdrop 1.11.0 → 1.13.0

package/dist/components/playground/ExecutionConsole.svelte

@@ -0,0 +1,163 @@
+<!--
+  ExecutionConsole Component
+
+  The running workflow's runtime surface. Renders the message feed via
+  MessageStream and surfaces the flow's own UI (interrupts) inline during
+  execution. This is *not* a chat — it's the console where the flow speaks
+  to the user during a run. User-initiated commands live in ControlPanel.
+-->
+
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import MessageStream from './MessageStream.svelte';
+  import { m } from '../../messages/index.js';
+
+  interface Props {
+    showTimestamps?: boolean;
+    autoScroll?: boolean;
+    enableMarkdown?: boolean;
+    /** Whether log messages can appear when the user toggle is on. Defaults to true for the execution console. */
+    allowLogs?: boolean;
+    compactSystemMessages?: boolean;
+    onInterruptResolved?: () => void;
+    /** Optional callback that, when provided, shows a "New session" CTA in the welcome state */
+    onCreateSession?: () => void;
+  }
+
+  let {
+    showTimestamps = true,
+    autoScroll = true,
+    enableMarkdown = true,
+    allowLogs = true,
+    compactSystemMessages = true,
+    onInterruptResolved,
+    onCreateSession
+  }: Props = $props();
+
+  const ec = $derived(m().playground.executionConsole);
+</script>
+
+<section class="execution-console">
+  <header class="execution-console__header">
+    <Icon icon="mdi:console-line" class="execution-console__icon" />
+    <span class="execution-console__title">{ec.header}</span>
+  </header>
+
+  <MessageStream
+    {showTimestamps}
+    {autoScroll}
+    {enableMarkdown}
+    {allowLogs}
+    {compactSystemMessages}
+    {onInterruptResolved}
+    welcome={welcomeState}
+    emptySession={readyState}
+  />
+</section>
+
+{#snippet welcomeState()}
+  <div class="execution-console__placeholder">
+    <Icon icon="mdi:play-circle-outline" class="execution-console__placeholder-icon" />
+    <h2 class="execution-console__placeholder-title">{ec.noExecutionTitle}</h2>
+    <p class="execution-console__placeholder-text">{ec.noExecutionText}</p>
+    {#if onCreateSession}
+      <button type="button" class="execution-console__cta" onclick={onCreateSession}>
+        <Icon icon="mdi:plus" />
+        {ec.newSession}
+      </button>
+    {/if}
+  </div>
+{/snippet}
+
+{#snippet readyState()}
+  <div class="execution-console__placeholder">
+    <Icon icon="mdi:play-circle-outline" class="execution-console__placeholder-icon" />
+    <h2 class="execution-console__placeholder-title">{ec.readyTitle}</h2>
+    <p class="execution-console__placeholder-text">{ec.readyText}</p>
+  </div>
+{/snippet}
+
+<style>
+  .execution-console {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background-color: var(--fd-background);
+  }
+
+  .execution-console__header {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    padding: 0 var(--fd-space-xl);
+    height: var(--fd-playground-header-height);
+    min-height: var(--fd-playground-header-height);
+    border-bottom: 1px solid var(--fd-border);
+    flex-shrink: 0;
+  }
+
+  :global(.execution-console__icon) {
+    font-size: var(--fd-text-base);
+    color: var(--fd-muted-foreground);
+    flex-shrink: 0;
+  }
+
+  .execution-console__title {
+    font-size: var(--fd-text-sm);
+    font-weight: 600;
+    color: var(--fd-foreground);
+  }
+
+  .execution-console__placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+    padding: var(--fd-space-4xl);
+    color: var(--fd-muted-foreground);
+  }
+
+  :global(.execution-console__placeholder-icon) {
+    font-size: var(--fd-space-6xl);
+    color: var(--fd-border-strong);
+    margin-bottom: var(--fd-space-xl);
+  }
+
+  .execution-console__placeholder-title {
+    font-size: var(--fd-text-xl);
+    font-weight: 600;
+    color: var(--fd-foreground);
+    margin: 0 0 var(--fd-space-xs) 0;
+  }
+
+  .execution-console__placeholder-text {
+    font-size: var(--fd-text-sm);
+    color: var(--fd-muted-foreground);
+    margin: 0;
+    max-width: 360px;
+  }
+
+  .execution-console__cta {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    margin-top: var(--fd-space-2xl);
+    padding: var(--fd-space-sm) var(--fd-space-xl);
+    border: none;
+    border-radius: var(--fd-radius-md);
+    background: var(--fd-primary);
+    color: var(--fd-primary-foreground);
+    font-size: var(--fd-text-base);
+    font-weight: 500;
+    cursor: pointer;
+    transition: opacity var(--fd-transition-fast);
+  }
+
+  .execution-console__cta:hover {
+    opacity: 0.9;
+  }
+</style>

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

@@ -0,0 +1,14 @@
+interface Props {
+    showTimestamps?: boolean;
+    autoScroll?: boolean;
+    enableMarkdown?: boolean;
+    /** Whether log messages can appear when the user toggle is on. Defaults to true for the execution console. */
+    allowLogs?: boolean;
+    compactSystemMessages?: boolean;
+    onInterruptResolved?: () => void;
+    /** Optional callback that, when provided, shows a "New session" CTA in the welcome state */
+    onCreateSession?: () => void;
+}
+declare const ExecutionConsole: import("svelte").Component<Props, {}, "">;
+type ExecutionConsole = ReturnType<typeof ExecutionConsole>;
+export default ExecutionConsole;

package/dist/components/playground/HierarchyTrail.svelte

@@ -0,0 +1,88 @@
+<!--
+  HierarchyTrail Component
+
+  Renders a chevron-separated path of MessageHierarchyItem entries. The
+  path is a *display*, not a list users navigate, so the SR announcement
+  comes entirely from the wrapper's aria-label (built from the labels of
+  the items themselves) and the visible chips are hidden from AT to avoid
+  the path being announced twice.
+-->
+
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import type { MessageHierarchyItem } from '../../types/playground.js';
+  import { m } from '../../messages/index.js';
+
+  interface Props {
+    items: MessageHierarchyItem[];
+  }
+
+  let { items }: Props = $props();
+
+  const ariaLabel = $derived.by(() => {
+    const path = items.map((i) => i.label).join(' / ');
+    return m().playground.messageAnnotations.hierarchyOf({ path });
+  });
+</script>
+
+{#if items.length > 0}
+  <span class="hierarchy-trail" aria-label={ariaLabel}>
+    {#each items as item (item.id)}
+      <span class="hierarchy-trail__item" aria-hidden="true">
+        {#if item.icon}
+          <Icon icon={item.icon} class="hierarchy-trail__icon" />
+        {/if}
+        <span class="hierarchy-trail__label">{item.label}</span>
+      </span>
+    {/each}
+  </span>
+{/if}
+
+<style>
+  .hierarchy-trail {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--fd-space-3xs);
+    font-size: var(--fd-text-2xs);
+    color: var(--fd-muted-foreground);
+    min-width: 0;
+  }
+
+  .hierarchy-trail__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fd-space-3xs);
+    min-width: 0;
+  }
+
+  /* Chevron separator between items, drawn as a pseudo-element so it
+     doesn't enter the markup (and so it never appears to AT — the items
+     are already aria-hidden, but belt-and-braces). U+203A SINGLE
+     RIGHT-POINTING ANGLE QUOTATION MARK matches mdi:chevron-right
+     closely enough without a second iconify dependency. */
+  .hierarchy-trail__item:not(:last-child)::after {
+    content: '\203A';
+    margin-inline-start: var(--fd-space-3xs);
+    opacity: 0.5;
+  }
+
+  .hierarchy-trail__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 8rem;
+  }
+
+  @media (max-width: 640px) {
+    .hierarchy-trail__label {
+      max-width: 5rem;
+    }
+  }
+
+  .hierarchy-trail :global(.hierarchy-trail__icon) {
+    flex-shrink: 0;
+    font-size: 0.875em;
+    opacity: 0.7;
+  }
+</style>

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

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

package/dist/components/playground/LogRow.svelte

@@ -0,0 +1,178 @@
+<!--
+  LogRow — dense terminal-style entry for log messages.
+  Width-based reshaping is driven by `@container fd-message-stream` rules
+  declared in MessageStream.svelte (the file that also sets the container).
+-->
+
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import type { PlaygroundMessage } from '../../types/playground.js';
+  import HierarchyTrail from './HierarchyTrail.svelte';
+  import MessageTagStrip from './MessageTagStrip.svelte';
+  import { formatTimestamp, getLogLevelIcon } from './messageDisplay.js';
+
+  interface Props {
+    message: PlaygroundMessage;
+    showTimestamp?: boolean;
+  }
+
+  let { message, showTimestamp = true }: Props = $props();
+
+  const level = $derived(message.metadata?.level);
+  const hierarchy = $derived(message.hierarchy ?? []);
+  const tags = $derived(message.tags ?? []);
+</script>
+
+<div
+  class="log-row"
+  class:log-row--error={level === 'error'}
+  class:log-row--warning={level === 'warning'}
+  class:log-row--debug={level === 'debug'}
+  aria-label="{level ?? 'info'} log{message.metadata?.nodeLabel
+    ? ` from ${message.metadata.nodeLabel}`
+    : ''}"
+>
+  <div class="log-row__level" aria-hidden="true">
+    <Icon icon={getLogLevelIcon(level)} />
+  </div>
+  <div class="log-row__body">
+    {#if message.metadata?.source}
+      <span class="log-row__source">{message.metadata.source}</span>
+    {/if}
+    <HierarchyTrail items={hierarchy} />
+    {#if message.metadata?.nodeLabel ?? message.nodeId}
+      <span class="log-row__node">{message.metadata?.nodeLabel ?? message.nodeId}</span>
+    {/if}
+    <span class="log-row__text">{message.content}</span>
+  </div>
+  {#if tags.length > 0}
+    <span class="log-row__tags">
+      <MessageTagStrip {tags} />
+    </span>
+  {/if}
+  {#if showTimestamp}
+    <time
+      class="log-row__timestamp"
+      datetime={message.timestamp}
+      aria-label="sent at {formatTimestamp(message.timestamp)}"
+    >{formatTimestamp(message.timestamp)}</time>
+  {/if}
+</div>
+
+<style>
+  .log-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--fd-space-sm);
+    padding: 0.1875rem var(--fd-space-xl);
+    border-left: 2px solid var(--fd-info);
+    margin: 1px 0;
+    font-family: var(--fd-font-mono);
+    font-size: var(--fd-text-xs);
+    color: var(--fd-muted-foreground);
+    line-height: var(--fd-leading-normal);
+    background-color: transparent;
+    min-width: 0;
+  }
+
+  .log-row:hover {
+    background-color: var(--fd-muted);
+  }
+
+  .log-row--error {
+    border-left-color: var(--fd-error);
+    color: var(--fd-error);
+  }
+
+  .log-row--warning {
+    border-left-color: var(--fd-warning);
+    color: var(--fd-warning);
+  }
+
+  .log-row--debug {
+    border-left-color: var(--fd-border-strong);
+    color: var(--fd-border-strong);
+  }
+
+  .log-row__level {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    font-size: var(--fd-text-sm);
+    opacity: 0.7;
+  }
+
+  .log-row--error .log-row__level,
+  .log-row--warning .log-row__level {
+    opacity: 1;
+  }
+
+  .log-row__body {
+    flex: 1 1 12rem;
+    min-width: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--fd-space-sm);
+    overflow: hidden;
+  }
+
+  .log-row__source {
+    flex-shrink: 0;
+    font-size: 0.6rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--fd-muted-foreground);
+    opacity: 0.6;
+    background-color: var(--fd-muted);
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-sm);
+    padding: 0 0.25rem;
+    line-height: 1.4;
+  }
+
+  .log-row__node {
+    flex-shrink: 0;
+    font-weight: 600;
+    color: var(--fd-foreground);
+    opacity: 0.5;
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .log-row__text {
+    flex: 1;
+    min-width: 0;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  .log-row__timestamp {
+    flex-shrink: 0;
+    font-size: 0.625rem;
+    color: var(--fd-border-strong);
+    opacity: 0.8;
+  }
+
+  /* Wrapper around the tag strip. Owns its grid-area in the @container
+     queries (see MessageStream.svelte) without those rules reaching into
+     MessageTagStrip's scope. inline-flex so the strip lays out naturally
+     in the default wide layout. */
+  .log-row__tags {
+    display: inline-flex;
+    min-width: 0;
+  }
+
+  @media (max-width: 640px) {
+    .log-row {
+      padding: 0.1875rem var(--fd-space-md);
+    }
+
+    .log-row__source,
+    .log-row__node {
+      font-size: 0.55rem;
+    }
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { PlaygroundMessage } from '../../types/playground.js';
+interface Props {
+    message: PlaygroundMessage;
+    showTimestamp?: boolean;
+}
+declare const LogRow: import("svelte").Component<Props, {}, "">;
+type LogRow = ReturnType<typeof LogRow>;
+export default LogRow;

package/dist/components/playground/MessageBubble.stories.svelte

@@ -10,6 +10,16 @@
       layout: 'padded'
     }
   });
+
+  const baseHierarchy = [
+    { id: 'demo-foreach-loop', label: 'ForEach Loop', icon: 'mdi:graph' },
+    { id: 'greeter-flow', label: 'Greeter', icon: 'mdi:hand-wave' }
+  ];
+
+  const sampleTags = [
+    { id: 'run', label: 'Run #3', icon: 'mdi:play-circle', color: 'info', variant: 'subtle' },
+    { id: 'iteration', label: 'iter 1/5', color: 'muted', variant: 'subtle' }
+  ];
 </script>
 
 <Story
@@ -60,3 +70,82 @@
     }
   }}
 />
+
+<Story
+  name="With Tags"
+  args={{
+    message: {
+      id: 'msg-5',
+      role: 'assistant',
+      content: 'Iteration complete.',
+      timestamp: new Date().toISOString(),
+      tags: sampleTags
+    }
+  }}
+/>
+
+<Story
+  name="Tag Colors (each variant)"
+  args={{
+    message: {
+      id: 'msg-6',
+      role: 'log',
+      content: 'Showcasing semantic colors and visual variants',
+      timestamp: new Date().toISOString(),
+      tags: [
+        { id: 't-1', label: 'subtle.muted', color: 'muted', variant: 'subtle' },
+        { id: 't-2', label: 'subtle.success', color: 'success', variant: 'subtle' },
+        { id: 't-3', label: 'subtle.warning', color: 'warning', variant: 'subtle' },
+        { id: 't-4', label: 'subtle.error', color: 'error', variant: 'subtle' },
+        { id: 't-5', label: 'outline.primary', color: 'primary', variant: 'outline' },
+        { id: 't-6', label: 'solid.info', color: 'info', variant: 'solid' }
+      ]
+    }
+  }}
+/>
+
+<Story
+  name="With Hierarchy"
+  args={{
+    message: {
+      id: 'msg-7',
+      role: 'log',
+      content: 'greeter said hi to Apple',
+      timestamp: new Date().toISOString(),
+      hierarchy: baseHierarchy,
+      tags: [{ id: 'iter', label: 'iter 1/5', color: 'muted', variant: 'subtle' }]
+    }
+  }}
+/>
+
+<Story
+  name="Card Display"
+  args={{
+    message: {
+      id: 'msg-8',
+      role: 'log',
+      content:
+        'Greeter aborted because Cherry never reached the queue. The upstream loader returned a timeout after retrying twice — check the JSON Loader configuration for `retries` and `backoffMs`.',
+      timestamp: new Date().toISOString(),
+      display: 'card',
+      hierarchy: baseHierarchy,
+      tags: [
+        { id: 'iter', label: 'iter 3/5', color: 'muted', variant: 'subtle' },
+        { id: 'status', label: 'aborted', color: 'warning', variant: 'solid' }
+      ]
+    }
+  }}
+/>
+
+<Story
+  name="Server-driven display override (log as bubble)"
+  args={{
+    message: {
+      id: 'msg-9',
+      role: 'log',
+      content: 'This log message is rendered as a bubble because the server set display=bubble',
+      timestamp: new Date().toISOString(),
+      display: 'bubble'
+    }
+  }}
+/>