|
| 1 | +# AGENTS Instructions |
| 2 | + |
| 3 | +This file provides guidance to AI Agents when working with code in this repository. |
| 4 | + |
| 5 | +## Development Commands |
| 6 | + |
| 7 | +```bash |
| 8 | +pnpm install # Install dependencies (PNPM enforced via packageManager) |
| 9 | +pnpm dev # Start development server on http://localhost:3000 |
| 10 | +pnpm mock # Start mock API server for testing service integrations |
| 11 | +pnpm build # Build for production |
| 12 | +pnpm preview # Preview production build |
| 13 | +pnpm lint # Run ESLint with auto-fix |
| 14 | +``` |
| 15 | + |
| 16 | +## Architecture Overview |
| 17 | + |
| 18 | +Homer is a static Vue.js 3 PWA dashboard that loads configuration from YAML files. The architecture is service-oriented with dynamic component loading. |
| 19 | + |
| 20 | +### Core Application Structure |
| 21 | + |
| 22 | +- **Entry Point**: `src/main.js` mounts the Vue app |
| 23 | +- **Root Component**: `src/App.vue` handles layout, configuration loading, and routing |
| 24 | +- **Configuration System**: YAML-based with runtime merging of defaults (`src/assets/defaults.yml`) and user config (`/assets/config.yml`) |
| 25 | +- **Service Components**: 53 specialized integrations in `src/components/services/` that extend a Generic component pattern |
| 26 | + |
| 27 | +### Service Integration Pattern |
| 28 | + |
| 29 | +All service components follow this architecture: |
| 30 | + |
| 31 | +- Extend `Generic.vue` using Vue slots (`<template #indicator>`, `<template #content>`, `<template #icon>`) |
| 32 | +- Use the `service.js` mixin (`src/mixins/service.js`) for common API functionality |
| 33 | +- Use a custom `fetch` method provided by the service mixin to seamlessly support proxy configuration, custom headers, and credentials. |
| 34 | + |
| 35 | +### Configuration & Routing |
| 36 | + |
| 37 | +- **Multi-page Support**: Hash-based routing without Vue Router |
| 38 | +- **Dynamic Config Loading**: External URLs supported via `config.remote_config` |
| 39 | +- **Theme System**: CSS layers architecture with three built-in themes in `src/assets/themes/` |
| 40 | +- **Asset Management**: Static files served from `/assets/` with runtime configuration merging |
| 41 | + |
| 42 | +### Build System Details |
| 43 | + |
| 44 | +- **Vite 7**: Modern build tool with Vue plugin |
| 45 | +- **PWA**: Auto-updating service worker via `vite-plugin-pwa` |
| 46 | +- **SCSS**: Bulma framework with modular component styling |
| 47 | +- **Docker**: Multi-stage build (Node.js → Alpine + Lighttpd) |
| 48 | + |
| 49 | +### Mock Data Creation Pattern |
| 50 | + |
| 51 | +When creating mock data for service components testing: |
| 52 | + |
| 53 | +**Structure**: `dummy-data/[component-name]/[api-path]/[endpoint]` |
| 54 | + |
| 55 | +**Steps**: |
| 56 | + |
| 57 | +1. **Analyze component**: Read the Vue component file to identify API calls (look for `this.fetch()` calls) |
| 58 | +2. **Check existing mock**: If mock directory exists, read existing files to check for missing fields |
| 59 | +3. **Create/update structure**: `mkdir -p dummy-data/[lowercase-component-name]/` and mirror API endpoint paths |
| 60 | +4. **Create/update JSON files**: Write realistic mock responses matching the expected data structure |
| 61 | +5. **Verify fields**: Ensure all fields used in the component's computed properties and templates are included |
| 62 | +6. **Update existing mocks**: If mock files exist but are missing fields, add the missing fields without removing existing data |
| 63 | + |
| 64 | +**Key Points**: |
| 65 | + |
| 66 | +- Component directory name should be lowercase version of component name (e.g., `AdGuardHome.vue` → `adguardhome/`) |
| 67 | +- Directory structure mirrors API endpoints exactly |
| 68 | +- Files contain JSON responses (no file extension needed) |
| 69 | +- Mock server serves from `dummy-data/` via `pnpm mock` command |
| 70 | +- Each component gets isolated directory to prevent API path conflicts |
| 71 | +- When updating existing mocks, preserve existing data and only add missing fields required by the component |
| 72 | +- Always read existing mock files first to understand current structure before making changes |
| 73 | + |
| 74 | +**Example**: For `AdGuardHome.vue`: |
| 75 | +- API calls: `/control/status`, `/control/stats` |
| 76 | +- Mock files: `dummy-data/adguardhome/control/status`, `dummy-data/adguardhome/control/stats` |
| 77 | + |
| 78 | +### Development Notes |
| 79 | + |
| 80 | +- Use `pnpm mock` to test service integrations with dummy data |
| 81 | +- Configuration changes require restart in development mode |
| 82 | +- New service components should follow the Generic component slot pattern |
| 83 | +- Themes use CSS custom properties for dynamic color switching |
| 84 | +- The app has no backend dependencies and generates static files only |
0 commit comments