feat(web): add interactive Angular web UI dashboard and execution visualizer

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.
This commit is contained in:
yaoyao-open-source committed 2026-08-13 11:58:16 -07:00
1 parent 206a9ce921
commit 2fd70465e6
45 files changed
+27863

No files matched your search

+48
View File
@@ -0,0 +1,48 @@
/**
* Copyright 2026 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 20px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'liga';
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}
body, input, button, select, textarea, h1, h2, h3, h4, h5, h6, span, p, div, summary, details, li, a {
font-family: 'Google Sans', 'Google Sans Text', 'Inter', Arial, "Liberation Sans", sans-serif;
color: #1f1f1f;
}
body {
margin: 0;
padding: 0;
background-color: #fafafa;
}