agentgui 1.0.274 → 1.0.275

package/static/templates/file-metadata.html

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

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

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

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