@kortix/ui 0.0.0-stage → 0.14.4

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

@@ -0,0 +1,142 @@
+import { type FailedBuildRelevance } from '../../../workspace/sidebar/footer/sandbox-alert-state.js';
+import { type ProjectSnapshotBuild, type SandboxRuntimeStatus, type SnapshotErrorCategory } from '@kortix/sdk';
+import type { SandboxProviderMode } from '../../sections/view/sandbox-provider-coverage.js';
+export interface BuildOutcome {
+    /** Row title: what the reader named this thing, not what the platform calls it. */
+    title: string;
+    /** One sentence saying what this row means for the reader. No jargon. */
+    summary: string;
+    /** `null` unless this is a failure that no longer blocks anything. */
+    stale: Exclude<FailedBuildRelevance, 'blocking'> | null;
+}
+/**
+ * The whole vocabulary decision for one row, as data.
+ *
+ * Pure and exported so the wording — the part most likely to regress into
+ * jargon — can be asserted directly, the same reasoning `disclosure.tsx` gives
+ * for extracting `resolveDisclosureToggle`.
+ */
+export declare function describeBuildOutcome(build: ProjectSnapshotBuild, relevance?: FailedBuildRelevance | null, copy?: Pick<SnapshotMessages, 'outcomes' | 'stale'>): BuildOutcome;
+export declare function BuildDetails({ build, providerMode, copy: copyOverride, }: {
+    build: ProjectSnapshotBuild;
+    providerMode?: SandboxProviderMode;
+    copy?: SnapshotMessages;
+}): import("react").JSX.Element;
+export declare function BuildRow({ build, providerMode, relevance, copy: copyOverride, }: {
+    build: ProjectSnapshotBuild;
+    /** Only reveal the resolved provider when the project has explicitly pinned one. */
+    providerMode: SandboxProviderMode;
+    /** How this build relates to the image the project boots today. */
+    relevance?: FailedBuildRelevance | null;
+    copy?: SnapshotMessages;
+}): import("react").JSX.Element;
+export interface SnapshotsTabViewProps {
+    isLoading?: boolean;
+    isError?: boolean;
+    errorMessage?: string;
+    onRetry?: () => void;
+    status?: SandboxRuntimeStatus | null;
+    /** Byte-identical to `sandbox-tab.tsx`'s own `canManage` — see this
+     *  file's header comment, "Gate — preserved exactly". Gates only the
+     *  status banner's Rebuild button. */
+    canManage?: boolean;
+    isFixPending?: boolean;
+    isRetryPending?: boolean;
+    onFix?: () => void;
+    /** Renamed from `sandbox-view.tsx`'s `onRetry` (the build-recovery retry)
+     *  to avoid colliding with the query-level `onRetry` above. */
+    onRetryBuild?: () => void;
+    providerMode?: SandboxProviderMode;
+    templateBuilds?: ProjectSnapshotBuild[];
+    copy?: SnapshotMessages;
+}
+/** Presentational only — no hooks, no data fetching, no store or Supabase
+ *  read. Kept separate from `SnapshotsTab` so this renders under
+ *  `renderToStaticMarkup` with no `QueryClientProvider` — see
+ *  `SandboxTabView` for the same split. Unlike that view, no slots are
+ *  needed here: every component below takes plain props. */
+export declare function SnapshotsTabView({ isLoading, isError, errorMessage, onRetry, status, canManage, isFixPending, isRetryPending, onFix, onRetryBuild, providerMode, templateBuilds, copy: copyOverride, }: SnapshotsTabViewProps): import("react").JSX.Element;
+/** Container: owns every hook (project + snapshots queries, sandbox
+ *  recovery mutations) and renders `SnapshotsTabView` with real data. Only
+ *  ever mounted while this tab is active (`SettingsTabPane` in
+ *  `settings-panel.tsx` returns `null` otherwise), so nothing here fetches
+ *  on panel open. */
+export declare function SnapshotsTab({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element;
+type SnapshotMessages = ReturnType<typeof useSnapshotMessages>;
+declare function useSnapshotMessages(): {
+    locale: string;
+    categoryLabels: Record<SnapshotErrorCategory, string>;
+    categoryHelp: Record<SnapshotErrorCategory, string>;
+    sourceLabels: Record<NonNullable<"background" | "manual" | "session-start" | "project-create" | "cr-merge" | "startup" | null>, string>;
+    statusLabels: {
+        ready: string;
+        building: string;
+        failed: string;
+    };
+    stale: {
+        superseded: string;
+        recovered: string;
+        retrying: string;
+    };
+    outcomes: {
+        ready: string;
+        building: string;
+        blocked: string;
+        failed: string;
+    };
+    facts: {
+        triggeredBy: string;
+        started: string;
+        took: string;
+        stillRunning: string;
+        runsOn: string;
+        imageId: string;
+        unknown: string;
+    };
+    duration: {
+        underMinute: string;
+        minutes: (count: number) => string;
+        hours: (count: number) => string;
+    };
+    environment: {
+        ready: {
+            title: string;
+            body: string;
+        };
+        building: {
+            title: string;
+            body: string;
+        };
+        not_built: {
+            title: string;
+            body: string;
+        };
+    };
+    banner: {
+        blockedTitle: string;
+        degradedTitle: string;
+        blockedBody: string;
+        degradedBody: (ready: string, failed: string) => string;
+    };
+    actions: {
+        fix: string;
+        rebuild: string;
+    };
+    faq: {
+        title: string;
+        items: {
+            question: string;
+            answer: string;
+        }[];
+    };
+    view: {
+        loadFailed: string;
+        retry: string;
+        logTitle: string;
+        logDescription: string;
+        empty: string;
+    };
+};
+export {};

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

@@ -0,0 +1,358 @@
+'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 { CopyButton } from '../../../markdown/copy-button.js';
+import { Badge } from '../../../primitives/badge.js';
+import { Button } from '../../../primitives/button.js';
+import { Disclosure, DisclosureBody, DisclosureContent, DisclosureTrigger, } from '../../../primitives/disclosure.js';
+import { InlineMeta } from '../../../primitives/inline-meta.js';
+import Loading from '../../../primitives/loading.js';
+import { SettingsSubsectionHeader } from '../../../primitives/settings-subsection-header.js';
+import { Skeleton } from '../../../primitives/skeleton.js';
+import { ErrorState } from '../../../primitives/error-state.js';
+import { describeFailedBuild, formatSandboxProvider, formatSandboxProviders, isLegacySandboxProvider, } from '../../../workspace/sidebar/footer/sandbox-alert-state.js';
+import { useSandboxRecovery } from '../../../workspace/sidebar/footer/sandbox-health.js';
+import { APP_REGISTRY_TRANSLATION_KEYS } from '../../../i18n/ui-catalog/app-registry-translation-keys.generated.js';
+import { localizeUiCatalog } from '../../../i18n/ui-catalog/localize-ui-catalog.js';
+import { useLocale, useTranslations } from '../../../i18n/index.js';
+import { PROJECT_ACTIONS } from '../../../internal/lib/project-actions.js';
+import { useProjectCan } from '../../../internal/lib/use-project-can.js';
+import { cn } from '../../../internal/lib/utils.js';
+import { getProject, listProjectSnapshots, } from '@kortix/sdk';
+import { contract, qk } from '@kortix/sdk/react';
+import { CalendarBlankIcon, CheckCircleIcon as CheckCircleSolid, CaretDownIcon as ChevronDown, WarningIcon as DangerTriangleSolid, HardDrivesIcon, LightningIcon, ArrowClockwiseIcon as RefreshCw, SparkleIcon as SparklesSolid, StackIcon, TimerIcon, XCircleIcon as XCircleSolid, } from '@phosphor-icons/react';
+import { useQuery } from '@tanstack/react-query';
+import { snapshotsQueryRetry } from './snapshots-query.js';
+/** Build-status tile icons render solid/fill — a filled status glyph inside
+ *  the colored tile, distinct from the app's default outline weight. */
+const CheckCircleFilled = ({ className }) => (_jsx(CheckCircleSolid, { className: className, weight: "fill" }));
+const XCircleFilled = ({ className }) => (_jsx(XCircleSolid, { className: className, weight: "fill" }));
+const BUILD_STATUS_TILE = {
+    ready: {
+        label: 'ready',
+        badgeVariant: 'success',
+        tileBg: 'bg-kortix-green/15',
+        iconColor: 'text-kortix-green',
+        Icon: CheckCircleFilled,
+    },
+    building: {
+        label: 'building',
+        badgeVariant: 'warning',
+        tileBg: 'bg-kortix-yellow/15',
+        iconColor: 'text-kortix-yellow',
+        Icon: Loading,
+    },
+    failed: {
+        label: 'failed',
+        badgeVariant: 'destructive',
+        tileBg: 'bg-kortix-red/15',
+        iconColor: 'text-kortix-red',
+        Icon: XCircleFilled,
+    },
+};
+function ProviderBadge({ provider }) {
+    const t = useTranslations('settings.sandbox');
+    if (!provider)
+        return null;
+    return (_jsxs(Badge, { variant: "muted", size: "sm", children: [formatSandboxProvider(provider), isLegacySandboxProvider(provider) ? ` · ${t('provider.legacy')}` : null] }));
+}
+function formatBuildDuration(startedAt, finishedAt, copy) {
+    if (!finishedAt)
+        return null;
+    const start = new Date(startedAt).getTime();
+    const end = new Date(finishedAt).getTime();
+    if (!Number.isFinite(start) || !Number.isFinite(end) || end <= start)
+        return null;
+    const minutes = Math.round((end - start) / 60_000);
+    if (minutes < 1)
+        return copy.underMinute;
+    if (minutes < 60)
+        return copy.minutes(minutes);
+    const hours = Math.round(minutes / 60);
+    return copy.hours(hours);
+}
+/** The exact moment, for the detail grid — "how long ago" is already on the
+ *  collapsed row, and a reader comparing a build against something that
+ *  happened in their day needs the clock time, not an age. */
+function formatStartedAt(input, locale = 'en') {
+    if (!input)
+        return '—';
+    const t = new Date(input).getTime();
+    if (!Number.isFinite(t))
+        return '—';
+    return new Intl.DateTimeFormat(locale, {
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+    }).format(t);
+}
+/**
+ * A failed build that no longer describes anything bootable is history, and must
+ * not keep shouting in red — that is exactly how an 11-day-old error passed for
+ * a live outage. Only a failure that still blocks a session keeps the red tile.
+ */
+const STALE_FAILURE_SUMMARY = {
+    superseded: 'Didn’t finish, and a newer setup has replaced it',
+    recovered: 'Didn’t finish, but the environment is ready now',
+    retrying: 'Didn’t finish — a new attempt is running',
+};
+/**
+ * The whole vocabulary decision for one row, as data.
+ *
+ * Pure and exported so the wording — the part most likely to regress into
+ * jargon — can be asserted directly, the same reasoning `disclosure.tsx` gives
+ * for extracting `resolveDisclosureToggle`.
+ */
+export function describeBuildOutcome(build, relevance, copy = {
+    stale: STALE_FAILURE_SUMMARY,
+    outcomes: {
+        ready: 'Ready for new sessions',
+        building: 'Being prepared now',
+        blocked: 'New sessions can’t start on this',
+        failed: 'Didn’t finish',
+    },
+}) {
+    const title = build.slug;
+    const stale = relevance && relevance !== 'blocking' ? relevance : null;
+    if (build.status === 'ready') {
+        return { title, stale: null, summary: copy.outcomes.ready };
+    }
+    if (build.status === 'building') {
+        return { title, stale: null, summary: copy.outcomes.building };
+    }
+    if (stale) {
+        return { title, stale, summary: copy.stale[stale] };
+    }
+    return {
+        title,
+        stale: null,
+        summary: relevance === 'blocking' ? copy.outcomes.blocked : copy.outcomes.failed,
+    };
+}
+export function BuildDetails({ build, providerMode = 'automatic', copy: copyOverride, }) {
+    const translatedCopy = useSnapshotMessages();
+    const tSandbox = useTranslations('settings.sandbox');
+    const copy = copyOverride ?? translatedCopy;
+    const duration = formatBuildDuration(build.started_at, build.finished_at, copy.duration);
+    const category = build.error_category ?? 'unknown';
+    // Only a project that has explicitly pinned a provider gets told which one a
+    // build resolved to — on Automatic the answer is an implementation detail
+    // that changes under the reader.
+    const provider = providerMode === 'pinned' ? build.provider : null;
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("dl", { className: "grid grid-cols-2 gap-x-4 gap-y-4 tabular-nums sm:grid-cols-3", children: [_jsx(FactCell, { icon: LightningIcon, label: copy.facts.triggeredBy, value: build.source ? copy.sourceLabels[build.source] : copy.facts.unknown }), _jsx(FactCell, { icon: CalendarBlankIcon, label: copy.facts.started, value: formatStartedAt(build.started_at, copy.locale) }), _jsx(FactCell, { icon: TimerIcon, label: copy.facts.took, value: duration ?? (build.status === 'building' ? copy.facts.stillRunning : '—') }), provider ? (_jsx(FactCell, { icon: HardDrivesIcon, label: copy.facts.runsOn, value: isLegacySandboxProvider(provider)
+                            ? `${formatSandboxProvider(provider)} · ${tSandbox('provider.legacy')}`
+                            : formatSandboxProvider(provider) })) : null] }), _jsxs("div", { className: "bg-muted/40 flex items-center gap-2 rounded-sm py-1 pr-1 pl-2.5", children: [_jsx("span", { className: "text-muted-foreground shrink-0 text-xs", children: copy.facts.imageId }), _jsx("code", { className: "text-muted-foreground min-w-0 flex-1 truncate font-mono text-xs", children: build.snapshot_name }), _jsx(CopyButton, { code: build.snapshot_name, size: "sm" })] }), build.status === 'failed' && build.error ? (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: copy.categoryLabels[category] }), _jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: copy.categoryHelp[category] }), _jsx("pre", { className: "bg-muted/50 text-muted-foreground max-h-40 overflow-auto rounded-sm p-2.5 text-xs wrap-break-word whitespace-pre-wrap", children: build.error })] })) : null] }));
+}
+export function BuildRow({ build, providerMode, relevance, copy: copyOverride, }) {
+    const translatedCopy = useSnapshotMessages();
+    const copy = copyOverride ?? translatedCopy;
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const status = localizeUiCatalog(BUILD_STATUS_TILE, tI18nComplete, APP_REGISTRY_TRANSLATION_KEYS)[build.status];
+    const { Icon } = status;
+    const outcome = describeBuildOutcome(build, relevance, copy);
+    const stale = outcome.stale;
+    const timestamp = relativeTime(build.finished_at ?? build.started_at, copy.locale, Date.now(), LONG_AGO);
+    return (_jsx("li", { children: _jsxs(Disclosure, { className: "group/build bg-popover overflow-hidden", variant: "outline", transition: { duration: 0.18, ease: [0.23, 1, 0.32, 1] }, children: [_jsx(DisclosureTrigger, { children: _jsxs("div", { className: "focus-visible:ring-kortix-base hover:bg-foreground/[0.03] flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 transition-colors outline-none focus-visible:ring-[0.6px]", children: [_jsx("span", { className: cn('flex size-9 shrink-0 items-center justify-center rounded-sm', stale ? 'border-border text-muted-foreground border' : status.tileBg), children: _jsx(Icon, { className: cn('size-5 shrink-0', stale ? undefined : status.iconColor) }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: cn('truncate text-sm font-medium', stale ? 'text-muted-foreground' : 'text-foreground'), children: outcome.title }), _jsx(Badge, { variant: stale ? 'muted' : status.badgeVariant, size: "xs", children: copy.statusLabels[build.status] }), providerMode === 'pinned' ? _jsx(ProviderBadge, { provider: build.provider }) : null] }), _jsxs("div", { className: "text-muted-foreground mt-0.5 flex items-center gap-1.5 text-xs", children: [_jsx("span", { className: "truncate", children: outcome.summary }), _jsx("span", { className: "text-muted-foreground/40", children: tI18nComplete.raw('text3b9453dad42b') }), _jsx("span", { className: "shrink-0 tabular-nums", children: timestamp })] })] }), _jsx(ChevronDown, { className: "text-muted-foreground duration-normal size-4 shrink-0 transition-transform ease-out group-data-[state=open]/build:rotate-180 motion-reduce:transition-none" })] }) }), _jsx(DisclosureContent, { className: "overflow-hidden", contentClassName: "border-border border-t", children: _jsx(DisclosureBody, { className: "px-4 py-4", children: _jsx(BuildDetails, { build: build, providerMode: providerMode, copy: copy }) }) })] }) }));
+}
+function InlinePanelEmpty({ message }) {
+    return (_jsx("div", { className: "flex flex-col items-center gap-3 px-4 py-8 text-center", children: _jsx("p", { className: "text-muted-foreground text-sm text-balance", children: message }) }));
+}
+function EnvironmentSummary({ status, copy, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const summary = localizeUiCatalog(ENVIRONMENT_SUMMARY, tI18nComplete, APP_REGISTRY_TRANSLATION_KEYS)[status.state];
+    if (!summary)
+        return null;
+    const { Icon } = summary;
+    return (_jsxs("div", { className: "border-border bg-popover flex items-start gap-3 rounded-md border px-4 py-3", children: [_jsx("span", { className: cn('flex size-9 shrink-0 items-center justify-center rounded-sm', summary.tileBg), children: _jsx(Icon, { className: cn('size-5 shrink-0', summary.iconColor) }) }), _jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [_jsx("p", { className: "text-foreground text-sm font-medium text-balance", children: copy.environment[status.state].title }), _jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: copy.environment[status.state].body })] })] }));
+}
+/**
+ * Keyed by `SandboxRuntimeStatus['state']` and deliberately PARTIAL: `blocked`
+ * and `degraded` belong to `SandboxStatusBanner`, and `unknown` gets no entry
+ * because the API is saying it could not observe the providers. A missing key
+ * renders nothing, which is the honest answer in all three cases.
+ */
+const ENVIRONMENT_SUMMARY = {
+    ready: {
+        tileBg: 'bg-kortix-green/15',
+        iconColor: 'text-kortix-green',
+        Icon: CheckCircleFilled,
+    },
+    building: {
+        tileBg: 'bg-kortix-yellow/15',
+        iconColor: 'text-kortix-yellow',
+        Icon: Loading,
+    },
+    // Neutral, not tinted: nothing has happened yet, so the tile carries the
+    // same outlined treatment a stale build row gets rather than borrowing a
+    // status colour it has not earned.
+    not_built: {
+        tileBg: 'border-border border',
+        iconColor: 'text-muted-foreground',
+        Icon: StackIcon,
+    },
+};
+function SandboxStatusBanner({ status, canManage, isFixPending, isRetryPending, onFix, onRetry, copy: copyOverride, }) {
+    const translatedCopy = useSnapshotMessages();
+    const copy = copyOverride ?? translatedCopy;
+    const failure = status.current_failure;
+    const blocked = status.state === 'blocked';
+    const showFixAction = canManage && status.fix_with_agent_available;
+    const failedAt = failure
+        ? relativeTime(failure.finished_at ?? failure.started_at, copy.locale, Date.now(), LONG_AGO)
+        : null;
+    return (_jsx("div", { className: "border-border bg-popover rounded-md border", children: _jsxs("div", { className: "flex items-start gap-3 px-4 py-3", children: [_jsx("span", { className: cn('inline-flex size-10 shrink-0 items-center justify-center self-start rounded-sm', blocked ? 'bg-kortix-red/10 text-kortix-red' : 'bg-kortix-orange/10 text-kortix-orange'), children: blocked ? (_jsx(XCircleSolid, { weight: "fill", className: "size-6 shrink-0" })) : (_jsx(DangerTriangleSolid, { weight: "fill", className: "size-6 shrink-0" })) }), _jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [_jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("p", { className: "text-foreground text-sm font-medium text-balance", children: blocked ? copy.banner.blockedTitle : copy.banner.degradedTitle }), _jsx("p", { className: "text-muted-foreground text-sm text-balance", children: blocked
+                                                ? copy.banner.blockedBody
+                                                : copy.banner.degradedBody(formatSandboxProviders(status.ready_providers), formatSandboxProviders(status.failed_providers)) }), failure?.error_category ? (_jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: copy.categoryHelp[failure.error_category] })) : null, failure ? (_jsxs(InlineMeta, { children: [_jsx("code", { className: "bg-muted rounded-sm px-1.5 py-0.5 font-mono text-xs", children: failure.slug }), _jsx("span", { className: "tabular-nums", children: failedAt })] })) : null] }), _jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [failure?.error_category ? (_jsx(Badge, { size: "sm", variant: blocked ? 'destructive' : 'warning', children: copy.categoryLabels[failure.error_category] ?? failure.error_category })) : null, showFixAction ? (_jsxs(Button, { size: "sm", className: "gap-1.5 transition-transform active:scale-[0.96]", disabled: isFixPending, onClick: onFix, children: [isFixPending ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(SparklesSolid, { className: "size-3.5 shrink-0" })), copy.actions.fix] })) : null, canManage ? (_jsxs(Button, { size: "sm", variant: "outline", className: "gap-1.5 transition-transform active:scale-[0.96]", disabled: isRetryPending, onClick: onRetry, children: [isRetryPending ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(RefreshCw, { className: "size-3.5 shrink-0" })), copy.actions.rebuild] })) : null] })] }), failure?.error ? (_jsx("pre", { className: "bg-muted/50 text-muted-foreground max-h-36 overflow-auto rounded-sm p-2.5 text-xs wrap-break-word whitespace-pre-wrap", children: failure.error })) : null] })] }) }));
+}
+/**
+ * The three questions this pane provokes and never answered.
+ *
+ * Same disclosure shape as a build row, deliberately: a reader who has just
+ * learned that rows open finds these open the same way. Last on the page —
+ * a returning reader wants the log, and a first-time reader has the heading's
+ * one-liner and the status panel before they get here.
+ */
+function HowItWorks({ copy }) {
+    return (_jsxs("section", { className: "space-y-4", children: [_jsx(SettingsSubsectionHeader, { title: copy.faq.title }), _jsx("ul", { className: "space-y-2", children: copy.faq.items.map(({ question, answer }) => (_jsx("li", { children: _jsxs(Disclosure, { className: "group/faq bg-popover overflow-hidden", variant: "outline", transition: { duration: 0.18, ease: [0.23, 1, 0.32, 1] }, children: [_jsx(DisclosureTrigger, { children: _jsxs("div", { className: "focus-visible:ring-kortix-base hover:bg-foreground/[0.03] flex w-full cursor-pointer items-center gap-3 px-4 py-3 transition-colors outline-none focus-visible:ring-[0.6px]", children: [_jsx("span", { className: "text-foreground min-w-0 flex-1 text-sm font-medium text-pretty", children: question }), _jsx(ChevronDown, { className: "text-muted-foreground duration-normal size-4 shrink-0 transition-transform ease-out group-data-[state=open]/faq:rotate-180 motion-reduce:transition-none" })] }) }), _jsx(DisclosureContent, { className: "overflow-hidden", contentClassName: "border-border border-t", children: _jsx(DisclosureBody, { className: "px-4 py-3", children: _jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: answer }) }) })] }) }, question))) })] }));
+}
+/** Presentational only — no hooks, no data fetching, no store or Supabase
+ *  read. Kept separate from `SnapshotsTab` so this renders under
+ *  `renderToStaticMarkup` with no `QueryClientProvider` — see
+ *  `SandboxTabView` for the same split. Unlike that view, no slots are
+ *  needed here: every component below takes plain props. */
+export function SnapshotsTabView({ isLoading = false, isError = false, errorMessage = '', onRetry = () => { }, status = null, canManage = false, isFixPending = false, isRetryPending = false, onFix = () => { }, onRetryBuild = () => { }, providerMode = 'automatic', templateBuilds = [], copy: copyOverride, }) {
+    const translatedCopy = useSnapshotMessages();
+    const copy = copyOverride ?? translatedCopy;
+    // Only these two states mean a user is actually affected right now.
+    // Everything else — including a failed build whose image the provider has
+    // since brought up — belongs in the log below, not in a banner. Same
+    // condition as `sandbox-view.tsx`'s own `showStatusBanner`.
+    const showStatusBanner = status?.state === 'blocked' || status?.state === 'degraded';
+    return (_jsx("div", { className: "mx-auto w-full max-w-2xl space-y-8", children: _jsx("div", { className: "space-y-8", children: isLoading ? (_jsx("div", { className: "space-y-2", children: ['snapshot-skeleton-1', 'snapshot-skeleton-2', 'snapshot-skeleton-3'].map((row) => (_jsx(Skeleton, { className: "h-16 rounded-md" }, row))) })) : isError ? (_jsx(ErrorState, { size: "sm", title: copy.view.loadFailed, description: errorMessage, action: _jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: copy.view.retry }) })) : (_jsxs(_Fragment, { children: [showStatusBanner && status ? (_jsx(SandboxStatusBanner, { status: status, canManage: canManage, isFixPending: isFixPending, isRetryPending: isRetryPending, onFix: onFix, onRetry: onRetryBuild })) : status ? (_jsx(EnvironmentSummary, { status: status, copy: copy })) : null, _jsxs("section", { className: "space-y-4", children: [_jsx(SettingsSubsectionHeader, { title: copy.view.logTitle, description: copy.view.logDescription }), templateBuilds.length === 0 ? (_jsx("div", { className: "border-border rounded-md border", children: _jsx(InlinePanelEmpty, { message: copy.view.empty }) })) : (_jsx("ul", { className: "space-y-2", children: templateBuilds.slice(0, 10).map((b) => (_jsx(BuildRow, { build: b, providerMode: providerMode, relevance: describeFailedBuild(b, status) }, b.build_id))) }))] }), _jsx(HowItWorks, { copy: copy })] })) }) }));
+}
+/** Container: owns every hook (project + snapshots queries, sandbox
+ *  recovery mutations) and renders `SnapshotsTabView` with real data. 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 SnapshotsTab({ projectId }) {
+    const t = useTranslations('settings.snapshots');
+    const locale = useLocale();
+    const projectQuery = useQuery({
+        queryKey: qk.project.summary(projectId),
+        queryFn: () => getProject(projectId),
+        ...contract('config'),
+    });
+    const canManage = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_SANDBOX_WRITE).allowed === true;
+    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 builds = Array.isArray(data.builds) ? data.builds : [];
+            return builds.some((b) => b.status === 'building') ? 5_000 : false;
+        },
+    });
+    const { fixWithAgent, retry } = useSandboxRecovery(projectId);
+    const data = snapshotsQuery.data;
+    const builds = Array.isArray(data?.builds) ? data.builds : [];
+    const providerMode = data?.provider_mode === 'pinned' ? 'pinned' : 'automatic';
+    const templateBuilds = builds;
+    const status = data?.status ?? null;
+    return (_jsx(SnapshotsTabView, { isLoading: snapshotsQuery.isLoading, isError: snapshotsQuery.isError, errorMessage: snapshotsQuery.error?.message ?? '', onRetry: () => snapshotsQuery.refetch(), status: status, canManage: canManage, isFixPending: fixWithAgent.isPending, isRetryPending: retry.isPending, onFix: () => fixWithAgent.mutate(), onRetryBuild: () => retry.mutate(status?.current_failure?.template_slug), providerMode: providerMode, templateBuilds: templateBuilds }));
+}
+function useSnapshotMessages() {
+    const t = useTranslations('settings.snapshots');
+    const locale = useLocale();
+    const categories = [
+        'quota',
+        'dockerfile',
+        'layer',
+        'git',
+        'tunnel',
+        'provider',
+        'timeout',
+        'runtime',
+        'unknown',
+    ];
+    const sources = [
+        'session-start',
+        'project-create',
+        'cr-merge',
+        'manual',
+        'background',
+        'startup',
+    ];
+    const categoryLabels = Object.fromEntries(categories.map((key) => [key, t(`categories.${key}.label`)]));
+    const categoryHelp = Object.fromEntries(categories.map((key) => [key, t(`categories.${key}.help`)]));
+    const sourceLabels = Object.fromEntries(sources.map((key) => [key, t(`sources.${key}`)]));
+    const copy = {
+        locale,
+        categoryLabels,
+        categoryHelp,
+        sourceLabels,
+        statusLabels: {
+            ready: t('statuses.ready'),
+            building: t('statuses.building'),
+            failed: t('statuses.failed'),
+        },
+        stale: {
+            superseded: t('stale.superseded'),
+            recovered: t('stale.recovered'),
+            retrying: t('stale.retrying'),
+        },
+        outcomes: {
+            ready: t('outcomes.ready'),
+            building: t('outcomes.building'),
+            blocked: t('outcomes.blocked'),
+            failed: t('outcomes.failed'),
+        },
+        facts: {
+            triggeredBy: t('facts.triggeredBy'),
+            started: t('facts.started'),
+            took: t('facts.took'),
+            stillRunning: t('facts.stillRunning'),
+            runsOn: t('facts.runsOn'),
+            imageId: t('facts.imageId'),
+            unknown: t('facts.unknown'),
+        },
+        duration: {
+            underMinute: t('duration.underMinute'),
+            minutes: (count) => t('duration.minutes', { count }),
+            hours: (count) => t('duration.hours', { count }),
+        },
+        environment: {
+            ready: { title: t('environment.ready.title'), body: t('environment.ready.body') },
+            building: { title: t('environment.building.title'), body: t('environment.building.body') },
+            not_built: { title: t('environment.notBuilt.title'), body: t('environment.notBuilt.body') },
+        },
+        banner: {
+            blockedTitle: t('banner.blockedTitle'),
+            degradedTitle: t('banner.degradedTitle'),
+            blockedBody: t('banner.blockedBody'),
+            degradedBody: (ready, failed) => t('banner.degradedBody', { ready, failed }),
+        },
+        actions: { fix: t('actions.fix'), rebuild: t('actions.rebuild') },
+        faq: {
+            title: t('faq.title'),
+            items: [1, 2, 3].map((item) => ({
+                question: t(`faq.items.${item}.question`),
+                answer: t(`faq.items.${item}.answer`),
+            })),
+        },
+        view: {
+            loadFailed: t('view.loadFailed'),
+            retry: t('view.retry'),
+            logTitle: t('view.logTitle'),
+            logDescription: t('view.logDescription'),
+            empty: t('view.empty'),
+        },
+    };
+    return copy;
+}

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

@@ -0,0 +1,32 @@
+import { type ApiKeyRow } from '../../../access/iam/api-key-rows.js';
+/**
+ * The meta line under a key's name: what it looks like, when it was last used,
+ * and when it stops working. Pure so the wording is testable without a DOM.
+ */
+export interface ApiKeyMetaCopy {
+    neverUsed: string;
+    neverExpires: string;
+    lastUsed: (time: string) => string;
+    expired: (time: string) => string;
+    expires: (time: string) => string;
+    relativeTime: (input: string | number) => string;
+}
+export declare function apiKeyMetaParts(row: ApiKeyRow, now?: number, copy?: ApiKeyMetaCopy): string[];
+export declare function localizedRelativeTime(input: string | number, locale: string, now?: number): string;
+export declare function TokensTab({ accountId }: {
+    accountId: string | undefined;
+}): import("react").JSX.Element;
+export declare function formatShortDate(iso: string, locale: string): string;
+/**
+ * Create, then show the secret once.
+ *
+ * Both halves live in one Modal on purpose: the secret is the only reason a
+ * person opened this, and a dialog that closes and reopens somewhere else is
+ * how a one-time secret gets lost.
+ */
+export declare function CreateApiKeyDialog({ accountId, open, onOpenChange, onCreated, }: {
+    accountId: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onCreated: () => void;
+}): import("react").JSX.Element;