windmill-components 1.623.2 → 1.642.0

package/package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -18,7 +18,8 @@ import { refreshStateStore } from '../../../svelte5Utils.svelte';
 import FlowStickyNode from './FlowStickyNode.svelte';
 import { getStepHistoryLoaderContext } from '../../stepHistoryLoader.svelte';
 import { ModulesTestStates } from '../../modulesTest.svelte';
-import { flowModuleToAgentTool, createMcpTool, createWebsearchTool } from '../agentToolUtils';
+import { flowModuleToAgentTool, createMcpTool, createWebsearchTool, createAiAgentTool, SPECIAL_TOOL_KINDS, agentToolToFlowModule } from '../agentToolUtils';
+import { loadFlowModuleState } from '../flowStateUtils.svelte';
 import { getNoteEditorContext } from '../../graph/noteEditor.svelte';
 let { sidebarSize = $bindable(undefined), disableStaticInputs = false, disableTutorials = false, disableAi = false, disableSettings = false, newFlow = false, smallErrorHandler = false, workspace = $workspaceStore, onTestUpTo, onEditInput, localModuleStates = {}, testModuleStates = new ModulesTestStates(), aiChatOpen, showFlowAiButton, toggleAiChat, isOwner, onTestFlow, isRunning, onCancelTestFlow, onOpenPreview, onHideJobStatus, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = $bindable({ val: {} }), onDelete, flowHasChanged } = $props();
 const { customUi, selectionManager, moving, history, flowStateStore, flowStore, pathStore } = getContext('FlowEditorContext');
@@ -98,6 +99,13 @@ export async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsF
         modules.splice(index, 0, websearchTool);
         return modules;
     }
+    else if (toolKind === 'aiAgentTool') {
+        // Create AI Agent tool (nested agent)
+        const aiAgentTool = createAiAgentTool(module.id);
+        flowStateStore.val[module.id] = await loadFlowModuleState(agentToolToFlowModule(aiAgentTool));
+        modules.splice(index, 0, aiAgentTool);
+        return modules;
+    }
     else if (toolKind === 'flowmoduleTool') {
         // Create AgentTool from FlowModule
         const agentTool = flowModuleToAgentTool(module);
@@ -426,11 +434,9 @@ $effect(() => {
 								}
 							} else {
 								const index = (detail.agentId ? targetModules?.length : detail.index) ?? 0
-								const toolKind = detail.agentId
-									? detail.kind === 'mcpTool'
-										? 'mcpTool'
-										: detail.kind === 'websearchTool'
-											? 'websearchTool'
+								const toolKind: SpecialToolKind | 'flowmoduleTool' | undefined = detail.agentId
+									? (SPECIAL_TOOL_KINDS as readonly string[]).includes(detail.kind)
+										? (detail.kind as SpecialToolKind)
 										: 'flowmoduleTool'
 									: undefined
 

package/package/components/flows/map/FlowModuleSchemaMap.svelte.d.ts

@@ -3,7 +3,7 @@ import type { InlineScript, InsertKind } from '../../graph/graphBuilder.svelte';
 import type { GraphModuleState } from '../../graph';
 import { ModulesTestStates } from '../../modulesTest.svelte';
 import type { StateStore } from '../../../utils';
-import { type AgentTool } from '../agentToolUtils';
+import { type AgentTool, type SpecialToolKind } from '../agentToolUtils';
 interface Props {
     sidebarSize?: number | undefined;
     disableStaticInputs?: boolean;
@@ -63,7 +63,7 @@ declare const FlowModuleSchemaMap: $$__sveltets_2_IsomorphicComponent<Props, {
     }, wsFlow?: {
         path: string;
         summary: string;
-    }, inlineScript?: InlineScript, toolKind?: "mcpTool" | "flowmoduleTool" | "websearchTool") => Promise<FlowModule[] | AgentTool[]>;
+    }, inlineScript?: InlineScript, toolKind?: SpecialToolKind | "flowmoduleTool") => Promise<FlowModule[] | AgentTool[]>;
     removeAtId: (modules: FlowModule[], id: string) => FlowModule[];
     selectNextId: (id: any) => void;
     addBranch: (id: string) => Promise<void>;

package/package/components/flows/map/InsertModuleInner.svelte

@@ -80,6 +80,13 @@ let displayPath = $derived(width > 650 || height > 400);
 							dispatch('close')
 						}}
 					/>
+					<TopLevelNode
+						label="AI Agent"
+						onSelect={() => {
+							dispatch('pickAiAgentTool')
+							dispatch('close')
+						}}
+					/>
 				{:else}
 					{#if customUi?.triggers != false && allowTrigger}
 						<TopLevelNode

package/package/components/flows/map/InsertModuleInner.svelte.d.ts

@@ -27,6 +27,7 @@ declare const InsertModuleInner: $$__sveltets_2_IsomorphicComponent<Props, {
     close: CustomEvent<any>;
     pickMcpTool: CustomEvent<any>;
     pickWebsearchTool: CustomEvent<any>;
+    pickAiAgentTool: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "funcDesc">;

package/package/components/flows/missingInputWarnings.js

@@ -1,5 +1,6 @@
 import { parseOutputs } from '../../infer';
 import { dfs } from './dfs';
+const isAiTransform = (transform) => transform?.type === 'ai';
 function isInputFilled(inputTransforms, key, schema) {
     const required = schema?.required?.includes(key) ?? false;
     if (!required) {
@@ -7,6 +8,9 @@ function isInputFilled(inputTransforms, key, schema) {
     }
     if (inputTransforms.hasOwnProperty(key)) {
         const transform = inputTransforms[key];
+        if (isAiTransform(transform)) {
+            return true;
+        }
         if (transform?.type === 'static' &&
             (transform?.value === undefined || transform?.value === '' || transform?.value === null)) {
             return false;
@@ -19,6 +23,9 @@ function isInputFilled(inputTransforms, key, schema) {
     return true;
 }
 async function isConnectedToMissingModule(argName, input_transform, moduleIds) {
+    if (isAiTransform(input_transform)) {
+        return undefined;
+    }
     const val = input_transform.type === 'static' ? String(input_transform.value) : input_transform.expr;
     try {
         const outputs = await parseOutputs(val, true);

package/package/components/flows/pickers/PickHubScriptQuick.svelte

@@ -10,7 +10,7 @@ let listHubScriptsCached = createCache(async ({ filter, kind, appFilter }) => {
             : undefined;
     }
     catch (err) {
-        console.error('Error fetching top hub scripts');
+        sendUserToast('Failed to fetch hub scripts: ' + err, 'error');
         return undefined;
     }
 }, {
@@ -21,7 +21,7 @@ let listHubScriptsCached = createCache(async ({ filter, kind, appFilter }) => {
 
 <script lang="ts">import { createEventDispatcher, untrack } from 'svelte';
 import { Skeleton } from '../../common';
-import { classNames, createCache } from '../../../utils';
+import { classNames, createCache, sendUserToast } from '../../../utils';
 import { APP_TO_ICON_COMPONENT } from '../../icons';
 import { IntegrationService, ScriptService } from '../../../gen';
 import { Circle, ExternalLink } from 'lucide-svelte';
@@ -48,7 +48,7 @@ async function getAllApps(filterKind) {
         allApps = (await listHubIntegrationsCached({ kind: filterKind, refreshCount })).map((x) => x.name);
     }
     catch (err) {
-        console.error('Hub is not available');
+        sendUserToast('Failed to fetch hub integrations: ' + err, 'error');
         allApps = [];
         hubNotAvailable = true;
     }
@@ -80,7 +80,7 @@ async function handlePickScript(item) {
             await ScriptService.pickHubScriptByPath({ path: item.path });
         }
         catch (error) {
-            console.error('Failed to track hub script pick:', error);
+            sendUserToast('Failed to call ScriptService.pickHubScriptByPath: ' + error, 'error');
             // Don't block the flow if tracking fails
         }
     }

package/package/components/flows/propPicker/OutputPicker.svelte

@@ -14,7 +14,7 @@ const MIN_HEIGHT = 375;
 let outputOpen = $state(false);
 let inputOpen = $state(false);
 const zoom = $derived.by(useSvelteFlow().getZoom);
-let showConnecting = $derived(isConnectingCandidate && $flowPropPickerConfig?.insertionMode === 'connect');
+let showConnecting = $derived(isConnectingCandidate && $flowPropPickerConfig != undefined);
 function selectConnection(value) {
     if ($flowPropPickerConfig?.onSelect(value)) {
         $flowPropPickerConfig?.clearFocus();

package/package/components/flows/propPicker/PropPickerWrapper.svelte

@@ -19,10 +19,9 @@ let flow_env = $derived(pickableProperties?.flow_env || flowStore.val.value.flow
 setContext('PropPickerWrapper', {
     propPickerConfig,
     inputMatches,
-    focusProp: (propName, insertionMode, onSelect) => {
+    connectProp: (propName, onSelect) => {
         const config = {
             propName,
-            insertionMode,
             onSelect,
             clearFocus: () => {
                 propPickerConfig.set(undefined);
@@ -40,10 +39,11 @@ setContext('PropPickerWrapper', {
             });
         }
     },
-    clearFocus: () => {
+    clearConnect: () => {
         flowPropPickerConfig.set(undefined);
         propPickerConfig.set(undefined);
-    }
+    },
+    exprBeingEdited: writable([])
 });
 async function getPropPickerElements() {
     return Array.from(document.querySelectorAll('[data-prop-picker], [data-prop-picker] *'));
@@ -72,14 +72,11 @@ let rightPaneHeight = $state(0);
 		<Pane minSize={20} size={40} class="!transition-none z-1000 relative {paneClass}">
 			<div bind:clientHeight={rightPaneHeight} class="min-h-40 h-full !bg-surface-secondary">
 				<AnimatedButton
-					animate={$propPickerConfig?.insertionMode == 'connect'}
+					animate={$propPickerConfig != undefined}
 					baseRadius="4px"
 					wrapperClasses="prop-picker-inputs h-full w-full pt-1"
 					marginWidth="3px"
-					ringColor={$propPickerConfig?.insertionMode == 'insert' ||
-					$propPickerConfig?.insertionMode == 'append'
-						? '#3b82f6'
-						: 'transparent'}
+					ringColor="transparent"
 					animationDuration="4s"
 				>
 					{#if result != undefined && !pickableProperties}

package/package/components/flows/propPicker/PropPickerWrapper.svelte.d.ts

@@ -4,7 +4,6 @@ export type PropPickerConfig = {
     propName?: string;
     onSelect: SelectCallback;
     clearFocus: () => void;
-    insertionMode: 'append' | 'connect' | 'insert';
 };
 export type PropPickerWrapperContext = {
     propPickerConfig: Writable<PropPickerConfig | undefined>;
@@ -12,8 +11,9 @@ export type PropPickerWrapperContext = {
         word: string;
         value: string;
     }[] | undefined>;
-    focusProp: (propName: string, insertionMode: 'append' | 'connect' | 'insert', onSelect: SelectCallback) => void;
-    clearFocus: () => void;
+    connectProp: (propName: string, onSelect: SelectCallback) => void;
+    clearConnect: () => void;
+    exprBeingEdited: Writable<string[]>;
 };
 import { type Writable } from 'svelte/store';
 import type { PickableProperties } from '../previousResults';

package/package/components/flows/scheduleUtils.js

@@ -17,7 +17,7 @@ export async function loadSchedule(path, workspace) {
         path
     });
     return {
-        summary: schedule.summary,
+        summary: schedule.summary ?? undefined,
         enabled: schedule.enabled,
         cron: schedule.schedule,
         timezone: schedule.timezone,
@@ -48,7 +48,7 @@ export async function loadSchedules(forceRefresh, path, isFlow, schedules, prima
         else {
             remotePrimarySchedule = primary
                 ? {
-                    summary: primary.summary,
+                    summary: primary.summary ?? undefined,
                     args: primary.args ?? {},
                     cron: primary.schedule,
                     timezone: primary.timezone,

package/package/components/flows/types.d.ts

@@ -11,10 +11,9 @@ import type { StateStore } from '../../utils';
 import type { StepsInputArgs } from './stepsInputArgs.svelte';
 import type { Asset, AssetWithAccessType } from '../assets/lib';
 import type S3FilePicker from '../S3FilePicker.svelte';
-import type DbManagerDrawer from '../DBManagerDrawer.svelte';
 import type ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
 import type { ModulesTestStates } from '../modulesTest.svelte';
-import type { ButtonProp } from '../DiffEditor.svelte';
+import type { ButtonProp } from '../diffEditorTypes';
 import type { SelectionManager } from '../graph/selectionUtils.svelte';
 import type { InferAssetsSqlQueryDetails } from '../../infer';
 export type FlowInput = Record<string, {
@@ -78,7 +77,6 @@ export type FlowEditorContext = {
 export type FlowGraphAssetContext = StateStore<{
     selectedAsset: Asset | undefined;
     s3FilePicker: S3FilePicker | undefined;
-    dbManagerDrawer: DbManagerDrawer | undefined;
     resourceEditorDrawer: ResourceEditorDrawer | undefined;
     resourceMetadataCache: Record<string, {
         resource_type?: string;

package/package/components/flows/utils.svelte.js

@@ -27,7 +27,7 @@ export function evalValue(k, mod, pickableProperties, showError) {
     if (t.type == 'static') {
         v = t.value;
     }
-    else {
+    else if (t.type == 'javascript') {
         try {
             let context = {
                 flow_input: pickableProperties?.flow_input,
@@ -42,6 +42,9 @@ export function evalValue(k, mod, pickableProperties, showError) {
             v = undefined;
         }
     }
+    else {
+        v = undefined;
+    }
     if (v === NEVER_TESTED_THIS_FAR) {
         v = undefined;
     }
@@ -100,6 +103,7 @@ export function cleanFlow(flow) {
             if (memoryTransform?.type === 'static' && memoryTransform.value) {
                 const memoryValue = memoryTransform.value;
                 if (memoryValue.kind === 'auto' &&
+                    memoryValue.context_length &&
                     memoryValue.context_length > 0 &&
                     !memoryValue.memory_id) {
                     memoryTransform.value = {

package/package/components/git_sync/GitSyncRepositoryCard.svelte

@@ -301,7 +301,7 @@ function handlePullSettings() {
 	<div class="space-y-4">
 		<!-- Resource Picker -->
 		<div class="flex gap-2 items-center">
-			<div class="font-semibold">Resource:</div>
+			<div class="font-semibold text-xs text-emphasis">Resource:</div>
 			<div class="flex-1">
 				<ResourcePicker
 					bind:value={repo.git_repo_resource_path}
@@ -324,7 +324,7 @@ function handlePullSettings() {
 
 		<!-- Display resource info when disabled (saved connection) -->
 		{#if !repo.isUnsavedConnection && repo.git_repo_resource_path}
-			<div class="ml-2 text-xs">
+			<div class="text-xs">
 				{#if loadingResourceInfo}
 					<div class="flex items-center gap-1 text-secondary">
 						<RotateCw size={12} class="animate-spin" />
@@ -332,7 +332,7 @@ function handlePullSettings() {
 					</div>
 				{:else if resourceInfo?.url}
 					<div class="flex items-center gap-2 text-secondary">
-						<span class="font-medium">Git URL:</span>
+						<span class="text-xs text-secondary">Git URL:</span>
 						<code class="bg-surface-secondary px-2 py-1 rounded text-primary"
 							>{resourceInfo.url}</code
 						>
@@ -479,17 +479,18 @@ function handlePullSettings() {
 
 {#if shouldShowEmptyState}
 	<!-- Empty State for Primary Variants -->
-	<div class="rounded-lg border bg-surface p-4 mb-4">
+	<div class="rounded-md shadow-sm bg-surface-tertiary p-4 mb-4">
 		<div class="flex items-center justify-between mb-4">
 			<div class="flex flex-col">
 				<h3 class="text-xs font-semibold text-emphasis">{displayTitle}</h3>
 				{#if displayDescription}
-					<p class="text-2xs text-secondary">{displayDescription}
-					{#if mode === 'promotion'}
-						<a target="_blank" href="https://www.windmill.dev/docs/advanced/deploy_gh_gl"
-							>Learn more about Git Promotion</a
-						>
-					{/if}
+					<p class="text-2xs text-secondary"
+						>{displayDescription}
+						{#if mode === 'promotion'}
+							<a target="_blank" href="https://www.windmill.dev/docs/advanced/deploy_gh_gl"
+								>Learn more about Git Promotion</a
+							>
+						{/if}
 					</p>
 				{/if}
 			</div>
@@ -519,23 +520,24 @@ function handlePullSettings() {
 {:else if repo}
 	{#if variant === 'primary-sync' || variant === 'primary-promotion'}
 		<!-- Primary Repository Layout -->
-		<div class="rounded-lg border bg-surface p-4 mb-4">
-			<div class="flex items-center justify-between mb-4">
-				<div class="flex flex-col">
-					<h3 class="text-xl font-semibold">{displayTitle}</h3>
-					{#if displayDescription}
-						<p class="text-sm text-secondary">{displayDescription}</p>
-					{/if}
-				</div>
-				<div class="flex items-center gap-2">
-					{@render headerActions()}
+		<div class="rounded-md shadow-sm bg-surface-tertiary p-4 mb-4">
+			<div class="flex flex-col mb-4 gap-2">
+				<div class="flex items-center justify-between">
+					<h3 class="text-sm font-semibold">{displayTitle}</h3>
+
+					<div class="flex items-center gap-2">
+						{@render headerActions()}
+					</div>
 				</div>
+				{#if displayDescription}
+					<p class="text-xs text-secondary">{displayDescription}</p>
+				{/if}
 			</div>
 			{@render repositoryContent()}
 		</div>
 	{:else}
 		<!-- Standard Repository Card Layout -->
-		<div class="rounded-lg shadow-sm border p-0 w-full mb-4">
+		<div class="rounded-md shadow-sm bg-surface-tertiary p-0 w-full mb-4">
 			<div class="flex items-center justify-between min-h-10 px-4 py-1 border-b">
 				<div class="flex items-center gap-2">
 					<span class="text-lg font-semibold">{displayTitle}</span>

package/package/components/git_sync/GitSyncSection.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { ExternalLink, ChevronDown, ChevronRight, Plus } from 'lucide-svelte';
 import { Button, Alert } from '../common';
-import Description from '../Description.svelte';
+import SettingsPageHeader from '../settings/SettingsPageHeader.svelte';
 import { setGitSyncContext } from './GitSyncContext.svelte';
 import GitSyncRepositoryCard from './GitSyncRepositoryCard.svelte';
 import GitSyncModalManager from './GitSyncModalManager.svelte';
@@ -45,19 +45,28 @@ const hasUnsavedSecondaryPromotion = $derived(secondaryPromotion.some((s) => s.r
 		<div class="text-sm text-secondary">Loading git sync settings...</div>
 	</div>
 {:else}
-	<div class="flex flex-col gap-4 my-8">
-		<div class="flex flex-col gap-1">
-			<div class="text-emphasis text-sm font-semibold">Git Sync</div>
-			<Description link="https://www.windmill.dev/docs/advanced/git_sync">
-				Connect the Windmill workspace to a Git repository to automatically commit and push scripts,
-				flows, and apps to the repository on each deploy.
-			</Description>
-		</div>
-		<Alert type="info" title="Only new updates trigger git sync">
-			Only new changes matching the filters will trigger a git sync. You still need to initialize
-			the repo to the desired state first.
-		</Alert>
-	</div>
+	<SettingsPageHeader
+		title="Git Sync"
+		description="Connect the Windmill workspace to a Git repository to automatically commit and push scripts, flows, and apps to the repository on each deploy."
+		link="https://www.windmill.dev/docs/advanced/git_sync"
+	>
+		{#snippet actions()}
+			{#if $enterpriseLicense && gitSyncContext.repositories != undefined}
+				<Button
+					variant="accent"
+					target="_blank"
+					endIcon={{ icon: ExternalLink }}
+					href={`/runs?job_kinds=deploymentcallbacks&workspace=${$workspaceStore}`}
+				>
+					See sync jobs
+				</Button>
+			{/if}
+		{/snippet}
+	</SettingsPageHeader>
+	<Alert type="info" title="Only new updates trigger git sync">
+		Only new changes matching the filters will trigger a git sync. You still need to initialize the
+		repo to the desired state first.
+	</Alert>
 	{#if !$enterpriseLicense}
 		<div class="mb-2"></div>
 
@@ -67,20 +76,8 @@ const hasUnsavedSecondaryPromotion = $derived(secondaryPromotion.some((s) => s.r
 		<div class="mb-2"></div>
 	{/if}
 	{#if $enterpriseLicense && gitSyncContext.repositories != undefined}
-		<div class="flex mt-5 mb-5 gap-8">
-			<Button
-				variant="accent"
-				target="_blank"
-				endIcon={{ icon: ExternalLink }}
-				href={`/runs?job_kinds=deploymentcallbacks&workspace=${$workspaceStore}`}
-			>
-				See sync jobs
-			</Button>
-		</div>
-		<div class="pt-2"></div>
-
 		<!-- Primary Sync Repository -->
-		<div class="space-y-4">
+		<div class="space-y-6 pt-6">
 			<GitSyncRepositoryCard
 				variant="primary-sync"
 				mode="sync"

package/package/components/graph/FlowGraphV2.svelte

@@ -657,7 +657,7 @@ const modifierKey = isMac() ? 'Meta' : 'Control';
 				{height}
 				{width}
 				minZoom={0.2}
-				maxZoom={1.2}
+				maxZoom={1.6}
 				connectionLineType={ConnectionLineType.SmoothStep}
 				defaultEdgeOptions={{ type: 'smoothstep' }}
 				preventScrolling={scroll}

package/package/components/graph/graphBuilder.svelte.d.ts

@@ -4,7 +4,7 @@ import type { GraphModuleState } from './model';
 import { type AssetWithAltAccessType } from '../assets/lib';
 import type { ModulesTestStates, ModuleTestState } from '../modulesTest.svelte';
 import type { ModuleActionInfo } from '../flows/flowDiff';
-export type InsertKind = 'script' | 'forloop' | 'whileloop' | 'branchone' | 'branchall' | 'flow' | 'trigger' | 'approval' | 'end' | 'aiagent' | 'mcpTool' | 'websearchTool';
+export type InsertKind = 'script' | 'forloop' | 'whileloop' | 'branchone' | 'branchall' | 'flow' | 'trigger' | 'approval' | 'end' | 'aiagent' | 'mcpTool' | 'websearchTool' | 'aiAgentTool';
 export type InlineScript = {
     language: RawScript['language'];
     kind: Script['kind'];
@@ -253,12 +253,14 @@ export type AssetN = {
     type: 'asset';
     data: {
         asset: AssetWithAltAccessType;
+        displayedAccessType: 'r' | 'w';
     };
 };
 export type AssetsOverflowedN = {
     type: 'assetsOverflowed';
     data: {
         overflowedAssets: AssetWithAltAccessType[];
+        displayedAccessType: 'r' | 'w';
     };
 };
 export type AiToolN = {

package/package/components/graph/model.d.ts

@@ -35,7 +35,7 @@ export type FlowStatusViewerContext = {
     hideTimeline?: boolean;
     hideNodeDefinition?: boolean;
     hideJobId?: boolean;
-    hideDownloadLogs: any;
+    hideDownloadLogs?: boolean;
 };
 export type GraphModuleState = {
     type: FlowStatusModule['type'];

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

@@ -205,7 +205,7 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
 </script>
 
 <script lang="ts">import NodeWrapper from './NodeWrapper.svelte';
-import { Globe, MessageCircle, Play, Plug, Wrench, X } from 'lucide-svelte';
+import { Bot, Globe, MessageCircle, Play, Plug, Wrench, X } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import { getNodeColorClasses } from '../../util';
 import { deepEqual } from 'fast-equals';
@@ -242,6 +242,8 @@ let colorClasses = $derived(getNodeColorClasses(!validateToolName(data.tool, dat
 					<Globe size={16} class="ml-1 shrink-0" />
 				{:else if data.type === 'mcp'}
 					<Plug size={16} class="ml-1 shrink-0" />
+				{:else if data.type === 'aiagent'}
+					<Bot size={16} class="ml-1 shrink-0" />
 				{:else}
 					<Wrench size={16} class="ml-1 shrink-0" />
 				{/if}

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>