windmill-components 1.383.8 → 1.389.1

package/package/components/Editor.svelte

@@ -1,37 +1,134 @@
 <!-- <script lang="ts"></script> -->
 
+<script context="module">
+	import '@codingame/monaco-vscode-standalone-languages'
+	import '@codingame/monaco-vscode-standalone-typescript-language-features'
+	import processStdContent from '../process.d.ts.txt?raw'
+	import windmillFetchContent from '../windmill_fetch.d.ts.txt?raw'
+
+	languages.typescript.typescriptDefaults.addExtraLib(processStdContent, 'process.d.ts')
+
+	// languages.typescript.javascriptDefaults.setModeConfiguration({
+	// 	completionItems: true,
+	// 	hovers: true,
+	// 	documentSymbols: true,
+	// 	definitions: true,
+	// 	references: true,
+	// 	documentHighlights: true,
+	// 	rename: true,
+	// 	diagnostics: true,
+	// 	documentRangeFormattingEdits: true,
+	// 	signatureHelp: true,
+	// 	onTypeFormattingEdits: true,
+	// 	codeActions: true,
+	// 	inlayHints: true
+	// })
+
+	languages.typescript.typescriptDefaults.setModeConfiguration({
+		completionItems: true,
+		hovers: true,
+		documentSymbols: true,
+		definitions: true,
+		references: true,
+		documentHighlights: true,
+		rename: true,
+		diagnostics: true,
+		documentRangeFormattingEdits: true,
+		signatureHelp: true,
+		onTypeFormattingEdits: true,
+		codeActions: true,
+		inlayHints: true
+	})
+
+	// languages.typescript.javascriptDefaults.setEagerModelSync(true)
+	languages.typescript.typescriptDefaults.setEagerModelSync(true)
+
+	// languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+	// 	noSemanticValidation: false,
+	// 	noSyntaxValidation: false,
+	// 	noSuggestionDiagnostics: false,
+	// 	diagnosticCodesToIgnore: [1108]
+	// })
+
+	languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+		noSemanticValidation: false,
+		noSyntaxValidation: false,
+		noSuggestionDiagnostics: false,
+		diagnosticCodesToIgnore: [1108]
+	})
+
+	languages.typescript.typescriptDefaults.setCompilerOptions({
+		target: languages.typescript.ScriptTarget.Latest,
+		allowNonTsExtensions: true,
+		noSemanticValidation: false,
+		noSyntaxValidation: false,
+		completionItems: true,
+		hovers: true,
+		documentSymbols: true,
+		definitions: true,
+		references: true,
+		documentHighlights: true,
+		rename: true,
+		diagnostics: true,
+		documentRangeFormattingEdits: true,
+		signatureHelp: true,
+		onTypeFormattingEdits: true,
+		codeActions: true,
+		inlayHints: true,
+		checkJs: true,
+		allowJs: true,
+		noUnusedLocals: true,
+		strict: true,
+		noLib: false,
+		allowImportingTsExtensions: true,
+		moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
+	})
+
+	// languages.typescript.javascriptDefaults.setCompilerOptions({
+	// 	target: languages.typescript.ScriptTarget.Latest,
+	// 	allowNonTsExtensions: true,
+	// 	noSemanticValidation: false,
+	// 	noSyntaxValidation: false,
+	// 	allowImportingTsExtensions: true,
+	// 	checkJs: true,
+	// 	allowJs: true,
+	// 	noUnusedParameters: true,
+	// 	noUnusedLocals: true,
+	// 	strict: true,
+	// 	noLib: true,
+	// 	moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
+	// })
+</script>
+
 <script>import { BROWSER } from 'esm-env';
 import { sendUserToast } from '../toast';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-import libStdContent from '../es6.d.ts.txt?raw';
-import domContent from '../dom.d.ts.txt?raw';
-import denoFetchContent from '../deno_fetch.d.ts.txt?raw';
-import '@codingame/monaco-vscode-standalone-languages';
-import '@codingame/monaco-vscode-standalone-typescript-language-features';
+// import libStdContent from '../es6.d.ts.txt?raw'
+// import domContent from '../dom.d.ts.txt?raw'
+// import denoFetchContent from '../deno_fetch.d.ts.txt?raw'
 import * as vscode from 'vscode';
 // import '@codingame/monaco-vscode-typescript-basics-default-extension'
 // import '@codingame/monaco-vscode-typescript-language-features-default-extension'
 // import 'vscode/localExtensionHost'
-import processStdContent from '../process.d.ts.txt?raw';
-import windmillFetchContent from '../windmill_fetch.d.ts.txt?raw';
-import { MonacoLanguageClient } from '@windmill-labs/monaco-languageclient';
+import { MonacoLanguageClient } from 'monaco-languageclient';
 import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from 'vscode-ws-jsonrpc';
 import { CloseAction, ErrorAction, RequestType } from 'vscode-languageclient';
 import { MonacoBinding } from 'y-monaco';
-import { dbSchemas, copilotInfo, codeCompletionSessionEnabled, lspTokenStore, formatOnSave } from '../stores';
+import { dbSchemas, copilotInfo, codeCompletionSessionEnabled, lspTokenStore, formatOnSave, vimMode } from '../stores';
 import { createHash as randomHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
 import { buildWorkerDefinition } from './build_workers';
 import { workspaceStore } from '../stores';
 import { UserService } from '../gen';
 import { initializeVscode } from './vscode';
-// import { initializeMode } from 'monaco-graphql/esm/initializeMode.js'
+import { initializeMode } from 'monaco-graphql/esm/initializeMode.js';
 import { sleep } from '../utils';
 import { editorCodeCompletion } from './copilot/completion';
 import { editor as meditor, languages, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor';
 import EditorTheme from './EditorTheme.svelte';
 import { BIGQUERY_TYPES, MSSQL_TYPES, MYSQL_TYPES, POSTGRES_TYPES, SNOWFLAKE_TYPES } from '../consts';
 import { setupTypeAcquisition } from '../ata/index';
-import { initWasm, parseDeps } from '../infer';
+import { initWasmTs, parseDeps } from '../infer';
+import { initVim } from './monaco_keybindings';
 // import EditorTheme from './EditorTheme.svelte'
 let divEl = null;
 let editor = null;
@@ -88,7 +185,6 @@ const uri = lang != 'go' && lang != 'typescript' && lang != 'python'
     : `file:///tmp/monaco/${randomHash()}.${langToExt(lang)}`;
 console.log('uri', uri);
 buildWorkerDefinition('../../../workers', import.meta.url, false);
-// buildWorkerDefinition()
 export function getCode() {
     return editor?.getValue() ?? '';
 }
@@ -281,13 +377,13 @@ function addDBSchemaCompletions() {
         return;
     }
     if (schemaLang === 'graphql') {
-        // graphqlService ||= initializeMode()
-        // graphqlService?.setSchemaConfig([
-        // 	{
-        // 		uri: 'my-schema.graphql',
-        // 		introspectionJSON: schema
-        // 	}
-        // ])
+        graphqlService ||= initializeMode();
+        graphqlService?.setSchemaConfig([
+            {
+                uri: 'my-schema.graphql',
+                introspectionJSON: schema
+            }
+        ]);
     }
     else {
         if (sqlSchemaCompletor) {
@@ -760,6 +856,21 @@ $: if (yContent && awareness && model && editor) {
 }
 let initialized = false;
 let ata = undefined;
+let statusDiv = null;
+function saveDraft() {
+    dispatch('saveDraft', code);
+}
+let vimDisposable = undefined;
+$: editor && $vimMode && statusDiv && onVimMode();
+$: !$vimMode && vimDisposable && onVimDisable();
+function onVimDisable() {
+    vimDisposable?.dispose();
+}
+function onVimMode() {
+    if (editor && statusDiv) {
+        vimDisposable = initVim(editor, statusDiv, saveDraft);
+    }
+}
 async function loadMonaco() {
     try {
         console.log("Loading Monaco's language client");
@@ -772,93 +883,6 @@ async function loadMonaco() {
     // console.log('bef ready')
     // console.log('af ready')
     initialized = true;
-    await import('@codingame/monaco-vscode-standalone-languages');
-    await import('@codingame/monaco-vscode-standalone-typescript-language-features');
-    languages.typescript.typescriptDefaults.addExtraLib(processStdContent, 'process.d.ts');
-    languages.typescript.javascriptDefaults.setModeConfiguration({
-        completionItems: true,
-        hovers: true,
-        documentSymbols: true,
-        definitions: true,
-        references: true,
-        documentHighlights: true,
-        rename: true,
-        diagnostics: true,
-        documentRangeFormattingEdits: true,
-        signatureHelp: true,
-        onTypeFormattingEdits: true,
-        codeActions: true,
-        inlayHints: true
-    });
-    languages.typescript.typescriptDefaults.setModeConfiguration({
-        completionItems: true,
-        hovers: true,
-        documentSymbols: true,
-        definitions: true,
-        references: true,
-        documentHighlights: true,
-        rename: true,
-        diagnostics: true,
-        documentRangeFormattingEdits: true,
-        signatureHelp: true,
-        onTypeFormattingEdits: true,
-        codeActions: true,
-        inlayHints: true
-    });
-    languages.typescript.javascriptDefaults.setEagerModelSync(true);
-    languages.typescript.typescriptDefaults.setEagerModelSync(true);
-    languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-        noSemanticValidation: false,
-        noSyntaxValidation: false,
-        noSuggestionDiagnostics: false,
-        diagnosticCodesToIgnore: [1108]
-    });
-    languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-        noSemanticValidation: false,
-        noSyntaxValidation: false,
-        noSuggestionDiagnostics: false,
-        diagnosticCodesToIgnore: [1108]
-    });
-    languages.typescript.typescriptDefaults.setCompilerOptions({
-        target: languages.typescript.ScriptTarget.Latest,
-        allowNonTsExtensions: true,
-        noSemanticValidation: false,
-        noSyntaxValidation: false,
-        completionItems: true,
-        hovers: true,
-        documentSymbols: true,
-        definitions: true,
-        references: true,
-        documentHighlights: true,
-        rename: true,
-        diagnostics: true,
-        documentRangeFormattingEdits: true,
-        signatureHelp: true,
-        onTypeFormattingEdits: true,
-        codeActions: true,
-        inlayHints: true,
-        checkJs: true,
-        allowJs: true,
-        noUnusedLocals: true,
-        strict: true,
-        noLib: false,
-        allowImportingTsExtensions: true,
-        moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
-    });
-    languages.typescript.javascriptDefaults.setCompilerOptions({
-        target: languages.typescript.ScriptTarget.Latest,
-        allowNonTsExtensions: true,
-        noSemanticValidation: false,
-        noSyntaxValidation: false,
-        allowImportingTsExtensions: true,
-        checkJs: true,
-        allowJs: true,
-        noUnusedParameters: true,
-        noUnusedLocals: true,
-        strict: true,
-        noLib: true,
-        moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
-    });
     try {
         model = meditor.createModel(code, lang, mUri.parse(uri));
     }
@@ -879,21 +903,7 @@ async function loadMonaco() {
         tabSize: lang == 'python' ? 4 : 2,
         folding
     });
-    // const wrapper = new MonacoEditorLanguageClientWrapper()
-    // const userConfig: UserConfig = {
-    // 	wrapperConfig: {
-    // 		editorAppConfig: {
-    // 			$type: 'classic',
-    // 			codeResources: {
-    // 				main: {
-    // 					text: 'console.log("FOO")")',
-    // 					uri: '/workspace/hello.ts'
-    // 				}
-    // 			}
-    // 		}
-    // 	}
-    // }
-    // await wrapper.initAndStart(userConfig, divEl)
+    // updateEditorKeybindingsMode(editor, 'vim', undefined)
     let timeoutModel = undefined;
     let ataModel = undefined;
     editor?.onDidChangeModelContent((event) => {
@@ -945,6 +955,7 @@ async function loadMonaco() {
         ata = undefined;
         try {
             closeWebsockets();
+            vimDisposable?.dispose();
             model?.dispose();
             editor && editor.dispose();
             console.log('disposed editor');
@@ -957,15 +968,15 @@ async function loadMonaco() {
 async function setTypescriptExtraLibs() {
     if (lang === 'typescript' && scriptLang != 'deno') {
         const hostname = getHostname();
-        const stdLib = { content: libStdContent, filePath: 'es6.d.ts' };
+        // const stdLib = { content: libStdContent, filePath: 'es6.d.ts' }
         if (scriptLang == 'bun' || scriptLang == 'bunnative') {
-            const processLib = { content: processStdContent, filePath: 'process.d.ts' };
-            const domLib = { content: domContent, filePath: 'dom.d.ts' };
-            languages.typescript.typescriptDefaults.setExtraLibs([stdLib, domLib, processLib]);
+            // const processLib = { content: processStdContent, filePath: 'process.d.ts' }
+            // const domLib = { content: domContent, filePath: 'dom.d.ts' }
+            // languages.typescript.typescriptDefaults.setExtraLibs([stdLib, domLib, processLib])
         }
         else {
-            const denoFetch = { content: denoFetchContent, filePath: 'deno_fetch.d.ts' };
-            languages.typescript.typescriptDefaults.setExtraLibs([stdLib, denoFetch]);
+            // const denoFetch = { content: denoFetchContent, filePath: 'deno_fetch.d.ts' }
+            // languages.typescript.typescriptDefaults.setExtraLibs([stdLib, denoFetch])
             let localContent = windmillFetchContent;
             let p = '/tmp/monaco/windmill.d.ts';
             let nuri = mUri.parse(p);
@@ -1015,7 +1026,7 @@ async function setTypescriptExtraLibs() {
                     }
                 }
             };
-            await initWasm();
+            await initWasmTs();
             const root = await genRoot(hostname);
             console.log('SETUP TYPE ACQUISITION', { root, path });
             ata = setupTypeAcquisition({
@@ -1088,6 +1099,9 @@ async function genRoot(hostname) {
 
 <EditorTheme />
 <div bind:this={divEl} class="{$$props.class} editor {disabled ? 'disabled' : ''}" />
+{#if $vimMode}
+	<div class="fixed bottom-0 z-30" bind:this={statusDiv} />
+{/if}
 
 <style global>
 	:global(.editor) {

package/package/components/Editor.svelte.d.ts

@@ -3,11 +3,11 @@ import '@codingame/monaco-vscode-standalone-languages';
 import '@codingame/monaco-vscode-standalone-typescript-language-features';
 import { type Preview } from '../gen';
 import type { Text } from 'yjs';
-import { editor as meditor } from 'monaco-editor';
+import { editor as meditor, type IDisposable } from 'monaco-editor';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        lang: 'typescript' | 'python' | 'go' | 'shell' | 'sql' | 'graphql' | 'powershell' | 'php' | 'css' | 'javascript';
+        lang: 'typescript' | 'python' | 'go' | 'shell' | 'sql' | 'graphql' | 'powershell' | 'php' | 'css' | 'javascript' | 'rust';
         code?: string | undefined;
         cmdEnterAction?: (() => void) | undefined;
         formatAction?: (() => void) | undefined;
@@ -38,7 +38,7 @@ declare const __propDef: {
         insertAtBeginning?: ((code: string) => void) | undefined;
         insertAtLine?: ((code: string, line: number) => void) | undefined;
         getSelectedLines?: (() => string | undefined) | undefined;
-        onDidChangeCursorSelection?: ((f: (e: meditor.ICursorSelectionChangedEvent) => void) => import("monaco-editor").IDisposable | undefined) | undefined;
+        onDidChangeCursorSelection?: ((f: (e: meditor.ICursorSelectionChangedEvent) => void) => IDisposable | undefined) | undefined;
         show?: (() => void) | undefined;
         hide?: (() => void) | undefined;
         setCode?: ((ncode: string, noHistory?: boolean) => void) | undefined;
@@ -48,6 +48,7 @@ declare const __propDef: {
         addAction?: ((id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void) | undefined;
     };
     events: {
+        saveDraft: CustomEvent<any>;
         change: CustomEvent<any>;
         blur: CustomEvent<any>;
         focus: CustomEvent<any>;
@@ -67,7 +68,7 @@ export default class Editor extends SvelteComponent<EditorProps, EditorEvents, E
     get insertAtBeginning(): (code: string) => void;
     get insertAtLine(): (code: string, line: number) => void;
     get getSelectedLines(): () => string | undefined;
-    get onDidChangeCursorSelection(): (f: (e: meditor.ICursorSelectionChangedEvent) => void) => import("monaco-editor").IDisposable | undefined;
+    get onDidChangeCursorSelection(): (f: (e: meditor.ICursorSelectionChangedEvent) => void) => IDisposable | undefined;
     get show(): () => void;
     get hide(): () => void;
     get setCode(): (ncode: string, noHistory?: boolean) => void;

package/package/components/EditorBar.svelte

@@ -19,15 +19,14 @@ import { createEventDispatcher } from 'svelte';
 import { sendUserToast } from '../toast';
 import { getScriptByPath, scriptLangToEditorLang } from '../scripts';
 import Toggle from './Toggle.svelte';
-import FormatOnSave from './FormatOnSave.svelte';
 import { DollarSign, History, Library, Link, Package, Plus, RotateCw, Save, Users } from 'lucide-svelte';
 import { capitalize, toCamel } from '../utils';
 import ScriptVersionHistory from './ScriptVersionHistory.svelte';
 import ScriptGen from './copilot/ScriptGen.svelte';
 import { getResetCode } from '../script_helpers';
-import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte';
 import Popover from './Popover.svelte';
 import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
+import EditorSettings from './EditorSettings.svelte';
 export let lang;
 export let editor;
 export let websocketAlive;
@@ -63,7 +62,8 @@ $: showContextVarPicker = [
     'bun',
     'bunnative',
     'nativets',
-    'php'
+    'php',
+    'rust'
 ].includes(lang ?? '');
 $: showVarPicker = [
     'python3',
@@ -74,7 +74,8 @@ $: showVarPicker = [
     'bun',
     'bunnative',
     'nativets',
-    'php'
+    'php',
+    'rust'
 ].includes(lang ?? '');
 $: showResourcePicker = [
     'python3',
@@ -85,7 +86,8 @@ $: showResourcePicker = [
     'bun',
     'bunnative',
     'nativets',
-    'php'
+    'php',
+    'rust'
 ].includes(lang ?? '');
 $: showResourceTypePicker =
     ['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)) ||
@@ -625,15 +627,11 @@ $res = json_decode(curl_exec($ch));`)
 				</div>
 			{/if}
 
-			{#if customUi?.autoformatting != false}
-				<FormatOnSave />
-			{/if}
 			{#if customUi?.aiGen != false}
 				<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} />
 			{/if}
-			{#if customUi?.aiFix != false}
-				<CodeCompletionStatus />
-			{/if}
+
+			<EditorSettings {customUi} />
 		</div>
 	</div>
 

package/package/components/EditorSettings.svelte

@@ -0,0 +1,44 @@
+<script>import { Settings } from 'lucide-svelte';
+import FormatOnSave from './FormatOnSave.svelte';
+import VimMode from './VimMode.svelte';
+import { Button, Popup } from './common';
+import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte';
+export let customUi = {};
+</script>
+
+{#if customUi?.autoformatting != false || customUi?.vimMode != false || customUi?.aiCompletion != false}
+	<Popup
+		floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
+		containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+	>
+		<svelte:fragment slot="button">
+			<Button
+				btnClasses="text-tertiary"
+				color="light"
+				size="xs"
+				nonCaptureEvent={true}
+				startIcon={{ icon: Settings }}
+				iconOnly
+				title="Editor settings"
+			/>
+		</svelte:fragment>
+
+		<div class="flex flex-col gap-y-2">
+			{#if customUi?.autoformatting != false}
+				<div>
+					<FormatOnSave />
+				</div>
+			{/if}
+			{#if customUi?.vimMode != false}
+				<div>
+					<VimMode />
+				</div>
+			{/if}
+			{#if customUi?.aiCompletion != false}
+				<div>
+					<CodeCompletionStatus />
+				</div>
+			{/if}
+		</div>
+	</Popup>
+{/if}

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { EditorBarUi } from './custom_ui';
+declare const __propDef: {
+    props: {
+        customUi?: EditorBarUi | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EditorSettingsProps = typeof __propDef.props;
+export type EditorSettingsEvents = typeof __propDef.events;
+export type EditorSettingsSlots = typeof __propDef.slots;
+export default class EditorSettings extends SvelteComponent<EditorSettingsProps, EditorSettingsEvents, EditorSettingsSlots> {
+}
+export {};

package/package/components/EditorTheme.svelte

@@ -1,5 +1,5 @@
 <script>import { isInitialized } from './vscode';
-import { editor as meditor } from 'monaco-editor/esm/vs/editor/editor.api';
+import { editor as meditor } from 'monaco-editor';
 import { onMount } from 'svelte';
 import DarkModeObserver from './DarkModeObserver.svelte';
 function onThemeChange() {

package/package/components/ErrorOrRecoveryHandler.svelte

@@ -1,5 +1,4 @@
 <script>import { Alert, Button, Tab, Tabs } from './common';
-import SchemaForm from './SchemaForm.svelte';
 import ScriptPicker from './ScriptPicker.svelte';
 import Toggle from './Toggle.svelte';
 import { base } from '../base';
@@ -207,13 +206,17 @@ $: handlerPath &&
 	{/if}
 	{#if handlerPath}
 		<p class="font-semibold text-sm mt-4 mb-2">Extra arguments</p>
-		<SchemaForm
-			disabled={!isEditable}
-			schema={customHandlerSchema}
-			bind:args={handlerExtraArgs}
-			shouldHideNoInputs
-			class="text-xs"
-		/>
+		{#await import('./SchemaForm.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default
+				disabled={!isEditable}
+				schema={customHandlerSchema}
+				bind:args={handlerExtraArgs}
+				shouldHideNoInputs
+				class="text-xs"
+			/>
+		{/await}
 		{#if customHandlerSchema && customHandlerSchema.properties && Object.keys(customHandlerSchema.properties).length === 0}
 			<div class="text-xs texg-gray-700">This error handler takes no extra arguments</div>
 		{/if}
@@ -236,19 +239,23 @@ $: handlerPath &&
 		/>
 	</span>
 	{#if workspaceConnectedToSlack}
-		<SchemaForm
-			disabled={!$enterpriseLicense || !isSlackHandler(handlerPath)}
-			schema={slackHandlerSchema}
-			schemaSkippedValues={['slack']}
-			schemaFieldTooltip={{
-				channel: 'Slack channel name without the "#" - example: "windmill-alerts"'
-			}}
-			bind:args={handlerExtraArgs}
-			shouldHideNoInputs
-			class="text-xs"
-		/>
+		{#await import('./SchemaForm.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default
+				disabled={!$enterpriseLicense || !isSlackHandler(handlerPath)}
+				schema={slackHandlerSchema}
+				schemaSkippedValues={['slack']}
+				schemaFieldTooltip={{
+					channel: 'Slack channel name without the "#" - example: "windmill-alerts"'
+				}}
+				bind:args={handlerExtraArgs}
+				shouldHideNoInputs
+				class="text-xs"
+			/>
+		{/await}
 	{:else if workspaceConnectedToSlack == undefined}
-		<Loader2 class="animate-spin" />
+		<Loader2 class="animate-spin" size={10} />
 	{/if}
 	{#if $enterpriseLicense && isSlackHandler(handlerPath)}
 		{#if workspaceConnectedToSlack == false}