Introduces the full-featured, modern Angular 19 web dashboard for ARTEMIS. Provides real-time multimodal agent stream visualization, live device feeds, interactive step inspection, task queue management, and model telemetry. Key Features & UI Architecture: - Workspace & Layout: * Split-pane responsive layout with draggable resizer bar for execution stream and chat/task panel. * Standalone Angular components powered by Signals and reactive computed state. - Real-Time Multimodal Agent Stream: * SSE connection (/api/stream/:session_id) for live streaming of thoughts, actions, and tool calls. * Hierarchical phase grouping (Planning -> Execution -> Verification -> Summary). * Interactive step viewer with before/after screenshot overlays, coordinate pins, bounding boxes, and OCR text highlights. * Live planning loader, error diagnostics banner, retry status indicator, and token usage metrics. - Task Queue & Chat Interface: * Goal submission with instant dispatch to backend runner (/api/run). * Active task queue tracker (running, pending queue in FIFO order, completed/failed historical sessions). * Session switcher with model info badges and Markdown notes viewer (e.g. task_plan.md). - Floating Video Player & Live Stream: * Draggable, floating video player overlay for reviewing session recordings and live device feeds (/api/stream/device-live). * Playback controls: play/pause, seek scrubber, speed multipliers (0.5x - 4.0x), looping, and theater mode. - Formatting & Parsing Utilities: * Android UI action formatter (tap, type, swipe, drag, keyevent, app launch). * Tool call formatter for ADB commands, note management, video inspection, and failure recovery. * Markdown parsing and milestone checklist rendering.
107 lines
2.8 KiB
JSON
107 lines
2.8 KiB
JSON
{
|
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
|
"version": 1,
|
|
"cli": {
|
|
"packageManager": "npm",
|
|
"analytics": false
|
|
},
|
|
"newProjectRoot": "projects",
|
|
"projects": {
|
|
"frontend": {
|
|
"projectType": "application",
|
|
"schematics": {
|
|
"@schematics/angular:component": {
|
|
"style": "scss"
|
|
}
|
|
},
|
|
"root": "",
|
|
"sourceRoot": "src",
|
|
"prefix": "app",
|
|
"architect": {
|
|
"build": {
|
|
"builder": "@angular-devkit/build-angular:application",
|
|
"options": {
|
|
"outputPath": "dist/frontend",
|
|
"index": "src/index.html",
|
|
"browser": "src/main.ts",
|
|
"polyfills": [
|
|
"zone.js"
|
|
],
|
|
"tsConfig": "tsconfig.app.json",
|
|
"inlineStyleLanguage": "scss",
|
|
"assets": [
|
|
{
|
|
"glob": "**/*",
|
|
"input": "public"
|
|
}
|
|
],
|
|
"styles": [
|
|
"src/styles.scss"
|
|
],
|
|
"scripts": []
|
|
},
|
|
"configurations": {
|
|
"production": {
|
|
"budgets": [
|
|
{
|
|
"type": "initial",
|
|
"maximumWarning": "500kB",
|
|
"maximumError": "1MB"
|
|
},
|
|
{
|
|
"type": "anyComponentStyle",
|
|
"maximumWarning": "50kB",
|
|
"maximumError": "100kB"
|
|
}
|
|
],
|
|
"outputHashing": "all"
|
|
},
|
|
"development": {
|
|
"optimization": false,
|
|
"extractLicenses": false,
|
|
"sourceMap": true
|
|
}
|
|
},
|
|
"defaultConfiguration": "production"
|
|
},
|
|
"serve": {
|
|
"builder": "@angular-devkit/build-angular:dev-server",
|
|
"configurations": {
|
|
"production": {
|
|
"buildTarget": "frontend:build:production"
|
|
},
|
|
"development": {
|
|
"buildTarget": "frontend:build:development"
|
|
}
|
|
},
|
|
"defaultConfiguration": "development"
|
|
},
|
|
"extract-i18n": {
|
|
"builder": "@angular-devkit/build-angular:extract-i18n"
|
|
},
|
|
"test": {
|
|
"builder": "@angular-devkit/build-angular:karma",
|
|
"options": {
|
|
"polyfills": [
|
|
"zone.js",
|
|
"zone.js/testing"
|
|
],
|
|
"tsConfig": "tsconfig.spec.json",
|
|
"inlineStyleLanguage": "scss",
|
|
"assets": [
|
|
{
|
|
"glob": "**/*",
|
|
"input": "public"
|
|
}
|
|
],
|
|
"styles": [
|
|
"src/styles.scss"
|
|
],
|
|
"scripts": []
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|