truncate file too big

frontend/src/lib/components/DisplayResult.svelte

@@ -10,6 +10,7 @@
 
 	export let result: any
 	export let requireHtmlApproval = false
+	export let filename: string | undefined = undefined
 
 	let resultKind:
 		| 'json'
@@ -231,7 +232,15 @@
 				>
 			</div>
 		{:else}
-			<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+			{@const jsonStr = JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
+			{#if jsonStr.length > 10000}
+				JSON too large. <a
+					download="{filename ?? 'result'}.json"
+					href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a
+				>
+			{:else}
+				<Highlight language={json} code={jsonStr} />
+			{/if}
 		{/if}
 	{:else}
 		<div class="text-gray-500 text-sm">No result: {JSON.stringify(result)}</div>

frontend/src/lib/components/FlowJobResult.svelte

@@ -8,6 +8,7 @@
 	export let col: boolean = false
 	export let noBorder = false
 	export let loading
+	export let filename: string | undefined = undefined
 </script>
 
 <div
@@ -17,7 +18,7 @@
 	<div class="bg-white {col ? '' : 'max-h-80'} h-full p-1 overflow-auto relative">
 		<span class="text-gray-500">Result</span>
 		{#if result}
-			<DisplayResult {result} />
+			<DisplayResult {filename} {result} />
 		{:else if loading}
 			<Loader2 class="animate-spin" />
 		{:else}

frontend/src/lib/components/FlowStatusViewer.svelte

@@ -476,6 +476,7 @@
 						{@const node = localFlowModuleStates[selectedNode]}
 						{#if selectedNode == 'end'}
 							<FlowJobResult
+								filename={job.id}
 								loading={job['running']}
 								noBorder
 								col