Add confirmation input to delete agent modal

[ksylvan]

Add confirmation input to delete agent modal

Summary

This PR enhances the DeleteAgentConfirmModal component by adding a confirmation input safeguard to prevent accidental deletion of agent working directories. The destructive "delete with directory" action now requires users to type the exact agent name before the button becomes enabled.

Closes #206

Screenshots

Old UI (with no confirmation on the destructive "Confirm and Erase" button):

New UI:

And the "Agent + Work Directory" button only becomes enabled when the agent name is filled in:

Files Changed

File	Change Type	Description
src/renderer/components/DeleteAgentConfirmModal.tsx	Modified	Added confirmation input and updated button labels
src/__tests__/renderer/components/DeleteAgentConfirmModal.test.tsx	Modified	Updated tests for new UI and added tests for confirmation input behavior

Code Changes

DeleteAgentConfirmModal.tsx

1. Added state management for confirmation input:

const [confirmationText, setConfirmationText] = useState('');
const isEraseEnabled = confirmationText === agentName;

2. Renamed buttons for clarity:

• "Confirm" → "Agent Only"
• "Confirm and Erase" → "Agent + Work Directory"

3. Added disabled state logic to the destructive button:

<button
    type="button"
    onClick={isEraseEnabled ? handleConfirmAndErase : undefined}
    onKeyDown={isEraseEnabled ? (e) => handleKeyDown(e, handleConfirmAndErase) : undefined}
    disabled={!isEraseEnabled}
    className={`px-4 py-2 rounded transition-colors outline-none focus:ring-2 focus:ring-offset-1 ${
        !isEraseEnabled ? 'opacity-50 cursor-not-allowed' : ''
    }`}
    ...
>

4. Added danger warning and confirmation input field:

<strong style={{ color: theme.colors.warning }}>Danger:</strong>
...
<input
    type="text"
    value={confirmationText}
    onChange={(e) => setConfirmationText(e.target.value)}
    placeholder="Type the agent name here to confirm directory deletion"
    aria-label="Confirm agent name"
/>

DeleteAgentConfirmModal.test.tsx

Added a new test suite confirmation input with the following test cases:

• Button disabled by default
• Button enabled when exact agent name is typed
• Button remains disabled with partial name
• Button remains disabled with incorrect case
• Confirmation input renders with proper placeholder
• Danger warning displays with high-contrast color

Reason for Changes

The previous implementation allowed users to accidentally delete an agent's entire working directory with a single click. This is a destructive and irreversible operation that could result in significant data loss. The confirmation input pattern (similar toGitHub's repository deletion) adds a deliberate friction point that:

1. Forces users to acknowledge what they're deleting
2. Prevents misclicks from causing data loss
3. Makes the severity of the action explicit with a "Danger" warning

Impact of Changes

• User Experience: Slightly more friction for the destructive action, but significantly improved safety
• Accessibility: The input field includes proper aria-label for screen readers
• Visual Clarity: Renamed buttons more clearly indicate what each action does
• No Breaking Changes: The component's external API remains unchanged

Potential Bugs / Considerations

1. Case Sensitivity: The confirmation is case-sensitive (confirmationText === agentName). This is intentional for security but users may be confused if they type the name with different casing.

2. Copy-Paste: Users can copy-paste the agent name from the modal text, which somewhat defeats the purpose of the confirmation. Consider whether this is acceptable UX.

3. State Persistence: The confirmationText state resets when the modal unmounts. If the modal is closed and reopened, users must type the name again (expected behavior).

Test Plan

• All existing tests have been updated to reflect the new button names
• New test cases cover:
  • Default disabled state of the destructive button
  • Exact match enabling the button
  • Partial match keeping button disabled
  • Case mismatch keeping button disabled
  • Proper placeholder and accessibility attributes
  • Danger warning visibility

Run tests with:

npm test -- DeleteAgentConfirmModal

Additional Notes

• The confirmation uses strict equality (===), not a case-insensitive comparison. This is a deliberate design choice to require exact input.
• The visual styling uses opacity-50 and cursor-not-allowed for the disabled state, maintaining consistency with common UI patterns.