windmill-components 1.558.3 → 1.596.0

package/package/components/runs/RunsFilter.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { JobTriggerKind } from '../../gen';
 interface Props {
     path?: string | null;
     label?: string | null;
@@ -5,10 +6,11 @@ interface Props {
     worker?: string | null;
     tag?: string | null;
     success?: 'running' | 'waiting' | 'suspended' | 'queued' | 'success' | 'failure' | undefined;
-    isSkipped?: boolean | undefined;
+    showSkipped?: boolean | undefined;
     argFilter: string;
     argError: string;
     resultFilter: string;
+    jobTriggerKind: JobTriggerKind | undefined;
     resultError: string;
     jobKindsCat: string;
     user?: string | null;
@@ -42,6 +44,6 @@ declare const RunsFilter: $$__sveltets_2_IsomorphicComponent<Props, {
     successChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "path" | "user" | "folder" | "tag" | "success" | "worker" | "label" | "isSkipped" | "argFilter" | "resultFilter" | "schedulePath" | "jobKindsCat" | "concurrencyKey" | "argError" | "resultError" | "allWorkspaces" | "allowWildcards" | "filterBy">;
+}, {}, {}, "path" | "user" | "folder" | "tag" | "success" | "worker" | "label" | "showSkipped" | "argFilter" | "resultFilter" | "jobTriggerKind" | "schedulePath" | "jobKindsCat" | "concurrencyKey" | "argError" | "resultError" | "allWorkspaces" | "allowWildcards" | "filterBy">;
 type RunsFilter = InstanceType<typeof RunsFilter>;
 export default RunsFilter;

package/package/components/runs/RunsQueue.svelte

@@ -13,7 +13,7 @@ let { queue_count = undefined, suspended_count = undefined, success, small = fal
 					<Bot size={16} />
 					{#if queue_count && ($queue_count ?? 0) > 0}
 						<div
-							class="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 bg-yellow-500 rounded-full text-white text-xs h-4 min-w-4"
+							class="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 bg-yellow-500 rounded-full text-white text-2xs h-4 min-w-4 px-1"
 						>
 							{queue_count ? ($queue_count ?? 0).toFixed(0) : '...'}
 						</div>
@@ -30,12 +30,17 @@ let { queue_count = undefined, suspended_count = undefined, success, small = fal
 	{/if}
 
 	{#if small}
-		<Popover contentClasses="p-4" openOnHover debounceDelay={100}>
+		<Popover
+			contentClasses="p-4"
+			openOnHover
+			debounceDelay={100}
+			disablePopup={!suspended_count || ($suspended_count ?? 0) <= 0}
+		>
 			{#snippet trigger()}
 				<div class="relative">
 					<Hourglass size={16} />
 					<div
-						class="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 bg-surface-secondary-inverse rounded-full text-primary-inverse text-xs h-4 min-w-4"
+						class="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 bg-surface-secondary-inverse rounded-full text-primary-inverse text-2xs h-4 min-w-4 px-1"
 					>
 						{suspended_count ? ($suspended_count ?? 0).toFixed(0) : '...'}
 					</div>
@@ -55,13 +60,16 @@ let { queue_count = undefined, suspended_count = undefined, success, small = fal
 		{#snippet tooltip()}
 			Jobs waiting for a worker being available to be executed
 		{/snippet}
-		<div
+		<button
 			class={queue_count && ($queue_count ?? 0) > 0
-				? 'bg-yellow-500 text-white rounded-full w-6 h-6 flex center-center'
-				: ''}>{queue_count ? ($queue_count ?? 0).toFixed(0) : '...'}</div
+				? 'bg-yellow-500 text-white rounded-full min-w-6 h-6 flex center-center'
+				: ''}
+			onclick={() => onJobsWaiting?.()}
 		>
+			{queue_count ? ($queue_count ?? 0).toFixed(0) : '...'}
+		</button>
 		<div class="truncate text-2xs !text-secondary mt-0.5">
-			<Button size="xs2" color="light" on:click={() => onJobsWaiting?.()}>
+			<Button variant="subtle" unifiedSize="md" on:click={() => onJobsWaiting?.()}>
 				{#if success == 'waiting'}
 					<div class="flex flex-row items-center gap-1">
 						Reset filter
@@ -83,11 +91,11 @@ let { queue_count = undefined, suspended_count = undefined, success, small = fal
 			{/snippet}
 			<div
 				class={suspended_count && ($suspended_count ?? 0) > 0
-					? 'bg-surface-secondary-inverse text-primary-inverse rounded-full w-6 h-6 flex center-center'
+					? 'bg-surface-secondary-inverse text-primary-inverse rounded-full min-w-6 h-6 flex center-center'
 					: ''}>{suspended_count ? ($suspended_count ?? 0).toFixed(0) : '...'}</div
 			>
 			<div class="truncate text-2xs !text-secondary">
-				<Button size="xs2" color="light" on:click={() => onJobsSuspended?.()}>
+				<Button unifiedSize="md" variant="subtle" on:click={() => onJobsSuspended?.()}>
 					{#if success == 'suspended'}
 						<div class="flex flex-row items-center gap-1">
 							Reset filter

package/package/components/runs/RunsTable.svelte

@@ -6,9 +6,9 @@ import { AlertTriangle } from 'lucide-svelte';
 import Popover from '../Popover.svelte';
 import { workspaceStore } from '../../stores';
 import './runs-grid.css';
-let { jobs = undefined, externalJobs = [], omittedObscuredJobs, showExternalJobs = false, selectionMode = false, selectedIds = $bindable([]), selectedWorkspace = $bindable(undefined), activeLabel = null, lastFetchWentToEnd = $bindable(false) } = $props();
+let { jobs = undefined, externalJobs = [], omittedObscuredJobs, showExternalJobs = false, selectionMode = false, selectedIds = $bindable([]), selectedWorkspace = $bindable(undefined), activeLabel = null, lastFetchWentToEnd = $bindable(false), perPage = 1000 } = $props();
 function getTime(job) {
-    return job['started_at'] ?? job['scheduled_for'] ?? job['created_at'];
+    return job['completed_at'] ?? job['started_at'] ?? job['scheduled_for'] ?? job['created_at'];
 }
 function groupJobsByDay(jobs) {
     const groupedJobs = {};
@@ -62,7 +62,7 @@ function flattenJobs(groupedJobs) {
 let tableHeight = $state(0);
 let headerHeight = $state(0);
 let containerWidth = $state(0);
-// const MAX_ITEMS = 1000
+// const MAX_ITEMS = perPage
 /*
 function infiniteHandler({ detail: { loaded, error, complete } }) {
     try {
@@ -83,7 +83,7 @@ function jobCountString(jobCount, lastFetchWentToEnd) {
         return '';
     }
     const jc = jobCount;
-    const isTruncated = jc >= 1000 && !lastFetchWentToEnd;
+    const isTruncated = jc >= perPage && !lastFetchWentToEnd;
     return `${jc}${isTruncated ? '+' : ''} job${jc != 1 ? 's' : ''}`;
 }
 function computeHeight() {
@@ -209,7 +209,7 @@ const showTag = $derived(containerWidth > 700);
 						{#if jobOrDate}
 							{#if jobOrDate?.type === 'date'}
 								<div
-									class="bg-surface-secondary py-2 border-b font-semibold text-xs pl-2 h-[42px] flex items-center"
+									class="bg-surface-secondary py-2 font-semibold text-xs pl-2 h-[42px] flex items-center"
 								>
 									{jobOrDate.date}
 								</div>
@@ -272,13 +272,15 @@ const showTag = $derived(containerWidth > 700);
 			{/snippet}
 			{#snippet footer()}
 				<div
-					>{#if !lastFetchWentToEnd && jobs && jobs.length >= 1000}
+					>{#if !lastFetchWentToEnd && jobs && jobs.length >= perPage}
 						<button
-							class="text-xs text-blue-600 text-center w-full pb-2"
+							class="text-xs text-accent text-center w-full pb-2"
 							onclick={() => {
 								dispatch('loadExtra')
-							}}>Load next 1000 jobs</button
+							}}
 						>
+							Load next {perPage} jobs
+						</button>
 					{/if}</div
 				>
 			{/snippet}

package/package/components/runs/RunsTable.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Job } from '../../gen';
-import type { RunsSelectionMode } from './RunsBatchActionsDropdown.svelte';
 import './runs-grid.css';
+import type { RunsSelectionMode } from '../../utils';
 interface Props {
     jobs?: Job[] | undefined;
     externalJobs?: Job[];
@@ -11,6 +11,7 @@ interface Props {
     selectedWorkspace?: string | undefined;
     activeLabel?: string | null;
     lastFetchWentToEnd?: boolean;
+    perPage?: number;
 }
 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/schema/AddPropertyForm.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { createEventDispatcher } from 'svelte';
 import { Button } from '../common';
 import { Plus } from 'lucide-svelte';
+import TextInput from '../text_input/TextInput.svelte';
 let name = '';
 const dispatch = createEventDispatcher();
 function addField() {
@@ -9,19 +10,18 @@ function addField() {
 }
 </script>
 
-<div class="flex flex-row gap-2">
-	<input
-		bind:value={name}
-		placeholder="Field name"
-		on:keydown={(event) => {
-			if (event.key === 'Enter') {
-				addField()
+<div class="flex gap-2 whitespace-nowrap">
+	<TextInput
+		inputProps={{
+			placeholder: 'Field name',
+			onkeydown: (event) => {
+				if (event.key === 'Enter') addField()
 			}
 		}}
+		bind:value={name}
 	/>
 	<Button
-		variant="contained"
-		color="dark"
+		variant="accent"
 		size="xs"
 		startIcon={{ icon: Plus }}
 		id="flow-editor-add-property"

package/package/components/schema/AddPropertyFormV2.svelte

@@ -27,8 +27,7 @@ const trigger_render = $derived(trigger);
 			{disabled}
 		/>
 		<Button
-			variant="contained"
-			color="dark"
+			variant="accent"
 			size="xs"
 			id="flow-editor-add-property"
 			on:click={() => {

package/package/components/schema/EditableSchemaDrawer.svelte

@@ -64,7 +64,6 @@ const rnd = generateRandomString();
 
 	<Toggle
 		bind:checked={jsonView}
-		label="JSON View"
 		size="xs"
 		options={{
 			right: 'JSON editor',
@@ -146,7 +145,7 @@ const rnd = generateRandomString();
 								</div>
 							{/if}
 						{:else}
-							<div class="text-tertiary"> Value is undefined </div>
+							<div class="text-primary"> Value is undefined </div>
 						{/if}
 					</div>
 				{/each}
@@ -157,7 +156,7 @@ const rnd = generateRandomString();
 		{#snippet children()}
 			<DrawerContent title="UI Customisation" on:close={() => schemaFormDrawer?.closeDrawer()}>
 				<EditableSchemaForm
-					schemaFormClassName="h-full"
+					schemaFormClassName="min-h-full"
 					bind:this={editableSchemaForm}
 					bind:schema
 					isAppInput
@@ -191,7 +190,7 @@ const rnd = generateRandomString();
 		{/snippet}
 	</Drawer>
 {:else}
-	<div class="mt-2 bg-surface-secondary rounded-md border py-2.5">
+	<div class="mt-2 bg-surface-tertiary rounded-md border py-2.5">
 		<SimpleEditor
 			bind:this={editor}
 			small

package/package/components/schema/EditableSchemaSdkWrapper.svelte

@@ -3,9 +3,9 @@ import { deepEqual } from 'fast-equals';
 import EditableSchemaWrapper from './EditableSchemaWrapper.svelte';
 let { schema: oldSchema, onSchemaChange, ...props } = $props();
 let schema = $state(oldSchema);
-let lastSchema = $state.snapshot(schema);
+let lastSchema = $state(undefined);
 $effect(() => {
-    if (onSchemaChange) {
+    if (onSchemaChange && schema) {
         readFieldsRecursively(schema);
         let newSchema = $state.snapshot(schema);
         if (!deepEqual(lastSchema, newSchema)) {

package/package/components/schema/FlowPropertyEditor.svelte

@@ -106,8 +106,7 @@ let customObjectSelected = $state(format?.startsWith('jsonschema-') ? 'json-sche
 								bind:value={variantName}
 							/>
 							<Button
-								variant="border"
-								color="light"
+								variant="default"
 								size="xs"
 								on:click={() => {
 									createVariant(variantName)
@@ -159,8 +158,7 @@ let customObjectSelected = $state(format?.startsWith('jsonschema-') ? 'json-sche
 								bind:value={variantName}
 							/>
 							<Button
-								variant="border"
-								color="light"
+								variant="default"
 								size="xs"
 								on:click={() => {
 									if (oneOfSelected) {
@@ -256,7 +254,7 @@ let customObjectSelected = $state(format?.startsWith('jsonschema-') ? 'json-sche
 					/>
 				{:else if customObjectSelected === 'json-schema-resource'}
 					{#if format == undefined}
-						<div class="text-xs text-tertiary my-1">
+						<div class="text-xs text-primary my-1">
 							Select a <code>json_schema</code> resource as a reusable JSON schema template
 						</div>
 					{/if}
@@ -378,9 +376,9 @@ let customObjectSelected = $state(format?.startsWith('jsonschema-') ? 'json-sche
 		}}
 	/>
 	{#if showExpr}
-		<div class="mt-2 bg-surface-secondary rounded-md pl-4">
+		<div class="mt-2 bg-surface-tertiary rounded-md pl-3">
 			<SimpleEditor
-				yPadding={8}
+				small
 				extraLib={`declare const fields: Record<${propsNames
 					?.filter((x) => x != name)
 					.map((x) => `"${x}"`)
@@ -393,7 +391,7 @@ let customObjectSelected = $state(format?.startsWith('jsonschema-') ? 'json-sche
 				autoHeight
 			/>
 		</div>
-		<div class="flex flex-row-reverse text-2xs text-tertiary">
+		<div class="flex flex-row-reverse text-2xs text-primary">
 			<div>
 				Other fields are available under <code>fields</code> (e.g:
 				<code>fields.foo == 42</code>)

package/package/components/schema/FlowPropertyEditor.svelte.d.ts

@@ -47,6 +47,6 @@ declare const FlowPropertyEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     requiredChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "disabled" | "properties" | "oneOf" | "format" | "defaultValue" | "order" | "nullable" | "showExpr" | "requiredProperty">;
+}, {}, {}, "disabled" | "format" | "order" | "properties" | "oneOf" | "defaultValue" | "nullable" | "showExpr" | "requiredProperty">;
 type FlowPropertyEditor = InstanceType<typeof FlowPropertyEditor>;
 export default FlowPropertyEditor;

package/package/components/schema/PropertyEditor.svelte

@@ -13,7 +13,7 @@ import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import { createEventDispatcher, onMount, untrack } from 'svelte';
 import { createDispatcherIfMounted } from '../../createDispatcherIfMounted';
 import TextInput, { inputBaseClass, inputBorderClass } from '../text_input/TextInput.svelte';
-let { description = $bindable(undefined), format = $bindable(undefined), contentEncoding = $bindable(undefined), type = undefined, oneOf = $bindable(), pattern = $bindable(undefined), enum_ = $bindable(undefined), extra = $bindable({}), minW = true, customErrorMessage = $bindable(undefined), title = $bindable(undefined), placeholder = $bindable(undefined), properties = $bindable(), isFlowInput = false, isAppInput = false, order = $bindable(), itemsType = $bindable(undefined), typeeditor, children } = $props();
+let { description = $bindable(undefined), format = $bindable(undefined), contentEncoding = $bindable(undefined), type = undefined, oneOf = $bindable(), pattern = $bindable(undefined), enum_ = $bindable(undefined), extra = $bindable({}), nonEmpty = $bindable(undefined), minW = true, customErrorMessage = $bindable(undefined), title = $bindable(undefined), placeholder = $bindable(undefined), properties = $bindable(), isFlowInput = false, isAppInput = false, order = $bindable(), itemsType = $bindable(undefined), typeeditor, children } = $props();
 $effect.pre(() => {
     if (description == undefined) {
         description = '';
@@ -152,6 +152,7 @@ $effect(() => {
 				originalType={extra['originalType']}
 				bind:itemsType
 				canEditResourceType={isFlowInput || isAppInput}
+				bind:nonEmpty
 			/>
 		{:else if type == 'string' || ['number', 'integer'].includes(type ?? '')}
 			<div>

package/package/components/schema/PropertyEditor.svelte.d.ts

@@ -14,6 +14,7 @@ interface Props {
     title?: string | undefined;
     placeholder?: string | undefined;
     properties?: Record<string, any> | undefined;
+    nonEmpty?: boolean | undefined;
     isFlowInput?: boolean;
     isAppInput?: boolean;
     order?: string[] | undefined;
@@ -46,6 +47,6 @@ declare const PropertyEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
-}, "description" | "title" | "pattern" | "properties" | "placeholder" | "extra" | "oneOf" | "format" | "order" | "enum_" | "contentEncoding" | "customErrorMessage" | "itemsType">;
+}, "description" | "title" | "pattern" | "format" | "order" | "placeholder" | "extra" | "properties" | "oneOf" | "contentEncoding" | "enum_" | "customErrorMessage" | "itemsType" | "nonEmpty">;
 type PropertyEditor = InstanceType<typeof PropertyEditor>;
 export default PropertyEditor;

package/package/components/schema/SchemaFormDND.svelte

@@ -3,7 +3,7 @@ import { dragHandle } from '@windmill-labs/svelte-dnd-action';
 import SchemaForm from '../SchemaForm.svelte';
 import { GripVertical } from 'lucide-svelte';
 import { deepEqual } from 'fast-equals';
-import { generateRandomString } from '../../utils';
+import { generateRandomString, readFieldsRecursively } from '../../utils';
 let { schema = $bindable(), args = $bindable(undefined), prettifyHeader = false, onlyMaskPassword = false, disablePortal = false, disabled = false, hiddenArgs = [], nestedParent = undefined, disableDnd = false, shouldDispatchChanges = false, helperScript = undefined, diff = {}, nestedClasses = '', isValid = $bindable(true), noVariablePicker = false, className = '', dndType = generateRandomString(), lightHeaderFont } = $props();
 $effect.pre(() => {
     if (args == undefined) {
@@ -39,7 +39,8 @@ function handleFinalize(e) {
     dispatch('reorder', newOrder);
 }
 $effect(() => {
-    schema && dragDisabledState && untrack(() => updateItems());
+    readFieldsRecursively(schema);
+    dragDisabledState && untrack(() => updateItems());
 });
 </script>
 
@@ -87,7 +88,7 @@ $effect(() => {
 >
 	{#snippet actions()}
 		{#if !disableDnd}
-			<div class="w-4 h-8 cursor-move ml-2 handle mt-[9px]" aria-label="drag-handle" use:dragHandle>
+			<div class="w-4 h-6 cursor-move ml-2 handle mt-[9px]" aria-label="drag-handle" use:dragHandle>
 				<GripVertical size={16} />
 			</div>
 		{/if}

package/package/components/schema/SchemaPickerRow.svelte

@@ -78,7 +78,7 @@ $effect(() => {
 	<div class="flex items-center justify-center border grow min-w-0 rounded-md">
 		<div
 			class={twMerge(
-				'grow min-w-0 text-xs p-1 font-normal text-tertiary text-left  whitespace-nowrap overflow-hidden text-ellipsis',
+				'grow min-w-0 text-xs p-1 font-normal text-primary text-left  whitespace-nowrap overflow-hidden text-ellipsis',
 				hovering && 'border-surface'
 			)}
 		>
@@ -112,7 +112,7 @@ $effect(() => {
 			{#snippet content()}
 				<div class="relative p-2 max-w-[400px]">
 					{#if payloadData === 'WINDMILL_TOO_BIG'}
-						<div class="text-center text-tertiary text-xs">
+						<div class="text-center text-primary text-xs">
 							{#if limitPayloadSize}
 								Payload too big to be used
 							{:else}
@@ -133,7 +133,7 @@ $effect(() => {
 							{#if !objectViewerLoaded && isTooBig}
 								<div class="flex justify-center items-center p-4">
 									<Loader2 size={20} class="animate-spin text-primary" />
-									<span class="ml-2 text-xs text-tertiary">Loading data...</span>
+									<span class="ml-2 text-xs text-primary">Loading data...</span>
 								</div>
 							{/if}
 

package/package/components/schema/jsonSchemaResource.svelte.js

@@ -14,6 +14,10 @@ export async function getJsonSchemaFromResource(path, workspace) {
             path,
             workspace
         });
+        if (!resourceValue || !resourceValue == null) {
+            console.warn(`JSON schema resource ${path} not found`);
+            return null;
+        }
         const parsedResource = jsonSchemaResourceSchema.safeParse(resourceValue);
         if (parsedResource.success) {
             const workspaceResources = loadedJsonSchemaResources[workspace];
@@ -25,7 +29,8 @@ export async function getJsonSchemaFromResource(path, workspace) {
         }
         else {
             console.error('Invalid JSON schema resource:', parsedResource.error);
-            sendUserToast('Invalid JSON schema resource: ' + parsedResource.error, true);
+            sendUserToast(`Error loading json schema resource ${path}, Invalid JSON schema resource: ` +
+                parsedResource.error, true);
         }
     }
     catch (err) {

package/package/components/scriptEditor/LogPanel.svelte

@@ -63,12 +63,12 @@ let forceJson = $state(false);
 </Drawer>
 <div class="h-full flex flex-col">
 	<Tabs bind:selected={selectedTab} class="pt-1" wrapperClass="flex-none">
-		<Tab value="logs" size="xs">Logs & Result</Tab>
+		<Tab value="logs" label="Logs & Result" />
 		{#if customUi?.disableHistory !== true}
-			<Tab value="history" size="xs">History</Tab>
+			<Tab value="history" label="History" />
 		{/if}
 		{#if showCaptures && customUi?.disableTriggerCaptures !== true}
-			<Tab value="captures" size="xs">Trigger captures</Tab>
+			<Tab value="captures" label="Trigger captures" />
 		{/if}
 
 		{#snippet content()}
@@ -120,7 +120,7 @@ let forceJson = $state(false);
 										</div>
 									</div>
 								{:else}
-									<div class="text-sm text-tertiary p-2 flex justify-between items-center">
+									<div class="text-sm text-primary p-2 flex justify-between items-center">
 										<span>
 											{#if previewIsLoading}
 												<Loader2 class="animate-spin" />

package/package/components/scripts/CreateActionsScript.svelte

@@ -7,14 +7,15 @@ let { aiId, aiDescription } = $props();
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<Button
+		id="create-script-button"
 		{aiId}
 		{aiDescription}
-		size="sm"
-		spacingSize="xl"
-		color="marine"
+		unifiedSize="lg"
+		variant="accent"
 		startIcon={{ icon: Plus }}
 		href="{base}/scripts/add"
+		endIcon={{ icon: Code2 }}
 	>
-		Script <Code2 class="ml-1.5" size={18} />
+		Script
 	</Button>
 </div>

package/package/components/search/GlobalSearchModal.svelte

@@ -381,10 +381,12 @@ function placeholderFromPrefix(text) {
 let combinedItems = $state(undefined);
 async function fetchCombinedItems() {
     const scripts = await ScriptService.listScripts({
-        workspace: $workspaceStore
+        workspace: $workspaceStore,
+        withoutDescription: true
     });
     const flows = await FlowService.listFlows({
-        workspace: $workspaceStore
+        workspace: $workspaceStore,
+        withoutDescription: true
     });
     const apps = await AppService.listApps({ workspace: $workspaceStore });
     const raw_apps = await RawAppService.listRawApps({ workspace: $workspaceStore });
@@ -502,20 +504,21 @@ let indexMetadata = $state(undefined);
 			>
 				<div class="px-4 py-2 flex flex-row gap-1 items-center border-b">
 					<Search size="16" />
-					<div class="relative inline-block w-full">
+					<div class="relative inline-block flex-1">
 						<input
 							id="quickSearchInput"
 							bind:this={textInput}
 							type="text"
-							class="quick-search-input !bg-surface"
+							class="no-default-style !bg-transparent !border-none w-full !ring-0 !text-sm"
 							bind:value={searchTerm}
 							autocomplete="off"
 						/>
 						<label
 							for="quickSearchInput"
-							class="absolute top-1/2 left-2 transform -translate-y-1/2 pointer-events-none text-gray-400 transition-all duration-200 whitespace-pre"
-							>{placeholderFromPrefix(searchTerm)}</label
+							class="absolute top-1/2 left-2 transform -translate-y-1/2 pointer-events-none text-gray-400 transition-all duration-200 whitespace-pre text-xs"
 						>
+							{placeholderFromPrefix(searchTerm)}
+						</label>
 					</div>
 					{#if (itemMap[tab] ?? []).length === 0 && searchTerm.length > 0}
 						<AskAiButton
@@ -572,9 +575,7 @@ let indexMetadata = $state(undefined);
 					{#if tab === 'default'}
 						{#if (itemMap[tab] ?? []).filter((e) => (combinedItems ?? []).includes(e)).length > 0}
 							<div class="p-2">
-								<div class="py-2 px-1 text-xs font-semibold text-tertiary">
-									Flows/Scripts/Apps
-								</div>
+								<div class="py-2 px-1 text-xs font-semibold text-primary"> Flows/Scripts/Apps </div>
 								{#each (itemMap[tab] ?? []).filter((e) => (combinedItems ?? []).includes(e)) as el}
 									<QuickMenuItem
 										onselect={(shift) => {
@@ -606,7 +607,7 @@ let indexMetadata = $state(undefined);
 									bind:mouseMoved
 								/>
 								<div class="flex w-full justify-center items-center">
-									<div class="text-tertiary text-center">
+									<div class="text-primary text-center">
 										<div class="pt-1 text-sm">Tip: press `esc` to quickly clear the search bar</div>
 									</div>
 								</div>
@@ -662,14 +663,3 @@ let indexMetadata = $state(undefined);
 		</div>
 	</Portal>
 {/if}
-
-<style>
-	.quick-search-input {
-		outline: none;
-		border: none !important;
-		box-shadow: none !important;
-	}
-
-	.quick-search-input:focus-visible {
-		outline: none !important;
-	}</style>

package/package/components/search/RunsSearch.svelte

@@ -79,13 +79,13 @@ async function loadMoreJobs(s, paginationOffset) {
 <div class="flex h-full p-2 divide-x">
 	{#if loadingCompletedRuns}
 		<div class="flex w-full justify-center items-center h-48">
-			<div class="text-tertiary text-center">
+			<div class="text-primary text-center">
 				<Loader2 size={34} class="animate-spin" />
 			</div>
 		</div>
 	{:else if loadedRuns && loadedRuns.length > 0}
 		<div class="w-4/12 max-h-[70vh] flex flex-col">
-			<div class="text-tertiary text-xs">
+			<div class="text-primary text-xs">
 				{runSearchTotalCount} jobs matched the query
 			</div>
 			<div class="overflow-y-auto">
@@ -93,7 +93,7 @@ async function loadMoreJobs(s, paginationOffset) {
 					{#if r.search_id === 'opt:load_more_jobs'}
 						<div class="pt-4"></div>
 						{#if loadingMoreJobs}
-							<div class="pl-8 pb-8 text-tertiary text-center">
+							<div class="pl-8 pb-8 text-primary text-center">
 								<Loader2 size={20} class="animate-spin" />
 							</div>
 						{:else}
@@ -154,12 +154,12 @@ async function loadMoreJobs(s, paginationOffset) {
 										<div class="text-xs"> {r?.document.script_path} </div>
 										<div class="flex flex-row gap-2">
 											<div
-												class="whitespace-nowrap col-span-2 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
+												class="whitespace-nowrap col-span-2 !text-primary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
 											>
 												{displayDateOnly(new Date(r?.document.created_at[0]))}
 											</div>
 											<div
-												class="whitespace-nowrap col-span-2 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
+												class="whitespace-nowrap col-span-2 !text-primary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
 											>
 												<TimeAgo date={r?.document.created_at[0] ?? ''} />
 											</div>
@@ -202,7 +202,7 @@ async function loadMoreJobs(s, paginationOffset) {
 		</div>
 	{:else}
 		<div class="flex flex-col h-full w-full justify-center items-center h-48">
-			<div class="text-tertiary text-center">
+			<div class="text-primary text-center">
 				{#if searchTerm === ''}
 					<div class="text-2xl font-bold">Enter your search terms</div>
 					<div class="text-sm">Start typing to do full-text search across completed runs</div>

package/package/components/search/RunsSearch.svelte.d.ts

@@ -14,6 +14,6 @@ interface Props {
 }
 declare const RunsSearch: import("svelte").Component<Props, {
     handleRunSearch: (s: string) => void;
-}, "open" | "queryParseErrors" | "selectedWorkspace" | "mouseMoved" | "selectedItem" | "loadedRuns" | "runSearchRemainingCount" | "runSearchTotalCount" | "indexMetadata">;
+}, "open" | "selectedWorkspace" | "queryParseErrors" | "mouseMoved" | "selectedItem" | "loadedRuns" | "runSearchRemainingCount" | "runSearchTotalCount" | "indexMetadata">;
 type RunsSearch = ReturnType<typeof RunsSearch>;
 export default RunsSearch;

package/package/components/select/DraggableTags.svelte

@@ -20,8 +20,8 @@ let dragPos = $state([0, 0]);
 	<li
 		role="listitem"
 		class={twMerge(
-			allowClear ? 'pr-1' : 'pr-3',
-			'pl-3 min-h-6 border bg-surface rounded-full flex items-center gap-0.5',
+			allowClear ? 'pr-0' : 'pr-2',
+			'pl-2 min-h-6 border bg-surface rounded-full flex items-center',
 			currentlyDraggingIndex !== undefined ? 'hover:opacity-20' : ''
 		)}
 		style={currentlyDraggingIndex === index
@@ -42,10 +42,10 @@ let dragPos = $state([0, 0]);
 			dragPos = [0, 0]
 		}}
 	>
-		<span class="text-sm select-none">{item.label || item.value}</span>
+		<span class="text-xs select-none">{item.label || item.value}</span>
 		{#if allowClear}
 			<CloseButton
-				class="text-hint bg-transparent"
+				class="text-hint bg-transparent border-none"
 				small
 				on:close={(e) => (onRemove(item), e.stopPropagation())}
 			/>