windmill-components 1.511.1 → 1.531.0

package/package/components/git_sync/PushWorkspaceModal.svelte

@@ -0,0 +1,320 @@
+<script lang="ts">import Modal from '../common/modal/Modal.svelte';
+import { Button, Alert } from '../common';
+import { Loader2, CheckCircle2, XCircle, Terminal, ChevronDown, ChevronUp } from 'lucide-svelte';
+import GitDiffPreview from '../GitDiffPreview.svelte';
+import { JobService } from '../../gen';
+import { workspaceStore } from '../../stores';
+import hubPaths from '../../hubPaths.json';
+import { tryEvery } from '../../utils';
+let { open = $bindable(false), gitRepoResourcePath, uiState, onSuccess, isNewConnection = false, onSaveWithoutInit } = $props();
+// Job state
+let previewJobId = $state(null);
+let previewJobStatus = $state(undefined);
+let isPreviewLoading = $state(false);
+let previewError = $state('');
+let applyJobId = $state(null);
+let applyJobStatus = $state(undefined);
+let isApplying = $state(false);
+let applyError = $state('');
+// UI state
+let showCliInstructions = $state(false);
+let previewResult = $state(null);
+// Note: Escape key is handled by the Modal component itself
+// Reset state when modal opens/closes
+$effect(() => {
+    if (!open) {
+        previewJobId = null;
+        previewJobStatus = undefined;
+        isPreviewLoading = false;
+        previewError = '';
+        applyJobId = null;
+        applyJobStatus = undefined;
+        isApplying = false;
+        applyError = '';
+        showCliInstructions = false;
+        previewResult = null;
+    }
+});
+// Execute job with dry run or actual execution
+async function executeJob(isDryRun) {
+    const isPreview = isDryRun;
+    if (isPreview) {
+        isPreviewLoading = true;
+        previewError = '';
+        previewResult = null;
+        previewJobId = null;
+        previewJobStatus = undefined;
+    }
+    else {
+        isApplying = true;
+        applyError = '';
+        applyJobId = null;
+        applyJobStatus = undefined;
+    }
+    try {
+        const workspace = $workspaceStore;
+        if (!workspace)
+            return;
+        const payload = {
+            workspace_id: workspace,
+            repo_url_resource_path: gitRepoResourcePath,
+            dry_run: isDryRun,
+            pull: false,
+            settings_json: JSON.stringify(uiState)
+        };
+        const jobId = await JobService.runScriptByPath({
+            workspace,
+            path: hubPaths.gitInitRepo,
+            requestBody: payload,
+            skipPreprocessor: true
+        });
+        if (isPreview) {
+            previewJobId = jobId;
+            previewJobStatus = 'running';
+        }
+        else {
+            applyJobId = jobId;
+            applyJobStatus = 'running';
+        }
+        let jobSuccess = false;
+        let result = {};
+        await tryEvery({
+            tryCode: async () => {
+                const testResult = await JobService.getCompletedJob({ workspace, id: jobId });
+                jobSuccess = !!testResult.success;
+                if (jobSuccess) {
+                    const jobResult = await JobService.getCompletedJobResult({ workspace, id: jobId });
+                    result = jobResult;
+                }
+            },
+            timeoutCode: async () => {
+                try {
+                    await JobService.cancelQueuedJob({
+                        workspace,
+                        id: jobId,
+                        requestBody: { reason: `${isPreview ? 'Preview' : 'Apply'} job timed out after 60s` }
+                    });
+                }
+                catch (err) { }
+            },
+            interval: 500,
+            timeout: 60000
+        });
+        if (isPreview) {
+            previewJobStatus = jobSuccess ? 'success' : 'failure';
+            if (jobSuccess) {
+                previewResult = result;
+            }
+            else {
+                previewError = 'Preview failed';
+            }
+        }
+        else {
+            applyJobStatus = jobSuccess ? 'success' : 'failure';
+            if (jobSuccess) {
+                onSuccess?.();
+            }
+            else {
+                applyError = 'Push failed';
+            }
+        }
+    }
+    catch (e) {
+        const errorMsg = e?.message || 'Operation failed';
+        if (isPreview) {
+            previewJobStatus = 'failure';
+            previewError = errorMsg;
+        }
+        else {
+            applyJobStatus = 'failure';
+            applyError = errorMsg;
+        }
+    }
+    finally {
+        if (isPreview) {
+            isPreviewLoading = false;
+        }
+        else {
+            isApplying = false;
+        }
+    }
+}
+</script>
+
+
+<Modal bind:open title="Push Workspace to Git Repository" class="sm:max-w-4xl">
+	<div class="flex flex-col gap-4">
+		<!-- Description -->
+		<p class="text-sm text-secondary">Push your current workspace content to the connected Git repository based on the configured filters.</p>
+		<p class="text-sm text-tertiary">Note: This will not update git sync settings in wmill.yaml. Settings can only be pulled from the repository as it is the source of truth.</p>
+
+		<!-- Settings display for new connections -->
+		{#if isNewConnection}
+			<div class="bg-surface-secondary border border-border rounded-lg p-3">
+				<h4 class="text-sm font-medium text-primary mb-2">Settings that will be pushed to repository</h4>
+				<div class="text-xs text-secondary space-y-1">
+					<div><strong>Include paths:</strong> {uiState.include_path?.join(', ') || 'None'}</div>
+					<div><strong>Exclude paths:</strong> {uiState.exclude_path?.join(', ') || 'None'}</div>
+					{#if uiState.extra_include_path?.length > 0}
+						<div><strong>Extra include paths:</strong> {uiState.extra_include_path.join(', ')}</div>
+					{/if}
+					<div><strong>Include types:</strong> {uiState.include_type?.join(', ') || 'None'}</div>
+				</div>
+				<p class="text-xs text-tertiary mt-2">To modify these settings, cancel and configure them in the workspace settings.</p>
+			</div>
+		{/if}
+
+		<!-- Preview section -->
+		{#if !previewResult}
+			<div class="flex justify-start pt-4">
+				<Button
+					size="md"
+					color="dark"
+					onclick={() => executeJob(true)}
+					disabled={isPreviewLoading}
+					startIcon={{
+						icon: isPreviewLoading ? Loader2 : undefined,
+						classes: isPreviewLoading ? 'animate-spin' : ''
+					}}
+				>
+					{isPreviewLoading ? 'Previewing...' : 'Preview changes'}
+				</Button>
+			</div>
+		{/if}
+
+		<!-- Job status for preview -->
+		{#if previewJobId}
+			<div class="flex items-center gap-2 text-xs text-tertiary">
+				{#if previewJobStatus === 'running'}
+					<Loader2 class="animate-spin" size={14} />
+				{:else if previewJobStatus === 'success'}
+					<CheckCircle2 size={14} class="text-green-600" />
+				{:else if previewJobStatus === 'failure'}
+					<XCircle size={14} class="text-red-700" />
+				{/if}
+				Preview job:
+				<a
+					target="_blank"
+					class="underline"
+					href={`/run/${previewJobId}?workspace=${$workspaceStore}`}
+				>
+					{previewJobId}
+				</a>
+			</div>
+		{/if}
+
+		<!-- Preview error -->
+		{#if previewError}
+			<Alert type="error" title="Preview failed">
+				{previewError}
+			</Alert>
+		{/if}
+
+		<!-- Preview results -->
+		{#if previewResult && !previewError}
+			<div class="space-y-3">
+				<h4 class="text-sm font-semibold text-primary">Changes to Push</h4>
+
+				{#if previewResult.changes?.length > 0}
+					<GitDiffPreview previewResult={previewResult} />
+				{:else}
+					<div class="bg-surface-secondary rounded-lg p-3">
+						<div class="text-sm text-tertiary">No changes to push to the repository.</div>
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Apply section (shown after successful preview) -->
+		{#if previewResult && !previewError}
+			{@const hasChanges = previewResult.changes?.length > 0}
+			{#if hasChanges}
+			<div class="border-t pt-4 mt-4">
+				<div class="flex justify-start gap-2">
+					<Button
+						size="xs"
+						onclick={() => executeJob(false)}
+						disabled={isApplying}
+						startIcon={{
+							icon: isApplying ? Loader2 : undefined,
+							classes: isApplying ? 'animate-spin' : ''
+						}}
+					>
+						{isApplying ?
+							(isNewConnection ? 'Initializing...' : 'Pushing...') :
+							(isNewConnection ? 'Initialize repo and save connection' : 'Push to repository')
+						}
+					</Button>
+					{#if isNewConnection && onSaveWithoutInit}
+						<Button
+							size="xs"
+							color="light"
+							onclick={onSaveWithoutInit}
+							disabled={isApplying}
+						>
+							Save without initializing repo
+						</Button>
+					{/if}
+				</div>
+			</div>
+			{/if}
+		{/if}
+
+		<!-- Job status for apply -->
+		{#if applyJobId}
+			<div class="flex items-center gap-2 text-xs text-tertiary">
+				{#if applyJobStatus === 'running'}
+					<Loader2 class="animate-spin" size={14} />
+				{:else if applyJobStatus === 'success'}
+					<CheckCircle2 size={14} class="text-green-600" />
+				{:else if applyJobStatus === 'failure'}
+					<XCircle size={14} class="text-red-700" />
+				{/if}
+				Push job:
+				<a
+					target="_blank"
+					class="underline"
+					href={`/run/${applyJobId}?workspace=${$workspaceStore}`}
+				>
+					{applyJobId}
+				</a>
+			</div>
+		{/if}
+
+		<!-- Apply error -->
+		{#if applyError}
+			<Alert type="error" title="Push failed">
+				{applyError}
+			</Alert>
+		{/if}
+
+		<!-- CLI Instructions (collapsible) -->
+		<div class="border-t pt-4 mt-4">
+			<button
+				class="flex items-center gap-2 text-sm text-secondary hover:text-primary transition-colors"
+				onclick={() => showCliInstructions = !showCliInstructions}
+			>
+				<Terminal size={16} />
+				<span>CLI Instructions</span>
+				{#if showCliInstructions}
+					<ChevronUp size={16} />
+				{:else}
+					<ChevronDown size={16} />
+				{/if}
+			</button>
+
+			{#if showCliInstructions}
+				<div class="mt-3 bg-surface-secondary rounded-lg p-3">
+					<pre class="text-xs bg-surface p-3 rounded overflow-x-auto whitespace-pre-wrap break-all">
+# Setup (only needed if local folder not initialized yet)
+npm install -g windmill-cli
+wmill workspace add {$workspaceStore} {$workspaceStore} {window.location.origin}
+wmill init --workspace {$workspaceStore} --repository {gitRepoResourcePath}
+
+# Pull workspace content to git repository
+wmill sync pull --workspace {$workspaceStore} --repository {gitRepoResourcePath}</pre>
+				</div>
+			{/if}
+		</div>
+	</div>
+</Modal>

package/package/components/git_sync/PushWorkspaceModal.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { SettingsObject } from '../../git-sync';
+interface Props {
+    open: boolean;
+    gitRepoResourcePath: string;
+    uiState: SettingsObject;
+    onSuccess?: () => void;
+    isNewConnection?: boolean;
+    onSaveWithoutInit?: () => void;
+}
+declare const PushWorkspaceModal: import("svelte").Component<Props, {}, "open">;
+type PushWorkspaceModal = ReturnType<typeof PushWorkspaceModal>;
+export default PushWorkspaceModal;

package/package/components/graph/FlowGraphV2.svelte

@@ -4,7 +4,7 @@ import { getContext, onDestroy, setContext, tick, untrack } from 'svelte';
 import { get, writable } from 'svelte/store';
 import '@xyflow/svelte/dist/base.css';
 import { SvelteFlow, ConnectionLineType, Controls, ControlButton, SvelteFlowProvider } from '@xyflow/svelte';
-import { graphBuilder, isTriggerStep } from './graphBuilder.svelte';
+import { graphBuilder, isTriggerStep, topologicalSort } from './graphBuilder.svelte';
 import ModuleNode from './renderers/nodes/ModuleNode.svelte';
 import InputNode from './renderers/nodes/InputNode.svelte';
 import BranchAllStart from './renderers/nodes/BranchAllStart.svelte';
@@ -29,16 +29,19 @@ import FlowYamlEditor from '../flows/header/FlowYamlEditor.svelte';
 import BranchOneEndNode from './renderers/nodes/branchOneEndNode.svelte';
 import { workspaceStore } from '../../stores';
 import SubflowBound from './renderers/nodes/SubflowBound.svelte';
-import { deepEqual } from 'fast-equals';
 import ViewportResizer from './ViewportResizer.svelte';
 import AssetNode, { computeAssetNodes } from './renderers/nodes/AssetNode.svelte';
 import AssetsOverflowedNode from './renderers/nodes/AssetsOverflowedNode.svelte';
+import AiToolNode, { computeAIToolNodes } from './renderers/nodes/AIToolNode.svelte';
+import NewAiToolNode from './renderers/nodes/NewAIToolNode.svelte';
+import { ChangeTracker } from '../../svelte5Utils.svelte';
+import { deepEqual } from 'fast-equals';
 let useDataflow = writable(false);
 const triggerContext = getContext('TriggerContext');
 let fullWidth = 0;
 let width = $state(0);
 let simplifiableFlow = $state(undefined);
-let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, selectedId = writable(undefined), path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moving = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), onTestUpTo = undefined, onEditInput = undefined, isOwner = false, onTestFlow = undefined, isRunning = false, onCancelTestFlow = undefined, onOpenPreview = undefined, onHideJobStatus = undefined, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = writable({}), flowHasChanged = false } = $props();
+let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, testModuleStates = undefined, selectedId = writable(undefined), path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moving = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), onTestUpTo = undefined, onEditInput = undefined, isOwner = false, onTestFlow = undefined, isRunning = false, onCancelTestFlow = undefined, onOpenPreview = undefined, onHideJobStatus = undefined, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = {}, flowHasChanged = false } = $props();
 setContext('FlowGraphContext', { selectedId, useDataflow });
 if (triggerContext && allowSimplifiedPoll) {
     if (isSimplifiable(modules)) {
@@ -63,9 +66,11 @@ function onModulesChange(modules) {
 let lastNodes = undefined;
 function layoutNodes(nodes) {
     let lastResult = lastNodes?.[1];
-    if (lastResult && nodes === lastNodes?.[0]) {
+    if (lastResult && deepEqual(nodes, lastNodes?.[0])) {
+        console.debug('layoutNodes', 'same nodes');
         return lastResult;
     }
+    console.debug('layoutNodes', nodes.length);
     let seenId = [];
     for (const n of nodes) {
         if (seenId.includes(n.id)) {
@@ -77,7 +82,7 @@ function layoutNodes(nodes) {
     const nodes2 = nodes.map((n) => {
         return { ...n, position: { x: 0, y: 0 } };
     });
-    for (const n of nodes.reverse()) {
+    for (const n of topologicalSort(nodes)) {
         const endId = n.id + '-end';
         if (nodeWidths[endId] != undefined) {
             nodeWidths[n.id] = Math.max(nodeWidths[n.id] ?? 0, nodeWidths[endId]);
@@ -111,12 +116,11 @@ function layoutNodes(nodes) {
     }
     const yOffset = insertable ? 100 : 0;
     const newNodes = dag.descendants().map((des) => ({
-        ...des.data,
         id: des.data.id,
         position: {
             x: des.x
                 ? // @ts-ignore
-                    (des.data.data.offset ?? 0) +
+                    (des.data.offset ?? 0) +
                         // @ts-ignore
                         des.x +
                         (fullSize ? fullWidth : width) / 2 -
@@ -195,14 +199,7 @@ let eventHandler = {
         onHideJobStatus?.();
     }
 };
-let lastModules = $state.snapshot(modules);
-let moduleCounter = $state(0);
-function onModulesChange2(modules) {
-    if (!deepEqual(modules, lastModules)) {
-        lastModules = $state.snapshot(modules);
-        moduleCounter++;
-    }
-}
+let moduleTracker = new ChangeTracker($state.snapshot(modules));
 let nodes = $state.raw([]);
 let edges = $state.raw([]);
 let height = $state(0);
@@ -220,9 +217,29 @@ async function updateStores() {
     if (graph.error) {
         return;
     }
-    let newGraph = graph;
-    newGraph.nodes.sort((a, b) => b.id.localeCompare(a.id));
-    [nodes, edges] = computeAssetNodes(layoutNodes(newGraph.nodes), newGraph.edges);
+    // console.log('compute')
+    let layoutedNodes = layoutNodes(Object.values(graph.nodes).map((n) => ({
+        id: n.id,
+        parentIds: n.parentIds,
+        offset: n.data.offset ?? 0
+    })));
+    let newNodes = layoutedNodes.map((n) => ({ ...n, ...graph.nodes[n.id] }));
+    let assetNodesResult = computeAssetNodes(newNodes.map((n) => ({
+        data: { assets: n.data?.assets },
+        id: n.id,
+        position: n.position
+    })));
+    newNodes = newNodes.map((n) => ({
+        ...n,
+        position: assetNodesResult.newNodePositions[n.id]
+    }));
+    let aiToolNodesResult = computeAIToolNodes(newNodes, eventHandler, insertable, flowModuleStates);
+    nodes = [
+        ...newNodes.map((n) => ({ ...n, position: aiToolNodesResult.newNodePositions[n.id] })),
+        ...assetNodesResult.newAssetNodes,
+        ...aiToolNodesResult.toolNodes
+    ];
+    edges = [...assetNodesResult.newAssetEdges, ...aiToolNodesResult.toolEdges, ...graph.edges];
     await tick();
     height = Math.max(...nodes.map((n) => n.position.y + NODE.height + 100), minHeight);
 }
@@ -242,7 +259,9 @@ const nodeTypes = {
     noBranch: NoBranchNode,
     trigger: TriggersNode,
     asset: AssetNode,
-    assetsOverflowed: AssetsOverflowedNode
+    assetsOverflowed: AssetsOverflowedNode,
+    aiTool: AiToolNode,
+    newAiTool: NewAiToolNode
 };
 const edgeTypes = {
     edge: BaseEdge,
@@ -261,15 +280,16 @@ $effect(() => {
 });
 $effect(() => {
     readFieldsRecursively(modules);
-    untrack(() => onModulesChange2(modules));
+    untrack(() => moduleTracker.track($state.snapshot(modules)));
 });
 let graph = $derived.by(() => {
-    moduleCounter;
+    moduleTracker.counter;
     return graphBuilder(untrack(() => modules), {
         disableAi,
         insertable,
-        flowModuleStates,
-        selectedId: $selectedId,
+        flowModuleStates: untrack(() => flowModuleStates),
+        testModuleStates: untrack(() => testModuleStates),
+        selectedId: untrack(() => $selectedId),
         path,
         newFlow,
         cache,
@@ -283,7 +303,7 @@ let graph = $derived.by(() => {
         suspendStatus,
         flowHasChanged,
         additionalAssetsMap: flowGraphAssetsCtx?.val.additionalAssetsMap
-    }, failureModule, preprocessorModule, eventHandler, success, $useDataflow, $selectedId, moving, simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
+    }, untrack(() => failureModule), untrack(() => preprocessorModule), eventHandler, success, $useDataflow, untrack(() => $selectedId), moving, simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
 });
 $effect(() => {
     ;
@@ -326,7 +346,11 @@ export function isNodeVisible(nodeId) {
 	<FlowYamlEditor bind:drawer={yamlEditorDrawer} />
 {/if}
 
-<div style={`height: ${height}px; max-height: ${maxHeight}px;`} bind:clientWidth={debouncedWidth}>
+<div
+	style={`height: ${height}px; max-height: ${maxHeight}px;`}
+	class="overflow-clip"
+	bind:clientWidth={debouncedWidth}
+>
 	{#if graph?.error}
 		<div class="center-center p-2">
 			<Alert title="Error parsing the flow" type="error" class="max-w-1/2">

package/package/components/graph/FlowGraphV2.svelte.d.ts

@@ -3,6 +3,7 @@ import { type GraphModuleState } from '.';
 import { type Writable } from 'svelte/store';
 import '@xyflow/svelte/dist/base.css';
 import { type InlineScript, type InsertKind, type onSelectedIteration } from './graphBuilder.svelte';
+import type { ModulesTestStates } from '../modulesTest.svelte';
 interface Props {
     success?: boolean | undefined;
     modules?: FlowModule[] | undefined;
@@ -12,6 +13,7 @@ interface Props {
     maxHeight?: number | undefined;
     notSelectable?: boolean;
     flowModuleStates?: Record<string, GraphModuleState> | undefined;
+    testModuleStates?: ModulesTestStates;
     selectedId?: Writable<string | undefined>;
     path?: string | undefined;
     newFlow?: boolean;
@@ -33,10 +35,10 @@ interface Props {
     individualStepTests?: boolean;
     flowJob?: Job | undefined;
     showJobStatus?: boolean;
-    suspendStatus?: Writable<Record<string, {
+    suspendStatus?: Record<string, {
         job: Job;
         nb: number;
-    }>>;
+    }>;
     onDelete?: (id: string) => void;
     onInsert?: (detail: {
         sourceId?: string;
@@ -48,6 +50,7 @@ interface Props {
         index: number;
         detail: string;
         isPreprocessor?: boolean;
+        agentId?: string;
         inlineScript?: InlineScript;
         script?: {
             path: string;