windmill-components 1.623.2 → 1.655.0

package/package/components/graph/moveManager.svelte.js

@@ -0,0 +1,176 @@
+import { NODE } from './util';
+/**
+ * Compute the set of node IDs belonging to a subflow (or a single step).
+ * Includes the module itself, all nested children (id starts with `moduleId-`),
+ * and structural edge endpoints whose `disableMoveIds` reference this module.
+ */
+export function getSubflowNodeIds(moduleId, allNodes, allEdges) {
+    const nodeIdPrefix = moduleId + '-';
+    const nodeIds = new Set();
+    for (const n of allNodes) {
+        if (n.id === moduleId || n.id.startsWith(nodeIdPrefix)) {
+            nodeIds.add(n.id);
+        }
+    }
+    for (const e of allEdges) {
+        const disableIds = e.data?.disableMoveIds ?? [];
+        if (disableIds.includes(moduleId)) {
+            nodeIds.add(e.source);
+            nodeIds.add(e.target);
+        }
+    }
+    // Include child nodes (e.g. asset/AI tool nodes) of nodes added via edges.
+    // Nodes found through disableMoveIds (like inner module "b") may have children
+    // ("b-asset-in-...") that weren't caught by the initial prefix match on moduleId.
+    const edgeMatchedIds = [...nodeIds];
+    for (const n of allNodes) {
+        if (!nodeIds.has(n.id)) {
+            for (const id of edgeMatchedIds) {
+                if (n.id.startsWith(id + '-')) {
+                    nodeIds.add(n.id);
+                    break;
+                }
+            }
+        }
+    }
+    return nodeIds;
+}
+export class MoveManager {
+    dragging = $state(undefined);
+    ghostScreenX = $state(0);
+    ghostScreenY = $state(0);
+    nearestDropZone = $state(undefined);
+    draggedNodeIds = $state(new Set());
+    /** The module ID currently being moved via legacy click-to-move */
+    movingModuleId = $state(undefined);
+    /** Multiple module IDs being moved together (multi-select move) */
+    movingIds = $state(undefined);
+    toggleMoving(id) {
+        if (this.movingModuleId === id) {
+            this.movingModuleId = undefined;
+            this.#updateDraggedNodeIds(undefined);
+        }
+        else {
+            this.movingModuleId = id;
+            this.#updateDraggedNodeIds([id]);
+        }
+    }
+    toggleMovingMultiple(ids) {
+        if (this.movingIds &&
+            this.movingIds.length === ids.length &&
+            this.movingIds.every((id, i) => id === ids[i])) {
+            this.movingModuleId = undefined;
+            this.movingIds = undefined;
+            this.#updateDraggedNodeIds(undefined);
+        }
+        else {
+            this.movingModuleId = ids[0];
+            this.movingIds = ids;
+            this.#updateDraggedNodeIds(ids);
+        }
+    }
+    setMoving(id) {
+        this.movingModuleId = id;
+        this.#updateDraggedNodeIds([id]);
+    }
+    clearMoving() {
+        this.movingModuleId = undefined;
+        this.movingIds = undefined;
+        this.#updateDraggedNodeIds(undefined);
+    }
+    #computeDraggedNodeIds;
+    setComputeDraggedNodeIds(fn) {
+        this.#computeDraggedNodeIds = fn;
+    }
+    #updateDraggedNodeIds(moduleIds) {
+        this.draggedNodeIds =
+            moduleIds && moduleIds.length > 0 && this.#computeDraggedNodeIds
+                ? this.#computeDraggedNodeIds(moduleIds)
+                : new Set();
+    }
+    #screenToFlowPosition;
+    #registeredDropZones = new Map();
+    setScreenToFlowPosition(fn) {
+        this.#screenToFlowPosition = fn;
+    }
+    registerDropZone(edgeId, zone) {
+        this.#registeredDropZones.set(edgeId, zone);
+    }
+    unregisterDropZone(edgeId) {
+        this.#registeredDropZones.delete(edgeId);
+    }
+    startDrag(moduleId, screenX, screenY, selectedIds) {
+        // Clear any active click-to-move so only drag mode is active
+        this.movingModuleId = undefined;
+        this.dragging = { moduleId, selectedIds };
+        this.ghostScreenX = screenX;
+        this.ghostScreenY = screenY;
+        this.nearestDropZone = undefined;
+        // Compute dragged node IDs for the primary module plus any additional selected modules
+        const allIds = selectedIds && selectedIds.length > 0
+            ? [moduleId, ...selectedIds.filter((id) => id !== moduleId)]
+            : [moduleId];
+        this.#updateDraggedNodeIds(allIds);
+    }
+    updateDrag(screenX, screenY) {
+        if (!this.dragging)
+            return;
+        this.ghostScreenX = screenX;
+        this.ghostScreenY = screenY;
+        if (!this.#screenToFlowPosition)
+            return;
+        const flowPos = this.#screenToFlowPosition({ x: screenX, y: screenY });
+        this.nearestDropZone = this.#findNearestDropZone(flowPos);
+    }
+    endDrag() {
+        if (!this.dragging)
+            return undefined;
+        const zone = this.nearestDropZone;
+        this.dragging = undefined;
+        this.nearestDropZone = undefined;
+        this.#updateDraggedNodeIds(undefined);
+        return zone;
+    }
+    cancelDrag() {
+        this.dragging = undefined;
+        this.nearestDropZone = undefined;
+        this.#updateDraggedNodeIds(undefined);
+    }
+    #findNearestDropZone(flowPos) {
+        if (!this.dragging)
+            return undefined;
+        const draggedId = this.dragging.moduleId;
+        let best = undefined;
+        let bestDist = Infinity;
+        // Box half-dimensions matching the visual drop zone
+        const halfW = NODE.width / 2;
+        const halfH = NODE.gap.vertical / 2;
+        for (const [edgeId, zone] of this.#registeredDropZones) {
+            if (zone.disableMoveIds.includes(draggedId))
+                continue;
+            // Skip edges adjacent to the dragged node (no-op move)
+            if (zone.sourceId === draggedId || zone.targetId === draggedId)
+                continue;
+            const dx = Math.abs(flowPos.x - zone.centerX);
+            const dy = Math.abs(flowPos.y - zone.centerY);
+            // Axis-aligned bounding box test
+            if (dx <= halfW && dy <= halfH) {
+                // Manhattan-like distance for ranking overlapping boxes
+                const dist = dx + dy;
+                if (dist < bestDist) {
+                    bestDist = dist;
+                    best = {
+                        edgeId,
+                        sourceId: zone.sourceId,
+                        targetId: zone.targetId,
+                        branch: zone.branch,
+                        index: zone.index,
+                        flowPosition: { x: zone.centerX, y: zone.centerY },
+                        disableMoveIds: zone.disableMoveIds
+                    };
+                }
+            }
+        }
+        return best;
+    }
+}

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

@@ -78,7 +78,6 @@ export declare class NoteEditor {
     cleanupGroupNotes(flowNodes: {
         id: string;
         parentIds?: string[];
-        offset?: number;
     }[]): void;
 }
 /**

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

@@ -24,6 +24,10 @@ export declare class NoteManager {
      * Deselect a note by ID (single selection only)
      */
     deselectNote(noteId?: string): void;
+    /**
+     * Get the currently selected note ID
+     */
+    get selectedNoteId(): string | undefined;
     /**
      * Check if a note is currently selected
      */

package/package/components/graph/noteManager.svelte.js

@@ -110,6 +110,12 @@ export class NoteManager {
             this.#selectedNoteId = undefined;
         }
     }
+    /**
+     * Get the currently selected note ID
+     */
+    get selectedNoteId() {
+        return this.#selectedNoteId;
+    }
     /**
      * Check if a note is currently selected
      */

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

@@ -14,7 +14,6 @@ export type NodeDep = {
         assets?: AssetWithAltAccessType[];
     };
     parentIds?: string[];
-    offset?: number;
     type?: string;
 };
 export type NoteComputeResult = {

package/package/components/graph/noteUtils.svelte.js

@@ -138,7 +138,6 @@ function calculateGroupNoteLayout(note, nodes, textHeight = 60, topMostNodeId) {
     const bounds = calculateNodesBoundsWithOffset(note.contained_node_ids || [], nodes.map((n) => ({
         id: n.id,
         position: n.position,
-        data: { offset: n.offset ?? 0 },
         type: n.type ?? ''
     })));
     const padding = 16;
@@ -233,7 +232,6 @@ export function computeNoteNodes(nodes, notes, noteTextHeights, onTextHeightChan
         return {
             ...n,
             data: origNode?.data,
-            offset: origNode?.offset,
             type: origNode?.type
         };
     });

package/package/components/graph/renderers/edges/BaseEdge.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import InsertModulePopover from '../../../flows/map/InsertModulePopover.svelte';
 import { getBezierPath, BaseEdge, EdgeLabel } from '@xyflow/svelte';
-import { ClipboardCopy, Hourglass } from 'lucide-svelte';
+import { CircleDot, Hourglass } from 'lucide-svelte';
 import { getStraightLinePath } from '../utils';
 import { twMerge } from 'tailwind-merge';
 import { NODE_WITH_WRITE_ASSET_Y_OFFSET } from '../nodes/AssetNode.svelte';
@@ -8,10 +8,8 @@ import { workspaceStore } from '../../../../stores';
 import FlowStatusWaitingForEvents from '../../../FlowStatusWaitingForEvents.svelte';
 import InsertModuleButton from '../../../flows/map/InsertModuleButton.svelte';
 import { getGraphContext } from '../../graphContext';
-const { useDataflow, showAssets } = getGraphContext();
-let { 
-// id,
-sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, markerEnd, 
+const { useDataflow, showAssets, moveManager } = getGraphContext();
+let { id, sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, markerEnd, 
 // style,
 data } = $props();
 let [edgePath] = $derived(getBezierPath({
@@ -31,16 +29,39 @@ let completeEdge = $derived(targetY - sourceY > 100
 let waitingForEvents = $derived(data?.flowModuleStates?.[data.targetId]?.type === 'WaitingForEvents' ||
     data?.flowModuleStates?.[`${data.sourceId}-v`]?.type === 'WaitingForEvents');
 let suspendStatus = $derived(data?.suspendStatus);
+let centerY = $derived(sourceY +
+    32 +
+    (data.shouldOffsetInsertBtnDueToAssetNode && $showAssets ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0));
+let isDragging = $derived(!!moveManager?.dragging);
+let draggedId = $derived(moveManager?.dragging?.moduleId);
+let isValidDropTarget = $derived(isDragging &&
+    data?.insertable &&
+    draggedId !== undefined &&
+    !data.disableMoveIds?.includes(draggedId) &&
+    data.sourceId !== draggedId &&
+    data.targetId !== draggedId);
+let isNearestDrop = $derived(isValidDropTarget && moveManager?.nearestDropZone?.edgeId === id);
+let isAdjacentToDragged = $derived(isDragging && (data?.sourceId === draggedId || data?.targetId === draggedId));
+// Register this edge's drop zone position with the drag manager so proximity
+// detection uses the actual xyflow-computed position rather than re-deriving it.
+$effect(() => {
+    if (!data?.insertable || !moveManager)
+        return;
+    const centerX = sourceX;
+    moveManager.registerDropZone(id, {
+        sourceId: data.sourceId,
+        targetId: data.targetId,
+        branch: data.branch,
+        index: data.index,
+        disableMoveIds: data.disableMoveIds ?? [],
+        centerX,
+        centerY
+    });
+    return () => moveManager.unregisterDropZone(id);
+});
 </script>
 
-<EdgeLabel
-	x={sourceX}
-	y={sourceY +
-		32 +
-		(data.shouldOffsetInsertBtnDueToAssetNode && $showAssets ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0)}
-	class="base-edge"
-	style=""
->
+<EdgeLabel x={sourceX} y={centerY} class="base-edge" style="">
 	{#if waitingForEvents && data.flowJob && data.flowJob.type === 'QueuedJob'}
 		<div
 			class="px-2 py-0.5 rounded-md bg-surface shadow-md text-violet-700 dark:text-violet-400 text-xs flex items-center gap-1"
@@ -75,7 +96,17 @@ let suspendStatus = $derived(data?.suspendStatus);
 				</div>
 			{/if}
 		</div>
-	{:else if data?.insertable && !$useDataflow && !data?.moving}
+	{:else if isDragging && isValidDropTarget}
+		<div class="edgeButtonContainer nodrag nopan" style:transform="translate(-50%, -50%)">
+			<div class="relative flex items-center justify-center" style="width: 275px; height: 20px;">
+				{#if isNearestDrop}
+					<div class="absolute inset-0 rounded-md bg-accent/5 transition-opacity duration-150"
+					></div>
+				{/if}
+				{@render dropTargetIndicator(isNearestDrop)}
+			</div>
+		</div>
+	{:else if data?.insertable && !$useDataflow && !moveManager?.movingModuleId && !isDragging}
 		<div
 			class={twMerge('edgeButtonContainer nodrag nopan top-0')}
 			style:transform="translate(-50%, -50%)"
@@ -125,9 +156,9 @@ let suspendStatus = $derived(data?.suspendStatus);
 		</div>
 	{/if}
 
-	{#if data?.moving}
+	{#if moveManager?.movingModuleId && data?.insertable}
 		<div class="edgeButtonContainer nodrag nopan" style:transform="translate(-50%, -50%)">
-			{#if data.moving && !data.disableMoveIds?.includes(data.moving)}
+			{#if !(moveManager.movingIds ?? [moveManager.movingModuleId]).some((id) => data.disableMoveIds?.includes(id))}
 				<button
 					title="Paste module"
 					onclick={() => {
@@ -139,24 +170,34 @@ let suspendStatus = $derived(data?.suspendStatus);
 						})
 					}}
 					type="button"
-					class={twMerge(
-						'w-6 h-6 flex items-center justify-center',
-						'border border-gray-300 dark:border-gray-500',
-						'text-primary text-sm',
-						'bg-surface focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected rounded-full '
-					)}
+					class="group relative flex items-center justify-center"
+					style="width: 275px; height: 20px;"
 				>
-					<ClipboardCopy size={14} />
+					<div
+						class="absolute inset-0 rounded-md bg-accent/5 opacity-0 group-hover:opacity-100 transition-opacity duration-150"
+					></div>
+					{@render dropTargetIndicator(false)}
 				</button>
 			{/if}
 		</div>
 	{/if}
 </EdgeLabel>
 
+{#snippet dropTargetIndicator(highlighted: boolean)}
+	<div
+		class={twMerge(
+			'w-[20px] h-[20px] flex items-center justify-center rounded-md bg-surface-secondary transition-all duration-150 group-hover:text-accent',
+			highlighted ? 'text-accent' : 'text-primary'
+		)}
+	>
+		<CircleDot size={12} />
+	</div>
+{/snippet}
+
 <BaseEdge
 	path={completeEdge}
 	{markerEnd}
-	class={$useDataflow ? 'hidden' : ''}
+	class={$useDataflow ? 'hidden' : isAdjacentToDragged ? 'opacity-30' : ''}
 	interactionWidth={0}
 	style={undefined}
 	label={undefined}

package/package/components/graph/renderers/edges/BaseEdge.svelte.d.ts

@@ -11,7 +11,6 @@ type $$ComponentProps = EdgeProps & {
             branch: number;
         } | undefined;
         targetId: string;
-        moving: string | undefined;
         eventHandlers: GraphEventHandlers;
         index: number;
         enableTrigger: boolean;

package/package/components/graph/renderers/edges/HiddenBaseEdge.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { BaseEdge } from '@xyflow/svelte';
-export let markerEnd = undefined;
+let { markerEnd = undefined } = $props();
 </script>
 
 <BaseEdge path={''} {markerEnd} class="hidden" />

package/package/components/graph/renderers/edges/HiddenBaseEdge.svelte.d.ts

@@ -1,20 +1,6 @@
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const HiddenBaseEdge: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     markerEnd?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type HiddenBaseEdge = InstanceType<typeof HiddenBaseEdge>;
+}
+declare const HiddenBaseEdge: import("svelte").Component<Props, {}, "">;
+type HiddenBaseEdge = ReturnType<typeof HiddenBaseEdge>;
 export default HiddenBaseEdge;

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

@@ -134,7 +134,7 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
                             ? inputToolWidth + inputToolXGap
                             : isLastRow && tools.length % 2 === 1
                                 ? (ROW_WIDTH - inputToolWidth) / 2
-                                : 0) + node.data.offset,
+                                : 0),
                     y: baseOffset +
                         rowOffset *
                             (agentActions
@@ -162,7 +162,7 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
                 parentId: node.id,
                 width: NEW_TOOL_NODE_WIDTH,
                 position: {
-                    x: (ROW_WIDTH - NEW_TOOL_NODE_WIDTH) / 2 + node.data.offset,
+                    x: (ROW_WIDTH - NEW_TOOL_NODE_WIDTH) / 2,
                     y: baseOffset + rowOffset
                 },
                 selectable: false
@@ -205,19 +205,19 @@ 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';
 import { getGraphContext } from '../../graphContext';
 let hover = $state(false);
-let { data } = $props();
+let { data, id } = $props();
 const { selectionManager } = getGraphContext();
 const flowModuleState = $derived(data.flowModuleStates?.[data.moduleId]);
 let colorClasses = $derived(getNodeColorClasses(!validateToolName(data.tool, data.type) ? 'Failure' : flowModuleState?.type, selectionManager?.getSelectedId() === data.moduleId));
 </script>
 
-<NodeWrapper>
+<NodeWrapper nodeId={id}>
 	{#snippet children({ darkMode })}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
@@ -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/AIToolNode.svelte.d.ts

@@ -20,6 +20,7 @@ import type { Edge, Node } from '@xyflow/svelte';
 import type { GraphModuleState } from '../../model';
 interface Props {
     data: AiToolN['data'];
+    id?: string;
 }
 declare const AIToolNode: import("svelte").Component<Props, {}, "">;
 type AIToolNode = ReturnType<typeof AIToolNode>;

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,
@@ -193,26 +193,29 @@ import { getNodeColorClasses, NODE } from '../../util';
 import { 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();
+let { data, id } = $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">
+<NodeWrapper wrapperClass="bg-surface-secondary rounded-md" nodeId={id}>
 	{#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,16 +227,26 @@ 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'}>
 						<AlertTriangle size={16} class="text-orange-500" />
-						<svelte:fragment slot="text">Could not find resource</svelte:fragment>
+						{#snippet text()}
+												Could not find resource
+											{/snippet}
 					</Tooltip>
 				{:else if isSelected && assetCanBeExplored(data.asset, cachedResourceMetadata) && !$userStore?.operator}
 					<div transition:slide={{ axis: 'x', duration: 100 }}>
@@ -243,33 +256,35 @@ const colors = $derived(getNodeColorClasses(undefined, isSelected));
 							noText
 							buttonVariant="accent"
 							s3FilePicker={flowGraphAssetsCtx?.val.s3FilePicker}
-							dbManagerDrawer={flowGraphAssetsCtx?.val.dbManagerDrawer}
 							_resourceMetadata={cachedResourceMetadata}
 						/>
 					</div>
 				{/if}
 			</div>
-			<svelte:fragment slot="text">
-				{#if usageCount !== undefined}
-					Used in {pluralize(usageCount, 'step')}<br />
-				{/if}
-				<a
-					href={undefined}
-					class={twMerge(
-						'text-xs',
-						data.asset.kind === 'resource' ? 'text-accent cursor-pointer' : 'text-hint'
-					)}
-					onclick={() => {
-						if (data.asset.kind === 'resource')
-							flowGraphAssetsCtx?.val.resourceEditorDrawer?.initEdit(data.asset.path)
-					}}
-				>
-					{data.asset.path}
-				</a><br />
-				<span class="text-hint text-xs">
-					{formatAssetKind({ ...data.asset, metadata: cachedResourceMetadata })}</span
-				>
-			</svelte:fragment>
+			{#snippet text()}
+					
+					{#if usageCount !== undefined}
+						Used in {pluralize(usageCount, 'step')}<br />
+					{/if}
+					<a
+						href={undefined}
+						class={twMerge(
+							'text-xs',
+							data.asset.kind === 'resource' ? 'text-accent cursor-pointer' : 'text-hint'
+						)}
+						onclick={() => {
+							if (data.asset.kind === 'resource')
+								flowGraphAssetsCtx?.val.resourceEditorDrawer?.initEdit(data.asset.path)
+						}}
+					>
+						{data.asset.path}
+					</a><br />
+					<span class="text-hint text-xs">
+						{formatAssetKind({ ...data.asset, metadata: cachedResourceMetadata })}</span
+					>
+					<AssetColumnBadges columns={assetColumns} disableTooltip />
+				
+					{/snippet}
 		</Tooltip>
 	{/snippet}
 </NodeWrapper>

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

@@ -27,6 +27,7 @@ import { type AssetWithAltAccessType } from '../../../assets/lib';
 import type { Edge, Node } from '@xyflow/svelte';
 interface Props {
     data: AssetN['data'];
+    id?: string;
 }
 declare const AssetNode: import("svelte").Component<Props, {}, "">;
 type AssetNode = ReturnType<typeof AssetNode>;