windmill-components 1.434.1 → 1.444.0

package/package/components/apps/editor/component/components.js

@@ -3174,7 +3174,8 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                         mysql: 'MySQL',
                         ms_sql_server: 'MS SQL Server',
                         snowflake: 'Snowflake',
-                        bigquery: 'BigQuery'
+                        bigquery: 'BigQuery',
+                        snowflake_oauth: 'Snowflake OAuth'
                     },
                     configuration: {
                         postgresql: {
@@ -3406,7 +3407,7 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                     value: 'sm',
                     fieldType: 'select',
                     selectOptions: [
-                        { value: 'xs', label: 'Extra Small' },
+                        { value: 'xs', label: 'Extra small' },
                         { value: 'sm', label: 'Small' }
                     ]
                 },
@@ -3576,7 +3577,7 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
         }
     },
     recomputeallcomponent: {
-        name: 'Recompute all',
+        name: 'Recompute All',
         icon: RefreshCw,
         documentationLink: `${documentationBaseUrl}/recompute_all`,
         dims: '4:1-6:1',

package/package/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -250,7 +250,7 @@ let ccDrawer;
 					</div>
 				</div>
 			</ListItem>
-			<ListItem title={'Custom Components'} tooltip={'Create components in React or vanilla JS'}>
+			<ListItem title={'Custom Components'} tooltip={'Create components in React or Vanilla JS'}>
 				<div class="flex flex-wrap gap-3 py-2">
 					{#if customComponents}
 						{#each customComponents as cc (cc.path)}

package/package/components/apps/editor/componentsPanel/GroupList.svelte

@@ -33,8 +33,18 @@ async function addGroup(nameField) {
         name: 'app_group'
     });
     let subgrids = getSubgrids(item);
+    let i = groups.length;
+    let prefix = `f/app_groups/group_`;
+    while (true) {
+        if (groups.find((g) => g.path.startsWith(prefix + i))) {
+            i++;
+        }
+        else {
+            break;
+        }
+    }
     const group = {
-        path: 'f/app_groups/group_' + groups.length,
+        path: prefix + i,
         value: {
             value: { item, subgrids },
             name: nameField
@@ -45,7 +55,7 @@ async function addGroup(nameField) {
         sendUserToast('Group created: ' + message);
     }
     catch (e) {
-        sendUserToast('Group creation failed. You need write privilege on folder app_groups: ' + e.body ?? e, true);
+        sendUserToast('Group creation failed. You need write privilege on folder app_groups: ' + (e.body ?? e), true);
     }
     getGroups();
     nameField = '';

package/package/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -94,7 +94,7 @@ let hasState = false;
 						{/each}
 					</div>
 					<div>
-						<span class="text-xs font-semibold text-secondary p-2">Background runnables</span>
+						<span class="text-xs font-semibold text-secondary p-2">Background Runnables</span>
 						<BackgroundScriptsOutput />
 					</div>
 				</div>

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte

@@ -35,7 +35,7 @@ export function openDrawer() {
 			/>
 		{/if}
 		<svelte:fragment slot="actions">
-			<Button size="xs" startIcon={{ icon: Save }} disabled>Automatically Synced</Button>
+			<Button size="xs" startIcon={{ icon: Save }} disabled>Automatically synced</Button>
 		</svelte:fragment>
 	</DrawerContent>
 </Drawer>

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte

@@ -1,5 +1,4 @@
 <script>import { getContext } from 'svelte';
-import SplitPanesWrapper from '../../../splitPanes/SplitPanesWrapper.svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import InlineScriptsPanelList from './InlineScriptsPanelList.svelte';
 import InlineScriptEditor from './InlineScriptEditor.svelte';
@@ -87,60 +86,58 @@ async function createScriptFromInlineScript(id, runnable) {
 export let width = undefined;
 </script>
 
-<SplitPanesWrapper>
-	<Splitpanes
-		class={twMerge('!overflow-visible')}
-		style={width !== undefined ? `width:${width}px;` : ''}
-	>
-		<Pane size={25}>
-			<InlineScriptsPanelList on:hidePanel />
-		</Pane>
-		<Pane size={75}>
-			{#if !$selectedComponentInEditor}
-				<div class="text-sm text-secondary text-center py-8 px-2">
-					Select a script on the left panel
-				</div>
-			{:else if gridItem}
-				{#key gridItem?.id}
-					<InlineScriptsPanelWithTable
+<Splitpanes
+	class={twMerge('!overflow-visible')}
+	style={width !== undefined ? `width:${width}px;` : 'width: 100%;'}
+>
+	<Pane size={25}>
+		<InlineScriptsPanelList on:hidePanel />
+	</Pane>
+	<Pane size={75}>
+		{#if !$selectedComponentInEditor}
+			<div class="text-sm text-secondary text-center py-8 px-2">
+				Select a script on the left panel
+			</div>
+		{:else if gridItem}
+			{#key gridItem?.id}
+				<InlineScriptsPanelWithTable
+					on:createScriptFromInlineScript={(e) => {
+						createScriptFromInlineScript(gridItem?.id ?? 'unknown', e.detail)
+					}}
+					bind:gridItem
+				/>
+			{/key}
+		{:else if unusedInlineScript > -1 && $app.unusedInlineScripts?.[unusedInlineScript]}
+			{#key unusedInlineScript}
+				<InlineScriptEditor
+					on:createScriptFromInlineScript={() =>
+						sendUserToast('Cannot save to workspace unused scripts', true)}
+					id={`unused-${unusedInlineScript}`}
+					bind:name={$app.unusedInlineScripts[unusedInlineScript].name}
+					bind:inlineScript={$app.unusedInlineScripts[unusedInlineScript].inlineScript}
+					on:delete={() => {
+						// remove the script from the array at the index
+						$app.unusedInlineScripts.splice(unusedInlineScript, 1)
+						$app.unusedInlineScripts = [...$app.unusedInlineScripts]
+					}}
+				/>
+			{/key}
+		{:else if hiddenInlineScript > -1}
+			{#key hiddenInlineScript}
+				{#if $app.hiddenInlineScripts?.[hiddenInlineScript]}
+					<InlineScriptHiddenRunnable
 						on:createScriptFromInlineScript={(e) => {
-							createScriptFromInlineScript(gridItem?.id ?? 'unknown', e.detail)
+							createScriptFromInlineScript(BG_PREFIX + hiddenInlineScript, e.detail)
 						}}
-						bind:gridItem
-					/>
-				{/key}
-			{:else if unusedInlineScript > -1 && $app.unusedInlineScripts?.[unusedInlineScript]}
-				{#key unusedInlineScript}
-					<InlineScriptEditor
-						on:createScriptFromInlineScript={() =>
-							sendUserToast('Cannot save to workspace unused scripts', true)}
-						id={`unused-${unusedInlineScript}`}
-						bind:name={$app.unusedInlineScripts[unusedInlineScript].name}
-						bind:inlineScript={$app.unusedInlineScripts[unusedInlineScript].inlineScript}
-						on:delete={() => {
-							// remove the script from the array at the index
-							$app.unusedInlineScripts.splice(unusedInlineScript, 1)
-							$app.unusedInlineScripts = [...$app.unusedInlineScripts]
-						}}
-					/>
-				{/key}
-			{:else if hiddenInlineScript > -1}
-				{#key hiddenInlineScript}
-					{#if $app.hiddenInlineScripts?.[hiddenInlineScript]}
-						<InlineScriptHiddenRunnable
-							on:createScriptFromInlineScript={(e) => {
-								createScriptFromInlineScript(BG_PREFIX + hiddenInlineScript, e.detail)
-							}}
-							transformer={$selectedComponentInEditor?.endsWith('_transformer')}
-							on:delete={() => deleteBackgroundScript(hiddenInlineScript)}
-							id={BG_PREFIX + hiddenInlineScript}
-							bind:runnable={$app.hiddenInlineScripts[hiddenInlineScript]}
-						/>{/if}{/key}
-			{:else}
-				<div class="text-sm text-tertiary text-center py-8 px-2">
-					No script found at id {$selectedComponentInEditor}
-				</div>
-			{/if}
-		</Pane>
-	</Splitpanes>
-</SplitPanesWrapper>
+						transformer={$selectedComponentInEditor?.endsWith('_transformer')}
+						on:delete={() => deleteBackgroundScript(hiddenInlineScript)}
+						id={BG_PREFIX + hiddenInlineScript}
+						bind:runnable={$app.hiddenInlineScripts[hiddenInlineScript]}
+					/>{/if}{/key}
+		{:else}
+			<div class="text-sm text-tertiary text-center py-8 px-2">
+				No script found at id {$selectedComponentInEditor}
+			</div>
+		{/if}
+	</Pane>
+</Splitpanes>

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte

@@ -171,7 +171,7 @@ const dispatch = createEventDispatcher();
 		<div>
 			<div class="w-full flex justify-between items-center mb-1">
 				<div class="text-xs text-secondary font-semibold truncate">
-					Background runnables
+					Background Runnables
 					<Tooltip
 						documentationLink="https://www.windmill.dev/docs/apps/app-runnable-panel#background-runnables"
 					>

package/package/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte

@@ -120,8 +120,9 @@ let focus = false;
 				</div>
 			{/if}
 			<button
-				class="border bg-surface absolute top-0.5 right-2 p-0.5"
-				on:click={() => (fullscreen = true)}><Maximize2 size={12} /></button
+				title="Open in drawer"
+				class="border bg-surface absolute hover:text-primary top-0 right-2 p-0.5 text-secondary"
+				on:click={() => (fullscreen = true)}><Maximize2 size={10} /></button
 			>
 			{#if focus}
 				<div class="relative w-full">

package/package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -67,7 +67,7 @@ $: componentInput && onchange?.();
 			<IconSelectInput bind:value={componentInput.value} />
 		{:else if fieldType === 'tab-select'}
 			<TabSelectInput bind:componentInput />
-		{:else if fieldType === 'resource' && subFieldType && ['mysql', 'postgres', 'ms_sql_server', 'snowflake', 'bigquery'].includes(subFieldType)}
+		{:else if fieldType === 'resource' && subFieldType && ['mysql', 'postgres', 'ms_sql_server', 'snowflake', 'snowflake_oauth', 'bigquery'].includes(subFieldType)}
 			<ResourcePicker
 				initialValue={componentInput.value?.split('$res:')?.[1] || ''}
 				on:change={(e) => {

package/package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -11,10 +11,15 @@ import { loadSchema } from '../../../../../infer';
 export let defaultUserInput = false;
 export let hideCreateScript = false;
 export let onlyFlow = false;
-let tab = onlyFlow ? 'workspaceflows' : 'inlinescripts';
+export let rawApps = false;
+const { app, workspace } = getContext('AppViewerContext');
+let tab = onlyFlow
+    ? 'workspaceflows'
+    : $app?.unusedInlineScripts?.length > 0
+        ? 'inlinescripts'
+        : 'workspacescripts';
 let filter = '';
 let picker;
-const { app, workspace } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 async function loadSchemaFromTriggerable(path, runType) {
     const schema = await loadSchema(workspace, path, runType);
@@ -107,15 +112,17 @@ function createScript() {
 			<div class="max-w-6xl">
 				<Tabs bind:selected={tab}>
 					{#if !onlyFlow}
-						<Tab size="sm" value="inlinescripts">
-							<div class="flex gap-2 items-center my-1">
-								<Building size={18} strokeWidth={1.5} />
-								Detached Inline Scripts
-							</div>
-						</Tab>
+						{#if !rawApps}
+							<Tab size="sm" value="inlinescripts">
+								<div class="flex gap-2 items-center my-1">
+									<Building size={18} strokeWidth={1.5} />
+									Detached Inline Scripts
+								</div>
+							</Tab>
+						{/if}
 						<Tab size="sm" value="workspacescripts">
 							<div class="flex gap-2 items-center my-1">
-								<Building size={18} strokeWidth={1.5}/>
+								<Building size={18} strokeWidth={1.5} />
 								Workspace Scripts
 							</div>
 						</Tab>

package/package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         defaultUserInput?: boolean | undefined;
         hideCreateScript?: boolean | undefined;
         onlyFlow?: boolean | undefined;
+        rawApps?: boolean | undefined;
     };
     events: {
         pick: CustomEvent<{

package/package/components/apps/inputType.d.ts

@@ -1,7 +1,7 @@
 import type { ReadFileAs } from '../common/fileInput/model';
 import type { DecisionTreeNode, TypedComponent } from './editor/component';
 import type { InlineScript } from './types';
-export type InputType = 'integer' | 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'labeledselect' | 'tab-select' | 'schema' | 'ag-grid' | 'table-column' | 'plotly' | 'chartjs' | 'DecisionTreeNode' | 'ag-chart' | 'resource' | 'db-explorer' | 'db-table' | 's3' | 'number-tuple' | 'postgres' | 'mysql' | 'ms_sql_server' | 'snowflake' | 'bigquery' | 'app-path';
+export type InputType = 'integer' | 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'labeledselect' | 'tab-select' | 'schema' | 'ag-grid' | 'table-column' | 'plotly' | 'chartjs' | 'DecisionTreeNode' | 'ag-chart' | 'resource' | 'db-explorer' | 'db-table' | 's3' | 'number-tuple' | 'postgres' | 'mysql' | 'ms_sql_server' | 'snowflake' | 'snowflake_oauth' | 'bigquery' | 'app-path';
 export type InputConnection = {
     componentType?: TypedComponent['type'];
     componentId: string;
@@ -109,7 +109,7 @@ export type StaticOptions = {
         label: string;
     }[];
 };
-export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string, 'db-table'> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'array', (object | string)[], 'labeledselect'> | AppInputSpec<'labeledselect', object> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'> | AppInputSpec<'schema', object> | AppInputSpec<'array', object[], 'ag-grid'> | AppInputSpec<'array', object[], 'db-explorer'> | AppInputSpec<'array', object[], 'table-column'> | AppInputSpec<'array', object[], 'plotly'> | AppInputSpec<'array', object[], 'chartjs'> | AppInputSpec<'array', DecisionTreeNode, 'DecisionTreeNode'> | AppInputSpec<'array', object[], 'ag-chart'> | AppInputSpec<'resource', string> | AppInputSpec<'resource', string, 's3'> | AppInputSpec<'resource', string, 'postgres'> | AppInputSpec<'resource', string, 'mysql'> | AppInputSpec<'resource', string, 'ms_sql_server'> | AppInputSpec<'resource', string, 'snowflake'> | AppInputSpec<'resource', string, 'bigquery'> | AppInputSpec<'array', object[], 'number-tuple'> | AppInputSpec<'app-path', string>;
+export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string, 'db-table'> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'array', (object | string)[], 'labeledselect'> | AppInputSpec<'labeledselect', object> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'> | AppInputSpec<'schema', object> | AppInputSpec<'array', object[], 'ag-grid'> | AppInputSpec<'array', object[], 'db-explorer'> | AppInputSpec<'array', object[], 'table-column'> | AppInputSpec<'array', object[], 'plotly'> | AppInputSpec<'array', object[], 'chartjs'> | AppInputSpec<'array', DecisionTreeNode, 'DecisionTreeNode'> | AppInputSpec<'array', object[], 'ag-chart'> | AppInputSpec<'resource', string> | AppInputSpec<'resource', string, 's3'> | AppInputSpec<'resource', string, 'postgres'> | AppInputSpec<'resource', string, 'mysql'> | AppInputSpec<'resource', string, 'ms_sql_server'> | AppInputSpec<'resource', string, 'snowflake'> | AppInputSpec<'resource', string, 'snowflake_oauth'> | AppInputSpec<'resource', string, 'bigquery'> | AppInputSpec<'array', object[], 'number-tuple'> | AppInputSpec<'app-path', string>;
 export type RowAppInput = Extract<AppInput, {
     type: 'row';
 }>;

package/package/components/apps/types.d.ts

@@ -73,6 +73,7 @@ export type InlineScript = {
         id: string;
         key: string;
     }[];
+    id?: number;
 };
 export type AppCssItemName = 'viewer' | 'grid' | AppComponent['type'];
 export type HiddenRunnable = {
@@ -109,6 +110,7 @@ export type App = {
     theme: AppTheme | undefined;
     hideLegacyTopBar?: boolean | undefined;
     mobileViewOnSmallerScreens?: boolean | undefined;
+    version?: number;
 };
 export type ConnectingInput = {
     opened: boolean;

package/package/components/common/alert/ConnectionIndicator.svelte

@@ -0,0 +1,30 @@
+<script context="module">export {};
+</script>
+
+<script>import Popover from '../../Popover.svelte';
+import { Circle } from 'lucide-svelte';
+export let connectionInfo = undefined;
+</script>
+
+{#if connectionInfo}
+	<div class="center-center">
+		{#if connectionInfo.connected}
+			<Popover notClickable>
+				<span class="h-4 w-4 center-center">
+					<Circle class="text-green-600 relative inline-flex fill-current" size={12} />
+				</span>
+
+				<div slot="text"> {connectionInfo.message ?? ''} </div>
+			</Popover>
+		{:else}
+			<Popover notClickable>
+				<span class="h-4 w-4 center-center">
+					<Circle class="text-red-600 animate-ping absolute inline-flex fill-current" size={12} />
+					<Circle class="text-red-600 relative inline-flex fill-current" size={12} />
+				</span>
+
+				<div slot="text"> {connectionInfo.message ?? ''} </div>
+			</Popover>
+		{/if}
+	</div>
+{/if}

package/package/components/common/alert/ConnectionIndicator.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+export type ConnectionInfo = {
+    connected: boolean;
+    message?: string;
+};
+declare const __propDef: {
+    props: {
+        connectionInfo?: ConnectionInfo | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ConnectionIndicatorProps = typeof __propDef.props;
+export type ConnectionIndicatorEvents = typeof __propDef.events;
+export type ConnectionIndicatorSlots = typeof __propDef.slots;
+export default class ConnectionIndicator extends SvelteComponent<ConnectionIndicatorProps, ConnectionIndicatorEvents, ConnectionIndicatorSlots> {
+}
+export {};

package/package/components/common/alert/Notification.svelte

@@ -0,0 +1,15 @@
+<script>export let notificationCount = 0;
+export let notificationLimit = undefined;
+</script>
+
+{#if notificationCount > 0}
+	<div
+		class="bg-red-500 text-white text-[0.6rem] rounded-md w-5 h-5 flex items-center justify-center"
+	>
+		{#if notificationLimit && notificationCount > notificationLimit}
+			{`${notificationLimit}+`}
+		{:else}
+			{notificationCount}
+		{/if}
+	</div>
+{/if}

package/package/components/common/alert/Notification.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        notificationCount?: number | undefined;
+        notificationLimit?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NotificationProps = typeof __propDef.props;
+export type NotificationEvents = typeof __propDef.events;
+export type NotificationSlots = typeof __propDef.slots;
+export default class Notification extends SvelteComponent<NotificationProps, NotificationEvents, NotificationSlots> {
+}
+export {};

package/package/components/common/button/AnimatedButton.svelte

@@ -39,7 +39,7 @@ $: gradientString = `from 0deg, ${gradientColors[darkMode ? 'dark' : 'light'].jo
 		background: inherit;
 		z-index: 1;
 		overflow: hidden;
-		padding: var(--margin-width, 2px);
+		padding: var(--margin-width, 1px);
 	}
 
 	/* Circular gradient */

package/package/components/common/button/RefreshButton.svelte

@@ -0,0 +1,30 @@
+<script>import { Button } from '..';
+import { RefreshCw } from 'lucide-svelte';
+import Popover from '../../Popover.svelte';
+export let loading;
+let buttonHover = false;
+</script>
+
+<Popover>
+	<Button
+		on:mouseenter={() => (buttonHover = true)}
+		on:mouseleave={() => (buttonHover = false)}
+		color="light"
+		size="xs2"
+		variant="border"
+		on:click
+	>
+		<RefreshCw class={loading ? 'animate-spin ' : ''} size="14" />
+	</Button>
+	<svelte:fragment slot="text">
+		{#if loading}
+			{#if buttonHover}
+				Stop Refreshing
+			{:else}
+				Refreshing...
+			{/if}
+		{:else}
+			Refresh
+		{/if}
+	</svelte:fragment>
+</Popover>

package/package/components/common/button/RefreshButton.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        loading: boolean;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RefreshButtonProps = typeof __propDef.props;
+export type RefreshButtonEvents = typeof __propDef.events;
+export type RefreshButtonSlots = typeof __propDef.slots;
+export default class RefreshButton extends SvelteComponent<RefreshButtonProps, RefreshButtonEvents, RefreshButtonSlots> {
+}
+export {};

package/package/components/common/fileDownload/FileDownload.svelte

@@ -3,6 +3,7 @@ import { Download } from 'lucide-svelte';
 import { base } from '../../../base';
 export let s3object;
 export let workspaceId = undefined;
+export let appPath = undefined;
 </script>
 
 <a
@@ -10,9 +11,9 @@ export let workspaceId = undefined;
 border border-dashed border-gray-400 hover:border-blue-500
 focus-within:border-blue-500 hover:bg-blue-50 dark:hover:bg-frost-900 focus-within:bg-blue-50
 duration-200 rounded-lg p-1 gap-2"
-	href={`${base}/api/w/${workspaceId ?? $workspaceStore}/job_helpers/download_s3_file?file_key=${
-		s3object?.s3
-	}${s3object?.storage ? `&storage=${s3object.storage}` : ''}`}
+	href={`${base}/api/w/${workspaceId ?? $workspaceStore}${
+		appPath ? `/apps_u/download_s3_file/${appPath}` : '/job_helpers/download_s3_file'
+	}?file_key=${s3object?.s3}${s3object?.storage ? `&storage=${s3object.storage}` : ''}`}
 	download={s3object?.s3.split('/').pop() ?? 'unnamed_download.file'}
 >
 	<Download />

package/package/components/common/fileDownload/FileDownload.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         s3object: any;
         workspaceId?: string | undefined;
+        appPath?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/common/fileUpload/FileUpload.svelte

@@ -248,7 +248,7 @@ onDestroy(() => {
 											icon: RefreshCcw
 										}}
 									>
-										Retry Upload
+										Retry upload
 									</Button>
 									<Button
 										size="xs2"
@@ -287,7 +287,7 @@ onDestroy(() => {
 											icon: Ban
 										}}
 									>
-										Cancel Upload
+										Cancel upload
 									</Button>
 								{/if}
 
@@ -362,7 +362,7 @@ onDestroy(() => {
 								icon: Ban
 							}}
 						>
-							Cancel All Uploads
+							Cancel all uploads
 						</Button>
 					{/if}
 					<Button

package/package/components/common/languageIcons/LanguageIcon.svelte

@@ -15,6 +15,7 @@ import DenoIcon from '../../icons/DenoIcon.svelte';
 import PHPIcon from '../../icons/PHPIcon.svelte';
 import RustIcon from '../../icons/RustIcon.svelte';
 import AnsibleIcon from '../../icons/AnsibleIcon.svelte';
+import CSharpIcon from '../../icons/CSharpIcon.svelte';
 export let lang;
 export let width = 30;
 export let height = 30;
@@ -36,7 +37,8 @@ const languageLabel = {
     bun: 'TypeScript',
     php: 'PHP',
     rust: 'Rust',
-    ansible: 'Ansible Playbook'
+    ansible: 'Ansible Playbook',
+    csharp: 'C#'
 };
 const langToComponent = {
     go: GoIcon,
@@ -60,7 +62,8 @@ const langToComponent = {
     graphql: GraphqlIcon,
     php: PHPIcon,
     rust: RustIcon,
-    ansible: AnsibleIcon
+    ansible: AnsibleIcon,
+    csharp: CSharpIcon
 };
 let subIconScale = width === 30 ? 0.6 : 0.8;
 </script>

package/package/components/common/layout/List.svelte

@@ -0,0 +1,35 @@
+<script>export let horizontal = false;
+export let gap = 'sm';
+export let justify = 'start';
+export let wFull = true;
+const gapMap = {
+    none: '',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-8'
+};
+const justifyMap = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between'
+};
+</script>
+
+{#if horizontal}
+	<div
+		class="flex flex-row h-full {wFull ? 'w-full' : ''} {gapMap[gap]} items-center {justifyMap[
+			justify
+		]}"
+	>
+		<slot />
+	</div>
+{:else}
+	<div
+		class="flex flex-col h-full {wFull ? 'w-full' : ''} {gapMap[gap]} items-center {justifyMap[
+			justify
+		]}"
+	>
+		<slot />
+	</div>
+{/if}

package/package/components/common/layout/List.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        horizontal?: boolean | undefined;
+        gap?: "none" | "sm" | "md" | "lg" | undefined;
+        justify?: "center" | "start" | "end" | "between" | undefined;
+        wFull?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponent<ListProps, ListEvents, ListSlots> {
+}
+export {};

package/package/components/common/layout/ListElement.svelte

@@ -0,0 +1,3 @@
+<div class="w-full flex-grow bg-blue-300">
+	<slot />
+</div>