windmill-components 1.623.1 → 1.623.2

package/package/components/apps/editor/AppEditorHeaderDeploy.svelte

@@ -11,6 +11,7 @@ import { computeSecretUrl } from './appDeploy.svelte';
 import { base } from '../../../base';
 import { isCloudHosted } from '../../../cloud';
 import EEOnly from '../../EEOnly.svelte';
+import TextInput from '../../text_input/TextInput.svelte';
 let { policy, setPublishState, appPath, customPath = $bindable(), onLatest, savedApp, summary = $bindable(), deploymentMsg = $bindable(), customPathError = $bindable(), pathError = $bindable(), newEditedPath = $bindable(), newPath, hideSecretUrl = false } = $props();
 let dirtyCustomPath = $state(false);
 let path = $state(undefined);
@@ -76,44 +77,46 @@ $effect(() => {
 	</Alert>
 	<div class="py-2"></div>
 {/if}
-<span class="text-secondary text-sm font-bold">Summary</span>
-<div class="w-full pt-2">
+<label for="summary" class="text-emphasis text-xs font-semibold">Summary</label>
+<div class="w-full pt-1">
 	<!-- svelte-ignore a11y_autofocus -->
-	<input
-		autofocus
-		type="text"
-		placeholder="App summary"
-		class="text-sm w-full"
-		bind:value={summary}
-		onkeydown={(e) => {
-			e.stopPropagation()
-		}}
-		onkeyup={() => {
-			if (appPath == '' && summary?.length > 0 && !dirtyPath) {
-				path?.setName(
-					summary
-						.toLowerCase()
-						.replace(/[^a-z0-9_]/g, '_')
-						.replace(/-+/g, '_')
-						.replace(/^-|-$/g, '')
-				)
+	<TextInput
+		inputProps={{
+			id: 'summary',
+			autofocus: true,
+			placeholder: 'App summary',
+			onkeydown: (e) => {
+				e.stopPropagation()
+			},
+			onkeyup: () => {
+				if (appPath == '' && summary?.length > 0 && !dirtyPath) {
+					path?.setName(
+						summary
+							.toLowerCase()
+							.replace(/[^a-z0-9_]/g, '_')
+							.replace(/-+/g, '_')
+							.replace(/^-|-$/g, '')
+					)
+				}
 			}
 		}}
+		bind:value={summary}
 	/>
 </div>
-<div class="py-4"></div>
-<span class="text-secondary text-sm font-bold">Deployment message</span>
-<div class="w-full pt-2">
+<div class="py-6"></div>
+<label for="deploymentMsg" class="text-emphasis text-xs font-semibold">Deployment message</label>
+<div class="w-full pt-1">
 	<!-- svelte-ignore a11y_autofocus -->
-	<input
-		type="text"
-		placeholder="Optional deployment message"
-		class="text-sm w-full"
+	<TextInput
+		inputProps={{
+			id: 'deploymentMsg',
+			placeholder: 'Optional deployment message'
+		}}
 		bind:value={deploymentMsg}
 	/>
 </div>
-<div class="py-4"></div>
-<span class="text-secondary text-sm font-bold">Path</span>
+<div class="py-6"></div>
+<label for="path" class="text-emphasis text-xs font-semibold">Path</label>
 <Path
 	bind:this={path}
 	bind:dirty={dirtyPath}

package/package/components/apps/editor/AppEditorHeaderDeploy.svelte.d.ts

@@ -11,8 +11,8 @@ type $$ComponentProps = {
     pathError: string;
     newEditedPath: string;
     newPath: string;
-    hideSecretUrl: boolean;
+    hideSecretUrl?: boolean;
 };
-declare const AppEditorHeaderDeploy: import("svelte").Component<$$ComponentProps, {}, "summary" | "customPath" | "deploymentMsg" | "customPathError" | "pathError" | "newEditedPath">;
+declare const AppEditorHeaderDeploy: import("svelte").Component<$$ComponentProps, {}, "summary" | "pathError" | "customPath" | "deploymentMsg" | "customPathError" | "newEditedPath">;
 type AppEditorHeaderDeploy = ReturnType<typeof AppEditorHeaderDeploy>;
 export default AppEditorHeaderDeploy;

package/package/components/apps/editor/AppEditorHeaderDeployInitialDraft.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { Alert } from '../../common';
 import Path from '../../Path.svelte';
-let { summary, appPath, pathError = $bindable(), newEditedPath = $bindable() } = $props();
+let { summary = $bindable(), appPath = $bindable(), pathError = $bindable(), newEditedPath = $bindable() } = $props();
 let path = $state(undefined);
 let dirtyPath = $state(false);
 </script>
@@ -19,11 +19,11 @@ let dirtyPath = $state(false);
 		onkeydown={(e) => {
 			e.stopPropagation()
 		}}
-		bind:value={$summary}
+		bind:value={summary}
 		onkeyup={() => {
-			if ($appPath == '' && $summary?.length > 0 && !dirtyPath) {
+			if (appPath == '' && summary?.length > 0 && !dirtyPath) {
 				path?.setName(
-					$summary
+					summary
 						.toLowerCase()
 						.replace(/[^a-z0-9_]/g, '_')
 						.replace(/-+/g, '_')

package/package/components/apps/editor/AppEditorHeaderDeployInitialDraft.svelte.d.ts

@@ -1,8 +1,8 @@
 declare const AppEditorHeaderDeployInitialDraft: import("svelte").Component<{
-    summary: any;
-    appPath: any;
+    summary?: any;
+    appPath?: any;
     pathError?: any;
     newEditedPath?: any;
-}, {}, "pathError" | "newEditedPath">;
+}, {}, "summary" | "appPath" | "pathError" | "newEditedPath">;
 type AppEditorHeaderDeployInitialDraft = ReturnType<typeof AppEditorHeaderDeployInitialDraft>;
 export default AppEditorHeaderDeployInitialDraft;

package/package/components/apps/editor/PublicApp.svelte

@@ -12,9 +12,12 @@ import { UserService } from '../../../gen';
 import { urlParamsToObject } from '../../../utils';
 import { goto } from '$app/navigation';
 import AppPreview from './AppPreview.svelte';
+import RawAppPreview from '../../raw_apps/RawAppPreview.svelte';
 import { twMerge } from 'tailwind-merge';
 import { writable } from 'svelte/store';
 let { notExists, noPermission, jwtError, onLoginSuccess, app, workspace } = $props();
+// Use workspace from props or from app.workspace_id (for custom path responses)
+let effectiveWorkspace = $derived(workspace ?? app?.workspace_id);
 setContext(IS_APP_PUBLIC_CONTEXT_KEY, true);
 const breakpoint = writable('lg');
 const darkMode = window.localStorage.getItem('dark-mode') ??
@@ -77,9 +80,9 @@ onMount(() => {
 {:else if noPermission}
 	<div class="px-4 mt-20 w-full text-center font-bold text-xl"> This app requires read access </div>
 	<div class="text-center mt-8 text-sm text-primary">
-		{#if $userStore}You are logged in but have no read access to this app{:else if globalUser && workspace}
+		{#if $userStore}You are logged in but have no read access to this app{:else if globalUser && effectiveWorkspace}
 			You are logged in but are not a member of the workspace <span class="text-xl font-bold"
-				>{workspace}</span
+				>{effectiveWorkspace}</span
 			> this app is part of
 		{:else}You must be logged in and have read access to this app{/if}</div
 	>
@@ -90,35 +93,51 @@ onMount(() => {
 	</div>
 {:else if app}
 	{#key app}
-		<div
-			class={twMerge(
-				'min-h-screen h-full w-full flex',
-				app?.value?.['css']?.['app']?.['viewer']?.class,
-				'wm-app-viewer'
-			)}
-			style={app?.value?.['css']?.['app']?.['viewer']?.style}
-		>
-			<AppPreview
-				noBackend={false}
-				context={{
-					email: $userStore?.email,
-					name: $userStore?.name,
-					groups: $userStore?.groups,
-					username: $userStore?.username,
-					query: urlParamsToObject(page.url.searchParams),
-					hash: page.url.hash.substring(1)
-				}}
-				{workspace}
-				summary={app.summary}
-				app={app.value}
-				appPath={app.path}
-				{breakpoint}
-				policy={app.policy}
-				isEditor={false}
-				replaceStateFn={(path) => goto(path)}
-				gotoFn={(path, opt) => goto(path, opt)}
+		{#if app.raw_app && effectiveWorkspace}
+			<RawAppPreview
+				workspace={effectiveWorkspace}
+				user={$userStore}
+				secret={app.bundle_secret}
+				path={app.path}
+				runnables={(app.value?.runnables ?? {}) as Record<string, Runnable>}
 			/>
-		</div>
+		{:else if app.raw_app && !effectiveWorkspace}
+			<div class="px-4 mt-20">
+				<Alert type="error" title="Configuration error">
+					Unable to load raw app: workspace information is missing.
+				</Alert>
+			</div>
+		{:else}
+			<div
+				class={twMerge(
+					'min-h-screen h-full w-full flex',
+					app?.value?.['css']?.['app']?.['viewer']?.class,
+					'wm-app-viewer'
+				)}
+				style={app?.value?.['css']?.['app']?.['viewer']?.style}
+			>
+				<AppPreview
+					noBackend={false}
+					context={{
+						email: $userStore?.email,
+						name: $userStore?.name,
+						groups: $userStore?.groups,
+						username: $userStore?.username,
+						query: urlParamsToObject(page.url.searchParams),
+						hash: page.url.hash.substring(1)
+					}}
+					workspace={effectiveWorkspace}
+					summary={app.summary}
+					app={app.value}
+					appPath={app.path}
+					{breakpoint}
+					policy={app.policy}
+					isEditor={false}
+					replaceStateFn={(path) => goto(path)}
+					gotoFn={(path, opt) => goto(path, opt)}
+				/>
+			</div>
+		{/if}
 	{/key}
 {:else}
 	<Skeleton layout={[[4], 0.5, [50]]} />

package/package/components/apps/editor/PublicApp.svelte.d.ts

@@ -6,6 +6,7 @@ type $$ComponentProps = {
     onLoginSuccess: () => void;
     app: (AppWithLastVersion & {
         value: any;
+        workspace_id?: string;
     }) | undefined;
     workspace: string | undefined;
 };

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte

@@ -4,7 +4,7 @@ import { Button, Drawer, DrawerContent } from '../../../common';
 import { base } from '../../../../base';
 import FlowModuleScript from '../../../flows/content/FlowModuleScript.svelte';
 import FlowPathViewer from '../../../flows/content/FlowPathViewer.svelte';
-import { emptySchema } from '../../../../utils';
+import { emptySchema, sendUserToast } from '../../../../utils';
 import { getContext, tick, untrack } from 'svelte';
 import { workspaceStore } from '../../../../stores';
 import { createEventDispatcher } from 'svelte';
@@ -13,17 +13,23 @@ import { computeFields } from './utils';
 import { inferArgs, loadSchema } from '../../../../infer';
 import AppRunButton from './AppRunButton.svelte';
 import { getScriptByPath } from '../../../../scripts';
-import { sendUserToast } from '../../../../toast';
 import { autoPlacement } from '@floating-ui/core';
 import { ExternalLink, Eye, GitFork, Pen, RefreshCw, Trash } from 'lucide-svelte';
 import { get } from 'svelte/store';
 import RunButton from '../../../RunButton.svelte';
 import Popover from '../../../meltComponents/Popover.svelte';
+import ScriptEditorDrawer from '../../../flows/content/ScriptEditorDrawer.svelte';
+import FlowEditorDrawer from '../../../flows/content/FlowEditorDrawer.svelte';
+import { ScriptService } from '../../../../gen';
 let { runnable = $bindable(), fields = $bindable(), id, rawApps = false, isLoading = false, onRun = async () => { }, onCancel = async () => { } } = $props();
 const viewerContext = getContext('AppViewerContext');
 let drawerFlowViewer = $state(undefined);
 let flowPath = $state('');
 let notFound = $state(false);
+// Key to force re-mounting of viewer components (bypasses FlowModuleScript cache)
+let refreshKey = $state(0);
+let scriptEditorDrawer = $state(undefined);
+let flowEditorDrawer = $state(undefined);
 const dispatch = createEventDispatcher();
 async function refreshScript(runnable) {
     try {
@@ -74,6 +80,33 @@ async function fork(path) {
         }
     });
 }
+async function openScriptEditor(path) {
+    try {
+        const script = await ScriptService.getScriptByPath({
+            workspace: $workspaceStore,
+            path
+        });
+        scriptEditorDrawer?.openDrawer(script.hash, () => {
+            // Increment refreshKey to force re-mounting of FlowModuleScript (bypasses cache)
+            refreshKey++;
+            // Refresh the schema
+            lastRunnable = undefined;
+            refresh(runnable);
+        });
+    }
+    catch (e) {
+        sendUserToast(`Failed to load script: ${e}`, true);
+    }
+}
+function openFlowEditor(path) {
+    flowEditorDrawer?.openDrawer(path, () => {
+        // Increment refreshKey to force re-mounting of FlowPathViewer (bypasses cache)
+        refreshKey++;
+        // Refresh the schema
+        lastRunnable = undefined;
+        refresh(runnable);
+    });
+}
 let lastRunnable = undefined;
 function refresh(runnable) {
     if (deepEqual(runnable, lastRunnable)) {
@@ -102,6 +135,28 @@ $effect(() => {
 	</DrawerContent>
 </Drawer>
 
+<ScriptEditorDrawer
+	bind:this={scriptEditorDrawer}
+	on:save={() => {
+		// Increment refreshKey to force re-mounting of FlowModuleScript (bypasses cache)
+		refreshKey++
+		// Refresh the schema
+		lastRunnable = undefined
+		refresh(runnable)
+	}}
+/>
+
+<FlowEditorDrawer
+	bind:this={flowEditorDrawer}
+	on:save={() => {
+		// Increment refreshKey to force re-mounting of FlowPathViewer (bypasses cache)
+		refreshKey++
+		// Refresh the schema
+		lastRunnable = undefined
+		refresh(runnable)
+	}}
+/>
+
 <div class="p-2 h-full flex flex-col gap-2">
 	<div class="flex flex-row-reverse w-full gap-2">
 		{#if !rawApps}
@@ -115,7 +170,10 @@ $effect(() => {
 			size="xs"
 			startIcon={{ icon: RefreshCw }}
 			on:click={async () => {
-				sendUserToast('Refreshing inputs')
+				sendUserToast('Getting latest script version at that path')
+				// Increment refreshKey to force re-mounting of viewer components (bypasses cache)
+				refreshKey++
+				lastRunnable = undefined
 				refresh(runnable)
 				if (viewerContext) {
 					viewerContext.stateId.update((x) => x + 1)
@@ -149,10 +207,12 @@ $effect(() => {
 				variant="default"
 				size="xs"
 				startIcon={{ icon: Pen }}
-				endIcon={{ icon: ExternalLink }}
-				target="_blank"
-				href="{base}/flows/edit/{runnable.path}?nodraft=true">Edit</Button
+				on:click={() => {
+					openFlowEditor(runnable.path)
+				}}
 			>
+				Edit
+			</Button>
 			<Button
 				variant="default"
 				size="xs"
@@ -164,6 +224,16 @@ $effect(() => {
 				Details
 			</Button>
 		{:else}
+			<Button
+				size="xs"
+				variant="default"
+				startIcon={{ icon: Pen }}
+				on:click={() => {
+					openScriptEditor(runnable.path)
+				}}
+			>
+				Edit
+			</Button>
 			<Button
 				size="xs"
 				variant="default"
@@ -216,7 +286,7 @@ $effect(() => {
 		/>
 	</div>
 	<div class="w-full grow overflow-y-auto">
-		{#key viewerContext?.stateId ? get(viewerContext.stateId) : 0}
+		{#key `${viewerContext?.stateId ? get(viewerContext.stateId) : 0}-${refreshKey}`}
 			{#if notFound}
 				<div class="text-red-400"
 					>{runnable.runType} not found at {runnable.path} in workspace {$workspaceStore}</div

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { ConnectedAppInput, RowAppInput, RunnableByPath, StaticAppInput, UserAppInput } from '../../inputType';
+import type { ConnectedAppInput, RowAppInput, RunnableByPath, StaticAppInput, UserAppInput, CtxAppInput } from '../../inputType';
 interface Props {
     runnable: RunnableByPath;
-    fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput> | undefined;
+    fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput | CtxAppInput> | undefined;
     id: string;
     rawApps?: boolean;
     isLoading?: boolean;

package/package/components/apps/editor/inlineScriptsPanel/utils.d.ts

@@ -1,5 +1,5 @@
 import type { Schema } from '../../../../common';
-import { type AppInputs, type RunnableByName } from '../../inputType';
+import { type AppInputs, type RunnableByName, type CtxInput } from '../../inputType';
 import type { GridItem, HiddenRunnable } from '../../types';
 export interface AppScriptsList {
     inline: {
@@ -13,6 +13,6 @@ export interface AppScriptsList {
         transformer: boolean;
     }[];
 }
-export declare function computeFields(schema: Schema, defaultUserInput: boolean, fields: AppInputs): {};
+export declare function computeFields(schema: Schema, defaultUserInput: boolean, fields: AppInputs | Record<string, CtxInput | AppInputs[string]>): {};
 export declare function getAppScripts(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): AppScriptsList;
 export declare function createScriptFromInlineScript(id: string, runnable: HiddenRunnable | RunnableByName, workspace: string, appPath: string): Promise<void>;

package/package/components/apps/editor/inlineScriptsPanel/utils.js

@@ -4,6 +4,7 @@ import { isRunnableByName, isRunnableByPath } from '../../inputType';
 import { fieldTypeToTsType, schemaToInputsSpec } from '../../utils';
 // When the schema is loaded, we need to update the inputs spec
 // in order to render the inputs the component panel
+// Note: fields can include CtxInput for raw apps
 export function computeFields(schema, defaultUserInput, fields) {
     let schemaCopy = JSON.parse(JSON.stringify(schema));
     const result = {};
@@ -19,7 +20,15 @@ export function computeFields(schema, defaultUserInput, fields) {
             result[key] = newInput;
         }
         else {
-            if (fieldTypeToTsType(newInput.fieldType) !== fieldTypeToTsType(oldInput.fieldType) ||
+            // Preserve ctx inputs (used in raw apps) - they have { type: 'ctx', ctx: 'property' } syntax
+            if (oldInput.type === 'ctx') {
+                result[key] = oldInput;
+            }
+            else if (oldInput.fieldType === undefined) {
+                // For raw app inputs without fieldType, preserve the input but add the fieldType from schema
+                result[key] = Object.assign({}, oldInput, { fieldType: newInput.fieldType });
+            }
+            else if (fieldTypeToTsType(newInput.fieldType) !== fieldTypeToTsType(oldInput.fieldType) ||
                 newInput.format !== oldInput.format ||
                 newInput.subFieldType !== oldInput.subFieldType ||
                 // An input became a select

package/package/components/apps/inputType.d.ts

@@ -50,6 +50,10 @@ export type EvalInputV2 = {
     onDemandOnly?: boolean;
     allowUserResources?: boolean;
 };
+export type CtxInput = {
+    type: 'ctx';
+    ctx: 'username' | 'email' | 'groups' | 'workspace' | 'author';
+};
 export type RowInput = {
     type: 'row';
     column: string;
@@ -83,7 +87,7 @@ export type RunnableByName = {
 };
 export type Runnable = RunnableByPath | RunnableByName | undefined;
 export type RunnableWithFields = Runnable & {
-    fields?: Record<string, StaticAppInput | UserAppInput>;
+    fields?: Record<string, StaticAppInput | UserAppInput | CtxInput>;
 };
 export type ResultInput = {
     runnable: Runnable;
@@ -166,6 +170,7 @@ export type UploadAppInput = Extract<AppInput, {
 export type UploadS3AppInput = Extract<AppInput, {
     type: 'uploadS3';
 }>;
+export type CtxAppInput = CtxInput;
 export type RichAppInput = AppInput | {
     type: 'oneOf';
     oneOf: string[];

package/package/components/assets/AssetsDropdownButton.svelte

@@ -117,7 +117,7 @@ $effect(() => {
 									!asset.access_type ? 'hover:bg-surface active:opacity-80' : ''
 								)}
 							>
-								{formatAssetAccessType(getAccessType(asset))}
+								{formatAssetAccessType(getAccessType(asset)) ?? '?'}
 							</div>
 						</svelte:fragment>
 						<svelte:fragment slot="content">

package/package/components/assets/AssetsUsageDrawer.svelte

@@ -1,11 +1,17 @@
-<script lang="ts">import { twMerge } from 'tailwind-merge';
-import { Drawer, DrawerContent } from '../common';
+<script lang="ts">import { Drawer, DrawerContent } from '../common';
 import RowIcon from '../common/table/RowIcon.svelte';
 import { formatAssetAccessType, getAssetUsagePageUri } from './lib';
+import Tooltip from '../meltComponents/Tooltip.svelte';
+import Tooltip2 from '../Tooltip.svelte';
+import { twMerge } from 'tailwind-merge';
+import { displayDate } from '../../utils';
+import Alert from '../common/alert/Alert.svelte';
 let usagesDrawerData = $state();
 export function open(data) {
     usagesDrawerData = data;
 }
+let staticUsages = $derived(usagesDrawerData?.usages.filter((u) => u.kind !== 'job') ?? []);
+let runtimeUsages = $derived(usagesDrawerData?.usages.filter((u) => u.kind === 'job') ?? []);
 </script>
 
 <Drawer
@@ -14,30 +20,95 @@ export function open(data) {
 	on:close={() => (usagesDrawerData = undefined)}
 >
 	<DrawerContent title="Asset usage" on:close={() => (usagesDrawerData = undefined)}>
-		<ul class="flex flex-col border rounded-md divide-y">
-			{#each usagesDrawerData?.usages ?? [] as u}
-				<li>
-					<a
-						href={getAssetUsagePageUri(u)}
-						aria-label={`${u.kind}/${u.path}`}
-						class="text-xs text-primary font-normal flex items-center py-3 px-4 gap-3 hover:bg-surface-hover cursor-pointer"
-					>
-						<RowIcon kind={u.kind} />
-						<div class="flex flex-col justify-center flex-1">
-							<span class="font-semibold text-emphasis">{u.path}</span>
-							<span class="text-2xs text-secondary">{u.kind}</span>
-						</div>
-						<div
-							class={twMerge(
-								'text-xs font-normal border text-primary w-10 p-1 text-center rounded-md',
-								!u.access_type ? 'hover:bg-surface active:opacity-80' : ''
-							)}
-						>
-							{formatAssetAccessType(u.access_type)}
-						</div>
-					</a>
-				</li>
-			{/each}
-		</ul>
+		<div class="flex flex-col gap-6">
+			<!-- Static/Declared Usages -->
+			<section>
+				<h3 class="text-sm font-semibold mb-2">
+					Scripts & Flows
+					<Tooltip2>Assets detected statically during code analysis</Tooltip2>
+				</h3>
+				{@render list(staticUsages)}
+			</section>
+
+			<!-- Runtime Job Usage -->
+			<section>
+				<h3 class="text-sm font-semibold mb-2">
+					Latest Job Executions
+					<Tooltip2>
+						Assets can be detected during job execution either via Windmill's SDK (Data tables, S3
+						objects ...) or by being passed as inputs to a script or flow (arbitrary resources).
+					</Tooltip2>
+				</h3>
+				<Alert
+					type="info"
+					class="mb-2"
+					title="Assets are processed asynchronously after job completion"
+				>
+					It may take a few minutes for jobs to show up here.
+				</Alert>
+
+				{@render list(runtimeUsages)}
+			</section>
+		</div>
 	</DrawerContent>
 </Drawer>
+
+{#snippet badge(text: string | undefined, tooltip?: string)}
+	{#if text}
+		<Tooltip disablePopup={!tooltip}>
+			<div
+				class={twMerge(
+					'text-xs bg-surface font-normal border text-primary min-w-12 p-1 text-center rounded-md'
+				)}
+			>
+				{text}
+			</div>
+			<svelte:fragment slot="text">
+				{#if tooltip}
+					{tooltip}
+				{/if}
+			</svelte:fragment>
+		</Tooltip>
+	{/if}
+{/snippet}
+
+{#snippet list(items: AssetUsage[])}
+	<ul class="flex flex-col border rounded-md divide-y">
+		{#each items as u}
+			{@const accessType = formatAssetAccessType(u.access_type)}
+
+			<li>
+				<a
+					href={getAssetUsagePageUri(u)}
+					aria-label={`${u.kind}/${u.path}`}
+					class="text-xs text-primary font-normal flex items-center py-3 px-4 gap-2 hover:bg-surface-hover cursor-pointer"
+				>
+					<RowIcon
+						kind={!u.metadata?.job_kind
+							? u.kind != 'job'
+								? u.kind
+								: 'script'
+							: ((
+									{
+										script: 'script',
+										preview: 'script',
+										flow: 'flow',
+										flowpreview: 'flow',
+										singlestepflow: 'flow',
+										flownode: 'flow'
+									} as const
+								)[u.metadata.job_kind] ?? 'script')}
+					/>
+					<div class="flex flex-col justify-center flex-1">
+						<span class="font-semibold text-emphasis">
+							{u.kind == 'job' ? (u.metadata?.runnable_path ?? 'Unknown job') : u.path}
+						</span>
+						<span class="text-2xs text-secondary">{u.kind == 'job' ? u.path : u.kind}</span>
+					</div>
+					{@render badge(displayDate(u.created_at), 'Asset detection time')}
+					{@render badge(accessType)}
+				</a>
+			</li>
+		{/each}
+	</ul>
+{/snippet}

package/package/components/assets/AssetsUsageDrawer.svelte.d.ts

@@ -1,11 +1,10 @@
-import type { AssetUsageAccessType, AssetUsageKind } from '../../gen';
+import type { AssetKind } from '../../gen';
+import { type AssetUsage } from './lib';
 declare const AssetsUsageDrawer: import("svelte").Component<Record<string, never>, {
     open: (data: {
-        usages: {
-            path: string;
-            kind: AssetUsageKind;
-            access_type?: AssetUsageAccessType;
-        }[];
+        path: string;
+        kind: AssetKind;
+        usages: AssetUsage[];
     } | undefined) => void;
 }, "">;
 type AssetsUsageDrawer = ReturnType<typeof AssetsUsageDrawer>;