diff --git a/src/sidebar/git-panel.js b/src/sidebar/git-panel.js
new file mode 100644
index 0000000..7582929
--- /dev/null
+++ b/src/sidebar/git-panel.js
@@ -0,0 +1,84 @@
+function renderGitPanel(container, { gitStatus, gitDiff, gitStage, gitCommit, gitLog }) {
+    container.innerHTML = `
+        <div class="git-panel">
+            <div class="git-section">
+                <h4 class="git-section-title">Changes</h4>
+                <div class="git-changes" id="git-changes">
+                    <p class="git-loading">Loading...</p>
+                </div>
+            </div>
+            <div class="git-section">
+                <h4 class="git-section-title">Commit</h4>
+                <textarea class="git-commit-input" id="git-commit-msg" placeholder="Commit message..." rows="3"></textarea>
+                <button class="git-commit-btn" id="git-commit-btn">Commit</button>
+            </div>
+            <div class="git-section">
+                <h4 class="git-section-title">Recent Commits</h4>
+                <div class="git-log" id="git-log"></div>
+            </div>
+        </div>
+    `;
+
+    loadGitStatus();
+
+    async function loadGitStatus() {
+        const status = await gitStatus();
+        const changesEl = document.getElementById('git-changes');
+        if (!status || !changesEl) return;
+
+        if (status.error) {
+            changesEl.innerHTML = `<p class="git-info">${status.error}</p>`;
+            return;
+        }
+
+        const files = [
+            ...status.modified.map(f => ({ file: f, status: 'M', color: '#f59e0b' })),
+            ...status.not_added.map(f => ({ file: f, status: '?', color: '#6b7280' })),
+            ...status.created.map(f => ({ file: f, status: 'A', color: '#10b981' })),
+            ...status.deleted.map(f => ({ file: f, status: 'D', color: '#ef4444' })),
+            ...status.staged.map(f => ({ file: f, status: 'S', color: '#3b82f6' })),
+        ];
+
+        if (files.length === 0) {
+            changesEl.innerHTML = '<p class="git-info">No changes</p>';
+        } else {
+            changesEl.innerHTML = files.map(f => `
+                <div class="git-file" data-file="${f.file}">
+                    <span class="git-file-status" style="color:${f.color}">${f.status}</span>
+                    <span class="git-file-name">${f.file}</span>
+                    <button class="git-stage-btn" data-file="${f.file}" title="Stage file">+</button>
+                </div>
+            `).join('');
+
+            changesEl.querySelectorAll('.git-stage-btn').forEach(btn => {
+                btn.addEventListener('click', async (e) => {
+                    e.stopPropagation();
+                    await gitStage([btn.dataset.file]);
+                    loadGitStatus();
+                });
+            });
+        }
+
+        // Load log
+        const log = await gitLog();
+        const logEl = document.getElementById('git-log');
+        if (log && logEl) {
+            logEl.innerHTML = (log.all || []).slice(0, 10).map(entry => `
+                <div class="git-log-entry">
+                    <div class="git-log-msg">${entry.message}</div>
+                    <div class="git-log-meta">${entry.date?.substring(0, 10) || ''} &middot; ${entry.author_name || ''}</div>
+                </div>
+            `).join('') || '<p class="git-info">No commits</p>';
+        }
+    }
+
+    document.getElementById('git-commit-btn')?.addEventListener('click', async () => {
+        const msg = document.getElementById('git-commit-msg')?.value?.trim();
+        if (!msg) return;
+        await gitCommit(msg);
+        document.getElementById('git-commit-msg').value = '';
+        loadGitStatus();
+    });
+}
+
+module.exports = { renderGitPanel };