@flowdrop/flowdrop 1.12.0 → 1.14.0

package/dist/components/playground/LogRow.svelte

@@ -0,0 +1,179 @@
+<!--
+  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'
+    }
+  }}
+/>