@flowdrop/flowdrop 1.12.0 → 1.13.0

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/PlaygroundStudio.svelte

@@ -156,6 +156,15 @@
       {@const executions = getCurrentSession()?.executions ?? []}
 
       <div class="playground-studio__pipeline" style="width: {pipelineWidth}px;">
+        <button
+          type="button"
+          class="playground-studio__back-to-chat"
+          aria-label="Back to chat"
+          onclick={pipelinePanelActions.toggle}
+        >
+          <Icon icon="mdi:arrow-left" aria-hidden="true" />
+          <span>Back to chat</span>
+        </button>
         <PipelinePanel
           pipelineId={activeId}
           workflow={resolvedWorkflow}
@@ -254,6 +263,13 @@
   .playground-studio__pipeline {
     overflow: hidden;
     flex-shrink: 0;
+    position: relative;
+  }
+
+  /* Mobile-only "back to chat" affordance. Hidden on wider viewports where
+     the ControlPanel's pipeline toggle remains reachable. */
+  .playground-studio__back-to-chat {
+    display: none;
   }
 
   /* Drag handle between the two panes */
@@ -375,4 +391,66 @@
   .playground-studio__retry-btn:hover {
     background-color: var(--fd-primary-hover);
   }
+
+  /* ============================================================
+     Mobile layout (< 768px)
+     Switch from side-by-side panes to one-at-a-time fullscreen.
+     The pipeline panel, when open, covers the chat. Users toggle
+     between them via the pipeline panel button. The resizer is
+     hidden — at this width there's nothing to resize.
+     ============================================================ */
+  @media (max-width: 768px) {
+    .playground-studio__pipeline {
+      /* Override the JS-driven width — take the whole row */
+      width: 100% !important;
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .playground-studio__resizer {
+      display: none;
+    }
+
+    /* When pipeline is open (chat is NOT solo), hide chat to give the
+       pipeline the full viewport. When pipeline closes, chat goes back
+       to full-width via the existing --solo class. */
+    .playground-studio__chat:not(.playground-studio__chat--solo) {
+      display: none;
+    }
+
+    .playground-studio__back-to-chat {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--fd-space-2xs);
+      align-self: flex-start;
+      margin: var(--fd-space-xs);
+      padding: var(--fd-space-2xs) var(--fd-space-md);
+      min-height: 2.5rem;
+      font-size: var(--fd-text-sm);
+      font-weight: 500;
+      font-family: inherit;
+      color: var(--fd-foreground);
+      background-color: var(--fd-card);
+      border: 1px solid var(--fd-border);
+      border-radius: var(--fd-radius-md);
+      cursor: pointer;
+      transition: background-color var(--fd-transition-fast);
+    }
+
+    .playground-studio__back-to-chat:hover {
+      background-color: var(--fd-muted);
+    }
+
+    .playground-studio__back-to-chat:focus-visible {
+      outline: 2px solid var(--fd-ring);
+      outline-offset: 2px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .playground-studio__back-to-chat {
+      transition: none;
+    }
+  }
 </style>

package/dist/components/playground/messageDisplay.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared formatters / icon maps / label resolver for the message layout
+ * components. Pure functions only — i18n strings come in via the `roles`
+ * argument; the helper has no runtime dependency on the messages context.
+ */
+import type { PlaygroundMessage, PlaygroundMessageLevel, PlaygroundMessageRole } from '../../types/playground.js';
+import type { Messages } from '../../messages/types.js';
+export type RoleLabels = Messages['playground']['roles'];
+export declare function formatTimestamp(timestamp: string): string;
+export declare function formatDuration(ms: number): string;
+export declare function getLogLevelIcon(level: PlaygroundMessageLevel | undefined): string;
+export declare function getRoleIcon(role: PlaygroundMessageRole): string;
+/**
+ * Localised author label. Backend-supplied overrides win:
+ *   - user → metadata.userName (display name)
+ *   - log  → metadata.nodeLabel (human-readable node label)
+ * Anything else returns the role's i18n default.
+ */
+export declare function getRoleLabel(message: Pick<PlaygroundMessage, 'role' | 'metadata'>, roles: RoleLabels): string;

package/dist/components/playground/messageDisplay.js

@@ -0,0 +1,62 @@
+/**
+ * Shared formatters / icon maps / label resolver for the message layout
+ * components. Pure functions only — i18n strings come in via the `roles`
+ * argument; the helper has no runtime dependency on the messages context.
+ */
+export function formatTimestamp(timestamp) {
+    return new Date(timestamp).toLocaleTimeString('en-US', {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+    });
+}
+export function formatDuration(ms) {
+    return ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(2)}s`;
+}
+export function getLogLevelIcon(level) {
+    switch (level) {
+        case 'error':
+            return 'mdi:alert-circle';
+        case 'warning':
+            return 'mdi:alert';
+        case 'debug':
+            return 'mdi:bug';
+        default:
+            return 'mdi:information';
+    }
+}
+export function getRoleIcon(role) {
+    switch (role) {
+        case 'user':
+            return 'mdi:account';
+        case 'assistant':
+            return 'mdi:robot';
+        case 'system':
+            return 'mdi:cog';
+        case 'log':
+            return 'mdi:console';
+        default:
+            return 'mdi:message';
+    }
+}
+/**
+ * Localised author label. Backend-supplied overrides win:
+ *   - user → metadata.userName (display name)
+ *   - log  → metadata.nodeLabel (human-readable node label)
+ * Anything else returns the role's i18n default.
+ */
+export function getRoleLabel(message, roles) {
+    switch (message.role) {
+        case 'user':
+            return message.metadata?.userName ?? roles.you;
+        case 'assistant':
+            return roles.assistant;
+        case 'system':
+            return roles.system;
+        case 'log':
+            return message.metadata?.nodeLabel ?? roles.log;
+        default:
+            return roles.message;
+    }
+}

package/dist/form/autocomplete.d.ts

@@ -0,0 +1 @@
+export { default as FormAutocomplete } from '../components/form/FormAutocomplete.svelte';

package/dist/form/autocomplete.js

@@ -0,0 +1 @@
+export { default as FormAutocomplete } from '../components/form/FormAutocomplete.svelte';

package/dist/form/index.d.ts

@@ -75,3 +75,20 @@ export type { FieldSchema, FieldType, FieldFormat, FieldOption, OneOfItem, Schem
 export { isFieldOptionArray, isOneOfArray, normalizeOptions, oneOfToOptions, getSchemaOptions } from '../components/form/types.js';
 export { fieldComponentRegistry, hiddenFieldMatcher, checkboxGroupMatcher, enumSelectMatcher, textareaMatcher, rangeMatcher, textFieldMatcher, numberFieldMatcher, toggleMatcher, selectOptionsMatcher, arrayMatcher } from './fieldRegistry.js';
 export type { FieldComponentProps, FieldMatcher, FieldMatcherRegistration, FieldComponent, FieldComponentRegistration } from './fieldRegistry.js';
+/**
+ * Use with Svelte's `getContext` inside custom field components registered
+ * via `fieldComponentRegistry` to read sibling form field values.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { getContext } from 'svelte';
+ *   import { FORM_VALUES_KEY, type FormValuesGetter } from '@flowdrop/flowdrop/form';
+ *
+ *   const getFormValues = getContext<FormValuesGetter | undefined>(FORM_VALUES_KEY);
+ *   const account = $derived(getFormValues?.()['account']);
+ * </script>
+ * ```
+ */
+export declare const FORM_VALUES_KEY: "flowdrop:getFormValues";
+export type FormValuesGetter = () => Record<string, unknown>;

package/dist/form/index.js

@@ -89,3 +89,22 @@ export {
 fieldComponentRegistry, 
 // Built-in matchers for custom components
 hiddenFieldMatcher, checkboxGroupMatcher, enumSelectMatcher, textareaMatcher, rangeMatcher, textFieldMatcher, numberFieldMatcher, toggleMatcher, selectOptionsMatcher, arrayMatcher } from './fieldRegistry.js';
+// ============================================================================
+// Context keys (for custom field components)
+// ============================================================================
+/**
+ * Use with Svelte's `getContext` inside custom field components registered
+ * via `fieldComponentRegistry` to read sibling form field values.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { getContext } from 'svelte';
+ *   import { FORM_VALUES_KEY, type FormValuesGetter } from '@flowdrop/flowdrop/form';
+ *
+ *   const getFormValues = getContext<FormValuesGetter | undefined>(FORM_VALUES_KEY);
+ *   const account = $derived(getFormValues?.()['account']);
+ * </script>
+ * ```
+ */
+export const FORM_VALUES_KEY = 'flowdrop:getFormValues';

package/dist/messages/defaults.d.ts

@@ -310,6 +310,11 @@ export declare const defaultMessages: {
             }) => string;
             readonly executionDuration: "Execution duration";
         };
+        readonly messageAnnotations: {
+            readonly hierarchyOf: ({ path }: {
+                path: string;
+            }) => string;
+        };
         readonly sessions: {
             readonly header: "Sessions";
             readonly newSession: "New Session";

package/dist/messages/defaults.js

@@ -288,6 +288,12 @@ export const defaultMessages = {
             nodeId: ({ id }) => `Node ID: ${id}`,
             executionDuration: 'Execution duration'
         },
+        // ARIA labels for message annotations. The hierarchy trail names the
+        // actual path so AT users hear "From: ForEach Loop / Greeter" rather
+        // than a generic "hierarchy".
+        messageAnnotations: {
+            hierarchyOf: ({ path }) => `From: ${path}`
+        },
         sessions: {
             header: 'Sessions',
             newSession: 'New Session',

package/dist/schemas/v1/workflow.schema.json

@@ -98,6 +98,13 @@
           "type": "boolean",
           "default": false,
           "description": "Whether to allow multiple selections.\nWhen true, users can select multiple values displayed as tags.\n"
+        },
+        "params": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "Map of URL query parameter names to sibling form field names.\nWhen fetching autocomplete options, the current value of each\nreferenced sibling field is appended as a query parameter.\nWhen any dependency field changes, the autocomplete clears its\ncurrent value and invalidates the suggestion cache.\n"
         }
       },
       "required": [
@@ -453,7 +460,9 @@
         "completed",
         "failed",
         "cancelled",
-        "skipped"
+        "skipped",
+        "paused",
+        "interrupted"
       ],
       "description": "Current execution status of a node"
     },

package/dist/services/categoriesApi.d.ts

@@ -4,10 +4,11 @@
  */
 import type { CategoryDefinition } from '../types/index.js';
 import type { EndpointConfig } from '../config/endpoints.js';
+import type { AuthProvider } from '../types/auth.js';
 /**
  * Fetch category definitions from API
  */
-export declare function fetchCategories(endpointConfig: EndpointConfig): Promise<CategoryDefinition[]>;
+export declare function fetchCategories(endpointConfig: EndpointConfig, authProvider?: AuthProvider): Promise<CategoryDefinition[]>;
 /**
  * Validate category definitions structure
  */

package/dist/services/categoriesApi.js

@@ -2,17 +2,19 @@
  * Categories API Service
  * Handles fetching category definitions from the backend
  */
-import { buildEndpointUrl } from '../config/endpoints.js';
+import { buildEndpointUrl, getEndpointHeaders } from '../config/endpoints.js';
 import { DEFAULT_CATEGORIES } from '../config/defaultCategories.js';
 import { logger } from '../utils/logger.js';
 /**
  * Fetch category definitions from API
  */
-export async function fetchCategories(endpointConfig) {
+export async function fetchCategories(endpointConfig, authProvider) {
     try {
         const url = buildEndpointUrl(endpointConfig, endpointConfig.endpoints.categories);
+        const configHeaders = getEndpointHeaders(endpointConfig, 'categories');
+        const authHeaders = authProvider ? await authProvider.getAuthHeaders() : {};
         const response = await fetch(url, {
-            headers: { 'Content-Type': 'application/json' }
+            headers: { ...configHeaders, ...authHeaders }
         });
         if (!response.ok) {
             throw new Error(`HTTP ${response.status}: ${response.statusText}`);

package/dist/services/portConfigApi.d.ts

@@ -4,10 +4,11 @@
  */
 import type { PortConfig } from '../types/index.js';
 import type { EndpointConfig } from '../config/endpoints.js';
+import type { AuthProvider } from '../types/auth.js';
 /**
  * Fetch port configuration from API
  */
-export declare function fetchPortConfig(endpointConfig: EndpointConfig): Promise<PortConfig>;
+export declare function fetchPortConfig(endpointConfig: EndpointConfig, authProvider?: AuthProvider): Promise<PortConfig>;
 /**
  * Validate port configuration structure
  */

package/dist/services/portConfigApi.js

@@ -2,17 +2,19 @@
  * Port Configuration API Service
  * Handles fetching port configuration from the backend
  */
-import { buildEndpointUrl } from '../config/endpoints.js';
+import { buildEndpointUrl, getEndpointHeaders } from '../config/endpoints.js';
 import { DEFAULT_PORT_CONFIG } from '../config/defaultPortConfig.js';
 import { logger } from '../utils/logger.js';
 /**
  * Fetch port configuration from API
  */
-export async function fetchPortConfig(endpointConfig) {
+export async function fetchPortConfig(endpointConfig, authProvider) {
     try {
         const url = buildEndpointUrl(endpointConfig, endpointConfig.endpoints.portConfig);
+        const configHeaders = getEndpointHeaders(endpointConfig, 'portConfig');
+        const authHeaders = authProvider ? await authProvider.getAuthHeaders() : {};
         const response = await fetch(url, {
-            headers: { 'Content-Type': 'application/json' }
+            headers: { ...configHeaders, ...authHeaders }
         });
         if (!response.ok) {
             throw new Error(`HTTP ${response.status}: ${response.statusText}`);

package/dist/svelte-app.d.ts

@@ -153,6 +153,7 @@ export declare function mountWorkflowEditor(container: HTMLElement, options?: {
     endpointConfig?: EndpointConfig;
     portConfig?: PortConfig;
     categories?: CategoryDefinition[];
+    authProvider?: AuthProvider;
 }): Promise<MountedFlowDropApp>;
 /**
  * Unmount a FlowDrop app

package/dist/svelte-app.js

@@ -84,7 +84,7 @@ export async function mountFlowDropApp(container, options = {}) {
     if (!finalPortConfig && config) {
         // Try to fetch port configuration from API
         try {
-            finalPortConfig = await fetchPortConfig(config);
+            finalPortConfig = await fetchPortConfig(config, authProvider);
         }
         catch (error) {
             logger.warn('Failed to fetch port config from API, using default:', error);
@@ -101,7 +101,7 @@ export async function mountFlowDropApp(container, options = {}) {
     }
     else if (config) {
         try {
-            const fetchedCategories = await fetchCategories(config);
+            const fetchedCategories = await fetchCategories(config, authProvider);
             initializeCategories(fetchedCategories);
         }
         catch (error) {
@@ -244,7 +244,7 @@ export async function mountFlowDropApp(container, options = {}) {
  * @returns Promise resolving to a MountedFlowDropApp instance
  */
 export async function mountWorkflowEditor(container, options = {}) {
-    const { nodes = [], endpointConfig, portConfig, categories } = options;
+    const { nodes = [], endpointConfig, portConfig, categories, authProvider } = options;
     // Create endpoint configuration
     let config;
     if (endpointConfig) {
@@ -269,7 +269,7 @@ export async function mountWorkflowEditor(container, options = {}) {
     if (!finalPortConfig && config) {
         // Try to fetch port configuration from API
         try {
-            finalPortConfig = await fetchPortConfig(config);
+            finalPortConfig = await fetchPortConfig(config, authProvider);
         }
         catch (error) {
             logger.warn('Failed to fetch port config from API, using default:', error);
@@ -286,7 +286,7 @@ export async function mountWorkflowEditor(container, options = {}) {
     }
     else if (config) {
         try {
-            const fetchedCategories = await fetchCategories(config);
+            const fetchedCategories = await fetchCategories(config, authProvider);
             initializeCategories(fetchedCategories);
         }
         catch (error) {

package/dist/types/index.d.ts

@@ -297,6 +297,19 @@ export interface AutocompleteConfig {
      * @default false
      */
     multiple?: boolean;
+    /**
+     * Map of URL query parameter names to sibling form field names.
+     * When fetching autocomplete options, the current value of each
+     * referenced sibling field is appended as a query parameter.
+     *
+     * Example: { "account": "account", "project": "project" }
+     * If the "account" field currently holds "my-jira", the URL becomes:
+     * /api/jira/issue-types?account=my-jira&q=...
+     *
+     * When any dependency field changes, the autocomplete clears its
+     * current value and invalidates the suggestion cache.
+     */
+    params?: Record<string, string>;
 }
 /**
  * Dynamic schema endpoint configuration

package/dist/types/playground.d.ts

@@ -118,6 +118,65 @@ export interface PlaygroundMessageMetadata {
     /** Allow additional properties */
     [key: string]: unknown;
 }
+/**
+ * A node on the contextual tree the server attaches to a message
+ * (e.g. workflow > sub-workflow > iteration). Display-only — this is not a
+ * navigation breadcrumb; `href` is intentionally not part of the schema.
+ */
+export interface MessageHierarchyItem {
+    /** Stable identifier (for keying) */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional iconify icon id (e.g. 'mdi:graph') */
+    icon?: string;
+}
+/**
+ * Semantic color hooks for a tag. Map to design tokens in the theme.
+ */
+export type MessageTagColor = 'muted' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+/**
+ * Visual emphasis for a tag.
+ */
+export type MessageTagVariant = 'solid' | 'outline' | 'subtle';
+/**
+ * A server-emitted classification chip rendered alongside a message.
+ * Tags are unordered and replace any UI-side defaults.
+ */
+export interface MessageTag {
+    /** Stable identifier (for keying) */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional iconify icon id */
+    icon?: string;
+    /** Semantic color hook; defaults to 'muted' if omitted */
+    color?: MessageTagColor;
+    /** Visual style; defaults to 'subtle' if omitted */
+    variant?: MessageTagVariant;
+    /** Free-form classifier the server may use for future grouping/filtering */
+    type?: string;
+}
+/**
+ * Rendering hint the server may set to choose a layout regardless of role.
+ *
+ * - `bubble`: chat bubble shape (default for user/assistant)
+ * - `log`: dense one-liner (default for log role)
+ * - `notice`: compact centered notice (default for system role with
+ *   compactSystemMessages enabled)
+ * - `card`: vertical layout — breadcrumb (top), body (middle), tags (bottom)
+ *
+ * When omitted, the client falls back to the role-based default above.
+ */
+export type PlaygroundMessageDisplay = 'bubble' | 'log' | 'notice' | 'card';
+/**
+ * Resolve the effective layout for a message. Server-supplied `display` wins;
+ * otherwise we fall back to a role-based default. Pure function so the
+ * dispatcher and tests can share it.
+ */
+export declare function resolveMessageDisplay(message: Pick<PlaygroundMessage, 'role' | 'display'>, options?: {
+    compactSystemMessages?: boolean;
+}): PlaygroundMessageDisplay;
 /**
  * Message in a playground session
  *
@@ -159,6 +218,23 @@ export interface PlaygroundMessage {
     executionId?: string | null;
     /** Associated node ID (for log/assistant messages) */
     nodeId?: string | null;
+    /**
+     * Ordered hierarchy path (e.g. workflow > sub-workflow > iteration).
+     * Rendered as a chevron-separated trail. Server-controlled — no
+     * client-side derivation.
+     */
+    hierarchy?: MessageHierarchyItem[];
+    /**
+     * Server-emitted classification chips rendered with the message.
+     * Replace any client-side defaults entirely (no merge).
+     */
+    tags?: MessageTag[];
+    /**
+     * Layout hint. When omitted, the client picks a default from the role:
+     * - log → 'log', system (when compactSystemMessages) → 'notice',
+     *   user/assistant → 'bubble'.
+     */
+    display?: PlaygroundMessageDisplay;
     /** Additional message metadata */
     metadata?: PlaygroundMessageMetadata;
 }

package/dist/types/playground.js

@@ -42,6 +42,20 @@ export function defaultShouldStopPolling(status) {
 export function defaultIsTerminalStatus(status) {
     return DEFAULT_TERMINAL_STATUSES.includes(status);
 }
+/**
+ * Resolve the effective layout for a message. Server-supplied `display` wins;
+ * otherwise we fall back to a role-based default. Pure function so the
+ * dispatcher and tests can share it.
+ */
+export function resolveMessageDisplay(message, options = {}) {
+    if (message.display)
+        return message.display;
+    if (message.role === 'system' && options.compactSystemMessages !== false)
+        return 'notice';
+    if (message.role === 'log')
+        return 'log';
+    return 'bubble';
+}
 /**
  * Metadata field to control Run button state from backend.
  * When a message contains this field set to true, the Run button becomes enabled.

package/package.json

@@ -3,7 +3,7 @@
   "description": "A drop-in visual workflow editor for any web application. You own the backend. You own the data. You own the orchestration.",
   "license": "MIT",
   "private": false,
-  "version": "1.12.0",
+  "version": "1.13.0",
   "author": "Shibin Das (D34dMan)",
   "bugs": {
     "url": "https://github.com/flowdrop-io/flowdrop/issues"
@@ -83,6 +83,11 @@
       "svelte": "./dist/form/code.js",
       "default": "./dist/form/code.js"
     },
+    "./form/autocomplete": {
+      "types": "./dist/form/autocomplete.d.ts",
+      "svelte": "./dist/form/autocomplete.js",
+      "default": "./dist/form/autocomplete.js"
+    },
     "./form/markdown": {
       "types": "./dist/form/markdown.d.ts",
       "svelte": "./dist/form/markdown.js",