{"_id":"@dxheroes/ado-dashboard","_rev":"5-619d65fd11582fb9213ffc76dd9a633b","name":"@dxheroes/ado-dashboard","dist-tags":{"latest":"0.1.4"},"versions":{"0.1.0":{"name":"@dxheroes/ado-dashboard","version":"0.1.0","keywords":["ado","dashboard","ui","react","monitoring"],"_id":"@dxheroes/ado-dashboard@0.1.0","maintainers":[{"name":"dxheroes_dev","email":"dev@dxheroes.io"}],"dist":{"shasum":"ff79b20a54eab63d0db0b0abff4766ba9f2e1ba5","tarball":"https://registry.npmjs.org/@dxheroes/ado-dashboard/-/ado-dashboard-0.1.0.tgz","fileCount":6,"integrity":"sha512-Fmgj4zQiqjQEsH4hkm5vc3Scppjp9nZhb3SuoYVvf+Oh9puN+0cUQMO/9KkJ/WapkWRDbwy2kzrrhQ2AK7N3GQ==","signatures":[{"sig":"MEUCIQDRQpglita9LkzoBvcoJCoowjHFHXF1Oh7QuIgVUQ9CeAIgOCabkeRZMgCWkCScMo8ObJTKW+6jNcAYiOGTL5spLck=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3506422},"type":"module","_from":"file:dxheroes-ado-dashboard-0.1.0.tgz","scripts":{"dev":"vite","build":"tsc && vite build","clean":"rm -rf dist node_modules","preview":"vite preview","typecheck":"tsc --noEmit"},"_npmUser":{"name":"dxheroes_dev","email":"dev@dxheroes.io"},"_resolved":"/tmp/37333634b1616acd879c693234e5fc84/dxheroes-ado-dashboard-0.1.0.tgz","_integrity":"sha512-Fmgj4zQiqjQEsH4hkm5vc3Scppjp9nZhb3SuoYVvf+Oh9puN+0cUQMO/9KkJ/WapkWRDbwy2kzrrhQ2AK7N3GQ==","_npmVersion":"10.8.2","description":"Web dashboard for ADO orchestrator","directories":{},"_nodeVersion":"20.19.5","dependencies":{"react":"^18.3.1","date-fns":"^4.1.0","recharts":"^2.14.1","react-dom":"^18.3.1","lucide-react":"^0.462.0","react-router-dom":"^6.28.0","@dxheroes/ado-core":"0.1.0","@dxheroes/ado-shared":"0.1.0","@tanstack/react-query":"^5.62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.1","postcss":"^8.4.49","tailwindcss":"^3.4.15","@types/react":"^18.3.12","autoprefixer":"^10.4.20","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.4"},"_npmOperationalInternal":{"tmp":"tmp/ado-dashboard_0.1.0_1764263847181_0.23321982128681706","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@dxheroes/ado-dashboard","version":"0.1.1","keywords":["ado","dashboard","ui","react","monitoring"],"_id":"@dxheroes/ado-dashboard@0.1.1","maintainers":[{"name":"dxheroes_dev","email":"dev@dxheroes.io"}],"dist":{"shasum":"c52d4f25f31d2c3c5d3ab66de540c279d4fa2d30","tarball":"https://registry.npmjs.org/@dxheroes/ado-dashboard/-/ado-dashboard-0.1.1.tgz","fileCount":6,"integrity":"sha512-6WG2dF0fXZYlc46D0rQ8MS7RzAtGc/p8ppIED3Yxo//OgxrM6viMxOSdGqsrN3M8Ie/x8EJKoTyU0lRojPqS6Q==","signatures":[{"sig":"MEQCIB3UL8rK+XnAXpUi9R/Z6P757XRhh/kQTng2gMtav40yAiAXdVoyl3MV5Cc3aa/EGnR+hheNTXoMl3xWvBJy18IvrA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3506475},"type":"module","_from":"file:dxheroes-ado-dashboard-0.1.1.tgz","scripts":{"dev":"vite","build":"tsc && vite build","clean":"rm -rf dist node_modules","preview":"vite preview","build:api":"tsc && BUILD_MODE=api vite build","typecheck":"tsc --noEmit"},"_npmUser":{"name":"dxheroes_dev","email":"dev@dxheroes.io"},"_resolved":"/tmp/fc7011aa8eb2cf39af7e6448785d6cc9/dxheroes-ado-dashboard-0.1.1.tgz","_integrity":"sha512-6WG2dF0fXZYlc46D0rQ8MS7RzAtGc/p8ppIED3Yxo//OgxrM6viMxOSdGqsrN3M8Ie/x8EJKoTyU0lRojPqS6Q==","_npmVersion":"10.8.2","description":"Web dashboard for ADO orchestrator","directories":{},"_nodeVersion":"20.19.5","dependencies":{"react":"^18.3.1","date-fns":"^4.1.0","recharts":"^2.14.1","react-dom":"^18.3.1","lucide-react":"^0.462.0","react-router-dom":"^6.28.0","@dxheroes/ado-core":"0.1.1","@dxheroes/ado-shared":"0.1.0","@tanstack/react-query":"^5.62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.1","postcss":"^8.4.49","tailwindcss":"^3.4.15","@types/react":"^18.3.12","autoprefixer":"^10.4.20","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.4"},"_npmOperationalInternal":{"tmp":"tmp/ado-dashboard_0.1.1_1764272653105_0.6999818783296259","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@dxheroes/ado-dashboard","version":"0.1.2","keywords":["ado","dashboard","ui","react","monitoring"],"_id":"@dxheroes/ado-dashboard@0.1.2","maintainers":[{"name":"dxheroes_dev","email":"dev@dxheroes.io"}],"dist":{"shasum":"1570511b06ddf4e9d13db7a11a07b79eeb91e2ca","tarball":"https://registry.npmjs.org/@dxheroes/ado-dashboard/-/ado-dashboard-0.1.2.tgz","fileCount":6,"integrity":"sha512-Ev51C9P0HvPJOqvJj+A+0op0VUKSd6JjLEjpK+dw7+r4lWNq2s+DsB6rDu+IIFiR7zlFzi07CYZnxIWyjadB9g==","signatures":[{"sig":"MEYCIQCwYVY/EPtd6W0/GoWR4snd+a3+QXOd0/dXmh2reH+PYgIhAIUP4dZwAxND59WpI1kbFuaAhb2Pe3XX/Q4PELqjBh+z","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3506475},"type":"module","_from":"file:dxheroes-ado-dashboard-0.1.2.tgz","scripts":{"dev":"vite","build":"tsc && vite build","clean":"rm -rf dist node_modules","preview":"vite preview","build:api":"tsc && BUILD_MODE=api vite build","typecheck":"tsc --noEmit"},"_npmUser":{"name":"dxheroes_dev","email":"dev@dxheroes.io"},"_resolved":"/tmp/678050fbbae5e3ba7bfe383375a77c31/dxheroes-ado-dashboard-0.1.2.tgz","_integrity":"sha512-Ev51C9P0HvPJOqvJj+A+0op0VUKSd6JjLEjpK+dw7+r4lWNq2s+DsB6rDu+IIFiR7zlFzi07CYZnxIWyjadB9g==","_npmVersion":"10.8.2","description":"Web dashboard for ADO orchestrator","directories":{},"_nodeVersion":"20.19.5","dependencies":{"react":"^18.3.1","date-fns":"^4.1.0","recharts":"^2.14.1","react-dom":"^18.3.1","lucide-react":"^0.462.0","react-router-dom":"^6.28.0","@dxheroes/ado-core":"0.1.2","@dxheroes/ado-shared":"0.1.0","@tanstack/react-query":"^5.62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.1","postcss":"^8.4.49","tailwindcss":"^3.4.15","@types/react":"^18.3.12","autoprefixer":"^10.4.20","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.4"},"_npmOperationalInternal":{"tmp":"tmp/ado-dashboard_0.1.2_1764278017118_0.10402831304510918","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@dxheroes/ado-dashboard","version":"0.1.3","keywords":["ado","dashboard","ui","react","monitoring"],"_id":"@dxheroes/ado-dashboard@0.1.3","maintainers":[{"name":"dxheroes_dev","email":"dev@dxheroes.io"}],"dist":{"shasum":"81ed850679423e6890de036916444a31c5ef6638","tarball":"https://registry.npmjs.org/@dxheroes/ado-dashboard/-/ado-dashboard-0.1.3.tgz","fileCount":6,"integrity":"sha512-8ECaOQknI6u/q0+gysxosusUhkzyZS5S1HsGfLGRYDGMNHWEQPvuxr0YZ3chhwq5uX1dFwwpIeWLs3ln/TTMZg==","signatures":[{"sig":"MEYCIQDPFKYVOHuCeYTJcJq9QBpPu2uQONZIZu+GnwtXwW1fYwIhAJzo5SMsTXDtfInlCGJ0X8kRmVQOuqntvyhNSnhiE8/Z","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3681772},"type":"module","_from":"file:dxheroes-ado-dashboard-0.1.3.tgz","scripts":{"dev":"vite","test":"vitest run","build":"tsc && vite build","clean":"rm -rf dist node_modules","preview":"vite preview","test:ui":"vitest --ui","build:api":"tsc && BUILD_MODE=api vite build","typecheck":"tsc --noEmit","test:watch":"vitest watch","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"dxheroes_dev","email":"dev@dxheroes.io"},"_resolved":"/tmp/94979c14965c2697502024cb0e33a6cf/dxheroes-ado-dashboard-0.1.3.tgz","_integrity":"sha512-8ECaOQknI6u/q0+gysxosusUhkzyZS5S1HsGfLGRYDGMNHWEQPvuxr0YZ3chhwq5uX1dFwwpIeWLs3ln/TTMZg==","_npmVersion":"10.9.4","description":"Web dashboard for ADO orchestrator","directories":{},"_nodeVersion":"22.21.1","dependencies":{"react":"^18.3.1","date-fns":"^4.1.0","recharts":"^2.14.1","react-dom":"^18.3.1","lucide-react":"^0.462.0","react-router-dom":"^6.28.0","@dxheroes/ado-core":"0.1.4","@dxheroes/ado-shared":"0.1.1","@tanstack/react-query":"^5.62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.1","jsdom":"^27.3.0","vitest":"^4.0.15","postcss":"^8.4.49","@vitest/ui":"^4.0.15","tailwindcss":"^3.4.15","@types/react":"^18.3.12","autoprefixer":"^10.4.20","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.4","@testing-library/react":"^16.3.0","@testing-library/jest-dom":"^6.9.1","@testing-library/user-event":"^14.6.1"},"_npmOperationalInternal":{"tmp":"tmp/ado-dashboard_0.1.3_1765657064714_0.2388224012175615","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@dxheroes/ado-dashboard","version":"0.1.4","description":"Web dashboard for ADO orchestrator","type":"module","keywords":["ado","dashboard","ui","react","monitoring"],"publishConfig":{"access":"public"},"dependencies":{"@tanstack/react-query":"^5.62.0","date-fns":"^4.1.0","lucide-react":"^0.462.0","react":"^18.3.1","react-dom":"^18.3.1","react-router-dom":"^6.28.0","recharts":"^2.14.1","@dxheroes/ado-core":"0.1.5","@dxheroes/ado-shared":"0.1.2"},"devDependencies":{"@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.0","@testing-library/user-event":"^14.6.1","@types/react":"^18.3.12","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.4","@vitest/ui":"^4.0.15","autoprefixer":"^10.4.20","jsdom":"^27.3.0","postcss":"^8.4.49","tailwindcss":"^3.4.15","vite":"^6.0.1","vitest":"^4.0.15"},"scripts":{"dev":"vite","build":"tsc && vite build","build:api":"tsc && BUILD_MODE=api vite build","preview":"vite preview","typecheck":"tsc --noEmit","test":"vitest run","test:watch":"vitest watch","test:ui":"vitest --ui","test:coverage":"vitest run --coverage","clean":"rm -rf dist node_modules"},"_id":"@dxheroes/ado-dashboard@0.1.4","_integrity":"sha512-U1cW7Mkk1yhByPePGefFTk+Q0Krel+03Y7wU/N9sXlvFuWuKas1n0BNr4Xm8TaePEUMbialD/wVlk2psokyKRQ==","_resolved":"/tmp/341d788888a588eeea39c72d69796713/dxheroes-ado-dashboard-0.1.4.tgz","_from":"file:dxheroes-ado-dashboard-0.1.4.tgz","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-U1cW7Mkk1yhByPePGefFTk+Q0Krel+03Y7wU/N9sXlvFuWuKas1n0BNr4Xm8TaePEUMbialD/wVlk2psokyKRQ==","shasum":"59f54d44504cc296c27720d6647635df3ef2177a","tarball":"https://registry.npmjs.org/@dxheroes/ado-dashboard/-/ado-dashboard-0.1.4.tgz","fileCount":6,"unpackedSize":3681772,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDoDstf1uvYJKGXxFzkqgSkwN5CGi1yDj6MOSJMoZfSkwIhAJ/wVOiX1Y0sRfXE6jnqzOa2q07D56TaQd0ST15vn6MZ"}]},"_npmUser":{"name":"dxheroes_dev","email":"dev@dxheroes.io"},"directories":{},"maintainers":[{"name":"dxheroes_dev","email":"dev@dxheroes.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ado-dashboard_0.1.4_1765657542871_0.7070214842384237"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-27T17:17:27.069Z","modified":"2025-12-13T20:25:43.324Z","0.1.0":"2025-11-27T17:17:27.381Z","0.1.1":"2025-11-27T19:44:13.387Z","0.1.2":"2025-11-27T21:13:37.338Z","0.1.3":"2025-12-13T20:17:44.888Z","0.1.4":"2025-12-13T20:25:43.109Z"},"keywords":["ado","dashboard","ui","react","monitoring"],"description":"Web dashboard for ADO orchestrator","maintainers":[{"name":"dxheroes_dev","email":"dev@dxheroes.io"}],"readme":"# ADO Dashboard\n\nWeb dashboard for the Agentic Development Orchestrator (ADO).\n\n## Features\n\n- **Real-time Task Monitoring** - View active and completed tasks with live updates\n- **Parallel Execution** - Monitor distributed worker pools and task parallelization\n- **Provider Management** - Enable/disable AI coding agents\n- **Cost Tracking** - Monitor API usage, costs, and optimization recommendations\n- **Analytics** - Visualize task volume, provider usage, and performance trends\n- **Settings** - Configure routing, HITL policies, quality gates, and notifications\n\n## Pages\n\n### Dashboard (Home)\n\nMain overview with key metrics:\n- Active tasks count\n- Total cost (24h)\n- Success rate\n- Active providers\n- Task volume trend (7-day chart)\n- Recent tasks list\n\n### Tasks\n\nTask management interface:\n- Task list with filters (status, provider)\n- Real-time status updates\n- Task search\n- Task detail view with:\n  - Execution timeline\n  - Event stream\n  - Cost breakdown\n  - Output/errors\n\n### Parallel Execution\n\nDistributed worker pool monitoring (M9 feature):\n- **Worker Statistics**:\n  - Active/idle/busy workers\n  - Worker utilization\n  - Worker health status\n- **Task Parallelization**:\n  - Queued, running, completed tasks\n  - Average task duration\n  - Parallel execution efficiency\n- **Cost Optimization**:\n  - 24h cost tracking\n  - 7-day cost projection\n  - Cost savings from parallelization\n  - Cost efficiency metrics\n- **Merge Coordinator**:\n  - Total merge operations\n  - Auto-resolved vs. manual merges\n  - Auto-resolution rate (target: 80%+)\n- **Workload Distribution**:\n  - Hourly workload chart\n  - Worker utilization heatmap\n  - Cost by tier breakdown\n- **Recommendations**:\n  - Worker scaling suggestions\n  - Tier optimization\n  - Estimated cost savings\n\n### Providers\n\nProvider management and configuration:\n- Enable/disable providers\n- Access mode configuration (subscription/API)\n- Rate limit status\n- Provider capabilities\n- Usage statistics per provider\n\n### Settings\n\nApplication settings:\n- **Routing**: Subscription-first, API-first, cost-optimized\n- **Checkpoints**: Auto-save, HITL thresholds\n- **Quality Gates**: Build, test, lint, coverage requirements\n- **Parallelization**: Max workers, cost strategy, autoscaling\n- **Notifications**: Slack, email, webhook configuration\n- **Telemetry**: OpenTelemetry settings\n- **State**: Database configuration (SQLite/PostgreSQL)\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Start development server\npnpm dev\n\n# Build for production\npnpm build\n\n# Preview production build\npnpm preview\n```\n\n## Environment Variables\n\nCreate a `.env` file based on `.env.example`:\n\n```env\nVITE_API_URL=http://localhost:8080\n```\n\n## Tech Stack\n\n- **React 18** - UI framework with concurrent features\n- **TypeScript** - Full type safety\n- **Vite** - Fast build tool with HMR\n- **Tailwind CSS** - Utility-first styling\n- **React Router** - Client-side routing\n- **TanStack Query (React Query)** - Data fetching and caching\n- **tRPC Client** - Type-safe API client\n- **WebSocket** - Real-time updates\n- **Recharts** - Data visualization (charts and graphs)\n- **Lucide React** - Icon system\n\n## API Integration\n\nThe dashboard connects to the ADO API server via tRPC and WebSocket.\n\n### tRPC Client Setup\n\n```typescript\nimport { createTRPCReact } from '@trpc/react-query';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { wsLink } from '@trpc/client';\nimport type { AppRouter } from '@dxheroes/ado-api';\n\nconst trpc = createTRPCReact<AppRouter>();\n\n// Configure tRPC client\nconst trpcClient = trpc.createClient({\n  links: [\n    wsLink({\n      client: createWSClient({\n        url: 'ws://localhost:4000',\n      }),\n    }),\n  ],\n});\n\nconst queryClient = new QueryClient();\n\nfunction App() {\n  return (\n    <trpc.Provider client={trpcClient} queryClient={queryClient}>\n      <QueryClientProvider client={queryClient}>\n        <Router />\n      </QueryClientProvider>\n    </trpc.Provider>\n  );\n}\n```\n\n### Real-Time Updates\n\nTasks page uses WebSocket subscriptions for live updates:\n\n```typescript\nimport { trpc } from './lib/trpc';\n\nfunction TaskDetail({ taskId }: { taskId: string }) {\n  // Subscribe to task progress\n  trpc.task.onProgress.useSubscription(\n    { taskId },\n    {\n      onData: (event) => {\n        console.log('Task event:', event);\n      },\n    }\n  );\n\n  return <div>Task detail...</div>;\n}\n```\n\n## Project Structure\n\n```\npackages/dashboard/\n├── src/\n│   ├── components/      # Reusable UI components\n│   │   ├── Card.tsx\n│   │   ├── StatCard.tsx\n│   │   ├── TaskList.tsx\n│   │   └── ...\n│   ├── pages/           # Page components\n│   │   ├── Dashboard.tsx\n│   │   ├── Tasks.tsx\n│   │   ├── TaskDetail.tsx\n│   │   ├── ParallelExecution.tsx\n│   │   ├── Providers.tsx\n│   │   └── Settings.tsx\n│   ├── lib/             # Utilities and configurations\n│   │   ├── trpc.ts      # tRPC client\n│   │   └── utils.ts\n│   ├── App.tsx          # Root component\n│   ├── main.tsx         # Entry point\n│   └── index.css        # Global styles\n├── public/              # Static assets\n├── index.html\n├── vite.config.ts\n├── tailwind.config.js\n├── tsconfig.json\n└── package.json\n```\n\n## Screenshots\n\n### Dashboard Overview\nReal-time task monitoring with metrics and charts.\n\n### Parallel Execution\nWorker pool monitoring, cost optimization, and merge statistics.\n\n### Task Detail\nDetailed task execution view with event stream.\n\n## Deployment\n\n### Build for Production\n\n```bash\n# Build optimized bundle\npnpm build\n\n# Output in dist/ directory\n# - index.html\n# - assets/ (JS, CSS, images)\n```\n\n### Deploy to Static Hosting\n\n#### Vercel\n\n```bash\n# Install Vercel CLI\nnpm i -g vercel\n\n# Deploy\nvercel --prod\n```\n\n#### Netlify\n\n```bash\n# Install Netlify CLI\nnpm i -g netlify-cli\n\n# Deploy\nnetlify deploy --prod --dir dist\n```\n\n#### Docker\n\n```dockerfile\nFROM node:22-alpine as build\n\nWORKDIR /app\n\n# Install pnpm\nRUN corepack enable && corepack prepare pnpm@10.22.0 --activate\n\n# Install dependencies\nCOPY package.json pnpm-workspace.yaml pnpm-lock.yaml ./\nCOPY packages/dashboard/package.json ./packages/dashboard/\nRUN pnpm install --frozen-lockfile\n\n# Build\nCOPY packages/dashboard ./packages/dashboard\nRUN pnpm --filter @dxheroes/ado-dashboard build\n\n# Serve with nginx\nFROM nginx:alpine\nCOPY --from=build /app/packages/dashboard/dist /usr/share/nginx/html\nCOPY packages/dashboard/nginx.conf /etc/nginx/conf.d/default.conf\nEXPOSE 80\nCMD [\"nginx\", \"-g\", \"daemon off;\"]\n```\n\n```bash\n# Build image\ndocker build -t ado-dashboard:latest -f packages/dashboard/Dockerfile .\n\n# Run container\ndocker run -d -p 3000:80 ado-dashboard:latest\n```\n\n#### Kubernetes\n\n```yaml\napiVersion: apps/v1\nkind: Deployment\nmetadata:\n  name: ado-dashboard\nspec:\n  replicas: 2\n  selector:\n    matchLabels:\n      app: ado-dashboard\n  template:\n    metadata:\n      labels:\n        app: ado-dashboard\n    spec:\n      containers:\n      - name: dashboard\n        image: dxheroes/ado-dashboard:latest\n        ports:\n        - containerPort: 80\n        env:\n        - name: VITE_API_URL\n          value: \"http://ado-api:4000\"\n---\napiVersion: v1\nkind: Service\nmetadata:\n  name: ado-dashboard\nspec:\n  selector:\n    app: ado-dashboard\n  ports:\n  - port: 80\n    targetPort: 80\n  type: LoadBalancer\n```\n\n### Environment Configuration\n\nCreate `.env.production`:\n\n```env\nVITE_API_URL=https://api.ado.example.com\n```\n\nOr use runtime configuration with `config.js`:\n\n```javascript\n// public/config.js\nwindow.ADO_CONFIG = {\n  apiUrl: 'https://api.ado.example.com',\n};\n```\n\n## CLI Integration\n\nStart dashboard from ADO CLI:\n\n```bash\n# Start dashboard on default port (3000)\nado dashboard\n\n# Custom port\nado dashboard --port 8080\n\n# Open browser automatically\nado dashboard --open\n\n# Remote mode (connect to K8s API)\nado dashboard --remote\n```\n\n## Troubleshooting\n\n### Dashboard won't start\n\n```bash\n# Check if port is in use\nlsof -i :3000\n\n# Try different port\npnpm dev --port 8080\n```\n\n### API connection errors\n\n```bash\n# Check API server is running\ncurl http://localhost:4000/health\n\n# Verify environment variables\ncat .env\n```\n\n### Build errors\n\n```bash\n# Clear cache and rebuild\nrm -rf node_modules dist .vite\npnpm install\npnpm build\n```\n\n## Contributing\n\n1. Follow React best practices\n2. Use TypeScript for all components\n3. Style with Tailwind CSS utilities\n4. Keep components small and focused\n5. Add PropTypes/TypeScript types\n6. Test with Vitest + React Testing Library\n\n## License\n\nMIT © DX Heroes\n","readmeFilename":"README.md"}