feat: enhance refresh token handling with grace period and rotation detection

- Changed "Skip tour" button to "Cancel" in various tutorial overlays.
- Updated modal titles from "Confirm Task" to "Confirm Penalty" where applicable.
- Modified tutorial step call-to-action labels from "Got it" and "Next" to "Continue" for consistency.
- Added tests for new tutorial overlay behavior and button interactions.
- Refactored tutorial controller to allow ignoring tutorial enabled state in step visibility checks.
- Enhanced user profile tutorial restart functionality with appropriate modal messages.
- Updated user profile and task confirmation dialog components to reflect new titles and messages.
- Adjusted configuration files for local development environments.

.gitignore

@@ -10,3 +10,4 @@ backend/test-results/
 **/.DS_Store
 frontend/cert.pem
 frontend/key.pem
+tmp/

.opencode/agents/architect.md

@@ -0,0 +1,98 @@
+---
+name: architect
+description: "Defines system requirements, data contracts, and architectural blueprints."
+mode: subagent
+model: "deepseek/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

.opencode/agents/developer.md

@@ -0,0 +1,28 @@
+---
+name: Developer
+description: Implements core application features across Python backends and Vue frontends.
+mode: subagent
+model: moonshotai/kimi-k2.7-code
+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.

.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/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.

.opencode/agents/tester.md

@@ -0,0 +1,32 @@
+---
+name: tester
+description: "Holistic QA: Manages unit, integration, and writes and auto-repairs E2E test suites."
+mode: "subagent"
+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.
+
+## Operational Directives
+
+- **Unit Testing:** Audit the Developer's unit tests. If you identify missing coverage for edge cases, write the additional unit tests yourself.
+- **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.

.opencode/agents/writer.md

@@ -0,0 +1,24 @@
+---
+description: "Drafts and updates technical documentation, architecture guides, and API specs."
+mode: "subagent"
+model: "deepseek/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.

.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

.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

.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 (title, body, images, comments, etc...). 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.

.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."

.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.

.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)

.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
+```

.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.

.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' }) });
+  });
+}"
+```

.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;
+}"
+```

.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=<name>` 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
+```

.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

.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 <target>` 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/<feature>.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/<feature>.plan.md`. Use this structure:
+
+```markdown
+# <Feature> Test Plan
+
+## Application Overview
+
+<One paragraph describing what the feature does and why it matters.>
+
+## Test Scenarios
+
+### 1. <Group Name>
+
+**Seed:** `tests/seed.spec.ts`
+
+#### 1.1. <kebab-case-scenario-name>
+
+**File:** `tests/<group>/<kebab-case-scenario-name>.spec.ts`
+
+**Steps:**
+  1. <Concrete user step>
+    - expect: <observable outcome>
+    - expect: <another observable outcome>
+  2. <Next step>
+    - expect: <outcome>
+
+#### 1.2. <next-scenario>
+...
+
+### 2. <Next Group>
+
+**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 <seed-file> --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. <step text>` 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/<group>/<scenario>.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 `<file>:<line>` 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/<group>/<scenario>.spec.ts:<line> --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) |

.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

.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(`
+    <div style="position: absolute; top: 8px; right: 8px;
+      padding: 6px 12px; background: rgba(0,0,0,0.7);
+      border-radius: 8px; font-size: 13px; color: white;">
+      ✓ Item added successfully
+    </div>
+  `);
+
+  // 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(`
+    <div style="position: absolute;
+      top: ${bounds.y}px;
+      left: ${bounds.x}px;
+      width: ${bounds.width}px;
+      height: ${bounds.height}px;
+      border: 1px solid red;">
+    </div>
+    <div style="position: absolute;
+      top: ${bounds.y + bounds.height + 5}px;
+      left: ${bounds.x + bounds.width / 2}px;
+      transform: translateX(-50%);
+      padding: 6px;
+      background: #808080;
+      border-radius: 10px;
+      font-size: 14px;
+      color: white;">Check it out, it is right above this text
+    </div>
+  `, { 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

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: `<template>` → `<script>` → `<style scoped>`. TypeScript only in `<script>`. All styles must be `scoped`.
+- Colors/spacing: use only `:root` CSS variables from `colors.css`. No hardcoded hex/px for themed properties.
+- Layout shells: `ParentLayout` for admin/management, `ChildLayout` for child dashboard/focus.
+- Images: models carry `image_id`; frontend resolves to `image_url` for rendering.
+
+## Testing gotchas
+- E2E tests use pre-authenticated sessions via `storageState` in `playwright.config.ts` — do **not** navigate to `/auth/login`. Import `E2E_EMAIL` / `E2E_PASSWORD` from `e2e/e2e-constants.ts`.
+- E2E buckets that mutate shared state (default tasks, delete-account, create-child) use isolated users. Preserve this pattern when adding new buckets.
+- Backend tests: `conftest.py` sets `DB_ENV=test` + dummy secrets. Test DB lands in `test_data/db/`, never touches production `data/`.
+
+## Feature specs
+Specs live in `.github/specs/`. If a spec has a checklist, all items must be marked done before the feature is complete.

CLAUDE.md

@@ -0,0 +1,67 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project
+
+Family chore/reward manager. Flask + TinyDB backend (`backend/`), Vue 3 + TypeScript frontend (`frontend/`). Real-time updates flow over Server-Sent Events.
+
+## Commands
+
+### Backend (run from `backend/`)
+- Activate venv first: `source .venv/bin/activate` (mac/linux) — Python runs from `backend/.venv/`.
+- Dev server: `python -m flask run --host=0.0.0.0 --port=5000` (entry: `backend/main.py`).
+- Required env vars at startup: `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/` directory (see `backend/config/paths.py`).
+- Tests: `pytest tests/` — `tests/conftest.py` forces `DB_ENV=test` and sets dummy secrets. Single test: `pytest tests/test_routine_api.py::test_name`.
+- Create an admin user (cannot be done via signup): `python scripts/create_admin.py`.
+
+### Frontend (run from `frontend/`)
+- Dev: `npm run dev` (Vite, https://localhost:5173).
+- Build: `npm run build`. Type-check: `npm run type-check`. Lint: `npm run lint`.
+- Unit/component tests: `npm run test:unit` (Vitest). Single test: `npx vitest run path/to/file.spec.ts`.
+- E2E: `npx playwright test` from `frontend/`. Config at `playwright.config.ts` auto-starts both `npm run dev` and the Flask backend with `DB_ENV=e2e DATA_ENV=e2e`, so test data lands in `backend/test_data/` and never touches production. The `globalSetup` seeds the DB and logs in; tests receive a pre-authenticated session via `storageState` — do **not** navigate to `/auth/login`. Import `E2E_EMAIL` / `E2E_PASSWORD` from `e2e/e2e-constants.ts` rather than hardcoding.
+- E2E suite is split into Playwright "projects" in `playwright.config.ts` (`chromium-routines`, `chromium-task-assignment`, …) — each bucket targets a directory under `e2e/mode_parent/` and some use isolated users to avoid cross-bucket interference. Run a single bucket: `npx playwright test --project=chromium-routines`.
+
+## Architecture
+
+### API surface and nginx proxy
+- Each entity has its own Flask blueprint in `backend/api/` (`child_api.py`, `chore_api.py`, `routine_api.py`, …). Registered in `backend/main.py`.
+- The 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`.
+- The `auth_api` blueprint is the only one mounted under a prefix (`/auth`).
+- API errors return `{ error, code }`; codes live in `backend/api/error_codes.py`. Frontend extracts them via `parseErrorResponse(res)` in `frontend/src/common/api.ts`.
+
+### Models — keep 1:1 parity
+- Python `@dataclass`es live in `backend/models/`. TypeScript interfaces live in `frontend/src/common/models.ts`. Any model change requires updating **both**.
+- Persistence is TinyDB (JSON files under `data/db/` or `test_data/db/`). All DB access goes through the thread-safe `LockedTable` wrapper in `backend/db/db.py`. Always operate on model instances using `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 live in `backend/events/types/` and `frontend/src/common/backendEvents.ts` (mirrored).
+- Frontend state is event-driven: register listeners in `onMounted`, clean up in `onUnmounted`. See `components/BackendEventsListener.vue` and `src/common/backendEvents.ts`.
+- The SSE endpoint is `/events`; per-user queues live in `backend/events/sse.py`.
+
+### Background schedulers
+Started in `backend/main.py` at boot:
+- `start_deletion_scheduler` — runs hourly, deletes accounts that were marked-for-deletion at least `ACCOUNT_DELETION_THRESHOLD_HOURS` ago (default 720, min 24, max 720). Cleans pending rewards, children, tasks, rewards, images, then the user. Logs to `logs/account_deletion.log`.
+- `start_digest_scheduler` — email digests.
+- `start_state_expiry_scheduler` — expires stale state.
+- `start_chore_expiry_notification_scheduler` — chore expiry notifications.
+
+### Auth & security
+- JWT in HttpOnly + Secure + SameSite=Strict cookies. Verification tokens expire in 4 hours; password-reset tokens in 10 minutes.
+- Admin role is **never** assignable via signup — use `backend/scripts/create_admin.py`. Admin endpoints under `/admin/*` enforce role check.
+
+### Frontend conventions
+- Vue SFC file order: `<template>` → `<script>` → `<style scoped>`. TypeScript only inside `<script>`. **All styles must be `scoped`.**
+- Use **only** `:root` CSS variables from `colors.css` for colors/spacing/tokens (e.g. `--btn-primary`, `--list-item-bg-good`). No hardcoded hex/px values for themed properties.
+- Layout shells: `ParentLayout` for admin/management views, `ChildLayout` for child dashboard/focus views.
+- Images: models carry `image_id`; frontend resolves to `image_url` for rendering.
+
+### Specs
+Feature specs live in `.github/specs/`. If a spec has a checklist, all items must be marked done before the feature is considered complete.
+
+## Gotchas
+
+- Backend Python imports assume `backend/` is on `sys.path` (added by `conftest.py` for tests, by `flask run` cwd in dev). Run pytest from `backend/`.
+- Don't replace code with comments; mirror changes across backend + frontend so model/event parity holds.
+- E2E tests share a single seeded user by default — buckets that mutate shared state (default tasks, delete-account, create-child) deliberately use isolated users; preserve that pattern when adding new buckets.

backend/api/auth_api.py

@@ -43,6 +43,12 @@ try:
     ACCESS_TOKEN_EXPIRY_MINUTES = int(os.environ.get('ACCESS_TOKEN_EXPIRY_MINUTES', '15'))
 except ValueError:
     ACCESS_TOKEN_EXPIRY_MINUTES = 15
+try:
+    REFRESH_TOKEN_REUSE_GRACE_PERIOD_SECONDS = int(
+        os.environ.get('REFRESH_TOKEN_REUSE_GRACE_PERIOD_SECONDS', '30')
+    )
+except ValueError:
+    REFRESH_TOKEN_REUSE_GRACE_PERIOD_SECONDS = 30
 E2E_TEST_EMAIL = 'e2e@test.com'
 E2E_TEST_PASSWORD = 'E2eTestPass1!'
 E2E_TEST_PIN = '1234'
@@ -52,6 +58,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):
@@ -409,18 +418,21 @@ def refresh():
 
     token_record = RefreshToken.from_dict(token_dict)
 
-    # THEFT DETECTION: token was already used (rotated out) but replayed
-    if token_record.is_used:
-        logger.warning(
-            'Refresh token reuse detected! user_id=%s, family=%s, ip=%s — killing all sessions',
-            token_record.user_id, token_record.token_family, request.remote_addr,
-        )
-        # Nuke ALL refresh tokens for this user
-        refresh_tokens_db.remove(TokenQuery.user_id == token_record.user_id)
-        resp = jsonify({'error': 'Token reuse detected, all sessions invalidated', 'code': REFRESH_TOKEN_REUSE})
+    # Look up the user early (needed for both legitimate rotation and grace-period handling)
+    user_dict = users_db.get(UserQuery.id == token_record.user_id)
+    user = User.from_dict(user_dict) if user_dict else None
+    if not user:
+        refresh_tokens_db.remove(TokenQuery.id == token_record.id)
+        resp = jsonify({'error': 'User not found', 'code': USER_NOT_FOUND})
         _clear_auth_cookies(resp)
         return resp, 401
 
+    if user.marked_for_deletion:
+        refresh_tokens_db.remove(TokenQuery.user_id == user.id)
+        resp = jsonify({'error': 'Account marked for deletion', 'code': ACCOUNT_MARKED_FOR_DELETION})
+        _clear_auth_cookies(resp)
+        return resp, 403
+
     # Check expiry
     try:
         exp = datetime.fromisoformat(token_record.expires_at)
@@ -437,23 +449,59 @@ def refresh():
         _clear_auth_cookies(resp)
         return resp, 401
 
-    # Look up the user
-    user_dict = users_db.get(UserQuery.id == token_record.user_id)
-    user = User.from_dict(user_dict) if user_dict else None
-    if not user:
-        refresh_tokens_db.remove(TokenQuery.id == token_record.id)
-        resp = jsonify({'error': 'User not found', 'code': USER_NOT_FOUND})
+    # THEFT DETECTION: token was already used (rotated out) but replayed
+    if token_record.is_used:
+        # Grace period: tolerate a very recent rotation to avoid false positives
+        # from legitimate concurrent refresh requests (race conditions).
+        grace_period = current_app.config.get(
+            'REFRESH_TOKEN_REUSE_GRACE_PERIOD_SECONDS', REFRESH_TOKEN_REUSE_GRACE_PERIOD_SECONDS
+        )
+        rotated_at = token_record.rotated_at
+        is_race_condition = False
+        if rotated_at:
+            try:
+                rotated_dt = datetime.fromisoformat(rotated_at)
+                if rotated_dt.tzinfo is None:
+                    rotated_dt = rotated_dt.replace(tzinfo=timezone.utc)
+                if (datetime.now(timezone.utc) - rotated_dt).total_seconds() <= grace_period:
+                    is_race_condition = True
+            except ValueError:
+                pass
+
+        if is_race_condition:
+            logger.info(
+                'Refresh token replay within grace period treated as race condition. user_id=%s, family=%s, ip=%s',
+                token_record.user_id, token_record.token_family, request.remote_addr,
+            )
+            raw_new_refresh, _ = _create_refresh_token(user.id, token_family=token_record.token_family)
+            access_token = _create_access_token(user)
+            resp = jsonify({
+                'email': user.email,
+                'id': user.id,
+                'first_name': user.first_name,
+                'last_name': user.last_name,
+                'verified': user.verified,
+            })
+            _set_auth_cookies(resp, access_token, raw_new_refresh)
+            return resp, 200
+
+        logger.warning(
+            'Refresh token reuse detected! user_id=%s, family=%s, ip=%s — killing family sessions',
+            token_record.user_id, token_record.token_family, request.remote_addr,
+        )
+        # Invalidate only the affected family, not every session for the user.
+        refresh_tokens_db.remove(
+            (TokenQuery.user_id == token_record.user_id) & (TokenQuery.token_family == token_record.token_family)
+        )
+        resp = jsonify({'error': 'Token reuse detected, family sessions invalidated', 'code': REFRESH_TOKEN_REUSE})
         _clear_auth_cookies(resp)
         return resp, 401
 
-    if user.marked_for_deletion:
-        refresh_tokens_db.remove(TokenQuery.user_id == user.id)
-        resp = jsonify({'error': 'Account marked for deletion', 'code': ACCOUNT_MARKED_FOR_DELETION})
-        _clear_auth_cookies(resp)
-        return resp, 403
-
     # ROTATION: mark old token as used, create new one in same family
-    refresh_tokens_db.update({'is_used': True}, TokenQuery.id == token_record.id)
+    refresh_tokens_db.update(
+        {'is_used': True, 'rotated_at': datetime.now(timezone.utc).isoformat()},
+        TokenQuery.id == token_record.id,
+    )
     raw_new_refresh, _ = _create_refresh_token(user.id, token_family=token_record.token_family)
 
     # Issue new access token
@@ -499,6 +547,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 +573,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 +638,7 @@ def e2e_seed():
         verified=True,
         role='user',
         pin=E2E_TEST_PIN,
+        tutorial_enabled=False,
     )
     users_db.insert(user.to_dict())
 

backend/api/child_action_helpers.py

@@ -9,12 +9,14 @@ from datetime import datetime, timezone
 
 from tinydb import Query
 
-from db.db import child_db, task_db, reward_db, pending_confirmations_db
+from db.db import child_db, task_db, reward_db, pending_confirmations_db, routine_db
 from db.child_overrides import get_override
 from db.chore_schedules import get_schedule
+from db.routine_schedules import get_schedule as get_routine_schedule
 from db.tracking import insert_tracking_event
 from events.sse import send_event_to_user
 from events.types.child_chore_confirmation import ChildChoreConfirmation
+from events.types.child_routine_confirmation import ChildRoutineConfirmation
 from events.types.child_reward_request import ChildRewardRequest
 from events.types.child_reward_triggered import ChildRewardTriggered
 from events.types.child_task_triggered import ChildTaskTriggered
@@ -23,6 +25,7 @@ from events.types.event import Event
 from events.types.event_types import EventType
 from models.child import Child
 from models.reward import Reward
+from models.routine import Routine
 from models.task import Task
 from models.tracking_event import TrackingEvent
 from utils.tracking_logger import log_tracking_event
@@ -271,3 +274,84 @@ def deny_reward(user_id: str, child_id: str, reward_id: str) -> dict | None:
                                      ChildRewardRequest(child_id, reward_id, ChildRewardRequest.REQUEST_CANCELLED)))
 
     return {'child_name': child_name}
+
+
+def approve_routine(user_id: str, child_id: str, routine_id: str) -> dict | None:
+    """Award points for a completed routine and mark the pending confirmation approved.
+
+    Returns a result dict on success, or None if already resolved.
+    Raises ValueError if the child or routine cannot be found.
+    """
+    ChildQ = Query()
+    child_result = child_db.get((ChildQ.id == child_id) & (ChildQ.user_id == user_id))
+    if not child_result:
+        raise ValueError(f'Child {child_id} not found for user {user_id}')
+    child = Child.from_dict(child_result)
+
+    if routine_id not in child.routines:
+        logger.info(f'Routine {routine_id} no longer assigned to child {child_id}; skipping approve')
+        return None
+
+    PendingQ = Query()
+    existing = pending_confirmations_db.get(
+        (PendingQ.child_id == child_id) & (PendingQ.entity_id == routine_id) &
+        (PendingQ.entity_type == 'routine') & (PendingQ.status == 'pending') &
+        (PendingQ.user_id == user_id)
+    )
+    if not existing:
+        logger.info(f'No pending routine for child {child_id}, routine {routine_id} — already resolved')
+        return None
+
+    RoutineQ = Query()
+    routine_result = routine_db.get(
+        (RoutineQ.id == routine_id) & ((RoutineQ.user_id == user_id) | (RoutineQ.user_id == None))
+    )
+    if not routine_result:
+        raise ValueError(f'Routine {routine_id} not found')
+    routine = Routine.from_dict(routine_result)
+
+    override = get_override(child_id, routine_id)
+    points_value = override.custom_value if override and override.entity_type == 'routine' else routine.points
+    points_before = child.points
+    child.points += points_value
+    child_db.update({'points': child.points}, ChildQ.id == child_id)
+
+    schedule = get_routine_schedule(child_id, routine_id)
+    now_str = datetime.now(timezone.utc).isoformat()
+    if schedule:
+        pending_confirmations_db.update(
+            {'status': 'approved', 'approved_at': now_str},
+            (PendingQ.child_id == child_id) & (PendingQ.entity_id == routine_id) &
+            (PendingQ.entity_type == 'routine') & (PendingQ.user_id == user_id)
+        )
+    else:
+        pending_confirmations_db.remove(
+            (PendingQ.child_id == child_id) & (PendingQ.entity_id == routine_id) &
+            (PendingQ.entity_type == 'routine') & (PendingQ.user_id == user_id)
+        )
+
+    send_event_to_user(user_id, Event(EventType.CHILD_ROUTINE_CONFIRMATION.value,
+                                     ChildRoutineConfirmation(child_id, routine_id, ChildRoutineConfirmation.OPERATION_APPROVED)))
+
+    return {'routine_name': routine.name, 'child_name': child.name, 'child_id': child_id, 'points': child.points}
+
+
+def reject_routine(user_id: str, child_id: str, routine_id: str) -> None:
+    """Reject a pending routine confirmation. No-op if already resolved."""
+    PendingQ = Query()
+    existing = pending_confirmations_db.get(
+        (PendingQ.child_id == child_id) & (PendingQ.entity_id == routine_id) &
+        (PendingQ.entity_type == 'routine') & (PendingQ.status == 'pending') &
+        (PendingQ.user_id == user_id)
+    )
+    if not existing:
+        logger.info(f'No pending routine for child {child_id}, routine {routine_id} — already resolved')
+        return
+
+    pending_confirmations_db.remove(
+        (PendingQ.child_id == child_id) & (PendingQ.entity_id == routine_id) &
+        (PendingQ.entity_type == 'routine') & (PendingQ.user_id == user_id)
+    )
+
+    send_event_to_user(user_id, Event(EventType.CHILD_ROUTINE_CONFIRMATION.value,
+                                     ChildRoutineConfirmation(child_id, routine_id, ChildRoutineConfirmation.OPERATION_REJECTED)))

backend/api/child_api.py

@@ -1,5 +1,6 @@
 from time import sleep
 from datetime import datetime, timezone
+from zoneinfo import ZoneInfo
 
 from flask import Blueprint, request, jsonify
 from tinydb import Query
@@ -10,7 +11,7 @@ from api.pending_confirmation import PendingConfirmationResponse
 from api.reward_status import RewardStatus
 from api.utils import send_event_for_current_user, get_validated_user_id
 import api.child_action_helpers as chore_actions
-from db.db import child_db, task_db, reward_db, pending_reward_db, pending_confirmations_db, users_db
+from db.db import child_db, task_db, reward_db, routine_db, pending_reward_db, pending_confirmations_db, users_db
 from db.tracking import insert_tracking_event
 from db.child_overrides import get_override, delete_override, delete_overrides_for_child
 from events.types.child_chore_confirmation import ChildChoreConfirmation
@@ -35,21 +36,57 @@ from utils.digest_token import create_action_token
 from collections import defaultdict
 from db.chore_schedules import get_schedule
 from db.task_extensions import get_extension_for_child_task
+from db.routine_schedules import delete_schedules_for_child as delete_routine_schedules_for_child
+from db.routine_extensions import delete_extensions_for_child as delete_routine_extensions_for_child
 import logging
 
 child_api = Blueprint('child_api', __name__)
 logger = logging.getLogger(__name__)
 
 
-def _is_iso_timestamp_today_utc(timestamp: str | None, today_utc: str) -> bool:
-    return bool(timestamp) and timestamp[:10] == today_utc
+def _get_user_timezone(user_id: str) -> str | None:
+    user = users_db.get(Query().id == user_id)
+    if not user:
+        return None
+    return user.get('timezone')
 
 
-def _is_epoch_timestamp_today_utc(epoch_ts, today_utc: str) -> bool:
+def _get_user_today_local(user_id: str) -> tuple[str, str | None]:
+    tz_str = _get_user_timezone(user_id)
+    try:
+        now_local = datetime.now(ZoneInfo(tz_str)) if tz_str else datetime.now(timezone.utc)
+    except Exception:
+        tz_str = None
+        now_local = datetime.now(timezone.utc)
+    return now_local.strftime('%Y-%m-%d'), tz_str
+
+
+def _is_iso_timestamp_on_local_day(timestamp: str | None, local_day: str, tz_str: str | None) -> bool:
+    if not timestamp:
+        return False
+    try:
+        normalized = timestamp.replace('Z', '+00:00')
+        parsed = datetime.fromisoformat(normalized)
+        if parsed.tzinfo is None:
+            parsed = parsed.replace(tzinfo=timezone.utc)
+        try:
+            tz = ZoneInfo(tz_str) if tz_str else timezone.utc
+        except Exception:
+            tz = timezone.utc
+        return parsed.astimezone(tz).strftime('%Y-%m-%d') == local_day
+    except (TypeError, ValueError):
+        return False
+
+
+def _is_epoch_timestamp_on_local_day(epoch_ts, local_day: str, tz_str: str | None) -> bool:
     if epoch_ts is None:
         return False
     try:
-        return datetime.fromtimestamp(float(epoch_ts), timezone.utc).strftime('%Y-%m-%d') == today_utc
+        tz = ZoneInfo(tz_str) if tz_str else timezone.utc
+    except Exception:
+        tz = timezone.utc
+    try:
+        return datetime.fromtimestamp(float(epoch_ts), tz).strftime('%Y-%m-%d') == local_day
     except (TypeError, ValueError, OSError):
         return False
 
@@ -164,6 +201,14 @@ def delete_child(id):
     if deleted_count > 0:
         logger.info(f"Cascade deleted {deleted_count} overrides for child {id}")
 
+    # Cascade delete routine schedule/extension rows for this child.
+    delete_routine_schedules_for_child(id)
+    delete_routine_extensions_for_child(id)
+
+    # Remove pending routine confirmations for this child.
+    PendingQuery = Query()
+    pending_confirmations_db.remove((PendingQuery.child_id == id) & (PendingQuery.entity_type == 'routine'))
+    
     if child_db.remove((ChildQuery.id == id) & (ChildQuery.user_id == user_id)):
         resp = send_event_for_current_user(Event(EventType.CHILD_MODIFIED.value, ChildModified(id, ChildModified.OPERATION_DELETE)))
         if resp:
@@ -295,6 +340,7 @@ def list_child_tasks(id):
     task_ids = child.get('tasks', [])
 
     TaskQuery = Query()
+    today_local, tz_str = _get_user_today_local(user_id)
     child_tasks = []
     for tid in task_ids:
         task = task_db.get((TaskQuery.id == tid) & ((TaskQuery.user_id == user_id) | (TaskQuery.user_id == None)))
@@ -329,12 +375,10 @@ def list_child_tasks(id):
                 status = pending.get('status')
                 approved_at = pending.get('approved_at')
                 created_at = pending.get('created_at')
-                today_utc = datetime.now(timezone.utc).strftime('%Y-%m-%d')
-
-                if status == 'approved' and _is_iso_timestamp_today_utc(approved_at, today_utc):
+                if status == 'approved' and _is_iso_timestamp_on_local_day(approved_at, today_local, tz_str):
                     ct_dict['pending_status'] = 'approved'
                     ct_dict['approved_at'] = approved_at
-                elif status == 'pending' and _is_epoch_timestamp_today_utc(created_at, today_utc):
+                elif status == 'pending' and _is_epoch_timestamp_on_local_day(created_at, today_local, tz_str):
                     ct_dict['pending_status'] = 'pending'
                     ct_dict['approved_at'] = None
                 else:
@@ -882,6 +926,7 @@ def reward_status(id):
     reward_ids = child.rewards
 
     RewardQuery = Query()
+    today_local, tz_str = _get_user_today_local(user_id)
     statuses = []
     for reward_id in reward_ids:
         reward_dict = reward_db.get((RewardQuery.id == reward_id) & ((RewardQuery.user_id == user_id) | (RewardQuery.user_id == None)))
@@ -902,8 +947,7 @@ def reward_status(id):
         )
         redeeming = False
         if pending and pending.get('status') == 'pending':
-            today_utc = datetime.now(timezone.utc).strftime('%Y-%m-%d')
-            if _is_epoch_timestamp_today_utc(pending.get('created_at'), today_utc):
+            if _is_epoch_timestamp_on_local_day(pending.get('created_at'), today_local, tz_str):
                 redeeming = True
             else:
                 pending_id = pending.get('id')
@@ -965,8 +1009,8 @@ def request_reward(id):
         (DupQuery.user_id == user_id)
     )
     if duplicate:
-        today_utc = datetime.now(timezone.utc).strftime('%Y-%m-%d')
-        if _is_epoch_timestamp_today_utc(duplicate.get('created_at'), today_utc):
+        today_local, tz_str = _get_user_today_local(user_id)
+        if _is_epoch_timestamp_on_local_day(duplicate.get('created_at'), today_local, tz_str):
             return jsonify({'error': 'Reward request already pending', 'code': 'DUPLICATE_REWARD_REQUEST'}), 409
         pending_id = duplicate.get('id')
         if pending_id:
@@ -1096,7 +1140,7 @@ def list_pending_confirmations():
     if not user_id:
         return jsonify({'error': 'Unauthorized', 'code': 'UNAUTHORIZED'}), 401
     PendingQuery = Query()
-    today_utc = datetime.now(timezone.utc).strftime('%Y-%m-%d')
+    today_local, tz_str = _get_user_today_local(user_id)
     pending_items = pending_confirmations_db.search(
         (PendingQuery.user_id == user_id) & (PendingQuery.status == 'pending')
     )
@@ -1104,12 +1148,13 @@ def list_pending_confirmations():
 
     RewardQuery = Query()
     TaskQuery = Query()
+    RoutineQuery = Query()
     ChildQuery = Query()
 
     for pr in pending_items:
         pending = PendingConfirmation.from_dict(pr)
 
-        if not _is_epoch_timestamp_today_utc(pending.created_at, today_utc):
+        if not _is_epoch_timestamp_on_local_day(pending.created_at, today_local, tz_str):
             pending_confirmations_db.remove(PendingQuery.id == pending.id)
             continue
 
@@ -1122,8 +1167,12 @@ def list_pending_confirmations():
         # Look up entity details based on type
         if pending.entity_type == 'reward':
             entity_result = reward_db.get((RewardQuery.id == pending.entity_id) & ((RewardQuery.user_id == user_id) | (RewardQuery.user_id == None)))
-        else:
+        elif pending.entity_type == 'chore':
             entity_result = task_db.get((TaskQuery.id == pending.entity_id) & ((TaskQuery.user_id == user_id) | (TaskQuery.user_id == None)))
+        elif pending.entity_type == 'routine':
+            entity_result = routine_db.get((RoutineQuery.id == pending.entity_id) & ((RoutineQuery.user_id == user_id) | (RoutineQuery.user_id == None)))
+        else:
+            entity_result = None
         
         if not entity_result:
             continue
@@ -1185,16 +1234,16 @@ def confirm_chore(id):
         (PendingQuery.entity_type == 'chore') & (PendingQuery.user_id == user_id)
     )
     if existing:
-        today_utc = datetime.now(timezone.utc).strftime('%Y-%m-%d')
+        today_local, tz_str = _get_user_today_local(user_id)
         if existing.get('status') == 'pending':
-            if _is_epoch_timestamp_today_utc(existing.get('created_at'), today_utc):
+            if _is_epoch_timestamp_on_local_day(existing.get('created_at'), today_local, tz_str):
                 return jsonify({'error': 'Chore already pending confirmation', 'code': 'CHORE_ALREADY_PENDING'}), 400
             pending_id = existing.get('id')
             if pending_id:
                 pending_confirmations_db.remove(PendingQuery.id == pending_id)
         if existing.get('status') == 'approved':
             approved_at = existing.get('approved_at', '')
-            if _is_iso_timestamp_today_utc(approved_at, today_utc):
+            if _is_iso_timestamp_on_local_day(approved_at, today_local, tz_str):
                 return jsonify({'error': 'Chore already completed today', 'code': 'CHORE_ALREADY_COMPLETED'}), 400
             pending_id = existing.get('id')
             if pending_id:

backend/api/child_override_api.py

@@ -2,7 +2,7 @@ from flask import Blueprint, request, jsonify
 from tinydb import Query
 from api.utils import get_validated_user_id, send_event_for_current_user
 from api.error_codes import ErrorCodes
-from db.db import child_db, task_db, reward_db
+from db.db import child_db, task_db, reward_db, routine_db
 from db.child_overrides import (
     insert_override,
     get_override,
@@ -52,8 +52,8 @@ def set_child_override(child_id):
         return jsonify({'error': 'custom_value is required', 'code': ErrorCodes.MISSING_FIELD, 'field': 'custom_value'}), 400
     
     # Validate entity_type
-    if entity_type not in ['task', 'reward']:
-        return jsonify({'error': 'entity_type must be "task" or "reward"', 'code': ErrorCodes.INVALID_VALUE, 'field': 'entity_type'}), 400
+    if entity_type not in ['task', 'reward', 'routine']:
+        return jsonify({'error': 'entity_type must be "task", "reward", or "routine"', 'code': ErrorCodes.INVALID_VALUE, 'field': 'entity_type'}), 400
     
     # Validate custom_value range
     if not isinstance(custom_value, int) or custom_value < 0 or custom_value > 10000:
@@ -74,7 +74,7 @@ def set_child_override(child_id):
         if entity_id not in assigned_tasks:
             return jsonify({'error': 'Task not assigned to child', 'code': ErrorCodes.ENTITY_NOT_ASSIGNED}), 404
     
-    else:  # reward
+    elif entity_type == 'reward':
         EntityQuery = Query()
         entity_result = reward_db.search(
             (EntityQuery.id == entity_id) &
@@ -88,6 +88,19 @@ def set_child_override(child_id):
         if entity_id not in assigned_rewards:
             return jsonify({'error': 'Reward not assigned to child', 'code': ErrorCodes.ENTITY_NOT_ASSIGNED}), 404
 
+    else:  # routine
+        EntityQuery = Query()
+        entity_result = routine_db.search(
+            (EntityQuery.id == entity_id) &
+            ((EntityQuery.user_id == user_id) | (EntityQuery.user_id == None))
+        )
+        if not entity_result:
+            return jsonify({'error': 'Routine not found', 'code': 'ROUTINE_NOT_FOUND'}), 404
+
+        assigned_routines = child_dict.get('routines', [])
+        if entity_id not in assigned_routines:
+            return jsonify({'error': 'Routine not assigned to child', 'code': ErrorCodes.ENTITY_NOT_ASSIGNED}), 404
+    
     # Create and insert override
     try:
         override = ChildOverride.create_override(

backend/api/child_routine_api.py

@@ -0,0 +1,638 @@
+from collections import defaultdict
+from datetime import datetime, timezone
+from zoneinfo import ZoneInfo
+
+from flask import Blueprint, request, jsonify
+from tinydb import Query
+
+from api.error_codes import ErrorCodes
+from api.utils import get_validated_user_id, send_event_for_current_user
+from db.child_overrides import delete_override, get_override
+from db.db import child_db, pending_confirmations_db, routine_db, users_db
+from db.routine_extensions import delete_extension_for_child_routine, get_extension_for_child_routine
+from db.routine_items import get_items_for_routine
+from db.routine_schedules import delete_schedule, get_schedule
+from events.types.child_routine_confirmation import ChildRoutineConfirmation
+from events.types.child_routines_set import ChildRoutinesSet
+from events.types.event import Event
+from events.types.event_types import EventType
+from models.child import Child
+from models.pending_confirmation import PendingConfirmation
+from models.routine import Routine
+from utils.digest_token import create_action_token
+from utils.push_sender import send_push_to_user
+
+child_routine_api = Blueprint('child_routine_api', __name__)
+
+
+def _get_user_timezone(user_id: str) -> str | None:
+    user = users_db.get(Query().id == user_id)
+    if not user:
+        return None
+    return user.get('timezone')
+
+
+def _get_user_today_local(user_id: str) -> tuple[str, str | None]:
+    tz_str = _get_user_timezone(user_id)
+    try:
+        now_local = datetime.now(ZoneInfo(tz_str)) if tz_str else datetime.now(timezone.utc)
+    except Exception:
+        tz_str = None
+        now_local = datetime.now(timezone.utc)
+    return now_local.strftime('%Y-%m-%d'), tz_str
+
+
+def _is_iso_timestamp_on_local_day(timestamp: str | None, local_day: str, tz_str: str | None) -> bool:
+    if not timestamp:
+        return False
+    try:
+        normalized = timestamp.replace('Z', '+00:00')
+        parsed = datetime.fromisoformat(normalized)
+        if parsed.tzinfo is None:
+            parsed = parsed.replace(tzinfo=timezone.utc)
+        try:
+            tz = ZoneInfo(tz_str) if tz_str else timezone.utc
+        except Exception:
+            tz = timezone.utc
+        return parsed.astimezone(tz).strftime('%Y-%m-%d') == local_day
+    except (TypeError, ValueError):
+        return False
+
+
+def _is_epoch_timestamp_on_local_day(epoch_ts, local_day: str, tz_str: str | None) -> bool:
+    if epoch_ts is None:
+        return False
+    try:
+        tz = ZoneInfo(tz_str) if tz_str else timezone.utc
+    except Exception:
+        tz = timezone.utc
+    try:
+        return datetime.fromtimestamp(float(epoch_ts), tz).strftime('%Y-%m-%d') == local_day
+    except (TypeError, ValueError, OSError):
+        return False
+
+
+class ChildRoutine:
+    def __init__(self, name, points, image_id, _id):
+        self.id = _id
+        self.name = name
+        self.points = points
+        self.image_id = image_id
+
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'name': self.name,
+            'points': self.points,
+            'image_id': self.image_id,
+        }
+
+
+def _validate_child_for_user(child_id: str, user_id: str):
+    child_q = Query()
+    result = child_db.search((child_q.id == child_id) & (child_q.user_id == user_id))
+    return Child.from_dict(result[0]) if result else None
+
+
+def _resolve_routine_for_user(routine_id: str, user_id: str):
+    routine_q = Query()
+    routine_result = routine_db.get(
+        (routine_q.id == routine_id) & ((routine_q.user_id == user_id) | (routine_q.user_id == None))
+    )
+    return Routine.from_dict(routine_result) if routine_result else None
+
+
+@child_routine_api.route('/child/<id>/assign-routine', methods=['POST'])
+def assign_routine_to_child(id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': ErrorCodes.UNAUTHORIZED}), 401
+
+    data = request.get_json() or {}
+    routine_id = data.get('routine_id')
+    if not routine_id:
+        return jsonify({'error': 'routine_id is required', 'code': ErrorCodes.MISSING_FIELD}), 400
+
+    child = _validate_child_for_user(id, user_id)
+    if not child:
+        return jsonify({'error': 'Child not found', 'code': ErrorCodes.CHILD_NOT_FOUND}), 404
+
+    routine = _resolve_routine_for_user(routine_id, user_id)
+    if not routine:
+        return jsonify({'error': 'Routine not found'}), 404
+
+    routine_ids = list(child.routines)
+    if routine_id not in routine_ids:
+        routine_ids.append(routine_id)
+        child_db.update({'routines': routine_ids}, Query().id == id)
+
+    send_event_for_current_user(
+        Event(EventType.CHILD_ROUTINES_SET.value, ChildRoutinesSet(id, routine_ids))
+    )
+    return jsonify({'message': f'Routine {routine_id} assigned to {child.name}.'}), 200
+
+
+@child_routine_api.route('/child/<id>/remove-routine', methods=['POST'])
+def remove_routine_from_child(id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': ErrorCodes.UNAUTHORIZED}), 401
+
+    data = request.get_json() or {}
+    routine_id = data.get('routine_id')
+    if not routine_id:
+        return jsonify({'error': 'routine_id is required', 'code': ErrorCodes.MISSING_FIELD}), 400
+
+    child = _validate_child_for_user(id, user_id)
+    if not child:
+        return jsonify({'error': 'Child not found', 'code': ErrorCodes.CHILD_NOT_FOUND}), 404
+
+    routine_ids = list(child.routines)
+    if routine_id not in routine_ids:
+        return jsonify({'error': 'Routine not assigned to child', 'code': ErrorCodes.ENTITY_NOT_ASSIGNED}), 400
+
+    routine_ids.remove(routine_id)
+    child_db.update({'routines': routine_ids}, Query().id == id)
+
+    override = get_override(id, routine_id)
+    if override and override.entity_type == 'routine':
+        delete_override(id, routine_id)
+
+    delete_schedule(id, routine_id)
+    delete_extension_for_child_routine(id, routine_id)
+
+    pending_q = Query()
+    pending_confirmations_db.remove(
+        (pending_q.child_id == id) & (pending_q.entity_id == routine_id) &
+        (pending_q.entity_type == 'routine') & (pending_q.user_id == user_id)
+    )
+
+    send_event_for_current_user(
+        Event(EventType.CHILD_ROUTINES_SET.value, ChildRoutinesSet(id, routine_ids))
+    )
+    send_event_for_current_user(
+        Event(
+            EventType.CHILD_ROUTINE_CONFIRMATION.value,
+            ChildRoutineConfirmation(id, routine_id, ChildRoutineConfirmation.OPERATION_RESET)
+        )
+    )
+    return jsonify({'message': f'Routine {routine_id} removed from {child.name}.'}), 200
+
+
+@child_routine_api.route('/child/<id>/set-routines', methods=['PUT'])
+def set_child_routines(id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': ErrorCodes.UNAUTHORIZED}), 401
+
+    data = request.get_json() or {}
+    routine_ids = data.get('routine_ids')
+    if not isinstance(routine_ids, list):
+        return jsonify({'error': 'routine_ids must be a list'}), 400
+
+    child = _validate_child_for_user(id, user_id)
+    if not child:
+        return jsonify({'error': 'Child not found', 'code': ErrorCodes.CHILD_NOT_FOUND}), 404
+
+    routine_q = Query()
+    valid_ids = []
+    for rid in dict.fromkeys(routine_ids):
+        if routine_db.get((routine_q.id == rid) & ((routine_q.user_id == user_id) | (routine_q.user_id == None))):
+            valid_ids.append(rid)
+
+    old_ids = set(child.routines)
+    new_ids = set(valid_ids)
+    unassigned_ids = old_ids - new_ids
+
+    pending_q = Query()
+    for rid in unassigned_ids:
+        override = get_override(id, rid)
+        if override and override.entity_type == 'routine':
+            delete_override(id, rid)
+
+        delete_schedule(id, rid)
+        delete_extension_for_child_routine(id, rid)
+
+        pending_confirmations_db.remove(
+            (pending_q.child_id == id) & (pending_q.entity_id == rid) &
+            (pending_q.entity_type == 'routine') & (pending_q.user_id == user_id)
+        )
+
+    child_db.update({'routines': valid_ids}, Query().id == id)
+    send_event_for_current_user(Event(EventType.CHILD_ROUTINES_SET.value, ChildRoutinesSet(id, valid_ids)))
+
+    return jsonify({'message': f'Routines set for child {id}.', 'routine_ids': valid_ids, 'count': len(valid_ids)}), 200
+
+
+@child_routine_api.route('/child/<id>/list-routines', methods=['GET'])
+def list_child_routines(id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': ErrorCodes.UNAUTHORIZED}), 401
+
+    child = _validate_child_for_user(id, user_id)
+    if not child:
+        return jsonify({'error': 'Child not found', 'code': ErrorCodes.CHILD_NOT_FOUND}), 404
+
+    routine_q = Query()
+    pending_q = Query()
+    today_local, tz_str = _get_user_today_local(user_id)
+
+    child_routines = []
+    for rid in child.routines:
+        routine_record = routine_db.get((routine_q.id == rid) & ((routine_q.user_id == user_id) | (routine_q.user_id == None)))
+        if not routine_record:
+            continue
+
+        routine = Routine.from_dict(routine_record)
+        override = get_override(id, rid)
+        custom_value = override.custom_value if override and override.entity_type == 'routine' else None
+
+        cr = ChildRoutine(routine.name, routine.points, routine.image_id, routine.id)
+        cr_dict = cr.to_dict()
+        if custom_value is not None:
+            cr_dict['custom_value'] = custom_value
+
+        schedule = get_schedule(id, rid)
+        cr_dict['schedule'] = schedule.to_dict() if schedule else None
+
+        extension = get_extension_for_child_routine(id, rid)
+        cr_dict['extension_date'] = extension.date if extension else None
+
+        items = get_items_for_routine(rid)
+        cr_dict['items'] = [item.to_dict() for item in items]
+
+        pending = pending_confirmations_db.get(
+            (pending_q.child_id == id) & (pending_q.entity_id == rid) &
+            (pending_q.entity_type == 'routine') & (pending_q.user_id == user_id)
+        )
+        if pending:
+            status = pending.get('status')
+            approved_at = pending.get('approved_at')
+            created_at = pending.get('created_at')
+            confirmation_id = pending.get('id')
+
+            if status == 'approved' and _is_iso_timestamp_on_local_day(approved_at, today_local, tz_str):
+                cr_dict['pending_status'] = 'approved'
+                cr_dict['approved_at'] = approved_at
+                cr_dict['pending_confirmation_id'] = confirmation_id
+            elif status == 'pending' and _is_epoch_timestamp_on_local_day(created_at, today_local, tz_str):
+                cr_dict['pending_status'] = 'pending'
+                cr_dict['approved_at'] = None
+                cr_dict['pending_confirmation_id'] = confirmation_id
+            else:
+                pending_id = pending.get('id')
+                if pending_id:
+                    pending_confirmations_db.remove(pending_q.id == pending_id)
+                cr_dict['pending_status'] = None
+                cr_dict['approved_at'] = None
+                cr_dict['pending_confirmation_id'] = None
+        else:
+            cr_dict['pending_status'] = None
+            cr_dict['approved_at'] = None
+            cr_dict['pending_confirmation_id'] = None
+
+        child_routines.append(cr_dict)
+
+    return jsonify({'routines': child_routines}), 200
+
+
+@child_routine_api.route('/child/<id>/list-assignable-routines', methods=['GET'])
+def list_assignable_routines(id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': ErrorCodes.UNAUTHORIZED}), 401
+
+    child = _validate_child_for_user(id, user_id)
+    if not child:
+        return jsonify({'error': 'Child not found', 'code': ErrorCodes.CHILD_NOT_FOUND}), 404
+
+    assigned_ids = set(child.routines)
+    all_routines = [r for r in routine_db.all() if r and r.get('id') and r.get('id') not in assigned_ids]
+
+    name_to_routines = defaultdict(list)
+    for routine in all_routines:
+        name_to_routines[routine.get('name')].append(routine)
+
+    filtered_routines = []
+    for _, routines in name_to_routines.items():
+        user_routines = [r for r in routines if r.get('user_id') is not None]
+        if len(user_routines) == 0:
+            filtered_routines.append(routines[0])
+        elif len(user_routines) == 1:
+            filtered_routines.append(user_routines[0])
+        else:
+            filtered_routines.extend(user_routines)
+
+    assignable = [
+        ChildRoutine(r.get('name'), r.get('points'), r.get('image_id'), r.get('id')).to_dict()
+        for r in filtered_routines
+    ]
+    return jsonify({'routines': assignable, 'count': len(assignable)}), 200
+
+
+@child_routine_api.route('/child/<id>/confirm-routine', methods=['POST'])
+def confirm_routine(id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': ErrorCodes.UNAUTHORIZED}), 401
+
+    data = request.get_json() or {}
+    routine_id = data.get('routine_id')
+    if not routine_id:
+        return jsonify({'error': 'routine_id is required', 'code': ErrorCodes.MISSING_FIELD}), 400
+
+    child = _validate_child_for_user(id, user_id)
+    if not child:
+        return jsonify({'error': 'Child not found', 'code': ErrorCodes.CHILD_NOT_FOUND}), 404
+
+    if routine_id not in child.routines:
+        return jsonify({'error': 'Routine not assigned to child', 'code': ErrorCodes.ENTITY_NOT_ASSIGNED}), 400
+
+    routine = _resolve_routine_for_user(routine_id, user_id)
+    if not routine:
+        return jsonify({'error': 'Routine not found'}), 404
+
+    pending_q = Query()
+    existing = pending_confirmations_db.get(
+        (pending_q.child_id == id) & (pending_q.entity_id == routine_id) &
+        (pending_q.entity_type == 'routine') & (pending_q.user_id == user_id)
+    )
+    if existing:
+        today_local, tz_str = _get_user_today_local(user_id)
+        if existing.get('status') == 'pending':
+            if _is_epoch_timestamp_on_local_day(existing.get('created_at'), today_local, tz_str):
+                return jsonify({'error': 'Routine already pending confirmation', 'code': 'ROUTINE_ALREADY_PENDING'}), 400
+            pending_id = existing.get('id')
+            if pending_id:
+                pending_confirmations_db.remove(pending_q.id == pending_id)
+        if existing.get('status') == 'approved':
+            approved_at = existing.get('approved_at', '')
+            if _is_iso_timestamp_on_local_day(approved_at, today_local, tz_str):
+                return jsonify({'error': 'Routine already completed today', 'code': 'ROUTINE_ALREADY_COMPLETED'}), 400
+            pending_id = existing.get('id')
+            if pending_id:
+                pending_confirmations_db.remove(pending_q.id == pending_id)
+
+    confirmation = PendingConfirmation(
+        child_id=id,
+        entity_id=routine_id,
+        entity_type='routine',
+        user_id=user_id,
+    )
+    pending_confirmations_db.insert(confirmation.to_dict())
+
+    send_event_for_current_user(
+        Event(
+            EventType.CHILD_ROUTINE_CONFIRMATION.value,
+            ChildRoutineConfirmation(id, routine_id, ChildRoutineConfirmation.OPERATION_PENDING)
+        )
+    )
+
+    push_user = users_db.get(Query().id == user_id)
+    if push_user and push_user.get('push_notifications_enabled', True):
+        try:
+            approve_token = create_action_token(user_id, id, routine_id, 'routine', 'approve')
+            deny_token = create_action_token(user_id, id, routine_id, 'routine', 'deny')
+            push_payload = {
+                'type': 'routine_confirmed',
+                'title': 'Routine Pending',
+                'body': f'{child.name} completed {routine.name}',
+                'user_id': user_id,
+                'child_id': id,
+                'child_name': child.name,
+                'entity_id': routine_id,
+                'entity_type': 'routine',
+                'entity_name': routine.name,
+                'approve_token': approve_token.id,
+                'deny_token': deny_token.id,
+            }
+            send_push_to_user(user_id, push_payload)
+        except Exception:
+            pass
+
+    return jsonify({'message': f'Routine {routine.name} confirmed by {child.name}.', 'confirmation_id': confirmation.id}), 200
+
+
+@child_routine_api.route('/child/<id>/cancel-routine-confirmation', methods=['POST'])
+def cancel_routine_confirmation(id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': ErrorCodes.UNAUTHORIZED}), 401
+
+    data = request.get_json() or {}
+    routine_id = data.get('routine_id')
+    if not routine_id:
+        return jsonify({'error': 'routine_id is required', 'code': ErrorCodes.MISSING_FIELD}), 400
+
+    child = _validate_child_for_user(id, user_id)
+    if not child:
+        return jsonify({'error': 'Child not found', 'code': ErrorCodes.CHILD_NOT_FOUND}), 404
+
+    pending_q = Query()
+    existing = pending_confirmations_db.get(
+        (pending_q.child_id == id) & (pending_q.entity_id == routine_id) &
+        (pending_q.entity_type == 'routine') & (pending_q.status == 'pending') &
+        (pending_q.user_id == user_id)
+    )
+    if not existing:
+        return jsonify({'error': 'No pending confirmation found', 'code': 'PENDING_NOT_FOUND'}), 400
+
+    pending_confirmations_db.remove(
+        (pending_q.child_id == id) & (pending_q.entity_id == routine_id) &
+        (pending_q.entity_type == 'routine') & (pending_q.status == 'pending') &
+        (pending_q.user_id == user_id)
+    )
+
+    send_event_for_current_user(
+        Event(
+            EventType.CHILD_ROUTINE_CONFIRMATION.value,
+            ChildRoutineConfirmation(id, routine_id, ChildRoutineConfirmation.OPERATION_RESET)
+        )
+    )
+    return jsonify({'message': 'Routine confirmation cancelled.'}), 200
+
+
+@child_routine_api.route('/child/<id>/approve-routine/<confirmation_id>', methods=['POST'])
+def approve_routine(id, confirmation_id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': ErrorCodes.UNAUTHORIZED}), 401
+
+    child = _validate_child_for_user(id, user_id)
+    if not child:
+        return jsonify({'error': 'Child not found', 'code': ErrorCodes.CHILD_NOT_FOUND}), 404
+
+    pending_q = Query()
+    confirmation = pending_confirmations_db.get(
+        (pending_q.id == confirmation_id) & (pending_q.child_id == id) &
+        (pending_q.entity_type == 'routine') & (pending_q.user_id == user_id)
+    )
+    if not confirmation:
+        return jsonify({'error': 'Pending confirmation not found', 'code': 'PENDING_NOT_FOUND'}), 404
+
+    if confirmation.get('status') != 'pending':
+        return jsonify({'error': 'Confirmation is already resolved', 'code': 'ALREADY_RESOLVED'}), 400
+
+    routine_id = confirmation.get('entity_id')
+    routine = _resolve_routine_for_user(routine_id, user_id)
+    if not routine:
+        return jsonify({'error': 'Routine not found'}), 404
+
+    override = get_override(id, routine_id)
+    points_value = override.custom_value if override and override.entity_type == 'routine' else routine.points
+
+    new_points = max(0, child.points + points_value)
+    child_db.update({'points': new_points}, Query().id == id)
+
+    approved_at = datetime.now(timezone.utc).isoformat()
+    pending_confirmations_db.update(
+        {'status': 'approved', 'approved_at': approved_at},
+        pending_q.id == confirmation_id
+    )
+
+    send_event_for_current_user(
+        Event(
+            EventType.CHILD_ROUTINE_CONFIRMATION.value,
+            ChildRoutineConfirmation(id, routine_id, ChildRoutineConfirmation.OPERATION_APPROVED)
+        )
+    )
+
+    return jsonify({
+        'message': f'Routine {routine.name} approved for {child.name}.',
+        'points': new_points,
+        'id': child.id,
+    }), 200
+
+
+@child_routine_api.route('/child/<id>/reject-routine/<confirmation_id>', methods=['POST'])
+def reject_routine(id, confirmation_id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': ErrorCodes.UNAUTHORIZED}), 401
+
+    child = _validate_child_for_user(id, user_id)
+    if not child:
+        return jsonify({'error': 'Child not found', 'code': ErrorCodes.CHILD_NOT_FOUND}), 404
+
+    pending_q = Query()
+    confirmation = pending_confirmations_db.get(
+        (pending_q.id == confirmation_id) & (pending_q.child_id == id) &
+        (pending_q.entity_type == 'routine') & (pending_q.user_id == user_id)
+    )
+    if not confirmation:
+        return jsonify({'error': 'Pending confirmation not found', 'code': 'PENDING_NOT_FOUND'}), 404
+
+    if confirmation.get('status') != 'pending':
+        return jsonify({'error': 'Confirmation is already resolved', 'code': 'ALREADY_RESOLVED'}), 400
+
+    pending_confirmations_db.update({'status': 'rejected', 'approved_at': None}, pending_q.id == confirmation_id)
+
+    send_event_for_current_user(
+        Event(
+            EventType.CHILD_ROUTINE_CONFIRMATION.value,
+            ChildRoutineConfirmation(id, confirmation.get('entity_id'), ChildRoutineConfirmation.OPERATION_REJECTED)
+        )
+    )
+
+    return jsonify({'message': 'Routine confirmation rejected.'}), 200
+
+
+@child_routine_api.route('/child/<id>/reset-routine/<confirmation_id>', methods=['POST'])
+def reset_routine(id, confirmation_id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': ErrorCodes.UNAUTHORIZED}), 401
+
+    child = _validate_child_for_user(id, user_id)
+    if not child:
+        return jsonify({'error': 'Child not found', 'code': ErrorCodes.CHILD_NOT_FOUND}), 404
+
+    pending_q = Query()
+    confirmation = pending_confirmations_db.get(
+        (pending_q.id == confirmation_id) & (pending_q.child_id == id) &
+        (pending_q.entity_type == 'routine') & (pending_q.user_id == user_id)
+    )
+    if not confirmation:
+        return jsonify({'error': 'Pending confirmation not found', 'code': 'PENDING_NOT_FOUND'}), 404
+
+    routine_id = confirmation.get('entity_id')
+    pending_confirmations_db.remove(pending_q.id == confirmation_id)
+
+    send_event_for_current_user(
+        Event(
+            EventType.CHILD_ROUTINE_CONFIRMATION.value,
+            ChildRoutineConfirmation(id, routine_id, ChildRoutineConfirmation.OPERATION_RESET)
+        )
+    )
+    return jsonify({'message': 'Routine reset to available.'}), 200
+
+
+@child_routine_api.route('/child/<id>/trigger-routine', methods=['POST'])
+def trigger_child_routine(id):
+    """Parent-triggered routine confirmation — directly awards points."""
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': ErrorCodes.UNAUTHORIZED}), 401
+
+    data = request.get_json() or {}
+    routine_id = data.get('routine_id')
+    if not routine_id:
+        return jsonify({'error': 'routine_id is required', 'code': ErrorCodes.MISSING_FIELD}), 400
+
+    child = _validate_child_for_user(id, user_id)
+    if not child:
+        return jsonify({'error': 'Child not found', 'code': ErrorCodes.CHILD_NOT_FOUND}), 404
+
+    if routine_id not in child.routines:
+        return jsonify({'error': 'Routine not assigned to child', 'code': ErrorCodes.ENTITY_NOT_ASSIGNED}), 400
+
+    routine = _resolve_routine_for_user(routine_id, user_id)
+    if not routine:
+        return jsonify({'error': 'Routine not found'}), 404
+
+    # Check for override
+    override = get_override(id, routine_id)
+    points_value = override.custom_value if override and override.entity_type == 'routine' else routine.points
+
+    # Award points
+    new_points = max(0, child.points + points_value)
+    child_db.update({'points': new_points}, Query().id == id)
+
+    # Create an approved pending confirmation so it shows as completed in the routine list
+    pending_q = Query()
+    existing = pending_confirmations_db.get(
+        (pending_q.child_id == id) & (pending_q.entity_id == routine_id) &
+        (pending_q.entity_type == 'routine') & (pending_q.user_id == user_id)
+    )
+    if existing:
+        today_local, tz_str = _get_user_today_local(user_id)
+        # Remove old confirmation if it exists and is not from today
+        if existing.get('status') == 'approved' and _is_iso_timestamp_on_local_day(existing.get('approved_at'), today_local, tz_str):
+            return jsonify({'error': 'Routine already completed today', 'code': 'ROUTINE_ALREADY_COMPLETED'}), 400
+        pending_id = existing.get('id')
+        if pending_id:
+            pending_confirmations_db.remove(pending_q.id == pending_id)
+
+    confirmation = PendingConfirmation(
+        child_id=id,
+        entity_id=routine_id,
+        entity_type='routine',
+        user_id=user_id,
+        status='approved',
+        approved_at=datetime.now(timezone.utc).isoformat()
+    )
+    pending_confirmations_db.insert(confirmation.to_dict())
+
+    send_event_for_current_user(
+        Event(
+            EventType.CHILD_ROUTINE_CONFIRMATION.value,
+            ChildRoutineConfirmation(id, routine_id, ChildRoutineConfirmation.OPERATION_APPROVED)
+        )
+    )
+
+    return jsonify({
+        'message': f'Routine {routine.name} awarded to {child.name}.',
+        'points': new_points,
+        'id': child.id,
+    }), 200

backend/api/digest_action_api.py

@@ -5,7 +5,7 @@ from tinydb import Query
 
 from utils.digest_token import validate_and_consume_token, validate_unsubscribe_token, peek_token
 from db.db import users_db
-from api.child_action_helpers import approve_chore, reject_chore, approve_reward_request, deny_reward
+from api.child_action_helpers import approve_chore, reject_chore, approve_reward_request, deny_reward, approve_routine, reject_routine
 from api.utils import get_validated_user_id
 
 digest_action_api = Blueprint('digest_action_api', __name__)
@@ -79,6 +79,10 @@ def execute_digest_action(token_id: str):
             approve_reward_request(user_id, token.child_id, token.entity_id)
         elif token.entity_type == 'reward' and token.action == 'deny':
             deny_reward(user_id, token.child_id, token.entity_id)
+        elif token.entity_type == 'routine' and token.action == 'approve':
+            approve_routine(user_id, token.child_id, token.entity_id)
+        elif token.entity_type == 'routine' and token.action == 'deny':
+            reject_routine(user_id, token.child_id, token.entity_id)
         else:
             return jsonify({'error': 'Unknown action', 'code': 'INVALID_ACTION'}), 400
     except Exception as e:

backend/api/routine_api.py

@@ -0,0 +1,185 @@
+from flask import Blueprint, request, jsonify
+from tinydb import Query
+
+from api.utils import send_event_for_current_user, get_validated_user_id
+from db.db import routine_db, child_db, pending_confirmations_db
+from db.child_overrides import delete_overrides_for_entity
+from db.routine_items import delete_for_routine
+from db.routine_schedules import delete_schedules_for_routine
+from db.routine_extensions import delete_extensions_for_routine
+from events.types.event import Event
+from events.types.event_types import EventType
+from events.types.routine_modified import RoutineModified
+from events.types.child_routines_set import ChildRoutinesSet
+from models.routine import Routine
+
+routine_api = Blueprint('routine_api', __name__)
+
+
+@routine_api.route('/routine/add', methods=['PUT'])
+def add_routine():
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': 'UNAUTHORIZED'}), 401
+
+    data = request.get_json() or {}
+    name = data.get('name')
+    points = data.get('points')
+    image = data.get('image_id', '')
+
+    if not name or points is None:
+        return jsonify({'error': 'Name and points are required'}), 400
+
+    routine = Routine(name=name, points=points, image_id=image, user_id=user_id)
+    routine_db.insert(routine.to_dict())
+
+    send_event_for_current_user(
+        Event(EventType.ROUTINE_MODIFIED.value, RoutineModified(routine.id, RoutineModified.OPERATION_ADD))
+    )
+    return jsonify({'message': f'Routine {name} added.', 'routine': routine.to_dict()}), 201
+
+
+@routine_api.route('/routine/<id>', methods=['GET'])
+def get_routine(id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': 'UNAUTHORIZED'}), 401
+
+    q = Query()
+    result = routine_db.search((q.id == id) & ((q.user_id == user_id) | (q.user_id == None)))
+    if not result:
+        return jsonify({'error': 'Routine not found'}), 404
+
+    return jsonify(result[0]), 200
+
+
+@routine_api.route('/routine/list', methods=['GET'])
+def list_routines():
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': 'UNAUTHORIZED'}), 401
+
+    ids_param = request.args.get('ids')
+    q = Query()
+    routines = routine_db.search((q.user_id == user_id) | (q.user_id == None))
+
+    if ids_param is not None:
+        if ids_param.strip() == '':
+            routines = []
+        else:
+            ids = set(ids_param.split(','))
+            routines = [routine for routine in routines if routine.get('id') in ids]
+
+    user_routines = {r['name'].strip().lower(): r for r in routines if r.get('user_id') == user_id}
+    filtered_routines = []
+    for routine in routines:
+        if routine.get('user_id') is None and routine['name'].strip().lower() in user_routines:
+            continue
+        filtered_routines.append(routine)
+
+    user_created = sorted(
+        [r for r in filtered_routines if r.get('user_id') == user_id],
+        key=lambda x: x['name'].lower(),
+    )
+    default_items = sorted(
+        [r for r in filtered_routines if r.get('user_id') is None],
+        key=lambda x: x['name'].lower(),
+    )
+
+    return jsonify({'routines': user_created + default_items}), 200
+
+
+@routine_api.route('/routine/<id>/edit', methods=['PUT'])
+def edit_routine(id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': 'UNAUTHORIZED'}), 401
+
+    q = Query()
+    existing = routine_db.get((q.id == id) & ((q.user_id == user_id) | (q.user_id == None)))
+    if not existing:
+        return jsonify({'error': 'Routine not found'}), 404
+
+    routine = Routine.from_dict(existing)
+    data = request.get_json(force=True) or {}
+    is_dirty = False
+
+    if 'name' in data:
+        name = data.get('name', '').strip()
+        if not name:
+            return jsonify({'error': 'Name cannot be empty'}), 400
+        routine.name = name
+        is_dirty = True
+
+    if 'points' in data:
+        points = data.get('points')
+        if not isinstance(points, int) or points <= 0:
+            return jsonify({'error': 'Points must be a positive integer'}), 400
+        routine.points = points
+        is_dirty = True
+
+    if 'image_id' in data:
+        routine.image_id = data.get('image_id', '')
+        is_dirty = True
+
+    if not is_dirty:
+        return jsonify({'error': 'No valid fields to update'}), 400
+
+    if routine.user_id is None:
+        new_routine = Routine(name=routine.name, points=routine.points, image_id=routine.image_id, user_id=user_id)
+        routine_db.insert(new_routine.to_dict())
+        send_event_for_current_user(
+            Event(EventType.ROUTINE_MODIFIED.value, RoutineModified(new_routine.id, RoutineModified.OPERATION_ADD))
+        )
+        return jsonify(new_routine.to_dict()), 200
+
+    routine_db.update(routine.to_dict(), q.id == id)
+    send_event_for_current_user(
+        Event(EventType.ROUTINE_MODIFIED.value, RoutineModified(id, RoutineModified.OPERATION_EDIT))
+    )
+    return jsonify(routine.to_dict()), 200
+
+
+@routine_api.route('/routine/<id>', methods=['DELETE'])
+def delete_routine(id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': 'UNAUTHORIZED'}), 401
+
+    q = Query()
+    routine = routine_db.get(q.id == id)
+    if not routine:
+        return jsonify({'error': 'Routine not found'}), 404
+
+    if routine.get('user_id') is None:
+        return jsonify({'error': 'System routines cannot be deleted.'}), 403
+
+    removed = routine_db.remove((q.id == id) & (q.user_id == user_id))
+    if not removed:
+        return jsonify({'error': 'Routine not found'}), 404
+
+    delete_overrides_for_entity(id)
+    delete_for_routine(id)
+    delete_schedules_for_routine(id)
+    delete_extensions_for_routine(id)
+
+    pending_q = Query()
+    pending_confirmations_db.remove(
+        (pending_q.entity_id == id) & (pending_q.entity_type == 'routine') & (pending_q.user_id == user_id)
+    )
+
+    child_q = Query()
+    children = child_db.search(child_q.user_id == user_id)
+    for child in children:
+        routine_ids = child.get('routines', [])
+        if id in routine_ids:
+            routine_ids = [rid for rid in routine_ids if rid != id]
+            child_db.update({'routines': routine_ids}, child_q.id == child.get('id'))
+            send_event_for_current_user(
+                Event(EventType.CHILD_ROUTINES_SET.value, ChildRoutinesSet(child.get('id'), routine_ids))
+            )
+
+    send_event_for_current_user(
+        Event(EventType.ROUTINE_MODIFIED.value, RoutineModified(id, RoutineModified.OPERATION_DELETE))
+    )
+    return jsonify({'message': f'Routine {id} deleted.'}), 200

backend/api/routine_item_api.py

@@ -0,0 +1,126 @@
+from flask import Blueprint, request, jsonify
+from tinydb import Query
+
+from api.utils import get_validated_user_id, send_event_for_current_user
+from db.db import routine_db
+from db.routine_items import add_item, delete_item, get_item, get_items_for_routine, update_item
+from events.types.event import Event
+from events.types.event_types import EventType
+from events.types.routine_modified import RoutineModified
+from models.routine_item import RoutineItem
+
+routine_item_api = Blueprint('routine_item_api', __name__)
+
+
+def _validate_routine_owned_by_user(routine_id: str, user_id: str):
+    q = Query()
+    return routine_db.get((q.id == routine_id) & ((q.user_id == user_id) | (q.user_id == None)))
+
+
+@routine_item_api.route('/routine/<routine_id>/item/add', methods=['PUT'])
+def add_routine_item(routine_id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': 'UNAUTHORIZED'}), 401
+
+    routine = _validate_routine_owned_by_user(routine_id, user_id)
+    if not routine:
+        return jsonify({'error': 'Routine not found'}), 404
+
+    data = request.get_json() or {}
+    name = data.get('name', '').strip()
+    image_id = data.get('image_id')
+
+    if not name:
+        return jsonify({'error': 'name is required'}), 400
+
+    existing_items = get_items_for_routine(routine_id)
+    order = data.get('order', len(existing_items))
+
+    item = RoutineItem(routine_id=routine_id, name=name, image_id=image_id, order=order)
+    add_item(item)
+
+    send_event_for_current_user(
+        Event(EventType.ROUTINE_MODIFIED.value, RoutineModified(routine_id, RoutineModified.OPERATION_EDIT))
+    )
+    return jsonify(item.to_dict()), 201
+
+
+@routine_item_api.route('/routine/<routine_id>/item/<item_id>/edit', methods=['PUT'])
+def edit_routine_item(routine_id, item_id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': 'UNAUTHORIZED'}), 401
+
+    routine = _validate_routine_owned_by_user(routine_id, user_id)
+    if not routine:
+        return jsonify({'error': 'Routine not found'}), 404
+
+    existing = get_item(item_id)
+    if not existing or existing.routine_id != routine_id:
+        return jsonify({'error': 'Item not found'}), 404
+
+    data = request.get_json(force=True) or {}
+    is_dirty = False
+
+    if 'name' in data:
+        name = data.get('name', '').strip()
+        if not name:
+            return jsonify({'error': 'name cannot be empty'}), 400
+        existing.name = name
+        is_dirty = True
+
+    if 'image_id' in data:
+        existing.image_id = data.get('image_id')
+        is_dirty = True
+
+    if 'order' in data:
+        order = data.get('order')
+        if not isinstance(order, int) or order < 0:
+            return jsonify({'error': 'order must be a non-negative integer'}), 400
+        existing.order = order
+        is_dirty = True
+
+    if not is_dirty:
+        return jsonify({'error': 'No valid fields to update'}), 400
+
+    update_item(existing)
+    send_event_for_current_user(
+        Event(EventType.ROUTINE_MODIFIED.value, RoutineModified(routine_id, RoutineModified.OPERATION_EDIT))
+    )
+    return jsonify(existing.to_dict()), 200
+
+
+@routine_item_api.route('/routine/<routine_id>/item/<item_id>', methods=['DELETE'])
+def delete_routine_item(routine_id, item_id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': 'UNAUTHORIZED'}), 401
+
+    routine = _validate_routine_owned_by_user(routine_id, user_id)
+    if not routine:
+        return jsonify({'error': 'Routine not found'}), 404
+
+    item = get_item(item_id)
+    if not item or item.routine_id != routine_id:
+        return jsonify({'error': 'Item not found'}), 404
+
+    delete_item(item_id)
+    send_event_for_current_user(
+        Event(EventType.ROUTINE_MODIFIED.value, RoutineModified(routine_id, RoutineModified.OPERATION_EDIT))
+    )
+    return jsonify({'message': 'Item deleted'}), 200
+
+
+@routine_item_api.route('/routine/<routine_id>/items', methods=['GET'])
+def list_routine_items(routine_id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': 'UNAUTHORIZED'}), 401
+
+    routine = _validate_routine_owned_by_user(routine_id, user_id)
+    if not routine:
+        return jsonify({'error': 'Routine not found'}), 404
+
+    items = [item.to_dict() for item in get_items_for_routine(routine_id)]
+    return jsonify({'items': items, 'count': len(items)}), 200

backend/api/routine_schedule_api.py

@@ -0,0 +1,178 @@
+from flask import Blueprint, request, jsonify
+from tinydb import Query
+
+from api.error_codes import ErrorCodes
+from api.utils import get_validated_user_id, send_event_for_current_user
+from db.db import child_db, pending_confirmations_db
+from db.routine_extensions import add_extension, delete_extension_for_child_routine, get_extension
+from db.routine_schedules import delete_schedule, get_schedule, upsert_schedule
+from events.types.child_routine_confirmation import ChildRoutineConfirmation
+from events.types.event import Event
+from events.types.event_types import EventType
+from events.types.routine_schedule_modified import RoutineScheduleModified
+from events.types.routine_time_extended import RoutineTimeExtended
+from models.routine_extension import RoutineExtension
+from models.routine_schedule import RoutineSchedule
+
+routine_schedule_api = Blueprint('routine_schedule_api', __name__)
+
+
+def _validate_child(child_id: str, user_id: str):
+    q = Query()
+    result = child_db.search((q.id == child_id) & (q.user_id == user_id))
+    return result[0] if result else None
+
+
+@routine_schedule_api.route('/child/<child_id>/routine/<routine_id>/schedule', methods=['GET'])
+def get_routine_schedule(child_id, routine_id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': ErrorCodes.UNAUTHORIZED}), 401
+
+    if not _validate_child(child_id, user_id):
+        return jsonify({'error': 'Child not found', 'code': ErrorCodes.CHILD_NOT_FOUND}), 404
+
+    schedule = get_schedule(child_id, routine_id)
+    if not schedule:
+        return jsonify({'error': 'Schedule not found'}), 404
+
+    return jsonify(schedule.to_dict()), 200
+
+
+@routine_schedule_api.route('/child/<child_id>/routine/<routine_id>/schedule', methods=['PUT'])
+def set_routine_schedule(child_id, routine_id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': ErrorCodes.UNAUTHORIZED}), 401
+
+    if not _validate_child(child_id, user_id):
+        return jsonify({'error': 'Child not found', 'code': ErrorCodes.CHILD_NOT_FOUND}), 404
+
+    data = request.get_json() or {}
+    mode = data.get('mode')
+    if mode not in ('days', 'interval'):
+        return jsonify({'error': 'mode must be "days" or "interval"', 'code': ErrorCodes.INVALID_VALUE}), 400
+
+    enabled = data.get('enabled', True)
+    if not isinstance(enabled, bool):
+        return jsonify({'error': 'enabled must be a boolean', 'code': ErrorCodes.INVALID_VALUE}), 400
+
+    if mode == 'days':
+        day_configs = data.get('day_configs', [])
+        if not isinstance(day_configs, list):
+            return jsonify({'error': 'day_configs must be a list', 'code': ErrorCodes.INVALID_VALUE}), 400
+
+        schedule = RoutineSchedule(
+            child_id=child_id,
+            routine_id=routine_id,
+            mode='days',
+            day_configs=day_configs,
+            default_hour=data.get('default_hour', 8),
+            default_minute=data.get('default_minute', 0),
+            default_has_deadline=data.get('default_has_deadline', True),
+            enabled=enabled,
+        )
+    else:
+        interval_days = data.get('interval_days', 2)
+        anchor_date = data.get('anchor_date', '')
+        interval_has_deadline = data.get('interval_has_deadline', True)
+        interval_hour = data.get('interval_hour', 0)
+        interval_minute = data.get('interval_minute', 0)
+
+        if not isinstance(interval_days, int) or not (1 <= interval_days <= 7):
+            return jsonify({'error': 'interval_days must be an integer between 1 and 7', 'code': ErrorCodes.INVALID_VALUE}), 400
+
+        schedule = RoutineSchedule(
+            child_id=child_id,
+            routine_id=routine_id,
+            mode='interval',
+            interval_days=interval_days,
+            anchor_date=anchor_date,
+            interval_has_deadline=interval_has_deadline,
+            interval_hour=interval_hour,
+            interval_minute=interval_minute,
+            enabled=enabled,
+        )
+
+    delete_extension_for_child_routine(child_id, routine_id)
+    upsert_schedule(schedule)
+
+    pending_q = Query()
+    pending_routines = pending_confirmations_db.search(
+        (pending_q.child_id == child_id) & (pending_q.entity_id == routine_id) &
+        (pending_q.entity_type == 'routine') & (pending_q.status == 'pending')
+    )
+    for _ in pending_routines:
+        pending_confirmations_db.remove(
+            (pending_q.child_id == child_id) & (pending_q.entity_id == routine_id) &
+            (pending_q.entity_type == 'routine') & (pending_q.status == 'pending')
+        )
+        send_event_for_current_user(
+            Event(
+                EventType.CHILD_ROUTINE_CONFIRMATION.value,
+                ChildRoutineConfirmation(child_id, routine_id, ChildRoutineConfirmation.OPERATION_RESET)
+            )
+        )
+
+    send_event_for_current_user(
+        Event(
+            EventType.ROUTINE_SCHEDULE_MODIFIED.value,
+            RoutineScheduleModified(child_id, routine_id, RoutineScheduleModified.OPERATION_SET)
+        )
+    )
+
+    return jsonify(schedule.to_dict()), 200
+
+
+@routine_schedule_api.route('/child/<child_id>/routine/<routine_id>/schedule', methods=['DELETE'])
+def delete_routine_schedule(child_id, routine_id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': ErrorCodes.UNAUTHORIZED}), 401
+
+    if not _validate_child(child_id, user_id):
+        return jsonify({'error': 'Child not found', 'code': ErrorCodes.CHILD_NOT_FOUND}), 404
+
+    removed = delete_schedule(child_id, routine_id)
+    if not removed:
+        return jsonify({'error': 'Schedule not found'}), 404
+
+    send_event_for_current_user(
+        Event(
+            EventType.ROUTINE_SCHEDULE_MODIFIED.value,
+            RoutineScheduleModified(child_id, routine_id, RoutineScheduleModified.OPERATION_DELETED)
+        )
+    )
+    return jsonify({'message': 'Schedule deleted'}), 200
+
+
+@routine_schedule_api.route('/child/<child_id>/routine/<routine_id>/extend', methods=['POST'])
+def extend_routine_time(child_id, routine_id):
+    user_id = get_validated_user_id()
+    if not user_id:
+        return jsonify({'error': 'Unauthorized', 'code': ErrorCodes.UNAUTHORIZED}), 401
+
+    if not _validate_child(child_id, user_id):
+        return jsonify({'error': 'Child not found', 'code': ErrorCodes.CHILD_NOT_FOUND}), 404
+
+    data = request.get_json() or {}
+    date = data.get('date')
+    if not date or not isinstance(date, str):
+        return jsonify({'error': 'date is required (ISO date string)', 'code': ErrorCodes.MISSING_FIELD}), 400
+
+    existing = get_extension(child_id, routine_id, date)
+    if existing:
+        return jsonify({'error': 'Routine already extended for this date', 'code': 'ALREADY_EXTENDED'}), 409
+
+    delete_extension_for_child_routine(child_id, routine_id)
+    extension = RoutineExtension(child_id=child_id, routine_id=routine_id, date=date)
+    add_extension(extension)
+
+    send_event_for_current_user(
+        Event(
+            EventType.ROUTINE_TIME_EXTENDED.value,
+            RoutineTimeExtended(child_id, routine_id)
+        )
+    )
+
+    return jsonify(extension.to_dict()), 200

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()

backend/config/version.py

@@ -2,7 +2,7 @@
 # file: config/version.py
 import os
 
-BASE_VERSION = "1.0.14"  # update manually when releasing features
+BASE_VERSION = "1.0.16"  # update manually when releasing features
 
 def get_full_version() -> str:
     """

backend/db/db.py

@@ -69,6 +69,10 @@ class LockedTable:
 
 child_path = os.path.join(base_dir, 'children.json')
 task_path = os.path.join(base_dir, 'tasks.json')
+routine_path = os.path.join(base_dir, 'routines.json')
+routine_items_path = os.path.join(base_dir, 'routine_items.json')
+routine_schedules_path = os.path.join(base_dir, 'routine_schedules.json')
+routine_extensions_path = os.path.join(base_dir, 'routine_extensions.json')
 reward_path = os.path.join(base_dir, 'rewards.json')
 image_path = os.path.join(base_dir, 'images.json')
 pending_reward_path = os.path.join(base_dir, 'pending_rewards.json')
@@ -85,6 +89,10 @@ digest_action_tokens_path = os.path.join(base_dir, 'digest_action_tokens.json')
 # Use separate TinyDB instances/files for each collection
 _child_db = TinyDB(child_path, indent=2)
 _task_db = TinyDB(task_path, indent=2)
+_routine_db = TinyDB(routine_path, indent=2)
+_routine_items_db = TinyDB(routine_items_path, indent=2)
+_routine_schedules_db = TinyDB(routine_schedules_path, indent=2)
+_routine_extensions_db = TinyDB(routine_extensions_path, indent=2)
 _reward_db = TinyDB(reward_path, indent=2)
 _image_db = TinyDB(image_path, indent=2)
 _pending_rewards_db = TinyDB(pending_reward_path, indent=2)
@@ -101,6 +109,10 @@ _digest_action_tokens_db = TinyDB(digest_action_tokens_path, indent=2)
 # Expose table objects wrapped with locking
 child_db = LockedTable(_child_db)
 task_db = LockedTable(_task_db)
+routine_db = LockedTable(_routine_db)
+routine_items_db = LockedTable(_routine_items_db)
+routine_schedules_db = LockedTable(_routine_schedules_db)
+routine_extensions_db = LockedTable(_routine_extensions_db)
 reward_db = LockedTable(_reward_db)
 image_db = LockedTable(_image_db)
 pending_reward_db = LockedTable(_pending_rewards_db)
@@ -117,6 +129,10 @@ digest_action_tokens_db = LockedTable(_digest_action_tokens_db)
 if os.environ.get('DB_ENV', 'prod') == 'test':
     child_db.truncate()
     task_db.truncate()
+    routine_db.truncate()
+    routine_items_db.truncate()
+    routine_schedules_db.truncate()
+    routine_extensions_db.truncate()
     reward_db.truncate()
     image_db.truncate()
     pending_reward_db.truncate()

backend/db/routine_extensions.py

@@ -0,0 +1,41 @@
+from tinydb import Query
+from db.db import routine_extensions_db
+from models.routine_extension import RoutineExtension
+
+
+def get_extension(child_id: str, routine_id: str, date: str) -> RoutineExtension | None:
+    q = Query()
+    result = routine_extensions_db.search(
+        (q.child_id == child_id) & (q.routine_id == routine_id) & (q.date == date)
+    )
+    if not result:
+        return None
+    return RoutineExtension.from_dict(result[0])
+
+
+def add_extension(extension: RoutineExtension) -> None:
+    routine_extensions_db.insert(extension.to_dict())
+
+
+def delete_extensions_for_child(child_id: str) -> None:
+    q = Query()
+    routine_extensions_db.remove(q.child_id == child_id)
+
+
+def delete_extensions_for_routine(routine_id: str) -> None:
+    q = Query()
+    routine_extensions_db.remove(q.routine_id == routine_id)
+
+
+def delete_extension_for_child_routine(child_id: str, routine_id: str) -> None:
+    q = Query()
+    routine_extensions_db.remove((q.child_id == child_id) & (q.routine_id == routine_id))
+
+
+def get_extension_for_child_routine(child_id: str, routine_id: str) -> RoutineExtension | None:
+    q = Query()
+    results = routine_extensions_db.search((q.child_id == child_id) & (q.routine_id == routine_id))
+    if not results:
+        return None
+    latest = max(results, key=lambda r: r.get('date', ''))
+    return RoutineExtension.from_dict(latest)

backend/db/routine_items.py

@@ -0,0 +1,45 @@
+from tinydb import Query
+from db.db import routine_items_db
+from models.routine_item import RoutineItem
+
+
+def add_item(item: RoutineItem) -> None:
+    routine_items_db.insert(item.to_dict())
+
+
+def get_item(item_id: str) -> RoutineItem | None:
+    q = Query()
+    result = routine_items_db.search(q.id == item_id)
+    if not result:
+        return None
+    return RoutineItem.from_dict(result[0])
+
+
+def get_items_for_routine(routine_id: str) -> list[RoutineItem]:
+    q = Query()
+    results = routine_items_db.search(q.routine_id == routine_id)
+    items = [RoutineItem.from_dict(r) for r in results]
+    return sorted(items, key=lambda i: (i.order, i.created_at))
+
+
+def update_item(item: RoutineItem) -> bool:
+    q = Query()
+    existing = routine_items_db.get(q.id == item.id)
+    if not existing:
+        return False
+    routine_items_db.update(item.to_dict(), q.id == item.id)
+    return True
+
+
+def delete_item(item_id: str) -> bool:
+    q = Query()
+    existing = routine_items_db.get(q.id == item_id)
+    if not existing:
+        return False
+    routine_items_db.remove(q.id == item_id)
+    return True
+
+
+def delete_for_routine(routine_id: str) -> None:
+    q = Query()
+    routine_items_db.remove(q.routine_id == routine_id)

backend/db/routine_schedules.py

@@ -0,0 +1,42 @@
+from tinydb import Query
+from db.db import routine_schedules_db
+from models.routine_schedule import RoutineSchedule
+
+
+def get_schedule(child_id: str, routine_id: str) -> RoutineSchedule | None:
+    q = Query()
+    result = routine_schedules_db.search((q.child_id == child_id) & (q.routine_id == routine_id))
+    if not result:
+        return None
+    return RoutineSchedule.from_dict(result[0])
+
+
+def upsert_schedule(schedule: RoutineSchedule) -> None:
+    q = Query()
+    existing = routine_schedules_db.get((q.child_id == schedule.child_id) & (q.routine_id == schedule.routine_id))
+    if existing:
+        routine_schedules_db.update(
+            schedule.to_dict(),
+            (q.child_id == schedule.child_id) & (q.routine_id == schedule.routine_id)
+        )
+    else:
+        routine_schedules_db.insert(schedule.to_dict())
+
+
+def delete_schedule(child_id: str, routine_id: str) -> bool:
+    q = Query()
+    existing = routine_schedules_db.get((q.child_id == child_id) & (q.routine_id == routine_id))
+    if not existing:
+        return False
+    routine_schedules_db.remove((q.child_id == child_id) & (q.routine_id == routine_id))
+    return True
+
+
+def delete_schedules_for_child(child_id: str) -> None:
+    q = Query()
+    routine_schedules_db.remove(q.child_id == child_id)
+
+
+def delete_schedules_for_routine(routine_id: str) -> None:
+    q = Query()
+    routine_schedules_db.remove(q.routine_id == routine_id)

backend/db/routines.py

@@ -0,0 +1,39 @@
+from tinydb import Query
+from db.db import routine_db
+from models.routine import Routine
+
+
+def add_routine(routine: Routine) -> None:
+    routine_db.insert(routine.to_dict())
+
+
+def get_routine(routine_id: str) -> Routine | None:
+    q = Query()
+    result = routine_db.search(q.id == routine_id)
+    if not result:
+        return None
+    return Routine.from_dict(result[0])
+
+
+def update_routine(routine: Routine) -> bool:
+    q = Query()
+    existing = routine_db.get(q.id == routine.id)
+    if not existing:
+        return False
+    routine_db.update(routine.to_dict(), q.id == routine.id)
+    return True
+
+
+def delete_routine(routine_id: str) -> bool:
+    q = Query()
+    existing = routine_db.get(q.id == routine_id)
+    if not existing:
+        return False
+    routine_db.remove(q.id == routine_id)
+    return True
+
+
+def list_routines_for_user(user_id: str) -> list[Routine]:
+    q = Query()
+    results = routine_db.search((q.user_id == user_id) | (q.user_id == None))
+    return [Routine.from_dict(r) for r in results]

backend/events/types/child_routine_confirmation.py

@@ -0,0 +1,15 @@
+from events.types.payload import Payload
+
+
+class ChildRoutineConfirmation(Payload):
+    OPERATION_PENDING = "PENDING"
+    OPERATION_APPROVED = "APPROVED"
+    OPERATION_REJECTED = "REJECTED"
+    OPERATION_RESET = "RESET"
+
+    def __init__(self, child_id: str, routine_id: str, operation: str):
+        super().__init__({
+            'child_id': child_id,
+            'routine_id': routine_id,
+            'operation': operation
+        })

backend/events/types/child_routines_set.py

@@ -0,0 +1,9 @@
+from events.types.payload import Payload
+
+
+class ChildRoutinesSet(Payload):
+    def __init__(self, child_id: str, routine_ids: list[str]):
+        super().__init__({
+            'child_id': child_id,
+            'routine_ids': routine_ids
+        })

backend/events/types/event_types.py

@@ -28,4 +28,10 @@ class EventType(Enum):
     CHORE_TIME_EXTENDED = "chore_time_extended"
     CHILD_CHORE_CONFIRMATION = "child_chore_confirmation"
 
+    ROUTINE_MODIFIED = "routine_modified"
+    CHILD_ROUTINES_SET = "child_routines_set"
+    ROUTINE_SCHEDULE_MODIFIED = "routine_schedule_modified"
+    ROUTINE_TIME_EXTENDED = "routine_time_extended"
+    CHILD_ROUTINE_CONFIRMATION = "child_routine_confirmation"
+
     FORCE_LOGOUT = "force_logout"

backend/events/types/routine_modified.py

@@ -0,0 +1,13 @@
+from events.types.payload import Payload
+
+
+class RoutineModified(Payload):
+    OPERATION_ADD = "ADD"
+    OPERATION_EDIT = "EDIT"
+    OPERATION_DELETE = "DELETE"
+
+    def __init__(self, routine_id: str, operation: str):
+        super().__init__({
+            'routine_id': routine_id,
+            'operation': operation
+        })

backend/events/types/routine_schedule_modified.py

@@ -0,0 +1,13 @@
+from events.types.payload import Payload
+
+
+class RoutineScheduleModified(Payload):
+    OPERATION_SET = 'SET'
+    OPERATION_DELETED = 'DELETED'
+
+    def __init__(self, child_id: str, routine_id: str, operation: str):
+        super().__init__({
+            'child_id': child_id,
+            'routine_id': routine_id,
+            'operation': operation,
+        })

backend/events/types/routine_time_extended.py

@@ -0,0 +1,9 @@
+from events.types.payload import Payload
+
+
+class RoutineTimeExtended(Payload):
+    def __init__(self, child_id: str, routine_id: str):
+        super().__init__({
+            'child_id': child_id,
+            'routine_id': routine_id,
+        })

backend/main.py

@@ -14,6 +14,10 @@ from api.image_api import image_api
 from api.kindness_api import kindness_api
 from api.penalty_api import penalty_api
 from api.reward_api import reward_api
+from api.routine_api import routine_api
+from api.routine_item_api import routine_item_api
+from api.child_routine_api import child_routine_api
+from api.routine_schedule_api import routine_schedule_api
 from api.task_api import task_api
 from api.tracking_api import tracking_api
 from api.user_api import user_api
@@ -54,6 +58,10 @@ app.register_blueprint(chore_schedule_api)
 app.register_blueprint(kindness_api)
 app.register_blueprint(penalty_api)
 app.register_blueprint(reward_api)
+app.register_blueprint(routine_api)
+app.register_blueprint(routine_item_api)
+app.register_blueprint(child_routine_api)
+app.register_blueprint(routine_schedule_api)
 app.register_blueprint(task_api)
 app.register_blueprint(image_api)
 app.register_blueprint(auth_api, url_prefix='/auth')

backend/models/child.py

@@ -6,6 +6,7 @@ class Child(BaseModel):
     name: str
     age: int | None = None
     tasks: list[str] = field(default_factory=list)
+    routines: list[str] = field(default_factory=list)
     rewards: list[str] = field(default_factory=list)
     points: int = 0
     image_id: str | None = None
@@ -17,6 +18,7 @@ class Child(BaseModel):
             name=d.get('name'),
             age=d.get('age'),
             tasks=d.get('tasks', []),
+            routines=d.get('routines', []),
             rewards=d.get('rewards', []),
             points=d.get('points', 0),
             image_id=d.get('image_id'),
@@ -32,6 +34,7 @@ class Child(BaseModel):
             'name': self.name,
             'age': self.age,
             'tasks': self.tasks,
+            'routines': self.routines,
             'rewards': self.rewards,
             'points': self.points,
             'image_id': self.image_id,

backend/models/child_override.py

@@ -16,15 +16,15 @@ class ChildOverride(BaseModel):
     """
     child_id: str
     entity_id: str
-    entity_type: Literal['task', 'reward', 'chore', 'kindness', 'penalty']
+    entity_type: Literal['task', 'reward', 'chore', 'kindness', 'penalty', 'routine']
     custom_value: int
 
     def __post_init__(self):
         """Validate custom_value range and entity_type."""
         if self.custom_value < 0 or self.custom_value > 10000:
             raise ValueError("custom_value must be between 0 and 10000")
-        if self.entity_type not in ['task', 'reward', 'chore', 'kindness', 'penalty']:
-            raise ValueError("entity_type must be 'task', 'reward', 'chore', 'kindness', or 'penalty'")
+        if self.entity_type not in ['task', 'reward', 'chore', 'kindness', 'penalty', 'routine']:
+            raise ValueError("entity_type must be 'task', 'reward', 'chore', 'kindness', 'penalty', or 'routine'")
 
     @classmethod
     def from_dict(cls, d: dict):
@@ -52,7 +52,7 @@ class ChildOverride(BaseModel):
     def create_override(
         child_id: str,
         entity_id: str,
-        entity_type: Literal['task', 'reward', 'chore', 'kindness', 'penalty'],
+        entity_type: Literal['task', 'reward', 'chore', 'kindness', 'penalty', 'routine'],
         custom_value: int
     ) -> 'ChildOverride':
         """Factory method to create a new override."""

backend/models/pending_confirmation.py

@@ -3,7 +3,7 @@ from typing import Literal, Optional
 from models.base import BaseModel
 
 
-PendingEntityType = Literal['chore', 'reward']
+PendingEntityType = Literal['chore', 'reward', 'routine']
 PendingStatus = Literal['pending', 'approved', 'rejected']
 
 

backend/models/refresh_token.py

@@ -9,6 +9,7 @@ class RefreshToken(BaseModel):
     token_family: str = ''
     expires_at: str = ''
     is_used: bool = False
+    rotated_at: str | None = None
 
     def to_dict(self):
         return {
@@ -18,6 +19,7 @@ class RefreshToken(BaseModel):
             'token_family': self.token_family,
             'expires_at': self.expires_at,
             'is_used': self.is_used,
+            'rotated_at': self.rotated_at,
         }
 
     @staticmethod
@@ -31,4 +33,5 @@ class RefreshToken(BaseModel):
             token_family=data.get('token_family', ''),
             expires_at=data.get('expires_at', ''),
             is_used=data.get('is_used', False),
+            rotated_at=data.get('rotated_at'),
         )

backend/models/routine.py

@@ -0,0 +1,32 @@
+from dataclasses import dataclass
+from models.base import BaseModel
+
+
+@dataclass
+class Routine(BaseModel):
+    name: str
+    points: int
+    image_id: str | None = None
+    user_id: str | None = None
+
+    @classmethod
+    def from_dict(cls, d: dict):
+        return cls(
+            name=d.get('name'),
+            points=d.get('points', 0),
+            image_id=d.get('image_id'),
+            user_id=d.get('user_id'),
+            id=d.get('id'),
+            created_at=d.get('created_at'),
+            updated_at=d.get('updated_at')
+        )
+
+    def to_dict(self):
+        base = super().to_dict()
+        base.update({
+            'name': self.name,
+            'points': self.points,
+            'image_id': self.image_id,
+            'user_id': self.user_id
+        })
+        return base

backend/models/routine_extension.py

@@ -0,0 +1,29 @@
+from dataclasses import dataclass
+from models.base import BaseModel
+
+
+@dataclass
+class RoutineExtension(BaseModel):
+    child_id: str
+    routine_id: str
+    date: str
+
+    @classmethod
+    def from_dict(cls, d: dict) -> 'RoutineExtension':
+        return cls(
+            child_id=d.get('child_id'),
+            routine_id=d.get('routine_id'),
+            date=d.get('date'),
+            id=d.get('id'),
+            created_at=d.get('created_at'),
+            updated_at=d.get('updated_at'),
+        )
+
+    def to_dict(self) -> dict:
+        base = super().to_dict()
+        base.update({
+            'child_id': self.child_id,
+            'routine_id': self.routine_id,
+            'date': self.date,
+        })
+        return base

backend/models/routine_item.py

@@ -0,0 +1,32 @@
+from dataclasses import dataclass
+from models.base import BaseModel
+
+
+@dataclass
+class RoutineItem(BaseModel):
+    routine_id: str
+    name: str
+    image_id: str | None = None
+    order: int = 0
+
+    @classmethod
+    def from_dict(cls, d: dict):
+        return cls(
+            routine_id=d.get('routine_id'),
+            name=d.get('name'),
+            image_id=d.get('image_id'),
+            order=d.get('order', 0),
+            id=d.get('id'),
+            created_at=d.get('created_at'),
+            updated_at=d.get('updated_at')
+        )
+
+    def to_dict(self):
+        base = super().to_dict()
+        base.update({
+            'routine_id': self.routine_id,
+            'name': self.name,
+            'image_id': self.image_id,
+            'order': self.order
+        })
+        return base

backend/models/routine_schedule.py

@@ -0,0 +1,63 @@
+from dataclasses import dataclass, field
+from typing import Literal
+from models.base import BaseModel
+
+
+@dataclass
+class RoutineSchedule(BaseModel):
+    child_id: str
+    routine_id: str
+    mode: Literal['days', 'interval']
+
+    day_configs: list = field(default_factory=list)
+    default_hour: int = 8
+    default_minute: int = 0
+    default_has_deadline: bool = True
+
+    interval_days: int = 2
+    anchor_date: str = ""
+    interval_has_deadline: bool = True
+    interval_hour: int = 0
+    interval_minute: int = 0
+
+    enabled: bool = True
+
+    @classmethod
+    def from_dict(cls, d: dict) -> 'RoutineSchedule':
+        return cls(
+            child_id=d.get('child_id'),
+            routine_id=d.get('routine_id'),
+            mode=d.get('mode', 'days'),
+            day_configs=d.get('day_configs', []),
+            default_hour=d.get('default_hour', 8),
+            default_minute=d.get('default_minute', 0),
+            default_has_deadline=d.get('default_has_deadline', True),
+            interval_days=d.get('interval_days', 2),
+            anchor_date=d.get('anchor_date', ''),
+            interval_has_deadline=d.get('interval_has_deadline', True),
+            interval_hour=d.get('interval_hour', 0),
+            interval_minute=d.get('interval_minute', 0),
+            enabled=d.get('enabled', True),
+            id=d.get('id'),
+            created_at=d.get('created_at'),
+            updated_at=d.get('updated_at'),
+        )
+
+    def to_dict(self) -> dict:
+        base = super().to_dict()
+        base.update({
+            'child_id': self.child_id,
+            'routine_id': self.routine_id,
+            'mode': self.mode,
+            'day_configs': self.day_configs,
+            'default_hour': self.default_hour,
+            'default_minute': self.default_minute,
+            'default_has_deadline': self.default_has_deadline,
+            'interval_days': self.interval_days,
+            'anchor_date': self.anchor_date,
+            'interval_has_deadline': self.interval_has_deadline,
+            'interval_hour': self.interval_hour,
+            'interval_minute': self.interval_minute,
+            'enabled': self.enabled,
+        })
+        return base

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

backend/tests/test_auth_api.py

@@ -1,11 +1,11 @@
 import pytest
 from werkzeug.security import generate_password_hash, check_password_hash
 from flask import Flask
-from api.auth_api import auth_api
+from api.auth_api import auth_api, _hash_token
 from db.db import users_db, refresh_tokens_db
 from tinydb import Query
 from models.user import User
-from datetime import datetime
+from datetime import datetime, timedelta, timezone
 from tests.conftest import TEST_SECRET_KEY, TEST_REFRESH_TOKEN_EXPIRY_DAYS
 
 @pytest.fixture
@@ -189,3 +189,244 @@ def test_migration_script_hashes_plain_text_passwords():
     # Check user2 password unchanged
     user2_dict = users_db.get(Query().email == 'test2@example.com')
     assert user2_dict['password'] == already_hashed
+
+
+def _extract_cookie_value(response, cookie_name):
+    """Extract a raw cookie value from a response's Set-Cookie headers."""
+    for cookie in response.headers.getlist('Set-Cookie'):
+        if cookie.startswith(f'{cookie_name}='):
+            return cookie.split(f'{cookie_name}=', 1)[1].split(';', 1)[0]
+    return None
+
+
+def _create_verified_user(email, password):
+    """Insert a verified user with the given credentials."""
+    users_db.remove(Query().email == email)
+    user = User(
+        first_name='Test',
+        last_name='User',
+        email=email,
+        password=generate_password_hash(password),
+        verified=True,
+    )
+    users_db.insert(user.to_dict())
+    return user
+
+
+def _set_refresh_cookie(client, raw_token):
+    """
+    Set the refresh token cookie on a test client so it is sent to /auth/refresh.
+    Production uses path='/api/auth' because the frontend calls /api/auth/refresh,
+    but the test fixture exposes the blueprint at /auth/refresh directly.
+    """
+    client.set_cookie('refresh_token', raw_token, path='/')
+
+
+def test_refresh_rotates_token(client):
+    """A successful refresh marks the old token used and issues a new one in the same family."""
+    email = 'refresh-rotate@test.com'
+    password = 'password123'
+    _create_verified_user(email, password)
+
+    login_response = client.post('/auth/login', json={'email': email, 'password': password})
+    assert login_response.status_code == 200
+    old_refresh = _extract_cookie_value(login_response, 'refresh_token')
+    assert old_refresh
+
+    _set_refresh_cookie(client, old_refresh)
+    refresh_response = client.post('/auth/refresh')
+    assert refresh_response.status_code == 200
+    new_refresh = _extract_cookie_value(refresh_response, 'refresh_token')
+    assert new_refresh
+    assert new_refresh != old_refresh
+
+    user_dict = users_db.get(Query().email == email)
+    old_hash = _hash_token(old_refresh)
+    new_hash = _hash_token(new_refresh)
+
+    old_record = refresh_tokens_db.get(Query().token_hash == old_hash)
+    assert old_record is not None
+    assert old_record['is_used'] is True
+    assert old_record['rotated_at'] is not None
+
+    new_record = refresh_tokens_db.get(Query().token_hash == new_hash)
+    assert new_record is not None
+    assert new_record['is_used'] is False
+    assert new_record['token_family'] == old_record['token_family']
+
+
+def test_refresh_reuse_only_invalidates_family(client):
+    """Replay of a used refresh token only kills its own family, not other devices."""
+    email = 'refresh-family@test.com'
+    password = 'password123'
+    user = _create_verified_user(email, password)
+
+    # Device A logs in
+    client_a = client
+    login_a = client_a.post('/auth/login', json={'email': email, 'password': password})
+    assert login_a.status_code == 200
+    refresh_a = _extract_cookie_value(login_a, 'refresh_token')
+
+    # Device B logs in (separate client = separate cookie jar)
+    app = client_a.application
+    client_b = app.test_client()
+    login_b = client_b.post('/auth/login', json={'email': email, 'password': password})
+    assert login_b.status_code == 200
+    refresh_b = _extract_cookie_value(login_b, 'refresh_token')
+
+    assert refresh_a != refresh_b
+
+    # Device A refreshes normally
+    _set_refresh_cookie(client_a, refresh_a)
+    refresh_a_response = client_a.post('/auth/refresh')
+    assert refresh_a_response.status_code == 200
+
+    # Capture families before any purge so we can assert afterwards.
+    family_a = refresh_tokens_db.get(Query().token_hash == _hash_token(refresh_a))['token_family']
+    family_b = refresh_tokens_db.get(Query().token_hash == _hash_token(refresh_b))['token_family']
+    assert family_a != family_b
+
+    # Backdate rotation so the replay is past the grace period and treated as theft.
+    old_hash_a = _hash_token(refresh_a)
+    backdated = (datetime.now(timezone.utc) - timedelta(seconds=60)).isoformat()
+    refresh_tokens_db.update({'rotated_at': backdated}, Query().token_hash == old_hash_a)
+
+    # Attacker replays device A's old token
+    _set_refresh_cookie(client_a, refresh_a)
+    reuse_response = client_a.post('/auth/refresh')
+    assert reuse_response.status_code == 401
+    assert reuse_response.json['code'] == 'REFRESH_TOKEN_REUSE'
+
+    # Device B's refresh token should still be valid
+    _set_refresh_cookie(client_b, refresh_b)
+    refresh_b_response = client_b.post('/auth/refresh')
+    assert refresh_b_response.status_code == 200
+
+    # Only family A should be purged; family B should remain
+    remaining = refresh_tokens_db.search(Query().user_id == user.id)
+    remaining_families = {t['token_family'] for t in remaining}
+    assert family_a not in remaining_families
+    assert family_b in remaining_families
+
+
+def test_refresh_reuse_within_grace_period_is_tolerated(client):
+    """A replay within the grace period is treated as a race condition, not theft."""
+    email = 'refresh-race@test.com'
+    password = 'password123'
+    _create_verified_user(email, password)
+
+    login_response = client.post('/auth/login', json={'email': email, 'password': password})
+    assert login_response.status_code == 200
+    refresh_token = _extract_cookie_value(login_response, 'refresh_token')
+
+    # First refresh marks the token as used
+    _set_refresh_cookie(client, refresh_token)
+    first_refresh = client.post('/auth/refresh')
+    assert first_refresh.status_code == 200
+
+    # Immediate replay (same legitimate client racing) should succeed
+    _set_refresh_cookie(client, refresh_token)
+    race_response = client.post('/auth/refresh')
+    assert race_response.status_code == 200
+
+    # The family should still be valid
+    user_dict = users_db.get(Query().email == email)
+    family = refresh_tokens_db.get(Query().token_hash == _hash_token(refresh_token))['token_family']
+    family_tokens = refresh_tokens_db.search(
+        (Query().user_id == user_dict['id']) & (Query().token_family == family)
+    )
+    assert len(family_tokens) >= 1
+    assert any(t['is_used'] is False for t in family_tokens)
+
+
+def test_refresh_reuse_after_grace_period_invalidates_family(client):
+    """A replay after the grace period is treated as theft and kills only that family."""
+    email = 'refresh-theft@test.com'
+    password = 'password123'
+    user = _create_verified_user(email, password)
+
+    login_response = client.post('/auth/login', json={'email': email, 'password': password})
+    assert login_response.status_code == 200
+    refresh_token = _extract_cookie_value(login_response, 'refresh_token')
+
+    # Refresh once, then backdate the rotation timestamp past the grace period
+    _set_refresh_cookie(client, refresh_token)
+    client.post('/auth/refresh')
+
+    old_hash = _hash_token(refresh_token)
+    old_record = refresh_tokens_db.get(Query().token_hash == old_hash)
+    old_family = old_record['token_family']
+    backdated = (datetime.now(timezone.utc) - timedelta(seconds=60)).isoformat()
+    refresh_tokens_db.update({'rotated_at': backdated}, Query().token_hash == old_hash)
+
+    # Replay now should be detected as theft
+    _set_refresh_cookie(client, refresh_token)
+    reuse_response = client.post('/auth/refresh')
+    assert reuse_response.status_code == 401
+    assert reuse_response.json['code'] == 'REFRESH_TOKEN_REUSE'
+
+    remaining = refresh_tokens_db.search(Query().user_id == user.id)
+    remaining_families = {t['token_family'] for t in remaining}
+    assert old_family not in remaining_families
+
+
+def test_refresh_reuse_without_rotated_at_invalidates_family(client):
+    """Legacy used tokens without rotated_at are treated as theft, not race conditions."""
+    email = 'refresh-legacy@test.com'
+    password = 'password123'
+    user = _create_verified_user(email, password)
+
+    login_response = client.post('/auth/login', json={'email': email, 'password': password})
+    assert login_response.status_code == 200
+    refresh_token = _extract_cookie_value(login_response, 'refresh_token')
+
+    # Rotate the token, then strip rotated_at to simulate pre-migration data
+    _set_refresh_cookie(client, refresh_token)
+    client.post('/auth/refresh')
+    old_hash = _hash_token(refresh_token)
+    refresh_tokens_db.update({'rotated_at': None}, Query().token_hash == old_hash)
+
+    old_record = refresh_tokens_db.get(Query().token_hash == old_hash)
+    old_family = old_record['token_family']
+
+    # Replay should be treated as theft because rotated_at is missing
+    _set_refresh_cookie(client, refresh_token)
+    reuse_response = client.post('/auth/refresh')
+    assert reuse_response.status_code == 401
+    assert reuse_response.json['code'] == 'REFRESH_TOKEN_REUSE'
+
+    remaining = refresh_tokens_db.search(Query().user_id == user.id)
+    remaining_families = {t['token_family'] for t in remaining}
+    assert old_family not in remaining_families
+
+
+def test_refresh_reuse_with_zero_grace_period(client):
+    """A grace period of 0 means any replay of a used token is treated as theft."""
+    email = 'refresh-zero-grace@test.com'
+    password = 'password123'
+    user = _create_verified_user(email, password)
+
+    # Configure the app with a 0-second grace period
+    client.application.config['REFRESH_TOKEN_REUSE_GRACE_PERIOD_SECONDS'] = 0
+
+    login_response = client.post('/auth/login', json={'email': email, 'password': password})
+    assert login_response.status_code == 200
+    refresh_token = _extract_cookie_value(login_response, 'refresh_token')
+
+    # Rotate the token; rotated_at is within the normal default grace period
+    _set_refresh_cookie(client, refresh_token)
+    client.post('/auth/refresh')
+
+    old_hash = _hash_token(refresh_token)
+    old_record = refresh_tokens_db.get(Query().token_hash == old_hash)
+    old_family = old_record['token_family']
+
+    # Immediate replay should still be theft with a 0-second grace period
+    _set_refresh_cookie(client, refresh_token)
+    reuse_response = client.post('/auth/refresh')
+    assert reuse_response.status_code == 401
+    assert reuse_response.json['code'] == 'REFRESH_TOKEN_REUSE'
+
+    remaining = refresh_tokens_db.search(Query().user_id == user.id)
+    remaining_families = {t['token_family'] for t in remaining}
+    assert old_family not in remaining_families

backend/tests/test_child_api.py

@@ -4,6 +4,7 @@ import os
 
 from flask import Flask
 from api.child_api import child_api
+import api.child_api as child_api_module
 from api.auth_api import auth_api
 from db.db import child_db, reward_db, task_db, users_db, chore_schedules_db, task_extensions_db, pending_confirmations_db
 from tinydb import Query
@@ -585,6 +586,39 @@ def test_list_child_tasks_clears_stale_approved_and_pending(client):
     assert tasks2[TASK_GOOD_ID]['approved_at'] is None
 
 
+def test_list_child_tasks_local_day_keeps_approved_across_utc_rollover(client, monkeypatch):
+    """Approved chore should remain completed when UTC date differs but user-local day matches.
+
+    Example: 2026-05-11T22:30:00Z is 2026-05-12 local day in Pacific/Kiritimati (UTC+14).
+    """
+    _setup_sched_child_and_tasks(task_db, child_db)
+
+    # Force deterministic local-day basis for this endpoint call.
+    monkeypatch.setattr(
+        child_api_module,
+        '_get_user_today_local',
+        lambda user_id: ('2026-05-12', 'Pacific/Kiritimati'),
+    )
+
+    pending_confirmations_db.insert({
+        'id': 'pend_local_day_approved',
+        'child_id': CHILD_SCHED_ID,
+        'entity_id': TASK_GOOD_ID,
+        'entity_type': 'chore',
+        'user_id': 'testuserid',
+        'status': 'approved',
+        'approved_at': '2026-05-11T22:30:00+00:00',
+        'created_at': 1778538600,
+        'updated_at': 1778538600,
+    })
+
+    resp = client.get(f'/child/{CHILD_SCHED_ID}/list-tasks')
+    assert resp.status_code == 200
+    tasks = {t['id']: t for t in resp.get_json()['tasks']}
+    assert tasks[TASK_GOOD_ID]['pending_status'] == 'approved'
+    assert tasks[TASK_GOOD_ID]['approved_at'] == '2026-05-11T22:30:00+00:00'
+
+
 def test_confirm_chore_allows_when_previous_pending_is_stale(client):
     """A stale pending chore record from a prior day must not block confirm-chore."""
     old_ts = (datetime.now(timezone.utc) - timedelta(days=2)).timestamp()

backend/tests/test_chore_confirmation.py

@@ -3,6 +3,7 @@ from tests.conftest import TEST_SECRET_KEY, TEST_REFRESH_TOKEN_EXPIRY_DAYS
 import os
 from werkzeug.security import generate_password_hash
 from datetime import date as date_type
+import api.child_api as child_api_module
 
 from flask import Flask
 from api.child_api import child_api
@@ -71,6 +72,24 @@ def setup_child_and_chore(child_name='TestChild', age=8, chore_points=10):
     return child['id'], 'chore1'
 
 
+def test_local_day_iso_check_handles_utc_rollover():
+    # 22:30 UTC on 2026-05-11 is 12:30 local on 2026-05-12 in Pacific/Kiritimati (UTC+14).
+    assert child_api_module._is_iso_timestamp_on_local_day(
+        '2026-05-11T22:30:00+00:00',
+        '2026-05-12',
+        'Pacific/Kiritimati',
+    )
+
+
+def test_local_day_epoch_check_handles_utc_rollover():
+    # Same instant as above represented as epoch seconds.
+    assert child_api_module._is_epoch_timestamp_on_local_day(
+        1778538600,
+        '2026-05-12',
+        'Pacific/Kiritimati',
+    )
+
+
 # ---------------------------------------------------------------------------
 # Child Confirm Flow
 # ---------------------------------------------------------------------------

backend/tests/test_routine_api.py

@@ -0,0 +1,296 @@
+"""Unit tests for routine API endpoints."""
+
+import pytest
+from datetime import datetime, timezone
+from tinydb import Query
+from models.routine import Routine
+from models.routine_item import RoutineItem
+from models.routine_schedule import RoutineSchedule
+from models.routine_extension import RoutineExtension
+from models.pending_confirmation import PendingConfirmation
+from api.error_codes import ErrorCodes
+from db.db import routine_db, routine_items_db, routine_schedules_db, routine_extensions_db, pending_confirmations_db
+
+
+class TestRoutineModel:
+    """Test Routine model serialization and validation."""
+
+    def test_routine_creation(self):
+        """Test creating a routine instance."""
+        routine = Routine(name="Morning Routine", points=50, image_id="img123", user_id="user1")
+        assert routine.name == "Morning Routine"
+        assert routine.points == 50
+        assert routine.image_id == "img123"
+        assert routine.user_id == "user1"
+        assert routine.id is not None
+
+    def test_routine_to_dict(self):
+        """Test routine serialization."""
+        routine = Routine(name="Test", points=10, image_id=None, user_id="user1")
+        data = routine.to_dict()
+        assert data["name"] == "Test"
+        assert data["points"] == 10
+        assert data["id"] == routine.id
+
+    def test_routine_from_dict(self):
+        """Test routine deserialization."""
+        routine_dict = {"id": "r1", "name": "Test", "points": 20, "image_id": "img1", "user_id": "u1"}
+        routine = Routine.from_dict(routine_dict)
+        assert routine.id == "r1"
+        assert routine.name == "Test"
+        assert routine.points == 20
+
+
+class TestRoutineItemModel:
+    """Test RoutineItem model."""
+
+    def test_routine_item_creation(self):
+        """Test creating a routine item."""
+        item = RoutineItem(routine_id="r1", name="Make Bed", image_id=None, order=0)
+        assert item.routine_id == "r1"
+        assert item.name == "Make Bed"
+        assert item.order == 0
+
+    def test_routine_item_to_dict(self):
+        """Test item serialization."""
+        item = RoutineItem(routine_id="r1", name="Get Dressed", image_id="img1", order=1)
+        data = item.to_dict()
+        assert data["routine_id"] == "r1"
+        assert data["name"] == "Get Dressed"
+        assert data["order"] == 1
+
+
+class TestRoutineScheduleModel:
+    """Test RoutineSchedule model."""
+
+    def test_days_mode_schedule_creation(self):
+        """Test creating days mode schedule."""
+        day_configs = [
+            {"day": 0, "hour": 8, "minute": 0},
+            {"day": 1, "hour": 9, "minute": 30},
+        ]
+        schedule = RoutineSchedule(
+            child_id="c1",
+            routine_id="r1",
+            mode="days",
+            enabled=True,
+            day_configs=day_configs,
+            default_hour=8,
+            default_minute=0,
+            default_has_deadline=True,
+        )
+        assert schedule.mode == "days"
+        assert len(schedule.day_configs) == 2
+        assert schedule.enabled is True
+
+    def test_interval_mode_schedule_creation(self):
+        """Test creating interval mode schedule."""
+        schedule = RoutineSchedule(
+            child_id="c1",
+            routine_id="r1",
+            mode="interval",
+            enabled=True,
+            interval_days=3,
+            anchor_date="2026-05-01",
+            interval_has_deadline=True,
+            interval_hour=10,
+            interval_minute=30,
+        )
+        assert schedule.mode == "interval"
+        assert schedule.interval_days == 3
+        assert schedule.interval_hour == 10
+
+
+class TestRoutineExtensionModel:
+    """Test RoutineExtension model."""
+
+    def test_extension_creation(self):
+        """Test creating a routine extension."""
+        extension = RoutineExtension(child_id="c1", routine_id="r1", date="2026-05-10")
+        assert extension.child_id == "c1"
+        assert extension.routine_id == "r1"
+        assert extension.date == "2026-05-10"
+
+
+class TestRoutineDB:
+    """Test routine database operations."""
+
+    def setup_method(self):
+        """Clear routine db before each test."""
+        routine_db.truncate()
+
+    def test_add_routine(self):
+        """Test adding a routine to database."""
+        routine = Routine(name="Test Routine", points=50, image_id=None, user_id="user1")
+        routine_db.insert(routine.to_dict())
+        
+        result = routine_db.search(Query().id == routine.id)
+        assert len(result) == 1
+        assert result[0]["name"] == "Test Routine"
+
+    def test_get_routine_by_id(self):
+        """Test fetching routine by ID."""
+        routine = Routine(name="Fetch Test", points=30, image_id=None, user_id="user1")
+        routine_db.insert(routine.to_dict())
+        
+        result = routine_db.get(Query().id == routine.id)
+        assert result is not None
+        assert result["name"] == "Fetch Test"
+
+    def test_list_user_routines(self):
+        """Test listing routines for a user."""
+        r1 = Routine(name="R1", points=10, image_id=None, user_id="user1")
+        r2 = Routine(name="R2", points=20, image_id=None, user_id="user1")
+        r3 = Routine(name="R3", points=15, image_id=None, user_id="user2")
+        
+        routine_db.insert(r1.to_dict())
+        routine_db.insert(r2.to_dict())
+        routine_db.insert(r3.to_dict())
+        
+        results = routine_db.search(Query().user_id == "user1")
+        assert len(results) == 2
+
+    def test_update_routine(self):
+        """Test updating a routine."""
+        routine = Routine(name="Original", points=50, image_id=None, user_id="user1")
+        routine_db.insert(routine.to_dict())
+        
+        routine_db.update({"name": "Updated", "points": 100}, Query().id == routine.id)
+        result = routine_db.get(Query().id == routine.id)
+        assert result["name"] == "Updated"
+        assert result["points"] == 100
+
+
+class TestRoutineItemDB:
+    """Test routine item database operations."""
+
+    def setup_method(self):
+        """Clear item db before each test."""
+        routine_items_db.truncate()
+
+    def test_add_routine_item(self):
+        """Test adding a routine item."""
+        item = RoutineItem(routine_id="r1", name="Make Bed", image_id=None, order=0)
+        routine_items_db.insert(item.to_dict())
+        
+        result = routine_items_db.search(Query().routine_id == "r1")
+        assert len(result) == 1
+        assert result[0]["name"] == "Make Bed"
+
+    def test_get_items_for_routine(self):
+        """Test fetching all items for a routine."""
+        i1 = RoutineItem(routine_id="r1", name="Item1", image_id=None, order=0)
+        i2 = RoutineItem(routine_id="r1", name="Item2", image_id=None, order=1)
+        i3 = RoutineItem(routine_id="r2", name="Item3", image_id=None, order=0)
+        
+        routine_items_db.insert(i1.to_dict())
+        routine_items_db.insert(i2.to_dict())
+        routine_items_db.insert(i3.to_dict())
+        
+        results = routine_items_db.search(Query().routine_id == "r1")
+        assert len(results) == 2
+
+    def test_delete_item(self):
+        """Test deleting a routine item."""
+        item = RoutineItem(routine_id="r1", name="Test", image_id=None, order=0)
+        routine_items_db.insert(item.to_dict())
+        
+        routine_items_db.remove(Query().id == item.id)
+        result = routine_items_db.search(Query().id == item.id)
+        assert len(result) == 0
+
+
+class TestRoutineScheduleDB:
+    """Test routine schedule database operations."""
+
+    def setup_method(self):
+        """Clear schedule db before each test."""
+        routine_schedules_db.truncate()
+
+    def test_upsert_schedule(self):
+        """Test upserting a routine schedule."""
+        day_configs = [{"day": 0, "hour": 8, "minute": 0}]
+        schedule = RoutineSchedule(
+            child_id="c1",
+            routine_id="r1",
+            mode="days",
+            enabled=True,
+            day_configs=day_configs,
+            default_hour=8,
+            default_minute=0,
+            default_has_deadline=True,
+        )
+        routine_schedules_db.insert(schedule.to_dict())
+        
+        result = routine_schedules_db.get(
+            (Query().child_id == "c1") & (Query().routine_id == "r1")
+        )
+        assert result is not None
+        assert result["mode"] == "days"
+
+    def test_delete_schedule(self):
+        """Test deleting a schedule."""
+        schedule = RoutineSchedule(
+            child_id="c1",
+            routine_id="r1",
+            mode="interval",
+            enabled=True,
+            interval_days=2,
+            anchor_date="2026-05-01",
+            interval_has_deadline=True,
+            interval_hour=10,
+            interval_minute=0,
+        )
+        routine_schedules_db.insert(schedule.to_dict())
+        
+        routine_schedules_db.remove(
+            (Query().child_id == "c1") & (Query().routine_id == "r1")
+        )
+        result = routine_schedules_db.search(Query().child_id == "c1")
+        assert len(result) == 0
+
+
+class TestPendingRoutineConfirmation:
+    """Test pending routine confirmation workflow."""
+
+    def setup_method(self):
+        """Clear db before each test."""
+        pending_confirmations_db.truncate()
+
+    def test_create_routine_confirmation(self):
+        """Test creating a pending routine confirmation."""
+        confirmation = PendingConfirmation(
+            child_id="c1",
+            entity_id="r1",
+            entity_type="routine",
+            user_id="u1",
+            status="pending",
+        )
+        pending_confirmations_db.insert(confirmation.to_dict())
+        
+        result = pending_confirmations_db.get(
+            (Query().child_id == "c1") & (Query().entity_id == "r1") & (Query().entity_type == "routine")
+        )
+        assert result is not None
+        assert result["status"] == "pending"
+
+    def test_approve_routine_confirmation(self):
+        """Test approving a routine confirmation."""
+        confirmation = PendingConfirmation(
+            child_id="c1",
+            entity_id="r1",
+            entity_type="routine",
+            user_id="u1",
+            status="pending",
+        )
+        pending_confirmations_db.insert(confirmation.to_dict())
+        
+        today_utc = datetime.now(timezone.utc).isoformat()
+        pending_confirmations_db.update(
+            {"status": "approved", "approved_at": today_utc},
+            Query().id == confirmation.id,
+        )
+        
+        result = pending_confirmations_db.get(Query().id == confirmation.id)
+        assert result["status"] == "approved"
+        assert result["approved_at"] is not None

backend/tests/test_routine_feature_api.py

@@ -0,0 +1,187 @@
+from flask import Flask
+from tinydb import Query
+from werkzeug.security import generate_password_hash
+
+from tests.conftest import TEST_SECRET_KEY, TEST_REFRESH_TOKEN_EXPIRY_DAYS
+from api.auth_api import auth_api
+from api.routine_api import routine_api
+from api.routine_item_api import routine_item_api
+from api.child_routine_api import child_routine_api
+from api.routine_schedule_api import routine_schedule_api
+from db.db import (
+    users_db,
+    child_db,
+    routine_db,
+    routine_items_db,
+    routine_schedules_db,
+    routine_extensions_db,
+    pending_confirmations_db,
+)
+
+
+TEST_USER_ID = 'routine-user-1'
+TEST_EMAIL = 'routine-user@example.com'
+TEST_PASSWORD = 'testpass'
+
+
+def add_test_user():
+    users_db.remove(Query().email == TEST_EMAIL)
+    users_db.insert({
+        'id': TEST_USER_ID,
+        'first_name': 'Routine',
+        'last_name': 'Tester',
+        'email': TEST_EMAIL,
+        'password': generate_password_hash(TEST_PASSWORD),
+        'verified': True,
+        'image_id': 'boy01',
+    })
+
+
+def login_and_set_cookie(client):
+    resp = client.post('/auth/login', json={'email': TEST_EMAIL, 'password': TEST_PASSWORD})
+    assert resp.status_code == 200
+
+
+def seed_child(child_id: str):
+    child_db.remove(Query().id == child_id)
+    child_db.insert({
+        'id': child_id,
+        'name': 'Routine Kid',
+        'age': 9,
+        'tasks': [],
+        'routines': [],
+        'rewards': [],
+        'points': 0,
+        'image_id': 'boy01',
+        'user_id': TEST_USER_ID,
+    })
+
+
+def _first_routine_id():
+    routines = routine_db.all()
+    assert routines
+    return routines[0]['id']
+
+
+def _first_confirmation_id():
+    confirmations = pending_confirmations_db.all()
+    assert confirmations
+    return confirmations[0]['id']
+
+
+def _make_client():
+    app = Flask(__name__)
+    app.register_blueprint(auth_api, url_prefix='/auth')
+    app.register_blueprint(routine_api)
+    app.register_blueprint(routine_item_api)
+    app.register_blueprint(child_routine_api)
+    app.register_blueprint(routine_schedule_api)
+    app.config['TESTING'] = True
+    app.config['SECRET_KEY'] = TEST_SECRET_KEY
+    app.config['REFRESH_TOKEN_EXPIRY_DAYS'] = TEST_REFRESH_TOKEN_EXPIRY_DAYS
+    return app
+
+
+def setup_function(_):
+    routine_db.truncate()
+    routine_items_db.truncate()
+    routine_schedules_db.truncate()
+    routine_extensions_db.truncate()
+    pending_confirmations_db.truncate()
+    child_db.truncate()
+
+
+def test_routine_crud_flow():
+    app = _make_client()
+    with app.test_client() as client:
+        add_test_user()
+        login_and_set_cookie(client)
+
+        add_resp = client.put('/routine/add', json={'name': 'Morning Routine', 'points': 8, 'image_id': 'sun'})
+        assert add_resp.status_code == 201
+
+        rid = _first_routine_id()
+
+        list_resp = client.get('/routine/list')
+        assert list_resp.status_code == 200
+        routines = list_resp.get_json()['routines']
+        assert len(routines) == 1
+        assert routines[0]['name'] == 'Morning Routine'
+
+        edit_resp = client.put(f'/routine/{rid}/edit', json={'points': 10})
+        assert edit_resp.status_code == 200
+        assert edit_resp.get_json()['points'] == 10
+
+        delete_resp = client.delete(f'/routine/{rid}')
+        assert delete_resp.status_code == 200
+        assert routine_db.all() == []
+
+
+def test_child_routine_assignment_confirmation_and_approval():
+    app = _make_client()
+    with app.test_client() as client:
+        add_test_user()
+        login_and_set_cookie(client)
+
+        seed_child('routine-child-1')
+        client.put('/routine/add', json={'name': 'Evening Routine', 'points': 6, 'image_id': 'moon'})
+        rid = _first_routine_id()
+
+        add_item_resp = client.put(f'/routine/{rid}/item/add', json={'name': 'Brush Teeth', 'order': 0})
+        assert add_item_resp.status_code == 201
+
+        assign_resp = client.post('/child/routine-child-1/assign-routine', json={'routine_id': rid})
+        assert assign_resp.status_code == 200
+
+        list_resp = client.get('/child/routine-child-1/list-routines')
+        assert list_resp.status_code == 200
+        routines = list_resp.get_json()['routines']
+        assert len(routines) == 1
+        assert routines[0]['id'] == rid
+        assert routines[0]['items'][0]['name'] == 'Brush Teeth'
+
+        confirm_resp = client.post('/child/routine-child-1/confirm-routine', json={'routine_id': rid})
+        assert confirm_resp.status_code == 200
+
+        confirmation_id = _first_confirmation_id()
+        approve_resp = client.post(f'/child/routine-child-1/approve-routine/{confirmation_id}')
+        assert approve_resp.status_code == 200
+
+        child = child_db.get(Query().id == 'routine-child-1')
+        assert child['points'] == 6
+
+
+def test_routine_schedule_and_extend_flow():
+    app = _make_client()
+    with app.test_client() as client:
+        add_test_user()
+        login_and_set_cookie(client)
+
+        seed_child('routine-child-2')
+        client.put('/routine/add', json={'name': 'School Routine', 'points': 5, 'image_id': 'book'})
+        rid = _first_routine_id()
+
+        client.post('/child/routine-child-2/assign-routine', json={'routine_id': rid})
+
+        set_resp = client.put(
+            f'/child/routine-child-2/routine/{rid}/schedule',
+            json={
+                'mode': 'days',
+                'day_configs': [{'day': 1, 'hour': 8, 'minute': 0}],
+                'default_hour': 8,
+                'default_minute': 0,
+                'default_has_deadline': True,
+            },
+        )
+        assert set_resp.status_code == 200
+
+        get_resp = client.get(f'/child/routine-child-2/routine/{rid}/schedule')
+        assert get_resp.status_code == 200
+        assert get_resp.get_json()['mode'] == 'days'
+
+        extend_resp = client.post(
+            f'/child/routine-child-2/routine/{rid}/extend',
+            json={'date': '2026-05-04'},
+        )
+        assert extend_resp.status_code == 200
+        assert extend_resp.get_json()['routine_id'] == rid

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):

frontend/e2e/.auth/user-cc.json

@@ -2,20 +2,20 @@
   "cookies": [
     {
       "name": "refresh_token",
-      "value": "pGEIC6CXp8cemhcGtW276YUSMY6zSzOVlhDL-bNhrYk",
+      "value": "hW7OJbUjHr4XntQRPtefKNhvvctK014R6pzLz_vyJ8g",
       "domain": "localhost",
       "path": "/api/auth",
-      "expires": 1785601199.302565,
+      "expires": 1792774142.289068,
       "httpOnly": true,
       "secure": true,
       "sameSite": "Strict"
     },
     {
       "name": "access_token",
-      "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS1jY0B0ZXN0LmNvbSIsInVzZXJfaWQiOiJhNzljMGEzOS1jYmNlLTQzMmQtYTQ1Yy02YjY2N2Q5ZDg3ODMiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3Nzc4MzU5OTl9.3Aucvm-BqEldAY3FG7Th2Y3-AEdUttqAMM6Z2wC56b8",
+      "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS1jY0B0ZXN0LmNvbSIsInVzZXJfaWQiOiI5MjUwNzY1MS00YjlmLTRkMTMtOTgxYS1hMzA2ZThjY2JmNzciLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3ODUwMDg5NDJ9.15hDvKf9u95pMzyeSbrHesFBDGgTwnxV1FD175p72-w",
       "domain": "localhost",
       "path": "/",
-      "expires": 1777835999.301909,
+      "expires": 1785008942.288088,
       "httpOnly": true,
       "secure": true,
       "sameSite": "Lax"
@@ -27,11 +27,11 @@
       "localStorage": [
         {
           "name": "authSyncEvent",
-          "value": "{\"type\":\"logout\",\"at\":1777825199047}"
+          "value": "{\"type\":\"logout\",\"at\":1784998141942}"
         },
         {
           "name": "parentAuth",
-          "value": "{\"expiresAt\":1777997999649}"
+          "value": "{\"expiresAt\":1785170942553}"
         }
       ]
     }

frontend/e2e/.auth/user-delete.json

@@ -2,20 +2,20 @@
   "cookies": [
     {
       "name": "refresh_token",
-      "value": "iFMh4JztGf12rfM3hYnVAxUTxCCaqvf8fXuNt4AcX5E",
+      "value": "PylNoNcxDjRuoocNg4ZmApg_7OIxp9Jfs7ttsX3C5uA",
       "domain": "localhost",
       "path": "/api/auth",
-      "expires": 1785601199.525198,
+      "expires": 1792435594.088028,
       "httpOnly": true,
       "secure": true,
       "sameSite": "Strict"
     },
     {
       "name": "access_token",
-      "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS1kZWxldGVAdGVzdC5jb20iLCJ1c2VyX2lkIjoiNjMwMjY4MzMtOTMwYi00Y2Y4LThkMWQtNGRmYmM4YjZhNDNiIiwidG9rZW5fdmVyc2lvbiI6MCwiZXhwIjoxNzc3ODM1OTk5fQ.puE7cpjjfxckURcACEIQRDTdySwJm0gaIwKPAoeg6e4",
+      "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS1kZWxldGVAdGVzdC5jb20iLCJ1c2VyX2lkIjoiN2UzNjdjMGItMDU3ZS00MWEzLThlNzYtZWZmNDUyMmFmOTU2IiwidG9rZW5fdmVyc2lvbiI6MCwiZXhwIjoxNzg0NjcwMzk0fQ.cVkoiVTtH1O7TFqW5yQ9BEBlTq7hR8YEya7FW2b_Yh8",
       "domain": "localhost",
       "path": "/",
-      "expires": 1777835999.524669,
+      "expires": 1784670394.08796,
       "httpOnly": true,
       "secure": true,
       "sameSite": "Lax"
@@ -27,11 +27,11 @@
       "localStorage": [
         {
           "name": "authSyncEvent",
-          "value": "{\"type\":\"logout\",\"at\":1777825199229}"
+          "value": "{\"type\":\"logout\",\"at\":1784659593889}"
         },
         {
           "name": "parentAuth",
-          "value": "{\"expiresAt\":1777997999821}"
+          "value": "{\"expiresAt\":1784832394248}"
         }
       ]
     }

frontend/e2e/.auth/user-tutorial.json

@@ -0,0 +1,39 @@
+{
+  "cookies": [
+    {
+      "name": "refresh_token",
+      "value": "5gEK_iLdGl1BAGfetT8hEf6SJK2lQVbYxQjH0BdKWwU",
+      "domain": "localhost",
+      "path": "/api/auth",
+      "expires": 1792813397.168935,
+      "httpOnly": true,
+      "secure": true,
+      "sameSite": "Strict"
+    },
+    {
+      "name": "access_token",
+      "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZS10dXRvcmlhbEB0ZXN0LmNvbSIsInVzZXJfaWQiOiJkODk0ZjA0OS0xODU3LTQwM2UtYjgzZC1jMTY2NTNmZDU2MmEiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3ODUwNDgxOTd9.S7frWOrZwXC5xVgtG2RDioXGok04qK_jLCYWvfedD7s",
+      "domain": "localhost",
+      "path": "/",
+      "expires": 1785048197.167997,
+      "httpOnly": true,
+      "secure": true,
+      "sameSite": "Lax"
+    }
+  ],
+  "origins": [
+    {
+      "origin": "https://localhost:5173",
+      "localStorage": [
+        {
+          "name": "authSyncEvent",
+          "value": "{\"type\":\"logout\",\"at\":1785037396813}"
+        },
+        {
+          "name": "parentAuth",
+          "value": "{\"expiresAt\":1785210197388}"
+        }
+      ]
+    }
+  ]
+}

frontend/e2e/.auth/user.json

@@ -2,20 +2,20 @@
   "cookies": [
     {
       "name": "refresh_token",
-      "value": "o8DJDh2Vlh2aC6VLSIEdO9pY74AceX8kLDiBhzyJ1i4",
+      "value": "Ke6qDj_0RYyrMSI1Z9C69DPtvYo26oUUiLZr_pDXZv4",
       "domain": "localhost",
       "path": "/api/auth",
-      "expires": 1785601195.078177,
+      "expires": 1792813392.716776,
       "httpOnly": true,
       "secure": true,
       "sameSite": "Strict"
     },
     {
       "name": "access_token",
-      "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZUB0ZXN0LmNvbSIsInVzZXJfaWQiOiI5OWQwMzUxZC03YTg1LTQ4ZDUtOTgzZC01YWJlZTMxOGFhZDMiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3Nzc4MzU5OTV9.QKaquZmzjFHwx08IgGVCyrQeBw2M5-8yVKc30_b9GFM",
+      "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZUB0ZXN0LmNvbSIsInVzZXJfaWQiOiI3NTYwZDBlNy1iMmVlLTRiMjktYTYwNi1lZTM3NmIzN2Y3ODciLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3ODUwNDgxOTJ9.QB4bXo88KC7jr94QSjJI3Y1eVWeU4KNKdHRi1_7zcD0",
       "domain": "localhost",
       "path": "/",
-      "expires": 1777835995.077514,
+      "expires": 1785048192.71579,
       "httpOnly": true,
       "secure": true,
       "sameSite": "Lax"
@@ -27,11 +27,11 @@
       "localStorage": [
         {
           "name": "authSyncEvent",
-          "value": "{\"type\":\"logout\",\"at\":1777825194855}"
+          "value": "{\"type\":\"logout\",\"at\":1785037392502}"
         },
         {
           "name": "parentAuth",
-          "value": "{\"expiresAt\":1777997995266}"
+          "value": "{\"expiresAt\":1785210192904}"
         }
       ]
     }

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 })
+})

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'

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: 'Cancel' })
+    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()

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<void> {
+  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)

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<void> {
+  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<string, unknown>)['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"

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: 'Cancel' })
+    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()

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: 'Cancel' })
+    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 }) => {

frontend/e2e/mode_parent/routines/routine-child-mode.spec.ts

@@ -0,0 +1,213 @@
+import { test, expect, type APIRequestContext, type Page } from '@playwright/test'
+
+const CHILD_NAME = 'RoutineChildModeChild'
+const ROUTINE_NAME = 'RoutineChildModeTest'
+const ROUTINE_POINTS = 10
+const TASK_NAME_1 = 'Brush Teeth'
+const TASK_NAME_2 = 'Wash Face'
+
+// ── helpers ───────────────────────────────────────────────────────────────────
+
+async function createChild(request: APIRequestContext, name: string): Promise<string> {
+  const pre = await request.get('/api/child/list')
+  for (const c of (await pre.json()).children ?? []) {
+    if (c.name === name) await request.delete(`/api/child/${c.id}`)
+  }
+  await request.put('/api/child/add', { data: { name, age: 8 } })
+  const list = await request.get('/api/child/list')
+  return (await list.json()).children?.find((c: any) => c.name === name)?.id ?? ''
+}
+
+async function createRoutine(
+  request: APIRequestContext,
+  name: string,
+  points: number,
+): Promise<string> {
+  const pre = await request.get('/api/routine/list')
+  for (const r of (await pre.json()).routines ?? []) {
+    if (r.name === name) await request.delete(`/api/routine/${r.id}`)
+  }
+  const res = await request.put('/api/routine/add', { data: { name, points } })
+  return (await res.json()).routine?.id ?? ''
+}
+
+function routineSection(page: Page) {
+  return page.locator('.child-list-container').filter({
+    has: page.locator('h3', { hasText: 'Routines' }),
+  })
+}
+
+// ── suite ─────────────────────────────────────────────────────────────────────
+
+test.describe('Routine child-mode flow', () => {
+  test.describe.configure({ mode: 'serial' })
+
+  let childId = ''
+  let routineId = ''
+
+  test.beforeAll(async ({ request }) => {
+    childId = await createChild(request, CHILD_NAME)
+    routineId = await createRoutine(request, ROUTINE_NAME, ROUTINE_POINTS)
+
+    await request.put(`/api/routine/${routineId}/item/add`, { data: { name: TASK_NAME_1 } })
+    await request.put(`/api/routine/${routineId}/item/add`, { data: { name: TASK_NAME_2 } })
+    await request.post(`/api/child/${childId}/assign-routine`, {
+      data: { routine_id: routineId },
+    })
+  })
+
+  test.afterAll(async ({ request }) => {
+    if (childId) await request.delete(`/api/child/${childId}`)
+    if (routineId) await request.delete(`/api/routine/${routineId}`)
+  })
+
+  // Intercept parentAuth so the router treats this session as child-mode (not parent-authenticated).
+  test.beforeEach(async ({ page }) => {
+    await page.addInitScript(() => {
+      const orig = Storage.prototype.getItem
+      Storage.prototype.getItem = function (key: string) {
+        if (key === 'parentAuth') return null
+        return orig.call(this, key)
+      }
+    })
+  })
+
+  // ── 1. Routine section visible ────────────────────────────────────────────
+
+  test('Routine section appears in child view', async ({ page }) => {
+    await page.goto(`/child/${childId}`)
+
+    const section = routineSection(page)
+    await expect(section).toBeVisible({ timeout: 5000 })
+    await expect(section.locator('.item-card').filter({ hasText: ROUTINE_NAME })).toBeVisible()
+  })
+
+  // ── 2. Overlay opens on two-click ─────────────────────────────────────────
+
+  test('Clicking routine twice opens overlay with correct header', async ({ page }) => {
+    await page.goto(`/child/${childId}`)
+
+    const card = routineSection(page).locator('.item-card').filter({ hasText: ROUTINE_NAME })
+    await card.waitFor({ state: 'visible' })
+
+    // First click enters ready state
+    await card.click()
+    await expect(card).toHaveClass(/item-ready/, { timeout: 3000 })
+
+    // Second click opens overlay
+    await card.click()
+
+    const dialog = page.getByRole('dialog')
+    await expect(dialog).toBeVisible({ timeout: 3000 })
+    await expect(dialog).toContainText('Did you complete')
+    await expect(dialog).toContainText(ROUTINE_NAME)
+  })
+
+  // ── 3. Task cards inside overlay ──────────────────────────────────────────
+
+  test('Overlay shows task cards for each routine item', async ({ page }) => {
+    await page.goto(`/child/${childId}`)
+
+    const card = routineSection(page).locator('.item-card').filter({ hasText: ROUTINE_NAME })
+    await card.waitFor({ state: 'visible' })
+    await card.click()
+    await expect(card).toHaveClass(/item-ready/, { timeout: 3000 })
+    await card.click()
+
+    const dialog = page.getByRole('dialog')
+    await expect(dialog).toBeVisible({ timeout: 3000 })
+    await expect(dialog.getByText(TASK_NAME_1)).toBeVisible()
+    await expect(dialog.getByText(TASK_NAME_2)).toBeVisible()
+  })
+
+  // ── 4. Closing overlay with No ────────────────────────────────────────────
+
+  test('Clicking No closes the overlay without changing state', async ({ page }) => {
+    await page.goto(`/child/${childId}`)
+
+    const card = routineSection(page).locator('.item-card').filter({ hasText: ROUTINE_NAME })
+    await card.waitFor({ state: 'visible' })
+    await card.click()
+    await expect(card).toHaveClass(/item-ready/, { timeout: 3000 })
+    await card.click()
+
+    const dialog = page.getByRole('dialog')
+    await expect(dialog).toBeVisible({ timeout: 3000 })
+    await dialog.getByRole('button', { name: 'No' }).click()
+
+    await expect(dialog).not.toBeVisible({ timeout: 3000 })
+    await expect(card.locator('.pending-stamp')).not.toBeVisible()
+  })
+
+  // ── 5. Yes! confirms routine → PENDING stamp ──────────────────────────────
+
+  test('Clicking Yes! marks routine as PENDING', async ({ page }) => {
+    await page.goto(`/child/${childId}`)
+
+    const card = routineSection(page).locator('.item-card').filter({ hasText: ROUTINE_NAME })
+    await card.waitFor({ state: 'visible' })
+    await card.click()
+    await expect(card).toHaveClass(/item-ready/, { timeout: 3000 })
+    await card.click()
+
+    const dialog = page.getByRole('dialog')
+    await expect(dialog).toBeVisible({ timeout: 3000 })
+    await dialog.getByRole('button', { name: 'Yes!' }).click()
+
+    // Dialog closes
+    await expect(dialog).not.toBeVisible({ timeout: 5000 })
+
+    // Reload to pick up the refreshed state
+    await page.reload()
+    const reloadedCard = routineSection(page)
+      .locator('.item-card')
+      .filter({ hasText: ROUTINE_NAME })
+    await expect(reloadedCard.locator('.pending-stamp')).toBeVisible({ timeout: 5000 })
+  })
+
+  // ── 6. Cancel dialog for pending routine ─────────────────────────────────
+
+  test('Clicking a pending routine shows the cancel dialog', async ({ page }) => {
+    await page.goto(`/child/${childId}`)
+
+    // Routine should still be pending from the previous test
+    const card = routineSection(page).locator('.item-card').filter({ hasText: ROUTINE_NAME })
+    await card.waitFor({ state: 'visible' })
+    await expect(card.locator('.pending-stamp')).toBeVisible({ timeout: 5000 })
+
+    await card.click()
+    await expect(card).toHaveClass(/item-ready/, { timeout: 3000 })
+    await card.click()
+
+    const dialog = page.getByRole('dialog')
+    await expect(dialog).toBeVisible({ timeout: 3000 })
+    await expect(dialog).toContainText('This routine is pending')
+  })
+
+  // ── 7. Canceling pending routine removes PENDING stamp ────────────────────
+
+  test('Confirming cancel removes the PENDING stamp', async ({ page }) => {
+    await page.goto(`/child/${childId}`)
+
+    const card = routineSection(page).locator('.item-card').filter({ hasText: ROUTINE_NAME })
+    await card.waitFor({ state: 'visible' })
+    await card.click()
+    await expect(card).toHaveClass(/item-ready/, { timeout: 3000 })
+    await card.click()
+
+    const dialog = page.getByRole('dialog')
+    await expect(dialog).toBeVisible({ timeout: 3000 })
+    await expect(dialog).toContainText('This routine is pending')
+
+    // "Yes" cancels the pending confirmation
+    await dialog.getByRole('button', { name: 'Yes' }).click()
+
+    await expect(dialog).not.toBeVisible({ timeout: 5000 })
+
+    await page.reload()
+    const reloadedCard = routineSection(page)
+      .locator('.item-card')
+      .filter({ hasText: ROUTINE_NAME })
+    await expect(reloadedCard.locator('.pending-stamp')).not.toBeVisible({ timeout: 5000 })
+  })
+})

frontend/e2e/mode_parent/routines/routine-item-reorder.spec.ts

@@ -0,0 +1,77 @@
+import { test, expect, type APIRequestContext } from '@playwright/test'
+
+const ROUTINE_NAME = 'ReorderTestRoutine'
+const ROUTINE_POINTS = 10
+const ITEM_A = 'Alpha Task'
+const ITEM_B = 'Beta Task'
+const ITEM_C = 'Gamma Task'
+
+async function createRoutine(
+  request: APIRequestContext,
+  name: string,
+  points: number,
+): Promise<string> {
+  const pre = await request.get('/api/routine/list')
+  for (const r of (await pre.json()).routines ?? []) {
+    if (r.name === name) await request.delete(`/api/routine/${r.id}`)
+  }
+  const res = await request.put('/api/routine/add', { data: { name, points } })
+  return (await res.json()).routine?.id ?? ''
+}
+
+test.describe('Routine item drag-to-reorder', () => {
+  test.describe.configure({ mode: 'serial' })
+
+  let routineId = ''
+
+  test.beforeAll(async ({ request }) => {
+    routineId = await createRoutine(request, ROUTINE_NAME, ROUTINE_POINTS)
+    await request.put(`/api/routine/${routineId}/item/add`, { data: { name: ITEM_A, order: 0 } })
+    await request.put(`/api/routine/${routineId}/item/add`, { data: { name: ITEM_B, order: 1 } })
+    await request.put(`/api/routine/${routineId}/item/add`, { data: { name: ITEM_C, order: 2 } })
+  })
+
+  test.afterAll(async ({ request }) => {
+    if (routineId) await request.delete(`/api/routine/${routineId}`)
+  })
+
+  test('items load in correct initial order', async ({ page }) => {
+    await page.goto(`/parent/tasks/routines/${routineId}/edit`)
+    await page.locator('.item-row').first().waitFor({ state: 'visible' })
+
+    const names = await page.locator('.item-name').allTextContents()
+    expect(names).toEqual([ITEM_A, ITEM_B, ITEM_C])
+  })
+
+  test('dragging first item to last position reorders the list in the UI', async ({ page }) => {
+    await page.goto(`/parent/tasks/routines/${routineId}/edit`)
+    await page.locator('.item-row').first().waitFor({ state: 'visible' })
+
+    await page.locator('.item-row').nth(0).locator('.drag-handle').dragTo(page.locator('.item-row').nth(2))
+
+    const names = await page.locator('.item-name').allTextContents()
+    expect(names).toEqual([ITEM_B, ITEM_C, ITEM_A])
+  })
+
+  test('reordered item order persists after saving', async ({ page }) => {
+    await page.goto(`/parent/tasks/routines/${routineId}/edit`)
+    await page.locator('.item-row').first().waitFor({ state: 'visible' })
+
+    // Drag first to last: [A, B, C] → [B, C, A]
+    await page.locator('.item-row').nth(0).locator('.drag-handle').dragTo(page.locator('.item-row').nth(2))
+
+    // Confirm the drag updated the DOM before saving
+    const afterDrag = await page.locator('.item-name').allTextContents()
+    expect(afterDrag).toEqual([ITEM_B, ITEM_C, ITEM_A])
+
+    await page.getByRole('button', { name: 'Save' }).click()
+    await page.waitForURL(/\/parent\/tasks\/routines$/, { timeout: 5000 })
+
+    // Reload edit view — should now show the saved order
+    await page.goto(`/parent/tasks/routines/${routineId}/edit`)
+    await page.locator('.item-row').first().waitFor({ state: 'visible' })
+
+    const names = await page.locator('.item-name').allTextContents()
+    expect(names).toEqual([ITEM_B, ITEM_C, ITEM_A])
+  })
+})

frontend/e2e/mode_parent/routines/routine-notification.spec.ts

@@ -0,0 +1,98 @@
+import { test, expect, type APIRequestContext } from '@playwright/test'
+
+const CHILD_NAME = 'RoutineNotifChild'
+const ROUTINE_NAME = 'RoutineNotifTest'
+const ROUTINE_POINTS = 8
+
+// ── helpers ───────────────────────────────────────────────────────────────────
+
+async function createChild(request: APIRequestContext, name: string): Promise<string> {
+  const pre = await request.get('/api/child/list')
+  for (const c of (await pre.json()).children ?? []) {
+    if (c.name === name) await request.delete(`/api/child/${c.id}`)
+  }
+  await request.put('/api/child/add', { data: { name, age: 8 } })
+  const list = await request.get('/api/child/list')
+  return (await list.json()).children?.find((c: any) => c.name === name)?.id ?? ''
+}
+
+async function createRoutine(
+  request: APIRequestContext,
+  name: string,
+  points: number,
+): Promise<string> {
+  const pre = await request.get('/api/routine/list')
+  for (const r of (await pre.json()).routines ?? []) {
+    if (r.name === name) await request.delete(`/api/routine/${r.id}`)
+  }
+  const res = await request.put('/api/routine/add', { data: { name, points } })
+  return (await res.json()).routine?.id ?? ''
+}
+
+// ── suite ─────────────────────────────────────────────────────────────────────
+
+test.describe('Routine parent notification', () => {
+  test.describe.configure({ mode: 'serial' })
+
+  let childId = ''
+  let routineId = ''
+
+  test.beforeAll(async ({ request }) => {
+    childId = await createChild(request, CHILD_NAME)
+    routineId = await createRoutine(request, ROUTINE_NAME, ROUTINE_POINTS)
+
+    await request.post(`/api/child/${childId}/assign-routine`, {
+      data: { routine_id: routineId },
+    })
+
+    // Simulate the child confirming the routine
+    await request.post(`/api/child/${childId}/confirm-routine`, {
+      data: { routine_id: routineId },
+    })
+  })
+
+  test.afterAll(async ({ request }) => {
+    if (childId) await request.delete(`/api/child/${childId}`)
+    if (routineId) await request.delete(`/api/routine/${routineId}`)
+  })
+
+  // ── 1. Notification appears ───────────────────────────────────────────────
+
+  test('Confirmed routine appears in notification view', async ({ page }) => {
+    await page.goto('/parent/notifications')
+    const item = page.locator('.list-item').filter({ hasText: ROUTINE_NAME })
+    await expect(item).toBeVisible({ timeout: 5000 })
+  })
+
+  // ── 2. Notification shows "completed" ────────────────────────────────────
+
+  test('Notification shows "completed" for routine', async ({ page }) => {
+    await page.goto('/parent/notifications')
+    const item = page.locator('.list-item').filter({ hasText: ROUTINE_NAME })
+    await expect(item).toBeVisible({ timeout: 5000 })
+    await expect(item).toContainText('completed')
+  })
+
+  // ── 3. Notification shows child name ─────────────────────────────────────
+
+  test('Notification shows the child name', async ({ page }) => {
+    await page.goto('/parent/notifications')
+    const item = page.locator('.list-item').filter({ hasText: ROUTINE_NAME })
+    await expect(item).toBeVisible({ timeout: 5000 })
+    await expect(item).toContainText(CHILD_NAME)
+  })
+
+  // ── 4. Clicking notification navigates to parent view ────────────────────
+
+  test('Clicking notification navigates to parent view for the child', async ({ page }) => {
+    await page.goto('/parent/notifications')
+    const item = page.locator('.list-item').filter({ hasText: ROUTINE_NAME })
+    await expect(item).toBeVisible({ timeout: 5000 })
+    await item.click()
+
+    await page.waitForURL(`/parent/${childId}**`, { timeout: 5000 })
+    const url = new URL(page.url())
+    expect(url.searchParams.get('scrollTo')).toBe(routineId)
+    expect(url.searchParams.get('entityType')).toBe('routine')
+  })
+})

frontend/e2e/mode_parent/task-assignment/assign-create-fab.spec.ts

@@ -0,0 +1,133 @@
+import { test, expect, type APIRequestContext } from '@playwright/test'
+
+const CHILD_NAME = 'AssignFabChild'
+const CHORE_NAME = 'AssignFabChore'
+const KINDNESS_NAME = 'AssignFabKindness'
+const PENALTY_NAME = 'AssignFabPenalty'
+const REWARD_NAME = 'AssignFabReward'
+const ROUTINE_NAME = 'AssignFabRoutine'
+
+async function createChild(request: APIRequestContext, name: string): Promise<string> {
+  const pre = await request.get('/api/child/list')
+  for (const c of (await pre.json()).children ?? []) {
+    if (c.name === name) await request.delete(`/api/child/${c.id}`)
+  }
+  await request.put('/api/child/add', { data: { name, age: 8 } })
+  const list = await request.get('/api/child/list')
+  return (
+    (await list.json()).children?.find((c: { name: string; id: string }) => c.name === name)?.id ??
+    ''
+  )
+}
+
+async function createTask(
+  request: APIRequestContext,
+  name: string,
+  type: 'chore' | 'kindness' | 'penalty',
+): Promise<string> {
+  const pre = await request.get('/api/task/list')
+  for (const t of (await pre.json()).tasks ?? []) {
+    if (t.name === name) await request.delete(`/api/task/${t.id}`)
+  }
+  await request.put('/api/task/add', { data: { name, points: 5, type } })
+  const list = await request.get('/api/task/list')
+  return (
+    (await list.json()).tasks?.find((t: { name: string; id: string }) => t.name === name)?.id ?? ''
+  )
+}
+
+async function createReward(request: APIRequestContext, name: string): Promise<string> {
+  const pre = await request.get('/api/reward/list')
+  for (const r of (await pre.json()).rewards ?? []) {
+    if (r.name === name) await request.delete(`/api/reward/${r.id}`)
+  }
+  await request.put('/api/reward/add', { data: { name, description: 'E2E fab reward', cost: 10 } })
+  const list = await request.get('/api/reward/list')
+  return (
+    (await list.json()).rewards?.find((r: { name: string; id: string }) => r.name === name)?.id ??
+    ''
+  )
+}
+
+async function createRoutine(request: APIRequestContext, name: string): Promise<string> {
+  const pre = await request.get('/api/routine/list')
+  for (const r of (await pre.json()).routines ?? []) {
+    if (r.name === name) await request.delete(`/api/routine/${r.id}`)
+  }
+  const res = await request.put('/api/routine/add', { data: { name, points: 5 } })
+  return (await res.json()).routine?.id ?? ''
+}
+
+test.describe('Assignment views create FAB', () => {
+  test.describe.configure({ mode: 'serial' })
+
+  let childId = ''
+  let choreId = ''
+  let kindnessId = ''
+  let penaltyId = ''
+  let rewardId = ''
+  let routineId = ''
+
+  test.beforeAll(async ({ request }) => {
+    childId = await createChild(request, CHILD_NAME)
+    choreId = await createTask(request, CHORE_NAME, 'chore')
+    kindnessId = await createTask(request, KINDNESS_NAME, 'kindness')
+    penaltyId = await createTask(request, PENALTY_NAME, 'penalty')
+    rewardId = await createReward(request, REWARD_NAME)
+    routineId = await createRoutine(request, ROUTINE_NAME)
+  })
+
+  test.afterAll(async ({ request }) => {
+    if (childId) await request.delete(`/api/child/${childId}`)
+    if (choreId) await request.delete(`/api/task/${choreId}`)
+    if (kindnessId) await request.delete(`/api/task/${kindnessId}`)
+    if (penaltyId) await request.delete(`/api/task/${penaltyId}`)
+    if (rewardId) await request.delete(`/api/reward/${rewardId}`)
+    if (routineId) await request.delete(`/api/routine/${routineId}`)
+  })
+
+  test('Chore assign view FAB navigates to chore creator', async ({ page }) => {
+    await page.goto(`/parent/${childId}/assign-chores?name=${CHILD_NAME}`)
+    await expect(page.getByRole('heading', { name: 'Assign Chores' })).toBeVisible()
+
+    await page.getByRole('button', { name: 'Create Chore' }).click()
+    await page.waitForURL(/\/parent\/tasks\/chores\/create$/)
+    await expect(page.getByRole('heading', { name: 'Create Chore' })).toBeVisible()
+  })
+
+  test('Kindness assign view FAB navigates to kindness creator', async ({ page }) => {
+    await page.goto(`/parent/${childId}/assign-kindness?name=${CHILD_NAME}`)
+    await expect(page.getByRole('heading', { name: 'Assign Kindness Acts' })).toBeVisible()
+
+    await page.getByRole('button', { name: 'Create Kindness Act' }).click()
+    await page.waitForURL(/\/parent\/tasks\/kindness\/create$/)
+    await expect(page.getByRole('heading', { name: 'Create Kindness Act' })).toBeVisible()
+  })
+
+  test('Penalty assign view FAB navigates to penalty creator', async ({ page }) => {
+    await page.goto(`/parent/${childId}/assign-penalties?name=${CHILD_NAME}`)
+    await expect(page.getByRole('heading', { name: 'Assign Penalties' })).toBeVisible()
+
+    await page.getByRole('button', { name: 'Create Penalty' }).click()
+    await page.waitForURL(/\/parent\/tasks\/penalties\/create$/)
+    await expect(page.getByRole('heading', { name: 'Create Penalty' })).toBeVisible()
+  })
+
+  test('Reward assign view FAB navigates to reward creator', async ({ page }) => {
+    await page.goto(`/parent/${childId}/assign-rewards?name=${CHILD_NAME}`)
+    await expect(page.getByRole('heading', { name: 'Assign Rewards' })).toBeVisible()
+
+    await page.getByRole('button', { name: 'Create Reward' }).click()
+    await page.waitForURL(/\/parent\/rewards\/create$/)
+    await expect(page.getByRole('heading', { name: 'Create Reward' })).toBeVisible()
+  })
+
+  test('Routine assign view FAB navigates to routine creator', async ({ page }) => {
+    await page.goto(`/parent/${childId}/assign-routines?name=${CHILD_NAME}`)
+    await expect(page.getByRole('heading', { name: 'Assign Routines' })).toBeVisible()
+
+    await page.getByRole('button', { name: 'Create Routine' }).click()
+    await page.waitForURL(/\/parent\/tasks\/routines\/create$/)
+    await expect(page.getByRole('heading', { name: 'Create Routine' })).toBeVisible()
+  })
+})

frontend/e2e/mode_parent/tutorial/dialog-help-button.spec.ts

@@ -0,0 +1,327 @@
+import { test, expect, type APIRequestContext, type Page } from '@playwright/test'
+
+const BACKEND = 'http://localhost:5000'
+
+const CHILD_NAME = 'DialogHelpChild'
+const CHORE_NAME = 'DialogHelpChore'
+const KINDNESS_NAME = 'DialogHelpKindness'
+const PENALTY_NAME = 'DialogHelpPenalty'
+const REWARD_NAME = 'DialogHelpReward'
+const REWARD_COST = 10
+const ROUTINE_NAME = 'DialogHelpRoutine'
+
+async function setTutorialEnabled(request: APIRequestContext, enabled: boolean): Promise<void> {
+  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<void> {
+  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 createChild(request: APIRequestContext, name: string): Promise<string> {
+  const pre = await request.get(`${BACKEND}/child/list`)
+  for (const c of (await pre.json()).children ?? []) {
+    if (c.name === name) await request.delete(`${BACKEND}/child/${c.id}`)
+  }
+  await request.put(`${BACKEND}/child/add`, { data: { name, age: 8 } })
+  const list = await request.get(`${BACKEND}/child/list`)
+  return (
+    (await list.json()).children?.find(
+      (c: { name: string; id: string }) => c.name === name,
+    )?.id ?? ''
+  )
+}
+
+async function createTask(
+  request: APIRequestContext,
+  name: string,
+  type: 'chore' | 'kindness' | 'penalty',
+): Promise<string> {
+  const pre = await request.get(`${BACKEND}/task/list`)
+  for (const t of (await pre.json()).tasks ?? []) {
+    if (t.name === name) await request.delete(`${BACKEND}/task/${t.id}`)
+  }
+  await request.put(`${BACKEND}/task/add`, { data: { name, points: 5, type } })
+  const list = await request.get(`${BACKEND}/task/list`)
+  return (
+    (await list.json()).tasks?.find((t: { name: string; id: string }) => t.name === name)?.id ?? ''
+  )
+}
+
+async function createReward(request: APIRequestContext, name: string): Promise<string> {
+  const pre = await request.get(`${BACKEND}/reward/list`)
+  for (const r of (await pre.json()).rewards ?? []) {
+    if (r.name === name) await request.delete(`${BACKEND}/reward/${r.id}`)
+  }
+  await request.put(`${BACKEND}/reward/add`, {
+    data: { name, description: 'E2E dialog reward', cost: REWARD_COST },
+  })
+  const list = await request.get(`${BACKEND}/reward/list`)
+  return (
+    (await list.json()).rewards?.find((r: { name: string; id: string }) => r.name === name)?.id ??
+    ''
+  )
+}
+
+async function createRoutine(request: APIRequestContext, name: string): Promise<string> {
+  const pre = await request.get(`${BACKEND}/routine/list`)
+  for (const r of (await pre.json()).routines ?? []) {
+    if (r.name === name) await request.delete(`${BACKEND}/routine/${r.id}`)
+  }
+  const res = await request.put(`${BACKEND}/routine/add`, { data: { name, points: 5 } })
+  return (await res.json()).routine?.id ?? ''
+}
+
+async function assignTask(
+  request: APIRequestContext,
+  childId: string,
+  taskId: string,
+  type: 'chore' | 'kindness' | 'penalty',
+): Promise<void> {
+  const res = await request.put(`${BACKEND}/child/${childId}/set-tasks`, {
+    data: { task_ids: [taskId], type },
+  })
+  if (!res.ok()) {
+    throw new Error(`Failed to assign ${type}: ${res.status()} ${await res.text()}`)
+  }
+}
+
+async function assignReward(
+  request: APIRequestContext,
+  childId: string,
+  rewardId: string,
+): Promise<void> {
+  const res = await request.put(`${BACKEND}/child/${childId}/set-rewards`, {
+    data: { reward_ids: [rewardId] },
+  })
+  if (!res.ok()) {
+    throw new Error(`Failed to assign reward: ${res.status()} ${await res.text()}`)
+  }
+}
+
+async function assignRoutine(
+  request: APIRequestContext,
+  childId: string,
+  routineId: string,
+): Promise<void> {
+  const res = await request.post(`${BACKEND}/child/${childId}/assign-routine`, {
+    data: { routine_id: routineId },
+  })
+  if (!res.ok()) {
+    throw new Error(`Failed to assign routine: ${res.status()} ${await res.text()}`)
+  }
+}
+
+function helpButton(page: Page) {
+  return page.getByRole('button', { name: 'Show help for this screen' })
+}
+
+function modalBackdrop(page: Page) {
+  return page.locator('.modal-backdrop')
+}
+
+async function dismissAutoTutorialChain(page: Page): Promise<void> {
+  const card = page.locator('.tutorial-root .card')
+  for (let i = 0; i < 10; i++) {
+    if (!(await card.isVisible().catch(() => false))) return
+    await page.locator('.tutorial-root .btn-primary').click()
+    await page.waitForTimeout(200)
+  }
+}
+
+function sectionByHeading(page: Page, heading: string) {
+  return page.locator('.child-list-container').filter({
+    has: page.locator('h3', { hasText: heading }),
+  })
+}
+
+test.describe('Dialog help button and titles', () => {
+  test.describe.configure({ mode: 'serial' })
+
+  let childId = ''
+  let choreId = ''
+  let kindnessId = ''
+  let penaltyId = ''
+  let rewardId = ''
+  let routineId = ''
+
+  test.beforeAll(async ({ request }) => {
+    await setTutorialEnabled(request, true)
+    await resetTutorialProgress(request)
+
+    childId = await createChild(request, CHILD_NAME)
+    choreId = await createTask(request, CHORE_NAME, 'chore')
+    kindnessId = await createTask(request, KINDNESS_NAME, 'kindness')
+    penaltyId = await createTask(request, PENALTY_NAME, 'penalty')
+    rewardId = await createReward(request, REWARD_NAME)
+    routineId = await createRoutine(request, ROUTINE_NAME)
+
+    await assignTask(request, childId, choreId, 'chore')
+    await assignTask(request, childId, kindnessId, 'kindness')
+    await assignTask(request, childId, penaltyId, 'penalty')
+    await assignReward(request, childId, rewardId)
+    await assignRoutine(request, childId, routineId)
+
+    // Give the child enough points so the reward is ready to redeem.
+    await request.put(`${BACKEND}/child/${childId}/edit`, { data: { points: REWARD_COST } })
+  })
+
+  test.afterAll(async ({ request }) => {
+    if (childId) await request.delete(`${BACKEND}/child/${childId}`)
+    if (choreId) await request.delete(`${BACKEND}/task/${choreId}`)
+    if (kindnessId) await request.delete(`${BACKEND}/task/${kindnessId}`)
+    if (penaltyId) await request.delete(`${BACKEND}/task/${penaltyId}`)
+    if (rewardId) await request.delete(`${BACKEND}/reward/${rewardId}`)
+    if (routineId) await request.delete(`${BACKEND}/routine/${routineId}`)
+    await setTutorialEnabled(request, false)
+    await resetTutorialProgress(request)
+  })
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`/parent/${childId}`)
+    await expect(page.getByText(CHILD_NAME, { exact: true }).first()).toBeVisible({ timeout: 10000 })
+    await dismissAutoTutorialChain(page)
+    await expect(helpButton(page)).toBeVisible({ timeout: 5000 })
+  })
+
+  test('Task confirm dialog hides help button and shows "Confirm Task" for chores', async ({
+    page,
+  }) => {
+    const card = sectionByHeading(page, 'Chores').locator('.item-card').filter({ hasText: CHORE_NAME })
+    await card.waitFor({ state: 'visible' })
+    await card.click()
+    await expect(card).toHaveClass(/item-ready/, { timeout: 3000 })
+    await card.click()
+
+    await expect(modalBackdrop(page)).toBeVisible({ timeout: 3000 })
+    await expect(page.locator('.modal-title')).toHaveText('Confirm Task')
+    await expect(helpButton(page)).not.toBeVisible()
+
+    await page.getByRole('button', { name: 'Cancel' }).click()
+    await expect(modalBackdrop(page)).not.toBeVisible({ timeout: 3000 })
+    await expect(helpButton(page)).toBeVisible({ timeout: 5000 })
+  })
+
+  test('Task confirm dialog hides help button and shows "Confirm Act" for kindness acts', async ({
+    page,
+  }) => {
+    const card = sectionByHeading(page, 'Kindness Acts')
+      .locator('.item-card')
+      .filter({ hasText: KINDNESS_NAME })
+    await card.waitFor({ state: 'visible' })
+    await card.click()
+    await expect(card).toHaveClass(/item-ready/, { timeout: 3000 })
+    await card.click()
+
+    await expect(modalBackdrop(page)).toBeVisible({ timeout: 3000 })
+    await expect(page.locator('.modal-title')).toHaveText('Confirm Act')
+    await expect(helpButton(page)).not.toBeVisible()
+
+    await page.getByRole('button', { name: 'Cancel' }).click()
+    await expect(modalBackdrop(page)).not.toBeVisible({ timeout: 3000 })
+    await expect(helpButton(page)).toBeVisible({ timeout: 5000 })
+  })
+
+  test('Task confirm dialog hides help button for penalties', async ({ page }) => {
+    const card = sectionByHeading(page, 'Penalties')
+      .locator('.item-card')
+      .filter({ hasText: PENALTY_NAME })
+    await card.waitFor({ state: 'visible' })
+    await card.click()
+    await expect(card).toHaveClass(/item-ready/, { timeout: 3000 })
+    await card.click()
+
+    await expect(modalBackdrop(page)).toBeVisible({ timeout: 3000 })
+    await expect(page.locator('.modal-title')).toHaveText('Confirm Penalty')
+    await expect(helpButton(page)).not.toBeVisible()
+
+    await page.getByRole('button', { name: 'Cancel' }).click()
+    await expect(modalBackdrop(page)).not.toBeVisible({ timeout: 3000 })
+    await expect(helpButton(page)).toBeVisible({ timeout: 5000 })
+  })
+
+  test('Reward confirm dialog hides help button and shows "Grant Reward"', async ({ page }) => {
+    const card = sectionByHeading(page, 'Rewards').locator('.item-card').filter({ hasText: REWARD_NAME })
+    await card.waitFor({ state: 'visible' })
+    await expect(card.getByText('REWARD READY')).toBeVisible()
+
+    await card.click()
+    await expect(card).toHaveClass(/item-ready/, { timeout: 3000 })
+    await card.click()
+
+    await expect(modalBackdrop(page)).toBeVisible({ timeout: 3000 })
+    await expect(page.locator('.modal-title')).toHaveText('Grant Reward')
+    await expect(helpButton(page)).not.toBeVisible()
+
+    await page.getByRole('button', { name: 'No', exact: true }).click()
+    await expect(modalBackdrop(page)).not.toBeVisible({ timeout: 3000 })
+    await expect(helpButton(page)).toBeVisible({ timeout: 5000 })
+  })
+
+  test('Routine confirm dialog hides help button and shows "Confirm Routine"', async ({ page }) => {
+    const card = sectionByHeading(page, 'Routines').locator('.item-card').filter({ hasText: ROUTINE_NAME })
+    await card.waitFor({ state: 'visible' })
+    await card.click()
+    await expect(card).toHaveClass(/item-ready/, { timeout: 3000 })
+    await card.click()
+
+    await expect(modalBackdrop(page)).toBeVisible({ timeout: 3000 })
+    await expect(page.locator('.modal-title')).toHaveText('Confirm Routine')
+    await expect(helpButton(page)).not.toBeVisible()
+
+    await page.getByRole('button', { name: 'Cancel' }).click()
+    await expect(modalBackdrop(page)).not.toBeVisible({ timeout: 3000 })
+    await expect(helpButton(page)).toBeVisible({ timeout: 5000 })
+  })
+
+  test('help button replays the full tutorial chain when tutorial tips are disabled', async ({
+    page,
+    request,
+  }) => {
+    await setTutorialEnabled(request, false)
+    await resetTutorialProgress(request)
+
+    await page.goto(`/parent/${childId}`)
+    await expect(page.getByText(CHILD_NAME, { exact: true }).first()).toBeVisible({ timeout: 10000 })
+    await expect(page.locator('.tutorial-root .card')).not.toBeVisible()
+    await expect(helpButton(page)).toBeVisible({ timeout: 5000 })
+
+    await helpButton(page).click()
+
+    const cardTitle = page.locator('.tutorial-root .card .title')
+    await expect(cardTitle).toHaveText("This is your child's page")
+
+    await page.locator('.tutorial-root .btn-primary').click()
+    await expect(cardTitle).toHaveText('Assign chores')
+
+    await page.locator('.tutorial-root .btn-primary').click()
+    await expect(cardTitle).toHaveText('Assign kindness acts')
+
+    await page.locator('.tutorial-root .btn-primary').click()
+    await expect(cardTitle).toHaveText('Assign rewards')
+
+    await page.locator('.tutorial-root .btn-primary').click()
+    await expect(cardTitle).toHaveText('Assign routines')
+
+    await page.locator('.tutorial-root .btn-primary').click()
+    await expect(cardTitle).toHaveText('Assign penalties')
+
+    await page.locator('.tutorial-root .btn-primary').click()
+    await expect(cardTitle).toHaveText('Quick actions')
+
+    await page.locator('.tutorial-root .btn-primary').click()
+    await expect(page.locator('.tutorial-root .card')).not.toBeVisible()
+  })
+})

frontend/e2e/mode_parent/tutorial/tutorial.spec.ts

@@ -0,0 +1,444 @@
+import { test, expect, type APIRequestContext, type Page } from '@playwright/test'
+
+const BACKEND = 'http://localhost:5000'
+
+async function setTutorialEnabled(request: APIRequestContext, enabled: boolean): Promise<void> {
+  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<void> {
+  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<void> {
+  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<string> {
+  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<string | null> {
+  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<string> {
+  const existingId = await getFirstChildId(request)
+  if (existingId) return existingId
+  return createChild(request, name, age)
+}
+
+async function getFirstChoreId(request: APIRequestContext): Promise<string | null> {
+  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<string> {
+  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<void> {
+  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<string> {
+  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<void> {
+  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<void> {
+  await expect(getTutorialCard(page)).toBeVisible({ timeout: 10000 })
+  await expect(getTutorialTitle(page)).toHaveText(title)
+}
+
+async function dismissTutorial(page: Page): Promise<void> {
+  const card = getTutorialCard(page)
+  if (await card.isVisible({ timeout: 1000 }).catch(() => false)) {
+    // Use "Cancel" 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<void> {
+  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<void> {
+  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 })
+  })
+
+  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()
+  })
+})

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<void> {
+  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<void> {
   // 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/)
 

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<void> {
+  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()
 

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<void> {
+  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<void> {
   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()
   })
 })

frontend/e2e/plans/routines-feature.plan.md

@@ -0,0 +1,120 @@
+# Routines Feature E2E Plan
+
+## Application Overview
+
+The routines feature adds a new parent-defined checklist entity that sits between chores and rewards in child mode. A routine is confirmed as a whole (not per-item), then approved or rejected by the parent. Routine visibility and state are schedule-aware, include deadline extension support, and support per-child point overrides.
+
+This plan is intentionally implementation-driven so we can incrementally add tests as each phase ships.
+
+---
+
+## Coverage Areas
+
+### 1. Parent Routine Library Management
+
+File target: e2e/mode_parent/routines/routine-library.spec.ts
+
+1. Parent can create a routine with name, points, image.
+2. Parent can add multiple routine items and persist item order.
+3. Parent can edit routine metadata and item metadata.
+4. Parent can delete a routine item.
+5. Parent can delete a routine and it disappears from routine library list.
+
+### 2. Parent Child Assignment and Management
+
+File target: e2e/mode_parent/routines/routine-assignment.spec.ts
+
+1. Parent can assign routine to a child from assignable list.
+2. Parent can remove routine assignment from child.
+3. Parent can set/replace full routine assignment list for a child.
+4. Parent can set routine point override and child-facing value reflects override.
+5. Parent can set routine schedule and update it later.
+6. Parent can extend routine deadline for today.
+
+### 3. Child Routine Rendering and Navigation
+
+File target: e2e/mode_child/routines/routine-visibility.spec.ts
+
+1. Routines list renders between chores and rewards.
+2. Clicking a routine opens routine detail route (/child/:id/routine/:routineId).
+3. Detail view shows routine image, title, points, and non-interactive item list.
+4. Back navigation returns to child main view.
+
+### 4. Child Routine Confirmation Flow
+
+File target: e2e/mode_child/routines/routine-confirmation.spec.ts
+
+1. Child can mark routine Done; routine becomes pending.
+2. Child can cancel a pending routine confirmation.
+3. Child cannot submit duplicate pending confirmations.
+4. Approved-today routine shows completed state on child UI.
+5. Rejected routine returns to available state.
+
+### 5. Parent Pending Confirmation Flow
+
+File target: e2e/mode_parent/routines/routine-approval.spec.ts
+
+1. Routine confirmation appears in parent notification/pending list.
+2. Parent can approve routine; child points increase by default routine points.
+3. Parent can reject routine; child points do not change.
+4. Parent can reset approved/rejected routine to clear completion state.
+5. If routine override exists, approval uses override points instead of base points.
+
+### 6. Routine Scheduling and Deadline Behavior
+
+File target: e2e/mode_child/routines/routine-schedule.spec.ts
+
+1. Day-based schedules only show routines on scheduled days.
+2. Interval schedules show/hide routines on expected interval dates.
+3. Routine with deadline in the past displays TOO LATE and blocks Done.
+4. Extending deadline removes TOO LATE state for that day.
+5. Changing schedule resets stale pending status.
+
+### 7. Cascade and Data Integrity
+
+File target: e2e/mode_parent/routines/routine-cascade.spec.ts
+
+1. Deleting routine removes it from all assigned children.
+2. Deleting routine removes routine items.
+3. Deleting routine removes routine schedules and extensions.
+4. Deleting routine removes routine point overrides.
+5. Deleting child removes child routine schedules/extensions/overrides.
+
+### 8. SSE Reactivity
+
+File target: e2e/multi-session/routines/routine-sse.spec.ts
+
+1. Parent routine add/edit/delete updates child assignment views without refresh.
+2. Child routine pending/approved/rejected/reset updates parent notification UI without refresh.
+3. Schedule/extension changes update child routine card state without refresh.
+4. Override changes update points display without refresh.
+
+---
+
+## Test Data and Execution Notes
+
+1. Use API seeding in beforeAll and cleanup in afterAll per spec file.
+2. Use stable role/label-based locators only.
+3. Avoid /auth/login navigation in tests; rely on global storageState.
+4. For time-sensitive schedule tests, set deterministic times (or use clock controls where practical).
+
+---
+
+## Unit Test Expansion Checklist
+
+### Backend unit tests to add during implementation
+
+1. Routine CRUD API validation and ownership checks.
+2. Routine item CRUD and ordering behavior.
+3. Child routine assignment list and assignable-list filtering.
+4. Routine confirmation approve/reject/reset state transitions.
+5. Routine schedule and extension endpoints (including duplicate extension conflict).
+6. Routine deletion cascades (items/schedules/extensions/overrides/child assignments).
+
+### Frontend unit tests to add during implementation
+
+1. API helper coverage for routine endpoints.
+2. ScheduleModal entityType routing behavior for task vs routine.
+3. Child routine list sorting/filtering utility behavior.
+4. Routine detail confirmation UI state transitions.
+5. Parent pending confirmation card rendering for entity_type='routine'.

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
@@ -128,6 +135,15 @@ export default defineConfig({
       testMatch: [/mode_parent\/notifications\/.+\.spec\.ts/],
     },
 
+    {
+      // Bucket: routine tests — child-mode overlay flow (confirm + cancel) and
+      // parent notification appearance. Each spec creates its own isolated child.
+      name: 'chromium-routines',
+      use: { ...devices['Desktop Chrome'], storageState: STORAGE_STATE },
+      dependencies: ['setup'],
+      testMatch: [/mode_parent\/routines\/.+\.spec\.ts/],
+    },
+
     {
       // Bucket: parent profile button tests (permanent parent mode).
       name: 'chromium-profile-button',
@@ -161,6 +177,25 @@ 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/],
+      testIgnore: [/mode_parent\/tutorial\/dialog-help-button\.spec\.ts/],
+    },
+
+    {
+      // Bucket: dialog help-button/title tests — depends on the tutorial bucket
+      // so it reuses the isolated tutorial user without running concurrently.
+      name: 'chromium-dialog',
+      use: { ...devices['Desktop Chrome'], storageState: STORAGE_STATE_TUTORIAL },
+      dependencies: ['chromium-tutorial'],
+      testMatch: [/mode_parent\/tutorial\/dialog-help-button\.spec\.ts/],
+    },
+
     {
       name: 'chromium-tasks-rewards',
       use: { ...devices['Desktop Chrome'], storageState: STORAGE_STATE },
@@ -176,6 +211,8 @@ export default defineConfig({
         /mode_parent\/user-profile\//,
         /mode_parent\/chore-scheduler\//,
         /mode_parent\/notifications\//,
+        /mode_parent\/routines\//,
+        /mode_parent\/tutorial\//,
       ],
     },
 

frontend/src/App.vue

@@ -1,10 +1,16 @@
 <template>
   <BackendEventsListener />
   <router-view />
+  <TutorialOverlay />
+  <TutorialChildModeOffer />
+  <HelpButton />
 </template>
 
 <script setup lang="ts">
 import BackendEventsListener from '@/components/BackendEventsListener.vue'
+import TutorialOverlay from '@/tutorial/TutorialOverlay.vue'
+import TutorialChildModeOffer from '@/tutorial/TutorialChildModeOffer.vue'
+import HelpButton from '@/tutorial/HelpButton.vue'
 import { checkAuth } from '@/stores/auth'
 
 checkAuth()

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: '<div />' } }],
+})
+
 describe('App', () => {
   it('mounts renders properly', () => {
     const wrapper = mount(App, {
       global: {
+        plugins: [mockRouter],
         stubs: {
           'router-view': {
             template: '<div>You did it!</div>',

frontend/src/__tests__/ScheduleModal.spec.ts

@@ -2,17 +2,21 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
 import ScheduleModal from '../components/shared/ScheduleModal.vue'
-import type { ChildTask, ChoreSchedule } from '../common/models'
+import type { ChildTask, ChoreSchedule, RoutineSchedule } from '../common/models'
 
 // ---------------------------------------------------------------------------
 // Mocks
 // ---------------------------------------------------------------------------
 const mockSetChoreSchedule = vi.fn()
 const mockDeleteChoreSchedule = vi.fn()
+const mockSetRoutineSchedule = vi.fn()
+const mockDeleteRoutineSchedule = vi.fn()
 
 vi.mock('@/common/api', () => ({
   setChoreSchedule: (...args: unknown[]) => mockSetChoreSchedule(...args),
   deleteChoreSchedule: (...args: unknown[]) => mockDeleteChoreSchedule(...args),
+  setRoutineSchedule: (...args: unknown[]) => mockSetRoutineSchedule(...args),
+  deleteRoutineSchedule: (...args: unknown[]) => mockDeleteRoutineSchedule(...args),
   parseErrorResponse: vi.fn().mockResolvedValue({ msg: 'error', code: 'ERR' }),
 }))
 
@@ -39,9 +43,9 @@ const DateInputFieldStub = {
 const TASK: ChildTask = { id: 'task-1', name: 'Clean Room', type: 'chore', points: 5, image_id: '' }
 const CHILD_ID = 'child-1'
 
-function mountModal(schedule: ChoreSchedule | null = null) {
+function mountModal(schedule: ChoreSchedule | RoutineSchedule | null = null) {
   return mount(ScheduleModal, {
-    props: { task: TASK, childId: CHILD_ID, schedule },
+    props: { entity: TASK, entityType: 'task', childId: CHILD_ID, schedule },
     global: {
       stubs: {
         ModalDialog: ModalDialogStub,
@@ -55,8 +59,12 @@ function mountModal(schedule: ChoreSchedule | null = null) {
 beforeEach(() => {
   mockSetChoreSchedule.mockReset()
   mockDeleteChoreSchedule.mockReset()
+  mockSetRoutineSchedule.mockReset()
+  mockDeleteRoutineSchedule.mockReset()
   mockSetChoreSchedule.mockResolvedValue({ ok: true })
   mockDeleteChoreSchedule.mockResolvedValue({ ok: true })
+  mockSetRoutineSchedule.mockResolvedValue({ ok: true })
+  mockDeleteRoutineSchedule.mockResolvedValue({ ok: true })
 })
 // ---------------------------------------------------------------------------
 // Mode toggle
@@ -138,6 +146,13 @@ describe('ScheduleModal Specific Days form', () => {
     expect(w.find('.default-deadline-row').exists()).toBe(true)
   })
 
+  it('exposes the enable-toggle row for the tutorial anchor', () => {
+    const w = mountModal()
+    const toggleRow = w.find('.schedule-toggle-row')
+    expect(toggleRow.exists()).toBe(true)
+    expect(toggleRow.attributes('data-tutorial')).toBe('schedule-enable-toggle')
+  })
+
   it('Save is disabled when no days selected (isDirty is false)', () => {
     const w = mountModal()
     const saveBtn = w.find('.btn-primary')
@@ -488,3 +503,39 @@ describe('ScheduleModal backdrop', () => {
     expect(w.emitted('cancelled')).toBeFalsy()
   })
 })
+
+// ---------------------------------------------------------------------------
+// Entity type routing
+// ---------------------------------------------------------------------------
+describe('ScheduleModal entityType routing', () => {
+  it('uses routine schedule API when entityType is routine', async () => {
+    const routineEntity = { ...TASK, id: 'routine-1', items: [] }
+    const w = mount(ScheduleModal, {
+      props: {
+        entity: routineEntity,
+        entityType: 'routine',
+        childId: CHILD_ID,
+        schedule: null,
+      },
+      global: {
+        stubs: {
+          ModalDialog: ModalDialogStub,
+          TimePickerPopover: TimePickerPopoverStub,
+          DateInputField: DateInputFieldStub,
+        },
+      },
+    })
+
+    await w.findAll('.chip')[1].trigger('click')
+    await nextTick()
+    await w.find('.btn-primary').trigger('click')
+    await nextTick()
+
+    expect(mockSetRoutineSchedule).toHaveBeenCalledWith(
+      CHILD_ID,
+      'routine-1',
+      expect.objectContaining({ mode: 'days' }),
+    )
+    expect(mockSetChoreSchedule).not.toHaveBeenCalled()
+  })
+})

frontend/src/__tests__/UserProfile.spec.ts

@@ -34,6 +34,43 @@ vi.mock('../services/pushSubscription', () => ({
   getPushPermissionState: vi.fn().mockReturnValue('default'),
 }))
 
+const mockResetAllProgress = vi.fn().mockResolvedValue(undefined)
+vi.mock('@/tutorial/controller', () => ({
+  tutorialEnabled: { value: true },
+  setTutorialEnabled: vi.fn(),
+  resetAllProgress: () => mockResetAllProgress(),
+}))
+
+function stubModalDialog() {
+  return {
+    template: '<div class="mock-modal"><h2 v-if="title">{{ title }}</h2><slot /></div>',
+    props: ['title'],
+  }
+}
+
+function stubImagePicker() {
+  return {
+    template: '<div class="mock-image-picker" />',
+    props: ['modelValue', 'imageType'],
+    emits: ['update:modelValue', 'add-image'],
+  }
+}
+
+function stubToggleField() {
+  return {
+    template: '<div class="mock-toggle-field" />',
+    props: ['label', 'modelValue', 'disabled', 'description', 'error'],
+    emits: ['update:modelValue'],
+  }
+}
+
+function stubProfileSection() {
+  return {
+    template: '<div class="mock-profile-section"><slot /></div>',
+    props: ['title', 'defaultOpen'],
+  }
+}
+
 describe('UserProfile - Delete Account', () => {
   let wrapper: VueWrapper<any>
 
@@ -57,31 +94,24 @@ describe('UserProfile - Delete Account', () => {
       global: {
         plugins: [mockRouter],
         stubs: {
-          EntityEditForm: {
-            template:
-              '<div><slot name="custom-field-email" :modelValue="\'test@example.com\'" /></div>',
-          },
-          ModalDialog: {
-            template: '<div class="mock-modal" v-if="show"><slot /></div>',
-            props: ['show'],
-          },
+          ProfileSection: stubProfileSection(),
+          ImagePicker: stubImagePicker(),
+          ToggleField: stubToggleField(),
+          ModalDialog: stubModalDialog(),
         },
       },
     })
   })
 
   it('renders Delete My Account button', async () => {
-    // Wait for component to mount and render
     await flushPromises()
     await nextTick()
 
-    // Test the functionality exists by calling the method directly
     expect(wrapper.vm.openDeleteWarning).toBeDefined()
     expect(wrapper.vm.confirmDeleteAccount).toBeDefined()
   })
 
   it('opens warning modal when Delete My Account button is clicked', async () => {
-    // Test by calling the method directly
     wrapper.vm.openDeleteWarning()
     await nextTick()
 
@@ -91,21 +121,19 @@ describe('UserProfile - Delete Account', () => {
 
   it('Delete button in warning modal is disabled until email matches', async () => {
     // Set initial email
-    wrapper.vm.initialData.email = 'test@example.com'
+    wrapper.vm.email = 'test@example.com'
 
     // Open warning modal
     await wrapper.vm.openDeleteWarning()
     await nextTick()
 
-    // Find modal delete button (we need to check :disabled binding)
-    // Since we're using a stub, we'll test the logic directly
     wrapper.vm.confirmEmail = 'wrong@example.com'
     await nextTick()
-    expect(wrapper.vm.confirmEmail).not.toBe(wrapper.vm.initialData.email)
+    expect(wrapper.vm.confirmEmail).not.toBe(wrapper.vm.email)
 
     wrapper.vm.confirmEmail = 'test@example.com'
     await nextTick()
-    expect(wrapper.vm.confirmEmail).toBe(wrapper.vm.initialData.email)
+    expect(wrapper.vm.confirmEmail).toBe(wrapper.vm.email)
   })
 
   it('calls API when confirmed with correct email', async () => {
@@ -115,7 +143,7 @@ describe('UserProfile - Delete Account', () => {
     }
     ;(global.fetch as any).mockResolvedValueOnce(mockResponse)
 
-    wrapper.vm.initialData.email = 'test@example.com'
+    wrapper.vm.email = 'test@example.com'
     wrapper.vm.confirmEmail = 'test@example.com'
 
     await wrapper.vm.confirmDeleteAccount()
@@ -132,7 +160,7 @@ describe('UserProfile - Delete Account', () => {
   })
 
   it('does not call API if email is invalid format', async () => {
-    wrapper.vm.initialData.email = 'test@example.com'
+    wrapper.vm.email = 'test@example.com'
     wrapper.vm.confirmEmail = 'invalid-email'
 
     await wrapper.vm.confirmDeleteAccount()
@@ -149,7 +177,7 @@ describe('UserProfile - Delete Account', () => {
     }
     ;(global.fetch as any).mockResolvedValueOnce(mockResponse)
 
-    wrapper.vm.initialData.email = 'test@example.com'
+    wrapper.vm.email = 'test@example.com'
     wrapper.vm.confirmEmail = 'test@example.com'
 
     await wrapper.vm.confirmDeleteAccount()
@@ -166,7 +194,7 @@ describe('UserProfile - Delete Account', () => {
       return { ok: true, json: async () => ({ success: true }) }
     })
 
-    wrapper.vm.initialData.email = 'test@example.com'
+    wrapper.vm.email = 'test@example.com'
     wrapper.vm.confirmEmail = 'test@example.com'
 
     await wrapper.vm.confirmDeleteAccount()
@@ -180,7 +208,7 @@ describe('UserProfile - Delete Account', () => {
       json: async () => ({ success: true }),
     })
 
-    wrapper.vm.initialData.email = 'test@example.com'
+    wrapper.vm.email = 'test@example.com'
     wrapper.vm.confirmEmail = 'test@example.com'
 
     await wrapper.vm.confirmDeleteAccount()
@@ -196,7 +224,7 @@ describe('UserProfile - Delete Account', () => {
       json: async () => ({ error: 'fail', code: 'ERROR' }),
     })
 
-    wrapper.vm.initialData.email = 'test@example.com'
+    wrapper.vm.email = 'test@example.com'
     wrapper.vm.confirmEmail = 'test@example.com'
 
     await wrapper.vm.confirmDeleteAccount()
@@ -208,7 +236,7 @@ describe('UserProfile - Delete Account', () => {
   it('clears suppressForceLogout on network error', async () => {
     ;(global.fetch as any).mockRejectedValueOnce(new Error('Network error'))
 
-    wrapper.vm.initialData.email = 'test@example.com'
+    wrapper.vm.email = 'test@example.com'
     wrapper.vm.confirmEmail = 'test@example.com'
 
     await wrapper.vm.confirmDeleteAccount()
@@ -228,7 +256,7 @@ describe('UserProfile - Delete Account', () => {
     }
     ;(global.fetch as any).mockResolvedValueOnce(mockResponse)
 
-    wrapper.vm.initialData.email = 'test@example.com'
+    wrapper.vm.email = 'test@example.com'
     wrapper.vm.confirmEmail = 'test@example.com'
 
     await wrapper.vm.confirmDeleteAccount()
@@ -242,7 +270,7 @@ describe('UserProfile - Delete Account', () => {
   it('shows error modal on network error', async () => {
     ;(global.fetch as any).mockRejectedValueOnce(new Error('Network error'))
 
-    wrapper.vm.initialData.email = 'test@example.com'
+    wrapper.vm.email = 'test@example.com'
     wrapper.vm.confirmEmail = 'test@example.com'
 
     await wrapper.vm.confirmDeleteAccount()
@@ -307,7 +335,7 @@ describe('UserProfile - Delete Account', () => {
         }),
     )
 
-    wrapper.vm.initialData.email = 'test@example.com'
+    wrapper.vm.email = 'test@example.com'
     wrapper.vm.confirmEmail = 'test@example.com'
 
     const deletePromise = wrapper.vm.confirmDeleteAccount()
@@ -344,7 +372,7 @@ describe('UserProfile - Delete Account', () => {
     }
     ;(global.fetch as any).mockResolvedValueOnce(mockResponse)
 
-    wrapper.vm.initialData.email = 'test@example.com'
+    wrapper.vm.email = 'test@example.com'
     wrapper.vm.confirmEmail = 'test@example.com'
 
     await wrapper.vm.confirmDeleteAccount()
@@ -354,7 +382,7 @@ describe('UserProfile - Delete Account', () => {
   })
 })
 
-describe('UserProfile - Profile Update', () => {
+describe('UserProfile - Auto-save', () => {
   let wrapper: VueWrapper<any>
 
   beforeEach(() => {
@@ -369,90 +397,55 @@ describe('UserProfile - Profile Update', () => {
         first_name: 'Test',
         last_name: 'User',
         email: 'test@example.com',
+        email_digest_enabled: true,
       }),
     })
 
-    // Mount component with router
     wrapper = mount(UserProfile, {
       global: {
         plugins: [mockRouter],
         stubs: {
-          EntityEditForm: {
-            template: '<div class="mock-form"><slot /></div>',
-            props: ['initialData', 'fields', 'loading', 'error', 'isEdit', 'entityLabel', 'title'],
-            emits: ['submit', 'cancel', 'add-image'],
-          },
-          ModalDialog: {
-            template: '<div class="mock-modal"><slot /></div>',
-          },
+          ProfileSection: stubProfileSection(),
+          ImagePicker: stubImagePicker(),
+          ToggleField: stubToggleField(),
+          ModalDialog: stubModalDialog(),
         },
       },
     })
   })
 
-  it('updates initialData after successful profile save', async () => {
+  it('saveNames sends PUT with first and last name', async () => {
     await flushPromises()
     await nextTick()
+    ;(global.fetch as any).mockResolvedValueOnce({ ok: true, json: async () => ({}) })
 
-    // Initial image_id should be set from mount
-    expect(wrapper.vm.initialData.image_id).toBe('initial-image-id')
-
-    // Mock successful save response
-    ;(global.fetch as any).mockResolvedValueOnce({
-      ok: true,
-      json: async () => ({}),
-    })
-
-    // Simulate form submission with new image_id
-    const newFormData = {
-      image_id: 'new-image-id',
-      first_name: 'Updated',
-      last_name: 'Name',
-      email: 'test@example.com',
-    }
-
-    await wrapper.vm.handleSubmit(newFormData)
+    wrapper.vm.firstName = 'Updated'
+    wrapper.vm.lastName = 'Name'
+    await wrapper.vm.saveNames()
     await flushPromises()
 
-    // initialData should now be updated to match the saved form
-    expect(wrapper.vm.initialData.image_id).toBe('new-image-id')
-    expect(wrapper.vm.initialData.first_name).toBe('Updated')
-    expect(wrapper.vm.initialData.last_name).toBe('Name')
+    const putCall = (global.fetch as any).mock.calls.find((c: any[]) => c[1]?.method === 'PUT')
+    expect(putCall).toBeDefined()
+    const body = JSON.parse(putCall[1].body)
+    expect(body.first_name).toBe('Updated')
+    expect(body.last_name).toBe('Name')
   })
 
-  it('allows dirty detection after save when reverting to original value', async () => {
+  it('saveImage sends PUT with image_id', async () => {
     await flushPromises()
     await nextTick()
+    ;(global.fetch as any).mockResolvedValueOnce({ ok: true, json: async () => ({}) })
 
-    // Start with initial-image-id
-    expect(wrapper.vm.initialData.image_id).toBe('initial-image-id')
-
-    // Mock successful save
-    ;(global.fetch as any).mockResolvedValueOnce({
-      ok: true,
-      json: async () => ({}),
-    })
-
-    // Change and save to new-image-id
-    await wrapper.vm.handleSubmit({
-      image_id: 'new-image-id',
-      first_name: 'Test',
-      last_name: 'User',
-      email: 'test@example.com',
-    })
+    await wrapper.vm.saveImage('new-image-id')
     await flushPromises()
 
-    // initialData should now be new-image-id
-    expect(wrapper.vm.initialData.image_id).toBe('new-image-id')
-
-    // Now if user changes back to initial-image-id, it should be detected as different
-    // (because initialData is now new-image-id)
-    const currentInitial = wrapper.vm.initialData.image_id
-    expect(currentInitial).toBe('new-image-id')
-    expect(currentInitial).not.toBe('initial-image-id')
+    const putCall = (global.fetch as any).mock.calls.find((c: any[]) => c[1]?.method === 'PUT')
+    expect(putCall).toBeDefined()
+    const body = JSON.parse(putCall[1].body)
+    expect(body.image_id).toBe('new-image-id')
   })
 
-  it('handles image upload during profile save', async () => {
+  it('uploadLocalImage uploads file then saves image_id', async () => {
     await flushPromises()
     await nextTick()
 
@@ -471,24 +464,18 @@ describe('UserProfile - Profile Update', () => {
       json: async () => ({}),
     })
 
-    await wrapper.vm.handleSubmit({
-      image_id: 'local-upload',
-      first_name: 'Test',
-      last_name: 'User',
-      email: 'test@example.com',
-    })
+    await wrapper.vm.uploadLocalImage()
     await flushPromises()
 
     // Should have called image upload
-    expect(global.fetch).toHaveBeenCalledWith(
-      '/api/image/upload',
-      expect.objectContaining({
-        method: 'POST',
-      }),
+    const uploadCall = (global.fetch as any).mock.calls.find(
+      (c: any[]) => c[0] === '/api/image/upload',
     )
+    expect(uploadCall).toBeDefined()
+    expect(uploadCall[1].method).toBe('POST')
 
-    // initialData should be updated with uploaded image ID
-    expect(wrapper.vm.initialData.image_id).toBe('uploaded-image-id')
+    // imageId should be updated
+    expect(wrapper.vm.imageId).toBe('uploaded-image-id')
   })
 
   it('shows error message on failed image upload', async () => {
@@ -504,37 +491,10 @@ describe('UserProfile - Profile Update', () => {
       status: 500,
     })
 
-    await wrapper.vm.handleSubmit({
-      image_id: 'local-upload',
-      first_name: 'Test',
-      last_name: 'User',
-      email: 'test@example.com',
-    })
+    await wrapper.vm.uploadLocalImage()
     await flushPromises()
 
     expect(wrapper.vm.errorMsg).toBe('Failed to upload image.')
-    expect(wrapper.vm.loading).toBe(false)
-  })
-
-  it('shows success modal after profile update', async () => {
-    await flushPromises()
-    await nextTick()
-    ;(global.fetch as any).mockResolvedValueOnce({
-      ok: true,
-      json: async () => ({}),
-    })
-
-    await wrapper.vm.handleSubmit({
-      image_id: 'some-image-id',
-      first_name: 'Test',
-      last_name: 'User',
-      email: 'test@example.com',
-    })
-    await flushPromises()
-
-    expect(wrapper.vm.showModal).toBe(true)
-    expect(wrapper.vm.modalTitle).toBe('Profile Updated')
-    expect(wrapper.vm.modalMessage).toBe('Your profile was updated successfully.')
   })
 
   it('shows error message on failed profile update', async () => {
@@ -545,16 +505,10 @@ describe('UserProfile - Profile Update', () => {
       status: 500,
     })
 
-    await wrapper.vm.handleSubmit({
-      image_id: 'some-image-id',
-      first_name: 'Test',
-      last_name: 'User',
-      email: 'test@example.com',
-    })
+    await wrapper.vm.saveNames()
     await flushPromises()
 
     expect(wrapper.vm.errorMsg).toBe('Failed to update profile.')
-    expect(wrapper.vm.loading).toBe(false)
   })
 })
 
@@ -576,14 +530,10 @@ describe('UserProfile - Notification Toggles', () => {
       global: {
         plugins: [mockRouter],
         stubs: {
-          EntityEditForm: {
-            template:
-              '<div><slot name="custom-field-email" :modelValue="\'test@example.com\'" /></div>',
-          },
-          ModalDialog: {
-            template: '<div class="mock-modal" v-if="show"><slot /></div>',
-            props: ['show'],
-          },
+          ProfileSection: stubProfileSection(),
+          ImagePicker: stubImagePicker(),
+          ToggleField: stubToggleField(),
+          ModalDialog: stubModalDialog(),
         },
       },
     })
@@ -598,64 +548,37 @@ describe('UserProfile - Notification Toggles', () => {
     })
   })
 
-  it('initializes email_digest_enabled to true in initialData when profile returns true', async () => {
+  it('initializes emailDigestEnabled to true when profile returns true', async () => {
     wrapper = mountWithDigest(true)
     await flushPromises()
     await nextTick()
 
-    expect(wrapper.vm.initialData.email_digest_enabled).toBe(true)
+    expect(wrapper.vm.emailDigestEnabled).toBe(true)
   })
 
-  it('initializes email_digest_enabled to false in initialData when profile returns false', async () => {
+  it('initializes emailDigestEnabled to false when profile returns false', async () => {
     wrapper = mountWithDigest(false)
     await flushPromises()
     await nextTick()
 
-    expect(wrapper.vm.initialData.email_digest_enabled).toBe(false)
+    expect(wrapper.vm.emailDigestEnabled).toBe(false)
   })
 
-  it('initializes push_enabled to false in initialData when not subscribed', async () => {
+  it('initializes pushEnabled to false when not subscribed', async () => {
     wrapper = mountWithDigest(true)
     await flushPromises()
     await nextTick()
 
-    expect(wrapper.vm.initialData.push_enabled).toBe(false)
+    expect(wrapper.vm.pushEnabled).toBe(false)
   })
 
-  it('fields array includes email_digest_enabled as toggle type', async () => {
-    wrapper = mountWithDigest(true)
-    await flushPromises()
-    await nextTick()
-
-    const digestField = wrapper.vm.fields.find((f: any) => f.name === 'email_digest_enabled')
-    expect(digestField).toBeDefined()
-    expect(digestField.type).toBe('toggle')
-  })
-
-  it('fields array includes push_enabled as toggle type', async () => {
-    wrapper = mountWithDigest(true)
-    await flushPromises()
-    await nextTick()
-
-    const pushField = wrapper.vm.fields.find((f: any) => f.name === 'push_enabled')
-    expect(pushField).toBeDefined()
-    expect(pushField.type).toBe('toggle')
-  })
-
-  it('profile PUT includes email_digest_enabled when changed on submit', async () => {
+  it('onToggleDigest sends PUT with new value', async () => {
     wrapper = mountWithDigest(true)
     await flushPromises()
     await nextTick()
     ;(global.fetch as any).mockResolvedValueOnce({ ok: true, json: async () => ({}) })
 
-    await wrapper.vm.handleSubmit({
-      image_id: null,
-      first_name: 'Test',
-      last_name: 'User',
-      email: 'test@example.com',
-      email_digest_enabled: false,
-      push_enabled: false,
-    })
+    await wrapper.vm.onToggleDigest(false)
     await flushPromises()
 
     const putCall = (global.fetch as any).mock.calls.find((c: any[]) => c[1]?.method === 'PUT')
@@ -664,25 +587,80 @@ describe('UserProfile - Notification Toggles', () => {
     expect(body.email_digest_enabled).toBe(false)
   })
 
-  it('profile PUT omits email_digest_enabled when unchanged on submit', async () => {
+  it('onTogglePush sends PUT with new value and applies push change', async () => {
     wrapper = mountWithDigest(true)
     await flushPromises()
     await nextTick()
     ;(global.fetch as any).mockResolvedValueOnce({ ok: true, json: async () => ({}) })
 
-    await wrapper.vm.handleSubmit({
-      image_id: null,
-      first_name: 'Test',
-      last_name: 'User',
-      email: 'test@example.com',
-      email_digest_enabled: true, // same as initial
-      push_enabled: false,
-    })
+    expect(wrapper.vm.pushEnabled).toBe(false)
+    await wrapper.vm.onTogglePush(true)
     await flushPromises()
 
     const putCall = (global.fetch as any).mock.calls.find((c: any[]) => c[1]?.method === 'PUT')
     expect(putCall).toBeDefined()
     const body = JSON.parse(putCall[1].body)
-    expect(body.email_digest_enabled).toBeUndefined()
+    expect(body.push_notifications_enabled).toBe(true)
+  })
+})
+
+describe('UserProfile - Tutorial restart', () => {
+  let wrapper: VueWrapper<any>
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockResetAllProgress.mockClear()
+    ;(global.fetch as any).mockClear()
+    ;(global.fetch as any).mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        image_id: null,
+        first_name: 'Test',
+        last_name: 'User',
+        email: 'test@example.com',
+        email_digest_enabled: true,
+      }),
+    })
+
+    wrapper = mount(UserProfile, {
+      global: {
+        plugins: [mockRouter],
+        stubs: {
+          ProfileSection: stubProfileSection(),
+          ImagePicker: stubImagePicker(),
+          ToggleField: stubToggleField(),
+          ModalDialog: stubModalDialog(),
+        },
+      },
+    })
+  })
+
+  it('restart confirm modal uses "Tutorial Restart" title and explanatory wording', async () => {
+    await flushPromises()
+    await nextTick()
+
+    await wrapper.vm.openRestartConfirm()
+    await nextTick()
+
+    const modal = wrapper.find('.mock-modal')
+    expect(modal.exists()).toBe(true)
+    expect(modal.text()).toContain('Tutorial Restart')
+    expect(modal.text()).toContain('Start the tour again')
+  })
+
+  it('confirming restart resets tutorial progress and shows success modal', async () => {
+    await flushPromises()
+    await nextTick()
+
+    await wrapper.vm.openRestartConfirm()
+    await wrapper.vm.confirmRestartTutorial()
+    await flushPromises()
+    await nextTick()
+
+    expect(mockResetAllProgress).toHaveBeenCalledTimes(1)
+
+    const modal = wrapper.find('.mock-modal')
+    expect(modal.text()).toContain('Tutorial Restart')
+    expect(modal.text()).toContain('Tutorial mode has been restarted.')
   })
 })

frontend/src/assets/colors.css

@@ -33,6 +33,12 @@
   --form-input-border: #cbd5e1;
   --form-loading: #666;
 
+  /* Text colors */
+  --text-primary: #222;
+  --text-secondary: #888;
+  --input-bg: #f8fafc;
+  --border-color: #cbd5e1;
+
   --list-bg: #fff5;
   --list-item-bg: #f8fafc;
   --list-item-border-reward: #38c172;

frontend/src/common/__tests__/api.interceptor.spec.ts

@@ -6,6 +6,25 @@ vi.mock('@/stores/auth', () => ({
   logoutUser: () => mockLogoutUser(),
 }))
 
+function makeLocalStorageStub() {
+  const store: Record<string, string> = {}
+  return {
+    getItem: (key: string) => store[key] ?? null,
+    setItem: (key: string, value: string) => {
+      store[key] = value
+    },
+    removeItem: (key: string) => {
+      delete store[key]
+    },
+    clear: () => {
+      for (const k of Object.keys(store)) delete store[k]
+    },
+    _store: store,
+  }
+}
+
+const localStorageStub = makeLocalStorageStub()
+
 describe('installUnauthorizedFetchInterceptor', () => {
   const originalFetch = globalThis.fetch
 
@@ -13,10 +32,13 @@ describe('installUnauthorizedFetchInterceptor', () => {
     vi.resetModules()
     mockLogoutUser.mockReset()
     globalThis.fetch = vi.fn()
+    localStorageStub.clear()
+    vi.stubGlobal('localStorage', localStorageStub)
   })
 
   afterEach(() => {
     globalThis.fetch = originalFetch
+    vi.unstubAllGlobals()
   })
 
   it('attempts refresh on 401, retries the original request on success', async () => {
@@ -181,4 +203,67 @@ describe('installUnauthorizedFetchInterceptor', () => {
     expect(mockLogoutUser).not.toHaveBeenCalled()
     expect(redirectSpy).not.toHaveBeenCalled()
   })
+
+  it('sets lastRefreshAt in localStorage after a successful refresh', async () => {
+    const fetchMock = globalThis.fetch as unknown as ReturnType<typeof vi.fn>
+    fetchMock
+      .mockResolvedValueOnce({ status: 401 } as Response)
+      .mockResolvedValueOnce({ ok: true, status: 200 } as Response)
+      .mockResolvedValueOnce({ status: 200 } as Response)
+
+    window.history.pushState({}, '', '/parent')
+    const redirectSpy = vi.fn()
+
+    const {
+      installUnauthorizedFetchInterceptor,
+      setUnauthorizedRedirectHandlerForTests,
+      resetInterceptorStateForTests,
+    } = await import('../api')
+    resetInterceptorStateForTests()
+    setUnauthorizedRedirectHandlerForTests(redirectSpy)
+    installUnauthorizedFetchInterceptor()
+
+    await fetch('/api/user/profile')
+
+    const lastRefresh = localStorageStub.getItem('lastRefreshAt')
+    expect(lastRefresh).not.toBeNull()
+    expect(Number(lastRefresh)).toBeLessThanOrEqual(Date.now())
+    expect(mockLogoutUser).not.toHaveBeenCalled()
+    expect(redirectSpy).not.toHaveBeenCalled()
+  })
+
+  it('skips refresh call when another tab recently refreshed', async () => {
+    const fetchMock = globalThis.fetch as unknown as ReturnType<typeof vi.fn>
+    // Only original request and retry; refresh should be skipped due to cross-tab coordination
+    fetchMock
+      .mockResolvedValueOnce({ status: 401 } as Response)
+      .mockResolvedValueOnce({ status: 200, body: 'retried' } as unknown as Response)
+
+    window.history.pushState({}, '', '/parent')
+    const redirectSpy = vi.fn()
+
+    const {
+      installUnauthorizedFetchInterceptor,
+      setUnauthorizedRedirectHandlerForTests,
+      resetInterceptorStateForTests,
+    } = await import('../api')
+    resetInterceptorStateForTests()
+    setUnauthorizedRedirectHandlerForTests(redirectSpy)
+    installUnauthorizedFetchInterceptor()
+
+    // Simulate another tab having refreshed 1 second ago, after resetInterceptorStateForTests
+    localStorageStub.setItem('lastRefreshAt', String(Date.now() - 1000))
+
+    const result = await fetch('/api/user/profile')
+
+    // Should not call /api/auth/refresh; only original + retry
+    expect(fetchMock).toHaveBeenCalledTimes(2)
+    expect(fetchMock.mock.calls.map((c) => c[0])).toEqual([
+      '/api/user/profile',
+      '/api/user/profile',
+    ])
+    expect(mockLogoutUser).not.toHaveBeenCalled()
+    expect(redirectSpy).not.toHaveBeenCalled()
+    expect((result as Response).status).toBe(200)
+  })
 })

frontend/src/common/__tests__/api.routine.spec.ts

@@ -0,0 +1,60 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+
+import {
+  confirmRoutine,
+  cancelRoutineConfirmation,
+  setChildRoutineOverride,
+  setChildOverride,
+} from '../api'
+
+describe('routine api helpers', () => {
+  const originalFetch = globalThis.fetch
+
+  beforeEach(() => {
+    globalThis.fetch = vi.fn().mockResolvedValue({ ok: true, status: 200 } as Response)
+  })
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch
+  })
+
+  it('confirmRoutine posts to confirm endpoint', async () => {
+    await confirmRoutine('child-1', 'routine-1')
+
+    expect(globalThis.fetch).toHaveBeenCalledWith('/api/child/child-1/confirm-routine', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ routine_id: 'routine-1' }),
+    })
+  })
+
+  it('cancelRoutineConfirmation posts to cancel endpoint', async () => {
+    await cancelRoutineConfirmation('child-2', 'routine-2')
+
+    expect(globalThis.fetch).toHaveBeenCalledWith('/api/child/child-2/cancel-routine-confirmation', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ routine_id: 'routine-2' }),
+    })
+  })
+
+  it('setChildRoutineOverride delegates to override endpoint with routine entity type', async () => {
+    await setChildRoutineOverride('child-3', 'routine-3', 11)
+
+    expect(globalThis.fetch).toHaveBeenCalledWith('/api/child/child-3/override', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ entity_id: 'routine-3', entity_type: 'routine', custom_value: 11 }),
+    })
+  })
+
+  it('setChildOverride supports routine entity type directly', async () => {
+    await setChildOverride('child-4', 'routine-4', 'routine', 12)
+
+    expect(globalThis.fetch).toHaveBeenCalledWith('/api/child/child-4/override', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ entity_id: 'routine-4', entity_type: 'routine', custom_value: 12 }),
+    })
+  })
+})

frontend/src/common/api.ts

@@ -168,7 +168,7 @@ export async function getTrackingEventsForChild(params: {
 export async function setChildOverride(
   childId: string,
   entityId: string,
-  entityType: 'task' | 'reward',
+  entityType: 'task' | 'reward' | 'routine',
   customValue: number,
 ): Promise<Response> {
   return fetch(`/api/child/${childId}/override`, {
@@ -182,6 +182,14 @@ export async function setChildOverride(
   })
 }
 
+export async function setChildRoutineOverride(
+  childId: string,
+  routineId: string,
+  customValue: number,
+): Promise<Response> {
+  return setChildOverride(childId, routineId, 'routine', customValue)
+}
+
 /**
  * Get all overrides for a specific child.
  */
@@ -231,6 +239,37 @@ export async function deleteChoreSchedule(childId: string, taskId: string): Prom
   })
 }
 
+/**
+ * Get the schedule for a specific child + routine pair.
+ */
+export async function getRoutineSchedule(childId: string, routineId: string): Promise<Response> {
+  return fetch(`/api/child/${childId}/routine/${routineId}/schedule`)
+}
+
+/**
+ * Create or replace the schedule for a specific child + routine pair.
+ */
+export async function setRoutineSchedule(
+  childId: string,
+  routineId: string,
+  schedule: object,
+): Promise<Response> {
+  return fetch(`/api/child/${childId}/routine/${routineId}/schedule`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(schedule),
+  })
+}
+
+/**
+ * Delete the schedule for a specific child + routine pair.
+ */
+export async function deleteRoutineSchedule(childId: string, routineId: string): Promise<Response> {
+  return fetch(`/api/child/${childId}/routine/${routineId}/schedule`, {
+    method: 'DELETE',
+  })
+}
+
 /**
  * Extend a timed-out chore for the remainder of today only.
  * `localDate` is the client's local ISO date (e.g. '2026-02-22').
@@ -247,6 +286,22 @@ export async function extendChoreTime(
   })
 }
 
+/**
+ * Extend a timed-out routine for the remainder of today only.
+ * `localDate` is the client's local ISO date (e.g. '2026-02-22').
+ */
+export async function extendRoutineTime(
+  childId: string,
+  routineId: string,
+  localDate: string,
+): Promise<Response> {
+  return fetch(`/api/child/${childId}/routine/${routineId}/extend`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ date: localDate }),
+  })
+}
+
 // ── Chore Confirmation API ──────────────────────────────────────────────────
 
 /**
@@ -310,3 +365,102 @@ export async function resetChore(childId: string, taskId: string): Promise<Respo
 export async function fetchPendingConfirmations(): Promise<Response> {
   return fetch('/api/pending-confirmations')
 }
+
+/**
+ * Child confirms they completed a routine.
+ */
+export async function confirmRoutine(childId: string, routineId: string): Promise<Response> {
+  return fetch(`/api/child/${childId}/confirm-routine`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ routine_id: routineId }),
+  })
+}
+
+/**
+ * Child cancels a pending routine confirmation.
+ */
+export async function cancelRoutineConfirmation(
+  childId: string,
+  routineId: string,
+): Promise<Response> {
+  return fetch(`/api/child/${childId}/cancel-routine-confirmation`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ routine_id: routineId }),
+  })
+}
+
+/**
+ * Parent approves a pending routine confirmation (awards points).
+ */
+export async function approveRoutine(childId: string, confirmationId: string): Promise<Response> {
+  return fetch(`/api/child/${childId}/approve-routine/${confirmationId}`, {
+    method: 'POST',
+  })
+}
+
+/**
+ * Parent rejects a pending routine confirmation (no points, resets to available).
+ */
+export async function rejectRoutine(childId: string, confirmationId: string): Promise<Response> {
+  return fetch(`/api/child/${childId}/reject-routine/${confirmationId}`, {
+    method: 'POST',
+  })
+}
+
+/**
+ * Parent resets an approved routine (routine can be confirmed again).
+ */
+export async function resetRoutine(childId: string, confirmationId: string): Promise<Response> {
+  return fetch(`/api/child/${childId}/reset-routine/${confirmationId}`, {
+    method: 'POST',
+  })
+}
+
+/**
+ * Parent triggers a routine directly (awards points immediately).
+ */
+export async function triggerRoutineAsParent(
+  childId: string,
+  routineId: string,
+): Promise<Response> {
+  return fetch(`/api/child/${childId}/trigger-routine`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ routine_id: routineId }),
+  })
+}
+
+/**
+ * Assign a single routine to a child.
+ */
+export async function assignRoutine(childId: string, routineId: string): Promise<Response> {
+  return fetch(`/api/child/${childId}/assign-routine`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ routine_id: routineId }),
+  })
+}
+
+/**
+ * Remove a single routine assignment from a child.
+ */
+export async function removeRoutine(childId: string, routineId: string): Promise<Response> {
+  return fetch(`/api/child/${childId}/remove-routine`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ routine_id: routineId }),
+  })
+}
+
+/**
+ * Replace all routine assignments for a child.
+ */
+export async function setChildRoutines(childId: string, routineIds: string[]): Promise<Response> {
+  return fetch(`/api/child/${childId}/set-routines`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ routine_ids: routineIds }),
+  })
+}

frontend/src/common/models.ts

@@ -37,6 +37,57 @@ export interface ChoreSchedule {
   updated_at: number
 }
 
+export interface Routine {
+  id: string
+  name: string
+  points: number
+  image_id: string | null
+  image_url?: string | null
+}
+export const ROUTINE_FIELDS = ['id', 'name', 'points', 'image_id'] as const
+
+export interface RoutineItem {
+  id: string
+  routine_id: string
+  name: string
+  image_id: string | null
+  order: number
+}
+
+export interface RoutineSchedule {
+  id: string
+  child_id: string
+  routine_id: string
+  mode: 'days' | 'interval'
+  day_configs: DayConfig[]
+  default_hour?: number
+  default_minute?: number
+  default_has_deadline?: boolean
+  interval_days: number
+  anchor_date: string
+  interval_has_deadline: boolean
+  interval_hour: number
+  interval_minute: number
+  enabled?: boolean
+  created_at: number
+  updated_at: number
+}
+
+export interface ChildRoutine {
+  id: string
+  name: string
+  points: number
+  image_id: string | null
+  image_url?: string | null
+  custom_value?: number | null
+  schedule?: RoutineSchedule | null
+  extension_date?: string | null
+  pending_status?: 'pending' | 'approved' | null
+  approved_at?: string | null
+  pending_confirmation_id?: string | null
+  items: RoutineItem[]
+}
+
 export interface ChildTask {
   id: string
   name: string
@@ -65,6 +116,8 @@ export interface User {
   role: string
   timezone: string | null
   email_digest_enabled: boolean
+  tutorial_enabled?: boolean
+  tutorial_progress?: Record<string, boolean>
 }
 
 export interface Child {
@@ -72,12 +125,22 @@ export interface Child {
   name: string
   age: number
   tasks: string[]
+  routines?: string[]
   rewards: string[]
   points: number
   image_id: string | null
   image_url?: string | null // optional, for resolved URLs
 }
-export const CHILD_FIELDS = ['id', 'name', 'age', 'tasks', 'rewards', 'points', 'image_id'] as const
+export const CHILD_FIELDS = [
+  'id',
+  'name',
+  'age',
+  'tasks',
+  'routines',
+  'rewards',
+  'points',
+  'image_id',
+] as const
 
 export interface Reward {
   id: string
@@ -114,7 +177,7 @@ export interface PendingConfirmation {
   child_image_id: string | null
   child_image_url?: string | null
   entity_id: string
-  entity_type: 'chore' | 'reward'
+  entity_type: 'chore' | 'reward' | 'routine'
   entity_name: string
   entity_image_id: string | null
   entity_image_url?: string | null
@@ -151,6 +214,11 @@ export interface Event {
     | ChoreScheduleModifiedPayload
     | ChoreTimeExtendedPayload
     | ChildChoreConfirmationPayload
+    | RoutineModifiedEventPayload
+    | ChildRoutinesSetEventPayload
+    | RoutineScheduleModifiedPayload
+    | RoutineTimeExtendedPayload
+    | ChildRoutineConfirmationPayload
 }
 
 export interface ChildModifiedEventPayload {
@@ -194,6 +262,16 @@ export interface RewardModifiedEventPayload {
   operation: 'ADD' | 'DELETE' | 'EDIT'
 }
 
+export interface RoutineModifiedEventPayload {
+  routine_id: string
+  operation: 'ADD' | 'DELETE' | 'EDIT'
+}
+
+export interface ChildRoutinesSetEventPayload {
+  child_id: string
+  routine_ids: string[]
+}
+
 export interface TrackingEventCreatedPayload {
   tracking_event_id: string
   child_id: string
@@ -211,7 +289,7 @@ export interface ChildOverrideDeletedPayload {
   entity_type: string
 }
 
-export type EntityType = 'task' | 'reward' | 'penalty' | 'chore' | 'kindness'
+export type EntityType = 'task' | 'reward' | 'penalty' | 'chore' | 'kindness' | 'routine'
 export type ActionType =
   | 'activated'
   | 'requested'
@@ -254,7 +332,7 @@ export const TRACKING_EVENT_FIELDS = [
   'metadata',
 ] as const
 
-export type OverrideEntityType = 'task' | 'reward' | 'chore' | 'kindness' | 'penalty'
+export type OverrideEntityType = 'task' | 'reward' | 'chore' | 'kindness' | 'penalty' | 'routine'
 
 export interface ChildOverride {
   id: string
@@ -292,3 +370,20 @@ export interface ChildChoreConfirmationPayload {
   task_id: string
   operation: 'CONFIRMED' | 'APPROVED' | 'REJECTED' | 'CANCELLED' | 'RESET'
 }
+
+export interface RoutineScheduleModifiedPayload {
+  child_id: string
+  routine_id: string
+  operation: 'SET' | 'DELETED'
+}
+
+export interface RoutineTimeExtendedPayload {
+  child_id: string
+  routine_id: string
+}
+
+export interface ChildRoutineConfirmationPayload {
+  child_id: string
+  routine_id: string
+  operation: 'PENDING' | 'APPROVED' | 'REJECTED' | 'RESET'
+}

frontend/src/components/child/ChildEditView.vue

@@ -19,6 +19,7 @@
 import { ref, onMounted, computed, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import EntityEditForm from '../shared/EntityEditForm.vue'
+import { maybeShow as tutorialMaybeShow } from '@/tutorial/controller'
 import '@/assets/styles.css'
 
 const router = useRouter()
@@ -55,6 +56,7 @@ const loading = ref(false)
 const error = ref<string | null>(null)
 
 onMounted(async () => {
+  if (!isEdit.value) tutorialMaybeShow('edit-child-name')
   if (isEdit.value && props.id) {
     loading.value = true
     try {

frontend/src/components/child/ChildRoutineOverlay.vue

@@ -0,0 +1,362 @@
+<template>
+  <div v-if="show && routine" class="overlay-backdrop" @click.self="$emit('close')">
+    <section class="overlay-panel" aria-modal="true" role="dialog">
+      <header class="overlay-header">
+        <img
+          v-if="routine.image_url"
+          :src="routine.image_url"
+          :alt="routine.name"
+          class="routine-image"
+        />
+        <p class="routine-question">
+          {{ isPending ? 'This routine is pending' : 'Did you complete' }}
+        </p>
+        <h3 class="routine-name">{{ routine.name }}{{ isPending ? '' : '?' }}</h3>
+      </header>
+
+      <!-- Pending-cancel view -->
+      <template v-if="isPending">
+        <div class="overlay-body pending-body">
+          <p class="pending-message">
+            This routine is pending confirmation.<br />Would you like to cancel?
+          </p>
+        </div>
+        <footer class="overlay-actions">
+          <button type="button" class="btn btn-secondary" @click="$emit('close')">No</button>
+          <button type="button" class="btn btn-primary" @click="$emit('cancel-pending')">
+            Yes
+          </button>
+        </footer>
+      </template>
+
+      <!-- Normal complete view -->
+      <template v-else>
+        <div class="overlay-body">
+          <div v-if="loading" class="empty-state">Loading tasks...</div>
+          <div v-else-if="routine.items.length === 0" class="empty-state">
+            No routine tasks found.
+          </div>
+          <div v-else class="scroll-wrapper" ref="scrollWrapper">
+            <div class="task-scroll">
+              <button
+                v-for="item in resolvedItems"
+                :key="item.id"
+                type="button"
+                class="task-card"
+                :title="item.name"
+                @click="$emit('task-click', item)"
+              >
+                <img
+                  v-if="item.image_url"
+                  :src="item.image_url"
+                  :alt="item.name"
+                  class="task-image"
+                />
+                <span class="task-name">{{ item.name }}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <footer class="overlay-actions">
+          <button type="button" class="btn btn-secondary" @click="$emit('close')">No</button>
+          <button
+            v-if="canComplete"
+            type="button"
+            class="btn btn-primary"
+            @click="$emit('complete')"
+          >
+            Yes!
+          </button>
+        </footer>
+      </template>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { ChildRoutine, RoutineItem } from '@/common/models'
+import { getCachedImageUrl } from '@/common/imageCache'
+
+const props = defineProps<{
+  show: boolean
+  routine: ChildRoutine | null
+  canComplete: boolean
+  isPending?: boolean
+}>()
+
+defineEmits<{
+  close: []
+  complete: []
+  'cancel-pending': []
+  'task-click': [item: RoutineItem]
+}>()
+
+const loading = ref(false)
+const resolvedItems = ref<(RoutineItem & { image_url?: string })[]>([])
+
+// Resolve images when routine changes
+watch(
+  () => props.routine,
+  async (newRoutine) => {
+    if (!newRoutine?.items.length) {
+      resolvedItems.value = []
+      return
+    }
+
+    loading.value = true
+    const itemsWithImages = await Promise.all(
+      newRoutine.items.map(async (item) => {
+        let image_url: string | undefined
+        if (item.image_id) {
+          try {
+            image_url = await getCachedImageUrl(item.image_id)
+          } catch {
+            image_url = undefined
+          }
+        }
+        return { ...item, image_url }
+      }),
+    )
+    resolvedItems.value = itemsWithImages
+    loading.value = false
+  },
+  { immediate: true },
+)
+</script>
+
+<style scoped>
+.overlay-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  z-index: 1100;
+}
+
+.overlay-panel {
+  width: min(92vw, 600px);
+  max-height: min(85vh, 720px);
+  display: flex;
+  flex-direction: column;
+  background: var(--modal-bg, #fff);
+  border-radius: 16px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
+  overflow: hidden;
+}
+
+.overlay-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0.5rem;
+  padding: 1.5rem 1.25rem 1rem;
+  border-bottom: 1px solid var(--form-input-border, rgba(0, 0, 0, 0.08));
+}
+
+.routine-image {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 14px;
+  background: var(--info-image-bg);
+  margin-bottom: 0.25rem;
+}
+
+.routine-question {
+  margin: 0;
+  color: var(--modal-message-color, #555);
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.routine-name {
+  margin: 0.15rem 0 0;
+  color: var(--btn-primary, #667eea);
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+
+.overlay-body {
+  flex: 1 1 auto;
+  overflow: hidden;
+  padding: 1rem 1.25rem;
+}
+
+.pending-body {
+  overflow: visible;
+}
+
+.pending-message {
+  text-align: center;
+  color: var(--modal-message-color, #333);
+  font-size: 1rem;
+  line-height: 1.6;
+  padding: 0.5rem 0;
+  margin: 0;
+}
+
+.tasks-heading {
+  display: none;
+}
+
+.empty-state {
+  color: var(--loading-color, #888);
+  text-align: center;
+  padding: 2rem 1rem;
+}
+
+.scroll-wrapper {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  width: 100%;
+  -webkit-overflow-scrolling: touch;
+}
+
+.scroll-wrapper::-webkit-scrollbar {
+  height: 6px;
+}
+
+.scroll-wrapper::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scroll-wrapper::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+}
+
+.scroll-wrapper::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.task-scroll {
+  display: flex;
+  gap: 0.75rem;
+  min-width: min-content;
+  padding: 0.5rem 0;
+}
+
+.task-card {
+  position: relative;
+  background: var(--list-item-bg-good, rgba(200, 230, 201, 0.3));
+  border-radius: 8px;
+  padding: 0.75rem;
+  min-width: 120px;
+  max-width: 160px;
+  width: 100%;
+  text-align: center;
+  flex-shrink: 0;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid var(--list-item-border-good, rgba(100, 180, 100, 0.3));
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  transition:
+    transform 0.18s ease,
+    box-shadow 0.18s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@media (hover: hover) {
+  .task-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
+  }
+}
+
+.task-card:active {
+  transform: scale(0.97);
+}
+
+.task-image {
+  width: 70px;
+  height: 70px;
+  object-fit: cover;
+  border-radius: 6px;
+  display: block;
+}
+
+.task-name {
+  display: block;
+  color: var(--form-label, #222);
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1.2;
+  word-break: break-word;
+}
+
+.overlay-actions {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1rem 1.25rem 1.25rem;
+  border-top: 1px solid var(--form-input-border, rgba(0, 0, 0, 0.08));
+}
+
+.btn {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 600;
+  transition: opacity 0.2s;
+}
+
+.btn-secondary {
+  background: var(--btn-secondary, #f0f0f0);
+  color: var(--btn-secondary-text, #333);
+}
+
+.btn-secondary:hover {
+  opacity: 0.8;
+}
+
+.btn-primary {
+  background: var(--btn-primary, #667eea);
+  color: #fff;
+}
+
+.btn-primary:hover {
+  opacity: 0.9;
+}
+
+@media (max-width: 480px) {
+  .overlay-panel {
+    width: min(94vw, 600px);
+    max-height: 88vh;
+  }
+
+  .overlay-header {
+    align-items: flex-start;
+  }
+
+  .overlay-actions {
+    gap: 0.75rem;
+  }
+
+  .task-card {
+    min-width: 100px;
+    max-width: 140px;
+    padding: 0.6rem;
+  }
+
+  .task-image {
+    width: 50px;
+    height: 50px;
+  }
+
+  .task-name {
+    font-size: 0.8rem;
+  }
+}
+</style>

frontend/src/components/child/ChildView.vue

@@ -1,26 +1,31 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import ChildDetailCard from './ChildDetailCard.vue'
 import ScrollingList from '../shared/ScrollingList.vue'
 import StatusMessage from '../shared/StatusMessage.vue'
 import RewardConfirmDialog from './RewardConfirmDialog.vue'
 import ChoreConfirmDialog from './ChoreConfirmDialog.vue'
+import ChildRoutineOverlay from './ChildRoutineOverlay.vue'
 import ModalDialog from '../shared/ModalDialog.vue'
 import { eventBus } from '@/common/eventBus'
+import { setHelpButtonHidden } from '@/tutorial/controller'
 //import '@/assets/view-shared.css'
 import '@/assets/styles.css'
 import type {
   Child,
   Event,
-  Task,
+  ChoreSchedule,
   RewardStatus,
   ChildTask,
+  ChildRoutine,
+  RoutineItem,
   ChildTaskTriggeredEventPayload,
   ChildRewardTriggeredEventPayload,
   ChildRewardRequestEventPayload,
   ChildTasksSetEventPayload,
   ChildRewardsSetEventPayload,
+  ChildRoutinesSetEventPayload,
   TaskModifiedEventPayload,
   RewardModifiedEventPayload,
   ChildModifiedEventPayload,
@@ -30,7 +35,12 @@ import type {
   ChildOverrideSetPayload,
   ChildOverrideDeletedPayload,
 } from '@/common/models'
-import { confirmChore, cancelConfirmChore } from '@/common/api'
+import {
+  confirmChore,
+  cancelConfirmChore,
+  confirmRoutine,
+  cancelRoutineConfirmation,
+} from '@/common/api'
 import {
   isScheduledToday,
   isPastTime,
@@ -46,6 +56,7 @@ const router = useRouter()
 
 const child = ref<Child | null>(null)
 const tasks = ref<string[]>([])
+const routines = ref<string[]>([])
 const rewards = ref<string[]>([])
 const loading = ref(true)
 const error = ref<string | null>(null)
@@ -56,6 +67,9 @@ const dialogReward = ref<RewardStatus | null>(null)
 const showChoreConfirmDialog = ref(false)
 const showChoreCancelDialog = ref(false)
 const dialogChore = ref<ChildTask | null>(null)
+const showRoutineOverlay = ref(false)
+const dialogRoutine = ref<ChildRoutine | null>(null)
+const childRoutineListRef = ref()
 
 function handleTaskTriggered(event: Event) {
   const payload = event.payload as ChildTaskTriggeredEventPayload
@@ -87,6 +101,13 @@ function handleChildRewardSet(event: Event) {
   }
 }
 
+function handleChildRoutineSet(event: Event) {
+  const payload = event.payload as ChildRoutinesSetEventPayload
+  if (child.value && payload.child_id == child.value.id) {
+    routines.value = payload.routine_ids
+  }
+}
+
 function handleRewardRequest(event: Event) {
   const payload = event.payload as ChildRewardRequestEventPayload
   const childId = payload.child_id
@@ -222,6 +243,29 @@ const triggerTask = async (task: ChildTask) => {
   // Kindness / Penalty: speech-only in child mode; point changes are handled in parent mode.
 }
 
+const handleRoutineClick = (routine: ChildRoutine) => {
+  if (isRoutineExpired(routine) || routine.pending_status === 'approved') return
+  dialogRoutine.value = routine
+  setTimeout(() => {
+    showRoutineOverlay.value = true
+  }, 150)
+}
+
+function speakText(text: string) {
+  if (!('speechSynthesis' in window)) return
+  window.speechSynthesis.cancel()
+  if (!text) return
+  const utter = new window.SpeechSynthesisUtterance(text)
+  utter.rate = 1.0
+  utter.pitch = 1.0
+  utter.volume = 1.0
+  window.speechSynthesis.speak(utter)
+}
+
+function handleRoutineTaskClick(item: RoutineItem) {
+  speakText(item.name)
+}
+
 function isChoreCompletedToday(item: ChildTask): boolean {
   if (item.pending_status !== 'approved' || !item.approved_at) return false
   const approvedDate = new Date(item.approved_at)
@@ -273,6 +317,48 @@ function closeChoreCancelDialog() {
   dialogChore.value = null
 }
 
+async function doConfirmRoutine() {
+  if (!child.value?.id || !dialogRoutine.value) return
+  try {
+    const resp = await confirmRoutine(child.value.id, dialogRoutine.value.id)
+    if (!resp.ok) {
+      console.error('Failed to confirm routine')
+    }
+  } catch (err) {
+    console.error('Failed to confirm routine:', err)
+  } finally {
+    showRoutineOverlay.value = false
+    dialogRoutine.value = null
+  }
+}
+
+function handleChildRoutineConfirmation(event: Event) {
+  const payload = event.payload as { child_id: string }
+  if (child.value && payload.child_id === child.value.id) {
+    childRoutineListRef.value?.refresh()
+  }
+}
+
+function closeRoutineOverlay() {
+  showRoutineOverlay.value = false
+  dialogRoutine.value = null
+}
+
+async function doCancelConfirmRoutine() {
+  if (!child.value?.id || !dialogRoutine.value) return
+  try {
+    const resp = await cancelRoutineConfirmation(child.value.id, dialogRoutine.value.id)
+    if (!resp.ok) {
+      console.error('Failed to cancel routine confirmation')
+    }
+  } catch (err) {
+    console.error('Failed to cancel routine confirmation:', err)
+  } finally {
+    showRoutineOverlay.value = false
+    dialogRoutine.value = null
+  }
+}
+
 const triggerReward = (reward: RewardStatus) => {
   // Cancel any pending speech to avoid conflicts
   if ('speechSynthesis' in window) {
@@ -461,6 +547,22 @@ function isChoreExpired(item: ChildTask): boolean {
   return isPastTime(due.hour, due.minute, today)
 }
 
+function isRoutineExpired(item: ChildRoutine): boolean {
+  if (item.pending_status === 'pending') return false
+  if (!item.schedule) return false
+  const today = new Date()
+  const due = getDueTimeToday(item.schedule as unknown as ChoreSchedule, today)
+  if (!due) return false
+  if (item.extension_date && isExtendedToday(item.extension_date, today)) return false
+  return isPastTime(due.hour, due.minute, today)
+}
+
+const canCompleteRoutine = computed(() => {
+  const routine = dialogRoutine.value
+  if (!routine) return false
+  return routine.pending_status == null && !isRoutineExpired(routine)
+})
+
 function choreDueLabel(item: ChildTask): string | null {
   if (!item.schedule) return null
   const today = new Date()
@@ -539,12 +641,15 @@ const hasPendingRewards = computed(() =>
   childRewardListRef.value?.items.some((r: RewardStatus) => r.redeeming),
 )
 
+watch(showRewardDialog, (newVal) => setHelpButtonHidden(newVal))
+
 onMounted(async () => {
   try {
     eventBus.on('child_task_triggered', handleTaskTriggered)
     eventBus.on('child_reward_triggered', handleRewardTriggered)
     eventBus.on('child_tasks_set', handleChildTaskSet)
     eventBus.on('child_rewards_set', handleChildRewardSet)
+    eventBus.on('child_routines_set', handleChildRoutineSet)
     eventBus.on('task_modified', handleTaskModified)
     eventBus.on('reward_modified', handleRewardModified)
     eventBus.on('child_modified', handleChildModified)
@@ -552,6 +657,7 @@ onMounted(async () => {
     eventBus.on('chore_schedule_modified', handleChoreScheduleModified)
     eventBus.on('chore_time_extended', handleChoreTimeExtended)
     eventBus.on('child_chore_confirmation', handleChoreConfirmation)
+    eventBus.on('child_routine_confirmation', handleChildRoutineConfirmation)
     eventBus.on('child_override_set', handleOverrideSet)
     eventBus.on('child_override_deleted', handleOverrideDeleted)
     document.addEventListener('visibilitychange', onVisibilityChange)
@@ -563,6 +669,7 @@ onMounted(async () => {
           if (data) {
             child.value = data
             tasks.value = data.tasks || []
+            routines.value = data.routines || []
             rewards.value = data.rewards || []
           }
           loading.value = false
@@ -582,6 +689,7 @@ onUnmounted(() => {
   eventBus.off('child_reward_triggered', handleRewardTriggered)
   eventBus.off('child_tasks_set', handleChildTaskSet)
   eventBus.off('child_rewards_set', handleChildRewardSet)
+  eventBus.off('child_routines_set', handleChildRoutineSet)
   eventBus.off('task_modified', handleTaskModified)
   eventBus.off('reward_modified', handleRewardModified)
   eventBus.off('child_modified', handleChildModified)
@@ -589,6 +697,7 @@ onUnmounted(() => {
   eventBus.off('chore_schedule_modified', handleChoreScheduleModified)
   eventBus.off('chore_time_extended', handleChoreTimeExtended)
   eventBus.off('child_chore_confirmation', handleChoreConfirmation)
+  eventBus.off('child_routine_confirmation', handleChildRoutineConfirmation)
   eventBus.off('child_override_set', handleOverrideSet)
   eventBus.off('child_override_deleted', handleOverrideDeleted)
   document.removeEventListener('visibilitychange', onVisibilityChange)
@@ -604,6 +713,51 @@ onUnmounted(() => {
     <div v-if="!loading && !error" class="layout">
       <div class="main">
         <ChildDetailCard :child="child" />
+        <ScrollingList
+          v-if="routines.length > 0"
+          title="Routines"
+          ref="childRoutineListRef"
+          :fetchBaseUrl="`/api/child/${child?.id}/list-routines`"
+          :ids="routines"
+          itemKey="routines"
+          imageField="image_id"
+          :isParentAuthenticated="false"
+          :readyItemId="readyItemId"
+          @item-ready="handleItemReady"
+          @trigger-item="handleRoutineClick"
+          :getItemClass="
+            (item: ChildRoutine) => ({
+              good: true,
+              'routine-pending': item.pending_status === 'pending',
+              'routine-approved': item.pending_status === 'approved',
+            })
+          "
+        >
+          <template #item="{ item }: { item: ChildRoutine }">
+            <span v-if="item.pending_status === 'pending'" class="chore-stamp pending-stamp"
+              >PENDING</span
+            >
+            <span v-else-if="isRoutineExpired(item)" class="chore-stamp">TOO LATE</span>
+            <span v-else-if="item.pending_status === 'approved'" class="chore-stamp completed-stamp"
+              >APPROVED</span
+            >
+            <div class="item-name">{{ item.name }}</div>
+            <img
+              v-if="item.image_url"
+              :src="item.image_url"
+              alt="Routine Image"
+              class="item-image"
+            />
+            <div class="item-points good-points">
+              {{
+                item.custom_value !== undefined && item.custom_value !== null
+                  ? item.custom_value
+                  : item.points
+              }}
+              Points
+            </div>
+          </template>
+        </ScrollingList>
         <ScrollingList
           title="Chores"
           ref="childChoreListRef"
@@ -678,6 +832,7 @@ onUnmounted(() => {
           </template>
         </ScrollingList>
         <ScrollingList
+          v-show="childKindnessListRef?.items?.length > 0"
           title="Kindness Acts"
           ref="childKindnessListRef"
           :fetchBaseUrl="`/api/child/${child?.id}/list-tasks`"
@@ -705,6 +860,7 @@ onUnmounted(() => {
           </template>
         </ScrollingList>
         <ScrollingList
+          v-show="childPenaltyListRef?.items?.length > 0"
           title="Penalties"
           ref="childPenaltyListRef"
           :fetchBaseUrl="`/api/child/${child?.id}/list-tasks`"
@@ -785,6 +941,18 @@ onUnmounted(() => {
       <button @click="closeChoreCancelDialog" class="btn btn-secondary">No</button>
     </div>
   </ModalDialog>
+
+  <!-- Routine confirm dialog -->
+  <ChildRoutineOverlay
+    :show="showRoutineOverlay"
+    :routine="dialogRoutine"
+    :canComplete="canCompleteRoutine"
+    :isPending="dialogRoutine?.pending_status === 'pending'"
+    @task-click="handleRoutineTaskClick"
+    @complete="doConfirmRoutine"
+    @cancel-pending="doCancelConfirmRoutine"
+    @close="closeRoutineOverlay"
+  />
 </template>
 
 <style scoped>

frontend/src/components/child/ChoreAssignView.vue

@@ -27,6 +27,8 @@
       <button class="btn btn-secondary" @click="onCancel">Cancel</button>
       <button class="btn btn-primary" @click="onSubmit">Submit</button>
     </div>
+
+    <FloatingActionButton aria-label="Create Chore" @click="goToCreate" />
   </div>
 </template>
 
@@ -35,6 +37,7 @@ import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import ItemList from '../shared/ItemList.vue'
 import MessageBlock from '../shared/MessageBlock.vue'
+import FloatingActionButton from '../shared/FloatingActionButton.vue'
 import '@/assets/styles.css'
 import { TASK_FIELDS } from '@/common/models'
 

frontend/src/components/child/KindnessAssignView.vue

@@ -27,6 +27,8 @@
       <button class="btn btn-secondary" @click="onCancel">Cancel</button>
       <button class="btn btn-primary" @click="onSubmit">Submit</button>
     </div>
+
+    <FloatingActionButton aria-label="Create Kindness Act" @click="goToCreate" />
   </div>
 </template>
 
@@ -35,6 +37,7 @@ import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import ItemList from '../shared/ItemList.vue'
 import MessageBlock from '../shared/MessageBlock.vue'
+import FloatingActionButton from '../shared/FloatingActionButton.vue'
 import '@/assets/styles.css'
 import { TASK_FIELDS } from '@/common/models'
 

frontend/src/components/child/ParentView.vue

@@ -6,6 +6,8 @@ import PendingRewardDialog from './PendingRewardDialog.vue'
 import TaskConfirmDialog from './TaskConfirmDialog.vue'
 import RewardConfirmDialog from './RewardConfirmDialog.vue'
 import ChoreApproveDialog from './ChoreApproveDialog.vue'
+import RoutineConfirmDialog from './RoutineConfirmDialog.vue'
+import RoutineApproveDialog from './RoutineApproveDialog.vue'
 import { useRoute, useRouter } from 'vue-router'
 import ChildDetailCard from './ChildDetailCard.vue'
 import ScrollingList from '../shared/ScrollingList.vue'
@@ -17,8 +19,20 @@ import {
   approveChore,
   rejectChore,
   resetChore,
+  extendRoutineTime,
+  setChildRoutineOverride,
+  approveRoutine,
+  rejectRoutine,
+  resetRoutine,
+  triggerRoutineAsParent,
 } from '@/common/api'
 import { eventBus } from '@/common/eventBus'
+import {
+  maybeShow as tutorialMaybeShow,
+  activeStep as tutorialActiveStep,
+  modalTutorialStepId,
+  setHelpButtonHidden,
+} from '@/tutorial/controller'
 import '@/assets/styles.css'
 import type {
   Task,
@@ -27,6 +41,7 @@ import type {
   Reward,
   RewardStatus,
   ChildTask,
+  ChildRoutine,
   ChildTaskTriggeredEventPayload,
   ChildRewardTriggeredEventPayload,
   ChildRewardRequestEventPayload,
@@ -40,6 +55,8 @@ import type {
   ChoreScheduleModifiedPayload,
   ChoreTimeExtendedPayload,
   ChildChoreConfirmationPayload,
+  RoutineScheduleModifiedPayload,
+  RoutineTimeExtendedPayload,
 } from '@/common/models'
 import {
   isScheduledToday,
@@ -74,6 +91,12 @@ const lastEditedItem = ref<{ id: string; type: 'task' | 'reward' } | null>(null)
 const showChoreApproveDialog = ref(false)
 const approveDialogChore = ref<ChildTask | null>(null)
 
+// Routine approve/reject
+const showRoutineApproveDialog = ref(false)
+const approveDialogRoutine = ref<ChildRoutine | null>(null)
+const showRoutineConfirmDialog = ref(false)
+const confirmDialogRoutine = ref<ChildRoutine | null>(null)
+
 // Override editing
 const showOverrideModal = ref(false)
 const overrideEditTarget = ref<{ entity: Task | Reward; type: 'task' | 'reward' } | null>(null)
@@ -91,10 +114,21 @@ const selectedChoreId = ref<string | null>(null)
 const menuPosition = ref({ top: 0, left: 0 })
 const kebabBtnRefs = ref<Map<string, HTMLElement>>(new Map())
 
+// Tutorial auto-demo state
+const tutorialHighlightedItemId = ref<string | null>(null)
+
 // Schedule modal
 const showScheduleModal = ref(false)
 const scheduleTarget = ref<ChildTask | null>(null)
 
+// Routines
+const childRoutineListRef = ref()
+const selectedRoutineId = ref<string | null>(null)
+const activeRoutineMenuFor = ref<string | null>(null)
+const routineKebabBtnRefs = ref<Map<string, HTMLElement>>(new Map())
+const showRoutineScheduleModal = ref(false)
+const routineScheduleTarget = ref<ChildRoutine | null>(null)
+
 const pendingDialogReward = computed<Reward | RewardStatus | null>(() => {
   if (pendingEditOverrideTarget.value?.type === 'reward') {
     return pendingEditOverrideTarget.value.entity as Reward
@@ -112,6 +146,7 @@ const lastFetchDate = ref<string>(toLocalISODate(new Date()))
 function handleItemReady(itemId: string) {
   readyItemId.value = itemId
   selectedChoreId.value = null
+  selectedRoutineId.value = null
 }
 
 function handleChoreItemReady(itemId: string) {
@@ -263,6 +298,8 @@ function handleOverrideSet(event: Event) {
       scrollAfterRefresh(childPenaltyListRef)
     } else if (payload.override.entity_type === 'reward') {
       scrollAfterRefresh(childRewardListRef)
+    } else if (payload.override.entity_type === 'routine') {
+      scrollAfterRefresh(childRoutineListRef)
     }
     lastEditedItem.value = null
   }
@@ -305,6 +342,182 @@ function handleChoreConfirmation(event: Event) {
   }
 }
 
+// ── Routine SSE handlers ──────────────────────────────────────────────────────
+
+function handleRoutineScheduleModified(event: Event) {
+  const payload = event.payload as RoutineScheduleModifiedPayload
+  if (child.value && payload.child_id === child.value.id) {
+    childRoutineListRef.value?.refresh()
+  }
+}
+
+function handleRoutineTimeExtended(event: Event) {
+  const payload = event.payload as RoutineTimeExtendedPayload
+  if (child.value && payload.child_id === child.value.id) {
+    childRoutineListRef.value?.refresh()
+  }
+}
+
+function handleRoutineModified() {
+  childRoutineListRef.value?.refresh()
+}
+
+function handleChildRoutinesSet(event: Event) {
+  const payload = event.payload as { child_id: string }
+  if (child.value && payload.child_id === child.value.id) {
+    childRoutineListRef.value?.refresh()
+  }
+}
+
+function handleChildRoutineConfirmation(event: Event) {
+  const payload = event.payload as { child_id: string }
+  if (child.value && payload.child_id === child.value.id) {
+    childRoutineListRef.value?.refresh()
+  }
+}
+
+// ── Routine helpers ───────────────────────────────────────────────────────────
+
+function isRoutineScheduledToday(item: ChildRoutine): boolean {
+  if (!item.schedule) return true
+  return isScheduledToday(item.schedule as any, new Date())
+}
+
+function isRoutineExpired(item: ChildRoutine): boolean {
+  if (item.pending_status === 'pending') return false
+  if (!item.schedule) return false
+  const now = new Date()
+  if (!isScheduledToday(item.schedule as any, now)) return false
+  const due = getDueTimeToday(item.schedule as any, now)
+  if (!due) return false
+  if (isExtendedToday(item.extension_date ?? null, now)) return false
+  return isPastTime(due.hour, due.minute, now)
+}
+
+function isRoutinePending(item: ChildRoutine): boolean {
+  return item.pending_status === 'pending'
+}
+
+function isRoutineApprovedToday(item: ChildRoutine): boolean {
+  if (item.pending_status !== 'approved' || !item.approved_at) return false
+  const approvedDate = new Date(item.approved_at)
+  const today = new Date()
+  return (
+    approvedDate.getFullYear() === today.getFullYear() &&
+    approvedDate.getMonth() === today.getMonth() &&
+    approvedDate.getDate() === today.getDate()
+  )
+}
+
+function isRoutineInactive(item: ChildRoutine): boolean {
+  return !isRoutineScheduledToday(item) || isRoutineExpired(item)
+}
+
+function routineDueLabel(item: ChildRoutine): string | null {
+  if (!item.schedule) return null
+  const now = new Date()
+  if (!isScheduledToday(item.schedule as any, now)) return null
+  const due = getDueTimeToday(item.schedule as any, now)
+  if (!due) return null
+  if (isExtendedToday(item.extension_date ?? null, now)) return null
+  if (isPastTime(due.hour, due.minute, now)) return null
+  return `Due by ${formatDueTimeLabel(due.hour, due.minute)}`
+}
+
+// ── Routine kebab menu ────────────────────────────────────────────────────────
+
+function handleRoutineItemReady(itemId: string) {
+  readyItemId.value = itemId
+  selectedRoutineId.value = itemId || null
+}
+
+function openRoutineMenu(routineId: string, e: MouseEvent) {
+  e.stopPropagation()
+  const btn = routineKebabBtnRefs.value.get(routineId)
+  if (btn) {
+    btn.scrollIntoView({ block: 'center', behavior: 'auto' })
+    const rect = btn.getBoundingClientRect()
+    menuPosition.value = { top: rect.bottom, left: rect.right - 140 }
+  }
+  activeRoutineMenuFor.value = routineId
+  nextTick(() => {
+    tutorialMaybeShow(
+      'routine-kebab-menu',
+      () => document.querySelector('.kebab-menu') as HTMLElement | null,
+    )
+    tutorialMaybeShow(
+      'kebab-edit-points-cost',
+      () => document.querySelector('[data-tutorial~="kebab-edit-points-cost"]') as HTMLElement | null,
+    )
+    tutorialMaybeShow(
+      'routine-schedule',
+      () => document.querySelector('[data-tutorial="routine-schedule"]') as HTMLElement | null,
+    )
+  })
+  const items = childRoutineListRef.value?.items ?? []
+  const routine = items.find((r) => r.id === routineId)
+  if (routine) {
+    if (isRoutineExpired(routine)) {
+      nextTick(() => {
+        tutorialMaybeShow(
+          'routine-extend-time',
+          () => document.querySelector('[data-tutorial="routine-extend-time"]') as HTMLElement | null,
+        )
+      })
+    }
+    if (isRoutineApprovedToday(routine)) {
+      nextTick(() => {
+        tutorialMaybeShow(
+          'routine-reset',
+          () => document.querySelector('[data-tutorial="routine-reset"]') as HTMLElement | null,
+        )
+      })
+    }
+  }
+}
+
+function closeRoutineMenu() {
+  activeRoutineMenuFor.value = null
+}
+
+function openRoutineScheduleModal(item: ChildRoutine, e: MouseEvent) {
+  e.stopPropagation()
+  closeRoutineMenu()
+  routineScheduleTarget.value = item
+  showRoutineScheduleModal.value = true
+}
+
+function onRoutineScheduleSaved() {
+  showRoutineScheduleModal.value = false
+  routineScheduleTarget.value = null
+}
+
+function editRoutine(item: ChildRoutine) {
+  closeRoutineMenu()
+  router.push({ name: 'EditRoutine', params: { id: item.id } })
+}
+
+function editRoutinePoints(item: ChildRoutine) {
+  closeRoutineMenu()
+  overrideEditTarget.value = { entity: item as any, type: 'routine' as any }
+  const defaultValue = item.custom_value ?? item.points
+  overrideCustomValue.value = defaultValue
+  validateOverrideInput()
+  showOverrideModal.value = true
+}
+
+async function doExtendRoutineTime(item: ChildRoutine, e: MouseEvent) {
+  e.stopPropagation()
+  closeRoutineMenu()
+  if (!child.value) return
+  const today = toLocalISODate(new Date())
+  const res = await extendRoutineTime(child.value.id, item.id, today)
+  if (!res.ok) {
+    const { msg } = await parseErrorResponse(res)
+    alert(`Error: ${msg}`)
+  }
+}
+
 function isChoreCompletedToday(item: ChildTask): boolean {
   if (item.pending_status !== 'approved' || !item.approved_at) return false
   const approvedDate = new Date(item.approved_at)
@@ -363,6 +576,111 @@ function cancelChoreApproveDialog() {
   approveDialogChore.value = null
 }
 
+// ── Routine approve/reject ────────────────────────────────────────────────────
+
+async function doApproveRoutine() {
+  if (!child.value || !approveDialogRoutine.value) return
+  try {
+    const confirmationId = approveDialogRoutine.value.pending_confirmation_id
+    if (!confirmationId) return
+    const resp = await approveRoutine(child.value.id, confirmationId)
+    if (resp.ok) {
+      const data = await resp.json()
+      if (child.value) child.value.points = data.points
+    } else {
+      const { msg } = await parseErrorResponse(resp)
+      alert(`Error: ${msg}`)
+    }
+  } catch (err) {
+    console.error('Failed to approve routine:', err)
+  } finally {
+    showRoutineApproveDialog.value = false
+    approveDialogRoutine.value = null
+  }
+}
+
+async function doRejectRoutine() {
+  if (!child.value || !approveDialogRoutine.value) return
+  const confirmationId = approveDialogRoutine.value.pending_confirmation_id
+  if (!confirmationId) return
+  try {
+    const resp = await rejectRoutine(child.value.id, confirmationId)
+    if (!resp.ok) {
+      const { msg } = await parseErrorResponse(resp)
+      alert(`Error: ${msg}`)
+    }
+  } catch (err) {
+    console.error('Failed to reject routine:', err)
+  } finally {
+    showRoutineApproveDialog.value = false
+    approveDialogRoutine.value = null
+  }
+}
+
+function cancelRoutineApproveDialog() {
+  showRoutineApproveDialog.value = false
+  approveDialogRoutine.value = null
+}
+
+async function doConfirmRoutine() {
+  if (!child.value || !confirmDialogRoutine.value) return
+  try {
+    const resp = await triggerRoutineAsParent(child.value.id, confirmDialogRoutine.value.id)
+    if (resp.ok) {
+      const data = await resp.json()
+      if (child.value) child.value.points = data.points
+    } else {
+      const { msg } = await parseErrorResponse(resp)
+      alert(`Error: ${msg}`)
+    }
+  } catch (err) {
+    console.error('Failed to confirm routine:', err)
+  } finally {
+    showRoutineConfirmDialog.value = false
+    confirmDialogRoutine.value = null
+  }
+}
+
+function cancelRoutineConfirmDialog() {
+  showRoutineConfirmDialog.value = false
+  confirmDialogRoutine.value = null
+}
+
+async function doResetRoutine(item: ChildRoutine, e: MouseEvent) {
+  e.stopPropagation()
+  closeRoutineMenu()
+  if (!child.value || !item.pending_confirmation_id) return
+  try {
+    const resp = await resetRoutine(child.value.id, item.pending_confirmation_id)
+    if (!resp.ok) {
+      const { msg } = await parseErrorResponse(resp)
+      alert(`Error: ${msg}`)
+    }
+  } catch (err) {
+    console.error('Failed to reset routine:', err)
+  }
+}
+
+function triggerRoutine(item: ChildRoutine) {
+  if (shouldIgnoreNextCardClick.value) {
+    shouldIgnoreNextCardClick.value = false
+    return
+  }
+  if (isRoutineApprovedToday(item)) return
+  if (isRoutineExpired(item)) return
+  if (isRoutinePending(item)) {
+    approveDialogRoutine.value = item
+    setTimeout(() => {
+      showRoutineApproveDialog.value = true
+    }, 150)
+    return
+  }
+  confirmDialogRoutine.value = item
+  setTimeout(() => {
+    showRoutineConfirmDialog.value = true
+  }, 150)
+}
+
 async function doResetChore(item: ChildTask, e: MouseEvent) {
   e.stopPropagation()
   closeChoreMenu()
@@ -381,7 +699,7 @@ async function doResetChore(item: ChildTask, e: MouseEvent) {
 // ── Kebab menu ───────────────────────────────────────────────────────────────
 
 const onDocClick = (e: MouseEvent) => {
-  if (activeMenuFor.value !== null) {
+  if (activeMenuFor.value !== null || activeRoutineMenuFor.value !== null) {
     const path = (e.composedPath?.() ?? (e as any).path ?? []) as EventTarget[]
     const inside = path.some((node) => {
       if (!(node instanceof HTMLElement)) return false
@@ -391,13 +709,17 @@ const onDocClick = (e: MouseEvent) => {
         node.classList.contains('kebab-menu')
       )
     })
-    if (!inside) {
+    const fromTutorial = path.some(
+      (n) => n instanceof HTMLElement && n.classList.contains('tutorial-root'),
+    )
+    if (!inside && !fromTutorial) {
       activeMenuFor.value = null
+      activeRoutineMenuFor.value = null
       selectedChoreId.value = null
+      selectedRoutineId.value = null
       if (path.some((n) => n instanceof HTMLElement && n.classList.contains('item-card'))) {
         shouldIgnoreNextCardClick.value = true
       } else {
-        // Clicked fully outside any card — reset ready state so chore requires 2 clicks again
         readyItemId.value = null
       }
     }
@@ -408,10 +730,45 @@ function openChoreMenu(taskId: string, e: MouseEvent) {
   e.stopPropagation()
   const btn = kebabBtnRefs.value.get(taskId)
   if (btn) {
+    btn.scrollIntoView({ block: 'center', behavior: 'auto' })
     const rect = btn.getBoundingClientRect()
     menuPosition.value = { top: rect.bottom, left: rect.right - 140 }
   }
   activeMenuFor.value = taskId
+  nextTick(() => {
+    tutorialMaybeShow(
+      'chore-kebab-menu',
+      () => document.querySelector('.kebab-menu') as HTMLElement | null,
+    )
+    tutorialMaybeShow(
+      'kebab-edit-points-cost',
+      () => document.querySelector('[data-tutorial~="kebab-edit-points-cost"]') as HTMLElement | null,
+    )
+    tutorialMaybeShow(
+      'chore-schedule',
+      () => document.querySelector('[data-tutorial="chore-schedule"]') as HTMLElement | null,
+    )
+  })
+  const items: ChildTask[] = childChoreListRef.value?.items ?? []
+  const task = items.find((t) => t.id === taskId)
+  if (task) {
+    if (isChoreExpired(task)) {
+      nextTick(() => {
+        tutorialMaybeShow(
+          'chore-kebab-extend-time',
+          () => document.querySelector('[data-tutorial="chore-extend-time"]') as HTMLElement | null,
+        )
+      })
+    }
+    if (isChoreCompletedToday(task)) {
+      nextTick(() => {
+        tutorialMaybeShow(
+          'chore-kebab-reset',
+          () => document.querySelector('[data-tutorial="chore-reset"]') as HTMLElement | null,
+        )
+      })
+    }
+  }
 }
 
 function closeChoreMenu() {
@@ -549,7 +906,7 @@ function handleEditItem(item: Task | Reward, type: 'task' | 'reward') {
   }
   overrideEditTarget.value = { entity: item, type }
   const defaultValue = type === 'task' ? (item as Task).points : (item as Reward).cost
-  overrideCustomValue.value = item.custom_value ?? defaultValue
+  overrideCustomValue.value = (item as any).custom_value ?? defaultValue
   validateOverrideInput()
   showOverrideModal.value = true
 }
@@ -570,7 +927,7 @@ async function confirmPendingRewardAndEdit() {
   overrideEditTarget.value = target
   const defaultValue =
     target.type === 'task' ? (target.entity as Task).points : (target.entity as Reward).cost
-  overrideCustomValue.value = target.entity.custom_value ?? defaultValue
+  overrideCustomValue.value = (target.entity as any).custom_value ?? defaultValue
   validateOverrideInput()
   showOverrideModal.value = true
 }
@@ -584,18 +941,39 @@ watch(showOverrideModal, async (newVal) => {
   if (newVal) {
     await nextTick()
     document.getElementById('custom-value')?.focus()
+    modalTutorialStepId.value = 'point-editor-help'
+    tutorialMaybeShow(
+      'point-editor-help',
+      () => document.querySelector('input#custom-value') as HTMLElement | null,
+    )
+  } else {
+    modalTutorialStepId.value = null
   }
 })
 
+watch(showConfirm, (newVal) => setHelpButtonHidden(newVal))
+watch(showRewardConfirm, (newVal) => setHelpButtonHidden(newVal))
+watch(showRoutineConfirmDialog, (newVal) => setHelpButtonHidden(newVal))
+
 async function saveOverride() {
   if (!isOverrideValid.value || !overrideEditTarget.value || !child.value) return
 
-  const res = await setChildOverride(
+  const type = overrideEditTarget.value.type as string
+  let res: Response
+  if (type === 'routine') {
+    res = await setChildRoutineOverride(
+      child.value.id,
+      overrideEditTarget.value.entity.id,
+      overrideCustomValue.value,
+    )
+  } else {
+    res = await setChildOverride(
       child.value.id,
       overrideEditTarget.value.entity.id,
       overrideEditTarget.value.type,
       overrideCustomValue.value,
     )
+  }
 
   if (res.ok) {
     lastEditedItem.value = {
@@ -604,7 +982,7 @@ async function saveOverride() {
     }
     showOverrideModal.value = false
   } else {
-    const { msg } = parseErrorResponse(res)
+    const { msg } = await parseErrorResponse(res)
     alert(`Error: ${msg}`)
   }
 }
@@ -683,6 +1061,11 @@ onMounted(async () => {
     eventBus.on('chore_schedule_modified', handleChoreScheduleModified)
     eventBus.on('chore_time_extended', handleChoreTimeExtended)
     eventBus.on('child_chore_confirmation', handleChoreConfirmation)
+    eventBus.on('routine_schedule_modified', handleRoutineScheduleModified)
+    eventBus.on('routine_time_extended', handleRoutineTimeExtended)
+    eventBus.on('routine_modified', handleRoutineModified)
+    eventBus.on('child_routines_set', handleChildRoutinesSet)
+    eventBus.on('child_routine_confirmation', handleChildRoutineConfirmation)
 
     document.addEventListener('click', onDocClick, true)
     document.addEventListener('visibilitychange', onVisibilityChange)
@@ -712,6 +1095,11 @@ onMounted(async () => {
             child.value = data
             tasks.value = data.tasks || []
             rewards.value = data.rewards || []
+            // Fire the per-child overview tour (chains into assign-* steps).
+            // No anchor: this is a general overview so the card stays centered.
+            nextTick(() => {
+              tutorialMaybeShow('select-child')
+            })
           }
           loading.value = false
           if (scrollToId) {
@@ -722,6 +1110,9 @@ onMounted(async () => {
               } else if (entityType === 'reward') {
                 childRewardListRef.value?.scrollToItem(scrollToId)
                 applyHighlightPulse(scrollToId)
+              } else if (entityType === 'routine') {
+                childRoutineListRef.value?.scrollToItem(scrollToId)
+                applyHighlightPulse(scrollToId)
               }
               const { scrollTo: _s, entityType: _e, ...remainingQuery } = route.query
               router.replace({ query: remainingQuery })
@@ -735,6 +1126,96 @@ onMounted(async () => {
   }
 })
 
+// Fire status-badge tutorials when those badges first render for any chore.
+watch(
+  () => {
+    const items: ChildTask[] = childChoreListRef.value?.items ?? []
+    return items.map((t) => ({ id: t.id, expired: isChoreExpired(t), pending: isChorePending(t) }))
+  },
+  (list) => {
+    if (list.some((t) => t.expired)) {
+      nextTick(() => {
+        tutorialMaybeShow(
+          'status-too-late',
+          () =>
+            Array.from(document.querySelectorAll('.chore-stamp')).find(
+              (el) => (el.textContent || '').trim() === 'TOO LATE',
+            ) as HTMLElement | null,
+        )
+      })
+    }
+    if (list.some((t) => t.pending)) {
+      nextTick(() => {
+        tutorialMaybeShow(
+          'status-pending',
+          () => document.querySelector('.chore-stamp.pending-stamp') as HTMLElement | null,
+        )
+      })
+    }
+  },
+  { deep: true },
+)
+
+// When the generic kebab-overview step fires, scroll to an assigned item
+// and select it so its kebab button is visible for the user to discover.
+watch(
+  () => tutorialActiveStep.value?.def.id,
+  async (stepId, prevStepId) => {
+    if (stepId === 'item-kebab-overview') {
+      const chores: ChildTask[] = childChoreListRef.value?.items ?? []
+      const routines: ChildRoutine[] = childRoutineListRef.value?.items ?? []
+      if (chores.length > 0 && childChoreListRef.value) {
+        const first = chores[0]
+        childChoreListRef.value.scrollToItem(first.id)
+        selectedChoreId.value = first.id
+        tutorialHighlightedItemId.value = first.id
+        await nextTick()
+        const btn = kebabBtnRefs.value.get(first.id)
+        if (btn && tutorialActiveStep.value?.def.id === 'item-kebab-overview') {
+          tutorialActiveStep.value.anchor = () => btn
+        }
+      } else if (routines.length > 0 && childRoutineListRef.value) {
+        const first = routines[0]
+        childRoutineListRef.value.scrollToItem(first.id)
+        selectedRoutineId.value = first.id
+        tutorialHighlightedItemId.value = first.id
+        await nextTick()
+        const btn = routineKebabBtnRefs.value.get(first.id)
+        if (btn && tutorialActiveStep.value?.def.id === 'item-kebab-overview') {
+          tutorialActiveStep.value.anchor = () => btn
+        }
+      }
+    }
+
+    // Clean up the highlighted selection when the tutorial leaves kebab steps
+    const kebabStepIds = new Set([
+      'item-kebab-overview',
+      'chore-kebab-menu',
+      'chore-edit-points',
+      'chore-schedule',
+      'chore-kebab-extend-time',
+      'chore-kebab-reset',
+      'routine-kebab-menu',
+      'routine-edit',
+      'routine-edit-points',
+      'routine-schedule',
+      'routine-extend-time',
+      'routine-reset',
+      'kebab-edit-points-cost',
+    ])
+    if (
+      prevStepId &&
+      kebabStepIds.has(prevStepId) &&
+      !kebabStepIds.has(stepId ?? '') &&
+      tutorialHighlightedItemId.value
+    ) {
+      selectedChoreId.value = null
+      selectedRoutineId.value = null
+      tutorialHighlightedItemId.value = null
+    }
+  },
+)
+
 onUnmounted(() => {
   eventBus.off('child_task_triggered', handleTaskTriggered)
   eventBus.off('child_reward_triggered', handleRewardTriggered)
@@ -749,6 +1230,11 @@ onUnmounted(() => {
   eventBus.off('chore_schedule_modified', handleChoreScheduleModified)
   eventBus.off('chore_time_extended', handleChoreTimeExtended)
   eventBus.off('child_chore_confirmation', handleChoreConfirmation)
+  eventBus.off('routine_schedule_modified', handleRoutineScheduleModified)
+  eventBus.off('routine_time_extended', handleRoutineTimeExtended)
+  eventBus.off('routine_modified', handleRoutineModified)
+  eventBus.off('child_routines_set', handleChildRoutinesSet)
+  eventBus.off('child_routine_confirmation', handleChildRoutineConfirmation)
 
   document.removeEventListener('click', onDocClick, true)
   document.removeEventListener('visibilitychange', onVisibilityChange)
@@ -937,6 +1423,16 @@ function goToAssignRewards() {
     })
   }
 }
+
+function goToAssignRoutines() {
+  if (child.value?.id) {
+    router.push({
+      name: 'RoutineAssignView',
+      params: { id: child.value.id },
+      query: { name: child.value.name },
+    })
+  }
+}
 </script>
 
 <template>
@@ -996,11 +1492,12 @@ function goToAssignRewards() {
                   @mousedown.stop.prevent
                   @click.stop
                 >
-                  <button class="menu-item" @mousedown.stop.prevent @click="editChorePoints(item)">
+                  <button class="menu-item" data-tutorial="chore-edit-points kebab-edit-points-cost" @mousedown.stop.prevent @click="editChorePoints(item)">
                     Edit Points
                   </button>
                   <button
                     class="menu-item"
+                    data-tutorial="chore-schedule"
                     @mousedown.stop.prevent
                     @click="openScheduleModal(item, $event)"
                   >
@@ -1009,6 +1506,7 @@ function goToAssignRewards() {
                   <button
                     v-if="isChoreExpired(item)"
                     class="menu-item"
+                    data-tutorial="chore-extend-time"
                     @mousedown.stop.prevent
                     @click="doExtendTime(item, $event)"
                   >
@@ -1017,6 +1515,7 @@ function goToAssignRewards() {
                   <button
                     v-if="isChoreCompletedToday(item)"
                     class="menu-item"
+                    data-tutorial="chore-reset"
                     @mousedown.stop.prevent
                     @click="doResetChore(item, $event)"
                   >
@@ -1048,6 +1547,131 @@ function goToAssignRewards() {
             <div v-if="choreDueLabel(item)" class="due-label">{{ choreDueLabel(item) }}</div>
           </template>
         </ScrollingList>
+        <ScrollingList
+          title="Routines"
+          ref="childRoutineListRef"
+          :fetchBaseUrl="`/api/child/${child?.id}/list-routines`"
+          itemKey="routines"
+          imageField="image_id"
+          :enableEdit="false"
+          :childId="child?.id"
+          :readyItemId="readyItemId"
+          :isParentAuthenticated="true"
+          @item-ready="handleRoutineItemReady"
+          @trigger-item="triggerRoutine"
+          :getItemClass="
+            (item) => ({
+              good: true,
+              'chore-inactive': isRoutineInactive(item) || isRoutineApprovedToday(item),
+            })
+          "
+          :sort-fn="
+            (a: ChildRoutine, b: ChildRoutine) => {
+              if (isRoutinePending(a) !== isRoutinePending(b)) return isRoutinePending(a) ? -1 : 1
+              if (!isRoutineScheduledToday(a) !== !isRoutineScheduledToday(b))
+                return isRoutineScheduledToday(a) ? -1 : 1
+              if (isRoutineApprovedToday(a) !== isRoutineApprovedToday(b))
+                return isRoutineApprovedToday(a) ? 1 : -1
+              if (isRoutineExpired(a) !== isRoutineExpired(b)) return isRoutineExpired(a) ? 1 : -1
+              return 0
+            }
+          "
+        >
+          <template #item="{ item }: { item: ChildRoutine }">
+            <!-- Routine kebab menu -->
+            <div class="chore-kebab-wrap" @click.stop>
+              <button
+                v-show="selectedRoutineId === item.id"
+                class="kebab-btn"
+                :ref="
+                  (el) => {
+                    if (el) routineKebabBtnRefs.set(item.id, el as HTMLElement)
+                    else routineKebabBtnRefs.delete(item.id)
+                  }
+                "
+                @mousedown.stop.prevent
+                @click="openRoutineMenu(item.id, $event)"
+                :aria-expanded="activeRoutineMenuFor === item.id ? 'true' : 'false'"
+                aria-label="Options"
+              >
+                ⋮
+              </button>
+              <Teleport to="body">
+                <div
+                  v-if="activeRoutineMenuFor === item.id"
+                  class="kebab-menu"
+                  :style="{ top: menuPosition.top + 'px', left: menuPosition.left + 'px' }"
+                  @mousedown.stop.prevent
+                  @click.stop
+                >
+                  <button class="menu-item" data-tutorial="routine-edit" @mousedown.stop.prevent @click="editRoutine(item)">
+                    Edit Routine
+                  </button>
+                  <button
+                    class="menu-item"
+                    data-tutorial="routine-edit-points kebab-edit-points-cost"
+                    @mousedown.stop.prevent
+                    @click="editRoutinePoints(item)"
+                  >
+                    Edit Points
+                  </button>
+                  <button
+                    class="menu-item"
+                    data-tutorial="routine-schedule"
+                    @mousedown.stop.prevent
+                    @click="openRoutineScheduleModal(item, $event)"
+                  >
+                    Schedule
+                  </button>
+                  <button
+                    v-if="isRoutineExpired(item)"
+                    class="menu-item"
+                    data-tutorial="routine-extend-time"
+                    @mousedown.stop.prevent
+                    @click="doExtendRoutineTime(item, $event)"
+                  >
+                    Extend Time
+                  </button>
+                  <button
+                    v-if="isRoutineApprovedToday(item)"
+                    class="menu-item"
+                    data-tutorial="routine-reset"
+                    @mousedown.stop.prevent
+                    @click="doResetRoutine(item, $event)"
+                  >
+                    Reset
+                  </button>
+                </div>
+              </Teleport>
+            </div>
+
+            <!-- Status badges -->
+            <span v-if="isRoutineApprovedToday(item)" class="chore-stamp completed-stamp"
+              >COMPLETED</span
+            >
+            <span v-else-if="isRoutineExpired(item)" class="chore-stamp">TOO LATE</span>
+            <span v-else-if="isRoutinePending(item)" class="chore-stamp pending-stamp"
+              >PENDING</span
+            >
+
+            <div class="item-name">{{ item.name }}</div>
+            <img
+              v-if="item.image_url"
+              :src="item.image_url"
+              alt="Routine Image"
+              class="item-image"
+            />
+            <div class="item-points good-points">
+              {{
+                item.custom_value !== undefined && item.custom_value !== null
+                  ? item.custom_value
+                  : item.points
+              }}
+              Points
+            </div>
+            <div v-if="routineDueLabel(item)" class="due-label">{{ routineDueLabel(item) }}</div>
+          </template>
+        </ScrollingList>
         <ScrollingList
           title="Kindness Acts"
           ref="childKindnessListRef"
@@ -1156,13 +1780,16 @@ function goToAssignRewards() {
     </div>
     <div class="assign-buttons">
       <button v-if="child" class="btn btn-primary" @click="goToAssignTasks">Assign Chores</button>
+      <button v-if="child" class="btn btn-primary" @click="goToAssignRoutines">
+        Assign Routines
+      </button>
+      <button v-if="child" class="btn btn-green" @click="goToAssignRewards">Assign Rewards</button>
       <button v-if="child" class="btn btn-primary" @click="goToAssignKindness">
         Assign Kindness Acts
       </button>
       <button v-if="child" class="btn btn-danger" @click="goToAssignBadHabits">
         Assign Penalties
       </button>
-      <button v-if="child" class="btn btn-green" @click="goToAssignRewards">Assign Rewards</button>
     </div>
 
     <!-- Pending Reward Dialog -->
@@ -1196,13 +1823,25 @@ function goToAssignRewards() {
     <!-- Schedule Modal -->
     <ScheduleModal
       v-if="showScheduleModal && scheduleTarget && child"
-      :task="scheduleTarget"
+      :entity="scheduleTarget"
+      entityType="task"
       :childId="child.id"
       :schedule="scheduleTarget.schedule ?? null"
       @saved="onScheduleSaved"
       @cancelled="showScheduleModal = false"
     />
 
+    <!-- Schedule Modal (Routines) -->
+    <ScheduleModal
+      v-if="showRoutineScheduleModal && routineScheduleTarget && child"
+      :entity="routineScheduleTarget"
+      entityType="routine"
+      :childId="child.id"
+      :schedule="routineScheduleTarget.schedule ?? null"
+      @saved="onRoutineScheduleSaved"
+      @cancelled="showRoutineScheduleModal = false"
+    />
+
     <!-- Override Edit Modal -->
     <ModalDialog
       v-if="showOverrideModal && overrideEditTarget && child"
@@ -1249,7 +1888,7 @@ function goToAssignRewards() {
     <!-- Reward Confirm Dialog -->
     <RewardConfirmDialog
       v-if="showRewardConfirm"
-      :reward="selectedReward"
+      :reward="selectedReward as any"
       :childName="child?.name"
       @confirm="confirmTriggerReward"
       @deny="denyRewardRequest"
@@ -1273,6 +1912,26 @@ function goToAssignRewards() {
       @reject="doRejectChore"
       @cancel="cancelChoreApproveDialog"
     />
+
+    <!-- Routine Approve/Reject Dialog -->
+    <RoutineApproveDialog
+      v-if="showRoutineApproveDialog && approveDialogRoutine"
+      :show="showRoutineApproveDialog"
+      :childName="child?.name ?? ''"
+      :routineName="approveDialogRoutine.name"
+      :points="approveDialogRoutine.custom_value ?? approveDialogRoutine.points"
+      :imageUrl="approveDialogRoutine.image_url"
+      @approve="doApproveRoutine"
+      @reject="doRejectRoutine"
+      @cancel="cancelRoutineApproveDialog"
+    />
+
+    <RoutineConfirmDialog
+      :routine="confirmDialogRoutine"
+      :childName="child?.name ?? ''"
+      @confirm="doConfirmRoutine"
+      @cancel="cancelRoutineConfirmDialog"
+    />
   </div>
 </template>
 

frontend/src/components/child/PenaltyAssignView.vue

@@ -27,6 +27,8 @@
       <button class="btn btn-secondary" @click="onCancel">Cancel</button>
       <button class="btn btn-primary" @click="onSubmit">Submit</button>
     </div>
+
+    <FloatingActionButton aria-label="Create Penalty" @click="goToCreate" />
   </div>
 </template>
 
@@ -35,6 +37,7 @@ import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import ItemList from '../shared/ItemList.vue'
 import MessageBlock from '../shared/MessageBlock.vue'
+import FloatingActionButton from '../shared/FloatingActionButton.vue'
 import '@/assets/styles.css'
 import { TASK_FIELDS } from '@/common/models'
 

frontend/src/components/child/RewardAssignView.vue

@@ -27,6 +27,8 @@
       <button class="btn btn-secondary" @click="onCancel">Cancel</button>
       <button class="btn btn-primary" @click="onSubmit">Submit</button>
     </div>
+
+    <FloatingActionButton aria-label="Create Reward" @click="goToCreateReward" />
   </div>
 </template>
 
@@ -35,6 +37,7 @@ import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import ItemList from '../shared/ItemList.vue'
 import MessageBlock from '../shared/MessageBlock.vue'
+import FloatingActionButton from '../shared/FloatingActionButton.vue'
 import '@/assets/styles.css'
 import { REWARD_FIELDS } from '@/common/models'
 
@@ -60,7 +63,7 @@ async function onSubmit() {
     })
     if (!resp.ok) throw new Error('Failed to update rewards')
     router.back()
-  } catch (err) {
+  } catch {
     alert('Failed to update rewards.')
   }
 }