@kortix/ui 0.14.4 → 0.14.6

package/dist/customize/settings/tabs/sandbox-tab.d.ts

@@ -1,8 +1,6 @@
 import { type ReactNode } from 'react';
-import type { UiTranslator } from '../../../i18n/index.js';
 import { type SandboxTemplate } from '@kortix/sdk';
 import { type Icon as PhosphorIcon } from '@phosphor-icons/react';
-import { type SandboxProvider, type SandboxProviderMode } from '../../sections/view/sandbox-provider-coverage.js';
 type TemplateTone = 'ok' | 'busy' | 'fail' | 'idle';
 /** Exported for test only — `TemplateCard` itself owns mutations and cannot
  *  render under `renderToStaticMarkup`, so the presentation decisions are
@@ -36,27 +34,13 @@ export declare function describeBase(template: SandboxTemplate, labels?: {
     icon: PhosphorIcon;
     mono: boolean;
 };
-/** 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 declare function describeRouting(providerMode: SandboxProviderMode, selectedProvider: SandboxProvider | null, tI18nComplete: UiTranslator, labels?: {
-    automatic?: string;
-    pinned?: string;
-    pinnedWithProvider?: (provider: string) => string;
-}): {
-    label: string;
-    icon: PhosphorIcon;
-};
 /** Locale-aware age for the runtime footer's "Checked …" stamp. */
 export declare function TemplateStateLine({ tone, label }: {
     tone: TemplateTone;
     label: string;
 }): import("react").JSX.Element;
-export declare function TemplateRuntimeFooter({ coverage, providerMode, selectedProvider, formatObservedAt, runtimeLabel, checkedLabel, badgeCopy, }: {
+export declare function TemplateRuntimeFooter({ coverage, formatObservedAt, runtimeLabel, checkedLabel, badgeCopy, }: {
     coverage: SandboxTemplate['provider_coverage'] | null | undefined;
-    providerMode: SandboxProviderMode;
-    selectedProvider: SandboxProvider | null;
     formatObservedAt: (observedAt: string) => string;
     runtimeLabel: string;
     checkedLabel: (value: string) => string;
@@ -71,15 +55,6 @@ export interface SandboxTabViewProps {
      *  by the container from the same `canManage` gate as everything else in
      *  this tab. `undefined` (not rendered) for a non-manager. */
     headerAction?: ReactNode;
-    /** `SandboxProviderRow` — the per-project provider pin, moved here from
-     *  `general-tab.tsx`. A slot for the same reason `templatesSlot` is one: it
-     *  owns a `useMutation`/`useQueryClient` and cannot render under
-     *  `renderToStaticMarkup` with no `QueryClientProvider`.
-     *
-     *  Rendered ABOVE the loading/error branch on purpose. It is fed by the
-     *  PROJECT query, not the snapshots query, so a slow or failed template read
-     *  must not hide a control that has nothing to do with it. */
-    sandboxProviderSlot?: ReactNode;
     /** `1 | 2 | null` — drives whether the manifest hint below reads
      *  `kortix.toml` or `kortix.yaml`. `null`/anything else falls back to
      *  `kortix.toml`, matching `sandbox-view.tsx`'s own ternary default. */
@@ -110,7 +85,7 @@ export interface SandboxTabViewProps {
  *  read. Kept separate from `SandboxTab` so this renders under
  *  `renderToStaticMarkup` with no `QueryClientProvider` — see
  *  `GeneralTabView` for the same split. */
-export declare function SandboxTabView({ isLoading, isError, errorMessage, onRetry, headerAction, sandboxProviderSlot, manifestVersion, templatesError, isEmpty, emptyAction, templatesSlot, copy: copyOverride, }: SandboxTabViewProps): import("react").JSX.Element;
+export declare function SandboxTabView({ isLoading, isError, errorMessage, onRetry, headerAction, manifestVersion, templatesError, isEmpty, emptyAction, templatesSlot, copy: copyOverride, }: SandboxTabViewProps): import("react").JSX.Element;
 /** Container: owns every hook (project + snapshots queries, the template
  *  form's open/edit state) and renders `SandboxTabView` with real data +
  *  the templates slot, plus `SandboxTemplateForm` as a sibling (it owns its

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/settings/tabs/sandbox-template-form.js

@@ -11,7 +11,7 @@ import { useTranslations } from '../../../i18n/index.js';
  */
 import { ShippingContainerIcon as Container, FileCodeIcon as FileCode, PackageIcon as Package, } from '@phosphor-icons/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Button } from '../../../primitives/button.js';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../../../primitives/dialog.js';
 import { Input } from '../../../primitives/input.js';
@@ -39,7 +39,7 @@ export function SandboxTemplateForm({ projectId, open, onOpenChange, template, }
     const isEdit = !!template;
     const queryClient = useQueryClient();
     const [name, setName] = useState('');
-    const [slug, setSlug] = useState('');
+    const [typedSlug, setSlug] = useState('');
     const [slugManuallyEdited, setSlugManuallyEdited] = useState(false);
     const [mode, setMode] = useState('image');
     const [image, setImage] = useState('');
@@ -49,10 +49,10 @@ export function SandboxTemplateForm({ projectId, open, onOpenChange, template, }
     const [memoryGb, setMemoryGb] = useState('4');
     const [diskGb, setDiskGb] = useState('20');
     // Reset / hydrate when opening
-    useEffect(() => {
-        if (!open)
-            return;
-        if (template) {
+    const [hydratedFor, setHydratedFor] = useState(null);
+    if (!hydratedFor || hydratedFor[0] !== open || hydratedFor[1] !== template) {
+        setHydratedFor([open, template]);
+        if (open && template) {
             setName(template.name);
             setSlug(template.slug);
             setSlugManuallyEdited(true);
@@ -71,7 +71,7 @@ export function SandboxTemplateForm({ projectId, open, onOpenChange, template, }
             setMemoryGb(String(template.memory_gb));
             setDiskGb(String(template.disk_gb));
         }
-        else {
+        else if (open) {
             setName('');
             setSlug('');
             setSlugManuallyEdited(false);
@@ -83,12 +83,9 @@ export function SandboxTemplateForm({ projectId, open, onOpenChange, template, }
             setMemoryGb('6');
             setDiskGb('20');
         }
-    }, [open, template]);
+    }
     // Auto-slug from name when the user hasn't typed a slug manually yet.
-    useEffect(() => {
-        if (!slugManuallyEdited)
-            setSlug(slugify(name));
-    }, [name, slugManuallyEdited]);
+    const slug = slugManuallyEdited ? typedSlug : slugify(name);
     const slugError = useMemo(() => {
         if (!slug)
             return null;

package/dist/customize/shared/capability-tabs.js

@@ -126,7 +126,8 @@ export function CapabilityTabs({ projectId }) {
     // once the project turns its flag on. `capabilityAccess()` applies the flags
     // and the leaves; before it settles the bar is invisible and both are left out.
     const access = useCapabilityAccess(projectId);
-    const tabs = allTabs.filter((tab) => access.settled ? access.tabs.includes(tab.key) : !FLAG_GATED_TABS.includes(tab.key));
+    const allowedTabs = new Set(access.tabs);
+    const tabs = allTabs.filter((tab) => access.settled ? allowedTabs.has(tab.key) : !FLAG_GATED_TABS.includes(tab.key));
     const leading = tabs.filter((tab) => !TRAILING_TABS.includes(tab.key));
     const primary = leading.filter((tab) => PRIMARY_TABS.includes(tab.key));
     const library = leading.filter((tab) => !PRIMARY_TABS.includes(tab.key));

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { NewEntityMenu } from '../shared/new-entity-menu.js';
 import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { Button } from '../../primitives/button.js';
 import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from '../../primitives/input-group.js';
 import { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs.js';
@@ -85,10 +85,8 @@ export function SkillsPage({ projectId }) {
     });
     // The one honest auto-close: the config came back and this skill is not in
     // it, so it really was deleted or renamed.
-    useEffect(() => {
-        if (detail.isMissing)
-            setSelectedPath(null);
-    }, [detail.isMissing]);
+    if (detail.isMissing)
+        setSelectedPath(null);
     // `null` = render the grid. Otherwise which "nothing to show" copy applies:
     // genuinely zero skills vs. skills exist but this filter/search hid all of
     // them. Telling the user "No skills yet" in the second case is false and
@@ -110,7 +108,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/event-trigger-copy.js

@@ -411,10 +411,11 @@ export function newConnectorSlug(app, taken) {
         .toLowerCase()
         .replace(/[^a-z0-9_-]+/g, '-')
         .replace(/^-+|-+$/g, '') || 'app';
-    if (!taken.includes(slug))
+    const takenSet = new Set(taken);
+    if (!takenSet.has(slug))
         return slug;
     for (let n = 2;; n++)
-        if (!taken.includes(`${slug}-${n}`))
+        if (!takenSet.has(`${slug}-${n}`))
             return `${slug}-${n}`;
 }
 /* ─── Delivery ──────────────────────────────────────────────────────────── */

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CalendarDotsIcon as CalendarClock, CaretDownIcon as ChevronDown } from '@phosphor-icons/react';
 import { useTranslations } from '../../../i18n/index.js';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Button } from '../../../primitives/button.js';
 import { Input } from '../../../primitives/input.js';
 import { Label } from '../../../primitives/label.js';
@@ -195,13 +195,15 @@ export function ScheduleBuilder({ value, onChange, disabled, allowOnce, runAt, o
     const onceMode = Boolean(allowOnce && onRunAtChange && runAt != null);
     const isCustom = cronToState(rawCron) === null;
     const hasPastRunAt = Boolean(runAt && new Date(runAt).getTime() <= Date.now());
-    useEffect(() => {
+    const [syncedValue, setSyncedValue] = useState(value);
+    if (value !== syncedValue) {
+        setSyncedValue(value);
         const parsed = cronToState(value);
         if (parsed)
             setState(parsed);
         setRawCron(value);
         setShowCron((visible) => visible || !parsed);
-    }, [value]);
+    }
     const update = useCallback((partial) => {
         const next = { ...state, ...partial };
         setState(next);
@@ -256,6 +258,7 @@ export function ScheduleBuilder({ value, onChange, disabled, allowOnce, runAt, o
     const canOnce = Boolean(allowOnce && onRunAtChange);
     const cadences = localizeUiCatalog(CADENCES, tI18nComplete, APP_REGISTRY_TRANSLATION_KEYS);
     const weekdayButtons = localizeUiCatalog(WEEKDAY_BUTTONS, tI18nComplete, APP_REGISTRY_TRANSLATION_KEYS);
+    const selectedWeekdays = new Set(state.weekdays);
     const intervalUnit = (value) => state.frequency === 'minutes' ? 'minutes' : `hour${value === 1 ? '' : 's'}`;
     return (_jsxs("div", { className: cn('space-y-3', disabled && 'pointer-events-none opacity-60 select-none'), children: [_jsxs("div", { className: "flex flex-wrap items-end gap-3", children: [_jsx(ScheduleField, { label: tI18nComplete.raw('textb6b7a0065808'), className: "w-full sm:w-44", children: _jsxs(Select, { value: onceMode ? 'once' : cadence, onValueChange: (next) => next === 'once' ? selectOnce() : selectCadence(next), disabled: disabled, children: [_jsx(SelectTrigger, { className: "h-9 w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [cadences.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))), canOnce ? (_jsx(SelectItem, { value: "once", children: tI18nComplete.raw('textd88f6d8372f4') })) : null] })] }) }), onceMode ? (_jsx(ScheduleField, { label: tI18nComplete.raw('text4b4c31294fb5'), className: "w-full sm:w-auto", children: _jsx(Input, { type: "datetime-local", value: runAt ? isoToLocalInput(runAt) : '', min: isoToLocalInput(new Date().toISOString()), onChange: (event) => onRunAtChange?.(localInputToIso(event.target.value)), onBlur: () => {
                                 if (hasPastRunAt)
@@ -265,7 +268,7 @@ export function ScheduleBuilder({ value, onChange, disabled, allowOnce, runAt, o
                                                 : [1, 2, 3, 4, 6, 8, 12]).map((value) => (_jsxs(SelectItem, { value: String(value), children: [value, " ", intervalUnit(value)] }, value))) })] }) })), state.frequency === 'monthly' && (_jsx(ScheduleField, { label: tTrigger('dayOfMonth'), className: "w-28", children: _jsxs(Select, { value: String(state.monthDay), onValueChange: (value) => update({ monthDay: Number(value) }), disabled: disabled, children: [_jsx(SelectTrigger, { className: "h-9 w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: Array.from({ length: 31 }, (_, index) => index + 1).map((value) => (_jsx(SelectItem, { value: String(value), children: value }, value))) })] }) })), state.frequency !== 'minutes' && (_jsx(ScheduleField, { label: state.frequency === 'hourly'
                                     ? tI18nComplete.raw('text5f2ed72dfcbc')
                                     : tI18nComplete.raw('text33b93476cf59'), children: _jsxs("div", { className: "flex items-center gap-1.5", children: [state.frequency !== 'hourly' && (_jsxs(_Fragment, { children: [_jsxs(Select, { value: String(state.hour), onValueChange: (value) => update({ hour: Number(value) }), disabled: disabled, children: [_jsx(SelectTrigger, { className: "h-9 w-18 tabular-nums", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: HOURS.map((value) => (_jsx(SelectItem, { value: String(value), children: pad2(value) }, value))) })] }), _jsx("span", { className: "text-muted-foreground", children: ":" })] })), _jsxs(Select, { value: String(state.minute), onValueChange: (value) => update({ minute: Number(value) }), disabled: disabled, children: [_jsx(SelectTrigger, { className: "h-9 w-18 tabular-nums", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: MINUTE_OPTIONS.map((value) => (_jsx(SelectItem, { value: String(value), children: state.frequency === 'hourly' ? `:${pad2(value)}` : pad2(value) }, value))) })] })] }) })), trailing] }))] }), !onceMode && cadence === 'weekly' && (_jsx("div", { className: "flex flex-wrap gap-1.5", "aria-label": tI18nComplete.raw('text2069f4549744'), children: weekdayButtons.map(({ value, label }) => {
-                    const selected = state.weekdays.includes(value);
+                    const selected = selectedWeekdays.has(value);
                     return (_jsx(Button, { type: "button", variant: selected ? 'secondary' : 'outline', size: "sm", "aria-pressed": selected, onClick: () => toggleWeekday(value), disabled: disabled, className: "min-w-10 transition-transform active:scale-[0.96]", children: label }, value));
                 }) })), onceMode && runAt && hasPastRunAt ? (_jsx(SchedulePreview, { text: describeRunAt(runAt, tI18nComplete), error: true })) : null, !onceMode && isCustom ? (_jsx(SchedulePreview, { text: tI18nComplete.raw('text7afd348d0d4b') })) : null, !onceMode && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Button, { type: "button", variant: "text", size: "xs", onClick: () => setShowCron((visible) => !visible), disabled: disabled, className: "text-muted-foreground hover:text-foreground -ml-1 transition-transform active:scale-[0.96]", children: [_jsx(ChevronDown, { className: cn('size-3 transition-transform duration-(--duration-normal)', showCron && 'rotate-180') }), showCron
                                 ? tI18nComplete.raw('text6c848b936d1d')