# AI AGENT INSTRUCTIONS AND GUIDANCE
You are a software engineer specializing in Node.js, TypeScript, and web application development with a focus on security and maintainability.
## Context
You are developing a web application for viewing Reolink NVR camera data. The project uses TypeScript and is located in `/home/matt/workspace/reolink-viewer`. Pull the entire project into context so that you can scan across any and all of the files when making plans and suggestions.
Read every file in `reolink-viewer`, including `node_modules/reolink-nvr-api`, except ignore the rest of the content in `node_modules` unless you need to examine how a dependency works. You need the full picture of the code so we can take a wholistic view of the application and intentions.
## Dependencies
The `reolink-nvr-api` package (https://github.com/verheesj/reolink-api) has already been installed as a dependency via `npm`. Use the native API calls from this package to interact with Reolink devices.
## Audience
You have been paired to work on this project with Matthew, who is a Staff Technical Writer and former Cloud Security Engineer with deep experience with Linux and systems administration, but only average experience with front end development.
## Current State
Reolink Viewer exists, but only as a skeleton upon which to build. The `README.md` has some notes, but is also incomplete.
Here is a copy/paste of actions in the terminal showing the output of building and starting the project in its current state:
```shell
matthew@monster:~$ cd workspace/reolink-viewer/
matthew@monster:~/workspace/reolink-viewer$ npm run build
> reolink-viewer@0.0.1 build
> tsc
matthew@monster:~/workspace/reolink-viewer$ npm start
> reolink-viewer@0.0.1 start
> node --enable-source-maps dist/index.js && node dist/server.js
Server running on port 3000
^C
```
And here is the result of using `View page source` in Google Chrome after pointing the browser to `localhost:3000` while the server was running and before hitting `^C`:
```html
Error
Cannot GET /
```
So, we definitely have work to do.
## Current Task List / Immediate Objectives
### 1. Reolink Authentication
Finish the implementation of authorization to connect to the Reolink Hub Pro at `REOLINK_NVR_HOST`. Use the `reolink-nvr-api` library for authentication. Include error handling for:
- Invalid credentials
- Network connectivity issues
- Device not responding
Repeat instruction: Read every file in `reolink-viewer`, including `node_modules/reolink-nvr-api`, except ignore the rest of the content in `node_modules` (unless you need to examine how a dependency works). You need the full picture of the code so we can take a wholistic view of the application and intentions.
### 2. Device Information Retrieval
Create an API endpoint that retrieves device information from the Reolink device and returns it to the frontend. Include:
- Input validation
- Error handling
- Response type serialization
### 3. UI Integration
Display the retrieved device information in the application UI. Ensure:
- Data is displayed clearly and safely
- Error states are shown to users
- Loading states are visible
### 4. Use the API to GET a List of Devices Connected to the Hub/nvr
Cameras and chimes and so on do not connect directly to the LAN that the Hub and the Reolink Viewer client are connected to. These devices connect to the Hub/nvr, not to the LAN, giving this task the potential to be a bit more tricky to figure out, but necessary as most of the application plans depend on being able to communicate with devices.
The hub provides a network for these devices with a gateway at `172.16.25.1:9000` that uses DHCP to assign IP addresses to connected devices.
## Quality Requirements
- Code must be clean, readable, and maintainable
- Follow TypeScript best practices
- Include type safety throughout
- Add necessary error handling and logging
- Securely handle authentication tokens
## Acceptance Criteria
1. TypeScript compilation without errors or warnings
2. Application builds successfully
3. Application starts and successfully authenticates to the device
4. Device information is displayed in the UI
5. Error states are handled gracefully
## Constraints
- Work within the `/home/matt/workspace/reolink-viewer` directory
- Read all files before proposing the first changes, then suggest a set of file content changes together in a list using some form of "proposed changes in file 1", "proposed changes in file 2" and so on. Present the entire set so that we both know you have been comprehensive across the project.
- Use native `reolink-nvr-api` calls where possible
- Do not hardcode sensitive information; put sensitive data in environment variables in `.env`. Add to the file if new variables are needed. See the `README.md` for future plans with this file.
- Implement proper error handling throughout
- Implement features in a modular, testable manner
- If you encounter issues or need clarification, ask specific questions rather than making assumptions.