agentgui 1.0.67 → 1.0.69

package/static/templates/execution-actions.html

@@ -0,0 +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>

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

@@ -0,0 +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>

package/static/templates/execution-stepper.html

@@ -0,0 +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>

package/static/templates/file-breadcrumb.html

@@ -0,0 +1,118 @@
+<!-- File Path Breadcrumb Navigation -->
+<nav class="file-breadcrumb" role="navigation" aria-label="File path">
+  <ol class="breadcrumb-list" role="list">
+    <!-- Home -->
+    <li role="listitem">
+      <a href="/" class="breadcrumb-link" title="Home directory">
+        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
+        </svg>
+        <span class="sr-only">Home</span>
+      </a>
+    </li>
+
+    <!-- Path segments -->
+    <li role="listitem" class="breadcrumb-separator">/</li>
+
+    {{ for segment in pathSegments }}
+    <li role="listitem">
+      <a href="{{ segmentPath }}" class="breadcrumb-link" title="{{ segmentPath }}">
+        {{ segment }}
+      </a>
+    </li>
+    <li role="listitem" class="breadcrumb-separator">/</li>
+    {{ end }}
+
+    <!-- Current file -->
+    <li role="listitem" aria-current="page" class="breadcrumb-current">
+      <span class="breadcrumb-link" title="{{ currentFile }}">{{ currentFile }}</span>
+    </li>
+  </ol>
+
+  <!-- Copy path button -->
+  <button class="copy-path-btn" data-action="copy-path" aria-label="Copy file path" title="Copy full path to clipboard">
+    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M7 3a1 1 0 000 2h6a1 1 0 000-2H7zM4 7a1 1 0 011-1h10a1 1 0 011 1v10a2 2 0 01-2 2H6a2 2 0 01-2-2V7z"/>
+    </svg>
+  </button>
+</nav>
+
+<style scoped>
+.file-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  font-size: 13px;
+  overflow-x: auto;
+}
+
+.breadcrumb-list {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.breadcrumb-link {
+  color: var(--color-primary);
+  text-decoration: none;
+  padding: 2px 4px;
+  border-radius: 2px;
+  transition: background-color 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  white-space: nowrap;
+}
+
+.breadcrumb-link:hover {
+  background-color: var(--color-bg-hover);
+}
+
+.breadcrumb-current .breadcrumb-link {
+  color: var(--color-text-primary);
+  cursor: default;
+}
+
+.breadcrumb-current .breadcrumb-link:hover {
+  background-color: transparent;
+}
+
+.breadcrumb-separator {
+  color: var(--color-text-secondary);
+  margin: 0 -2px;
+}
+
+.copy-path-btn {
+  background: none;
+  border: 1px solid var(--color-border);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  transition: all 0.2s;
+}
+
+.copy-path-btn:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+</style>

package/static/templates/file-diff-viewer.html

@@ -0,0 +1,121 @@
+<!-- File Diff Visualization Panel -->
+<div class="file-diff-viewer card" role="region" aria-label="Code diff viewer">
+  <div class="card-header flex items-center justify-between mb-3 pb-3 border-b">
+    <h4 class="font-semibold">Changes in {{ fileName }}</h4>
+    <div class="flex gap-2">
+      <button class="btn-icon" data-view="unified" title="Unified diff view" aria-label="Show unified diff">
+        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+          <path d="M7 3a1 1 0 000 2h6a1 1 0 000-2H7zM4 7a1 1 0 011-1h10a1 1 0 011 1v6a2 2 0 01-2 2H6a2 2 0 01-2-2V7z"/>
+        </svg>
+      </button>
+      <button class="btn-icon" data-view="split" title="Side-by-side view" aria-label="Show side-by-side diff">
+        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+          <path d="M2 3a1 1 0 011-1h6a1 1 0 011 1v8a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm10-1a1 1 0 011 1v8a1 1 0 01-1 1h-6a1 1 0 01-1-1v2a1 1 0 01-2 0V3a1 1 0 011-1h6z"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <!-- Diff Statistics -->
+  <div class="diff-stats text-sm mb-3 pb-3 border-b flex gap-4">
+    <span class="text-green-600" aria-label="Lines added">
+      <span class="font-mono">+{{ linesAdded }}</span> added
+    </span>
+    <span class="text-red-600" aria-label="Lines removed">
+      <span class="font-mono">-{{ linesRemoved }}</span> removed
+    </span>
+    <span class="text-blue-600" aria-label="Total changes">
+      <span class="font-mono">{{ totalChanges }}</span> total
+    </span>
+  </div>
+
+  <!-- Unified Diff View -->
+  <pre class="diff-content" data-view="unified"><code>{{ unifiedDiff }}</code></pre>
+
+  <!-- Split Diff View (hidden) -->
+  <div class="split-view hidden" data-view="split" role="region" aria-label="Side-by-side diff view">
+    <div class="flex gap-2">
+      <div class="flex-1">
+        <div class="bg-red-50 border-b p-2 text-xs font-semibold">Original</div>
+        <pre class="diff-side left"><code>{{ diffLeft }}</code></pre>
+      </div>
+      <div class="flex-1">
+        <div class="bg-green-50 border-b p-2 text-xs font-semibold">Modified</div>
+        <pre class="diff-side right"><code>{{ diffRight }}</code></pre>
+      </div>
+    </div>
+  </div>
+
+  <!-- Diff Legend -->
+  <div class="diff-legend text-xs mt-3 pt-3 border-t space-y-1">
+    <div class="flex items-center gap-2">
+      <span class="w-2 h-2 rounded-full bg-green-500"></span>
+      <span>Added or modified</span>
+    </div>
+    <div class="flex items-center gap-2">
+      <span class="w-2 h-2 rounded-full bg-red-500"></span>
+      <span>Removed or replaced</span>
+    </div>
+  </div>
+</div>
+
+<style scoped>
+.file-diff-viewer {
+  padding: 16px;
+  max-height: 600px;
+  overflow: auto;
+}
+
+.btn-icon {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.btn-icon:hover {
+  background-color: var(--color-bg-hover);
+  color: var(--color-primary);
+}
+
+.diff-stats {
+  display: flex;
+  gap: 16px;
+}
+
+.diff-content,
+.diff-side {
+  background-color: var(--color-bg-code);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  padding: 12px;
+  font-size: 11px;
+  line-height: 1.6;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  overflow-x: auto;
+}
+
+.split-view {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.diff-side {
+  flex: 1;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+}
+
+.diff-legend {
+  padding-top: 12px;
+}
+
+.hidden {
+  display: none;
+}
+</style>

package/static/templates/file-metadata.html

@@ -0,0 +1,133 @@
+<!-- File Metadata Display -->
+<div class="file-metadata" role="region" aria-label="File metadata">
+  <div class="metadata-grid">
+    <!-- Permissions -->
+    <div class="metadata-item">
+      <span class="metadata-label">Permissions</span>
+      <code class="metadata-value font-mono">{{ permissions }}</code>
+    </div>
+
+    <!-- Size -->
+    <div class="metadata-item">
+      <span class="metadata-label">Size</span>
+      <span class="metadata-value">{{ fileSize }} bytes</span>
+    </div>
+
+    <!-- Modified Date -->
+    <div class="metadata-item">
+      <span class="metadata-label">Modified</span>
+      <span class="metadata-value" title="{{ modifiedISO }}">{{ modifiedHuman }}</span>
+    </div>
+
+    <!-- Created Date -->
+    <div class="metadata-item">
+      <span class="metadata-label">Created</span>
+      <span class="metadata-value" title="{{ createdISO }}">{{ createdHuman }}</span>
+    </div>
+
+    <!-- Encoding -->
+    <div class="metadata-item">
+      <span class="metadata-label">Encoding</span>
+      <span class="metadata-value">{{ encoding }}</span>
+    </div>
+
+    <!-- Language -->
+    <div class="metadata-item">
+      <span class="metadata-label">Language</span>
+      <span class="metadata-value">{{ language }}</span>
+    </div>
+
+    <!-- Lines of Code -->
+    <div class="metadata-item">
+      <span class="metadata-label">Lines</span>
+      <span class="metadata-value">{{ lineCount }}</span>
+    </div>
+
+    <!-- Owner -->
+    <div class="metadata-item">
+      <span class="metadata-label">Owner</span>
+      <span class="metadata-value">{{ owner }}:{{ group }}</span>
+    </div>
+  </div>
+
+  <!-- Actions -->
+  <div class="metadata-actions mt-3 pt-3 border-t space-y-2">
+    <button class="metadata-action-btn" data-action="reveal-path" aria-label="Reveal in file explorer">
+      <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+        <path d="M2 6a2 2 0 012-2h12a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zm4 2a1 1 0 100 2 1 1 0 000-2z"/>
+      </svg>
+      Show in Explorer
+    </button>
+    <button class="metadata-action-btn" data-action="copy-path" aria-label="Copy file path">
+      <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+        <path d="M7 3a1 1 0 000 2h6a1 1 0 000-2H7zM4 7a1 1 0 011-1h10a1 1 0 011 1v10a2 2 0 01-2 2H6a2 2 0 01-2-2V7z"/>
+      </svg>
+      Copy Path
+    </button>
+  </div>
+</div>
+
+<style scoped>
+.file-metadata {
+  padding: 12px;
+  background: var(--color-bg-secondary);
+  border-radius: 4px;
+}
+
+.metadata-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.metadata-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.metadata-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--color-text-secondary);
+  letter-spacing: 0.5px;
+}
+
+.metadata-value {
+  font-size: 13px;
+  color: var(--color-text-primary);
+  word-break: break-word;
+}
+
+.font-mono {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.metadata-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.metadata-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background-color: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.metadata-action-btn:hover {
+  background-color: var(--color-bg-hover);
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+</style>