improve step mocking ui

frontend/src/lib/components/ArgInput.svelte

@@ -266,7 +266,7 @@
 		if (nullable && emptyString(v)) {
 			error = ''
 			valid && (valid = true)
-		} else if (required && (v == undefined || v == null || v === '')) {
+		} else if (required && (v == undefined || v == null || v === '') && inputCat != 'object') {
 			error = 'Required'
 			valid && (valid = false)
 		} else {
@@ -345,6 +345,7 @@
 	}}
 	readOnlyMode={false}
 />
+
 <!-- svelte-ignore a11y-autofocus -->
 <div class="flex flex-col w-full {minW ? 'min-w-[250px]' : ''}">
 	<div>

frontend/src/lib/components/flows/content/FlowModuleMock.svelte

@@ -45,15 +45,14 @@
 	/>
 	<div>
 		<span class="text-xs font-bold">Mocked Return value</span>
-		{#if flowModule?.mock?.return_value != undefined}
+		{#if flowModule?.mock?.enabled}
 			<JsonEditor {code} bind:value={flowModule.mock.return_value} />
 		{:else}
-			<input
-				type="text"
-				disabled
-				value={flowModule.mock?.return_value ? code : ''}
-				class="w-full p-2 border rounded-md"
-			/>
+			<pre class="text-xs border rounded p-2 bg-surface-disabled"
+				>{flowModule.mock?.return_value
+					? JSON.stringify(flowModule.mock?.return_value, null, 2)
+					: ''}</pre
+			>
 		{/if}
 	</div>
 </Section>