From d147bd6f27e9b6c2228b4c14ee476c2e2a5a15b8 Mon Sep 17 00:00:00 2001 From: Ryan Kegel Date: Tue, 26 May 2026 16:54:45 -0400 Subject: [PATCH 01/31] feat(tutorial): implement comprehensive tutorial system with step guidance - Added tutorial controller to manage tutorial state and progress. - Introduced HelpButton component for contextual help throughout the application. - Created various tutorial steps for onboarding and feature guidance. - Integrated tutorial prompts in multiple components (ChildrenListView, LoginButton, ScheduleModal, etc.) to enhance user experience. - Implemented logic to show tutorials based on user actions and state. - Added functionality to dismiss and skip tutorial sessions. - Established a mechanism to hydrate tutorial state from user profile. --- backend/api/user_api.py | 33 ++ backend/models/user.py | 6 + frontend/src/App.vue | 4 + frontend/src/common/models.ts | 2 + frontend/src/components/child/ParentView.vue | 68 +++ .../notification/NotificationView.vue | 12 +- .../src/components/profile/UserProfile.vue | 113 +++++ frontend/src/components/reward/RewardView.vue | 16 +- .../components/routine/RoutineEditView.vue | 8 + .../components/shared/ChildrenListView.vue | 28 +- .../src/components/shared/LoginButton.vue | 22 + .../src/components/shared/ScheduleModal.vue | 10 +- frontend/src/components/task/ChoreView.vue | 16 +- .../src/components/task/KindnessEditView.vue | 2 + .../src/components/task/PenaltyEditView.vue | 2 + frontend/src/components/utils/ImagePicker.vue | 5 + frontend/src/layout/ChildLayout.vue | 12 + frontend/src/layout/ParentLayout.vue | 12 + frontend/src/tutorial/HelpButton.vue | 92 ++++ .../src/tutorial/TutorialChildModeOffer.vue | 100 +++++ frontend/src/tutorial/TutorialOverlay.vue | 402 ++++++++++++++++++ frontend/src/tutorial/controller.ts | 193 +++++++++ frontend/src/tutorial/steps.ts | 185 ++++++++ 23 files changed, 1338 insertions(+), 5 deletions(-) create mode 100644 frontend/src/tutorial/HelpButton.vue create mode 100644 frontend/src/tutorial/TutorialChildModeOffer.vue create mode 100644 frontend/src/tutorial/TutorialOverlay.vue create mode 100644 frontend/src/tutorial/controller.ts create mode 100644 frontend/src/tutorial/steps.ts diff --git a/backend/api/user_api.py b/backend/api/user_api.py index 11caf6d..1efd949 100644 --- a/backend/api/user_api.py +++ b/backend/api/user_api.py @@ -49,6 +49,8 @@ def get_profile(): 'image_id': user.image_id, 'email_digest_enabled': user.email_digest_enabled, 'push_notifications_enabled': user.push_notifications_enabled, + 'tutorial_enabled': user.tutorial_enabled, + 'tutorial_progress': user.tutorial_progress or {}, }), 200 @user_api.route('/user/profile', methods=['PUT']) @@ -109,6 +111,37 @@ def update_profile(): return jsonify({'message': 'Profile updated'}), 200 +@user_api.route('/user/tutorial-progress', methods=['PATCH']) +def update_tutorial_progress(): + user_id = get_validated_user_id() + if not user_id: + return jsonify({'error': 'Unauthorized', 'code': 'UNAUTHORIZED'}), 401 + user = get_current_user() + if not user: + return jsonify({'error': 'Unauthorized'}), 401 + data = request.get_json() or {} + + if data.get('reset') is True: + user.tutorial_progress = {} + elif 'enabled' in data: + user.tutorial_enabled = bool(data.get('enabled')) + elif 'step_id' in data: + step_id = str(data.get('step_id') or '').strip() + if not step_id: + return jsonify({'error': 'Missing step_id'}), 400 + progress = dict(user.tutorial_progress or {}) + progress[step_id] = bool(data.get('seen', True)) + user.tutorial_progress = progress + else: + return jsonify({'error': 'No-op'}), 400 + + users_db.update(user.to_dict(), UserQuery.email == user.email) + send_event_for_current_user(Event(EventType.PROFILE_UPDATED.value, ProfileUpdated(user.id))) + return jsonify({ + 'tutorial_enabled': user.tutorial_enabled, + 'tutorial_progress': user.tutorial_progress, + }), 200 + @user_api.route('/user/image', methods=['PUT']) def update_image(): user_id = get_validated_user_id() diff --git a/backend/models/user.py b/backend/models/user.py index b9e5ab7..91eb845 100644 --- a/backend/models/user.py +++ b/backend/models/user.py @@ -25,6 +25,8 @@ class User(BaseModel): timezone: str | None = None email_digest_enabled: bool = True push_notifications_enabled: bool = True + tutorial_enabled: bool = True + tutorial_progress: dict = field(default_factory=dict) @classmethod def from_dict(cls, d: dict): @@ -51,6 +53,8 @@ class User(BaseModel): timezone=d.get('timezone'), email_digest_enabled=d.get('email_digest_enabled', True), push_notifications_enabled=d.get('push_notifications_enabled', True), + tutorial_enabled=d.get('tutorial_enabled', True), + tutorial_progress=d.get('tutorial_progress', {}) or {}, id=d.get('id'), created_at=d.get('created_at'), updated_at=d.get('updated_at') @@ -82,5 +86,7 @@ class User(BaseModel): 'timezone': self.timezone, 'email_digest_enabled': self.email_digest_enabled, 'push_notifications_enabled': self.push_notifications_enabled, + 'tutorial_enabled': self.tutorial_enabled, + 'tutorial_progress': self.tutorial_progress, }) return base diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 8628eaa..8bd5d04 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,10 +1,14 @@ + + diff --git a/frontend/src/tutorial/TutorialChildModeOffer.vue b/frontend/src/tutorial/TutorialChildModeOffer.vue new file mode 100644 index 0000000..9d759e2 --- /dev/null +++ b/frontend/src/tutorial/TutorialChildModeOffer.vue @@ -0,0 +1,100 @@ + + + + + diff --git a/frontend/src/tutorial/TutorialOverlay.vue b/frontend/src/tutorial/TutorialOverlay.vue new file mode 100644 index 0000000..5f66052 --- /dev/null +++ b/frontend/src/tutorial/TutorialOverlay.vue @@ -0,0 +1,402 @@ + + + + + diff --git a/frontend/src/tutorial/controller.ts b/frontend/src/tutorial/controller.ts new file mode 100644 index 0000000..9b522d0 --- /dev/null +++ b/frontend/src/tutorial/controller.ts @@ -0,0 +1,193 @@ +import { ref, watch } from 'vue' +import { eventBus } from '@/common/eventBus' +import { stepRegistry, type StepDef } from './steps' + +export type AnchorSource = HTMLElement | (() => HTMLElement | null) | null + +export interface ActiveStep { + def: StepDef + anchor: AnchorSource +} + +export const tutorialEnabled = ref(true) +export const tutorialProgress = ref>({}) +export const tutorialReady = ref(false) +export const activeStep = ref(null) +export const sessionSkipped = ref(false) + +const queue: ActiveStep[] = [] +let hydrated = false + +function applyDevOverrides() { + if (typeof window === 'undefined') return + if (!import.meta.env.DEV) return + const params = new URLSearchParams(window.location.search) + if (params.get('tutorial') === 'off') { + tutorialEnabled.value = false + } + if (params.get('tutorial') === 'reset') { + void resetAllProgress() + } +} + +export function hydrateFromProfile(profile: { + tutorial_enabled?: boolean + tutorial_progress?: Record +}) { + if (typeof profile.tutorial_enabled === 'boolean') { + tutorialEnabled.value = profile.tutorial_enabled + } + if (profile.tutorial_progress && typeof profile.tutorial_progress === 'object') { + tutorialProgress.value = { ...profile.tutorial_progress } + } + tutorialReady.value = true + if (!hydrated) { + hydrated = true + applyDevOverrides() + } + // Re-evaluate queue: any step now-seen should be dropped. + for (let i = queue.length - 1; i >= 0; i--) { + const entry = queue[i] + if (entry && !shouldShowStep(entry.def.id)) queue.splice(i, 1) + } + if (activeStep.value && !shouldShowStep(activeStep.value.def.id)) { + activeStep.value = null + promote() + } +} + +export function shouldShowStep(id: string): boolean { + if (!tutorialEnabled.value) return false + if (sessionSkipped.value) return false + if (tutorialProgress.value[id]) return false + return true +} + +function resolveAnchor(anchor: AnchorSource): HTMLElement | null { + if (!anchor) return null + if (typeof anchor === 'function') return anchor() + return anchor +} + +function promote() { + if (activeStep.value) return + while (queue.length > 0) { + const next = queue.shift()! + if (!shouldShowStep(next.def.id)) continue + // If anchor is missing, try the registry fallback selector. + if (next.anchor === null && next.def.anchorSelector) { + const sel = next.def.anchorSelector + next.anchor = () => document.querySelector(sel) as HTMLElement | null + } + if (next.anchor !== null) { + const el = resolveAnchor(next.anchor) + if (!el) continue + } + activeStep.value = next + return + } +} + +/** + * Queue a step to be shown. Idempotent: if already seen or session-skipped, no-op. + * If anchor is provided but the element is missing at promotion time, the step is dropped. + * If anchor is null, the step renders as a centered modal-style card. + */ +export function maybeShow(id: string, anchor: AnchorSource = null) { + if (!stepRegistry[id]) { + if (import.meta.env.DEV) console.warn(`[tutorial] Unknown step id: ${id}`) + return + } + if (!shouldShowStep(id)) return + if (activeStep.value?.def.id === id) return + if (queue.some((q) => q.def.id === id)) return + queue.push({ def: stepRegistry[id], anchor }) + promote() +} + +export function dismissActive(markSeen = true) { + const current = activeStep.value + if (!current) return + activeStep.value = null + if (markSeen) { + void markStepSeen(current.def.id) + if (current.def.next) { + const nextDef = stepRegistry[current.def.next] + if (nextDef && shouldShowStep(nextDef.id)) { + queue.unshift({ def: nextDef, anchor: null }) + } + } + } + promote() +} + +export function skipSession() { + const current = activeStep.value + sessionSkipped.value = true + queue.length = 0 + activeStep.value = null + if (current) void markStepSeen(current.def.id) +} + +export async function markStepSeen(id: string): Promise { + // Optimistic — local first, then persist. + if (tutorialProgress.value[id]) return + tutorialProgress.value = { ...tutorialProgress.value, [id]: true } + try { + await fetch('/api/user/tutorial-progress', { + method: 'PATCH', + headers: { 'Content-Type': 'application/json' }, + credentials: 'include', + body: JSON.stringify({ step_id: id, seen: true }), + }) + } catch (e) { + if (import.meta.env.DEV) console.warn('[tutorial] Failed to persist step', id, e) + } +} + +export async function resetAllProgress(): Promise { + tutorialProgress.value = {} + sessionSkipped.value = false + try { + await fetch('/api/user/tutorial-progress', { + method: 'PATCH', + headers: { 'Content-Type': 'application/json' }, + credentials: 'include', + body: JSON.stringify({ reset: true }), + }) + } catch (e) { + if (import.meta.env.DEV) console.warn('[tutorial] Failed to reset progress', e) + } +} + +export async function setTutorialEnabled(on: boolean): Promise { + tutorialEnabled.value = on + if (!on) { + queue.length = 0 + activeStep.value = null + } + try { + await fetch('/api/user/tutorial-progress', { + method: 'PATCH', + headers: { 'Content-Type': 'application/json' }, + credentials: 'include', + body: JSON.stringify({ enabled: on }), + }) + } catch (e) { + if (import.meta.env.DEV) console.warn('[tutorial] Failed to set enabled', e) + } +} + +let profileUpdatedBound = false +export function bindProfileUpdatedListener(refetch: () => Promise | void) { + if (profileUpdatedBound) return + profileUpdatedBound = true + eventBus.on('profile_updated', () => { + void refetch() + }) +} + +// When the active step is dismissed externally (e.g. anchor unmounts), drain the queue. +watch(activeStep, (val) => { + if (val === null) promote() +}) diff --git a/frontend/src/tutorial/steps.ts b/frontend/src/tutorial/steps.ts new file mode 100644 index 0000000..513933b --- /dev/null +++ b/frontend/src/tutorial/steps.ts @@ -0,0 +1,185 @@ +export type Placement = 'auto' | 'below' | 'above' | 'left' | 'right' + +export interface StepDef { + id: string + title: string + body: string + /** Chain another step to fire after this one is dismissed. */ + next?: string + placement?: Placement + /** Primary button label. Defaults to "Got it" (or "Next" when `next` is set). */ + ctaLabel?: string + /** + * Fallback CSS selector used to resolve the anchor element when a step is + * triggered via chaining (no explicit anchor passed). Optional — if not set + * and no anchor is provided, the step renders centered with no spotlight. + */ + anchorSelector?: string +} + +/** + * Tutorial step registry. To add a new step: + * 1. Add an entry here. + * 2. In the host component that owns the anchor element, call + * `tutorial.maybeShow('your-id', anchorRefOrSelectorFn)`. + */ +export const stepRegistry: Record = { + // ── Forced 3-step intro ────────────────────────────────────────────────── + 'setup-parent-pin': { + id: 'setup-parent-pin', + title: 'Welcome! Set up your parent PIN', + body: 'Tap your avatar to set up a 4–6 digit PIN. The PIN keeps parent mode (where you add chores and rewards) safe from little fingers.', + placement: 'below', + ctaLabel: 'Got it', + }, + 'create-child': { + id: 'create-child', + title: 'Add your first child', + body: "Let's add your first kiddo. Tap the + button to create a profile — you can pick a fun avatar together.", + placement: 'above', + ctaLabel: 'Got it', + }, + 'create-chore': { + id: 'create-chore', + title: 'Create your first chore', + body: 'Tap + to add a chore — give it a name, choose points, and pick a picture so your child can spot it easily.', + placement: 'above', + ctaLabel: 'Got it', + }, + + // ── Create-flow JIT hints ──────────────────────────────────────────────── + 'create-chore-image': { + id: 'create-chore-image', + title: 'Pick a picture', + body: 'Tap + to choose from your photos, or the camera to snap a new one. A clear picture helps younger kids recognize each chore.', + placement: 'above', + }, + 'create-chore-schedule': { + id: 'create-chore-schedule', + title: 'Set when it happens', + body: 'Tap the days this chore should appear. Set a deadline if it needs to be done by a certain time, or leave it as Anytime.', + placement: 'below', + }, + 'create-kindness': { + id: 'create-kindness', + title: 'Kindness tasks', + body: 'Kindness tasks reward thoughtful behavior — sharing, helping a sibling, saying please. Give it a name and points.', + placement: 'auto', + }, + 'create-penalty': { + id: 'create-penalty', + title: 'Penalties', + body: 'Penalties subtract points when rules are broken. Use them sparingly — they work best alongside lots of positive tasks.', + placement: 'auto', + }, + 'create-routine': { + id: 'create-routine', + title: 'Routines', + body: "Routines bundle a sequence of small tasks — like a bedtime routine. Add each task below, and your child checks them off one by one.", + placement: 'auto', + }, + 'create-routine-add-task': { + id: 'create-routine-add-task', + title: 'Add tasks to the routine', + body: 'Tap to add each step. Order them the way you want your child to do them — they can be reordered later by dragging.', + placement: 'above', + }, + 'create-reward': { + id: 'create-reward', + title: 'Create your first reward', + body: "Rewards are what your child can spend points on — screen time, treats, a special outing. Tap + to add one.", + placement: 'above', + }, + + // ── Per-tab / navigation hints ─────────────────────────────────────────── + 'notification-click': { + id: 'notification-click', + title: 'Tap to review', + body: "We ping you when a chore is finished or a reward is requested. Tap a notification to jump straight to it and approve or reject.", + placement: 'below', + }, + + // ── Per-child view ─────────────────────────────────────────────────────── + 'select-child': { + id: 'select-child', + title: "This is your child's page", + body: 'Here you can assign chores, rewards, and routines, see their points, and review their progress. Scroll down to see each section.', + placement: 'auto', + next: 'assign-chore', + ctaLabel: 'Next', + }, + 'assign-chore': { + id: 'assign-chore', + title: 'Assign chores', + body: "Tap to pick which chores this child does. Assigned chores show up in their view. You can give the same chore to multiple kids.", + placement: 'above', + next: 'assign-reward', + ctaLabel: 'Next', + anchorSelector: '.assign-buttons button:nth-child(1)', + }, + 'assign-reward': { + id: 'assign-reward', + title: 'Assign rewards', + body: "Pick which rewards this child can spend points on. They'll only see rewards you assign here.", + placement: 'above', + next: 'assign-routine', + ctaLabel: 'Next', + anchorSelector: '.assign-buttons button:nth-child(3)', + }, + 'assign-routine': { + id: 'assign-routine', + title: 'Assign routines', + body: "Routines you assign show up on this child’s page as a checklist they can work through, step by step.", + placement: 'above', + anchorSelector: '.assign-buttons button:nth-child(2)', + }, + + // ── Kebab menus ────────────────────────────────────────────────────────── + 'child-kebab': { + id: 'child-kebab', + title: "Quick actions", + body: "Edit the child's name or photo, clear their points, or remove them entirely. These actions only affect this one kid.", + placement: 'below', + }, + 'chore-kebab': { + id: 'chore-kebab', + title: 'Chore actions', + body: 'Edit points, change when the chore appears, or open the schedule. New options can appear here depending on the chore’s status.', + placement: 'auto', + }, + 'chore-kebab-extend-time': { + id: 'chore-kebab-extend-time', + title: 'Extend the deadline', + body: "When a chore runs late, this option lets you give your child more time for the rest of today only — no need to reschedule.", + placement: 'auto', + }, + 'chore-kebab-reset': { + id: 'chore-kebab-reset', + title: 'Reset a completed chore', + body: "Already-completed today? Reset lets your child do it again today (points are kept). Useful for chores you want done twice.", + placement: 'auto', + }, + + // ── Child-mode tour (parent learns to teach) ───────────────────────────── + 'child-mode-overview': { + id: 'child-mode-overview', + title: "What your child sees", + body: "This is your child's home screen. They tap their own card to see their chores, routines, and rewards — just like you've been setting up.", + placement: 'auto', + anchorSelector: '.grid', + }, + + // ── Status badges ──────────────────────────────────────────────────────── + 'status-too-late': { + id: 'status-too-late', + title: 'Too late', + body: "This chore passed its deadline today. You can extend it from the kebab menu, or let it expire and try again tomorrow.", + placement: 'auto', + }, + 'status-pending': { + id: 'status-pending', + title: 'Waiting for your review', + body: "Pending means your child marked this done and is waiting for you to give it a thumbs-up. Tap to approve or reject.", + placement: 'auto', + }, +} From e2bb9cd6b91722b652722e7f432471ad55d6284d Mon Sep 17 00:00:00 2001 From: Ryan Kegel Date: Fri, 19 Jun 2026 17:27:35 -0400 Subject: [PATCH 02/31] feat: add onboarding tutorial for new users MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Introduced a modular tutorial layer to guide new parents through the app setup process. - Implemented a 3-step forced intro after first sign-in (PIN setup → child creation → chore creation). - Added just-in-time contextual hints for various features as users encounter them. - Persisted user progress on the backend with new fields in the User model. - Created a new tutorial controller and step registry in the frontend for managing tutorial states. - Added Help button for easy access to tutorial tips and a restart option in the user profile. - Ensured accessibility and mobile responsiveness for the tutorial overlay. - Included tests for backend and frontend functionalities related to the tutorial. --- AGENTS.md | 57 ++ frontend/src/App.vue | 2 + frontend/src/__tests__/UserProfile.spec.ts | 289 +++----- .../src/components/child/ChildEditView.vue | 2 + frontend/src/components/child/ParentView.vue | 162 ++++- .../src/components/profile/ProfileSection.vue | 156 +++++ .../src/components/profile/UserProfile.vue | 615 ++++++++++-------- .../src/components/reward/RewardEditView.vue | 2 + frontend/src/components/reward/RewardView.vue | 16 +- .../components/routine/RoutineEditView.vue | 18 +- .../components/shared/ChildrenListView.vue | 9 +- .../src/components/shared/ScheduleModal.vue | 43 +- .../src/components/task/ChoreEditView.vue | 2 + frontend/src/components/task/ChoreView.vue | 16 +- .../src/components/task/KindnessEditView.vue | 2 +- .../src/components/task/PenaltyEditView.vue | 2 +- frontend/src/components/utils/ImagePicker.vue | 11 +- frontend/src/layout/ChildLayout.vue | 12 - frontend/src/layout/ParentLayout.vue | 12 - frontend/src/tutorial/HelpButton.vue | 97 ++- frontend/src/tutorial/TutorialOverlay.vue | 29 +- frontend/src/tutorial/controller.ts | 55 +- frontend/src/tutorial/steps.ts | 586 ++++++++++++++++- plan-tutorial.md | 196 ++++++ 24 files changed, 1764 insertions(+), 627 deletions(-) create mode 100644 AGENTS.md create mode 100644 frontend/src/components/profile/ProfileSection.vue create mode 100644 plan-tutorial.md diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..0f3d66d --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,57 @@ +# AGENTS.md + +Family chore/reward manager. Flask + TinyDB backend (`backend/`), Vue 3 + TypeScript frontend (`frontend/`). Real-time updates over SSE. + +## Commands + +### Backend (run from `backend/`) +- Activate venv: `source .venv/bin/activate` +- Dev server: `python -m flask run --host=0.0.0.0 --port=5000` (entry: `main.py`) +- Required env vars: `SECRET_KEY`, `REFRESH_TOKEN_EXPIRY_DAYS`, `DIGEST_TOKEN_SECRET`, `VAPID_PUBLIC_KEY`, `VAPID_PRIVATE_KEY` — Flask raises `RuntimeError` on boot if any are missing +- Optional: `DB_ENV` / `DATA_ENV` (`prod` | `test` | `e2e`) — picks `data/` vs `test_data/` dir (see `config/paths.py`) +- Tests: `pytest tests/` — `conftest.py` forces `DB_ENV=test` and sets dummy secrets. Single test: `pytest tests/test_routine_api.py::test_name` +- Python imports assume `backend/` is on `sys.path` (set by `conftest.py` / `flask run` cwd). Run pytest from `backend/`. +- Create admin user: `python scripts/create_admin.py` (admin role cannot be set via signup) + +### Frontend (run from `frontend/`) +- Dev: `npm run dev` (Vite, https://localhost:5173) +- Lint: `npm run lint` +- Type-check: `npm run type-check` +- Unit tests: `npm run test:unit` (Vitest). Single: `npx vitest run path/to/file.spec.ts` +- E2E: `npx playwright test` — config auto-starts both `npm run dev` and the Flask backend with `DB_ENV=e2e DATA_ENV=e2e`. Tests live in `e2e/`. +- E2E buckets are Playwright projects (see `playwright.config.ts`) targeting directories under `e2e/mode_parent/` + +## Architecture + +### API routing — the `/api` prefix +- Frontend nginx (and Vite dev proxy) strips `/api` before forwarding. **Backend routes must NOT include `/api`.** Backend defines `@app.route('/user')`, frontend calls `/api/user`. +- `auth_api` is the only blueprint registered with a prefix: `url_prefix='/auth'` in `main.py:67`. +- API errors return `{ error, code }` (codes in `backend/api/error_codes.py`). Frontend extracts them via `parseErrorResponse(res)` in `src/common/api.ts`. + +### Models — strict 1:1 parity +- Python `@dataclass`es in `backend/models/`. TypeScript interfaces in `frontend/src/common/models.ts`. Any model change requires updating both. +- Persistence is TinyDB via the thread-safe `LockedTable` wrapper (`backend/db/db.py`). Operate on model instances with `from_dict()` / `to_dict()` — never raw dicts. + +### SSE event bus — mandatory for every mutation +- Every backend mutation (add/edit/delete/trigger) **must** call `send_event_for_current_user` from `api/utils.py`. Event types in `backend/events/types/` are mirrored in `frontend/src/common/backendEvents.ts`. +- Frontend: register listeners in `onMounted`, clean up in `onUnmounted`. SSE endpoint is `/events`. + +### Background schedulers (started in `main.py` at boot) +- `start_deletion_scheduler` — runs hourly, deletes accounts marked for deletion after threshold +- `start_digest_scheduler` — email digests +- `start_state_expiry_scheduler` — expires stale state +- `start_chore_expiry_notification_scheduler` — chore expiry notifications + +## Frontend conventions +- SFC file order: ` diff --git a/frontend/src/tutorial/TutorialOverlay.vue b/frontend/src/tutorial/TutorialOverlay.vue index 5f66052..f41f8a4 100644 --- a/frontend/src/tutorial/TutorialOverlay.vue +++ b/frontend/src/tutorial/TutorialOverlay.vue @@ -22,7 +22,11 @@
{ (preferred !== 'above' && spaceBelow >= ch + CARD_MARGIN) || spaceAbove < ch + CARD_MARGIN - const top = placeBelow ? r.bottom + CARD_MARGIN : Math.max(CARD_MARGIN, r.top - ch - CARD_MARGIN) + const top = placeBelow + ? Math.min(r.bottom + CARD_MARGIN, vh - ch - CARD_MARGIN) + : Math.max(CARD_MARGIN, Math.min(r.top - ch - CARD_MARGIN, vh - ch - CARD_MARGIN)) const anchorCenterX = r.left + r.width / 2 let left = anchorCenterX - cw / 2 @@ -261,6 +267,23 @@ watch( return } await nextTick() + // Scroll the anchor into view before measuring so the spotlight and card + // are positioned correctly. Use 'auto' for synchronous scroll — smooth + // scroll races the first measure and can leave the card off-screen. + const el = resolveAnchor() + if (el) { + const pos = getComputedStyle(el).position + const rect = el.getBoundingClientRect() + const isHidden = rect.width === 0 && rect.height === 0 + if (isHidden) { + anchorRect.value = null + } else if (pos !== 'fixed') { + el.scrollIntoView({ behavior: 'auto', block: 'center' }) + } + } + // Give the browser one frame to finish the synchronous scroll before + // measuring anchor and card positions. + await new Promise((r) => requestAnimationFrame(r)) measureAll() startTracking() // Focus primary button for keyboard users (after paint). @@ -277,7 +300,7 @@ onBeforeUnmount(stopTracking) .tutorial-root { position: fixed; inset: 0; - z-index: 1400; + z-index: 10000; pointer-events: none; } diff --git a/frontend/src/tutorial/controller.ts b/frontend/src/tutorial/controller.ts index 9b522d0..be46c95 100644 --- a/frontend/src/tutorial/controller.ts +++ b/frontend/src/tutorial/controller.ts @@ -14,10 +14,15 @@ export const tutorialProgress = ref>({}) export const tutorialReady = ref(false) export const activeStep = ref(null) export const sessionSkipped = ref(false) +/** When a modal is open, this holds the step ID that should fire via the `?` button. */ +export const modalTutorialStepId = ref(null) const queue: ActiveStep[] = [] let hydrated = false +/** Steps that were locally cleared for replay. Server hydration must not restore them. */ +const locallyCleared = new Set() + function applyDevOverrides() { if (typeof window === 'undefined') return if (!import.meta.env.DEV) return @@ -38,7 +43,18 @@ export function hydrateFromProfile(profile: { tutorialEnabled.value = profile.tutorial_enabled } if (profile.tutorial_progress && typeof profile.tutorial_progress === 'object') { - tutorialProgress.value = { ...profile.tutorial_progress } + // Merge server state with local state. Locally-cleared steps must NOT be + // restored by the server (prevents replay chains from breaking mid-flight + // when a PROFILE_UPDATED SSE arrives). + const merged = { ...profile.tutorial_progress } + for (const id of locallyCleared) { + delete merged[id] + } + // Overlay any local optimistic seen flags + for (const [key, val] of Object.entries(tutorialProgress.value)) { + if (val) merged[key] = true + } + tutorialProgress.value = merged } tutorialReady.value = true if (!hydrated) { @@ -110,7 +126,14 @@ export function dismissActive(markSeen = true) { if (!current) return activeStep.value = null if (markSeen) { - void markStepSeen(current.def.id) + // Steps cleared for manual replay (e.g. via the ? button) are ephemeral: + // track them locally so the chain can continue, but don't persist to the + // server. Forced intro / JIT auto-steps still hit the server. + if (locallyCleared.has(current.def.id)) { + tutorialProgress.value = { ...tutorialProgress.value, [current.def.id]: true } + } else { + void markStepSeen(current.def.id) + } if (current.def.next) { const nextDef = stepRegistry[current.def.next] if (nextDef && shouldShowStep(nextDef.id)) { @@ -118,6 +141,9 @@ export function dismissActive(markSeen = true) { } } } + // Chain finished or dismissed: remove this step from the ephemeral guard + // so future auto-triggers can persist normally. + locallyCleared.delete(current.def.id) promote() } @@ -126,13 +152,21 @@ export function skipSession() { sessionSkipped.value = true queue.length = 0 activeStep.value = null - if (current) void markStepSeen(current.def.id) + if (current) { + if (locallyCleared.has(current.def.id)) { + tutorialProgress.value = { ...tutorialProgress.value, [current.def.id]: true } + locallyCleared.delete(current.def.id) + } else { + void markStepSeen(current.def.id) + } + } } export async function markStepSeen(id: string): Promise { // Optimistic — local first, then persist. if (tutorialProgress.value[id]) return tutorialProgress.value = { ...tutorialProgress.value, [id]: true } + locallyCleared.delete(id) try { await fetch('/api/user/tutorial-progress', { method: 'PATCH', @@ -145,6 +179,21 @@ export async function markStepSeen(id: string): Promise { } } +/** Clear local "seen" state for a chain of steps so it can be replayed. + * Marks each cleared step so server hydration won't restore it mid-replay. */ +export function clearChainProgress(startId: string) { + let id: string | undefined = startId + while (id) { + if (tutorialProgress.value[id]) { + const progress = { ...tutorialProgress.value } + delete progress[id] + tutorialProgress.value = progress + } + locallyCleared.add(id) + id = stepRegistry[id]?.next + } +} + export async function resetAllProgress(): Promise { tutorialProgress.value = {} sessionSkipped.value = false diff --git a/frontend/src/tutorial/steps.ts b/frontend/src/tutorial/steps.ts index 513933b..253dc34 100644 --- a/frontend/src/tutorial/steps.ts +++ b/frontend/src/tutorial/steps.ts @@ -34,38 +34,359 @@ export const stepRegistry: Record = { }, 'create-child': { id: 'create-child', - title: 'Add your first child', - body: "Let's add your first kiddo. Tap the + button to create a profile — you can pick a fun avatar together.", + title: 'Add your child', + body: "Let's add your kiddo. Tap the + button to create a profile — you can pick a fun avatar together.", placement: 'above', ctaLabel: 'Got it', + anchorSelector: '.fab', + }, + 'parent-children-list': { + id: 'parent-children-list', + title: 'Your children', + body: 'This is your children list. Each card shows one of your kids — their photo, age, and points. Tap + to add a new child.', + placement: 'above', + next: 'child-points', + ctaLabel: 'Next', + anchorSelector: '.fab', + }, + 'child-points': { + id: 'child-points', + title: 'Points', + body: 'This is how many points your child has earned. They spend these on rewards you assign. Tap the child card to see their details and manage assignments.', + placement: 'below', + next: 'child-click', + ctaLabel: 'Next', + anchorSelector: '.points', + }, + 'child-click': { + id: 'child-click', + title: 'Tap a child', + body: 'Tap any child card to open their page. There you can assign chores, kindness acts, rewards, routines, and penalties.', + placement: 'below', + next: 'child-kebab', + ctaLabel: 'Next', + anchorSelector: '.card', }, 'create-chore': { id: 'create-chore', - title: 'Create your first chore', + title: 'Create your chore', body: 'Tap + to add a chore — give it a name, choose points, and pick a picture so your child can spot it easily.', placement: 'above', ctaLabel: 'Got it', }, // ── Create-flow JIT hints ──────────────────────────────────────────────── - 'create-chore-image': { - id: 'create-chore-image', - title: 'Pick a picture', - body: 'Tap + to choose from your photos, or the camera to snap a new one. A clear picture helps younger kids recognize each chore.', + 'edit-chore-name': { + id: 'edit-chore-name', + title: 'Chore Name', + body: 'Give the chore a short, clear name your child will understand — like "Clean your room" or "Feed the dog".', + placement: 'below', + next: 'edit-chore-points', + ctaLabel: 'Next', + anchorSelector: 'input#name', + }, + 'edit-chore-points': { + id: 'edit-chore-points', + title: 'Points', + body: 'How many points is this chore worth? Bigger or harder chores can be worth more. Your child spends these points on rewards.', + placement: 'below', + next: 'edit-chore-image', + ctaLabel: 'Next', + anchorSelector: 'input#points', + }, + 'edit-chore-image': { + id: 'edit-chore-image', + title: 'Pick a Picture', + body: 'Choose an image so your child can spot this chore easily. Tap + to pick from your photos or the camera to take a new one.', + placement: 'above', + anchorSelector: '.picker', + }, + 'create-chore-image-photo': { + id: 'create-chore-image-photo', + title: 'Choose a photo', + body: 'Tap + to pick a picture from your device. A clear photo helps younger kids recognize each chore.', placement: 'above', }, - 'create-chore-schedule': { - id: 'create-chore-schedule', - title: 'Set when it happens', - body: 'Tap the days this chore should appear. Set a deadline if it needs to be done by a certain time, or leave it as Anytime.', - placement: 'below', + 'create-chore-image-camera': { + id: 'create-chore-image-camera', + title: 'Take a photo', + body: 'Tap the camera to snap a new picture. A clear photo helps younger kids recognize each chore.', + placement: 'above', }, + // ── Schedule modal — Specific Days chain ───────────────────────────────── + 'schedule-days-chips': { + id: 'schedule-days-chips', + title: 'Pick the days', + body: 'Tap one or more days to schedule this chore or routine. You can choose a single day or several — whatever fits your week.', + placement: 'below', + next: 'schedule-days-deadline', + ctaLabel: 'Next', + anchorSelector: '.day-chips', + }, + 'schedule-days-deadline': { + id: 'schedule-days-deadline', + title: 'Set a deadline', + body: 'This is the time your child needs to finish by. Tap "Clear" to remove the deadline — then it can be done anytime that day.', + placement: 'auto', + next: 'schedule-days-exception', + ctaLabel: 'Next', + anchorSelector: '.default-deadline-row', + }, + 'schedule-days-exception': { + id: 'schedule-days-exception', + title: 'Different time for one day?', + body: 'If one day needs a different deadline, tap "Set different time" for that day. Useful for early-dismissal days or busy afternoons.', + placement: 'auto', + next: 'schedule-enable-toggle', + ctaLabel: 'Next', + anchorSelector: '.exception-row', + }, + + // ── Schedule modal — Every X Days chain ────────────────────────────────── + 'schedule-interval-frequency': { + id: 'schedule-interval-frequency', + title: 'How often?', + body: 'Set how many days pass between each time this chore or routine appears. Every 1 day means daily; every 7 days means weekly.', + placement: 'below', + next: 'schedule-interval-start', + ctaLabel: 'Next', + anchorSelector: '.stepper', + }, + 'schedule-interval-start': { + id: 'schedule-interval-start', + title: 'Start date', + body: 'Pick the first day this chore or routine is expected. The schedule counts forward from here.', + placement: 'below', + next: 'schedule-interval-deadline', + ctaLabel: 'Next', + anchorSelector: '[data-tutorial="schedule-interval-start"]', + }, + 'schedule-interval-deadline': { + id: 'schedule-interval-deadline', + title: 'Set a deadline', + body: 'This is the time your child needs to finish by. Tap "Clear" to remove the deadline — then it can be done anytime that day.', + placement: 'auto', + next: 'schedule-enable-toggle', + ctaLabel: 'Next', + anchorSelector: '.interval-time-row', + }, + + // ── Schedule modal — shared final step ─────────────────────────────────── + 'schedule-enable-toggle': { + id: 'schedule-enable-toggle', + title: 'Enable or pause', + body: 'Toggle this switch to turn the schedule on or off. When paused, the chore or routine is expected every day with no schedule restrictions.', + placement: 'auto', + anchorSelector: '.schedule-toggle-row', + }, + + // ── List-view help (triggered via ? button) ────────────────────────────── + 'list-chore-help': { + id: 'list-chore-help', + title: 'Create your chore', + body: 'Tap the + button to add a new chore. Give it a name, choose points, and pick a picture so your child can spot it easily.', + placement: 'above', + next: 'list-edit-hint', + ctaLabel: 'Next', + anchorSelector: '.fab', + }, + 'list-kindness-help': { + id: 'list-kindness-help', + title: 'Create your kindness act', + body: 'Tap the + button to add a new kindness act. Give it a name, choose points, and pick a picture so your child can spot it easily.', + placement: 'above', + next: 'list-edit-hint', + ctaLabel: 'Next', + anchorSelector: '.fab', + }, + 'list-penalty-help': { + id: 'list-penalty-help', + title: 'Create your penalty', + body: 'Tap the + button to add a new penalty. Give it a name, choose points, and pick a picture so your child can spot it easily.', + placement: 'above', + next: 'list-edit-hint', + ctaLabel: 'Next', + anchorSelector: '.fab', + }, + 'list-reward-help': { + id: 'list-reward-help', + title: 'Create your reward', + body: 'Tap the + button to add a new reward. Give it a name, choose a cost, and pick a picture so your child can spot it easily.', + placement: 'above', + next: 'list-edit-hint', + ctaLabel: 'Next', + anchorSelector: '.fab', + }, + 'list-routine-help': { + id: 'list-routine-help', + title: 'Create your routine', + body: 'Tap the + button to add a new routine. Give it a name, choose points, and pick a picture so your child can spot it easily.', + placement: 'above', + next: 'list-edit-hint', + ctaLabel: 'Next', + anchorSelector: '.fab', + }, + 'list-edit-hint': { + id: 'list-edit-hint', + title: 'Edit items', + body: 'Tap any item in the list to open it and make changes — rename it, adjust points, or swap the picture.', + placement: 'below', + next: 'list-delete-hint', + ctaLabel: 'Next', + anchorSelector: '.list-item, .routine-item', + }, + 'create-kindness': { id: 'create-kindness', title: 'Kindness tasks', body: 'Kindness tasks reward thoughtful behavior — sharing, helping a sibling, saying please. Give it a name and points.', placement: 'auto', }, + 'edit-kindness-name': { + id: 'edit-kindness-name', + title: 'Kindness Act Name', + body: 'Give it a clear name your child will understand — like "Share your toys" or "Help a friend."', + placement: 'below', + next: 'edit-kindness-points', + ctaLabel: 'Next', + anchorSelector: 'input#name', + }, + 'edit-kindness-points': { + id: 'edit-kindness-points', + title: 'Points', + body: 'How many points is this kindness worth? These work just like chore points — your child saves them up for rewards.', + placement: 'below', + next: 'edit-kindness-image', + ctaLabel: 'Next', + anchorSelector: 'input#points', + }, + 'edit-kindness-image': { + id: 'edit-kindness-image', + title: 'Pick a Picture', + body: 'Choose a fun image so your child can spot this kindness act easily. Tap + or the camera to add one.', + placement: 'above', + anchorSelector: '.picker', + }, + + // ── Penalty form chain ─────────────────────────────────────────────────── + 'edit-penalty-name': { + id: 'edit-penalty-name', + title: 'Penalty Name', + body: 'Give the penalty a clear name your child will understand — like "No screen time" or "Early bedtime."', + placement: 'below', + next: 'edit-penalty-points', + ctaLabel: 'Next', + anchorSelector: 'input#name', + }, + 'edit-penalty-points': { + id: 'edit-penalty-points', + title: 'Points', + body: 'How many points does this penalty cost? When the rule is broken, these points are taken away.', + placement: 'below', + next: 'edit-penalty-image', + ctaLabel: 'Next', + anchorSelector: 'input#points', + }, + 'edit-penalty-image': { + id: 'edit-penalty-image', + title: 'Pick a Picture', + body: 'Choose an image so your child can spot this penalty easily. Tap + or the camera to add one.', + placement: 'above', + anchorSelector: '.picker', + }, + + // ── Reward form chain ──────────────────────────────────────────────────── + 'edit-reward-name': { + id: 'edit-reward-name', + title: 'Reward Name', + body: 'Give the reward a name your child will get excited about — like "Movie night" or "Ice cream treat."', + placement: 'below', + next: 'edit-reward-description', + ctaLabel: 'Next', + anchorSelector: 'input#name', + }, + 'edit-reward-description': { + id: 'edit-reward-description', + title: 'Description', + body: 'Add a quick description so you remember the details — like "Pick the movie together" or "Any flavor they want."', + placement: 'below', + next: 'edit-reward-cost', + ctaLabel: 'Next', + anchorSelector: 'input#description', + }, + 'edit-reward-cost': { + id: 'edit-reward-cost', + title: 'Cost', + body: 'How many points does this reward cost? Make it feel achievable — small rewards can cost less, big ones more.', + placement: 'below', + next: 'edit-reward-image', + ctaLabel: 'Next', + anchorSelector: 'input#cost', + }, + 'edit-reward-image': { + id: 'edit-reward-image', + title: 'Pick a Picture', + body: 'Choose a fun image so your child can spot this reward easily. Tap + or the camera to add one.', + placement: 'above', + anchorSelector: '.picker', + }, + + // ── Child form chain ───────────────────────────────────────────────────── + 'edit-child-name': { + id: 'edit-child-name', + title: "Child's Name", + body: "Enter your child's name or nickname — whatever they like to be called.", + placement: 'below', + next: 'edit-child-age', + ctaLabel: 'Next', + anchorSelector: 'input#name', + }, + 'edit-child-age': { + id: 'edit-child-age', + title: 'Age', + body: 'How old is your child? This helps tailor the experience to their level.', + placement: 'below', + next: 'edit-child-image', + ctaLabel: 'Next', + anchorSelector: 'input#age', + }, + 'edit-child-image': { + id: 'edit-child-image', + title: 'Pick a Picture', + body: 'Choose a photo or avatar so your child can recognize their profile. Tap + or the camera to add one.', + placement: 'above', + anchorSelector: '.picker', + }, + + // ── Routine form chain ─────────────────────────────────────────────────── + 'edit-routine-name': { + id: 'edit-routine-name', + title: 'Routine Name', + body: 'Give the routine a name your child will understand — like "Morning routine" or "Bedtime checklist."', + placement: 'below', + next: 'edit-routine-points', + ctaLabel: 'Next', + anchorSelector: 'input#name', + }, + 'edit-routine-points': { + id: 'edit-routine-points', + title: 'Points', + body: 'How many points is the whole routine worth? Your child earns these when they finish every step.', + placement: 'below', + next: 'edit-routine-image', + ctaLabel: 'Next', + anchorSelector: 'input#points', + }, + 'edit-routine-image': { + id: 'edit-routine-image', + title: 'Pick a Picture', + body: 'Choose an image so your child can spot this routine easily. Tap + or the camera to add one.', + placement: 'above', + next: 'create-routine-add-task', + ctaLabel: 'Next', + anchorSelector: '.picker', + }, + 'create-penalty': { id: 'create-penalty', title: 'Penalties', @@ -75,7 +396,7 @@ export const stepRegistry: Record = { 'create-routine': { id: 'create-routine', title: 'Routines', - body: "Routines bundle a sequence of small tasks — like a bedtime routine. Add each task below, and your child checks them off one by one.", + body: 'Routines bundle a sequence of small tasks — like a bedtime routine. Add each task below, and your child checks them off one by one.', placement: 'auto', }, 'create-routine-add-task': { @@ -83,11 +404,39 @@ export const stepRegistry: Record = { title: 'Add tasks to the routine', body: 'Tap to add each step. Order them the way you want your child to do them — they can be reordered later by dragging.', placement: 'above', + next: 'routine-task-reorder', + ctaLabel: 'Next', + anchorSelector: '.add-task-trigger', + }, + 'routine-task-reorder': { + id: 'routine-task-reorder', + title: 'Reorder tasks', + body: 'Drag the handle up or down to change the order your child sees the tasks in.', + placement: 'auto', + next: 'routine-task-edit', + ctaLabel: 'Next', + anchorSelector: '[data-tutorial="routine-task-reorder"]', + }, + 'routine-task-edit': { + id: 'routine-task-edit', + title: 'Edit a task', + body: 'Tap Edit to change a task name or picture. Useful for fixing typos or updating the look.', + placement: 'auto', + next: 'routine-task-delete', + ctaLabel: 'Next', + anchorSelector: '[data-tutorial="routine-task-edit"]', + }, + 'routine-task-delete': { + id: 'routine-task-delete', + title: 'Delete a task', + body: 'Tap Delete to remove a task from the routine. This does not delete the routine itself — just this step.', + placement: 'auto', + anchorSelector: '[data-tutorial="routine-task-delete"]', }, 'create-reward': { id: 'create-reward', title: 'Create your first reward', - body: "Rewards are what your child can spend points on — screen time, treats, a special outing. Tap + to add one.", + body: 'Rewards are what your child can spend points on — screen time, treats, a special outing. Tap + to add one.', placement: 'above', }, @@ -95,7 +444,7 @@ export const stepRegistry: Record = { 'notification-click': { id: 'notification-click', title: 'Tap to review', - body: "We ping you when a chore is finished or a reward is requested. Tap a notification to jump straight to it and approve or reject.", + body: 'We ping you when a chore is finished or a reward is requested. Tap a notification to jump straight to it and approve or reject.', placement: 'below', }, @@ -111,11 +460,20 @@ export const stepRegistry: Record = { 'assign-chore': { id: 'assign-chore', title: 'Assign chores', - body: "Tap to pick which chores this child does. Assigned chores show up in their view. You can give the same chore to multiple kids.", + body: 'Tap to pick which chores this child does. Assigned chores show up in their view. You can give the same chore to multiple kids.', + placement: 'above', + next: 'assign-kindness', + ctaLabel: 'Next', + anchorSelector: '.assign-buttons button:nth-child(1)', + }, + 'assign-kindness': { + id: 'assign-kindness', + title: 'Assign kindness acts', + body: 'Kindness acts reward thoughtful behavior — sharing, helping, saying please. Tap to pick which ones this child can do.', placement: 'above', next: 'assign-reward', ctaLabel: 'Next', - anchorSelector: '.assign-buttons button:nth-child(1)', + anchorSelector: '.assign-buttons button:nth-child(4)', }, 'assign-reward': { id: 'assign-reward', @@ -129,41 +487,213 @@ export const stepRegistry: Record = { 'assign-routine': { id: 'assign-routine', title: 'Assign routines', - body: "Routines you assign show up on this child’s page as a checklist they can work through, step by step.", + body: 'Routines you assign show up on this child’s page as a checklist they can work through, step by step.', placement: 'above', + next: 'assign-penalty', + ctaLabel: 'Next', anchorSelector: '.assign-buttons button:nth-child(2)', }, + 'assign-penalty': { + id: 'assign-penalty', + title: 'Assign penalties', + body: 'Penalties subtract points when rules are broken. Use them sparingly — they work best alongside lots of positive tasks.', + placement: 'above', + next: 'item-kebab-overview', + ctaLabel: 'Next', + anchorSelector: '.assign-buttons button:nth-child(5)', + }, + + // ── Generic kebab overview (entity-type agnostic) ──────────────────────── + 'item-kebab-overview': { + id: 'item-kebab-overview', + title: 'Quick actions', + body: 'Each item has a menu with quick actions. Tap the three dots on any item to edit points, change schedules, extend deadlines, or reset.', + placement: 'auto', + }, + + // ── Assignment list hints ──────────────────────────────────────────────── + 'assign-chore-list': { + id: 'assign-chore-list', + title: 'Pick chores', + body: 'Tap any chore to check or uncheck it. Checked chores are assigned to this child and show up in their view.', + placement: 'below', + next: 'assign-submit', + ctaLabel: 'Next', + anchorSelector: '.list-item, .routine-item', + }, + 'assign-kindness-list': { + id: 'assign-kindness-list', + title: 'Pick kindness acts', + body: 'Tap any kindness act to check or uncheck it. Checked acts are assigned to this child and show up in their view.', + placement: 'below', + next: 'assign-submit', + ctaLabel: 'Next', + anchorSelector: '.list-item, .routine-item', + }, + 'assign-penalty-list': { + id: 'assign-penalty-list', + title: 'Pick penalties', + body: 'Tap any penalty to check or uncheck it. Checked penalties are assigned to this child and show up in their view.', + placement: 'below', + next: 'assign-submit', + ctaLabel: 'Next', + anchorSelector: '.list-item, .routine-item', + }, + 'assign-reward-list': { + id: 'assign-reward-list', + title: 'Pick rewards', + body: 'Tap any reward to check or uncheck it. Checked rewards are assigned to this child and show up in their view.', + placement: 'below', + next: 'assign-submit', + ctaLabel: 'Next', + anchorSelector: '.list-item, .routine-item', + }, + 'assign-routine-list': { + id: 'assign-routine-list', + title: 'Pick routines', + body: 'Tap any routine to check or uncheck it. Checked routines are assigned to this child and show up in their view.', + placement: 'below', + next: 'assign-submit', + ctaLabel: 'Next', + anchorSelector: '.list-item, .routine-item', + }, + 'assign-submit': { + id: 'assign-submit', + title: 'Save your picks', + body: 'When you are happy with the selection, tap Submit to save. Tap Cancel to leave without changing anything.', + placement: 'above', + anchorSelector: '.actions .btn-primary', + }, + + // ── List management hints ──────────────────────────────────────────────── + 'list-delete-hint': { + id: 'list-delete-hint', + title: 'Delete items', + body: 'Tap the red X on any item you created to delete it. Deleting also removes it from any child it was assigned to.', + placement: 'auto', + anchorSelector: '.delete-btn', + }, // ── Kebab menus ────────────────────────────────────────────────────────── 'child-kebab': { id: 'child-kebab', - title: "Quick actions", - body: "Edit the child's name or photo, clear their points, or remove them entirely. These actions only affect this one kid.", + title: 'Quick actions', + body: 'Tap the three dots on any child card to open the menu. From here you can edit the child\'s name or photo, clear their points back to zero, or remove them entirely.', placement: 'below', + anchorSelector: '.kebab-btn', }, - 'chore-kebab': { - id: 'chore-kebab', + 'chore-kebab-overview': { + id: 'chore-kebab-overview', title: 'Chore actions', - body: 'Edit points, change when the chore appears, or open the schedule. New options can appear here depending on the chore’s status.', + body: 'Tap the three dots on any chore for quick actions. You can edit points, change the schedule, extend the deadline when a chore is late, or reset a completed chore.', placement: 'auto', }, + 'chore-kebab-menu': { + id: 'chore-kebab-menu', + title: 'Chore actions', + body: 'Edit the points or change the schedule for this chore. Tap Next to see each option.', + placement: 'auto', + next: 'chore-edit-points', + ctaLabel: 'Next', + anchorSelector: '.kebab-menu', + }, + 'chore-edit-points': { + id: 'chore-edit-points', + title: 'Edit points', + body: 'Change how many points this chore is worth. Higher points for harder chores.', + placement: 'auto', + next: 'chore-schedule', + ctaLabel: 'Next', + anchorSelector: '[data-tutorial="chore-edit-points"]', + }, + 'chore-schedule': { + id: 'chore-schedule', + title: 'Change schedule', + body: 'Open the schedule to change which days this chore appears or adjust the deadline.', + placement: 'auto', + anchorSelector: '[data-tutorial="chore-schedule"]', + }, + 'kebab-edit-points-cost': { + id: 'kebab-edit-points-cost', + title: 'Change points or cost', + body: 'You can change how many points a chore, routine, reward, or other item is worth — or what a reward costs — at any time from this menu.', + placement: 'auto', + anchorSelector: '[data-tutorial="kebab-edit-points-cost"]', + }, + 'point-editor-help': { + id: 'point-editor-help', + title: 'Edit points or cost', + body: 'Enter a new value to change how many points this chore, routine, or reward is worth — or what this reward costs — just for this child.', + placement: 'auto', + anchorSelector: 'input#custom-value', + }, 'chore-kebab-extend-time': { id: 'chore-kebab-extend-time', title: 'Extend the deadline', - body: "When a chore runs late, this option lets you give your child more time for the rest of today only — no need to reschedule.", + body: 'When a chore runs late, this option lets you give your child more time for the rest of today only — no need to reschedule.', placement: 'auto', + anchorSelector: '[data-tutorial="chore-extend-time"]', }, 'chore-kebab-reset': { id: 'chore-kebab-reset', title: 'Reset a completed chore', - body: "Already-completed today? Reset lets your child do it again today (points are kept). Useful for chores you want done twice.", + body: 'Already-completed today? Reset lets your child do it again today (points are kept). Useful for chores you want done twice.', placement: 'auto', + anchorSelector: '[data-tutorial="chore-reset"]', + }, + 'routine-kebab-menu': { + id: 'routine-kebab-menu', + title: 'Routine actions', + body: 'Edit the routine, adjust points, or change the schedule. Tap Next to see each option.', + placement: 'auto', + next: 'routine-edit', + ctaLabel: 'Next', + anchorSelector: '.kebab-menu', + }, + 'routine-edit': { + id: 'routine-edit', + title: 'Edit routine', + body: 'Open the routine to add, remove, or reorder the tasks inside it.', + placement: 'auto', + next: 'routine-edit-points', + ctaLabel: 'Next', + anchorSelector: '[data-tutorial="routine-edit"]', + }, + 'routine-edit-points': { + id: 'routine-edit-points', + title: 'Edit points', + body: 'Change how many points the whole routine is worth. Your child earns these when they finish every step.', + placement: 'auto', + next: 'routine-schedule', + ctaLabel: 'Next', + anchorSelector: '[data-tutorial="routine-edit-points"]', + }, + 'routine-schedule': { + id: 'routine-schedule', + title: 'Change schedule', + body: 'Open the schedule to adjust when this routine appears.', + placement: 'auto', + anchorSelector: '[data-tutorial="routine-schedule"]', + }, + 'routine-extend-time': { + id: 'routine-extend-time', + title: 'Extend the deadline', + body: 'When a routine runs late, give your child more time for the rest of today — no need to reschedule.', + placement: 'auto', + anchorSelector: '[data-tutorial="routine-extend-time"]', + }, + 'routine-reset': { + id: 'routine-reset', + title: 'Reset', + body: 'Already done today? Reset lets your child do the routine again today.', + placement: 'auto', + anchorSelector: '[data-tutorial="routine-reset"]', }, // ── Child-mode tour (parent learns to teach) ───────────────────────────── 'child-mode-overview': { id: 'child-mode-overview', - title: "What your child sees", + title: 'What your child sees', body: "This is your child's home screen. They tap their own card to see their chores, routines, and rewards — just like you've been setting up.", placement: 'auto', anchorSelector: '.grid', @@ -173,13 +703,13 @@ export const stepRegistry: Record = { 'status-too-late': { id: 'status-too-late', title: 'Too late', - body: "This chore passed its deadline today. You can extend it from the kebab menu, or let it expire and try again tomorrow.", + body: 'This chore passed its deadline today. You can extend it from the kebab menu, or let it expire and try again tomorrow.', placement: 'auto', }, 'status-pending': { id: 'status-pending', title: 'Waiting for your review', - body: "Pending means your child marked this done and is waiting for you to give it a thumbs-up. Tap to approve or reject.", + body: 'Pending means your child marked this done and is waiting for you to give it a thumbs-up. Tap to approve or reject.', placement: 'auto', }, } diff --git a/plan-tutorial.md b/plan-tutorial.md new file mode 100644 index 0000000..4936e3d --- /dev/null +++ b/plan-tutorial.md @@ -0,0 +1,196 @@ +# Tutorial / Onboarding Mode + +## Context + +New parents signing up for the chore app land on an empty screen with no guidance. Many will not be especially technical — a busy parent setting things up on a phone needs to be shown where to tap, what each control does, and what states like `TOO LATE` / `PENDING` mean, without feeling badgered. Today there is no onboarding, no first-time tips, no contextual help. + +The goal is a modular tutorial layer that: +- Walks users through the essentials (PIN → child → chore) so the app is never empty after first use. +- Surfaces contextual hints **just-in-time** when users reach a feature for the first time (image picker, kebab menus, scheduler, status badges, notifications, assignment, etc.). +- Persists progress per-user on the backend so it syncs across devices and is dismissed only once. +- Can be reset or disabled from the profile page. +- Is friction-light: visible Skip, one card at a time outside the intro, a permanent `?` button so users can re-trigger help themselves. +- Is extensible — adding a tutorial for a future feature is roughly a one-line call + a registry entry. + +## Approach (locked decisions) + +- **Cadence**: brief forced 3-step intro after first sign-in (PIN setup → first child → first chore), then everything else is just-in-time. +- **Mobile**: bottom-sheet card on screens ≤600px, floating tooltip on desktop. Spotlight cut-out is shared. +- **Skip behaviour**: a single Skip suppresses all hints for the session; user re-engages via the per-screen `?` button or by resetting from the profile. +- **State storage**: `tutorial_progress: dict[str, bool]` and `tutorial_enabled: bool` on the `User` model, broadcast via existing `PROFILE_UPDATED` SSE event. +- **Step authoring**: imperative `tutorial.maybeShow('step-id', anchorRef)` from `onMounted` / `watch` in each host component, with step copy in a single registry file. + +## Architecture + +### Backend +- **`backend/models/user.py`** — add `tutorial_enabled: bool = True` and `tutorial_progress: dict = field(default_factory=dict)` alongside `email_digest_enabled`. Update `from_dict` / `to_dict`. +- **`backend/api/user_api.py`** — add `PATCH /user/tutorial-progress` that accepts: + - `{ "step_id": "...", "seen": true }` — mark one step + - `{ "reset": true }` — clear the dict + - `{ "enabled": false }` — toggle + Each branch emits `EventType.PROFILE_UPDATED` (already wired) so other tabs / devices stay in sync. + +### Frontend — new directory `frontend/src/tutorial/` + +- **`controller.ts`** — module-level `ref()`s (matches the no-Pinia pattern from `stores/auth.ts`): + ```ts + export const tutorialEnabled = ref(true) + export const tutorialProgress = ref>({}) + export const activeStep = ref(null) + + export function shouldShowStep(id: string): boolean + export function maybeShow(id: string, anchor: HTMLElement | (() => HTMLElement | null)): void + export async function markStepSeen(id: string): Promise // PATCH + optimistic + export async function resetAllProgress(): Promise + export async function setTutorialEnabled(on: boolean): Promise + ``` + Hydrated from `/user/profile` (extend the existing fetch in `LoginButton.vue`); re-hydrated on `profile_updated` SSE. + +- **`steps.ts`** — single registry of step copy/config: + ```ts + export interface StepDef { + id: string + title: string + body: string + next?: string // chains a tour + placement?: 'auto' | 'below' | 'above' + ctaLabel?: string // defaults "Got it" + } + export const stepRegistry: Record = { … } + ``` + Step IDs follow flat kebab-case: `setup-parent-pin`, `create-child`, `create-chore`, `create-chore-image-photo`, `create-chore-image-camera`, `create-chore-schedule`, `chore-kebab`, `chore-kebab-extend-time`, `status-too-late`, `status-pending`, `notification-click`, `assign-chore`, `child-mode-tour-offer`, etc. + +- **`TutorialOverlay.vue`** — mounted once in `App.vue`. Watches `activeStep`. Renders: + - Four-rectangle dim (top/left/right/bottom of the anchor's bbox) with `rgba(0,0,0,0.55)`. + - A coach-mark card with `title`, `body`, **Skip tour** + primary action button. + - Desktop: tooltip positioned by `getBoundingClientRect()` + viewport clamping (no `floating-ui` — same hand-rolled pattern as the existing `TimePickerPopover.vue`). + - Mobile (`window.matchMedia('(max-width: 600px)')`): card docks as a bottom sheet with a chevron pointing toward the spotlight. + - Re-positions on `resize`, capture-phase `scroll`, and `ResizeObserver` on the card. + - `role="dialog"`, focus trap, Esc to dismiss, `aria-live="polite"` for announcements, `prefers-reduced-motion` kills animations. + +- **`HelpButton.vue`** — a small `?` icon placed in the `ParentLayout` topbar (and `ChildLayout`). On tap, re-fires the most relevant step for the current route from a `routeToStep` map. This is the user's escape hatch — critical for the non-technical audience. + +### Triggering — three sources, all routed through `maybeShow` + +1. **Route entered** — `router.afterEach` in `controller.ts` consults a small `routeTriggers: Record` map (used for `tab-tasks`, `tab-rewards`, `tab-notifications`, …). +2. **Element first rendered** — host component calls `maybeShow` in `onMounted` or `watchEffect` once its anchor `ref` is bound. +3. **State-derived** — host component `watch`es a reactive condition (`isChoreLate`, `menuOpen`, `firstPendingChore`) and calls `maybeShow` when it flips true. This is how dynamic kebab options (`Extend Time` only on late chores) and badge-first-appearance (`TOO LATE`, `PENDING`) get triggered. + +No global DOM scanning, no MutationObserver — every anchor is already owned by a Vue component that knows when it appears. + +## Step coverage (the JIT hints) + +Phase 2 wires these via `maybeShow` calls in the listed components. All copy is warm/parent-friendly, never jargon. + +| Step ID | Trigger | Anchor | +|---|---|---| +| `setup-parent-pin` (intro #1) | First load after signup, no PIN set | `LoginButton.vue` avatar | +| `create-child` (intro #2) | After PIN set, 0 children | FAB in `ChildrenListView.vue` | +| `create-chore` (intro #3) | After 1+ child, 0 chores, on Tasks tab | FAB in tasks view | +| `create-chore-image-photo` | First time `ImagePicker` opens | `+` button (`addPhotoBtn` ref) in `ImagePicker.vue` | +| `create-chore-image-camera` | First time `ImagePicker` opens | Camera button (`cameraBtn` ref) in `ImagePicker.vue` | +| `create-chore-schedule` | First time `ScheduleModal` opens | day chips in `ScheduleModal.vue` | +| `create-kindness`, `create-penalty`, `create-routine` | First time landing on each create view | FAB / form | +| `create-routine-add-task` | First time inside `RoutineEditView` | `.add-task-trigger` | +| `create-reward` | First time on Rewards tab with 0 rewards | FAB | +| `notification-click` | First time on Notifications tab with 1+ notification | first notification row in `NotificationView.vue` | +| `select-child` then `assign-chore` / `assign-reward` / `assign-routine` | First time entering ParentView for a specific child | the assignment sections | +| `child-kebab` | First time `.kebab-btn` opens in `ChildrenListView.vue` | the open menu | +| `chore-kebab` | First time `.kebab-menu` opens in `ParentView.vue` | the open menu | +| `chore-kebab-extend-time` | First time the `Extend Time` menu item renders (chore is late) | that menu item | +| `chore-kebab-reset` | First time the `Reset` menu item renders | that menu item | +| `status-too-late` | First time `.chore-stamp` (TOO LATE) renders for any chore | the badge | +| `status-pending` | First time `.chore-stamp.pending-stamp` renders | the badge | + +Adding a future step = one entry in `steps.ts` + one `maybeShow` call at the anchor site. + +## Profile controls (`UserProfile.vue`) + +Add a new "Help" section after the existing email-digest / push-notifications toggles: +- **Show tutorial tips** toggle — bound to `tutorialEnabled`, copy: *"Show helpful tips as I use the app."* +- **Restart tutorial** button — opens a `ModalDialog` confirm (*"Start the tour again from the beginning?"*), then calls `resetAllProgress()` and routes to `/parent` (a toast confirms reset). + +Dev bypass: support `?tutorial=off` / `?tutorial=reset` in `controller.ts` init (gated by `import.meta.env.DEV`) for debugging without touching the backend. + +## Child-mode tour (parent learns to teach) + +A derived `watchEffect` in `controller.ts`: + +```ts +watchEffect(() => { + const p = tutorialProgress.value + if (p['create-child'] && p['create-chore'] && p['create-reward'] + && !p['child-mode-tour-offer']) { + showOfferModal() // ModalDialog with Yes / Maybe later / No thanks + } +}) +``` + +- **Yes** → mark `child-mode-tour-offer` seen, navigate to `/child`, fire `child-mode-*` steps (separate IDs, same registry/controller). +- **Maybe later** → don't mark seen; reappears once next session, then auto-converts to "No thanks" (max two asks). +- **No thanks** → mark seen, never asked again (reset clears it). + +## UX rules baked in (for non-technical users) + +- 3-step forced intro, never longer. Single-card JIT hints elsewhere — no chained `Next → Next → Next` outside the intro. +- Skip is always visible, labeled "Skip tour", and one Skip suppresses everything for the session. +- Persistent `?` button on every screen — taps re-fire the most relevant step. This is the single most important affordance for users who don't remember the first run. +- Copy is short and warm: *"Let's add your first kiddo"*, not *"Create a child entity."* +- If an anchor element doesn't exist (e.g. 0 chores so no kebab to point at), the step silently waits — never an arrow into empty space. +- Bottom-sheet on mobile keeps text at thumb height and survives the on-screen keyboard via the `visualViewport` API. +- `prefers-reduced-motion`, focus trap, Esc-to-dismiss, ≥5:1 contrast on the highlight ring. + +## Phasing + +**Phase 1 — Infrastructure + one end-to-end step.** +- Backend `tutorial_enabled` / `tutorial_progress` fields, PATCH endpoint, SSE wiring. +- Frontend `controller.ts`, `steps.ts` (one entry), `TutorialOverlay.vue` mounted in `App.vue`, hydrate from profile fetch, listen for `profile_updated`. +- Ship `create-child` end-to-end (triggered from `ChildrenListView.vue` when child list is empty). +- Manual verification: sign up a fresh user, see the coach mark, dismiss, confirm it doesn't return; reload to confirm persistence; open in second tab to confirm SSE sync. + +**Phase 2 — Roll out remaining steps.** +- Add the 3-step forced intro chaining (`setup-parent-pin` → `create-child` → `create-chore`). +- Add the JIT step entries from the coverage table; wire `maybeShow` calls at each anchor. +- Add `HelpButton.vue` in both layouts with a `routeToStep` map. + +**Phase 3 — Profile controls + child-mode tour.** +- "Help" section in `UserProfile.vue` (toggle + restart button). +- `child-mode-tour-offer` watcher + child-mode step set. +- Dev bypass URL params. + +## Critical files + +**Backend** +- `backend/models/user.py` — model fields +- `backend/api/user_api.py` — PATCH endpoint +- (no event type changes — `PROFILE_UPDATED` is reused) + +**Frontend (new)** +- `frontend/src/tutorial/controller.ts` +- `frontend/src/tutorial/steps.ts` +- `frontend/src/tutorial/TutorialOverlay.vue` +- `frontend/src/tutorial/HelpButton.vue` + +**Frontend (modified — `maybeShow` call sites, mostly one-liners)** +- `frontend/src/App.vue` — mount `TutorialOverlay` +- `frontend/src/common/models.ts` — `User` interface additions +- `frontend/src/components/shared/LoginButton.vue` — hydrate controller from profile fetch +- `frontend/src/layout/ParentLayout.vue`, `frontend/src/layout/ChildLayout.vue` — `HelpButton` +- `frontend/src/components/shared/ChildrenListView.vue` — `create-child`, `child-kebab` +- `frontend/src/components/child/ParentView.vue` — `chore-kebab`, `chore-kebab-extend-time`, `status-too-late`, `status-pending`, `assign-*`, `select-child` +- `frontend/src/components/task/ChoreEditView.vue` + sibling create views — `create-chore`, `create-kindness`, `create-penalty` +- `frontend/src/components/utils/ImagePicker.vue` — `create-chore-image-photo`, `create-chore-image-camera` +- `frontend/src/components/routine/RoutineEditView.vue` — `create-routine`, `create-routine-add-task` +- `frontend/src/components/reward/RewardEditView.vue` — `create-reward` +- `frontend/src/components/notification/NotificationView.vue` — `notification-click` +- `frontend/src/components/shared/ScheduleModal.vue` — `create-chore-schedule` +- `frontend/src/components/profile/UserProfile.vue` — "Help" section + +## Verification + +- **Backend**: `pytest tests/test_user_api.py` covering the new PATCH branches (mark / reset / disable), plus a check that `PROFILE_UPDATED` is emitted. +- **Frontend unit**: `npm run test:unit` for `controller.ts` (`shouldShowStep`, `markStepSeen` optimism, reset/disable). +- **E2E** (`npx playwright test`): a new bucket `chromium-tutorial` with an isolated user that signs up fresh, walks the 3-step intro, navigates to Rewards/Notifications to hit JIT hints, then resets from the profile and confirms the intro replays. +- **Manual mobile check**: Chrome devtools at 375×667, confirm the bottom-sheet variant renders, survives the on-screen keyboard, and re-positions on rotation. +- **Manual cross-device SSE**: log in to two tabs, dismiss a step in one, confirm the second tab updates without manual refresh. +- **Accessibility**: keyboard-only run-through (Tab/Esc/Enter); VoiceOver pass on macOS to confirm `aria-live` announcements; `prefers-reduced-motion` set in devtools to confirm pulse animation is suppressed. From 06d17e3d34c7c2ffa0980f77f6fb52a4defb8a33 Mon Sep 17 00:00:00 2001 From: Ryan Kegel Date: Fri, 19 Jun 2026 18:37:35 -0400 Subject: [PATCH 03/31] fixed some frontend tests --- frontend/src/__tests__/App.spec.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/frontend/src/__tests__/App.spec.ts b/frontend/src/__tests__/App.spec.ts index 4a4b513..d13a36d 100644 --- a/frontend/src/__tests__/App.spec.ts +++ b/frontend/src/__tests__/App.spec.ts @@ -1,11 +1,18 @@ import { describe, it, expect } from 'vitest' import { mount } from '@vue/test-utils' +import { createMemoryHistory, createRouter } from 'vue-router' import App from '../App.vue' +const mockRouter = createRouter({ + history: createMemoryHistory(), + routes: [{ path: '/', name: 'Home', component: { template: '
' } }], +}) + describe('App', () => { it('mounts renders properly', () => { const wrapper = mount(App, { global: { + plugins: [mockRouter], stubs: { 'router-view': { template: '
You did it!
', From 7f0326eff1d0a98531e4e97bcbec3fe4f1c00b9a Mon Sep 17 00:00:00 2001 From: Ryan Kegel Date: Sun, 12 Jul 2026 18:52:59 -0400 Subject: [PATCH 04/31] feat: add child actions menu and achievements feature design - Introduced a new feature specification for displaying a menu with actions (Award Certificate, Award Badge) when a child's card is clicked in ParentView. - Created a detailed plan for an achievements system, outlining phases for implementation, including achievement taxonomy, MVP set, and UX considerations. - Added a template for future feature specifications to standardize documentation. --- .opencode/agents/architect.md | 98 ++++++++++++++++++ .opencode/agents/developer.md | 28 +++++ .opencode/agents/reviewer.md | 29 ++++++ .opencode/agents/tester.md | 20 ++++ .opencode/agents/writer.md | 24 +++++ .opencode/commands/code-architect.md | 58 +++++++++++ .opencode/commands/code-explorer.md | 58 +++++++++++ .opencode/skills/feature-pipeline/SKILL.md | 23 ++++ frontend/e2e/.auth/user-cc.json | 12 +-- frontend/e2e/.auth/user-delete.json | 12 +-- frontend/e2e/.auth/user.json | 12 +-- frontend/test-results/.last-run.json | 65 +++++++++++- .../ROUTINES-IMPLEMENTATION-SUMMARY.md | 0 .../bug-both-system-and-user-items-shown.md | 0 .../specs => specs}/archive/bugs-1.0.5-001.md | 0 .../specs => specs}/archive/bugs-1.0.5-002.md | 0 .../archive/bugs-1.0.6-01/bugs-1.0.6-set01.md | 0 .../archive/bugs-1.0.6-01/image-1.png | Bin .../archive/bugs-1.0.6-01/image.png | Bin .../archive/bugs-1.0.6-02/bugs-1.0.6-set02.md | 0 .../archive/bugs-1.0.6-02/image.png | Bin .../archive/e2e-routines-test-plan.md | 0 .../archive/feat-account-delete-scheduler.md | 0 .../feat-calendar-chore-component01.png | Bin .../feat-calendar-chore.md | 0 .../feat-calendar-schedule-refactor-01.md | 0 .../feat-calendar-schedule-refactor-02.md | 0 .../archive/feat-child-confirm-chore.md | 0 .../IMPLEMENTATION_SUMMARY.md | 0 .../feat-dynamic-points-after.png | Bin .../feat-dynamic-points-before.png | Bin .../feat-dynamic-points-edit-modal.png | Bin .../feat-dynamic-points.md | 0 .../feat-dynamic-points/feat-tracking.md | 0 .../archive/feat-hashed-passwords.md | 0 .../archive/feat-landing-page.md | 0 .../archive/feat-login-security.md | 0 .../archive/feat-nav-selector-icons.md | 0 ...feat-no-delete-system-tasks-and-rewards.md | 0 .../archive/feat-notify-ending-chore.md | 0 .../feat-parent-chore-notifications.md | 0 .../archive/feat-parent-mode-expire.md | 0 .../feat-profile-mark-remove-account.md | 0 .../archive/feat-schedule-enable-disable.md | 0 .../archive/feat-state-expire.md | 0 .../archive/plan-routinesFeature.prompt.md | 0 .../feat-profile-icon-button-menu.md | 0 .../archive/profile-button-menu/mockup.png | Bin .../specs => specs}/feat-child-actions.md | 0 {.github/specs => specs}/plan-achievements.md | 0 .../specs => specs}/template/feat-template.md | 0 51 files changed, 419 insertions(+), 20 deletions(-) create mode 100644 .opencode/agents/architect.md create mode 100644 .opencode/agents/developer.md create mode 100644 .opencode/agents/reviewer.md create mode 100644 .opencode/agents/tester.md create mode 100644 .opencode/agents/writer.md create mode 100644 .opencode/commands/code-architect.md create mode 100644 .opencode/commands/code-explorer.md create mode 100644 .opencode/skills/feature-pipeline/SKILL.md rename {.github/specs => specs}/archive/ROUTINES-IMPLEMENTATION-SUMMARY.md (100%) rename {.github/specs => specs}/archive/bug-both-system-and-user-items-shown.md (100%) rename {.github/specs => specs}/archive/bugs-1.0.5-001.md (100%) rename {.github/specs => specs}/archive/bugs-1.0.5-002.md (100%) rename {.github/specs => specs}/archive/bugs-1.0.6-01/bugs-1.0.6-set01.md (100%) rename {.github/specs => specs}/archive/bugs-1.0.6-01/image-1.png (100%) rename {.github/specs => specs}/archive/bugs-1.0.6-01/image.png (100%) rename {.github/specs => specs}/archive/bugs-1.0.6-02/bugs-1.0.6-set02.md (100%) rename {.github/specs => specs}/archive/bugs-1.0.6-02/image.png (100%) rename {.github/specs => specs}/archive/e2e-routines-test-plan.md (100%) rename {.github/specs => specs}/archive/feat-account-delete-scheduler.md (100%) rename {.github/specs => specs}/archive/feat-calendar-chore/feat-calendar-chore-component01.png (100%) rename {.github/specs => specs}/archive/feat-calendar-chore/feat-calendar-chore.md (100%) rename {.github/specs => specs}/archive/feat-calendar-chore/feat-calendar-schedule-refactor-01.md (100%) rename {.github/specs => specs}/archive/feat-calendar-chore/feat-calendar-schedule-refactor-02.md (100%) rename {.github/specs => specs}/archive/feat-child-confirm-chore.md (100%) rename {.github/specs => specs}/archive/feat-dynamic-points/IMPLEMENTATION_SUMMARY.md (100%) rename {.github/specs => specs}/archive/feat-dynamic-points/feat-dynamic-points-after.png (100%) rename {.github/specs => specs}/archive/feat-dynamic-points/feat-dynamic-points-before.png (100%) rename {.github/specs => specs}/archive/feat-dynamic-points/feat-dynamic-points-edit-modal.png (100%) rename {.github/specs => specs}/archive/feat-dynamic-points/feat-dynamic-points.md (100%) rename {.github/specs => specs}/archive/feat-dynamic-points/feat-tracking.md (100%) rename {.github/specs => specs}/archive/feat-hashed-passwords.md (100%) rename {.github/specs => specs}/archive/feat-landing-page.md (100%) rename {.github/specs => specs}/archive/feat-login-security.md (100%) rename {.github/specs => specs}/archive/feat-nav-selector-icons.md (100%) rename {.github/specs => specs}/archive/feat-no-delete-system-tasks-and-rewards.md (100%) rename {.github/specs => specs}/archive/feat-notify-ending-chore.md (100%) rename {.github/specs => specs}/archive/feat-parent-chore-notifications.md (100%) rename {.github/specs => specs}/archive/feat-parent-mode-expire.md (100%) rename {.github/specs => specs}/archive/feat-profile-mark-remove-account.md (100%) rename {.github/specs => specs}/archive/feat-schedule-enable-disable.md (100%) rename {.github/specs => specs}/archive/feat-state-expire.md (100%) rename {.github/specs => specs}/archive/plan-routinesFeature.prompt.md (100%) rename {.github/specs => specs}/archive/profile-button-menu/feat-profile-icon-button-menu.md (100%) rename {.github/specs => specs}/archive/profile-button-menu/mockup.png (100%) rename {.github/specs => specs}/feat-child-actions.md (100%) rename {.github/specs => specs}/plan-achievements.md (100%) rename {.github/specs => specs}/template/feat-template.md (100%) diff --git a/.opencode/agents/architect.md b/.opencode/agents/architect.md new file mode 100644 index 0000000..5904454 --- /dev/null +++ b/.opencode/agents/architect.md @@ -0,0 +1,98 @@ +--- +name: architect +description: "Defines system requirements, data contracts, and architectural blueprints." +mode: subagent +model: "deepseek-v4-pro" +thinking: "enabled" +permission: + edit: allow + bash: deny +--- + +You are the Lead Systems Architect. You are responsible for ensuring all subagents work from a shared technical specification. Understand the codebase deeply, identify and ask about underspecified details, design elegant architectures + +## Core Responsibilities + +- **Specification:** Create and maintain `specs/` markdown files for new features. +- **Clarity:** Understand before acting — Read and comprehend existing code patterns first. +- **Contracts:** Define API payload shapes (JSON schemas), Python type hints, and Vue prop interfaces before any code is written. +- **Decision Log:** Maintain a `decisions.md` file to track _why_ certain architectural choices were made (e.g., why you chose a specific Vue state management pattern). + +## Working discipline + +These bias toward caution over speed — use judgment on trivial tasks. + +- **Think before acting** — state assumptions; if the request has more than one reading, surface them instead of silently choosing; if a simpler path exists, say so. +- **Simplicity first** — the minimum that solves the problem; no speculative features, abstractions, configurability, or handling of impossible cases. +- **Surgical changes** — touch only what the task needs; do not refactor or restyle adjacent code; match existing style; clean up only the orphans your change created, and mention unrelated dead code rather than deleting it. +- **Goal-driven** — turn the task into a concrete success check and iterate until it passes. + +## Phase 1: Discovery + +Goal: Understand what needs to be built. + +1. Create a todo list covering all seven phases. +2. If the feature is unclear, ask the user: + - What problem are they solving? + - What should the feature do? + - Any constraints or requirements? +3. Summarize your understanding and confirm with the user before proceeding. + +## Phase 2: Codebase exploration + +Goal: Understand relevant existing code at both high and low levels. + +1. Dispatch 2–3 `code-explorer` sub-tasks in parallel. Each should: + - Trace through the code comprehensively, focusing on abstractions, architecture, and control flow. + - Target a different aspect (similar features, high-level architecture, UX, extension points). + - Return a list of 5–10 key files to read. +2. After they return, read every file they identified to build deep understanding. +3. Present a comprehensive summary of findings and patterns to the user. + +## Phase 3: Clarifying questions + +Goal: Fill gaps and resolve ambiguities before designing. + +**This is one of the most important phases. Do not skip.** + +1. Review the codebase findings and the original feature request. +2. Identify underspecified aspects: edge cases, error handling, integration points, scope boundaries, design preferences, backward compatibility, performance. +3. Present all questions to the user as a clear, organized list. +4. **Wait for answers** before moving to architecture. + +If the user says "whatever you think is best", make your recommendation explicit and get confirmation. + +## Phase 4: Architecture design + +Goal: Design multiple implementation approaches with different trade-offs. + +1. Dispatch 2–3 `code-architect` sub-tasks in parallel, each with a different focus: + - **Minimal changes** — smallest diff, maximum reuse of existing code. + - **Clean architecture** — maintainability, elegant abstractions. + - **Pragmatic balance** — speed plus quality. +2. Review all approaches and form an opinion on which fits best for this task. Consider scope (small fix vs. large feature), urgency, complexity, and team context. +3. Present to the user: a brief summary of each approach, a trade-offs comparison, your recommendation with reasoning, and concrete differences in implementation. +4. **Ask the user which approach they prefer.** + +## Phase 5: Create Spec + +Goal: Build the spec. +**Do not start without explicit user approval.** + +1. Wait for approval. +2. Re-read all relevant files identified earlier. +3. Spec following the chosen architecture. We are not writing code, just the specification. +4. Strictly follow codebase conventions (naming, style, error-handling patterns). +5. Update todos as you progress. + +## Phase 6: Summary + +Goal: Document what was accomplished. + +1. Mark all todos complete. +2. Save spec to specs/[feature-name].md +3. Summarize: + - What was built + - Key decisions made + - Files modified + - Suggest running the @feature-pipeline skill to begin implementation diff --git a/.opencode/agents/developer.md b/.opencode/agents/developer.md new file mode 100644 index 0000000..7bfd4b8 --- /dev/null +++ b/.opencode/agents/developer.md @@ -0,0 +1,28 @@ +--- +name: Developer +description: Implements core application features across Python backends and Vue frontends. +mode: subagent +model: deepseek-v4-pro +temperature: 0.2 +maxSteps: 50 +permission: + edit: allow + bash: allow +options: + reasoningEffort: high + thinking: + type: enabled +--- + +You are an expert full-stack developer focused on building clean, modular features. + +### Technical Stack Focus + +- **Backend:** Python. Prioritize clean architecture, explicit type hinting, and robust error/exception handling. +- **Frontend:** Vue 3. Utilize the Composition API, structured reactive state management, and semantic components. + +### Core Instructions + +1. Maintain a strong separation of concerns between business logic and the transport layer. +2. Match the established formatting, design tokens, and architectural conventions of the existing codebase. +3. Avoid pulling in heavy external dependencies when clean native implementations are straightforward. diff --git a/.opencode/agents/reviewer.md b/.opencode/agents/reviewer.md new file mode 100644 index 0000000..9b9bdf1 --- /dev/null +++ b/.opencode/agents/reviewer.md @@ -0,0 +1,29 @@ +--- +name: reviewer +description: "Performs read-only code reviews, security audits, and architectural soundness checks on Python/Vue code." +mode: "subagent" +model: deepseek-v4-pro +temperature: 0.2 +maxSteps: 50 +permission: + edit: deny + bash: allow +options: + reasoningEffort: max + thinking: + type: enabled +--- + +You are a specialized code reviewer subagent. + +### Strict Constraints + +- **Read-Only Context:** Your role is to analyze, critique, and guide. Do not use `write`, `edit`, or patch tools to modify the workspace files directly. + +### Audit Focus Areas + +- Ensure asynchronous tasks in your Vue components balance resource utilization correctly. +- Catch containerization bottlenecks or environment sync gaps in Docker configurations. +- Verify strict typing boundaries between backend Python data models and frontend components. + +Provide feedback by explicitly noting the file, logical block, and detected issue. diff --git a/.opencode/agents/tester.md b/.opencode/agents/tester.md new file mode 100644 index 0000000..4090273 --- /dev/null +++ b/.opencode/agents/tester.md @@ -0,0 +1,20 @@ +--- +name: tester +description: "Holistic QA: Manages unit, integration, and E2E test suites." +mode: "subagent" +model: "moonshot/kimi-k2.7-code" +permission: + edit: allow + bash: + "pytest *": "allow" + "npx playwright *": "allow" +--- + +You are a comprehensive QA Engineer. You own the quality of the entire repository. + +## Operational Directives + +- **Unit Testing:** Audit the Developer's unit tests. If you identify missing coverage for edge cases, write the additional unit tests yourself. +- **E2E Ownership:** Author and maintain all Playwright E2E suites. Prioritize user-facing locators (`getByRole`, `getByLabel`). +- **Gatekeeping:** Before any task is considered "Done," run the full suite (unit + E2E). If a test fails, you own the investigation. +- **Verification:** When a failure occurs, do not just notify. Trace the stack trace, identify the breaking commit or configuration change, and suggest a fix. diff --git a/.opencode/agents/writer.md b/.opencode/agents/writer.md new file mode 100644 index 0000000..e0dae2c --- /dev/null +++ b/.opencode/agents/writer.md @@ -0,0 +1,24 @@ +--- +description: "Drafts and updates technical documentation, architecture guides, and API specs." +mode: "subagent" +model: "deepseek/deepseek-v4-flash" +permission: + edit: allow + bash: deny +options: + thinking: + type: disabled +--- + +You are a technical writer who communicates complex software architectures with pinpoint precision. + +### Deliverables + +- Clear, architectural READMEs, system setup guides, and internal team runbooks. +- Clean API documentation maps outlining payload shapes, status codes, and endpoint routing. + +### Style Guide + +1. Keep prose technical, precise, and highly scannable. +2. Avoid generic corporate or marketing phrases. Lead with the technical details immediately. +3. Maximize the use of Markdown tables, bulleted structural lists, and code blocks for readability. diff --git a/.opencode/commands/code-architect.md b/.opencode/commands/code-architect.md new file mode 100644 index 0000000..04241ef --- /dev/null +++ b/.opencode/commands/code-architect.md @@ -0,0 +1,58 @@ +--- +description: Design a feature architecture by analyzing existing codebase patterns and conventions, then provide a comprehensive implementation blueprint with specific files to create or modify, component designs, data flows, and a build sequence. Use this skill when the user asks for an architecture design, an implementation plan for a non-trivial feature, or when dispatched as a sub-task during feature-dev architecture phase. +--- + +# Code Architect + +You are a senior software architect who delivers comprehensive, actionable architecture blueprints by deeply understanding codebases and making confident architectural decisions. + +## Working discipline + +These bias toward caution over speed — use judgment on trivial tasks. + +- **Think before acting** — state assumptions; if the request has more than one reading, surface them instead of silently choosing; if a simpler path exists, say so. +- **Simplicity first** — the minimum that solves the problem; no speculative features, abstractions, configurability, or handling of impossible cases. +- **Surgical changes** — touch only what the task needs; do not refactor or restyle adjacent code; match existing style; clean up only the orphans your change created, and mention unrelated dead code rather than deleting it. +- **Goal-driven** — turn the task into a concrete success check and iterate until it passes. + +## Core process + +### 1. Codebase pattern analysis + +Extract existing patterns, conventions, and architectural decisions. Identify: + +- The technology stack +- Module boundaries and abstraction layers +- Project guidelines (`CLAUDE.md` / `AGENTS.md`) +- Similar features already implemented — how were they structured? +- Key abstractions the codebase already provides + +### 2. Architecture design + +Based on patterns found, design the complete feature architecture: + +- Make decisive choices. Pick one approach and commit to it. +- Ensure seamless integration with existing code. +- Design for testability, performance, and maintainability. + +### 3. Complete implementation blueprint + +Specify every file to create or modify, component responsibilities, integration points, and data flow. Break the implementation into clear phases. + +## Output + +Deliver a decisive, complete architecture blueprint. Include: + +- **Patterns & conventions found** — list existing patterns with `file:line` references, similar features, and key abstractions to leverage. +- **Architecture decision** — your chosen approach with rationale and trade-offs. +- **Component design** — each component with its file path, responsibilities, dependencies, and interfaces. +- **Implementation map** — specific files to create or modify, with detailed change descriptions. +- **Data flow** — complete flow from entry points through transformations to outputs. +- **Build sequence** — phased implementation steps as a checklist. +- **Critical details** — error handling, state management, testing approach, performance, security. + +Make confident architectural choices. Be specific and actionable: provide file paths, function names, and concrete steps. Avoid presenting multiple equally-weighted options unless the user specifically asked for trade-off analysis. + +--- + +**User arguments:** $ARGUMENTS diff --git a/.opencode/commands/code-explorer.md b/.opencode/commands/code-explorer.md new file mode 100644 index 0000000..dcd27e8 --- /dev/null +++ b/.opencode/commands/code-explorer.md @@ -0,0 +1,58 @@ +--- +description: Deeply analyze an existing codebase feature by tracing execution paths, mapping architecture layers, understanding patterns and abstractions, and documenting dependencies. Use this skill when you need to understand how a feature works before modifying or extending it, when dispatched as a sub-task during feature-dev exploration, or when the user asks "how does X work in this codebase". +--- + +# Code Explorer + +You are an expert code analyst specializing in tracing and understanding feature implementations across codebases. + +## Core mission + +Provide a complete understanding of how a specific feature works by tracing its implementation from entry points to data storage, through all abstraction layers. + +## Analysis approach + +### 1. Feature discovery + +- Find entry points: APIs, UI components, CLI commands. +- Locate core implementation files. +- Map feature boundaries and configuration surface. + +### 2. Code-flow tracing + +- Follow call chains from entry to output. +- Trace data transformations at each step. +- Identify all dependencies and integrations. +- Document state changes and side effects. + +### 3. Architecture analysis + +- Map abstraction layers: presentation → business logic → data. +- Identify design patterns and architectural decisions. +- Document interfaces between components. +- Note cross-cutting concerns: auth, logging, caching, observability. + +### 4. Implementation details + +- Key algorithms and data structures. +- Error handling and edge cases. +- Performance considerations. +- Technical debt or improvement areas. + +## Output + +Deliver a comprehensive analysis that helps developers understand the feature deeply enough to modify or extend it. Always include: + +- **Entry points** with `file:line` references +- **Step-by-step execution flow** with data transformations +- **Key components** and their responsibilities +- **Architecture insights** — patterns, layers, design decisions +- **Dependencies** — internal and external +- **Observations** about strengths, issues, or opportunities +- **Essential files list** — the files a developer absolutely must read to understand this topic + +Structure the response for maximum clarity and usefulness. Always cite specific file paths and line numbers. + +--- + +**User arguments:** $ARGUMENTS diff --git a/.opencode/skills/feature-pipeline/SKILL.md b/.opencode/skills/feature-pipeline/SKILL.md new file mode 100644 index 0000000..2fbccb3 --- /dev/null +++ b/.opencode/skills/feature-pipeline/SKILL.md @@ -0,0 +1,23 @@ +--- +name: feature-pipeline +description: "Executes the full dev-to-docs pipeline: Developer -> Tester -> Reviewer -> Writer." +--- + +## What I do + +I orchestrate a sequential feature implementation and verification pipeline: + +1. **Developer**: Implements the feature based on the spec. +2. **Reviewer**: Audits the code and architectural soundness. +3. **Tester**: Runs full unit/E2E test suites; repairs failures if found. +4. **Writer**: Updates README and API docs based on verified code. + +## Execution Rules + +- Stop and ask the user for clarification if a step fails or is ambiguous. +- Use the `@` mention to trigger the respective subagents sequentially. +- Pass the context from the previous stage to the next stage to ensure consistency. + +## When to use me + +Invoke me when you are ready to begin a new feature or when the Architect has finished a specification. diff --git a/frontend/e2e/.auth/user-cc.json b/frontend/e2e/.auth/user-cc.json index caf7f8f..ddfd585 100644 --- a/frontend/e2e/.auth/user-cc.json +++ b/frontend/e2e/.auth/user-cc.json @@ -2,20 +2,20 @@ "cookies": [ { "name": "refresh_token", - "value": "reYniSI2OIXUAcXkeBNTaaOD7MJOzNEhwxwSDO42bew", + "value": "G_lq6dT7MCHBDgoW18PimjumaPeyWi7hRSwj2WKA_JI", "domain": "localhost", "path": "/api/auth", - "expires": 1787504746.987795, + "expires": 1791672153.30646, "httpOnly": true, "secure": true, "sameSite": "Strict" }, { "name": "access_token", - "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS1jY0B0ZXN0LmNvbSIsInVzZXJfaWQiOiJhNDQyY2E4Ni1lNGIzLTRjZjEtYThmYS0zNWJmYmZhNzk5NjYiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3Nzk3Mzk1NDZ9.3zqjc9RdG9jpr5wbmhbqYUCvzxUl9d8tcc4EY1-BYJc", + "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS1jY0B0ZXN0LmNvbSIsInVzZXJfaWQiOiJkMWU3MzM3OC04N2I4LTQ2ZjQtYmE2ZC1hMDdhYjE0YjFkOWUiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3ODM5MDY5NTN9.9GiSopufAFJ7qa9Cu0AhYpUDfempiYayhLaYIA_IoSc", "domain": "localhost", "path": "/", - "expires": 1779739546.987748, + "expires": 1783906953.306413, "httpOnly": true, "secure": true, "sameSite": "Lax" @@ -27,11 +27,11 @@ "localStorage": [ { "name": "authSyncEvent", - "value": "{\"type\":\"logout\",\"at\":1779728746835}" + "value": "{\"type\":\"logout\",\"at\":1783896153166}" }, { "name": "parentAuth", - "value": "{\"expiresAt\":1779901547148}" + "value": "{\"expiresAt\":1784068953466}" } ] } diff --git a/frontend/e2e/.auth/user-delete.json b/frontend/e2e/.auth/user-delete.json index dc04d94..eeebc47 100644 --- a/frontend/e2e/.auth/user-delete.json +++ b/frontend/e2e/.auth/user-delete.json @@ -2,20 +2,20 @@ "cookies": [ { "name": "refresh_token", - "value": "DlW9UoiIvVxuPPp3wfo3qsVP5tlO2Iw2e8TZThWeMDw", + "value": "fgz_j-G_5UJ-xLf2dJBqcrtiWJkC3amMr8Y90dx_Kdo", "domain": "localhost", "path": "/api/auth", - "expires": 1787504746.877459, + "expires": 1791672153.435032, "httpOnly": true, "secure": true, "sameSite": "Strict" }, { "name": "access_token", - "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS1kZWxldGVAdGVzdC5jb20iLCJ1c2VyX2lkIjoiM2E3ZDA3NjYtYTQyNy00NTQ5LWE0NGEtMWU0ZjUwOGRhZDBhIiwidG9rZW5fdmVyc2lvbiI6MCwiZXhwIjoxNzc5NzM5NTQ2fQ.jFLpGeJBM7U-x-N1jT-muHjBStXFyeb5oQS0LryWwr0", + "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS1kZWxldGVAdGVzdC5jb20iLCJ1c2VyX2lkIjoiYjExZTViNzItNGJlOC00YmY1LTk0ODYtMjE2Nzc5ZGU4Y2ViIiwidG9rZW5fdmVyc2lvbiI6MCwiZXhwIjoxNzgzOTA2OTUzfQ.rTfjAYCaaRGAtRrP3eOegQNkIq_o7kTIgvGW9Sn3bO0", "domain": "localhost", "path": "/", - "expires": 1779739546.877411, + "expires": 1783906953.43499, "httpOnly": true, "secure": true, "sameSite": "Lax" @@ -27,11 +27,11 @@ "localStorage": [ { "name": "authSyncEvent", - "value": "{\"type\":\"logout\",\"at\":1779728746722}" + "value": "{\"type\":\"logout\",\"at\":1783896153271}" }, { "name": "parentAuth", - "value": "{\"expiresAt\":1779901547028}" + "value": "{\"expiresAt\":1784068953610}" } ] } diff --git a/frontend/e2e/.auth/user.json b/frontend/e2e/.auth/user.json index ab7a4a7..443aa49 100644 --- a/frontend/e2e/.auth/user.json +++ b/frontend/e2e/.auth/user.json @@ -2,20 +2,20 @@ "cookies": [ { "name": "refresh_token", - "value": "Xz4WQkQNdryfFsS3GaA09dGDz3yEaRwHxF2VdIh8LwQ", + "value": "5-wHHNkUIcILfUZqXFDTiggTIE4F_rhifieI07DQ6WQ", "domain": "localhost", "path": "/api/auth", - "expires": 1787504745.201123, + "expires": 1791672151.681425, "httpOnly": true, "secure": true, "sameSite": "Strict" }, { "name": "access_token", - "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZUB0ZXN0LmNvbSIsInVzZXJfaWQiOiJhMWVlZGNkOC1hMGE0LTQyYjMtOWU3ZC01MWRmNGM1ZTFiNTUiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3Nzk3Mzk1NDV9.Q2q-xiDjAw8pu3t8ioaawUpGK1__5wBiPZ-vFvXHnmw", + "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZUB0ZXN0LmNvbSIsInVzZXJfaWQiOiIyNTgxZmQwOS05OTMxLTQ3ZTctYmRkYi00MjEwZmQxM2U1MDkiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3ODM5MDY5NTF9.8qvDLe203vx2YOUnzAoOmBDcT6uov4HhsM5o00UseMg", "domain": "localhost", "path": "/", - "expires": 1779739545.201078, + "expires": 1783906951.68138, "httpOnly": true, "secure": true, "sameSite": "Lax" @@ -27,11 +27,11 @@ "localStorage": [ { "name": "authSyncEvent", - "value": "{\"type\":\"logout\",\"at\":1779728745058}" + "value": "{\"type\":\"logout\",\"at\":1783896151561}" }, { "name": "parentAuth", - "value": "{\"expiresAt\":1779901545328}" + "value": "{\"expiresAt\":1784068951811}" } ] } diff --git a/frontend/test-results/.last-run.json b/frontend/test-results/.last-run.json index cbcc1fb..f148683 100644 --- a/frontend/test-results/.last-run.json +++ b/frontend/test-results/.last-run.json @@ -1,4 +1,65 @@ { - "status": "passed", - "failedTests": [] + "status": "failed", + "failedTests": [ + "ef79c4d59112f5749637-c6693163663a7bc4af47", + "3949411e68481643919b-e327f34655d14e94d19b", + "fec17c26f90fca53cae9-b0219eaf807eb93484de", + "539fbf55106c07a0b0af-4dbe4ab6bd5b824248fe", + "a0ff00fe9db1b94ee976-70bd0af5bd4dc0fc90f8", + "60daab3ab23c5105aded-4ff2d3abc6221e754043", + "573422bc1cb767632e56-3b881fd32c8dca14d993", + "a0ede9b164ff4874e0ea-1430723f42605dce5096", + "73e956d909565ee0ca8d-2027a05776ace22fcea7", + "7aed7c2f6df74087d7cf-768260ba8f7794e89556", + "f29a758461fac766bf43-480f0ca0072bcc8fb76f", + "fee2e0be313c94e5185c-2badde8a28abc5c92483", + "09d158a9a9fa648fe02b-834e154496de68909d7e", + "57f43742bac53b67778c-267067f10b8182dd62d2", + "d687e3783b3095baa295-34bf92454984a3e87508", + "af256c240cf1a2fb3f6b-194c319d22a4af671ff8", + "c71403f444e9a906f110-e6ecd6bb63b4ec5a5a25", + "d6f8839cd56b790be4c0-34272e575f57bb690613", + "252e6efd0a4ebdeaacb8-a975d50326943969dc39", + "b3bc53914d8153862f2d-cf454c9d14c4d890a799", + "0445e4f0b57f766a6451-f4a2bd69ecb1b7eff202", + "1aca78671e91610cfc9f-6588e52abfbc15f784e0", + "b774d3e2b6f2ab46c8be-712d31bbc4fd0bd84af0", + "cce20a13127be7ea2249-a1e21277b88115dec270", + "03642ed65289ed2617e8-8509dd8e7ffa8afb8dd4", + "5a9cc0eb7bb05d0304c1-ccef440cfe201a210d22", + "f962074ab28ffe10b237-ea88306db2c45f2140d7", + "6c63717f825d79d1f694-1c19b7cf35610bc938bd", + "b9f570289262774d1452-2cea4ebc13e842e0985f", + "198b299b4340f34d5cd8-1382ca783eb1a0df2f90", + "2fc044a25384fd9f0d2e-e5dc2182f906ab69b27e", + "1fe10bf5a089bf03c3d4-54a8b73063048512c9a8", + "88fb6b12140d9598bca5-63e11902b68d2508ccd1", + "9196a99e5e3448680c82-30e720656820ccdbdae8", + "4cf8bbd68887cddb5d7d-8ae6e42f7fc7d3fa7e6a", + "5da8774fa40a8b041983-096e580bb83c023e014d", + "f023cabcfbd72e9c251e-766e068ad9eb2a388263", + "29cf2a7310bfafff8608-9edd7583e0e756876a86", + "d8a456b031baa1625a54-0c1555e61dea4396c276", + "abb177b0248c39107c83-969aa0015db0fc99d5ee", + "0d5d17a469d01de6a6b0-65be18163a6824f56957", + "0d5d17a469d01de6a6b0-69e9aaee75fe0e476257", + "0d5d17a469d01de6a6b0-98cb437eec17db3eeb0d", + "0d5d17a469d01de6a6b0-211b11979089425fba87", + "0d5d17a469d01de6a6b0-cb56e46a1465364b8983", + "0d5d17a469d01de6a6b0-5787b1c19c5c3b93cbb4", + "22fbaea7d0c75fbdca8e-4aaa785e7a4dfdc6c43a", + "d450fb075a7292ee9d55-51b084418c21b19c1e90", + "367d416bc67f2212f2ea-d7b6f60f5a9c28db1e79", + "e7caec8f355ec9da3afb-126bac0fba5fb25bb468", + "68f4a83ea53b695d9889-c260f9d095c72937b8d6", + "4a81e53ab660f2d9ca43-237bf2b7adc9bcde6cd8", + "4a81e53ab660f2d9ca43-d60881fdd2c89e327569", + "4a524ee12c5a95d8b699-fa48b54e49f31839e5a8", + "f7f03fab22cee8cdd386-53724737f77985005257", + "f7f03fab22cee8cdd386-9e5db08c6f11001430bf", + "05c60e5489894b04b806-a583933cd36dbec0fbc8", + "1aeb41645bc07733ddab-0bfabbf02a8ee16b1c21", + "1aeb41645bc07733ddab-63443be391ff2e2e6a9a", + "cc1bb6b0a79d3836a965-6ecd8fb21115aebcda0d" + ] } \ No newline at end of file diff --git a/.github/specs/archive/ROUTINES-IMPLEMENTATION-SUMMARY.md b/specs/archive/ROUTINES-IMPLEMENTATION-SUMMARY.md similarity index 100% rename from .github/specs/archive/ROUTINES-IMPLEMENTATION-SUMMARY.md rename to specs/archive/ROUTINES-IMPLEMENTATION-SUMMARY.md diff --git a/.github/specs/archive/bug-both-system-and-user-items-shown.md b/specs/archive/bug-both-system-and-user-items-shown.md similarity index 100% rename from .github/specs/archive/bug-both-system-and-user-items-shown.md rename to specs/archive/bug-both-system-and-user-items-shown.md diff --git a/.github/specs/archive/bugs-1.0.5-001.md b/specs/archive/bugs-1.0.5-001.md similarity index 100% rename from .github/specs/archive/bugs-1.0.5-001.md rename to specs/archive/bugs-1.0.5-001.md diff --git a/.github/specs/archive/bugs-1.0.5-002.md b/specs/archive/bugs-1.0.5-002.md similarity index 100% rename from .github/specs/archive/bugs-1.0.5-002.md rename to specs/archive/bugs-1.0.5-002.md diff --git a/.github/specs/archive/bugs-1.0.6-01/bugs-1.0.6-set01.md b/specs/archive/bugs-1.0.6-01/bugs-1.0.6-set01.md similarity index 100% rename from .github/specs/archive/bugs-1.0.6-01/bugs-1.0.6-set01.md rename to specs/archive/bugs-1.0.6-01/bugs-1.0.6-set01.md diff --git a/.github/specs/archive/bugs-1.0.6-01/image-1.png b/specs/archive/bugs-1.0.6-01/image-1.png similarity index 100% rename from .github/specs/archive/bugs-1.0.6-01/image-1.png rename to specs/archive/bugs-1.0.6-01/image-1.png diff --git a/.github/specs/archive/bugs-1.0.6-01/image.png b/specs/archive/bugs-1.0.6-01/image.png similarity index 100% rename from .github/specs/archive/bugs-1.0.6-01/image.png rename to specs/archive/bugs-1.0.6-01/image.png diff --git a/.github/specs/archive/bugs-1.0.6-02/bugs-1.0.6-set02.md b/specs/archive/bugs-1.0.6-02/bugs-1.0.6-set02.md similarity index 100% rename from .github/specs/archive/bugs-1.0.6-02/bugs-1.0.6-set02.md rename to specs/archive/bugs-1.0.6-02/bugs-1.0.6-set02.md diff --git a/.github/specs/archive/bugs-1.0.6-02/image.png b/specs/archive/bugs-1.0.6-02/image.png similarity index 100% rename from .github/specs/archive/bugs-1.0.6-02/image.png rename to specs/archive/bugs-1.0.6-02/image.png diff --git a/.github/specs/archive/e2e-routines-test-plan.md b/specs/archive/e2e-routines-test-plan.md similarity index 100% rename from .github/specs/archive/e2e-routines-test-plan.md rename to specs/archive/e2e-routines-test-plan.md diff --git a/.github/specs/archive/feat-account-delete-scheduler.md b/specs/archive/feat-account-delete-scheduler.md similarity index 100% rename from .github/specs/archive/feat-account-delete-scheduler.md rename to specs/archive/feat-account-delete-scheduler.md diff --git a/.github/specs/archive/feat-calendar-chore/feat-calendar-chore-component01.png b/specs/archive/feat-calendar-chore/feat-calendar-chore-component01.png similarity index 100% rename from .github/specs/archive/feat-calendar-chore/feat-calendar-chore-component01.png rename to specs/archive/feat-calendar-chore/feat-calendar-chore-component01.png diff --git a/.github/specs/archive/feat-calendar-chore/feat-calendar-chore.md b/specs/archive/feat-calendar-chore/feat-calendar-chore.md similarity index 100% rename from .github/specs/archive/feat-calendar-chore/feat-calendar-chore.md rename to specs/archive/feat-calendar-chore/feat-calendar-chore.md diff --git a/.github/specs/archive/feat-calendar-chore/feat-calendar-schedule-refactor-01.md b/specs/archive/feat-calendar-chore/feat-calendar-schedule-refactor-01.md similarity index 100% rename from .github/specs/archive/feat-calendar-chore/feat-calendar-schedule-refactor-01.md rename to specs/archive/feat-calendar-chore/feat-calendar-schedule-refactor-01.md diff --git a/.github/specs/archive/feat-calendar-chore/feat-calendar-schedule-refactor-02.md b/specs/archive/feat-calendar-chore/feat-calendar-schedule-refactor-02.md similarity index 100% rename from .github/specs/archive/feat-calendar-chore/feat-calendar-schedule-refactor-02.md rename to specs/archive/feat-calendar-chore/feat-calendar-schedule-refactor-02.md diff --git a/.github/specs/archive/feat-child-confirm-chore.md b/specs/archive/feat-child-confirm-chore.md similarity index 100% rename from .github/specs/archive/feat-child-confirm-chore.md rename to specs/archive/feat-child-confirm-chore.md diff --git a/.github/specs/archive/feat-dynamic-points/IMPLEMENTATION_SUMMARY.md b/specs/archive/feat-dynamic-points/IMPLEMENTATION_SUMMARY.md similarity index 100% rename from .github/specs/archive/feat-dynamic-points/IMPLEMENTATION_SUMMARY.md rename to specs/archive/feat-dynamic-points/IMPLEMENTATION_SUMMARY.md diff --git a/.github/specs/archive/feat-dynamic-points/feat-dynamic-points-after.png b/specs/archive/feat-dynamic-points/feat-dynamic-points-after.png similarity index 100% rename from .github/specs/archive/feat-dynamic-points/feat-dynamic-points-after.png rename to specs/archive/feat-dynamic-points/feat-dynamic-points-after.png diff --git a/.github/specs/archive/feat-dynamic-points/feat-dynamic-points-before.png b/specs/archive/feat-dynamic-points/feat-dynamic-points-before.png similarity index 100% rename from .github/specs/archive/feat-dynamic-points/feat-dynamic-points-before.png rename to specs/archive/feat-dynamic-points/feat-dynamic-points-before.png diff --git a/.github/specs/archive/feat-dynamic-points/feat-dynamic-points-edit-modal.png b/specs/archive/feat-dynamic-points/feat-dynamic-points-edit-modal.png similarity index 100% rename from .github/specs/archive/feat-dynamic-points/feat-dynamic-points-edit-modal.png rename to specs/archive/feat-dynamic-points/feat-dynamic-points-edit-modal.png diff --git a/.github/specs/archive/feat-dynamic-points/feat-dynamic-points.md b/specs/archive/feat-dynamic-points/feat-dynamic-points.md similarity index 100% rename from .github/specs/archive/feat-dynamic-points/feat-dynamic-points.md rename to specs/archive/feat-dynamic-points/feat-dynamic-points.md diff --git a/.github/specs/archive/feat-dynamic-points/feat-tracking.md b/specs/archive/feat-dynamic-points/feat-tracking.md similarity index 100% rename from .github/specs/archive/feat-dynamic-points/feat-tracking.md rename to specs/archive/feat-dynamic-points/feat-tracking.md diff --git a/.github/specs/archive/feat-hashed-passwords.md b/specs/archive/feat-hashed-passwords.md similarity index 100% rename from .github/specs/archive/feat-hashed-passwords.md rename to specs/archive/feat-hashed-passwords.md diff --git a/.github/specs/archive/feat-landing-page.md b/specs/archive/feat-landing-page.md similarity index 100% rename from .github/specs/archive/feat-landing-page.md rename to specs/archive/feat-landing-page.md diff --git a/.github/specs/archive/feat-login-security.md b/specs/archive/feat-login-security.md similarity index 100% rename from .github/specs/archive/feat-login-security.md rename to specs/archive/feat-login-security.md diff --git a/.github/specs/archive/feat-nav-selector-icons.md b/specs/archive/feat-nav-selector-icons.md similarity index 100% rename from .github/specs/archive/feat-nav-selector-icons.md rename to specs/archive/feat-nav-selector-icons.md diff --git a/.github/specs/archive/feat-no-delete-system-tasks-and-rewards.md b/specs/archive/feat-no-delete-system-tasks-and-rewards.md similarity index 100% rename from .github/specs/archive/feat-no-delete-system-tasks-and-rewards.md rename to specs/archive/feat-no-delete-system-tasks-and-rewards.md diff --git a/.github/specs/archive/feat-notify-ending-chore.md b/specs/archive/feat-notify-ending-chore.md similarity index 100% rename from .github/specs/archive/feat-notify-ending-chore.md rename to specs/archive/feat-notify-ending-chore.md diff --git a/.github/specs/archive/feat-parent-chore-notifications.md b/specs/archive/feat-parent-chore-notifications.md similarity index 100% rename from .github/specs/archive/feat-parent-chore-notifications.md rename to specs/archive/feat-parent-chore-notifications.md diff --git a/.github/specs/archive/feat-parent-mode-expire.md b/specs/archive/feat-parent-mode-expire.md similarity index 100% rename from .github/specs/archive/feat-parent-mode-expire.md rename to specs/archive/feat-parent-mode-expire.md diff --git a/.github/specs/archive/feat-profile-mark-remove-account.md b/specs/archive/feat-profile-mark-remove-account.md similarity index 100% rename from .github/specs/archive/feat-profile-mark-remove-account.md rename to specs/archive/feat-profile-mark-remove-account.md diff --git a/.github/specs/archive/feat-schedule-enable-disable.md b/specs/archive/feat-schedule-enable-disable.md similarity index 100% rename from .github/specs/archive/feat-schedule-enable-disable.md rename to specs/archive/feat-schedule-enable-disable.md diff --git a/.github/specs/archive/feat-state-expire.md b/specs/archive/feat-state-expire.md similarity index 100% rename from .github/specs/archive/feat-state-expire.md rename to specs/archive/feat-state-expire.md diff --git a/.github/specs/archive/plan-routinesFeature.prompt.md b/specs/archive/plan-routinesFeature.prompt.md similarity index 100% rename from .github/specs/archive/plan-routinesFeature.prompt.md rename to specs/archive/plan-routinesFeature.prompt.md diff --git a/.github/specs/archive/profile-button-menu/feat-profile-icon-button-menu.md b/specs/archive/profile-button-menu/feat-profile-icon-button-menu.md similarity index 100% rename from .github/specs/archive/profile-button-menu/feat-profile-icon-button-menu.md rename to specs/archive/profile-button-menu/feat-profile-icon-button-menu.md diff --git a/.github/specs/archive/profile-button-menu/mockup.png b/specs/archive/profile-button-menu/mockup.png similarity index 100% rename from .github/specs/archive/profile-button-menu/mockup.png rename to specs/archive/profile-button-menu/mockup.png diff --git a/.github/specs/feat-child-actions.md b/specs/feat-child-actions.md similarity index 100% rename from .github/specs/feat-child-actions.md rename to specs/feat-child-actions.md diff --git a/.github/specs/plan-achievements.md b/specs/plan-achievements.md similarity index 100% rename from .github/specs/plan-achievements.md rename to specs/plan-achievements.md diff --git a/.github/specs/template/feat-template.md b/specs/template/feat-template.md similarity index 100% rename from .github/specs/template/feat-template.md rename to specs/template/feat-template.md From d910a6bc65cf99f3a20e6ac7cd78f8487b0a954d Mon Sep 17 00:00:00 2001 From: Ryan Kegel Date: Fri, 17 Jul 2026 19:38:02 -0400 Subject: [PATCH 05/31] feat(playwright-cli): add comprehensive test generation, tracing, and video recording documentation - Introduced detailed documentation for test generation workflow in Playwright CLI, covering planning, generating, and healing tests. - Added tracing capabilities documentation, including usage, output files, and best practices for debugging and performance analysis. - Included video recording instructions, emphasizing best practices for capturing browser automation sessions with chapter markers and overlays. - Implemented user tutorial authentication setup and tutorial tests for parent mode in the E2E testing framework. - Created JSON files for user tutorial state management, ensuring isolated test environments. --- .opencode/agents/architect.md | 2 +- .opencode/agents/developer.md | 2 +- .opencode/agents/reviewer.md | 2 +- .opencode/agents/tester.md | 18 +- .opencode/agents/writer.md | 2 +- .opencode/skills/e2e-repair/SKILL.md | 22 + .opencode/skills/playwright-cli/SKILL.md | 420 +++++++++++++++++ .../references/element-attributes.md | 23 + .../references/playwright-tests.md | 39 ++ .../references/request-mocking.md | 87 ++++ .../playwright-cli/references/running-code.md | 241 ++++++++++ .../references/session-management.md | 225 +++++++++ .../references/storage-state.md | 275 +++++++++++ .../references/test-generation.md | 433 ++++++++++++++++++ .../playwright-cli/references/tracing.md | 139 ++++++ .../references/video-recording.md | 143 ++++++ backend/api/auth_api.py | 32 ++ frontend/e2e/.auth/user-cc.json | 12 +- frontend/e2e/.auth/user-delete.json | 12 +- frontend/e2e/.auth/user-tutorial.json | 39 ++ frontend/e2e/.auth/user.json | 12 +- frontend/e2e/auth-tutorial.setup.ts | 47 ++ frontend/e2e/e2e-constants.ts | 4 + .../create-child/validation.spec.ts | 15 +- .../notifications/push-subscription.spec.ts | 12 + ...user-profile-notification-settings.spec.ts | 24 +- .../profile-button-temporary.spec.ts | 5 + .../profile-button/profile-button.spec.ts | 7 +- .../e2e/mode_parent/tutorial/tutorial.spec.ts | 380 +++++++++++++++ .../user-profile/change-pin.spec.ts | 13 + .../user-profile/delete-account.spec.ts | 19 +- .../user-profile/profile-editing.spec.ts | 128 ++---- frontend/playwright.config.ts | 17 + .../src/components/profile/ProfileSection.vue | 19 +- .../src/components/profile/UserProfile.vue | 1 + frontend/src/tutorial/steps.ts | 4 +- frontend/test-results/.last-run.json | 61 +-- 37 files changed, 2754 insertions(+), 182 deletions(-) create mode 100644 .opencode/skills/e2e-repair/SKILL.md create mode 100644 .opencode/skills/playwright-cli/SKILL.md create mode 100644 .opencode/skills/playwright-cli/references/element-attributes.md create mode 100644 .opencode/skills/playwright-cli/references/playwright-tests.md create mode 100644 .opencode/skills/playwright-cli/references/request-mocking.md create mode 100644 .opencode/skills/playwright-cli/references/running-code.md create mode 100644 .opencode/skills/playwright-cli/references/session-management.md create mode 100644 .opencode/skills/playwright-cli/references/storage-state.md create mode 100644 .opencode/skills/playwright-cli/references/test-generation.md create mode 100644 .opencode/skills/playwright-cli/references/tracing.md create mode 100644 .opencode/skills/playwright-cli/references/video-recording.md create mode 100644 frontend/e2e/.auth/user-tutorial.json create mode 100644 frontend/e2e/auth-tutorial.setup.ts create mode 100644 frontend/e2e/mode_parent/tutorial/tutorial.spec.ts diff --git a/.opencode/agents/architect.md b/.opencode/agents/architect.md index 5904454..720dd94 100644 --- a/.opencode/agents/architect.md +++ b/.opencode/agents/architect.md @@ -2,7 +2,7 @@ name: architect description: "Defines system requirements, data contracts, and architectural blueprints." mode: subagent -model: "deepseek-v4-pro" +model: "deepseek/deepseek-v4-pro" thinking: "enabled" permission: edit: allow diff --git a/.opencode/agents/developer.md b/.opencode/agents/developer.md index 7bfd4b8..43307f8 100644 --- a/.opencode/agents/developer.md +++ b/.opencode/agents/developer.md @@ -2,7 +2,7 @@ name: Developer description: Implements core application features across Python backends and Vue frontends. mode: subagent -model: deepseek-v4-pro +model: deepseek/deepseek-v4-pro temperature: 0.2 maxSteps: 50 permission: diff --git a/.opencode/agents/reviewer.md b/.opencode/agents/reviewer.md index 9b9bdf1..9571284 100644 --- a/.opencode/agents/reviewer.md +++ b/.opencode/agents/reviewer.md @@ -2,7 +2,7 @@ name: reviewer description: "Performs read-only code reviews, security audits, and architectural soundness checks on Python/Vue code." mode: "subagent" -model: deepseek-v4-pro +model: deepseek/deepseek-v4-pro temperature: 0.2 maxSteps: 50 permission: diff --git a/.opencode/agents/tester.md b/.opencode/agents/tester.md index 4090273..700ccaa 100644 --- a/.opencode/agents/tester.md +++ b/.opencode/agents/tester.md @@ -1,13 +1,15 @@ --- name: tester -description: "Holistic QA: Manages unit, integration, and E2E test suites." +description: "Holistic QA: Manages unit, integration, and writes and auto-repairs E2E test suites." mode: "subagent" -model: "moonshot/kimi-k2.7-code" +model: "moonshotai/kimi-k2.7-code" permission: edit: allow bash: "pytest *": "allow" "npx playwright *": "allow" + "playwright-cli *": "allow" + "npm *": "ask" --- You are a comprehensive QA Engineer. You own the quality of the entire repository. @@ -15,6 +17,16 @@ You are a comprehensive QA Engineer. You own the quality of the entire repositor ## Operational Directives - **Unit Testing:** Audit the Developer's unit tests. If you identify missing coverage for edge cases, write the additional unit tests yourself. -- **E2E Ownership:** Author and maintain all Playwright E2E suites. Prioritize user-facing locators (`getByRole`, `getByLabel`). +- **Front End Testing:** Audit the Developers frontend tests. If you identify missing coverage for edge cases, write the additional unit tests yourself. +- **E2E Ownership:** Author and maintain all Playwright E2E suites using the playwright-cli skills. Prioritize user-facing locators (`getByRole`, `getByLabel`). - **Gatekeeping:** Before any task is considered "Done," run the full suite (unit + E2E). If a test fails, you own the investigation. - **Verification:** When a failure occurs, do not just notify. Trace the stack trace, identify the breaking commit or configuration change, and suggest a fix. + +## Autonomous Repair Protocol + +When executing tests (especially `playwright`): + +1. **Analyze Failure:** If a test fails, do not just report. Parse the stack trace, identifying if the error is a `locator` issue, a `timeout` issue, or a `logic` error. +2. **The "Application Bug" Check:** If the failure indicates that the _application code_ is incorrect (rather than the test locator), **STOP**. Ask the user if you should fix the application logic or if the test is wrong. +3. **Looping:** You have permission to fix the test (e.g., update a locator) and re-run. +4. **Safety Limit:** Do not run more than 3 repair attempts per test file. If it fails 3 times, stop, output the logs, and ask for help. diff --git a/.opencode/agents/writer.md b/.opencode/agents/writer.md index e0dae2c..3f2d966 100644 --- a/.opencode/agents/writer.md +++ b/.opencode/agents/writer.md @@ -1,7 +1,7 @@ --- description: "Drafts and updates technical documentation, architecture guides, and API specs." mode: "subagent" -model: "deepseek/deepseek-v4-flash" +model: "deepseek/deepseek/deepseek-v4-flash" permission: edit: allow bash: deny diff --git a/.opencode/skills/e2e-repair/SKILL.md b/.opencode/skills/e2e-repair/SKILL.md new file mode 100644 index 0000000..4ae7702 --- /dev/null +++ b/.opencode/skills/e2e-repair/SKILL.md @@ -0,0 +1,22 @@ +--- +name: e2e-repair +description: "Runs playwright tests, captures errors, and triggers auto-repair." +--- + +## Logic + +1. Execute: `npx playwright test [test_file]` +2. If Success: + - Report success. + - Exit. +3. If Failure: + - Capture output. + - Pass logs to @tester agent. + - @tester analyzes error and edits file. + - Repeat until success or max_retries reached. + +## Safety Guardrails + +- Make use of playwright-cli skills for test execution and repair. +- Max Retries: 3 per file. +- If the error persists after 3 retries, report: "Repair exhausted: Please review logs." diff --git a/.opencode/skills/playwright-cli/SKILL.md b/.opencode/skills/playwright-cli/SKILL.md new file mode 100644 index 0000000..6f34a18 --- /dev/null +++ b/.opencode/skills/playwright-cli/SKILL.md @@ -0,0 +1,420 @@ +--- +name: playwright-cli +description: Automate browser interactions, test web pages and work with Playwright tests. +allowed-tools: Bash(playwright-cli:*) Bash(npx:*) Bash(npm:*) +--- + +# Browser Automation with playwright-cli + +## Quick start + +```bash +# open new browser +playwright-cli open +# navigate to a page +playwright-cli goto https://playwright.dev +# interact with the page using refs from the snapshot +playwright-cli click e15 +playwright-cli type "page.click" +playwright-cli press Enter +# take a screenshot (rarely used, as snapshot is more common) +playwright-cli screenshot +# close the browser +playwright-cli close +``` + +## Commands + +### Core + +```bash +playwright-cli open +# open and navigate right away +playwright-cli open https://example.com/ +playwright-cli goto https://playwright.dev +playwright-cli type "search query" +playwright-cli click e3 +playwright-cli dblclick e7 +# --submit presses Enter after filling the element +playwright-cli fill e5 "user@example.com" --submit +playwright-cli drag e2 e8 +# drop files or data onto an element (from outside the page) +playwright-cli drop e4 --path=./image.png +playwright-cli drop e4 --data="text/plain=hello world" +playwright-cli hover e4 +playwright-cli select e9 "option-value" +playwright-cli upload ./document.pdf +playwright-cli check e12 +playwright-cli uncheck e12 +playwright-cli snapshot +# search the snapshot for text or a regexp, returns matching nodes with surrounding context +playwright-cli find "Sign in" +playwright-cli find --regex "Sign (in|up)" +# wrap the regexp in slashes to add flags, e.g. /i for case-insensitive +playwright-cli find --regex "/sign (in|up)/i" +playwright-cli eval "document.title" +playwright-cli eval "el => el.textContent" e5 +# get element id, class, or any attribute not visible in the snapshot +playwright-cli eval "el => el.id" e5 +playwright-cli eval "el => el.getAttribute('data-testid')" e5 +playwright-cli dialog-accept +playwright-cli dialog-accept "confirmation text" +playwright-cli dialog-dismiss +playwright-cli resize 1920 1080 +playwright-cli close +``` + +### Navigation + +```bash +playwright-cli go-back +playwright-cli go-forward +playwright-cli reload +``` + +### Keyboard + +```bash +playwright-cli press Enter +playwright-cli press ArrowDown +playwright-cli keydown Shift +playwright-cli keyup Shift +``` + +### Mouse + +```bash +playwright-cli mousemove 150 300 +playwright-cli mousedown +playwright-cli mousedown right +playwright-cli mouseup +playwright-cli mouseup right +playwright-cli mousewheel 0 100 +``` + +### Save as + +```bash +playwright-cli screenshot +playwright-cli screenshot e5 +playwright-cli screenshot --filename=page.png +playwright-cli screenshot --hires +playwright-cli pdf --filename=page.pdf +``` + +### Tabs + +```bash +playwright-cli tab-list +playwright-cli tab-new +playwright-cli tab-new https://example.com/page +playwright-cli tab-close +playwright-cli tab-close 2 +playwright-cli tab-select 0 +``` + +### Storage + +```bash +playwright-cli state-save +playwright-cli state-save auth.json +playwright-cli state-load auth.json + +# Cookies +playwright-cli cookie-list +playwright-cli cookie-list --domain=example.com +playwright-cli cookie-get session_id +playwright-cli cookie-set session_id abc123 +playwright-cli cookie-set session_id abc123 --domain=example.com --httpOnly --secure +playwright-cli cookie-delete session_id +playwright-cli cookie-clear + +# LocalStorage +playwright-cli localstorage-list +playwright-cli localstorage-get theme +playwright-cli localstorage-set theme dark +playwright-cli localstorage-delete theme +playwright-cli localstorage-clear + +# SessionStorage +playwright-cli sessionstorage-list +playwright-cli sessionstorage-get step +playwright-cli sessionstorage-set step 3 +playwright-cli sessionstorage-delete step +playwright-cli sessionstorage-clear +``` + +### Network + +```bash +playwright-cli route "**/*.jpg" --status=404 +playwright-cli route "https://api.example.com/**" --body='{"mock": true}' +playwright-cli route-list +playwright-cli unroute "**/*.jpg" +playwright-cli unroute +``` + +### DevTools + +```bash +playwright-cli console +playwright-cli console warning +playwright-cli requests +playwright-cli request 5 +playwright-cli run-code "async page => await page.context().grantPermissions(['geolocation'])" +playwright-cli run-code --filename=script.js +playwright-cli tracing-start +playwright-cli tracing-stop +playwright-cli video-start video.webm +playwright-cli video-chapter "Chapter Title" --description="Details" --duration=2000 +playwright-cli video-stop + +# annotate each subsequent action (click, type, ...) with a callout naming the action and highlighting the target +playwright-cli video-show-actions --duration=600 --position=top-right +playwright-cli video-hide-actions + +# launch the dashboard for UI review / design feedback — user annotates the page, you receive the annotated screenshot, snapshot, and notes +playwright-cli show --annotate + +# generate a Playwright locator for an element from its ref or selector +playwright-cli generate-locator e5 --raw + +# show a persistent highlight overlay for an element, optionally with a custom style +playwright-cli highlight e5 +playwright-cli highlight e5 --style="outline: 3px dashed red" +# hide a single element highlight, or all page highlights when no target is given +playwright-cli highlight e5 --hide +playwright-cli highlight --hide +``` + +## Raw output + +The global `--raw` option strips page status, generated code, and snapshot sections from the output, returning only the result value. Use it to pipe command output into other tools. Commands that don't produce output return nothing. + +```bash +playwright-cli --raw eval "JSON.stringify(performance.timing)" | jq '.loadEventEnd - .navigationStart' +playwright-cli --raw eval "JSON.stringify([...document.querySelectorAll('a')].map(a => a.href))" > links.json +playwright-cli --raw snapshot > before.yml +playwright-cli click e5 +playwright-cli --raw snapshot > after.yml +diff before.yml after.yml +TOKEN=$(playwright-cli --raw cookie-get session_id) +playwright-cli --raw localstorage-get theme +``` + +For structured output wrapping every reply as JSON, pass --json +```bash +playwright-cli list --json +``` + +## Open parameters +```bash +# Use specific browser when creating session +playwright-cli open --browser=chrome +playwright-cli open --browser=firefox +playwright-cli open --browser=webkit +playwright-cli open --browser=msedge + +# Emulate a generic mobile device (Pixel 10 for Chromium, iPhone 17 for WebKit). +# Prefer this when a mobile layout is acceptable: mobile pages are usually +# lighter, so snapshots are smaller and cheaper. +playwright-cli open --mobile +playwright-cli open --device="iPhone 15" + +# Use persistent profile (by default profile is in-memory) +playwright-cli open --persistent +# Use persistent profile with custom directory +playwright-cli open --profile=/path/to/profile + +# Connect to browser via Playwright Extension +playwright-cli attach --extension=chrome + +# Connect to a running Chrome or Edge by channel name +playwright-cli attach --cdp=chrome +playwright-cli attach --cdp=msedge + +# Connect to a running browser via CDP endpoint +playwright-cli attach --cdp=http://localhost:9222 + +# Start with config file +playwright-cli open --config=my-config.json + +# Close the browser +playwright-cli close +# Detach from an attached browser (leaves the external browser running) +playwright-cli -s=msedge detach +# Delete user data for the default session +playwright-cli delete-data +``` + +## URLs with `&` on Windows + +On Windows, `cmd.exe` and PowerShell treat `&` as a command separator, so URLs with multiple query parameters get truncated before `playwright-cli` runs. Escape `&` with `^&` in `cmd.exe`, or use `--%` in PowerShell: + +```batch +playwright-cli goto "https://example.com/?a=1^&b=2" +``` + +```powershell +playwright-cli --% goto "https://example.com/?a=1&b=2" +``` + +## Snapshots + +After each command, playwright-cli provides a snapshot of the current browser state. + +```bash +> playwright-cli goto https://example.com +### Page +- Page URL: https://example.com/ +- Page Title: Example Domain +### Snapshot +[Snapshot](.playwright-cli/page-2026-02-14T19-22-42-679Z.yml) +``` + +You can also take a snapshot on demand using `playwright-cli snapshot` command. All the options below can be combined as needed. + +```bash +# default - save to a file with timestamp-based name +playwright-cli snapshot + +# save to file, use when snapshot is a part of the workflow result +playwright-cli snapshot --filename=after-click.yaml + +# snapshot an element instead of the whole page +playwright-cli snapshot "#main" + +# limit snapshot depth for efficiency, take a partial snapshot afterwards +playwright-cli snapshot --depth=4 +playwright-cli snapshot e34 + +# include each element's bounding box as [box=x,y,width,height] +playwright-cli snapshot --boxes + +# search a large snapshot instead of capturing it all — returns matching nodes +# with 3 lines of context around each match (like grep -C) +playwright-cli find "Add to cart" +playwright-cli find --regex "\\$[0-9]+\\.[0-9]{2}" +``` + +## Targeting elements + +By default, use refs from the snapshot to interact with page elements. + +```bash +# get snapshot with refs +playwright-cli snapshot + +# interact using a ref +playwright-cli click e15 +``` + +You can also use css selectors or Playwright locators. + +```bash +# css selector +playwright-cli click "#main > button.submit" + +# role locator +playwright-cli click "getByRole('button', { name: 'Submit' })" + +# test id +playwright-cli click "getByTestId('submit-button')" +``` + +## Browser Sessions + +```bash +# create new browser session named "mysession" with persistent profile +playwright-cli -s=mysession open example.com --persistent +# same with manually specified profile directory (use when requested explicitly) +playwright-cli -s=mysession open example.com --profile=/path/to/profile +playwright-cli -s=mysession click e6 +playwright-cli -s=mysession close # stop a named browser +playwright-cli -s=mysession delete-data # delete user data for persistent session + +playwright-cli list +# Close all browsers +playwright-cli close-all +# Forcefully kill all browser processes +playwright-cli kill-all +``` + +## Installation + +If global `playwright-cli` command is not available, try a local version via `npx playwright cli`: + +```bash +npx --no-install playwright --version +``` + +When local version is available, use `npx playwright cli` in all commands. Otherwise, install `playwright-cli` as a global command: + +```bash +npm install -g @playwright/cli@latest +``` + +## Example: Form submission + +```bash +playwright-cli open https://example.com/form +playwright-cli snapshot + +playwright-cli fill e1 "user@example.com" +playwright-cli fill e2 "password123" +playwright-cli click e3 +playwright-cli snapshot +playwright-cli close +``` + +## Example: Multi-tab workflow + +```bash +playwright-cli open https://example.com +playwright-cli tab-new https://example.com/other +playwright-cli tab-list +playwright-cli tab-select 0 +playwright-cli snapshot +playwright-cli close +``` + +## Example: Debugging with DevTools + +```bash +playwright-cli open https://example.com +playwright-cli click e4 +playwright-cli fill e7 "test" +playwright-cli console +playwright-cli requests +playwright-cli close +``` + +```bash +playwright-cli open https://example.com +playwright-cli tracing-start +playwright-cli click e4 +playwright-cli fill e7 "test" +playwright-cli tracing-stop +playwright-cli close +``` + +## Example: Interactive session + +Ask the user for UI review or design feedback. The user draws boxes on the live page and types comments; you receive the annotated screenshot, the snapshot of the marked region, and the user's notes. Use this whenever the user asks for "UI review", "design feedback", or to "ask the user what they think / want / mean": + +```bash +playwright-cli open https://example.com +playwright-cli show --annotate +``` + +## Specific tasks + +* **Running and Debugging Playwright tests** [references/playwright-tests.md](references/playwright-tests.md) +* **Request mocking** [references/request-mocking.md](references/request-mocking.md) +* **Running Playwright code** [references/running-code.md](references/running-code.md) +* **Browser session management** [references/session-management.md](references/session-management.md) +* **Storage state (cookies, localStorage)** [references/storage-state.md](references/storage-state.md) +* **Test generation (plan / generate / heal)** [references/test-generation.md](references/test-generation.md) +* **Tracing** [references/tracing.md](references/tracing.md) +* **Video recording** [references/video-recording.md](references/video-recording.md) +* **Inspecting element attributes** [references/element-attributes.md](references/element-attributes.md) diff --git a/.opencode/skills/playwright-cli/references/element-attributes.md b/.opencode/skills/playwright-cli/references/element-attributes.md new file mode 100644 index 0000000..4e9fa6b --- /dev/null +++ b/.opencode/skills/playwright-cli/references/element-attributes.md @@ -0,0 +1,23 @@ +# Inspecting Element Attributes + +When the snapshot doesn't show an element's `id`, `class`, `data-*` attributes, or other DOM properties, use `eval` to inspect them. + +## Examples + +```bash +playwright-cli snapshot +# snapshot shows a button as e7 but doesn't reveal its id or data attributes + +# get the element's id +playwright-cli eval "el => el.id" e7 + +# get all CSS classes +playwright-cli eval "el => el.className" e7 + +# get a specific attribute +playwright-cli eval "el => el.getAttribute('data-testid')" e7 +playwright-cli eval "el => el.getAttribute('aria-label')" e7 + +# get a computed style property +playwright-cli eval "el => getComputedStyle(el).display" e7 +``` diff --git a/.opencode/skills/playwright-cli/references/playwright-tests.md b/.opencode/skills/playwright-cli/references/playwright-tests.md new file mode 100644 index 0000000..bec2ec9 --- /dev/null +++ b/.opencode/skills/playwright-cli/references/playwright-tests.md @@ -0,0 +1,39 @@ +# Running Playwright Tests + +To run Playwright tests, use the `npx playwright test` command, or a package manager script. To avoid opening the interactive html report, use `PLAYWRIGHT_HTML_OPEN=never` environment variable. + +```bash +# Run all tests +PLAYWRIGHT_HTML_OPEN=never npx playwright test + +# Run all tests through a custom npm script +PLAYWRIGHT_HTML_OPEN=never npm run special-test-command +``` + +# Debugging Playwright Tests + +To debug a failing Playwright test, run it with `--debug=cli` option. This command will pause the test at the start and print the debugging instructions. + +**IMPORTANT**: run the command in the background and check the output until "Debugging Instructions" is printed. Make sure to stop the command after you have finished. + +Once instructions containing a session name are printed, use `playwright-cli` to attach the session and explore the page. + +```bash +# Run the test +PLAYWRIGHT_HTML_OPEN=never npx playwright test --debug=cli +# ... +# ... debugging instructions for "tw-abcdef" session ... +# ... + +# Attach to the test +playwright-cli attach tw-abcdef +``` + +Keep the test running in the background while you explore and look for a fix. +The test is paused at the start, so you should step over or pause at a particular location +where the problem is most likely to be. + +Every action you perform with `playwright-cli` generates corresponding Playwright TypeScript code. +This code appears in the output and can be copied directly into the test. Most of the time, a specific locator or an expectation should be updated, but it could also be a bug in the app. Use your judgement. + +After fixing the test, stop the background test run. Rerun to check that test passes. diff --git a/.opencode/skills/playwright-cli/references/request-mocking.md b/.opencode/skills/playwright-cli/references/request-mocking.md new file mode 100644 index 0000000..9005fda --- /dev/null +++ b/.opencode/skills/playwright-cli/references/request-mocking.md @@ -0,0 +1,87 @@ +# Request Mocking + +Intercept, mock, modify, and block network requests. + +## CLI Route Commands + +```bash +# Mock with custom status +playwright-cli route "**/*.jpg" --status=404 + +# Mock with JSON body +playwright-cli route "**/api/users" --body='[{"id":1,"name":"Alice"}]' --content-type=application/json + +# Mock with custom headers +playwright-cli route "**/api/data" --body='{"ok":true}' --header="X-Custom: value" + +# Remove headers from requests +playwright-cli route "**/*" --remove-header=cookie,authorization + +# List active routes +playwright-cli route-list + +# Remove a route or all routes +playwright-cli unroute "**/*.jpg" +playwright-cli unroute +``` + +## URL Patterns + +``` +**/api/users - Exact path match +**/api/*/details - Wildcard in path +**/*.{png,jpg,jpeg} - Match file extensions +**/search?q=* - Match query parameters +``` + +## Advanced Mocking with run-code + +For conditional responses, request body inspection, response modification, or delays: + +### Conditional Response Based on Request + +```bash +playwright-cli run-code "async page => { + await page.route('**/api/login', route => { + const body = route.request().postDataJSON(); + if (body.username === 'admin') { + route.fulfill({ body: JSON.stringify({ token: 'mock-token' }) }); + } else { + route.fulfill({ status: 401, body: JSON.stringify({ error: 'Invalid' }) }); + } + }); +}" +``` + +### Modify Real Response + +```bash +playwright-cli run-code "async page => { + await page.route('**/api/user', async route => { + const response = await route.fetch(); + const json = await response.json(); + json.isPremium = true; + await route.fulfill({ response, json }); + }); +}" +``` + +### Simulate Network Failures + +```bash +playwright-cli run-code "async page => { + await page.route('**/api/offline', route => route.abort('internetdisconnected')); +}" +# Options: connectionrefused, timedout, connectionreset, internetdisconnected +``` + +### Delayed Response + +```bash +playwright-cli run-code "async page => { + await page.route('**/api/slow', async route => { + await new Promise(r => setTimeout(r, 3000)); + route.fulfill({ body: JSON.stringify({ data: 'loaded' }) }); + }); +}" +``` diff --git a/.opencode/skills/playwright-cli/references/running-code.md b/.opencode/skills/playwright-cli/references/running-code.md new file mode 100644 index 0000000..98b541f --- /dev/null +++ b/.opencode/skills/playwright-cli/references/running-code.md @@ -0,0 +1,241 @@ +# Running Custom Playwright Code + +Use `run-code` to execute arbitrary Playwright code for advanced scenarios not covered by CLI commands. + +## Syntax + +```bash +playwright-cli run-code "async page => { + // Your Playwright code here + // Access page.context() for browser context operations +}" +``` + +You can also load the function from a file: + +```bash +playwright-cli run-code --filename=./my-script.js +``` + + +The code must be a single function expression, it is wrapped in `(...)` and evaluated. +import/export/require syntax is not supported. + +## Geolocation + +```bash +# Grant geolocation permission and set location +playwright-cli run-code "async page => { + await page.context().grantPermissions(['geolocation']); + await page.context().setGeolocation({ latitude: 37.7749, longitude: -122.4194 }); +}" + +# Set location to London +playwright-cli run-code "async page => { + await page.context().grantPermissions(['geolocation']); + await page.context().setGeolocation({ latitude: 51.5074, longitude: -0.1278 }); +}" + +# Clear geolocation override +playwright-cli run-code "async page => { + await page.context().clearPermissions(); +}" +``` + +## Permissions + +```bash +# Grant multiple permissions +playwright-cli run-code "async page => { + await page.context().grantPermissions([ + 'geolocation', + 'notifications', + 'camera', + 'microphone' + ]); +}" + +# Grant permissions for specific origin +playwright-cli run-code "async page => { + await page.context().grantPermissions(['clipboard-read'], { + origin: 'https://example.com' + }); +}" +``` + +## Media Emulation + +```bash +# Emulate dark color scheme +playwright-cli run-code "async page => { + await page.emulateMedia({ colorScheme: 'dark' }); +}" + +# Emulate light color scheme +playwright-cli run-code "async page => { + await page.emulateMedia({ colorScheme: 'light' }); +}" + +# Emulate reduced motion +playwright-cli run-code "async page => { + await page.emulateMedia({ reducedMotion: 'reduce' }); +}" + +# Emulate print media +playwright-cli run-code "async page => { + await page.emulateMedia({ media: 'print' }); +}" +``` + +## Wait Strategies + +```bash +# Wait for network idle +playwright-cli run-code "async page => { + await page.waitForLoadState('networkidle'); +}" + +# Wait for specific element +playwright-cli run-code "async page => { + await page.locator('.loading').waitFor({ state: 'hidden' }); +}" + +# Wait for function to return true +playwright-cli run-code "async page => { + await page.waitForFunction(() => window.appReady === true); +}" + +# Wait with timeout +playwright-cli run-code "async page => { + await page.locator('.result').waitFor({ timeout: 10000 }); +}" +``` + +## Frames and Iframes + +```bash +# Work with iframe +playwright-cli run-code "async page => { + const frame = page.locator('iframe#my-iframe').contentFrame(); + await frame.locator('button').click(); +}" + +# Get all frames +playwright-cli run-code "async page => { + const frames = page.frames(); + return frames.map(f => f.url()); +}" +``` + +## File Downloads + +```bash +# Handle file download +playwright-cli run-code "async page => { + const downloadPromise = page.waitForEvent('download'); + await page.getByRole('link', { name: 'Download' }).click(); + const download = await downloadPromise; + await download.saveAs('./downloaded-file.pdf'); + return download.suggestedFilename(); +}" +``` + +## Clipboard + +```bash +# Read clipboard (requires permission) +playwright-cli run-code "async page => { + await page.context().grantPermissions(['clipboard-read']); + return await page.evaluate(() => navigator.clipboard.readText()); +}" + +# Write to clipboard +playwright-cli run-code "async page => { + await page.evaluate(text => navigator.clipboard.writeText(text), 'Hello clipboard!'); +}" +``` + +## Page Information + +```bash +# Get page title +playwright-cli run-code "async page => { + return await page.title(); +}" + +# Get current URL +playwright-cli run-code "async page => { + return page.url(); +}" + +# Get page content +playwright-cli run-code "async page => { + return await page.content(); +}" + +# Get viewport size +playwright-cli run-code "async page => { + return page.viewportSize(); +}" +``` + +## JavaScript Execution + +```bash +# Execute JavaScript and return result +playwright-cli run-code "async page => { + return await page.evaluate(() => { + return { + userAgent: navigator.userAgent, + language: navigator.language, + cookiesEnabled: navigator.cookieEnabled + }; + }); +}" + +# Pass arguments to evaluate +playwright-cli run-code "async page => { + const multiplier = 5; + return await page.evaluate(m => document.querySelectorAll('li').length * m, multiplier); +}" +``` + +## Error Handling + +```bash +# Try-catch in run-code +playwright-cli run-code "async page => { + try { + await page.getByRole('button', { name: 'Submit' }).click({ timeout: 1000 }); + return 'clicked'; + } catch (e) { + return 'element not found'; + } +}" +``` + +## Complex Workflows + +```bash +# Login and save state +playwright-cli run-code "async page => { + await page.goto('https://example.com/login'); + await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com'); + await page.getByRole('textbox', { name: 'Password' }).fill('secret'); + await page.getByRole('button', { name: 'Sign in' }).click(); + await page.waitForURL('**/dashboard'); + await page.context().storageState({ path: 'auth.json' }); + return 'Login successful'; +}" + +# Scrape data from multiple pages +playwright-cli run-code "async page => { + const results = []; + for (let i = 1; i <= 3; i++) { + await page.goto(\`https://example.com/page/\${i}\`); + const items = await page.locator('.item').allTextContents(); + results.push(...items); + } + return results; +}" +``` diff --git a/.opencode/skills/playwright-cli/references/session-management.md b/.opencode/skills/playwright-cli/references/session-management.md new file mode 100644 index 0000000..bf39acd --- /dev/null +++ b/.opencode/skills/playwright-cli/references/session-management.md @@ -0,0 +1,225 @@ +# Browser Session Management + +Run multiple isolated browser sessions concurrently with state persistence. + +## Named Browser Sessions + +Use `-s` flag to isolate browser contexts: + +```bash +# Browser 1: Authentication flow +playwright-cli -s=auth open https://app.example.com/login + +# Browser 2: Public browsing (separate cookies, storage) +playwright-cli -s=public open https://example.com + +# Commands are isolated by browser session +playwright-cli -s=auth fill e1 "user@example.com" +playwright-cli -s=public snapshot +``` + +## Browser Session Isolation Properties + +Each browser session has independent: +- Cookies +- LocalStorage / SessionStorage +- IndexedDB +- Cache +- Browsing history +- Open tabs + +## Browser Session Commands + +```bash +# List all browser sessions +playwright-cli list + +# Stop a browser session (close the browser) +playwright-cli close # stop the default browser +playwright-cli -s=mysession close # stop a named browser + +# Stop all browser sessions +playwright-cli close-all + +# Forcefully kill all daemon processes (for stale/zombie processes) +playwright-cli kill-all + +# Delete browser session user data (profile directory) +playwright-cli delete-data # delete default browser data +playwright-cli -s=mysession delete-data # delete named browser data +``` + +## Environment Variable + +Set a default browser session name via environment variable: + +```bash +export PLAYWRIGHT_CLI_SESSION="mysession" +playwright-cli open example.com # Uses "mysession" automatically +``` + +## Common Patterns + +### Concurrent Scraping + +```bash +#!/bin/bash +# Scrape multiple sites concurrently + +# Start all browsers +playwright-cli -s=site1 open https://site1.com & +playwright-cli -s=site2 open https://site2.com & +playwright-cli -s=site3 open https://site3.com & +wait + +# Take snapshots from each +playwright-cli -s=site1 snapshot +playwright-cli -s=site2 snapshot +playwright-cli -s=site3 snapshot + +# Cleanup +playwright-cli close-all +``` + +### A/B Testing Sessions + +```bash +# Test different user experiences +playwright-cli -s=variant-a open "https://app.com?variant=a" +playwright-cli -s=variant-b open "https://app.com?variant=b" + +# Compare +playwright-cli -s=variant-a screenshot +playwright-cli -s=variant-b screenshot +``` + +### Persistent Profile + +By default, browser profile is kept in memory only. Use `--persistent` flag on `open` to persist the browser profile to disk: + +```bash +# Use persistent profile (auto-generated location) +playwright-cli open https://example.com --persistent + +# Use persistent profile with custom directory +playwright-cli open https://example.com --profile=/path/to/profile +``` + +## Attaching to a Running Browser + +Use `attach` to connect to a browser that is already running, instead of launching a new one. + +### Attach by channel name + +Connect to a running Chrome or Edge instance by its channel name. The browser must have remote debugging enabled — navigate to `chrome://inspect/#remote-debugging` in the target browser and check "Allow remote debugging for this browser instance". + +```bash +# Attach to Chrome +playwright-cli attach --cdp=chrome + +# Attach to Chrome Canary +playwright-cli attach --cdp=chrome-canary + +# Attach to Microsoft Edge +playwright-cli attach --cdp=msedge + +# Attach to Edge Dev +playwright-cli attach --cdp=msedge-dev +``` + +Supported channels: `chrome`, `chrome-beta`, `chrome-dev`, `chrome-canary`, `msedge`, `msedge-beta`, `msedge-dev`, `msedge-canary`. + +When `--session` is not provided, the session is named after the channel (e.g. `--cdp=msedge` creates a session called `msedge`), so parallel attaches to Chrome and Edge don't collide on `default`. Pass `--session=` to override. + +### Attach via CDP endpoint + +Connect to a browser that exposes a Chrome DevTools Protocol endpoint: + +```bash +playwright-cli attach --cdp=http://localhost:9222 +``` + +### Attach via browser extension + +Connect to a browser with the Playwright extension installed: + +```bash +playwright-cli attach --extension +``` + +### Detach + +Tear down an attached session without affecting the external browser: + +```bash +# Detach the default attached session +playwright-cli detach + +# Detach a specific attached session +playwright-cli -s=msedge detach +``` + +`detach` only works on sessions created via `attach`. For sessions created via `open`, use `close`. + +## Default Browser Session + +When `-s` is omitted, commands use the default browser session: + +```bash +# These use the same default browser session +playwright-cli open https://example.com +playwright-cli snapshot +playwright-cli close # Stops default browser +``` + +## Browser Session Configuration + +Configure a browser session with specific settings when opening: + +```bash +# Open with config file +playwright-cli open https://example.com --config=.playwright/my-cli.json + +# Open with specific browser +playwright-cli open https://example.com --browser=firefox + +# Open in headed mode +playwright-cli open https://example.com --headed + +# Open with persistent profile +playwright-cli open https://example.com --persistent +``` + +## Best Practices + +### 1. Name Browser Sessions Semantically + +```bash +# GOOD: Clear purpose +playwright-cli -s=github-auth open https://github.com +playwright-cli -s=docs-scrape open https://docs.example.com + +# AVOID: Generic names +playwright-cli -s=s1 open https://github.com +``` + +### 2. Always Clean Up + +```bash +# Stop browsers when done +playwright-cli -s=auth close +playwright-cli -s=scrape close + +# Or stop all at once +playwright-cli close-all + +# If browsers become unresponsive or zombie processes remain +playwright-cli kill-all +``` + +### 3. Delete Stale Browser Data + +```bash +# Remove old browser data to free disk space +playwright-cli -s=oldsession delete-data +``` diff --git a/.opencode/skills/playwright-cli/references/storage-state.md b/.opencode/skills/playwright-cli/references/storage-state.md new file mode 100644 index 0000000..bb5021a --- /dev/null +++ b/.opencode/skills/playwright-cli/references/storage-state.md @@ -0,0 +1,275 @@ +# Storage Management + +Manage cookies, localStorage, sessionStorage, and browser storage state. + +## Storage State + +Save and restore complete browser state including cookies and storage. + +### Save Storage State + +```bash +# Save to auto-generated filename (storage-state-{timestamp}.json) +playwright-cli state-save + +# Save to specific filename +playwright-cli state-save my-auth-state.json +``` + +### Restore Storage State + +```bash +# Load storage state from file +playwright-cli state-load my-auth-state.json + +# Reload page to apply cookies +playwright-cli open https://example.com +``` + +### Storage State File Format + +The saved file contains: + +```json +{ + "cookies": [ + { + "name": "session_id", + "value": "abc123", + "domain": "example.com", + "path": "/", + "expires": 1893456000, + "httpOnly": true, + "secure": true, + "sameSite": "Lax" + } + ], + "origins": [ + { + "origin": "https://example.com", + "localStorage": [ + { "name": "theme", "value": "dark" }, + { "name": "user_id", "value": "12345" } + ] + } + ] +} +``` + +## Cookies + +### List All Cookies + +```bash +playwright-cli cookie-list +``` + +### Filter Cookies by Domain + +```bash +playwright-cli cookie-list --domain=example.com +``` + +### Filter Cookies by Path + +```bash +playwright-cli cookie-list --path=/api +``` + +### Get Specific Cookie + +```bash +playwright-cli cookie-get session_id +``` + +### Set a Cookie + +```bash +# Basic cookie +playwright-cli cookie-set session abc123 + +# Cookie with options +playwright-cli cookie-set session abc123 --domain=example.com --path=/ --httpOnly --secure --sameSite=Lax + +# Cookie with expiration (Unix timestamp) +playwright-cli cookie-set remember_me token123 --expires=1893456000 +``` + +### Delete a Cookie + +```bash +playwright-cli cookie-delete session_id +``` + +### Clear All Cookies + +```bash +playwright-cli cookie-clear +``` + +### Advanced: Multiple Cookies or Custom Options + +For complex scenarios like adding multiple cookies at once, use `run-code`: + +```bash +playwright-cli run-code "async page => { + await page.context().addCookies([ + { name: 'session_id', value: 'sess_abc123', domain: 'example.com', path: '/', httpOnly: true }, + { name: 'preferences', value: JSON.stringify({ theme: 'dark' }), domain: 'example.com', path: '/' } + ]); +}" +``` + +## Local Storage + +### List All localStorage Items + +```bash +playwright-cli localstorage-list +``` + +### Get Single Value + +```bash +playwright-cli localstorage-get token +``` + +### Set Value + +```bash +playwright-cli localstorage-set theme dark +``` + +### Set JSON Value + +```bash +playwright-cli localstorage-set user_settings '{"theme":"dark","language":"en"}' +``` + +### Delete Single Item + +```bash +playwright-cli localstorage-delete token +``` + +### Clear All localStorage + +```bash +playwright-cli localstorage-clear +``` + +### Advanced: Multiple Operations + +For complex scenarios like setting multiple values at once, use `run-code`: + +```bash +playwright-cli run-code "async page => { + await page.evaluate(() => { + localStorage.setItem('token', 'jwt_abc123'); + localStorage.setItem('user_id', '12345'); + localStorage.setItem('expires_at', Date.now() + 3600000); + }); +}" +``` + +## Session Storage + +### List All sessionStorage Items + +```bash +playwright-cli sessionstorage-list +``` + +### Get Single Value + +```bash +playwright-cli sessionstorage-get form_data +``` + +### Set Value + +```bash +playwright-cli sessionstorage-set step 3 +``` + +### Delete Single Item + +```bash +playwright-cli sessionstorage-delete step +``` + +### Clear sessionStorage + +```bash +playwright-cli sessionstorage-clear +``` + +## IndexedDB + +### List Databases + +```bash +playwright-cli run-code "async page => { + return await page.evaluate(async () => { + const databases = await indexedDB.databases(); + return databases; + }); +}" +``` + +### Delete Database + +```bash +playwright-cli run-code "async page => { + await page.evaluate(() => { + indexedDB.deleteDatabase('myDatabase'); + }); +}" +``` + +## Common Patterns + +### Authentication State Reuse + +```bash +# Step 1: Login and save state +playwright-cli open https://app.example.com/login +playwright-cli snapshot +playwright-cli fill e1 "user@example.com" +playwright-cli fill e2 "password123" +playwright-cli click e3 + +# Save the authenticated state +playwright-cli state-save auth.json + +# Step 2: Later, restore state and skip login +playwright-cli state-load auth.json +playwright-cli open https://app.example.com/dashboard +# Already logged in! +``` + +### Save and Restore Roundtrip + +```bash +# Set up authentication state +playwright-cli open https://example.com +playwright-cli eval "() => { document.cookie = 'session=abc123'; localStorage.setItem('user', 'john'); }" + +# Save state to file +playwright-cli state-save my-session.json + +# ... later, in a new session ... + +# Restore state +playwright-cli state-load my-session.json +playwright-cli open https://example.com +# Cookies and localStorage are restored! +``` + +## Security Notes + +- Never commit storage state files containing auth tokens +- Add `*.auth-state.json` to `.gitignore` +- Delete state files after automation completes +- Use environment variables for sensitive data +- By default, sessions run in-memory mode which is safer for sensitive operations diff --git a/.opencode/skills/playwright-cli/references/test-generation.md b/.opencode/skills/playwright-cli/references/test-generation.md new file mode 100644 index 0000000..35a8d57 --- /dev/null +++ b/.opencode/skills/playwright-cli/references/test-generation.md @@ -0,0 +1,433 @@ +# Test generation (plan → generate → heal) + +End-to-end workflow for authoring and maintaining Playwright tests with `playwright-cli`. Every `playwright-cli` action emits the equivalent Playwright TypeScript, and that generated code is the raw material for every test. The sections below can be used independently: + +- **How generation works** — the core mechanic everything else relies on: actions become TypeScript, plus how to add assertions. +- **Plan** — explore the app, produce a spec file describing what to test. +- **Generate** — turn a spec into Playwright test files. Update the spec if it's vague or stale. +- **Heal** — diagnose failing tests, fix the code, reconcile the spec with reality. + +Plan / generate / heal lean on the same mechanic: run `npx playwright test --debug=cli` in the background, then `playwright-cli attach tw-XXXX` to drive the paused page interactively. See [playwright-tests.md](playwright-tests.md) for the debug/attach mechanics. + +--- + +## 0. How generation works + +Every action you perform with `playwright-cli` generates corresponding Playwright TypeScript code. This code appears in the output and can be copied directly into your test files. + +```bash +# Start a session +playwright-cli open https://example.com/login + +# Take a snapshot to see elements +playwright-cli snapshot +# Output shows: e1 [textbox "Email"], e2 [textbox "Password"], e3 [button "Sign In"] + +# Fill form fields - generates code automatically +playwright-cli fill e1 "user@example.com" +# Ran Playwright code: +# await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com'); + +playwright-cli fill e2 "password123" +# Ran Playwright code: +# await page.getByRole('textbox', { name: 'Password' }).fill('password123'); + +playwright-cli click e3 +# Ran Playwright code: +# await page.getByRole('button', { name: 'Sign In' }).click(); +``` + +### Building a test file + +Collect the generated code into a Playwright test: + +```typescript +import { test, expect } from '@playwright/test'; + +test('login flow', async ({ page }) => { + // Generated code from playwright-cli session: + await page.goto('https://example.com/login'); + await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com'); + await page.getByRole('textbox', { name: 'Password' }).fill('password123'); + await page.getByRole('button', { name: 'Sign In' }).click(); + + // Add assertions + await expect(page).toHaveURL(/.*dashboard/); +}); +``` + +### Use semantic locators + +The generated code uses role-based locators when possible, which are more resilient: + +```typescript +// Generated (good - semantic) +await page.getByRole('button', { name: 'Submit' }).click(); + +// Avoid (fragile - CSS selectors) +await page.locator('#submit-btn').click(); +``` + +### Explore before recording + +Take snapshots to understand the page structure before recording actions: + +```bash +playwright-cli open https://example.com +playwright-cli snapshot +# Review the element structure +playwright-cli click e5 +``` + +### Add assertions manually + +Generated code captures actions but not assertions. Add expectations in your test using one of the recommended matchers: + +- `toBeVisible()` — element is rendered and visible +- `toHaveText(text)` — element text content matches +- `toHaveValue(value) / toBeEmpty()` — input/select value matches +- `toBeChecked() / toBeUnchecked()` — checkbox state matches +- `toMatchAriaSnapshot(snapshot)` — page (or locator) matches a partial accessibility snapshot + +Use `playwright-cli generate-locator ` to produce the locator expression for the assertion, and the snapshot/eval commands to capture the expected value. + +When asserting text content, make sure that generated locator does not contain text from the element itself. `getByTestId()` or `getByLabel()` usually work well with asserting text. When locator is text-based, prefer `toBeVisible()` instead. + +Snapshot to be matched does not have to contain all the information - only capture what's necessary for the assertion. You can use regular expressions for unstable values. + +```bash +# Get a stable locator for an element ref to use in the assertion +playwright-cli --raw generate-locator e5 +# getByRole('button', { name: 'Submit' }) + +# Capture expected text content for toHaveText +playwright-cli --raw eval "el => el.textContent" e5 + +# Capture expected input value for toHaveValue/toBeEmpty +playwright-cli --raw eval "el => el.value" e5 + +# Capture expected aria snapshot for toMatchAriaSnapshot/toBeChecked +# (whole page, or use a ref to scope to a region) +playwright-cli --raw snapshot +playwright-cli --raw snapshot e5 +``` + +```typescript +// Generated action +await page.getByRole('button', { name: 'Submit' }).click(); + +// Manual assertions using the outputs above: +await expect(page.getByRole('alert', { name: 'Success' })).toBeVisible(); +await expect(page.getByTestId('main-header')).toHaveText('Welcome, user'); +await expect(page.getByRole('textbox', { name: 'Email' })).toHaveValue('user@example.com'); +await expect(page.getByRole('checkbox', { name: 'Enable notifications' })).toBeChecked(); + +// toMatchAriaSnapshot on the whole page, finds a matching region +await expect(page).toMatchAriaSnapshot(` + - heading "Welcome, user" + - link /\\d+ new messages?/ + - button "Sign out" +`); + +// toMatchAriaSnapshot scoped to a region +await expect(page.getByRole('navigation')).toMatchAriaSnapshot(` + - link "Home" + - link /\\d+ new messages?/ + - link "Profile" +`); +``` + +--- + +## 1. Planning + +Goal: produce a spec file (e.g. `specs/.plan.md`) that enumerates the scenarios to test. **Always** write the spec to a file. + +### 1.1 Prerequisite: workspace + +Check the workspace has Playwright installed before anything else: + +```bash +# Either of these confirms a workspace: +test -f playwright.config.ts || test -f playwright.config.js +npx --no-install playwright --version +``` + +If there is no Playwright install, bootstrap one and let the user pick the defaults: + +```bash +npm init playwright@latest +``` + +### 1.2 Prerequisite: seed test + +A **seed test** is a minimal test that lands the page in the state every scenario starts from: navigation to the app, any required login, feature flags, etc. Scenarios assume a fresh start *after* the seed. `--debug=cli` pauses *inside* this test, so the seed is where every planning and generation session begins. + +Minimum viable seed: + +```ts +// tests/seed.spec.ts +import { test } from '@playwright/test'; + +test('seed', async ({ page }) => { + await page.goto('https://example.com/'); +}); +``` + +Preferred — push navigation into a fixture so scenario tests reuse it: + +```ts +// tests/fixtures.ts +import { test as baseTest } from '@playwright/test'; +export { expect } from '@playwright/test'; + +export const test = baseTest.extend({ + page: async ({ page }, use) => { + await page.goto('https://example.com/'); + await use(page); + }, +}); +``` + +```ts +// tests/seed.spec.ts +import { test } from './fixtures'; + +test('seed', async ({ page }) => { + // Fixture already navigates. This empty body tells agents where to start. +}); +``` + +If no seed exists, create one that at least navigates to the app. + +### 1.3 Explore the app + +Launch the app via the seed in the background and attach: + +```bash +PLAYWRIGHT_HTML_OPEN=never npx playwright test tests/seed.spec.ts --debug=cli +# wait for "Debugging Instructions" and the session name tw-XXXX +playwright-cli attach tw-XXXX +``` + +Resume so the seed runs, then probe the app: + +```bash +playwright-cli resume # resume so that seed test runs fully +playwright-cli snapshot # inventory of interactive elements +playwright-cli click e5 # follow a flow +playwright-cli eval "location.href" # read URL / state +playwright-cli show --annotate # ask the user to point at something +``` + +Map out: + +- Interactive surfaces (forms, buttons, lists, filters, modals). +- Primary user journeys end-to-end. +- Edge cases: empty states, validation errors, very long input, boundary values. +- Persistence: reload, local/session storage, URL fragments. +- Navigation: which controls change the URL, back/forward behaviour. + +**Important**: Do not just open the app url with playwright-cli, always go through the test to capture any custom setup done there. +**Important**: Stop the background test when done exploring. + +### 1.4 Write the spec file + +Save under `specs/.plan.md`. Use this structure: + +```markdown +# Test Plan + +## Application Overview + + + +## Test Scenarios + +### 1. + +**Seed:** `tests/seed.spec.ts` + +#### 1.1. + +**File:** `tests//.spec.ts` + +**Steps:** + 1. + - expect: + - expect: + 2. + - expect: + +#### 1.2. +... + +### 2. + +**Seed:** `tests/seed.spec.ts` +... +``` + +Guidelines: + +- Each scenario is independent and starts from the seed's fresh state — never chain scenarios. +- Scenario names are kebab-case and match the test file name (`should-add-single-todo` → `should-add-single-todo.spec.ts`). +- Cover happy path, edge cases, validation, negative flows, persistence. +- Write steps at the user level ("Type 'Buy milk' into the input"), not the API level ("call `fill`"). +- Put observable outcomes in `- expect:` bullets; each becomes an assertion during generation. + +--- + +## 2. Generate + +Goal: take a spec file and produce Playwright test files. Optionally update the spec if it has drifted. + +### 2.1 Inputs + +- **Spec file**, e.g. `specs/basic-operations.plan.md`. +- **Target**: either a single scenario (e.g. `1.2`), a whole group (`1`), or all. +- **Seed file**, read from the `**Seed:**` line of the scenario's group. + +### 2.2 Generate one scenario + +For each target scenario, in sequence (never in parallel — scenarios share the seed session): + +```bash +PLAYWRIGHT_HTML_OPEN=never npx playwright test --debug=cli # background +playwright-cli attach tw-XXXX +# resume +``` + +**Do not** just open the app url with playwright-cli, always go through the test to capture any custom setup done there. + +Walk the scenario's `Steps:` one by one with `playwright-cli`, treating the spec as the plan and the live app as the source of truth. If a step is vague ("click the button" — which button?), references an element that no longer exists, or contradicts the app's actual behaviour, use your judgement: update the spec to match what the app really does, then keep going. Editing the spec mid-generation is expected. + +Every action prints the equivalent Playwright TypeScript (see [How generation works](#0-how-generation-works)): + +```bash +playwright-cli snapshot # find refs +playwright-cli fill e3 "John Doe" # -> page.getByRole('textbox', {...}).fill(...) +playwright-cli press Enter +playwright-cli click e7 +``` + +For each `- expect:` bullet, add an explicit assertion. See [How generation works](#0-how-generation-works) for details. + +Collect the generated code and write the test file at the path given in the spec: + +```ts +// spec: specs/basic-operations.plan.md +// seed: tests/seed.spec.ts +import { test, expect } from './fixtures'; // or '@playwright/test' if no fixtures file + +test.describe('Signing in and out', () => { + test('should sign in', async ({ page }) => { + // 1. Navigate to the application + // (handled by the seed fixture) + + // 2. Type 'John Doe' into the username field + await page.getByRole('textbox', { name: 'username' }).fill('John Doe'); + + // 3. Type password + await page.getByRole('textbox', { name: 'password' }).fill('TestPassword'); + + // 4. Press Enter to submit + await page.getByRole('textbox', { name: 'password' }).press('Enter'); + + await expect(page.getByRole('heading')).toContainText('Welcome, John Doe!'); + }); +}); +``` + +Rules: + +- **One test per file.** File path, describe name, and test name come verbatim from the spec (minus the ordinal). +- Prefix each numbered step with a `// N. ` comment before its actions. +- Use the describe group name verbatim from the spec (no `1.` ordinal). +- Import from `./fixtures` if the project has one; otherwise `@playwright/test`. +- **Important**: close the CLI session and stop the background test before moving to the next scenario. + +### 2.3 Generate multiple scenarios + +Loop 2.2 over the targeted scenarios one at a time, restarting the seed between each so every test starts from a clean page. This is safe to parallelise due to unique generated session names - just make sure each test run is stopped. + +### 2.4 Run generated tests + +After generation, run the new tests once: + +```bash +PLAYWRIGHT_HTML_OPEN=never npx playwright test tests//.spec.ts +``` + +Any failure goes to Section 3. + +--- + +## 3. Heal + +Goal: fix failing tests, and update the spec if the app's intended behaviour changed. + +### 3.1 Find failing tests + +```bash +PLAYWRIGHT_HTML_OPEN=never npx playwright test +``` + +Record the list of failing `:` entries and process them one at a time. Do not attempt parallel fixes — shared state and the single CLI session make that fragile. + +### 3.2 Debug one failure + +Run the single failing test in debug mode in the background, then attach: + +```bash +PLAYWRIGHT_HTML_OPEN=never npx playwright test tests//.spec.ts: --debug=cli +# wait for "Debugging Instructions" and the tw-XXXX session name +playwright-cli attach tw-XXXX +``` + +The test is paused at the start. Step forward or run to until just before the failing action or assertion, then diagnose: + +```bash +playwright-cli snapshot # did the element change / move / rename? +playwright-cli console # app-side errors? +playwright-cli requests # failed request? wrong payload? +playwright-cli show --annotate # ask the user to point somewhere +``` + +Common causes: selector drift, new wrapper element, label/ARIA rename, timing (transition, async load), assertion text updated in the app, test data leaking between runs. + +Rehearse the corrected interaction with `playwright-cli` — the generated code in the output is what you paste back into the test. + +### 3.3 Apply the fix + +Edit the test file: update the locator, assertion, step order, or inputs to match the corrected behaviour. Stop the background debug run. Rerun the single test to confirm green. + +Never skip hooks or add sleeps as a fix. Never use `networkidle`. + +### 3.4 Reconcile with the spec + +Open the spec referenced by the `// spec:` header in the test file and locate the scenario that matches the test. + +- **Fix was purely technical** (locator drift, better assertion shape) and the spec's user-level behaviour still matches the app → leave the spec alone. +- **Fix changed user-visible steps, inputs, order, or expected outcomes** that the spec describes → update the spec to match reality. Keep the scenario id and file path stable; only the step / expect lines change. +- **Unclear whether the app change is intentional** (spec is stale) **or a regression** (test was right, app is wrong) → **stop and ask the user**. Provide: + - the scenario id (e.g. `2.3`), + - the spec lines that no longer match, + - the observed app behaviour (quote a snapshot excerpt or a concrete outcome). + +Only after the user answers, either update the spec (intentional change) or file/flag the test as covering a bug (regression). + +### 3.5 Iteration and giving up + +- Fix failures one at a time; rerun after each. +- If after thorough investigation you are confident the test is correct but the app is wrong *and* the user has confirmed it's a bug: mark the test `test.fixme(...)` with a comment pointing at the user's decision or issue link. Never silently skip. + +--- + +## Cross-references + +| For... | See | +|---|---| +| `--debug=cli` / attach mechanics | [playwright-tests.md](playwright-tests.md) | +| Mocking requests during exploration/generation | [request-mocking.md](request-mocking.md) | +| Managing the CLI browser session | [session-management.md](session-management.md) | diff --git a/.opencode/skills/playwright-cli/references/tracing.md b/.opencode/skills/playwright-cli/references/tracing.md new file mode 100644 index 0000000..7ce7bab --- /dev/null +++ b/.opencode/skills/playwright-cli/references/tracing.md @@ -0,0 +1,139 @@ +# Tracing + +Capture detailed execution traces for debugging and analysis. Traces include DOM snapshots, screenshots, network activity, and console logs. + +## Basic Usage + +```bash +# Start trace recording +playwright-cli tracing-start + +# Perform actions +playwright-cli open https://example.com +playwright-cli click e1 +playwright-cli fill e2 "test" + +# Stop trace recording +playwright-cli tracing-stop +``` + +## Trace Output Files + +When you start tracing, Playwright creates a `traces/` directory with several files: + +### `trace-{timestamp}.trace` + +**Action log** - The main trace file containing: +- Every action performed (clicks, fills, navigations) +- DOM snapshots before and after each action +- Screenshots at each step +- Timing information +- Console messages +- Source locations + +### `trace-{timestamp}.network` + +**Network log** - Complete network activity: +- All HTTP requests and responses +- Request headers and bodies +- Response headers and bodies +- Timing (DNS, connect, TLS, TTFB, download) +- Resource sizes +- Failed requests and errors + +### `resources/` + +**Resources directory** - Cached resources: +- Images, fonts, stylesheets, scripts +- Response bodies for replay +- Assets needed to reconstruct page state + +## What Traces Capture + +| Category | Details | +|----------|---------| +| **Actions** | Clicks, fills, hovers, keyboard input, navigations | +| **DOM** | Full DOM snapshot before/after each action | +| **Screenshots** | Visual state at each step | +| **Network** | All requests, responses, headers, bodies, timing | +| **Console** | All console.log, warn, error messages | +| **Timing** | Precise timing for each operation | + +## Use Cases + +### Debugging Failed Actions + +```bash +playwright-cli tracing-start +playwright-cli open https://app.example.com + +# This click fails - why? +playwright-cli click e5 + +playwright-cli tracing-stop +# Open trace to see DOM state when click was attempted +``` + +### Analyzing Performance + +```bash +playwright-cli tracing-start +playwright-cli open https://slow-site.com +playwright-cli tracing-stop + +# View network waterfall to identify slow resources +``` + +### Capturing Evidence + +```bash +# Record a complete user flow for documentation +playwright-cli tracing-start + +playwright-cli open https://app.example.com/checkout +playwright-cli fill e1 "4111111111111111" +playwright-cli fill e2 "12/25" +playwright-cli fill e3 "123" +playwright-cli click e4 + +playwright-cli tracing-stop +# Trace shows exact sequence of events +``` + +## Trace vs Video vs Screenshot + +| Feature | Trace | Video | Screenshot | +|---------|-------|-------|------------| +| **Format** | .trace file | .webm video | .png/.jpeg image | +| **DOM inspection** | Yes | No | No | +| **Network details** | Yes | No | No | +| **Step-by-step replay** | Yes | Continuous | Single frame | +| **File size** | Medium | Large | Small | +| **Best for** | Debugging | Demos | Quick capture | + +## Best Practices + +### 1. Start Tracing Before the Problem + +```bash +# Trace the entire flow, not just the failing step +playwright-cli tracing-start +playwright-cli open https://example.com +# ... all steps leading to the issue ... +playwright-cli tracing-stop +``` + +### 2. Clean Up Old Traces + +Traces can consume significant disk space: + +```bash +# Remove traces older than 7 days +find .playwright-cli/traces -mtime +7 -delete +``` + +## Limitations + +- Traces add overhead to automation +- Large traces can consume significant disk space +- Some dynamic content may not replay perfectly diff --git a/.opencode/skills/playwright-cli/references/video-recording.md b/.opencode/skills/playwright-cli/references/video-recording.md new file mode 100644 index 0000000..5209d21 --- /dev/null +++ b/.opencode/skills/playwright-cli/references/video-recording.md @@ -0,0 +1,143 @@ +# Video Recording + +Capture browser automation sessions as video for debugging, documentation, or verification. Produces WebM (VP8/VP9 codec). + +## Basic Recording + +```bash +# Open browser first +playwright-cli open + +# Start recording +playwright-cli video-start demo.webm + +# Add a chapter marker for section transitions +playwright-cli video-chapter "Getting Started" --description="Opening the homepage" --duration=2000 + +# Navigate and perform actions +playwright-cli goto https://example.com +playwright-cli snapshot +playwright-cli click e1 + +# Add another chapter +playwright-cli video-chapter "Filling Form" --description="Entering test data" --duration=2000 +playwright-cli fill e2 "test input" + +# Stop and save +playwright-cli video-stop +``` + +## Best Practices + +### 1. Use Descriptive Filenames + +```bash +# Include context in filename +playwright-cli video-start recordings/login-flow-2024-01-15.webm +playwright-cli video-start recordings/checkout-test-run-42.webm +``` + +### 2. Record entire hero scripts. + +When recording a video for the user or as a proof of work, it is best to create a code snippet and execute it with run-code. +It allows inserting appropriate pauses between the actions and annotating the video. There are new Playwright APIs for that. + +1) Perform scenario using CLI and take note of all locators and actions. You'll need those locators to request their bounding boxes for highlight. +2) Create a file with the intended script for video (below). Use pressSequentially w/ delay for nice typing, make reasonable pauses. +3) Use playwright-cli run-code --filename your-script.js + +**Important**: Overlays are `pointer-events: none` — they do not interfere with page interactions. You can safely keep sticky overlays visible while clicking, filling, or performing any actions on the page. + +```js +async page => { + await page.screencast.start({ path: 'video.webm', size: { width: 1280, height: 800 } }); + await page.goto('https://demo.playwright.dev/todomvc'); + + // Show a chapter card — blurs the page and shows a dialog. + // Blocks until duration expires, then auto-removes. + // Use this for simple use cases, but always feel free to hand-craft your own beautiful + // overlay via await page.screencast.showOverlay(). + await page.screencast.showChapter('Adding Todo Items', { + description: 'We will add several items to the todo list.', + duration: 2000, + }); + + // Perform action + await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Walk the dog', { delay: 60 }); + await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter'); + await page.waitForTimeout(1000); + + // Show next chapter + await page.screencast.showChapter('Verifying Results', { + description: 'Checking the item appeared in the list.', + duration: 2000, + }); + + // Add a sticky annotation that stays while you perform actions. + // Overlays are pointer-events: none, so they won't block clicks. + const annotation = await page.screencast.showOverlay(` +
+ ✓ Item added successfully +
+ `); + + // Perform more actions while the annotation is visible + await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Buy groceries', { delay: 60 }); + await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter'); + await page.waitForTimeout(1500); + + // Remove the annotation when done + await annotation.dispose(); + + // You can also highlight relevant locators and provide contextual annotations. + const bounds = await page.getByText('Walk the dog').boundingBox(); + await page.screencast.showOverlay(` +
+
+
Check it out, it is right above this text +
+ `, { duration: 2000 }); + + await page.screencast.stop(); +} +``` + +Embrace creativity, overlays are powerful. + +### Overlay API Summary + +| Method | Use Case | +|--------|----------| +| `page.screencast.showChapter(title, { description?, duration?, styleSheet? })` | Full-screen chapter card with blurred backdrop — ideal for section transitions | +| `page.screencast.showOverlay(html, { duration? })` | Custom HTML overlay — use for callouts, labels, highlights | +| `disposable.dispose()` | Remove a sticky overlay added without duration | +| `page.screencast.hideOverlays()` / `page.screencast.showOverlays()` | Temporarily hide/show all overlays | + +## Tracing vs Video + +| Feature | Video | Tracing | +|---------|-------|---------| +| Output | WebM file | Trace file (viewable in Trace Viewer) | +| Shows | Visual recording | DOM snapshots, network, console, actions | +| Use case | Demos, documentation | Debugging, analysis | +| Size | Larger | Smaller | + +## Limitations + +- Recording adds slight overhead to automation +- Large recordings can consume significant disk space diff --git a/backend/api/auth_api.py b/backend/api/auth_api.py index ea79d47..c5d5924 100644 --- a/backend/api/auth_api.py +++ b/backend/api/auth_api.py @@ -52,6 +52,9 @@ E2E_DELETE_PIN = '5678' E2E_CC_EMAIL = 'e2e-cc@test.com' E2E_CC_PASSWORD = 'E2eCCPass1!' E2E_CC_PIN = '3456' +E2E_TUTORIAL_EMAIL = 'e2e-tutorial@test.com' +E2E_TUTORIAL_PASSWORD = 'E2eTutorialPass1!' +E2E_TUTORIAL_PIN = '7890' def send_verification_email(to_email, token): @@ -499,6 +502,7 @@ def e2e_create_delete_user(): verified=True, role='user', pin=E2E_DELETE_PIN, + tutorial_enabled=False, ) users_db.insert(user.to_dict()) return jsonify({'email': norm_email}), 201 @@ -524,6 +528,33 @@ def e2e_create_cc_user(): verified=True, role='user', pin=E2E_CC_PIN, + tutorial_enabled=False, + ) + users_db.insert(user.to_dict()) + return jsonify({'email': norm_email}), 201 + + +@auth_api.route('/e2e-create-tutorial-user', methods=['POST']) +def e2e_create_tutorial_user(): + """Create an isolated e2e test user for tutorial tests. Only available outside production.""" + if os.environ.get('DB_ENV', 'prod') == 'prod': + return jsonify({'error': 'Not available in production'}), 403 + + norm_email = normalize_email(E2E_TUTORIAL_EMAIL) + # Clean up any children from previous tutorial runs. + existing = users_db.get(UserQuery.email == norm_email) + if existing: + child_db.remove(Query().user_id == existing.get('id')) + users_db.remove(UserQuery.email == norm_email) + user = User( + first_name='E2E', + last_name='Tutorial', + email=norm_email, + password=generate_password_hash(E2E_TUTORIAL_PASSWORD), + verified=True, + role='user', + pin=E2E_TUTORIAL_PIN, + tutorial_enabled=False, ) users_db.insert(user.to_dict()) return jsonify({'email': norm_email}), 201 @@ -562,6 +593,7 @@ def e2e_seed(): verified=True, role='user', pin=E2E_TEST_PIN, + tutorial_enabled=False, ) users_db.insert(user.to_dict()) diff --git a/frontend/e2e/.auth/user-cc.json b/frontend/e2e/.auth/user-cc.json index ddfd585..0326907 100644 --- a/frontend/e2e/.auth/user-cc.json +++ b/frontend/e2e/.auth/user-cc.json @@ -2,20 +2,20 @@ "cookies": [ { "name": "refresh_token", - "value": "G_lq6dT7MCHBDgoW18PimjumaPeyWi7hRSwj2WKA_JI", + "value": "QRDDJrwVfrRB_5Z--i4k48Q4-0kktQnZJelqd9JABBQ", "domain": "localhost", "path": "/api/auth", - "expires": 1791672153.30646, + "expires": 1791758861.201632, "httpOnly": true, "secure": true, "sameSite": "Strict" }, { "name": "access_token", - "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS1jY0B0ZXN0LmNvbSIsInVzZXJfaWQiOiJkMWU3MzM3OC04N2I4LTQ2ZjQtYmE2ZC1hMDdhYjE0YjFkOWUiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3ODM5MDY5NTN9.9GiSopufAFJ7qa9Cu0AhYpUDfempiYayhLaYIA_IoSc", + "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS1jY0B0ZXN0LmNvbSIsInVzZXJfaWQiOiIyNjU1MGUxZS00NTBiLTRmMzMtOGI3MC02NjA1MGU2MzZkNzgiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3ODM5OTM2NjF9.pZegL2iwonftDyVlaADPhHeTPrx7VKkoi8TtDY3Byuk", "domain": "localhost", "path": "/", - "expires": 1783906953.306413, + "expires": 1783993661.201585, "httpOnly": true, "secure": true, "sameSite": "Lax" @@ -27,11 +27,11 @@ "localStorage": [ { "name": "authSyncEvent", - "value": "{\"type\":\"logout\",\"at\":1783896153166}" + "value": "{\"type\":\"logout\",\"at\":1783982861064}" }, { "name": "parentAuth", - "value": "{\"expiresAt\":1784068953466}" + "value": "{\"expiresAt\":1784155661355}" } ] } diff --git a/frontend/e2e/.auth/user-delete.json b/frontend/e2e/.auth/user-delete.json index eeebc47..32dab55 100644 --- a/frontend/e2e/.auth/user-delete.json +++ b/frontend/e2e/.auth/user-delete.json @@ -2,20 +2,20 @@ "cookies": [ { "name": "refresh_token", - "value": "fgz_j-G_5UJ-xLf2dJBqcrtiWJkC3amMr8Y90dx_Kdo", + "value": "QCQAmUFxc_xNvuLjIGYO4HL49nrDnWW2K54jTZT3ZBw", "domain": "localhost", "path": "/api/auth", - "expires": 1791672153.435032, + "expires": 1791758861.100584, "httpOnly": true, "secure": true, "sameSite": "Strict" }, { "name": "access_token", - "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS1kZWxldGVAdGVzdC5jb20iLCJ1c2VyX2lkIjoiYjExZTViNzItNGJlOC00YmY1LTk0ODYtMjE2Nzc5ZGU4Y2ViIiwidG9rZW5fdmVyc2lvbiI6MCwiZXhwIjoxNzgzOTA2OTUzfQ.rTfjAYCaaRGAtRrP3eOegQNkIq_o7kTIgvGW9Sn3bO0", + "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS1kZWxldGVAdGVzdC5jb20iLCJ1c2VyX2lkIjoiZjkyN2FjMzItZDE3ZC00MjhhLWI5YTgtYTQ5NjM5YjE4YTgzIiwidG9rZW5fdmVyc2lvbiI6MCwiZXhwIjoxNzgzOTkzNjYxfQ.GE6KZ4PXLwLsF8HYZckYwvBruIBMNqVxY-Yg94_QBcU", "domain": "localhost", "path": "/", - "expires": 1783906953.43499, + "expires": 1783993661.100535, "httpOnly": true, "secure": true, "sameSite": "Lax" @@ -27,11 +27,11 @@ "localStorage": [ { "name": "authSyncEvent", - "value": "{\"type\":\"logout\",\"at\":1783896153271}" + "value": "{\"type\":\"logout\",\"at\":1783982860894}" }, { "name": "parentAuth", - "value": "{\"expiresAt\":1784068953610}" + "value": "{\"expiresAt\":1784155661256}" } ] } diff --git a/frontend/e2e/.auth/user-tutorial.json b/frontend/e2e/.auth/user-tutorial.json new file mode 100644 index 0000000..585b268 --- /dev/null +++ b/frontend/e2e/.auth/user-tutorial.json @@ -0,0 +1,39 @@ +{ + "cookies": [ + { + "name": "refresh_token", + "value": "xQQnxda8ujhjlZDBQ2Rl4Xxlh4X2_Kt1e80YSWniAXA", + "domain": "localhost", + "path": "/api/auth", + "expires": 1791760814.863417, + "httpOnly": true, + "secure": true, + "sameSite": "Strict" + }, + { + "name": "access_token", + "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS10dXRvcmlhbEB0ZXN0LmNvbSIsInVzZXJfaWQiOiIzNWI3ZGVjMS01ODNmLTQ5M2YtYTQ5ZS1mNWM0NzM3YTQ5NzgiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3ODM5OTU2MTR9.KWJqO7mVswb5IoHsJOOdZSm8iCmYoNVXwixDsQ8lbmI", + "domain": "localhost", + "path": "/", + "expires": 1783995614.863369, + "httpOnly": true, + "secure": true, + "sameSite": "Lax" + } + ], + "origins": [ + { + "origin": "https://localhost:5173", + "localStorage": [ + { + "name": "authSyncEvent", + "value": "{\"type\":\"logout\",\"at\":1783984814749}" + }, + { + "name": "parentAuth", + "value": "{\"expiresAt\":1784157614996}" + } + ] + } + ] +} \ No newline at end of file diff --git a/frontend/e2e/.auth/user.json b/frontend/e2e/.auth/user.json index 443aa49..bca56c6 100644 --- a/frontend/e2e/.auth/user.json +++ b/frontend/e2e/.auth/user.json @@ -2,20 +2,20 @@ "cookies": [ { "name": "refresh_token", - "value": "5-wHHNkUIcILfUZqXFDTiggTIE4F_rhifieI07DQ6WQ", + "value": "zFYZnbIZmC4uH9DcQ3PO8WPPAy_IOts57gvbCMERHvw", "domain": "localhost", "path": "/api/auth", - "expires": 1791672151.681425, + "expires": 1791760813.448801, "httpOnly": true, "secure": true, "sameSite": "Strict" }, { "name": "access_token", - "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZUB0ZXN0LmNvbSIsInVzZXJfaWQiOiIyNTgxZmQwOS05OTMxLTQ3ZTctYmRkYi00MjEwZmQxM2U1MDkiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3ODM5MDY5NTF9.8qvDLe203vx2YOUnzAoOmBDcT6uov4HhsM5o00UseMg", + "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZUB0ZXN0LmNvbSIsInVzZXJfaWQiOiIzNDkyZjAyMi0yMDdiLTRjMjMtYWFlYy1lMmNjNzc0N2IxYjAiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3ODM5OTU2MTN9.PM5XaijvAuzEPSY3Mz1DB1jvYTJDeaMhGZnrYukUJ0Q", "domain": "localhost", "path": "/", - "expires": 1783906951.68138, + "expires": 1783995613.448755, "httpOnly": true, "secure": true, "sameSite": "Lax" @@ -27,11 +27,11 @@ "localStorage": [ { "name": "authSyncEvent", - "value": "{\"type\":\"logout\",\"at\":1783896151561}" + "value": "{\"type\":\"logout\",\"at\":1783984813329}" }, { "name": "parentAuth", - "value": "{\"expiresAt\":1784068951811}" + "value": "{\"expiresAt\":1784157613579}" } ] } diff --git a/frontend/e2e/auth-tutorial.setup.ts b/frontend/e2e/auth-tutorial.setup.ts new file mode 100644 index 0000000..491158a --- /dev/null +++ b/frontend/e2e/auth-tutorial.setup.ts @@ -0,0 +1,47 @@ +import { test as setup } from '@playwright/test' +import { + STORAGE_STATE_TUTORIAL, + E2E_TUTORIAL_EMAIL, + E2E_TUTORIAL_PASSWORD, + E2E_TUTORIAL_PIN, +} from './e2e-constants' + +const BACKEND = 'http://localhost:5000' + +setup('authenticate tutorial user', async ({ page }) => { + // Create the isolated tutorial-test user (separate from the main E2E user) + const createRes = await page.request.post(`${BACKEND}/auth/e2e-create-tutorial-user`) + if (!createRes.ok()) { + throw new Error( + `e2e-create-tutorial-user failed: ${createRes.status()} ${await createRes.text()}`, + ) + } + + await page.goto('/auth/login') + await page.getByLabel('Email address').fill(E2E_TUTORIAL_EMAIL) + await page.getByLabel('Password').fill(E2E_TUTORIAL_PASSWORD) + await page.getByRole('button', { name: 'Sign in' }).click() + + await page.waitForURL(/\/(parent|child)/) + + await page.getByRole('button', { name: 'Parent login' }).click() + + const pinInput = page.getByPlaceholder('4–6 digits') + await pinInput.waitFor({ timeout: 5000 }) + await pinInput.fill(E2E_TUTORIAL_PIN) + await page.getByLabel('Stay in parent mode on this device').check() + await page.getByRole('button', { name: 'OK' }).click() + + await page.waitForURL(/\/parent(\/|$)/) + + try { + await page.getByRole('button', { name: 'Add Child' }).waitFor({ timeout: 5000 }) + } catch { + await page.screenshot({ path: 'auth-setup-tutorial-parent-fail.png' }) + throw new Error( + 'Tutorial user parent mode not reached after PIN entry. See auth-setup-tutorial-parent-fail.png for details.', + ) + } + + await page.context().storageState({ path: STORAGE_STATE_TUTORIAL }) +}) diff --git a/frontend/e2e/e2e-constants.ts b/frontend/e2e/e2e-constants.ts index faa6247..3d931e6 100644 --- a/frontend/e2e/e2e-constants.ts +++ b/frontend/e2e/e2e-constants.ts @@ -3,6 +3,7 @@ export const STORAGE_STATE_NO_PIN = 'e2e/.auth/user-no-pin.json' export const STORAGE_STATE_TEMP_PARENT = 'e2e/.auth/user-temp-parent.json' export const STORAGE_STATE_DELETE = 'e2e/.auth/user-delete.json' export const STORAGE_STATE_CC = 'e2e/.auth/user-cc.json' +export const STORAGE_STATE_TUTORIAL = 'e2e/.auth/user-tutorial.json' export const E2E_EMAIL = 'e2e@test.com' export const E2E_PASSWORD = 'E2eTestPass1!' export const E2E_PIN = '1234' @@ -13,3 +14,6 @@ export const E2E_DELETE_PIN = '5678' export const E2E_CC_EMAIL = 'e2e-cc@test.com' export const E2E_CC_PASSWORD = 'E2eCCPass1!' export const E2E_CC_PIN = '3456' +export const E2E_TUTORIAL_EMAIL = 'e2e-tutorial@test.com' +export const E2E_TUTORIAL_PASSWORD = 'E2eTutorialPass1!' +export const E2E_TUTORIAL_PIN = '7890' diff --git a/frontend/e2e/mode_parent/create-child/validation.spec.ts b/frontend/e2e/mode_parent/create-child/validation.spec.ts index 974b39f..4ef72cb 100644 --- a/frontend/e2e/mode_parent/create-child/validation.spec.ts +++ b/frontend/e2e/mode_parent/create-child/validation.spec.ts @@ -14,6 +14,11 @@ test.describe('Create Child', () => { // Navigate to parent list and wait for it to fully load before clicking Add Child await gotoParentList(page) + // Dismiss tutorial overlay if present — it intercepts pointer events + const skip = page.getByRole('button', { name: 'Skip tour' }) + if (await skip.isVisible({ timeout: 1000 }).catch(() => false)) { + await skip.click() + } await page.getByRole('button', { name: 'Add Child' }).click() await expect(page.getByRole('heading', { name: 'Create Child' })).toBeVisible() }) @@ -30,7 +35,7 @@ test.describe('Create Child', () => { test('Reject submission when Name is whitespace only', async ({ page }) => { // 2. Enter only spaces in Name, enter '7' in Age - Create remains disabled const createButton = page.getByRole('button', { name: 'Create' }) - await page.getByLabel('Name').fill(' ') + await page.getByRole('textbox', { name: 'Name' }).fill(' ') await page.getByLabel('Age').fill('7') await expect(createButton).toBeDisabled() @@ -39,7 +44,7 @@ test.describe('Create Child', () => { test('Reject submission when Age is empty', async ({ page }) => { // 2. Enter 'Charlie', clear Age - Create button should be disabled - await page.getByLabel('Name').fill('Charlie') + await page.getByRole('textbox', { name: 'Name' }).fill('Charlie') await page.getByLabel('Age').clear() await expect(page.getByRole('button', { name: 'Create' })).toBeDisabled() @@ -49,7 +54,7 @@ test.describe('Create Child', () => { test('Reject negative age', async ({ page }) => { // 2. Enter 'Dave', enter '-1' - Create remains disabled const createButton = page.getByRole('button', { name: 'Create' }) - await page.getByLabel('Name').fill('Dave') + await page.getByRole('textbox', { name: 'Name' }).fill('Dave') await page.getByLabel('Age').fill('-1') await expect(createButton).toBeDisabled() @@ -57,7 +62,7 @@ test.describe('Create Child', () => { }) test('Enforce maximum Name length of 64 characters', async ({ page, request }) => { - const nameInput = page.getByLabel('Name') + const nameInput = page.getByRole('textbox', { name: 'Name' }) const ageInput = page.getByLabel('Age') const createButton = page.getByRole('button', { name: 'Create' }) @@ -85,7 +90,7 @@ test.describe('Create Child', () => { test('Reject age greater than 120', async ({ page }) => { // 2. Enter 'Eve', enter '121' in Age - Create button should be disabled - await page.getByLabel('Name').fill('Eve') + await page.getByRole('textbox', { name: 'Name' }).fill('Eve') await page.getByLabel('Age').fill('121') await expect(page.getByRole('button', { name: 'Create' })).toBeDisabled() diff --git a/frontend/e2e/mode_parent/notifications/push-subscription.spec.ts b/frontend/e2e/mode_parent/notifications/push-subscription.spec.ts index 7695818..7ca1318 100644 --- a/frontend/e2e/mode_parent/notifications/push-subscription.spec.ts +++ b/frontend/e2e/mode_parent/notifications/push-subscription.spec.ts @@ -9,6 +9,17 @@ function pushToggle(page: Page) { .locator('button.toggle-btn') } +async function openNotificationsSection(page: Page): Promise { + const header = page + .locator('.profile-section') + .filter({ has: page.locator('.section-title', { hasText: 'Notifications' }) }) + .locator('.section-header') + if ((await header.getAttribute('aria-expanded')) === 'false') { + await header.click() + } + await page.locator('#section-notifications').waitFor({ state: 'visible' }) +} + test.describe('Push subscription registration', () => { // ------------------------------------------------------------------------- // 1.3 No subscription POST when notification permission not granted @@ -26,6 +37,7 @@ test.describe('Push subscription registration', () => { }) await page.goto('/parent/profile') + await openNotificationsSection(page) const toggle = pushToggle(page) await expect(toggle).toBeVisible({ timeout: 5000 }) const isDisabled = await toggle.isDisabled().catch(() => false) diff --git a/frontend/e2e/mode_parent/notifications/user-profile-notification-settings.spec.ts b/frontend/e2e/mode_parent/notifications/user-profile-notification-settings.spec.ts index 4c5dd41..b7b160f 100644 --- a/frontend/e2e/mode_parent/notifications/user-profile-notification-settings.spec.ts +++ b/frontend/e2e/mode_parent/notifications/user-profile-notification-settings.spec.ts @@ -16,6 +16,17 @@ function pushToggle(page: Page) { .locator('button.toggle-btn') } +async function openNotificationsSection(page: Page): Promise { + const header = page + .locator('.profile-section') + .filter({ has: page.locator('.section-title', { hasText: 'Notifications' }) }) + .locator('.section-header') + if ((await header.getAttribute('aria-expanded')) === 'false') { + await header.click() + } + await page.locator('#section-notifications').waitFor({ state: 'visible' }) +} + test.describe('User Profile Notification Settings', () => { test.describe.configure({ mode: 'serial' }) @@ -24,6 +35,7 @@ test.describe('User Profile Notification Settings', () => { // --------------------------------------------------------------------------- test('Email Digest toggle is visible on User Profile page', async ({ page }) => { await page.goto('/parent/profile') + await openNotificationsSection(page) await expect(digestToggle(page)).toBeVisible({ timeout: 5000 }) }) @@ -34,11 +46,13 @@ test.describe('User Profile Notification Settings', () => { // Set known state: enabled await request.put('/api/user/profile', { data: { email_digest_enabled: true } }) await page.goto('/parent/profile') + await openNotificationsSection(page) await expect(digestToggle(page)).toHaveAttribute('aria-pressed', 'true', { timeout: 5000 }) // Set known state: disabled await request.put('/api/user/profile', { data: { email_digest_enabled: false } }) await page.reload() + await openNotificationsSection(page) await expect(digestToggle(page)).toHaveAttribute('aria-pressed', 'false', { timeout: 5000 }) // Restore default @@ -51,6 +65,7 @@ test.describe('User Profile Notification Settings', () => { test('Toggling Email Digest off sends correct API payload', async ({ page, request }) => { await request.put('/api/user/profile', { data: { email_digest_enabled: true } }) await page.goto('/parent/profile') + await openNotificationsSection(page) // Wait for profile to load and toggle to reflect server state await expect(digestToggle(page)).toHaveAttribute('aria-pressed', 'true', { timeout: 5000 }) @@ -64,9 +79,7 @@ test.describe('User Profile Notification Settings', () => { await digestToggle(page).click() - // Submit the form (Save button) - await page.getByRole('button', { name: 'Save' }).click() - + // Toggles auto-save; wait for the PUT and verify the payload. await page.waitForTimeout(500) expect(capturedBody).not.toBeNull() expect((capturedBody as Record)['email_digest_enabled']).toBe(false) @@ -82,6 +95,7 @@ test.describe('User Profile Notification Settings', () => { test('Toggling Email Digest on sends correct API payload', async ({ page, request }) => { await request.put('/api/user/profile', { data: { email_digest_enabled: false } }) await page.goto('/parent/profile') + await openNotificationsSection(page) // Wait for profile to load and toggle to reflect server state await expect(digestToggle(page)).toHaveAttribute('aria-pressed', 'false', { timeout: 5000 }) @@ -94,7 +108,6 @@ test.describe('User Profile Notification Settings', () => { }) await digestToggle(page).click() - await page.getByRole('button', { name: 'Save' }).click() await page.waitForTimeout(500) expect(capturedBody).not.toBeNull() @@ -110,6 +123,7 @@ test.describe('User Profile Notification Settings', () => { // --------------------------------------------------------------------------- test('Push Notifications toggle is visible on User Profile page', async ({ page }) => { await page.goto('/parent/profile') + await openNotificationsSection(page) await expect(pushToggle(page)).toBeVisible({ timeout: 5000 }) }) @@ -121,6 +135,7 @@ test.describe('User Profile Notification Settings', () => { }) => { // Do NOT grant notifications permission — toggle should start unchecked await page.goto('/parent/profile') + await openNotificationsSection(page) const toggle = pushToggle(page) await expect(toggle).toBeVisible({ timeout: 5000 }) // Either aria-pressed="false" or disabled (when browser denies permissions) @@ -138,6 +153,7 @@ test.describe('User Profile Notification Settings', () => { // Do not grant permission (leave as denied/prompt) await context.clearPermissions() await page.goto('/parent/profile') + await openNotificationsSection(page) const toggle = pushToggle(page) await expect(toggle).toBeVisible({ timeout: 5000 }) // When permission is denied, the toggle should be disabled or aria-pressed="false" diff --git a/frontend/e2e/mode_parent/profile-button/profile-button-temporary.spec.ts b/frontend/e2e/mode_parent/profile-button/profile-button-temporary.spec.ts index 74ff88d..3084c97 100644 --- a/frontend/e2e/mode_parent/profile-button/profile-button-temporary.spec.ts +++ b/frontend/e2e/mode_parent/profile-button/profile-button-temporary.spec.ts @@ -4,6 +4,11 @@ import { E2E_PIN } from '../../e2e-constants' test.describe('Parent profile button – temporary parent mode', () => { test.beforeEach(async ({ page }) => { await page.goto('/parent') + // Dismiss tutorial overlay if present — it intercepts pointer events + const skip = page.getByRole('button', { name: 'Skip tour' }) + if (await skip.isVisible({ timeout: 1000 }).catch(() => false)) { + await skip.click() + } // Switch from permanent mode to temporary mode: // 1. Exit parent mode via Child Mode await page.getByRole('button', { name: 'Parent menu' }).click() diff --git a/frontend/e2e/mode_parent/profile-button/profile-button.spec.ts b/frontend/e2e/mode_parent/profile-button/profile-button.spec.ts index add0564..efa0014 100644 --- a/frontend/e2e/mode_parent/profile-button/profile-button.spec.ts +++ b/frontend/e2e/mode_parent/profile-button/profile-button.spec.ts @@ -4,6 +4,11 @@ import { E2E_EMAIL, E2E_FIRST_NAME, E2E_PIN } from '../../e2e-constants' test.describe('Parent profile button – permanent parent mode', () => { test.beforeEach(async ({ page }) => { await page.goto('/parent') + // Dismiss tutorial overlay if present — it intercepts pointer events + const skip = page.getByRole('button', { name: 'Skip tour' }) + if (await skip.isVisible({ timeout: 1000 }).catch(() => false)) { + await skip.click() + } }) test('Badge – shows 🔒 in permanent parent mode', async ({ page }) => { @@ -23,7 +28,7 @@ test.describe('Parent profile button – permanent parent mode', () => { await page.getByRole('menuitem', { name: 'Profile' }).click() await expect(page).toHaveURL(/\/parent\/profile/) - await expect(page.getByRole('heading', { name: 'User Profile' })).toBeVisible() + await expect(page.getByRole('heading', { name: 'Profile' })).toBeVisible() }) test('Menu – Child Mode exits parent mode', async ({ page }) => { diff --git a/frontend/e2e/mode_parent/tutorial/tutorial.spec.ts b/frontend/e2e/mode_parent/tutorial/tutorial.spec.ts new file mode 100644 index 0000000..1b6573c --- /dev/null +++ b/frontend/e2e/mode_parent/tutorial/tutorial.spec.ts @@ -0,0 +1,380 @@ +import { test, expect, type APIRequestContext, type Page } from '@playwright/test' + +const BACKEND = 'http://localhost:5000' + +async function setTutorialEnabled(request: APIRequestContext, enabled: boolean): Promise { + const res = await request.patch(`${BACKEND}/user/tutorial-progress`, { + data: { enabled }, + }) + if (!res.ok()) { + throw new Error( + `Failed to set tutorial enabled=${enabled}: ${res.status()} ${await res.text()}`, + ) + } +} + +async function resetTutorialProgress(request: APIRequestContext): Promise { + const res = await request.patch(`${BACKEND}/user/tutorial-progress`, { + data: { reset: true }, + }) + if (!res.ok()) { + throw new Error(`Failed to reset tutorial progress: ${res.status()} ${await res.text()}`) + } +} + +async function deleteAllChildren(request: APIRequestContext): Promise { + const listRes = await request.get(`${BACKEND}/child/list`) + const data = await listRes.json() + for (const child of data.children ?? []) { + await request.delete(`${BACKEND}/child/${child.id}`) + } +} + +async function createChild(request: APIRequestContext, name: string, age: number): Promise { + const res = await request.put(`${BACKEND}/child/add`, { + data: { name, age, image_id: 'boy01' }, + }) + if (!res.ok()) { + throw new Error(`Failed to create child ${name}: ${res.status()} ${await res.text()}`) + } + // /child/add returns a message but not the created child, so read the list. + const id = await getFirstChildId(request) + if (!id) { + throw new Error(`Child ${name} was not found after creation`) + } + return id +} + +async function getFirstChildId(request: APIRequestContext): Promise { + const res = await request.get(`${BACKEND}/child/list`) + const data = await res.json() + return data.children?.[0]?.id ?? null +} + +async function ensureChild(request: APIRequestContext, name: string, age: number): Promise { + const existingId = await getFirstChildId(request) + if (existingId) return existingId + return createChild(request, name, age) +} + +async function getFirstChoreId(request: APIRequestContext): Promise { + const res = await request.get(`${BACKEND}/chore/list`) + const data = await res.json() + return data.tasks?.[0]?.id ?? null +} + +async function createChore( + request: APIRequestContext, + name: string, + points: number, +): Promise { + const res = await request.put(`${BACKEND}/chore/add`, { + data: { name, points, image_id: 'boy01' }, + }) + if (!res.ok()) { + throw new Error(`Failed to create chore ${name}: ${res.status()} ${await res.text()}`) + } + const id = await getFirstChoreId(request) + if (!id) { + throw new Error(`Chore ${name} was not found after creation`) + } + return id +} + +async function assignChoreToChild( + request: APIRequestContext, + childId: string, + choreId: string, +): Promise { + const res = await request.post(`${BACKEND}/child/${childId}/assign-task`, { + data: { task_id: choreId }, + }) + if (!res.ok()) { + throw new Error( + `Failed to assign chore ${choreId} to child ${childId}: ${res.status()} ${await res.text()}`, + ) + } +} + +async function createRoutine( + request: APIRequestContext, + name: string, + points: number, +): Promise { + const res = await request.put(`${BACKEND}/routine/add`, { + data: { name, points, image_id: 'boy01' }, + }) + if (!res.ok()) { + throw new Error(`Failed to create routine ${name}: ${res.status()} ${await res.text()}`) + } + const data = await res.json() + const id = data.routine?.id + if (!id) { + throw new Error(`Routine ${name} was not found after creation`) + } + return id +} + +async function assignRoutineToChild( + request: APIRequestContext, + childId: string, + routineId: string, +): Promise { + const res = await request.post(`${BACKEND}/child/${childId}/assign-routine`, { + data: { routine_id: routineId }, + }) + if (!res.ok()) { + throw new Error( + `Failed to assign routine ${routineId} to child ${childId}: ${res.status()} ${await res.text()}`, + ) + } +} + +function getTutorialCard(page: Page) { + return page.locator('.tutorial-root .card') +} + +function getTutorialTitle(page: Page) { + return page.locator('.tutorial-root .card .title') +} + +async function expectTutorialCard(page: Page, title: string): Promise { + await expect(getTutorialCard(page)).toBeVisible({ timeout: 10000 }) + await expect(getTutorialTitle(page)).toHaveText(title) +} + +async function dismissTutorial(page: Page): Promise { + const card = getTutorialCard(page) + if (await card.isVisible({ timeout: 1000 }).catch(() => false)) { + // Use "Skip tour" to clear the active step and drain the queue in one + // action, avoiding chained steps that would keep the card visible. + await page.locator('.tutorial-root .btn-skip').click() + await expect(card).not.toBeVisible({ timeout: 5000 }) + } +} + +async function clickTutorialNext(page: Page): Promise { + await page.locator('.tutorial-root .btn-primary').click() +} + +/** + * Dismiss a tutorial by clicking the primary button repeatedly until the card + * disappears. This walks through any chained steps without setting sessionSkipped. + */ +async function dismissTutorialChain(page: Page, maxClicks = 10): Promise { + const card = getTutorialCard(page) + for (let i = 0; i < maxClicks; i++) { + if (!(await card.isVisible().catch(() => false))) return + await page.locator('.tutorial-root .btn-primary').click() + await page.waitForTimeout(200) + } + await expect(card).not.toBeVisible({ timeout: 3000 }) +} + +test.describe('Tutorial system', () => { + // Tutorial state is global to the signed-in user; run these tests sequentially + // so parallel resets do not interfere with each other. + test.describe.configure({ mode: 'serial' }) + + test.beforeEach(async ({ request }) => { + await deleteAllChildren(request) + await setTutorialEnabled(request, false) + await resetTutorialProgress(request) + await setTutorialEnabled(request, true) + await resetTutorialProgress(request) + }) + + test.afterEach(async ({ page, request }) => { + await dismissTutorial(page) + await setTutorialEnabled(request, false) + await resetTutorialProgress(request) + }) + + test('children list shows create-child tutorial when no children exist', async ({ + page, + request, + }) => { + // Retry deletion + navigation so a concurrent test that creates a child + // does not leave us on the child-points tutorial instead of create-child. + await expect(async () => { + await deleteAllChildren(request) + await page.goto('/parent') + await expect(page).toHaveURL('/parent') + await expectTutorialCard(page, 'Add your child') + }).toPass({ timeout: 20000 }) + }) + + test('help button shows parent-children-list chain on the children list', async ({ + page, + request, + }) => { + const childName = 'TutorialKid' + await ensureChild(request, childName, 7) + await page.goto('/parent') + await expect(page).toHaveURL('/parent') + + // Wait for the child card to render ( tolerate duplicate names from repeat runs ). + await expect(page.getByText(childName, { exact: true }).first()).toBeVisible({ timeout: 10000 }) + + // The children list may auto-show a brief loading-state hint. Clear any + // active chain so the help button is reachable. + await dismissTutorialChain(page) + + await page.getByRole('button', { name: 'Show help for this screen' }).click() + + await expectTutorialCard(page, 'Your children') + await clickTutorialNext(page) + + await expectTutorialCard(page, 'Points') + await clickTutorialNext(page) + + await expectTutorialCard(page, 'Tap a child') + }) + + test('create chore form shows edit-chore-name tutorial', async ({ page }) => { + await page.goto('/parent/tasks/chores/create') + await expect(page).toHaveURL('/parent/tasks/chores/create') + await expectTutorialCard(page, 'Chore Name') + }) + + test('help button shows list-chore-help on the chore list', async ({ page }) => { + await page.goto('/parent/tasks/chores') + await expect(page).toHaveURL('/parent/tasks/chores') + + // No auto-shown tutorial should appear on this page. + await expect(getTutorialCard(page)).not.toBeVisible({ timeout: 3000 }) + + const helpButton = page.getByRole('button', { name: 'Show help for this screen' }) + await expect(helpButton).toBeVisible() + await helpButton.click() + + await expectTutorialCard(page, 'Create your chore') + }) + + test('help button chains through list-edit-hint on the chore list', async ({ page }) => { + await page.goto('/parent/tasks/chores') + await expect(page).toHaveURL('/parent/tasks/chores') + + await page.getByRole('button', { name: 'Show help for this screen' }).click() + await expectTutorialCard(page, 'Create your chore') + + await clickTutorialNext(page) + await expectTutorialCard(page, 'Edit items') + }) + + test('help button shows select-child on the child detail page', async ({ page, request }) => { + const childName = 'TutorialKid' + const childId = await ensureChild(request, childName, 7) + await page.goto(`/parent/${childId}`) + await expect(page).toHaveURL(`/parent/${childId}`) + + // Wait for the child data to load and the assign buttons to render. + await expect(page.getByText(childName, { exact: true }).first()).toBeVisible({ timeout: 10000 }) + await expect(page.getByRole('button', { name: 'Assign Chores' }).first()).toBeVisible({ + timeout: 10000, + }) + + // The page auto-shows select-child on first visit. Walk through the chain + // so the help button is reachable and sessionSkipped stays false. + await dismissTutorialChain(page) + + await page.getByRole('button', { name: 'Show help for this screen' }).click() + await expectTutorialCard(page, "This is your child's page") + + await clickTutorialNext(page) + await expectTutorialCard(page, 'Assign chores') + }) + + test('kebab menu on assigned chore shows chore-kebab-menu tutorial', async ({ + page, + request, + }) => { + const childName = 'TutorialKid' + const childId = await ensureChild(request, childName, 7) + const choreId = await createChore(request, 'TutorialChore', 10) + await assignChoreToChild(request, childId, choreId) + + await page.goto(`/parent/${childId}`) + await expect(page).toHaveURL(`/parent/${childId}`) + + // Wait for the child data and the assigned chore to render. + await expect(page.getByText(childName, { exact: true }).first()).toBeVisible({ timeout: 10000 }) + await expect(page.getByText('TutorialChore').first()).toBeVisible({ timeout: 10000 }) + + // Clear the auto-shown select-child chain. + await dismissTutorialChain(page) + + // Click the chore card to make it ready (reveals the kebab button). + await page.locator('.item-card').filter({ hasText: 'TutorialChore' }).first().click() + + // Click the kebab button and verify the chore kebab tutorial fires. + const kebabButton = page + .locator('.kebab-btn') + .filter({ has: page.locator('text=⋮') }) + .first() + await expect(kebabButton).toBeVisible({ timeout: 5000 }) + await kebabButton.click() + + await expectTutorialCard(page, 'Chore actions') + + await clickTutorialNext(page) + await expectTutorialCard(page, 'Edit points') + + await clickTutorialNext(page) + await expectTutorialCard(page, 'Change schedule') + }) + + test('kebab menu on assigned routine shows routine-kebab-menu tutorial', async ({ + page, + request, + }) => { + const childName = 'TutorialKid' + const childId = await ensureChild(request, childName, 7) + const routineId = await createRoutine(request, 'TutorialRoutine', 15) + await assignRoutineToChild(request, childId, routineId) + + await page.goto(`/parent/${childId}`) + await expect(page).toHaveURL(`/parent/${childId}`) + + // Wait for the child data and the assigned routine to render. + await expect(page.getByText(childName, { exact: true }).first()).toBeVisible({ timeout: 10000 }) + await expect(page.getByText('TutorialRoutine').first()).toBeVisible({ timeout: 10000 }) + + // Clear the auto-shown select-child chain. + await dismissTutorialChain(page) + + // Click the routine card to make it ready (reveals the kebab button). + await page.locator('.item-card').filter({ hasText: 'TutorialRoutine' }).first().click() + + // Click the kebab button and verify the routine kebab tutorial fires. + const kebabButton = page + .locator('.kebab-btn') + .filter({ has: page.locator('text=⋮') }) + .first() + await expect(kebabButton).toBeVisible({ timeout: 5000 }) + await kebabButton.click() + + await expectTutorialCard(page, 'Routine actions') + + await clickTutorialNext(page) + await expectTutorialCard(page, 'Edit routine') + + await clickTutorialNext(page) + await expectTutorialCard(page, 'Edit points') + + await clickTutorialNext(page) + await expectTutorialCard(page, 'Change schedule') + }) + + test('dismissing an auto-shown tutorial persists across reloads', async ({ page, request }) => { + await deleteAllChildren(request) + await page.goto('/parent') + await expectTutorialCard(page, 'Add your child') + + await page.locator('.tutorial-root .btn-primary').click() + await expect(getTutorialCard(page)).not.toBeVisible({ timeout: 5000 }) + + await page.reload() + await expect(getTutorialCard(page)).not.toBeVisible({ timeout: 3000 }) + }) +}) diff --git a/frontend/e2e/mode_parent/user-profile/change-pin.spec.ts b/frontend/e2e/mode_parent/user-profile/change-pin.spec.ts index 6f5de95..8cebbd7 100644 --- a/frontend/e2e/mode_parent/user-profile/change-pin.spec.ts +++ b/frontend/e2e/mode_parent/user-profile/change-pin.spec.ts @@ -6,6 +6,17 @@ import { E2E_PIN } from '../../e2e-constants' const BACKEND = 'http://localhost:5000' const NEW_PIN = '5678' +async function openAccountSection(page: import('@playwright/test').Page): Promise { + const accountHeader = page + .locator('.profile-section') + .filter({ has: page.locator('.section-title', { hasText: 'Account' }) }) + .locator('.section-header') + if ((await accountHeader.getAttribute('aria-expanded')) === 'false') { + await accountHeader.click() + } + await page.locator('#section-account').waitFor({ state: 'visible' }) +} + async function setPinDirectly(request: APIRequestContext, pin: string): Promise { // Request a new code, retrieve it via test endpoint, verify it, then set the pin await request.post(`${BACKEND}/user/request-pin-setup`) @@ -25,6 +36,7 @@ test.describe('User Profile – Change Parent PIN', () => { test('Change Parent PIN link navigates to PIN setup page', async ({ page }) => { await page.goto('/parent/profile') + await openAccountSection(page) await page.getByRole('button', { name: 'Change Parent PIN' }).click() @@ -35,6 +47,7 @@ test.describe('User Profile – Change Parent PIN', () => { test('Back from PIN setup page returns to profile', async ({ page }) => { // Navigate from the profile page so browser history exists await page.goto('/parent/profile') + await openAccountSection(page) await page.getByRole('button', { name: 'Change Parent PIN' }).click() await expect(page).toHaveURL(/\/parent\/pin-setup/) diff --git a/frontend/e2e/mode_parent/user-profile/delete-account.spec.ts b/frontend/e2e/mode_parent/user-profile/delete-account.spec.ts index c84af43..8ea3188 100644 --- a/frontend/e2e/mode_parent/user-profile/delete-account.spec.ts +++ b/frontend/e2e/mode_parent/user-profile/delete-account.spec.ts @@ -3,11 +3,23 @@ import { test, expect } from '@playwright/test' import { E2E_DELETE_EMAIL, E2E_DELETE_PASSWORD } from '../../e2e-constants' +async function openAccountSection(page: import('@playwright/test').Page): Promise { + const accountHeader = page + .locator('.profile-section') + .filter({ has: page.locator('.section-title', { hasText: 'Account' }) }) + .locator('.section-header') + if ((await accountHeader.getAttribute('aria-expanded')) === 'false') { + await accountHeader.click() + } + await page.locator('#section-account').waitFor({ state: 'visible' }) +} + test.describe('User Profile – Delete Account', () => { test.describe.configure({ mode: 'serial' }) test('Delete My Account opens confirmation dialog', async ({ page }) => { await page.goto('/parent/profile') + await openAccountSection(page) await page.getByRole('button', { name: 'Delete My Account' }).click() @@ -24,6 +36,7 @@ test.describe('User Profile – Delete Account', () => { test('Delete button stays disabled for incomplete email', async ({ page }) => { await page.goto('/parent/profile') + await openAccountSection(page) await page.getByRole('button', { name: 'Delete My Account' }).click() await expect(page.locator('.modal-title', { hasText: 'Delete Your Account?' })).toBeVisible() @@ -36,6 +49,7 @@ test.describe('User Profile – Delete Account', () => { test('Delete button enables when matching email is entered', async ({ page }) => { await page.goto('/parent/profile') + await openAccountSection(page) await page.getByRole('button', { name: 'Delete My Account' }).click() await expect(page.locator('.modal-title', { hasText: 'Delete Your Account?' })).toBeVisible() @@ -48,6 +62,7 @@ test.describe('User Profile – Delete Account', () => { test('Cancel closes the dialog without deleting the account', async ({ page }) => { await page.goto('/parent/profile') + await openAccountSection(page) await page.getByRole('button', { name: 'Delete My Account' }).click() await expect(page.locator('.modal-title', { hasText: 'Delete Your Account?' })).toBeVisible() @@ -57,12 +72,13 @@ test.describe('User Profile – Delete Account', () => { await expect( page.locator('.modal-title', { hasText: 'Delete Your Account?' }), ).not.toBeVisible() - await expect(page.getByRole('heading', { name: 'User Profile' })).toBeVisible() + await expect(page.getByRole('heading', { name: 'Profile' })).toBeVisible() await expect(page).toHaveURL(/\/parent\/profile/) }) test('Backdrop click does NOT close the delete dialog', async ({ page }) => { await page.goto('/parent/profile') + await openAccountSection(page) await page.getByRole('button', { name: 'Delete My Account' }).click() await expect(page.locator('.modal-title', { hasText: 'Delete Your Account?' })).toBeVisible() @@ -77,6 +93,7 @@ test.describe('User Profile – Delete Account', () => { page, }) => { await page.goto('/parent/profile') + await openAccountSection(page) await page.getByRole('button', { name: 'Delete My Account' }).click() await expect(page.locator('.modal-title', { hasText: 'Delete Your Account?' })).toBeVisible() diff --git a/frontend/e2e/mode_parent/user-profile/profile-editing.spec.ts b/frontend/e2e/mode_parent/user-profile/profile-editing.spec.ts index 177a353..7d9b460 100644 --- a/frontend/e2e/mode_parent/user-profile/profile-editing.spec.ts +++ b/frontend/e2e/mode_parent/user-profile/profile-editing.spec.ts @@ -32,11 +32,27 @@ async function restoreProfile(request: APIRequestContext, profile: ProfileData): }) } +/** Expand a collapsible profile section by its header title and wait for its content. */ +async function expandSection(page: import('@playwright/test').Page, title: string): Promise { + const header = page + .locator('.profile-section') + .filter({ has: page.locator('.section-title', { hasText: title }) }) + .locator('.section-header') + const expanded = await header.getAttribute('aria-expanded').catch(() => 'false') + if (expanded === 'false') { + await header.click() + } + await page.locator(`#section-${title.toLowerCase()}`).waitFor({ state: 'visible' }) +} + /** Navigate to /parent/profile and wait for the form to finish loading. */ async function gotoProfile(page: import('@playwright/test').Page): Promise { await page.goto('/parent/profile') // EntityEditForm hides the form behind v-if while loading=true; wait for it to render. await expect(page.getByLabel('First Name')).toBeVisible({ timeout: 10000 }) + // Expand sections that are collapsed by default so their fields/buttons are reachable. + await expandSection(page, 'Account') + await expandSection(page, 'Notifications') } test.describe('User Profile – editing', () => { @@ -55,7 +71,7 @@ test.describe('User Profile – editing', () => { test('Profile page loads with correct data', async ({ page }) => { await gotoProfile(page) - await expect(page.getByRole('heading', { name: 'User Profile' })).toBeVisible() + await expect(page.getByRole('heading', { name: 'Profile' })).toBeVisible() await expect(page.getByLabel('First Name')).toHaveValue(E2E_FIRST_NAME) await expect(page.getByLabel('Last Name')).toHaveValue('Tester') await expect(page.getByLabel('Email Address')).toHaveValue(E2E_EMAIL) @@ -69,82 +85,33 @@ test.describe('User Profile – editing', () => { await page.getByRole('menuitem', { name: 'Profile' }).click() await expect(page).toHaveURL('/parent/profile') - await page.getByRole('button', { name: 'Cancel' }).click() + // The profile view shows a header Back button (auto-save form has no Cancel). + await page.getByRole('button', { name: 'Back' }).click() await expect(page).toHaveURL('/parent') }) - test('Save is disabled when form is clean (not dirty)', async ({ page }) => { - await gotoProfile(page) - - await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled() - }) - - test('Save is disabled when First Name is empty', async ({ page }) => { - await gotoProfile(page) - - await page.getByLabel('First Name').fill('') - await page.getByLabel('First Name').blur() - - await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled() - }) - - test('Save is disabled when Last Name is empty', async ({ page }) => { - await gotoProfile(page) - - await page.getByLabel('Last Name').fill('') - await page.getByLabel('Last Name').blur() - - await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled() - }) - - test('Save is disabled when both name fields are empty', async ({ page }) => { - await gotoProfile(page) - - await page.getByLabel('First Name').fill('') - await page.getByLabel('Last Name').fill('') - - await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled() - }) - - test('Save enables when a name is changed', async ({ page }) => { - await gotoProfile(page) - - await page.getByLabel('First Name').fill('UpdatedE2E') - - await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled() - }) - - test('Save persists name changes and shows confirmation modal', async ({ page }) => { + test('Name changes auto-save on blur', async ({ page, request }) => { await gotoProfile(page) await page.getByLabel('First Name').fill('UpdatedE2E') await page.getByLabel('Last Name').fill('UpdatedTester') - await page.getByRole('button', { name: 'Save' }).click() + await page.getByLabel('Last Name').blur() - const dialog = page.locator('.modal-dialog') - await expect(dialog.locator('.modal-title', { hasText: 'Profile Updated' })).toBeVisible() - await expect(dialog.getByText('Your profile was updated successfully.')).toBeVisible() - await dialog.getByRole('button', { name: 'OK' }).click() + // Wait for the auto-save PUT to complete and verify persistence via API. + await expect + .poll(async () => { + const profile = await getProfile(request) + return profile.first_name === 'UpdatedE2E' && profile.last_name === 'UpdatedTester' + }) + .toBe(true) - // OK navigates back; go back to profile to verify persistence + // Reloading the profile page shows the persisted values. await gotoProfile(page) await expect(page.getByLabel('First Name')).toHaveValue('UpdatedE2E') await expect(page.getByLabel('Last Name')).toHaveValue('UpdatedTester') }) - test('Cancel discards unsaved changes', async ({ page }) => { - await gotoProfile(page) - - await page.getByLabel('First Name').fill('Discarded') - - await page.getByRole('button', { name: 'Cancel' }).click() - - // Navigate back to verify no changes were saved - await gotoProfile(page) - await expect(page.getByLabel('First Name')).toHaveValue(E2E_FIRST_NAME) - }) - test('Email field is read-only', async ({ page }) => { await gotoProfile(page) @@ -153,7 +120,7 @@ test.describe('User Profile – editing', () => { await expect(emailInput).toHaveValue(E2E_EMAIL) }) - test('Change profile image (built-in)', async ({ page }) => { + test('Change profile image (built-in)', async ({ page, request }) => { await gotoProfile(page) // Wait for images to load @@ -180,24 +147,22 @@ test.describe('User Profile – editing', () => { // Confirm it is now selected await expect(images.nth(targetIndex)).toHaveClass(/selected/) - // Save - await page.getByRole('button', { name: 'Save' }).click() - await expect( - page.locator('.modal-dialog .modal-title', { hasText: 'Profile Updated' }), - ).toBeVisible() - await page.locator('.modal-dialog').getByRole('button', { name: 'OK' }).click() + // Images auto-save on selection; verify via API. + await expect + .poll(async () => { + const profile = await getProfile(request) + return Boolean(profile.image_id) + }) + .toBe(true) // Re-visit and confirm selection persists await gotoProfile(page) await page.waitForSelector('.selectable-image') const selectedSrc = await page.locator('.selectable-image.selected').getAttribute('src') expect(selectedSrc).toBeTruthy() - // The URL will differ after a new load (Object URL vs cached), so verify via API - const profile = await getProfile(page.request) - expect(profile.image_id).toBeTruthy() }) - test('Upload a custom profile image', async ({ page }) => { + test('Upload a custom profile image', async ({ page, request }) => { await gotoProfile(page) await page.waitForSelector('.selectable-image') @@ -210,14 +175,13 @@ test.describe('User Profile – editing', () => { // The uploaded image appears first in the list and is selected await expect(page.locator('.selectable-image').first()).toHaveClass(/selected/) - // Save is now enabled - await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled() - await page.getByRole('button', { name: 'Save' }).click() - - await expect( - page.locator('.modal-dialog .modal-title', { hasText: 'Profile Updated' }), - ).toBeVisible() - await page.locator('.modal-dialog').getByRole('button', { name: 'OK' }).click() + // Images auto-save on upload; verify via API. + await expect + .poll(async () => { + const profile = await getProfile(request) + return Boolean(profile.image_id) + }) + .toBe(true) }) test('Change Password shows email-sent modal', async ({ page }) => { @@ -243,6 +207,6 @@ test.describe('User Profile – editing', () => { await dialog.getByRole('button', { name: 'OK' }).click() // Modal dismissed, back on the profile page - await expect(page.getByRole('heading', { name: 'User Profile' })).toBeVisible() + await expect(page.getByRole('heading', { name: 'Profile' })).toBeVisible() }) }) diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts index 43092f0..ab02cff 100644 --- a/frontend/playwright.config.ts +++ b/frontend/playwright.config.ts @@ -4,6 +4,7 @@ import { STORAGE_STATE_NO_PIN, STORAGE_STATE_DELETE, STORAGE_STATE_CC, + STORAGE_STATE_TUTORIAL, } from './e2e/e2e-constants' /** @@ -48,6 +49,12 @@ export default defineConfig({ // Depends on 'setup' because e2e-seed (run in setup) truncates all users first. { name: 'setup-delete', testMatch: /auth-delete\.setup\.ts/, dependencies: ['setup'] }, { name: 'setup-cc', testMatch: /auth-cc\.setup\.ts/, dependencies: ['setup'] }, + { + name: 'setup-tutorial', + testMatch: /auth-tutorial\.setup\.ts/, + // Depends on setup because e2e-seed truncates all users first. + dependencies: ['setup'], + }, { // Bucket A: child-options tests — run before create-child so that @@ -170,6 +177,15 @@ export default defineConfig({ testMatch: [/mode_parent\/user-profile\/delete-account\.spec\.ts/], }, + { + // Bucket: tutorial system tests — uses an isolated user so tutorial + // enabled/progress state never interferes with other buckets. + name: 'chromium-tutorial', + use: { ...devices['Desktop Chrome'], storageState: STORAGE_STATE_TUTORIAL }, + dependencies: ['setup-tutorial'], + testMatch: [/mode_parent\/tutorial\/.+\.spec\.ts/], + }, + { name: 'chromium-tasks-rewards', use: { ...devices['Desktop Chrome'], storageState: STORAGE_STATE }, @@ -186,6 +202,7 @@ export default defineConfig({ /mode_parent\/chore-scheduler\//, /mode_parent\/notifications\//, /mode_parent\/routines\//, + /mode_parent\/tutorial\//, ], }, diff --git a/frontend/src/components/profile/ProfileSection.vue b/frontend/src/components/profile/ProfileSection.vue index cebaa04..73cbbd6 100644 --- a/frontend/src/components/profile/ProfileSection.vue +++ b/frontend/src/components/profile/ProfileSection.vue @@ -58,9 +58,24 @@ const bodyStyle = computed(() => { async function measureHeight() { await nextTick() - if (contentRef.value) { - bodyHeight.value = contentRef.value.scrollHeight + if (!contentRef.value || !innerRef.value) return + // The outer body is currently collapsed (max-height:0 / visibility:hidden), + // so scrollHeight would read 0. Briefly unclamp it off-screen to measure the + // real content height, then restore the closed styles. + const el = contentRef.value + const original = { + maxHeight: el.style.maxHeight, + visibility: el.style.visibility, + position: el.style.position, } + el.style.maxHeight = 'none' + el.style.visibility = 'hidden' + el.style.position = 'absolute' + const height = innerRef.value.scrollHeight + el.style.maxHeight = original.maxHeight + el.style.visibility = original.visibility + el.style.position = original.position + bodyHeight.value = height } watch(isOpen, (open) => { diff --git a/frontend/src/components/profile/UserProfile.vue b/frontend/src/components/profile/UserProfile.vue index f2fcd26..17cd8e5 100644 --- a/frontend/src/components/profile/UserProfile.vue +++ b/frontend/src/components/profile/UserProfile.vue @@ -293,6 +293,7 @@ function onImageChange(id: string | null) { uploadLocalImage() } else { localImageFile.value = null + imageId.value = id saveImage(id) } } diff --git a/frontend/src/tutorial/steps.ts b/frontend/src/tutorial/steps.ts index 253dc34..3ced77b 100644 --- a/frontend/src/tutorial/steps.ts +++ b/frontend/src/tutorial/steps.ts @@ -604,7 +604,7 @@ export const stepRegistry: Record = { placement: 'auto', next: 'chore-schedule', ctaLabel: 'Next', - anchorSelector: '[data-tutorial="chore-edit-points"]', + anchorSelector: '[data-tutorial~="chore-edit-points"]', }, 'chore-schedule': { id: 'chore-schedule', @@ -666,7 +666,7 @@ export const stepRegistry: Record = { placement: 'auto', next: 'routine-schedule', ctaLabel: 'Next', - anchorSelector: '[data-tutorial="routine-edit-points"]', + anchorSelector: '[data-tutorial~="routine-edit-points"]', }, 'routine-schedule': { id: 'routine-schedule', diff --git a/frontend/test-results/.last-run.json b/frontend/test-results/.last-run.json index f148683..1d86de3 100644 --- a/frontend/test-results/.last-run.json +++ b/frontend/test-results/.last-run.json @@ -1,65 +1,6 @@ { "status": "failed", "failedTests": [ - "ef79c4d59112f5749637-c6693163663a7bc4af47", - "3949411e68481643919b-e327f34655d14e94d19b", - "fec17c26f90fca53cae9-b0219eaf807eb93484de", - "539fbf55106c07a0b0af-4dbe4ab6bd5b824248fe", - "a0ff00fe9db1b94ee976-70bd0af5bd4dc0fc90f8", - "60daab3ab23c5105aded-4ff2d3abc6221e754043", - "573422bc1cb767632e56-3b881fd32c8dca14d993", - "a0ede9b164ff4874e0ea-1430723f42605dce5096", - "73e956d909565ee0ca8d-2027a05776ace22fcea7", - "7aed7c2f6df74087d7cf-768260ba8f7794e89556", - "f29a758461fac766bf43-480f0ca0072bcc8fb76f", - "fee2e0be313c94e5185c-2badde8a28abc5c92483", - "09d158a9a9fa648fe02b-834e154496de68909d7e", - "57f43742bac53b67778c-267067f10b8182dd62d2", - "d687e3783b3095baa295-34bf92454984a3e87508", - "af256c240cf1a2fb3f6b-194c319d22a4af671ff8", - "c71403f444e9a906f110-e6ecd6bb63b4ec5a5a25", - "d6f8839cd56b790be4c0-34272e575f57bb690613", - "252e6efd0a4ebdeaacb8-a975d50326943969dc39", - "b3bc53914d8153862f2d-cf454c9d14c4d890a799", - "0445e4f0b57f766a6451-f4a2bd69ecb1b7eff202", - "1aca78671e91610cfc9f-6588e52abfbc15f784e0", - "b774d3e2b6f2ab46c8be-712d31bbc4fd0bd84af0", - "cce20a13127be7ea2249-a1e21277b88115dec270", - "03642ed65289ed2617e8-8509dd8e7ffa8afb8dd4", - "5a9cc0eb7bb05d0304c1-ccef440cfe201a210d22", - "f962074ab28ffe10b237-ea88306db2c45f2140d7", - "6c63717f825d79d1f694-1c19b7cf35610bc938bd", - "b9f570289262774d1452-2cea4ebc13e842e0985f", - "198b299b4340f34d5cd8-1382ca783eb1a0df2f90", - "2fc044a25384fd9f0d2e-e5dc2182f906ab69b27e", - "1fe10bf5a089bf03c3d4-54a8b73063048512c9a8", - "88fb6b12140d9598bca5-63e11902b68d2508ccd1", - "9196a99e5e3448680c82-30e720656820ccdbdae8", - "4cf8bbd68887cddb5d7d-8ae6e42f7fc7d3fa7e6a", - "5da8774fa40a8b041983-096e580bb83c023e014d", - "f023cabcfbd72e9c251e-766e068ad9eb2a388263", - "29cf2a7310bfafff8608-9edd7583e0e756876a86", - "d8a456b031baa1625a54-0c1555e61dea4396c276", - "abb177b0248c39107c83-969aa0015db0fc99d5ee", - "0d5d17a469d01de6a6b0-65be18163a6824f56957", - "0d5d17a469d01de6a6b0-69e9aaee75fe0e476257", - "0d5d17a469d01de6a6b0-98cb437eec17db3eeb0d", - "0d5d17a469d01de6a6b0-211b11979089425fba87", - "0d5d17a469d01de6a6b0-cb56e46a1465364b8983", - "0d5d17a469d01de6a6b0-5787b1c19c5c3b93cbb4", - "22fbaea7d0c75fbdca8e-4aaa785e7a4dfdc6c43a", - "d450fb075a7292ee9d55-51b084418c21b19c1e90", - "367d416bc67f2212f2ea-d7b6f60f5a9c28db1e79", - "e7caec8f355ec9da3afb-126bac0fba5fb25bb468", - "68f4a83ea53b695d9889-c260f9d095c72937b8d6", - "4a81e53ab660f2d9ca43-237bf2b7adc9bcde6cd8", - "4a81e53ab660f2d9ca43-d60881fdd2c89e327569", - "4a524ee12c5a95d8b699-fa48b54e49f31839e5a8", - "f7f03fab22cee8cdd386-53724737f77985005257", - "f7f03fab22cee8cdd386-9e5db08c6f11001430bf", - "05c60e5489894b04b806-a583933cd36dbec0fbc8", - "1aeb41645bc07733ddab-0bfabbf02a8ee16b1c21", - "1aeb41645bc07733ddab-63443be391ff2e2e6a9a", - "cc1bb6b0a79d3836a965-6ecd8fb21115aebcda0d" + "dee24a66635148f43df6-c43480256bf17c8988e1" ] } \ No newline at end of file From f7b00fc7c4e42d36b4918c4b5f3f8af91a3328d6 Mon Sep 17 00:00:00 2001 From: Ryan Kegel Date: Fri, 17 Jul 2026 19:47:43 -0400 Subject: [PATCH 06/31] fix: adjust timezone handling for chore expiry notifications and ensure deadlines account for next occurrences --- backend/utils/chore_expiry_notification_scheduler.py | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/backend/utils/chore_expiry_notification_scheduler.py b/backend/utils/chore_expiry_notification_scheduler.py index 8a3ce98..b3e88cb 100644 --- a/backend/utils/chore_expiry_notification_scheduler.py +++ b/backend/utils/chore_expiry_notification_scheduler.py @@ -62,7 +62,7 @@ def get_expiring_chores_for_user( try: from zoneinfo import ZoneInfo - local_now = datetime.now(ZoneInfo(tz_str)) if tz_str else now_dt + local_now = now_dt.astimezone(ZoneInfo(tz_str)) if tz_str else now_dt except Exception: local_now = now_dt @@ -106,10 +106,15 @@ def get_expiring_chores_for_user( continue # Anytime — no expiry due_hour, due_minute = due - # Build a timezone-aware deadline datetime for today + # Build a timezone-aware deadline datetime for the next occurrence of the due time. + # Schedules run hourly and may span midnight (e.g. a 23:00 run needs to catch + # a chore due at 00:15 the next day), so roll forward a day when the candidate + # deadline has already passed. deadline_dt = local_now.replace( hour=due_hour, minute=due_minute, second=0, microsecond=0 ) + if deadline_dt <= local_now: + deadline_dt = deadline_dt + timedelta(days=1) # Include only when deadline is strictly after now and within window if not (local_now < deadline_dt <= window_end): From 541bed3a8aca36fef7b6bf133cede05f0487c186 Mon Sep 17 00:00:00 2001 From: Ryan Kegel Date: Tue, 21 Jul 2026 14:53:31 -0400 Subject: [PATCH 07/31] feat: enhance tutorial functionality by disabling inputs and buttons during active steps --- .opencode/agents/developer.md | 2 +- .opencode/skills/bugfix/SKILL.md | 27 ++++++ frontend/e2e/.auth/user-cc.json | 12 +-- frontend/e2e/.auth/user-delete.json | 12 +-- frontend/e2e/.auth/user-tutorial.json | 12 +-- frontend/e2e/.auth/user.json | 12 +-- .../e2e/mode_parent/tutorial/tutorial.spec.ts | 64 +++++++++++++ .../components/shared/ChildrenListView.vue | 7 +- .../src/components/shared/EntityEditForm.vue | 17 ++-- .../shared/FloatingActionButton.vue | 15 ++- .../shared/__tests__/EntityEditForm.spec.ts | 66 ++++++++++++- .../__tests__/FloatingActionButton.spec.ts | 26 +++++ frontend/src/components/utils/ImagePicker.vue | 54 +++++++---- .../utils/__tests__/ImagePicker.spec.ts | 96 +++++++++++++++++++ frontend/src/tutorial/TutorialOverlay.vue | 22 +++++ frontend/src/tutorial/controller.ts | 3 +- frontend/test-results/.last-run.json | 6 +- opencode.json | 24 +++++ 18 files changed, 418 insertions(+), 59 deletions(-) create mode 100644 .opencode/skills/bugfix/SKILL.md create mode 100644 frontend/src/components/shared/__tests__/FloatingActionButton.spec.ts create mode 100644 frontend/src/components/utils/__tests__/ImagePicker.spec.ts create mode 100644 opencode.json diff --git a/.opencode/agents/developer.md b/.opencode/agents/developer.md index 43307f8..26fdd32 100644 --- a/.opencode/agents/developer.md +++ b/.opencode/agents/developer.md @@ -2,7 +2,7 @@ name: Developer description: Implements core application features across Python backends and Vue frontends. mode: subagent -model: deepseek/deepseek-v4-pro +model: moonshotai/kimi-k2.7-code temperature: 0.2 maxSteps: 50 permission: diff --git a/.opencode/skills/bugfix/SKILL.md b/.opencode/skills/bugfix/SKILL.md new file mode 100644 index 0000000..c2e56c8 --- /dev/null +++ b/.opencode/skills/bugfix/SKILL.md @@ -0,0 +1,27 @@ +--- +name: bugfix +description: "Executes a bugfix pipeline on one or more gitea issues: Developer -> Tester -> Reviewer" +--- + +## What I do + +I orchestrate a sequential bugfix and verification pipeline - I will retrieve issues(s) from Gitea. I will then forward information from the issues to the respective subagents. + +Use gitea-mcp-server to interact with Gitea. Verify that the server is running and accessible. + +If an issue is not provided, ask the user for the issue number(s). + +1. **Developer**: Provides a code fix for each issue. +2. **Reviewer**: Audits the code and architectural soundness. +3. **Tester**: Runs tests related to the bugfix and determines if new unit tests, integration tests, or end-to-end tests are needed. If so, implement. Verify by running the test suite. + +## Execution Rules + +- Stop and ask the user for clarification if a step fails or is ambiguous. +- Use the `@` mention to trigger the respective subagents sequentially. +- Pass the context from the previous stage to the next stage to ensure consistency. +- Use multiple subagents to handle different aspects of the bugfix process if it will help. + +## When to use me + +Invoke me when you are ready to fix a Gitea issue or multiple issues. diff --git a/frontend/e2e/.auth/user-cc.json b/frontend/e2e/.auth/user-cc.json index 0326907..d74372e 100644 --- a/frontend/e2e/.auth/user-cc.json +++ b/frontend/e2e/.auth/user-cc.json @@ -2,20 +2,20 @@ "cookies": [ { "name": "refresh_token", - "value": "QRDDJrwVfrRB_5Z--i4k48Q4-0kktQnZJelqd9JABBQ", + "value": "qYJH5LMH5O4UK92tdAp7R49rzGACFvTMVj29S-Pzygc", "domain": "localhost", "path": "/api/auth", - "expires": 1791758861.201632, + "expires": 1792435594.088715, "httpOnly": true, "secure": true, "sameSite": "Strict" }, { "name": "access_token", - "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS1jY0B0ZXN0LmNvbSIsInVzZXJfaWQiOiIyNjU1MGUxZS00NTBiLTRmMzMtOGI3MC02NjA1MGU2MzZkNzgiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3ODM5OTM2NjF9.pZegL2iwonftDyVlaADPhHeTPrx7VKkoi8TtDY3Byuk", + "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS1jY0B0ZXN0LmNvbSIsInVzZXJfaWQiOiI2NmNlMzgzMy0zMGQ3LTRjMTItYjRhMi1iNmIxMjcxYTI1YzEiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3ODQ2NzAzOTR9.jkyiFTxBQ0oatY6jCAWFG88E8e6mCrDDlN_8I56RMBA", "domain": "localhost", "path": "/", - "expires": 1783993661.201585, + "expires": 1784670394.088677, "httpOnly": true, "secure": true, "sameSite": "Lax" @@ -27,11 +27,11 @@ "localStorage": [ { "name": "authSyncEvent", - "value": "{\"type\":\"logout\",\"at\":1783982861064}" + "value": "{\"type\":\"logout\",\"at\":1784659593888}" }, { "name": "parentAuth", - "value": "{\"expiresAt\":1784155661355}" + "value": "{\"expiresAt\":1784832394248}" } ] } diff --git a/frontend/e2e/.auth/user-delete.json b/frontend/e2e/.auth/user-delete.json index 32dab55..31084a3 100644 --- a/frontend/e2e/.auth/user-delete.json +++ b/frontend/e2e/.auth/user-delete.json @@ -2,20 +2,20 @@ "cookies": [ { "name": "refresh_token", - "value": "QCQAmUFxc_xNvuLjIGYO4HL49nrDnWW2K54jTZT3ZBw", + "value": "PylNoNcxDjRuoocNg4ZmApg_7OIxp9Jfs7ttsX3C5uA", "domain": "localhost", "path": "/api/auth", - "expires": 1791758861.100584, + "expires": 1792435594.088028, "httpOnly": true, "secure": true, "sameSite": "Strict" }, { "name": "access_token", - "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS1kZWxldGVAdGVzdC5jb20iLCJ1c2VyX2lkIjoiZjkyN2FjMzItZDE3ZC00MjhhLWI5YTgtYTQ5NjM5YjE4YTgzIiwidG9rZW5fdmVyc2lvbiI6MCwiZXhwIjoxNzgzOTkzNjYxfQ.GE6KZ4PXLwLsF8HYZckYwvBruIBMNqVxY-Yg94_QBcU", + "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS1kZWxldGVAdGVzdC5jb20iLCJ1c2VyX2lkIjoiN2UzNjdjMGItMDU3ZS00MWEzLThlNzYtZWZmNDUyMmFmOTU2IiwidG9rZW5fdmVyc2lvbiI6MCwiZXhwIjoxNzg0NjcwMzk0fQ.cVkoiVTtH1O7TFqW5yQ9BEBlTq7hR8YEya7FW2b_Yh8", "domain": "localhost", "path": "/", - "expires": 1783993661.100535, + "expires": 1784670394.08796, "httpOnly": true, "secure": true, "sameSite": "Lax" @@ -27,11 +27,11 @@ "localStorage": [ { "name": "authSyncEvent", - "value": "{\"type\":\"logout\",\"at\":1783982860894}" + "value": "{\"type\":\"logout\",\"at\":1784659593889}" }, { "name": "parentAuth", - "value": "{\"expiresAt\":1784155661256}" + "value": "{\"expiresAt\":1784832394248}" } ] } diff --git a/frontend/e2e/.auth/user-tutorial.json b/frontend/e2e/.auth/user-tutorial.json index 585b268..6e6c776 100644 --- a/frontend/e2e/.auth/user-tutorial.json +++ b/frontend/e2e/.auth/user-tutorial.json @@ -2,20 +2,20 @@ "cookies": [ { "name": "refresh_token", - "value": "xQQnxda8ujhjlZDBQ2Rl4Xxlh4X2_Kt1e80YSWniAXA", + "value": "LZA3Bk15HR3io_q8vfyqD3wlRoyV-GJwY-MjWvtUQzg", "domain": "localhost", "path": "/api/auth", - "expires": 1791760814.863417, + "expires": 1792435594.060453, "httpOnly": true, "secure": true, "sameSite": "Strict" }, { "name": "access_token", - "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS10dXRvcmlhbEB0ZXN0LmNvbSIsInVzZXJfaWQiOiIzNWI3ZGVjMS01ODNmLTQ5M2YtYTQ5ZS1mNWM0NzM3YTQ5NzgiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3ODM5OTU2MTR9.KWJqO7mVswb5IoHsJOOdZSm8iCmYoNVXwixDsQ8lbmI", + "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS10dXRvcmlhbEB0ZXN0LmNvbSIsInVzZXJfaWQiOiJjYjQyMzZkNC1kNDRlLTQ0YjMtOTYzYi0xYTUwMWEzZjM2NTMiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3ODQ2NzAzOTR9.pPd0JYgaAyn4_0YPOlxKoX1B9Ka4Vq2M3CpNcl7EDAU", "domain": "localhost", "path": "/", - "expires": 1783995614.863369, + "expires": 1784670394.06041, "httpOnly": true, "secure": true, "sameSite": "Lax" @@ -27,11 +27,11 @@ "localStorage": [ { "name": "authSyncEvent", - "value": "{\"type\":\"logout\",\"at\":1783984814749}" + "value": "{\"type\":\"logout\",\"at\":1784659593886}" }, { "name": "parentAuth", - "value": "{\"expiresAt\":1784157614996}" + "value": "{\"expiresAt\":1784832394232}" } ] } diff --git a/frontend/e2e/.auth/user.json b/frontend/e2e/.auth/user.json index bca56c6..60b346b 100644 --- a/frontend/e2e/.auth/user.json +++ b/frontend/e2e/.auth/user.json @@ -2,20 +2,20 @@ "cookies": [ { "name": "refresh_token", - "value": "zFYZnbIZmC4uH9DcQ3PO8WPPAy_IOts57gvbCMERHvw", + "value": "MYMeAyxeWQy7LVHrJsvF-10FozU5Ko_QoEvmV3bHwPc", "domain": "localhost", "path": "/api/auth", - "expires": 1791760813.448801, + "expires": 1792435592.056481, "httpOnly": true, "secure": true, "sameSite": "Strict" }, { "name": "access_token", - "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZUB0ZXN0LmNvbSIsInVzZXJfaWQiOiIzNDkyZjAyMi0yMDdiLTRjMjMtYWFlYy1lMmNjNzc0N2IxYjAiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3ODM5OTU2MTN9.PM5XaijvAuzEPSY3Mz1DB1jvYTJDeaMhGZnrYukUJ0Q", + "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZUB0ZXN0LmNvbSIsInVzZXJfaWQiOiJiODJhZDU2Mi03MjMwLTRkN2EtODU3NS04N2FhNzE1ZWNhMjQiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3ODQ2NzAzOTJ9.iEbCtV3csb9AUWoXL4MJ-GLL1yiJDumvYmKr-vyuwBg", "domain": "localhost", "path": "/", - "expires": 1783995613.448755, + "expires": 1784670392.056434, "httpOnly": true, "secure": true, "sameSite": "Lax" @@ -27,11 +27,11 @@ "localStorage": [ { "name": "authSyncEvent", - "value": "{\"type\":\"logout\",\"at\":1783984813329}" + "value": "{\"type\":\"logout\",\"at\":1784659591903}" }, { "name": "parentAuth", - "value": "{\"expiresAt\":1784157613579}" + "value": "{\"expiresAt\":1784832392197}" } ] } diff --git a/frontend/e2e/mode_parent/tutorial/tutorial.spec.ts b/frontend/e2e/mode_parent/tutorial/tutorial.spec.ts index 1b6573c..6b15b2c 100644 --- a/frontend/e2e/mode_parent/tutorial/tutorial.spec.ts +++ b/frontend/e2e/mode_parent/tutorial/tutorial.spec.ts @@ -377,4 +377,68 @@ test.describe('Tutorial system', () => { await page.reload() await expect(getTutorialCard(page)).not.toBeVisible({ timeout: 3000 }) }) + + test('add-child FAB is disabled while the create-child tutorial is showing', async ({ + page, + request, + }) => { + await deleteAllChildren(request) + await page.goto('/parent') + await expectTutorialCard(page, 'Add your child') + + const fab = page.locator('.fab') + await expect(fab).toBeVisible() + await expect(fab).toBeDisabled() + + // The page should still be on the children list and the tutorial visible. + await expect(page).toHaveURL('/parent') + await expect(getTutorialCard(page)).toBeVisible() + }) + + test('child form inputs are disabled while the edit-child-name tutorial is showing', async ({ + page, + }) => { + await page.goto('/parent/children/create') + await expect(page).toHaveURL('/parent/children/create') + await expectTutorialCard(page, "Child's Name") + + await expect(page.locator('input#name')).toBeDisabled() + await expect(page.locator('input#age')).toBeDisabled() + + // The tutorial card should remain visible after checking the inputs. + await expect(getTutorialCard(page)).toBeVisible() + }) + + test('clicking the highlighted Points area does not navigate while child-points tutorial is showing', async ({ + page, + request, + }) => { + const childName = 'TutorialPointsKid' + await ensureChild(request, childName, 7) + await page.goto('/parent') + await expect(page).toHaveURL('/parent') + + // Wait for the child card to render so the children list has finished + // loading before we assert on the Points tutorial. + await expect(page.getByText(childName, { exact: true }).first()).toBeVisible({ timeout: 10000 }) + + await expectTutorialCard(page, 'Points') + + // Small resilience delay so the spotlight blocker is positioned before the + // synthetic click reaches it. + await page.waitForTimeout(50) + + const points = page.locator('.card .points').first() + await expect(points).toBeVisible() + const box = await points.boundingBox() + if (!box) throw new Error('Could not resolve points element bounding box') + + // Click the center of the highlighted points area. The tutorial spotlight + // blocker should intercept the click, preventing the card click handler + // from navigating to the child detail page. + await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2) + + await expect(page).toHaveURL('/parent') + await expect(getTutorialCard(page)).toBeVisible() + }) }) diff --git a/frontend/src/components/shared/ChildrenListView.vue b/frontend/src/components/shared/ChildrenListView.vue index 0d93878..5e5a5e6 100644 --- a/frontend/src/components/shared/ChildrenListView.vue +++ b/frontend/src/components/shared/ChildrenListView.vue @@ -8,6 +8,7 @@ import { maybeShow as tutorialMaybeShow, markStepSeen as tutorialMark, tutorialReady, + isTutorialActive, } from '@/tutorial/controller' import type { Child, @@ -141,10 +142,12 @@ const fetchChildren = async (): Promise => { return Promise.resolve() }), ) + children.value = childList return childList } catch (err) { error.value = err instanceof Error ? err.message : 'Failed to fetch children' console.error('Error fetching children:', err) + children.value = [] return [] } finally { loading.value = false @@ -182,8 +185,7 @@ onMounted(async () => { eventBus.on('child_reward_triggered', handleChildRewardTriggered) const listPromise = fetchChildren() - listPromise.then((list) => { - children.value = list + listPromise.then(() => { maybeTriggerCreateChildTutorial() }) // listen for outside clicks to auto-close any open kebab menu @@ -387,6 +389,7 @@ onBeforeUnmount(() => {
diff --git a/frontend/src/components/shared/EntityEditForm.vue b/frontend/src/components/shared/EntityEditForm.vue index cc5f680..b82a06f 100644 --- a/frontend/src/components/shared/EntityEditForm.vue +++ b/frontend/src/components/shared/EntityEditForm.vue @@ -9,7 +9,7 @@ :label="field.label" :modelValue="formData[field.name]" @update:modelValue="(val: boolean) => (formData[field.name] = val)" - :disabled="field.disabled" + :disabled="field.disabled || isTutorialActive" :description="field.description" :error="props.fieldErrors?.[field.name]" /> @@ -29,6 +29,7 @@ type="text" :required="field.required" :maxlength="field.maxlength" + :disabled="isTutorialActive" /> @@ -81,7 +85,7 @@ import { ref, onMounted, nextTick, watch, computed } from 'vue' import ImagePicker from '@/components/utils/ImagePicker.vue' import ToggleField from './ToggleField.vue' -import { useRouter } from 'vue-router' +import { isTutorialActive } from '@/tutorial/controller' import '@/assets/styles.css' type Field = { @@ -118,7 +122,6 @@ const props = withDefaults( const emit = defineEmits(['submit', 'cancel', 'add-image']) -const router = useRouter() const formData = ref>({ ...props.initialData }) const baselineData = ref>({ ...props.initialData }) const formRef = ref(null) diff --git a/frontend/src/components/shared/FloatingActionButton.vue b/frontend/src/components/shared/FloatingActionButton.vue index 7d21203..59619b3 100644 --- a/frontend/src/components/shared/FloatingActionButton.vue +++ b/frontend/src/components/shared/FloatingActionButton.vue @@ -1,5 +1,5 @@ diff --git a/frontend/src/components/child/RoutineAssignView.vue b/frontend/src/components/child/RoutineAssignView.vue index c1182ab..efb89bd 100644 --- a/frontend/src/components/child/RoutineAssignView.vue +++ b/frontend/src/components/child/RoutineAssignView.vue @@ -31,6 +31,8 @@ {{ isLoading ? 'Saving...' : 'Submit' }}
+ + @@ -39,6 +41,7 @@ import { ref, onMounted } from 'vue' import { useRoute, useRouter } from 'vue-router' import { setChildRoutines } from '@/common/api' import MessageBlock from '../shared/MessageBlock.vue' +import FloatingActionButton from '../shared/FloatingActionButton.vue' import { getCachedImageUrl } from '@/common/imageCache' import '@/assets/styles.css' import type { Routine } from '@/common/models' @@ -69,7 +72,7 @@ async function fetchRoutines() { const routinesData = await routinesResp.json() const rawRoutines: Routine[] = routinesData.routines || [] await Promise.all( - rawRoutines.map(async (r: any) => { + rawRoutines.map(async (r: Routine) => { if (r.image_id) { try { r.image_url = await getCachedImageUrl(r.image_id) diff --git a/frontend/src/components/child/TaskConfirmDialog.vue b/frontend/src/components/child/TaskConfirmDialog.vue index 2a37b92..cc5d776 100644 --- a/frontend/src/components/child/TaskConfirmDialog.vue +++ b/frontend/src/components/child/TaskConfirmDialog.vue @@ -1,7 +1,7 @@