windmill-components 1.86.0 → 1.89.0

package/package/components/icons/WindmillIcon.svelte

@@ -0,0 +1,105 @@
+<script>export let height = '24px';
+export let width = '24px';
+export let white = false;
+export let spin = undefined;
+</script>
+
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg
+	class={$$props.class}
+	class:animate-[spin_5s_linear_infinite]={spin === 'fast'}
+	class:animate-[spin_15s_linear_infinite]={spin === 'medium'}
+	class:animate-[spin_50s_linear_infinite]={spin === 'slow'}
+	version="1.1"
+	id="Calque_1"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	viewBox="0 0 256 256"
+	style="enable-background:new 0 0 256 256;"
+	xml:space="preserve"
+>
+	<style>
+		.st0 {
+			fill: #ffffff;
+		}
+		.st1 {
+			opacity: 0.4;
+			fill: #ffffff;
+		}
+		.st2 {
+			fill: #bcd4fc;
+		}
+		.st3 {
+			fill: #3b82f6;
+		}
+		.st4 {
+			fill: #b3b3b3;
+		}
+		.st5 {
+			fill: url(#SVGID_1_);
+		}
+		.st6 {
+			fill: url(#SVGID_00000021089067129159788970000008246765442136188072_);
+		}
+		.st7 {
+			fill: url(#SVGID_00000117639240116366130650000015074833605515028638_);
+		}
+		.st8 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000101781798616409025840000016567063639337360777_);
+		}
+		.st9 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000052086836598721292040000002033117744178971046_);
+		}
+		.st10 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000159460939004760751800000002448009281983951536_);
+		}
+		.st11 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000013177830667419993080000017721442101626521532_);
+		}
+		.st12 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000152235521444854938490000006526001119318383285_);
+		}
+		.st13 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000119823135212293698520000012774889010992664993_);
+		}</style>
+	<g>
+		<polygon
+			class="st2"
+			points="134.78,14.22 114.31,48.21 101.33,69.75 158.22,69.75 177.97,36.95 191.67,14.22 	"
+		/>
+		<polygon
+			class:st3={!white}
+			class:st0={white}
+			points="227.55,69.75 186.61,69.75 101.33,69.75 129.78,119.02 158.16,119.02 228.61,119.02 256,119.02 	"
+		/>
+		<polygon
+			class:st3={!white}
+			class:st0={white}
+			points="136.93,132.47 116.46,167.93 73.82,241.78 130.71,241.78 144.9,217.2 180.13,156.18 193.82,132.46 	
+		"
+		/>
+		<polygon
+			class:st3={!white}
+			class:st0={white}
+			points="121.7,131.95 101.23,96.49 58.59,22.63 30.15,71.91 44.34,96.49 79.57,157.5 93.26,181.22 	"
+		/>
+		<polygon
+			class="st2"
+			points="64.81,131.95 25.15,131.21 0,130.74 28.44,180.01 66.73,180.72 93.26,181.21 	"
+		/>
+		<polygon
+			class="st2"
+			points="165.38,181.74 184.58,216.46 196.75,238.47 225.19,189.2 206.66,155.69 193.83,132.46 	"
+		/>
+	</g>
+</svg>

package/package/components/icons/WindmillIcon.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        height?: string | undefined;
+        width?: string | undefined;
+        white?: boolean | undefined;
+        spin?: 'slow' | 'medium' | 'fast' | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type WindmillIconProps = typeof __propDef.props;
+export type WindmillIconEvents = typeof __propDef.events;
+export type WindmillIconSlots = typeof __propDef.slots;
+export default class WindmillIcon extends SvelteComponentTyped<WindmillIconProps, WindmillIconEvents, WindmillIconSlots> {
+}
+export {};

package/package/components/icons/ZammadIcon.svelte

@@ -0,0 +1,23 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg {width} {height} viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M114.807 61.0046L154.093 48.9456L130.823 63.7367L114.807 61.0046Z" fill="#CA2317"/>
+<path d="M138.736 90.3985L130.823 63.7367L154.093 48.9456L147.121 72.8752L138.736 90.3985Z" fill="#E84F83"/>
+<path d="M165.586 41.6913L161.253 48.9455L147.121 72.8752L154.093 48.9455L165.586 41.6913Z" fill="#CA2317"/>
+<path d="M167 46.4019L156.072 57.613L161.253 48.9456L167 46.4019Z" fill="#E54011"/>
+<path d="M117.162 53.5619L149.288 50.3587L126.96 57.2361L117.162 53.5619Z" fill="#E54011"/>
+<path d="M118.387 71.7446L130.823 63.7366L138.737 90.3984L134.592 98.8774L118.387 71.7446Z" fill="#CA2317"/>
+<path d="M99.8274 103.4L93.8921 30.8569L134.591 98.8774L99.8274 103.4Z" fill="#B7DFF2"/>
+<path d="M82.9639 121.959L99.8277 103.4L134.592 98.8774L82.9639 121.959Z" fill="#E54011"/>
+<path d="M1 158.419L82.9637 121.959L99.8275 103.4L73.0715 100.667L1 158.419Z" fill="#FFCE33"/>
+<path d="M4.1084 128.648L46.2208 122.242L59.3161 111.69L52.9098 108.864L4.1084 128.648Z" fill="#D6B12D"/>
+<path d="M19.2769 94.2611L59.3166 111.69L73.0714 100.667L19.2769 94.2611Z" fill="#FFDE85"/>
+<path d="M90.8777 57.1418L85.7903 57.9898L73.0718 100.667L86.8266 92L90.8777 57.1418Z" fill="#009EC6"/>
+<path d="M98.3199 84.6515L86.8262 91.9999L93.892 30.8569L98.3199 84.6515Z" fill="#5EAFCE"/>
+<path d="M54.8887 62.8888L90.8773 57.1419L92.4789 42.916L54.8887 62.8888Z" fill="#045972"/>
+<path d="M51.0264 29.538L82.3045 48.3803L92.4793 42.916L92.7619 40.9376L51.0264 29.538Z" fill="#5A8591"/>
+<path d="M57.1504 9L85.6021 38.9591L92.7622 40.9376L93.8927 30.857L57.1504 9Z" fill="#009EC6"/>
+<path d="M73.0718 100.667L98.3204 84.6516L99.8277 103.4L73.0718 100.667Z" fill="#F39804"/>
+</svg>

package/package/components/icons/ZammadIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ZammadIconProps = typeof __propDef.props;
+export type ZammadIconEvents = typeof __propDef.events;
+export type ZammadIconSlots = typeof __propDef.slots;
+export default class ZammadIcon extends SvelteComponentTyped<ZammadIconProps, ZammadIconEvents, ZammadIconSlots> {
+}
+export {};

package/package/components/icons/index.d.ts

@@ -0,0 +1,102 @@
+import AirtableIcon from './AirtableIcon.svelte';
+import DbIcon from './DbIcon.svelte';
+import DiscordIcon from './DiscordIcon.svelte';
+import GcalIcon from './GcalIcon.svelte';
+import GCloudIcon from './GCloudIcon.svelte';
+import GdriveIcon from './GdriveIcon.svelte';
+import GithubIcon from './GithubIcon.svelte';
+import GitlabIcon from './GitlabIcon.svelte';
+import GmailIcon from './GmailIcon.svelte';
+import GSheetsIcon from './GSheetsIcon.svelte';
+import HttpIcon from './HttpIcon.svelte';
+import Mail from './Mail.svelte';
+import MastodonIcon from './MastodonIcon.svelte';
+import MatrixIcon from './MatrixIcon.svelte';
+import Mysql from './Mysql.svelte';
+import PostgresIcon from './PostgresIcon.svelte';
+import S3Icon from './S3Icon.svelte';
+import Slack from './Slack.svelte';
+import TogglIcon from './TogglIcon.svelte';
+import WindmillIcon from './WindmillIcon.svelte';
+import MailchimpIcon from './MailchimpIcon.svelte';
+import SendgridIcon from './SendgridIcon.svelte';
+import SendflakeIcon from './SendflakeIcon.svelte';
+import QRCodeIcon from './QRCodeIcon.svelte';
+import LinkedinIcon from './LinkedinIcon.svelte';
+import HubspotIcon from './HubspotIcon.svelte';
+import DatadogIcon from './DatadogIcon.svelte';
+import StripeIcon from './StripeIcon.svelte';
+import TelegramIcon from './TelegramIcon.svelte';
+import FunkwhaleIcon from './FunkwhaleIcon.svelte';
+import GdocsIcon from './GdocsIcon.svelte';
+import NextcloudIcon from './NextcloudIcon.svelte';
+import FaunadbIcon from './FaunadbIcon.svelte';
+import ClickhouseIcon from './ClickhouseIcon.svelte';
+import OpenaiIcon from './OpenaiIcon.svelte';
+import AppwriteIcon from './AppwriteIcon.svelte';
+import LinkdingIconSvelte from './LinkdingIcon.svelte';
+import AwsIcon from './AwsIcon.svelte';
+import BcryptIcon from './BcryptIcon.svelte';
+import GoogleIcon from './GoogleIcon.svelte';
+import HackernewsIcon from './HackernewsIcon.svelte';
+import MongodbIcon from './MongodbIcon.svelte';
+import RedditIcon from './RedditIcon.svelte';
+import SupabaseIcon from './SupabaseIcon.svelte';
+import WebdavIcon from './WebdavIcon.svelte';
+import ZammadIcon from './ZammadIcon.svelte';
+import SurrealdbIcon from './SurrealdbIcon.svelte';
+import SquareIcon from './SquareIcon.svelte';
+export declare const APP_TO_ICON_COMPONENT: {
+    readonly postgresql: typeof PostgresIcon;
+    readonly mysql: typeof Mysql;
+    readonly smtp: typeof Mail;
+    readonly slack: typeof Slack;
+    readonly github: typeof GithubIcon;
+    readonly gmail: typeof GmailIcon;
+    readonly gsheets: typeof GSheetsIcon;
+    readonly gitlab: typeof GitlabIcon;
+    readonly gcloud: typeof GCloudIcon;
+    readonly gcal: typeof GcalIcon;
+    readonly gdrive: typeof GdriveIcon;
+    readonly airtable: typeof AirtableIcon;
+    readonly toggl: typeof TogglIcon;
+    readonly s3: typeof S3Icon;
+    readonly discord: typeof DiscordIcon;
+    readonly discord_webhook: typeof DiscordIcon;
+    readonly mastodon: typeof MastodonIcon;
+    readonly matrix: typeof MatrixIcon;
+    readonly windmill: typeof WindmillIcon;
+    readonly http: typeof HttpIcon;
+    readonly mailchimp: typeof MailchimpIcon;
+    readonly sendgrid: typeof SendgridIcon;
+    readonly snowflake: typeof SendflakeIcon;
+    readonly qrcode: typeof QRCodeIcon;
+    readonly linkedin: typeof LinkedinIcon;
+    readonly hubspot: typeof HubspotIcon;
+    readonly datadog: typeof DatadogIcon;
+    readonly stripe: typeof StripeIcon;
+    readonly telegram: typeof TelegramIcon;
+    readonly funkwhale: typeof FunkwhaleIcon;
+    readonly helper: typeof WindmillIcon;
+    readonly windmillhub: typeof WindmillIcon;
+    readonly gdocs: typeof GdocsIcon;
+    readonly ocs: typeof NextcloudIcon;
+    readonly faunadb: typeof FaunadbIcon;
+    readonly clickhouse: typeof ClickhouseIcon;
+    readonly openai: typeof OpenaiIcon;
+    readonly appwrite: typeof AppwriteIcon;
+    readonly linkding: typeof LinkdingIconSvelte;
+    readonly aws: typeof AwsIcon;
+    readonly bcrypt: typeof BcryptIcon;
+    readonly google: typeof GoogleIcon;
+    readonly hackernews: typeof HackernewsIcon;
+    readonly mongodb: typeof MongodbIcon;
+    readonly reddit: typeof RedditIcon;
+    readonly supabase: typeof SupabaseIcon;
+    readonly square: typeof SquareIcon;
+    readonly webdav: typeof WebdavIcon;
+    readonly zammad: typeof ZammadIcon;
+    readonly nextcloud: typeof NextcloudIcon;
+    readonly surrealdb: typeof SurrealdbIcon;
+};
+export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, AwsIcon, BcryptIcon, GoogleIcon, HackernewsIcon, MongodbIcon, RedditIcon, SupabaseIcon, WebdavIcon, ZammadIcon, NextcloudIcon, SendflakeIcon, SurrealdbIcon, };

package/package/components/icons/index.js

@@ -0,0 +1,102 @@
+import AirtableIcon from './AirtableIcon.svelte';
+import DbIcon from './DbIcon.svelte';
+import DiscordIcon from './DiscordIcon.svelte';
+import GcalIcon from './GcalIcon.svelte';
+import GCloudIcon from './GCloudIcon.svelte';
+import GdriveIcon from './GdriveIcon.svelte';
+import GithubIcon from './GithubIcon.svelte';
+import GitlabIcon from './GitlabIcon.svelte';
+import GmailIcon from './GmailIcon.svelte';
+import GSheetsIcon from './GSheetsIcon.svelte';
+import HttpIcon from './HttpIcon.svelte';
+import Mail from './Mail.svelte';
+import MastodonIcon from './MastodonIcon.svelte';
+import MatrixIcon from './MatrixIcon.svelte';
+import Mysql from './Mysql.svelte';
+import PostgresIcon from './PostgresIcon.svelte';
+import S3Icon from './S3Icon.svelte';
+import Slack from './Slack.svelte';
+import TogglIcon from './TogglIcon.svelte';
+import WindmillIcon from './WindmillIcon.svelte';
+import MailchimpIcon from './MailchimpIcon.svelte';
+import SendgridIcon from './SendgridIcon.svelte';
+import SendflakeIcon from './SendflakeIcon.svelte';
+import QRCodeIcon from './QRCodeIcon.svelte';
+import LinkedinIcon from './LinkedinIcon.svelte';
+import HubspotIcon from './HubspotIcon.svelte';
+import DatadogIcon from './DatadogIcon.svelte';
+import StripeIcon from './StripeIcon.svelte';
+import TelegramIcon from './TelegramIcon.svelte';
+import FunkwhaleIcon from './FunkwhaleIcon.svelte';
+import GdocsIcon from './GdocsIcon.svelte';
+import NextcloudIcon from './NextcloudIcon.svelte';
+import FaunadbIcon from './FaunadbIcon.svelte';
+import ClickhouseIcon from './ClickhouseIcon.svelte';
+import OpenaiIcon from './OpenaiIcon.svelte';
+import AppwriteIcon from './AppwriteIcon.svelte';
+import LinkdingIconSvelte from './LinkdingIcon.svelte';
+import AwsIcon from './AwsIcon.svelte';
+import BcryptIcon from './BcryptIcon.svelte';
+import GoogleIcon from './GoogleIcon.svelte';
+import HackernewsIcon from './HackernewsIcon.svelte';
+import MongodbIcon from './MongodbIcon.svelte';
+import RedditIcon from './RedditIcon.svelte';
+import SupabaseIcon from './SupabaseIcon.svelte';
+import WebdavIcon from './WebdavIcon.svelte';
+import ZammadIcon from './ZammadIcon.svelte';
+import SurrealdbIcon from './SurrealdbIcon.svelte';
+import SquareIcon from './SquareIcon.svelte';
+export const APP_TO_ICON_COMPONENT = {
+    postgresql: PostgresIcon,
+    mysql: Mysql,
+    smtp: Mail,
+    slack: Slack,
+    github: GithubIcon,
+    gmail: GmailIcon,
+    gsheets: GSheetsIcon,
+    gitlab: GitlabIcon,
+    gcloud: GCloudIcon,
+    gcal: GcalIcon,
+    gdrive: GdriveIcon,
+    airtable: AirtableIcon,
+    toggl: TogglIcon,
+    s3: S3Icon,
+    discord: DiscordIcon,
+    discord_webhook: DiscordIcon,
+    mastodon: MastodonIcon,
+    matrix: MatrixIcon,
+    windmill: WindmillIcon,
+    http: HttpIcon,
+    mailchimp: MailchimpIcon,
+    sendgrid: SendgridIcon,
+    snowflake: SendflakeIcon,
+    qrcode: QRCodeIcon,
+    linkedin: LinkedinIcon,
+    hubspot: HubspotIcon,
+    datadog: DatadogIcon,
+    stripe: StripeIcon,
+    telegram: TelegramIcon,
+    funkwhale: FunkwhaleIcon,
+    helper: WindmillIcon,
+    windmillhub: WindmillIcon,
+    gdocs: GdocsIcon,
+    ocs: NextcloudIcon,
+    faunadb: FaunadbIcon,
+    clickhouse: ClickhouseIcon,
+    openai: OpenaiIcon,
+    appwrite: AppwriteIcon,
+    linkding: LinkdingIconSvelte,
+    aws: AwsIcon,
+    bcrypt: BcryptIcon,
+    google: GoogleIcon,
+    hackernews: HackernewsIcon,
+    mongodb: MongodbIcon,
+    reddit: RedditIcon,
+    supabase: SupabaseIcon,
+    square: SquareIcon,
+    webdav: WebdavIcon,
+    zammad: ZammadIcon,
+    nextcloud: NextcloudIcon,
+    surrealdb: SurrealdbIcon,
+};
+export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, AwsIcon, BcryptIcon, GoogleIcon, HackernewsIcon, MongodbIcon, RedditIcon, SupabaseIcon, WebdavIcon, ZammadIcon, NextcloudIcon, SendflakeIcon, SurrealdbIcon, };

package/package/components/jobs/JobDetail.svelte

@@ -0,0 +1,225 @@
+<script>import { goto } from '$app/navigation';
+import { page } from '$app/stores';
+import { displayDate, displayDaysAgo, forLater, msToSec, truncateHash, truncateRev } from '../../utils';
+import { faCalendar, faCircle, faClock, faFastForward, faHourglassHalf, faRobot, faSearch, faTimes, faUser, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+import { CalendarClock } from 'lucide-svelte';
+import { onDestroy, onMount } from 'svelte';
+import Icon from 'svelte-awesome';
+import { check } from 'svelte-awesome/icons';
+import { Badge } from '../common';
+import ScheduleEditor from '../ScheduleEditor.svelte';
+import JobPreview from './JobPreview.svelte';
+const SMALL_ICON_SCALE = 0.7;
+export let job;
+let scheduleEditor;
+let time = Date.now();
+let interval;
+onMount(() => {
+    interval = setInterval(() => {
+        time = Date.now();
+    }, 1000);
+});
+onDestroy(() => {
+    interval && clearInterval(interval);
+});
+function displayIfRecent(date) {
+    const d = new Date(date);
+    const now = new Date();
+    const diff = now.getTime() - d.getTime();
+    if (diff < 1000 * 600) {
+        return `(${displayDaysAgo(d.toString())})`;
+    }
+    else {
+        return '';
+    }
+}
+function endedDate(started_at, duration_ms) {
+    const started = new Date(started_at);
+    started.setMilliseconds(started.getMilliseconds() + duration_ms);
+    return `${displayDate(started)} ${displayIfRecent(started)}`;
+}
+</script>
+
+<ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
+
+<div class="border border-gray-400 rounded py-4">
+	<div class="grid grid-cols-1 lg:grid-cols-4 w-full gap-4">
+		<div class="flex-col col-span-2">
+			<div class="flex flex-row text-sm">
+				{#if job === undefined}
+					No job found
+				{:else}
+					<div class="block text-center align-middle px-6">
+						{#if 'success' in job && job.success}
+							{#if job.is_skipped}
+								<Icon
+									class="text-green-600"
+									data={faFastForward}
+									scale={SMALL_ICON_SCALE}
+									label="Job completed successfully but was skipped"
+								/>
+							{:else}
+								<Icon
+									class="text-green-600"
+									data={check}
+									scale={SMALL_ICON_SCALE}
+									label="Job completed successfully"
+								/>
+							{/if}
+						{:else if 'success' in job}
+							<Icon
+								class="text-red-700"
+								data={faTimes}
+								scale={SMALL_ICON_SCALE}
+								label="Job completed with an error"
+							/>
+						{:else if 'running' in job && job.running}
+							<Icon
+								class="text-yellow-500"
+								data={faCircle}
+								scale={SMALL_ICON_SCALE}
+								label="Job is running"
+							/>
+						{:else if job && 'running' in job && job.scheduled_for && forLater(job.scheduled_for)}
+							<Icon
+								class="text-gray-700"
+								data={faCalendar}
+								scale={SMALL_ICON_SCALE}
+								label="Job is scheduled to run at a later time"
+							/>
+						{:else}
+							<Icon
+								class="text-gray-500"
+								data={faHourglassHalf}
+								scale={SMALL_ICON_SCALE}
+								label="Job is waiting for an executor"
+							/>
+						{/if}
+					</div>
+
+					<div class="flex flex-row space-x-2">
+						<JobPreview {job}>
+							<div class="whitespace-nowrap">
+								{#if job.script_path}
+									<a href="/run/{job.id}?workspace={job.workspace_id}">{job.script_path} </a>
+								{:else if 'job_kind' in job && job.job_kind == 'preview'}
+									<a href="/run/{job.id}?workspace={job.workspace_id}">Preview without path </a>
+								{:else if 'job_kind' in job && job.job_kind == 'dependencies'}
+									<a href="/run/{job.id}?workspace={job.workspace_id}"
+										>lock deps of {truncateHash(job.script_hash ?? '')}</a
+									>
+								{:else if 'job_kind' in job && job.job_kind == 'identity'}
+									<a href="/run/{job.id}?workspace={job.workspace_id}">no op</a>
+								{/if}
+								<button
+									class="ml-1"
+									on:click={() => {
+										goto(`/runs/${job.script_path}?${$page.url.searchParams.toString()}`)
+									}}><Badge><Icon scale={0.7} data={faSearch} /></Badge></button
+								>
+							</div>
+						</JobPreview>
+						<div class="whitespace-nowrap">
+							{#if 'job_kind' in job}<a href="/run/{job.id}"
+									><Badge color="blue">{job.job_kind}</Badge></a
+								>
+							{/if}
+							{#if job.is_flow_step && (job.job_kind == 'script' || job.job_kind == 'preview')}
+								<a href="/run/{job.parent_job}?workspace={job.workspace_id}"
+									><Badge color="gray">flow step</Badge></a
+								>
+							{/if}
+						</div>
+					</div>
+				{/if}
+			</div>
+			<div class="pl-14 italic text-gray-500 text-2xs whitespace-nowrap overflow-hidden"
+				>{truncateRev(job.id, 8, '')}</div
+			>
+		</div>
+		<div class="bg-white grid grid-cols-2 gap-x-2 col-span-2">
+			<div class="w-full text-gray-500 text-xs text-left flex flex-col gap-1 mx-4 overflow-hidden">
+				<div>
+					<Icon class="text-gray-700" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+						By {job.created_by}</span
+					>
+				</div>
+				{#if job && 'duration_ms' in job && job.duration_ms != undefined}
+					<div>
+						<Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span
+							class="mx-2"
+						>
+							Ran in {msToSec(job.duration_ms)}s</span
+						>
+					</div>
+				{/if}
+			</div>
+			<div class="text-gray-500 text-xs text-left place-self-start flex flex-col gap-1">
+				{#if 'started_at' in job && job.started_at}
+					<div>
+						<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
+							class="mx-1.5"
+						>
+							<span>
+								{#if job?.['duration_ms']}
+									Ended {#key time}
+										{endedDate(job.started_at, job?.['duration_ms'])}{/key}
+								{:else}
+									Started {#key time}
+										{displayDaysAgo(job.started_at ?? '')}{/key}
+								{/if}</span
+							>
+						</span></div
+					>
+				{/if}
+				{#if 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
+					<div class="inline-flex gap-1">
+						<CalendarClock size={13} class="-ml-0.5" />
+						<span>
+							<span class="bg-blue-200 text-gray-700 text-xs rounded px-1">Scheduled</span>
+							for {displayDate(job.scheduled_for ?? '')}
+						</span>
+					</div>
+				{:else if 'scheduled_for' in job && !job.running}
+					<div>
+						<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
+							class="mx-2"
+						>
+							<span class="bg-blue-200 text-gray-700 text-xs rounded px-1"
+								>Waiting for an executor</span
+							>
+						</span>
+					</div>
+				{/if}
+				<div>
+					{#if job && job.parent_job}
+						{#if job.is_flow_step}
+							<Icon class="text-gray-700" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
+								class="mx-1"
+							>
+								Step of flow <a href={`/run/${job.parent_job}`}>{truncateRev(job.parent_job, 6)}</a
+								></span
+							>
+						{:else}
+							<Icon class="text-gray-700" data={faRobot} scale={SMALL_ICON_SCALE} /><span
+								class="mx-1"
+							>
+								Parent <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
+							>
+						{/if}
+					{:else if job && job.schedule_path}
+						<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
+						<span class="mx-1"
+							>Schedule <button
+								class="break-words text-blue-400 font-normal truncate text-xs"
+								on:click={() =>
+									scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
+								>{job.schedule_path}</button
+							></span
+						>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

package/package/components/jobs/JobDetail.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Job } from '../../gen';
+declare const __propDef: {
+    props: {
+        job: Job;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type JobDetailProps = typeof __propDef.props;
+export type JobDetailEvents = typeof __propDef.events;
+export type JobDetailSlots = typeof __propDef.slots;
+export default class JobDetail extends SvelteComponentTyped<JobDetailProps, JobDetailEvents, JobDetailSlots> {
+}
+export {};