windmill-components 1.623.1 → 1.642.0

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

@@ -1,19 +1,25 @@
 import type { ScriptLang } from '../../gen';
-import Editor from '../Editor.svelte';
-import type { AppInput, InlineScript } from '../apps/inputType';
+import type { InlineScript, StaticAppInput, UserAppInput, CtxAppInput } from '../apps/inputType';
+import { SvelteSet } from 'svelte/reactivity';
 interface Props {
     inlineScript: (InlineScript & {
         language: ScriptLang;
     }) | undefined;
     name?: string | undefined;
     id: string;
-    fields?: Record<string, AppInput>;
+    fields?: Record<string, StaticAppInput | UserAppInput | CtxAppInput>;
     path: string;
-    isLoading?: boolean;
     onRun: () => Promise<void>;
-    onCancel: () => Promise<void>;
-    editor?: Editor | undefined;
+    editor?: any | 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> & {
@@ -32,6 +38,25 @@ declare const RawAppInlineScriptEditor: $$__sveltets_2_IsomorphicComponent<Props
     delete: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "name" | "fields" | "inlineScript" | "editor">;
+}, {}, {
+    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">;
 type RawAppInlineScriptEditor = InstanceType<typeof RawAppInlineScriptEditor>;
 export default RawAppInlineScriptEditor;

package/package/components/raw_apps/RawAppInlineScriptPanelList.svelte

@@ -1,10 +1,47 @@
-<script lang="ts">import { Badge, Button } from '../common';
-import { Plus, AlertCircle, AlertTriangle } from 'lucide-svelte';
+<script lang="ts">import { Button } from '../common';
+import { Plus, File, 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 { getNextId, forbiddenIds } from '../flows/idUtils';
 import { rawAppLintStore } from './lintStore';
-let { selectedRunnable = $bindable(), runnables } = $props();
+import RunnableRow from './RunnableRow.svelte';
+import { sendUserToast } from '../../toast';
+let { selectedRunnable = $bindable(), runnables, onSelect } = $props();
+let editingId = $state(undefined);
+const validIdPattern = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+function renameRunnable(oldId, newId) {
+    if (newId === oldId) {
+        editingId = undefined;
+        return;
+    }
+    if (!newId) {
+        sendUserToast('ID cannot be empty', true);
+        editingId = undefined;
+        return;
+    }
+    if (!validIdPattern.test(newId)) {
+        sendUserToast('ID must be a valid identifier (letters, digits, underscores)', true);
+        editingId = undefined;
+        return;
+    }
+    if (newId in runnables) {
+        sendUserToast(`ID "${newId}" is already in use`, true);
+        editingId = undefined;
+        return;
+    }
+    if (forbiddenIds.includes(newId)) {
+        sendUserToast(`"${newId}" is a reserved keyword`, true);
+        editingId = undefined;
+        return;
+    }
+    runnables[newId] = runnables[oldId];
+    delete runnables[oldId];
+    if (selectedRunnable === oldId) {
+        selectedRunnable = newId;
+        onSelect?.(newId);
+    }
+    editingId = undefined;
+}
 // Subscribe to lint store for reactive updates
 let lintSnapshot = $state(rawAppLintStore.getSnapshot());
 $effect(() => {
@@ -24,22 +61,24 @@ function createBackgroundScript() {
         type: 'inline'
     };
     selectedRunnable = nid;
+    onSelect?.(nid);
 }
 </script>
 
-<PanelSection size="lg" fullHeight={false} title="backend" id="app-editor-runnable-panel">
+<PanelSection size="sm" fullHeight={false} title="backend" id="app-editor-runnable-panel">
 	{#snippet action()}
 		<div class="flex flex-row gap-1">
 			<Button
-				size="xs"
-				variant="default"
-				btnClasses="!rounded-full !p-1"
+				unifiedSize="xs"
+				variant="subtle"
 				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={14} class="!text-primary" />
+				<Plus size={12} />
+				<File size={12} />
 			</Button>
 		</div>
 	{/snippet}
@@ -49,17 +88,25 @@ function createBackgroundScript() {
 				{#if Object.keys(runnables ?? {}).length > 0}
 					{#each Object.entries(runnables ?? {}) as [id, runnable]}
 						{#if runnable}
-							<button
+							<RunnableRow
 								{id}
-								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>
+								{runnable}
+								isSelected={selectedRunnable === id}
+								isEditing={editingId === id}
+								onSelect={() => {
+									selectedRunnable = id
+									onSelect?.(id)
+								}}
+								onDelete={() => {
+									delete runnables[id]
+									if (selectedRunnable === id) {
+										selectedRunnable = undefined
+									}
+								}}
+								onRename={(newId) => renameRunnable(id, newId)}
+								onRequestEdit={() => (editingId = id)}
+								onCancelEdit={() => (editingId = undefined)}
+							/>
 						{/if}
 					{/each}
 				{:else}

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

@@ -2,6 +2,7 @@ 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,7 +11,13 @@ import SplitPanesWrapper from '../splitPanes/SplitPanesWrapper.svelte';
 import SchemaForm from '../SchemaForm.svelte';
 import RunnableJobPanelInner from '../apps/editor/RunnableJobPanelInner.svelte';
 import JobLoader from '../JobLoader.svelte';
-let { runnable = $bindable(), id, appPath } = $props();
+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();
 const dispatch = createEventDispatcher();
 async function fork(nrunnable) {
     runnable = nrunnable == undefined ? undefined : { ...runnable, ...nrunnable };
@@ -26,7 +32,7 @@ function onPick(o) {
                 fields: o.fields
             };
 }
-let selectedTab = $state('inputs');
+let selectedTab = $state('test');
 let args = $state({});
 function getSchema(runnable) {
     if (isRunnableByPath(runnable)) {
@@ -41,6 +47,49 @@ 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 = {};
@@ -49,6 +98,10 @@ 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() {
@@ -85,20 +138,16 @@ $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
@@ -120,8 +169,8 @@ $effect(() => {
 		</Pane>
 		<Pane size={45}>
 			<Tabs bind:selected={selectedTab}>
-				<Tab value="inputs" label="Inputs" />
 				<Tab value="test" label="Test" />
+				<Tab value="inputs" label="Inputs" />
 				{#snippet content()}
 					{#if selectedTab == 'inputs'}
 						{#if runnable?.fields}
@@ -152,10 +201,40 @@ $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 ?? {})
@@ -167,7 +246,59 @@ $effect(() => {
 									</div>
 								</Pane>
 								<Pane size={50}>
-									<RunnableJobPanelInner frontendJob={false} {testJob} {testIsLoading} />
+									{#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}
 								</Pane>
 							</Splitpanes>
 						</SplitPanesWrapper>

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

@@ -11,6 +11,14 @@ 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, selectedRunnable = $bindable(), appPath } = $props();
+let { runnables = $bindable(), selectedRunnable = $bindable(), appPath, onSelectionChange } = $props();
 </script>
 
 {#if !selectedRunnable}
@@ -28,6 +28,7 @@ let { runnables, selectedRunnable = $bindable(), appPath } = $props();
 			}}
 			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

@@ -3,8 +3,15 @@ interface Props {
     runnables: Record<string, Runnable>;
     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, {}, "selectedRunnable">;
+declare const RawAppInlineScriptsPanel: import("svelte").Component<Props, {}, "runnables" | "selectedRunnable">;
 type RawAppInlineScriptsPanel = ReturnType<typeof RawAppInlineScriptsPanel>;
 export default RawAppInlineScriptsPanel;

package/package/components/raw_apps/RawAppInputsSpecEditor.svelte

@@ -3,18 +3,33 @@ 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 } from 'lucide-svelte';
+import { Loader2, Pen, User, Shield } 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'
+            type: 'user',
+            fieldType
         };
     }
+    else if (componentInput.fieldType == undefined && fieldType) {
+        // Ensure fieldType is set on existing inputs
+        componentInput = { ...componentInput, fieldType };
+    }
 });
 </script>
 
@@ -50,10 +65,25 @@ run(() => {
 
 			<div class={classNames('flex gap-x-2 gap-y-1 justify-end items-center')}>
 				{#if componentInput?.type && allowTypeChange !== false}
-					<ToggleButtonGroup bind:selected={componentInput.type}>
+					<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
+							}
+						}}
+					>
 						{#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}
@@ -72,6 +102,20 @@ 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: RichConfiguration;
+    componentInput: RawAppInput;
     key: string;
     shouldCapitalize?: boolean;
     resourceOnly?: boolean;

package/package/components/raw_apps/RawAppModules.svelte

@@ -1,5 +1,6 @@
 <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({
@@ -16,30 +17,30 @@ const filteredModules = $derived({
 </script>
 
 <PanelSection
-	size="sm"
+	size="xs"
 	collapsible
 	initiallyCollapsed
-	titlePadding="pl-1 !text-tertiary"
+	titlePadding="!text-tertiary"
 	fullHeight={false}
 	title="packages ({Object.keys(props.modules?.installed ?? {}).length})"
 	id="app-editor-frontend-panel-modules"
 >
-	<input type="text" class="w-full max-w-sm" placeholder="Search packages" bind:value={search} />
+	<TextInput inputProps={{ placeholder: 'Search packages' }} size="sm" 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-sm px-2 text-secondary font-mono uppercase"
+					<div class="text-xs px-2 text-hint text-2xs"
 						>{type}
-						<span class="text-2xs text-tertiary">({typeModules.length})</span></div
+						<span>({typeModules.length})</span></div
 					>
 					{#each typeModules as mod (mod)}
-						<div class="text-xs px-2 text-secondary font-mono flex justify-between w-full"
+						<div class="text-xs px-2 text-primary 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-tertiary font-mono">
+									<span class="text-2xs px-2 text-hint">
 										{props.modules?.installed?.[mod]}
 									</span>
 								{:else}
@@ -51,5 +52,10 @@ 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,15 +1,57 @@
 <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} />
 
-<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>
+{#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}