@kortix/ui 0.14.4 → 0.14.5

package/dist/customize/settings/tabs/sandbox-tab.js

@@ -10,9 +10,6 @@ import { ConfirmDialog } from '../../../primitives/confirm-dialog.js';
 import Hint from '../../../primitives/hint.js';
 import { InfoBanner } from '../../../primitives/info-banner.js';
 import Loading from '../../../primitives/loading.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../primitives/select.js';
-import { SettingsRow, SettingsRowGroup } from '../../../primitives/settings-row.js';
-import { SettingsSubsectionHeader } from '../../../primitives/settings-subsection-header.js';
 import { Skeleton } from '../../../primitives/skeleton.js';
 import { errorToast, successToast } from '../../../primitives/toast.js';
 import { EmptyState } from '../../../primitives/empty-state.js';
@@ -22,20 +19,15 @@ import { useLocale, useTranslations } from '../../../i18n/index.js';
 import { PROJECT_ACTIONS } from '../../../internal/lib/project-actions.js';
 import { useProjectCans } from '../../../internal/lib/use-project-can.js';
 import { cn } from '../../../internal/lib/utils.js';
-import { buildSandboxTemplate, deleteSandboxTemplate, getProject, listProjectSnapshots, updateProjectSandboxProvider, } from '@kortix/sdk';
-import { contract, invalidateProject, qk } from '@kortix/sdk/react';
-import { ArrowClockwiseIcon, CheckCircleIcon, CircleDashedIcon, CpuIcon, CubeIcon, FileCodeIcon, HardDrivesIcon, MemoryIcon, PackageIcon, PencilSimpleIcon, PlusIcon, PushPinIcon, ShippingContainerIcon, ShuffleIcon, SquaresFourIcon, TrashIcon, XCircleIcon, } from '@phosphor-icons/react';
+import { buildSandboxTemplate, deleteSandboxTemplate, listProjectSnapshots, } from '@kortix/sdk';
+import { contract, qk } from '@kortix/sdk/react';
+import { ArrowClockwiseIcon, CheckCircleIcon, CircleDashedIcon, CpuIcon, CubeIcon, FileCodeIcon, HardDrivesIcon, MemoryIcon, PackageIcon, PencilSimpleIcon, PlusIcon, ShippingContainerIcon, SquaresFourIcon, TrashIcon, XCircleIcon, } from '@phosphor-icons/react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { SandboxProviderBadge, SandboxProviderLabel, availableProviderCoverage, describeProviderMode, latestObservedAt, } from '../../sections/view/sandbox-provider-coverage.js';
-import { applySandboxProviderResult, pollSandboxProviderTransition, } from '../../sections/view/sandbox-provider-result.js';
-import { formatSandboxProvider, isLegacySandboxProvider, sortSandboxProviders, } from '../../../internal/lib/sandbox-providers.js';
+import { SandboxProviderBadge, availableProviderCoverage, latestObservedAt, } from '../../sections/view/sandbox-provider-coverage.js';
 import { SettingsTabHeader } from '../settings-tab-header.js';
 import { snapshotsQueryRetry } from './snapshots-query.js';
-/** One batched probe for the two leaves this tab gates on. */
-const SANDBOX_TAB_ACTIONS = [
-    PROJECT_ACTIONS.PROJECT_SANDBOX_WRITE,
-    PROJECT_ACTIONS.PROJECT_WRITE,
-];
+/** The one leaf this tab gates on: template create, edit, delete and rebuild. */
+const SANDBOX_TAB_ACTIONS = [PROJECT_ACTIONS.PROJECT_SANDBOX_WRITE];
 /** Three, not five: each skeleton is now a full card, so five of them
  *  overflowed the panel and read as a wall of grey. */
 const TEMPLATE_SKELETON_ROWS = [
@@ -112,34 +104,19 @@ export function describeBase(template, labels = {}) {
         mono: false,
     };
 }
-/** Where sessions built from this template actually run. Static configuration,
- *  not live status — which is why it belongs in the spec grid next to CPU and
- *  memory, and NOT in the runtime footer where a bare `Automatic` badge used
- *  to float with no label attached to it. */
-export function describeRouting(providerMode, selectedProvider, tI18nComplete, labels = {}) {
-    const mode = describeProviderMode(providerMode, selectedProvider, tI18nComplete);
-    if (providerMode === 'automatic')
-        return { label: labels.automatic ?? 'Automatic', icon: ShuffleIcon };
-    return {
-        label: mode.selectedProvider
-            ? (labels.pinnedWithProvider?.(mode.selectedProvider) ?? `Pinned · ${mode.selectedProvider}`)
-            : (labels.pinned ?? 'Pinned'),
-        icon: PushPinIcon,
-    };
-}
 /** Locale-aware age for the runtime footer's "Checked …" stamp. */
 export function TemplateStateLine({ tone, label }) {
     const toneClass = TEMPLATE_TONE_TEXT[tone];
     return (_jsxs("span", { className: cn('flex items-center gap-1.5 text-xs font-medium', toneClass), children: [tone === 'busy' ? (_jsx(Loading, { variant: "spokes", className: cn('size-3.5 shrink-0', toneClass) })) : tone === 'ok' ? (_jsx(CheckCircleIcon, { weight: "fill", className: "size-3.5 shrink-0" })) : tone === 'fail' ? (_jsx(XCircleIcon, { weight: "fill", className: "size-3.5 shrink-0" })) : (_jsx(CircleDashedIcon, { className: "size-3.5 shrink-0" })), label] }));
 }
-export function TemplateRuntimeFooter({ coverage, providerMode, selectedProvider, formatObservedAt, runtimeLabel, checkedLabel, badgeCopy, }) {
+export function TemplateRuntimeFooter({ coverage, formatObservedAt, runtimeLabel, checkedLabel, badgeCopy, }) {
     const available = availableProviderCoverage(coverage);
     if (available.length === 0)
         return null;
     const observedAt = latestObservedAt(coverage);
-    return (_jsxs("div", { className: "border-border/60 bg-muted/25 flex flex-wrap items-center gap-x-3 gap-y-1.5 border-t px-4 py-2.5", children: [_jsx("span", { className: "text-muted-foreground shrink-0 text-xs", children: runtimeLabel }), _jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: available.map((item) => (_jsx(SandboxProviderBadge, { item: item, selected: providerMode === 'pinned' && item.provider === selectedProvider, copy: badgeCopy }, item.provider))) }), observedAt ? (_jsx("span", { className: "text-muted-foreground ml-auto shrink-0 text-xs tabular-nums", children: checkedLabel(formatObservedAt(observedAt)) })) : null] }));
+    return (_jsxs("div", { className: "border-border/60 bg-muted/25 flex flex-wrap items-center gap-x-3 gap-y-1.5 border-t px-4 py-2.5", children: [_jsx("span", { className: "text-muted-foreground shrink-0 text-xs", children: runtimeLabel }), _jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: available.map((item) => (_jsx(SandboxProviderBadge, { item: item, copy: badgeCopy }, item.provider))) }), observedAt ? (_jsx("span", { className: "text-muted-foreground ml-auto shrink-0 text-xs tabular-nums", children: checkedLabel(formatObservedAt(observedAt)) })) : null] }));
 }
-function TemplateCard({ projectId, template, canManage, onEdit, providerMode, selectedProvider, }) {
+function TemplateCard({ projectId, template, canManage, onEdit, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const t = useTranslations('settings.sandbox');
     const locale = useLocale();
@@ -189,12 +166,7 @@ function TemplateCard({ projectId, template, canManage, onEdit, providerMode, se
         builtFrom: t('facts.builtFrom'),
         kortixDefault: t('facts.kortixDefault'),
     });
-    const routing = describeRouting(providerMode, selectedProvider, tI18nComplete, {
-        automatic: t('routing.automatic'),
-        pinned: t('routing.pinned'),
-        pinnedWithProvider: (provider) => t('routing.pinnedWithProvider', { provider }),
-    });
-    return (_jsxs(_Fragment, { children: [_jsxs("li", { className: "bg-popover overflow-hidden rounded-md border", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3 px-4 pt-4 pb-3.5", children: [_jsxs("div", { className: "min-w-0 space-y-1.5", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "text-foreground truncate text-sm font-medium", children: template.name }), _jsx(Badge, { variant: "secondary", size: "sm", children: template.slug }), template.is_default ? (_jsx(Badge, { variant: "muted", size: "sm", children: t('defaultBadge') })) : null] }), _jsx(TemplateStateLine, { tone: stateInfo.tone, label: stateInfo.label })] }), canManage && (_jsxs("div", { className: "flex items-center gap-1", children: [templateId && !template.is_default && (_jsxs(_Fragment, { children: [_jsx(Hint, { label: t('actions.edit'), side: "top", children: _jsx(Button, { size: "icon-base", variant: "ghost", className: "transition-transform active:scale-[0.96]", onClick: () => onEdit(template), "aria-label": t('actions.edit'), children: _jsx(PencilSimpleIcon, { className: "size-3.5 shrink-0" }) }) }), _jsx(Hint, { label: t('actions.delete'), side: "top", children: _jsx(Button, { size: "icon-base", variant: "ghost", className: "text-destructive hover:text-destructive transition-transform active:scale-[0.96]", disabled: deleteMut.isPending, onClick: () => setConfirmDelete(true), "aria-label": t('actions.delete'), children: deleteMut.isPending ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(TrashIcon, { className: "size-3.5 shrink-0" })) }) })] })), templateId && (_jsxs(Button, { size: "sm", variant: "outline", className: "gap-1.5 transition-transform active:scale-[0.96]", disabled: buildMut.isPending, onClick: () => buildMut.mutate(), children: [buildMut.isPending ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(ArrowClockwiseIcon, { className: "size-3.5 shrink-0" })), t('actions.rebuild')] }))] }))] }), _jsxs("dl", { className: "border-border/60 grid grid-cols-2 gap-x-4 gap-y-4 border-t px-4 py-4 tabular-nums sm:grid-cols-3", children: [_jsx(FactCell, { icon: CpuIcon, label: t('facts.processor'), value: `${template.cpu} vCPU` }), _jsx(FactCell, { icon: MemoryIcon, label: t('facts.memory'), value: `${template.memory_gb} GiB` }), _jsx(FactCell, { icon: HardDrivesIcon, label: t('facts.storage'), value: `${template.disk_gb} GiB` }), _jsx(FactCell, { icon: base.icon, label: base.label, value: base.value, mono: base.mono }), _jsx(FactCell, { icon: source.icon, label: t('facts.definedIn'), value: source.label, mono: source.mono }), _jsx(FactCell, { icon: routing.icon, label: t('routing.title'), value: routing.label })] }), _jsx(TemplateRuntimeFooter, { coverage: template.provider_coverage, providerMode: providerMode, selectedProvider: selectedProvider, runtimeLabel: t('runtime'), checkedLabel: (value) => t('checked', { value }), formatObservedAt: (observedAt) => relativeTime(observedAt, locale, Date.now(), LONG_AGO), badgeCopy: {
+    return (_jsxs(_Fragment, { children: [_jsxs("li", { className: "bg-popover overflow-hidden rounded-md border", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3 px-4 pt-4 pb-3.5", children: [_jsxs("div", { className: "min-w-0 space-y-1.5", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "text-foreground truncate text-sm font-medium", children: template.name }), _jsx(Badge, { variant: "secondary", size: "sm", children: template.slug }), template.is_default ? (_jsx(Badge, { variant: "muted", size: "sm", children: t('defaultBadge') })) : null] }), _jsx(TemplateStateLine, { tone: stateInfo.tone, label: stateInfo.label })] }), canManage && (_jsxs("div", { className: "flex items-center gap-1", children: [templateId && !template.is_default && (_jsxs(_Fragment, { children: [_jsx(Hint, { label: t('actions.edit'), side: "top", children: _jsx(Button, { size: "icon-base", variant: "ghost", className: "transition-transform active:scale-[0.96]", onClick: () => onEdit(template), "aria-label": t('actions.edit'), children: _jsx(PencilSimpleIcon, { className: "size-3.5 shrink-0" }) }) }), _jsx(Hint, { label: t('actions.delete'), side: "top", children: _jsx(Button, { size: "icon-base", variant: "ghost", className: "text-destructive hover:text-destructive transition-transform active:scale-[0.96]", disabled: deleteMut.isPending, onClick: () => setConfirmDelete(true), "aria-label": t('actions.delete'), children: deleteMut.isPending ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(TrashIcon, { className: "size-3.5 shrink-0" })) }) })] })), templateId && (_jsxs(Button, { size: "sm", variant: "outline", className: "gap-1.5 transition-transform active:scale-[0.96]", disabled: buildMut.isPending, onClick: () => buildMut.mutate(), children: [buildMut.isPending ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(ArrowClockwiseIcon, { className: "size-3.5 shrink-0" })), t('actions.rebuild')] }))] }))] }), _jsxs("dl", { className: "border-border/60 grid grid-cols-2 gap-x-4 gap-y-4 border-t px-4 py-4 tabular-nums sm:grid-cols-3", children: [_jsx(FactCell, { icon: CpuIcon, label: t('facts.processor'), value: `${template.cpu} vCPU` }), _jsx(FactCell, { icon: MemoryIcon, label: t('facts.memory'), value: `${template.memory_gb} GiB` }), _jsx(FactCell, { icon: HardDrivesIcon, label: t('facts.storage'), value: `${template.disk_gb} GiB` }), _jsx(FactCell, { icon: base.icon, label: base.label, value: base.value, mono: base.mono }), _jsx(FactCell, { icon: source.icon, label: t('facts.definedIn'), value: source.label, mono: source.mono })] }), _jsx(TemplateRuntimeFooter, { coverage: template.provider_coverage, runtimeLabel: t('runtime'), checkedLabel: (value) => t('checked', { value }), formatObservedAt: (observedAt) => relativeTime(observedAt, locale, Date.now(), LONG_AGO), badgeCopy: {
                             states: {
                                 ready: t('coverage.ready'),
                                 building: t('coverage.building'),
@@ -203,71 +175,14 @@ function TemplateCard({ projectId, template, canManage, onEdit, providerMode, se
                                 unavailable: t('coverage.unavailable'),
                                 unknown: t('states.unknown'),
                             },
-                            selected: t('coverage.selected'),
-                            selectedAria: t('coverage.selectedAria'),
                         } })] }), _jsx(ConfirmDialog, { open: confirmDelete, onOpenChange: setConfirmDelete, title: t('deleteDialog.title', { name: template.name }), description: t('deleteDialog.description'), confirmLabel: t('deleteDialog.confirm'), confirmVariant: "destructive", isPending: deleteMut.isPending, onConfirm: () => deleteMut.mutate() })] }));
 }
 const TEMPLATE_SKELETON_HEIGHT = 'h-60';
-const AUTO_PROVIDER = '__auto__';
-function SandboxProviderRow({ project, canManage, }) {
-    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
-    const t = useTranslations('settings.sandbox');
-    const queryClient = useQueryClient();
-    const available = sortSandboxProviders(project.available_sandbox_providers ?? []);
-    const current = project.default_sandbox_provider ?? null;
-    const mutation = useMutation({
-        mutationFn: (next) => updateProjectSandboxProvider(project.project_id, next),
-        onSuccess: (result, next) => {
-            // FIX-L: the PATCH returns EITHER the updated project (immediate) OR a
-            // preparation object (the prepare branch — a switch to a different enabled
-            // provider). Write the project cache ONLY for the immediate result; a
-            // preparation is a transition, not a project, and must not clobber the
-            // cached project shape.
-            const kind = applySandboxProviderResult(queryClient, project.project_id, result);
-            if (kind === 'preparation') {
-                successToast(tI18nComplete('text32f14aa9ea33', {
-                    provider: next ? formatSandboxProvider(next) : tI18nComplete('text22412aa281cb'),
-                }));
-                // Poll the durable transition (bounded, backoff, terminal-stop, 404 = done)
-                // and refresh the project once it settles so the now-active provider shows.
-                void pollSandboxProviderTransition(project.project_id, {
-                    onSettled: (state) => {
-                        // invalidateProject() reaches qk.project.scope(project.project_id),
-                        // which qk.project.summary(project.project_id) nests under — so it
-                        // already covers the bare-project row too; no separate summary
-                        // invalidation needed here.
-                        void invalidateProject(queryClient, project.project_id);
-                        // qk.projects.scope(): restores the reach the old bare
-                        // projects-literal prefix match had. A sandbox-provider switch
-                        // is rare — over-invalidating a few extra account lists costs
-                        // nothing measurable.
-                        queryClient.invalidateQueries({ queryKey: qk.projects.scope() });
-                        const status = state?.latest?.status;
-                        if (status === 'activated') {
-                            successToast(tI18nComplete('text1c145081eddd', {
-                                provider: formatSandboxProvider(state?.latest?.target_provider ?? ''),
-                            }));
-                        }
-                        else if (status === 'failed') {
-                            errorToast(state?.latest?.label || tI18nComplete('texte9ca8360a34d'));
-                        }
-                    },
-                });
-            }
-        },
-        onError: (error) => errorToast(error.message || tI18nComplete('text914be6d9bb89')),
-    });
-    if (available.length === 0)
-        return null;
-    return (_jsxs("section", { className: "space-y-3", children: [_jsx(SettingsSubsectionHeader, { title: t('routing.title') }), _jsx(SettingsRowGroup, { children: _jsx(SettingsRow, { label: _jsxs(_Fragment, { children: [t('provider.label'), _jsx(Badge, { variant: "highlight", size: "sm", children: t('provider.experimental') })] }), description: available.some(isLegacySandboxProvider)
-                        ? `${t('provider.description')} ${t('provider.legacyNote')}`
-                        : t('provider.description'), children: _jsxs(Select, { value: current ?? AUTO_PROVIDER, onValueChange: (v) => mutation.mutate(v === AUTO_PROVIDER ? null : (available.find((provider) => provider === v) ?? null)), disabled: !canManage || mutation.isPending, children: [_jsx(SelectTrigger, { "aria-label": t('provider.label'), className: "h-8 w-48 shrink-0", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { align: "end", children: [_jsx(SelectItem, { value: AUTO_PROVIDER, children: t('routing.automatic') }), available.map((p) => (_jsx(SelectItem, { value: p, children: _jsx(SandboxProviderLabel, { provider: p }) }, p)))] })] }) }) })] }));
-}
 /** Presentational only — no hooks, no data fetching, no store or Supabase
  *  read. Kept separate from `SandboxTab` so this renders under
  *  `renderToStaticMarkup` with no `QueryClientProvider` — see
  *  `GeneralTabView` for the same split. */
-export function SandboxTabView({ isLoading = false, isError = false, errorMessage = '', onRetry = () => { }, headerAction, sandboxProviderSlot, manifestVersion = null, templatesError = null, isEmpty = true, emptyAction, templatesSlot, copy: copyOverride, }) {
+export function SandboxTabView({ isLoading = false, isError = false, errorMessage = '', onRetry = () => { }, headerAction, manifestVersion = null, templatesError = null, isEmpty = true, emptyAction, templatesSlot, copy: copyOverride, }) {
     const t = useTranslations('settings.sandbox');
     const copy = copyOverride ?? {
         loadFailed: t('loadFailed'),
@@ -279,7 +194,7 @@ export function SandboxTabView({ isLoading = false, isError = false, errorMessag
         emptyDescription: t('emptyDescription'),
     };
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
-    return (_jsx("div", { className: "mx-auto w-full max-w-2xl space-y-8", children: _jsxs("div", { className: "space-y-8", children: [_jsx(SettingsTabHeader, { tab: "sandbox", action: headerAction }), sandboxProviderSlot, isLoading ? (_jsx("div", { className: "space-y-2", children: TEMPLATE_SKELETON_ROWS.map((row) => (_jsx(Skeleton, { className: cn(TEMPLATE_SKELETON_HEIGHT, 'rounded-md') }, row))) })) : isError ? (_jsx(ErrorState, { size: "sm", title: copy.loadFailed, description: errorMessage, action: _jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: copy.retry }) })) : (_jsxs("div", { className: "space-y-4", children: [_jsxs("p", { className: "text-muted-foreground text-sm text-pretty", children: [copy.descriptionStart, " ", _jsx("code", { className: "font-mono", children: "/workspace" }), ".", ' ', copy.descriptionEnd, ' ', manifestFilename(manifestVersion) === 'kortix.yaml' ? (_jsxs(_Fragment, { children: [_jsx("code", { className: "font-mono", children: "sandbox.templates" }), ' ', tI18nComplete.raw('text582967534d0f'), ' ', _jsx("code", { className: "font-mono", children: "kortix.yaml" })] })) : (_jsxs(_Fragment, { children: [_jsx("code", { className: "font-mono", children: "[[sandbox.templates]]" }), ' ', tI18nComplete.raw('text582967534d0f'), ' ', _jsx("code", { className: "font-mono", children: "kortix.toml" })] })), "."] }), templatesError ? (_jsxs(InfoBanner, { tone: "warning", children: [copy.configReadFailed, " ", templatesError] })) : null, isEmpty ? (_jsx(EmptyState, { icon: ShippingContainerIcon, size: "sm", title: copy.emptyTitle, description: copy.emptyDescription, action: emptyAction })) : (templatesSlot)] }))] }) }));
+    return (_jsx("div", { className: "mx-auto w-full max-w-2xl space-y-8", children: _jsxs("div", { className: "space-y-8", children: [_jsx(SettingsTabHeader, { tab: "sandbox", action: headerAction }), isLoading ? (_jsx("div", { className: "space-y-2", children: TEMPLATE_SKELETON_ROWS.map((row) => (_jsx(Skeleton, { className: cn(TEMPLATE_SKELETON_HEIGHT, 'rounded-md') }, row))) })) : isError ? (_jsx(ErrorState, { size: "sm", title: copy.loadFailed, description: errorMessage, action: _jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: copy.retry }) })) : (_jsxs("div", { className: "space-y-4", children: [_jsxs("p", { className: "text-muted-foreground text-sm text-pretty", children: [copy.descriptionStart, " ", _jsx("code", { className: "font-mono", children: "/workspace" }), ".", ' ', copy.descriptionEnd, ' ', manifestFilename(manifestVersion) === 'kortix.yaml' ? (_jsxs(_Fragment, { children: [_jsx("code", { className: "font-mono", children: "sandbox.templates" }), ' ', tI18nComplete.raw('text582967534d0f'), ' ', _jsx("code", { className: "font-mono", children: "kortix.yaml" })] })) : (_jsxs(_Fragment, { children: [_jsx("code", { className: "font-mono", children: "[[sandbox.templates]]" }), ' ', tI18nComplete.raw('text582967534d0f'), ' ', _jsx("code", { className: "font-mono", children: "kortix.toml" })] })), "."] }), templatesError ? (_jsxs(InfoBanner, { tone: "warning", children: [copy.configReadFailed, " ", templatesError] })) : null, isEmpty ? (_jsx(EmptyState, { icon: ShippingContainerIcon, size: "sm", title: copy.emptyTitle, description: copy.emptyDescription, action: emptyAction })) : (templatesSlot)] }))] }) }));
 }
 /** Container: owns every hook (project + snapshots queries, the template
  *  form's open/edit state) and renders `SandboxTabView` with real data +
@@ -289,17 +204,8 @@ export function SandboxTabView({ isLoading = false, isError = false, errorMessag
  *  `null` otherwise), so nothing here fetches on panel open. */
 export function SandboxTab({ projectId }) {
     const t = useTranslations('settings.sandbox');
-    const projectQuery = useQuery({
-        queryKey: qk.project.summary(projectId),
-        queryFn: () => getProject(projectId),
-        ...contract('config'),
-    });
-    // Two different leaves, one batched probe. Template CRUD asserts
-    // `project.sandbox.write`; the provider row asserts `project.write`. They
-    // are deliberately NOT merged — a role may hold one without the other.
     const caps = useProjectCans(projectId, SANDBOX_TAB_ACTIONS);
     const canManage = caps[PROJECT_ACTIONS.PROJECT_SANDBOX_WRITE]?.allowed === true;
-    const canEditProvider = caps[PROJECT_ACTIONS.PROJECT_WRITE]?.allowed === true;
     const { version: manifestVersion } = useProjectManifestVersion(projectId);
     const snapshotsQuery = useQuery({
         queryKey: qk.project.snapshots(projectId),
@@ -320,11 +226,6 @@ export function SandboxTab({ projectId }) {
     const [editingTemplate, setEditingTemplate] = useState(null);
     const data = snapshotsQuery.data;
     const templates = Array.isArray(data?.templates) ? data.templates : [];
-    const pinnedProvider = projectQuery.data
-        ? (projectQuery.data.default_sandbox_provider ?? null)
-        : (data?.selected_provider ?? null);
-    const providerMode = pinnedProvider ? 'pinned' : 'automatic';
-    const selectedProvider = pinnedProvider;
     const openNewForm = () => {
         setEditingTemplate(null);
         setFormOpen(true);
@@ -334,5 +235,5 @@ export function SandboxTab({ projectId }) {
         setFormOpen(true);
     };
     const newTemplateAction = canManage ? (_jsxs(Button, { size: "sm", variant: "outline", className: "gap-1.5 transition-transform active:scale-[0.96]", onClick: openNewForm, children: [_jsx(PlusIcon, { className: "size-3.5 shrink-0" }), t('actions.new')] })) : undefined;
-    return (_jsxs(_Fragment, { children: [_jsx(SandboxTabView, { isLoading: snapshotsQuery.isLoading, isError: snapshotsQuery.isError, errorMessage: snapshotsQuery.error?.message ?? '', onRetry: () => snapshotsQuery.refetch(), headerAction: canManage ? (_jsxs(Button, { size: "sm", variant: "secondary", className: "gap-1.5 transition-transform active:scale-[0.96]", onClick: openNewForm, children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), t('actions.new')] })) : undefined, sandboxProviderSlot: projectQuery.data ? (_jsx(SandboxProviderRow, { project: projectQuery.data, canManage: canEditProvider })) : undefined, manifestVersion: manifestVersion, templatesError: data?.templates_error ?? null, isEmpty: templates.length === 0, emptyAction: newTemplateAction, templatesSlot: templates.length === 0 ? undefined : (_jsx("ul", { className: "space-y-2", children: templates.map((t) => (_jsx(TemplateCard, { projectId: projectId, template: t, canManage: canManage, onEdit: openEditForm, providerMode: providerMode, selectedProvider: selectedProvider }, t.template_id ?? `tpl-${t.slug}`))) })) }), _jsx(SandboxTemplateForm, { projectId: projectId, open: formOpen, onOpenChange: setFormOpen, template: editingTemplate })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SandboxTabView, { isLoading: snapshotsQuery.isLoading, isError: snapshotsQuery.isError, errorMessage: snapshotsQuery.error?.message ?? '', onRetry: () => snapshotsQuery.refetch(), headerAction: canManage ? (_jsxs(Button, { size: "sm", variant: "secondary", className: "gap-1.5 transition-transform active:scale-[0.96]", onClick: openNewForm, children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), t('actions.new')] })) : undefined, manifestVersion: manifestVersion, templatesError: data?.templates_error ?? null, isEmpty: templates.length === 0, emptyAction: newTemplateAction, templatesSlot: templates.length === 0 ? undefined : (_jsx("ul", { className: "space-y-2", children: templates.map((t) => (_jsx(TemplateCard, { projectId: projectId, template: t, canManage: canManage, onEdit: openEditForm }, t.template_id ?? `tpl-${t.slug}`))) })) }), _jsx(SandboxTemplateForm, { projectId: projectId, open: formOpen, onOpenChange: setFormOpen, template: editingTemplate })] }));
 }

package/dist/customize/shared/entity/entity-modal.d.ts

@@ -29,6 +29,10 @@ export interface EntityDetailModalProps {
      *  uses this so editing happens in this same shell (one level deep), not
      *  in a modal stacked on the modal. Omit for the normal file pane. */
     paneOverride?: ReactNode;
+    /** Offer Remove for a project skill. Only the Skills page opts in: it closes
+     *  the modal when the refetched config drops the skill. The agent editor
+     *  does not, because its unsaved draft could grant the removed skill again. */
+    removable?: boolean;
     onOpenChange: (open: boolean) => void;
 }
 /**
@@ -45,7 +49,7 @@ export interface EntityDetailModalProps {
  * `Modal`/`ModalContent` itself, which would replay the open animation and
  * drop focus trap continuity.
  */
-export declare function EntityDetailModal({ projectId, entity, kind, open, isResolving, aside, meta, paneOverride, onOpenChange, }: EntityDetailModalProps): import("react").JSX.Element;
+export declare function EntityDetailModal({ projectId, entity, kind, open, isResolving, aside, meta, paneOverride, removable, onOpenChange, }: EntityDetailModalProps): import("react").JSX.Element;
 export declare function EntityFilePane({ path, content, isLoading, isError, error, onRetry, errorTitle, skeletonRows, }: {
     path: string;
     content: string | undefined;

package/dist/customize/shared/entity/entity-modal.js

@@ -21,6 +21,7 @@ import { useProjectAccountId } from '@kortix/sdk/react';
 import { PencilSimpleIcon } from '@phosphor-icons/react';
 import { useQuery } from '@tanstack/react-query';
 import { FadedScrollArea } from '../../../primitives/faded-scroll-area.js';
+import { RemoveSkillButton, removableSkillFolder } from '../../skills/remove-skill-button.js';
 import { buildFileTree, entityDirectory, isMarkdownPath, languageForPath } from './entity-files.js';
 const WRITE_ACTION = {
     skill: PROJECT_ACTIONS.PROJECT_SKILL_WRITE,
@@ -60,7 +61,7 @@ const OWNS_ITS_DIRECTORY = {
  * `Modal`/`ModalContent` itself, which would replay the open animation and
  * drop focus trap continuity.
  */
-export function EntityDetailModal({ projectId, entity, kind, open, isResolving = false, aside, meta, paneOverride, onOpenChange, }) {
+export function EntityDetailModal({ projectId, entity, kind, open, isResolving = false, aside, meta, paneOverride, removable = false, onOpenChange, }) {
     // A skill/command with no description renders no `ModalDescription`, so
     // Radix's Dialog can't find one to auto-associate via `aria-describedby`
     // and logs a dev-only "Missing Description" warning. Passing
@@ -69,7 +70,7 @@ export function EntityDetailModal({ projectId, entity, kind, open, isResolving =
     // message itself names this exact fix. Only applied when there truly is no
     // description; when one exists, `ModalDescription` wires up normally.
     const suppressDescriptionWarning = !entity?.description;
-    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsx(ModalContent, { className: "bg-popover space-y-0 lg:max-w-6xl", ...(suppressDescriptionWarning ? { 'aria-describedby': undefined } : {}), children: entity ? (_jsx(EntityModalBody, { projectId: projectId, entity: entity, kind: kind, aside: aside, meta: meta, paneOverride: paneOverride }, entity.path)) : isResolving ? (_jsx(EntityModalSkeleton, { kind: kind })) : null }) }));
+    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsx(ModalContent, { className: "bg-popover space-y-0 lg:max-w-6xl", ...(suppressDescriptionWarning ? { 'aria-describedby': undefined } : {}), children: entity ? (_jsx(EntityModalBody, { projectId: projectId, entity: entity, kind: kind, aside: aside, meta: meta, paneOverride: paneOverride, removable: removable }, entity.path)) : isResolving ? (_jsx(EntityModalSkeleton, { kind: kind })) : null }) }));
 }
 /**
  * The shell, while the selected path is being resolved against a config that
@@ -83,7 +84,7 @@ function EntityModalSkeleton({ kind }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     return (_jsxs(_Fragment, { children: [_jsxs(ModalHeader, { className: "border-border/60 space-y-1 border-b pb-4", children: [_jsxs(ModalTitle, { className: "sr-only", children: [tI18nComplete.raw('textdc380888c4e2'), " ", kind] }), _jsx(Skeleton, { className: "h-5 w-48 rounded-sm", "aria-hidden": true })] }), _jsx(ModalBody, { className: "max-h-[70vh] overflow-hidden p-0", children: _jsxs("div", { className: "flex min-h-0 flex-col lg:h-[70vh] lg:flex-row", children: [OWNS_ITS_DIRECTORY[kind] ? (_jsx("div", { className: "border-border/60 shrink-0 space-y-1.5 border-b p-2 lg:h-full lg:w-64 lg:border-r lg:border-b-0", children: [0, 1, 2].map((i) => (_jsx(Skeleton, { className: "h-7 w-full rounded-md" }, i))) })) : null, _jsxs("div", { className: "min-w-0 flex-1 space-y-3 p-4", children: [_jsx(Skeleton, { className: "h-4 w-32 rounded-sm" }), _jsx(Skeleton, { className: "h-40 w-full rounded-md" })] })] }) })] }));
 }
-function EntityModalBody({ projectId, entity, kind, aside, meta, paneOverride, }) {
+function EntityModalBody({ projectId, entity, kind, aside, meta, paneOverride, removable, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const configure = useConfigureThread(projectId);
     // `accountId` skips useProjectCan's own getProject and lets the IAM probe
@@ -126,12 +127,14 @@ function EntityModalBody({ projectId, entity, kind, aside, meta, paneOverride, }
     // click in the alert as an outside-click and dismiss the modal underneath
     // (see packages/ui/src/primitives/alert-dialog.tsx).
     const editButton = canWrite ? (_jsx(EntityEditButton, { name: entity.name, pending: configure.pending, onEdit: () => configure.start(editConfigPrompt(kind, entity.name, entity.path)) })) : null;
+    // Only a project skill can be removed; the API refuses a platform `kortix-*` one.
+    const removableFolder = removable && canWrite && kind === 'skill' ? removableSkillFolder(entity.path) : null;
     // The aside earns its column when it holds something: the caller's settings,
     // or — for a single-file kind, which has no rail to host it — the edit
     // action. Without this an agent modal viewed by a reader with no write
     // permission would render an empty 320px column.
     const showAside = Boolean(aside) || (!hasFileRail && editButton !== null);
-    const fileRail = (_jsxs("div", { className: "border-border/60 flex shrink-0 flex-col border-b p-2 lg:h-full lg:w-64 lg:overflow-hidden lg:border-r lg:border-b-0", children: [_jsxs(FadedScrollArea, { fadeColor: "from-popover", rootClassName: "h-auto min-h-0 flex-1", className: "overscroll-contain", children: [_jsx(FileTree, { title: tI18nComplete.raw('textabc7e9892806'), children: _jsx(FileTreeNav, { nodes: nodes, selectedPath: selectedPath, onSelect: setSelectedPath, label: `${entity.name} files` }) }), filesQuery.isError ? (_jsxs("p", { className: "text-muted-foreground mt-4 text-xs text-pretty", children: [tI18nComplete.raw('text881c0bd6449b'), ' ', _jsx("button", { type: "button", onClick: () => void filesQuery.refetch(), className: "text-foreground underline underline-offset-2", children: tI18nComplete.raw('text942087cc2d41') })] })) : null] }), editButton ? _jsx("div", { className: "shrink-0 pt-4", children: editButton }) : null] }));
+    const fileRail = (_jsxs("div", { className: "border-border/60 flex shrink-0 flex-col border-b p-2 lg:h-full lg:w-64 lg:overflow-hidden lg:border-r lg:border-b-0", children: [_jsxs(FadedScrollArea, { fadeColor: "from-popover", rootClassName: "h-auto min-h-0 flex-1", className: "overscroll-contain", children: [_jsx(FileTree, { title: tI18nComplete.raw('textabc7e9892806'), children: _jsx(FileTreeNav, { nodes: nodes, selectedPath: selectedPath, onSelect: setSelectedPath, label: `${entity.name} files` }) }), filesQuery.isError ? (_jsxs("p", { className: "text-muted-foreground mt-4 text-xs text-pretty", children: [tI18nComplete.raw('text881c0bd6449b'), ' ', _jsx("button", { type: "button", onClick: () => void filesQuery.refetch(), className: "text-foreground underline underline-offset-2", children: tI18nComplete.raw('text942087cc2d41') })] })) : null] }), editButton ? (_jsxs("div", { className: "shrink-0 space-y-2 pt-4", children: [editButton, removableFolder ? (_jsx(RemoveSkillButton, { projectId: projectId, name: entity.name, folder: removableFolder })) : null] })) : null] }));
     return (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { className: "border-border/60 space-y-1 border-b pr-10 pb-4", children: _jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [_jsx(ModalTitle, { className: "min-w-0 truncate", children: entity.name }), meta] }) }), _jsx(ModalBody, { className: "max-h-[70vh] overflow-hidden p-0", children: _jsxs("div", { className: "flex min-h-0 flex-col overflow-y-auto lg:h-[70vh] lg:flex-row lg:overflow-hidden", children: [hasFileRail ? fileRail : null, showAside ? (_jsxs("aside", { className: "border-border/60 flex h-full min-h-0 shrink-0 flex-col justify-between space-y-3 border-b p-4 lg:h-full lg:min-h-0 lg:w-80 lg:overflow-y-auto lg:border-r lg:border-b-0", children: [aside, _jsx("div", { className: "mt-auto pt-4", children: hasFileRail ? null : editButton })] })) : null, _jsx("div", { className: cn('bg-popover min-w-0 flex-1 overflow-hidden', paneOverride ? 'flex flex-col' : 'overflow-y-auto'), children: paneOverride ?? (_jsx(EntityFilePane, { path: selectedPath, content: fileQuery.data?.content, isLoading: fileQuery.isLoading, isError: fileQuery.isError, error: fileQuery.error, onRetry: () => fileQuery.refetch() }, selectedPath)) })] }) })] }));
 }
 export function EntityFilePane({ path, content, isLoading, isError, error, onRetry, errorTitle, skeletonRows = 5, }) {

package/dist/customize/skills/remove-skill-button.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The folder `POST /skills/remove` takes for the skill at `path`, or null when
+ * the API refuses it: a platform `kortix-*` skill, or a SKILL.md at the root.
+ */
+export declare function removableSkillFolder(path: string): string | null;
+/**
+ * Removes a project skill: its whole folder, edits included, and its entry on
+ * every agent, in one commit on the default branch (KRTX-2821). The click only
+ * opens the confirmation. On success the project config is refetched; it no
+ * longer lists the skill, so the detail modal around this button closes itself.
+ */
+export declare function RemoveSkillButton({ projectId, name, folder, }: {
+    projectId: string;
+    name: string;
+    folder: string;
+}): import("react").JSX.Element;

package/dist/customize/skills/remove-skill-button.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { removeProjectSkill } from '@kortix/sdk';
+import { qk } from '@kortix/sdk/react';
+import { TrashIcon } from '@phosphor-icons/react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+import { Button } from '../../primitives/button.js';
+import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { entityDirectory } from '../shared/entity/entity-files.js';
+/**
+ * The folder `POST /skills/remove` takes for the skill at `path`, or null when
+ * the API refuses it: a platform `kortix-*` skill, or a SKILL.md at the root.
+ */
+export function removableSkillFolder(path) {
+    const folder = entityDirectory(path);
+    const name = folder.split('/').at(-1) ?? '';
+    return folder && !name.startsWith('kortix-') ? folder : null;
+}
+/**
+ * Removes a project skill: its whole folder, edits included, and its entry on
+ * every agent, in one commit on the default branch (KRTX-2821). The click only
+ * opens the confirmation. On success the project config is refetched; it no
+ * longer lists the skill, so the detail modal around this button closes itself.
+ */
+export function RemoveSkillButton({ projectId, name, folder, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const queryClient = useQueryClient();
+    const [confirming, setConfirming] = useState(false);
+    const remove = useMutation({
+        mutationFn: () => removeProjectSkill(projectId, { folder, confirm: true }),
+        onSuccess: () => {
+            setConfirming(false);
+            successToast(tI18nComplete.raw('text5f6ba69d66d1'));
+            void queryClient.invalidateQueries({ queryKey: qk.project.detail(projectId) });
+        },
+        onError: (error) => errorToast(error.message),
+    });
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", size: "sm", className: "w-full justify-start gap-1.5", disabled: remove.isPending, onClick: () => setConfirming(true), children: [_jsx(TrashIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('textc3812fc4acb8')] }), _jsx(ConfirmDialog, { open: confirming, onOpenChange: setConfirming, title: tI18nComplete('textbc43ab815937', { value0: name }), description: _jsxs(_Fragment, { children: [tI18nComplete.raw('text0c044575853f'), " ", _jsx("code", { className: "font-mono", children: folder }), tI18nComplete.raw('textcb8d6b0c94c9')] }), confirmLabel: tI18nComplete.raw('texta8597db6f24b'), confirmVariant: "destructive", confirmIcon: _jsx(TrashIcon, { className: "size-4 shrink-0" }), isPending: remove.isPending, onConfirm: () => remove.mutate() })] }));
+}

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

@@ -110,7 +110,7 @@ export function SkillsPage({ projectId }) {
                     // The copy invites an action, so the action is here — not only in
                     // the header. Docs stays as the secondary, for the reader who has
                     // no write permission and gets no primary at all.
-                    action: createButton('Create a skill'), secondaryAction: _jsx(Button, { asChild: true, variant: "ghost", size: "sm", className: "gap-1.5", children: _jsx("a", { href: "https://opencode.ai/docs/skills/", target: "_blank", rel: "noopener noreferrer", children: tI18nComplete.raw('text7af023c43013') }) }) })), children: filtered.map((skill) => (_jsx(CatalogCard, { title: skill.name, description: skill.description, onClick: () => setSelectedPath(skill.path) }, skill.path))) }), _jsx(EntityDetailModal, { projectId: projectId, entity: detail.record, kind: "skill", open: detail.open, isResolving: detail.isResolving, onOpenChange: (next) => {
+                    action: createButton('Create a skill'), secondaryAction: _jsx(Button, { asChild: true, variant: "ghost", size: "sm", className: "gap-1.5", children: _jsx("a", { href: "https://opencode.ai/docs/skills/", target: "_blank", rel: "noopener noreferrer", children: tI18nComplete.raw('text7af023c43013') }) }) })), children: filtered.map((skill) => (_jsx(CatalogCard, { title: skill.name, description: skill.description, onClick: () => setSelectedPath(skill.path) }, skill.path))) }), _jsx(EntityDetailModal, { projectId: projectId, entity: detail.record, kind: "skill", removable: true, open: detail.open, isResolving: detail.isResolving, onOpenChange: (next) => {
                     if (!next)
                         setSelectedPath(null);
                 } }), _jsx(NewSkillModal, { projectId: projectId, open: formOpen, onOpenChange: setFormOpen })] }));

package/dist/customize/triggers/schedule/trigger-list.d.ts

@@ -3,8 +3,6 @@ import type { ProjectTrigger } from '@kortix/sdk';
 import { type ReactNode } from 'react';
 /** "next Mon 09:00", "next 08:45" today, "On event" for webhooks and app events, "Paused" while paused. */
 export declare function nextRunLabel(trigger: Pick<ProjectTrigger, 'type' | 'enabled' | 'next_fire_at' | 'next_cron_at' | 'auto_paused_at'>, t: UiTranslator, locale: string, now?: number): string;
-/** "2d ago", "9h ago", "3w ago" in the viewer's locale, or "Never run". */
-export declare function lastRunLabel(trigger: Pick<ProjectTrigger, 'last_fired_at' | 'event'>, t: UiTranslator, locale: string, now?: number): string;
 export declare function TriggerList({ triggers, groups, eventNames, selectedSlug, runningSlug, onOpen, selection, projectPaused, }: {
     triggers: ProjectTrigger[];
     /** The trigger whose Run now is in flight: its row shows the session busy mark. */

package/dist/customize/triggers/schedule/trigger-list.js

@@ -9,6 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Checkbox } from '../../../primitives/checkbox.js';
 import { SessionDotMatrix } from '../../../primitives/dot-matrix/session-dot-matrix.js';
 import { useLocale, useTranslations } from '../../../i18n/index.js';
+import { lastRunLabel } from '../../../internal/lib/trigger-clock.js';
 import { cn } from '../../../internal/lib/utils.js';
 import { Fragment } from 'react';
 import { describeNextRun, describeWhen, triggerName, triggerSubtitle } from './schedule-copy.js';
@@ -35,24 +36,6 @@ export function nextRunLabel(trigger, t, locale, now = Date.now()) {
             : date.toLocaleDateString(locale, { month: 'short', day: 'numeric' });
     return t('text27a2c8b3a0d2', { value0: day ? `${day} ${time}` : time });
 }
-/** "2d ago", "9h ago", "3w ago" in the viewer's locale, or "Never run". */
-export function lastRunLabel(trigger, t, locale, now = Date.now()) {
-    const iso = trigger.last_fired_at ?? trigger.event?.last_event_at ?? null;
-    const at = iso ? Date.parse(iso) : Number.NaN;
-    if (!Number.isFinite(at))
-        return t.raw('text3d40a69d3160');
-    const rtf = new Intl.RelativeTimeFormat(locale, { style: 'narrow', numeric: 'auto' });
-    const min = Math.floor(Math.max(0, now - at) / 60_000);
-    if (min < 1)
-        return rtf.format(0, 'second');
-    if (min < 60)
-        return rtf.format(-min, 'minute');
-    if (min < 24 * 60)
-        return rtf.format(-Math.floor(min / 60), 'hour');
-    if (min < 7 * 24 * 60)
-        return rtf.format(-Math.floor(min / (24 * 60)), 'day');
-    return rtf.format(-Math.floor(min / (7 * 24 * 60)), 'week');
-}
 export function TriggerList({ triggers, groups, eventNames, selectedSlug, runningSlug = null, onOpen, selection = null, projectPaused = false, }) {
     const row = (trigger) => (_jsx(TriggerRow, { trigger: trigger, eventNames: eventNames, selected: !selection && trigger.slug === selectedSlug, running: trigger.slug === runningSlug, onOpen: () => onOpen(trigger), checked: selection ? selection.selected.has(trigger.slug) : null, projectPaused: projectPaused, onToggle: (range) => selection?.onToggle(trigger, range) }, trigger.slug));
     return (

package/dist/customize/triggers/schedule/trigger-tile.d.ts

@@ -1,41 +1,10 @@
+import { type ClockState } from '../../../internal/lib/trigger-clock.js';
 import type { ProjectTrigger } from '@kortix/sdk';
-export type ClockState = 'ok' | 'failed' | 'needs_connection' | 'pending' | 'paused' | 'never';
 /**
  * The health the clock shows: the badge state, with "live" split by whether
  * it ever ran. `projectPaused` (the project-wide switch) pauses every clock.
  */
 export declare function clockState(trigger: ProjectTrigger, projectPaused?: boolean, running?: boolean): ClockState;
-/**
- * ONE tone per state drives both the reflection and the dot, so they cannot
- * disagree. Three colours, always full strength: green = live (running, ran,
- * or not run yet), red = failed, yellow = paused or waiting on setup.
- */
-export declare const CLOCK_TONE: {
-    readonly ok: {
-        readonly reflection: "text-kortix-green";
-        readonly dot: "bg-kortix-green";
-    };
-    readonly never: {
-        readonly reflection: "text-kortix-green";
-        readonly dot: "bg-kortix-green";
-    };
-    readonly failed: {
-        readonly reflection: "text-kortix-red";
-        readonly dot: "bg-kortix-red";
-    };
-    readonly needs_connection: {
-        readonly reflection: "text-kortix-yellow";
-        readonly dot: "bg-kortix-yellow";
-    };
-    readonly pending: {
-        readonly reflection: "text-kortix-yellow";
-        readonly dot: "bg-kortix-yellow";
-    };
-    readonly paused: {
-        readonly reflection: "text-kortix-yellow";
-        readonly dot: "bg-kortix-yellow";
-    };
-};
 export declare function TriggerTile({ trigger, projectPaused, running, surface, }: {
     trigger: ProjectTrigger;
     /** The project-wide pause switch is on. */

package/dist/customize/triggers/schedule/trigger-tile.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { REFLECTION_MASK } from '../../../primitives/toast.js';
 import { useTranslations } from '../../../i18n/index.js';
+import { CLOCK_TONE } from '../../../internal/lib/trigger-clock.js';
 import { cn } from '../../../internal/lib/utils.js';
 import { ClockIcon } from '@phosphor-icons/react';
 import { triggerBadgeState } from './schedule-copy.js';
@@ -34,22 +35,6 @@ export function clockState(trigger, projectPaused = false, running = false) {
         return state;
     return trigger.last_fired_at || trigger.event?.last_event_at ? 'ok' : 'never';
 }
-const GREEN = { reflection: 'text-kortix-green', dot: 'bg-kortix-green' };
-const RED = { reflection: 'text-kortix-red', dot: 'bg-kortix-red' };
-const YELLOW = { reflection: 'text-kortix-yellow', dot: 'bg-kortix-yellow' };
-/**
- * ONE tone per state drives both the reflection and the dot, so they cannot
- * disagree. Three colours, always full strength: green = live (running, ran,
- * or not run yet), red = failed, yellow = paused or waiting on setup.
- */
-export const CLOCK_TONE = {
-    ok: GREEN,
-    never: GREEN,
-    failed: RED,
-    needs_connection: YELLOW,
-    pending: YELLOW,
-    paused: YELLOW,
-};
 const LABEL = {
     ok: LABEL_KEY.live,
     failed: LABEL_KEY.error,

package/dist/files/project/hooks/use-change-requests.d.ts

@@ -1,4 +1,4 @@
-import { type InfiniteData } from '@tanstack/react-query';
+import { type InfiniteData, type QueryClient } from '@tanstack/react-query';
 import { type ChangeRequest, type ChangeRequestDetailResponse, type ChangeRequestDiffResponse, type ChangeRequestMergePreview, type ChangeRequestMergeResponse, type ChangeRequestStatus, type VersionDiffPreview } from '../api/change-requests.js';
 export declare const changeRequestKeys: {
     all: readonly ["project-files", "change-requests"];
@@ -118,6 +118,19 @@ export declare function useVersionDiff(input: {
     projectId?: string;
 }): import("@tanstack/react-query").UseQueryResult<VersionDiffPreview, Error>;
 export declare function useChangeRequestMergePreview(crId: string | null, enabled?: boolean): import("@tanstack/react-query").UseQueryResult<ChangeRequestMergePreview, Error>;
+/**
+ * Marks every change-request read of one project stale: each list (the
+ * session's outcome cards, the sidebar brief), each detail, and the review
+ * summary behind the sidebar's "Needs you" count. Called at turn end, because
+ * an agent opens and closes change requests from its sandbox through the REST
+ * API and the browser is not told (KRTX-3009, KRTX-3010).
+ */
+export declare function invalidateChangeRequestReads(qc: QueryClient, projectId: string): void;
+/**
+ * Invalidates every CR query for the active project — used after open / merge
+ * / close / reopen so all panels and detail views re-fetch.
+ */
+export declare function invalidateAfterChangeRequestWrite(qc: QueryClient, projectId: string): void;
 export declare function useOpenChangeRequest(options?: {
     projectId?: string;
 }): import("@tanstack/react-query").UseMutationResult<ChangeRequest, Error, {

package/dist/files/project/hooks/use-change-requests.js

@@ -217,39 +217,58 @@ export function useChangeRequestMergePreview(crId, enabled = true) {
         staleTime: 10_000,
     });
 }
+/**
+ * Marks every change-request read of one project stale: each list (the
+ * session's outcome cards, the sidebar brief), each detail, and the review
+ * summary behind the sidebar's "Needs you" count. Called at turn end, because
+ * an agent opens and closes change requests from its sandbox through the REST
+ * API and the browser is not told (KRTX-3009, KRTX-3010).
+ */
+export function invalidateChangeRequestReads(qc, projectId) {
+    if (!projectId)
+        return;
+    qc.invalidateQueries({ queryKey: changeRequestKeys.project(projectId) });
+    qc.invalidateQueries({ queryKey: qk.project.reviewSummary(projectId) });
+}
 /**
  * Invalidates every CR query for the active project — used after open / merge
  * / close / reopen so all panels and detail views re-fetch.
  */
+export function invalidateAfterChangeRequestWrite(qc, projectId) {
+    invalidateChangeRequestReads(qc, projectId);
+    // Branches list shows ahead/behind that may shift after a merge.
+    qc.invalidateQueries({ queryKey: branchKeys.list(projectId) });
+    // The merge commit lands on the default branch — commit list goes stale.
+    qc.invalidateQueries({ queryKey: commitKeys.project(projectId) });
+    // Whether this version still differs from its base changes the moment a CR
+    // merges — refresh the "Alternate version of main · N changes" banner
+    // (git-status, which is otherwise sticky and never re-fetches on its own),
+    // the live version-diff preview, and the cached session row (base_ref etc.).
+    qc.invalidateQueries({ queryKey: gitStatusKeys.all });
+    qc.invalidateQueries({ queryKey: versionDiffKeys.project(projectId) });
+    // Every individual git-connected session under this project — a CR
+    // landing on the base ref can change what `getProjectSession` returns
+    // (base_ref etc.) for any of them. sessionsScope is the shared prefix
+    // that reaches the sessions list AND every qk.project.session(id, sid)
+    // entry in one call; there is no "every session, not the list" prefix to
+    // narrow to, so this deliberately also refreshes the sessions list.
+    qc.invalidateQueries({ queryKey: qk.project.sessionsScope(projectId) });
+    // Landing a CR on the base ref is the one thing that happens INSIDE the app
+    // that can make an open session's compiled agent config stale. The
+    // freshness query is deliberately not polled — this is what tells it to
+    // look again, so the chip appears on merge rather than on next focus.
+    qc.invalidateQueries({ queryKey: ['session-config', projectId] });
+    // A merged CR can rewrite kortix.yaml: add or remove agents and change
+    // `default_agent`. Both live in the project detail entry, and the composer's
+    // agent list sits under it (`[...detail, 'agents']`), so New session kept
+    // offering removed agents until a reload (KRTX-3012).
+    qc.invalidateQueries({ queryKey: qk.project.detail(projectId) });
+}
 function useInvalidateAll(projectIdArg) {
     const qc = useQueryClient();
     const ctx = useProjectContext();
     const projectId = projectIdArg ?? ctx?.projectId ?? '';
-    return () => {
-        qc.invalidateQueries({ queryKey: changeRequestKeys.project(projectId) });
-        // Branches list shows ahead/behind that may shift after a merge.
-        qc.invalidateQueries({ queryKey: branchKeys.list(projectId) });
-        // The merge commit lands on the default branch — commit list goes stale.
-        qc.invalidateQueries({ queryKey: commitKeys.project(projectId) });
-        // Whether this version still differs from its base changes the moment a CR
-        // merges — refresh the "Alternate version of main · N changes" banner
-        // (git-status, which is otherwise sticky and never re-fetches on its own),
-        // the live version-diff preview, and the cached session row (base_ref etc.).
-        qc.invalidateQueries({ queryKey: gitStatusKeys.all });
-        qc.invalidateQueries({ queryKey: versionDiffKeys.project(projectId) });
-        // Every individual git-connected session under this project — a CR
-        // landing on the base ref can change what `getProjectSession` returns
-        // (base_ref etc.) for any of them. sessionsScope is the shared prefix
-        // that reaches the sessions list AND every qk.project.session(id, sid)
-        // entry in one call; there is no "every session, not the list" prefix to
-        // narrow to, so this deliberately also refreshes the sessions list.
-        qc.invalidateQueries({ queryKey: qk.project.sessionsScope(projectId) });
-        // Landing a CR on the base ref is the one thing that happens INSIDE the app
-        // that can make an open session's compiled agent config stale. The
-        // freshness query is deliberately not polled — this is what tells it to
-        // look again, so the chip appears on merge rather than on next focus.
-        qc.invalidateQueries({ queryKey: ['session-config', projectId] });
-    };
+    return () => invalidateAfterChangeRequestWrite(qc, projectId);
 }
 export function useOpenChangeRequest(options) {
     const ctx = useProjectContext();