agentgui 1.0.66 → 1.0.68

package/static/templates/quality-metrics-display.html

@@ -0,0 +1,170 @@
+<!-- Code Quality Metrics Display -->
+<div class="quality-metrics-display card" role="region" aria-label="Code quality metrics">
+  <div class="card-header border-b pb-3 mb-3">
+    <h4 class="font-semibold">Quality Metrics</h4>
+  </div>
+
+  <!-- Primary Metrics Grid -->
+  <div class="metrics-grid mb-4">
+    <!-- Complexity -->
+    <div class="metric-item">
+      <div class="metric-label">Cyclomatic Complexity</div>
+      <div class="metric-value" data-score="{{ complexityScore }}" data-level="{{ complexityLevel }}">
+        {{ complexityScore }}
+      </div>
+      <div class="metric-bar">
+        <div class="metric-bar-fill" style="width: {{ complexityPercent }}%"></div>
+      </div>
+      <p class="text-xs text-secondary mt-1">{{ complexityDescription }}</p>
+    </div>
+
+    <!-- Duplication -->
+    <div class="metric-item">
+      <div class="metric-label">Code Duplication</div>
+      <div class="metric-value" data-score="{{ duplicationPercent }}%" data-level="{{ duplicationLevel }}">
+        {{ duplicationPercent }}%
+      </div>
+      <div class="metric-bar">
+        <div class="metric-bar-fill" style="width: {{ duplicationPercent }}%"></div>
+      </div>
+      <p class="text-xs text-secondary mt-1">{{ duplicationCount }} duplicated lines</p>
+    </div>
+
+    <!-- Coverage -->
+    <div class="metric-item">
+      <div class="metric-label">Test Coverage</div>
+      <div class="metric-value" data-score="{{ coveragePercent }}%" data-level="{{ coverageLevel }}">
+        {{ coveragePercent }}%
+      </div>
+      <div class="metric-bar">
+        <div class="metric-bar-fill" style="width: {{ coveragePercent }}%"></div>
+      </div>
+      <p class="text-xs text-secondary mt-1">{{ coveredLines }}/{{ totalLines }} lines</p>
+    </div>
+
+    <!-- Maintainability -->
+    <div class="metric-item">
+      <div class="metric-label">Maintainability Index</div>
+      <div class="metric-value" data-score="{{ maintainabilityScore }}" data-level="{{ maintainabilityLevel }}">
+        {{ maintainabilityScore }}
+      </div>
+      <div class="metric-bar">
+        <div class="metric-bar-fill" style="width: {{ maintainabilityPercent }}%"></div>
+      </div>
+      <p class="text-xs text-secondary mt-1">{{ maintainabilityDescription }}</p>
+    </div>
+  </div>
+
+  <!-- Detailed Metrics -->
+  <div class="detailed-metrics">
+    <details class="metric-details" open>
+      <summary class="cursor-pointer font-semibold mb-2">File Statistics</summary>
+      <div class="mt-2 space-y-1 text-sm">
+        <p><span class="text-secondary">Lines of Code:</span> <code class="font-mono">{{ linesOfCode }}</code></p>
+        <p><span class="text-secondary">Functions:</span> <code class="font-mono">{{ functionCount }}</code></p>
+        <p><span class="text-secondary">Comments:</span> <code class="font-mono">{{ commentRatio }}%</code></p>
+        <p><span class="text-secondary">Blank Lines:</span> <code class="font-mono">{{ blankLinePercent }}%</code></p>
+      </div>
+    </details>
+
+    <details class="metric-details">
+      <summary class="cursor-pointer font-semibold mb-2">Issues Found</summary>
+      <div class="mt-2 space-y-1 text-sm">
+        <p class="text-red-600"><span class="font-semibold">{{ criticalIssues }}</span> Critical</p>
+        <p class="text-orange-600"><span class="font-semibold">{{ majorIssues }}</span> Major</p>
+        <p class="text-yellow-600"><span class="font-semibold">{{ minorIssues }}</span> Minor</p>
+        <p class="text-blue-600"><span class="font-semibold">{{ infoIssues }}</span> Info</p>
+      </div>
+    </details>
+  </div>
+</div>
+
+<style scoped>
+.quality-metrics-display {
+  padding: 16px;
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 16px;
+}
+
+.metric-item {
+  padding: 12px;
+  background-color: var(--color-bg-secondary);
+  border-radius: 4px;
+  border: 1px solid var(--color-border);
+}
+
+.metric-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+}
+
+.metric-value {
+  font-size: 28px;
+  font-weight: bold;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.metric-value[data-level="good"] {
+  color: #10b981;
+}
+
+.metric-value[data-level="fair"] {
+  color: #f59e0b;
+}
+
+.metric-value[data-level="poor"] {
+  color: #ef4444;
+}
+
+.metric-bar {
+  height: 4px;
+  background-color: var(--color-border);
+  border-radius: 2px;
+  overflow: hidden;
+  margin: 8px 0;
+}
+
+.metric-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #10b981 0%, #f59e0b 50%, #ef4444 100%);
+  transition: width 0.3s ease;
+}
+
+.detailed-metrics {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--color-border);
+}
+
+.metric-details {
+  margin-bottom: 12px;
+}
+
+.metric-details[open] summary {
+  color: var(--color-primary);
+}
+
+summary {
+  cursor: pointer;
+  list-style: none;
+}
+
+summary::-webkit-details-marker {
+  display: none;
+}
+
+.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/terminal-output-panel.html

@@ -0,0 +1,87 @@
+<!-- Terminal-like Output Panel with ANSI Color Support -->
+<div class="terminal-output-panel card" role="region" aria-label="Terminal output">
+  <div class="card-header flex items-center justify-between mb-3 pb-3 border-b">
+    <div>
+      <h4 class="font-semibold text-sm">{{ commandName }}</h4>
+      <p class="text-xs text-secondary font-mono">$ {{ command }}</p>
+    </div>
+    <div class="flex items-center gap-2">
+      <span class="badge" data-exit-code="{{ exitCode }}">
+        Exit {{ exitCode }}
+      </span>
+    </div>
+  </div>
+
+  <!-- Output Container (Virtual Scrolling) -->
+  <div class="terminal-content" data-scrollable="true" role="region" aria-label="Command output" aria-live="polite">
+    <pre class="terminal-output" data-line-count="{{ lineCount }}"><code>{{ output }}</code></pre>
+  </div>
+
+  <!-- Output Statistics -->
+  <div class="text-xs text-secondary mt-3 pt-3 border-t space-y-1">
+    <p><span class="font-mono">{{ stdoutLines }}</span> stdout lines • <span class="font-mono">{{ stderrLines }}</span> stderr lines</p>
+    <p>Duration: <span class="font-mono">{{ duration }}</span> • Memory: <span class="font-mono">{{ memoryUsed }}</span></p>
+  </div>
+</div>
+
+<style scoped>
+.terminal-output-panel {
+  padding: 16px;
+  background: var(--color-bg-primary);
+}
+
+.terminal-content {
+  background-color: var(--color-bg-terminal);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  padding: 12px;
+  max-height: 400px;
+  overflow-y: auto;
+  overflow-x: auto;
+}
+
+.terminal-output {
+  margin: 0;
+  padding: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  color: var(--color-text-terminal);
+}
+
+/* ANSI Color Classes */
+.ansi-bold { font-weight: bold; }
+.ansi-dim { opacity: 0.5; }
+.ansi-italic { font-style: italic; }
+.ansi-underline { text-decoration: underline; }
+
+/* Text Colors */
+.ansi-black { color: #000000; }
+.ansi-red { color: #ff0000; }
+.ansi-green { color: #00ff00; }
+.ansi-yellow { color: #ffff00; }
+.ansi-blue { color: #0000ff; }
+.ansi-magenta { color: #ff00ff; }
+.ansi-cyan { color: #00ffff; }
+.ansi-white { color: #ffffff; }
+
+/* Background Colors */
+.ansi-bg-black { background-color: #000000; }
+.ansi-bg-red { background-color: #ff0000; }
+.ansi-bg-green { background-color: #00ff00; }
+.ansi-bg-yellow { background-color: #ffff00; }
+.ansi-bg-blue { background-color: #0000ff; }
+.ansi-bg-magenta { background-color: #ff00ff; }
+.ansi-bg-cyan { background-color: #00ffff; }
+.ansi-bg-white { background-color: #ffffff; }
+
+.badge[data-exit-code="0"] {
+  background-color: #10b981;
+  color: white;
+}
+
+.badge[data-exit-code]:not([data-exit-code="0"]) {
+  background-color: #ef4444;
+  color: white;
+}
+</style>

package/static/templates/test-results-display.html

@@ -0,0 +1,144 @@
+<!-- Test Results Display -->
+<div class="test-results-display card" role="region" aria-label="Test execution results">
+  <div class="card-header flex items-center justify-between mb-3 pb-3 border-b">
+    <h4 class="font-semibold">Test Results</h4>
+    <div class="test-summary flex gap-2">
+      <span class="badge-result passed" aria-label="Passed tests">{{ passedCount }}</span>
+      <span class="badge-result failed" aria-label="Failed tests">{{ failedCount }}</span>
+      <span class="badge-result skipped" aria-label="Skipped tests">{{ skippedCount }}</span>
+    </div>
+  </div>
+
+  <!-- Summary Stats -->
+  <div class="summary-stats grid grid-cols-4 gap-3 mb-4 pb-4 border-b text-center">
+    <div>
+      <p class="text-2xl font-bold text-green-600">{{ passedCount }}</p>
+      <p class="text-xs text-secondary">Passed</p>
+    </div>
+    <div>
+      <p class="text-2xl font-bold text-red-600">{{ failedCount }}</p>
+      <p class="text-xs text-secondary">Failed</p>
+    </div>
+    <div>
+      <p class="text-2xl font-bold text-yellow-600">{{ skippedCount }}</p>
+      <p class="text-xs text-secondary">Skipped</p>
+    </div>
+    <div>
+      <p class="text-2xl font-bold font-mono">{{ passPercentage }}%</p>
+      <p class="text-xs text-secondary">Pass Rate</p>
+    </div>
+  </div>
+
+  <!-- Test Tree/List -->
+  <div class="test-list space-y-1">
+    {{ for suite in testSuites }}
+    <details class="test-suite">
+      <summary class="cursor-pointer py-2 px-3 rounded hover:bg-hover-bg flex items-center gap-2">
+        <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 class="font-semibold text-sm">{{ suite.name }}</span>
+        <span class="ml-auto text-xs space-x-1">
+          <span class="text-green-600">{{ suite.passed }}</span>
+          <span class="text-red-600">{{ suite.failed }}</span>
+        </span>
+      </summary>
+
+      <div class="test-cases mt-2 ml-4 space-y-1 border-l pl-3">
+        {{ for test in suite.tests }}
+        <div class="test-case flex items-center gap-2 py-1 text-sm">
+          {{ if test.status == 'passed' }}
+          <svg class="w-4 h-4 text-green-600" 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>
+          {{ else if test.status == 'failed' }}
+          <svg class="w-4 h-4 text-red-600" 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 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 }}
+          <svg class="w-4 h-4 text-yellow-600" 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 16zm0-2a6 6 0 100-12 6 6 0 000 12z"/>
+          </svg>
+          {{ end }}
+          <span class="flex-1">{{ test.name }}</span>
+          <span class="text-secondary text-xs">{{ test.duration }}ms</span>
+        </div>
+        {{ end }}
+      </div>
+    </details>
+    {{ end }}
+  </div>
+
+  <!-- Execution Metadata -->
+  <div class="mt-4 pt-4 border-t text-xs text-secondary space-y-1">
+    <p>Total Duration: <code class="font-mono">{{ totalDuration }}</code></p>
+    <p>Framework: <code class="font-mono">{{ framework }}</code></p>
+  </div>
+</div>
+
+<style scoped>
+.test-results-display {
+  padding: 16px;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.badge-result {
+  padding: 4px 8px;
+  border-radius: 3px;
+  font-size: 12px;
+  font-weight: 600;
+  color: white;
+}
+
+.badge-result.passed {
+  background-color: #10b981;
+}
+
+.badge-result.failed {
+  background-color: #ef4444;
+}
+
+.badge-result.skipped {
+  background-color: #6b7280;
+}
+
+.test-suite {
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.test-suite[open] summary {
+  background-color: var(--color-bg-hover);
+  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);
+}
+
+.test-case {
+  padding: 4px 0;
+}
+
+.font-mono {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  background-color: var(--color-bg-code);
+  padding: 1px 3px;
+  border-radius: 2px;
+}
+</style>