windmill-components 1.511.1 → 1.531.0

package/package/components/AIAgentLogViewer.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">import { JobService } from '../gen';
+import { workspaceStore } from '../stores';
+import FlowLogViewerWrapper from './FlowLogViewerWrapper.svelte';
+import { z } from 'zod';
+import { onMount } from 'svelte';
+const resultSchema = z.object({
+    messages: z.array(z.object({
+        role: z.string(),
+        content: z.string().optional(),
+        agent_action: z
+            .union([
+            z.object({
+                type: z.literal('tool_call'),
+                job_id: z.string(),
+                module_id: z.string(),
+                function_name: z.string()
+            }),
+            z.object({
+                type: z.literal('message')
+            })
+        ])
+            .optional()
+    }))
+});
+let { tools, agentJob, workspaceId, onToolJobLoaded, storedToolCallJobs } = $props();
+const fakeModuleStates = $state({});
+async function loadMissingJobs(agentActions) {
+    const promises = agentActions.map(async (toolCall, idx) => {
+        if (toolCall.type === 'tool_call') {
+            let job = storedToolCallJobs?.[idx];
+            if (!job || job.type !== 'CompletedJob') {
+                job = await JobService.getJob({
+                    id: toolCall.job_id,
+                    workspace: workspaceId ?? $workspaceStore
+                });
+            }
+            fakeModuleStates[idx.toString()] = {
+                args: job.args,
+                type: job['success'] ? 'Success' : 'Failure',
+                logs: job.logs,
+                result: job['result'],
+                job_id: toolCall.job_id
+            };
+            onToolJobLoaded?.(job, idx);
+        }
+        else {
+            fakeModuleStates[idx.toString()] = {
+                type: 'Success',
+                args: {},
+                logs: '',
+                result: toolCall.content
+            };
+        }
+    });
+    await Promise.all(promises);
+}
+let job = $state(undefined);
+async function loadToolCalls() {
+    let parsedResult = resultSchema.safeParse(agentJob.result);
+    if (!parsedResult.success) {
+        console.error('Invalid result', parsedResult.error);
+        return;
+    }
+    let agentActions = parsedResult.data.messages
+        .map((m) => (m.agent_action?.type === 'message'
+        ? {
+            type: 'message',
+            content: m.content
+        }
+        : m.agent_action?.type === 'tool_call'
+            ? {
+                type: 'tool_call',
+                job_id: m.agent_action.job_id,
+                module_id: m.agent_action.module_id,
+                function_name: m.agent_action.function_name
+            }
+            : undefined))
+        .filter((m) => m !== undefined);
+    await loadMissingJobs(agentActions);
+    job = {
+        ...agentJob,
+        raw_flow: {
+            modules: agentActions
+                .map((toolCall, idx) => {
+                if (toolCall.type === 'message') {
+                    return {
+                        id: idx.toString(),
+                        value: {
+                            type: 'identity'
+                        }
+                    };
+                }
+                else {
+                    const module = tools.find((m) => m.summary === toolCall.function_name);
+                    return module
+                        ? {
+                            ...module,
+                            id: idx.toString()
+                        }
+                        : undefined;
+                }
+            })
+                .filter((m) => m !== undefined)
+        }
+    };
+}
+onMount(() => {
+    loadToolCalls();
+});
+</script>
+
+{#if job}
+	<div class="p-2">
+		<FlowLogViewerWrapper
+			{job}
+			localModuleStates={fakeModuleStates}
+			{workspaceId}
+			render={true}
+			onSelectedIteration={async () => {}}
+			mode="aiagent"
+		/>
+	</div>
+{/if}

package/package/components/AIAgentLogViewer.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type CompletedJob, type FlowModule, type Job } from '../gen';
+interface Props {
+    tools: FlowModule[];
+    agentJob: Partial<CompletedJob> & Pick<CompletedJob, 'id'> & {
+        type: 'CompletedJob';
+    };
+    workspaceId?: string | undefined;
+    storedToolCallJobs?: Record<number, Job>;
+    onToolJobLoaded?: (job: Job, idx: number) => void;
+}
+declare const AiAgentLogViewer: import("svelte").Component<Props, {}, "">;
+type AiAgentLogViewer = ReturnType<typeof AiAgentLogViewer>;
+export default AiAgentLogViewer;

package/package/components/AppConnectInner.svelte

@@ -155,20 +155,20 @@ export async function loadResourceTypes() {
     });
     connectsManual = availableRts
         .filter((x) => connectAndManual.includes(x) || !Object.keys(connects ?? {}).includes(x))
-        .map((x) => [
-        x,
-        apiTokenApps[x] ?? {
+        .map((x) => ({
+        key: x,
+        ...(apiTokenApps[x] ?? {
             instructions: '',
             img: undefined,
             linkedSecret: undefined
-        }
-    ])
-        .sort((a, b) => a[0].localeCompare(b[0]));
+        })
+    }))
+        .sort((a, b) => a.key.localeCompare(b.key));
     const filteredNativeLanguages = filteredConnectsManual?.filter((o) => nativeLanguagesCategory?.includes(o[0]) ?? false);
     try {
         filteredConnectsManual = [
             ...(filteredNativeLanguages ?? []),
-            ...(filteredConnectsManual ?? []).filter(([key, _]) => !nativeLanguagesCategory.includes(key))
+            ...(filteredConnectsManual ?? []).filter(({ key }) => !nativeLanguagesCategory.includes(key))
         ];
     }
     catch (e) { }
@@ -443,7 +443,7 @@ let editScopes = $state(false);
 		{filter}
 		items={connectsManual}
 		bind:filteredItems={filteredConnectsManual}
-		f={(x) => x[0]}
+		f={(x) => x.key}
 	/>
 	{#if step == 1}
 		<div class="w-12/12 pb-2 flex flex-row my-1 gap-1">
@@ -507,7 +507,7 @@ let editScopes = $state(false);
 
 		<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 			{#if filteredConnectsManual}
-				{#each filteredConnectsManual as [key, _]}
+				{#each filteredConnectsManual as { key }}
 					{#if nativeLanguagesCategory.includes(key)}
 						<Button
 							size="sm"
@@ -530,7 +530,7 @@ let editScopes = $state(false);
 		<div class="mt-8 mb-4"></div>
 		<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 			{#if filteredConnectsManual}
-				{#each filteredConnectsManual as [key, _]}
+				{#each filteredConnectsManual as { key }}
 					{#if !nativeLanguagesCategory.includes(key)}
 						<!-- Exclude specific items -->
 						<Button

package/package/components/AppConnectInner.svelte.d.ts

@@ -30,6 +30,6 @@ declare const AppConnectInner: $$__sveltets_2_IsomorphicComponent<Props, {
     loadResourceTypes: () => Promise<void>;
     next: () => Promise<void>;
     back: () => Promise<void>;
-}, "step" | "disabled" | "resourceType" | "manual" | "isGoogleSignin">;
+}, "step" | "disabled" | "manual" | "resourceType" | "isGoogleSignin">;
 type AppConnectInner = InstanceType<typeof AppConnectInner>;
 export default AppConnectInner;

package/package/components/ArgInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { preventDefault, stopPropagation, createBubbler } from 'svelte/legacy';
 const bubble = createBubbler();
 import { setInputCat as computeInputCat, debounce, emptyString, getSchemaFromProperties } from '../utils';
-import { DollarSign, Plus, X, Check, Loader2 } from 'lucide-svelte';
+import { DollarSign, Plus, X, Check, Loader2, ExternalLink } from 'lucide-svelte';
 import { createEventDispatcher, onDestroy, onMount, tick, untrack } from 'svelte';
 import { fade } from 'svelte/transition';
 import { Button, SecondsInput } from './common';
@@ -27,6 +27,7 @@ import DynSelect from './DynSelect.svelte';
 import MultiSelect from './select/MultiSelect.svelte';
 import { safeSelectItems } from './select/utils.svelte';
 import S3ArgInput from './common/fileUpload/S3ArgInput.svelte';
+import { base } from '../base';
 let { label = '', value = $bindable(), defaultValue = $bindable(undefined), description = $bindable(undefined), format = $bindable(undefined), contentEncoding = undefined, type = undefined, oneOf = $bindable(undefined), required = false, pattern = $bindable(undefined), valid = $bindable(undefined), enum_ = $bindable(undefined), disabled = false, itemsType = $bindable(undefined), displayHeader = true, properties = $bindable(undefined), nestedRequired = undefined, autofocus = null, compact = false, password = false, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noMargin = false, extra = {}, minW = true, prettifyHeader = false, resourceTypes, disablePortal = false, showSchemaExplorer = false, simpleTooltip = undefined, customErrorMessage = undefined, onlyMaskPassword = false, nullable = false, title = $bindable(undefined), placeholder = $bindable(undefined), order = $bindable(undefined), editor = $bindable(undefined), orderEditable = false, shouldDispatchChanges = false, noDefaultOnSelectFirst = false, helperScript = undefined, otherArgs = {}, lightHeader = false, diffStatus = undefined, hideNested = false, nestedParent = undefined, nestedClasses = '', displayType = true, css = undefined, appPath = undefined, computeS3ForceViewerPolicies = undefined, workspace = undefined, actions } = $props();
 $effect(() => {
     if (description == undefined) {
@@ -156,7 +157,7 @@ function evalValueToRaw() {
     }
     const newRawValue = value == undefined || value == null
         ? ''
-        : isObjectCat(inputCat)
+        : isObjectCat(inputCat) || (inputCat == 'list' && isListJson)
             ? JSON.stringify(value, null, 2)
             : isRawStringEditor(inputCat)
                 ? typeof value == 'string'
@@ -323,6 +324,32 @@ onDestroy(() => {
 });
 </script>
 
+{#snippet variableInput()}
+	{#if variableEditor}
+		<div class="text-sm text-tertiary">
+			{#if value && typeof value == 'string' && value?.startsWith('$var:')}
+				Linked to variable <button
+					class="text-blue-500 underline"
+					onclick={() => variableEditor?.editVariable?.(value.slice(5))}>{value.slice(5)}</button
+				>
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+{#snippet resourceInput()}
+	{#if variableEditor}
+		<div class="text-sm text-tertiary">
+			{#if value && typeof value == 'string' && value?.startsWith('$res:')}
+				Linked to resource <a
+					target="_blank"
+					href="{base}/resources#/resource/{value.slice(5)}"
+					class="text-blue-500 underline"
+					>{value.slice(5)} <span class="inline-block -mb-0.5"><ExternalLink size={14} /></span></a
+				>
+			{/if}
+		</div>
+	{/if}
+{/snippet}
 <!-- svelte-ignore a11y_autofocus -->
 <div
 	class={twMerge(
@@ -597,6 +624,15 @@ onDestroy(() => {
 											>{itemsLimit}/{value.length}: Load 50 more...</button
 										>
 									{/if}
+								{:else if typeof value === 'string'}
+									{#if value.startsWith('$res:')}
+										{@render resourceInput()}
+									{:else}
+										<div class="text-red-500">
+											Invalid string value: "{value}", expected array. Click add item to turn it
+											into an array.
+										</div>
+									{/if}
 								{/if}
 							{/key}
 						</div>
@@ -657,7 +693,7 @@ onDestroy(() => {
 		{:else if inputCat == 'dynselect'}
 			<DynSelect
 				name={label}
-				args={otherArgs}
+				{otherArgs}
 				{helperScript}
 				bind:value
 				entrypoint={format?.substring('dynselect_'.length) ?? ''}
@@ -667,6 +703,7 @@ onDestroy(() => {
 		{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format && format?.split('-').length > 1 && resourceTypes.includes(format?.substring('resource-'.length))))}
 			<!-- {JSON.stringify(value)} -->
 			<ObjectResourceInput
+				{disabled}
 				{defaultValue}
 				selectFirst={!noDefaultOnSelectFirst}
 				{disablePortal}
@@ -1067,17 +1104,8 @@ onDestroy(() => {
 						{/if}
 					{/if}
 				</div>
-				{#if variableEditor}
-					<div class="text-sm text-tertiary">
-						{#if value && typeof value == 'string' && value?.startsWith('$var:')}
-							Linked to variable <button
-								class="text-blue-500 underline"
-								onclick={() => variableEditor?.editVariable?.(value.slice(5))}
-								>{value.slice(5)}</button
-							>
-						{/if}
-					</div>
-				{/if}
+				{@render variableInput()}
+				{@render resourceInput()}
 			</div>
 		{/if}
 		{@render actions?.()}

package/package/components/ArgInput.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { EnumType, SchemaProperty } from '../common';
+import { type DynamicSelect } from '../utils';
 import type ItemPicker from './ItemPicker.svelte';
 import type SimpleEditor from './SimpleEditor.svelte';
 import type VariableEditor from './VariableEditor.svelte';
-import type { Script } from '../gen';
 import type { SchemaDiff } from './schema/schemaUtils.svelte';
 import type { ComponentCustomCSS } from './apps/types';
 interface Props {
@@ -58,15 +58,7 @@ interface Props {
     orderEditable?: boolean;
     shouldDispatchChanges?: boolean;
     noDefaultOnSelectFirst?: boolean;
-    helperScript?: {
-        type: 'inline';
-        path?: string;
-        lang: Script['language'];
-        code: string;
-    } | {
-        type: 'hash';
-        hash: string;
-    } | undefined;
+    helperScript?: DynamicSelect.HelperScript;
     otherArgs?: Record<string, any>;
     lightHeader?: boolean;
     diffStatus?: SchemaDiff | undefined;

package/package/components/AssignableTagsInner.svelte

@@ -86,6 +86,11 @@ loadCustomTags();
 			>For tags specific to some workspaces, use <pre class="inline">tag(workspace1+workspace2)</pre
 			></span
 		>
+		<span class="text-2xs text-tertiary"
+			>To exclude 'workspace1' and 'workspace2' from a tag, use <pre
+				class="inline">tag(^workspace1^workspace2)</pre
+			></span
+		>
 		<span class="text-2xs text-tertiary"
 			>For dynamic tags based on the workspace, use <pre class="inline">$workspace</pre>, e.g:
 			<pre class="inline">tag-$workspace</pre></span

package/package/components/AuthSettings.svelte

@@ -10,13 +10,14 @@ import AuthentikSetting from './AuthentikSetting.svelte';
 import AutheliaSetting from './AutheliaSetting.svelte';
 import KanidmSetting from './KanidmSetting.svelte';
 import ZitadelSetting from './ZitadelSetting.svelte';
+import NextcloudSetting from './NextcloudSetting.svelte';
 import CustomOauth from './CustomOauth.svelte';
 import { capitalize } from '../utils';
 import Toggle from './Toggle.svelte';
 import { ExternalLink, Plus } from 'lucide-svelte';
 import AzureOauthSettings from './AzureOauthSettings.svelte';
 import Tooltip from './Tooltip.svelte';
-let { snowflakeAccountIdentifier = $bindable(), oauths = $bindable(), requirePreexistingUserForOauth = $bindable(), scim } = $props();
+let { snowflakeAccountIdentifier = $bindable(), oauths = $bindable(), requirePreexistingUserForOauth = $bindable(), baseUrl, scim } = $props();
 $effect(() => {
     if (snowflakeAccountIdentifier == undefined) {
         snowflakeAccountIdentifier = '';
@@ -97,8 +98,9 @@ let tab = $state('sso');
 				<AutheliaSetting bind:value={oauths['authelia']} />
 				<KanidmSetting bind:value={oauths['kanidm']} />
 				<ZitadelSetting bind:value={oauths['zitadel']} />
+				<NextcloudSetting bind:value={oauths['nextcloud']} {baseUrl} />
 				{#each Object.keys(oauths) as k}
-					{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel'].includes(k) && 'login_config' in oauths[k]}
+					{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel', 'nextcloud'].includes(k) && 'login_config' in oauths[k]}
 						{#if oauths[k]}
 							<div class="flex flex-col gap-2 pb-4">
 								<div class="flex flex-row items-center gap-2">

package/package/components/AuthSettings.svelte.d.ts

@@ -2,6 +2,7 @@ interface Props {
     snowflakeAccountIdentifier?: string;
     oauths?: Record<string, any>;
     requirePreexistingUserForOauth?: boolean;
+    baseUrl?: string;
     scim?: import('svelte').Snippet;
 }
 declare const AuthSettings: import("svelte").Component<Props, {}, "snowflakeAccountIdentifier" | "oauths" | "requirePreexistingUserForOauth">;

package/package/components/AutoscalingConfigEditor.svelte

@@ -9,9 +9,31 @@ import { createEventDispatcher } from 'svelte';
 import Label from './Label.svelte';
 import MultiSelect from './select/MultiSelect.svelte';
 import { safeSelectItems } from './select/utils.svelte';
+import { ConfigService } from '../gen';
 let { config = $bindable(), worker_tags } = $props();
 const dispatch = createEventDispatcher();
 let test_input = $state(3);
+let healthCheckLoading = $state(false);
+let healthCheckResult = $state(null);
+async function checkKubernetesHealth() {
+    if (!config?.integration || config.integration.type !== 'kubernetes')
+        return;
+    healthCheckLoading = true;
+    healthCheckResult = null;
+    try {
+        await ConfigService.nativeKubernetesAutoscalingHealthcheck();
+        healthCheckResult = { success: true };
+    }
+    catch (error) {
+        healthCheckResult = {
+            success: false,
+            error: error.body || error.message || 'Unknown error'
+        };
+    }
+    finally {
+        healthCheckLoading = false;
+    }
+}
 </script>
 
 <div class="flex flex-row gap-16 pt-2">
@@ -253,7 +275,7 @@ let test_input = $state(3);
 					/>
 					<ToggleButton disabled value="ecs" label="ECS (soon)" {item} />
 					<ToggleButton disabled value="nomad" label="Nomad (soon)" {item} />
-					<ToggleButton disabled value="kubernetes" label="Kubernetes (soon)" {item} />
+					<ToggleButton value="kubernetes" label="Kubernetes" {item} />
 				{/snippet}
 			</ToggleButtonGroup>
 
@@ -315,6 +337,58 @@ let test_input = $state(3);
 					</div>
 				</div>
 			{/if}
+
+			{#if config.integration.type === 'kubernetes'}
+				<div class="text-sm text-secondary mb-3">
+					Kubernetes configuration is automatically inferred from the cluster environment. 
+					The worker group name and namespace will be detected automatically.
+				</div>
+
+				<div class="flex flex-col gap-3 mt-4">
+					<div class="flex items-center gap-2">
+						<Button 
+							color="blue" 
+							size="xs" 
+							variant="contained"
+							startIcon={{ icon: ExternalLink }}
+							href="https://windmill.dev/docs/core_concepts/autoscaling#kubernetes"
+							target="_blank"
+						>
+							Setup Guide (Roles & Bindings)
+						</Button>
+						<Button 
+							color="light" 
+							size="xs" 
+							variant="contained"
+							onclick={checkKubernetesHealth}
+							disabled={healthCheckLoading}
+						>
+							{healthCheckLoading ? 'Checking...' : 'Check Health'}
+						</Button>
+					</div>
+					
+					{#if healthCheckResult !== null}
+						<div class="p-2 rounded-md text-sm {healthCheckResult.success ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300' : 'bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400'}">
+							{#if healthCheckResult.success}
+								Kubernetes autoscaling is healthy
+							{:else}
+								{healthCheckResult.error}
+								{#if healthCheckResult.error?.includes('permissions') || healthCheckResult.error?.includes('role')}
+									<br><small>Please follow the setup guide above to configure proper RBAC permissions.</small>
+								{/if}
+							{/if}
+						</div>
+					{/if}
+
+					<div class="flex flex-row gap-2">
+						<Button color="light" size="xs" variant="contained">Test scaling</Button>
+						<div class="flex text-xs flex-row gap-2 items-center">
+							<input class="!w-16" type="number" bind:value={test_input} />
+							workers
+						</div>
+					</div>
+				</div>
+			{/if}
 		{:else}
 			<ToggleButtonGroup selected={'script'} disabled class="mb-4 mt-2">
 				{#snippet children({ item })}
@@ -322,7 +396,7 @@ let test_input = $state(3);
 					<ToggleButton value="script" label="Custom script" {item} />
 					<ToggleButton value="ecs" label="ECS (soon)" {item} />
 					<ToggleButton value="nomad" label="Nomad (soon)" {item} />
-					<ToggleButton value="kubernetes" label="Kubernetes (soon)" {item} />
+					<ToggleButton value="kubernetes" label="Kubernetes" {item} />
 				{/snippet}
 			</ToggleButtonGroup>