@kortix/ui 0.0.0-stage → 0.14.4

package/dist/customize/triggers/schedule/schedule-detail-sheet.js

@@ -0,0 +1,287 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The panel behind a row click.
+ *
+ * It is the trigger composer, in edit mode. The body is the same When → Then →
+ * Name → Options stack built from the same pieces (`WhenSchedule`,
+ * `WhenEvent`, `ThenFields`, `TriggerOptions`), over a `ComposerDraft` built
+ * from the saved trigger. Nothing saves on its own: one footer, "Save changes"
+ * and "Discard", appears while the draft differs from the saved trigger, and
+ * Save sends one PATCH holding only the fields that changed (`triggerPatch`).
+ *
+ * Above the form, a callout shows only what needs action: a failed run, an
+ * event trigger that needs a connection or is in error, or events being off
+ * for the project. A viewer who may not update the trigger sees the same facts
+ * as one read-only list.
+ */
+import { Alert, AlertDescription, AlertTitle } from '../../../primitives/alert.js';
+import { Button } from '../../../primitives/button.js';
+import { ButtonGroup } from '../../../primitives/button-group.js';
+import { Disclosure, DisclosureContent } from '../../../primitives/disclosure.js';
+import { SessionDotMatrix } from '../../../primitives/dot-matrix/session-dot-matrix.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../../../primitives/dropdown-menu.js';
+import Hint from '../../../primitives/hint.js';
+import { Input } from '../../../primitives/input.js';
+import { Label } from '../../../primitives/label.js';
+import Loading from '../../../primitives/loading.js';
+import { Sheet, SheetBody, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from '../../../primitives/sheet.js';
+import { Skeleton } from '../../../primitives/skeleton.js';
+import { SplitSheetClose, SplitSheetContent, SplitSheetDescription, SplitSheetTitle, } from '../../../primitives/split-sheet.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../../primitives/tabs.js';
+import { errorToast, successToast } from '../../../primitives/toast.js';
+import { agentDisplayLabel } from '../../../session/composer/session-chat-input.js';
+import { useTranslations as useI18nTranslations } from '../../../i18n/index.js';
+import { cn } from '../../../internal/lib/utils.js';
+import { modelRefToKey, updateProjectTrigger } from '@kortix/sdk';
+import { useProjectTriggerEventApps, useProjectTriggerEventTypes, useVisibleAgents, } from '@kortix/sdk/react';
+import { BracketsCurlyIcon, DotsThreeIcon, PlayIcon, TrashIcon, XIcon, } from '@phosphor-icons/react';
+import { useMutation } from '@tanstack/react-query';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { FoldTrigger, InlineError } from './composer-parts.js';
+import { accountToWrite, appConnectors, eventAppTarget, indexEventApps, parseConfigErrors, schemaFields, } from './event-trigger-copy.js';
+import { describeLastRun, describeWhen, triggerName, triggerSubtitle } from './schedule-copy.js';
+import { PropertyList } from './schedule-fields.js';
+import { ThenFields } from './then-fields.js';
+import { EventCheckTimes } from './event-check-times.js';
+import { TriggerCallouts } from './trigger-callouts.js';
+import { findDraftApp, resolveProfile, validate, } from './trigger-composer-logic.js';
+import { draftFromTrigger, triggerPatch } from './trigger-edit-logic.js';
+import { TriggerOptions } from './trigger-options.js';
+import { TriggerReadOnly } from './trigger-readonly.js';
+import { TriggerRunsPanel } from './trigger-runs-panel.js';
+import { TriggerTestDialog } from './trigger-test-dialog.js';
+import { TriggerTile } from './trigger-tile.js';
+import { useEventAppConnect } from './use-event-app-connect.js';
+import { WhenEvent } from './when-event.js';
+import { WhenEventSummary } from './when-event-summary.js';
+import { WhenSchedule } from './when-schedule.js';
+import { WhenWebhookAddress } from './when-webhook-address.js';
+/** Shared formatter, hoisted so render does not rebuild the Intl machinery per call. */
+const lastRunFormatter = new Intl.DateTimeFormat(undefined, {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+});
+export function ScheduleDetailSheet(props) {
+    const { trigger, open, onOpenChange } = props;
+    if (!trigger)
+        return null;
+    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsx(SheetContent, { side: "right", className: "w-full gap-0 !overflow-y-auto p-0 sm:max-w-xl", children: _jsx(SheetPanel, { ...props, trigger: trigger }, trigger.slug) }) }));
+}
+/**
+ * The same panel as a `SplitSheetContent` column, for a host that renders the
+ * `SplitSheet` root around its list (the Triggers page). The host owns `open`.
+ */
+export function ScheduleDetailSplitContent(props) {
+    const { trigger } = props;
+    if (!trigger)
+        return null;
+    return (_jsx(SplitSheetContent, { children: _jsx(SplitFocus, { children: _jsx(SheetPanel, { ...props, trigger: trigger, split: true, open: true, onOpenChange: () => { } }) }, trigger.slug) }));
+}
+/**
+ * The column's one scroller, as `SheetContent` is for the floating sheet, so
+ * the header and the SaveBar stick the same way. The host opens it from a row
+ * callback, not a `SplitSheetTrigger`, so focus moves in here on open and goes
+ * back to the element that opened it on close, as the modal sheet does.
+ */
+function SplitFocus({ children }) {
+    const ref = useRef(null);
+    useLayoutEffect(() => {
+        const panel = ref.current;
+        const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        panel?.focus({ preventScroll: true });
+        return () => {
+            // Layout cleanup runs before the panel detaches, so focus is still readable.
+            if (panel?.contains(document.activeElement) && opener?.isConnected) {
+                opener.focus({ preventScroll: true });
+            }
+        };
+    }, []);
+    return (_jsx("div", { ref: ref, tabIndex: -1, className: "min-h-0 flex-1 overflow-y-auto outline-none", children: children }));
+}
+/* ─── Header, data, and the readiness gate ──────────────────────────────── */
+function SheetPanel({ projectId, trigger, controls, eventsEnabled, onRun, running, onDelete, onMutated, initialTab = 'runs', onTabChange, projectPaused = false, onResumeAll, resumingAll = false, live = false, split = false, }) {
+    const Title = split ? SplitSheetTitle : SheetTitle;
+    const Description = split ? SplitSheetDescription : SheetDescription;
+    // The sticky header and SaveBar paint the host's own surface, so content passes behind them.
+    const surface = split ? 'bg-surface' : 'bg-sidebar';
+    const t = useI18nTranslations('hardcodedUi.i18nComplete');
+    const tAutoPause = useI18nTranslations('triggerAutoPause');
+    const [tab, setTab] = useState(initialTab);
+    const [testOpen, setTestOpen] = useState(false);
+    const event = trigger.type === 'event' ? trigger.event : null;
+    const toggle = useMutation({
+        mutationFn: (enabled) => updateProjectTrigger(projectId, trigger.slug, { enabled }),
+        onSuccess: (_data, enabled) => {
+            successToast(enabled ? t.raw('texta97d32ddb6ba') : t.raw('texte159b06187d3'));
+            onMutated();
+        },
+        onError: (err) => errorToast(err instanceof Error ? err.message : t.raw('text43ec39943667')),
+    });
+    const agents = useVisibleAgents({ projectId });
+    // A null project id keeps both hooks idle: with events off, the sheet asks for no event data.
+    const catalogOn = eventsEnabled && event !== null;
+    const apps = useProjectTriggerEventApps(catalogOn ? projectId : null);
+    // Ask for the connector's events only when the catalog lists it: an unknown connector answers 404.
+    const listed = (apps.data?.apps ?? []).some((a) => appConnectors(a).some((c) => c.slug === event?.connector));
+    const eventTypes = useProjectTriggerEventTypes(catalogOn && listed ? projectId : null, event?.connector ?? null);
+    const appIndex = useMemo(() => indexEventApps(apps.data?.apps), [apps.data]);
+    const eventNames = useMemo(() => new Map((eventTypes.data?.event_types ?? []).map((e) => [e.type, e.name])), [eventTypes.data]);
+    const savedModel = trigger.model ? modelRefToKey(trigger.model) : null;
+    const savedEventType = useMemo(() => eventTypes.data?.event_types.find((e) => e.type === event?.type) ?? null, [eventTypes.data, event?.type]);
+    const canWrite = controls.canUpdate;
+    // An auto-paused trigger (KRTX-1721) is not active: the toggle offers Resume,
+    // which sends `enabled: true` and clears the pause.
+    const active = trigger.enabled && !trigger.auto_paused_at;
+    // Never the name twice: a trigger named after its schedule shows its prompt's first line.
+    const subtitle = triggerSubtitle(triggerName(trigger), describeWhen(trigger, eventNames), trigger.prompt_template);
+    // The form needs the event's schema to build its settings; wait for it, never flash a half-built form.
+    const loading = catalogOn && (apps.isLoading || eventTypes.isLoading);
+    return (
+    // `gap-0`: the Tabs root's own gap would open a seam under the sticky header.
+    _jsxs(Tabs, { value: tab, onValueChange: (next) => {
+            setTab(next);
+            onTabChange?.(next);
+        }, className: "gap-0", children: [_jsxs(SheetHeader, { className: cn(surface, 'border-border sticky top-0 z-10 gap-2.5 space-y-0 border-b pt-4 pr-4 pb-0 pl-6 text-left'), children: [_jsxs("div", { className: cn('flex h-8 min-w-0 items-center gap-2.5', !split && 'pr-10'), children: [_jsx(TriggerTile, { trigger: trigger, projectPaused: projectPaused, running: running || live, surface: surface }), _jsxs("div", { className: "flex min-w-0 flex-1 items-baseline gap-2.5", children: [_jsx(Title, { className: "max-w-full shrink-0 truncate text-sm font-medium", children: triggerName(trigger) }), subtitle ? (_jsx(Description, { className: "min-w-0 truncate text-xs", children: subtitle })) : null] }), split ? (_jsx(Hint, { label: t.raw('text7d9eb7acb13e'), side: "bottom", sideOffset: 4, children: _jsx(SplitSheetClose, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-base", "aria-label": t.raw('text7d9eb7acb13e'), className: "text-muted-foreground -mr-1.5 shrink-0", children: _jsx(XIcon, { className: "size-4" }) }) }) })) : null] }), _jsxs("div", { className: "flex items-end justify-between gap-2", children: [_jsxs(TabsList, { type: "underline", underlineSize: "md", size: "sm", className: "h-8 justify-start gap-5 border-b-0", children: [_jsx(TabsTrigger, { value: "runs", className: "flex-none px-0 text-xs font-medium", children: t.raw('text848f54e89660') }), _jsx(TabsTrigger, { value: "settings", className: "flex-none px-0 text-xs font-medium", children: t.raw('text74a883a037bc') })] }), controls.canFire || controls.canUpdate || controls.canDelete ? (
+                            // One group, as the user asked: Pause or Resume, Test with payload
+                            // (webhooks), ⋯, Run now; one variant (`secondary`) at one height (`h-7`).
+                            _jsxs(ButtonGroup, { className: "mb-1.5", children: [projectPaused && onResumeAll ? (_jsxs(Button, { size: "xs", variant: "secondary", className: "gap-1.5 text-xs", onClick: onResumeAll, disabled: resumingAll, children: [resumingAll ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, t.raw('text43e673c5503d')] })) : controls.canUpdate ? (_jsxs(Button, { size: "xs", variant: "secondary", className: "gap-1.5 text-xs", onClick: () => toggle.mutate(!active), disabled: toggle.isPending, children: [toggle.isPending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, active ? t.raw('text858e4ba7a29f') : t.raw('textd640c7421da0')] })) : null, controls.canFire && trigger.type === 'webhook' ? (_jsx(Button, { size: "xs", variant: "secondary", className: "text-xs", onClick: () => setTestOpen(true), children: t.raw('textb098a09c78aa') })) : null, (controls.canFire && trigger.type !== 'webhook') || controls.canDelete ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { size: "icon-sm", variant: "secondary", "aria-label": t.raw('textf8d46c2570e7'), children: _jsx(DotsThreeIcon, { className: "text-muted-foreground size-4 shrink-0" }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-48", children: [controls.canFire && trigger.type !== 'webhook' ? (_jsxs(DropdownMenuItem, { onClick: () => setTestOpen(true), children: [_jsx(BracketsCurlyIcon, {}), t.raw('textb098a09c78aa')] })) : null, controls.canDelete ? (_jsxs(DropdownMenuItem, { variant: "destructive", onClick: onDelete, children: [_jsx(TrashIcon, {}), trigger.type === 'cron'
+                                                                ? t.raw('textd8d0bd5c5106')
+                                                                : event
+                                                                    ? t.raw('textf2f698118cc1')
+                                                                    : t.raw('text60f85e57e4a7')] })) : null] })] })) : null, controls.canFire ? (_jsxs(Button, { size: "xs", variant: "secondary", className: "gap-1.5 text-xs", onClick: onRun, disabled: running, children: [running ? (_jsx(SessionDotMatrix, { sessionId: trigger.slug, size: 14, className: "shrink-0" })) : (_jsx(PlayIcon, { weight: "fill", className: "size-2.5 shrink-0" })), t.raw('text0991397702fa')] })) : null] })) : null] })] }), _jsxs(SheetBody, { className: "flex-none items-stretch gap-0 space-y-6 !overflow-visible px-4 pt-5 pb-0", children: [trigger.auto_paused_at ? (_jsxs(Alert, { variant: "warning", children: [_jsx(AlertTitle, { children: tAutoPause('title') }), _jsxs(AlertDescription, { children: [_jsx("p", { children: tAutoPause('description') }), trigger.auto_paused_reason ? _jsx("p", { className: "font-mono text-xs", children: trigger.auto_paused_reason }) : null] })] })) : null, _jsx(TabsContent, { value: "settings", forceMount: true, className: "data-[state=inactive]:hidden", children: loading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-16 rounded-md" }), _jsx(Skeleton, { className: "h-28 rounded-md" })] })) : (_jsx(SheetForm, { projectId: projectId, trigger: trigger, canWrite: canWrite, eventsEnabled: eventsEnabled, appIndex: appIndex, eventNames: eventNames, agents: agents, savedEventType: savedEventType, savedModel: savedModel, apps: apps, onMutated: onMutated, surface: surface })) }), _jsxs(TabsContent, { value: "runs", className: "space-y-3 pb-8", children: [_jsx(EventCheckTimes, { trigger: trigger }), _jsx(TriggerRunsPanel, { projectId: projectId, trigger: trigger, canFire: controls.canFire, onRun: onRun, running: running })] })] }), controls.canFire ? (_jsx(TriggerTestDialog, { projectId: projectId, trigger: trigger, open: testOpen, onOpenChange: setTestOpen })) : null] }));
+}
+/* ─── The form ──────────────────────────────────────────────────────────── */
+function SheetForm({ projectId, trigger, canWrite, eventsEnabled, appIndex, eventNames, agents, savedEventType, savedModel, apps, onMutated, surface, }) {
+    const t = useI18nTranslations('hardcodedUi.i18nComplete');
+    const { add, canConnect } = useEventAppConnect(projectId);
+    // What the server holds, as a draft. A refetch that changes nothing changes nothing here.
+    const server = useMemo(() => draftFromTrigger(trigger, { eventType: savedEventType, model: savedModel }), [trigger, savedEventType, savedModel]);
+    const serverKey = JSON.stringify(server);
+    const [base, setBase] = useState(server);
+    const [draft, setDraft] = useState(server);
+    const patch = (next) => setDraft((d) => ({ ...d, ...next }));
+    const [showProblems, setShowProblems] = useState(false);
+    const [optionsOpen, setOptionsOpen] = useState(false);
+    const [serverConfig, setServerConfig] = useState(null);
+    const whenRef = useRef(null);
+    const bodyRef = useRef(null);
+    const app = findDraftApp(apps.data?.apps ?? [], draft);
+    const configFields = useMemo(() => schemaFields(draft.eventType?.config_schema), [draft.eventType]);
+    // What Save writes. A new connector brings its own account list, so the account is resolved with it.
+    const effective = useMemo(() => {
+        if (draft.kind !== 'event' || !app)
+            return draft;
+        const profile = resolveProfile(app, draft);
+        const moved = profile !== base.profile;
+        const connector = appConnectors(app).find((c) => c.slug === profile) ?? null;
+        return {
+            ...draft,
+            profile,
+            account: moved ? accountToWrite(connector, draft.account) : draft.account,
+        };
+    }, [draft, app, base.profile]);
+    const changes = triggerPatch(base, effective);
+    const needsConnector = draft.kind === 'event' &&
+        app !== null &&
+        (draft.appSlug !== base.appSlug || draft.appSource !== base.appSource) &&
+        appConnectors(app).length === 0;
+    const dirty = JSON.stringify(draft) !== JSON.stringify(base) || needsConnector;
+    // Follow the server while the form is clean; keep what the person typed while it is not.
+    const seenKey = useRef(serverKey);
+    useEffect(() => {
+        if (seenKey.current === serverKey)
+            return;
+        seenKey.current = serverKey;
+        if (!dirty)
+            setDraft(server);
+        setBase(server);
+    }, [serverKey, server, dirty]);
+    const name = draft.nameOverride ?? '';
+    const problems = validate(draft, { name, configFields, app, edit: true }, t);
+    const shown = showProblems ? problems : [];
+    const blockError = (block) => shown.find((p) => p.block === block && !p.field)?.message;
+    const configErrors = {
+        ...(serverConfig?.sent === draft.configDraft ? serverConfig.errors : {}),
+    };
+    for (const p of shown)
+        if (p.field)
+            configErrors[p.field] ??= p.message;
+    const save = useMutation({
+        mutationFn: async () => {
+            const body = { ...changes };
+            if (needsConnector && app) {
+                body.connector = await add(eventAppTarget(app));
+            }
+            return updateProjectTrigger(projectId, trigger.slug, body);
+        },
+        onSuccess: () => {
+            successToast(t.raw('textb5c120b316c2'));
+            setBase(draft);
+            setShowProblems(false);
+            setServerConfig(null);
+            onMutated();
+        },
+        onError: (e) => {
+            if (draft.kind === 'event') {
+                // A bad event config comes back per field: show each under its input.
+                const { byField, general } = parseConfigErrors(e.message, configFields);
+                if (Object.keys(byField).length > 0) {
+                    setServerConfig({ sent: draft.configDraft, errors: byField });
+                    if (general)
+                        errorToast(general);
+                    return;
+                }
+            }
+            errorToast(e.message || t.raw('text16efcd21d74f'));
+        },
+    });
+    const submit = () => {
+        if (problems.length > 0) {
+            setShowProblems(true);
+            if (problems.some((p) => p.block === 'options'))
+                setOptionsOpen(true);
+            setTimeout(() => bodyRef.current
+                ?.querySelector('[role="alert"]')
+                ?.scrollIntoView({ block: 'center', behavior: 'smooth' }), 0);
+            return;
+        }
+        save.mutate();
+    };
+    const discard = () => {
+        setDraft(base);
+        setShowProblems(false);
+        setServerConfig(null);
+    };
+    const editEvent = () => whenRef.current?.scrollIntoView({ block: 'start', behavior: 'smooth' });
+    return (_jsxs("div", { ref: bodyRef, className: "space-y-6", children: [_jsx(TriggerCallouts, { projectId: projectId, trigger: trigger, canEditEvent: canWrite && (app !== null || (!draft.appSlug && !draft.profile)), eventsEnabled: eventsEnabled, apps: appIndex, onEditEvent: editEvent }), _jsx(EventCheckTimes, { trigger: trigger }), canWrite ? (_jsxs(_Fragment, { children: [_jsxs("section", { ref: whenRef, "data-sheet-block": true, "data-block": "when", className: "space-y-3", children: [_jsx(Label, { children: t.raw('textcf9c7aa24a26') }), draft.kind === 'cron' ? (_jsx(WhenSchedule, { draft: draft, patch: patch, error: blockError('when') })) : draft.kind === 'webhook' ? (_jsx(WhenWebhookAddress, { trigger: trigger, draft: draft, patch: patch, canWrite: true })) : app || (!draft.appSlug && !draft.profile) ? (_jsx(WhenEvent, { projectId: projectId, apps: apps, draft: draft, patch: patch, setDraft: setDraft, configFields: configFields, configErrors: configErrors, canConnect: canConnect, error: blockError('when') })) : (_jsx(WhenEventSummary, { trigger: trigger, apps: appIndex, eventNames: eventNames, loading: apps.isLoading }))] }), _jsxs("section", { "data-sheet-block": true, "data-block": "then", className: "space-y-3", children: [_jsx(Label, { children: t.raw('text0597f441dcca') }), _jsx(ThenFields, { agents: agents, draft: draft, patch: patch, payloadSchema: draft.eventType?.payload_schema, error: blockError('then') })] }), _jsxs("section", { "data-sheet-block": true, "data-block": "name", className: "space-y-3", children: [_jsx(Label, { htmlFor: "trigger-name", children: t.raw('textdcd1d5223f73') }), _jsx(Input, { id: "trigger-name", value: name, onChange: (e) => patch({ nameOverride: e.target.value }), placeholder: t.raw('textc8cf587a3b6c'), maxLength: 64, "aria-invalid": blockError('name') ? true : undefined }), _jsx(InlineError, { message: blockError('name') })] }), _jsx("section", { "data-sheet-block": true, "data-block": "options", children: _jsx(TriggerOptions, { edit: true, projectId: projectId, draft: draft, patch: patch, name: name, open: optionsOpen, onOpenChange: setOptionsOpen, error: blockError('options') }) })] })) : (_jsx(TriggerReadOnly, { trigger: trigger, apps: appIndex, eventNames: eventNames, agentLabel: agentDisplayLabel(agents, trigger.agent) })), _jsx("div", { className: "pb-8", children: _jsx(Details, { trigger: trigger }) }), dirty && canWrite ? (
+            /* In the sheet's own scroll container, after the body: it sticks to the
+               bottom edge while the form is long, and rests under the form when it is short. */
+            _jsx(SaveBar, { surface: surface, pending: save.isPending, onSave: submit, onDiscard: discard })) : null] }));
+}
+/** The one footer: present only while the form differs from the saved trigger. */
+function SaveBar({ surface, pending, onSave, onDiscard, }) {
+    const t = useI18nTranslations('hardcodedUi.i18nComplete');
+    return (_jsxs("div", { className: cn(surface, 'border-border sticky bottom-0 z-10 -mx-4 mt-auto flex items-center justify-end gap-2 border-t px-4 py-3'), children: [_jsx(Button, { variant: "outline-ghost", size: "sm", disabled: pending, onClick: onDiscard, children: t.raw('texteb1a70e39274') }), _jsxs(Button, { size: "sm", className: "gap-1.5", disabled: pending, onClick: onSave, children: [pending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, t.raw('textdd0ae7a5cbcf')] })] }));
+}
+/* ─── Details — facts, not settings ─────────────────────────────────────── */
+function Details({ trigger }) {
+    const t = useI18nTranslations('hardcodedUi.i18nComplete');
+    return (_jsxs(Disclosure, { className: "group", children: [_jsx(FoldTrigger, { children: t.raw('text45989de49fb7') }), _jsx(DisclosureContent, { children: _jsx("div", { className: "pt-3", children: _jsx(PropertyList, { rows: [
+                            { label: 'ID', value: _jsx("code", { className: "font-mono text-xs", children: trigger.slug }) },
+                            {
+                                label: t.raw('text456a1fdc1530'),
+                                value: _jsx("code", { className: "font-mono text-xs", children: trigger.path }),
+                            },
+                            {
+                                label: t.raw('text512a48218ba2'),
+                                value: (_jsx("span", { className: "tabular-nums", children: trigger.last_fired_at
+                                        ? lastRunFormatter.format(new Date(trigger.last_fired_at))
+                                        : describeLastRun(null) })),
+                            },
+                        ] }) }) })] }));
+}

package/dist/customize/triggers/schedule/schedule-fields.d.ts

@@ -0,0 +1,97 @@
+import type { TriggerFilterValue } from '@kortix/sdk';
+import { type ReactNode } from 'react';
+import { type SessionMode } from './schedule-copy.js';
+/**
+ * Label/value pairs. A `<dl>` rather than the `<Table>` this used to be: a
+ * table drew a full bordered grid around four facts and read as data you
+ * could act on.
+ */
+export declare function PropertyList({ rows, }: {
+    rows: {
+        label: string;
+        value: ReactNode;
+        hint?: string;
+    }[];
+}): import("react").JSX.Element;
+/**
+ * A value you are meant to take somewhere else — the webhook address, the
+ * sample request. The copy control crossfades its icon (scale 0.25→1,
+ * opacity 0→1, blur 4px→0 on a `bounce: 0` spring) so the confirmation reads
+ * as one morph rather than two glyphs blinking.
+ */
+export declare function CopyBlock({ value, copiedLabel, label, multiline, className, }: {
+    value: string;
+    copiedLabel?: string;
+    label?: string;
+    multiline?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * The wire calls this `session_mode` with values `fresh` / `reuse` /
+ * `pinned` / `keyed`. None of those words appear here: the question is
+ * "does the agent remember the last run?", so the options answer that, and
+ * the help line under the picker only explains the option you actually chose
+ * instead of listing all four.
+ */
+export declare function RunLocationFields({ mode, onModeChange, pinnedSessionId, onPinnedSessionChange, sessionKey, onSessionKeyChange, sessions, sessionsLoading, sessionKeyAction, disabled, }: {
+    mode: SessionMode;
+    onModeChange: (next: SessionMode) => void;
+    pinnedSessionId: string | null;
+    onPinnedSessionChange: (next: string) => void;
+    sessionKey: string;
+    onSessionKeyChange: (next: string) => void;
+    sessions: {
+        session_id: string;
+        name?: string | null;
+        branch_name?: string | null;
+    }[];
+    sessionsLoading: boolean;
+    /** Optional save affordance rendered beside the grouping input. */
+    sessionKeyAction?: ReactNode;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+/**
+ * The editor's operators: the wire's `not`, `in`, `prefix`, `not_prefix`, plus
+ * `equals` (a plain value) and `exists` split into "exists" / "missing".
+ */
+export declare const CONDITION_OPERATORS: readonly ["equals", "not", "in", "prefix", "not_prefix", "exists", "missing"];
+export type ConditionOperator = (typeof CONDITION_OPERATORS)[number];
+export interface ConditionRow {
+    path: string;
+    /** Absent means equals. */
+    operator?: ConditionOperator;
+    /** Comma-separated for not, in, prefix and not_prefix. Unused for exists and missing. */
+    value: string;
+}
+type TriggerFilter = Record<string, TriggerFilterValue>;
+/** False for exists and missing: those rows have no value field. */
+export declare function conditionNeedsValue(operator?: ConditionOperator): boolean;
+export declare function conditionsToRows(filter: TriggerFilter | null | undefined): ConditionRow[];
+/** Blank paths are dropped. `null` means "run on everything". */
+export declare function rowsToConditions(rows: ConditionRow[]): TriggerFilter | null;
+export declare function sameConditions(a: TriggerFilter | null, b: TriggerFilter | null | undefined): boolean;
+/** The label each operator shows in the editor and the read-only view. */
+export declare function useConditionOperatorLabels(): Record<ConditionOperator, string>;
+/**
+ * Repeatable "field · operator · value" rows. Not a JSON box on purpose — the
+ * shape is always a flat map, and the loop-breaking case in the help text is
+ * the one nearly everybody needs.
+ */
+export declare function ConditionsEditor({ rows, onChange, disabled, }: {
+    rows: ConditionRow[];
+    onChange: (next: ConditionRow[]) => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+export declare const TIMEZONES: string[];
+/** A labelled field, not the borderless pill this used to be — a timezone
+ *  changes when every run happens, so it should look like a setting. */
+export declare function TimezoneField({ value, onChange, disabled, inline, className, }: {
+    value: string;
+    onChange: (next: string) => void;
+    disabled?: boolean;
+    /** A field in a row of fields: the daylight-saving note moves to the
+     *  trigger's tooltip so the row keeps one height. */
+    inline?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/customize/triggers/schedule/schedule-fields.js

@@ -0,0 +1,172 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from '../../../i18n/index.js';
+/**
+ * The controls the create flow and the detail panel both use, so the two can
+ * never drift. Everything here is presentational — the caller decides whether
+ * a change is staged locally or written straight back.
+ */
+import { Button } from '../../../primitives/button.js';
+import { Input } from '../../../primitives/input.js';
+import { Label } from '../../../primitives/label.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../primitives/select.js';
+import { errorToast, successToast } from '../../../primitives/toast.js';
+import { cn } from '../../../internal/lib/utils.js';
+import { copyToClipboard } from '../../../internal/lib/utils/clipboard.js';
+import { CheckIcon, CopyIcon, PlusIcon, TrashIcon } from '@phosphor-icons/react';
+import { AnimatedCopyIcon } from '../../../animated-copy-icon.js';
+import { useState } from 'react';
+import { SESSION_MODE_HELP, SESSION_MODE_LABEL, SESSION_MODES, } from './schedule-copy.js';
+/* ─── Read-only property list ───────────────────────────────────────────── */
+/**
+ * Label/value pairs. A `<dl>` rather than the `<Table>` this used to be: a
+ * table drew a full bordered grid around four facts and read as data you
+ * could act on.
+ */
+export function PropertyList({ rows, }) {
+    return (_jsx("dl", { className: "divide-border/60 divide-y", children: rows.map((row) => (_jsxs("div", { className: "flex flex-col gap-0.5 py-2 first:pt-0 last:pb-0 sm:flex-row sm:items-baseline sm:gap-4", children: [_jsx("dt", { className: "text-muted-foreground shrink-0 text-xs sm:w-32", children: row.label }), _jsx("dd", { className: "text-foreground min-w-0 flex-1 text-sm break-words", children: row.value })] }, row.label))) }));
+}
+/* ─── Copyable value ────────────────────────────────────────────────────── */
+/**
+ * A value you are meant to take somewhere else — the webhook address, the
+ * sample request. The copy control crossfades its icon (scale 0.25→1,
+ * opacity 0→1, blur 4px→0 on a `bounce: 0` spring) so the confirmation reads
+ * as one morph rather than two glyphs blinking.
+ */
+export function CopyBlock({ value, copiedLabel = 'Copied', label = 'Copy', multiline = false, className, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const [copied, setCopied] = useState(false);
+    const copy = async () => {
+        const ok = await copyToClipboard(value);
+        if (!ok) {
+            errorToast(tI18nComplete.raw('text9eb5ba7f83b0'));
+            return;
+        }
+        successToast(copiedLabel);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1600);
+    };
+    return (_jsxs("div", { className: cn('bg-secondary flex items-start gap-2 rounded-md border p-2 transition-colors', copied ? 'border-kortix-green/15' : 'border-transparent', className), children: [_jsx("code", { className: cn('text-foreground min-w-0 flex-1 px-1 py-0.5 font-mono text-xs leading-relaxed', 
+                // Horizontal only. This used to be `max-h-40 overflow-auto`, which put
+                // a SECOND vertical scroller inside a sheet that already scrolls — the
+                // wheel then goes to whichever surface the cursor happens to be over,
+                // so the sheet appears stuck the moment you point at a webhook URL.
+                // One vertical scrolling surface per view; long values make the sheet
+                // taller and the sheet scrolls, which is what a reader expects.
+                multiline ? 'block overflow-x-auto whitespace-pre' : 'block truncate'), children: value }), _jsx("button", { type: "button", onClick: copy, "aria-label": copied ? copiedLabel : label, className: cn('inline-flex size-7 shrink-0 items-center justify-center rounded-md', 'text-muted-foreground hover:text-foreground hover:bg-foreground/[0.06]', 'hit-area-2 cursor-pointer transition-colors active:scale-[0.96]', 'outline-none focus-visible:outline-none'), children: _jsx("span", { className: "relative inline-flex size-3.5 items-center justify-center", children: _jsx(AnimatedCopyIcon, { copied: copied, children: copied ? (_jsx(CheckIcon, { className: "text-kortix-green size-3.5" })) : (_jsx(CopyIcon, { className: "size-3.5" })) }) }) })] }));
+}
+/* ─── Where the work happens ────────────────────────────────────────────── */
+/**
+ * The wire calls this `session_mode` with values `fresh` / `reuse` /
+ * `pinned` / `keyed`. None of those words appear here: the question is
+ * "does the agent remember the last run?", so the options answer that, and
+ * the help line under the picker only explains the option you actually chose
+ * instead of listing all four.
+ */
+export function RunLocationFields({ mode, onModeChange, pinnedSessionId, onPinnedSessionChange, sessionKey, onSessionKeyChange, sessions, sessionsLoading, sessionKeyAction, disabled, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs(Select, { value: mode, onValueChange: (v) => onModeChange(v), disabled: disabled, children: [_jsx(SelectTrigger, { className: "w-full cursor-pointer text-sm", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: SESSION_MODES.map((m) => (_jsx(SelectItem, { value: m, className: "cursor-pointer", children: SESSION_MODE_LABEL[m] }, m))) })] }), _jsx("p", { className: "text-muted-foreground text-xs leading-relaxed text-pretty", children: SESSION_MODE_HELP[mode] }), mode === 'pinned' && (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs", children: tI18nComplete.raw('text6959b4159575') }), _jsxs(Select, { value: pinnedSessionId ?? '', onValueChange: onPinnedSessionChange, disabled: sessionsLoading || disabled, children: [_jsx(SelectTrigger, { className: "w-full cursor-pointer text-sm", children: _jsx(SelectValue, { placeholder: sessionsLoading
+                                        ? tI18nComplete.raw('textc4141f554a0c')
+                                        : tI18nComplete.raw('textb40f3be54b3e') }) }), _jsxs(SelectContent, { children: [sessions.map((s) => (_jsx(SelectItem, { value: s.session_id, className: "cursor-pointer", children: s.name || s.branch_name || s.session_id }, s.session_id))), !sessionsLoading && sessions.length === 0 && (_jsx("div", { className: "text-muted-foreground px-2 py-1.5 text-xs", children: tI18nComplete.raw('texte6bfacea252e') }))] })] })] })), mode === 'keyed' && (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs", children: tI18nComplete.raw('text7dc864ffbdfe') }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { value: sessionKey, onChange: (e) => onSessionKeyChange(e.target.value), placeholder: tI18nComplete.raw('text56c6c5117e48'), className: "font-mono text-sm", disabled: disabled }), sessionKeyAction] }), _jsx("p", { className: "text-muted-foreground text-xs leading-relaxed text-pretty", children: tI18nComplete.raw('textd9bed5da95cc') })] }))] }));
+}
+/* ─── Conditions (the wire calls this `filter`) ─────────────────────────── */
+/**
+ * The editor's operators: the wire's `not`, `in`, `prefix`, `not_prefix`, plus
+ * `equals` (a plain value) and `exists` split into "exists" / "missing".
+ */
+export const CONDITION_OPERATORS = ['equals', 'not', 'in', 'prefix', 'not_prefix', 'exists', 'missing'];
+/** False for exists and missing: those rows have no value field. */
+export function conditionNeedsValue(operator = 'equals') {
+    return operator !== 'exists' && operator !== 'missing';
+}
+export function conditionsToRows(filter) {
+    return Object.entries(filter ?? {}).map(([path, condition]) => {
+        if (typeof condition === 'string')
+            return { path, operator: 'equals', value: condition };
+        if ('exists' in condition)
+            return { path, operator: condition.exists ? 'exists' : 'missing', value: '' };
+        const [operator, values] = Object.entries(condition)[0];
+        return { path, operator, value: values.join(', ') };
+    });
+}
+function rowCondition(row) {
+    const operator = row.operator ?? 'equals';
+    if (operator === 'equals')
+        return row.value.trim();
+    if (!conditionNeedsValue(operator))
+        return { exists: operator === 'exists' };
+    const values = row.value.split(',').map((item) => item.trim()).filter(Boolean);
+    return { [operator]: values };
+}
+/** Blank paths are dropped. `null` means "run on everything". */
+export function rowsToConditions(rows) {
+    const out = {};
+    for (const row of rows) {
+        const path = row.path.trim();
+        if (!path)
+            continue;
+        out[path] = rowCondition(row);
+    }
+    return Object.keys(out).length > 0 ? out : null;
+}
+export function sameConditions(a, b) {
+    const left = a ?? {};
+    const right = b ?? {};
+    const keys = Object.keys(left);
+    if (keys.length !== Object.keys(right).length)
+        return false;
+    return keys.every((k) => JSON.stringify(left[k]) === JSON.stringify(right[k]));
+}
+/** The label each operator shows in the editor and the read-only view. */
+export function useConditionOperatorLabels() {
+    const t = useTranslations('triggerConditions');
+    return {
+        equals: t('equals'),
+        not: t('not'),
+        in: t('in'),
+        prefix: t('prefix'),
+        not_prefix: t('notPrefix'),
+        exists: t('exists'),
+        missing: t('missing'),
+    };
+}
+/**
+ * Repeatable "field · operator · value" rows. Not a JSON box on purpose — the
+ * shape is always a flat map, and the loop-breaking case in the help text is
+ * the one nearly everybody needs.
+ */
+export function ConditionsEditor({ rows, onChange, disabled, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tConditions = useTranslations('triggerConditions');
+    const operatorLabel = useConditionOperatorLabels();
+    const patch = (index, next) => onChange(rows.map((row, i) => (i === index ? { ...row, ...next } : row)));
+    return (_jsxs("div", { className: "space-y-3", children: [rows.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: tI18nComplete.raw('text04dba7c76354') })) : (_jsx("div", { className: "space-y-2", children: rows.map((row, index) => (
+                // Rows are edited in place and identified positionally; there is
+                // no stable id to key on until a field is typed.
+                // biome-ignore lint/suspicious/noArrayIndexKey: positional rows
+                _jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)_auto] items-center gap-2", children: [_jsx(Input, { value: row.path, onChange: (e) => patch(index, { path: e.target.value }), placeholder: tI18nComplete.raw('textf26d53b6b546'), "aria-label": tI18nComplete('text74eb6d987ed6', { value0: index + 1 }), className: "font-mono text-xs", disabled: disabled }), _jsxs(Select, { value: row.operator ?? 'equals', onValueChange: (v) => patch(index, { operator: v }), disabled: disabled, children: [_jsx(SelectTrigger, { className: "w-48 shrink-0 cursor-pointer text-xs", "aria-label": tConditions('operatorLabel', { value0: index + 1 }), children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: CONDITION_OPERATORS.map((op) => (_jsx(SelectItem, { value: op, className: "cursor-pointer text-xs", children: operatorLabel[op] }, op))) })] }), !conditionNeedsValue(row.operator) && _jsx("span", { "aria-hidden": true }), conditionNeedsValue(row.operator) && (_jsx(Input, { value: row.value, onChange: (e) => patch(index, { value: e.target.value }), placeholder: (row.operator ?? 'equals') === 'equals'
+                                ? tI18nComplete.raw('textd62c9039203e')
+                                : tConditions('listPlaceholder'), "aria-label": tI18nComplete('text54dcdc410e46', { value0: index + 1 }), className: "font-mono text-xs", disabled: disabled })), _jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": tI18nComplete('textee6d71904b1b', { value0: index + 1 }), disabled: disabled, onClick: () => onChange(rows.filter((_, i) => i !== index)), children: _jsx(TrashIcon, { className: "size-4 shrink-0" }) })] }, index))) })), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "gap-1.5", disabled: disabled, onClick: () => onChange([...rows, { path: '', operator: 'equals', value: '' }]), children: [_jsx(PlusIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text60a0d83510ea')] }), _jsxs("p", { className: "text-muted-foreground text-xs leading-relaxed text-pretty", children: [tI18nComplete.raw('text0ba9223946de'), ' ', _jsx("code", { className: "font-mono", children: "body.data.direction" }), ' ', tI18nComplete.raw('text663ea1bfffe5'), " ", _jsx("code", { className: "font-mono", children: "inbound" }), ' ', tI18nComplete.raw('text9df96b5f7d02')] })] }));
+}
+/* ─── Timezone ──────────────────────────────────────────────────────────── */
+export const TIMEZONES = [
+    'UTC',
+    'America/New_York',
+    'America/Chicago',
+    'America/Denver',
+    'America/Los_Angeles',
+    'Europe/London',
+    'Europe/Berlin',
+    'Europe/Paris',
+    'Asia/Tokyo',
+    'Asia/Shanghai',
+    'Asia/Kolkata',
+    'Australia/Sydney',
+];
+/** A labelled field, not the borderless pill this used to be — a timezone
+ *  changes when every run happens, so it should look like a setting. */
+export function TimezoneField({ value, onChange, disabled, inline = false, className, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const hint = tI18nComplete.raw('textbd2b129daf78');
+    return (_jsxs("div", { className: cn('space-y-1.5', className), children: [_jsx(Label, { className: "text-xs", children: tI18nComplete.raw('text4ceca1d52ced') }), _jsxs(Select, { value: value, onValueChange: onChange, disabled: disabled, children: [_jsx(SelectTrigger, { className: cn('w-full cursor-pointer text-sm', inline && 'h-9'), title: inline ? hint : undefined, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: TIMEZONES.map((tz) => (_jsx(SelectItem, { value: tz, className: "cursor-pointer", children: tz }, tz))) })] }), inline ? null : _jsx("p", { className: "text-muted-foreground text-xs", children: hint })] }));
+}

package/dist/customize/triggers/schedule/then-fields.d.ts

@@ -0,0 +1,12 @@
+import { type Agent } from '@kortix/sdk/react';
+import { type PatchDraft } from './composer-parts.js';
+import type { ComposerDraft } from './trigger-composer-logic.js';
+/** Then: what the agent does, which agent, which model. */
+export declare function ThenFields({ agents, draft, patch, payloadSchema, error, }: {
+    agents: Agent[];
+    draft: ComposerDraft;
+    patch: PatchDraft;
+    /** The chosen event's payload, for the variable chips. */
+    payloadSchema: Record<string, unknown> | null | undefined;
+    error?: string;
+}): import("react").JSX.Element;

package/dist/customize/triggers/schedule/then-fields.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from '../../../primitives/label.js';
+import { Textarea } from '../../../primitives/textarea.js';
+import { ModelSelector } from '../../../session/models/model-selector.js';
+import { AgentSelector } from '../../../session/composer/session-chat-input.js';
+import { useTranslations as useI18nTranslations } from '../../../i18n/index.js';
+import { flattenModels, modelProviderMode, useRuntimeProviders, } from '@kortix/sdk/react';
+import { useMemo, useRef } from 'react';
+import { InlineError } from './composer-parts.js';
+import { PromptVariableHints } from './event-trigger-fields.js';
+/** Then: what the agent does, which agent, which model. */
+export function ThenFields({ agents, draft, patch, payloadSchema, error, }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const promptRef = useRef(null);
+    const { data: providers } = useRuntimeProviders();
+    const models = useMemo(() => flattenModels(providers, { providerMode: modelProviderMode(providers) }), [providers]);
+    function insertVariable(token) {
+        const el = promptRef.current?.textArea;
+        const text = draft.instruction;
+        const at = el?.selectionStart ?? text.length;
+        const end = el?.selectionEnd ?? at;
+        // Two chips in a row read as two words, not `}}{{`.
+        const insert = at > 0 && !/\s/.test(text[at - 1]) ? ` ${token}` : token;
+        patch({ instruction: `${text.slice(0, at)}${insert}${text.slice(end)}` });
+        requestAnimationFrame(() => {
+            el?.focus();
+            el?.setSelectionRange(at + insert.length, at + insert.length);
+        });
+    }
+    // An input-height field around the chat selectors, so Agent and Model line
+    // up with every other field. The selector's own button fills it, label left,
+    // caret right, like a Select trigger.
+    const panel = 'bg-popover border-border flex h-9 w-full items-center rounded-md border px-0.5 [&_button]:h-8 [&_button]:w-full [&_button]:justify-between';
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Textarea, { value: draft.instruction, ref: promptRef, onChange: (e) => patch({ instruction: e.target.value }), "aria-label": tI18nComplete.raw('text112f3ccb1b36'), "aria-invalid": error ? true : undefined, placeholder: tI18nComplete.raw('text2438ee64fbf9'), rows: 3, className: "leading-relaxed" }), _jsx(InlineError, { message: error }), draft.kind === 'event' && draft.eventType ? (_jsx(PromptVariableHints, { payloadSchema: payloadSchema, onInsert: insertVariable })) : (_jsx("p", { className: "text-muted-foreground text-xs leading-relaxed text-pretty", children: tI18nComplete.raw('text03956d4b33dc') }))] }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs", children: tI18nComplete.raw('text11b39c93777e') }), _jsx("div", { className: panel, children: _jsx(AgentSelector, { agents: agents, selectedAgent: draft.agent, triggerLabelClassName: "max-w-none", onSelect: (agent) => patch({ agent }) }) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs", children: tI18nComplete.raw('text5e2c614c23f0') }), _jsx("div", { className: panel, children: _jsx(ModelSelector, { models: models, providers: providers, selectedModel: draft.model, unsetLabel: tI18nComplete.raw('text57069bbd0d2e'), triggerLabelClassName: "max-w-none", onSelect: (model) => patch({ model }) }) })] })] })] }));
+}