Refactored frontend directory

.github/agents/ui-planner.agent.md

@@ -17,7 +17,7 @@ You are a Senior UI/UX Architect specializing in clean, highly reactive web appl
 
 This is the **Reward** app — a family chore/reward tracker. Vue 3 (Composition API / `<script setup lang="ts">`) frontend. Key files:
 
-- Theme tokens: `frontend/vue-app/src/assets/colors.css` — **always read this first** when reviewing a component.
+- Theme tokens: `frontend/src/assets/colors.css` — **always read this first** when reviewing a component.
 - Layout wrappers: `ParentLayout` (admin views) and `ChildLayout` (child dashboard views).
 - All `.vue` files use `<style scoped>`. Child component styling uses `:deep()` selectors.
 - File order within `.vue` files: `<template>`, then `<script>`, then `<style>`.

.github/copilot-instructions.md

@@ -5,7 +5,7 @@
 - **Stack**: Flask (Python, backend) + Vue 3 (TypeScript, frontend) + TinyDB (JSON, thread-safe, see `db/`).
 - **API**: RESTful endpoints in `api/`, grouped by entity (child, reward, task, user, image, etc). Each API file maps to a business domain.
 - **Nginx Proxy**: Frontend nginx proxies `/api/*` to backend, stripping the `/api` prefix. Backend endpoints should NOT include `/api` in their route definitions. Example: Backend defines `@app.route('/user')`, frontend calls `/api/user`.
-- **Models**: Maintain strict 1:1 mapping between Python `@dataclass`es (`backend/models/`) and TypeScript interfaces (`frontend/vue-app/src/common/models.ts`).
+- **Models**: Maintain strict 1:1 mapping between Python `@dataclass`es (`backend/models/`) and TypeScript interfaces (`frontend/src/common/models.ts`).
 - **Database**: Use TinyDB with `from_dict()`/`to_dict()` for serialization. All logic should operate on model instances, not raw dicts.
 - **Events**: Real-time updates via Server-Sent Events (SSE). Every mutation (add/edit/delete/trigger) must call `send_event_for_current_user` (see `backend/events/`).
 - **Changes**: Do not use comments to replace code. All changes must be reflected in both backend and frontend files as needed.
@@ -25,7 +25,7 @@
 
 ## 🚦 Frontend Logic & Event Bus
 
-- **SSE Event Management**: Register listeners in `onMounted`, clean up in `onUnmounted`. Listen for events like `child_task_triggered`, `child_reward_request`, `task_modified`, etc. See `frontend/vue-app/src/common/backendEvents.ts` and `components/BackendEventsListener.vue`.
+- **SSE Event Management**: Register listeners in `onMounted`, clean up in `onUnmounted`. Listen for events like `child_task_triggered`, `child_reward_request`, `task_modified`, etc. See `frontend/src/common/backendEvents.ts` and `components/BackendEventsListener.vue`.
 - **Layout Hierarchy**: Use `ParentLayout` for admin/management, `ChildLayout` for dashboard/focus views.
 
 ## ⚖️ Business Logic & Safeguards
@@ -37,9 +37,9 @@
 
 - **Backend**: Run Flask with `python -m flask run --host=0.0.0.0 --port=5000` from the `backend/` directory. Main entry: `backend/main.py`.
 - **Virtual Env**: Python is running from a virtual environment located at `backend/.venv/`.
-- **Frontend**: From `frontend/vue-app/`, run `npm install` then `npm run dev`.
-- **Tests**: Run backend tests with `pytest` in `backend/tests/`. Frontend component tests: `npm run test` in `frontend/vue-app/components/__tests__/`. E2E tests: `npx playwright test` from `frontend/vue-app/` — requires both servers running (use the `flask-backend` and `vue-frontend` skills).
-- **E2E Setup**: Playwright config is at `frontend/vue-app/playwright.config.ts`. Tests live in `frontend/vue-app/tests/`. The `globalSetup` in `playwright.config.ts` seeds the database and logs in once; all tests receive a pre-authenticated session via `storageState` — do NOT navigate to `/auth/login` in tests. Import `E2E_EMAIL` and `E2E_PASSWORD` from `tests/global-setup.ts` rather than hardcoding credentials. The backend must be started with `DB_ENV=e2e DATA_ENV=e2e` (the `flask-backend` skill does this) so test data goes to `backend/test_data/` and never touches production data.
+- **Frontend**: From `frontend/`, run `npm install` then `npm run dev`.
+- **Tests**: Run backend tests with `pytest` in `backend/tests/`. Frontend component tests: `npm run test` in `frontend/components/__tests__/`. E2E tests: `npx playwright test` from `frontend/` — requires both servers running (use the `flask-backend` and `vue-frontend` skills).
+- **E2E Setup**: Playwright config is at `frontend/playwright.config.ts`. Tests live in `frontend/tests/`. The `globalSetup` in `playwright.config.ts` seeds the database and logs in once; all tests receive a pre-authenticated session via `storageState` — do NOT navigate to `/auth/login` in tests. Import `E2E_EMAIL` and `E2E_PASSWORD` from `tests/global-setup.ts` rather than hardcoding credentials. The backend must be started with `DB_ENV=e2e DATA_ENV=e2e` (the `flask-backend` skill does this) so test data goes to `backend/test_data/` and never touches production data.
 - **Debugging**: Use VS Code launch configs or run Flask/Vue dev servers directly. For SSE, use browser dev tools to inspect event streams.
 
 ## 📁 Key Files & Directories
@@ -48,10 +48,10 @@
 - `backend/models/` — Python dataclasses (business logic, serialization)
 - `backend/db/` — TinyDB setup and helpers
 - `backend/events/` — SSE event types, broadcaster, payloads
-- `frontend/vue-app/` — Vue 3 frontend (see `src/common/`, `src/components/`, `src/layout/`) - Where tests are run from
-- `frontend/vue-app/src/common/models.ts` — TypeScript interfaces (mirror Python models)
-- `frontend/vue-app/src/common/api.ts` — API helpers, error parsing, validation
-- `frontend/vue-app/src/common/backendEvents.ts` — SSE event types and handlers
+- `frontend/` — Vue 3 frontend (see `src/common/`, `src/components/`, `src/layout/`) - Where tests are run from
+- `frontend/src/common/models.ts` — TypeScript interfaces (mirror Python models)
+- `frontend/src/common/api.ts` — API helpers, error parsing, validation
+- `frontend/src/common/backendEvents.ts` — SSE event types and handlers
 
 ## 🧠 Integration & Cross-Component Patterns
 

.github/skills/vue-frontend/SKILL.md

@@ -8,10 +8,10 @@ disable-model-invocation: true
 
 Use this skill when the user wants to "start the frontend," "run vue," or "launch the dev server."
 
-1. **Verify Directory:** Navigate to `./frontend/vue-app`.
+1. **Verify Directory:** Navigate to `./frontend`.
    - _Self-Correction:_ If the directory doesn't exist, search the workspace for `package.json` files and ask for clarification.
 
-2. **Check Dependencies:** - Before running, check if `node_modules` exists in `./frontend/vue-app`.
+2. **Check Dependencies:** - Before running, check if `node_modules` exists in `./frontend`.
    - If missing, ask the user: "Should I run `npm install` first?"
 
 3. **Execution:** - Run the command: `npm run dev`