windmill-components 1.623.1 → 1.642.0

package/package/components/graph/renderers/nodes/AssetNode.svelte

@@ -37,7 +37,7 @@ export function computeAssetNodes(nodes) {
         // All asset nodes displayed on top
         const inputAssetNodes = displayedInputAssets.map((asset, i) => {
             let inputAssetXGap = 12;
-            let inputAssetWidth = 150;
+            let inputAssetWidth = 165;
             const targetRowW = MAX_ASSET_ROW_WIDTH -
                 (overflowedInputAssets.length ? ASSETS_OVERFLOWED_NODE_WIDTH + inputAssetXGap / 2 : 0);
             let totalInputRowWidth = () => inputAssetWidth * displayedInputAssets.length +
@@ -50,7 +50,7 @@ export function computeAssetNodes(nodes) {
             return {
                 type: 'asset',
                 parentId: node.id,
-                data: { asset },
+                data: { asset, displayedAccessType: 'r' },
                 id: `${node.id}-asset-in-${asset.kind}-${asset.path}`,
                 width: inputAssetWidth,
                 position: {
@@ -69,7 +69,7 @@ export function computeAssetNodes(nodes) {
         // All asset nodes displayed on the bottom
         const outputAssetNodes = displayedOutputAssets.map((asset, i) => {
             let outputAssetXGap = 12;
-            let outputAssetWidth = 150;
+            let outputAssetWidth = 165;
             const targetRowW = MAX_ASSET_ROW_WIDTH -
                 (overflowedOutputAssets.length ? ASSETS_OVERFLOWED_NODE_WIDTH + outputAssetXGap / 2 : 0);
             let totalOutputRowWidth = () => outputAssetWidth * displayedOutputAssets.length +
@@ -82,7 +82,7 @@ export function computeAssetNodes(nodes) {
             return {
                 type: 'asset',
                 parentId: node.id,
-                data: { asset },
+                data: { asset, displayedAccessType: 'w' },
                 id: `${node.id}-asset-out-${asset.kind}-${asset.path}`,
                 width: outputAssetWidth,
                 position: {
@@ -118,7 +118,7 @@ export function computeAssetNodes(nodes) {
         if (overflowedInputAssets.length)
             allAssetNodes.push({
                 type: 'assetsOverflowed',
-                data: { overflowedAssets: overflowedInputAssets },
+                data: { overflowedAssets: overflowedInputAssets, displayedAccessType: 'r' },
                 id: `${node.id}-assets-overflowed-in`,
                 parentId: node.id,
                 width: ASSETS_OVERFLOWED_NODE_WIDTH,
@@ -137,7 +137,7 @@ export function computeAssetNodes(nodes) {
         if (overflowedOutputAssets.length)
             allAssetNodes.push({
                 type: 'assetsOverflowed',
-                data: { overflowedAssets: overflowedOutputAssets },
+                data: { overflowedAssets: overflowedOutputAssets, displayedAccessType: 'w' },
                 id: `${node.id}-assets-overflowed-out`,
                 parentId: node.id,
                 width: ASSETS_OVERFLOWED_NODE_WIDTH,
@@ -190,29 +190,32 @@ import { Tooltip } from '../../../meltComponents';
 import { clone, pluralize } from '../../../../utils';
 import AssetGenericIcon from '../../../icons/AssetGenericIcon.svelte';
 import { getNodeColorClasses, NODE } from '../../util';
-import { userStore } from '../../../../stores';
+import { globalDbManagerDrawer, userStore } from '../../../../stores';
 import { deepEqual } from 'fast-equals';
 import { slide } from 'svelte/transition';
+import AssetColumnBadges from '../../../assets/AssetColumnBadges.svelte';
 const flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
 let { data } = $props();
 const isSelected = $derived(assetEq(flowGraphAssetsCtx?.val.selectedAsset, data.asset));
 const cachedResourceMetadata = $derived.by(() => {
     if (data.asset.kind !== 'resource')
         return undefined;
-    let truncatedPath = data.asset.path.split('/').slice(0, 3).join('/');
+    let truncatedPath = data.asset.path.split('?table=')[0];
     return flowGraphAssetsCtx?.val.resourceMetadataCache[truncatedPath];
 });
 const usageCount = $derived(flowGraphAssetsCtx?.val.computeAssetsCount?.(data.asset));
 const colors = $derived(getNodeColorClasses(undefined, isSelected));
+let assetColumns = $derived(data.asset.columns &&
+    Object.fromEntries(Object.entries(data.asset.columns).filter(([_, accessType]) => accessType && accessType === data.displayedAccessType)));
 </script>
 
 <NodeWrapper wrapperClass="bg-surface-secondary rounded-md">
 	{#snippet children({ darkMode })}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<Tooltip>
+		<Tooltip customBgClass="bg-surface-tertiary">
 			<div
 				class={twMerge(
-					'h-6 flex items-center gap-1.5 rounded-md drop-shadow-base overflow-clip transition-colors',
+					'h-6 flex items-center rounded-md drop-shadow-base overflow-clip transition-colors',
 					colors.outline,
 					colors.text,
 					colors.bg
@@ -224,11 +227,19 @@ const colors = $derived(getNodeColorClasses(undefined, isSelected));
 			>
 				<AssetGenericIcon
 					assetKind={data.asset.kind}
-					class="shrink-0 ml-1 {isSelected ? 'text-accent' : 'text-tertiary'}"
+					class="shrink-0 ml-1 mr-1.5 {isSelected ? 'text-accent' : 'text-tertiary'}"
 					size="16px"
 				/>
-				<span class="text-3xs truncate flex-1">
+				<span
+					class="text-3xs truncate flex-1 flex items-center gap-1 [mask-image:linear-gradient(to_right,black_85%,transparent)] mr-0.5"
+				>
 					{formatShortAssetPath(data.asset)}
+					<AssetColumnBadges
+						columns={assetColumns}
+						disableTooltip
+						disableWrap
+						badgeClasses="text-3xs transition-opacity opacity-50 {isSelected ? 'opacity-0' : ''}"
+					/>
 				</span>
 				{#if data.asset.kind === 'resource' && cachedResourceMetadata === undefined}
 					<Tooltip class={'pr-1 flex items-center justify-center'}>
@@ -243,7 +254,7 @@ const colors = $derived(getNodeColorClasses(undefined, isSelected));
 							noText
 							buttonVariant="accent"
 							s3FilePicker={flowGraphAssetsCtx?.val.s3FilePicker}
-							dbManagerDrawer={flowGraphAssetsCtx?.val.dbManagerDrawer}
+							dbManagerDrawer={globalDbManagerDrawer.val}
 							_resourceMetadata={cachedResourceMetadata}
 						/>
 					</div>
@@ -269,6 +280,7 @@ const colors = $derived(getNodeColorClasses(undefined, isSelected));
 				<span class="text-hint text-xs">
 					{formatAssetKind({ ...data.asset, metadata: cachedResourceMetadata })}</span
 				>
+				<AssetColumnBadges columns={assetColumns} disableTooltip />
 			</svelte:fragment>
 		</Tooltip>
 	{/snippet}

package/package/components/graph/renderers/nodes/AssetsOverflowedNode.svelte

@@ -49,7 +49,7 @@ const colors = $derived(getNodeColorClasses(undefined, includesSelected));
 				<ul>
 					{#each data.overflowedAssets as asset}
 						<li class="w-48">
-							<AssetNode data={{ asset }} />
+							<AssetNode data={{ asset, displayedAccessType: data.displayedAccessType }} />
 						</li>
 					{/each}
 				</ul>

package/package/components/graph/renderers/nodes/NewAIToolNode.svelte

@@ -93,6 +93,14 @@ let open = $state(false);
 				})
 				close()
 			}}
+			on:pickAiAgentTool={(e) => {
+				data.eventHandlers.insert({
+					index: -1,
+					agentId: data.agentModuleId,
+					kind: 'aiAgentTool'
+				})
+				close()
+			}}
 		/>
 	{/snippet}
 </Popover>

package/package/components/graph/renderers/triggers/TriggersBadge.svelte

@@ -11,28 +11,40 @@ import { twMerge } from 'tailwind-merge';
 import SchedulePollIcon from '../../../icons/SchedulePollIcon.svelte';
 import TriggerLabel from '../../../triggers/TriggerLabel.svelte';
 import CountBadge from '../../../common/badge/CountBadge.svelte';
+import NextcloudIcon from '../../../icons/NextcloudIcon.svelte';
+import GoogleIcon from '../../../icons/GoogleIcon.svelte';
 const { triggersState, triggersCount } = getContext('TriggerContext');
 let { selected, showOnlyWithCount, 
 // @ts-ignore - This is an output-only prop used with bind:
 numberOfTriggers = $bindable(0), small = true, vertical = false, limit, showDraft = true, onSelect } = $props();
 let menuOpen = $state(false);
-const triggerTypeConfig = {
-    webhook: { icon: Webhook, countKey: 'webhook_count' },
-    schedule: { icon: Calendar, countKey: 'schedule_count' },
-    http: { icon: Route, countKey: 'http_routes_count' },
-    websocket: { icon: Unplug, countKey: 'websocket_count' },
-    postgres: { icon: Database, countKey: 'postgres_count' },
-    kafka: { icon: KafkaIcon, countKey: 'kafka_count', disabled: !$enterpriseLicense },
-    default_email: { icon: Mail, countKey: 'default_email_count' },
-    email: { icon: Mail, countKey: 'email_count' },
-    nats: { icon: NatsIcon, countKey: 'nats_count', disabled: !$enterpriseLicense },
-    mqtt: { icon: MqttIcon, countKey: 'mqtt_count', disabled: !$enterpriseLicense },
-    sqs: { icon: AwsIcon, countKey: 'sqs_count', disabled: !$enterpriseLicense },
-    gcp: { icon: GoogleCloudIcon, countKey: 'gcp_count', disabled: !$enterpriseLicense },
-    poll: { icon: SchedulePollIcon },
-    cli: { icon: Terminal }
-};
-const allTypes = [
+let availableNativeServices = $state([]);
+let triggerTypeConfig = $derived(() => {
+    const baseConfig = {
+        webhook: { icon: Webhook, countKey: 'webhook_count' },
+        schedule: { icon: Calendar, countKey: 'schedule_count' },
+        http: { icon: Route, countKey: 'http_routes_count' },
+        websocket: { icon: Unplug, countKey: 'websocket_count' },
+        postgres: { icon: Database, countKey: 'postgres_count' },
+        kafka: { icon: KafkaIcon, countKey: 'kafka_count', disabled: !$enterpriseLicense },
+        default_email: { icon: Mail, countKey: 'default_email_count' },
+        email: { icon: Mail, countKey: 'email_count' },
+        nats: { icon: NatsIcon, countKey: 'nats_count', disabled: !$enterpriseLicense },
+        mqtt: { icon: MqttIcon, countKey: 'mqtt_count', disabled: !$enterpriseLicense },
+        sqs: { icon: AwsIcon, countKey: 'sqs_count', disabled: !$enterpriseLicense },
+        gcp: { icon: GoogleCloudIcon, countKey: 'gcp_count', disabled: !$enterpriseLicense },
+        poll: { icon: SchedulePollIcon },
+        cli: { icon: Terminal },
+        nextcloud: { icon: NextcloudIcon, countKey: 'nextcloud_count' },
+        google: { icon: GoogleIcon, countKey: 'google_count' }
+    };
+    // Add native trigger services that are available
+    for (const { service, icon } of availableNativeServices) {
+        baseConfig[service] = { icon };
+    }
+    return baseConfig;
+});
+let allTypes = $derived([
     'webhook',
     'schedule',
     'http',
@@ -46,8 +58,10 @@ const allTypes = [
     'gcp',
     'email',
     'poll',
-    'cli'
-];
+    'cli',
+    'nextcloud',
+    'google'
+]);
 function camelCaseToWords(s) {
     const result = s.replace(/([A-Z])/g, ' $1');
     return result.charAt(0).toUpperCase() + result.slice(1).toLowerCase();
@@ -77,10 +91,10 @@ let allTriggerTypes = $derived.by(() => {
     const types = !noTriggers ? Object.keys(triggersGrouped) : allTypes;
     //filter out types if showOnlyTriggersWithCount is true and there are no triggers for that type
     return types.filter((type) => (!showOnlyTriggersWithCount ||
-        ((triggerTypeConfig[type].countKey &&
-            ($triggersCount?.[triggerTypeConfig[type].countKey] ?? 0)) ||
+        ((triggerTypeConfig()[type]?.countKey &&
+            ($triggersCount?.[triggerTypeConfig()[type].countKey] ?? 0)) ||
             0) > 0) &&
-        !triggerTypeConfig[type].disabled);
+        !triggerTypeConfig()[type]?.disabled);
 });
 let triggersToDisplay = $derived(limit ? allTriggerTypes.slice(0, limit) : allTriggerTypes);
 let extraTriggers = $derived(limit && allTriggerTypes.length > limit
@@ -187,7 +201,10 @@ $effect(() => {
 </Menubar>
 
 {#snippet triggerButton({ type, isSelected, meltElement = undefined, singleItem = false })}
-	{@const { icon: SvelteComponent, countKey } = triggerTypeConfig[type]}
+	{@const { icon: SvelteComponent, countKey } = triggerTypeConfig()[type] || {
+		icon: Database,
+		countKey: undefined
+	}}
 
 	<MeltButton
 		aiId={`trigger-button-${type}`}
@@ -228,7 +245,10 @@ $effect(() => {
 {/snippet}
 
 {#snippet simpleTriggerItem({ item, type })}
-	{@const { icon: SvelteComponent, countKey } = triggerTypeConfig[type]}
+	{@const { icon: SvelteComponent, countKey } = triggerTypeConfig()[type] || {
+		icon: Database,
+		countKey: undefined
+	}}
 	<MenuItem {item} class={itemClass}>
 		<div class="flex flex-row items-center gap-2">
 			<SvelteComponent size={14} />

package/package/components/home/Item.svelte

@@ -9,21 +9,18 @@ import MoveDrawer from '../MoveDrawer.svelte';
 import ShareModal from '../ShareModal.svelte';
 import { createEventDispatcher } from 'svelte';
 import { ArrowBigUp } from 'lucide-svelte';
-export let item;
-export let depth = 0;
 const dispatch = createEventDispatcher();
-let deleteConfirmedCallback = undefined;
-let shareModal;
-let moveDrawer;
-let deploymentDrawer;
-let menuOpen = false;
-export let showCode;
+let deleteConfirmedCallback = $state(undefined);
+let shareModal = $state();
+let moveDrawer = $state();
+let deploymentDrawer = $state();
+let menuOpen = $state(false);
+let { item, depth = 0, showCode, showEditButton = true } = $props();
 </script>
 
 {#if item.type == 'script'}
 	<ScriptRow
 		bind:deleteConfirmedCallback
-		starred={item.starred ?? false}
 		marked={item.marked}
 		on:change={() => dispatch('scriptChanged')}
 		script={item}
@@ -37,11 +34,11 @@ export let showCode;
 		{depth}
 		bind:menuOpen
 		{showCode}
+		{showEditButton}
 	/>
 {:else if item.type == 'flow'}
 	<FlowRow
 		bind:deleteConfirmedCallback
-		starred={item.starred ?? false}
 		marked={item.marked}
 		on:change={() => dispatch('flowChanged')}
 		flow={item}
@@ -54,11 +51,11 @@ export let showCode;
 		{deploymentDrawer}
 		{depth}
 		bind:menuOpen
+		{showEditButton}
 	/>
 {:else if item.type == 'app'}
 	<AppRow
 		bind:deleteConfirmedCallback
-		starred={item.starred ?? false}
 		marked={item.marked}
 		on:change={() => dispatch('appChanged')}
 		app={item}
@@ -67,15 +64,12 @@ export let showCode;
 		{deploymentDrawer}
 		{depth}
 		bind:menuOpen
+		{showEditButton}
 	/>
 {:else if item.type == 'raw_app'}
 	<RawAppRow
-		bind:deleteConfirmedCallback
-		starred={item.starred ?? false}
 		marked={item.marked}
-		on:change={() => dispatch('rawAppChanged')}
 		app={item}
-		{moveDrawer}
 		{shareModal}
 		{deploymentDrawer}
 		{depth}

package/package/components/home/Item.svelte.d.ts

@@ -1,3 +1,9 @@
+interface Props {
+    item: any;
+    depth?: number;
+    showCode: (path: string, summary: string) => void;
+    showEditButton?: boolean;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,18 +17,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Item: $$__sveltets_2_IsomorphicComponent<{
-    item: any;
-    depth?: number;
-    showCode: (path: string, summary: string) => void;
-}, {
+declare const Item: $$__sveltets_2_IsomorphicComponent<Props, {
     scriptChanged: CustomEvent<any>;
     flowChanged: CustomEvent<any>;
     appChanged: CustomEvent<any>;
-    rawAppChanged: CustomEvent<any>;
     reload: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type Item = InstanceType<typeof Item>;
 export default Item;

package/package/components/home/ItemsList.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import CenteredPage from '../CenteredPage.svelte';
 import { Button, Skeleton } from '../common';
 import Toggle from '../Toggle.svelte';
-import { AppService, FlowService, ScriptService, RawAppService } from '../../gen';
+import { AppService, FlowService, ScriptService } from '../../gen';
 import { userStore, workspaceStore } from '../../stores';
-import { Code2, FoldVertical, LayoutDashboard, ListFilterPlus, SearchCode, UnfoldVertical } from 'lucide-svelte';
+import { ChevronsDownUp, ChevronsUpDown, Code2, LayoutDashboard, ListFilterPlus, SearchCode } from 'lucide-svelte';
 import { HOME_SEARCH_SHOW_FLOW, HOME_SEARCH_PLACEHOLDER } from '../../consts';
 import SearchItems from '../SearchItems.svelte';
 import ListFilters from './ListFilters.svelte';
@@ -23,7 +23,7 @@ import Popover from '../meltComponents/Popover.svelte';
 import { getContext, untrack } from 'svelte';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
 import TextInput from '../text_input/TextInput.svelte';
-let { filter = $bindable(''), subtab = $bindable('script') } = $props();
+let { filter = $bindable(''), subtab = $bindable('script'), showEditButtons = true } = $props();
 let scripts = $state();
 let flows = $state();
 let apps = $state();
@@ -76,14 +76,7 @@ async function loadApps() {
     loading = false;
 }
 async function loadRawApps() {
-    raw_apps = (await RawAppService.listRawApps({ workspace: $workspaceStore })).map((app) => {
-        return {
-            canWrite: canWrite(app.path, app.extra_perms, $userStore) &&
-                app.workspace_id == $workspaceStore &&
-                !$userStore?.operator,
-            ...app
-        };
-    });
+    raw_apps = [];
     loading = false;
 }
 function filterItemsPathsBaseOnUserFilters(item, filterUserFolders, filterUserFoldersType) {
@@ -257,7 +250,7 @@ $effect(() => {
 	</DrawerContent>
 </Drawer>
 
-<CenteredPage>
+<CenteredPage wrapperClasses="w-full" handleOverflow={false}>
 	<div
 		class="flex flex-wrap gap-2 items-center justify-between w-full"
 		use:triggerableByAI={{
@@ -305,7 +298,8 @@ $effect(() => {
 			<TextInput
 				inputProps={{
 					autofocus: true,
-					placeholder: HOME_SEARCH_PLACEHOLDER
+					placeholder: HOME_SEARCH_PLACEHOLDER,
+					id: 'home-search-input'
 				}}
 				size="md"
 				bind:value={filter}
@@ -397,11 +391,11 @@ $effect(() => {
 				<Toggle size="xs" bind:checked={treeView} options={{ right: 'Tree view' }} />
 				{#if treeView}
 					<Button
-						size="xs2"
-						variant="default"
+						unifiedSize="sm"
+						variant="subtle"
 						on:click={() => (collapseAll = !collapseAll)}
 						startIcon={{
-							icon: collapseAll ? UnfoldVertical : FoldVertical
+							icon: collapseAll ? ChevronsUpDown : ChevronsDownUp
 						}}
 					>
 						{#if collapseAll}
@@ -457,6 +451,7 @@ $effect(() => {
 							loadRawApps()
 						}}
 						{showCode}
+						showEditButton={showEditButtons}
 					/>
 				{/each}
 			</div>

package/package/components/home/ItemsList.svelte.d.ts

@@ -1,6 +1,7 @@
 interface Props {
     filter?: string;
     subtab?: 'flow' | 'script' | 'app';
+    showEditButtons?: boolean;
 }
 declare const ItemsList: import("svelte").Component<Props, {}, "filter" | "subtab">;
 type ItemsList = ReturnType<typeof ItemsList>;

package/package/components/home/TutorialBanner.svelte

@@ -5,11 +5,12 @@ import { goto } from '$app/navigation';
 import { sendUserToast } from '../../toast';
 import { getLocalSetting, storeLocalSetting } from '../../utils';
 import { skipAllTodos, syncTutorialsTodos, TUTORIAL_BANNER_DISMISSED_KEY } from '../../tutorialUtils';
-import { tutorialsToDo, userStore } from '../../stores';
+import { tutorialsToDo, userStore, skippedAll } from '../../stores';
 import { TUTORIALS_CONFIG } from '../../tutorials/config';
 import { hasRoleAccess } from '../../tutorials/roleUtils';
 import { onMount } from 'svelte';
-let isDismissed = $state(true);
+let isDismissed = $state(false);
+let hasCompletedAny = $state(false);
 /**
  * Get all tutorial indexes that are accessible to the current user based on their role.
  * Automatically recomputes when $userStore changes.
@@ -35,24 +36,30 @@ onMount(async () => {
     try {
         // Sync tutorial progress from backend first
         await syncTutorialsTodos();
-        // Check if banner has been manually dismissed
+        // Check if banner has been manually dismissed via X button (soft dismiss, per-device)
         const manuallyDismissed = getLocalSetting(TUTORIAL_BANNER_DISMISSED_KEY) === 'true';
+        if (manuallyDismissed) {
+            isDismissed = true;
+            return;
+        }
+        // Check if user deliberately skipped all tutorials (permanent dismiss, from backend)
+        if ($skippedAll) {
+            isDismissed = true;
+            return;
+        }
         // Safe to check tutorialsToDo here since we awaited syncTutorialsTodos() above
-        // Filter tutorialsToDo to only include tutorials accessible to the user
+        // Filter tutorialsToDo to only include tutorials accessible to the user's role
         const remainingAccessibleTutorials = $tutorialsToDo.filter((index) => accessibleTutorialIndexes.has(index));
-        // Check if all accessible tutorials are completed
-        const allTutorialsCompleted = remainingAccessibleTutorials.length === 0;
-        // Dismiss banner if manually dismissed OR all accessible tutorials completed
-        if (manuallyDismissed || allTutorialsCompleted) {
+        // Calculate if user has completed at least one tutorial (for banner wording)
+        // This determines whether to show "New tutorial available!" or "Learn with interactive tutorials"
+        hasCompletedAny = remainingAccessibleTutorials.length < accessibleTutorialIndexes.size;
+        // Hide banner if all accessible tutorials are completed (but can reappear with new tutorials)
+        if (remainingAccessibleTutorials.length === 0) {
             isDismissed = true;
-            // Set localStorage when all tutorials are completed to persist dismissal
-            // Note: This will re-set the key on every page load if localStorage is cleared
-            // but tutorials remain completed in backend. This is intentional - the banner
-            // should stay hidden if tutorials are completed, regardless of localStorage state.
-            if (allTutorialsCompleted) {
-                storeLocalSetting(TUTORIAL_BANNER_DISMISSED_KEY, 'true');
-            }
+            return;
         }
+        // Show banner - user has accessible tutorials to complete
+        isDismissed = false;
     }
     catch (error) {
         console.error('Failed to sync tutorial progress:', error);
@@ -61,9 +68,10 @@ onMount(async () => {
     }
 });
 async function handleSkipAllTutorials() {
+    // Skip all tutorials and set skipped_all flag in backend (permanent)
     await skipAllTodos();
     await syncTutorialsTodos();
-    storeLocalSetting(TUTORIAL_BANNER_DISMISSED_KEY, 'true');
+    // No need to set localStorage - backend skipped_all flag is the source of truth
     isDismissed = true;
 }
 function dismissBanner() {
@@ -91,10 +99,18 @@ function goToTutorials() {
 			<GraduationCap size={20} class="text-accent-primary flex-shrink-0" />
 			<div class="flex-1 min-w-0">
 				<div class="text-emphasis flex-wrap text-left text-xs font-semibold">
-					Learn with interactive tutorials
+					{#if hasCompletedAny}
+						New tutorial available!
+					{:else}
+						Learn with interactive tutorials
+					{/if}
 				</div>
 				<div class="text-hint text-3xs truncate text-left font-normal">
-					Get started quickly with step-by-step guides on building flows, scripts, and more.
+					{#if hasCompletedAny}
+						Continue your learning journey and master new Windmill skills.
+					{:else}
+						Get started quickly with step-by-step guides on building flows, scripts, and more.
+					{/if}
 				</div>
 			</div>
 		</div>

package/package/components/home/treeViewUtils.js

@@ -46,7 +46,7 @@ export function groupItems(items) {
         if ('folderName' in a && 'username' in b) {
             return 1;
         }
-        return (a['username'] ?? a['folderName']).localeCompare(b['username'] ?? b['folderName']);
+        return (a['username'] ?? a['folderName'] ?? '').localeCompare(b['username'] ?? b['folderName']);
     });
     sortGroup(root);
     return root;

package/package/components/icons/CssIcon.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">"use strict";
+let { height = '24px', width = '24px', size = undefined } = $props();
+const derivedWidth = $derived(size ? size : width);
+const derivedHeight = $derived(size ? size : height);
+</script>
+
+<svg
+	width={derivedWidth}
+	height={derivedHeight}
+	viewBox="0 0 32 32"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path d="M6 28L4 3H28L26 28L16 31L6 28Z" fill="#1172B8" />
+	<path d="M26 5H16V29.5L24 27L26 5Z" fill="#33AADD" />
+	<path
+		d="M19.5 17.5H9.5L9 14L17 11.5H9L8.5 8.5H24L23.5 12L17 14.5H23L22 24L16 26L10 24L9.5 19H12.5L13 21.5L16 22.5L19 21.5L19.5 17.5Z"
+		fill="white"
+	/>
+</svg>

package/package/components/icons/CssIcon.svelte.d.ts

@@ -1,26 +1,8 @@
-export default CssIcon;
-type CssIcon = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const CssIcon: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    height?: string;
+    width?: string;
+    size?: number;
 }
+declare const CssIcon: import("svelte").Component<Props, {}, "">;
+type CssIcon = ReturnType<typeof CssIcon>;
+export default CssIcon;

package/package/components/icons/GoogleCalendarIcon.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">"use strict";
+let { height = '24px', width = '24px' } = $props();
+</script>
+
+<svg {width} {height} viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(3.75 3.75)">
+		<path
+			fill="#FFFFFF"
+			d="M148.882,43.618l-47.368-5.263l-57.895,5.263L38.355,96.25l5.263,52.632l52.632,6.579l52.632-6.579 l5.263-53.947L148.882,43.618z"
+		/>
+		<path
+			fill="#1A73E8"
+			d="M65.211,125.276c-3.934-2.658-6.658-6.539-8.145-11.671l9.132-3.763c0.829,3.158,2.276,5.605,4.342,7.342 c2.053,1.737,4.553,2.592,7.474,2.592c2.987,0,5.553-0.908,7.697-2.724s3.224-4.132,3.224-6.934c0-2.868-1.132-5.211-3.395-7.026 s-5.105-2.724-8.5-2.724h-5.276v-9.039H76.5c2.921,0,5.382-0.789,7.382-2.368c2-1.579,3-3.737,3-6.487 c0-2.447-0.895-4.395-2.684-5.855s-4.053-2.197-6.803-2.197c-2.684,0-4.816,0.711-6.395,2.145s-2.724,3.197-3.447,5.276 l-9.039-3.763c1.197-3.395,3.395-6.395,6.618-8.987c3.224-2.592,7.342-3.895,12.342-3.895c3.697,0,7.026,0.711,9.974,2.145 c2.947,1.434,5.263,3.421,6.934,5.947c1.671,2.539,2.5,5.382,2.5,8.539c0,3.224-0.776,5.947-2.329,8.184 c-1.553,2.237-3.461,3.947-5.724,5.145v0.539c2.987,1.25,5.421,3.158,7.342,5.724c1.908,2.566,2.868,5.632,2.868,9.211 s-0.908,6.776-2.724,9.579c-1.816,2.803-4.329,5.013-7.513,6.618c-3.197,1.605-6.789,2.421-10.776,2.421 C73.408,129.263,69.145,127.934,65.211,125.276z"
+		/>
+		<path
+			fill="#1A73E8"
+			d="M121.25,79.961l-9.974,7.25l-5.013-7.605l17.987-12.974h6.895v61.197h-9.895L121.25,79.961z"
+		/>
+		<path
+			fill="#EA4335"
+			d="M148.882,196.25l47.368-47.368l-23.684-10.526l-23.684,10.526l-10.526,23.684L148.882,196.25z"
+		/>
+		<path
+			fill="#34A853"
+			d="M33.092,172.566l10.526,23.684h105.263v-47.368H43.618L33.092,172.566z"
+		/>
+		<path
+			fill="#4285F4"
+			d="M12.039-3.75C3.316-3.75-3.75,3.316-3.75,12.039v136.842l23.684,10.526l23.684-10.526V43.618h105.263 l10.526-23.684L148.882-3.75H12.039z"
+		/>
+		<path fill="#188038" d="M-3.75,148.882v31.579c0,8.724,7.066,15.789,15.789,15.789h31.579v-47.368H-3.75z" />
+		<path
+			fill="#FBBC04"
+			d="M148.882,43.618v105.263h47.368V43.618l-23.684-10.526L148.882,43.618z"
+		/>
+		<path
+			fill="#1967D2"
+			d="M196.25,43.618V12.039c0-8.724-7.066-15.789-15.789-15.789h-31.579v47.368H196.25z"
+		/>
+	</g>
+</svg>

package/package/components/icons/GoogleCalendarIcon.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    height?: string;
+    width?: string;
+}
+declare const GoogleCalendarIcon: import("svelte").Component<Props, {}, "">;
+type GoogleCalendarIcon = ReturnType<typeof GoogleCalendarIcon>;
+export default GoogleCalendarIcon;