een-api-toolkit 0.1.13 → 0.2.0

package/CHANGELOG.md

@@ -2,23 +2,60 @@
 
 All notable changes to this project will be documented in this file.
 
-## [0.1.13] - 2026-01-01
+## [0.2.0] - 2026-01-02
 
 ### Release Summary
 
-No PR descriptions available for this release.
+#### PR #39: Release v0.1.13: Documentation updates and example improvements
+## Summary
 
-### Detailed Changes
+This release includes documentation improvements and developer experience enhancements:
+
+- **Example README files**: Added comprehensive README.md files with screenshots for all 5 example applications (vue-bridges, vue-cameras, vue-feeds, vue-media, vue-users)
+- **Faster dev server startup**: Replaced slow `npx kill-port` (10-15 seconds) with native `lsof` command for instant port cleanup
+- **Documentation fixes**: Fixed vue-users README to use functions instead of removed composables, updated docs/README.md to reference all example apps
+
+## Commits included
+
+- 9050e88 docs: Update README.md to reference all example apps
+- 105051e docs: Fix vue-users README to use functions instead of composables
+- 8d11c7a chore: Replace npx kill-port with faster native lsof command
+- 741ca61 docs: Add README files and screenshots to example applications
+- f4aa78b Merge pull request #38 from klaushofrichter/develop
+- 6f3b0bf fix: Address code review feedback from PR #38
+- 0432d7a feat: Add Media Session API and live video streaming to vue-feeds
+
+## Test Results
+
+- ✅ Lint: Passed (1 expected warning for unused vars in test files)
+- ✅ Unit tests: 164 passed
+- ✅ Build: Succeeded
 
-#### Features
-- feat: Add Media Session API and live video streaming to vue-feeds
+## Version
+
+**0.1.13**
+
+🤖 Generated with [Claude Code](https://claude.com/claude-code)
+
+
+### Detailed Changes
 
 #### Bug Fixes
-- fix: Address code review feedback from PR #38
+- fix: Address remaining code review recommendations
+- fix: Address code review feedback for PR #40
+- fix: Address code review feedback - macOS note, xargs safety, and skill fix
+
+#### Other Changes
+- chore: Bump version to 0.2.0 and add CHANGELOG
+- chore: Update dependencies and fix E2E tests
+- docs: Update README.md to reference all example apps
+- docs: Fix vue-users README to use functions instead of composables
+- chore: Replace npx kill-port with faster native lsof command
+- docs: Add README files and screenshots to example applications
 
 ### Links
 - [npm package](https://www.npmjs.com/package/een-api-toolkit)
-- [Full Changelog](https://github.com/klaushofrichter/een-api-toolkit/compare/v0.1.10...v0.1.13)
+- [Full Changelog](https://github.com/klaushofrichter/een-api-toolkit/compare/v0.1.13...v0.2.0)
 
 ---
-*Released: 2026-01-01 20:18:29 CST*
+*Released: 2026-01-02 09:30:09 CST*

package/README.md

@@ -199,6 +199,44 @@ npm run dev  # Runs at http://127.0.0.1:3333
 
 > **Note:** Examples require a running OAuth proxy. See [Quick Start](#2-set-up-oauth-proxy).
 
+## Running E2E Tests
+
+Each example includes Playwright E2E tests that test the full OAuth login flow. Tests are designed to skip gracefully when the OAuth proxy or credentials are unavailable.
+
+### Prerequisites
+
+1. **OAuth Proxy**: Start the proxy server:
+   ```bash
+   ./scripts/restart-proxy.sh  # Starts proxy at http://127.0.0.1:8787
+   ```
+
+2. **Environment Variables**: Create a `.env` file in the project root:
+   ```bash
+   VITE_PROXY_URL=http://127.0.0.1:8787
+   VITE_EEN_CLIENT_ID=your_client_id
+   TEST_USER=your_test_email
+   TEST_PASSWORD=your_test_password
+   ```
+
+### Running Tests
+
+```bash
+# Run E2E tests for a specific example
+cd examples/vue-users
+npm run test:e2e
+
+# Run with UI for debugging
+npm run test:e2e:ui
+```
+
+### Test Behavior
+
+- **Proxy unavailable**: OAuth tests are automatically skipped with message "OAuth proxy not accessible"
+- **Credentials missing**: OAuth tests are skipped with message "Test credentials not available"
+- **Basic tests**: Tests that don't require OAuth (e.g., checking login button visibility) always run
+
+> **Note:** All development and testing has been done on macOS. The `lsof` command used in scripts may behave differently on other platforms.
+
 ## External Resources
 
 - [EEN Developer Portal](https://developer.eagleeyenetworks.com/)

package/docs/AI-CONTEXT.md

@@ -1,6 +1,6 @@
 # EEN API Toolkit - AI Reference
 
-> **Version:** 0.1.13
+> **Version:** 0.2.0
 >
 > This file is optimized for AI assistants. It contains all API signatures,
 > types, and usage patterns in a single, parseable document.

package/examples/vue-bridges/README.md

@@ -0,0 +1,126 @@
+# EEN API Toolkit - Vue Bridges Example
+
+A Vue 3 example demonstrating how to list and view EEN bridge devices using the een-api-toolkit.
+
+![Bridges Screenshot](bridges-screenshot.png)
+
+## Features Demonstrated
+
+- OAuth authentication flow (login, callback, logout)
+- Protected routes with navigation guards
+- `getBridges()` function for listing bridges with pagination
+- `getBridge()` function for fetching bridge details
+- Status filtering (online, offline, error, idle)
+- Bridge card grid with status badges
+- Detailed bridge view with device info and network info
+
+## APIs Used
+
+- `getBridges()` - List bridges with filtering and pagination
+- `getBridge()` - Get single bridge by ID
+- `useAuthStore()` - Authentication state management
+- `initEenToolkit()` - Toolkit initialization
+
+## Setup
+
+### Prerequisites
+
+1. **Start the OAuth proxy** (required for authentication):
+
+   The OAuth proxy is a separate project that handles token management securely.
+   Clone and run it from: https://github.com/klaushofrichter/een-oauth-proxy
+
+   ```bash
+   # In a separate terminal, from the een-oauth-proxy directory
+   npm install
+   npm run dev
+   ```
+
+   The proxy should be running at `http://localhost:8787`.
+
+### Example Setup
+
+All commands below should be run from this example directory (`examples/vue-bridges/`):
+
+2. Copy the environment file:
+   ```bash
+   # From examples/vue-bridges/
+   cp .env.example .env
+   ```
+
+3. Edit `.env` with your EEN credentials:
+   ```env
+   VITE_EEN_CLIENT_ID=your-client-id
+   VITE_PROXY_URL=http://localhost:8787
+   # DO NOT change the redirect URI - EEN IDP only permits this URL
+   VITE_REDIRECT_URI=http://127.0.0.1:3333
+   ```
+
+4. Install dependencies and start:
+   ```bash
+   # From examples/vue-bridges/
+   npm install
+   npm run dev
+   ```
+
+5. Open http://127.0.0.1:3333 in your browser.
+
+**Important:** The EEN Identity Provider only permits `http://127.0.0.1:3333` as the OAuth redirect URI. Do not use `localhost` or other ports.
+
+**Note:** Development and testing was done on macOS. The `npm run stop` command uses `lsof`, which is not available on Windows. Windows users should manually stop any process on port 3333 or use `npx kill-port 3333` instead.
+
+## Project Structure
+
+```
+src/
+├── main.ts          # App entry, toolkit initialization
+├── App.vue          # Root component with navigation
+├── router/
+│   └── index.ts     # Vue Router with auth guards
+└── views/
+    ├── Home.vue     # Home page with login prompt
+    ├── Login.vue    # OAuth login redirect
+    ├── Callback.vue # OAuth callback handler
+    ├── Bridges.vue  # Bridge list with filtering
+    ├── BridgeDetail.vue # Single bridge details
+    └── Logout.vue   # Logout handler
+```
+
+## Key Code Examples
+
+### Listing Bridges with Filtering (Bridges.vue)
+
+```typescript
+import { getBridges, type Bridge, type ListBridgesParams } from 'een-api-toolkit'
+
+const params = ref<ListBridgesParams>({
+  pageSize: 20,
+  include: ['deviceInfo', 'status', 'networkInfo']
+})
+
+async function fetchBridges() {
+  const result = await getBridges(params.value)
+  if (result.error) {
+    error.value = result.error
+  } else {
+    bridges.value = result.data.results
+    nextPageToken.value = result.data.nextPageToken
+  }
+}
+```
+
+### Fetching Bridge Details (BridgeDetail.vue)
+
+```typescript
+import { getBridge } from 'een-api-toolkit'
+
+const result = await getBridge(bridgeId, {
+  include: ['deviceInfo', 'status', 'networkInfo']
+})
+
+if (result.error) {
+  error.value = result.error
+} else {
+  bridge.value = result.data
+}
+```

package/examples/vue-bridges/package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.0.1",
       "dependencies": {
         "een-api-toolkit": "file:../..",
-        "pinia": "^2.1.7",
+        "pinia": "^3.0.4",
         "vue": "^3.4.0",
         "vue-router": "^4.2.0"
       },
@@ -23,21 +23,22 @@
       }
     },
     "../..": {
-      "version": "0.1.2",
+      "version": "0.1.13",
       "license": "MIT",
       "devDependencies": {
         "@playwright/test": "^1.57.0",
-        "@types/node": "^22.0.0",
-        "@typescript-eslint/eslint-plugin": "^6.21.0",
-        "@typescript-eslint/parser": "^6.21.0",
+        "@types/node": "^25.0.3",
+        "@typescript-eslint/eslint-plugin": "^8.51.0",
+        "@typescript-eslint/parser": "^8.51.0",
         "@vitejs/plugin-vue": "^6.0.0",
-        "@vue/tsconfig": "^0.5.0",
+        "@vue/tsconfig": "^0.8.1",
         "dotenv": "^17.2.3",
-        "eslint": "^8.56.0",
-        "eslint-plugin-vue": "^9.20.0",
+        "eslint": "^9.39.2",
+        "eslint-plugin-vue": "^10.6.2",
+        "globals": "^17.0.0",
         "husky": "^9.1.7",
         "jsdom": "^27.4.0",
-        "pinia": "^2.1.7",
+        "pinia": "^3.0.4",
         "tsx": "^4.21.0",
         "typedoc": "^0.28.15",
         "typedoc-plugin-markdown": "^4.9.0",
@@ -990,6 +991,30 @@
       "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
       "license": "MIT"
     },
+    "node_modules/@vue/devtools-kit": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
+      "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.9",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
+      "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
     "node_modules/@vue/language-core": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.2.1.tgz",
@@ -1063,6 +1088,30 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/birpc": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/copy-anything": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
+      "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -1179,6 +1228,24 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
+    "node_modules/is-what": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
+      "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -1188,6 +1255,12 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
     "node_modules/muggle-string": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
@@ -1220,6 +1293,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1240,20 +1319,19 @@
       }
     },
     "node_modules/pinia": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.1.tgz",
-      "integrity": "sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-api": "^6.6.3",
-        "vue-demi": "^0.14.10"
+        "@vue/devtools-api": "^7.7.7"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
       },
       "peerDependencies": {
-        "typescript": ">=4.4.4",
-        "vue": "^2.7.0 || ^3.5.11"
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -1261,6 +1339,15 @@
         }
       }
     },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+      "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.9"
+      }
+    },
     "node_modules/playwright": {
       "version": "1.57.0",
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.57.0.tgz",
@@ -1321,6 +1408,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
     "node_modules/rollup": {
       "version": "4.54.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz",
@@ -1372,6 +1465,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/superjson": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz",
+      "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -1521,32 +1635,6 @@
         }
       }
     },
-    "node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/vue-router": {
       "version": "4.6.4",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",

package/examples/vue-bridges/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "stop": "npx kill-port 3333",
+    "stop": "lsof -ti :3333 2>/dev/null | xargs -r kill -9 || echo 'Port 3333 is free'",
     "dev": "npm run stop && vite",
     "build": "vue-tsc && vite build",
     "preview": "vite preview",
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "een-api-toolkit": "file:../..",
-    "pinia": "^2.1.7",
+    "pinia": "^3.0.4",
     "vue": "^3.4.0",
     "vue-router": "^4.2.0"
   },

package/examples/vue-cameras/README.md

@@ -0,0 +1,142 @@
+# EEN API Toolkit - Vue Cameras Example
+
+A Vue 3 example demonstrating how to list and view EEN cameras using the een-api-toolkit.
+
+![Cameras Screenshot](cameras-screenshot.png)
+
+## Features Demonstrated
+
+- OAuth authentication flow (login, callback, logout)
+- Protected routes with navigation guards
+- `getCameras()` function for listing cameras with pagination
+- `getCamera()` function for fetching camera details
+- Status filtering (online, streaming, offline, device offline, bridge offline, error)
+- Camera card grid with status badges
+- Detailed camera view with device info
+
+## APIs Used
+
+- `getCameras()` - List cameras with filtering and pagination
+- `getCamera()` - Get single camera by ID
+- `useAuthStore()` - Authentication state management
+- `initEenToolkit()` - Toolkit initialization
+
+## Setup
+
+### Prerequisites
+
+1. **Start the OAuth proxy** (required for authentication):
+
+   The OAuth proxy is a separate project that handles token management securely.
+   Clone and run it from: https://github.com/klaushofrichter/een-oauth-proxy
+
+   ```bash
+   # In a separate terminal, from the een-oauth-proxy directory
+   npm install
+   npm run dev
+   ```
+
+   The proxy should be running at `http://localhost:8787`.
+
+### Example Setup
+
+All commands below should be run from this example directory (`examples/vue-cameras/`):
+
+2. Copy the environment file:
+   ```bash
+   # From examples/vue-cameras/
+   cp .env.example .env
+   ```
+
+3. Edit `.env` with your EEN credentials:
+   ```env
+   VITE_EEN_CLIENT_ID=your-client-id
+   VITE_PROXY_URL=http://localhost:8787
+   # DO NOT change the redirect URI - EEN IDP only permits this URL
+   VITE_REDIRECT_URI=http://127.0.0.1:3333
+   ```
+
+4. Install dependencies and start:
+   ```bash
+   # From examples/vue-cameras/
+   npm install
+   npm run dev
+   ```
+
+5. Open http://127.0.0.1:3333 in your browser.
+
+**Important:** The EEN Identity Provider only permits `http://127.0.0.1:3333` as the OAuth redirect URI. Do not use `localhost` or other ports.
+
+**Note:** Development and testing was done on macOS. The `npm run stop` command uses `lsof`, which is not available on Windows. Windows users should manually stop any process on port 3333 or use `npx kill-port 3333` instead.
+
+## Project Structure
+
+```
+src/
+├── main.ts          # App entry, toolkit initialization
+├── App.vue          # Root component with navigation
+├── router/
+│   └── index.ts     # Vue Router with auth guards
+└── views/
+    ├── Home.vue     # Home page with login prompt
+    ├── Login.vue    # OAuth login redirect
+    ├── Callback.vue # OAuth callback handler
+    ├── Cameras.vue  # Camera list with filtering
+    ├── CameraDetail.vue # Single camera details
+    └── Logout.vue   # Logout handler
+```
+
+## Key Code Examples
+
+### Listing Cameras with Filtering (Cameras.vue)
+
+```typescript
+import { getCameras, type Camera, type ListCamerasParams } from 'een-api-toolkit'
+
+const params = ref<ListCamerasParams>({
+  pageSize: 20,
+  include: ['deviceInfo', 'status']
+})
+
+async function fetchCameras() {
+  const result = await getCameras(params.value)
+  if (result.error) {
+    error.value = result.error
+  } else {
+    cameras.value = result.data.results
+    nextPageToken.value = result.data.nextPageToken
+  }
+}
+```
+
+### Fetching Camera Details (CameraDetail.vue)
+
+```typescript
+import { getCamera } from 'een-api-toolkit'
+
+const result = await getCamera(cameraId, {
+  include: ['deviceInfo', 'status']
+})
+
+if (result.error) {
+  error.value = result.error
+} else {
+  camera.value = result.data
+}
+```
+
+### Status Filtering
+
+```typescript
+// Watch for status filter changes
+watch(statusFilter, async (newStatus) => {
+  if (newStatus) {
+    setParams({
+      pageSize: 20,
+      include: ['deviceInfo', 'status'],
+      status__in: [newStatus]
+    })
+  }
+  await fetchCameras()
+})
+```