# Current Client Map

Reference implementation: `webclient/`.

## Entry Points

- `webclient/index.php` - page shell.
- `webclient/ui.php` - UI component preview/demo shell.
- `webclient/src/js/index.js` - initializes globals, API client, HUD, routing.
- `webclient/src/js/routes.js` - hash routes.
- `webclient/src/js/sh/SmartHomeApi.js` - callback-style API client.
- `webclient/proxy.php` - local proxy to backend API.

## Build

- `npm start` runs Gulp.
- SCSS entry: `webclient/src/scss/main.scss`.
- JS entry: `webclient/src/js/index.js`.
- JS output: `webclient/dist/js/main.js`.
- CSS output: `webclient/dist/css/main.css`.

## Global Runtime Objects

The current client relies on global mutable objects:

- `DataProvider`
- `FavoritesStore`
- `Toasts`
- `Helper`
- `Modals`
- `confirmPopup`
- `advancedSelect`
- `editableString`
- `Screens`

The new Vue client should replace these with explicit imports, stores,
composables, and component-local state.

## Routes

| Route | Current Module | Purpose |
| --- | --- | --- |
| `/` | `routes.js` | Redirects to `/areas/favorites`. |
| `/devices` | `devices-list-screen.js` | Registered devices list with live state. |
| `/devices/scanning` | `devices-scanning-screen.js` | Network scan and setup entry point. |
| `/scripts/scopes` | `scripts-scopes-screen.js` | Control script scopes list and enable/disable. |
| `/scripts/regular` | `scripts-regular-screen.js` | Regular scripts list and enable/disable. |
| `/scripts/actions` | `scripts-actions-screen.js` | Action scripts grid and run buttons. |
| `/areas/tree` | `areas-tree-screen.js` | Areas tree with details/devices/actions/favorites. |
| `/areas/favorites` | `areas-favorites-screen.js` | Favorite areas dashboard. |
| fallback | `routes.js` | 404 screen. |

## Navigation Groups

Devices:

- Devices
- Scanning

Scripts:

- Scopes
- Actions
- Regular

Areas:

- Favorites
- Tree

## Important Existing Behavior

- Device state is loaded per row through `GET /api/v1/devices/id/{id}/status`.
- Offline/lost devices should not block the whole list.
- Action script cards run scripts on click and show toast result.
- Area tree supports local favorite toggling through `FavoritesStore`.
- Area device modal can reboot individual devices and reboot all devices in an area.
- Screen reload is often done through `Screens.reinit()` after mutations.

## Known Current-Client Limitations

- Callback-based API layer.
- Manual DOM rendering and event binding.
- Many global dependencies.
- Weak type guarantees for backend responses.
- Some modals duplicate table/device-state behavior.
- API errors are mostly surfaced as generic UI errors.