feat(frontend): wip

* fix(frontend): fix modifier text size

* fix(frontend): fix modifier text size

.env

@@ -1,11 +1,8 @@
 DATABASE_URL=postgres://postgres:changeme@db/windmill?sslmode=disable
 
-WM_IMAGE=ghcr.io/windmill-labs/windmill:main
-WM_LICENSE_KEY=""
-
-# For Enterprise Edition, comment the 2 lines above and uncomment below
+# For Enterprise Edition, use:
 # WM_IMAGE=ghcr.io/windmill-labs/windmill-ee:main
-# WM_LICENSE_KEY="<id>.<expiry>.<signature>"
+WM_IMAGE=ghcr.io/windmill-labs/windmill:main
 
 
 # To use another port than :80, setup the Caddyfile and the caddy section of the docker-compose to your needs: https://caddyserver.com/docs/getting-started

Dockerfile

@@ -180,7 +180,7 @@ RUN chmod 755 /usr/bin/deno
 
 COPY --from=nsjail /nsjail/nsjail /bin/nsjail
 
-COPY --from=oven/bun:1.0.2 /usr/local/bin/bun /usr/bin/bun
+COPY --from=oven/bun:1.0.4 /usr/local/bin/bun /usr/bin/bun
 
 # add the docker client to call docker from a worker if enabled
 COPY --from=docker:dind /usr/local/bin/docker /usr/local/bin/

backend/windmill-api/openapi.yaml

@@ -2326,6 +2326,65 @@ paths:
                 items:
                   type: string
 
+  /resources/type/hub/list:
+    get:
+      summary: list hub resource types
+      operationId: listHubResourceTypes
+      tags:
+        - resource
+      responses:
+        "200":
+          description: resource type details
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    id:
+                      type: string
+                    name:
+                      type: string
+                    schema: {}
+                  required:
+                    - id
+                    - name
+
+  /resources/type/hub/query:
+    get:
+      summary: query hub resource types by similarity
+      operationId: queryHubResourceTypes
+      tags:
+        - resource
+      parameters:
+        - name: text
+          description: query text
+          in: query
+          required: true
+          schema:
+            type: string
+        - name: limit
+          description: query limit
+          in: query
+          required: false
+          schema:
+            type: number
+      responses:
+        "200":
+          description: resource type details
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    id:
+                      type: string
+                  required:
+                    - id
+
   /scripts/hub/list:
     get:
       summary: list all available hub scripts

backend/windmill-api/src/apps.rs

@@ -15,7 +15,9 @@ use crate::{
     HTTP_CLIENT,
 };
 use axum::{
+    body::StreamBody,
     extract::{Extension, Json, Path, Query},
+    response::IntoResponse,
     routing::{delete, get, post},
     Router,
 };
@@ -35,7 +37,7 @@ use windmill_common::{
     jobs::{get_payload_tag_from_prefixed_path, JobPayload, RawCode},
     users::username_to_permissioned_as,
     utils::{
-        http_get_from_hub, list_elems_from_hub, not_found_if_none, paginate, Pagination, StripPath,
+        http_get_from_hub, not_found_if_none, paginate, query_elems_from_hub, Pagination, StripPath,
     },
 };
 use windmill_queue::{push, PushIsolationLevel, QueueTransaction};
@@ -544,14 +546,19 @@ async fn create_app(
     Ok((StatusCode::CREATED, app.path))
 }
 
-async fn list_hub_apps(ApiAuthed { email, .. }: ApiAuthed) -> JsonResult<serde_json::Value> {
-    let flows = list_elems_from_hub(
+async fn list_hub_apps(ApiAuthed { email, .. }: ApiAuthed) -> impl IntoResponse {
+    let (status_code, headers, response) = query_elems_from_hub(
         &HTTP_CLIENT,
         "https://hub.windmill.dev/searchUiData?approved=true",
         &email,
+        None,
     )
     .await?;
-    Ok(Json(flows))
+    Ok::<_, Error>((
+        status_code,
+        headers,
+        StreamBody::new(response.bytes_stream()),
+    ))
 }
 
 pub async fn get_hub_app_by_id(

backend/windmill-api/src/flows.rs

@@ -14,6 +14,8 @@ use crate::{
     webhook_util::{WebhookMessage, WebhookShared},
     HTTP_CLIENT,
 };
+use axum::body::StreamBody;
+use axum::response::IntoResponse;
 use axum::{
     extract::{Extension, Path, Query},
     routing::{delete, get, post},
@@ -26,6 +28,7 @@ use sql_builder::prelude::*;
 use sql_builder::SqlBuilder;
 use sqlx::{FromRow, Postgres, Transaction};
 use windmill_audit::{audit_log, ActionKind};
+use windmill_common::utils::query_elems_from_hub;
 use windmill_common::{
     db::UserDB,
     error::{self, to_anyhow, Error, JsonResult, Result},
@@ -33,9 +36,7 @@ use windmill_common::{
     jobs::JobPayload,
     schedule::Schedule,
     scripts::Schema,
-    utils::{
-        http_get_from_hub, list_elems_from_hub, not_found_if_none, paginate, Pagination, StripPath,
-    },
+    utils::{http_get_from_hub, not_found_if_none, paginate, Pagination, StripPath},
 };
 use windmill_queue::{push, schedule::push_scheduled_job, PushIsolationLevel, QueueTransaction};
 
@@ -156,14 +157,19 @@ async fn list_flows(
     Ok(Json(rows))
 }
 
-async fn list_hub_flows(ApiAuthed { email, .. }: ApiAuthed) -> JsonResult<serde_json::Value> {
-    let flows = list_elems_from_hub(
+async fn list_hub_flows(ApiAuthed { email, .. }: ApiAuthed) -> impl IntoResponse {
+    let (status_code, headers, response) = query_elems_from_hub(
         &HTTP_CLIENT,
         "https://hub.windmill.dev/searchFlowData?approved=true",
         &email,
+        None,
     )
     .await?;
-    Ok(Json(flows))
+    Ok::<_, Error>((
+        status_code,
+        headers,
+        StreamBody::new(response.bytes_stream()),
+    ))
 }
 
 async fn list_paths(

backend/windmill-api/src/lib.rs

@@ -205,6 +205,7 @@ pub async fn run_server(
                 .nest("/workers", workers::global_service())
                 .nest("/configs", configs::global_service())
                 .nest("/scripts", scripts::global_service())
+                .nest("/resources", resources::global_service())
                 .nest("/groups", groups::global_service())
                 .nest("/flows", flows::global_service())
                 .nest("/apps", apps::global_service().layer(cors.clone()))

backend/windmill-api/src/openai.rs

@@ -7,7 +7,6 @@ use crate::{
 use axum::{
     body::{Bytes, StreamBody},
     extract::{Extension, Path},
-    http::HeaderMap,
     response::IntoResponse,
     routing::post,
     Router,
@@ -170,12 +169,8 @@ async fn proxy(
         ));
     }
 
-    let mut headers = HeaderMap::new();
-    for (k, v) in response.headers().iter() {
-        headers.insert(k, v.clone());
-    }
-
     let status_code = response.status();
+    let headers = response.headers().clone();
     let stream = response.bytes_stream();
 
     Ok((status_code, headers, StreamBody::new(stream)))

backend/windmill-api/src/resources.rs

@@ -10,9 +10,12 @@ use crate::{
     db::{ApiAuthed, DB},
     users::{maybe_refresh_folders, require_owner_of_path, Tokened},
     webhook_util::{WebhookMessage, WebhookShared},
+    HTTP_CLIENT,
 };
 use axum::{
+    body::StreamBody,
     extract::{Extension, Path, Query},
+    response::IntoResponse,
     routing::{delete, get, post},
     Json, Router,
 };
@@ -27,10 +30,18 @@ use windmill_common::{
     db::UserDB,
     error::{Error, JsonResult, Result},
     jobs::QueuedJob,
-    utils::{not_found_if_none, paginate, require_admin, Pagination, StripPath},
+    utils::{
+        not_found_if_none, paginate, query_elems_from_hub, require_admin, Pagination, StripPath,
+    },
     variables,
 };
 
+pub fn global_service() -> Router {
+    Router::new()
+        .route("/type/hub/list", get(list_hub_resource_types))
+        .route("/type/hub/query", get(query_hub_resource_types))
+}
+
 pub fn workspaced_service() -> Router {
     Router::new()
         .route("/list", get(list_resources))
@@ -898,3 +909,46 @@ async fn update_resource_type(
 
     Ok(format!("resource_type {} updated", name))
 }
+
+async fn list_hub_resource_types(ApiAuthed { email, .. }: ApiAuthed) -> impl IntoResponse {
+    let (status_code, headers, response) = query_elems_from_hub(
+        &HTTP_CLIENT,
+        "https://hub.windmill.dev/resource_types/list",
+        &email,
+        None,
+    )
+    .await?;
+    Ok::<_, Error>((
+        status_code,
+        headers,
+        StreamBody::new(response.bytes_stream()),
+    ))
+}
+
+#[derive(Deserialize)]
+struct HubResourceTypesQuery {
+    text: String,
+    limit: Option<i64>,
+}
+async fn query_hub_resource_types(
+    ApiAuthed { email, .. }: ApiAuthed,
+    Query(query): Query<HubResourceTypesQuery>,
+) -> impl IntoResponse {
+    let mut query_params = vec![("text", query.text)];
+    if let Some(query_limit) = query.limit {
+        query_params.push(("limit", query_limit.to_string().clone()));
+    }
+    let (status_code, headers, response) = query_elems_from_hub(
+        &HTTP_CLIENT,
+        "https://hub.windmill.dev/resource_types/query",
+        &email,
+        Some(query_params),
+    )
+    .await?;
+
+    Ok::<_, Error>((
+        status_code,
+        headers,
+        StreamBody::new(response.bytes_stream()),
+    ))
+}

backend/windmill-api/src/scripts.rs

@@ -14,7 +14,9 @@ use crate::{
     HTTP_CLIENT,
 };
 use axum::{
+    body::StreamBody,
     extract::{Extension, Path, Query},
+    response::IntoResponse,
     routing::{get, post},
     Json, Router,
 };
@@ -41,8 +43,7 @@ use windmill_common::{
     },
     users::username_to_permissioned_as,
     utils::{
-        list_elems_from_hub, not_found_if_none, paginate, query_elems_from_hub, require_admin,
-        Pagination, StripPath,
+        not_found_if_none, paginate, query_elems_from_hub, require_admin, Pagination, StripPath,
     },
 };
 use windmill_queue::{self, schedule::push_scheduled_job, PushIsolationLevel, QueueTransaction};
@@ -233,14 +234,19 @@ async fn list_scripts(
     Ok(Json(rows))
 }
 
-async fn list_hub_scripts(ApiAuthed { email, .. }: ApiAuthed) -> JsonResult<serde_json::Value> {
-    let asks = list_elems_from_hub(
+async fn list_hub_scripts(ApiAuthed { email, .. }: ApiAuthed) -> impl IntoResponse {
+    let (status_code, headers, response) = query_elems_from_hub(
         &HTTP_CLIENT,
         "https://hub.windmill.dev/searchData?approved=true",
         &email,
+        None,
     )
     .await?;
-    Ok(Json(asks))
+    Ok::<_, Error>((
+        status_code,
+        headers,
+        StreamBody::new(response.bytes_stream()),
+    ))
 }
 
 #[derive(Deserialize)]
@@ -252,17 +258,26 @@ struct HubScriptsQuery {
 async fn query_hub_scripts(
     ApiAuthed { email, .. }: ApiAuthed,
     Query(query): Query<HubScriptsQuery>,
-) -> JsonResult<serde_json::Value> {
-    let asks = query_elems_from_hub(
+) -> impl IntoResponse {
+    let mut query_params = vec![("text", query.text)];
+    if let Some(query_kind) = query.kind {
+        query_params.push(("kind", query_kind.clone()));
+    }
+    if let Some(query_limit) = query.limit {
+        query_params.push(("limit", query_limit.to_string().clone()));
+    }
+    let (status_code, headers, response) = query_elems_from_hub(
         &HTTP_CLIENT,
         "https://hub.windmill.dev/scripts/query",
         &email,
-        &query.text,
-        &query.kind,
-        &query.limit,
+        Some(query_params),
     )
     .await?;
-    Ok(Json(asks))
+    Ok::<_, Error>((
+        status_code,
+        headers,
+        StreamBody::new(response.bytes_stream()),
+    ))
 }
 
 fn hash_script(ns: &NewScript) -> i64 {

backend/windmill-common/src/utils.rs

@@ -7,6 +7,7 @@
  */
 
 use crate::error::{Error, Result};
+use hyper::{HeaderMap, StatusCode};
 use rand::{distributions::Alphanumeric, thread_rng, Rng};
 use serde::{Deserialize, Serialize};
 use sha2::{Digest, Sha256};
@@ -73,43 +74,18 @@ pub fn not_found_if_none<T, U: AsRef<str>>(opt: Option<T>, kind: &str, name: U)
     }
 }
 
-#[cfg(feature = "reqwest")]
-pub async fn list_elems_from_hub(
-    http_client: &reqwest::Client,
-    url: &str,
-    email: &str,
-) -> Result<serde_json::Value> {
-    let rows = http_get_from_hub(http_client, url, email, false, None)
-        .await?
-        .json::<serde_json::Value>()
-        .await
-        .map_err(crate::error::to_anyhow)?;
-    Ok(rows)
-}
-
 #[cfg(feature = "reqwest")]
 pub async fn query_elems_from_hub(
     http_client: &reqwest::Client,
     url: &str,
     email: &str,
-    query_text: &str,
-    query_kind: &Option<String>,
-    query_limit: &Option<i64>,
-) -> Result<serde_json::Value> {
-    let mut query_params = vec![("text", query_text)];
-    if let Some(query_kind) = query_kind {
-        query_params.push(("kind", query_kind.as_str()));
-    }
-    let query_limit = query_limit.unwrap_or(0).to_string();
-    if query_limit.parse::<i64>().unwrap() > 0 {
-        query_params.push(("limit", query_limit.as_str()));
-    }
-    let rows = http_get_from_hub(http_client, url, email, false, Some(query_params))
-        .await?
-        .json::<serde_json::Value>()
-        .await
-        .map_err(crate::error::to_anyhow)?;
-    Ok(rows)
+    query_params: Option<Vec<(&str, String)>>,
+) -> Result<(StatusCode, HeaderMap, reqwest::Response)> {
+    let response = http_get_from_hub(http_client, url, email, false, query_params).await?;
+
+    let status = response.status();
+
+    Ok((status, response.headers().clone(), response))
 }
 
 #[cfg(feature = "reqwest")]
@@ -118,7 +94,7 @@ pub async fn http_get_from_hub(
     url: &str,
     email: &str,
     plain: bool,
-    query_params: Option<Vec<(&str, &str)>>,
+    query_params: Option<Vec<(&str, String)>>,
 ) -> Result<reqwest::Response> {
     let mut request = http_client
         .get(url)

backend/windmill-worker/nsjail/run.bun.config.proto

@@ -12,6 +12,7 @@ cwd: "/tmp/bun"
 
 clone_newnet: false
 clone_newuser: {CLONE_NEWUSER}
+clone_newcgroup: false
 
 keep_caps: false
 keep_env: true
@@ -28,6 +29,11 @@ mount {
 	is_bind: true
 }
 
+mount {
+    src: "/sys/fs"
+    dst: "/sys/fs"
+	is_bind: true
+}
 
 mount {
     src: "/lib64"
@@ -132,6 +138,7 @@ mount {
     dst: "/tmp/windmill/cache/bun"
     is_bind: true
     mandatory: false
+    rw: true
 }
 
 {SHARED_MOUNT}

backend/windmill-worker/src/deno_executor.rs

@@ -269,7 +269,10 @@ run().catch(async (e) => {{
         write_import_map_f
     )?;
 
-    let common_deno_proc_envs = get_common_deno_proc_envs(&token, base_internal_url).await;
+    let mut common_deno_proc_envs = get_common_deno_proc_envs(&token, base_internal_url).await;
+    if !*DISABLE_NSJAIL {
+        common_deno_proc_envs.insert("HOME".to_string(), job_dir.to_string());
+    }
 
     //do not cache local dependencies
     let reload = format!("--reload={base_internal_url}");

docker-compose.yml

@@ -35,8 +35,6 @@ services:
       - NUM_WORKERS=0
       - DISABLE_SERVER=false
       - METRICS_ADDR=false # (ee only, if set to true, metrics will be exposed on port 8001)
-      # LICENSE_KEY is only needed for the enterprise edition
-      - LICENSE_KEY=${WM_LICENSE_KEY}
     depends_on:
       db:
         condition: service_healthy
@@ -58,8 +56,6 @@ services:
       - KEEP_JOB_DIR=false
       - METRICS_ADDR=false
       - WORKER_GROUP=default
-      # LICENSE_KEY is only needed for the enterprise edition
-      - LICENSE_KEY=${WM_LICENSE_KEY}
     depends_on:
       db:
         condition: service_healthy

frontend/src/lib/components/Editor.svelte

@@ -84,6 +84,7 @@
 	export let folding = false
 	export let args: Record<string, any> | undefined = undefined
 	export let useWebsockets: boolean = true
+	export let listenEmptyChanges = false
 
 	languages.typescript.typescriptDefaults.setModeConfiguration({
 		completionItems: false,
@@ -920,7 +921,7 @@
 			timeoutModel && clearTimeout(timeoutModel)
 			timeoutModel = setTimeout(() => {
 				let ncode = getCode()
-				if (ncode != '') {
+				if (ncode != '' || listenEmptyChanges) {
 					code = ncode
 					dispatch('change', code)
 				}

frontend/src/lib/components/FlowBuilder.svelte

@@ -55,6 +55,7 @@
 	import { fade } from 'svelte/transition'
 	import { loadFlowModuleState } from './flows/flowStateUtils'
 	import FlowCopilotInputsModal from './copilot/FlowCopilotInputsModal.svelte'
+	import { snakeCase } from 'lodash'
 	import FlowBuilderTutorials from './FlowBuilderTutorials.svelte'
 
 	import FlowTutorials from './FlowTutorials.svelte'
@@ -662,15 +663,16 @@
 						copilotFlowInputs = {}
 						copilotFlowRequiredInputs = []
 						Object.entries(inputs).forEach(([key, expr]) => {
+							const snakeKey = snakeCase(key)
 							if (
 								key in stepSchema.properties &&
 								expr.includes('flow_input.') &&
 								!expr.includes('flow_input.iter') &&
-								(!$flowStore.schema || !(key in $flowStore.schema.properties)) // prevent overriding flow inputs
+								(!$flowStore.schema || !(snakeKey in $flowStore.schema.properties)) // prevent overriding flow inputs
 							) {
-								copilotFlowInputs[key] = stepSchema.properties[key]
-								if (stepSchema.required.includes(key)) {
-									copilotFlowRequiredInputs.push(key)
+								copilotFlowInputs[snakeKey] = stepSchema.properties[snakeKey]
+								if (stepSchema.required.includes(snakeKey)) {
+									copilotFlowRequiredInputs.push(snakeKey)
 								}
 							}
 						})
@@ -682,7 +684,7 @@
 						Object.entries(inputs).forEach(([key, expr]) => {
 							flowModule.value.input_transforms[key] = {
 								type: 'javascript',
-								expr
+								expr: expr.replaceAll(/flow_input\.([A-Za-z0-9_]+)/g, (_, p1) => 'flow_input.' + p1)
 							}
 						})
 					} else {
@@ -706,13 +708,14 @@
 								const schemaProperty = Object.entries(schema.properties).find(
 									(x) => x[0] === key
 								)?.[1]
+								const snakeKey = snakeCase(key)
 								if (
 									schemaProperty &&
-									(!$flowStore.schema || !(key in $flowStore.schema.properties)) // prevent overriding flow inputs
+									(!$flowStore.schema || !(snakeKey in $flowStore.schema.properties)) // prevent overriding flow inputs
 								) {
-									copilotFlowInputs[key] = schemaProperty
-									if (schema.required.includes(key)) {
-										copilotFlowRequiredInputs.push(key)
+									copilotFlowInputs[snakeKey] = schemaProperty
+									if (schema.required.includes(snakeKey)) {
+										copilotFlowRequiredInputs.push(snakeKey)
 									}
 								}
 							}
@@ -723,6 +726,7 @@
 
 						// programatically set step inputs
 						for (const key of Object.keys(flowModule.value.input_transforms)) {
+							const snakeKey = snakeCase(key)
 							flowModule.value.input_transforms[key] = {
 								type: 'javascript',
 								expr:
@@ -731,8 +735,8 @@
 											? 'flow_input.iter.value'
 											: pastModule
 											? 'results.' + pastModule.id
-											: 'flow_input.' + key
-										: 'flow_input.' + key
+											: 'flow_input.' + snakeKey
+										: 'flow_input.' + snakeKey
 							}
 						}
 					}

frontend/src/lib/components/WorkspaceGroup.svelte

@@ -271,6 +271,7 @@
 						deno={false}
 						useWebsockets={false}
 						fixedOverflowWidgets={false}
+						listenEmptyChanges
 						code={config?.init_bash ?? ''}
 						on:change={(e) => {
 							if (config) {
@@ -294,7 +295,6 @@
 					{#if dirty}
 						<div class="text-red-600 text-xs whitespace-nowrap">Non applied changes</div>
 					{/if}
-
 					<Button
 						variant="contained"
 						color="dark"

frontend/src/lib/components/apps/editor/ComponentHeader.svelte

@@ -78,63 +78,58 @@
 {/if}
 
 {#if selected && !connecting}
-	<div class="top-[-9px] -right-[8px] flex flex-row absolute gap-1.5 z-50">
+	<div
+		class="top-[-10px] right-[-6px] flex flex-row absolute gap-0.5 z-50 border bg-surface p-1 rounded-md shadow-sm"
+	>
 		{#if hasInlineEditor}
-			<button
+			<Button
 				title="Edit"
-				class={classNames(
-					'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
-					'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
-				)}
+				variant="contained"
+				color="light"
+				size="xs2"
 				on:click={() => dispatch('triggerInlineEditor')}
-				on:pointerdown|stopPropagation
 			>
 				{#if inlineEditorOpened}
 					<Pen aria-label="Unlock position" size={14} class="text-orange-500" />
 				{:else}
 					<Pen aria-label="Lock position" size={14} />
 				{/if}
-			</button>
+			</Button>
 		{/if}
 		{#if component.type === 'conditionalwrapper'}
 			<TabsDebug id={component.id} tabs={component.conditions ?? []} isConditionalDebugMode />
 		{:else if component.type === 'steppercomponent' || (component.type === 'tabscomponent' && component.configuration.tabsKind.type === 'static' && component.configuration.tabsKind.value === 'invisibleOnView')}
 			<TabsDebug id={component.id} tabs={component.tabs ?? []} />
 		{/if}
-		<button
+		<Button
 			title="Expand"
-			class={classNames(
-				'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
-				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
-			)}
 			on:click={() => dispatch('expand')}
-			on:pointerdown|stopPropagation
+			variant="contained"
+			color="light"
+			size="xs2"
 		>
 			<Expand aria-label="Expand position" size={14} />
-		</button>
-		<button
+		</Button>
+		<Button
 			title="Lock Position"
-			class={classNames(
-				'px-1 text-2xs py-0.5 font-bold w-fit border  rounded-sm cursor-pointer',
-				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
-			)}
 			on:click={() => dispatch('lock')}
-			on:pointerdown|stopPropagation
+			variant="contained"
+			color="light"
+			size="xs2"
 		>
 			{#if locked}
 				<Anchor aria-label="Unlock position" size={14} class="text-orange-500" />
 			{:else}
 				<Anchor aria-label="Lock position" size={14} />
 			{/if}
-		</button>
+		</Button>
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			draggable="false"
 			title="Move"
 			on:mousedown|stopPropagation|capture
 			class={classNames(
-				'px-1 text-2xs py-0.5 font-bold w-fit border cursor-move rounded-sm',
-				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800',
+				'text-2xs px-1.5 py-1 font-bold w-fit cursor-move rounded-md hover:bg-surface-hover',
 				'flex items-center justify-center'
 			)}
 		>

frontend/src/lib/components/apps/editor/TabsDebug.svelte

@@ -2,8 +2,10 @@
 	import ButtonDropdown from '$lib/components/common/button/ButtonDropdown.svelte'
 	import { classNames } from '$lib/utils'
 	import { MenuItem } from '@rgossiaux/svelte-headlessui'
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { getContext } from 'svelte'
 	import type { AppViewerContext } from '../types'
+	import Button from '$lib/components/common/button/Button.svelte'
+	import { ChevronDown } from 'lucide-svelte'
 
 	export let tabs: any[] = []
 	export let id: string
@@ -13,57 +15,55 @@
 	const { componentControl } = getContext<AppViewerContext>('AppViewerContext')
 
 	let isManuallySelected: boolean = false
-
-	const dispatch = createEventDispatcher()
+	let renderCount = 0
 </script>
 
-<button
-	title={isConditionalDebugMode ? 'Debug conditions' : 'Debug tabs'}
-	class={classNames(
-		'text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
-		isManuallySelected
-			? 'bg-red-100 text-red-600 border-red-500 hover:bg-red-200 hover:text-red-800'
-			: 'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
-	)}
-	on:click={() => dispatch('triggerInlineEditor')}
-	on:pointerdown|stopPropagation
->
-	<ButtonDropdown hasPadding={false}>
-		<svelte:fragment slot="items">
-			{#each tabs ?? [] as { }, index}
-				<MenuItem
-					on:click={() => {
-						$componentControl?.[id]?.setTab?.(index)
-						isManuallySelected = true
-					}}
-				>
-					<div
-						class={classNames(
-							'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
-						)}
-					>
-						{#if index === tabs.length - 1}
-							{isConditionalDebugMode ? `Debug default condition` : `Debug tab ${index + 1}`}
-						{:else}
-							{`Debug ${isConditionalDebugMode ? 'condition' : 'tab'} ${index + 1}`}
-						{/if}
-					</div>
-				</MenuItem>
-			{/each}
+<ButtonDropdown hasPadding={false}>
+	<svelte:fragment slot="buttonReplacement">
+		<Button
+			title={isConditionalDebugMode ? 'Debug conditions' : 'Debug tabs'}
+			variant="contained"
+			color={isManuallySelected ? 'red' : 'light'}
+			size="xs2"
+			nonCaptureEvent
+		>
+			<ChevronDown size={16} />
+		</Button>
+	</svelte:fragment>
+	<svelte:fragment slot="items">
+		{#each tabs ?? [] as { }, index}
 			<MenuItem
 				on:click={() => {
-					$componentControl?.[id]?.setTab?.(-1)
-					isManuallySelected = false
+					$componentControl?.[id]?.setTab?.(index)
+					isManuallySelected = true
 				}}
 			>
 				<div
 					class={classNames(
-						'!text-red-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+						'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
 					)}
 				>
-					{`Reset debug mode`}
+					{#if index === tabs.length - 1}
+						{isConditionalDebugMode ? `Debug default condition` : `Debug tab ${index + 1}`}
+					{:else}
+						{`Debug ${isConditionalDebugMode ? 'condition' : 'tab'} ${index + 1}`}
+					{/if}
 				</div>
 			</MenuItem>
-		</svelte:fragment>
-	</ButtonDropdown>
-</button>
+		{/each}
+		<MenuItem
+			on:click={() => {
+				$componentControl?.[id]?.setTab?.(-1)
+				isManuallySelected = false
+			}}
+		>
+			<div
+				class={classNames(
+					'!text-red-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+				)}
+			>
+				{`Reset debug mode`}
+			</div>
+		</MenuItem>
+	</svelte:fragment>
+</ButtonDropdown>

frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -278,10 +278,10 @@
 					{#if componentSettings.item.data.componentInput?.type === 'runnable'}
 						{#if Object.keys(componentSettings.item.data.componentInput.fields ?? {}).length > 0}
 							<div class="w-full">
-								<div class="flex flex-row items-center gap-2 text-sm font-semibold">
+								<div class="flex flex-row items-center gap-1 text-sm font-semibold">
 									Runnable Inputs
 
-									<Tooltip wrapperClass="flex">
+									<Tooltip>
 										The runnable inputs are inferred from the inputs of the flow or script
 										parameters this component is attached to.
 									</Tooltip>

frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte

@@ -17,7 +17,7 @@
 	<div class="flex flex-row items-center gap-2">
 		Transformer
 
-		<Tooltip wrapperClass="flex">
+		<Tooltip>
 			{"A transformer is an optional frontend script that is executed right after the component's script whose purpose is to do lightweight transformation in the browser. It takes the previous computation's result as `result`"}
 		</Tooltip>
 	</div>

frontend/src/lib/components/common/button/ButtonDropdown.svelte

@@ -7,7 +7,9 @@
 
 	export let hasPadding: boolean = true
 
-	const [popperRef, popperContent] = createPopperActions({ placement: 'auto' })
+	const [popperRef, popperContent] = createPopperActions({
+		placement: 'auto'
+	})
 
 	const popperOptions: PopperOptions<{}> = {
 		placement: 'bottom-end',

frontend/src/lib/components/common/kbd/Kbd.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { isMac } from '$lib/utils'
 	import { twMerge } from 'tailwind-merge'
 
 	export let kbdClass = ''
@@ -9,7 +10,7 @@
 		kbdClass = twMerge(
 			kbdClass,
 			'!text-[10px]  px-1',
-			isModifier ? '!text-lg ' : 'text-xs',
+			isModifier && isMac() ? '!text-lg ' : 'text-xs',
 			'leading-none'
 		)
 	} else {

frontend/src/lib/components/copilot/flow.ts

@@ -56,21 +56,21 @@ const additionalInfos: {
 	bun: `<contextual_information>
 We have to export a "main" function like this: "export async function main(...)" and specify the parameter types but do not call it.
 If needed, the standard fetch method is available globally, do not import it.
-You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}_resource".
-The resource type name has to be exactly as specified.
+You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}Resource".
+The following resource types are available:
 <resourceTypes>
 {resourceTypes}
 </resourceTypes>
-Only define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+Only define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
 </contextual_information>`,
 	python3: `<contextual_information>
 We have to export a "main" function and specify the parameter types but do not call it.
-You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}Resource".
-The resource type name has to be exactly as specified (has to be IN LOWERCASE).
+You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}_resource".
+The following resource types are available:
 <resourceTypes>
 {resourceTypes}
 </resourceTypes>
-Only define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+Only define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified (has to be IN LOWERCASE). If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
 </contextual_information>`
 }
 
@@ -79,11 +79,11 @@ const triggerPrompts: {
 	python3: string
 } = {
 	bun: `I'm building a workflow which is a sequence of script steps. Write the first script in {codeLang} which should check for {description} and return an array.
-You can use "const {state_name}: {state_type} = await getState()" and "await setState(value: any)" from "windmill-client@1" to maintain state across runs.
+To maintain state across runs, you can use "const {state_name}: {state_type} = await getState()" and "await setState(value: any)" which you have to import like this: import { getState, setState } from "windmill-client@1"
 
 {additionalInformation}`,
 	python3: `I'm building a workflow which is a sequence of script steps. Write the first script in {codeLang} which should check for {description} and return an array.
-You can use get_state() and set_state(value) from wmill to maintain state across runs.
+To maintain state across runs, you can use get_state() and set_state(value) which you have to import like this: from wmill import get_state, set_state
 
 {additionalInformation}`
 }

frontend/src/lib/components/copilot/lib.ts

@@ -74,18 +74,62 @@ interface FixScriptOpions extends BaseOptions {
 
 type CopilotOptions = ScriptGenerationOptions | EditScriptOptions | FixScriptOpions
 
-export async function addResourceTypes(scriptOptions: CopilotOptions, prompt: string) {
+async function getResourceTypes(scriptOptions: CopilotOptions) {
 	if (!workspace) {
 		throw new Error('Workspace not initialized')
 	}
 
-	if (['deno', 'bun', 'nativets'].includes(scriptOptions.language)) {
-		const resourceTypes = await ResourceService.listResourceType({ workspace })
-		const resourceTypesText = formatResourceTypes(resourceTypes, 'typescript')
-		prompt = prompt.replace('{resourceTypes}', resourceTypesText)
-	} else if (scriptOptions.language === 'python3') {
-		const resourceTypes = await ResourceService.listResourceType({ workspace })
-		const resourceTypesText = formatResourceTypes(resourceTypes, 'python3')
+	const localResourceTypes = await ResourceService.listResourceType({ workspace })
+
+	const elems =
+		scriptOptions.type === 'gen' || scriptOptions.type === 'edit' ? [scriptOptions.description] : []
+
+	if (scriptOptions.type === 'edit' || scriptOptions.type === 'fix') {
+		const { code } = scriptOptions
+
+		const mainSig =
+			scriptOptions.language === 'python3'
+				? code.match(/def main\((.*?)\)/s)
+				: code.match(/function main\((.*?)\)/s)
+
+		if (mainSig) {
+			elems.push(mainSig[1])
+		}
+
+		const matches = code.matchAll(/^(?:type|class) ([a-zA-Z0-9_]+)/gm)
+
+		for (const match of matches) {
+			elems.push(match[1])
+		}
+	}
+
+	const hubResourceTypes = await ResourceService.listHubResourceTypes()
+	const queriedIds = (
+		await ResourceService.queryHubResourceTypes({
+			text: elems.join(';')
+		})
+	).map((rt) => rt.id)
+	const customResourceTypes = localResourceTypes.filter((rt) => rt.name.startsWith('c_'))
+	const resourceTypes = [
+		...hubResourceTypes
+			.filter((rt) => queriedIds.includes(String(rt.id)))
+			.map((rt) => ({
+				...rt,
+				schema: JSON.parse(rt.schema)
+			})),
+		...customResourceTypes
+	]
+
+	return resourceTypes
+}
+
+export async function addResourceTypes(scriptOptions: CopilotOptions, prompt: string) {
+	if (['deno', 'bun', 'nativets', 'python3'].includes(scriptOptions.language)) {
+		const resourceTypes = await getResourceTypes(scriptOptions)
+		const resourceTypesText = formatResourceTypes(
+			resourceTypes,
+			scriptOptions.language === 'python3' ? 'python3' : 'typescript'
+		)
 		prompt = prompt.replace('{resourceTypes}', resourceTypesText)
 	}
 	return prompt

frontend/src/lib/components/copilot/prompts/edit.yaml

@@ -16,12 +16,12 @@ prompts:
       ```
       <contextual_information>
       We have to export a "main" function and specify the parameter types but do not call it.
-      You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}_resource". 
-      The resource type name has to be exactly as specified (has to be IN LOWERCASE).
+      You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}_resource".
+      The following resource types are available:
       <resourceTypes>
       {resourceTypes}
       </resourceTypes>
-      Only define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      Only define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified (has to be IN LOWERCASE). If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
       </contextual_information>
       My instructions: {description}
   deno:
@@ -133,12 +133,12 @@ prompts:
       ```
       <contextual_information>
       We have to export a "main" function like this: "export async function main(...)" and specify the parameter types but do not call it.
-      You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}Resource". 
-      The resource type name has to be exactly as specified.
+      You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}Resource".
+      The following resource types are available:
       <resourceTypes>
       {resourceTypes}
       </resourceTypes>
-      Only define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      Only define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
       </contextual_information>
       My instructions: {description}
   bun:
@@ -151,11 +151,11 @@ prompts:
       We have to export a "main" function like this: "export async function main(...)" and specify the parameter types but do not call it.
       If needed, the standard fetch method is available globally, do not import it.
       You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}Resource". 
-      The resource type name has to be exactly as specified.
+      The following resource types are available:
       <resourceTypes>
       {resourceTypes}
       </resourceTypes>
-      Only define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      Only define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
       </contextual_information>
       My instructions: {description}
   frontend:

frontend/src/lib/components/copilot/prompts/editPrompt.ts

@@ -2,7 +2,7 @@ export const EDIT_PROMPT = {
   "system": "You write code as instructed by the user. Only output code. Wrap the code in a code block. \nPut explanations directly in the code as comments.\n\nHere's how interactions have to look like:\nuser: {sample_question}\nassistant: ```language\n{code}\n```",
   "prompts": {
     "python3": {
-      "prompt": "Here's my python3 code: \n```python\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function and specify the parameter types but do not call it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}_resource\". \nThe resource type name has to be exactly as specified (has to be IN LOWERCASE).\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nMy instructions: {description}"
+      "prompt": "Here's my python3 code: \n```python\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function and specify the parameter types but do not call it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}_resource\".\nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified (has to be IN LOWERCASE). If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nMy instructions: {description}"
     },
     "deno": {
       "prompt": "Here's my TypeScript code in a deno running environment:\n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\". \nThe resource type name has to be exactly as specified.\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nMy instructions: {description}"
@@ -32,10 +32,10 @@ export const EDIT_PROMPT = {
       "prompt": "Here's my powershell code: \n```powershell\n{code}\n```\n<contextual_information>\nArguments can be obtained by calling the param function on the first line like that: `param($ParamName1, $ParamName2 = \"default value\", [{type}]$ParamName3, ...)`\nI get the following error: {error}\n</contextual_information>\nMy instructions: {description}"
     },
     "nativets": {
-      "prompt": "Here's my TypeScript code: \n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\". \nThe resource type name has to be exactly as specified.\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nMy instructions: {description}"
+      "prompt": "Here's my TypeScript code: \n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\".\nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nMy instructions: {description}"
     },
     "bun": {
-      "prompt": "Here's my TypeScript code: \n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\". \nThe resource type name has to be exactly as specified.\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nMy instructions: {description}"
+      "prompt": "Here's my TypeScript code: \n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\". \nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nMy instructions: {description}"
     },
     "frontend": {
       "prompt": "Here's my client-side javascript code: \n```javascript\n{code}\n```\n<contextual_information>\nYou can access the context object with the ctx global variable. \nThe app state is a store that can be used to store data. You can access and update the state object with the state global variable like this: state.foo = 'bar'\nYou can use the goto function to navigate to a specific URL: goto(path: string, newTab?: boolean)\nUse the setTab function to manually set the tab of a Tab component: setTab(id: string, index: string)\nUse the recompute function to recompute a component: recompute(id: string)\nUse the getAgGrid function to get the ag-grid instance of a table: getAgGrid(id: string)\nThe setValue function is meant to set or force the value of a component: setValue(id: string, value: any).\n</contextual_information>\nMy instructions: {description}"

frontend/src/lib/components/copilot/prompts/fix.yaml

@@ -19,11 +19,11 @@ prompts:
       <contextual_information>
       We have to export a "main" function and specify the parameter types but do not call it.
       You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}_resource". 
-      The resource type name has to be exactly as specified (has to be IN LOWERCASE).
+      The following resource types are available:
       <resourceTypes>
       {resourceTypes}
       </resourceTypes>
-      Only define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      Only define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified (has to be IN LOWERCASE). If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
       </contextual_information>
       I get the following error: {error}
       Fix my code.
@@ -36,12 +36,12 @@ prompts:
       <contextual_information>
       We have to export a "main" function like this: "export async function main(...)" and specify the parameter types but do not call it.
       If needed, the standard fetch method is available globally, do not import it.
-      You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}Resource". 
-      The resource type name has to be exactly as specified.
+      You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}Resource".
+      The following resource types are available:
       <resourceTypes>
       {resourceTypes}
       </resourceTypes>
-      Only define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      Only define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
       </contextual_information>
       I get the following error: {error}
       Fix my code.
@@ -142,11 +142,11 @@ prompts:
       <contextual_information>
       We have to export a "main" function like this: "export async function main(...)" and specify the parameter types but do not call it.
       You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}Resource". 
-      The resource type name has to be exactly as specified.
+      The following resource types are available:
       <resourceTypes>
       {resourceTypes}
       </resourceTypes>
-      Only define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      Only define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
       </contextual_information>
       I get the following error: {error}
       Fix my code.
@@ -159,12 +159,12 @@ prompts:
       <contextual_information>
       We have to export a "main" function like this: "export async function main(...)" and specify the parameter types but do not call it.
       If needed, the standard fetch method is available globally, do not import it.
-      You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}Resource". 
-      The resource type name has to be exactly as specified.
+      You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}Resource".
+      The following resource types are available:
       <resourceTypes>
       {resourceTypes}
       </resourceTypes>
-      Only define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      Only define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
       </contextual_information>
       I get the following error: {error}
       Fix my code.

frontend/src/lib/components/copilot/prompts/fixPrompt.ts

@@ -2,10 +2,10 @@ export const FIX_PROMPT = {
   "system": "You fix the code shared by the user. Only output code. Wrap the code in a code block. \nExplain the error and the fix after generating the code inside an <explanation> tag.\nAlso put explanations directly in the code as comments.\n\nHere's how interactions have to look like:\nuser: {sample_question}\nassistant: ```language\n{code}\n```\n<explanation>{explanation}</explanation>",
   "prompts": {
     "python3": {
-      "prompt": "Here's my python3 code: \n```python\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function and specify the parameter types but do not call it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}_resource\". \nThe resource type name has to be exactly as specified (has to be IN LOWERCASE).\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nI get the following error: {error}\nFix my code."
+      "prompt": "Here's my python3 code: \n```python\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function and specify the parameter types but do not call it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}_resource\". \nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified (has to be IN LOWERCASE). If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nI get the following error: {error}\nFix my code."
     },
     "deno": {
-      "prompt": "Here's my TypeScript code in a deno running environment:\n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\". \nThe resource type name has to be exactly as specified.\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nI get the following error: {error}\nFix my code."
+      "prompt": "Here's my TypeScript code in a deno running environment:\n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\".\nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nI get the following error: {error}\nFix my code."
     },
     "go": {
       "prompt": "Here's my go code: \n```go\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function. Import the packages you need. The return type of the function has to be ({return_type}, error). The file package has to be \"inner\"\n</contextual_information>\nI get the following error: {error}\nFix my code."
@@ -32,10 +32,10 @@ export const FIX_PROMPT = {
       "prompt": "Here's my powershell code: \n```powershell\n{code}\n```\n<contextual_information>\nArguments can be obtained by calling the param function on the first line like that: `param($ParamName1, $ParamName2 = \"default value\", [{type}]$ParamName3, ...)`\n</contextual_information>\nI get the following error: {error}\nFix my code."
     },
     "nativets": {
-      "prompt": "Here's my TypeScript code: \n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\". \nThe resource type name has to be exactly as specified.\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nI get the following error: {error}\nFix my code."
+      "prompt": "Here's my TypeScript code: \n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\". \nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nI get the following error: {error}\nFix my code."
     },
     "bun": {
-      "prompt": "Here's my TypeScript code: \n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\". \nThe resource type name has to be exactly as specified.\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nI get the following error: {error}\nFix my code."
+      "prompt": "Here's my TypeScript code: \n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\".\nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nI get the following error: {error}\nFix my code."
     }
   }
 };

frontend/src/lib/components/copilot/prompts/gen.yaml

@@ -12,21 +12,21 @@ prompts:
     prompt: |-
       Write a function in python called "main". The function should {description}. Specify the parameter types. Do not call the main function.
       You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}_resource".
-      The resource type name has to be exactly as specified (has to be IN LOWERCASE).
+      The following resource types are available:
       <resourceTypes>
       {resourceTypes}
       </resourceTypes>
-      Only define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      Only define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified (has to be IN LOWERCASE). If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
   deno:
     prompt: |-
       Write a function in TypeScript called "main". The function should {description}. Specify the parameter types. You are in a Deno environment. You can import deno libraries or you can also import npm libraries like that: "import ... from "npm:{package}";". Export the "main" function like this: "export async function main(...)". Do not call the main function.
       If needed, the standard fetch method is available globally, do not import it.
       You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}Resource".
-      The resource type name has to be exactly as specified.
+      The following resource types are available:
       <resourceTypes>
       {resourceTypes}
       </resourceTypes>
-      Only define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      Only define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
   go:
     prompt: |-
       Write a function in go called "main". The function should {description}. Import the packages you need. The return type of the function has to be ({return_type}, error). The file package has to be "inner".
@@ -55,21 +55,21 @@ prompts:
     prompt: |-
       Write a function in TypeScript called "main". The function should {description}. Specify the parameter types. You should use fetch and are not allowed to import any libraries. Export the "main" function like this: "export async function main(...)". Do not call the main function.
       You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}Resource".
-      The resource type name has to be exactly as specified.
+      The following resource types are available:
       <resourceTypes>
       {resourceTypes}
       </resourceTypes>
-      Only define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      Only define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
   bun:
     prompt: |-
       Write a function in TypeScript called "main". The function should {description}. Specify the parameter types. You can import npm libraries. Export the "main" function like this: "export async function main(...)". Do not call the main function.
       If needed, the standard fetch method is available globally, do not import it.
       You can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: "{resource_type}Resource".
-      The resource type name has to be exactly as specified.
+      The following resource types are available:
       <resourceTypes>
       {resourceTypes}
       </resourceTypes>
-      Only define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      Only define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
   frontend:
     prompt: |-
       Write client-side javascript code that should {description}. You have access to a few helpers:

frontend/src/lib/components/copilot/prompts/genPrompt.ts

@@ -2,10 +2,10 @@ export const GEN_PROMPT = {
   "system": "You write code as instructed by the user. Only output code. Wrap the code in a code block. \nPut explanations directly in the code as comments.\n\nHere's how interactions have to look like:\nuser: {sample_question}\nassistant: ```language\n{code}\n```",
   "prompts": {
     "python3": {
-      "prompt": "Write a function in python called \"main\". The function should {description}. Specify the parameter types. Do not call the main function.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}_resource\".\nThe resource type name has to be exactly as specified (has to be IN LOWERCASE).\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE."
+      "prompt": "Write a function in python called \"main\". The function should {description}. Specify the parameter types. Do not call the main function.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}_resource\".\nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified (has to be IN LOWERCASE). If the type name conflicts with the imported object, rename the imported object NOT THE TYPE."
     },
     "deno": {
-      "prompt": "Write a function in TypeScript called \"main\". The function should {description}. Specify the parameter types. You are in a Deno environment. You can import deno libraries or you can also import npm libraries like that: \"import ... from \"npm:{package}\";\". Export the \"main\" function like this: \"export async function main(...)\". Do not call the main function.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\".\nThe resource type name has to be exactly as specified.\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE."
+      "prompt": "Write a function in TypeScript called \"main\". The function should {description}. Specify the parameter types. You are in a Deno environment. You can import deno libraries or you can also import npm libraries like that: \"import ... from \"npm:{package}\";\". Export the \"main\" function like this: \"export async function main(...)\". Do not call the main function.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\".\nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE."
     },
     "go": {
       "prompt": "Write a function in go called \"main\". The function should {description}. Import the packages you need. The return type of the function has to be ({return_type}, error). The file package has to be \"inner\"."
@@ -32,10 +32,10 @@ export const GEN_PROMPT = {
       "prompt": "Write powershell code that should {description}. Arguments can be obtained by calling the param function on the first line like that: `param($ParamName1, $ParamName2 = \"default value\", [{type}]$ParamName3, ...)`"
     },
     "nativets": {
-      "prompt": "Write a function in TypeScript called \"main\". The function should {description}. Specify the parameter types. You should use fetch and are not allowed to import any libraries. Export the \"main\" function like this: \"export async function main(...)\". Do not call the main function.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\".\nThe resource type name has to be exactly as specified.\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE."
+      "prompt": "Write a function in TypeScript called \"main\". The function should {description}. Specify the parameter types. You should use fetch and are not allowed to import any libraries. Export the \"main\" function like this: \"export async function main(...)\". Do not call the main function.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\".\nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE."
     },
     "bun": {
-      "prompt": "Write a function in TypeScript called \"main\". The function should {description}. Specify the parameter types. You can import npm libraries. Export the \"main\" function like this: \"export async function main(...)\". Do not call the main function.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\".\nThe resource type name has to be exactly as specified.\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE."
+      "prompt": "Write a function in TypeScript called \"main\". The function should {description}. Specify the parameter types. You can import npm libraries. Export the \"main\" function like this: \"export async function main(...)\". Do not call the main function.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\".\nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE."
     },
     "frontend": {
       "prompt": "Write client-side javascript code that should {description}. You have access to a few helpers:\nYou can access the context object with the ctx global variable. \nThe app state is a store that can be used to store data. You can access and update the state object with the state global variable like this: state.foo = 'bar'\nYou can use the goto function to navigate to a specific URL: goto(path: string, newTab?: boolean)\nUse the setTab function to manually set the tab of a Tab component: setTab(id: string, index: string)\nUse the recompute function to recompute a component: recompute(id: string)\nUse the getAgGrid function to get the ag-grid instance of a table: getAgGrid(id: string)\nThe setValue function is meant to set or force the value of a component: setValue(id: string, value: any)."