Phase 1: Security Foundation (auth, SQLi, secrets, hashing, tokens, cookies)

Phase 6: Rename webclient-vue to webclient, match legacy dist structure

Phase 6: Rename webclient to webclient_legacy, switch to Vue client

Refresh area device states after running an action script

Show only regular scripts in AreaDetailPage scripts panel

Reorder AreaDetailPage sections: actions first, then devices, parent area, scripts

Extract ActionScriptsGrid reusable component

Add area action scripts grid to AreaDetailPage

Persist area tree expansion state to localStorage across page reloads

Persist area tree node expansion state across data reloads

Render connection status as Online/Offline in device list and detail pages

Fix device_type mapping in unifyDeviceFields and hide active system status badge in list

Show system status badge on devices list and detail pages

Add device reset and resetup to Vue client

Fix bugs, migrate favorites store to Composition API, DRY state loader, add page tests, replace CSS vars with kit classes

Move unassign into a dedicated confirm dialog and fix icon ...

- Revert useAreaAssign composable back to pure assign logic; remove
  submitUnassignCore and unassign state that leaked into the assign modal.
- DeviceDetailPage, ScriptDetailPage, AreaDetailPage:
  * Remove the Unassign button from the assign modal footer.
  * Add a separate GnModal confirm dialog for unassign (like Remove).
  * Dropdown action now opens the confirm dialog instead of firing
    immediately.
  * Replace non-existent ph-map-pin-slash icon with ph-x-circle.

Show warning in assign modal for the last root area ...

Instead of hiding the assign UI, keep the button/menu item visible.
When the user opens the assign modal for the last root area, show a
GnAlert warning inside the modal explaining that it cannot be assigned.
The Assign button is hidden in this state; only Cancel (and Unassign if
applicable) remain. Backend guard in assignToArea stays as a fail-safe.

Add unassign action to area, device and script detail pages ...

- useAreaAssign composable: add submitUnassignCore and loading/error states.
- DeviceDetailPage: add 'Unassign from area' button inside assign modal and
  in the actions dropdown when device has an area_id.
- ScriptDetailPage: same for scripts (non-scope) with area_id.
- AreaDetailPage: add 'Unassign from parent' in assign modal and dropdown
  when area has a parent_id > 0.

Prevent assigning the last root area as a child ...

- Store: assignToArea now rejects with an error if the target area is the
  last remaining root (parent_id <= 0), preventing zero-root trees.
- UI: AreaDetailPage hides the 'Assign to area' / 'Change parent area'
  button and action-menu item when the current area is the last root,
  and shows an explanatory empty-state message instead.
- Tests: add coverage for both the rejection and the allowed case.

Use gnexus-ui-kit semantic colors for device status dot and add state components ...

- Status dot in DeviceTable now uses .text-success / .text-danger from
  gnexus-ui-kit with currentColor for background and glow instead of
  project-specific CSS vars.
- Add DeviceChannelsState component for per-channel state rendering.
- Add loadStatesFor helper in devices store for targeted state loading.
- Record styling rule in CLAUDE.md: always prefer kit color classes.

Replace connect column with inline status dot in device table

Make toast backgrounds opaque for readability

Show per-channel device states in DeviceTable and load states on AreaDetailPage

Add toast feedback for device reboot in list and detail views

Fix area assignment button on detail pages ...

- Rename submitAssign -> submitAssignCore in useAreaAssign composable
  to avoid name collision with local page handlers.
- Rename local page handlers -> handleAssignSubmit on Area, Device,
  and Script detail pages so event bindings call the wrapper correctly.
- Fix AppEmptyState.vue to forward #action slot into GnEmptyState's
  #actions slot so the Assign button renders for unassigned items.

Phase 5: Extract reusable useAsyncRequest composable for stores ...

- Add src/composables/useAsyncRequest.js to manage isLoading/error/AbortController
- Convert Pinia stores to Setup Stores: areas, devices, scripts, scanning
- Use useAsyncRequest for all simple list/detail loaders
- Fix API modules to forward options/signal (areas.devices, areas.scripts,
  devices.detail, scripts.scopeCode) — previously AbortControllers were
  created but signals were never passed to fetch
- Keep batch loadDeviceStates and reboot/runScript as custom logic
- Use immutable Set updates for reactive rebootingIds/runningAliases
- Update modules.spec.js assertions for new optional arguments
- Add 9 unit tests for useAsyncRequest

All 139 tests pass.

Improve AppErrorState with statusCode, type, and copyable details (Phase 4) ...

- Add error prop to AppErrorState accepting normalized client error object
- Show type, statusCode, and errorAlias as inline badges
- Add GnCopyButton to copy JSON-serialized error details to clipboard
- displayMessage falls back to error.message when message prop is omitted
- Update all call sites to pass full error object instead of only .message
- Add tests for error badges, copy button visibility, and clipboard content

Add toast notifications for mutations (Phase 3) ...

- Wrap RouterView in GnToastProvider in App.vue
- Replace inline rebootError alert in DeviceDetailPage with toast
- Replace inline resultAlert in ScriptDetailPage and ScriptsActionsPage with toast
- Add success toasts after successful edit, assign, remove, rename, create, setup
- Keep inline GnAlert inside modals for form-level errors

Add global error handling (Phase 2) ...

- Create useGlobalErrorHandler composable that wires up three
  global error-catching surfaces:
    1. app.config.errorHandler — Vue runtime errors (render,
       watchers, lifecycle hooks, event handlers).
    2. window 'unhandledrejection' — rejected promises without catch.
    3. window 'error' — synchronous JS runtime errors.
- Create AppErrorBoundary component wrapping RouterView to catch
  Vue errors in child components and show fallback UI (AppErrorState
  with Retry) instead of a blank screen.
- Apply the boundary in App.vue so every routed page is protected.

All 126 Vitest tests pass.

Fix critical error handling gaps in page mutations ...

- AreaDetailPage: submitRemove now checks result.ok before redirecting;
  replace GnConfirmDialog with GnModal to display remove errors inline.
- DeviceDetailPage: submitRemove now checks result.ok before redirecting;
  replace GnConfirmDialog with GnModal. reboot() now awaits and shows
  error via inline GnAlert instead of silently failing.
- ScriptDetailPage: toggleState now checks result.ok and shows success/
  danger resultAlert feedback instead of ignoring API errors.

All 126 Vitest tests pass.