windmill-components 1.623.1 → 1.642.0

package/package/components/flows/content/FlowModuleEarlyStop.svelte

@@ -24,8 +24,8 @@ function checkIfBreakableParent(flowStoreValue) {
     }
     return null;
 }
-let raise_error_message_stop_after_all_if = $state(flowModule.stop_after_all_iters_if?.error_message !== undefined);
-let raise_error_message_stop_after_if = $state(flowModule.stop_after_if?.error_message !== undefined);
+let raise_error_message_stop_after_all_if = $state(flowModule.stop_after_all_iters_if?.error_message != undefined);
+let raise_error_message_stop_after_if = $state(flowModule.stop_after_if?.error_message != undefined);
 let { isLoop, isParallelLoop } = $derived(flowModule.value.type === 'forloopflow' || flowModule.value.type === 'whileloopflow'
     ? { isLoop: true, isParallelLoop: flowModule.value.parallel ?? false }
     : { isLoop: false, isParallelLoop: false });
@@ -134,8 +134,7 @@ let breakableParent = $derived(checkIfBreakableParent(flowStore.val));
 						<PropPickerWrapper
 							noPadding
 							notSelectable
-							flow_input={stepPropPicker.pickableProperties.flow_input}
-							pickableProperties={undefined}
+							pickableProperties={stepPropPicker.pickableProperties}
 							result={earlyStopResult}
 							extraResults={isLoop ? { all_iters: result } : undefined}
 							on:select={({ detail }) => {
@@ -148,8 +147,8 @@ let breakableParent = $derived(checkIfBreakableParent(flowStore.val));
 								lang="javascript"
 								bind:code={flowModule.stop_after_if.expr}
 								class="h-full"
-								extraLib={`declare const result = ${JSON.stringify(earlyStopResult)};` +
-									`\n declare const flow_input = ${JSON.stringify(stepPropPicker.pickableProperties.flow_input)};` +
+								extraLib={`declare const result = ${JSON.stringify(earlyStopResult)};\n` +
+									stepPropPicker.extraLib +
 									(isLoop ? `\ndeclare const all_iters = ${JSON.stringify(result)};` : '')}
 							/>
 						</PropPickerWrapper>
@@ -271,8 +270,7 @@ let breakableParent = $derived(checkIfBreakableParent(flowStore.val));
 						<PropPickerWrapper
 							notSelectable
 							noPadding
-							flow_input={stepPropPicker.pickableProperties.flow_input}
-							pickableProperties={undefined}
+							pickableProperties={stepPropPicker.pickableProperties}
 							{result}
 							on:select={({ detail }) => {
 								editor?.insertAtCursor(detail)
@@ -284,8 +282,8 @@ let breakableParent = $derived(checkIfBreakableParent(flowStore.val));
 								lang="javascript"
 								bind:code={flowModule.stop_after_all_iters_if.expr}
 								class="h-full"
-								extraLib={`declare const result = ${JSON.stringify(result)};` +
-									`\ndeclare const flow_input = ${JSON.stringify(stepPropPicker.pickableProperties.flow_input)};`}
+								extraLib={`declare const result = ${JSON.stringify(result)};\n` +
+									stepPropPicker.extraLib}
 							/>
 						</PropPickerWrapper>
 					</div>

package/package/components/flows/content/FlowModuleHeader.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">import Button from '../../common/button/Button.svelte';
 import {} from '../../../gen';
 import { createEventDispatcher, getContext } from 'svelte';
-import { Bed, Database, ExternalLink, Gauge, GitFork, Pen, PhoneIncoming, RefreshCcw, Repeat, Square, Pin, Save } from 'lucide-svelte';
+import { Bed, Database, Gauge, GitFork, Pen, PhoneIncoming, RefreshCcw, Repeat, Square, Pin, Save } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
 import { sendUserToast } from '../../../utils';
 import { getLatestHashForScript } from '../../../scripts';
 import FlowModuleWorkerTagSelect from './FlowModuleWorkerTagSelect.svelte';
 let { module, tag } = $props();
-const { scriptEditorDrawer } = getContext('FlowEditorContext');
+const { scriptEditorDrawer, flowEditorDrawer } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 let customUi = getContext('customUi');
 let popoverClasses = 'center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600';
@@ -128,13 +128,16 @@ let popoverClasses = 'center-center rounded p-2 bg-blue-100 text-blue-800 border
 			variant="subtle"
 			on:click={async () => {
 				if (module.value.type == 'flow') {
-					window.open(`/flows/edit/${module.value.path}`, '_blank', 'noopener,noreferrer')
+					$flowEditorDrawer?.openDrawer(module.value.path, () => {
+						dispatch('reload')
+						sendUserToast('Flow has been updated')
+					})
 				}
 			}}
 			startIcon={{ icon: Pen }}
 			iconOnly={false}
 		>
-			Edit <ExternalLink size={12} />
+			Edit
 		</Button>
 		<Button
 			unifiedSize="sm"

package/package/components/flows/content/FlowModuleSleep.svelte

@@ -65,7 +65,7 @@ let isSleepEnabled = $derived(Boolean(flowModule.sleep));
 						argName="sleep"
 						{schema}
 						{previousModuleId}
-						argExtra={{ seconds: true }}
+						argExtra={{ seconds: true, clearable: false }}
 						bind:editor
 					/>
 				</PropPickerWrapper>

package/package/components/flows/content/FlowModuleWorkerTagSelect.svelte

@@ -8,7 +8,7 @@ const dispatch = createEventDispatcher();
 loadWorkerGroups();
 async function loadWorkerGroups() {
     if (!$workerTags) {
-        $workerTags = await WorkerService.getCustomTags({ workspace: $workspaceStore });
+        $workerTags = await WorkerService.getCustomTagsForWorkspace({ workspace: $workspaceStore });
     }
 }
 </script>

package/package/components/flows/content/FlowResult.svelte

@@ -1,34 +1,86 @@
-<script lang="ts">import FlowPreviewResult from '../../FlowPreviewResult.svelte';
+<script lang="ts">import FlowExecutionStatus from '../../runs/FlowExecutionStatus.svelte';
 import { workspaceStore } from '../../../stores';
 import FlowCard from '../common/FlowCard.svelte';
 import Button from '../../common/button/Button.svelte';
+import JobDetailHeader from '../../runs/JobDetailHeader.svelte';
+import DisplayResult from '../../DisplayResult.svelte';
+import LogViewer from '../../LogViewer.svelte';
 let { job, isOwner, suspendStatus, noEditor, onOpenDetails } = $props();
 </script>
 
 <FlowCard {noEditor} title="Flow result">
-	{#if job && isOwner !== undefined && suspendStatus}
-		<div class="px-4 py-2">
-			<FlowPreviewResult
-				{job}
-				workspaceId={$workspaceStore}
-				{isOwner}
-				hideFlowResult={false}
-				hideDownloadLogs={false}
-				innerModules={[]}
-				{suspendStatus}
-				{extra}
-				hideJobId
-			/>
-		</div>
-	{:else}
-		<p class="p-4 text-secondary text-xs">
-			The result of the flow will be the result of the last node.
-		</p>
-	{/if}
-</FlowCard>
+	<div class="px-4 py-2">
+		{#if job}
+			<!-- Side-by-side result and logs for simple jobs -->
+			<div class="w-full flex flex-row gap-2 justify-start mb-4">
+				<div class="flex-1 min-w-min">
+					{#if job}
+						<JobDetailHeader {job} extraCompact />
+					{/if}
+				</div>
+
+				<Button variant="default" unifiedSize="md" onClick={() => onOpenDetails?.()}
+					>Open preview</Button
+				>
+			</div>
+
+			{#if isOwner !== undefined && suspendStatus}
+				<FlowExecutionStatus
+					{job}
+					workspaceId={$workspaceStore}
+					{isOwner}
+					innerModules={job?.flow_status?.modules}
+					{suspendStatus}
+				/>
 
-{#snippet extra()}
-	<div class="flex justify-end">
-		<Button variant="default" size="xs" on:click={() => onOpenDetails?.()}>Open details</Button>
+				<div class="py-2"></div>
+			{/if}
+
+			<div class="flex flex-col gap-4 h-full w-full">
+				<!-- Result Column -->
+				<div class="flex flex-col">
+					<h3 class="text-xs font-semibold text-emphasis mb-1">Result</h3>
+					<div class="flex-1 overflow-auto rounded-md border bg-surface-tertiary p-4 max-h-[400px]">
+						{#if job !== undefined && (job['result_stream'] || (job.type == 'CompletedJob' && 'result' in job && job.result !== undefined))}
+							<DisplayResult
+								workspaceId={job?.workspace_id}
+								result_stream={job['result_stream']}
+								jobId={job?.id}
+								result={'result' in job ? job.result : undefined}
+								language={job?.language}
+								isTest={false}
+							/>
+						{:else if job}
+							<div class="w-full h-full flex items-center justify-center text-secondary text-sm">
+								No output is available yet
+							</div>
+						{:else}
+							<div class="w-full h-full flex items-center justify-center">
+								<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+							</div>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Logs Column -->
+				<div class="flex flex-col">
+					<h3 class="text-xs font-semibold text-emphasis mb-1">Logs</h3>
+					<div class="max-h-[400px] rounded-md border overflow-auto">
+						<LogViewer
+							jobId={job.id}
+							duration={job?.['duration_ms']}
+							mem={job?.['mem_peak']}
+							isLoading={job?.['running'] == false}
+							content={job?.logs}
+							tag={job?.tag}
+						/>
+					</div>
+				</div>
+			</div>
+		{:else}
+			<p class="p-4 text-secondary text-xs">
+				The result of the flow will be the result of the last node.
+			</p>
+		{/if}
 	</div>
-{/snippet}
+</FlowCard>

package/package/components/flows/content/FlowRetries.svelte

@@ -197,7 +197,7 @@ const u32Max = 4294967295;
 							>max</button
 						>
 					</div>
-					<div class="text-xs font-bold !mt-2">Delay</div>
+					<div class="text-xs font-bold !mt-4">Delay</div>
 					<SecondsInput bind:seconds={flowModuleRetry.constant.seconds} />
 				{/if}
 			{:else if delayType === 'exponential'}

package/package/components/flows/content/FlowSettings.svelte

@@ -5,7 +5,7 @@ import FlowCard from '../common/FlowCard.svelte';
 import Toggle from '../../Toggle.svelte';
 import { Alert, Button, SecondsInput } from '../../common';
 import { getContext } from 'svelte';
-import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
+import { enterpriseLicense, userStore } from '../../../stores';
 import { isCloudHosted } from '../../../cloud';
 import Tooltip from '../../Tooltip.svelte';
 import SimpleEditor from '../../SimpleEditor.svelte';
@@ -192,9 +192,7 @@ let numberOfAdvancedOptionsOn = $derived(activeAdvancedOptionNames.length);
 						{#if flowStore.val.value.cache_ttl}
 							<div class="flex gap-x-4 flex-col gap-1 mt-2" transition:slide={{ duration: 120 }}>
 								<div class="text-2xs text-secondary">How long to keep the cache valid</div>
-								<div class="-mt-5">
-									<SecondsInput bind:seconds={flowStore.val.value.cache_ttl} />
-								</div>
+								<SecondsInput bind:seconds={flowStore.val.value.cache_ttl} />
 								<Toggle
 									size="2xs"
 									bind:checked={
@@ -537,9 +535,8 @@ let numberOfAdvancedOptionsOn = $derived(activeAdvancedOptionNames.length);
 					{#if flowStore.val.dedicated_worker}
 						<div class="mt-2">
 							<Alert type="info" title="Require dedicated workers">
-								One worker in a worker group needs to be configured with dedicated worker set to: <pre
-									>{$workspaceStore}:flow/{$pathStore}</pre
-								>
+								A worker group needs to be configured to listen to this flow. Select it in the dedicated
+								workers section of the worker group configuration.
 							</Alert>
 						</div>
 					{/if}

package/package/components/flows/content/McpOAuthConnect.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">import { workspaceStore } from '../../../stores';
+import { McpOauthService, OauthService, ResourceService, VariableService } from '../../../gen';
+import { Button } from '../../common';
+import Label from '../../Label.svelte';
+import Path from '../../Path.svelte';
+import { sendUserToast } from '../../../toast';
+import { sameTopDomainOrigin } from '../../../cookies';
+import { onDestroy } from 'svelte';
+let { onConnected, onCancel } = $props();
+let serverUrl = $state('');
+let discoveryResult = $state(null);
+let selectedScopes = $state([]);
+let resourceName = $state('');
+let resourcePath = $state('');
+let pathError = $state('');
+let status = $state('idle');
+let error = $state(null);
+async function discoverOAuth() {
+    status = 'discovering';
+    error = null;
+    try {
+        discoveryResult = await McpOauthService.discoverMcpOauth({
+            requestBody: { mcp_server_url: serverUrl }
+        });
+        selectedScopes = discoveryResult?.scopes_supported ?? [];
+        try {
+            const urlObj = new URL(serverUrl);
+            resourceName = urlObj.hostname.replace(/\./g, '_');
+        }
+        catch {
+            resourceName = 'mcp_server';
+        }
+        status = 'discovered';
+    }
+    catch (e) {
+        console.error('Error discovering OAuth settings', e);
+        const errorMessage = e.body?.message || e.body || e.message || 'Unknown error';
+        error = `Failed to discover OAuth settings: ${errorMessage}`;
+        status = 'idle';
+    }
+}
+function startOAuth() {
+    const url = new URL(`/api/mcp/oauth/start`, window.location.origin);
+    url.searchParams.set('mcp_server_url', serverUrl);
+    url.searchParams.set('scopes', selectedScopes.join(','));
+    const popup = window.open(url.toString(), '_blank', 'popup=true');
+    if (!popup) {
+        error = 'Popup blocked. Please allow popups for this site.';
+        return;
+    }
+    window.addEventListener('message', handleOAuthMessage);
+    window.addEventListener('storage', handleStorageEvent);
+    status = 'connecting';
+}
+function handleOAuthMessage(event) {
+    if (!sameTopDomainOrigin(event.origin, window.location.origin))
+        return;
+    if (event.data.type === 'MCP_CONNECTED') {
+        cleanup();
+        createMcpResource(event.data);
+    }
+    else if (event.data.type === 'MCP_ERROR') {
+        cleanup();
+        error = event.data.error;
+        status = 'discovered';
+    }
+}
+function handleStorageEvent(event) {
+    if (event.key === 'mcp-oauth-callback') {
+        cleanup();
+        try {
+            const data = JSON.parse(event.newValue || '{}');
+            localStorage.removeItem('mcp-oauth-callback');
+            if (data.type === 'MCP_CONNECTED') {
+                createMcpResource(data);
+            }
+        }
+        catch (e) {
+            console.error('Error parsing MCP OAuth callback', e);
+        }
+    }
+}
+function cleanup() {
+    window.removeEventListener('message', handleOAuthMessage);
+    window.removeEventListener('storage', handleStorageEvent);
+}
+async function createMcpResource(data) {
+    try {
+        let accountId;
+        if (data.expires_in && data.refresh_token) {
+            const accountIdStr = await OauthService.createAccount({
+                workspace: $workspaceStore,
+                requestBody: {
+                    refresh_token: data.refresh_token,
+                    expires_in: data.expires_in,
+                    client: 'mcp',
+                    mcp_server_url: data.mcp_server_url
+                }
+            });
+            accountId = Number(accountIdStr);
+        }
+        await VariableService.createVariable({
+            workspace: $workspaceStore,
+            requestBody: {
+                path: resourcePath,
+                value: data.access_token,
+                is_secret: true,
+                is_oauth: true,
+                account: accountId,
+                description: `MCP OAuth token for ${data.mcp_server_url}`
+            }
+        });
+        await ResourceService.createResource({
+            workspace: $workspaceStore,
+            requestBody: {
+                resource_type: 'mcp',
+                path: resourcePath,
+                value: {
+                    name: resourceName,
+                    url: data.mcp_server_url,
+                    token: `$var:${resourcePath}`
+                },
+                description: `MCP server connected via OAuth`
+            }
+        });
+        sendUserToast('Connected to MCP server');
+        onConnected(resourcePath, resourceName);
+    }
+    catch (e) {
+        error = e.body?.message || e.message || 'Failed to create resource';
+        status = 'discovered';
+    }
+}
+onDestroy(cleanup);
+</script>
+
+<div class="border rounded p-4 bg-surface-secondary flex flex-col gap-4">
+	<div class="flex justify-between items-center">
+		<span class="font-semibold text-sm">Connect MCP Server with OAuth</span>
+		<Button size="xs" color="light" onClick={onCancel}>Cancel</Button>
+	</div>
+
+	<Label label="MCP Server URL">
+		<input
+			type="url"
+			bind:value={serverUrl}
+			placeholder="https://mcp.example.com"
+			class="text-sm w-full"
+			disabled={status === 'connecting'}
+		/>
+	</Label>
+
+	{#if status === 'idle'}
+		<Button size="sm" onClick={discoverOAuth} disabled={!serverUrl}>Discover OAuth Settings</Button>
+	{:else if status === 'discovering'}
+		<div class="text-sm text-secondary">Discovering OAuth settings...</div>
+	{:else if status === 'discovered' && discoveryResult}
+		<div class="text-xs text-green-600 dark:text-green-400">
+			&#10003; OAuth supported
+			{#if discoveryResult.supports_dynamic_registration}
+				(Dynamic Client Registration available)
+			{/if}
+		</div>
+
+		{#if discoveryResult.scopes_supported && discoveryResult.scopes_supported.length > 0}
+			<Label label="Select Scopes">
+				<div class="flex flex-col flex-wrap gap-2">
+					{#each discoveryResult.scopes_supported as scope}
+						<label class="flex flex-row items-center gap-2 text-xs cursor-pointer">
+							<input
+								type="checkbox"
+								checked={selectedScopes.includes(scope)}
+								onchange={(e) => {
+									const target = e.target as HTMLInputElement
+									if (target.checked) {
+										selectedScopes = [...selectedScopes, scope]
+									} else {
+										selectedScopes = selectedScopes.filter((s) => s !== scope)
+									}
+								}}
+								class="!w-4 !h-4"
+							/>
+							{scope}
+						</label>
+					{/each}
+				</div>
+			</Label>
+		{/if}
+
+		<Label label="Resource Name">
+			<input
+				type="text"
+				bind:value={resourceName}
+				placeholder="my-mcp-server"
+				class="text-sm w-full"
+			/>
+		</Label>
+
+		<Path
+			bind:path={resourcePath}
+			bind:error={pathError}
+			initialPath=""
+			namePlaceholder={resourceName}
+			kind="resource"
+		/>
+
+		<Button size="sm" onClick={startOAuth} disabled={!resourcePath || pathError !== ''}>
+			Connect with OAuth
+		</Button>
+	{:else if status === 'connecting'}
+		<div class="text-sm text-secondary">Complete authentication in popup window...</div>
+	{/if}
+
+	{#if error}
+		<div class="text-xs text-red-600 dark:text-red-400">{error}</div>
+	{/if}
+</div>

package/package/components/flows/content/McpOAuthConnect.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    onConnected: (resourcePath: string, resourceName: string) => void;
+    onCancel: () => void;
+}
+declare const McpOAuthConnect: import("svelte").Component<Props, {}, "">;
+type McpOAuthConnect = ReturnType<typeof McpOAuthConnect>;
+export default McpOAuthConnect;

package/package/components/flows/content/McpToolEditor.svelte

@@ -7,8 +7,7 @@ let loadToolsCached = createCache(({ workspace, path }) => workspace && path &&
     : undefined, {
     initial: { workspace: get(workspaceStore), path: undefined, refreshCount: 0 },
     invalidateMs: 1000 * 60
-} // Cache for 60 seconds
-);
+});
 </script>
 
 <script lang="ts">import Section from '../../Section.svelte';
@@ -21,24 +20,25 @@ import ResourcePicker from '../../ResourcePicker.svelte';
 import { usePromise } from '../../../svelte5Utils.svelte';
 import { untrack } from 'svelte';
 import Alert from '../../common/alert/Alert.svelte';
+import McpOAuthConnect from './McpOAuthConnect.svelte';
 let { tool = $bindable() } = $props();
+let showOAuthForm = $state(false);
 let refreshCount = $state(0);
+let resourcePicker = $state();
 let tools = usePromise(async () => await loadToolsCached({
     workspace: $workspaceStore,
     path: tool.value.resource_path,
     refreshCount
 }), { loadInit: false, clearValueOnRefresh: false });
-// Options for the multiselect
 let toolOptions = $derived(safeSelectItems((tools.value ?? []).map((t) => t.name)));
-// Watch for resource_path changes and refresh tools
+let resourcePath = $derived(tool.value.resource_path);
+let error = $derived(tools.error?.body?.message || tools.error?.message);
 $effect(() => {
-    // Track reactive dependencies
-    tool.value.resource_path;
+    resourcePath;
     $workspaceStore;
     refreshCount;
-    // Trigger refresh when resource_path or workspace changes
     untrack(() => {
-        if (tool.value.resource_path?.length > 0) {
+        if (resourcePath?.length > 0) {
             tools.refresh();
         }
     });
@@ -52,14 +52,19 @@ $effect(() => {
     }
 });
 $effect(() => {
-    if (tool.value.resource_path?.length > 0 && tool.summary?.length === 0) {
+    if (resourcePath?.length > 0 && tool.summary?.length === 0) {
         tool.summary = `MCP: ${tool.value.resource_path}`;
     }
 });
+async function handleOAuthConnected(resourcePath, resourceName) {
+    await resourcePicker?.refreshResources();
+    tool.value.resource_path = resourcePath;
+    tool.summary = `MCP: ${resourceName}`;
+    showOAuthForm = false;
+}
 </script>
 
 <div class="flex flex-col gap-4 p-4">
-	<!-- Explanatory Section -->
 	<Alert type="info" title="MCP Client Configuration">
 		{#snippet children()}
 			<p class="mb-2 text-sm">
@@ -74,15 +79,26 @@ $effect(() => {
 		{/snippet}
 	</Alert>
 
-	<!-- Resource Path Section -->
 	<div class="w-full">
 		<Label label="MCP Resource">
-			<ResourcePicker resourceType="mcp" bind:value={tool.value.resource_path} />
+			<ResourcePicker bind:this={resourcePicker} resourceType="mcp" bind:value={tool.value.resource_path} />
 		</Label>
 	</div>
 
-	{#if tool.value.resource_path?.length > 0}
-		<!-- Summary Section -->
+	{#if !resourcePath}
+		{#if !showOAuthForm}
+			<Button size="xs" color="light" onClick={() => (showOAuthForm = true)}>
+				Connect with OAuth
+			</Button>
+		{:else}
+			<McpOAuthConnect
+				onConnected={handleOAuthConnected}
+				onCancel={() => (showOAuthForm = false)}
+			/>
+		{/if}
+	{/if}
+
+	{#if resourcePath?.length > 0}
 		<div class="w-full">
 			<Label label="Summary">
 				<input
@@ -94,13 +110,12 @@ $effect(() => {
 			</Label>
 		</div>
 
-		<!-- Available Tools Section -->
 		<Section label="Available Tools">
 			{#snippet action()}
 				<Button
 					size="xs"
 					color="light"
-					on:click={() => (refreshCount += 1)}
+					onClick={() => (refreshCount += 1)}
 					startIcon={{ icon: RefreshCw }}
 					disabled={tools.status === 'loading'}
 				>
@@ -108,39 +123,37 @@ $effect(() => {
 				</Button>
 			{/snippet}
 			<div class="w-full flex flex-col gap-2">
-				{#if tools.error}
-					<div class="text-xs text-red-600 p-2 border border-red-300 rounded bg-red-50">
-						{tools.error?.body?.message ||
-							tools.error?.message ||
-							'Failed to load tools from MCP server'}
-					</div>
-				{/if}
-				<div class="max-h-48 overflow-y-auto border rounded p-2 bg-surface-secondary">
-					{#if tools.status === 'loading'}
+				{#if error}
+					<div class="text-xs text-red-600 dark:text-red-400 mb-4"
+						>{`Failed to load tools from MCP server: ${error}`}</div
+					>
+				{:else if tools.status === 'loading'}
+					<div class="max-h-48 overflow-y-auto border rounded p-2 bg-surface-secondary">
 						<div class="text-xs text-secondary italic">Loading tools...</div>
-					{:else if (tools.value ?? []).length === 0}
+					</div>
+				{:else if (tools.value ?? []).length === 0 && !error}
+					<div class="max-h-48 overflow-y-auto border rounded p-2 bg-surface-secondary">
 						<div class="text-xs text-secondary italic">
-							{tools.error
-								? 'Failed to load tools. Please check the resource path and try again.'
-								: 'No tools loaded yet. Click "Refresh Tools" to fetch tools from the MCP server.'}
+							No tools loaded yet. Click "Refresh Tools" to fetch tools from the MCP server.
 						</div>
-					{:else}
+					</div>
+				{:else if (tools.value ?? []).length > 0}
+					<div class="max-h-48 overflow-y-auto border rounded p-2 bg-surface-secondary">
 						<div class="flex flex-col gap-1">
-							{#each tools.value ?? [] as tool}
+							{#each tools.value ?? [] as mcpTool}
 								<div class="text-xs">
-									<span class="font-semibold">{tool.name}</span>
-									{#if tool.description}
-										<span class="text-secondary">— {tool.description}</span>
+									<span class="font-semibold">{mcpTool.name}</span>
+									{#if mcpTool.description}
+										<span class="text-secondary">— {mcpTool.description}</span>
 									{/if}
 								</div>
 							{/each}
 						</div>
-					{/if}
-				</div>
+					</div>
+				{/if}
 			</div>
 		</Section>
 
-		<!-- Tool Filtering Section -->
 		{#if tool.value.include_tools && tool.value.exclude_tools}
 			<Section label="Tool Filtering">
 				<div class="w-full flex flex-col gap-3">

package/package/components/flows/content/McpToolEditor.svelte.d.ts

@@ -1,7 +1,6 @@
 import type { McpTool } from '../agentToolUtils';
 interface Props {
     tool: McpTool;
-    noEditor: boolean;
 }
 declare const McpToolEditor: import("svelte").Component<Props, {}, "tool">;
 type McpToolEditor = ReturnType<typeof McpToolEditor>;