windmill-components 1.383.9 → 1.389.2

package/package/components/SimpleEditor.svelte

@@ -42,8 +42,9 @@ import domContent from '../dom.d.ts.txt?raw';
 import { buildWorkerDefinition } from './build_workers';
 import { initializeVscode } from './vscode';
 import EditorTheme from './EditorTheme.svelte';
-import { tailwindClasses } from './apps/editor/componentsPanel/tailwindUtils';
 import { writable } from 'svelte/store';
+import { vimMode } from '../stores';
+import { initVim } from './monaco_keybindings';
 // import { createConfiguredEditor } from 'vscode/monaco'
 // import type { IStandaloneCodeEditor } from 'vscode/vscode/vs/editor/standalone/browser/standaloneCodeEditor'
 let divEl = null;
@@ -62,6 +63,8 @@ export let fixedOverflowWidgets = true;
 export let small = false;
 export let domLib = false;
 export let autofocus = false;
+export let allowVim = false;
+export let tailwindClasses = [];
 const dispatch = createEventDispatcher();
 const uri = `file:///${hash}.${langToExt(lang)}`;
 buildWorkerDefinition('../../../workers', import.meta.url);
@@ -125,6 +128,20 @@ let width = 0;
 let initialized = false;
 let disableTabCond;
 $: disableTabCond?.set(!code && !!suggestion);
+let statusDiv = null;
+let vimDisposable = undefined;
+$: allowVim && editor && $vimMode && statusDiv && onVimMode();
+$: !$vimMode && vimDisposable && onVimDisable();
+function onVimDisable() {
+    vimDisposable?.dispose();
+}
+function onVimMode() {
+    if (editor && statusDiv) {
+        vimDisposable = initVim(editor, statusDiv, () => {
+            console.log('vim save not possible for simple editor');
+        });
+    }
+}
 async function loadMonaco() {
     await initializeVscode();
     initialized = true;
@@ -321,6 +338,7 @@ onMount(async () => {
 $: mounted && extraLib && initialized && loadExtraLib();
 onDestroy(() => {
     try {
+        vimDisposable?.dispose();
         model && model.dispose();
         editor && editor.dispose();
     }
@@ -338,7 +356,14 @@ onDestroy(() => {
 		{suggestion}
 	</div>
 {/if}
-<div bind:this={divEl} class="{$$props.class ?? ''} editor" bind:clientWidth={width} />
+<div
+	bind:this={divEl}
+	class="{$$props.class ?? ''} editor simple-editor {!allowVim ? 'nonmain-editor' : ''}"
+	bind:clientWidth={width}
+/>
+{#if allowVim && $vimMode}
+	<div class="fixed bottom-0 z-30" bind:this={statusDiv} />
+{/if}
 
 <style>
 	.editor {

package/package/components/SimpleEditor.svelte.d.ts

@@ -3,7 +3,7 @@ import '@codingame/monaco-vscode-standalone-languages';
 import '@codingame/monaco-vscode-standalone-json-language-features';
 import '@codingame/monaco-vscode-standalone-css-language-features';
 import '@codingame/monaco-vscode-standalone-typescript-language-features';
-import { editor as meditor } from 'monaco-editor';
+import { editor as meditor, type IDisposable } from 'monaco-editor';
 import '@codingame/monaco-vscode-standalone-languages';
 import '@codingame/monaco-vscode-standalone-json-language-features';
 import '@codingame/monaco-vscode-standalone-css-language-features';
@@ -24,13 +24,15 @@ declare const __propDef: {
         small?: boolean | undefined;
         domLib?: boolean | undefined;
         autofocus?: boolean | undefined;
+        allowVim?: boolean | undefined;
+        tailwindClasses?: string[] | undefined;
         getCode?: (() => string) | undefined;
         insertAtCursor?: ((code: string) => void) | undefined;
         setCode?: ((ncode: string) => void) | undefined;
         format?: (() => void) | undefined;
         focus?: (() => 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;
         setSuggestion?: ((value: string) => void) | undefined;
@@ -54,7 +56,7 @@ export default class SimpleEditor extends SvelteComponent<SimpleEditorProps, Sim
     get format(): () => void;
     get focus(): () => 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 setSuggestion(): (value: string) => void;

package/package/components/Summary.svelte

@@ -1,5 +1,6 @@
 <script>import { Pen } from 'lucide-svelte';
 export let value;
+export let disabled = false;
 function blur(e) {
     e.key === 'Enter' && e?.target?.blur();
 }
@@ -13,51 +14,52 @@ function blur(e) {
 			placeholder="Untitled"
 			class="windmillapp app-title text-sm w-full font-semibold"
 			bind:value
+			{disabled}
 			on:keydown={blur}
 		/>
-		<Pen class="absolute top-2 right-2 pen-icon -z-10 opacity-60" size={14} />
+		{#if !disabled}
+			<Pen class="absolute top-2 right-2 pen-icon -z-10 opacity-60" size={14} />
+		{/if}
 	</div>
 </div>
 
 <style global>
 	:global(.app-title) {
-		display: block;
-		width: 100%;
-		border-radius: 0.25rem;
-		border-width: 0px;
-		padding: 0.25rem;
-		padding-left: 0.5rem;
-		padding-right: 0.5rem;
-		font-size: 0.875rem;
-		line-height: 1.25rem;
-		font-weight: 600
+		display: block !important;
+		width: 100% !important;
+		border-radius: 0.25rem !important;
+		border-width: 0px !important;
+		padding: 0.25rem !important;
+		padding-left: 0.5rem !important;
+		padding-right: 0.5rem !important;
+		font-size: 0.875rem !important;
+		line-height: 1.25rem !important;
+		font-weight: 600 !important
 }
 
 	:global(.app-title:hover) {
-		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-		--tw-ring-opacity: 1;
-		--tw-ring-color: rgb(234 238 244 / var(--tw-ring-opacity));
-		--tw-ring-offset-width: 0px
+		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
+		--tw-ring-opacity: 1 !important;
+		--tw-ring-color: rgb(234 238 244 / var(--tw-ring-opacity)) !important;
+		--tw-ring-offset-width: 0px !important
 }
 
 	:global(.app-title:focus) {
-		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-		--tw-ring-opacity: 1;
-		--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-		--tw-ring-offset-width: 0px;
+		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+		--tw-ring-opacity: 1 !important;
+		--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)) !important;
+		--tw-ring-offset-width: 0px !important;
 		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
 }
 
 	:global(.dark) :global(.app-title) {
-		--tw-border-opacity: 1;
-		border-color: rgb(75 85 99 / var(--tw-border-opacity));
-		--tw-bg-opacity: 1;
-		background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-		--tw-text-opacity: 1;
-		color: rgb(var(--color-text-secondary) / var(--tw-text-opacity))
+		--tw-border-opacity: 1 !important;
+		border-color: rgb(75 85 99 / var(--tw-border-opacity)) !important;
+		--tw-text-opacity: 1 !important;
+		color: rgb(var(--color-text-secondary) / var(--tw-text-opacity)) !important
 }
 
 	:global(.dark) :global(.app-title:focus) {
@@ -66,9 +68,9 @@ function blur(e) {
 }
 
 	:global(.dark) :global(.app-title:hover) {
-		--tw-ring-opacity: 1;
-		--tw-ring-color: rgb(54 77 110 / var(--tw-ring-opacity))
+		--tw-ring-opacity: 1 !important;
+		--tw-ring-color: rgb(54 77 110 / var(--tw-ring-opacity)) !important
 }
 	:global(.app-title:focus) + :global(.pen-icon) {
-		display: none
+		display: none !important
 }</style>

package/package/components/Summary.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         value: string;
+        disabled?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/SuperadminSettings.svelte

@@ -21,6 +21,7 @@ import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svel
 import ChangeInstanceUsername from './ChangeInstanceUsername.svelte';
 import Tooltip from './Tooltip.svelte';
 import { isCloudHosted } from '../cloud';
+import InstanceNameEditor from './InstanceNameEditor.svelte';
 let drawer;
 let filter = '';
 export function openDrawer() {
@@ -63,6 +64,21 @@ async function enableAutomateUsernameCreationSetting() {
     sendUserToast('Automatic username creation enabled');
     listUsers();
 }
+async function updateName(name, email) {
+    try {
+        await UserService.globalUserUpdate({
+            email,
+            requestBody: {
+                name
+            }
+        });
+        sendUserToast('User updated');
+        listUsers();
+    }
+    catch (e) {
+        sendUserToast('Error updating user', true);
+    }
+}
 </script>
 
 <SearchItems
@@ -213,15 +229,18 @@ async function enableAutomateUsernameCreationSetting() {
 														</td>
 														<td>
 															<div class="flex flex-row gap-x-1 justify-end">
-																{#if automateUsernameCreation && username}
-																	<ChangeInstanceUsername
-																		{username}
-																		{email}
-																		on:renamed={() => {
-																			listUsers()
-																		}}
-																	/>
-																{/if}
+																<InstanceNameEditor
+																	value={name}
+																	{username}
+																	{email}
+																	on:save={(e) => {
+																		updateName(e.detail, email)
+																	}}
+																	on:renamed={() => {
+																		listUsers()
+																	}}
+																	{automateUsernameCreation}
+																/>
 																<Button
 																	color="light"
 																	variant="contained"
@@ -230,7 +249,6 @@ async function enableAutomateUsernameCreationSetting() {
 																	btnClasses="text-red-500"
 																	on:click={() => {
 																		deleteConfirmedCallback = async () => {
-																			console.log(email)
 																			await UserService.globalUserDelete({ email })
 																			sendUserToast(`User ${email} removed`)
 																			listUsers()

package/package/components/TemplateEditor.svelte

@@ -536,7 +536,7 @@ onDestroy(() => {
 <div
 	bind:this={divEl}
 	style="height: 18px;"
-	class="{$$props.class ?? ''} border template rounded min-h-4 mx-0.5 overflow-clip"
+	class="{$$props.class ?? ''} border template nonmain-editor rounded min-h-4 mx-0.5 overflow-clip"
 	bind:clientWidth={width}
 />
 

package/package/components/TestJobLoader.svelte.d.ts

@@ -51,7 +51,7 @@ export default class TestJobLoader extends SvelteComponent<TestJobLoaderProps, T
     get runScriptByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
     get runFlowByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
     get getLogs(): () => Promise<void>;
-    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php" | undefined, args: Record<string, any>, tag: string | undefined, lock?: string | undefined) => Promise<string>;
+    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php" | "rust" | undefined, args: Record<string, any>, tag: string | undefined, lock?: string | undefined) => Promise<string>;
     get cancelJob(): () => Promise<void>;
     get clearCurrentJob(): () => Promise<void>;
     get watchJob(): (testId: string) => Promise<void>;

package/package/components/VimMode.svelte

@@ -0,0 +1,16 @@
+<script>import { VIM_MODE_SETTING_NAME, vimMode } from '../stores';
+import { storeLocalSetting } from '../utils';
+import Toggle from './Toggle.svelte';
+function storeSetting() {
+    storeLocalSetting(VIM_MODE_SETTING_NAME, $vimMode.toString());
+}
+</script>
+
+<Toggle
+	size="xs"
+	bind:checked={$vimMode}
+	on:change={() => {
+		storeSetting()
+	}}
+	options={{ right: 'vim mode' }}
+/>

package/package/components/VimMode.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type VimModeProps = typeof __propDef.props;
+export type VimModeEvents = typeof __propDef.events;
+export type VimModeSlots = typeof __propDef.slots;
+export default class VimMode extends SvelteComponent<VimModeProps, VimModeEvents, VimModeSlots> {
+}
+export {};

package/package/components/WorkerTagPicker.svelte

@@ -15,7 +15,7 @@ async function loadWorkerGroups() {
 
 <div class="flex gap-2 items-center">
 	<div class="max-w-sm grow">
-		{#if workerTags}
+		{#if $workerTags}
 			{#if $workerTags?.length ?? 0 > 0}
 				<select
 					value={tag}
@@ -32,6 +32,9 @@ async function loadWorkerGroups() {
 					{:else}
 						<option value="" disabled selected>Worker Group Tag</option>
 					{/if}
+					{#if tag && tag != '' && !($workerTags ?? []).includes(tag)}
+						<option value={tag} selected>{tag}</option>
+					{/if}
 					{#each $workerTags ?? [] as tag (tag)}
 						<option value={tag}>{tag}</option>
 					{/each}

package/package/components/WorkspaceGroup.svelte

@@ -7,7 +7,7 @@ import { ConfigService, WorkspaceService } from '../gen';
 import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
 import { createEventDispatcher } from 'svelte';
 import { sendUserToast } from '../toast';
-import { emptyString } from '../utils';
+import { emptyString, pluralize } from '../utils';
 import { enterpriseLicense, superadmin } from '../stores';
 import Tooltip from './Tooltip.svelte';
 import Editor from './Editor.svelte';
@@ -16,10 +16,28 @@ import Section from './Section.svelte';
 import Label from './Label.svelte';
 import AutoComplete from 'simple-svelte-autocomplete';
 import YAML from 'yaml';
+import Toggle from './Toggle.svelte';
 export let name;
 export let config;
 export let activeWorkers;
 export let customTags;
+export let workers;
+$: vcpus_memory = computeVCpuAndMemory(workers);
+function computeVCpuAndMemory(workers) {
+    let vcpus = 0;
+    let memory = 0;
+    for (const [_, pings] of workers) {
+        for (const ping of pings) {
+            if (ping.vcpus) {
+                vcpus += ping.vcpus;
+            }
+            if (ping.memory) {
+                memory += ping.memory;
+            }
+        }
+    }
+    return { vcpus, memory };
+}
 let nconfig = {};
 function loadNConfig() {
     nconfig = config
@@ -65,7 +83,8 @@ const defaultTags = [
     'flow',
     'other',
     'bun',
-    'php'
+    'php',
+    'rust'
 ];
 const nativeTags = [
     'nativets',
@@ -409,6 +428,42 @@ let createdTags = [];
 					{/if}
 				{/if}
 			</Section>
+			{#if nconfig !== undefined}
+				<div class="mt-8" />
+				<Section label="Alerts" tooltip="Alert is sent to the configured critical error channels">
+					<Toggle
+						size="sm"
+						options={{
+							right: 'Send an alert when the number of alive workers falls below a given threshold'
+						}}
+						checked={nconfig?.min_alive_workers_alert_threshold !== undefined ?? false}
+						on:change={(ev) => {
+							if (nconfig !== undefined) {
+								nconfig.min_alive_workers_alert_threshold = ev.detail ? 1 : undefined
+								dirty = true
+							}
+						}}
+						disabled{!$enterpriseLicense}
+					/>
+					{#if nconfig.min_alive_workers_alert_threshold !== undefined}
+						<div class="flex flex-row items-center justify-between">
+							<div class="flex flex-row items-center text-sm gap-2">
+								<p>Triggered when number of workers in group is lower than</p>
+								<input
+									type="number"
+									class="!w-14 text-center"
+									disabled={!$enterpriseLicense}
+									min="1"
+									bind:value={nconfig.min_alive_workers_alert_threshold}
+									on:change={(ev) => {
+										dirty = true
+									}}
+								/>
+							</div>
+						</div>
+					{/if}
+				</Section>
+			{/if}
 		{:else if selected == 'dedicated'}
 			{#if nconfig?.dedicated_worker != undefined}
 				<input
@@ -733,6 +788,13 @@ let createdTags = [];
 						variant="contained"
 						color="dark"
 						on:click={async () => {
+							if (
+								nconfig?.min_alive_workers_alert_threshold &&
+								nconfig?.min_alive_workers_alert_threshold < 1
+							) {
+								sendUserToast('Minimum alive workers alert threshold must be at least 1', true)
+								return
+							}
 							customEnvVars.forEach((envvar) => {
 								if (
 									nconfig.env_vars_static !== undefined &&
@@ -764,81 +826,90 @@ let createdTags = [];
 	</DrawerContent>
 </Drawer>
 
-<div class="flex gap-2 items-center justify-end flex-row my-2">
-	{#if $superadmin}
-		<Button
-			color="light"
-			size="xs"
-			on:click={() => {
-				dirty = false
-				loadNConfig()
-				drawer.openDrawer()
-			}}
-			startIcon={{ icon: config == undefined ? Plus : Settings }}
-		>
-			<div class="flex flex-row gap-1 items-center">
-				{config == undefined ? 'Create' : 'Edit'} config
-			</div>
-		</Button>
+<div class=" flex items-center justify-between pt-1">
+	<div class="text-xs"
+		>{pluralize(activeWorkers, 'worker')}
+		{#if vcpus_memory?.vcpus}
+			- {(vcpus_memory?.vcpus / 100000).toFixed(2)} vCPUs{/if}
+		{#if vcpus_memory?.memory}
+			- {((vcpus_memory?.memory * 1.0) / 1024 / 1024 / 1024).toFixed(2)} GB{/if}</div
+	>
+	<div class="flex gap-2 items-center justify-end flex-row my-2">
+		{#if $superadmin}
+			<Button
+				color="light"
+				size="xs"
+				on:click={() => {
+					dirty = false
+					loadNConfig()
+					drawer.openDrawer()
+				}}
+				startIcon={{ icon: config == undefined ? Plus : Settings }}
+			>
+				<div class="flex flex-row gap-1 items-center">
+					{config == undefined ? 'Create' : 'Edit'} config
+				</div>
+			</Button>
 
-		<Button
-			color="light"
-			size="xs"
-			on:click={() => {
-				navigator.clipboard.writeText(
-					YAML.stringify({
-						name,
-						...config
-					})
-				)
-				sendUserToast('Worker config copied to clipboard as YAML')
-			}}
-			startIcon={{ icon: Copy }}
-		>
-			Copy config
-		</Button>
+			<Button
+				color="light"
+				size="xs"
+				on:click={() => {
+					navigator.clipboard.writeText(
+						YAML.stringify({
+							name,
+							...config
+						})
+					)
+					sendUserToast('Worker config copied to clipboard as YAML')
+				}}
+				startIcon={{ icon: Copy }}
+			>
+				Copy config
+			</Button>
+
+			{#if config}
+				<Button
+					color="light"
+					size="xs"
+					on:click={() => {
+						if (!$enterpriseLicense) {
+							sendUserToast('Worker Management UI is an EE feature', true)
+						} else {
+							openDelete = true
+						}
+					}}
+					startIcon={{ icon: Trash }}
+					btnClasses="text-red-400"
+				>
+					Delete config
+				</Button>
+			{/if}
 
-		{#if config}
 			<Button
 				color="light"
 				size="xs"
 				on:click={() => {
-					if (!$enterpriseLicense) {
-						sendUserToast('Worker Management UI is an EE feature', true)
-					} else {
-						openDelete = true
-					}
+					loadNConfig()
+
+					openClean = true
 				}}
-				startIcon={{ icon: Trash }}
 				btnClasses="text-red-400"
+				startIcon={{ icon: RefreshCcwIcon }}
 			>
-				Delete config
+				Clean cache
+			</Button>
+		{:else if config}
+			<Button
+				color="light"
+				size="xs"
+				on:click={() => {
+					loadNConfig()
+					drawer.openDrawer()
+				}}
+			>
+				<div class="flex flex-row gap-1 items-center"> config </div>
 			</Button>
 		{/if}
-
-		<Button
-			color="light"
-			size="xs"
-			on:click={() => {
-				loadNConfig()
-
-				openClean = true
-			}}
-			btnClasses="text-red-400"
-			startIcon={{ icon: RefreshCcwIcon }}
-		>
-			Clean cache
-		</Button>
-	{:else if config}
-		<Button
-			color="light"
-			size="xs"
-			on:click={() => {
-				loadNConfig()
-				drawer.openDrawer()
-			}}
-		>
-			<div class="flex flex-row gap-1 items-center"> config </div>
-		</Button>
-	{/if}
+	</div>
 </div>

package/package/components/WorkspaceGroup.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import { type WorkerPing } from '../gen';
 declare const __propDef: {
     props: {
         name: string;
@@ -10,9 +11,11 @@ declare const __propDef: {
             init_bash?: string;
             additional_python_paths?: string[];
             pip_local_dependencies?: string[];
+            min_alive_workers_alert_threshold?: number;
         };
         activeWorkers: number;
         customTags: string[] | undefined;
+        workers: [string, WorkerPing[]][];
         defaultTagPerWorkspace?: boolean | undefined;
     };
     events: {

package/package/components/apps/components/display/table/AppAggridExplorerTable.svelte

@@ -27,7 +27,7 @@ export let allowColumnDefsActions = true;
 let inputs = {};
 const context = getContext('AppViewerContext');
 const contextPanel = getContext('ContextPanel');
-const { app, selectedComponent, componentControl, darkMode } = context;
+const { app, selectedComponent, componentControl, darkMode, mode } = context;
 let css = initCss($app.css?.aggridcomponent, customCss);
 let selectedRowIndex = -1;
 function toggleRow(row) {
@@ -382,7 +382,24 @@ function updateOptions() {
 			class="ag-theme-alpine"
 			class:ag-theme-alpine-dark={$darkMode}
 		>
-			<div bind:this={eGui} style:height="100%" />
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				bind:this={eGui}
+				style:height="100%"
+				on:keydown={(e) => {
+					if ((e.ctrlKey || e.metaKey) && e.key === 'c' && $mode !== 'dnd') {
+						const selectedCell = api?.getFocusedCell()
+						if (selectedCell) {
+							const rowIndex = selectedCell.rowIndex
+							const colId = selectedCell.column?.getId()
+							const rowNode = api?.getDisplayedRowAtIndex(rowIndex)
+							const selectedValue = rowNode?.data?.[colId]
+							navigator.clipboard.writeText(selectedValue)
+							sendUserToast('Copied cell value to clipboard', false)
+						}
+					}
+				}}
+			/>
 		</div>
 		{#if resolvedConfig && 'footer' in resolvedConfig && resolvedConfig.footer}
 			<div class="flex gap-1 w-full justify-between items-center text-xs text-primary p-2">

package/package/components/apps/components/display/table/AppAggridInfiniteTable.svelte

@@ -19,6 +19,7 @@ export let initializing = undefined;
 export let render;
 export let customCss = undefined;
 export let actions = undefined;
+export let actionsOrder = undefined;
 let runnableComponent = undefined;
 function clear() {
     setTimeout(() => {