windmill-components 1.655.2 → 1.665.0

package/package/components/mcp/McpScopeSelector.svelte

@@ -0,0 +1,408 @@
+<script lang="ts">import { Badge, Button } from '../common';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import Popover from '../Popover.svelte';
+import MultiSelect from '../select/MultiSelect.svelte';
+import { safeSelectItems } from '../select/utils.svelte';
+import FolderPicker from '../FolderPicker.svelte';
+import TextInput from '../text_input/TextInput.svelte';
+import { FlowService, IntegrationService, ScriptService } from '../../gen';
+import { mcpEndpointTools } from '../../mcpEndpointTools';
+import InfoIcon from 'lucide-svelte/icons/info';
+import { SvelteMap } from 'svelte/reactivity';
+let { workspaceId, scope = $bindable() } = $props();
+let selectedMode = $state('favorites');
+let selectedFolder = $state('');
+let selectedScripts = $state([]);
+let selectedFlows = $state([]);
+let selectedEndpoints = $state([]);
+let customScriptPatterns = $state('');
+let customFlowPatterns = $state('');
+let newMcpApps = $state([]);
+let allScripts = $state([]);
+let allFlows = $state([]);
+let allApps = $state([]);
+let loadingApps = $state(false);
+let errorFetchApps = $state(false);
+let loadingRunnables = $state(false);
+let includedRunnables = $state([]);
+let runnablesCache = new SvelteMap();
+function parsePatterns(input) {
+    return input
+        .split(',')
+        .map((p) => p.trim())
+        .filter((p) => p.length > 0);
+}
+// Compute scope string from selections
+$effect(() => {
+    let scopeParts = [];
+    if (selectedMode === 'custom') {
+        let scriptPaths = [...selectedScripts];
+        if (customScriptPatterns.trim()) {
+            scriptPaths.push(...parsePatterns(customScriptPatterns));
+        }
+        if (scriptPaths.length > 0) {
+            scopeParts.push(`mcp:scripts:${scriptPaths.join(',')}`);
+        }
+        let flowPaths = [...selectedFlows];
+        if (customFlowPatterns.trim()) {
+            flowPaths.push(...parsePatterns(customFlowPatterns));
+        }
+        if (flowPaths.length > 0) {
+            scopeParts.push(`mcp:flows:${flowPaths.join(',')}`);
+        }
+        if (selectedEndpoints.length > 0) {
+            scopeParts.push(`mcp:endpoints:${selectedEndpoints.join(',')}`);
+        }
+    }
+    else if (selectedMode === 'folder') {
+        const folderPath = `f/${selectedFolder}/*`;
+        scopeParts = [`mcp:scripts:${folderPath}`, `mcp:flows:${folderPath}`, `mcp:endpoints:*`];
+    }
+    else {
+        scopeParts = [`mcp:${selectedMode}`];
+    }
+    if (newMcpApps.length > 0) {
+        scopeParts.push(`mcp:hub:${newMcpApps.join(',')}`);
+    }
+    scope = scopeParts.join(' ');
+});
+// Clear pattern inputs when not in custom scope
+$effect(() => {
+    if (selectedMode !== 'custom') {
+        customScriptPatterns = '';
+        customFlowPatterns = '';
+    }
+});
+// Clear folder when not in folder mode
+$effect(() => {
+    if (selectedMode !== 'folder') {
+        selectedFolder = '';
+    }
+});
+// Load hub apps on mount
+async function getAllApps() {
+    if (allApps.length > 0)
+        return;
+    try {
+        loadingApps = true;
+        allApps = (await IntegrationService.listHubIntegrations({
+            kind: 'script'
+        })).map((x) => x.name);
+    }
+    catch (err) {
+        console.error('Hub is not available');
+        allApps = [];
+        errorFetchApps = true;
+    }
+    finally {
+        loadingApps = false;
+    }
+}
+getAllApps();
+async function getScripts(favoriteOnly = false, workspace, folder) {
+    if (!workspace)
+        return [];
+    const pathStart = folder ? `f/${folder}` : undefined;
+    const scripts = await ScriptService.listScripts({
+        starredOnly: favoriteOnly,
+        workspace,
+        pathStart,
+        withoutDescription: true
+    });
+    return scripts.map((x) => x.path);
+}
+async function getFlows(favoriteOnly = false, workspace, folder) {
+    if (!workspace)
+        return [];
+    const pathStart = folder ? `f/${folder}` : undefined;
+    const flows = await FlowService.listFlows({
+        starredOnly: favoriteOnly,
+        workspace,
+        pathStart,
+        withoutDescription: true
+    });
+    return flows.map((x) => x.path);
+}
+async function getScriptsAndFlows(favoriteOnly = false, workspace, folder) {
+    const cacheKey = `${workspace}-${favoriteOnly}${folder ? `-${folder}` : ''}`;
+    if (runnablesCache.has(cacheKey)) {
+        includedRunnables = runnablesCache.get(cacheKey) || [];
+        return;
+    }
+    try {
+        loadingRunnables = true;
+        const [scripts, flows] = await Promise.all([
+            getScripts(favoriteOnly, workspace, folder),
+            getFlows(favoriteOnly, workspace, folder)
+        ]);
+        const combined = [...scripts, ...flows];
+        runnablesCache.set(cacheKey, combined);
+        includedRunnables = combined;
+    }
+    finally {
+        loadingRunnables = false;
+    }
+}
+async function loadAllScriptsAndFlows(workspace) {
+    try {
+        loadingRunnables = true;
+        const [scripts, flows] = await Promise.all([
+            getScripts(false, workspace, undefined),
+            getFlows(false, workspace, undefined)
+        ]);
+        allScripts = scripts;
+        allFlows = flows;
+    }
+    finally {
+        loadingRunnables = false;
+    }
+}
+// Load runnables based on mode
+$effect(() => {
+    if (workspaceId) {
+        const folderParam = selectedFolder.length > 0 ? selectedFolder : undefined;
+        getScriptsAndFlows(selectedMode === 'favorites', workspaceId, folderParam);
+    }
+});
+// Load all scripts/flows for custom mode
+$effect(() => {
+    if (selectedMode === 'custom' && workspaceId) {
+        loadAllScriptsAndFlows(workspaceId);
+    }
+});
+const warning = $derived(selectedMode === 'all'
+    ? 'Create your first scripts or flows to make them available via MCP.'
+    : selectedMode === 'favorites'
+        ? `You do not have any favorite scripts or flows. You can favorite some scripts and flows to include them, or change the scope to "All scripts/flows" to include all your scripts and flows.`
+        : `You do not have any scripts or flows in the selected folder.`);
+function selectAllScripts() {
+    selectedScripts = [...allScripts];
+}
+function clearAllScripts() {
+    selectedScripts = [];
+}
+function selectAllFlows() {
+    selectedFlows = [...allFlows];
+}
+function clearAllFlows() {
+    selectedFlows = [];
+}
+function selectAllEndpoints() {
+    selectedEndpoints = [...mcpEndpointTools.map((e) => e.name)];
+}
+function clearAllEndpoints() {
+    selectedEndpoints = [];
+}
+</script>
+
+<div class="flex flex-col gap-4">
+	<div>
+		<span class="block mb-1 text-emphasis text-xs font-semibold">Scope</span>
+		<ToggleButtonGroup bind:selected={selectedMode} allowEmpty={false}>
+			{#snippet children({ item })}
+				<ToggleButton
+					{item}
+					value="favorites"
+					label="Favorites only"
+					tooltip="Make only your favorite scripts and flows available as tools"
+				/>
+				<ToggleButton
+					{item}
+					value="all"
+					label="All scripts/flows"
+					tooltip="Make all your scripts and flows available as tools"
+				/>
+				<ToggleButton
+					{item}
+					value="folder"
+					label="Folder"
+					tooltip="Make all scripts and flows in the selected folder available as tools"
+				/>
+				<ToggleButton
+					{item}
+					value="custom"
+					label="Custom"
+					tooltip="Select exactly which scripts, flows, and endpoints to expose"
+				/>
+			{/snippet}
+		</ToggleButtonGroup>
+	</div>
+
+	{#if selectedMode === 'folder'}
+		<div>
+			<span class="block mb-1 text-emphasis text-xs font-semibold">Select Folder</span>
+			<FolderPicker bind:folderName={selectedFolder} />
+		</div>
+	{/if}
+
+	<div>
+		<span class="block mb-1 text-emphasis text-xs font-semibold">Hub scripts (optional)</span>
+		{#if loadingApps}
+			<div>Loading...</div>
+		{:else if errorFetchApps}
+			<div>Error fetching apps</div>
+		{:else}
+			<MultiSelect
+				items={safeSelectItems(allApps)}
+				placeholder="Select apps"
+				bind:value={newMcpApps}
+			/>
+		{/if}
+	</div>
+
+	{#if selectedMode === 'custom'}
+		{#if loadingRunnables}
+			<div class="flex flex-col gap-2">
+				<span class="block text-xs text-primary">Loading scripts and flows...</span>
+				<div class="flex flex-wrap gap-1">
+					<Badge rounded small color="dark-gray" baseClass="animate-skeleton">Loading...</Badge>
+				</div>
+			</div>
+		{:else}
+			{#snippet sectionHeader(label: string, selectAll: () => void, clearAll: () => void)}
+				<div class="flex items-center justify-between">
+					<span class="block text-xs font-semibold">{label}</span>
+					<div class="flex gap-2">
+						<Button size="xs2" onClick={selectAll}>Select All</Button>
+						<Button size="xs2" onClick={clearAll}>Clear All</Button>
+					</div>
+				</div>
+			{/snippet}
+
+			<div class="flex flex-col gap-2">
+				<div class="flex flex-col gap-2">
+					{@render sectionHeader('Scripts', selectAllScripts, clearAllScripts)}
+					{#if allScripts.length > 0}
+						<MultiSelect
+							items={safeSelectItems(allScripts)}
+							placeholder="Select scripts"
+							bind:value={selectedScripts}
+						/>
+					{:else}
+						<p class="text-xs text-primary">No scripts available</p>
+					{/if}
+				</div>
+
+				<div class="flex flex-col gap-2 mt-2">
+					{@render sectionHeader('Flows', selectAllFlows, clearAllFlows)}
+					{#if allFlows.length > 0}
+						<MultiSelect
+							items={safeSelectItems(allFlows)}
+							placeholder="Select flows"
+							bind:value={selectedFlows}
+						/>
+					{:else}
+						<p class="text-xs text-primary">No flows available</p>
+					{/if}
+				</div>
+
+				<div class="flex flex-col gap-2 mt-2">
+					{@render sectionHeader('API Endpoints', selectAllEndpoints, clearAllEndpoints)}
+					<MultiSelect
+						items={safeSelectItems(mcpEndpointTools.map((e) => e.name))}
+						placeholder="Select endpoints"
+						bind:value={selectedEndpoints}
+					/>
+				</div>
+
+				<div class="text-xs text-primary mt-2">
+					Selected: {selectedScripts.length} scripts, {selectedFlows.length} flows, {selectedEndpoints.length}
+					endpoints
+				</div>
+
+				<!-- Wildcard Patterns Section -->
+				<div class="flex flex-col gap-2 mt-4 pt-4 border-t border-surface-hover">
+					<div class="flex flex-col gap-2">
+						<div class="flex items-center justify-between">
+							<span class="block text-xs font-semibold">Script wildcard patterns</span>
+							<Popover notClickable>
+								{#snippet text()}
+									<div class="text-xs max-w-xs">
+										<p class="font-semibold mb-2">Add folder wildcards or complex patterns</p>
+										<p class="mb-1"><b>Examples:</b></p>
+										<ul class="list-disc ml-4 space-y-1">
+											<li><code>f/folder/*</code> - all scripts/flows in folder</li>
+											<li><code>f/folder1/*,f/folder2/*</code> - multiple folders</li>
+											<li>Mix: <code>f/folder/*,f/specific/path</code></li>
+										</ul>
+										<p class="mt-2 text-xs text-secondary">
+											Patterns are combined with individual selections above.
+										</p>
+									</div>
+								{/snippet}
+								<Button color="light" size="xs2" nonCaptureEvent startIcon={{ icon: InfoIcon }}>
+									Pattern Help
+								</Button>
+							</Popover>
+						</div>
+						<TextInput
+							inputProps={{ placeholder: 'e.g., f/outline/*,f/docs/*' }}
+							bind:value={customScriptPatterns}
+						/>
+					</div>
+					<div class="flex flex-col gap-2 mt-2">
+						<div class="flex items-center justify-between">
+							<span class="block text-xs font-semibold">Flow wildcard patterns</span>
+						</div>
+						<TextInput
+							inputProps={{ placeholder: 'e.g., f/workflows/*' }}
+							bind:value={customFlowPatterns}
+						/>
+					</div>
+				</div>
+			</div>
+		{/if}
+	{:else if selectedMode !== 'folder' || selectedFolder.length > 0}
+		{#if loadingRunnables}
+			<div class="flex flex-col gap-2">
+				<span class="block text-xs text-primary"
+					>Scripts & Flows that will be available via MCP</span
+				>
+				<div class="flex flex-wrap gap-1">
+					<Badge rounded small color="dark-gray" baseClass="animate-skeleton">Loading...</Badge>
+				</div>
+			</div>
+		{:else}
+			<div class="flex flex-col gap-2">
+				<span class="block text-xs">Scripts & Flows that will be available via MCP</span>
+				<div class="flex flex-wrap gap-1">
+					{#if includedRunnables.length > 0 && includedRunnables.length <= 5}
+						{#each includedRunnables as scriptOrFlow (scriptOrFlow)}
+							<Badge rounded small color="blue">{scriptOrFlow}</Badge>
+						{/each}
+					{:else if includedRunnables.length > 0}
+						{#each includedRunnables.slice(0, 3) as scriptOrFlow (scriptOrFlow)}
+							<Badge rounded small color="blue">{scriptOrFlow}</Badge>
+						{/each}
+						<Badge rounded small color="dark-gray">
+							+{includedRunnables.length - 3} more
+						</Badge>
+					{:else}
+						<p class="text-xs text-primary">
+							{warning}
+						</p>
+					{/if}
+				</div>
+
+				<span class="block text-xs mt-2">API endpoint tools that will be available via MCP</span>
+				<div class="flex flex-wrap gap-1">
+					{#each mcpEndpointTools as endpoint (endpoint.name)}
+						<Popover notClickable>
+							{#snippet text()}
+								<div class="flex flex-col gap-1">
+									<div class="text-xs">{endpoint.description}</div>
+									<div class="text-xs">
+										{endpoint.method}
+										{endpoint.path}
+									</div>
+								</div>
+							{/snippet}
+							<Badge rounded small color="green">{endpoint.name}</Badge>
+						</Popover>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	{/if}
+</div>

package/package/components/mcp/McpScopeSelector.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    workspaceId: string;
+    scope: string;
+}
+declare const McpScopeSelector: import("svelte").Component<Props, {}, "scope">;
+type McpScopeSelector = ReturnType<typeof McpScopeSelector>;
+export default McpScopeSelector;

package/package/components/meltComponents/Popover.svelte

@@ -35,7 +35,6 @@ const { elements: { trigger: _trigger, content: _content, arrow, close: closeEle
     escapeBehavior: untrack(() => escapeBehavior),
     openFocus: untrack(() => openFocus),
     onOpenChange: ({ curr, next }) => {
-        console.log('Popover open state changed:', { curr, next });
         if (curr != next) {
             dispatch('openChange', next);
             if (!next) {

package/package/components/raw_apps/RawAppPreview.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import {} from '../../stores';
 import RawAppBackgroundRunner from './RawAppBackgroundRunner.svelte';
 import { htmlContent } from './utils';
-import { onMount } from 'svelte';
+import { onMount, untrack } from 'svelte';
 let { workspace, user, secret, path, runnables } = $props();
 let iframe = $state();
 // Get initial hash from parent URL to pass to iframe
@@ -11,11 +11,15 @@ onMount(() => {
 });
 // Use blob URL instead of srcDoc to give the iframe a proper origin.
 // srcDoc iframes have "null" origin which breaks URL constructor in routers.
+// untrack(user) so that userStore refreshes don't regenerate the blob URL
+// and cause the iframe to fully reload (losing all state).
+// The user context is only needed for initial render.
 let blobUrl = $derived.by(() => {
     if (!secret)
         return undefined;
+    const u = untrack(() => user);
     const baseUrl = typeof window !== 'undefined' ? window.location.origin : '';
-    const html = htmlContent(workspace, secret, { ctx: user, workspace }, baseUrl, initialHash);
+    const html = htmlContent(workspace, secret, { ctx: u, workspace }, baseUrl, initialHash);
     const blob = new Blob([html], { type: 'text/html' });
     return URL.createObjectURL(blob);
 });

package/package/components/recording/FlowRecordingReplay.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { workspaceStore } from '../../stores';
 import FlowStatusViewer from '../FlowStatusViewer.svelte';
-import FlowViewer from '../FlowViewer.svelte';
+import FlowViewer, {} from '../FlowViewer.svelte';
+import FlowGraphViewer from '../FlowGraphViewer.svelte';
 import FlowProgressBar from '../flows/FlowProgressBar.svelte';
 import FlowExecutionStatus from '../runs/FlowExecutionStatus.svelte';
 import { setActiveReplay } from './flowRecording.svelte';
@@ -9,13 +10,18 @@ import { Button } from '../common';
 import Tooltip from '../meltComponents/Tooltip.svelte';
 import { InfoIcon, LogOut, Play, Square } from 'lucide-svelte';
 import { onDestroy } from 'svelte';
-let { recording } = $props();
-let replayState = $state('loaded');
+let { recording, selectedTab = $bindable(), replayState = $bindable(), hideControls = false, hideTabs = false } = $props();
+if (selectedTab === undefined) {
+    selectedTab = 'ui';
+}
+if (replayState === undefined) {
+    replayState = 'loaded';
+}
 let rootJobId = $state(undefined);
 let rootInitialJob = $state(undefined);
 let job = $state(undefined);
 let done = $derived(job?.type === 'CompletedJob');
-function stop() {
+export function stop() {
     setActiveReplay(undefined);
     job = undefined;
     initRecording();
@@ -23,8 +29,7 @@ function stop() {
 function findRootJobId(data) {
     for (const [id, recorded] of Object.entries(data.jobs)) {
         const j = recorded.initial_job;
-        if ((j.job_kind === 'flow' || j.job_kind === 'flowpreview') &&
-            !j.parent_job) {
+        if ((j.job_kind === 'flow' || j.job_kind === 'flowpreview') && !j.parent_job) {
             return id;
         }
     }
@@ -76,9 +81,14 @@ function rebaseTimestamps(data, rootId) {
     }
     for (const recorded of Object.values(data.jobs)) {
         offsetJobTimestamps(recorded.initial_job);
+        if (recorded.initial_job?.flow_status)
+            offsetFlowStatus(recorded.initial_job.flow_status);
         for (const event of recorded.events) {
-            if (event.data?.job)
+            if (event.data?.job) {
                 offsetJobTimestamps(event.data.job);
+                if (event.data.job.flow_status)
+                    offsetFlowStatus(event.data.job.flow_status);
+            }
             if (event.data?.flow_status)
                 offsetFlowStatus(event.data.flow_status);
         }
@@ -135,7 +145,9 @@ function fixEventOrdering(data, rootId) {
         rootEvents[completedIdx].t = maxSubJobT + 50;
     }
 }
-function startReplay() {
+export function startReplay() {
+    if (!rootJobId)
+        return;
     // JSON round-trip to unwrap reactive proxies and strip non-cloneable properties
     const snapshot = JSON.parse(JSON.stringify(recording));
     fixEventOrdering(snapshot, rootJobId);
@@ -144,6 +156,7 @@ function startReplay() {
     rootInitialJob = buildInitialJob(snapshot, rootJobId);
     job = undefined;
     replayState = 'playing';
+    selectedTab = 'ui';
 }
 onDestroy(() => {
     setActiveReplay(undefined);
@@ -159,52 +172,81 @@ onDestroy(() => {
 			</p>
 		</div>
 	</div>
-{:else if replayState === 'loaded'}
+{:else}
 	<div class="flex flex-col gap-4">
-		<div class="flex items-center justify-between">
-			<div class="flex items-center gap-2">
-				<h2 class="text-lg font-semibold text-emphasis">{recording.flow_path}</h2>
-				<Tooltip placement="bottom">
-					<InfoIcon size={16} class="text-tertiary" />
-					{#snippet text()}
-												<span class="text-2xs" >
-							Recorded {new Date(recording.recorded_at).toLocaleString()} &mdash;
-							{(recording.total_duration_ms / 1000).toFixed(1)}s
-						</span>
-											{/snippet}
-				</Tooltip>
+		{#if !hideControls}
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-2">
+					<h2 class="text-lg font-semibold text-emphasis">
+						{replayState === 'playing' ? 'Replaying: ' : ''}{recording.flow_path}
+					</h2>
+					<Tooltip placement="bottom">
+						<InfoIcon size={16} class="text-tertiary" />
+						{#snippet text()}
+							<span class="text-2xs">
+								Recorded {new Date(recording.recorded_at).toLocaleString()} &mdash;
+								{(recording.total_duration_ms / 1000).toFixed(1)}s
+							</span>
+						{/snippet}
+					</Tooltip>
+				</div>
+				{#if replayState === 'loaded'}
+					<Button variant="contained" color="blue" onclick={startReplay} startIcon={{ icon: Play }}>
+						Play
+					</Button>
+				{:else}
+					<Button
+						variant="border"
+						size="xs"
+						onclick={stop}
+						startIcon={{ icon: done ? LogOut : Square }}
+					>
+						{done ? 'Exit' : 'Stop'}
+					</Button>
+				{/if}
 			</div>
-			<Button variant="contained" color="blue" on:click={startReplay} startIcon={{ icon: Play }}>
-				Play
-			</Button>
-		</div>
-		<FlowViewer flow={recording.flow} noSummary />
-	</div>
-{:else if replayState === 'playing' && rootJobId}
-	<div class="flex flex-col gap-4">
-		<div class="flex items-center justify-between">
-			<h2 class="text-lg font-semibold text-emphasis">Replaying: {recording.flow_path}</h2>
-			<Button variant="border" size="xs" on:click={stop} startIcon={{ icon: done ? LogOut : Square }}>
-				{done ? 'Exit' : 'Stop'}
-			</Button>
-		</div>
-		<FlowProgressBar {job} slim textPosition="bottom" showStepId />
-		{#if job}
-			<FlowExecutionStatus
-				{job}
-				workspaceId={$workspaceStore}
-				isOwner={false}
-				innerModules={job?.flow_status?.modules}
-				suspendStatus={{ val: {} }}
-			/>
 		{/if}
-		<FlowStatusViewer
-			jobId={rootJobId}
-			initialJob={rootInitialJob}
-			bind:job
-			workspaceId={$workspaceStore}
-			wideResults
-			showLogsWithResult
-		/>
+
+		<FlowViewer
+			flow={recording.flow}
+			noSummary
+			noInput
+			hideDefaultInputs
+			showStepHint={replayState === 'loaded'}
+			bind:selectedTab
+			{hideTabs}
+			initTab="ui"
+		>
+			{#snippet graphContent()}
+				{#if replayState === 'playing' && rootJobId}
+					<div class="flex flex-col gap-4">
+						<FlowProgressBar {job} slim textPosition="bottom" showStepId />
+						{#if job}
+							<FlowExecutionStatus
+								{job}
+								workspaceId={$workspaceStore}
+								isOwner={false}
+								innerModules={job?.flow_status?.modules}
+								suspendStatus={{ val: {} }}
+							/>
+						{/if}
+						<FlowStatusViewer
+							jobId={rootJobId}
+							initialJob={rootInitialJob}
+							bind:job
+							workspaceId={$workspaceStore}
+							wideResults
+							showLogsWithResult
+							hideFlowResult={!done}
+						/>
+					</div>
+				{:else}
+					<div class="flow-root w-full pb-4">
+						<p class="text-2xs text-tertiary py-1">Click on a step to see its details</p>
+						<FlowGraphViewer hideDefaultInputs flow={recording.flow!} overflowAuto />
+					</div>
+				{/if}
+			{/snippet}
+		</FlowViewer>
 	</div>
 {/if}

package/package/components/recording/FlowRecordingReplay.svelte.d.ts

@@ -1,7 +1,16 @@
+import { type TabValue } from '../FlowViewer.svelte';
 import type { FlowRecording } from './types';
+type ReplayState = 'loaded' | 'playing';
 interface Props {
     recording: FlowRecording;
+    selectedTab?: TabValue;
+    replayState?: ReplayState;
+    hideControls?: boolean;
+    hideTabs?: boolean;
 }
-declare const FlowRecordingReplay: import("svelte").Component<Props, {}, "">;
+declare const FlowRecordingReplay: import("svelte").Component<Props, {
+    stop: () => void;
+    startReplay: () => void;
+}, "selectedTab" | "replayState">;
 type FlowRecordingReplay = ReturnType<typeof FlowRecordingReplay>;
 export default FlowRecordingReplay;