agentgui 1.0.274 → 1.0.275

package/static/templates/execution-actions.html

@@ -1,97 +1,97 @@
-<!-- Execution Control Buttons -->
-<div class="execution-actions flex gap-2" role="group" aria-label="Execution controls">
-  <!-- Cancel Button -->
-  <button class="btn btn-secondary"
-          data-action="cancel"
-          aria-label="Cancel execution"
-          title="Stop the current 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>
-
-  <!-- Pause Button -->
-  <button class="btn btn-secondary"
-          data-action="pause"
-          aria-label="Pause execution"
-          title="Pause the current execution">
-    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
-      <path d="M5 3a2 2 0 012 2v10a2 2 0 01-2 2H3a2 2 0 01-2-2V5a2 2 0 012-2h2zm10 0a2 2 0 012 2v10a2 2 0 01-2 2h-2a2 2 0 01-2-2V5a2 2 0 012-2h2z"/>
-    </svg>
-    <span>Pause</span>
-  </button>
-
-  <!-- Resume Button (hidden by default) -->
-  <button class="btn btn-secondary hidden"
-          data-action="resume"
-          aria-label="Resume execution"
-          title="Resume the paused execution">
-    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
-      <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/>
-    </svg>
-    <span>Resume</span>
-  </button>
-
-  <!-- Export Button -->
-  <button class="btn btn-tertiary"
-          data-action="export"
-          aria-label="Export execution results"
-          title="Download results as JSON">
-    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
-      <path d="M3 17a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2zm4-6a1 1 0 011-1h2V4a1 1 0 112 0v6h2a1 1 0 110 2h-6a1 1 0 01-1-1z"/>
-    </svg>
-    <span>Export</span>
-  </button>
-</div>
-
-<style scoped>
-.execution-actions {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
-  border-radius: 4px;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  border: none;
-  transition: all 0.2s ease;
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn-secondary {
-  background-color: var(--color-bg-secondary);
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-border);
-}
-
-.btn-secondary:hover:not(:disabled) {
-  background-color: var(--color-bg-hover);
-  border-color: var(--color-primary);
-}
-
-.btn-tertiary {
-  background-color: transparent;
-  color: var(--color-primary);
-  border: 1px solid var(--color-primary);
-}
-
-.btn-tertiary:hover:not(:disabled) {
-  background-color: var(--color-primary-hover);
-}
-
-.hidden {
-  display: none;
-}
-</style>
+<!-- Execution Control Buttons -->
+<div class="execution-actions flex gap-2" role="group" aria-label="Execution controls">
+  <!-- Cancel Button -->
+  <button class="btn btn-secondary"
+          data-action="cancel"
+          aria-label="Cancel execution"
+          title="Stop the current 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>
+
+  <!-- Pause Button -->
+  <button class="btn btn-secondary"
+          data-action="pause"
+          aria-label="Pause execution"
+          title="Pause the current execution">
+    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M5 3a2 2 0 012 2v10a2 2 0 01-2 2H3a2 2 0 01-2-2V5a2 2 0 012-2h2zm10 0a2 2 0 012 2v10a2 2 0 01-2 2h-2a2 2 0 01-2-2V5a2 2 0 012-2h2z"/>
+    </svg>
+    <span>Pause</span>
+  </button>
+
+  <!-- Resume Button (hidden by default) -->
+  <button class="btn btn-secondary hidden"
+          data-action="resume"
+          aria-label="Resume execution"
+          title="Resume the paused execution">
+    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/>
+    </svg>
+    <span>Resume</span>
+  </button>
+
+  <!-- Export Button -->
+  <button class="btn btn-tertiary"
+          data-action="export"
+          aria-label="Export execution results"
+          title="Download results as JSON">
+    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M3 17a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2zm4-6a1 1 0 011-1h2V4a1 1 0 112 0v6h2a1 1 0 110 2h-6a1 1 0 01-1-1z"/>
+    </svg>
+    <span>Export</span>
+  </button>
+</div>
+
+<style scoped>
+.execution-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s ease;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background-color: var(--color-bg-hover);
+  border-color: var(--color-primary);
+}
+
+.btn-tertiary {
+  background-color: transparent;
+  color: var(--color-primary);
+  border: 1px solid var(--color-primary);
+}
+
+.btn-tertiary:hover:not(:disabled) {
+  background-color: var(--color-primary-hover);
+}
+
+.hidden {
+  display: none;
+}
+</style>

package/static/templates/execution-progress-bar.html

@@ -1,80 +1,80 @@
-<!-- Execution Progress Visualization -->
-<div class="execution-progress card" role="region" aria-label="Execution progress">
-  <div class="card-header flex items-center justify-between mb-4">
-    <div>
-      <h3 class="font-semibold">Execution Progress</h3>
-      <p class="text-sm text-secondary">{{ executionStatus }}</p>
-    </div>
-    <span class="badge" role="status" aria-live="polite">{{ percentage }}%</span>
-  </div>
-
-  <!-- Progress Bar -->
-  <div class="progress-container mb-4" role="progressbar" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100" aria-label="Progress: {{ percentage }}%">
-    <div class="progress-bar" style="width: {{ percentage }}%">
-      <span class="progress-text" aria-hidden="true">{{ percentage }}%</span>
-    </div>
-  </div>
-
-  <!-- Progress Details Grid -->
-  <div class="grid grid-cols-3 gap-3 text-sm">
-    <div class="border-r pr-3">
-      <span class="text-secondary">Events</span>
-      <p class="font-semibold text-lg">{{ eventCount }}</p>
-    </div>
-    <div class="border-r pr-3">
-      <span class="text-secondary">Elapsed</span>
-      <p class="font-mono text-lg">{{ elapsedTime }}</p>
-    </div>
-    <div>
-      <span class="text-secondary">Remaining</span>
-      <p class="font-mono text-lg">{{ estimatedRemaining }}</p>
-    </div>
-  </div>
-
-  <!-- Status Timeline -->
-  <div class="mt-4 pt-4 border-t">
-    <div class="flex justify-between text-xs">
-      <span class="flex items-center gap-1">
-        <span class="w-2 h-2 rounded-full bg-primary" aria-hidden="true"></span>
-        Queued
-      </span>
-      <span class="flex items-center gap-1">
-        <span class="w-2 h-2 rounded-full bg-primary" aria-hidden="true"></span>
-        Running
-      </span>
-      <span class="flex items-center gap-1">
-        <span class="w-2 h-2 rounded-full bg-primary" aria-hidden="true"></span>
-        Processing
-      </span>
-      <span class="flex items-center gap-1">
-        <span class="w-2 h-2 rounded-full bg-secondary" aria-hidden="true"></span>
-        Complete
-      </span>
-    </div>
-  </div>
-</div>
-
-<style scoped>
-.progress-container {
-  position: relative;
-  height: 24px;
-  background-color: var(--color-bg-secondary);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.progress-bar {
-  height: 100%;
-  background-color: var(--color-primary);
-  transition: width 0.3s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.progress-text {
-  font-size: 11px;
-  font-weight: 600;
-  color: white;
-}
-</style>
+<!-- Execution Progress Visualization -->
+<div class="execution-progress card" role="region" aria-label="Execution progress">
+  <div class="card-header flex items-center justify-between mb-4">
+    <div>
+      <h3 class="font-semibold">Execution Progress</h3>
+      <p class="text-sm text-secondary">{{ executionStatus }}</p>
+    </div>
+    <span class="badge" role="status" aria-live="polite">{{ percentage }}%</span>
+  </div>
+
+  <!-- Progress Bar -->
+  <div class="progress-container mb-4" role="progressbar" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100" aria-label="Progress: {{ percentage }}%">
+    <div class="progress-bar" style="width: {{ percentage }}%">
+      <span class="progress-text" aria-hidden="true">{{ percentage }}%</span>
+    </div>
+  </div>
+
+  <!-- Progress Details Grid -->
+  <div class="grid grid-cols-3 gap-3 text-sm">
+    <div class="border-r pr-3">
+      <span class="text-secondary">Events</span>
+      <p class="font-semibold text-lg">{{ eventCount }}</p>
+    </div>
+    <div class="border-r pr-3">
+      <span class="text-secondary">Elapsed</span>
+      <p class="font-mono text-lg">{{ elapsedTime }}</p>
+    </div>
+    <div>
+      <span class="text-secondary">Remaining</span>
+      <p class="font-mono text-lg">{{ estimatedRemaining }}</p>
+    </div>
+  </div>
+
+  <!-- Status Timeline -->
+  <div class="mt-4 pt-4 border-t">
+    <div class="flex justify-between text-xs">
+      <span class="flex items-center gap-1">
+        <span class="w-2 h-2 rounded-full bg-primary" aria-hidden="true"></span>
+        Queued
+      </span>
+      <span class="flex items-center gap-1">
+        <span class="w-2 h-2 rounded-full bg-primary" aria-hidden="true"></span>
+        Running
+      </span>
+      <span class="flex items-center gap-1">
+        <span class="w-2 h-2 rounded-full bg-primary" aria-hidden="true"></span>
+        Processing
+      </span>
+      <span class="flex items-center gap-1">
+        <span class="w-2 h-2 rounded-full bg-secondary" aria-hidden="true"></span>
+        Complete
+      </span>
+    </div>
+  </div>
+</div>
+
+<style scoped>
+.progress-container {
+  position: relative;
+  height: 24px;
+  background-color: var(--color-bg-secondary);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  background-color: var(--color-primary);
+  transition: width 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progress-text {
+  font-size: 11px;
+  font-weight: 600;
+  color: white;
+}
+</style>

package/static/templates/execution-stepper.html

@@ -1,120 +1,120 @@
-<!-- Execution Phase Stepper -->
-<div class="execution-stepper" role="region" aria-label="Execution phases">
-  <div class="flex justify-between items-center">
-    <!-- Phase 1: Queued -->
-    <div class="stepper-item" data-phase="queued" data-completed="true" aria-label="Phase: Queued (completed)">
-      <div class="stepper-circle">
-        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
-          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
-        </svg>
-      </div>
-      <span class="stepper-label">Queued</span>
-    </div>
-
-    <div class="stepper-connector"></div>
-
-    <!-- Phase 2: Running -->
-    <div class="stepper-item" data-phase="running" data-completed="true" aria-label="Phase: Running (completed)">
-      <div class="stepper-circle">
-        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
-          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
-        </svg>
-      </div>
-      <span class="stepper-label">Running</span>
-    </div>
-
-    <div class="stepper-connector"></div>
-
-    <!-- Phase 3: Processing -->
-    <div class="stepper-item" data-phase="processing" data-active="true" aria-label="Phase: Processing (active)">
-      <div class="stepper-circle loading">
-        <div class="spinner"></div>
-      </div>
-      <span class="stepper-label">Processing</span>
-    </div>
-
-    <div class="stepper-connector"></div>
-
-    <!-- Phase 4: Complete -->
-    <div class="stepper-item" data-phase="complete" aria-label="Phase: Complete (pending)">
-      <div class="stepper-circle">4</div>
-      <span class="stepper-label">Complete</span>
-    </div>
-  </div>
-</div>
-
-<style scoped>
-.execution-stepper {
-  padding: 20px;
-  background: var(--color-bg-primary);
-}
-
-.stepper-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
-}
-
-.stepper-circle {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
-  font-weight: 600;
-  margin-bottom: 8px;
-  border: 2px solid var(--color-border);
-}
-
-.stepper-item[data-completed="true"] .stepper-circle {
-  background-color: var(--color-success);
-  color: white;
-  border-color: var(--color-success);
-}
-
-.stepper-item[data-active="true"] .stepper-circle {
-  background-color: var(--color-primary);
-  color: white;
-  border-color: var(--color-primary);
-}
-
-.stepper-circle.loading {
-  position: relative;
-}
-
-.spinner {
-  width: 20px;
-  height: 20px;
-  border: 2px solid transparent;
-  border-top-color: white;
-  border-right-color: white;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.stepper-label {
-  font-size: 12px;
-  font-weight: 500;
-  text-align: center;
-}
-
-.stepper-connector {
-  flex: 1;
-  height: 2px;
-  background-color: var(--color-border);
-  margin: 0 10px;
-  margin-top: 20px;
-}
-
-.stepper-item[data-completed="true"] ~ .stepper-connector {
-  background-color: var(--color-success);
-}
-</style>
+<!-- Execution Phase Stepper -->
+<div class="execution-stepper" role="region" aria-label="Execution phases">
+  <div class="flex justify-between items-center">
+    <!-- Phase 1: Queued -->
+    <div class="stepper-item" data-phase="queued" data-completed="true" aria-label="Phase: Queued (completed)">
+      <div class="stepper-circle">
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
+        </svg>
+      </div>
+      <span class="stepper-label">Queued</span>
+    </div>
+
+    <div class="stepper-connector"></div>
+
+    <!-- Phase 2: Running -->
+    <div class="stepper-item" data-phase="running" data-completed="true" aria-label="Phase: Running (completed)">
+      <div class="stepper-circle">
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
+        </svg>
+      </div>
+      <span class="stepper-label">Running</span>
+    </div>
+
+    <div class="stepper-connector"></div>
+
+    <!-- Phase 3: Processing -->
+    <div class="stepper-item" data-phase="processing" data-active="true" aria-label="Phase: Processing (active)">
+      <div class="stepper-circle loading">
+        <div class="spinner"></div>
+      </div>
+      <span class="stepper-label">Processing</span>
+    </div>
+
+    <div class="stepper-connector"></div>
+
+    <!-- Phase 4: Complete -->
+    <div class="stepper-item" data-phase="complete" aria-label="Phase: Complete (pending)">
+      <div class="stepper-circle">4</div>
+      <span class="stepper-label">Complete</span>
+    </div>
+  </div>
+</div>
+
+<style scoped>
+.execution-stepper {
+  padding: 20px;
+  background: var(--color-bg-primary);
+}
+
+.stepper-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.stepper-circle {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  font-weight: 600;
+  margin-bottom: 8px;
+  border: 2px solid var(--color-border);
+}
+
+.stepper-item[data-completed="true"] .stepper-circle {
+  background-color: var(--color-success);
+  color: white;
+  border-color: var(--color-success);
+}
+
+.stepper-item[data-active="true"] .stepper-circle {
+  background-color: var(--color-primary);
+  color: white;
+  border-color: var(--color-primary);
+}
+
+.stepper-circle.loading {
+  position: relative;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid transparent;
+  border-top-color: white;
+  border-right-color: white;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.stepper-label {
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+}
+
+.stepper-connector {
+  flex: 1;
+  height: 2px;
+  background-color: var(--color-border);
+  margin: 0 10px;
+  margin-top: 20px;
+}
+
+.stepper-item[data-completed="true"] ~ .stepper-connector {
+  background-color: var(--color-success);
+}
+</style>