diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index cdef271424..46a7bb23f7 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -202,6 +202,32 @@
   }
 }
 
+@layer components {
+  [data-settings-dirty="true"] {
+    border-color: color-mix(in oklab, var(--success) 65%, var(--border)) !important;
+  }
+
+  [data-settings-dirty="true"]:not(:focus-visible) {
+    @apply ring-1 ring-success/15;
+  }
+
+  [data-settings-dirty="true"][data-settings-dirty-level="container"] {
+    @apply ring-0;
+    border-color: color-mix(in oklab, var(--success) 45%, var(--border)) !important;
+  }
+
+  [data-slot="card"]:has([data-settings-dirty="true"]),
+  [data-settings-dirty="true"][data-settings-dirty-level="card"] {
+    @apply ring-0;
+    border-color: color-mix(in oklab, var(--success) 35%, var(--border)) !important;
+  }
+
+  [data-workflow-replay-cycle="true"] {
+    @apply ring-1 ring-warning/20;
+    border-color: color-mix(in oklab, var(--warning) 65%, var(--border)) !important;
+  }
+}
+
 /* iOS Safari auto-zooms a focused form control whose computed font-size is
    < 16px (native <select> included). Force 16px on coarse-pointer (touch)
    devices to stop focus-zoom. !important because some controls are styled by
diff --git a/apps/web/app/settings/agents/[agentId]/agent-save-helpers.test.ts b/apps/web/app/settings/agents/[agentId]/agent-save-helpers.test.ts
index a567ceb06e..dacbf67de4 100644
--- a/apps/web/app/settings/agents/[agentId]/agent-save-helpers.test.ts
+++ b/apps/web/app/settings/agents/[agentId]/agent-save-helpers.test.ts
@@ -1,8 +1,32 @@
-import { describe, it, expect } from "vitest";
+import { beforeEach, describe, it, expect, vi } from "vitest";
+import {
+  createAgentAction,
+  createAgentProfileAction,
+  updateAgentProfileAction,
+  updateAgentProfileMcpConfigAction,
+} from "@/app/actions/agents";
 import { agentProfileId as toAgentProfileId, type AgentProfile } from "@/lib/types/http";
-import { isProfileDirty, toAgentProfilePatch, type DraftProfile } from "./agent-save-helpers";
+import {
+  isProfileDirty,
+  mergeSavedAgentDraft,
+  saveExistingAgent,
+  saveNewAgent,
+  toAgentProfilePatch,
+  type SaveAgentCallbacks,
+  type DraftAgent,
+  type DraftProfile,
+} from "./agent-save-helpers";
 import type { ProfileFormData } from "@/components/settings/profile-form-fields";
 
+vi.mock("@/app/actions/agents", () => ({
+  createAgentAction: vi.fn(),
+  createAgentProfileAction: vi.fn(),
+  deleteAgentProfileAction: vi.fn(),
+  updateAgentAction: vi.fn(),
+  updateAgentProfileAction: vi.fn(),
+  updateAgentProfileMcpConfigAction: vi.fn(),
+}));
+
 const baseProfile: AgentProfile = {
   id: toAgentProfileId("p1"),
   agentId: "a1",
@@ -24,6 +48,38 @@ const draftFrom = (saved: AgentProfile, overrides: Partial<DraftProfile> = {}):
 });
 
 const ALLOW_ALL_TOOLS_FLAG = "--allow-all-tools";
+const PERSISTED_PROFILE_ID = toAgentProfileId("persisted-profile");
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+function createTestCallbacks(initialDraft: DraftAgent) {
+  let currentDraft = initialDraft;
+  const upsertAgent = vi.fn();
+  const replaceRoute = vi.fn();
+  const callbacks: SaveAgentCallbacks = {
+    onToastError: vi.fn(),
+    currentAgentModelConfig: {
+      default_model: "mock-fast",
+      available_models: [],
+      supports_dynamic_models: false,
+    },
+    permissionSettings: {},
+    resolveDisplayName: () => "Mock",
+    upsertAgent,
+    setDraftAgent: (value) => {
+      currentDraft = typeof value === "function" ? value(currentDraft) : value;
+    },
+    ensureProfiles: (agent) => agent,
+    cloneAgent: (agent) => ({
+      ...agent,
+      profiles: agent.profiles.map((profile) => ({ ...profile })),
+    }),
+    replaceRoute,
+  };
+  return { callbacks, upsertAgent, replaceRoute, getDraft: () => currentDraft };
+}
 
 describe("toAgentProfilePatch", () => {
   it("maps snake_case form keys to camelCase AgentProfile fields", () => {
@@ -120,3 +176,163 @@ describe("isProfileDirty", () => {
     expect(isProfileDirty(draft, baseProfile)).toBe(false);
   });
 });
+
+describe("mergeSavedAgentDraft", () => {
+  it("remaps created profile IDs while preserving edits made during save", () => {
+    const submittedProfile = draftFrom(baseProfile, {
+      id: toAgentProfileId("draft-profile"),
+      name: "Submitted name",
+    });
+    const submitted = agentWithProfiles([submittedProfile]);
+    const current = {
+      ...submitted,
+      workspace_id: "newer-workspace",
+      profiles: [{ ...submittedProfile, name: "Newer name" }],
+    };
+    const saved = agentWithProfiles([{ ...submittedProfile, id: PERSISTED_PROFILE_ID }]);
+
+    const merged = mergeSavedAgentDraft(
+      current,
+      submitted,
+      saved,
+      new Map([[submittedProfile.id, PERSISTED_PROFILE_ID]]),
+    );
+
+    expect(merged.workspace_id).toBe("newer-workspace");
+    expect(merged.profiles[0].id).toBe(PERSISTED_PROFILE_ID);
+    expect(merged.profiles[0].name).toBe("Newer name");
+  });
+
+  it("keeps existing profiles while remapping a newly created profile", () => {
+    const existing = draftFrom(baseProfile, { id: toAgentProfileId("existing") });
+    const submittedProfile = draftFrom(baseProfile, {
+      id: toAgentProfileId("draft-profile"),
+      name: "Submitted",
+    });
+    const persisted = { ...submittedProfile, id: PERSISTED_PROFILE_ID };
+    const submitted = agentWithProfiles([submittedProfile]);
+    const current = agentWithProfiles([{ ...submittedProfile, name: "Newer" }]);
+    const saved = agentWithProfiles([existing, persisted]);
+
+    const merged = mergeSavedAgentDraft(
+      current,
+      submitted,
+      saved,
+      new Map([[submittedProfile.id, persisted.id]]),
+    );
+
+    expect(merged.profiles.map((profile) => profile.id)).toEqual([existing.id, persisted.id]);
+    expect(merged.profiles[1].name).toBe("Newer");
+  });
+});
+
+describe("saveNewAgent", () => {
+  it("reconciles a created agent so a failed MCP write retries without another create", async () => {
+    const draftProfile = draftFrom(baseProfile, {
+      id: toAgentProfileId("draft-profile"),
+      mcp_config: {
+        enabled: true,
+        servers: '{"mcpServers":{"playwright":{"command":"npx"}}}',
+        dirty: true,
+        error: null,
+      },
+    });
+    const draftAgent = agentWithProfiles([draftProfile]);
+    const created = agentWithProfiles([
+      { ...draftProfile, id: PERSISTED_PROFILE_ID, mcp_config: undefined },
+    ]);
+    const { callbacks, upsertAgent, replaceRoute, getDraft } = createTestCallbacks(draftAgent);
+    const failure = new Error("MCP unavailable");
+    vi.mocked(createAgentAction).mockResolvedValue(created);
+    vi.mocked(updateAgentProfileMcpConfigAction)
+      .mockRejectedValueOnce(failure)
+      .mockResolvedValueOnce({
+        profile_id: PERSISTED_PROFILE_ID,
+        enabled: true,
+        servers: {},
+        meta: {},
+      });
+
+    await expect(saveNewAgent(draftAgent, callbacks)).rejects.toBe(failure);
+
+    const reconciled = upsertAgent.mock.calls[0][0];
+    expect(reconciled.profiles[0]).toMatchObject({
+      id: PERSISTED_PROFILE_ID,
+      mcp_config: { dirty: true },
+    });
+    expect(getDraft().profiles[0]).toMatchObject({
+      id: PERSISTED_PROFILE_ID,
+      mcp_config: { dirty: true },
+    });
+    expect(replaceRoute).toHaveBeenCalledWith("/settings/agents/mock-agent");
+
+    const savedDraft = await saveExistingAgent(getDraft(), reconciled, false, callbacks);
+
+    expect(createAgentAction).toHaveBeenCalledOnce();
+    expect(createAgentProfileAction).not.toHaveBeenCalled();
+    expect(updateAgentProfileMcpConfigAction).toHaveBeenCalledTimes(2);
+    expect(savedDraft.profiles[0].mcp_config).toBeUndefined();
+  });
+});
+
+describe("saveExistingAgent", () => {
+  it("reconciles a created profile so a failed MCP write retries without duplication", async () => {
+    const newProfile = draftFrom(baseProfile, {
+      id: toAgentProfileId("draft-new-profile"),
+      name: "New profile",
+      mcp_config: {
+        enabled: true,
+        servers: '{"mcpServers":{"playwright":{"command":"npx"}}}',
+        dirty: true,
+        error: null,
+      },
+    });
+    const updatedExisting = { ...baseProfile, name: "Updated existing profile" };
+    const savedAgent = agentWithProfiles([baseProfile]);
+    const draftAgent = agentWithProfiles([updatedExisting, newProfile]);
+    const createdProfile = { ...newProfile, id: PERSISTED_PROFILE_ID, mcp_config: undefined };
+    const { callbacks, upsertAgent, getDraft } = createTestCallbacks(draftAgent);
+    const failure = new Error("MCP unavailable");
+    vi.mocked(updateAgentProfileAction).mockResolvedValue(updatedExisting);
+    vi.mocked(createAgentProfileAction).mockResolvedValue(createdProfile);
+    vi.mocked(updateAgentProfileMcpConfigAction)
+      .mockRejectedValueOnce(failure)
+      .mockResolvedValueOnce({
+        profile_id: PERSISTED_PROFILE_ID,
+        enabled: true,
+        servers: {},
+      });
+
+    await expect(saveExistingAgent(draftAgent, savedAgent, false, callbacks)).rejects.toBe(failure);
+
+    const reconciled = upsertAgent.mock.calls[0][0];
+    expect(reconciled.profiles[0].name).toBe("Updated existing profile");
+    expect(reconciled.profiles[1]).toMatchObject({
+      id: PERSISTED_PROFILE_ID,
+      mcp_config: { dirty: true },
+    });
+    expect(getDraft().profiles[0].name).toBe("Updated existing profile");
+    expect(getDraft().profiles[1]).toMatchObject({
+      id: PERSISTED_PROFILE_ID,
+      mcp_config: { dirty: true },
+    });
+
+    const savedDraft = await saveExistingAgent(getDraft(), reconciled, false, callbacks);
+
+    expect(createAgentProfileAction).toHaveBeenCalledOnce();
+    expect(updateAgentProfileAction).toHaveBeenCalledOnce();
+    expect(updateAgentProfileMcpConfigAction).toHaveBeenCalledTimes(2);
+    expect(savedDraft.profiles[1].mcp_config).toBeUndefined();
+  });
+});
+
+function agentWithProfiles(profiles: DraftProfile[]): DraftAgent {
+  return {
+    id: "agent-1",
+    name: "mock-agent",
+    supports_mcp: true,
+    profiles,
+    created_at: "",
+    updated_at: "",
+  };
+}
diff --git a/apps/web/app/settings/agents/[agentId]/agent-save-helpers.ts b/apps/web/app/settings/agents/[agentId]/agent-save-helpers.ts
index 07f8aa3027..a841ff80c7 100644
--- a/apps/web/app/settings/agents/[agentId]/agent-save-helpers.ts
+++ b/apps/web/app/settings/agents/[agentId]/agent-save-helpers.ts
@@ -113,9 +113,26 @@ async function saveMcpForProfile({
     });
   } catch (error) {
     onToastError(error);
+    throw error;
   }
 }
 
+function correlateCreatedProfiles(
+  submitted: DraftProfile[],
+  created: AgentProfile[],
+): Map<string, string> {
+  const mappings = new Map<string, string>();
+  if (submitted.length === created.length) {
+    submitted.forEach((profile, index) => mappings.set(profile.id, created[index].id));
+    return mappings;
+  }
+  for (const profile of submitted) {
+    const match = created.find((candidate) => candidate.name === profile.name);
+    if (match) mappings.set(profile.id, match.id);
+  }
+  return mappings;
+}
+
 async function saveMcpForCreatedProfiles(
   draftAgent: DraftAgent,
   created: Agent,
@@ -142,6 +159,23 @@ async function saveMcpForCreatedProfiles(
   }
 }
 
+function preservePendingMcpDrafts(draftAgent: DraftAgent, created: Agent): Agent {
+  const submittedById = new Map<string, DraftProfile>(
+    draftAgent.profiles.map((profile) => [profile.id, profile]),
+  );
+  const profileIds = correlateCreatedProfiles(draftAgent.profiles, created.profiles);
+  const submittedByCreatedId = new Map(
+    [...profileIds].map(([submittedId, createdId]) => [createdId, submittedById.get(submittedId)]),
+  );
+  return {
+    ...created,
+    profiles: created.profiles.map((profile) => {
+      const pending = submittedByCreatedId.get(profile.id)?.mcp_config;
+      return pending ? { ...profile, mcp_config: pending } : profile;
+    }),
+  };
+}
+
 export type EnsureProfilesFn = (
   agent: DraftAgent,
   displayName: string,
@@ -157,7 +191,7 @@ export type SaveAgentCallbacks = {
   permissionSettings: Record<string, PermissionSetting>;
   resolveDisplayName: (name: string) => string;
   upsertAgent: (agent: Agent) => void;
-  setDraftAgent: (agent: DraftAgent) => void;
+  setDraftAgent: (agent: DraftAgent | ((current: DraftAgent) => DraftAgent)) => void;
   ensureProfiles: EnsureProfilesFn;
   cloneAgent: CloneAgentFn;
   replaceRoute: (path: string) => void;
@@ -179,7 +213,24 @@ export async function saveNewAgent(draftAgent: DraftAgent, callbacks: SaveAgentC
     })),
   });
 
-  await saveMcpForCreatedProfiles(draftAgent, created, callbacks.onToastError);
+  try {
+    await saveMcpForCreatedProfiles(draftAgent, created, callbacks.onToastError);
+  } catch (error) {
+    const reconciled = preservePendingMcpDrafts(draftAgent, created);
+    callbacks.upsertAgent(reconciled);
+    const savedDraft = callbacks.ensureProfiles(
+      callbacks.cloneAgent(reconciled),
+      callbacks.resolveDisplayName(reconciled.name),
+      callbacks.currentAgentModelConfig.default_model,
+      callbacks.permissionSettings,
+    );
+    const profileIds = correlateCreatedProfiles(draftAgent.profiles, reconciled.profiles);
+    callbacks.setDraftAgent((current) =>
+      mergeSavedAgentDraft(current, draftAgent, savedDraft, profileIds),
+    );
+    callbacks.replaceRoute(`/settings/agents/${encodeURIComponent(reconciled.name)}`);
+    throw error;
+  }
 
   if ((draftAgent.mcp_config_path ?? "") !== (created.mcp_config_path ?? "")) {
     created = await updateAgentAction(created.id, {
@@ -187,15 +238,18 @@ export async function saveNewAgent(draftAgent: DraftAgent, callbacks: SaveAgentC
     });
   }
   callbacks.upsertAgent(created);
-  callbacks.setDraftAgent(
-    callbacks.ensureProfiles(
-      callbacks.cloneAgent(created),
-      callbacks.resolveDisplayName(created.name),
-      callbacks.currentAgentModelConfig.default_model,
-      callbacks.permissionSettings,
-    ),
+  const savedDraft = callbacks.ensureProfiles(
+    callbacks.cloneAgent(created),
+    callbacks.resolveDisplayName(created.name),
+    callbacks.currentAgentModelConfig.default_model,
+    callbacks.permissionSettings,
+  );
+  const profileIds = correlateCreatedProfiles(draftAgent.profiles, created.profiles);
+  callbacks.setDraftAgent((current) =>
+    mergeSavedAgentDraft(current, draftAgent, savedDraft, profileIds),
   );
   callbacks.replaceRoute(`/settings/agents/${encodeURIComponent(created.name)}`);
+  return savedDraft;
 }
 
 async function saveExistingAgentPatch(draftAgent: DraftAgent, savedAgent: Agent) {
@@ -211,53 +265,137 @@ async function saveExistingAgentPatch(draftAgent: DraftAgent, savedAgent: Agent)
   }
 }
 
+async function savePersistedProfile(
+  profile: DraftProfile,
+  savedProfile: AgentProfile,
+  onToastError: (error: unknown) => void,
+): Promise<AgentProfile> {
+  await saveMcpForProfile({
+    draftProfile: profile,
+    targetProfileId: savedProfile.id,
+    onToastError,
+  });
+  if (isProfileDirty(profile, savedProfile)) {
+    return updateAgentProfileAction(profile.id, {
+      name: profile.name,
+      model: profile.model,
+      mode: profile.mode,
+      config_options: profile.configOptions ?? {},
+      ...permissionsToProfilePatch(profile),
+      cli_passthrough: profile.cliPassthrough ?? false,
+      cli_flags: profile.cliFlags ?? [],
+      env_vars: profile.envVars ?? [],
+    });
+  }
+  const { mcp_config: _pendingMcp, ...persistedProfile } = savedProfile as DraftProfile;
+  return persistedProfile;
+}
+
 async function saveExistingProfiles(
   draftAgent: DraftAgent,
   savedAgent: Agent,
   isCreateMode: boolean,
   onToastError: (error: unknown) => void,
-): Promise<AgentProfile[]> {
+): Promise<{ profiles: AgentProfile[]; profileIds: Map<string, string> }> {
   const savedProfilesById = new Map(savedAgent.profiles.map((p) => [p.id, p]));
   const nextProfiles: AgentProfile[] = isCreateMode ? [...savedAgent.profiles] : [];
+  const profileIds = new Map<string, string>();
+  const persistedProfiles: DraftProfile[] = [];
+  const persistedSubmittedIds = new Set<string>();
 
-  for (const profile of draftAgent.profiles) {
-    const savedProfile = savedProfilesById.get(profile.id);
-    if (!savedProfile) {
-      const createdProfile = await createAgentProfileAction(savedAgent.id, {
-        name: profile.name,
-        model: profile.model,
-        mode: profile.mode,
-        config_options: profile.configOptions ?? {},
-        ...permissionsToProfilePatch(profile),
-        cli_passthrough: profile.cliPassthrough ?? false,
-        cli_flags: profile.cliFlags ?? [],
-        env_vars: profile.envVars ?? [],
-      });
-      await saveMcpForProfile({
-        draftProfile: profile,
-        targetProfileId: createdProfile.id,
-        onToastError,
-      });
-      nextProfiles.push(createdProfile);
-      continue;
+  try {
+    for (const profile of draftAgent.profiles) {
+      const savedProfile = savedProfilesById.get(profile.id);
+      if (!savedProfile) {
+        const createdProfile = await createAgentProfileAction(savedAgent.id, {
+          name: profile.name,
+          model: profile.model,
+          mode: profile.mode,
+          config_options: profile.configOptions ?? {},
+          ...permissionsToProfilePatch(profile),
+          cli_passthrough: profile.cliPassthrough ?? false,
+          cli_flags: profile.cliFlags ?? [],
+          env_vars: profile.envVars ?? [],
+        });
+        profileIds.set(profile.id, createdProfile.id);
+        persistedSubmittedIds.add(profile.id);
+        persistedProfiles.push(
+          profile.mcp_config
+            ? { ...createdProfile, mcp_config: profile.mcp_config }
+            : createdProfile,
+        );
+        await saveMcpForProfile({
+          draftProfile: profile,
+          targetProfileId: createdProfile.id,
+          onToastError,
+        });
+        persistedProfiles[persistedProfiles.length - 1] = createdProfile;
+        nextProfiles.push(createdProfile);
+        continue;
+      }
+      profileIds.set(profile.id, savedProfile.id);
+      const persistedProfile = await savePersistedProfile(profile, savedProfile, onToastError);
+      persistedSubmittedIds.add(profile.id);
+      persistedProfiles.push(persistedProfile);
+      nextProfiles.push(persistedProfile);
     }
-    if (isProfileDirty(profile, savedProfile)) {
-      const updatedProfile = await updateAgentProfileAction(profile.id, {
-        name: profile.name,
-        model: profile.model,
-        mode: profile.mode,
-        config_options: profile.configOptions ?? {},
-        ...permissionsToProfilePatch(profile),
-        cli_passthrough: profile.cliPassthrough ?? false,
-        cli_flags: profile.cliFlags ?? [],
-        env_vars: profile.envVars ?? [],
-      });
-      nextProfiles.push(updatedProfile);
-      continue;
+  } catch (error) {
+    if (persistedProfiles.length > 0) {
+      throw new PartialProfileSaveError(
+        error,
+        persistedProfiles,
+        persistedSubmittedIds,
+        profileIds,
+      );
     }
-    nextProfiles.push(savedProfile);
+    throw error;
   }
-  return nextProfiles;
+  return { profiles: nextProfiles, profileIds };
+}
+
+class PartialProfileSaveError extends Error {
+  constructor(
+    readonly original: unknown,
+    readonly persistedProfiles: DraftProfile[],
+    readonly persistedSubmittedIds: Set<string>,
+    readonly profileIds: Map<string, string>,
+  ) {
+    super("Profile creation only partially completed");
+  }
+}
+
+function reconcilePartialProfileSave(
+  draftAgent: DraftAgent,
+  savedAgent: Agent,
+  partial: PartialProfileSaveError,
+  callbacks: SaveAgentCallbacks,
+) {
+  const profilesById = new Map(savedAgent.profiles.map((profile) => [profile.id, profile]));
+  for (const profile of partial.persistedProfiles) profilesById.set(profile.id, profile);
+  const reconciled = {
+    ...savedAgent,
+    profiles: [...profilesById.values()],
+  };
+  callbacks.upsertAgent(reconciled);
+  const submitted = {
+    ...draftAgent,
+    profiles: draftAgent.profiles.filter((profile) =>
+      partial.persistedSubmittedIds.has(profile.id),
+    ),
+  };
+  const persistedIds = new Set(partial.persistedProfiles.map((profile) => profile.id));
+  const savedDraft = callbacks.ensureProfiles(
+    {
+      ...callbacks.cloneAgent(reconciled),
+      profiles: reconciled.profiles.filter((profile) => persistedIds.has(profile.id)),
+    },
+    callbacks.resolveDisplayName(reconciled.name),
+    callbacks.currentAgentModelConfig.default_model,
+    callbacks.permissionSettings,
+  );
+  callbacks.setDraftAgent((current) =>
+    mergeSavedAgentDraft(current, submitted, savedDraft, partial.profileIds),
+  );
 }
 
 async function deleteRemovedProfiles(draftAgent: DraftAgent, savedAgent: Agent) {
@@ -277,12 +415,21 @@ export async function saveExistingAgent(
 ) {
   await saveExistingAgentPatch(draftAgent, savedAgent);
 
-  const nextProfiles = await saveExistingProfiles(
-    draftAgent,
-    savedAgent,
-    isCreateMode,
-    callbacks.onToastError,
-  );
+  let savedProfiles: Awaited<ReturnType<typeof saveExistingProfiles>>;
+  try {
+    savedProfiles = await saveExistingProfiles(
+      draftAgent,
+      savedAgent,
+      isCreateMode,
+      callbacks.onToastError,
+    );
+  } catch (error) {
+    if (error instanceof PartialProfileSaveError) {
+      reconcilePartialProfileSave(draftAgent, savedAgent, error, callbacks);
+      throw error.original;
+    }
+    throw error;
+  }
 
   if (!isCreateMode) {
     await deleteRemovedProfiles(draftAgent, savedAgent);
@@ -292,20 +439,46 @@ export async function saveExistingAgent(
     ...savedAgent,
     workspace_id: draftAgent.workspace_id ?? null,
     mcp_config_path: draftAgent.mcp_config_path ?? "",
-    profiles: nextProfiles,
+    profiles: savedProfiles.profiles,
   };
   callbacks.upsertAgent(nextAgent);
-  callbacks.setDraftAgent(
-    callbacks.ensureProfiles(
-      callbacks.cloneAgent(nextAgent),
-      callbacks.resolveDisplayName(nextAgent.name),
-      callbacks.currentAgentModelConfig.default_model,
-      callbacks.permissionSettings,
-    ),
+  const savedDraft = callbacks.ensureProfiles(
+    callbacks.cloneAgent(nextAgent),
+    callbacks.resolveDisplayName(nextAgent.name),
+    callbacks.currentAgentModelConfig.default_model,
+    callbacks.permissionSettings,
+  );
+  callbacks.setDraftAgent((current) =>
+    mergeSavedAgentDraft(current, draftAgent, savedDraft, savedProfiles.profileIds),
   );
   if (isCreateMode) {
     callbacks.replaceRoute(`/settings/agents/${encodeURIComponent(savedAgent.name)}`);
   }
+  return savedDraft;
+}
+
+export function mergeSavedAgentDraft(
+  current: DraftAgent,
+  submitted: DraftAgent,
+  saved: DraftAgent,
+  profileIds: ReadonlyMap<string, string> = new Map(),
+): DraftAgent {
+  const currentById = new Map(current.profiles.map((profile) => [profile.id, profile]));
+  const submittedBySavedId = new Map(
+    submitted.profiles.map((profile) => [profileIds.get(profile.id) ?? profile.id, profile]),
+  );
+  const profiles = saved.profiles.map((savedProfile) => {
+    const submittedProfile = submittedBySavedId.get(savedProfile.id);
+    if (!submittedProfile) return savedProfile;
+    const currentProfile = currentById.get(submittedProfile.id);
+    if (!currentProfile || JSON.stringify(currentProfile) === JSON.stringify(submittedProfile)) {
+      return savedProfile;
+    }
+    return { ...savedProfile, ...currentProfile, id: savedProfile.id };
+  });
+  const submittedIds = new Set(submitted.profiles.map((profile) => profile.id));
+  profiles.push(...current.profiles.filter((profile) => !submittedIds.has(profile.id)));
+  return { ...saved, ...current, id: saved.id, name: saved.name, profiles };
 }
 
 export function isProfileDirty(draft: DraftProfile, saved?: AgentProfile): boolean {
diff --git a/apps/web/app/settings/agents/[agentId]/agent-setup-parts.tsx b/apps/web/app/settings/agents/[agentId]/agent-setup-parts.tsx
index e04eaedb3b..48811b362d 100644
--- a/apps/web/app/settings/agents/[agentId]/agent-setup-parts.tsx
+++ b/apps/web/app/settings/agents/[agentId]/agent-setup-parts.tsx
@@ -13,15 +13,37 @@ import {
   AlertDialogTrigger,
 } from "@kandev/ui/alert-dialog";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
-import { UnsavedChangesBadge, UnsavedSaveButton } from "@/components/settings/unsaved-indicator";
-import { ProfileFormFields } from "@/components/settings/profile-form-fields";
+import { CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { ProfileFormFields, type ProfileFormData } from "@/components/settings/profile-form-fields";
 import { ProfileEnvVarsSection } from "@/components/settings/agent-profile-page";
 import { CustomCLIFlagsCard } from "@/components/settings/cli-flags-field";
 import type { Agent, ModelConfig, PermissionSetting, PassthroughConfig } from "@/lib/types/http";
 import { ProfileMcpConfigCard } from "./profile-mcp-config-card";
 import { profilePermissionValues } from "@/lib/agent-permissions";
-import { toAgentProfilePatch, type DraftProfile, type DraftAgent } from "./agent-save-helpers";
+import {
+  isProfileDirty,
+  toAgentProfilePatch,
+  type DraftProfile,
+  type DraftAgent,
+} from "./agent-save-helpers";
+
+function profileFormData(
+  profile: DraftProfile,
+  permissionSettings: Record<string, PermissionSetting>,
+): ProfileFormData {
+  const permissions = profilePermissionValues(profile, permissionSettings);
+  return {
+    name: profile.name,
+    model: profile.model,
+    mode: profile.mode ?? "",
+    config_options: profile.configOptions ?? {},
+    auto_approve: permissions.auto_approve,
+    allow_indexing: permissions.allow_indexing,
+    cli_passthrough: profile.cliPassthrough ?? false,
+    cli_flags: profile.cliFlags ?? [],
+  };
+}
 
 export type AgentHeaderProps = {
   displayName: string;
@@ -84,6 +106,7 @@ export function AgentHeader({
 
 export type ProfileCardItemProps = {
   profile: DraftProfile;
+  savedProfile?: DraftProfile;
   isNew: boolean;
   draftAgent: DraftAgent;
   currentAgentModelConfig: ModelConfig;
@@ -100,6 +123,7 @@ export type ProfileCardItemProps = {
 
 export function ProfileCardItem({
   profile,
+  savedProfile,
   isNew,
   draftAgent,
   currentAgentModelConfig,
@@ -110,24 +134,21 @@ export function ProfileCardItem({
   onRemoveProfile,
   onToastError,
 }: ProfileCardItemProps) {
-  const permissionValues = profilePermissionValues(profile, permissionSettings);
+  const formProfile = profileFormData(profile, permissionSettings);
+  const baselineProfile = savedProfile
+    ? profileFormData(savedProfile, permissionSettings)
+    : undefined;
+  const dirty =
+    isNew ||
+    !savedProfile ||
+    Boolean(profile.mcp_config?.dirty) ||
+    isProfileDirty(profile, savedProfile);
   return (
-    <Card
-      id={`profile-card-${profile.id}`}
-      className={isNew ? "border-amber-400/70 shadow-sm" : "border-muted"}
-    >
+    <SettingsCard id={`profile-card-${profile.id}`} isDirty={dirty}>
       <CardContent className="pt-6 space-y-4">
         <ProfileFormFields
-          profile={{
-            name: profile.name,
-            model: profile.model,
-            mode: profile.mode ?? "",
-            config_options: profile.configOptions ?? {},
-            auto_approve: permissionValues.auto_approve,
-            allow_indexing: permissionValues.allow_indexing,
-            cli_passthrough: profile.cliPassthrough ?? false,
-            cli_flags: profile.cliFlags ?? [],
-          }}
+          profile={formProfile}
+          baselineProfile={baselineProfile}
           onChange={(patch) => onProfileChange(profile.id, toAgentProfilePatch(patch))}
           modelConfig={currentAgentModelConfig}
           permissionSettings={permissionSettings}
@@ -140,11 +161,13 @@ export function ProfileCardItem({
         />
         <CustomCLIFlagsCard
           flags={profile.cliFlags ?? []}
+          baselineFlags={savedProfile?.cliFlags}
           onChange={(next) => onProfileChange(profile.id, { cliFlags: next })}
           permissionSettings={permissionSettings}
         />
         <ProfileEnvVarsSection
           envVars={profile.envVars}
+          baselineEnvVars={savedProfile?.envVars}
           onChange={(patch) => onProfileChange(profile.id, patch)}
         />
         <ProfileMcpConfigCard
@@ -152,12 +175,12 @@ export function ProfileCardItem({
           supportsMcp={draftAgent.supports_mcp}
           cliPassthrough={profile.cliPassthrough ?? false}
           mcpInjection={passthroughConfig?.mcp_injection}
-          draftState={profile.id.startsWith("draft-") ? profile.mcp_config : undefined}
+          draftState={profile.mcp_config}
           onDraftStateChange={(patch) => onProfileMcpChange(profile.id, patch)}
           onToastError={onToastError}
         />
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
@@ -166,12 +189,11 @@ export type ProfilesCardProps = {
   isCreateMode: boolean;
   isAgentDirty: boolean;
   draftAgent: DraftAgent;
+  savedAgent: Agent | null;
   newProfileId: string | null;
   currentAgentModelConfig: ModelConfig;
   permissionSettings: Record<string, PermissionSetting>;
   passthroughConfig: PassthroughConfig | null;
-  saveStatus: "idle" | "loading" | "success" | "error";
-  hasInvalidMcpConfig: boolean;
   onAddProfile: () => void;
   onProfileChange: (profileId: string, patch: Partial<DraftProfile>) => void;
   onProfileMcpChange: (
@@ -180,7 +202,6 @@ export type ProfilesCardProps = {
   ) => void;
   onRemoveProfile: (profileId: string) => void;
   onToastError: (error: unknown) => void;
-  onSave: () => void;
 };
 
 export function ProfilesCard({
@@ -188,28 +209,23 @@ export function ProfilesCard({
   isCreateMode,
   isAgentDirty,
   draftAgent,
+  savedAgent,
   newProfileId,
   currentAgentModelConfig,
   permissionSettings,
   passthroughConfig,
-  saveStatus,
-  hasInvalidMcpConfig,
   onAddProfile,
   onProfileChange,
   onProfileMcpChange,
   onRemoveProfile,
   onToastError,
-  onSave,
 }: ProfilesCardProps) {
   return (
-    <Card>
+    <SettingsCard isDirty={isAgentDirty}>
       <CardHeader className="flex flex-row items-center justify-between">
-        <div className="flex items-center gap-2">
-          <CardTitle>
-            {isCreateMode ? `Create ${displayName} Profile` : `${displayName} Profiles`}
-          </CardTitle>
-          {isAgentDirty && <UnsavedChangesBadge />}
-        </div>
+        <CardTitle>
+          {isCreateMode ? `Create ${displayName} Profile` : `${displayName} Profiles`}
+        </CardTitle>
         <Button size="sm" variant="outline" onClick={onAddProfile} className="cursor-pointer">
           <IconPlus className="h-4 w-4 mr-2" />
           Add profile
@@ -220,6 +236,7 @@ export function ProfilesCard({
           <ProfileCardItem
             key={profile.id}
             profile={profile}
+            savedProfile={savedAgent?.profiles.find((saved) => saved.id === profile.id)}
             isNew={profile.id === newProfileId}
             draftAgent={draftAgent}
             currentAgentModelConfig={currentAgentModelConfig}
@@ -232,15 +249,6 @@ export function ProfilesCard({
           />
         ))}
       </CardContent>
-      <div className="flex justify-end px-6 pb-6">
-        <UnsavedSaveButton
-          isDirty={isAgentDirty}
-          isLoading={saveStatus === "loading"}
-          status={saveStatus}
-          onClick={onSave}
-          disabled={hasInvalidMcpConfig}
-        />
-      </div>
-    </Card>
+    </SettingsCard>
   );
 }
diff --git a/apps/web/app/settings/agents/[agentId]/page.tsx b/apps/web/app/settings/agents/[agentId]/page.tsx
index 6465259eb4..7768b940ac 100644
--- a/apps/web/app/settings/agents/[agentId]/page.tsx
+++ b/apps/web/app/settings/agents/[agentId]/page.tsx
@@ -7,6 +7,7 @@ import { Button } from "@kandev/ui/button";
 import { Card, CardContent } from "@kandev/ui/card";
 import { Separator } from "@kandev/ui/separator";
 import { useToast } from "@/components/toast-provider";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
 import type {
   Agent,
   AgentDiscovery,
@@ -86,7 +87,7 @@ function useAgentFormState(
   availableAgents: AvailableAgent[],
 ) {
   const [draftAgent, setDraftAgent] = useState<DraftAgent>(initialAgent);
-  const [saveStatus, setSaveStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
+  const [_saveStatus, setSaveStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
 
   const resolveDisplayName = (name: string) =>
     availableAgents.find((item: AvailableAgent) => item.name === name)?.display_name ?? "";
@@ -125,6 +126,7 @@ function useAgentFormState(
     if (draftAgent.profiles.length !== savedAgent.profiles.length) return true;
     const savedProfiles = new Map(savedAgent.profiles.map((p) => [p.id, p]));
     for (const profile of draftAgent.profiles) {
+      if (profile.mcp_config?.dirty) return true;
       if (!savedProfiles.has(profile.id) || isProfileDirty(profile, savedProfiles.get(profile.id)))
         return true;
     }
@@ -134,7 +136,6 @@ function useAgentFormState(
   return {
     draftAgent,
     setDraftAgent,
-    saveStatus,
     setSaveStatus,
     resolveDisplayName,
     currentAgentModelConfig,
@@ -185,7 +186,7 @@ type AgentSaveHandlersProps = {
   currentAgentModelConfig: ModelConfig;
   permissionSettings: Record<string, PermissionSetting>;
   resolveDisplayName: (name: string) => string;
-  setDraftAgent: (agent: DraftAgent) => void;
+  setDraftAgent: (agent: DraftAgent | ((current: DraftAgent) => DraftAgent)) => void;
   setSaveStatus: (status: "idle" | "loading" | "success" | "error") => void;
   upsertAgent: (agent: Agent) => void;
   onToastError: (error: unknown) => void;
@@ -232,15 +233,18 @@ function useAgentSaveHandlers({
       replaceRoute,
     };
     try {
+      let savedDraft: DraftAgent;
       if (!savedAgent) {
-        await saveNewAgent(draftAgent, callbacks);
+        savedDraft = await saveNewAgent(draftAgent, callbacks);
       } else {
-        await saveExistingAgent(draftAgent, savedAgent, isCreateMode, callbacks);
+        savedDraft = await saveExistingAgent(draftAgent, savedAgent, isCreateMode, callbacks);
       }
       setSaveStatus("success");
+      return savedDraft;
     } catch (error) {
       setSaveStatus("error");
       onToastError(error);
+      throw error;
     }
   };
 
@@ -345,6 +349,17 @@ function useProfileHandlers(
   };
 }
 
+function areAgentProfilesValid(agent: DraftAgent): boolean {
+  return agent.profiles.every((profile) => profile.name.trim() && profile.model.trim());
+}
+
+function useAgentSaveRevision(agent: DraftAgent) {
+  const revision = JSON.stringify(agent);
+  const initial = agent.profiles.some((profile) => profile.mcp_config?.dirty) ? "" : revision;
+  const [saved, setSaved] = useState(initial);
+  return { revision, saved, setSaved };
+}
+
 function AgentSetupForm({
   initialAgent,
   savedAgent,
@@ -359,7 +374,6 @@ function AgentSetupForm({
   const {
     draftAgent,
     setDraftAgent,
-    saveStatus,
     setSaveStatus,
     resolveDisplayName,
     currentAgentModelConfig,
@@ -396,6 +410,24 @@ function AgentSetupForm({
     onToastError,
     replaceRoute: (path: string) => router.replace(path),
   });
+  const saveRevision = useAgentSaveRevision(draftAgent);
+  const handleCoordinatedSave = async () => {
+    const savedDraft = await handleSave();
+    if (savedDraft) saveRevision.setSaved(JSON.stringify(savedDraft));
+  };
+  const profilesValid = areAgentProfilesValid(draftAgent);
+  let saveInvalidReason: string | undefined;
+  if (!profilesValid) saveInvalidReason = "Every profile needs a name and model.";
+  else if (hasInvalidMcpConfig) saveInvalidReason = "Fix invalid MCP configuration before saving.";
+  useSettingsSaveContributor({
+    id: `agent:${draftAgent.id}`,
+    revision: saveRevision.revision,
+    isDirty: isCreateMode ? isAgentDirty : saveRevision.revision !== saveRevision.saved,
+    canSave: profilesValid && !hasInvalidMcpConfig,
+    invalidReason: saveInvalidReason,
+    save: handleCoordinatedSave,
+    discard: () => undefined,
+  });
 
   const displayName = draftAgent.profiles[0]?.agentDisplayName ?? draftAgent.name;
 
@@ -414,18 +446,16 @@ function AgentSetupForm({
         isCreateMode={isCreateMode}
         isAgentDirty={isAgentDirty}
         draftAgent={draftAgent}
+        savedAgent={savedAgent}
         newProfileId={newProfileId}
         currentAgentModelConfig={currentAgentModelConfig}
         permissionSettings={permissionSettings}
         passthroughConfig={passthroughConfig}
-        saveStatus={saveStatus}
-        hasInvalidMcpConfig={hasInvalidMcpConfig}
         onAddProfile={handleAddProfile}
         onProfileChange={handleProfileChange}
         onProfileMcpChange={handleProfileMcpChange}
         onRemoveProfile={handleRemoveProfile}
         onToastError={onToastError}
-        onSave={handleSave}
       />
     </div>
   );
diff --git a/apps/web/app/settings/agents/[agentId]/profile-mcp-config-card.test.tsx b/apps/web/app/settings/agents/[agentId]/profile-mcp-config-card.test.tsx
new file mode 100644
index 0000000000..90a3f8747e
--- /dev/null
+++ b/apps/web/app/settings/agents/[agentId]/profile-mcp-config-card.test.tsx
@@ -0,0 +1,45 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@kandev/ui/tooltip";
+import { SettingsSaveProvider } from "@/components/settings/settings-save-provider";
+import { ProfileMcpConfigCard } from "./profile-mcp-config-card";
+
+const DIRTY_ATTRIBUTE = "data-settings-dirty";
+
+afterEach(cleanup);
+
+describe("ProfileMcpConfigCard dirty fields", () => {
+  it("marks only the changed MCP control and its owning card dirty", () => {
+    render(
+      <SettingsSaveProvider>
+        <TooltipProvider>
+          <ProfileMcpConfigCard
+            profileId="profile-1"
+            supportsMcp
+            initialConfig={{ profile_id: "profile-1", enabled: false, servers: {} }}
+            onToastError={vi.fn()}
+          />
+        </TooltipProvider>
+      </SettingsSaveProvider>,
+    );
+
+    const enabled = screen.getByTestId("mcp-enabled");
+    const servers = screen.getByTestId("mcp-servers-profile-1");
+    const card = enabled.closest('[data-settings-dirty-level="card"]');
+
+    fireEvent.click(enabled);
+    expect(enabled.getAttribute(DIRTY_ATTRIBUTE)).toBe("true");
+    expect(servers.getAttribute(DIRTY_ATTRIBUTE)).toBe("false");
+    expect(card?.getAttribute(DIRTY_ATTRIBUTE)).toBe("true");
+
+    fireEvent.click(enabled);
+    expect(card?.getAttribute(DIRTY_ATTRIBUTE)).toBe("false");
+
+    fireEvent.change(servers, {
+      target: { value: '{"mcpServers":{"github":{"command":"npx"}}}' },
+    });
+    expect(enabled.getAttribute(DIRTY_ATTRIBUTE)).toBe("false");
+    expect(servers.getAttribute(DIRTY_ATTRIBUTE)).toBe("true");
+    expect(card?.getAttribute(DIRTY_ATTRIBUTE)).toBe("true");
+  });
+});
diff --git a/apps/web/app/settings/agents/[agentId]/profile-mcp-config-card.tsx b/apps/web/app/settings/agents/[agentId]/profile-mcp-config-card.tsx
index 4d7cf4326e..c0e8f18db4 100644
--- a/apps/web/app/settings/agents/[agentId]/profile-mcp-config-card.tsx
+++ b/apps/web/app/settings/agents/[agentId]/profile-mcp-config-card.tsx
@@ -1,11 +1,12 @@
 "use client";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
+import { CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
 import { Label } from "@kandev/ui/label";
 import { Switch } from "@kandev/ui/switch";
 import { Textarea } from "@kandev/ui/textarea";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@kandev/ui/tooltip";
-import { UnsavedChangesBadge, UnsavedSaveButton } from "@/components/settings/unsaved-indicator";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { useProfileMcpConfig } from "./use-profile-mcp-config";
 import type { AgentProfileMcpConfig } from "@/lib/types/http";
 
@@ -161,6 +162,7 @@ type McpServersEditorProps = {
   profileId: string;
   currentServers: string;
   currentError: string | null;
+  isDirty: boolean;
   isDraft: boolean;
   isEditableProfile: boolean;
   cliPassthrough?: boolean;
@@ -173,6 +175,7 @@ function McpServersEditor({
   profileId,
   currentServers,
   currentError,
+  isDirty,
   isDraft,
   isEditableProfile,
   cliPassthrough,
@@ -211,6 +214,8 @@ function McpServersEditor({
           handleMcpServersChange(event.target.value);
         }}
         disabled={!isEditableProfile && !isDraft}
+        data-settings-dirty={isDirty}
+        data-testid={`mcp-servers-${profileId}`}
       />
       <p className="text-xs text-muted-foreground">
         MCP definitions are stored in the database and resolved per executor at runtime. This does
@@ -262,6 +267,8 @@ type McpConfigState = {
   currentServers: string;
   currentError: string | null;
   currentDirty: boolean;
+  enabledDirty: boolean;
+  serversDirty: boolean;
 };
 
 type ResolveMcpConfigInput = {
@@ -269,26 +276,36 @@ type ResolveMcpConfigInput = {
   profileId: string;
   mcpEnabled: boolean;
   mcpServers: string;
+  mcpBaselineEnabled: boolean;
+  mcpBaselineServers: string;
   mcpError: string | null;
-  mcpDirty: boolean;
 };
 
 function resolveMcpConfigState(input: ResolveMcpConfigInput): McpConfigState {
   const isDraft = Boolean(input.draftState);
   const isEditableProfile =
     !isDraft && Boolean(input.profileId) && !input.profileId.startsWith("draft-");
+  const baselineEnabled = isDraft ? false : input.mcpBaselineEnabled;
+  const baselineServers = isDraft ? '{\n  "mcpServers": {}\n}' : input.mcpBaselineServers;
+  const currentEnabled = isDraft ? (input.draftState?.enabled ?? false) : input.mcpEnabled;
+  const currentServers = isDraft ? (input.draftState?.servers ?? "") : input.mcpServers;
+  const enabledDirty = currentEnabled !== baselineEnabled;
+  const serversDirty = currentServers !== baselineServers;
   return {
     isDraft,
     isEditableProfile,
-    currentEnabled: isDraft ? (input.draftState?.enabled ?? false) : input.mcpEnabled,
-    currentServers: isDraft ? (input.draftState?.servers ?? "") : input.mcpServers,
+    currentEnabled,
+    currentServers,
     currentError: isDraft ? (input.draftState?.error ?? null) : input.mcpError,
-    currentDirty: isDraft ? (input.draftState?.dirty ?? false) : input.mcpDirty,
+    currentDirty: enabledDirty || serversDirty,
+    enabledDirty,
+    serversDirty,
   };
 }
 
 type McpEnableToggleProps = {
   currentEnabled: boolean;
+  isDirty: boolean;
   isDraft: boolean;
   isEditableProfile: boolean;
   onDraftStateChange?: (next: { enabled?: boolean; dirty?: boolean }) => void;
@@ -297,13 +314,19 @@ type McpEnableToggleProps = {
 
 function McpEnableToggle({
   currentEnabled,
+  isDirty,
   isDraft,
   isEditableProfile,
   onDraftStateChange,
   setMcpEnabled,
 }: McpEnableToggleProps) {
   return (
-    <div className="flex items-center justify-between rounded-md border p-3">
+    <div
+      className="flex items-center justify-between rounded-md border p-3"
+      data-settings-dirty={isDirty}
+      data-settings-dirty-level="container"
+      data-testid="mcp-enabled-row"
+    >
       <div className="space-y-1">
         <Label>Enable MCP</Label>
         <p className="text-xs text-muted-foreground">
@@ -312,6 +335,8 @@ function McpEnableToggle({
       </div>
       <Switch
         checked={currentEnabled}
+        data-settings-dirty={isDirty}
+        data-testid="mcp-enabled"
         onCheckedChange={(checked) => {
           if (isDraft) {
             onDraftStateChange?.({ enabled: checked, dirty: true });
@@ -355,37 +380,49 @@ export function ProfileMcpConfigCard({
   const {
     mcpEnabled,
     mcpServers,
+    mcpBaselineEnabled,
+    mcpBaselineServers,
     mcpError,
-    mcpDirty,
-    mcpStatus,
     setMcpEnabled,
     handleMcpServersChange,
     handleSaveMcp,
+    resetMcpDraft,
   } = useProfileMcpConfig({ profileId, supportsMcp, initialConfig, onToastError });
 
-  if (!supportsMcp) return null;
-
   const state = resolveMcpConfigState({
     draftState,
     profileId,
     mcpEnabled,
     mcpServers,
+    mcpBaselineEnabled,
+    mcpBaselineServers,
     mcpError,
-    mcpDirty,
+  });
+  useSettingsSaveContributor({
+    id: `agent-profile-mcp:${profileId}`,
+    revision: JSON.stringify({
+      enabled: state.currentEnabled,
+      servers: state.currentServers,
+    }),
+    isDirty: supportsMcp && state.isEditableProfile && state.currentDirty,
+    canSave: !state.currentError,
+    invalidReason: state.currentError ?? undefined,
+    save: handleSaveMcp,
+    discard: resetMcpDraft,
   });
 
+  if (!supportsMcp) return null;
+
   return (
-    <Card>
-      <CardHeader className="flex flex-row items-center justify-between">
-        <div className="flex items-center gap-2">
-          <CardTitle>MCP Configuration</CardTitle>
-          {state.currentDirty && <UnsavedChangesBadge />}
-        </div>
+    <SettingsCard isDirty={state.currentDirty}>
+      <CardHeader>
+        <CardTitle>MCP Configuration</CardTitle>
       </CardHeader>
       <CardContent className="space-y-4">
         <McpProfileHint isDraft={state.isDraft} isEditableProfile={state.isEditableProfile} />
         <McpEnableToggle
           currentEnabled={state.currentEnabled}
+          isDirty={state.enabledDirty}
           isDraft={state.isDraft}
           isEditableProfile={state.isEditableProfile}
           onDraftStateChange={onDraftStateChange}
@@ -395,6 +432,7 @@ export function ProfileMcpConfigCard({
           profileId={profileId}
           currentServers={state.currentServers}
           currentError={state.currentError}
+          isDirty={state.serversDirty}
           isDraft={state.isDraft}
           isEditableProfile={state.isEditableProfile}
           cliPassthrough={cliPassthrough}
@@ -403,16 +441,6 @@ export function ProfileMcpConfigCard({
           handleMcpServersChange={handleMcpServersChange}
         />
       </CardContent>
-      <div className="flex justify-end px-6 pb-6">
-        {state.isEditableProfile ? (
-          <UnsavedSaveButton
-            isDirty={state.currentDirty}
-            isLoading={mcpStatus === "loading"}
-            status={mcpStatus}
-            onClick={handleSaveMcp}
-          />
-        ) : null}
-      </div>
-    </Card>
+    </SettingsCard>
   );
 }
diff --git a/apps/web/app/settings/agents/[agentId]/use-profile-mcp-config.test.ts b/apps/web/app/settings/agents/[agentId]/use-profile-mcp-config.test.ts
new file mode 100644
index 0000000000..83fb150e4e
--- /dev/null
+++ b/apps/web/app/settings/agents/[agentId]/use-profile-mcp-config.test.ts
@@ -0,0 +1,53 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { updateAgentProfileMcpConfigAction } from "@/app/actions/agents";
+import type { AgentProfileMcpConfig } from "@/lib/types/http";
+import { useProfileMcpConfig } from "./use-profile-mcp-config";
+
+vi.mock("@/app/actions/agents", () => ({
+  getAgentProfileMcpConfigAction: vi.fn(),
+  updateAgentProfileMcpConfigAction: vi.fn(),
+}));
+
+describe("useProfileMcpConfig", () => {
+  it("preserves an MCP edit made while save is in flight", async () => {
+    let finishSave: (config: AgentProfileMcpConfig) => void = () => undefined;
+    vi.mocked(updateAgentProfileMcpConfigAction).mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          finishSave = resolve;
+        }),
+    );
+    const initial = config({ command: "initial" });
+    const { result } = renderHook(() =>
+      useProfileMcpConfig({
+        profileId: "profile-1",
+        supportsMcp: true,
+        initialConfig: initial,
+        onToastError: vi.fn(),
+      }),
+    );
+
+    act(() => result.current.handleMcpServersChange(serverText("submitted")));
+    let savePromise!: Promise<void>;
+    act(() => {
+      savePromise = result.current.handleSaveMcp();
+    });
+    act(() => result.current.handleMcpServersChange(serverText("newer")));
+    await act(async () => {
+      finishSave(config({ command: "submitted" }));
+      await savePromise;
+    });
+
+    expect(result.current.mcpServers).toContain("newer");
+    expect(result.current.mcpDirty).toBe(true);
+  });
+});
+
+function config(server: Record<string, unknown>): AgentProfileMcpConfig {
+  return { profile_id: "profile-1", enabled: true, servers: { test: server } };
+}
+
+function serverText(command: string): string {
+  return JSON.stringify({ mcpServers: { test: { command } } });
+}
diff --git a/apps/web/app/settings/agents/[agentId]/use-profile-mcp-config.ts b/apps/web/app/settings/agents/[agentId]/use-profile-mcp-config.ts
index 2c9f7caa89..755dea8dce 100644
--- a/apps/web/app/settings/agents/[agentId]/use-profile-mcp-config.ts
+++ b/apps/web/app/settings/agents/[agentId]/use-profile-mcp-config.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   getAgentProfileMcpConfigAction,
   updateAgentProfileMcpConfigAction,
@@ -19,15 +19,28 @@ type UseProfileMcpConfigParams = {
 type UseProfileMcpConfigResult = {
   mcpEnabled: boolean;
   mcpServers: string;
+  mcpBaselineEnabled: boolean;
+  mcpBaselineServers: string;
   mcpError: string | null;
   mcpDirty: boolean;
   mcpStatus: McpStatus;
   setMcpEnabled: (enabled: boolean) => void;
   handleMcpServersChange: (value: string) => void;
   handleSaveMcp: () => Promise<void>;
+  resetMcpDraft: () => void;
 };
 
 const EMPTY_EXAMPLE = '{\n  "mcpServers": {}\n}';
+const isEmptyExample = (value: string) => value.trim() === EMPTY_EXAMPLE.trim();
+
+type McpStateSetters = {
+  setMcpConfig: (value: AgentProfileMcpConfig | null) => void;
+  setMcpEnabledState: (value: boolean) => void;
+  setMcpServers: (value: string) => void;
+  setMcpDirty: (value: boolean) => void;
+  setMcpError: (value: string | null) => void;
+  setMcpStatus: (value: McpStatus) => void;
+};
 
 function serializeServers(config: AgentProfileMcpConfig | null): string {
   if (!config?.servers || Object.keys(config.servers).length === 0) {
@@ -53,14 +66,7 @@ function normalizeServers(value: unknown): Record<string, McpServerDef> {
 function useResetOnUnsupported(
   supportsMcp: boolean,
   isEditableProfile: boolean,
-  setters: {
-    setMcpConfig: (v: AgentProfileMcpConfig | null) => void;
-    setMcpEnabledState: (v: boolean) => void;
-    setMcpServers: (v: string) => void;
-    setMcpDirty: (v: boolean) => void;
-    setMcpError: (v: string | null) => void;
-    setMcpStatus: (v: McpStatus) => void;
-  },
+  setters: McpStateSetters,
 ) {
   useEffect(() => {
     if (supportsMcp && isEditableProfile) return;
@@ -86,14 +92,7 @@ function useFetchConfig(
   supportsMcp: boolean,
   isEditableProfile: boolean,
   hasInitialConfig: boolean,
-  setters: {
-    setMcpConfig: (v: AgentProfileMcpConfig) => void;
-    setMcpEnabledState: (v: boolean) => void;
-    setMcpServers: (v: string) => void;
-    setMcpDirty: (v: boolean) => void;
-    setMcpError: (v: string | null) => void;
-    setMcpStatus: (v: McpStatus) => void;
-  },
+  setters: McpStateSetters,
 ) {
   useEffect(() => {
     if (!supportsMcp || !isEditableProfile || hasInitialConfig) return;
@@ -125,6 +124,27 @@ function useFetchConfig(
   }, [profileId, supportsMcp, isEditableProfile, hasInitialConfig]);
 }
 
+function useLatestMcpDraft(enabled: boolean, servers: string) {
+  const ref = useRef({ enabled, servers });
+  ref.current = { enabled, servers };
+  return ref;
+}
+
+function resetMcpDraftState(config: AgentProfileMcpConfig | null, setters: McpStateSetters) {
+  setters.setMcpEnabledState(config?.enabled ?? false);
+  setters.setMcpServers(serializeServers(config));
+  setters.setMcpDirty(false);
+  setters.setMcpError(null);
+  setters.setMcpStatus("idle");
+}
+
+function mcpBaseline(config: AgentProfileMcpConfig | null) {
+  return {
+    mcpBaselineEnabled: config?.enabled ?? false,
+    mcpBaselineServers: serializeServers(config),
+  };
+}
+
 export function useProfileMcpConfig({
   profileId,
   supportsMcp,
@@ -139,6 +159,7 @@ export function useProfileMcpConfig({
   const [mcpDirty, setMcpDirty] = useState(false);
   const [mcpStatus, setMcpStatus] = useState<McpStatus>("idle");
   const [hasInitialConfig] = useState(initialConfig !== undefined);
+  const latestDraftRef = useLatestMcpDraft(mcpEnabled, mcpServers);
 
   const isEditableProfile = Boolean(profileId) && !profileId.startsWith("draft-");
 
@@ -154,8 +175,6 @@ export function useProfileMcpConfig({
   useResetOnUnsupported(supportsMcp, isEditableProfile, stateSetters);
   useFetchConfig(profileId, supportsMcp, isEditableProfile, hasInitialConfig, stateSetters);
 
-  const isEmptyExample = (value: string) => value.trim() === EMPTY_EXAMPLE.trim();
-
   const setMcpEnabled = (enabled: boolean) => {
     setMcpEnabledState(enabled);
     setMcpDirty(true);
@@ -183,6 +202,8 @@ export function useProfileMcpConfig({
 
   const handleSaveMcp = async () => {
     if (!isEditableProfile) return;
+    const submittedEnabled = mcpEnabled;
+    const submittedServers = mcpServers;
     setMcpStatus("loading");
 
     let servers: Record<string, McpServerDef> = {};
@@ -193,7 +214,7 @@ export function useProfileMcpConfig({
     } catch (error) {
       setMcpStatus("error");
       setMcpError(error instanceof Error ? error.message : "Invalid MCP config");
-      return;
+      throw error;
     }
 
     try {
@@ -203,25 +224,33 @@ export function useProfileMcpConfig({
         meta: mcpConfig?.meta ?? {},
       });
       setMcpConfig(updated);
-      setMcpEnabledState(updated.enabled);
-      setMcpServers(serializeServers(updated));
-      setMcpDirty(false);
+      setMcpEnabledState((current) => (current === submittedEnabled ? updated.enabled : current));
+      setMcpServers((current) =>
+        current === submittedServers ? serializeServers(updated) : current,
+      );
+      setMcpDirty(
+        latestDraftRef.current.enabled !== submittedEnabled ||
+          latestDraftRef.current.servers !== submittedServers,
+      );
       setMcpError(null);
       setMcpStatus("success");
     } catch (error) {
       setMcpStatus("error");
       onToastError(error);
+      throw error;
     }
   };
 
   return {
     mcpEnabled,
     mcpServers,
+    ...mcpBaseline(mcpConfig),
     mcpError,
     mcpDirty,
     mcpStatus,
     setMcpEnabled,
     handleMcpServersChange,
     handleSaveMcp,
+    resetMcpDraft: () => resetMcpDraftState(mcpConfig, stateSetters),
   };
 }
diff --git a/apps/web/app/settings/executor/[id]/page.tsx b/apps/web/app/settings/executor/[id]/page.tsx
index de5e058540..67ba85dbfe 100644
--- a/apps/web/app/settings/executor/[id]/page.tsx
+++ b/apps/web/app/settings/executor/[id]/page.tsx
@@ -21,6 +21,8 @@ import { updateExecutorAction, deleteExecutorAction } from "@/app/actions/execut
 import { getWebSocketClient } from "@/lib/ws/connection";
 import { useAppStore } from "@/components/state-provider";
 import { ExecutorProfilesCard } from "@/components/settings/executor-profiles-card";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
 import type { Executor, ExecutorType } from "@/lib/types/http";
 import { EXECUTOR_ICON_MAP } from "@/lib/executor-icons";
 
@@ -86,10 +88,12 @@ function McpPresetButton({ label, onClick }: { label: string; onClick: () => voi
 
 function McpPolicyCard({
   mcpPolicy,
+  isDirty,
   mcpPolicyError,
   onPolicyChange,
 }: {
   mcpPolicy: string;
+  isDirty: boolean;
   mcpPolicyError: string | null;
   onPolicyChange: (value: string) => void;
 }) {
@@ -100,7 +104,7 @@ function McpPolicyCard({
   };
 
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty}>
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           MCP Policy
@@ -115,6 +119,7 @@ function McpPolicyCard({
         <Textarea
           id="mcp-policy"
           value={mcpPolicy}
+          data-settings-dirty={isDirty}
           onChange={(event) => onPolicyChange(event.target.value)}
           placeholder='{"allow_stdio":true,"allow_http":true}'
           rows={8}
@@ -168,7 +173,7 @@ function McpPolicyCard({
           />
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
@@ -278,7 +283,6 @@ function ExecutorEditForm({ executor }: { executor: Executor }) {
   const setExecutors = useAppStore((state) => state.setExecutors);
   const [mcpPolicy, setMcpPolicy] = useState(executor.config?.mcp_policy ?? "");
   const [savedMcpPolicy, setSavedMcpPolicy] = useState(executor.config?.mcp_policy ?? "");
-  const [isSaving, setIsSaving] = useState(false);
 
   const isSystem = executor.is_system ?? false;
   const ExecutorIcon = EXECUTOR_ICON_MAP[executor.type] ?? EXECUTOR_ICON_MAP.local;
@@ -286,24 +290,26 @@ function ExecutorEditForm({ executor }: { executor: Executor }) {
   const isDirty = mcpPolicy !== savedMcpPolicy;
 
   const handleSave = async () => {
-    setIsSaving(true);
-    try {
-      const config = { ...(executor.config ?? {}), mcp_policy: mcpPolicy };
-      const payload = isSystem ? { config } : { name: executor.name, config };
-      const client = getWebSocketClient();
-      const updated = client
-        ? await client.request<Executor>("executor.update", { id: executor.id, ...payload })
-        : await updateExecutorAction(executor.id, payload);
-      setSavedMcpPolicy(updated.config?.mcp_policy ?? "");
-      setExecutors(
-        executors.map((item: Executor) =>
-          item.id === updated.id ? { ...item, ...updated } : item,
-        ),
-      );
-    } finally {
-      setIsSaving(false);
-    }
+    const config = { ...(executor.config ?? {}), mcp_policy: mcpPolicy };
+    const payload = isSystem ? { config } : { name: executor.name, config };
+    const client = getWebSocketClient();
+    const updated = client
+      ? await client.request<Executor>("executor.update", { id: executor.id, ...payload })
+      : await updateExecutorAction(executor.id, payload);
+    setSavedMcpPolicy(updated.config?.mcp_policy ?? "");
+    setExecutors(
+      executors.map((item: Executor) => (item.id === updated.id ? { ...item, ...updated } : item)),
+    );
   };
+  useSettingsSaveContributor({
+    id: `executor:${executor.id}`,
+    revision: mcpPolicy,
+    isDirty,
+    canSave: !mcpPolicyError,
+    invalidReason: mcpPolicyError ?? undefined,
+    save: handleSave,
+    discard: () => setMcpPolicy(savedMcpPolicy),
+  });
 
   return (
     <div className="space-y-8">
@@ -332,29 +338,11 @@ function ExecutorEditForm({ executor }: { executor: Executor }) {
 
       <McpPolicyCard
         mcpPolicy={mcpPolicy}
+        isDirty={isDirty}
         mcpPolicyError={mcpPolicyError}
         onPolicyChange={setMcpPolicy}
       />
 
-      {isDirty && (
-        <div className="flex items-center justify-end gap-2">
-          <Button
-            variant="outline"
-            onClick={() => setMcpPolicy(savedMcpPolicy)}
-            className="cursor-pointer"
-          >
-            Discard
-          </Button>
-          <Button
-            onClick={handleSave}
-            disabled={Boolean(mcpPolicyError) || isSaving}
-            className="cursor-pointer"
-          >
-            {isSaving ? "Saving..." : "Save Changes"}
-          </Button>
-        </div>
-      )}
-
       {!isSystem && <DeleteExecutorSection executor={executor} />}
     </div>
   );
diff --git a/apps/web/app/settings/executor/[id]/profile/[profileId]/page.tsx b/apps/web/app/settings/executor/[id]/profile/[profileId]/page.tsx
index d9989a93cc..9798b23dad 100644
--- a/apps/web/app/settings/executor/[id]/profile/[profileId]/page.tsx
+++ b/apps/web/app/settings/executor/[id]/profile/[profileId]/page.tsx
@@ -2,6 +2,7 @@
 
 import { use, useCallback, useEffect, useMemo, useState } from "react";
 import { useRouter } from "@/lib/routing/client-router";
+import { runWithNavigationBlockerBypassed } from "@/lib/routing/navigation-guard";
 import { Button } from "@kandev/ui/button";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
@@ -18,8 +19,10 @@ import {
 } from "@kandev/ui/dialog";
 import { IconPlus, IconTrash } from "@tabler/icons-react";
 import { useAppStore } from "@/components/state-provider";
-import { RequestIndicator } from "@/components/request-indicator";
 import { useToast } from "@/components/toast-provider";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { serializeSettingsRevision } from "@/components/settings/settings-save-revision";
 import { useSecrets } from "@/hooks/domains/settings/use-secrets";
 import {
   updateExecutorProfile,
@@ -28,7 +31,6 @@ import {
 } from "@/lib/api/domains/settings-api";
 import type { ScriptPlaceholder } from "@/lib/api/domains/settings-api";
 import {
-  getSaveButtonLabel,
   upsertExecutorProfile,
   type SaveStatus,
 } from "@/components/settings/profile-edit/profile-edit-page-chrome";
@@ -100,23 +102,31 @@ export default function ProfileDetailPage({
 
 function ProfileDetailsCard({
   name,
+  baselineName,
   onNameChange,
 }: {
   name: string;
+  baselineName: string;
   onNameChange: (v: string) => void;
 }) {
+  const isDirty = name.trim() !== baselineName.trim();
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty}>
       <CardHeader>
         <CardTitle>Profile Details</CardTitle>
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="space-y-2">
           <Label htmlFor="profile-name">Name</Label>
-          <Input id="profile-name" value={name} onChange={(e) => onNameChange(e.target.value)} />
+          <Input
+            id="profile-name"
+            value={name}
+            onChange={(e) => onNameChange(e.target.value)}
+            data-settings-dirty={isDirty}
+          />
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
@@ -126,23 +136,34 @@ function EnvVarRow({
   secrets,
   onUpdate,
   onRemove,
+  baselineRow,
 }: {
   row: EnvVarRow;
   index: number;
   secrets: { id: string; name: string }[];
   onUpdate: (index: number, field: keyof EnvVarRow, val: string) => void;
   onRemove: (index: number) => void;
+  baselineRow?: EnvVarRow;
 }) {
+  const isDirty = !baselineRow || JSON.stringify(row) !== JSON.stringify(baselineRow);
   return (
-    <div className="flex items-start gap-2">
+    <div
+      className="flex items-start gap-2"
+      data-settings-dirty={isDirty}
+      data-settings-dirty-level="container"
+    >
       <Input
         value={row.key}
         onChange={(e) => onUpdate(index, "key", e.target.value)}
         placeholder="KEY"
         className="font-mono text-xs flex-[2]"
+        data-settings-dirty={!baselineRow || row.key !== baselineRow.key}
       />
       <Select value={row.mode} onValueChange={(v) => onUpdate(index, "mode", v)}>
-        <SelectTrigger className="w-[100px] text-xs">
+        <SelectTrigger
+          className="w-[100px] text-xs"
+          data-settings-dirty={!baselineRow || row.mode !== baselineRow.mode}
+        >
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
@@ -156,10 +177,14 @@ function EnvVarRow({
           onChange={(e) => onUpdate(index, "value", e.target.value)}
           placeholder="value"
           className="font-mono text-xs flex-[3]"
+          data-settings-dirty={!baselineRow || row.value !== baselineRow.value}
         />
       ) : (
         <Select value={row.secretId} onValueChange={(v) => onUpdate(index, "secretId", v)}>
-          <SelectTrigger className="flex-[3] text-xs">
+          <SelectTrigger
+            className="flex-[3] text-xs"
+            data-settings-dirty={!baselineRow || row.secretId !== baselineRow.secretId}
+          >
             <SelectValue placeholder="Select secret..." />
           </SelectTrigger>
           <SelectContent>
@@ -186,19 +211,23 @@ function EnvVarRow({
 
 function EnvVarsCard({
   rows,
+  baselineRows,
   secrets,
   onAdd,
   onUpdate,
   onRemove,
 }: {
   rows: EnvVarRow[];
+  baselineRows: EnvVarRow[];
   secrets: { id: string; name: string }[];
   onAdd: () => void;
   onUpdate: (index: number, field: keyof EnvVarRow, val: string) => void;
   onRemove: (index: number) => void;
 }) {
+  const isDirty =
+    JSON.stringify(rowsToEnvVars(rows)) !== JSON.stringify(rowsToEnvVars(baselineRows));
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty}>
       <CardHeader>
         <div className="flex items-center justify-between">
           <div>
@@ -228,6 +257,7 @@ function EnvVarsCard({
           <EnvVarRow
             key={idx}
             row={row}
+            baselineRow={baselineRows[idx]}
             index={idx}
             secrets={secrets}
             onUpdate={onUpdate}
@@ -235,53 +265,31 @@ function EnvVarsCard({
           />
         ))}
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
 function ProfileActions({
   executorId,
-  saveStatus,
-  nameValid,
-  onSave,
   onRequestDelete,
 }: {
   executorId: string;
-  saveStatus: SaveStatus;
-  nameValid: boolean;
-  onSave: () => void;
   onRequestDelete: () => void;
 }) {
   const router = useRouter();
-  const isSaving = saveStatus === "loading";
-  const saveLabel = getSaveButtonLabel(saveStatus);
   return (
     <div className="flex items-center justify-between">
       <Button variant="destructive" size="sm" onClick={onRequestDelete} className="cursor-pointer">
         <IconTrash className="h-4 w-4 mr-1" />
         Delete Profile
       </Button>
-      <div className="flex items-center gap-2">
-        <Button
-          variant="outline"
-          onClick={() => router.push(`/settings/executor/${executorId}`)}
-          className="cursor-pointer"
-        >
-          Cancel
-        </Button>
-        <Button
-          onClick={onSave}
-          disabled={!nameValid || isSaving}
-          className="min-w-36 cursor-pointer"
-        >
-          {saveLabel}
-          {saveStatus !== "idle" && (
-            <span className="ml-2">
-              <RequestIndicator status={saveStatus} />
-            </span>
-          )}
-        </Button>
-      </div>
+      <Button
+        variant="outline"
+        onClick={() => router.push(`/settings/executor/${executorId}`)}
+        className="cursor-pointer"
+      >
+        Cancel
+      </Button>
     </div>
   );
 }
@@ -349,6 +357,7 @@ function useProfilePersistence(executor: Executor, profile: ExecutorProfile) {
         setError(message);
         setSaveStatus("error");
         toast({ title: "Failed to save profile", description: message, variant: "error" });
+        throw err;
       }
     },
     [executor, profile.id, executors, setExecutors, toast],
@@ -365,7 +374,7 @@ function useProfilePersistence(executor: Executor, profile: ExecutorProfile) {
             : e,
         ),
       );
-      router.push(`/settings/executor/${executor.id}`);
+      runWithNavigationBlockerBypassed(() => router.push(`/settings/executor/${executor.id}`));
     } catch {
       setDeleting(false);
       setDeleteDialogOpen(false);
@@ -438,15 +447,27 @@ function ProfileEditForm({ executor, profile }: { executor: Executor; profile: E
   const persistence = useProfilePersistence(executor, profile);
   const form = useProfileFormState(executor, profile);
 
-  const handleSave = () => {
-    if (!form.name.trim()) return;
-    void persistence.save({
-      name: form.name.trim(),
-      prepare_script: form.prepareScript,
-      cleanup_script: form.cleanupScript,
-      env_vars: rowsToEnvVars(form.envVarRows),
-    });
+  const savePayload = {
+    name: form.name.trim(),
+    prepare_script: form.prepareScript,
+    cleanup_script: form.cleanupScript,
+    env_vars: rowsToEnvVars(form.envVarRows),
   };
+  const saveRevision = serializeSettingsRevision(savePayload);
+  const [savedRevision, setSavedRevision] = useState(saveRevision);
+  const handleSave = async () => {
+    await persistence.save(savePayload);
+    setSavedRevision(saveRevision);
+  };
+  useSettingsSaveContributor({
+    id: `legacy-executor-profile:${profile.id}`,
+    revision: saveRevision,
+    isDirty: saveRevision !== savedRevision,
+    canSave: Boolean(form.name.trim()),
+    invalidReason: form.name.trim() ? undefined : "Profile name is required.",
+    save: handleSave,
+    discard: () => undefined,
+  });
 
   return (
     <div className="space-y-8">
@@ -465,7 +486,11 @@ function ProfileEditForm({ executor, profile }: { executor: Executor; profile: E
         </Button>
       </div>
       <Separator />
-      <ProfileDetailsCard name={form.name} onNameChange={form.setName} />
+      <ProfileDetailsCard
+        name={form.name}
+        baselineName={profile.name}
+        onNameChange={form.setName}
+      />
       {form.isSprites && form.spritesSecretId && (
         <>
           <SpritesConnectionCard secretId={form.spritesSecretId} />
@@ -474,6 +499,7 @@ function ProfileEditForm({ executor, profile }: { executor: Executor; profile: E
       )}
       <EnvVarsCard
         rows={form.envVarRows}
+        baselineRows={envVarsToRows(profile.env_vars)}
         secrets={secrets}
         onAdd={form.addEnvVar}
         onUpdate={form.updateEnvVar}
@@ -483,6 +509,7 @@ function ProfileEditForm({ executor, profile }: { executor: Executor; profile: E
         title="Prepare Script"
         description={form.prepareDesc}
         value={form.prepareScript}
+        baselineValue={profile.prepare_script ?? ""}
         onChange={form.setPrepareScript}
         height="300px"
         placeholders={form.placeholders}
@@ -493,6 +520,7 @@ function ProfileEditForm({ executor, profile }: { executor: Executor; profile: E
           title="Cleanup Script"
           description="Runs after the agent session ends for cleanup tasks."
           value={form.cleanupScript}
+          baselineValue={profile.cleanup_script ?? ""}
           onChange={form.setCleanupScript}
           height="200px"
           placeholders={form.placeholders}
@@ -502,9 +530,6 @@ function ProfileEditForm({ executor, profile }: { executor: Executor; profile: E
       {persistence.error && <p className="text-sm text-destructive">{persistence.error}</p>}
       <ProfileActions
         executorId={executor.id}
-        saveStatus={persistence.saveStatus}
-        nameValid={Boolean(form.name.trim())}
-        onSave={handleSave}
         onRequestDelete={() => persistence.setDeleteDialogOpen(true)}
       />
       <DeleteProfileDialog
diff --git a/apps/web/app/settings/executors/[profileId]/page.tsx b/apps/web/app/settings/executors/[profileId]/page.tsx
index 15a05a019e..62d7dfe0b6 100644
--- a/apps/web/app/settings/executors/[profileId]/page.tsx
+++ b/apps/web/app/settings/executors/[profileId]/page.tsx
@@ -2,6 +2,7 @@
 
 import { use, useCallback, useEffect, useMemo, useState } from "react";
 import { useRouter } from "@/lib/routing/client-router";
+import { runWithNavigationBlockerBypassed } from "@/lib/routing/navigation-guard";
 import { Button } from "@kandev/ui/button";
 import { Card, CardContent } from "@kandev/ui/card";
 import { IconShieldLock } from "@tabler/icons-react";
@@ -16,6 +17,7 @@ import {
 } from "@/lib/api/domains/settings-api";
 import type { ScriptPlaceholder } from "@/lib/api/domains/settings-api";
 import { ProfileDetailsCard } from "@/components/settings/profile-edit/profile-details-card";
+import { getExecutorDescription } from "@/components/settings/executor-description";
 import {
   McpPolicyCard,
   validateMcpPolicy,
@@ -24,6 +26,7 @@ import {
   EnvVarsCard,
   useEnvVarRows,
   rowsToEnvVars,
+  envVarsToRows,
 } from "@/components/settings/profile-edit/env-vars-card";
 import { ScriptCard } from "@/components/settings/profile-edit/script-card";
 import { SSHAgentReadinessCard } from "@/components/settings/ssh-agent-readiness-card";
@@ -45,6 +48,15 @@ import {
   type SaveStatus,
 } from "@/components/settings/profile-edit/profile-edit-page-chrome";
 import { useToast } from "@/components/toast-provider";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
+import { serializeSettingsRevision } from "@/components/settings/settings-save-revision";
+import {
+  deriveSpritesSecretId,
+  getGitIdentityBaseline,
+  parseNetworkPolicyRules,
+  parseRemoteAuthSecrets,
+  parseRemoteCredentials,
+} from "@/components/settings/profile-edit/executor-profile-baselines";
 import type { Executor, ExecutorProfile, ExecutorType, ProfileEnvVar } from "@/lib/types/http";
 import type { NetworkPolicyRule } from "@/lib/api/domains/settings-api";
 
@@ -60,31 +72,6 @@ function useProfileFromStore(profileId: string) {
   return executor && profile ? { executor, profile } : null;
 }
 
-function deriveSpritesSecretId(envVars?: ProfileEnvVar[]): string | null {
-  const row = envVars?.find((ev) => ev.key === SPRITES_TOKEN_KEY && ev.secret_id);
-  return row?.secret_id ?? null;
-}
-
-function parseNetworkPolicyRules(config?: Record<string, string>): NetworkPolicyRule[] {
-  const raw = config?.sprites_network_policy_rules;
-  if (!raw) return [];
-  try {
-    return JSON.parse(raw) as NetworkPolicyRule[];
-  } catch {
-    return [];
-  }
-}
-
-function parseRemoteCredentials(config?: Record<string, string>): string[] {
-  const raw = config?.remote_credentials;
-  if (!raw) return [];
-  try {
-    return JSON.parse(raw) as string[];
-  } catch {
-    return [];
-  }
-}
-
 function useRemoteExecutorFlags(executorType: ExecutorType) {
   // SSH joins the "remote" set because it runs the agent on a host whose
   // filesystem doesn't share paths with the kandev backend — so the same
@@ -109,15 +96,9 @@ function useRemoteAuthState(profile: ExecutorProfile) {
   const [remoteCredentials, setRemoteCredentials] = useState<string[]>(() =>
     parseRemoteCredentials(profile.config),
   );
-  const [agentEnvVars, setAgentEnvVars] = useState<Record<string, string | null>>(() => {
-    const raw = profile.config?.remote_auth_secrets;
-    if (!raw) return {};
-    try {
-      return JSON.parse(raw) as Record<string, string | null>;
-    } catch {
-      return {};
-    }
-  });
+  const [agentEnvVars, setAgentEnvVars] = useState<Record<string, string | null>>(() =>
+    parseRemoteAuthSecrets(profile.config),
+  );
 
   const handleAgentEnvVarChange = useCallback((agentId: string, secretId: string | null) => {
     setAgentEnvVars((prev) => ({ ...prev, [agentId]: secretId }));
@@ -142,9 +123,14 @@ function useGitIdentityState(isRemote: boolean, profile: ExecutorProfile) {
   const [gitIdentityMode, setGitIdentityMode] = useState<GitIdentityMode>("override");
   const [gitUserName, setGitUserName] = useState(profile.config?.git_user_name ?? "");
   const [gitUserEmail, setGitUserEmail] = useState(profile.config?.git_user_email ?? "");
+  const [loaded, setLoaded] = useState(!isRemote);
 
   useEffect(() => {
-    if (!isRemote) return;
+    if (!isRemote) {
+      setLoaded(true);
+      return;
+    }
+    setLoaded(false);
     fetchLocalGitIdentity()
       .then((identity) => {
         const local: GitIdentityState = {
@@ -169,7 +155,8 @@ function useGitIdentityState(isRemote: boolean, profile: ExecutorProfile) {
         }
         setGitIdentityMode("override");
       })
-      .catch(() => {});
+      .catch(() => {})
+      .finally(() => setLoaded(true));
   }, [isRemote, profile.config?.git_user_email, profile.config?.git_user_name]);
 
   return {
@@ -180,6 +167,7 @@ function useGitIdentityState(isRemote: boolean, profile: ExecutorProfile) {
     setGitUserName,
     gitUserEmail,
     setGitUserEmail,
+    loaded,
   };
 }
 
@@ -238,6 +226,7 @@ function useProfilePersistence(executor: Executor, profile: ExecutorProfile) {
         setError(message);
         setSaveStatus("error");
         toast({ title: "Failed to save profile", description: message, variant: "error" });
+        throw err;
       }
     },
     [executor, profile.id, executors, setExecutors, toast],
@@ -256,7 +245,7 @@ function useProfilePersistence(executor: Executor, profile: ExecutorProfile) {
               : e,
           ),
         );
-        router.push(EXECUTORS_ROUTE);
+        runWithNavigationBlockerBypassed(() => router.push(EXECUTORS_ROUTE));
       } catch {
         setDeleting(false);
         setDeleteDialogOpen(false);
@@ -275,6 +264,7 @@ function useProfileFormState(executor: Executor, profile: ExecutorProfile) {
   const [cleanupScript, setCleanupScript] = useState(profile.cleanup_script ?? "");
   const [dockerfile, setDockerfile] = useState(profile.config?.dockerfile ?? "");
   const [imageTag, setImageTag] = useState(profile.config?.image_tag ?? "");
+  const [sshShell, setSshShell] = useState(profile.config?.ssh_shell ?? "");
   const { envVarRows, addEnvVar, removeEnvVar, updateEnvVar } = useEnvVarRows(profile.env_vars);
   const [placeholders, setPlaceholders] = useState<ScriptPlaceholder[]>([]);
   const [spritesSecretId, setSpritesSecretId] = useState<string | null>(() =>
@@ -316,6 +306,8 @@ function useProfileFormState(executor: Executor, profile: ExecutorProfile) {
     setDockerfile,
     imageTag,
     setImageTag,
+    sshShell,
+    setSshShell,
     envVarRows,
     addEnvVar,
     removeEnvVar,
@@ -330,6 +322,7 @@ function useProfileFormState(executor: Executor, profile: ExecutorProfile) {
     agentEnvVars: remoteAuth.agentEnvVars,
     handleAgentEnvVarChange: remoteAuth.handleAgentEnvVarChange,
     localGitIdentity: gitIdentity.localGitIdentity,
+    gitIdentityLoaded: gitIdentity.loaded,
     gitIdentityMode: gitIdentity.gitIdentityMode,
     setGitIdentityMode: gitIdentity.setGitIdentityMode,
     gitUserName: gitIdentity.gitUserName,
@@ -339,6 +332,7 @@ function useProfileFormState(executor: Executor, profile: ExecutorProfile) {
     isRemote: flags.isRemote,
     isDocker: flags.isDocker,
     isSprites: flags.isSprites,
+    isSSH: executor.type === "ssh",
     mcpPolicyError,
     buildEnvVars,
     prepareDesc,
@@ -387,6 +381,8 @@ function buildSaveConfig(
     delete config.git_user_email;
   }
   applyDockerConfig(config, form);
+  if (form.isSSH && form.sshShell.trim()) config.ssh_shell = form.sshShell.trim();
+  else delete config.ssh_shell;
   return config;
 }
 
@@ -407,37 +403,34 @@ function applyDockerConfig(
   }
 }
 
-function ProfileEditSections({
-  executor,
-  profile,
-  form,
-  secrets,
-  onShellChange,
-}: {
+type ProfileEditSectionsProps = {
   executor: Executor;
   profile: ExecutorProfile;
   form: ReturnType<typeof useProfileFormState>;
   secrets: ReturnType<typeof useSecrets>["items"];
-  onShellChange?: (shell: string) => Promise<void>;
-}) {
-  const isSSH = executor.type === "ssh";
+};
+
+function ProfileEditSections({ executor, profile, form, secrets }: ProfileEditSectionsProps) {
+  const gitIdentityBaseline = getGitIdentityBaseline(profile, form.localGitIdentity);
   return (
     <>
-      <ProfileDetailsCard name={form.name} onNameChange={form.setName} />
-      {isSSH && (
-        // SSH-specific: lives right after profile details (top of the page)
-        // because the very next question after "name this profile" on an
-        // SSH host is "which agents are installed here". Drives the shell
-        // selector that governs every subsequent SSH command run by kandev.
+      <ProfileDetailsCard
+        name={form.name}
+        baselineName={profile.name}
+        onNameChange={form.setName}
+      />
+      {executor.type === "ssh" && (
         <SSHAgentReadinessCard
           executorId={executor.id}
-          shell={profile.config?.ssh_shell}
-          onShellChange={onShellChange}
+          shell={form.sshShell}
+          baselineShell={profile.config?.ssh_shell ?? ""}
+          onShellChange={form.setSshShell}
         />
       )}
       {form.isSprites && (
         <SpritesApiKeyCard
           secretId={form.spritesSecretId}
+          baselineSecretId={deriveSpritesSecretId(profile.env_vars)}
           onSecretIdChange={form.setSpritesSecretId}
           secrets={secrets}
         />
@@ -457,15 +450,21 @@ function ProfileEditSections({
           isSprites={form.isSprites}
           secretId={form.spritesSecretId}
           networkRules={form.networkPolicyRules}
+          baselineNetworkRules={parseNetworkPolicyRules(profile.config)}
           onNetworkRulesChange={form.setNetworkPolicyRules}
           remoteCredentials={form.remoteCredentials}
+          baselineRemoteCredentials={parseRemoteCredentials(profile.config)}
           onRemoteCredentialsChange={form.setRemoteCredentials}
           agentEnvVars={form.agentEnvVars}
+          baselineAgentEnvVars={parseRemoteAuthSecrets(profile.config)}
           onAgentEnvVarChange={form.handleAgentEnvVarChange}
           gitIdentityMode={form.gitIdentityMode}
+          baselineGitIdentityMode={gitIdentityBaseline.mode}
           onGitIdentityModeChange={form.setGitIdentityMode}
           gitUserName={form.gitUserName}
           gitUserEmail={form.gitUserEmail}
+          baselineGitUserName={gitIdentityBaseline.userName}
+          baselineGitUserEmail={gitIdentityBaseline.userEmail}
           onGitUserNameChange={form.setGitUserName}
           onGitUserEmailChange={form.setGitUserEmail}
           localGitIdentity={form.localGitIdentity}
@@ -474,6 +473,7 @@ function ProfileEditSections({
       )}
       <EnvVarsCard
         rows={form.envVarRows}
+        baselineRows={envVarsToRows(profile.env_vars)}
         secrets={secrets}
         onAdd={form.addEnvVar}
         onUpdate={form.updateEnvVar}
@@ -483,6 +483,7 @@ function ProfileEditSections({
         title="Prepare Script"
         description={form.prepareDesc}
         value={form.prepareScript}
+        baselineValue={profile.prepare_script ?? ""}
         onChange={form.setPrepareScript}
         height="300px"
         placeholders={form.placeholders}
@@ -493,6 +494,7 @@ function ProfileEditSections({
           title="Cleanup Script"
           description="Runs after the agent session ends for cleanup tasks."
           value={form.cleanupScript}
+          baselineValue={profile.cleanup_script ?? ""}
           onChange={form.setCleanupScript}
           height="200px"
           placeholders={form.placeholders}
@@ -501,6 +503,7 @@ function ProfileEditSections({
       )}
       <McpPolicyCard
         mcpPolicy={form.mcpPolicy}
+        baselinePolicy={profile.mcp_policy ?? ""}
         mcpPolicyError={form.mcpPolicyError}
         onPolicyChange={form.setMcpPolicy}
       />
@@ -529,39 +532,43 @@ function ProfileEditForm({ executor, profile }: { executor: Executor; profile: E
       </Button>
     ) : undefined;
 
-  const handleSave = () => {
-    if (!form.name.trim() || form.mcpPolicyError || spritesTokenMissing) return;
-    void persistence.save({
-      name: form.name.trim(),
-      mcp_policy: form.mcpPolicy || undefined,
-      config: buildSaveConfig(form, profile.config),
-      prepare_script: form.prepareScript,
-      cleanup_script: form.cleanupScript,
-      env_vars: form.buildEnvVars(),
-    });
+  const savePayload = {
+    name: form.name.trim(),
+    mcp_policy: form.mcpPolicy || undefined,
+    config: buildSaveConfig(form, profile.config),
+    prepare_script: form.prepareScript,
+    cleanup_script: form.cleanupScript,
+    env_vars: form.buildEnvVars(),
   };
-
-  // Shell selector lives on the SSH readiness card and persists out-of-band
-  // from the main Save button — users twiddling the dropdown shouldn't have
-  // to remember to press Save afterwards. The PATCH carries the full
-  // (merged) config so the backend's config-replace semantics don't wipe
-  // adjacent keys (workdir_root, prepare_script env, etc.). Key name is
-  // ssh_shell to match MetadataKeySSHShell — buildLaunchMetadata copies
-  // profile.config keys verbatim into req.Metadata, so the same string
-  // has to identify the shell on both sides.
-  const handleShellChange = useCallback(
-    async (next: string) => {
-      const mergedConfig = { ...(profile.config ?? {}), ssh_shell: next };
-      await persistence.save({
-        name: profile.name,
-        config: mergedConfig,
-        prepare_script: profile.prepare_script ?? "",
-        cleanup_script: profile.cleanup_script ?? "",
-        env_vars: profile.env_vars ?? [],
-      });
-    },
-    [persistence, profile],
-  );
+  const saveRevision = serializeSettingsRevision(savePayload);
+  const [savedRevision, setSavedRevision] = useState(saveRevision);
+  const [baselineReady, setBaselineReady] = useState(!form.isRemote);
+  useEffect(() => {
+    if (!baselineReady && form.gitIdentityLoaded) {
+      setSavedRevision(saveRevision);
+      setBaselineReady(true);
+    }
+  }, [baselineReady, form.gitIdentityLoaded, saveRevision]);
+  const handleSave = async () => {
+    const submittedPayload = savePayload;
+    const submittedRevision = saveRevision;
+    await persistence.save(submittedPayload);
+    setSavedRevision(submittedRevision);
+  };
+  let invalidReason: string | undefined;
+  if (!form.name.trim()) invalidReason = "Profile name is required.";
+  else if (form.mcpPolicyError) invalidReason = form.mcpPolicyError;
+  else if (spritesTokenMissing) invalidReason = "Sprites token is required.";
+  useSettingsSaveContributor({
+    id: `executor-profile:${profile.id}`,
+    revision: saveRevision,
+    isDirty: baselineReady && saveRevision !== savedRevision,
+    canSave:
+      baselineReady && Boolean(form.name.trim()) && !form.mcpPolicyError && !spritesTokenMissing,
+    invalidReason,
+    save: handleSave,
+    discard: () => undefined,
+  });
 
   const handleDelete = (options?: { removeRelatedDockerContainers?: boolean }) => {
     const beforeDelete = options?.removeRelatedDockerContainers
@@ -583,28 +590,17 @@ function ProfileEditForm({ executor, profile }: { executor: Executor; profile: E
         description={getExecutorDescription(executor.type)}
         actions={headerActions}
       />
-      <ProfileEditSections
-        executor={executor}
-        profile={profile}
-        form={form}
-        secrets={secrets}
-        onShellChange={handleShellChange}
-      />
+      <fieldset
+        disabled={!baselineReady || persistence.saveStatus === "loading"}
+        className="contents"
+      >
+        <ProfileEditSections executor={executor} profile={profile} form={form} secrets={secrets} />
+      </fieldset>
       {spritesTokenMissing && (
         <p className="text-sm text-destructive">Sprites API key is required.</p>
       )}
       {persistence.error && <p className="text-sm text-destructive">{persistence.error}</p>}
-      <ProfileFormActions
-        saveStatus={persistence.saveStatus}
-        saveDisabled={
-          !form.name.trim() ||
-          Boolean(form.mcpPolicyError) ||
-          spritesTokenMissing ||
-          persistence.saveStatus === "loading"
-        }
-        onSave={handleSave}
-        onDelete={() => persistence.setDeleteDialogOpen(true)}
-      />
+      <ProfileFormActions onDelete={() => persistence.setDeleteDialogOpen(true)} />
       <DeleteProfileDialog
         open={persistence.deleteDialogOpen}
         onOpenChange={persistence.setDeleteDialogOpen}
@@ -615,13 +611,3 @@ function ProfileEditForm({ executor, profile }: { executor: Executor; profile: E
     </div>
   );
 }
-
-function getExecutorDescription(type: ExecutorType): string {
-  if (type === "local_pc") return "Runs agents directly in the repository folder.";
-  if (type === "worktree") return "Creates git worktrees for isolated agent sessions.";
-  if (type === "local_docker") return "Runs Docker containers on this machine.";
-  if (type === "remote_docker") return "Connects to a remote Docker host.";
-  if (type === "sprites") return "Runs agents in Sprites.dev cloud sandboxes.";
-  if (type === "ssh") return "Runs agents on a trusted Linux amd64 or macOS host over SSH.";
-  return "Custom executor.";
-}
diff --git a/apps/web/app/settings/executors/new/[type]/page.tsx b/apps/web/app/settings/executors/new/[type]/page.tsx
index fde7e4b399..f05264ca28 100644
--- a/apps/web/app/settings/executors/new/[type]/page.tsx
+++ b/apps/web/app/settings/executors/new/[type]/page.tsx
@@ -2,11 +2,11 @@
 
 import { use, useCallback, useEffect, useMemo, useState } from "react";
 import { useRouter } from "@/lib/routing/client-router";
+import { runWithNavigationBlockerBypassed } from "@/lib/routing/navigation-guard";
 import { Badge } from "@kandev/ui/badge";
 import { Button } from "@kandev/ui/button";
 import { Card, CardContent } from "@kandev/ui/card";
 import { Separator } from "@kandev/ui/separator";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@kandev/ui/tooltip";
 import { useAppStore } from "@/components/state-provider";
 import { useSecrets } from "@/hooks/domains/settings/use-secrets";
 import {
@@ -17,6 +17,8 @@ import {
 } from "@/lib/api/domains/settings-api";
 import type { ScriptPlaceholder } from "@/lib/api/domains/settings-api";
 import { EXECUTOR_ICON_MAP, getExecutorLabel } from "@/lib/executor-icons";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
+import { serializeSettingsRevision } from "@/components/settings/settings-save-revision";
 import { ProfileDetailsCard } from "@/components/settings/profile-edit/profile-details-card";
 import {
   McpPolicyCard,
@@ -121,48 +123,6 @@ function CreateProfileHeader({
   );
 }
 
-function CreateFormActions({
-  saving,
-  saveDisabled,
-  disabledReason,
-  onSave,
-}: {
-  saving: boolean;
-  saveDisabled: boolean;
-  disabledReason: string | null;
-  onSave: () => void;
-}) {
-  const router = useRouter();
-  const createButton = (
-    <Button onClick={onSave} disabled={saveDisabled} className="cursor-pointer">
-      {saving ? "Creating..." : "Create Profile"}
-    </Button>
-  );
-  return (
-    <div className="flex items-center justify-end gap-2">
-      <Button
-        variant="outline"
-        onClick={() => router.push(EXECUTORS_ROUTE)}
-        className="cursor-pointer"
-      >
-        Cancel
-      </Button>
-      {disabledReason ? (
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <span className="inline-flex" data-testid="create-profile-disabled-tooltip">
-              {createButton}
-            </span>
-          </TooltipTrigger>
-          <TooltipContent>{disabledReason}</TooltipContent>
-        </Tooltip>
-      ) : (
-        createButton
-      )}
-    </div>
-  );
-}
-
 type BuildProfileConfigInput = {
   isRemote: boolean;
   isSprites: boolean;
@@ -413,61 +373,34 @@ function useCreateProfileFormState(executorType: ExecutorType) {
   };
 }
 
-function useCreateProfileSave(
-  form: ReturnType<typeof useCreateProfileFormState>,
-  executorId: string,
-) {
+function useCreateProfileSave(executorId: string) {
   const router = useRouter();
   const executors = useAppStore((state) => state.executors.items);
   const setExecutors = useAppStore((state) => state.setExecutors);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const handleSave = useCallback(async () => {
-    if (!form.name.trim() || form.mcpPolicyError) return;
-    if (form.isDocker && !form.dockerImageBuilt) {
-      setError("Build this Docker image before creating the profile.");
-      return;
-    }
-    if (form.isSprites && !form.spritesSecretId) {
-      setError("Sprites API key is required.");
-      return;
-    }
-    setSaving(true);
-    setError(null);
-    try {
-      const profile = await createExecutorProfile(executorId, {
-        name: form.name.trim(),
-        mcp_policy: form.mcpPolicy || undefined,
-        config: buildProfileConfig({
-          isRemote: form.isRemote,
-          isSprites: form.isSprites,
-          isDocker: form.isDocker,
-          networkPolicyRules: form.networkPolicyRules,
-          remoteCredentials: form.remoteCredentials,
-          agentEnvVars: form.agentEnvVars,
-          gitIdentityMode: form.gitIdentityMode,
-          localGitIdentity: form.localGitIdentity,
-          gitUserName: form.gitUserName,
-          gitUserEmail: form.gitUserEmail,
-          dockerfile: form.dockerfile,
-          imageTag: form.imageTag,
-        }),
-        prepare_script: form.prepareScript,
-        cleanup_script: form.cleanupScript,
-        env_vars: form.buildEnvVars(),
-      });
-      setExecutors(
-        executors.map((e: Executor) =>
-          e.id === executorId ? { ...e, profiles: [...(e.profiles ?? []), profile] } : e,
-        ),
-      );
-      router.push(`/settings/executors/${profile.id}`);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to create profile");
-      setSaving(false);
-    }
-  }, [form, executorId, executors, setExecutors, router]);
+  const handleSave = useCallback(
+    async (payload: ReturnType<typeof buildCreateProfilePayload>) => {
+      setSaving(true);
+      setError(null);
+      try {
+        const profile = await createExecutorProfile(executorId, payload);
+        setExecutors(
+          executors.map((e: Executor) =>
+            e.id === executorId ? { ...e, profiles: [...(e.profiles ?? []), profile] } : e,
+          ),
+        );
+        runWithNavigationBlockerBypassed(() => router.push(`/settings/executors/${profile.id}`));
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to create profile");
+        throw err;
+      } finally {
+        setSaving(false);
+      }
+    },
+    [executorId, executors, setExecutors, router],
+  );
 
   return { saving, error, handleSave };
 }
@@ -483,10 +416,11 @@ function CreateProfileSections({
 }) {
   return (
     <>
-      <ProfileDetailsCard name={form.name} onNameChange={form.setName} />
+      <ProfileDetailsCard name={form.name} baselineName="" onNameChange={form.setName} />
       {form.isSprites && (
         <SpritesApiKeyCard
           secretId={form.spritesSecretId}
+          baselineSecretId={null}
           onSecretIdChange={form.setSpritesSecretId}
           secrets={secrets}
         />
@@ -494,8 +428,10 @@ function CreateProfileSections({
       {form.isDocker && (
         <DockerfileBuildCard
           dockerfile={form.dockerfile}
+          baselineDockerfile=""
           onDockerfileChange={form.setDockerfile}
           imageTag={form.imageTag}
+          baselineImageTag=""
           onImageTagChange={form.setImageTag}
           onBuildSuccess={form.recordDockerBuildSuccess}
         />
@@ -504,14 +440,19 @@ function CreateProfileSections({
         <RemoteCredentialsCard
           isRemote={form.isRemote}
           selectedIds={form.remoteCredentials}
+          baselineSelectedIds={[]}
           onChange={form.setRemoteCredentials}
           agentEnvVars={form.agentEnvVars}
+          baselineAgentEnvVars={{}}
           onAgentEnvVarChange={form.handleAgentEnvVarChange}
           secrets={secrets}
           gitIdentityMode={form.gitIdentityMode}
+          baselineGitIdentityMode="override"
           onGitIdentityModeChange={form.setGitIdentityMode}
           gitUserName={form.gitUserName}
           gitUserEmail={form.gitUserEmail}
+          baselineGitUserName=""
+          baselineGitUserEmail=""
           onGitUserNameChange={form.setGitUserName}
           onGitUserEmailChange={form.setGitUserEmail}
           localGitIdentity={form.localGitIdentity}
@@ -520,11 +461,13 @@ function CreateProfileSections({
       {form.isSprites && (
         <NetworkPoliciesCard
           rules={form.networkPolicyRules}
+          baselineRules={[]}
           onRulesChange={form.setNetworkPolicyRules}
         />
       )}
       <EnvVarsCard
         rows={form.envVarRows}
+        baselineRows={[]}
         secrets={secrets}
         onAdd={form.addEnvVar}
         onUpdate={form.updateEnvVar}
@@ -534,6 +477,7 @@ function CreateProfileSections({
         title="Prepare Script"
         description={form.prepareDesc}
         value={form.prepareScript}
+        baselineValue=""
         onChange={form.setPrepareScript}
         height="300px"
         placeholders={form.placeholders}
@@ -544,6 +488,7 @@ function CreateProfileSections({
           title="Cleanup Script"
           description="Runs after the agent session ends for cleanup tasks."
           value={form.cleanupScript}
+          baselineValue=""
           onChange={form.setCleanupScript}
           height="200px"
           placeholders={form.placeholders}
@@ -552,6 +497,7 @@ function CreateProfileSections({
       )}
       <McpPolicyCard
         mcpPolicy={form.mcpPolicy}
+        baselinePolicy=""
         mcpPolicyError={form.mcpPolicyError}
         onPolicyChange={form.setMcpPolicy}
       />
@@ -576,6 +522,30 @@ function getCreateDisabledReason(
   return null;
 }
 
+function buildCreateProfilePayload(form: ReturnType<typeof useCreateProfileFormState>) {
+  return {
+    name: form.name.trim(),
+    mcp_policy: form.mcpPolicy || undefined,
+    config: buildProfileConfig({
+      isRemote: form.isRemote,
+      isSprites: form.isSprites,
+      isDocker: form.isDocker,
+      networkPolicyRules: form.networkPolicyRules,
+      remoteCredentials: form.remoteCredentials,
+      agentEnvVars: form.agentEnvVars,
+      gitIdentityMode: form.gitIdentityMode,
+      localGitIdentity: form.localGitIdentity,
+      gitUserName: form.gitUserName,
+      gitUserEmail: form.gitUserEmail,
+      dockerfile: form.dockerfile,
+      imageTag: form.imageTag,
+    }),
+    prepare_script: form.prepareScript,
+    cleanup_script: form.cleanupScript,
+    env_vars: form.buildEnvVars(),
+  };
+}
+
 function CreateProfileForm({
   executorType,
   typeInfo,
@@ -585,9 +555,20 @@ function CreateProfileForm({
 }) {
   const { items: secrets } = useSecrets();
   const form = useCreateProfileFormState(executorType);
-  const { saving, error, handleSave } = useCreateProfileSave(form, typeInfo.executorId);
+  const { saving, error, handleSave } = useCreateProfileSave(typeInfo.executorId);
   const spritesTokenMissing = form.isSprites && !form.spritesSecretId;
   const disabledReason = getCreateDisabledReason(form, spritesTokenMissing, saving);
+  const savePayload = buildCreateProfilePayload(form);
+  const saveRevision = serializeSettingsRevision(savePayload);
+  useSettingsSaveContributor({
+    id: `executor-profile:new:${typeInfo.executorId}`,
+    revision: saveRevision,
+    isDirty: true,
+    canSave: !disabledReason,
+    invalidReason: disabledReason ?? undefined,
+    save: () => handleSave(savePayload),
+    discard: () => undefined,
+  });
 
   return (
     <div className="space-y-8">
@@ -596,17 +577,13 @@ function CreateProfileForm({
         label={typeInfo.label}
         description={typeInfo.description}
       />
-      <CreateProfileSections executorType={executorType} form={form} secrets={secrets} />
+      <fieldset disabled={saving} className="contents">
+        <CreateProfileSections executorType={executorType} form={form} secrets={secrets} />
+      </fieldset>
       {spritesTokenMissing && (
         <p className="text-sm text-destructive">Sprites API key is required.</p>
       )}
       {error && <p className="text-sm text-destructive">{error}</p>}
-      <CreateFormActions
-        saving={saving}
-        saveDisabled={Boolean(disabledReason)}
-        disabledReason={disabledReason}
-        onSave={handleSave}
-      />
     </div>
   );
 }
diff --git a/apps/web/app/settings/executors/ssh/[executorId]/page.tsx b/apps/web/app/settings/executors/ssh/[executorId]/page.tsx
index 226d24b82e..c9b202577b 100644
--- a/apps/web/app/settings/executors/ssh/[executorId]/page.tsx
+++ b/apps/web/app/settings/executors/ssh/[executorId]/page.tsx
@@ -110,6 +110,7 @@ function SSHExecutorView({
         key={`${executor.id}:${executor.config?.ssh_host_fingerprint ?? "none"}`}
         initial={initial}
         onSave={handleSave}
+        coordinatedSaveId={`ssh-executor:${executor.id}`}
         runningSessionCount={sessionCount}
       />
       <SSHSessionsCard executorId={executor.id} />
diff --git a/apps/web/app/settings/general/task-actions/page.tsx b/apps/web/app/settings/general/task-actions/page.tsx
new file mode 100644
index 0000000000..cf768606e1
--- /dev/null
+++ b/apps/web/app/settings/general/task-actions/page.tsx
@@ -0,0 +1,13 @@
+import { TaskActionsSettings } from "@/components/settings/general-settings";
+import { StateProvider } from "@/components/state-provider";
+import { getUserSettingsInitialState } from "../user-settings-state";
+
+export default async function GeneralTaskActionsPage() {
+  const initialState = await getUserSettingsInitialState();
+
+  return (
+    <StateProvider initialState={initialState}>
+      <TaskActionsSettings />
+    </StateProvider>
+  );
+}
diff --git a/apps/web/app/settings/plugins/page.test.tsx b/apps/web/app/settings/plugins/page.test.tsx
index 4290480889..5501d4f928 100644
--- a/apps/web/app/settings/plugins/page.test.tsx
+++ b/apps/web/app/settings/plugins/page.test.tsx
@@ -1,6 +1,13 @@
-import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import {
+  cleanup,
+  fireEvent,
+  render as renderWithoutSettingsProvider,
+  screen,
+} from "@testing-library/react";
+import type { ReactElement } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { toast } from "sonner";
+import { SettingsSaveProvider } from "@/components/settings/settings-save-provider";
 import type { PluginRecord, SyncResult } from "@/lib/types/plugins";
 
 vi.mock("sonner", () => ({ toast: { success: vi.fn(), error: vi.fn(), warning: vi.fn() } }));
@@ -90,6 +97,10 @@ const INSTALL_TRIGGER_TESTID = "install-plugin-trigger";
 const NEW_PLUGIN_URL = "https://example.test/new-plugin-1.0.0.tar.gz";
 const UPLOAD_FILENAME = "new-plugin-1.0.0.tar.gz";
 
+function render(element: ReactElement) {
+  return renderWithoutSettingsProvider(<SettingsSaveProvider>{element}</SettingsSaveProvider>);
+}
+
 function activePlugin(overrides: Partial<PluginRecord> = {}): PluginRecord {
   return {
     id: PLUGIN_ID,
diff --git a/apps/web/app/settings/workspace/use-workflow-creation.test.ts b/apps/web/app/settings/workspace/use-workflow-creation.test.ts
new file mode 100644
index 0000000000..640866800a
--- /dev/null
+++ b/apps/web/app/settings/workspace/use-workflow-creation.test.ts
@@ -0,0 +1,87 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { Workflow, WorkflowTemplate, Workspace } from "@/lib/types/http";
+import { createDraftWorkflowSteps, useWorkflowCreation } from "./use-workflow-creation";
+
+const workspace = { id: "workspace-1", name: "Workspace" } as Workspace;
+const template = {
+  id: "template-1",
+  name: "Template",
+  description: "Template description",
+  default_steps: [{ name: "Template Step", position: 0, color: "bg-blue-500" }],
+} as WorkflowTemplate;
+
+function renderCreationHook(workflowTemplates: WorkflowTemplate[] = []) {
+  let workflows: Workflow[] = [];
+  const setWorkflowItems = vi.fn((update: React.SetStateAction<Workflow[]>) => {
+    workflows = typeof update === "function" ? update(workflows) : update;
+  });
+  const view = renderHook(() =>
+    useWorkflowCreation({ workspace, workflowTemplates, setWorkflowItems }),
+  );
+  return { ...view, setWorkflowItems, getWorkflows: () => workflows };
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  vi.spyOn(crypto, "randomUUID").mockReturnValue("00000000-0000-4000-8000-000000000001");
+});
+
+describe("useWorkflowCreation", () => {
+  it("remaps template transition references to client step identities", () => {
+    const steps = createDraftWorkflowSteps("temp-workflow-1", [
+      {
+        id: "todo",
+        name: "Todo",
+        position: 0,
+        events: {
+          on_turn_complete: [{ type: "move_to_step", config: { step_id: "done" } }],
+        },
+      },
+      { id: "done", name: "Done", position: 1, pull_from_step_id: "todo" },
+    ]);
+
+    expect(steps[0].events).toEqual({
+      on_turn_complete: [
+        {
+          type: "move_to_step",
+          config: { step_id: "temp-template-step-temp-workflow-1-1" },
+        },
+      ],
+    });
+    expect(steps[1].pull_from_step_id).toBe("temp-template-step-temp-workflow-1-0");
+  });
+
+  it("creates a custom workflow and default steps locally", () => {
+    const { result, getWorkflows } = renderCreationHook();
+
+    act(() => {
+      result.current.setNewWorkflowName("Custom Workflow");
+      result.current.setSelectedTemplateId(null);
+    });
+    act(() => result.current.handleCreateWorkflow());
+
+    const [workflow] = getWorkflows();
+    expect(workflow).toMatchObject({ name: "Custom Workflow" });
+    expect(workflow.id).toMatch(/^temp-workflow-/);
+    expect(result.current.initialStepsByWorkflowId.get(workflow.id)).toHaveLength(4);
+  });
+
+  it("uses template fields without persisting from the dialog", () => {
+    const { result, getWorkflows } = renderCreationHook([template]);
+
+    act(() => result.current.setSelectedTemplateId(template.id));
+    act(() => result.current.handleCreateWorkflow());
+
+    const [workflow] = getWorkflows();
+    expect(workflow).toMatchObject({
+      name: "Template",
+      description: "Template description",
+      workflow_template_id: template.id,
+    });
+    expect(result.current.initialStepsByWorkflowId.get(workflow.id)?.[0]).toMatchObject({
+      name: "Template Step",
+      color: "bg-blue-500",
+    });
+  });
+});
diff --git a/apps/web/app/settings/workspace/use-workflow-creation.ts b/apps/web/app/settings/workspace/use-workflow-creation.ts
new file mode 100644
index 0000000000..57fa60b04a
--- /dev/null
+++ b/apps/web/app/settings/workspace/use-workflow-creation.ts
@@ -0,0 +1,164 @@
+"use client";
+
+import { useState } from "react";
+import {
+  workflowId as toWorkflowId,
+  workspaceId as toWorkspaceId,
+  type StepDefinition,
+  type Workflow,
+  type WorkflowStep,
+  type WorkflowTemplate,
+  type Workspace,
+} from "@/lib/types/http";
+
+export const DEFAULT_CUSTOM_STEPS: StepDefinition[] = [
+  { name: "Todo", position: 0, color: "bg-slate-500" },
+  { name: "In Progress", position: 1, color: "bg-blue-500" },
+  { name: "Review", position: 2, color: "bg-purple-500" },
+  { name: "Done", position: 3, color: "bg-green-500" },
+];
+
+type WorkflowCreationArgs = {
+  workspace: Workspace | null;
+  workflowTemplates: WorkflowTemplate[];
+  setWorkflowItems: React.Dispatch<React.SetStateAction<Workflow[]>>;
+};
+
+function newClientId(prefix: string): string {
+  return `${prefix}-${crypto.randomUUID()}`;
+}
+
+function remapStepReferences<T>(value: T, mappings: Map<string, string>): T {
+  if (Array.isArray(value)) return value.map((item) => remapStepReferences(item, mappings)) as T;
+  if (!value || typeof value !== "object") return value;
+  return Object.fromEntries(
+    Object.entries(value).map(([key, item]) => [
+      key,
+      key === "step_id" && typeof item === "string"
+        ? (mappings.get(item) ?? item)
+        : remapStepReferences(item, mappings),
+    ]),
+  ) as T;
+}
+
+function toDraftStep(
+  tempWorkflowId: string,
+  definition: StepDefinition,
+  definitionIds: Map<string, string>,
+): WorkflowStep {
+  return {
+    id:
+      definitionIds.get(definition.id ?? "") ??
+      `temp-template-step-${tempWorkflowId}-${definition.position}`,
+    workflow_id: toWorkflowId(tempWorkflowId),
+    name: definition.name,
+    position: definition.position,
+    color: definition.color ?? "bg-slate-500",
+    prompt: definition.prompt,
+    events: remapStepReferences(definition.events, definitionIds),
+    is_start_step: definition.is_start_step,
+    show_in_command_panel: definition.show_in_command_panel,
+    agent_profile_id: definition.agent_profile_id,
+    wip_limit: definition.wip_limit,
+    pull_from_step_id: definition.pull_from_step_id
+      ? (definitionIds.get(definition.pull_from_step_id) ?? definition.pull_from_step_id)
+      : definition.pull_from_step_id,
+    allow_manual_move: true,
+    created_at: "",
+    updated_at: "",
+  };
+}
+
+export function createDraftWorkflowSteps(
+  tempWorkflowId: string,
+  definitions: StepDefinition[],
+): WorkflowStep[] {
+  const definitionIds = new Map(
+    definitions.flatMap((definition) =>
+      definition.id
+        ? [[definition.id, `temp-template-step-${tempWorkflowId}-${definition.position}`] as const]
+        : [],
+    ),
+  );
+  return definitions.map((definition) => toDraftStep(tempWorkflowId, definition, definitionIds));
+}
+
+export function useWorkflowCreation({
+  workspace,
+  workflowTemplates,
+  setWorkflowItems,
+}: WorkflowCreationArgs) {
+  const [isAddWorkflowDialogOpen, setIsAddWorkflowDialogOpen] = useState(false);
+  const [newWorkflowName, setNewWorkflowName] = useState("");
+  const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null);
+  const [initialStepsByWorkflowId, setInitialStepsByWorkflowId] = useState(
+    () => new Map<string, WorkflowStep[]>(),
+  );
+
+  const handleOpenAddWorkflowDialog = () => {
+    setNewWorkflowName("");
+    setSelectedTemplateId(workflowTemplates.length > 0 ? workflowTemplates[0].id : null);
+    setIsAddWorkflowDialogOpen(true);
+  };
+
+  const handleCreateWorkflow = () => {
+    if (!workspace) return;
+    const template = selectedTemplateId
+      ? workflowTemplates.find((item) => item.id === selectedTemplateId)
+      : undefined;
+    const tempId = newClientId("temp-workflow");
+    const workflow: Workflow = {
+      id: toWorkflowId(tempId),
+      workspace_id: toWorkspaceId(workspace.id),
+      name: newWorkflowName.trim() || template?.name || "New Workflow",
+      description: template?.description,
+      workflow_template_id: template?.id,
+      created_at: "",
+      updated_at: "",
+    };
+    const definitions = template?.default_steps?.length
+      ? template.default_steps
+      : DEFAULT_CUSTOM_STEPS;
+    const steps = createDraftWorkflowSteps(tempId, definitions);
+
+    setInitialStepsByWorkflowId((previous) => new Map(previous).set(tempId, steps));
+    setWorkflowItems((previous) => [workflow, ...previous]);
+    setIsAddWorkflowDialogOpen(false);
+  };
+
+  const forgetInitialSteps = (workflowId: string) => {
+    setInitialStepsByWorkflowId((previous) => {
+      const next = new Map(previous);
+      next.delete(workflowId);
+      return next;
+    });
+  };
+
+  const remapInitialSteps = (
+    clientWorkflowId: string,
+    persistedWorkflowId: string,
+    steps: WorkflowStep[],
+  ) => {
+    setInitialStepsByWorkflowId((previous) => {
+      const next = new Map(previous);
+      next.delete(clientWorkflowId);
+      next.set(persistedWorkflowId, steps);
+      return next;
+    });
+  };
+
+  return {
+    isAddWorkflowDialogOpen,
+    setIsAddWorkflowDialogOpen,
+    newWorkflowName,
+    setNewWorkflowName,
+    selectedTemplateId,
+    setSelectedTemplateId,
+    createWorkflowLoading: false,
+    initialStepsByWorkflowId,
+    handleOpenAddWorkflowDialog,
+    handleCreateWorkflow,
+    forgetInitialSteps,
+    remapInitialSteps,
+  };
+}
diff --git a/apps/web/app/settings/workspace/workspace-edit-client.tsx b/apps/web/app/settings/workspace/workspace-edit-client.tsx
index 35fadf2dd3..754d988c83 100644
--- a/apps/web/app/settings/workspace/workspace-edit-client.tsx
+++ b/apps/web/app/settings/workspace/workspace-edit-client.tsx
@@ -3,6 +3,7 @@
 import { useState } from "react";
 import Link from "@/components/routing/app-link";
 import { useRouter } from "@/lib/routing/client-router";
+import { runWithNavigationBlockerBypassed } from "@/lib/routing/navigation-guard";
 import { IconGitBranch, IconLayoutColumns, IconTrash } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
 import { Input } from "@kandev/ui/input";
@@ -26,7 +27,8 @@ type Workspace = WorkspaceState["items"][number];
 import { useRequest } from "@/lib/http/use-request";
 import { useToast } from "@/components/toast-provider";
 import { useAppStore } from "@/components/state-provider";
-import { UnsavedChangesBadge, UnsavedSaveButton } from "@/components/settings/unsaved-indicator";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
 
 type WorkspaceEditClientProps = {
   workspaceId: string;
@@ -62,6 +64,7 @@ type WorkspaceEditFormProps = {
 type SelectFieldProps = {
   label: string;
   value: string;
+  isDirty: boolean;
   onChange: (v: string) => void;
   options: { id: string; name: string }[];
   emptyLabel: string;
@@ -71,6 +74,7 @@ type SelectFieldProps = {
 function SelectField({
   label,
   value,
+  isDirty,
   onChange,
   options,
   emptyLabel,
@@ -80,7 +84,7 @@ function SelectField({
     <div className="space-y-2">
       <Label>{label}</Label>
       <Select value={value || "none"} onValueChange={(v) => onChange(v === "none" ? "" : v)}>
-        <SelectTrigger className="w-full">
+        <SelectTrigger className="w-full" data-settings-dirty={isDirty}>
           <SelectValue placeholder={`Select ${label.toLowerCase()}`} />
         </SelectTrigger>
         <SelectContent>
@@ -102,35 +106,33 @@ function SelectField({
 }
 
 type WorkspaceSettingsCardProps = {
-  isDirty: boolean;
   workspaceNameDraft: string;
+  nameIsDirty: boolean;
   onNameChange: (value: string) => void;
   defaultExecutorId: string;
+  executorIsDirty: boolean;
   onExecutorChange: (value: string) => void;
   activeExecutors: Executor[];
   executorsEmpty: boolean;
   defaultAgentProfileId: string;
+  agentProfileIsDirty: boolean;
   onAgentProfileChange: (value: string) => void;
   agentProfiles: AgentProfileOption[];
-  isLoading: boolean;
-  saveStatus: "idle" | "loading" | "success" | "error";
-  onSave: () => void;
 };
 
 function WorkspaceSettingsCard({
-  isDirty,
   workspaceNameDraft,
+  nameIsDirty,
   onNameChange,
   defaultExecutorId,
+  executorIsDirty,
   onExecutorChange,
   activeExecutors,
   executorsEmpty,
   defaultAgentProfileId,
+  agentProfileIsDirty,
   onAgentProfileChange,
   agentProfiles,
-  isLoading,
-  saveStatus,
-  onSave,
 }: WorkspaceSettingsCardProps) {
   const executorOptions = activeExecutors.map((e: Executor) => ({ id: e.id, name: e.name }));
   const profileOptions = agentProfiles.map((p: AgentProfileOption) => ({
@@ -138,12 +140,9 @@ function WorkspaceSettingsCard({
     name: p.label,
   }));
   return (
-    <Card>
+    <SettingsCard isDirty={nameIsDirty || executorIsDirty || agentProfileIsDirty}>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <span>Workspace Settings</span>
-          {isDirty && <UnsavedChangesBadge />}
-        </CardTitle>
+        <CardTitle>Workspace Settings</CardTitle>
       </CardHeader>
       <CardContent>
         <div className="space-y-4">
@@ -152,12 +151,14 @@ function WorkspaceSettingsCard({
             <Input
               id="workspace-name"
               value={workspaceNameDraft}
+              data-settings-dirty={nameIsDirty}
               onChange={(e) => onNameChange(e.target.value)}
             />
           </div>
           <SelectField
             label="Default Executor"
             value={defaultExecutorId}
+            isDirty={executorIsDirty}
             onChange={onExecutorChange}
             options={executorsEmpty ? [] : executorOptions}
             emptyLabel="No executors available"
@@ -166,22 +167,15 @@ function WorkspaceSettingsCard({
           <SelectField
             label="Default Agent Profile"
             value={defaultAgentProfileId}
+            isDirty={agentProfileIsDirty}
             onChange={onAgentProfileChange}
             options={profileOptions}
             emptyLabel="No agent profiles available"
             emptyValue="empty-agent-profiles"
           />
-          <div className="flex justify-end pt-2">
-            <UnsavedSaveButton
-              isDirty={isDirty}
-              isLoading={isLoading}
-              status={saveStatus}
-              onClick={onSave}
-            />
-          </div>
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
@@ -391,6 +385,7 @@ function buildSaveHandler({
         description: error instanceof Error ? error.message : "Request failed",
         variant: "error",
       });
+      throw error;
     }
   };
 }
@@ -444,7 +439,7 @@ function useWorkspaceEditForm(workspace: Workspace) {
     try {
       await deleteWorkspaceRequest.run(currentWorkspace.id, currentWorkspace.name);
       setWorkspaces(workspaces.filter((ws: Workspace) => ws.id !== currentWorkspace.id));
-      router.push("/settings/workspace");
+      runWithNavigationBlockerBypassed(() => router.push("/settings/workspace"));
     } catch (error) {
       toast({
         title: "Failed to delete workspace",
@@ -460,6 +455,12 @@ function useWorkspaceEditForm(workspace: Workspace) {
     if (!open) setDeleteConfirmText("");
   };
 
+  const handleDiscard = () => {
+    setWorkspaceNameDraft(savedState.name);
+    setDefaultExecutorId(savedState.executorId);
+    setDefaultAgentProfileId(savedState.agentProfileId);
+  };
+
   return {
     currentWorkspace,
     workspaceNameDraft,
@@ -475,9 +476,10 @@ function useWorkspaceEditForm(workspace: Workspace) {
     activeExecutors,
     executors,
     agentProfiles,
+    savedState,
     isDirty,
-    saveWorkspaceRequest,
     handleSave,
+    handleDiscard,
     handleDeleteWorkspace,
   };
 }
@@ -498,12 +500,27 @@ function WorkspaceEditForm({ workspace }: WorkspaceEditFormProps) {
     activeExecutors,
     executors,
     agentProfiles,
+    savedState,
     isDirty,
-    saveWorkspaceRequest,
     handleSave,
+    handleDiscard,
     handleDeleteWorkspace,
   } = useWorkspaceEditForm(workspace);
 
+  useSettingsSaveContributor({
+    id: `workspace:${currentWorkspace.id}`,
+    revision: JSON.stringify({
+      workspaceNameDraft,
+      defaultExecutorId,
+      defaultAgentProfileId,
+    }),
+    isDirty,
+    canSave: Boolean(workspaceNameDraft.trim()),
+    invalidReason: workspaceNameDraft.trim() ? undefined : "Workspace name is required.",
+    save: handleSave,
+    discard: handleDiscard,
+  });
+
   return (
     <div className="space-y-8">
       <div>
@@ -514,19 +531,18 @@ function WorkspaceEditForm({ workspace }: WorkspaceEditFormProps) {
       </div>
       <Separator />
       <WorkspaceSettingsCard
-        isDirty={isDirty}
         workspaceNameDraft={workspaceNameDraft}
+        nameIsDirty={workspaceNameDraft.trim() !== savedState.name}
         onNameChange={setWorkspaceNameDraft}
         defaultExecutorId={defaultExecutorId}
+        executorIsDirty={defaultExecutorId !== savedState.executorId}
         onExecutorChange={setDefaultExecutorId}
         activeExecutors={activeExecutors}
         executorsEmpty={executors.length === 0}
         defaultAgentProfileId={defaultAgentProfileId}
+        agentProfileIsDirty={defaultAgentProfileId !== savedState.agentProfileId}
         onAgentProfileChange={setDefaultAgentProfileId}
         agentProfiles={agentProfiles}
-        isLoading={saveWorkspaceRequest.isLoading}
-        saveStatus={saveWorkspaceRequest.status}
-        onSave={handleSave}
       />
       <WorkspaceLinksCard workspaceId={currentWorkspace.id} />
       <Separator />
diff --git a/apps/web/app/settings/workspace/workspace-repositories-client.tsx b/apps/web/app/settings/workspace/workspace-repositories-client.tsx
index 7b0b169210..bf1a6dfb40 100644
--- a/apps/web/app/settings/workspace/workspace-repositories-client.tsx
+++ b/apps/web/app/settings/workspace/workspace-repositories-client.tsx
@@ -38,6 +38,7 @@ import {
   areRepositoryScriptsDirty,
   cloneRepository,
   isRepositoryDirty,
+  mergeSavedRepositoryDraft,
   type RepositoryWithScripts,
 } from "@/app/settings/workspace/workspace-repositories-dirty";
 import { defaultWorktreeBranchTemplate } from "@/lib/worktree-branch-template";
@@ -127,7 +128,11 @@ async function saveNewRepository(
     ),
   );
   const nextRepo: RepositoryWithScripts = { ...created, scripts };
-  setRepositoryItems((prev) => prev.map((item) => (item.id === repoId ? nextRepo : item)));
+  setRepositoryItems((prev) =>
+    prev.map((item) =>
+      item.id === repoId ? mergeSavedRepositoryDraft(item, repo, nextRepo) : item,
+    ),
+  );
   setSavedRepositoryItems((prev) => [cloneRepository(nextRepo), ...prev]);
 }
 
@@ -189,7 +194,11 @@ async function saveExistingRepository({
     }),
   );
   const nextRepo: RepositoryWithScripts = { ...updated, scripts: nextScripts };
-  setRepositoryItems((prev) => prev.map((item) => (item.id === repoId ? nextRepo : item)));
+  setRepositoryItems((prev) =>
+    prev.map((item) =>
+      item.id === repoId ? mergeSavedRepositoryDraft(item, repo, nextRepo) : item,
+    ),
+  );
   setSavedRepositoryItems((prev) =>
     prev.some((item) => item.id === repoId)
       ? prev.map((item) => (item.id === repoId ? cloneRepository(nextRepo) : item))
@@ -554,6 +563,7 @@ export function WorkspaceRepositoriesClient({
             <RepositoryCard
               key={repo.id}
               repository={repo}
+              savedRepository={savedRepositoriesById.get(repo.id)}
               isRepositoryDirty={isRepositoryDirty(repo, savedRepositoriesById.get(repo.id))}
               areScriptsDirty={areRepositoryScriptsDirty(repo, savedRepositoriesById.get(repo.id))}
               autoOpen={Boolean(repo.__autoOpen)}
diff --git a/apps/web/app/settings/workspace/workspace-repositories-dirty.test.ts b/apps/web/app/settings/workspace/workspace-repositories-dirty.test.ts
index 178a38eb33..48caea6678 100644
--- a/apps/web/app/settings/workspace/workspace-repositories-dirty.test.ts
+++ b/apps/web/app/settings/workspace/workspace-repositories-dirty.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest";
 import {
   isRepositoryDirty,
+  mergeSavedRepositoryDraft,
   type RepositoryWithScripts,
 } from "@/app/settings/workspace/workspace-repositories-dirty";
 import { repositoryId as toRepositoryId, workspaceId as toWorkspaceId } from "@/lib/types/http";
@@ -74,3 +75,47 @@ describe("isRepositoryDirty", () => {
     expect(isRepositoryDirty(repo, saved)).toBe(true);
   });
 });
+
+describe("mergeSavedRepositoryDraft", () => {
+  it("preserves client-only row state when the submitted draft is unchanged", () => {
+    const current = { ...makeRepo(), __autoOpen: true };
+    const saved = makeRepo({ name: "saved name" });
+
+    const merged = mergeSavedRepositoryDraft(current, current, saved);
+
+    expect((merged as RepositoryWithScripts & { __autoOpen?: boolean }).__autoOpen).toBe(true);
+    expect(merged.name).toBe("saved name");
+  });
+
+  it("remaps created script IDs while preserving edits made during save", () => {
+    const submittedScript = makeScript("temp-script-1", "submitted");
+    const submitted = makeRepo({ scripts: [submittedScript] });
+    const current = makeRepo({
+      name: "newer repository name",
+      scripts: [{ ...submittedScript, command: "newer command" }],
+    });
+    const saved = makeRepo({
+      id: toRepositoryId("persisted-repo"),
+      scripts: [makeScript("persisted-script", "submitted")],
+    });
+
+    const merged = mergeSavedRepositoryDraft(current, submitted, saved);
+
+    expect(merged.id).toBe(toRepositoryId("persisted-repo"));
+    expect(merged.name).toBe("newer repository name");
+    expect(merged.scripts[0].id).toBe("persisted-script");
+    expect(merged.scripts[0].command).toBe("newer command");
+  });
+});
+
+function makeScript(id: string, command: string) {
+  return {
+    id,
+    repository_id: toRepositoryId("repo-1"),
+    name: "script",
+    command,
+    position: 0,
+    created_at: "",
+    updated_at: "",
+  };
+}
diff --git a/apps/web/app/settings/workspace/workspace-repositories-dirty.ts b/apps/web/app/settings/workspace/workspace-repositories-dirty.ts
index d3a3c4e2e7..47e6106b8d 100644
--- a/apps/web/app/settings/workspace/workspace-repositories-dirty.ts
+++ b/apps/web/app/settings/workspace/workspace-repositories-dirty.ts
@@ -28,6 +28,31 @@ export function cloneRepository(repo: RepositoryWithScripts): RepositoryWithScri
   return { ...repo, scripts: repo.scripts.map((script) => ({ ...script })) };
 }
 
+export function mergeSavedRepositoryDraft(
+  current: RepositoryWithScripts,
+  submitted: RepositoryWithScripts,
+  saved: RepositoryWithScripts,
+): RepositoryWithScripts {
+  if (!isRepositoryDirty(current, submitted) && !areRepositoryScriptsDirty(current, submitted)) {
+    return { ...current, ...saved };
+  }
+  const scripts = current.scripts.map((currentScript) => {
+    const submittedIndex = submitted.scripts.findIndex((script) => script.id === currentScript.id);
+    if (submittedIndex < 0) return currentScript;
+    const submittedScript = submitted.scripts[submittedIndex];
+    const savedScript = saved.scripts[submittedIndex];
+    if (!savedScript) return currentScript;
+    const unchanged =
+      currentScript.name === submittedScript.name &&
+      currentScript.command === submittedScript.command &&
+      currentScript.position === submittedScript.position;
+    return unchanged
+      ? savedScript
+      : { ...savedScript, ...currentScript, id: savedScript.id, repository_id: saved.id };
+  });
+  return { ...saved, ...current, id: saved.id, workspace_id: saved.workspace_id, scripts };
+}
+
 export function isRepositoryDirty(
   repo: RepositoryWithScripts,
   saved: RepositoryWithScripts | undefined,
diff --git a/apps/web/app/settings/workspace/workspace-workflows-client.tsx b/apps/web/app/settings/workspace/workspace-workflows-client.tsx
index 37020eacc6..0412d95137 100644
--- a/apps/web/app/settings/workspace/workspace-workflows-client.tsx
+++ b/apps/web/app/settings/workspace/workspace-workflows-client.tsx
@@ -25,22 +25,19 @@ import { SettingsSection } from "@/components/settings/settings-section";
 import { WorkflowCard } from "@/components/settings/workflow-card";
 import { WorkflowSectionActions } from "@/components/settings/workflow-section-actions";
 import { WorkflowSyncSection } from "@/components/settings/workflow-sync-section";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
 import { WorkflowExportDialog } from "@/components/settings/workflow-export-dialog";
 import { useToast } from "@/components/toast-provider";
 import { useWorkflowSettings } from "@/hooks/domains/settings/use-workflow-settings";
-import { generateUUID } from "@/lib/utils";
 import {
   deleteWorkflowAction,
-  updateWorkflowAction,
   exportAllWorkflowsAction,
   importWorkflowsAction,
   reorderWorkflowsAction,
 } from "@/app/actions/workspaces";
 import {
   agentProfileId as toAgentProfileId,
-  workflowId as toWorkflowId,
   type Workflow,
-  type StepDefinition,
   type WorkflowStep,
   type Workspace,
   type WorkflowTemplate,
@@ -49,6 +46,7 @@ import {
   CreateWorkflowDialog,
   ImportWorkflowsDialog,
 } from "@/app/settings/workspace/workspace-workflows-dialogs";
+import { useWorkflowCreation } from "@/app/settings/workspace/use-workflow-creation";
 import { WorkspaceNotFoundCard } from "@/app/settings/workspace/workspace-not-found-card";
 
 type WorkspaceWorkflowsClientProps = {
@@ -57,37 +55,25 @@ type WorkspaceWorkflowsClientProps = {
   workflowTemplates: WorkflowTemplate[];
 };
 
-const DEFAULT_CUSTOM_STEPS: StepDefinition[] = [
-  { name: "Todo", position: 0, color: "bg-slate-500" },
-  { name: "In Progress", position: 1, color: "bg-blue-500" },
-  { name: "Review", position: 2, color: "bg-purple-500" },
-  { name: "Done", position: 3, color: "bg-green-500" },
-];
+const TEMP_WORKFLOW_PREFIX = "temp-workflow-";
 
 type WorkflowActionsArgs = {
   workspace: Workspace | null;
   workflowItems: Workflow[];
+  savedWorkflowItems: Workflow[];
   workflowTemplates: WorkflowTemplate[];
   setWorkflowItems: React.Dispatch<React.SetStateAction<Workflow[]>>;
   setSavedWorkflowItems: React.Dispatch<React.SetStateAction<Workflow[]>>;
 };
 
-function buildWorkflowSteps(workflow: Workflow, definitions: StepDefinition[]): WorkflowStep[] {
-  return definitions.map((step, index) => ({
-    id: `temp-step-${workflow.id}-${index}`,
-    workflow_id: workflow.id,
-    name: step.name,
-    position: step.position ?? index,
-    color: step.color ?? "bg-slate-500",
-    prompt: step.prompt,
-    events: step.events,
-    is_start_step: step.is_start_step,
-    show_in_command_panel: step.show_in_command_panel,
-    allow_manual_move: true,
-    created_at: "",
-    updated_at: "",
-  }));
-}
+type WorkflowSavedParams = {
+  clientWorkflow: Workflow;
+  submittedWorkflow: Workflow;
+  savedWorkflow: Workflow;
+  currentSteps: WorkflowStep[];
+  savedSteps: WorkflowStep[];
+  finalizeIdentity: boolean;
+};
 
 function useWorkflowImportExport(
   workspace: Workspace | null,
@@ -106,9 +92,9 @@ function useWorkflowImportExport(
     if (!workspace) return;
     try {
       // Export only the workflows shown in this settings view (kanban-only —
-      // office workflows are filtered out upstream) and skip unsaved drafts.
+      // office workflows are filtered out upstream).
       // Workflow import/export is kanban-only by design (ADR-0004).
-      const exportIds = workflowItems.filter((wf) => !wf.id.startsWith("temp-")).map((wf) => wf.id);
+      const exportIds = workflowItems.map((wf) => wf.id);
       const yamlText = await exportAllWorkflowsAction(workspace.id, exportIds);
       setExportYaml(yamlText);
       setIsExportDialogOpen(true);
@@ -173,54 +159,33 @@ function useWorkflowImportExport(
   };
 }
 
-function brandWorkflowUpdates(updates: {
-  name?: string;
-  description?: string;
-  agent_profile_id?: string;
-}): Partial<Workflow> {
-  return {
-    ...(updates.name !== undefined ? { name: updates.name } : {}),
-    ...(updates.description !== undefined ? { description: updates.description } : {}),
-    ...(updates.agent_profile_id !== undefined
-      ? { agent_profile_id: toAgentProfileId(updates.agent_profile_id) }
-      : {}),
-  };
+function hasNewerWorkflowMetadata(current: Workflow, savedFrom: Workflow) {
+  return (
+    current.name !== savedFrom.name ||
+    current.description !== savedFrom.description ||
+    current.agent_profile_id !== savedFrom.agent_profile_id
+  );
+}
+
+function mergeSavedWorkflow(current: Workflow, submitted: Workflow, saved: Workflow): Workflow {
+  if (!hasNewerWorkflowMetadata(current, submitted)) return saved;
+  return { ...current, id: saved.id, workflow_template_id: saved.workflow_template_id };
 }
 
 function useWorkflowActions({
   workspace,
   workflowItems,
+  savedWorkflowItems,
   workflowTemplates,
   setWorkflowItems,
   setSavedWorkflowItems,
 }: WorkflowActionsArgs) {
-  const [isAddWorkflowDialogOpen, setIsAddWorkflowDialogOpen] = useState(false);
-  const [newWorkflowName, setNewWorkflowName] = useState("");
-  const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null);
-
-  const handleOpenAddWorkflowDialog = () => {
-    setNewWorkflowName("");
-    setSelectedTemplateId(workflowTemplates.length > 0 ? workflowTemplates[0].id : null);
-    setIsAddWorkflowDialogOpen(true);
-  };
-
-  const handleCreateWorkflow = () => {
-    if (!workspace) return;
-    const templateName = selectedTemplateId
-      ? (workflowTemplates.find((t) => t.id === selectedTemplateId)?.name ?? "New Workflow")
-      : "New Workflow";
-    const draftWorkflow: Workflow = {
-      id: toWorkflowId(`temp-${generateUUID()}`),
-      workspace_id: workspace.id,
-      name: newWorkflowName.trim() || templateName,
-      description: "",
-      workflow_template_id: selectedTemplateId,
-      created_at: "",
-      updated_at: "",
-    };
-    setWorkflowItems((prev) => [draftWorkflow, ...prev]);
-    setIsAddWorkflowDialogOpen(false);
-  };
+  const finalizedWorkflowIdsRef = useRef(new Map<string, string>());
+  const creation = useWorkflowCreation({
+    workspace,
+    workflowTemplates,
+    setWorkflowItems,
+  });
 
   const handleUpdateWorkflow = (
     workflowId: string,
@@ -243,76 +208,102 @@ function useWorkflowActions({
   };
 
   const handleDeleteWorkflow = async (workflowId: string) => {
-    if (workflowId.startsWith("temp-")) {
-      setWorkflowItems((prev) => prev.filter((wf) => wf.id !== workflowId));
-      return;
-    }
-    await deleteWorkflowAction(workflowId);
+    if (!workflowId.startsWith(TEMP_WORKFLOW_PREFIX)) await deleteWorkflowAction(workflowId);
+    creation.forgetInitialSteps(workflowId);
+    finalizedWorkflowIdsRef.current.delete(workflowId);
     setWorkflowItems((prev) => prev.filter((wf) => wf.id !== workflowId));
     setSavedWorkflowItems((prev) => prev.filter((wf) => wf.id !== workflowId));
   };
 
-  const handleWorkflowCreated = (tempId: string, created: Workflow) => {
-    setWorkflowItems((prev) => prev.map((item) => (item.id === tempId ? created : item)));
-    setSavedWorkflowItems((prev) => [{ ...created }, ...prev]);
-    // Note: No router.refresh() needed. Local state already has the correct workflow,
-    // and SSR will fetch fresh data on next navigation.
+  const handleWorkflowSaved = ({
+    clientWorkflow,
+    submittedWorkflow,
+    savedWorkflow,
+    currentSteps,
+    finalizeIdentity,
+  }: WorkflowSavedParams) => {
+    const isNew = clientWorkflow.id.startsWith(TEMP_WORKFLOW_PREFIX);
+    if (isNew && !finalizeIdentity) return;
+    if (isNew) finalizedWorkflowIdsRef.current.set(clientWorkflow.id, savedWorkflow.id);
+    setWorkflowItems((prev) =>
+      prev.map((item) =>
+        item.id === clientWorkflow.id
+          ? mergeSavedWorkflow(item, submittedWorkflow, savedWorkflow)
+          : item,
+      ),
+    );
+    setSavedWorkflowItems((previous) =>
+      alignSavedWorkflowsToDraftOrder(
+        workflowItems,
+        [...previous.filter((item) => item.id !== savedWorkflow.id), savedWorkflow],
+        finalizedWorkflowIdsRef.current,
+      ),
+    );
+    if (isNew) {
+      creation.remapInitialSteps(clientWorkflow.id, savedWorkflow.id, currentSteps);
+    }
   };
 
-  const handleSaveWorkflow = async (workflowId: string) => {
-    const workflow = workflowItems.find((item) => item.id === workflowId);
-    if (!workflow) return;
-    const updates: { name?: string; description?: string; agent_profile_id?: string } = {};
-    if (workflow.name.trim()) updates.name = workflow.name.trim();
-    updates.agent_profile_id = workflow.agent_profile_id ?? "";
-    if (Object.keys(updates).length) await updateWorkflowAction(workflowId, updates);
-    const branded = brandWorkflowUpdates(updates);
-    setWorkflowItems((prev) =>
-      prev.map((item) => (item.id === workflowId ? { ...item, ...branded } : item)),
-    );
-    setSavedWorkflowItems((prev) =>
-      prev.some((item) => item.id === workflowId)
-        ? prev.map((item) => (item.id === workflowId ? { ...workflow, ...branded } : item))
-        : [...prev, { ...workflow, ...branded }],
-    );
+  const handleDiscardWorkflow = (workflowId: string) => {
+    creation.forgetInitialSteps(workflowId);
+    finalizedWorkflowIdsRef.current.delete(workflowId);
+    if (workflowId.startsWith(TEMP_WORKFLOW_PREFIX)) {
+      setWorkflowItems((previous) => previous.filter((item) => item.id !== workflowId));
+      return;
+    }
+    const saved = savedWorkflowItems.find((item) => item.id === workflowId);
+    if (saved) {
+      setWorkflowItems((previous) =>
+        previous.map((item) => (item.id === workflowId ? saved : item)),
+      );
+    }
   };
 
   return {
-    isAddWorkflowDialogOpen,
-    setIsAddWorkflowDialogOpen,
-    newWorkflowName,
-    setNewWorkflowName,
-    selectedTemplateId,
-    setSelectedTemplateId,
-    handleOpenAddWorkflowDialog,
-    handleCreateWorkflow,
+    ...creation,
     handleUpdateWorkflow,
     handleDeleteWorkflow,
-    handleWorkflowCreated,
-    handleSaveWorkflow,
+    handleWorkflowSaved,
+    handleDiscardWorkflow,
   };
 }
 
+export function alignSavedWorkflowsToDraftOrder(
+  drafts: Workflow[],
+  saved: Workflow[],
+  finalizedWorkflowIds: ReadonlyMap<string, string>,
+): Workflow[] {
+  const savedById = new Map<string, Workflow>(saved.map((workflow) => [workflow.id, workflow]));
+  return drafts.flatMap((draft) => {
+    const persistedId = finalizedWorkflowIds.get(draft.id) ?? draft.id;
+    const baseline = savedById.get(persistedId);
+    return baseline ? [baseline] : [];
+  });
+}
+
 type WorkflowListProps = {
   workflowItems: Workflow[];
-  workspaceId: string;
-  templateStepsById: Map<string, StepDefinition[]>;
+  savedWorkflowItems: Workflow[];
+  orderDirtyIds: ReadonlySet<string>;
+  initialStepsByWorkflowId: Map<string, WorkflowStep[]>;
   isWorkflowDirty: (wf: Workflow) => boolean;
   onUpdate: (
     id: string,
     u: { name?: string; description?: string; agent_profile_id?: string },
   ) => void;
   onDelete: (id: string) => void;
-  onSave: (id: string) => void;
-  onCreated: (id: string, wf: Workflow) => void;
+  onWorkflowSaved: (params: WorkflowSavedParams) => void;
+  onDiscard: (id: string) => void;
   onReorder: (items: Workflow[]) => void;
 };
 
 function SortableWorkflowItem({
   workflow,
+  isDirty,
   children,
 }: {
   workflow: Workflow;
+  isDirty: boolean;
   children: React.ReactNode;
 }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
@@ -324,9 +315,16 @@ function SortableWorkflowItem({
     opacity: isDragging ? 0.5 : 1,
   };
   return (
-    <div ref={setNodeRef} style={style} className="relative min-w-0">
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="relative min-w-0"
+      data-settings-dirty={isDirty}
+      data-settings-dirty-level="container"
+      data-testid={`workflow-order-item-${workflow.id}`}
+    >
       <div
-        className="absolute left-0 top-6 -ml-8 flex items-center cursor-grab active:cursor-grabbing z-10"
+        className="absolute left-0 top-6 -ml-6 flex items-center cursor-grab active:cursor-grabbing z-10 sm:-ml-8"
         data-testid={`workflow-drag-handle-${workflow.id}`}
         {...attributes}
         {...listeners}
@@ -340,16 +338,21 @@ function SortableWorkflowItem({
 
 function WorkflowList({
   workflowItems,
-  workspaceId,
-  templateStepsById,
+  savedWorkflowItems,
+  orderDirtyIds,
+  initialStepsByWorkflowId,
   isWorkflowDirty,
   onUpdate,
   onDelete,
-  onSave,
-  onCreated,
+  onWorkflowSaved,
+  onDiscard,
   onReorder,
 }: WorkflowListProps) {
   const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }));
+  const savedWorkflowsById = useMemo(
+    () => new Map(savedWorkflowItems.map((workflow) => [workflow.id, workflow])),
+    [savedWorkflowItems],
+  );
 
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
@@ -359,11 +362,6 @@ function WorkflowList({
     if (oldIndex === -1 || newIndex === -1) return;
     const reordered = arrayMove(workflowItems, oldIndex, newIndex);
     onReorder(reordered);
-    // Persist to backend (skip temp workflows)
-    const persistedIds = reordered.filter((wf) => !wf.id.startsWith("temp-")).map((wf) => wf.id);
-    if (persistedIds.length > 0) {
-      reorderWorkflowsAction(workspaceId, persistedIds).catch(() => {});
-    }
   };
 
   return (
@@ -372,39 +370,34 @@ function WorkflowList({
         items={workflowItems.map((wf) => wf.id)}
         strategy={verticalListSortingStrategy}
       >
-        <div className="grid min-w-0 gap-3 pl-8">
-          {workflowItems.map((workflow) => {
-            const isTempWorkflow = workflow.id.startsWith("temp-");
-            const templateSteps =
-              isTempWorkflow && workflow.workflow_template_id
-                ? (templateStepsById.get(workflow.workflow_template_id) ?? [])
-                : DEFAULT_CUSTOM_STEPS;
-            const initialWorkflowSteps =
-              isTempWorkflow && templateSteps.length
-                ? buildWorkflowSteps(workflow, templateSteps)
-                : undefined;
-            return (
-              <SortableWorkflowItem key={workflow.id} workflow={workflow}>
-                <WorkflowCard
-                  workflow={workflow}
-                  isWorkflowDirty={isWorkflowDirty(workflow)}
-                  initialWorkflowSteps={initialWorkflowSteps}
-                  templateStepCount={isTempWorkflow ? templateSteps.length : 0}
-                  otherWorkflows={workflowItems.filter(
-                    (w) => w.id !== workflow.id && !w.id.startsWith("temp-"),
-                  )}
-                  onUpdateWorkflow={(updates) => onUpdate(workflow.id, updates)}
-                  onDeleteWorkflow={async () => {
-                    await onDelete(workflow.id);
-                  }}
-                  onSaveWorkflow={async () => {
-                    await onSave(workflow.id);
-                  }}
-                  onWorkflowCreated={(created) => onCreated(workflow.id, created)}
-                />
-              </SortableWorkflowItem>
-            );
-          })}
+        <div
+          className="grid min-w-0 gap-3 pl-6 sm:pl-8"
+          data-settings-dirty={orderDirtyIds.size > 0}
+          data-settings-dirty-level="container"
+          data-testid="workflow-order-list"
+        >
+          {workflowItems.map((workflow) => (
+            <SortableWorkflowItem
+              key={workflow.id}
+              workflow={workflow}
+              isDirty={orderDirtyIds.has(workflow.id)}
+            >
+              <WorkflowCard
+                workflow={workflow}
+                savedWorkflow={savedWorkflowsById.get(workflow.id)}
+                isWorkflowDirty={isWorkflowDirty(workflow)}
+                isOrderDirty={orderDirtyIds.has(workflow.id)}
+                initialWorkflowSteps={initialStepsByWorkflowId.get(workflow.id)}
+                otherWorkflows={workflowItems.filter((w) => w.id !== workflow.id)}
+                onUpdateWorkflow={(updates) => onUpdate(workflow.id, updates)}
+                onDeleteWorkflow={async () => {
+                  await onDelete(workflow.id);
+                }}
+                onWorkflowSaved={onWorkflowSaved}
+                onDiscardWorkflow={() => onDiscard(workflow.id)}
+              />
+            </SortableWorkflowItem>
+          ))}
         </div>
       </SortableContext>
     </DndContext>
@@ -439,6 +432,7 @@ function WorkflowDialogs({ page }: { page: ReturnType<typeof useWorkspaceWorkflo
         onSelectedTemplateChange={page.setSelectedTemplateId}
         workflowTemplates={page.workflowTemplates}
         onCreate={page.handleCreateWorkflow}
+        createLoading={page.createWorkflowLoading}
       />
     </>
   );
@@ -487,13 +481,14 @@ export function WorkspaceWorkflowsClient({
         />
         <WorkflowList
           workflowItems={page.workflowItems}
-          workspaceId={workspace.id}
-          templateStepsById={page.templateStepsById}
+          savedWorkflowItems={page.savedWorkflowItems}
+          orderDirtyIds={page.workflowOrderDirtyIds}
+          initialStepsByWorkflowId={page.initialStepsByWorkflowId}
           isWorkflowDirty={page.isWorkflowDirty}
           onUpdate={page.handleUpdateWorkflow}
           onDelete={page.handleDeleteWorkflow}
-          onSave={page.handleSaveWorkflow}
-          onCreated={page.handleWorkflowCreated}
+          onWorkflowSaved={page.handleWorkflowSaved}
+          onDiscard={page.handleDiscardWorkflow}
           onReorder={page.handleReorderWorkflows}
         />
       </SettingsSection>
@@ -502,6 +497,70 @@ export function WorkspaceWorkflowsClient({
   );
 }
 
+type WorkflowOrderDraftArgs = {
+  workspace: Workspace | null;
+  workflowItems: Workflow[];
+  savedWorkflowItems: Workflow[];
+  setWorkflowItems: React.Dispatch<React.SetStateAction<Workflow[]>>;
+  setSavedWorkflowItems: React.Dispatch<React.SetStateAction<Workflow[]>>;
+  idMappings: React.RefObject<Map<string, string>>;
+};
+
+export function getWorkflowOrderDirtyIds(
+  workflows: Workflow[],
+  savedWorkflows: Workflow[],
+): ReadonlySet<string> {
+  const savedPositions = new Map(
+    savedWorkflows.map((workflow, position) => [workflow.id, position]),
+  );
+  return new Set(
+    workflows.flatMap((workflow, position) =>
+      savedPositions.get(workflow.id) === position ? [] : [workflow.id],
+    ),
+  );
+}
+
+function useWorkflowOrderDraft({
+  workspace,
+  workflowItems,
+  savedWorkflowItems,
+  setWorkflowItems,
+  setSavedWorkflowItems,
+  idMappings,
+}: WorkflowOrderDraftArgs) {
+  const currentOrder = workflowItems.map((workflow) => workflow.id);
+  const savedOrder = savedWorkflowItems.map((workflow) => workflow.id);
+  const dirtyIds = getWorkflowOrderDirtyIds(workflowItems, savedWorkflowItems);
+  useSettingsSaveContributor({
+    id: `workflow-order:${workspace?.id ?? "missing"}`,
+    order: 1000,
+    revision: currentOrder.join("\0"),
+    isDirty: currentOrder.join("\0") !== savedOrder.join("\0"),
+    save: async () => {
+      if (!workspace) return;
+      const persistedOrder = currentOrder.map((id) => idMappings.current.get(id) ?? id);
+      if (persistedOrder.some((id) => id.startsWith(TEMP_WORKFLOW_PREFIX))) {
+        throw new Error("Save workflows before ordering them");
+      }
+      if (persistedOrder.length > 0) {
+        await reorderWorkflowsAction(workspace.id, persistedOrder);
+      }
+      setSavedWorkflowItems((previous) => sortWorkflows(previous, persistedOrder));
+    },
+    discard: () => setWorkflowItems(savedWorkflowItems),
+  });
+  return dirtyIds;
+}
+
+function sortWorkflows(workflows: Workflow[], order: string[]): Workflow[] {
+  const positions = new Map(order.map((id, position) => [id, position]));
+  return [...workflows].sort(
+    (left, right) =>
+      (positions.get(left.id) ?? Number.MAX_SAFE_INTEGER) -
+      (positions.get(right.id) ?? Number.MAX_SAFE_INTEGER),
+  );
+}
+
 function useWorkspaceWorkflowsPage(
   workspace: Workspace | null,
   workflows: Workflow[],
@@ -516,89 +575,55 @@ function useWorkspaceWorkflowsPage(
     () => workflows.filter((wf) => wf.style !== "office"),
     [workflows],
   );
-  const { workflowItems, setWorkflowItems, setSavedWorkflowItems, isWorkflowDirty } =
-    useWorkflowSettings(kanbanWorkflows, workspace?.id);
+  const {
+    workflowItems,
+    setWorkflowItems,
+    savedWorkflowItems,
+    setSavedWorkflowItems,
+    isWorkflowDirty,
+  } = useWorkflowSettings(kanbanWorkflows, workspace?.id);
+  const workflowIdMappingsRef = useRef(new Map<string, string>());
 
   const importExport = useWorkflowImportExport(workspace, workflowItems, router, toast);
-  const {
-    isExportDialogOpen,
-    setIsExportDialogOpen,
-    exportYaml,
-    isImportDialogOpen,
-    setIsImportDialogOpen,
-    importYaml,
-    setImportYaml,
-    importLoading,
-    fileInputRef,
-    handleExportAll,
-    handleFileUpload,
-    handleImport,
-  } = importExport;
-
   const actions = useWorkflowActions({
     workspace,
     workflowItems,
+    savedWorkflowItems,
     workflowTemplates,
     setWorkflowItems,
     setSavedWorkflowItems,
   });
-  const {
-    isAddWorkflowDialogOpen,
-    setIsAddWorkflowDialogOpen,
-    newWorkflowName,
-    setNewWorkflowName,
-    selectedTemplateId,
-    setSelectedTemplateId,
-    handleOpenAddWorkflowDialog,
-    handleCreateWorkflow,
-    handleUpdateWorkflow,
-    handleDeleteWorkflow,
-    handleWorkflowCreated,
-    handleSaveWorkflow,
-  } = actions;
 
   const handleReorderWorkflows = (reordered: Workflow[]) => {
     setWorkflowItems(reordered);
-    setSavedWorkflowItems((prev) => {
-      const orderMap = new Map(reordered.map((wf, i) => [wf.id, i]));
-      return [...prev].sort((a, b) => (orderMap.get(a.id) ?? 0) - (orderMap.get(b.id) ?? 0));
-    });
   };
 
-  const templateStepsById = useMemo(
-    () => new Map(workflowTemplates.map((t) => [t.id, t.default_steps ?? []])),
-    [workflowTemplates],
-  );
+  const handleWorkflowSaved = (params: WorkflowSavedParams) => {
+    if (params.clientWorkflow.id !== params.savedWorkflow.id) {
+      workflowIdMappingsRef.current.set(params.clientWorkflow.id, params.savedWorkflow.id);
+    }
+    actions.handleWorkflowSaved(params);
+  };
+
+  const workflowOrderDirtyIds = useWorkflowOrderDraft({
+    workspace,
+    workflowItems,
+    savedWorkflowItems,
+    setWorkflowItems,
+    setSavedWorkflowItems,
+    idMappings: workflowIdMappingsRef,
+  });
+
   return {
     router,
     workflowItems,
+    savedWorkflowItems,
+    workflowOrderDirtyIds,
     isWorkflowDirty,
-    isExportDialogOpen,
-    setIsExportDialogOpen,
-    exportYaml,
-    isImportDialogOpen,
-    setIsImportDialogOpen,
-    importYaml,
-    setImportYaml,
-    importLoading,
-    fileInputRef,
-    handleExportAll,
-    handleFileUpload,
-    handleImport,
-    isAddWorkflowDialogOpen,
-    setIsAddWorkflowDialogOpen,
-    newWorkflowName,
-    setNewWorkflowName,
-    selectedTemplateId,
-    setSelectedTemplateId,
-    handleOpenAddWorkflowDialog,
-    handleCreateWorkflow,
-    handleUpdateWorkflow,
-    handleDeleteWorkflow,
-    handleWorkflowCreated,
-    handleSaveWorkflow,
+    ...importExport,
+    ...actions,
+    handleWorkflowSaved,
     handleReorderWorkflows,
     workflowTemplates,
-    templateStepsById,
   };
 }
diff --git a/apps/web/app/settings/workspace/workspace-workflows-dialogs.tsx b/apps/web/app/settings/workspace/workspace-workflows-dialogs.tsx
index fe65c10306..aa1afb4dc0 100644
--- a/apps/web/app/settings/workspace/workspace-workflows-dialogs.tsx
+++ b/apps/web/app/settings/workspace/workspace-workflows-dialogs.tsx
@@ -123,7 +123,8 @@ type CreateWorkflowDialogProps = {
   selectedTemplateId: string | null;
   onSelectedTemplateChange: (value: string | null) => void;
   workflowTemplates: WorkflowTemplate[];
-  onCreate: () => void;
+  onCreate: () => void | Promise<void>;
+  createLoading?: boolean;
 };
 
 export function CreateWorkflowDialog({
@@ -135,9 +136,15 @@ export function CreateWorkflowDialog({
   onSelectedTemplateChange,
   workflowTemplates,
   onCreate,
+  createLoading = false,
 }: CreateWorkflowDialogProps) {
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (createLoading && !nextOpen) return;
+    onOpenChange(nextOpen);
+  };
+
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent
         className="sm:w-[900px] sm:max-w-none max-h-[90vh] flex flex-col"
         data-testid="create-workflow-dialog"
@@ -194,15 +201,22 @@ export function CreateWorkflowDialog({
           )}
         </div>
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)} className="cursor-pointer">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={createLoading}
+            className="cursor-pointer"
+          >
             Cancel
           </Button>
           <Button
             onClick={onCreate}
+            disabled={createLoading}
             className="cursor-pointer"
             data-testid="confirm-create-workflow"
+            data-dialog-default-action
           >
-            Add Workflow
+            {createLoading ? "Adding..." : "Add Workflow"}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/apps/web/app/settings/workspace/workspace-workflows-order.test.ts b/apps/web/app/settings/workspace/workspace-workflows-order.test.ts
new file mode 100644
index 0000000000..147ee0bc6a
--- /dev/null
+++ b/apps/web/app/settings/workspace/workspace-workflows-order.test.ts
@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+import { workflowId as toWorkflowId, type Workflow } from "@/lib/types/http";
+import {
+  alignSavedWorkflowsToDraftOrder,
+  getWorkflowOrderDirtyIds,
+} from "./workspace-workflows-client";
+
+function workflow(id: string, name = id): Workflow {
+  return {
+    id: toWorkflowId(id),
+    workspace_id: "workspace-1" as Workflow["workspace_id"],
+    name,
+    created_at: "",
+    updated_at: "",
+  };
+}
+
+describe("alignSavedWorkflowsToDraftOrder", () => {
+  it("replaces a client workflow identity without changing its visible order", () => {
+    const existing = workflow("existing");
+    const draft = workflow("temp-workflow-1", "Draft");
+    const persisted = workflow("persisted", "Draft");
+
+    expect(
+      alignSavedWorkflowsToDraftOrder(
+        [draft, existing],
+        [existing, persisted],
+        new Map([[draft.id, persisted.id]]),
+      ).map(({ id }) => id),
+    ).toEqual([persisted.id, existing.id]);
+  });
+
+  it("preserves workflows finalized by earlier save contributors", () => {
+    const firstDraft = workflow("temp-workflow-1", "First");
+    const secondDraft = workflow("temp-workflow-2", "Second");
+    const firstSaved = workflow("persisted-1", "First");
+    const secondSaved = workflow("persisted-2", "Second");
+
+    expect(
+      alignSavedWorkflowsToDraftOrder(
+        [firstDraft, secondDraft],
+        [firstSaved, secondSaved],
+        new Map([
+          [firstDraft.id, firstSaved.id],
+          [secondDraft.id, secondSaved.id],
+        ]),
+      ).map(({ id }) => id),
+    ).toEqual([firstSaved.id, secondSaved.id]);
+  });
+});
+
+describe("getWorkflowOrderDirtyIds", () => {
+  it("marks only workflows whose visible position changed", () => {
+    const first = workflow("first");
+    const second = workflow("second");
+    const third = workflow("third");
+
+    expect([...getWorkflowOrderDirtyIds([first, third, second], [first, second, third])]).toEqual([
+      third.id,
+      second.id,
+    ]);
+  });
+
+  it("marks a newly inserted workflow as order-dirty", () => {
+    const first = workflow("first");
+    const draft = workflow("temp-workflow-1");
+
+    expect([...getWorkflowOrderDirtyIds([first, draft], [first])]).toEqual([draft.id]);
+  });
+});
diff --git a/apps/web/components/automations/automation-editor-sections.tsx b/apps/web/components/automations/automation-editor-sections.tsx
new file mode 100644
index 0000000000..8494b09832
--- /dev/null
+++ b/apps/web/components/automations/automation-editor-sections.tsx
@@ -0,0 +1,291 @@
+import { IconTrash } from "@tabler/icons-react";
+import { Button } from "@kandev/ui/button";
+import { Input } from "@kandev/ui/input";
+import { Label } from "@kandev/ui/label";
+import { Separator } from "@kandev/ui/separator";
+import { Switch } from "@kandev/ui/switch";
+import type {
+  AutomationTrigger,
+  PlaceholderInfo,
+  TriggerType,
+  TriggerTypeInfo,
+} from "@/lib/types/automation";
+import type { CreatedWebhookDetails, FormState } from "./automation-payload";
+import { useAutomationTriggerDrafts } from "./automation-trigger-drafts";
+import { ConfigSection } from "./config-section";
+import { PromptSection } from "./prompt-section";
+import { RequiredFieldLabel } from "./required-field-label";
+import { TriggersSection } from "./triggers-section";
+import { WebhookCreatedDialog } from "./webhook-created-dialog";
+
+type UpdateField = <K extends keyof FormState>(key: K, value: FormState[K]) => void;
+
+export function NameField({
+  value,
+  isDirty,
+  onChange,
+}: {
+  value: string;
+  isDirty: boolean;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <div
+      className="space-y-2 rounded-lg border bg-card p-4"
+      data-settings-dirty={isDirty}
+      data-settings-dirty-level="container"
+    >
+      <RequiredFieldLabel htmlFor="automation-name">Name</RequiredFieldLabel>
+      <Input
+        id="automation-name"
+        data-testid="automation-name-input"
+        value={value}
+        data-settings-dirty={isDirty}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder="Automation name"
+        aria-describedby={!value.trim() ? "automation-name-help" : undefined}
+        aria-invalid={!value.trim() ? true : undefined}
+      />
+      {!value.trim() && (
+        <p id="automation-name-help" className="text-xs text-muted-foreground">
+          Enter an automation name to enable saving.
+        </p>
+      )}
+    </div>
+  );
+}
+
+export function CreatedWebhookDialogHost({
+  details,
+  onClose,
+}: {
+  details: CreatedWebhookDetails | null;
+  onClose: () => void;
+}) {
+  if (!details) return null;
+  return (
+    <WebhookCreatedDialog
+      open
+      webhookUrl={details.url}
+      webhookSecret={details.secret}
+      onClose={onClose}
+    />
+  );
+}
+
+type TriggerActionsResult = ReturnType<typeof useAutomationTriggerDrafts>;
+
+export function WhenSection({
+  triggerActions,
+  triggerTypes,
+  currentId,
+  workspaceId,
+  savedTriggers,
+  isDirty,
+}: {
+  triggerActions: TriggerActionsResult;
+  triggerTypes: TriggerTypeInfo[];
+  currentId: string | null;
+  workspaceId: string;
+  savedTriggers: AutomationTrigger[];
+  isDirty: boolean;
+}) {
+  return (
+    <div className="space-y-2">
+      <div>
+        <h3 className="text-base font-medium">When</h3>
+        <p className="text-sm text-muted-foreground">What causes this automation to run</p>
+      </div>
+      <div
+        className="rounded-lg border bg-card p-4"
+        data-settings-dirty={isDirty}
+        data-settings-dirty-level="container"
+      >
+        <TriggersSection
+          triggers={triggerActions.allTriggers}
+          automationId={currentId}
+          workspaceId={workspaceId}
+          triggerTypes={triggerTypes}
+          savedTriggers={savedTriggers}
+          onAddTrigger={triggerActions.handleAdd}
+          onUpdateTrigger={triggerActions.handleUpdate}
+          onToggleTrigger={triggerActions.handleToggle}
+          onDeleteTrigger={triggerActions.handleDelete}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function ThenSection({
+  form,
+  workspaceId,
+  placeholders,
+  defaultTaskTitle,
+  conditionType,
+  savedForm,
+  updateField,
+}: {
+  form: FormState;
+  workspaceId: string;
+  placeholders: PlaceholderInfo[];
+  defaultTaskTitle: string;
+  conditionType: TriggerType | null;
+  savedForm: FormState;
+  updateField: UpdateField;
+}) {
+  const dirtyFields: Array<keyof FormState> = [
+    "taskTitleTemplate",
+    "prompt",
+    "workflowId",
+    "workflowStepId",
+    "agentProfileId",
+    "executorProfileId",
+    "repositorySelection",
+    "executionMode",
+  ];
+  const isDirty = dirtyFields.some((field) => isAutomationFieldDirty(form, savedForm, field));
+  return (
+    <div className="space-y-2">
+      <div>
+        <h3 className="text-base font-medium">Then</h3>
+        <p className="text-sm text-muted-foreground">
+          A new task will be created each time this automation triggers
+        </p>
+      </div>
+      <div
+        className="rounded-lg border bg-card p-4 space-y-4"
+        data-settings-dirty={isDirty}
+        data-settings-dirty-level="container"
+      >
+        <div className="space-y-1.5">
+          <Label className="text-xs">Task title</Label>
+          <Input
+            value={form.taskTitleTemplate}
+            data-settings-dirty={isAutomationFieldDirty(form, savedForm, "taskTitleTemplate")}
+            onChange={(event) => updateField("taskTitleTemplate", event.target.value)}
+            placeholder={defaultTaskTitle || "[Auto] automation name"}
+          />
+          <p className="text-xs text-muted-foreground">
+            Leave empty to use the default. Supports placeholders.
+          </p>
+        </div>
+        <PromptSection
+          value={form.prompt}
+          isDirty={isAutomationFieldDirty(form, savedForm, "prompt")}
+          onChange={(value) => updateField("prompt", value)}
+          placeholders={placeholders}
+        />
+        <Separator />
+        <ConfigSection
+          workspaceId={workspaceId}
+          workflowId={form.workflowId}
+          workflowStepId={form.workflowStepId}
+          agentProfileId={form.agentProfileId}
+          executorProfileId={form.executorProfileId}
+          repositorySelection={form.repositorySelection}
+          executionMode={form.executionMode}
+          conditionType={conditionType}
+          dirtyFields={{
+            executionMode: isAutomationFieldDirty(form, savedForm, "executionMode"),
+            workflowId: isAutomationFieldDirty(form, savedForm, "workflowId"),
+            workflowStepId: isAutomationFieldDirty(form, savedForm, "workflowStepId"),
+            agentProfileId: isAutomationFieldDirty(form, savedForm, "agentProfileId"),
+            executorProfileId: isAutomationFieldDirty(form, savedForm, "executorProfileId"),
+            repositorySelection: isAutomationFieldDirty(form, savedForm, "repositorySelection"),
+          }}
+          onWorkflowChange={(value) => {
+            updateField("workflowId", value);
+            updateField("workflowStepId", "");
+          }}
+          onStepChange={(value) => updateField("workflowStepId", value)}
+          onAgentProfileChange={(value) => updateField("agentProfileId", value)}
+          onExecutorProfileChange={(value) => updateField("executorProfileId", value)}
+          onRepositoryChange={(value) => updateField("repositorySelection", value)}
+          onExecutionModeChange={(value) => updateField("executionMode", value)}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function SettingsSection({
+  form,
+  savedForm,
+  updateField,
+}: {
+  form: FormState;
+  savedForm: FormState;
+  updateField: UpdateField;
+}) {
+  const enabledIsDirty = isAutomationFieldDirty(form, savedForm, "enabled");
+  const maxRunsIsDirty = isAutomationFieldDirty(form, savedForm, "maxConcurrentRuns");
+  return (
+    <div
+      className="space-y-3 rounded-lg border bg-card p-4"
+      data-settings-dirty={enabledIsDirty || maxRunsIsDirty}
+      data-settings-dirty-level="container"
+    >
+      <Label className="text-xs uppercase tracking-wider text-muted-foreground">Settings</Label>
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          <Switch
+            checked={form.enabled}
+            data-settings-dirty={enabledIsDirty}
+            onCheckedChange={(value) => updateField("enabled", value)}
+            className="cursor-pointer"
+          />
+          <Label className="text-sm">Enabled</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <Label className="text-sm">Max concurrent runs</Label>
+          <Input
+            type="number"
+            min={1}
+            value={form.maxConcurrentRuns}
+            data-settings-dirty={maxRunsIsDirty}
+            onChange={(event) =>
+              updateField("maxConcurrentRuns", Number.parseInt(event.target.value) || 1)
+            }
+            className="w-20"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function EditorFooter({
+  saving,
+  isNew,
+  onDelete,
+}: {
+  saving: boolean;
+  isNew: boolean;
+  onDelete: () => void;
+}) {
+  return (
+    <div className="flex items-center gap-3 pt-4">
+      {!isNew && (
+        <Button
+          data-testid="automation-delete-button"
+          variant="destructive"
+          className="cursor-pointer"
+          onClick={onDelete}
+          disabled={saving}
+        >
+          <IconTrash className="h-4 w-4 mr-1" />
+          Delete
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export function isAutomationFieldDirty<K extends keyof FormState>(
+  form: FormState,
+  savedForm: FormState,
+  field: K,
+): boolean {
+  return JSON.stringify(form[field]) !== JSON.stringify(savedForm[field]);
+}
diff --git a/apps/web/components/automations/automation-editor.tsx b/apps/web/components/automations/automation-editor.tsx
index ea27dea345..effbadda40 100644
--- a/apps/web/components/automations/automation-editor.tsx
+++ b/apps/web/components/automations/automation-editor.tsx
@@ -2,45 +2,38 @@
 
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useRouter } from "@/lib/routing/client-router";
+import { runWithNavigationBlockerBypassed } from "@/lib/routing/navigation-guard";
 import { toast } from "sonner";
-import { Button } from "@kandev/ui/button";
-import { Input } from "@kandev/ui/input";
-import { Label } from "@kandev/ui/label";
-import { Switch } from "@kandev/ui/switch";
 import { Separator } from "@kandev/ui/separator";
-import { IconTrash } from "@tabler/icons-react";
 import { useAutomations } from "@/hooks/domains/settings/use-automations";
-import {
-  addTrigger,
-  updateTrigger,
-  deleteTrigger,
-  getAutomation,
-  listTriggerTypes,
-} from "@/lib/api/domains/automation-api";
+import { getAutomation, listTriggerTypes } from "@/lib/api/domains/automation-api";
 import type {
   Automation,
   CreateAutomationResponse,
   TriggerType,
   AutomationTrigger,
   TriggerTypeInfo,
-  PlaceholderInfo,
 } from "@/lib/types/automation";
-import { TriggersSection } from "./triggers-section";
-import { PromptSection } from "./prompt-section";
-import { ConfigSection } from "./config-section";
 import { RunsSection } from "./runs-section";
-import { WebhookCreatedDialog } from "./webhook-created-dialog";
-import { RequiredFieldLabel } from "./required-field-label";
 import {
   type CreatedWebhookDetails,
   type FormState,
-  type PendingTrigger,
   buildCreatePayload,
   buildUpdatePayload,
   buildWebhookUrl,
   resolveRepositoryId,
 } from "./automation-payload";
-import { generateUUID } from "@/lib/utils";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
+import { useAutomationTriggerDrafts } from "./automation-trigger-drafts";
+import {
+  CreatedWebhookDialogHost,
+  EditorFooter,
+  isAutomationFieldDirty,
+  NameField,
+  SettingsSection,
+  ThenSection,
+  WhenSection,
+} from "./automation-editor-sections";
 
 type AutomationEditorProps = {
   workspaceId: string;
@@ -83,75 +76,6 @@ function formFromAutomation(a: Automation): FormState {
   };
 }
 
-function pendingToTrigger(p: PendingTrigger): AutomationTrigger {
-  return {
-    id: p.tempId,
-    automation_id: "",
-    type: p.type,
-    config: p.config,
-    enabled: p.enabled,
-    last_evaluated_at: null,
-    created_at: "",
-    updated_at: "",
-  };
-}
-
-function useTriggerActions(currentId: string | null) {
-  const [triggers, setTriggers] = useState<AutomationTrigger[]>([]);
-  const [pending, setPending] = useState<PendingTrigger[]>([]);
-
-  const handleAdd = async (type: TriggerType, config: Record<string, unknown>) => {
-    if (!currentId) {
-      setPending((prev) => [...prev, { tempId: generateUUID(), type, config, enabled: true }]);
-      return;
-    }
-    const trigger = await addTrigger({ automation_id: currentId, type, config, enabled: true });
-    setTriggers((prev) => [...prev, trigger]);
-  };
-
-  const handleUpdate = async (triggerId: string, config: Record<string, unknown>) => {
-    if (!currentId) {
-      setPending((prev) => prev.map((t) => (t.tempId === triggerId ? { ...t, config } : t)));
-      return;
-    }
-    await updateTrigger(triggerId, { config });
-    setTriggers((prev) => prev.map((t) => (t.id === triggerId ? { ...t, config } : t)));
-  };
-
-  const handleToggle = async (triggerId: string, enabled: boolean) => {
-    if (!currentId) {
-      setPending((prev) => prev.map((t) => (t.tempId === triggerId ? { ...t, enabled } : t)));
-      return;
-    }
-    await updateTrigger(triggerId, { enabled });
-    setTriggers((prev) => prev.map((t) => (t.id === triggerId ? { ...t, enabled } : t)));
-  };
-
-  const handleDelete = async (triggerId: string) => {
-    if (!currentId) {
-      setPending((prev) => prev.filter((t) => t.tempId !== triggerId));
-      return;
-    }
-    await deleteTrigger(triggerId);
-    setTriggers((prev) => prev.filter((t) => t.id !== triggerId));
-  };
-
-  const allTriggers = currentId ? triggers : pending.map(pendingToTrigger);
-  const clearPending = () => setPending([]);
-
-  return {
-    triggers,
-    setTriggers,
-    pending,
-    clearPending,
-    allTriggers,
-    handleAdd,
-    handleUpdate,
-    handleToggle,
-    handleDelete,
-  };
-}
-
 function useTriggerTypeMetadata() {
   const [triggerTypes, setTriggerTypes] = useState<TriggerTypeInfo[]>([]);
 
@@ -189,7 +113,8 @@ type SaveHandlerOpts = {
   // a webhook automation, then the user is redirected to the listings page.
   // Null when no webhook trigger was configured on the new automation.
   setCreatedWebhook: React.Dispatch<React.SetStateAction<CreatedWebhookDetails | null>>;
-  triggerActions: ReturnType<typeof useTriggerActions>;
+  onSaved: (form: FormState, triggers: AutomationTrigger[]) => void;
+  triggerActions: ReturnType<typeof useAutomationTriggerDrafts>;
   router: ReturnType<typeof useRouter>;
 };
 
@@ -199,7 +124,8 @@ type SaveHandlerOpts = {
 // registers discovered repos before persisting the automation.
 function useSaveHandler(opts: SaveHandlerOpts): () => Promise<void> {
   const { isNew, workspaceId, form, currentId, create, update } = opts;
-  const { setSaving, setCurrentId, setForm, setCreatedWebhook, triggerActions, router } = opts;
+  const { setSaving, setCurrentId, setForm, setCreatedWebhook, triggerActions, router, onSaved } =
+    opts;
   return async () => {
     setSaving(true);
     try {
@@ -222,46 +148,66 @@ function useSaveHandler(opts: SaveHandlerOpts): () => Promise<void> {
         // Everything else goes straight to the listings page with a toast.
         const hasWebhookTrigger = (a.triggers ?? []).some((t) => t.type === "webhook");
         if (hasWebhookTrigger && a.webhook_secret) {
-          setCurrentId(a.id);
-          triggerActions.setTriggers(a.triggers ?? []);
+          const savedForm =
+            form.repositorySelection.kind === "discovered" && repositoryId
+              ? {
+                  ...form,
+                  repositorySelection: { kind: "registered" as const, id: repositoryId },
+                }
+              : form;
+          const savedTriggers = a.triggers ?? [];
+          triggerActions.loadTriggers(savedTriggers);
           triggerActions.clearPending();
+          onSaved(savedForm, savedTriggers);
+          setCurrentId(a.id);
           setCreatedWebhook({ url: buildWebhookUrl(a.id), secret: a.webhook_secret });
         } else {
           toast.success("Automation created");
-          router.push(`/settings/workspace/${workspaceId}/automations`);
+          runWithNavigationBlockerBypassed(() =>
+            router.push(`/settings/workspace/${workspaceId}/automations`),
+          );
         }
       } else if (currentId) {
         await update(currentId, buildUpdatePayload(form, repositoryId));
+        const persistedTriggers = await triggerActions.persistDrafts();
         promoteSelection();
+        const savedForm =
+          form.repositorySelection.kind === "discovered" && repositoryId
+            ? { ...form, repositorySelection: { kind: "registered" as const, id: repositoryId } }
+            : form;
+        onSaved(savedForm, persistedTriggers);
       }
     } catch (err) {
       const msg = err instanceof Error ? err.message : String(err);
       toast.error(`Failed to save automation: ${msg}`);
+      throw err;
     } finally {
       setSaving(false);
     }
   };
 }
 
-function getSaveLabel(saving: boolean, isNew: boolean): string {
-  if (saving) return "Saving...";
-  return isNew ? "Create Automation" : "Save Changes";
-}
-
 /** Loads an existing automation on mount and populates form + trigger state. */
-function useLoadAutomation(
-  automationId: string | null,
-  workspaceId: string,
-  setForm: React.Dispatch<React.SetStateAction<FormState>>,
-  setTriggers: (triggers: AutomationTrigger[]) => void,
-  router: ReturnType<typeof useRouter>,
-) {
+type LoadAutomationOpts = {
+  automationId: string | null;
+  workspaceId: string;
+  setForm: React.Dispatch<React.SetStateAction<FormState>>;
+  loadTriggers: (triggers: AutomationTrigger[]) => void;
+  onLoaded: (form: FormState, triggers: AutomationTrigger[]) => void;
+  router: ReturnType<typeof useRouter>;
+};
+
+function useLoadAutomation(opts: LoadAutomationOpts) {
+  const { automationId, workspaceId, setForm, loadTriggers, onLoaded, router } = opts;
   useEffect(() => {
     if (!automationId) return;
     getAutomation(automationId)
       .then((a) => {
-        setForm(formFromAutomation(a));
-        setTriggers(a.triggers ?? []);
+        const loadedForm = formFromAutomation(a);
+        const loadedTriggers = a.triggers ?? [];
+        setForm(loadedForm);
+        loadTriggers(loadedTriggers);
+        onLoaded(loadedForm, loadedTriggers);
       })
       .catch(() => {
         router.push(`/settings/workspace/${workspaceId}/automations`);
@@ -301,18 +247,92 @@ function useAutoPromptUpdate(
   }, [conditionType, activeTriggerInfo, triggerTypes, setForm]);
 }
 
+function useAutomationSaveContributor(options: {
+  isNew: boolean;
+  currentId: string | null;
+  revision: string;
+  savedRevision: string;
+  canSave: boolean;
+  save: () => Promise<void>;
+  discard: () => void;
+}) {
+  const { isNew, currentId, revision, savedRevision, canSave, save, discard } = options;
+  useSettingsSaveContributor({
+    id: `automation:${currentId ?? "new"}`,
+    revision,
+    isDirty: isNew || revision !== savedRevision,
+    canSave,
+    invalidReason: canSave ? undefined : "Complete the required automation fields before saving.",
+    save,
+    discard,
+  });
+}
+
+function useRemoveAutomation(
+  currentId: string | null,
+  workspaceId: string,
+  remove: (id: string) => Promise<unknown>,
+  router: ReturnType<typeof useRouter>,
+  onError: (error: unknown) => void,
+) {
+  return async () => {
+    if (!currentId) return;
+    try {
+      await remove(currentId);
+      runWithNavigationBlockerBypassed(() =>
+        router.push(`/settings/workspace/${workspaceId}/automations`),
+      );
+    } catch (error) {
+      onError(error);
+      throw error;
+    }
+  };
+}
+
+type AutomationPersistenceOptions = SaveHandlerOpts & {
+  savedRevision: string;
+  discard: () => void;
+  remove: (id: string) => Promise<unknown>;
+};
+
+function useAutomationPersistence(options: AutomationPersistenceOptions) {
+  const handleSave = useSaveHandler(options);
+  const handleRemove = useRemoveAutomation(
+    options.currentId,
+    options.workspaceId,
+    options.remove,
+    options.router,
+    (error) =>
+      toast.error("Failed to delete automation", {
+        description: error instanceof Error ? error.message : "Request failed",
+      }),
+  );
+  const isRunMode = options.form.executionMode === "run";
+  const canSave =
+    options.form.name.trim().length > 0 &&
+    (isRunMode || (!!options.form.workflowId && !!options.form.workflowStepId));
+  useAutomationSaveContributor({
+    isNew: options.isNew,
+    currentId: options.currentId,
+    revision: automationRevision(options.form, options.triggerActions.allTriggers),
+    savedRevision: options.savedRevision,
+    canSave,
+    save: handleSave,
+    discard: options.discard,
+  });
+  return { handleRemove };
+}
+
 export function AutomationEditor({ workspaceId, automationId }: AutomationEditorProps) {
   const router = useRouter();
   const { create, update, remove } = useAutomations(workspaceId);
   const [form, setForm] = useState<FormState>(defaultForm);
   const [saving, setSaving] = useState(false);
   const [currentId, setCurrentId] = useState<string | null>(automationId);
-  // createdWebhook holds the URL + secret of a freshly-created webhook
-  // automation. Set in the save handler; cleared when the user dismisses
-  // the dialog, at which point we redirect to the listings page.
   const [createdWebhook, setCreatedWebhook] = useState<CreatedWebhookDetails | null>(null);
   const isNew = currentId === null;
-  const triggerActions = useTriggerActions(currentId);
+  const triggerActions = useAutomationTriggerDrafts(currentId);
+  const [savedForm, setSavedForm] = useState(defaultForm);
   const triggerTypes = useTriggerTypeMetadata();
 
   const { placeholders, defaultTaskTitle, activeTriggerInfo, conditionType } = useConditionMetadata(
@@ -320,13 +340,25 @@ export function AutomationEditor({ workspaceId, automationId }: AutomationEditor
     triggerTypes,
   );
   useAutoPromptUpdate(activeTriggerInfo, conditionType, triggerTypes, setForm);
-  useLoadAutomation(automationId, workspaceId, setForm, triggerActions.setTriggers, router);
+  useLoadAutomation({
+    automationId,
+    workspaceId,
+    setForm,
+    loadTriggers: triggerActions.loadTriggers,
+    onLoaded: (loadedForm) => setSavedForm(loadedForm),
+    router,
+  });
 
   const updateField = useCallback(<K extends keyof FormState>(key: K, value: FormState[K]) => {
     setForm((prev) => ({ ...prev, [key]: value }));
   }, []);
 
-  const handleSave = useSaveHandler({
+  const discard = useCallback(() => {
+    setForm(isNew ? defaultForm : savedForm);
+    triggerActions.discardDrafts();
+  }, [isNew, savedForm, triggerActions]);
+  const savedRevision = automationRevision(savedForm, triggerActions.baselineTriggers);
+  const { handleRemove } = useAutomationPersistence({
     isNew,
     workspaceId,
     form,
@@ -339,27 +371,31 @@ export function AutomationEditor({ workspaceId, automationId }: AutomationEditor
     setCreatedWebhook,
     triggerActions,
     router,
+    savedRevision,
+    discard,
+    remove,
+    onSaved: (nextSavedForm) => setSavedForm(nextSavedForm),
   });
-
-  const handleRemove = async () => {
-    if (!currentId) return;
-    await remove(currentId);
-    router.push(`/settings/workspace/${workspaceId}/automations`);
-  };
-
-  const isRunMode = form.executionMode === "run";
-  const canSave =
-    form.name.trim().length > 0 && (isRunMode || (!!form.workflowId && !!form.workflowStepId));
+  const dirtyBaseline = isNew ? defaultForm : savedForm;
+  const triggersDirty =
+    triggerRevision(triggerActions.allTriggers) !==
+    triggerRevision(triggerActions.baselineTriggers);
 
   return (
     <div className="max-w-3xl space-y-6" data-testid="automation-editor">
-      <NameField value={form.name} onChange={(v) => updateField("name", v)} />
+      <NameField
+        value={form.name}
+        isDirty={isAutomationFieldDirty(form, dirtyBaseline, "name")}
+        onChange={(v) => updateField("name", v)}
+      />
       <Separator />
       <WhenSection
         triggerActions={triggerActions}
         triggerTypes={triggerTypes}
         currentId={currentId}
         workspaceId={workspaceId}
+        savedTriggers={triggerActions.baselineTriggers}
+        isDirty={triggersDirty}
       />
       <Separator />
       <ThenSection
@@ -368,23 +404,18 @@ export function AutomationEditor({ workspaceId, automationId }: AutomationEditor
         placeholders={placeholders}
         defaultTaskTitle={defaultTaskTitle}
         conditionType={conditionType}
+        savedForm={dirtyBaseline}
         updateField={updateField}
       />
       <Separator />
-      <SettingsSection form={form} updateField={updateField} />
+      <SettingsSection form={form} savedForm={dirtyBaseline} updateField={updateField} />
       <Separator />
       <RunsSection
         automationId={currentId}
         executionMode={form.executionMode}
         workspaceId={workspaceId}
       />
-      <EditorFooter
-        canSave={canSave}
-        saving={saving}
-        isNew={isNew}
-        onSave={handleSave}
-        onDelete={handleRemove}
-      />
+      <EditorFooter saving={saving} isNew={isNew} onDelete={handleRemove} />
       <CreatedWebhookDialogHost
         details={createdWebhook}
         onClose={() => {
@@ -396,214 +427,15 @@ export function AutomationEditor({ workspaceId, automationId }: AutomationEditor
   );
 }
 
-function NameField({ value, onChange }: { value: string; onChange: (value: string) => void }) {
-  return (
-    <div className="space-y-2">
-      <RequiredFieldLabel htmlFor="automation-name">Name</RequiredFieldLabel>
-      <Input
-        id="automation-name"
-        data-testid="automation-name-input"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder="Automation name"
-        aria-describedby={!value.trim() ? "automation-name-help" : undefined}
-        aria-invalid={!value.trim() ? true : undefined}
-      />
-      {!value.trim() && (
-        <p id="automation-name-help" className="text-xs text-muted-foreground">
-          Enter an automation name to enable saving.
-        </p>
-      )}
-    </div>
-  );
+function automationRevision(form: FormState, triggers: AutomationTrigger[]): string {
+  return JSON.stringify({
+    form,
+    triggers: triggers.map(({ id, type, config, enabled }) => ({ id, type, config, enabled })),
+  });
 }
 
-function CreatedWebhookDialogHost({
-  details,
-  onClose,
-}: {
-  details: CreatedWebhookDetails | null;
-  onClose: () => void;
-}) {
-  if (!details) return null;
-  return (
-    <WebhookCreatedDialog
-      open
-      webhookUrl={details.url}
-      webhookSecret={details.secret}
-      onClose={onClose}
-    />
-  );
-}
-
-type TriggerActionsResult = ReturnType<typeof useTriggerActions>;
-
-function WhenSection({
-  triggerActions,
-  triggerTypes,
-  currentId,
-  workspaceId,
-}: {
-  triggerActions: TriggerActionsResult;
-  triggerTypes: TriggerTypeInfo[];
-  currentId: string | null;
-  workspaceId: string;
-}) {
-  return (
-    <div className="space-y-2">
-      <div>
-        <h3 className="text-base font-medium">When</h3>
-        <p className="text-sm text-muted-foreground">What causes this automation to run</p>
-      </div>
-      <div className="rounded-lg border bg-card p-4">
-        <TriggersSection
-          triggers={triggerActions.allTriggers}
-          automationId={currentId}
-          workspaceId={workspaceId}
-          triggerTypes={triggerTypes}
-          onAddTrigger={triggerActions.handleAdd}
-          onUpdateTrigger={triggerActions.handleUpdate}
-          onToggleTrigger={triggerActions.handleToggle}
-          onDeleteTrigger={triggerActions.handleDelete}
-        />
-      </div>
-    </div>
-  );
-}
-
-function ThenSection({
-  form,
-  workspaceId,
-  placeholders,
-  defaultTaskTitle,
-  conditionType,
-  updateField,
-}: {
-  form: FormState;
-  workspaceId: string;
-  placeholders: PlaceholderInfo[];
-  defaultTaskTitle: string;
-  conditionType: TriggerType | null;
-  updateField: <K extends keyof FormState>(key: K, value: FormState[K]) => void;
-}) {
-  return (
-    <div className="space-y-2">
-      <div>
-        <h3 className="text-base font-medium">Then</h3>
-        <p className="text-sm text-muted-foreground">
-          A new task will be created each time this automation triggers
-        </p>
-      </div>
-      <div className="rounded-lg border bg-card p-4 space-y-4">
-        <div className="space-y-1.5">
-          <Label className="text-xs">Task title</Label>
-          <Input
-            value={form.taskTitleTemplate}
-            onChange={(e) => updateField("taskTitleTemplate", e.target.value)}
-            placeholder={defaultTaskTitle || "[Auto] automation name"}
-          />
-          <p className="text-xs text-muted-foreground">
-            Leave empty to use the default. Supports placeholders.
-          </p>
-        </div>
-        <PromptSection
-          value={form.prompt}
-          onChange={(v) => updateField("prompt", v)}
-          placeholders={placeholders}
-        />
-        <Separator />
-        <ConfigSection
-          workspaceId={workspaceId}
-          workflowId={form.workflowId}
-          workflowStepId={form.workflowStepId}
-          agentProfileId={form.agentProfileId}
-          executorProfileId={form.executorProfileId}
-          repositorySelection={form.repositorySelection}
-          executionMode={form.executionMode}
-          conditionType={conditionType}
-          onWorkflowChange={(v) => {
-            updateField("workflowId", v);
-            updateField("workflowStepId", "");
-          }}
-          onStepChange={(v) => updateField("workflowStepId", v)}
-          onAgentProfileChange={(v) => updateField("agentProfileId", v)}
-          onExecutorProfileChange={(v) => updateField("executorProfileId", v)}
-          onRepositoryChange={(v) => updateField("repositorySelection", v)}
-          onExecutionModeChange={(v) => updateField("executionMode", v)}
-        />
-      </div>
-    </div>
-  );
-}
-
-function SettingsSection({
-  form,
-  updateField,
-}: {
-  form: FormState;
-  updateField: <K extends keyof FormState>(key: K, value: FormState[K]) => void;
-}) {
-  return (
-    <div className="space-y-3">
-      <Label className="text-xs uppercase tracking-wider text-muted-foreground">Settings</Label>
-      <div className="flex items-center gap-4">
-        <div className="flex items-center gap-2">
-          <Switch
-            checked={form.enabled}
-            onCheckedChange={(v) => updateField("enabled", v)}
-            className="cursor-pointer"
-          />
-          <Label className="text-sm">Enabled</Label>
-        </div>
-        <div className="flex items-center gap-2">
-          <Label className="text-sm">Max concurrent runs</Label>
-          <Input
-            type="number"
-            min={1}
-            value={form.maxConcurrentRuns}
-            onChange={(e) => updateField("maxConcurrentRuns", parseInt(e.target.value) || 1)}
-            className="w-20"
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function EditorFooter({
-  canSave,
-  saving,
-  isNew,
-  onSave,
-  onDelete,
-}: {
-  canSave: boolean;
-  saving: boolean;
-  isNew: boolean;
-  onSave: () => void;
-  onDelete: () => void;
-}) {
-  return (
-    <div className="flex items-center gap-3 pt-4">
-      <Button
-        data-testid="automation-save-button"
-        className="cursor-pointer"
-        onClick={onSave}
-        disabled={!canSave || saving}
-      >
-        {getSaveLabel(saving, isNew)}
-      </Button>
-      {!isNew && (
-        <Button
-          data-testid="automation-delete-button"
-          variant="destructive"
-          className="cursor-pointer"
-          onClick={onDelete}
-        >
-          <IconTrash className="h-4 w-4 mr-1" />
-          Delete
-        </Button>
-      )}
-    </div>
+function triggerRevision(triggers: AutomationTrigger[]): string {
+  return JSON.stringify(
+    triggers.map(({ id, type, config, enabled }) => ({ id, type, config, enabled })),
   );
 }
diff --git a/apps/web/components/automations/automation-trigger-drafts.test.ts b/apps/web/components/automations/automation-trigger-drafts.test.ts
new file mode 100644
index 0000000000..54a7edf0a1
--- /dev/null
+++ b/apps/web/components/automations/automation-trigger-drafts.test.ts
@@ -0,0 +1,120 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  addTrigger,
+  deleteTrigger,
+  getAutomation,
+  updateTrigger,
+} from "@/lib/api/domains/automation-api";
+import type { AutomationTrigger } from "@/lib/types/automation";
+import { useAutomationTriggerDrafts } from "./automation-trigger-drafts";
+
+vi.mock("@/lib/api/domains/automation-api", () => ({
+  addTrigger: vi.fn(),
+  deleteTrigger: vi.fn(),
+  getAutomation: vi.fn(),
+  updateTrigger: vi.fn(),
+}));
+
+const AUTOMATION_ID = "automation-1";
+
+function trigger(id: string, config: Record<string, unknown> = {}): AutomationTrigger {
+  return {
+    id,
+    automation_id: AUTOMATION_ID,
+    type: "scheduled",
+    config,
+    enabled: true,
+    last_evaluated_at: null,
+    created_at: "",
+    updated_at: "",
+  };
+}
+
+describe("useAutomationTriggerDrafts", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("keeps trigger edits local until persistDrafts", async () => {
+    const { result } = renderHook(() => useAutomationTriggerDrafts(AUTOMATION_ID));
+    act(() => result.current.loadTriggers([trigger("trigger-1")]));
+
+    await act(() => result.current.handleToggle("trigger-1", false));
+    await act(() => result.current.handleAdd("webhook", { filter_expression: "main" }));
+
+    expect(updateTrigger).not.toHaveBeenCalled();
+    expect(addTrigger).not.toHaveBeenCalled();
+  });
+
+  it("discards trigger changes back to the loaded baseline", async () => {
+    const { result } = renderHook(() => useAutomationTriggerDrafts(AUTOMATION_ID));
+    act(() => result.current.loadTriggers([trigger("trigger-1")]));
+
+    await act(() => result.current.handleToggle("trigger-1", false));
+    await act(() => result.current.handleAdd("webhook", {}));
+    act(() => result.current.discardDrafts());
+
+    expect(result.current.allTriggers).toEqual([trigger("trigger-1")]);
+    expect(result.current.pending).toEqual([]);
+  });
+
+  it("does not recreate completed trigger drafts when a save is retried", async () => {
+    const first = trigger("created-1");
+    const second = trigger("created-2");
+    vi.mocked(addTrigger)
+      .mockResolvedValueOnce(first)
+      .mockRejectedValueOnce(new Error("temporary failure"))
+      .mockResolvedValueOnce(second);
+    vi.mocked(getAutomation).mockResolvedValue({ triggers: [first, second] } as never);
+    const { result } = renderHook(() => useAutomationTriggerDrafts(AUTOMATION_ID));
+
+    await act(() => result.current.handleAdd("webhook", { order: 1 }));
+    await act(() => result.current.handleAdd("webhook", { order: 2 }));
+    let saveError: unknown;
+    await act(async () => {
+      try {
+        await result.current.persistDrafts();
+      } catch (error) {
+        saveError = error;
+      }
+    });
+    expect(saveError).toEqual(new Error("temporary failure"));
+    await act(() => result.current.persistDrafts());
+
+    expect(addTrigger).toHaveBeenCalledTimes(3);
+    expect(addTrigger).toHaveBeenNthCalledWith(
+      3,
+      expect.objectContaining({ config: { order: 2 } }),
+    );
+    expect(deleteTrigger).not.toHaveBeenCalled();
+  });
+
+  it("preserves a trigger edit made while save is in flight", async () => {
+    let finishUpdate: () => void = () => undefined;
+    vi.mocked(updateTrigger).mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          finishUpdate = () => resolve({ updated: true });
+        }),
+    );
+    vi.mocked(getAutomation).mockResolvedValue({
+      triggers: [{ ...trigger("trigger-1"), enabled: false }],
+    } as never);
+    const { result } = renderHook(() => useAutomationTriggerDrafts(AUTOMATION_ID));
+    act(() => result.current.loadTriggers([trigger("trigger-1")]));
+    await act(() => result.current.handleToggle("trigger-1", false));
+
+    let savePromise!: Promise<AutomationTrigger[]>;
+    act(() => {
+      savePromise = result.current.persistDrafts();
+    });
+    await act(() => result.current.handleToggle("trigger-1", true));
+    await act(async () => {
+      finishUpdate();
+      await savePromise;
+    });
+
+    expect(result.current.allTriggers[0].enabled).toBe(true);
+  });
+});
diff --git a/apps/web/components/automations/automation-trigger-drafts.ts b/apps/web/components/automations/automation-trigger-drafts.ts
new file mode 100644
index 0000000000..e92039fb67
--- /dev/null
+++ b/apps/web/components/automations/automation-trigger-drafts.ts
@@ -0,0 +1,171 @@
+import { useRef, useState, type Dispatch, type MutableRefObject, type SetStateAction } from "react";
+import {
+  addTrigger,
+  deleteTrigger,
+  getAutomation,
+  updateTrigger,
+} from "@/lib/api/domains/automation-api";
+import type { AutomationTrigger, TriggerType } from "@/lib/types/automation";
+import { generateUUID } from "@/lib/utils";
+import type { PendingTrigger } from "./automation-payload";
+
+function pendingToTrigger(pending: PendingTrigger): AutomationTrigger {
+  return {
+    id: pending.tempId,
+    automation_id: "",
+    type: pending.type,
+    config: pending.config,
+    enabled: pending.enabled,
+    last_evaluated_at: null,
+    created_at: "",
+    updated_at: "",
+  };
+}
+
+export function useAutomationTriggerDrafts(currentId: string | null) {
+  const [triggers, setTriggers] = useState<AutomationTrigger[]>([]);
+  const [baselineTriggers, setBaselineTriggers] = useState<AutomationTrigger[]>([]);
+  const [pending, setPending] = useState<PendingTrigger[]>([]);
+  const latestPendingRef = useRef(pending);
+  latestPendingRef.current = pending;
+
+  const loadTriggers = (next: AutomationTrigger[]) => {
+    setTriggers(next);
+    setBaselineTriggers(next);
+    setPending([]);
+  };
+
+  const handleAdd = async (type: TriggerType, config: Record<string, unknown>) => {
+    setPending((items) => [...items, { tempId: generateUUID(), type, config, enabled: true }]);
+  };
+
+  const updateDraft = (triggerId: string, update: Partial<AutomationTrigger>) => {
+    if (pending.some((trigger) => trigger.tempId === triggerId)) {
+      setPending((items) =>
+        items.map((trigger) =>
+          trigger.tempId === triggerId ? { ...trigger, ...update } : trigger,
+        ),
+      );
+      return;
+    }
+    setTriggers((items) =>
+      items.map((trigger) => (trigger.id === triggerId ? { ...trigger, ...update } : trigger)),
+    );
+  };
+
+  const handleUpdate = async (triggerId: string, config: Record<string, unknown>) => {
+    updateDraft(triggerId, { config });
+  };
+
+  const handleToggle = async (triggerId: string, enabled: boolean) => {
+    updateDraft(triggerId, { enabled });
+  };
+
+  const handleDelete = async (triggerId: string) => {
+    setPending((items) => items.filter((trigger) => trigger.tempId !== triggerId));
+    setTriggers((items) => items.filter((trigger) => trigger.id !== triggerId));
+  };
+
+  const allTriggers = [...triggers, ...pending.map(pendingToTrigger)];
+  const persistDrafts = async (): Promise<AutomationTrigger[]> => {
+    if (!currentId) return allTriggers;
+    await deleteRemovedTriggers(baselineTriggers, triggers, setBaselineTriggers);
+    await updateChangedTriggers(baselineTriggers, triggers, setBaselineTriggers);
+    await createPendingTriggers({
+      automationId: currentId,
+      pending,
+      latestPendingRef,
+      setPending,
+      setTriggers,
+      setBaseline: setBaselineTriggers,
+    });
+    const refreshed = await getAutomation(currentId);
+    setBaselineTriggers(refreshed.triggers ?? []);
+    return refreshed.triggers ?? [];
+  };
+
+  return {
+    loadTriggers,
+    baselineTriggers,
+    pending,
+    clearPending: () => setPending([]),
+    discardDrafts: () => {
+      setTriggers(baselineTriggers);
+      setPending([]);
+    },
+    persistDrafts,
+    allTriggers,
+    handleAdd,
+    handleUpdate,
+    handleToggle,
+    handleDelete,
+  };
+}
+
+async function deleteRemovedTriggers(
+  baseline: AutomationTrigger[],
+  current: AutomationTrigger[],
+  setBaseline: Dispatch<SetStateAction<AutomationTrigger[]>>,
+) {
+  const currentIds = new Set(current.map((trigger) => trigger.id));
+  for (const trigger of baseline) {
+    if (currentIds.has(trigger.id)) continue;
+    await deleteTrigger(trigger.id);
+    setBaseline((items) => items.filter((item) => item.id !== trigger.id));
+  }
+}
+
+async function updateChangedTriggers(
+  baseline: AutomationTrigger[],
+  current: AutomationTrigger[],
+  setBaseline: Dispatch<SetStateAction<AutomationTrigger[]>>,
+) {
+  for (const trigger of current) {
+    const saved = baseline.find((item) => item.id === trigger.id);
+    if (!saved || triggerDraftEquals(trigger, saved)) continue;
+    await updateTrigger(trigger.id, { config: trigger.config, enabled: trigger.enabled });
+    setBaseline((items) => items.map((item) => (item.id === trigger.id ? trigger : item)));
+  }
+}
+
+interface CreatePendingTriggersOptions {
+  automationId: string;
+  pending: PendingTrigger[];
+  latestPendingRef: MutableRefObject<PendingTrigger[]>;
+  setPending: Dispatch<SetStateAction<PendingTrigger[]>>;
+  setTriggers: Dispatch<SetStateAction<AutomationTrigger[]>>;
+  setBaseline: Dispatch<SetStateAction<AutomationTrigger[]>>;
+}
+
+async function createPendingTriggers({
+  automationId,
+  pending,
+  latestPendingRef,
+  setPending,
+  setTriggers,
+  setBaseline,
+}: CreatePendingTriggersOptions) {
+  for (const draft of pending) {
+    const created = await addTrigger({
+      automation_id: automationId,
+      type: draft.type,
+      config: draft.config,
+      enabled: draft.enabled,
+    });
+    const latestDraft = latestPendingRef.current.find((item) => item.tempId === draft.tempId);
+    setPending((items) => items.filter((item) => item.tempId !== draft.tempId));
+    if (latestDraft) {
+      setTriggers((items) => [
+        ...items,
+        { ...created, config: latestDraft.config, enabled: latestDraft.enabled },
+      ]);
+    }
+    setBaseline((items) => [...items, created]);
+  }
+}
+
+function triggerDraftEquals(left: AutomationTrigger, right: AutomationTrigger): boolean {
+  return (
+    left.enabled === right.enabled && JSON.stringify(left.config) === JSON.stringify(right.config)
+  );
+}
diff --git a/apps/web/components/automations/automations-list-page.tsx b/apps/web/components/automations/automations-list-page.tsx
index ee1dedbbb0..f29f823d0c 100644
--- a/apps/web/components/automations/automations-list-page.tsx
+++ b/apps/web/components/automations/automations-list-page.tsx
@@ -6,6 +6,7 @@ import { Separator } from "@kandev/ui/separator";
 import { IconPlus, IconBolt } from "@tabler/icons-react";
 import { useAutomations } from "@/hooks/domains/settings/use-automations";
 import { AutomationsTable } from "./automations-table";
+import { useAutomationEnabledDrafts } from "./use-automation-enabled-drafts";
 
 type AutomationsListPageProps = {
   workspaceId: string;
@@ -14,14 +15,7 @@ type AutomationsListPageProps = {
 export function AutomationsListPage({ workspaceId }: AutomationsListPageProps) {
   const router = useRouter();
   const { items, loading, enable, disable, trigger, remove } = useAutomations(workspaceId);
-
-  const handleToggleEnabled = async (id: string, enabled: boolean) => {
-    if (enabled) {
-      await enable(id);
-    } else {
-      await disable(id);
-    }
-  };
+  const enabledDrafts = useAutomationEnabledDrafts({ automations: items, enable, disable });
 
   const handleTrigger = async (id: string) => {
     await trigger(id);
@@ -57,9 +51,10 @@ export function AutomationsListPage({ workspaceId }: AutomationsListPageProps) {
         <div className="py-12 text-center text-muted-foreground">Loading automations...</div>
       ) : (
         <AutomationsTable
-          automations={items}
+          automations={enabledDrafts.automations}
+          dirtyIds={enabledDrafts.dirtyIds}
           workspaceId={workspaceId}
-          onToggleEnabled={handleToggleEnabled}
+          onToggleEnabled={enabledDrafts.setEnabled}
           onTrigger={handleTrigger}
           onDelete={handleDelete}
         />
diff --git a/apps/web/components/automations/automations-table.test.tsx b/apps/web/components/automations/automations-table.test.tsx
new file mode 100644
index 0000000000..e2e544d4d9
--- /dev/null
+++ b/apps/web/components/automations/automations-table.test.tsx
@@ -0,0 +1,47 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { TooltipProvider } from "@kandev/ui/tooltip";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { Automation } from "@/lib/types/automation";
+import { AutomationsTable } from "./automations-table";
+
+vi.mock("@/lib/routing/client-router", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+const automation = {
+  id: "automation-1",
+  name: "Daily check",
+  enabled: false,
+  execution_mode: "task",
+  triggers: [],
+  last_triggered_at: null,
+} as unknown as Automation;
+
+afterEach(cleanup);
+
+describe("AutomationsTable", () => {
+  it("marks a changed toggle, its row, and the table container as dirty", () => {
+    render(
+      <TooltipProvider>
+        <AutomationsTable
+          automations={[automation]}
+          dirtyIds={new Set([automation.id])}
+          workspaceId="workspace-1"
+          onToggleEnabled={vi.fn()}
+          onTrigger={vi.fn()}
+          onDelete={vi.fn()}
+        />
+      </TooltipProvider>,
+    );
+
+    expect(screen.getByTestId("automations-table").getAttribute("data-settings-dirty")).toBe(
+      "true",
+    );
+    expect(
+      screen.getByTestId("automation-row-automation-1").getAttribute("data-settings-dirty"),
+    ).toBe("true");
+    expect(
+      screen.getByTestId("automation-enabled-automation-1").getAttribute("data-settings-dirty"),
+    ).toBe("true");
+  });
+});
diff --git a/apps/web/components/automations/automations-table.tsx b/apps/web/components/automations/automations-table.tsx
index d0de565cf7..f8b650a5a6 100644
--- a/apps/web/components/automations/automations-table.tsx
+++ b/apps/web/components/automations/automations-table.tsx
@@ -12,6 +12,7 @@ import { formatRelativeTime } from "./format-utils";
 
 type AutomationsTableProps = {
   automations: Automation[];
+  dirtyIds: ReadonlySet<string>;
   workspaceId: string;
   onToggleEnabled: (id: string, enabled: boolean) => void;
   onTrigger: (id: string) => void;
@@ -93,6 +94,7 @@ function RowActions({
 
 export function AutomationsTable({
   automations,
+  dirtyIds,
   workspaceId,
   onToggleEnabled,
   onTrigger,
@@ -101,7 +103,12 @@ export function AutomationsTable({
   const router = useRouter();
 
   return (
-    <div className="rounded-md border" data-testid="automations-table">
+    <div
+      className="rounded-md border"
+      data-testid="automations-table"
+      data-settings-dirty={dirtyIds.size > 0}
+      data-settings-dirty-level="container"
+    >
       <Table>
         <TableHeader>
           <TableRow className="hover:bg-transparent focus-within:bg-transparent">
@@ -129,6 +136,8 @@ export function AutomationsTable({
               <TableRow
                 key={a.id}
                 data-testid={`automation-row-${a.id}`}
+                data-settings-dirty={dirtyIds.has(a.id)}
+                data-settings-dirty-level="container"
                 className="cursor-pointer hover:bg-muted/50"
                 onClick={() =>
                   router.push(`/settings/workspace/${workspaceId}/automations/${a.id}`)
@@ -148,6 +157,7 @@ export function AutomationsTable({
                     data-testid={`automation-enabled-${a.id}`}
                     size="sm"
                     checked={a.enabled}
+                    data-settings-dirty={dirtyIds.has(a.id)}
                     onCheckedChange={(checked) => onToggleEnabled(a.id, checked)}
                     className="cursor-pointer"
                   />
diff --git a/apps/web/components/automations/config-section.tsx b/apps/web/components/automations/config-section.tsx
index f317b8a956..71fec06e48 100644
--- a/apps/web/components/automations/config-section.tsx
+++ b/apps/web/components/automations/config-section.tsx
@@ -35,6 +35,14 @@ type ConfigSectionProps = {
   repositorySelection: RepositorySelection;
   executionMode: ExecutionMode;
   conditionType: TriggerType | null;
+  dirtyFields?: {
+    executionMode: boolean;
+    workflowId: boolean;
+    workflowStepId: boolean;
+    agentProfileId: boolean;
+    executorProfileId: boolean;
+    repositorySelection: boolean;
+  };
   onWorkflowChange: (id: string) => void;
   onStepChange: (id: string) => void;
   onAgentProfileChange: (id: string) => void;
@@ -45,6 +53,14 @@ type ConfigSectionProps = {
 
 const REPO_NONE_OPTION_ID = "__none__";
 const DISCOVERED_PREFIX = "path:";
+const CLEAN_FIELDS = {
+  executionMode: false,
+  workflowId: false,
+  workflowStepId: false,
+  agentProfileId: false,
+  executorProfileId: false,
+  repositorySelection: false,
+};
 
 function selectionToOptionId(sel: RepositorySelection): string {
   if (sel.kind === "registered") return sel.id;
@@ -160,6 +176,7 @@ export function ConfigSection({
   repositorySelection,
   executionMode,
   conditionType,
+  dirtyFields = CLEAN_FIELDS,
   onWorkflowChange,
   onStepChange,
   onAgentProfileChange,
@@ -177,14 +194,10 @@ export function ConfigSection({
   const executors = useAppStore((state) => state.executors.items);
   const steps = useWorkflowSteps(workflowId);
 
-  const filteredAgentProfiles = useMemo(
-    () => agentProfiles.filter((p) => !p.cli_passthrough),
-    [agentProfiles],
-  );
-  const allExecutorProfiles = useMemo(
-    () => executors.filter((e) => e.type !== "local").flatMap((e) => e.profiles ?? []),
-    [executors],
-  );
+  const filteredAgentProfiles = agentProfiles.filter((profile) => !profile.cli_passthrough);
+  const allExecutorProfiles = executors
+    .filter((executor) => executor.type !== "local")
+    .flatMap((executor) => executor.profiles ?? []);
   const isPRTrigger = conditionType === "github_pr";
   const isRunMode = executionMode === "run";
   const repositoryItems = useMemo(
@@ -202,6 +215,7 @@ export function ConfigSection({
           testId="execution-mode-selector"
           label="Execution Mode"
           value={executionMode}
+          isDirty={dirtyFields.executionMode}
           onChange={(v) => onExecutionModeChange(v as ExecutionMode)}
           placeholder="Select mode"
           items={EXECUTION_MODE_ITEMS}
@@ -212,6 +226,8 @@ export function ConfigSection({
             workflowStepId={workflowStepId}
             workflows={workflows}
             steps={steps}
+            workflowDirty={dirtyFields.workflowId}
+            workflowStepDirty={dirtyFields.workflowStepId}
             onWorkflowChange={onWorkflowChange}
             onStepChange={onStepChange}
           />
@@ -219,6 +235,7 @@ export function ConfigSection({
         <SelectField
           label="Agent Profile"
           value={agentProfileId}
+          isDirty={dirtyFields.agentProfileId}
           onChange={onAgentProfileChange}
           placeholder="Select agent"
           items={filteredAgentProfiles.map((p) => ({
@@ -229,6 +246,7 @@ export function ConfigSection({
         <SelectField
           label="Executor Profile"
           value={executorProfileId}
+          isDirty={dirtyFields.executorProfileId}
           onChange={onExecutorProfileChange}
           placeholder="Select executor"
           items={allExecutorProfiles.map((p) => ({ id: p.id, label: p.name }))}
@@ -237,6 +255,7 @@ export function ConfigSection({
           testId="repository-selector"
           label="Repository"
           value={selectionToOptionId(repositorySelection)}
+          isDirty={dirtyFields.repositorySelection}
           onChange={(v) =>
             onRepositoryChange(pickSelectionFromOptionId(v, repositories, discoveredRepos))
           }
@@ -255,6 +274,8 @@ function WorkflowFields({
   workflowStepId,
   workflows,
   steps,
+  workflowDirty,
+  workflowStepDirty,
   onWorkflowChange,
   onStepChange,
 }: {
@@ -262,6 +283,8 @@ function WorkflowFields({
   workflowStepId: string;
   workflows: Array<{ id: string; name: string }>;
   steps: StepOption[];
+  workflowDirty: boolean;
+  workflowStepDirty: boolean;
   onWorkflowChange: (id: string) => void;
   onStepChange: (id: string) => void;
 }) {
@@ -278,6 +301,7 @@ function WorkflowFields({
         label="Workflow"
         required
         value={workflowId}
+        isDirty={workflowDirty}
         onChange={onWorkflowChange}
         placeholder="Select workflow"
         items={workflows.map((w) => ({ id: w.id, label: w.name }))}
@@ -288,6 +312,7 @@ function WorkflowFields({
         label="Workflow Step"
         required
         value={workflowStepId}
+        isDirty={workflowStepDirty}
         onChange={onStepChange}
         placeholder={hasWorkflow ? "Select step" : "Pick a workflow first"}
         items={steps.map((s) => ({ id: s.id, label: s.name }))}
@@ -308,6 +333,7 @@ function SelectField({
   disabled,
   helpText,
   required,
+  isDirty = false,
 }: {
   testId?: string;
   label: string;
@@ -318,6 +344,7 @@ function SelectField({
   disabled?: boolean;
   helpText?: string;
   required?: boolean;
+  isDirty?: boolean;
 }) {
   const invalid = required && !value;
   const helpId = testId && helpText ? `${testId}-help` : undefined;
@@ -334,6 +361,7 @@ function SelectField({
           className="cursor-pointer"
           aria-describedby={invalid ? helpId : undefined}
           aria-invalid={invalid ? true : undefined}
+          data-settings-dirty={isDirty}
         >
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
diff --git a/apps/web/components/automations/prompt-section.tsx b/apps/web/components/automations/prompt-section.tsx
index 0ecc5e851a..a53e679e77 100644
--- a/apps/web/components/automations/prompt-section.tsx
+++ b/apps/web/components/automations/prompt-section.tsx
@@ -8,23 +8,30 @@ import { toScriptPlaceholders } from "./automation-placeholders";
 
 type PromptSectionProps = {
   value: string;
+  isDirty: boolean;
   onChange: (value: string) => void;
   placeholders: PlaceholderInfo[];
 };
 
-export function PromptSection({ value, onChange, placeholders }: PromptSectionProps) {
+export function PromptSection({ value, isDirty, onChange, placeholders }: PromptSectionProps) {
   const scriptPlaceholders = useMemo(() => toScriptPlaceholders(placeholders), [placeholders]);
 
   return (
     <div className="space-y-3">
       <Label className="text-xs uppercase tracking-wider text-muted-foreground">Instructions</Label>
-      <ScriptEditor
-        value={value}
-        onChange={onChange}
-        language="plaintext"
-        height="160px"
-        placeholders={scriptPlaceholders}
-      />
+      <div
+        className="rounded-md border border-transparent"
+        data-settings-dirty={isDirty}
+        data-settings-dirty-level="container"
+      >
+        <ScriptEditor
+          value={value}
+          onChange={onChange}
+          language="plaintext"
+          height="160px"
+          placeholders={scriptPlaceholders}
+        />
+      </div>
       {placeholders.length > 0 && (
         <div className="text-xs text-muted-foreground space-y-1">
           <p className="font-medium">Available placeholders:</p>
diff --git a/apps/web/components/automations/schedule-selector.tsx b/apps/web/components/automations/schedule-selector.tsx
index 3908555c8e..9be93c6eb3 100644
--- a/apps/web/components/automations/schedule-selector.tsx
+++ b/apps/web/components/automations/schedule-selector.tsx
@@ -9,6 +9,7 @@ import { IconInfoCircle } from "@tabler/icons-react";
 
 type ScheduleSelectorProps = {
   config: Record<string, unknown> | null;
+  isDirty?: boolean;
   onChange: (config: Record<string, unknown>) => void;
 };
 
@@ -35,7 +36,7 @@ const PRESETS = [
   { label: "Weekly", expression: "@weekly" },
 ] as const;
 
-export function ScheduleSelector({ config, onChange }: ScheduleSelectorProps) {
+export function ScheduleSelector({ config, isDirty = false, onChange }: ScheduleSelectorProps) {
   const configExpr = (config?.cron_expression as string) ?? "";
   const [customInput, setCustomInput] = useState(configExpr);
   const [error, setError] = useState<string | null>(null);
@@ -106,6 +107,7 @@ export function ScheduleSelector({ config, onChange }: ScheduleSelectorProps) {
           }}
           onBlur={handleCustomBlur}
           data-testid="schedule-custom-input"
+          data-settings-dirty={isDirty}
           placeholder="@every 2h30m"
           className={`font-mono text-sm max-w-xs ${error ? "border-destructive" : ""}`}
         />
diff --git a/apps/web/components/automations/trigger-card.tsx b/apps/web/components/automations/trigger-card.tsx
index 6e8d0f512b..e35c6b874a 100644
--- a/apps/web/components/automations/trigger-card.tsx
+++ b/apps/web/components/automations/trigger-card.tsx
@@ -22,6 +22,7 @@ import { WebhookConfig } from "./trigger-configs/webhook-config";
 
 type TriggerCardProps = {
   trigger: AutomationTrigger;
+  savedTrigger?: AutomationTrigger;
   automationId: string | null;
   workspaceId: string;
   onUpdate: (config: Record<string, unknown>) => void;
@@ -86,6 +87,7 @@ function getTriggerSummary(trigger: AutomationTrigger): string {
 
 export function TriggerCard({
   trigger,
+  savedTrigger,
   automationId,
   workspaceId,
   onUpdate,
@@ -95,9 +97,17 @@ export function TriggerCard({
   const [expanded, setExpanded] = useState(false);
   const Icon = TRIGGER_ICON[trigger.type];
   const color = TRIGGER_COLOR[trigger.type];
+  const isDirty =
+    !savedTrigger ||
+    trigger.enabled !== savedTrigger.enabled ||
+    JSON.stringify(trigger.config) !== JSON.stringify(savedTrigger.config);
 
   return (
-    <div className="rounded-lg border bg-card">
+    <div
+      className="rounded-lg border bg-card"
+      data-settings-dirty={isDirty}
+      data-settings-dirty-level="container"
+    >
       <div className="flex items-center gap-3 px-4 py-3">
         <Icon className={`h-4 w-4 ${color} shrink-0`} />
         <button
@@ -127,6 +137,7 @@ export function TriggerCard({
         <Switch
           size="sm"
           checked={trigger.enabled}
+          data-settings-dirty={!savedTrigger || trigger.enabled !== savedTrigger.enabled}
           onCheckedChange={onToggleEnabled}
           className="cursor-pointer"
         />
diff --git a/apps/web/components/automations/triggers-section.tsx b/apps/web/components/automations/triggers-section.tsx
index f5be757006..f6ca0dd0b7 100644
--- a/apps/web/components/automations/triggers-section.tsx
+++ b/apps/web/components/automations/triggers-section.tsx
@@ -10,6 +10,7 @@ import { TriggerPicker } from "./trigger-picker";
 
 type TriggersSectionProps = {
   triggers: AutomationTrigger[];
+  savedTriggers: AutomationTrigger[];
   automationId: string | null;
   workspaceId: string;
   triggerTypes: TriggerTypeInfo[];
@@ -21,6 +22,7 @@ type TriggersSectionProps = {
 
 export function TriggersSection({
   triggers,
+  savedTriggers,
   automationId,
   workspaceId,
   triggerTypes,
@@ -30,13 +32,25 @@ export function TriggersSection({
   onDeleteTrigger,
 }: TriggersSectionProps) {
   const webhookTrigger = useMemo(() => triggers.find((t) => t.type === "webhook"), [triggers]);
+  const savedWebhookTrigger = useMemo(
+    () => savedTriggers.find((t) => t.type === "webhook"),
+    [savedTriggers],
+  );
   const isWebhookMode = !!webhookTrigger;
 
   const scheduleTrigger = useMemo(() => triggers.find((t) => t.type === "scheduled"), [triggers]);
+  const savedScheduleTrigger = useMemo(
+    () => savedTriggers.find((t) => t.type === "scheduled"),
+    [savedTriggers],
+  );
   const conditionTrigger = useMemo(
     () => triggers.find((t) => t.type !== "scheduled" && t.type !== "webhook"),
     [triggers],
   );
+  const savedConditionTrigger = useMemo(
+    () => savedTriggers.find((t) => t.type !== "scheduled" && t.type !== "webhook"),
+    [savedTriggers],
+  );
 
   const handleScheduleChange = (config: Record<string, unknown>) => {
     if (scheduleTrigger) {
@@ -64,6 +78,7 @@ export function TriggersSection({
       <div className="space-y-3">
         <TriggerCard
           trigger={webhookTrigger}
+          savedTrigger={savedWebhookTrigger}
           automationId={automationId}
           workspaceId={workspaceId}
           onUpdate={(config) => onUpdateTrigger(webhookTrigger.id, config)}
@@ -77,9 +92,14 @@ export function TriggersSection({
 
   return (
     <div className="space-y-4">
-      <ScheduleArea scheduleTrigger={scheduleTrigger} onScheduleChange={handleScheduleChange} />
+      <ScheduleArea
+        scheduleTrigger={scheduleTrigger}
+        savedScheduleTrigger={savedScheduleTrigger}
+        onScheduleChange={handleScheduleChange}
+      />
       <ConditionArea
         trigger={conditionTrigger}
+        savedTrigger={savedConditionTrigger}
         automationId={automationId}
         workspaceId={workspaceId}
         triggerTypes={triggerTypes}
@@ -95,21 +115,31 @@ export function TriggersSection({
 
 function ScheduleArea({
   scheduleTrigger,
+  savedScheduleTrigger,
   onScheduleChange,
 }: {
   scheduleTrigger: AutomationTrigger | undefined;
+  savedScheduleTrigger: AutomationTrigger | undefined;
   onScheduleChange: (config: Record<string, unknown>) => void;
 }) {
   return (
     <div className="space-y-2">
       <Label className="text-xs font-medium">Schedule</Label>
-      <ScheduleSelector config={scheduleTrigger?.config ?? null} onChange={onScheduleChange} />
+      <ScheduleSelector
+        config={scheduleTrigger?.config ?? null}
+        isDirty={
+          JSON.stringify(scheduleTrigger?.config ?? null) !==
+          JSON.stringify(savedScheduleTrigger?.config ?? null)
+        }
+        onChange={onScheduleChange}
+      />
     </div>
   );
 }
 
 function ConditionArea({
   trigger,
+  savedTrigger,
   automationId,
   workspaceId,
   triggerTypes,
@@ -119,6 +149,7 @@ function ConditionArea({
   onDeleteTrigger,
 }: {
   trigger: AutomationTrigger | undefined;
+  savedTrigger: AutomationTrigger | undefined;
   automationId: string | null;
   workspaceId: string;
   triggerTypes: TriggerTypeInfo[];
@@ -134,6 +165,7 @@ function ConditionArea({
         <div className="space-y-2">
           <TriggerCard
             trigger={trigger}
+            savedTrigger={savedTrigger?.id === trigger.id ? savedTrigger : undefined}
             automationId={automationId}
             workspaceId={workspaceId}
             onUpdate={(config) => onUpdateTrigger(trigger.id, config)}
diff --git a/apps/web/components/automations/use-automation-enabled-drafts.test.tsx b/apps/web/components/automations/use-automation-enabled-drafts.test.tsx
new file mode 100644
index 0000000000..a16d92dfeb
--- /dev/null
+++ b/apps/web/components/automations/use-automation-enabled-drafts.test.tsx
@@ -0,0 +1,65 @@
+import { act, fireEvent, render, renderHook, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SettingsSaveProvider } from "@/components/settings/settings-save-provider";
+import type { Automation } from "@/lib/types/automation";
+import { useAutomationEnabledDrafts } from "./use-automation-enabled-drafts";
+
+const automation = { id: "automation-1", enabled: true } as Automation;
+
+function Harness({ disable }: { disable: (id: string) => Promise<unknown> }) {
+  const draft = useAutomationEnabledDrafts({
+    automations: [automation],
+    enable: vi.fn(),
+    disable,
+  });
+  return (
+    <button
+      data-dirty={draft.dirtyIds.has(automation.id)}
+      onClick={() => draft.setEnabled(automation.id, !draft.automations[0].enabled)}
+    >
+      Toggle
+    </button>
+  );
+}
+
+describe("useAutomationEnabledDrafts", () => {
+  it("persists list toggles only through the shared save action", async () => {
+    const disable = vi.fn().mockResolvedValue(undefined);
+    render(
+      <SettingsSaveProvider>
+        <Harness disable={disable} />
+      </SettingsSaveProvider>,
+    );
+
+    const toggle = screen.getByRole("button", { name: "Toggle" });
+    fireEvent.click(toggle);
+    expect(disable).not.toHaveBeenCalled();
+    expect(toggle.getAttribute("data-dirty")).toBe("true");
+
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+    await waitFor(() => expect(disable).toHaveBeenCalledWith(automation.id));
+    await waitFor(() => expect(toggle.getAttribute("data-dirty")).toBe("false"));
+  });
+
+  it("does not retry a toggle that succeeded before another toggle failed", async () => {
+    const enable = vi.fn().mockRejectedValue(new Error("temporary failure"));
+    const disable = vi.fn().mockResolvedValue(undefined);
+    const second = { ...automation, id: "automation-2", enabled: false };
+    const { result } = renderHook(
+      () => useAutomationEnabledDrafts({ automations: [automation, second], enable, disable }),
+      { wrapper: SettingsSaveProvider },
+    );
+
+    act(() => {
+      result.current.setEnabled(automation.id, false);
+      result.current.setEnabled(second.id, true);
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+    await waitFor(() => expect(disable).toHaveBeenCalledTimes(1));
+    expect(enable).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(screen.getByRole("button", { name: "Retry save" }));
+    await waitFor(() => expect(enable).toHaveBeenCalledTimes(2));
+    expect(disable).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/apps/web/components/automations/use-automation-enabled-drafts.ts b/apps/web/components/automations/use-automation-enabled-drafts.ts
new file mode 100644
index 0000000000..41327185d2
--- /dev/null
+++ b/apps/web/components/automations/use-automation-enabled-drafts.ts
@@ -0,0 +1,69 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
+import type { Automation } from "@/lib/types/automation";
+
+type EnabledOverrides = Record<string, boolean>;
+
+type AutomationEnabledDraftsOptions = {
+  automations: Automation[];
+  enable: (id: string) => Promise<unknown>;
+  disable: (id: string) => Promise<unknown>;
+};
+
+export function useAutomationEnabledDrafts({
+  automations,
+  enable,
+  disable,
+}: AutomationEnabledDraftsOptions) {
+  const [overrides, setOverrides] = useState<EnabledOverrides>({});
+  const dirtyEntries = useMemo(
+    () =>
+      Object.entries(overrides)
+        .filter(([id, enabled]) => {
+          const saved = automations.find((automation) => automation.id === id);
+          return saved && saved.enabled !== enabled;
+        })
+        .sort(([left], [right]) => left.localeCompare(right)),
+    [automations, overrides],
+  );
+  const revision = JSON.stringify(dirtyEntries);
+  const dirtyIds = useMemo(() => new Set(dirtyEntries.map(([id]) => id)), [dirtyEntries]);
+
+  const save = useCallback(async () => {
+    let firstError: unknown;
+    for (const [id, enabled] of dirtyEntries) {
+      try {
+        await (enabled ? enable(id) : disable(id));
+        setOverrides((current) => {
+          if (current[id] !== enabled) return current;
+          const next = { ...current };
+          delete next[id];
+          return next;
+        });
+      } catch (error) {
+        firstError ??= error;
+      }
+    }
+    if (firstError) throw firstError;
+  }, [dirtyEntries, disable, enable]);
+
+  useSettingsSaveContributor({
+    id: "automation-list-enabled",
+    revision,
+    isDirty: dirtyEntries.length > 0,
+    save,
+    discard: () => setOverrides({}),
+  });
+
+  return {
+    automations: automations.map((automation) => ({
+      ...automation,
+      enabled: overrides[automation.id] ?? automation.enabled,
+    })),
+    dirtyIds,
+    setEnabled: (id: string, enabled: boolean) =>
+      setOverrides((current) => ({ ...current, [id]: enabled })),
+  };
+}
diff --git a/apps/web/components/config-chat/config-chat-panel.tsx b/apps/web/components/config-chat/config-chat-panel.tsx
index 5e1a01aa32..6ed1a771fe 100644
--- a/apps/web/components/config-chat/config-chat-panel.tsx
+++ b/apps/web/components/config-chat/config-chat-panel.tsx
@@ -11,6 +11,7 @@ import { QuickChatSessionView } from "@/components/quick-chat/quick-chat-session
 import { isQuickChatSetupSessionId } from "@/lib/state/slices/ui/quick-chat-session";
 import { ConfigChatSetup } from "./config-chat-setup";
 import { useConfigChat } from "./use-config-chat";
+import { cn } from "@/lib/utils";
 
 function useConfigChatPanelStore() {
   return useAppStore(
@@ -108,11 +109,29 @@ function useConfigChatPanelController(workspaceId: string) {
   };
 }
 
+type ConfigChatPanelProps = {
+  workspaceId: string;
+  setFloatingActionsHost?: (host: HTMLElement | null) => void;
+};
+
+function ConfigChatFloatingActionsHost({
+  setHost,
+}: {
+  setHost?: ConfigChatPanelProps["setFloatingActionsHost"];
+}) {
+  return (
+    <div
+      ref={setHost}
+      className="pointer-events-none absolute right-0 bottom-[calc(100%+0.75rem)] z-10 max-w-[calc(100vw_-_2rem_-_env(safe-area-inset-left)_-_env(safe-area-inset-right))]"
+      data-testid="config-chat-floating-actions"
+    />
+  );
+}
+
 export const ConfigChatPanel = memo(function ConfigChatPanel({
   workspaceId,
-}: {
-  workspaceId: string;
-}) {
+  setFloatingActionsHost,
+}: ConfigChatPanelProps) {
   const panel = useConfigChatPanelController(workspaceId);
 
   return (
@@ -122,7 +141,12 @@ export const ConfigChatPanel = memo(function ConfigChatPanel({
           <PopoverTrigger asChild>
             <Button
               size="icon"
-              className="fixed bottom-6 right-6 z-50 h-12 w-12 cursor-pointer rounded-full shadow-lg"
+              aria-hidden={panel.isOpen}
+              tabIndex={panel.isOpen ? -1 : undefined}
+              className={cn(
+                "fixed bottom-6 right-6 z-50 h-12 w-12 cursor-pointer rounded-full shadow-lg",
+                panel.isOpen && "pointer-events-none opacity-0",
+              )}
               aria-label="Configuration Chat"
             >
               <IconSparkles className="h-6 w-6" />
@@ -140,25 +164,31 @@ export const ConfigChatPanel = memo(function ConfigChatPanel({
         sideOffset={8}
         onInteractOutside={(event) => event.preventDefault()}
         data-testid="config-chat-popover"
-        className="flex h-[min(550px,calc(100dvh-6rem))] w-[min(420px,calc(100vw-2rem))] flex-col gap-0 overflow-hidden p-0 shadow-2xl"
+        className="relative flex h-[min(550px,calc(100dvh_-_11rem_-_env(safe-area-inset-top)_-_env(safe-area-inset-bottom)))] max-h-[550px] w-[min(420px,calc(100vw_-_2rem))] flex-col gap-0 overflow-visible p-0 shadow-2xl"
       >
-        <PanelHeader onExpand={panel.handleExpand} onClose={() => panel.handleOpenChange(false)} />
-        {panel.session ? (
-          <QuickChatSessionView
-            session={panel.session}
-            onInitialPromptSent={() =>
-              panel.setQuickChatInitialPrompt(panel.session!.sessionId, undefined)
-            }
+        <ConfigChatFloatingActionsHost setHost={setFloatingActionsHost} />
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-[inherit]">
+          <PanelHeader
+            onExpand={panel.handleExpand}
+            onClose={() => panel.handleOpenChange(false)}
           />
-        ) : (
-          <ConfigChatSetup
-            presentation="floating"
-            defaultProfileId={panel.defaultProfileId}
-            isStarting={panel.isStarting}
-            error={panel.error}
-            onStart={panel.handleStart}
-          />
-        )}
+          {panel.session ? (
+            <QuickChatSessionView
+              session={panel.session}
+              onInitialPromptSent={() =>
+                panel.setQuickChatInitialPrompt(panel.session!.sessionId, undefined)
+              }
+            />
+          ) : (
+            <ConfigChatSetup
+              presentation="floating"
+              defaultProfileId={panel.defaultProfileId}
+              isStarting={panel.isStarting}
+              error={panel.error}
+              onStart={panel.handleStart}
+            />
+          )}
+        </div>
       </PopoverContent>
     </Popover>
   );
diff --git a/apps/web/components/config-chat/config-chat-provider.tsx b/apps/web/components/config-chat/config-chat-provider.tsx
index 800922fdfd..3d4c582bbd 100644
--- a/apps/web/components/config-chat/config-chat-provider.tsx
+++ b/apps/web/components/config-chat/config-chat-provider.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useSyncExternalStore } from "react";
+import { createContext, useContext, useState, useSyncExternalStore } from "react";
 import { usePathname } from "@/lib/routing/client-router";
 import { useAppStore } from "@/components/state-provider";
 import { useSettingsData } from "@/hooks/domains/settings/use-settings-data";
@@ -10,11 +10,16 @@ import { ConfigChatPanel } from "./config-chat-panel";
 const emptySubscribe = () => () => {};
 const getClientSnapshot = () => true;
 const getServerSnapshot = () => false;
+const ConfigChatFloatingActionsContext = createContext<HTMLElement | null>(null);
 
 function useIsMounted() {
   return useSyncExternalStore(emptySubscribe, getClientSnapshot, getServerSnapshot);
 }
 
+export function useConfigChatFloatingActionsHost(): HTMLElement | null {
+  return useContext(ConfigChatFloatingActionsContext);
+}
+
 /**
  * Global provider for Config Chat functionality.
  * Renders the Settings FAB and floating configuration chat.
@@ -25,16 +30,20 @@ export function ConfigChatProvider({ children }: { children: React.ReactNode })
   const mounted = useIsMounted();
   const pathname = usePathname();
   const isSettingsPage = pathname.startsWith("/settings");
+  const [floatingActionsHost, setFloatingActionsHost] = useState<HTMLElement | null>(null);
 
   // Preload agent profiles so they're available when config chat is opened
   useSettingsData(true);
 
   return (
-    <>
+    <ConfigChatFloatingActionsContext.Provider value={floatingActionsHost}>
       {children}
       {mounted && activeWorkspace && isSettingsPage && (
-        <ConfigChatPanel workspaceId={activeWorkspace} />
+        <ConfigChatPanel
+          workspaceId={activeWorkspace}
+          setFloatingActionsHost={setFloatingActionsHost}
+        />
       )}
-    </>
+    </ConfigChatFloatingActionsContext.Provider>
   );
 }
diff --git a/apps/web/components/github/action-presets-section.tsx b/apps/web/components/github/action-presets-section.tsx
index a85bf3a89e..820c6e7050 100644
--- a/apps/web/components/github/action-presets-section.tsx
+++ b/apps/web/components/github/action-presets-section.tsx
@@ -3,11 +3,14 @@
 import { createElement, useMemo, useState, useCallback } from "react";
 import { IconPlus, IconTrash, IconRefresh } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
+import { CardContent } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@kandev/ui/tabs";
 import { useToast } from "@/components/toast-provider";
 import { SettingsSection } from "@/components/settings/settings-section";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
 import { useGitHubActionPresets } from "@/hooks/domains/github/use-github-action-presets";
 import {
   DEFAULT_ISSUE_PRESETS,
@@ -47,10 +50,22 @@ function newPreset(): GitHubActionPreset {
   };
 }
 
-function PresetIconSelect({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+function PresetIconSelect({
+  value,
+  isDirty,
+  onChange,
+}: {
+  value: string;
+  isDirty: boolean;
+  onChange: (v: string) => void;
+}) {
   return (
     <Select value={value} onValueChange={onChange}>
-      <SelectTrigger className="!h-8 py-0.5 text-sm cursor-pointer" aria-label="Icon">
+      <SelectTrigger
+        className="!h-8 py-0.5 text-sm cursor-pointer"
+        aria-label="Icon"
+        data-settings-dirty={isDirty}
+      >
         <SelectValue>
           {createElement(iconForPresetKey(value), { className: "h-4 w-4" })}
         </SelectValue>
@@ -74,29 +89,40 @@ function PresetIconSelect({ value, onChange }: { value: string; onChange: (v: st
 
 function PresetRow({
   preset,
+  baseline,
   expanded,
   onToggle,
   onPatch,
   onRemove,
 }: {
   preset: GitHubActionPreset;
+  baseline?: GitHubActionPreset;
   expanded: boolean;
   onToggle: () => void;
   onPatch: (patch: Partial<GitHubActionPreset>) => void;
   onRemove: () => void;
 }) {
   return (
-    <div className="rounded-md border">
+    <div
+      className="rounded-md border"
+      data-settings-dirty={JSON.stringify(preset) !== JSON.stringify(baseline)}
+      data-settings-dirty-level="container"
+    >
       <div className="flex items-end gap-2 p-2">
         <div className="flex flex-col gap-0.5">
           <span className="text-[10px] text-muted-foreground">Icon</span>
-          <PresetIconSelect value={preset.icon} onChange={(v) => onPatch({ icon: v })} />
+          <PresetIconSelect
+            value={preset.icon}
+            isDirty={preset.icon !== baseline?.icon}
+            onChange={(v) => onPatch({ icon: v })}
+          />
         </div>
         <div className="flex flex-col gap-0.5">
           <span className="text-[10px] text-muted-foreground">Label</span>
           <Input
             className="h-8 w-40"
             value={preset.label}
+            data-settings-dirty={preset.label !== baseline?.label}
             placeholder="Label"
             onChange={(e) => onPatch({ label: e.target.value })}
           />
@@ -106,6 +132,7 @@ function PresetRow({
           <Input
             className="h-8"
             value={preset.hint}
+            data-settings-dirty={preset.hint !== baseline?.hint}
             placeholder="Hint (optional)"
             onChange={(e) => onPatch({ hint: e.target.value })}
           />
@@ -130,7 +157,11 @@ function PresetRow({
       </div>
       {expanded && (
         <div className="px-2 pb-2 space-y-1">
-          <div className="rounded-md border overflow-hidden">
+          <div
+            className="rounded-md border overflow-hidden"
+            data-settings-dirty={preset.prompt_template !== baseline?.prompt_template}
+            data-settings-dirty-level="container"
+          >
             <ScriptEditor
               value={preset.prompt_template}
               onChange={(v) => onPatch({ prompt_template: v })}
@@ -154,10 +185,12 @@ function PresetRow({
 
 function PresetEditor({
   presets,
+  baseline,
   onChange,
   addLabel,
 }: {
   presets: GitHubActionPreset[];
+  baseline: GitHubActionPreset[];
   onChange: (presets: GitHubActionPreset[]) => void;
   addLabel: string;
 }) {
@@ -187,6 +220,7 @@ function PresetEditor({
         <PresetRow
           key={preset.id}
           preset={preset}
+          baseline={baseline.find((candidate) => candidate.id === preset.id)}
           expanded={expandedId === preset.id}
           onToggle={() => setExpandedId((id) => (id === preset.id ? null : preset.id))}
           onPatch={(p) => patch(index, p)}
@@ -207,47 +241,63 @@ function usePresetDrafts(workspaceId: string): {
   setPrDraft: (next: GitHubActionPreset[]) => void;
   setIssueDraft: (next: GitHubActionPreset[]) => void;
   dirty: boolean;
+  prBaseline: GitHubActionPreset[];
+  issueBaseline: GitHubActionPreset[];
   save: () => Promise<void>;
-  reset: () => Promise<void>;
+  reset: () => void;
+  discard: () => void;
   loading: boolean;
 } {
-  const { presets, save, reset, loading } = useGitHubActionPresets(workspaceId);
+  const { presets, save, loading } = useGitHubActionPresets(workspaceId);
   const [prDraft, setPrDraft] = useState<GitHubActionPreset[]>(() =>
     presets?.pr?.length ? presets.pr : DEFAULT_PR_PRESETS,
   );
   const [issueDraft, setIssueDraft] = useState<GitHubActionPreset[]>(() =>
     presets?.issue?.length ? presets.issue : DEFAULT_ISSUE_PRESETS,
   );
-  // Render-time conditional setState is React's documented "adjust state
-  // during render" pattern; it resets drafts whenever a new server response
-  // replaces the presets reference.
+  const [prBaseline, setPrBaseline] = useState(prDraft);
+  const [issueBaseline, setIssueBaseline] = useState(issueDraft);
+  const dirty = useMemo(
+    () =>
+      JSON.stringify(prBaseline) !== JSON.stringify(prDraft) ||
+      JSON.stringify(issueBaseline) !== JSON.stringify(issueDraft),
+    [prBaseline, issueBaseline, prDraft, issueDraft],
+  );
   const [syncedPresets, setSyncedPresets] = useState(presets);
-  if (presets && presets !== syncedPresets) {
+  if (presets && presets !== syncedPresets && !dirty) {
+    const nextPr = presets.pr?.length ? presets.pr : DEFAULT_PR_PRESETS;
+    const nextIssue = presets.issue?.length ? presets.issue : DEFAULT_ISSUE_PRESETS;
     setSyncedPresets(presets);
-    setPrDraft(presets.pr?.length ? presets.pr : DEFAULT_PR_PRESETS);
-    setIssueDraft(presets.issue?.length ? presets.issue : DEFAULT_ISSUE_PRESETS);
+    setPrBaseline(nextPr);
+    setIssueBaseline(nextIssue);
+    setPrDraft(nextPr);
+    setIssueDraft(nextIssue);
   }
 
-  const dirty = useMemo(() => {
-    const currentPR = presets?.pr ?? DEFAULT_PR_PRESETS;
-    const currentIssue = presets?.issue ?? DEFAULT_ISSUE_PRESETS;
-    return (
-      JSON.stringify(currentPR) !== JSON.stringify(prDraft) ||
-      JSON.stringify(currentIssue) !== JSON.stringify(issueDraft)
-    );
-  }, [presets, prDraft, issueDraft]);
-
   const persist = useCallback(async () => {
-    await save({ pr: prDraft, issue: issueDraft });
+    const submittedPr = prDraft;
+    const submittedIssue = issueDraft;
+    const response = await save({ pr: submittedPr, issue: submittedIssue });
+    const savedPr = response?.pr?.length ? response.pr : submittedPr;
+    const savedIssue = response?.issue?.length ? response.issue : submittedIssue;
+    setPrBaseline(savedPr);
+    setIssueBaseline(savedIssue);
+    setPrDraft((current) =>
+      JSON.stringify(current) === JSON.stringify(submittedPr) ? savedPr : current,
+    );
+    setIssueDraft((current) =>
+      JSON.stringify(current) === JSON.stringify(submittedIssue) ? savedIssue : current,
+    );
   }, [save, prDraft, issueDraft]);
 
-  const doReset = useCallback(async () => {
-    const response = await reset();
-    if (response) {
-      setPrDraft(response.pr?.length ? response.pr : DEFAULT_PR_PRESETS);
-      setIssueDraft(response.issue?.length ? response.issue : DEFAULT_ISSUE_PRESETS);
-    }
-  }, [reset]);
+  const doReset = useCallback(() => {
+    setPrDraft(DEFAULT_PR_PRESETS);
+    setIssueDraft(DEFAULT_ISSUE_PRESETS);
+  }, []);
+  const discard = useCallback(() => {
+    setPrDraft(prBaseline);
+    setIssueDraft(issueBaseline);
+  }, [prBaseline, issueBaseline]);
 
   return {
     prDraft,
@@ -255,42 +305,48 @@ function usePresetDrafts(workspaceId: string): {
     setPrDraft,
     setIssueDraft,
     dirty,
+    prBaseline,
+    issueBaseline,
     save: persist,
     reset: doReset,
+    discard,
     loading,
   };
 }
 
 export function ActionPresetsSection({ workspaceId }: { workspaceId: string }) {
   const { toast } = useToast();
-  const { prDraft, issueDraft, setPrDraft, setIssueDraft, dirty, save, reset, loading } =
-    usePresetDrafts(workspaceId);
-  const [saving, setSaving] = useState(false);
-  const [resetting, setResetting] = useState(false);
-
-  const handleSave = async () => {
-    setSaving(true);
+  const {
+    prDraft,
+    issueDraft,
+    prBaseline,
+    issueBaseline,
+    setPrDraft,
+    setIssueDraft,
+    dirty,
+    save,
+    reset,
+    discard,
+    loading,
+  } = usePresetDrafts(workspaceId);
+  const handleSave = useCallback(async () => {
     try {
       await save();
       toast({ description: "Quick actions saved", variant: "success" });
     } catch {
       toast({ description: "Failed to save quick actions", variant: "error" });
-    } finally {
-      setSaving(false);
+      throw new Error("Failed to save quick actions");
     }
-  };
-
-  const handleReset = async () => {
-    setResetting(true);
-    try {
-      await reset();
-      toast({ description: "Quick actions reset to defaults", variant: "success" });
-    } catch {
-      toast({ description: "Failed to reset quick actions", variant: "error" });
-    } finally {
-      setResetting(false);
-    }
-  };
+  }, [save, toast]);
+  useSettingsSaveContributor({
+    id: `github-action-presets:${workspaceId}`,
+    revision: JSON.stringify([prDraft, issueDraft]),
+    isDirty: dirty,
+    canSave: !loading,
+    invalidReason: loading ? "Quick actions are still loading." : undefined,
+    save: handleSave,
+    discard,
+  });
 
   return (
     <SettingsSection
@@ -301,40 +357,48 @@ export function ActionPresetsSection({ workspaceId }: { workspaceId: string }) {
           <Button
             size="sm"
             variant="outline"
-            onClick={handleReset}
-            disabled={loading || saving || resetting}
+            onClick={reset}
+            disabled={loading}
             className="cursor-pointer"
           >
             <IconRefresh className="h-3.5 w-3.5 mr-1" />
             Reset
           </Button>
-          <Button
-            size="sm"
-            onClick={handleSave}
-            disabled={!dirty || saving}
-            className="cursor-pointer"
-          >
-            Save changes
-          </Button>
         </div>
       }
     >
-      <Tabs defaultValue="pr">
-        <TabsList>
-          <TabsTrigger value="pr" className="cursor-pointer">
-            Pull requests
-          </TabsTrigger>
-          <TabsTrigger value="issue" className="cursor-pointer">
-            Issues
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="pr">
-          <PresetEditor presets={prDraft} onChange={setPrDraft} addLabel="Add PR action" />
-        </TabsContent>
-        <TabsContent value="issue">
-          <PresetEditor presets={issueDraft} onChange={setIssueDraft} addLabel="Add issue action" />
-        </TabsContent>
-      </Tabs>
+      <SettingsCard isDirty={dirty}>
+        <CardContent className="pt-6">
+          <fieldset disabled={loading} className="contents">
+            <Tabs defaultValue="pr">
+              <TabsList>
+                <TabsTrigger value="pr" className="cursor-pointer">
+                  Pull requests
+                </TabsTrigger>
+                <TabsTrigger value="issue" className="cursor-pointer">
+                  Issues
+                </TabsTrigger>
+              </TabsList>
+              <TabsContent value="pr">
+                <PresetEditor
+                  presets={prDraft}
+                  baseline={prBaseline}
+                  onChange={setPrDraft}
+                  addLabel="Add PR action"
+                />
+              </TabsContent>
+              <TabsContent value="issue">
+                <PresetEditor
+                  presets={issueDraft}
+                  baseline={issueBaseline}
+                  onChange={setIssueDraft}
+                  addLabel="Add issue action"
+                />
+              </TabsContent>
+            </Tabs>
+          </fieldset>
+        </CardContent>
+      </SettingsCard>
     </SettingsSection>
   );
 }
diff --git a/apps/web/components/github/default-queries-section.tsx b/apps/web/components/github/default-queries-section.tsx
index bee835045c..5208ded9a8 100644
--- a/apps/web/components/github/default-queries-section.tsx
+++ b/apps/web/components/github/default-queries-section.tsx
@@ -3,11 +3,14 @@
 import { useState, useCallback, useMemo } from "react";
 import { IconPlus, IconTrash, IconRefresh } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
+import { CardContent } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@kandev/ui/tabs";
 import { useToast } from "@/components/toast-provider";
 import { SettingsSection } from "@/components/settings/settings-section";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
 import {
   useDefaultQueryPresets,
   toStored,
@@ -29,20 +32,27 @@ function newPreset(): StoredQueryPreset {
 
 function QueryRow({
   preset,
+  baseline,
   onPatch,
   onRemove,
 }: {
   preset: StoredQueryPreset;
+  baseline?: StoredQueryPreset;
   onPatch: (patch: Partial<StoredQueryPreset>) => void;
   onRemove: () => void;
 }) {
   return (
-    <div className="flex items-center gap-2 rounded-md border p-2">
+    <div
+      className="flex items-center gap-2 rounded-md border p-2"
+      data-settings-dirty={JSON.stringify(preset) !== JSON.stringify(baseline)}
+      data-settings-dirty-level="container"
+    >
       <div className="flex flex-col gap-0.5">
         <span className="text-[10px] text-muted-foreground">Label</span>
         <Input
           className="h-8 w-36"
           value={preset.label}
+          data-settings-dirty={preset.label !== baseline?.label}
           placeholder="Label"
           onChange={(e) => onPatch({ label: e.target.value })}
         />
@@ -52,6 +62,7 @@ function QueryRow({
         <Input
           className="h-8 font-mono text-xs"
           value={preset.filter}
+          data-settings-dirty={preset.filter !== baseline?.filter}
           placeholder="e.g. review-requested:@me is:open"
           onChange={(e) => onPatch({ filter: e.target.value })}
         />
@@ -62,7 +73,10 @@ function QueryRow({
           value={preset.group}
           onValueChange={(v) => onPatch({ group: v as "inbox" | "created" })}
         >
-          <SelectTrigger className="h-8 w-28 cursor-pointer">
+          <SelectTrigger
+            className="h-8 w-28 cursor-pointer"
+            data-settings-dirty={preset.group !== baseline?.group}
+          >
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -90,10 +104,12 @@ function QueryRow({
 
 function QueryEditor({
   presets,
+  baseline,
   onChange,
   addLabel,
 }: {
   presets: StoredQueryPreset[];
+  baseline: StoredQueryPreset[];
   onChange: (presets: StoredQueryPreset[]) => void;
   addLabel: string;
 }) {
@@ -115,6 +131,7 @@ function QueryEditor({
         <QueryRow
           key={preset.value}
           preset={preset}
+          baseline={baseline.find((candidate) => candidate.value === preset.value)}
           onPatch={(p) => patch(index, p)}
           onRemove={() => remove(index)}
         />
@@ -127,44 +144,110 @@ function QueryEditor({
   );
 }
 
-export function DefaultQueriesSection({ workspaceId }: { workspaceId?: string }) {
+function useDefaultQueryDrafts(workspaceId?: string) {
   const { toast } = useToast();
-  const { prPresets, issuePresets, save, reset, isCustomized } = useDefaultQueryPresets(
+  const { prPresets, issuePresets, save, reset, isCustomized, isReady } = useDefaultQueryPresets(
     workspaceId ?? null,
   );
   const [prDraft, setPrDraft] = useState<StoredQueryPreset[]>(prPresets);
   const [issueDraft, setIssueDraft] = useState<StoredQueryPreset[]>(issuePresets);
-
-  // Sync drafts when external state changes
-  const [syncedPr, setSyncedPr] = useState(prPresets);
-  const [syncedIssue, setSyncedIssue] = useState(issuePresets);
-  if (prPresets !== syncedPr) {
-    setSyncedPr(prPresets);
-    setPrDraft(prPresets);
-  }
-  if (issuePresets !== syncedIssue) {
-    setSyncedIssue(issuePresets);
-    setIssueDraft(issuePresets);
-  }
+  const [prBaseline, setPrBaseline] = useState(prPresets);
+  const [issueBaseline, setIssueBaseline] = useState(issuePresets);
+  const [resetRequested, setResetRequested] = useState(false);
 
   const dirty = useMemo(
     () =>
-      JSON.stringify(prPresets) !== JSON.stringify(prDraft) ||
-      JSON.stringify(issuePresets) !== JSON.stringify(issueDraft),
-    [prPresets, issuePresets, prDraft, issueDraft],
+      resetRequested ||
+      JSON.stringify(prBaseline) !== JSON.stringify(prDraft) ||
+      JSON.stringify(issueBaseline) !== JSON.stringify(issueDraft),
+    [prBaseline, issueBaseline, prDraft, issueDraft, resetRequested],
   );
 
-  const handleSave = useCallback(() => {
-    save({ pr: prDraft, issue: issueDraft });
-    toast({ description: "Default queries saved", variant: "success" });
-  }, [save, prDraft, issueDraft, toast]);
+  const [syncedPr, setSyncedPr] = useState(prPresets);
+  const [syncedIssue, setSyncedIssue] = useState(issuePresets);
+  if (prPresets !== syncedPr && !dirty) {
+    setSyncedPr(prPresets);
+    setPrBaseline(prPresets);
+    setPrDraft(prPresets);
+    setResetRequested(false);
+  }
+  if (issuePresets !== syncedIssue && !dirty) {
+    setSyncedIssue(issuePresets);
+    setIssueBaseline(issuePresets);
+    setIssueDraft(issuePresets);
+    setResetRequested(false);
+  }
+
+  const handleSave = useCallback(async () => {
+    const submittedPr = prDraft;
+    const submittedIssue = issueDraft;
+    try {
+      if (resetRequested) await reset();
+      else await save({ pr: submittedPr, issue: submittedIssue });
+      setPrBaseline(submittedPr);
+      setIssueBaseline(submittedIssue);
+      setPrDraft((current) =>
+        JSON.stringify(current) === JSON.stringify(submittedPr) ? submittedPr : current,
+      );
+      setIssueDraft((current) =>
+        JSON.stringify(current) === JSON.stringify(submittedIssue) ? submittedIssue : current,
+      );
+      setResetRequested(false);
+      toast({ description: "Default queries saved", variant: "success" });
+    } catch {
+      toast({ description: "Failed to save default queries", variant: "error" });
+      throw new Error("Failed to save default queries");
+    }
+  }, [issueDraft, prDraft, reset, resetRequested, save, toast]);
 
   const handleReset = useCallback(() => {
-    reset();
     setPrDraft(toStored(BUILTIN_PR_PRESETS));
     setIssueDraft(toStored(BUILTIN_ISSUE_PRESETS));
-    toast({ description: "Default queries reset to defaults", variant: "success" });
-  }, [reset, toast]);
+    setResetRequested(true);
+  }, []);
+  const discard = useCallback(() => {
+    setPrDraft(prBaseline);
+    setIssueDraft(issueBaseline);
+    setResetRequested(false);
+  }, [prBaseline, issueBaseline]);
+  const defaultPr = toStored(BUILTIN_PR_PRESETS);
+  const defaultIssue = toStored(BUILTIN_ISSUE_PRESETS);
+  const atDefaults =
+    JSON.stringify(prDraft) === JSON.stringify(defaultPr) &&
+    JSON.stringify(issueDraft) === JSON.stringify(defaultIssue);
+
+  useSettingsSaveContributor({
+    id: `github-default-queries:${workspaceId ?? "global"}`,
+    revision: JSON.stringify([prDraft, issueDraft]),
+    isDirty: dirty,
+    canSave: isReady,
+    invalidReason: isReady ? undefined : "Default queries are still loading.",
+    save: handleSave,
+    discard,
+  });
+
+  return {
+    prDraft,
+    issueDraft,
+    prBaseline,
+    issueBaseline,
+    dirty,
+    setPrDraft: (next: StoredQueryPreset[]) => {
+      setResetRequested(false);
+      setPrDraft(next);
+    },
+    setIssueDraft: (next: StoredQueryPreset[]) => {
+      setResetRequested(false);
+      setIssueDraft(next);
+    },
+    reset: handleReset,
+    atDefaults,
+    resetDisabled: atDefaults && !isCustomized,
+  };
+}
+
+export function DefaultQueriesSection({ workspaceId }: { workspaceId?: string }) {
+  const drafts = useDefaultQueryDrafts(workspaceId);
 
   return (
     <SettingsSection
@@ -175,35 +258,46 @@ export function DefaultQueriesSection({ workspaceId }: { workspaceId?: string })
           <Button
             size="sm"
             variant="outline"
-            onClick={handleReset}
-            disabled={!isCustomized}
+            onClick={drafts.reset}
+            disabled={drafts.resetDisabled}
             className="cursor-pointer"
           >
             <IconRefresh className="h-3.5 w-3.5 mr-1" />
             Reset
           </Button>
-          <Button size="sm" onClick={handleSave} disabled={!dirty} className="cursor-pointer">
-            Save changes
-          </Button>
         </div>
       }
     >
-      <Tabs defaultValue="pr">
-        <TabsList>
-          <TabsTrigger value="pr" className="cursor-pointer">
-            Pull requests
-          </TabsTrigger>
-          <TabsTrigger value="issue" className="cursor-pointer">
-            Issues
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="pr">
-          <QueryEditor presets={prDraft} onChange={setPrDraft} addLabel="Add PR query" />
-        </TabsContent>
-        <TabsContent value="issue">
-          <QueryEditor presets={issueDraft} onChange={setIssueDraft} addLabel="Add issue query" />
-        </TabsContent>
-      </Tabs>
+      <SettingsCard isDirty={drafts.dirty}>
+        <CardContent className="pt-6">
+          <Tabs defaultValue="pr">
+            <TabsList>
+              <TabsTrigger value="pr" className="cursor-pointer">
+                Pull requests
+              </TabsTrigger>
+              <TabsTrigger value="issue" className="cursor-pointer">
+                Issues
+              </TabsTrigger>
+            </TabsList>
+            <TabsContent value="pr">
+              <QueryEditor
+                presets={drafts.prDraft}
+                baseline={drafts.prBaseline}
+                onChange={drafts.setPrDraft}
+                addLabel="Add PR query"
+              />
+            </TabsContent>
+            <TabsContent value="issue">
+              <QueryEditor
+                presets={drafts.issueDraft}
+                baseline={drafts.issueBaseline}
+                onChange={drafts.setIssueDraft}
+                addLabel="Add issue query"
+              />
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </SettingsCard>
     </SettingsSection>
   );
 }
diff --git a/apps/web/components/github/github-repo-scope-section.tsx b/apps/web/components/github/github-repo-scope-section.tsx
index 809f6d1411..126f1c16f8 100644
--- a/apps/web/components/github/github-repo-scope-section.tsx
+++ b/apps/web/components/github/github-repo-scope-section.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
-import { Button } from "@kandev/ui/button";
-import { Card, CardContent } from "@kandev/ui/card";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { CardContent } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
 import { useToast } from "@/components/toast-provider";
 import { SettingsSection } from "@/components/settings/settings-section";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
 import {
   fetchGitHubWorkspaceSettings,
   updateGitHubWorkspaceSettings,
@@ -42,6 +43,7 @@ type ScopeFieldsProps = {
   mode: GitHubRepoScopeMode;
   orgs: string;
   repos: string;
+  baseline: { mode: GitHubRepoScopeMode; orgs: string; repos: string };
   loading: boolean;
   invalidRepos: boolean;
   onModeChange: (mode: GitHubRepoScopeMode) => void;
@@ -53,6 +55,7 @@ function RepositoryScopeFields({
   mode,
   orgs,
   repos,
+  baseline,
   loading,
   invalidRepos,
   onModeChange,
@@ -60,7 +63,9 @@ function RepositoryScopeFields({
   onReposChange,
 }: ScopeFieldsProps) {
   return (
-    <Card>
+    <SettingsCard
+      isDirty={mode !== baseline.mode || orgs !== baseline.orgs || repos !== baseline.repos}
+    >
       <CardContent className="grid gap-4 py-4 md:grid-cols-[220px_minmax(0,1fr)]">
         <div className="space-y-1.5">
           <label className="text-sm font-medium" htmlFor="github-scope-mode">
@@ -71,7 +76,11 @@ function RepositoryScopeFields({
             onValueChange={(value) => onModeChange(value as GitHubRepoScopeMode)}
             disabled={loading}
           >
-            <SelectTrigger id="github-scope-mode" data-testid="github-scope-mode">
+            <SelectTrigger
+              id="github-scope-mode"
+              data-testid="github-scope-mode"
+              data-settings-dirty={mode !== baseline.mode}
+            >
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -89,6 +98,7 @@ function RepositoryScopeFields({
             <Input
               id="github-scope-orgs"
               value={orgs}
+              data-settings-dirty={orgs !== baseline.orgs}
               onChange={(event) => onOrgsChange(event.target.value)}
               disabled={loading || mode !== "orgs"}
               placeholder="kdlbs, example-org"
@@ -102,6 +112,7 @@ function RepositoryScopeFields({
             <Input
               id="github-scope-repos"
               value={repos}
+              data-settings-dirty={repos !== baseline.repos}
               onChange={(event) => onReposChange(event.target.value)}
               disabled={loading || mode !== "repos"}
               aria-invalid={invalidRepos}
@@ -114,17 +125,21 @@ function RepositoryScopeFields({
           </div>
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
-export function GitHubRepoScopeSection({ workspaceId }: { workspaceId: string }) {
+function useGitHubRepoScopeDraft(workspaceId: string) {
   const { toast } = useToast();
   const [mode, setMode] = useState<GitHubRepoScopeMode>("all");
   const [orgs, setOrgs] = useState("");
   const [repos, setRepos] = useState("");
+  const [baseline, setBaseline] = useState({
+    mode: "all" as GitHubRepoScopeMode,
+    orgs: "",
+    repos: "",
+  });
   const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
   const parsedRepos = useMemo(() => parseRepoFilters(repos), [repos]);
   const invalidRepos = useMemo(() => {
     const entries = splitCSV(repos);
@@ -137,9 +152,15 @@ export function GitHubRepoScopeSection({ workspaceId }: { workspaceId: string })
     void fetchGitHubWorkspaceSettings(workspaceId)
       .then((settings) => {
         if (cancelled) return;
-        setMode(settings.repo_scope_mode ?? "all");
-        setOrgs((settings.repo_scope_orgs ?? []).join(", "));
-        setRepos(repoFiltersToInput(settings.repo_scope_repos ?? []));
+        const next = {
+          mode: settings.repo_scope_mode ?? "all",
+          orgs: (settings.repo_scope_orgs ?? []).join(", "),
+          repos: repoFiltersToInput(settings.repo_scope_repos ?? []),
+        };
+        setBaseline(next);
+        setMode(next.mode);
+        setOrgs(next.orgs);
+        setRepos(next.repos);
       })
       .catch(() => {
         if (!cancelled)
@@ -153,12 +174,8 @@ export function GitHubRepoScopeSection({ workspaceId }: { workspaceId: string })
     };
   }, [toast, workspaceId]);
 
-  const save = async () => {
-    if (invalidRepos) {
-      toast({ description: "Repository filters must use owner/repo format", variant: "error" });
-      return;
-    }
-    setSaving(true);
+  const save = useCallback(async () => {
+    const submitted = { mode, orgs, repos };
     try {
       const payload: UpdateGitHubWorkspaceSettingsRequest = {
         workspace_id: workspaceId,
@@ -171,42 +188,70 @@ export function GitHubRepoScopeSection({ workspaceId }: { workspaceId: string })
         payload.repo_scope_repos = parsedRepos;
       }
       const updated = await updateGitHubWorkspaceSettings(payload);
-      setMode(updated.repo_scope_mode);
-      setOrgs((updated.repo_scope_orgs ?? []).join(", "));
-      setRepos(repoFiltersToInput(updated.repo_scope_repos ?? []));
+      const saved = {
+        mode: updated.repo_scope_mode,
+        orgs: (updated.repo_scope_orgs ?? []).join(", "),
+        repos: repoFiltersToInput(updated.repo_scope_repos ?? []),
+      };
+      setBaseline(saved);
+      setMode((current) => (current === submitted.mode ? saved.mode : current));
+      setOrgs((current) => (current === submitted.orgs ? saved.orgs : current));
+      setRepos((current) => (current === submitted.repos ? saved.repos : current));
       toast({ description: "GitHub workspace settings saved", variant: "success" });
     } catch {
       toast({ description: "Failed to save GitHub workspace settings", variant: "error" });
-    } finally {
-      setSaving(false);
+      throw new Error("Failed to save GitHub workspace settings");
     }
+  }, [mode, orgs, parsedRepos, repos, toast, workspaceId]);
+  const discard = useCallback(() => {
+    setMode(baseline.mode);
+    setOrgs(baseline.orgs);
+    setRepos(baseline.repos);
+  }, [baseline]);
+  const revision = JSON.stringify([mode, orgs, repos]);
+  const dirty = revision !== JSON.stringify([baseline.mode, baseline.orgs, baseline.repos]);
+
+  useSettingsSaveContributor({
+    id: `github-repo-scope:${workspaceId}`,
+    revision,
+    isDirty: dirty,
+    canSave: !loading && !invalidRepos,
+    invalidReason: invalidRepos ? "Use comma-separated owner/repo values." : undefined,
+    save,
+    discard,
+  });
+
+  return {
+    mode,
+    orgs,
+    repos,
+    baseline,
+    loading,
+    invalidRepos,
+    setMode,
+    setOrgs,
+    setRepos,
   };
+}
+
+export function GitHubRepoScopeSection({ workspaceId }: { workspaceId: string }) {
+  const draft = useGitHubRepoScopeDraft(workspaceId);
 
   return (
     <SettingsSection
       title="Repository Scope"
       description="Choose which GitHub repositories belong to this workspace."
-      action={
-        <Button
-          size="sm"
-          onClick={save}
-          disabled={loading || saving}
-          data-testid="github-scope-save"
-          className="cursor-pointer"
-        >
-          {saving ? "Saving..." : "Save"}
-        </Button>
-      }
     >
       <RepositoryScopeFields
-        mode={mode}
-        orgs={orgs}
-        repos={repos}
-        loading={loading}
-        invalidRepos={invalidRepos}
-        onModeChange={setMode}
-        onOrgsChange={setOrgs}
-        onReposChange={setRepos}
+        mode={draft.mode}
+        orgs={draft.orgs}
+        repos={draft.repos}
+        baseline={draft.baseline}
+        loading={draft.loading}
+        invalidRepos={draft.invalidRepos}
+        onModeChange={draft.setMode}
+        onOrgsChange={draft.setOrgs}
+        onReposChange={draft.setRepos}
       />
     </SettingsSection>
   );
diff --git a/apps/web/components/github/github-settings.tsx b/apps/web/components/github/github-settings.tsx
index c21af7a95d..21b84e992a 100644
--- a/apps/web/components/github/github-settings.tsx
+++ b/apps/web/components/github/github-settings.tsx
@@ -20,6 +20,7 @@ import { PRStatsPanel } from "./pr-stats";
 import { useReviewWatches } from "@/hooks/domains/github/use-review-watches";
 import { useIssueWatches } from "@/hooks/domains/github/use-issue-watches";
 import { WorkspaceScopedSection } from "@/components/integrations/workspace-scoped-section";
+import { useWatcherEnabledDrafts } from "@/components/integrations/use-watcher-enabled-drafts";
 import { ResetWatchDialog, useWatchResetController } from "@/components/watches/reset-watch-dialog";
 import { cleanupMergedReviewTasks, cleanupClosedIssueTasks } from "@/lib/api/domains/github-api";
 import type { ReviewWatch, IssueWatch } from "@/lib/types/github";
@@ -121,21 +122,6 @@ function useWatchActions(workspaceId?: string | null) {
     [trigger, toast, watches],
   );
 
-  const handleToggleEnabled = useCallback(
-    async (watch: ReviewWatch) => {
-      try {
-        await update(watch.id, watch.workspace_id, { enabled: !watch.enabled });
-        toast({
-          description: watch.enabled ? "Watch paused" : "Watch enabled",
-          variant: "success",
-        });
-      } catch {
-        toast({ description: "Failed to update watch", variant: "error" });
-      }
-    },
-    [update, toast],
-  );
-
   const handleReset = useCallback(
     async (id: string, workspaceId: string) => {
       try {
@@ -163,7 +149,6 @@ function useWatchActions(workspaceId?: string | null) {
     handleDelete,
     handleTrigger,
     handleReset,
-    handleToggleEnabled,
   };
 }
 
@@ -221,21 +206,6 @@ function useIssueWatchActions(workspaceId?: string | null) {
     [trigger, toast, watches],
   );
 
-  const handleToggleEnabled = useCallback(
-    async (watch: IssueWatch) => {
-      try {
-        await update(watch.id, watch.workspace_id, { enabled: !watch.enabled });
-        toast({
-          description: watch.enabled ? "Watch paused" : "Watch enabled",
-          variant: "success",
-        });
-      } catch {
-        toast({ description: "Failed to update watch", variant: "error" });
-      }
-    },
-    [update, toast],
-  );
-
   const handleReset = useCallback(
     async (id: string, workspaceId: string) => {
       try {
@@ -263,7 +233,6 @@ function useIssueWatchActions(workspaceId?: string | null) {
     handleDelete,
     handleTrigger,
     handleReset,
-    handleToggleEnabled,
   };
 }
 
@@ -328,19 +297,22 @@ export function GitHubIntegrationPage({ workspaceId }: GitHubIntegrationPageProp
 }
 
 function ReviewWatchSection({ workspaceId }: { workspaceId: string }) {
-  const {
-    watches,
-    create,
-    update,
-    previewReset,
-    handleDelete,
-    handleTrigger,
-    handleReset,
-    handleToggleEnabled,
-  } = useWatchActions(workspaceId);
+  const { watches, create, update, previewReset, handleDelete, handleTrigger, handleReset } =
+    useWatchActions(workspaceId);
   const { toast } = useToast();
   const [dialogOpen, setDialogOpen] = useState(false);
   const [editingWatch, setEditingWatch] = useState<ReviewWatch | null>(null);
+  const saveEnabled = useCallback(
+    async (watch: ReviewWatch, enabled: boolean) => {
+      await update(watch.id, watch.workspace_id, { enabled });
+    },
+    [update],
+  );
+  const enabledDrafts = useWatcherEnabledDrafts({
+    id: `github-review-watch-enabled:${workspaceId}`,
+    items: watches,
+    saveEnabled,
+  });
   const resetCtrl = useWatchResetController<ReviewWatch>({
     preview: (w) => previewReset(w.id, w.workspace_id),
     reset: (w) => handleReset(w.id, w.workspace_id),
@@ -354,10 +326,10 @@ function ReviewWatchSection({ workspaceId }: { workspaceId: string }) {
   const { setResetting: setReviewResetting } = resetCtrl;
   const onResetClick = useCallback(
     (id: string) => {
-      const w = watches.find((item) => item.id === id);
+      const w = enabledDrafts.items.find((item) => item.id === id);
       if (w) setReviewResetting(w);
     },
-    [watches, setReviewResetting],
+    [enabledDrafts.items, setReviewResetting],
   );
 
   return (
@@ -388,12 +360,12 @@ function ReviewWatchSection({ workspaceId }: { workspaceId: string }) {
         <Card>
           <CardContent className="p-0">
             <ReviewWatchTable
-              watches={watches}
+              watches={enabledDrafts.items}
               onEdit={handleEdit}
               onDelete={handleDelete}
               onTrigger={handleTrigger}
               onReset={onResetClick}
-              onToggleEnabled={handleToggleEnabled}
+              onToggleEnabled={enabledDrafts.toggleEnabled}
             />
           </CardContent>
         </Card>
@@ -432,6 +404,17 @@ function IssueWatchSection({ workspaceId }: { workspaceId: string }) {
   const { toast } = useToast();
   const [dialogOpen, setDialogOpen] = useState(false);
   const [editingWatch, setEditingIssueWatch] = useState<IssueWatch | null>(null);
+  const saveEnabled = useCallback(
+    async (watch: IssueWatch, enabled: boolean) => {
+      await issueActions.update(watch.id, watch.workspace_id, { enabled });
+    },
+    [issueActions.update],
+  );
+  const enabledDrafts = useWatcherEnabledDrafts({
+    id: `github-issue-watch-enabled:${workspaceId}`,
+    items: issueActions.watches,
+    saveEnabled,
+  });
   const resetCtrl = useWatchResetController<IssueWatch>({
     preview: (w) => issueActions.previewReset(w.id, w.workspace_id),
     reset: (w) => issueActions.handleReset(w.id, w.workspace_id),
@@ -445,10 +428,10 @@ function IssueWatchSection({ workspaceId }: { workspaceId: string }) {
   const { setResetting: setIssueResetting } = resetCtrl;
   const onResetClick = useCallback(
     (id: string) => {
-      const w = issueActions.watches.find((item) => item.id === id);
+      const w = enabledDrafts.items.find((item) => item.id === id);
       if (w) setIssueResetting(w);
     },
-    [issueActions.watches, setIssueResetting],
+    [enabledDrafts.items, setIssueResetting],
   );
 
   return (
@@ -479,12 +462,12 @@ function IssueWatchSection({ workspaceId }: { workspaceId: string }) {
         <Card>
           <CardContent className="p-0">
             <IssueWatchTable
-              watches={issueActions.watches}
+              watches={enabledDrafts.items}
               onEdit={handleEdit}
               onDelete={issueActions.handleDelete}
               onTrigger={issueActions.handleTrigger}
               onReset={onResetClick}
-              onToggleEnabled={issueActions.handleToggleEnabled}
+              onToggleEnabled={enabledDrafts.toggleEnabled}
             />
           </CardContent>
         </Card>
diff --git a/apps/web/components/github/my-github/use-default-query-presets.test.ts b/apps/web/components/github/my-github/use-default-query-presets.test.ts
index 11f8e5eb91..7ae8988b1e 100644
--- a/apps/web/components/github/my-github/use-default-query-presets.test.ts
+++ b/apps/web/components/github/my-github/use-default-query-presets.test.ts
@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { act, renderHook, waitFor } from "@testing-library/react";
+import { renderHook, waitFor } from "@testing-library/react";
 import { fetchUserSettings, updateUserSettings } from "@/lib/api/domains/settings-api";
 import {
   fetchGitHubWorkspaceSettings,
@@ -14,6 +14,7 @@ import {
 const STORAGE_KEY = "kandev:github-default-queries:v1";
 const WORKSPACE_ID = "ws-1";
 const SETTINGS_TIMESTAMP = "2026-01-01T00:00:00Z";
+const DEFAULT_QUERIES_LOADING_ERROR = "Default queries are still loading";
 
 vi.mock("@/lib/api/domains/settings-api", () => ({
   fetchUserSettings: vi.fn(),
@@ -107,14 +108,14 @@ describe("useDefaultQueryPresets workspace sync", () => {
     expect(updateGitHubWorkspaceSettings).not.toHaveBeenCalled();
   });
 
-  it("does not save or reset while workspace defaults are still loading", () => {
+  it("does not save or reset while workspace defaults are still loading", async () => {
     vi.mocked(fetchGitHubWorkspaceSettings).mockReturnValue(new Promise(() => {}));
     const { result } = renderHook(() => useDefaultQueryPresets(WORKSPACE_ID));
 
-    act(() => {
-      result.current.save({ pr: [preset], issue: [] });
-      result.current.reset();
-    });
+    await expect(result.current.save({ pr: [preset], issue: [] })).rejects.toThrow(
+      DEFAULT_QUERIES_LOADING_ERROR,
+    );
+    await expect(result.current.reset()).rejects.toThrow(DEFAULT_QUERIES_LOADING_ERROR);
 
     expect(updateGitHubWorkspaceSettings).not.toHaveBeenCalled();
   });
@@ -125,10 +126,10 @@ describe("useDefaultQueryPresets workspace sync", () => {
 
     await waitFor(() => expect(fetchGitHubWorkspaceSettings).toHaveBeenCalled());
 
-    act(() => {
-      result.current.save({ pr: [preset], issue: [] });
-      result.current.reset();
-    });
+    await expect(result.current.save({ pr: [preset], issue: [] })).rejects.toThrow(
+      DEFAULT_QUERIES_LOADING_ERROR,
+    );
+    await expect(result.current.reset()).rejects.toThrow(DEFAULT_QUERIES_LOADING_ERROR);
 
     expect(updateGitHubWorkspaceSettings).not.toHaveBeenCalled();
   });
diff --git a/apps/web/components/github/my-github/use-default-query-presets.ts b/apps/web/components/github/my-github/use-default-query-presets.ts
index c0289f05c4..55c0627c7b 100644
--- a/apps/web/components/github/my-github/use-default-query-presets.ts
+++ b/apps/web/components/github/my-github/use-default-query-presets.ts
@@ -159,33 +159,38 @@ export function useDefaultQueryPresets(workspaceId: string | null = null) {
   );
 
   const save = useCallback(
-    (defaults: StoredDefaults) => {
-      if (workspaceId && workspaceDefaults === undefined) return;
+    async (defaults: StoredDefaults) => {
+      if (workspaceId && workspaceDefaults === undefined) {
+        throw new Error("Default queries are still loading");
+      }
       if (workspaceId) {
+        await syncWorkspaceDefaultQueryPresets(workspaceId, defaults);
         setWorkspaceDefaults(defaults);
-        void syncWorkspaceDefaultQueryPresets(workspaceId, defaults).catch(() => {});
         return;
       }
+      await syncServer(defaults);
       publish(defaults);
-      void syncServer(defaults);
     },
     [workspaceId, workspaceDefaults, setWorkspaceDefaults],
   );
 
-  const reset = useCallback(() => {
-    if (workspaceId && workspaceDefaults === undefined) return;
+  const reset = useCallback(async () => {
+    if (workspaceId && workspaceDefaults === undefined) {
+      throw new Error("Default queries are still loading");
+    }
     if (workspaceId) {
+      await syncWorkspaceDefaultQueryPresets(workspaceId, null);
       setWorkspaceDefaults(null);
-      void syncWorkspaceDefaultQueryPresets(workspaceId, null).catch(() => {});
       return;
     }
+    await syncServer(null);
     publish(null);
-    void syncServer(null);
   }, [workspaceId, workspaceDefaults, setWorkspaceDefaults]);
 
   const isCustomized = effectiveStored !== null && effectiveStored !== undefined;
+  const isReady = !workspaceId || workspaceDefaults !== undefined;
 
-  return { prPresets, issuePresets, save, reset, isCustomized };
+  return { prPresets, issuePresets, save, reset, isCustomized, isReady };
 }
 
 /** Resolve full PresetOption[] by merging stored presets with icon lookups from builtins. */
diff --git a/apps/web/components/gitlab/gitlab-settings.test.tsx b/apps/web/components/gitlab/gitlab-settings.test.tsx
new file mode 100644
index 0000000000..507810b984
--- /dev/null
+++ b/apps/web/components/gitlab/gitlab-settings.test.tsx
@@ -0,0 +1,55 @@
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { GitLabIntegrationPage } from "./gitlab-settings";
+
+const fetchGitLabStatusMock = vi.fn();
+
+vi.mock("@/components/integrations/workspace-scoped-section", () => ({
+  WorkspaceScopedSection: ({ children }: { children: (workspaceId: string) => React.ReactNode }) =>
+    children("workspace-1"),
+}));
+
+vi.mock("@/components/toast-provider", () => ({
+  useToast: () => ({ toast: vi.fn() }),
+}));
+
+vi.mock("@/components/settings/settings-save-provider", () => ({
+  useSettingsSaveContributor: vi.fn(),
+}));
+
+vi.mock("@/lib/api/domains/gitlab-api", () => ({
+  clearGitLabToken: vi.fn(),
+  configureGitLabHost: vi.fn(),
+  configureGitLabToken: vi.fn(),
+  fetchGitLabStatus: (...args: unknown[]) => fetchGitLabStatusMock(...args),
+}));
+
+afterEach(() => {
+  cleanup();
+  fetchGitLabStatusMock.mockReset();
+});
+
+describe("GitLabIntegrationPage", () => {
+  it("marks the changed host and its owning card dirty", async () => {
+    fetchGitLabStatusMock.mockResolvedValue({
+      authenticated: false,
+      auth_method: "none",
+      connection_error: "",
+      glab_version: "",
+      host: "https://gitlab.com",
+      token_configured: false,
+      username: "",
+    });
+
+    render(<GitLabIntegrationPage workspaceId="workspace-1" />);
+
+    const host = await screen.findByDisplayValue("https://gitlab.com");
+    const card = host.closest('[data-slot="card"]');
+    expect(card?.getAttribute("data-settings-dirty")).toBe("false");
+
+    fireEvent.change(host, { target: { value: "https://gitlab.example.com" } });
+
+    expect(host.getAttribute("data-settings-dirty")).toBe("true");
+    await waitFor(() => expect(card?.getAttribute("data-settings-dirty")).toBe("true"));
+  });
+});
diff --git a/apps/web/components/gitlab/gitlab-settings.tsx b/apps/web/components/gitlab/gitlab-settings.tsx
index 51db73aab4..79a5f26d10 100644
--- a/apps/web/components/gitlab/gitlab-settings.tsx
+++ b/apps/web/components/gitlab/gitlab-settings.tsx
@@ -16,13 +16,15 @@ import {
 import { Alert, AlertDescription } from "@kandev/ui/alert";
 import { Badge } from "@kandev/ui/badge";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent } from "@kandev/ui/card";
+import { CardContent } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
 import { Separator } from "@kandev/ui/separator";
 import { Spinner } from "@kandev/ui/spinner";
 import { WorkspaceScopedSection } from "@/components/integrations/workspace-scoped-section";
 import { useToast } from "@/components/toast-provider";
 import { SettingsSection } from "@/components/settings/settings-section";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
 import {
   clearGitLabToken,
   configureGitLabHost,
@@ -92,93 +94,134 @@ function AuthMethodBadge({ method }: { method: GitLabStatus["auth_method"] }) {
   return <Badge variant="outline">{labels[method] ?? method}</Badge>;
 }
 
-function HostForm({ initial, onSaved }: { initial: string; onSaved: () => void }) {
+function HostForm({
+  initial,
+  onSaved,
+  onDirtyChange,
+}: {
+  initial: string;
+  onSaved: () => void;
+  onDirtyChange: (isDirty: boolean) => void;
+}) {
   const [host, setHost] = useState(initial);
-  const [saving, setSaving] = useState(false);
+  const [baseline, setBaseline] = useState(initial);
+  const [syncedInitial, setSyncedInitial] = useState(initial);
   const { toast } = useToast();
+  const isDirty = host !== baseline;
 
-  useEffect(() => {
+  useEffect(() => onDirtyChange(isDirty), [isDirty, onDirtyChange]);
+
+  if (initial !== syncedInitial && host === baseline) {
+    setSyncedInitial(initial);
+    setBaseline(initial);
     setHost(initial);
-  }, [initial]);
+  }
 
-  const handleSubmit = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault();
-      if (!host.trim()) return;
-      setSaving(true);
-      try {
-        await configureGitLabHost(host.trim());
-        toast({ description: "GitLab host updated", variant: "success" });
-        onSaved();
-      } catch (err) {
-        toast({
-          description: err instanceof Error ? err.message : "Failed to update host",
-          variant: "error",
-        });
-      } finally {
-        setSaving(false);
-      }
-    },
-    [host, toast, onSaved],
-  );
+  const save = useCallback(async () => {
+    const submitted = host.trim();
+    try {
+      await configureGitLabHost(submitted);
+      setBaseline(submitted);
+      setHost((current) => (current.trim() === submitted ? submitted : current));
+      toast({ description: "GitLab host updated", variant: "success" });
+      onSaved();
+    } catch (err) {
+      toast({
+        description: err instanceof Error ? err.message : "Failed to update host",
+        variant: "error",
+      });
+      throw err;
+    }
+  }, [host, toast, onSaved]);
+  const discard = useCallback(() => setHost(baseline), [baseline]);
+  const validHost = (() => {
+    try {
+      const url = new URL(host.trim());
+      return (
+        (url.protocol === "http:" || url.protocol === "https:") && !url.username && !url.password
+      );
+    } catch {
+      return false;
+    }
+  })();
+
+  useSettingsSaveContributor({
+    id: "gitlab-host",
+    revision: host,
+    isDirty,
+    canSave: validHost,
+    invalidReason: validHost ? undefined : "Enter a valid HTTP or HTTPS GitLab host URL.",
+    save,
+    discard,
+  });
 
   return (
-    <form onSubmit={handleSubmit} className="flex gap-2 items-center">
+    <div className="flex gap-2 items-center">
       <IconWorld className="h-4 w-4 text-muted-foreground shrink-0" />
       <Input
         type="url"
         placeholder={DEFAULT_HOST}
         value={host}
+        data-settings-dirty={isDirty}
         onChange={(e) => setHost(e.target.value)}
         className="font-mono text-sm"
-        disabled={saving}
       />
-      <Button type="submit" disabled={saving || !host.trim()} className="cursor-pointer">
-        {saving ? <Spinner className="h-3 w-3" /> : "Save host"}
-      </Button>
-    </form>
+    </div>
   );
 }
 
-function TokenForm({ onSuccess }: { onSuccess: () => void }) {
+function TokenForm({
+  onSuccess,
+  onDirtyChange,
+}: {
+  onSuccess: () => void;
+  onDirtyChange: (isDirty: boolean) => void;
+}) {
   const [token, setToken] = useState("");
   const [showToken, setShowToken] = useState(false);
-  const [saving, setSaving] = useState(false);
   const { toast } = useToast();
+  const isDirty = Boolean(token);
 
-  const handleSubmit = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault();
-      if (!token.trim()) return;
-      setSaving(true);
-      try {
-        await configureGitLabToken(token.trim());
-        toast({ description: "GitLab token configured", variant: "success" });
-        setToken("");
-        onSuccess();
-      } catch (err) {
-        toast({
-          description: err instanceof Error ? err.message : "Failed to save token",
-          variant: "error",
-        });
-      } finally {
-        setSaving(false);
-      }
-    },
-    [token, toast, onSuccess],
-  );
+  useEffect(() => onDirtyChange(isDirty), [isDirty, onDirtyChange]);
+
+  const save = useCallback(async () => {
+    const submitted = token.trim();
+    try {
+      await configureGitLabToken(submitted);
+      toast({ description: "GitLab token configured", variant: "success" });
+      setToken((current) => (current.trim() === submitted ? "" : current));
+      onSuccess();
+    } catch (err) {
+      toast({
+        description: err instanceof Error ? err.message : "Failed to save token",
+        variant: "error",
+      });
+      throw err;
+    }
+  }, [token, toast, onSuccess]);
+  const discard = useCallback(() => setToken(""), []);
+
+  useSettingsSaveContributor({
+    id: "gitlab-token",
+    revision: token,
+    isDirty,
+    canSave: Boolean(token.trim()),
+    invalidReason: token && !token.trim() ? "A GitLab token is required." : undefined,
+    save,
+    discard,
+  });
 
   return (
-    <form onSubmit={handleSubmit} className="flex gap-2 items-center">
+    <div className="flex gap-2 items-center">
       <IconKey className="h-4 w-4 text-muted-foreground shrink-0" />
       <div className="relative flex-1">
         <Input
           type={showToken ? "text" : "password"}
           placeholder="glpat-xxxxxxxxxxxxxxxxxxxx"
           value={token}
+          data-settings-dirty={isDirty}
           onChange={(e) => setToken(e.target.value)}
           className="font-mono text-sm pr-9"
-          disabled={saving}
           autoComplete="off"
         />
         <button
@@ -190,10 +233,7 @@ function TokenForm({ onSuccess }: { onSuccess: () => void }) {
           {showToken ? <IconEyeOff className="h-4 w-4" /> : <IconEye className="h-4 w-4" />}
         </button>
       </div>
-      <Button type="submit" disabled={saving || !token.trim()} className="cursor-pointer">
-        {saving ? <Spinner className="h-3 w-3" /> : "Save token"}
-      </Button>
-    </form>
+    </div>
   );
 }
 
@@ -243,6 +283,8 @@ export function GitLabIntegrationPage({ workspaceId }: GitLabIntegrationPageProp
 function GitLabConnectionSection() {
   const [status, setStatus] = useState<GitLabStatus | null>(null);
   const [loading, setLoading] = useState(true);
+  const [hostDirty, setHostDirty] = useState(false);
+  const [tokenDirty, setTokenDirty] = useState(false);
 
   const reload = useCallback(async () => {
     setLoading(true);
@@ -278,7 +320,7 @@ function GitLabConnectionSection() {
         </Button>
       }
     >
-      <Card>
+      <SettingsCard isDirty={hostDirty || tokenDirty}>
         <CardContent className="space-y-4 py-4">
           <ConnectionErrorAlert status={status} />
           <div className="flex items-center justify-between">
@@ -305,7 +347,11 @@ function GitLabConnectionSection() {
               GitLab host URL. Override for self-managed instances; leave at the default for
               gitlab.com.
             </p>
-            <HostForm initial={status?.host ?? DEFAULT_HOST} onSaved={() => void reload()} />
+            <HostForm
+              initial={status?.host ?? DEFAULT_HOST}
+              onSaved={() => void reload()}
+              onDirtyChange={setHostDirty}
+            />
           </div>
 
           <Separator />
@@ -318,10 +364,10 @@ function GitLabConnectionSection() {
               </p>
               {status?.token_configured && <ClearTokenButton onCleared={() => void reload()} />}
             </div>
-            <TokenForm onSuccess={() => void reload()} />
+            <TokenForm onSuccess={() => void reload()} onDirtyChange={setTokenDirty} />
           </div>
         </CardContent>
-      </Card>
+      </SettingsCard>
     </SettingsSection>
   );
 }
diff --git a/apps/web/components/integrations/drafted-integration-enabled-control.tsx b/apps/web/components/integrations/drafted-integration-enabled-control.tsx
new file mode 100644
index 0000000000..2e141e54ca
--- /dev/null
+++ b/apps/web/components/integrations/drafted-integration-enabled-control.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { Label } from "@kandev/ui/label";
+import { Switch } from "@kandev/ui/switch";
+import { useDraftedIntegrationEnabled } from "./use-drafted-integration-enabled";
+
+type Props = {
+  id: string;
+  enabled: boolean;
+  persist: (enabled: boolean) => Promise<void> | void;
+};
+
+export function DraftedIntegrationEnabledControl({ id, enabled, persist }: Props) {
+  const draft = useDraftedIntegrationEnabled({ id: `${id}-enabled`, enabled, persist });
+  return (
+    <div
+      className="flex items-center gap-2 rounded-full border bg-muted/30 px-3 py-1"
+      data-settings-dirty={draft.isDirty}
+      data-settings-dirty-level="container"
+    >
+      <Switch
+        id={`${id}-enabled`}
+        checked={draft.enabled}
+        data-settings-dirty={draft.isDirty}
+        onCheckedChange={draft.setEnabled}
+        className="cursor-pointer"
+      />
+      <Label htmlFor={`${id}-enabled`} className="text-xs cursor-pointer">
+        {draft.enabled ? "Enabled" : "Disabled"}
+      </Label>
+    </div>
+  );
+}
diff --git a/apps/web/components/integrations/use-drafted-integration-enabled.test.tsx b/apps/web/components/integrations/use-drafted-integration-enabled.test.tsx
new file mode 100644
index 0000000000..4043aed579
--- /dev/null
+++ b/apps/web/components/integrations/use-drafted-integration-enabled.test.tsx
@@ -0,0 +1,42 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { SettingsSaveProvider } from "@/components/settings/settings-save-provider";
+import { useDraftedIntegrationEnabled } from "./use-drafted-integration-enabled";
+
+function Harness({ persist }: { persist: (enabled: boolean) => void }) {
+  const [enabled, setEnabled] = useState(true);
+  const draft = useDraftedIntegrationEnabled({
+    id: "test-enabled",
+    enabled,
+    persist: (next) => {
+      persist(next);
+      setEnabled(next);
+    },
+  });
+  return (
+    <button data-settings-dirty={draft.isDirty} onClick={() => draft.setEnabled(!draft.enabled)}>
+      Toggle
+    </button>
+  );
+}
+
+describe("useDraftedIntegrationEnabled", () => {
+  it("persists only after the shared save action is pressed", async () => {
+    const persist = vi.fn();
+    render(
+      <SettingsSaveProvider>
+        <Harness persist={persist} />
+      </SettingsSaveProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Toggle" }));
+    expect(persist).not.toHaveBeenCalled();
+    expect(screen.getByRole("button", { name: "Toggle" }).getAttribute("data-settings-dirty")).toBe(
+      "true",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+    await waitFor(() => expect(persist).toHaveBeenCalledWith(false));
+  });
+});
diff --git a/apps/web/components/integrations/use-drafted-integration-enabled.ts b/apps/web/components/integrations/use-drafted-integration-enabled.ts
new file mode 100644
index 0000000000..c5a2a04f5e
--- /dev/null
+++ b/apps/web/components/integrations/use-drafted-integration-enabled.ts
@@ -0,0 +1,41 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
+
+type DraftedIntegrationEnabledOptions = {
+  id: string;
+  enabled: boolean;
+  persist: (enabled: boolean) => Promise<void> | void;
+};
+
+export function useDraftedIntegrationEnabled({
+  id,
+  enabled,
+  persist,
+}: DraftedIntegrationEnabledOptions) {
+  const [baseline, setBaseline] = useState(enabled);
+  const [draft, setDraft] = useState(enabled);
+
+  if (enabled !== baseline && draft === baseline) {
+    setBaseline(enabled);
+    setDraft(enabled);
+  }
+
+  const save = useCallback(async () => {
+    const submitted = draft;
+    await persist(submitted);
+    setBaseline(submitted);
+  }, [draft, persist]);
+  const discard = useCallback(() => setDraft(baseline), [baseline]);
+
+  useSettingsSaveContributor({
+    id,
+    revision: Number(draft),
+    isDirty: draft !== baseline,
+    save,
+    discard,
+  });
+
+  return { enabled: draft, setEnabled: setDraft, isDirty: draft !== baseline };
+}
diff --git a/apps/web/components/integrations/use-watcher-enabled-drafts.test.tsx b/apps/web/components/integrations/use-watcher-enabled-drafts.test.tsx
new file mode 100644
index 0000000000..6751a24194
--- /dev/null
+++ b/apps/web/components/integrations/use-watcher-enabled-drafts.test.tsx
@@ -0,0 +1,74 @@
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { SettingsSaveProvider } from "@/components/settings/settings-save-provider";
+import { useWatcherEnabledDrafts } from "./use-watcher-enabled-drafts";
+
+const watch = { id: "watch-1", enabled: true };
+
+afterEach(cleanup);
+
+function Harness({ save }: { save: (enabled: boolean) => Promise<void> }) {
+  const drafts = useWatcherEnabledDrafts({
+    id: "test-watches",
+    items: [watch],
+    saveEnabled: (_watch, enabled) => save(enabled),
+  });
+  return (
+    <button
+      data-dirty={drafts.dirtyIds.has(watch.id)}
+      onClick={() => drafts.toggleEnabled(drafts.items[0])}
+    >
+      {drafts.items[0].enabled ? "Disable" : "Enable"}
+    </button>
+  );
+}
+
+describe("useWatcherEnabledDrafts", () => {
+  it("returns to a clean state when a watcher is toggled twice", () => {
+    const save = vi.fn().mockResolvedValue(undefined);
+    render(
+      <SettingsSaveProvider>
+        <Harness save={save} />
+      </SettingsSaveProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Disable" }));
+    fireEvent.click(screen.getByRole("button", { name: "Enable" }));
+
+    expect(screen.queryByRole("button", { name: "Save changes" })).toBeNull();
+    expect(save).not.toHaveBeenCalled();
+  });
+
+  it("exposes the changed watcher id for row and control highlighting", () => {
+    render(
+      <SettingsSaveProvider>
+        <Harness save={vi.fn().mockResolvedValue(undefined)} />
+      </SettingsSaveProvider>,
+    );
+
+    const toggle = screen.getByRole("button", { name: "Disable" });
+    expect(toggle.getAttribute("data-dirty")).toBe("false");
+    fireEvent.click(toggle);
+    expect(screen.getByRole("button", { name: "Enable" }).getAttribute("data-dirty")).toBe("true");
+  });
+
+  it("keeps failed changes dirty and retries them", async () => {
+    const save = vi.fn().mockRejectedValueOnce(new Error("offline")).mockResolvedValue(undefined);
+    render(
+      <SettingsSaveProvider>
+        <Harness save={save} />
+      </SettingsSaveProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Disable" }));
+    expect(save).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => expect(screen.getByText("Couldn't save")).toBeTruthy());
+    expect(screen.getByRole("button", { name: "Retry save" })).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Retry save" }));
+
+    await waitFor(() => expect(save).toHaveBeenCalledTimes(2));
+    await waitFor(() => expect(screen.queryByRole("button", { name: "Save changes" })).toBeNull());
+  });
+});
diff --git a/apps/web/components/integrations/use-watcher-enabled-drafts.ts b/apps/web/components/integrations/use-watcher-enabled-drafts.ts
new file mode 100644
index 0000000000..ad4500f5ed
--- /dev/null
+++ b/apps/web/components/integrations/use-watcher-enabled-drafts.ts
@@ -0,0 +1,67 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
+
+type EnabledItem = { id: string; enabled: boolean };
+
+type WatcherEnabledDraftOptions<T extends EnabledItem> = {
+  id: string;
+  items: T[];
+  saveEnabled: (item: T, enabled: boolean) => Promise<void>;
+};
+
+export function useWatcherEnabledDrafts<T extends EnabledItem>({
+  id,
+  items,
+  saveEnabled,
+}: WatcherEnabledDraftOptions<T>) {
+  const [drafts, setDrafts] = useState<Record<string, boolean>>({});
+  const changes = useMemo(
+    () =>
+      items
+        .filter((item) => drafts[item.id] !== undefined && drafts[item.id] !== item.enabled)
+        .map((item) => ({ item, enabled: drafts[item.id] }))
+        .sort((left, right) => left.item.id.localeCompare(right.item.id)),
+    [drafts, items],
+  );
+  const draftItems = useMemo(
+    () => items.map((item) => ({ ...item, enabled: drafts[item.id] ?? item.enabled })),
+    [drafts, items],
+  );
+  const dirtyIds = useMemo(() => new Set(changes.map(({ item }) => item.id)), [changes]);
+
+  const toggleEnabled = useCallback((item: T) => {
+    setDrafts((current) => ({
+      ...current,
+      [item.id]: !(current[item.id] ?? item.enabled),
+    }));
+  }, []);
+  const discard = useCallback(() => setDrafts({}), []);
+  const save = useCallback(async () => {
+    const results = await Promise.allSettled(
+      changes.map(async ({ item, enabled }) => {
+        await saveEnabled(item, enabled);
+        setDrafts((current) => {
+          if (current[item.id] !== enabled) return current;
+          const next = { ...current };
+          delete next[item.id];
+          return next;
+        });
+      }),
+    );
+    if (results.some((result) => result.status === "rejected")) {
+      throw new Error("Failed to update one or more watchers");
+    }
+  }, [changes, saveEnabled]);
+
+  useSettingsSaveContributor({
+    id,
+    revision: JSON.stringify(changes.map(({ item, enabled }) => [item.id, enabled])),
+    isDirty: changes.length > 0,
+    save,
+    discard,
+  });
+
+  return { items: draftItems, dirtyIds, toggleEnabled };
+}
diff --git a/apps/web/components/integrations/watcher-settings-card.test.tsx b/apps/web/components/integrations/watcher-settings-card.test.tsx
new file mode 100644
index 0000000000..1a3d3dbf65
--- /dev/null
+++ b/apps/web/components/integrations/watcher-settings-card.test.tsx
@@ -0,0 +1,15 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { WatcherSettingsCard } from "./watcher-settings-card";
+
+describe("WatcherSettingsCard", () => {
+  it("marks the owning card dirty", () => {
+    render(
+      <WatcherSettingsCard isDirty isLoading={false} isEmpty={false} testId="watchers-card">
+        <div>Rows</div>
+      </WatcherSettingsCard>,
+    );
+
+    expect(screen.getByTestId("watchers-card").getAttribute("data-settings-dirty")).toBe("true");
+  });
+});
diff --git a/apps/web/components/integrations/watcher-settings-card.tsx b/apps/web/components/integrations/watcher-settings-card.tsx
new file mode 100644
index 0000000000..c073c48002
--- /dev/null
+++ b/apps/web/components/integrations/watcher-settings-card.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { CardContent } from "@kandev/ui/card";
+import { SettingsCard } from "@/components/settings/settings-card";
+
+type WatcherSettingsCardProps = {
+  children: ReactNode;
+  isDirty: boolean;
+  isLoading: boolean;
+  isEmpty: boolean;
+  testId: string;
+};
+
+export function WatcherSettingsCard({
+  children,
+  isDirty,
+  isLoading,
+  isEmpty,
+  testId,
+}: WatcherSettingsCardProps) {
+  return (
+    <SettingsCard isDirty={isDirty} data-testid={testId}>
+      <CardContent className="pt-6">
+        {isLoading && isEmpty ? (
+          <p className="py-4 text-center text-sm text-muted-foreground">Loading…</p>
+        ) : (
+          children
+        )}
+      </CardContent>
+    </SettingsCard>
+  );
+}
diff --git a/apps/web/components/jira/jira-enabled-control.tsx b/apps/web/components/jira/jira-enabled-control.tsx
new file mode 100644
index 0000000000..92fe6927e7
--- /dev/null
+++ b/apps/web/components/jira/jira-enabled-control.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import { DraftedIntegrationEnabledControl } from "@/components/integrations/drafted-integration-enabled-control";
+import { useJiraEnabled } from "@/hooks/domains/jira/use-jira-enabled";
+
+export function JiraEnabledControl() {
+  const { enabled, setEnabled } = useJiraEnabled();
+  return <DraftedIntegrationEnabledControl id="jira" enabled={enabled} persist={setEnabled} />;
+}
diff --git a/apps/web/components/jira/jira-issue-watch-table.tsx b/apps/web/components/jira/jira-issue-watch-table.tsx
index 2ab8147d1c..68006ad6ba 100644
--- a/apps/web/components/jira/jira-issue-watch-table.tsx
+++ b/apps/web/components/jira/jira-issue-watch-table.tsx
@@ -16,6 +16,7 @@ import type { JiraIssueWatch } from "@/lib/types/jira";
 
 type JiraIssueWatchTableProps = {
   watches: JiraIssueWatch[];
+  dirtyIds: ReadonlySet<string>;
   // showWorkspace renders a Workspace column when the table aggregates rows
   // from every workspace (install-wide settings page). Off for the legacy
   // single-workspace surfaces.
@@ -40,12 +41,14 @@ function formatLastPolled(dateStr?: string | null): string {
 
 function WatchActions({
   watch,
+  isDirty,
   onToggleEnabled,
   onTrigger,
   onReset,
   onDelete,
 }: {
   watch: JiraIssueWatch;
+  isDirty: boolean;
   onToggleEnabled: (watch: JiraIssueWatch) => void;
   onTrigger: (id: string) => void;
   onReset: (id: string) => void;
@@ -59,6 +62,8 @@ function WatchActions({
             variant="ghost"
             size="sm"
             className="h-7 w-7 p-0 cursor-pointer"
+            data-settings-dirty={isDirty}
+            data-testid={`jira-watch-enabled-${watch.id}`}
             onClick={(e) => {
               e.stopPropagation();
               onToggleEnabled(watch);
@@ -131,6 +136,7 @@ function WatchActions({
 
 export function JiraIssueWatchTable({
   watches,
+  dirtyIds,
   showWorkspace,
   onEdit,
   onDelete,
@@ -163,7 +169,14 @@ export function JiraIssueWatchTable({
       </TableHeader>
       <TableBody>
         {watches.map((watch) => (
-          <TableRow key={watch.id} className="cursor-pointer" onClick={() => onEdit(watch)}>
+          <TableRow
+            key={watch.id}
+            className="cursor-pointer"
+            data-settings-dirty={dirtyIds.has(watch.id)}
+            data-settings-dirty-level="container"
+            data-testid={`jira-watch-row-${watch.id}`}
+            onClick={() => onEdit(watch)}
+          >
             {showWorkspace && (
               <TableCell className="text-xs text-muted-foreground">
                 {workspaceName(watch.workspaceId)}
@@ -186,6 +199,7 @@ export function JiraIssueWatchTable({
             <TableCell className="text-right">
               <WatchActions
                 watch={watch}
+                isDirty={dirtyIds.has(watch.id)}
                 onToggleEnabled={onToggleEnabled}
                 onTrigger={onTrigger}
                 onReset={onReset}
diff --git a/apps/web/components/jira/jira-issue-watchers-section.tsx b/apps/web/components/jira/jira-issue-watchers-section.tsx
index 7700773222..df9fe3ddd3 100644
--- a/apps/web/components/jira/jira-issue-watchers-section.tsx
+++ b/apps/web/components/jira/jira-issue-watchers-section.tsx
@@ -3,10 +3,11 @@
 import { useCallback, useState } from "react";
 import { IconBellRinging, IconPlus } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent } from "@kandev/ui/card";
 import { SettingsSection } from "@/components/settings/settings-section";
+import { WatcherSettingsCard } from "@/components/integrations/watcher-settings-card";
 import { useToast } from "@/components/toast-provider";
 import { useJiraIssueWatches } from "@/hooks/domains/jira/use-jira-issue-watches";
+import { useWatcherEnabledDrafts } from "@/components/integrations/use-watcher-enabled-drafts";
 import { ResetWatchDialog, useWatchResetController } from "@/components/watches/reset-watch-dialog";
 import { JiraIssueWatchTable } from "./jira-issue-watch-table";
 import { JiraIssueWatchDialog } from "./jira-issue-watch-dialog";
@@ -86,17 +87,6 @@ function useToastedActions({ create, update, remove, trigger, reset }: RawAction
     [trigger, toast],
   );
 
-  const toggleEnabled = useCallback(
-    async (w: JiraIssueWatch) => {
-      try {
-        await update(w.id, { enabled: !w.enabled }, w.workspaceId);
-      } catch (err) {
-        toast({ description: `Toggle failed: ${String(err)}`, variant: "error" });
-      }
-    },
-    [update, toast],
-  );
-
   const wrappedReset = useCallback(
     async (w: JiraIssueWatch) => {
       try {
@@ -123,15 +113,25 @@ function useToastedActions({ create, update, remove, trigger, reset }: RawAction
     remove: wrappedDelete,
     trigger: wrappedTrigger,
     reset: wrappedReset,
-    toggleEnabled,
   };
 }
 
+function useEnabledDrafts(items: JiraIssueWatch[], update: RawActions["update"]) {
+  const saveEnabled = useCallback(
+    async (watch: JiraIssueWatch, enabled: boolean) => {
+      await update(watch.id, { enabled }, watch.workspaceId);
+    },
+    [update],
+  );
+  return useWatcherEnabledDrafts({ id: "jira-watch-enabled", items, saveEnabled });
+}
+
 export function JiraIssueWatchersSection() {
   // Pass undefined to fetch every watch across every workspace.
   const { items, loading, create, update, remove, trigger, previewReset, reset } =
     useJiraIssueWatches();
   const actions = useToastedActions({ create, update, remove, trigger, reset });
+  const enabledDrafts = useEnabledDrafts(items, update);
 
   const [dialogOpen, setDialogOpen] = useState(false);
   const [editing, setEditing] = useState<JiraIssueWatch | null>(null);
@@ -191,23 +191,23 @@ export function JiraIssueWatchersSection() {
         </Button>
       }
     >
-      <Card>
-        <CardContent className="pt-6">
-          {loading && items.length === 0 ? (
-            <p className="text-sm text-muted-foreground py-4 text-center">Loading…</p>
-          ) : (
-            <JiraIssueWatchTable
-              watches={items}
-              showWorkspace
-              onEdit={openEdit}
-              onDelete={handleDelete}
-              onTrigger={handleTrigger}
-              onReset={handleReset}
-              onToggleEnabled={actions.toggleEnabled}
-            />
-          )}
-        </CardContent>
-      </Card>
+      <WatcherSettingsCard
+        isDirty={enabledDrafts.dirtyIds.size > 0}
+        isLoading={loading}
+        isEmpty={items.length === 0}
+        testId="jira-watchers-card"
+      >
+        <JiraIssueWatchTable
+          watches={enabledDrafts.items}
+          dirtyIds={enabledDrafts.dirtyIds}
+          showWorkspace
+          onEdit={openEdit}
+          onDelete={handleDelete}
+          onTrigger={handleTrigger}
+          onReset={handleReset}
+          onToggleEnabled={enabledDrafts.toggleEnabled}
+        />
+      </WatcherSettingsCard>
       <JiraIssueWatchDialog
         open={dialogOpen}
         onOpenChange={setDialogOpen}
diff --git a/apps/web/components/jira/jira-settings.tsx b/apps/web/components/jira/jira-settings.tsx
index a8da3d377f..6b108b9c88 100644
--- a/apps/web/components/jira/jira-settings.tsx
+++ b/apps/web/components/jira/jira-settings.tsx
@@ -3,18 +3,19 @@
 import { useCallback, useEffect, useState, type Dispatch, type SetStateAction } from "react";
 import { IconTicket, IconCode } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent } from "@kandev/ui/card";
+import { CardContent } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
 import { Label } from "@kandev/ui/label";
 import { Separator } from "@kandev/ui/separator";
 import { Alert, AlertDescription } from "@kandev/ui/alert";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
-import { Switch } from "@kandev/ui/switch";
 import { useToast } from "@/components/toast-provider";
 import { SettingsSection } from "@/components/settings/settings-section";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { TaskPresetsSection } from "@/components/jira/task-presets-section";
 import { JiraIssueWatchersSection } from "@/components/jira/jira-issue-watchers-section";
-import { useJiraEnabled } from "@/hooks/domains/jira/use-jira-enabled";
+import { JiraEnabledControl } from "@/components/jira/jira-enabled-control";
 import {
   IntegrationAuthStatusBanner,
   type IntegrationAuthHealth,
@@ -97,13 +98,9 @@ function authAllowedForInstance(auth: JiraAuthMethod, instance: JiraInstanceType
   return false;
 }
 
-function saveLabel(saving: boolean, hasConfig: boolean): string {
-  if (saving) return "Saving...";
-  return hasConfig ? "Update" : "Save";
-}
-
 type FieldsRowProps = {
   form: FormState;
+  baseline: FormState;
   loading: boolean;
   update: <K extends keyof FormState>(key: K, value: FormState[K]) => void;
 };
@@ -112,7 +109,7 @@ type InstanceFieldsProps = FieldsRowProps & {
   setForm: Dispatch<SetStateAction<FormState>>;
 };
 
-function InstanceFields({ form, loading, setForm }: InstanceFieldsProps) {
+function InstanceFields({ form, baseline, loading, setForm }: InstanceFieldsProps) {
   return (
     <div className="grid gap-4 sm:grid-cols-2">
       <div className="space-y-1.5">
@@ -133,7 +130,11 @@ function InstanceFields({ form, loading, setForm }: InstanceFieldsProps) {
           }}
           disabled={loading}
         >
-          <SelectTrigger id="jira-instance" className="w-full cursor-pointer">
+          <SelectTrigger
+            id="jira-instance"
+            className="w-full cursor-pointer"
+            data-settings-dirty={form.instanceType !== baseline.instanceType}
+          >
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -154,6 +155,7 @@ function InstanceFields({ form, loading, setForm }: InstanceFieldsProps) {
           data-testid="jira-project-input"
           placeholder="PROJ"
           value={form.defaultProjectKey}
+          data-settings-dirty={form.defaultProjectKey !== baseline.defaultProjectKey}
           onChange={(e) =>
             setForm((prev) => ({ ...prev, defaultProjectKey: e.target.value.toUpperCase() }))
           }
@@ -164,7 +166,7 @@ function InstanceFields({ form, loading, setForm }: InstanceFieldsProps) {
   );
 }
 
-function SiteFields({ form, loading, update }: FieldsRowProps) {
+function SiteFields({ form, baseline, loading, update }: FieldsRowProps) {
   const placeholder =
     form.instanceType === "server" ? "https://jira.your-company.com" : "https://acme.atlassian.net";
   return (
@@ -175,6 +177,7 @@ function SiteFields({ form, loading, update }: FieldsRowProps) {
         data-testid="jira-site-input"
         placeholder={placeholder}
         value={form.siteUrl}
+        data-settings-dirty={form.siteUrl !== baseline.siteUrl}
         onChange={(e) => update("siteUrl", e.target.value)}
         disabled={loading}
       />
@@ -182,7 +185,7 @@ function SiteFields({ form, loading, update }: FieldsRowProps) {
   );
 }
 
-function AuthFields({ form, loading, update }: FieldsRowProps) {
+function AuthFields({ form, baseline, loading, update }: FieldsRowProps) {
   const showEmail = form.instanceType === "cloud" && form.authMethod === "api_token";
   return (
     <div className="grid gap-4 sm:grid-cols-2">
@@ -193,7 +196,11 @@ function AuthFields({ form, loading, update }: FieldsRowProps) {
           onValueChange={(v) => update("authMethod", v as JiraAuthMethod)}
           disabled={loading}
         >
-          <SelectTrigger id="jira-auth" className="w-full cursor-pointer">
+          <SelectTrigger
+            id="jira-auth"
+            className="w-full cursor-pointer"
+            data-settings-dirty={form.authMethod !== baseline.authMethod}
+          >
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -217,6 +224,7 @@ function AuthFields({ form, loading, update }: FieldsRowProps) {
             type="email"
             placeholder="you@example.com"
             value={form.email}
+            data-settings-dirty={form.email !== baseline.email}
             onChange={(e) => update("email", e.target.value)}
             disabled={loading}
           />
@@ -301,6 +309,7 @@ type SecretFieldPropsWithExpiry = SecretFieldProps & { secretExpiresAt?: string
 
 function SecretField({
   form,
+  baseline,
   loading,
   update,
   hasSavedSecret,
@@ -325,6 +334,7 @@ function SecretField({
         type="password"
         placeholder={secretPlaceholder(method, hasSavedSecret)}
         value={form.secret}
+        data-settings-dirty={form.secret !== baseline.secret}
         onChange={(e) => update("secret", e.target.value)}
         disabled={loading}
       />
@@ -396,28 +406,15 @@ function configToHealth(config: JiraConfig | null): IntegrationAuthHealth | null
 }
 
 type ActionBarProps = {
-  saving: boolean;
   testing: boolean;
   loading: boolean;
   hasConfig: boolean;
-  disableSave: boolean;
   disableTest: boolean;
   onTest: () => void;
-  onSave: () => void;
   onDelete: () => void;
 };
 
-function ActionBar({
-  saving,
-  testing,
-  loading,
-  hasConfig,
-  disableSave,
-  disableTest,
-  onTest,
-  onSave,
-  onDelete,
-}: ActionBarProps) {
+function ActionBar({ testing, loading, hasConfig, disableTest, onTest, onDelete }: ActionBarProps) {
   return (
     <div className="flex flex-wrap items-center gap-2">
       <Button
@@ -431,15 +428,6 @@ function ActionBar({
       >
         {testing ? "Testing..." : "Test connection"}
       </Button>
-      <Button
-        type="button"
-        onClick={onSave}
-        disabled={disableSave}
-        className="cursor-pointer"
-        data-testid="jira-save-button"
-      >
-        {saveLabel(saving, hasConfig)}
-      </Button>
       {hasConfig && (
         <Button
           type="button"
@@ -520,6 +508,7 @@ function useJiraSettings(workspaceId: string) {
   }, [workspaceId, form]);
 
   const handleSave = useCallback(async () => {
+    const submitted = form;
     setSaving(true);
     try {
       const saved = await setJiraConfig(
@@ -534,13 +523,16 @@ function useJiraSettings(workspaceId: string) {
         { workspaceId },
       );
       setConfig(saved);
-      setForm(configToForm(saved));
+      setForm((current) =>
+        JSON.stringify(current) === JSON.stringify(submitted) ? configToForm(saved) : current,
+      );
       // Clear any inline test result from the previous credentials so the
       // alert reflects only the currently-saved state.
       setTestResult(null);
       toast({ description: "Jira configuration saved", variant: "success" });
     } catch (err) {
       toast({ description: `Save failed: ${String(err)}`, variant: "error" });
+      throw err;
     } finally {
       setSaving(false);
     }
@@ -558,6 +550,7 @@ function useJiraSettings(workspaceId: string) {
       toast({ description: `Delete failed: ${String(err)}`, variant: "error" });
     }
   }, [workspaceId, toast]);
+  const discard = useCallback(() => setForm(configToForm(config)), [config]);
 
   return {
     config,
@@ -572,30 +565,10 @@ function useJiraSettings(workspaceId: string) {
     handleTest,
     handleSave,
     handleDelete,
+    discard,
   };
 }
 
-function EnabledPill() {
-  const { enabled, setEnabled } = useJiraEnabled();
-  return (
-    <div className="flex items-center gap-2 rounded-full border bg-muted/30 px-3 py-1">
-      <Switch
-        id="jira-enabled"
-        checked={enabled}
-        onCheckedChange={setEnabled}
-        className="cursor-pointer"
-      />
-      <Label htmlFor="jira-enabled" className="text-xs cursor-pointer">
-        {enabled ? "Enabled" : "Disabled"}
-      </Label>
-    </div>
-  );
-}
-
-// normalizeComparableSiteUrl mirrors the backend's normalizeSiteURL (strip
-// trailing slash, prepend https:// if no scheme) so that
-// "acme.atlassian.net" and "https://acme.atlassian.net" don't read as
-// different hosts in savedSecretMatches.
 function normalizeComparableSiteUrl(value: string): string {
   const trimmed = value.trim().replace(/\/+$/, "");
   if (!trimmed) return "";
@@ -622,30 +595,52 @@ function savedSecretMatches(config: JiraConfig | null, form: FormState): boolean
 
 export function JiraConnectionSection({ workspaceId }: { workspaceId: string }) {
   const s = useJiraSettings(workspaceId);
+  const baseline = configToForm(s.config);
   const savedSecretMatchesMode = savedSecretMatches(s.config, s.form);
   const missingSecret = !savedSecretMatchesMode && !s.form.secret;
-  // Email is only required for the Cloud + api_token combination. Server PAT
-  // and session cookies authenticate the user out of the token itself.
   const emailRequired = s.form.instanceType === "cloud" && s.form.authMethod === "api_token";
   const disableSave =
     s.saving || !s.form.siteUrl || (emailRequired && !s.form.email) || missingSecret;
   const disableTest = missingSecret;
+  const revision = JSON.stringify(s.form);
+  const dirty = !s.loading && revision !== JSON.stringify(configToForm(s.config));
+  let invalidReason: string | undefined;
+  if (!s.form.siteUrl) invalidReason = "A Jira site URL is required.";
+  else if (emailRequired && !s.form.email) invalidReason = "An email address is required.";
+  else if (missingSecret) invalidReason = "A credential is required.";
+
+  useSettingsSaveContributor({
+    id: `jira-config:${workspaceId}`,
+    revision,
+    isDirty: dirty,
+    canSave: !disableSave,
+    invalidReason,
+    save: s.handleSave,
+    discard: s.discard,
+  });
 
   return (
     <SettingsSection
       icon={<IconTicket className="h-5 w-5" />}
       title="Jira integration"
       description="Connect this workspace to Atlassian Cloud or a self-hosted Jira Server / Data Center instance. Credentials are stored encrypted server-side for the selected workspace."
-      action={<EnabledPill />}
+      action={<JiraEnabledControl />}
     >
-      <Card>
+      <SettingsCard isDirty={dirty}>
         <CardContent className="space-y-4 pt-6">
           <IntegrationAuthStatusBanner health={s.health} />
-          <InstanceFields form={s.form} loading={s.loading} update={s.update} setForm={s.setForm} />
-          <SiteFields form={s.form} loading={s.loading} update={s.update} />
-          <AuthFields form={s.form} loading={s.loading} update={s.update} />
+          <InstanceFields
+            form={s.form}
+            baseline={baseline}
+            loading={s.loading}
+            update={s.update}
+            setForm={s.setForm}
+          />
+          <SiteFields form={s.form} baseline={baseline} loading={s.loading} update={s.update} />
+          <AuthFields form={s.form} baseline={baseline} loading={s.loading} update={s.update} />
           <SecretField
             form={s.form}
+            baseline={baseline}
             loading={s.loading}
             update={s.update}
             hasSavedSecret={savedSecretMatchesMode}
@@ -654,18 +649,15 @@ export function JiraConnectionSection({ workspaceId }: { workspaceId: string })
           <TestResultAlert result={s.testResult} />
           <Separator />
           <ActionBar
-            saving={s.saving}
             testing={s.testing}
             loading={s.loading}
             hasConfig={!!s.config}
-            disableSave={disableSave}
             disableTest={disableTest}
             onTest={s.handleTest}
-            onSave={s.handleSave}
             onDelete={s.handleDelete}
           />
         </CardContent>
-      </Card>
+      </SettingsCard>
     </SettingsSection>
   );
 }
diff --git a/apps/web/components/jira/my-jira/use-task-presets.ts b/apps/web/components/jira/my-jira/use-task-presets.ts
index a3a8de39d4..a8f3f69f48 100644
--- a/apps/web/components/jira/my-jira/use-task-presets.ts
+++ b/apps/web/components/jira/my-jira/use-task-presets.ts
@@ -54,15 +54,15 @@ export function useJiraTaskPresets() {
     };
   }, []);
 
-  const save = useCallback((next: JiraStoredPreset[]) => {
+  const save = useCallback(async (next: JiraStoredPreset[]) => {
     writeVersion.current += 1;
-    void syncServer(next);
+    await syncServer(next);
     setStored(next);
   }, []);
 
-  const reset = useCallback(() => {
+  const reset = useCallback(async () => {
     writeVersion.current += 1;
-    void syncServer(null);
+    await syncServer(null);
     setStored(null);
   }, []);
 
diff --git a/apps/web/components/jira/task-presets-section.test.tsx b/apps/web/components/jira/task-presets-section.test.tsx
new file mode 100644
index 0000000000..7c84c1e9ab
--- /dev/null
+++ b/apps/web/components/jira/task-presets-section.test.tsx
@@ -0,0 +1,67 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SettingsSaveProvider } from "@/components/settings/settings-save-provider";
+import { useJiraTaskPresets } from "@/components/jira/my-jira/use-task-presets";
+import { DEFAULT_JIRA_PRESETS, type JiraStoredPreset } from "@/components/jira/my-jira/presets";
+import { TaskPresetsSection } from "./task-presets-section";
+
+const mocks = vi.hoisted(() => ({ save: vi.fn(), reset: vi.fn(), toast: vi.fn() }));
+
+vi.mock("@/components/jira/my-jira/use-task-presets", () => ({
+  useJiraTaskPresets: vi.fn(),
+}));
+vi.mock("@/components/toast-provider", () => ({
+  useToast: () => ({ toast: mocks.toast }),
+}));
+vi.mock("@/components/settings/profile-edit/script-editor", () => ({
+  ScriptEditor: () => null,
+  computeEditorHeight: () => 100,
+}));
+
+const customPreset: JiraStoredPreset = {
+  id: "custom",
+  label: "Custom",
+  hint: "",
+  icon: "sparkle",
+  prompt_template: "",
+};
+
+describe("TaskPresetsSection", () => {
+  it("stages reset-to-default until the shared save action", async () => {
+    vi.mocked(useJiraTaskPresets).mockReturnValue({
+      stored: [customPreset],
+      isCustomized: true,
+      taskPresets: [],
+      save: mocks.save,
+      reset: mocks.reset,
+      loaded: true,
+    });
+    mocks.save.mockResolvedValue(undefined);
+
+    render(
+      <SettingsSaveProvider>
+        <TaskPresetsSection />
+      </SettingsSaveProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Reset" }));
+    expect(mocks.save).not.toHaveBeenCalled();
+    expect(mocks.reset).not.toHaveBeenCalled();
+    expect(screen.getByTestId("jira-task-presets-card").getAttribute("data-settings-dirty")).toBe(
+      "true",
+    );
+    expect(
+      screen
+        .getByTestId(`jira-task-preset-${DEFAULT_JIRA_PRESETS[0].id}`)
+        .getAttribute("data-settings-dirty"),
+    ).toBe("true");
+
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+    await waitFor(() => expect(mocks.save).toHaveBeenCalledWith(DEFAULT_JIRA_PRESETS));
+    await waitFor(() =>
+      expect(screen.getByTestId("jira-task-presets-card").getAttribute("data-settings-dirty")).toBe(
+        "false",
+      ),
+    );
+  });
+});
diff --git a/apps/web/components/jira/task-presets-section.tsx b/apps/web/components/jira/task-presets-section.tsx
index 2bbb2d42fc..57922b01ce 100644
--- a/apps/web/components/jira/task-presets-section.tsx
+++ b/apps/web/components/jira/task-presets-section.tsx
@@ -7,6 +7,8 @@ import { Input } from "@kandev/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
 import { useToast } from "@/components/toast-provider";
 import { SettingsSection } from "@/components/settings/settings-section";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
 import { useJiraTaskPresets } from "@/components/jira/my-jira/use-task-presets";
 import {
   DEFAULT_JIRA_PRESETS,
@@ -84,29 +86,45 @@ function IconSelect({ value, onChange }: { value: string; onChange: (v: string)
 
 function PresetRow({
   preset,
+  savedPreset,
   expanded,
   onToggle,
   onPatch,
   onRemove,
 }: {
   preset: JiraStoredPreset;
+  savedPreset?: JiraStoredPreset;
   expanded: boolean;
   onToggle: () => void;
   onPatch: (patch: Partial<JiraStoredPreset>) => void;
   onRemove: () => void;
 }) {
+  const fieldIsDirty = <K extends keyof JiraStoredPreset>(field: K) =>
+    !savedPreset || preset[field] !== savedPreset[field];
+  const isDirty = !savedPreset || JSON.stringify(preset) !== JSON.stringify(savedPreset);
+
   return (
-    <div className="rounded-md border">
+    <div
+      className="rounded-md border"
+      data-settings-dirty={isDirty}
+      data-testid={`jira-task-preset-${preset.id}`}
+    >
       <div className="flex items-end gap-2 p-2">
         <div className="flex flex-col gap-0.5">
           <span className="text-[10px] text-muted-foreground">Icon</span>
-          <IconSelect value={preset.icon} onChange={(v) => onPatch({ icon: v })} />
+          <div
+            data-settings-dirty={fieldIsDirty("icon")}
+            className="rounded-md border border-transparent"
+          >
+            <IconSelect value={preset.icon} onChange={(v) => onPatch({ icon: v })} />
+          </div>
         </div>
         <div className="flex flex-col gap-0.5">
           <span className="text-[10px] text-muted-foreground">Label</span>
           <Input
             className="h-8 w-40"
             value={preset.label}
+            data-settings-dirty={fieldIsDirty("label")}
             placeholder="Label"
             onChange={(e) => onPatch({ label: e.target.value })}
           />
@@ -116,6 +134,7 @@ function PresetRow({
           <Input
             className="h-8"
             value={preset.hint}
+            data-settings-dirty={fieldIsDirty("hint")}
             placeholder="Hint (optional)"
             onChange={(e) => onPatch({ hint: e.target.value })}
           />
@@ -140,7 +159,10 @@ function PresetRow({
       </div>
       {expanded && (
         <div className="px-2 pb-2 space-y-1">
-          <div className="rounded-md border overflow-hidden">
+          <div
+            className="rounded-md border overflow-hidden"
+            data-settings-dirty={fieldIsDirty("prompt_template")}
+          >
             <ScriptEditor
               value={preset.prompt_template}
               onChange={(v) => onPatch({ prompt_template: v })}
@@ -165,29 +187,41 @@ function PresetRow({
 }
 
 function usePresetDraft() {
-  const { stored, save: persistSave, reset: persistReset, loaded } = useJiraTaskPresets();
+  const { stored, save: persistSave, loaded } = useJiraTaskPresets();
   const [draft, setDraft] = useState<JiraStoredPreset[]>(stored);
   // Render-time conditional setState is React's documented "adjust state
   // during render" pattern; it resets the draft when the hook's stored value
   // changes (e.g. after reset or a backend refresh). Gate the sync on `loaded`
   // so an in-progress edit isn't wiped when the initial settings read lands.
+  const [baseline, setBaseline] = useState(stored);
+  const dirty = useMemo(
+    () => JSON.stringify(baseline) !== JSON.stringify(draft),
+    [baseline, draft],
+  );
   const [synced, setSynced] = useState(stored);
-  if (loaded && stored !== synced) {
+  if (loaded && stored !== synced && !dirty) {
     setSynced(stored);
+    setBaseline(stored);
     setDraft(stored);
   }
-  const dirty = useMemo(() => JSON.stringify(stored) !== JSON.stringify(draft), [stored, draft]);
-  const save = useCallback(() => persistSave(draft), [persistSave, draft]);
+  const save = useCallback(async () => {
+    const submitted = draft;
+    await persistSave(submitted);
+    setBaseline(submitted);
+    setDraft((current) =>
+      JSON.stringify(current) === JSON.stringify(submitted) ? submitted : current,
+    );
+  }, [persistSave, draft]);
   const reset = useCallback(() => {
-    persistReset();
     setDraft(DEFAULT_JIRA_PRESETS);
-  }, [persistReset]);
-  return { draft, setDraft, dirty, save, reset, loaded };
+  }, []);
+  const discard = useCallback(() => setDraft(baseline), [baseline]);
+  return { draft, baseline, setDraft, dirty, save, reset, discard, loaded };
 }
 
 export function TaskPresetsSection() {
   const { toast } = useToast();
-  const { draft, setDraft, dirty, save, reset, loaded } = usePresetDraft();
+  const { draft, baseline, setDraft, dirty, save, reset, discard, loaded } = usePresetDraft();
   const [expandedId, setExpandedId] = useState<string | null>(null);
 
   const patch = useCallback(
@@ -206,14 +240,24 @@ export function TaskPresetsSection() {
     setExpandedId(created.id);
   }, [draft, setDraft]);
 
-  const handleSave = () => {
-    save();
-    toast({ description: "Task presets saved", variant: "success" });
-  };
-  const handleReset = () => {
-    reset();
-    toast({ description: "Task presets reset to defaults", variant: "success" });
-  };
+  const handleSave = useCallback(async () => {
+    try {
+      await save();
+      toast({ description: "Task presets saved", variant: "success" });
+    } catch {
+      toast({ description: "Failed to save task presets", variant: "error" });
+      throw new Error("Failed to save task presets");
+    }
+  }, [save, toast]);
+
+  useSettingsSaveContributor({
+    id: "jira-task-presets",
+    revision: JSON.stringify(draft),
+    isDirty: dirty,
+    canSave: loaded,
+    save: handleSave,
+    discard,
+  });
 
   return (
     <SettingsSection
@@ -224,24 +268,22 @@ export function TaskPresetsSection() {
           <Button
             size="sm"
             variant="outline"
-            onClick={handleReset}
+            onClick={reset}
             disabled={!loaded}
             className="cursor-pointer"
           >
             <IconRefresh className="h-3.5 w-3.5 mr-1" />
             Reset
           </Button>
-          <Button size="sm" onClick={handleSave} disabled={!dirty} className="cursor-pointer">
-            Save changes
-          </Button>
         </div>
       }
     >
-      <div className="space-y-2">
+      <SettingsCard isDirty={dirty} className="space-y-2 p-4" data-testid="jira-task-presets-card">
         {draft.map((preset, index) => (
           <PresetRow
             key={preset.id}
             preset={preset}
+            savedPreset={baseline.find((saved) => saved.id === preset.id)}
             expanded={expandedId === preset.id}
             onToggle={() => setExpandedId((id) => (id === preset.id ? null : preset.id))}
             onPatch={(p) => patch(index, p)}
@@ -252,7 +294,7 @@ export function TaskPresetsSection() {
           <IconPlus className="h-3.5 w-3.5 mr-1" />
           Add preset
         </Button>
-      </div>
+      </SettingsCard>
     </SettingsSection>
   );
 }
diff --git a/apps/web/components/linear/linear-issue-watch-table.tsx b/apps/web/components/linear/linear-issue-watch-table.tsx
index 043dfa70e6..3e169b5d3f 100644
--- a/apps/web/components/linear/linear-issue-watch-table.tsx
+++ b/apps/web/components/linear/linear-issue-watch-table.tsx
@@ -16,6 +16,7 @@ import type { LinearIssueWatch, LinearSearchFilter } from "@/lib/types/linear";
 
 type LinearIssueWatchTableProps = {
   watches: LinearIssueWatch[];
+  dirtyIds: ReadonlySet<string>;
   // showWorkspace renders a Workspace column when the table aggregates rows
   // from every workspace (install-wide settings page).
   showWorkspace?: boolean;
@@ -55,12 +56,14 @@ function summarizeFilter(filter: LinearSearchFilter | undefined): string {
 
 function WatchActions({
   watch,
+  isDirty,
   onToggleEnabled,
   onTrigger,
   onReset,
   onDelete,
 }: {
   watch: LinearIssueWatch;
+  isDirty: boolean;
   onToggleEnabled: (watch: LinearIssueWatch) => void;
   onTrigger: (id: string) => void;
   onReset: (id: string) => void;
@@ -74,6 +77,8 @@ function WatchActions({
             variant="ghost"
             size="sm"
             className="h-7 w-7 p-0 cursor-pointer"
+            data-settings-dirty={isDirty}
+            data-testid={`linear-watch-enabled-${watch.id}`}
             onClick={(e) => {
               e.stopPropagation();
               onToggleEnabled(watch);
@@ -144,6 +149,7 @@ function WatchActions({
 
 export function LinearIssueWatchTable({
   watches,
+  dirtyIds,
   showWorkspace,
   onEdit,
   onDelete,
@@ -176,7 +182,14 @@ export function LinearIssueWatchTable({
       </TableHeader>
       <TableBody>
         {watches.map((watch) => (
-          <TableRow key={watch.id} className="cursor-pointer" onClick={() => onEdit(watch)}>
+          <TableRow
+            key={watch.id}
+            className="cursor-pointer"
+            data-settings-dirty={dirtyIds.has(watch.id)}
+            data-settings-dirty-level="container"
+            data-testid={`linear-watch-row-${watch.id}`}
+            onClick={() => onEdit(watch)}
+          >
             {showWorkspace && (
               <TableCell className="text-xs text-muted-foreground">
                 {workspaceName(watch.workspaceId)}
@@ -202,6 +215,7 @@ export function LinearIssueWatchTable({
             <TableCell className="text-right">
               <WatchActions
                 watch={watch}
+                isDirty={dirtyIds.has(watch.id)}
                 onToggleEnabled={onToggleEnabled}
                 onTrigger={onTrigger}
                 onReset={onReset}
diff --git a/apps/web/components/linear/linear-issue-watchers-section.tsx b/apps/web/components/linear/linear-issue-watchers-section.tsx
index 95911436fc..a5b63a6d74 100644
--- a/apps/web/components/linear/linear-issue-watchers-section.tsx
+++ b/apps/web/components/linear/linear-issue-watchers-section.tsx
@@ -3,10 +3,11 @@
 import { useCallback, useState } from "react";
 import { IconBellRinging, IconPlus } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent } from "@kandev/ui/card";
 import { SettingsSection } from "@/components/settings/settings-section";
+import { WatcherSettingsCard } from "@/components/integrations/watcher-settings-card";
 import { useToast } from "@/components/toast-provider";
 import { useLinearIssueWatches } from "@/hooks/domains/linear/use-linear-issue-watches";
+import { useWatcherEnabledDrafts } from "@/components/integrations/use-watcher-enabled-drafts";
 import { ResetWatchDialog, useWatchResetController } from "@/components/watches/reset-watch-dialog";
 import { LinearIssueWatchTable } from "./linear-issue-watch-table";
 import { LinearIssueWatchDialog } from "./linear-issue-watch-dialog";
@@ -81,17 +82,6 @@ function useToastedActions({ create, update, remove, trigger, reset }: RawAction
     [trigger, toast],
   );
 
-  const toggleEnabled = useCallback(
-    async (w: LinearIssueWatch) => {
-      try {
-        await update(w.id, { enabled: !w.enabled }, w.workspaceId);
-      } catch (err) {
-        toast({ description: `Toggle failed: ${String(err)}`, variant: "error" });
-      }
-    },
-    [update, toast],
-  );
-
   const wrappedReset = useCallback(
     async (w: LinearIssueWatch) => {
       try {
@@ -118,14 +108,24 @@ function useToastedActions({ create, update, remove, trigger, reset }: RawAction
     remove: wrappedDelete,
     trigger: wrappedTrigger,
     reset: wrappedReset,
-    toggleEnabled,
   };
 }
 
+function useEnabledDrafts(items: LinearIssueWatch[], update: RawActions["update"]) {
+  const saveEnabled = useCallback(
+    async (watch: LinearIssueWatch, enabled: boolean) => {
+      await update(watch.id, { enabled }, watch.workspaceId);
+    },
+    [update],
+  );
+  return useWatcherEnabledDrafts({ id: "linear-watch-enabled", items, saveEnabled });
+}
+
 export function LinearIssueWatchersSection() {
   const { items, loading, create, update, remove, trigger, previewReset, reset } =
     useLinearIssueWatches();
   const actions = useToastedActions({ create, update, remove, trigger, reset });
+  const enabledDrafts = useEnabledDrafts(items, update);
 
   const [dialogOpen, setDialogOpen] = useState(false);
   const [editing, setEditing] = useState<LinearIssueWatch | null>(null);
@@ -138,10 +138,13 @@ export function LinearIssueWatchersSection() {
     setEditing(null);
     setDialogOpen(true);
   }, []);
-  const openEdit = useCallback((w: LinearIssueWatch) => {
-    setEditing(w);
-    setDialogOpen(true);
-  }, []);
+  const openEdit = useCallback(
+    (w: LinearIssueWatch) => {
+      setEditing(items.find((item) => item.id === w.id) ?? w);
+      setDialogOpen(true);
+    },
+    [items],
+  );
 
   // Adapt the watch-aware actions back to id-keyed callbacks the table expects;
   // the table looks up the watch by id when it needs to forward the per-row
@@ -181,23 +184,23 @@ export function LinearIssueWatchersSection() {
         </Button>
       }
     >
-      <Card>
-        <CardContent className="pt-6">
-          {loading && items.length === 0 ? (
-            <p className="text-sm text-muted-foreground py-4 text-center">Loading…</p>
-          ) : (
-            <LinearIssueWatchTable
-              watches={items}
-              showWorkspace
-              onEdit={openEdit}
-              onDelete={handleDelete}
-              onTrigger={handleTrigger}
-              onReset={handleReset}
-              onToggleEnabled={actions.toggleEnabled}
-            />
-          )}
-        </CardContent>
-      </Card>
+      <WatcherSettingsCard
+        isDirty={enabledDrafts.dirtyIds.size > 0}
+        isLoading={loading}
+        isEmpty={items.length === 0}
+        testId="linear-watchers-card"
+      >
+        <LinearIssueWatchTable
+          watches={enabledDrafts.items}
+          dirtyIds={enabledDrafts.dirtyIds}
+          showWorkspace
+          onEdit={openEdit}
+          onDelete={handleDelete}
+          onTrigger={handleTrigger}
+          onReset={handleReset}
+          onToggleEnabled={enabledDrafts.toggleEnabled}
+        />
+      </WatcherSettingsCard>
       <LinearIssueWatchDialog
         open={dialogOpen}
         onOpenChange={setDialogOpen}
diff --git a/apps/web/components/linear/linear-settings.tsx b/apps/web/components/linear/linear-settings.tsx
index 4b93f6efd9..149a516a1b 100644
--- a/apps/web/components/linear/linear-settings.tsx
+++ b/apps/web/components/linear/linear-settings.tsx
@@ -1,23 +1,25 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, type Dispatch, type SetStateAction } from "react";
 import { IconHexagon } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent } from "@kandev/ui/card";
+import { CardContent } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
 import { Label } from "@kandev/ui/label";
 import { Separator } from "@kandev/ui/separator";
 import { Alert, AlertDescription } from "@kandev/ui/alert";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
-import { Switch } from "@kandev/ui/switch";
 import { useToast } from "@/components/toast-provider";
 import { SettingsSection } from "@/components/settings/settings-section";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { useLinearEnabled } from "@/hooks/domains/linear/use-linear-enabled";
 import {
   IntegrationAuthStatusBanner,
   type IntegrationAuthHealth,
 } from "@/components/integrations/auth-status-banner";
 import { WorkspaceScopedSection } from "@/components/integrations/workspace-scoped-section";
+import { DraftedIntegrationEnabledControl } from "@/components/integrations/drafted-integration-enabled-control";
 import { INTEGRATION_STATUS_REFRESH_MS } from "@/hooks/domains/integrations/use-integration-availability";
 import {
   getLinearConfig,
@@ -41,13 +43,9 @@ function configToForm(cfg: LinearConfig | null): FormState {
   return { defaultTeamKey: cfg.defaultTeamKey, secret: "" };
 }
 
-function saveLabel(saving: boolean, hasConfig: boolean): string {
-  if (saving) return "Saving...";
-  return hasConfig ? "Update" : "Save";
-}
-
 type FieldsRowProps = {
   form: FormState;
+  baseline: FormState;
   loading: boolean;
   update: <K extends keyof FormState>(key: K, value: FormState[K]) => void;
   hasSavedSecret: boolean;
@@ -57,6 +55,7 @@ type FieldsRowProps = {
 
 function SecretField({
   form,
+  baseline,
   loading,
   update,
   hasSavedSecret,
@@ -77,6 +76,7 @@ function SecretField({
         type="password"
         placeholder={hasSavedSecret ? "••••••••" : "lin_api_..."}
         value={form.secret}
+        data-settings-dirty={form.secret !== baseline.secret}
         onChange={(e) => update("secret", e.target.value)}
         disabled={loading}
       />
@@ -95,7 +95,7 @@ function SecretField({
   );
 }
 
-function TeamSelector({ form, loading, update, teams, loadingTeams }: FieldsRowProps) {
+function TeamSelector({ form, baseline, loading, update, teams, loadingTeams }: FieldsRowProps) {
   return (
     <div className="space-y-1.5">
       <Label htmlFor="linear-team">Default team (optional)</Label>
@@ -104,7 +104,11 @@ function TeamSelector({ form, loading, update, teams, loadingTeams }: FieldsRowP
         onValueChange={(v) => update("defaultTeamKey", v === "__none__" ? "" : v)}
         disabled={loading || loadingTeams}
       >
-        <SelectTrigger id="linear-team" className="w-full">
+        <SelectTrigger
+          id="linear-team"
+          className="w-full"
+          data-settings-dirty={form.defaultTeamKey !== baseline.defaultTeamKey}
+        >
           <SelectValue placeholder={loadingTeams ? "Loading teams…" : "Choose a team"} />
         </SelectTrigger>
         <SelectContent>
@@ -144,28 +148,15 @@ function configToHealth(config: LinearConfig | null): IntegrationAuthHealth | nu
 }
 
 type ActionBarProps = {
-  saving: boolean;
   testing: boolean;
   loading: boolean;
   hasConfig: boolean;
-  disableSave: boolean;
   disableTest: boolean;
   onTest: () => void;
-  onSave: () => void;
   onDelete: () => void;
 };
 
-function ActionBar({
-  saving,
-  testing,
-  loading,
-  hasConfig,
-  disableSave,
-  disableTest,
-  onTest,
-  onSave,
-  onDelete,
-}: ActionBarProps) {
+function ActionBar({ testing, loading, hasConfig, disableTest, onTest, onDelete }: ActionBarProps) {
   return (
     <div className="flex flex-wrap items-center gap-2">
       <Button
@@ -179,15 +170,6 @@ function ActionBar({
       >
         {testing ? "Testing..." : "Test connection"}
       </Button>
-      <Button
-        type="button"
-        onClick={onSave}
-        disabled={disableSave}
-        className="cursor-pointer"
-        data-testid="linear-save-button"
-      >
-        {saveLabel(saving, hasConfig)}
-      </Button>
       {hasConfig && (
         <Button
           type="button"
@@ -207,7 +189,8 @@ type SettingsActionsArgs = {
   workspaceId: string;
   form: FormState;
   setConfig: (cfg: LinearConfig | null) => void;
-  setForm: (form: FormState) => void;
+  setBaselineConfig: (cfg: LinearConfig | null) => void;
+  setForm: Dispatch<SetStateAction<FormState>>;
   setTestResult: (r: TestLinearConnectionResult | null) => void;
 };
 
@@ -215,6 +198,7 @@ function useSettingsActions({
   workspaceId,
   form,
   setConfig,
+  setBaselineConfig,
   setForm,
   setTestResult,
 }: SettingsActionsArgs) {
@@ -242,6 +226,7 @@ function useSettingsActions({
   }, [workspaceId, form, setTestResult]);
 
   const handleSave = useCallback(async () => {
+    const submitted = form;
     setSaving(true);
     try {
       const saved = await setLinearConfig(
@@ -253,28 +238,33 @@ function useSettingsActions({
         { workspaceId },
       );
       setConfig(saved);
-      setForm(configToForm(saved));
+      setBaselineConfig(saved);
+      setForm((current) =>
+        JSON.stringify(current) === JSON.stringify(submitted) ? configToForm(saved) : current,
+      );
       setTestResult(null);
       toast({ description: "Linear configuration saved", variant: "success" });
     } catch (err) {
       toast({ description: `Save failed: ${String(err)}`, variant: "error" });
+      throw err;
     } finally {
       setSaving(false);
     }
-  }, [workspaceId, form, toast, setConfig, setForm, setTestResult]);
+  }, [workspaceId, form, toast, setConfig, setBaselineConfig, setForm, setTestResult]);
 
   const handleDelete = useCallback(async () => {
     if (!confirm("Remove Linear configuration?")) return;
     try {
       await deleteLinearConfig({ workspaceId });
       setConfig(null);
+      setBaselineConfig(null);
       setForm(emptyForm);
       setTestResult(null);
       toast({ description: "Linear configuration removed", variant: "success" });
     } catch (err) {
       toast({ description: `Delete failed: ${String(err)}`, variant: "error" });
     }
-  }, [workspaceId, toast, setConfig, setForm, setTestResult]);
+  }, [workspaceId, toast, setConfig, setBaselineConfig, setForm, setTestResult]);
 
   return { saving, testing, handleTest, handleSave, handleDelete };
 }
@@ -313,6 +303,7 @@ function useTeamsLoader(
 function useLinearSettings(workspaceId: string) {
   const { toast } = useToast();
   const [config, setConfig] = useState<LinearConfig | null>(null);
+  const [baselineConfig, setBaselineConfig] = useState<LinearConfig | null>(null);
   const [form, setForm] = useState<FormState>(emptyForm);
   const [loading, setLoading] = useState(true);
   const [testResult, setTestResult] = useState<TestLinearConnectionResult | null>(null);
@@ -324,6 +315,7 @@ function useLinearSettings(workspaceId: string) {
     try {
       const cfg = await getLinearConfig({ workspaceId });
       setConfig(cfg);
+      setBaselineConfig(cfg);
       setForm(configToForm(cfg));
     } catch (err) {
       toast({ description: `Failed to load Linear config: ${String(err)}`, variant: "error" });
@@ -353,17 +345,20 @@ function useLinearSettings(workspaceId: string) {
       setForm((prev) => ({ ...prev, [key]: value })),
     [],
   );
+  const discard = useCallback(() => setForm(configToForm(baselineConfig)), [baselineConfig]);
 
   const { saving, testing, handleTest, handleSave, handleDelete } = useSettingsActions({
     workspaceId,
     form,
     setConfig,
+    setBaselineConfig,
     setForm,
     setTestResult,
   });
 
   return {
     config,
+    baselineConfig,
     form,
     loading,
     saving,
@@ -373,6 +368,7 @@ function useLinearSettings(workspaceId: string) {
     teams,
     loadingTeams,
     update,
+    discard,
     handleTest,
     handleSave,
     handleDelete,
@@ -381,26 +377,27 @@ function useLinearSettings(workspaceId: string) {
 
 function EnabledPill() {
   const { enabled, setEnabled } = useLinearEnabled();
-  return (
-    <div className="flex items-center gap-2 rounded-full border bg-muted/30 px-3 py-1">
-      <Switch
-        id="linear-enabled"
-        checked={enabled}
-        onCheckedChange={setEnabled}
-        className="cursor-pointer"
-      />
-      <Label htmlFor="linear-enabled" className="text-xs cursor-pointer">
-        {enabled ? "Enabled" : "Disabled"}
-      </Label>
-    </div>
-  );
+  return <DraftedIntegrationEnabledControl id="linear" enabled={enabled} persist={setEnabled} />;
 }
 
 export function LinearConnectionSection({ workspaceId }: { workspaceId: string }) {
   const s = useLinearSettings(workspaceId);
+  const baseline = configToForm(s.baselineConfig);
   const missingSecret = !s.config?.hasSecret && !s.form.secret;
   const disableSave = s.saving || missingSecret;
   const disableTest = missingSecret;
+  const revision = JSON.stringify(s.form);
+  const dirty = !s.loading && revision !== JSON.stringify(configToForm(s.baselineConfig));
+
+  useSettingsSaveContributor({
+    id: `linear-config:${workspaceId}`,
+    revision,
+    isDirty: dirty,
+    canSave: !disableSave,
+    invalidReason: missingSecret ? "An API key is required." : undefined,
+    save: s.handleSave,
+    discard: s.discard,
+  });
 
   return (
     <SettingsSection
@@ -409,17 +406,19 @@ export function LinearConnectionSection({ workspaceId }: { workspaceId: string }
       description="Connect this workspace to Linear with a personal API key. Credentials are stored encrypted server-side for the selected workspace."
       action={<EnabledPill />}
     >
-      <Card>
+      <SettingsCard isDirty={dirty}>
         <CardContent className="space-y-4 pt-6">
           <IntegrationAuthStatusBanner health={s.health} />
           <SecretField
             form={s.form}
+            baseline={baseline}
             loading={s.loading}
             update={s.update}
             hasSavedSecret={!!s.config?.hasSecret}
           />
           <TeamSelector
             form={s.form}
+            baseline={baseline}
             loading={s.loading}
             update={s.update}
             hasSavedSecret={!!s.config?.hasSecret}
@@ -429,18 +428,15 @@ export function LinearConnectionSection({ workspaceId }: { workspaceId: string }
           <TestResultAlert result={s.testResult} />
           <Separator />
           <ActionBar
-            saving={s.saving}
             testing={s.testing}
             loading={s.loading}
             hasConfig={!!s.config}
-            disableSave={disableSave}
             disableTest={disableTest}
             onTest={s.handleTest}
-            onSave={s.handleSave}
             onDelete={s.handleDelete}
           />
         </CardContent>
-      </Card>
+      </SettingsCard>
     </SettingsSection>
   );
 }
diff --git a/apps/web/components/routing/app-link.test.tsx b/apps/web/components/routing/app-link.test.tsx
index 4057825ec0..04fca24784 100644
--- a/apps/web/components/routing/app-link.test.tsx
+++ b/apps/web/components/routing/app-link.test.tsx
@@ -1,9 +1,14 @@
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  clearNavigationBlockerForTests,
+  setNavigationBlocker,
+} from "@/lib/routing/navigation-guard";
 import Link from "./app-link";
 
 afterEach(() => {
   cleanup();
+  clearNavigationBlockerForTests();
   vi.restoreAllMocks();
 });
 
@@ -63,4 +68,22 @@ describe("AppLink", () => {
     expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
     expect(ref.current?.getAttribute("href")).toBe("/tasks");
   });
+
+  it("waits for a navigation blocker before changing routes", () => {
+    window.history.replaceState({}, "", "/settings/general/appearance");
+    let proceed: () => void = () => undefined;
+    const onLocationChange = vi.fn();
+    window.addEventListener("kandev:navigation", onLocationChange, { once: true });
+    setNavigationBlocker((intent) => {
+      proceed = intent.proceed;
+    });
+    render(<Link href="/tasks">Tasks</Link>);
+
+    fireEvent.click(screen.getByText("Tasks"));
+
+    expect(window.location.pathname).toBe("/settings/general/appearance");
+    proceed();
+    expect(window.location.pathname).toBe("/tasks");
+    expect(onLocationChange).toHaveBeenCalledOnce();
+  });
 });
diff --git a/apps/web/components/routing/app-link.tsx b/apps/web/components/routing/app-link.tsx
index 30920aa5ce..da04f8d776 100644
--- a/apps/web/components/routing/app-link.tsx
+++ b/apps/web/components/routing/app-link.tsx
@@ -4,6 +4,7 @@ import { forwardRef } from "react";
 import type { AnchorHTMLAttributes, MouseEvent, ReactNode } from "react";
 
 import { LOCATION_CHANGE_EVENT } from "@/lib/routing/navigation-event";
+import { pushNavigationState } from "@/lib/routing/navigation-guard";
 
 type AppLinkHref = string | URL;
 
@@ -23,9 +24,10 @@ const Link = forwardRef<HTMLAnchorElement, AppLinkProps>(function Link(
     if (shouldUseBrowserNavigation(event, resolvedHref)) return;
 
     event.preventDefault();
-    window.history.pushState({}, "", resolvedHref);
-    window.scrollTo({ top: 0, left: 0 });
-    window.dispatchEvent(new Event(LOCATION_CHANGE_EVENT));
+    pushNavigationState({}, "", resolvedHref, () => {
+      window.scrollTo({ top: 0, left: 0 });
+      window.dispatchEvent(new Event(LOCATION_CHANGE_EVENT));
+    });
   };
 
   return <a {...props} ref={ref} href={resolvedHref} onClick={handleClick} />;
diff --git a/apps/web/components/sentry/sentry-instance-form.test.tsx b/apps/web/components/sentry/sentry-instance-form.test.tsx
index 95358c3b3d..5fe9c97bd3 100644
--- a/apps/web/components/sentry/sentry-instance-form.test.tsx
+++ b/apps/web/components/sentry/sentry-instance-form.test.tsx
@@ -1,7 +1,8 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { TooltipProvider } from "@kandev/ui/tooltip";
 import type { SentryConfig } from "@/lib/types/sentry";
+import { SettingsSaveProvider } from "@/components/settings/settings-save-provider";
 
 vi.mock("@/components/toast-provider", () => ({
   useToast: () => ({ toast: vi.fn() }),
@@ -17,6 +18,7 @@ vi.mock("@/lib/api/domains/sentry-api", () => ({
 }));
 
 import { SentryInstanceForm } from "./sentry-instance-form";
+import { createSentryInstance, updateSentryInstance } from "@/lib/api/domains/sentry-api";
 
 const savedInstance: SentryConfig = {
   id: "instance-1",
@@ -33,13 +35,15 @@ const savedInstance: SentryConfig = {
 function renderForm() {
   return render(
     <TooltipProvider>
-      <SentryInstanceForm
-        workspaceId="workspace-1"
-        instance={savedInstance}
-        idPrefix="sentry-edit"
-        onSaved={vi.fn()}
-        onCancel={vi.fn()}
-      />
+      <SettingsSaveProvider>
+        <SentryInstanceForm
+          workspaceId="workspace-1"
+          instance={savedInstance}
+          idPrefix="sentry-edit"
+          onSaved={vi.fn()}
+          onCancel={vi.fn()}
+        />
+      </SettingsSaveProvider>
     </TooltipProvider>,
   );
 }
@@ -60,16 +64,38 @@ describe("SentryInstanceForm", () => {
     expect(screen.getByTestId("sentry-edit-test-button")).toHaveProperty("disabled", true);
   });
 
+  it("persists existing instance edits only through the shared save action", async () => {
+    vi.mocked(updateSentryInstance).mockResolvedValue(savedInstance);
+    renderForm();
+
+    fireEvent.change(screen.getByTestId("sentry-edit-name-input"), {
+      target: { value: "Primary" },
+    });
+    expect(updateSentryInstance).not.toHaveBeenCalled();
+    expect(screen.queryByTestId("sentry-edit-save-button")).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+    await waitFor(() =>
+      expect(updateSentryInstance).toHaveBeenCalledWith(
+        "workspace-1",
+        savedInstance.id,
+        expect.objectContaining({ name: "Primary" }),
+      ),
+    );
+  });
+
   it("labels new-instance forms without labeling edit forms", () => {
     render(
       <TooltipProvider>
-        <SentryInstanceForm
-          workspaceId="workspace-1"
-          instance={null}
-          idPrefix="sentry-add"
-          onSaved={vi.fn()}
-          onCancel={vi.fn()}
-        />
+        <SettingsSaveProvider>
+          <SentryInstanceForm
+            workspaceId="workspace-1"
+            instance={null}
+            idPrefix="sentry-add"
+            onSaved={vi.fn()}
+            onCancel={vi.fn()}
+          />
+        </SettingsSaveProvider>
       </TooltipProvider>,
     );
 
@@ -77,4 +103,39 @@ describe("SentryInstanceForm", () => {
     expect(screen.getByTestId("sentry-add-form-heading").className).toContain("font-semibold");
     expect(screen.queryByTestId("sentry-edit-form-heading")).toBeNull();
   });
+
+  it("treats a new instance as dirty and creates it through the shared save action", async () => {
+    vi.mocked(createSentryInstance).mockResolvedValue(savedInstance);
+    render(
+      <TooltipProvider>
+        <SettingsSaveProvider>
+          <SentryInstanceForm
+            workspaceId="workspace-1"
+            instance={null}
+            idPrefix="sentry-add"
+            onSaved={vi.fn()}
+            onCancel={vi.fn()}
+          />
+        </SettingsSaveProvider>
+      </TooltipProvider>,
+    );
+
+    expect(screen.getByTestId("sentry-add-form").getAttribute("data-settings-dirty")).toBe("true");
+    expect(screen.queryByTestId("sentry-add-save-button")).toBeNull();
+    fireEvent.change(screen.getByTestId("sentry-add-name-input"), {
+      target: { value: "Production" },
+    });
+    fireEvent.change(screen.getByTestId("sentry-add-secret-input"), {
+      target: { value: "sntrys_token" },
+    });
+    expect(createSentryInstance).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+    await waitFor(() =>
+      expect(createSentryInstance).toHaveBeenCalledWith(
+        "workspace-1",
+        expect.objectContaining({ name: "Production", secret: "sntrys_token" }),
+      ),
+    );
+  });
 });
diff --git a/apps/web/components/sentry/sentry-instance-form.tsx b/apps/web/components/sentry/sentry-instance-form.tsx
index 300985e3a0..faee094a24 100644
--- a/apps/web/components/sentry/sentry-instance-form.tsx
+++ b/apps/web/components/sentry/sentry-instance-form.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { IconInfoCircle } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
 import { Input } from "@kandev/ui/input";
@@ -9,6 +9,7 @@ import { Separator } from "@kandev/ui/separator";
 import { Alert, AlertDescription } from "@kandev/ui/alert";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@kandev/ui/tooltip";
 import { useToast } from "@/components/toast-provider";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
 import {
   createSentryInstance,
   SENTRY_ERROR_CODES,
@@ -35,12 +36,13 @@ function instanceToForm(instance: SentryConfig | null): FormState {
 
 type FieldProps = {
   form: FormState;
+  baseline: FormState;
   idPrefix: string;
   loading: boolean;
   update: <K extends keyof FormState>(key: K, value: FormState[K]) => void;
 };
 
-function NameField({ form, idPrefix, loading, update }: FieldProps) {
+function NameField({ form, baseline, idPrefix, loading, update }: FieldProps) {
   return (
     <div className={FIELD}>
       <Label htmlFor={`${idPrefix}-name`}>Name</Label>
@@ -49,6 +51,7 @@ function NameField({ form, idPrefix, loading, update }: FieldProps) {
         data-testid={`${idPrefix}-name-input`}
         placeholder="Production, Self-hosted, …"
         value={form.name}
+        data-settings-dirty={form.name !== baseline.name}
         onChange={(e) => update("name", e.target.value)}
         disabled={loading}
       />
@@ -57,7 +60,7 @@ function NameField({ form, idPrefix, loading, update }: FieldProps) {
   );
 }
 
-function UrlField({ form, idPrefix, loading, update }: FieldProps) {
+function UrlField({ form, baseline, idPrefix, loading, update }: FieldProps) {
   return (
     <div className={FIELD}>
       <Label htmlFor={`${idPrefix}-url`}>Instance URL</Label>
@@ -67,6 +70,7 @@ function UrlField({ form, idPrefix, loading, update }: FieldProps) {
         type="url"
         placeholder={SENTRY_DEFAULT_URL}
         value={form.url}
+        data-settings-dirty={form.url !== baseline.url}
         onChange={(e) => update("url", e.target.value)}
         disabled={loading}
       />
@@ -80,6 +84,7 @@ function UrlField({ form, idPrefix, loading, update }: FieldProps) {
 
 function SecretField({
   form,
+  baseline,
   idPrefix,
   loading,
   update,
@@ -130,6 +135,7 @@ function SecretField({
         type="password"
         placeholder={hasSavedSecret ? "••••••••" : "sntrys_..."}
         value={form.secret}
+        data-settings-dirty={form.secret !== baseline.secret}
         onChange={(e) => update("secret", e.target.value)}
         disabled={loading}
       />
@@ -154,10 +160,9 @@ type UseInstanceFormArgs = {
   workspaceId: string;
   instance: SentryConfig | null;
   form: FormState;
-  onSaved: (cfg: SentryConfig) => void;
 };
 
-function useInstanceForm({ workspaceId, instance, form, onSaved }: UseInstanceFormArgs) {
+function useInstanceForm({ workspaceId, instance, form }: UseInstanceFormArgs) {
   const { toast } = useToast();
   const [saving, setSaving] = useState(false);
   const [testing, setTesting] = useState(false);
@@ -203,17 +208,18 @@ function useInstanceForm({ workspaceId, instance, form, onSaved }: UseInstanceFo
             secret: form.secret,
           });
       toast({ description: "Sentry instance saved", variant: "success" });
-      onSaved(saved);
+      return saved;
     } catch (err) {
       const message =
         sentryErrorCode(err) === SENTRY_ERROR_CODES.nameTaken
           ? `An instance named "${form.name.trim()}" already exists in this workspace.`
           : `Save failed: ${String(err)}`;
       toast({ description: message, variant: "error" });
+      throw err;
     } finally {
       setSaving(false);
     }
-  }, [workspaceId, instance, form, toast, onSaved]);
+  }, [workspaceId, instance, form, toast]);
 
   return { saving, testing, testResult, candidateTest, handleTest, handleSave };
 }
@@ -227,14 +233,100 @@ type SentryInstanceFormProps = {
   idPrefix: string;
   onSaved: (cfg: SentryConfig) => void;
   onCancel: () => void;
+  onDirtyChange?: (isDirty: boolean) => void;
 };
 
+type CoordinatedSaveOptions = {
+  instance: SentryConfig | null;
+  form: FormState;
+  setForm: (form: FormState) => void;
+  handleSave: () => Promise<SentryConfig>;
+  onSaved: (cfg: SentryConfig) => void;
+  canSave: boolean;
+};
+
+function useCoordinatedInstanceSave({
+  instance,
+  form,
+  setForm,
+  handleSave,
+  onSaved,
+  canSave,
+}: CoordinatedSaveOptions) {
+  const [baseline, setBaseline] = useState<FormState>(() => instanceToForm(instance));
+  const revision = JSON.stringify(form);
+  const latestRevision = useRef(revision);
+  latestRevision.current = revision;
+  const isDirty = instance === null || revision !== JSON.stringify(baseline);
+
+  useSettingsSaveContributor({
+    id: `sentry-instance:${instance?.id ?? "new"}`,
+    revision,
+    isDirty,
+    canSave,
+    invalidReason: canSave ? undefined : "Enter an instance name and auth token before saving.",
+    save: async (submittedRevision) => {
+      const submitted = form;
+      const saved = await handleSave();
+      setBaseline(submitted);
+      if (instance === null || latestRevision.current === submittedRevision) onSaved(saved);
+    },
+    discard: () => setForm(baseline),
+  });
+
+  return { baseline, isDirty };
+}
+
+type FormActionsProps = {
+  idPrefix: string;
+  testing: boolean;
+  disableTest: boolean;
+  requiresTestSecret: boolean;
+  onTest: () => void;
+  onCancel: () => void;
+};
+
+function FormActions({
+  idPrefix,
+  testing,
+  disableTest,
+  requiresTestSecret,
+  onTest,
+  onCancel,
+}: FormActionsProps) {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Button
+        type="button"
+        variant="outline"
+        onClick={onTest}
+        disabled={disableTest}
+        className="cursor-pointer"
+        title={requiresTestSecret ? "Paste an auth token to test the connection" : undefined}
+        data-testid={`${idPrefix}-test-button`}
+      >
+        {testing ? "Testing..." : "Test connection"}
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        onClick={onCancel}
+        className="ml-auto cursor-pointer"
+        data-testid={`${idPrefix}-cancel-button`}
+      >
+        Cancel
+      </Button>
+    </div>
+  );
+}
+
 export function SentryInstanceForm({
   workspaceId,
   instance,
   idPrefix,
   onSaved,
   onCancel,
+  onDirtyChange,
 }: SentryInstanceFormProps) {
   const [form, setForm] = useState<FormState>(() => instanceToForm(instance));
   const update = useCallback(
@@ -246,28 +338,53 @@ export function SentryInstanceForm({
     workspaceId,
     instance,
     form,
-    onSaved,
   });
 
   const hasSavedSecret = !!instance?.hasSecret;
   const missingSecret = !hasSavedSecret && !form.secret;
   const requiresTestSecret = !form.secret && (candidateTest || missingSecret);
-  const disableSave = saving || !form.name.trim() || missingSecret;
   const disableTest = testing || requiresTestSecret;
-  let saveLabel = instance ? "Update" : "Save";
-  if (saving) saveLabel = "Saving...";
+  const canSave = Boolean(form.name.trim()) && !missingSecret;
+  const coordinated = useCoordinatedInstanceSave({
+    instance,
+    form,
+    setForm,
+    handleSave,
+    onSaved,
+    canSave,
+  });
+  useEffect(() => onDirtyChange?.(coordinated.isDirty), [coordinated.isDirty, onDirtyChange]);
+  useEffect(() => () => onDirtyChange?.(false), [onDirtyChange]);
 
   return (
-    <div className="space-y-4 rounded-md border p-4" data-testid={`${idPrefix}-form`}>
+    <div
+      className="space-y-4 rounded-md border p-4"
+      data-testid={`${idPrefix}-form`}
+      data-settings-dirty={coordinated.isDirty}
+      data-settings-dirty-level="container"
+    >
       {instance === null && (
         <h4 data-testid={`${idPrefix}-form-heading`} className="text-sm font-semibold">
           New Instance
         </h4>
       )}
-      <NameField form={form} idPrefix={idPrefix} loading={saving} update={update} />
-      <UrlField form={form} idPrefix={idPrefix} loading={saving} update={update} />
+      <NameField
+        form={form}
+        baseline={coordinated.baseline}
+        idPrefix={idPrefix}
+        loading={saving}
+        update={update}
+      />
+      <UrlField
+        form={form}
+        baseline={coordinated.baseline}
+        idPrefix={idPrefix}
+        loading={saving}
+        update={update}
+      />
       <SecretField
         form={form}
+        baseline={coordinated.baseline}
         idPrefix={idPrefix}
         loading={saving}
         update={update}
@@ -275,37 +392,14 @@ export function SentryInstanceForm({
       />
       <TestResultAlert result={testResult} />
       <Separator />
-      <div className="flex flex-wrap items-center gap-2">
-        <Button
-          type="button"
-          variant="outline"
-          onClick={handleTest}
-          disabled={disableTest}
-          className="cursor-pointer"
-          title={requiresTestSecret ? "Paste an auth token to test the connection" : undefined}
-          data-testid={`${idPrefix}-test-button`}
-        >
-          {testing ? "Testing..." : "Test connection"}
-        </Button>
-        <Button
-          type="button"
-          onClick={handleSave}
-          disabled={disableSave}
-          className="cursor-pointer"
-          data-testid={`${idPrefix}-save-button`}
-        >
-          {saveLabel}
-        </Button>
-        <Button
-          type="button"
-          variant="ghost"
-          onClick={onCancel}
-          className="ml-auto cursor-pointer"
-          data-testid={`${idPrefix}-cancel-button`}
-        >
-          Cancel
-        </Button>
-      </div>
+      <FormActions
+        idPrefix={idPrefix}
+        testing={testing}
+        disableTest={disableTest}
+        requiresTestSecret={requiresTestSecret}
+        onTest={handleTest}
+        onCancel={onCancel}
+      />
     </div>
   );
 }
diff --git a/apps/web/components/sentry/sentry-issue-watch-table.test.tsx b/apps/web/components/sentry/sentry-issue-watch-table.test.tsx
index 9cf6f4592c..a704bd5ef8 100644
--- a/apps/web/components/sentry/sentry-issue-watch-table.test.tsx
+++ b/apps/web/components/sentry/sentry-issue-watch-table.test.tsx
@@ -41,6 +41,7 @@ function renderTable(watches: SentryIssueWatch[]) {
     <TooltipProvider>
       <SentryIssueWatchTable
         watches={watches}
+        dirtyIds={new Set(watches.slice(0, 1).map(({ id }) => id))}
         instanceName={resolveName}
         onEdit={noop}
         onDelete={noop}
@@ -73,4 +74,18 @@ describe("SentryIssueWatchTable", () => {
     const cells = screen.getAllByTestId("watch-instance").map((c) => c.textContent);
     expect(cells).toEqual(["Production", "(unavailable)", "—"]);
   });
+
+  it("marks the changed watcher row and enable control dirty", () => {
+    renderTable([watch({ id: "w1" }), watch({ id: "w2" })]);
+
+    expect(screen.getByTestId("sentry-watch-row-w1").getAttribute("data-settings-dirty")).toBe(
+      "true",
+    );
+    expect(screen.getByTestId("sentry-watch-enabled-w1").getAttribute("data-settings-dirty")).toBe(
+      "true",
+    );
+    expect(screen.getByTestId("sentry-watch-row-w2").getAttribute("data-settings-dirty")).toBe(
+      "false",
+    );
+  });
 });
diff --git a/apps/web/components/sentry/sentry-issue-watch-table.tsx b/apps/web/components/sentry/sentry-issue-watch-table.tsx
index 7ab8a58b8e..db0bf2a5e5 100644
--- a/apps/web/components/sentry/sentry-issue-watch-table.tsx
+++ b/apps/web/components/sentry/sentry-issue-watch-table.tsx
@@ -15,6 +15,7 @@ import type { SentryIssueWatch, SentrySearchFilter } from "@/lib/types/sentry";
 
 type SentryIssueWatchTableProps = {
   watches: SentryIssueWatch[];
+  dirtyIds: ReadonlySet<string>;
   // instanceName resolves a watch's bound sentryInstanceId to its display name.
   // The table is workspace-scoped, so it shows which instance each watch polls
   // (not which workspace it belongs to).
@@ -60,12 +61,14 @@ function summarizeFilter(filter: SentrySearchFilter | undefined): string {
 
 function WatchActions({
   watch,
+  isDirty,
   onToggleEnabled,
   onTrigger,
   onReset,
   onDelete,
 }: {
   watch: SentryIssueWatch;
+  isDirty: boolean;
   onToggleEnabled: (watch: SentryIssueWatch) => void;
   onTrigger: (id: string, workspaceId: string) => void;
   onReset: (id: string, workspaceId: string) => void;
@@ -79,6 +82,8 @@ function WatchActions({
             variant="ghost"
             size="sm"
             className="h-7 w-7 p-0 cursor-pointer"
+            data-settings-dirty={isDirty}
+            data-testid={`sentry-watch-enabled-${watch.id}`}
             onClick={(e) => {
               e.stopPropagation();
               onToggleEnabled(watch);
@@ -149,6 +154,7 @@ function WatchActions({
 
 export function SentryIssueWatchTable({
   watches,
+  dirtyIds,
   instanceName,
   onEdit,
   onDelete,
@@ -178,7 +184,14 @@ export function SentryIssueWatchTable({
       </TableHeader>
       <TableBody>
         {watches.map((watch) => (
-          <TableRow key={watch.id} className="cursor-pointer" onClick={() => onEdit(watch)}>
+          <TableRow
+            key={watch.id}
+            className="cursor-pointer"
+            data-settings-dirty={dirtyIds.has(watch.id)}
+            data-settings-dirty-level="container"
+            data-testid={`sentry-watch-row-${watch.id}`}
+            onClick={() => onEdit(watch)}
+          >
             <TableCell className="text-xs text-muted-foreground" data-testid="watch-instance">
               {instanceName(watch.sentryInstanceId)}
             </TableCell>
@@ -202,6 +215,7 @@ export function SentryIssueWatchTable({
             <TableCell className="text-right">
               <WatchActions
                 watch={watch}
+                isDirty={dirtyIds.has(watch.id)}
                 onToggleEnabled={onToggleEnabled}
                 onTrigger={onTrigger}
                 onReset={onReset}
diff --git a/apps/web/components/sentry/sentry-issue-watchers-section.test.tsx b/apps/web/components/sentry/sentry-issue-watchers-section.test.tsx
index 31464a8b3c..33c1e64f7c 100644
--- a/apps/web/components/sentry/sentry-issue-watchers-section.test.tsx
+++ b/apps/web/components/sentry/sentry-issue-watchers-section.test.tsx
@@ -2,6 +2,7 @@ import { cleanup, render } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { useSentryIssueWatches } from "@/hooks/domains/sentry/use-sentry-issue-watches";
 import { SentryIssueWatchersSection } from "./sentry-issue-watchers-section";
+import { SettingsSaveProvider } from "@/components/settings/settings-save-provider";
 
 // The global active workspace intentionally differs from the routed workspace.
 const h = vi.hoisted(() => ({ activeId: "ws-active" as string | null }));
@@ -55,14 +56,22 @@ afterEach(() => {
 
 describe("SentryIssueWatchersSection scoping", () => {
   it("fetches watches only for its supplied workspace (never all workspaces)", () => {
-    render(<SentryIssueWatchersSection workspaceId="ws-active" />);
+    render(
+      <SettingsSaveProvider>
+        <SentryIssueWatchersSection workspaceId="ws-active" />
+      </SettingsSaveProvider>,
+    );
     expect(vi.mocked(useSentryIssueWatches)).toHaveBeenCalledWith("ws-active");
     // never the unscoped `undefined` that would return foreign-workspace watches
     expect(vi.mocked(useSentryIssueWatches)).not.toHaveBeenCalledWith(undefined);
   });
 
   it("fetches watches for the routed workspace before the active workspace", () => {
-    render(<SentryIssueWatchersSection workspaceId="ws-route" />);
+    render(
+      <SettingsSaveProvider>
+        <SentryIssueWatchersSection workspaceId="ws-route" />
+      </SettingsSaveProvider>,
+    );
     expect(vi.mocked(useSentryIssueWatches)).toHaveBeenCalledWith("ws-route");
     expect(vi.mocked(useSentryIssueWatches)).not.toHaveBeenCalledWith("ws-active");
   });
diff --git a/apps/web/components/sentry/sentry-issue-watchers-section.tsx b/apps/web/components/sentry/sentry-issue-watchers-section.tsx
index 17a87e82e1..b2e23bde74 100644
--- a/apps/web/components/sentry/sentry-issue-watchers-section.tsx
+++ b/apps/web/components/sentry/sentry-issue-watchers-section.tsx
@@ -3,11 +3,12 @@
 import { useCallback, useState } from "react";
 import { IconBellRinging, IconPlus } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent } from "@kandev/ui/card";
 import { SettingsSection } from "@/components/settings/settings-section";
+import { WatcherSettingsCard } from "@/components/integrations/watcher-settings-card";
 import { useToast } from "@/components/toast-provider";
 import { useSentryIssueWatches } from "@/hooks/domains/sentry/use-sentry-issue-watches";
 import { useSentryInstances } from "@/hooks/domains/sentry/use-sentry-availability";
+import { useWatcherEnabledDrafts } from "@/components/integrations/use-watcher-enabled-drafts";
 import { ResetWatchDialog, useWatchResetController } from "@/components/watches/reset-watch-dialog";
 import { SentryIssueWatchTable } from "./sentry-issue-watch-table";
 import { SentryIssueWatchDialog } from "./sentry-issue-watch-dialog";
@@ -81,17 +82,6 @@ function useToastedActions({ create, update, remove, trigger, reset }: RawAction
     [trigger, toast],
   );
 
-  const toggleEnabled = useCallback(
-    async (w: SentryIssueWatch) => {
-      try {
-        await update(w.id, w.workspaceId, { enabled: !w.enabled });
-      } catch (err) {
-        toast({ description: `Toggle failed: ${String(err)}`, variant: "error" });
-      }
-    },
-    [update, toast],
-  );
-
   const wrappedReset = useCallback(
     async (id: string, workspaceId: string) => {
       try {
@@ -118,7 +108,6 @@ function useToastedActions({ create, update, remove, trigger, reset }: RawAction
     remove: wrappedDelete,
     trigger: wrappedTrigger,
     reset: wrappedReset,
-    toggleEnabled,
   };
 }
 
@@ -134,6 +123,17 @@ export function SentryIssueWatchersSection({ workspaceId }: { workspaceId: strin
     [instances],
   );
   const actions = useToastedActions({ create, update, remove, trigger, reset });
+  const saveEnabled = useCallback(
+    async (watch: SentryIssueWatch, enabled: boolean) => {
+      await update(watch.id, watch.workspaceId, { enabled });
+    },
+    [update],
+  );
+  const enabledDrafts = useWatcherEnabledDrafts({
+    id: `sentry-watch-enabled:${workspaceId}`,
+    items,
+    saveEnabled,
+  });
 
   const [dialogOpen, setDialogOpen] = useState(false);
   const [editing, setEditing] = useState<SentryIssueWatch | null>(null);
@@ -172,23 +172,23 @@ export function SentryIssueWatchersSection({ workspaceId }: { workspaceId: strin
         </Button>
       }
     >
-      <Card>
-        <CardContent className="pt-6">
-          {loading && items.length === 0 ? (
-            <p className="text-sm text-muted-foreground py-4 text-center">Loading…</p>
-          ) : (
-            <SentryIssueWatchTable
-              watches={items}
-              instanceName={instanceName}
-              onEdit={openEdit}
-              onDelete={actions.remove}
-              onTrigger={actions.trigger}
-              onReset={handleReset}
-              onToggleEnabled={actions.toggleEnabled}
-            />
-          )}
-        </CardContent>
-      </Card>
+      <WatcherSettingsCard
+        isDirty={enabledDrafts.dirtyIds.size > 0}
+        isLoading={loading}
+        isEmpty={items.length === 0}
+        testId="sentry-watchers-card"
+      >
+        <SentryIssueWatchTable
+          watches={enabledDrafts.items}
+          dirtyIds={enabledDrafts.dirtyIds}
+          instanceName={instanceName}
+          onEdit={openEdit}
+          onDelete={actions.remove}
+          onTrigger={actions.trigger}
+          onReset={handleReset}
+          onToggleEnabled={enabledDrafts.toggleEnabled}
+        />
+      </WatcherSettingsCard>
       <SentryIssueWatchDialog
         open={dialogOpen}
         onOpenChange={setDialogOpen}
diff --git a/apps/web/components/sentry/sentry-settings.test.tsx b/apps/web/components/sentry/sentry-settings.test.tsx
index 75e5f152c6..ae08f920a6 100644
--- a/apps/web/components/sentry/sentry-settings.test.tsx
+++ b/apps/web/components/sentry/sentry-settings.test.tsx
@@ -1,8 +1,10 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { ReactNode } from "react";
 import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { TooltipProvider } from "@kandev/ui/tooltip";
 import { listSentryInstances } from "@/lib/api/domains/sentry-api";
 import type { SentryConfig } from "@/lib/types/sentry";
+import { SettingsSaveProvider } from "@/components/settings/settings-save-provider";
 
 const mocks = vi.hoisted(() => ({
   activeWorkspaceId: "ws-active",
@@ -66,6 +68,14 @@ vi.mock("@/lib/api/domains/sentry-api", () => ({
 
 import { SentryConnectionSection, SentryIntegrationPage } from "./sentry-settings";
 
+function SettingsHarness({ children }: { children: ReactNode }) {
+  return (
+    <SettingsSaveProvider>
+      <TooltipProvider>{children}</TooltipProvider>
+    </SettingsSaveProvider>
+  );
+}
+
 const instance: SentryConfig = {
   id: "instance-1",
   workspaceId: "workspace-1",
@@ -94,9 +104,9 @@ describe("SentryConnectionSection", () => {
     vi.mocked(listSentryInstances).mockResolvedValueOnce([instance]).mockResolvedValueOnce([]);
 
     render(
-      <TooltipProvider>
+      <SettingsHarness>
         <SentryConnectionSection workspaceId="workspace-1" />
-      </TooltipProvider>,
+      </SettingsHarness>,
     );
 
     await act(async () => {
@@ -117,9 +127,9 @@ describe("SentryConnectionSection", () => {
     vi.mocked(listSentryInstances).mockRejectedValue(new Error("offline"));
 
     render(
-      <TooltipProvider>
+      <SettingsHarness>
         <SentryConnectionSection workspaceId="workspace-1" />
-      </TooltipProvider>,
+      </SettingsHarness>,
     );
 
     await act(async () => {
@@ -140,9 +150,9 @@ describe("SentryIntegrationPage workspace scope", () => {
     vi.mocked(listSentryInstances).mockResolvedValue([]);
 
     render(
-      <TooltipProvider>
+      <SettingsHarness>
         <SentryIntegrationPage workspaceId="ws-route" />
-      </TooltipProvider>,
+      </SettingsHarness>,
     );
 
     expect(screen.getByTestId("sentry-watchers-workspace").textContent).toBe("ws-route");
@@ -152,9 +162,9 @@ describe("SentryIntegrationPage workspace scope", () => {
     vi.mocked(listSentryInstances).mockResolvedValue([]);
 
     render(
-      <TooltipProvider>
+      <SettingsHarness>
         <SentryIntegrationPage />
-      </TooltipProvider>,
+      </SettingsHarness>,
     );
 
     expect(screen.getByTestId("sentry-watchers-workspace").textContent).toBe("ws-active");
diff --git a/apps/web/components/sentry/sentry-settings.tsx b/apps/web/components/sentry/sentry-settings.tsx
index 4463041398..ef311a036b 100644
--- a/apps/web/components/sentry/sentry-settings.tsx
+++ b/apps/web/components/sentry/sentry-settings.tsx
@@ -3,13 +3,13 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { IconBrandSentry, IconPlus } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent } from "@kandev/ui/card";
-import { Label } from "@kandev/ui/label";
-import { Switch } from "@kandev/ui/switch";
+import { CardContent } from "@kandev/ui/card";
 import { useToast } from "@/components/toast-provider";
 import { SettingsSection } from "@/components/settings/settings-section";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { useSentryEnabled } from "@/hooks/domains/sentry/use-sentry-enabled";
 import { WorkspaceScopedSection } from "@/components/integrations/workspace-scoped-section";
+import { DraftedIntegrationEnabledControl } from "@/components/integrations/drafted-integration-enabled-control";
 import { INTEGRATION_STATUS_REFRESH_MS } from "@/hooks/domains/integrations/use-integration-availability";
 import {
   deleteSentryInstance,
@@ -76,6 +76,7 @@ type InstanceListProps = {
   onDelete: (instance: SentryConfig) => void;
   onSaved: () => void;
   onCancel: () => void;
+  onDirtyChange: (isDirty: boolean) => void;
 };
 
 function InstanceList({
@@ -86,6 +87,7 @@ function InstanceList({
   onDelete,
   onSaved,
   onCancel,
+  onDirtyChange,
 }: InstanceListProps) {
   if (instances.length === 0 && mode.kind !== "add") {
     return (
@@ -105,6 +107,7 @@ function InstanceList({
             idPrefix="sentry-edit"
             onSaved={onSaved}
             onCancel={onCancel}
+            onDirtyChange={onDirtyChange}
           />
         ) : (
           <SentryInstanceCard
@@ -121,29 +124,22 @@ function InstanceList({
 
 function EnabledPill() {
   const { enabled, setEnabled } = useSentryEnabled();
-  return (
-    <div className="flex items-center gap-2 rounded-full border bg-muted/30 px-3 py-1">
-      <Switch
-        id="sentry-enabled"
-        checked={enabled}
-        onCheckedChange={setEnabled}
-        className="cursor-pointer"
-      />
-      <Label htmlFor="sentry-enabled" className="text-xs cursor-pointer">
-        {enabled ? "Enabled" : "Disabled"}
-      </Label>
-    </div>
-  );
+  return <DraftedIntegrationEnabledControl id="sentry" enabled={enabled} persist={setEnabled} />;
 }
 
 export function SentryConnectionSection({ workspaceId }: { workspaceId: string }) {
   const { instances, loading, reload } = useInstanceList(workspaceId);
   const { toast } = useToast();
   const [mode, setMode] = useState<EditMode>({ kind: "none" });
+  const [formDirty, setFormDirty] = useState(false);
 
-  const closeForm = useCallback(() => setMode({ kind: "none" }), []);
+  const closeForm = useCallback(() => {
+    setMode({ kind: "none" });
+    setFormDirty(false);
+  }, []);
   const handleSaved = useCallback(async () => {
     setMode({ kind: "none" });
+    setFormDirty(false);
     await reload();
   }, [reload]);
 
@@ -181,7 +177,7 @@ export function SentryConnectionSection({ workspaceId }: { workspaceId: string }
       description="Connect this workspace to Sentry. Add a named instance for each Sentry org or self-hosted host; credentials are stored encrypted server-side."
       action={<EnabledPill />}
     >
-      <Card>
+      <SettingsCard isDirty={formDirty}>
         <CardContent className="space-y-3 pt-6">
           <h3 className="text-sm font-semibold" data-testid="sentry-instances-heading">
             Instances
@@ -193,10 +189,14 @@ export function SentryConnectionSection({ workspaceId }: { workspaceId: string }
               instances={instances}
               mode={mode}
               workspaceId={workspaceId}
-              onEdit={(id) => setMode({ kind: "edit", id })}
+              onEdit={(id) => {
+                setFormDirty(false);
+                setMode({ kind: "edit", id });
+              }}
               onDelete={handleDelete}
               onSaved={handleSaved}
               onCancel={closeForm}
+              onDirtyChange={setFormDirty}
             />
           )}
           {mode.kind === "add" && (
@@ -206,13 +206,17 @@ export function SentryConnectionSection({ workspaceId }: { workspaceId: string }
               idPrefix="sentry-add"
               onSaved={handleSaved}
               onCancel={closeForm}
+              onDirtyChange={setFormDirty}
             />
           )}
           {canAddInstance && (
             <Button
               type="button"
               variant="outline"
-              onClick={() => setMode({ kind: "add" })}
+              onClick={() => {
+                setFormDirty(false);
+                setMode({ kind: "add" });
+              }}
               className="cursor-pointer gap-1"
               data-testid="sentry-add-instance-button"
             >
@@ -221,7 +225,7 @@ export function SentryConnectionSection({ workspaceId }: { workspaceId: string }
             </Button>
           )}
         </CardContent>
-      </Card>
+      </SettingsCard>
     </SettingsSection>
   );
 }
diff --git a/apps/web/components/settings/agent-profile-page.test.tsx b/apps/web/components/settings/agent-profile-page.test.tsx
index cbce2d4117..f0ae7ade37 100644
--- a/apps/web/components/settings/agent-profile-page.test.tsx
+++ b/apps/web/components/settings/agent-profile-page.test.tsx
@@ -1,10 +1,14 @@
 import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
 import { useState } from "react";
-import { ProfileEnvVarsEditor } from "@/components/settings/agent-profile-page";
-import type { ProfileEnvVar } from "@/lib/types/http";
+import {
+  preserveNewerProfileDraft,
+  ProfileEnvVarsEditor,
+} from "@/components/settings/agent-profile-page";
+import type { AgentProfile, ProfileEnvVar } from "@/lib/types/http";
 
 afterEach(cleanup);
+const DIRTY_ATTRIBUTE = "data-settings-dirty";
 
 function EnvVarsHarness({ initialEnvVars = [] }: { initialEnvVars?: ProfileEnvVar[] }) {
   const [envVars, setEnvVars] = useState<ProfileEnvVar[]>(initialEnvVars);
@@ -14,6 +18,7 @@ function EnvVarsHarness({ initialEnvVars = [] }: { initialEnvVars?: ProfileEnvVa
     <>
       <ProfileEnvVarsEditor
         envVars={envVars}
+        baselineEnvVars={initialEnvVars}
         secrets={[]}
         onChange={(nextEnvVars) => {
           setChangeCount((count) => count + 1);
@@ -39,5 +44,44 @@ describe("ProfileEnvVarsEditor", () => {
     fireEvent.click(screen.getByTestId("env-var-add-button"));
 
     await waitFor(() => expect(screen.getByTestId("change-count").textContent).toBe("1"));
+    expect(screen.getByTestId("env-vars-card").getAttribute(DIRTY_ATTRIBUTE)).toBe("true");
+    expect(screen.getByTestId("env-var-row-0").getAttribute(DIRTY_ATTRIBUTE)).toBe("true");
+  });
+
+  it("marks only the changed saved row and its owning card dirty", () => {
+    render(<EnvVarsHarness initialEnvVars={[{ key: "FOO", value: "bar" }]} />);
+
+    expect(screen.getByTestId("env-vars-card").getAttribute(DIRTY_ATTRIBUTE)).toBe("false");
+    fireEvent.change(screen.getByDisplayValue("bar"), { target: { value: "baz" } });
+
+    expect(screen.getByTestId("env-vars-card").getAttribute(DIRTY_ATTRIBUTE)).toBe("true");
+    expect(screen.getByTestId("env-var-row-0").getAttribute(DIRTY_ATTRIBUTE)).toBe("true");
   });
 });
+
+describe("preserveNewerProfileDraft", () => {
+  it("keeps a profile edit made while save is in flight", () => {
+    const submitted = profile("submitted");
+    const current = { ...submitted, name: "newer" };
+    const saved = { ...submitted, updatedAt: "saved" };
+
+    expect(preserveNewerProfileDraft(current, submitted, saved)).toBe(current);
+    expect(preserveNewerProfileDraft(submitted, submitted, saved)).toBe(saved);
+  });
+});
+
+function profile(name: string): AgentProfile {
+  return {
+    id: "profile-1" as AgentProfile["id"],
+    agentId: "agent-1",
+    name,
+    agentDisplayName: "Agent",
+    model: "model",
+    allowIndexing: false,
+    autoApprove: false,
+    cliFlags: [],
+    cliPassthrough: false,
+    createdAt: "",
+    updatedAt: "",
+  };
+}
diff --git a/apps/web/components/settings/agent-profile-page.tsx b/apps/web/components/settings/agent-profile-page.tsx
index 07d6bc189e..b99f1f613c 100644
--- a/apps/web/components/settings/agent-profile-page.tsx
+++ b/apps/web/components/settings/agent-profile-page.tsx
@@ -11,7 +11,8 @@ import { Button } from "@kandev/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
 import { Separator } from "@kandev/ui/separator";
 import { useToast } from "@/components/toast-provider";
-import { UnsavedChangesBadge, UnsavedSaveButton } from "@/components/settings/unsaved-indicator";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { ProfileFormFields, type ProfileFormData } from "@/components/settings/profile-form-fields";
 import {
   arePermissionsDirty,
@@ -65,20 +66,12 @@ type ProfileEditorHeaderProps = {
   agentName: string;
   agentDisplayName: string;
   savedProfileName: string;
-  isDirty: boolean;
-  isLoading: boolean;
-  saveStatus: SaveStatus;
-  onSave: () => void;
 };
 
 function ProfileEditorHeader({
   agentName,
   agentDisplayName,
   savedProfileName,
-  isDirty,
-  isLoading,
-  saveStatus,
-  onSave,
 }: ProfileEditorHeaderProps) {
   return (
     <div className="flex items-start justify-between">
@@ -89,15 +82,6 @@ function ProfileEditorHeader({
         </h2>
         <p className="text-sm text-muted-foreground mt-1">{agentDisplayName} profile settings</p>
       </div>
-      <div className="flex items-center gap-3">
-        {isDirty && <UnsavedChangesBadge />}
-        <UnsavedSaveButton
-          isDirty={isDirty}
-          isLoading={isLoading}
-          status={saveStatus}
-          onClick={onSave}
-        />
-      </div>
     </div>
   );
 }
@@ -129,6 +113,8 @@ function DeleteProfileCard({ onDelete }: DeleteProfileCardProps) {
 type ProfileSettingsCardProps = {
   agent: Agent;
   draft: AgentProfile;
+  savedProfile: AgentProfile;
+  isDirty: boolean;
   onDraftChange: (patch: Partial<AgentProfile>) => void;
   modelConfig: ModelConfig;
   permissionSettings: Record<string, PermissionSetting>;
@@ -138,6 +124,8 @@ type ProfileSettingsCardProps = {
 function ProfileSettingsCard({
   agent,
   draft,
+  savedProfile,
+  isDirty,
   onDraftChange,
   modelConfig,
   permissionSettings,
@@ -147,9 +135,10 @@ function ProfileSettingsCard({
     onDraftChange(toAgentProfilePatch(patch));
   };
   const permissionValues = profilePermissionValues(draft, permissionSettings);
+  const savedPermissionValues = profilePermissionValues(savedProfile, permissionSettings);
 
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty}>
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <span>Profile settings</span>
@@ -168,6 +157,16 @@ function ProfileSettingsCard({
             cli_passthrough: draft.cliPassthrough,
             cli_flags: draft.cliFlags ?? [],
           }}
+          baselineProfile={{
+            name: savedProfile.name,
+            model: savedProfile.model,
+            mode: savedProfile.mode ?? "",
+            config_options: savedProfile.configOptions ?? {},
+            auto_approve: savedPermissionValues.auto_approve,
+            allow_indexing: savedPermissionValues.allow_indexing,
+            cli_passthrough: savedProfile.cliPassthrough,
+            cli_flags: savedProfile.cliFlags ?? [],
+          }}
           onChange={handleFormChange}
           modelConfig={modelConfig}
           permissionSettings={permissionSettings}
@@ -177,7 +176,7 @@ function ProfileSettingsCard({
           hideCustomCLIFlags
         />
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
@@ -234,7 +233,7 @@ type ProfileEditorActionsOptions = {
   agent: Agent;
   draft: AgentProfile;
   setSavedProfile: (p: AgentProfile) => void;
-  setDraft: (p: AgentProfile) => void;
+  setDraft: React.Dispatch<React.SetStateAction<AgentProfile>>;
   setSaveStatus: (s: SaveStatus) => void;
   settingsAgents: Agent[];
   syncAgentsToStore: (agents: Agent[]) => void;
@@ -275,7 +274,7 @@ function useProfileSave({
         env_vars: draft.envVars ?? [],
       });
       setSavedProfile(updated);
-      setDraft(updated);
+      setDraft((current) => preserveNewerProfileDraft(current, draft, updated));
       const nextAgents = settingsAgents.map((agentItem: Agent) =>
         agentItem.id === agent.id
           ? {
@@ -295,10 +294,19 @@ function useProfileSave({
         description: errorMessage(error),
         variant: "error",
       });
+      throw error;
     }
   };
 }
 
+export function preserveNewerProfileDraft(
+  current: AgentProfile,
+  submitted: AgentProfile,
+  saved: AgentProfile,
+): AgentProfile {
+  return current === submitted ? saved : current;
+}
+
 function useProfileDelete(
   agent: Agent,
   draft: AgentProfile,
@@ -410,6 +418,8 @@ function ProfileDeleteDialogs({
 type ProfileEditorBodyProps = {
   agent: Agent;
   draft: AgentProfile;
+  savedProfile: AgentProfile;
+  isDirty: boolean;
   updateDraft: (patch: Partial<AgentProfile>) => void;
   modelConfig: ModelConfig;
   permissionSettings: Record<string, PermissionSetting>;
@@ -422,6 +432,8 @@ type ProfileEditorBodyProps = {
 function ProfileEditorBody({
   agent,
   draft,
+  savedProfile,
+  isDirty,
   updateDraft,
   modelConfig,
   permissionSettings,
@@ -435,6 +447,8 @@ function ProfileEditorBody({
       <ProfileSettingsCard
         agent={agent}
         draft={draft}
+        savedProfile={savedProfile}
+        isDirty={isDirty}
         onDraftChange={updateDraft}
         modelConfig={modelConfig}
         permissionSettings={permissionSettings}
@@ -443,11 +457,16 @@ function ProfileEditorBody({
 
       <CustomCLIFlagsCard
         flags={draft.cliFlags ?? []}
+        baselineFlags={savedProfile.cliFlags ?? []}
         onChange={(next) => updateDraft({ cliFlags: next })}
         permissionSettings={permissionSettings}
       />
 
-      <ProfileEnvVarsSection envVars={draft.envVars} onChange={updateDraft} />
+      <ProfileEnvVarsSection
+        envVars={draft.envVars}
+        baselineEnvVars={savedProfile.envVars}
+        onChange={updateDraft}
+      />
 
       <CommandPreviewCard
         agentName={agent.name}
@@ -483,7 +502,7 @@ function ProfileEditor({
   const settingsAgents = useAppStore((state) => state.settingsAgents.items);
   const syncAgentsToStore = useSyncAgentsToStore();
   const { items: secrets } = useSecrets();
-  const { draft, setDraft, savedProfile, setSavedProfile, saveStatus, setSaveStatus, isDirty } =
+  const { draft, setDraft, savedProfile, setSavedProfile, setSaveStatus, isDirty } =
     useProfileEditorState(profile, permissionSettings);
   const updateDraft = useCallback(
     (patch: Partial<AgentProfile>) => {
@@ -509,6 +528,15 @@ function ProfileEditor({
     syncAgentsToStore,
     toast,
   });
+  useSettingsSaveContributor({
+    id: `agent-profile:${draft.id}`,
+    revision: JSON.stringify(draft),
+    isDirty,
+    canSave: Boolean(draft.name.trim()),
+    invalidReason: draft.name.trim() ? undefined : "Profile name is required.",
+    save: handleSave,
+    discard: () => setDraft(savedProfile),
+  });
   const {
     requestDelete,
     showDeleteConfirm,
@@ -525,10 +553,6 @@ function ProfileEditor({
         agentName={agent.name}
         agentDisplayName={profile.agentDisplayName ?? ""}
         savedProfileName={savedProfile.name}
-        isDirty={isDirty}
-        isLoading={saveStatus === "loading"}
-        saveStatus={saveStatus}
-        onSave={handleSave}
       />
 
       <Separator />
@@ -536,6 +560,8 @@ function ProfileEditor({
       <ProfileEditorBody
         agent={agent}
         draft={draft}
+        savedProfile={savedProfile}
+        isDirty={isDirty}
         updateDraft={updateDraft}
         modelConfig={modelConfig}
         permissionSettings={permissionSettings}
diff --git a/apps/web/components/settings/archive-confirmation-settings.test.tsx b/apps/web/components/settings/archive-confirmation-settings.test.tsx
index 2547c90cbe..edc9435471 100644
--- a/apps/web/components/settings/archive-confirmation-settings.test.tsx
+++ b/apps/web/components/settings/archive-confirmation-settings.test.tsx
@@ -3,6 +3,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { StateProvider, useAppStore } from "@/components/state-provider";
 import { defaultState } from "@/lib/state/default-state";
+import { SettingsSaveProvider } from "./settings-save-provider";
 
 const updateUserSettings = vi.fn();
 const CONFIRMATION_LABEL = "Confirm before archiving tasks";
@@ -23,7 +24,9 @@ function renderSettings(confirmTaskArchive = true, children?: ReactNode) {
         userSettings: { ...defaultState.userSettings, confirmTaskArchive },
       }}
     >
-      <ArchiveConfirmationSettings />
+      <SettingsSaveProvider>
+        <ArchiveConfirmationSettings />
+      </SettingsSaveProvider>
       {children}
     </StateProvider>,
   );
@@ -52,17 +55,26 @@ beforeEach(() => {
 afterEach(cleanup);
 
 describe("ArchiveConfirmationSettings", () => {
-  it("is enabled by default and persists an explicit false value", async () => {
+  it("keeps an explicit false value local until Save changes is pressed", async () => {
     renderSettings();
     const toggle = screen.getByRole("switch", { name: CONFIRMATION_LABEL });
 
     expect(toggle.getAttribute(DATA_STATE_ATTRIBUTE)).toBe(CHECKED_STATE);
     fireEvent.click(toggle);
 
+    expect(updateUserSettings).not.toHaveBeenCalled();
+    expect(toggle.getAttribute(DATA_STATE_ATTRIBUTE)).toBe(UNCHECKED_STATE);
+    expect(toggle.getAttribute("data-settings-dirty")).toBe("true");
+    expect(
+      screen.getByTestId("archive-confirmation-card").getAttribute("data-settings-dirty"),
+    ).toBe("true");
+
+    fireEvent.click(await screen.findByRole("button", { name: "Save changes" }));
+
     await waitFor(() =>
       expect(updateUserSettings).toHaveBeenCalledWith({ confirm_task_archive: false }),
     );
-    expect(toggle.getAttribute(DATA_STATE_ATTRIBUTE)).toBe(UNCHECKED_STATE);
+    await waitFor(() => expect(toggle.getAttribute("data-settings-dirty")).toBe("false"));
   });
 
   it("rolls back when saving fails", async () => {
@@ -71,9 +83,11 @@ describe("ArchiveConfirmationSettings", () => {
     const toggle = screen.getByRole("switch", { name: CONFIRMATION_LABEL });
 
     fireEvent.click(toggle);
+    fireEvent.click(await screen.findByRole("button", { name: "Save changes" }));
 
     await waitFor(() => expect(toggle.getAttribute(DATA_STATE_ATTRIBUTE)).toBe(UNCHECKED_STATE));
-    await waitFor(() => expect(toggle.getAttribute(DATA_STATE_ATTRIBUTE)).toBe(CHECKED_STATE));
+    await waitFor(() => expect(screen.getByText("Couldn't save")).toBeTruthy());
+    expect(toggle.getAttribute(DATA_STATE_ATTRIBUTE)).toBe(UNCHECKED_STATE);
   });
 
   it("does not overwrite a newer settings update when saving fails", async () => {
@@ -88,6 +102,7 @@ describe("ArchiveConfirmationSettings", () => {
     const toggle = screen.getByRole("switch", { name: CONFIRMATION_LABEL });
 
     fireEvent.click(toggle);
+    fireEvent.click(await screen.findByRole("button", { name: "Save changes" }));
     await waitFor(() => expect(toggle.getAttribute(DATA_STATE_ATTRIBUTE)).toBe(UNCHECKED_STATE));
     fireEvent.click(screen.getByRole("button", { name: "Apply remote settings" }));
     rejectSave(new Error("save failed"));
diff --git a/apps/web/components/settings/archive-confirmation-settings.tsx b/apps/web/components/settings/archive-confirmation-settings.tsx
index dac3c5a6ec..767dbcc441 100644
--- a/apps/web/components/settings/archive-confirmation-settings.tsx
+++ b/apps/web/components/settings/archive-confirmation-settings.tsx
@@ -1,41 +1,46 @@
 "use client";
 
-import { useState } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
+import { useEffect, useRef, useState } from "react";
+import { CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
 import { Label } from "@kandev/ui/label";
 import { Switch } from "@kandev/ui/switch";
 import { useAppStore, useAppStoreApi } from "@/components/state-provider";
 import { updateUserSettings } from "@/lib/api";
+import { SettingsCard } from "./settings-card";
+import { useSettingsSaveContributor } from "./settings-save-provider";
 
 export function ArchiveConfirmationSettings() {
   const confirmTaskArchive = useAppStore((state) => state.userSettings.confirmTaskArchive);
   const setUserSettings = useAppStore((state) => state.setUserSettings);
   const storeApi = useAppStoreApi();
-  const [isSaving, setIsSaving] = useState(false);
+  const [saved, setSaved] = useState(confirmTaskArchive);
+  const [draft, setDraft] = useState(confirmTaskArchive);
+  const draftRef = useRef(draft);
+  draftRef.current = draft;
+  const isDirty = draft !== saved;
 
-  const handleToggle = async (checked: boolean) => {
-    if (isSaving) return;
+  useEffect(() => {
+    setSaved((previous) => {
+      if (draftRef.current === previous) setDraft(confirmTaskArchive);
+      return confirmTaskArchive;
+    });
+  }, [confirmTaskArchive]);
 
-    const current = storeApi.getState().userSettings;
-    const previous = current.confirmTaskArchive;
-    const workspaceId = current.workspaceId;
-    setIsSaving(true);
-    setUserSettings({ ...current, confirmTaskArchive: checked });
-
-    try {
-      await updateUserSettings({ confirm_task_archive: checked });
-    } catch {
-      const latest = storeApi.getState().userSettings;
-      if (latest.workspaceId === workspaceId && latest.confirmTaskArchive === checked) {
-        setUserSettings({ ...latest, confirmTaskArchive: previous });
-      }
-    } finally {
-      setIsSaving(false);
-    }
-  };
+  useSettingsSaveContributor({
+    id: "general-task-actions",
+    revision: Number(draft),
+    isDirty,
+    save: async (revision) => {
+      const submitted = Boolean(revision);
+      await updateUserSettings({ confirm_task_archive: submitted });
+      setSaved(submitted);
+      setUserSettings({ ...storeApi.getState().userSettings, confirmTaskArchive: submitted });
+    },
+    discard: () => setDraft(saved),
+  });
 
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty} data-testid="archive-confirmation-card">
       <CardHeader>
         <CardTitle className="text-base">Archive Confirmation</CardTitle>
       </CardHeader>
@@ -49,13 +54,13 @@ export function ArchiveConfirmationSettings() {
           </div>
           <Switch
             id="confirm-task-archive"
-            checked={confirmTaskArchive}
-            onCheckedChange={handleToggle}
-            disabled={isSaving}
+            checked={draft}
+            data-settings-dirty={isDirty}
+            onCheckedChange={setDraft}
             className="shrink-0 cursor-pointer"
           />
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
diff --git a/apps/web/components/settings/changelog-notification-card.tsx b/apps/web/components/settings/changelog-notification-card.tsx
index 2415ba41a3..106ca5859f 100644
--- a/apps/web/components/settings/changelog-notification-card.tsx
+++ b/apps/web/components/settings/changelog-notification-card.tsx
@@ -2,47 +2,53 @@
 
 import { useState } from "react";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
+import { CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
 import { Label } from "@kandev/ui/label";
 import { Separator } from "@kandev/ui/separator";
 import { Switch } from "@kandev/ui/switch";
-import { useAppStore } from "@/components/state-provider";
+import { useAppStore, useAppStoreApi } from "@/components/state-provider";
 import { updateUserSettings } from "@/lib/api";
+import { useSettingsSaveContributor } from "./settings-save-provider";
+import { SettingsCard } from "./settings-card";
 
 export function ChangelogNotificationCard() {
   const userSettings = useAppStore((state) => state.userSettings);
   const setUserSettings = useAppStore((state) => state.setUserSettings);
-  const [isSaving, setIsSaving] = useState(false);
+  const storeApi = useAppStoreApi();
+  const [saved, setSaved] = useState(userSettings.showReleaseNotification);
+  const [draft, setDraft] = useState(saved);
+  const [isResetting, setIsResetting] = useState(false);
 
-  const handleToggle = async (checked: boolean) => {
-    if (isSaving) return;
-    setIsSaving(true);
-    const previousValue = userSettings.showReleaseNotification;
-    try {
-      setUserSettings({ ...userSettings, showReleaseNotification: checked });
-      await updateUserSettings({ show_release_notification: checked });
-    } catch {
-      setUserSettings({ ...userSettings, showReleaseNotification: previousValue });
-    } finally {
-      setIsSaving(false);
-    }
-  };
+  useSettingsSaveContributor({
+    id: "changelog-notifications",
+    revision: String(draft),
+    isDirty: draft !== saved,
+    save: async () => {
+      const submitted = draft;
+      await updateUserSettings({ show_release_notification: submitted });
+      setSaved(submitted);
+      setUserSettings({ ...storeApi.getState().userSettings, showReleaseNotification: submitted });
+    },
+    discard: () => setDraft(saved),
+  });
 
-  const handleResetLastSeen = async () => {
-    if (isSaving) return;
-    setIsSaving(true);
+  const resetLastSeen = async () => {
+    setIsResetting(true);
     try {
-      setUserSettings({ ...userSettings, releaseNotesLastSeenVersion: null });
       await updateUserSettings({ release_notes_last_seen_version: "" });
+      setUserSettings({
+        ...storeApi.getState().userSettings,
+        releaseNotesLastSeenVersion: null,
+      });
     } catch {
-      // Ignore — worst case the button stays hidden until next release
+      // The immediate command leaves the current persisted marker unchanged.
     } finally {
-      setIsSaving(false);
+      setIsResetting(false);
     }
   };
 
   return (
-    <Card>
+    <SettingsCard isDirty={draft !== saved}>
       <CardHeader>
         <CardTitle className="text-base">Topbar Release Notification</CardTitle>
       </CardHeader>
@@ -56,9 +62,9 @@ export function ChangelogNotificationCard() {
           </div>
           <Switch
             id="release-notification-toggle"
-            checked={userSettings.showReleaseNotification}
-            onCheckedChange={handleToggle}
-            disabled={isSaving}
+            checked={draft}
+            data-settings-dirty={draft !== saved}
+            onCheckedChange={setDraft}
             className="cursor-pointer"
           />
         </div>
@@ -73,14 +79,14 @@ export function ChangelogNotificationCard() {
           <Button
             variant="outline"
             size="sm"
-            onClick={handleResetLastSeen}
-            disabled={isSaving || !userSettings.releaseNotesLastSeenVersion}
+            onClick={() => void resetLastSeen()}
+            disabled={isResetting || !userSettings.releaseNotesLastSeenVersion}
             className="cursor-pointer"
           >
             Reset
           </Button>
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
diff --git a/apps/web/components/settings/cli-flags-field.tsx b/apps/web/components/settings/cli-flags-field.tsx
index 992150e99b..d543eb89b2 100644
--- a/apps/web/components/settings/cli-flags-field.tsx
+++ b/apps/web/components/settings/cli-flags-field.tsx
@@ -3,11 +3,12 @@
 import { useId, useMemo, useState } from "react";
 import { IconPlus, IconTrash } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@kandev/ui/card";
+import { CardContent, CardDescription, CardHeader, CardTitle } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
 import { Label } from "@kandev/ui/label";
 import { Switch } from "@kandev/ui/switch";
 import type { CLIFlag, PermissionSetting } from "@/lib/types/http";
+import { SettingsCard } from "@/components/settings/settings-card";
 
 /**
  * Editor-side representation of a single custom CLI flag. The persisted
@@ -393,6 +394,7 @@ function CLIFlagsAddForm({ onAdd }: { onAdd: (next: CLIFlag) => void }) {
 
 type CustomCLIFlagsCardProps = {
   flags: CLIFlag[];
+  baselineFlags?: CLIFlag[];
   onChange: (next: CLIFlag[]) => void;
   permissionSettings?: Record<string, PermissionSetting>;
 };
@@ -405,6 +407,7 @@ type CustomCLIFlagsCardProps = {
  */
 export function CustomCLIFlagsCard({
   flags,
+  baselineFlags,
   onChange,
   permissionSettings,
 }: CustomCLIFlagsCardProps) {
@@ -420,6 +423,8 @@ export function CustomCLIFlagsCard({
     [flags, curatedFlagTexts],
   );
   const enabledCount = customFlags.filter((e) => e.flag.enabled).length;
+  const isDirty =
+    baselineFlags !== undefined && JSON.stringify(flags) !== JSON.stringify(baselineFlags);
 
   const onUpdateRow = (index: number, next: CLIFlag) => {
     onChange(flags.map((f, i) => (i === index ? next : f)));
@@ -428,7 +433,7 @@ export function CustomCLIFlagsCard({
   const onAdd = (next: CLIFlag) => onChange([...flags, next]);
 
   return (
-    <Card data-testid="custom-cli-flags-card">
+    <SettingsCard isDirty={isDirty} data-testid="custom-cli-flags-card">
       <CardHeader>
         <div className="flex items-center justify-between gap-3">
           <div>
@@ -444,7 +449,7 @@ export function CustomCLIFlagsCard({
           )}
         </div>
       </CardHeader>
-      <CardContent>
+      <CardContent data-settings-dirty={isDirty} data-settings-dirty-level="container">
         <CustomFlagsSection
           customFlags={customFlags}
           onUpdateRow={onUpdateRow}
@@ -452,6 +457,6 @@ export function CustomCLIFlagsCard({
           onAdd={onAdd}
         />
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
diff --git a/apps/web/components/settings/config-chat-agent-section.tsx b/apps/web/components/settings/config-chat-agent-section.tsx
index fdc5bd8bd6..5b520be1af 100644
--- a/apps/web/components/settings/config-chat-agent-section.tsx
+++ b/apps/web/components/settings/config-chat-agent-section.tsx
@@ -1,11 +1,12 @@
 "use client";
 
-import { useState } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
+import { useEffect, useState } from "react";
+import { CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
 import { useAppStore, useAppStoreApi } from "@/components/state-provider";
-import { useToast } from "@/components/toast-provider";
 import { updateWorkspaceAction } from "@/app/actions/workspaces";
+import { useSettingsSaveContributor } from "./settings-save-provider";
+import { SettingsCard } from "./settings-card";
 
 export function ConfigChatAgentSection() {
   const workspace = useAppStore(
@@ -13,41 +14,52 @@ export function ConfigChatAgentSection() {
   );
   const profiles = useAppStore((s) => s.agentProfiles.items ?? []);
   const currentProfileId = workspace?.default_config_agent_profile_id ?? "";
-  const [saving, setSaving] = useState(false);
-  const { toast } = useToast();
+  const workspaceId = workspace?.id ?? null;
+  const [syncedWorkspaceId, setSyncedWorkspaceId] = useState(workspaceId);
+  const [savedProfileId, setSavedProfileId] = useState(currentProfileId);
+  const [draftProfileId, setDraftProfileId] = useState(currentProfileId);
 
   const storeApi = useAppStoreApi();
+  const isDirty = draftProfileId !== savedProfileId;
 
-  const handleChange = async (value: string) => {
-    const effectiveValue = value === "none" ? "" : value;
-    if (!workspace) return;
-    setSaving(true);
-    try {
+  useEffect(() => {
+    if (workspaceId !== syncedWorkspaceId) {
+      setSyncedWorkspaceId(workspaceId);
+      setSavedProfileId(currentProfileId);
+      setDraftProfileId(currentProfileId);
+      return;
+    }
+    if (isDirty) return;
+    setSavedProfileId(currentProfileId);
+    setDraftProfileId(currentProfileId);
+  }, [currentProfileId, isDirty, syncedWorkspaceId, workspaceId]);
+
+  useSettingsSaveContributor({
+    id: "utility-config-chat-agent",
+    order: 20,
+    revision: draftProfileId,
+    isDirty: Boolean(workspace) && isDirty,
+    save: async () => {
+      if (!workspace) return;
+      const submitted = draftProfileId;
       await updateWorkspaceAction(workspace.id, {
-        default_config_agent_profile_id: effectiveValue,
+        default_config_agent_profile_id: submitted,
       });
       const { workspaces, setWorkspaces } = storeApi.getState();
       setWorkspaces(
         workspaces.items.map((w) =>
-          w.id === workspace.id ? { ...w, default_config_agent_profile_id: effectiveValue } : w,
+          w.id === workspace.id ? { ...w, default_config_agent_profile_id: submitted } : w,
         ),
       );
-      toast({ title: "Configuration agent updated", variant: "success" });
-    } catch (error) {
-      toast({
-        title: "Failed to update",
-        description: error instanceof Error ? error.message : "Unknown error",
-        variant: "error",
-      });
-    } finally {
-      setSaving(false);
-    }
-  };
+      setSavedProfileId(submitted);
+    },
+    discard: () => setDraftProfileId(savedProfileId),
+  });
 
   if (!workspace) return null;
 
   return (
-    <Card data-testid="config-chat-agent-card">
+    <SettingsCard isDirty={isDirty} data-testid="config-chat-agent-card">
       <CardHeader>
         <CardTitle className="text-base">
           <h3>Configuration Chat Agent</h3>
@@ -58,8 +70,11 @@ export function ConfigChatAgentSection() {
           Choose which agent profile to use for the Configuration Chat. This agent can manage your
           workflows, agent profiles, and MCP configuration.
         </p>
-        <Select value={currentProfileId || "none"} onValueChange={handleChange} disabled={saving}>
-          <SelectTrigger className="w-full max-w-sm cursor-pointer">
+        <Select
+          value={draftProfileId || "none"}
+          onValueChange={(value) => setDraftProfileId(value === "none" ? "" : value)}
+        >
+          <SelectTrigger className="w-full max-w-sm cursor-pointer" data-settings-dirty={isDirty}>
             <SelectValue placeholder="Choose an agent profile..." />
           </SelectTrigger>
           <SelectContent>
@@ -72,6 +87,6 @@ export function ConfigChatAgentSection() {
           </SelectContent>
         </Select>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
diff --git a/apps/web/components/settings/editor-form.test.tsx b/apps/web/components/settings/editor-form.test.tsx
new file mode 100644
index 0000000000..802ba5643a
--- /dev/null
+++ b/apps/web/components/settings/editor-form.test.tsx
@@ -0,0 +1,120 @@
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { EditorForm, defaultFormState } from "./editor-form";
+import { SettingsPageTemplate } from "./settings-page-template";
+import { SettingsSaveProvider, useSettingsSaveContributor } from "./settings-save-provider";
+
+afterEach(cleanup);
+
+const COMMAND_PLACEHOLDER = "code --goto {file}:{line}";
+const DIRTY_ATTRIBUTE_VALUE = "true";
+const DIRTY_ATTRIBUTE = "data-settings-dirty";
+
+function renderEditorForm(props: Partial<React.ComponentProps<typeof EditorForm>> = {}) {
+  const onSave = props.onSave ?? vi.fn().mockResolvedValue(undefined);
+  render(
+    <SettingsSaveProvider>
+      <EditorForm
+        title="New custom editor"
+        initialState={defaultFormState()}
+        onCancel={vi.fn()}
+        onSave={onSave}
+        submitLabel="Add editor"
+        isSaving={false}
+        coordinatedSaveId="custom-editor:new"
+        dirtyWhenMounted
+        {...props}
+      />
+    </SettingsSaveProvider>,
+  );
+  return { onSave };
+}
+
+function DirtySiblingContributor() {
+  useSettingsSaveContributor({
+    id: "sibling",
+    revision: 1,
+    isDirty: true,
+    save: vi.fn(),
+    discard: vi.fn(),
+  });
+  return null;
+}
+
+describe("EditorForm coordinated save", () => {
+  it("treats a new inline editor as dirty and saves it through the route action", async () => {
+    const { onSave } = renderEditorForm();
+
+    const form = screen.getByText("New custom editor").parentElement;
+    expect(form?.getAttribute(DIRTY_ATTRIBUTE)).toBe(DIRTY_ATTRIBUTE_VALUE);
+    expect(screen.queryByRole("button", { name: "Add editor" })).toBeNull();
+    expect(screen.getByRole("button", { name: "Save changes" }).hasAttribute("disabled")).toBe(
+      true,
+    );
+
+    fireEvent.change(screen.getByPlaceholderText(COMMAND_PLACEHOLDER), {
+      target: { value: COMMAND_PLACEHOLDER },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => expect(onSave).toHaveBeenCalledTimes(1));
+    expect(onSave).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: "code --goto {file}:{line}",
+        command: COMMAND_PLACEHOLDER,
+      }),
+    );
+  });
+
+  it("marks the owning page card dirty when an existing editor changes", async () => {
+    const initialState = {
+      ...defaultFormState(),
+      name: "VS Code",
+      command: "code {file}",
+    };
+    render(
+      <SettingsSaveProvider>
+        <SettingsPageTemplate title="Editors" isDirty={false} saveStatus="idle" onSave={vi.fn()}>
+          <EditorForm
+            title="Edit VS Code"
+            initialState={initialState}
+            onCancel={vi.fn()}
+            onSave={vi.fn()}
+            submitLabel="Save editor"
+            isSaving={false}
+            coordinatedSaveId="custom-editor:editor-1"
+          />
+        </SettingsPageTemplate>
+      </SettingsSaveProvider>,
+    );
+
+    const pageCard = document.querySelector('[data-settings-dirty-level="card"]');
+    expect(pageCard?.getAttribute(DIRTY_ATTRIBUTE)).toBe("false");
+    fireEvent.change(screen.getByPlaceholderText(COMMAND_PLACEHOLDER), {
+      target: { value: "cursor {file}" },
+    });
+
+    await waitFor(() =>
+      expect(pageCard?.getAttribute(DIRTY_ATTRIBUTE)).toBe(DIRTY_ATTRIBUTE_VALUE),
+    );
+    expect(screen.getByText("Edit VS Code").parentElement?.getAttribute(DIRTY_ATTRIBUTE)).toBe(
+      DIRTY_ATTRIBUTE_VALUE,
+    );
+  });
+
+  it("does not mark a page card dirty for a contributor outside its scope", async () => {
+    render(
+      <SettingsSaveProvider>
+        <DirtySiblingContributor />
+        <SettingsPageTemplate title="Editors" isDirty={false} saveStatus="idle" onSave={vi.fn()}>
+          <div>Editor settings</div>
+        </SettingsPageTemplate>
+      </SettingsSaveProvider>,
+    );
+
+    const pageCard = document.querySelector('[data-settings-dirty-level="card"]');
+    await waitFor(() => expect(screen.getByRole("button", { name: "Save changes" })).toBeTruthy());
+    expect(pageCard?.getAttribute(DIRTY_ATTRIBUTE)).toBe("false");
+  });
+});
diff --git a/apps/web/components/settings/editor-form.tsx b/apps/web/components/settings/editor-form.tsx
index bb6b3ccc0c..b5aab97e56 100644
--- a/apps/web/components/settings/editor-form.tsx
+++ b/apps/web/components/settings/editor-form.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "@kandev/ui/button";
 import { Input } from "@kandev/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
 import type { EditorOption } from "@/lib/types/http";
+import { useSettingsSaveContributor } from "./settings-save-provider";
 
 type CustomKind = "custom_command" | "custom_remote_ssh" | "custom_hosted_url";
 
@@ -107,6 +108,11 @@ function resolveEditorName(state: EditorFormState) {
   }
 }
 
+function normalizeEditorState(state: EditorFormState) {
+  const name = resolveEditorName(state);
+  return name === state.name ? state : { ...state, name };
+}
+
 export function formStateFromEditor(editor: EditorOption): EditorFormState {
   return {
     name: editor.name,
@@ -143,16 +149,21 @@ type EditorFormProps = {
   title: string;
   initialState: EditorFormState;
   onCancel: () => void;
-  onSave: (state: EditorFormState) => void;
+  onSave: (state: EditorFormState) => Promise<unknown> | void;
+  onSaved?: () => void;
   submitLabel: string;
   isSaving: boolean;
+  coordinatedSaveId?: string;
+  dirtyWhenMounted?: boolean;
 };
 
 function EditorKindFields({
   state,
+  baseline,
   setField,
 }: {
   state: EditorFormState;
+  baseline: EditorFormState;
   setField: <K extends keyof EditorFormState>(key: K, value: EditorFormState[K]) => void;
 }) {
   if (state.kind === "custom_command") {
@@ -160,6 +171,7 @@ function EditorKindFields({
       <div className="space-y-2">
         <Input
           value={state.command}
+          data-settings-dirty={state.command !== baseline.command}
           onChange={(event) => setField("command", event.target.value)}
           placeholder="code --goto {file}:{line}"
         />
@@ -172,16 +184,19 @@ function EditorKindFields({
       <div className="space-y-2">
         <Input
           value={state.host}
+          data-settings-dirty={state.host !== baseline.host}
           onChange={(event) => setField("host", event.target.value)}
           placeholder="ssh-host.example.com"
         />
         <Input
           value={state.user}
+          data-settings-dirty={state.user !== baseline.user}
           onChange={(event) => setField("user", event.target.value)}
           placeholder="optional username"
         />
         <Input
           value={state.scheme}
+          data-settings-dirty={state.scheme !== baseline.scheme}
           onChange={(event) => setField("scheme", event.target.value)}
           placeholder="optional scheme (vscode, cursor)"
         />
@@ -196,6 +211,7 @@ function EditorKindFields({
     return (
       <Input
         value={state.url}
+        data-settings-dirty={state.url !== baseline.url}
         onChange={(event) => setField("url", event.target.value)}
         placeholder="https://code.example.com"
       />
@@ -209,14 +225,22 @@ export function EditorForm({
   initialState,
   onCancel,
   onSave,
+  onSaved,
   submitLabel,
   isSaving,
+  coordinatedSaveId,
+  dirtyWhenMounted = false,
 }: EditorFormProps) {
   const [state, setState] = useState<EditorFormState>(initialState);
+  const [baseline, setBaseline] = useState<EditorFormState>(initialState);
+  const stateRef = useRef(state);
+  stateRef.current = state;
 
   useEffect(() => {
+    if (JSON.stringify(stateRef.current) !== JSON.stringify(baseline)) return;
     setState(initialState);
-  }, [initialState]);
+    setBaseline(initialState);
+  }, [baseline, initialState]);
 
   const setField = <K extends keyof EditorFormState>(key: K, value: EditorFormState[K]) => {
     setState((prev) => ({ ...prev, [key]: value }));
@@ -231,21 +255,46 @@ export function EditorForm({
     return false;
   }, [state]);
 
-  const handleSave = () => {
-    const resolvedName = resolveEditorName(state);
-    onSave(resolvedName === state.name ? state : { ...state, name: resolvedName });
+  const handleSave = async () => {
+    const submitted = normalizeEditorState(state);
+    await onSave(submitted);
+    setBaseline(submitted);
+    setState(submitted);
+    onSaved?.();
   };
+  const revision = JSON.stringify(state);
+  const isCoordinatedDirty =
+    Boolean(coordinatedSaveId) && (dirtyWhenMounted || revision !== JSON.stringify(baseline));
+  const normalizedState = normalizeEditorState(state);
+  useSettingsSaveContributor({
+    id: coordinatedSaveId ?? `editor-form-local:${title}`,
+    revision,
+    isDirty: isCoordinatedDirty,
+    canSave: isValid,
+    invalidReason: isValid ? undefined : "Complete the required editor fields before saving.",
+    save: async () => {
+      const submitted = normalizedState;
+      await onSave(submitted);
+      setBaseline(submitted);
+      if (JSON.stringify(stateRef.current) === JSON.stringify(state)) onSaved?.();
+    },
+    discard: () => setState(baseline),
+  });
 
   return (
-    <div className="rounded-lg border border-border/70 bg-background p-4 space-y-4">
+    <div
+      className="rounded-lg border border-border/70 bg-background p-4 space-y-4"
+      data-settings-dirty={isCoordinatedDirty}
+    >
       <div className="text-sm font-medium text-foreground">{title}</div>
       <Input
         value={state.name}
+        data-settings-dirty={state.name !== baseline.name}
         onChange={(event) => setField("name", event.target.value)}
         placeholder="Editor name"
       />
       <Select value={state.kind} onValueChange={(value) => setField("kind", value as CustomKind)}>
-        <SelectTrigger>
+        <SelectTrigger data-settings-dirty={state.kind !== baseline.kind}>
           <SelectValue placeholder="Editor type" />
         </SelectTrigger>
         <SelectContent>
@@ -257,14 +306,21 @@ export function EditorForm({
           ))}
         </SelectContent>
       </Select>
-      <EditorKindFields state={state} setField={setField} />
+      <EditorKindFields state={state} baseline={baseline} setField={setField} />
       <div className="flex items-center justify-end gap-2">
         <Button type="button" variant="outline" onClick={onCancel} disabled={isSaving}>
           Cancel
         </Button>
-        <Button type="button" onClick={handleSave} disabled={isSaving || !isValid}>
-          {submitLabel}
-        </Button>
+        {!coordinatedSaveId && (
+          <Button
+            type="button"
+            onClick={() => void handleSave()}
+            disabled={isSaving || !isValid}
+            className="cursor-pointer"
+          >
+            {submitLabel}
+          </Button>
+        )}
       </div>
     </div>
   );
diff --git a/apps/web/components/settings/editors-settings.tsx b/apps/web/components/settings/editors-settings.tsx
index 88edd59880..697887187f 100644
--- a/apps/web/components/settings/editors-settings.tsx
+++ b/apps/web/components/settings/editors-settings.tsx
@@ -40,6 +40,7 @@ import {
   isCustomEditor,
   type EditorsSettingsState,
 } from "@/components/settings/editors-settings-state";
+import { isDraftEntryDirty, isEditorsSettingsDirty } from "./settings-dirty";
 
 const LSP_LANGUAGE_OPTIONS = [
   {
@@ -78,6 +79,8 @@ const LSP_LANGUAGE_OPTIONS = [
 type LspLanguageCardsProps = {
   lspAutoStartLanguages: string[];
   lspAutoInstallLanguages: string[];
+  baselineLspAutoStart: string[];
+  baselineLspAutoInstall: string[];
   toggleAutoStart: (langId: string, checked: boolean) => void;
   toggleAutoInstall: (langId: string, checked: boolean) => void;
 };
@@ -85,6 +88,8 @@ type LspLanguageCardsProps = {
 function LspLanguageCards({
   lspAutoStartLanguages,
   lspAutoInstallLanguages,
+  baselineLspAutoStart,
+  baselineLspAutoInstall,
   toggleAutoStart,
   toggleAutoInstall,
 }: LspLanguageCardsProps) {
@@ -102,46 +107,55 @@ function LspLanguageCards({
         </div>
       </div>
       <div className="grid gap-3 sm:grid-cols-2">
-        {LSP_LANGUAGE_OPTIONS.map((lang) => (
-          <div
-            key={lang.id}
-            className="rounded-lg border border-border/60 bg-background px-4 py-3 space-y-2.5"
-          >
-            <div>
-              <div className="text-sm font-medium text-foreground">{lang.label}</div>
-              <div className="text-xs text-muted-foreground">{lang.binary}</div>
+        {LSP_LANGUAGE_OPTIONS.map((lang) => {
+          const autoStartDirty =
+            lspAutoStartLanguages.includes(lang.id) !== baselineLspAutoStart.includes(lang.id);
+          const autoInstallDirty =
+            lspAutoInstallLanguages.includes(lang.id) !== baselineLspAutoInstall.includes(lang.id);
+          return (
+            <div
+              key={lang.id}
+              className="rounded-lg border border-border/60 bg-background px-4 py-3 space-y-2.5"
+              data-settings-dirty={autoStartDirty || autoInstallDirty}
+            >
+              <div>
+                <div className="text-sm font-medium text-foreground">{lang.label}</div>
+                <div className="text-xs text-muted-foreground">{lang.binary}</div>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-muted-foreground">Auto-start</span>
+                <Switch
+                  checked={lspAutoStartLanguages.includes(lang.id)}
+                  onCheckedChange={(checked) => toggleAutoStart(lang.id, checked === true)}
+                  data-settings-dirty={autoStartDirty}
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id={`lsp-install-${lang.id}`}
+                  checked={lspAutoInstallLanguages.includes(lang.id)}
+                  onCheckedChange={(checked) => toggleAutoInstall(lang.id, checked === true)}
+                  className="h-3.5 w-3.5"
+                  data-settings-dirty={autoInstallDirty}
+                />
+                <label
+                  htmlFor={`lsp-install-${lang.id}`}
+                  className="text-xs text-muted-foreground cursor-pointer"
+                >
+                  Auto-install if not found
+                </label>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <IconInfoCircle className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+                  </TooltipTrigger>
+                  <TooltipContent side="top" className="max-w-[260px] text-xs">
+                    {lang.installHint}
+                  </TooltipContent>
+                </Tooltip>
+              </div>
             </div>
-            <div className="flex items-center justify-between">
-              <span className="text-xs text-muted-foreground">Auto-start</span>
-              <Switch
-                checked={lspAutoStartLanguages.includes(lang.id)}
-                onCheckedChange={(checked) => toggleAutoStart(lang.id, checked === true)}
-              />
-            </div>
-            <div className="flex items-center gap-2">
-              <Checkbox
-                id={`lsp-install-${lang.id}`}
-                checked={lspAutoInstallLanguages.includes(lang.id)}
-                onCheckedChange={(checked) => toggleAutoInstall(lang.id, checked === true)}
-                className="h-3.5 w-3.5"
-              />
-              <label
-                htmlFor={`lsp-install-${lang.id}`}
-                className="text-xs text-muted-foreground cursor-pointer"
-              >
-                Auto-install if not found
-              </label>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <IconInfoCircle className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
-                </TooltipTrigger>
-                <TooltipContent side="top" className="max-w-[260px] text-xs">
-                  {lang.installHint}
-                </TooltipContent>
-              </Tooltip>
-            </div>
-          </div>
-        ))}
+          );
+        })}
       </div>
     </div>
   );
@@ -149,6 +163,7 @@ function LspLanguageCards({
 
 type LspServerConfigSectionProps = {
   lspConfigStrings: Record<string, string>;
+  baselineLspConfigStrings: Record<string, string>;
   lspConfigErrors: Record<string, string>;
   expandedConfigLang: string | null;
   setExpandedConfigLang: (lang: string | null) => void;
@@ -157,6 +172,7 @@ type LspServerConfigSectionProps = {
 
 function LspServerConfigSection({
   lspConfigStrings,
+  baselineLspConfigStrings,
   lspConfigErrors,
   expandedConfigLang,
   setExpandedConfigLang,
@@ -178,10 +194,12 @@ function LspServerConfigSection({
         const defaultConfig = LSP_DEFAULT_CONFIGS[lang.id];
         const hasDefaults = defaultConfig && Object.keys(defaultConfig).length > 0;
         const error = lspConfigErrors[lang.id];
+        const isDirty = isDraftEntryDirty(lspConfigStrings, baselineLspConfigStrings, lang.id);
         return (
           <div
             key={lang.id}
             className="rounded-lg border border-border/60 bg-background overflow-hidden"
+            data-settings-dirty={isDirty}
           >
             <button
               type="button"
@@ -223,6 +241,7 @@ function LspServerConfigSection({
                   placeholder={hasDefaults ? JSON.stringify(defaultConfig, null, 2) : "{\n  \n}"}
                   className="font-mono text-xs min-h-[80px] resize-y"
                   rows={4}
+                  data-settings-dirty={isDirty}
                 />
                 {error && <div className="text-xs text-destructive">{error}</div>}
               </div>
@@ -279,13 +298,11 @@ function CustomEditorRow({
           title={`Edit ${editor.name}`}
           initialState={formStateFromEditor(editor)}
           onCancel={close}
-          onSave={(state) => {
-            void updateRequest.run(editor.id, state).then(() => {
-              close();
-            });
-          }}
+          onSave={(state) => updateRequest.run(editor.id, state)}
+          onSaved={close}
           submitLabel="Save changes"
           isSaving={updateRequest.isLoading}
+          coordinatedSaveId={`custom-editor:${editor.id}`}
         />
       )}
       renderPreview={({ open }) => (
@@ -356,11 +373,12 @@ function CustomEditorsList({
           title="New custom editor"
           initialState={defaultFormState()}
           onCancel={() => setIsAdding(false)}
-          onSave={(state) => {
-            void createRequest.run(state);
-          }}
+          onSave={(state) => createRequest.run(state)}
+          onSaved={() => setIsAdding(false)}
           submitLabel="Add editor"
           isSaving={createRequest.isLoading}
+          coordinatedSaveId="custom-editor:new"
+          dirtyWhenMounted
         />
       )}
       <div className="space-y-3">
@@ -387,6 +405,7 @@ function CustomEditorsList({
 type EditorsSectionProps = {
   defaultOptions: ComboboxOption[];
   defaultEditorId: string;
+  baselineDefaultId: string;
   availableEditors: EditorOption[];
   builtInEditors: EditorOption[];
   onDefaultEditorChange: (value: string) => void;
@@ -403,6 +422,7 @@ type EditorsSectionProps = {
 function EditorsSection({
   defaultOptions,
   defaultEditorId,
+  baselineDefaultId,
   availableEditors,
   builtInEditors,
   onDefaultEditorChange,
@@ -422,7 +442,10 @@ function EditorsSection({
       </div>
       <div className="space-y-2">
         <div className="text-sm font-medium text-foreground">Default</div>
-        <div className="min-w-[280px]">
+        <div
+          className="min-w-[280px] rounded-md border border-transparent"
+          data-settings-dirty={defaultEditorId !== baselineDefaultId}
+        >
           <Combobox
             options={defaultOptions}
             value={defaultEditorId}
@@ -469,31 +492,17 @@ function EditorsSection({
   );
 }
 
-function useEditorsIsDirty(state: EditorsSettingsState) {
-  const {
-    defaultEditorId,
-    baselineDefaultId,
-    lspAutoStartLanguages,
-    baselineLspAutoStart,
-    lspAutoInstallLanguages,
-    baselineLspAutoInstall,
-    lspConfigStrings,
-    baselineLspConfigStrings,
-  } = state;
-  const lspAutoStartDirty =
-    lspAutoStartLanguages.length !== baselineLspAutoStart.length ||
-    lspAutoStartLanguages.some((id) => !baselineLspAutoStart.includes(id));
-  const lspAutoInstallDirty =
-    lspAutoInstallLanguages.length !== baselineLspAutoInstall.length ||
-    lspAutoInstallLanguages.some((id) => !baselineLspAutoInstall.includes(id));
-  const lspConfigsDirty =
-    JSON.stringify(lspConfigStrings) !== JSON.stringify(baselineLspConfigStrings);
-  return (
-    defaultEditorId !== baselineDefaultId ||
-    lspAutoStartDirty ||
-    lspAutoInstallDirty ||
-    lspConfigsDirty
-  );
+function getEditorsSaveRevision(state: EditorsSettingsState): string {
+  return JSON.stringify({
+    defaultEditorId: state.defaultEditorId,
+    lspAutoStartLanguages: state.lspAutoStartLanguages,
+    lspAutoInstallLanguages: state.lspAutoInstallLanguages,
+    lspConfigStrings: state.lspConfigStrings,
+  });
+}
+
+function useSyncEditors(editors: EditorOption[], setEditors: (editors: EditorOption[]) => void) {
+  useEffect(() => setEditors(editors), [editors, setEditors]);
 }
 
 export function EditorsSettings() {
@@ -510,7 +519,9 @@ export function EditorsSettings() {
   const saveDefaultRequest = useSaveRequest(state);
   const { createRequest, updateRequest, deleteRequest } = useEditorRequests(state, applyEditors);
   const { updateLspConfigString } = useLspConfigActions(setLspConfigStrings, setLspConfigErrors);
-  const isDirty = useEditorsIsDirty(state);
+  const isDirty = isEditorsSettingsDirty(state);
+  const saveRevision = getEditorsSaveRevision(state);
+  const hasInvalidConfig = Object.keys(state.lspConfigErrors).length > 0;
 
   const toggleAutoStart = useCallback(
     (langId: string, checked: boolean) => {
@@ -540,9 +551,7 @@ export function EditorsSettings() {
     [availableEditors, state.defaultEditorId],
   );
 
-  useEffect(() => {
-    setEditors(editors);
-  }, [editors, setEditors]);
+  useSyncEditors(editors, setEditors);
 
   return (
     <SettingsPageTemplate
@@ -550,7 +559,12 @@ export function EditorsSettings() {
       description="Configure the included code editor and external editors"
       isDirty={isDirty}
       saveStatus={saveDefaultRequest.status}
-      onSave={() => void saveDefaultRequest.run()}
+      saveRevision={saveRevision}
+      canSave={!hasInvalidConfig}
+      invalidReason={
+        hasInvalidConfig ? "Fix invalid LSP server configuration before saving." : undefined
+      }
+      onSave={() => saveDefaultRequest.run()}
     >
       <div className="space-y-6">
         <div className="space-y-4">
@@ -560,11 +574,14 @@ export function EditorsSettings() {
           <LspLanguageCards
             lspAutoStartLanguages={state.lspAutoStartLanguages}
             lspAutoInstallLanguages={state.lspAutoInstallLanguages}
+            baselineLspAutoStart={state.baselineLspAutoStart}
+            baselineLspAutoInstall={state.baselineLspAutoInstall}
             toggleAutoStart={toggleAutoStart}
             toggleAutoInstall={toggleAutoInstall}
           />
           <LspServerConfigSection
             lspConfigStrings={state.lspConfigStrings}
+            baselineLspConfigStrings={state.baselineLspConfigStrings}
             lspConfigErrors={state.lspConfigErrors}
             expandedConfigLang={state.expandedConfigLang}
             setExpandedConfigLang={state.setExpandedConfigLang}
@@ -575,6 +592,7 @@ export function EditorsSettings() {
         <EditorsSection
           defaultOptions={defaultOptions}
           defaultEditorId={state.defaultEditorId}
+          baselineDefaultId={state.baselineDefaultId}
           availableEditors={availableEditors}
           builtInEditors={builtInEditors}
           onDefaultEditorChange={state.setDefaultEditorId}
diff --git a/apps/web/components/settings/executor-description.ts b/apps/web/components/settings/executor-description.ts
new file mode 100644
index 0000000000..9af01d934d
--- /dev/null
+++ b/apps/web/components/settings/executor-description.ts
@@ -0,0 +1,11 @@
+import type { ExecutorType } from "@/lib/types/http";
+
+export function getExecutorDescription(type: ExecutorType): string {
+  if (type === "local_pc") return "Runs agents directly in the repository folder.";
+  if (type === "worktree") return "Creates git worktrees for isolated agent sessions.";
+  if (type === "local_docker") return "Runs Docker containers on this machine.";
+  if (type === "remote_docker") return "Connects to a remote Docker host.";
+  if (type === "sprites") return "Runs agents in Sprites.dev cloud sandboxes.";
+  if (type === "ssh") return "Runs agents on a trusted Linux amd64 or macOS host over SSH.";
+  return "Custom executor.";
+}
diff --git a/apps/web/components/settings/general-settings.tsx b/apps/web/components/settings/general-settings.tsx
index 9b94166664..261d8bdeea 100644
--- a/apps/web/components/settings/general-settings.tsx
+++ b/apps/web/components/settings/general-settings.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import Link from "@/components/routing/app-link";
 import { useTheme } from "@/components/theme/app-theme";
 import {
@@ -16,6 +16,7 @@ import { Label } from "@kandev/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
 import { Separator } from "@kandev/ui/separator";
 import { SettingsSection } from "@/components/settings/settings-section";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { KeyboardShortcutsCard } from "@/components/settings/keyboard-shortcuts-card";
 import { SystemMetricsSettingsCard } from "@/components/settings/system-metrics-settings-card";
 import { GENERAL_NAV_ITEMS } from "@/components/settings/general-nav";
@@ -23,20 +24,27 @@ import { useAppStore, useAppStoreApi } from "@/components/state-provider";
 import { updateUserSettings } from "@/lib/api";
 import type { Theme } from "@/lib/settings/types";
 import { ArchiveConfirmationSettings } from "@/components/settings/archive-confirmation-settings";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
+import type { StoredShortcutOverrides } from "@/lib/keyboard/shortcut-overrides";
 
-function ThemeSettingsCard() {
-  const { theme: currentTheme, setTheme } = useTheme();
-  const themeValue = currentTheme ?? "system";
-
+function ThemeSettingsCard({
+  theme,
+  isDirty,
+  onChange,
+}: {
+  theme: Theme;
+  isDirty: boolean;
+  onChange: (theme: Theme) => void;
+}) {
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty} data-testid="theme-settings-card">
       <CardHeader>
         <CardTitle className="text-base">Color Theme</CardTitle>
       </CardHeader>
       <CardContent>
         <div className="space-y-2">
-          <Select value={themeValue} onValueChange={(value) => setTheme(value as Theme)}>
-            <SelectTrigger id="theme">
+          <Select value={theme} onValueChange={(value) => onChange(value as Theme)}>
+            <SelectTrigger id="theme" data-settings-dirty={isDirty}>
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -47,47 +55,29 @@ function ThemeSettingsCard() {
           </Select>
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
-function ChatSubmitKeyCard() {
-  const userSettings = useAppStore((state) => state.userSettings);
-  const setUserSettings = useAppStore((state) => state.setUserSettings);
-  const [isSavingSubmitKey, setIsSavingSubmitKey] = useState(false);
-
-  const handleChatSubmitKeyChange = async (value: "enter" | "cmd_enter") => {
-    if (isSavingSubmitKey) return;
-    setIsSavingSubmitKey(true);
-    const previousValue = userSettings.chatSubmitKey;
-    try {
-      setUserSettings({ ...userSettings, chatSubmitKey: value });
-      await updateUserSettings({
-        workspace_id: userSettings.workspaceId || "",
-        repository_ids: userSettings.repositoryIds || [],
-        chat_submit_key: value,
-      });
-    } catch {
-      setUserSettings({ ...userSettings, chatSubmitKey: previousValue });
-    } finally {
-      setIsSavingSubmitKey(false);
-    }
-  };
-
+function ChatSubmitKeyCard({
+  value,
+  isDirty,
+  onChange,
+}: {
+  value: "enter" | "cmd_enter";
+  isDirty: boolean;
+  onChange: (value: "enter" | "cmd_enter") => void;
+}) {
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty} data-testid="chat-submit-key-card">
       <CardHeader>
         <CardTitle className="text-base">Submit Shortcut</CardTitle>
       </CardHeader>
       <CardContent>
         <div className="space-y-2">
           <Label htmlFor="chat-submit-key">Message Submit Key</Label>
-          <Select
-            value={userSettings.chatSubmitKey}
-            onValueChange={(value) => handleChatSubmitKeyChange(value as "enter" | "cmd_enter")}
-            disabled={isSavingSubmitKey}
-          >
-            <SelectTrigger id="chat-submit-key">
+          <Select value={value} onValueChange={(next) => onChange(next as "enter" | "cmd_enter")}>
+            <SelectTrigger id="chat-submit-key" data-settings-dirty={isDirty}>
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -96,57 +86,38 @@ function ChatSubmitKeyCard() {
             </SelectContent>
           </Select>
           <p className="text-xs text-muted-foreground">
-            {userSettings.chatSubmitKey === "cmd_enter"
+            {value === "cmd_enter"
               ? "Press Cmd/Ctrl+Enter to send messages. Press Enter for newlines."
               : "Press Enter to send messages. Press Shift+Enter for newlines."}
           </p>
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
-function ChangesPanelLayoutCard() {
-  const userSettings = useAppStore((state) => state.userSettings);
-  const setUserSettings = useAppStore((state) => state.setUserSettings);
-  const storeApi = useAppStoreApi();
-  const [isSaving, setIsSaving] = useState(false);
-
-  const handleChange = async (value: "flat" | "tree") => {
-    if (isSaving) return;
-    setIsSaving(true);
-    const current = storeApi.getState().userSettings;
-    const previous = current.changesPanelLayout;
-    try {
-      setUserSettings({ ...current, changesPanelLayout: value });
-      await updateUserSettings({
-        workspace_id: current.workspaceId || "",
-        repository_ids: current.repositoryIds || [],
-        changes_panel_layout: value,
-      });
-    } catch {
-      setUserSettings({ ...storeApi.getState().userSettings, changesPanelLayout: previous });
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
+function ChangesPanelLayoutCard({
+  value,
+  isDirty,
+  onChange,
+}: {
+  value: "flat" | "tree";
+  isDirty: boolean;
+  onChange: (value: "flat" | "tree") => void;
+}) {
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty} data-testid="changes-panel-layout-card">
       <CardHeader>
         <CardTitle className="text-base">Changes Panel Layout</CardTitle>
       </CardHeader>
       <CardContent>
         <div className="space-y-2">
           <Label htmlFor="changes-panel-layout">File list view</Label>
-          <Select
-            value={userSettings.changesPanelLayout}
-            onValueChange={(v) => handleChange(v as "flat" | "tree")}
-            disabled={isSaving}
-          >
+          <Select value={value} onValueChange={(next) => onChange(next as "flat" | "tree")}>
             <SelectTrigger
               id="changes-panel-layout"
               data-testid="changes-panel-layout-select"
+              data-settings-dirty={isDirty}
               className="cursor-pointer"
             >
               <SelectValue />
@@ -161,7 +132,7 @@ function ChangesPanelLayoutCard() {
           </p>
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
@@ -204,6 +175,57 @@ export function TaskActionsSettings() {
 }
 
 export function AppearanceSettings() {
+  const userSettings = useAppStore((state) => state.userSettings);
+  const setUserSettings = useAppStore((state) => state.setUserSettings);
+  const storeApi = useAppStoreApi();
+  const { savedTheme, previewTheme, commitTheme, restoreTheme } = useTheme();
+  const [saved, setSaved] = useState(() => ({
+    theme: savedTheme,
+    changesPanelLayout: userSettings.changesPanelLayout,
+    showMetrics: userSettings.systemMetricsDisplay.showInTopbar,
+  }));
+  const [draft, setDraft] = useState(saved);
+  const draftRef = useRef(draft);
+  draftRef.current = draft;
+  const revision = JSON.stringify(draft);
+  const isDirty = revision !== JSON.stringify(saved);
+
+  useSettingsSaveContributor({
+    id: "general-appearance",
+    order: 10,
+    revision,
+    isDirty,
+    save: async () => {
+      const submitted = draft;
+      const current = storeApi.getState().userSettings;
+      await updateUserSettings({
+        workspace_id: current.workspaceId || "",
+        repository_ids: current.repositoryIds || [],
+        changes_panel_layout: submitted.changesPanelLayout,
+        system_metrics_display: { show_in_topbar: submitted.showMetrics },
+      });
+      commitTheme(submitted.theme);
+      if (draftRef.current.theme !== submitted.theme) {
+        previewTheme(draftRef.current.theme);
+      }
+      setSaved(submitted);
+      setUserSettings({
+        ...storeApi.getState().userSettings,
+        changesPanelLayout: submitted.changesPanelLayout,
+        systemMetricsDisplay: { showInTopbar: submitted.showMetrics },
+      });
+    },
+    discard: () => {
+      setDraft(saved);
+      restoreTheme();
+    },
+  });
+
+  const updateDraft = useCallback(
+    (patch: Partial<typeof draft>) => setDraft((current) => ({ ...current, ...patch })),
+    [],
+  );
+
   return (
     <div className="space-y-8">
       <SettingsSection
@@ -211,7 +233,14 @@ export function AppearanceSettings() {
         title="Appearance"
         description="Customize how the application looks"
       >
-        <ThemeSettingsCard />
+        <ThemeSettingsCard
+          theme={draft.theme}
+          isDirty={draft.theme !== saved.theme}
+          onChange={(theme) => {
+            updateDraft({ theme });
+            previewTheme(theme);
+          }}
+        />
       </SettingsSection>
 
       <Separator />
@@ -221,7 +250,11 @@ export function AppearanceSettings() {
         title="Changes Panel"
         description="Customize how changed files are displayed"
       >
-        <ChangesPanelLayoutCard />
+        <ChangesPanelLayoutCard
+          value={draft.changesPanelLayout}
+          isDirty={draft.changesPanelLayout !== saved.changesPanelLayout}
+          onChange={(changesPanelLayout) => updateDraft({ changesPanelLayout })}
+        />
       </SettingsSection>
 
       <Separator />
@@ -231,13 +264,46 @@ export function AppearanceSettings() {
         title="Resource Metrics"
         description="Configure backend and execution resource sampling"
       >
-        <SystemMetricsSettingsCard />
+        <SystemMetricsSettingsCard
+          showInTopbar={draft.showMetrics}
+          isShowInTopbarDirty={draft.showMetrics !== saved.showMetrics}
+          onShowInTopbarChange={(showMetrics) => updateDraft({ showMetrics })}
+        />
       </SettingsSection>
     </div>
   );
 }
 
 export function KeyboardShortcutsSettings() {
+  const userSettings = useAppStore((state) => state.userSettings);
+  const setUserSettings = useAppStore((state) => state.setUserSettings);
+  const storeApi = useAppStoreApi();
+  const [saved, setSaved] = useState(() => ({
+    chatSubmitKey: userSettings.chatSubmitKey,
+    keyboardShortcuts: userSettings.keyboardShortcuts as StoredShortcutOverrides,
+  }));
+  const [draft, setDraft] = useState(saved);
+  const revision = JSON.stringify(draft);
+
+  useSettingsSaveContributor({
+    id: "general-keyboard-shortcuts",
+    revision,
+    isDirty: revision !== JSON.stringify(saved),
+    save: async () => {
+      const submitted = draft;
+      const current = storeApi.getState().userSettings;
+      await updateUserSettings({
+        workspace_id: current.workspaceId || "",
+        repository_ids: current.repositoryIds || [],
+        chat_submit_key: submitted.chatSubmitKey,
+        keyboard_shortcuts: submitted.keyboardShortcuts,
+      });
+      setSaved(submitted);
+      setUserSettings({ ...storeApi.getState().userSettings, ...submitted });
+    },
+    discard: () => setDraft(saved),
+  });
+
   return (
     <div className="space-y-8">
       <SettingsSection
@@ -245,7 +311,11 @@ export function KeyboardShortcutsSettings() {
         title="Chat Input"
         description="Configure chat input behavior"
       >
-        <ChatSubmitKeyCard />
+        <ChatSubmitKeyCard
+          value={draft.chatSubmitKey}
+          isDirty={draft.chatSubmitKey !== saved.chatSubmitKey}
+          onChange={(chatSubmitKey) => setDraft((current) => ({ ...current, chatSubmitKey }))}
+        />
       </SettingsSection>
 
       <Separator />
@@ -255,7 +325,13 @@ export function KeyboardShortcutsSettings() {
         title="Keyboard Shortcuts"
         description="Customize keyboard shortcuts for the command panel"
       >
-        <KeyboardShortcutsCard />
+        <KeyboardShortcutsCard
+          overrides={draft.keyboardShortcuts}
+          baselineOverrides={saved.keyboardShortcuts}
+          onChange={(keyboardShortcuts) =>
+            setDraft((current) => ({ ...current, keyboardShortcuts }))
+          }
+        />
       </SettingsSection>
     </div>
   );
diff --git a/apps/web/components/settings/keyboard-shortcuts-card.test.tsx b/apps/web/components/settings/keyboard-shortcuts-card.test.tsx
new file mode 100644
index 0000000000..dd00e627b9
--- /dev/null
+++ b/apps/web/components/settings/keyboard-shortcuts-card.test.tsx
@@ -0,0 +1,24 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { KeyboardShortcutsCard } from "./keyboard-shortcuts-card";
+
+vi.mock("@kandev/ui/kbd", () => ({
+  Kbd: ({ children }: { children: ReactNode }) => <kbd>{children}</kbd>,
+}));
+
+afterEach(() => cleanup());
+
+describe("KeyboardShortcutsCard", () => {
+  it("updates its route draft without owning persistence", () => {
+    const onChange = vi.fn();
+    render(<KeyboardShortcutsCard overrides={{}} onChange={onChange} />);
+
+    fireEvent.click(screen.getByTestId("shortcut-recorder-SEARCH"));
+    fireEvent.keyDown(window, { key: "k", ctrlKey: true });
+
+    expect(onChange).toHaveBeenCalledWith({
+      SEARCH: { key: "k", modifiers: { ctrlOrCmd: true } },
+    });
+  });
+});
diff --git a/apps/web/components/settings/keyboard-shortcuts-card.tsx b/apps/web/components/settings/keyboard-shortcuts-card.tsx
index 01b821bb1e..c2db289e90 100644
--- a/apps/web/components/settings/keyboard-shortcuts-card.tsx
+++ b/apps/web/components/settings/keyboard-shortcuts-card.tsx
@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { IconRotate, IconX } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
+import { CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
 import { Kbd } from "@kandev/ui/kbd";
 import type { Key, KeyboardShortcut } from "@/lib/keyboard/constants";
 import { formatShortcut } from "@/lib/keyboard/utils";
@@ -15,9 +15,7 @@ import {
   type ConfigurableShortcutId,
   type StoredShortcutOverrides,
 } from "@/lib/keyboard/shortcut-overrides";
-import { useAppStore } from "@/components/state-provider";
-import { useToast } from "@/components/toast-provider";
-import { updateUserSettings } from "@/lib/api/domains/settings-api";
+import { SettingsCard } from "./settings-card";
 
 type ShortcutRecorderProps = {
   shortcutId: ConfigurableShortcutId;
@@ -27,6 +25,7 @@ type ShortcutRecorderProps = {
   // Optional: callers that don't support an explicit "unbind" (e.g. the voice
   // settings recorder) omit this, and the Clear button is hidden for them.
   onClear?: (id: ConfigurableShortcutId) => void;
+  isDirty?: boolean;
 };
 
 export function ShortcutRecorder({
@@ -35,6 +34,7 @@ export function ShortcutRecorder({
   onChange,
   onReset,
   onClear,
+  isDirty = false,
 }: ShortcutRecorderProps) {
   const [recording, setRecording] = useState(false);
   const defaultShortcut = CONFIGURABLE_SHORTCUTS[shortcutId].default;
@@ -88,6 +88,7 @@ export function ShortcutRecorder({
       <div className="flex items-center gap-2">
         <button
           data-testid={`shortcut-recorder-${shortcutId}`}
+          data-settings-dirty={isDirty}
           onClick={() => setRecording(!recording)}
           className={`px-3 py-1.5 rounded-md border text-sm cursor-pointer transition-colors ${
             recording
@@ -140,54 +141,45 @@ function renderRecorderLabel({
   return <Kbd>{formatShortcut(current)}</Kbd>;
 }
 
-export function KeyboardShortcutsCard() {
-  const storeOverrides = useAppStore((s) => s.userSettings.keyboardShortcuts);
-  const setUserSettings = useAppStore((s) => s.setUserSettings);
-  const userSettings = useAppStore((s) => s.userSettings);
-  const shortcuts = resolveAllShortcuts(storeOverrides);
-  const { toast } = useToast();
-
-  const persistOverrides = useCallback(
-    (overrides: StoredShortcutOverrides) => {
-      const previous = userSettings.keyboardShortcuts;
-      setUserSettings({ ...userSettings, keyboardShortcuts: overrides });
-      updateUserSettings({ keyboard_shortcuts: overrides }).catch(() => {
-        setUserSettings({ ...userSettings, keyboardShortcuts: previous });
-        toast({ title: "Failed to save shortcut", variant: "error" });
-      });
-    },
-    [userSettings, setUserSettings, toast],
-  );
+export function KeyboardShortcutsCard({
+  overrides,
+  baselineOverrides = {},
+  onChange,
+}: {
+  overrides: StoredShortcutOverrides;
+  baselineOverrides?: StoredShortcutOverrides;
+  onChange: (overrides: StoredShortcutOverrides) => void;
+}) {
+  const shortcuts = resolveAllShortcuts(overrides);
+  const baselineShortcuts = resolveAllShortcuts(baselineOverrides);
 
   const handleChange = useCallback(
     (id: ConfigurableShortcutId, shortcut: KeyboardShortcut) => {
-      const next = { ...storeOverrides, [id]: shortcut };
-      persistOverrides(next);
+      onChange({ ...overrides, [id]: shortcut });
     },
-    [storeOverrides, persistOverrides],
+    [onChange, overrides],
   );
 
   const handleReset = useCallback(
     (id: ConfigurableShortcutId) => {
-      const next = { ...storeOverrides };
+      const next = { ...overrides };
       delete next[id];
-      persistOverrides(next);
+      onChange(next);
     },
-    [storeOverrides, persistOverrides],
+    [onChange, overrides],
   );
 
   const handleClear = useCallback(
     (id: ConfigurableShortcutId) => {
-      const next = { ...storeOverrides, [id]: UNBOUND_SHORTCUT };
-      persistOverrides(next);
+      onChange({ ...overrides, [id]: UNBOUND_SHORTCUT });
     },
-    [storeOverrides, persistOverrides],
+    [onChange, overrides],
   );
 
   const ids = Object.keys(CONFIGURABLE_SHORTCUTS) as ConfigurableShortcutId[];
 
   return (
-    <Card>
+    <SettingsCard isDirty={JSON.stringify(overrides) !== JSON.stringify(baselineOverrides)}>
       <CardHeader>
         <CardTitle className="text-base">Keyboard Shortcuts</CardTitle>
       </CardHeader>
@@ -201,13 +193,14 @@ export function KeyboardShortcutsCard() {
               onChange={handleChange}
               onReset={handleReset}
               onClear={handleClear}
+              isDirty={JSON.stringify(shortcuts[id]) !== JSON.stringify(baselineShortcuts[id])}
             />
           ))}
         </div>
         <p className="text-xs text-muted-foreground mt-3">
-          Click a shortcut to record a new key combination. Changes are saved automatically.
+          Click a shortcut to record a new key combination.
         </p>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
diff --git a/apps/web/components/settings/notification-events-table.tsx b/apps/web/components/settings/notification-events-table.tsx
new file mode 100644
index 0000000000..82eb07dc5b
--- /dev/null
+++ b/apps/web/components/settings/notification-events-table.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import { IconBell } from "@tabler/icons-react";
+import { Button } from "@kandev/ui/button";
+import { Checkbox } from "@kandev/ui/checkbox";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@kandev/ui/tooltip";
+import { EVENT_LABELS } from "@/lib/notifications/events";
+import type { NotificationProvider } from "@/lib/types/http";
+
+type Props = {
+  tableProviders: NotificationProvider[];
+  baselineProviders: NotificationProvider[];
+  tableEvents: string[];
+  onToggleEvent: (provider: NotificationProvider, eventType: string) => void;
+  onTestProvider: (providerId: string) => Promise<void>;
+};
+
+export function NotificationEventsTable({
+  tableProviders,
+  baselineProviders,
+  tableEvents,
+  onToggleEvent,
+  onTestProvider,
+}: Props) {
+  if (tableProviders.length === 0) {
+    return <p className="text-sm text-muted-foreground">No providers configured yet.</p>;
+  }
+
+  return (
+    <div className="overflow-auto rounded-lg border border-muted">
+      <table className="min-w-full text-sm">
+        <thead className="bg-muted/40">
+          <tr>
+            <th className="px-4 py-3 text-left font-medium">Notification type</th>
+            {tableProviders.map((provider) => (
+              <th key={provider.id} className="px-4 py-3 text-center font-medium">
+                <div className="flex items-center justify-center gap-1.5">
+                  <span>{provider.name}</span>
+                  {provider.type !== "local" && (
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6 cursor-pointer"
+                            aria-label={`Send test notification for ${provider.name}`}
+                            onClick={() => void onTestProvider(provider.id)}
+                          >
+                            <IconBell className="h-3.5 w-3.5" />
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>Send test notification</TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  )}
+                </div>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {tableEvents.map((eventType) => {
+            const meta = EVENT_LABELS[eventType] ?? {
+              title: eventType,
+              description: "Notify when this event occurs.",
+            };
+            return (
+              <tr key={eventType} className="border-t border-muted">
+                <td className="px-4 py-3">
+                  <div className="font-medium">{meta.title}</div>
+                  <div className="text-xs text-muted-foreground">{meta.description}</div>
+                </td>
+                {tableProviders.map((provider) => {
+                  const checked = (provider.events ?? []).includes(eventType);
+                  const baselineChecked = (
+                    baselineProviders.find((candidate) => candidate.id === provider.id)?.events ??
+                    []
+                  ).includes(eventType);
+                  return (
+                    <td key={provider.id} className="px-4 py-3 text-center">
+                      <div className="flex justify-center">
+                        <Checkbox
+                          checked={checked}
+                          data-settings-dirty={checked !== baselineChecked}
+                          onCheckedChange={() => onToggleEvent(provider, eventType)}
+                        />
+                      </div>
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/apps/web/components/settings/notification-sound-section.test.tsx b/apps/web/components/settings/notification-sound-section.test.tsx
new file mode 100644
index 0000000000..fc57a2e957
--- /dev/null
+++ b/apps/web/components/settings/notification-sound-section.test.tsx
@@ -0,0 +1,90 @@
+import { useState } from "react";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { getSoundPreferences, setSoundPreferences } from "@/lib/notifications/sound";
+import { NotificationSoundSection } from "./notification-sound-section";
+import { SettingsSaveProvider } from "./settings-save-provider";
+import { SettingsPageTemplate } from "./settings-page-template";
+
+const DIRTY = "true";
+const DIRTY_ATTRIBUTE = "data-settings-dirty";
+const SOUND_TOGGLE_NAME = "Enable notification sound";
+
+function NotificationPageHarness({ onProviderSave }: { onProviderSave: () => void }) {
+  const [soundIsDirty, setSoundIsDirty] = useState(false);
+  return (
+    <SettingsPageTemplate
+      title="Notifications"
+      isDirty={false}
+      cardIsDirty={soundIsDirty}
+      saveStatus="idle"
+      onSave={onProviderSave}
+    >
+      <NotificationSoundSection onDirtyChange={setSoundIsDirty} />
+    </SettingsPageTemplate>
+  );
+}
+
+beforeEach(() => {
+  window.localStorage.clear();
+  setSoundPreferences({ enabled: false, presetId: "plim" });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe("NotificationSoundSection", () => {
+  it("persists a dirty sound preference only through the route Save action", async () => {
+    render(
+      <SettingsSaveProvider>
+        <NotificationSoundSection />
+      </SettingsSaveProvider>,
+    );
+
+    const toggle = screen.getByRole("switch", { name: SOUND_TOGGLE_NAME });
+    fireEvent.click(toggle);
+
+    expect(getSoundPreferences()).toEqual({ enabled: false, presetId: "plim" });
+    expect(toggle.getAttribute(DIRTY_ATTRIBUTE)).toBe(DIRTY);
+    expect(screen.getByTestId("notification-sound-group").getAttribute(DIRTY_ATTRIBUTE)).toBe(
+      DIRTY,
+    );
+
+    fireEvent.click(await screen.findByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => expect(getSoundPreferences()).toEqual({ enabled: true, presetId: "plim" }));
+    await waitFor(() => expect(toggle.getAttribute(DIRTY_ATTRIBUTE)).toBe("false"));
+  });
+
+  it("reports dirtiness so the notifications parent card can highlight", async () => {
+    const onDirtyChange = vi.fn();
+    render(
+      <SettingsSaveProvider>
+        <NotificationSoundSection onDirtyChange={onDirtyChange} />
+      </SettingsSaveProvider>,
+    );
+
+    await waitFor(() => expect(onDirtyChange).toHaveBeenLastCalledWith(false));
+    fireEvent.click(screen.getByRole("switch", { name: SOUND_TOGGLE_NAME }));
+    await waitFor(() => expect(onDirtyChange).toHaveBeenLastCalledWith(true));
+  });
+
+  it("does not register the provider save for a sound-only parent-card highlight", async () => {
+    const onProviderSave = vi.fn();
+    render(
+      <SettingsSaveProvider>
+        <NotificationPageHarness onProviderSave={onProviderSave} />
+      </SettingsSaveProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("switch", { name: SOUND_TOGGLE_NAME }));
+    const parentCard = screen.getByText("Notification Sound").closest('[data-slot="card"]');
+    await waitFor(() => expect(parentCard?.getAttribute(DIRTY_ATTRIBUTE)).toBe(DIRTY));
+
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+    await waitFor(() => expect(getSoundPreferences().enabled).toBe(true));
+    expect(onProviderSave).not.toHaveBeenCalled();
+  });
+});
diff --git a/apps/web/components/settings/notification-sound-section.tsx b/apps/web/components/settings/notification-sound-section.tsx
index 05e183773b..93b1a59e62 100644
--- a/apps/web/components/settings/notification-sound-section.tsx
+++ b/apps/web/components/settings/notification-sound-section.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { IconVolume } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
@@ -14,17 +14,38 @@ import {
   SOUND_PRESETS,
   type SoundPreferences,
 } from "@/lib/notifications/sound";
+import { useSettingsSaveContributor } from "./settings-save-provider";
 
-export function NotificationSoundSection() {
-  const [prefs, setPrefs] = useState<SoundPreferences>(getSoundPreferences);
+export function NotificationSoundSection({
+  onDirtyChange,
+}: {
+  onDirtyChange?: (isDirty: boolean) => void;
+}) {
+  const [saved, setSaved] = useState<SoundPreferences>(getSoundPreferences);
+  const [prefs, setPrefs] = useState<SoundPreferences>(saved);
+  const revision = JSON.stringify(prefs);
+  const isDirty = revision !== JSON.stringify(saved);
 
-  const update = (next: SoundPreferences) => {
-    setPrefs(next);
-    setSoundPreferences(next);
-  };
+  useEffect(() => onDirtyChange?.(isDirty), [isDirty, onDirtyChange]);
+
+  useSettingsSaveContributor({
+    id: "general-notification-sound",
+    revision,
+    isDirty,
+    save: () => {
+      const submitted = prefs;
+      setSoundPreferences(submitted);
+      setSaved(submitted);
+    },
+    discard: () => setPrefs(saved),
+  });
 
   return (
-    <div className="space-y-4">
+    <div
+      className="space-y-4 rounded-md border p-4"
+      data-settings-dirty={isDirty}
+      data-testid="notification-sound-group"
+    >
       <div className="flex items-center justify-between gap-4">
         <div>
           <div className="text-base font-medium">Notification Sound</div>
@@ -34,7 +55,8 @@ export function NotificationSoundSection() {
         </div>
         <Switch
           checked={prefs.enabled}
-          onCheckedChange={(enabled) => update({ ...prefs, enabled })}
+          data-settings-dirty={prefs.enabled !== saved.enabled}
+          onCheckedChange={(enabled) => setPrefs({ ...prefs, enabled })}
           aria-label="Enable notification sound"
           className="cursor-pointer"
         />
@@ -45,11 +67,15 @@ export function NotificationSoundSection() {
             value={prefs.presetId}
             onValueChange={(presetId) => {
               if (!isSoundPresetId(presetId)) return;
-              update({ ...prefs, presetId });
+              setPrefs({ ...prefs, presetId });
               playSoundPreset(presetId);
             }}
           >
-            <SelectTrigger className="w-44 cursor-pointer" aria-label="Notification sound">
+            <SelectTrigger
+              className="w-44 cursor-pointer"
+              aria-label="Notification sound"
+              data-settings-dirty={prefs.presetId !== saved.presetId}
+            >
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
diff --git a/apps/web/components/settings/notifications-settings-actions.test.tsx b/apps/web/components/settings/notifications-settings-actions.test.tsx
new file mode 100644
index 0000000000..a47e11ef94
--- /dev/null
+++ b/apps/web/components/settings/notifications-settings-actions.test.tsx
@@ -0,0 +1,139 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { NotificationProvider } from "@/lib/types/http";
+import {
+  useIsDirty,
+  useNotificationsActions,
+  useNotificationsState,
+  useSaveRequest,
+} from "./notifications-settings-actions";
+
+const mocks = vi.hoisted(() => ({
+  createNotificationProvider: vi.fn(),
+  deleteNotificationProvider: vi.fn(),
+  testNotificationProvider: vi.fn(),
+  updateNotificationProvider: vi.fn(),
+  setNotificationProviders: vi.fn(),
+}));
+const PAGER_URL = "json://pager";
+
+vi.mock("@/lib/api", () => ({
+  createNotificationProvider: mocks.createNotificationProvider,
+  deleteNotificationProvider: mocks.deleteNotificationProvider,
+  testNotificationProvider: mocks.testNotificationProvider,
+  updateNotificationProvider: mocks.updateNotificationProvider,
+}));
+
+const savedProvider: NotificationProvider = {
+  id: "provider-1",
+  name: "Saved provider",
+  type: "apprise",
+  config: { urls: ["json://saved"] },
+  enabled: true,
+  events: ["task.completed"],
+  created_at: "",
+  updated_at: "",
+};
+
+vi.mock("@/hooks/domains/settings/use-notification-providers", () => ({
+  useNotificationProviders: () => ({
+    providers: [savedProvider],
+    events: ["task.completed"],
+    appriseAvailable: true,
+  }),
+}));
+
+vi.mock("@/components/state-provider", () => ({
+  useAppStore: (selector: (state: Record<string, unknown>) => unknown) =>
+    selector({ setNotificationProviders: mocks.setNotificationProviders }),
+}));
+
+function useHarness() {
+  const state = useNotificationsState();
+  const saveRequest = useSaveRequest(state);
+  const actions = useNotificationsActions(state, vi.fn());
+  return { state, saveRequest, actions, isDirty: useIsDirty(state) };
+}
+
+const createdProvider: NotificationProvider = {
+  ...savedProvider,
+  id: "provider-2",
+  name: "Pager",
+  config: { urls: [PAGER_URL] },
+};
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.createNotificationProvider.mockResolvedValue(createdProvider);
+});
+
+describe("notification provider drafts", () => {
+  it("stages a new Apprise provider until the shared save runs", async () => {
+    const { result } = renderHook(useHarness);
+
+    act(() => result.current.actions.openAppriseForm("create"));
+    expect(result.current.isDirty).toBe(true);
+    expect(mocks.createNotificationProvider).not.toHaveBeenCalled();
+
+    act(() => {
+      result.current.state.setAppriseName("Pager");
+      result.current.state.setAppriseUrls(PAGER_URL);
+    });
+    await act(() => result.current.saveRequest.run());
+
+    expect(mocks.createNotificationProvider).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: "Pager",
+        config: { urls: [PAGER_URL] },
+      }),
+    );
+    expect(result.current.state.providers).toContainEqual(createdProvider);
+    expect(result.current.state.showAppriseForm).toBe(false);
+    expect(result.current.isDirty).toBe(false);
+  });
+
+  it("keeps a failed create draft open and dirty", async () => {
+    mocks.createNotificationProvider.mockRejectedValueOnce(new Error("create unavailable"));
+    const { result } = renderHook(useHarness);
+    act(() => {
+      result.current.actions.openAppriseForm("create");
+      result.current.state.setAppriseName("Pager");
+      result.current.state.setAppriseUrls(PAGER_URL);
+    });
+
+    await act(async () => {
+      await expect(result.current.saveRequest.run()).rejects.toThrow("create unavailable");
+    });
+
+    expect(result.current.state.showAppriseForm).toBe(true);
+    expect(result.current.state.appriseName).toBe("Pager");
+    expect(result.current.state.appriseUrls).toBe(PAGER_URL);
+    expect(result.current.isDirty).toBe(true);
+  });
+
+  it("cancels a new draft without persisting it", () => {
+    const { result } = renderHook(useHarness);
+    act(() => {
+      result.current.actions.openAppriseForm("create");
+      result.current.state.setAppriseUrls(PAGER_URL);
+    });
+
+    act(() => result.current.actions.cancelAppriseForm());
+
+    expect(mocks.createNotificationProvider).not.toHaveBeenCalled();
+    expect(result.current.state.showAppriseForm).toBe(false);
+    expect(result.current.state.appriseUrls).toBe("");
+    expect(result.current.isDirty).toBe(false);
+  });
+
+  it("discards staged provider edits back to the loaded baseline", () => {
+    const { result } = renderHook(useHarness);
+    act(() => result.current.actions.handleAppriseNameEdit(savedProvider.id, "Changed"));
+    expect(result.current.isDirty).toBe(true);
+
+    act(() => result.current.actions.discard());
+
+    expect(result.current.state.providers).toEqual([savedProvider]);
+    expect(result.current.isDirty).toBe(false);
+  });
+});
diff --git a/apps/web/components/settings/notifications-settings-actions.ts b/apps/web/components/settings/notifications-settings-actions.ts
index 2f43f06cf9..2f3fdb827b 100644
--- a/apps/web/components/settings/notifications-settings-actions.ts
+++ b/apps/web/components/settings/notifications-settings-actions.ts
@@ -155,8 +155,23 @@ export function useSaveRequest(state: NotificationsState) {
     pendingDeletes,
     setPendingDeletes,
     setNotificationProviders,
+    showAppriseForm,
+    appriseFormMode,
+    appriseName,
+    setAppriseName,
+    appriseUrls,
+    setAppriseUrls,
+    setShowAppriseForm,
+    setActiveAppriseId,
   } = state;
   return useRequest(async () => {
+    const createDraft =
+      showAppriseForm && appriseFormMode === "create"
+        ? { name: appriseName, urls: parseAppriseUrls(appriseUrls) }
+        : null;
+    if (createDraft && createDraft.urls.length === 0) {
+      throw new Error("At least one Apprise service URL is required.");
+    }
     const updates: Array<Promise<NotificationProvider>> = [];
     for (const provider of providers) {
       const baseline = baselineProviders.find((item) => item.id === provider.id);
@@ -169,8 +184,22 @@ export function useSaveRequest(state: NotificationsState) {
       await deleteNotificationProvider(providerId);
     }
     const updated = await Promise.all(updates);
+    const created = createDraft
+      ? await createNotificationProvider({
+          name: createDraft.name.trim() || "Apprise",
+          type: "apprise",
+          config: { urls: createDraft.urls },
+          enabled: true,
+          events:
+            state.notificationEvents.length > 0
+              ? state.notificationEvents
+              : DEFAULT_NOTIFICATION_EVENTS,
+        })
+      : null;
     const updatedById = new Map(updated.map((provider) => [provider.id, provider]));
-    const nextProviders = providers.map((provider) => updatedById.get(provider.id) ?? provider);
+    const nextProviders = providers
+      .map((provider) => updatedById.get(provider.id) ?? provider)
+      .concat(created ? [created] : []);
     setNotificationProviders({
       items: nextProviders,
       events: state.notificationEvents,
@@ -178,11 +207,6 @@ export function useSaveRequest(state: NotificationsState) {
       loaded: true,
       loading: false,
     });
-    if (updated.length === 0) {
-      setBaselineProviders(nextProviders);
-      setPendingDeletes(new Set());
-      return [] as NotificationProvider[];
-    }
     setProviders(nextProviders);
     setBaselineProviders(nextProviders);
     setAppriseEdits((prev) => {
@@ -200,13 +224,28 @@ export function useSaveRequest(state: NotificationsState) {
       return next;
     });
     setPendingDeletes(new Set());
-    return updated;
+    if (created) {
+      setAppriseName("");
+      setAppriseUrls("");
+      setShowAppriseForm(false);
+      setActiveAppriseId(null);
+    }
+    return created ? [...updated, created] : updated;
   });
 }
 
 export function useIsDirty(state: NotificationsState) {
-  const { providers, baselineProviders, appriseEdits, appriseNameEdits, pendingDeletes } = state;
+  const {
+    providers,
+    baselineProviders,
+    appriseEdits,
+    appriseNameEdits,
+    pendingDeletes,
+    showAppriseForm,
+    appriseFormMode,
+  } = state;
   return (
+    (showAppriseForm && appriseFormMode === "create") ||
     pendingDeletes.size > 0 ||
     providers.some((provider) => {
       const baseline = baselineProviders.find((item) => item.id === provider.id);
@@ -225,13 +264,12 @@ export function useIsDirty(state: NotificationsState) {
 
 function useAppriseProviderActions(state: NotificationsState) {
   const {
-    notificationEvents,
-    appriseName,
-    appriseUrls,
+    baselineProviders,
     appriseEdits,
     appriseNameEdits,
+    appriseFormMode,
+    activeAppriseId,
     setProviders,
-    setBaselineProviders,
     setAppriseEdits,
     setAppriseNameEdits,
     setAppriseName,
@@ -249,30 +287,6 @@ function useAppriseProviderActions(state: NotificationsState) {
     setProviders((prev) => prev.map((p) => (p.id === providerId ? updater(p) : p)));
   };
 
-  const handleCreateAppriseProvider = async () => {
-    const urls = parseAppriseUrls(appriseUrls);
-    if (urls.length === 0) return;
-    const defaultEvents =
-      notificationEvents.length > 0 ? notificationEvents : DEFAULT_NOTIFICATION_EVENTS;
-    try {
-      const created = await createNotificationProvider({
-        name: appriseName.trim() || "Apprise",
-        type: "apprise",
-        config: { urls },
-        enabled: true,
-        events: defaultEvents,
-      });
-      setProviders((prev) => [...prev, created]);
-      setBaselineProviders((prev) => [...prev, created]);
-      setAppriseEdits((prev) => ({ ...prev, [created.id]: urls.join("\n") }));
-      setAppriseNameEdits((prev) => ({ ...prev, [created.id]: created.name }));
-      setAppriseUrls("");
-      setShowAppriseForm(false);
-    } catch (error) {
-      console.error("[NotificationsSettings] Failed to create apprise provider", error);
-    }
-  };
-
   const handleAppriseEdit = (providerId: string, value: string) => {
     setAppriseEdits((prev) => ({ ...prev, [providerId]: value }));
     updateProviderState(providerId, (p) => ({
@@ -307,15 +321,42 @@ function useAppriseProviderActions(state: NotificationsState) {
   const closeAppriseForm = () => {
     setShowAppriseForm(false);
     setActiveAppriseId(null);
+    setAppriseName("");
+    setAppriseUrls("");
+  };
+
+  const cancelAppriseForm = () => {
+    if (appriseFormMode === "edit" && activeAppriseId) {
+      const baseline = baselineProviders.find((provider) => provider.id === activeAppriseId);
+      if (baseline) {
+        setProviders((current) =>
+          current.map((provider) =>
+            provider.id === baseline.id
+              ? {
+                  ...provider,
+                  name: baseline.name,
+                  config: { ...provider.config, urls: baseline.config?.urls },
+                }
+              : provider,
+          ),
+        );
+        setAppriseEdits((current) => ({
+          ...current,
+          [baseline.id]: formatAppriseUrls(baseline.config?.urls),
+        }));
+        setAppriseNameEdits((current) => ({ ...current, [baseline.id]: baseline.name }));
+      }
+    }
+    closeAppriseForm();
   };
 
   return {
-    handleCreateAppriseProvider,
     handleAppriseEdit,
     handleAppriseNameEdit,
     openAppriseForm,
     handleDeleteProvider,
     closeAppriseForm,
+    cancelAppriseForm,
     updateProviderState,
   };
 }
@@ -366,12 +407,25 @@ export function useNotificationsActions(state: NotificationsState, bumpPermissio
     }
   };
 
+  const discard = () => {
+    const edits = buildAppriseEdits(state.baselineProviders);
+    state.setProviders(state.baselineProviders);
+    state.setAppriseEdits(edits.urls);
+    state.setAppriseNameEdits(edits.names);
+    state.setPendingDeletes(new Set());
+    state.setAppriseName("");
+    state.setAppriseUrls("");
+    state.setShowAppriseForm(false);
+    state.setActiveAppriseId(null);
+  };
+
   return {
     handleToggleEvent,
     handleRequestPermission,
     handleRefreshPermission,
     handleTestNotification,
     handleTestProvider,
+    discard,
     ...appriseActions,
   };
 }
diff --git a/apps/web/components/settings/notifications-settings.tsx b/apps/web/components/settings/notifications-settings.tsx
index f5e280d8c5..52731780f9 100644
--- a/apps/web/components/settings/notifications-settings.tsx
+++ b/apps/web/components/settings/notifications-settings.tsx
@@ -1,17 +1,17 @@
 "use client";
 
-import { useMemo, useReducer, useSyncExternalStore, type FormEvent } from "react";
+import { useMemo, useReducer, useState, useSyncExternalStore, type FormEvent } from "react";
 import { IconBell, IconRefresh } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
-import { Checkbox } from "@kandev/ui/checkbox";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "@kandev/ui/hover-card";
 import { Input } from "@kandev/ui/input";
 import { Separator } from "@kandev/ui/separator";
 import { Textarea } from "@kandev/ui/textarea";
 import { NotificationSoundSection } from "@/components/settings/notification-sound-section";
+import { NotificationEventsTable } from "@/components/settings/notification-events-table";
 import { SettingsPageTemplate } from "@/components/settings/settings-page-template";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@kandev/ui/tooltip";
-import { DEFAULT_NOTIFICATION_EVENTS, EVENT_LABELS } from "@/lib/notifications/events";
+import { DEFAULT_NOTIFICATION_EVENTS } from "@/lib/notifications/events";
 import type { NotificationProvider } from "@/lib/types/http";
 import {
   useNotificationsState,
@@ -107,87 +107,6 @@ function DesktopNotificationsSection({
   );
 }
 
-type NotificationEventsTableProps = {
-  tableProviders: NotificationProvider[];
-  tableEvents: string[];
-  onToggleEvent: (provider: NotificationProvider, eventType: string) => void;
-  onTestProvider: (providerId: string) => Promise<void>;
-};
-
-function NotificationEventsTable({
-  tableProviders,
-  tableEvents,
-  onToggleEvent,
-  onTestProvider,
-}: NotificationEventsTableProps) {
-  if (tableProviders.length === 0) {
-    return <p className="text-sm text-muted-foreground">No providers configured yet.</p>;
-  }
-
-  return (
-    <div className="overflow-auto rounded-lg border border-muted">
-      <table className="min-w-full text-sm">
-        <thead className="bg-muted/40">
-          <tr>
-            <th className="px-4 py-3 text-left font-medium">Notification type</th>
-            {tableProviders.map((provider) => (
-              <th key={provider.id} className="px-4 py-3 text-center font-medium">
-                <div className="flex items-center justify-center gap-1.5">
-                  <span>{provider.name}</span>
-                  {provider.type !== "local" && (
-                    <TooltipProvider>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-6 w-6 cursor-pointer"
-                            aria-label={`Send test notification for ${provider.name}`}
-                            onClick={() => void onTestProvider(provider.id)}
-                          >
-                            <IconBell className="h-3.5 w-3.5" />
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>Send test notification</TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
-                  )}
-                </div>
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {tableEvents.map((eventType) => {
-            const meta = EVENT_LABELS[eventType] ?? {
-              title: eventType,
-              description: "Notify when this event occurs.",
-            };
-            return (
-              <tr key={eventType} className="border-t border-muted">
-                <td className="px-4 py-3">
-                  <div className="font-medium">{meta.title}</div>
-                  <div className="text-xs text-muted-foreground">{meta.description}</div>
-                </td>
-                {tableProviders.map((provider) => (
-                  <td key={provider.id} className="px-4 py-3 text-center">
-                    <div className="flex justify-center">
-                      <Checkbox
-                        checked={(provider.events ?? []).includes(eventType)}
-                        onCheckedChange={() => onToggleEvent(provider, eventType)}
-                      />
-                    </div>
-                  </td>
-                ))}
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
 function AppriseProviderCardActions({
   provider,
   onOpenForm,
@@ -239,6 +158,7 @@ function AppriseProviderCardActions({
 
 function AppriseProviderList({
   providers,
+  baselineProviders,
   appriseFormMode,
   activeAppriseId,
   appriseName,
@@ -254,6 +174,7 @@ function AppriseProviderList({
   onTextareaInput,
 }: {
   providers: NotificationProvider[];
+  baselineProviders: NotificationProvider[];
   appriseFormMode: AppriseFormMode;
   activeAppriseId: string | null;
   appriseName: string;
@@ -264,6 +185,7 @@ function AppriseProviderList({
   onAppriseEdit: (providerId: string, value: string) => void;
   onOpenForm: (mode: AppriseFormMode, provider?: NotificationProvider) => void;
   onCloseForm: () => void;
+  onCancelForm: () => void;
   onDeleteProvider: (providerId: string) => void;
   onTestProvider: (providerId: string) => Promise<void>;
   onTextareaInput: (event: FormEvent<HTMLTextAreaElement>) => void;
@@ -272,8 +194,19 @@ function AppriseProviderList({
     <>
       {providers.map((provider) => {
         const isEditing = appriseFormMode === "edit" && activeAppriseId === provider.id;
+        const baseline = baselineProviders.find((candidate) => candidate.id === provider.id);
+        const nameIsDirty = isEditing && provider.name !== baseline?.name;
+        const urlsIsDirty =
+          isEditing &&
+          JSON.stringify(provider.config?.urls ?? []) !==
+            JSON.stringify(baseline?.config?.urls ?? []);
         return (
-          <div key={provider.id} className="rounded-lg border border-muted p-4 space-y-3">
+          <div
+            key={provider.id}
+            className="rounded-lg border border-muted p-4 space-y-3"
+            data-settings-dirty={nameIsDirty || urlsIsDirty}
+            data-settings-dirty-level="container"
+          >
             {isEditing ? (
               <AppriseProviderForm
                 mode="edit"
@@ -290,6 +223,8 @@ function AppriseProviderList({
                 onSubmit={onCloseForm}
                 onCancel={onCloseForm}
                 onInput={onTextareaInput}
+                nameIsDirty={nameIsDirty}
+                urlsIsDirty={urlsIsDirty}
               />
             ) : (
               <div className="flex items-center justify-between gap-4">
@@ -329,6 +264,7 @@ function useNotificationPermission() {
 type ExternalProvidersSectionProps = {
   appriseAvailable: boolean;
   appriseProviders: NotificationProvider[];
+  baselineProviders: NotificationProvider[];
   appriseFormMode: AppriseFormMode;
   activeAppriseId: string | null;
   appriseName: string;
@@ -340,15 +276,16 @@ type ExternalProvidersSectionProps = {
   onAppriseEdit: (id: string, v: string) => void;
   onOpenForm: (mode: AppriseFormMode, provider?: NotificationProvider) => void;
   onCloseForm: () => void;
+  onCancelForm: () => void;
   onDeleteProvider: (id: string) => void;
   onTestProvider: (id: string) => Promise<void>;
   onTextareaInput: (e: FormEvent<HTMLTextAreaElement>) => void;
-  onCreateAppriseProvider: () => Promise<void>;
 };
 
 function ExternalProvidersSection({
   appriseAvailable,
   appriseProviders,
+  baselineProviders,
   appriseFormMode,
   activeAppriseId,
   appriseName,
@@ -360,10 +297,10 @@ function ExternalProvidersSection({
   onAppriseEdit,
   onOpenForm,
   onCloseForm,
+  onCancelForm,
   onDeleteProvider,
   onTestProvider,
   onTextareaInput,
-  onCreateAppriseProvider,
 }: ExternalProvidersSectionProps) {
   return (
     <div className="space-y-4">
@@ -392,6 +329,7 @@ function ExternalProvidersSection({
       )}
       <AppriseProviderList
         providers={appriseProviders}
+        baselineProviders={baselineProviders}
         appriseFormMode={appriseFormMode}
         activeAppriseId={activeAppriseId}
         appriseName={appriseName}
@@ -402,13 +340,19 @@ function ExternalProvidersSection({
         onAppriseEdit={onAppriseEdit}
         onOpenForm={onOpenForm}
         onCloseForm={onCloseForm}
+        onCancelForm={onCancelForm}
         onDeleteProvider={onDeleteProvider}
         onTestProvider={onTestProvider}
         onTextareaInput={onTextareaInput}
       />
       {appriseAvailable && (
         <div className="space-y-3">
-          <Button variant="outline" className="cursor-pointer" onClick={() => onOpenForm("create")}>
+          <Button
+            variant="outline"
+            className="cursor-pointer"
+            onClick={() => onOpenForm("create")}
+            disabled={showAppriseForm}
+          >
             Add Apprise Provider
           </Button>
           {showAppriseForm && appriseFormMode === "create" && (
@@ -418,12 +362,13 @@ function ExternalProvidersSection({
               urls={appriseUrls}
               onNameChange={setAppriseName}
               onUrlsChange={setAppriseUrls}
-              onSubmit={async () => {
-                await onCreateAppriseProvider();
-                onCloseForm();
-              }}
-              onCancel={onCloseForm}
+              onSubmit={onCloseForm}
+              onCancel={onCancelForm}
               onInput={onTextareaInput}
+              formIsDirty
+              nameIsDirty={appriseName.length > 0}
+              urlsIsDirty={appriseUrls.length > 0}
+              showSubmit={false}
             />
           )}
         </div>
@@ -455,15 +400,49 @@ function useTableData(state: NotificationsState) {
   return { tableProviders, tableEvents };
 }
 
+function useNotificationPageSaveState(state: NotificationsState, soundIsDirty: boolean) {
+  const providerIsDirty = useIsDirty(state);
+  const creatingApprise = state.showAppriseForm && state.appriseFormMode === "create";
+  const canSave = !creatingApprise || state.appriseUrls.trim().length > 0;
+  const revision = useMemo(
+    () =>
+      JSON.stringify({
+        providers: state.providers,
+        appriseEdits: state.appriseEdits,
+        appriseNameEdits: state.appriseNameEdits,
+        pendingDeletes: [...state.pendingDeletes].sort(),
+        createDraft: creatingApprise ? { name: state.appriseName, urls: state.appriseUrls } : null,
+      }),
+    [
+      creatingApprise,
+      state.providers,
+      state.appriseEdits,
+      state.appriseNameEdits,
+      state.pendingDeletes,
+      state.appriseName,
+      state.appriseUrls,
+    ],
+  );
+  return {
+    providerIsDirty,
+    cardIsDirty: providerIsDirty || soundIsDirty,
+    canSave,
+    invalidReason: canSave ? undefined : "At least one Apprise service URL is required.",
+    revision,
+  };
+}
+
 export function NotificationsSettings() {
   const state = useNotificationsState();
   const { notificationPermission, bumpPermission } = useNotificationPermission();
   const saveRequest = useSaveRequest(state);
   const actions = useNotificationsActions(state, bumpPermission);
-  const isDirty = useIsDirty(state);
+  const [soundIsDirty, setSoundIsDirty] = useState(false);
+  const saveState = useNotificationPageSaveState(state, soundIsDirty);
   const { tableProviders, tableEvents } = useTableData(state);
   const {
     providers,
+    baselineProviders,
     appriseAvailable,
     appriseName,
     setAppriseName,
@@ -474,22 +453,18 @@ export function NotificationsSettings() {
     activeAppriseId,
   } = state;
   const appriseProviders = providers.filter((provider) => provider.type === "apprise");
-
-  const handleSave = async () => {
-    try {
-      await saveRequest.run();
-    } catch (error) {
-      console.error("[NotificationsSettings] Failed to save notifications", error);
-    }
-  };
-
   return (
     <SettingsPageTemplate
       title="Notifications"
       description="Configure providers and choose which events should alert you."
-      isDirty={isDirty}
+      isDirty={saveState.providerIsDirty}
+      cardIsDirty={saveState.cardIsDirty}
       saveStatus={saveRequest.status}
-      onSave={handleSave}
+      saveRevision={saveState.revision}
+      canSave={saveState.canSave}
+      invalidReason={saveState.invalidReason}
+      onSave={() => saveRequest.run()}
+      onDiscard={actions.discard}
     >
       <DesktopNotificationsSection
         notificationPermission={notificationPermission}
@@ -498,11 +473,12 @@ export function NotificationsSettings() {
         onTestNotification={actions.handleTestNotification}
       />
       <Separator className="my-4" />
-      <NotificationSoundSection />
+      <NotificationSoundSection onDirtyChange={setSoundIsDirty} />
       <Separator className="my-4" />
       <ExternalProvidersSection
         appriseAvailable={appriseAvailable}
         appriseProviders={appriseProviders}
+        baselineProviders={baselineProviders}
         appriseFormMode={appriseFormMode}
         activeAppriseId={activeAppriseId}
         appriseName={appriseName}
@@ -514,10 +490,10 @@ export function NotificationsSettings() {
         onAppriseEdit={actions.handleAppriseEdit}
         onOpenForm={actions.openAppriseForm}
         onCloseForm={actions.closeAppriseForm}
+        onCancelForm={actions.cancelAppriseForm}
         onDeleteProvider={actions.handleDeleteProvider}
         onTestProvider={actions.handleTestProvider}
         onTextareaInput={handleTextareaInput}
-        onCreateAppriseProvider={actions.handleCreateAppriseProvider}
       />
       <Separator className="my-4" />
       <div className="space-y-4">
@@ -530,6 +506,7 @@ export function NotificationsSettings() {
         {tableProviders.length > 0 && (
           <NotificationEventsTable
             tableProviders={tableProviders}
+            baselineProviders={baselineProviders}
             tableEvents={tableEvents}
             onToggleEvent={actions.handleToggleEvent}
             onTestProvider={actions.handleTestProvider}
@@ -549,6 +526,10 @@ type AppriseProviderFormProps = {
   onSubmit: () => void | Promise<void>;
   onCancel: () => void;
   onInput: (event: FormEvent<HTMLTextAreaElement>) => void;
+  nameIsDirty?: boolean;
+  urlsIsDirty?: boolean;
+  formIsDirty?: boolean;
+  showSubmit?: boolean;
 };
 
 function AppriseProviderForm({
@@ -560,14 +541,23 @@ function AppriseProviderForm({
   onSubmit,
   onCancel,
   onInput,
+  nameIsDirty = false,
+  urlsIsDirty = false,
+  formIsDirty = nameIsDirty || urlsIsDirty,
+  showSubmit = true,
 }: AppriseProviderFormProps) {
   return (
-    <div className="rounded-lg border border-dashed border-muted p-4 space-y-3">
+    <div
+      className="rounded-lg border border-dashed border-muted p-4 space-y-3"
+      data-settings-dirty={formIsDirty}
+      data-settings-dirty-level="container"
+    >
       <div className="text-base font-medium">Apprise Provider</div>
       <Input
         value={name}
         onChange={(event) => onNameChange(event.target.value)}
         placeholder="Provider name"
+        data-settings-dirty={nameIsDirty}
       />
       <Textarea
         value={urls}
@@ -576,11 +566,14 @@ function AppriseProviderForm({
         placeholder="Service URL(s)"
         rows={1}
         className="min-h-0 h-auto"
+        data-settings-dirty={urlsIsDirty}
       />
       <div className="flex items-center gap-2">
-        <Button className="cursor-pointer" onClick={onSubmit}>
-          {mode === "create" ? "Add provider" : "Done"}
-        </Button>
+        {showSubmit && (
+          <Button className="cursor-pointer" onClick={onSubmit}>
+            {mode === "create" ? "Add provider" : "Done"}
+          </Button>
+        )}
         <Button variant="ghost" className="cursor-pointer" onClick={onCancel}>
           Cancel
         </Button>
diff --git a/apps/web/components/settings/plugins/plugin-config-form.test.tsx b/apps/web/components/settings/plugins/plugin-config-form.test.tsx
new file mode 100644
index 0000000000..6582f7516e
--- /dev/null
+++ b/apps/web/components/settings/plugins/plugin-config-form.test.tsx
@@ -0,0 +1,40 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { PluginConfigField } from "@/lib/plugins/config-schema";
+import { PluginConfigForm } from "./plugin-config-form";
+
+const fields: PluginConfigField[] = [
+  {
+    name: "greeting",
+    label: "Greeting",
+    type: "string",
+    required: false,
+    secret: false,
+  },
+  {
+    name: "enabled",
+    label: "Enabled",
+    type: "boolean",
+    required: false,
+    secret: false,
+  },
+];
+
+afterEach(cleanup);
+
+describe("PluginConfigForm", () => {
+  it("marks only changed controls as dirty", () => {
+    render(
+      <PluginConfigForm
+        fields={fields}
+        values={{ greeting: "changed", enabled: false }}
+        initialValues={{ greeting: "saved", enabled: false }}
+        disabled={false}
+        onChange={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByLabelText("Greeting").getAttribute("data-settings-dirty")).toBe("true");
+    expect(screen.getByLabelText("Enabled").getAttribute("data-settings-dirty")).toBe("false");
+  });
+});
diff --git a/apps/web/components/settings/plugins/plugin-config-form.tsx b/apps/web/components/settings/plugins/plugin-config-form.tsx
index 4992f393dc..6d34dbe3e2 100644
--- a/apps/web/components/settings/plugins/plugin-config-form.tsx
+++ b/apps/web/components/settings/plugins/plugin-config-form.tsx
@@ -13,6 +13,7 @@ const ENUM_UNSET_SENTINEL = "__kandev_enum_unset__";
 type PluginConfigFormProps = {
   fields: PluginConfigField[];
   values: Record<string, string | boolean>;
+  initialValues: Record<string, string | boolean>;
   disabled: boolean;
   onChange: (name: string, value: string | boolean) => void;
 };
@@ -23,7 +24,13 @@ type PluginConfigFormProps = {
  * mask; editing replaces the value, leaving it untouched keeps the stored
  * secret. Purely controlled — load/save/dirty state lives in PluginDetail.
  */
-export function PluginConfigForm({ fields, values, disabled, onChange }: PluginConfigFormProps) {
+export function PluginConfigForm({
+  fields,
+  values,
+  initialValues,
+  disabled,
+  onChange,
+}: PluginConfigFormProps) {
   return (
     <div className="space-y-5">
       {fields.map((field) => (
@@ -31,6 +38,7 @@ export function PluginConfigForm({ fields, values, disabled, onChange }: PluginC
           key={field.name}
           field={field}
           value={values[field.name] ?? ""}
+          isDirty={values[field.name] !== initialValues[field.name]}
           disabled={disabled}
           onChange={onChange}
         />
@@ -42,11 +50,12 @@ export function PluginConfigForm({ fields, values, disabled, onChange }: PluginC
 type ConfigFieldRowProps = {
   field: PluginConfigField;
   value: string | boolean;
+  isDirty: boolean;
   disabled: boolean;
   onChange: (name: string, value: string | boolean) => void;
 };
 
-function ConfigFieldRow({ field, value, disabled, onChange }: ConfigFieldRowProps) {
+function ConfigFieldRow({ field, value, isDirty, disabled, onChange }: ConfigFieldRowProps) {
   const inputId = `plugin-config-${field.name}`;
   return (
     <div className="space-y-1.5" data-testid={`plugin-config-field-${field.name}`}>
@@ -58,6 +67,7 @@ function ConfigFieldRow({ field, value, disabled, onChange }: ConfigFieldRowProp
         field={field}
         inputId={inputId}
         value={value}
+        isDirty={isDirty}
         disabled={disabled}
         onChange={onChange}
       />
@@ -72,6 +82,7 @@ function ConfigFieldControl({
   field,
   inputId,
   value,
+  isDirty,
   disabled,
   onChange,
 }: ConfigFieldControlProps) {
@@ -82,6 +93,7 @@ function ConfigFieldControl({
           id={inputId}
           checked={value === true}
           disabled={disabled}
+          data-settings-dirty={isDirty}
           onCheckedChange={(checked) => onChange(field.name, checked)}
         />
       </div>
@@ -98,7 +110,11 @@ function ConfigFieldControl({
         disabled={disabled}
         onValueChange={(next) => onChange(field.name, next === ENUM_UNSET_SENTINEL ? "" : next)}
       >
-        <SelectTrigger id={inputId} className="max-w-md cursor-pointer">
+        <SelectTrigger
+          id={inputId}
+          className="max-w-md cursor-pointer"
+          data-settings-dirty={isDirty}
+        >
           <SelectValue placeholder="Select..." />
         </SelectTrigger>
         <SelectContent>
@@ -129,6 +145,7 @@ function ConfigFieldControl({
       step={!field.secret && field.type === "integer" ? "1" : undefined}
       value={typeof value === "string" ? value : ""}
       disabled={disabled}
+      data-settings-dirty={isDirty}
       autoComplete={field.secret ? "off" : undefined}
       className="max-w-md"
       onChange={(event) => onChange(field.name, event.target.value)}
diff --git a/apps/web/components/settings/plugins/plugin-detail.tsx b/apps/web/components/settings/plugins/plugin-detail.tsx
index b8431a96e1..569aee85f9 100644
--- a/apps/web/components/settings/plugins/plugin-detail.tsx
+++ b/apps/web/components/settings/plugins/plugin-detail.tsx
@@ -3,12 +3,13 @@
 import { IconArrowLeft } from "@tabler/icons-react";
 import { Badge } from "@kandev/ui/badge";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
+import { CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
 import { Separator } from "@kandev/ui/separator";
 import Link from "@/components/routing/app-link";
 import { useRouter } from "@/lib/routing/client-router";
 import { usePlugins } from "@/hooks/domains/plugins/use-plugins";
-import { UnsavedChangesBadge, UnsavedSaveButton } from "@/components/settings/unsaved-indicator";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
 import { PluginConfigForm } from "./plugin-config-form";
 import { PluginManifestCard } from "./plugin-manifest-card";
 import { PluginStatusBadge } from "./plugin-status-badge";
@@ -32,6 +33,15 @@ export function PluginDetail({ pluginId }: { pluginId: string }) {
   const actions = usePluginActions();
   const plugin = items.find((p) => p.id === pluginId) ?? null;
   const form = usePluginConfigForm(plugin);
+  useSettingsSaveContributor({
+    id: `plugin-config:${pluginId}`,
+    revision: form.revision,
+    isDirty: form.isDirty,
+    canSave: form.canSave,
+    invalidReason: form.invalidReason,
+    save: form.handleSave,
+    discard: form.discard,
+  });
 
   if (!plugin) {
     return loaded ? <PluginNotFound pluginId={pluginId} /> : null;
@@ -39,13 +49,7 @@ export function PluginDetail({ pluginId }: { pluginId: string }) {
 
   return (
     <div className="space-y-6" data-testid={`plugin-detail-${plugin.id}`}>
-      <PluginDetailHeader
-        plugin={plugin}
-        showSave={form.fields.length > 0}
-        isDirty={form.isDirty}
-        saveStatus={form.saveStatus}
-        onSave={form.handleSave}
-      />
+      <PluginDetailHeader plugin={plugin} />
       <Separator />
 
       <PluginSettingsCard plugin={plugin} form={form} busy={actions.busyId === plugin.id} />
@@ -67,19 +71,9 @@ export function PluginDetail({ pluginId }: { pluginId: string }) {
 
 type PluginDetailHeaderProps = {
   plugin: PluginRecord;
-  showSave: boolean;
-  isDirty: boolean;
-  saveStatus: "idle" | "loading" | "success" | "error";
-  onSave: () => void;
 };
 
-function PluginDetailHeader({
-  plugin,
-  showSave,
-  isDirty,
-  saveStatus,
-  onSave,
-}: PluginDetailHeaderProps) {
+function PluginDetailHeader({ plugin }: PluginDetailHeaderProps) {
   return (
     <div className="space-y-3">
       <Link
@@ -110,17 +104,6 @@ function PluginDetailHeader({
             <p className="text-sm text-muted-foreground">{plugin.description}</p>
           )}
         </div>
-        {showSave && (
-          <div className="flex items-center gap-3 shrink-0">
-            {isDirty && <UnsavedChangesBadge />}
-            <UnsavedSaveButton
-              isDirty={isDirty}
-              isLoading={saveStatus === "loading"}
-              status={saveStatus}
-              onClick={onSave}
-            />
-          </div>
-        )}
       </div>
     </div>
   );
@@ -134,14 +117,14 @@ type PluginSettingsCardProps = {
 
 function PluginSettingsCard({ plugin, form, busy }: PluginSettingsCardProps) {
   return (
-    <Card data-testid="plugin-settings-card">
+    <SettingsCard isDirty={form.isDirty} data-testid="plugin-settings-card">
       <CardHeader>
         <CardTitle className="text-base">Settings</CardTitle>
       </CardHeader>
       <CardContent>
         <PluginSettingsBody plugin={plugin} form={form} busy={busy} />
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
@@ -164,6 +147,7 @@ function PluginSettingsBody({ plugin, form, busy }: PluginSettingsCardProps) {
       <PluginConfigForm
         fields={form.fields}
         values={form.values}
+        initialValues={form.initialValues}
         disabled={busy || form.saveStatus === "loading"}
         onChange={form.handleChange}
       />
diff --git a/apps/web/components/settings/plugins/use-plugin-config-form.test.ts b/apps/web/components/settings/plugins/use-plugin-config-form.test.ts
index bebbb0b517..0e57e681d9 100644
--- a/apps/web/components/settings/plugins/use-plugin-config-form.test.ts
+++ b/apps/web/components/settings/plugins/use-plugin-config-form.test.ts
@@ -98,9 +98,17 @@ describe("usePluginConfigForm", () => {
     const { result } = renderHook(() => usePluginConfigForm(testPlugin()));
     await waitFor(() => expect(result.current.configLoading).toBe(false));
 
-    await act(() => result.current.handleSave());
+    let saveError: unknown;
+    await act(async () => {
+      try {
+        await result.current.handleSave();
+      } catch (error) {
+        saveError = error;
+      }
+    });
 
     expect(updatePluginConfig).not.toHaveBeenCalled();
+    expect(saveError).toEqual(new Error("Required: github_token"));
     expect(toastError).toHaveBeenCalledWith(expect.stringContaining("Required"));
   });
 
@@ -127,12 +135,34 @@ describe("usePluginConfigForm", () => {
     await waitFor(() => expect(result.current.configLoading).toBe(false));
 
     act(() => result.current.handleChange("github_token", "ghp_x"));
-    await act(() => result.current.handleSave());
+    let saveError: unknown;
+    await act(async () => {
+      try {
+        await result.current.handleSave();
+      } catch (error) {
+        saveError = error;
+      }
+    });
 
+    expect(saveError).toEqual(new Error("boom"));
     expect(result.current.saveStatus).toBe("error");
     expect(toastError).toHaveBeenCalledWith("boom");
   });
 
+  it("discards a dirty draft back to the loaded values", async () => {
+    getPluginConfig.mockResolvedValue({ github_token: SECRET_MASK, org: "kdlbs" });
+    const { result } = renderHook(() => usePluginConfigForm(testPlugin()));
+    await waitFor(() => expect(result.current.configLoading).toBe(false));
+
+    act(() => result.current.handleChange("org", "changed"));
+    expect(result.current.isDirty).toBe(true);
+    expect(result.current.revision).not.toBe(JSON.stringify(result.current.initialValues));
+
+    act(() => result.current.discard());
+    expect(result.current.values.org).toBe("kdlbs");
+    expect(result.current.isDirty).toBe(false);
+  });
+
   it("treats a refetch failure after a successful PATCH as saved — and masks typed secrets", async () => {
     updatePluginConfig.mockResolvedValue({ updated: true });
     const { result } = renderHook(() => usePluginConfigForm(testPlugin()));
diff --git a/apps/web/components/settings/plugins/use-plugin-config-form.ts b/apps/web/components/settings/plugins/use-plugin-config-form.ts
index aad401e27a..98f5937e39 100644
--- a/apps/web/components/settings/plugins/use-plugin-config-form.ts
+++ b/apps/web/components/settings/plugins/use-plugin-config-form.ts
@@ -15,6 +15,20 @@ import type { PluginRecord } from "@/lib/types/plugins";
 type SaveStatus = "idle" | "loading" | "success" | "error";
 type FormValues = Record<string, string | boolean>;
 
+function maskSecretsIn(
+  source: FormValues,
+  fields: ReturnType<typeof parseConfigSchema>,
+): FormValues {
+  const masked = { ...source };
+  for (const field of fields) {
+    const current = masked[field.name];
+    if (field.secret && typeof current === "string" && current !== "") {
+      masked[field.name] = SECRET_MASK;
+    }
+  }
+  return masked;
+}
+
 /**
  * Load/edit/save state for one plugin's schema-driven settings form.
  * Mirrors use-plugin-actions' local-hook pattern: fetch + toast wiring lives
@@ -65,6 +79,7 @@ export function usePluginConfigForm(plugin: PluginRecord | null) {
     () => fields.some((field) => values[field.name] !== initialValues[field.name]),
     [fields, values, initialValues],
   );
+  const missing = useMemo(() => missingRequiredFields(fields, values), [fields, values]);
 
   const handleChange = (name: string, value: string | boolean) => {
     setValues((prev) => ({ ...prev, [name]: value }));
@@ -73,10 +88,9 @@ export function usePluginConfigForm(plugin: PluginRecord | null) {
 
   const handleSave = async () => {
     if (!pluginId) return;
-    const missing = missingRequiredFields(fields, values);
     if (missing.length > 0) {
       toast.error(`Required: ${missing.join(", ")}`);
-      return;
+      throw new Error(`Required: ${missing.join(", ")}`);
     }
     setSaveStatus("loading");
     try {
@@ -84,7 +98,7 @@ export function usePluginConfigForm(plugin: PluginRecord | null) {
     } catch (err) {
       setSaveStatus("error");
       toast.error(err instanceof Error ? err.message : "Failed to save plugin settings");
-      return;
+      throw err;
     }
     // The config IS persisted from here on — a refetch failure (e.g. a
     // transient hiccup while the plugin restarts) must not be reported as a
@@ -96,44 +110,30 @@ export function usePluginConfigForm(plugin: PluginRecord | null) {
       setInitialValues(initial);
       toast.success("Plugin settings saved");
     } catch {
-      maskSecretValues();
+      const masked = maskSecretsIn(values, fields);
+      setValues(masked);
+      setInitialValues(masked);
       toast.warning("Settings saved, but reloading them failed — refresh to confirm.");
     }
     setSaveStatus("success");
   };
 
-  // On a post-save refetch failure, replace any typed secret input with the
-  // mask (so cleartext never lingers) and rebase initialValues onto the
-  // masked snapshot — the config IS saved, so the masked form is the new
-  // baseline and must not read as dirty (e.g. a previously-unset secret the
-  // user just entered). Computed from the current `values` and applied to
-  // both state setters directly, rather than as a side effect inside a
-  // functional updater (which would run twice under StrictMode).
-  const maskSecretValues = () => {
-    const masked = maskSecretsIn(values);
-    setValues(masked);
-    setInitialValues(masked);
-  };
-
-  const maskSecretsIn = (source: FormValues): FormValues => {
-    const masked = { ...source };
-    for (const field of fields) {
-      const current = masked[field.name];
-      if (field.secret && typeof current === "string" && current !== "") {
-        masked[field.name] = SECRET_MASK;
-      }
-    }
-    return masked;
-  };
-
   return {
     fields,
     values,
+    initialValues,
     configLoading,
     configError,
     saveStatus,
     isDirty,
+    canSave: missing.length === 0,
+    invalidReason: missing.length > 0 ? `Required: ${missing.join(", ")}` : undefined,
+    revision: JSON.stringify(values),
     handleChange,
     handleSave,
+    discard: () => {
+      setValues(initialValues);
+      setSaveStatus("idle");
+    },
   };
 }
diff --git a/apps/web/components/settings/profile-capability-helpers.tsx b/apps/web/components/settings/profile-capability-helpers.tsx
new file mode 100644
index 0000000000..243be77ef2
--- /dev/null
+++ b/apps/web/components/settings/profile-capability-helpers.tsx
@@ -0,0 +1,72 @@
+import { IconTerminal2 } from "@tabler/icons-react";
+import { Button } from "@kandev/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@kandev/ui/dialog";
+import type { CommandEntry, ModeEntry } from "@/lib/types/http";
+import type { ProfileFormData } from "./profile-form-fields";
+
+export function CommandsButton({ commands }: { commands: CommandEntry[] }) {
+  if (commands.length === 0) return null;
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="cursor-pointer"
+          data-testid="profile-commands-button"
+        >
+          <IconTerminal2 className="mr-2 h-4 w-4" />
+          Available commands ({commands.length})
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Available slash commands</DialogTitle>
+          <DialogDescription>
+            Type these during a session chat to invoke them - e.g. <code>/init</code>.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="max-h-[60vh] overflow-y-auto space-y-2">
+          {commands.map((command) => (
+            <div key={command.name} className="rounded-md border p-3">
+              <code className="text-sm font-semibold">/{command.name}</code>
+              {command.description && (
+                <p className="text-xs text-muted-foreground mt-1">{command.description}</p>
+              )}
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function findActiveMode(
+  modes: ModeEntry[],
+  selectedMode: string,
+  currentModeId?: string,
+): ModeEntry | undefined {
+  if (modes.length === 0) return undefined;
+  const modeId = selectedMode || currentModeId || modes[0]?.id;
+  return modes.find((mode) => mode.id === modeId);
+}
+
+export function profileModelIsDirty(profile: ProfileFormData, baseline?: ProfileFormData): boolean {
+  if (!baseline) return false;
+  return (
+    profile.model !== baseline.model ||
+    JSON.stringify(profile.config_options ?? {}) !== JSON.stringify(baseline.config_options ?? {})
+  );
+}
+
+export function profileModeIsDirty(profile: ProfileFormData, baseline?: ProfileFormData): boolean {
+  return Boolean(baseline && profile.mode !== baseline.mode);
+}
diff --git a/apps/web/components/settings/profile-edit/docker-sections.tsx b/apps/web/components/settings/profile-edit/docker-sections.tsx
index 18eb023ef3..a2403219da 100644
--- a/apps/web/components/settings/profile-edit/docker-sections.tsx
+++ b/apps/web/components/settings/profile-edit/docker-sections.tsx
@@ -16,6 +16,7 @@ import {
   removeDockerContainer,
 } from "@/lib/api/domains/settings-api";
 import type { DockerContainer } from "@/lib/api/domains/settings-api";
+import { SettingsCard } from "@/components/settings/settings-card";
 
 const DEFAULT_IMAGE_TAG = "kandev/multi-agent:latest";
 // Self-contained default that produces a working image:
@@ -152,6 +153,8 @@ type DockerfileBuildCardProps = {
   dockerfile: string;
   onDockerfileChange: (v: string) => void;
   imageTag: string;
+  baselineDockerfile?: string;
+  baselineImageTag?: string;
   onImageTagChange: (v: string) => void;
   onBuildSuccess?: (result: DockerBuildSuccess) => void;
 };
@@ -160,6 +163,8 @@ export function DockerfileBuildCard({
   dockerfile,
   onDockerfileChange,
   imageTag,
+  baselineDockerfile,
+  baselineImageTag,
   onImageTagChange,
   onBuildSuccess,
 }: DockerfileBuildCardProps) {
@@ -175,6 +180,8 @@ export function DockerfileBuildCard({
   };
 
   const canFillDefaults = !dockerfile.trim() || !imageTag.trim();
+  const dockerfileDirty = baselineDockerfile !== undefined && dockerfile !== baselineDockerfile;
+  const imageTagDirty = baselineImageTag !== undefined && imageTag !== baselineImageTag;
 
   const fillDefaults = () => {
     if (!imageTag.trim()) onImageTagChange(DEFAULT_IMAGE_TAG);
@@ -182,7 +189,7 @@ export function DockerfileBuildCard({
   };
 
   return (
-    <Card>
+    <SettingsCard isDirty={dockerfileDirty || imageTagDirty}>
       <CardHeader>
         <div className="flex items-center justify-between">
           <div className="space-y-1">
@@ -210,11 +217,16 @@ export function DockerfileBuildCard({
             onChange={(e) => onImageTagChange(e.target.value)}
             placeholder={DEFAULT_IMAGE_TAG}
             className="font-mono text-sm"
+            data-settings-dirty={imageTagDirty}
           />
         </div>
         <div className="space-y-2">
           <Label>Dockerfile Content</Label>
-          <div className="overflow-hidden rounded-md border">
+          <div
+            className="overflow-hidden rounded-md border"
+            data-settings-dirty={dockerfileDirty}
+            data-settings-dirty-level="container"
+          >
             <ScriptEditor
               value={dockerfile}
               onChange={onDockerfileChange}
@@ -247,7 +259,7 @@ export function DockerfileBuildCard({
           </pre>
         )}
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
diff --git a/apps/web/components/settings/profile-edit/env-vars-card.tsx b/apps/web/components/settings/profile-edit/env-vars-card.tsx
index 10e7216d0e..1223dd6436 100644
--- a/apps/web/components/settings/profile-edit/env-vars-card.tsx
+++ b/apps/web/components/settings/profile-edit/env-vars-card.tsx
@@ -3,11 +3,12 @@
 import { useCallback, useId, useState } from "react";
 import { IconPlus, IconTrash } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@kandev/ui/card";
+import { CardContent, CardDescription, CardHeader, CardTitle } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
 import { Label } from "@kandev/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
 import type { ProfileEnvVar } from "@/lib/types/http";
+import { SettingsCard } from "@/components/settings/settings-card";
 
 export type EnvVarRow = {
   key: string;
@@ -42,11 +43,13 @@ function ValueOrSecretInput({
   index,
   secrets,
   onUpdate,
+  baselineRow,
 }: {
   row: EnvVarRow;
   index: number;
   secrets: { id: string; name: string }[];
   onUpdate: (index: number, field: keyof EnvVarRow, val: string) => void;
+  baselineRow?: EnvVarRow;
 }) {
   if (row.mode === "value") {
     return (
@@ -55,12 +58,16 @@ function ValueOrSecretInput({
         onChange={(e) => onUpdate(index, "value", e.target.value)}
         placeholder="value"
         className="flex-[3] font-mono text-xs"
+        data-settings-dirty={!baselineRow || row.value !== baselineRow.value}
       />
     );
   }
   return (
     <Select value={row.secretId} onValueChange={(v) => onUpdate(index, "secretId", v)}>
-      <SelectTrigger className="flex-[3] text-xs">
+      <SelectTrigger
+        className="flex-[3] text-xs"
+        data-settings-dirty={!baselineRow || row.secretId !== baselineRow.secretId}
+      >
         <SelectValue placeholder="Select secret..." />
       </SelectTrigger>
       <SelectContent>
@@ -80,23 +87,34 @@ function EnvVarRowComponent({
   secrets,
   onUpdate,
   onRemove,
+  baselineRow,
 }: {
   row: EnvVarRow;
   index: number;
   secrets: { id: string; name: string }[];
   onUpdate: (index: number, field: keyof EnvVarRow, val: string) => void;
   onRemove: (index: number) => void;
+  baselineRow?: EnvVarRow;
 }) {
   return (
-    <li className="flex items-center gap-2" data-testid={`env-var-row-${index}`}>
+    <li
+      className="flex items-center gap-2"
+      data-testid={`env-var-row-${index}`}
+      data-settings-dirty={!baselineRow || JSON.stringify(row) !== JSON.stringify(baselineRow)}
+      data-settings-dirty-level="container"
+    >
       <Input
         value={row.key}
         onChange={(e) => onUpdate(index, "key", e.target.value)}
         placeholder="KEY"
         className="flex-[2] font-mono text-xs"
+        data-settings-dirty={!baselineRow || row.key !== baselineRow.key}
       />
       <Select value={row.mode} onValueChange={(v) => onUpdate(index, "mode", v)}>
-        <SelectTrigger className="w-[100px] text-xs">
+        <SelectTrigger
+          className="w-[100px] text-xs"
+          data-settings-dirty={!baselineRow || row.mode !== baselineRow.mode}
+        >
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
@@ -104,7 +122,13 @@ function EnvVarRowComponent({
           <SelectItem value="secret">Secret</SelectItem>
         </SelectContent>
       </Select>
-      <ValueOrSecretInput row={row} index={index} secrets={secrets} onUpdate={onUpdate} />
+      <ValueOrSecretInput
+        row={row}
+        baselineRow={baselineRow}
+        index={index}
+        secrets={secrets}
+        onUpdate={onUpdate}
+      />
       <Button
         type="button"
         variant="ghost"
@@ -261,13 +285,21 @@ function EnvVarAddForm({
 
 type EnvVarsFieldProps = {
   rows: EnvVarRow[];
+  baselineRows?: EnvVarRow[];
   secrets: { id: string; name: string }[];
   onAdd: (row: EnvVarRow) => void;
   onUpdate: (index: number, field: keyof EnvVarRow, val: string) => void;
   onRemove: (index: number) => void;
 };
 
-function EnvVarsFieldBody({ rows, secrets, onAdd, onUpdate, onRemove }: EnvVarsFieldProps) {
+function EnvVarsFieldBody({
+  rows,
+  baselineRows,
+  secrets,
+  onAdd,
+  onUpdate,
+  onRemove,
+}: EnvVarsFieldProps) {
   return (
     <div className="space-y-3" data-testid="env-vars-field">
       {rows.length === 0 ? (
@@ -280,6 +312,7 @@ function EnvVarsFieldBody({ rows, secrets, onAdd, onUpdate, onRemove }: EnvVarsF
             <EnvVarRowComponent
               key={idx}
               row={row}
+              baselineRow={baselineRows?.[idx]}
               index={idx}
               secrets={secrets}
               onUpdate={onUpdate}
@@ -312,8 +345,11 @@ export function useEnvVarRows(initialEnvVars?: ProfileEnvVar[]) {
 }
 
 export function EnvVarsCard(props: EnvVarsFieldProps) {
+  const isDirty =
+    props.baselineRows !== undefined &&
+    JSON.stringify(rowsToEnvVars(props.rows)) !== JSON.stringify(rowsToEnvVars(props.baselineRows));
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty} data-testid="env-vars-card">
       <CardHeader>
         <div className="flex items-center justify-between gap-3">
           <div>
@@ -333,6 +369,6 @@ export function EnvVarsCard(props: EnvVarsFieldProps) {
       <CardContent>
         <EnvVarsFieldBody {...props} />
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
diff --git a/apps/web/components/settings/profile-edit/executor-profile-baselines.ts b/apps/web/components/settings/profile-edit/executor-profile-baselines.ts
new file mode 100644
index 0000000000..28d92417a3
--- /dev/null
+++ b/apps/web/components/settings/profile-edit/executor-profile-baselines.ts
@@ -0,0 +1,56 @@
+import type { NetworkPolicyRule } from "@/lib/api/domains/settings-api";
+import type { ExecutorProfile, ProfileEnvVar } from "@/lib/types/http";
+import type { GitIdentityMode, GitIdentityState } from "./remote-credentials-card";
+
+const SPRITES_TOKEN_KEY = "SPRITES_API_TOKEN";
+
+export function deriveSpritesSecretId(envVars?: ProfileEnvVar[]): string | null {
+  const row = envVars?.find((envVar) => envVar.key === SPRITES_TOKEN_KEY && envVar.secret_id);
+  return row?.secret_id ?? null;
+}
+
+export function parseNetworkPolicyRules(config?: Record<string, string>): NetworkPolicyRule[] {
+  return parseJsonSetting(config?.sprites_network_policy_rules, []);
+}
+
+export function parseRemoteCredentials(config?: Record<string, string>): string[] {
+  return parseJsonSetting(config?.remote_credentials, []);
+}
+
+export function parseRemoteAuthSecrets(
+  config?: Record<string, string>,
+): Record<string, string | null> {
+  return parseJsonSetting(config?.remote_auth_secrets, {});
+}
+
+export function getGitIdentityBaseline(
+  profile: ExecutorProfile,
+  localGitIdentity: GitIdentityState,
+): {
+  mode: GitIdentityMode;
+  userName: string;
+  userEmail: string;
+} {
+  const storedName = profile.config?.git_user_name ?? "";
+  const storedEmail = profile.config?.git_user_email ?? "";
+  if (storedName.trim() || storedEmail.trim()) {
+    return { mode: "override", userName: storedName, userEmail: storedEmail };
+  }
+  if (localGitIdentity.detected) {
+    return {
+      mode: "local",
+      userName: localGitIdentity.userName,
+      userEmail: localGitIdentity.userEmail,
+    };
+  }
+  return { mode: "override", userName: "", userEmail: "" };
+}
+
+function parseJsonSetting<T>(raw: string | undefined, fallback: T): T {
+  if (!raw) return fallback;
+  try {
+    return JSON.parse(raw) as T;
+  } catch {
+    return fallback;
+  }
+}
diff --git a/apps/web/components/settings/profile-edit/git-identity-fields.tsx b/apps/web/components/settings/profile-edit/git-identity-fields.tsx
new file mode 100644
index 0000000000..5e3e9a2aa9
--- /dev/null
+++ b/apps/web/components/settings/profile-edit/git-identity-fields.tsx
@@ -0,0 +1,147 @@
+import { Badge } from "@kandev/ui/badge";
+import { Input } from "@kandev/ui/input";
+import { Label } from "@kandev/ui/label";
+import { RadioGroup, RadioGroupItem } from "@kandev/ui/radio-group";
+import { AccordionContent, AccordionItem, AccordionTrigger } from "@kandev/ui/accordion";
+
+export type GitIdentityMode = "local" | "override";
+export type GitIdentityState = {
+  userName: string;
+  userEmail: string;
+  detected: boolean;
+};
+
+type GitIdentityFieldsProps = {
+  mode: GitIdentityMode;
+  baselineMode: GitIdentityMode;
+  onModeChange: (mode: GitIdentityMode) => void;
+  gitUserName: string;
+  gitUserEmail: string;
+  baselineGitUserName: string;
+  baselineGitUserEmail: string;
+  onGitUserNameChange: (value: string) => void;
+  onGitUserEmailChange: (value: string) => void;
+  localGitIdentity: GitIdentityState;
+};
+
+const RADIO_LABEL =
+  "flex w-full items-start gap-3 rounded-md border p-3 text-left cursor-pointer transition-colors";
+const RADIO_ITEM = "mt-0.5 border border-muted-foreground/80 data-[state=checked]:border-primary";
+
+export function GitIdentityAccordionItem(props: GitIdentityFieldsProps) {
+  const isLocal = props.mode === "local" && props.localGitIdentity.detected;
+  const modeDirty = props.mode !== props.baselineMode;
+  const nameDirty = props.mode === "override" && props.gitUserName !== props.baselineGitUserName;
+  const emailDirty = props.mode === "override" && props.gitUserEmail !== props.baselineGitUserEmail;
+  const description = props.localGitIdentity.detected
+    ? `${props.localGitIdentity.userName} <${props.localGitIdentity.userEmail}>`
+    : "Local git user.name/user.email not detected on this machine";
+  const badgeLabel = gitIdentityBadgeLabel(props.mode, isLocal);
+
+  return (
+    <AccordionItem value="git_identity" data-settings-dirty={modeDirty || nameDirty || emailDirty}>
+      <AccordionTrigger>
+        <div className="flex flex-1 items-center gap-2">
+          <span className="text-sm font-medium">Git Identity</span>
+          <Badge
+            variant={isLocal ? "default" : "secondary"}
+            className={isLocal ? "bg-green-600 px-1.5 py-0 text-[10px]" : "px-1.5 py-0 text-[10px]"}
+          >
+            {badgeLabel}
+          </Badge>
+        </div>
+      </AccordionTrigger>
+      <AccordionContent className="h-auto">
+        <div className="space-y-3 text-sm">
+          <p className="text-xs text-muted-foreground">
+            Used by remote executors for commit author configuration.
+          </p>
+          <RadioGroup
+            value={props.mode}
+            onValueChange={(value) => props.onModeChange(value as GitIdentityMode)}
+            className="gap-2"
+            data-settings-dirty={modeDirty}
+          >
+            <IdentityModeOption
+              value="local"
+              selected={props.mode === "local"}
+              baselineSelected={props.baselineMode === "local"}
+              disabled={!props.localGitIdentity.detected}
+              title="Use local git config"
+              description={description}
+            />
+            <IdentityModeOption
+              value="override"
+              selected={props.mode === "override"}
+              baselineSelected={props.baselineMode === "override"}
+              title="Override identity"
+              description="Set a custom name and email for remote git commits."
+            />
+          </RadioGroup>
+          {props.mode === "override" && <OverrideIdentityFields {...props} />}
+        </div>
+      </AccordionContent>
+    </AccordionItem>
+  );
+}
+
+function gitIdentityBadgeLabel(mode: GitIdentityMode, isLocal: boolean): string {
+  if (isLocal) return "Auto-detect";
+  return mode === "local" ? "Not Configured" : "Custom";
+}
+
+function IdentityModeOption({
+  value,
+  selected,
+  baselineSelected,
+  disabled,
+  title,
+  description,
+}: {
+  value: GitIdentityMode;
+  selected: boolean;
+  baselineSelected: boolean;
+  disabled?: boolean;
+  title: string;
+  description: string;
+}) {
+  return (
+    <label
+      className={`${RADIO_LABEL} ${selected ? "border-primary bg-primary/5" : "border-border"}`}
+      data-settings-dirty={selected !== baselineSelected}
+    >
+      <RadioGroupItem value={value} disabled={disabled} className={RADIO_ITEM} />
+      <div className="flex flex-col gap-0.5">
+        <span className="text-sm font-medium">{title}</span>
+        <span className="text-xs text-muted-foreground">{description}</span>
+      </div>
+    </label>
+  );
+}
+
+function OverrideIdentityFields(props: GitIdentityFieldsProps) {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      <div className="space-y-1.5">
+        <Label htmlFor="remote-git-user-name">Git User Name</Label>
+        <Input
+          id="remote-git-user-name"
+          value={props.gitUserName}
+          onChange={(event) => props.onGitUserNameChange(event.target.value)}
+          placeholder="Jane Developer"
+          data-settings-dirty={props.gitUserName !== props.baselineGitUserName}
+        />
+      </div>
+      <div className="space-y-1.5">
+        <Label htmlFor="remote-git-user-email">Git User Email</Label>
+        <Input
+          id="remote-git-user-email"
+          value={props.gitUserEmail}
+          onChange={(event) => props.onGitUserEmailChange(event.target.value)}
+          placeholder="jane@example.com"
+          data-settings-dirty={props.gitUserEmail !== props.baselineGitUserEmail}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/settings/profile-edit/inline-secret-select.tsx b/apps/web/components/settings/profile-edit/inline-secret-select.tsx
index 813b0d15ed..b3c9daf565 100644
--- a/apps/web/components/settings/profile-edit/inline-secret-select.tsx
+++ b/apps/web/components/settings/profile-edit/inline-secret-select.tsx
@@ -20,6 +20,7 @@ type InlineSecretSelectProps = {
   secrets: SecretListItem[];
   label?: string;
   placeholder?: string;
+  isDirty?: boolean;
 };
 
 export function InlineSecretSelect({
@@ -28,6 +29,7 @@ export function InlineSecretSelect({
   secrets,
   label,
   placeholder = "Select a secret...",
+  isDirty = false,
 }: InlineSecretSelectProps) {
   const [creating, setCreating] = useState(false);
 
@@ -43,7 +45,7 @@ export function InlineSecretSelect({
     <div className="space-y-2">
       {label && <Label className="text-xs text-muted-foreground">{label}</Label>}
       <Select value={secretId ?? NONE_VALUE} onValueChange={handleValueChange}>
-        <SelectTrigger className="cursor-pointer">
+        <SelectTrigger className="cursor-pointer" data-settings-dirty={isDirty}>
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
         <SelectContent>
diff --git a/apps/web/components/settings/profile-edit/mcp-policy-card.tsx b/apps/web/components/settings/profile-edit/mcp-policy-card.tsx
index 842dbc63d8..a38fc05ad1 100644
--- a/apps/web/components/settings/profile-edit/mcp-policy-card.tsx
+++ b/apps/web/components/settings/profile-edit/mcp-policy-card.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@kandev/ui/card";
+import { CardContent, CardHeader, CardTitle, CardDescription } from "@kandev/ui/card";
 import { Label } from "@kandev/ui/label";
 import { Textarea } from "@kandev/ui/textarea";
+import { SettingsCard } from "@/components/settings/settings-card";
 
 function parseMcpPolicyJson(currentPolicy: string | undefined): Record<string, unknown> {
   try {
@@ -42,11 +43,18 @@ export function validateMcpPolicy(value: string | undefined): string | null {
 
 type McpPolicyCardProps = {
   mcpPolicy: string;
+  baselinePolicy?: string;
   mcpPolicyError: string | null;
   onPolicyChange: (value: string) => void;
 };
 
-export function McpPolicyCard({ mcpPolicy, mcpPolicyError, onPolicyChange }: McpPolicyCardProps) {
+export function McpPolicyCard({
+  mcpPolicy,
+  baselinePolicy,
+  mcpPolicyError,
+  onPolicyChange,
+}: McpPolicyCardProps) {
+  const isDirty = baselinePolicy !== undefined && mcpPolicy !== baselinePolicy;
   const applyPreset = (updater: (parsed: Record<string, unknown>) => Record<string, unknown>) => {
     const parsed = parseMcpPolicyJson(mcpPolicy);
     const next = updater(parsed);
@@ -54,7 +62,7 @@ export function McpPolicyCard({ mcpPolicy, mcpPolicyError, onPolicyChange }: Mcp
   };
 
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty}>
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           MCP Policy
@@ -72,6 +80,7 @@ export function McpPolicyCard({ mcpPolicy, mcpPolicyError, onPolicyChange }: Mcp
           onChange={(event) => onPolicyChange(event.target.value)}
           placeholder='{"allow_stdio":true,"allow_http":true}'
           rows={8}
+          data-settings-dirty={isDirty}
         />
         {mcpPolicyError && <p className="text-xs text-destructive">{mcpPolicyError}</p>}
         <div className="flex flex-wrap items-center gap-2">
@@ -122,6 +131,6 @@ export function McpPolicyCard({ mcpPolicy, mcpPolicyError, onPolicyChange }: Mcp
           />
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
diff --git a/apps/web/components/settings/profile-edit/profile-details-card.tsx b/apps/web/components/settings/profile-edit/profile-details-card.tsx
index 0bd9b9c473..61a98af2cd 100644
--- a/apps/web/components/settings/profile-edit/profile-details-card.tsx
+++ b/apps/web/components/settings/profile-edit/profile-details-card.tsx
@@ -1,26 +1,34 @@
 "use client";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
+import { CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
 import { Label } from "@kandev/ui/label";
+import { SettingsCard } from "@/components/settings/settings-card";
 
 type ProfileDetailsCardProps = {
   name: string;
+  baselineName?: string;
   onNameChange: (v: string) => void;
 };
 
-export function ProfileDetailsCard({ name, onNameChange }: ProfileDetailsCardProps) {
+export function ProfileDetailsCard({ name, baselineName, onNameChange }: ProfileDetailsCardProps) {
+  const isDirty = baselineName !== undefined && name.trim() !== baselineName.trim();
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty}>
       <CardHeader>
         <CardTitle>Profile Details</CardTitle>
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="space-y-2">
           <Label htmlFor="profile-name">Name</Label>
-          <Input id="profile-name" value={name} onChange={(e) => onNameChange(e.target.value)} />
+          <Input
+            id="profile-name"
+            value={name}
+            onChange={(e) => onNameChange(e.target.value)}
+            data-settings-dirty={isDirty}
+          />
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
diff --git a/apps/web/components/settings/profile-edit/profile-dirty-fields.test.tsx b/apps/web/components/settings/profile-edit/profile-dirty-fields.test.tsx
new file mode 100644
index 0000000000..68c1adb3a1
--- /dev/null
+++ b/apps/web/components/settings/profile-edit/profile-dirty-fields.test.tsx
@@ -0,0 +1,50 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { McpPolicyCard } from "./mcp-policy-card";
+import { ProfileDetailsCard } from "./profile-details-card";
+
+afterEach(cleanup);
+const MCP_POLICY_LABEL = "MCP policy JSON";
+const DIRTY_ATTRIBUTE = "data-settings-dirty";
+
+describe("executor profile dirty fields", () => {
+  it("marks a changed profile name and its owning card dirty", () => {
+    render(<ProfileDetailsCard name="Edited" baselineName="Saved" onNameChange={vi.fn()} />);
+
+    const input = screen.getByLabelText("Name");
+    expect(input.getAttribute(DIRTY_ATTRIBUTE)).toBe("true");
+    expect(input.closest('[data-slot="card"]')?.getAttribute(DIRTY_ATTRIBUTE)).toBe("true");
+  });
+
+  it("keeps the MCP policy clean until its value changes", () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <McpPolicyCard
+        mcpPolicy='{"allow_http":true}'
+        baselinePolicy='{"allow_http":true}'
+        mcpPolicyError={null}
+        onPolicyChange={onChange}
+      />,
+    );
+
+    expect(screen.getByLabelText(MCP_POLICY_LABEL).getAttribute(DIRTY_ATTRIBUTE)).toBe("false");
+
+    rerender(
+      <McpPolicyCard
+        mcpPolicy='{"allow_http":false}'
+        baselinePolicy='{"allow_http":true}'
+        mcpPolicyError={null}
+        onPolicyChange={onChange}
+      />,
+    );
+    expect(screen.getByLabelText(MCP_POLICY_LABEL).getAttribute(DIRTY_ATTRIBUTE)).toBe("true");
+  });
+
+  it("continues to report field changes through the supplied callback", () => {
+    const onNameChange = vi.fn();
+    render(<ProfileDetailsCard name="Saved" baselineName="Saved" onNameChange={onNameChange} />);
+
+    fireEvent.change(screen.getByLabelText("Name"), { target: { value: "Edited" } });
+    expect(onNameChange).toHaveBeenCalledWith("Edited");
+  });
+});
diff --git a/apps/web/components/settings/profile-edit/profile-edit-page-chrome.tsx b/apps/web/components/settings/profile-edit/profile-edit-page-chrome.tsx
index 6e0f0ba4c9..fa275d4cdf 100644
--- a/apps/web/components/settings/profile-edit/profile-edit-page-chrome.tsx
+++ b/apps/web/components/settings/profile-edit/profile-edit-page-chrome.tsx
@@ -18,19 +18,12 @@ import {
   DialogTitle,
 } from "@kandev/ui/dialog";
 import { EXECUTOR_ICON_MAP, getExecutorLabel } from "@/lib/executor-icons";
-import { RequestIndicator } from "@/components/request-indicator";
 import type { Executor, ExecutorProfile } from "@/lib/types/http";
 
 const EXECUTORS_ROUTE = "/settings/executors";
 const DefaultIcon = EXECUTOR_ICON_MAP.local;
 export type SaveStatus = "idle" | "loading" | "success" | "error";
 
-export function getSaveButtonLabel(status: SaveStatus) {
-  if (status === "success") return "Saved";
-  if (status === "loading") return "Saving";
-  return "Save Changes";
-}
-
 export function upsertExecutorProfile(
   executors: Executor[],
   executor: Executor,
@@ -100,42 +93,21 @@ export function ProfileHeader({
   );
 }
 
-export function ProfileFormActions({
-  saveStatus,
-  saveDisabled,
-  onSave,
-  onDelete,
-}: {
-  saveStatus: SaveStatus;
-  saveDisabled: boolean;
-  onSave: () => void;
-  onDelete: () => void;
-}) {
+export function ProfileFormActions({ onDelete }: { onDelete: () => void }) {
   const router = useRouter();
-  const saveLabel = getSaveButtonLabel(saveStatus);
   return (
     <div className="flex items-center justify-between">
       <Button variant="destructive" size="sm" onClick={onDelete} className="cursor-pointer">
         <IconTrash className="mr-1 h-4 w-4" />
         Delete Profile
       </Button>
-      <div className="flex items-center gap-2">
-        <Button
-          variant="outline"
-          onClick={() => router.push(EXECUTORS_ROUTE)}
-          className="cursor-pointer"
-        >
-          Cancel
-        </Button>
-        <Button onClick={onSave} disabled={saveDisabled} className="min-w-36 cursor-pointer">
-          {saveLabel}
-          {saveStatus !== "idle" && (
-            <span className="ml-2">
-              <RequestIndicator status={saveStatus} />
-            </span>
-          )}
-        </Button>
-      </div>
+      <Button
+        variant="outline"
+        onClick={() => router.push(EXECUTORS_ROUTE)}
+        className="cursor-pointer"
+      >
+        Cancel
+      </Button>
     </div>
   );
 }
diff --git a/apps/web/components/settings/profile-edit/profile-env-vars-section.tsx b/apps/web/components/settings/profile-edit/profile-env-vars-section.tsx
index 2757e86c5b..6c11acd433 100644
--- a/apps/web/components/settings/profile-edit/profile-env-vars-section.tsx
+++ b/apps/web/components/settings/profile-edit/profile-env-vars-section.tsx
@@ -24,11 +24,17 @@ export function areEnvVarsEqual(a?: ProfileEnvVar[], b?: ProfileEnvVar[]): boole
 
 type ProfileEnvVarsEditorProps = {
   envVars?: ProfileEnvVar[];
+  baselineEnvVars?: ProfileEnvVar[];
   secrets: { id: string; name: string }[];
   onChange: (envVars: ProfileEnvVar[]) => void;
 };
 
-export function ProfileEnvVarsEditor({ envVars, secrets, onChange }: ProfileEnvVarsEditorProps) {
+export function ProfileEnvVarsEditor({
+  envVars,
+  baselineEnvVars,
+  secrets,
+  onChange,
+}: ProfileEnvVarsEditorProps) {
   // `synced` is what we've acknowledged from the parent (either via the prop
   // or our own last emission). When the prop diverges from it we re-seed
   // local row state; that's how external prop resets propagate without
@@ -77,6 +83,7 @@ export function ProfileEnvVarsEditor({ envVars, secrets, onChange }: ProfileEnvV
   return (
     <EnvVarsCard
       rows={rows}
+      baselineRows={baselineEnvVars ? envVarsToRows(baselineEnvVars) : undefined}
       secrets={secrets}
       onAdd={handleAdd}
       onUpdate={handleUpdate}
@@ -87,15 +94,27 @@ export function ProfileEnvVarsEditor({ envVars, secrets, onChange }: ProfileEnvV
 
 type ProfileEnvVarsSectionProps = {
   envVars?: ProfileEnvVar[];
+  baselineEnvVars?: ProfileEnvVar[];
   onChange: (patch: Partial<AgentProfile>) => void;
 };
 
-export function ProfileEnvVarsSection({ envVars, onChange }: ProfileEnvVarsSectionProps) {
+export function ProfileEnvVarsSection({
+  envVars,
+  baselineEnvVars,
+  onChange,
+}: ProfileEnvVarsSectionProps) {
   const { items: secrets } = useSecrets();
   const handleChange = useCallback(
     (next: ProfileEnvVar[]) => onChange({ envVars: next }),
     [onChange],
   );
 
-  return <ProfileEnvVarsEditor envVars={envVars} secrets={secrets} onChange={handleChange} />;
+  return (
+    <ProfileEnvVarsEditor
+      envVars={envVars}
+      baselineEnvVars={baselineEnvVars}
+      secrets={secrets}
+      onChange={handleChange}
+    />
+  );
 }
diff --git a/apps/web/components/settings/profile-edit/profile-runtime-sections.tsx b/apps/web/components/settings/profile-edit/profile-runtime-sections.tsx
index d13573197d..94884463e4 100644
--- a/apps/web/components/settings/profile-edit/profile-runtime-sections.tsx
+++ b/apps/web/components/settings/profile-edit/profile-runtime-sections.tsx
@@ -34,8 +34,10 @@ export function DockerSections({
     <>
       <DockerfileBuildCard
         dockerfile={dockerfile}
+        baselineDockerfile={profile.config?.dockerfile ?? ""}
         onDockerfileChange={onDockerfileChange}
         imageTag={imageTag}
+        baselineImageTag={profile.config?.image_tag ?? ""}
         onImageTagChange={onImageTagChange}
       />
       <DockerContainersCard profileId={profile.id} />
@@ -48,15 +50,21 @@ type SpritesSectionsProps = {
   isSprites: boolean;
   secretId: string | null;
   networkRules: NetworkPolicyRule[];
+  baselineNetworkRules?: NetworkPolicyRule[];
   onNetworkRulesChange: (rules: NetworkPolicyRule[]) => void;
   remoteCredentials: string[];
+  baselineRemoteCredentials?: string[];
   onRemoteCredentialsChange: (ids: string[]) => void;
   agentEnvVars: Record<string, string | null>;
+  baselineAgentEnvVars?: Record<string, string | null>;
   onAgentEnvVarChange: (agentId: string, secretId: string | null) => void;
   gitIdentityMode: GitIdentityMode;
+  baselineGitIdentityMode?: GitIdentityMode;
   onGitIdentityModeChange: (mode: GitIdentityMode) => void;
   gitUserName: string;
   gitUserEmail: string;
+  baselineGitUserName?: string;
+  baselineGitUserEmail?: string;
   onGitUserNameChange: (value: string) => void;
   onGitUserEmailChange: (value: string) => void;
   localGitIdentity: GitIdentityState;
@@ -68,15 +76,21 @@ export function SpritesSections({
   isSprites,
   secretId,
   networkRules,
+  baselineNetworkRules,
   onNetworkRulesChange,
   remoteCredentials,
+  baselineRemoteCredentials,
   onRemoteCredentialsChange,
   agentEnvVars,
+  baselineAgentEnvVars,
   onAgentEnvVarChange,
   gitIdentityMode,
+  baselineGitIdentityMode,
   onGitIdentityModeChange,
   gitUserName,
   gitUserEmail,
+  baselineGitUserName,
+  baselineGitUserEmail,
   onGitUserNameChange,
   onGitUserEmailChange,
   localGitIdentity,
@@ -88,20 +102,29 @@ export function SpritesSections({
       <RemoteCredentialsCard
         isRemote={isRemote}
         selectedIds={remoteCredentials}
+        baselineSelectedIds={baselineRemoteCredentials}
         onChange={onRemoteCredentialsChange}
         agentEnvVars={agentEnvVars}
+        baselineAgentEnvVars={baselineAgentEnvVars}
         onAgentEnvVarChange={onAgentEnvVarChange}
         secrets={secrets}
         gitIdentityMode={gitIdentityMode}
+        baselineGitIdentityMode={baselineGitIdentityMode}
         onGitIdentityModeChange={onGitIdentityModeChange}
         gitUserName={gitUserName}
         gitUserEmail={gitUserEmail}
+        baselineGitUserName={baselineGitUserName}
+        baselineGitUserEmail={baselineGitUserEmail}
         onGitUserNameChange={onGitUserNameChange}
         onGitUserEmailChange={onGitUserEmailChange}
         localGitIdentity={localGitIdentity}
       />
       {isSprites && (
-        <NetworkPoliciesCard rules={networkRules} onRulesChange={onNetworkRulesChange} />
+        <NetworkPoliciesCard
+          rules={networkRules}
+          baselineRules={baselineNetworkRules}
+          onRulesChange={onNetworkRulesChange}
+        />
       )}
     </>
   );
diff --git a/apps/web/components/settings/profile-edit/remote-credentials-card.test.tsx b/apps/web/components/settings/profile-edit/remote-credentials-card.test.tsx
index 04549207f1..b545590b4a 100644
--- a/apps/web/components/settings/profile-edit/remote-credentials-card.test.tsx
+++ b/apps/web/components/settings/profile-edit/remote-credentials-card.test.tsx
@@ -9,6 +9,7 @@ vi.mock("@/lib/api/domains/settings-api", () => ({
 }));
 
 const codexFileMethodId = "agent:codex-acp:files:0";
+const copyAuthFilesLabel = "Copy auth files";
 
 function renderRemoteCredentialsCard(onChange = vi.fn()) {
   render(<RemoteCredentialsHarness onChange={onChange} />);
@@ -48,7 +49,7 @@ beforeEach(() => {
           {
             method_id: codexFileMethodId,
             type: "files",
-            label: "Copy auth files",
+            label: copyAuthFilesLabel,
             source_files: [".codex/auth.json", ".codex/config.toml"],
             has_local_files: false,
           },
@@ -90,15 +91,33 @@ describe("RemoteCredentialsCard", () => {
     renderRemoteCredentialsCard(onChange);
 
     fireEvent.click(await screen.findByText("Codex"));
-    const fileOption = screen.getByRole("radio", { name: "Copy auth files" });
+    const fileOption = screen.getByRole("radio", { name: copyAuthFilesLabel });
     expect(fileOption.getAttribute("aria-checked")).toBe("false");
 
     fireEvent.click(fileOption);
 
     expect(onChange).toHaveBeenCalledWith([codexFileMethodId]);
     await waitFor(() => {
-      const selectedOption = screen.getByRole("radio", { name: "Copy auth files" });
+      const selectedOption = screen.getByRole("radio", { name: copyAuthFilesLabel });
       expect(selectedOption.getAttribute("aria-checked")).toBe("true");
     });
   });
+
+  it("marks the selected credential and owning card dirty", async () => {
+    renderRemoteCredentialsCard();
+
+    fireEvent.click(await screen.findByText("Codex"));
+    const fileOption = screen.getByRole("radio", { name: copyAuthFilesLabel });
+    fireEvent.click(fileOption);
+
+    await waitFor(() => {
+      expect(fileOption.getAttribute("data-settings-dirty")).toBe("true");
+      expect(
+        screen
+          .getByText("Remote Credentials")
+          .closest("[data-settings-dirty]")
+          ?.getAttribute("data-settings-dirty"),
+      ).toBe("true");
+    });
+  });
 });
diff --git a/apps/web/components/settings/profile-edit/remote-credentials-card.tsx b/apps/web/components/settings/profile-edit/remote-credentials-card.tsx
index 8e0bc745d2..9d49dbe190 100644
--- a/apps/web/components/settings/profile-edit/remote-credentials-card.tsx
+++ b/apps/web/components/settings/profile-edit/remote-credentials-card.tsx
@@ -4,13 +4,16 @@ import { useEffect, useState, type ReactNode } from "react";
 import ReactMarkdown from "react-markdown";
 import { IconLoader2 } from "@tabler/icons-react";
 import { Badge } from "@kandev/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@kandev/ui/card";
-import { Input } from "@kandev/ui/input";
-import { Label } from "@kandev/ui/label";
-import { RadioGroup, RadioGroupItem } from "@kandev/ui/radio-group";
+import { CardContent, CardHeader, CardTitle, CardDescription } from "@kandev/ui/card";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@kandev/ui/accordion";
 import { AgentLogo } from "@/components/agent-logo";
 import { InlineSecretSelect } from "@/components/settings/profile-edit/inline-secret-select";
+import { SettingsCard } from "@/components/settings/settings-card";
+import {
+  GitIdentityAccordionItem,
+  type GitIdentityMode,
+  type GitIdentityState,
+} from "./git-identity-fields";
 import {
   listRemoteCredentials,
   type RemoteAuthSpec,
@@ -19,33 +22,31 @@ import {
 import type { SecretListItem } from "@/lib/types/http-secrets";
 
 type AuthChoice = "files" | "env" | "gh_cli_token" | "none";
-export type GitIdentityMode = "local" | "override";
-export type GitIdentityState = {
-  userName: string;
-  userEmail: string;
-  detected: boolean;
-};
+export type { GitIdentityMode, GitIdentityState } from "./git-identity-fields";
 
 const RADIO_LABEL_BASE =
   "flex w-full items-start gap-3 rounded-md border p-3 text-left cursor-pointer transition-colors";
 const SELECTED_BORDER = "border-primary bg-primary/5";
 const DEFAULT_BORDER = "border-border";
-const RADIO_ITEM_CLASS =
-  "mt-0.5 border border-muted-foreground/80 data-[state=checked]:border-primary";
 const OPTION_DOT_BASE =
   "mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border";
 
 type RemoteCredentialsCardProps = {
   isRemote: boolean;
   selectedIds: string[];
+  baselineSelectedIds?: string[];
   onChange: (ids: string[]) => void;
   agentEnvVars: Record<string, string | null>;
+  baselineAgentEnvVars?: Record<string, string | null>;
   onAgentEnvVarChange: (methodId: string, secretId: string | null) => void;
   secrets: SecretListItem[];
   gitIdentityMode: GitIdentityMode;
+  baselineGitIdentityMode?: GitIdentityMode;
   onGitIdentityModeChange: (mode: GitIdentityMode) => void;
   gitUserName: string;
   gitUserEmail: string;
+  baselineGitUserName?: string;
+  baselineGitUserEmail?: string;
   onGitUserNameChange: (value: string) => void;
   onGitUserEmailChange: (value: string) => void;
   localGitIdentity: GitIdentityState;
@@ -54,14 +55,19 @@ type RemoteCredentialsCardProps = {
 export function RemoteCredentialsCard({
   isRemote,
   selectedIds,
+  baselineSelectedIds = [],
   onChange,
   agentEnvVars,
+  baselineAgentEnvVars = {},
   onAgentEnvVarChange,
   secrets,
   gitIdentityMode,
+  baselineGitIdentityMode = "override",
   onGitIdentityModeChange,
   gitUserName,
   gitUserEmail,
+  baselineGitUserName = "",
+  baselineGitUserEmail = "",
   onGitUserNameChange,
   onGitUserEmailChange,
   localGitIdentity,
@@ -77,25 +83,21 @@ export function RemoteCredentialsCard({
   }, []);
 
   const selectedSet = new Set(selectedIds);
+  const baselineSelectedSet = new Set(baselineSelectedIds);
+  const credentialsDirty = !sameStringSet(selectedSet, baselineSelectedSet);
+  const agentEnvVarsDirty = JSON.stringify(agentEnvVars) !== JSON.stringify(baselineAgentEnvVars);
+  const gitIdentityDirty =
+    gitIdentityMode !== baselineGitIdentityMode ||
+    (gitIdentityMode === "override" &&
+      (gitUserName !== baselineGitUserName || gitUserEmail !== baselineGitUserEmail));
+  const isDirty = credentialsDirty || agentEnvVarsDirty || gitIdentityDirty;
 
   if (loading) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle>Remote Credentials</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <IconLoader2 className="h-4 w-4 animate-spin" />
-            Loading...
-          </div>
-        </CardContent>
-      </Card>
-    );
+    return <RemoteCredentialsLoading isDirty={isDirty} />;
   }
 
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty}>
       <CardHeader>
         <CardTitle>Remote Credentials</CardTitle>
         <CardDescription>
@@ -108,9 +110,12 @@ export function RemoteCredentialsCard({
             {isRemote && (
               <GitIdentityAccordionItem
                 mode={gitIdentityMode}
+                baselineMode={baselineGitIdentityMode}
                 onModeChange={onGitIdentityModeChange}
                 gitUserName={gitUserName}
                 gitUserEmail={gitUserEmail}
+                baselineGitUserName={baselineGitUserName}
+                baselineGitUserEmail={baselineGitUserEmail}
                 onGitUserNameChange={onGitUserNameChange}
                 onGitUserEmailChange={onGitUserEmailChange}
                 localGitIdentity={localGitIdentity}
@@ -124,8 +129,12 @@ export function RemoteCredentialsCard({
                   key={spec.id}
                   spec={spec}
                   selectedIds={selectedSet}
+                  baselineSelectedIds={baselineSelectedSet}
                   onCredentialsChange={onChange}
                   envSecretId={envMethod ? (agentEnvVars[envMethod.method_id] ?? null) : null}
+                  baselineEnvSecretId={
+                    envMethod ? (baselineAgentEnvVars[envMethod.method_id] ?? null) : null
+                  }
                   onMethodSecretChange={onAgentEnvVarChange}
                   secrets={secrets}
                 />
@@ -136,140 +145,34 @@ export function RemoteCredentialsCard({
           <p className="text-sm text-muted-foreground">No transferable credentials found.</p>
         )}
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
+function RemoteCredentialsLoading({ isDirty }: { isDirty: boolean }) {
+  return (
+    <SettingsCard isDirty={isDirty}>
+      <CardHeader>
+        <CardTitle>Remote Credentials</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <IconLoader2 className="h-4 w-4 animate-spin" />
+          Loading...
+        </div>
+      </CardContent>
+    </SettingsCard>
+  );
+}
+
+function sameStringSet(left: Set<string>, right: Set<string>): boolean {
+  return left.size === right.size && [...left].every((value) => right.has(value));
+}
+
 function getSpecMethods(spec: RemoteAuthSpec): RemoteAuthMethod[] {
   return Array.isArray(spec.methods) ? spec.methods : [];
 }
 
-function GitIdentityAccordionItem({
-  mode,
-  onModeChange,
-  gitUserName,
-  gitUserEmail,
-  onGitUserNameChange,
-  onGitUserEmailChange,
-  localGitIdentity,
-}: {
-  mode: GitIdentityMode;
-  onModeChange: (mode: GitIdentityMode) => void;
-  gitUserName: string;
-  gitUserEmail: string;
-  onGitUserNameChange: (value: string) => void;
-  onGitUserEmailChange: (value: string) => void;
-  localGitIdentity: GitIdentityState;
-}) {
-  const isLocalAutoDetected = mode === "local" && localGitIdentity.detected;
-  let badgeLabel = "Custom";
-  if (isLocalAutoDetected) {
-    badgeLabel = "Auto-detect";
-  } else if (mode === "local") {
-    badgeLabel = "Not Configured";
-  }
-  const localIdentityDescription = localGitIdentity.detected
-    ? `${localGitIdentity.userName} <${localGitIdentity.userEmail}>`
-    : "Local git user.name/user.email not detected on this machine";
-  const badgeClassName = isLocalAutoDetected
-    ? "bg-green-600 text-[10px] px-1.5 py-0"
-    : "text-[10px] px-1.5 py-0";
-  const badgeVariant = isLocalAutoDetected ? "default" : "secondary";
-
-  return (
-    <AccordionItem value="git_identity">
-      <AccordionTrigger>
-        <div className="flex items-center gap-2 flex-1">
-          <span className="font-medium text-sm">Git Identity</span>
-          <Badge variant={badgeVariant} className={badgeClassName}>
-            {badgeLabel}
-          </Badge>
-        </div>
-      </AccordionTrigger>
-      <AccordionContent className="h-auto">
-        <div className="space-y-3 text-sm">
-          <p className="text-xs text-muted-foreground">
-            Used by remote executors for commit author configuration.
-          </p>
-          <RadioGroup
-            value={mode}
-            onValueChange={(value) => onModeChange(value as GitIdentityMode)}
-            className="gap-2"
-          >
-            <label
-              className={`${RADIO_LABEL_BASE} ${mode === "local" ? SELECTED_BORDER : DEFAULT_BORDER}`}
-            >
-              <RadioGroupItem
-                value="local"
-                disabled={!localGitIdentity.detected}
-                className={RADIO_ITEM_CLASS}
-              />
-              <div className="flex flex-col gap-0.5">
-                <span className="text-sm font-medium">Use local git config</span>
-                <span className="text-xs text-muted-foreground">{localIdentityDescription}</span>
-              </div>
-            </label>
-            <label
-              className={`${RADIO_LABEL_BASE} ${mode === "override" ? SELECTED_BORDER : DEFAULT_BORDER}`}
-            >
-              <RadioGroupItem value="override" className={RADIO_ITEM_CLASS} />
-              <div className="flex flex-col gap-0.5">
-                <span className="text-sm font-medium">Override identity</span>
-                <span className="text-xs text-muted-foreground">
-                  Set a custom name and email for remote git commits.
-                </span>
-              </div>
-            </label>
-          </RadioGroup>
-          {mode === "override" && (
-            <OverrideIdentityFields
-              gitUserName={gitUserName}
-              gitUserEmail={gitUserEmail}
-              onGitUserNameChange={onGitUserNameChange}
-              onGitUserEmailChange={onGitUserEmailChange}
-            />
-          )}
-        </div>
-      </AccordionContent>
-    </AccordionItem>
-  );
-}
-
-function OverrideIdentityFields({
-  gitUserName,
-  gitUserEmail,
-  onGitUserNameChange,
-  onGitUserEmailChange,
-}: {
-  gitUserName: string;
-  gitUserEmail: string;
-  onGitUserNameChange: (value: string) => void;
-  onGitUserEmailChange: (value: string) => void;
-}) {
-  return (
-    <div className="grid gap-3 sm:grid-cols-2">
-      <div className="space-y-1.5">
-        <Label htmlFor="remote-git-user-name">Git User Name</Label>
-        <Input
-          id="remote-git-user-name"
-          value={gitUserName}
-          onChange={(e) => onGitUserNameChange(e.target.value)}
-          placeholder="Jane Developer"
-        />
-      </div>
-      <div className="space-y-1.5">
-        <Label htmlFor="remote-git-user-email">Git User Email</Label>
-        <Input
-          id="remote-git-user-email"
-          value={gitUserEmail}
-          onChange={(e) => onGitUserEmailChange(e.target.value)}
-          placeholder="jane@example.com"
-        />
-      </div>
-    </div>
-  );
-}
-
 type InitialChoiceOpts = {
   fileMethod: RemoteAuthMethod | undefined;
   envMethod: RemoteAuthMethod | undefined;
@@ -299,15 +202,19 @@ const AGENT_LOGO_IDS = new Set(["claude_code", "auggie", "codex", "gemini", "cop
 function AuthSection({
   spec,
   selectedIds,
+  baselineSelectedIds,
   onCredentialsChange,
   envSecretId,
+  baselineEnvSecretId,
   onMethodSecretChange,
   secrets,
 }: {
   spec: RemoteAuthSpec;
   selectedIds: Set<string>;
+  baselineSelectedIds: Set<string>;
   onCredentialsChange: (ids: string[]) => void;
   envSecretId: string | null;
+  baselineEnvSecretId: string | null;
   onMethodSecretChange: (methodId: string, secretId: string | null) => void;
   secrets: SecretListItem[];
 }) {
@@ -328,6 +235,14 @@ function AuthSection({
     selectedIds,
     envSecretId,
   });
+  const baselineChoice = initialChoice({
+    fileMethod,
+    envMethod,
+    ghTokenMethod,
+    selectedIds: baselineSelectedIds,
+    envSecretId: baselineEnvSecretId,
+  });
+  const isDirty = choice !== baselineChoice || envSecretId !== baselineEnvSecretId;
 
   const handleChoice = (value: AuthChoice) => {
     const nextSelectedIds = new Set(selectedIds);
@@ -352,7 +267,7 @@ function AuthSection({
   const showLogo = AGENT_LOGO_IDS.has(spec.id);
 
   return (
-    <AccordionItem value={spec.id}>
+    <AccordionItem value={spec.id} data-settings-dirty={isDirty}>
       <AccordionTrigger>
         <div className="flex items-center gap-2 flex-1">
           {showLogo && <AgentLogo agentName={spec.id} size={18} />}
@@ -366,17 +281,20 @@ function AuthSection({
             <EnvOnlySection
               envMethod={envMethod}
               secretId={envSecretId}
+              baselineSecretId={baselineEnvSecretId}
               onSecretIdChange={(sid) => onMethodSecretChange(envMethod.method_id, sid)}
               secrets={secrets}
             />
           ) : (
             <AuthChoiceRadio
               choice={choice}
+              baselineChoice={baselineChoice}
               onChoiceChange={handleChoice}
               fileMethod={fileMethod}
               envMethod={envMethod}
               ghTokenMethod={ghTokenMethod}
               secretId={envSecretId}
+              baselineSecretId={baselineEnvSecretId}
               onSecretIdChange={(sid) => {
                 if (envMethod) onMethodSecretChange(envMethod.method_id, sid);
               }}
@@ -392,11 +310,13 @@ function AuthSection({
 function EnvOnlySection({
   envMethod,
   secretId,
+  baselineSecretId,
   onSecretIdChange,
   secrets,
 }: {
   envMethod: RemoteAuthMethod;
   secretId: string | null;
+  baselineSecretId: string | null;
   onSecretIdChange: (id: string | null) => void;
   secrets: SecretListItem[];
 }) {
@@ -413,6 +333,7 @@ function EnvOnlySection({
         secrets={secrets}
         label={envMethod.env_var}
         placeholder="Select or create a secret..."
+        isDirty={secretId !== baselineSecretId}
       />
     </>
   );
@@ -421,15 +342,18 @@ function EnvOnlySection({
 function GhTokenOption({
   method,
   isSelected,
+  isDirty,
   onSelect,
 }: {
   method: RemoteAuthMethod;
   isSelected: boolean;
+  isDirty: boolean;
   onSelect: () => void;
 }) {
   return (
     <AuthOptionButton
       selected={isSelected}
+      isDirty={isDirty}
       onSelect={onSelect}
       label={method.label ?? "Copy token from local CLI"}
     >
@@ -448,11 +372,13 @@ function GhTokenOption({
 function FileOption({
   method,
   isSelected,
+  isDirty,
   filesAvailable,
   onSelect,
 }: {
   method: RemoteAuthMethod;
   isSelected: boolean;
+  isDirty: boolean;
   filesAvailable: boolean;
   onSelect: () => void;
 }) {
@@ -460,6 +386,7 @@ function FileOption({
   return (
     <AuthOptionButton
       selected={isSelected}
+      isDirty={isDirty}
       onSelect={onSelect}
       label={method.label ?? "Copy auth files"}
     >
@@ -477,21 +404,30 @@ function FileOption({
 function EnvOption({
   method,
   isSelected,
+  isDirty,
   secretId,
+  baselineSecretId,
   onSecretIdChange,
   secrets,
   onSelect,
 }: {
   method: RemoteAuthMethod;
   isSelected: boolean;
+  isDirty: boolean;
   secretId: string | null;
+  baselineSecretId: string | null;
   onSecretIdChange: (id: string | null) => void;
   secrets: SecretListItem[];
   onSelect: () => void;
 }) {
   return (
     <div>
-      <AuthOptionButton selected={isSelected} onSelect={onSelect} label="Provide secret">
+      <AuthOptionButton
+        selected={isSelected}
+        isDirty={isDirty}
+        onSelect={onSelect}
+        label="Provide secret"
+      >
         <div className="flex flex-col gap-0.5">
           <span className="text-sm font-medium">Provide secret</span>
           <span className="text-xs text-muted-foreground">
@@ -512,6 +448,7 @@ function EnvOption({
             onSecretIdChange={onSecretIdChange}
             secrets={secrets}
             placeholder="Select or create a secret..."
+            isDirty={secretId !== baselineSecretId}
           />
         </div>
       )}
@@ -521,20 +458,24 @@ function EnvOption({
 
 function AuthChoiceRadio({
   choice,
+  baselineChoice,
   onChoiceChange,
   fileMethod,
   envMethod,
   ghTokenMethod,
   secretId,
+  baselineSecretId,
   onSecretIdChange,
   secrets,
 }: {
   choice: AuthChoice;
+  baselineChoice: AuthChoice;
   onChoiceChange: (v: AuthChoice) => void;
   fileMethod?: RemoteAuthMethod;
   envMethod?: RemoteAuthMethod;
   ghTokenMethod?: RemoteAuthMethod;
   secretId: string | null;
+  baselineSecretId: string | null;
   onSecretIdChange: (id: string | null) => void;
   secrets: SecretListItem[];
 }) {
@@ -544,6 +485,7 @@ function AuthChoiceRadio({
         <GhTokenOption
           method={ghTokenMethod}
           isSelected={choice === "gh_cli_token"}
+          isDirty={(choice === "gh_cli_token") !== (baselineChoice === "gh_cli_token")}
           onSelect={() => onChoiceChange("gh_cli_token")}
         />
       )}
@@ -551,6 +493,7 @@ function AuthChoiceRadio({
         <FileOption
           method={fileMethod}
           isSelected={choice === "files"}
+          isDirty={(choice === "files") !== (baselineChoice === "files")}
           filesAvailable={fileMethod.has_local_files ?? false}
           onSelect={() => onChoiceChange("files")}
         />
@@ -559,7 +502,9 @@ function AuthChoiceRadio({
         <EnvOption
           method={envMethod}
           isSelected={choice === "env"}
+          isDirty={(choice === "env") !== (baselineChoice === "env")}
           secretId={secretId}
+          baselineSecretId={baselineSecretId}
           onSecretIdChange={onSecretIdChange}
           secrets={secrets}
           onSelect={() => onChoiceChange("env")}
@@ -571,11 +516,13 @@ function AuthChoiceRadio({
 
 function AuthOptionButton({
   selected,
+  isDirty,
   onSelect,
   label,
   children,
 }: {
   selected: boolean;
+  isDirty: boolean;
   onSelect: () => void;
   label: string;
   children: ReactNode;
@@ -587,6 +534,7 @@ function AuthOptionButton({
       aria-checked={selected}
       aria-label={label}
       onClick={onSelect}
+      data-settings-dirty={isDirty}
       className={`${RADIO_LABEL_BASE} ${selected ? SELECTED_BORDER : DEFAULT_BORDER}`}
     >
       <span
diff --git a/apps/web/components/settings/profile-edit/script-card.tsx b/apps/web/components/settings/profile-edit/script-card.tsx
index 96c651c26c..d738385d54 100644
--- a/apps/web/components/settings/profile-edit/script-card.tsx
+++ b/apps/web/components/settings/profile-edit/script-card.tsx
@@ -1,14 +1,16 @@
 "use client";
 
 import { useRef, useEffect, useState } from "react";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@kandev/ui/card";
+import { CardContent, CardHeader, CardTitle, CardDescription } from "@kandev/ui/card";
 import { ScriptEditor } from "@/components/settings/profile-edit/script-editor";
+import { SettingsCard } from "@/components/settings/settings-card";
 import type { ScriptPlaceholder } from "@/lib/api/domains/settings-api";
 
 type ScriptCardProps = {
   title: string;
   description: string;
   value: string;
+  baselineValue?: string;
   onChange: (v: string) => void;
   height?: string;
   placeholders: ScriptPlaceholder[];
@@ -19,6 +21,7 @@ export function ScriptCard({
   title,
   description,
   value,
+  baselineValue,
   onChange,
   height = "300px",
   placeholders,
@@ -40,8 +43,10 @@ export function ScriptCard({
     return () => observer.disconnect();
   }, []);
 
+  const isDirty = baselineValue !== undefined && value !== baselineValue;
+
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty}>
       <CardHeader>
         <CardTitle>{title}</CardTitle>
         <CardDescription>{description}</CardDescription>
@@ -50,6 +55,8 @@ export function ScriptCard({
         <div
           ref={containerRef}
           className="overflow-hidden rounded-md border resize-y"
+          data-settings-dirty={isDirty}
+          data-settings-dirty-level="container"
           style={{ height, minHeight: "120px", maxHeight: "80vh" }}
         >
           <ScriptEditor
@@ -61,6 +68,6 @@ export function ScriptCard({
           />
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
diff --git a/apps/web/components/settings/profile-edit/sprites-api-key-card.tsx b/apps/web/components/settings/profile-edit/sprites-api-key-card.tsx
index 9f5480b6c1..81b2a4f5b9 100644
--- a/apps/web/components/settings/profile-edit/sprites-api-key-card.tsx
+++ b/apps/web/components/settings/profile-edit/sprites-api-key-card.tsx
@@ -4,20 +4,27 @@ import { useState, useCallback } from "react";
 import { IconTestPipe, IconLoader2, IconCheck, IconX, IconSparkles } from "@tabler/icons-react";
 import { Badge } from "@kandev/ui/badge";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@kandev/ui/card";
+import { CardContent, CardHeader, CardTitle, CardDescription } from "@kandev/ui/card";
 import { testSpritesConnection } from "@/lib/api/domains/sprites-api";
 import { useSprites } from "@/hooks/domains/settings/use-sprites";
 import { InlineSecretSelect } from "@/components/settings/profile-edit/inline-secret-select";
 import type { SecretListItem } from "@/lib/types/http-secrets";
 import type { SpritesTestResult, SpritesTestStep } from "@/lib/types/http-sprites";
+import { SettingsCard } from "@/components/settings/settings-card";
 
 type SpritesApiKeyCardProps = {
   secretId: string | null;
+  baselineSecretId?: string | null;
   onSecretIdChange: (id: string | null) => void;
   secrets: SecretListItem[];
 };
 
-export function SpritesApiKeyCard({ secretId, onSecretIdChange, secrets }: SpritesApiKeyCardProps) {
+export function SpritesApiKeyCard({
+  secretId,
+  baselineSecretId,
+  onSecretIdChange,
+  secrets,
+}: SpritesApiKeyCardProps) {
   const { status } = useSprites(secretId ?? undefined);
   const [testing, setTesting] = useState(false);
   const [testResult, setTestResult] = useState<SpritesTestResult | null>(null);
@@ -42,8 +49,9 @@ export function SpritesApiKeyCard({ secretId, onSecretIdChange, secrets }: Sprit
     }
   }, [secretId]);
 
+  const isDirty = baselineSecretId !== undefined && secretId !== baselineSecretId;
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty}>
       <CardHeader>
         <div className="flex items-center justify-between">
           <div>
@@ -64,6 +72,7 @@ export function SpritesApiKeyCard({ secretId, onSecretIdChange, secrets }: Sprit
           onSecretIdChange={onSecretIdChange}
           secrets={secrets}
           label="Secret"
+          isDirty={isDirty}
         />
         {secretId && (
           <ConnectionDetails
@@ -74,7 +83,7 @@ export function SpritesApiKeyCard({ secretId, onSecretIdChange, secrets }: Sprit
           />
         )}
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
diff --git a/apps/web/components/settings/profile-edit/sprites-sections.tsx b/apps/web/components/settings/profile-edit/sprites-sections.tsx
index 85d7cec5cc..5dda819ffd 100644
--- a/apps/web/components/settings/profile-edit/sprites-sections.tsx
+++ b/apps/web/components/settings/profile-edit/sprites-sections.tsx
@@ -4,36 +4,46 @@ import { useCallback } from "react";
 import { IconPlus, IconTrash } from "@tabler/icons-react";
 import { Badge } from "@kandev/ui/badge";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@kandev/ui/card";
+import { CardContent, CardHeader, CardTitle, CardDescription } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@kandev/ui/table";
 import type { NetworkPolicyRule } from "@/lib/api/domains/settings-api";
+import { SettingsCard } from "@/components/settings/settings-card";
 
 function PolicyRuleRow({
   rule,
+  baselineRule,
   index,
   onUpdate,
   onRemove,
 }: {
   rule: NetworkPolicyRule;
+  baselineRule?: NetworkPolicyRule;
   index: number;
   onUpdate: (index: number, field: keyof NetworkPolicyRule, val: string) => void;
   onRemove: (index: number) => void;
 }) {
   return (
-    <TableRow>
+    <TableRow
+      data-settings-dirty={!baselineRule || JSON.stringify(rule) !== JSON.stringify(baselineRule)}
+      data-settings-dirty-level="container"
+    >
       <TableCell>
         <Input
           value={rule.domain}
           onChange={(e) => onUpdate(index, "domain", e.target.value)}
           placeholder="*.example.com"
           className="text-sm"
+          data-settings-dirty={!baselineRule || rule.domain !== baselineRule.domain}
         />
       </TableCell>
       <TableCell>
         <Select value={rule.action} onValueChange={(v) => onUpdate(index, "action", v)}>
-          <SelectTrigger className="text-xs">
+          <SelectTrigger
+            className="text-xs"
+            data-settings-dirty={!baselineRule || rule.action !== baselineRule.action}
+          >
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -54,6 +64,7 @@ function PolicyRuleRow({
           onChange={(e) => onUpdate(index, "include", e.target.value)}
           placeholder="Optional pattern"
           className="text-sm"
+          data-settings-dirty={!baselineRule || rule.include !== baselineRule.include}
         />
       </TableCell>
       <TableCell>
@@ -72,10 +83,12 @@ function PolicyRuleRow({
 
 function PolicyRulesTable({
   rules,
+  baselineRules,
   onUpdate,
   onRemove,
 }: {
   rules: NetworkPolicyRule[];
+  baselineRules?: NetworkPolicyRule[];
   onUpdate: (index: number, field: keyof NetworkPolicyRule, val: string) => void;
   onRemove: (index: number) => void;
 }) {
@@ -94,6 +107,7 @@ function PolicyRulesTable({
           <PolicyRuleRow
             key={idx}
             rule={rule}
+            baselineRule={baselineRules?.[idx]}
             index={idx}
             onUpdate={onUpdate}
             onRemove={onRemove}
@@ -106,10 +120,15 @@ function PolicyRulesTable({
 
 type NetworkPoliciesCardProps = {
   rules: NetworkPolicyRule[];
+  baselineRules?: NetworkPolicyRule[];
   onRulesChange: (rules: NetworkPolicyRule[]) => void;
 };
 
-export function NetworkPoliciesCard({ rules, onRulesChange }: NetworkPoliciesCardProps) {
+export function NetworkPoliciesCard({
+  rules,
+  baselineRules,
+  onRulesChange,
+}: NetworkPoliciesCardProps) {
   const addRule = useCallback(() => {
     onRulesChange([...rules, { domain: "", action: "allow" }]);
   }, [rules, onRulesChange]);
@@ -128,8 +147,10 @@ export function NetworkPoliciesCard({ rules, onRulesChange }: NetworkPoliciesCar
     [rules, onRulesChange],
   );
 
+  const isDirty =
+    baselineRules !== undefined && JSON.stringify(rules) !== JSON.stringify(baselineRules);
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty}>
       <CardHeader>
         <div className="flex items-center justify-between">
           <div>
@@ -154,9 +175,14 @@ export function NetworkPoliciesCard({ rules, onRulesChange }: NetworkPoliciesCar
         {rules.length === 0 ? (
           <p className="text-sm text-muted-foreground">No network policy rules configured.</p>
         ) : (
-          <PolicyRulesTable rules={rules} onUpdate={updateRule} onRemove={removeRule} />
+          <PolicyRulesTable
+            rules={rules}
+            baselineRules={baselineRules}
+            onUpdate={updateRule}
+            onRemove={removeRule}
+          />
         )}
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
diff --git a/apps/web/components/settings/profile-form-fields.tsx b/apps/web/components/settings/profile-form-fields.tsx
index aaea5fc63e..39c8fa5222 100644
--- a/apps/web/components/settings/profile-form-fields.tsx
+++ b/apps/web/components/settings/profile-form-fields.tsx
@@ -1,22 +1,9 @@
 "use client";
 
 import { useId } from "react";
-import {
-  IconAlertCircle,
-  IconAlertTriangle,
-  IconRefresh,
-  IconTerminal2,
-} from "@tabler/icons-react";
+import { IconAlertCircle, IconAlertTriangle, IconRefresh } from "@tabler/icons-react";
 import { NoAuthPanel, ProbingPanel } from "@/components/settings/profile-status-panels";
 import { Button } from "@kandev/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@kandev/ui/dialog";
 import { Input } from "@kandev/ui/input";
 import { Label } from "@kandev/ui/label";
 import { Skeleton } from "@kandev/ui/skeleton";
@@ -38,6 +25,12 @@ import {
   type PermissionKey,
 } from "@/lib/agent-permissions";
 import { CLIFlagsField } from "@/components/settings/cli-flags-field";
+import {
+  CommandsButton,
+  findActiveMode,
+  profileModeIsDirty,
+  profileModelIsDirty,
+} from "@/components/settings/profile-capability-helpers";
 import type {
   CLIFlag,
   CommandEntry,
@@ -59,6 +52,7 @@ export type ProfileFormData = {
 
 export type ProfileFormFieldsProps = {
   profile: ProfileFormData;
+  baselineProfile?: ProfileFormData;
   onChange: (patch: Partial<ProfileFormData>) => void;
   modelConfig: ModelConfig;
   permissionSettings: Record<string, PermissionSetting>;
@@ -79,6 +73,7 @@ export type ProfileFormFieldsProps = {
 
 type PermissionToggleProps = {
   profile: ProfileFormData;
+  baselineProfile?: ProfileFormData;
   onChange: (patch: Partial<ProfileFormData>) => void;
   permissionSettings: Record<string, PermissionSetting>;
   passthroughConfig: PassthroughConfig | null;
@@ -102,12 +97,14 @@ function PermissionToggleRow({
   checked,
   onCheckedChange,
   compact,
+  isDirty,
 }: {
   settingKey: string;
   setting: PermissionSetting;
   checked: boolean;
   onCheckedChange: (checked: boolean) => void;
   compact: boolean;
+  isDirty: boolean;
 }) {
   const isDanger = setting.apply_method === PERMISSION_APPLY_AGENTCTL_AUTO_APPROVE;
   const switchSize = compact ? ("sm" as const) : ("default" as const);
@@ -120,6 +117,8 @@ function PermissionToggleRow({
     <div
       key={settingKey}
       className={wrapperCls}
+      data-settings-dirty={isDirty}
+      data-settings-dirty-level="container"
       data-testid={isDanger ? "permission-auto-approve-danger" : `permission-toggle-${settingKey}`}
     >
       <div className={`flex-1 min-w-0 ${compact && !isDanger ? "space-y-0.5" : "space-y-1"}`}>
@@ -149,6 +148,7 @@ function PermissionToggles({
   passthroughConfig,
   variant,
   lockPassthrough,
+  baselineProfile,
 }: PermissionToggleProps) {
   const isCompact = variant === "compact";
   const switchSize = isCompact ? ("sm" as const) : ("default" as const);
@@ -160,14 +160,19 @@ function PermissionToggles({
           const setting = permissionSettings[key];
           if (!setting?.supported) return null;
           if (setting.apply_method === "cli_flag") return null;
+          const checked = readPermissionValue(profile, key, permissionSettings);
           return (
             <PermissionToggleRow
               key={key}
               settingKey={key}
               setting={setting}
-              checked={readPermissionValue(profile, key, permissionSettings)}
+              checked={checked}
               onCheckedChange={(checked) => onChange({ [key]: checked })}
               compact
+              isDirty={
+                Boolean(baselineProfile) &&
+                checked !== readPermissionValue(baselineProfile!, key, permissionSettings)
+              }
             />
           );
         })}
@@ -184,6 +189,10 @@ function PermissionToggles({
               checked={profile.cli_passthrough}
               onCheckedChange={(checked) => onChange({ cli_passthrough: checked })}
               disabled={lockPassthrough}
+              data-settings-dirty={
+                Boolean(baselineProfile) &&
+                profile.cli_passthrough !== baselineProfile?.cli_passthrough
+              }
             />
           </div>
         )}
@@ -205,6 +214,11 @@ function PermissionToggles({
             checked={readPermissionValue(profile, key, permissionSettings)}
             onCheckedChange={(checked) => onChange({ [key]: checked })}
             compact={false}
+            isDirty={
+              Boolean(baselineProfile) &&
+              readPermissionValue(profile, key, permissionSettings) !==
+                readPermissionValue(baselineProfile!, key, permissionSettings)
+            }
           />
         );
       })}
@@ -218,6 +232,10 @@ function PermissionToggles({
             checked={profile.cli_passthrough}
             onCheckedChange={(checked) => onChange({ cli_passthrough: checked })}
             disabled={lockPassthrough}
+            data-settings-dirty={
+              Boolean(baselineProfile) &&
+              profile.cli_passthrough !== baselineProfile?.cli_passthrough
+            }
           />
         </div>
       )}
@@ -378,43 +396,23 @@ function modelConfigOptions(modelConfig: ModelConfig): SelectConfigOption[] {
   );
 }
 
-function CommandsButton({ commands }: { commands: CommandEntry[] }) {
-  if (commands.length === 0) return null;
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          className="cursor-pointer"
-          data-testid="profile-commands-button"
-        >
-          <IconTerminal2 className="mr-2 h-4 w-4" />
-          Available commands ({commands.length})
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="max-w-lg">
-        <DialogHeader>
-          <DialogTitle>Available slash commands</DialogTitle>
-          <DialogDescription>
-            Type these during a session chat to invoke them — e.g. <code>/init</code>.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="max-h-[60vh] overflow-y-auto space-y-2">
-          {commands.map((c) => (
-            <div key={c.name} className="rounded-md border p-3">
-              <code className="text-sm font-semibold">/{c.name}</code>
-              {c.description && (
-                <p className="text-xs text-muted-foreground mt-1">{c.description}</p>
-              )}
-            </div>
-          ))}
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
+type CapabilitiesRowProps = {
+  profile: ProfileFormData;
+  models: ModelEntry[];
+  modes: ModeEntry[];
+  commands: CommandEntry[];
+  currentModelId: string | undefined;
+  currentModeId: string | undefined;
+  status: ModelConfig["status"];
+  onChange: (patch: Partial<ProfileFormData>) => void;
+  isCompact: boolean;
+  isLoading: boolean;
+  onRefresh: () => Promise<void>;
+  error: string | null;
+  modelConfig: ModelConfig;
+  agentName: string;
+  baselineProfile?: ProfileFormData;
+};
 
 function CapabilitiesRow({
   profile,
@@ -431,27 +429,11 @@ function CapabilitiesRow({
   error,
   modelConfig,
   agentName,
-}: {
-  profile: ProfileFormData;
-  models: ModelEntry[];
-  modes: ModeEntry[];
-  commands: CommandEntry[];
-  currentModelId: string | undefined;
-  currentModeId: string | undefined;
-  status: ModelConfig["status"];
-  onChange: (patch: Partial<ProfileFormData>) => void;
-  isCompact: boolean;
-  isLoading: boolean;
-  onRefresh: () => Promise<void>;
-  error: string | null;
-  modelConfig: ModelConfig;
-  agentName: string;
-}) {
+  baselineProfile,
+}: CapabilitiesRowProps) {
   const hasModes = modes.length > 0;
   const configOptions = modelConfigOptions(modelConfig);
-  const activeMode = hasModes
-    ? modes.find((m) => m.id === (profile.mode || currentModeId || modes[0]?.id))
-    : undefined;
+  const activeMode = findActiveMode(modes, profile.mode, currentModeId);
   const labelCls = isCompact ? "text-xs text-muted-foreground" : undefined;
   const gapCls = isCompact ? "space-y-1.5" : "space-y-2";
 
@@ -483,7 +465,11 @@ function CapabilitiesRow({
   return (
     <div className={gapCls}>
       <div className="flex items-end gap-2">
-        <div className={`flex-1 min-w-0 ${gapCls}`}>
+        <div
+          className={`flex-1 min-w-0 ${gapCls}`}
+          data-settings-dirty={profileModelIsDirty(profile, baselineProfile)}
+          data-settings-dirty-level="container"
+        >
           <Label className={labelCls}>Start model</Label>
           <ModelPicker
             profile={profile}
@@ -494,7 +480,12 @@ function CapabilitiesRow({
           />
         </div>
         {hasModes && (
-          <div data-testid="profile-mode-field" className={`flex-1 min-w-0 ${gapCls}`}>
+          <div
+            data-testid="profile-mode-field"
+            className={`flex-1 min-w-0 ${gapCls}`}
+            data-settings-dirty={profileModeIsDirty(profile, baselineProfile)}
+            data-settings-dirty-level="container"
+          >
             <Label className={labelCls}>Start mode</Label>
             <ModePicker
               profile={profile}
@@ -520,11 +511,13 @@ function NameField({
   onChange,
   canRemove,
   onRemove,
+  baselineName,
 }: {
   profile: ProfileFormData;
   onChange: (patch: Partial<ProfileFormData>) => void;
   canRemove?: boolean;
   onRemove?: () => void;
+  baselineName?: string;
 }) {
   return (
     <div className="flex items-center justify-between gap-4">
@@ -535,6 +528,7 @@ function NameField({
           value={profile.name}
           onChange={(event) => onChange({ name: event.target.value })}
           placeholder="Default profile"
+          data-settings-dirty={baselineName !== undefined && profile.name !== baselineName}
         />
       </div>
       {canRemove && onRemove && (
@@ -548,6 +542,7 @@ function NameField({
 
 export function ProfileFormFields({
   profile,
+  baselineProfile,
   onChange,
   modelConfig,
   permissionSettings,
@@ -571,6 +566,7 @@ export function ProfileFormFields({
           onChange={onChange}
           canRemove={canRemove}
           onRemove={onRemove}
+          baselineName={baselineProfile?.name}
         />
       )}
 
@@ -589,6 +585,7 @@ export function ProfileFormFields({
         onRefresh={caps.refresh}
         error={caps.error}
         modelConfig={modelConfig}
+        baselineProfile={baselineProfile}
       />
 
       <PermissionToggles
@@ -598,15 +595,24 @@ export function ProfileFormFields({
         passthroughConfig={passthroughConfig}
         variant={variant}
         lockPassthrough={lockPassthrough}
+        baselineProfile={baselineProfile}
       />
 
-      <CLIFlagsField
-        flags={profile.cli_flags}
-        onChange={(next) => onChange({ cli_flags: next })}
-        permissionSettings={permissionSettings}
-        variant={variant}
-        hideCustomFlags={hideCustomCLIFlags}
-      />
+      <div
+        data-settings-dirty={
+          Boolean(baselineProfile) &&
+          JSON.stringify(profile.cli_flags) !== JSON.stringify(baselineProfile?.cli_flags)
+        }
+        data-settings-dirty-level="container"
+      >
+        <CLIFlagsField
+          flags={profile.cli_flags}
+          onChange={(next) => onChange({ cli_flags: next })}
+          permissionSettings={permissionSettings}
+          variant={variant}
+          hideCustomFlags={hideCustomCLIFlags}
+        />
+      </div>
     </div>
   );
 }
diff --git a/apps/web/components/settings/prompts-settings.test.tsx b/apps/web/components/settings/prompts-settings.test.tsx
new file mode 100644
index 0000000000..dd88342de0
--- /dev/null
+++ b/apps/web/components/settings/prompts-settings.test.tsx
@@ -0,0 +1,88 @@
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { SettingsSaveProvider } from "./settings-save-provider";
+import { getPromptDraftMeta, PromptsSettings } from "./prompts-settings";
+
+const mocks = vi.hoisted(() => ({
+  createPrompt: vi.fn(),
+  deletePrompt: vi.fn(),
+  updatePrompt: vi.fn(),
+  setPrompts: vi.fn(),
+  toast: vi.fn(),
+}));
+
+vi.mock("@/hooks/domains/settings/use-custom-prompts", () => ({
+  useCustomPrompts: () => ({ loaded: true }),
+}));
+
+vi.mock("@/components/state-provider", () => ({
+  useAppStore: (selector: (state: unknown) => unknown) =>
+    selector({ prompts: { items: [] }, setPrompts: mocks.setPrompts }),
+}));
+
+vi.mock("@/components/toast-provider", () => ({
+  useToast: () => ({ toast: mocks.toast }),
+}));
+
+vi.mock("@/lib/api", () => ({
+  createPrompt: mocks.createPrompt,
+  deletePrompt: mocks.deletePrompt,
+  updatePrompt: mocks.updatePrompt,
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.createPrompt.mockResolvedValue({
+    id: "prompt-1",
+    name: "Review",
+    content: "Review this change",
+    builtin: false,
+  });
+});
+
+afterEach(cleanup);
+
+describe("PromptsSettings coordinated creation", () => {
+  it("treats an opened create form as a dirty route draft", () => {
+    expect(getPromptDraftMeta([], null, true, { name: "", content: "" })).toEqual({
+      isDirty: true,
+      revision: 'new:{"name":"","content":""}',
+    });
+  });
+
+  it("creates a prompt only when the floating route Save is pressed", async () => {
+    render(
+      <SettingsSaveProvider>
+        <PromptsSettings />
+      </SettingsSaveProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Add prompt" }));
+
+    expect(screen.getByTestId("prompt-create-form").getAttribute("data-settings-dirty")).toBe(
+      "true",
+    );
+    expect(screen.queryByTestId("prompt-submit")).toBeNull();
+    expect(screen.getByTestId("prompt-create-button").hasAttribute("disabled")).toBe(true);
+    expect(mocks.createPrompt).not.toHaveBeenCalled();
+    expect(screen.getByRole("button", { name: "Save changes" }).hasAttribute("disabled")).toBe(
+      true,
+    );
+
+    fireEvent.change(screen.getByPlaceholderText("Prompt name"), {
+      target: { value: "Review" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("Prompt content"), {
+      target: { value: "Review this change" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() =>
+      expect(mocks.createPrompt).toHaveBeenCalledWith(
+        { name: "Review", content: "Review this change" },
+        { cache: "no-store" },
+      ),
+    );
+  });
+});
diff --git a/apps/web/components/settings/prompts-settings.tsx b/apps/web/components/settings/prompts-settings.tsx
index a2dc0d1f46..54d1779a37 100644
--- a/apps/web/components/settings/prompts-settings.tsx
+++ b/apps/web/components/settings/prompts-settings.tsx
@@ -31,29 +31,36 @@ function errorMessage(error: unknown): string {
   return error instanceof Error ? error.message : "Request failed";
 }
 
+async function runPromptSave(
+  action: () => Promise<unknown>,
+  reportError: (error: unknown) => void,
+) {
+  try {
+    await action();
+  } catch (error) {
+    reportError(error);
+    throw error;
+  }
+}
+
 type PromptFormState = typeof defaultFormState;
 
 type PromptCreateFormProps = {
   formState: PromptFormState;
   onFormChange: (patch: Partial<PromptFormState>) => void;
-  onSubmit: () => void;
   onCancel: () => void;
-  isValid: boolean;
   isBusy: boolean;
 };
 
-function PromptCreateForm({
-  formState,
-  onFormChange,
-  onSubmit,
-  onCancel,
-  isValid,
-  isBusy,
-}: PromptCreateFormProps) {
+function PromptCreateForm({ formState, onFormChange, onCancel, isBusy }: PromptCreateFormProps) {
+  const nameIsDirty = formState.name !== defaultFormState.name;
+  const contentIsDirty = formState.content !== defaultFormState.content;
   return (
     <div
       className="rounded-lg border border-border/70 bg-background p-4 space-y-3"
       data-testid="prompt-create-form"
+      data-settings-dirty="true"
+      data-settings-dirty-level="container"
     >
       <div className="text-sm font-medium text-foreground">Add prompt</div>
       <Input
@@ -61,6 +68,8 @@ function PromptCreateForm({
         onChange={(event) => onFormChange({ name: event.target.value })}
         placeholder="Prompt name"
         data-testid="prompt-name-input"
+        disabled={isBusy}
+        data-settings-dirty={nameIsDirty}
       />
       <Textarea
         value={formState.content}
@@ -69,11 +78,10 @@ function PromptCreateForm({
         rows={5}
         className="resize-y max-h-60 overflow-auto"
         data-testid="prompt-content-input"
+        disabled={isBusy}
+        data-settings-dirty={contentIsDirty}
       />
       <div className="flex items-center gap-2">
-        <Button onClick={onSubmit} disabled={!isValid || isBusy} data-testid="prompt-submit">
-          Add prompt
-        </Button>
         <Button variant="ghost" onClick={onCancel} disabled={isBusy}>
           Cancel
         </Button>
@@ -90,9 +98,7 @@ type PromptListItemProps = {
   onFormChange: (patch: Partial<PromptFormState>) => void;
   onStartEditing: (prompt: CustomPrompt) => void;
   onOpenDelete: (prompt: CustomPrompt) => void;
-  onUpdate: () => void;
   onCancel: () => void;
-  isValid: boolean;
   isBusy: boolean;
   showCreate: boolean;
 };
@@ -105,15 +111,15 @@ function PromptListItem({
   onFormChange,
   onStartEditing,
   onOpenDelete,
-  onUpdate,
   onCancel,
-  isValid,
   isBusy,
   showCreate,
 }: PromptListItemProps) {
   const getPromptPreview = (content: string) => {
     return content.split(/\r?\n/)[0] ?? "";
   };
+  const nameIsDirty = isEditing && formState.name !== prompt.name;
+  const contentIsDirty = isEditing && formState.content !== prompt.content;
 
   return (
     <div
@@ -121,6 +127,7 @@ function PromptListItem({
       ref={isEditing ? editingRef : null}
       data-testid="prompt-list-item"
       data-prompt-name={prompt.name}
+      data-settings-dirty={nameIsDirty || contentIsDirty}
     >
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">
@@ -161,6 +168,8 @@ function PromptListItem({
             onChange={(event) => onFormChange({ name: event.target.value })}
             placeholder="Prompt name"
             data-testid="prompt-name-input"
+            disabled={isBusy}
+            data-settings-dirty={nameIsDirty}
           />
           <Textarea
             value={formState.content}
@@ -169,11 +178,10 @@ function PromptListItem({
             rows={5}
             className="resize-y max-h-60 overflow-auto"
             data-testid="prompt-content-input"
+            disabled={isBusy}
+            data-settings-dirty={contentIsDirty}
           />
           <div className="flex items-center gap-2">
-            <Button onClick={onUpdate} disabled={!isValid || isBusy} data-testid="prompt-submit">
-              Save changes
-            </Button>
             <Button variant="ghost" onClick={onCancel} disabled={isBusy}>
               Cancel
             </Button>
@@ -197,9 +205,7 @@ type PromptListContentProps = {
   onFormChange: (patch: Partial<PromptFormState>) => void;
   onStartEditing: (prompt: CustomPrompt) => void;
   onOpenDelete: (prompt: CustomPrompt) => void;
-  onUpdate: () => void;
   onCancel: () => void;
-  isValid: boolean;
   isBusy: boolean;
   showCreate: boolean;
 };
@@ -213,9 +219,7 @@ function PromptListContent({
   onFormChange,
   onStartEditing,
   onOpenDelete,
-  onUpdate,
   onCancel,
-  isValid,
   isBusy,
   showCreate,
 }: PromptListContentProps) {
@@ -245,9 +249,7 @@ function PromptListContent({
           onFormChange={onFormChange}
           onStartEditing={onStartEditing}
           onOpenDelete={onOpenDelete}
-          onUpdate={onUpdate}
           onCancel={onCancel}
-          isValid={isValid}
           isBusy={isBusy}
           showCreate={showCreate}
         />
@@ -384,11 +386,14 @@ function usePromptsActions(state: ReturnType<typeof usePromptsState>) {
     toast({ title, description: errorMessage(err), variant: "error" });
   const handleCreate = () => {
     if (!isValid || isBusy) return;
-    createRequest.run(formState).catch(toastError("Couldn't create prompt"));
+    return runPromptSave(() => createRequest.run(formState), toastError("Couldn't create prompt"));
   };
   const handleUpdate = () => {
     if (!isValid || isBusy || !editingId) return;
-    updateRequest.run(editingId, formState).catch(toastError("Couldn't save prompt"));
+    return runPromptSave(
+      () => updateRequest.run(editingId, formState),
+      toastError("Couldn't save prompt"),
+    );
   };
   const startEditing = (prompt: CustomPrompt) => {
     setEditingId(prompt.id);
@@ -426,6 +431,24 @@ function usePromptsActions(state: ReturnType<typeof usePromptsState>) {
   };
 }
 
+export function getPromptDraftMeta(
+  prompts: CustomPrompt[],
+  editingId: string | null,
+  showCreate: boolean,
+  formState: PromptFormState,
+) {
+  const editingPrompt = prompts.find((prompt) => prompt.id === editingId);
+  const revision = JSON.stringify(formState);
+  const savedRevision = JSON.stringify({
+    name: editingPrompt?.name ?? "",
+    content: editingPrompt?.content ?? "",
+  });
+  return {
+    isDirty: showCreate || (Boolean(editingId) && revision !== savedRevision),
+    revision: `${showCreate ? "new" : (editingId ?? "none")}:${revision}`,
+  };
+}
+
 export function PromptsSettings() {
   const state = usePromptsState();
   const {
@@ -451,6 +474,7 @@ export function PromptsSettings() {
     resetForm,
   } = usePromptsActions(state);
   const isEditing = Boolean(editingId);
+  const draft = getPromptDraftMeta(prompts, editingId, showCreate, formState);
 
   useEffect(() => {
     if (!editingId) return;
@@ -461,10 +485,16 @@ export function PromptsSettings() {
     <SettingsPageTemplate
       title="Prompts"
       description="Create reusable prompt snippets for the chat input."
-      isDirty={false}
+      isDirty={draft.isDirty}
       saveStatus="idle"
-      onSave={() => undefined}
-      showSaveButton={false}
+      saveId="prompts-item-draft"
+      saveRevision={draft.revision}
+      canSave={!draft.isDirty || isValid}
+      invalidReason={
+        draft.isDirty && !isValid ? "Prompt name and content are required." : undefined
+      }
+      onSave={showCreate ? handleCreate : handleUpdate}
+      onDiscard={resetForm}
     >
       <div className="rounded-lg border border-border/70 bg-muted/30 p-4 text-xs text-muted-foreground">
         Use <span className="font-medium text-foreground">@name</span> in the chat input to insert a
@@ -486,9 +516,7 @@ export function PromptsSettings() {
           <PromptCreateForm
             formState={formState}
             onFormChange={(patch) => setFormState((prev) => ({ ...prev, ...patch }))}
-            onSubmit={handleCreate}
             onCancel={resetForm}
-            isValid={isValid}
             isBusy={isBusy}
           />
         )}
@@ -503,9 +531,7 @@ export function PromptsSettings() {
             onFormChange={(patch) => setFormState((prev) => ({ ...prev, ...patch }))}
             onStartEditing={startEditing}
             onOpenDelete={openDeleteDialog}
-            onUpdate={handleUpdate}
             onCancel={resetForm}
-            isValid={isValid}
             isBusy={isBusy}
             showCreate={showCreate}
           />
diff --git a/apps/web/components/settings/repository-card.tsx b/apps/web/components/settings/repository-card.tsx
index b4add1b78d..38131f77f5 100644
--- a/apps/web/components/settings/repository-card.tsx
+++ b/apps/web/components/settings/repository-card.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useState } from "react";
-import { IconEdit, IconGitBranch, IconPlus, IconTrash, IconX } from "@tabler/icons-react";
+import { IconEdit, IconGitBranch, IconTrash, IconX } from "@tabler/icons-react";
 import { Badge } from "@kandev/ui/badge";
-import { Card, CardContent } from "@kandev/ui/card";
+import { CardContent } from "@kandev/ui/card";
 import { Button } from "@kandev/ui/button";
 import { Checkbox } from "@kandev/ui/checkbox";
 import { Input } from "@kandev/ui/input";
@@ -11,11 +11,14 @@ import { Label } from "@kandev/ui/label";
 import { Textarea } from "@kandev/ui/textarea";
 import { useRequest } from "@/lib/http/use-request";
 import { useToast } from "@/components/toast-provider";
-import { UnsavedChangesBadge, UnsavedSaveButton } from "@/components/settings/unsaved-indicator";
+import { UnsavedChangesBadge } from "@/components/settings/unsaved-indicator";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { EditableCard } from "@/components/settings/editable-card";
 import { RepositoryBranchTemplateHelp } from "@/components/settings/repository-branch-template-help";
 import { DeleteRepositoryDialog } from "@/components/settings/repository-delete-dialog";
 import { CopyFilesField } from "@/components/settings/repository-copy-files-help";
+import { RepositoryCustomScripts } from "@/components/settings/repository-custom-scripts";
 import { getRepositoryActiveSessionCountAction } from "@/app/actions/workspaces";
 import type { Repository, RepositoryScript } from "@/lib/types/http";
 import { defaultWorktreeBranchTemplate } from "@/lib/worktree-branch-template";
@@ -28,6 +31,7 @@ type RepoFieldsBaseProps = {
 };
 
 type RepositoryBasicFieldsProps = RepoFieldsBaseProps & {
+  savedRepository?: RepositoryWithScripts;
   repositoryName: string;
   repositoryLocalPath: string;
   sourceType: string;
@@ -37,6 +41,7 @@ type RepositoryBasicFieldsProps = RepoFieldsBaseProps & {
 
 function RepositoryBasicFields({
   repositoryId,
+  savedRepository,
   onUpdate,
   repositoryName,
   repositoryLocalPath,
@@ -53,6 +58,7 @@ function RepositoryBasicFields({
             value={repositoryName}
             onChange={(e) => onUpdate(repositoryId, { name: e.target.value })}
             placeholder="my-repo"
+            data-settings-dirty={repositoryName !== (savedRepository?.name ?? "")}
           />
         </div>
         <div className="space-y-2">
@@ -62,6 +68,7 @@ function RepositoryBasicFields({
             onChange={(e) => onUpdate(repositoryId, { local_path: e.target.value })}
             placeholder="/path/to/repository"
             disabled={sourceType !== "local"}
+            data-settings-dirty={repositoryLocalPath !== (savedRepository?.local_path ?? "")}
           />
         </div>
       </div>
@@ -75,6 +82,10 @@ function RepositoryBasicFields({
             value={worktreeBranchTemplate}
             onChange={(e) => onUpdate(repositoryId, { worktree_branch_template: e.target.value })}
             placeholder={defaultWorktreeBranchTemplate}
+            data-settings-dirty={
+              worktreeBranchTemplate !==
+              (savedRepository?.worktree_branch_template ?? defaultWorktreeBranchTemplate)
+            }
           />
         </div>
         <div className="space-y-2">
@@ -86,6 +97,9 @@ function RepositoryBasicFields({
               onCheckedChange={(checked) =>
                 onUpdate(repositoryId, { pull_before_worktree: checked === true })
               }
+              data-settings-dirty={
+                pullBeforeWorktree !== (savedRepository?.pull_before_worktree ?? true)
+              }
             />
             <div className="space-y-1">
               <Label
@@ -103,6 +117,7 @@ function RepositoryBasicFields({
 }
 
 type RepositoryScriptFieldsProps = RepoFieldsBaseProps & {
+  savedRepository?: RepositoryWithScripts;
   setupScript: string;
   cleanupScript: string;
   devScript: string;
@@ -111,6 +126,7 @@ type RepositoryScriptFieldsProps = RepoFieldsBaseProps & {
 
 function RepositoryScriptFields({
   repositoryId,
+  savedRepository,
   onUpdate,
   setupScript,
   cleanupScript,
@@ -128,6 +144,7 @@ function RepositoryScriptFields({
             placeholder="#!/bin/bash&#10;# any manual setup you need"
             rows={3}
             className="font-mono text-sm"
+            data-settings-dirty={setupScript !== (savedRepository?.setup_script ?? "")}
           />
           <p className="text-xs text-muted-foreground">
             Runs when the repo is cloned or a git worktree is created.
@@ -141,6 +158,7 @@ function RepositoryScriptFields({
             placeholder="#!/bin/bash&#10;# any manual clean up you need"
             rows={3}
             className="font-mono text-sm"
+            data-settings-dirty={cleanupScript !== (savedRepository?.cleanup_script ?? "")}
           />
           <p className="text-xs text-muted-foreground">
             Runs when the task is completed to clean up the workspace.
@@ -156,6 +174,7 @@ function RepositoryScriptFields({
           placeholder="#!/bin/bash&#10;npm run dev -- --port $PORT"
           rows={3}
           className="font-mono text-sm"
+          data-settings-dirty={devScript !== (savedRepository?.dev_script ?? "")}
         />
         <p className="text-xs text-muted-foreground">
           Used to start the preview dev server for this repository. Use{" "}
@@ -163,90 +182,25 @@ function RepositoryScriptFields({
         </p>
       </div>
 
-      <CopyFilesField repositoryId={repositoryId} copyFiles={copyFiles} onUpdate={onUpdate} />
+      <CopyFilesField
+        repositoryId={repositoryId}
+        copyFiles={copyFiles}
+        isDirty={copyFiles !== (savedRepository?.copy_files ?? "")}
+        onUpdate={onUpdate}
+      />
     </>
   );
 }
 
-type RepositoryCustomScriptsProps = {
-  repositoryId: string;
-  scripts: RepositoryScript[];
-  areScriptsDirty: boolean;
-  onAddScript: (repoId: string) => void;
-  onUpdateScript: (repoId: string, scriptId: string, updates: Partial<RepositoryScript>) => void;
-  onDeleteScript: (repoId: string, scriptId: string) => void;
-};
-
-function RepositoryCustomScripts({
-  repositoryId,
-  scripts,
-  areScriptsDirty,
-  onAddScript,
-  onUpdateScript,
-  onDeleteScript,
-}: RepositoryCustomScriptsProps) {
-  return (
-    <div className="space-y-3">
-      <div className="flex items-center justify-between gap-3">
-        <Label className="flex items-center gap-2">
-          <span>Custom Scripts</span>
-          {areScriptsDirty && <UnsavedChangesBadge />}
-        </Label>
-        <Button type="button" variant="outline" size="sm" onClick={() => onAddScript(repositoryId)}>
-          <IconPlus className="h-4 w-4 mr-1" />
-          Add Script
-        </Button>
-      </div>
-      <div className="space-y-3">
-        {scripts.length === 0 ? (
-          <p className="text-sm text-muted-foreground">No scripts yet.</p>
-        ) : (
-          scripts.map((script) => (
-            <div key={script.id} className="grid gap-2">
-              <div className="flex items-center gap-2">
-                <Input
-                  value={script.name ?? ""}
-                  onChange={(e) =>
-                    onUpdateScript(repositoryId, script.id, { name: e.target.value })
-                  }
-                  placeholder="Script name"
-                />
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => onDeleteScript(repositoryId, script.id)}
-                >
-                  <IconX className="h-4 w-4" />
-                </Button>
-              </div>
-              <Textarea
-                value={script.command ?? ""}
-                onChange={(e) =>
-                  onUpdateScript(repositoryId, script.id, { command: e.target.value })
-                }
-                placeholder="#!/bin/bash&#10;npm run dev"
-                rows={3}
-                className="font-mono text-sm"
-              />
-            </div>
-          ))
-        )}
-      </div>
-    </div>
-  );
-}
-
 type RepositoryEditViewProps = {
   repository: RepositoryWithScripts;
+  savedRepository?: RepositoryWithScripts;
   isDirty: boolean;
   areScriptsDirty: boolean;
-  saveRequest: { isLoading: boolean; status: "idle" | "loading" | "success" | "error" };
   onUpdate: (repoId: string, updates: Partial<Repository>) => void;
   onAddScript: (repoId: string) => void;
   onUpdateScript: (repoId: string, scriptId: string, updates: Partial<RepositoryScript>) => void;
   onDeleteScript: (repoId: string, scriptId: string) => void;
-  onSave: (close: () => void) => void;
   onOpenDelete: () => void;
   deleteLoading: boolean;
   close: () => void;
@@ -254,20 +208,19 @@ type RepositoryEditViewProps = {
 
 function RepositoryEditView({
   repository,
+  savedRepository,
   isDirty,
   areScriptsDirty,
-  saveRequest,
   onUpdate,
   onAddScript,
   onUpdateScript,
   onDeleteScript,
-  onSave,
   onOpenDelete,
   deleteLoading,
   close,
 }: RepositoryEditViewProps) {
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty}>
       <CardContent className="pt-6">
         <div className="space-y-5">
           <div className="flex items-start justify-between gap-3">
@@ -278,17 +231,21 @@ function RepositoryEditView({
                 {isDirty && <UnsavedChangesBadge />}
               </Label>
             </div>
-            <UnsavedSaveButton
-              isDirty={isDirty}
-              isLoading={saveRequest.isLoading}
-              status={saveRequest.status}
-              cleanLabel="Close"
-              onClick={isDirty ? () => onSave(close) : close}
-            />
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="cursor-pointer"
+              aria-label="Close repository editor"
+              onClick={close}
+            >
+              <IconX className="h-4 w-4" />
+            </Button>
           </div>
 
           <RepositoryBasicFields
             repositoryId={repository.id}
+            savedRepository={savedRepository}
             onUpdate={onUpdate}
             repositoryName={repository.name ?? ""}
             repositoryLocalPath={repository.local_path ?? ""}
@@ -301,6 +258,7 @@ function RepositoryEditView({
 
           <RepositoryScriptFields
             repositoryId={repository.id}
+            savedRepository={savedRepository}
             onUpdate={onUpdate}
             setupScript={repository.setup_script ?? ""}
             cleanupScript={repository.cleanup_script ?? ""}
@@ -311,6 +269,7 @@ function RepositoryEditView({
           <RepositoryCustomScripts
             repositoryId={repository.id}
             scripts={repository.scripts}
+            savedScripts={savedRepository?.scripts}
             areScriptsDirty={areScriptsDirty}
             onAddScript={onAddScript}
             onUpdateScript={onUpdateScript}
@@ -330,7 +289,7 @@ function RepositoryEditView({
           </div>
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
@@ -402,7 +361,7 @@ function RepositoryPreview({
   } = buildRepoPreviewData(repository);
 
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty}>
       <CardContent className="py-4 cursor-pointer" onClick={open}>
         <div className="flex items-start justify-between gap-3">
           <div className="flex items-start gap-3 min-w-0">
@@ -459,12 +418,13 @@ function RepositoryPreview({
           </div>
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
 type RepositoryCardProps = {
   repository: RepositoryWithScripts;
+  savedRepository?: RepositoryWithScripts;
   isRepositoryDirty: boolean;
   areScriptsDirty: boolean;
   autoOpen?: boolean;
@@ -541,6 +501,7 @@ function useRepositoryDelete(
 
 export function RepositoryCard({
   repository,
+  savedRepository,
   isRepositoryDirty,
   areScriptsDirty,
   autoOpen = false,
@@ -557,18 +518,25 @@ export function RepositoryCard({
   const isDirty = isRepositoryDirty || areScriptsDirty;
   const deleteState = useRepositoryDelete(repository.id, onDelete, () => setIsEditing(false));
 
-  const handleSave = async (close: () => void) => {
+  const handleSave = async () => {
     try {
       await saveRequest.run();
-      close();
     } catch (error) {
       toast({
         title: "Failed to save repository",
         description: error instanceof Error ? error.message : "Request failed",
         variant: "error",
       });
+      throw error;
     }
   };
+  useSettingsSaveContributor({
+    id: `repository:${repository.id}`,
+    revision: JSON.stringify(repository),
+    isDirty,
+    save: handleSave,
+    discard: () => undefined,
+  });
 
   return (
     <>
@@ -580,14 +548,13 @@ export function RepositoryCard({
         renderEdit={({ close }) => (
           <RepositoryEditView
             repository={repository}
+            savedRepository={savedRepository}
             isDirty={isDirty}
             areScriptsDirty={areScriptsDirty}
-            saveRequest={saveRequest}
             onUpdate={onUpdate}
             onAddScript={onAddScript}
             onUpdateScript={onUpdateScript}
             onDeleteScript={onDeleteScript}
-            onSave={handleSave}
             onOpenDelete={deleteState.handleOpenDelete}
             deleteLoading={deleteState.buttonLoading}
             close={close}
diff --git a/apps/web/components/settings/repository-copy-files-help.tsx b/apps/web/components/settings/repository-copy-files-help.tsx
index a5c3b4cff4..84168f9ae1 100644
--- a/apps/web/components/settings/repository-copy-files-help.tsx
+++ b/apps/web/components/settings/repository-copy-files-help.tsx
@@ -8,10 +8,16 @@ import type { Repository } from "@/lib/types/http";
 type CopyFilesFieldProps = {
   repositoryId: string;
   copyFiles: string;
+  isDirty?: boolean;
   onUpdate: (repoId: string, updates: Partial<Repository>) => void;
 };
 
-export function CopyFilesField({ repositoryId, copyFiles, onUpdate }: CopyFilesFieldProps) {
+export function CopyFilesField({
+  repositoryId,
+  copyFiles,
+  isDirty = false,
+  onUpdate,
+}: CopyFilesFieldProps) {
   const inputId = `copy-files-${repositoryId}`;
   const helpId = `copy-files-help-${repositoryId}`;
   return (
@@ -26,6 +32,7 @@ export function CopyFilesField({ repositoryId, copyFiles, onUpdate }: CopyFilesF
         placeholder=".env, .env.*, apps/**/.env, .env.local:symlink"
         rows={2}
         className="font-mono text-sm"
+        data-settings-dirty={isDirty}
       />
       <p id={helpId} className="text-xs text-muted-foreground">
         Gitignored paths copied into new worktrees. Append{" "}
diff --git a/apps/web/components/settings/repository-custom-scripts.tsx b/apps/web/components/settings/repository-custom-scripts.tsx
new file mode 100644
index 0000000000..9e5e1552f5
--- /dev/null
+++ b/apps/web/components/settings/repository-custom-scripts.tsx
@@ -0,0 +1,107 @@
+import { IconPlus, IconX } from "@tabler/icons-react";
+import { Button } from "@kandev/ui/button";
+import { Input } from "@kandev/ui/input";
+import { Label } from "@kandev/ui/label";
+import { Textarea } from "@kandev/ui/textarea";
+import type { RepositoryScript } from "@/lib/types/http";
+import { UnsavedChangesBadge } from "./unsaved-indicator";
+
+type RepositoryCustomScriptsProps = {
+  repositoryId: string;
+  scripts: RepositoryScript[];
+  savedScripts?: RepositoryScript[];
+  areScriptsDirty: boolean;
+  onAddScript: (repoId: string) => void;
+  onUpdateScript: (repoId: string, scriptId: string, updates: Partial<RepositoryScript>) => void;
+  onDeleteScript: (repoId: string, scriptId: string) => void;
+};
+
+export function RepositoryCustomScripts({
+  repositoryId,
+  scripts,
+  savedScripts,
+  areScriptsDirty,
+  onAddScript,
+  onUpdateScript,
+  onDeleteScript,
+}: RepositoryCustomScriptsProps) {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between gap-3">
+        <Label className="flex items-center gap-2">
+          <span>Custom Scripts</span>
+          {areScriptsDirty && <UnsavedChangesBadge />}
+        </Label>
+        <Button type="button" variant="outline" size="sm" onClick={() => onAddScript(repositoryId)}>
+          <IconPlus className="h-4 w-4 mr-1" />
+          Add Script
+        </Button>
+      </div>
+      <div className="space-y-3">
+        {scripts.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No scripts yet.</p>
+        ) : (
+          scripts.map((script) => (
+            <RepositoryCustomScript
+              key={script.id}
+              repositoryId={repositoryId}
+              script={script}
+              savedScript={savedScripts?.find((candidate) => candidate.id === script.id)}
+              onUpdate={onUpdateScript}
+              onDelete={onDeleteScript}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+function RepositoryCustomScript({
+  repositoryId,
+  script,
+  savedScript,
+  onUpdate,
+  onDelete,
+}: {
+  repositoryId: string;
+  script: RepositoryScript;
+  savedScript?: RepositoryScript;
+  onUpdate: RepositoryCustomScriptsProps["onUpdateScript"];
+  onDelete: RepositoryCustomScriptsProps["onDeleteScript"];
+}) {
+  const nameIsDirty = !savedScript || script.name !== savedScript.name;
+  const commandIsDirty = !savedScript || script.command !== savedScript.command;
+  return (
+    <div
+      className="grid gap-2"
+      data-settings-dirty={nameIsDirty || commandIsDirty}
+      data-settings-dirty-level="container"
+    >
+      <div className="flex items-center gap-2">
+        <Input
+          value={script.name ?? ""}
+          onChange={(event) => onUpdate(repositoryId, script.id, { name: event.target.value })}
+          placeholder="Script name"
+          data-settings-dirty={nameIsDirty}
+        />
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={() => onDelete(repositoryId, script.id)}
+        >
+          <IconX className="h-4 w-4" />
+        </Button>
+      </div>
+      <Textarea
+        value={script.command ?? ""}
+        onChange={(event) => onUpdate(repositoryId, script.id, { command: event.target.value })}
+        placeholder="#!/bin/bash&#10;npm run dev"
+        rows={3}
+        className="font-mono text-sm"
+        data-settings-dirty={commandIsDirty}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/components/settings/secrets-settings.test.ts b/apps/web/components/settings/secrets-settings.test.ts
new file mode 100644
index 0000000000..0177880b69
--- /dev/null
+++ b/apps/web/components/settings/secrets-settings.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import type { SecretListItem } from "@/lib/types/http-secrets";
+import { getSecretDraftMeta } from "./secrets-settings";
+
+const secret: SecretListItem = {
+  id: "secret-1",
+  name: "Saved secret",
+  has_value: true,
+  created_at: "",
+  updated_at: "",
+};
+
+describe("getSecretDraftMeta", () => {
+  it("treats a newly opened secret form as dirty before persistence", () => {
+    const state = getSecretDraftMeta([], null, true, { name: "", value: "" });
+
+    expect(state.isDirty).toBe(true);
+    expect(state.revision.startsWith("new:")).toBe(true);
+  });
+
+  it("tracks existing secret edits against the saved name", () => {
+    expect(
+      getSecretDraftMeta([secret], secret.id, false, { name: secret.name, value: "" }).isDirty,
+    ).toBe(false);
+    expect(
+      getSecretDraftMeta([secret], secret.id, false, { name: "Renamed", value: "" }).isDirty,
+    ).toBe(true);
+  });
+});
diff --git a/apps/web/components/settings/secrets-settings.tsx b/apps/web/components/settings/secrets-settings.tsx
index 77a7475a60..d422607206 100644
--- a/apps/web/components/settings/secrets-settings.tsx
+++ b/apps/web/components/settings/secrets-settings.tsx
@@ -25,7 +25,7 @@ import {
 import { useRequest } from "@/lib/http/use-request";
 import type { SecretListItem } from "@/lib/types/http-secrets";
 
-type SecretFormState = {
+export type SecretFormState = {
   name: string;
   value: string;
 };
@@ -48,6 +48,8 @@ type SecretFormProps = {
   isValid: boolean;
   isBusy: boolean;
   submitLabel: string;
+  showSubmit?: boolean;
+  baselineState?: SecretFormState;
 };
 
 function SecretForm({
@@ -59,15 +61,24 @@ function SecretForm({
   isValid,
   isBusy,
   submitLabel,
+  showSubmit = true,
+  baselineState,
 }: SecretFormProps) {
+  const nameIsDirty = Boolean(baselineState) && formState.name.trim() !== baselineState?.name;
+  const valueIsDirty = Boolean(baselineState) && formState.value !== baselineState?.value;
   return (
-    <div className="rounded-lg border border-border/70 bg-background p-4 space-y-3">
+    <div
+      className="rounded-lg border border-border/70 bg-background p-4 space-y-3"
+      data-settings-dirty={nameIsDirty || valueIsDirty}
+    >
       <div className="text-sm font-medium text-foreground">{title}</div>
       <div className="space-y-2">
         <Input
           value={formState.name}
           onChange={(e) => onFormChange({ name: e.target.value })}
           placeholder="Name (e.g. OpenAI Production Key)"
+          disabled={isBusy}
+          data-settings-dirty={nameIsDirty}
         />
         <Textarea
           value={formState.value}
@@ -75,12 +86,16 @@ function SecretForm({
           placeholder="Secret value"
           rows={2}
           className="resize-y font-mono text-sm"
+          disabled={isBusy}
+          data-settings-dirty={valueIsDirty}
         />
       </div>
       <div className="flex items-center gap-2">
-        <Button onClick={onSubmit} disabled={!isValid || isBusy} className="cursor-pointer">
-          {submitLabel}
-        </Button>
+        {showSubmit && (
+          <Button onClick={onSubmit} disabled={!isValid || isBusy} className="cursor-pointer">
+            {submitLabel}
+          </Button>
+        )}
         <Button variant="ghost" onClick={onCancel} disabled={isBusy} className="cursor-pointer">
           Cancel
         </Button>
@@ -312,13 +327,13 @@ function useSecretsActions(state: ReturnType<typeof useSecretsState>) {
     resetForm,
     isValid,
     isBusy,
-    handleCreate: () => {
+    handleCreate: async () => {
       if (!isValid || isBusy) return;
-      createRequest.run(formState).catch(() => undefined);
+      await createRequest.run(formState);
     },
-    handleUpdate: () => {
+    handleUpdate: async () => {
       if (!isValid || isBusy || !editingId) return;
-      updateRequest.run(editingId, formState).catch(() => undefined);
+      await updateRequest.run(editingId, formState);
     },
     startEditing: (secret: SecretListItem) => {
       setEditingId(secret.id);
@@ -348,11 +363,47 @@ function useSecretsActions(state: ReturnType<typeof useSecretsState>) {
 /*  Main component                                                     */
 /* ------------------------------------------------------------------ */
 
+function getSecretEditState(
+  items: SecretListItem[],
+  editingId: string | null,
+  formState: SecretFormState,
+) {
+  const editingSecret = items.find((secret) => secret.id === editingId);
+  const revision = JSON.stringify({ ...formState, name: formState.name.trim() });
+  const savedRevision = JSON.stringify({ name: editingSecret?.name ?? "", value: "" });
+  return {
+    revision,
+    isDirty: Boolean(editingId) && revision !== savedRevision,
+    baseline: { name: editingSecret?.name ?? "", value: "" },
+  };
+}
+
+export function getSecretDraftMeta(
+  items: SecretListItem[],
+  editingId: string | null,
+  showCreate: boolean,
+  formState: SecretFormState,
+) {
+  const edit = getSecretEditState(items, editingId, formState);
+  return {
+    edit,
+    isDirty: showCreate || edit.isDirty,
+    revision: `${showCreate ? "new" : (editingId ?? "none")}:${edit.revision}`,
+  };
+}
+
 export function SecretsSettings() {
   const state = useSecretsState();
   const { loaded, editingId, showCreate, formState, setFormState, deleteTarget, items } = state;
   const actions = useSecretsActions(state);
   const { isValid, isBusy } = actions;
+  const { edit, isDirty, revision } = getSecretDraftMeta(items, editingId, showCreate, formState);
+  let invalidReason: string | undefined;
+  if (isDirty && !isValid) {
+    invalidReason = showCreate
+      ? "A secret name and value are required."
+      : "A secret name is required.";
+  }
 
   const onFormChange = (patch: Partial<SecretFormState>) =>
     setFormState((prev) => ({ ...prev, ...patch }));
@@ -361,10 +412,14 @@ export function SecretsSettings() {
     <SettingsPageTemplate
       title="Secrets"
       description="Manage API keys and credentials. Secrets are encrypted at rest and injected into agent environments via executor profile env vars."
-      isDirty={false}
+      isDirty={isDirty}
       saveStatus="idle"
-      onSave={() => undefined}
-      showSaveButton={false}
+      saveId="secrets-item-draft"
+      saveRevision={revision}
+      canSave={!isDirty || isValid}
+      invalidReason={invalidReason}
+      onSave={showCreate ? actions.handleCreate : actions.handleUpdate}
+      onDiscard={actions.resetForm}
     >
       <div className="space-y-6">
         <div className="flex items-center justify-between">
@@ -388,6 +443,8 @@ export function SecretsSettings() {
             isValid={isValid}
             isBusy={isBusy}
             submitLabel="Add secret"
+            showSubmit={false}
+            baselineState={defaultFormState}
           />
         )}
 
@@ -401,6 +458,8 @@ export function SecretsSettings() {
             isValid={isValid}
             isBusy={isBusy}
             submitLabel="Save changes"
+            showSubmit={false}
+            baselineState={edit.baseline}
           />
         )}
 
diff --git a/apps/web/components/settings/settings-card.tsx b/apps/web/components/settings/settings-card.tsx
new file mode 100644
index 0000000000..609bde7105
--- /dev/null
+++ b/apps/web/components/settings/settings-card.tsx
@@ -0,0 +1,10 @@
+import type { ComponentProps } from "react";
+import { Card } from "@kandev/ui/card";
+
+type SettingsCardProps = ComponentProps<typeof Card> & {
+  isDirty?: boolean;
+};
+
+export function SettingsCard({ isDirty = false, ...props }: SettingsCardProps) {
+  return <Card {...props} data-settings-dirty={isDirty} data-settings-dirty-level="card" />;
+}
diff --git a/apps/web/components/settings/settings-dirty.test.ts b/apps/web/components/settings/settings-dirty.test.ts
new file mode 100644
index 0000000000..3b28b58648
--- /dev/null
+++ b/apps/web/components/settings/settings-dirty.test.ts
@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { isDraftEntryDirty, isEditorsSettingsDirty, isSetMembershipDirty } from "./settings-dirty";
+
+describe("settings dirty comparisons", () => {
+  it("compares membership without depending on array order", () => {
+    expect(isSetMembershipDirty(["go", "typescript"], ["typescript", "go"])).toBe(false);
+    expect(isSetMembershipDirty(["go"], ["go", "typescript"])).toBe(true);
+    expect(isSetMembershipDirty(["go", "go"], ["go", "typescript"])).toBe(true);
+    expect(isSetMembershipDirty(["go", "go"], ["go"])).toBe(false);
+  });
+
+  it("marks only the changed record entry", () => {
+    const draft = { go: '{"gofumpt":true}', typescript: "{}" };
+    const baseline = { go: "{}", typescript: "{}" };
+
+    expect(isDraftEntryDirty(draft, baseline, "go")).toBe(true);
+    expect(isDraftEntryDirty(draft, baseline, "typescript")).toBe(false);
+    expect(isDraftEntryDirty({}, {}, "python")).toBe(false);
+  });
+
+  it("compares the complete editors draft", () => {
+    const baseline = {
+      defaultEditorId: "vscode",
+      baselineDefaultId: "vscode",
+      lspAutoStartLanguages: ["go"],
+      baselineLspAutoStart: ["go"],
+      lspAutoInstallLanguages: ["go"],
+      baselineLspAutoInstall: ["go"],
+      lspConfigStrings: { go: "{}" },
+      baselineLspConfigStrings: { go: "{}" },
+    };
+
+    expect(isEditorsSettingsDirty(baseline)).toBe(false);
+    expect(isEditorsSettingsDirty({ ...baseline, defaultEditorId: "cursor" })).toBe(true);
+  });
+});
diff --git a/apps/web/components/settings/settings-dirty.ts b/apps/web/components/settings/settings-dirty.ts
new file mode 100644
index 0000000000..df3bce19d0
--- /dev/null
+++ b/apps/web/components/settings/settings-dirty.ts
@@ -0,0 +1,37 @@
+export function isSetMembershipDirty(
+  draft: readonly string[],
+  baseline: readonly string[],
+): boolean {
+  const draftValues = new Set(draft);
+  const baselineValues = new Set(baseline);
+  if (draftValues.size !== baselineValues.size) return true;
+  return [...draftValues].some((value) => !baselineValues.has(value));
+}
+
+export function isDraftEntryDirty(
+  draft: Readonly<Record<string, string>>,
+  baseline: Readonly<Record<string, string>>,
+  key: string,
+): boolean {
+  return (draft[key] ?? "") !== (baseline[key] ?? "");
+}
+
+type EditorsDirtyState = {
+  defaultEditorId: string;
+  baselineDefaultId: string;
+  lspAutoStartLanguages: readonly string[];
+  baselineLspAutoStart: readonly string[];
+  lspAutoInstallLanguages: readonly string[];
+  baselineLspAutoInstall: readonly string[];
+  lspConfigStrings: Readonly<Record<string, string>>;
+  baselineLspConfigStrings: Readonly<Record<string, string>>;
+};
+
+export function isEditorsSettingsDirty(state: EditorsDirtyState): boolean {
+  return (
+    state.defaultEditorId !== state.baselineDefaultId ||
+    isSetMembershipDirty(state.lspAutoStartLanguages, state.baselineLspAutoStart) ||
+    isSetMembershipDirty(state.lspAutoInstallLanguages, state.baselineLspAutoInstall) ||
+    JSON.stringify(state.lspConfigStrings) !== JSON.stringify(state.baselineLspConfigStrings)
+  );
+}
diff --git a/apps/web/components/settings/settings-floating-save.tsx b/apps/web/components/settings/settings-floating-save.tsx
new file mode 100644
index 0000000000..ca3914ffc5
--- /dev/null
+++ b/apps/web/components/settings/settings-floating-save.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@kandev/ui/alert-dialog";
+import { Button } from "@kandev/ui/button";
+import { IconAlertCircle, IconCheck, IconDeviceFloppy, IconLoader2 } from "@tabler/icons-react";
+import { createPortal } from "react-dom";
+
+import { useConfigChatFloatingActionsHost } from "@/components/config-chat/config-chat-provider";
+import type { NavigationIntent } from "@/lib/routing/navigation-guard";
+import { cn } from "@/lib/utils";
+
+export type SettingsSaveStatus = "dirty" | "saving" | "saved" | "error";
+
+type SettingsFloatingSaveProps = {
+  status: SettingsSaveStatus;
+  dirtyContributorIds?: string;
+  invalidReason?: string;
+  navigationIntent: NavigationIntent | null;
+  isDiscarding: boolean;
+  onSave: () => Promise<boolean>;
+  onDiscardAndLeave: () => Promise<void> | void;
+  onContinueEditing: () => void;
+};
+
+export function SettingsFloatingSave({
+  status,
+  dirtyContributorIds,
+  invalidReason,
+  navigationIntent,
+  isDiscarding,
+  onSave,
+  onDiscardAndLeave,
+  onContinueEditing,
+}: SettingsFloatingSaveProps) {
+  const isSaving = status === "saving";
+  const isSaved = status === "saved";
+  const isInvalid = Boolean(invalidReason);
+  const isBusy = isSaving || isDiscarding;
+  const buttonLabel = status === "error" ? "Retry save" : "Save changes";
+  const accessibleLabel = getAccessibleLabel(status, buttonLabel);
+  const configChatFloatingActionsHost = useConfigChatFloatingActionsHost();
+  const isHostedByConfigChat = configChatFloatingActionsHost !== null;
+  const saveAction = (
+    <div
+      className={cn(
+        "pointer-events-none z-40 max-w-[calc(100vw_-_2rem_-_env(safe-area-inset-left)_-_env(safe-area-inset-right))]",
+        !isHostedByConfigChat &&
+          "fixed right-[calc(1rem_+_env(safe-area-inset-right))] bottom-[calc(5.25rem_+_env(safe-area-inset-bottom))]",
+      )}
+      data-testid="settings-floating-save"
+      data-dirty-contributors={dirtyContributorIds}
+    >
+      <div className="pointer-events-auto flex min-h-11 max-w-full flex-col items-stretch gap-2 rounded-md border bg-background p-2 shadow-lg sm:flex-row sm:items-center">
+        {status === "error" && (
+          <span className="flex items-center gap-1 text-xs text-destructive" role="status">
+            <IconAlertCircle className="size-4" />
+            Couldn't save
+          </span>
+        )}
+        {invalidReason && (
+          <span className="max-w-64 text-xs text-destructive" role="status">
+            {invalidReason}
+          </span>
+        )}
+        <Button
+          type="button"
+          size="lg"
+          className="min-h-12 cursor-pointer bg-success text-success-foreground hover:bg-success/85 focus-visible:border-success focus-visible:ring-success/35"
+          disabled={isBusy || isSaved || isInvalid}
+          aria-label={accessibleLabel}
+          onClick={() => void onSave()}
+        >
+          <SaveButtonIcon status={status} />
+          {accessibleLabel === "Saving changes" ? "Saving..." : accessibleLabel}
+        </Button>
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      {isHostedByConfigChat ? createPortal(saveAction, configChatFloatingActionsHost) : saveAction}
+
+      <AlertDialog open={navigationIntent !== null}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Save changes before leaving?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This page has unsaved changes. Save them, discard them, or continue editing.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel
+              className="cursor-pointer"
+              disabled={isBusy}
+              onClick={onContinueEditing}
+            >
+              Continue editing
+            </AlertDialogCancel>
+            <Button
+              type="button"
+              variant="outline"
+              className="cursor-pointer"
+              disabled={isBusy}
+              onClick={() => void onDiscardAndLeave()}
+            >
+              {isDiscarding ? "Discarding..." : "Discard and leave"}
+            </Button>
+            <AlertDialogAction
+              className="cursor-pointer bg-success text-success-foreground hover:bg-success/85 focus-visible:border-success focus-visible:ring-success/35"
+              data-dialog-default-action
+              disabled={isBusy || isInvalid}
+              onClick={(event) => {
+                event.preventDefault();
+                void onSave();
+              }}
+            >
+              {isSaving ? "Saving..." : "Save and leave"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
+
+function SaveButtonIcon({ status }: { status: SettingsSaveStatus }) {
+  if (status === "saving") return <IconLoader2 className="size-4 animate-spin" />;
+  if (status === "saved") return <IconCheck className="size-4" />;
+  return <IconDeviceFloppy className="size-4" />;
+}
+
+function getAccessibleLabel(status: SettingsSaveStatus, buttonLabel: string): string {
+  if (status === "saving") return "Saving changes";
+  if (status === "saved") return "Saved";
+  return buttonLabel;
+}
diff --git a/apps/web/components/settings/settings-layout-client.test.tsx b/apps/web/components/settings/settings-layout-client.test.tsx
index d64cfb4e80..51c4cbe136 100644
--- a/apps/web/components/settings/settings-layout-client.test.tsx
+++ b/apps/web/components/settings/settings-layout-client.test.tsx
@@ -6,6 +6,7 @@ let pathname = "/settings/integrations/github";
 const COPY_CONFIG_TEST_ID = "mock-copy-config";
 
 const state = {
+  configChat: { isOpen: false },
   workspaces: {
     activeId: "ws-1",
     items: [
@@ -24,6 +25,8 @@ vi.mock("@/lib/routing/client-router", () => ({
 
 vi.mock("@/components/state-provider", () => ({
   useAppStore: (selector: (s: typeof state) => unknown) => selector(state),
+  useOptionalAppStore: (selector: (s: typeof state) => unknown, fallback: unknown) =>
+    selector(state) ?? fallback,
 }));
 
 vi.mock("@/components/page-topbar", () => ({
@@ -43,6 +46,18 @@ vi.mock("@/components/integrations/integration-copy-config-menu", () => ({
 }));
 
 import { SettingsLayoutClient } from "./settings-layout-client";
+import { useSettingsSaveContributor } from "./settings-save-provider";
+
+function DirtySettings() {
+  useSettingsSaveContributor({
+    id: "dirty-settings",
+    revision: 1,
+    isDirty: true,
+    save: vi.fn(),
+    discard: vi.fn(),
+  });
+  return <div>Dirty settings</div>;
+}
 
 describe("SettingsLayoutClient integrations actions", () => {
   beforeEach(() => {
@@ -101,4 +116,19 @@ describe("SettingsLayoutClient integrations actions", () => {
 
     expect(screen.getByTestId(COPY_CONFIG_TEST_ID).dataset.sourceWorkspaceId).toBe("ws-1");
   });
+
+  it("hosts the route save action and reserves safe-area scroll space", async () => {
+    pathname = "/settings/general/appearance";
+
+    render(
+      <SettingsLayoutClient>
+        <DirtySettings />
+      </SettingsLayoutClient>,
+    );
+
+    expect(await screen.findByTestId("settings-floating-save")).toBeTruthy();
+    expect(screen.getByTestId("settings-scroll-container").className).toContain(
+      "safe-area-inset-bottom",
+    );
+  });
 });
diff --git a/apps/web/components/settings/settings-layout-client.tsx b/apps/web/components/settings/settings-layout-client.tsx
index c1fa6fd601..7c47073c99 100644
--- a/apps/web/components/settings/settings-layout-client.tsx
+++ b/apps/web/components/settings/settings-layout-client.tsx
@@ -13,6 +13,7 @@ import { useAppStore } from "@/components/state-provider";
 import { IntegrationCopyConfigMenu } from "@/components/integrations/integration-copy-config-menu";
 import { integrationFromPathname } from "@/components/integrations/integration-copy-config";
 import { safeDecodePathSegment } from "@/lib/routing/path";
+import { SettingsSaveProvider } from "@/components/settings/settings-save-provider";
 
 // Brand/initialism overrides so the derived label matches how the rest of the
 // app spells these (e.g. "github" → "GitHub", not "Github"). Anything not
@@ -214,25 +215,27 @@ function SettingsShell({
 
   return (
     <TooltipProvider>
-      <main className="flex min-h-0 flex-1 flex-col">
-        <PageTopbar
-          title={title}
-          backHref={backHref}
-          backLabel={backLabel}
-          parents={parents}
-          leading={<SettingsMobileMenu pathname={pathname} />}
-          className="h-10"
-          actions={showIntegrationCopyAction ? <IntegrationCopyConfigAction /> : undefined}
-        />
-        {/* Scroll the content, not the topbar: min-h-0 lets this flex child
-            shrink below its content height so overflow-y-auto can take effect. */}
-        <div
-          data-testid="settings-scroll-container"
-          className="flex min-w-0 min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain p-4 pb-20"
-        >
-          {children}
-        </div>
-      </main>
+      <SettingsSaveProvider key={pathname}>
+        <main className="flex min-h-0 flex-1 flex-col">
+          <PageTopbar
+            title={title}
+            backHref={backHref}
+            backLabel={backLabel}
+            parents={parents}
+            leading={<SettingsMobileMenu pathname={pathname} />}
+            className="h-10"
+            actions={showIntegrationCopyAction ? <IntegrationCopyConfigAction /> : undefined}
+          />
+          {/* Scroll the content, not the topbar: min-h-0 lets this flex child
+              shrink below its content height so overflow-y-auto can take effect. */}
+          <div
+            data-testid="settings-scroll-container"
+            className="flex min-w-0 min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain p-4 pb-[calc(6rem_+_env(safe-area-inset-bottom))]"
+          >
+            {children}
+          </div>
+        </main>
+      </SettingsSaveProvider>
     </TooltipProvider>
   );
 }
diff --git a/apps/web/components/settings/settings-page-template.tsx b/apps/web/components/settings/settings-page-template.tsx
index 7a3747341a..3e2d11ed23 100644
--- a/apps/web/components/settings/settings-page-template.tsx
+++ b/apps/web/components/settings/settings-page-template.tsx
@@ -1,15 +1,26 @@
 "use client";
 
-import { Card, CardContent } from "@kandev/ui/card";
+import { CardContent } from "@kandev/ui/card";
 import { Separator } from "@kandev/ui/separator";
-import { UnsavedChangesBadge, UnsavedSaveButton } from "@/components/settings/unsaved-indicator";
+import { SettingsCard } from "@/components/settings/settings-card";
+import {
+  SettingsSaveDirtyScope,
+  useSettingsSaveContributor,
+  type SettingsSaveRevision,
+} from "@/components/settings/settings-save-provider";
 
 type SettingsPageTemplateProps = {
   title: string;
   description?: string;
   isDirty: boolean;
+  cardIsDirty?: boolean;
   saveStatus: "idle" | "loading" | "success" | "error";
-  onSave: () => void;
+  onSave: () => Promise<unknown> | void;
+  saveId?: string;
+  saveRevision?: SettingsSaveRevision;
+  canSave?: boolean;
+  invalidReason?: string;
+  onDiscard?: () => void;
   showSaveButton?: boolean;
   children: React.ReactNode;
   deleteSection?: React.ReactNode;
@@ -19,37 +30,47 @@ export function SettingsPageTemplate({
   title,
   description,
   isDirty,
-  saveStatus,
+  cardIsDirty = isDirty,
   onSave,
+  saveId,
+  saveRevision = 0,
+  canSave = true,
+  invalidReason,
+  onDiscard,
   showSaveButton = true,
   children,
   deleteSection,
 }: SettingsPageTemplateProps) {
+  useSettingsSaveContributor({
+    id: saveId ?? `settings-page:${title}`,
+    revision: saveRevision,
+    isDirty: showSaveButton && isDirty,
+    canSave,
+    invalidReason,
+    save: async () => {
+      await onSave();
+    },
+    discard: onDiscard ?? (() => undefined),
+  });
+
   return (
     <div className="space-y-8">
-      <div className="flex items-start justify-between">
+      <div>
         <div>
           <h2 className="text-2xl font-bold">{title}</h2>
           {description && <p className="text-sm text-muted-foreground mt-1">{description}</p>}
         </div>
-        {showSaveButton && (
-          <div className="flex items-center gap-3">
-            {isDirty && <UnsavedChangesBadge />}
-            <UnsavedSaveButton
-              isDirty={isDirty}
-              isLoading={saveStatus === "loading"}
-              status={saveStatus}
-              onClick={onSave}
-            />
-          </div>
-        )}
       </div>
 
       <Separator />
 
-      <Card className={isDirty ? "border border-yellow-500/60" : "border"}>
-        <CardContent className="">{children}</CardContent>
-      </Card>
+      <SettingsSaveDirtyScope>
+        {(nestedIsDirty) => (
+          <SettingsCard isDirty={cardIsDirty || nestedIsDirty}>
+            <CardContent className="">{children}</CardContent>
+          </SettingsCard>
+        )}
+      </SettingsSaveDirtyScope>
 
       {deleteSection}
     </div>
diff --git a/apps/web/components/settings/settings-save-provider.test.tsx b/apps/web/components/settings/settings-save-provider.test.tsx
new file mode 100644
index 0000000000..d25cf78416
--- /dev/null
+++ b/apps/web/components/settings/settings-save-provider.test.tsx
@@ -0,0 +1,366 @@
+import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import Link from "@/components/routing/app-link";
+import { clearNavigationBlockerForTests } from "@/lib/routing/navigation-guard";
+import {
+  SettingsSaveProvider,
+  SettingsSaveCancelledError,
+  useSettingsSaveContributor,
+  type SettingsSaveRevision,
+} from "./settings-save-provider";
+
+type Deferred = {
+  promise: Promise<void>;
+  resolve: () => void;
+};
+
+const SAVE_CHANGES_LABEL = "Save changes";
+const APPEARANCE_PATH = "/settings/general/appearance";
+const TERMINAL_PATH = "/settings/general/terminal";
+
+function deferred(): Deferred {
+  let resolve: () => void = () => undefined;
+  const promise = new Promise<void>((done) => {
+    resolve = done;
+  });
+  return { promise, resolve };
+}
+
+function DraftContributor({
+  id,
+  order,
+  initialRevision = 1,
+  canSave = true,
+  onSave,
+  onDiscard,
+}: {
+  id: string;
+  order?: number;
+  initialRevision?: number;
+  canSave?: boolean;
+  onSave: (revision: SettingsSaveRevision) => Promise<void> | void;
+  onDiscard?: () => Promise<void> | void;
+}) {
+  const [revision, setRevision] = useState(initialRevision);
+  const [savedRevision, setSavedRevision] = useState(0);
+
+  useSettingsSaveContributor({
+    id,
+    order,
+    revision,
+    isDirty: revision !== savedRevision,
+    canSave,
+    invalidReason: canSave ? undefined : `${id} is invalid`,
+    save: async (submittedRevision) => {
+      await onSave(submittedRevision);
+      setSavedRevision(submittedRevision as number);
+    },
+    discard: async () => {
+      await onDiscard?.();
+      setRevision(savedRevision);
+    },
+  });
+
+  return (
+    <button type="button" onClick={() => setRevision((current) => current + 1)}>
+      Edit {id}
+    </button>
+  );
+}
+
+function BooleanDraftContributor({ pending }: { pending: Deferred }) {
+  const [draft, setDraft] = useState(true);
+  const [baseline, setBaseline] = useState(false);
+
+  useSettingsSaveContributor({
+    id: "toggle",
+    revision: Number(draft),
+    isDirty: draft !== baseline,
+    save: async (revision) => {
+      await pending.promise;
+      setBaseline(Boolean(revision));
+    },
+    discard: () => setDraft(baseline),
+  });
+
+  return (
+    <button type="button" onClick={() => setDraft((current) => !current)}>
+      Toggle
+    </button>
+  );
+}
+
+function ResettingDraftContributor() {
+  const [mode, setMode] = useState<"create" | "idle">("create");
+
+  useSettingsSaveContributor({
+    id: "resetting-draft",
+    revision: mode,
+    isDirty: mode === "create",
+    save: () => setMode("idle"),
+    discard: () => setMode("idle"),
+  });
+
+  return null;
+}
+
+afterEach(() => {
+  cleanup();
+  clearNavigationBlockerForTests();
+  vi.restoreAllMocks();
+});
+
+describe("SettingsSaveProvider", () => {
+  it("saves dirty contributors in stable order and retries only failures", async () => {
+    const calls: string[] = [];
+    let failSecond = true;
+
+    render(
+      <SettingsSaveProvider>
+        <DraftContributor
+          id="second"
+          order={20}
+          onSave={() => {
+            calls.push("second");
+          }}
+        />
+        <DraftContributor
+          id="first"
+          order={10}
+          onSave={() => {
+            calls.push("first");
+          }}
+        />
+        <DraftContributor
+          id="failing"
+          order={30}
+          onSave={() => {
+            calls.push("failing");
+            if (failSecond) {
+              failSecond = false;
+              throw new Error("network unavailable");
+            }
+          }}
+        />
+      </SettingsSaveProvider>,
+    );
+
+    fireEvent.click(await screen.findByRole("button", { name: SAVE_CHANGES_LABEL }));
+
+    expect(await screen.findByText("Couldn't save")).toBeTruthy();
+    expect(calls).toEqual(["first", "second", "failing"]);
+
+    fireEvent.click(screen.getByRole("button", { name: "Retry save" }));
+
+    await waitFor(() => expect(screen.queryByRole("button", { name: "Retry save" })).toBeNull());
+    expect(calls).toEqual(["first", "second", "failing", "failing"]);
+  });
+
+  it("keeps a newer revision dirty when an earlier save finishes", async () => {
+    const pending = deferred();
+    const revisions: SettingsSaveRevision[] = [];
+
+    render(
+      <SettingsSaveProvider>
+        <DraftContributor
+          id="profile"
+          onSave={async (revision) => {
+            revisions.push(revision);
+            await pending.promise;
+          }}
+        />
+      </SettingsSaveProvider>,
+    );
+
+    fireEvent.click(await screen.findByRole("button", { name: SAVE_CHANGES_LABEL }));
+    expect(screen.getByRole("button", { name: "Saving changes" }).hasAttribute("disabled")).toBe(
+      true,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Edit profile" }));
+
+    await act(async () => pending.resolve());
+
+    expect(await screen.findByRole("button", { name: SAVE_CHANGES_LABEL })).toBeTruthy();
+    expect(revisions).toEqual([1]);
+  });
+});
+
+describe("SettingsSaveProvider save state", () => {
+  it("keeps a cancelled save pending without reporting an error", async () => {
+    render(
+      <SettingsSaveProvider>
+        <DraftContributor
+          id="ssh"
+          onSave={() => {
+            throw new SettingsSaveCancelledError();
+          }}
+        />
+      </SettingsSaveProvider>,
+    );
+
+    fireEvent.click(await screen.findByRole("button", { name: SAVE_CHANGES_LABEL }));
+
+    expect(await screen.findByRole("button", { name: SAVE_CHANGES_LABEL })).toBeTruthy();
+    expect(screen.queryByText("Couldn't save")).toBeNull();
+  });
+
+  it("keeps a toggle dirty when it returns to the old baseline during an in-flight save", async () => {
+    const pending = deferred();
+
+    render(
+      <SettingsSaveProvider>
+        <BooleanDraftContributor pending={pending} />
+      </SettingsSaveProvider>,
+    );
+
+    fireEvent.click(await screen.findByRole("button", { name: SAVE_CHANGES_LABEL }));
+    fireEvent.click(screen.getByRole("button", { name: "Toggle" }));
+    await act(async () => pending.resolve());
+
+    expect(await screen.findByRole("button", { name: SAVE_CHANGES_LABEL })).toBeTruthy();
+  });
+
+  it("disables saving while a dirty contributor is invalid", async () => {
+    render(
+      <SettingsSaveProvider>
+        <DraftContributor id="invalid-profile" canSave={false} onSave={vi.fn()} />
+      </SettingsSaveProvider>,
+    );
+
+    const save = await screen.findByRole("button", { name: SAVE_CHANGES_LABEL });
+    expect(save.hasAttribute("disabled")).toBe(true);
+    expect(screen.getByText("invalid-profile is invalid")).toBeTruthy();
+  });
+
+  it("briefly confirms a successful save", async () => {
+    render(
+      <SettingsSaveProvider>
+        <DraftContributor id="appearance" onSave={vi.fn()} />
+      </SettingsSaveProvider>,
+    );
+
+    fireEvent.click(await screen.findByRole("button", { name: SAVE_CHANGES_LABEL }));
+
+    expect(await screen.findByRole("button", { name: "Saved" })).toBeTruthy();
+  });
+});
+
+describe("SettingsSaveProvider navigation", () => {
+  it("offers discard before in-app navigation and warns before reload", async () => {
+    window.history.replaceState({}, "", APPEARANCE_PATH);
+
+    render(
+      <SettingsSaveProvider>
+        <DraftContributor id="appearance" onSave={vi.fn()} />
+        <Link href={TERMINAL_PATH}>Terminal</Link>
+      </SettingsSaveProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("link", { name: "Terminal" }));
+
+    expect(await screen.findByRole("alertdialog")).toBeTruthy();
+    expect(window.location.pathname).toBe(APPEARANCE_PATH);
+
+    const unload = new Event("beforeunload", { cancelable: true });
+    window.dispatchEvent(unload);
+    expect(unload.defaultPrevented).toBe(true);
+
+    fireEvent.click(screen.getByRole("button", { name: "Discard and leave" }));
+    await waitFor(() => expect(window.location.pathname).toBe(TERMINAL_PATH));
+  });
+
+  it("runs an asynchronous discard only once while leaving", async () => {
+    window.history.replaceState({}, "", APPEARANCE_PATH);
+    const pending = deferred();
+    const onDiscard = vi.fn(() => pending.promise);
+
+    render(
+      <SettingsSaveProvider>
+        <DraftContributor id="appearance" onSave={vi.fn()} onDiscard={onDiscard} />
+        <Link href={TERMINAL_PATH}>Terminal</Link>
+      </SettingsSaveProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("link", { name: "Terminal" }));
+    const discard = await screen.findByRole("button", { name: "Discard and leave" });
+    fireEvent.click(discard);
+    fireEvent.click(discard);
+
+    expect(onDiscard).toHaveBeenCalledOnce();
+    expect(screen.getByRole("button", { name: "Discarding..." }).hasAttribute("disabled")).toBe(
+      true,
+    );
+
+    await act(async () => pending.resolve());
+    await waitFor(() => expect(window.location.pathname).toBe(TERMINAL_PATH));
+  });
+
+  it("saves before approved navigation and stays put when saving fails", async () => {
+    window.history.replaceState({}, "", APPEARANCE_PATH);
+    let shouldFail = true;
+
+    render(
+      <SettingsSaveProvider>
+        <DraftContributor
+          id="appearance"
+          onSave={() => {
+            if (shouldFail) throw new Error("save failed");
+          }}
+        />
+        <Link href={TERMINAL_PATH}>Terminal</Link>
+      </SettingsSaveProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("link", { name: "Terminal" }));
+    fireEvent.click(await screen.findByRole("button", { name: "Save and leave" }));
+
+    expect(await screen.findByText("Couldn't save")).toBeTruthy();
+    expect(window.location.pathname).toBe(APPEARANCE_PATH);
+
+    shouldFail = false;
+    fireEvent.click(screen.getByRole("button", { name: "Save and leave" }));
+    await waitFor(() => expect(window.location.pathname).toBe(TERMINAL_PATH));
+  });
+
+  it("continues navigation when a successful save resets the draft revision", async () => {
+    window.history.replaceState({}, "", APPEARANCE_PATH);
+
+    render(
+      <SettingsSaveProvider>
+        <ResettingDraftContributor />
+        <Link href={TERMINAL_PATH}>Terminal</Link>
+      </SettingsSaveProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("link", { name: "Terminal" }));
+    fireEvent.click(await screen.findByRole("button", { name: "Save and leave" }));
+
+    await waitFor(() => expect(window.location.pathname).toBe(TERMINAL_PATH));
+  });
+
+  it("hides the action after the last dirty contributor unregisters", async () => {
+    function RemovableDraft() {
+      const [visible, setVisible] = useState(true);
+      return (
+        <>
+          {visible && <DraftContributor id="temporary" onSave={vi.fn()} />}
+          <button type="button" onClick={() => setVisible(false)}>
+            Remove draft
+          </button>
+        </>
+      );
+    }
+
+    render(
+      <SettingsSaveProvider>
+        <RemovableDraft />
+      </SettingsSaveProvider>,
+    );
+
+    expect(await screen.findByTestId("settings-floating-save")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Remove draft" }));
+    await waitFor(() => expect(screen.queryByTestId("settings-floating-save")).toBeNull());
+  });
+});
diff --git a/apps/web/components/settings/settings-save-provider.tsx b/apps/web/components/settings/settings-save-provider.tsx
new file mode 100644
index 0000000000..30f480054a
--- /dev/null
+++ b/apps/web/components/settings/settings-save-provider.tsx
@@ -0,0 +1,333 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+
+import { setNavigationBlocker, type NavigationIntent } from "@/lib/routing/navigation-guard";
+import { SettingsFloatingSave, type SettingsSaveStatus } from "./settings-floating-save";
+
+export type SettingsSaveRevision = string | number;
+
+export class SettingsSaveCancelledError extends Error {
+  constructor(message = "Save cancelled") {
+    super(message);
+    this.name = "SettingsSaveCancelledError";
+  }
+}
+
+export type SettingsSaveContributor = {
+  id: string;
+  order?: number;
+  revision: SettingsSaveRevision;
+  isDirty: boolean;
+  canSave?: boolean;
+  invalidReason?: string;
+  save: (revision: SettingsSaveRevision) => Promise<void> | void;
+  discard: () => Promise<void> | void;
+};
+
+type RegisteredContributor = {
+  contributor: SettingsSaveContributor;
+  registrationOrder: number;
+};
+
+type Registry = {
+  upsert: (contributor: SettingsSaveContributor) => void;
+  unregister: (id: string) => void;
+};
+
+type DirtyScopeRegistry = {
+  upsert: (id: string, isDirty: boolean) => void;
+  unregister: (id: string) => void;
+};
+
+type SaveResult = {
+  canLeave: boolean;
+  failedIds: Set<string>;
+};
+
+const SettingsSaveRegistryContext = createContext<Registry | null>(null);
+const SettingsDirtyScopeContext = createContext<DirtyScopeRegistry | null>(null);
+
+export function SettingsSaveProvider({ children }: { children: ReactNode }) {
+  const { contributors, registry, dirtyContributors, refreshRegistry } = useContributorRegistry();
+  const { status, saveAll, clearSavedStatus, markError } = useSaveCoordinator(
+    contributors,
+    refreshRegistry,
+  );
+  const pendingNavigationRef = useRef<NavigationIntent | null>(null);
+  const discardingRef = useRef(false);
+  const [pendingNavigation, setPendingNavigation] = useState<NavigationIntent | null>(null);
+  const [isDiscarding, setIsDiscarding] = useState(false);
+  const hasDirty = dirtyContributors.length > 0;
+  const invalidReason = dirtyContributors.find(({ contributor }) => contributor.canSave === false)
+    ?.contributor.invalidReason;
+  const displayStatus = status === "saved" && hasDirty ? "dirty" : status;
+
+  useEffect(() => {
+    if (status !== "saved") return;
+    const timeout = window.setTimeout(clearSavedStatus, 1500);
+    return () => window.clearTimeout(timeout);
+  }, [clearSavedStatus, status]);
+
+  const handleSave = useCallback(async (): Promise<boolean> => {
+    const result = await saveAll();
+    if (!result.canLeave || !pendingNavigationRef.current) return result.canLeave;
+
+    const intent = pendingNavigationRef.current;
+    pendingNavigationRef.current = null;
+    setPendingNavigation(null);
+    intent.proceed();
+    return true;
+  }, [saveAll]);
+
+  const discardAndLeave = useCallback(async () => {
+    if (discardingRef.current) return;
+    discardingRef.current = true;
+    setIsDiscarding(true);
+    try {
+      for (const { contributor } of getDirtyContributors(contributors)) {
+        await contributor.discard();
+      }
+    } catch {
+      markError();
+      return;
+    } finally {
+      discardingRef.current = false;
+      setIsDiscarding(false);
+    }
+    const intent = pendingNavigationRef.current;
+    pendingNavigationRef.current = null;
+    setPendingNavigation(null);
+    intent?.proceed();
+  }, [contributors, markError]);
+
+  const continueEditing = useCallback(() => {
+    const intent = pendingNavigationRef.current;
+    pendingNavigationRef.current = null;
+    setPendingNavigation(null);
+    intent?.cancel();
+  }, []);
+
+  useEffect(() => {
+    if (!hasDirty) return;
+    return setNavigationBlocker((intent) => {
+      pendingNavigationRef.current?.cancel();
+      pendingNavigationRef.current = intent;
+      setPendingNavigation(intent);
+    });
+  }, [hasDirty]);
+
+  useEffect(() => {
+    if (!hasDirty) return;
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [hasDirty]);
+
+  return (
+    <SettingsSaveRegistryContext.Provider value={registry}>
+      {children}
+      {(hasDirty || status === "saved") && (
+        <SettingsFloatingSave
+          status={displayStatus}
+          dirtyContributorIds={dirtyContributors.map(({ contributor }) => contributor.id).join(",")}
+          invalidReason={invalidReason}
+          navigationIntent={pendingNavigation}
+          isDiscarding={isDiscarding}
+          onSave={handleSave}
+          onDiscardAndLeave={discardAndLeave}
+          onContinueEditing={continueEditing}
+        />
+      )}
+    </SettingsSaveRegistryContext.Provider>
+  );
+}
+
+export function SettingsSaveDirtyScope({
+  children,
+}: {
+  children: (isDirty: boolean) => ReactNode;
+}) {
+  const dirtyIdsRef = useRef(new Set<string>());
+  const [, setVersion] = useState(0);
+  const registry = useMemo<DirtyScopeRegistry>(
+    () => ({
+      upsert: (id, isDirty) => {
+        const changed = isDirty ? !dirtyIdsRef.current.has(id) : dirtyIdsRef.current.has(id);
+        if (!changed) return;
+        if (isDirty) dirtyIdsRef.current.add(id);
+        else dirtyIdsRef.current.delete(id);
+        setVersion((version) => version + 1);
+      },
+      unregister: (id) => {
+        if (dirtyIdsRef.current.delete(id)) setVersion((version) => version + 1);
+      },
+    }),
+    [],
+  );
+
+  return (
+    <SettingsDirtyScopeContext.Provider value={registry}>
+      {children(dirtyIdsRef.current.size > 0)}
+    </SettingsDirtyScopeContext.Provider>
+  );
+}
+
+function useContributorRegistry() {
+  const contributorsRef = useRef(new Map<string, RegisteredContributor>());
+  const registrationOrderRef = useRef(0);
+  const [, setRegistryVersion] = useState(0);
+  const refreshRegistry = useCallback(() => setRegistryVersion((version) => version + 1), []);
+  const registry = useMemo<Registry>(
+    () => ({
+      upsert: (contributor) => {
+        const existing = contributorsRef.current.get(contributor.id);
+        if (!existing) {
+          registrationOrderRef.current += 1;
+          contributorsRef.current.set(contributor.id, {
+            contributor,
+            registrationOrder: registrationOrderRef.current,
+          });
+          refreshRegistry();
+          return;
+        }
+        const changed = hasObservableChange(existing.contributor, contributor);
+        existing.contributor = contributor;
+        if (changed) refreshRegistry();
+      },
+      unregister: (id) => {
+        if (contributorsRef.current.delete(id)) refreshRegistry();
+      },
+    }),
+    [refreshRegistry],
+  );
+
+  return {
+    contributors: contributorsRef.current,
+    registry,
+    dirtyContributors: getDirtyContributors(contributorsRef.current),
+    refreshRegistry,
+  };
+}
+
+function useSaveCoordinator(
+  contributors: Map<string, RegisteredContributor>,
+  refreshRegistry: () => void,
+) {
+  const savingRef = useRef(false);
+  const [status, setStatus] = useState<SettingsSaveStatus>("dirty");
+  const clearSavedStatus = useCallback(() => setStatus("dirty"), []);
+  const markError = useCallback(() => setStatus("error"), []);
+  const saveAll = useCallback(async (): Promise<SaveResult> => {
+    if (savingRef.current) return { canLeave: false, failedIds: new Set() };
+    const submitted = snapshotDirtyContributors(contributors);
+    if (submitted.some(({ contributor }) => contributor.canSave === false)) {
+      return { canLeave: false, failedIds: new Set() };
+    }
+
+    savingRef.current = true;
+    setStatus("saving");
+    const failedIds = new Set<string>();
+    let hasNewerChanges = false;
+    for (const { contributor } of submitted) {
+      try {
+        await contributor.save(contributor.revision);
+        hasNewerChanges ||= hasNewerRevision(contributors, contributor);
+      } catch (error) {
+        if (error instanceof SettingsSaveCancelledError) {
+          hasNewerChanges = true;
+          break;
+        }
+        failedIds.add(contributor.id);
+      }
+    }
+
+    savingRef.current = false;
+    setStatus(saveCompletionStatus(failedIds, hasNewerChanges));
+    refreshRegistry();
+    return { canLeave: failedIds.size === 0 && !hasNewerChanges, failedIds };
+  }, [contributors, refreshRegistry]);
+
+  return { status, saveAll, clearSavedStatus, markError };
+}
+
+function saveCompletionStatus(
+  failedIds: Set<string>,
+  hasNewerChanges: boolean,
+): SettingsSaveStatus {
+  if (failedIds.size > 0) return "error";
+  return hasNewerChanges ? "dirty" : "saved";
+}
+
+export function useSettingsSaveContributor(contributor: SettingsSaveContributor): void {
+  const registry = useContext(SettingsSaveRegistryContext);
+  const dirtyScope = useContext(SettingsDirtyScopeContext);
+  if (!registry) throw new Error("useSettingsSaveContributor requires SettingsSaveProvider");
+
+  useLayoutEffect(() => {
+    registry.upsert(contributor);
+    dirtyScope?.upsert(contributor.id, contributor.isDirty);
+  });
+
+  useEffect(() => {
+    return () => {
+      registry.unregister(contributor.id);
+      dirtyScope?.unregister(contributor.id);
+    };
+  }, [contributor.id, dirtyScope, registry]);
+}
+
+function getDirtyContributors(
+  contributors: Map<string, RegisteredContributor>,
+): RegisteredContributor[] {
+  return [...contributors.values()]
+    .filter(({ contributor }) => contributor.isDirty)
+    .sort(compareContributors);
+}
+
+function snapshotDirtyContributors(
+  contributors: Map<string, RegisteredContributor>,
+): RegisteredContributor[] {
+  return getDirtyContributors(contributors).map((entry) => ({ ...entry }));
+}
+
+function hasNewerRevision(
+  contributors: Map<string, RegisteredContributor>,
+  submitted: SettingsSaveContributor,
+): boolean {
+  const current = contributors.get(submitted.id)?.contributor;
+  return Boolean(current && current.isDirty && !Object.is(current.revision, submitted.revision));
+}
+
+function compareContributors(left: RegisteredContributor, right: RegisteredContributor): number {
+  const orderDifference =
+    (left.contributor.order ?? Number.MAX_SAFE_INTEGER) -
+    (right.contributor.order ?? Number.MAX_SAFE_INTEGER);
+  return orderDifference || left.registrationOrder - right.registrationOrder;
+}
+
+function hasObservableChange(
+  previous: SettingsSaveContributor,
+  current: SettingsSaveContributor,
+): boolean {
+  return (
+    previous.isDirty !== current.isDirty ||
+    previous.canSave !== current.canSave ||
+    previous.invalidReason !== current.invalidReason ||
+    previous.order !== current.order ||
+    !Object.is(previous.revision, current.revision)
+  );
+}
diff --git a/apps/web/components/settings/settings-save-revision.test.ts b/apps/web/components/settings/settings-save-revision.test.ts
new file mode 100644
index 0000000000..29cd4bbaf4
--- /dev/null
+++ b/apps/web/components/settings/settings-save-revision.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+
+import { serializeSettingsRevision } from "./settings-save-revision";
+
+describe("serializeSettingsRevision", () => {
+  it("ignores nested object key order", () => {
+    const submitted = {
+      name: "default",
+      config: {
+        git_user_name: "E2E Test",
+        git_user_email: "e2e@test.local",
+        dockerfile: "FROM node:22-slim",
+        image_tag: "kandev/multi-agent:latest",
+      },
+    };
+    const returned = {
+      config: {
+        dockerfile: "FROM node:22-slim",
+        git_user_email: "e2e@test.local",
+        git_user_name: "E2E Test",
+        image_tag: "kandev/multi-agent:latest",
+      },
+      name: "default",
+    };
+
+    expect(serializeSettingsRevision(submitted)).toBe(serializeSettingsRevision(returned));
+  });
+
+  it("preserves array order", () => {
+    expect(serializeSettingsRevision({ values: ["first", "second"] })).not.toBe(
+      serializeSettingsRevision({ values: ["second", "first"] }),
+    );
+  });
+});
diff --git a/apps/web/components/settings/settings-save-revision.ts b/apps/web/components/settings/settings-save-revision.ts
new file mode 100644
index 0000000000..c7d6ccbb29
--- /dev/null
+++ b/apps/web/components/settings/settings-save-revision.ts
@@ -0,0 +1,14 @@
+export function serializeSettingsRevision(value: object): string {
+  return JSON.stringify(value, (_key, nestedValue: unknown) => {
+    if (!nestedValue || typeof nestedValue !== "object" || Array.isArray(nestedValue)) {
+      return nestedValue;
+    }
+
+    const record = nestedValue as Record<string, unknown>;
+    return Object.fromEntries(
+      Object.keys(record)
+        .sort()
+        .map((key) => [key, record[key]]),
+    );
+  });
+}
diff --git a/apps/web/components/settings/settings-section.tsx b/apps/web/components/settings/settings-section.tsx
index cfa1e90479..c90a85449f 100644
--- a/apps/web/components/settings/settings-section.tsx
+++ b/apps/web/components/settings/settings-section.tsx
@@ -28,7 +28,7 @@ export function SettingsSection({
           </h3>
           {description && <p className="text-sm text-muted-foreground mt-1">{description}</p>}
         </div>
-        {action && <div className="shrink-0">{action}</div>}
+        {action && <div className="w-full shrink-0 sm:w-auto">{action}</div>}
       </div>
       {children}
     </section>
diff --git a/apps/web/components/settings/shell-settings-card.tsx b/apps/web/components/settings/shell-settings-card.tsx
index df882c2364..a09b54fbf7 100644
--- a/apps/web/components/settings/shell-settings-card.tsx
+++ b/apps/web/components/settings/shell-settings-card.tsx
@@ -1,16 +1,12 @@
 "use client";
 
-import { useState } from "react";
+import { useLayoutEffect, useState } from "react";
 import { IconCode } from "@tabler/icons-react";
-import { Card, CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
-import { Button } from "@kandev/ui/button";
+import { CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
 import { SettingsSection } from "@/components/settings/settings-section";
-import { useAppStore, useAppStoreApi } from "@/components/state-provider";
-import { useShellSettings } from "@/hooks/domains/settings/use-shell-settings";
-import { updateUserSettings } from "@/lib/api";
-import { useRequest } from "@/lib/http/use-request";
+import { SettingsCard } from "@/components/settings/settings-card";
 
 const AUTO_SHELL = "auto";
 const CUSTOM_SHELL = "custom";
@@ -29,6 +25,7 @@ function resolveShellSelection(preferredShell: string, shellOptions: ShellOption
 
 type ShellSelectProps = {
   shellSelection: string;
+  isDirty: boolean;
   onSelectionChange: (value: string) => void;
   customShell: string;
   onCustomShellChange: (value: string) => void;
@@ -38,6 +35,7 @@ type ShellSelectProps = {
 
 function ShellSelect({
   shellSelection,
+  isDirty,
   onSelectionChange,
   customShell,
   onCustomShellChange,
@@ -52,7 +50,7 @@ function ShellSelect({
           onValueChange={onSelectionChange}
           disabled={!shellLoaded || shellOptions.length === 0}
         >
-          <SelectTrigger>
+          <SelectTrigger data-settings-dirty={isDirty}>
             <SelectValue
               placeholder={
                 shellOptions.length === 0 ? "Shell options unavailable" : "Select a shell"
@@ -81,6 +79,7 @@ function ShellSelect({
         <div className="space-y-2">
           <Input
             value={customShell}
+            data-settings-dirty={isDirty}
             onChange={(event) => onCustomShellChange(event.target.value)}
             placeholder="/bin/zsh"
           />
@@ -93,39 +92,28 @@ function ShellSelect({
   );
 }
 
-export function ShellSettingsCard() {
-  const setUserSettings = useAppStore((state) => state.setUserSettings);
-  const storeApi = useAppStoreApi();
-  const shellSettings = useShellSettings();
-  const initialShellValue = shellSettings.preferredShell ?? "";
-  const initialShellOptions = shellSettings.shellOptions ?? [];
-  const initialSelection = resolveShellSelection(initialShellValue, initialShellOptions);
-  const [preferredShell, setPreferredShell] = useState(initialShellValue);
-  const [baselineShell, setBaselineShell] = useState(initialShellValue);
+export function ShellSettingsCard({
+  preferredShell,
+  isDirty,
+  onPreferredShellChange,
+  shellLoaded,
+  shellOptions,
+}: {
+  preferredShell: string;
+  isDirty?: boolean;
+  onPreferredShellChange: (value: string) => void;
+  shellLoaded: boolean;
+  shellOptions: ShellOption[];
+}) {
+  const initialSelection = resolveShellSelection(preferredShell, shellOptions);
   const [shellSelection, setShellSelection] = useState(initialSelection.selection);
   const [customShell, setCustomShell] = useState(initialSelection.customShell);
-  const [shellLoaded] = useState(shellSettings.loaded);
-  const [shellOptions] = useState<ShellOption[]>(initialShellOptions);
 
-  const saveShellRequest = useRequest(async () => {
-    const trimmed = preferredShell.trim();
-    const currentSettings = storeApi.getState().userSettings;
-    await updateUserSettings({
-      workspace_id: currentSettings.workspaceId ?? "",
-      repository_ids: currentSettings.repositoryIds,
-      preferred_shell: trimmed,
-    });
-    setBaselineShell(trimmed);
-    setUserSettings({
-      ...currentSettings,
-      preferredShell: trimmed || null,
-      loaded: true,
-    });
-  });
-
-  // Store data is SSR-hydrated for settings. Local state is initialized once.
-
-  const shellDirty = preferredShell.trim() !== baselineShell.trim();
+  useLayoutEffect(() => {
+    const next = resolveShellSelection(preferredShell, shellOptions);
+    setShellSelection(next.selection);
+    setCustomShell(next.customShell);
+  }, [preferredShell, shellOptions]);
 
   return (
     <SettingsSection
@@ -133,38 +121,32 @@ export function ShellSettingsCard() {
       title="Shell"
       description="Pick the default shell for task sessions"
     >
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between gap-4">
+      <SettingsCard isDirty={isDirty}>
+        <CardHeader>
           <CardTitle className="text-base">Preferred Shell</CardTitle>
-          <Button
-            type="button"
-            onClick={() => saveShellRequest.run()}
-            disabled={!shellLoaded || !shellDirty || saveShellRequest.isLoading}
-          >
-            {saveShellRequest.isLoading ? "Saving..." : "Save"}
-          </Button>
         </CardHeader>
         <CardContent className="space-y-4">
           <ShellSelect
             shellSelection={shellSelection}
+            isDirty={Boolean(isDirty)}
             onSelectionChange={(value) => {
               setShellSelection(value);
               if (value === AUTO_SHELL) {
-                setPreferredShell("");
+                onPreferredShellChange("");
                 setCustomShell("");
                 return;
               }
               if (value === CUSTOM_SHELL) {
-                setPreferredShell(customShell);
+                onPreferredShellChange(customShell);
                 return;
               }
-              setPreferredShell(value);
+              onPreferredShellChange(value);
               setCustomShell("");
             }}
             customShell={customShell}
             onCustomShellChange={(value) => {
               setCustomShell(value);
-              setPreferredShell(value);
+              onPreferredShellChange(value);
             }}
             shellLoaded={shellLoaded}
             shellOptions={shellOptions}
@@ -173,7 +155,7 @@ export function ShellSettingsCard() {
             New task sessions will use this shell. Existing sessions keep their current shell.
           </p>
         </CardContent>
-      </Card>
+      </SettingsCard>
     </SettingsSection>
   );
 }
diff --git a/apps/web/components/settings/ssh-agent-readiness-card.tsx b/apps/web/components/settings/ssh-agent-readiness-card.tsx
index 10c9df0c46..64a79e3605 100644
--- a/apps/web/components/settings/ssh-agent-readiness-card.tsx
+++ b/apps/web/components/settings/ssh-agent-readiness-card.tsx
@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Badge } from "@kandev/ui/badge";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@kandev/ui/card";
+import { CardContent, CardDescription, CardHeader, CardTitle } from "@kandev/ui/card";
 import { Label } from "@kandev/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@kandev/ui/table";
@@ -11,12 +11,14 @@ import { IconCheck, IconCopy, IconLoader2, IconX } from "@tabler/icons-react";
 import { toast } from "sonner";
 import { probeSSHAgents, probeSSHShells } from "@/lib/api/domains/ssh-api";
 import type { SSHAgentReadinessRow } from "@/lib/types/http-ssh";
+import { SettingsCard } from "@/components/settings/settings-card";
 
 export interface SSHAgentReadinessCardProps {
   executorId: string;
   /** The shell currently saved on the profile. Drives initial selection + the
    *  shell sent to the probe endpoint. */
   shell?: string;
+  baselineShell?: string;
   /** Persist a shell change up to the profile. Called when the user picks a
    *  different option in the dropdown so the choice survives the page reload
    *  and flows into the next agent launch as ssh_shell metadata. */
@@ -158,6 +160,7 @@ function useReadinessState({
 export function SSHAgentReadinessCard({
   executorId,
   shell: shellProp,
+  baselineShell,
   onShellChange,
 }: SSHAgentReadinessCardProps) {
   const state = useReadinessState({ executorId, shellProp, onShellChange });
@@ -174,9 +177,10 @@ export function SSHAgentReadinessCard({
     handleShellChange,
   } = state;
   const displayShell = readinessDisplayShell(shell, defaultShell);
+  const shellDirty = baselineShell !== undefined && shell !== baselineShell;
 
   return (
-    <Card data-testid="ssh-agent-readiness-card">
+    <SettingsCard isDirty={shellDirty} data-testid="ssh-agent-readiness-card">
       <CardHeader>
         <div className="flex items-start justify-between gap-3">
           <div>
@@ -204,12 +208,13 @@ export function SSHAgentReadinessCard({
           loading={shellsLoading}
           defaultShell={defaultShell}
           onChange={handleShellChange}
+          isDirty={shellDirty}
         />
       </CardHeader>
       <CardContent>
         <ReadinessContent error={error} hasProbed={hasProbed} rows={rows} />
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
@@ -219,12 +224,14 @@ function ShellSelector({
   loading,
   defaultShell,
   onChange,
+  isDirty,
 }: {
   shell: string;
   shells: string[] | null;
   loading: boolean;
   defaultShell: string;
   onChange: (s: string) => void | Promise<void>;
+  isDirty: boolean;
 }) {
   // While probing, show a placeholder option so the dropdown can't surface
   // a stale "bash" selection that we haven't confirmed exists on the host.
@@ -241,6 +248,7 @@ function ShellSelector({
           id="ssh-readiness-shell"
           data-testid="ssh-readiness-shell"
           className="h-7 w-32 text-xs"
+          data-settings-dirty={isDirty}
         >
           <SelectValue placeholder={defaultShell || DEFAULT_SHELL} />
         </SelectTrigger>
diff --git a/apps/web/components/settings/ssh-connection-card.test.tsx b/apps/web/components/settings/ssh-connection-card.test.tsx
new file mode 100644
index 0000000000..89d62bc2cc
--- /dev/null
+++ b/apps/web/components/settings/ssh-connection-card.test.tsx
@@ -0,0 +1,61 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SettingsSaveProvider } from "./settings-save-provider";
+import { SSHConnectionCard, type SSHExecutorConfig } from "./ssh-connection-card";
+import { testSSHConnection } from "@/lib/api/domains/ssh-api";
+
+vi.mock("@/lib/api/domains/ssh-api", () => ({ testSSHConnection: vi.fn() }));
+
+const initial: SSHExecutorConfig = {
+  name: "Primary host",
+  host: "host.example.com",
+  identity_source: "agent",
+  host_fingerprint: "SHA256:old",
+};
+
+describe("SSHConnectionCard", () => {
+  it("uses the shared save action for an existing executor", async () => {
+    vi.mocked(testSSHConnection).mockResolvedValue({
+      success: true,
+      fingerprint: "SHA256:old",
+      steps: [],
+      total_duration_ms: 1,
+    });
+    const onSave = vi.fn().mockResolvedValue(undefined);
+    render(
+      <SettingsSaveProvider>
+        <SSHConnectionCard
+          initial={initial}
+          onSave={onSave}
+          coordinatedSaveId="ssh-executor:executor-1"
+        />
+      </SettingsSaveProvider>,
+    );
+
+    fireEvent.change(screen.getByTestId("ssh-input-name"), {
+      target: { value: "Renamed host" },
+    });
+    expect(screen.getByTestId("ssh-input-name").getAttribute("data-settings-dirty")).toBe("true");
+    expect(screen.getByTestId("ssh-connection-card").getAttribute("data-settings-dirty")).toBe(
+      "true",
+    );
+    expect(screen.queryByTestId("ssh-save-button")).toBeNull();
+    expect(onSave).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByTestId("ssh-test-button"));
+    await waitFor(() => expect(screen.getByTestId("ssh-trust-checkbox")).toBeTruthy());
+    fireEvent.click(screen.getByTestId("ssh-trust-checkbox"));
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() =>
+      expect(onSave).toHaveBeenCalledWith(
+        expect.objectContaining({ name: "Renamed host", host_fingerprint: "SHA256:old" }),
+      ),
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId("ssh-connection-card").getAttribute("data-settings-dirty")).toBe(
+        "false",
+      ),
+    );
+  });
+});
diff --git a/apps/web/components/settings/ssh-connection-card.tsx b/apps/web/components/settings/ssh-connection-card.tsx
index 67d4564059..5c724f10c7 100644
--- a/apps/web/components/settings/ssh-connection-card.tsx
+++ b/apps/web/components/settings/ssh-connection-card.tsx
@@ -1,12 +1,9 @@
 "use client";
 
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
 import { Badge } from "@kandev/ui/badge";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@kandev/ui/card";
-import { Input } from "@kandev/ui/input";
-import { Label } from "@kandev/ui/label";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
+import { CardContent, CardDescription, CardHeader, CardTitle } from "@kandev/ui/card";
 import {
   IconCheck,
   IconLoader2,
@@ -17,6 +14,12 @@ import {
 } from "@tabler/icons-react";
 import { testSSHConnection } from "@/lib/api/domains/ssh-api";
 import { FingerprintTrustBlock } from "@/components/settings/ssh-fingerprint-trust-block";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { SSHConnectionForm } from "@/components/settings/ssh-connection-form";
+import {
+  SettingsSaveCancelledError,
+  useSettingsSaveContributor,
+} from "@/components/settings/settings-save-provider";
 import type {
   SSHIdentitySource,
   SSHTestRequest,
@@ -44,6 +47,9 @@ export interface SSHConnectionCardProps {
   // Called when the user clicks Save after a successful test+trust. The
   // returned config carries the freshly pinned fingerprint.
   onSave: (config: SSHExecutorConfig) => Promise<void> | void;
+  // Existing executor routes opt into the shared settings save coordinator.
+  // Create flows omit this and retain their local Save button.
+  coordinatedSaveId?: string;
   // Existing running sessions for this executor. Triggers the
   // "this won't affect existing sessions" warning on save.
   runningSessionCount?: number;
@@ -101,9 +107,55 @@ function initialState(initial?: Partial<SSHExecutorConfig>): SSHConnectionState
   };
 }
 
+function confirmRunningSessions(count?: number): boolean {
+  if (!count) return true;
+  return window.confirm(
+    `This executor has ${count} running session(s). ` +
+      "They will keep running on the current host. Only new sessions started " +
+      "after save will use the updated config. Continue?",
+  );
+}
+
+type CoordinatedSSHSaveOptions = {
+  id?: string;
+  form: SSHExecutorConfig;
+  baseline: SSHExecutorConfig;
+  canSave: boolean;
+  save: () => Promise<void>;
+  discard: () => void;
+};
+
+function useCoordinatedSSHSave({
+  id,
+  form,
+  baseline,
+  canSave,
+  save,
+  discard,
+}: CoordinatedSSHSaveOptions) {
+  const revision = JSON.stringify(form);
+  useSettingsSaveContributor({
+    id: id ?? "ssh-connection-create",
+    revision,
+    isDirty: Boolean(id) && revision !== JSON.stringify(baseline),
+    canSave,
+    invalidReason: canSave ? undefined : "Test the connection and trust its fingerprint to save.",
+    save,
+    discard,
+  });
+}
+
+function canTestConnection(form: SSHExecutorConfig, testing: boolean): boolean {
+  if (testing || form.name.trim() === "") return false;
+  return (form.host ?? "").trim() !== "" || (form.host_alias ?? "").trim() !== "";
+}
+
 function useSSHConnection(props: SSHConnectionCardProps) {
   const [state, setState] = useState<SSHConnectionState>(() => initialState(props.initial));
+  const [baseline, setBaseline] = useState(() => initialState(props.initial).form);
   const { form, testing, saving, result, resultStale, trust, error } = state;
+  const isDirty =
+    Boolean(props.coordinatedSaveId) && JSON.stringify(form) !== JSON.stringify(baseline);
 
   const update = useCallback(
     <K extends keyof SSHExecutorConfig>(key: K, value: SSHExecutorConfig[K]) => {
@@ -131,12 +183,7 @@ function useSSHConnection(props: SSHConnectionCardProps) {
 
   const setTrust = useCallback((v: boolean) => setState((prev) => ({ ...prev, trust: v })), []);
 
-  const canTest = useMemo(() => {
-    if (testing) return false;
-    if (form.name.trim() === "") return false;
-    if ((form.host ?? "").trim() === "" && (form.host_alias ?? "").trim() === "") return false;
-    return true;
-  }, [form, testing]);
+  const canTest = canTestConnection(form, testing);
 
   const handleTest = useCallback(async () => {
     setState((prev) => ({
@@ -175,30 +222,30 @@ function useSSHConnection(props: SSHConnectionCardProps) {
 
   const canSave = !!result?.success && !!result.fingerprint && trust && !resultStale && !saving;
 
-  const confirmRunningSessions = useCallback(
-    () =>
-      props.runningSessionCount
-        ? window.confirm(
-            `This executor has ${props.runningSessionCount} running session(s). ` +
-              `They will keep running on the current host. Only new sessions started ` +
-              `after save will use the updated config. Continue?`,
-          )
-        : true,
-    [props.runningSessionCount],
-  );
-
   const handleSave = useCallback(async () => {
-    if (!canSave || !result?.fingerprint) return;
-    if (!confirmRunningSessions()) return;
+    if (!canSave || !result?.fingerprint) throw new Error("Test and trust this host before saving");
+    if (!confirmRunningSessions(props.runningSessionCount)) throw new SettingsSaveCancelledError();
+    const submitted = form;
     setState((prev) => ({ ...prev, saving: true, error: null }));
     try {
-      await props.onSave({ ...form, host_fingerprint: result.fingerprint });
+      await props.onSave({ ...submitted, host_fingerprint: result.fingerprint });
+      setBaseline(submitted);
       setState((prev) => ({ ...prev, saving: false }));
     } catch (e) {
       const msg = e instanceof Error ? e.message : "Failed to save executor";
       setState((prev) => ({ ...prev, saving: false, error: msg }));
+      throw e;
     }
-  }, [canSave, confirmRunningSessions, form, props, result]);
+  }, [canSave, form, props, result]);
+
+  useCoordinatedSSHSave({
+    id: props.coordinatedSaveId,
+    form,
+    baseline,
+    canSave,
+    save: handleSave,
+    discard: () => setState(initialState(baseline)),
+  });
 
   return {
     form,
@@ -214,13 +261,15 @@ function useSSHConnection(props: SSHConnectionCardProps) {
     setTrust,
     handleTest,
     handleSave,
+    baseline,
+    isDirty,
   };
 }
 
 export function SSHConnectionCard(props: SSHConnectionCardProps) {
   const c = useSSHConnection(props);
   return (
-    <Card data-testid="ssh-connection-card">
+    <SettingsCard isDirty={c.isDirty} data-testid="ssh-connection-card">
       <CardHeader>
         <div className="flex items-center justify-between">
           <div>
@@ -236,7 +285,7 @@ export function SSHConnectionCard(props: SSHConnectionCardProps) {
         </div>
       </CardHeader>
       <CardContent className="space-y-4">
-        <SSHConnectionForm form={c.form} onChange={c.update} />
+        <SSHConnectionForm form={c.form} baseline={c.baseline} onChange={c.update} />
         {c.form.host_fingerprint && <PinnedFingerprintRow fingerprint={c.form.host_fingerprint} />}
         <SSHConnectionActions
           testing={c.testing}
@@ -245,6 +294,7 @@ export function SSHConnectionCard(props: SSHConnectionCardProps) {
           canSave={c.canSave}
           onTest={c.handleTest}
           onSave={c.handleSave}
+          showSave={!props.coordinatedSaveId}
         />
         {c.error && (
           <p data-testid="ssh-error" className="text-sm text-red-600">
@@ -261,170 +311,7 @@ export function SSHConnectionCard(props: SSHConnectionCardProps) {
           />
         )}
       </CardContent>
-    </Card>
-  );
-}
-
-type FieldOnChange = <K extends keyof SSHExecutorConfig>(
-  key: K,
-  value: SSHExecutorConfig[K],
-) => void;
-
-function SSHConnectionForm({
-  form,
-  onChange,
-}: {
-  form: SSHExecutorConfig;
-  onChange: FieldOnChange;
-}) {
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-      <TextField
-        id="ssh-name"
-        testId="ssh-input-name"
-        label="Name"
-        placeholder="My VPS"
-        value={form.name}
-        onChange={(v) => onChange("name", v)}
-      />
-      <TextField
-        id="ssh-host-alias"
-        testId="ssh-input-host-alias"
-        label="Host alias from ~/.ssh/config (optional)"
-        hint="If set, inherits HostName / Port / User / IdentityFile / ProxyJump from your config."
-        placeholder="prod"
-        value={form.host_alias ?? ""}
-        onChange={(v) => onChange("host_alias", v)}
-      />
-      <TextField
-        id="ssh-host"
-        testId="ssh-input-host"
-        label="Host"
-        placeholder="dev.example.com"
-        value={form.host ?? ""}
-        onChange={(v) => onChange("host", v)}
-      />
-      <TextField
-        id="ssh-port"
-        testId="ssh-input-port"
-        label="Port"
-        type="number"
-        placeholder="22"
-        value={String(form.port ?? 22)}
-        onChange={(v) => onChange("port", parseInt(v, 10) || 22)}
-      />
-      <TextField
-        id="ssh-user"
-        testId="ssh-input-user"
-        label="User"
-        placeholder="ubuntu"
-        value={form.user ?? ""}
-        onChange={(v) => onChange("user", v)}
-      />
-      <IdentitySourceField
-        value={form.identity_source}
-        onChange={(v) => onChange("identity_source", v)}
-      />
-      {form.identity_source === "file" && (
-        <TextField
-          id="ssh-identity-file"
-          testId="ssh-input-identity-file"
-          label="Identity file path"
-          hint="Passphrase-protected keys must be loaded into ssh-agent first."
-          placeholder="~/.ssh/id_ed25519"
-          value={form.identity_file ?? ""}
-          onChange={(v) => onChange("identity_file", v)}
-        />
-      )}
-      <TextField
-        id="ssh-proxy-jump"
-        testId="ssh-input-proxy-jump"
-        label="ProxyJump (optional)"
-        hint="Single bastion hop. Chained jumps are not supported."
-        placeholder="bastion.example.com"
-        value={form.proxy_jump ?? ""}
-        onChange={(v) => onChange("proxy_jump", v)}
-      />
-    </div>
-  );
-}
-
-function TextField({
-  id,
-  testId,
-  label,
-  hint,
-  placeholder,
-  type,
-  value,
-  onChange,
-}: {
-  id: string;
-  testId: string;
-  label: string;
-  hint?: string;
-  placeholder?: string;
-  type?: string;
-  value: string;
-  onChange: (v: string) => void;
-}) {
-  return (
-    <FieldShell id={id} label={label} hint={hint}>
-      <Input
-        id={id}
-        data-testid={testId}
-        type={type}
-        value={value}
-        placeholder={placeholder}
-        onChange={(e) => onChange(e.target.value)}
-      />
-    </FieldShell>
-  );
-}
-
-function IdentitySourceField({
-  value,
-  onChange,
-}: {
-  value: SSHIdentitySource;
-  onChange: (v: SSHIdentitySource) => void;
-}) {
-  return (
-    <FieldShell id="ssh-identity-source" label="Identity source">
-      <Select value={value} onValueChange={(v) => onChange(v as SSHIdentitySource)}>
-        <SelectTrigger id="ssh-identity-source" data-testid="ssh-input-identity-source">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="agent" data-testid="ssh-input-identity-source-agent">
-            ssh-agent (SSH_AUTH_SOCK)
-          </SelectItem>
-          <SelectItem value="file" data-testid="ssh-input-identity-source-file">
-            Identity file (private key path)
-          </SelectItem>
-        </SelectContent>
-      </Select>
-    </FieldShell>
-  );
-}
-
-function FieldShell({
-  id,
-  label,
-  hint,
-  children,
-}: {
-  id: string;
-  label: string;
-  hint?: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="space-y-1.5">
-      <Label htmlFor={id}>{label}</Label>
-      {children}
-      {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
-    </div>
+    </SettingsCard>
   );
 }
 
@@ -452,6 +339,7 @@ function SSHConnectionActions({
   canSave,
   onTest,
   onSave,
+  showSave,
 }: {
   testing: boolean;
   saving: boolean;
@@ -459,6 +347,7 @@ function SSHConnectionActions({
   canSave: boolean;
   onTest: () => void;
   onSave: () => void;
+  showSave: boolean;
 }) {
   return (
     <div className="flex items-center gap-3">
@@ -477,16 +366,18 @@ function SSHConnectionActions({
         )}
         Test connection
       </Button>
-      <Button
-        size="sm"
-        onClick={onSave}
-        disabled={!canSave}
-        data-testid="ssh-save-button"
-        className="cursor-pointer"
-      >
-        {saving ? <IconLoader2 className="mr-1.5 h-4 w-4 animate-spin" /> : null}
-        Save
-      </Button>
+      {showSave && (
+        <Button
+          size="sm"
+          onClick={onSave}
+          disabled={!canSave}
+          data-testid="ssh-save-button"
+          className="cursor-pointer"
+        >
+          {saving ? <IconLoader2 className="mr-1.5 h-4 w-4 animate-spin" /> : null}
+          Save
+        </Button>
+      )}
     </div>
   );
 }
@@ -588,12 +479,7 @@ function StepRow({ step }: { step: SSHTestStep }) {
           <span className="text-muted-foreground text-xs">({step.duration_ms}ms)</span>
         </div>
         {step.output && (
-          <p
-            data-testid={`ssh-test-step-${slug}-output`}
-            className="text-xs text-muted-foreground truncate font-mono"
-          >
-            {step.output}
-          </p>
+          <p className="text-xs text-muted-foreground truncate font-mono">{step.output}</p>
         )}
         {step.error && (
           <p data-testid={`ssh-test-step-${slug}-error`} className="text-xs text-red-600 truncate">
diff --git a/apps/web/components/settings/ssh-connection-form.tsx b/apps/web/components/settings/ssh-connection-form.tsx
new file mode 100644
index 0000000000..3845632726
--- /dev/null
+++ b/apps/web/components/settings/ssh-connection-form.tsx
@@ -0,0 +1,197 @@
+import type { ReactNode } from "react";
+import { Input } from "@kandev/ui/input";
+import { Label } from "@kandev/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
+import type { SSHIdentitySource } from "@/lib/types/http-ssh";
+import type { SSHExecutorConfig } from "./ssh-connection-card";
+
+type FieldOnChange = <K extends keyof SSHExecutorConfig>(
+  key: K,
+  value: SSHExecutorConfig[K],
+) => void;
+
+type SSHConnectionFormProps = {
+  form: SSHExecutorConfig;
+  baseline: SSHExecutorConfig;
+  onChange: FieldOnChange;
+};
+
+function fieldIsDirty<K extends keyof SSHExecutorConfig>(
+  form: SSHExecutorConfig,
+  baseline: SSHExecutorConfig,
+  key: K,
+  fallback: NonNullable<SSHExecutorConfig[K]>,
+): boolean {
+  return (form[key] ?? fallback) !== (baseline[key] ?? fallback);
+}
+
+export function SSHConnectionForm({ form, baseline, onChange }: SSHConnectionFormProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <TextField
+        id="ssh-name"
+        testId="ssh-input-name"
+        label="Name"
+        placeholder="My VPS"
+        value={form.name}
+        isDirty={fieldIsDirty(form, baseline, "name", "")}
+        onChange={(value) => onChange("name", value)}
+      />
+      <TextField
+        id="ssh-host-alias"
+        testId="ssh-input-host-alias"
+        label="Host alias from ~/.ssh/config (optional)"
+        hint="If set, inherits HostName / Port / User / IdentityFile / ProxyJump from your config."
+        placeholder="prod"
+        value={form.host_alias ?? ""}
+        isDirty={fieldIsDirty(form, baseline, "host_alias", "")}
+        onChange={(value) => onChange("host_alias", value)}
+      />
+      <TextField
+        id="ssh-host"
+        testId="ssh-input-host"
+        label="Host"
+        placeholder="dev.example.com"
+        value={form.host ?? ""}
+        isDirty={fieldIsDirty(form, baseline, "host", "")}
+        onChange={(value) => onChange("host", value)}
+      />
+      <TextField
+        id="ssh-port"
+        testId="ssh-input-port"
+        label="Port"
+        type="number"
+        placeholder="22"
+        value={String(form.port ?? 22)}
+        isDirty={fieldIsDirty(form, baseline, "port", 22)}
+        onChange={(value) => onChange("port", parseInt(value, 10) || 22)}
+      />
+      <TextField
+        id="ssh-user"
+        testId="ssh-input-user"
+        label="User"
+        placeholder="ubuntu"
+        value={form.user ?? ""}
+        isDirty={fieldIsDirty(form, baseline, "user", "")}
+        onChange={(value) => onChange("user", value)}
+      />
+      <IdentitySourceField
+        value={form.identity_source}
+        isDirty={fieldIsDirty(form, baseline, "identity_source", "agent")}
+        onChange={(value) => onChange("identity_source", value)}
+      />
+      {form.identity_source === "file" && (
+        <TextField
+          id="ssh-identity-file"
+          testId="ssh-input-identity-file"
+          label="Identity file path"
+          hint="Passphrase-protected keys must be loaded into ssh-agent first."
+          placeholder="~/.ssh/id_ed25519"
+          value={form.identity_file ?? ""}
+          isDirty={fieldIsDirty(form, baseline, "identity_file", "")}
+          onChange={(value) => onChange("identity_file", value)}
+        />
+      )}
+      <TextField
+        id="ssh-proxy-jump"
+        testId="ssh-input-proxy-jump"
+        label="ProxyJump (optional)"
+        hint="Single bastion hop. Chained jumps are not supported."
+        placeholder="bastion.example.com"
+        value={form.proxy_jump ?? ""}
+        isDirty={fieldIsDirty(form, baseline, "proxy_jump", "")}
+        onChange={(value) => onChange("proxy_jump", value)}
+      />
+    </div>
+  );
+}
+
+type TextFieldProps = {
+  id: string;
+  testId: string;
+  label: string;
+  hint?: string;
+  placeholder?: string;
+  type?: string;
+  value: string;
+  isDirty: boolean;
+  onChange: (value: string) => void;
+};
+
+function TextField({
+  id,
+  testId,
+  label,
+  hint,
+  placeholder,
+  type,
+  value,
+  isDirty,
+  onChange,
+}: TextFieldProps) {
+  return (
+    <FieldShell id={id} label={label} hint={hint}>
+      <Input
+        id={id}
+        data-testid={testId}
+        type={type}
+        value={value}
+        data-settings-dirty={isDirty}
+        placeholder={placeholder}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    </FieldShell>
+  );
+}
+
+function IdentitySourceField({
+  value,
+  isDirty,
+  onChange,
+}: {
+  value: SSHIdentitySource;
+  isDirty: boolean;
+  onChange: (value: SSHIdentitySource) => void;
+}) {
+  return (
+    <FieldShell id="ssh-identity-source" label="Identity source">
+      <Select value={value} onValueChange={(next) => onChange(next as SSHIdentitySource)}>
+        <SelectTrigger
+          id="ssh-identity-source"
+          data-testid="ssh-input-identity-source"
+          data-settings-dirty={isDirty}
+        >
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="agent" data-testid="ssh-input-identity-source-agent">
+            ssh-agent (SSH_AUTH_SOCK)
+          </SelectItem>
+          <SelectItem value="file" data-testid="ssh-input-identity-source-file">
+            Identity file (private key path)
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    </FieldShell>
+  );
+}
+
+function FieldShell({
+  id,
+  label,
+  hint,
+  children,
+}: {
+  id: string;
+  label: string;
+  hint?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <Label htmlFor={id}>{label}</Label>
+      {children}
+      {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
+    </div>
+  );
+}
diff --git a/apps/web/components/settings/system-metrics-settings-card.test.tsx b/apps/web/components/settings/system-metrics-settings-card.test.tsx
new file mode 100644
index 0000000000..a95dbcb3ea
--- /dev/null
+++ b/apps/web/components/settings/system-metrics-settings-card.test.tsx
@@ -0,0 +1,50 @@
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { SystemMetricsGlobalSettings } from "@/lib/types/system";
+import { SettingsSaveProvider } from "./settings-save-provider";
+import { SystemMetricsSettingsCard } from "./system-metrics-settings-card";
+
+const settings: SystemMetricsGlobalSettings = {
+  metrics: ["cpu_percent", "memory_percent", "disk_percent"],
+  interval_seconds: 5,
+  backend_disk_path: "/",
+  collect_execution: false,
+};
+const updateSystemMetricsSettingsMock = vi.fn();
+const DIRTY_ATTRIBUTE = "data-settings-dirty";
+
+vi.mock("@/lib/api", () => ({
+  fetchSystemMetricsSettings: vi.fn(async () => ({ settings })),
+  updateSystemMetricsSettings: (...args: unknown[]) => updateSystemMetricsSettingsMock(...args),
+}));
+
+afterEach(() => {
+  cleanup();
+  updateSystemMetricsSettingsMock.mockReset();
+});
+
+describe("SystemMetricsSettingsCard", () => {
+  it("keeps metric changes local until Save changes is pressed", async () => {
+    updateSystemMetricsSettingsMock.mockImplementation(async (next) => ({ settings: next }));
+    render(
+      <SettingsSaveProvider>
+        <SystemMetricsSettingsCard showInTopbar onShowInTopbarChange={vi.fn()} />
+      </SettingsSaveProvider>,
+    );
+
+    const cpuMetric = await screen.findByRole("checkbox", { name: "CPU %" });
+    await waitFor(() => expect(cpuMetric.getAttribute("data-state")).toBe("checked"));
+    fireEvent.click(cpuMetric);
+
+    expect(updateSystemMetricsSettingsMock).not.toHaveBeenCalled();
+    expect(cpuMetric.getAttribute(DIRTY_ATTRIBUTE)).toBe("true");
+    expect(cpuMetric.closest('[data-slot="card"]')?.getAttribute(DIRTY_ATTRIBUTE)).toBe("true");
+
+    fireEvent.click(await screen.findByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => expect(updateSystemMetricsSettingsMock).toHaveBeenCalledTimes(1));
+    expect(updateSystemMetricsSettingsMock.mock.calls[0]?.[0].metrics).not.toContain("cpu_percent");
+    await waitFor(() => expect(cpuMetric.getAttribute(DIRTY_ATTRIBUTE)).toBe("false"));
+    expect(cpuMetric.closest('[data-slot="card"]')?.getAttribute(DIRTY_ATTRIBUTE)).toBe("false");
+  });
+});
diff --git a/apps/web/components/settings/system-metrics-settings-card.tsx b/apps/web/components/settings/system-metrics-settings-card.tsx
index b900ea1438..66a4e20d31 100644
--- a/apps/web/components/settings/system-metrics-settings-card.tsx
+++ b/apps/web/components/settings/system-metrics-settings-card.tsx
@@ -1,18 +1,15 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { Checkbox } from "@kandev/ui/checkbox";
-import { Card, CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
+import { CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
 import { Label } from "@kandev/ui/label";
 import { Switch } from "@kandev/ui/switch";
-import { useAppStore, useAppStoreApi } from "@/components/state-provider";
-import {
-  fetchSystemMetricsSettings,
-  updateSystemMetricsSettings,
-  updateUserSettings,
-} from "@/lib/api";
+import { fetchSystemMetricsSettings, updateSystemMetricsSettings } from "@/lib/api";
 import type { SystemMetricId, SystemMetricsGlobalSettings } from "@/lib/types/system";
+import { useSettingsSaveContributor } from "./settings-save-provider";
+import { SettingsCard } from "./settings-card";
 
 const METRIC_OPTIONS: Array<{ id: SystemMetricId; label: string }> = [
   { id: "cpu_percent", label: "CPU %" },
@@ -29,66 +26,63 @@ const DEFAULT_METRICS_SETTINGS: SystemMetricsGlobalSettings = {
   collect_execution: false,
 };
 
-export function SystemMetricsSettingsCard() {
-  const storeApi = useAppStoreApi();
-  const userSettings = useAppStore((state) => state.userSettings);
-  const setUserSettings = useAppStore((state) => state.setUserSettings);
+export function SystemMetricsSettingsCard({
+  showInTopbar,
+  isShowInTopbarDirty,
+  onShowInTopbarChange,
+}: {
+  showInTopbar: boolean;
+  isShowInTopbarDirty?: boolean;
+  onShowInTopbarChange: (checked: boolean) => void;
+}) {
   const [settings, setSettings] = useState<SystemMetricsGlobalSettings>(DEFAULT_METRICS_SETTINGS);
-  const [isSaving, setIsSaving] = useState(false);
-  const saveSeqRef = useRef(0);
+  const [savedSettings, setSavedSettings] =
+    useState<SystemMetricsGlobalSettings>(DEFAULT_METRICS_SETTINGS);
+  const [loaded, setLoaded] = useState(false);
 
   useEffect(() => {
     let cancelled = false;
     fetchSystemMetricsSettings()
       .then((res) => {
-        if (!cancelled) setSettings(res.settings);
+        if (!cancelled) {
+          setSettings(res.settings);
+          setSavedSettings(res.settings);
+          setLoaded(true);
+        }
       })
-      .catch(() => {});
+      .catch(() => {
+        if (!cancelled) setLoaded(false);
+      });
     return () => {
       cancelled = true;
     };
   }, []);
 
-  const saveGlobal = async (next: SystemMetricsGlobalSettings) => {
-    const previous = settings;
-    const seq = saveSeqRef.current + 1;
-    saveSeqRef.current = seq;
-    setSettings(next);
-    setIsSaving(true);
-    try {
-      const res = await updateSystemMetricsSettings(next);
-      if (seq === saveSeqRef.current) setSettings(res.settings);
-    } catch {
-      if (seq === saveSeqRef.current) setSettings(previous);
-    } finally {
-      if (seq === saveSeqRef.current) setIsSaving(false);
-    }
-  };
+  const revision = JSON.stringify(settings);
+  const isDirty = loaded && revision !== JSON.stringify(savedSettings);
+  useSettingsSaveContributor({
+    id: "general-appearance-metrics",
+    order: 20,
+    revision,
+    isDirty,
+    save: async () => {
+      const submitted = settings;
+      const response = await updateSystemMetricsSettings(submitted);
+      setSavedSettings(response.settings);
+      setSettings((current) => (current === submitted ? response.settings : current));
+    },
+    discard: () => setSettings(savedSettings),
+  });
 
   const toggleMetric = (metric: SystemMetricId, checked: boolean) => {
     const nextMetrics = checked
       ? Array.from(new Set([...settings.metrics, metric]))
       : settings.metrics.filter((id) => id !== metric);
-    if (nextMetrics.length > 0) void saveGlobal({ ...settings, metrics: nextMetrics });
-  };
-
-  const toggleDisplay = async (checked: boolean) => {
-    const current = storeApi.getState().userSettings;
-    const previous = current.systemMetricsDisplay;
-    try {
-      setUserSettings({ ...current, systemMetricsDisplay: { showInTopbar: checked } });
-      await updateUserSettings({
-        workspace_id: current.workspaceId || "",
-        repository_ids: current.repositoryIds || [],
-        system_metrics_display: { show_in_topbar: checked },
-      });
-    } catch {
-      setUserSettings({ ...storeApi.getState().userSettings, systemMetricsDisplay: previous });
-    }
+    if (nextMetrics.length > 0) setSettings({ ...settings, metrics: nextMetrics });
   };
 
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty || Boolean(isShowInTopbarDirty)}>
       <CardHeader>
         <CardTitle className="text-base">Resource Metrics</CardTitle>
       </CardHeader>
@@ -98,33 +92,36 @@ export function SystemMetricsSettingsCard() {
           the machine resources from the kanban or task topbar.
         </p>
         <MetricsDisplayToggle
-          checked={userSettings.systemMetricsDisplay.showInTopbar}
-          onCheckedChange={toggleDisplay}
+          checked={showInTopbar}
+          isDirty={Boolean(isShowInTopbarDirty)}
+          onCheckedChange={onShowInTopbarChange}
         />
         <MetricsSamplerControls
           settings={settings}
-          isSaving={isSaving}
+          savedSettings={savedSettings}
+          isSaving={!loaded}
           onToggleMetric={toggleMetric}
-          onChangeSettings={(next) => void saveGlobal(next)}
+          onChangeSettings={setSettings}
           onDraftSettings={setSettings}
         />
         <ExecutionMetricsToggle
           checked={settings.collect_execution}
-          disabled={isSaving}
-          onCheckedChange={(checked) =>
-            void saveGlobal({ ...settings, collect_execution: checked })
-          }
+          isDirty={settings.collect_execution !== savedSettings.collect_execution}
+          disabled={!loaded}
+          onCheckedChange={(checked) => setSettings({ ...settings, collect_execution: checked })}
         />
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
 function MetricsDisplayToggle({
   checked,
+  isDirty,
   onCheckedChange,
 }: {
   checked: boolean;
+  isDirty: boolean;
   onCheckedChange: (checked: boolean) => void;
 }) {
   return (
@@ -135,19 +132,26 @@ function MetricsDisplayToggle({
           Collection starts only while at least one client displays metrics.
         </p>
       </div>
-      <Switch id="show-system-metrics" checked={checked} onCheckedChange={onCheckedChange} />
+      <Switch
+        id="show-system-metrics"
+        checked={checked}
+        data-settings-dirty={isDirty}
+        onCheckedChange={onCheckedChange}
+      />
     </div>
   );
 }
 
 function MetricsSamplerControls({
   settings,
+  savedSettings,
   isSaving,
   onToggleMetric,
   onChangeSettings,
   onDraftSettings,
 }: {
   settings: SystemMetricsGlobalSettings;
+  savedSettings: SystemMetricsGlobalSettings;
   isSaving: boolean;
   onToggleMetric: (metric: SystemMetricId, checked: boolean) => void;
   onChangeSettings: (settings: SystemMetricsGlobalSettings) => void;
@@ -155,7 +159,12 @@ function MetricsSamplerControls({
 }) {
   return (
     <div className="grid gap-4 md:grid-cols-[1fr_180px_180px]">
-      <MetricCheckboxes settings={settings} isSaving={isSaving} onToggleMetric={onToggleMetric} />
+      <MetricCheckboxes
+        settings={settings}
+        savedSettings={savedSettings}
+        isSaving={isSaving}
+        onToggleMetric={onToggleMetric}
+      />
       <div className="space-y-2">
         <Label htmlFor="metrics-interval">Frequency (seconds)</Label>
         <Input
@@ -164,6 +173,7 @@ function MetricsSamplerControls({
           min={1}
           max={300}
           value={settings.interval_seconds}
+          data-settings-dirty={settings.interval_seconds !== savedSettings.interval_seconds}
           disabled={isSaving}
           onChange={(event) =>
             onChangeSettings({ ...settings, interval_seconds: clampInterval(event.target.value) })
@@ -175,6 +185,7 @@ function MetricsSamplerControls({
         <Input
           id="metrics-disk-path"
           value={settings.backend_disk_path}
+          data-settings-dirty={settings.backend_disk_path !== savedSettings.backend_disk_path}
           disabled={isSaving}
           onChange={(event) =>
             onDraftSettings({ ...settings, backend_disk_path: event.target.value })
@@ -188,10 +199,12 @@ function MetricsSamplerControls({
 
 function MetricCheckboxes({
   settings,
+  savedSettings,
   isSaving,
   onToggleMetric,
 }: {
   settings: SystemMetricsGlobalSettings;
+  savedSettings: SystemMetricsGlobalSettings;
   isSaving: boolean;
   onToggleMetric: (metric: SystemMetricId, checked: boolean) => void;
 }) {
@@ -203,6 +216,9 @@ function MetricCheckboxes({
           <label key={metric.id} className="flex items-center gap-2 text-sm">
             <Checkbox
               checked={settings.metrics.includes(metric.id)}
+              data-settings-dirty={
+                settings.metrics.includes(metric.id) !== savedSettings.metrics.includes(metric.id)
+              }
               disabled={isSaving}
               onCheckedChange={(checked) => onToggleMetric(metric.id, checked === true)}
             />
@@ -216,10 +232,12 @@ function MetricCheckboxes({
 
 function ExecutionMetricsToggle({
   checked,
+  isDirty,
   disabled,
   onCheckedChange,
 }: {
   checked: boolean;
+  isDirty: boolean;
   disabled: boolean;
   onCheckedChange: (checked: boolean) => void;
 }) {
@@ -234,6 +252,7 @@ function ExecutionMetricsToggle({
       <Switch
         id="collect-execution-metrics"
         checked={checked}
+        data-settings-dirty={isDirty}
         disabled={disabled}
         onCheckedChange={onCheckedChange}
       />
diff --git a/apps/web/components/settings/system/feature-toggle-card.tsx b/apps/web/components/settings/system/feature-toggle-card.tsx
index f07401056a..e96bec2b31 100644
--- a/apps/web/components/settings/system/feature-toggle-card.tsx
+++ b/apps/web/components/settings/system/feature-toggle-card.tsx
@@ -2,22 +2,30 @@
 
 import { Badge } from "@kandev/ui/badge";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
+import { CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
 import { Switch } from "@kandev/ui/switch";
 import { IconFlask, IconLock, IconRefresh } from "@tabler/icons-react";
 import type { RuntimeFlagState } from "@/lib/types/runtime-flags";
+import { SettingsCard } from "@/components/settings/settings-card";
 
 type FeatureToggleCardProps = {
   flag: RuntimeFlagState;
+  isDirty?: boolean;
   saving: boolean;
   onChange: (next: boolean) => void;
   onReset: () => void;
 };
 
-export function FeatureToggleCard({ flag, saving, onChange, onReset }: FeatureToggleCardProps) {
+export function FeatureToggleCard({
+  flag,
+  isDirty = false,
+  saving,
+  onChange,
+  onReset,
+}: FeatureToggleCardProps) {
   const disabled = saving || flag.env_locked || !flag.mutable;
   return (
-    <Card data-testid={`feature-toggle-${flag.key}`}>
+    <SettingsCard isDirty={isDirty} data-testid={`feature-toggle-${flag.key}`}>
       <CardHeader className="gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div className="min-w-0 space-y-2">
           <CardTitle className="flex flex-wrap items-center gap-2 text-base">
@@ -28,6 +36,7 @@ export function FeatureToggleCard({ flag, saving, onChange, onReset }: FeatureTo
         </div>
         <Switch
           checked={flag.effective_value}
+          data-settings-dirty={isDirty}
           disabled={disabled}
           onCheckedChange={onChange}
           aria-label={`Toggle ${flag.label}`}
@@ -58,7 +67,7 @@ export function FeatureToggleCard({ flag, saving, onChange, onReset }: FeatureTo
           )}
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
diff --git a/apps/web/components/settings/system/feature-toggles-settings.test.tsx b/apps/web/components/settings/system/feature-toggles-settings.test.tsx
index 04d0022602..4b5a3d03ef 100644
--- a/apps/web/components/settings/system/feature-toggles-settings.test.tsx
+++ b/apps/web/components/settings/system/feature-toggles-settings.test.tsx
@@ -1,11 +1,14 @@
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { TooltipProvider } from "@kandev/ui/tooltip";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { RuntimeFlagState } from "@/lib/types/runtime-flags";
+import type { SettingsSaveContributor } from "../settings-save-provider";
 import { FeatureTogglesSettings } from "./feature-toggles-settings";
 
 const fetchRuntimeFlagsMock = vi.fn();
+const updateRuntimeFlagMock = vi.fn();
 const toastMock = vi.fn();
+let saveContributor: SettingsSaveContributor | null = null;
 const DEBUG_MODE_LABEL = "Debug mode";
 const FEATURE_TOGGLES_LOAD_FAILURE = "Feature toggles could not be loaded.";
 
@@ -14,11 +17,27 @@ vi.mock("@kandev/ui/switch", () => ({
     checked,
     disabled,
     "aria-label": ariaLabel,
+    onCheckedChange,
   }: {
     checked: boolean;
     disabled: boolean;
     "aria-label": string;
-  }) => <button aria-label={ariaLabel} aria-pressed={checked} disabled={disabled} type="button" />,
+    onCheckedChange: (checked: boolean) => void;
+  }) => (
+    <button
+      aria-label={ariaLabel}
+      aria-pressed={checked}
+      disabled={disabled}
+      type="button"
+      onClick={() => onCheckedChange(!checked)}
+    />
+  ),
+}));
+
+vi.mock("../settings-save-provider", () => ({
+  useSettingsSaveContributor: (contributor: SettingsSaveContributor) => {
+    saveContributor = contributor;
+  },
 }));
 
 vi.mock("@/components/toast-provider", () => ({
@@ -27,12 +46,14 @@ vi.mock("@/components/toast-provider", () => ({
 
 vi.mock("@/lib/api/domains/runtime-flags-api", () => ({
   fetchRuntimeFlags: (...args: unknown[]) => fetchRuntimeFlagsMock(...args),
-  updateRuntimeFlag: vi.fn(),
+  updateRuntimeFlag: (...args: unknown[]) => updateRuntimeFlagMock(...args),
 }));
 
 beforeEach(() => {
   fetchRuntimeFlagsMock.mockReset();
+  updateRuntimeFlagMock.mockReset();
   toastMock.mockReset();
+  saveContributor = null;
 });
 
 afterEach(() => {
@@ -41,6 +62,36 @@ afterEach(() => {
 });
 
 describe("FeatureTogglesSettings", () => {
+  it("stages an override until the route save contributor runs", async () => {
+    const initial = flagState({
+      override_value: null,
+      effective_value: false,
+      source: "default",
+      requires_restart_to_apply: false,
+    });
+    const persisted = flagState({ override_value: true, effective_value: true });
+    updateRuntimeFlagMock.mockResolvedValueOnce({ flags: [persisted] });
+
+    render(
+      <TooltipProvider>
+        <FeatureTogglesSettings initialFlags={[initial]} restartCapability={null} />
+      </TooltipProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: `Toggle ${DEBUG_MODE_LABEL}` }));
+
+    expect(updateRuntimeFlagMock).not.toHaveBeenCalled();
+    expect(saveContributor?.isDirty).toBe(true);
+    expect(
+      screen.getByTestId(`feature-toggle-${initial.key}`).getAttribute("data-settings-dirty"),
+    ).toBe("true");
+    if (!saveContributor) throw new Error("Save contributor was not registered");
+
+    await saveContributor.save(saveContributor.revision);
+
+    expect(updateRuntimeFlagMock).toHaveBeenCalledWith(initial.key, true);
+  });
+
   it("shows restart support details without offering restart when unsupported", () => {
     render(
       <TooltipProvider>
@@ -76,7 +127,9 @@ describe("FeatureTogglesSettings", () => {
     expect(await screen.findByText(DEBUG_MODE_LABEL)).not.toBeNull();
     expect(screen.queryByText(FEATURE_TOGGLES_LOAD_FAILURE)).toBeNull();
   });
+});
 
+describe("FeatureTogglesSettings bootstrap reload", () => {
   it("shows a loading state while the empty initial runtime flags payload reloads", async () => {
     let resolveFlags: (value: { flags: RuntimeFlagState[] }) => void = () => {};
     fetchRuntimeFlagsMock.mockReturnValueOnce(
diff --git a/apps/web/components/settings/system/feature-toggles-settings.tsx b/apps/web/components/settings/system/feature-toggles-settings.tsx
index d79dfa8022..e8fd665862 100644
--- a/apps/web/components/settings/system/feature-toggles-settings.tsx
+++ b/apps/web/components/settings/system/feature-toggles-settings.tsx
@@ -1,15 +1,6 @@
 "use client";
 
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type Dispatch,
-  type MutableRefObject,
-  type SetStateAction,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type MutableRefObject } from "react";
 import { Alert, AlertDescription, AlertTitle } from "@kandev/ui/alert";
 import { Button } from "@kandev/ui/button";
 import { Card, CardContent } from "@kandev/ui/card";
@@ -23,6 +14,7 @@ import type { RuntimeFlagState } from "@/lib/types/runtime-flags";
 import type { RestartCapability } from "@/lib/types/system";
 import { FeatureToggleCard } from "./feature-toggle-card";
 import { RestartProgressDialog } from "./restart-progress-dialog";
+import { useSettingsSaveContributor } from "../settings-save-provider";
 
 type Props = {
   initialFlags: RuntimeFlagState[];
@@ -32,16 +24,57 @@ type Props = {
 let bootstrapRuntimeFlagsRequest: ReturnType<typeof fetchRuntimeFlags> | null = null;
 
 export function FeatureTogglesSettings({ initialFlags, restartCapability }: Props) {
-  const [flags, setFlags] = useState(initialFlags);
-  const [isLoadingFlags, setIsLoadingFlags] = useState(initialFlags.length === 0);
-  const [savingKeys, setSavingKeys] = useState<Set<string>>(() => new Set());
-  const requestSeqRef = useRef(0);
-  const attemptedEmptyInitialReloadRef = useRef(false);
-  const { toast } = useToast();
+  const { flags, savedFlags, isLoadingFlags, isDirty, reload, setOverride } =
+    useRuntimeFlagsDraft(initialFlags);
   const pendingRestart = useMemo(
     () => flags.some((flag) => flag.requires_restart_to_apply),
     [flags],
   );
+  const savedFlagsByKey = useMemo(
+    () => new Map(savedFlags.map((flag) => [flag.key, flag])),
+    [savedFlags],
+  );
+  const onRestartComplete = useCallback(() => void reload(), [reload]);
+  const restart = useKandevRestart({ onComplete: onRestartComplete });
+
+  return (
+    <div className="space-y-4" data-testid="feature-toggles-settings">
+      {pendingRestart && (
+        <RestartRequiredAlert
+          capability={restartCapability}
+          restarting={restart.isRestarting || isDirty}
+          onRestart={() => void restart.start()}
+        />
+      )}
+      {flags.map((flag) => (
+        <FeatureToggleCard
+          key={flag.key}
+          flag={flag}
+          isDirty={flag.override_value !== savedFlagsByKey.get(flag.key)?.override_value}
+          saving={restart.isRestarting}
+          onChange={(next) => setOverride(flag, next)}
+          onReset={() => setOverride(flag, null)}
+        />
+      ))}
+      {flags.length === 0 && (
+        <FeatureTogglesEmptyState isLoading={isLoadingFlags} onRetry={() => void reload()} />
+      )}
+      <RestartProgressDialog
+        phase={restart.phase}
+        errorMessage={restart.errorMessage}
+        onDismiss={restart.dismiss}
+      />
+    </div>
+  );
+}
+
+function useRuntimeFlagsDraft(initialFlags: RuntimeFlagState[]) {
+  const [flags, setFlags] = useState(initialFlags);
+  const [savedFlags, setSavedFlags] = useState(initialFlags);
+  const [isLoadingFlags, setIsLoadingFlags] = useState(initialFlags.length === 0);
+  const requestSeqRef = useRef(0);
+  const attemptedEmptyInitialReloadRef = useRef(false);
+  const { toast } = useToast();
 
   const reload = useCallback(
     async (options?: { bootstrap?: boolean }) => {
@@ -49,7 +82,10 @@ export function FeatureTogglesSettings({ initialFlags, restartCapability }: Prop
       setIsLoadingFlags(true);
       try {
         const res = await fetchRuntimeFlagsForReload(options?.bootstrap === true);
-        setFlagsIfLatest(requestSeqRef, seq, res.flags, setFlags);
+        if (seq === requestSeqRef.current) {
+          setFlags(res.flags);
+          setSavedFlags(res.flags);
+        }
       } catch (err) {
         toast({
           title: "Failed to load feature toggles",
@@ -65,69 +101,55 @@ export function FeatureTogglesSettings({ initialFlags, restartCapability }: Prop
     [toast],
   );
 
-  const onRestartComplete = useCallback(() => void reload(), [reload]);
-  const restart = useKandevRestart({ onComplete: onRestartComplete });
-
   useEffect(() => {
     if (flags.length > 0 || attemptedEmptyInitialReloadRef.current) return;
     attemptedEmptyInitialReloadRef.current = true;
     void reload({ bootstrap: true });
   }, [flags.length, reload]);
 
-  const setOverride = async (flag: RuntimeFlagState, override: boolean | null) => {
-    const seq = nextRequestSeq(requestSeqRef);
-    setSavingKeys((prev) => {
-      const next = new Set(prev);
-      next.add(flag.key);
-      return next;
-    });
-    try {
-      const res = await updateRuntimeFlag(flag.key, override);
-      setFlagsIfLatest(requestSeqRef, seq, res.flags, setFlags);
-      toast({ title: "Feature toggle saved", variant: "success" });
-    } catch (err) {
-      toast({
-        title: "Failed to save feature toggle",
-        description: errorMessage(err),
-        variant: "error",
-      });
-    } finally {
-      setSavingKeys((prev) => {
-        const next = new Set(prev);
-        next.delete(flag.key);
-        return next;
-      });
-    }
+  const setOverride = (flag: RuntimeFlagState, override: boolean | null) => {
+    setFlags((current) =>
+      current.map((item) =>
+        item.key === flag.key
+          ? {
+              ...item,
+              override_value: override,
+              effective_value: override ?? item.default_value,
+              source: override === null ? "default" : "override",
+            }
+          : item,
+      ),
+    );
   };
 
-  return (
-    <div className="space-y-4" data-testid="feature-toggles-settings">
-      {pendingRestart && (
-        <RestartRequiredAlert
-          capability={restartCapability}
-          restarting={restart.isRestarting}
-          onRestart={() => void restart.start()}
-        />
-      )}
-      {flags.map((flag) => (
-        <FeatureToggleCard
-          key={flag.key}
-          flag={flag}
-          saving={savingKeys.has(flag.key) || restart.isRestarting}
-          onChange={(next) => void setOverride(flag, next)}
-          onReset={() => void setOverride(flag, null)}
-        />
-      ))}
-      {flags.length === 0 && (
-        <FeatureTogglesEmptyState isLoading={isLoadingFlags} onRetry={() => void reload()} />
-      )}
-      <RestartProgressDialog
-        phase={restart.phase}
-        errorMessage={restart.errorMessage}
-        onDismiss={restart.dismiss}
-      />
-    </div>
+  const revision = JSON.stringify(flags.map(({ key, override_value }) => [key, override_value]));
+  const savedRevision = JSON.stringify(
+    savedFlags.map(({ key, override_value }) => [key, override_value]),
   );
+  const isDirty = revision !== savedRevision;
+  useSettingsSaveContributor({
+    id: "system-feature-toggles",
+    revision,
+    isDirty,
+    save: async () => {
+      const submitted = flags;
+      const changed = submitted.filter((flag) => {
+        const saved = savedFlags.find((candidate) => candidate.key === flag.key);
+        return saved?.override_value !== flag.override_value;
+      });
+      let persisted = savedFlags;
+      for (const flag of changed) {
+        const response = await updateRuntimeFlag(flag.key, flag.override_value);
+        persisted = response.flags;
+      }
+      setSavedFlags(persisted);
+      setFlags((current) => (current === submitted ? persisted : current));
+      toast({ title: "Feature toggles saved", variant: "success" });
+    },
+    discard: () => setFlags(savedFlags),
+  });
+
+  return { flags, savedFlags, isLoadingFlags, isDirty, reload, setOverride };
 }
 
 function fetchRuntimeFlagsForReload(bootstrap: boolean): ReturnType<typeof fetchRuntimeFlags> {
@@ -250,14 +272,3 @@ function nextRequestSeq(seqRef: MutableRefObject<number>): number {
   seqRef.current += 1;
   return seqRef.current;
 }
-
-function setFlagsIfLatest(
-  seqRef: MutableRefObject<number>,
-  seq: number,
-  flags: RuntimeFlagState[],
-  setFlags: Dispatch<SetStateAction<RuntimeFlagState[]>>,
-) {
-  if (seq === seqRef.current) {
-    setFlags(flags);
-  }
-}
diff --git a/apps/web/components/settings/system/storage/storage-maintenance-settings.test.tsx b/apps/web/components/settings/system/storage/storage-maintenance-settings.test.tsx
index 55878378f2..68f2841b8d 100644
--- a/apps/web/components/settings/system/storage/storage-maintenance-settings.test.tsx
+++ b/apps/web/components/settings/system/storage/storage-maintenance-settings.test.tsx
@@ -1,15 +1,19 @@
-import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { TooltipProvider } from "@kandev/ui/tooltip";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { StorageOverviewResponse } from "@/lib/types/system";
+import { SettingsSaveProvider } from "../../settings-save-provider";
 import { StorageMaintenanceSettings } from "./storage-maintenance-settings";
 
 const mocks = vi.hoisted(() => ({
   useStorageMaintenance: vi.fn(),
   useSystemJob: vi.fn(),
 }));
+const IDLE_PERIOD_TEST_ID = "storage-idle-period";
 
-vi.mock("@/hooks/domains/system/use-storage-maintenance", () => ({
+vi.mock("@/hooks/domains/system/use-storage-maintenance", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/hooks/domains/system/use-storage-maintenance")>()),
   useStorageMaintenance: mocks.useStorageMaintenance,
 }));
 
@@ -71,7 +75,7 @@ function controller(currentOverview: StorageOverviewResponse) {
     deleteJob: undefined,
     analyze: vi.fn(),
     runNow: vi.fn(),
-    save: vi.fn(),
+    save: vi.fn().mockResolvedValue(undefined),
     adopt: vi.fn(),
     restore: vi.fn(),
     permanentlyDelete: vi.fn(),
@@ -79,6 +83,14 @@ function controller(currentOverview: StorageOverviewResponse) {
   };
 }
 
+function Providers({ children }: { children: ReactNode }) {
+  return (
+    <SettingsSaveProvider>
+      <TooltipProvider>{children}</TooltipProvider>
+    </SettingsSaveProvider>
+  );
+}
+
 describe("StorageMaintenanceSettings", () => {
   afterEach(cleanup);
 
@@ -100,11 +112,7 @@ describe("StorageMaintenanceSettings", () => {
       analysisJob,
     });
 
-    render(
-      <TooltipProvider>
-        <StorageMaintenanceSettings />
-      </TooltipProvider>,
-    );
+    render(<StorageMaintenanceSettings />, { wrapper: Providers });
 
     const analyzeButton = screen.getByTestId("storage-analyze");
     expect(analyzeButton.textContent?.trim()).toBe("Analysis complete");
@@ -124,11 +132,7 @@ describe("StorageMaintenanceSettings", () => {
       analysisJob,
     });
 
-    render(
-      <TooltipProvider>
-        <StorageMaintenanceSettings />
-      </TooltipProvider>,
-    );
+    render(<StorageMaintenanceSettings />, { wrapper: Providers });
 
     const analyzeButton = screen.getByTestId("storage-analyze") as HTMLButtonElement;
     expect(analyzeButton.textContent?.trim()).toBe("Analyzing...");
@@ -136,12 +140,8 @@ describe("StorageMaintenanceSettings", () => {
   });
 
   it("preserves a dirty policy draft when refreshed overview data arrives", () => {
-    const { rerender } = render(
-      <TooltipProvider>
-        <StorageMaintenanceSettings />
-      </TooltipProvider>,
-    );
-    const idlePeriod = screen.getByTestId("storage-idle-period") as HTMLInputElement;
+    const { rerender } = render(<StorageMaintenanceSettings />, { wrapper: Providers });
+    const idlePeriod = screen.getByTestId(IDLE_PERIOD_TEST_ID) as HTMLInputElement;
     fireEvent.change(idlePeriod, { target: { value: "31" } });
 
     mocks.useStorageMaintenance.mockReturnValue(
@@ -150,12 +150,71 @@ describe("StorageMaintenanceSettings", () => {
         settings: { ...overview.settings, check_interval_hours: 48 },
       }),
     );
-    rerender(
-      <TooltipProvider>
-        <StorageMaintenanceSettings />
-      </TooltipProvider>,
-    );
+    rerender(<StorageMaintenanceSettings />);
 
-    expect((screen.getByTestId("storage-idle-period") as HTMLInputElement).value).toBe("31");
+    expect((screen.getByTestId(IDLE_PERIOD_TEST_ID) as HTMLInputElement).value).toBe("31");
+  });
+});
+
+describe("StorageMaintenanceSettings coordinated save", () => {
+  afterEach(cleanup);
+
+  beforeEach(() => {
+    mocks.useSystemJob.mockReturnValue(undefined);
+  });
+
+  it("stages policy edits until the shared save action runs", async () => {
+    const currentController = controller(overview);
+    mocks.useStorageMaintenance.mockReturnValue(currentController);
+    render(<StorageMaintenanceSettings />, { wrapper: Providers });
+
+    fireEvent.change(screen.getByTestId(IDLE_PERIOD_TEST_ID), { target: { value: "31" } });
+
+    expect(currentController.save).not.toHaveBeenCalled();
+    expect(screen.getByTestId(IDLE_PERIOD_TEST_ID).getAttribute("data-settings-dirty")).toBe(
+      "true",
+    );
+    expect(
+      screen.getByTestId("storage-policy-section-schedule").getAttribute("data-settings-dirty"),
+    ).toBe("true");
+
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+    await waitFor(() =>
+      expect(currentController.save).toHaveBeenCalledWith(
+        { ...overview.settings, idle_for_minutes: 31 },
+        undefined,
+      ),
+    );
+  });
+
+  it("stages the Docker acknowledgement and confirms it through the shared save", async () => {
+    const currentController = controller(overview);
+    mocks.useStorageMaintenance.mockReturnValue(currentController);
+    render(<StorageMaintenanceSettings />, { wrapper: Providers });
+
+    fireEvent.click(screen.getByTestId("storage-docker-dedicated"));
+    fireEvent.change(screen.getByLabelText("Type DEDICATED to confirm"), {
+      target: { value: "DEDICATED" },
+    });
+    fireEvent.click(screen.getByTestId("storage-docker-confirm"));
+
+    expect(currentController.save).not.toHaveBeenCalled();
+    expect(screen.getByTestId("storage-docker-dedicated").getAttribute("data-settings-dirty")).toBe(
+      "true",
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() =>
+      expect(currentController.save).toHaveBeenCalledWith(
+        {
+          ...overview.settings,
+          docker: {
+            ...overview.settings.docker,
+            dedicated_daemon_acknowledged: true,
+          },
+        },
+        "DEDICATED",
+      ),
+    );
   });
 });
diff --git a/apps/web/components/settings/system/storage/storage-maintenance-settings.tsx b/apps/web/components/settings/system/storage/storage-maintenance-settings.tsx
index 0ca4bed1a6..73cd34c972 100644
--- a/apps/web/components/settings/system/storage/storage-maintenance-settings.tsx
+++ b/apps/web/components/settings/system/storage/storage-maintenance-settings.tsx
@@ -6,6 +6,7 @@ import { Spinner } from "@kandev/ui/spinner";
 import { IconAlertTriangle, IconCheck, IconPlayerPlay, IconRefresh } from "@tabler/icons-react";
 import { useStorageMaintenance } from "@/hooks/domains/system/use-storage-maintenance";
 import type { StorageMaintenanceSettings as Settings, SystemJob } from "@/lib/types/system";
+import { useSettingsSaveContributor } from "../../settings-save-provider";
 import { StorageActionButton } from "./storage-action-button";
 import { StorageOverviewCard } from "./storage-overview-card";
 import { StoragePolicyCard } from "./storage-policy-card";
@@ -122,22 +123,56 @@ function StorageActions({
   );
 }
 
-export function StorageMaintenanceSettings() {
-  const controller = useStorageMaintenance();
+function serializeSettings(settings: Settings | null): string {
+  return settings ? JSON.stringify(settings) : "loading";
+}
+
+function useStoragePolicyDraft(controller: ReturnType<typeof useStorageMaintenance>) {
   const [draft, setDraft] = useState<Settings | null>(null);
   const previousServerSettings = useRef<Settings | null>(null);
+  const savedSettings = controller.overview?.settings ?? null;
+
   useEffect(() => {
-    if (!controller.overview) return;
-    const nextSettings = controller.overview.settings;
+    if (!savedSettings) return;
     setDraft((current) => {
       const previous = previousServerSettings.current;
-      if (!current || !previous || JSON.stringify(current) === JSON.stringify(previous)) {
-        return nextSettings;
+      if (!current || !previous || serializeSettings(current) === serializeSettings(previous)) {
+        return savedSettings;
       }
       return current;
     });
-    previousServerSettings.current = nextSettings;
-  }, [controller.overview]);
+    previousServerSettings.current = savedSettings;
+  }, [savedSettings]);
+
+  const pending = controller.pendingAction !== null;
+  useSettingsSaveContributor({
+    id: "system:storage-policy",
+    revision: serializeSettings(draft),
+    isDirty: Boolean(
+      draft && savedSettings && serializeSettings(draft) !== serializeSettings(savedSettings),
+    ),
+    canSave: !pending,
+    invalidReason: pending ? "Wait for the current storage action to finish." : undefined,
+    save: async () => {
+      if (!draft || !savedSettings) return;
+      const confirmation =
+        draft.docker.dedicated_daemon_acknowledged &&
+        !savedSettings.docker.dedicated_daemon_acknowledged
+          ? "DEDICATED"
+          : undefined;
+      await controller.save(draft, confirmation);
+    },
+    discard: () => {
+      if (savedSettings) setDraft(savedSettings);
+    },
+  });
+
+  return { draft, setDraft, savedSettings };
+}
+
+export function StorageMaintenanceSettings() {
+  const controller = useStorageMaintenance();
+  const { draft, setDraft, savedSettings } = useStoragePolicyDraft(controller);
   const pending = controller.pendingAction !== null;
   const disabledReason = pending ? "Wait for the current storage action to finish." : undefined;
 
@@ -159,14 +194,13 @@ export function StorageMaintenanceSettings() {
           disabledReason={disabledReason}
           onRunGoCache={() => void controller.runNow(["go_cache"])}
         />
-        {draft && controller.overview && (
+        {draft && savedSettings && controller.overview && (
           <StoragePolicyCard
             settings={draft}
+            savedSettings={savedSettings}
             capabilities={controller.overview.capabilities}
             pending={pending}
             onChange={setDraft}
-            onSave={() => controller.save(draft)}
-            onDedicatedConfirm={(next) => controller.save(next, "DEDICATED")}
             onAdopt={controller.adopt}
           />
         )}
diff --git a/apps/web/components/settings/system/storage/storage-policy-card.test.tsx b/apps/web/components/settings/system/storage/storage-policy-card.test.tsx
index a2de535ba8..0b161eadea 100644
--- a/apps/web/components/settings/system/storage/storage-policy-card.test.tsx
+++ b/apps/web/components/settings/system/storage/storage-policy-card.test.tsx
@@ -49,11 +49,10 @@ function renderCard(
     <TooltipProvider>
       <StoragePolicyCard
         settings={currentSettings}
+        savedSettings={settings}
         capabilities={capabilities}
         pending={pending}
         onChange={onChange}
-        onSave={vi.fn()}
-        onDedicatedConfirm={vi.fn()}
         onAdopt={vi.fn()}
       />
     </TooltipProvider>,
@@ -122,7 +121,6 @@ describe("StoragePolicyCard interactions", () => {
       testIds.dockerBuildCacheUnused,
       "storage-docker-unused-images",
       testIds.dockerImagesUnused,
-      "storage-save-settings",
     ];
     for (const testId of pendingTestIds) {
       expect((screen.getByTestId(testId) as HTMLButtonElement | HTMLInputElement).disabled).toBe(
@@ -180,6 +178,20 @@ describe("StoragePolicyCard interactions", () => {
     }
   });
 
+  it("marks the changed field and owning policy card as dirty", () => {
+    renderCard(false, vi.fn(), { ...settings, idle_for_minutes: 31 });
+
+    expect(screen.getByTestId("storage-idle-period").getAttribute("data-settings-dirty")).toBe(
+      "true",
+    );
+    expect(
+      screen.getByTestId("storage-policy-section-schedule").getAttribute("data-settings-dirty"),
+    ).toBe("true");
+    expect(
+      screen.getByTestId("storage-policy-section-docker").getAttribute("data-settings-dirty"),
+    ).toBe("false");
+  });
+
   it("groups related settings and provides help for every policy option", () => {
     renderCard();
 
diff --git a/apps/web/components/settings/system/storage/storage-policy-card.tsx b/apps/web/components/settings/system/storage/storage-policy-card.tsx
index 62f49688db..d545d69771 100644
--- a/apps/web/components/settings/system/storage/storage-policy-card.tsx
+++ b/apps/web/components/settings/system/storage/storage-policy-card.tsx
@@ -14,22 +14,40 @@ import { bytesToGigabytes, gigabytesToBytes } from "./storage-units";
 
 type Props = {
   settings: StorageMaintenanceSettings;
+  savedSettings: StorageMaintenanceSettings;
   capabilities: StorageCapabilities;
   pending: boolean;
   onChange: (settings: StorageMaintenanceSettings) => void;
-  onSave: () => Promise<void>;
-  onDedicatedConfirm: (settings: StorageMaintenanceSettings) => Promise<void>;
   onAdopt: (path: string) => Promise<void>;
 };
 
-type PolicySectionProps = Pick<Props, "settings" | "capabilities" | "onChange" | "pending">;
+type PolicySectionProps = Pick<
+  Props,
+  "settings" | "savedSettings" | "capabilities" | "onChange" | "pending"
+>;
 
-function ScheduleSection({ settings, pending, onChange }: PolicySectionProps) {
+function settingIsDirty<T>(
+  settings: StorageMaintenanceSettings,
+  savedSettings: StorageMaintenanceSettings,
+  select: (value: StorageMaintenanceSettings) => T,
+): boolean {
+  return !Object.is(select(settings), select(savedSettings));
+}
+
+function ScheduleSection({ settings, savedSettings, pending, onChange }: PolicySectionProps) {
+  const enabledDirty = settingIsDirty(settings, savedSettings, (value) => value.enabled);
+  const intervalDirty = settingIsDirty(
+    settings,
+    savedSettings,
+    (value) => value.check_interval_hours,
+  );
+  const idleDirty = settingIsDirty(settings, savedSettings, (value) => value.idle_for_minutes);
   return (
     <PolicySection
       sectionId="schedule"
       title="Schedule"
       description="Controls when automatic maintenance is allowed to start. Manual actions remain available when scheduling is off."
+      isDirty={enabledDirty || intervalDirty || idleDirty}
     >
       <SettingRow
         title="Scheduled maintenance"
@@ -42,6 +60,7 @@ function ScheduleSection({ settings, pending, onChange }: PolicySectionProps) {
             onCheckedChange={(enabled) => onChange({ ...settings, enabled })}
             aria-label="Scheduled maintenance"
             data-testid="storage-scheduling-enabled"
+            data-settings-dirty={enabledDirty}
           />
         }
       />
@@ -55,6 +74,7 @@ function ScheduleSection({ settings, pending, onChange }: PolicySectionProps) {
           disabled={pending || !settings.enabled}
           onChange={(check_interval_hours) => onChange({ ...settings, check_interval_hours })}
           testId="storage-check-interval"
+          isDirty={intervalDirty}
         />
         <NumberField
           label="Require idle for (minutes)"
@@ -65,18 +85,31 @@ function ScheduleSection({ settings, pending, onChange }: PolicySectionProps) {
           disabled={pending || !settings.enabled}
           onChange={(idle_for_minutes) => onChange({ ...settings, idle_for_minutes })}
           testId="storage-idle-period"
+          isDirty={idleDirty}
         />
       </div>
     </PolicySection>
   );
 }
 
-function WorkspaceSection({ settings, pending, onChange }: PolicySectionProps) {
+function WorkspaceSection({ settings, savedSettings, pending, onChange }: PolicySectionProps) {
+  const workspacesDirty = settingIsDirty(
+    settings,
+    savedSettings,
+    (value) => value.workspaces.enabled,
+  );
+  const graceDirty = settingIsDirty(settings, savedSettings, (value) => value.orphan_grace_hours);
+  const containersDirty = settingIsDirty(
+    settings,
+    savedSettings,
+    (value) => value.kandev_containers.enabled,
+  );
   return (
     <PolicySection
       sectionId="workspaces"
       title="Workspaces and containers"
       description="Reclaim resources that Kandev can positively identify as no longer in use."
+      isDirty={workspacesDirty || graceDirty || containersDirty}
     >
       <SettingRow
         title="Orphan task workspaces"
@@ -88,6 +121,7 @@ function WorkspaceSection({ settings, pending, onChange }: PolicySectionProps) {
             disabled={pending}
             onCheckedChange={(enabled) => onChange({ ...settings, workspaces: { enabled } })}
             aria-label="Clean orphan task workspaces"
+            data-settings-dirty={workspacesDirty}
           />
         }
       />
@@ -101,6 +135,7 @@ function WorkspaceSection({ settings, pending, onChange }: PolicySectionProps) {
           disabled={pending || !settings.workspaces.enabled}
           onChange={(orphan_grace_hours) => onChange({ ...settings, orphan_grace_hours })}
           testId="storage-orphan-grace"
+          isDirty={graceDirty}
         />
       </div>
       <SettingRow
@@ -113,6 +148,7 @@ function WorkspaceSection({ settings, pending, onChange }: PolicySectionProps) {
             disabled={pending}
             onCheckedChange={(enabled) => onChange({ ...settings, kandev_containers: { enabled } })}
             aria-label="Clean Kandev containers"
+            data-settings-dirty={containersDirty}
           />
         }
       />
@@ -175,6 +211,7 @@ function AdoptionField({
 
 function GoCacheSection({
   settings,
+  savedSettings,
   capabilities,
   pending,
   onChange,
@@ -186,11 +223,18 @@ function GoCacheSection({
   setAdoptionPath: (path: string) => void;
   onOpenAdoption: () => void;
 }) {
+  const enabledDirty = settingIsDirty(settings, savedSettings, (value) => value.go_cache.enabled);
+  const maxBytesDirty = settingIsDirty(
+    settings,
+    savedSettings,
+    (value) => value.go_cache.max_bytes,
+  );
   return (
     <PolicySection
       sectionId="go-cache"
       title="Go build cache"
       description="Use and trim a Kandev-owned cache for new host-local Go executions."
+      isDirty={enabledDirty || maxBytesDirty}
     >
       <SettingRow
         title="Managed Go cache"
@@ -205,6 +249,7 @@ function GoCacheSection({
             }
             aria-label="Enable managed Go cache"
             data-testid="storage-go-cache-enabled"
+            data-settings-dirty={enabledDirty}
           />
         }
       />
@@ -222,6 +267,7 @@ function GoCacheSection({
             })
           }
           testId="storage-go-cache-max"
+          isDirty={maxBytesDirty}
         />
       </div>
       {capabilities.go_cache_adoption_available && (
@@ -241,13 +287,18 @@ type DockerSettings = StorageMaintenanceSettings["docker"];
 
 function DockerBuildCacheSettings({
   docker,
+  savedDocker,
   disabledReason,
   updateDocker,
 }: {
   docker: DockerSettings;
+  savedDocker: DockerSettings;
   disabledReason?: string;
   updateDocker: (docker: DockerSettings) => void;
 }) {
+  const enabledDirty = docker.build_cache_enabled !== savedDocker.build_cache_enabled;
+  const keepBytesDirty = docker.build_cache_keep_bytes !== savedDocker.build_cache_keep_bytes;
+  const unusedHoursDirty = docker.build_cache_unused_hours !== savedDocker.build_cache_unused_hours;
   return (
     <>
       <SettingRow
@@ -263,6 +314,7 @@ function DockerBuildCacheSettings({
             }
             aria-label="Clean Docker build cache"
             data-testid="storage-docker-build-cache"
+            data-settings-dirty={enabledDirty}
           />
         }
       />
@@ -280,6 +332,7 @@ function DockerBuildCacheSettings({
             })
           }
           testId="storage-docker-build-cache-keep-bytes"
+          isDirty={keepBytesDirty}
         />
         <NumberField
           label="Build cache must be unused for (hours)"
@@ -292,6 +345,7 @@ function DockerBuildCacheSettings({
             updateDocker({ ...docker, build_cache_unused_hours })
           }
           testId="storage-docker-build-cache-unused-hours"
+          isDirty={unusedHoursDirty}
         />
       </div>
     </>
@@ -300,13 +354,17 @@ function DockerBuildCacheSettings({
 
 function DockerImageSettings({
   docker,
+  savedDocker,
   disabledReason,
   updateDocker,
 }: {
   docker: DockerSettings;
+  savedDocker: DockerSettings;
   disabledReason?: string;
   updateDocker: (docker: DockerSettings) => void;
 }) {
+  const enabledDirty = docker.unused_images_enabled !== savedDocker.unused_images_enabled;
+  const hoursDirty = docker.unused_images_hours !== savedDocker.unused_images_hours;
   return (
     <>
       <SettingRow
@@ -322,6 +380,7 @@ function DockerImageSettings({
             }
             aria-label="Clean unused Docker images"
             data-testid="storage-docker-unused-images"
+            data-settings-dirty={enabledDirty}
           />
         }
       />
@@ -335,6 +394,7 @@ function DockerImageSettings({
           disabled={Boolean(disabledReason) || !docker.unused_images_enabled}
           onChange={(unused_images_hours) => updateDocker({ ...docker, unused_images_hours })}
           testId="storage-docker-unused-images-hours"
+          isDirty={hoursDirty}
         />
       </div>
     </>
@@ -343,11 +403,16 @@ function DockerImageSettings({
 
 function DockerSection({
   settings,
+  savedSettings,
   capabilities,
   pending,
   onChange,
   onOpenDedicated,
 }: PolicySectionProps & { onOpenDedicated: () => void }) {
+  const dockerDirty = JSON.stringify(settings.docker) !== JSON.stringify(savedSettings.docker);
+  const dedicatedDirty =
+    settings.docker.dedicated_daemon_acknowledged !==
+    savedSettings.docker.dedicated_daemon_acknowledged;
   const unavailable = capabilities.docker_available
     ? undefined
     : "Docker is unavailable on the configured host.";
@@ -364,6 +429,7 @@ function DockerSection({
       sectionId="docker"
       title="Docker cleanup"
       description="Optional daemon-wide cleanup. Enable it only when this Docker daemon is dedicated to Kandev."
+      isDirty={dockerDirty}
     >
       <SettingRow
         title="Dedicated Docker daemon"
@@ -379,6 +445,7 @@ function DockerSection({
             }}
             aria-label="Dedicated Docker daemon"
             data-testid="storage-docker-dedicated"
+            data-settings-dirty={dedicatedDirty}
           />
         }
       />
@@ -389,11 +456,13 @@ function DockerSection({
       )}
       <DockerBuildCacheSettings
         docker={settings.docker}
+        savedDocker={savedSettings.docker}
         disabledReason={disabledReason}
         updateDocker={updateDocker}
       />
       <DockerImageSettings
         docker={settings.docker}
+        savedDocker={savedSettings.docker}
         disabledReason={disabledReason}
         updateDocker={updateDocker}
       />
@@ -402,12 +471,18 @@ function DockerSection({
   );
 }
 
-function QuarantineSection({ settings, pending, onChange }: PolicySectionProps) {
+function QuarantineSection({ settings, savedSettings, pending, onChange }: PolicySectionProps) {
+  const retentionDirty = settingIsDirty(
+    settings,
+    savedSettings,
+    (value) => value.quarantine_retention_hours,
+  );
   return (
     <PolicySection
       sectionId="quarantine"
       title="Quarantine safety"
       description="Keep recoverable resources for a grace period before permanent deletion."
+      isDirty={retentionDirty}
     >
       <div className="grid min-w-0 grid-cols-1 gap-3 sm:grid-cols-2">
         <NumberField
@@ -421,6 +496,7 @@ function QuarantineSection({ settings, pending, onChange }: PolicySectionProps)
             onChange({ ...settings, quarantine_retention_hours })
           }
           testId="storage-quarantine-retention"
+          isDirty={retentionDirty}
         />
       </div>
     </PolicySection>
@@ -429,11 +505,10 @@ function QuarantineSection({ settings, pending, onChange }: PolicySectionProps)
 
 export function StoragePolicyCard({
   settings,
+  savedSettings,
   capabilities,
   pending,
   onChange,
-  onSave,
-  onDedicatedConfirm,
   onAdopt,
 }: Props) {
   const [dockerDialogOpen, setDockerDialogOpen] = useState(false);
@@ -450,18 +525,21 @@ export function StoragePolicyCard({
       <div className="space-y-3">
         <ScheduleSection
           settings={settings}
+          savedSettings={savedSettings}
           capabilities={capabilities}
           pending={pending}
           onChange={onChange}
         />
         <WorkspaceSection
           settings={settings}
+          savedSettings={savedSettings}
           capabilities={capabilities}
           pending={pending}
           onChange={onChange}
         />
         <GoCacheSection
           settings={settings}
+          savedSettings={savedSettings}
           capabilities={capabilities}
           pending={pending}
           onChange={onChange}
@@ -471,6 +549,7 @@ export function StoragePolicyCard({
         />
         <DockerSection
           settings={settings}
+          savedSettings={savedSettings}
           capabilities={capabilities}
           pending={pending}
           onChange={onChange}
@@ -478,27 +557,18 @@ export function StoragePolicyCard({
         />
         <QuarantineSection
           settings={settings}
+          savedSettings={savedSettings}
           capabilities={capabilities}
           pending={pending}
           onChange={onChange}
         />
       </div>
-      <div className="flex justify-end">
-        <StorageActionButton
-          disabledReason={pending ? "Wait for the current storage action to finish." : undefined}
-          onClick={() => void onSave()}
-          data-testid="storage-save-settings"
-        >
-          Save policy
-        </StorageActionButton>
-      </div>
       <DedicatedDockerDialog
         open={dockerDialogOpen}
         onOpenChange={setDockerDialogOpen}
         onConfirm={() => {
           const next = settingsWithDockerAcknowledgement(settings, true);
           onChange(next);
-          void onDedicatedConfirm(next);
           setDockerDialogOpen(false);
         }}
       />
diff --git a/apps/web/components/settings/system/storage/storage-policy-fields.tsx b/apps/web/components/settings/system/storage/storage-policy-fields.tsx
index 7688d85a93..8f288a212e 100644
--- a/apps/web/components/settings/system/storage/storage-policy-fields.tsx
+++ b/apps/web/components/settings/system/storage/storage-policy-fields.tsx
@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@kandev/ui/card";
+import { CardContent, CardDescription, CardHeader, CardTitle } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
 import { Label } from "@kandev/ui/label";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { StorageSettingHelp } from "./storage-setting-help";
 
 export function PolicySection({
@@ -9,20 +10,26 @@ export function PolicySection({
   title,
   description,
   children,
+  isDirty = false,
 }: {
   sectionId: string;
   title: string;
   description: string;
   children: ReactNode;
+  isDirty?: boolean;
 }) {
   return (
-    <Card className="min-w-0" data-testid={`storage-policy-section-${sectionId}`}>
+    <SettingsCard
+      className="min-w-0"
+      isDirty={isDirty}
+      data-testid={`storage-policy-section-${sectionId}`}
+    >
       <CardHeader>
         <CardTitle className="text-sm">{title}</CardTitle>
         <CardDescription className="text-xs">{description}</CardDescription>
       </CardHeader>
       <CardContent>{children}</CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
@@ -60,6 +67,7 @@ export function NumberField({
   disabled,
   onChange,
   testId,
+  isDirty = false,
 }: {
   label: string;
   help: string;
@@ -69,6 +77,7 @@ export function NumberField({
   disabled?: boolean;
   onChange: (value: number) => void;
   testId: string;
+  isDirty?: boolean;
 }) {
   return (
     <div className="min-w-0 space-y-1">
@@ -88,6 +97,7 @@ export function NumberField({
         onChange={(event) => onChange(Number(event.target.value))}
         className="h-11"
         data-testid={testId}
+        data-settings-dirty={isDirty}
       />
     </div>
   );
diff --git a/apps/web/components/settings/terminal-settings.tsx b/apps/web/components/settings/terminal-settings.tsx
index 0ce6035d23..6783ab358d 100644
--- a/apps/web/components/settings/terminal-settings.tsx
+++ b/apps/web/components/settings/terminal-settings.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { IconTerminal2 } from "@tabler/icons-react";
 import { Badge } from "@kandev/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
+import { CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
 import { Label } from "@kandev/ui/label";
 import {
@@ -18,9 +18,12 @@ import {
 } from "@kandev/ui/select";
 import { Separator } from "@kandev/ui/separator";
 import { SettingsSection } from "@/components/settings/settings-section";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { ShellSettingsCard } from "@/components/settings/shell-settings-card";
 import { useAppStore, useAppStoreApi } from "@/components/state-provider";
 import { updateUserSettings } from "@/lib/api";
+import { useShellSettings } from "@/hooks/domains/settings/use-shell-settings";
+import { useSettingsSaveContributor } from "./settings-save-provider";
 import { TERMINAL_FONT_PRESETS } from "@/lib/terminal/terminal-font";
 import type { FontCategory } from "@/lib/terminal/terminal-font";
 
@@ -68,45 +71,21 @@ function FontGroupOptions() {
   ));
 }
 
-function TerminalFontSizeCard() {
-  const storeApi = useAppStoreApi();
-  const userSettings = useAppStore((state) => state.userSettings);
-  const setUserSettings = useAppStore((state) => state.setUserSettings);
-  const [isSaving, setIsSaving] = useState(false);
-  const [fontSize, setFontSize] = useState(() => userSettings.terminalFontSize ?? 13);
-
-  const saveFontSize = async (value: number) => {
-    if (isSaving) return;
-    if (!Number.isFinite(value)) return;
-    if (value < 8 || value > 24) return;
-    setIsSaving(true);
-    const current = storeApi.getState().userSettings;
-    const previous = current.terminalFontSize;
-    try {
-      setUserSettings({ ...current, terminalFontSize: value });
-      await updateUserSettings({
-        workspace_id: current.workspaceId || "",
-        repository_ids: current.repositoryIds || [],
-        terminal_font_size: value,
-      });
-    } catch {
-      const latest = storeApi.getState().userSettings;
-      if (latest.workspaceId === current.workspaceId && latest.terminalFontSize === value) {
-        setUserSettings({ ...latest, terminalFontSize: previous });
-      }
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
+function TerminalFontSizeCard({
+  fontSize,
+  isDirty,
+  onChange,
+}: {
+  fontSize: number;
+  isDirty: boolean;
+  onChange: (value: number) => void;
+}) {
   const handleFontSizeBlur = () => {
-    const value = normalizeTerminalFontSize(fontSize, userSettings.terminalFontSize ?? 13);
-    setFontSize(value);
-    void saveFontSize(value);
+    onChange(normalizeTerminalFontSize(fontSize, 13));
   };
 
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty} data-testid="terminal-font-size-card">
       <CardHeader>
         <CardTitle className="text-base">Terminal Font Size</CardTitle>
       </CardHeader>
@@ -120,13 +99,13 @@ function TerminalFontSizeCard() {
               min={8}
               max={24}
               value={fontSize}
-              onChange={(e) => setFontSize(Number(e.target.value))}
+              data-settings-dirty={isDirty}
+              onChange={(e) => onChange(Number(e.target.value))}
               onBlur={handleFontSizeBlur}
               onKeyDown={(e) => {
                 if (e.key === "Enter") handleFontSizeBlur();
               }}
               className="w-20"
-              disabled={isSaving}
               data-testid="terminal-font-size-input"
             />
             <span className="text-xs text-muted-foreground">px (8-24)</span>
@@ -136,46 +115,33 @@ function TerminalFontSizeCard() {
           </p>
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
-function TerminalFontCard() {
-  const storeApi = useAppStoreApi();
-  const userSettings = useAppStore((state) => state.userSettings);
-  const setUserSettings = useAppStore((state) => state.setUserSettings);
-  const [isSaving, setIsSaving] = useState(false);
+function TerminalFontCard({
+  fontFamily,
+  isDirty,
+  onChange,
+}: {
+  fontFamily: string | null;
+  isDirty: boolean;
+  onChange: (value: string | null) => void;
+}) {
   const [isCustom, setIsCustom] = useState(() => {
-    const current = userSettings.terminalFontFamily;
+    const current = fontFamily;
     if (!current) return false;
     return !TERMINAL_FONT_PRESETS.some((p) => p.value === current);
   });
-  const [customValue, setCustomValue] = useState(
-    () => (isCustom ? userSettings.terminalFontFamily : "") ?? "",
-  );
+  const [customValue, setCustomValue] = useState(() => (isCustom ? fontFamily : "") ?? "");
 
-  const saveFontFamily = async (value: string) => {
-    if (isSaving) return;
-    setIsSaving(true);
-    const current = storeApi.getState().userSettings;
-    const previous = current.terminalFontFamily;
-    const nextValue = value || null;
-    try {
-      setUserSettings({ ...current, terminalFontFamily: nextValue });
-      await updateUserSettings({
-        workspace_id: current.workspaceId || "",
-        repository_ids: current.repositoryIds || [],
-        terminal_font_family: value,
-      });
-    } catch {
-      const latest = storeApi.getState().userSettings;
-      if (latest.workspaceId === current.workspaceId && latest.terminalFontFamily === nextValue) {
-        setUserSettings({ ...latest, terminalFontFamily: previous });
-      }
-    } finally {
-      setIsSaving(false);
-    }
-  };
+  useEffect(() => {
+    const nextIsCustom = Boolean(
+      fontFamily && !TERMINAL_FONT_PRESETS.some((preset) => preset.value === fontFamily),
+    );
+    setIsCustom(nextIsCustom);
+    setCustomValue(nextIsCustom ? (fontFamily ?? "") : "");
+  }, [fontFamily]);
 
   const handleSelectChange = (value: string) => {
     if (value === CUSTOM_VALUE) {
@@ -184,26 +150,30 @@ function TerminalFontCard() {
     }
     setIsCustom(false);
     setCustomValue("");
-    void saveFontFamily(value === "default" ? "" : value);
+    onChange(value === "default" ? null : value);
   };
 
   const handleCustomBlur = () => {
     const trimmed = customValue.trim();
-    if (trimmed) void saveFontFamily(trimmed);
+    if (trimmed) onChange(trimmed);
   };
 
-  const selectValue = isCustom ? CUSTOM_VALUE : userSettings.terminalFontFamily || "default";
+  const selectValue = isCustom ? CUSTOM_VALUE : fontFamily || "default";
 
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty} data-testid="terminal-font-card">
       <CardHeader>
         <CardTitle className="text-base">Terminal Font</CardTitle>
       </CardHeader>
       <CardContent>
         <div className="space-y-3">
           <Label htmlFor="terminal-font">Font Family</Label>
-          <Select value={selectValue} onValueChange={handleSelectChange} disabled={isSaving}>
-            <SelectTrigger id="terminal-font" data-testid="terminal-font-select">
+          <Select value={selectValue} onValueChange={handleSelectChange}>
+            <SelectTrigger
+              id="terminal-font"
+              data-testid="terminal-font-select"
+              data-settings-dirty={isDirty}
+            >
               <SelectValue placeholder="Default" />
             </SelectTrigger>
             <SelectContent>
@@ -217,6 +187,7 @@ function TerminalFontCard() {
             <Input
               placeholder='e.g. "My Custom Font"'
               value={customValue}
+              data-settings-dirty={isDirty}
               onChange={(e) => setCustomValue(e.target.value)}
               onBlur={handleCustomBlur}
               onKeyDown={(e) => {
@@ -230,40 +201,21 @@ function TerminalFontCard() {
           </p>
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
-function TerminalLinksCard() {
-  const userSettings = useAppStore((state) => state.userSettings);
-  const setUserSettings = useAppStore((state) => state.setUserSettings);
-  const storeApi = useAppStoreApi();
-  const [isSaving, setIsSaving] = useState(false);
-
-  const handleChange = async (value: "new_tab" | "browser_panel") => {
-    if (isSaving) return;
-    setIsSaving(true);
-    const current = storeApi.getState().userSettings;
-    const previous = current.terminalLinkBehavior;
-    try {
-      setUserSettings({ ...current, terminalLinkBehavior: value });
-      await updateUserSettings({
-        workspace_id: current.workspaceId || "",
-        repository_ids: current.repositoryIds || [],
-        terminal_link_behavior: value,
-      });
-    } catch {
-      const latest = storeApi.getState().userSettings;
-      if (latest.workspaceId === current.workspaceId && latest.terminalLinkBehavior === value) {
-        setUserSettings({ ...latest, terminalLinkBehavior: previous });
-      }
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
+function TerminalLinksCard({
+  value,
+  isDirty,
+  onChange,
+}: {
+  value: "new_tab" | "browser_panel";
+  isDirty: boolean;
+  onChange: (value: "new_tab" | "browser_panel") => void;
+}) {
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty} data-testid="terminal-links-card">
       <CardHeader>
         <CardTitle className="text-base">Terminal Links</CardTitle>
       </CardHeader>
@@ -271,11 +223,10 @@ function TerminalLinksCard() {
         <div className="space-y-2">
           <Label htmlFor="terminal-link-behavior">Open links in</Label>
           <Select
-            value={userSettings.terminalLinkBehavior}
-            onValueChange={(v) => void handleChange(v as "new_tab" | "browser_panel")}
-            disabled={isSaving}
+            value={value}
+            onValueChange={(next) => onChange(next as "new_tab" | "browser_panel")}
           >
-            <SelectTrigger id="terminal-link-behavior">
+            <SelectTrigger id="terminal-link-behavior" data-settings-dirty={isDirty}>
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -286,14 +237,66 @@ function TerminalLinksCard() {
           <p className="text-xs text-muted-foreground">Click a URL in the terminal to open it.</p>
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
 export function TerminalSettings() {
+  const userSettings = useAppStore((state) => state.userSettings);
+  const setUserSettings = useAppStore((state) => state.setUserSettings);
+  const storeApi = useAppStoreApi();
+  const shellSettings = useShellSettings();
+  const [saved, setSaved] = useState(() => ({
+    preferredShell: shellSettings.preferredShell ?? "",
+    terminalFontFamily: userSettings.terminalFontFamily,
+    terminalFontSize: userSettings.terminalFontSize ?? 13,
+    terminalLinkBehavior: userSettings.terminalLinkBehavior,
+  }));
+  const [draft, setDraft] = useState(saved);
+  const revision = JSON.stringify(draft);
+  const validFontSize = normalizeTerminalFontSize(draft.terminalFontSize, 13);
+
+  useSettingsSaveContributor({
+    id: "general-terminal",
+    revision,
+    isDirty: revision !== JSON.stringify(saved),
+    canSave: Number.isFinite(draft.terminalFontSize),
+    invalidReason: "Terminal font size must be a number between 8 and 24.",
+    save: async () => {
+      const submitted = { ...draft, terminalFontSize: validFontSize };
+      const current = storeApi.getState().userSettings;
+      await updateUserSettings({
+        workspace_id: current.workspaceId || "",
+        repository_ids: current.repositoryIds || [],
+        preferred_shell: submitted.preferredShell.trim(),
+        terminal_font_family: submitted.terminalFontFamily ?? "",
+        terminal_font_size: submitted.terminalFontSize,
+        terminal_link_behavior: submitted.terminalLinkBehavior,
+      });
+      setSaved(submitted);
+      setDraft((latest) => (latest === draft ? submitted : latest));
+      setUserSettings({
+        ...storeApi.getState().userSettings,
+        preferredShell: submitted.preferredShell.trim() || null,
+        terminalFontFamily: submitted.terminalFontFamily,
+        terminalFontSize: submitted.terminalFontSize,
+        terminalLinkBehavior: submitted.terminalLinkBehavior,
+      });
+    },
+    discard: () => setDraft(saved),
+  });
+
   return (
     <div className="space-y-8">
-      <ShellSettingsCard />
+      <ShellSettingsCard
+        preferredShell={draft.preferredShell}
+        isDirty={draft.preferredShell !== saved.preferredShell}
+        onPreferredShellChange={(preferredShell) =>
+          setDraft((current) => ({ ...current, preferredShell }))
+        }
+        shellLoaded={shellSettings.loaded}
+        shellOptions={shellSettings.shellOptions ?? []}
+      />
 
       <Separator />
 
@@ -302,9 +305,25 @@ export function TerminalSettings() {
         title="Terminal"
         description="Configure terminal appearance and behavior"
       >
-        <TerminalFontCard />
-        <TerminalFontSizeCard />
-        <TerminalLinksCard />
+        <TerminalFontCard
+          fontFamily={draft.terminalFontFamily}
+          isDirty={draft.terminalFontFamily !== saved.terminalFontFamily}
+          onChange={(terminalFontFamily) =>
+            setDraft((current) => ({ ...current, terminalFontFamily }))
+          }
+        />
+        <TerminalFontSizeCard
+          fontSize={draft.terminalFontSize}
+          isDirty={draft.terminalFontSize !== saved.terminalFontSize}
+          onChange={(terminalFontSize) => setDraft((current) => ({ ...current, terminalFontSize }))}
+        />
+        <TerminalLinksCard
+          value={draft.terminalLinkBehavior}
+          isDirty={draft.terminalLinkBehavior !== saved.terminalLinkBehavior}
+          onChange={(terminalLinkBehavior) =>
+            setDraft((current) => ({ ...current, terminalLinkBehavior }))
+          }
+        />
       </SettingsSection>
     </div>
   );
diff --git a/apps/web/components/settings/unsaved-indicator.tsx b/apps/web/components/settings/unsaved-indicator.tsx
index 0cff9537c0..e718968975 100644
--- a/apps/web/components/settings/unsaved-indicator.tsx
+++ b/apps/web/components/settings/unsaved-indicator.tsx
@@ -13,10 +13,10 @@ type UnsavedSaveButtonProps = {
   disabled?: boolean;
 };
 
-const warningButtonClass = "border-yellow-500/60 text-yellow-500 hover:bg-yellow-500/10";
+const dirtyButtonClass = "border-success/60 text-success hover:bg-success/10";
 
 export function UnsavedChangesBadge() {
-  return <span className="text-xs text-yellow-500">Unsaved changes</span>;
+  return <span className="text-xs text-success">Unsaved changes</span>;
 }
 
 export function UnsavedSaveButton({
@@ -34,7 +34,7 @@ export function UnsavedSaveButton({
       variant={isDirty ? "secondary" : "outline"}
       onClick={onClick}
       disabled={isLoading || Boolean(disabled)}
-      className={isDirty ? warningButtonClass : "cursor-pointer"}
+      className={isDirty ? dirtyButtonClass : "cursor-pointer"}
     >
       {isDirty && <IconAlertCircle className="h-4 w-4 mr-2" />}
       {isDirty ? "Save" : cleanLabel}
diff --git a/apps/web/components/settings/use-serialized-mutation-queue.test.ts b/apps/web/components/settings/use-serialized-mutation-queue.test.ts
new file mode 100644
index 0000000000..11249c6f3a
--- /dev/null
+++ b/apps/web/components/settings/use-serialized-mutation-queue.test.ts
@@ -0,0 +1,77 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useSerializedMutationQueue } from "./use-serialized-mutation-queue";
+
+function deferred() {
+  let resolve!: () => void;
+  let reject!: (error: Error) => void;
+  const promise = new Promise<void>((resolvePromise, rejectPromise) => {
+    resolve = resolvePromise;
+    reject = rejectPromise;
+  });
+  return { promise, resolve, reject };
+}
+
+describe("useSerializedMutationQueue", () => {
+  it("runs mutations in the order they were queued", async () => {
+    const first = deferred();
+    const calls: string[] = [];
+    const { result } = renderHook(() => useSerializedMutationQueue(vi.fn()));
+
+    let firstResult!: Promise<boolean>;
+    let secondResult!: Promise<boolean>;
+    act(() => {
+      firstResult = result.current.run(async () => {
+        calls.push("first:start");
+        await first.promise;
+        calls.push("first:end");
+      }, "first failed");
+      secondResult = result.current.run(async () => {
+        calls.push("second");
+      }, "second failed");
+    });
+
+    expect(calls).toEqual(["first:start"]);
+    await act(async () => first.resolve());
+    await expect(firstResult).resolves.toBe(true);
+    await expect(secondResult).resolves.toBe(true);
+    expect(calls).toEqual(["first:start", "first:end", "second"]);
+  });
+
+  it("pauses later mutations and retries the exact failed operation", async () => {
+    const calls: string[] = [];
+    let firstAttempt = true;
+    const onError = vi.fn();
+    const { result } = renderHook(() => useSerializedMutationQueue(onError));
+
+    let failedResult!: Promise<boolean>;
+    let queuedResult!: Promise<boolean>;
+    act(() => {
+      failedResult = result.current.run(async () => {
+        calls.push("first");
+        if (firstAttempt) {
+          firstAttempt = false;
+          throw new Error("offline");
+        }
+      }, "first failed");
+      queuedResult = result.current.run(async () => {
+        calls.push("second");
+      }, "second failed");
+    });
+
+    let saved: boolean | undefined;
+    await act(async () => {
+      saved = await failedResult;
+    });
+    expect(saved).toBe(false);
+    expect(result.current.status).toBe("error");
+    expect(calls).toEqual(["first"]);
+
+    await act(async () => {
+      await result.current.retry();
+    });
+    await expect(queuedResult).resolves.toBe(true);
+    expect(calls).toEqual(["first", "first", "second"]);
+    expect(onError).toHaveBeenCalledOnce();
+  });
+});
diff --git a/apps/web/components/settings/use-serialized-mutation-queue.ts b/apps/web/components/settings/use-serialized-mutation-queue.ts
new file mode 100644
index 0000000000..cc58cfc90c
--- /dev/null
+++ b/apps/web/components/settings/use-serialized-mutation-queue.ts
@@ -0,0 +1,101 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { RequestStatus } from "@/lib/http/use-request";
+
+type Mutation = {
+  operation: () => Promise<void>;
+  errorTitle: string;
+};
+
+type PendingMutation = Mutation & {
+  resolve: (saved: boolean) => void;
+};
+
+type MutationErrorHandler = (errorTitle: string, error: unknown) => void;
+
+export function useSerializedMutationQueue(onError: MutationErrorHandler) {
+  const [status, setStatus] = useState<RequestStatus>("idle");
+  const queueRef = useRef<PendingMutation[]>([]);
+  const activeRef = useRef(false);
+  const failedRef = useRef<Mutation | null>(null);
+  const successTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const processNextRef = useRef<() => Promise<void>>(async () => {});
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
+
+  const clearSuccessTimeout = useCallback(() => {
+    if (!successTimeoutRef.current) return;
+    clearTimeout(successTimeoutRef.current);
+    successTimeoutRef.current = null;
+  }, []);
+
+  const finishQueue = useCallback(() => {
+    setStatus("success");
+    clearSuccessTimeout();
+    successTimeoutRef.current = setTimeout(() => setStatus("idle"), 1500);
+  }, [clearSuccessTimeout]);
+
+  const processNext = useCallback(async () => {
+    if (activeRef.current || failedRef.current) return;
+    const pending = queueRef.current.shift();
+    if (!pending) return;
+
+    activeRef.current = true;
+    clearSuccessTimeout();
+    setStatus("loading");
+    try {
+      await pending.operation();
+      pending.resolve(true);
+      activeRef.current = false;
+      if (queueRef.current.length > 0) void processNextRef.current();
+      else finishQueue();
+    } catch (error) {
+      activeRef.current = false;
+      failedRef.current = pending;
+      pending.resolve(false);
+      setStatus("error");
+      onErrorRef.current(pending.errorTitle, error);
+    }
+  }, [clearSuccessTimeout, finishQueue]);
+  processNextRef.current = processNext;
+
+  const run = useCallback((operation: () => Promise<void>, errorTitle: string) => {
+    return new Promise<boolean>((resolve) => {
+      queueRef.current.push({ operation, errorTitle, resolve });
+      void processNextRef.current();
+    });
+  }, []);
+
+  const retry = useCallback(async () => {
+    const failed = failedRef.current;
+    if (!failed || activeRef.current) return false;
+
+    activeRef.current = true;
+    clearSuccessTimeout();
+    setStatus("loading");
+    try {
+      await failed.operation();
+      failedRef.current = null;
+      activeRef.current = false;
+      if (queueRef.current.length > 0) void processNextRef.current();
+      else finishQueue();
+      return true;
+    } catch (error) {
+      activeRef.current = false;
+      setStatus("error");
+      onErrorRef.current(failed.errorTitle, error);
+      return false;
+    }
+  }, [clearSuccessTimeout, finishQueue]);
+
+  useEffect(() => {
+    return () => {
+      clearSuccessTimeout();
+      for (const pending of queueRef.current) pending.resolve(false);
+      queueRef.current = [];
+    };
+  }, [clearSuccessTimeout]);
+
+  return { status, run, retry };
+}
diff --git a/apps/web/components/settings/use-workflow-draft-contributor.test.ts b/apps/web/components/settings/use-workflow-draft-contributor.test.ts
new file mode 100644
index 0000000000..40d557f13a
--- /dev/null
+++ b/apps/web/components/settings/use-workflow-draft-contributor.test.ts
@@ -0,0 +1,169 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { deleteWorkflowAction } from "@/app/actions/workspaces";
+import type { Workflow, WorkflowStep } from "@/lib/types/http";
+import { SettingsSaveCancelledError, type SettingsSaveContributor } from "./settings-save-provider";
+import { persistWorkflowDraft } from "./workflow-card-actions";
+import { useWorkflowDraftContributor } from "./use-workflow-draft-contributor";
+
+const captured = vi.hoisted(() => ({ contributor: null as SettingsSaveContributor | null }));
+
+vi.mock("@/app/actions/workspaces", () => ({
+  deleteWorkflowAction: vi.fn(),
+}));
+
+vi.mock("./settings-save-provider", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("./settings-save-provider")>();
+  return {
+    ...actual,
+    useSettingsSaveContributor: (contributor: SettingsSaveContributor) => {
+      captured.contributor = contributor;
+    },
+  };
+});
+
+vi.mock("./workflow-card-actions", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("./workflow-card-actions")>();
+  return { ...actual, persistWorkflowDraft: vi.fn() };
+});
+
+const savedWorkflow = {
+  id: "workflow-1",
+  workspace_id: "workspace-1",
+  name: "Workflow",
+  created_at: "",
+  updated_at: "",
+} as Workflow;
+
+function workflow(id: string = savedWorkflow.id): Workflow {
+  return { ...savedWorkflow, id } as Workflow;
+}
+
+function step(id: string, workflowId: string): WorkflowStep {
+  return {
+    id,
+    workflow_id: workflowId,
+    name: "Backlog",
+    position: 0,
+    color: "bg-slate-500",
+    allow_manual_move: true,
+    is_start_step: true,
+    created_at: "",
+    updated_at: "",
+  } as WorkflowStep;
+}
+
+function contributor(): SettingsSaveContributor {
+  if (!captured.contributor) throw new Error("Contributor was not registered");
+  return captured.contributor;
+}
+
+function renderContributor({
+  draftWorkflow = savedWorkflow,
+  workflowSteps = [step("step-1", draftWorkflow.id)],
+  savedWorkflowSteps = workflowSteps,
+  guardMutation = vi.fn(async ({ operation }: { operation: () => Promise<void> }) => operation()),
+  onDeleteWorkflow = vi.fn(async () => undefined),
+}: {
+  draftWorkflow?: Workflow;
+  workflowSteps?: WorkflowStep[];
+  savedWorkflowSteps?: WorkflowStep[];
+  guardMutation?: ReturnType<typeof vi.fn>;
+  onDeleteWorkflow?: () => Promise<unknown>;
+} = {}) {
+  const setWorkflowSteps = vi.fn();
+  const setSavedWorkflowSteps = vi.fn();
+  const onDiscardWorkflow = vi.fn();
+  const view = renderHook(() =>
+    useWorkflowDraftContributor({
+      workflow: draftWorkflow,
+      isWorkflowDirty: true,
+      workflowSteps,
+      savedWorkflowSteps,
+      setWorkflowSteps,
+      setSavedWorkflowSteps,
+      mutationGuard: { guardMutation } as never,
+      toast: vi.fn(),
+      onWorkflowSaved: vi.fn(),
+      onDiscardWorkflow,
+      onDeleteWorkflow,
+    }),
+  );
+  return { ...view, setWorkflowSteps, onDiscardWorkflow, onDeleteWorkflow };
+}
+
+function mockPersistedDraft(steps: WorkflowStep[]) {
+  vi.mocked(persistWorkflowDraft).mockImplementationOnce(async (input) => {
+    input.progress.workflow = savedWorkflow;
+    return { workflow: savedWorkflow, steps };
+  });
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  captured.contributor = null;
+});
+
+describe("useWorkflowDraftContributor", () => {
+  it("deletes a partially persisted temporary workflow when discarding", async () => {
+    const draftWorkflow = workflow("temp-workflow-1");
+    const steps = [step("temp-step-1", draftWorkflow.id)];
+    mockPersistedDraft(steps);
+    const view = renderContributor({ draftWorkflow, workflowSteps: steps, savedWorkflowSteps: [] });
+
+    await act(async () => contributor().save(contributor().revision));
+    await act(async () => contributor().discard());
+
+    expect(deleteWorkflowAction).toHaveBeenCalledWith(savedWorkflow.id);
+    expect(view.setWorkflowSteps).toHaveBeenCalledWith([]);
+    expect(view.onDiscardWorkflow).toHaveBeenCalledOnce();
+  });
+
+  it("blocks discard after a failed partial save", async () => {
+    vi.mocked(persistWorkflowDraft).mockRejectedValueOnce(new Error("step create failed"));
+    renderContributor();
+
+    await expect(contributor().save(contributor().revision)).rejects.toThrow("step create failed");
+    await expect(contributor().discard()).rejects.toThrow(
+      "Retry the partial workflow save before leaving",
+    );
+  });
+
+  it("reports guard cancellation as a cancelled coordinated save", async () => {
+    const draftWorkflow = workflow("temp-workflow-1");
+    const guardMutation = vi.fn(async () => undefined);
+    renderContributor({ draftWorkflow, guardMutation });
+
+    await expect(contributor().save(contributor().revision)).rejects.toBeInstanceOf(
+      SettingsSaveCancelledError,
+    );
+    expect(persistWorkflowDraft).not.toHaveBeenCalled();
+  });
+
+  it("coalesces concurrent removal requests for a persisted temporary draft", async () => {
+    const draftWorkflow = workflow("temp-workflow-1");
+    const steps = [step("temp-step-1", draftWorkflow.id)];
+    mockPersistedDraft(steps);
+    let finishDelete: (() => void) | undefined;
+    vi.mocked(deleteWorkflowAction).mockImplementationOnce(
+      () => new Promise<void>((resolve) => (finishDelete = resolve)),
+    );
+    const view = renderContributor({ draftWorkflow, workflowSteps: steps, savedWorkflowSteps: [] });
+    await act(async () => contributor().save(contributor().revision));
+
+    let firstRemoval: Promise<void> | undefined;
+    await act(async () => {
+      firstRemoval = view.result.current.removeDraftWorkflow();
+      await view.result.current.removeDraftWorkflow();
+    });
+
+    expect(deleteWorkflowAction).toHaveBeenCalledOnce();
+    expect(view.onDeleteWorkflow).not.toHaveBeenCalled();
+    await act(async () => {
+      finishDelete?.();
+      await firstRemoval;
+    });
+    expect(view.onDeleteWorkflow).toHaveBeenCalledOnce();
+    expect(view.result.current.isRemovingDraft).toBe(false);
+  });
+});
diff --git a/apps/web/components/settings/use-workflow-draft-contributor.ts b/apps/web/components/settings/use-workflow-draft-contributor.ts
new file mode 100644
index 0000000000..29399bd0a9
--- /dev/null
+++ b/apps/web/components/settings/use-workflow-draft-contributor.ts
@@ -0,0 +1,167 @@
+"use client";
+
+import { useRef, useState } from "react";
+import type { Dispatch, SetStateAction } from "react";
+import { deleteWorkflowAction } from "@/app/actions/workspaces";
+import type { Workflow, WorkflowStep } from "@/lib/types/http";
+import { useToast } from "@/components/toast-provider";
+import { SettingsSaveCancelledError, useSettingsSaveContributor } from "./settings-save-provider";
+import {
+  areStepDraftsEqual,
+  createWorkflowDraftSaveProgress,
+  persistWorkflowDraft,
+  remapWorkflowDraftSteps,
+} from "./workflow-card-actions";
+import type { useWorkflowMutationGuard } from "./workflow-mutation-guard";
+
+const TEMP_WORKFLOW_PREFIX = "temp-workflow-";
+
+type WorkflowSavedParams = {
+  clientWorkflow: Workflow;
+  submittedWorkflow: Workflow;
+  savedWorkflow: Workflow;
+  currentSteps: WorkflowStep[];
+  savedSteps: WorkflowStep[];
+  finalizeIdentity: boolean;
+};
+
+type WorkflowDraftContributorArgs = {
+  workflow: Workflow;
+  isWorkflowDirty: boolean;
+  workflowSteps: WorkflowStep[];
+  savedWorkflowSteps: WorkflowStep[];
+  setWorkflowSteps: Dispatch<SetStateAction<WorkflowStep[]>>;
+  setSavedWorkflowSteps: Dispatch<SetStateAction<WorkflowStep[]>>;
+  mutationGuard: ReturnType<typeof useWorkflowMutationGuard>;
+  toast: ReturnType<typeof useToast>["toast"];
+  onWorkflowSaved: (params: WorkflowSavedParams) => void;
+  onDiscardWorkflow: () => void;
+  onDeleteWorkflow: () => Promise<unknown>;
+};
+
+function useWorkflowDraftPersistence(args: WorkflowDraftContributorArgs) {
+  const { workflow, workflowSteps, savedWorkflowSteps } = args;
+  const latestStepsRef = useRef(workflowSteps);
+  latestStepsRef.current = workflowSteps;
+  const saveProgressRef = useRef(createWorkflowDraftSaveProgress());
+  const saveFailedRef = useRef(false);
+  const revision = JSON.stringify({
+    workflow: [workflow.name, workflow.description, workflow.agent_profile_id],
+    steps: workflowSteps,
+  });
+  const latestRevisionRef = useRef(revision);
+  latestRevisionRef.current = revision;
+
+  const persistSubmittedDraft = async (submittedRevision: string | number) => {
+    let result: Awaited<ReturnType<typeof persistWorkflowDraft>>;
+    try {
+      result = await persistWorkflowDraft({
+        workflow,
+        draftSteps: workflowSteps,
+        savedSteps: savedWorkflowSteps,
+        progress: saveProgressRef.current,
+      });
+      saveFailedRef.current = false;
+    } catch (error) {
+      saveFailedRef.current = true;
+      throw error;
+    }
+    const unchanged = submittedRevision === latestRevisionRef.current;
+    const currentSteps = unchanged
+      ? result.steps
+      : remapWorkflowDraftSteps(
+          latestStepsRef.current,
+          result.workflow.id,
+          saveProgressRef.current.stepIds,
+        );
+    args.setSavedWorkflowSteps(result.steps);
+    args.setWorkflowSteps(currentSteps);
+    args.onWorkflowSaved({
+      clientWorkflow: workflow,
+      submittedWorkflow: workflow,
+      savedWorkflow: result.workflow,
+      currentSteps,
+      savedSteps: result.steps,
+      finalizeIdentity: unchanged,
+    });
+  };
+
+  return { revision, persistSubmittedDraft, saveProgressRef, saveFailedRef };
+}
+
+export function useWorkflowDraftContributor(args: WorkflowDraftContributorArgs) {
+  const { workflow, workflowSteps, savedWorkflowSteps, mutationGuard, toast } = args;
+  const persistence = useWorkflowDraftPersistence(args);
+  const removingDraftRef = useRef(false);
+  const [isRemovingDraft, setIsRemovingDraft] = useState(false);
+  const stepsDirty = !areStepDraftsEqual(workflowSteps, savedWorkflowSteps);
+
+  useSettingsSaveContributor({
+    id: `workflow:${workflow.id}`,
+    order: 100,
+    revision: persistence.revision,
+    isDirty: args.isWorkflowDirty || stepsDirty,
+    canSave: workflow.name.trim().length > 0,
+    invalidReason: workflow.name.trim() ? undefined : "Workflow name is required",
+    save: async (submittedRevision) => {
+      if (!workflow.id.startsWith(TEMP_WORKFLOW_PREFIX)) {
+        await persistence.persistSubmittedDraft(submittedRevision);
+        return;
+      }
+      let guardReturned = false;
+      let operationStarted = false;
+      await mutationGuard.guardMutation({
+        baselineSteps: [],
+        proposedSteps: workflowSteps,
+        intent: "create",
+        operation: async () => {
+          operationStarted = true;
+          try {
+            await persistence.persistSubmittedDraft(submittedRevision);
+          } catch (error) {
+            if (!guardReturned) throw error;
+            toast({
+              title: "Failed to save workflow changes",
+              description: error instanceof Error ? error.message : "Request failed",
+              variant: "error",
+            });
+          }
+        },
+      });
+      guardReturned = true;
+      if (!operationStarted) throw new SettingsSaveCancelledError();
+    },
+    discard: async () => {
+      const persistedDraft = persistence.saveProgressRef.current.workflow;
+      if (workflow.id.startsWith(TEMP_WORKFLOW_PREFIX) && persistedDraft) {
+        await deleteWorkflowAction(persistedDraft.id);
+      } else if (persistence.saveFailedRef.current) {
+        throw new Error("Retry the partial workflow save before leaving");
+      }
+      args.setWorkflowSteps(savedWorkflowSteps);
+      args.onDiscardWorkflow();
+    },
+  });
+
+  const removeDraftWorkflow = async () => {
+    if (removingDraftRef.current) return;
+    removingDraftRef.current = true;
+    setIsRemovingDraft(true);
+    try {
+      const persistedDraft = persistence.saveProgressRef.current.workflow;
+      if (workflow.id.startsWith(TEMP_WORKFLOW_PREFIX) && persistedDraft) {
+        await deleteWorkflowAction(persistedDraft.id);
+      }
+      await args.onDeleteWorkflow();
+    } finally {
+      removingDraftRef.current = false;
+      setIsRemovingDraft(false);
+    }
+  };
+
+  return {
+    hasUnsavedChanges: args.isWorkflowDirty || stepsDirty,
+    removeDraftWorkflow,
+    isRemovingDraft,
+  };
+}
diff --git a/apps/web/components/settings/utility-agents-section.test.ts b/apps/web/components/settings/utility-agents-section.test.ts
new file mode 100644
index 0000000000..7eb5f67acb
--- /dev/null
+++ b/apps/web/components/settings/utility-agents-section.test.ts
@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+import type { UtilityAgent } from "@/lib/api/domains/utility-api";
+import {
+  isUtilityAgentDirty,
+  mergeRefreshedUtilityAgents,
+  replaceCustomUtilityAgents,
+} from "./utility-agents-section";
+
+const DRAFT_MODEL = "draft-model";
+
+function agent(id: string, builtin: boolean, model: string): UtilityAgent {
+  return {
+    id,
+    name: id,
+    description: "",
+    builtin,
+    enabled: true,
+    agent_id: "agent-1",
+    model,
+    prompt: "",
+    created_at: "",
+    updated_at: "",
+  };
+}
+
+describe("replaceCustomUtilityAgents", () => {
+  it("compares only draftable built-in fields", () => {
+    const baseline = agent("commit", true, "saved-model");
+
+    expect(isUtilityAgentDirty({ ...baseline, description: "refreshed" }, baseline)).toBe(false);
+    expect(isUtilityAgentDirty({ ...baseline, enabled: false }, baseline)).toBe(true);
+    expect(isUtilityAgentDirty({ ...baseline, model: DRAFT_MODEL }, baseline)).toBe(true);
+  });
+
+  it("refreshes immediate custom resources without replacing built-in drafts", () => {
+    const builtinDraft = agent("commit", true, DRAFT_MODEL);
+    const refreshedCustom = agent("custom-new", false, "saved-model");
+
+    expect(
+      replaceCustomUtilityAgents(
+        [builtinDraft, agent("custom-old", false, "old-model")],
+        [refreshedCustom],
+      ),
+    ).toEqual([builtinDraft, refreshedCustom]);
+  });
+
+  it("refreshes saved builtins while preserving unsaved model overrides", () => {
+    const baseline = agent("commit", true, "saved-model");
+    const draft = { ...baseline, model: DRAFT_MODEL };
+    const refreshed = { ...baseline, prompt: "updated in dialog", model: "dialog-model" };
+
+    expect(mergeRefreshedUtilityAgents([draft], [baseline], [refreshed])).toEqual([
+      { ...refreshed, model: DRAFT_MODEL },
+    ]);
+  });
+});
diff --git a/apps/web/components/settings/utility-agents-section.tsx b/apps/web/components/settings/utility-agents-section.tsx
index 03def81513..992138c29f 100644
--- a/apps/web/components/settings/utility-agents-section.tsx
+++ b/apps/web/components/settings/utility-agents-section.tsx
@@ -20,6 +20,8 @@ import {
   USE_DEFAULT,
 } from "@/components/settings/utility-sections";
 import { useInferenceAgents } from "@/components/settings/use-inference-agents";
+import { useSettingsSaveContributor } from "./settings-save-provider";
+export { isUtilityAgentDirty } from "./utility-dirty";
 
 function buildAllModels(inferenceAgents: InferenceAgent[]) {
   return inferenceAgents.flatMap((ia) =>
@@ -32,31 +34,133 @@ function buildAllModels(inferenceAgents: InferenceAgent[]) {
   );
 }
 
-async function handleBuiltinChange(
+export function replaceCustomUtilityAgents(
+  current: UtilityAgent[],
+  customAgents: UtilityAgent[],
+): UtilityAgent[] {
+  return [...current.filter((agent) => agent.builtin), ...customAgents];
+}
+
+export function mergeRefreshedUtilityAgents(
+  current: UtilityAgent[],
+  saved: UtilityAgent[],
+  refreshed: UtilityAgent[],
+): UtilityAgent[] {
+  return refreshed.map((agent) => {
+    if (!agent.builtin) return agent;
+    const draft = current.find((item) => item.id === agent.id);
+    const baseline = saved.find((item) => item.id === agent.id);
+    if (!draft || !baseline) return agent;
+    return {
+      ...agent,
+      agent_id: draft.agent_id !== baseline.agent_id ? draft.agent_id : agent.agent_id,
+      model: draft.model !== baseline.model ? draft.model : agent.model,
+      enabled: draft.enabled !== baseline.enabled ? draft.enabled : agent.enabled,
+    };
+  });
+}
+
+function updateBuiltinDraft(
   agent: UtilityAgent,
   value: string,
   setAgents: React.Dispatch<React.SetStateAction<UtilityAgent[]>>,
 ) {
   const isDefault = value === USE_DEFAULT;
   const [agentId, model] = isDefault ? ["", ""] : value.split("|");
-  await updateUtilityAgent(agent.id, { agent_id: agentId, model, enabled: true });
   setAgents((prev) =>
-    prev.map((a) => (a.id === agent.id ? { ...a, agent_id: agentId, model } : a)),
+    prev.map((a) => (a.id === agent.id ? { ...a, agent_id: agentId, model, enabled: true } : a)),
   );
 }
 
-export function UtilityAgentsSection() {
+type UtilityDraftRegistration = {
+  agents: UtilityAgent[];
+  savedAgents: UtilityAgent[];
+  defaultAgentId: string;
+  defaultModel: string;
+  savedDefault: { agentId: string; model: string };
+  loading: boolean;
+  setAgents: React.Dispatch<React.SetStateAction<UtilityAgent[]>>;
+  setSavedAgents: React.Dispatch<React.SetStateAction<UtilityAgent[]>>;
+  setDefaultAgentId: React.Dispatch<React.SetStateAction<string>>;
+  setDefaultModel: React.Dispatch<React.SetStateAction<string>>;
+  setSavedDefault: React.Dispatch<React.SetStateAction<{ agentId: string; model: string }>>;
+};
+
+function utilityDraftRevision(
+  agents: UtilityAgent[],
+  defaultAgentId: string,
+  defaultModel: string,
+) {
+  return JSON.stringify({
+    defaultAgentId,
+    defaultModel,
+    builtins: agents
+      .filter((agent) => agent.builtin)
+      .map(({ id, agent_id, model, enabled }) => ({ id, agent_id, model, enabled })),
+  });
+}
+
+function useUtilityDraftRegistration(state: UtilityDraftRegistration) {
+  const draftRevision = utilityDraftRevision(
+    state.agents,
+    state.defaultAgentId,
+    state.defaultModel,
+  );
+  const savedRevision = utilityDraftRevision(
+    state.savedAgents,
+    state.savedDefault.agentId,
+    state.savedDefault.model,
+  );
+
+  useSettingsSaveContributor({
+    id: "utility-agents",
+    revision: draftRevision,
+    isDirty: !state.loading && draftRevision !== savedRevision,
+    save: async () => {
+      const submittedAgents = state.agents;
+      const submittedDefault = { agentId: state.defaultAgentId, model: state.defaultModel };
+      const changedBuiltins = submittedAgents.filter((agent) => {
+        if (!agent.builtin) return false;
+        const previous = state.savedAgents.find((saved) => saved.id === agent.id);
+        return (
+          !previous ||
+          previous.agent_id !== agent.agent_id ||
+          previous.model !== agent.model ||
+          previous.enabled !== agent.enabled
+        );
+      });
+      await Promise.all([
+        updateUserSettings({
+          default_utility_agent_id: submittedDefault.agentId,
+          default_utility_model: submittedDefault.model,
+        }),
+        ...changedBuiltins.map((agent) =>
+          updateUtilityAgent(agent.id, {
+            agent_id: agent.agent_id,
+            model: agent.model,
+            enabled: agent.enabled,
+          }),
+        ),
+      ]);
+      state.setSavedDefault(submittedDefault);
+      state.setSavedAgents(submittedAgents);
+    },
+    discard: () => {
+      state.setDefaultAgentId(state.savedDefault.agentId);
+      state.setDefaultModel(state.savedDefault.model);
+      state.setAgents(state.savedAgents);
+    },
+  });
+}
+
+function useUtilityAgentsData() {
   const [agents, setAgents] = useState<UtilityAgent[]>([]);
+  const [savedAgents, setSavedAgents] = useState<UtilityAgent[]>([]);
   const { inferenceAgents, setInferenceAgents, refreshAgent } = useInferenceAgents();
   const [defaultAgentId, setDefaultAgentId] = useState("");
   const [defaultModel, setDefaultModel] = useState("");
+  const [savedDefault, setSavedDefault] = useState({ agentId: "", model: "" });
   const [loading, setLoading] = useState(true);
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [editingAgent, setEditingAgent] = useState<UtilityAgent | null>(null);
-
-  const builtins = useMemo(() => agents.filter((a) => a.builtin), [agents]);
-  const customAgents = useMemo(() => agents.filter((a) => !a.builtin), [agents]);
-  const allModels = useMemo(() => buildAllModels(inferenceAgents), [inferenceAgents]);
 
   const fetchData = useCallback(async () => {
     try {
@@ -65,10 +169,16 @@ export function UtilityAgentsSection() {
         listInferenceAgents(),
         fetchUserSettings({ cache: "no-store" }),
       ]);
+      const defaultDraft = {
+        agentId: settingsRes.settings.default_utility_agent_id || "",
+        model: settingsRes.settings.default_utility_model || "",
+      };
       setAgents(agentsRes.agents);
+      setSavedAgents(agentsRes.agents);
       setInferenceAgents(inferenceRes.agents);
-      setDefaultAgentId(settingsRes.settings.default_utility_agent_id || "");
-      setDefaultModel(settingsRes.settings.default_utility_model || "");
+      setDefaultAgentId(defaultDraft.agentId);
+      setDefaultModel(defaultDraft.model);
+      setSavedDefault(defaultDraft);
     } catch {
       setAgents([]);
       setInferenceAgents([]);
@@ -77,19 +187,82 @@ export function UtilityAgentsSection() {
     }
   }, [setInferenceAgents]);
 
-  const handleDefaultChange = async (agentId: string, model: string) => {
-    const prevAgentId = defaultAgentId;
-    const prevModel = defaultModel;
+  useEffect(() => {
+    void fetchData();
+  }, [fetchData]);
+
+  const refreshCustomAgents = useCallback(async () => {
+    try {
+      const response = await listUtilityAgents({ cache: "no-store" });
+      setAgents((current) => mergeRefreshedUtilityAgents(current, savedAgents, response.agents));
+      setSavedAgents(response.agents);
+    } catch {
+      // The dialog save already succeeded; keep the current list until the next refresh.
+    }
+  }, [savedAgents]);
+
+  return {
+    agents,
+    savedAgents,
+    inferenceAgents,
+    defaultAgentId,
+    defaultModel,
+    savedDefault,
+    loading,
+    refreshAgent,
+    refreshCustomAgents,
+    setAgents,
+    setSavedAgents,
+    setDefaultAgentId,
+    setDefaultModel,
+    setSavedDefault,
+  };
+}
+
+export function UtilityAgentsSection() {
+  const data = useUtilityAgentsData();
+  const {
+    agents,
+    savedAgents,
+    inferenceAgents,
+    defaultAgentId,
+    defaultModel,
+    savedDefault,
+    loading,
+    refreshAgent,
+    refreshCustomAgents,
+    setAgents,
+    setSavedAgents,
+    setDefaultAgentId,
+    setDefaultModel,
+    setSavedDefault,
+  } = data;
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingAgent, setEditingAgent] = useState<UtilityAgent | null>(null);
+
+  const builtins = useMemo(() => agents.filter((a) => a.builtin), [agents]);
+  const customAgents = useMemo(() => agents.filter((a) => !a.builtin), [agents]);
+  const allModels = useMemo(() => buildAllModels(inferenceAgents), [inferenceAgents]);
+
+  const handleDefaultChange = (agentId: string, model: string) => {
     setDefaultAgentId(agentId);
     setDefaultModel(model);
-    try {
-      await updateUserSettings({ default_utility_agent_id: agentId, default_utility_model: model });
-    } catch {
-      setDefaultAgentId(prevAgentId);
-      setDefaultModel(prevModel);
-    }
   };
 
+  useUtilityDraftRegistration({
+    agents,
+    savedAgents,
+    defaultAgentId,
+    defaultModel,
+    savedDefault,
+    loading,
+    setAgents,
+    setSavedAgents,
+    setDefaultAgentId,
+    setDefaultModel,
+    setSavedDefault,
+  });
+
   const openEditDialog = (agent: UtilityAgent | null) => {
     setEditingAgent(agent);
     setDialogOpen(true);
@@ -98,13 +271,9 @@ export function UtilityAgentsSection() {
   const closeDialog = () => {
     setDialogOpen(false);
     setEditingAgent(null);
-    fetchData();
+    void refreshCustomAgents();
   };
 
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-
   if (loading) return null;
 
   return (
@@ -121,13 +290,15 @@ export function UtilityAgentsSection() {
             defaultModel={defaultModel}
             onDefaultChange={handleDefaultChange}
             onRefreshAgent={refreshAgent}
+            isDirty={defaultAgentId !== savedDefault.agentId || defaultModel !== savedDefault.model}
           />
           <PerActionOverridesSection
             builtins={builtins}
             allModels={allModels}
             defaultModel={defaultModel}
-            onModelChange={(agent, value) => handleBuiltinChange(agent, value, setAgents)}
+            onModelChange={(agent, value) => updateBuiltinDraft(agent, value, setAgents)}
             onEdit={openEditDialog}
+            savedBuiltins={savedAgents.filter((agent) => agent.builtin)}
           />
           <CustomAgentsSection
             agents={customAgents}
@@ -137,6 +308,7 @@ export function UtilityAgentsSection() {
               try {
                 await deleteUtilityAgent(agent.id);
                 setAgents((prev) => prev.filter((a) => a.id !== agent.id));
+                setSavedAgents((prev) => prev.filter((a) => a.id !== agent.id));
               } catch {
                 // Error already logged by API layer
               }
diff --git a/apps/web/components/settings/utility-dirty.ts b/apps/web/components/settings/utility-dirty.ts
new file mode 100644
index 0000000000..58804b7d49
--- /dev/null
+++ b/apps/web/components/settings/utility-dirty.ts
@@ -0,0 +1,10 @@
+import type { UtilityAgent } from "@/lib/api/domains/utility-api";
+
+export function isUtilityAgentDirty(draft: UtilityAgent, saved: UtilityAgent | undefined): boolean {
+  return (
+    !saved ||
+    draft.agent_id !== saved.agent_id ||
+    draft.model !== saved.model ||
+    draft.enabled !== saved.enabled
+  );
+}
diff --git a/apps/web/components/settings/utility-sections.tsx b/apps/web/components/settings/utility-sections.tsx
index 3508859cc6..5df4507ecb 100644
--- a/apps/web/components/settings/utility-sections.tsx
+++ b/apps/web/components/settings/utility-sections.tsx
@@ -23,6 +23,8 @@ import {
 } from "@/components/model-config-selector";
 import { InferenceAgentStatusNote } from "@/components/settings/inference-agent-status";
 import type { UtilityAgent, InferenceAgent } from "@/lib/api/domains/utility-api";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { isUtilityAgentDirty } from "@/components/settings/utility-dirty";
 
 const USE_DEFAULT = "__USE_DEFAULT__";
 
@@ -60,6 +62,7 @@ type DefaultModelSectionProps = {
   defaultModel: string;
   onDefaultChange: (agentId: string, model: string) => void;
   onRefreshAgent: (agentId: string) => Promise<unknown> | void;
+  isDirty: boolean;
 };
 
 export function DefaultModelSection({
@@ -68,6 +71,7 @@ export function DefaultModelSection({
   defaultModel,
   onDefaultChange,
   onRefreshAgent,
+  isDirty,
 }: DefaultModelSectionProps) {
   const selectedAgent = inferenceAgents.find((a) => a.id === defaultAgentId);
   const modelOptions = selectedAgent?.models ?? [];
@@ -91,7 +95,7 @@ export function DefaultModelSection({
   }));
 
   return (
-    <Card data-testid="utility-default-model-card">
+    <SettingsCard isDirty={isDirty} data-testid="utility-default-model-card">
       <CardHeader>
         <CardTitle className="text-base">
           <h3>Default utility agent model</h3>
@@ -105,7 +109,7 @@ export function DefaultModelSection({
           <div className="w-full sm:w-[180px]">
             <Label className="text-xs text-muted-foreground mb-1 block">Agent</Label>
             <Select value={defaultAgentId} onValueChange={(v) => onDefaultChange(v, "")}>
-              <SelectTrigger className="cursor-pointer">
+              <SelectTrigger className="cursor-pointer" data-settings-dirty={isDirty}>
                 <SelectValue placeholder="Select agent..." />
               </SelectTrigger>
               <SelectContent>
@@ -117,7 +121,10 @@ export function DefaultModelSection({
               </SelectContent>
             </Select>
           </div>
-          <div className="w-full sm:w-[280px]">
+          <div
+            className="w-full rounded-md border border-transparent sm:w-[280px]"
+            data-settings-dirty={isDirty}
+          >
             <Label className="text-xs text-muted-foreground mb-1 block">Model</Label>
             <ModelConfigSelector
               modelOptions={selectorModels}
@@ -138,7 +145,7 @@ export function DefaultModelSection({
           />
         )}
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
@@ -149,6 +156,7 @@ type BuiltinActionRowProps = {
   defaultLabel: string;
   onModelChange: (agent: UtilityAgent, value: string) => void;
   onEdit: (agent: UtilityAgent) => void;
+  isDirty: boolean;
 };
 
 export function BuiltinActionRow({
@@ -157,6 +165,7 @@ export function BuiltinActionRow({
   defaultLabel,
   onModelChange,
   onEdit,
+  isDirty,
 }: BuiltinActionRowProps) {
   const currentValue =
     agent.agent_id && agent.model ? `${agent.agent_id}|${agent.model}` : USE_DEFAULT;
@@ -165,6 +174,7 @@ export function BuiltinActionRow({
     <div
       className="flex flex-col gap-2 py-2 px-2 rounded hover:bg-muted/50 md:flex-row md:items-center md:gap-4"
       data-testid={`utility-action-row-${agent.id}`}
+      data-settings-dirty={isDirty}
     >
       <div className="min-w-0 md:flex-1">
         <div className="text-sm font-medium truncate">{agent.name}</div>
@@ -172,7 +182,10 @@ export function BuiltinActionRow({
       </div>
       <div className="flex items-center gap-2">
         <Select value={currentValue} onValueChange={(v) => onModelChange(agent, v)}>
-          <SelectTrigger className="min-w-0 flex-1 cursor-pointer md:w-[240px] md:flex-none">
+          <SelectTrigger
+            className="min-w-0 flex-1 cursor-pointer md:w-[240px] md:flex-none"
+            data-settings-dirty={isDirty}
+          >
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -245,6 +258,7 @@ export function CustomAgentRow({ agent, onEdit, onDelete }: CustomAgentRowProps)
 // Per-action overrides section
 type PerActionOverridesSectionProps = {
   builtins: UtilityAgent[];
+  savedBuiltins: UtilityAgent[];
   allModels: ModelOption[];
   defaultModel: string;
   onModelChange: (agent: UtilityAgent, value: string) => void;
@@ -257,13 +271,22 @@ export function PerActionOverridesSection({
   defaultModel,
   onModelChange,
   onEdit,
+  savedBuiltins,
 }: PerActionOverridesSectionProps) {
   if (builtins.length === 0) return null;
 
   const defaultLabel = defaultModel ? `Default (${defaultModel})` : "Default";
 
   return (
-    <Card data-testid="utility-actions-card">
+    <SettingsCard
+      isDirty={builtins.some((agent) =>
+        isUtilityAgentDirty(
+          agent,
+          savedBuiltins.find((saved) => saved.id === agent.id),
+        ),
+      )}
+      data-testid="utility-actions-card"
+    >
       <CardHeader>
         <CardTitle className="text-base">
           <h3>Actions</h3>
@@ -278,10 +301,14 @@ export function PerActionOverridesSection({
             defaultLabel={defaultLabel}
             onModelChange={onModelChange}
             onEdit={onEdit}
+            isDirty={isUtilityAgentDirty(
+              agent,
+              savedBuiltins.find((saved) => saved.id === agent.id),
+            )}
           />
         ))}
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
diff --git a/apps/web/components/settings/voice-mode-settings.test.tsx b/apps/web/components/settings/voice-mode-settings.test.tsx
new file mode 100644
index 0000000000..19e2e59ce6
--- /dev/null
+++ b/apps/web/components/settings/voice-mode-settings.test.tsx
@@ -0,0 +1,123 @@
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { SettingsSaveContributor } from "./settings-save-provider";
+import { VoiceModeSettings } from "./voice-mode-settings";
+
+const updateUserSettingsMock = vi.fn();
+const setUserSettingsMock = vi.fn();
+const MIC_BUTTON_LABEL = "Show the mic button on the chat composer";
+let saveContributor: SettingsSaveContributor | null = null;
+const initialVoiceMode = {
+  enabled: true,
+  engine: "auto" as const,
+  language: "auto",
+  mode: "toggle" as const,
+  autoSend: false,
+  whisperWebModel: "base" as const,
+};
+const state = {
+  userSettings: {
+    voiceMode: initialVoiceMode,
+    keyboardShortcuts: {},
+  },
+  setUserSettings: setUserSettingsMock,
+};
+
+vi.mock("@kandev/ui/kbd", () => ({
+  Kbd: ({ children }: { children: ReactNode }) => <kbd>{children}</kbd>,
+}));
+
+vi.mock("@/components/state-provider", () => ({
+  useAppStore: (selector: (value: typeof state) => unknown) => selector(state),
+  useAppStoreApi: () => ({ getState: () => state }),
+}));
+
+vi.mock("@/lib/api", () => ({
+  updateUserSettings: (...args: unknown[]) => updateUserSettingsMock(...args),
+}));
+
+vi.mock("./settings-save-provider", () => ({
+  useSettingsSaveContributor: (contributor: SettingsSaveContributor) => {
+    saveContributor = contributor;
+  },
+}));
+
+afterEach(() => {
+  cleanup();
+  updateUserSettingsMock.mockReset();
+  setUserSettingsMock.mockReset();
+  state.userSettings = { voiceMode: initialVoiceMode, keyboardShortcuts: {} };
+  saveContributor = null;
+});
+
+describe("VoiceModeSettings", () => {
+  it("stages voice configuration until the route save runs", async () => {
+    updateUserSettingsMock.mockResolvedValue(undefined);
+    render(<VoiceModeSettings />);
+
+    fireEvent.click(screen.getByRole("switch", { name: MIC_BUTTON_LABEL }));
+
+    expect(updateUserSettingsMock).not.toHaveBeenCalled();
+    expect(saveContributor?.isDirty).toBe(true);
+    expect(
+      screen.getByRole("switch", { name: MIC_BUTTON_LABEL }).getAttribute("data-settings-dirty"),
+    ).toBe("true");
+    expect(screen.getByTestId("voice-enable-card").getAttribute("data-settings-dirty")).toBe(
+      "true",
+    );
+
+    await saveContributor?.save(saveContributor.revision);
+
+    expect(updateUserSettingsMock).toHaveBeenCalledWith(
+      expect.objectContaining({ voice_mode: expect.objectContaining({ enabled: false }) }),
+    );
+  });
+
+  it("rebases unchanged shortcuts before saving a voice draft", async () => {
+    updateUserSettingsMock.mockResolvedValue(undefined);
+    render(<VoiceModeSettings />);
+
+    fireEvent.click(screen.getByRole("switch", { name: MIC_BUTTON_LABEL }));
+    state.userSettings = {
+      ...state.userSettings,
+      keyboardShortcuts: { voice_toggle: { key: "v" } },
+    };
+    if (!saveContributor) throw new Error("Save contributor was not registered");
+
+    await act(async () => saveContributor?.save(saveContributor.revision));
+
+    expect(updateUserSettingsMock).toHaveBeenCalledWith(
+      expect.objectContaining({ keyboard_shortcuts: { voice_toggle: { key: "v" } } }),
+    );
+    expect(saveContributor?.isDirty).toBe(false);
+  });
+
+  it("preserves a voice edit made while a save is in flight", async () => {
+    let resolveSave: () => void = () => undefined;
+    updateUserSettingsMock.mockReturnValue(
+      new Promise<void>((resolve) => {
+        resolveSave = resolve;
+      }),
+    );
+    render(<VoiceModeSettings />);
+    const toggle = screen.getByRole("switch", {
+      name: MIC_BUTTON_LABEL,
+    });
+    fireEvent.click(toggle);
+    if (!saveContributor) throw new Error("Save contributor was not registered");
+    let savePromise!: Promise<void>;
+
+    act(() => {
+      savePromise = Promise.resolve(saveContributor?.save(saveContributor.revision));
+    });
+    fireEvent.click(toggle);
+    await act(async () => {
+      resolveSave();
+      await savePromise;
+    });
+
+    expect(toggle.getAttribute("aria-checked")).toBe("true");
+    expect(saveContributor?.isDirty).toBe(true);
+  });
+});
diff --git a/apps/web/components/settings/voice-mode-settings.tsx b/apps/web/components/settings/voice-mode-settings.tsx
index 1a0d702cdd..0cf55e991f 100644
--- a/apps/web/components/settings/voice-mode-settings.tsx
+++ b/apps/web/components/settings/voice-mode-settings.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useCallback, useMemo, useState } from "react";
+import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react";
 import { IconAlertTriangle, IconMicrophone } from "@tabler/icons-react";
 import { Badge } from "@kandev/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
+import { CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
 import { Label } from "@kandev/ui/label";
 import { RadioGroup, RadioGroupItem } from "@kandev/ui/radio-group";
 import {
@@ -17,12 +17,11 @@ import {
 } from "@kandev/ui/select";
 import { Switch } from "@kandev/ui/switch";
 import { useAppStore, useAppStoreApi } from "@/components/state-provider";
-import { useToast } from "@/components/toast-provider";
 import { updateUserSettings } from "@/lib/api";
 import { SettingsSection } from "@/components/settings/settings-section";
 import { ShortcutRecorder } from "@/components/settings/keyboard-shortcuts-card";
 import { detectVoiceCapabilities, type VoiceCapabilities } from "@/lib/voice/capabilities";
-import type { VoiceModeState } from "@/lib/state/slices/settings/types";
+import type { UserSettingsState, VoiceModeState } from "@/lib/state/slices/settings/types";
 import type { KeyboardShortcut } from "@/lib/keyboard/constants";
 import {
   CONFIGURABLE_SHORTCUTS,
@@ -35,6 +34,8 @@ import type {
   VoiceModeSettings as VoiceModeWire,
   WhisperWebModelSize,
 } from "@/lib/types/http-voice";
+import { useSettingsSaveContributor } from "./settings-save-provider";
+import { SettingsCard } from "./settings-card";
 
 // Single source of truth for the language options. Web Speech reads `lang`,
 // Whisper engines treat it as a hint. "auto" defers to the browser locale.
@@ -75,53 +76,109 @@ function toWire(state: VoiceModeState): VoiceModeWire {
   };
 }
 
-// ── Save hook ────────────────────────────────────────────────────────────
+type VoiceDraft = {
+  voiceMode: VoiceModeState;
+  keyboardShortcuts: StoredShortcutOverrides;
+};
 
-function useVoiceModeSaver() {
-  // Read userSettings via the store API (not as a React selector) so the
-  // async save handler reads the latest snapshot at invocation time instead
-  // of capturing a stale closure. Without this, concurrent settings updates
-  // racing with this save (or a rejection rolling back to a stale snapshot)
-  // can silently overwrite unrelated fields.
+type VoiceDraftContextValue = VoiceDraft & {
+  savedVoiceMode: VoiceModeState;
+  savedKeyboardShortcuts: StoredShortcutOverrides;
+  updateVoiceMode: (patch: Partial<VoiceModeState>) => void;
+  updateShortcuts: (shortcuts: StoredShortcutOverrides) => void;
+};
+
+const VoiceDraftContext = createContext<VoiceDraftContextValue | null>(null);
+
+function voiceDraftFromSettings(settings: UserSettingsState): VoiceDraft {
+  return {
+    voiceMode: settings.voiceMode,
+    keyboardShortcuts: settings.keyboardShortcuts,
+  };
+}
+
+function useVoiceDraft() {
+  const value = useContext(VoiceDraftContext);
+  if (!value) throw new Error("Voice settings require VoiceDraftProvider");
+  return value;
+}
+
+function VoiceDraftProvider({ children }: { children: ReactNode }) {
+  const userSettings = useAppStore((state) => state.userSettings);
+  const setUserSettings = useAppStore((state) => state.setUserSettings);
   const storeApi = useAppStoreApi();
-  const setUserSettings = useAppStore((s) => s.setUserSettings);
-  const { toast } = useToast();
-  const [saving, setSaving] = useState(false);
+  const currentSettingsDraft = voiceDraftFromSettings(userSettings);
+  const [saved, setSaved] = useState<VoiceDraft>(currentSettingsDraft);
+  const [draft, setDraft] = useState(saved);
+  const revision = JSON.stringify(draft);
+  const savedRevision = JSON.stringify(saved);
+  const currentSettingsRevision = JSON.stringify(currentSettingsDraft);
 
-  const save = useCallback(
-    async (patch: Partial<VoiceModeState>) => {
-      const current = storeApi.getState().userSettings;
-      const previous = current.voiceMode;
-      const next = { ...previous, ...patch };
-      setUserSettings({ ...current, voiceMode: next });
-      setSaving(true);
-      try {
-        await updateUserSettings({ voice_mode: toWire(next) });
-      } catch {
-        // Rollback only the keys this request changed AND only when the live
-        // value still matches what we optimistically wrote. If a newer save
-        // for the same key landed first, that's now the truth — reverting
-        // would silently roll back the user's later edit.
-        const latest = storeApi.getState().userSettings;
-        const reverted: Partial<VoiceModeState> = {};
-        for (const key of Object.keys(patch) as Array<keyof VoiceModeState>) {
-          if (latest.voiceMode[key] !== next[key]) continue;
-          // Cast through unknown so the per-key assignment passes strict checks.
-          (reverted as Record<string, unknown>)[key] = previous[key];
-        }
-        setUserSettings({
-          ...latest,
-          voiceMode: { ...latest.voiceMode, ...reverted },
-        });
-        toast({ title: "Failed to save Voice Mode setting", variant: "error" });
-      } finally {
-        setSaving(false);
-      }
+  if (revision === savedRevision && currentSettingsRevision !== savedRevision) {
+    setSaved(currentSettingsDraft);
+    setDraft(currentSettingsDraft);
+  }
+
+  useSettingsSaveContributor({
+    id: "voice-mode",
+    revision,
+    isDirty: revision !== savedRevision,
+    save: async () => {
+      const latest = voiceDraftFromSettings(storeApi.getState().userSettings);
+      const submitted = {
+        voiceMode:
+          JSON.stringify(draft.voiceMode) === JSON.stringify(saved.voiceMode)
+            ? latest.voiceMode
+            : draft.voiceMode,
+        keyboardShortcuts:
+          JSON.stringify(draft.keyboardShortcuts) === JSON.stringify(saved.keyboardShortcuts)
+            ? latest.keyboardShortcuts
+            : draft.keyboardShortcuts,
+      };
+      await updateUserSettings({
+        voice_mode: toWire(submitted.voiceMode),
+        keyboard_shortcuts: submitted.keyboardShortcuts,
+      });
+      setSaved(submitted);
+      setDraft((current) => ({
+        voiceMode:
+          JSON.stringify(current.voiceMode) === JSON.stringify(draft.voiceMode)
+            ? submitted.voiceMode
+            : current.voiceMode,
+        keyboardShortcuts:
+          JSON.stringify(current.keyboardShortcuts) === JSON.stringify(draft.keyboardShortcuts)
+            ? submitted.keyboardShortcuts
+            : current.keyboardShortcuts,
+      }));
+      setUserSettings({ ...storeApi.getState().userSettings, ...submitted });
     },
-    [storeApi, setUserSettings, toast],
+    discard: () => setDraft(saved),
+  });
+
+  const value = useMemo<VoiceDraftContextValue>(
+    () => ({
+      ...draft,
+      savedVoiceMode: saved.voiceMode,
+      savedKeyboardShortcuts: saved.keyboardShortcuts,
+      updateVoiceMode: (patch) =>
+        setDraft((current) => ({
+          ...current,
+          voiceMode: { ...current.voiceMode, ...patch },
+        })),
+      updateShortcuts: (keyboardShortcuts) =>
+        setDraft((current) => ({ ...current, keyboardShortcuts })),
+    }),
+    [draft, saved],
   );
 
-  return { save, saving };
+  return <VoiceDraftContext.Provider value={value}>{children}</VoiceDraftContext.Provider>;
+}
+
+// ── Draft hook ───────────────────────────────────────────────────────────
+
+function useVoiceModeSaver() {
+  const { updateVoiceMode } = useVoiceDraft();
+  return { save: updateVoiceMode, saving: false };
 }
 
 // ── Engine card ──────────────────────────────────────────────────────────
@@ -171,12 +228,12 @@ function buildEngineOptions(caps: VoiceCapabilities): EngineOption[] {
 }
 
 function EngineCard({ caps }: { caps: VoiceCapabilities }) {
-  const voiceMode = useAppStore((s) => s.userSettings.voiceMode);
+  const { voiceMode, savedVoiceMode } = useVoiceDraft();
   const { save, saving } = useVoiceModeSaver();
   const options = useMemo(() => buildEngineOptions(caps), [caps]);
 
   return (
-    <Card>
+    <SettingsCard isDirty={voiceMode.engine !== savedVoiceMode.engine}>
       <CardHeader>
         <CardTitle className="text-base">Transcription Engine</CardTitle>
       </CardHeader>
@@ -194,6 +251,9 @@ function EngineCard({ caps }: { caps: VoiceCapabilities }) {
               className={`flex items-start gap-3 rounded-md border p-3 ${
                 opt.disabled ? "opacity-50" : "cursor-pointer hover:bg-muted/30"
               }`}
+              data-settings-dirty={
+                voiceMode.engine !== savedVoiceMode.engine && opt.value === voiceMode.engine
+              }
             >
               <RadioGroupItem
                 id={`voice-engine-${opt.value}`}
@@ -212,14 +272,14 @@ function EngineCard({ caps }: { caps: VoiceCapabilities }) {
           ))}
         </RadioGroup>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
 // ── Behavior card (language + mode + auto-send) ──────────────────────────
 
 function LanguageRow() {
-  const voiceMode = useAppStore((s) => s.userSettings.voiceMode);
+  const { voiceMode, savedVoiceMode } = useVoiceDraft();
   const { save, saving } = useVoiceModeSaver();
   return (
     <div className="space-y-2">
@@ -229,7 +289,10 @@ function LanguageRow() {
         onValueChange={(v) => save({ language: v })}
         disabled={saving}
       >
-        <SelectTrigger id="voice-language">
+        <SelectTrigger
+          id="voice-language"
+          data-settings-dirty={voiceMode.language !== savedVoiceMode.language}
+        >
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
@@ -252,7 +315,7 @@ function LanguageRow() {
 }
 
 function ModeRow() {
-  const voiceMode = useAppStore((s) => s.userSettings.voiceMode);
+  const { voiceMode, savedVoiceMode } = useVoiceDraft();
   const { save, saving } = useVoiceModeSaver();
   return (
     <div className="space-y-2">
@@ -262,6 +325,7 @@ function ModeRow() {
         onValueChange={(v) => save({ mode: v as VoiceInputActivationMode })}
         disabled={saving}
         className="flex gap-4"
+        data-settings-dirty={voiceMode.mode !== savedVoiceMode.mode}
       >
         <Label htmlFor="voice-mode-toggle" className="flex items-center gap-2 cursor-pointer">
           <RadioGroupItem id="voice-mode-toggle" value="toggle" />
@@ -277,7 +341,7 @@ function ModeRow() {
 }
 
 function AutoSendRow() {
-  const voiceMode = useAppStore((s) => s.userSettings.voiceMode);
+  const { voiceMode, savedVoiceMode } = useVoiceDraft();
   const { save, saving } = useVoiceModeSaver();
   return (
     <div className="flex items-center justify-between">
@@ -294,14 +358,20 @@ function AutoSendRow() {
         checked={voiceMode.autoSend}
         onCheckedChange={(checked) => save({ autoSend: checked })}
         disabled={saving}
+        data-settings-dirty={voiceMode.autoSend !== savedVoiceMode.autoSend}
       />
     </div>
   );
 }
 
 function BehaviorCard() {
+  const { voiceMode, savedVoiceMode } = useVoiceDraft();
+  const isDirty =
+    voiceMode.language !== savedVoiceMode.language ||
+    voiceMode.mode !== savedVoiceMode.mode ||
+    voiceMode.autoSend !== savedVoiceMode.autoSend;
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty}>
       <CardHeader>
         <CardTitle className="text-base">Behavior</CardTitle>
       </CardHeader>
@@ -310,18 +380,18 @@ function BehaviorCard() {
         <ModeRow />
         <AutoSendRow />
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
 // ── Whisper Web model card ───────────────────────────────────────────────
 
 function WhisperModelCard() {
-  const voiceMode = useAppStore((s) => s.userSettings.voiceMode);
+  const { voiceMode, savedVoiceMode } = useVoiceDraft();
   const { save, saving } = useVoiceModeSaver();
 
   return (
-    <Card>
+    <SettingsCard isDirty={voiceMode.whisperWebModel !== savedVoiceMode.whisperWebModel}>
       <CardHeader>
         <CardTitle className="text-base">Whisper Web Model</CardTitle>
       </CardHeader>
@@ -337,6 +407,10 @@ function WhisperModelCard() {
               key={m.value}
               htmlFor={`whisper-model-${m.value}`}
               className="flex items-start gap-3 rounded-md border p-3 cursor-pointer hover:bg-muted/30"
+              data-settings-dirty={
+                voiceMode.whisperWebModel !== savedVoiceMode.whisperWebModel &&
+                m.value === voiceMode.whisperWebModel
+              }
             >
               <RadioGroupItem id={`whisper-model-${m.value}`} value={m.value} className="mt-0.5" />
               <div>
@@ -353,17 +427,20 @@ function WhisperModelCard() {
           another download next time you record.
         </p>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
 // ── Enable card (top-level on/off) ───────────────────────────────────────
 
 function EnableCard() {
-  const voiceMode = useAppStore((s) => s.userSettings.voiceMode);
+  const { voiceMode, savedVoiceMode } = useVoiceDraft();
   const { save, saving } = useVoiceModeSaver();
   return (
-    <Card>
+    <SettingsCard
+      isDirty={voiceMode.enabled !== savedVoiceMode.enabled}
+      data-testid="voice-enable-card"
+    >
       <CardHeader>
         <CardTitle className="text-base">Enable Voice Input</CardTitle>
       </CardHeader>
@@ -383,10 +460,11 @@ function EnableCard() {
             checked={voiceMode.enabled}
             onCheckedChange={(checked) => save({ enabled: checked })}
             disabled={saving}
+            data-settings-dirty={voiceMode.enabled !== savedVoiceMode.enabled}
           />
         </div>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
@@ -416,42 +494,15 @@ function AvailabilityBanner({ caps }: { caps: VoiceCapabilities }) {
 // ── Voice keyboard shortcut card ─────────────────────────────────────────
 
 function useShortcutSaver() {
-  // Same stale-closure protection as useVoiceModeSaver — read live store
-  // state at call time so a concurrent keyboard-shortcut change from another
-  // settings card isn't clobbered by this card's optimistic update / rollback.
-  const storeApi = useAppStoreApi();
-  const setUserSettings = useAppStore((s) => s.setUserSettings);
-  const { toast } = useToast();
-  return useCallback(
-    (next: StoredShortcutOverrides) => {
-      const current = storeApi.getState().userSettings;
-      const previous = current.keyboardShortcuts;
-      setUserSettings({ ...current, keyboardShortcuts: next });
-      updateUserSettings({ keyboard_shortcuts: next }).catch(() => {
-        // Rollback only the keys this request changed AND only when the live
-        // value still matches what we optimistically wrote. Skip otherwise so
-        // a newer successful save to the same key isn't reverted.
-        const latest = storeApi.getState().userSettings;
-        const restored: StoredShortcutOverrides = { ...latest.keyboardShortcuts };
-        const changedKeys = new Set([...Object.keys(previous), ...Object.keys(next)]);
-        for (const key of changedKeys) {
-          if (previous[key] === next[key]) continue;
-          if (latest.keyboardShortcuts[key] !== next[key]) continue;
-          if (previous[key] === undefined) delete restored[key];
-          else restored[key] = previous[key];
-        }
-        setUserSettings({ ...latest, keyboardShortcuts: restored });
-        toast({ title: "Failed to save shortcut", variant: "error" });
-      });
-    },
-    [storeApi, setUserSettings, toast],
-  );
+  return useVoiceDraft().updateShortcuts;
 }
 
 function VoiceShortcutCard() {
-  const overrides = useAppStore((s) => s.userSettings.keyboardShortcuts);
+  const { keyboardShortcuts: overrides, savedKeyboardShortcuts } = useVoiceDraft();
   const persist = useShortcutSaver();
   const current = getShortcut("VOICE_INPUT_TOGGLE", overrides);
+  const savedCurrent = getShortcut("VOICE_INPUT_TOGGLE", savedKeyboardShortcuts);
+  const isDirty = JSON.stringify(current) !== JSON.stringify(savedCurrent);
 
   const handleChange = useCallback(
     (_id: string, shortcut: KeyboardShortcut) =>
@@ -465,7 +516,7 @@ function VoiceShortcutCard() {
   }, [overrides, persist]);
 
   return (
-    <Card>
+    <SettingsCard isDirty={isDirty}>
       <CardHeader>
         <CardTitle className="text-base">
           {CONFIGURABLE_SHORTCUTS.VOICE_INPUT_TOGGLE.label} Shortcut
@@ -477,21 +528,23 @@ function VoiceShortcutCard() {
           current={current}
           onChange={handleChange}
           onReset={handleReset}
+          isDirty={isDirty}
         />
         <p className="text-xs text-muted-foreground mt-2">
           Click the shortcut to record a new key combination. All keyboard shortcuts can also be
           edited in General Settings.
         </p>
       </CardContent>
-    </Card>
+    </SettingsCard>
   );
 }
 
 // ── Page ─────────────────────────────────────────────────────────────────
 
-export function VoiceModeSettings() {
+function VoiceModeSettingsContent() {
   const caps = useMemo(() => detectVoiceCapabilities(), []);
-  const enabled = useAppStore((s) => s.userSettings.voiceMode.enabled);
+  const { voiceMode } = useVoiceDraft();
+  const enabled = voiceMode.enabled;
   return (
     <SettingsSection
       icon={<IconMicrophone className="h-5 w-5" />}
@@ -516,3 +569,11 @@ export function VoiceModeSettings() {
     </SettingsSection>
   );
 }
+
+export function VoiceModeSettings() {
+  return (
+    <VoiceDraftProvider>
+      <VoiceModeSettingsContent />
+    </VoiceDraftProvider>
+  );
+}
diff --git a/apps/web/components/settings/workflow-card-actions.test.ts b/apps/web/components/settings/workflow-card-actions.test.ts
index b32a0bb432..eb1e3591b0 100644
--- a/apps/web/components/settings/workflow-card-actions.test.ts
+++ b/apps/web/components/settings/workflow-card-actions.test.ts
@@ -1,22 +1,29 @@
 import { act, renderHook } from "@testing-library/react";
-import { beforeEach, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import {
   createWorkflowAction,
   createWorkflowStepAction,
   deleteWorkflowStepAction,
+  getWorkflowTaskCount,
   getStepTaskCount,
-  listWorkflowStepsAction,
   reorderWorkflowStepsAction,
+  updateWorkflowAction,
   updateWorkflowStepAction,
 } from "@/app/actions/workspaces";
-import type { OnTurnCompleteAction } from "@/lib/types/workflow-actions";
 import type { Workflow, WorkflowStep } from "@/lib/types/http";
-import { useWorkflowSaveActions, useWorkflowStepActions } from "./workflow-card-actions";
-import { useWorkflowMutationGuard } from "./workflow-mutation-guard";
+import {
+  useWorkflowDeleteHandlers,
+  useStepDeleteHandlers,
+  createWorkflowDraftSaveProgress,
+  persistWorkflowDraft,
+  useWorkflowStepActions,
+} from "./workflow-card-actions";
 
 vi.mock("@/app/actions/workspaces", () => ({
   createWorkflowAction: vi.fn(),
   createWorkflowStepAction: vi.fn(),
+  deleteWorkflowAction: vi.fn(),
+  updateWorkflowAction: vi.fn(),
   updateWorkflowStepAction: vi.fn(),
   deleteWorkflowStepAction: vi.fn(),
   reorderWorkflowStepsAction: vi.fn(),
@@ -29,14 +36,6 @@ vi.mock("@/app/actions/workspaces", () => ({
 
 beforeEach(() => {
   vi.clearAllMocks();
-  vi.mocked(createWorkflowStepAction).mockImplementation(async (payload) =>
-    step(`created-${payload.position}`, payload.name, payload.position, false),
-  );
-  vi.mocked(updateWorkflowStepAction).mockImplementation(async (stepId, updates) => ({
-    ...step(stepId, stepId, updates.position ?? 0, updates.is_start_step ?? false),
-    ...updates,
-  }));
-  vi.mocked(reorderWorkflowStepsAction).mockResolvedValue({ steps: [], total: 0 });
 });
 
 const workflow = {
@@ -46,14 +45,13 @@ const workflow = {
   created_at: "",
   updated_at: "",
 } as Workflow;
+const CLIENT_WORKFLOW_ID = "temp-workflow-1";
+const CLIENT_STEP_ONE = "temp-step-1";
+const CLIENT_STEP_TWO = "temp-step-2";
+const SERVER_STEP_ONE = "server-step-1";
+const SERVER_STEP_TWO = "server-step-2";
 
-function step(
-  id: string,
-  name: string,
-  position: number,
-  isStartStep: boolean,
-  options: { autoStart?: boolean; onTurnComplete?: OnTurnCompleteAction[] } = {},
-): WorkflowStep {
+function step(id: string, name: string, position: number, isStartStep: boolean): WorkflowStep {
   return {
     id,
     workflow_id: workflow.id,
@@ -62,603 +60,438 @@ function step(
     color: "bg-slate-500",
     allow_manual_move: true,
     is_start_step: isStartStep,
-    events: {
-      on_enter: options.autoStart ? [{ type: "auto_start_agent" }] : [],
-      on_turn_complete: options.onTurnComplete,
-    },
     created_at: "",
     updated_at: "",
   };
 }
 
-function renderNewWorkflowStepActions(initialSteps: WorkflowStep[]) {
+function renderReadOnlyWorkflowStepActions(initialSteps: WorkflowStep[]) {
   let steps = initialSteps;
   const setWorkflowSteps = vi.fn(
     (updater: ((prev: WorkflowStep[]) => WorkflowStep[]) | WorkflowStep[]) => {
       steps = typeof updater === "function" ? updater(steps) : updater;
     },
   );
-  const view = renderHook(() => {
-    const mutationGuard = useWorkflowMutationGuard(steps);
-    return useWorkflowStepActions({
+  const refreshWorkflowSteps = vi.fn();
+  const view = renderHook(() =>
+    useWorkflowStepActions({
       workflow,
-      isNewWorkflow: true,
+      readOnly: true,
       workflowSteps: steps,
       setWorkflowSteps,
+      refreshWorkflowSteps,
       setStepToDelete: vi.fn(),
       setStepTaskCount: vi.fn(),
       setTargetStepForMigration: vi.fn(),
       setStepDeleteOpen: vi.fn(),
       toast: vi.fn(),
-      mutationGuard,
-    });
-  });
-  return { ...view, getSteps: () => steps };
-}
-
-function renderPersistedWorkflowStepActions(steps: WorkflowStep[]) {
-  let currentSteps = steps;
-  const setWorkflowSteps = vi.fn(
-    (updater: ((prev: WorkflowStep[]) => WorkflowStep[]) | WorkflowStep[]) => {
-      currentSteps = typeof updater === "function" ? updater(currentSteps) : updater;
-    },
+    }),
   );
-  const setStepDeleteOpen = vi.fn();
-  const view = renderHook(() => {
-    const mutationGuard = useWorkflowMutationGuard(steps);
-    const actions = useWorkflowStepActions({
-      workflow,
-      isNewWorkflow: false,
-      workflowSteps: steps,
-      setWorkflowSteps,
-      setStepToDelete: vi.fn(),
-      setStepTaskCount: vi.fn(),
-      setTargetStepForMigration: vi.fn(),
-      setStepDeleteOpen,
-      toast: vi.fn(),
-      mutationGuard,
-    });
-    return { actions, mutationGuard };
-  });
-  return {
-    ...view,
-    setWorkflowSteps,
-    setStepDeleteOpen,
-    getSteps: () => currentSteps,
-  };
+  return { ...view, getSteps: () => steps, refreshWorkflowSteps, setWorkflowSteps };
 }
 
-function deferredPromise<T>() {
-  let resolve!: (value: T) => void;
-  const promise = new Promise<T>((resolvePromise) => {
-    resolve = resolvePromise;
-  });
-  return { promise, resolve };
-}
+describe("useWorkflowStepActions", () => {
+  it("updates a step locally without calling persistence APIs", async () => {
+    const original = step("step-1", "Todo", 0, true);
+    const setWorkflowSteps = vi.fn();
+    const { result } = renderHook(() =>
+      useWorkflowStepActions({
+        workflow,
+        readOnly: false,
+        workflowSteps: [original],
+        setWorkflowSteps,
+        refreshWorkflowSteps: vi.fn(),
+        setStepToDelete: vi.fn(),
+        setStepTaskCount: vi.fn(),
+        setTargetStepForMigration: vi.fn(),
+        setStepDeleteOpen: vi.fn(),
+        toast: vi.fn(),
+      }),
+    );
 
-it("keeps one start step while editing a new workflow locally", async () => {
-  const { result, getSteps } = renderNewWorkflowStepActions([
-    step("step-1", "Todo", 0, true),
-    step("step-2", "Plan", 1, false),
-  ]);
-
-  await act(async () => {
-    await result.current.handleUpdateWorkflowStep("step-2", { is_start_step: true });
-  });
-
-  expect(
-    getSteps()
-      .filter((s) => s.is_start_step)
-      .map((s) => s.id),
-  ).toEqual(["step-2"]);
-});
-
-it("does not update a persisted step when the proposal introduces a blocking cycle", async () => {
-  const steps = [
-    step("build", "Build", 0, true, {
-      autoStart: true,
-      onTurnComplete: [{ type: "move_to_next" }],
-    }),
-    step("review", "Review", 1, false, { autoStart: true }),
-  ];
-  const { result } = renderHook(() => {
-    const mutationGuard = useWorkflowMutationGuard(steps);
-    return useWorkflowStepActions({
-      workflow,
-      isNewWorkflow: false,
-      workflowSteps: steps,
-      setWorkflowSteps: vi.fn(),
-      setStepToDelete: vi.fn(),
-      setStepTaskCount: vi.fn(),
-      setTargetStepForMigration: vi.fn(),
-      setStepDeleteOpen: vi.fn(),
-      toast: vi.fn(),
-      mutationGuard,
+    await act(async () => {
+      await result.current.handleUpdateWorkflowStep("step-1", { name: "Renamed" });
     });
+
+    const updater = setWorkflowSteps.mock.calls[0][0] as (steps: WorkflowStep[]) => WorkflowStep[];
+    expect(updater([original])[0].name).toBe("Renamed");
+    expect(updateWorkflowStepAction).not.toHaveBeenCalled();
   });
 
-  await act(async () => {
-    await result.current.handleUpdateWorkflowStep("review", {
-      events: {
-        ...steps[1].events,
-        on_turn_complete: [{ type: "move_to_previous" }],
-      },
+  it("adds a client-only step without calling persistence APIs", async () => {
+    const setWorkflowSteps = vi.fn();
+    const { result } = renderHook(() =>
+      useWorkflowStepActions({
+        workflow,
+        workflowSteps: [step("step-1", "Todo", 0, true)],
+        setWorkflowSteps,
+        refreshWorkflowSteps: vi.fn(),
+        setStepToDelete: vi.fn(),
+        setStepTaskCount: vi.fn(),
+        setTargetStepForMigration: vi.fn(),
+        setStepDeleteOpen: vi.fn(),
+        toast: vi.fn(),
+      }),
+    );
+
+    await act(() => result.current.handleAddWorkflowStep());
+
+    const updater = setWorkflowSteps.mock.calls[0][0] as (steps: WorkflowStep[]) => WorkflowStep[];
+    expect(updater([])[0]).toMatchObject({
+      id: expect.stringMatching(/^temp-step-/),
+      name: "New Step",
     });
+    expect(createWorkflowStepAction).not.toHaveBeenCalled();
   });
-
-  expect(updateWorkflowStepAction).not.toHaveBeenCalled();
 });
 
-it("does not persist a second topology edit before the first mutation completes", async () => {
-  const steps = [
-    step("work", "Work", 0, true, { autoStart: true }),
-    step("review", "Review", 1, false),
-  ];
-  const update = deferredPromise<WorkflowStep>();
-  vi.mocked(updateWorkflowStepAction).mockReturnValueOnce(update.promise);
-  const { result } = renderPersistedWorkflowStepActions(steps);
+describe("useWorkflowStepActions destructive and ordering paths", () => {
+  it("refuses to add, update, remove, or reorder steps when readOnly", async () => {
+    const initialSteps = [step("step-1", "Todo", 0, true), step("step-2", "Plan", 1, false)];
+    const { result, getSteps, refreshWorkflowSteps } =
+      renderReadOnlyWorkflowStepActions(initialSteps);
 
-  let firstEdit!: Promise<void>;
-  await act(async () => {
-    firstEdit = result.current.actions.handleUpdateWorkflowStep("work", {
-      events: { on_turn_complete: [{ type: "move_to_next" }] },
+    await act(async () => {
+      await result.current.handleAddWorkflowStep();
     });
-    await vi.waitFor(() => expect(updateWorkflowStepAction).toHaveBeenCalledTimes(1));
-    await result.current.actions.handleUpdateWorkflowStep("review", {
-      events: { on_turn_complete: [{ type: "move_to_previous" }] },
+    await act(async () => {
+      await result.current.handleUpdateWorkflowStep("step-2", { name: "Renamed" });
     });
-  });
-
-  expect(updateWorkflowStepAction).toHaveBeenCalledTimes(1);
-  expect(result.current.mutationGuard.isMutationPending).toBe(true);
-
-  update.resolve({
-    ...steps[0],
-    events: { on_turn_complete: [{ type: "move_to_next" }] },
-  });
-  await act(async () => {
-    await firstEdit;
-  });
-  expect(result.current.mutationGuard.isMutationPending).toBe(false);
-});
-
-it("does not replace a pending warning proposal with a second edit", async () => {
-  const steps = [
-    step("work", "Work", 0, true, {
-      autoStart: true,
-      onTurnComplete: [{ type: "move_to_next" }],
-    }),
-    step("review", "Review", 1, false),
-  ];
-  const { result } = renderPersistedWorkflowStepActions(steps);
-
-  await act(async () => {
-    await result.current.actions.handleUpdateWorkflowStep("review", {
-      events: {
-        ...steps[1].events,
-        on_turn_complete: [{ type: "move_to_previous" }],
-      },
+    await act(async () => {
+      await result.current.handleRemoveWorkflowStep("step-1");
     });
-  });
-  const proposal = result.current.mutationGuard.proposal;
-
-  await act(async () => {
-    await result.current.actions.handleUpdateWorkflowStep("work", { name: "Building" });
-  });
-
-  expect(result.current.mutationGuard.proposal).toBe(proposal);
-  expect(updateWorkflowStepAction).not.toHaveBeenCalled();
-});
-
-it("does not replace a pending blocking proposal with a second edit", async () => {
-  const steps = [
-    step("build", "Build", 0, true, {
-      autoStart: true,
-      onTurnComplete: [{ type: "move_to_next" }],
-    }),
-    step("review", "Review", 1, false, { autoStart: true }),
-  ];
-  const { result } = renderPersistedWorkflowStepActions(steps);
-
-  await act(async () => {
-    await result.current.actions.handleUpdateWorkflowStep("review", {
-      events: { on_turn_complete: [{ type: "move_to_previous" }] },
+    await act(async () => {
+      await result.current.handleReorderWorkflowSteps([initialSteps[1], initialSteps[0]]);
     });
-  });
-  const proposal = result.current.mutationGuard.proposal;
 
-  await act(async () => {
-    await result.current.actions.handleUpdateWorkflowStep("build", { name: "Building" });
+    expect(getSteps()).toEqual(initialSteps);
+    expect(createWorkflowStepAction).not.toHaveBeenCalled();
+    expect(updateWorkflowStepAction).not.toHaveBeenCalled();
+    expect(deleteWorkflowStepAction).not.toHaveBeenCalled();
+    expect(reorderWorkflowStepsAction).not.toHaveBeenCalled();
+    expect(refreshWorkflowSteps).not.toHaveBeenCalled();
   });
 
-  expect(result.current.mutationGuard.proposal).toBe(proposal);
-  expect(updateWorkflowStepAction).not.toHaveBeenCalled();
-});
+  it("opens the task migration dialog without reporting a saved mutation", async () => {
+    vi.mocked(getStepTaskCount).mockResolvedValue({ task_count: 2 });
+    const setStepDeleteOpen = vi.fn();
+    const { result } = renderHook(() =>
+      useWorkflowStepActions({
+        workflow,
+        readOnly: false,
+        workflowSteps: [step("step-1", "Todo", 0, true), step("step-2", "Done", 1, false)],
+        setWorkflowSteps: vi.fn(),
+        refreshWorkflowSteps: vi.fn(),
+        setStepToDelete: vi.fn(),
+        setStepTaskCount: vi.fn(),
+        setTargetStepForMigration: vi.fn(),
+        setStepDeleteOpen,
+        toast: vi.fn(),
+      }),
+    );
 
-it("releases a blocking proposal if confirmation is invoked defensively", async () => {
-  const steps = [
-    step("build", "Build", 0, true, {
-      autoStart: true,
-      onTurnComplete: [{ type: "move_to_next" }],
-    }),
-    step("review", "Review", 1, false, { autoStart: true }),
-  ];
-  const { result } = renderPersistedWorkflowStepActions(steps);
-
-  await act(async () => {
-    await result.current.actions.handleUpdateWorkflowStep("review", {
-      events: {
-        ...steps[1].events,
-        on_turn_complete: [{ type: "move_to_previous" }],
-      },
+    await act(async () => {
+      await result.current.handleRemoveWorkflowStep("step-1");
     });
-  });
-  expect(result.current.mutationGuard.proposal?.severity).toBe("blocking");
 
-  await act(async () => {
-    await result.current.mutationGuard.confirmProposal();
+    expect(setStepDeleteOpen).toHaveBeenCalledWith(true);
+    expect(result.current.status).toBe("idle");
   });
 
-  expect(result.current.mutationGuard.proposal).toBeNull();
-  expect(result.current.mutationGuard.isMutationPending).toBe(false);
-  expect(updateWorkflowStepAction).not.toHaveBeenCalled();
-});
+  it("requires confirmation before deleting a persisted step with no tasks", async () => {
+    vi.mocked(getStepTaskCount).mockResolvedValue({ task_count: 0 });
+    const setStepDeleteOpen = vi.fn();
+    const { result } = renderHook(() =>
+      useWorkflowStepActions({
+        workflow,
+        workflowSteps: [step("step-1", "Todo", 0, true)],
+        setWorkflowSteps: vi.fn(),
+        refreshWorkflowSteps: vi.fn(),
+        setStepToDelete: vi.fn(),
+        setStepTaskCount: vi.fn(),
+        setTargetStepForMigration: vi.fn(),
+        setStepDeleteOpen,
+        toast: vi.fn(),
+      }),
+    );
 
-it("holds a warning update until confirmation and executes it exactly once", async () => {
-  const steps = [
-    step("work", "Work", 0, true, {
-      autoStart: true,
-      onTurnComplete: [{ type: "move_to_next" }],
-    }),
-    step("review", "Review", 1, false),
-  ];
-  const { result } = renderPersistedWorkflowStepActions(steps);
+    await act(() => result.current.handleRemoveWorkflowStep("step-1"));
 
-  await act(async () => {
-    await result.current.actions.handleUpdateWorkflowStep("review", {
-      events: { on_turn_complete: [{ type: "move_to_previous" }] },
+    expect(setStepDeleteOpen).toHaveBeenCalledWith(true);
+    expect(deleteWorkflowStepAction).not.toHaveBeenCalled();
+  });
+
+  it("reorders locally without calling persistence APIs", async () => {
+    const originalSteps = [step("step-1", "Todo", 0, true), step("step-2", "Done", 1, false)];
+    const reorderedSteps = [originalSteps[1], originalSteps[0]];
+    const setWorkflowSteps = vi.fn();
+    const { result } = renderHook(() =>
+      useWorkflowStepActions({
+        workflow,
+        workflowSteps: originalSteps,
+        setWorkflowSteps,
+        refreshWorkflowSteps: vi.fn().mockResolvedValue(undefined),
+        setStepToDelete: vi.fn(),
+        setStepTaskCount: vi.fn(),
+        setTargetStepForMigration: vi.fn(),
+        setStepDeleteOpen: vi.fn(),
+        toast: vi.fn(),
+      }),
+    );
+
+    await act(async () => {
+      await result.current.handleReorderWorkflowSteps(reorderedSteps);
     });
+    expect(setWorkflowSteps).toHaveBeenCalledWith(
+      reorderedSteps.map((item, position) => ({ ...item, position })),
+    );
+    expect(reorderWorkflowStepsAction).not.toHaveBeenCalled();
   });
-
-  expect(updateWorkflowStepAction).not.toHaveBeenCalled();
-  expect(result.current.mutationGuard.proposal).toMatchObject({
-    intent: "apply",
-    severity: "warning",
-  });
-
-  await act(async () => {
-    await result.current.mutationGuard.confirmProposal();
-    await result.current.mutationGuard.confirmProposal();
-  });
-
-  expect(updateWorkflowStepAction).toHaveBeenCalledTimes(1);
 });
 
-it("discards a warning update when confirmation is cancelled", async () => {
-  const steps = [
-    step("work", "Work", 0, true, {
-      autoStart: true,
-      onTurnComplete: [{ type: "move_to_next" }],
-    }),
-    step("review", "Review", 1, false),
-  ];
-  const { result } = renderPersistedWorkflowStepActions(steps);
+describe("persistWorkflowDraft", () => {
+  const persistedWorkflow = { ...workflow, id: "wf-created" } as Workflow;
 
-  await act(async () => {
-    await result.current.actions.handleUpdateWorkflowStep("review", {
-      events: { on_turn_complete: [{ type: "move_to_previous" }] },
+  beforeEach(() => {
+    vi.mocked(createWorkflowAction).mockResolvedValue(persistedWorkflow);
+    vi.mocked(updateWorkflowAction).mockResolvedValue(persistedWorkflow);
+    vi.mocked(updateWorkflowStepAction).mockImplementation(async (id, updates) => ({
+      ...step(id, updates.name ?? "Step", updates.position ?? 0, updates.is_start_step ?? false),
+      ...updates,
+    }));
+    vi.mocked(reorderWorkflowStepsAction).mockResolvedValue({ steps: [], total: 0 });
+  });
+
+  it("does not duplicate a workflow or successful steps when a partial create is retried", async () => {
+    const draftWorkflow = { ...workflow, id: CLIENT_WORKFLOW_ID } as Workflow;
+    const drafts = [
+      step(CLIENT_STEP_ONE, "Todo", 0, true),
+      step(CLIENT_STEP_TWO, "Done", 1, false),
+    ].map((item) => ({ ...item, workflow_id: draftWorkflow.id }) as WorkflowStep);
+    vi.mocked(createWorkflowStepAction)
+      .mockResolvedValueOnce(step(SERVER_STEP_ONE, "Todo", 0, true))
+      .mockRejectedValueOnce(new Error("network down"))
+      .mockResolvedValueOnce(step(SERVER_STEP_TWO, "Done", 1, false));
+    const progress = createWorkflowDraftSaveProgress();
+
+    await expect(
+      persistWorkflowDraft({
+        workflow: draftWorkflow,
+        draftSteps: drafts,
+        savedSteps: [],
+        progress,
+      }),
+    ).rejects.toThrow("network down");
+    await persistWorkflowDraft({
+      workflow: draftWorkflow,
+      draftSteps: drafts,
+      savedSteps: [],
+      progress,
     });
-    result.current.mutationGuard.cancelProposal();
+
+    expect(createWorkflowAction).toHaveBeenCalledOnce();
+    expect(createWorkflowStepAction).toHaveBeenCalledTimes(3);
+    expect(progress.stepIds.get(CLIENT_STEP_ONE)).toBe(SERVER_STEP_ONE);
+    expect(progress.stepIds.get(CLIENT_STEP_TWO)).toBe(SERVER_STEP_TWO);
   });
 
-  expect(updateWorkflowStepAction).not.toHaveBeenCalled();
-  expect(result.current.mutationGuard.proposal).toBeNull();
-});
-
-it("does not gate an unchanged diagnostic identity or an edit that removes a cycle", async () => {
-  const steps = [
-    step("work", "Work", 0, true, {
-      autoStart: true,
-      onTurnComplete: [{ type: "move_to_next" }],
-    }),
-    step("review", "Review", 1, false, {
-      onTurnComplete: [{ type: "move_to_previous" }],
-    }),
-  ];
-  const { result } = renderPersistedWorkflowStepActions(steps);
-
-  await act(async () => {
-    await result.current.actions.handleUpdateWorkflowStep("work", { prompt: "New prompt" });
-    await result.current.actions.handleUpdateWorkflowStep("review", {
-      events: { on_turn_complete: [] },
-    });
-  });
-
-  expect(updateWorkflowStepAction).toHaveBeenCalledTimes(2);
-  expect(result.current.mutationGuard.proposal).toBeNull();
-});
-
-it("preflights a delete shape before any side effect", async () => {
-  const work = step("work", "Work", 0, true, {
-    autoStart: true,
-    onTurnComplete: [{ type: "move_to_next" }],
-  });
-  const middle = step("middle", "Middle", 1, false);
-  const review = step("review", "Review", 2, false, {
-    autoStart: true,
-    onTurnComplete: [{ type: "move_to_previous" }],
-  });
-  const { result, setWorkflowSteps } = renderPersistedWorkflowStepActions([work, middle, review]);
-
-  await act(async () => {
-    await result.current.actions.handleRemoveWorkflowStep("middle");
-  });
-
-  expect(getStepTaskCount).not.toHaveBeenCalled();
-  expect(deleteWorkflowStepAction).not.toHaveBeenCalled();
-  expect(setWorkflowSteps).not.toHaveBeenCalled();
-});
-
-it("preflights a reorder shape with an idle guard before any side effect", async () => {
-  const work = step("work", "Work", 0, true, {
-    autoStart: true,
-    onTurnComplete: [{ type: "move_to_next" }],
-  });
-  const middle = step("middle", "Middle", 1, false);
-  const review = step("review", "Review", 2, false, {
-    autoStart: true,
-    onTurnComplete: [{ type: "move_to_previous" }],
-  });
-  const { result, setWorkflowSteps } = renderPersistedWorkflowStepActions([work, middle, review]);
-
-  await act(async () => {
-    await result.current.actions.handleReorderWorkflowSteps([
-      work,
-      { ...review, position: 1 },
-      { ...middle, position: 2 },
-    ]);
-  });
-
-  expect(result.current.mutationGuard.proposal?.severity).toBe("blocking");
-  expect(reorderWorkflowStepsAction).not.toHaveBeenCalled();
-  expect(setWorkflowSteps).not.toHaveBeenCalled();
-});
-
-it("reconciles a successful update from its authoritative response", async () => {
-  const steps = [step("work", "Work", 0, true)];
-  const updated = { ...steps[0], name: "Building" };
-  vi.mocked(updateWorkflowStepAction).mockResolvedValue(updated);
-  const { result, getSteps } = renderPersistedWorkflowStepActions(steps);
-
-  await act(async () => {
-    await result.current.actions.handleUpdateWorkflowStep("work", { name: "Building" });
-  });
-
-  expect(getSteps()).toEqual([updated]);
-  expect(listWorkflowStepsAction).not.toHaveBeenCalled();
-  expect(result.current.mutationGuard.isMutationPending).toBe(false);
-});
-
-it("appends a successful add from its authoritative response", async () => {
-  const steps = [step("work", "Work", 0, true)];
-  const created = step("created", "Server Step", 1, false);
-  vi.mocked(createWorkflowStepAction).mockResolvedValue(created);
-  const { result, getSteps } = renderPersistedWorkflowStepActions(steps);
-
-  await act(async () => {
-    await result.current.actions.handleAddWorkflowStep();
-  });
-
-  expect(getSteps()).toEqual([...steps, created]);
-  expect(listWorkflowStepsAction).not.toHaveBeenCalled();
-  expect(result.current.mutationGuard.isMutationPending).toBe(false);
-});
-
-it("reconciles a successful reorder from its authoritative response", async () => {
-  const work = step("work", "Work", 0, true);
-  const review = step("review", "Review", 1, false);
-  const reordered = [
-    { ...review, position: 0 },
-    { ...work, position: 1 },
-  ];
-  vi.mocked(reorderWorkflowStepsAction).mockResolvedValue({ steps: reordered, total: 2 });
-  const { result, getSteps } = renderPersistedWorkflowStepActions([work, review]);
-
-  await act(async () => {
-    await result.current.actions.handleReorderWorkflowSteps([review, work]);
-  });
-
-  expect(getSteps()).toEqual(reordered);
-  expect(listWorkflowStepsAction).not.toHaveBeenCalled();
-  expect(result.current.mutationGuard.isMutationPending).toBe(false);
-});
-
-it("holds the task migration delete path until a warning is confirmed", async () => {
-  vi.mocked(getStepTaskCount).mockResolvedValue({ task_count: 2 });
-  const work = step("work", "Work", 0, true, {
-    autoStart: true,
-    onTurnComplete: [{ type: "move_to_next" }],
-  });
-  const middle = step("middle", "Middle", 1, false);
-  const review = step("review", "Review", 2, false, {
-    onTurnComplete: [{ type: "move_to_previous" }],
-  });
-  const { result, setStepDeleteOpen } = renderPersistedWorkflowStepActions([work, middle, review]);
-
-  await act(async () => {
-    await result.current.actions.handleRemoveWorkflowStep("middle");
-  });
-  expect(getStepTaskCount).not.toHaveBeenCalled();
-  expect(result.current.mutationGuard.proposal?.severity).toBe("warning");
-
-  await act(async () => {
-    await result.current.mutationGuard.confirmProposal();
-  });
-
-  expect(getStepTaskCount).toHaveBeenCalledTimes(1);
-  expect(setStepDeleteOpen).toHaveBeenCalledWith(true);
-  expect(deleteWorkflowStepAction).not.toHaveBeenCalled();
-});
-
-it("adds a step without reconfirming an existing diagnostic", async () => {
-  const steps = [
-    step("work", "Work", 0, true, {
-      autoStart: true,
-      onTurnComplete: [{ type: "move_to_step", config: { step_id: "work" } }],
-    }),
-  ];
-  const { result } = renderPersistedWorkflowStepActions(steps);
-
-  await act(async () => {
-    await result.current.actions.handleAddWorkflowStep();
-  });
-
-  expect(createWorkflowStepAction).toHaveBeenCalledTimes(1);
-  expect(result.current.mutationGuard.proposal).toBeNull();
-});
-
-it("does not create a draft workflow with a blocking cycle", async () => {
-  const draftSteps = [
-    step("build", "Build", 0, true, {
-      autoStart: true,
-      onTurnComplete: [{ type: "move_to_next" }],
-    }),
-    step("review", "Review", 1, false, {
-      autoStart: true,
-      onTurnComplete: [{ type: "move_to_previous" }],
-    }),
-  ];
-  const { result } = renderHook(() => {
-    const mutationGuard = useWorkflowMutationGuard(draftSteps);
-    return useWorkflowSaveActions({
-      workflow: { ...workflow, id: "temp-workflow" as Workflow["id"] },
-      isNewWorkflow: true,
-      workflowSteps: draftSteps,
-      templateStepCount: 0,
-      onSaveWorkflow: vi.fn(),
-      toast: vi.fn(),
-      mutationGuard,
-    });
-  });
-
-  await act(async () => {
-    await result.current.handleSaveWorkflow();
-  });
-
-  expect(createWorkflowAction).not.toHaveBeenCalled();
-  expect(result.current.mutationGuard.proposal?.severity).toBe("blocking");
-});
-
-it("cancels a warning draft with no requests and creates it once after confirmation", async () => {
-  const createdWorkflow = { ...workflow, id: "created-workflow" as Workflow["id"] };
-  vi.mocked(createWorkflowAction).mockResolvedValue(createdWorkflow);
-  vi.mocked(createWorkflowStepAction).mockImplementation(async (payload) => ({
-    ...step(`created-${payload.position}`, payload.name, payload.position, false),
-    workflow_id: createdWorkflow.id,
-  }));
-  const draftSteps = [
-    step("work", "Work", 0, true, {
-      autoStart: true,
-      onTurnComplete: [{ type: "move_to_next" }],
-    }),
-    step("review", "Review", 1, false, {
-      onTurnComplete: [{ type: "move_to_previous" }],
-    }),
-  ];
-  const { result } = renderHook(() => {
-    const mutationGuard = useWorkflowMutationGuard(draftSteps);
-    return useWorkflowSaveActions({
-      workflow: { ...workflow, id: "temp-workflow" as Workflow["id"] },
-      isNewWorkflow: true,
-      workflowSteps: draftSteps,
-      templateStepCount: 0,
-      onSaveWorkflow: vi.fn(),
-      toast: vi.fn(),
-      mutationGuard,
-    });
-  });
-
-  await act(async () => {
-    await result.current.handleSaveWorkflow();
-    result.current.mutationGuard.cancelProposal();
-  });
-  expect(createWorkflowAction).not.toHaveBeenCalled();
-  expect(createWorkflowStepAction).not.toHaveBeenCalled();
-
-  await act(async () => {
-    await result.current.handleSaveWorkflow();
-    await result.current.mutationGuard.confirmProposal();
-    await result.current.mutationGuard.confirmProposal();
-  });
-
-  expect(createWorkflowAction).toHaveBeenCalledTimes(1);
-  expect(createWorkflowStepAction).toHaveBeenCalledTimes(2);
-});
-
-it("remaps template workflow pull sources between backend-created and added steps", async () => {
-  const createdWorkflowId = "wf-created" as Workflow["id"];
-  const templateName = "Template Step";
-  const addedName = "Added Step";
-  const backendTemplateId = "backend-template";
-  const backendAddedId = "backend-added";
-  const draftTemplateId = "draft-template";
-
-  vi.mocked(createWorkflowAction).mockResolvedValue({
-    ...workflow,
-    id: createdWorkflowId,
-    workflow_template_id: "template-1",
-  });
-  vi.mocked(listWorkflowStepsAction).mockResolvedValue({
-    steps: [
+  it("remaps draft step references before updating the server", async () => {
+    const draftWorkflow = { ...workflow, id: CLIENT_WORKFLOW_ID } as Workflow;
+    const drafts = [
       {
-        ...step(backendTemplateId, templateName, 0, true),
-        id: backendTemplateId,
-        workflow_id: createdWorkflowId,
+        ...step(CLIENT_STEP_ONE, "Todo", 0, true),
+        workflow_id: draftWorkflow.id,
+        events: {
+          on_turn_complete: [{ type: "move_to_step", config: { step_id: CLIENT_STEP_TWO } }],
+        },
       },
-    ],
-    total: 1,
-  });
-  vi.mocked(createWorkflowStepAction).mockResolvedValue({
-    ...step(backendAddedId, addedName, 1, false),
-    id: backendAddedId,
-    workflow_id: createdWorkflowId,
-  });
-  vi.mocked(updateWorkflowStepAction).mockResolvedValue(step(backendAddedId, addedName, 1, false));
+      {
+        ...step(CLIENT_STEP_TWO, "Done", 1, false),
+        workflow_id: draftWorkflow.id,
+        pull_from_step_id: CLIENT_STEP_ONE,
+      },
+    ] as WorkflowStep[];
+    vi.mocked(createWorkflowStepAction)
+      .mockResolvedValueOnce(step(SERVER_STEP_ONE, "Todo", 0, true))
+      .mockResolvedValueOnce(step(SERVER_STEP_TWO, "Done", 1, false));
 
-  const templateStep = {
-    ...step(draftTemplateId, templateName, 0, true),
-    pull_from_step_id: "draft-added",
-  };
-  const addedStep = {
-    ...step("draft-added", addedName, 1, false),
-    pull_from_step_id: draftTemplateId,
-  };
-  const workflowSteps = [templateStep, addedStep];
-  const { result } = renderHook(() => {
-    const mutationGuard = useWorkflowMutationGuard(workflowSteps);
-    return useWorkflowSaveActions({
-      workflow: { ...workflow, workflow_template_id: "template-1" },
-      isNewWorkflow: true,
-      workflowSteps,
-      templateStepCount: 1,
-      onSaveWorkflow: vi.fn(),
-      onWorkflowCreated: vi.fn(),
-      toast: vi.fn(),
-      mutationGuard,
+    await persistWorkflowDraft({
+      workflow: draftWorkflow,
+      draftSteps: drafts,
+      savedSteps: [],
+      progress: createWorkflowDraftSaveProgress(),
     });
-  });
 
-  await act(async () => {
-    await result.current.handleSaveWorkflow();
-  });
-
-  expect(createWorkflowStepAction).toHaveBeenCalledWith(
-    expect.objectContaining({ pull_from_step_id: "" }),
-  );
-  expect(updateWorkflowStepAction).toHaveBeenCalledWith(backendAddedId, {
-    pull_from_step_id: backendTemplateId,
-  });
-  expect(updateWorkflowStepAction).toHaveBeenCalledWith(backendTemplateId, {
-    pull_from_step_id: backendAddedId,
+    expect(updateWorkflowStepAction).toHaveBeenCalledWith(
+      SERVER_STEP_ONE,
+      expect.objectContaining({
+        events: {
+          on_turn_complete: [{ type: "move_to_step", config: { step_id: SERVER_STEP_TWO } }],
+        },
+      }),
+    );
+    expect(updateWorkflowStepAction).toHaveBeenCalledWith(
+      SERVER_STEP_TWO,
+      expect.objectContaining({ pull_from_step_id: SERVER_STEP_ONE }),
+    );
+  });
+});
+
+describe("useWorkflowDeleteHandlers", () => {
+  it("refuses to open the delete-workflow dialog when readOnly", async () => {
+    const wfDel = {
+      setDeleteOpen: vi.fn(),
+      setWorkflowTaskCount: vi.fn(),
+      setWorkflowDeleteLoading: vi.fn(),
+      setTargetWorkflowId: vi.fn(),
+      setTargetWorkflowSteps: vi.fn(),
+      setTargetStepId: vi.fn(),
+      targetWorkflowId: "",
+      targetStepId: "",
+      setMigrateLoading: vi.fn(),
+    };
+    const { result } = renderHook(() =>
+      useWorkflowDeleteHandlers({
+        workflow,
+        readOnly: true,
+        otherWorkflows: [],
+        wfDel,
+        deleteWorkflowRun: vi.fn(),
+        toast: vi.fn(),
+      }),
+    );
+
+    await act(async () => {
+      await result.current.handleDeleteWorkflowClick();
+    });
+
+    expect(getWorkflowTaskCount).not.toHaveBeenCalled();
+    expect(wfDel.setDeleteOpen).not.toHaveBeenCalled();
+  });
+});
+
+describe("useStepDeleteHandlers", () => {
+  it("closes a failed delete and defers loading until its retry executes", async () => {
+    const setStepDeleteOpen = vi.fn();
+    const setStepToDelete = vi.fn();
+    const setStepMigrateLoading = vi.fn();
+    const setStepDeletePending = vi.fn();
+    let failedOperation: (() => Promise<void>) | undefined;
+    const { result } = renderHook(() =>
+      useStepDeleteHandlers({
+        workflow,
+        stepDel: {
+          stepToDelete: "step-1",
+          targetStepForMigration: "step-2",
+          setStepMigrateLoading,
+          setStepDeletePending,
+          setStepDeleteOpen,
+          setStepToDelete,
+        },
+        refreshWorkflowSteps: vi.fn(),
+        runMutation: vi.fn().mockImplementation(async (operation: () => Promise<void>) => {
+          failedOperation = operation;
+          return false;
+        }),
+      }),
+    );
+
+    await act(async () => {
+      await result.current.handleDeleteStepAndTasks();
+    });
+
+    expect(setStepToDelete).toHaveBeenCalledWith(null);
+    expect(setStepDeleteOpen).toHaveBeenCalledWith(false);
+    expect(setStepMigrateLoading).not.toHaveBeenCalled();
+    expect(setStepDeletePending.mock.calls).toEqual([[true], [false]]);
+    setStepToDelete.mockClear();
+    setStepDeleteOpen.mockClear();
+
+    await act(async () => {
+      await failedOperation?.();
+    });
+
+    expect(setStepMigrateLoading.mock.calls).toEqual([[true], [false]]);
+    expect(setStepToDelete).toHaveBeenCalledWith(null);
+    expect(setStepDeleteOpen).toHaveBeenCalledWith(false);
+  });
+});
+
+describe("useStepDeleteHandlers retry safety", () => {
+  it("ignores duplicate delete submissions while the first is queued", async () => {
+    let finishMutation!: (saved: boolean) => void;
+    const runMutation = vi.fn(
+      () =>
+        new Promise<boolean>((resolve) => {
+          finishMutation = resolve;
+        }),
+    );
+    const setStepDeleteOpen = vi.fn();
+    const { result } = renderHook(() =>
+      useStepDeleteHandlers({
+        workflow,
+        stepDel: {
+          stepToDelete: "step-1",
+          targetStepForMigration: "step-2",
+          setStepMigrateLoading: vi.fn(),
+          setStepDeletePending: vi.fn(),
+          setStepDeleteOpen,
+          setStepToDelete: vi.fn(),
+        },
+        refreshWorkflowSteps: vi.fn(),
+        runMutation,
+      }),
+    );
+
+    let firstSubmission!: Promise<void>;
+    act(() => {
+      firstSubmission = result.current.handleDeleteStepAndTasks();
+    });
+    await act(async () => {
+      await result.current.handleDeleteStepAndTasks();
+    });
+
+    expect(runMutation).toHaveBeenCalledOnce();
+
+    await act(async () => {
+      finishMutation(false);
+      await firstSubmission;
+    });
+    expect(setStepDeleteOpen).toHaveBeenCalledWith(false);
+  });
+
+  it("retries only refresh after a completed delete", async () => {
+    const refreshWorkflowSteps = vi
+      .fn()
+      .mockRejectedValueOnce(new Error("refresh failed"))
+      .mockResolvedValue(undefined);
+    const runMutation = vi.fn(async (operation: () => Promise<void>) => {
+      try {
+        await operation();
+      } catch {
+        await operation();
+      }
+      return true;
+    });
+    const { result } = renderHook(() =>
+      useStepDeleteHandlers({
+        workflow,
+        stepDel: {
+          stepToDelete: "step-1",
+          targetStepForMigration: "step-2",
+          setStepMigrateLoading: vi.fn(),
+          setStepDeletePending: vi.fn(),
+          setStepDeleteOpen: vi.fn(),
+          setStepToDelete: vi.fn(),
+        },
+        refreshWorkflowSteps,
+        runMutation,
+      }),
+    );
+
+    await act(async () => result.current.handleDeleteStepAndTasks());
+
+    expect(deleteWorkflowStepAction).toHaveBeenCalledOnce();
+    expect(refreshWorkflowSteps).toHaveBeenCalledTimes(2);
   });
 });
diff --git a/apps/web/components/settings/workflow-card-actions.ts b/apps/web/components/settings/workflow-card-actions.ts
index b6dcccfc10..5f39bba996 100644
--- a/apps/web/components/settings/workflow-card-actions.ts
+++ b/apps/web/components/settings/workflow-card-actions.ts
@@ -1,12 +1,15 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import type { Workflow, WorkflowStep } from "@/lib/types/http";
 import { useToast } from "@/components/toast-provider";
-import { useRequest } from "@/lib/http/use-request";
+import { useSerializedMutationQueue } from "./use-serialized-mutation-queue";
+import type { WorkflowMutationGuardController } from "./workflow-mutation-guard";
+import { applyWorkflowStepUpdates } from "./workflow-step-mutations";
 import {
   createWorkflowAction,
   createWorkflowStepAction,
+  updateWorkflowAction,
   updateWorkflowStepAction,
   deleteWorkflowStepAction,
   reorderWorkflowStepsAction,
@@ -16,141 +19,176 @@ import {
   exportWorkflowAction,
   bulkMoveTasks,
 } from "@/app/actions/workspaces";
-import type { WorkflowMutationGuardController } from "./workflow-mutation-guard";
-import {
-  addLocalStep,
-  addRemoteStep,
-  applyWorkflowStepUpdates,
-  newWorkflowStep,
-  removeLocalStep,
-  updateRemoteWorkflowStep,
-} from "./workflow-step-mutations";
 
 const FALLBACK_ERROR_MESSAGE = "Request failed";
+const TEMP_WORKFLOW_PREFIX = "temp-workflow-";
+
 type WorkflowStepActionsParams = {
   workflow: Workflow;
-  isNewWorkflow: boolean;
+  isNewWorkflow?: boolean;
+  /**
+   * Workflows synced from GitHub (`workflow.source === "github"`) are
+   * read-only in the UI; the backend also rejects step mutations with a 409.
+   * Gating here is defense-in-depth in case a disabled control is somehow
+   * still triggered.
+   */
   readOnly?: boolean;
   workflowSteps: WorkflowStep[];
   setWorkflowSteps: (updater: ((prev: WorkflowStep[]) => WorkflowStep[]) | WorkflowStep[]) => void;
+  refreshWorkflowSteps?: () => Promise<void>;
   setStepToDelete: (id: string | null) => void;
   setStepTaskCount: (count: number | null) => void;
   setTargetStepForMigration: (id: string) => void;
   setStepDeleteOpen: (open: boolean) => void;
   toast: ReturnType<typeof useToast>["toast"];
-  mutationGuard: WorkflowMutationGuardController;
+  mutationGuard?: WorkflowMutationGuardController;
 };
 
-type RemoveStepParams = {
+type OpenStepDeleteDialogParams = {
   stepId: string;
+  taskCount: number;
   workflowSteps: WorkflowStep[];
-  setWorkflowSteps: (updater: (prev: WorkflowStep[]) => WorkflowStep[]) => void;
   setStepToDelete: (id: string | null) => void;
   setStepTaskCount: (count: number | null) => void;
   setTargetStepForMigration: (id: string) => void;
   setStepDeleteOpen: (open: boolean) => void;
-  toast: ReturnType<typeof useToast>["toast"];
 };
 
-async function removeWorkflowStep({
+function openStepDeleteDialog({
   stepId,
+  taskCount,
   workflowSteps,
-  setWorkflowSteps,
   setStepToDelete,
   setStepTaskCount,
   setTargetStepForMigration,
   setStepDeleteOpen,
-  toast,
-}: RemoveStepParams) {
-  try {
-    const { task_count } = await getStepTaskCount(stepId);
-    if (task_count === 0) {
-      await deleteWorkflowStepAction(stepId);
-      setWorkflowSteps((previous) =>
-        previous
-          .filter((step) => step.id !== stepId)
-          .map((step, position) => ({ ...step, position })),
-      );
-      return;
-    }
-    setStepToDelete(stepId);
-    setStepTaskCount(task_count);
-    const otherSteps = workflowSteps.filter((s) => s.id !== stepId);
-    setTargetStepForMigration(otherSteps.length > 0 ? otherSteps[0].id : "");
-    setStepDeleteOpen(true);
-  } catch (error) {
+}: OpenStepDeleteDialogParams) {
+  setStepToDelete(stepId);
+  setStepTaskCount(taskCount);
+  const otherSteps = workflowSteps.filter((s) => s.id !== stepId);
+  setTargetStepForMigration(otherSteps.length > 0 ? otherSteps[0].id : "");
+  setStepDeleteOpen(true);
+}
+
+const NEW_STEP_DEFAULTS = { name: "New Step", color: "bg-slate-500" } as const;
+
+function createDraftStep(workflow: Workflow, position: number): WorkflowStep {
+  return {
+    id: `temp-step-${crypto.randomUUID()}`,
+    workflow_id: workflow.id,
+    ...NEW_STEP_DEFAULTS,
+    position,
+    allow_manual_move: true,
+    created_at: "",
+    updated_at: "",
+  };
+}
+
+function useWorkflowStepMutationQueue(toast: WorkflowStepActionsParams["toast"]) {
+  return useSerializedMutationQueue((errorTitle, error) => {
     toast({
-      title: "Failed to check step tasks",
+      title: errorTitle,
       description: error instanceof Error ? error.message : FALLBACK_ERROR_MESSAGE,
       variant: "error",
     });
-  }
+  });
 }
 
-export function useWorkflowStepActions({
-  workflow,
-  isNewWorkflow,
-  readOnly = false,
-  workflowSteps,
-  setWorkflowSteps,
-  setStepToDelete,
-  setStepTaskCount,
-  setTargetStepForMigration,
-  setStepDeleteOpen,
-  toast,
-  mutationGuard,
-}: WorkflowStepActionsParams) {
-  const handleUpdateWorkflowStep = async (stepId: string, updates: Partial<WorkflowStep>) => {
+function createRemoveWorkflowStepHandler(
+  params: WorkflowStepActionsParams,
+  guardMutation: WorkflowMutationGuardController["guardMutation"],
+) {
+  const {
+    workflow,
+    readOnly = false,
+    workflowSteps,
+    setWorkflowSteps,
+    setStepToDelete,
+    setStepTaskCount,
+    setTargetStepForMigration,
+    setStepDeleteOpen,
+    toast,
+  } = params;
+  const isNewWorkflow = params.isNewWorkflow ?? workflow.id.startsWith(TEMP_WORKFLOW_PREFIX);
+  return async (stepId: string) => {
     if (readOnly) return;
-    if (isNewWorkflow) {
-      setWorkflowSteps((prev) => applyWorkflowStepUpdates(prev, stepId, updates));
-      return;
-    }
-    const proposedSteps = applyWorkflowStepUpdates(workflowSteps, stepId, updates);
-    await mutationGuard.guardMutation({
-      proposedSteps,
-      operation: () => updateRemoteWorkflowStep({ stepId, updates, setWorkflowSteps, toast }),
-    });
-  };
-  const handleAddWorkflowStep = async () => {
-    if (readOnly) return;
-    if (isNewWorkflow) {
-      addLocalStep(workflow, setWorkflowSteps);
-      return;
-    }
-    const proposedSteps = [
-      ...workflowSteps,
-      newWorkflowStep(workflow, workflowSteps.length, `proposed-step-${workflow.id}`),
-    ];
-    await mutationGuard.guardMutation({
-      proposedSteps,
-      operation: () => addRemoteStep(workflow, workflowSteps.length, setWorkflowSteps, toast),
-    });
-  };
-  const handleRemoveWorkflowStep = async (stepId: string) => {
-    if (readOnly) return;
-    if (isNewWorkflow) {
-      removeLocalStep(stepId, setWorkflowSteps);
-      return;
-    }
     const proposedSteps = workflowSteps
       .filter((step) => step.id !== stepId)
       .map((step, position) => ({ ...step, position }));
-    await mutationGuard.guardMutation({
+    if (isNewWorkflow) {
+      setWorkflowSteps(proposedSteps);
+      return;
+    }
+    await guardMutation({
       proposedSteps,
-      operation: () =>
-        removeWorkflowStep({
+      operation: async () => {
+        if (stepId.startsWith("temp-")) {
+          setWorkflowSteps(proposedSteps);
+          return;
+        }
+        let taskCount: number;
+        try {
+          ({ task_count: taskCount } = await getStepTaskCount(stepId));
+        } catch (error) {
+          toast({
+            title: "Failed to check workflow step tasks",
+            description: error instanceof Error ? error.message : FALLBACK_ERROR_MESSAGE,
+            variant: "error",
+          });
+          return;
+        }
+        openStepDeleteDialog({
           stepId,
+          taskCount,
           workflowSteps,
-          setWorkflowSteps,
           setStepToDelete,
           setStepTaskCount,
           setTargetStepForMigration,
           setStepDeleteOpen,
-          toast,
-        }),
+        });
+      },
     });
   };
+}
+
+export function useWorkflowStepActions(params: WorkflowStepActionsParams) {
+  const { workflow, workflowSteps, setWorkflowSteps, toast, mutationGuard } = params;
+  const isNewWorkflow = params.isNewWorkflow ?? workflow.id.startsWith(TEMP_WORKFLOW_PREFIX);
+  const readOnly = params.readOnly ?? false;
+  const mutationQueue = useWorkflowStepMutationQueue(toast);
+  const runMutation = mutationQueue.run;
+  const guardMutation: WorkflowMutationGuardController["guardMutation"] =
+    mutationGuard?.guardMutation ?? (async ({ operation }) => operation());
+
+  const handleUpdateWorkflowStep = async (stepId: string, updates: Partial<WorkflowStep>) => {
+    if (readOnly) return;
+    const proposedSteps = applyWorkflowStepUpdates(workflowSteps, stepId, updates);
+    if (isNewWorkflow) {
+      setWorkflowSteps(() => proposedSteps);
+      return;
+    }
+    await guardMutation({
+      proposedSteps,
+      operation: async () => setWorkflowSteps(() => proposedSteps),
+    });
+  };
+
+  const handleAddWorkflowStep = async () => {
+    if (readOnly) return;
+    const draftStep = createDraftStep(workflow, workflowSteps.length);
+    const proposedSteps = [...workflowSteps, draftStep];
+    if (isNewWorkflow) {
+      setWorkflowSteps((previous) => [...previous, draftStep]);
+      return;
+    }
+    await guardMutation({
+      proposedSteps,
+      operation: async () => setWorkflowSteps((previous) => [...previous, draftStep]),
+    });
+  };
+
+  const handleRemoveWorkflowStep = createRemoveWorkflowStepHandler(params, guardMutation);
+
   const handleReorderWorkflowSteps = async (reorderedSteps: WorkflowStep[]) => {
     if (readOnly) return;
     const proposedSteps = reorderedSteps.map((step, position) => ({ ...step, position }));
@@ -158,38 +196,224 @@ export function useWorkflowStepActions({
       setWorkflowSteps(proposedSteps);
       return;
     }
-    await mutationGuard.guardMutation({
+    await guardMutation({
       proposedSteps,
-      operation: async () => {
-        setWorkflowSteps(proposedSteps);
-        try {
-          const response = await reorderWorkflowStepsAction(
-            workflow.id,
-            proposedSteps.map((step) => step.id),
-          );
-          setWorkflowSteps(response.steps);
-        } catch (error) {
-          toast({
-            title: "Failed to reorder workflow steps",
-            description: error instanceof Error ? error.message : FALLBACK_ERROR_MESSAGE,
-            variant: "error",
-          });
-          setWorkflowSteps(workflowSteps);
-        }
-      },
+      operation: async () => setWorkflowSteps(proposedSteps),
     });
   };
+
   return {
     handleUpdateWorkflowStep,
     handleAddWorkflowStep,
     handleRemoveWorkflowStep,
     handleReorderWorkflowSteps,
+    status: mutationQueue.status,
+    retry: mutationQueue.retry,
+    runMutation,
   };
 }
 
+export type WorkflowDraftSaveProgress = {
+  workflow?: Workflow;
+  stepIds: Map<string, string>;
+  templateStepsLoaded?: boolean;
+};
+
+export function createWorkflowDraftSaveProgress(): WorkflowDraftSaveProgress {
+  return { stepIds: new Map() };
+}
+
+type PersistWorkflowDraftParams = {
+  workflow: Workflow;
+  draftSteps: WorkflowStep[];
+  savedSteps: WorkflowStep[];
+  progress: WorkflowDraftSaveProgress;
+};
+
+export async function persistWorkflowDraft({
+  workflow,
+  draftSteps,
+  savedSteps,
+  progress,
+}: PersistWorkflowDraftParams): Promise<{ workflow: Workflow; steps: WorkflowStep[] }> {
+  const isNewWorkflow = workflow.id.startsWith(TEMP_WORKFLOW_PREFIX);
+  const persistedWorkflow = await ensurePersistedWorkflow(workflow, progress);
+  const updatedWorkflow = await updateWorkflowAction(persistedWorkflow.id, {
+    name: workflow.name.trim(),
+    description: workflow.description ?? "",
+    agent_profile_id: workflow.agent_profile_id ?? "",
+  });
+  progress.workflow = updatedWorkflow;
+  await reconcileTemplateSteps({ workflow, draftSteps, updatedWorkflow, progress, isNewWorkflow });
+  await createMissingSteps(updatedWorkflow.id, draftSteps, progress.stepIds);
+  const remappedSteps = remapWorkflowDraftSteps(draftSteps, updatedWorkflow.id, progress.stepIds);
+  await updateChangedSteps(remappedSteps, savedSteps);
+  if (remappedSteps.length > 0) {
+    await reorderWorkflowStepsAction(
+      updatedWorkflow.id,
+      remappedSteps.map((step) => step.id),
+    );
+  }
+  return { workflow: updatedWorkflow, steps: remappedSteps };
+}
+
+async function ensurePersistedWorkflow(
+  workflow: Workflow,
+  progress: WorkflowDraftSaveProgress,
+): Promise<Workflow> {
+  if (progress.workflow) return progress.workflow;
+  const persisted = workflow.id.startsWith(TEMP_WORKFLOW_PREFIX)
+    ? await createWorkflowAction({
+        workspace_id: workflow.workspace_id,
+        name: workflow.name.trim(),
+        description: workflow.description ?? undefined,
+        workflow_template_id: workflow.workflow_template_id ?? undefined,
+      })
+    : workflow;
+  progress.workflow = persisted;
+  return persisted;
+}
+
+async function reconcileTemplateSteps({
+  workflow,
+  draftSteps,
+  updatedWorkflow,
+  progress,
+  isNewWorkflow,
+}: {
+  workflow: Workflow;
+  draftSteps: WorkflowStep[];
+  updatedWorkflow: Workflow;
+  progress: WorkflowDraftSaveProgress;
+  isNewWorkflow: boolean;
+}) {
+  if (!isNewWorkflow || !workflow.workflow_template_id || progress.templateStepsLoaded) return;
+  const templateSteps = (await listWorkflowStepsAction(updatedWorkflow.id)).steps ?? [];
+  mapTemplateStepIds(workflow.id, draftSteps, templateSteps, progress.stepIds);
+  const keptServerIds = new Set(progress.stepIds.values());
+  for (const serverStep of templateSteps) {
+    if (!keptServerIds.has(serverStep.id)) await deleteWorkflowStepAction(serverStep.id);
+  }
+  progress.templateStepsLoaded = true;
+}
+
+async function createMissingSteps(
+  workflowId: string,
+  draftSteps: WorkflowStep[],
+  mappings: Map<string, string>,
+) {
+  for (const step of draftSteps) {
+    if (!step.id.startsWith("temp-") || mappings.has(step.id)) continue;
+    const created = await createWorkflowStepAction({
+      workflow_id: workflowId,
+      name: step.name,
+      position: step.position,
+      color: step.color,
+    });
+    mappings.set(step.id, created.id);
+  }
+}
+
+async function updateChangedSteps(remapped: WorkflowStep[], savedSteps: WorkflowStep[]) {
+  const savedById = new Map(savedSteps.map((step) => [step.id, step]));
+  for (const step of remapped) {
+    const saved = savedById.get(step.id);
+    if (!saved || !areStepDraftsEqual(step, saved)) {
+      await updateWorkflowStepAction(step.id, stepUpdatePayload(step));
+    }
+  }
+}
+
+function mapTemplateStepIds(
+  clientWorkflowId: string,
+  draftSteps: WorkflowStep[],
+  serverSteps: WorkflowStep[],
+  mappings: Map<string, string>,
+) {
+  const serverByPosition = new Map(serverSteps.map((step) => [step.position, step.id]));
+  const prefix = `temp-template-step-${clientWorkflowId}-`;
+  for (const step of draftSteps) {
+    if (!step.id.startsWith(prefix)) continue;
+    const originalPosition = Number(step.id.slice(prefix.length));
+    const serverId = serverByPosition.get(originalPosition);
+    if (serverId) mappings.set(step.id, serverId);
+  }
+}
+
+function remapDraftStep(
+  step: WorkflowStep,
+  persistedWorkflowId: string,
+  position: number,
+  mappings: Map<string, string>,
+): WorkflowStep {
+  const remapId = (id: string | null | undefined) => (id ? (mappings.get(id) ?? id) : id);
+  return {
+    ...step,
+    id: mappings.get(step.id) ?? step.id,
+    workflow_id: persistedWorkflowId as WorkflowStep["workflow_id"],
+    position,
+    pull_from_step_id: remapId(step.pull_from_step_id),
+    events: remapStepReferences(step.events, mappings),
+  };
+}
+
+export function remapWorkflowDraftSteps(
+  steps: WorkflowStep[],
+  persistedWorkflowId: string,
+  mappings: Map<string, string>,
+): WorkflowStep[] {
+  return steps.map((step, position) =>
+    remapDraftStep(step, persistedWorkflowId, position, mappings),
+  );
+}
+
+function remapStepReferences<T>(value: T, mappings: Map<string, string>): T {
+  if (Array.isArray(value)) return value.map((item) => remapStepReferences(item, mappings)) as T;
+  if (!value || typeof value !== "object") return value;
+  const mapped = Object.entries(value).map(([key, item]) => [
+    key,
+    key === "step_id" && typeof item === "string"
+      ? (mappings.get(item) ?? item)
+      : remapStepReferences(item, mappings),
+  ]);
+  return Object.fromEntries(mapped) as T;
+}
+
+function stepUpdatePayload(step: WorkflowStep): Partial<WorkflowStep> {
+  return {
+    name: step.name,
+    position: step.position,
+    color: step.color,
+    prompt: step.prompt ?? "",
+    events: step.events ?? {},
+    allow_manual_move: step.allow_manual_move ?? true,
+    is_start_step: step.is_start_step ?? false,
+    show_in_command_panel: step.show_in_command_panel ?? false,
+    auto_archive_after_hours: step.auto_archive_after_hours ?? 0,
+    agent_profile_id: step.agent_profile_id ?? "",
+    auto_advance_requires_signal: step.auto_advance_requires_signal ?? false,
+    wip_limit: step.wip_limit ?? 0,
+    pull_from_step_id: step.pull_from_step_id ?? "",
+  };
+}
+
+export function areStepDraftsEqual(left: WorkflowStep[], right: WorkflowStep[]): boolean;
+export function areStepDraftsEqual(left: WorkflowStep, right: WorkflowStep): boolean;
+export function areStepDraftsEqual(
+  left: WorkflowStep[] | WorkflowStep,
+  right: WorkflowStep[] | WorkflowStep,
+): boolean {
+  if (Array.isArray(left) && Array.isArray(right)) {
+    if (left.length !== right.length) return false;
+    return left.every((step, index) => areStepDraftsEqual(step, right[index]));
+  }
+  if (Array.isArray(left) || Array.isArray(right)) return false;
+  return JSON.stringify(stepUpdatePayload(left)) === JSON.stringify(stepUpdatePayload(right));
+}
+
 type WorkflowDeleteHandlersParams = {
   workflow: Workflow;
-  isNewWorkflow: boolean;
+  /** See `WorkflowStepActionsParams.readOnly` — defense-in-depth for synced workflows. */
   readOnly?: boolean;
   otherWorkflows: Workflow[];
   wfDel: {
@@ -209,7 +433,6 @@ type WorkflowDeleteHandlersParams = {
 
 export function useWorkflowDeleteHandlers({
   workflow,
-  isNewWorkflow,
   readOnly = false,
   otherWorkflows,
   wfDel,
@@ -241,11 +464,6 @@ export function useWorkflowDeleteHandlers({
 
   const handleDeleteWorkflowClick = async () => {
     if (readOnly) return;
-    if (isNewWorkflow) {
-      wfDel.setWorkflowTaskCount(0);
-      wfDel.setDeleteOpen(true);
-      return;
-    }
     wfDel.setWorkflowDeleteLoading(true);
     try {
       const { task_count } = await getWorkflowTaskCount(workflow.id);
@@ -265,6 +483,8 @@ export function useWorkflowDeleteHandlers({
   };
 
   const handleDeleteWorkflow = async () => {
+    // A background sync can flip the workflow read-only while the delete
+    // dialog is already open; re-check at confirm time.
     if (readOnly) return;
     try {
       await deleteWorkflowRun();
@@ -303,270 +523,83 @@ export function useWorkflowDeleteHandlers({
 
   return { handleDeleteWorkflowClick, handleDeleteWorkflow, handleMigrateAndDeleteWorkflow };
 }
+
 type StepDeleteHandlersParams = {
   workflow: Workflow;
   stepDel: {
     stepToDelete: string | null;
     targetStepForMigration: string;
     setStepMigrateLoading: (v: boolean) => void;
+    setStepDeletePending: (v: boolean) => void;
     setStepDeleteOpen: (v: boolean) => void;
     setStepToDelete: (v: string | null) => void;
   };
-  setWorkflowSteps: (updater: (prev: WorkflowStep[]) => WorkflowStep[]) => void;
-  toast: ReturnType<typeof useToast>["toast"];
+  refreshWorkflowSteps: () => Promise<void>;
+  runMutation: (operation: () => Promise<void>, errorTitle: string) => Promise<boolean>;
 };
 
 export function useStepDeleteHandlers({
   workflow,
   stepDel,
-  setWorkflowSteps,
-  toast,
+  refreshWorkflowSteps,
+  runMutation,
 }: StepDeleteHandlersParams) {
+  const deletePendingRef = useRef(false);
+
+  const runStepDelete = async (operation: () => Promise<void>, errorTitle: string) => {
+    if (deletePendingRef.current) return;
+    let mutationCompleted = false;
+    deletePendingRef.current = true;
+    stepDel.setStepDeletePending(true);
+    try {
+      const saved = await runMutation(async () => {
+        stepDel.setStepMigrateLoading(true);
+        try {
+          if (!mutationCompleted) {
+            await operation();
+            mutationCompleted = true;
+          }
+          await refreshWorkflowSteps();
+          stepDel.setStepToDelete(null);
+          stepDel.setStepDeleteOpen(false);
+        } finally {
+          stepDel.setStepMigrateLoading(false);
+        }
+      }, errorTitle);
+      if (!saved) {
+        stepDel.setStepToDelete(null);
+        stepDel.setStepDeleteOpen(false);
+      }
+    } finally {
+      deletePendingRef.current = false;
+      stepDel.setStepDeletePending(false);
+    }
+  };
+
   const handleMigrateAndDeleteStep = async () => {
     if (!stepDel.stepToDelete || !stepDel.targetStepForMigration) return;
-    const stepId = stepDel.stepToDelete;
-    stepDel.setStepMigrateLoading(true);
-    try {
+    await runStepDelete(async () => {
       await bulkMoveTasks({
         source_workflow_id: workflow.id,
-        source_step_id: stepId,
+        source_step_id: stepDel.stepToDelete!,
         target_workflow_id: workflow.id,
         target_step_id: stepDel.targetStepForMigration,
       });
-      await deleteWorkflowStepAction(stepId);
-      setWorkflowSteps((previous) =>
-        previous
-          .filter((step) => step.id !== stepId)
-          .map((step, position) => ({ ...step, position })),
-      );
-      stepDel.setStepDeleteOpen(false);
-      stepDel.setStepToDelete(null);
-    } catch (error) {
-      toast({
-        title: "Failed to migrate tasks",
-        description: error instanceof Error ? error.message : FALLBACK_ERROR_MESSAGE,
-        variant: "error",
-      });
-    } finally {
-      stepDel.setStepMigrateLoading(false);
-    }
+      await deleteWorkflowStepAction(stepDel.stepToDelete!);
+    }, "Failed to migrate tasks");
   };
 
   const handleDeleteStepAndTasks = async () => {
     if (!stepDel.stepToDelete) return;
-    const stepId = stepDel.stepToDelete;
-    stepDel.setStepMigrateLoading(true);
-    try {
-      await deleteWorkflowStepAction(stepId);
-      setWorkflowSteps((previous) =>
-        previous
-          .filter((step) => step.id !== stepId)
-          .map((step, position) => ({ ...step, position })),
-      );
-      stepDel.setStepDeleteOpen(false);
-      stepDel.setStepToDelete(null);
-    } catch (error) {
-      toast({
-        title: "Failed to delete step",
-        description: error instanceof Error ? error.message : FALLBACK_ERROR_MESSAGE,
-        variant: "error",
-      });
-    } finally {
-      stepDel.setStepMigrateLoading(false);
-    }
+    await runStepDelete(
+      () => deleteWorkflowStepAction(stepDel.stepToDelete!),
+      "Failed to delete step",
+    );
   };
 
   return { handleMigrateAndDeleteStep, handleDeleteStepAndTasks };
 }
 
-/**
- * Compare user step edits against backend steps for reconciliation.
- * NOTE: We intentionally do NOT compare events here. The backend creates steps
- * with properly remapped step_id references (template aliases → real UUIDs).
- * If we compared events, the template aliases would overwrite the backend's UUIDs.
- */
-function remapPullFromStepID(
-  pullFromStepID: string | null | undefined,
-  stepIDByDraftID: Map<string, string>,
-) {
-  if (!pullFromStepID) return "";
-  return stepIDByDraftID.get(pullFromStepID) ?? pullFromStepID;
-}
-
-function diffStepUpdates(
-  userStep: WorkflowStep,
-  backendStep: WorkflowStep,
-  stepIDByDraftID: Map<string, string>,
-): Partial<WorkflowStep> {
-  const updates: Partial<WorkflowStep> = {};
-  if (userStep.name !== backendStep.name) updates.name = userStep.name;
-  if (userStep.color !== backendStep.color) updates.color = userStep.color;
-  if (userStep.prompt !== backendStep.prompt) updates.prompt = userStep.prompt;
-  if (userStep.is_start_step !== backendStep.is_start_step)
-    updates.is_start_step = userStep.is_start_step;
-  if (userStep.allow_manual_move !== backendStep.allow_manual_move)
-    updates.allow_manual_move = userStep.allow_manual_move;
-  if ((userStep.wip_limit ?? 0) !== (backendStep.wip_limit ?? 0))
-    updates.wip_limit = userStep.wip_limit ?? 0;
-  const pullFromStepID = remapPullFromStepID(userStep.pull_from_step_id, stepIDByDraftID);
-  if (pullFromStepID !== (backendStep.pull_from_step_id ?? ""))
-    updates.pull_from_step_id = pullFromStepID;
-  // Events are NOT compared - backend has correct step_id UUIDs, user has template aliases
-  return updates;
-}
-
-function stepPayload(workflowId: string, step: WorkflowStep) {
-  return {
-    workflow_id: workflowId,
-    name: step.name,
-    position: step.position,
-    color: step.color,
-    prompt: step.prompt,
-    events: step.events,
-    is_start_step: step.is_start_step,
-    allow_manual_move: step.allow_manual_move,
-    wip_limit: step.wip_limit ?? 0,
-    pull_from_step_id: step.pull_from_step_id ?? "",
-  };
-}
-
-function stepPayloadWithoutPullSource(workflowId: string, step: WorkflowStep) {
-  return { ...stepPayload(workflowId, step), pull_from_step_id: "" };
-}
-
-async function createStepsThenRemapPullSources(
-  workflowId: string,
-  steps: WorkflowStep[],
-  existingStepIDByDraftID = new Map<string, string>(),
-) {
-  const createdByDraftID = new Map(existingStepIDByDraftID);
-  const addedStepIDByDraftID = new Map<string, string>();
-  const createdByPosition = new Map<number, string>();
-  for (const step of steps) {
-    const created = await createWorkflowStepAction(stepPayloadWithoutPullSource(workflowId, step));
-    createdByDraftID.set(step.id, created.id);
-    addedStepIDByDraftID.set(step.id, created.id);
-    createdByPosition.set(step.position, created.id);
-  }
-  for (const step of steps) {
-    const pullFromStepID = remapPullFromStepID(step.pull_from_step_id, createdByDraftID);
-    if (!pullFromStepID) continue;
-    const createdID = addedStepIDByDraftID.get(step.id) ?? createdByPosition.get(step.position);
-    if (createdID) await updateWorkflowStepAction(createdID, { pull_from_step_id: pullFromStepID });
-  }
-  return addedStepIDByDraftID;
-}
-
-async function reconcileTemplateSteps(
-  createdId: string,
-  userSteps: WorkflowStep[],
-  templateStepCount: number,
-) {
-  const { steps: backendSteps = [] } = await listWorkflowStepsAction(createdId);
-  const stepIDByDraftID = new Map<string, string>();
-  for (const backendStep of backendSteps) {
-    const userStep = userSteps.find((s) => s.position === backendStep.position);
-    if (userStep) stepIDByDraftID.set(userStep.id, backendStep.id);
-  }
-
-  // Create added steps first so template-step updates can remap pull sources
-  // that point at a newly-added step.
-  const addedSteps = userSteps.filter((step) => step.position >= templateStepCount);
-  const addedStepIDByDraftID = await createStepsThenRemapPullSources(
-    createdId,
-    addedSteps,
-    stepIDByDraftID,
-  );
-  for (const [draftID, createdID] of addedStepIDByDraftID) {
-    stepIDByDraftID.set(draftID, createdID);
-  }
-
-  // Reconcile user edits (name, color, etc.) with backend steps.
-  // We do NOT touch events - the backend has correct step_id UUIDs.
-  for (const backendStep of backendSteps) {
-    const userStep = userSteps.find((s) => s.position === backendStep.position);
-    if (!userStep) continue;
-    const updates = diffStepUpdates(userStep, backendStep, stepIDByDraftID);
-    if (Object.keys(updates).length > 0) await updateWorkflowStepAction(backendStep.id, updates);
-  }
-}
-
-type WorkflowSaveActionsParams = {
-  workflow: Workflow;
-  isNewWorkflow: boolean;
-  readOnly?: boolean;
-  workflowSteps: WorkflowStep[];
-  templateStepCount: number;
-  onSaveWorkflow: () => Promise<unknown>;
-  onWorkflowCreated?: (created: Workflow) => void;
-  toast: ReturnType<typeof useToast>["toast"];
-  mutationGuard: WorkflowMutationGuardController;
-};
-
-export function useWorkflowSaveActions({
-  workflow,
-  isNewWorkflow,
-  readOnly = false,
-  workflowSteps,
-  templateStepCount,
-  onSaveWorkflow,
-  onWorkflowCreated,
-  toast,
-  mutationGuard,
-}: WorkflowSaveActionsParams) {
-  const saveWorkflowRequest = useRequest(onSaveWorkflow);
-
-  const saveNewWorkflowRequest = useRequest(async () => {
-    const templateId = workflow.workflow_template_id;
-    const created = await createWorkflowAction({
-      workspace_id: workflow.workspace_id,
-      name: workflow.name.trim() || "New Workflow",
-      workflow_template_id: templateId || undefined,
-    });
-
-    if (templateId) {
-      // Backend creates template steps with remapped step_id references.
-      // Reconcile user edits and additions on top.
-      await reconcileTemplateSteps(created.id, workflowSteps, templateStepCount);
-    } else {
-      await createStepsThenRemapPullSources(created.id, workflowSteps);
-    }
-
-    onWorkflowCreated?.(created);
-  });
-
-  const activeSaveRequest = isNewWorkflow ? saveNewWorkflowRequest : saveWorkflowRequest;
-
-  const runSaveWorkflow = async () => {
-    try {
-      if (isNewWorkflow) await saveNewWorkflowRequest.run();
-      else await saveWorkflowRequest.run();
-    } catch (error) {
-      toast({
-        title: "Failed to save workflow changes",
-        description: error instanceof Error ? error.message : FALLBACK_ERROR_MESSAGE,
-        variant: "error",
-      });
-    }
-  };
-
-  const handleSaveWorkflow = async () => {
-    if (readOnly) return;
-    if (!isNewWorkflow) {
-      await runSaveWorkflow();
-      return;
-    }
-    await mutationGuard.guardMutation({
-      baselineSteps: [],
-      proposedSteps: workflowSteps,
-      intent: "create",
-      operation: runSaveWorkflow,
-    });
-  };
-
-  return { activeSaveRequest, handleSaveWorkflow, mutationGuard };
-}
-
 type WorkflowExportActionsParams = {
   workflowId: string;
   setExportYaml: (yaml: string) => void;
diff --git a/apps/web/components/settings/workflow-card-dialogs.tsx b/apps/web/components/settings/workflow-card-dialogs.tsx
index 16452d04cd..b297faec7b 100644
--- a/apps/web/components/settings/workflow-card-dialogs.tsx
+++ b/apps/web/components/settings/workflow-card-dialogs.tsx
@@ -25,8 +25,17 @@ type WorkflowDeleteDialogProps = {
   deleteLoading: boolean;
   onDelete: () => Promise<void>;
   onMigrateAndDelete: () => Promise<void>;
+  hasUnsavedChanges: boolean;
 };
 
+function workflowDeleteDescription(taskCount: number | null, hasUnsavedChanges: boolean): string {
+  const hasTasks = taskCount !== null && taskCount > 0;
+  const base = hasTasks
+    ? `This workflow has ${taskCount} task${taskCount === 1 ? "" : "s"}. Choose where to migrate them, or delete the workflow and archive the tasks.`
+    : "This will permanently delete the workflow and all its steps.";
+  return `${base}${hasUnsavedChanges ? " Unsaved workflow changes will be discarded." : ""}`;
+}
+
 export function WorkflowDeleteDialog({
   open,
   onOpenChange,
@@ -41,6 +50,7 @@ export function WorkflowDeleteDialog({
   deleteLoading,
   onDelete,
   onMigrateAndDelete,
+  hasUnsavedChanges,
 }: WorkflowDeleteDialogProps) {
   const hasTasks = workflowTaskCount !== null && workflowTaskCount > 0;
   return (
@@ -49,9 +59,7 @@ export function WorkflowDeleteDialog({
         <DialogHeader>
           <DialogTitle>Delete workflow</DialogTitle>
           <DialogDescription>
-            {hasTasks
-              ? `This workflow has ${workflowTaskCount} task${workflowTaskCount === 1 ? "" : "s"}. Choose where to migrate them, or delete the workflow and archive the tasks.`
-              : "This will permanently delete the workflow and all its steps."}
+            {workflowDeleteDescription(workflowTaskCount, hasUnsavedChanges)}
           </DialogDescription>
         </DialogHeader>
         {hasTasks && otherWorkflows.length > 0 && (
@@ -127,42 +135,61 @@ export function WorkflowDeleteDialog({
 type StepDeleteDialogProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  stepName: string;
   stepTaskCount: number | null;
   stepsForMigration: WorkflowStep[];
   targetStep: string;
   setTargetStep: (id: string) => void;
   loading: boolean;
+  pending: boolean;
   onMigrateAndDelete: () => Promise<void>;
   onDeleteAndTasks: () => Promise<void>;
+  hasUnsavedChanges: boolean;
 };
 
+function stepDeleteDescription(
+  stepName: string,
+  stepTaskCount: number | null,
+  hasMigrationTarget: boolean,
+) {
+  if (!stepTaskCount) return `This will permanently delete the ${stepName} workflow step.`;
+  const taskLabel = `${stepTaskCount} task${stepTaskCount === 1 ? "" : "s"}`;
+  if (hasMigrationTarget) {
+    return `${stepName} has ${taskLabel}. Choose where to migrate them, or delete the step and its tasks.`;
+  }
+  return `Deleting ${stepName} will also affect its ${taskLabel}.`;
+}
+
 export function StepDeleteDialog({
   open,
   onOpenChange,
+  stepName,
   stepTaskCount,
   stepsForMigration,
   targetStep,
   setTargetStep,
   loading,
+  pending,
   onMigrateAndDelete,
   onDeleteAndTasks,
+  hasUnsavedChanges,
 }: StepDeleteDialogProps) {
+  const hasTasks = stepTaskCount !== null && stepTaskCount > 0;
+  const description = stepDeleteDescription(stepName, stepTaskCount, stepsForMigration.length > 0);
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Delete step</DialogTitle>
           <DialogDescription>
-            This step has {stepTaskCount} task{stepTaskCount === 1 ? "" : "s"}.
-            {stepsForMigration.length > 0
-              ? " Choose where to migrate them, or delete the step and its tasks."
-              : " Deleting this step will affect these tasks."}
+            {description}
+            {hasUnsavedChanges ? " Unsaved step changes will be discarded." : ""}
           </DialogDescription>
         </DialogHeader>
         {stepsForMigration.length > 0 && (
           <div className="space-y-2 py-2">
             <Label>Target Step</Label>
-            <Select value={targetStep} onValueChange={setTargetStep}>
+            <Select value={targetStep} onValueChange={setTargetStep} disabled={loading || pending}>
               <SelectTrigger>
                 <SelectValue placeholder="Select step" />
               </SelectTrigger>
@@ -176,6 +203,11 @@ export function StepDeleteDialog({
             </Select>
           </div>
         )}
+        {pending && !loading && (
+          <p className="text-sm text-muted-foreground" role="status">
+            Waiting for the failed change to be retried.
+          </p>
+        )}
         <DialogFooter>
           <Button
             type="button"
@@ -189,7 +221,7 @@ export function StepDeleteDialog({
             <Button
               type="button"
               onClick={onMigrateAndDelete}
-              disabled={!targetStep || loading}
+              disabled={!targetStep || loading || pending}
               className="cursor-pointer"
             >
               {loading ? "Migrating..." : "Migrate & Delete Step"}
@@ -199,10 +231,10 @@ export function StepDeleteDialog({
             type="button"
             variant="destructive"
             onClick={onDeleteAndTasks}
-            disabled={loading}
+            disabled={loading || pending}
             className="cursor-pointer"
           >
-            Delete Step & Tasks
+            {hasTasks ? "Delete Step & Tasks" : "Delete Step"}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/apps/web/components/settings/workflow-card-header-actions.test.tsx b/apps/web/components/settings/workflow-card-header-actions.test.tsx
new file mode 100644
index 0000000000..ebb5f3ea0d
--- /dev/null
+++ b/apps/web/components/settings/workflow-card-header-actions.test.tsx
@@ -0,0 +1,36 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { TooltipProvider } from "@kandev/ui/tooltip";
+import { describe, expect, it, vi } from "vitest";
+import { WorkflowCardHeaderActions } from "./workflow-card-header-actions";
+
+describe("WorkflowCardHeaderActions", () => {
+  it("surfaces failures when deleting a temporary workflow", async () => {
+    const failure = new Error("cleanup failed");
+    const toast = vi.fn();
+
+    render(
+      <TooltipProvider>
+        <WorkflowCardHeaderActions
+          workflowId="temp-workflow-1"
+          setExportYaml={vi.fn()}
+          setExportOpen={vi.fn()}
+          toast={toast}
+          onDeleteClick={vi.fn().mockRejectedValue(failure)}
+          deleteDisabled={false}
+          exportDisabled
+          readOnly={false}
+        />
+      </TooltipProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Delete Workflow" }));
+
+    await waitFor(() =>
+      expect(toast).toHaveBeenCalledWith({
+        title: "Failed to delete workflow",
+        description: "cleanup failed",
+        variant: "error",
+      }),
+    );
+  });
+});
diff --git a/apps/web/components/settings/workflow-card-header-actions.tsx b/apps/web/components/settings/workflow-card-header-actions.tsx
new file mode 100644
index 0000000000..cd3c22acd6
--- /dev/null
+++ b/apps/web/components/settings/workflow-card-header-actions.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { IconDownload, IconTrash } from "@tabler/icons-react";
+import { Button } from "@kandev/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@kandev/ui/tooltip";
+import { useToast } from "@/components/toast-provider";
+import { handleExportWorkflow } from "./workflow-card-actions";
+
+type WorkflowCardHeaderActionsProps = {
+  workflowId: string;
+  setExportYaml: (json: string) => void;
+  setExportOpen: (open: boolean) => void;
+  toast: ReturnType<typeof useToast>["toast"];
+  onDeleteClick: () => Promise<void>;
+  deleteDisabled: boolean;
+  exportDisabled: boolean;
+  readOnly: boolean;
+};
+
+const SYNCED_READ_ONLY_REASON =
+  "Managed by workflow sync — edit or remove it in the synced repository";
+
+export function WorkflowCardHeaderActions({
+  workflowId,
+  setExportYaml,
+  setExportOpen,
+  toast,
+  onDeleteClick,
+  deleteDisabled,
+  exportDisabled,
+  readOnly,
+}: WorkflowCardHeaderActionsProps) {
+  return (
+    <div className="flex flex-wrap justify-end gap-2">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            tabIndex={exportDisabled ? 0 : undefined}
+            aria-label={exportDisabled ? "Save the workflow before exporting." : undefined}
+          >
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() =>
+                handleExportWorkflow({ workflowId, setExportYaml, setExportOpen, toast })
+              }
+              className="cursor-pointer"
+              disabled={exportDisabled}
+            >
+              <IconDownload className="h-4 w-4 mr-2" />
+              Export
+            </Button>
+          </span>
+        </TooltipTrigger>
+        {exportDisabled && <TooltipContent>Save the workflow before exporting.</TooltipContent>}
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span tabIndex={readOnly ? 0 : undefined} className="inline-flex">
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={() => {
+                void onDeleteClick().catch((error) => {
+                  toast({
+                    title: "Failed to delete workflow",
+                    description: error instanceof Error ? error.message : "Request failed",
+                    variant: "error",
+                  });
+                });
+              }}
+              disabled={deleteDisabled}
+              className="cursor-pointer"
+              data-testid="delete-workflow-button"
+            >
+              <IconTrash className="h-4 w-4 mr-2" />
+              Delete Workflow
+            </Button>
+          </span>
+        </TooltipTrigger>
+        {readOnly && <TooltipContent>{SYNCED_READ_ONLY_REASON}</TooltipContent>}
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/apps/web/components/settings/workflow-card.tsx b/apps/web/components/settings/workflow-card.tsx
index 04f37ea80d..3595e3e3b0 100644
--- a/apps/web/components/settings/workflow-card.tsx
+++ b/apps/web/components/settings/workflow-card.tsx
@@ -1,21 +1,16 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { IconDownload, IconTrash } from "@tabler/icons-react";
-import { Card, CardContent } from "@kandev/ui/card";
-import { Button } from "@kandev/ui/button";
-import { Badge } from "@kandev/ui/badge";
+import { CardContent } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
 import { Label } from "@kandev/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@kandev/ui/tooltip";
 import type { Workflow, WorkflowStep } from "@/lib/types/http";
 import type { WorkflowReplayCycleDiagnostic } from "@/lib/workflows/replay-cycle-analysis";
 import { useHealthyAgentProfiles } from "@/hooks/domains/settings/use-healthy-agent-profiles";
 import { useRequest } from "@/lib/http/use-request";
 import { useToast } from "@/components/toast-provider";
 import { WorkflowExportDialog } from "@/components/settings/workflow-export-dialog";
-import { UnsavedChangesBadge, UnsavedSaveButton } from "@/components/settings/unsaved-indicator";
 import { WorkflowPipelineEditor } from "@/components/settings/workflow-pipeline-editor";
 import { listWorkflowStepsAction } from "@/app/actions/workspaces";
 import { HelpTip } from "./workflow-pipeline-editor-helpers";
@@ -24,17 +19,23 @@ import {
   useWorkflowStepActions,
   useWorkflowDeleteHandlers,
   useStepDeleteHandlers,
-  useWorkflowSaveActions,
-  handleExportWorkflow,
 } from "./workflow-card-actions";
+import { WorkflowCardHeaderActions } from "./workflow-card-header-actions";
+import { SettingsCard } from "./settings-card";
+import { isWorkflowFieldDirty } from "./workflow-dirty-state";
+import { WorkflowSyncedBadge } from "./workflow-synced-badge";
 import { useWorkflowMutationGuard } from "./workflow-mutation-guard";
 import { WorkflowCycleGuardDialog } from "./workflow-cycle-diagnostic";
+import { useWorkflowDraftContributor } from "./use-workflow-draft-contributor";
+
+const TEMP_WORKFLOW_PREFIX = "temp-workflow-";
 
 type WorkflowCardProps = {
   workflow: Workflow;
+  savedWorkflow?: Workflow;
   isWorkflowDirty: boolean;
+  isOrderDirty?: boolean;
   initialWorkflowSteps?: WorkflowStep[];
-  templateStepCount?: number;
   otherWorkflows?: Workflow[];
   onUpdateWorkflow: (updates: {
     name?: string;
@@ -42,31 +43,37 @@ type WorkflowCardProps = {
     agent_profile_id?: string;
   }) => void;
   onDeleteWorkflow: () => Promise<unknown>;
-  onSaveWorkflow: () => Promise<unknown>;
-  onWorkflowCreated?: (created: Workflow) => void;
+  onWorkflowSaved: (params: {
+    clientWorkflow: Workflow;
+    submittedWorkflow: Workflow;
+    savedWorkflow: Workflow;
+    currentSteps: WorkflowStep[];
+    savedSteps: WorkflowStep[];
+    finalizeIdentity: boolean;
+  }) => void;
+  onDiscardWorkflow: () => void;
 };
 
 function useWorkflowSteps(
   workflowId: string,
   initialSteps: WorkflowStep[] | undefined,
-  isNewWorkflow: boolean,
   toast: ReturnType<typeof useToast>["toast"],
 ) {
   const [workflowSteps, setWorkflowSteps] = useState<WorkflowStep[]>(initialSteps ?? []);
+  const [savedWorkflowSteps, setSavedWorkflowSteps] = useState<WorkflowStep[]>(initialSteps ?? []);
   const [workflowLoading, setWorkflowLoading] = useState(false);
 
   useEffect(() => {
-    if (isNewWorkflow) {
-      setWorkflowSteps(initialSteps ?? []);
-      setWorkflowLoading(false);
-      return;
-    }
+    if (workflowId.startsWith(TEMP_WORKFLOW_PREFIX)) return;
     let cancelled = false;
     const load = async () => {
       setWorkflowLoading(true);
       try {
         const res = await listWorkflowStepsAction(workflowId);
-        if (!cancelled) setWorkflowSteps(res.steps ?? []);
+        if (!cancelled) {
+          setWorkflowSteps(res.steps ?? []);
+          setSavedWorkflowSteps(res.steps ?? []);
+        }
       } catch {
         if (!cancelled) toast({ title: "Failed to load workflow steps", variant: "error" });
       } finally {
@@ -77,9 +84,26 @@ function useWorkflowSteps(
     return () => {
       cancelled = true;
     };
-  }, [workflowId, initialSteps, isNewWorkflow, toast]);
+  }, [workflowId, initialSteps, toast]);
 
-  return { workflowSteps, setWorkflowSteps, workflowLoading };
+  const refreshWorkflowSteps = async () => {
+    try {
+      const res = await listWorkflowStepsAction(workflowId);
+      setWorkflowSteps(res.steps ?? []);
+      setSavedWorkflowSteps(res.steps ?? []);
+    } catch {
+      /* ignore */
+    }
+  };
+
+  return {
+    workflowSteps,
+    setWorkflowSteps,
+    savedWorkflowSteps,
+    setSavedWorkflowSteps,
+    workflowLoading,
+    refreshWorkflowSteps,
+  };
 }
 
 type WorkflowDeleteState = {
@@ -136,6 +160,8 @@ type StepDeleteState = {
   setTargetStepForMigration: (v: string) => void;
   stepMigrateLoading: boolean;
   setStepMigrateLoading: (v: boolean) => void;
+  stepDeletePending: boolean;
+  setStepDeletePending: (v: boolean) => void;
 };
 
 function useStepDeleteState(): StepDeleteState {
@@ -144,6 +170,7 @@ function useStepDeleteState(): StepDeleteState {
   const [stepTaskCount, setStepTaskCount] = useState<number | null>(null);
   const [targetStepForMigration, setTargetStepForMigration] = useState<string>("");
   const [stepMigrateLoading, setStepMigrateLoading] = useState(false);
+  const [stepDeletePending, setStepDeletePending] = useState(false);
   return {
     stepDeleteOpen,
     setStepDeleteOpen,
@@ -155,87 +182,11 @@ function useStepDeleteState(): StepDeleteState {
     setTargetStepForMigration,
     stepMigrateLoading,
     setStepMigrateLoading,
+    stepDeletePending,
+    setStepDeletePending,
   };
 }
 
-type WorkflowCardActionsProps = {
-  isNewWorkflow: boolean;
-  workflowId: string;
-  setExportYaml: (json: string) => void;
-  setExportOpen: (open: boolean) => void;
-  toast: ReturnType<typeof useToast>["toast"];
-  onDeleteClick: () => Promise<void>;
-  deleteDisabled: boolean;
-  readOnly: boolean;
-};
-
-const SYNCED_READ_ONLY_REASON =
-  "Managed by workflow sync - edit or remove it in the synced repository";
-
-function DeleteWorkflowButton({
-  onDeleteClick,
-  deleteDisabled,
-  readOnly,
-}: Pick<WorkflowCardActionsProps, "onDeleteClick" | "deleteDisabled" | "readOnly">) {
-  const button = (
-    <Button
-      type="button"
-      variant="destructive"
-      onClick={onDeleteClick}
-      disabled={deleteDisabled}
-      className="cursor-pointer"
-      data-testid="delete-workflow-button"
-    >
-      <IconTrash className="h-4 w-4 mr-2" />
-      Delete Workflow
-    </Button>
-  );
-
-  if (!readOnly) return button;
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <span tabIndex={0} className="inline-flex">
-          {button}
-        </span>
-      </TooltipTrigger>
-      <TooltipContent>{SYNCED_READ_ONLY_REASON}</TooltipContent>
-    </Tooltip>
-  );
-}
-
-function WorkflowCardActions({
-  isNewWorkflow,
-  workflowId,
-  setExportYaml,
-  setExportOpen,
-  toast,
-  onDeleteClick,
-  deleteDisabled,
-  readOnly,
-}: WorkflowCardActionsProps) {
-  return (
-    <div className="flex justify-end gap-2">
-      {!isNewWorkflow && (
-        <Button
-          type="button"
-          variant="outline"
-          onClick={() => handleExportWorkflow({ workflowId, setExportYaml, setExportOpen, toast })}
-          className="cursor-pointer"
-        >
-          <IconDownload className="h-4 w-4 mr-2" />
-          Export
-        </Button>
-      )}
-      <DeleteWorkflowButton
-        onDeleteClick={onDeleteClick}
-        deleteDisabled={deleteDisabled}
-        readOnly={readOnly}
-      />
-    </div>
-  );
-}
-
 type WorkflowCardDialogsProps = {
   wfDel: WorkflowDeleteState;
   otherWorkflows: Workflow[];
@@ -248,103 +199,93 @@ type WorkflowCardDialogsProps = {
   setExportOpen: (open: boolean) => void;
   exportYaml: string;
   stepDel: StepDeleteState;
+  stepToDeleteName: string;
   stepsForStepMigration: WorkflowStep[];
   stepDeleteHandlers: {
     handleMigrateAndDeleteStep: () => Promise<void>;
     handleDeleteStepAndTasks: () => Promise<void>;
   };
+  hasUnsavedChanges: boolean;
   mutationGuard: ReturnType<typeof useWorkflowMutationGuard>;
 };
 
 type WorkflowCardBodyProps = {
   workflow: Workflow;
-  readOnly: boolean;
-  isWorkflowDirty: boolean;
+  savedWorkflow?: Workflow;
   onUpdateWorkflow: (updates: {
     name?: string;
     description?: string;
     agent_profile_id?: string;
   }) => void;
-  activeSaveRequest: { isLoading: boolean; status: "idle" | "loading" | "success" | "error" };
-  handleSaveWorkflow: () => Promise<void>;
-  mutationPending: boolean;
   workflowLoading: boolean;
   workflowSteps: WorkflowStep[];
+  savedWorkflowSteps: WorkflowStep[];
   diagnostics: WorkflowReplayCycleDiagnostic[];
+  mutationPending: boolean;
   stepActions: {
     handleUpdateWorkflowStep: (id: string, updates: Partial<WorkflowStep>) => Promise<void>;
     handleAddWorkflowStep: () => Promise<void>;
     handleRemoveWorkflowStep: (id: string) => Promise<void>;
     handleReorderWorkflowSteps: (steps: WorkflowStep[]) => Promise<void>;
   };
+  readOnly: boolean;
 };
 
-function SyncedBadge({ sourcePath }: { sourcePath?: string }) {
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Badge
-          variant="outline"
-          tabIndex={0}
-          className="text-xs cursor-default"
-          data-testid="workflow-synced-badge"
-        >
-          Synced
-        </Badge>
-      </TooltipTrigger>
-      <TooltipContent>
-        Read-only - managed by workflow sync from {sourcePath || "a configured repository"}. Edit or
-        remove it in the synced repository.
-      </TooltipContent>
-    </Tooltip>
-  );
-}
-
 function WorkflowCardBody({
   workflow,
-  readOnly,
-  isWorkflowDirty,
+  savedWorkflow,
   onUpdateWorkflow,
-  activeSaveRequest,
-  handleSaveWorkflow,
-  mutationPending,
   workflowLoading,
   workflowSteps,
+  savedWorkflowSteps,
   diagnostics,
+  mutationPending,
   stepActions,
+  readOnly,
 }: WorkflowCardBodyProps) {
   const healthyProfiles = useHealthyAgentProfiles(workflow.agent_profile_id);
 
   return (
     <>
-      <div className="flex items-end gap-2">
+      <Label>Workflow details</Label>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:gap-2">
         <div className="flex-1 space-y-1.5">
           <Label className="flex items-center gap-2">
             <span>Workflow Name</span>
-            {isWorkflowDirty && <UnsavedChangesBadge />}
-            {readOnly && <SyncedBadge sourcePath={workflow.source_path} />}
+            {readOnly && <WorkflowSyncedBadge sourcePath={workflow.source_path} />}
+            {readOnly && (
+              <span className="text-xs text-muted-foreground">
+                Read-only — managed by workflow sync
+              </span>
+            )}
           </Label>
           <Input
             value={workflow.name}
             onChange={(e) => onUpdateWorkflow({ name: e.target.value })}
             disabled={readOnly}
+            data-settings-dirty={isWorkflowFieldDirty(workflow, savedWorkflow, "name")}
           />
         </div>
-        <div className="w-[240px] shrink-0 space-y-1.5">
+        <div className="w-full space-y-1.5 sm:w-[240px] sm:shrink-0">
           <Label className="flex items-center gap-1">
             <span>Agent Profile</span>
             <HelpTip text="Default agent profile for tasks in this workflow. When set, the agent selector is locked in the task creation dialog." />
           </Label>
           <Select
             value={workflow.agent_profile_id || "none"}
-            disabled={readOnly}
             onValueChange={(value) =>
               onUpdateWorkflow({ agent_profile_id: value === "none" ? "" : value })
             }
+            disabled={readOnly}
           >
             <SelectTrigger
               className="w-full cursor-pointer"
               data-testid="workflow-agent-profile-select"
+              data-settings-dirty={isWorkflowFieldDirty(
+                workflow,
+                savedWorkflow,
+                "agent_profile_id",
+              )}
             >
               <SelectValue placeholder="None (use task default)" />
             </SelectTrigger>
@@ -360,13 +301,6 @@ function WorkflowCardBody({
             </SelectContent>
           </Select>
         </div>
-        <UnsavedSaveButton
-          isDirty={isWorkflowDirty}
-          isLoading={activeSaveRequest.isLoading}
-          status={activeSaveRequest.status}
-          onClick={handleSaveWorkflow}
-          disabled={mutationPending || readOnly}
-        />
       </div>
       <div className="space-y-2">
         <Label>Workflow Steps</Label>
@@ -375,6 +309,7 @@ function WorkflowCardBody({
         ) : (
           <WorkflowPipelineEditor
             steps={workflowSteps}
+            savedSteps={savedWorkflowSteps}
             diagnostics={diagnostics}
             onUpdateStep={stepActions.handleUpdateWorkflowStep}
             onAddStep={stepActions.handleAddWorkflowStep}
@@ -397,8 +332,10 @@ function WorkflowCardDialogs({
   setExportOpen,
   exportYaml,
   stepDel,
+  stepToDeleteName,
   stepsForStepMigration,
   stepDeleteHandlers,
+  hasUnsavedChanges,
   mutationGuard,
 }: WorkflowCardDialogsProps) {
   return (
@@ -417,6 +354,7 @@ function WorkflowCardDialogs({
         deleteLoading={deleteWorkflowLoading}
         onDelete={wfDeleteHandlers.handleDeleteWorkflow}
         onMigrateAndDelete={wfDeleteHandlers.handleMigrateAndDeleteWorkflow}
+        hasUnsavedChanges={hasUnsavedChanges}
       />
       <WorkflowExportDialog
         open={exportOpen}
@@ -427,13 +365,16 @@ function WorkflowCardDialogs({
       <StepDeleteDialog
         open={stepDel.stepDeleteOpen}
         onOpenChange={stepDel.setStepDeleteOpen}
+        stepName={stepToDeleteName}
         stepTaskCount={stepDel.stepTaskCount}
         stepsForMigration={stepsForStepMigration}
         targetStep={stepDel.targetStepForMigration}
         setTargetStep={stepDel.setTargetStepForMigration}
         loading={stepDel.stepMigrateLoading}
+        pending={stepDel.stepDeletePending}
         onMigrateAndDelete={stepDeleteHandlers.handleMigrateAndDeleteStep}
         onDeleteAndTasks={stepDeleteHandlers.handleDeleteStepAndTasks}
+        hasUnsavedChanges={hasUnsavedChanges}
       />
       <WorkflowCycleGuardDialog
         proposal={mutationGuard.proposal}
@@ -445,22 +386,27 @@ function WorkflowCardDialogs({
 }
 
 function useWorkflowCardState(props: WorkflowCardProps) {
-  const { workflow, initialWorkflowSteps, templateStepCount = 0, otherWorkflows = [] } = props;
-  const { onDeleteWorkflow, onSaveWorkflow, onWorkflowCreated } = props;
+  const { workflow, initialWorkflowSteps, otherWorkflows = [] } = props;
+  const { onDeleteWorkflow } = props;
   const { toast } = useToast();
   const [exportOpen, setExportOpen] = useState(false);
   const [exportYaml, setExportYaml] = useState("");
   const wfDel = useWorkflowDeleteState();
   const stepDel = useStepDeleteState();
-  const isNewWorkflow = workflow.id.startsWith("temp-");
+  // Workflows synced from a configured GitHub repo are read-only: the
+  // backend rejects definition mutations with a 409, so the UI disables the
+  // matching affordances (name/agent-profile/steps/delete) up front.
   const readOnly = workflow.source === "github";
   const deleteWorkflowRequest = useRequest(onDeleteWorkflow);
-  const { workflowSteps, setWorkflowSteps, workflowLoading } = useWorkflowSteps(
-    workflow.id,
-    initialWorkflowSteps,
-    isNewWorkflow,
-    toast,
-  );
+  const {
+    workflowSteps,
+    setWorkflowSteps,
+    savedWorkflowSteps,
+    setSavedWorkflowSteps,
+    workflowLoading,
+    refreshWorkflowSteps,
+  } = useWorkflowSteps(workflow.id, initialWorkflowSteps, toast);
+  const isNewWorkflow = workflow.id.startsWith(TEMP_WORKFLOW_PREFIX);
   const mutationGuard = useWorkflowMutationGuard(workflowSteps);
   const stepActions = useWorkflowStepActions({
     workflow,
@@ -468,6 +414,7 @@ function useWorkflowCardState(props: WorkflowCardProps) {
     readOnly,
     workflowSteps,
     setWorkflowSteps,
+    refreshWorkflowSteps,
     setStepToDelete: stepDel.setStepToDelete,
     setStepTaskCount: stepDel.setStepTaskCount,
     setTargetStepForMigration: stepDel.setTargetStepForMigration,
@@ -475,20 +422,21 @@ function useWorkflowCardState(props: WorkflowCardProps) {
     toast,
     mutationGuard,
   });
-  const { activeSaveRequest, handleSaveWorkflow } = useWorkflowSaveActions({
+  const workflowDraft = useWorkflowDraftContributor({
     workflow,
-    isNewWorkflow,
-    readOnly,
+    isWorkflowDirty: props.isWorkflowDirty,
     workflowSteps,
-    templateStepCount,
-    onSaveWorkflow,
-    onWorkflowCreated,
-    toast,
+    savedWorkflowSteps,
+    setWorkflowSteps,
+    setSavedWorkflowSteps,
     mutationGuard,
+    toast,
+    onWorkflowSaved: props.onWorkflowSaved,
+    onDiscardWorkflow: props.onDiscardWorkflow,
+    onDeleteWorkflow: props.onDeleteWorkflow,
   });
   const wfDeleteHandlers = useWorkflowDeleteHandlers({
     workflow,
-    isNewWorkflow,
     readOnly,
     otherWorkflows,
     wfDel,
@@ -498,8 +446,8 @@ function useWorkflowCardState(props: WorkflowCardProps) {
   const stepDeleteHandlers = useStepDeleteHandlers({
     workflow,
     stepDel,
-    setWorkflowSteps,
-    toast,
+    refreshWorkflowSteps,
+    runMutation: stepActions.runMutation,
   });
   const stepsForStepMigration = stepDel.stepToDelete
     ? workflowSteps.filter((s) => s.id !== stepDel.stepToDelete)
@@ -512,59 +460,62 @@ function useWorkflowCardState(props: WorkflowCardProps) {
     setExportYaml,
     wfDel,
     stepDel,
-    isNewWorkflow,
     readOnly,
+    mutationGuard,
     deleteWorkflowRequest,
     workflowSteps,
+    savedWorkflowSteps,
     workflowLoading,
-    mutationGuard,
     stepActions,
-    activeSaveRequest,
-    handleSaveWorkflow,
     wfDeleteHandlers,
     stepDeleteHandlers,
     stepsForStepMigration,
+    ...workflowDraft,
   };
 }
 
 export function WorkflowCard(props: WorkflowCardProps) {
-  const { workflow, isWorkflowDirty, otherWorkflows = [], onUpdateWorkflow } = props;
+  const { workflow, savedWorkflow, otherWorkflows = [], onUpdateWorkflow } = props;
   const s = useWorkflowCardState(props);
+  const visibleSavedSteps = savedWorkflow ? s.savedWorkflowSteps : [];
 
   return (
-    <Card
+    <SettingsCard
+      isDirty={s.hasUnsavedChanges || props.isOrderDirty}
       data-testid={`workflow-card-${workflow.id}`}
-      className={isWorkflowDirty ? "ring-yellow-500/50" : undefined}
     >
       <CardContent className="pt-6">
         <div className="space-y-4">
           <WorkflowCardBody
             workflow={workflow}
-            readOnly={s.readOnly}
-            isWorkflowDirty={isWorkflowDirty}
+            savedWorkflow={savedWorkflow}
             onUpdateWorkflow={onUpdateWorkflow}
-            activeSaveRequest={s.activeSaveRequest}
-            handleSaveWorkflow={s.handleSaveWorkflow}
-            mutationPending={s.mutationGuard.isMutationPending}
             workflowLoading={s.workflowLoading}
             workflowSteps={s.workflowSteps}
+            savedWorkflowSteps={visibleSavedSteps}
             diagnostics={s.mutationGuard.diagnostics}
+            mutationPending={s.mutationGuard.isMutationPending}
             stepActions={s.stepActions}
+            readOnly={s.readOnly}
           />
-          <WorkflowCardActions
-            isNewWorkflow={s.isNewWorkflow}
+          <WorkflowCardHeaderActions
             workflowId={workflow.id}
             setExportYaml={s.setExportYaml}
             setExportOpen={s.setExportOpen}
             toast={s.toast}
-            onDeleteClick={s.wfDeleteHandlers.handleDeleteWorkflowClick}
+            onDeleteClick={async () => {
+              if (workflow.id.startsWith(TEMP_WORKFLOW_PREFIX)) await s.removeDraftWorkflow();
+              else await s.wfDeleteHandlers.handleDeleteWorkflowClick();
+            }}
             deleteDisabled={
               s.mutationGuard.isMutationPending ||
               s.deleteWorkflowRequest.isLoading ||
               s.wfDel.workflowDeleteLoading ||
+              s.isRemovingDraft ||
               s.readOnly
             }
             readOnly={s.readOnly}
+            exportDisabled={workflow.id.startsWith(TEMP_WORKFLOW_PREFIX)}
           />
         </div>
       </CardContent>
@@ -577,10 +528,14 @@ export function WorkflowCard(props: WorkflowCardProps) {
         setExportOpen={s.setExportOpen}
         exportYaml={s.exportYaml}
         stepDel={s.stepDel}
+        stepToDeleteName={
+          s.workflowSteps.find((step) => step.id === s.stepDel.stepToDelete)?.name ?? "selected"
+        }
         stepsForStepMigration={s.stepsForStepMigration}
         stepDeleteHandlers={s.stepDeleteHandlers}
+        hasUnsavedChanges={s.hasUnsavedChanges}
         mutationGuard={s.mutationGuard}
       />
-    </Card>
+    </SettingsCard>
   );
 }
diff --git a/apps/web/components/settings/workflow-dirty-state.test.ts b/apps/web/components/settings/workflow-dirty-state.test.ts
new file mode 100644
index 0000000000..e7acd49ec6
--- /dev/null
+++ b/apps/web/components/settings/workflow-dirty-state.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+import type { Workflow, WorkflowStep } from "@/lib/types/http";
+import {
+  isWorkflowFieldDirty,
+  isWorkflowStepDirty,
+  isWorkflowStepValueDirty,
+} from "./workflow-dirty-state";
+
+const workflow = {
+  id: "workflow-1",
+  workspace_id: "workspace-1",
+  name: "Workflow",
+  description: "",
+  created_at: "",
+  updated_at: "",
+} as Workflow;
+
+const step = {
+  id: "step-1",
+  workflow_id: workflow.id,
+  name: "Todo",
+  color: "bg-slate-500",
+  position: 0,
+  allow_manual_move: true,
+  created_at: "",
+  updated_at: "",
+} as WorkflowStep;
+
+describe("workflow dirty state", () => {
+  it("marks fields on a new workflow dirty", () => {
+    expect(isWorkflowFieldDirty(workflow, undefined, "name")).toBe(true);
+  });
+
+  it("marks only a changed workflow field dirty", () => {
+    const draft = { ...workflow, name: "Renamed" };
+
+    expect(isWorkflowFieldDirty(draft, workflow, "name")).toBe(true);
+    expect(isWorkflowFieldDirty(draft, workflow, "agent_profile_id")).toBe(false);
+  });
+
+  it("marks new and changed steps dirty", () => {
+    expect(isWorkflowStepDirty(step, undefined)).toBe(true);
+    expect(isWorkflowStepDirty({ ...step, name: "Doing" }, step)).toBe(true);
+    expect(isWorkflowStepDirty(step, step)).toBe(false);
+  });
+
+  it("compares only the selected step value", () => {
+    const draft = { ...step, name: "Doing", wip_limit: 2 };
+
+    expect(isWorkflowStepValueDirty(draft, step, (item) => item.name)).toBe(true);
+    expect(isWorkflowStepValueDirty(draft, step, (item) => item.color)).toBe(false);
+  });
+});
diff --git a/apps/web/components/settings/workflow-dirty-state.ts b/apps/web/components/settings/workflow-dirty-state.ts
new file mode 100644
index 0000000000..12342c6ac7
--- /dev/null
+++ b/apps/web/components/settings/workflow-dirty-state.ts
@@ -0,0 +1,28 @@
+import type { Workflow, WorkflowStep } from "@/lib/types/http";
+import { areStepDraftsEqual } from "./workflow-card-actions";
+
+function valuesEqual(left: unknown, right: unknown): boolean {
+  if (Object.is(left, right)) return true;
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+
+export function isWorkflowFieldDirty(
+  draft: Workflow,
+  saved: Workflow | undefined,
+  field: "name" | "description" | "agent_profile_id",
+): boolean {
+  if (!saved) return true;
+  return !valuesEqual(draft[field] ?? "", saved[field] ?? "");
+}
+
+export function isWorkflowStepDirty(draft: WorkflowStep, saved: WorkflowStep | undefined): boolean {
+  return !saved || !areStepDraftsEqual(draft, saved);
+}
+
+export function isWorkflowStepValueDirty(
+  draft: WorkflowStep,
+  saved: WorkflowStep | undefined,
+  select: (step: WorkflowStep) => unknown,
+): boolean {
+  return !saved || !valuesEqual(select(draft), select(saved));
+}
diff --git a/apps/web/components/settings/workflow-pipeline-editor-helpers.tsx b/apps/web/components/settings/workflow-pipeline-editor-helpers.tsx
index 17233ea7ef..594cd18ce0 100644
--- a/apps/web/components/settings/workflow-pipeline-editor-helpers.tsx
+++ b/apps/web/components/settings/workflow-pipeline-editor-helpers.tsx
@@ -3,6 +3,16 @@
 import { IconInfoCircle } from "@tabler/icons-react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@kandev/ui/tooltip";
 import type { WorkflowStep } from "@/lib/types/http";
+import type { ScriptPlaceholder } from "@/components/settings/profile-edit/script-editor-completions";
+
+export const STEP_PROMPT_PLACEHOLDERS: ScriptPlaceholder[] = [
+  {
+    key: "task_prompt",
+    description: "The original task description provided by the user",
+    example: "Implement user authentication with OAuth2",
+    executor_types: [],
+  },
+];
 
 export function HelpTip({
   text,
diff --git a/apps/web/components/settings/workflow-pipeline-editor-panels.tsx b/apps/web/components/settings/workflow-pipeline-editor-panels.tsx
index 6def2c1b39..4b297bcb7e 100644
--- a/apps/web/components/settings/workflow-pipeline-editor-panels.tsx
+++ b/apps/web/components/settings/workflow-pipeline-editor-panels.tsx
@@ -15,10 +15,10 @@ import {
   ScriptEditor,
   computeEditorHeight,
 } from "@/components/settings/profile-edit/script-editor";
-import type { ScriptPlaceholder } from "@/components/settings/profile-edit/script-editor-completions";
 import {
   HelpTip,
   STEP_COLORS,
+  STEP_PROMPT_PLACEHOLDERS,
   PROMPT_TEMPLATES,
   hasOnEnterAction,
   hasOnExitAction,
@@ -30,31 +30,25 @@ import {
   ChildrenCompletedSelect,
 } from "./workflow-pipeline-editor-step-actions";
 import { StepWipControls } from "./workflow-pipeline-editor-wip-controls";
-
-const STEP_PROMPT_PLACEHOLDERS: ScriptPlaceholder[] = [
-  {
-    key: "task_prompt",
-    description: "The original task description provided by the user",
-    example: "Implement user authentication with OAuth2",
-    executor_types: [],
-  },
-];
+import { isWorkflowStepDirty, isWorkflowStepValueDirty } from "./workflow-dirty-state";
 
 // --- StepAgentProfileSelect ---
 
 function StepAgentProfileSelect({
   step,
+  savedStep,
   onUpdate,
   readOnly,
 }: {
   step: WorkflowStep;
+  savedStep?: WorkflowStep;
   onUpdate: (updates: Partial<WorkflowStep>) => void;
   readOnly: boolean;
 }) {
   const healthyProfiles = useHealthyAgentProfiles(step.agent_profile_id);
 
   return (
-    <div className="flex items-center gap-1.5">
+    <div className="flex w-full min-w-0 items-center gap-1.5 sm:w-auto">
       <Select
         value={step.agent_profile_id || "none"}
         onValueChange={(value) => {
@@ -64,8 +58,13 @@ function StepAgentProfileSelect({
         disabled={readOnly}
       >
         <SelectTrigger
-          className="w-[220px] h-8 cursor-pointer"
+          className="h-8 w-full min-w-0 cursor-pointer sm:w-[220px]"
           data-testid="step-agent-profile-select"
+          data-settings-dirty={isWorkflowStepValueDirty(
+            step,
+            savedStep,
+            (item) => item.agent_profile_id ?? "",
+          )}
         >
           <IconRobot className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
           <SelectValue placeholder="No profile override" />
@@ -90,6 +89,7 @@ function StepAgentProfileSelect({
 
 type StepConfigHeaderProps = {
   step: WorkflowStep;
+  savedStep?: WorkflowStep;
   localName: string;
   onLocalNameChange: (name: string) => void;
   onUpdate: (updates: Partial<WorkflowStep>) => void;
@@ -100,6 +100,7 @@ type StepConfigHeaderProps = {
 
 function StepConfigHeader({
   step,
+  savedStep,
   localName,
   onLocalNameChange,
   onUpdate,
@@ -108,8 +109,8 @@ function StepConfigHeader({
   debouncedUpdateName,
 }: StepConfigHeaderProps) {
   return (
-    <div className="flex items-center justify-between px-4 py-3 border-b border-border">
-      <div className="flex items-center gap-3 flex-1 min-w-0">
+    <div className="flex flex-col gap-3 border-b border-border px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex min-w-0 flex-1 flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
         <Input
           id={`${step.id}-name`}
           value={localName}
@@ -120,7 +121,8 @@ function StepConfigHeader({
           }}
           placeholder="Step name"
           disabled={readOnly}
-          className="max-w-[240px] h-8"
+          className="h-8 w-full sm:max-w-[240px]"
+          data-settings-dirty={!savedStep || localName !== savedStep.name}
         />
         <Select
           value={step.color}
@@ -130,7 +132,10 @@ function StepConfigHeader({
           }}
           disabled={readOnly}
         >
-          <SelectTrigger className="w-[120px] h-8">
+          <SelectTrigger
+            className="h-8 w-full sm:w-[120px]"
+            data-settings-dirty={isWorkflowStepValueDirty(step, savedStep, (item) => item.color)}
+          >
             <SelectValue placeholder="Color" />
           </SelectTrigger>
           <SelectContent position="popper" side="bottom" align="start">
@@ -144,7 +149,12 @@ function StepConfigHeader({
             ))}
           </SelectContent>
         </Select>
-        <StepAgentProfileSelect step={step} onUpdate={onUpdate} readOnly={readOnly} />
+        <StepAgentProfileSelect
+          step={step}
+          savedStep={savedStep}
+          onUpdate={onUpdate}
+          readOnly={readOnly}
+        />
       </div>
       <Button
         type="button"
@@ -152,7 +162,7 @@ function StepConfigHeader({
         size="sm"
         onClick={onRemove}
         disabled={readOnly}
-        className="text-destructive hover:text-destructive h-8"
+        className="h-8 self-end cursor-pointer text-destructive hover:text-destructive sm:self-auto"
       >
         <IconTrash className="h-3.5 w-3.5 mr-1" />
         Delete
@@ -165,13 +175,19 @@ function StepConfigHeader({
 
 type StepAutoArchiveRowProps = {
   step: WorkflowStep;
+  savedStep?: WorkflowStep;
   onUpdate: (updates: Partial<WorkflowStep>) => void;
   readOnly: boolean;
 };
 
-function StepAutoArchiveRow({ step, onUpdate, readOnly }: StepAutoArchiveRowProps) {
+function StepAutoArchiveRow({ step, savedStep, onUpdate, readOnly }: StepAutoArchiveRowProps) {
+  const isDirty = isWorkflowStepValueDirty(
+    step,
+    savedStep,
+    (item) => item.auto_archive_after_hours ?? 0,
+  );
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex flex-wrap items-center gap-2">
       <Checkbox
         id={`${step.id}-auto-archive`}
         checked={(step.auto_archive_after_hours ?? 0) > 0}
@@ -180,6 +196,7 @@ function StepAutoArchiveRow({ step, onUpdate, readOnly }: StepAutoArchiveRowProp
           onUpdate({ auto_archive_after_hours: checked ? 24 : 0 });
         }}
         disabled={readOnly}
+        data-settings-dirty={isDirty}
       />
       <Label htmlFor={`${step.id}-auto-archive`} className="text-sm">
         Auto-archive
@@ -200,6 +217,7 @@ function StepAutoArchiveRow({ step, onUpdate, readOnly }: StepAutoArchiveRowProp
               onUpdate({ auto_archive_after_hours: isNaN(val) || val < 1 ? 1 : val });
             }}
             disabled={readOnly}
+            data-settings-dirty={isDirty}
           />
           <span className="text-sm text-muted-foreground">hours</span>
         </>
@@ -217,6 +235,7 @@ type StepCheckboxRowProps = {
   disabled: boolean;
   label: string;
   helpText: string;
+  isDirty: boolean;
 };
 
 function StepCheckboxRow({
@@ -226,6 +245,7 @@ function StepCheckboxRow({
   disabled,
   label,
   helpText,
+  isDirty,
 }: StepCheckboxRowProps) {
   return (
     <div className="flex items-center gap-2">
@@ -234,6 +254,7 @@ function StepCheckboxRow({
         checked={checked}
         onCheckedChange={(v) => onCheckedChange(v === true)}
         disabled={disabled}
+        data-settings-dirty={isDirty}
       />
       <Label htmlFor={id} className="text-sm">
         {label}
@@ -247,6 +268,7 @@ function StepCheckboxRow({
 
 type StepBehaviorSectionProps = {
   step: WorkflowStep;
+  savedStep?: WorkflowStep;
   steps: WorkflowStep[];
   onUpdate: (updates: Partial<WorkflowStep>) => void;
   toggleOnEnterAction: (type: string) => void;
@@ -255,6 +277,7 @@ type StepBehaviorSectionProps = {
 
 function StepBehaviorSection({
   step,
+  savedStep,
   steps,
   onUpdate,
   toggleOnEnterAction,
@@ -270,6 +293,7 @@ function StepBehaviorSection({
           disabled={readOnly}
           label="Start step"
           helpText="New tasks start in this step. Only one step per workflow can be the start step."
+          isDirty={isWorkflowStepValueDirty(step, savedStep, (item) => item.is_start_step ?? false)}
         />
         <StepCheckboxRow
           id={`${step.id}-auto-start`}
@@ -278,6 +302,9 @@ function StepBehaviorSection({
           disabled={readOnly}
           label="Auto-start agent"
           helpText="Automatically start the agent when a task enters this step."
+          isDirty={isWorkflowStepValueDirty(step, savedStep, (item) =>
+            hasOnEnterAction(item, "auto_start_agent"),
+          )}
         />
         <StepCheckboxRow
           id={`${step.id}-plan-mode`}
@@ -286,6 +313,9 @@ function StepBehaviorSection({
           disabled={readOnly}
           label="Plan mode"
           helpText="Agent proposes a plan instead of making changes directly."
+          isDirty={isWorkflowStepValueDirty(step, savedStep, (item) =>
+            hasOnEnterAction(item, "enable_plan_mode"),
+          )}
         />
         <StepCheckboxRow
           id={`${step.id}-reset-context`}
@@ -298,6 +328,9 @@ function StepBehaviorSection({
               ? "Not needed — switching agent profiles already creates a new session with fresh context."
               : "Restart the agent with a fresh conversation context when entering this step. Useful for review steps that need an unbiased perspective."
           }
+          isDirty={isWorkflowStepValueDirty(step, savedStep, (item) =>
+            hasOnEnterAction(item, "reset_agent_context"),
+          )}
         />
         <StepCheckboxRow
           id={`${step.id}-manual-move`}
@@ -306,6 +339,11 @@ function StepBehaviorSection({
           disabled={readOnly}
           label="Allow manual move"
           helpText="Allow dragging tasks into this step on the board."
+          isDirty={isWorkflowStepValueDirty(
+            step,
+            savedStep,
+            (item) => item.allow_manual_move ?? true,
+          )}
         />
         <StepCheckboxRow
           id={`${step.id}-command-panel`}
@@ -314,10 +352,26 @@ function StepBehaviorSection({
           disabled={readOnly}
           label="Show in command panel"
           helpText="Show tasks in this step when opening the command panel (Cmd+K). Useful for hiding backlog or done steps from quick access."
+          isDirty={isWorkflowStepValueDirty(
+            step,
+            savedStep,
+            (item) => item.show_in_command_panel ?? false,
+          )}
+        />
+        <StepAutoArchiveRow
+          step={step}
+          savedStep={savedStep}
+          onUpdate={onUpdate}
+          readOnly={readOnly}
         />
-        <StepAutoArchiveRow step={step} onUpdate={onUpdate} readOnly={readOnly} />
       </div>
-      <StepWipControls step={step} steps={steps} onUpdate={onUpdate} readOnly={readOnly} />
+      <StepWipControls
+        step={step}
+        savedStep={savedStep}
+        steps={steps}
+        onUpdate={onUpdate}
+        readOnly={readOnly}
+      />
     </div>
   );
 }
@@ -326,6 +380,7 @@ function StepBehaviorSection({
 
 type StepTransitionsSectionProps = {
   step: WorkflowStep;
+  savedStep?: WorkflowStep;
   steps: WorkflowStep[];
   onUpdate: (updates: Partial<WorkflowStep>) => void;
   setTransition: (type: string) => void;
@@ -338,6 +393,7 @@ type StepTransitionsSectionProps = {
 
 function StepTransitionsSection({
   step,
+  savedStep,
   steps,
   onUpdate,
   setTransition,
@@ -360,6 +416,7 @@ function StepTransitionsSection({
       <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
         <TurnStartSelect
           step={step}
+          savedStep={savedStep}
           otherSteps={otherSteps}
           onUpdate={onUpdate}
           setOnTurnStartTransition={setOnTurnStartTransition}
@@ -367,6 +424,7 @@ function StepTransitionsSection({
         />
         <TurnCompleteSelect
           step={step}
+          savedStep={savedStep}
           otherSteps={otherSteps}
           onUpdate={onUpdate}
           setTransition={setTransition}
@@ -376,6 +434,7 @@ function StepTransitionsSection({
         />
         <ChildrenCompletedSelect
           step={step}
+          savedStep={savedStep}
           otherSteps={otherSteps}
           onUpdate={onUpdate}
           setChildrenCompletedTransition={setChildrenCompletedTransition}
@@ -397,6 +456,9 @@ function StepTransitionsSection({
                 toggleOnExitAction("disable_plan_mode");
               }}
               disabled={readOnly}
+              data-settings-dirty={isWorkflowStepValueDirty(step, savedStep, (item) =>
+                hasOnExitAction(item, "disable_plan_mode"),
+              )}
             />
             <Label htmlFor={`${step.id}-exit-disable-plan`} className="text-sm">
               Disable plan mode
@@ -413,6 +475,7 @@ function StepTransitionsSection({
 
 type StepPromptSectionProps = {
   step: WorkflowStep;
+  savedStep?: WorkflowStep;
   localPrompt: string;
   onLocalPromptChange: (prompt: string) => void;
   debouncedUpdatePrompt: (prompt: string) => void;
@@ -421,6 +484,7 @@ type StepPromptSectionProps = {
 
 function StepPromptSection({
   step,
+  savedStep,
   localPrompt,
   onLocalPromptChange,
   debouncedUpdatePrompt,
@@ -455,7 +519,10 @@ function StepPromptSection({
           ))}
         </div>
       )}
-      <div className="rounded-md border overflow-hidden">
+      <div
+        className="rounded-md border overflow-hidden"
+        data-settings-dirty={!savedStep || localPrompt !== (savedStep.prompt ?? "")}
+      >
         <ScriptEditor
           value={localPrompt}
           onChange={(v) => {
@@ -479,10 +546,9 @@ function StepPromptSection({
   );
 }
 
-// --- StepConfigPanel ---
-
 type StepConfigPanelProps = {
   step: WorkflowStep;
+  savedStep?: WorkflowStep;
   steps: WorkflowStep[];
   onUpdate: (updates: Partial<WorkflowStep>) => void;
   onRemove: () => void;
@@ -491,6 +557,7 @@ type StepConfigPanelProps = {
 
 export function StepConfigPanel({
   step,
+  savedStep,
   steps,
   onUpdate,
   onRemove,
@@ -512,9 +579,13 @@ export function StepConfigPanel({
     <div
       key={step.id}
       className="rounded-lg border bg-card animate-in fade-in-0 slide-in-from-top-2 duration-200"
+      data-settings-dirty={isWorkflowStepDirty(step, savedStep)}
+      data-settings-dirty-level="container"
+      data-testid={`workflow-step-panel-${step.id}`}
     >
       <StepConfigHeader
         step={step}
+        savedStep={savedStep}
         localName={localName}
         onLocalNameChange={setLocalName}
         onUpdate={onUpdate}
@@ -525,6 +596,7 @@ export function StepConfigPanel({
       <div className="p-4 space-y-5">
         <StepBehaviorSection
           step={step}
+          savedStep={savedStep}
           steps={steps}
           onUpdate={onUpdate}
           toggleOnEnterAction={actions.toggleOnEnterAction}
@@ -532,6 +604,7 @@ export function StepConfigPanel({
         />
         <StepTransitionsSection
           step={step}
+          savedStep={savedStep}
           steps={steps}
           onUpdate={onUpdate}
           setTransition={actions.setTransition}
@@ -543,6 +616,7 @@ export function StepConfigPanel({
         />
         <StepPromptSection
           step={step}
+          savedStep={savedStep}
           localPrompt={localPrompt}
           onLocalPromptChange={setLocalPrompt}
           debouncedUpdatePrompt={debouncedUpdatePrompt}
diff --git a/apps/web/components/settings/workflow-pipeline-editor-step-actions.tsx b/apps/web/components/settings/workflow-pipeline-editor-step-actions.tsx
index 1dacea3feb..41afb852bf 100644
--- a/apps/web/components/settings/workflow-pipeline-editor-step-actions.tsx
+++ b/apps/web/components/settings/workflow-pipeline-editor-step-actions.tsx
@@ -19,6 +19,7 @@ import {
   getChildrenCompletedTransitionType,
   hasDisablePlanMode,
 } from "./workflow-pipeline-editor-helpers";
+import { isWorkflowStepValueDirty } from "./workflow-dirty-state";
 
 // --- useStepActions hook ---
 
@@ -104,6 +105,7 @@ export function useStepActions({ step, onUpdate }: UseStepActionsArgs) {
 
 type StepSelectProps = {
   step: WorkflowStep;
+  savedStep?: WorkflowStep;
   otherSteps: WorkflowStep[];
   onUpdate: (updates: Partial<WorkflowStep>) => void;
   readOnly: boolean;
@@ -111,6 +113,7 @@ type StepSelectProps = {
 
 export function TurnStartSelect({
   step,
+  savedStep,
   otherSteps,
   onUpdate,
   setOnTurnStartTransition,
@@ -131,7 +134,14 @@ export function TurnStartSelect({
         }}
         disabled={readOnly}
       >
-        <SelectTrigger className="w-full h-8">
+        <SelectTrigger
+          className="w-full h-8"
+          data-settings-dirty={isWorkflowStepValueDirty(
+            step,
+            savedStep,
+            getOnTurnStartTransitionType,
+          )}
+        >
           <SelectValue placeholder="Select action" />
         </SelectTrigger>
         <SelectContent position="popper" side="bottom" align="start">
@@ -157,7 +167,16 @@ export function TurnStartSelect({
           }}
           disabled={readOnly}
         >
-          <SelectTrigger className="w-full h-8">
+          <SelectTrigger
+            className="w-full h-8"
+            data-settings-dirty={isWorkflowStepValueDirty(
+              step,
+              savedStep,
+              (item) =>
+                item.events?.on_turn_start?.find((action) => action.type === "move_to_step")?.config
+                  ?.step_id ?? "",
+            )}
+          >
             <SelectValue placeholder="Select step" />
           </SelectTrigger>
           <SelectContent position="popper" side="bottom" align="start">
@@ -184,8 +203,58 @@ type TurnCompleteSelectProps = StepSelectProps & {
   planModeEnabled: boolean;
 };
 
+function getTurnCompleteTargetStepId(step: WorkflowStep): string {
+  return (
+    (step.events?.on_turn_complete?.find((action) => action.type === "move_to_step")?.config
+      ?.step_id as string) ?? ""
+  );
+}
+
+function TurnCompleteTargetSelect({
+  step,
+  savedStep,
+  otherSteps,
+  onUpdate,
+  readOnly,
+}: StepSelectProps) {
+  const updateTarget = (stepId: string) => {
+    if (readOnly) return;
+    const currentEvents = step.events ?? {};
+    const onTurnComplete = (currentEvents.on_turn_complete ?? []).map((action) =>
+      action.type === "move_to_step" ? { ...action, config: { step_id: stepId } } : action,
+    );
+    onUpdate({ events: { ...currentEvents, on_turn_complete: onTurnComplete } });
+  };
+
+  return (
+    <Select
+      value={getTurnCompleteTargetStepId(step)}
+      onValueChange={updateTarget}
+      disabled={readOnly}
+    >
+      <SelectTrigger
+        className="w-full h-8"
+        data-settings-dirty={isWorkflowStepValueDirty(step, savedStep, getTurnCompleteTargetStepId)}
+      >
+        <SelectValue placeholder="Select step" />
+      </SelectTrigger>
+      <SelectContent position="popper" side="bottom" align="start">
+        {otherSteps.map((candidate) => (
+          <SelectItem key={candidate.id} value={candidate.id}>
+            <div className="flex items-center gap-2">
+              <div className={cn("w-2 h-2 rounded-full", candidate.color)} />
+              {candidate.name}
+            </div>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
 export function TurnCompleteSelect({
   step,
+  savedStep,
   otherSteps,
   onUpdate,
   setTransition,
@@ -208,7 +277,10 @@ export function TurnCompleteSelect({
         }}
         disabled={readOnly}
       >
-        <SelectTrigger className="w-full h-8">
+        <SelectTrigger
+          className="w-full h-8"
+          data-settings-dirty={isWorkflowStepValueDirty(step, savedStep, getTransitionType)}
+        >
           <SelectValue placeholder="Select action" />
         </SelectTrigger>
         <SelectContent position="popper" side="bottom" align="start">
@@ -219,35 +291,13 @@ export function TurnCompleteSelect({
         </SelectContent>
       </Select>
       {transitionType === "move_to_step" && (
-        <Select
-          value={
-            (step.events?.on_turn_complete?.find((a) => a.type === "move_to_step")?.config
-              ?.step_id as string) ?? ""
-          }
-          onValueChange={(value) => {
-            if (readOnly) return;
-            const currentEvents = step.events ?? {};
-            const onTurnComplete = (currentEvents.on_turn_complete ?? []).map((a) =>
-              a.type === "move_to_step" ? { ...a, config: { step_id: value } } : a,
-            );
-            onUpdate({ events: { ...currentEvents, on_turn_complete: onTurnComplete } });
-          }}
-          disabled={readOnly}
-        >
-          <SelectTrigger className="w-full h-8">
-            <SelectValue placeholder="Select step" />
-          </SelectTrigger>
-          <SelectContent position="popper" side="bottom" align="start">
-            {otherSteps.map((s) => (
-              <SelectItem key={s.id} value={s.id}>
-                <div className="flex items-center gap-2">
-                  <div className={cn("w-2 h-2 rounded-full", s.color)} />
-                  {s.name}
-                </div>
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+        <TurnCompleteTargetSelect
+          step={step}
+          savedStep={savedStep}
+          otherSteps={otherSteps}
+          onUpdate={onUpdate}
+          readOnly={readOnly}
+        />
       )}
       {planModeEnabled && (
         <div className="flex items-center gap-2 pt-1">
@@ -259,6 +309,7 @@ export function TurnCompleteSelect({
               toggleDisablePlanMode();
             }}
             disabled={readOnly}
+            data-settings-dirty={isWorkflowStepValueDirty(step, savedStep, hasDisablePlanMode)}
           />
           <Label htmlFor={`${step.id}-disable-plan`} className="text-sm">
             Disable plan mode on complete
@@ -267,7 +318,12 @@ export function TurnCompleteSelect({
         </div>
       )}
       {transitionType !== "none" && (
-        <ExplicitCompletionToggle step={step} onUpdate={onUpdate} readOnly={readOnly} />
+        <ExplicitCompletionToggle
+          step={step}
+          savedStep={savedStep}
+          onUpdate={onUpdate}
+          readOnly={readOnly}
+        />
       )}
     </div>
   );
@@ -281,6 +337,7 @@ type ChildrenCompletedSelectProps = StepSelectProps & {
 
 export function ChildrenCompletedSelect({
   step,
+  savedStep,
   otherSteps,
   onUpdate,
   setChildrenCompletedTransition,
@@ -316,6 +373,11 @@ export function ChildrenCompletedSelect({
         <SelectTrigger
           className="w-full h-8"
           data-testid={`${step.id}-children-completed-transition-select`}
+          data-settings-dirty={isWorkflowStepValueDirty(
+            step,
+            savedStep,
+            getChildrenCompletedTransitionType,
+          )}
         >
           <SelectValue placeholder="Select action" />
         </SelectTrigger>
@@ -346,6 +408,13 @@ export function ChildrenCompletedSelect({
           <SelectTrigger
             className="w-full h-8"
             data-testid={`${step.id}-children-completed-step-select`}
+            data-settings-dirty={isWorkflowStepValueDirty(
+              step,
+              savedStep,
+              (item) =>
+                item.events?.on_children_completed?.find((action) => action.type === "move_to_step")
+                  ?.config?.step_id ?? "",
+            )}
           >
             <SelectValue placeholder="Select step" />
           </SelectTrigger>
@@ -372,12 +441,14 @@ export function ChildrenCompletedSelect({
 
 type ExplicitCompletionToggleProps = {
   step: WorkflowStep;
+  savedStep?: WorkflowStep;
   onUpdate: (updates: Partial<WorkflowStep>) => void;
   readOnly: boolean;
 };
 
 export function ExplicitCompletionToggle({
   step,
+  savedStep,
   onUpdate,
   readOnly,
 }: ExplicitCompletionToggleProps) {
@@ -392,6 +463,11 @@ export function ExplicitCompletionToggle({
           onUpdate({ auto_advance_requires_signal: c === true });
         }}
         disabled={readOnly}
+        data-settings-dirty={isWorkflowStepValueDirty(
+          step,
+          savedStep,
+          (item) => item.auto_advance_requires_signal ?? false,
+        )}
       />
       <Label htmlFor={`${step.id}-require-signal`} className="text-sm">
         Wait for agent completion signal
diff --git a/apps/web/components/settings/workflow-pipeline-editor-wip-controls.tsx b/apps/web/components/settings/workflow-pipeline-editor-wip-controls.tsx
index c4cf5b51d9..2082e61a5e 100644
--- a/apps/web/components/settings/workflow-pipeline-editor-wip-controls.tsx
+++ b/apps/web/components/settings/workflow-pipeline-editor-wip-controls.tsx
@@ -5,9 +5,11 @@ import { Label } from "@kandev/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
 import type { WorkflowStep } from "@/lib/types/http";
 import { HelpTip } from "./workflow-pipeline-editor-helpers";
+import { isWorkflowStepValueDirty } from "./workflow-dirty-state";
 
 type StepWipControlsProps = {
   step: WorkflowStep;
+  savedStep?: WorkflowStep;
   steps: WorkflowStep[];
   onUpdate: (updates: Partial<WorkflowStep>) => void;
   readOnly: boolean;
@@ -19,7 +21,13 @@ function parseWipLimit(value: string): number {
   return Math.max(0, next);
 }
 
-export function StepWipControls({ step, steps, onUpdate, readOnly }: StepWipControlsProps) {
+export function StepWipControls({
+  step,
+  savedStep,
+  steps,
+  onUpdate,
+  readOnly,
+}: StepWipControlsProps) {
   const otherSteps = steps.filter((s) => s.id !== step.id);
   const pullFromValue = step.pull_from_step_id || "none";
   const pullFromSelectID = `${step.id}-pull-from-step`;
@@ -46,6 +54,11 @@ export function StepWipControls({ step, steps, onUpdate, readOnly }: StepWipCont
           }}
           disabled={readOnly}
           className="h-8"
+          data-settings-dirty={isWorkflowStepValueDirty(
+            step,
+            savedStep,
+            (item) => item.wip_limit ?? 0,
+          )}
         />
       </div>
       <div className="space-y-1.5">
@@ -67,6 +80,11 @@ export function StepWipControls({ step, steps, onUpdate, readOnly }: StepWipCont
             id={pullFromSelectID}
             className="h-8"
             data-testid={`${step.id}-pull-from-step-select`}
+            data-settings-dirty={isWorkflowStepValueDirty(
+              step,
+              savedStep,
+              (item) => item.pull_from_step_id ?? "",
+            )}
           >
             <SelectValue placeholder="No feeder step" />
           </SelectTrigger>
diff --git a/apps/web/components/settings/workflow-pipeline-editor.tsx b/apps/web/components/settings/workflow-pipeline-editor.tsx
index 4aa96a899a..d63a367155 100644
--- a/apps/web/components/settings/workflow-pipeline-editor.tsx
+++ b/apps/web/components/settings/workflow-pipeline-editor.tsx
@@ -25,31 +25,23 @@ import {
   IconAlertTriangle,
 } from "@tabler/icons-react";
 import { StepCapabilityIcons } from "@/components/step-capability-icons";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@kandev/ui/alert-dialog";
 import { ScrollArea, ScrollBar } from "@kandev/ui/scroll-area";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@kandev/ui/tooltip";
 import type { WorkflowStep } from "@/lib/types/http";
 import type { WorkflowReplayCycleDiagnostic } from "@/lib/workflows/replay-cycle-analysis";
 import { cn } from "@/lib/utils";
 import { StepConfigPanel } from "./workflow-pipeline-editor-panels";
+import { isWorkflowStepDirty } from "./workflow-dirty-state";
 import { WorkflowCycleDiagnostic } from "./workflow-cycle-diagnostic";
 
 type WorkflowPipelineEditorProps = {
   steps: WorkflowStep[];
+  savedSteps?: WorkflowStep[];
+  diagnostics?: WorkflowReplayCycleDiagnostic[];
   onUpdateStep: (stepId: string, updates: Partial<WorkflowStep>) => void;
   onAddStep: () => void;
   onRemoveStep: (stepId: string) => void;
   onReorderSteps: (steps: WorkflowStep[]) => void;
-  diagnostics?: WorkflowReplayCycleDiagnostic[];
   readOnly?: boolean;
 };
 
@@ -74,19 +66,21 @@ function getTransitionLabel(step: WorkflowStep): string {
 
 type PipelineNodeProps = {
   step: WorkflowStep;
+  isDirty: boolean;
+  isReplayCycleAffected: boolean;
   isSelected: boolean;
   onSelect: () => void;
   onRemove: () => void;
-  isReplayCycleAffected: boolean;
   readOnly?: boolean;
 };
 
 function PipelineNode({
   step,
+  isDirty,
+  isReplayCycleAffected,
   isSelected,
   onSelect,
   onRemove,
-  isReplayCycleAffected,
   readOnly = false,
 }: PipelineNodeProps) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
@@ -108,6 +102,10 @@ function PipelineNode({
         isDragging && "opacity-50 z-50",
       )}
       onClick={onSelect}
+      data-settings-dirty={isDirty}
+      data-workflow-replay-cycle={isReplayCycleAffected}
+      data-settings-dirty-level="container"
+      data-testid={`workflow-step-node-${step.id}`}
     >
       {step.is_start_step && (
         <TooltipProvider>
@@ -188,21 +186,23 @@ function PipelineConnector({ label }: { label: string }) {
 
 type PipelineAreaProps = {
   steps: WorkflowStep[];
+  savedStepsById: ReadonlyMap<string, WorkflowStep>;
+  affectedStepIds: Set<string>;
   selectedStepId: string | null;
   onSelectStep: (stepId: string) => void;
   onRemoveStep: (stepId: string) => void;
   onAddStep: () => void;
-  affectedStepIds: Set<string>;
   readOnly: boolean;
 };
 
 function PipelineArea({
   steps,
+  savedStepsById,
+  affectedStepIds,
   selectedStepId,
   onSelectStep,
   onRemoveStep,
   onAddStep,
-  affectedStepIds,
   readOnly,
 }: PipelineAreaProps) {
   return (
@@ -212,10 +212,11 @@ function PipelineArea({
           {index > 0 && <PipelineConnector label={getTransitionLabel(steps[index - 1])} />}
           <PipelineNode
             step={step}
+            isDirty={isWorkflowStepDirty(step, savedStepsById.get(step.id))}
+            isReplayCycleAffected={affectedStepIds.has(step.id)}
             isSelected={selectedStepId === step.id}
             onSelect={() => onSelectStep(step.id)}
             onRemove={() => onRemoveStep(step.id)}
-            isReplayCycleAffected={affectedStepIds.has(step.id)}
             readOnly={readOnly}
           />
         </div>
@@ -238,39 +239,6 @@ function PipelineArea({
   );
 }
 
-// --- Step Delete Confirmation ---
-
-function StepDeleteConfirmation({
-  stepName,
-  open,
-  onOpenChange,
-  onConfirm,
-}: {
-  stepName: string;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onConfirm: () => void;
-}) {
-  return (
-    <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogContent data-testid="step-delete-confirm-dialog">
-        <AlertDialogHeader>
-          <AlertDialogTitle>Delete step &ldquo;{stepName}&rdquo;?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This will permanently remove the step from this workflow. This action cannot be undone.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel className="cursor-pointer">Cancel</AlertDialogCancel>
-          <AlertDialogAction variant="destructive" onClick={onConfirm} className="cursor-pointer">
-            Delete
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-}
-
 function affectedStepIds(diagnostics: WorkflowReplayCycleDiagnostic[]): Set<string> {
   return new Set(diagnostics.flatMap((diagnostic) => diagnostic.affectedStepIds));
 }
@@ -292,16 +260,16 @@ const EMPTY_DIAGNOSTICS: WorkflowReplayCycleDiagnostic[] = [];
 
 export function WorkflowPipelineEditor({
   steps,
+  savedSteps = [],
+  diagnostics = EMPTY_DIAGNOSTICS,
   onUpdateStep,
   onAddStep,
   onRemoveStep,
   onReorderSteps,
-  diagnostics = EMPTY_DIAGNOSTICS,
   readOnly = false,
 }: WorkflowPipelineEditorProps) {
   const [selectedStepId, setSelectedStepId] = useState<string | null>(null);
   const [prevStepCount, setPrevStepCount] = useState(steps.length);
-  const [stepToConfirmDelete, setStepToConfirmDelete] = useState<string | null>(null);
 
   if (steps.length !== prevStepCount) {
     if (steps.length > prevStepCount && steps.length > 0)
@@ -310,6 +278,10 @@ export function WorkflowPipelineEditor({
   }
 
   const stepItems = useMemo(() => steps.map((step) => step.id), [steps]);
+  const savedStepsById = useMemo(
+    () => new Map(savedSteps.map((step) => [step.id, step])),
+    [savedSteps],
+  );
   const affectedIds = useMemo(() => affectedStepIds(diagnostics), [diagnostics]);
   const isMounted = useSyncExternalStore(
     () => () => {},
@@ -334,28 +306,21 @@ export function WorkflowPipelineEditor({
   const handleSelectStep = (stepId: string) =>
     setSelectedStepId((prev) => (prev === stepId ? null : stepId));
 
-  const requestRemoveStep = (stepId: string) => setStepToConfirmDelete(stepId);
-
-  const confirmRemoveStep = () => {
-    if (!stepToConfirmDelete) return;
-    onRemoveStep(stepToConfirmDelete);
-    if (selectedStepId === stepToConfirmDelete) setSelectedStepId(null);
-    setStepToConfirmDelete(null);
+  const handleRemoveStep = (stepId: string) => {
+    onRemoveStep(stepId);
+    if (selectedStepId === stepId) setSelectedStepId(null);
   };
 
-  const stepToDeleteName = stepToConfirmDelete
-    ? (steps.find((s) => s.id === stepToConfirmDelete)?.name ?? "this step")
-    : "";
-
   const selectedStep = steps.find((s) => s.id === selectedStepId);
   const pipelineArea = (
     <PipelineArea
       steps={steps}
+      savedStepsById={savedStepsById}
+      affectedStepIds={affectedIds}
       selectedStepId={selectedStepId}
       onSelectStep={handleSelectStep}
-      onRemoveStep={requestRemoveStep}
+      onRemoveStep={handleRemoveStep}
       onAddStep={onAddStep}
-      affectedStepIds={affectedIds}
       readOnly={readOnly}
     />
   );
@@ -363,7 +328,7 @@ export function WorkflowPipelineEditor({
   return (
     <div className="space-y-3">
       <WorkflowCycleAlerts diagnostics={diagnostics} />
-      <ScrollArea className="w-full pb-1">
+      <ScrollArea className="w-full max-w-full pb-1">
         {isMounted ? (
           <DndContext
             collisionDetection={closestCenter}
@@ -383,20 +348,13 @@ export function WorkflowPipelineEditor({
         <StepConfigPanel
           key={selectedStep.id}
           step={selectedStep}
+          savedStep={savedStepsById.get(selectedStep.id)}
           steps={steps}
           onUpdate={(updates) => onUpdateStep(selectedStep.id, updates)}
-          onRemove={() => requestRemoveStep(selectedStep.id)}
+          onRemove={() => handleRemoveStep(selectedStep.id)}
           readOnly={readOnly}
         />
       )}
-      <StepDeleteConfirmation
-        stepName={stepToDeleteName}
-        open={!!stepToConfirmDelete}
-        onOpenChange={(open) => {
-          if (!open) setStepToConfirmDelete(null);
-        }}
-        onConfirm={confirmRemoveStep}
-      />
     </div>
   );
 }
diff --git a/apps/web/components/settings/workflow-read-only-actions.test.ts b/apps/web/components/settings/workflow-read-only-actions.test.ts
index 102f6b6525..2530e0394c 100644
--- a/apps/web/components/settings/workflow-read-only-actions.test.ts
+++ b/apps/web/components/settings/workflow-read-only-actions.test.ts
@@ -9,11 +9,7 @@ import {
   updateWorkflowStepAction,
 } from "@/app/actions/workspaces";
 import type { Workflow, WorkflowStep } from "@/lib/types/http";
-import {
-  useWorkflowDeleteHandlers,
-  useWorkflowSaveActions,
-  useWorkflowStepActions,
-} from "./workflow-card-actions";
+import { useWorkflowDeleteHandlers, useWorkflowStepActions } from "./workflow-card-actions";
 import { useWorkflowMutationGuard } from "./workflow-mutation-guard";
 
 vi.mock("@/app/actions/workspaces", () => ({
@@ -115,7 +111,6 @@ it("refuses to open or confirm workflow deletion when read-only", async () => {
   const { result } = renderHook(() =>
     useWorkflowDeleteHandlers({
       workflow,
-      isNewWorkflow: false,
       readOnly: true,
       otherWorkflows: [],
       wfDel,
@@ -135,26 +130,3 @@ it("refuses to open or confirm workflow deletion when read-only", async () => {
   expect(wfDel.setDeleteOpen).not.toHaveBeenCalled();
   expect(wfDel.setMigrateLoading).not.toHaveBeenCalled();
 });
-
-it("refuses to save an existing workflow when read-only", async () => {
-  const onSaveWorkflow = vi.fn();
-  const { result } = renderHook(() => {
-    const mutationGuard = useWorkflowMutationGuard([]);
-    return useWorkflowSaveActions({
-      workflow,
-      isNewWorkflow: false,
-      readOnly: true,
-      workflowSteps: [],
-      templateStepCount: 0,
-      onSaveWorkflow,
-      toast: vi.fn(),
-      mutationGuard,
-    });
-  });
-
-  await act(async () => {
-    await result.current.handleSaveWorkflow();
-  });
-
-  expect(onSaveWorkflow).not.toHaveBeenCalled();
-});
diff --git a/apps/web/components/settings/workflow-reorder-actions.test.ts b/apps/web/components/settings/workflow-reorder-actions.test.ts
index 41152d2efe..216c67a101 100644
--- a/apps/web/components/settings/workflow-reorder-actions.test.ts
+++ b/apps/web/components/settings/workflow-reorder-actions.test.ts
@@ -54,75 +54,71 @@ function renderReorderActions(initialSteps: WorkflowStep[]) {
   );
   const view = renderHook(() => {
     const mutationGuard = useWorkflowMutationGuard(initialSteps);
-    return useWorkflowStepActions({
-      workflow,
-      isNewWorkflow: false,
-      workflowSteps: initialSteps,
-      setWorkflowSteps,
-      setStepToDelete: vi.fn(),
-      setStepTaskCount: vi.fn(),
-      setTargetStepForMigration: vi.fn(),
-      setStepDeleteOpen: vi.fn(),
-      toast: vi.fn(),
+    return {
+      actions: useWorkflowStepActions({
+        workflow,
+        isNewWorkflow: false,
+        workflowSteps: initialSteps,
+        setWorkflowSteps,
+        setStepToDelete: vi.fn(),
+        setStepTaskCount: vi.fn(),
+        setTargetStepForMigration: vi.fn(),
+        setStepDeleteOpen: vi.fn(),
+        toast: vi.fn(),
+        mutationGuard,
+      }),
       mutationGuard,
-    });
+    };
   });
   return { ...view, setWorkflowSteps, getSteps: () => currentSteps };
 }
 
-function deferredPromise<T>() {
-  let resolve!: (value: T) => void;
-  const promise = new Promise<T>((resolvePromise) => {
-    resolve = resolvePromise;
-  });
-  return { promise, resolve };
-}
-
-it("keeps a reorder optimistic until the authoritative response arrives", async () => {
+it("stages a reorder locally without calling persistence", async () => {
   const work = step("work", "Work", 0, true);
   const review = step("review", "Review", 1, false);
   const proposed = [
     { ...review, position: 0 },
     { ...work, position: 1 },
   ];
-  const authoritative = proposed.map((workflowStep) => ({
-    ...workflowStep,
-    updated_at: "server-update",
-  }));
-  const response = deferredPromise<{ steps: WorkflowStep[]; total: number }>();
-  vi.mocked(reorderWorkflowStepsAction).mockReturnValue(response.promise);
   const { result, getSteps } = renderReorderActions([work, review]);
 
-  let request!: Promise<void>;
   await act(async () => {
-    request = result.current.handleReorderWorkflowSteps([review, work]);
-    await vi.waitFor(() => expect(reorderWorkflowStepsAction).toHaveBeenCalledTimes(1));
+    await result.current.actions.handleReorderWorkflowSteps([review, work]);
   });
-  expect(getSteps()).toEqual(proposed);
 
-  await act(async () => {
-    response.resolve({ steps: authoritative, total: 2 });
-    await request;
-  });
-  expect(getSteps()).toEqual(authoritative);
+  expect(getSteps()).toEqual(proposed);
+  expect(reorderWorkflowStepsAction).not.toHaveBeenCalled();
 });
 
-it("rolls an optimistic reorder back when persistence fails", async () => {
+it("holds a cycle-introducing reorder until the warning is confirmed", async () => {
   const work = step("work", "Work", 0, true);
-  const review = step("review", "Review", 1, false);
-  const initial = [work, review];
+  work.events = {
+    on_enter: [{ type: "auto_start_agent" }],
+    on_turn_complete: [{ type: "move_to_next" }],
+  };
+  const parked = step("parked", "Parked", 1, false);
+  const review = step("review", "Review", 2, false);
+  review.events = {
+    on_turn_complete: [{ type: "move_to_step", config: { step_id: work.id } }],
+  };
+  const initial = [work, parked, review];
   const proposed = [
-    { ...review, position: 0 },
-    { ...work, position: 1 },
+    { ...work, position: 0 },
+    { ...review, position: 1 },
+    { ...parked, position: 2 },
   ];
-  vi.mocked(reorderWorkflowStepsAction).mockRejectedValue(new Error("reorder failed"));
   const { result, setWorkflowSteps, getSteps } = renderReorderActions(initial);
 
   await act(async () => {
-    await result.current.handleReorderWorkflowSteps([review, work]);
+    await result.current.actions.handleReorderWorkflowSteps([work, review, parked]);
   });
-
-  expect(setWorkflowSteps).toHaveBeenNthCalledWith(1, proposed);
-  expect(setWorkflowSteps).toHaveBeenNthCalledWith(2, initial);
+  expect(result.current.mutationGuard.proposal?.severity).toBe("warning");
+  expect(setWorkflowSteps).not.toHaveBeenCalled();
   expect(getSteps()).toEqual(initial);
+
+  await act(async () => {
+    await result.current.mutationGuard.confirmProposal();
+  });
+  expect(getSteps()).toEqual(proposed);
+  expect(reorderWorkflowStepsAction).not.toHaveBeenCalled();
 });
diff --git a/apps/web/components/settings/workflow-synced-badge.tsx b/apps/web/components/settings/workflow-synced-badge.tsx
new file mode 100644
index 0000000000..afd6d17341
--- /dev/null
+++ b/apps/web/components/settings/workflow-synced-badge.tsx
@@ -0,0 +1,23 @@
+import { Badge } from "@kandev/ui/badge";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@kandev/ui/tooltip";
+
+export function WorkflowSyncedBadge({ sourcePath }: { sourcePath?: string }) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Badge
+          variant="outline"
+          tabIndex={0}
+          className="text-xs cursor-default"
+          data-testid="workflow-synced-badge"
+        >
+          Synced
+        </Badge>
+      </TooltipTrigger>
+      <TooltipContent>
+        Read-only - managed by workflow sync from {sourcePath || "a configured repository"}. Edit or
+        remove it in the synced repository.
+      </TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/components/slack/slack-settings.tsx b/apps/web/components/slack/slack-settings.tsx
index 3df37fc3b5..d00bf4b3a2 100644
--- a/apps/web/components/slack/slack-settings.tsx
+++ b/apps/web/components/slack/slack-settings.tsx
@@ -1,24 +1,26 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, type Dispatch, type SetStateAction } from "react";
 import Link from "@/components/routing/app-link";
 import { IconBrandSlack } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
-import { Card, CardContent } from "@kandev/ui/card";
+import { CardContent } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
 import { Label } from "@kandev/ui/label";
 import { Separator } from "@kandev/ui/separator";
 import { Alert, AlertDescription } from "@kandev/ui/alert";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
-import { Switch } from "@kandev/ui/switch";
 import { useToast } from "@/components/toast-provider";
 import { SettingsSection } from "@/components/settings/settings-section";
+import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { useSlackEnabled } from "@/hooks/domains/slack/use-slack-enabled";
 import {
   IntegrationAuthStatusBanner,
   type IntegrationAuthHealth,
 } from "@/components/integrations/auth-status-banner";
 import { WorkspaceScopedSection } from "@/components/integrations/workspace-scoped-section";
+import { DraftedIntegrationEnabledControl } from "@/components/integrations/drafted-integration-enabled-control";
 import { INTEGRATION_STATUS_REFRESH_MS } from "@/hooks/domains/integrations/use-integration-availability";
 import {
   getSlackConfig,
@@ -71,20 +73,23 @@ function configToHealth(config: SlackConfig | null): IntegrationAuthHealth | nul
   };
 }
 
-function saveLabel(saving: boolean, hasConfig: boolean): string {
-  if (saving) return "Saving...";
-  return hasConfig ? "Update" : "Save";
-}
-
 type SecretFieldsProps = {
   form: FormState;
+  baseline: FormState;
   loading: boolean;
   hasSavedToken: boolean;
   hasSavedCookie: boolean;
   update: <K extends keyof FormState>(key: K, value: FormState[K]) => void;
 };
 
-function SecretFields({ form, loading, hasSavedToken, hasSavedCookie, update }: SecretFieldsProps) {
+function SecretFields({
+  form,
+  baseline,
+  loading,
+  hasSavedToken,
+  hasSavedCookie,
+  update,
+}: SecretFieldsProps) {
   return (
     <div className="space-y-4">
       <div className="space-y-1.5">
@@ -101,6 +106,7 @@ function SecretFields({ form, loading, hasSavedToken, hasSavedCookie, update }:
           type="password"
           placeholder={hasSavedToken ? "••••••••" : "xoxc-..."}
           value={form.token}
+          data-settings-dirty={form.token !== baseline.token}
           onChange={(e) => update("token", e.target.value)}
           disabled={loading}
         />
@@ -119,6 +125,7 @@ function SecretFields({ form, loading, hasSavedToken, hasSavedCookie, update }:
           type="password"
           placeholder={hasSavedCookie ? "••••••••" : "xoxd-..."}
           value={form.cookie}
+          data-settings-dirty={form.cookie !== baseline.cookie}
           onChange={(e) => update("cookie", e.target.value)}
           disabled={loading}
         />
@@ -133,6 +140,7 @@ function SecretFields({ form, loading, hasSavedToken, hasSavedCookie, update }:
 
 type UtilityAgentPickerProps = {
   form: FormState;
+  baseline: FormState;
   loading: boolean;
   agents: UtilityAgent[];
   loadingAgents: boolean;
@@ -166,6 +174,7 @@ function utilityAgentLabel(a: UtilityAgent): string {
 
 function UtilityAgentPicker({
   form,
+  baseline,
   loading,
   agents,
   loadingAgents,
@@ -179,7 +188,11 @@ function UtilityAgentPicker({
         onValueChange={(v) => update("utilityAgentId", v)}
         disabled={loading || loadingAgents || agents.length === 0}
       >
-        <SelectTrigger id="slack-utility-agent" className="w-full">
+        <SelectTrigger
+          id="slack-utility-agent"
+          className="w-full"
+          data-settings-dirty={form.utilityAgentId !== baseline.utilityAgentId}
+        >
           <SelectValue placeholder={utilityAgentPlaceholder(agents, loadingAgents)} />
         </SelectTrigger>
         <SelectContent>
@@ -213,10 +226,12 @@ function UtilityAgentPicker({
 
 function PrefixField({
   form,
+  baseline,
   loading,
   update,
 }: {
   form: FormState;
+  baseline: FormState;
   loading: boolean;
   update: <K extends keyof FormState>(key: K, value: FormState[K]) => void;
 }) {
@@ -228,6 +243,7 @@ function PrefixField({
         type="text"
         placeholder={DEFAULT_PREFIX}
         value={form.commandPrefix}
+        data-settings-dirty={form.commandPrefix !== baseline.commandPrefix}
         onChange={(e) => update("commandPrefix", e.target.value)}
         disabled={loading}
       />
@@ -241,10 +257,12 @@ function PrefixField({
 
 function PollIntervalField({
   form,
+  baseline,
   loading,
   update,
 }: {
   form: FormState;
+  baseline: FormState;
   loading: boolean;
   update: <K extends keyof FormState>(key: K, value: FormState[K]) => void;
 }) {
@@ -258,6 +276,7 @@ function PollIntervalField({
         max={MAX_POLL_INTERVAL_SECONDS}
         step={1}
         value={form.pollIntervalSeconds}
+        data-settings-dirty={form.pollIntervalSeconds !== baseline.pollIntervalSeconds}
         onChange={(e) => {
           const n = Number(e.target.value);
           update("pollIntervalSeconds", Number.isFinite(n) ? n : DEFAULT_POLL_INTERVAL_SECONDS);
@@ -301,28 +320,22 @@ function UnsupportedWarning() {
 }
 
 type ActionBarProps = {
-  saving: boolean;
   testing: boolean;
   deleting: boolean;
   loading: boolean;
   hasConfig: boolean;
-  disableSave: boolean;
   disableTest: boolean;
   onTest: () => void;
-  onSave: () => void;
   onDelete: () => void;
 };
 
 function ActionBar({
-  saving,
   testing,
   deleting,
   loading,
   hasConfig,
-  disableSave,
   disableTest,
   onTest,
-  onSave,
   onDelete,
 }: ActionBarProps) {
   return (
@@ -337,9 +350,6 @@ function ActionBar({
       >
         {testing ? "Testing..." : "Test connection"}
       </Button>
-      <Button type="button" onClick={onSave} disabled={disableSave} className="cursor-pointer">
-        {saveLabel(saving, hasConfig)}
-      </Button>
       {hasConfig && (
         <Button
           type="button"
@@ -377,7 +387,7 @@ type SettingsActionsArgs = {
   workspaceId: string;
   form: FormState;
   setConfig: (cfg: SlackConfig | null) => void;
-  setForm: (form: FormState) => void;
+  setForm: Dispatch<SetStateAction<FormState>>;
   setTestResult: (r: TestSlackConnectionResult | null) => void;
 };
 
@@ -417,6 +427,7 @@ function useSettingsActions({
   }, [workspaceId, form, setTestResult]);
 
   const handleSave = useCallback(async () => {
+    const submitted = form;
     setSaving(true);
     try {
       const saved = await setSlackConfig(
@@ -431,11 +442,14 @@ function useSettingsActions({
         { workspaceId },
       );
       setConfig(saved);
-      setForm(configToForm(saved));
+      setForm((current) =>
+        JSON.stringify(current) === JSON.stringify(submitted) ? configToForm(saved) : current,
+      );
       setTestResult(null);
       toast({ description: "Slack configuration saved", variant: "success" });
     } catch (err) {
       toast({ description: `Save failed: ${String(err)}`, variant: "error" });
+      throw err;
     } finally {
       setSaving(false);
     }
@@ -503,6 +517,7 @@ function useSlackSettings(workspaceId: string) {
       setForm((prev) => ({ ...prev, [key]: value })),
     [],
   );
+  const discard = useCallback(() => setForm(configToForm(config)), [config]);
 
   const { saving, testing, deleting, handleTest, handleSave, handleDelete } = useSettingsActions({
     workspaceId,
@@ -524,6 +539,7 @@ function useSlackSettings(workspaceId: string) {
     agents,
     loadingAgents,
     update,
+    discard,
     handleTest,
     handleSave,
     handleDelete,
@@ -532,28 +548,32 @@ function useSlackSettings(workspaceId: string) {
 
 function EnabledPill() {
   const { enabled, setEnabled } = useSlackEnabled();
-  return (
-    <div className="flex items-center gap-2 rounded-full border bg-muted/30 px-3 py-1">
-      <Switch
-        id="slack-enabled"
-        checked={enabled}
-        onCheckedChange={setEnabled}
-        className="cursor-pointer"
-      />
-      <Label htmlFor="slack-enabled" className="text-xs cursor-pointer">
-        {enabled ? "Enabled" : "Disabled"}
-      </Label>
-    </div>
-  );
+  return <DraftedIntegrationEnabledControl id="slack" enabled={enabled} persist={setEnabled} />;
 }
 
 export function SlackConnectionSection({ workspaceId }: { workspaceId: string }) {
   const s = useSlackSettings(workspaceId);
+  const baseline = configToForm(s.config);
   const missingSecrets =
     (!s.config?.hasToken && !s.form.token) || (!s.config?.hasCookie && !s.form.cookie);
   const missingAgent = !s.form.utilityAgentId;
   const disableSave = s.saving || missingSecrets || missingAgent;
   const disableTest = missingSecrets;
+  const revision = JSON.stringify(s.form);
+  const dirty = !s.loading && revision !== JSON.stringify(configToForm(s.config));
+  let invalidReason: string | undefined;
+  if (missingSecrets) invalidReason = "A session token and cookie are required.";
+  else if (missingAgent) invalidReason = "A triage agent is required.";
+
+  useSettingsSaveContributor({
+    id: `slack-config:${workspaceId}`,
+    revision,
+    isDirty: dirty,
+    canSave: !disableSave,
+    invalidReason,
+    save: s.handleSave,
+    discard: s.discard,
+  });
 
   return (
     <SettingsSection
@@ -562,12 +582,13 @@ export function SlackConnectionSection({ workspaceId }: { workspaceId: string })
       description="Capture Slack threads as tasks for the selected workspace. Type !kandev <instruction> in any thread you can see and the configured utility agent creates the task."
       action={<EnabledPill />}
     >
-      <Card>
+      <SettingsCard isDirty={dirty}>
         <CardContent className="space-y-4 pt-6">
           <UnsupportedWarning />
           <IntegrationAuthStatusBanner health={s.health} />
           <SecretFields
             form={s.form}
+            baseline={baseline}
             loading={s.loading}
             hasSavedToken={!!s.config?.hasToken}
             hasSavedCookie={!!s.config?.hasCookie}
@@ -576,29 +597,32 @@ export function SlackConnectionSection({ workspaceId }: { workspaceId: string })
           <Separator />
           <UtilityAgentPicker
             form={s.form}
+            baseline={baseline}
             loading={s.loading}
             agents={s.agents}
             loadingAgents={s.loadingAgents}
             update={s.update}
           />
-          <PrefixField form={s.form} loading={s.loading} update={s.update} />
-          <PollIntervalField form={s.form} loading={s.loading} update={s.update} />
+          <PrefixField form={s.form} baseline={baseline} loading={s.loading} update={s.update} />
+          <PollIntervalField
+            form={s.form}
+            baseline={baseline}
+            loading={s.loading}
+            update={s.update}
+          />
           <TestResultAlert result={s.testResult} />
           <Separator />
           <ActionBar
-            saving={s.saving}
             testing={s.testing}
             deleting={s.deleting}
             loading={s.loading}
             hasConfig={!!s.config}
-            disableSave={disableSave}
             disableTest={disableTest}
             onTest={s.handleTest}
-            onSave={s.handleSave}
             onDelete={s.handleDelete}
           />
         </CardContent>
-      </Card>
+      </SettingsCard>
     </SettingsSection>
   );
 }
diff --git a/apps/web/components/theme/app-theme.test.tsx b/apps/web/components/theme/app-theme.test.tsx
new file mode 100644
index 0000000000..080306a4d4
--- /dev/null
+++ b/apps/web/components/theme/app-theme.test.tsx
@@ -0,0 +1,69 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { AppThemeProvider, useTheme } from "./app-theme";
+
+function ThemeProbe() {
+  const { theme, savedTheme, previewTheme, commitTheme, restoreTheme } = useTheme();
+  return (
+    <div>
+      <span data-testid="current-theme">{theme}</span>
+      <span data-testid="saved-theme">{savedTheme}</span>
+      <button type="button" onClick={() => previewTheme("light")}>
+        Preview light
+      </button>
+      <button type="button" onClick={() => commitTheme("light")}>
+        Save light
+      </button>
+      <button type="button" onClick={restoreTheme}>
+        Discard preview
+      </button>
+    </div>
+  );
+}
+
+describe("AppThemeProvider settings preview", () => {
+  beforeEach(() => {
+    window.localStorage.setItem("theme", "dark");
+    vi.stubGlobal("matchMedia", () => ({
+      matches: false,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+  });
+
+  afterEach(() => {
+    cleanup();
+    window.localStorage.clear();
+    vi.unstubAllGlobals();
+  });
+
+  it("previews without writing storage and restores the saved theme", () => {
+    render(
+      <AppThemeProvider>
+        <ThemeProbe />
+      </AppThemeProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Preview light" }));
+
+    expect(screen.getByTestId("current-theme").textContent).toBe("light");
+    expect(screen.getByTestId("saved-theme").textContent).toBe("dark");
+    expect(window.localStorage.getItem("theme")).toBe("dark");
+
+    fireEvent.click(screen.getByRole("button", { name: "Discard preview" }));
+    expect(screen.getByTestId("current-theme").textContent).toBe("dark");
+  });
+
+  it("writes the durable theme only when committed", () => {
+    render(
+      <AppThemeProvider>
+        <ThemeProbe />
+      </AppThemeProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Save light" }));
+
+    expect(screen.getByTestId("saved-theme").textContent).toBe("light");
+    expect(window.localStorage.getItem("theme")).toBe("light");
+  });
+});
diff --git a/apps/web/components/theme/app-theme.tsx b/apps/web/components/theme/app-theme.tsx
index a32a2ac4c2..81466f6903 100644
--- a/apps/web/components/theme/app-theme.tsx
+++ b/apps/web/components/theme/app-theme.tsx
@@ -15,7 +15,11 @@ type ResolvedTheme = "light" | "dark";
 
 type ThemeContextValue = {
   theme: Theme;
+  savedTheme: Theme;
   setTheme: (theme: string) => void;
+  previewTheme: (theme: string) => void;
+  commitTheme: (theme: string) => void;
+  restoreTheme: () => void;
   resolvedTheme: ResolvedTheme;
   systemTheme: ResolvedTheme;
 };
@@ -75,6 +79,9 @@ export function AppThemeProvider({
   storageKey = "theme",
 }: AppThemeProviderProps) {
   const [theme, setThemeState] = useState<Theme>(() => readStoredTheme(storageKey, defaultTheme));
+  const [savedTheme, setSavedTheme] = useState<Theme>(() =>
+    readStoredTheme(storageKey, defaultTheme),
+  );
   const [systemTheme, setSystemTheme] = useState<ResolvedTheme>(() => getSystemTheme());
   const resolvedTheme = resolveTheme(theme, enableSystem, systemTheme);
 
@@ -95,18 +102,37 @@ export function AppThemeProvider({
     update();
   }, [attribute, disableTransitionOnChange, resolvedTheme]);
 
-  const setTheme = useCallback(
+  const commitTheme = useCallback(
     (nextTheme: string) => {
       if (nextTheme !== "light" && nextTheme !== "dark" && nextTheme !== "system") return;
       window.localStorage.setItem(storageKey, nextTheme);
+      setSavedTheme(nextTheme);
       setThemeState(nextTheme);
     },
     [storageKey],
   );
 
+  const previewTheme = useCallback((nextTheme: string) => {
+    if (nextTheme !== "light" && nextTheme !== "dark" && nextTheme !== "system") return;
+    setThemeState(nextTheme);
+  }, []);
+
+  const restoreTheme = useCallback(() => {
+    setThemeState(savedTheme);
+  }, [savedTheme]);
+
   const value = useMemo<ThemeContextValue>(
-    () => ({ theme, setTheme, resolvedTheme, systemTheme }),
-    [resolvedTheme, setTheme, systemTheme, theme],
+    () => ({
+      theme,
+      savedTheme,
+      setTheme: commitTheme,
+      previewTheme,
+      commitTheme,
+      restoreTheme,
+      resolvedTheme,
+      systemTheme,
+    }),
+    [commitTheme, previewTheme, resolvedTheme, restoreTheme, savedTheme, systemTheme, theme],
   );
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
@@ -117,7 +143,11 @@ export function useTheme(): ThemeContextValue {
   if (value) return value;
   return {
     theme: "system",
+    savedTheme: "system",
     setTheme: () => {},
+    previewTheme: () => {},
+    commitTheme: () => {},
+    restoreTheme: () => {},
     resolvedTheme: getSystemTheme(),
     systemTheme: getSystemTheme(),
   };
diff --git a/apps/web/e2e/helpers/wait-for-mutation.ts b/apps/web/e2e/helpers/wait-for-mutation.ts
new file mode 100644
index 0000000000..3d5b9631a5
--- /dev/null
+++ b/apps/web/e2e/helpers/wait-for-mutation.ts
@@ -0,0 +1,8 @@
+import type { Page } from "@playwright/test";
+
+export function waitForMutation(page: Page, method: string, path: RegExp) {
+  return page.waitForResponse((response) => {
+    const request = response.request();
+    return request.method() === method && path.test(new URL(response.url()).pathname);
+  });
+}
diff --git a/apps/web/e2e/pages/SSHSettingsPage.ts b/apps/web/e2e/pages/SSHSettingsPage.ts
index 70026bd5be..28e9a26ce5 100644
--- a/apps/web/e2e/pages/SSHSettingsPage.ts
+++ b/apps/web/e2e/pages/SSHSettingsPage.ts
@@ -110,6 +110,13 @@ export class SSHSettingsPage {
     return this.page.getByTestId("ssh-save-button");
   }
 
+  /** Shared settings action used when editing an existing executor. */
+  get floatingSaveButton(): Locator {
+    return this.page
+      .getByTestId("settings-floating-save")
+      .getByRole("button", { name: /save changes/i });
+  }
+
   get trustCheckbox(): Locator {
     return this.page.getByTestId("ssh-trust-checkbox");
   }
diff --git a/apps/web/e2e/pages/automations-page.ts b/apps/web/e2e/pages/automations-page.ts
index 26ee4c08d9..229532e223 100644
--- a/apps/web/e2e/pages/automations-page.ts
+++ b/apps/web/e2e/pages/automations-page.ts
@@ -24,7 +24,9 @@ export class AutomationsPage {
     this.emptyState = page.getByTestId("automations-empty");
     this.editor = page.getByTestId("automation-editor");
     this.nameInput = page.getByTestId("automation-name-input");
-    this.saveButton = page.getByTestId("automation-save-button");
+    this.saveButton = page
+      .getByTestId("settings-floating-save")
+      .getByRole("button", { name: /save changes/i });
     this.deleteButton = page.getByTestId("automation-delete-button");
     this.customScheduleInput = page.getByTestId("schedule-custom-input");
     this.addConditionButton = page.getByTestId("add-condition-button");
diff --git a/apps/web/e2e/pages/jira-settings-page.ts b/apps/web/e2e/pages/jira-settings-page.ts
index 5200ffe25f..8a9740f0ab 100644
--- a/apps/web/e2e/pages/jira-settings-page.ts
+++ b/apps/web/e2e/pages/jira-settings-page.ts
@@ -20,7 +20,9 @@ export class JiraSettingsPage {
     this.instanceSelect = page.locator("#jira-instance");
     this.authSelect = page.locator("#jira-auth");
     this.testButton = page.getByTestId("jira-test-button");
-    this.saveButton = page.getByTestId("jira-save-button");
+    this.saveButton = page
+      .getByTestId("settings-floating-save")
+      .getByRole("button", { name: /save changes/i });
     this.deleteButton = page.getByTestId("jira-delete-button");
     this.statusBanner = page.getByTestId("integration-auth-status-banner");
   }
diff --git a/apps/web/e2e/pages/linear-settings-page.ts b/apps/web/e2e/pages/linear-settings-page.ts
index 1bcb759d2b..b352273184 100644
--- a/apps/web/e2e/pages/linear-settings-page.ts
+++ b/apps/web/e2e/pages/linear-settings-page.ts
@@ -13,7 +13,9 @@ export class LinearSettingsPage {
   constructor(private page: Page) {
     this.secretInput = page.getByTestId("linear-secret-input");
     this.testButton = page.getByTestId("linear-test-button");
-    this.saveButton = page.getByTestId("linear-save-button");
+    this.saveButton = page
+      .getByTestId("settings-floating-save")
+      .getByRole("button", { name: /save changes/i });
     this.deleteButton = page.getByTestId("linear-delete-button");
     this.statusBanner = page.getByTestId("integration-auth-status-banner");
     this.copyConfigTrigger = page.getByTestId("integration-copy-config-trigger");
diff --git a/apps/web/e2e/pages/sentry-settings-page.ts b/apps/web/e2e/pages/sentry-settings-page.ts
index bfaf5b5add..b6269833a9 100644
--- a/apps/web/e2e/pages/sentry-settings-page.ts
+++ b/apps/web/e2e/pages/sentry-settings-page.ts
@@ -20,7 +20,7 @@ export class SentrySettingsPage {
     this.addUrlInput = page.getByTestId("sentry-add-url-input");
     this.addSecretInput = page.getByTestId("sentry-add-secret-input");
     this.addTestButton = page.getByTestId("sentry-add-test-button");
-    this.addSaveButton = page.getByTestId("sentry-add-save-button");
+    this.addSaveButton = page.getByRole("button", { name: "Save changes" });
   }
 
   async goto() {
diff --git a/apps/web/e2e/pages/workflow-settings-page.ts b/apps/web/e2e/pages/workflow-settings-page.ts
index 36249780c8..f31bbf43d4 100644
--- a/apps/web/e2e/pages/workflow-settings-page.ts
+++ b/apps/web/e2e/pages/workflow-settings-page.ts
@@ -6,6 +6,7 @@ export class WorkflowSettingsPage {
   readonly createDialog: Locator;
   readonly workflowNameInput: Locator;
   readonly confirmCreateButton: Locator;
+  readonly floatingSave: Locator;
   readonly cycleGuardDialog: Locator;
 
   constructor(page: Page) {
@@ -14,6 +15,7 @@ export class WorkflowSettingsPage {
     this.createDialog = page.getByTestId("create-workflow-dialog");
     this.workflowNameInput = page.getByTestId("workflow-name-input");
     this.confirmCreateButton = page.getByTestId("confirm-create-workflow");
+    this.floatingSave = page.getByTestId("settings-floating-save");
     this.cycleGuardDialog = page.getByTestId("workflow-cycle-guard-dialog");
   }
 
@@ -115,9 +117,24 @@ export class WorkflowSettingsPage {
     return card.getByTestId("add-step-button");
   }
 
-  /** The save button within a workflow card (matches button text "Save"). */
-  saveButton(card: Locator): Locator {
-    return card.getByRole("button", { name: "Save" });
+  /** Submit the route-level action without waiting for a possible guard dialog. */
+  async submitSaveChanges(touch = false): Promise<void> {
+    await expect(this.floatingSave).toBeVisible();
+    await this.activate(this.floatingSave.getByRole("button", { name: /save changes/i }), touch);
+  }
+
+  /** Save every dirty workflow contributor through the route-level action. */
+  async saveChanges(): Promise<void> {
+    await this.submitSaveChanges();
+    await expect
+      .poll(
+        async () =>
+          (await this.floatingSave.isVisible())
+            ? await this.floatingSave.getAttribute("data-dirty-contributors")
+            : null,
+        { timeout: 15_000 },
+      )
+      .toBeNull();
   }
 
   /** The delete workflow button within a card. */
@@ -127,7 +144,9 @@ export class WorkflowSettingsPage {
 
   /** The step delete confirmation dialog. */
   get stepDeleteDialog(): Locator {
-    return this.page.getByTestId("step-delete-confirm-dialog");
+    return this.page.getByRole("dialog").filter({
+      has: this.page.getByRole("heading", { name: "Delete step", exact: true }),
+    });
   }
 
   /** Returns the ordered names of all workflow cards on the page. */
diff --git a/apps/web/e2e/tests/automations-settings.spec.ts b/apps/web/e2e/tests/automations-settings.spec.ts
index c758c93637..077d934837 100644
--- a/apps/web/e2e/tests/automations-settings.spec.ts
+++ b/apps/web/e2e/tests/automations-settings.spec.ts
@@ -21,6 +21,7 @@ test.describe("Automations settings page", () => {
 
     // Fill in name
     await automations.nameInput.fill("Daily Check");
+    await expect(automations.nameInput).toHaveAttribute("data-settings-dirty", "true");
 
     // Select a schedule preset
     await automations.schedulePreset("@daily").click();
@@ -276,8 +277,15 @@ test.describe("Automations settings page", () => {
     // Disable it
     await toggle.click();
     await expect(toggle).not.toBeChecked();
+    await expect(toggle).toHaveAttribute("data-settings-dirty", "true");
+    await expect(automations.table).toHaveAttribute("data-settings-dirty", "true");
 
-    // Reload and verify it persisted
+    const floatingSave = testPage.getByTestId("settings-floating-save");
+    await expect(floatingSave).toBeVisible();
+    await floatingSave.getByRole("button", { name: "Save changes" }).click();
+    await expect(floatingSave).not.toBeVisible({ timeout: 15_000 });
+
+    // Reload only after the explicit settings save and verify it persisted.
     await testPage.reload();
     await expect(automations.table).toBeVisible({ timeout: 10_000 });
     const rowAfterReload = automations.table.locator("tr", { hasText: "Toggle Test" });
diff --git a/apps/web/e2e/tests/integrations/github-workspace-settings.spec.ts b/apps/web/e2e/tests/integrations/github-workspace-settings.spec.ts
index 09850f4c6a..3983268789 100644
--- a/apps/web/e2e/tests/integrations/github-workspace-settings.spec.ts
+++ b/apps/web/e2e/tests/integrations/github-workspace-settings.spec.ts
@@ -41,7 +41,7 @@ test.describe("GitHub workspace settings", () => {
     await testPage.getByTestId("github-scope-mode").click();
     await testPage.getByRole("option", { name: "Selected repositories" }).click();
     await testPage.getByTestId("github-scope-repos-input").fill("kdlbs/kandev");
-    await testPage.getByTestId("github-scope-save").click();
+    await testPage.getByTestId("settings-floating-save").getByRole("button").click();
     await expect(testPage.getByText("GitHub workspace settings saved").last()).toBeVisible({
       timeout: 10_000,
     });
@@ -87,7 +87,7 @@ test.describe("GitHub workspace settings", () => {
     await testPage.getByTestId("github-scope-mode").click();
     await testPage.getByRole("option", { name: "Organizations" }).click();
     await testPage.getByTestId("github-scope-orgs-input").fill("kdlbs");
-    await testPage.getByTestId("github-scope-save").click();
+    await testPage.getByTestId("settings-floating-save").getByRole("button").click();
     await expect(testPage.getByText("GitHub workspace settings saved").last()).toBeVisible({
       timeout: 10_000,
     });
@@ -111,7 +111,7 @@ test.describe("GitHub workspace settings", () => {
     await testPage.getByTestId("github-scope-repos-input").fill("not-a-repo");
     await testPage.getByTestId("github-scope-mode").click();
     await testPage.getByRole("option", { name: "Organizations" }).click();
-    await testPage.getByTestId("github-scope-save").click();
+    await testPage.getByTestId("settings-floating-save").getByRole("button").click();
     await expect(testPage.getByText("GitHub workspace settings saved").last()).toBeVisible({
       timeout: 10_000,
     });
diff --git a/apps/web/e2e/tests/integrations/jira-settings.spec.ts b/apps/web/e2e/tests/integrations/jira-settings.spec.ts
index ee06072045..0dbf462ec6 100644
--- a/apps/web/e2e/tests/integrations/jira-settings.spec.ts
+++ b/apps/web/e2e/tests/integrations/jira-settings.spec.ts
@@ -11,7 +11,7 @@ test.describe("Jira settings", () => {
     await expect(settings.siteInput).toHaveValue("");
     await expect(settings.secretInput).toHaveValue("");
     await expect(settings.statusBanner).toHaveCount(0);
-    await expect(settings.saveButton).toBeDisabled();
+    await expect(settings.saveButton).toHaveCount(0);
     await expect(settings.testButton).toBeDisabled();
 
     await settings.siteInput.fill("https://acme.atlassian.net");
@@ -38,8 +38,7 @@ test.describe("Jira settings", () => {
     });
     await settings.saveButton.click();
 
-    // After save the button label flips from "Save" to "Update" (config exists).
-    await expect(settings.saveButton).toHaveText(/Update/i);
+    await expect(settings.saveButton).toHaveCount(0);
     // The post-save probe runs async; await it before reloading so the new
     // banner state is in the DB by the time the page re-fetches the config.
     await apiClient.waitForIntegrationAuthHealthy("jira");
@@ -141,7 +140,7 @@ test.describe("Jira settings", () => {
     await settings.secretInput.fill("pat-token-value");
     await expect(settings.saveButton).toBeEnabled();
     await settings.saveButton.click();
-    await expect(settings.saveButton).toHaveText(/Update/i);
+    await expect(settings.saveButton).toHaveCount(0);
     await apiClient.waitForIntegrationAuthHealthy("jira");
 
     await testPage.reload();
@@ -214,15 +213,15 @@ test.describe("Jira settings", () => {
       secret: "api-token-value",
     });
     await settings.saveButton.click();
-    await expect(settings.saveButton).toHaveText(/Update/i);
+    await expect(settings.saveButton).toHaveCount(0);
     await apiClient.waitForIntegrationAuthHealthy("jira");
 
     await testPage.reload();
     await settings.siteInput.waitFor();
-    // Saved secret reuse: placeholder shows the masked dots, Save stays
-    // enabled with the field left blank.
+    // Saved secret reuse: placeholder shows the masked dots. A clean form has
+    // no route-level save action until the user changes an identity field.
     await expect(settings.secretInput).toHaveAttribute("placeholder", /•/);
-    await expect(settings.saveButton).toBeEnabled();
+    await expect(settings.saveButton).toHaveCount(0);
 
     // Change the site URL — the saved secret no longer applies to this host.
     await settings.siteInput.fill("https://other.atlassian.net");
@@ -232,7 +231,7 @@ test.describe("Jira settings", () => {
     // Restoring the host re-enables reuse without re-typing the token.
     await settings.siteInput.fill("https://acme.atlassian.net");
     await expect(settings.secretInput).toHaveAttribute("placeholder", /•/);
-    await expect(settings.saveButton).toBeEnabled();
+    await expect(settings.saveButton).toHaveCount(0);
 
     // Switching instance type also invalidates reuse.
     await settings.selectInstance("server");
diff --git a/apps/web/e2e/tests/integrations/linear-settings.spec.ts b/apps/web/e2e/tests/integrations/linear-settings.spec.ts
index ad8a8465db..d199df8470 100644
--- a/apps/web/e2e/tests/integrations/linear-settings.spec.ts
+++ b/apps/web/e2e/tests/integrations/linear-settings.spec.ts
@@ -12,7 +12,7 @@ test.describe("Linear settings", () => {
 
     await expect(settings.secretInput).toHaveValue("");
     await expect(settings.statusBanner).toHaveCount(0);
-    await expect(settings.saveButton).toBeDisabled();
+    await expect(settings.saveButton).toHaveCount(0);
     await expect(settings.testButton).toBeDisabled();
 
     await settings.secretInput.fill("lin_api_xxx");
@@ -34,7 +34,7 @@ test.describe("Linear settings", () => {
 
     await settings.secretInput.fill("lin_api_xxx");
     await settings.saveButton.click();
-    await expect(settings.saveButton).toHaveText(/Update/i);
+    await expect(settings.saveButton).toHaveCount(0);
     // Wait for the async post-save probe to write lastOk=true before reloading.
     await apiClient.waitForIntegrationAuthHealthy("linear");
 
@@ -63,7 +63,7 @@ test.describe("Linear settings", () => {
     await settings.gotoWorkspace(other.id);
 
     await expect(settings.secretInput).toHaveValue("");
-    await expect(settings.saveButton).toBeDisabled();
+    await expect(settings.saveButton).toHaveCount(0);
     await expect(settings.deleteButton).toHaveCount(0);
     await expect(testPage.getByText(/leave blank to keep the current value/i)).toHaveCount(0);
   });
diff --git a/apps/web/e2e/tests/integrations/mobile-linear-settings.spec.ts b/apps/web/e2e/tests/integrations/mobile-linear-settings.spec.ts
index 8057439acf..634dfaf3b3 100644
--- a/apps/web/e2e/tests/integrations/mobile-linear-settings.spec.ts
+++ b/apps/web/e2e/tests/integrations/mobile-linear-settings.spec.ts
@@ -15,7 +15,7 @@ test.describe("Linear settings on mobile", () => {
     await settings.gotoWorkspace(other.id);
 
     await expect(settings.secretInput).toHaveValue("");
-    await expect(settings.saveButton).toBeDisabled();
+    await expect(settings.saveButton).toHaveCount(0);
     await expect(testPage.getByText(/leave blank to keep the current value/i)).toHaveCount(0);
   });
 });
diff --git a/apps/web/e2e/tests/integrations/sentry-settings.spec.ts b/apps/web/e2e/tests/integrations/sentry-settings.spec.ts
index 1de9b695d5..5914a0508d 100644
--- a/apps/web/e2e/tests/integrations/sentry-settings.spec.ts
+++ b/apps/web/e2e/tests/integrations/sentry-settings.spec.ts
@@ -4,6 +4,36 @@ import { SentrySettingsPage } from "../../pages/sentry-settings-page";
 const TOKEN = "sntrys_xxx";
 
 test.describe("Sentry settings — instances", () => {
+  test("keeps an existing instance edit local until the floating Save", async ({
+    testPage,
+    apiClient,
+    seedData,
+  }) => {
+    await apiClient.mockSentryReset();
+    await apiClient.createSentryInstance({
+      workspaceId: seedData.workspaceId,
+      name: "Original Sentry",
+      secret: TOKEN,
+    });
+
+    const settings = new SentrySettingsPage(testPage);
+    await settings.goto();
+    const card = settings.cardByName("Original Sentry");
+    await card.getByTestId("sentry-instance-edit-button").click();
+    await testPage.getByTestId("sentry-edit-name-input").fill("Renamed Sentry");
+
+    expect((await apiClient.listSentryInstances(seedData.workspaceId))[0]?.name).toBe(
+      "Original Sentry",
+    );
+    const floatingSave = testPage.getByTestId("settings-floating-save");
+    await floatingSave.getByRole("button", { name: "Save changes" }).click();
+    await expect(floatingSave).not.toBeVisible({ timeout: 15_000 });
+    expect((await apiClient.listSentryInstances(seedData.workspaceId))[0]?.name).toBe(
+      "Renamed Sentry",
+    );
+    await expect(settings.cardByName("Renamed Sentry")).toBeVisible();
+  });
+
   // The settings page manages a LIST of named instances per workspace. This
   // covers add → the card appears → the backend probe flips it healthy.
   test("adds a named instance and reports it healthy", async ({ testPage, apiClient }) => {
diff --git a/apps/web/e2e/tests/plugins/plugins.spec.ts b/apps/web/e2e/tests/plugins/plugins.spec.ts
index d88e172200..e5d53034c2 100644
--- a/apps/web/e2e/tests/plugins/plugins.spec.ts
+++ b/apps/web/e2e/tests/plugins/plugins.spec.ts
@@ -241,7 +241,16 @@ test.describe("Plugins — gRPC plugin install/load/live-update/uninstall", () =
     await expect(tokenInput).toHaveAttribute("type", "password");
     await tokenInput.fill(secretToken);
     await greetingInput.fill("hello from e2e");
-    await testPage.getByRole("button", { name: "Save" }).click();
+    await expect(tokenInput).toHaveAttribute("data-settings-dirty", "true");
+    await expect(greetingInput).toHaveAttribute("data-settings-dirty", "true");
+    await expect(testPage.getByTestId("plugin-settings-card")).toHaveAttribute(
+      "data-settings-dirty",
+      "true",
+    );
+    await testPage
+      .getByTestId("settings-floating-save")
+      .getByRole("button", { name: "Save changes" })
+      .click();
 
     // --- After save the form re-fetches the MASKED config: the token shows
     // as the placeholder, never the cleartext; the greeting round-trips. ---
diff --git a/apps/web/e2e/tests/settings/config-chat-popover.spec.ts b/apps/web/e2e/tests/settings/config-chat-popover.spec.ts
index c36f76e38b..9983e4b90b 100644
--- a/apps/web/e2e/tests/settings/config-chat-popover.spec.ts
+++ b/apps/web/e2e/tests/settings/config-chat-popover.spec.ts
@@ -42,6 +42,39 @@ test.describe("Configuration Chat", () => {
     });
   });
 
+  test("keeps the floating Save action clear of the closed and open config chat", async ({
+    testPage,
+    apiClient,
+  }) => {
+    const initial = await apiClient.getUserSettings();
+    const initialLayout = initial.settings.changes_panel_layout === "tree" ? "tree" : "flat";
+    const nextLayout = initialLayout === "tree" ? "flat" : "tree";
+
+    try {
+      await testPage.goto("/settings/general/appearance");
+      const layout = testPage.getByTestId("changes-panel-layout-select");
+      await layout.click();
+      await testPage
+        .getByRole("option", { name: nextLayout === "tree" ? "Tree" : "Flat list" })
+        .click();
+
+      const floatingSave = testPage.getByTestId("settings-floating-save");
+      const saveButton = floatingSave.getByRole("button", { name: "Save changes" });
+      const configChatButton = testPage.getByRole("button", { name: "Configuration Chat" });
+      await expect(saveButton).toHaveClass(/bg-success/);
+      await expectElementsNotToIntersect(saveButton, configChatButton);
+
+      await configChatButton.click();
+      const configChatPopover = testPage.getByTestId("config-chat-popover");
+      await expect(configChatPopover).toBeVisible();
+      await expectElementAbove(saveButton, configChatPopover);
+    } finally {
+      await apiClient.rawRequest("PATCH", "/api/v1/user/settings", {
+        changes_panel_layout: initialLayout,
+      });
+    }
+  });
+
   test("starts floating, expands the same session, restores, continues, and deletes", async ({
     testPage,
   }) => {
@@ -163,3 +196,28 @@ test.describe("Configuration Chat", () => {
     await expect(clarification).not.toBeVisible({ timeout: 30_000 });
   });
 });
+
+async function expectElementsNotToIntersect(
+  first: import("@playwright/test").Locator,
+  second: import("@playwright/test").Locator,
+) {
+  const [firstBox, secondBox] = await Promise.all([first.boundingBox(), second.boundingBox()]);
+  expect(firstBox).not.toBeNull();
+  expect(secondBox).not.toBeNull();
+  const intersects =
+    firstBox!.x < secondBox!.x + secondBox!.width &&
+    firstBox!.x + firstBox!.width > secondBox!.x &&
+    firstBox!.y < secondBox!.y + secondBox!.height &&
+    firstBox!.y + firstBox!.height > secondBox!.y;
+  expect(intersects).toBe(false);
+}
+
+async function expectElementAbove(
+  upper: import("@playwright/test").Locator,
+  lower: import("@playwright/test").Locator,
+) {
+  const [upperBox, lowerBox] = await Promise.all([upper.boundingBox(), lower.boundingBox()]);
+  expect(upperBox).not.toBeNull();
+  expect(lowerBox).not.toBeNull();
+  expect(upperBox!.y + upperBox!.height).toBeLessThanOrEqual(lowerBox!.y);
+}
diff --git a/apps/web/e2e/tests/settings/copy-files-symlink-helpers.ts b/apps/web/e2e/tests/settings/copy-files-symlink-helpers.ts
index 0bd7be2127..519acdabf8 100644
--- a/apps/web/e2e/tests/settings/copy-files-symlink-helpers.ts
+++ b/apps/web/e2e/tests/settings/copy-files-symlink-helpers.ts
@@ -24,7 +24,10 @@ export async function configureSymlinkAndCreateTask(options: {
       response.request().method() === "PATCH" &&
       response.ok(),
   );
-  await page.getByRole("button", { name: "Save", exact: true }).click();
+  await page
+    .getByTestId("settings-floating-save")
+    .getByRole("button", { name: "Save changes" })
+    .click();
   await saved;
 
   const { executors } = await apiClient.listExecutors();
diff --git a/apps/web/e2e/tests/settings/docker-profile-persistence.spec.ts b/apps/web/e2e/tests/settings/docker-profile-persistence.spec.ts
index 97b970b7cf..676308b0cb 100644
--- a/apps/web/e2e/tests/settings/docker-profile-persistence.spec.ts
+++ b/apps/web/e2e/tests/settings/docker-profile-persistence.spec.ts
@@ -35,10 +35,12 @@ test.describe("Docker executor profile persistence", () => {
       });
 
       await testPage.getByRole("button", { name: "Use defaults" }).click();
-      const createButton = testPage.getByRole("button", { name: "Create Profile" });
-      await expect(createButton).toBeDisabled();
+      await expect(testPage.getByRole("button", { name: "Create Profile" })).toHaveCount(0);
+      const saveButton = testPage
+        .getByTestId("settings-floating-save")
+        .getByRole("button", { name: "Save changes" });
+      await expect(saveButton).toBeDisabled();
 
-      await testPage.getByTestId("create-profile-disabled-tooltip").hover();
       await expect(
         testPage.getByText("Build this Docker image before creating the profile."),
       ).toBeVisible();
@@ -48,8 +50,8 @@ test.describe("Docker executor profile persistence", () => {
         timeout: 10_000,
       });
 
-      await expect(createButton).toBeEnabled();
-      await createButton.click();
+      await expect(saveButton).toBeEnabled();
+      await saveButton.click();
 
       await expect(testPage).toHaveURL(/\/settings\/executors\/[^/]+$/);
       createdProfileId = testPage.url().split("/").pop() ?? null;
@@ -168,14 +170,11 @@ test.describe("Docker executor profile persistence", () => {
       const populatedTag = await imageTagInput.inputValue();
       expect(populatedTag).toMatch(/.+:.+/); // shape "name:tag"
 
-      // Save the profile.
-      await testPage.getByRole("button", { name: "Save Changes" }).click();
+      const floatingSave = testPage.getByTestId("settings-floating-save");
+      await floatingSave.getByRole("button", { name: "Save changes" }).click();
       await expect(testPage.getByText("Profile saved")).toBeVisible({ timeout: 10_000 });
 
-      // Wait for Save to complete: the stable status button returns to its ready label.
-      await expect(testPage.getByRole("button", { name: /Save Changes|Saved/ })).toBeVisible({
-        timeout: 10_000,
-      });
+      await expect(floatingSave).not.toBeVisible({ timeout: 10_000 });
 
       // Verify the values landed on profile.config.
       await expect
diff --git a/apps/web/e2e/tests/settings/keyboard-shortcuts.spec.ts b/apps/web/e2e/tests/settings/keyboard-shortcuts.spec.ts
index 013aaba991..3a3605fdbe 100644
--- a/apps/web/e2e/tests/settings/keyboard-shortcuts.spec.ts
+++ b/apps/web/e2e/tests/settings/keyboard-shortcuts.spec.ts
@@ -54,6 +54,10 @@ test.describe("Keyboard Shortcuts Settings", () => {
     // The Kbd element should now show the new shortcut
     await expect(recorder).toContainText("T", { timeout: 3_000 });
 
+    const floatingSave = testPage.getByTestId("settings-floating-save");
+    await floatingSave.getByRole("button", { name: "Save changes" }).click();
+    await expect(floatingSave).not.toBeVisible({ timeout: 10_000 });
+
     // Reload the page and verify the shortcut persisted
     await testPage.goto(KEYBOARD_SETTINGS_PATH);
     const recorderAfterReload = testPage.getByTestId("shortcut-recorder-BOTTOM_TERMINAL");
diff --git a/apps/web/e2e/tests/settings/mobile-config-chat-popover.spec.ts b/apps/web/e2e/tests/settings/mobile-config-chat-popover.spec.ts
new file mode 100644
index 0000000000..19b8f42323
--- /dev/null
+++ b/apps/web/e2e/tests/settings/mobile-config-chat-popover.spec.ts
@@ -0,0 +1,51 @@
+import { test, expect } from "../../fixtures/test-base";
+
+test.describe("Mobile config chat popover", () => {
+  test("keeps the floating Save above config chat and inside a short viewport", async ({
+    testPage,
+    apiClient,
+  }) => {
+    await testPage.setViewportSize({ width: 390, height: 667 });
+    const initial = await apiClient.getUserSettings();
+    const initialLayout = initial.settings.changes_panel_layout === "tree" ? "tree" : "flat";
+    const nextLayout = initialLayout === "tree" ? "flat" : "tree";
+
+    try {
+      await testPage.goto("/settings/general/appearance");
+      const layout = testPage.getByTestId("changes-panel-layout-select");
+      await layout.click();
+      await testPage
+        .getByRole("option", { name: nextLayout === "tree" ? "Tree" : "Flat list" })
+        .click();
+
+      await testPage.getByRole("button", { name: "Configuration Chat" }).click();
+      const saveButton = testPage
+        .getByTestId("settings-floating-save")
+        .getByRole("button", { name: "Save changes" });
+      const configChatPopover = testPage.getByTestId("config-chat-popover");
+      await expect(configChatPopover).toBeVisible();
+
+      const [saveBox, chatBox] = await Promise.all([
+        saveButton.boundingBox(),
+        configChatPopover.boundingBox(),
+      ]);
+      expect(saveBox).not.toBeNull();
+      expect(chatBox).not.toBeNull();
+      expect(saveBox!.height).toBeGreaterThanOrEqual(44);
+      expect(saveBox!.y).toBeGreaterThanOrEqual(0);
+      expect(saveBox!.y + saveBox!.height).toBeLessThanOrEqual(chatBox!.y);
+      expect(saveBox!.x + saveBox!.width).toBeLessThanOrEqual(390);
+      expect(
+        await testPage.evaluate(() => document.documentElement.scrollWidth > window.innerWidth),
+      ).toBe(false);
+
+      await saveButton.click();
+      await expect(testPage.getByTestId("settings-floating-save")).not.toBeVisible();
+      await expect(configChatPopover).toBeVisible();
+    } finally {
+      await apiClient.rawRequest("PATCH", "/api/v1/user/settings", {
+        changes_panel_layout: initialLayout,
+      });
+    }
+  });
+});
diff --git a/apps/web/e2e/tests/settings/mobile-general-settings.spec.ts b/apps/web/e2e/tests/settings/mobile-general-settings.spec.ts
index 94ed9fa223..5ecd2be92b 100644
--- a/apps/web/e2e/tests/settings/mobile-general-settings.spec.ts
+++ b/apps/web/e2e/tests/settings/mobile-general-settings.spec.ts
@@ -1,6 +1,60 @@
 import { test, expect } from "../../fixtures/test-base";
 
 test.describe("Mobile general settings", () => {
+  test("keeps the floating Save reachable without covering the last control", async ({
+    testPage,
+    apiClient,
+  }) => {
+    await testPage.setViewportSize({ width: 390, height: 844 });
+    const initial = await apiClient.getUserSettings();
+    const initialLayout = initial.settings.changes_panel_layout === "tree" ? "tree" : "flat";
+    const nextLayout = initialLayout === "tree" ? "flat" : "tree";
+
+    try {
+      await testPage.goto("/settings/general/appearance");
+      const layout = testPage.getByTestId("changes-panel-layout-select");
+      await layout.click();
+      await testPage
+        .getByRole("option", { name: nextLayout === "tree" ? "Tree" : "Flat list" })
+        .click();
+
+      const floating = testPage.getByTestId("settings-floating-save");
+      const saveButton = floating.getByRole("button", { name: "Save changes" });
+      await expect(saveButton).toBeVisible();
+      await expect(layout).toHaveAttribute("data-settings-dirty", "true");
+      await expect(testPage.getByTestId("changes-panel-layout-card")).toHaveAttribute(
+        "data-settings-dirty",
+        "true",
+      );
+      const saveBox = await saveButton.boundingBox();
+      expect(saveBox).not.toBeNull();
+      expect(saveBox!.height).toBeGreaterThanOrEqual(44);
+      expect(saveBox!.x + saveBox!.width).toBeLessThanOrEqual(390 - 16 + 1);
+      expect(saveBox!.y + saveBox!.height).toBeLessThanOrEqual(844 - 16 + 1);
+
+      const lastControl = testPage.locator("#metrics-disk-path");
+      await lastControl.scrollIntoViewIfNeeded();
+      const lastControlBox = await lastControl.boundingBox();
+      expect(lastControlBox).not.toBeNull();
+      expect(lastControlBox!.y + lastControlBox!.height).toBeLessThanOrEqual(saveBox!.y);
+      expect(
+        await testPage.evaluate(() => document.documentElement.scrollWidth > window.innerWidth),
+      ).toBe(false);
+
+      await saveButton.click();
+      await expect(floating).not.toBeVisible({ timeout: 15_000 });
+      await expect(layout).toHaveAttribute("data-settings-dirty", "false");
+      await expect(testPage.getByTestId("changes-panel-layout-card")).toHaveAttribute(
+        "data-settings-dirty",
+        "false",
+      );
+    } finally {
+      await apiClient.rawRequest("PATCH", "/api/v1/user/settings", {
+        changes_panel_layout: initialLayout,
+      });
+    }
+  });
+
   test("opens a dedicated General settings page from the overview", async ({ testPage }) => {
     await testPage.goto("/settings/general");
 
diff --git a/apps/web/e2e/tests/settings/prompts-settings.spec.ts b/apps/web/e2e/tests/settings/prompts-settings.spec.ts
index d2acc3ce60..430bb4f2cb 100644
--- a/apps/web/e2e/tests/settings/prompts-settings.spec.ts
+++ b/apps/web/e2e/tests/settings/prompts-settings.spec.ts
@@ -29,7 +29,10 @@ test.describe("Prompts settings — duplicate name handling", () => {
     await expect(form).toBeVisible();
     await form.getByTestId("prompt-name-input").fill("dupe-prompt");
     await form.getByTestId("prompt-content-input").fill("second content");
-    await form.getByTestId("prompt-submit").click();
+    await testPage
+      .getByTestId("settings-floating-save")
+      .getByRole("button", { name: "Save changes" })
+      .click();
 
     const toast = testPage.getByTestId("toast-message");
     await expect(toast).toBeVisible({ timeout: 5_000 });
@@ -57,14 +60,18 @@ test.describe("Prompts settings — duplicate name handling", () => {
 
     const nameInput = betaRow.getByTestId("prompt-name-input");
     await nameInput.fill("alpha");
-    await betaRow.getByTestId("prompt-submit").click();
+    await testPage
+      .getByTestId("settings-floating-save")
+      .getByRole("button", { name: "Save changes" })
+      .click();
 
     const toast = testPage.getByTestId("toast-message");
     await expect(toast).toBeVisible({ timeout: 5_000 });
     await expect(toast).toContainText(/already exists/i);
 
-    // Backend rejected — the row must still exist under its original name.
-    await testPage.reload();
+    // Backend rejected. Cancel the dirty draft and confirm the original row
+    // remains visible without forcing a guarded page reload.
+    await betaRow.getByRole("button", { name: "Cancel" }).click();
     await expect(
       testPage.locator('[data-testid="prompt-list-item"][data-prompt-name="beta"]'),
     ).toBeVisible();
@@ -81,7 +88,10 @@ test.describe("Prompts settings — duplicate name handling", () => {
     const form = testPage.getByTestId("prompt-create-form");
     await form.getByTestId("prompt-name-input").fill("e2e-fresh-prompt");
     await form.getByTestId("prompt-content-input").fill("hello world");
-    await form.getByTestId("prompt-submit").click();
+    await testPage
+      .getByTestId("settings-floating-save")
+      .getByRole("button", { name: "Save changes" })
+      .click();
 
     await expect(
       testPage.locator('[data-testid="prompt-list-item"][data-prompt-name="e2e-fresh-prompt"]'),
diff --git a/apps/web/e2e/tests/settings/settings-manual-save.spec.ts b/apps/web/e2e/tests/settings/settings-manual-save.spec.ts
new file mode 100644
index 0000000000..7fac2a848b
--- /dev/null
+++ b/apps/web/e2e/tests/settings/settings-manual-save.spec.ts
@@ -0,0 +1,126 @@
+import { test, expect } from "../../fixtures/test-base";
+
+const APPEARANCE_PATH = "/settings/general/appearance";
+const TERMINAL_PATH = "/settings/general/terminal";
+const NOTIFICATIONS_PATH = "/settings/general/notifications";
+
+test.describe("Settings manual save", () => {
+  test("keeps Appearance changes local and guards dirty navigation", async ({
+    testPage,
+    apiClient,
+  }) => {
+    const initial = await apiClient.getUserSettings();
+    const initialLayout = initial.settings.changes_panel_layout === "tree" ? "tree" : "flat";
+    const nextLayout = initialLayout === "tree" ? "flat" : "tree";
+
+    try {
+      await testPage.goto(APPEARANCE_PATH);
+      await expect(
+        testPage.getByRole("heading", { name: "Appearance", exact: true }),
+      ).toBeVisible();
+
+      const layout = testPage.getByTestId("changes-panel-layout-select");
+      await layout.click();
+      await testPage
+        .getByRole("option", { name: nextLayout === "tree" ? "Tree" : "Flat list" })
+        .click();
+
+      const floatingSave = testPage.getByTestId("settings-floating-save");
+      await expect(floatingSave).toBeVisible();
+      await expect(testPage.getByTestId("changes-panel-layout-card")).toHaveAttribute(
+        "data-settings-dirty",
+        "true",
+      );
+      expect((await apiClient.getUserSettings()).settings.changes_panel_layout).toBe(
+        initial.settings.changes_panel_layout,
+      );
+
+      await testPage.getByRole("link", { name: "Terminal", exact: true }).first().click();
+      const navigationDialog = testPage.getByRole("alertdialog", {
+        name: "Save changes before leaving?",
+      });
+      await expect(navigationDialog).toBeVisible();
+      await navigationDialog.getByRole("button", { name: "Continue editing" }).click();
+      await expect(testPage).toHaveURL(new RegExp(`${APPEARANCE_PATH}$`));
+
+      await testPage.getByRole("link", { name: "Terminal", exact: true }).first().click();
+      await expect(navigationDialog).toBeVisible();
+      await navigationDialog.getByRole("button", { name: "Save and leave" }).click();
+      await expect(testPage).toHaveURL(new RegExp(`${TERMINAL_PATH}$`));
+      expect((await apiClient.getUserSettings()).settings.changes_panel_layout).toBe(nextLayout);
+    } finally {
+      await apiClient.rawRequest("PATCH", "/api/v1/user/settings", {
+        changes_panel_layout: initialLayout,
+      });
+    }
+  });
+
+  test("persists Terminal changes only when the floating action is pressed", async ({
+    testPage,
+    apiClient,
+  }) => {
+    const initial = await apiClient.getUserSettings();
+    const initialSize = Number(initial.settings.terminal_font_size) || 13;
+    const nextSize = initialSize === 18 ? 17 : 18;
+
+    try {
+      await testPage.goto(TERMINAL_PATH);
+      const sizeInput = testPage.getByTestId("terminal-font-size-input");
+      await expect(sizeInput).toBeVisible();
+      await sizeInput.fill(String(nextSize));
+
+      expect((await apiClient.getUserSettings()).settings.terminal_font_size).toBe(
+        initial.settings.terminal_font_size,
+      );
+      const floatingSave = testPage.getByTestId("settings-floating-save");
+      await expect(floatingSave).toBeVisible();
+      await expect(testPage.getByTestId("terminal-font-size-card")).toHaveAttribute(
+        "data-settings-dirty",
+        "true",
+      );
+      await floatingSave.getByRole("button", { name: "Save changes" }).click();
+      await expect(floatingSave).not.toBeVisible({ timeout: 15_000 });
+      expect((await apiClient.getUserSettings()).settings.terminal_font_size).toBe(nextSize);
+
+      await testPage.reload();
+      await expect(testPage.getByTestId("terminal-font-size-input")).toHaveValue(String(nextSize));
+    } finally {
+      await apiClient.saveUserSettings({ terminal_font_size: initialSize });
+    }
+  });
+
+  test("keeps notification sound changes local until Save", async ({ testPage }) => {
+    await testPage.addInitScript(() => {
+      window.localStorage.setItem(
+        "kandev.notifications.sound",
+        JSON.stringify({ enabled: false, presetId: "plim" }),
+      );
+    });
+    await testPage.goto(NOTIFICATIONS_PATH);
+
+    const soundToggle = testPage.getByRole("switch", { name: "Enable notification sound" });
+    await soundToggle.click();
+
+    await expect(soundToggle).toHaveAttribute("data-settings-dirty", "true");
+    await expect(testPage.getByTestId("notification-sound-group")).toHaveAttribute(
+      "data-settings-dirty",
+      "true",
+    );
+    expect(
+      await testPage.evaluate(() =>
+        JSON.parse(window.localStorage.getItem("kandev.notifications.sound") ?? "null"),
+      ),
+    ).toEqual({ enabled: false, presetId: "plim" });
+
+    await testPage
+      .getByTestId("settings-floating-save")
+      .getByRole("button", { name: "Save changes" })
+      .click();
+    await expect(soundToggle).toHaveAttribute("data-settings-dirty", "false");
+    expect(
+      await testPage.evaluate(() =>
+        JSON.parse(window.localStorage.getItem("kandev.notifications.sound") ?? "null"),
+      ),
+    ).toEqual({ enabled: true, presetId: "plim" });
+  });
+});
diff --git a/apps/web/e2e/tests/ssh/persistence.spec.ts b/apps/web/e2e/tests/ssh/persistence.spec.ts
index e81ff8bccd..bf31625b70 100644
--- a/apps/web/e2e/tests/ssh/persistence.spec.ts
+++ b/apps/web/e2e/tests/ssh/persistence.spec.ts
@@ -21,6 +21,40 @@ test.describe("ssh executor — persistence + UI sweep", () => {
     await expect(page.pinnedFingerprint()).toHaveText(seedData.sshTarget.hostFingerprint);
   });
 
+  test("existing executor edits persist only after the floating Save", async ({
+    testPage,
+    apiClient,
+    seedData,
+  }) => {
+    const page = new SSHSettingsPage(testPage);
+    await page.gotoExisting(seedData.sshExecutorId);
+
+    const originalName = await page.nameInput.inputValue();
+    const renamed = `${originalName} renamed`;
+    await page.nameInput.fill(renamed);
+    await expect(page.floatingSaveButton).toBeVisible();
+    await expect(page.floatingSaveButton).toBeDisabled();
+
+    const beforeSave = (await apiClient.listExecutors()).executors.find(
+      (executor) => executor.id === seedData.sshExecutorId,
+    );
+    expect(beforeSave?.name).toBe(originalName);
+
+    await page.clickTest();
+    expect(await page.waitForTestResult()).toBe("true");
+    await page.tickTrust();
+    await expect(page.floatingSaveButton).toBeEnabled();
+    await page.floatingSaveButton.click();
+    await expect(page.floatingSaveButton).not.toBeVisible({ timeout: 15_000 });
+
+    const afterSave = (await apiClient.listExecutors()).executors.find(
+      (executor) => executor.id === seedData.sshExecutorId,
+    );
+    expect(afterSave?.name).toBe(renamed);
+    await testPage.reload();
+    await expect(page.nameInput).toHaveValue(renamed);
+  });
+
   test("opening the new-executor form does not leak state from a prior session", async ({
     testPage,
   }) => {
diff --git a/apps/web/e2e/tests/system/mobile-storage-maintenance.spec.ts b/apps/web/e2e/tests/system/mobile-storage-maintenance.spec.ts
index 827631253b..72fad46850 100644
--- a/apps/web/e2e/tests/system/mobile-storage-maintenance.spec.ts
+++ b/apps/web/e2e/tests/system/mobile-storage-maintenance.spec.ts
@@ -26,6 +26,15 @@ test.describe("Mobile storage maintenance", () => {
       "Turning it off does not disable Analyze or Run now",
     );
     await testPage.keyboard.press("Escape");
+    await testPage.getByTestId("storage-scheduling-enabled").click();
+    await testPage.getByTestId("storage-idle-period").fill("12");
+    await expect(testPage.getByTestId("storage-policy-section-schedule")).toHaveAttribute(
+      "data-settings-dirty",
+      "true",
+    );
+    await expect(testPage.getByTestId("settings-floating-save")).toBeVisible();
+    await testPage.getByRole("button", { name: "Save changes" }).click();
+    await expect(testPage.getByText("Storage policy saved")).toBeVisible();
     await testPage.getByTestId("storage-analyze").click();
     await expect(testPage.getByTestId("storage-analyze")).toHaveAttribute(
       "data-job-state",
diff --git a/apps/web/e2e/tests/system/storage-maintenance.spec.ts b/apps/web/e2e/tests/system/storage-maintenance.spec.ts
index f06ce63e44..12c9d0ab17 100644
--- a/apps/web/e2e/tests/system/storage-maintenance.spec.ts
+++ b/apps/web/e2e/tests/system/storage-maintenance.spec.ts
@@ -85,7 +85,15 @@ test.describe("System storage maintenance", () => {
     await expect(testPage.getByTestId("storage-check-interval")).toBeEnabled();
     await expect(testPage.getByTestId("storage-idle-period")).toBeEnabled();
     await testPage.getByTestId("storage-idle-period").fill("11");
-    await testPage.getByTestId("storage-save-settings").click();
+    await expect(testPage.getByTestId("storage-idle-period")).toHaveAttribute(
+      "data-settings-dirty",
+      "true",
+    );
+    await expect(testPage.getByTestId("storage-policy-section-schedule")).toHaveAttribute(
+      "data-settings-dirty",
+      "true",
+    );
+    await testPage.getByRole("button", { name: "Save changes" }).click();
     await expect(testPage.getByText("Storage policy saved")).toBeVisible();
     await testPage.reload();
     await expect(scheduling).toHaveAttribute("data-state", "checked");
@@ -93,7 +101,7 @@ test.describe("System storage maintenance", () => {
 
     // Stop the newly enabled scheduler before exercising a deterministic manual run.
     await scheduling.click();
-    await testPage.getByTestId("storage-save-settings").click();
+    await testPage.getByRole("button", { name: "Save changes" }).click();
     await expect(scheduling).toHaveAttribute("data-state", "unchecked");
 
     await testPage.getByTestId("storage-analyze").click();
diff --git a/apps/web/e2e/tests/task/archive-confirmation-preference.spec.ts b/apps/web/e2e/tests/task/archive-confirmation-preference.spec.ts
index e5b500e2f4..7e4b8058b0 100644
--- a/apps/web/e2e/tests/task/archive-confirmation-preference.spec.ts
+++ b/apps/web/e2e/tests/task/archive-confirmation-preference.spec.ts
@@ -12,6 +12,11 @@ test.describe("Archive confirmation preference", () => {
     await expect(toggle).toBeChecked();
     await toggle.click();
     await expect(toggle).not.toBeChecked();
+    expect((await apiClient.getUserSettings()).settings.confirm_task_archive).toBe(true);
+    await testPage
+      .getByTestId("settings-floating-save")
+      .getByRole("button", { name: "Save changes" })
+      .click();
     await expect
       .poll(async () => (await apiClient.getUserSettings()).settings.confirm_task_archive)
       .toBe(false);
diff --git a/apps/web/e2e/tests/task/mobile-archive-confirmation-preference.spec.ts b/apps/web/e2e/tests/task/mobile-archive-confirmation-preference.spec.ts
index 22fd9968cc..9556147092 100644
--- a/apps/web/e2e/tests/task/mobile-archive-confirmation-preference.spec.ts
+++ b/apps/web/e2e/tests/task/mobile-archive-confirmation-preference.spec.ts
@@ -12,6 +12,11 @@ test.describe("Archive confirmation preference on mobile", () => {
     await expect(toggle).toBeChecked();
     await toggle.click();
     await expect(toggle).not.toBeChecked();
+    expect((await apiClient.getUserSettings()).settings.confirm_task_archive).toBe(true);
+    await testPage
+      .getByTestId("settings-floating-save")
+      .getByRole("button", { name: "Save changes" })
+      .click();
     await expect
       .poll(async () => (await apiClient.getUserSettings()).settings.confirm_task_archive)
       .toBe(false);
diff --git a/apps/web/e2e/tests/workflow/mobile-workflow-cycle-guardrails.spec.ts b/apps/web/e2e/tests/workflow/mobile-workflow-cycle-guardrails.spec.ts
index 49507d2fb0..c81e28e084 100644
--- a/apps/web/e2e/tests/workflow/mobile-workflow-cycle-guardrails.spec.ts
+++ b/apps/web/e2e/tests/workflow/mobile-workflow-cycle-guardrails.spec.ts
@@ -15,7 +15,7 @@ test.describe("Workflow cycle guardrails on mobile", () => {
     await settings.setTurnCompleteTransition(card, "Todo", "Move to next step", true);
     await settings.setAutoStart(card, "In Progress", true, true);
     await settings.setTurnCompleteTransition(card, "In Progress", "Move to previous step", true);
-    await settings.saveButton(card).tap();
+    await settings.submitSaveChanges(true);
 
     const dialog = settings.cycleGuardDialog;
     await expect(dialog.getByRole("heading", { name: "Workflow cycle blocked" })).toBeVisible();
@@ -62,7 +62,7 @@ test.describe("Workflow cycle guardrails on mobile", () => {
     await settings.setAutoStart(card, "Todo", true, true);
     await settings.setTurnCompleteTransition(card, "Todo", "Move to next step", true);
     await settings.setTurnCompleteTransition(card, "In Progress", "Move to previous step", true);
-    await settings.saveButton(card).tap();
+    await settings.submitSaveChanges(true);
 
     const dialog = settings.cycleGuardDialog;
     await expect(dialog.getByRole("heading", { name: "Confirm workflow cycle" })).toBeVisible();
diff --git a/apps/web/e2e/tests/workflow/mobile-workflow-settings.spec.ts b/apps/web/e2e/tests/workflow/mobile-workflow-settings.spec.ts
index a5dbc9e7ec..32968011c0 100644
--- a/apps/web/e2e/tests/workflow/mobile-workflow-settings.spec.ts
+++ b/apps/web/e2e/tests/workflow/mobile-workflow-settings.spec.ts
@@ -28,12 +28,69 @@ test.describe("Workflow settings on mobile", () => {
     await childCompletionSelect.click();
     await testPage.getByRole("option", { name: "Move to next step" }).click();
 
-    await page.saveButton(card).click();
-    await expect
-      .poll(async () => {
-        const { steps } = await apiClient.listWorkflowSteps(workflow.id);
-        return steps.find((step) => step.id === waitStep.id)?.events?.on_children_completed;
-      })
-      .toEqual([{ type: "move_to_next" }]);
+    const beforeSave = await apiClient.listWorkflowSteps(workflow.id);
+    expect(
+      beforeSave.steps.find((step) => step.id === waitStep.id)?.events?.on_children_completed,
+    ).toBeUndefined();
+
+    const floatingSave = page.floatingSave;
+    await expect(floatingSave).toBeVisible();
+    const saveButton = floatingSave.getByRole("button", { name: "Save changes" });
+    const saveBox = await saveButton.boundingBox();
+    expect(saveBox).not.toBeNull();
+    expect(saveBox!.height).toBeGreaterThanOrEqual(44);
+    await page.saveChanges();
+    const afterSave = await apiClient.listWorkflowSteps(workflow.id);
+    expect(
+      afterSave.steps.find((step) => step.id === waitStep.id)?.events?.on_children_completed,
+    ).toEqual([{ type: "move_to_next" }]);
+
+    const viewportWidth = await testPage.evaluate(() => window.innerWidth);
+    const editorControls = [
+      card.getByPlaceholder("Step name"),
+      childCompletionSelect,
+      card.getByRole("button", { name: "Delete", exact: true }),
+    ];
+    for (const control of editorControls) {
+      const box = await control.boundingBox();
+      expect(box).not.toBeNull();
+      expect(box!.x).toBeGreaterThanOrEqual(0);
+      expect(box!.x + box!.width).toBeLessThanOrEqual(viewportWidth);
+    }
+    expect(
+      await testPage.evaluate(() => document.documentElement.scrollWidth > window.innerWidth),
+    ).toBe(false);
+  });
+
+  test("keeps workflow controls within the mobile viewport", async ({ testPage, seedData }) => {
+    const page = new WorkflowSettingsPage(testPage);
+    await page.goto(seedData.workspaceId);
+
+    const card = await page.findWorkflowCard("E2E Workflow");
+    const nameInput = card.locator("input").first();
+    await nameInput.fill("Mobile Workflow Draft");
+    await expect(page.floatingSave).toBeVisible();
+    await expect(nameInput).toHaveAttribute("data-settings-dirty", "true");
+    await expect(card).toHaveAttribute("data-settings-dirty", "true");
+
+    const viewportWidth = await testPage.evaluate(() => window.innerWidth);
+    const controls = [
+      page.addWorkflowButton,
+      card.locator("input").first(),
+      page.workflowAgentProfileSelect(card),
+      page.deleteWorkflowButton(card),
+      page.floatingSave.getByRole("button", { name: "Save changes" }),
+    ];
+    for (const control of controls) {
+      const box = await control.boundingBox();
+      expect(box).not.toBeNull();
+      expect(box!.x).toBeGreaterThanOrEqual(0);
+      expect(box!.x + box!.width).toBeLessThanOrEqual(viewportWidth);
+    }
+
+    const hasDocumentOverflow = await testPage.evaluate(
+      () => document.documentElement.scrollWidth > window.innerWidth,
+    );
+    expect(hasDocumentOverflow).toBe(false);
   });
 });
diff --git a/apps/web/e2e/tests/workflow/workflow-agent-profile.spec.ts b/apps/web/e2e/tests/workflow/workflow-agent-profile.spec.ts
index 7a803de510..08f0c23309 100644
--- a/apps/web/e2e/tests/workflow/workflow-agent-profile.spec.ts
+++ b/apps/web/e2e/tests/workflow/workflow-agent-profile.spec.ts
@@ -7,7 +7,7 @@ import { KanbanPage } from "../../pages/kanban-page";
 useRegularMode();
 
 test.describe("Workflow agent profile", () => {
-  test("set workflow-level agent profile in settings and persist after save", async ({
+  test("saves the workflow-level agent profile explicitly", async ({
     testPage,
     seedData,
     apiClient,
@@ -33,9 +33,12 @@ test.describe("Workflow agent profile", () => {
     await profileSelect.click();
     await testPage.getByRole("option", { name: profileLabel }).click();
 
-    // Save the workflow
-    await page.saveButton(card).click();
-    await testPage.waitForTimeout(1000);
+    expect(
+      (await apiClient.listWorkflows(seedData.workspaceId)).workflows.find(
+        (workflow) => workflow.id === seedData.workflowId,
+      )?.agent_profile_id,
+    ).not.toBe(agentProfile.id);
+    await page.saveChanges();
 
     // Reload and verify the selection persists
     await page.goto(seedData.workspaceId);
@@ -80,12 +83,10 @@ test.describe("Workflow agent profile", () => {
     await stepProfileSelect.click();
     await testPage.getByRole("option", { name: profileLabel }).click();
 
-    // Wait for debounced update to propagate
-    await testPage.waitForTimeout(600);
-
-    // Save the workflow
-    await page.saveButton(card).click();
-    await testPage.waitForTimeout(1000);
+    expect(
+      (await apiClient.listWorkflowSteps(seedData.workflowId)).steps[0]?.agent_profile_id,
+    ).not.toBe(agentProfile.id);
+    await page.saveChanges();
 
     // Reload and verify - the step should now show the agent profile icon (IconUserCog)
     await page.goto(seedData.workspaceId);
diff --git a/apps/web/e2e/tests/workflow/workflow-cycle-guardrails.spec.ts b/apps/web/e2e/tests/workflow/workflow-cycle-guardrails.spec.ts
index 08d4a80345..2e44d5eacc 100644
--- a/apps/web/e2e/tests/workflow/workflow-cycle-guardrails.spec.ts
+++ b/apps/web/e2e/tests/workflow/workflow-cycle-guardrails.spec.ts
@@ -58,6 +58,12 @@ test.describe("Workflow cycle guardrails", () => {
     await settings.setTurnCompleteTransition(card, "Review", "Move to previous step");
     await dialog.getByRole("button", { name: "Apply anyway" }).click();
     await expect(dialog).not.toBeVisible();
+    persistedSteps = await apiClient.listWorkflowSteps(workflow.id);
+    expect(
+      persistedSteps.steps.find((step) => step.id === review.id)?.events?.on_turn_complete,
+    ).toBeFalsy();
+
+    await settings.saveChanges();
     await expect
       .poll(async () => {
         persistedSteps = await apiClient.listWorkflowSteps(workflow.id);
@@ -88,7 +94,7 @@ test.describe("Workflow cycle guardrails", () => {
     await settings.setTurnCompleteTransition(card, "Todo", "Move to next step");
     await settings.setAutoStart(card, "In Progress", true);
     await settings.setTurnCompleteTransition(card, "In Progress", "Move to previous step");
-    await settings.saveButton(card).click();
+    await settings.submitSaveChanges();
 
     const dialog = settings.cycleGuardDialog;
     await expect(dialog.getByRole("heading", { name: "Workflow cycle blocked" })).toBeVisible();
@@ -114,7 +120,7 @@ test.describe("Workflow cycle guardrails", () => {
     await settings.setTurnCompleteTransition(card, "Todo", "Move to next step");
     await settings.setTurnCompleteTransition(card, "In Progress", "Move to previous step");
     await expect(card.locator('[data-testid^="workflow-cycle-diagnostic-"]')).toHaveCount(0);
-    await settings.saveButton(card).click();
+    await settings.submitSaveChanges();
 
     await expect(settings.cycleGuardDialog).not.toBeVisible();
     await expect
diff --git a/apps/web/e2e/tests/workflow/workflow-settings.spec.ts b/apps/web/e2e/tests/workflow/workflow-settings.spec.ts
index 71e3accb05..04a0102f55 100644
--- a/apps/web/e2e/tests/workflow/workflow-settings.spec.ts
+++ b/apps/web/e2e/tests/workflow/workflow-settings.spec.ts
@@ -1,6 +1,15 @@
+import type { Locator } from "@playwright/test";
 import { test, expect } from "../../fixtures/test-base";
 import { WorkflowSettingsPage } from "../../pages/workflow-settings-page";
 
+async function maxRingSpread(locator: Locator): Promise<number> {
+  const boxShadow = await locator.evaluate((element) => getComputedStyle(element).boxShadow);
+  const spreads = Array.from(boxShadow.matchAll(/0px 0px 0px ([\d.]+)px/g), (match) =>
+    Number(match[1]),
+  );
+  return Math.max(0, ...spreads);
+}
+
 test.describe("Workflow settings", () => {
   test("hides system-only templates from the add workflow dialog", async ({
     testPage,
@@ -29,27 +38,41 @@ test.describe("Workflow settings", () => {
     }
   });
 
-  test("creates a workflow from template and persists after save", async ({
+  test("creates a workflow from template only after Save", async ({
     testPage,
+    apiClient,
     seedData,
   }) => {
     const page = new WorkflowSettingsPage(testPage);
     await page.goto(seedData.workspaceId);
 
-    // Create a new workflow from the first available template
-    await page.createWorkflow("Template Test Workflow");
+    // Select a known template so the step-level assertions do not depend on template ordering.
+    await page.createWorkflow("Template Test Workflow", "Kanban");
 
     // Verify the new card appears
     const card = await page.findWorkflowCard("Template Test Workflow");
     await expect(card).toBeVisible();
+    await expect(card).toHaveAttribute("data-settings-dirty", "true");
+    await expect(card.locator("input").first()).toHaveAttribute("data-settings-dirty", "true");
+    await expect(page.stepNodeByName(card, "Backlog")).toHaveAttribute(
+      "data-settings-dirty",
+      "true",
+    );
 
-    // Save the workflow
-    await page.saveButton(card).click();
+    const beforeSave = await apiClient.listWorkflows(seedData.workspaceId);
+    expect(
+      beforeSave.workflows.some((workflow) => workflow.name === "Template Test Workflow"),
+    ).toBe(false);
+    await expect(page.floatingSave).toBeVisible();
+    await page.saveChanges();
 
-    // Wait for save to complete
-    await testPage.waitForTimeout(1000);
+    const savedCard = await page.findWorkflowCard("Template Test Workflow");
+    await expect(savedCard).toHaveAttribute("data-settings-dirty", "false");
+    await expect(page.stepNodeByName(savedCard, "Backlog")).toHaveAttribute(
+      "data-settings-dirty",
+      "false",
+    );
 
-    // Reload and verify persistence
     await page.goto(seedData.workspaceId);
     const reloadedCard = await page.findWorkflowCard("Template Test Workflow");
     await expect(reloadedCard).toBeVisible();
@@ -70,18 +93,15 @@ test.describe("Workflow settings", () => {
     await expect(card.getByText("Review")).toBeVisible();
     await expect(card.getByText("Done")).toBeVisible();
 
-    // Save
-    await page.saveButton(card).click();
-    await testPage.waitForTimeout(1000);
-
-    // Reload and verify
+    await page.saveChanges();
     await page.goto(seedData.workspaceId);
     const reloadedCard = await page.findWorkflowCard("Custom Test Workflow");
     await expect(reloadedCard).toBeVisible();
   });
 
-  test("adds a step to template workflow and persists after save", async ({
+  test("adds a step locally and persists it with Save", async ({
     testPage,
+    apiClient,
     seedData,
   }) => {
     const page = new WorkflowSettingsPage(testPage);
@@ -92,18 +112,23 @@ test.describe("Workflow settings", () => {
 
     const card = await page.findWorkflowCard("Step Add Test");
     await expect(card).toBeVisible();
+    await page.saveChanges();
 
-    // Click the add step button
-    await page.addStepButton(card).click();
+    const persistedCard = await page.findWorkflowCard("Step Add Test");
+    const workflows = await apiClient.listWorkflows(seedData.workspaceId);
+    const workflow = workflows.workflows.find((item) => item.name === "Step Add Test");
+    expect(workflow).toBeDefined();
+    const stepsBefore = await apiClient.listWorkflowSteps(workflow!.id);
 
-    // A "New Step" should appear
-    await expect(card.getByText("New Step")).toBeVisible();
+    await page.addStepButton(persistedCard).click();
 
-    // Save the workflow
-    await page.saveButton(card).click();
-    await testPage.waitForTimeout(1000);
+    await expect(persistedCard.getByText("New Step")).toBeVisible();
+    expect((await apiClient.listWorkflowSteps(workflow!.id)).steps).toHaveLength(
+      stepsBefore.steps.length,
+    );
+
+    await page.saveChanges();
 
-    // Reload and verify the extra step persists
     await page.goto(seedData.workspaceId);
     const reloadedCard = await page.findWorkflowCard("Step Add Test");
     await expect(reloadedCard).toBeVisible();
@@ -140,13 +165,16 @@ test.describe("Workflow settings", () => {
       "All Children Done",
     );
 
-    await page.saveButton(card).click();
-    await expect
-      .poll(async () => {
-        const { steps } = await apiClient.listWorkflowSteps(workflow.id);
-        return steps.find((step) => step.id === waitStep.id)?.events?.on_children_completed;
-      })
-      .toEqual([{ type: "move_to_step", config: { step_id: doneStep.id } }]);
+    const beforeSave = await apiClient.listWorkflowSteps(workflow.id);
+    expect(
+      beforeSave.steps.find((step) => step.id === waitStep.id)?.events?.on_children_completed,
+    ).toBeUndefined();
+
+    await page.saveChanges();
+    const afterSave = await apiClient.listWorkflowSteps(workflow.id);
+    expect(
+      afterSave.steps.find((step) => step.id === waitStep.id)?.events?.on_children_completed,
+    ).toEqual([{ type: "move_to_step", config: { step_id: doneStep.id } }]);
   });
 
   test("configures WIP limit and feeder step", async ({ testPage, apiClient, seedData }) => {
@@ -165,20 +193,24 @@ test.describe("Workflow settings", () => {
     await card.getByTestId(`${reviewStep.id}-pull-from-step-select`).click();
     await testPage.getByRole("option", { name: "Backlog" }).click();
 
-    await page.saveButton(card).click();
+    expect(
+      (await apiClient.listWorkflowSteps(workflow.id)).steps.find(
+        (step) => step.id === reviewStep.id,
+      ),
+    ).not.toMatchObject({ wip_limit: 2, pull_from_step_id: backlogStep.id });
 
-    await expect
-      .poll(async () => {
-        const { steps } = await apiClient.listWorkflowSteps(workflow.id);
-        return steps.find((step) => step.id === reviewStep.id);
-      })
-      .toMatchObject({
-        wip_limit: 2,
-        pull_from_step_id: backlogStep.id,
-      });
+    await page.saveChanges();
+    expect(
+      (await apiClient.listWorkflowSteps(workflow.id)).steps.find(
+        (step) => step.id === reviewStep.id,
+      ),
+    ).toMatchObject({
+      wip_limit: 2,
+      pull_from_step_id: backlogStep.id,
+    });
   });
 
-  test("modifies a template step name and persists after save", async ({ testPage, seedData }) => {
+  test("modifies a step name only after Save", async ({ testPage, apiClient, seedData }) => {
     const page = new WorkflowSettingsPage(testPage);
     await page.goto(seedData.workspaceId);
 
@@ -189,10 +221,7 @@ test.describe("Workflow settings", () => {
       return;
     }
 
-    // Create workflow from template
-    await page.createWorkflow("Step Edit Test");
-
-    const card = await page.findWorkflowCard("Step Edit Test");
+    const card = await page.findWorkflowCard("E2E Workflow");
     await expect(card).toBeVisible();
 
     // Click on the first step to open config panel
@@ -201,30 +230,49 @@ test.describe("Workflow settings", () => {
 
     // Find the step name input in the config panel and rename it
     const nameInput = card.getByPlaceholder("Step name");
-    await nameInput.clear();
     await nameInput.fill("Renamed Step");
 
-    // Wait for debounced name update to propagate to state (500ms debounce)
-    await testPage.waitForTimeout(600);
+    await expect(nameInput).toHaveAttribute("data-settings-dirty", "true");
+    await expect(card).toHaveAttribute("data-settings-dirty", "true");
+    const stepPanel = card.getByTestId(`workflow-step-panel-${seedData.steps[0].id}`);
+    const dirtyStepNode = card.getByTestId(`workflow-step-node-${seedData.steps[0].id}`);
 
-    // Save the workflow
-    await page.saveButton(card).click();
-    await testPage.waitForTimeout(1000);
+    await expect(stepPanel).toHaveAttribute("data-settings-dirty", "true");
+    await expect(card).toHaveAttribute("data-settings-dirty-level", "card");
+    await expect(stepPanel).toHaveAttribute("data-settings-dirty-level", "container");
+    await expect(dirtyStepNode).toHaveAttribute("data-settings-dirty", "true");
+    await expect(dirtyStepNode).toHaveAttribute("data-settings-dirty-level", "container");
+    await nameInput.blur();
+    expect(await maxRingSpread(nameInput)).toBeGreaterThan(0);
+    expect(await maxRingSpread(card)).toBe(0);
+    expect(await maxRingSpread(stepPanel)).toBe(0);
+    expect(await maxRingSpread(dirtyStepNode)).toBe(0);
+
+    expect((await apiClient.listWorkflowSteps(seedData.workflowId)).steps[0]?.name).toBe(
+      firstStepName,
+    );
+    await page.saveChanges();
+
+    await expect(nameInput).toHaveAttribute("data-settings-dirty", "false");
+    await expect(card).toHaveAttribute("data-settings-dirty", "false");
 
-    // Reload and verify the renamed step persists
     await page.goto(seedData.workspaceId);
-    const reloadedCard = await page.findWorkflowCard("Step Edit Test");
+    const reloadedCard = await page.findWorkflowCard("E2E Workflow");
     await expect(reloadedCard).toBeVisible();
     await expect(reloadedCard.getByText("Renamed Step")).toBeVisible();
   });
 
-  test("shows delete confirmation dialog when removing a step", async ({ testPage, seedData }) => {
+  test("shows delete confirmation dialog when removing a persisted step", async ({
+    testPage,
+    apiClient,
+    seedData,
+  }) => {
+    const workflow = await apiClient.createWorkflow(seedData.workspaceId, "Delete Step Test");
+    await apiClient.createWorkflowStep(workflow.id, "Keep", 0);
+    await apiClient.createWorkflowStep(workflow.id, "Review", 1);
     const page = new WorkflowSettingsPage(testPage);
     await page.goto(seedData.workspaceId);
 
-    // Create a custom workflow so we don't affect the seeded one
-    await page.createWorkflow("Delete Step Test", "Custom");
-
     const card = await page.findWorkflowCard("Delete Step Test");
     await expect(card).toBeVisible();
 
@@ -243,7 +291,7 @@ test.describe("Workflow settings", () => {
     // Delete again and confirm
     await page.clickDeleteStepButton(card, "Review");
     await expect(page.stepDeleteDialog).toBeVisible();
-    await page.stepDeleteDialog.getByRole("button", { name: "Delete" }).click();
+    await page.stepDeleteDialog.getByRole("button", { name: "Delete Step", exact: true }).click();
     await expect(page.stepDeleteDialog).not.toBeVisible();
 
     // Step should be removed
@@ -254,23 +302,14 @@ test.describe("Workflow settings", () => {
     const page = new WorkflowSettingsPage(testPage);
     await page.goto(seedData.workspaceId);
 
-    // Create and save a workflow first
     await page.createWorkflow("To Delete Workflow", "Custom");
+    await page.saveChanges();
 
     const card = await page.findWorkflowCard("To Delete Workflow");
     await expect(card).toBeVisible();
 
-    // Save it first so it's persisted
-    await page.saveButton(card).click();
-    await testPage.waitForTimeout(1000);
-
-    // Reload to get the real workflow card
-    await page.goto(seedData.workspaceId);
-    const savedCard = await page.findWorkflowCard("To Delete Workflow");
-    await expect(savedCard).toBeVisible();
-
     // Click delete workflow
-    await page.deleteWorkflowButton(savedCard).click();
+    await page.deleteWorkflowButton(card).click();
 
     // The delete dialog should appear — confirm deletion
     const deleteDialog = testPage.getByRole("dialog").filter({ hasText: "Delete" });
@@ -285,6 +324,36 @@ test.describe("Workflow settings", () => {
     const deletedCard = await page.findWorkflowCard("To Delete Workflow");
     await expect(deletedCard).not.toBeVisible();
   });
+
+  test("keeps workflow details local until the route-level Save", async ({
+    testPage,
+    apiClient,
+    seedData,
+  }) => {
+    const page = new WorkflowSettingsPage(testPage);
+    await page.goto(seedData.workspaceId);
+
+    const card = await page.findWorkflowCard("E2E Workflow");
+    const nameInput = card.locator("input").first();
+    await nameInput.fill("Manually Saved Workflow Name");
+
+    await expect(nameInput).toHaveAttribute("data-settings-dirty", "true");
+    await expect(card).toHaveAttribute("data-settings-dirty", "true");
+
+    expect(
+      (await apiClient.listWorkflows(seedData.workspaceId)).workflows.find(
+        (workflow) => workflow.id === seedData.workflowId,
+      )?.name,
+    ).toBe("E2E Workflow");
+    await expect(page.floatingSave).toBeVisible();
+    await page.saveChanges();
+
+    await expect(nameInput).toHaveAttribute("data-settings-dirty", "false");
+    await expect(card).toHaveAttribute("data-settings-dirty", "false");
+
+    await page.goto(seedData.workspaceId);
+    await expect(await page.findWorkflowCard("Manually Saved Workflow Name")).toBeVisible();
+  });
 });
 
 test.describe("Seed protection", () => {
@@ -372,6 +441,9 @@ test.describe("Seed protection", () => {
     await page.goto(seedData.workspaceId);
 
     // The seeded visible workflow is rendered before the leak attempt.
+    await expect
+      .poll(async () => (await page.findWorkflowCard("E2E Workflow")).isVisible())
+      .toBe(true);
     const visibleCard = await page.findWorkflowCard("E2E Workflow");
     await expect(visibleCard).toBeVisible();
     const baselineCount = await testPage.locator('[data-testid^="workflow-card-"]').count();
diff --git a/apps/web/e2e/tests/workflow/workflow-step-autocomplete.spec.ts b/apps/web/e2e/tests/workflow/workflow-step-autocomplete.spec.ts
index 4fe3f3ab99..7dee53bf45 100644
--- a/apps/web/e2e/tests/workflow/workflow-step-autocomplete.spec.ts
+++ b/apps/web/e2e/tests/workflow/workflow-step-autocomplete.spec.ts
@@ -85,6 +85,7 @@ test.describe("Workflow step prompt autocomplete", () => {
     const updatedText = await agentSelect.textContent();
     expect(updatedText).toContain(profileName?.trim() ?? "");
     expect(updatedText).not.toContain("No profile override");
+    await page.saveChanges();
 
     // Reload the page and verify it persisted
     await page.goto(seedData.workspaceId);
diff --git a/apps/web/hooks/domains/integrations/use-integration-enabled.ts b/apps/web/hooks/domains/integrations/use-integration-enabled.ts
index 8b2b33dc79..22b5b0c4d0 100644
--- a/apps/web/hooks/domains/integrations/use-integration-enabled.ts
+++ b/apps/web/hooks/domains/integrations/use-integration-enabled.ts
@@ -91,15 +91,8 @@ export function useIntegrationEnabled(
       if (typeof window === "undefined") return;
       try {
         window.localStorage.setItem(storageKey, String(next));
-      } catch {
-        // Quota / private mode: the write failed, so a re-read via
-        // getSnapshot would still return the old value. Don't dispatch the
-        // sync event — the previous in-memory fallback is gone with
-        // useSyncExternalStore, so silently re-dispatching would just look
-        // like a no-op flip. Surface the failure by leaving the toggle stuck
-        // at its previous value; the caller can detect persistence failure
-        // by observing that `enabled` did not change.
-        return;
+      } catch (error) {
+        throw new Error(`Failed to persist ${storageKey}`, { cause: error });
       }
       window.dispatchEvent(new Event(syncEvent));
     },
diff --git a/apps/web/hooks/domains/settings/use-workflow-settings.test.ts b/apps/web/hooks/domains/settings/use-workflow-settings.test.ts
index 64092b42c7..fcb75c379d 100644
--- a/apps/web/hooks/domains/settings/use-workflow-settings.test.ts
+++ b/apps/web/hooks/domains/settings/use-workflow-settings.test.ts
@@ -148,6 +148,32 @@ describe("useWorkflowSettings", () => {
     expect(result.current.workflowItems[0].name).toEqual("Renamed B1");
   });
 
+  it("does not overwrite a dirty name when the store refreshes", () => {
+    const initial = [wf("wf-b1", "ws-b", NAME_B1)];
+    const { result, rerender } = renderHook(
+      ({ store }: { store: StoreWorkflow[] }) => {
+        setStore(store);
+        return useWorkflowSettings(initial, "ws-b");
+      },
+      { initialProps: { store: [STORE_B1] } },
+    );
+
+    act(() => {
+      result.current.setWorkflowItems((items) =>
+        items.map((item) => ({ ...item, name: "Unsaved local name" })),
+      );
+    });
+    act(() => {
+      rerender({ store: [{ ...STORE_B1, name: "Remote name" }] });
+    });
+
+    expect(result.current.workflowItems[0].name).toBe("Unsaved local name");
+    expect(result.current.savedWorkflowItems[0].name).toBe("Remote name");
+    expect(result.current.isWorkflowDirty(result.current.workflowItems[0])).toBe(true);
+  });
+});
+
+describe("useWorkflowSettings visibility", () => {
   it("excludes hidden system workflows from the settings list", () => {
     // System workflows like "Improve Kandev" live in the global store with
     // hidden=true so the kanban can resolve task references, but they must
diff --git a/apps/web/hooks/domains/settings/use-workflow-settings.ts b/apps/web/hooks/domains/settings/use-workflow-settings.ts
index 2c0e941cf0..4240ac395e 100644
--- a/apps/web/hooks/domains/settings/use-workflow-settings.ts
+++ b/apps/web/hooks/domains/settings/use-workflow-settings.ts
@@ -14,19 +14,11 @@ import { workflowId, workspaceId as toWorkspaceId, type Workflow } from "@/lib/t
  */
 export function useWorkflowSettings(initialWorkflows: Workflow[], workspaceId?: string) {
   const storeWorkflows = useAppStore((state) => state.workflows.items);
-  // Hidden workflows (e.g. the system "Improve Kandev" template) are loaded
-  // into the global store with `includeHidden: true` so the kanban can resolve
-  // them when a task references one, but they must never surface in the
-  // settings management UI. Office-style workflows are managed from the Office
-  // surface (ADR-0004) and must be excluded the same way — the SSR-side filter
-  // in `workspace-workflows-client.tsx` already drops them; the store-boundary
-  // filter must match so live WS/fetch updates cannot merge them back in.
-  const scopedStoreWorkflows = useMemo(() => {
-    const visible = storeWorkflows.filter((w) => !w.hidden && w.style !== "office");
-    return workspaceId ? visible.filter((w) => w.workspaceId === workspaceId) : visible;
-  }, [storeWorkflows, workspaceId]);
+  const scopedStoreWorkflows = useScopedStoreWorkflows(storeWorkflows, workspaceId);
   const [workflowItems, setWorkflowItems] = useState<Workflow[]>(initialWorkflows);
   const [savedWorkflowItems, setSavedWorkflowItems] = useState<Workflow[]>(initialWorkflows);
+  const savedWorkflowItemsRef = useRef(savedWorkflowItems);
+  savedWorkflowItemsRef.current = savedWorkflowItems;
 
   // Track all IDs we've ever seen from SSR props so we only add genuinely new ones
   // (not re-add workflows the user deleted locally).
@@ -92,7 +84,9 @@ export function useWorkflowSettings(initialWorkflows: Workflow[], workspaceId?:
       const updated = filtered.map((w) => {
         if (w.id.startsWith("temp-")) return w;
         const sw = scopedStoreWorkflows.find((s) => s.id === w.id);
-        if (sw && sw.name !== w.name) return { ...w, name: sw.name };
+        const saved = savedWorkflowItemsRef.current.find((item) => item.id === w.id);
+        const hasLocalNameDraft = saved && w.name !== saved.name;
+        if (sw && sw.name !== w.name && !hasLocalNameDraft) return { ...w, name: sw.name };
         return w;
       });
 
@@ -109,8 +103,20 @@ export function useWorkflowSettings(initialWorkflows: Workflow[], workspaceId?:
     setSavedWorkflowItems((prev) => {
       const toAdd = newFromStore(prev);
       const filtered = prev.filter((w) => !deletedIds.has(w.id));
-      if (toAdd.length === 0 && filtered.length === prev.length) return prev;
-      return [...toAdd, ...filtered];
+      const updated = filtered.map((workflow) => {
+        const server = scopedStoreWorkflows.find((item) => item.id === workflow.id);
+        return server && server.name !== workflow.name
+          ? { ...workflow, name: server.name }
+          : workflow;
+      });
+      if (
+        toAdd.length === 0 &&
+        updated.length === prev.length &&
+        updated.every((workflow, index) => workflow === prev[index])
+      ) {
+        return prev;
+      }
+      return [...toAdd, ...updated];
     });
   }, [scopedStoreWorkflows]);
 
@@ -118,15 +124,7 @@ export function useWorkflowSettings(initialWorkflows: Workflow[], workspaceId?:
     return new Map(savedWorkflowItems.map((w) => [w.id, w]));
   }, [savedWorkflowItems]);
 
-  const isWorkflowDirty = (workflow: Workflow) => {
-    const saved = savedWorkflowsById.get(workflow.id);
-    if (!saved) return true;
-    return (
-      workflow.name !== saved.name ||
-      workflow.description !== saved.description ||
-      (workflow.agent_profile_id ?? "") !== (saved.agent_profile_id ?? "")
-    );
-  };
+  const isWorkflowDirty = (workflow: Workflow) => workflowIsDirty(workflow, savedWorkflowsById);
 
   return {
     workflowItems,
@@ -137,6 +135,36 @@ export function useWorkflowSettings(initialWorkflows: Workflow[], workspaceId?:
   };
 }
 
+function workflowIsDirty(workflow: Workflow, savedWorkflows: Map<string, Workflow>): boolean {
+  const saved = savedWorkflows.get(workflow.id);
+  if (!saved) return true;
+  return (
+    workflow.name !== saved.name ||
+    workflow.description !== saved.description ||
+    (workflow.agent_profile_id ?? "") !== (saved.agent_profile_id ?? "")
+  );
+}
+
+function useScopedStoreWorkflows<
+  T extends {
+    id: string;
+    workspaceId: string;
+    name: string;
+    description?: string | null;
+    hidden?: boolean;
+    style?: string;
+  },
+>(storeWorkflows: T[], workspaceId?: string): T[] {
+  return useMemo(() => {
+    const visible = storeWorkflows.filter(
+      (workflow) => !workflow.hidden && workflow.style !== "office",
+    );
+    return workspaceId
+      ? visible.filter((workflow) => workflow.workspaceId === workspaceId)
+      : visible;
+  }, [storeWorkflows, workspaceId]);
+}
+
 function storeItemToWorkflow(sw: {
   id: string;
   workspaceId: string;
diff --git a/apps/web/hooks/domains/system/use-storage-maintenance.test.tsx b/apps/web/hooks/domains/system/use-storage-maintenance.test.tsx
index 4d1e869599..3faf495765 100644
--- a/apps/web/hooks/domains/system/use-storage-maintenance.test.tsx
+++ b/apps/web/hooks/domains/system/use-storage-maintenance.test.tsx
@@ -127,6 +127,16 @@ describe("useStorageMaintenance", () => {
     });
   });
 
+  it("rejects failed saves so the settings coordinator can keep the draft dirty", async () => {
+    mocks.save.mockRejectedValueOnce(new Error("save unavailable"));
+    const { result } = renderHook(() => useStorageMaintenance(), { wrapper });
+    await waitFor(() => expect(result.current.overview).toEqual(overview));
+
+    await expect(result.current.save(settings)).rejects.toThrow("save unavailable");
+
+    await waitFor(() => expect(result.current.error).toBe("save unavailable"));
+  });
+
   it("clearing Docker acknowledgement also disables global cleanup", () => {
     const updated = settingsWithDockerAcknowledgement(settings, false);
     expect(updated.docker).toMatchObject({
diff --git a/apps/web/hooks/domains/system/use-storage-maintenance.ts b/apps/web/hooks/domains/system/use-storage-maintenance.ts
index fad2058a05..7b8a2d16ca 100644
--- a/apps/web/hooks/domains/system/use-storage-maintenance.ts
+++ b/apps/web/hooks/domains/system/use-storage-maintenance.ts
@@ -63,19 +63,17 @@ const TERMINAL_REFRESH_RETRY_MS = 1000;
 const TERMINAL_REFRESH_MAX_RETRY_MS = 8000;
 const MAX_TERMINAL_REFRESH_ATTEMPTS = 6;
 
-function useStorageActions(reload: Reload) {
+function useStorageActionRunner() {
   const { toast } = useToast();
   const [pendingAction, setPendingAction] = useState<StoragePendingAction>("load");
   const [error, setError] = useState<string | null>(null);
-  const [analysisJobId, setAnalysisJobId] = useState<string | null>(null);
-  const [cleanupJobId, setCleanupJobId] = useState<string | null>(null);
-  const [deleteJobId, setDeleteJobId] = useState<string | null>(null);
   const finishLoading = useCallback(() => setPendingAction(null), []);
-  const analysisJob = useSystemJob(analysisJobId);
-  const cleanupJob = useSystemJob(cleanupJobId);
-  const deleteJob = useSystemJob(deleteJobId);
   const perform = useCallback(
-    async (action: Exclude<StoragePendingAction, "load" | null>, work: () => Promise<void>) => {
+    async (
+      action: Exclude<StoragePendingAction, "load" | null>,
+      work: () => Promise<void>,
+      rethrow = false,
+    ) => {
       setPendingAction(action);
       setError(null);
       try {
@@ -84,20 +82,37 @@ function useStorageActions(reload: Reload) {
         const message = messageFromError(requestError);
         setError(message);
         toast({ title: "Storage action failed", description: message, variant: "error" });
+        if (rethrow) throw requestError;
       } finally {
         setPendingAction(null);
       }
     },
     [toast],
   );
+  return { pendingAction, error, setError, finishLoading, perform };
+}
+
+function useStorageActions(reload: Reload) {
+  const { toast } = useToast();
+  const { pendingAction, error, setError, finishLoading, perform } = useStorageActionRunner();
+  const [analysisJobId, setAnalysisJobId] = useState<string | null>(null);
+  const [cleanupJobId, setCleanupJobId] = useState<string | null>(null);
+  const [deleteJobId, setDeleteJobId] = useState<string | null>(null);
+  const analysisJob = useSystemJob(analysisJobId);
+  const cleanupJob = useSystemJob(cleanupJobId);
+  const deleteJob = useSystemJob(deleteJobId);
 
   const save = useCallback(
     async (settings: StorageMaintenanceSettings, confirmation?: "DEDICATED") =>
-      perform("save", async () => {
-        await saveStorageSettings(settings, confirmation);
-        await reload();
-        toast({ title: "Storage policy saved", variant: "success" });
-      }),
+      perform(
+        "save",
+        async () => {
+          await saveStorageSettings(settings, confirmation);
+          await reload();
+          toast({ title: "Storage policy saved", variant: "success" });
+        },
+        true,
+      ),
     [perform, reload, toast],
   );
 
diff --git a/apps/web/lib/api/domains/workflow-api.test.ts b/apps/web/lib/api/domains/workflow-api.test.ts
new file mode 100644
index 0000000000..ad1793f2b3
--- /dev/null
+++ b/apps/web/lib/api/domains/workflow-api.test.ts
@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { normalizeWorkflowTemplate } from "./workflow-api";
+
+describe("normalizeWorkflowTemplate", () => {
+  it("preserves template step identities used by transition references", () => {
+    const template = normalizeWorkflowTemplate({
+      id: "template-1",
+      name: "Review flow",
+      is_system: true,
+      created_at: "",
+      updated_at: "",
+      default_steps: [
+        {
+          id: "in-progress",
+          name: "In Progress",
+          position: 0,
+          events: {
+            on_turn_complete: [{ type: "move_to_step", config: { step_id: "review" } }],
+          },
+        },
+        { id: "review", name: "Review", position: 1 },
+      ],
+    });
+
+    expect(template.default_steps?.map((step) => step.id)).toEqual(["in-progress", "review"]);
+  });
+});
diff --git a/apps/web/lib/api/domains/workflow-api.ts b/apps/web/lib/api/domains/workflow-api.ts
index f1eebbd251..9e6c60e91f 100644
--- a/apps/web/lib/api/domains/workflow-api.ts
+++ b/apps/web/lib/api/domains/workflow-api.ts
@@ -10,6 +10,7 @@ import type {
 } from "@/lib/types/http";
 
 type BackendTemplateStep = {
+  id?: string;
   name: string;
   position: number;
   color?: string;
@@ -26,9 +27,10 @@ type BackendWorkflowTemplate = Omit<WorkflowTemplate, "default_steps"> & {
   default_steps?: BackendTemplateStep[];
 };
 
-const normalizeWorkflowTemplate = (template: BackendWorkflowTemplate): WorkflowTemplate => {
+export const normalizeWorkflowTemplate = (template: BackendWorkflowTemplate): WorkflowTemplate => {
   const steps = template.default_steps ?? template.steps ?? [];
   const default_steps: StepDefinition[] = steps.map((step) => ({
+    id: step.id,
     name: step.name,
     position: step.position,
     color: step.color,
diff --git a/apps/web/lib/plugins/host-api.test.ts b/apps/web/lib/plugins/host-api.test.ts
index 027455e80d..37104b330c 100644
--- a/apps/web/lib/plugins/host-api.test.ts
+++ b/apps/web/lib/plugins/host-api.test.ts
@@ -114,10 +114,18 @@ describe("buildHostApi", () => {
     const replaceSpy = vi.spyOn(window.history, "replaceState");
 
     host.navigate("/somewhere");
-    expect(pushSpy).toHaveBeenCalledWith({}, "", "/somewhere");
+    expect(pushSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ __kandevNavigationPosition: expect.any(Number) }),
+      "",
+      "/somewhere",
+    );
 
     host.navigate("/elsewhere", { replace: true });
-    expect(replaceSpy).toHaveBeenCalledWith({}, "", "/elsewhere");
+    expect(replaceSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ __kandevNavigationPosition: expect.any(Number) }),
+      "",
+      "/elsewhere",
+    );
 
     pushSpy.mockRestore();
     replaceSpy.mockRestore();
diff --git a/apps/web/lib/routing/client-router.test.ts b/apps/web/lib/routing/client-router.test.ts
index 05ef244cee..46ba6670de 100644
--- a/apps/web/lib/routing/client-router.test.ts
+++ b/apps/web/lib/routing/client-router.test.ts
@@ -1,5 +1,6 @@
 import { act, renderHook } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import { clearNavigationBlockerForTests, setNavigationBlocker } from "./navigation-guard";
 import { useParams, usePathname, useRouter, useSearchParams } from "./client-router";
 
 function setLocation(path: string) {
@@ -7,6 +8,7 @@ function setLocation(path: string) {
 }
 
 afterEach(() => {
+  clearNavigationBlockerForTests();
   vi.unstubAllGlobals();
 });
 
@@ -58,4 +60,34 @@ describe("client router adapter", () => {
 
     expect(reload).toHaveBeenCalledOnce();
   });
+
+  it("guards imperative push and history navigation", () => {
+    setLocation("/settings/general/appearance");
+    const attempts: Array<() => void> = [];
+    setNavigationBlocker((intent) => attempts.push(intent.proceed));
+    const go = vi.spyOn(window.history, "go").mockImplementation(() => undefined);
+    const back = vi.spyOn(window.history, "back").mockImplementation(() => {
+      window.dispatchEvent(
+        new PopStateEvent("popstate", {
+          state: { __kandevNavigationPosition: 0 },
+        }),
+      );
+    });
+    const { result } = renderHook(() => useRouter());
+
+    act(() => result.current.push("/tasks"));
+    expect(window.location.pathname).toBe("/settings/general/appearance");
+
+    act(() => attempts.shift()?.());
+    expect(window.location.pathname).toBe("/tasks");
+
+    act(() => result.current.back());
+    expect(back).toHaveBeenCalledOnce();
+    expect(attempts).toHaveLength(1);
+    act(() => attempts.shift()?.());
+    window.dispatchEvent(new PopStateEvent("popstate", { state: window.history.state }));
+    window.dispatchEvent(new PopStateEvent("popstate", { state: null }));
+    expect(attempts).toHaveLength(0);
+    expect(go).toHaveBeenCalledTimes(2);
+  });
 });
diff --git a/apps/web/lib/routing/client-router.ts b/apps/web/lib/routing/client-router.ts
index d16807edf9..1fa5c36ce6 100644
--- a/apps/web/lib/routing/client-router.ts
+++ b/apps/web/lib/routing/client-router.ts
@@ -3,6 +3,7 @@
 import { useMemo, useSyncExternalStore } from "react";
 
 import { LOCATION_CHANGE_EVENT } from "./navigation-event";
+import { pushNavigationState, replaceNavigationState } from "./navigation-guard";
 
 type NavigateOptions = {
   scroll?: boolean;
@@ -47,13 +48,14 @@ export function useParams(): Record<string, string> {
 
 function navigate(mode: "push" | "replace", href: string, options?: NavigateOptions): void {
   if (mode === "push") {
-    window.history.pushState({}, "", href);
+    pushNavigationState({}, "", href, () => finishNavigation(options));
   } else {
-    window.history.replaceState({}, "", href);
-  }
-  if (options?.scroll !== false) {
-    window.scrollTo(0, 0);
+    replaceNavigationState({}, "", href, () => finishNavigation(options));
   }
+}
+
+function finishNavigation(options?: NavigateOptions): void {
+  if (options?.scroll !== false) window.scrollTo(0, 0);
   dispatchLocationChange();
 }
 
diff --git a/apps/web/lib/routing/navigation-guard.ts b/apps/web/lib/routing/navigation-guard.ts
new file mode 100644
index 0000000000..3ed29f68e4
--- /dev/null
+++ b/apps/web/lib/routing/navigation-guard.ts
@@ -0,0 +1,241 @@
+export type NavigationIntent = {
+  proceed: () => void;
+  cancel: () => void;
+};
+
+export type NavigationBlocker = (intent: NavigationIntent) => void;
+
+const HISTORY_POSITION_KEY = "__kandevNavigationPosition";
+
+let activeBlocker: NavigationBlocker | null = null;
+let currentPosition: number | null = null;
+let popstateInstalled = false;
+let historyMutationsTracked = false;
+let allowedPop = false;
+let restoringPop = false;
+
+type BlockedPop = {
+  delta: number;
+  restorePosition: number;
+  restored: boolean;
+  canceled: boolean;
+  proceedRequested: boolean;
+};
+
+let blockedPop: BlockedPop | null = null;
+
+export function setNavigationBlocker(blocker: NavigationBlocker | null): () => void {
+  ensureHistoryTracking();
+  activeBlocker = blocker;
+  return () => {
+    if (activeBlocker === blocker) activeBlocker = null;
+  };
+}
+
+export function requestNavigation(proceed: () => void): void {
+  if (!activeBlocker) {
+    proceed();
+    return;
+  }
+
+  let settled = false;
+  activeBlocker({
+    proceed: () => {
+      if (settled) return;
+      settled = true;
+      proceed();
+    },
+    cancel: () => {
+      settled = true;
+    },
+  });
+}
+
+export function runWithNavigationBlockerBypassed(proceed: () => void): void {
+  const blocker = activeBlocker;
+  activeBlocker = null;
+  try {
+    proceed();
+  } finally {
+    activeBlocker = blocker;
+  }
+}
+
+export function pushNavigationState(
+  state: unknown,
+  title: string,
+  url?: string | URL | null,
+  onNavigated?: () => void,
+): void {
+  ensureHistoryTracking();
+  requestNavigation(() => {
+    const nextPosition = (currentPosition ?? 0) + 1;
+    window.history.pushState(withPosition(state, nextPosition), title, url);
+    currentPosition = nextPosition;
+    onNavigated?.();
+  });
+}
+
+export function replaceNavigationState(
+  state: unknown,
+  title: string,
+  url?: string | URL | null,
+  onNavigated?: () => void,
+): void {
+  ensureHistoryTracking();
+  requestNavigation(() => {
+    const position = currentPosition ?? 0;
+    window.history.replaceState(withPosition(state, position), title, url);
+    onNavigated?.();
+  });
+}
+
+export function clearNavigationBlockerForTests(): void {
+  activeBlocker = null;
+  currentPosition = null;
+  allowedPop = false;
+  restoringPop = false;
+  blockedPop = null;
+}
+
+function ensureHistoryTracking(): void {
+  if (typeof window === "undefined") return;
+
+  trackNativeHistoryMutations();
+
+  const statePosition = readPosition(window.history.state);
+  if (currentPosition === null) {
+    currentPosition = statePosition ?? 0;
+    if (statePosition === null) {
+      window.history.replaceState(withPosition(window.history.state, currentPosition), "");
+    }
+  }
+
+  if (!popstateInstalled) {
+    window.addEventListener("popstate", handlePopState, true);
+    popstateInstalled = true;
+  }
+}
+
+function handlePopState(event: PopStateEvent): void {
+  const targetPosition = readPosition(event.state);
+  if (targetPosition === null) {
+    if (allowedPop) {
+      allowedPop = false;
+      return;
+    }
+    if (activeBlocker && currentPosition !== null) {
+      // Entries created before tracking was installed are behind the current,
+      // tagged settings entry. Restore the current entry before prompting.
+      blockPop(event, -1, currentPosition);
+    }
+    return;
+  }
+
+  if (allowedPop) {
+    allowedPop = false;
+    currentPosition = targetPosition;
+    return;
+  }
+
+  if (restoringPop) {
+    if (targetPosition !== blockedPop?.restorePosition) {
+      restoringPop = false;
+    } else {
+      restoringPop = false;
+      currentPosition = targetPosition;
+      finishPopRestoration();
+      return;
+    }
+  }
+
+  const fromPosition = currentPosition ?? targetPosition;
+  const delta = targetPosition - fromPosition;
+  if (!activeBlocker || delta === 0) {
+    currentPosition = targetPosition;
+    return;
+  }
+
+  blockPop(event, delta, fromPosition);
+}
+
+function blockPop(event: PopStateEvent, delta: number, restorePosition: number): void {
+  const blocker = activeBlocker;
+  if (!blocker) return;
+  event.stopImmediatePropagation();
+  const pending: BlockedPop = {
+    delta,
+    restorePosition,
+    restored: false,
+    canceled: false,
+    proceedRequested: false,
+  };
+  blockedPop = pending;
+  restoringPop = true;
+  window.history.go(-delta);
+
+  blocker({
+    proceed: () => proceedBlockedPop(pending),
+    cancel: () => cancelBlockedPop(pending),
+  });
+}
+
+function trackNativeHistoryMutations(): void {
+  if (historyMutationsTracked) return;
+  historyMutationsTracked = true;
+  const pushState = window.history.pushState.bind(window.history);
+  const replaceState = window.history.replaceState.bind(window.history);
+  window.history.pushState = (state, title, url) => {
+    const position = readPosition(state) ?? (currentPosition ?? 0) + 1;
+    pushState(withPosition(state, position), title, url);
+    currentPosition = position;
+  };
+  window.history.replaceState = (state, title, url) => {
+    const position = readPosition(state) ?? currentPosition ?? 0;
+    replaceState(withPosition(state, position), title, url);
+    currentPosition = position;
+  };
+}
+
+function proceedBlockedPop(pending: BlockedPop): void {
+  if (pending.canceled || blockedPop !== pending) return;
+  if (!pending.restored) {
+    pending.proceedRequested = true;
+    return;
+  }
+  blockedPop = null;
+  allowedPop = true;
+  window.history.go(pending.delta);
+}
+
+function cancelBlockedPop(pending: BlockedPop): void {
+  if (blockedPop !== pending) return;
+  pending.canceled = true;
+  if (pending.restored) blockedPop = null;
+}
+
+function finishPopRestoration(): void {
+  const pending = blockedPop;
+  if (!pending) return;
+  pending.restored = true;
+  if (pending.canceled) {
+    blockedPop = null;
+  } else if (pending.proceedRequested) {
+    proceedBlockedPop(pending);
+  }
+}
+
+function readPosition(state: unknown): number | null {
+  if (!state || typeof state !== "object") return null;
+  const position = (state as Record<string, unknown>)[HISTORY_POSITION_KEY];
+  return typeof position === "number" ? position : null;
+}
+
+function withPosition(state: unknown, position: number): Record<string, unknown> {
+  const source = state && typeof state === "object" ? state : {};
+  return { ...source, [HISTORY_POSITION_KEY]: position };
+}
+
+// client-router imports this module before subscribing to popstate, so eager
+// installation lets the guard stop blocked traversals before route subscribers run.
+if (typeof window !== "undefined") ensureHistoryTracking();
diff --git a/apps/web/lib/types/http.ts b/apps/web/lib/types/http.ts
index e7e58fa67d..875fb67b96 100644
--- a/apps/web/lib/types/http.ts
+++ b/apps/web/lib/types/http.ts
@@ -67,6 +67,7 @@ export type WorkflowTemplate = {
 
 // Step Definition - template step configuration
 export type StepDefinition = {
+  id?: string;
   name: string;
   position: number;
   color?: string;
diff --git a/apps/web/lib/user-settings-sync.test.ts b/apps/web/lib/user-settings-sync.test.ts
index 7c9ec4ebbe..d119738632 100644
--- a/apps/web/lib/user-settings-sync.test.ts
+++ b/apps/web/lib/user-settings-sync.test.ts
@@ -72,8 +72,18 @@ describe("createQueuedUserSettingsSync", () => {
       preferred_shell: value,
     }));
 
-    await sync("bash");
+    await expect(sync("bash")).rejects.toBeInstanceOf(ApiError);
 
     expect(updateUserSettings).toHaveBeenCalledTimes(1);
   });
+
+  it("rejects failed writes so explicit-save callers remain dirty and retryable", async () => {
+    const failure = new Error("network unavailable");
+    vi.mocked(updateUserSettings).mockRejectedValue(failure);
+    const sync = createQueuedUserSettingsSync<string>((value) => ({
+      preferred_shell: value,
+    }));
+
+    await expect(sync("zsh")).rejects.toBe(failure);
+  });
 });
diff --git a/apps/web/lib/user-settings-sync.ts b/apps/web/lib/user-settings-sync.ts
index 7630e28bac..c686e1f962 100644
--- a/apps/web/lib/user-settings-sync.ts
+++ b/apps/web/lib/user-settings-sync.ts
@@ -32,10 +32,7 @@ export function createQueuedUserSettingsSync<T>(
   let queue = Promise.resolve();
   return (value: T) => {
     const payload = buildPayload(value);
-    queue = queue
-      .catch(() => undefined)
-      .then(() => updateUserSettingsWithRetry(payload))
-      .catch(() => undefined);
+    queue = queue.catch(() => undefined).then(() => updateUserSettingsWithRetry(payload));
     return queue;
   };
 }
diff --git a/docs/decisions/0046-settings-route-save-coordinator.md b/docs/decisions/0046-settings-route-save-coordinator.md
new file mode 100644
index 0000000000..8fb0481c89
--- /dev/null
+++ b/docs/decisions/0046-settings-route-save-coordinator.md
@@ -0,0 +1,32 @@
+# 0046: Settings route save coordinator
+
+**Status:** accepted
+**Date:** 2026-07-14
+**Area:** frontend
+
+## Context
+
+Settings pages use several persistence models: immediate writes from controls, local Save buttons inside sections, and page-header Save buttons. Long pages can scroll the required action out of view, while pages with several independently owned cards need one predictable way to report and persist dirty state. Moving every settings form into one global data model would couple unrelated domains and make incremental migration difficult.
+
+## Decision
+
+The settings shell will own a route-scoped save coordinator. Descendant forms register stable contributors containing an identity, dirty and validation state, a save callback, and a discard callback. The coordinator renders one fixed bottom-right action, saves all dirty contributors in stable order, preserves per-contributor success or failure, and supplies dirty-route navigation protection.
+
+Draft state and API payload construction remain with the domain component that owns the setting. A page-level owner combines sections that write the same backend resource so the coordinator does not issue competing replacements. Immediate named commands and dialog submissions do not register as dirty contributors.
+
+The user-visible contract is defined by [Settings Manual Save](../specs/ui/settings-manual-save.md).
+
+## Consequences
+
+- Settings routes gain consistent save feedback and a viewport-reachable action without centralizing every domain model.
+- Multiple cards, including workflow cards, can participate in one Save while retaining independent failure state.
+- Route navigation can use the same dirty registry as the floating action.
+- Components must maintain a saved baseline and compare submitted revisions so an in-flight completion cannot clear newer edits.
+- Multi-resource saves remain non-atomic, and contributors that share a backend replacement contract must be composed before registration.
+
+## Alternatives Considered
+
+1. **A global settings draft store.** Rejected because unrelated user, workspace, workflow, integration, and runtime resources have different lifecycles and validation rules.
+2. **One sticky Save button per card.** Rejected because a long route can contain several dirty cards and still leaves users hunting for the relevant action.
+3. **A transient toast with Save.** Rejected because a toast can expire or be dismissed while unsaved state still exists.
+4. **Keep autosave and add better progress feedback.** Rejected because it continues persisting intermediate configurations and does not establish explicit user intent.
diff --git a/docs/decisions/INDEX.md b/docs/decisions/INDEX.md
index 83987a2ef8..c5c7412ee8 100644
--- a/docs/decisions/INDEX.md
+++ b/docs/decisions/INDEX.md
@@ -53,4 +53,5 @@ Read individual ADRs for full context. Create new ones via `/record decision` or
 | 2026-07-15-office-agent-execution-profile-routing | [Separate Office identity from routed execution profiles](2026-07-15-office-agent-execution-profile-routing.md) | proposed | backend, frontend | 2026-07-15 |
 | 0044 | [ACP agent compatibility dialects](0044-acp-agent-compatibility-dialects.md)                                                        | accepted   | backend, protocol           | 2026-07-16 |
 | 0045 | [Install-wide storage maintenance uses typed ownership providers and quarantine](0045-install-wide-storage-maintenance.md)          | accepted   | backend, frontend, infra    | 2026-07-14 |
+| 0046 | [Settings route save coordinator](0046-settings-route-save-coordinator.md)                                                          | accepted   | frontend                    | 2026-07-14 |
 | 2026-07-18-turn-configuration-snapshots | [Attribute runtime configuration to turns](2026-07-18-turn-configuration-snapshots.md) | accepted | backend, frontend | 2026-07-18 |
diff --git a/docs/plans/settings-manual-save/plan.md b/docs/plans/settings-manual-save/plan.md
new file mode 100644
index 0000000000..0488a0f3a5
--- /dev/null
+++ b/docs/plans/settings-manual-save/plan.md
@@ -0,0 +1,125 @@
+---
+spec: docs/specs/ui/settings-manual-save.md
+decision: docs/decisions/0046-settings-route-save-coordinator.md
+created: 2026-07-14
+status: implemented
+---
+
+# Implementation Plan: Settings Manual Save
+
+## Overview
+
+Introduce a route-scoped save coordinator and navigation guard in the settings shell, then migrate workflow, general/system, resource-editor, and integration settings to register local drafts. The migrations reuse existing APIs; explicit commands and dialog submissions remain immediate. Desktop/mobile E2E and a final write-through audit close the work.
+
+## Audit
+
+Confirmed write-through settings are:
+
+- workflows: metadata, workflow/step ordering, step fields, and step membership in `workspace-workflows-client.tsx` and `workflow-card-actions.ts`;
+- General: theme, changes-panel layout, resource metrics, submit key, keyboard shortcuts, terminal font/size/link behavior, voice mode, and changelog notification;
+- operational: utility-agent enable/default/config-chat selection, runtime flags, and SSH profile login shell;
+- integrations: GitHub/Jira/Linear/Sentry watcher enable toggles and existing Sentry instance
+  editing;
+- list and connection editors: automation enabled toggles and existing SSH executor editing.
+
+Existing manual-save surfaces use header, section, card, or footer actions: workspace/repository, agent/profile, executor/profile, automation, editors, notifications, prompts, secrets, shell, GitHub scope/presets/queries, GitLab credentials, and Jira/Linear/Slack configuration. These move to the shared action when the form is route-level. Dialog/sheet submissions remain local to their overlay.
+
+## Backend
+
+No backend, schema, or API changes are planned. Existing partial-update and resource endpoints remain the persistence boundary. Multi-contributor and multi-step workflow saves are intentionally non-atomic.
+
+## Frontend
+
+### Save coordinator and navigation
+
+- Add `apps/web/components/settings/settings-save-provider.tsx` with a keyed contributor registry (`isDirty`, `canSave`, `invalidReason`, `save`, `discard`) and revision-safe save-all behavior.
+- Add `apps/web/components/settings/settings-floating-save.tsx` for the fixed status/action surface and unsaved-navigation dialog.
+- Update `apps/web/components/settings/settings-layout-client.tsx` to own the provider, reserve scroll padding, and position the action using mobile safe-area insets.
+- Add a navigation-blocking boundary in `apps/web/lib/routing/navigation-guard.ts`; integrate it with `client-router.ts`, `app-link.tsx`, browser history, and `beforeunload`.
+
+### Workflow drafts
+
+- Replace mutation-on-control-change in `apps/web/app/settings/workspace/workspace-workflows-client.tsx` and `apps/web/components/settings/workflow-card-actions.ts` with saved snapshots and local workflow/step drafts.
+- Update `use-workflow-creation.ts`, `workflow-card.tsx`, and the pipeline editor files so new workflows/steps use client identities and Save creates/remaps them.
+- Preserve immediate confirmed deletion/migration/import/export. Newly added unsaved steps are removed locally.
+
+### General, system, and utility settings
+
+- Compose backend user-settings fields per route so one contributor issues one patch and controls do not write independently.
+- Give theme selection a preview-only draft path; commit local storage on Save and restore the saved theme on discard.
+- Stage global metrics/runtime flags and only show restart affordances after successful Save when required.
+
+### Existing manual-save pages
+
+- Convert `SettingsPageTemplate`, `UnsavedSaveButton`, profile chrome, and route-level edit cards to registrations; remove duplicate embedded Save actions. New-resource routes and overlay forms retain explicit Create actions.
+- Fold SSH login-shell selection into the executor-profile draft instead of invoking profile Save out of band.
+- Preserve create/save/delete controls inside dialogs and sheets.
+- Pages with several cards, such as repositories, register stable per-resource contributors so the floating action saves all dirty cards.
+
+### Integrations
+
+- Register page-level GitHub scope, action-preset, default-query, GitLab credential, and Jira/Linear/Slack configuration drafts.
+- Stage watcher enabled changes on GitHub, Jira, Linear, and Sentry; watcher Create/Edit dialogs, run/reset commands, and confirmed deletion stay immediate.
+- Resetting default queries or action presets updates the draft and waits for Save.
+
+## Tests
+
+- Coordinator component tests cover registration, stable ordering, validation, partial failure, retry, duplicate submission, unregister, discard, and edits during an in-flight save.
+- Routing tests cover Link/router/history blocking, Save and leave, Discard and leave, failed Save and leave, and `beforeunload` registration.
+- Workflow unit tests prove toggles/reorders/additions do not call APIs before Save, temporary IDs remap, partial creation retries without duplication, and confirmed deletes remain immediate.
+- Focused settings tests prove each former write-through surface stays local until Save and reset-to-default remains draftable.
+- Existing manual-form tests are updated to target the shared action without weakening dirty/validation assertions.
+
+## E2E Tests
+
+- Update `apps/web/e2e/pages/workflow-settings-page.ts` and workflow desktop/mobile specs to prove no persistence before Save, one Save covers metadata and steps, new workflow creation waits for Save, and destructive commands remain explicit.
+- Add `apps/web/e2e/tests/settings/settings-manual-save.spec.ts` for Appearance plus a second settings surface, reload persistence, partial failure/status where mockable, and dirty navigation.
+- Update `mobile-general-settings.spec.ts` to verify the 390px floating action, safe-area clearance, touch target, last-control reachability, and no horizontal overflow.
+- Run affected existing agent, executor, repository, automation, terminal, and integration E2E specs after their Save selectors change.
+
+## Risks
+
+- Existing endpoints are not transactional; partial success must remain visible and retryable.
+- Several sections patch `userSettings`; each route must compose a single owner or serialize patches to avoid lost fields.
+- Workflow temporary-ID remapping affects transitions and pull-from references and needs focused regression coverage.
+- Browser back/forward blocking can corrupt history if the blocked destination is not restored carefully.
+- Theme preview and websocket/store refreshes must not overwrite dirty drafts or accidentally persist previews.
+
+## Out of Scope
+
+- Backend transactions, record versions, multi-user merge/conflict UI, and durable client drafts.
+- Replacing named operational commands or overlay-local Create/Save/Delete actions.
+
+## Implementation Waves
+
+Wave 1:
+
+- [x] [Task 01: Save coordinator and navigation guard](task-01-save-coordinator.md) (done)
+
+Wave 2 (parallel after Task 01; file ownership is disjoint):
+
+- [x] [Task 02: Workflow drafts](task-02-workflow-drafts.md) (done)
+- [x] [Task 03: General and operational drafts](task-03-general-operational-drafts.md) (done)
+- [x] [Task 04: Existing manual editor migration](task-04-manual-editor-migration.md) (done)
+- [x] [Task 05: Integration settings migration](task-05-integration-settings.md) (done)
+
+Wave 3:
+
+- [x] [Task 06: E2E, mobile QA, and final audit](task-06-e2e-mobile-qa.md) (done)
+
+Task 06 completed the static settings audit, rendered desktop and mobile Playwright coverage,
+Docker-backed SSH persistence coverage, and the full repository verification pipeline.
+
+## Verification
+
+```bash
+cd apps && pnpm --filter @kandev/web test -- --run components/settings app/settings lib/routing
+cd apps/web && pnpm run typecheck
+cd apps && pnpm --filter @kandev/web lint
+cd apps/web && pnpm e2e:run tests/workflow/workflow-settings.spec.ts tests/settings/settings-manual-save.spec.ts
+cd apps/web && pnpm e2e:run --project mobile-chrome --no-build tests/workflow/mobile-workflow-settings.spec.ts tests/settings/mobile-general-settings.spec.ts
+GOCACHE=/tmp/kandev-go-cache make fmt
+GOCACHE=/tmp/kandev-go-cache make typecheck
+GOCACHE=/tmp/kandev-go-cache make test
+GOCACHE=/tmp/kandev-go-cache GOLANGCI_LINT_CACHE=/tmp/kandev-golangci-cache make lint
+```
diff --git a/docs/plans/settings-manual-save/task-01-save-coordinator.md b/docs/plans/settings-manual-save/task-01-save-coordinator.md
new file mode 100644
index 0000000000..00532958ec
--- /dev/null
+++ b/docs/plans/settings-manual-save/task-01-save-coordinator.md
@@ -0,0 +1,57 @@
+---
+id: "01-save-coordinator"
+title: "Save coordinator and navigation guard"
+status: done
+wave: 1
+depends_on: []
+plan: "plan.md"
+spec: "../../specs/ui/settings-manual-save.md"
+---
+
+# Task 01: Save Coordinator and Navigation Guard
+
+## Acceptance
+
+- Settings descendants can register stable dirty contributors and one fixed action saves all valid dirty contributors in stable order with revision-safe partial-failure handling.
+- The action is hidden when clean, accessible on desktop/mobile, uses safe-area offsets, and does not cover the final page controls.
+- Dirty in-app/history navigation offers Save and leave, Discard and leave, and Continue editing; reload/external exit installs a native warning.
+
+## Verification
+
+```bash
+cd apps && pnpm --filter @kandev/web test -- --run components/settings/settings-save-provider.test.tsx components/settings/settings-layout-client.test.tsx components/routing/app-link.test.tsx lib/routing/client-router.test.ts
+cd apps/web && pnpm run typecheck
+```
+
+## Files Likely Touched
+
+- `apps/web/components/settings/settings-save-provider.tsx`
+- `apps/web/components/settings/settings-save-provider.test.tsx`
+- `apps/web/components/settings/settings-floating-save.tsx`
+- `apps/web/components/settings/settings-layout-client.tsx`
+- `apps/web/components/settings/settings-layout-client.test.tsx`
+- `apps/web/lib/routing/navigation-guard.ts`
+- `apps/web/lib/routing/client-router.ts`
+- `apps/web/lib/routing/client-router.test.ts`
+- `apps/web/components/routing/app-link.tsx`
+- `apps/web/components/routing/app-link.test.tsx`
+
+## Dependencies
+
+None.
+
+## Inputs
+
+- Spec: What, State Machine, Failure Modes, navigation and mobile Scenarios.
+- ADR 0042.
+
+## Output Contract
+
+Report registry API, save ordering/error semantics, navigation behavior, rendered mobile checks, tests run, files touched, blockers, and update this task plus `plan.md`.
+
+## Result
+
+- Added a keyed contributor registry with stable ordering, validation state, revision snapshots, sequential partial-failure saves, retries, and discard callbacks.
+- Added the safe-area-aware fixed action and dirty-navigation dialog to the settings shell.
+- Guarded Link/router/history navigation and installed native unload protection while the route is dirty.
+- Targeted component/routing tests, TypeScript typecheck, and targeted ESLint pass.
diff --git a/docs/plans/settings-manual-save/task-02-workflow-drafts.md b/docs/plans/settings-manual-save/task-02-workflow-drafts.md
new file mode 100644
index 0000000000..6445f311cf
--- /dev/null
+++ b/docs/plans/settings-manual-save/task-02-workflow-drafts.md
@@ -0,0 +1,60 @@
+---
+id: "02-workflow-drafts"
+title: "Workflow drafts"
+status: done
+wave: 2
+depends_on: ["01-save-coordinator"]
+plan: "plan.md"
+spec: "../../specs/ui/settings-manual-save.md"
+---
+
+# Task 02: Workflow Drafts
+
+## Acceptance
+
+- Workflow metadata, ordering, step fields, transitions, and additions issue no persistence request before the shared Save action.
+- One Save persists all dirty workflows and maps client workflow/step identities without duplicate creation on retry.
+- Confirmed deletion/migration/import/export remains immediate; deleting a persisted dirty resource warns that its draft is discarded.
+
+## Verification
+
+```bash
+cd apps && pnpm --filter @kandev/web test -- --run app/settings/workspace/use-workflow-creation.test.ts components/settings/workflow-card-actions.test.ts components/settings/workflow-pipeline-editor-helpers.test.ts
+cd apps/web && pnpm run typecheck
+```
+
+## Files Likely Touched
+
+- `apps/web/app/settings/workspace/workspace-workflows-client.tsx`
+- `apps/web/app/settings/workspace/use-workflow-creation.ts`
+- `apps/web/app/settings/workspace/use-workflow-creation.test.ts`
+- `apps/web/components/settings/workflow-card.tsx`
+- `apps/web/components/settings/workflow-card-actions.ts`
+- `apps/web/components/settings/workflow-card-actions.test.ts`
+- `apps/web/components/settings/workflow-card-dialogs.tsx`
+- `apps/web/components/settings/workflow-pipeline-editor.tsx`
+- `apps/web/components/settings/workflow-pipeline-editor-step-actions.tsx`
+- `apps/web/components/settings/workflow-pipeline-editor-helpers.tsx`
+- `apps/web/hooks/use-workflow-snapshot.ts`
+
+## Dependencies
+
+Task 01.
+
+## Inputs
+
+- Spec: Workflow settings, State Machine, workflow Scenarios.
+- Existing workflow snapshots and current serialized mutation coverage.
+
+## Output Contract
+
+Report draft model, save operation order, identity remapping, immediate destructive paths, tests run, residual partial-save risks, and update task/plan status.
+
+## Completion Notes
+
+- Workflow cards register route save contributors; metadata, step fields, transitions, additions, and ordering stay in local React drafts.
+- Save creates or updates workflow metadata, reconciles template steps, creates missing steps, remaps step references, updates changed steps, and finally persists step and workflow ordering.
+- Mutable save progress retains the created workflow and client-to-server step IDs so a partial failure retries only missing work instead of duplicating resources.
+- Persisted workflow/step deletion and migration remain confirmed immediate operations. Unsaved resources are removed locally, and destructive dialogs warn when drafts will be discarded.
+- Focused workflow tests, workflow settings synchronization tests, frontend typecheck, scoped lint, and `git diff --check` pass.
+- Backend endpoints remain non-transactional. A failed save can leave a partially created workflow on the server; its draft remains retryable, while Discard attempts best-effort cleanup.
diff --git a/docs/plans/settings-manual-save/task-03-general-operational-drafts.md b/docs/plans/settings-manual-save/task-03-general-operational-drafts.md
new file mode 100644
index 0000000000..ca3da8c2e1
--- /dev/null
+++ b/docs/plans/settings-manual-save/task-03-general-operational-drafts.md
@@ -0,0 +1,51 @@
+---
+id: "03-general-operational-drafts"
+title: "General and operational drafts"
+status: done
+wave: 2
+depends_on: ["01-save-coordinator"]
+plan: "plan.md"
+spec: "../../specs/ui/settings-manual-save.md"
+---
+
+# Task 03: General and Operational Drafts
+
+## Acceptance
+
+- Former write-through General, Voice, Utility Agent, Feature Toggle, and changelog-notification controls remain local until Save.
+- Theme preview is immediate but durable storage changes only on Save and discard restores the saved theme.
+- Shortcut/feature/default resets are drafts; restart prompting follows a successful runtime-flag save.
+
+## Verification
+
+```bash
+cd apps && pnpm --filter @kandev/web test -- --run components/settings/terminal-settings.test.ts components/settings/keyboard-shortcuts-card.test.tsx components/settings/voice-mode-settings.test.tsx components/settings/system-metrics-settings-card.test.tsx components/settings/system/feature-toggles-settings.test.tsx
+cd apps/web && pnpm run typecheck
+```
+
+## Files Likely Touched
+
+- `apps/web/components/settings/general-settings.tsx`
+- `apps/web/components/theme/app-theme.tsx`
+- `apps/web/components/settings/system-metrics-settings-card.tsx`
+- `apps/web/components/settings/keyboard-shortcuts-card.tsx`
+- `apps/web/components/settings/terminal-settings.tsx`
+- `apps/web/components/settings/shell-settings-card.tsx`
+- `apps/web/components/settings/voice-mode-settings.tsx`
+- `apps/web/components/settings/changelog-notification-card.tsx`
+- `apps/web/components/settings/utility-agents-section.tsx`
+- `apps/web/components/settings/config-chat-agent-section.tsx`
+- `apps/web/components/settings/system/feature-toggles-settings.tsx`
+
+## Dependencies
+
+Task 01.
+
+## Inputs
+
+- Spec: Settings-wide coverage, Immediate actions, reset/theme/feature scenarios.
+- ADR 0017 and ADR 0018 for metrics/runtime flag ownership.
+
+## Output Contract
+
+Report each removed write-through path, composed payload ownership, preview/discard behavior, tests run, files touched, and update task/plan status.
diff --git a/docs/plans/settings-manual-save/task-04-manual-editor-migration.md b/docs/plans/settings-manual-save/task-04-manual-editor-migration.md
new file mode 100644
index 0000000000..9c538f9f87
--- /dev/null
+++ b/docs/plans/settings-manual-save/task-04-manual-editor-migration.md
@@ -0,0 +1,67 @@
+---
+id: "04-manual-editor-migration"
+title: "Existing manual editor migration"
+status: done
+wave: 2
+depends_on: ["01-save-coordinator"]
+plan: "plan.md"
+spec: "../../specs/ui/settings-manual-save.md"
+---
+
+# Task 04: Existing Manual Editor Migration
+
+## Acceptance
+
+- Existing route-level Save controls register with the shared action and duplicate header/card/footer Save buttons are removed.
+- Multi-card repository and nested profile forms keep independent dirty/error state while one Save covers all route contributors.
+- SSH login-shell selection joins the executor-profile draft and no longer invokes profile persistence before the shared Save.
+- New-resource routes and dialog/sheet Create, Save, and destructive actions retain their explicit local actions; only automation edit mode registers with the floating action.
+
+## Verification
+
+```bash
+cd apps && pnpm --filter @kandev/web test -- --run components/settings app/settings/agents app/settings/executors app/settings/workspace
+cd apps/web && pnpm run typecheck
+```
+
+## Files Likely Touched
+
+- `apps/web/components/settings/settings-page-template.tsx`
+- `apps/web/components/settings/unsaved-indicator.tsx`
+- `apps/web/components/settings/editors-settings.tsx`
+- `apps/web/components/settings/notifications-settings.tsx`
+- `apps/web/components/settings/prompts-settings.tsx`
+- `apps/web/components/settings/secrets-settings.tsx`
+- `apps/web/app/settings/workspace/workspace-edit-client.tsx`
+- `apps/web/app/settings/workspace/workspace-repositories-client.tsx`
+- `apps/web/components/settings/repository-card.tsx`
+- `apps/web/app/settings/agents/[agentId]/page.tsx`
+- `apps/web/app/settings/agents/[agentId]/agent-setup-parts.tsx`
+- `apps/web/app/settings/agents/[agentId]/profile-mcp-config-card.tsx`
+- `apps/web/components/settings/agent-profile-page.tsx`
+- `apps/web/components/settings/profile-edit/profile-edit-page-chrome.tsx`
+- `apps/web/app/settings/executor/[id]/page.tsx`
+- `apps/web/app/settings/executors/[profileId]/page.tsx`
+- `apps/web/components/settings/ssh-agent-readiness-card.tsx`
+- `apps/web/app/settings/executor/[id]/profile/[profileId]/page.tsx`
+- `apps/web/components/automations/automation-editor.tsx`
+
+## Dependencies
+
+Task 01.
+
+## Inputs
+
+- Spec: settings-wide coverage and overlay exceptions.
+- Existing `SettingsPageTemplate`, `UnsavedSaveButton`, repository dirty helpers, and profile save helpers.
+
+## Output Contract
+
+Report migrated routes and intentional overlay exceptions, tests run, selector changes for E2E, files touched, blockers, and update task/plan status.
+
+## Result
+
+- Migrated workspace, repository, agent/profile, executor/profile, MCP policy, editor, notification, and automation edit forms to route contributors.
+- Folded SSH login-shell and automation trigger edits into their owning drafts; trigger writes now begin only after Save and partial retries do not recreate completed triggers.
+- Retained explicit Create actions for new agents, profiles, executors, and automations, plus overlay-local and destructive commands.
+- Verified with 113 focused settings and automation tests, web typecheck, and scoped ESLint.
diff --git a/docs/plans/settings-manual-save/task-05-integration-settings.md b/docs/plans/settings-manual-save/task-05-integration-settings.md
new file mode 100644
index 0000000000..5d40d2bbdf
--- /dev/null
+++ b/docs/plans/settings-manual-save/task-05-integration-settings.md
@@ -0,0 +1,65 @@
+---
+id: "05-integration-settings"
+title: "Integration settings migration"
+status: done
+wave: 2
+depends_on: ["01-save-coordinator"]
+plan: "plan.md"
+spec: "../../specs/ui/settings-manual-save.md"
+---
+
+# Task 05: Integration Settings Migration
+
+## Acceptance
+
+- Page-level integration forms and GitHub scope/preset/query editors use the shared floating action without embedded Save buttons.
+- GitHub/Jira/Linear/Sentry watcher enabled toggles are drafts; watcher dialogs, manual runs/resets, and confirmed deletes remain immediate.
+- Resetting default queries/action presets stays local until Save.
+
+## Verification
+
+```bash
+cd apps && pnpm --filter @kandev/web test -- --run components/github components/gitlab components/jira components/linear components/sentry components/slack
+cd apps/web && pnpm run typecheck
+```
+
+## Files Likely Touched
+
+- `apps/web/components/github/github-settings.tsx`
+- `apps/web/components/github/github-repo-scope-section.tsx`
+- `apps/web/components/github/action-presets-section.tsx`
+- `apps/web/components/github/default-queries-section.tsx`
+- `apps/web/components/github/review-watch-table.tsx`
+- `apps/web/components/github/issue-watch-table.tsx`
+- `apps/web/components/gitlab/gitlab-settings.tsx`
+- `apps/web/components/jira/jira-settings.tsx`
+- `apps/web/components/jira/task-presets-section.tsx`
+- `apps/web/components/jira/jira-issue-watchers-section.tsx`
+- `apps/web/components/linear/linear-settings.tsx`
+- `apps/web/components/linear/linear-issue-watchers-section.tsx`
+- `apps/web/components/sentry/sentry-issue-watchers-section.tsx`
+- `apps/web/components/slack/slack-settings.tsx`
+
+## Dependencies
+
+Task 01.
+
+## Inputs
+
+- Spec: Settings-wide coverage, Immediate actions, reset scenarios.
+- Existing integration form save handlers and watcher dialog boundaries.
+
+## Output Contract
+
+Report each migrated form/toggle, retained immediate commands, tests run, files touched, integration-specific risks, and update task/plan status.
+
+## Result
+
+- Migrated GitHub, GitLab, Jira, Linear, Sentry, and Slack route-level forms to the shared
+  floating action while retaining overlay-local connection and destructive commands.
+- Drafted GitHub action presets/default queries/repository scope, Jira task presets, and
+  GitHub/Jira/Linear/Sentry watcher enabled state until Save.
+- Added existing Sentry instance editing to the route coordinator; new-instance creation keeps
+  its explicit form action.
+- Verified 363 focused integration tests, web typecheck, scoped ESLint, and affected Playwright
+  scenarios.
diff --git a/docs/plans/settings-manual-save/task-06-e2e-mobile-qa.md b/docs/plans/settings-manual-save/task-06-e2e-mobile-qa.md
new file mode 100644
index 0000000000..8b75196bb5
--- /dev/null
+++ b/docs/plans/settings-manual-save/task-06-e2e-mobile-qa.md
@@ -0,0 +1,71 @@
+---
+id: "06-e2e-mobile-qa"
+title: "E2E, mobile QA, and final audit"
+status: done
+wave: 3
+depends_on: ["02-workflow-drafts", "03-general-operational-drafts", "04-manual-editor-migration", "05-integration-settings"]
+plan: "plan.md"
+spec: "../../specs/ui/settings-manual-save.md"
+---
+
+# Task 06: E2E, Mobile QA, and Final Audit
+
+## Acceptance
+
+- Desktop E2E proves draft-before-Save, persistence-after-Save, dirty navigation, new workflow behavior, and retained immediate commands.
+- Mobile E2E proves the fixed action is touch reachable, safe-area aware, non-overlapping, and does not introduce horizontal overflow at 390px.
+- A final settings audit finds no persistence call reachable directly from a draftable control; full format, typecheck, test, and lint pass.
+
+## Verification
+
+```bash
+cd apps/web && pnpm e2e:run tests/workflow/workflow-settings.spec.ts tests/settings/settings-manual-save.spec.ts
+cd apps/web && pnpm e2e:run --project mobile-chrome --no-build tests/workflow/mobile-workflow-settings.spec.ts tests/settings/mobile-general-settings.spec.ts
+cd apps/web && pnpm e2e:run tests/settings/agent-profile-acp.spec.ts tests/settings/agent-profile-cli-flags.spec.ts tests/automations-settings.spec.ts tests/terminal/terminal-settings.spec.ts tests/integrations/jira-settings.spec.ts
+GOCACHE=/tmp/kandev-go-cache make fmt
+GOCACHE=/tmp/kandev-go-cache make typecheck
+GOCACHE=/tmp/kandev-go-cache make test
+GOCACHE=/tmp/kandev-go-cache GOLANGCI_LINT_CACHE=/tmp/kandev-golangci-cache make lint
+```
+
+## Files Likely Touched
+
+- `apps/web/e2e/pages/workflow-settings-page.ts`
+- `apps/web/e2e/tests/workflow/workflow-settings.spec.ts`
+- `apps/web/e2e/tests/workflow/mobile-workflow-settings.spec.ts`
+- `apps/web/e2e/tests/settings/settings-manual-save.spec.ts`
+- `apps/web/e2e/tests/settings/mobile-general-settings.spec.ts`
+- Existing affected settings/integration page objects and specs whose Save selectors changed
+- `docs/specs/ui/settings-manual-save.md`
+- `docs/plans/settings-manual-save/plan.md`
+
+## Dependencies
+
+Tasks 02-05.
+
+## Inputs
+
+- Every spec Scenario.
+- Mobile parity and E2E skill guidance.
+- Completed migration reports from Tasks 02-05.
+
+## Output Contract
+
+Report scenarios and viewport checks, screenshots inspected, final autosave audit results, exact commands/results, residual risks, and mark all task/plan statuses accurately.
+
+## Result
+
+- Added desktop coverage for workflow and general settings draft-before-Save, persistence-after-Save, and dirty-route navigation.
+- Added mobile coverage for explicit workflow Save plus 390px action geometry, touch target size, last-control clearance, and horizontal overflow.
+- Migrated affected workflow, automation, integration, prompt, repository, executor-profile, agent-profile, existing Sentry, and existing SSH selectors to the shared floating action.
+- Audited the settings routes after the final migrations. Draftable configuration mutation sites are registered contributors; remaining local Create/Save controls are new-resource or dialog flows, and named operational/destructive actions remain immediate by design.
+- Scoped E2E Prettier and ESLint pass. Focused coordinator, automation-toggle, Sentry, and SSH
+  component tests pass.
+- Rendered workflow and automation desktop coverage passes; the seed-protection workflow case
+  also passed three consecutive stabilization runs.
+- All 5 focused mobile settings tests pass at the mobile project viewport, including floating
+  action geometry, 44px touch target, last-control clearance, and horizontal-overflow checks.
+- All 5 Docker-backed SSH persistence tests pass, including draft-before-Save and
+  persistence-after-Save for an existing executor.
+- Full formatting, generated metadata, typecheck, backend tests, web tests, CLI tests (278),
+  script tests, backend lint, web lint, harness lint, and `git diff --check` pass.
diff --git a/docs/plans/workflow-settings-autosave/plan.md b/docs/plans/workflow-settings-autosave/plan.md
new file mode 100644
index 0000000000..681cdc6cdb
--- /dev/null
+++ b/docs/plans/workflow-settings-autosave/plan.md
@@ -0,0 +1,77 @@
+---
+spec: docs/specs/workflow-settings-autosave/spec.md
+created: 2026-07-14
+status: superseded
+superseded_by: docs/plans/settings-manual-save/plan.md
+---
+
+# Implementation Plan: Workflow Settings Autosave
+
+> Superseded by [Settings Manual Save](../settings-manual-save/plan.md). This completed plan remains as the implementation record for the former autosave behavior.
+
+## Overview
+
+First move workflow creation into the dialog confirmation path and introduce a shared card persistence status with retry. Then make the workflow and step editors responsive without changing their API contracts. Finally update desktop and mobile E2E coverage to assert persistence, status, and reachability.
+
+## Backend
+
+No backend changes are required. Existing workflow and workflow-step create/update endpoints remain the persistence boundary.
+
+## Frontend
+
+### Creation and autosave state
+
+- `apps/web/app/settings/workspace/use-workflow-creation.ts`: create workflows and initial steps from dialog confirmation, protect against websocket bootstrap races, and clean up partial creation failures.
+- `apps/web/app/settings/workspace/workspace-workflows-client.tsx`: integrate immediate creation and debounce persisted workflow name changes.
+- `apps/web/components/settings/workflow-card-actions.ts`: expose step mutation status and retry while preserving current refresh/error behavior.
+- `apps/web/components/settings/workflow-card.tsx`: combine metadata and step statuses, render a card-level autosave indicator, and remove the manual Save control.
+- `apps/web/app/settings/workspace/workspace-workflows-dialogs.tsx`: keep the dialog open while creating, disable duplicate submission, and report creation progress.
+
+### Responsive layout
+
+- `apps/web/components/settings/settings-section.tsx`: stack section heading/actions at narrow widths.
+- `apps/web/components/settings/workflow-card.tsx`: stack workflow detail fields and wrap card actions.
+- `apps/web/components/settings/workflow-pipeline-editor-panels.tsx`: stack fixed-width step header controls and keep touch targets reachable.
+
+## Tests
+
+- `apps/web/components/settings/workflow-card-actions.test.ts`: step mutation status and retry behavior.
+- `apps/web/hooks/domains/settings/use-workflow-settings.test.ts` or a focused new hook test: metadata autosave debounce/retry logic if extracted into a hook.
+
+## E2E Tests
+
+- `apps/web/e2e/tests/workflow/workflow-settings.spec.ts`: creation persists directly; workflow metadata and step settings persist without Save; no Save control remains.
+- `apps/web/e2e/tests/workflow/mobile-workflow-settings.spec.ts`: all required actions fit a 390px viewport, the document has no horizontal overflow, and autosave persists a user-visible edit.
+- `apps/web/e2e/pages/workflow-settings-page.ts`: replace manual-save helpers with autosave status helpers.
+
+## Implementation Waves
+
+Wave 1:
+- [x] [Task 01: Autosave state](task-01-autosave-state.md) (done)
+
+Wave 2:
+- [x] [Task 02: Responsive layout](task-02-responsive-layout.md) (done)
+
+Wave 3:
+- [x] [Task 03: E2E coverage](task-03-e2e-coverage.md) (done)
+
+## Verification
+
+```bash
+cd apps && pnpm --filter @kandev/web test -- --run app/settings/workspace/use-workflow-creation.test.ts components/settings/workflow-card-actions.test.ts
+cd apps/web && pnpm run typecheck
+cd apps/web && pnpm e2e:run tests/workflow/workflow-settings.spec.ts
+cd apps/web && pnpm e2e:run --project mobile-chrome --no-build tests/workflow/mobile-workflow-settings.spec.ts
+GOCACHE=/tmp/kandev-go-cache make fmt
+GOCACHE=/tmp/kandev-go-cache make typecheck
+GOCACHE=/tmp/kandev-go-cache make test
+GOCACHE=/tmp/kandev-go-cache GOLANGCI_LINT_CACHE=/tmp/kandev-golangci-cache make lint
+```
+
+## Completion Report
+
+- Verification: focused creation/autosave tests, web typecheck, desktop workflow E2E, mobile Chrome E2E, and the full repository format/typecheck/test/lint pipeline passed locally.
+- Behavior: workflow creation is immediate; metadata and step writes use separate serialized queues whose statuses are combined on the card; failures pause and retry the exact failed operation within the affected queue.
+- Responsive result: page actions, card fields, destructive actions, and the open step editor remain within a 390px viewport without document overflow.
+- Blockers: no implementation blocker. PR CI later exposed a shared `runtime-latest` Playwright browser-revision mismatch before any E2E spec started.
+- Residual races: cross-tab edits remain last-write-wins and are explicitly out of scope; within one card, stale completions cannot overwrite newer local metadata.
diff --git a/docs/plans/workflow-settings-autosave/task-01-autosave-state.md b/docs/plans/workflow-settings-autosave/task-01-autosave-state.md
new file mode 100644
index 0000000000..9626c5d2ed
--- /dev/null
+++ b/docs/plans/workflow-settings-autosave/task-01-autosave-state.md
@@ -0,0 +1,49 @@
+---
+id: "01-autosave-state"
+title: "Autosave state"
+status: done
+wave: 1
+depends_on: []
+plan: "plan.md"
+spec: "../../specs/workflow-settings-autosave/spec.md"
+---
+
+# Task 01: Autosave State
+
+## Acceptance
+
+- Add Workflow persists the selected template or default custom steps without a second Save action.
+- Workflow metadata and step mutations report one card-level Saving/Saved/Error state and the most recent failed operation can be retried.
+- No workflow card renders a manual Save control.
+
+## Verification
+
+```bash
+cd apps && pnpm --filter @kandev/web test -- --run app/settings/workspace/use-workflow-creation.test.ts components/settings/use-serialized-mutation-queue.test.ts components/settings/workflow-card-actions.test.ts
+cd apps/web && pnpm run typecheck
+```
+
+## Files Likely Touched
+
+- `apps/web/app/settings/workspace/workspace-workflows-client.tsx`
+- `apps/web/app/settings/workspace/workspace-workflows-dialogs.tsx`
+- `apps/web/components/settings/workflow-card.tsx`
+- `apps/web/components/settings/workflow-card-actions.ts`
+- `apps/web/components/settings/workflow-card-actions.test.ts`
+
+## Inputs
+
+- Spec: What, Failure Modes, and the first four Scenarios.
+- Existing `useRequest` status pattern and workflow-step reconciliation helpers.
+
+## Output Contract
+
+Report behavior implemented, files changed, targeted tests run, blockers, residual races, and update this task plus `plan.md` to done.
+
+## Completion Report
+
+- Behavior: Add Workflow persists before exposing the card; workflow and step mutations use separate ordered queues with a combined autosave status and exact-operation retry; failed rollback keeps the partial workflow recoverable.
+- Files: creation hook/dialog/client, workflow card/actions, serialized mutation queue, and focused unit tests.
+- Tests: the targeted creation, queue, and card-action Vitest files plus web typecheck passed.
+- Blockers: none.
+- Residual races: cross-tab concurrent edits are out of scope; same-card writes are serialized within their metadata or step stream, and stale metadata completions are ignored.
diff --git a/docs/plans/workflow-settings-autosave/task-02-responsive-layout.md b/docs/plans/workflow-settings-autosave/task-02-responsive-layout.md
new file mode 100644
index 0000000000..9fb7553297
--- /dev/null
+++ b/docs/plans/workflow-settings-autosave/task-02-responsive-layout.md
@@ -0,0 +1,47 @@
+---
+id: "02-responsive-layout"
+title: "Responsive workflow editor layout"
+status: done
+wave: 2
+depends_on: ["01-autosave-state"]
+plan: "plan.md"
+spec: "../../specs/workflow-settings-autosave/spec.md"
+---
+
+# Task 02: Responsive Workflow Editor Layout
+
+## Acceptance
+
+- Page actions, workflow details, card actions, and step header controls fit narrow viewports without document-level horizontal overflow.
+- The workflow pipeline retains its own horizontal scrolling and desktop layout remains dense and usable.
+- Required mobile controls have touch-reachable dimensions and do not rely on hover.
+
+## Verification
+
+```bash
+cd apps/web && pnpm run typecheck
+cd apps/web && pnpm e2e:run --project mobile-chrome --no-build tests/workflow/mobile-workflow-settings.spec.ts
+```
+
+## Files Likely Touched
+
+- `apps/web/components/settings/settings-section.tsx`
+- `apps/web/components/settings/workflow-card.tsx`
+- `apps/web/components/settings/workflow-pipeline-editor.tsx`
+- `apps/web/components/settings/workflow-pipeline-editor-panels.tsx`
+
+## Inputs
+
+- Spec: responsive requirements and 390px Scenario.
+- Mobile parity guidance and current workflow settings screenshots.
+
+## Output Contract
+
+Report responsive rules changed, rendered viewport checks, files touched, blockers, and update this task plus `plan.md` to done.
+
+## Completion Report
+
+- Responsive changes: section actions wrap, workflow fields stack, the pipeline owns horizontal scrolling, and step header/destructive controls remain reachable.
+- Viewport check: the mobile Chrome suite verified card controls and an open step editor at the Pixel 5 viewport with no document-level horizontal overflow.
+- Files: settings section, workflow card, pipeline editor/panels, and mobile workflow E2E.
+- Blockers: none.
diff --git a/docs/plans/workflow-settings-autosave/task-03-e2e-coverage.md b/docs/plans/workflow-settings-autosave/task-03-e2e-coverage.md
new file mode 100644
index 0000000000..36fc1f923d
--- /dev/null
+++ b/docs/plans/workflow-settings-autosave/task-03-e2e-coverage.md
@@ -0,0 +1,46 @@
+---
+id: "03-e2e-coverage"
+title: "Workflow autosave E2E coverage"
+status: done
+wave: 3
+depends_on: ["01-autosave-state", "02-responsive-layout"]
+plan: "plan.md"
+spec: "../../specs/workflow-settings-autosave/spec.md"
+---
+
+# Task 03: Workflow Autosave E2E Coverage
+
+## Acceptance
+
+- Desktop E2E proves workflow creation, metadata edits, and step edits persist without Save.
+- Mobile E2E proves required controls are fully within the viewport and the document has no horizontal overflow.
+- Page-object helpers describe autosave status rather than manual saving.
+
+## Verification
+
+```bash
+cd apps/web && pnpm e2e:run tests/workflow/workflow-settings.spec.ts
+cd apps/web && pnpm e2e:run --project mobile-chrome --no-build tests/workflow/mobile-workflow-settings.spec.ts
+```
+
+## Files Likely Touched
+
+- `apps/web/e2e/pages/workflow-settings-page.ts`
+- `apps/web/e2e/tests/workflow/workflow-settings.spec.ts`
+- `apps/web/e2e/tests/workflow/mobile-workflow-settings.spec.ts`
+
+## Inputs
+
+- All spec Scenarios and completed Tasks 01-02.
+- Existing workflow fixture/API helpers.
+
+## Output Contract
+
+Report scenarios covered, exact E2E command and result, artifacts inspected, blockers, and update this task plus `plan.md` to done.
+
+## Completion Report
+
+- Scenarios: template/custom creation, workflow-name autosave, step add/edit autosave, workflow/step profile autosave, removal of manual Save, and mobile reachability with the step editor open.
+- Results: the focused desktop autosave/creation runs and the full two-test mobile Chrome file passed locally; mutation-specific response waits prevent an existing `Saved` label from satisfying persistence assertions early.
+- Artifacts: Playwright traces/screenshots were inspected during failure triage; no persistent PR asset was required.
+- Blockers: PR CI later failed before test execution because the shared runtime image lacked the Playwright browser revision requested by the lockfile.
diff --git a/docs/specs/INDEX.md b/docs/specs/INDEX.md
index 4f7aed521f..9dbcaafd18 100644
--- a/docs/specs/INDEX.md
+++ b/docs/specs/INDEX.md
@@ -111,6 +111,7 @@ Subscription quota tracking and per-agent cheap-model profile routing.
 | [review-file-status](ui/review-file-status.md) | building |
 | [sidebar-view-creation](ui/sidebar-view-creation.md) | shipped |
 | [slash-command-composer](ui/slash-command-composer.md) | shipped |
+| [settings-manual-save](ui/settings-manual-save.md) | shipped |
 | [mobile-task-navigation](ui/mobile-task-navigation.md) | shipped |
 
 ## system-page/ — operational diagnostics & maintenance UI
@@ -120,8 +121,8 @@ System pages (Radarr/Sonarr-style) for status, disk usage, database maintenance,
 | Spec | Status |
 |---|---|
 | [system-page](system-page/spec.md) | draft |
-| [feature-toggles](feature-toggles/spec.md) | draft |
 | [storage-maintenance](system-page/storage-maintenance.md) | building |
+| [feature-toggles](feature-toggles/spec.md) | draft |
 
 ---
 
@@ -137,6 +138,7 @@ System pages (Radarr/Sonarr-style) for status, disk usage, database maintenance,
 | [public-share-links](public-share-links/spec.md) | draft |
 | [ssh-executor](ssh-executor/spec.md) | draft |
 | [cli-mode-parity](cli-mode-parity/spec.md) | draft |
+| [workflow-settings-autosave](workflow-settings-autosave/spec.md) | archived; superseded by settings-manual-save |
 | [mobile-quick-chat-topbar](mobile-quick-chat-topbar/spec.md) | building |
 
 ---
diff --git a/docs/specs/ui/settings-manual-save.md b/docs/specs/ui/settings-manual-save.md
new file mode 100644
index 0000000000..7303219df7
--- /dev/null
+++ b/docs/specs/ui/settings-manual-save.md
@@ -0,0 +1,121 @@
+---
+status: shipped
+created: 2026-07-14
+owner: kandev
+supersedes: docs/specs/workflow-settings-autosave/spec.md
+---
+
+# Settings Manual Save
+
+## Why
+
+Settings pages currently mix immediate persistence, section-level Save buttons, and page-level Save buttons. This makes it unclear when a change becomes durable, creates unnecessary intermediate writes while a user is still configuring a resource, and leaves required actions out of view on long pages.
+
+## What
+
+- Editing a persistent configuration value under `/settings` changes a local draft and does not call a persistence API until the user explicitly saves.
+- A subtle fixed action appears at the bottom-right of the viewport whenever the current settings route has at least one dirty draft. It remains reachable while the page scrolls and saves every dirty contributor on that route.
+- The action reports `Save changes`, `Saving...`, `Saved`, or `Couldn't save`. It prevents duplicate submissions, remains visible after a failure, and retries contributors that are still dirty.
+- A successful contributor becomes clean only for the exact draft revision that was submitted. Edits made while a save is in flight remain dirty and require another Save.
+- When several cards or sections are dirty, one Save attempts all of them in a stable order. Successful contributors become clean even if another contributor fails; failed and newly edited contributors remain dirty.
+- Existing page-level and section-level Save buttons move to the shared floating action when their fields belong to the route. Dialog and sheet forms keep their own explicit Create or Save button.
+- A draftable reset-to-default action, including keyboard shortcut, feature-toggle, query, and preset resets, updates the draft and requires Save. It is not treated as an immediate command.
+- A visual preview may react immediately when that is the purpose of the setting, such as changing the color theme, but the durable value is not updated until Save. Reloading or discarding before Save restores the saved value.
+- Controls remain interactive while dirty. Persistence latency begins only after Save, so experimenting with toggles and selectors does not block further editing.
+- Each draftable control whose value differs from its saved baseline uses the shared success-green border and subtle ring so the user can identify the unsaved fields. Its nested containers and nearest owning card use progressively quieter success-green borders without additional glow whenever a descendant is dirty. The markers clear when the value returns to its baseline, is discarded, or saves successfully; settings dirty state never uses warning-yellow styling.
+- On settings routes, the floating action uses the success-green treatment and does not overlap the Configuration Chat trigger or its open popover. While the popover is open, the action sits immediately above it and remains reachable within desktop and mobile viewports.
+
+### Workflow settings
+
+- Confirming Add Workflow creates a local new-workflow draft. The workflow and its initial steps are not persisted until the floating Save action is pressed.
+- Workflow metadata, default profile, step fields, transitions, step ordering, workflow ordering, and newly added steps remain local drafts until Save.
+- The workflow page may contain multiple dirty workflows. The single floating action saves all dirty workflow contributors.
+- A dirty or newly added workflow marks its workflow card and each changed metadata control. A dirty or newly added step marks its pipeline node, selected step configuration panel, and changed controls, while the owning workflow card remains marked.
+- New workflow and step drafts use client-only identities until persistence succeeds. References between draft steps are remapped to server identities during Save.
+- Removing a step that exists only in the draft is local. Deleting an already persisted step or workflow remains an immediate, explicitly confirmed destructive command; if it has unsaved edits, the confirmation states that those edits will be discarded.
+- Import, export, task migration, and confirmed workflow or step deletion remain explicit immediate commands. An imported workflow is a clean persisted baseline.
+
+### Settings-wide coverage
+
+The manual-save rule applies to route-level persistent configuration, including:
+
+- workspace details, repositories, workflows, and automation editors;
+- agent, agent-profile, executor, executor-profile, and SSH login-shell configuration;
+- appearance, resource metrics, keyboard shortcuts, terminal and shell, editors, notifications, voice mode, prompts, secrets, and changelog-notification configuration;
+- utility-agent selection/enabled state and the config-chat profile;
+- runtime feature-toggle overrides;
+- integration configuration forms, GitHub repository scope/action presets/default queries, and GitHub/Jira/Linear/Sentry watcher enabled state.
+
+### Immediate actions
+
+The following remain immediate because the user invokes a named operation rather than edits a draft field:
+
+- browser permission prompts, connection tests, refreshes, rescans, probes, reveals, copies, imports, exports, and downloads;
+- Connect, Disconnect, Clear credential, Remove credential, and dialog-level Create/Save/Delete submissions;
+- confirmed destructive actions, including deleting a persisted workflow or step, provider, watch, repository, profile, secret, or other resource;
+- task migration, manual watcher runs/resets that alter matched task state, cleanup operations, backups, restores, database maintenance, updates, restart, and factory reset;
+- clearing the changelog last-seen marker.
+
+Changing a configuration value to its default is not an immediate action merely because its control is labeled Reset.
+
+## State Machine
+
+Each registered contributor has these observable states:
+
+| State   | Trigger                                                             | Result                                                                                         |
+| ------- | ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| Clean   | Draft equals its saved baseline                                     | No floating action is shown for that contributor.                                              |
+| Dirty   | A draftable value changes                                           | The floating action appears; no persistence request is made.                                   |
+| Invalid | A dirty draft fails local validation                                | The action remains visible but Save is disabled with the invalid field identified on the page. |
+| Saving  | The user presses Save                                               | The submitted revision is persisted once; duplicate Save is disabled.                          |
+| Clean   | The submitted revision succeeds and is still current                | The baseline advances and the contributor leaves the dirty set.                                |
+| Dirty   | The submitted revision succeeds but the user edited again in flight | The new revision stays dirty.                                                                  |
+| Error   | Persistence fails                                                   | The draft remains visible and dirty; the action reports failure and can be retried.            |
+
+Route navigation with dirty contributors opens an in-app confirmation with `Save and leave`, `Discard and leave`, and `Continue editing`. Browser reload, tab close, and external navigation use the native `beforeunload` warning. A failed `Save and leave` keeps the user on the page. Browser history navigation must not silently discard drafts.
+
+## Failure Modes
+
+- A failed save never replaces the draft with the last server response and never marks that contributor clean.
+- Saving multiple contributors is not atomic. The coordinator continues attempting the remaining dirty contributors, reports a route-level error if any fail, and retains only failed or subsequently edited contributors as dirty.
+- If a server or websocket refresh arrives while a contributor is clean, it may replace the baseline and draft. If it arrives while dirty, it must not overwrite the user's draft.
+- A partially created workflow stays represented by the user's draft. Save retries only missing or still-dirty operations and must not create a duplicate workflow.
+- Existing API authorization and validation errors are surfaced beside the shared action and by the relevant field or section when available.
+
+## Persistence Guarantees
+
+- Only a successful explicit Save or an immediate named command changes durable settings.
+- Unsaved drafts are route-local and do not survive reload, process restart, or an explicit discard.
+- Existing backend persistence contracts remain the source of truth after reload. This feature does not add client-side draft storage.
+- Manual saving reduces intermediate writes but does not add optimistic concurrency control. Existing server conflict behavior remains in force.
+
+## Scenarios
+
+- **GIVEN** a saved workflow step, **WHEN** the user toggles Auto-start agent several times, **THEN** the control responds immediately, no update request is sent, and the floating action remains visible until Save.
+- **GIVEN** dirty workflow metadata and two dirty workflow steps, **WHEN** the user presses Save, **THEN** all three drafts are persisted and a reload shows the saved values.
+- **GIVEN** a new workflow draft, **WHEN** the user reloads before saving, **THEN** no workflow was created and the draft is discarded.
+- **GIVEN** two dirty settings contributors and one save fails, **WHEN** Save completes, **THEN** the successful contributor is clean, the failed contributor remains dirty, and the action reports `Couldn't save`.
+- **GIVEN** a save is in flight, **WHEN** the user changes another field, **THEN** the completed request does not clear the newer dirty revision.
+- **GIVEN** a dirty keyboard shortcut, **WHEN** the user presses Reset, **THEN** the default shortcut is shown locally and no persistence request occurs until Save.
+- **GIVEN** a dirty feature-toggle override, **WHEN** the user presses Reset to default, **THEN** the inherited value is staged and the runtime flag does not change until Save succeeds.
+- **GIVEN** a dirty color-theme draft, **WHEN** the user previews another theme and leaves with Discard, **THEN** the previously saved theme is restored.
+- **GIVEN** one or more changed settings fields, **WHEN** their draft values differ from the saved baseline, **THEN** only those controls have the green dirty-field border until they are reverted, discarded, or saved.
+- **GIVEN** one or more changed settings fields inside a card or framed settings group, **WHEN** any descendant differs from its saved baseline, **THEN** the changed controls use the strongest green marker, nested containers and their owning card use quieter green borders without stacked glow, and no settings dirty marker uses yellow.
+- **GIVEN** a new workflow or workflow step draft, **WHEN** it has not been saved yet, **THEN** the new item, its owning workflow card, and its changed controls are marked dirty until Save succeeds.
+- **GIVEN** a dirty settings route, **WHEN** the user navigates elsewhere, **THEN** an in-app confirmation offers Save and leave, Discard and leave, or Continue editing.
+- **GIVEN** a persisted workflow step with tasks, **WHEN** the user confirms migration and deletion, **THEN** the destructive operation runs immediately without waiting for the floating Save action.
+- **GIVEN** a long settings page on desktop or a 390px mobile viewport, **WHEN** any field becomes dirty, **THEN** the floating action is fully visible, keyboard/touch reachable, clear of safe-area insets, and does not cover the last editable control.
+- **GIVEN** Configuration Chat is open on a dirty settings route, **WHEN** the floating action is shown, **THEN** the Save action sits above the popover without intersecting it, remains inside the viewport, and can save without closing the chat.
+- **GIVEN** a clean settings route, **WHEN** it is displayed, **THEN** no floating save action occupies the viewport.
+
+## Out of Scope
+
+- Atomic transactions across unrelated settings endpoints or across multiple workflows.
+- Record versioning, merge UI, or multi-user conflict resolution.
+- Persisting unfinished drafts across reloads or devices.
+- Replacing explicit operation buttons for tests, lifecycle commands, destructive confirmations, or dialog forms.
+- Changing backend settings schemas or HTTP contracts solely to support the floating action.
+
+## Implementation Plan
+
+See [the implementation plan](../../plans/settings-manual-save/plan.md).
diff --git a/docs/specs/workflow-cycle-guardrails/spec.md b/docs/specs/workflow-cycle-guardrails/spec.md
index f71069fb81..5f107de990 100644
--- a/docs/specs/workflow-cycle-guardrails/spec.md
+++ b/docs/specs/workflow-cycle-guardrails/spec.md
@@ -52,12 +52,12 @@ pipeline view makes the complete trigger path easy to miss.
 - Existing persisted workflows with a replay cycle display the diagnostic as
   soon as their steps load. This visibility does not retroactively stop active
   tasks or prevent edits that remove the cycle.
-- Existing workflows keep their current immediate step persistence. Before a
-  step update, add, delete, or reorder request is sent, the editor analyzes the
-  proposed complete shape:
-  - a newly introduced fully automatic cycle cancels the request and offers no
+- Existing workflows use the settings route's manual-save drafts. Before a
+  topology edit is applied to the local draft, the editor analyzes the proposed
+  complete shape:
+  - a newly introduced fully automatic cycle cancels the edit and offers no
     override;
-  - a newly introduced user-mediated cycle holds the request until the user
+  - a newly introduced user-mediated cycle holds the draft edit until the user
     chooses **Apply anyway** or cancels it;
   - a change that removes a cycle proceeds without confirmation.
 - A mutation is considered newly introduced only when its resulting diagnostic
@@ -112,11 +112,10 @@ deterministic and has no persisted state.
 
 - If workflow steps fail to load, the editor keeps its existing load error and
   does not claim that the workflow is safe.
-- If a confirmed remote mutation fails, the existing error toast remains the
-  source of truth and the editor retains its last server-backed shape. A
-  successful add, update, or reorder applies the authoritative mutation
-  response before the guard accepts another topology edit. Confirmation never
-  implies persistence succeeded.
+- If a confirmed draft is later saved and persistence fails, the shared
+  settings Save error remains the source of truth and the editor retains the
+  local dirty shape. Confirmation accepts the topology edit but never implies
+  persistence succeeded.
 - If a workflow already contains a fully automatic cycle, opening settings
   surfaces the blocking diagnostic but does not interrupt running tasks. The
   author must remove the cycle to prevent future re-entry.
@@ -159,8 +158,8 @@ deterministic and has no persisted state.
   prompt source before the author edits it.
 - **GIVEN** an existing workflow already has a replay-cycle diagnostic, **WHEN**
   the author changes only its name or prompt without changing the diagnostic
-  identity, **THEN** the mutation is not reconfirmed and the inline alert
-  remains accurate.
+  identity, **THEN** the draft edit is not reconfirmed, the inline alert remains
+  accurate, and persistence still waits for the route-level Save action.
 - **GIVEN** an existing replay cycle, **WHEN** an edit removes the return path or
   removes `auto_start_agent`, **THEN** the edit persists without confirmation
   and the diagnostic disappears after refresh.
diff --git a/docs/specs/workflow-settings-autosave/spec.md b/docs/specs/workflow-settings-autosave/spec.md
new file mode 100644
index 0000000000..e38ff4d86d
--- /dev/null
+++ b/docs/specs/workflow-settings-autosave/spec.md
@@ -0,0 +1,53 @@
+---
+status: archived
+created: 2026-07-14
+owner: kandev
+superseded_by: docs/specs/ui/settings-manual-save.md
+---
+
+# Workflow Settings Autosave
+
+> Superseded by [Settings Manual Save](../ui/settings-manual-save.md). This file records the previously shipped autosave behavior and is no longer the product contract.
+
+## Why
+
+Workflow settings currently mix manual saving for workflow details with immediate saving for workflow steps. The mixed model makes the Save button look authoritative even when it does not control step persistence, and responsive clipping can make that required action unreachable.
+
+## What
+
+- Confirming the Add Workflow dialog creates the workflow and its initial template or custom steps; users do not need a second Save action.
+- Changes to workflow name, default agent profile, step fields, step ordering, and step membership save automatically.
+- Each workflow card exposes one status for all automatic persistence: `Saving`, `Saved`, or `Couldn't save`, with a Retry action when the last operation failed.
+- Workflow name edits are debounced. Discrete controls and step mutations begin saving immediately.
+- A workflow card never presents a manual Save button.
+- Desktop and mobile layouts keep every required action inside the viewport. The pipeline may scroll horizontally inside its own region, but the page and card do not horizontally overflow.
+- On narrow screens, workflow details and step configuration fields stack, section actions wrap, and destructive/secondary actions remain reachable by touch.
+
+## Failure Modes
+
+- Automatic saves run in order within the metadata and step mutation streams. A failed save pauses later queued writes in the affected stream, leaves the user's current value visible, shows `Couldn't save`, and offers Retry for the exact failed operation.
+- A failed workflow creation keeps the Add Workflow dialog open, preserves its inputs, and shows an error notification.
+- If both workflow creation and rollback fail, the partial workflow remains visible so the user can retry setup or delete it.
+- Retrying does not replay an operation that already succeeded; queued writes in the affected stream resume only after the failed write succeeds.
+
+## Persistence Guarantees
+
+Only successful backend writes survive reload or restart. Save-status UI state is transient and is reconstructed as the neutral autosave state after navigation.
+
+## Scenarios
+
+- **GIVEN** an existing workflow, **WHEN** the user changes its name and pauses, **THEN** the card shows saving feedback and the new name remains after reload without a Save click.
+- **GIVEN** an existing workflow, **WHEN** the user changes a step setting, **THEN** the same card-level status reports the operation and the setting remains after reload.
+- **GIVEN** a selected template or Custom, **WHEN** the user confirms Add Workflow, **THEN** the workflow and initial steps are persisted and the new card has no Save button.
+- **GIVEN** an automatic save failure, **WHEN** the user selects Retry, **THEN** the last failed change is attempted again and the status updates from Saving to Saved on success.
+- **GIVEN** a 390px-wide viewport, **WHEN** the workflow settings page and a step editor are open, **THEN** all required controls are fully inside the viewport and the document has no horizontal overflow.
+
+## Out of Scope
+
+- Atomic multi-step transactions or version-conflict resolution across browser tabs.
+- Undo history for workflow changes.
+- Changes to workflow or workflow-step HTTP contracts.
+
+## Implementation Plan
+
+See [the completed implementation plan](../../plans/workflow-settings-autosave/plan.md).