agentgui 1.0.273 → 1.0.275

package/static/templates/error-alert.html

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

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