@flowdrop/flowdrop 1.0.0

package/dist/components/playground/SessionManager.svelte

@@ -0,0 +1,538 @@
+<!--
+  SessionManager Component
+  
+  Manages playground sessions: list, create, switch, and delete.
+  Displayed as a sidebar or dropdown.
+  Styled with BEM syntax.
+-->
+
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import { slide } from 'svelte/transition';
+	import type { PlaygroundSession } from '../../types/playground.js';
+	import {
+		getSessions,
+		getCurrentSession,
+		getIsLoading,
+		getSessionCount
+	} from '../../stores/playgroundStore.svelte.js';
+
+	/**
+	 * Component props
+	 */
+	interface Props {
+		/** Whether the session list is expanded */
+		isExpanded?: boolean;
+		/** Callback when expansion state changes */
+		onToggle?: (expanded: boolean) => void;
+		/** Callback when user wants to create a new session */
+		onCreateSession?: () => void;
+		/** Callback when user selects a session */
+		onSelectSession?: (sessionId: string) => void;
+		/** Callback when user wants to delete a session */
+		onDeleteSession?: (sessionId: string) => void;
+		/** Display mode: sidebar or dropdown */
+		mode?: 'sidebar' | 'dropdown';
+	}
+
+	let {
+		isExpanded = $bindable(false),
+		onToggle,
+		onCreateSession,
+		onSelectSession,
+		onDeleteSession,
+		mode = 'sidebar'
+	}: Props = $props();
+
+	/** Session pending deletion (for confirmation) */
+	let pendingDeleteId = $state<string | null>(null);
+
+	/**
+	 * Toggle expansion
+	 */
+	function toggleExpanded(): void {
+		isExpanded = !isExpanded;
+		onToggle?.(isExpanded);
+	}
+
+	/**
+	 * Handle session selection
+	 */
+	function handleSelectSession(sessionId: string): void {
+		onSelectSession?.(sessionId);
+		if (mode === 'dropdown') {
+			isExpanded = false;
+		}
+	}
+
+	/**
+	 * Handle delete click - show confirmation
+	 */
+	function handleDeleteClick(event: Event, sessionId: string): void {
+		event.stopPropagation();
+		if (pendingDeleteId === sessionId) {
+			// Confirm deletion
+			onDeleteSession?.(sessionId);
+			pendingDeleteId = null;
+		} else {
+			pendingDeleteId = sessionId;
+			// Auto-reset after 3 seconds
+			setTimeout(() => {
+				if (pendingDeleteId === sessionId) {
+					pendingDeleteId = null;
+				}
+			}, 3000);
+		}
+	}
+
+	/**
+	 * Cancel delete confirmation
+	 */
+	function cancelDelete(event: Event): void {
+		event.stopPropagation();
+		pendingDeleteId = null;
+	}
+
+	/**
+	 * Format date for display
+	 */
+	function formatDate(dateString: string): string {
+		const date = new Date(dateString);
+		const now = new Date();
+		const diffMs = now.getTime() - date.getTime();
+		const diffMins = Math.floor(diffMs / 60000);
+		const diffHours = Math.floor(diffMs / 3600000);
+		const diffDays = Math.floor(diffMs / 86400000);
+
+		if (diffMins < 1) {
+			return 'Just now';
+		}
+		if (diffMins < 60) {
+			return `${diffMins}m ago`;
+		}
+		if (diffHours < 24) {
+			return `${diffHours}h ago`;
+		}
+		if (diffDays < 7) {
+			return `${diffDays}d ago`;
+		}
+		return date.toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric'
+		});
+	}
+
+	/**
+	 * Get status icon
+	 */
+	function getStatusIcon(status: PlaygroundSession['status']): string {
+		switch (status) {
+			case 'running':
+				return 'mdi:loading';
+			case 'completed':
+				return 'mdi:check-circle';
+			case 'failed':
+				return 'mdi:alert-circle';
+			default:
+				return 'mdi:circle-outline';
+		}
+	}
+
+	/**
+	 * Get status color class
+	 */
+	function getStatusClass(status: PlaygroundSession['status']): string {
+		switch (status) {
+			case 'running':
+				return 'session-manager__status--running';
+			case 'completed':
+				return 'session-manager__status--completed';
+			case 'failed':
+				return 'session-manager__status--failed';
+			default:
+				return 'session-manager__status--idle';
+		}
+	}
+</script>
+
+<div
+	class="session-manager"
+	class:session-manager--expanded={isExpanded}
+	class:session-manager--sidebar={mode === 'sidebar'}
+	class:session-manager--dropdown={mode === 'dropdown'}
+>
+	<!-- Header / Toggle -->
+	<button
+		type="button"
+		class="session-manager__header"
+		onclick={toggleExpanded}
+		aria-expanded={isExpanded}
+	>
+		<div class="session-manager__title">
+			<Icon icon="mdi:history" />
+			<span>Sessions</span>
+			{#if getSessionCount() > 0}
+				<span class="session-manager__count">{getSessionCount()}</span>
+			{/if}
+		</div>
+		<Icon
+			icon="mdi:chevron-down"
+			class="session-manager__chevron {isExpanded ? 'session-manager__chevron--expanded' : ''}"
+		/>
+	</button>
+
+	<!-- Content -->
+	{#if isExpanded}
+		<div class="session-manager__content" transition:slide={{ duration: 200 }}>
+			<!-- New Session Button -->
+			<button
+				type="button"
+				class="session-manager__new-btn"
+				onclick={onCreateSession}
+				disabled={getIsLoading()}
+			>
+				<Icon icon="mdi:plus" />
+				New Session
+			</button>
+
+			<!-- Sessions List -->
+			<div class="session-manager__list">
+				{#if getSessions().length === 0}
+					<div class="session-manager__empty">
+						<Icon icon="mdi:chat-outline" />
+						<span>No sessions yet</span>
+					</div>
+				{:else}
+					{#each getSessions() as session (session.id)}
+						<div
+							class="session-manager__item"
+							class:session-manager__item--active={getCurrentSession()?.id === session.id}
+							role="button"
+							tabindex="0"
+							onclick={() => handleSelectSession(session.id)}
+							onkeydown={(e) => e.key === 'Enter' && handleSelectSession(session.id)}
+						>
+							<div class="session-manager__item-info">
+								<div class="session-manager__item-header">
+									<span class="session-manager__item-name" title={session.name}>
+										{session.name}
+									</span>
+									<span
+										class="session-manager__status {getStatusClass(session.status)}"
+										title={session.status}
+									>
+										<Icon icon={getStatusIcon(session.status)} />
+									</span>
+								</div>
+								<span class="session-manager__item-time">
+									{formatDate(session.updatedAt)}
+								</span>
+							</div>
+
+							<!-- Delete Actions -->
+							<div class="session-manager__item-actions">
+								{#if pendingDeleteId === session.id}
+									<button
+										type="button"
+										class="session-manager__delete-btn session-manager__delete-btn--confirm"
+										onclick={(e) => handleDeleteClick(e, session.id)}
+										title="Click again to confirm"
+									>
+										<Icon icon="mdi:check" />
+									</button>
+									<button
+										type="button"
+										class="session-manager__delete-btn session-manager__delete-btn--cancel"
+										onclick={cancelDelete}
+										title="Cancel"
+									>
+										<Icon icon="mdi:close" />
+									</button>
+								{:else}
+									<button
+										type="button"
+										class="session-manager__delete-btn"
+										onclick={(e) => handleDeleteClick(e, session.id)}
+										title="Delete session"
+									>
+										<Icon icon="mdi:delete-outline" />
+									</button>
+								{/if}
+							</div>
+						</div>
+					{/each}
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.session-manager {
+		background-color: var(--fd-background);
+		border-bottom: 1px solid var(--fd-border);
+	}
+
+	.session-manager--dropdown {
+		position: relative;
+	}
+
+	.session-manager--dropdown .session-manager__content {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		right: 0;
+		z-index: 50;
+		background-color: var(--fd-background);
+		border: 1px solid var(--fd-border);
+		border-radius: 0 0 var(--fd-radius-lg) var(--fd-radius-lg);
+		box-shadow: var(--fd-shadow-lg);
+	}
+
+	/* Header */
+	.session-manager__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		padding: var(--fd-space-md) var(--fd-space-xl);
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		transition: background-color var(--fd-transition-normal);
+	}
+
+	.session-manager__header:hover {
+		background-color: var(--fd-muted);
+	}
+
+	.session-manager__title {
+		display: flex;
+		align-items: center;
+		gap: var(--fd-space-xs);
+		font-size: var(--fd-text-sm);
+		font-weight: 500;
+		color: var(--fd-foreground);
+	}
+
+	.session-manager__count {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 1.25rem;
+		height: 1.25rem;
+		padding: 0 var(--fd-space-3xs);
+		border-radius: var(--fd-radius-full);
+		font-size: var(--fd-text-xs);
+		font-weight: 600;
+		background-color: var(--fd-secondary);
+		color: var(--fd-secondary-foreground);
+	}
+
+	:global(.session-manager__chevron) {
+		transition: transform var(--fd-transition-normal);
+		color: var(--fd-muted-foreground);
+	}
+
+	:global(.session-manager__chevron--expanded) {
+		transform: rotate(180deg);
+	}
+
+	/* Content */
+	.session-manager__content {
+		padding: var(--fd-space-xs);
+	}
+
+	/* New Session Button */
+	.session-manager__new-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--fd-space-3xs);
+		width: 100%;
+		padding: var(--fd-space-sm) var(--fd-space-xl);
+		margin-bottom: var(--fd-space-xs);
+		border: 1px dashed var(--fd-border-strong);
+		border-radius: var(--fd-radius-lg);
+		background: transparent;
+		font-size: var(--fd-text-sm);
+		font-weight: 500;
+		color: var(--fd-muted-foreground);
+		cursor: pointer;
+		transition: all var(--fd-transition-normal);
+	}
+
+	.session-manager__new-btn:hover:not(:disabled) {
+		background-color: var(--fd-muted);
+		border-color: var(--fd-primary);
+		color: var(--fd-primary);
+	}
+
+	.session-manager__new-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	/* Sessions List */
+	.session-manager__list {
+		max-height: 300px;
+		overflow-y: auto;
+	}
+
+	.session-manager__empty {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-4xl) var(--fd-space-xl);
+		color: var(--fd-muted-foreground);
+		font-size: var(--fd-text-sm);
+	}
+
+	/* Session Item */
+	.session-manager__item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		padding: var(--fd-space-sm) var(--fd-space-md);
+		margin-bottom: var(--fd-space-3xs);
+		border: 1px solid transparent;
+		border-radius: var(--fd-radius-lg);
+		background: transparent;
+		cursor: pointer;
+		transition: all var(--fd-transition-normal);
+		text-align: left;
+	}
+
+	.session-manager__item:hover {
+		background-color: var(--fd-muted);
+	}
+
+	.session-manager__item--active {
+		background-color: var(--fd-primary-muted);
+		border-color: var(--fd-primary);
+	}
+
+	.session-manager__item-info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.session-manager__item-header {
+		display: flex;
+		align-items: center;
+		gap: var(--fd-space-xs);
+		margin-bottom: 0.125rem;
+	}
+
+	.session-manager__item-name {
+		font-size: var(--fd-text-sm);
+		font-weight: 500;
+		color: var(--fd-foreground);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.session-manager__status {
+		display: flex;
+		align-items: center;
+		font-size: var(--fd-text-xs);
+	}
+
+	.session-manager__status--idle {
+		color: var(--fd-muted-foreground);
+	}
+
+	.session-manager__status--running {
+		color: var(--fd-primary);
+	}
+
+	:global(.session-manager__status--running svg) {
+		animation: spin 1s linear infinite;
+	}
+
+	.session-manager__status--completed {
+		color: var(--fd-success);
+	}
+
+	.session-manager__status--failed {
+		color: var(--fd-error);
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.session-manager__item-time {
+		font-size: var(--fd-text-xs);
+		color: var(--fd-muted-foreground);
+	}
+
+	/* Delete Button */
+	.session-manager__item-actions {
+		display: flex;
+		gap: var(--fd-space-3xs);
+		opacity: 0;
+		transition: opacity var(--fd-transition-normal);
+	}
+
+	.session-manager__item:hover .session-manager__item-actions {
+		opacity: 1;
+	}
+
+	.session-manager__delete-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.5rem;
+		height: 1.5rem;
+		border: none;
+		border-radius: var(--fd-radius-sm);
+		background: transparent;
+		color: var(--fd-muted-foreground);
+		cursor: pointer;
+		transition: all var(--fd-transition-normal);
+	}
+
+	.session-manager__delete-btn:hover {
+		background-color: var(--fd-error-muted);
+		color: var(--fd-error);
+	}
+
+	.session-manager__delete-btn--confirm {
+		background-color: var(--fd-success-muted);
+		color: var(--fd-success);
+	}
+
+	.session-manager__delete-btn--confirm:hover {
+		background-color: var(--fd-success-muted);
+		opacity: 0.8;
+	}
+
+	.session-manager__delete-btn--cancel {
+		background-color: var(--fd-muted);
+		color: var(--fd-muted-foreground);
+	}
+
+	.session-manager__delete-btn--cancel:hover {
+		background-color: var(--fd-secondary);
+	}
+
+	/* Responsive */
+	@media (max-width: 640px) {
+		.session-manager__content {
+			padding: var(--fd-space-3xs);
+		}
+
+		.session-manager__item {
+			padding: var(--fd-space-xs);
+		}
+	}
+</style>

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

@@ -0,0 +1,20 @@
+/**
+ * Component props
+ */
+interface Props {
+    /** Whether the session list is expanded */
+    isExpanded?: boolean;
+    /** Callback when expansion state changes */
+    onToggle?: (expanded: boolean) => void;
+    /** Callback when user wants to create a new session */
+    onCreateSession?: () => void;
+    /** Callback when user selects a session */
+    onSelectSession?: (sessionId: string) => void;
+    /** Callback when user wants to delete a session */
+    onDeleteSession?: (sessionId: string) => void;
+    /** Display mode: sidebar or dropdown */
+    mode?: 'sidebar' | 'dropdown';
+}
+declare const SessionManager: import("svelte").Component<Props, {}, "isExpanded">;
+type SessionManager = ReturnType<typeof SessionManager>;
+export default SessionManager;

package/dist/config/agentSpecEndpoints.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Agent Spec Runtime Endpoint Configuration
+ *
+ * Defines the API endpoints for connecting to Agent Spec runtimes
+ * (WayFlow, PyAgentSpec, or other compatible runtimes).
+ */
+/**
+ * Agent Spec runtime endpoint configuration.
+ *
+ * Separate from the main FlowDrop EndpointConfig because the Agent Spec
+ * runtime is an independent service with its own base URL and auth.
+ *
+ * @example
+ * ```typescript
+ * const config: AgentSpecEndpointConfig = {
+ *   baseUrl: 'http://localhost:8000',
+ *   endpoints: { ...defaultAgentSpecEndpoints.endpoints },
+ *   auth: { type: 'bearer', token: 'my-api-key' }
+ * };
+ * ```
+ */
+export interface AgentSpecEndpointConfig {
+    /** Base URL for the Agent Spec runtime */
+    baseUrl: string;
+    endpoints: {
+        /** POST — Execute a flow (body: AgentSpecFlow JSON) */
+        execute: string;
+        /** GET — Get execution status (params: {id}) */
+        status: string;
+        /** POST — Cancel a running execution (params: {id}) */
+        cancel: string;
+        /** GET — Get execution results (params: {id}) */
+        results: string;
+        /** WS — WebSocket for streaming execution updates (params: {id}) */
+        stream: string;
+        /** POST — Validate a flow specification (body: AgentSpecFlow JSON) */
+        validate: string;
+        /** GET — List available agents on the runtime */
+        agents: string;
+        /** GET — List available tools on the runtime */
+        tools: string;
+        /** GET — Runtime health check */
+        health: string;
+    };
+    /** Authentication for the runtime */
+    auth?: {
+        type: 'none' | 'bearer' | 'api_key';
+        token?: string;
+        apiKey?: string;
+    };
+    /** Request timeout in milliseconds */
+    timeout?: number;
+}
+/**
+ * Default Agent Spec runtime endpoints.
+ * Targets a local WayFlow/PyAgentSpec instance on port 8000.
+ */
+export declare const defaultAgentSpecEndpoints: AgentSpecEndpointConfig;
+/**
+ * Create Agent Spec endpoint configuration with custom base URL.
+ */
+export declare function createAgentSpecEndpointConfig(baseUrl: string, overrides?: Partial<AgentSpecEndpointConfig>): AgentSpecEndpointConfig;
+/**
+ * Build a full URL for an Agent Spec runtime endpoint.
+ */
+export declare function buildAgentSpecUrl(config: AgentSpecEndpointConfig, endpointPath: string, params?: Record<string, string>): string;
+/**
+ * Get authentication headers for Agent Spec runtime requests.
+ */
+export declare function getAgentSpecAuthHeaders(config: AgentSpecEndpointConfig): Record<string, string>;

package/dist/config/agentSpecEndpoints.js

@@ -0,0 +1,65 @@
+/**
+ * Agent Spec Runtime Endpoint Configuration
+ *
+ * Defines the API endpoints for connecting to Agent Spec runtimes
+ * (WayFlow, PyAgentSpec, or other compatible runtimes).
+ */
+/**
+ * Default Agent Spec runtime endpoints.
+ * Targets a local WayFlow/PyAgentSpec instance on port 8000.
+ */
+export const defaultAgentSpecEndpoints = {
+    baseUrl: 'http://localhost:8000',
+    endpoints: {
+        execute: '/flows/execute',
+        status: '/executions/{id}',
+        cancel: '/executions/{id}/cancel',
+        results: '/executions/{id}/results',
+        stream: '/executions/{id}/stream',
+        validate: '/flows/validate',
+        agents: '/agents',
+        tools: '/tools',
+        health: '/health'
+    },
+    timeout: 60000
+};
+/**
+ * Create Agent Spec endpoint configuration with custom base URL.
+ */
+export function createAgentSpecEndpointConfig(baseUrl, overrides) {
+    return {
+        ...defaultAgentSpecEndpoints,
+        baseUrl: baseUrl.replace(/\/$/, ''),
+        ...overrides
+    };
+}
+/**
+ * Build a full URL for an Agent Spec runtime endpoint.
+ */
+export function buildAgentSpecUrl(config, endpointPath, params) {
+    let url = endpointPath;
+    if (params) {
+        for (const [key, value] of Object.entries(params)) {
+            url = url.replace(`{${key}}`, encodeURIComponent(value));
+        }
+    }
+    if (!url.startsWith('http') && !url.startsWith('//')) {
+        url = `${config.baseUrl}${url.startsWith('/') ? url : `/${url}`}`;
+    }
+    return url;
+}
+/**
+ * Get authentication headers for Agent Spec runtime requests.
+ */
+export function getAgentSpecAuthHeaders(config) {
+    const headers = {
+        'Content-Type': 'application/json'
+    };
+    if (config.auth?.type === 'bearer' && config.auth.token) {
+        headers['Authorization'] = `Bearer ${config.auth.token}`;
+    }
+    else if (config.auth?.type === 'api_key' && config.auth.apiKey) {
+        headers['X-API-Key'] = config.auth.apiKey;
+    }
+    return headers;
+}