diff --git a/docs/features/agent_node_mesh.md b/docs/features/agent_node_mesh.md index c80f0da..50d69f5 100644 --- a/docs/features/agent_node_mesh.md +++ b/docs/features/agent_node_mesh.md @@ -19,30 +19,33 @@ ### B. Node Management Card (Repeatable Component) Each registered node is represented by a high-density management card. -#### 1. Identity & Live Pulse (Top-Left) +#### 1. Identity, Live Pulse, & Hardware Metadata - **Pulsing Indicator**: A real-time status light. - `bg-green-500`: Node is active and heartbeating via gRPC. - `bg-gray-400`: Node is offline or stale. - **Status Text**: Dynamic label (`online`, `busy`, `idle`, `offline`) derived from gRPC mesh status. -- **Node Name**: Primary display name. -- **Node ID**: Secondary monospaced identifier (e.g., `test-prod-node`). +- **Node Name (Hover Trigger)**: Primary display name with a dotted underline. + - **Hover Tooltip**: Reveals a rich popup containing the Node ID, Description, registered owner, and live **Hardware Capabilities** (GPU presence and type, Operating System, and CPU Architecture). Uses dynamic color-coded badges to easily identify OS and GPU hardware. +- **Responsive Layout**: On mobile, the identity elements stack independently for clarity. -#### 2. Live Health Metrics (Integrated in Top Row) +#### 2. Live Health Metrics - **CPU Meter**: Gradient bar (Indigo-Blue) showing total host load. - **Hover Tooltip**: Displays Core count, Current Frequency (GHz), Per-core utilization distribution, and Load Averages (1/5/15 min). - **RAM Meter**: Gradient bar (Pink-Rose) showing memory utilization. - **Hover Tooltip**: Displays exact GB Used, Available capacity, and Total system memory. - **Dynamic Visibility**: Meters only appear when the node is **online**. If offline, a stable space of `140px` is reserved to prevent UI shifting. +- **Responsive Placement**: On desktop screens, metrics align inline in the top row. On mobile screens, they flow to a new line immediately below the node identity. - **UI Interaction**: Tooltips pop **downwards** (`top-full`) to ensure they are never clipped by the header navigation bar. - **Philosophy**: Instant "at-a-glance" deep health check without needing to open secondary dashboards. -#### 3. State Control Toggle (Right Middle) -- **Active/Disabled Switch**: A tactile, rounded toggle. - - **Active (Indigo)**: Node is allowed to accept tasks and sync files. - - **Disabled (Red)**: Node restricted from synchronization and command execution. +#### 3. State Control Toggle +- **Active/Disabled Pill**: A compact, tactile button. + - **Active (Indigo)**: Node is allowed to accept tasks and sync files. Shown as a filled pill (`● Active`). + - **Disabled (Ghost)**: Node restricted from synchronization and command execution. Shown as an outlined pill (`○ Disabled`). -#### 4. Action Utility Bar (Right) -- **Terminal Button (Amber/Indigo)**: Expands the PTY-based console. +#### 4. Action Toolbar (Responsive) +- **Layout**: Flexible action bar that aligns right on desktops, and collapses into a tight bottom row with scaled-down padding on mobile devices for touch targets. +- **Terminal Button (Indigo)**: Expands the PTY-based console. - **File Navigator Button (Amber)**: Expands the directory explorer. - **Settings & Details Button (Gray)**: Expands the administrative configuration panel. - **Deregister Button (Red Trash)**: Permanently removes node from registry (Admin only). @@ -76,11 +79,13 @@ --- -## 3. Execution Live Bus (Bottom Overlay) +## 3. Execution Live Bus (Event Stream) -- **Position**: Bottom of the page, visible when events occur. -- **Content**: A streaming timeline of all mesh events (`task_start`, `task_complete`, `sync_progress`). -- **Philosophy**: Providing a "Global Pulse" of what the AI is doing across the entire fleet of nodes. +- **Position**: Settled at the bottom of the node list. +- **State**: **Collapsed by default**. Built using a zero-JS `
`/`` HTML pattern to keep the main view uncluttered, especially on mobile. +- **Label**: Marked with a `Debug` pill badge to emphasize it as an optional tracing tool rather than primary management functionality. +- **Content**: When expanded, a streaming timeline of all mesh events (`task_start`, `task_complete`, `sync_progress`) is revealed. +- **Philosophy**: Providing a "Global Pulse" of what the AI is doing across the entire fleet of nodes. Will eventually be migrated to a dedicated Observability (o11y) dashboard space. ---