agentgui 1.0.274 → 1.0.276

package/static/templates/command-header.html

@@ -1,77 +1,77 @@
-<!-- Command Execution Header -->
-<div class="command-header" role="region" aria-label="Command information">
-  <div class="flex items-start justify-between gap-3 mb-3">
-    <!-- Command Info -->
-    <div class="flex-1 min-w-0">
-      <div class="flex items-center gap-2 mb-2">
-        <svg class="w-4 h-4 text-primary flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
-          <path d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"/>
-        </svg>
-        <h4 class="font-semibold truncate">{{ commandName }}</h4>
-      </div>
-      <code class="text-xs font-mono text-secondary truncate block" title="{{ fullCommand }}">
-        $ {{ fullCommand }}
-      </code>
-    </div>
-
-    <!-- Status Badge -->
-    <div class="flex-shrink-0">
-      <div class="badge badge-lg" data-status="{{ status }}" role="status" aria-label="Command status: {{ statusLabel }}">
-        <span class="badge-dot"></span>
-        {{ statusLabel }}
-      </div>
-    </div>
-  </div>
-
-  <!-- Details Row -->
-  <div class="grid grid-cols-4 gap-3 text-sm">
-    <div class="border-r pr-3">
-      <span class="text-secondary">Exit Code</span>
-      <p class="font-mono font-semibold" data-exit-code="{{ exitCode }}">{{ exitCode }}</p>
-    </div>
-    <div class="border-r pr-3">
-      <span class="text-secondary">Duration</span>
-      <p class="font-mono font-semibold">{{ duration }}</p>
-    </div>
-    <div class="border-r pr-3">
-      <span class="text-secondary">Memory</span>
-      <p class="font-mono font-semibold">{{ memoryUsed }}</p>
-    </div>
-    <div>
-      <span class="text-secondary">PID</span>
-      <p class="font-mono font-semibold">{{ pid }}</p>
-    </div>
-  </div>
-</div>
-
-<style scoped>
-.command-header {
-  padding: 12px;
-  background: var(--color-bg-secondary);
-  border-radius: 4px;
-  border-left: 3px solid var(--color-primary);
-}
-
-.badge-dot {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background-color: currentColor;
-  margin-right: 6px;
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-[data-exit-code="0"] {
-  color: #10b981;
-}
-
-[data-exit-code]:not([data-exit-code="0"]) {
-  color: #ef4444;
-}
-</style>
+<!-- Command Execution Header -->
+<div class="command-header" role="region" aria-label="Command information">
+  <div class="flex items-start justify-between gap-3 mb-3">
+    <!-- Command Info -->
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center gap-2 mb-2">
+        <svg class="w-4 h-4 text-primary flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+          <path d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"/>
+        </svg>
+        <h4 class="font-semibold truncate">{{ commandName }}</h4>
+      </div>
+      <code class="text-xs font-mono text-secondary truncate block" title="{{ fullCommand }}">
+        $ {{ fullCommand }}
+      </code>
+    </div>
+
+    <!-- Status Badge -->
+    <div class="flex-shrink-0">
+      <div class="badge badge-lg" data-status="{{ status }}" role="status" aria-label="Command status: {{ statusLabel }}">
+        <span class="badge-dot"></span>
+        {{ statusLabel }}
+      </div>
+    </div>
+  </div>
+
+  <!-- Details Row -->
+  <div class="grid grid-cols-4 gap-3 text-sm">
+    <div class="border-r pr-3">
+      <span class="text-secondary">Exit Code</span>
+      <p class="font-mono font-semibold" data-exit-code="{{ exitCode }}">{{ exitCode }}</p>
+    </div>
+    <div class="border-r pr-3">
+      <span class="text-secondary">Duration</span>
+      <p class="font-mono font-semibold">{{ duration }}</p>
+    </div>
+    <div class="border-r pr-3">
+      <span class="text-secondary">Memory</span>
+      <p class="font-mono font-semibold">{{ memoryUsed }}</p>
+    </div>
+    <div>
+      <span class="text-secondary">PID</span>
+      <p class="font-mono font-semibold">{{ pid }}</p>
+    </div>
+  </div>
+</div>
+
+<style scoped>
+.command-header {
+  padding: 12px;
+  background: var(--color-bg-secondary);
+  border-radius: 4px;
+  border-left: 3px solid var(--color-primary);
+}
+
+.badge-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: currentColor;
+  margin-right: 6px;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+[data-exit-code="0"] {
+  color: #10b981;
+}
+
+[data-exit-code]:not([data-exit-code="0"]) {
+  color: #ef4444;
+}
+</style>

package/static/templates/command-output-scrollable.html

@@ -1,118 +1,118 @@
-<!-- Scrollable Command Output with Virtual Rendering -->
-<div class="command-output-scrollable" role="region" aria-label="Scrollable command output" aria-live="polite">
-  <!-- Virtual Scroll Container -->
-  <div class="scroll-viewport" data-total-lines="{{ totalLines }}" data-visible-lines="20">
-    <div class="scroll-content" role="list">
-      <!-- Lines rendered dynamically by JavaScript -->
-      {{ for line in visibleLines }}
-      <div class="output-line" data-line-number="{{ lineNumber }}" role="listitem">
-        <span class="line-number" aria-hidden="true">{{ lineNumber }}</span>
-        <code class="line-content ansi-colored" data-has-stderr="{{ hasStderr }}">{{ line }}</code>
-      </div>
-      {{ end }}
-    </div>
-
-    <!-- Scrollbar -->
-    <div class="scroll-thumb" role="scrollbar" aria-orientation="vertical"></div>
-  </div>
-
-  <!-- Search Bar -->
-  <div class="output-search mt-3 pt-3 border-t">
-    <input type="text"
-           class="search-input"
-           placeholder="Search output..."
-           aria-label="Search in command output"
-           data-search-index="true" />
-    <div class="search-results text-xs text-secondary mt-1" aria-live="polite">
-      {{ matchCount }} matches
-    </div>
-  </div>
-</div>
-
-<style scoped>
-.command-output-scrollable {
-  background: var(--color-bg-terminal);
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
-  overflow: hidden;
-  max-height: 500px;
-  display: flex;
-  flex-direction: column;
-}
-
-.scroll-viewport {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: auto;
-  position: relative;
-  background-color: var(--color-bg-code);
-  font-size: 12px;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  line-height: 1.5;
-}
-
-.scroll-content {
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  margin: 0;
-  padding: 8px;
-}
-
-.output-line {
-  display: flex;
-  gap: 12px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  padding: 0 4px;
-}
-
-.line-number {
-  color: var(--color-text-secondary);
-  text-align: right;
-  min-width: 40px;
-  user-select: none;
-  flex-shrink: 0;
-}
-
-.line-content {
-  color: var(--color-text-terminal);
-  flex: 1;
-}
-
-.line-content[data-has-stderr="true"] {
-  color: var(--color-error);
-}
-
-.scroll-thumb {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 8px;
-  height: 100%;
-  background-color: var(--color-scrollbar);
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.output-search {
-  padding: 8px;
-  border-top: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
-}
-
-.search-input {
-  width: 100%;
-  padding: 6px 8px;
-  border: 1px solid var(--color-border);
-  border-radius: 3px;
-  font-size: 12px;
-  font-family: inherit;
-}
-
-.search-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 2px var(--color-primary-alpha);
-}
-</style>
+<!-- Scrollable Command Output with Virtual Rendering -->
+<div class="command-output-scrollable" role="region" aria-label="Scrollable command output" aria-live="polite">
+  <!-- Virtual Scroll Container -->
+  <div class="scroll-viewport" data-total-lines="{{ totalLines }}" data-visible-lines="20">
+    <div class="scroll-content" role="list">
+      <!-- Lines rendered dynamically by JavaScript -->
+      {{ for line in visibleLines }}
+      <div class="output-line" data-line-number="{{ lineNumber }}" role="listitem">
+        <span class="line-number" aria-hidden="true">{{ lineNumber }}</span>
+        <code class="line-content ansi-colored" data-has-stderr="{{ hasStderr }}">{{ line }}</code>
+      </div>
+      {{ end }}
+    </div>
+
+    <!-- Scrollbar -->
+    <div class="scroll-thumb" role="scrollbar" aria-orientation="vertical"></div>
+  </div>
+
+  <!-- Search Bar -->
+  <div class="output-search mt-3 pt-3 border-t">
+    <input type="text"
+           class="search-input"
+           placeholder="Search output..."
+           aria-label="Search in command output"
+           data-search-index="true" />
+    <div class="search-results text-xs text-secondary mt-1" aria-live="polite">
+      {{ matchCount }} matches
+    </div>
+  </div>
+</div>
+
+<style scoped>
+.command-output-scrollable {
+  background: var(--color-bg-terminal);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  overflow: hidden;
+  max-height: 500px;
+  display: flex;
+  flex-direction: column;
+}
+
+.scroll-viewport {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: auto;
+  position: relative;
+  background-color: var(--color-bg-code);
+  font-size: 12px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  line-height: 1.5;
+}
+
+.scroll-content {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 8px;
+}
+
+.output-line {
+  display: flex;
+  gap: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  padding: 0 4px;
+}
+
+.line-number {
+  color: var(--color-text-secondary);
+  text-align: right;
+  min-width: 40px;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.line-content {
+  color: var(--color-text-terminal);
+  flex: 1;
+}
+
+.line-content[data-has-stderr="true"] {
+  color: var(--color-error);
+}
+
+.scroll-thumb {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 8px;
+  height: 100%;
+  background-color: var(--color-scrollbar);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.output-search {
+  padding: 8px;
+  border-top: 1px solid var(--color-border);
+  background: var(--color-bg-secondary);
+}
+
+.search-input {
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
+  font-size: 12px;
+  font-family: inherit;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-primary-alpha);
+}
+</style>

package/static/templates/elapsed-time.html

@@ -1,54 +1,54 @@
-<!-- Execution Time Display with Elapsed and Estimated Remaining -->
-<div class="time-display card" role="region" aria-label="Execution timing">
-  <div class="grid grid-cols-2 gap-4">
-    <!-- Elapsed Time -->
-    <div class="text-center">
-      <p class="text-sm text-secondary mb-2">Elapsed Time</p>
-      <div class="time-value font-mono">
-        <span data-unit="hours">{{ hours }}</span>:<span data-unit="minutes">{{ minutes }}</span>:<span data-unit="seconds">{{ seconds }}</span>
-      </div>
-      <p class="text-xs text-secondary mt-1">from start</p>
-    </div>
-
-    <!-- Estimated Remaining -->
-    <div class="text-center border-l pl-4">
-      <p class="text-sm text-secondary mb-2">Est. Remaining</p>
-      <div class="time-value font-mono" data-estimated="true">
-        <span data-unit="hours">{{ remHours }}</span>:<span data-unit="minutes">{{ remMinutes }}</span>:<span data-unit="seconds">{{ remSeconds }}</span>
-      </div>
-      <p class="text-xs text-secondary mt-1">estimated to complete</p>
-    </div>
-  </div>
-
-  <!-- Timeline Bar -->
-  <div class="mt-4 pt-4 border-t">
-    <div class="flex items-center gap-2 text-xs">
-      <span class="text-secondary">0%</span>
-      <div class="flex-1 h-1 bg-primary rounded-full" style="width: {{ progressPercent }}%;"></div>
-      <span class="text-secondary">100%</span>
-    </div>
-  </div>
-</div>
-
-<style scoped>
-.time-display {
-  padding: 16px;
-}
-
-.time-value {
-  font-size: 24px;
-  font-weight: 600;
-  letter-spacing: 1px;
-  color: var(--color-primary);
-}
-
-.time-value[data-estimated="true"] {
-  color: var(--color-secondary);
-}
-
-[data-unit] {
-  min-width: 32px;
-  text-align: center;
-  display: inline-block;
-}
-</style>
+<!-- Execution Time Display with Elapsed and Estimated Remaining -->
+<div class="time-display card" role="region" aria-label="Execution timing">
+  <div class="grid grid-cols-2 gap-4">
+    <!-- Elapsed Time -->
+    <div class="text-center">
+      <p class="text-sm text-secondary mb-2">Elapsed Time</p>
+      <div class="time-value font-mono">
+        <span data-unit="hours">{{ hours }}</span>:<span data-unit="minutes">{{ minutes }}</span>:<span data-unit="seconds">{{ seconds }}</span>
+      </div>
+      <p class="text-xs text-secondary mt-1">from start</p>
+    </div>
+
+    <!-- Estimated Remaining -->
+    <div class="text-center border-l pl-4">
+      <p class="text-sm text-secondary mb-2">Est. Remaining</p>
+      <div class="time-value font-mono" data-estimated="true">
+        <span data-unit="hours">{{ remHours }}</span>:<span data-unit="minutes">{{ remMinutes }}</span>:<span data-unit="seconds">{{ remSeconds }}</span>
+      </div>
+      <p class="text-xs text-secondary mt-1">estimated to complete</p>
+    </div>
+  </div>
+
+  <!-- Timeline Bar -->
+  <div class="mt-4 pt-4 border-t">
+    <div class="flex items-center gap-2 text-xs">
+      <span class="text-secondary">0%</span>
+      <div class="flex-1 h-1 bg-primary rounded-full" style="width: {{ progressPercent }}%;"></div>
+      <span class="text-secondary">100%</span>
+    </div>
+  </div>
+</div>
+
+<style scoped>
+.time-display {
+  padding: 16px;
+}
+
+.time-value {
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  color: var(--color-primary);
+}
+
+.time-value[data-estimated="true"] {
+  color: var(--color-secondary);
+}
+
+[data-unit] {
+  min-width: 32px;
+  text-align: center;
+  display: inline-block;
+}
+</style>