Quickstart: Verify Agent Editor Unsaved Changes Warning

Manual verification recipe for all three navigation paths covered by the feature, plus the must-not-trigger negative cases. Run after any change to the dirty-tracking hook, the dialog, the editor's back button, the agents page tab switcher, or AppHeader.GuardedLink.

Prerequisites

• Local UI dev server running: cd ui && npm run dev.
• A user account with admin / dynamic-agents access (see useAdminRole).
• At least one existing dynamic agent (or willingness to create one).

P1 — Back button warns when dirty

1. Navigate to /dynamic-agents (Agents tab).
2. Click an existing non-config-driven agent to open the editor.
3. Don't change anything. Click the back arrow (top-left of the editor).
   • Expected: editor closes immediately, no modal. Returns to agent list.
4. Open the same agent again.
5. Change any field (e.g., append " test" to the name, or edit description).
6. Click the back arrow.
   • Expected: in-app modal appears with title "Unsaved changes" and a description that mentions the agent editor.
7. Click Keep editing.
   • Expected: modal closes, editor remains open, your typed changes are still in the field.
8. Click the back arrow again, then click Discard changes.
   • Expected: modal closes, editor closes, agent list is shown, your edits are gone.

P1 — Sub-tab switch warns when dirty

1. Open an agent in the editor and modify any field.
2. Click the MCP Servers sub-tab on the Agents page.
   • Expected: in-app modal appears. URL has NOT changed yet.
3. Click Keep editing.
   • Expected: modal closes; you remain on the Agents tab; editor still open with edits intact.
4. Click LLM Models sub-tab, then in the modal click Discard changes.
   • Expected: modal closes; URL switches to ?tab=llm-models; LLM Models content renders; the editor is gone.
5. Re-open an agent (no changes), click Conversations sub-tab.
   • Expected: switches immediately, no modal.

P2 — Top-level header navigation warns when dirty

1. Open an agent and modify any field.
2. In the top header, click Chat.
   • Expected: in-app modal appears (title "Unsaved changes", generic description). URL has NOT changed.
3. Click Keep editing.
   • Expected: modal closes; still on /dynamic-agents; editor still open and intact.
4. Click Home (or the app logo), then Discard changes.
   • Expected: navigates to /; modal gone.

Negative — does not warn when not dirty

1. Open an agent (no changes). Click any sub-tab → switches immediately.
2. Open an agent (no changes). Click any header link → navigates immediately.
3. Open an agent (no changes). Click back arrow → returns to list immediately.

Negative — does not warn for read-only / config-driven agents

1. Find a config-driven agent (badged "Config" in the list). Click it to open the read-only viewer.
2. Try to interact with form fields — they are disabled.
3. Click back, click any sub-tab, click any header link.
   • Expected: in all three cases, the action proceeds immediately with no modal.

Negative — wizard step navigation does not warn

1. Open an agent and modify the description on Step 1.
2. Click into Step 2 (Instructions) using the step indicator at the top.
   • Expected: switches steps immediately, no modal. Your description edit is preserved.
3. Click back through Step 1.
   • Expected: same — step indicator never warns; your edit is still there.

Save flows — clears dirty correctly

1. Open an agent, change a field, click Save at the bottom.
2. After save succeeds and the editor closes, re-open the same agent.
3. Click any sub-tab without changing anything.
   • Expected: switches immediately, no modal. (Confirms successful save cleared the dirty flag and didn't leak.)
4. Open an agent, intentionally trigger a save failure (e.g., disconnect network or set a duplicate ID for new-agent flow). Save errors out.
5. Click the back arrow.
   • Expected: modal appears (because dirty is still true after a failed save).

Negative — no native browser dialog

1. Open an agent and modify any field.
2. With the editor open, hit your browser's reload button (Cmd-R / F5).
   • Expected: page reloads without any "Leave site?" native browser confirmation. (We intentionally do not block this; the spec excludes native dialogs.)

Edge — revert clears dirty

1. Open an agent. Note the current name.
2. Type one extra character at the end of the name. Confirm typing makes the dirty state effective by clicking back — modal appears. Click Keep editing.
3. Delete that one extra character so the name matches the original exactly.
4. Click back.
   • Expected: editor closes immediately, no modal.

Cloning — starts clean

1. From the agent list, click the Clone (CopyPlus) icon on any agent.
2. Editor opens with " (New)" appended to the name.
3. Without changing anything else, click back.
   • Expected: editor closes immediately, no modal. (The " (New)" suffix is part of the initial snapshot.)
4. Open the clone flow again, change the description, click back.
   • Expected: modal appears.

Done

If every section above behaves as described, the feature is verified end-to-end.