@@ -73,11 +73,11 @@ const SORT_COLUMNS = [
 const TYPE_LABEL: Record<DeletedType, string> = {
   workflow: 'Workflow',
   folder: 'Folder',
-  workspace_folder: 'File Folder',
-  knowledge_folder: 'Knowledge Folder',
-  table_folder: 'Table Folder',
+  workspace_folder: 'File folder',
+  knowledge_folder: 'Knowledge folder',
+  table_folder: 'Table folder',
   table: 'Table',
-  knowledge: 'Knowledge Base',
+  knowledge: 'Knowledge base',
   file: 'File',
 }
 
@@ -161,7 +161,7 @@ export default function RecentlyDeletedSection({ workspaceId }: WorkspaceSetting
   const restoreWorkspaceFile = useRestoreWorkspaceFile()
   const restoreWorkspaceFileFolder = useRestoreWorkspaceFileFolder()
 
-  const items: DeletedResource[] = (deleted.data?.pages ?? []).flatMap((page) =>
+  const fetched: DeletedResource[] = (deleted.data?.pages ?? []).flatMap((page) =>
     page.items.filter(isWorkspaceResource).map((item) => ({
       id: item.id,
       name: item.name,
@@ -170,13 +170,25 @@ export default function RecentlyDeletedSection({ workspaceId }: WorkspaceSetting
     }))
   )
   const normalized = debouncedSearch.toLowerCase()
-  const listed = new Set(items.map((item) => item.id))
-  for (const [id, entry] of restored) {
-    if (listed.has(id)) continue
-    if (!RECENTLY_DELETED_TYPES_BY_FILTER[tab].includes(entry.resource.type)) continue
-    if (normalized && !entry.resource.name.toLowerCase().includes(normalized)) continue
-    items.splice(Math.min(entry.displayIndex, items.length), 0, entry.resource)
-  }
+  const listed = new Set(fetched.map((item) => item.id))
+  /** Restored rows hold their place until the list refetches without them. */
+  const items = [...restored.entries()]
+    .filter(
+      ([id, entry]) =>
+        !listed.has(id) &&
+        RECENTLY_DELETED_TYPES_BY_FILTER[tab].includes(entry.resource.type) &&
+        (!normalized || entry.resource.name.toLowerCase().includes(normalized))
+    )
+    .map(([, entry]) => entry)
+    .sort((left, right) => left.displayIndex - right.displayIndex)
+    .reduce<DeletedResource[]>(
+      (list, entry) => [
+        ...list.slice(0, entry.displayIndex),
+        entry.resource,
+        ...list.slice(entry.displayIndex),
+      ],
+      fetched
+    )
 
   const restore = async (resource: DeletedResource) => {
     const displayIndex = Math.max(
 
@@ -7,9 +7,12 @@ import { SelectField, TextAreaField, TextField } from '@sim/emcn/field'
 import { ConfirmDialog } from '@sim/emcn/modal/confirm-dialog'
 import { MultiSelect } from '@sim/emcn/picker/multi-select'
 import { SettingsRow, SettingsSection } from '@sim/emcn/settings-section'
-import { SaveActions } from '@sim/emcn/settings-section/save-actions'
 import { InlineNotice, StatusTag } from '@sim/emcn/status'
+import { getErrorMessage } from '@sim/utils/errors'
+import { toast } from '@/lib/toast/sink'
+import { SettingsSaveBar } from '@/app/(product)/_components/settings-parts/save-bar'
 import {
+  ActionRow,
   DetailHeader,
   FieldStack,
   FormFieldset,
@@ -19,14 +22,23 @@ import {
 } from '@/app/(product)/_components/settings-parts/settings-parts'
 import {
   CLI_TOOL_OPTIONS,
+  canRetrySandboxBuild,
   DEPENDENCY_PLACEHOLDERS,
+  draftFromSandbox,
+  emptyDraft,
+  extractIssues,
   LANGUAGE_OPTIONS,
   type Sandbox,
   type SandboxCliToolId,
   type SandboxDependencyIssue,
   type SandboxDraft,
   SYSTEM_PACKAGE_PLACEHOLDER,
+  toSubmittedLines,
+  useCreateSandbox,
+  useDeleteSandbox,
+  useUpdateSandbox,
 } from '@/platform/lib/data/sandboxes'
+import { requestSettingsLeave, useSettingsUnsavedGuard } from '@/platform/lib/data/settings-guard'
 import { plural } from '@/platform/shared/plural'
 
 /** One line per rejected row, the first rejection of each line only. */
@@ -44,10 +56,10 @@ const STATUS = {
   pending: { label: 'Queued', intent: 'info' },
 } as const
 
-function contentsSummary(sandbox: Sandbox): string {
-  const dependencies = sandbox.dependencies.length
+/** What a sandbox installs: `3 packages · 1 system package · 2 managed CLIs`. */
+export function contentsSummary(sandbox: Sandbox): string {
   return [
-    `${dependencies} ${dependencies === 1 ? 'dependency' : 'dependencies'}`,
+    plural(sandbox.dependencies.length, 'package'),
     plural(sandbox.systemPackages.length, 'system package'),
     plural(sandbox.cliTools.length, 'managed CLI'),
   ].join(' · ')
@@ -73,8 +85,8 @@ function SandboxStatus({
     return (
       <FieldStack>
         <Muted>
-          Dependencies, system packages, and managed CLI tools install at run time on this
-          deployment, adding startup time per execution. Prebuilt sandboxes require E2B.
+          Packages and managed CLI tools install at run time on this deployment, adding startup time
+          to each run. Prebuilt sandboxes need E2B
         </Muted>
       </FieldStack>
     )
@@ -86,8 +98,8 @@ function SandboxStatus({
     return (
       <FieldStack>
         <Muted>
-          No dependencies, system packages, or managed CLI tools yet. Add one above to build this
-          sandbox; until then it runs on the Function base.
+          Nothing to install yet. Add a package or managed CLI tool above to build this sandbox;
+          until then it runs on the Function base
         </Muted>
       </FieldStack>
     )
@@ -123,53 +135,105 @@ function SandboxStatus({
 }
 
 interface SandboxEditorProps {
-  /** The saved sandbox, absent while creating one. */
+  workspaceId: string
+  /** The saved sandbox, absent while creating one. The list keys the editor by it. */
   sandbox: Sandbox | null
   strategy: 'prebuilt' | 'runtime'
-  draft: SandboxDraft
-  onChange: (draft: SandboxDraft) => void
-  dependencyIssues: SandboxDependencyIssue[]
-  systemPackageIssues: SandboxDependencyIssue[]
   canAdmin: boolean
-  dirty: boolean
-  saving: boolean
-  deleting: boolean
-  retrying: boolean
-  canRetry: boolean
-  onBack: () => void
-  onSave: () => void
-  onDiscard: () => void
-  onRetry: () => void
-  onDelete: () => Promise<void>
+  /** Back to the list, after a save, a delete or the back action. */
+  onClose: () => void
 }
 
-/** A sandbox's packages, managed CLI tools and build, or a new one's form. */
+/**
+ * A sandbox's packages, managed CLI tools and build, or a new one's form. It holds its own draft,
+ * seeded from the sandbox it was keyed by, so opening another sandbox never carries edits over.
+ */
 export function SandboxEditor({
+  workspaceId,
   sandbox,
   strategy,
-  draft,
-  onChange,
-  dependencyIssues,
-  systemPackageIssues,
   canAdmin,
-  dirty,
-  saving,
-  deleting,
-  retrying,
-  canRetry,
-  onBack,
-  onSave,
-  onDiscard,
-  onRetry,
-  onDelete,
+  onClose,
 }: SandboxEditorProps) {
+  const createSandbox = useCreateSandbox()
+  const updateSandbox = useUpdateSandbox()
+  const deleteSandbox = useDeleteSandbox()
+  const [original] = useState(() => (sandbox ? draftFromSandbox(sandbox) : emptyDraft()))
+  const [draft, setDraft] = useState<SandboxDraft>(original)
+  const [dependencyIssues, setDependencyIssues] = useState<SandboxDependencyIssue[]>([])
+  const [systemPackageIssues, setSystemPackageIssues] = useState<SandboxDependencyIssue[]>([])
   const [confirmingDelete, setConfirmingDelete] = useState(false)
+
+  const dirty =
+    draft.name.trim() !== original.name.trim() ||
+    draft.language !== original.language ||
+    draft.dependencies !== original.dependencies ||
+    draft.systemPackages !== original.systemPackages ||
+    draft.cliTools.join(',') !== original.cliTools.join(',')
+  const saving = createSandbox.isPending || updateSandbox.isPending
   const disabled = !canAdmin || saving
+  const canRetry = canRetrySandboxBuild({ canAdmin, isDirty: dirty, saving })
+
+  const discard = () => {
+    setDraft(original)
+    setDependencyIssues([])
+    setSystemPackageIssues([])
+  }
+
+  /** The save bar registers an edit's draft; the create form, which has none, registers here. */
+  useSettingsUnsavedGuard({
+    isDirty: !sandbox && dirty,
+    navigationBlocked: deleteSandbox.isPending || (!sandbox && saving),
+    onDiscard: sandbox ? undefined : discard,
+  })
+
+  async function save() {
+    setDependencyIssues([])
+    setSystemPackageIssues([])
+    const body = {
+      name: draft.name.trim(),
+      language: draft.language,
+      dependencies: toSubmittedLines(draft.dependencies),
+      systemPackages: toSubmittedLines(draft.systemPackages),
+      cliTools: draft.cliTools,
+    }
+    try {
+      if (sandbox) await updateSandbox.mutateAsync({ workspaceId, sandboxId: sandbox.id, ...body })
+      else await createSandbox.mutateAsync({ workspaceId, ...body })
+      onClose()
+    } catch (caught) {
+      const lineIssues = extractIssues(caught)
+      if (lineIssues) {
+        setDependencyIssues(lineIssues.field === 'dependencies' ? lineIssues.issues : [])
+        setSystemPackageIssues(lineIssues.field === 'systemPackages' ? lineIssues.issues : [])
+        return
+      }
+      toast.error(getErrorMessage(caught, 'Failed to save sandbox'))
+    }
+  }
+
+  async function retry() {
+    if (!sandbox || !canRetry) return
+    try {
+      await updateSandbox.mutateAsync({
+        workspaceId,
+        sandboxId: sandbox.id,
+        language: sandbox.language,
+        dependencies: sandbox.dependencies,
+        systemPackages: sandbox.systemPackages,
+        cliTools: sandbox.cliTools,
+      })
+      toast.success('Sandbox build queued')
+    } catch (caught) {
+      toast.error(getErrorMessage(caught, 'Failed to retry sandbox build'))
+    }
+  }
+
   return (
     <SectionStack>
       <DetailHeader
         backLabel='Sandboxes'
-        onBack={onBack}
+        onBack={() => requestSettingsLeave(onClose)}
         title={sandbox ? sandbox.name : 'New sandbox'}
         description='Dependencies, system packages and managed CLI tools your Function blocks can use'
       />
@@ -179,7 +243,7 @@ export function SandboxEditor({
             <TextField
               label='Name'
               value={draft.name}
-              onChange={(name) => onChange({ ...draft, name })}
+              onChange={(name) => setDraft({ ...draft, name })}
               placeholder='bigquery-etl'
               maxLength={64}
               autoComplete='off'
@@ -188,7 +252,7 @@ export function SandboxEditor({
             <SelectField
               label='Language'
               value={draft.language}
-              onValueChange={(language) => onChange({ ...draft, language })}
+              onValueChange={(language) => setDraft({ ...draft, language })}
               options={LANGUAGE_OPTIONS}
               disabled={disabled}
             />
@@ -199,7 +263,7 @@ export function SandboxEditor({
             <TextAreaField
               label='Dependencies'
               value={draft.dependencies}
-              onChange={(dependencies) => onChange({ ...draft, dependencies })}
+              onChange={(dependencies) => setDraft({ ...draft, dependencies })}
               placeholder={DEPENDENCY_PLACEHOLDERS[draft.language]}
               defaultSize='expanded'
               spellCheck={false}
@@ -212,7 +276,7 @@ export function SandboxEditor({
               options={CLI_TOOL_OPTIONS}
               value={draft.cliTools}
               onValueChange={(cliTools) =>
-                onChange({ ...draft, cliTools: cliTools as SandboxCliToolId[] })
+                setDraft({ ...draft, cliTools: cliTools as SandboxCliToolId[] })
               }
               placeholder='Select managed CLI tools'
               searchLabel='Search managed CLI tools'
@@ -221,7 +285,7 @@ export function SandboxEditor({
             <TextAreaField
               label='System packages'
               value={draft.systemPackages}
-              onChange={(systemPackages) => onChange({ ...draft, systemPackages })}
+              onChange={(systemPackages) => setDraft({ ...draft, systemPackages })}
               placeholder={SYSTEM_PACKAGE_PLACEHOLDER}
               defaultSize='expanded'
               spellCheck={false}
@@ -237,29 +301,42 @@ export function SandboxEditor({
           <SandboxStatus
             sandbox={sandbox}
             strategy={strategy}
-            onRetry={canAdmin ? onRetry : undefined}
-            retrying={retrying}
+            onRetry={canAdmin ? () => void retry() : undefined}
+            retrying={updateSandbox.isPending}
             retryDisabled={!canRetry}
           />
         </SettingsSection>
       )}
-      <SaveActions
-        dirty={dirty}
-        saving={saving}
-        blocked={!canAdmin || draft.name.trim().length === 0}
-        onSave={onSave}
-        onDiscard={onDiscard}
-      />
+      {canAdmin &&
+        (sandbox ? (
+          <SettingsSaveBar
+            dirty={dirty}
+            saving={saving}
+            blocked={draft.name.trim().length === 0}
+            onSave={() => void save()}
+            onDiscard={discard}
+          />
+        ) : (
+          <ActionRow>
+            <Button
+              variant='primary'
+              disabled={saving || draft.name.trim().length === 0}
+              onClick={() => void save()}
+            >
+              {saving ? 'Creating…' : 'Create sandbox'}
+            </Button>
+          </ActionRow>
+        ))}
       {sandbox && canAdmin && (
         <SettingsSection title='Manage sandbox'>
           <SettingsRow label='Delete sandbox' description='Remove this sandbox from the workspace'>
             <Button
               variant='quiet'
               destructive
-              disabled={deleting}
+              disabled={deleteSandbox.isPending}
               onClick={() => setConfirmingDelete(true)}
             >
-              {deleting ? 'Deleting…' : 'Delete'}
+              Delete
             </Button>
           </SettingsRow>
         </SettingsSection>
@@ -269,10 +346,13 @@ export function SandboxEditor({
           target={confirmingDelete}
           onClose={() => setConfirmingDelete(false)}
           title='Delete sandbox'
-          description={`This will permanently delete ${sandbox.name} and remove it from any Function blocks that are using it. This action cannot be undone.`}
+          description={`${sandbox.name} is removed from every Function block that uses it. This action cannot be undone.`}
           confirmLabel='Delete'
           pendingLabel='Deleting…'
-          onConfirm={onDelete}
+          onConfirm={async () => {
+            await deleteSandbox.mutateAsync({ workspaceId, sandboxId: sandbox.id })
+            onClose()
+          }}
         />
       )}
     </SectionStack>