Add end-to-end tests for parent item management

- Implement tests for creating, editing, and deleting chores, kindness acts, and penalties.
- Add tests to verify conversion of default items to user items and restoration of system defaults upon deletion.
- Ensure proper cancellation of creation and editing actions.
- Create a comprehensive plan document outlining the test scenarios and expected behaviors.

frontend/vue-app/e2e/mode_parent/tasks/kindness-delete-default.spec.ts

@@ -0,0 +1,93 @@
+// spec: frontend/vue-app/e2e/plans/parent-item-management.plan.md
+// seed: e2e/seed.spec.ts
+
+import { test, expect } from '@playwright/test'
+
+test('Edit default kindness act "Be good for the day" and verify system act restoration on delete', async ({
+  page,
+}) => {
+  await page.goto('/parent/tasks/chores')
+  await page.getByText('Kindness Acts').click()
+
+  // Cleanup: if a previous run left a modified 'Be good for the day' (with delete icon), remove it first
+  while (
+    (await page
+      .getByText('Be good for the day', { exact: true })
+      .locator('..')
+      .locator('button[aria-label="Delete item"]')
+      .count()) > 0
+  ) {
+    await page
+      .getByText('Be good for the day', { exact: true })
+      .locator('..')
+      .locator('button[aria-label="Delete item"]')
+      .first()
+      .click()
+    await page.getByRole('button', { name: 'Delete', exact: true }).click()
+  }
+
+  // 1. Verify 'Be good for the day' is the system default (visible, no delete icon)
+  await expect(page.getByText('Be good for the day', { exact: true })).toBeVisible()
+  await expect(
+    page
+      .getByText('Be good for the day', { exact: true })
+      .locator('..')
+      .locator('button[aria-label="Delete item"]'),
+  ).toHaveCount(0)
+
+  // 2. Click 'Be good for the day' to open the edit form and change points
+  await page.getByText('Be good for the day', { exact: true }).click()
+  await expect(page.locator('input#name').inputValue()).resolves.toBe('Be good for the day')
+
+  await page.evaluate(() => {
+    const setVal = (sel: string, val: string) => {
+      const el = document.querySelector(sel) as HTMLInputElement | null
+      if (el) {
+        el.value = val
+        el.dispatchEvent(new Event('input', { bubbles: true }))
+        el.dispatchEvent(new Event('change', { bubbles: true }))
+      }
+    }
+    setVal('#points', '3')
+  })
+
+  // expect: Save button becomes enabled because the form is dirty
+  await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled()
+  await page.getByRole('button', { name: 'Save' }).click()
+
+  // 3. Verify exactly one 'Be good for the day' is in the list and it now has a delete icon
+  await expect(page.getByText('Be good for the day', { exact: true })).toHaveCount(1)
+  await expect(
+    page
+      .getByText('Be good for the day', { exact: true })
+      .locator('..')
+      .locator('button[aria-label="Delete item"]'),
+  ).toBeVisible()
+  // expect: points display reflects the updated value
+  await expect(
+    page.getByText('Be good for the day', { exact: true }).locator('..').locator('.value'),
+  ).toHaveText('3 pts')
+
+  // 4. Delete the modified 'Be good for the day' and verify the system default is restored
+  await page
+    .getByText('Be good for the day', { exact: true })
+    .locator('..')
+    .locator('button[aria-label="Delete item"]')
+    .click()
+  await expect(page.locator('text=Are you sure')).toBeVisible()
+  await page.getByRole('button', { name: 'Delete', exact: true }).click()
+
+  // expect: 'Be good for the day' is still on the list (system default restored)
+  await expect(page.getByText('Be good for the day', { exact: true })).toBeVisible()
+  // expect: no delete icon (it's a system default again)
+  await expect(
+    page
+      .getByText('Be good for the day', { exact: true })
+      .locator('..')
+      .locator('button[aria-label="Delete item"]'),
+  ).toHaveCount(0)
+  // expect: original points (15 pts) are restored
+  await expect(
+    page.getByText('Be good for the day', { exact: true }).locator('..').locator('.value'),
+  ).toHaveText('15 pts')
+})