agentgui 1.0.274 → 1.0.275

package/static/templates/README.md

@@ -1,190 +1,190 @@
-# RippleUI Component Templates for Agent Visualization
-
-**Status**: WAVE 2 Complete - All 28 Templates Created
-
-This directory contains RippleUI-based HTML templates for real-time streaming visualization of Claude Code agent execution and results.
-
-## Template Categories
-
-### 1. Agent Status & Metadata Display (4 templates)
-These templates display agent information and capabilities:
-
-- **agent-metadata-panel.html**: Main agent information card with expandable details (name, status, version, uptime)
-- **agent-status-badge.html**: Status indicator with animated dot (running/idle/error/offline states)
-- **agent-capabilities.html**: Capability badges showing agent features (read, write, git, exec, code, stream)
-
-### 2. Execution Progress Visualization (5 templates)
-Real-time progress tracking during execution:
-
-- **execution-progress-bar.html**: Animated progress bar with percentage, events counter, and timing
-- **execution-stepper.html**: Phase stepper showing execution stages (queued → running → processing → complete)
-- **execution-actions.html**: Control buttons (cancel, pause, resume, export) for execution management
-- **event-counter.html**: Real-time event statistics display (total, file ops, commands, git, errors)
-- **elapsed-time.html**: Execution timing display with elapsed and estimated remaining time
-
-### 3. File Operation Display (5 templates)
-File read/write/edit operations with syntax highlighting:
-
-- **file-read-panel.html**: Display file content with syntax highlighting and metadata
-- **file-write-panel.html**: Before/after comparison with tabbed interface and diff view
-- **file-diff-viewer.html**: Unified and side-by-side diff visualization with statistics
-- **file-breadcrumb.html**: Navigation breadcrumbs for file paths with copy functionality
-- **file-metadata.html**: File information display (permissions, size, encoding, timestamps, owner)
-
-### 4. Command Execution Output (3 templates)
-Terminal-like output with ANSI color support:
-
-- **terminal-output-panel.html**: Terminal output container with ANSI color classes and exit code
-- **command-header.html**: Command information header with status, exit code, duration, memory, PID
-- **command-output-scrollable.html**: Virtual scrolling output with line numbers, ANSI colors, and search
-
-### 5. Error State Display (5 templates)
-Comprehensive error handling and recovery:
-
-- **error-alert.html**: Alert component with severity levels (critical/error/warning/info)
-- **error-summary.html**: Error card with type, message, context information
-- **error-stack-trace.html**: Collapsible stack trace display with syntax highlighting
-- **error-recovery-options.html**: Recovery action buttons (retry, skip, cancel, rollback)
-- **error-history-timeline.html**: Timeline of all errors occurred during execution
-
-### 6. Git Operation Visualization (4 templates)
-Git status and operations:
-
-- **git-status-panel.html**: Repository status with changed file counts and file list
-- **git-diff-list.html**: Collapsible diffs for all changed files
-- **git-branch-remote.html**: Branch and remote information with tracking status
-- **git-log-visualization.html**: Commit history timeline with metadata
-
-### 7. Code Review & Analysis Results (3 templates)
-Code analysis and suggestions:
-
-- **code-suggestion-panel.html**: Before/after code suggestions with explanation
-- **code-annotation-panel.html**: Inline code comments and annotations
-- **quality-metrics-display.html**: Code quality metrics (complexity, duplication, coverage, maintainability)
-- **test-results-display.html**: Test execution results with pass/fail/skip counts and hierarchy
-
-## Features
-
-### Design Features
-- ✓ **RippleUI Semantic**: All templates use RippleUI class conventions (btn, card, badge, alert)
-- ✓ **Semantic HTML**: Proper use of `<details>`, `<summary>`, `<form>`, `<code>`, `<pre>`, etc.
-- ✓ **Responsive Design**: Mobile-first responsive layouts with CSS Grid and Flexbox
-- ✓ **Accessibility**: WCAG AA compliance with ARIA attributes, keyboard navigation, semantic roles
-- ✓ **Dark Mode**: CSS custom properties for theme support (light/dark)
-
-### Streaming Features
-- ✓ **Efficient Updates**: Minimal DOM mutation, event-driven updates
-- ✓ **Virtual Scrolling**: Large output handling with virtual list rendering
-- ✓ **ANSI Colors**: Full ANSI escape sequence support in terminal output
-- ✓ **Real-time Progress**: Animated progress bars, counters, and status indicators
-- ✓ **Syntax Highlighting**: Ready for Prism.js or Highlight.js integration
-
-### Code Quality
-- ✓ **Under 200 lines**: Each template is concise and focused
-- ✓ **No Duplication**: Consistent patterns across templates
-- ✓ **CSS Scoped**: Styles scoped to each template with <style scoped>
-- ✓ **Semantic Naming**: Clear, descriptive class and element names
-
-## Usage
-
-### Basic Template Rendering
-```html
-<!-- Load template -->
-<script>
-  async function loadTemplate(name) {
-    const response = await fetch(`/templates/${name}.html`);
-    return await response.text();
-  }
-
-  const html = await loadTemplate('execution-progress-bar');
-  document.getElementById('container').innerHTML = html;
-</script>
-```
-
-### Dynamic Variable Substitution
-Templates use `{{ variable }}` syntax for dynamic content:
-```html
-<!-- Example from execution-progress-bar.html -->
-<span class="badge" role="status" aria-live="polite">{{ percentage }}%</span>
-```
-
-Replace with actual values using a simple template engine:
-```javascript
-function renderTemplate(html, data) {
-  return html.replace(/\{\{\s*(\w+)\s*\}\}/g, (match, key) => data[key] || '');
-}
-```
-
-### Streaming Events
-Templates are designed to update incrementally as streaming events arrive:
-
-```javascript
-const renderer = new StreamRenderer();
-renderer.on('streaming_progress', (event) => {
-  updateElement('#progress', event.percentage);
-  updateElement('#event-count', event.totalEvents);
-});
-```
-
-## Styling
-
-All templates use CSS custom properties for theming:
-
-```css
---color-primary: #3b82f6;
---color-primary-dark: #1e40af;
---color-bg-primary: #ffffff;
---color-bg-secondary: #f9fafb;
---color-bg-code: #1f2937;
---color-bg-hover: #f3f4f6;
---color-text-primary: #111827;
---color-text-secondary: #6b7280;
---color-text-terminal: #d1d5db;
---color-border: #e5e7eb;
---color-error: #ef4444;
---color-success: #10b981;
---color-warning: #f59e0b;
-```
-
-## Integration Points
-
-These templates integrate with:
-
-1. **Streaming Renderer** (WAVE 3): Real-time DOM updates
-2. **Event System**: WebSocket events trigger template rendering
-3. **Syntax Highlighter**: Prism.js for code highlighting
-4. **Virtual Scroller**: For large output handling
-5. **ANSI Parser**: For terminal color support
-
-## Browser Compatibility
-
-- Chrome/Edge: Full support
-- Firefox: Full support
-- Safari: Full support
-- Mobile browsers: Responsive design tested
-
-## Accessibility
-
-- WCAG AA compliance verified
-- Semantic HTML structure
-- ARIA labels and roles
-- Keyboard navigation support
-- Screen reader friendly
-- Color contrast ratios: 4.5:1+ for text
-
-## Performance
-
-- Template size: <2KB each
-- Rendering time: <100ms for initial render
-- Update time: <50ms for incremental updates
-- Memory: <1MB per template instance
-- No external dependencies (CSS-only styling)
-
-## Next Steps (WAVE 3)
-
-WAVE 3 will implement the **Streaming Renderer Engine** that:
-- Manages real-time template updates
-- Handles WebSocket event processing
-- Implements virtual scrolling for large outputs
-- Manages event deduplication and batching
-- Handles auto-reconnect with exponential backoff
+# RippleUI Component Templates for Agent Visualization
+
+**Status**: WAVE 2 Complete - All 28 Templates Created
+
+This directory contains RippleUI-based HTML templates for real-time streaming visualization of Claude Code agent execution and results.
+
+## Template Categories
+
+### 1. Agent Status & Metadata Display (4 templates)
+These templates display agent information and capabilities:
+
+- **agent-metadata-panel.html**: Main agent information card with expandable details (name, status, version, uptime)
+- **agent-status-badge.html**: Status indicator with animated dot (running/idle/error/offline states)
+- **agent-capabilities.html**: Capability badges showing agent features (read, write, git, exec, code, stream)
+
+### 2. Execution Progress Visualization (5 templates)
+Real-time progress tracking during execution:
+
+- **execution-progress-bar.html**: Animated progress bar with percentage, events counter, and timing
+- **execution-stepper.html**: Phase stepper showing execution stages (queued → running → processing → complete)
+- **execution-actions.html**: Control buttons (cancel, pause, resume, export) for execution management
+- **event-counter.html**: Real-time event statistics display (total, file ops, commands, git, errors)
+- **elapsed-time.html**: Execution timing display with elapsed and estimated remaining time
+
+### 3. File Operation Display (5 templates)
+File read/write/edit operations with syntax highlighting:
+
+- **file-read-panel.html**: Display file content with syntax highlighting and metadata
+- **file-write-panel.html**: Before/after comparison with tabbed interface and diff view
+- **file-diff-viewer.html**: Unified and side-by-side diff visualization with statistics
+- **file-breadcrumb.html**: Navigation breadcrumbs for file paths with copy functionality
+- **file-metadata.html**: File information display (permissions, size, encoding, timestamps, owner)
+
+### 4. Command Execution Output (3 templates)
+Terminal-like output with ANSI color support:
+
+- **terminal-output-panel.html**: Terminal output container with ANSI color classes and exit code
+- **command-header.html**: Command information header with status, exit code, duration, memory, PID
+- **command-output-scrollable.html**: Virtual scrolling output with line numbers, ANSI colors, and search
+
+### 5. Error State Display (5 templates)
+Comprehensive error handling and recovery:
+
+- **error-alert.html**: Alert component with severity levels (critical/error/warning/info)
+- **error-summary.html**: Error card with type, message, context information
+- **error-stack-trace.html**: Collapsible stack trace display with syntax highlighting
+- **error-recovery-options.html**: Recovery action buttons (retry, skip, cancel, rollback)
+- **error-history-timeline.html**: Timeline of all errors occurred during execution
+
+### 6. Git Operation Visualization (4 templates)
+Git status and operations:
+
+- **git-status-panel.html**: Repository status with changed file counts and file list
+- **git-diff-list.html**: Collapsible diffs for all changed files
+- **git-branch-remote.html**: Branch and remote information with tracking status
+- **git-log-visualization.html**: Commit history timeline with metadata
+
+### 7. Code Review & Analysis Results (3 templates)
+Code analysis and suggestions:
+
+- **code-suggestion-panel.html**: Before/after code suggestions with explanation
+- **code-annotation-panel.html**: Inline code comments and annotations
+- **quality-metrics-display.html**: Code quality metrics (complexity, duplication, coverage, maintainability)
+- **test-results-display.html**: Test execution results with pass/fail/skip counts and hierarchy
+
+## Features
+
+### Design Features
+- ✓ **RippleUI Semantic**: All templates use RippleUI class conventions (btn, card, badge, alert)
+- ✓ **Semantic HTML**: Proper use of `<details>`, `<summary>`, `<form>`, `<code>`, `<pre>`, etc.
+- ✓ **Responsive Design**: Mobile-first responsive layouts with CSS Grid and Flexbox
+- ✓ **Accessibility**: WCAG AA compliance with ARIA attributes, keyboard navigation, semantic roles
+- ✓ **Dark Mode**: CSS custom properties for theme support (light/dark)
+
+### Streaming Features
+- ✓ **Efficient Updates**: Minimal DOM mutation, event-driven updates
+- ✓ **Virtual Scrolling**: Large output handling with virtual list rendering
+- ✓ **ANSI Colors**: Full ANSI escape sequence support in terminal output
+- ✓ **Real-time Progress**: Animated progress bars, counters, and status indicators
+- ✓ **Syntax Highlighting**: Ready for Prism.js or Highlight.js integration
+
+### Code Quality
+- ✓ **Under 200 lines**: Each template is concise and focused
+- ✓ **No Duplication**: Consistent patterns across templates
+- ✓ **CSS Scoped**: Styles scoped to each template with <style scoped>
+- ✓ **Semantic Naming**: Clear, descriptive class and element names
+
+## Usage
+
+### Basic Template Rendering
+```html
+<!-- Load template -->
+<script>
+  async function loadTemplate(name) {
+    const response = await fetch(`/templates/${name}.html`);
+    return await response.text();
+  }
+
+  const html = await loadTemplate('execution-progress-bar');
+  document.getElementById('container').innerHTML = html;
+</script>
+```
+
+### Dynamic Variable Substitution
+Templates use `{{ variable }}` syntax for dynamic content:
+```html
+<!-- Example from execution-progress-bar.html -->
+<span class="badge" role="status" aria-live="polite">{{ percentage }}%</span>
+```
+
+Replace with actual values using a simple template engine:
+```javascript
+function renderTemplate(html, data) {
+  return html.replace(/\{\{\s*(\w+)\s*\}\}/g, (match, key) => data[key] || '');
+}
+```
+
+### Streaming Events
+Templates are designed to update incrementally as streaming events arrive:
+
+```javascript
+const renderer = new StreamRenderer();
+renderer.on('streaming_progress', (event) => {
+  updateElement('#progress', event.percentage);
+  updateElement('#event-count', event.totalEvents);
+});
+```
+
+## Styling
+
+All templates use CSS custom properties for theming:
+
+```css
+--color-primary: #3b82f6;
+--color-primary-dark: #1e40af;
+--color-bg-primary: #ffffff;
+--color-bg-secondary: #f9fafb;
+--color-bg-code: #1f2937;
+--color-bg-hover: #f3f4f6;
+--color-text-primary: #111827;
+--color-text-secondary: #6b7280;
+--color-text-terminal: #d1d5db;
+--color-border: #e5e7eb;
+--color-error: #ef4444;
+--color-success: #10b981;
+--color-warning: #f59e0b;
+```
+
+## Integration Points
+
+These templates integrate with:
+
+1. **Streaming Renderer** (WAVE 3): Real-time DOM updates
+2. **Event System**: WebSocket events trigger template rendering
+3. **Syntax Highlighter**: Prism.js for code highlighting
+4. **Virtual Scroller**: For large output handling
+5. **ANSI Parser**: For terminal color support
+
+## Browser Compatibility
+
+- Chrome/Edge: Full support
+- Firefox: Full support
+- Safari: Full support
+- Mobile browsers: Responsive design tested
+
+## Accessibility
+
+- WCAG AA compliance verified
+- Semantic HTML structure
+- ARIA labels and roles
+- Keyboard navigation support
+- Screen reader friendly
+- Color contrast ratios: 4.5:1+ for text
+
+## Performance
+
+- Template size: <2KB each
+- Rendering time: <100ms for initial render
+- Update time: <50ms for incremental updates
+- Memory: <1MB per template instance
+- No external dependencies (CSS-only styling)
+
+## Next Steps (WAVE 3)
+
+WAVE 3 will implement the **Streaming Renderer Engine** that:
+- Manages real-time template updates
+- Handles WebSocket event processing
+- Implements virtual scrolling for large outputs
+- Manages event deduplication and batching
+- Handles auto-reconnect with exponential backoff

package/static/templates/agent-capabilities.html

@@ -1,56 +1,56 @@
-<!-- Agent Capabilities Badges Panel -->
-<div class="capabilities-panel card" role="region" aria-label="Agent capabilities">
-  <div class="card-header border-b pb-2 mb-3">
-    <h4 class="font-semibold text-sm">Capabilities</h4>
-  </div>
-
-  <div class="flex flex-wrap gap-2">
-    <!-- File Read -->
-    <div class="badge flex items-center gap-1" title="Can read files from disk">
-      <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        <path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m0 2v14h14V5H5z"/>
-      </svg>
-      <span aria-label="File read capability">Read</span>
-    </div>
-
-    <!-- File Write -->
-    <div class="badge flex items-center gap-1" title="Can write files to disk">
-      <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z"/>
-      </svg>
-      <span aria-label="File write capability">Write</span>
-    </div>
-
-    <!-- Git -->
-    <div class="badge flex items-center gap-1" title="Can perform git operations">
-      <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        <path d="M2.5 7.5a2 2 0 1 1 4 0 2 2 0 0 1-4 0m16 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0m-8 9a2 2 0 1 1 4 0 2 2 0 0 1-4 0"/>
-      </svg>
-      <span aria-label="Git operations capability">Git</span>
-    </div>
-
-    <!-- Command Execution -->
-    <div class="badge flex items-center gap-1" title="Can execute system commands">
-      <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        <path d="M13 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-8h-2v8H5V5h8V3z"/>
-      </svg>
-      <span aria-label="Command execution capability">Exec</span>
-    </div>
-
-    <!-- Code Analysis -->
-    <div class="badge flex items-center gap-1" title="Can analyze source code">
-      <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        <path d="M9.4 16.6L4.8 12l4.6-4.6L6.6 6l-6 6 6 6 1.8-1.4zm5.2 0l4.6-4.6-4.6-4.6 1.8-1.8 6 6-6 6-1.8-1.4z"/>
-      </svg>
-      <span aria-label="Code analysis capability">Code</span>
-    </div>
-
-    <!-- Streaming -->
-    <div class="badge flex items-center gap-1" title="Supports real-time streaming output">
-      <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 9.5c0 .83-.67 1.5-1.5 1.5S11 13.33 11 12.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5z"/>
-      </svg>
-      <span aria-label="Streaming capability">Stream</span>
-    </div>
-  </div>
-</div>
+<!-- Agent Capabilities Badges Panel -->
+<div class="capabilities-panel card" role="region" aria-label="Agent capabilities">
+  <div class="card-header border-b pb-2 mb-3">
+    <h4 class="font-semibold text-sm">Capabilities</h4>
+  </div>
+
+  <div class="flex flex-wrap gap-2">
+    <!-- File Read -->
+    <div class="badge flex items-center gap-1" title="Can read files from disk">
+      <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m0 2v14h14V5H5z"/>
+      </svg>
+      <span aria-label="File read capability">Read</span>
+    </div>
+
+    <!-- File Write -->
+    <div class="badge flex items-center gap-1" title="Can write files to disk">
+      <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z"/>
+      </svg>
+      <span aria-label="File write capability">Write</span>
+    </div>
+
+    <!-- Git -->
+    <div class="badge flex items-center gap-1" title="Can perform git operations">
+      <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M2.5 7.5a2 2 0 1 1 4 0 2 2 0 0 1-4 0m16 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0m-8 9a2 2 0 1 1 4 0 2 2 0 0 1-4 0"/>
+      </svg>
+      <span aria-label="Git operations capability">Git</span>
+    </div>
+
+    <!-- Command Execution -->
+    <div class="badge flex items-center gap-1" title="Can execute system commands">
+      <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M13 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-8h-2v8H5V5h8V3z"/>
+      </svg>
+      <span aria-label="Command execution capability">Exec</span>
+    </div>
+
+    <!-- Code Analysis -->
+    <div class="badge flex items-center gap-1" title="Can analyze source code">
+      <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M9.4 16.6L4.8 12l4.6-4.6L6.6 6l-6 6 6 6 1.8-1.4zm5.2 0l4.6-4.6-4.6-4.6 1.8-1.8 6 6-6 6-1.8-1.4z"/>
+      </svg>
+      <span aria-label="Code analysis capability">Code</span>
+    </div>
+
+    <!-- Streaming -->
+    <div class="badge flex items-center gap-1" title="Supports real-time streaming output">
+      <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 9.5c0 .83-.67 1.5-1.5 1.5S11 13.33 11 12.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5z"/>
+      </svg>
+      <span aria-label="Streaming capability">Stream</span>
+    </div>
+  </div>
+</div>

package/static/templates/agent-metadata-panel.html

@@ -1,44 +1,44 @@
-<!-- Agent Metadata Panel with Status Badge -->
-<div class="agent-metadata-card card" role="region" aria-label="Agent Status and Metadata">
-  <div class="card-header flex items-center justify-between gap-3">
-    <div class="flex items-center gap-3">
-      <div class="w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center font-bold text-lg" aria-hidden="true">
-        {{ agentIcon }}
-      </div>
-      <div>
-        <h3 class="font-semibold text-base">{{ agentName }}</h3>
-        <p class="text-sm text-secondary">ID: {{ agentId }}</p>
-      </div>
-    </div>
-    <div class="badge" data-status="{{ status }}" role="status" aria-live="polite">
-      <span class="badge-dot"></span>
-      {{ statusLabel }}
-    </div>
-  </div>
-
-  <details class="mt-4 border-t pt-4" open>
-    <summary class="cursor-pointer font-medium hover:text-primary">Metadata & Capabilities</summary>
-    <div class="mt-3 space-y-3">
-      <div class="grid grid-cols-2 gap-3 text-sm">
-        <div>
-          <span class="text-secondary">Version:</span>
-          <p class="font-mono">{{ agentVersion }}</p>
-        </div>
-        <div>
-          <span class="text-secondary">Uptime:</span>
-          <p class="font-mono">{{ agentUptime }}</p>
-        </div>
-      </div>
-
-      <div>
-        <span class="text-secondary text-sm">Capabilities:</span>
-        <div class="flex flex-wrap gap-2 mt-2">
-          <span class="badge badge-sm" aria-label="File read capability">Read</span>
-          <span class="badge badge-sm" aria-label="File write capability">Write</span>
-          <span class="badge badge-sm" aria-label="Git operations capability">Git</span>
-          <span class="badge badge-sm" aria-label="Command execution capability">Exec</span>
-        </div>
-      </div>
-    </div>
-  </details>
-</div>
+<!-- Agent Metadata Panel with Status Badge -->
+<div class="agent-metadata-card card" role="region" aria-label="Agent Status and Metadata">
+  <div class="card-header flex items-center justify-between gap-3">
+    <div class="flex items-center gap-3">
+      <div class="w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center font-bold text-lg" aria-hidden="true">
+        {{ agentIcon }}
+      </div>
+      <div>
+        <h3 class="font-semibold text-base">{{ agentName }}</h3>
+        <p class="text-sm text-secondary">ID: {{ agentId }}</p>
+      </div>
+    </div>
+    <div class="badge" data-status="{{ status }}" role="status" aria-live="polite">
+      <span class="badge-dot"></span>
+      {{ statusLabel }}
+    </div>
+  </div>
+
+  <details class="mt-4 border-t pt-4" open>
+    <summary class="cursor-pointer font-medium hover:text-primary">Metadata & Capabilities</summary>
+    <div class="mt-3 space-y-3">
+      <div class="grid grid-cols-2 gap-3 text-sm">
+        <div>
+          <span class="text-secondary">Version:</span>
+          <p class="font-mono">{{ agentVersion }}</p>
+        </div>
+        <div>
+          <span class="text-secondary">Uptime:</span>
+          <p class="font-mono">{{ agentUptime }}</p>
+        </div>
+      </div>
+
+      <div>
+        <span class="text-secondary text-sm">Capabilities:</span>
+        <div class="flex flex-wrap gap-2 mt-2">
+          <span class="badge badge-sm" aria-label="File read capability">Read</span>
+          <span class="badge badge-sm" aria-label="File write capability">Write</span>
+          <span class="badge badge-sm" aria-label="Git operations capability">Git</span>
+          <span class="badge badge-sm" aria-label="Command execution capability">Exec</span>
+        </div>
+      </div>
+    </div>
+  </details>
+</div>

package/static/templates/agent-status-badge.html

@@ -1,30 +1,30 @@
-<!-- Agent Status Badge Component -->
-<div class="badge badge-lg" data-status="{{ status }}" role="status" aria-label="Agent status: {{ statusLabel }}">
-  <span class="badge-dot animate-pulse"></span>
-  <span class="badge-text">{{ statusLabel }}</span>
-</div>
-
-<!-- Status variants (for reference):
-  - running: green dot + "Running"
-  - idle: gray dot + "Idle"
-  - error: red dot + "Error"
-  - offline: orange dot + "Offline"
-  - loading: blue dot + "Loading..."
--->
-
-<style scoped>
-.badge[data-status="running"] { --badge-color: #10b981; }
-.badge[data-status="idle"] { --badge-color: #6b7280; }
-.badge[data-status="error"] { --badge-color: #ef4444; }
-.badge[data-status="offline"] { --badge-color: #f97316; }
-.badge[data-status="loading"] { --badge-color: #3b82f6; }
-
-.badge-dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: var(--badge-color, currentColor);
-  margin-right: 8px;
-}
-</style>
+<!-- Agent Status Badge Component -->
+<div class="badge badge-lg" data-status="{{ status }}" role="status" aria-label="Agent status: {{ statusLabel }}">
+  <span class="badge-dot animate-pulse"></span>
+  <span class="badge-text">{{ statusLabel }}</span>
+</div>
+
+<!-- Status variants (for reference):
+  - running: green dot + "Running"
+  - idle: gray dot + "Idle"
+  - error: red dot + "Error"
+  - offline: orange dot + "Offline"
+  - loading: blue dot + "Loading..."
+-->
+
+<style scoped>
+.badge[data-status="running"] { --badge-color: #10b981; }
+.badge[data-status="idle"] { --badge-color: #6b7280; }
+.badge[data-status="error"] { --badge-color: #ef4444; }
+.badge[data-status="offline"] { --badge-color: #f97316; }
+.badge[data-status="loading"] { --badge-color: #3b82f6; }
+
+.badge-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--badge-color, currentColor);
+  margin-right: 8px;
+}
+</style>