codex-lens 0.1.28 → 0.1.29

package/src/global.css

@@ -643,6 +643,310 @@ body {
   background: transparent;
 }
 
+/* ==================== Git Status Bar ==================== */
+.git-status-bar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 6px 14px;
+  background: rgba(148, 163, 184, 0.08);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+}
+
+.git-branch {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--accent-color);
+}
+
+.git-branch-icon {
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+.git-stats {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.git-staged,
+.git-unstaged {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.git-staged-count {
+  font-weight: 600;
+  color: var(--success-color);
+}
+
+.git-unstaged-count {
+  font-weight: 600;
+  color: var(--warning-color);
+}
+
+.git-changes-btn {
+  padding: 4px 10px;
+  font-size: 11px;
+  background: transparent;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-xs);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.git-changes-btn:hover {
+  background: var(--accent-soft);
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+}
+
+/* ==================== Staged Changes Panel ==================== */
+.staged-changes-panel {
+  position: absolute;
+  top: 52px;
+  left: 0;
+  right: 0;
+  max-height: 400px;
+  background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
+  border-bottom: 1px solid var(--border-color);
+  z-index: 99;
+  overflow-y: auto;
+  animation: slideDown 0.2s ease;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.staged-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 16px;
+  background: rgba(15, 23, 42, 0.6);
+  border-bottom: 1px solid var(--border-color);
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.staged-panel-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.stage-btn,
+.unstage-btn {
+  padding: 4px 10px;
+  font-size: 11px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-xs);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.stage-btn:hover,
+.unstage-btn:hover {
+  background: var(--accent-soft);
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+}
+
+.close-btn {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 16px;
+  border-radius: var(--radius-xs);
+  transition: all var(--transition-fast);
+}
+
+.close-btn:hover {
+  background: rgba(239, 68, 68, 0.2);
+  color: var(--danger-color);
+}
+
+.changes-section {
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.changes-section:last-child {
+  border-bottom: none;
+}
+
+.changes-section-header {
+  padding: 4px 16px;
+}
+
+.changes-section-title {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.changes-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.change-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 16px;
+  cursor: pointer;
+  transition: background var(--transition-fast);
+}
+
+.change-item:hover {
+  background: rgba(148, 163, 184, 0.08);
+}
+
+.change-item.staged {
+  background: var(--accent-soft);
+}
+
+.change-icon {
+  width: 16px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.change-item.staged .change-icon {
+  color: var(--success-color);
+}
+
+.change-status {
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  border-radius: 2px;
+}
+
+.change-status.M { background: var(--warning-color); color: var(--bg-primary); }
+.change-status.A { background: var(--success-color); color: var(--bg-primary); }
+.change-status.D { background: var(--danger-color); color: var(--text-primary); }
+.change-status.R { background: var(--info-color); color: var(--text-primary); }
+.change-status.\? { background: var(--text-muted); color: var(--bg-primary); }
+
+.change-path {
+  flex: 1;
+  font-size: 12px;
+  font-family: var(--font-mono);
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.no-changes {
+  padding: 24px;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.commit-section {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  background: rgba(15, 23, 42, 0.6);
+  border-top: 1px solid var(--border-color);
+}
+
+.commit-input {
+  flex: 1;
+  padding: 8px 12px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: 12px;
+  font-family: var(--font-family);
+}
+
+.commit-input:focus {
+  outline: none;
+  border-color: var(--accent-color);
+}
+
+.commit-btn {
+  padding: 8px 16px;
+  background: var(--accent-color);
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--bg-primary);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.commit-btn:hover {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+}
+
+/* ==================== File Tree Git Badges ==================== */
+.file-git-badge {
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  border-radius: 2px;
+  margin-right: 2px;
+}
+
+.file-git-badge.staged {
+  background: var(--success-color);
+  color: var(--bg-primary);
+}
+
+.file-git-badge.wt {
+  background: var(--warning-color);
+  color: var(--bg-primary);
+}
+
 @media (max-width: 1024px) {
   .left-panel {
     width: 220px;

package/src/watcher.js

@@ -81,6 +81,23 @@ class FileWatcher {
     this.wsEmitter = wsEmitter;
     this.watcher = null;
     this.fileContents = new Map();
+    this.gitStatusCallback = null;
+    this._gitStatusTimeout = null;
+  }
+
+  setGitStatusCallback(callback) {
+    this.gitStatusCallback = callback;
+  }
+
+  _scheduleGitStatusUpdate(filePath) {
+    if (this.gitStatusCallback) {
+      if (this._gitStatusTimeout) {
+        clearTimeout(this._gitStatusTimeout);
+      }
+      this._gitStatusTimeout = setTimeout(() => {
+        this.gitStatusCallback(filePath);
+      }, 500);
+    }
   }
 
   async start() {
@@ -161,6 +178,9 @@ class FileWatcher {
 
         this.emitFileChange(filePath, newContent, diff);
       }
+
+      // Schedule git status update if git is available
+      this._scheduleGitStatusUpdate(filePath);
     } catch (error) {
       logger.errorWithStack(`Error handling file change: ${filePath}`, error);
     }