windmill-components 1.448.50 → 1.472.2

package/package/components/ResourcePicker.svelte

@@ -4,11 +4,11 @@ import { createEventDispatcher, onMount } from 'svelte';
 import Select from './apps/svelte-select/lib/index';
 import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults';
 import AppConnect from './AppConnectDrawer.svelte';
+import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
 import { Button } from './common';
 import DBSchemaExplorer from './DBSchemaExplorer.svelte';
 import DarkModeObserver from './DarkModeObserver.svelte';
 import { Pen, Plus, RotateCw } from 'lucide-svelte';
-import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
 import { sendUserToast } from '../toast';
 const dispatch = createEventDispatcher();
 export let initialValue = undefined;
@@ -100,7 +100,6 @@ let darkMode = false;
 	bind:this={appConnect}
 	{expressOAuthSetup}
 />
-
 <ResourceEditorDrawer
 	bind:this={resourceEditor}
 	on:refresh={async (e) => {
@@ -175,7 +174,7 @@ let darkMode = false;
 					{disabled}
 					color="light"
 					variant="border"
-					size="xs"
+					size="sm"
 					on:click={() => appConnect?.open?.(resourceType)}
 					startIcon={{ icon: Plus }}
 					iconOnly={collection?.length > 0}
@@ -183,6 +182,7 @@ let darkMode = false;
 						Add a {resourceType} resource
 					{/if}</Button
 				>
+				<div class="mx-0.5" />
 			{/if}
 		{/if}
 

package/package/components/ResourceTypePicker.svelte

@@ -2,7 +2,8 @@
 import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
 import IconedResourceType from './IconedResourceType.svelte';
-import { Button, ClearableInput, Popup } from './common';
+import { Button, ClearableInput } from './common';
+import Popover from './meltComponents/Popover.svelte';
 import { offset, flip, shift } from 'svelte-floating-ui/dom';
 import Label from './Label.svelte';
 import Tooltip from './Tooltip.svelte';
@@ -41,20 +42,18 @@ $: filteredResources = resources.filter((r) => r.toLowerCase().includes(search.t
 			>
 				Clear
 			</Button>
-			<Popup
+			<Popover
 				floatingConfig={{
 					strategy: 'fixed',
 					placement: 'left-end',
 					middleware: [offset(8), flip(), shift()]
 				}}
-				containerClasses="border rounded-lg shadow-lg bg-surface p-4 w-[500px] h-[500px] "
-				let:close
+				contentClasses="flex flex-col gap-2 h-full p-4 max-h-[40vh] w-[500px]"
 			>
-				<svelte:fragment slot="button">
+				<svelte:fragment slot="trigger">
 					<Button nonCaptureEvent size="xs" color="dark">Select resource type</Button>
 				</svelte:fragment>
-
-				<div class="flex flex-col gap-2 h-full">
+				<svelte:fragment slot="content" let:close>
 					<ClearableInput bind:value={search} placeholder="Search resource..." />
 
 					<div class="overflow-y-scroll h-full">
@@ -71,7 +70,7 @@ $: filteredResources = resources.filter((r) => r.toLowerCase().includes(search.t
 									disabled={notPickable}
 									on:click={() => {
 										onClick(undefined)
-										close(null)
+										close()
 									}}
 								>
 									None
@@ -87,7 +86,7 @@ $: filteredResources = resources.filter((r) => r.toLowerCase().includes(search.t
 									disabled={notPickable}
 									on:click={() => {
 										onClick(r)
-										close(null)
+										close()
 									}}
 								>
 									<IconedResourceType name={r} after={true} width="20px" height="20px" />
@@ -99,8 +98,8 @@ $: filteredResources = resources.filter((r) => r.toLowerCase().includes(search.t
 							{/if}
 						</div>
 					</div>
-				</div>
-			</Popup>
+				</svelte:fragment>
+			</Popover>
 		</div>
 	</svelte:fragment>
 	<div class="flex flex-row items-center w-full justify-between">

package/package/components/ResultJobLoader.svelte.d.ts

@@ -81,7 +81,7 @@ export default class ResultJobLoader extends SvelteComponent<ResultJobLoaderProp
         cancel: () => void;
         error: (err: Error) => void;
     } | undefined) => Promise<string>;
-    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "oracledb" | "graphql" | "nativets" | "bun" | "php" | "rust" | "ansible" | "csharp", args: Record<string, any>, tag: string | undefined, callbacks?: {
+    get runPreview(): (path: string | undefined, code: string, lang: import("../gen").ScriptLang, args: Record<string, any>, tag: string | undefined, callbacks?: {
         done: (x: any) => void;
         cancel: () => void;
         error: (err: Error) => void;

package/package/components/RunForm.svelte

@@ -3,12 +3,12 @@ import { Badge, Button } from './common';
 import SchemaForm from './SchemaForm.svelte';
 import SharedBadge from './SharedBadge.svelte';
 import TimeAgo from './TimeAgo.svelte';
-import Popup from './common/popup/Popup.svelte';
-import { autoPlacement } from '@floating-ui/core';
+import Popover from './meltComponents/Popover.svelte';
 import { Calendar, CornerDownLeft } from 'lucide-svelte';
 import RunFormAdvancedPopup from './RunFormAdvancedPopup.svelte';
 import { page } from '$app/stores';
 import { replaceState } from '$app/navigation';
+import JsonInputs from './JsonInputs.svelte';
 export let runnable;
 export let runAction;
 export let buttonText = 'Run';
@@ -23,8 +23,10 @@ export let scheduledForStr;
 export let invisible_to_owner;
 export let overrideTag;
 export let args = {};
+export let jsonView = false;
 let reloadArgs = 0;
-let blockPopupOpen = false;
+let jsonEditor = undefined;
+let schemaHeight = 0;
 export async function setArgs(nargs) {
     args = nargs;
     reloadArgs++;
@@ -53,6 +55,9 @@ function onArgsChange(args) {
         console.error('Impossible to set hash in args', e);
     }
 }
+export function setCode(code) {
+    jsonEditor?.setCode(code);
+}
 </script>
 
 <div class="max-w-3xl">
@@ -101,7 +106,7 @@ function onArgsChange(args) {
 	{#if topButton}
 		<Button
 			btnClasses="!px-6 !py-1 w-full"
-			disabled={!isValid}
+			disabled={!isValid || jsonView}
 			on:click={() => runAction(undefined, args, invisible_to_owner, overrideTag)}
 		>
 			{buttonText}
@@ -111,22 +116,37 @@ function onArgsChange(args) {
 		<div class="my-2" />
 		{#if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
 			<div class="text-sm py-4 italic">No arguments</div>
+		{:else if jsonView}
+			<div class="py-2" style="height: {schemaHeight}px" data-schema-picker>
+				<JsonInputs
+					bind:this={jsonEditor}
+					on:select={(e) => {
+						if (e.detail) {
+							args = e.detail
+						}
+					}}
+					updateOnBlur={false}
+					placeholder={`Write args as JSON.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}`}
+				/>
+			</div>
 		{:else}
 			{#key reloadArgs}
-				<SchemaForm
-					helperScript={runnable.hash
-						? {
-								type: 'hash',
-								hash: runnable.hash
-						  }
-						: undefined}
-					prettifyHeader
-					{noVariablePicker}
-					{autofocus}
-					schema={runnable.schema}
-					bind:isValid
-					bind:args
-				/>
+				<div bind:clientHeight={schemaHeight}>
+					<SchemaForm
+						helperScript={runnable.hash
+							? {
+									type: 'hash',
+									hash: runnable.hash
+							  }
+							: undefined}
+						prettifyHeader
+						{noVariablePicker}
+						{autofocus}
+						schema={runnable.schema}
+						bind:isValid
+						bind:args
+					/>
+				</div>
 			{/key}
 		{/if}
 	{:else}
@@ -140,44 +160,28 @@ function onArgsChange(args) {
 					{loading}
 					color="dark"
 					btnClasses="!px-6 !py-1 !h-8 inline-flex gap-2"
-					disabled={!isValid}
+					disabled={!isValid || jsonView}
 					on:click={() => runAction(scheduledForStr, args, invisible_to_owner, overrideTag)}
 					shortCut={{ Icon: CornerDownLeft, hide: !viewKeybinding }}
 				>
 					{scheduledForStr ? 'Schedule to run later' : buttonText}
 				</Button>
 				<div>
-					<Popup
-						floatingConfig={{
-							middleware: [
-								autoPlacement({
-									allowedPlacements: [
-										'bottom-start',
-										'bottom-end',
-										'top-start',
-										'top-end',
-										'top',
-										'bottom'
-									]
-								})
-							]
-						}}
-						let:close
-						blockOpen={blockPopupOpen}
-					>
-						<svelte:fragment slot="button">
+					<Popover placement="bottom" closeButton usePointerDownOutside>
+						<svelte:fragment slot="trigger">
 							<Button nonCaptureEvent startIcon={{ icon: Calendar }} size="xs" color="light">
 								Advanced
 							</Button>
 						</svelte:fragment>
-						<RunFormAdvancedPopup
-							bind:scheduledForStr
-							bind:invisible_to_owner
-							bind:overrideTag
-							bind:runnable
-							on:close={() => close(null)}
-						/>
-					</Popup>
+						<svelte:fragment slot="content">
+							<RunFormAdvancedPopup
+								bind:scheduledForStr
+								bind:invisible_to_owner
+								bind:overrideTag
+								bind:runnable
+							/>
+						</svelte:fragment>
+					</Popover>
 				</div>
 			</div>
 			{#if overrideTag}
@@ -194,7 +198,7 @@ function onArgsChange(args) {
 	{:else if !topButton}
 		<Button
 			btnClasses="!px-6 !py-1 w-full"
-			disabled={!isValid}
+			disabled={!isValid || jsonView}
 			on:click={() => runAction(undefined, args, invisible_to_owner, overrideTag)}
 			shortCut={{ Icon: CornerDownLeft, hide: !viewKeybinding }}
 		>

package/package/components/RunForm.svelte.d.ts

@@ -28,9 +28,11 @@ declare const __propDef: {
         invisible_to_owner: boolean | undefined;
         overrideTag: string | undefined;
         args?: Record<string, any> | undefined;
+        jsonView?: boolean | undefined;
         setArgs?: ((nargs: Record<string, any>) => Promise<void>) | undefined;
         run?: (() => void) | undefined;
         isValid?: boolean | undefined;
+        setCode?: ((code: string) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -43,5 +45,6 @@ export type RunFormSlots = typeof __propDef.slots;
 export default class RunForm extends SvelteComponent<RunFormProps, RunFormEvents, RunFormSlots> {
     get setArgs(): (nargs: Record<string, any>) => Promise<void>;
     get run(): () => void;
+    get setCode(): (code: string) => void;
 }
 export {};

package/package/components/RunFormAdvancedPopup.svelte

@@ -1,6 +1,5 @@
 <script>import { SCRIPT_VIEW_SHOW_SCHEDULE_RUN_LATER } from '../consts';
 import Label from './Label.svelte';
-import CloseButton from './common/CloseButton.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 import { userStore, workerTags, workspaceStore } from '../stores';
@@ -19,15 +18,11 @@ async function loadWorkerGroups() {
 }
 </script>
 
-<div class="flex flex-col gap-4 p-2">
+<div class="flex flex-col gap-4 p-4">
 	<div class="flex flex-col gap-2">
 		{#if SCRIPT_VIEW_SHOW_SCHEDULE_RUN_LATER}
 			<div class="">
-				<Label label="Schedule to run later">
-					<svelte:fragment slot="action">
-						<CloseButton on:close noBg />
-					</svelte:fragment>
-				</Label>
+				<Label label="Schedule to run later" />
 
 				<div class="flex flex-row items-center my-1">
 					<div>

package/package/components/RunFormAdvancedPopup.svelte.d.ts

@@ -18,8 +18,6 @@ declare const __propDef: {
         overrideTag: string | undefined;
     };
     events: {
-        close: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/RunPageSchedules.svelte

@@ -23,7 +23,8 @@ let scheduleEditor;
 let schedules = writable(undefined);
 let initialPrimarySchedule = writable(undefined);
 async function updateSchedules(forceRefresh) {
-    loadSchedules(forceRefresh, path, isFlow, schedules, primarySchedule, initialPrimarySchedule, $workspaceStore ?? '', triggersCount);
+    const loadPrimarySchedule = true;
+    loadSchedules(forceRefresh, path, isFlow, schedules, primarySchedule, initialPrimarySchedule, $workspaceStore ?? '', triggersCount, loadPrimarySchedule);
 }
 $: updateSchedules(false) || path;
 async function save() {
@@ -119,7 +120,7 @@ async function save() {
 			</div>
 		</div>
 		<CronInput bind:schedule={$primarySchedule.cron} bind:timezone={$primarySchedule.timezone} />
-		<SchemaForm {schema} bind:args={$primarySchedule.args} />
+		<SchemaForm onlyMaskPassword {schema} bind:args={$primarySchedule.args} />
 		{#if emptyString($primarySchedule.cron)}
 			<p class="text-xs text-tertiary mt-10">Define a schedule frequency first</p>
 		{/if}

package/package/components/S3FilePicker.svelte

@@ -25,6 +25,7 @@ export let readOnlyMode;
 export let initialFileKey = undefined;
 let initialFileKeyInternalCopy;
 export let selectedFileKey = undefined;
+export let folderOnly = false;
 let csvSeparatorChar = ',';
 let csvHasHeader = true;
 let dispatch = createEventDispatcher();
@@ -298,6 +299,11 @@ function selectItem(index, toggleCollapsed = true) {
     let item_key = displayedFileKeys[index];
     let item = allFilesByKey[item_key];
     if (item.type === 'folder') {
+        if (folderOnly) {
+            selectedFileKey = {
+                s3: item_key
+            };
+        }
         if (toggleCollapsed) {
             item.collapsed = !item.collapsed;
         }
@@ -641,7 +647,9 @@ function selectItem(index, toggleCollapsed = true) {
 				>
 				{#if !fromWorkspaceSettings}
 					<Button
-						disable={selectedFileKey === undefined || emptyString(selectedFileKey.s3)}
+						disabled={selectedFileKey === undefined ||
+							emptyString(selectedFileKey.s3) ||
+							(folderOnly && allFilesByKey[selectedFileKey.s3]?.type !== 'folder')}
 						on:click={selectAndClose}>Select</Button
 					>
 				{/if}

package/package/components/S3FilePicker.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         selectedFileKey?: {
             s3: string;
         } | undefined;
+        folderOnly?: boolean | undefined;
         open?: ((preSelectedFileKey?: {
             s3: string;
             storage?: string | undefined;

package/package/components/S3ObjectPicker.svelte

@@ -1,8 +1,5 @@
-<script>import { Pipette } from 'lucide-svelte';
+<script>import { Loader2, Pipette } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
-// @ts-ignore
-import SimpleEditor from './SimpleEditor.svelte';
-import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
 import { Button } from './common';
 import Toggle from './Toggle.svelte';
 import S3FilePicker from './S3FilePicker.svelte';
@@ -45,14 +42,18 @@ export function focus() {
 		options={{ left: 'Raw S3 object input' }}
 	/>
 	{#if s3FileUploadRawMode}
-		<JsonEditor
-			bind:editor
-			on:focus={(e) => {
-				dispatch('focus')
-			}}
-			code={JSON.stringify(value ?? { s3: '' }, null, 2)}
-			bind:value
-		/>
+		{#await import('./JsonEditor.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default
+				bind:editor
+				on:focus={(e) => {
+					dispatch('focus')
+				}}
+				code={JSON.stringify(value ?? { s3: '' }, null, 2)}
+				bind:value
+			/>
+		{/await}
 		<Button
 			variant="border"
 			color="light"

package/package/components/S3ObjectPicker.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import SimpleEditor from './SimpleEditor.svelte';
+import type SimpleEditor from './SimpleEditor.svelte';
 declare const __propDef: {
     props: {
         value: any;

package/package/components/SavedInputsPicker.svelte

@@ -3,24 +3,26 @@ import { InputService } from '../gen/index.js';
 import { userStore, workspaceStore } from '../stores.js';
 import { sendUserToast } from '../utils.js';
 import { createEventDispatcher, onDestroy } from 'svelte';
-import { Edit, Trash2, Save } from 'lucide-svelte';
+import { Edit, Trash2, Save, Eye } from 'lucide-svelte';
 import Toggle from './Toggle.svelte';
 import { Cell } from './table/index';
-import { clickOutside } from '../utils';
 import SaveInputsButton from './SaveInputsButton.svelte';
 import Popover from './Popover.svelte';
 import InfiniteList from './InfiniteList.svelte';
 import { twMerge } from 'tailwind-merge';
-export let flowPath = null;
+import PopoverV2 from './meltComponents/Popover.svelte';
+import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
 export let previewArgs = undefined;
+export let runnableId = undefined;
+export let runnableType = undefined;
+export let isValid = false;
+export let noButton = false;
+export let jsonView = false;
 let infiniteList = null;
 let draft = true;
 let selectedInput = null;
 let isEditing = null;
 const dispatch = createEventDispatcher();
-$: runnableId = flowPath || undefined;
-let runnableType = undefined;
-$: runnableType = flowPath ? 'FlowPath' : undefined;
 async function updateInput(input) {
     if (!input)
         return;
@@ -43,13 +45,28 @@ async function updateInput(input) {
 }
 function initLoadInputs() {
     const loadInputsPageFn = async (page, perPage) => {
-        return await InputService.listInputs({
+        const inputs = await InputService.listInputs({
             workspace: $workspaceStore,
             runnableId,
             runnableType,
             page,
             perPage
         });
+        const inputsWithPayload = await Promise.all(inputs.map(async (input) => {
+            const payloadData = await loadLargeArgs(input.id, undefined, false);
+            if (payloadData === 'WINDMILL_TOO_BIG') {
+                return {
+                    ...input,
+                    payloadData: 'WINDMILL_TOO_BIG',
+                    getFullPayload: () => loadLargeArgs(input.id, undefined, true)
+                };
+            }
+            return {
+                ...input,
+                payloadData
+            };
+        }));
+        return inputsWithPayload;
     };
     infiniteList?.setLoader(loadInputsPageFn);
     const deleteInputFn = async (id) => {
@@ -75,25 +92,23 @@ async function handleSelect(input) {
     if (input.isEditing)
         return;
     if (selectedInput === input.id) {
-        selectedInput = null;
-        selectedArgs = undefined;
-        dispatch('select', undefined);
+        resetSelected(true);
     }
     else {
         selectedInput = input.id;
-        selectedArgs = await loadLargeArgs(input.id, true, false);
-        dispatch('select', selectedArgs);
+        if (input.payloadData === 'WINDMILL_TOO_BIG') {
+            const fullPayload = await input.getFullPayload?.();
+            dispatch('select', fullPayload);
+        }
+        else {
+            selectedArgs = structuredClone(input.payloadData ?? {});
+            dispatch('select', selectedArgs);
+        }
     }
 }
 onDestroy(() => {
-    selectedInput = null;
-    selectedArgs = undefined;
-    dispatch('select', undefined);
+    resetSelected(true);
 });
-async function getPropPickerElements() {
-    const elements = document.querySelectorAll('[data-schema-picker], [data-schema-picker] *');
-    return elements ? Array.from(elements) : [];
-}
 function handleKeydown(event) {
     if (event.key === 'Escape' && isEditing) {
         setEditing(null);
@@ -101,9 +116,7 @@ function handleKeydown(event) {
         event.preventDefault();
     }
     else if (event.key === 'Escape' && selectedInput) {
-        selectedInput = null;
-        selectedArgs = undefined;
-        dispatch('select', undefined);
+        resetSelected(true);
         event.stopPropagation();
         event.preventDefault();
     }
@@ -127,42 +140,49 @@ function handleError(error) {
         sendUserToast(`Failed to load saved inputs: ${error.error}`, true);
     }
 }
-$: $workspaceStore && flowPath && (infiniteList && initLoadInputs(), (draft = false));
+export function refresh() {
+    infiniteList?.loadData('refresh');
+}
+export function resetSelected(dispatchEvent) {
+    selectedInput = null;
+    selectedArgs = undefined;
+    if (dispatchEvent) {
+        dispatch('select', undefined);
+    }
+}
+$: $workspaceStore &&
+    runnableId &&
+    runnableType &&
+    (infiniteList && initLoadInputs(), (draft = false));
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
 
-<div
-	class="w-full flex flex-col gap-1 h-full overflow-y-auto p"
-	use:clickOutside={{ capture: false, exclude: getPropPickerElements }}
-	on:click_outside={() => {
-		selectedInput = null
-		selectedArgs = undefined
-		dispatch('select', undefined)
-	}}
->
-	<div>
-		<Popover class="w-full" placement="bottom" disablePopup={flowPath && previewArgs}>
-			<svelte:fragment slot="text">
-				{#if !flowPath}
-					Save draft first before you can save inputs
-				{:else if !previewArgs}
-					Add inputs before saving
-				{/if}
-			</svelte:fragment>
-			<SaveInputsButton
-				{runnableId}
-				{runnableType}
-				args={previewArgs ?? {}}
-				disabled={!previewArgs || !flowPath}
-				on:update={() => {
-					infiniteList?.loadData('refresh')
-				}}
-				showTooltip={true}
-			/>
-		</Popover>
-	</div>
-	<div class="grow min-h-0">
+<div class="w-full flex flex-col gap-1 h-full overflow-y-auto">
+	{#if !noButton}
+		<div>
+			<Popover class="w-full" placement="bottom" disablePopup={runnableId && previewArgs}>
+				<svelte:fragment slot="text">
+					{#if !runnableId}
+						Save draft first before you can save inputs
+					{:else if !previewArgs}
+						Add inputs before saving
+					{/if}
+				</svelte:fragment>
+				<SaveInputsButton
+					{runnableId}
+					{runnableType}
+					args={previewArgs ?? {}}
+					disabled={!previewArgs || !runnableId || !isValid || jsonView}
+					on:update={() => {
+						refresh()
+					}}
+					showTooltip={true}
+				/>
+			</Popover>
+		</div>
+	{/if}
+	<div class="grow min-h-0" data-schema-picker>
 		{#if !draft}
 			<InfiniteList
 				bind:this={infiniteList}
@@ -184,9 +204,9 @@ $: $workspaceStore && flowPath && (infiniteList && initLoadInputs(), (draft = fa
 					</Cell>
 					<Cell>
 						<div
-							class="w-full flex items-center text-sm justify-between gap-4 px-4 text-left transition-all"
+							class="w-full flex items-center text-sm justify-between gap-4 py-1 text-left transition-all"
 						>
-							<div class="w-full h-full items-center justify-between flex gap-1 min-w-0 p-1">
+							<div class="w-full h-full items-center justify-between flex gap-1 min-w-0">
 								{#if isEditing && isEditing.id === item.id}
 									<form
 										on:submit={() => {
@@ -206,6 +226,25 @@ $: $workspaceStore && flowPath && (infiniteList && initLoadInputs(), (draft = fa
 								{/if}
 								{#if item.created_by == $userStore?.username || $userStore?.is_admin || $userStore?.is_super_admin}
 									<div class="items-center flex gap-2">
+										<PopoverV2 displayArrow={false} closeButton={false} openOnHover={true}>
+											<svelte:fragment slot="trigger">
+												<Eye class="w-4 h-4 group-hover:block hidden" />
+											</svelte:fragment>
+											<svelte:fragment slot="content">
+												<div class="p-2">
+													{#if item.payloadData === 'WINDMILL_TOO_BIG'}
+														<div class="text-center text-tertiary text-xs">
+															Payload too big to preview but can still be loaded
+														</div>
+													{:else}
+														<div class="max-w-60 overflow-auto">
+															<ObjectViewer json={item.payloadData} />
+														</div>
+													{/if}
+												</div>
+											</svelte:fragment>
+										</PopoverV2>
+
 										{#if !isEditing || isEditing?.id !== item.id}
 											<div class="group-hover:block hidden -my-2">
 												<Toggle