agentgui 1.0.67 → 1.0.68

package/static/templates/elapsed-time.html

@@ -0,0 +1,54 @@
+<!-- Execution Time Display with Elapsed and Estimated Remaining -->
+<div class="time-display card" role="region" aria-label="Execution timing">
+  <div class="grid grid-cols-2 gap-4">
+    <!-- Elapsed Time -->
+    <div class="text-center">
+      <p class="text-sm text-secondary mb-2">Elapsed Time</p>
+      <div class="time-value font-mono">
+        <span data-unit="hours">{{ hours }}</span>:<span data-unit="minutes">{{ minutes }}</span>:<span data-unit="seconds">{{ seconds }}</span>
+      </div>
+      <p class="text-xs text-secondary mt-1">from start</p>
+    </div>
+
+    <!-- Estimated Remaining -->
+    <div class="text-center border-l pl-4">
+      <p class="text-sm text-secondary mb-2">Est. Remaining</p>
+      <div class="time-value font-mono" data-estimated="true">
+        <span data-unit="hours">{{ remHours }}</span>:<span data-unit="minutes">{{ remMinutes }}</span>:<span data-unit="seconds">{{ remSeconds }}</span>
+      </div>
+      <p class="text-xs text-secondary mt-1">estimated to complete</p>
+    </div>
+  </div>
+
+  <!-- Timeline Bar -->
+  <div class="mt-4 pt-4 border-t">
+    <div class="flex items-center gap-2 text-xs">
+      <span class="text-secondary">0%</span>
+      <div class="flex-1 h-1 bg-primary rounded-full" style="width: {{ progressPercent }}%;"></div>
+      <span class="text-secondary">100%</span>
+    </div>
+  </div>
+</div>
+
+<style scoped>
+.time-display {
+  padding: 16px;
+}
+
+.time-value {
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  color: var(--color-primary);
+}
+
+.time-value[data-estimated="true"] {
+  color: var(--color-secondary);
+}
+
+[data-unit] {
+  min-width: 32px;
+  text-align: center;
+  display: inline-block;
+}
+</style>

package/static/templates/error-alert.html

@@ -0,0 +1,106 @@
+<!-- Error Alert Component with Severity Levels -->
+<div class="error-alert alert" data-severity="{{ severity }}" role="alert" aria-live="assertive">
+  <!-- Icon -->
+  <div class="alert-icon" aria-hidden="true">
+    {{ if severity == 'critical' }}
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"/>
+    </svg>
+    {{ else if severity == 'error' }}
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"/>
+    </svg>
+    {{ else if severity == 'warning' }}
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92z"/>
+    </svg>
+    {{ else }}
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fill-rule="evenodd" d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2z"/>
+    </svg>
+    {{ end }}
+  </div>
+
+  <!-- Content -->
+  <div class="alert-content flex-1">
+    <h5 class="alert-title">{{ errorTitle }}</h5>
+    <p class="alert-message">{{ errorMessage }}</p>
+  </div>
+
+  <!-- Close Button -->
+  <button class="alert-close" data-action="dismiss" aria-label="Dismiss error">
+    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/>
+    </svg>
+  </button>
+</div>
+
+<style scoped>
+.error-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 16px;
+  border-radius: 4px;
+  border-left: 4px solid;
+}
+
+.error-alert[data-severity="critical"] {
+  background-color: #fee2e2;
+  border-left-color: #dc2626;
+  color: #7f1d1d;
+}
+
+.error-alert[data-severity="error"] {
+  background-color: #fee2e2;
+  border-left-color: #ef4444;
+  color: #7f1d1d;
+}
+
+.error-alert[data-severity="warning"] {
+  background-color: #fef3c7;
+  border-left-color: #f59e0b;
+  color: #78350f;
+}
+
+.error-alert[data-severity="info"] {
+  background-color: #dbeafe;
+  border-left-color: #3b82f6;
+  color: #1e3a8a;
+}
+
+.alert-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.alert-content {
+  flex: 1;
+}
+
+.alert-title {
+  font-weight: 600;
+  margin: 0 0 4px 0;
+}
+
+.alert-message {
+  margin: 0;
+  font-size: 13px;
+  opacity: 0.95;
+}
+
+.alert-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  opacity: 0.6;
+  transition: opacity 0.2s;
+  flex-shrink: 0;
+}
+
+.alert-close:hover {
+  opacity: 1;
+}
+</style>

package/static/templates/error-history-timeline.html

@@ -0,0 +1,160 @@
+<!-- Error History Timeline -->
+<div class="error-history-timeline card" role="region" aria-label="Error history timeline">
+  <div class="card-header border-b pb-3 mb-3">
+    <h4 class="font-semibold text-sm">Error History</h4>
+    <p class="text-xs text-secondary mt-1">{{ totalErrors }} errors occurred</p>
+  </div>
+
+  <!-- Timeline -->
+  <div class="timeline" role="list">
+    {{ for error in errorHistory }}
+    <div class="timeline-item" data-severity="{{ error.severity }}" role="listitem">
+      <!-- Timeline Dot -->
+      <div class="timeline-dot" aria-hidden="true"></div>
+
+      <!-- Error Card -->
+      <div class="timeline-content">
+        <div class="flex items-start justify-between gap-2">
+          <div>
+            <h5 class="font-semibold text-sm">{{ error.type }}</h5>
+            <p class="text-xs text-secondary">{{ error.time }} ({{ error.relativeTime }})</p>
+          </div>
+          <span class="badge badge-sm" data-severity="{{ error.severity }}">
+            {{ error.severityLabel }}
+          </span>
+        </div>
+
+        <p class="text-sm mt-2">{{ error.message }}</p>
+
+        {{ if error.recovery }}
+        <p class="text-xs text-green-600 mt-2">
+          <svg class="w-3 h-3 inline mr-1" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
+          </svg>
+          Recovered: {{ error.recovery }}
+        </p>
+        {{ end }}
+      </div>
+    </div>
+    {{ end }}
+  </div>
+
+  <!-- Clear History Button -->
+  <div class="mt-3 pt-3 border-t">
+    <button class="btn btn-sm btn-tertiary" data-action="clear-history" aria-label="Clear error history">
+      Clear History
+    </button>
+  </div>
+</div>
+
+<style scoped>
+.error-history-timeline {
+  padding: 16px;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+.timeline::before {
+  content: '';
+  position: absolute;
+  left: 11px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--color-border);
+}
+
+.timeline-item {
+  position: relative;
+  padding-left: 32px;
+  padding-bottom: 16px;
+}
+
+.timeline-item:last-child {
+  padding-bottom: 0;
+}
+
+.timeline-dot {
+  position: absolute;
+  left: 0;
+  top: 2px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--color-bg-primary);
+  border: 3px solid var(--color-border);
+}
+
+.timeline-item[data-severity="critical"] .timeline-dot,
+.timeline-item[data-severity="error"] .timeline-dot {
+  border-color: var(--color-error);
+  background-color: #fee2e2;
+}
+
+.timeline-item[data-severity="warning"] .timeline-dot {
+  border-color: var(--color-warning);
+  background-color: #fef3c7;
+}
+
+.timeline-item[data-severity="info"] .timeline-dot {
+  border-color: var(--color-primary);
+  background-color: #dbeafe;
+}
+
+.timeline-content {
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  padding: 10px;
+}
+
+.badge-sm {
+  padding: 2px 6px;
+  font-size: 10px;
+}
+
+.badge[data-severity="error"] {
+  background-color: #ef4444;
+  color: white;
+}
+
+.badge[data-severity="critical"] {
+  background-color: #dc2626;
+  color: white;
+}
+
+.badge[data-severity="warning"] {
+  background-color: #f59e0b;
+  color: white;
+}
+
+.badge[data-severity="info"] {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.btn-tertiary {
+  padding: 6px 10px;
+  font-size: 12px;
+  background: none;
+  border: 1px solid var(--color-primary);
+  color: var(--color-primary);
+  cursor: pointer;
+  border-radius: 3px;
+  transition: all 0.2s;
+}
+
+.btn-tertiary:hover {
+  background-color: var(--color-primary-alpha);
+}
+</style>

package/static/templates/error-recovery-options.html

@@ -0,0 +1,109 @@
+<!-- Error Recovery Options Panel -->
+<div class="error-recovery card" role="region" aria-label="Error recovery options">
+  <div class="card-header border-b pb-3 mb-3">
+    <h4 class="font-semibold text-sm">Recovery Options</h4>
+  </div>
+
+  <!-- Recovery Actions -->
+  <div class="recovery-actions space-y-2">
+    <!-- Retry Button -->
+    <button class="recovery-action-btn" data-action="retry" aria-label="Retry the failed operation">
+      <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+        <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7 7 0 0110.956 1.745l1.414-1.414A9 9 0 006.001 2H4a1 1 0 01-1-1zm12 12a1 1 0 100 2h2.101a7 7 0 01-10.956 1.745l-1.414 1.414A9 9 0 0018 18h2a1 1 0 001-1v-2.101a7 7 0 00-1.745-10.956l1.414-1.414A9 9 0 0120 14.001V16a1 1 0 01-1 1h-2z"/>
+      </svg>
+      <span>Retry</span>
+    </button>
+
+    <!-- Skip Button -->
+    <button class="recovery-action-btn" data-action="skip" aria-label="Skip this operation and continue">
+      <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
+      </svg>
+      <span>Skip</span>
+    </button>
+
+    <!-- Cancel Button -->
+    <button class="recovery-action-btn danger" data-action="cancel" aria-label="Cancel execution">
+      <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/>
+      </svg>
+      <span>Cancel</span>
+    </button>
+
+    <!-- Rollback Button -->
+    <button class="recovery-action-btn" data-action="rollback" aria-label="Rollback to previous state">
+      <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+        <path fill-rule="evenodd" d="M2 5a2 2 0 012-2 1 1 0 010-2C3.169.222 5.427-.034 7.168 1.025c.47.26.913.642 1.282 1.114A1 1 0 0109 2v1a1 1 0 001-1v-1a1 1 0 011-1h1a1 1 0 011 1v1a2 2 0 01-2 2h-1a1 1 0 010-2h1V5a1 1 0 01-1 1v1a1 1 0 01-1-1V5H9a1 1 0 01-1-1V3H7v1a1 1 0 001 1h1v1a1 1 0 001 1h1v1a1 1 0 01-1 1h-1a2 2 0 01-1-2v-1a1 1 0 01-2 0V5a1 1 0 01-1-1V3a1 1 0 01-1-1v-2zm0 10a1 1 0 110 2 1 1 0 110-2zm14 0a1 1 0 110 2 1 1 0 110-2zM4 8a1 1 0 110 2 1 1 0 110-2zm10 0a1 1 0 110 2 1 1 0 110-2z"/>
+      </svg>
+      <span>Rollback</span>
+    </button>
+  </div>
+
+  <!-- Recovery Info -->
+  <div class="recovery-info text-xs text-secondary mt-3 pt-3 border-t space-y-1">
+    <p><strong>Error ID:</strong> <code class="font-mono">{{ errorId }}</code></p>
+    <p><strong>Last Checkpoint:</strong> {{ checkpointTime }}</p>
+    {{ if suggestedAction }}
+    <p><strong>Suggestion:</strong> {{ suggestedAction }}</p>
+    {{ end }}
+  </div>
+</div>
+
+<style scoped>
+.error-recovery {
+  padding: 16px;
+  background: var(--color-bg-primary);
+}
+
+.recovery-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.recovery-action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background-color: var(--color-primary);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.recovery-action-btn:hover {
+  background-color: var(--color-primary-dark);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.recovery-action-btn:active {
+  transform: translateY(0);
+}
+
+.recovery-action-btn.danger {
+  background-color: var(--color-error);
+}
+
+.recovery-action-btn.danger:hover {
+  background-color: var(--color-error-dark);
+}
+
+.recovery-info {
+  padding: 8px;
+  background-color: var(--color-bg-secondary);
+  border-radius: 3px;
+}
+
+.font-mono {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  background-color: var(--color-bg-code);
+  padding: 1px 3px;
+  border-radius: 2px;
+}
+</style>

package/static/templates/error-stack-trace.html

@@ -0,0 +1,95 @@
+<!-- Error Stack Trace Display (Collapsible) -->
+<div class="error-stack-trace">
+  <details class="stack-trace-accordion card">
+    <summary class="cursor-pointer font-semibold py-3 px-4 border-b flex items-center gap-2 hover:bg-hover-bg">
+      <svg class="w-4 h-4 chevron" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
+      </svg>
+      <span>Stack Trace</span>
+      <span class="text-secondary text-sm">{{ frameCount }} frames</span>
+    </summary>
+
+    <div class="stack-content p-4">
+      <ol class="space-y-3" role="list">
+        {{ for frame in stackFrames }}
+        <li role="listitem" class="stack-frame">
+          <div class="stack-frame-header">
+            <code class="font-mono font-semibold">{{ frame.function }}</code>
+            <span class="text-secondary text-xs">at {{ frame.file }}:{{ frame.line }}:{{ frame.column }}</span>
+          </div>
+          <pre class="stack-frame-code"><code class="language-{{ frame.language }}">{{ frame.sourceCode }}</code></pre>
+        </li>
+        {{ end }}
+      </ol>
+    </div>
+  </details>
+</div>
+
+<style scoped>
+.error-stack-trace {
+  margin-top: 12px;
+}
+
+.stack-trace-accordion {
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.stack-trace-accordion[open] summary {
+  background-color: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--color-border);
+}
+
+summary {
+  list-style: none;
+}
+
+summary::-webkit-details-marker {
+  display: none;
+}
+
+.chevron {
+  transition: transform 0.2s;
+}
+
+details[open] .chevron {
+  transform: rotate(180deg);
+}
+
+.stack-content {
+  background-color: var(--color-bg-code);
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.stack-frame {
+  border-left: 3px solid var(--color-border);
+  padding-left: 12px;
+  margin-left: 0;
+}
+
+.stack-frame-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 6px;
+  flex-wrap: wrap;
+}
+
+.stack-frame-code {
+  background-color: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
+  padding: 8px;
+  font-size: 11px;
+  line-height: 1.5;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  margin: 0;
+  overflow-x: auto;
+}
+
+.font-mono {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+</style>

package/static/templates/error-summary.html

@@ -0,0 +1,80 @@
+<!-- Error Summary Card -->
+<div class="error-summary card" role="region" aria-label="Error summary">
+  <div class="card-header flex items-start justify-between mb-3 pb-3 border-b">
+    <div class="flex-1">
+      <h4 class="font-semibold">Error: {{ errorType }}</h4>
+      <p class="text-sm text-secondary mt-1">{{ errorCode }}</p>
+    </div>
+    <div class="badge" data-severity="{{ severity }}">
+      {{ severityLabel }}
+    </div>
+  </div>
+
+  <!-- Error Message -->
+  <div class="error-message mb-3 pb-3 border-b">
+    <p class="text-sm">{{ errorMessage }}</p>
+  </div>
+
+  <!-- Error Context (if available) -->
+  {{ if errorContext }}
+  <div class="error-context mb-3 pb-3 border-b">
+    <h5 class="text-xs font-semibold text-secondary mb-2">Context</h5>
+    <div class="text-xs space-y-1">
+      <p><span class="text-secondary">File:</span> <code class="font-mono">{{ contextFile }}</code></p>
+      <p><span class="text-secondary">Line:</span> <code class="font-mono">{{ contextLine }}</code></p>
+      <p><span class="text-secondary">Column:</span> <code class="font-mono">{{ contextColumn }}</code></p>
+    </div>
+  </div>
+  {{ end }}
+
+  <!-- Timestamps -->
+  <div class="text-xs text-secondary">
+    <p>Occurred at {{ timestamp }} ({{ relativeTime }})</p>
+  </div>
+</div>
+
+<style scoped>
+.error-summary {
+  padding: 16px;
+  background: var(--color-bg-primary);
+  border-left: 4px solid var(--color-error);
+}
+
+.error-message {
+  line-height: 1.6;
+  color: var(--color-text-primary);
+}
+
+.error-context {
+  background-color: var(--color-bg-secondary);
+  padding: 8px;
+  border-radius: 3px;
+}
+
+.font-mono {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  background-color: var(--color-bg-code);
+  padding: 1px 3px;
+  border-radius: 2px;
+}
+
+.badge[data-severity="critical"] {
+  background-color: #dc2626;
+  color: white;
+}
+
+.badge[data-severity="error"] {
+  background-color: #ef4444;
+  color: white;
+}
+
+.badge[data-severity="warning"] {
+  background-color: #f59e0b;
+  color: white;
+}
+
+.badge[data-severity="info"] {
+  background-color: #3b82f6;
+  color: white;
+}
+</style>

package/static/templates/event-counter.html

@@ -0,0 +1,48 @@
+<!-- Real-time Event Counter -->
+<div class="event-counter card" role="region" aria-live="polite" aria-label="Event statistics">
+  <div class="flex justify-between items-center">
+    <div class="text-center">
+      <p class="text-sm text-secondary">Total Events</p>
+      <p class="text-2xl font-bold font-mono" data-metric="total">{{ totalEvents }}</p>
+    </div>
+
+    <div class="flex-1 border-l ml-3 pl-3">
+      <div class="grid grid-cols-2 gap-3 text-sm">
+        <div>
+          <span class="text-secondary">File Ops:</span>
+          <p class="font-mono font-semibold" data-metric="file-ops">{{ fileOpsCount }}</p>
+        </div>
+        <div>
+          <span class="text-secondary">Commands:</span>
+          <p class="font-mono font-semibold" data-metric="commands">{{ commandsCount }}</p>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-3 text-sm mt-2">
+        <div>
+          <span class="text-secondary">Git Ops:</span>
+          <p class="font-mono font-semibold" data-metric="git-ops">{{ gitOpsCount }}</p>
+        </div>
+        <div>
+          <span class="text-secondary">Errors:</span>
+          <p class="font-mono font-semibold text-error" data-metric="errors">{{ errorCount }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style scoped>
+.event-counter {
+  padding: 16px;
+  background: var(--color-bg-secondary);
+}
+
+[data-metric="errors"] {
+  color: var(--color-error);
+}
+
+.font-mono {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+</style>