windmill-components 1.558.4 → 1.596.0

package/package/components/EditorBar.svelte

@@ -1,8 +1,19 @@
-<script module lang="ts">export const EDITOR_BAR_WIDTH_THRESHOLD = 1044;
+<script module lang="ts">export const EDITOR_BAR_WIDTH_THRESHOLD = 1420;
+function getImportWmillTsStatement(lang) {
+    if (lang === 'deno') {
+        return `import * as wmill from "npm:windmill-client@1"\n`;
+    }
+    else if (lang === 'bun' || lang === 'bunnative') {
+        return `import * as wmill from "windmill-client"\n`;
+    }
+    else if (lang === 'nativets') {
+        return `import * as wmill from "./windmill.ts"\n`;
+    }
+    return '';
+}
 </script>
 
-<script lang="ts">import { run } from 'svelte/legacy';
-import { ResourceService, VariableService, WorkspaceService } from '../gen';
+<script lang="ts">import { ResourceService, VariableService, WorkspaceService } from '../gen';
 import { workspaceStore } from '../stores';
 import { base } from '../base';
 import ItemPicker from './ItemPicker.svelte';
@@ -20,18 +31,20 @@ import { createEventDispatcher, untrack } from 'svelte';
 import { sendUserToast } from '../toast';
 import { getScriptByPath, scriptLangToEditorLang } from '../scripts';
 import Toggle from './Toggle.svelte';
-import { DatabaseIcon, DiffIcon, DollarSign, File, History, Library, Link, Package, Plus, RotateCw, Save, Users } from 'lucide-svelte';
+import { DatabaseIcon, DiffIcon, DollarSign, File, GitBranch, History, Library, Link, Package, Plus, RotateCw, Save, Settings, Users } from 'lucide-svelte';
 import { capitalize, formatS3Object, toCamel } from '../utils';
 import ScriptVersionHistory from './ScriptVersionHistory.svelte';
 import { getResetCode } from '../script_helpers';
 import Popover from './Popover.svelte';
 import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
 import EditorSettings from './EditorSettings.svelte';
+import { quicktype, InputData, JSONSchemaInput, FetchingJSONSchemaStore } from 'quicktype-core';
 import S3FilePicker from './S3FilePicker.svelte';
 import DucklakeIcon from './icons/DucklakeIcon.svelte';
 import FlowInlineScriptAiButton from './copilot/FlowInlineScriptAIButton.svelte';
-import ScriptGen from './copilot/ScriptGen.svelte';
-let { lang, editor, websocketAlive, iconOnly = false, validCode = true, kind = 'script', template = 'script', collabMode = false, collabLive = false, collabUsers = [], scriptPath = undefined, diffEditor = undefined, args, noHistory = false, saveToWorkspace = false, customUi = {}, lastDeployedCode = undefined, diffMode = false, showHistoryDrawer = $bindable(false), right, openAiChat = false, moduleId = undefined } = $props();
+import GitRepoPopoverPicker from './GitRepoPopoverPicker.svelte';
+import { insertDelegateToGitRepoInCode } from '../ansibleUtils';
+let { lang, editor, websocketAlive, iconOnly = false, validCode = true, kind = 'script', template = 'script', collabMode = false, collabLive = false, collabUsers = [], scriptPath = undefined, noHistory = false, saveToWorkspace = false, customUi = {}, lastDeployedCode = undefined, diffMode = false, showHistoryDrawer = $bindable(false), right, openAiChat = false, moduleId = undefined } = $props();
 let contextualVariablePicker = $state();
 let variablePicker = $state();
 let resourcePicker = $state();
@@ -40,7 +53,9 @@ let variableEditor = $state();
 let resourceEditor = $state();
 let s3FilePicker = $state();
 let ducklakePicker = $state();
+let dataTablePicker = $state();
 let databasePicker = $state();
+let gitRepoPickerOpen = $state(false);
 let showContextVarPicker = $derived([
     'python3',
     'bash',
@@ -101,13 +116,25 @@ let showResourcePicker = $derived([
 ].includes(lang ?? ''));
 let showS3Picker = $derived(['duckdb', 'python3'].includes(lang ?? '') ||
     ['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)));
-let showDucklakePicker = $derived(['duckdb'].includes(lang ?? ''));
+let showDucklakePicker = $derived(['duckdb', 'python3'].includes(lang ?? '') ||
+    ['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)));
+let showDataTablePicker = $derived(['duckdb', 'python3'].includes(lang ?? '') ||
+    ['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)));
 let showDatabasePicker = $derived(['duckdb'].includes(lang ?? ''));
+let showGitRepoPicker = $derived(lang === 'ansible');
 let showResourceTypePicker = $derived(['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)) ||
     lang === 'python3' ||
-    lang === 'php');
+    lang === 'php' ||
+    lang === 'rust');
 let codeViewer = $state();
 let codeObj = $state(undefined);
+function insertDelegateToGitRepo(resourcePath) {
+    if (!editor)
+        return;
+    const currentCode = editor.getCode();
+    const newCode = insertDelegateToGitRepoInCode(currentCode, resourcePath);
+    editor.setCode(newCode);
+}
 function addEditorActions() {
     editor?.addAction('insert-variable', 'Windmill: Insert variable', () => {
         variablePicker?.openDrawer();
@@ -116,7 +143,7 @@ function addEditorActions() {
         resourcePicker?.openDrawer();
     });
 }
-run(() => {
+$effect(() => {
     editor && untrack(() => addEditorActions());
 });
 async function loadVariables() {
@@ -170,6 +197,19 @@ function compile(schema) {
     }
     return rec(schema.properties, true);
 }
+async function quicktypeJSONSchema(targetLanguage, typeName, jsonSchemaString, rendererOptions) {
+    const schemaInput = new JSONSchemaInput(new FetchingJSONSchemaStore());
+    // We could add multiple schemas for multiple types,
+    // but here we're just making one type from JSON schema.
+    await schemaInput.addSource({ name: typeName, schema: jsonSchemaString });
+    const inputData = new InputData();
+    inputData.addInput(schemaInput);
+    return await quicktype({
+        inputData,
+        lang: targetLanguage,
+        rendererOptions
+    });
+}
 async function resourceTypePickCallback(name) {
     if (!editor)
         return;
@@ -192,6 +232,14 @@ async function resourceTypePickCallback(name) {
         editor.backspace();
         editor.insertAtCursor('}');
     }
+    else if (lang === 'rust') {
+        const { lines: lines } = await quicktypeJSONSchema('rust', name, JSON.stringify(resourceType.schema), {
+            'leading-comments': false,
+            density: 'dense',
+            'derive-debug': true
+        });
+        editor.insertAtCurrentLine(lines.join('\n'));
+    }
     else {
         const tsSchema = compile(resourceType.schema);
         editor.insertAtCursor(`type ${toCamel(capitalize(name))} = ${tsSchema}`);
@@ -375,15 +423,9 @@ function windmillPathToCamelCaseName(path) {
 	bind:this={variablePicker}
 	pickCallback={(path, name) => {
 		if (!editor) return
-		if (lang == 'deno') {
+		if (['javascript', 'typescript'].includes(scriptLangToEditorLang(lang))) {
 			if (!editor.getCode().includes('import * as wmill from')) {
-				editor.insertAtBeginning(`import * as wmill from "npm:windmill-client@1"\n`)
-			}
-			editor.insertAtCursor(`(await wmill.getVariable('${path}'))`)
-		} else if (lang === 'bun' || lang === 'bunnative') {
-			const code = editor.getCode()
-			if (!code.includes(`import * as wmill from`)) {
-				editor.insertAtBeginning(`import * as wmill from "windmill-client"\n`)
+				editor.insertAtBeginning(getImportWmillTsStatement(lang))
 			}
 			editor.insertAtCursor(`(await wmill.getVariable('${path}'))`)
 		} else if (lang == 'python3') {
@@ -405,12 +447,6 @@ function windmillPathToCamelCaseName(path) {
 			editor.insertAtCursor(
 				`\nInvoke-RestMethod -Headers $Headers -Uri "$Env:BASE_INTERNAL_URL/api/w/$Env:WM_WORKSPACE/variables/get_value/${path}"`
 			)
-		} else if (lang == 'nativets') {
-			const code = editor.getCode()
-			if (!code.includes(`import * as wmill from`)) {
-				editor.insertAtBeginning(`import * as wmill from "./windmill.ts"\n`)
-			}
-			editor.insertAtCursor(`(await wmill.getVariable('${path}'))`)
 		} else if (lang == 'php') {
 			editor.insertAtCursor(`$ch = curl_init(getenv('BASE_INTERNAL_URL') . '/api/w/' . getenv('WM_WORKSPACE') . '/variables/get_value/${path}');
 curl_setopt($ch, CURLOPT_HTTPHEADER, array('Authorization: Bearer ' . getenv('WM_TOKEN')));
@@ -448,9 +484,7 @@ string ${windmillPathToCamelCaseName(path)} = await client.GetStringAsync(uri);
 	{#snippet submission()}
 		<div class="flex flex-row">
 			<Button
-				variant="border"
-				color="blue"
-				size="sm"
+				variant="accent"
 				startIcon={{ icon: Plus }}
 				on:click={() => {
 					variableEditor?.initNew()
@@ -466,15 +500,9 @@ string ${windmillPathToCamelCaseName(path)} = await client.GetStringAsync(uri);
 	bind:this={resourcePicker}
 	pickCallback={(path, _, resType) => {
 		if (!editor) return
-		if (lang == 'deno') {
+		if (['javascript', 'typescript'].includes(scriptLangToEditorLang(lang))) {
 			if (!editor.getCode().includes('import * as wmill from')) {
-				editor.insertAtBeginning(`import * as wmill from "npm:windmill-client@1"\n`)
-			}
-			editor.insertAtCursor(`(await wmill.getResource('${path}'))`)
-		} else if (lang === 'bun' || lang === 'bunnative') {
-			const code = editor.getCode()
-			if (!code.includes(`import * as wmill from`)) {
-				editor.insertAtBeginning(`import * as wmill from "windmill-client"\n`)
+				editor.insertAtBeginning(getImportWmillTsStatement(lang))
 			}
 			editor.insertAtCursor(`(await wmill.getResource('${path}'))`)
 		} else if (lang == 'python3') {
@@ -496,12 +524,6 @@ string ${windmillPathToCamelCaseName(path)} = await client.GetStringAsync(uri);
 			editor.insertAtCursor(
 				`\nInvoke-RestMethod -Headers $Headers -Uri "$Env:BASE_INTERNAL_URL/api/w/$Env:WM_WORKSPACE/resources/get_value_interpolated/${path}"`
 			)
-		} else if (lang == 'nativets') {
-			const code = editor.getCode()
-			if (!code.includes(`import * as wmill from`)) {
-				editor.insertAtBeginning(`import * as wmill from "./windmill.ts"\n`)
-			}
-			editor.insertAtCursor(`(await wmill.getResource('${path}'))`)
 		} else if (lang == 'php') {
 			editor.insertAtCursor(`$ch = curl_init(getenv('BASE_INTERNAL_URL') . '/api/w/' . getenv('WM_WORKSPACE') . '/resources/get_value_interpolated/${path}');
 curl_setopt($ch, CURLOPT_HTTPHEADER, array('Authorization: Bearer ' . getenv('WM_TOKEN')));
@@ -556,9 +578,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 			<Button
 				startIcon={{ icon: Plus }}
 				target="_blank"
-				variant="border"
-				color="blue"
-				size="sm"
+				variant="accent"
 				href="{base}/resources?connect_app=undefined"
 			>
 				Add resource
@@ -588,17 +608,85 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 	<ItemPicker
 		bind:this={ducklakePicker}
 		pickCallback={async (_, name) => {
-			const connStr = name == 'main' ? 'ducklake' : `ducklake://${name}`
-			editor?.insertAtCursor(`ATTACH '${connStr}' AS dl; USE dl;\n`)
+			if (lang === 'duckdb') {
+				const connStr = name == 'main' ? 'ducklake' : `ducklake://${name}`
+				editor?.insertAtCursor(`ATTACH '${connStr}' AS dl; USE dl;\n`)
+			} else if (lang === 'python3') {
+				if (!editor?.getCode().includes('import wmill')) {
+					editor?.insertAtBeginning('import wmill\n')
+				}
+				editor?.insertAtCursor(`dl = wmill.ducklake(${name == 'main' ? '' : `'${name}'`})\n`)
+			} else if (['javascript', 'typescript'].includes(scriptLangToEditorLang(lang))) {
+				if (!editor?.getCode().includes('import * as wmill from')) {
+					editor?.insertAtBeginning(getImportWmillTsStatement(lang))
+				}
+				editor?.insertAtCursor(`let sql = wmill.ducklake(${name == 'main' ? '' : `'${name}'`})\n`)
+			}
 		}}
-		tooltip="Attach a Ducklake in your DuckDB script. Ducklake allows you to manipulate large data on S3 blob files through a traditional SQL interface."
-		documentationLink="https://www.windmill.dev/docs/core_concepts/ducklake"
+		tooltip="Attach a Ducklake to your scripts. Ducklake allows you to manipulate large data on S3 blob files through a traditional SQL interface."
+		documentationLink="https://www.windmill.dev/docs/core_concepts/persistent_storage/ducklake"
 		itemName="ducklake"
 		loadItems={async () =>
 			(await WorkspaceService.listDucklakes({ workspace: $workspaceStore ?? 'NO_W' })).map(
 				(path) => ({ path })
 			)}
-	/>
+	>
+		{#snippet submission()}
+			<div class="flex flex-row gap-x-1 mr-2">
+				<Button
+					startIcon={{ icon: Settings }}
+					target="_blank"
+					variant="accent"
+					href="{base}/workspace_settings?tab=windmill_lfs"
+				>
+					Go to settings
+				</Button>
+			</div>
+		{/snippet}
+	</ItemPicker>
+{/if}
+
+{#if showDataTablePicker}
+	<ItemPicker
+		bind:this={dataTablePicker}
+		pickCallback={async (_, name) => {
+			if (lang === 'duckdb') {
+				const connStr = name == 'main' ? 'datatable' : `datatable://${name}`
+				editor?.insertAtCursor(`ATTACH '${connStr}' AS dt; USE dt;\n`)
+			} else if (lang === 'python3') {
+				if (!editor?.getCode().includes('import wmill')) {
+					editor?.insertAtBeginning('import wmill\n')
+				}
+				editor?.insertAtCursor(`db = wmill.datatable(${name == 'main' ? '' : `'${name}'`})\n`)
+			} else if (['javascript', 'typescript'].includes(scriptLangToEditorLang(lang))) {
+				if (!editor?.getCode().includes('import * as wmill from')) {
+					editor?.insertAtBeginning(getImportWmillTsStatement(lang))
+				}
+				editor?.insertAtCursor(`let sql = wmill.datatable(${name == 'main' ? '' : `'${name}'`})\n`)
+				editor?.insertAtCursor(`let query_result = await sql\`SELECT * FROM _\`.fetchOne()\n`)
+			}
+		}}
+		tooltip="Attach a datatable to your script."
+		documentationLink="https://www.windmill.dev/docs/core_concepts/persistent_storage/data_tables"
+		itemName="data table"
+		loadItems={async () =>
+			(await WorkspaceService.listDataTables({ workspace: $workspaceStore ?? 'NO_W' })).map(
+				(path) => ({ path })
+			)}
+	>
+		{#snippet submission()}
+			<div class="flex flex-row gap-x-1 mr-2">
+				<Button
+					startIcon={{ icon: Settings }}
+					target="_blank"
+					variant="accent"
+					href="{base}/workspace_settings?tab=windmill_data_tables"
+				>
+					Go to settings
+				</Button>
+			</div>
+		{/snippet}
+	</ItemPicker>
 {/if}
 
 {#if showDatabasePicker}
@@ -629,10 +717,10 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 <S3FilePicker
 	bind:this={s3FilePicker}
 	readOnlyMode={false}
-	on:selectAndClose={(s3obj) => {
-		let s = `'${formatS3Object(s3obj.detail)}'`
+	onSelectAndClose={(s3obj) => {
+		let s = `'${formatS3Object(s3obj)}'`
 		if (lang === 'duckdb') {
-			editor?.insertAtCursor(`SELECT * FROM ${s}`)
+			editor?.insertAtCursor(`SELECT * FROM ${s};`)
 		} else if (lang === 'python3') {
 			if (!editor?.getCode().includes('import wmill')) {
 				editor?.insertAtBeginning('import wmill\n')
@@ -640,7 +728,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 			editor?.insertAtCursor(`wmill.load_s3_file(${s})`)
 		} else if (['javascript', 'typescript'].includes(scriptLangToEditorLang(lang))) {
 			if (!editor?.getCode().includes('import * as wmill from')) {
-				editor?.insertAtBeginning(`import * as wmill from "npm:windmill-client@1"\n`)
+				editor?.insertAtBeginning(getImportWmillTsStatement(lang))
 			}
 			editor?.insertAtCursor(`wmill.loadS3File(${s})`)
 		}
@@ -648,22 +736,20 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 />
 
 <div class="flex justify-between items-center overflow-y-auto w-full p-0.5">
-	<div class="flex items-center">
+	<div class="flex gap-3 items-center">
 		<div
 			title={validCode ? 'Main function parsable' : 'Main function not parsable'}
 			class="rounded-full w-2 h-2 mx-2 {validCode ? 'bg-green-300' : 'bg-red-300'}"
 		></div>
-		<div class="flex items-center gap-0.5">
+		<div class="flex items-center gap-2">
 			{#if showContextVarPicker && customUi?.contextVar != false}
 				<Button
 					aiId="editor-bar-add-context-variable"
 					aiDescription="Add context variable"
 					title="Add context variable"
-					color="light"
+					variant="subtle"
 					on:click={contextualVariablePicker.openDrawer}
-					size="xs"
-					btnClasses="!font-medium text-tertiary"
-					spacingSize="md"
+					unifiedSize="sm"
 					startIcon={{ icon: DollarSign }}
 					{iconOnly}
 					>+Context var
@@ -674,11 +760,9 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiId="editor-bar-add-variable"
 					aiDescription="Add variable"
 					title="Add variable"
-					color="light"
-					btnClasses="!font-medium text-tertiary"
+					variant="subtle"
 					on:click={variablePicker.openDrawer}
-					size="xs"
-					spacingSize="md"
+					unifiedSize="sm"
 					startIcon={{ icon: DollarSign }}
 					{iconOnly}
 				>
@@ -691,11 +775,9 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiId="editor-bar-add-s3-object"
 					aiDescription="Add S3 Object"
 					title="Add S3 object"
-					color="light"
+					variant="subtle"
 					on:click={() => s3FilePicker?.open()}
-					size="xs"
-					btnClasses="!font-medium text-tertiary"
-					spacingSize="md"
+					unifiedSize="sm"
 					startIcon={{ icon: File }}
 					{iconOnly}
 					>+S3 Object
@@ -707,10 +789,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiId="editor-bar-add-resource"
 					aiDescription="Add resource"
 					title="Add resource"
-					btnClasses="!font-medium text-tertiary"
-					size="xs"
-					spacingSize="md"
-					color="light"
+					unifiedSize="sm"
+					variant="subtle"
 					on:click={resourcePicker.openDrawer}
 					{iconOnly}
 					startIcon={{ icon: Package }}
@@ -719,15 +799,33 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				</Button>
 			{/if}
 
+			{#if showGitRepoPicker && customUi?.resource != false}
+				<GitRepoPopoverPicker
+					bind:isOpen={gitRepoPickerOpen}
+					on:selected={(e) => insertDelegateToGitRepo(e.detail.resourcePath)}
+				>
+					<Button
+						aiId="editor-bar-add-git-repo"
+						aiDescription="Delegate to Git repository"
+						title="Delegate to Git repository"
+						unifiedSize="sm"
+						variant="subtle"
+						on:click={() => (gitRepoPickerOpen = true)}
+						{iconOnly}
+						startIcon={{ icon: GitBranch }}
+					>
+						+Git Repo
+					</Button>
+				</GitRepoPopoverPicker>
+			{/if}
+
 			{#if showResourceTypePicker && customUi?.type != false}
 				<Button
 					aiId="editor-bar-add-resource-type"
 					aiDescription="Add resource type"
 					title="Add resource type"
-					btnClasses="!font-medium text-tertiary"
-					size="xs"
-					spacingSize="md"
-					color="light"
+					variant="subtle"
+					unifiedSize="sm"
 					on:click={() => resourceTypePicker?.openDrawer()}
 					{iconOnly}
 					startIcon={{ icon: Package }}
@@ -741,11 +839,9 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiId="editor-bar-add-database"
 					aiDescription="Add database"
 					title="Add database"
-					color="light"
+					variant="subtle"
 					on:click={() => databasePicker?.openDrawer()}
-					size="xs"
-					btnClasses="!font-medium text-tertiary"
-					spacingSize="md"
+					unifiedSize="sm"
 					startIcon={{ icon: DatabaseIcon }}
 					{iconOnly}
 					>+Database
@@ -757,26 +853,36 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiId="editor-bar-use-ducklake"
 					aiDescription="Use Ducklake"
 					title="Use Ducklake"
-					color="light"
+					variant="subtle"
 					on:click={() => ducklakePicker?.openDrawer()}
-					size="xs"
-					btnClasses="!font-medium text-tertiary"
-					spacingSize="md"
+					unifiedSize="sm"
 					startIcon={{ icon: DucklakeIcon }}
 					{iconOnly}
 					>+Ducklake
 				</Button>
 			{/if}
 
+			{#if showDataTablePicker && customUi?.dataTable != false}
+				<Button
+					aiId="editor-bar-use-datatable"
+					aiDescription="Use DataTable"
+					title="Use DataTable"
+					variant="subtle"
+					on:click={() => dataTablePicker?.openDrawer()}
+					unifiedSize="sm"
+					startIcon={{ icon: DatabaseIcon }}
+					{iconOnly}
+					>+Data table
+				</Button>
+			{/if}
+
 			{#if customUi?.reset != false}
 				<Button
 					aiId="editor-bar-reset-content"
 					aiDescription="Reset content"
 					title="Reset Content"
-					btnClasses="!font-medium text-tertiary"
-					size="xs"
-					spacingSize="md"
-					color="light"
+					unifiedSize="sm"
+					variant="subtle"
 					on:click={clearContent}
 					{iconOnly}
 					startIcon={{ icon: RotateCw }}
@@ -790,10 +896,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					<Button
 						aiId="editor-bar-reload-assistants"
 						aiDescription="Reload assistants"
-						btnClasses="!font-medium text-tertiary"
-						size="xs"
-						spacingSize="md"
-						color="light"
+						unifiedSize="sm"
+						variant="subtle"
 						on:click={() => editor?.reloadWebsocket()}
 						startIcon={{
 							icon: RotateCw,
@@ -825,7 +929,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				<div class="flex items-center px-3">
 					<Toggle
 						options={{ right: '' }}
-						size="xs"
+						size="sm"
 						checked={diffMode}
 						disabled={!lastDeployedCode}
 						on:change={(e) => {
@@ -837,7 +941,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 						{#snippet text()}
 							Toggle diff mode
 						{/snippet}
-						<DiffIcon class="ml-1 text-tertiary" size={14} />
+						<DiffIcon class="ml-1 text-primary" size={14} />
 					</Popover>
 				</div>
 			{/if}
@@ -854,7 +958,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 						{#snippet text()}
 							Multiplayer
 						{/snippet}
-						<Users class="ml-1 text-tertiary" size={14} />
+						<Users class="ml-1 text-primary" size={14} />
 					</Popover>
 					{#if collabLive}
 						<button
@@ -868,9 +972,9 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 									class="inline-flex h-6 w-6 items-center justify-center rounded-full ring-2 ring-white bg-gray-600"
 									title={user.name}
 								>
-									<span class="text-sm font-medium leading-none text-white"
-										>{user.name.substring(0, 2).toLocaleUpperCase()}</span
-									>
+									<span class="text-sm font-semibold leading-none text-white">
+										{user.name.substring(0, 2).toLocaleUpperCase()}
+									</span>
 								</span>
 							{/each}
 						</div>
@@ -880,24 +984,20 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 
 			{#if customUi?.aiGen != false}
 				{#if openAiChat}
-					<FlowInlineScriptAiButton {moduleId} />
-				{:else}
-					<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} />
+					<FlowInlineScriptAiButton {moduleId} btnProps={{ variant: 'subtle' }} />
 				{/if}
 			{/if}
 
-			<EditorSettings {customUi} />
+			<EditorSettings {customUi} btnProps={{ variant: 'subtle', unifiedSize: 'md' }} />
 		</div>
 	</div>
 
-	<div class="flex flex-row items-center gap-2">
+	<div class="flex flex-row items-center gap-2 whitespace-nowrap">
 		{@render right?.()}
 		{#if scriptPath && !noHistory}
 			<Button
-				btnClasses="!font-medium text-tertiary"
-				size="xs"
-				spacingSize="md"
-				color="light"
+				unifiedSize="sm"
+				variant="subtle"
 				on:click={() => (showHistoryDrawer = true)}
 				{iconOnly}
 				startIcon={{ icon: History }}
@@ -908,10 +1008,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 		{/if}
 		{#if SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS && customUi?.library != false}
 			<Button
-				btnClasses="!font-medium text-tertiary"
-				size="xs"
-				spacingSize="md"
-				color="light"
+				unifiedSize="sm"
+				variant="subtle"
 				on:click={scriptPicker.openDrawer}
 				{iconOnly}
 				startIcon={{ icon: Library }}
@@ -922,8 +1020,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 		{/if}
 		{#if saveToWorkspace}
 			<Button
-				size="xs"
-				color="light"
+				unifiedSize="sm"
+				variant="subtle"
 				startIcon={{ icon: Save }}
 				on:click={() => dispatch('createScriptFromInlineScript')}
 				iconOnly={false}
@@ -943,5 +1041,5 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 span.green {
     animation: pulse 5s ease-in-out infinite;
     --tw-text-opacity: 1;
-    color: rgb(22 163 74 / var(--tw-text-opacity, 1))
+    color: rgb(49 158 105 / var(--tw-text-opacity, 1))
 }</style>

package/package/components/EditorBar.svelte.d.ts

@@ -1,7 +1,6 @@
-export declare const EDITOR_BAR_WIDTH_THRESHOLD = 1044;
+export declare const EDITOR_BAR_WIDTH_THRESHOLD = 1420;
 import type Editor from './Editor.svelte';
 import type { SupportedLanguage } from '../common';
-import type DiffEditor from './DiffEditor.svelte';
 import type { EditorBarUi } from './custom_ui';
 interface Props {
     lang: SupportedLanguage | 'bunnative' | undefined;
@@ -23,8 +22,7 @@ interface Props {
         name: string;
     }[];
     scriptPath?: string | undefined;
-    diffEditor?: DiffEditor | undefined;
-    args: Record<string, any>;
+    args?: Record<string, any>;
     noHistory?: boolean;
     saveToWorkspace?: boolean;
     customUi?: EditorBarUi;

package/package/components/EditorSettings.svelte

@@ -5,7 +5,7 @@ import RelativeLineNumbers from './RelativeLineNumbers.svelte';
 import { Button } from './common';
 import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte';
 import Popover from './meltComponents/Popover.svelte';
-let { customUi = {} } = $props();
+let { customUi = {}, btnProps } = $props();
 </script>
 
 {#if customUi?.autoformatting != false || customUi?.vimMode != false || customUi?.aiCompletion != false}
@@ -17,13 +17,11 @@ let { customUi = {} } = $props();
 		{#snippet trigger()}
 			{#if customUi.editorSettings != false}
 				<Button
-					btnClasses="text-tertiary"
-					color="light"
-					size="xs"
 					nonCaptureEvent={true}
 					startIcon={{ icon: Settings }}
 					iconOnly
 					title="Editor settings"
+					{...btnProps}
 				/>
 			{/if}
 		{/snippet}

package/package/components/EditorSettings.svelte.d.ts

@@ -1,6 +1,9 @@
+import { Button } from './common';
 import type { EditorBarUi } from './custom_ui';
+import type { ComponentProps } from 'svelte';
 interface Props {
     customUi?: EditorBarUi;
+    btnProps?: ComponentProps<typeof Button>;
 }
 declare const EditorSettings: import("svelte").Component<Props, {}, "">;
 type EditorSettings = ReturnType<typeof EditorSettings>;