windmill-components 1.613.4 → 1.623.1

package/package/components/raw_apps/RawAppInlineScriptEditor.svelte.d.ts

@@ -1,26 +1,19 @@
 import type { ScriptLang } from '../../gen';
 import Editor from '../Editor.svelte';
-import type { InlineScript, StaticAppInput, UserAppInput, CtxAppInput } from '../apps/inputType';
-import { SvelteSet } from 'svelte/reactivity';
+import type { AppInput, InlineScript } from '../apps/inputType';
 interface Props {
     inlineScript: (InlineScript & {
         language: ScriptLang;
     }) | undefined;
     name?: string | undefined;
     id: string;
-    fields?: Record<string, StaticAppInput | UserAppInput | CtxAppInput>;
+    fields?: Record<string, AppInput>;
     path: string;
+    isLoading?: boolean;
     onRun: () => Promise<void>;
+    onCancel: () => Promise<void>;
     editor?: Editor | undefined;
     lastDeployedCode?: string | undefined;
-    /** Called when code is selected in the editor */
-    onSelectionChange?: (selection: {
-        content: string;
-        startLine: number;
-        endLine: number;
-        startColumn: number;
-        endColumn: number;
-    } | null) => void;
 }
 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> & {
@@ -39,25 +32,6 @@ declare const RawAppInlineScriptEditor: $$__sveltets_2_IsomorphicComponent<Props
     delete: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {
-    getDebugState: () => {
-        debugMode: boolean;
-        isDebuggableScript: boolean;
-        showDebugPanel: boolean;
-        hasDebugResult: boolean;
-        dapClient: import("../debug").DAPClient | null;
-        selectedDebugFrameId: number | null;
-        debugSessionJobId: string | null;
-        debugBreakpoints: SvelteSet<number>;
-    };
-    startDebugging: () => Promise<void>;
-    stopDebugging: () => Promise<void>;
-    continueExecution: () => Promise<void>;
-    stepOver: () => Promise<void>;
-    stepIn: () => Promise<void>;
-    stepOut: () => Promise<void>;
-    clearAllBreakpoints: () => void;
-    toggleDebugMode: () => void;
-}, "name" | "fields" | "inlineScript" | "editor">;
+}, {}, {}, "name" | "fields" | "inlineScript" | "editor">;
 type RawAppInlineScriptEditor = InstanceType<typeof RawAppInlineScriptEditor>;
 export default RawAppInlineScriptEditor;

package/package/components/raw_apps/RawAppInlineScriptPanelList.svelte

@@ -1,11 +1,10 @@
-<script lang="ts">import { Button } from '../common';
-import { Plus, File, AlertCircle, AlertTriangle } from 'lucide-svelte';
+<script lang="ts">import { Badge, Button } from '../common';
+import { Plus, AlertCircle, AlertTriangle } from 'lucide-svelte';
 import PanelSection from '../apps/editor/settingsPanel/common/PanelSection.svelte';
 import Popover from '../Popover.svelte';
 import { getNextId } from '../flows/idUtils';
 import { rawAppLintStore } from './lintStore';
-import RunnableRow from './RunnableRow.svelte';
-let { selectedRunnable = $bindable(), runnables, onSelect } = $props();
+let { selectedRunnable = $bindable(), runnables } = $props();
 // Subscribe to lint store for reactive updates
 let lintSnapshot = $state(rawAppLintStore.getSnapshot());
 $effect(() => {
@@ -25,24 +24,22 @@ function createBackgroundScript() {
         type: 'inline'
     };
     selectedRunnable = nid;
-    onSelect?.(nid);
 }
 </script>
 
-<PanelSection size="sm" fullHeight={false} title="backend" id="app-editor-runnable-panel">
+<PanelSection size="lg" fullHeight={false} title="backend" id="app-editor-runnable-panel">
 	{#snippet action()}
 		<div class="flex flex-row gap-1">
 			<Button
-				unifiedSize="xs"
-				variant="subtle"
+				size="xs"
+				variant="default"
+				btnClasses="!rounded-full !p-1"
 				title="Create a new background runnable"
 				aria-label="Create a new background runnable"
 				on:click={createBackgroundScript}
 				id="create-background-runnable"
-				btnClasses="gap-0.5 px-1"
 			>
-				<Plus size={12} />
-				<File size={12} />
+				<Plus size={14} class="!text-primary" />
 			</Button>
 		</div>
 	{/snippet}
@@ -52,21 +49,17 @@ function createBackgroundScript() {
 				{#if Object.keys(runnables ?? {}).length > 0}
 					{#each Object.entries(runnables ?? {}) as [id, runnable]}
 						{#if runnable}
-							<RunnableRow
+							<button
 								{id}
-								{runnable}
-								isSelected={selectedRunnable === id}
-								onSelect={() => {
-									selectedRunnable = id
-									onSelect?.(id)
-								}}
-								onDelete={() => {
-									delete runnables[id]
-									if (selectedRunnable === id) {
-										selectedRunnable = undefined
-									}
-								}}
-							/>
+								class="panel-item
+								{selectedRunnable === id
+									? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50'
+									: 'hover:bg-blue-50 dark:hover:bg-frost-900/50'}"
+								onclick={() => (selectedRunnable = id)}
+							>
+								<span class="text-2xs truncate">{runnable?.name}</span>
+								<Badge color="indigo">{id}</Badge>
+							</button>
 						{/if}
 					{/each}
 				{:else}

package/package/components/raw_apps/RawAppInlineScriptPanelList.svelte.d.ts

@@ -2,7 +2,6 @@ import type { Runnable } from '../apps/inputType';
 interface Props {
     selectedRunnable: string | undefined;
     runnables: Record<string, Runnable>;
-    onSelect?: (id: string) => void;
 }
 declare const RawAppInlineScriptPanelList: import("svelte").Component<Props, {}, "selectedRunnable">;
 type RawAppInlineScriptPanelList = ReturnType<typeof RawAppInlineScriptPanelList>;

package/package/components/raw_apps/RawAppInlineScriptRunnable.svelte

@@ -11,13 +11,7 @@ import SplitPanesWrapper from '../splitPanes/SplitPanesWrapper.svelte';
 import SchemaForm from '../SchemaForm.svelte';
 import RunnableJobPanelInner from '../apps/editor/RunnableJobPanelInner.svelte';
 import JobLoader from '../JobLoader.svelte';
-import { slide } from 'svelte/transition';
-import { DebugToolbar, DebugPanel, debugState } from '../debug';
-import LogViewer from '../LogViewer.svelte';
-import DisplayResult from '../DisplayResult.svelte';
-import RunButton from '../RunButton.svelte';
-import { userStore, workspaceStore } from '../../stores';
-let { runnable = $bindable(), id, appPath, onSelectionChange } = $props();
+let { runnable = $bindable(), id, appPath } = $props();
 const dispatch = createEventDispatcher();
 async function fork(nrunnable) {
     runnable = nrunnable == undefined ? undefined : { ...runnable, ...nrunnable };
@@ -32,7 +26,7 @@ function onPick(o) {
                 fields: o.fields
             };
 }
-let selectedTab = $state('test');
+let selectedTab = $state('inputs');
 let args = $state({});
 function getSchema(runnable) {
     if (isRunnableByPath(runnable)) {
@@ -47,49 +41,6 @@ let jobLoader = $state();
 let testJob = $state();
 let testIsLoading = $state(false);
 let scriptProgress = $state(0);
-// Reference to the inline script editor for debug functions
-let inlineScriptEditor = $state();
-// Get debug state from the editor
-const editorDebugState = $derived(inlineScriptEditor?.getDebugState?.() ?? {
-    debugMode: false,
-    isDebuggableScript: false,
-    showDebugPanel: false,
-    hasDebugResult: false,
-    dapClient: null,
-    selectedDebugFrameId: null,
-    debugSessionJobId: null,
-    debugBreakpoints: new Set()
-});
-// Reactive debug state values
-const debugMode = $derived(editorDebugState.debugMode);
-const isDebuggableScript = $derived(editorDebugState.isDebuggableScript);
-const showDebugPanel = $derived(editorDebugState.showDebugPanel);
-const hasDebugResult = $derived(editorDebugState.hasDebugResult);
-const dapClient = $derived(editorDebugState.dapClient);
-let selectedDebugFrameId = $state(null);
-// Auto-switch to test tab when debug mode is enabled
-$effect(() => {
-    if (debugMode) {
-        selectedTab = 'test';
-    }
-});
-// Helper to get actual ctx value for testing
-function getCtxValue(expr) {
-    switch (expr) {
-        case 'username':
-            return $userStore?.username ?? '';
-        case 'email':
-            return $userStore?.email ?? '';
-        case 'groups':
-            return $userStore?.groups ?? [];
-        case 'workspace':
-            return $workspaceStore ?? '';
-        case 'author':
-            return $userStore?.email ?? ''; // In editor, author is the current user
-        default:
-            return '';
-    }
-}
 function onFieldsChange(fields) {
     if (args == undefined) {
         args = {};
@@ -98,10 +49,6 @@ function onFieldsChange(fields) {
         if (v.type == 'static') {
             args[k] = v.value;
         }
-        else if (v.type == 'ctx' && v.ctx) {
-            // For test preview, use actual user values
-            args[k] = getCtxValue(v.ctx);
-        }
     });
 }
 async function testPreview() {
@@ -138,16 +85,20 @@ $effect(() => {
 		<Pane size={55}>
 			{#if isRunnableByName(runnable)}
 				<RawAppInlineScriptEditor
-					bind:this={inlineScriptEditor}
 					on:createScriptFromInlineScript={() => dispatch('createScriptFromInlineScript', runnable)}
 					{id}
 					bind:inlineScript={runnable.inlineScript}
 					bind:name={runnable.name}
 					bind:fields={runnable.fields}
+					isLoading={testIsLoading}
 					onRun={testPreview}
+					onCancel={async () => {
+						if (jobLoader) {
+							await jobLoader.cancelJob()
+						}
+					}}
 					on:delete
 					path={appPath}
-					{onSelectionChange}
 				/>
 			{:else if isRunnableByPath(runnable)}
 				<InlineScriptRunnableByPath
@@ -169,8 +120,8 @@ $effect(() => {
 		</Pane>
 		<Pane size={45}>
 			<Tabs bind:selected={selectedTab}>
-				<Tab value="test" label="Test" />
 				<Tab value="inputs" label="Inputs" />
+				<Tab value="test" label="Test" />
 				{#snippet content()}
 					{#if selectedTab == 'inputs'}
 						{#if runnable?.fields}
@@ -201,40 +152,10 @@ $effect(() => {
 							<div class="text-primary text-xs">No inputs</div>
 						{/if}
 					{:else if selectedTab == 'test'}
-						{#if debugMode && isDebuggableScript}
-							<div transition:slide={{ duration: 200 }}>
-								<DebugToolbar
-									connected={$debugState.connected}
-									running={$debugState.running}
-									stopped={$debugState.stopped}
-									breakpointCount={editorDebugState.debugBreakpoints?.size ?? 0}
-									onStart={() => inlineScriptEditor?.startDebugging() ?? Promise.resolve()}
-									onStop={() => inlineScriptEditor?.stopDebugging() ?? Promise.resolve()}
-									onContinue={() => inlineScriptEditor?.continueExecution() ?? Promise.resolve()}
-									onStepOver={() => inlineScriptEditor?.stepOver() ?? Promise.resolve()}
-									onStepIn={() => inlineScriptEditor?.stepIn() ?? Promise.resolve()}
-									onStepOut={() => inlineScriptEditor?.stepOut() ?? Promise.resolve()}
-									onClearBreakpoints={() => inlineScriptEditor?.clearAllBreakpoints()}
-									onExitDebug={() => inlineScriptEditor?.toggleDebugMode()}
-								/>
-							</div>
-						{/if}
 						<SplitPanesWrapper>
 							<Splitpanes horizontal class="grow">
 								<Pane size={50}>
 									<div class="px-2 py-3 h-full overflow-auto">
-										<div class="mx-auto w-fit">
-											<RunButton
-												isLoading={testIsLoading}
-												onRun={testPreview}
-												onCancel={async () => {
-													if (jobLoader) {
-														await jobLoader.cancelJob()
-													}
-												}}
-												size="md"
-											/>
-										</div>
 										<SchemaForm
 											on:keydownCmdEnter={testPreview}
 											disabledArgs={Object.entries(runnable?.fields ?? {})
@@ -246,59 +167,7 @@ $effect(() => {
 									</div>
 								</Pane>
 								<Pane size={50}>
-									{#if showDebugPanel || hasDebugResult}
-										<Splitpanes horizontal class="h-full">
-											<Pane size={50} minSize={15}>
-												<Splitpanes horizontal class="h-full">
-													<Pane size={50} minSize={10}>
-														<LogViewer
-															small
-															content={$debugState.logs}
-															isLoading={$debugState.running && !$debugState.stopped}
-															tag={undefined}
-														/>
-													</Pane>
-													<Pane size={50} minSize={10}>
-														{#if hasDebugResult}
-															<div class="h-full p-2 overflow-auto">
-																<DisplayResult
-																	result={$debugState.result}
-																	language={runnable?.inlineScript?.language}
-																/>
-															</div>
-														{:else}
-															<div
-																class="h-full flex items-center justify-center text-sm text-tertiary"
-															>
-																{#if $debugState.running && !$debugState.stopped}
-																	Running...
-																{:else if $debugState.stopped}
-																	Paused at breakpoint
-																{:else}
-																	Waiting for debug session
-																{/if}
-															</div>
-														{/if}
-													</Pane>
-												</Splitpanes>
-											</Pane>
-											<Pane size={50} minSize={15}>
-												<DebugPanel
-													stackFrames={$debugState.stackFrames}
-													scopes={$debugState.scopes}
-													variables={$debugState.variables}
-													client={dapClient}
-													bind:selectedFrameId={selectedDebugFrameId}
-												/>
-											</Pane>
-										</Splitpanes>
-									{:else if debugMode && isDebuggableScript}
-										<div class="h-full flex items-center justify-center text-sm text-tertiary">
-											Click "Debug" in the toolbar to start debugging
-										</div>
-									{:else}
-										<RunnableJobPanelInner frontendJob={false} {testJob} {testIsLoading} />
-									{/if}
+									<RunnableJobPanelInner frontendJob={false} {testJob} {testIsLoading} />
 								</Pane>
 							</Splitpanes>
 						</SplitPanesWrapper>

package/package/components/raw_apps/RawAppInlineScriptRunnable.svelte.d.ts

@@ -11,14 +11,6 @@ interface Props {
     id: string;
     appPath: string;
     lastDeployedCode?: string | undefined;
-    /** Called when code is selected in the editor */
-    onSelectionChange?: (selection: {
-        content: string;
-        startLine: number;
-        endLine: number;
-        startColumn: number;
-        endColumn: number;
-    } | null) => void;
 }
 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> & {

package/package/components/raw_apps/RawAppInlineScriptsPanel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { workspaceStore } from '../../stores';
 import RawAppInlineScripRunnable, {} from './RawAppInlineScriptRunnable.svelte';
 import { createScriptFromInlineScript } from '../apps/editor/inlineScriptsPanel/utils';
-let { runnables = $bindable(), selectedRunnable = $bindable(), appPath, onSelectionChange } = $props();
+let { runnables, selectedRunnable = $bindable(), appPath } = $props();
 </script>
 
 {#if !selectedRunnable}
@@ -28,7 +28,6 @@ let { runnables = $bindable(), selectedRunnable = $bindable(), appPath, onSelect
 			}}
 			id={selectedRunnable}
 			bind:runnable={runnables[selectedRunnable]}
-			{onSelectionChange}
 		/>{/key}
 {:else}
 	<div class="text-sm text-primary text-center py-8 px-2">

package/package/components/raw_apps/RawAppInlineScriptsPanel.svelte.d.ts

@@ -4,15 +4,7 @@ interface Props {
     selectedRunnable: string | undefined;
     appPath: string;
     initRunnablesContent: Record<string, string>;
-    /** Called when code is selected in the editor */
-    onSelectionChange?: (selection: {
-        content: string;
-        startLine: number;
-        endLine: number;
-        startColumn: number;
-        endColumn: number;
-    } | null) => void;
 }
-declare const RawAppInlineScriptsPanel: import("svelte").Component<Props, {}, "runnables" | "selectedRunnable">;
+declare const RawAppInlineScriptsPanel: import("svelte").Component<Props, {}, "selectedRunnable">;
 type RawAppInlineScriptsPanel = ReturnType<typeof RawAppInlineScriptsPanel>;
 export default RawAppInlineScriptsPanel;

package/package/components/raw_apps/RawAppInputsSpecEditor.svelte

@@ -3,33 +3,18 @@ import { addWhitespaceBeforeCapitals, capitalize, classNames } from '../../utils
 import Tooltip from '../Tooltip.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
-import { Loader2, Pen, User, Shield } from 'lucide-svelte';
+import { Loader2, Pen, User } from 'lucide-svelte';
 import Toggle from '../Toggle.svelte';
 import StaticInputEditor from '../apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte';
 import { fieldTypeToTsType } from '../apps/utils';
-import Select from '../select/Select.svelte';
-import { userStore, workspaceStore } from '../../stores';
-// Build ctx properties with current user's actual values
-let ctxProperties = $derived([
-    { value: 'username', label: 'Username', subtitle: `string — "${$userStore?.username ?? 'unknown'}"` },
-    { value: 'email', label: 'Email', subtitle: `string — "${$userStore?.email ?? 'unknown'}"` },
-    { value: 'groups', label: 'Groups', subtitle: `string[] — ${JSON.stringify($userStore?.groups ?? [])}` },
-    { value: 'workspace', label: 'Workspace', subtitle: `string — "${$workspaceStore ?? 'unknown'}"` },
-    { value: 'author', label: 'Author', subtitle: `string — "${$userStore?.email ?? 'unknown'}"` }
-]);
 let { id, componentInput = $bindable(), key, shouldCapitalize = true, resourceOnly = false, tooltip = undefined, fieldType, subFieldType, format, selectOptions, placeholder, customTitle = undefined, displayType = false, allowTypeChange = true, loading = false, documentationLink = undefined, markdownTooltip = undefined } = $props();
 run(() => {
     if (componentInput == undefined) {
         //@ts-ignore
         componentInput = {
-            type: 'user',
-            fieldType
+            type: 'user'
         };
     }
-    else if (componentInput.fieldType == undefined && fieldType) {
-        // Ensure fieldType is set on existing inputs
-        componentInput = { ...componentInput, fieldType };
-    }
 });
 </script>
 
@@ -65,25 +50,10 @@ run(() => {
 
 			<div class={classNames('flex gap-x-2 gap-y-1 justify-end items-center')}>
 				{#if componentInput?.type && allowTypeChange !== false}
-					<ToggleButtonGroup
-						selected={componentInput.type}
-						onSelected={(newType) => {
-							// Preserve fieldType and other properties when changing type
-							componentInput = {
-								...componentInput,
-								type: newType,
-								fieldType: componentInput.fieldType ?? fieldType
-							}
-							// Clear ctx when switching away from ctx type
-							if (newType !== 'ctx') {
-								delete componentInput.ctx
-							}
-						}}
-					>
+					<ToggleButtonGroup bind:selected={componentInput.type}>
 						{#snippet children({ item })}
 							<ToggleButton {item} value="user" icon={User} iconOnly tooltip="User Input" />
 							<ToggleButton {item} value="static" icon={Pen} iconOnly tooltip="Static" />
-							<ToggleButton {item} value="ctx" icon={Shield} iconOnly tooltip="Context (secure backend value)" />
 						{/snippet}
 					</ToggleButtonGroup>
 				{/if}
@@ -102,20 +72,6 @@ run(() => {
 					bind:componentInput
 				/>
 			</div>
-		{:else if componentInput?.type === 'ctx'}
-			<div class="w-full">
-				<Select
-					items={ctxProperties}
-					bind:value={componentInput.ctx}
-					placeholder="Select context property"
-				/>
-				{#if componentInput.ctx}
-					<span class="text-2xs italic text-tertiary mt-1 flex items-center gap-1">
-						<Shield size={12} />
-						Securely resolved by the backend (cannot be altered by users)
-					</span>
-				{/if}
-			</div>
 		{:else if componentInput?.type === 'user' || componentInput?.type == undefined}
 			<span class="text-2xs italic text-primary">Field's value is a frontend input</span>
 		{/if}

package/package/components/raw_apps/RawAppInputsSpecEditor.svelte.d.ts

@@ -1,8 +1,8 @@
+import type { RichConfiguration } from '../apps/types';
 import type { InputType } from '../apps/inputType';
-type RawAppInput = any;
 interface Props {
     id: string;
-    componentInput: RawAppInput;
+    componentInput: RichConfiguration;
     key: string;
     shouldCapitalize?: boolean;
     resourceOnly?: boolean;

package/package/components/raw_apps/RawAppModules.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">import { Loader2 } from 'lucide-svelte';
 import PanelSection from '../apps/editor/settingsPanel/common/PanelSection.svelte';
-import TextInput from '../text_input/TextInput.svelte';
 let props = $props();
 let search = $state('');
 const filteredModules = $derived({
@@ -17,30 +16,30 @@ const filteredModules = $derived({
 </script>
 
 <PanelSection
-	size="xs"
+	size="sm"
 	collapsible
 	initiallyCollapsed
-	titlePadding="!text-tertiary"
+	titlePadding="pl-1 !text-tertiary"
 	fullHeight={false}
 	title="packages ({Object.keys(props.modules?.installed ?? {}).length})"
 	id="app-editor-frontend-panel-modules"
 >
-	<TextInput inputProps={{ placeholder: 'Search packages' }} size="sm" bind:value={search} />
+	<input type="text" class="w-full max-w-sm" placeholder="Search packages" bind:value={search} />
 	<div class="mt-2 flex flex-col gap-4 w-full">
 		{#each ['direct', 'indirect', 'dev'] as type}
 			{@const typeModules = filteredModules[type]}
 			{#if typeModules.length > 0}
 				<div class="flex flex-col gap-1">
-					<div class="text-xs px-2 text-hint text-2xs"
+					<div class="text-sm px-2 text-secondary font-mono uppercase"
 						>{type}
-						<span>({typeModules.length})</span></div
+						<span class="text-2xs text-tertiary">({typeModules.length})</span></div
 					>
 					{#each typeModules as mod (mod)}
-						<div class="text-xs px-2 text-primary font-mono flex justify-between w-full"
+						<div class="text-xs px-2 text-secondary font-mono flex justify-between w-full"
 							><div class="truncate">{mod}</div>
 							<div class="flex items-center gap-1">
 								{#if props.modules?.installed?.[mod]}
-									<span class="text-2xs px-2 text-hint">
+									<span class="text-2xs px-2 text-tertiary font-mono">
 										{props.modules?.installed?.[mod]}
 									</span>
 								{:else}
@@ -52,10 +51,5 @@ const filteredModules = $derived({
 				</div>
 			{/if}
 		{/each}
-		{#if filteredModules.direct.length === 0 && filteredModules.indirect.length === 0 && filteredModules.dev.length === 0}
-			<span class="text-xs px-2 text-hint text-2xs"
-				>No packages found. Edit <b>package.json</b> to add them.</span
-			>
-		{/if}
 	</div>
 </PanelSection>

package/package/components/raw_apps/RawAppPreview.svelte

@@ -1,57 +1,15 @@
 <script lang="ts">import {} from '../../stores';
 import RawAppBackgroundRunner from './RawAppBackgroundRunner.svelte';
 import { htmlContent } from './utils';
-import { onMount } from 'svelte';
 let { workspace, user, secret, path, runnables } = $props();
 let iframe = $state();
-// Get initial hash from parent URL to pass to iframe
-let initialHash = $state('');
-onMount(() => {
-    initialHash = window.location.hash || '';
-});
-// Use blob URL instead of srcDoc to give the iframe a proper origin.
-// srcDoc iframes have "null" origin which breaks URL constructor in routers.
-let blobUrl = $derived.by(() => {
-    if (!secret)
-        return undefined;
-    const baseUrl = typeof window !== 'undefined' ? window.location.origin : '';
-    const html = htmlContent(workspace, secret, { ctx: user, workspace }, baseUrl, initialHash);
-    const blob = new Blob([html], { type: 'text/html' });
-    return URL.createObjectURL(blob);
-});
-// Cleanup blob URL when it changes or component unmounts
-$effect(() => {
-    const url = blobUrl;
-    return () => {
-        if (url)
-            URL.revokeObjectURL(url);
-    };
-});
-// Listen for hash changes from iframe and update parent URL
-$effect(() => {
-    function handleMessage(event) {
-        console.log('[Parent] Received message:', event.data);
-        if (event.data?.type === 'windmill:hashchange') {
-            const newHash = event.data.hash || '';
-            console.log('[Parent] Updating hash to:', newHash);
-            // Update parent URL without triggering navigation
-            if (window.location.hash !== newHash) {
-                history.replaceState(null, '', newHash || window.location.pathname);
-            }
-        }
-    }
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-});
 </script>
 
 <RawAppBackgroundRunner {workspace} editor={false} {iframe} {runnables} {path} />
 
-{#if blobUrl}
-	<iframe
-		bind:this={iframe}
-		title="raw-app"
-		src={blobUrl}
-		class="w-full h-full min-h-screen bg-white border-none"
-	></iframe>
-{/if}
+<iframe
+	bind:this={iframe}
+	title="raw-app"
+	srcDoc={htmlContent(workspace, secret, { ctx: user, workspace })}
+	class="w-full h-full min-h-screen bg-white border-none"
+></iframe>