yaoyao-open-source
2fd70465e6
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.
124 lines
2.8 KiB
SCSS
124 lines
2.8 KiB
SCSS
/**
|
|
* 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); }
|
|
}
|