@kortix/ui 0.0.0-stage → 0.14.4

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

@@ -0,0 +1,421 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslations } from '../../i18n/index.js';
+/**
+ * Triggers — the single capability page at `/projects/<id>/triggers`,
+ * mounted by `packages/ui/src/customize/triggers/triggers-page.tsx`.
+ *
+ * A trigger is one resource with two ways to start it: on a schedule, or from
+ * an incoming webhook. This view lists both together — the create flow is
+ * where a person picks which kind they want (`schedule/schedule-create-modal.tsx`).
+ * Per-kind wording lives in `schedule/schedule-copy.ts`'s `KIND_COPY`, keyed
+ * off each row's own `trigger.type`, never a page-wide prop.
+ *
+ * The list, panel, and create flow live in `./schedule/*`; this file owns the
+ * data, the permissions, and the mutations the row actions and the panel both
+ * fire, so a pause started from a row and a pause started from the panel are
+ * the same code path.
+ *
+ * **Chrome.** This view renders `CapabilityPageShell` itself — the same shell
+ * Connectors, Agents and Skills use — so all four tabs of the Customize bar
+ * share one column width (`max-w-5xl`), one heading shape, and one header
+ * group (search, then the actions). The shell can only own the heading if the
+ * page hands it the controls that sit beside it, which is why the search box
+ * and the "New trigger" button are passed up into its `search` / `action`
+ * slots rather than rendered inside the list column. `triggers-page.tsx` is a
+ * one-line mount as a result: the shell is the route's scroll container.
+ */
+import { AppLogo } from '../../workspace/projects/onboarding/app-logo.js';
+import { fireResultToast, triggerToastEntity } from './schedule/trigger-toast.js';
+import { Alert, AlertActions, AlertDescription, AlertTitle } from '../../primitives/alert.js';
+import { Button } from '../../primitives/button.js';
+import { ButtonGroup } from '../../primitives/button-group.js';
+import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../../primitives/dropdown-menu.js';
+import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from '../../primitives/input-group.js';
+import Loading from '../../primitives/loading.js';
+import { Skeleton } from '../../primitives/skeleton.js';
+import { SplitSheet, SplitSheetMain } from '../../primitives/split-sheet.js';
+import { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { EmptyState } from '../../primitives/empty-state.js';
+import { ErrorState } from '../../primitives/error-state.js';
+import { CapabilityPageShell } from '../shared/capability-page-shell.js';
+import { NewEntityMenu, RICH_ROW_CLASS, RichRowBody, } from '../shared/new-entity-menu.js';
+import { newConfigPrompt, useConfigureThread, } from '../use-configure-thread.js';
+import { useProjectFeatureFlags } from '../../internal/lib/use-project-feature-flags.js';
+import { hasOpenFloatingLayer } from '../../lib/z-stack.js';
+import { deleteProjectTrigger, fireProjectTrigger, listProjectTriggers, setProjectTriggersActivation, updateProjectTrigger, } from '@kortix/sdk';
+import { contract, qk, useProjectTriggerEventApps, useTriggerRuns } from '@kortix/sdk/react';
+import { CheckSquareIcon, DotsThreeIcon, LightningIcon, PauseIcon, PlayIcon, PlusIcon, MagnifyingGlassIcon as SearchIcon, } from '@phosphor-icons/react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useUiPathname, useUiRouter, useUiSearchParams } from '../../providers/ui-provider.js';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useDebounce } from '../../hooks/use-debounce.js';
+import { useSlashFocus } from '../../internal/hooks/index.js';
+import { EventAppsStrip } from './schedule/event-apps-strip.js';
+import { describeWhen, isCustomerTrigger, isTriggerKind, localizedKindCopy, localizedTriggersCopy, matchesQuery, triggerName, } from './schedule/schedule-copy.js';
+import { ScheduleDetailSplitContent } from './schedule/schedule-detail-sheet.js';
+import { TriggerComposer } from './schedule/trigger-composer.js';
+import { useTriggerControls } from './schedule/trigger-controls.js';
+import { TRIGGER_FILTERS, filterTriggers, groupTriggersByApp, parseTriggerFilter, readTriggerSheet, triggerSheetHref, } from './schedule/trigger-filter.js';
+import { TriggerList } from './schedule/trigger-list.js';
+import { runsInFlight } from './schedule/trigger-runs-logic.js';
+import { runsOf } from './schedule/trigger-runs-panel.js';
+import { bulkTargets, runSequentially, selectAllShown, selectRange, toggleSlug, visibleSelection, } from './schedule/trigger-selection.js';
+import { TriggerSelectionBar } from './schedule/trigger-selection-bar.js';
+import { useEventTitles } from './schedule/use-event-titles.js';
+/** Tab label per filter: the three kinds reuse the page's existing words. */
+const FILTER_LABEL_KEY = {
+    all: 'texta52ace420f21',
+    cron: 'text221ff19c904c',
+    event: 'text4b4847a6fb87',
+    webhook: 'text45808d75bf89',
+};
+/**
+ * Pure: no hooks, no data fetching. The toolbar's ⋯ menu (Paper C03 `6O9-0`
+ * + `6YS-0`) for a viewer who may update triggers; `null` for anyone else.
+ * It holds the project-wide switch: Pause all (with the active count beside
+ * it) and Resume all, each disabled while it would change nothing. Split from
+ * {@link TriggerActivationMenu} so the gate renders under
+ * `renderToStaticMarkup` without a QueryClient.
+ */
+export function TriggerToolbarMenu({ canManage, paused, isPending, onToggle, onSelectMode, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    if (!canManage)
+        return null;
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon-base", disabled: isPending, "aria-label": tI18nComplete.raw('textd47d7cb0e4f8'), children: _jsx(DotsThreeIcon, { className: "text-muted-foreground size-4 shrink-0" }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-76", children: [_jsx(DropdownMenuItem, { className: RICH_ROW_CLASS, disabled: paused, onSelect: () => onToggle(true), children: _jsx(RichRowBody, { icon: PauseIcon, title: tI18nComplete.raw('text0b6258b50010'), description: tI18nComplete.raw('textdae75dce541f') }) }), _jsx(DropdownMenuItem, { className: RICH_ROW_CLASS, disabled: !paused, onSelect: () => onToggle(false), children: _jsx(RichRowBody, { icon: PlayIcon, title: tI18nComplete.raw('text43e673c5503d'), description: tI18nComplete.raw('textced57bebd466') }) }), onSelectMode ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: onSelectMode, children: [_jsx(CheckSquareIcon, {}), tI18nComplete.raw('text2a78025de6aa')] })] })) : null] })] }));
+}
+/**
+ * The project-wide pause switch (`PATCH /projects/:id/triggers/activation`):
+ * `mutate(true)` pauses every schedule and webhook, `mutate(false)` resumes.
+ * The toolbar menu and the paused alert share it, so both toast and update
+ * the cached listing the same way.
+ */
+export function useTriggersActivation(projectId) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: (next) => setProjectTriggersActivation(projectId, next),
+        onSuccess: (data, next) => {
+            queryClient.setQueryData(qk.project.triggers(projectId), data);
+            successToast(next ? tI18nComplete.raw('text5f6f23bff165') : tI18nComplete.raw('text5e4efd91b927'));
+        },
+        onError: (error) => errorToast(error.message || tI18nComplete.raw('text43ec39943667')),
+    });
+}
+/**
+ * Project-wide "pause everything" control — rendered on Triggers only (see
+ * {@link ScheduleView}'s call site), since it needs exactly one home.
+ * Formerly `TriggersActivationCard`, a full-width banner above the list, then
+ * a switch inside a gear popover.
+ *
+ * It sits in the header beside "New trigger": one click, labelled, and not in
+ * the list column. The paused STATE keeps its prominent home in the page's
+ * warning banner; only the control lives here.
+ *
+ * **Access gate — the update control, not the create one.** `ScheduleView`
+ * below offers New trigger on `canCreate`. This control is the project-wide
+ * kill switch, and the route behind it (`PATCH /projects/:id/triggers/activation`,
+ * `routes/triggers.ts`) loads the project for write and asserts
+ * `project.trigger.update` — a DIFFERENT leaf, independently grantable. So it
+ * reads `canUpdate` from the same trigger controls (KRTX-1720), never a role
+ * label, which is what it used to do (`effective_project_role === 'manager'`).
+ *
+ * Reads `qk.project.triggers(projectId)` with its OWN `useQuery` — the SAME
+ * key `ScheduleView` queries below. React Query dedupes both calls into one
+ * request and one cache write, so this button and `ScheduleView`'s paused
+ * banner can never disagree or double-fetch.
+ *
+ * Exported for `trigger-activation-menu.test.tsx`, which renders it per role.
+ */
+export function TriggerActivationMenu({ projectId, onSelectMode, }) {
+    const queryKey = qk.project.triggers(projectId);
+    const triggersQuery = useQuery({
+        queryKey,
+        queryFn: () => listProjectTriggers(projectId),
+        ...contract('config'),
+    });
+    const paused = triggersQuery.data?.triggers_paused ?? false;
+    // The leaves the activation route asserts (project.write +
+    // project.trigger.update) — see this component's header comment for why this
+    // is the update control rather than `ScheduleView`'s create gate.
+    const canManage = useTriggerControls(projectId).canUpdate;
+    const mutation = useTriggersActivation(projectId);
+    return (_jsx(TriggerToolbarMenu, { canManage: canManage, paused: paused, isPending: mutation.isPending || triggersQuery.isLoading, onToggle: (v) => mutation.mutate(v), onSelectMode: onSelectMode }));
+}
+export function ScheduleView({ projectId }) {
+    const router = useUiRouter();
+    const pathname = useUiPathname();
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tAutomations = useTranslations('automationsPause');
+    const copy = localizedTriggersCopy(tI18nComplete);
+    const kindCopy = localizedKindCopy(tI18nComplete);
+    const queryClient = useQueryClient();
+    // One leaf per control, the same as on the Agent page (KRTX-1720).
+    const controls = useTriggerControls(projectId);
+    const canWrite = controls.canCreate;
+    // Same entity/fetcher `TriggersActivationCard` above reads — both must share
+    // this key, via `qk.project.triggers`, or a pause in one goes unseen in the
+    // other (see that component's own header comment).
+    const queryKey = useMemo(() => qk.project.triggers(projectId), [projectId]);
+    const triggersQuery = useQuery({
+        queryKey,
+        queryFn: () => listProjectTriggers(projectId),
+        ...contract('config'),
+        refetchInterval: 10_000,
+    });
+    const [query, setQuery] = useState('');
+    // The input shows every keystroke; the list filters 200 ms after the last one.
+    const { debouncedValue: debouncedQuery } = useDebounce(query, 200);
+    const [createOpen, setCreateOpen] = useState(false);
+    // The empty state's "App event" button opens the form past the type step.
+    const [createKind, setCreateKind] = useState(null);
+    // The app picked in the "Apps with events" strip. The composer lists its events and sends no request.
+    const [createApp, setCreateApp] = useState(null);
+    const openCreate = (kind = null, app = null) => {
+        setCreateKind(kind);
+        setCreateApp(app);
+        setCreateOpen(true);
+    };
+    const configure = useConfigureThread(projectId);
+    const searchParams = useUiSearchParams();
+    // `?id=<trigger id>[&tab=runs]` is the open trigger: a link, Back and Forward all open it.
+    const sheet = readTriggerSheet(searchParams);
+    // App events are a beta feature behind the project flag `event_triggers`. Fail
+    // closed: until the flag resolves on, nothing that lists, browses or requests events renders.
+    const featureFlags = useProjectFeatureFlags(projectId);
+    const eventsOn = featureFlags.flags.event_triggers === true;
+    const filters = useMemo(() => (eventsOn ? TRIGGER_FILTERS : TRIGGER_FILTERS.filter((f) => f !== 'event')), [eventsOn]);
+    // `?type=cron|event|webhook` is the kind filter; anything else, and `event` while events are off, is all.
+    const filter = parseTriggerFilter(searchParams?.get('type'), filters);
+    const setFilter = (next) => {
+        const params = new URLSearchParams(searchParams?.toString() ?? '');
+        if (next === 'all')
+            params.delete('type');
+        else
+            params.set('type', next);
+        const qs = params.toString();
+        router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+    };
+    // A null project id keeps the hook idle: with events off the page asks for no event data at all.
+    const eventApps = useProjectTriggerEventApps(eventsOn ? projectId : null);
+    const navigateSheet = (next) => {
+        const { href, mode } = triggerSheetHref(pathname, searchParams?.toString() ?? '', next, selected !== null);
+        if (mode === 'push')
+            router.push(href, { scroll: false });
+        else
+            router.replace(href, { scroll: false });
+    };
+    const openTrigger = (slug) => navigateSheet({ slug });
+    const closeTrigger = () => navigateSheet({ slug: null });
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const invalidate = useCallback(() => queryClient.invalidateQueries({ queryKey }), [queryClient, queryKey]);
+    /* ── Mutations shared by the row menu and the detail panel ───────────── */
+    const run = useMutation({
+        mutationFn: (trigger) => fireProjectTrigger(projectId, trigger.slug),
+        onSuccess: (res, trigger) => {
+            fireResultToast(res, trigger, projectId, tI18nComplete, router);
+            invalidate();
+        },
+        onError: (err) => errorToast(err instanceof Error ? err.message : tI18nComplete.raw('textfc56800b00af')),
+    });
+    // The paused alert's own Resume all: the same switch and hook as the toolbar menu.
+    const resumeAll = useTriggersActivation(projectId);
+    const remove = useMutation({
+        mutationFn: (trigger) => deleteProjectTrigger(projectId, trigger.slug),
+        onSuccess: (_data, trigger) => {
+            // Safe: `trigger` came off the `triggers` list above, already filtered
+            // to `isTriggerKind`.
+            const noun = kindCopy[trigger.type].noun;
+            successToast(tI18nComplete('text65e31e8628a9', { value0: noun[0].toUpperCase(), value1: noun.slice(1) }), { entity: triggerToastEntity(trigger) });
+            setDeleteTarget(null);
+            closeTrigger();
+            invalidate();
+        },
+        onError: (err) => errorToast(err instanceof Error ? err.message : tI18nComplete.raw('text76bf191d6426')),
+    });
+    /* ── Derived state ──────────────────────────────────────────────────── */
+    const isForbidden = triggersQuery.isError && /403|forbidden/i.test(triggersQuery.error?.message ?? '');
+    const showContent = !triggersQuery.isLoading && !isForbidden && !triggersQuery.isError;
+    // Both kinds, together — the create flow is where a person picks one.
+    // `isTriggerKind` also drops `monitor`-type entries: a separate
+    // experimental feature that shares this backend list but not this screen.
+    // `isCustomerTrigger` then hides the reflector cron the starter seeds into
+    // every new project: hiding it keeps the empty state reachable on a fresh
+    // project without making the customer delete a trigger they never created.
+    // It still schedules and fires — this is display only.
+    const triggers = useMemo(() => (triggersQuery.data?.triggers ?? []).filter((t) => isTriggerKind(t.type) && isCustomerTrigger(t)), [triggersQuery.data]);
+    // The search only renders over a non-empty list; focus it once it does.
+    const searchRef = useRef(null);
+    useSlashFocus(searchRef, showContent && triggers.length > 0);
+    const eventNames = useEventTitles(projectId, triggers, eventsOn, eventApps.data?.apps);
+    const ofKind = useMemo(() => filterTriggers(triggers, filter), [triggers, filter]);
+    const filtered = useMemo(() => ofKind.filter((t) => matchesQuery(t, debouncedQuery, tI18nComplete)), [ofKind, debouncedQuery, tI18nComplete]);
+    const appGroups = useMemo(() => filter === 'event'
+        ? groupTriggersByApp(filtered, eventApps.data?.apps ?? []).map((g) => ({
+            key: g.app,
+            triggers: g.triggers,
+            heading: (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(AppLogo, { src: g.logo }), _jsx("span", { className: "text-foreground text-sm font-medium", children: g.name }), _jsx("span", { className: "text-muted-foreground text-xs tabular-nums", children: g.triggers.length })] })),
+        }))
+        : undefined, [filter, filtered, eventApps.data]);
+    const showFilter = showContent && (triggers.length > 0 || filter !== 'all');
+    // An unknown slug matches nothing: the sheet stays closed, with no error.
+    const selected = triggers.find((t) => t.slug === sheet.slug) ?? null;
+    // The open trigger's runs: the same query (same key) the Runs tab reads, so
+    // no second request. A run in progress makes its clock green and its row
+    // show the dot matrix, for as long as the run lasts, even under the
+    // project-wide pause (Run now still fires there).
+    const [runsLive, setRunsLive] = useState(false);
+    const selectedRuns = useTriggerRuns(projectId, selected?.slug ?? '', {
+        enabled: !!selected,
+        refetchInterval: runsLive ? 5000 : false,
+    });
+    const live = !!selected && runsInFlight(runsOf(selectedRuns));
+    // Adjust state while rendering (guarded): poll only while a run is in progress.
+    if (live !== runsLive)
+        setRunsLive(live);
+    const liveSlug = live && selected ? selected.slug : null;
+    /* ── Select mode: multi-select, then sequential bulk Pause / Resume / Delete ── */
+    const [selectMode, setSelectMode] = useState(false);
+    const [selectedSlugs, setSelectedSlugs] = useState(() => new Set());
+    const [anchorSlug, setAnchorSlug] = useState(null);
+    const [bulkProgress, setBulkProgress] = useState(null);
+    const [bulkDeleteOpen, setBulkDeleteOpen] = useState(false);
+    const orderedSlugs = useMemo(() => (appGroups ? appGroups.flatMap((g) => g.triggers) : filtered).map((t) => t.slug), [appGroups, filtered]);
+    const enterSelectMode = () => {
+        if (selected)
+            closeTrigger();
+        setSelectedSlugs(new Set());
+        setAnchorSlug(null);
+        setSelectMode(true);
+    };
+    const exitSelectMode = useCallback(() => {
+        setSelectMode(false);
+        setSelectedSlugs(new Set());
+        setAnchorSlug(null);
+    }, []);
+    useEffect(() => {
+        if (!selectMode)
+            return;
+        const onKey = (e) => {
+            // An Esc that a dialog or menu already handled is theirs, not the selection's.
+            if (e.key !== 'Escape' || e.defaultPrevented || hasOpenFloatingLayer())
+                return;
+            if (bulkProgress || bulkDeleteOpen)
+                return;
+            exitSelectMode();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [selectMode, bulkProgress, bulkDeleteOpen, exitSelectMode]);
+    // A filter or search change drops the selection: bulk actions never reach hidden rows.
+    const selectionScope = `${filter}\u0000${debouncedQuery}`;
+    const [selectionScopeSeen, setSelectionScopeSeen] = useState(selectionScope);
+    if (selectionScope !== selectionScopeSeen) {
+        setSelectionScopeSeen(selectionScope);
+        setSelectedSlugs(new Set());
+        setAnchorSlug(null);
+    }
+    // …and intersects with what is shown at action time, as a second guard.
+    const actionable = useMemo(() => visibleSelection(filtered, selectedSlugs), [filtered, selectedSlugs]);
+    // Stops a running bulk loop between items when the page unmounts.
+    const bulkCancelled = useRef(false);
+    useEffect(() => {
+        bulkCancelled.current = false;
+        return () => {
+            bulkCancelled.current = true;
+        };
+    }, []);
+    const BULK_RESULT_KEY = {
+        pause: 'textd845c8702b04',
+        resume: 'texte57e0a07011b',
+        delete: 'text1412a8506003',
+    };
+    // ponytail: one request per trigger, in order (no bulk trigger API yet;
+    // each write commits the manifest, so concurrency 1 avoids commit conflicts).
+    const runBulk = async (verb) => {
+        const items = verb === 'delete'
+            ? triggers.filter((t) => actionable.has(t.slug))
+            : bulkTargets(triggers, actionable, verb === 'resume');
+        if (items.length === 0)
+            return;
+        setBulkProgress({ verb, done: 0, total: items.length });
+        const tally = await runSequentially(items, (t) => verb === 'delete'
+            ? deleteProjectTrigger(projectId, t.slug)
+            : updateProjectTrigger(projectId, t.slug, { enabled: verb === 'resume' }), (done, total) => setBulkProgress({ verb, done, total }), () => bulkCancelled.current);
+        if (tally.cancelled)
+            return;
+        setBulkProgress(null);
+        const message = tI18nComplete(BULK_RESULT_KEY[verb], { ok: tally.ok, failed: tally.failed });
+        // Each failure's own reason, first three, under the tally.
+        if (tally.failed > 0)
+            errorToast(message, { description: tally.errors.slice(0, 3).join('\n') });
+        else
+            successToast(message);
+        if (verb === 'delete')
+            setSelectedSlugs(new Set());
+        void invalidate();
+    };
+    const parseErrors = triggersQuery.data?.errors ?? [];
+    const paused = triggersQuery.data?.triggers_paused ?? false;
+    const accountPaused = triggersQuery.data?.account_automations_paused ?? false;
+    return (
+    // The open trigger takes a column beside the list, wider than it (60/40):
+    // while it is open it is the main content. Below 48rem it covers the list.
+    // The route's `flex min-h-0 flex-1` column bounds the height.
+    _jsxs(SplitSheet, { open: !!selected, onOpenChange: (next) => {
+            if (!next)
+                closeTrigger();
+        }, size: "lg", className: "flex-1 [--split-sheet-max:60%] [--split-sheet-width:60%]", children: [_jsxs(SplitSheetMain, { className: "relative flex flex-col", children: [_jsxs(CapabilityPageShell
+                    /* The heading comes from `TRIGGERS_COPY` — this is one page now, not a
+                   pane switched by `type`. It read the Settings rail while
+                   Schedules/Webhooks were overlay panes; a capability page has no rail
+                   entry, and a rail lookup that misses renders no heading at all. */
+                    , { 
+                        /* The heading comes from `TRIGGERS_COPY` — this is one page now, not a
+                       pane switched by `type`. It read the Settings rail while
+                       Schedules/Webhooks were overlay panes; a capability page has no rail
+                       entry, and a rail lookup that misses renders no heading at all. */
+                        title: copy.title, description: copy.description, 
+                        // Beside an open trigger the list is a 40% column: stack the header so
+                        // search, Pause all and New trigger share one full-width row.
+                        stacked: !!selected, search: showContent && triggers.length > 0 ? (_jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(SearchIcon, {}) }), _jsx(InputGroupSearchInput, { ref: searchRef, placeholder: copy.searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), variant: "popover", size: "sm" }), _jsx(InputGroupSearchClear, { onClick: () => setQuery('') })] })) : undefined, filters: showFilter ? (_jsx(Tabs, { value: filter, onValueChange: (next) => setFilter(parseTriggerFilter(next, filters)), className: "max-w-full overflow-x-auto", children: _jsx(TabsList, { type: "underline", underlineSize: "md", size: "sm", "aria-label": tI18nComplete.raw('text51035b5b67dc'), className: "h-8 justify-start gap-5", children: filters.map((value) => (_jsx(TabsTrigger, { value: value, className: "flex-none px-0 text-xs font-medium", children: tI18nComplete.raw(FILTER_LABEL_KEY[value]) }, value))) }) })) : undefined, action: 
+                        /* One right-hand cluster, secondary control first: the project-wide
+                       pause (its own manager-only probe, NOT this view's `canWrite`), then
+                       the primary create action, last and labelled.
+                       Both are hidden until the list has loaded — neither means anything
+                       on an error or a 403. */
+                        showContent ? (
+                        // Search, then one group: ⋯ and New trigger, both `secondary` at `h-8`.
+                        _jsxs(ButtonGroup, { children: [triggers.length > 0 || paused ? (_jsx(TriggerActivationMenu, { projectId: projectId, onSelectMode: triggers.length > 0 ? enterSelectMode : undefined })) : null, canWrite ? (_jsx(NewEntityMenu, { label: copy.createLabel, pending: configure.pending, onChat: () => configure.start(newConfigPrompt('trigger')), manual: { onSelect: () => openCreate() }, caret: false })) : null] })) : undefined, children: [_jsxs("div", { className: "space-y-4", children: [accountPaused && showContent && (_jsxs(Alert, { variant: "warning", children: [_jsx(AlertTitle, { children: tAutomations('bannerTitle') }), _jsx(AlertDescription, { children: tAutomations('bannerDescription') })] })), paused && showContent && (_jsxs(Alert, { variant: "warning", children: [_jsx(AlertTitle, { children: tI18nComplete.raw('textb18b93a52cd2') }), _jsx(AlertDescription, { children: tI18nComplete.raw('textc9e9d972eda2') }), controls.canUpdate ? (_jsx(AlertActions, { children: _jsxs(Button, { variant: "outline", size: "sm", disabled: resumeAll.isPending, onClick: () => resumeAll.mutate(false), children: [resumeAll.isPending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, tI18nComplete.raw('text43e673c5503d')] }) })) : null] })), triggersQuery.isLoading ? (_jsx("div", { className: "space-y-1", children: Array.from({ length: 5 }).map((_, i) => (
+                                        // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length placeholder
+                                        _jsx(Skeleton, { className: "h-10 rounded-md" }, i))) })) : isForbidden ? (_jsxs(Alert, { variant: "warning", children: [_jsx(AlertTitle, { children: tI18nComplete.raw('textabb84be05cfa') }), _jsxs(AlertDescription, { children: [tI18nComplete.raw('text22cd1f210415'), " ", copy.noun, tI18nComplete.raw('text382584f2456e')] })] })) : triggersQuery.isError ? (_jsx(ErrorState, { size: "sm", title: tI18nComplete('text7ce02a51e3dd', { value0: copy.noun }), description: triggersQuery.error?.message ?? tI18nComplete.raw('text0c953ab32c60'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => triggersQuery.refetch(), children: tI18nComplete.raw('textd8b8392e2c54') }) })) : filter !== 'all' && ofKind.length === 0 ? (_jsx(EmptyState, { size: "sm", title: kindCopy[filter].emptyTitle })) : triggers.length === 0 ? (_jsx(EmptyState, { icon: LightningIcon, title: copy.emptyTitle, description: copy.emptyBody, className: "py-12", action: canWrite ? (_jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: () => openCreate(), children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), copy.createLabel] })) : undefined })) : filtered.length === 0 ? (_jsxs("p", { className: "text-muted-foreground px-3 py-6 text-center text-xs", children: [tI18nComplete.raw('text965b516df3ba'), ' ', _jsx("span", { className: "text-foreground font-medium", children: debouncedQuery }), "."] })) : (_jsx(TriggerList, { triggers: filtered, groups: appGroups, eventNames: eventNames, projectPaused: paused, selectedSlug: selected?.slug ?? null, runningSlug: run.isPending ? (run.variables?.slug ?? null) : liveSlug, onOpen: (t) => openTrigger(t.slug), selection: selectMode
+                                            ? {
+                                                selected: selectedSlugs,
+                                                onToggle: (t, range) => {
+                                                    setSelectedSlugs((prev) => range
+                                                        ? selectRange(prev, orderedSlugs, anchorSlug, t.slug)
+                                                        : toggleSlug(prev, t.slug));
+                                                    setAnchorSlug(t.slug);
+                                                },
+                                            }
+                                            : null })), showContent && eventsOn && filter === 'event' ? (_jsx(EventAppsStrip, { projectId: projectId, disabled: !canWrite, onPick: (app) => openCreate('event', { app: app.app, source: app.source, provider: app.provider }) })) : null, parseErrors.length > 0 && (_jsxs(Alert, { variant: "warning", children: [_jsx(AlertTitle, { children: tI18nComplete.raw('text5f6dc605ac36') }), _jsx(AlertDescription, { children: _jsx("ul", { className: "space-y-0.5 text-xs", children: parseErrors.map((err) => (_jsxs("li", { children: [_jsx("code", { className: "font-mono", children: err.path }), " \u2014 ", err.error] }, err.slug))) }) })] }))] }), _jsx(TriggerComposer, { projectId: projectId, open: createOpen, onOpenChange: setCreateOpen, initialKind: createKind, initialApp: createApp, onCreated: (slug) => {
+                                    setCreateOpen(false);
+                                    invalidate();
+                                    // Drop straight into the new entry so the address or the first run
+                                    // is one click away, not two.
+                                    openTrigger(slug);
+                                } }), _jsx(ConfirmDialog, { open: !!deleteTarget, onOpenChange: (next) => {
+                                    if (!next)
+                                        setDeleteTarget(null);
+                                }, title: tI18nComplete('text4e9e0de01d8a', {
+                                    value0: deleteTarget ? kindCopy[deleteTarget.type].noun : copy.noun,
+                                }), description: deleteTarget ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-foreground font-medium", children: triggerName(deleteTarget) }), " (", describeWhen(deleteTarget).toLowerCase(), tI18nComplete.raw('text33575b279b5e')] })) : null, confirmLabel: tI18nComplete.raw('texte2d0a54968ea'), confirmVariant: "destructive", isPending: remove.isPending, onConfirm: () => deleteTarget && remove.mutate(deleteTarget) }), _jsx(ConfirmDialog, { open: bulkDeleteOpen, onOpenChange: setBulkDeleteOpen, title: tI18nComplete('textd142c482800c', { count: actionable.size }), description: tI18nComplete.raw('text75af4531ed17'), confirmLabel: tI18nComplete.raw('texte2d0a54968ea'), confirmVariant: "destructive", isPending: bulkProgress?.verb === 'delete', onConfirm: () => {
+                                    setBulkDeleteOpen(false);
+                                    void runBulk('delete');
+                                } })] }), selectMode ? (
+                    // Pinned to the bottom of the list column, not to the end of the list:
+                    // `sticky` stops where a short list ends.
+                    _jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-4 z-10 flex justify-center px-4", children: _jsx("div", { className: "pointer-events-auto w-full max-w-xl", children: _jsx(TriggerSelectionBar, { selectedCount: actionable.size, shownCount: filtered.length, allSelected: filtered.length > 0 && filtered.every((t) => selectedSlugs.has(t.slug)), canPause: bulkTargets(triggers, actionable, false).length > 0, canResume: bulkTargets(triggers, actionable, true).length > 0, canDelete: controls.canDelete, progress: bulkProgress, onSelectAll: () => setSelectedSlugs(selectAllShown(filtered)), onClear: () => setSelectedSlugs(new Set()), onPause: () => void runBulk('pause'), onResume: () => void runBulk('resume'), onDelete: () => setBulkDeleteOpen(true), onExit: exitSelectMode }) }) })) : null] }), _jsx(ScheduleDetailSplitContent, { projectId: projectId, trigger: selected, eventsEnabled: eventsOn, controls: controls, initialTab: sheet.tab, projectPaused: paused, live: !!selected && selected.slug === liveSlug, onResumeAll: () => resumeAll.mutate(false), resumingAll: resumeAll.isPending, onTabChange: (tab) => selected && navigateSheet({ slug: selected.slug, tab }), onRun: () => selected && run.mutate(selected), running: run.isPending && run.variables?.slug === selected?.slug, onDelete: () => selected && setDeleteTarget(selected), onMutated: invalidate })] }));
+}

package/dist/customize/triggers/triggers-page.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The page body for /projects/[id]/triggers — the capability tab that
+ * graduated out of the Settings overlay. A trigger is one resource with two
+ * ways to start it (schedule or webhook), so this mounts one `ScheduleView`
+ * listing both, not two kind-locked pages.
+ *
+ * No chrome of its own. `ScheduleView` renders `CapabilityPageShell` — the
+ * same shell Connectors, Agents and Skills use — so Triggers is the same
+ * `max-w-5xl` column with the same heading and header group as its three
+ * sibling tabs. That shell is also the route's scroll container
+ * (`min-h-0 flex-1 overflow-y-auto`), which the `(capabilities)` layout
+ * requires: it is a bounded `h-svh` column, and something inside it has to
+ * scroll or the tab bar above scrolls away with the content.
+ *
+ * This wrapper used to bring its own scroll box and `ScheduleView` its own
+ * `max-w-2xl` heading — which is exactly what made this tab read as a
+ * different product from the three beside it.
+ */
+export declare function TriggersPage({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element;

package/dist/customize/triggers/triggers-page.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScheduleView } from './schedule-view.js';
+/**
+ * The page body for /projects/[id]/triggers — the capability tab that
+ * graduated out of the Settings overlay. A trigger is one resource with two
+ * ways to start it (schedule or webhook), so this mounts one `ScheduleView`
+ * listing both, not two kind-locked pages.
+ *
+ * No chrome of its own. `ScheduleView` renders `CapabilityPageShell` — the
+ * same shell Connectors, Agents and Skills use — so Triggers is the same
+ * `max-w-5xl` column with the same heading and header group as its three
+ * sibling tabs. That shell is also the route's scroll container
+ * (`min-h-0 flex-1 overflow-y-auto`), which the `(capabilities)` layout
+ * requires: it is a bounded `h-svh` column, and something inside it has to
+ * scroll or the tab bar above scrolls away with the content.
+ *
+ * This wrapper used to bring its own scroll box and `ScheduleView` its own
+ * `max-w-2xl` heading — which is exactly what made this tab read as a
+ * different product from the three beside it.
+ */
+export function TriggersPage({ projectId }) {
+    return _jsx(ScheduleView, { projectId: projectId });
+}

package/dist/customize/use-configure-thread.d.ts

@@ -0,0 +1,15 @@
+import type { PendingSessionPrompt } from '@kortix/sdk';
+export { editConfigPrompt, newConfigPrompt, type ConfigureKind } from '../_vendor/shared/index.js';
+export interface ConfigureThread {
+    /** Spin up a configure session for `prompt`, then close Customize + navigate.
+     *  A bare string becomes the default durable payload; a `PendingSessionPrompt`
+     *  (see `pendingUpgradePrompt`) is passed through unchanged. */
+    start: (prompt: string | PendingSessionPrompt) => void;
+    /**
+     * True while a session is being created. Creating one is a network round-trip
+     * (same as the project-home composer), so callers should show a spinner +
+     * disable their trigger — otherwise the button feels dead until we navigate.
+     */
+    pending: boolean;
+}
+export declare function useConfigureThread(projectId: string): ConfigureThread;

package/dist/customize/use-configure-thread.js

@@ -0,0 +1,47 @@
+'use client';
+/**
+ * useConfigureThread — start an agent-led "configure" session from Customize.
+ *
+ * Project config (agents, skills, commands, …) lives in the repo and is
+ * read-only from the UI — the only way to change it is through a session that
+ * edits the files on a branch and opens a change request. So "Create new" and
+ * "Edit" here don't write files directly: they spin up a fresh session seeded
+ * with a prompt, close the Customize overlay, and drop you into the thread
+ * (the session auto-sends the stashed prompt once its runtime is ready, same
+ * as the project-home composer). The agent then asks what you want and opens a
+ * CR you can review + merge.
+ */
+import { useCallback, useState } from 'react';
+import { useNewProjectSession } from '../internal/hooks/projects/use-new-project-session.js';
+import { useSettingsPanelStore } from '../internal/stores/settings-panel-store.js';
+export { editConfigPrompt, newConfigPrompt } from '../_vendor/kortix-shared.js';
+export function useConfigureThread(projectId) {
+    const closeCustomize = useSettingsPanelStore((s) => s.close);
+    const [pending, setPending] = useState(false);
+    const newSession = useNewProjectSession(projectId);
+    const start = useCallback((prompt) => {
+        const pendingPrompt = typeof prompt === 'string' ? { text: prompt, agent: null, model: null, variant: null } : prompt;
+        // Guard re-entry: ignore extra clicks while a session is being minted so
+        // we don't fire two creates (two billed sessions for one click).
+        if (pending)
+            return;
+        setPending(true);
+        // Optimistic, identical to the project-home composer: mint the session,
+        // stash the seed prompt, close the overlay, and drop into the instant shell
+        // — which shows the prompt + inline boot status and auto-sends it once the
+        // runtime is ready (the hook persists + bounces on a terminal failure).
+        // Leave `pending` true: we're navigating away and the overlay is closing,
+        // so flipping it back would only flash the idle button.
+        newSession({
+            // The prompt is a durable inbox row from the create itself — the API
+            // converts `pending_prompt` inside the session-create transaction, so
+            // a closed tab between here and the workbench cannot lose it. No
+            // start-stash: there are no picks to hand off.
+            create: { pending_prompt: pendingPrompt },
+            onNavigate: () => {
+                closeCustomize();
+            },
+        });
+    }, [pending, newSession, closeCustomize]);
+    return { start, pending };
+}

package/dist/diff/diff-view.d.ts

@@ -0,0 +1,49 @@
+export type DiffLayout = 'unified' | 'split';
+export type DiffIndicators = 'classic' | 'bars' | 'none';
+export type InlineHighlight = 'word-alt' | 'word' | 'char' | 'none';
+/**
+ * Pierre renders a one-sided diff — a new file (only `+` lines) or a deleted
+ * one (only `−` lines) — as a single column in BOTH layouts: it excludes the
+ * empty side when it parsed the file as `new`/`deleted`, which it reads from
+ * the `new file mode` / `deleted file mode` header line. A change set of new
+ * files then shows the same rendering in stacked and side-by-side, and the
+ * layout toggle does nothing on it. Dropping that header line keeps every
+ * hunk byte-identical but makes Pierre parse the file as a change, so split
+ * gets its empty counterpart column (the GitHub layout); unified renders
+ * identically either way. Only a real git metadata line matches — content
+ * lines start with `+`, `-` or a space, never at column 0.
+ */
+export declare function splitablePatch(patch: string): string;
+interface DiffViewCommonProps {
+    layout?: DiffLayout;
+    /** Hide the per-file header rendered by Pierre's chrome. */
+    hideFileHeader?: boolean;
+    /** Hide the line-number gutter. */
+    hideLineNumbers?: boolean;
+    /** Wrap long lines instead of horizontal scrolling. */
+    wrap?: boolean;
+    /** Inline change marker style — defaults to word-level. */
+    inlineHighlight?: InlineHighlight;
+    /** +/- indicator style — defaults to thin colour bars. */
+    indicators?: DiffIndicators;
+    /** Remove the green/red row background tints. */
+    flatBackground?: boolean;
+    className?: string;
+}
+interface PatchProps extends DiffViewCommonProps {
+    /** Unified-diff patch string (output of `createTwoFilesPatch`, `git diff`, etc). */
+    patch: string;
+}
+interface FilesProps extends DiffViewCommonProps {
+    /** Old / new file pair — converted to a unified patch under the hood. */
+    before: {
+        name: string;
+        contents: string;
+    };
+    after: {
+        name: string;
+        contents: string;
+    };
+}
+export declare function DiffView(props: PatchProps | FilesProps): import("react").JSX.Element;
+export {};