agentgui 1.0.67 → 1.0.68

package/static/templates/file-read-panel.html

@@ -0,0 +1,66 @@
+<!-- File Read Operation Display -->
+<div class="file-read-panel card" role="region" aria-label="File read operation: {{ filePath }}">
+  <div class="card-header flex items-start justify-between gap-3 mb-3 pb-3 border-b">
+    <div class="flex items-center gap-2 flex-1 min-w-0">
+      <svg class="w-4 h-4 text-primary flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+        <path d="M5.5 13a3 3 0 01.369-1.618l1.83-1.83a3 3 0 015.604 0l.83 1.83A3 3 0 0113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"/>
+      </svg>
+      <div class="flex-1 min-w-0">
+        <h4 class="font-semibold text-sm truncate">{{ fileName }}</h4>
+        <p class="text-xs text-secondary truncate" title="{{ filePath }}">{{ filePath }}</p>
+      </div>
+    </div>
+
+    <div class="flex items-center gap-2 flex-shrink-0">
+      <span class="badge badge-sm">Read</span>
+      <span class="badge badge-sm" aria-label="File size: {{ fileSize }}">{{ fileSizeFormatted }}</span>
+    </div>
+  </div>
+
+  <!-- File Metadata -->
+  <div class="text-xs text-secondary mb-3 pb-3 border-b space-y-1">
+    <p><span class="font-mono">{{ fileEncoding }}</span> • {{ lastModified }}</p>
+  </div>
+
+  <!-- Code Block with Syntax Highlighting -->
+  <pre class="code-block" role="region" aria-label="File content"><code class="language-{{ languageClass }}" data-line-count="{{ lineCount }}">{{ fileContent }}</code></pre>
+
+  <!-- Action Buttons -->
+  <div class="flex gap-2 mt-3 pt-3 border-t">
+    <button class="btn btn-sm btn-tertiary" data-action="copy" aria-label="Copy file content">
+      <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
+    </button>
+    <button class="btn btn-sm btn-tertiary" data-action="download" aria-label="Download file">
+      <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-2V6zm14 1a1 1 0 11-2 0 1 1 0 012 0z"/>
+      </svg>
+      Download
+    </button>
+  </div>
+</div>
+
+<style scoped>
+.file-read-panel {
+  padding: 16px;
+  background: var(--color-bg-primary);
+}
+
+.code-block {
+  background-color: var(--color-bg-code);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  padding: 12px;
+  overflow-x: auto;
+  font-size: 12px;
+  line-height: 1.5;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.btn-sm {
+  padding: 4px 8px;
+  font-size: 11px;
+}
+</style>

package/static/templates/file-write-panel.html

@@ -0,0 +1,120 @@
+<!-- File Write Operation Display with Before/After Comparison -->
+<div class="file-write-panel card" role="region" aria-label="File write operation: {{ filePath }}">
+  <div class="card-header flex items-start justify-between gap-3 mb-3 pb-3 border-b">
+    <div class="flex items-center gap-2 flex-1 min-w-0">
+      <svg class="w-4 h-4 text-primary flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+        <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM15.657 14.243a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM11 17a1 1 0 102 0v-1a1 1 0 10-2 0v1zM5.757 15.657a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414l-.707.707zM2 10a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.757 4.343a1 1 0 00-1.414 1.414l.707.707a1 1 0 001.414-1.414l-.707-.707z"/>
+      </svg>
+      <div class="flex-1 min-w-0">
+        <h4 class="font-semibold text-sm truncate">{{ fileName }}</h4>
+        <p class="text-xs text-secondary truncate" title="{{ filePath }}">{{ filePath }}</p>
+      </div>
+    </div>
+
+    <div class="flex items-center gap-2 flex-shrink-0">
+      <span class="badge badge-sm bg-yellow-100 text-yellow-800">Modified</span>
+    </div>
+  </div>
+
+  <!-- Tabs: Before/After/Diff -->
+  <div class="tabs mb-3" role="tablist">
+    <button class="tab-button active" data-tab="before" role="tab" aria-selected="true" aria-controls="before-panel">
+      Before
+    </button>
+    <button class="tab-button" data-tab="after" role="tab" aria-selected="false" aria-controls="after-panel">
+      After
+    </button>
+    <button class="tab-button" data-tab="diff" role="tab" aria-selected="false" aria-controls="diff-panel">
+      Diff
+    </button>
+  </div>
+
+  <!-- Before Panel -->
+  <div id="before-panel" class="tab-panel active" role="tabpanel" aria-labelledby="before-tab">
+    <pre class="code-block"><code class="language-{{ languageClass }}">{{ contentBefore }}</code></pre>
+  </div>
+
+  <!-- After Panel -->
+  <div id="after-panel" class="tab-panel hidden" role="tabpanel" aria-labelledby="after-tab">
+    <pre class="code-block"><code class="language-{{ languageClass }}">{{ contentAfter }}</code></pre>
+  </div>
+
+  <!-- Diff Panel -->
+  <div id="diff-panel" class="tab-panel hidden" role="tabpanel" aria-labelledby="diff-tab">
+    <pre class="code-block diff-block"><code>{{ diffContent }}</code></pre>
+  </div>
+
+  <!-- Action Buttons -->
+  <div class="flex gap-2 mt-3 pt-3 border-t">
+    <button class="btn btn-sm btn-tertiary" data-action="copy-before" aria-label="Copy original content">
+      Copy Before
+    </button>
+    <button class="btn btn-sm btn-tertiary" data-action="copy-after" aria-label="Copy new content">
+      Copy After
+    </button>
+    <button class="btn btn-sm btn-tertiary" data-action="download-diff" aria-label="Download diff">
+      Download Diff
+    </button>
+  </div>
+</div>
+
+<style scoped>
+.file-write-panel {
+  padding: 16px;
+}
+
+.tabs {
+  display: flex;
+  gap: 8px;
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: 16px;
+}
+
+.tab-button {
+  padding: 8px 12px;
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s;
+}
+
+.tab-button.active {
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
+}
+
+.tab-panel {
+  display: none;
+}
+
+.tab-panel.active {
+  display: block;
+}
+
+.code-block {
+  background-color: var(--color-bg-code);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  padding: 12px;
+  overflow-x: auto;
+  font-size: 12px;
+  line-height: 1.5;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.diff-block {
+  background-color: var(--color-bg-diff);
+}
+
+.btn-sm {
+  padding: 4px 8px;
+  font-size: 11px;
+}
+
+.hidden {
+  display: none;
+}
+</style>

package/static/templates/git-branch-remote.html

@@ -0,0 +1,107 @@
+<!-- Git Branch and Remote Display -->
+<div class="git-branch-remote card" role="region" aria-label="Git branch and remote information">
+  <!-- Current Branch -->
+  <div class="mb-3 pb-3 border-b">
+    <h5 class="font-semibold text-sm mb-2">Current Branch</h5>
+    <div class="flex items-center gap-2">
+      <svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
+      </svg>
+      <div>
+        <p class="font-mono font-semibold">{{ currentBranch }}</p>
+        <p class="text-xs text-secondary">{{ branchDescription }}</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Remote Branches -->
+  <div class="mb-3 pb-3 border-b">
+    <h5 class="font-semibold text-sm mb-2">Remotes</h5>
+    <div class="space-y-2">
+      {{ for remote in remotes }}
+      <div class="flex items-center justify-between text-sm">
+        <div class="flex items-center gap-2">
+          <span class="badge badge-sm">{{ remote.name }}</span>
+          <code class="font-mono text-xs">{{ remote.url }}</code>
+        </div>
+        <span class="text-secondary text-xs">{{ remote.status }}</span>
+      </div>
+      {{ end }}
+    </div>
+  </div>
+
+  <!-- Tracking Status -->
+  <div class="mb-3 pb-3 border-b">
+    <h5 class="font-semibold text-sm mb-2">Tracking Status</h5>
+    <div class="grid grid-cols-2 gap-3 text-sm">
+      <div class="flex items-center gap-2">
+        <svg class="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+          <path fill-rule="evenodd" d="M12 2a1 1 0 011 1v6.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L11 9.586V3a1 1 0 011-1z"/>
+        </svg>
+        <span><span class="font-semibold">{{ aheadCount }}</span> ahead</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <svg class="w-4 h-4 text-red-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+          <path fill-rule="evenodd" d="M8 18a1 1 0 001-1v-6.586l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 101.414 1.414L7 10.414V17a1 1 0 001 1z"/>
+        </svg>
+        <span><span class="font-semibold">{{ behindCount }}</span> behind</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Quick Actions -->
+  <div class="flex gap-2">
+    <button class="btn btn-sm" data-action="checkout-branch" aria-label="Switch branch">
+      Checkout
+    </button>
+    <button class="btn btn-sm" data-action="merge" aria-label="Merge branch">
+      Merge
+    </button>
+    <button class="btn btn-sm" data-action="rebase" aria-label="Rebase branch">
+      Rebase
+    </button>
+  </div>
+</div>
+
+<style scoped>
+.git-branch-remote {
+  padding: 16px;
+}
+
+.badge {
+  background-color: var(--color-primary);
+  color: white;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.badge-sm {
+  padding: 2px 6px;
+}
+
+.font-mono {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.btn {
+  padding: 6px 10px;
+  background-color: var(--color-primary);
+  color: white;
+  border: none;
+  border-radius: 3px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn:hover {
+  background-color: var(--color-primary-dark);
+}
+
+.btn-sm {
+  padding: 4px 8px;
+  font-size: 11px;
+}
+</style>

package/static/templates/git-diff-list.html

@@ -0,0 +1,101 @@
+<!-- Git Diff List for Multiple Files -->
+<div class="git-diff-list card" role="region" aria-label="Git diffs for changed files">
+  <div class="card-header border-b pb-3 mb-3">
+    <h4 class="font-semibold">{{ fileCount }} Files Changed</h4>
+  </div>
+
+  <!-- Diff Items -->
+  <div class="diff-items space-y-3">
+    {{ for file in diffs }}
+    <details class="diff-item">
+      <summary class="cursor-pointer font-medium py-2 px-3 bg-secondary hover:bg-hover-bg rounded flex items-center justify-between">
+        <div class="flex items-center gap-2 flex-1 min-w-0">
+          <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="truncate">{{ file.name }}</span>
+        </div>
+        <div class="flex gap-1 flex-shrink-0">
+          <span class="text-green-600 text-xs">+{{ file.additions }}</span>
+          <span class="text-red-600 text-xs">-{{ file.deletions }}</span>
+        </div>
+      </summary>
+
+      <!-- Diff Content -->
+      <div class="diff-content p-3 mt-2 bg-code rounded text-xs">
+        <pre><code class="language-diff">{{ file.diff }}</code></pre>
+      </div>
+    </details>
+    {{ end }}
+  </div>
+</div>
+
+<style scoped>
+.git-diff-list {
+  padding: 16px;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.diff-item {
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.diff-item[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;
+  flex-shrink: 0;
+}
+
+details[open] .chevron {
+  transform: rotate(180deg);
+}
+
+.diff-content {
+  background-color: var(--color-bg-code);
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
+  max-height: 300px;
+  overflow: auto;
+  margin-top: 8px;
+}
+
+.diff-content pre {
+  margin: 0;
+  padding: 0;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  line-height: 1.5;
+}
+
+/* Diff syntax highlighting */
+.diff-content code {
+  color: var(--color-text-terminal);
+}
+
+.diff-added {
+  color: #10b981;
+}
+
+.diff-removed {
+  color: #ef4444;
+}
+
+.diff-header {
+  color: #3b82f6;
+  font-weight: 600;
+}
+</style>

package/static/templates/git-log-visualization.html

@@ -0,0 +1,153 @@
+<!-- Git Log Visualization Timeline -->
+<div class="git-log-visualization card" role="region" aria-label="Git commit history">
+  <div class="card-header border-b pb-3 mb-3">
+    <h4 class="font-semibold">{{ commitCount }} Recent Commits</h4>
+  </div>
+
+  <!-- Timeline -->
+  <div class="commit-timeline" role="list">
+    {{ for commit in commits }}
+    <div class="commit-item" role="listitem">
+      <!-- Timeline Connector -->
+      <div class="commit-connector" aria-hidden="true"></div>
+
+      <!-- Commit Dot -->
+      <div class="commit-dot" aria-hidden="true">
+        <div class="dot-inner"></div>
+      </div>
+
+      <!-- Commit Card -->
+      <div class="commit-card">
+        <div class="flex items-start justify-between gap-2">
+          <div class="flex-1">
+            <h5 class="font-semibold text-sm">{{ commit.message }}</h5>
+            <p class="text-xs text-secondary">by {{ commit.author }}</p>
+          </div>
+          <code class="font-mono text-xs bg-code px-2 py-1 rounded">
+            {{ commit.hash }}
+          </code>
+        </div>
+
+        <!-- Commit Details -->
+        <div class="text-xs mt-2 space-y-1">
+          <p class="text-secondary" title="{{ commit.timestampFull }}">
+            {{ commit.timestamp }}
+          </p>
+
+          <!-- Changed Files -->
+          {{ if commit.files }}
+          <div class="mt-2">
+            <span class="text-secondary">{{ commit.filesCount }} files</span>
+            <span class="text-green-600">+{{ commit.additions }}</span>
+            <span class="text-red-600">-{{ commit.deletions }}</span>
+          </div>
+          {{ end }}
+
+          <!-- Tags -->
+          {{ if commit.tags }}
+          <div class="flex gap-1 flex-wrap mt-2">
+            {{ for tag in commit.tags }}
+            <span class="badge badge-tag">{{ tag }}</span>
+            {{ end }}
+          </div>
+          {{ end }}
+        </div>
+      </div>
+    </div>
+    {{ end }}
+  </div>
+</div>
+
+<style scoped>
+.git-log-visualization {
+  padding: 16px;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.commit-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+.commit-timeline::before {
+  content: '';
+  position: absolute;
+  left: 19px;
+  top: 12px;
+  bottom: 0;
+  width: 2px;
+  background: linear-gradient(to bottom, var(--color-primary), transparent);
+}
+
+.commit-item {
+  position: relative;
+  display: flex;
+  gap: 12px;
+  padding-bottom: 16px;
+}
+
+.commit-item:last-child {
+  padding-bottom: 0;
+}
+
+.commit-dot {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: var(--color-bg-secondary);
+  border: 2px solid var(--color-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.dot-inner {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--color-primary);
+}
+
+.commit-card {
+  flex: 1;
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  padding: 10px;
+  margin-top: 2px;
+}
+
+.commit-card:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.font-mono {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.bg-code {
+  background-color: var(--color-bg-code);
+  border-radius: 2px;
+}
+
+.badge {
+  background-color: var(--color-primary);
+  color: white;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.badge-tag {
+  background-color: var(--color-secondary);
+}
+</style>

package/static/templates/git-status-panel.html

@@ -0,0 +1,115 @@
+<!-- Git Status Panel -->
+<div class="git-status-panel card" role="region" aria-label="Git repository status">
+  <div class="card-header flex items-center justify-between mb-3 pb-3 border-b">
+    <div>
+      <h4 class="font-semibold">{{ repoName }}</h4>
+      <p class="text-xs text-secondary">{{ currentBranch }} @ {{ commitHash }}</p>
+    </div>
+    <div class="badge" data-status="{{ repoStatus }}">
+      {{ repoStatusLabel }}
+    </div>
+  </div>
+
+  <!-- File Changes Summary -->
+  <div class="changes-summary grid grid-cols-3 gap-2 mb-3 pb-3 border-b">
+    <div class="text-center">
+      <p class="text-2xl font-bold text-green-600">{{ modifiedCount }}</p>
+      <p class="text-xs text-secondary">Modified</p>
+    </div>
+    <div class="text-center border-l border-r pl-2 pr-2">
+      <p class="text-2xl font-bold text-blue-600">{{ addedCount }}</p>
+      <p class="text-xs text-secondary">Added</p>
+    </div>
+    <div class="text-center">
+      <p class="text-2xl font-bold text-red-600">{{ deletedCount }}</p>
+      <p class="text-xs text-secondary">Deleted</p>
+    </div>
+  </div>
+
+  <!-- File List -->
+  <div class="file-list space-y-1">
+    <div class="text-xs font-semibold text-secondary mb-2">Changed Files</div>
+    {{ for file in changedFiles }}
+    <div class="file-item flex items-center gap-2 text-sm py-1">
+      <span class="status-icon" data-status="{{ file.status }}" aria-hidden="true">
+        {{ if file.status == 'modified' }}M{{ else if file.status == 'added' }}A{{ else if file.status == 'deleted' }}D{{ end }}
+      </span>
+      <span class="file-path flex-1 truncate" title="{{ file.path }}">{{ file.path }}</span>
+    </div>
+    {{ end }}
+  </div>
+
+  <!-- Actions -->
+  <div class="flex gap-2 mt-3 pt-3 border-t">
+    <button class="btn btn-sm" data-action="commit" aria-label="Open commit dialog">
+      Commit
+    </button>
+    <button class="btn btn-sm" data-action="push" aria-label="Push changes">
+      Push
+    </button>
+    <button class="btn btn-sm" data-action="pull" aria-label="Pull changes">
+      Pull
+    </button>
+  </div>
+</div>
+
+<style scoped>
+.git-status-panel {
+  padding: 16px;
+}
+
+.status-icon {
+  display: inline-block;
+  width: 20px;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 4px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+
+.status-icon[data-status="modified"] {
+  color: #16a34a;
+  background-color: #dcfce7;
+}
+
+.status-icon[data-status="added"] {
+  color: #2563eb;
+  background-color: #dbeafe;
+}
+
+.status-icon[data-status="deleted"] {
+  color: #dc2626;
+  background-color: #fee2e2;
+}
+
+.file-item:hover {
+  background-color: var(--color-bg-hover);
+}
+
+.file-path {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 12px;
+}
+
+.btn {
+  padding: 6px 10px;
+  background-color: var(--color-primary);
+  color: white;
+  border: none;
+  border-radius: 3px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn:hover {
+  background-color: var(--color-primary-dark);
+}
+
+.btn-sm {
+  padding: 4px 8px;
+  font-size: 11px;
+}
+</style>