windmill-components 1.558.3 → 1.596.0

package/package/components/sidebar/CriticalAlertModal.svelte

@@ -134,7 +134,13 @@ async function acknowledgeAlert(id) {
 }
 </script>
 
-<Modal2 bind:isOpen={open} title="Critical Alerts" target="#content" fixedSize="lg">
+<Modal2
+	bind:isOpen={open}
+	title="Critical Alerts"
+	target="#content"
+	fixedHeight="lg"
+	fixedWidth="lg"
+>
 	<svelte:fragment slot="header-left">
 		<Notification notificationCount={numUnacknowledgedCriticalAlerts} notificationLimit={9999} />
 	</svelte:fragment>
@@ -148,7 +154,7 @@ async function acknowledgeAlert(id) {
 				>
 					<svelte:fragment slot="trigger">
 						<div id="mute-settings-button">
-							<Button variant="border" color="light" nonCaptureEvent>
+							<Button variant="default" nonCaptureEvent>
 								{#if muteSettings.global || muteSettings.workspace}
 									<BellOff size="16" />
 								{:else}
@@ -168,7 +174,6 @@ async function acknowledgeAlert(id) {
 											right: 'Automatically acknowledge critical alerts instance wide'
 										}}
 										size="xs"
-										stopPropagation={true}
 									/>
 								{/if}
 							</div>
@@ -181,7 +186,6 @@ async function acknowledgeAlert(id) {
 										right: 'Automatically acknowledge critical alerts for current workspace'
 									}}
 									size="xs"
-									stopPropagation={true}
 								/>
 							</div>
 						</List>
@@ -197,7 +201,7 @@ async function acknowledgeAlert(id) {
 				>
 					<svelte:fragment slot="trigger">
 						<div id="settings-button">
-							<Button variant="border" color="light" nonCaptureEvent>
+							<Button variant="default" nonCaptureEvent>
 								<Settings size="16" />
 							</Button>
 						</div>
@@ -235,8 +239,7 @@ async function acknowledgeAlert(id) {
 			{:else}
 				<Button
 					size="xs"
-					color="light"
-					variant="border"
+					variant="default"
 					href="{base}/workspace_settings?tab=error_handler"
 					target="_blank"
 				>

package/package/components/sidebar/CriticalAlertModalInner.svelte

@@ -91,7 +91,7 @@ function onFiltersChange() {
     getAlerts(true);
 }
 // Update filter change handlers
-$: hideAcknowledged, workspaceContext, onFiltersChange();
+$: (hideAcknowledged, workspaceContext, onFiltersChange());
 let totalNumberOfAlerts = 0;
 </script>
 
@@ -123,10 +123,10 @@ let totalNumberOfAlerts = 0;
 			</div>
 
 			<List wFull={false} horizontal gap="md" justify="end">
-				<div class="text-xs text-tertiary whitespace-nowrap"
-					>{`${totalNumberOfAlerts === 1000 ? '1000+' : totalNumberOfAlerts ?? '?'} items`}
+				<div class="text-xs text-primary whitespace-nowrap"
+					>{`${totalNumberOfAlerts === 1000 ? '1000+' : (totalNumberOfAlerts ?? '?')} items`}
 				</div>
-				<RefreshButton {loading} on:click={refreshAlerts} />
+				<RefreshButton {loading} onClick={refreshAlerts} />
 			</List>
 		</List>
 	</div>

package/package/components/sidebar/CriticalAlertTable.svelte

@@ -59,9 +59,9 @@ $: availableHeight = (contentHeight - headerHeight - pageSize - 1) / pageSize;
 						<span>Acked</span>
 
 						<Button
-							color="green"
+							variant="accent"
 							startIcon={{ icon: CheckCircle2 }}
-							size="xs2"
+							unifiedSize="sm"
 							disabled={numUnacknowledgedCriticalAlerts === 0}
 							on:click={acknowledgeAll}
 							title="Acknowledge all"
@@ -119,9 +119,9 @@ $: availableHeight = (contentHeight - headerHeight - pageSize - 1) / pageSize;
 								<div class="w-full flex justify-center items-center">
 									{#if !acknowledged}
 										<Button
-											color="green"
+											variant="accent"
 											startIcon={{ icon: CheckCircle2 }}
-											size="xs2"
+											unifiedSize="sm"
 											on:click={() => {
 												if (id) acknowledgeAlert(id)
 											}}

package/package/components/sidebar/MenuButton.svelte

@@ -1,3 +1,10 @@
+<script module lang="ts">export const sidebarClasses = {
+    text: 'text-primary-inverse dark:text-primary data-[light-mode=true]:text-primary text-xs font-normal',
+    selectedText: 'text-emphasis-inverse dark:text-emphasis text-xs font-normal',
+    hoverBg: 'transition-colors hover:bg-surface-hover-inverse dark:hover:bg-surface-hover data-[light-mode=true]:hover:bg-surface-hover'
+};
+</script>
+
 <script lang="ts">import { twMerge } from 'tailwind-merge';
 import Popover from '../Popover.svelte';
 import { createEventDispatcher } from 'svelte';
@@ -38,11 +45,10 @@ const Element = href ? 'a' : 'button';
 						dispatch('click')
 					}}
 			{href}
+			data-light-mode={lightMode}
 			class={twMerge(
 				'group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full',
-				lightMode
-					? 'text-primary data-[highlighted]:bg-surface-hover hover:bg-surface-hover'
-					: 'data-[highlighted]:bg-[#2A3648] hover:bg-[#2A3648] text-primary-inverse dark:text-primary',
+				sidebarClasses.hoverBg,
 				color ? 'border-4' : '',
 				'transition-all relative',
 				classNames
@@ -56,14 +62,7 @@ const Element = href ? 'a' : 'button';
 				{@const SvelteComponent = icon}
 				<SvelteComponent
 					size={16}
-					class={twMerge(
-						'flex-shrink-0',
-						lightMode
-							? 'text-primary group-hover:text-secondary'
-							: 'text-primary-inverse group-hover:text-secondary-inverse dark:group-hover:text-secondary dark:text-primary',
-						'transition-all',
-						iconClasses
-					)}
+					class={twMerge('flex-shrink-0', sidebarClasses.text, 'transition-colors', iconClasses)}
 					{...iconProps}
 				/>
 			{/if}
@@ -72,7 +71,7 @@ const Element = href ? 'a' : 'button';
 				<span
 					class={twMerge(
 						'whitespace-pre truncate',
-						lightMode ? 'text-primary' : 'text-primary-inverse dark:text-primary',
+						sidebarClasses.text,
 						'transition-all',
 						classNames
 					)}

package/package/components/sidebar/MenuButton.svelte.d.ts

@@ -1,3 +1,8 @@
+export declare const sidebarClasses: {
+    text: string;
+    selectedText: string;
+    hoverBg: string;
+};
 import type { MenubarMenuElements } from '@melt-ui/svelte';
 interface Props {
     aiId?: string | undefined;

package/package/components/sidebar/MenuLink.svelte

@@ -5,6 +5,7 @@ import { base } from '$app/paths';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
 import { goto } from '$app/navigation';
 import { twMerge } from 'tailwind-merge';
+import { sidebarClasses } from './MenuButton.svelte';
 let { aiId = undefined, aiDescription = undefined, label, href, icon = undefined, isCollapsed, disabled = false, lightMode = false, item = undefined, class: classNames = '', onclick = undefined } = $props();
 let isSelected = $state(false);
 navigating.subscribe(() => {
@@ -32,16 +33,12 @@ navigating.subscribe(() => {
 			class={twMerge(
 				'group flex items-center px-2 py-2 text-sm font-light rounded-md h-8 gap-3',
 				isSelected
-					? lightMode
-						? 'bg-surface-selected hover:bg-surface-hover rounded-none data-[highlighted]:bg-surface-hover'
-						: 'bg-frost-700 hover:bg-[#30404e] data-[highlighted]:bg-[#30404e]'
-					: lightMode
-						? 'hover:bg-surface-hover rounded-none data-[highlighted]:bg-surface-hover'
-						: 'hover:bg-[#2A3648] data-[highlighted]:bg-[#2A3648]',
-
-				'hover:transition-all',
+					? 'bg-surface-selected-inverse dark:bg-surface-selected'
+					: sidebarClasses.hoverBg,
+				isSelected ? sidebarClasses.selectedText : sidebarClasses.text,
 				classNames
 			)}
+			data-light-mode={lightMode}
 			target={href.includes('http') ? '_blank' : null}
 			title={isCollapsed ? undefined : label}
 			use:conditionalMelt={item}
@@ -49,35 +46,13 @@ navigating.subscribe(() => {
 		>
 			{#if icon}
 				{@const SvelteComponent = icon}
-				<SvelteComponent
-					size={16}
-					class={twMerge(
-						'flex-shrink-0',
-						isSelected
-							? lightMode
-								? 'text-primary group-hover:text-secondary'
-								: 'text-frost-200 group-hover:text-white'
-							: lightMode
-								? 'text-primary group-hover:text-secondary'
-								: 'text-gray-100 group-hover:text-white',
-						'transition-all'
-					)}
-				/>
+				<SvelteComponent size={16} class={twMerge('flex-shrink-0 transition-all')} />
 			{/if}
 
 			{#if !isCollapsed}
 				<span
-					class={twMerge(
-						'whitespace-pre truncate',
-						isSelected
-							? lightMode
-								? 'text-primary group-hover:text-secondary'
-								: 'text-frost-200 group-hover:text-white'
-							: lightMode
-								? 'text-primary group-hover:text-secondary'
-								: 'text-gray-100 group-hover:text-white',
-						'transition-all duration-75'
-					)}
+					data-light-mode={lightMode}
+					class={twMerge('whitespace-pre truncate transition-all duration-75')}
 				>
 					{label}
 				</span>

package/package/components/sidebar/MultiplayerMenu.svelte

@@ -94,7 +94,7 @@ function showActivity(url) {
 					</span>
 					<div class="flex flex-col">
 						<span class="text-sm text-primary truncate">{user}</span>
-						<span class="text-xs text-tertiary truncate">{showActivity(url)}</span>
+						<span class="text-xs text-primary truncate">{showActivity(url)}</span>
 					</div>
 				</div>
 			{/each}

package/package/components/sidebar/OperatorMenu.svelte

@@ -1,14 +1,14 @@
-<script lang="ts">import { Home, Menu as MenuIcon, Play, Settings, LogOut, Moon, Sun, Code2, LayoutDashboard, Building, Calendar, ServerCog } from 'lucide-svelte';
+<script lang="ts">import { Home, Menu as MenuIcon, Play, Settings, LogOut, Moon, Sun, Code2, LayoutDashboard, Building, Calendar, ServerCog, GraduationCap } from 'lucide-svelte';
 import { base } from '../../base';
 import MultiplayerMenu from './MultiplayerMenu.svelte';
-import { enterpriseLicense, superadmin, userWorkspaces, workspaceStore } from '../../stores';
+import { clearWorkspaceFromStorage, enterpriseLicense, superadmin, userWorkspaces, workspaceStore, tutorialsToDo, skippedAll } from '../../stores';
 import { twMerge } from 'tailwind-merge';
 import { USER_SETTINGS_HASH } from './settings';
 import { logout } from '../../logout';
 import DarkModeObserver from '../DarkModeObserver.svelte';
 import BarsStaggered from '../icons/BarsStaggered.svelte';
 import { Menu, Menubar, MenuItem } from '../meltComponents';
-import MenuButton from './MenuButton.svelte';
+import MenuButton, { sidebarClasses } from './MenuButton.svelte';
 import MenuLink from './MenuLink.svelte';
 import { onDestroy } from 'svelte';
 let darkMode = $state(false);
@@ -16,8 +16,20 @@ let { isCollapsed = false, favoriteLinks = [] } = $props();
 let mainMenuLinks = $derived([
     { label: 'Home', id: 'home', href: `${base}/`, icon: Home },
     { label: 'Runs', id: 'runs', href: `${base}/runs`, icon: Play },
-    { label: 'Schedules', id: 'schedules', href: `${base}/schedules`, icon: Calendar }
+    { label: 'Schedules', id: 'schedules', href: `${base}/schedules`, icon: Calendar },
+    // Add Tutorials to main menu only if not all completed and not skipped
+    ...($tutorialsToDo.length > 0 && !$skippedAll
+        ? [
+            {
+                label: 'Tutorials',
+                id: 'tutorials',
+                href: `${base}/tutorials`,
+                icon: GraduationCap
+            }
+        ]
+        : [])
 ].filter((link) => link.id === 'home' ||
+    link.id === 'tutorials' ||
     ($userWorkspaces &&
         $workspaceStore &&
         $userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.[link.id] ===
@@ -166,7 +178,7 @@ onDestroy(() => {
 				</div>
 
 				{#each mainMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
-					<MenuLink class="!text-xs" {...menuLink} {isCollapsed} lightMode {item} />
+					<MenuLink class="!text-xs" {...menuLink} {isCollapsed} {item} lightMode />
 				{/each}
 
 				<div class="divide-y" role="none">
@@ -174,11 +186,11 @@ onDestroy(() => {
 						<MenuItem
 							href={USER_SETTINGS_HASH}
 							class={twMerge(
-								'flex flex-row gap-3.5 items-center px-2 py-2 ',
-								'text-secondary text-xs',
-								'hover:bg-surface-hover hover:text-primary cursor-pointer',
-								'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+								'flex flex-row gap-3.5 items-center px-2 py-2',
+								sidebarClasses.text,
+								sidebarClasses.hoverBg
 							)}
+							lightMode
 							{item}
 						>
 							<Settings size={14} />
@@ -197,10 +209,11 @@ onDestroy(() => {
 									window.localStorage.setItem('dark-mode', 'light')
 								}
 							}}
+							lightMode
 							class={twMerge(
-								'text-secondary block text-left px-2 py-2 font-normal text-xs hover:bg-surface-hover hover:text-primary w-full',
-								'flex flex-row items-center gap-3.5 ',
-								'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+								'w-full flex gap-3.5 px-2 py-2',
+								sidebarClasses.hoverBg,
+								sidebarClasses.text
 							)}
 							{item}
 						>
@@ -213,13 +226,9 @@ onDestroy(() => {
 						</MenuItem>
 						<MenuItem
 							href="{base}/user/workspaces"
-							onClick={() => {
-								localStorage.removeItem('workspace')
-							}}
-							class={twMerge(
-								'text-primary flex gap-3.5 px-2 py-2 text-xs hover:bg-surface-hover hover:text-primary',
-								'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
-							)}
+							onClick={() => clearWorkspaceFromStorage()}
+							lightMode
+							class={twMerge('flex gap-3.5 px-2 py-2', sidebarClasses.hoverBg, sidebarClasses.text)}
 							{item}
 						>
 							<Building size={14} />
@@ -267,7 +276,7 @@ onDestroy(() => {
 							{item}
 						>
 							{#if !moreOpen || secondMenuLinks.length === 0}
-								<div class="px-2 py-2 text-tertiary text-2xs">More...</div>
+								<div class="px-2 py-2 text-primary text-2xs">More...</div>
 							{/if}
 						</MenuItem>
 						{#if moreOpen && secondMenuLinks.length > 0}

package/package/components/sidebar/SidebarContent.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">import MenuLink from './MenuLink.svelte';
-import { superadmin, usedTriggerKinds, userStore, workspaceStore, isCriticalAlertsUIOpen, enterpriseLicense, devopsRole } from '../../stores';
+import { superadmin, usedTriggerKinds, userStore, workspaceStore, isCriticalAlertsUIOpen, enterpriseLicense, devopsRole, tutorialsToDo, skippedAll } from '../../stores';
+import { syncTutorialsTodos } from '../../tutorialUtils';
 import { SIDEBAR_SHOW_SCHEDULES } from '../../consts';
-import { BookOpen, Bot, Boxes, Calendar, DollarSign, Eye, Logs, FolderCog, FolderOpen, Github, HelpCircle, Home, LogOut, Newspaper, Play, Route, ServerCog, Settings, UserCog, Plus, Unplug, AlertCircle, Database, Pyramid, Trash2, MailIcon } from 'lucide-svelte';
+import { BookOpen, HardHat, Boxes, Calendar, DollarSign, Eye, Logs, FolderCog, FolderOpen, Github, GraduationCap, HelpCircle, Home, LogOut, Newspaper, Play, Route, ServerCog, Settings, UserCog, Plus, Unplug, AlertCircle, Database, Pyramid, Trash2, MailIcon } from 'lucide-svelte';
 import UserMenu from './UserMenu.svelte';
 import DiscordIcon from '../icons/brands/Discord.svelte';
 import { WorkspaceService } from '../../gen';
@@ -29,7 +30,7 @@ async function leaveWorkspace() {
     goto('/user/workspaces');
 }
 async function deleteFork() {
-    await WorkspaceService.deleteWorkspace({ workspace: $workspaceStore ?? '', onlyDeleteForks: true });
+    await WorkspaceService.deleteWorkspace({ workspace: $workspaceStore ?? '' });
     sendUserToast('You deleted the workspace');
     clearStores();
     goto('/user/workspaces');
@@ -37,7 +38,7 @@ async function deleteFork() {
 let hasNewChangelogs = $state(false);
 let recentChangelogs = $state([]);
 let lastOpened = localStorage.getItem('changelogsLastOpened');
-onMount(() => {
+onMount(async () => {
     if (lastOpened) {
         // @ts-ignore
         recentChangelogs = changelogs.filter((changelog) => changelog.date > lastOpened);
@@ -47,6 +48,8 @@ onMount(() => {
     else {
         recentChangelogs = changelogs.slice(0, 3);
     }
+    // Sync tutorial progress on mount
+    await syncTutorialsTodos();
 });
 function openChangelogs() {
     const today = new Date().toISOString().split('T')[0];
@@ -58,33 +61,45 @@ const thirdMenuLinks = [
         label: 'Help',
         icon: HelpCircle,
         subItems: [
+            {
+                label: 'Tutorials',
+                href: `${base}/tutorials`,
+                icon: GraduationCap,
+                aiId: 'sidebar-menu-link-tutorials',
+                aiDescription: 'Button to navigate to tutorials',
+                external: false
+            },
             {
                 label: 'Docs',
                 href: 'https://www.windmill.dev/docs/intro/',
                 icon: BookOpen,
                 aiId: 'sidebar-menu-link-docs',
-                aiDescription: 'Button to navigate to docs'
+                aiDescription: 'Button to navigate to docs',
+                external: true
             },
             {
                 label: 'Feedbacks',
                 href: 'https://discord.gg/V7PM2YHsPB',
                 icon: DiscordIcon,
                 aiId: 'sidebar-menu-link-feedbacks',
-                aiDescription: 'Button to navigate to feedbacks'
+                aiDescription: 'Button to navigate to feedbacks',
+                external: true
             },
             {
                 label: 'Issues',
                 href: 'https://github.com/windmill-labs/windmill/issues/new',
                 icon: Github,
                 aiId: 'sidebar-menu-link-issues',
-                aiDescription: 'Button to navigate to issues'
+                aiDescription: 'Button to navigate to issues',
+                external: true
             },
             {
                 label: 'Changelog',
                 href: 'https://www.windmill.dev/changelog/',
                 icon: Newspaper,
                 aiId: 'sidebar-menu-link-changelog',
-                aiDescription: 'Button to navigate to changelog'
+                aiDescription: 'Button to navigate to changelog',
+                external: true
             }
         ]
     }
@@ -143,7 +158,19 @@ let mainMenuLinks = $derived([
         disabled: $userStore?.operator,
         aiId: 'sidebar-menu-link-assets',
         aiDescription: 'Button to navigate to assets'
-    }
+    },
+    // Add Tutorials to main menu only if not all completed and not skipped
+    ...($tutorialsToDo.length > 0 && !$skippedAll
+        ? [
+            {
+                label: 'Tutorials',
+                href: `${base}/tutorials`,
+                icon: GraduationCap,
+                aiId: 'sidebar-menu-link-tutorials-main',
+                aiDescription: 'Button to navigate to tutorials'
+            }
+        ]
+        : [])
 ]);
 let defaultExtraTriggerLinks = $derived([
     {
@@ -318,7 +345,7 @@ let secondaryMenuLinks = $derived([
     {
         label: 'Workers',
         href: `${base}/workers`,
-        icon: Bot,
+        icon: HardHat,
         disabled: $userStore?.operator,
         aiId: 'sidebar-menu-link-workers',
         aiDescription: 'Button to navigate to workers'
@@ -555,7 +582,7 @@ let secondaryMenuLinks = $derived([
 							{/snippet}
 							{#snippet children({ item })}
 								{#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
-									<MenuItem href={subItem.href} class={itemClass} target="_blank" {item}>
+									<MenuItem href={subItem.href} class={itemClass} target={subItem.external !== false ? "_blank" : undefined} {item}>
 										<div class="flex flex-row items-center gap-2">
 											{#if subItem.icon}
 												<subItem.icon size={16} />

package/package/components/sidebar/UserMenu.svelte

@@ -31,7 +31,7 @@ const itemClass = twMerge('text-secondary text-left font-normal text-xs ', 'flex
 			<p class="text-sm font-medium text-primary truncate" role="none">
 				{$userStore?.email}
 			</p>
-			<span class="text-xs text-tertiary flex flex-row gap-2 items-center">
+			<span class="text-xs text-primary flex flex-row gap-2 items-center">
 				{#if $userStore?.is_admin}
 					Admin of this workspace <Crown size={14} />
 				{:else if $userStore?.operator}
@@ -66,11 +66,7 @@ const itemClass = twMerge('text-secondary text-left font-normal text-xs ', 'flex
 				Switch theme
 			</MenuItem>
 
-			<MenuItem
-				onClick={() => logout()}
-				class={twMerge(itemClass, 'text-primary font-semibold')}
-				{item}
-			>
+			<MenuItem onClick={() => logout()} class={itemClass} {item}>
 				<LogOut size={16} />
 				Sign out
 			</MenuItem>

package/package/components/sidebar/WorkspaceMenu.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { isPremiumStore, superadmin, userStore, userWorkspaces, workspaceStore, workspaceUsageStore, workspaceColor } from '../../stores';
+<script lang="ts">import { isPremiumStore, superadmin, userStore, userWorkspaces, workspaceStore, workspaceUsageStore, workspaceColor, clearWorkspaceFromStorage } from '../../stores';
 import { Building, Plus, Settings, GitFork } from 'lucide-svelte';
 import MenuButton from './MenuButton.svelte';
 import { Menu, MenuItem } from '../meltComponents';
@@ -75,11 +75,9 @@ const groupedWorkspaces = $derived(() => {
 		: null}
 	<Menu {createMenu} usePointerDownOutside>
 		{#snippet triggr({ trigger })}
-			<div
-				class="group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full text-xs"
-			>
-				<Building size={12} class="text-tertiary" />
-				<span class="text-xs text-tertiary"> {parentWorkspace?.name ?? ''} </span>
+			<div class="group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full text-xs">
+				<Building size={12} class="text-primary" />
+				<span class="text-xs text-primary"> {parentWorkspace?.name ?? ''} </span>
 			</div>
 		{/snippet}
 	</Menu>
@@ -140,7 +138,7 @@ const groupedWorkspaces = $derived(() => {
 								style:padding-left={`${4 + depth * 12}px`}
 							>
 								{#if isForked}
-									<GitFork size={12} class="text-tertiary flex-shrink-0" />
+									<GitFork size={12} class="text-primary flex-shrink-0" />
 								{:else}
 									<Building size={12} />
 								{/if}
@@ -156,13 +154,13 @@ const groupedWorkspaces = $derived(() => {
 									<div
 										class={twMerge(
 											'font-mono text-2xs whitespace-nowrap truncate text-left',
-											isForked ? 'text-tertiary opacity-75' : 'text-tertiary'
+											isForked ? 'text-primary opacity-75' : 'text-primary'
 										)}
 									>
 										{workspace.id}
 									</div>
 									{#if isForked && parentName}
-										<div class="text-tertiary text-2xs truncate text-left pl-2 min-h-[1rem]">
+										<div class="text-primary text-2xs truncate text-left pl-2 min-h-[1rem]">
 											Fork of {parentName}
 										</div>
 									{/if}
@@ -191,7 +189,7 @@ const groupedWorkspaces = $derived(() => {
 					</a>
 				</div>
 			{/if}
-			{#if !strictWorkspaceSelect}
+			{#if !strictWorkspaceSelect && !isCloudHosted()}
 				<div class="py-1" role="none">
 					<a
 						href="{base}/user/fork_workspace"
@@ -208,9 +206,7 @@ const groupedWorkspaces = $derived(() => {
 				<div class="py-1" role="none">
 					<MenuItem
 						href="{base}/user/workspaces"
-						onClick={() => {
-							localStorage.removeItem('workspace')
-						}}
+						onClick={() => clearWorkspaceFromStorage()}
 						class={twMerge(
 							'text-primary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary',
 							'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'

package/package/components/sidebar/changelogs.js

@@ -1,4 +1,9 @@
 const changelogs = [
+    {
+        label: 'AWS Bedrock support for Windmill AI',
+        href: 'https://www.windmill.dev/changelog/aws-bedrock',
+        date: '2025-11-19'
+    },
     {
         label: 'Dynamic select for flows',
         href: 'https://www.windmill.dev/changelog/dynamic-select-flows',

package/package/components/splitPanes/AnimatedPane.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">import {} from 'svelte';
+import { Pane } from 'svelte-splitpanes';
+import { cubicOut } from 'svelte/easing';
+let { duration = 300, easing = cubicOut, size = $bindable(), opened, children, ...props } = $props();
+let t = $state(opened ? 1 : 0);
+let computedSize = $derived((opened ? easing(t) : 1 - easing(1 - t)) * size);
+let lastTValue = 0;
+let loopIsRunning = false;
+function animationCallback(tValue) {
+    let delta = tValue - lastTValue;
+    if (opened)
+        t = Math.min(1, t + delta / duration);
+    else
+        t = Math.max(0, t - delta / duration);
+    if ((t === 0 && !opened) || (t === 1 && opened)) {
+        loopIsRunning = false;
+        return;
+    }
+    lastTValue = tValue;
+    requestAnimationFrame(animationCallback);
+}
+$effect(() => {
+    opened;
+    if (!loopIsRunning) {
+        loopIsRunning = true;
+        requestAnimationFrame((tValue) => {
+            lastTValue = tValue;
+            requestAnimationFrame(animationCallback);
+        });
+    }
+});
+</script>
+
+{#if computedSize > 1}
+	<Pane {...props} bind:size={() => computedSize, (v) => (size = v)}>
+		{@render children()}
+	</Pane>
+{/if}

package/package/components/splitPanes/AnimatedPane.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentProps } from 'svelte';
+import { Pane } from 'svelte-splitpanes';
+type $$ComponentProps = ComponentProps<typeof Pane> & {
+    duration?: number;
+    easing?: (t: number) => number;
+    opened: boolean;
+    children?: import('svelte').Snippet;
+    size: number;
+};
+declare const AnimatedPane: import("svelte").Component<$$ComponentProps, {}, "size">;
+type AnimatedPane = ReturnType<typeof AnimatedPane>;
+export default AnimatedPane;

package/package/components/sqlTypeService.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Service for communicating SQL query type information to the TypeScript worker
+ *
+ * This module handles the communication between the Monaco editor and the
+ * custom TypeScript worker that injects SQL type annotations.
+ */
+import type { InferAssetsSqlQueryDetails } from '../infer';
+export declare function waitForWorkerInitialization(fileUri: string): Promise<true>;
+/**
+ * Update SQL query type information in the TypeScript worker
+ *
+ * This function sends the parsed SQL query details to the custom TypeScript worker,
+ * which will then inject type parameters into the code that TypeScript analyzes.
+ *
+ * @param fileUri - Monaco URI or string path of the file being edited
+ * @param queries - Array of SQL query details from the WASM parser
+ * @returns Promise that resolves when the update is complete
+ */
+export declare function updateSqlQueriesInWorker(fileUri: string, queries: InferAssetsSqlQueryDetails[]): Promise<void>;