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
1 parent
206a9ce921
commit
2fd70465e6
45 files changed
+27863
No files matched your search
@@ -0,0 +1,123 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
$bg-base: #e2e5ea;
|
||||
$glass-bg: rgba(255, 255, 255, 0.45);
|
||||
$glass-border: rgba(255, 255, 255, 0.6);
|
||||
|
||||
.workspace-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: $bg-base;
|
||||
overflow: hidden;
|
||||
|
||||
&.is-resizing {
|
||||
cursor: col-resize;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* --- Dynamic Aurora Background --- */
|
||||
.aurora-background {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* --- Glassmorphism Panel --- */
|
||||
.glass-panel {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: #f4fafb;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
flex: 1 0 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: #f4fafb;
|
||||
border-right: 1px solid #e2e8f0;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
min-width: 450px;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
flex: 0 1 auto;
|
||||
min-width: 250px;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background-color: #ffffff;
|
||||
box-shadow: -6px 0 24px rgba(0, 0, 0, 0.03);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.resizer {
|
||||
width: 12px;
|
||||
cursor: col-resize;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
transition: background 0.2s ease;
|
||||
margin: 0 -6px;
|
||||
|
||||
&:hover, .workspace-container.is-resizing & {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
|
||||
.resizer-handle {
|
||||
background: rgba(94, 114, 228, 0.8);
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.resizer-handle {
|
||||
width: 4px;
|
||||
height: 40px;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
/* When viewport shrinks to approximately 2/3 of standard desktop width (<= 1150px), hide right panel and leave only agent-stream */
|
||||
@media (max-width: 1150px) {
|
||||
.right-panel, .resizer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
border-right: none !important;
|
||||
width: 100% !important;
|
||||
flex: 1 1 100% !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes aurora-drift {
|
||||
0% { transform: translate(0, 0) scale(1); }
|
||||
50% { transform: translate(5%, 3%) scale(1.05); }
|
||||
100% { transform: translate(-2%, -5%) scale(0.95); }
|
||||
}
|
||||
Reference in new issue
Block a user