windmill-components 1.352.9 → 1.362.0

package/package/components/RunChart.svelte

@@ -9,6 +9,7 @@ export let maxIsNow = false;
 export let minTimeSet = undefined;
 export let maxTimeSet = undefined;
 export let selectedIds = [];
+export let canSelect = true;
 const dispatch = createEventDispatcher();
 const SUCCESS_COLOR = '#4ade80';
 // const SUCCESS_COLOR_TRANSPARENT = '#c9b638'
@@ -103,7 +104,7 @@ function mergeColors(color1, color2, slider) {
     return rgbToHex(blendedRgb);
 }
 function highlightSelectedPoints(ids) {
-    if (ids.length === 0) {
+    if (!canSelect || ids.length === 0) {
         data.datasets[0].backgroundColor = FAIL_COLOR;
         data.datasets[1].backgroundColor = SUCCESS_COLOR;
     }
@@ -181,8 +182,10 @@ $: scatterOptions = {
         }
     },
     onClick: (e, u) => {
-        const ids = u.map((j) => data.datasets[j.datasetIndex].data[j.index].id);
-        selectedIds = ids;
+        if (canSelect) {
+            const ids = u.map((j) => data.datasets[j.datasetIndex].data[j.index].id);
+            selectedIds = ids;
+        }
     },
     scales: {
         x: {

package/package/components/RunChart.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         minTimeSet?: string | undefined;
         maxTimeSet?: string | undefined;
         selectedIds?: string[] | undefined;
+        canSelect?: boolean | undefined;
     };
     events: {
         zoom: CustomEvent<any>;

package/package/components/RunForm.svelte

@@ -1,16 +1,14 @@
-<script>import { defaultIfEmptyString, emptyString, truncateHash } from '../utils';
-import CliHelpBox from './CliHelpBox.svelte';
+<script>import { computeSharableHash as computeSharableHash, defaultIfEmptyString, emptyString, truncateHash } from '../utils';
 import { Badge, Button } from './common';
 import SchemaForm from './SchemaForm.svelte';
 import SharedBadge from './SharedBadge.svelte';
-import CollapseLink from './CollapseLink.svelte';
-import { SCRIPT_VIEW_SHOW_RUN_FROM_CLI } from '../consts';
 import TimeAgo from './TimeAgo.svelte';
-import ClipboardPanel from './details/ClipboardPanel.svelte';
 import Popup from './common/popup/Popup.svelte';
 import { autoPlacement } from '@floating-ui/core';
 import { Calendar, CornerDownLeft } from 'lucide-svelte';
 import RunFormAdvancedPopup from './RunFormAdvancedPopup.svelte';
+import { page } from '$app/stores';
+import { replaceState } from '$app/navigation';
 export let runnable;
 export let runAction;
 export let buttonText = 'Run';
@@ -20,8 +18,6 @@ export let autofocus = false;
 export let topButton = false;
 export let loading = false;
 export let noVariablePicker = false;
-export let viewCliRun = false;
-export let isFlow;
 export let viewKeybinding = false;
 export let scheduledForStr;
 export let invisible_to_owner;
@@ -37,7 +33,26 @@ export function run() {
     runAction(scheduledForStr, args, invisible_to_owner, overrideTag);
 }
 export let isValid = true;
-$: cliCommand = `wmill ${isFlow ? 'flow' : 'script'} run ${runnable?.path} -d '${JSON.stringify(args)}'`;
+$: onArgsChange(args);
+let debounced = undefined;
+function onArgsChange(args) {
+    try {
+        debounced && clearTimeout(debounced);
+        debounced = setTimeout(() => {
+            const nurl = new URL(window.location.href);
+            nurl.hash = computeSharableHash(args);
+            try {
+                replaceState(nurl.toString(), $page.state);
+            }
+            catch (e) {
+                console.error(e);
+            }
+        }, 200);
+    }
+    catch (e) {
+        console.error('Impossible to set hash in args', e);
+    }
+}
 </script>
 
 <div class="max-w-3xl">
@@ -56,7 +71,7 @@ $: cliCommand = `wmill ${isFlow ? 'flow' : 'script'} run ${runnable?.path} -d '$
 						<div class="flex items-center gap-2">
 							<span class="text-sm text-tertiary">
 								{#if runnable}
-									Edited <TimeAgo withDate date={runnable.created_at || ''} /> by {runnable.created_by ||
+									Edited <TimeAgo withDate agoOnlyIfRecent date={runnable.created_at || ''} /> by {runnable.created_by ||
 										'unknown'}
 								{/if}
 							</span>
@@ -180,18 +195,4 @@ $: cliCommand = `wmill ${isFlow ? 'flow' : 'script'} run ${runnable?.path} -d '$
 			{buttonText}
 		</Button>
 	{/if}
-
-	{#if viewCliRun}
-		<div>
-			<div class="mt-4" />
-			{#if SCRIPT_VIEW_SHOW_RUN_FROM_CLI}
-				<CollapseLink small text="Run it from CLI">
-					<div class="mt-2" />
-					<ClipboardPanel content={cliCommand} />
-					<CliHelpBox />
-				</CollapseLink>
-			{/if}
-			<div class="mb-20" />
-		</div>
-	{/if}
 </div>

package/package/components/RunForm.svelte.d.ts

@@ -23,8 +23,6 @@ declare const __propDef: {
         topButton?: boolean | undefined;
         loading?: boolean | undefined;
         noVariablePicker?: boolean | undefined;
-        viewCliRun?: boolean | undefined;
-        isFlow: boolean;
         viewKeybinding?: boolean | undefined;
         scheduledForStr: string | undefined;
         invisible_to_owner: boolean | undefined;

package/package/components/SavedInputs.svelte

@@ -34,13 +34,23 @@ $: runnableType = scriptHash
         : flowPath
             ? 'FlowPath'
             : undefined;
+let hasAlreadyFailed = false;
 async function loadInputHistory() {
-    previousInputs = await InputService.getInputHistory({
-        workspace: $workspaceStore,
-        runnableId,
-        runnableType,
-        perPage: 10
-    });
+    try {
+        previousInputs = await InputService.getInputHistory({
+            workspace: $workspaceStore,
+            runnableId,
+            runnableType,
+            perPage: 10
+        });
+    }
+    catch (e) {
+        console.error(e);
+        if (hasAlreadyFailed)
+            return;
+        hasAlreadyFailed = true;
+        sendUserToast(`Failed to load input history: ${e}`, true);
+    }
 }
 async function loadSavedInputs() {
     savedInputs = await InputService.listInputs({
@@ -113,28 +123,25 @@ async function deleteInput(input) {
     }
 }
 $: {
-    if ($workspaceStore && jobs && (scriptHash || scriptPath || flowPath)) {
-        console.log('loading inputs');
+    if ($workspaceStore && (scriptHash || scriptPath || flowPath)) {
         loadInputHistory();
         loadSavedInputs();
     }
 }
+let previewArgs = undefined;
 function selectArgs(selected_args) {
-    dispatch('selected_args', selected_args);
+    previewArgs = selected_args;
 }
-async function loadLargeArgs(id) {
+async function loadLargeArgs(id, input, allowLarge) {
     if (!id)
         return;
-    largeArgs = await InputService.getArgsFromHistoryOrSavedInput({
+    return await InputService.getArgsFromHistoryOrSavedInput({
         jobOrInputId: id,
-        workspace: $workspaceStore
+        workspace: $workspaceStore,
+        input,
+        allowLarge
     });
 }
-let hasLargeArgs = false;
-$: hasLargeArgs =
-    typeof selectedInput?.args === 'string' && selectedInput?.args === 'WINDMILL_TOO_BIG';
-let largeArgs = undefined;
-$: hasLargeArgs && loadLargeArgs(selectedInput?.id);
 </script>
 
 <JobLoader
@@ -153,6 +160,7 @@ $: hasLargeArgs && loadLargeArgs(selectedInput?.id);
 	syncQueuedRunsCount={false}
 	refreshRate={10000}
 	computeMinAndMax={undefined}
+	perPage={5}
 />
 
 <div class="min-w-[300px] h-full">
@@ -179,17 +187,17 @@ $: hasLargeArgs && loadLargeArgs(selectedInput?.id);
 					{/if}
 				</div>
 
-				<div class="w-full flex flex-col gap-2 h-full overflow-y-auto p">
+				<div class="w-full flex flex-col gap-1 h-full overflow-y-auto p">
 					{#if savedInputs === undefined}
 						<Skeleton layout={[[8]]} />
 					{:else if savedInputs.length > 0}
 						{#each savedInputs as i}
 							<button
 								class={classNames(
-									`w-full flex items-center group justify-between gap-4 py-2 px-4 text-left border rounded-md hover:bg-surface-hover transition-all`,
+									`w-full flex items-center text-sm group justify-between gap-4 py-1.5 px-4 text-left border rounded-sm hover:bg-surface-hover transition-all`,
 									selectedInput === i ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : ''
 								)}
-								on:click={() => {
+								on:click={async () => {
 									if (!i.isEditing) {
 										if (selectedInput === i) {
 											selectedInput = null
@@ -197,6 +205,7 @@ $: hasLargeArgs && loadLargeArgs(selectedInput?.id);
 											selectedInput = i
 										}
 									}
+									selectArgs(await loadLargeArgs(i.id, true, false))
 								}}
 							>
 								<div class="w-full h-full items-center justify-between flex gap-1 min-w-0">
@@ -280,8 +289,8 @@ $: hasLargeArgs && loadLargeArgs(selectedInput?.id);
 				<span class="text-sm font-semibold">Previous runs</span>
 
 				<div class="w-full flex flex-col gap-1 p-0 h-full overflow-y-auto">
-					{#if loading}
-						<Skeleton layout={[[2]]} />
+					{#if loading && (jobs == undefined || jobs?.length == 0)}
+						<div class="text-left text-tertiary text-xs">Loading current runs...</div>
 					{:else if jobs.length > 0}
 						{#each jobs as i (i.id)}
 							<button
@@ -296,7 +305,7 @@ $: hasLargeArgs && loadLargeArgs(selectedInput?.id);
 									<div class="">
 										<div class="rounded-full w-2 h-2 bg-orange-400 animate-pulse" />
 									</div>
-									<div class="col-span-2">
+									<div class="col-span-2 truncate">
 										{i.created_by}
 									</div>
 									<div
@@ -317,6 +326,11 @@ $: hasLargeArgs && loadLargeArgs(selectedInput?.id);
 								</div>
 							</button>
 						{/each}
+						{#if jobs.length == 5}
+							<div class="text-left text-tertiary text-xs"
+								>... there may be more runs not displayed here as the limit is 5</div
+							>
+						{/if}
 					{:else}
 						<div class="text-left text-tertiary text-xs">No running runs</div>
 					{/if}
@@ -332,12 +346,13 @@ $: hasLargeArgs && loadLargeArgs(selectedInput?.id);
 									`w-full flex items-center justify-between gap-4 py-2 px-4 text-left border rounded-sm hover:bg-surface-hover transition-a`,
 									selectedInput === i ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : ''
 								)}
-								on:click={() => {
+								on:click={async () => {
 									if (selectedInput === i) {
 										selectedInput = null
 									} else {
 										selectedInput = i
 									}
+									selectArgs(await loadLargeArgs(i.id, false, false))
 								}}
 							>
 								<div
@@ -346,7 +361,7 @@ $: hasLargeArgs && loadLargeArgs(selectedInput?.id);
 									<div class="">
 										<div class="rounded-full w-2 h-2 {i.success ? 'bg-green-400' : 'bg-red-400'}" />
 									</div>
-									<div class="col-span-2">
+									<div class="col-span-2 truncate" title={i.created_by}>
 										{i.created_by}
 									</div>
 									<div
@@ -382,33 +397,29 @@ $: hasLargeArgs && loadLargeArgs(selectedInput?.id);
 		<Pane>
 			<div class="h-full overflow-hidden min-h-0 flex flex-col justify-between">
 				<div class="w-full flex flex-col min-h-0 gap-2 px-2 py-2 grow">
-					<div class="text-sm font-semibold">Preview</div>
 					<div class="w-full flex flex-col">
 						<Button
 							color="blue"
 							btnClasses="w-full"
 							size="sm"
 							spacingSize="xl"
-							on:click={() => selectArgs(hasLargeArgs ? largeArgs : selectedInput?.args)}
-							disabled={Object.keys(selectedInput?.args || {}).length === 0 ||
-								(hasLargeArgs && Object.keys(largeArgs || {}).length === 0)}
+							on:click={async () => {
+								dispatch('selected_args', await loadLargeArgs(selectedInput?.id, undefined, false))
+							}}
+							disabled={!selectedInput}
 						>
 							<ArrowLeftIcon class="w-4 h-4 mr-2" />
 							Use Input
 						</Button>
 					</div>
 					<div class="w-full min-h-0 grow overflow-auto">
-						{#if hasLargeArgs}
-							{#if largeArgs}
-								<div class=" overflow-auto h-full p-2">
-									<ObjectViewer json={largeArgs} />
-								</div>
-							{:else}
-								<Skeleton layout={[[8]]} />
-							{/if}
-						{:else if Object.keys(selectedInput?.args || {}).length > 0}
+						{#if typeof previewArgs == 'string' && previewArgs == 'WINDMILL_TOO_BIG'}
+							<div class="text-secondary mt-2">
+								Payload too big to preview but can still be loaded</div
+							>
+						{:else if Object.keys(previewArgs || {}).length > 0}
 							<div class=" overflow-auto h-full p-2">
-								<ObjectViewer json={selectedInput?.args} />
+								<ObjectViewer json={previewArgs} />
 							</div>
 						{:else}
 							<div class="text-center text-tertiary">

package/package/components/ScheduleEditorInner.svelte

@@ -19,12 +19,14 @@ import { List, Loader2, Save } from 'lucide-svelte';
 import FlowRetries from './flows/content/FlowRetries.svelte';
 import WorkerTagPicker from './WorkerTagPicker.svelte';
 import Label from './Label.svelte';
+import DateTimeInput from './DateTimeInput.svelte';
 let optionTabSelected = 'error_handler';
 let is_flow = false;
 let initialPath = '';
 let edit = true;
 let schedule = '0 0 12 * *';
 let timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+let paused_until = undefined;
 let itemKind = 'script';
 let errorHandleritemKind = 'script';
 let wsErrorHandlerMuted = false;
@@ -64,6 +66,8 @@ export async function openNew(nis_flow, initial_script_path) {
     runnable = undefined;
     is_flow = nis_flow;
     schedule = '0 0 12 * *';
+    paused_until = undefined;
+    showPauseUntil = false;
     let defaultErrorHandlerMaybe = undefined;
     let defaultRecoveryHandlerMaybe = undefined;
     if ($workspaceStore) {
@@ -224,6 +228,8 @@ async function loadSchedule() {
         enabled = s.enabled;
         schedule = s.schedule;
         timezone = s.timezone;
+        paused_until = s.paused_until;
+        showPauseUntil = paused_until !== undefined;
         summary = s.summary ?? '';
         script_path = s.script_path ?? '';
         await loadScript(script_path);
@@ -306,7 +312,8 @@ async function scheduleScript() {
                 retry: retry,
                 summary: summary != '' ? summary : undefined,
                 no_flow_overlap: no_flow_overlap,
-                tag: tag
+                tag: tag,
+                paused_until: paused_until
             }
         });
         sendUserToast(`Schedule ${path} updated`);
@@ -335,7 +342,8 @@ async function scheduleScript() {
                 retry: retry,
                 summary: summary != '' ? summary : undefined,
                 no_flow_overlap: no_flow_overlap,
-                tag: tag
+                tag: tag,
+                paused_until: paused_until
             }
         });
         sendUserToast(`Schedule ${path} created`);
@@ -362,6 +370,8 @@ $: {
 let drawer;
 let pathC;
 let dirtyPath = false;
+let showPauseUntil = false;
+$: !showPauseUntil && (paused_until = undefined);
 </script>
 
 <Drawer size="900px" bind:this={drawer}>
@@ -377,9 +387,9 @@ let dirtyPath = false;
 						variant="border"
 						startIcon={{ icon: List }}
 						disabled={!allowSchedule || pathError != '' || emptyString(script_path)}
-						href={`/runs/${script_path}`}
+						href={`/runs/${script_path}?show_schedules=true&show_future_jobs=true`}
 					>
-						View Runs
+						View runs
 					</Button>
 				</div>
 				<div class="mr-8 center-center -mt-1">
@@ -479,6 +489,18 @@ let dirtyPath = false;
 					<Tooltip>Schedules use CRON syntax. Seconds are mandatory.</Tooltip>
 				</svelte:fragment>
 				<CronInput disabled={!can_write} bind:schedule bind:timezone bind:validCRON />
+				<Toggle
+					options={{
+						right: 'Pause schedule until...',
+						rightTooltip:
+							'Pausing the schedule will program the next job to run as if the schedule starts at the time the pause is lifted, instead of now.'
+					}}
+					bind:checked={showPauseUntil}
+					size="xs"
+				/>
+				{#if showPauseUntil}
+					<DateTimeInput bind:value={paused_until} />
+				{/if}
 			</Section>
 			<Section label="Runnable">
 				{#if !edit}

package/package/components/ScriptBuilder.svelte

@@ -12,7 +12,7 @@ import DrawerContent from './common/drawer/DrawerContent.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ErrorHandlerToggleButton from './details/ErrorHandlerToggleButton.svelte';
-import { Bug, Calendar, CheckCircle, Code, DiffIcon, Pen, Plus, Rocket, Save, Settings, X } from 'lucide-svelte';
+import { Bug, Calendar, CheckCircle, Code, CornerDownLeft, DiffIcon, Pen, Plus, Rocket, Save, Settings, X } from 'lucide-svelte';
 import { sendUserToast } from '../toast';
 import { isCloudHosted } from '../cloud';
 import Awareness from './Awareness.svelte';
@@ -29,6 +29,8 @@ import { writable } from 'svelte/store';
 import { loadScriptSchedule, defaultScriptLanguages } from '../scripts';
 import DefaultScripts from './DefaultScripts.svelte';
 import { createEventDispatcher } from 'svelte';
+import CustomPopover from './CustomPopover.svelte';
+import Summary from './Summary.svelte';
 export let script;
 export let initialPath = '';
 export let template = 'script';
@@ -39,6 +41,7 @@ export let diffDrawer = undefined;
 export let savedScript = undefined;
 export let searchParams = new URLSearchParams();
 export let disableHistoryChange = false;
+export let replaceStateFn = (url) => window.history.replaceState(null, '', url);
 let metadataOpen = showMeta ||
     (initialPath == '' &&
         searchParams.get('state') == undefined &&
@@ -110,7 +113,7 @@ $: {
         }
     });
 }
-$: !disableHistoryChange && window.history.replaceState(null, '', '#' + encodeState(script));
+$: !disableHistoryChange && replaceStateFn('#' + encodeState(script));
 if (script.content == '') {
     initContent(script.language, script.kind, template);
 }
@@ -143,7 +146,7 @@ async function createSchedule(path) {
         sendUserToast(`The primary schedule could not be created: ${err}`, true);
     }
 }
-async function editScript(stay) {
+async function editScript(stay, deploymentMsg) {
     loadingSave = true;
     try {
         try {
@@ -185,7 +188,8 @@ async function editScript(stay) {
                 timeout: script.timeout,
                 concurrency_key: emptyString(script.concurrency_key) ? undefined : script.concurrency_key,
                 visible_to_runner_only: script.visible_to_runner_only,
-                no_main_func: script.no_main_func
+                no_main_func: script.no_main_func,
+                deployment_message: deploymentMsg || undefined
             }
         });
         const { enabled, timezone, args, cron, summary } = $scheduleStore;
@@ -380,6 +384,8 @@ function onKeyDown(event) {
 let path = undefined;
 let dirtyPath = false;
 let selectedTab = 'metadata';
+let deploymentMsg = '';
+let msgInput = undefined;
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -917,7 +923,7 @@ let selectedTab = 'metadata';
 	<div class="flex flex-col h-screen">
 		<div class="flex h-12 items-center px-4">
 			<div class="justify-between flex gap-2 lg:gap-8 w-full items-center">
-				<div class="flex flex-row gap-2">
+				<div class="flex flex-row gap-2 grow max-w-md">
 					<div class="center-center">
 						<button
 							on:click={async () => {
@@ -927,14 +933,7 @@ let selectedTab = 'metadata';
 							<LanguageIcon lang={script.language} height={20} />
 						</button>
 					</div>
-					<div class="min-w-32 lg:min-w-64 w-full max-w-md">
-						<input
-							type="text"
-							placeholder="Script summary"
-							class="text-sm w-full font-semibold"
-							bind:value={script.summary}
-						/>
-					</div>
+					<Summary bind:value={script.summary} />
 				</div>
 
 				<div class="gap-4 flex">
@@ -1032,15 +1031,41 @@ let selectedTab = 'metadata';
 					>
 						<span class="hidden lg:flex"> Draft </span>
 					</Button>
-					<Button
-						loading={loadingSave}
-						size="xs"
-						startIcon={{ icon: Save }}
-						on:click={() => editScript(false)}
-						dropdownItems={computeDropdownItems(initialPath)}
-					>
-						Deploy
-					</Button>
+
+					<CustomPopover appearTimeout={0} focusEl={msgInput}>
+						<Button
+							loading={loadingSave}
+							size="xs"
+							startIcon={{ icon: Save }}
+							on:click={() => editScript(false)}
+							dropdownItems={computeDropdownItems(initialPath)}
+						>
+							Deploy
+						</Button>
+						<svelte:fragment slot="overlay">
+							<div class="flex flex-row gap-2 min-w-72">
+								<input
+									type="text"
+									placeholder="Deployment message"
+									bind:value={deploymentMsg}
+									bind:this={msgInput}
+									on:keydown={(e) => {
+										if (e.key === 'Enter') {
+											editScript(false, deploymentMsg)
+										}
+									}}
+								/>
+								<Button
+									size="xs"
+									on:click={() => editScript(false, deploymentMsg)}
+									endIcon={{ icon: CornerDownLeft }}
+									loading={loadingSave}
+								>
+									Deploy
+								</Button>
+							</div>
+						</svelte:fragment>
+					</CustomPopover>
 				</div>
 			</div>
 		</div>

package/package/components/ScriptBuilder.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         savedScript?: NewScriptWithDraft | undefined;
         searchParams?: URLSearchParams | undefined;
         disableHistoryChange?: boolean | undefined;
+        replaceStateFn?: ((url: string) => void) | undefined;
         setCode?: ((code: string) => void) | undefined;
     };
     events: {

package/package/components/SearchItems.svelte

@@ -8,14 +8,15 @@ let uf = new uFuzzy(opts);
 $: plaintextItems = items?.map((item) => f(item)) ?? [];
 $: plaintextItems && filter != undefined && setTimeout(() => filterItems(), 0);
 function filterItems() {
-    if (items == undefined || filter.length == 0) {
+    let trimmed = filter.trim();
+    if (items == undefined || trimmed.length == 0) {
         filteredItems = items;
         return;
     }
     // pre-filter
-    let idxs = uf.filter(plaintextItems, filter) ?? [];
-    let info = uf.info(idxs, plaintextItems, filter);
-    let order = uf.sort(info, plaintextItems, filter);
+    let idxs = uf.filter(plaintextItems, trimmed) ?? [];
+    let info = uf.info(idxs, plaintextItems, trimmed);
+    let order = uf.sort(info, plaintextItems, trimmed);
     let result = [];
     for (let i = 0; i < order.length; i++) {
         let infoIdx = order[i];

package/package/components/Summary.svelte

@@ -0,0 +1,74 @@
+<script>import { Pen } from 'lucide-svelte';
+export let value;
+function blur(e) {
+    e.key === 'Enter' && e?.target?.blur();
+}
+</script>
+
+<div class="flex flex-row center-center gap-1 min-w-32 lg:min-w-64 w-full max-w-md">
+	<div class="relative w-full">
+		<input
+			title="Rename"
+			type="text"
+			placeholder="Untitled"
+			class="windmillapp app-title text-sm w-full font-semibold"
+			bind:value
+			on:keydown={blur}
+		/>
+		<Pen class="absolute top-2 right-2 pen-icon -z-10 opacity-60" size={14} />
+	</div>
+</div>
+
+<style global>
+	:global(.app-title) {
+		display: block;
+		width: 100%;
+		border-radius: 0.25rem;
+		border-width: 0px;
+		padding: 0.25rem;
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		font-weight: 600
+}
+
+	:global(.app-title:hover) {
+		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+		--tw-ring-opacity: 1;
+		--tw-ring-color: rgb(234 238 244 / var(--tw-ring-opacity));
+		--tw-ring-offset-width: 0px
+}
+
+	:global(.app-title:focus) {
+		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+		--tw-ring-opacity: 1;
+		--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+		--tw-ring-offset-width: 0px;
+		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+}
+
+	:global(.dark) :global(.app-title) {
+		--tw-border-opacity: 1;
+		border-color: rgb(75 85 99 / var(--tw-border-opacity));
+		--tw-bg-opacity: 1;
+		background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+		--tw-text-opacity: 1;
+		color: rgb(var(--color-text-secondary) / var(--tw-text-opacity))
+}
+
+	:global(.dark) :global(.app-title:focus) {
+		--tw-ring-opacity: 1 !important;
+		--tw-ring-color: rgb(94 129 172 / var(--tw-ring-opacity)) !important
+}
+
+	:global(.dark) :global(.app-title:hover) {
+		--tw-ring-opacity: 1;
+		--tw-ring-color: rgb(54 77 110 / var(--tw-ring-opacity))
+}
+	:global(.app-title:focus) + :global(.pen-icon) {
+		display: none
+}</style>