agentgui 1.0.274 → 1.0.275

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

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

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

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

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