agentgui 1.0.689 → 1.0.691

package/static/templates/agent-capabilities.html

@@ -1,56 +0,0 @@
-<!-- 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 +0,0 @@
-<!-- Agent Metadata Panel with Status Badge -->
-<div class="agent-metadata-card card" role="region" aria-label="Agent Status and Metadata">
-  <div class="card-header gap-3">
-    <div class="flex items-center gap-3">
-      <div class="avatar avatar-ring avatar-square bg-primary text-white" 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 +0,0 @@
-<!-- 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

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

@@ -1,184 +0,0 @@
-<!-- Code Suggestion Panel with Before/After -->
-<div class="code-suggestion-panel card" role="region" aria-label="Code suggestion">
-  <div class="card-header 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

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

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