windmill-components 1.37.0 → 1.46.1

package/components/{ProgressBar.svelte.d.ts → progressBar/ProgressBar.svelte.d.ts}

@@ -1,8 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
+import { type ProgressStep } from './model';
 declare const __propDef: {
     props: {
-        i?: number | undefined;
-        steps?: number | undefined;
+        [x: string]: any;
+        steps: ProgressStep[];
+        error?: boolean | undefined;
+        duration?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/progressBar/ProgressBarGeneralPart.svelte

@@ -0,0 +1,22 @@
+<script>import { getContext } from 'svelte';
+import { getTween } from './model';
+export let step;
+export let index;
+export let duration = 200;
+const state = getContext('state');
+let progress = getTween(0, duration);
+$: finishedAndNotLast = $state.finished && $state.length - 1 !== index;
+$: if (finishedAndNotLast || $state.index > index)
+    progress = getTween(100, duration);
+$: if ($state.finished || step.isDone) {
+    if (index > $state.index) {
+        state.update((prev) => ({ ...prev, index }));
+    }
+    progress.set(100);
+}
+</script>
+
+<div
+	class="absolute left-0 bottom-0 h-full {$state.error ? 'bg-red-400' : 'bg-blue-400'}"
+	style="width: {$progress}%"
+/>

package/components/progressBar/ProgressBarGeneralPart.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import { type GeneralState } from './model';
+declare const __propDef: {
+    props: {
+        step: GeneralState;
+        index: number;
+        duration?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ProgressBarGeneralPartProps = typeof __propDef.props;
+export declare type ProgressBarGeneralPartEvents = typeof __propDef.events;
+export declare type ProgressBarGeneralPartSlots = typeof __propDef.slots;
+export default class ProgressBarGeneralPart extends SvelteComponentTyped<ProgressBarGeneralPartProps, ProgressBarGeneralPartEvents, ProgressBarGeneralPartSlots> {
+}
+export {};

package/components/progressBar/ProgressBarLoopAccessor.svelte

@@ -0,0 +1,14 @@
+<script>import { getContext } from 'svelte';
+export let progress;
+export let index;
+export let length;
+const state = getContext('state');
+$: isLast = index === length - 1;
+</script>
+
+<div
+	class="h-full absolute left-0 bottom-0 overflow-hidden {$state.error
+		? 'bg-red-400'
+		: 'bg-blue-400'}"
+	style="width: {$progress}%; opacity: {isLast ? 100 : 100 / length}%"
+/>

package/components/progressBar/ProgressBarLoopAccessor.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Tweened } from 'svelte/motion';
+declare const __propDef: {
+    props: {
+        progress: Tweened<number>;
+        index: number;
+        length: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ProgressBarLoopAccessorProps = typeof __propDef.props;
+export declare type ProgressBarLoopAccessorEvents = typeof __propDef.events;
+export declare type ProgressBarLoopAccessorSlots = typeof __propDef.slots;
+export default class ProgressBarLoopAccessor extends SvelteComponentTyped<ProgressBarLoopAccessorProps, ProgressBarLoopAccessorEvents, ProgressBarLoopAccessorSlots> {
+}
+export {};

package/components/progressBar/ProgressBarLoopPart.svelte

@@ -0,0 +1,34 @@
+<script>import { getContext } from 'svelte';
+import { get } from 'svelte/store';
+import ProgressBarLoopAccessor from './ProgressBarLoopAccessor.svelte';
+import { getTween } from './model';
+export let step;
+export let index;
+export let duration = 200;
+const state = getContext('state');
+let progresses = getTweenArray();
+$: finishedAndNotLast = $state.finished && $state.length - 1 !== index;
+$: if (!$state.error && ($state.index > index || finishedAndNotLast)) {
+    progresses = getTweenArray(100);
+}
+$: if (!$state.error && step.indexChanged) {
+    progresses.filter((p, i) => get(p) === 0 && i < step.index).forEach((p) => p.set(100));
+    progresses.forEach((p, i) => {
+        if (get(p) === 0 && i < step.index) {
+            p.set(100);
+            if (index > $state.index) {
+                state.update((prev) => ({ ...prev, index }));
+            }
+        }
+    });
+}
+$: if (!$state.error && $state.finished)
+    progresses.forEach((p) => p.set(100));
+function getTweenArray(initial = 0) {
+    return Array.from({ length: step.length }, () => getTween(initial, duration));
+}
+</script>
+
+{#each progresses as progress, i}
+	<ProgressBarLoopAccessor {progress} index={i} length={step.length} />
+{/each}

package/components/progressBar/ProgressBarLoopPart.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import { type LoopState } from './model';
+declare const __propDef: {
+    props: {
+        step: LoopState;
+        index: number;
+        duration?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ProgressBarLoopPartProps = typeof __propDef.props;
+export declare type ProgressBarLoopPartEvents = typeof __propDef.events;
+export declare type ProgressBarLoopPartSlots = typeof __propDef.slots;
+export default class ProgressBarLoopPart extends SvelteComponentTyped<ProgressBarLoopPartProps, ProgressBarLoopPartEvents, ProgressBarLoopPartSlots> {
+}
+export {};

package/components/progressBar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ProgressBar } from './ProgressBar.svelte';
+export * from './model';

package/components/progressBar/index.js

@@ -0,0 +1,2 @@
+export { default as ProgressBar } from './ProgressBar.svelte';
+export * from './model';

package/components/progressBar/model.d.ts

@@ -0,0 +1,32 @@
+export interface ProgressStateStoreValue {
+    length: number;
+    index: number;
+    finished: boolean;
+    error: boolean;
+}
+export declare type StepKind = 'general' | 'loop';
+declare type Step<T extends StepKind> = {
+    type: T;
+    isDone: boolean;
+};
+export declare type GeneralStep = Step<'general'>;
+export declare type LoopStep = Step<'loop'> & {
+    index: number;
+    length: number;
+};
+export declare type ProgressStep = GeneralStep | LoopStep;
+export declare function isLoopStep(step: ProgressStep | undefined): step is LoopStep;
+declare type State<T extends StepKind> = {
+    type: T;
+    isDone: boolean;
+    isDoneChanged: boolean;
+};
+export declare type GeneralState = State<'general'>;
+export declare type LoopState = LoopStep & {
+    index: number;
+    indexChanged: boolean;
+};
+export declare type ProgressState = GeneralState | LoopState;
+export declare function isLoopState(state: ProgressState | undefined): state is LoopState;
+export declare function getTween(initialValue?: number, duration?: number): import("svelte/motion").Tweened<number>;
+export {};

package/components/progressBar/model.js

@@ -0,0 +1,14 @@
+import { tweened } from 'svelte/motion';
+import { cubicOut } from 'svelte/easing';
+export function isLoopStep(step) {
+    return step?.type === 'loop';
+}
+export function isLoopState(state) {
+    return state?.type === 'loop';
+}
+export function getTween(initialValue = 0, duration = 200) {
+    return tweened(initialValue, {
+        duration,
+        easing: cubicOut
+    });
+}

package/components/propertyPicker/ObjectViewer.svelte

@@ -1,6 +1,6 @@
 <script>import { truncate } from '../../utils';
 import { createEventDispatcher } from 'svelte';
-import { NEVER_TESTED_THIS_FAR } from '../flows/flowStateUtils';
+import { NEVER_TESTED_THIS_FAR } from '../flows/utils';
 import { getTypeAsString } from '../flows/utils';
 import { computeKey } from './utils';
 import WarningMessage from './WarningMessage.svelte';
@@ -11,6 +11,7 @@ export let currentPath = '';
 export let pureViewer = false;
 export let collapsed = level == 3 || Array.isArray(json);
 export let rawKey = false;
+export let topBrackets = false;
 const collapsedSymbol = '...';
 let keys;
 let isArray;
@@ -36,10 +37,14 @@ function selectProp(key) {
 		{#if level != 0}
 			<span class="cursor-pointer hover:bg-gray-200 px-1 rounded" on:click={collapse}> (-) </span>
 		{/if}
+		{#if level == 0 && topBrackets}<span class="h-0">{openBracket}</span>{/if}
 		<ul class="w-full">
 			{#each keys as key, index}
 				<li class="pt-1">
-					<button on:click={() => selectProp(key)} class="key rounded px-1 hover:bg-blue-100">
+					<button
+						on:click={() => selectProp(key)}
+						class="key {pureViewer ? 'cursor-auto' : ''} font-normal rounded px-1 hover:bg-blue-100"
+					>
 						{!isArray ? key : index}:
 					</button>
 
@@ -54,7 +59,9 @@ function selectProp(key) {
 						/>
 					{:else}
 						<button
-							class="val rounded px-1 hover:bg-blue-100 {getTypeAsString(json[key])}"
+							class="val {pureViewer
+								? 'cursor-auto'
+								: ''} rounded px-1 hover:bg-blue-100 {getTypeAsString(json[key])}"
 							on:click={() => selectProp(key)}
 						>
 							{#if json[key] === NEVER_TESTED_THIS_FAR}
@@ -69,6 +76,7 @@ function selectProp(key) {
 				</li>
 			{/each}
 		</ul>
+		{#if level == 0 && topBrackets}<span class="h-0">{closeBracket}</span>{/if}
 	</span>
 	<span class="cursor-pointer hover:bg-gray-200" class:hidden={!collapsed} on:click={collapse}>
 		{openBracket}{collapsedSymbol}{closeBracket}
@@ -85,33 +93,30 @@ function selectProp(key) {
 		list-style: none;
 		padding-left: 1rem;
 		border-left: 1px dotted lightgray;
-		--tw-text-opacity: 1;
-		color: rgb(0 0 0 / var(--tw-text-opacity));
 		font-size: 0.875rem;
 		line-height: 1.25rem;
 	}
 
 	.val {
-		--tw-text-opacity: 1;
-		color: rgb(0 0 0 / var(--tw-text-opacity));
-}
+		/* @apply font-black; */
+	}
 	.val.undefined {
 		--tw-text-opacity: 1;
-		color: rgb(240 82 82 / var(--tw-text-opacity));
+		color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 	.val.null {
 		--tw-text-opacity: 1;
-		color: rgb(240 82 82 / var(--tw-text-opacity));
+		color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 	.val.string {
 		--tw-text-opacity: 1;
-		color: rgb(5 122 85 / var(--tw-text-opacity));
+		color: rgb(22 163 74 / var(--tw-text-opacity));
 }
 	.val.number {
 		--tw-text-opacity: 1;
-		color: rgb(208 56 1 / var(--tw-text-opacity));
+		color: rgb(234 88 12 / var(--tw-text-opacity));
 }
 	.val.boolean {
 		--tw-text-opacity: 1;
-		color: rgb(28 100 242 / var(--tw-text-opacity));
+		color: rgb(37 99 235 / var(--tw-text-opacity));
 }</style>

package/components/propertyPicker/ObjectViewer.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         pureViewer?: boolean | undefined;
         collapsed?: boolean | undefined;
         rawKey?: boolean | undefined;
+        topBrackets?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;

package/components/propertyPicker/PropPicker.svelte

@@ -1,14 +1,15 @@
 <script>import { ResourceService, VariableService } from '../../gen';
 import { workspaceStore } from '../../stores';
-import { faClose } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
-import Icon from 'svelte-awesome';
-import { Button } from '../common';
+import { Badge, Button } from '../common';
 import { createEventDispatcher } from 'svelte';
 import ObjectViewer from './ObjectViewer.svelte';
 import { keepByKey } from './utils';
-export let pickableProperties = {};
+export let pickableProperties;
 export let displayContext = true;
+export let notSelectable;
+export let error = false;
+$: previousId = pickableProperties?.previousId;
 let variables = {};
 let resources = {};
 let displayVariable = false;
@@ -17,8 +18,14 @@ const dispatch = createEventDispatcher();
 const EMPTY_STRING = '';
 let search = '';
 const { propPickerConfig, clearFocus } = getContext('PropPickerWrapper');
-$: propsFiltered =
-    search === EMPTY_STRING ? pickableProperties : keepByKey(pickableProperties, search);
+$: flowInputsFiltered =
+    search === EMPTY_STRING
+        ? pickableProperties.flow_input
+        : keepByKey(pickableProperties.flow_input, search);
+$: resultByIdFiltered =
+    search === EMPTY_STRING
+        ? pickableProperties.priorIds
+        : keepByKey(pickableProperties.priorIds, search);
 async function loadVariables() {
     variables = Object.fromEntries((await VariableService.listVariable({
         workspace: $workspaceStore ?? ''
@@ -31,40 +38,79 @@ async function loadResources() {
 }
 </script>
 
-<div class="px-2 pt-2">
-	<input
-		type="text"
-		bind:value={search}
-		class="bg-gray-50 mt-1 border border-gray-300 text-gray-900 text-sm rounded-lg block px-2 mb-2 w-full"
-		placeholder="Search prop..."
-	/>
+{#if !notSelectable}
+	<div class="flex flex-row space-x-1">
+		{#if $propPickerConfig}
+			<Badge color="blue">
+				{`Selected: ${$propPickerConfig?.propName}`}
+			</Badge>
+			<Badge color="blue">
+				{`Mode: ${$propPickerConfig?.insertionMode}`}
+			</Badge>
+		{:else}
+			<Badge>&leftarrow; Select a step input</Badge>
+		{/if}
+	</div>
+{/if}
+<input
+	type="text"
+	bind:value={search}
+	class="bg-gray-50 mt-1 border border-gray-300 text-gray-900 text-sm rounded-lg block px-2 mb-2 w-full"
+	placeholder="Search prop..."
+/>
+<div class:bg-gray-100={!$propPickerConfig && !notSelectable}>
 	<div class="flex justify-between items-center space-x-1">
-		<span class="font-bold text-sm">Step Context</span>
-		<div class="flex space-x-2 items-center">
-			{#if $propPickerConfig}
-				<span
-					class="flex items-center bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded dark:bg-green-200 dark:text-green-900"
-				>
-					{`Selected: ${$propPickerConfig?.propName}`}
-				</span>
-				<span
-					class="flex items-center bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded dark:bg-green-200 dark:text-green-900"
-				>
-					{`Mode: ${$propPickerConfig?.insertionMode}`}
-				</span>
-				<button
-					class="border px-2 py-1 text-xs rounded-md flex items-center hover:bg-gray-50 hover:text-gray-900"
-					on:click={() => clearFocus()}
-				>
-					<Icon data={faClose} class="mr-2" scale={0.8} />
-					Deselect
-				</button>
-			{/if}
-		</div>
+		<span class="font-bold text-sm">Flow Input</span>
+		<div class="flex space-x-2 items-center" />
 	</div>
 	<div class="overflow-y-auto mb-2">
-		<ObjectViewer json={propsFiltered} on:select />
+		<ObjectViewer
+			pureViewer={!$propPickerConfig}
+			json={flowInputsFiltered}
+			on:select={(e) => {
+				dispatch('select', `flow_input.${e.detail}`)
+			}}
+		/>
 	</div>
+	{#if error}
+		<span class="font-bold text-sm">Error</span>
+		<div class="overflow-y-auto mb-2">
+			<ObjectViewer
+				pureViewer={!$propPickerConfig}
+				json={{ previous_result: { error: 'The error to handle' } }}
+				on:select
+			/>
+		</div>
+	{:else}
+		{#if previousId}
+			<span class="font-bold text-sm">Previous Result</span>
+			<div class="overflow-y-auto mb-2">
+				<ObjectViewer
+					pureViewer={!$propPickerConfig}
+					json={Object.fromEntries(
+						Object.entries(resultByIdFiltered).filter(([k, v]) => k == previousId)
+					)}
+					on:select={(e) => {
+						dispatch('select', `results.${e.detail}`)
+					}}
+				/>
+			</div>
+		{/if}
+		{#if Object.keys(pickableProperties.priorIds).length > 0}
+			<span class="font-bold text-sm">All Results</span>
+			<div class="overflow-y-auto mb-2">
+				<ObjectViewer
+					pureViewer={!$propPickerConfig}
+					collapsed={true}
+					json={resultByIdFiltered}
+					on:select={(e) => {
+						dispatch('select', `results.${e.detail}`)
+					}}
+				/>
+			</div>
+		{/if}
+	{/if}
+
 	{#if displayContext}
 		<span class="font-bold text-sm">Variables </span>
 		<div class="overflow-y-auto mb-2">
@@ -77,18 +123,18 @@ async function loadResources() {
 					}}>(-)</Button
 				>
 				<ObjectViewer
+					pureViewer={!$propPickerConfig}
 					rawKey={true}
 					json={variables}
 					on:select={(e) => dispatch('select', `variable('${e.detail}')`)}
 				/>
 			{:else}
-				<Button
-					color="light"
-					size="xs"
+				<button
+					class="key font-normal rounded px-1 hover:bg-blue-100 !p-0"
 					on:click={async () => {
 						await loadVariables()
 						displayVariable = true
-					}}>{'{...}'}</Button
+					}}>{'{...}'}</button
 				>
 			{/if}
 		</div>
@@ -103,18 +149,18 @@ async function loadResources() {
 					}}>(-)</Button
 				>
 				<ObjectViewer
+					pureViewer={!$propPickerConfig}
 					rawKey={true}
 					json={resources}
 					on:select={(e) => dispatch('select', `resource('${e.detail}')`)}
 				/>
 			{:else}
-				<Button
-					color="light"
-					size="xs"
+				<button
+					class="key font-normal rounded px-1 hover:bg-blue-100 !p-0"
 					on:click={async () => {
 						await loadResources()
 						displayResources = true
-					}}>{'{...}'}</Button
+					}}>{'{...}'}</button
 				>
 			{/if}
 		</div>

package/components/propertyPicker/PropPicker.svelte.d.ts

@@ -1,8 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
+import type { PickableProperties } from '../flows/previousResults';
 declare const __propDef: {
     props: {
-        pickableProperties?: Object | undefined;
+        pickableProperties: PickableProperties;
         displayContext?: boolean | undefined;
+        notSelectable: boolean;
+        error?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;

package/components/propertyPicker/PropPickerResult.svelte

@@ -0,0 +1,12 @@
+<script>import { createEventDispatcher } from 'svelte';
+import ObjectViewer from './ObjectViewer.svelte';
+export let result;
+const dispatch = createEventDispatcher();
+</script>
+
+<div class="w-full">
+	<span class="font-bold text-sm">Result</span>
+	<div class="overflow-y-auto mb-2 w-full">
+		<ObjectViewer json={{ result }} on:select />
+	</div>
+</div>

package/components/propertyPicker/PropPickerResult.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        result: any;
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PropPickerResultProps = typeof __propDef.props;
+export declare type PropPickerResultEvents = typeof __propDef.events;
+export declare type PropPickerResultSlots = typeof __propDef.slots;
+export default class PropPickerResult extends SvelteComponentTyped<PropPickerResultProps, PropPickerResultEvents, PropPickerResultSlots> {
+}
+export {};

package/components/propertyPicker/utils.d.ts

@@ -1,3 +1,3 @@
-export declare function keepByKey(json: Object, key: string): Object;
+export declare function keepByKey(json: Object | undefined, key: string): Object;
 export declare function getTypeAsString(arg: any): string;
 export declare function computeKey(key: string, isArray: boolean, currentPath?: string): string;

package/components/propertyPicker/utils.js

@@ -16,7 +16,7 @@ function diff(target, source) {
         return target;
     }
     const result = {};
-    Object.keys(target).forEach((key) => {
+    Object.keys(target ?? {}).forEach((key) => {
         if (typeof source[key] === 'object') {
             const difference = diff(target[key], source[key]);
             if (Object.keys(difference).length > 0) {
@@ -30,6 +30,9 @@ function diff(target, source) {
     return result;
 }
 export function keepByKey(json, key) {
+    if (!json) {
+        return {};
+    }
     return diff(json, filterByKey(json, key));
 }
 export function getTypeAsString(arg) {

package/components/{script_editor → scriptEditor}/LogPanel.svelte

@@ -14,8 +14,9 @@ import { Highlight } from 'svelte-highlight';
 import { json } from 'svelte-highlight/languages';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
 import HighlightCode from '../HighlightCode.svelte';
-import { VSplitPane } from 'svelte-split-pane';
 import LogViewer from '../LogViewer.svelte';
+import { Pane } from 'svelte-splitpanes';
+import SplitPanesWrapper from '../splitPanes/SplitPanesWrapper.svelte';
 export let path;
 export let lang;
 export let previewIsLoading = false;
@@ -42,10 +43,11 @@ function closeDrawer() {
 		{#if drawerContent?.mode === 'json'}
 			<Highlight language={json} code={JSON.stringify(drawerContent.content, null, 4)} />
 		{:else if drawerContent?.mode === 'plain'}
-			<pre class="overflow-x-auto break-all relative h-full m-2 text-xs bg-white shadow-inner p-2">
+			<pre
+				class="overflow-x-auto break-words relative h-full m-2 text-xs bg-white shadow-inner p-2">
 				{drawerContent?.content}
 			</pre>
-		{:else if drawerContent?.mode === 'deno' || drawerContent?.mode === 'python3' || drawerContent?.mode === 'go'}
+		{:else if drawerContent?.mode === 'deno' || drawerContent?.mode === 'python3' || drawerContent?.mode === 'go' || drawerContent?.mode === 'bash'}
 			<HighlightCode language={drawerContent?.mode} code={drawerContent?.content} />
 		{/if}
 	</DrawerContent>
@@ -57,23 +59,28 @@ function closeDrawer() {
 	<Tab value="last_save"><span class="text-xs">Last save</span></Tab>
 
 	<svelte:fragment slot="content">
-		<TabContent value="logs" class="h-full w-full relative">
-			<VSplitPane topPanelSize="50%" downPanelSize="50%">
-				<top slot="top">
+		<!--
+			TabContent would wrap it in an extra div which is undesirable in this situation
+			because SplitPanesWrapper uses the parent element as a reference point.
+		-->
+		{#if selectedTab === 'logs'}
+			<SplitPanesWrapper horizontal>
+				<Pane class="!duration-[0ms]">
 					<LogViewer content={previewJob?.logs} isLoading={previewIsLoading} />
-				</top>
-				<down slot="down">
-					<pre class="overflow-x-auto break-all relative h-full p-2 text-sm"
-						>{#if previewJob != undefined && 'result' in previewJob && previewJob.result != undefined}<DisplayResult
-								result={previewJob.result}
-							/>
-						{:else if previewIsLoading}Waiting for result...
-						{:else}Test to see the result here
-						{/if}
-        </pre>
-				</down>
-			</VSplitPane>
-		</TabContent>
+				</Pane>
+				<Pane class="!duration-[0ms]">
+					{#if previewJob != undefined && 'result' in previewJob && previewJob.result != undefined}
+						<pre class="overflow-x-auto break-words relative h-full p-2"
+							><DisplayResult result={previewJob.result} />
+						</pre>
+					{:else}
+						<div class="text-sm text-gray-600 p-2">
+							{previewIsLoading ? 'Waiting for result...' : 'Test to see the result here'}
+						</div>
+					{/if}
+				</Pane>
+			</SplitPanesWrapper>
+		{/if}
 		<TabContent value="history" class="p-2">
 			<TableCustom>
 				<tr slot="header-row">
@@ -151,7 +158,10 @@ function closeDrawer() {
 		</TabContent>
 		<TabContent value="last_save" class="p-2">
 			{#if lastSave}
-				<h2>last local save for path {path}</h2>
+				<div class="text-sm font-bold text-gray-600">
+					Last local save for path
+					<span class="italic">{path}</span>
+				</div>
 				<HighlightCode language={lang} code={lastSave} />
 			{:else}
 				No local save