agentgui 1.0.67 → 1.0.69

package/static/templates/agent-capabilities.html

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +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>

package/static/templates/code-annotation-panel.html

@@ -0,0 +1,155 @@
+<!-- Code Annotation Display with Inline Comments -->
+<div class="code-annotation-panel card" role="region" aria-label="Code annotations">
+  <div class="card-header border-b pb-3 mb-3">
+    <h4 class="font-semibold">{{ annotationCount }} Annotations</h4>
+  </div>
+
+  <!-- Annotated Code -->
+  <div class="annotated-code" role="region" aria-label="Code with inline annotations">
+    {{ for line in codeLines }}
+    <div class="code-line" data-line-number="{{ line.number }}">
+      <span class="line-number" aria-hidden="true">{{ line.number }}</span>
+      <code class="line-content">{{ line.content }}</code>
+
+      <!-- Annotation Indicator -->
+      {{ if line.annotation }}
+      <button class="annotation-indicator" data-annotation-id="{{ line.annotation.id }}" aria-label="Show annotation">
+        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+          <path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
+        </svg>
+      </button>
+      {{ end }}
+    </div>
+
+    <!-- Annotation Details -->
+    {{ if line.annotation }}
+    <div class="annotation-detail" data-annotation-id="{{ line.annotation.id }}">
+      <div class="annotation-content">
+        <div class="annotation-header">
+          <span class="annotation-type badge">{{ line.annotation.type }}</span>
+          <span class="annotation-author text-xs text-secondary">{{ line.annotation.author }}</span>
+        </div>
+        <p class="annotation-text text-sm mt-1">{{ line.annotation.comment }}</p>
+        <div class="annotation-actions flex gap-1 mt-2">
+          <button class="btn-micro" data-action="resolve">Resolve</button>
+          <button class="btn-micro" data-action="reply">Reply</button>
+        </div>
+      </div>
+    </div>
+    {{ end }}
+    {{ end }}
+  </div>
+</div>
+
+<style scoped>
+.code-annotation-panel {
+  padding: 16px;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.annotated-code {
+  background-color: var(--color-bg-code);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.code-line {
+  display: flex;
+  gap: 12px;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--color-border);
+  position: relative;
+  align-items: center;
+  background-color: var(--color-bg-primary);
+  transition: background-color 0.2s;
+}
+
+.code-line:hover {
+  background-color: var(--color-bg-hover);
+}
+
+.code-line[data-has-annotation] {
+  background-color: rgba(59, 130, 246, 0.05);
+}
+
+.line-number {
+  color: var(--color-text-secondary);
+  text-align: right;
+  min-width: 40px;
+  user-select: none;
+  flex-shrink: 0;
+  font-size: 11px;
+}
+
+.line-content {
+  color: var(--color-text-terminal);
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 12px;
+  flex: 1;
+  white-space: pre-wrap;
+}
+
+.annotation-indicator {
+  background: none;
+  border: none;
+  color: var(--color-primary);
+  cursor: pointer;
+  padding: 2px;
+  border-radius: 3px;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+
+.annotation-indicator:hover {
+  background-color: var(--color-primary-alpha);
+}
+
+.annotation-detail {
+  padding: 8px 12px;
+  background-color: rgba(59, 130, 246, 0.08);
+  border-left: 3px solid var(--color-primary);
+  border-top: 1px solid var(--color-border);
+}
+
+.annotation-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.badge {
+  background-color: var(--color-primary);
+  color: white;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.annotation-text {
+  color: var(--color-text-primary);
+  line-height: 1.5;
+}
+
+.annotation-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.btn-micro {
+  background: none;
+  border: 1px solid var(--color-primary);
+  color: var(--color-primary);
+  padding: 2px 6px;
+  border-radius: 2px;
+  font-size: 10px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-micro:hover {
+  background-color: var(--color-primary-alpha);
+}
+</style>

package/static/templates/code-suggestion-panel.html

@@ -0,0 +1,184 @@
+<!-- Code Suggestion Panel with Before/After -->
+<div class="code-suggestion-panel card" role="region" aria-label="Code suggestion">
+  <div class="card-header flex items-start justify-between mb-3 pb-3 border-b">
+    <div class="flex-1">
+      <h4 class="font-semibold">{{ suggestionTitle }}</h4>
+      <p class="text-xs text-secondary mt-1">In {{ fileName }} at line {{ lineNumber }}</p>
+    </div>
+    <div class="badge" data-severity="{{ severity }}">
+      {{ severityLabel }}
+    </div>
+  </div>
+
+  <!-- Description -->
+  <div class="mb-3 pb-3 border-b">
+    <p class="text-sm">{{ suggestionDescription }}</p>
+  </div>
+
+  <!-- Before/After Code Tabs -->
+  <div class="tabs mb-3" role="tablist">
+    <button class="tab-button active" data-tab="before" role="tab" aria-selected="true">
+      Before
+    </button>
+    <button class="tab-button" data-tab="after" role="tab" aria-selected="false">
+      After
+    </button>
+    <button class="tab-button" data-tab="explanation" role="tab" aria-selected="false">
+      Why?
+    </button>
+  </div>
+
+  <!-- Before Code -->
+  <div class="tab-panel active" data-tab="before">
+    <pre class="code-block"><code class="language-{{ language }}">{{ codeBeforeHighlighted }}</code></pre>
+  </div>
+
+  <!-- After Code -->
+  <div class="tab-panel hidden" data-tab="after">
+    <pre class="code-block"><code class="language-{{ language }}">{{ codeAfterHighlighted }}</code></pre>
+  </div>
+
+  <!-- Explanation -->
+  <div class="tab-panel hidden" data-tab="explanation">
+    <div class="explanation-content text-sm space-y-2">
+      <p>{{ explanationText }}</p>
+      {{ if benefitsText }}
+      <div class="bg-green-50 p-2 rounded text-xs">
+        <strong>Benefits:</strong> {{ benefitsText }}
+      </div>
+      {{ end }}
+    </div>
+  </div>
+
+  <!-- Actions -->
+  <div class="flex gap-2 mt-3 pt-3 border-t">
+    <button class="btn btn-sm btn-primary" data-action="apply" aria-label="Apply suggestion">
+      Apply
+    </button>
+    <button class="btn btn-sm btn-secondary" data-action="skip" aria-label="Skip suggestion">
+      Skip
+    </button>
+    <button class="btn btn-sm btn-secondary" data-action="dismiss" aria-label="Dismiss suggestion">
+      Dismiss
+    </button>
+  </div>
+</div>
+
+<style scoped>
+.code-suggestion-panel {
+  padding: 16px;
+}
+
+.tabs {
+  display: flex;
+  gap: 8px;
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: 16px;
+}
+
+.tab-button {
+  padding: 8px 12px;
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s;
+}
+
+.tab-button.active {
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
+}
+
+.tab-panel {
+  display: none;
+}
+
+.tab-panel.active {
+  display: block;
+}
+
+.code-block {
+  background-color: var(--color-bg-code);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  padding: 12px;
+  font-size: 12px;
+  line-height: 1.5;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  overflow-x: auto;
+  margin: 0;
+}
+
+.badge {
+  padding: 4px 8px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.badge[data-severity="critical"] {
+  background-color: #dc2626;
+  color: white;
+}
+
+.badge[data-severity="high"] {
+  background-color: #ea580c;
+  color: white;
+}
+
+.badge[data-severity="medium"] {
+  background-color: #f59e0b;
+  color: white;
+}
+
+.badge[data-severity="low"] {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.explanation-content {
+  padding: 8px;
+  background-color: var(--color-bg-secondary);
+  border-radius: 3px;
+}
+
+.btn {
+  padding: 6px 10px;
+  border-radius: 3px;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+}
+
+.btn-sm {
+  padding: 4px 8px;
+  font-size: 11px;
+}
+
+.btn-primary {
+  background-color: var(--color-primary);
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: var(--color-primary-dark);
+}
+
+.btn-secondary {
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+}
+
+.btn-secondary:hover {
+  background-color: var(--color-bg-hover);
+}
+
+.hidden {
+  display: none;
+}
+</style>

package/static/templates/command-header.html

@@ -0,0 +1,77 @@
+<!-- Command Execution Header -->
+<div class="command-header" role="region" aria-label="Command information">
+  <div class="flex items-start justify-between gap-3 mb-3">
+    <!-- Command Info -->
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center gap-2 mb-2">
+        <svg class="w-4 h-4 text-primary flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+          <path d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"/>
+        </svg>
+        <h4 class="font-semibold truncate">{{ commandName }}</h4>
+      </div>
+      <code class="text-xs font-mono text-secondary truncate block" title="{{ fullCommand }}">
+        $ {{ fullCommand }}
+      </code>
+    </div>
+
+    <!-- Status Badge -->
+    <div class="flex-shrink-0">
+      <div class="badge badge-lg" data-status="{{ status }}" role="status" aria-label="Command status: {{ statusLabel }}">
+        <span class="badge-dot"></span>
+        {{ statusLabel }}
+      </div>
+    </div>
+  </div>
+
+  <!-- Details Row -->
+  <div class="grid grid-cols-4 gap-3 text-sm">
+    <div class="border-r pr-3">
+      <span class="text-secondary">Exit Code</span>
+      <p class="font-mono font-semibold" data-exit-code="{{ exitCode }}">{{ exitCode }}</p>
+    </div>
+    <div class="border-r pr-3">
+      <span class="text-secondary">Duration</span>
+      <p class="font-mono font-semibold">{{ duration }}</p>
+    </div>
+    <div class="border-r pr-3">
+      <span class="text-secondary">Memory</span>
+      <p class="font-mono font-semibold">{{ memoryUsed }}</p>
+    </div>
+    <div>
+      <span class="text-secondary">PID</span>
+      <p class="font-mono font-semibold">{{ pid }}</p>
+    </div>
+  </div>
+</div>
+
+<style scoped>
+.command-header {
+  padding: 12px;
+  background: var(--color-bg-secondary);
+  border-radius: 4px;
+  border-left: 3px solid var(--color-primary);
+}
+
+.badge-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: currentColor;
+  margin-right: 6px;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+[data-exit-code="0"] {
+  color: #10b981;
+}
+
+[data-exit-code]:not([data-exit-code="0"]) {
+  color: #ef4444;
+}
+</style>

package/static/templates/command-output-scrollable.html

@@ -0,0 +1,118 @@
+<!-- Scrollable Command Output with Virtual Rendering -->
+<div class="command-output-scrollable" role="region" aria-label="Scrollable command output" aria-live="polite">
+  <!-- Virtual Scroll Container -->
+  <div class="scroll-viewport" data-total-lines="{{ totalLines }}" data-visible-lines="20">
+    <div class="scroll-content" role="list">
+      <!-- Lines rendered dynamically by JavaScript -->
+      {{ for line in visibleLines }}
+      <div class="output-line" data-line-number="{{ lineNumber }}" role="listitem">
+        <span class="line-number" aria-hidden="true">{{ lineNumber }}</span>
+        <code class="line-content ansi-colored" data-has-stderr="{{ hasStderr }}">{{ line }}</code>
+      </div>
+      {{ end }}
+    </div>
+
+    <!-- Scrollbar -->
+    <div class="scroll-thumb" role="scrollbar" aria-orientation="vertical"></div>
+  </div>
+
+  <!-- Search Bar -->
+  <div class="output-search mt-3 pt-3 border-t">
+    <input type="text"
+           class="search-input"
+           placeholder="Search output..."
+           aria-label="Search in command output"
+           data-search-index="true" />
+    <div class="search-results text-xs text-secondary mt-1" aria-live="polite">
+      {{ matchCount }} matches
+    </div>
+  </div>
+</div>
+
+<style scoped>
+.command-output-scrollable {
+  background: var(--color-bg-terminal);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  overflow: hidden;
+  max-height: 500px;
+  display: flex;
+  flex-direction: column;
+}
+
+.scroll-viewport {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: auto;
+  position: relative;
+  background-color: var(--color-bg-code);
+  font-size: 12px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  line-height: 1.5;
+}
+
+.scroll-content {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 8px;
+}
+
+.output-line {
+  display: flex;
+  gap: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  padding: 0 4px;
+}
+
+.line-number {
+  color: var(--color-text-secondary);
+  text-align: right;
+  min-width: 40px;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.line-content {
+  color: var(--color-text-terminal);
+  flex: 1;
+}
+
+.line-content[data-has-stderr="true"] {
+  color: var(--color-error);
+}
+
+.scroll-thumb {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 8px;
+  height: 100%;
+  background-color: var(--color-scrollbar);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.output-search {
+  padding: 8px;
+  border-top: 1px solid var(--color-border);
+  background: var(--color-bg-secondary);
+}
+
+.search-input {
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
+  font-size: 12px;
+  font-family: inherit;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-primary-alpha);
+}
+</style>