@kortix/ui 0.14.3 → 0.14.4

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

@@ -0,0 +1,338 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { LONG_AGO, relativeTime } from '../../../internal/lib/relative-time.js';
+import { FactCell } from './fact-cell.js';
+import { useState } from 'react';
+import { SandboxTemplateForm } from './sandbox-template-form.js';
+import { Badge } from '../../../primitives/badge.js';
+import { Button } from '../../../primitives/button.js';
+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';
+import { ErrorState } from '../../../primitives/error-state.js';
+import { manifestFilename, useProjectManifestVersion, } from '../../../internal/lib/manifest-version.js';
+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 { 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 { 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,
+];
+/** 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 = [
+    'sandbox-template-skeleton-1',
+    'sandbox-template-skeleton-2',
+    'sandbox-template-skeleton-3',
+];
+const TEMPLATE_STATE_LABEL = {
+    active: { label: 'Ready', tone: 'ok' },
+    pulling: { label: 'Pulling', tone: 'busy' },
+    building: { label: 'Building', tone: 'busy' },
+    removing: { label: 'Removing', tone: 'busy' },
+    error: { label: 'Error', tone: 'fail' },
+    build_failed: { label: 'Build failed', tone: 'fail' },
+    missing: { label: 'Not built yet', tone: 'idle' },
+};
+const TEMPLATE_TONE_TEXT = {
+    ok: 'text-kortix-green',
+    busy: 'text-kortix-yellow',
+    fail: 'text-kortix-red',
+    idle: 'text-muted-foreground',
+};
+/** Exported for test only — `TemplateCard` itself owns mutations and cannot
+ *  render under `renderToStaticMarkup`, so the presentation decisions are
+ *  pulled out as pure functions that can be asserted directly. */
+export function describeState(state, labels = {}) {
+    const fallback = TEMPLATE_STATE_LABEL[state] ?? { label: state || 'Unknown', tone: 'idle' };
+    return {
+        ...fallback,
+        label: labels[state] ?? (state ? fallback.label : (labels.unknown ?? 'Unknown')),
+    };
+}
+/** Where the template is declared, in words a reader who has never opened the
+ *  repo can act on. Replaces the raw `platform` / `UI` / `kortix.yaml` tag
+ *  that used to sit last in the bullet-separated meta line. */
+export function describeSource(template, manifestVersion, labels = {}) {
+    if (template.source === 'platform')
+        return {
+            label: labels.platform ?? 'Kortix platform',
+            icon: ShippingContainerIcon,
+            mono: false,
+        };
+    if (template.source === 'ui')
+        return { label: labels.dashboard ?? 'This dashboard', icon: SquaresFourIcon, mono: false };
+    return {
+        label: manifestFilename(manifestVersion),
+        icon: FileCodeIcon,
+        mono: true,
+    };
+}
+/** What the sandbox is built from. The old row folded this into a `sub` string
+ *  whose `is_default` branch hid the image entirely; the default's "shared by
+ *  every project" note is now a `Default` badge in the card header instead, so
+ *  this cell can always state the real base. */
+export function describeBase(template, labels = {}) {
+    if (template.has_image && template.image)
+        return {
+            label: labels.baseImage ?? 'Base image',
+            value: template.image,
+            icon: PackageIcon,
+            mono: true,
+        };
+    if (template.has_dockerfile && template.dockerfile_path)
+        return {
+            label: labels.builtFrom ?? 'Built from',
+            value: template.dockerfile_path,
+            icon: FileCodeIcon,
+            mono: true,
+        };
+    return {
+        label: labels.baseImage ?? 'Base image',
+        value: labels.kortixDefault ?? 'Kortix default',
+        icon: CubeIcon,
+        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, }) {
+    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] }));
+}
+function TemplateCard({ projectId, template, canManage, onEdit, providerMode, selectedProvider, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const t = useTranslations('settings.sandbox');
+    const locale = useLocale();
+    const queryClient = useQueryClient();
+    const { version: manifestVersion } = useProjectManifestVersion(projectId);
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    const templateId = template.template_id ?? null;
+    const requireTemplateId = () => {
+        if (!templateId)
+            throw new Error('Sandbox template id is missing');
+        return templateId;
+    };
+    const buildMut = useMutation({
+        mutationFn: () => buildSandboxTemplate(projectId, requireTemplateId()),
+        onSuccess: () => {
+            successToast(tI18nComplete('texte3f97a8573b6', { name: template.name }));
+            queryClient.invalidateQueries({ queryKey: qk.project.snapshots(projectId) });
+        },
+        onError: (err) => errorToast(err.message || tI18nComplete('text527ee9c936d3')),
+    });
+    const deleteMut = useMutation({
+        mutationFn: () => deleteSandboxTemplate(projectId, requireTemplateId()),
+        onSuccess: () => {
+            successToast(tI18nComplete('texta963ed79b37d', { name: template.name }));
+            queryClient.invalidateQueries({ queryKey: qk.project.snapshots(projectId) });
+            queryClient.invalidateQueries({ queryKey: qk.project.sandboxes(projectId) });
+            setConfirmDelete(false);
+        },
+        onError: (err) => errorToast(err.message || tI18nComplete('texta422c2e168e4')),
+    });
+    const stateInfo = describeState(template.provider_state || template.daytona_state, {
+        active: t('states.ready'),
+        pulling: t('states.pulling'),
+        building: t('states.building'),
+        removing: t('states.removing'),
+        error: t('states.error'),
+        build_failed: t('states.buildFailed'),
+        missing: t('states.notBuilt'),
+        unknown: t('states.unknown'),
+    });
+    const source = describeSource(template, manifestVersion, {
+        platform: t('sources.platform'),
+        dashboard: t('sources.dashboard'),
+    });
+    const base = describeBase(template, {
+        baseImage: t('facts.baseImage'),
+        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: {
+                            states: {
+                                ready: t('coverage.ready'),
+                                building: t('coverage.building'),
+                                failed: t('coverage.failed'),
+                                not_built: t('coverage.notReady'),
+                                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, }) {
+    const t = useTranslations('settings.sandbox');
+    const copy = copyOverride ?? {
+        loadFailed: t('loadFailed'),
+        retry: t('retry'),
+        descriptionStart: t('descriptionStart'),
+        descriptionEnd: t('descriptionEnd'),
+        configReadFailed: t('configReadFailed'),
+        emptyTitle: t('emptyTitle'),
+        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)] }))] }) }));
+}
+/** 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
+ *  own mutations — see this file's header comment). Only ever mounted while
+ *  this tab is active (`SettingsTabPane` in `settings-panel.tsx` returns
+ *  `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),
+        queryFn: () => listProjectSnapshots(projectId),
+        ...contract('config'),
+        retry: snapshotsQueryRetry,
+        refetchInterval: (query) => {
+            const data = query.state.data;
+            if (!data)
+                return false;
+            const templates = Array.isArray(data.templates) ? data.templates : [];
+            const anyBuilding = templates.some((t) => t.provider_state === 'building') ||
+                templates.some((t) => t.provider_coverage?.some((provider) => provider.status === 'building'));
+            return anyBuilding ? 5_000 : false;
+        },
+    });
+    const [formOpen, setFormOpen] = useState(false);
+    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);
+    };
+    const openEditForm = (tpl) => {
+        setEditingTemplate(tpl);
+        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 })] }));
+}

package/dist/customize/settings/tabs/sandbox-template-form.d.ts

@@ -0,0 +1,9 @@
+import { type SandboxTemplate } from '@kortix/sdk';
+export interface SandboxTemplateFormProps {
+    projectId: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Pre-fill from an existing template to edit; null/undefined = create. */
+    template?: SandboxTemplate | null;
+}
+export declare function SandboxTemplateForm({ projectId, open, onOpenChange, template, }: SandboxTemplateFormProps): import("react").JSX.Element;

package/dist/customize/settings/tabs/sandbox-template-form.js

@@ -0,0 +1,162 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslations } from '../../../i18n/index.js';
+/**
+ * Create / edit dialog for a project's sandbox template.
+ *
+ * Mirrors the Daytona "Create Snapshot" form (image + resources + entrypoint)
+ * but adapted for Kortix: a template can be defined either by a `dockerfile`
+ * path in the project repo OR a public `image` reference. The Kortix runtime
+ * layer is added automatically — the user only defines their workspace base.
+ */
+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 { Button } from '../../../primitives/button.js';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../../../primitives/dialog.js';
+import { Input } from '../../../primitives/input.js';
+import { Label } from '../../../primitives/label.js';
+import Loading from '../../../primitives/loading.js';
+import { Textarea } from '../../../primitives/textarea.js';
+import { errorToast, successToast } from '../../../primitives/toast.js';
+import { cn } from '../../../internal/lib/utils.js';
+import { createSandboxTemplate, updateSandboxTemplate } from '@kortix/sdk';
+import { qk } from '@kortix/sdk/react';
+const SLUG_RE = /^[a-z0-9][a-z0-9_-]{0,63}$/;
+function isValidSlug(s) {
+    return SLUG_RE.test(s);
+}
+function slugify(name) {
+    return name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .slice(0, 64);
+}
+export function SandboxTemplateForm({ projectId, open, onOpenChange, template, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const t = useTranslations('settings.sandbox.form');
+    const isEdit = !!template;
+    const queryClient = useQueryClient();
+    const [name, setName] = useState('');
+    const [slug, setSlug] = useState('');
+    const [slugManuallyEdited, setSlugManuallyEdited] = useState(false);
+    const [mode, setMode] = useState('image');
+    const [image, setImage] = useState('');
+    const [dockerfilePath, setDockerfilePath] = useState('');
+    const [entrypoint, setEntrypoint] = useState('');
+    const [cpu, setCpu] = useState('2');
+    const [memoryGb, setMemoryGb] = useState('4');
+    const [diskGb, setDiskGb] = useState('20');
+    // Reset / hydrate when opening
+    useEffect(() => {
+        if (!open)
+            return;
+        if (template) {
+            setName(template.name);
+            setSlug(template.slug);
+            setSlugManuallyEdited(true);
+            if (template.image) {
+                setMode('image');
+                setImage(template.image);
+                setDockerfilePath('');
+            }
+            else {
+                setMode('dockerfile');
+                setImage('');
+                setDockerfilePath(template.dockerfile_path ?? '');
+            }
+            setEntrypoint(template.entrypoint ?? '');
+            setCpu(String(template.cpu));
+            setMemoryGb(String(template.memory_gb));
+            setDiskGb(String(template.disk_gb));
+        }
+        else {
+            setName('');
+            setSlug('');
+            setSlugManuallyEdited(false);
+            setMode('image');
+            setImage('');
+            setDockerfilePath('');
+            setEntrypoint('');
+            setCpu('2');
+            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 slugError = useMemo(() => {
+        if (!slug)
+            return null;
+        if (slug === 'default')
+            return t('errors.reservedSlug');
+        if (!isValidSlug(slug))
+            return t('errors.invalidSlug');
+        return null;
+    }, [slug, t]);
+    const sourceError = useMemo(() => {
+        if (mode === 'image' && !image.trim())
+            return t('errors.imageRequired');
+        if (mode === 'dockerfile' && !dockerfilePath.trim())
+            return t('errors.dockerfileRequired');
+        if (mode === 'image' && image.trim().endsWith(':latest')) {
+            return t('errors.latestTag');
+        }
+        return null;
+    }, [mode, image, dockerfilePath, t]);
+    const canSubmit = !!slug && !slugError && !sourceError && !!name.trim();
+    const createMut = useMutation({
+        mutationFn: () => createSandboxTemplate(projectId, {
+            slug,
+            name: name.trim(),
+            ...(mode === 'image'
+                ? { image: image.trim() }
+                : { dockerfile_path: dockerfilePath.trim() }),
+            entrypoint: entrypoint.trim() || undefined,
+            cpu: parsePosInt(cpu),
+            memory_gb: parsePosInt(memoryGb),
+            disk_gb: parsePosInt(diskGb),
+        }),
+        onSuccess: () => {
+            successToast(t('toasts.created'));
+            queryClient.invalidateQueries({ queryKey: qk.project.snapshots(projectId) });
+            queryClient.invalidateQueries({ queryKey: qk.project.sandboxes(projectId) });
+            onOpenChange(false);
+        },
+        onError: (err) => errorToast(err.message || t('toasts.createFailed')),
+    });
+    const editMut = useMutation({
+        mutationFn: () => updateSandboxTemplate(projectId, template.template_id, {
+            name: name.trim(),
+            image: mode === 'image' ? image.trim() : null,
+            dockerfile_path: mode === 'dockerfile' ? dockerfilePath.trim() : null,
+            entrypoint: entrypoint.trim() || null,
+            cpu: parsePosInt(cpu) ?? null,
+            memory_gb: parsePosInt(memoryGb) ?? null,
+            disk_gb: parsePosInt(diskGb) ?? null,
+        }),
+        onSuccess: () => {
+            successToast(t('toasts.updated'));
+            queryClient.invalidateQueries({ queryKey: qk.project.snapshots(projectId) });
+            queryClient.invalidateQueries({ queryKey: qk.project.sandboxes(projectId) });
+            onOpenChange(false);
+        },
+        onError: (err) => errorToast(err.message || t('toasts.updateFailed')),
+    });
+    const submitting = createMut.isPending || editMut.isPending;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-xl", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(Container, { className: "size-4" }), isEdit ? t('editTitle', { name: template?.name ?? '' }) : t('newTitle')] }), _jsx(DialogDescription, { children: t('description') })] }), _jsxs("div", { className: "space-y-4 py-2", children: [_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "tpl-name", children: t('name') }), _jsx(Input, { id: "tpl-name", placeholder: t('namePlaceholder'), value: name, onChange: (e) => setName(e.target.value) })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "tpl-slug", children: t('slug') }), _jsx(Input, { id: "tpl-slug", placeholder: tI18nComplete.raw('text5d58d41913d9'), value: slug, onChange: (e) => {
+                                                setSlugManuallyEdited(true);
+                                                setSlug(e.target.value.toLowerCase());
+                                            }, disabled: isEdit, "aria-invalid": !!slugError }), slugError && _jsx("p", { className: "text-destructive mt-1 text-xs", children: slugError })] })] }), _jsxs("div", { children: [_jsx(Label, { children: t('imageSource') }), _jsxs("div", { className: "mt-2 grid grid-cols-2 gap-2", children: [_jsxs("button", { type: "button", onClick: () => setMode('image'), className: cn('border-border/60 flex flex-col items-start gap-1 rounded-md border p-3 text-left text-sm transition-colors', mode === 'image' && 'border-foreground/30 bg-muted/40'), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Package, { className: "size-4" }), _jsx("span", { className: "font-medium", children: t('publicImage') })] }), _jsxs("span", { className: "text-muted-foreground text-xs", children: [t('example'), " ", _jsx("code", { className: "font-mono", children: "python:3.12-slim" })] })] }), _jsxs("button", { type: "button", onClick: () => setMode('dockerfile'), className: cn('border-border/60 flex flex-col items-start gap-1 rounded-md border p-3 text-left text-sm transition-colors', mode === 'dockerfile' && 'border-foreground/30 bg-muted/40'), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileCode, { className: "size-4" }), _jsx("span", { className: "font-medium", children: tI18nComplete.raw('textdd2c0eb6ea5c') })] }), _jsx("span", { className: "text-muted-foreground text-xs", children: t('pathInsideRepo') })] })] }), _jsxs("div", { className: "mt-3", children: [mode === 'image' ? (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "tpl-image", children: t('image') }), _jsx(Input, { id: "tpl-image", placeholder: tI18nComplete.raw('text1d0447543fac'), value: image, onChange: (e) => setImage(e.target.value) }), _jsxs("p", { className: "text-muted-foreground mt-1 text-xs", children: [t('specificTag'), " (", _jsx("code", { className: "font-mono", children: "latest" }), ")."] })] })) : (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "tpl-df", children: t('dockerfilePath') }), _jsx(Input, { id: "tpl-df", placeholder: tI18nComplete.raw('text1bc7a47dada1'), value: dockerfilePath, onChange: (e) => setDockerfilePath(e.target.value) }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: t('relativeToRoot') })] })), sourceError && _jsx("p", { className: "text-destructive mt-1 text-xs", children: sourceError })] })] }), _jsxs("div", { children: [_jsx(Label, { children: t('resources') }), _jsxs("div", { className: "mt-2 grid grid-cols-3 gap-3", children: [_jsx(NumericField, { id: "cpu", label: tI18nComplete.raw('text082591a16602'), value: cpu, onChange: setCpu, min: 1, max: 32 }), _jsx(NumericField, { id: "mem", label: t('memory'), value: memoryGb, onChange: setMemoryGb, min: 1, max: 128 }), _jsx(NumericField, { id: "disk", label: t('disk'), value: diskGb, onChange: setDiskGb, min: 1, max: 500 })] })] }), _jsxs("div", { children: [_jsxs(Label, { htmlFor: "tpl-entry", children: [t('entrypoint'), " ", _jsxs("span", { className: "text-muted-foreground", children: ["(", t('optional'), ")"] })] }), _jsx(Textarea, { id: "tpl-entry", placeholder: t('entrypointPlaceholder'), value: entrypoint, onChange: (e) => setEntrypoint(e.target.value), className: "font-mono text-xs", rows: 2 })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: submitting, children: t('cancel') }), _jsxs(Button, { onClick: () => (isEdit ? editMut.mutate() : createMut.mutate()), disabled: !canSubmit || submitting, children: [submitting && _jsx(Loading, { className: "mr-2 size-4" }), isEdit ? t('save') : t('create')] })] })] }) }));
+}
+function NumericField({ id, label, value, onChange, min, max, }) {
+    return (_jsxs("div", { children: [_jsx(Label, { htmlFor: id, className: "text-xs", children: label }), _jsx(Input, { id: id, type: "number", min: min, max: max, value: value, onChange: (e) => onChange(e.target.value) })] }));
+}
+function parsePosInt(s) {
+    const n = Number.parseInt(s, 10);
+    return Number.isFinite(n) && n > 0 ? n : undefined;
+}

package/dist/customize/settings/tabs/snapshots-query.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Retry policy for `GET /projects/:id/snapshots`, shared by the Sandbox and
+ * Snapshots tabs (both read one cache entry).
+ *
+ * The route reads the project's Dockerfile from the Git mirror and asks each
+ * provider for build state. A cold mirror or a slow provider can hold it past
+ * the client's 30 s timeout. The app default retries 3 times, so a timeout
+ * held the skeleton for minutes before the error state could show. One retry
+ * absorbs a blip. A 4xx is an answer, never retried.
+ */
+export declare function snapshotsQueryRetry(failureCount: number, error: unknown): boolean;

package/dist/customize/settings/tabs/snapshots-query.js

@@ -0,0 +1,16 @@
+/**
+ * Retry policy for `GET /projects/:id/snapshots`, shared by the Sandbox and
+ * Snapshots tabs (both read one cache entry).
+ *
+ * The route reads the project's Dockerfile from the Git mirror and asks each
+ * provider for build state. A cold mirror or a slow provider can hold it past
+ * the client's 30 s timeout. The app default retries 3 times, so a timeout
+ * held the skeleton for minutes before the error state could show. One retry
+ * absorbs a blip. A 4xx is an answer, never retried.
+ */
+export function snapshotsQueryRetry(failureCount, error) {
+    const status = error?.status;
+    if (typeof status === 'number' && status >= 400 && status < 500)
+        return false;
+    return failureCount < 1;
+}