restore reproduces the stack as an internal stack with its secrets

src/routes/api/backup/restore/+server.ts

@@ -21,6 +21,10 @@ export const POST: RequestHandler = async (event) => {
 	const postRestore = ['start', 'recreate', 'redeploy', 'none'].includes(body.postRestore) ? body.postRestore : undefined;
 	// New-location clone: per-volume destinations on the target env.
 	const volumeDestinations = Array.isArray(body.volumeDestinations) ? body.volumeDestinations : undefined;
+	// Stack restore: reproduce the stack's secrets carried in the snapshot (default on).
+	// The client sends false to bring the stack up without them. Only a stack redeploy
+	// consumes this; container restores ignore it.
+	const restoreSecrets = body.restoreSecrets !== false;
 
 	// Authorization gates run BEFORE request validation, so an unauthorized caller
 	// never learns anything about the request shape.
@@ -71,6 +75,7 @@ export const POST: RequestHandler = async (event) => {
 				targetName: body.targetName ?? null,
 				postRestore,
 				volumeDestinations,
+				restoreSecrets,
 			},
 			access,
 			// Stream progress to the client (the restore modal's log). Without this the

src/routes/api/backup/snapshots/[id]/metadata/+server.ts

@@ -28,7 +28,15 @@ export const GET: RequestHandler = async ({ params, url, cookies }) => {
 	try {
 		const metadata = await getSnapshotMetadata(destinationId, snapshotId);
 		if (!metadata) return json({ error: 'No metadata available' }, { status: 404 });
-		return json(metadata);
+		// Never expose the stored secret VALUES (ciphertext) to the client — replace the
+		// `secrets` array with `secretKeys` (names only) so the UI can list them.
+		const { secrets, ...safe } = metadata as Record<string, unknown>;
+		if (Array.isArray(secrets)) {
+			(safe as Record<string, unknown>).secretKeys = secrets
+				.map((s: any) => s?.key)
+				.filter((k: unknown): k is string => typeof k === 'string');
+		}
+		return json(safe);
 	} catch (error) {
 		const msg = error instanceof Error ? error.message : String(error);
 		return json({ error: msg }, { status: 500 });

src/routes/containers/RestoreModal.svelte

@@ -6,7 +6,7 @@
 	import { Checkbox } from '$lib/components/ui/checkbox';
 	import { Label } from '$lib/components/ui/label';
 	import { Badge } from '$lib/components/ui/badge';
-	import { RotateCcw, AlertTriangle, Loader2, HardDrive, Folder, Clock, Play, CheckCircle2, XCircle, Server, PackagePlus, Ban, Rocket, Box, Layers, HelpCircle, Info } from 'lucide-svelte';
+	import { RotateCcw, AlertTriangle, Loader2, HardDrive, Folder, Clock, Play, CheckCircle2, XCircle, Server, PackagePlus, Ban, Rocket, Box, Layers, HelpCircle, Info, KeyRound } from 'lucide-svelte';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { toast } from 'svelte-sonner';
 	import { watchJob } from '$lib/utils/sse-fetch';
@@ -89,6 +89,12 @@
 	// in-place still knows which env holds the live target (otherwise the button stays
 	// disabled and the header shows "on " with no name).
 	let sourceEnvId = $state<number | undefined>(undefined);
+	// Names (never values) of the secrets carried IN this snapshot. The values are
+	// stored encrypted under this instance's key; restoring writes them back into the
+	// target env's DB so the stack comes up complete. Default ON — a restore is meant to
+	// reproduce a working stack. Off = bring it up without secrets (re-enter by hand).
+	let sourceSecretKeys = $state<string[]>([]);
+	let restoreSecrets = $state(true);
 	// Volume names that already exist on the chosen target env (for conflict marks).
 	let existingTargetVolumes = $state<string[]>([]);
 	// Target-NAME collision: a container/stack of the restore's name already exists
@@ -113,6 +119,9 @@
 	// The snapshot's source env (for the "from <env>" phrasing in the summary).
 	const sourceEnv = $derived(envList.find((e) => e.id === sourceEnvId));
 	const sourceEnvName = $derived(sourceEnv?.name ?? '');
+	// Offer the "restore secrets from this backup" toggle whenever this is a stack
+	// snapshot that actually carries secrets — same UI for in-place and cross-env.
+	const showSecretRestore = $derived(targetIsStack && sourceSecretKeys.length > 0);
 	const postRestoreLabel = $derived(postRestoreOptions.find((o) => o.value === postRestore)?.label ?? '');
 	// Step-rail styling: always neutral (primary). Only the What-will-happen box
 	// turns red on the destructive (in-place) path — the rail/numbers stay calm.
@@ -309,6 +318,7 @@
 				// unselected on purpose — the user picks it.
 				if (sourceEnvId == null) sourceEnvId = data.sourceEnvironmentId;
 			}
+			sourceSecretKeys = Array.isArray(data.sourceSecretKeys) ? data.sourceSecretKeys : [];
 		} catch {
 			error = 'Failed to read the snapshot';
 		} finally {
@@ -342,6 +352,10 @@
 					volumes: selectedRows.map((v) => v.name),
 					environmentId: effectiveEnvId,
 					targetName: containerName,
+					// Restore the stack's secrets carried in the snapshot. Only send false
+					// when the toggle is shown and the user turned it off; otherwise the
+					// server default (restore them) applies.
+					restoreSecrets: showSecretRestore ? restoreSecrets : undefined,
 					confirmOverwrite: mode === 'in-place' ? confirmOverwrite : undefined,
 					// postRestore is sent for BOTH modes now (clone brings the target up).
 					postRestore,
@@ -538,6 +552,9 @@
 						</div>
 					{#if volumes.length === 0}
 						<p class="text-sm text-muted-foreground">This snapshot has no volumes — restore recreates the {targetIsStack ? 'stack' : 'container'} from its saved config.</p>
+						{#if showSecretRestore}
+							<div class="rounded border p-2">{@render secretRestoreBlock()}</div>
+						{/if}
 					{:else if mode === 'new-location'}
 						<!-- Clone mode: each selected volume maps to an editable DESTINATION on
 						     the target env. Default is the original location (1:1 clone). -->
@@ -581,6 +598,7 @@
 									{/if}
 								</div>
 							{/each}
+							{@render secretRestoreBlock()}
 						</div>
 					{:else}
 						<div class="space-y-1.5 rounded border p-2">
@@ -597,6 +615,7 @@
 									<span class="truncate font-mono">{vol.name}</span>
 								</label>
 							{/each}
+							{@render secretRestoreBlock()}
 						</div>
 					{/if}
 					</div>
@@ -666,6 +685,42 @@
 				{#snippet envChip(env: { id: number; icon?: string | null } | undefined, name: string)}
 					<span class="inline-flex items-center gap-1 align-middle font-medium text-amber-500">{#if env}<EnvironmentIcon icon={env.icon || 'globe'} envId={env.id} class="h-3.5 w-3.5" />{/if}{name || '…'}</span>
 				{/snippet}
+				<!-- Secrets restored from the snapshot — rendered INSIDE the "what gets
+				     restored" volume box so it reads as one coherent list. Ciphertext is
+				     encrypted under this instance's key; restoring writes it to the target. -->
+				{#snippet secretRestoreBlock()}
+					{#if showSecretRestore}
+						<div class="space-y-2 border-t pt-2 {volumes.length > 0 ? 'mt-1.5' : ''}">
+							<label class="flex cursor-pointer items-start gap-2 text-sm">
+								<Checkbox bind:checked={restoreSecrets} class="mt-0.5" />
+								<KeyRound class="h-4 w-4 shrink-0 translate-y-0.5 text-amber-500" />
+								<span>
+									Restore {sourceSecretKeys.length} secret{sourceSecretKeys.length === 1 ? '' : 's'} from this backup.
+									<span class="block text-xs text-muted-foreground">
+										Turn off to bring the stack up without secrets and set them by hand.
+									</span>
+								</span>
+							</label>
+							<div class="flex flex-wrap gap-1 pl-6">
+								{#each sourceSecretKeys as key}
+									<code class="rounded bg-muted px-1.5 py-0.5 text-xs">{key}</code>
+								{/each}
+							</div>
+							{#if restoreSecrets}
+								<div class="flex items-start gap-1.5 pl-6 text-xs text-amber-600 dark:text-amber-500">
+									<AlertTriangle class="h-3.5 w-3.5 shrink-0 translate-y-0.5" />
+									<span>
+										Secrets are encrypted with this Dockhand instance's key. Restoring on a
+										different instance requires the same encryption key
+										(<code class="rounded bg-muted px-1 py-0.5">.encryption_key</code> /
+										<code class="rounded bg-muted px-1 py-0.5">ENCRYPTION_KEY</code>), or they
+										stay unreadable.
+									</span>
+								</div>
+							{/if}
+						</div>
+					{/if}
+				{/snippet}
 				<div class="mt-3 rounded-md border border-l-[3px] p-3 text-sm {mode === 'in-place' ? 'border-l-destructive bg-destructive/5' : 'border-l-primary bg-primary/5'}">
 					<div class="mb-1.5 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
 						{#if mode === 'in-place'}<AlertTriangle class="h-3.5 w-3.5 text-destructive" />{:else}<Info class="h-3.5 w-3.5 text-primary" />{/if}
@@ -714,6 +769,15 @@
 						{:else}
 							<p class="mt-1.5 leading-relaxed">The {targetIsStack ? 'stack' : 'container'} is <b>not started</b> — the data lands on {@render envChip(targetEnv, targetEnvName)} and you bring it up yourself.</p>
 						{/if}
+						{#if showSecretRestore}
+							<p class="mt-1.5 leading-relaxed">
+								{#if restoreSecrets}
+									Its <b>{sourceSecretKeys.length} secret{sourceSecretKeys.length === 1 ? '' : 's'}</b> will be restored from the backup.
+								{:else}
+									Its <b>{sourceSecretKeys.length} secret{sourceSecretKeys.length === 1 ? '' : 's'}</b> will <b>not</b> be restored — set {sourceSecretKeys.length === 1 ? 'it' : 'them'} by hand afterwards.
+								{/if}
+							</p>
+						{/if}
 						{#if hasRemap}
 							<!-- The recreate/redeploy uses the snapshot's STORED config/compose, which
 							     still references the ORIGINAL mounts — it won't follow a redirected

src/routes/containers/SnapshotBrowser.svelte

@@ -2,13 +2,14 @@
 	import * as Dialog from '$lib/components/ui/dialog';
 	import { Badge } from '$lib/components/ui/badge';
 	import {
-		FolderOpen, Box, Layers, Network, Loader2, HardDrive, Tag, Variable,
-		Plug, HeartPulse, ScrollText, ShieldAlert, Server, Globe, Cpu, FileText
+		FolderOpen, Box, Layers, Network, HardDrive, Tag, Variable,
+		Plug, HeartPulse, ScrollText, ShieldAlert, Server, Globe, Cpu, FileText, KeyRound
 	} from 'lucide-svelte';
+	import { LoadingState } from '$lib/components/ui/loading-state';
 	import MountTypeBadge from '$lib/components/MountTypeBadge.svelte';
 	import { getRepoTypeIcon } from '$lib/utils/backup';
 	import { formatBytes } from '$lib/utils/format';
-	import { formatDateTime } from '$lib/stores/settings';
+	import { formatDateTime, formatRelativeTime } from '$lib/stores/settings';
 	import { environments } from '$lib/stores/environment';
 	import EnvironmentIcon from '$lib/components/EnvironmentIcon.svelte';
 	import FileBrowserPanel from './FileBrowserPanel.svelte';
@@ -102,7 +103,7 @@
 </script>
 
 <Dialog.Root bind:open>
-	<Dialog.Content class="max-w-4xl h-[90vh] sm:h-[80vh] flex flex-col overflow-hidden">
+	<Dialog.Content class="max-w-6xl h-[90vh] sm:h-[85vh] flex flex-col overflow-hidden">
 		<Dialog.Header>
 			<Dialog.Title class="flex items-center gap-2 flex-wrap">
 				<FolderOpen class="w-5 h-5" />
@@ -129,7 +130,7 @@
 			</Dialog.Title>
 			<Dialog.Description class="flex items-center gap-2 text-xs text-muted-foreground">
 				{#if snapshotId}<Badge variant="outline" class="font-mono text-[10px]">{String(snapshotId).slice(0, 8)}</Badge>{/if}
-				{#if snapshotTime}{formatDateTime(snapshotTime)}{/if}
+				{#if snapshotTime}{formatDateTime(snapshotTime)} <span class="opacity-60">({formatRelativeTime(snapshotTime)})</span>{/if}
 			</Dialog.Description>
 		</Dialog.Header>
 
@@ -169,7 +170,7 @@
 		{#if activeTab === 'metadata'}
 			<div class="flex-1 overflow-y-auto py-3">
 				{#if metadataLoading}
-					<div class="flex items-center justify-center py-8"><Loader2 class="w-5 h-5 animate-spin text-muted-foreground" /></div>
+					<LoadingState class="h-full" label="Loading metadata..." />
 				{:else if metadataError}
 					<p class="text-sm text-muted-foreground p-4">{metadataError}</p>
 				{:else if metadata}
@@ -186,14 +187,14 @@
 								<dd>{formatDateTime(metadata.backupTime)}</dd>
 								{#if metadata.environmentId != null}
 									<dt class="text-muted-foreground">Environment ID</dt>
-									<dd class="font-mono text-xs">{metadata.environmentId}</dd>
+									<dd class="font-mono">{metadata.environmentId}</dd>
 								{/if}
 								<dt class="text-muted-foreground">Volumes</dt>
 								<dd>{metadata.volumes?.length ?? 0}</dd>
 								{#if metadata.type === 'stack'}
 									{#if metadata.composeFileName}
 										<dt class="text-muted-foreground">Compose file</dt>
-										<dd class="font-mono text-xs">{metadata.composeFileName}</dd>
+										<dd class="font-mono">{metadata.composeFileName}</dd>
 									{/if}
 									<dt class="text-muted-foreground">Stack files</dt>
 									<dd>{metadata.hasStackFiles ? (metadata.stackFilesTruncated ? 'captured (truncated)' : 'captured') : 'not captured'}</dd>
@@ -248,6 +249,21 @@
 							</section>
 						{/if}
 
+						<!-- Secrets carried in the snapshot (KEY NAMES only — the values are
+						     stored encrypted and never exposed here). Restored to the target
+						     DB on restore unless the user opts out. -->
+						{#if metadata.type === 'stack' && metadata.secretKeys?.length}
+							<section class="space-y-2 border-t pt-4">
+								<h4 class="text-xs font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-1.5"><KeyRound class="w-3.5 h-3.5" />Secrets ({metadata.secretKeys.length})</h4>
+								<div class="flex flex-wrap gap-1">
+									{#each metadata.secretKeys as key}
+										<code class="rounded bg-muted px-1.5 py-0.5 text-xs">{key}</code>
+									{/each}
+								</div>
+								<p class="text-xs text-muted-foreground">Stored encrypted with this instance's key. Restored to the stack on restore (values never shown).</p>
+							</section>
+						{/if}
+
 						<!-- Container config (docker inspect, PascalCase, singular). Only for
 						     container targets — stacks have no metadata.container. -->
 						{#if containerInspect?.Config}
@@ -258,50 +274,50 @@
 								</h4>
 								<dl class="grid grid-cols-[130px_1fr] gap-y-1.5 text-sm">
 									<dt class="text-muted-foreground">Image</dt>
-									<dd class="font-mono text-xs break-all">{containerInspect.Config.Image || '—'}</dd>
+									<dd class="font-mono break-all">{containerInspect.Config.Image || '—'}</dd>
 									{#if containerInspect.Id}
 										<dt class="text-muted-foreground">Container ID</dt>
-										<dd class="font-mono text-xs">{containerInspect.Id.slice(0, 12)}</dd>
+										<dd class="font-mono">{containerInspect.Id.slice(0, 12)}</dd>
 									{/if}
 									{#if containerInspect.State?.Status}
 										<dt class="text-muted-foreground">State at backup</dt>
-										<dd class="text-xs">{containerInspect.State.Status}</dd>
+										<dd>{containerInspect.State.Status}</dd>
 									{/if}
 									{#if containerInspect.Created}
 										<dt class="text-muted-foreground">Created</dt>
-										<dd class="text-xs">{formatDateTime(containerInspect.Created)}</dd>
+										<dd>{formatDateTime(containerInspect.Created)}</dd>
 									{/if}
 									{#if containerInspect.Config.Cmd?.length}
 										<dt class="text-muted-foreground">Command</dt>
-										<dd class="font-mono text-xs break-all">{containerInspect.Config.Cmd.join(' ')}</dd>
+										<dd class="font-mono break-all">{containerInspect.Config.Cmd.join(' ')}</dd>
 									{/if}
 									{#if containerInspect.Config.Entrypoint?.length}
 										<dt class="text-muted-foreground">Entrypoint</dt>
-										<dd class="font-mono text-xs break-all">{containerInspect.Config.Entrypoint.join(' ')}</dd>
+										<dd class="font-mono break-all">{containerInspect.Config.Entrypoint.join(' ')}</dd>
 									{/if}
 									{#if containerInspect.Config.WorkingDir}
 										<dt class="text-muted-foreground">Working dir</dt>
-										<dd class="font-mono text-xs break-all">{containerInspect.Config.WorkingDir}</dd>
+										<dd class="font-mono break-all">{containerInspect.Config.WorkingDir}</dd>
 									{/if}
 									{#if containerInspect.Config.User}
 										<dt class="text-muted-foreground">User</dt>
-										<dd class="font-mono text-xs">{containerInspect.Config.User}</dd>
+										<dd class="font-mono">{containerInspect.Config.User}</dd>
 									{/if}
 									{#if containerInspect.Config.ExposedPorts}
 										<dt class="text-muted-foreground">Exposed ports</dt>
-										<dd class="text-xs break-all">{Object.keys(containerInspect.Config.ExposedPorts).join(', ')}</dd>
+										<dd class="break-all">{Object.keys(containerInspect.Config.ExposedPorts).join(', ')}</dd>
 									{/if}
 									{#if containerInspect.HostConfig?.RestartPolicy?.Name}
 										<dt class="text-muted-foreground">Restart policy</dt>
-										<dd class="text-xs">{containerInspect.HostConfig.RestartPolicy.Name}{containerInspect.HostConfig.RestartPolicy.MaximumRetryCount ? ` (max ${containerInspect.HostConfig.RestartPolicy.MaximumRetryCount})` : ''}</dd>
+										<dd>{containerInspect.HostConfig.RestartPolicy.Name}{containerInspect.HostConfig.RestartPolicy.MaximumRetryCount ? ` (max ${containerInspect.HostConfig.RestartPolicy.MaximumRetryCount})` : ''}</dd>
 									{/if}
 									{#if containerInspect.HostConfig?.NetworkMode}
 										<dt class="text-muted-foreground">Network mode</dt>
-										<dd class="text-xs break-all">{containerInspect.HostConfig.NetworkMode}</dd>
+										<dd class="break-all">{containerInspect.HostConfig.NetworkMode}</dd>
 									{/if}
 									{#if containerInspect.HostConfig?.Privileged}
 										<dt class="text-muted-foreground">Privileged</dt>
-										<dd class="text-xs">yes</dd>
+										<dd>yes</dd>
 									{/if}
 								</dl>
 
@@ -347,15 +363,15 @@
 										<dl class="grid grid-cols-[130px_1fr] gap-y-1 text-sm">
 											{#if containerInspect.HostConfig?.LogConfig?.Type}
 												<dt class="text-muted-foreground flex items-center gap-1.5"><ScrollText class="w-3.5 h-3.5" />Log driver</dt>
-												<dd class="font-mono text-xs">{containerInspect.HostConfig.LogConfig.Type}</dd>
+												<dd class="font-mono">{containerInspect.HostConfig.LogConfig.Type}</dd>
 											{/if}
 											{#if containerInspect.Config?.StopSignal}
 												<dt class="text-muted-foreground">Stop signal</dt>
-												<dd class="font-mono text-xs">{containerInspect.Config.StopSignal}</dd>
+												<dd class="font-mono">{containerInspect.Config.StopSignal}</dd>
 											{/if}
 											{#if containerInspect.Platform}
 												<dt class="text-muted-foreground flex items-center gap-1.5"><Cpu class="w-3.5 h-3.5" />Platform</dt>
-												<dd class="font-mono text-xs">{containerInspect.Platform}</dd>
+												<dd class="font-mono">{containerInspect.Platform}</dd>
 											{/if}
 										</dl>
 									</div>