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:
1 parent
206a9ce921
commit
2fd70465e6
45 files changed
+27863
No files matched your search
@@ -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;
|
||||
}
|
||||
Reference in new issue
Block a user