fix(web): keep the image-ref conflict indicator from reflowing the form

Move the conflict-checking hint inside the image-ref field as an
absolutely-positioned overlay so a blur→check→clear cycle no longer
shifts the rows below it on the /apps/new wizard.

internal/deployer/deployer.go

@@ -100,20 +100,34 @@ func (d *Deployer) SetPreDeployBackuper(b PreDeployBackuper) {
 	d.backuper = b
 }
 
-// MaybeBackupBeforeDeploy creates a "pre-deploy" Tinyforge DB snapshot when
+// maybeBackupBeforeDeploy takes a "pre-deploy" Tinyforge DB snapshot before a
-// the setting is enabled. Failures are logged but do not abort the deploy:
+// deploy when the operator enabled auto_backup_before_deploy. It is called on
-// missing a backup is preferable to refusing to ship a fix. Exposed so
+// the unified deploy path (DispatchPlugin) so the setting actually fires — its
-// Source plugins can opt into the same behaviour.
+// predecessor was orphaned when the legacy executeDeploy pipeline (its only
-func (d *Deployer) MaybeBackupBeforeDeploy(deployID string, settings store.Settings) {
+// caller) was removed in the workload-first cutover, silently disabling the
-	if !settings.AutoBackupBeforeDeploy || d.backuper == nil {
+// setting.
+//
+// Fail-open: a nil backuper, a settings-load error, or a backup failure all
+// skip the snapshot without blocking the deploy — missing a backup is
+// preferable to refusing to ship a fix.
+func (d *Deployer) maybeBackupBeforeDeploy(workloadID string) {
+	if d.backuper == nil {
+		return
+	}
+	settings, err := d.store.GetSettings()
+	if err != nil {
+		slog.Warn("pre-deploy backup: load settings", "workload", workloadID, "error", err)
+		return
+	}
+	if !settings.AutoBackupBeforeDeploy {
 		return
 	}
 	backup, err := d.backuper.CreateBackup("pre-deploy")
 	if err != nil {
-		slog.Warn("pre-deploy backup failed", "deploy_id", deployID, "error", err)
+		slog.Warn("pre-deploy backup failed", "workload", workloadID, "error", err)
 		return
 	}
-	slog.Info("pre-deploy backup created", "deploy_id", deployID, "backup_id", backup.ID, "filename", backup.Filename)
+	slog.Info("pre-deploy backup created", "workload", workloadID, "backup_id", backup.ID, "filename", backup.Filename)
 }
 
 // SetDNSProvider sets the DNS provider for managing DNS records during deployments.

internal/deployer/dispatch.go

@@ -9,11 +9,10 @@ import (
 )
 
 // DispatchPlugin routes a DeploymentIntent for w to the matching Source
-// plugin. This is the new unified deploy path; the legacy executeDeploy
+// plugin. This is the unified deploy path for every source kind (the legacy
-// remains in place until Phase 6 ports image-deploy logic into
+// executeDeploy pipeline was removed in the workload-first cutover). When the
-// source/image. While both exist, callers must pick: webhook/registry
+// operator enables auto_backup_before_deploy, a pre-deploy Tinyforge DB
-// triggers + image deploys still go through the legacy path, while
+// snapshot is taken here, after the source resolves and before it runs.
-// /api/hooks/generic + the unified webhook ingress go through here.
 func (d *Deployer) DispatchPlugin(ctx context.Context, w plugin.Workload, intent plugin.DeploymentIntent) error {
 	if err := d.beginDispatch(); err != nil {
 		metrics.DeploysTotal.Inc(w.SourceKind, "rejected_draining")
@@ -29,6 +28,11 @@ func (d *Deployer) DispatchPlugin(ctx context.Context, w plugin.Workload, intent
 		metrics.DeploysTotal.Inc("unknown", "unknown_source")
 		return fmt.Errorf("dispatch %s: %w", w.Name, err)
 	}
+	// Optional operator-enabled pre-deploy DB snapshot. Fail-open: never
+	// blocks shipping a deploy. Runs before any source-internal idempotency
+	// check (e.g. the image source's same-tag short-circuit), so a same-tag
+	// redeploy still snapshots — "backup before every deploy attempt".
+	d.maybeBackupBeforeDeploy(w.ID)
 	err = src.Deploy(ctx, d.PluginDeps(), w, intent)
 	outcome := "success"
 	if err != nil {

internal/deployer/dispatch_test.go

@@ -21,9 +21,9 @@ import (
 type fakeSource struct {
 	kind string
 
-	mu          sync.Mutex
+	mu           sync.Mutex
-	deployErr   error
+	deployErr    error
-	teardownErr error
+	teardownErr  error
 	reconcileErr error
 
 	deployCount    atomic.Int32
@@ -34,8 +34,8 @@ type fakeSource struct {
 	lastDeps   plugin.Deps
 }
 
-func (f *fakeSource) Kind() string                 { return f.kind }
+func (f *fakeSource) Kind() string                   { return f.kind }
-func (f *fakeSource) SchemaSample() any            { return struct{}{} }
+func (f *fakeSource) SchemaSample() any              { return struct{}{} }
 func (f *fakeSource) Validate(json.RawMessage) error { return nil }
 
 func (f *fakeSource) Deploy(_ context.Context, deps plugin.Deps, _ plugin.Workload, intent plugin.DeploymentIntent) error {

internal/deployer/predeploy_backup_test.go

@@ -0,0 +1,107 @@
+package deployer
+
+import (
+	"context"
+	"errors"
+	"sync/atomic"
+	"testing"
+
+	"github.com/alexei/tinyforge/internal/store"
+	"github.com/alexei/tinyforge/internal/workload/plugin"
+)
+
+// fakeBackuper records pre-deploy backup calls so the dispatch wiring can be
+// asserted. err (when set) simulates a backup failure.
+type fakeBackuper struct {
+	count    atomic.Int32
+	lastType atomic.Value // string
+	err      error
+}
+
+func (f *fakeBackuper) CreateBackup(backupType string) (store.Backup, error) {
+	f.count.Add(1)
+	f.lastType.Store(backupType)
+	if f.err != nil {
+		return store.Backup{}, f.err
+	}
+	return store.Backup{ID: "b1", Filename: "tinyforge-pre-deploy.db"}, nil
+}
+
+func setAutoBackup(t *testing.T, d *Deployer, enabled bool) {
+	t.Helper()
+	s, err := d.store.GetSettings()
+	if err != nil {
+		t.Fatalf("get settings: %v", err)
+	}
+	s.AutoBackupBeforeDeploy = enabled
+	if err := d.store.UpdateSettings(s); err != nil {
+		t.Fatalf("update settings: %v", err)
+	}
+}
+
+// Regression: the pre-deploy backup hook was orphaned after the cutover (no
+// caller on DispatchPlugin), making auto_backup_before_deploy a silent no-op.
+func TestDispatchPlugin_PreDeployBackup_FiresWhenEnabled(t *testing.T) {
+	resetFake(t)
+	d := newTestDeployer(t)
+	b := &fakeBackuper{}
+	d.SetPreDeployBackuper(b)
+	setAutoBackup(t, d, true)
+
+	if err := d.DispatchPlugin(context.Background(), sampleWorkload(), plugin.DeploymentIntent{}); err != nil {
+		t.Fatalf("dispatch: %v", err)
+	}
+	if got := b.count.Load(); got != 1 {
+		t.Fatalf("CreateBackup called %d times, want 1", got)
+	}
+	if bt, _ := b.lastType.Load().(string); bt != "pre-deploy" {
+		t.Fatalf("backup type = %q, want pre-deploy", bt)
+	}
+	if got := dispatchTestSource.deployCount.Load(); got != 1 {
+		t.Fatalf("Deploy ran %d times, want 1", got)
+	}
+}
+
+func TestDispatchPlugin_PreDeployBackup_SkippedWhenDisabled(t *testing.T) {
+	resetFake(t)
+	d := newTestDeployer(t)
+	b := &fakeBackuper{}
+	d.SetPreDeployBackuper(b)
+	setAutoBackup(t, d, false)
+
+	if err := d.DispatchPlugin(context.Background(), sampleWorkload(), plugin.DeploymentIntent{}); err != nil {
+		t.Fatalf("dispatch: %v", err)
+	}
+	if got := b.count.Load(); got != 0 {
+		t.Fatalf("CreateBackup called %d times, want 0 (setting off)", got)
+	}
+}
+
+func TestDispatchPlugin_PreDeployBackup_NilBackuperNoPanic(t *testing.T) {
+	resetFake(t)
+	d := newTestDeployer(t)
+	setAutoBackup(t, d, true) // enabled, but no backuper wired
+
+	if err := d.DispatchPlugin(context.Background(), sampleWorkload(), plugin.DeploymentIntent{}); err != nil {
+		t.Fatalf("dispatch must not panic/fail with a nil backuper: %v", err)
+	}
+	if got := dispatchTestSource.deployCount.Load(); got != 1 {
+		t.Fatalf("Deploy ran %d times, want 1", got)
+	}
+}
+
+func TestDispatchPlugin_PreDeployBackup_FailOpen(t *testing.T) {
+	resetFake(t)
+	d := newTestDeployer(t)
+	b := &fakeBackuper{err: errors.New("disk full")}
+	d.SetPreDeployBackuper(b)
+	setAutoBackup(t, d, true)
+
+	// A failed backup is logged but must NOT block the deploy.
+	if err := d.DispatchPlugin(context.Background(), sampleWorkload(), plugin.DeploymentIntent{}); err != nil {
+		t.Fatalf("deploy must succeed when backup fails (fail-open): %v", err)
+	}
+	if got := dispatchTestSource.deployCount.Load(); got != 1 {
+		t.Fatalf("Deploy ran %d times, want 1 (despite backup failure)", got)
+	}
+}

web/src/lib/components/workload/ImageSourceForm.svelte

@@ -219,18 +219,34 @@
 			>{$t('apps.new.imageRefLabel')}<span class="req-star" aria-label={$t('apps.new.fieldRequired')}>*</span></span
 		>
 		<div class="input-with-button">
-			<input
+			<div class="input-wrap">
-				id="app-image-ref"
+				<input
-				type="text"
+					id="app-image-ref"
-				class="input mono"
+					type="text"
-				bind:value={form.ref}
+					class="input mono"
-				oninput={onImageRefInput}
+					bind:value={form.ref}
-				onblur={onImageRefBlur}
+					oninput={onImageRefInput}
-				placeholder={$t('apps.new.imageRefPlaceholder')}
+					onblur={onImageRefBlur}
-				autocomplete="off"
+					placeholder={$t('apps.new.imageRefPlaceholder')}
-				spellcheck="false"
+					autocomplete="off"
-				required
+					spellcheck="false"
-			/>
+					required
+				/>
+				<!--
+					Conflict-lookup affordance lives INSIDE the field as an
+					absolutely-positioned overlay, so a blur → check → clear
+					cycle never reflows the rows below it. (The old inline hint
+					sat in normal flow and flashed in/out, shifting the whole
+					form.) A left fade masks ref text behind it; the aria-live
+					region still announces the lookup to assistive tech.
+				-->
+				{#if enableConflicts && conflictLoading}
+					<span class="conflict-checking" role="status" aria-live="polite">
+						<IconLoader size={12} />
+						<span>{$t('apps.new.imageConflictChecking')}</span>
+					</span>
+				{/if}
+			</div>
 			<button
 				type="button"
 				class="discover-btn"
@@ -265,18 +281,6 @@
 		{:else if inspectStatus === 'error'}
 			<span class="discover-pill discover-pill-bad inline">{$t('apps.new.errors.inspectFailed')}</span>
 		{/if}
-		<!--
-			Conflict-checking indicator. Reserves no layout when idle and is a
-			quiet inline hint (not the full panel) while a lookup is in flight,
-			so a no-conflict blur no longer flashes the warning panel in then
-			out. The panel itself renders only for REAL conflicts below.
-		-->
-		{#if enableConflicts && conflictLoading}
-			<span class="conflict-checking" role="status" aria-live="polite">
-				<IconLoader size={12} />
-				<span>{$t('apps.new.imageConflictChecking')}</span>
-			</span>
-		{/if}
 	</label>
 	{#if enableConflicts && conflicts.length > 0}
 		<div class="conflict-panel" role="status" aria-live="polite">
@@ -551,7 +555,18 @@
 		align-items: stretch;
 		gap: 0.4rem;
 	}
-	.input-with-button > .input {
+	.input-with-button > .input-wrap {
+		flex: 1;
+		min-width: 0;
+	}
+	/* Wrapper exists only to anchor the absolute conflict-checking overlay to
+	   the field's box (inputs can't host positioned children themselves). */
+	.input-wrap {
+		position: relative;
+		display: flex;
+		min-width: 0;
+	}
+	.input-wrap > .input {
 		flex: 1;
 		min-width: 0;
 	}
@@ -649,20 +664,32 @@
 		border-radius: var(--radius-sm);
 		line-height: 1;
 	}
-	/* Quiet inline "checking…" hint shown near the image-ref input while a
+	/* Quiet "checking…" affordance shown while a conflict lookup is in flight.
-	   conflict lookup is in flight. Deliberately NOT the full panel, so a
+	   Pinned as an absolute overlay inside the image-ref field's right edge so
-	   no-conflict blur doesn't flash a panel in and out. Self-aligned so it
+	   it sits ENTIRELY out of document flow — toggling it on a blur → check →
-	   sits with the inspect status pills without shifting form layout. */
+	   clear cycle can no longer reflow the form rows beneath it (the old
+	   in-flow hint flashed in/out and shifted the whole form). The left fade
+	   lets a long ref scroll cleanly under the pill instead of hard-cutting,
+	   and pointer-events:none keeps the field fully clickable underneath. */
 	.conflict-checking {
+		position: absolute;
+		top: 50%;
+		right: 0.5rem;
+		transform: translateY(-50%);
 		display: inline-flex;
 		align-items: center;
 		gap: 0.35rem;
-		align-self: flex-start;
+		padding: 0.28rem 0.55rem 0.28rem 1.6rem;
+		border-radius: var(--radius-md);
+		background: linear-gradient(90deg, transparent, var(--surface-input) 1.1rem);
 		font-family: var(--forge-mono);
 		font-size: 0.62rem;
 		font-weight: 600;
 		letter-spacing: 0.06em;
 		color: var(--text-tertiary);
+		white-space: nowrap;
+		pointer-events: none;
+		animation: cc-fade-in 140ms ease-out;
 	}
 	.conflict-checking :global(svg) {
 		animation: spin 0.9s linear infinite;
@@ -672,6 +699,21 @@
 			transform: rotate(360deg);
 		}
 	}
+	@keyframes cc-fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+	/* Respect users who opt out of motion: no spin, no fade. */
+	@media (prefers-reduced-motion: reduce) {
+		.conflict-checking,
+		.conflict-checking :global(svg) {
+			animation: none;
+		}
+	}
 	.conflict-heading {
 		margin: 0;
 		font-size: 0.84rem;