manage/.pi-tmp/followup1-wiring-out.md

Follow-up 1 — SheetForm isDirty wiring (worker output)

Task

Wire the new isDirty prop of SheetForm into three remaining form consumers (Settings machine editor, message compose, WidgetConfigDialog) so unsaved edits trigger a "Discard changes?" confirm before closing.

Files changed (this worker's scope)

File	Status	Lines
frontend/src/pages/Settings.tsx	modified	+25 (isMachineDraftDirty helper + isDirty prop)
frontend/src/pages/UsersPage.impl.tsx	modified	+5 (isDirty prop on compose SheetForm)
frontend/src/components/WidgetConfigDialog.tsx	modified	+1 (isDirty prop)
frontend/src/pages/__tests__/Settings.test.tsx	modified	+23 (dirty guard test)
frontend/src/pages/__tests__/UsersPage.test.tsx	modified	+31 (compose dirty guard test)
frontend/src/components/__tests__/WidgetConfigDialog.test.tsx	modified	+14 (draft dirty guard test)

Total: ~99 changed lines — well under the 250-line budget.

isDirty expressions per consumer

1. Settings machine editor (Settings.tsx)

Helper function isMachineDraftDirty(draft, editingMachine):

• Create mode (editingMachine === null): always dirty (return true).
• Edit mode: field-by-field comparison of user-editable fields:
  • name, host, mode, port, username, ssh_key_id, enabled, notes
  • services array (sorted JSON.stringify comparison for order-insensitivity)

function isMachineDraftDirty(draft, editingMachine): boolean {
  if (!editingMachine) return true;
  return (
    draft.name !== editingMachine.name ||
    draft.host !== editingMachine.host ||
    draft.mode !== editingMachine.mode ||
    draft.port !== editingMachine.port ||
    draft.username !== editingMachine.username ||
    draft.ssh_key_id !== editingMachine.ssh_key_id ||
    draft.enabled !== editingMachine.enabled ||
    draft.notes !== editingMachine.notes ||
    JSON.stringify([...draft.services].sort()) !==
      JSON.stringify([...editingMachine.services].sort())
  );
}

Note: node_exporter_scrape_host (mentioned in the task) does not exist in either MonitoringMachine or MonitoringMachineInput in this codebase. The comparable editable fields were used instead. Secret fields (ssh_private_key, password) are excluded because they're write-only (the original only has *_set booleans, not values).

2. Message compose (UsersPage.impl.tsx)

isDirty={
  subject.trim() !== "" ||
  htmlBody.trim() !== DEFAULT_HTML_BODY.trim() ||
  attachments.length > 0
}

3. WidgetConfigDialog (WidgetConfigDialog.tsx)

isDirty={draft !== null}

Dirty only in draft mode (when adding/editing a widget). In list mode, draft === null → isDirty = false (nothing to discard). In draft mode, onCancel={reset} returns to the list (does NOT close the sheet), so isDirty prompts before resetting the draft.

Validation

npm run lint   → 0 errors, 2 pre-existing warnings (UsersPage.impl.tsx exhaustive-deps)
npm run build  → ✓ built (tsc -b + vite)
npm run test   → 28 files / 122 tests passed (was 119; +3 new dirty-guard tests)

Deviations from task

1. node_exporter_scrape_host field: mentioned in the task but does not exist in the type definitions. Used the actual editable fields that exist on both MonitoringMachine and MonitoringMachineInput.
2. Secret fields excluded from dirty check: ssh_private_key, password, ssh_private_key_passphrase are write-only on the draft and have no comparable value on editingMachine (which only has *_set booleans). Including them would make the form always dirty in edit mode.

skill_resolution

none — no project/user SKILL.md paths were injected; no .atl/skill-registry.md found.

Residual risks

• None for this worker's scope. The SheetForm primitive and ServicePage wiring were done by the parent and are not touched here.