diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 0000000..9eb7c6e
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,41 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+type: Bug
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Error message**
+If applicable, add the error message you see to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+
+**Additional context**
+Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 0000000..712801b
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: "[Feature]"
+labels: ''
+assignees: ''
+type: Feature
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
diff --git a/README.de.md b/README.de.md
new file mode 100644
index 0000000..a3e190d
--- /dev/null
+++ b/README.de.md
@@ -0,0 +1,239 @@
+<div align="center">
+  <img src="public/logo.svg" alt="CloudCLI UI" width="64" height="64">
+  <h1>Cloud CLI (auch bekannt als Claude Code UI)</h1>
+  <p>Eine Desktop- und Mobile-Oberfläche für <a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a>, <a href="https://docs.cursor.com/en/cli/overview">Cursor CLI</a>, <a href="https://developers.openai.com/codex">Codex</a> und <a href="https://geminicli.com/">Gemini-CLI</a>.<br>Lokal oder remote nutzbar – verwalte deine aktiven Projekte und Sitzungen von überall.</p>
+</div>
+
+<p align="center">
+  <a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://cloudcli.ai/docs">Dokumentation</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">Fehler melden</a> · <a href="CONTRIBUTING.md">Mitwirken</a>
+</p>
+
+<p align="center">
+  <a href="https://cloudcli.ai"><img src="https://img.shields.io/badge/☁️_CloudCLI_Cloud-Jetzt_testen-0066FF?style=for-the-badge" alt="CloudCLI Cloud"></a>
+  <a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Community_beitreten-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Discord beitreten"></a>
+  <br><br>
+  <a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</p>
+
+<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a> · <b>Deutsch</b></i></div>
+
+---
+
+## Screenshots
+
+<div align="center">
+
+<table>
+<tr>
+<td align="center">
+<h3>Desktop-Ansicht</h3>
+<img src="public/screenshots/desktop-main.png" alt="Desktop-Oberfläche" width="400">
+<br>
+<em>Hauptoberfläche mit Projektübersicht und Chat</em>
+</td>
+<td align="center">
+<h3>Mobile-Erfahrung</h3>
+<img src="public/screenshots/mobile-chat.png" alt="Mobile-Oberfläche" width="250">
+<br>
+<em>Responsives mobiles Design mit Touch-Navigation</em>
+</td>
+</tr>
+<tr>
+<td align="center" colspan="2">
+<h3>CLI-Auswahl</h3>
+<img src="public/screenshots/cli-selection.png" alt="CLI-Auswahl" width="400">
+<br>
+<em>Wähle zwischen Claude Code, Gemini, Cursor CLI und Codex</em>
+</td>
+</tr>
+</table>
+
+
+
+</div>
+
+## Funktionen
+
+- **Responsives Design** – Funktioniert nahtlos auf Desktop, Tablet und Mobilgerät, sodass du Agents auch vom Smartphone aus nutzen kannst
+- **Interaktives Chat-Interface** – Eingebaute Chat-Oberfläche für die reibungslose Kommunikation mit den Agents
+- **Integriertes Shell-Terminal** – Direkter Zugriff auf die Agents CLI über die eingebaute Shell-Funktionalität
+- **Datei-Explorer** – Interaktiver Dateibaum mit Syntaxhervorhebung und Live-Bearbeitung
+- **Git-Explorer** – Änderungen anzeigen, stagen und committen. Branches wechseln ebenfalls möglich
+- **Sitzungsverwaltung** – Gespräche fortsetzen, mehrere Sitzungen verwalten und Verlauf nachverfolgen
+- **Plugin-System** – CloudCLI mit eigenen Plugins erweitern – neue Tabs, Backend-Dienste und Integrationen hinzufügen. [Eigenes Plugin erstellen →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)
+- **TaskMaster AI Integration** *(Optional)* – Erweitertes Projektmanagement mit KI-gestützter Aufgabenplanung, PRD-Parsing und Workflow-Automatisierung
+- **Modell-Kompatibilität** – Funktioniert mit Claude, GPT und Gemini (vollständige Liste unterstützter Modelle in [`shared/modelConstants.js`](shared/modelConstants.js))
+
+
+## Schnellstart
+
+### CloudCLI Cloud (Empfohlen)
+
+Der schnellste Einstieg – keine lokale Einrichtung erforderlich. Erhalte eine vollständig verwaltete, containerisierte Entwicklungsumgebung, die über Web, Mobile App, API oder deine bevorzugte IDE erreichbar ist.
+
+**[Mit CloudCLI Cloud starten](https://cloudcli.ai)**
+
+
+### Self-Hosted (Open Source)
+
+CloudCLI UI sofort mit **npx** ausprobieren (erfordert **Node.js** v22+):
+
+```bash
+npx @siteboon/claude-code-ui
+```
+
+Oder **global** installieren für regelmäßige Nutzung:
+
+```bash
+npm install -g @siteboon/claude-code-ui
+cloudcli
+```
+
+Öffne `http://localhost:3001` – alle vorhandenen Sitzungen werden automatisch erkannt.
+
+Die **[Dokumentation →](https://cloudcli.ai/docs)** enthält weitere Konfigurationsoptionen, PM2, Remote-Server-Einrichtung und mehr.
+
+
+---
+
+## Welche Option passt zu dir?
+
+CloudCLI UI ist die Open-Source-UI-Schicht, die CloudCLI Cloud antreibt. Du kannst es auf deinem eigenen Rechner selbst hosten oder CloudCLI Cloud nutzen, das darauf aufbaut und eine vollständig verwaltete Cloud-Umgebung, Team-Funktionen und tiefere Integrationen bietet.
+
+| | CloudCLI UI (Self-hosted) | CloudCLI Cloud |
+|---|---|---|
+| **Am besten für** | Entwickler:innen, die eine vollständige UI für lokale Agent-Sitzungen auf ihrem eigenen Rechner möchten | Teams und Entwickler:innen, die Agents in der Cloud betreiben möchten, überall erreichbar |
+| **Zugriff** | Browser via `[deineIP]:port` | Browser, jede IDE, REST API, n8n |
+| **Einrichtung** | `npx @siteboon/claude-code-ui` | Keine Einrichtung erforderlich |
+| **Rechner muss laufen** | Ja | Nein |
+| **Mobiler Zugriff** | Jeder Browser im Netzwerk | Jedes Gerät, native App in Entwicklung |
+| **Verfügbare Sitzungen** | Alle Sitzungen automatisch aus `~/.claude` erkannt | Alle Sitzungen in deiner Cloud-Umgebung |
+| **Unterstützte Agents** | Claude Code, Cursor CLI, Codex, Gemini CLI | Claude Code, Cursor CLI, Codex, Gemini CLI |
+| **Datei-Explorer und Git** | Ja, direkt in der UI | Ja, direkt in der UI |
+| **MCP-Konfiguration** | Über UI verwaltet, synchronisiert mit lokalem `~/.claude` | Über UI verwaltet |
+| **IDE-Zugriff** | Deine lokale IDE | Jede IDE, die mit deiner Cloud-Umgebung verbunden ist |
+| **REST API** | Ja | Ja |
+| **n8n-Node** | Nein | Ja |
+| **Team-Sharing** | Nein | Ja |
+| **Plattformkosten** | Kostenlos, Open Source | Ab $7/Monat |
+
+> Beide Optionen verwenden deine eigenen KI-Abonnements (Claude, Cursor usw.) – CloudCLI stellt die Umgebung bereit, nicht die KI.
+
+---
+
+## Sicherheit & Tool-Konfiguration
+
+**🔒 Wichtiger Hinweis**: Alle Claude Code Tools sind **standardmäßig deaktiviert**. Dies verhindert, dass potenziell schädliche Operationen automatisch ausgeführt werden.
+
+### Tools aktivieren
+
+Um den vollen Funktionsumfang von Claude Code zu nutzen, müssen Tools manuell aktiviert werden:
+
+1. **Tool-Einstellungen öffnen** – Klicke auf das Zahnrad-Symbol in der Seitenleiste
+2. **Selektiv aktivieren** – Nur die benötigten Tools einschalten
+3. **Einstellungen übernehmen** – Deine Einstellungen werden lokal gespeichert
+
+<div align="center">
+
+![Tool-Einstellungen Modal](public/screenshots/tools-modal.png)
+*Tool-Einstellungen – nur aktivieren, was benötigt wird*
+
+</div>
+
+**Empfohlene Vorgehensweise**: Mit grundlegenden Tools starten und bei Bedarf weitere hinzufügen. Die Einstellungen können jederzeit angepasst werden.
+
+---
+
+## Plugins
+
+CloudCLI verfügt über ein Plugin-System, mit dem benutzerdefinierte Tabs mit eigener Frontend-UI und optionalem Node.js-Backend hinzugefügt werden können. Plugins können direkt in **Einstellungen > Plugins** aus Git-Repos installiert oder selbst entwickelt werden.
+
+### Verfügbare Plugins
+
+| Plugin | Beschreibung |
+|---|---|
+| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | Zeigt Dateianzahl, Codezeilen, Dateityp-Aufschlüsselung, größte Dateien und zuletzt geänderte Dateien des aktuellen Projekts |
+
+### Eigenes Plugin erstellen
+
+**[Plugin-Starter-Vorlage →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** – Forke dieses Repository, um ein eigenes Plugin zu erstellen. Es enthält ein funktionierendes Beispiel mit Frontend-Rendering, Live-Kontext-Updates und RPC-Kommunikation zu einem Backend-Server.
+
+**[Plugin-Dokumentation →](https://cloudcli.ai/docs/plugin-overview)** – Vollständige Anleitung zur Plugin-API, zum Manifest-Format, zum Sicherheitsmodell und mehr.
+
+---
+## FAQ
+
+<details>
+<summary>Wie unterscheidet sich das von Claude Code Remote Control?</summary>
+
+Claude Code Remote Control ermöglicht es, Nachrichten an eine bereits im lokalen Terminal laufende Sitzung zu senden. Der Rechner muss eingeschaltet bleiben, das Terminal muss offen bleiben, und Sitzungen laufen nach etwa 10 Minuten ohne Netzwerkverbindung ab.
+
+CloudCLI UI und CloudCLI Cloud erweitern Claude Code, anstatt neben ihm zu laufen – MCP-Server, Berechtigungen, Einstellungen und Sitzungen sind exakt dieselben, die Claude Code nativ verwendet. Nichts wird dupliziert oder separat verwaltet.
+
+Das bedeutet in der Praxis:
+
+- **Alle Sitzungen, nicht nur eine** – CloudCLI UI erkennt automatisch jede Sitzung aus dem `~/.claude`-Ordner. Remote Control stellt nur die einzelne aktive Sitzung bereit, um sie in der Claude Mobile App verfügbar zu machen.
+- **Deine Einstellungen sind deine Einstellungen** – MCP-Server, Tool-Berechtigungen und Projektkonfiguration, die in CloudCLI UI geändert werden, werden direkt in die Claude Code-Konfiguration geschrieben und treten sofort in Kraft – und umgekehrt.
+- **Funktioniert mit mehr Agents** – Claude Code, Cursor CLI, Codex und Gemini CLI, nicht nur Claude Code.
+- **Vollständige UI, nicht nur ein Chat-Fenster** – Datei-Explorer, Git-Integration, MCP-Verwaltung und ein Shell-Terminal sind alle eingebaut.
+- **CloudCLI Cloud läuft in der Cloud** – Laptop zuklappen, der Agent läuft weiter. Kein Terminal zu überwachen, kein Rechner, der laufen muss.
+
+</details>
+
+<details>
+<summary>Muss ich ein KI-Abonnement separat bezahlen?</summary>
+
+Ja. CloudCLI stellt die Umgebung bereit, nicht die KI. Du bringst dein eigenes Claude-, Cursor-, Codex- oder Gemini-Abonnement mit. CloudCLI Cloud beginnt bei $7/Monat für die gehostete Umgebung zusätzlich dazu.
+
+</details>
+
+<details>
+<summary>Kann ich CloudCLI UI auf meinem Smartphone nutzen?</summary>
+
+Ja. Bei Self-Hosted: Server auf dem eigenen Rechner starten und `[deineIP]:port` in einem beliebigen Browser im Netzwerk öffnen. Bei CloudCLI Cloud: Von jedem Gerät aus öffnen – kein VPN, keine Portweiterleitung, keine Einrichtung. Eine native App ist ebenfalls in Entwicklung.
+
+</details>
+
+<details>
+<summary>Wirken sich Änderungen in der UI auf mein lokales Claude Code-Setup aus?</summary>
+
+Ja, bei Self-Hosted. CloudCLI UI liest aus und schreibt in dieselbe `~/.claude`-Konfiguration, die Claude Code nativ verwendet. MCP-Server, die über die UI hinzugefügt werden, erscheinen sofort in Claude Code und umgekehrt.
+
+</details>
+
+---
+
+## Community & Support
+
+- **[Dokumentation](https://cloudcli.ai/docs)** — Installation, Konfiguration, Funktionen und Fehlerbehebung
+- **[Discord](https://discord.gg/buxwujPNRE)** — Hilfe erhalten und mit anderen Nutzer:innen in Kontakt treten
+- **[GitHub Issues](https://github.com/siteboon/claudecodeui/issues)** — Fehlerberichte und Feature-Anfragen
+- **[Beitragsrichtlinien](CONTRIBUTING.md)** — So kannst du zum Projekt beitragen
+
+## Lizenz
+
+GNU General Public License v3.0 – siehe [LICENSE](LICENSE)-Datei für Details.
+
+Dieses Projekt ist Open Source und kann unter der GPL v3-Lizenz kostenlos genutzt, modifiziert und verteilt werden.
+
+## Danksagungen
+
+### Erstellt mit
+- **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropics offizielle CLI
+- **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursors offizielle CLI
+- **[Codex](https://developers.openai.com/codex)** - OpenAI Codex
+- **[Gemini-CLI](https://geminicli.com/)** - Google Gemini CLI
+- **[React](https://react.dev/)** - UI-Bibliothek
+- **[Vite](https://vitejs.dev/)** - Schnelles Build-Tool und Dev-Server
+- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS-Framework
+- **[CodeMirror](https://codemirror.net/)** - Erweiterter Code-Editor
+- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(Optional)* - KI-gestütztes Projektmanagement und Aufgabenplanung
+
+
+### Sponsoren
+- [Siteboon - KI-gestützter Website-Builder](https://siteboon.ai)
+---
+
+<div align="center">
+  <strong>Mit Sorgfalt für die Claude Code-, Cursor- und Codex-Community erstellt.</strong>
+</div>
diff --git a/README.ja.md b/README.ja.md
index a64e3df..6073e53 100644
--- a/README.ja.md
+++ b/README.ja.md
@@ -6,7 +6,7 @@
 
 [Claude Code](https://docs.anthropic.com/en/docs/claude-code)、[Cursor CLI](https://docs.cursor.com/en/cli/overview)、[Codex](https://developers.openai.com/codex) 向けのデスクトップ・モバイル UI です。ローカルまたはリモートで使用して、Claude Code、Cursor、Codex のアクティブなプロジェクトやセッションを確認し、どこからでも（モバイルやデスクトップから）変更を加えることができます。どこでも使える適切なインターフェースを提供します。
 
-<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <b>日本語</b></i></div>
+<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <b>日本語</b> · <a href="./README.de.md">Deutsch</a></i></div>
 
 ## スクリーンショット
 
diff --git a/README.ko.md b/README.ko.md
index 4ac511a..8cbbe8f 100644
--- a/README.ko.md
+++ b/README.ko.md
@@ -6,7 +6,7 @@
 
 [Claude Code](https://docs.anthropic.com/en/docs/claude-code), [Cursor CLI](https://docs.cursor.com/en/cli/overview) 및 [Codex](https://developers.openai.com/codex)를 위한 데스크톱 및 모바일 UI입니다. 로컬 또는 원격으로 사용하여 Claude Code, Cursor 또는 Codex의 활성 프로젝트와 세션을 확인하고, 어디서든(모바일 또는 데스크톱) 변경할 수 있습니다. 어디서든 작동하는 적절한 인터페이스를 제공합니다.
 
-<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <b>한국어</b> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
+<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <b>한국어</b> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a> · <a href="./README.de.md">Deutsch</a></i></div>
 
 ## 스크린샷
 
diff --git a/README.md b/README.md
index 3eb4b0f..7df11e2 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@
   <a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
 </p>
 
-<div align="right"><i><b>English</b> · <a href="./README.ru.md">Русский</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
+<div align="right"><i><b>English</b> · <a href="./README.ru.md">Русский</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a> · <a href="./README.de.md">Deutsch</a></i></div>
 
 ---
 
diff --git a/README.ru.md b/README.ru.md
index d864711..06e0f98 100644
--- a/README.ru.md
+++ b/README.ru.md
@@ -15,7 +15,7 @@
   <a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
 </p>
 
-<div align="right"><i><a href="./README.md">English</a> · <b>Русский</b> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
+<div align="right"><i><a href="./README.md">English</a> · <b>Русский</b> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a> · <a href="./README.de.md">Deutsch</a></i></div>
 
 ## Скриншоты
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 1ccad8a..54d94c5 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -6,7 +6,7 @@
 
 [Claude Code](https://docs.anthropic.com/en/docs/claude-code)、[Cursor CLI](https://docs.cursor.com/en/cli/overview) 和 [Codex](https://developers.openai.com/codex) 的桌面端和移动端界面。您可以在本地或远程使用它来查看 Claude Code、Cursor 或 Codex 中的活跃项目和会话,并从任何地方(移动端或桌面端)对它们进行修改。这为您提供了一个在任何地方都能正常使用的合适界面。
 
-<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.ko.md">한국어</a> · <b>中文</b> · <a href="./README.ja.md">日本語</a></i></div>
+<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.ko.md">한국어</a> · <b>中文</b> · <a href="./README.ja.md">日本語</a> · <a href="./README.de.md">Deutsch</a></i></div>
 
 ## 截图
 
diff --git a/package-lock.json b/package-lock.json
index 82ad891..979d333 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -65,6 +65,7 @@
         "sqlite": "^5.1.1",
         "sqlite3": "^5.1.7",
         "tailwind-merge": "^3.3.1",
+        "web-push": "^3.6.7",
         "ws": "^8.14.2"
       },
       "bin": {
@@ -1903,12 +1904,13 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.0.tgz",
-      "integrity": "sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1919,12 +1921,13 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.0.tgz",
-      "integrity": "sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -2047,9 +2050,9 @@
       }
     },
     "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.3.tgz",
-      "integrity": "sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
       "cpu": [
         "arm64"
       ],
@@ -2065,13 +2068,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.0"
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
       }
     },
     "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.3.tgz",
-      "integrity": "sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
       "cpu": [
         "x64"
       ],
@@ -2087,7 +2090,7 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.0"
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
       }
     },
     "node_modules/@img/sharp-wasm32": {
@@ -2111,9 +2114,9 @@
       }
     },
     "node_modules/@img/sharp-win32-arm64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.3.tgz",
-      "integrity": "sha512-MjnHPnbqMXNC2UgeLJtX4XqoVHHlZNd+nPt1kRPmj63wURegwBhZlApELdtxM2OIZDRv/DFtLcNhVbd1z8GYXQ==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
       "cpu": [
         "arm64"
       ],
@@ -4608,7 +4611,6 @@
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
       "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 14"
@@ -4914,6 +4916,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/asn1.js": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
+      "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+      "license": "MIT",
+      "dependencies": {
+        "bn.js": "^4.0.0",
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
     "node_modules/ast-types": {
       "version": "0.13.4",
       "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz",
@@ -5176,6 +5190,12 @@
         "readable-stream": "^3.4.0"
       }
     },
+    "node_modules/bn.js": {
+      "version": "4.12.3",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.3.tgz",
+      "integrity": "sha512-fGTi3gxV/23FTYdAoUtLYp6qySe2KE3teyZitipKNRuVYcBkoP/bB3guXN/XVKUe9mxCHXnc9C4ocyz8OmgN0g==",
+      "license": "MIT"
+    },
     "node_modules/body-parser": {
       "version": "1.20.3",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
@@ -8950,6 +8970,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/http_ece": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/http_ece/-/http_ece-1.2.0.tgz",
+      "integrity": "sha512-JrF8SSLVmcvc5NducxgyOrKXe3EsyHMgBFgSaIUGmArKe+rwr0uphRkRXvwiom3I+fpIfoItveHrfudL8/rxuA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
@@ -8991,7 +9020,6 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
       "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "agent-base": "^7.1.2",
@@ -11749,6 +11777,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "license": "ISC"
+    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -14767,6 +14801,40 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/sharp/node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.0.tgz",
+      "integrity": "sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/sharp/node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.0.tgz",
+      "integrity": "sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/sharp/node_modules/@img/sharp-linux-arm": {
       "version": "0.34.3",
       "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.3.tgz",
@@ -14836,6 +14904,72 @@
         "@img/sharp-libvips-linux-x64": "1.2.0"
       }
     },
+    "node_modules/sharp/node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.3.tgz",
+      "integrity": "sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.0"
+      }
+    },
+    "node_modules/sharp/node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.3.tgz",
+      "integrity": "sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.0"
+      }
+    },
+    "node_modules/sharp/node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.3.tgz",
+      "integrity": "sha512-MjnHPnbqMXNC2UgeLJtX4XqoVHHlZNd+nPt1kRPmj63wURegwBhZlApELdtxM2OIZDRv/DFtLcNhVbd1z8GYXQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/sharp/node_modules/@img/sharp-win32-x64": {
       "version": "0.34.3",
       "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.3.tgz",
@@ -17067,6 +17201,46 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/web-push": {
+      "version": "3.6.7",
+      "resolved": "https://registry.npmjs.org/web-push/-/web-push-3.6.7.tgz",
+      "integrity": "sha512-OpiIUe8cuGjrj3mMBFWY+e4MMIkW3SVT+7vEIjvD9kejGUypv8GPDf84JdPWskK8zMRIJ6xYGm+Kxr8YkPyA0A==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "asn1.js": "^5.3.0",
+        "http_ece": "1.2.0",
+        "https-proxy-agent": "^7.0.0",
+        "jws": "^4.0.0",
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "web-push": "src/cli.js"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "node_modules/web-push/node_modules/jwa": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
+      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/web-push/node_modules/jws": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
+      "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
diff --git a/package.json b/package.json
index 6bdb1c9..f98afb0 100644
--- a/package.json
+++ b/package.json
@@ -103,6 +103,7 @@
     "sqlite": "^5.1.1",
     "sqlite3": "^5.1.7",
     "tailwind-merge": "^3.3.1",
+    "web-push": "^3.6.7",
     "ws": "^8.14.2"
   },
   "devDependencies": {
diff --git a/public/sw.js b/public/sw.js
index 181c60d..f521dda 100755
--- a/public/sw.js
+++ b/public/sw.js
@@ -19,14 +19,17 @@ self.addEventListener('install', event => {
 
 // Fetch event
 self.addEventListener('fetch', event => {
+  // Never cache API requests or WebSocket upgrades
+  if (event.request.url.includes('/api/') || event.request.url.includes('/ws')) {
+    return;
+  }
+
   event.respondWith(
     caches.match(event.request)
       .then(response => {
-        // Return cached response if found
         if (response) {
           return response;
         }
-        // Otherwise fetch from network
         return fetch(event.request);
       }
     )
@@ -46,4 +49,57 @@ self.addEventListener('activate', event => {
       );
     })
   );
-});
\ No newline at end of file
+  self.clients.claim();
+});
+
+// Push notification event
+self.addEventListener('push', event => {
+  if (!event.data) return;
+
+  let payload;
+  try {
+    payload = event.data.json();
+  } catch {
+    payload = { title: 'Claude Code UI', body: event.data.text() };
+  }
+
+  const options = {
+    body: payload.body || '',
+    icon: '/logo-256.png',
+    badge: '/logo-128.png',
+    data: payload.data || {},
+    tag: payload.data?.tag || `${payload.data?.sessionId || 'global'}:${payload.data?.code || 'default'}`,
+    renotify: true
+  };
+
+  event.waitUntil(
+    self.registration.showNotification(payload.title || 'Claude Code UI', options)
+  );
+});
+
+// Notification click event
+self.addEventListener('notificationclick', event => {
+  event.notification.close();
+
+  const sessionId = event.notification.data?.sessionId;
+  const provider = event.notification.data?.provider || null;
+  const urlPath = sessionId ? `/session/${sessionId}` : '/';
+
+  event.waitUntil(
+    self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then(async clientList => {
+      for (const client of clientList) {
+        if (client.url.includes(self.location.origin)) {
+          await client.focus();
+          client.postMessage({
+            type: 'notification:navigate',
+            sessionId: sessionId || null,
+            provider,
+            urlPath
+          });
+          return;
+        }
+      }
+      return self.clients.openWindow(urlPath);
+    })
+  );
+});
diff --git a/server/claude-sdk.js b/server/claude-sdk.js
index cdf41ff..2bc80b0 100644
--- a/server/claude-sdk.js
+++ b/server/claude-sdk.js
@@ -18,6 +18,12 @@ import { promises as fs } from 'fs';
 import path from 'path';
 import os from 'os';
 import { CLAUDE_MODELS } from '../shared/modelConstants.js';
+import {
+  createNotificationEvent,
+  notifyRunFailed,
+  notifyRunStopped,
+  notifyUserIfEnabled
+} from './services/notification-orchestrator.js';
 
 const activeSessions = new Map();
 const pendingToolApprovals = new Map();
@@ -461,12 +467,20 @@ async function loadMcpConfig(cwd) {
  * @returns {Promise<void>}
  */
 async function queryClaudeSDK(command, options = {}, ws) {
-  const { sessionId } = options;
+  const { sessionId, sessionSummary } = options;
   let capturedSessionId = sessionId;
   let sessionCreatedSent = false;
   let tempImagePaths = [];
   let tempDir = null;
 
+  const emitNotification = (event) => {
+    notifyUserIfEnabled({
+      userId: ws?.userId || null,
+      writer: ws,
+      event
+    });
+  };
+
   try {
     // Map CLI options to SDK format
     const sdkOptions = mapCliOptionsToSDK(options);
@@ -483,6 +497,26 @@ async function queryClaudeSDK(command, options = {}, ws) {
     tempImagePaths = imageResult.tempImagePaths;
     tempDir = imageResult.tempDir;
 
+    sdkOptions.hooks = {
+      Notification: [{
+        matcher: '',
+        hooks: [async (input) => {
+          const message = typeof input?.message === 'string' ? input.message : 'Claude requires your attention.';
+          emitNotification(createNotificationEvent({
+            provider: 'claude',
+            sessionId: capturedSessionId || sessionId || null,
+            kind: 'action_required',
+            code: 'agent.notification',
+            meta: { message, sessionName: sessionSummary },
+            severity: 'warning',
+            requiresUserAction: true,
+            dedupeKey: `claude:hook:notification:${capturedSessionId || sessionId || 'none'}:${message}`
+          }));
+          return {};
+        }]
+      }]
+    };
+
     sdkOptions.canUseTool = async (toolName, input, context) => {
       const requiresInteraction = TOOLS_REQUIRING_INTERACTION.has(toolName);
 
@@ -514,6 +548,16 @@ async function queryClaudeSDK(command, options = {}, ws) {
         input,
         sessionId: capturedSessionId || sessionId || null
       });
+      emitNotification(createNotificationEvent({
+        provider: 'claude',
+        sessionId: capturedSessionId || sessionId || null,
+        kind: 'action_required',
+        code: 'permission.required',
+        meta: { toolName, sessionName: sessionSummary },
+        severity: 'warning',
+        requiresUserAction: true,
+        dedupeKey: `claude:permission:${capturedSessionId || sessionId || 'none'}:${requestId}`
+      }));
 
       const decision = await waitForToolApproval(requestId, {
         timeoutMs: requiresInteraction ? 0 : undefined,
@@ -560,10 +604,22 @@ async function queryClaudeSDK(command, options = {}, ws) {
     const prevStreamTimeout = process.env.CLAUDE_CODE_STREAM_CLOSE_TIMEOUT;
     process.env.CLAUDE_CODE_STREAM_CLOSE_TIMEOUT = '300000';
 
-    const queryInstance = query({
-      prompt: finalCommand,
-      options: sdkOptions
-    });
+    let queryInstance;
+    try {
+      queryInstance = query({
+        prompt: finalCommand,
+        options: sdkOptions
+      });
+    } catch (hookError) {
+      // Older/newer SDK versions may not accept hook shapes yet.
+      // Keep notification behavior operational via runtime events even if hook registration fails.
+      console.warn('Failed to initialize Claude query with hooks, retrying without hooks:', hookError?.message || hookError);
+      delete sdkOptions.hooks;
+      queryInstance = query({
+        prompt: finalCommand,
+        options: sdkOptions
+      });
+    }
 
     // Restore immediately — Query constructor already captured the value
     if (prevStreamTimeout !== undefined) {
@@ -647,6 +703,13 @@ async function queryClaudeSDK(command, options = {}, ws) {
       exitCode: 0,
       isNewSession: !sessionId && !!command
     });
+    notifyRunStopped({
+      userId: ws?.userId || null,
+      provider: 'claude',
+      sessionId: capturedSessionId || sessionId || null,
+      sessionName: sessionSummary,
+      stopReason: 'completed'
+    });
     console.log('claude-complete event sent');
 
   } catch (error) {
@@ -666,6 +729,13 @@ async function queryClaudeSDK(command, options = {}, ws) {
       error: error.message,
       sessionId: capturedSessionId || sessionId || null
     });
+    notifyRunFailed({
+      userId: ws?.userId || null,
+      provider: 'claude',
+      sessionId: capturedSessionId || sessionId || null,
+      sessionName: sessionSummary,
+      error
+    });
 
     throw error;
   }
diff --git a/server/cursor-cli.js b/server/cursor-cli.js
index f5fe7db..d354723 100644
--- a/server/cursor-cli.js
+++ b/server/cursor-cli.js
@@ -1,5 +1,6 @@
 import { spawn } from 'child_process';
 import crossSpawn from 'cross-spawn';
+import { notifyRunFailed, notifyRunStopped } from './services/notification-orchestrator.js';
 
 // Use cross-spawn on Windows for better command execution
 const spawnFunction = process.platform === 'win32' ? crossSpawn : spawn;
@@ -23,7 +24,7 @@ function isWorkspaceTrustPrompt(text = '') {
 
 async function spawnCursor(command, options = {}, ws) {
   return new Promise(async (resolve, reject) => {
-    const { sessionId, projectPath, cwd, resume, toolsSettings, skipPermissions, model } = options;
+    const { sessionId, projectPath, cwd, resume, toolsSettings, skipPermissions, model, sessionSummary } = options;
     let capturedSessionId = sessionId; // Track session ID throughout the process
     let sessionCreatedSent = false; // Track if we've already sent session-created event
     let hasRetriedWithTrust = false;
@@ -81,6 +82,35 @@ async function spawnCursor(command, options = {}, ws) {
       const isTrustRetry = runReason === 'trust-retry';
       let runSawWorkspaceTrustPrompt = false;
       let stdoutLineBuffer = '';
+      let terminalNotificationSent = false;
+
+      const notifyTerminalState = ({ code = null, error = null } = {}) => {
+        if (terminalNotificationSent) {
+          return;
+        }
+
+        terminalNotificationSent = true;
+
+        const finalSessionId = capturedSessionId || sessionId || processKey;
+        if (code === 0 && !error) {
+          notifyRunStopped({
+            userId: ws?.userId || null,
+            provider: 'cursor',
+            sessionId: finalSessionId,
+            sessionName: sessionSummary,
+            stopReason: 'completed'
+          });
+          return;
+        }
+
+        notifyRunFailed({
+          userId: ws?.userId || null,
+          provider: 'cursor',
+          sessionId: finalSessionId,
+          sessionName: sessionSummary,
+          error: error || `Cursor CLI exited with code ${code}`
+        });
+      };
 
       if (isTrustRetry) {
         console.log('Retrying Cursor CLI with --trust after workspace trust prompt');
@@ -255,7 +285,8 @@ async function spawnCursor(command, options = {}, ws) {
         ws.send({
           type: 'cursor-error',
           error: stderrText,
-          sessionId: capturedSessionId || sessionId || null
+          sessionId: capturedSessionId || sessionId || null,
+          provider: 'cursor'
         });
       });
 
@@ -287,12 +318,15 @@ async function spawnCursor(command, options = {}, ws) {
           type: 'claude-complete',
           sessionId: finalSessionId,
           exitCode: code,
+          provider: 'cursor',
           isNewSession: !sessionId && !!command // Flag to indicate this was a new session
         });
 
         if (code === 0) {
+          notifyTerminalState({ code });
           settleOnce(() => resolve());
         } else {
+          notifyTerminalState({ code });
           settleOnce(() => reject(new Error(`Cursor CLI exited with code ${code}`)));
         }
       });
@@ -308,8 +342,10 @@ async function spawnCursor(command, options = {}, ws) {
         ws.send({
           type: 'cursor-error',
           error: error.message,
-          sessionId: capturedSessionId || sessionId || null
+          sessionId: capturedSessionId || sessionId || null,
+          provider: 'cursor'
         });
+        notifyTerminalState({ error });
 
         settleOnce(() => reject(error));
       });
diff --git a/server/database/db.js b/server/database/db.js
index bb90c61..9ab0ad7 100644
--- a/server/database/db.js
+++ b/server/database/db.js
@@ -100,6 +100,35 @@ const runMigrations = () => {
       db.exec('ALTER TABLE users ADD COLUMN has_completed_onboarding BOOLEAN DEFAULT 0');
     }
 
+    db.exec(`
+      CREATE TABLE IF NOT EXISTS user_notification_preferences (
+        user_id INTEGER PRIMARY KEY,
+        preferences_json TEXT NOT NULL,
+        updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+      )
+    `);
+
+    db.exec(`
+      CREATE TABLE IF NOT EXISTS vapid_keys (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        public_key TEXT NOT NULL,
+        private_key TEXT NOT NULL,
+        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+      )
+    `);
+
+    db.exec(`
+      CREATE TABLE IF NOT EXISTS push_subscriptions (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        user_id INTEGER NOT NULL,
+        endpoint TEXT NOT NULL UNIQUE,
+        keys_p256dh TEXT NOT NULL,
+        keys_auth TEXT NOT NULL,
+        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+      )
+    `);
     // Create app_config table if it doesn't exist (for existing installations)
     db.exec(`CREATE TABLE IF NOT EXISTS app_config (
       key TEXT PRIMARY KEY,
@@ -376,6 +405,116 @@ const credentialsDb = {
   }
 };
 
+const DEFAULT_NOTIFICATION_PREFERENCES = {
+  channels: {
+    inApp: false,
+    webPush: false
+  },
+  events: {
+    actionRequired: true,
+    stop: true,
+    error: true
+  }
+};
+
+const normalizeNotificationPreferences = (value) => {
+  const source = value && typeof value === 'object' ? value : {};
+
+  return {
+    channels: {
+      inApp: source.channels?.inApp === true,
+      webPush: source.channels?.webPush === true
+    },
+    events: {
+      actionRequired: source.events?.actionRequired !== false,
+      stop: source.events?.stop !== false,
+      error: source.events?.error !== false
+    }
+  };
+};
+
+const notificationPreferencesDb = {
+  getPreferences: (userId) => {
+    try {
+      const row = db.prepare('SELECT preferences_json FROM user_notification_preferences WHERE user_id = ?').get(userId);
+      if (!row) {
+        const defaults = normalizeNotificationPreferences(DEFAULT_NOTIFICATION_PREFERENCES);
+        db.prepare(
+          'INSERT INTO user_notification_preferences (user_id, preferences_json, updated_at) VALUES (?, ?, CURRENT_TIMESTAMP)'
+        ).run(userId, JSON.stringify(defaults));
+        return defaults;
+      }
+
+      let parsed;
+      try {
+        parsed = JSON.parse(row.preferences_json);
+      } catch {
+        parsed = DEFAULT_NOTIFICATION_PREFERENCES;
+      }
+      return normalizeNotificationPreferences(parsed);
+    } catch (err) {
+      throw err;
+    }
+  },
+
+  updatePreferences: (userId, preferences) => {
+    try {
+      const normalized = normalizeNotificationPreferences(preferences);
+      db.prepare(
+        `INSERT INTO user_notification_preferences (user_id, preferences_json, updated_at)
+         VALUES (?, ?, CURRENT_TIMESTAMP)
+         ON CONFLICT(user_id) DO UPDATE SET
+           preferences_json = excluded.preferences_json,
+           updated_at = CURRENT_TIMESTAMP`
+      ).run(userId, JSON.stringify(normalized));
+      return normalized;
+    } catch (err) {
+      throw err;
+    }
+  }
+};
+
+const pushSubscriptionsDb = {
+  saveSubscription: (userId, endpoint, keysP256dh, keysAuth) => {
+    try {
+      db.prepare(
+        `INSERT INTO push_subscriptions (user_id, endpoint, keys_p256dh, keys_auth)
+         VALUES (?, ?, ?, ?)
+         ON CONFLICT(endpoint) DO UPDATE SET
+           user_id = excluded.user_id,
+           keys_p256dh = excluded.keys_p256dh,
+           keys_auth = excluded.keys_auth`
+      ).run(userId, endpoint, keysP256dh, keysAuth);
+    } catch (err) {
+      throw err;
+    }
+  },
+
+  getSubscriptions: (userId) => {
+    try {
+      return db.prepare('SELECT endpoint, keys_p256dh, keys_auth FROM push_subscriptions WHERE user_id = ?').all(userId);
+    } catch (err) {
+      throw err;
+    }
+  },
+
+  removeSubscription: (endpoint) => {
+    try {
+      db.prepare('DELETE FROM push_subscriptions WHERE endpoint = ?').run(endpoint);
+    } catch (err) {
+      throw err;
+    }
+  },
+
+  removeAllForUser: (userId) => {
+    try {
+      db.prepare('DELETE FROM push_subscriptions WHERE user_id = ?').run(userId);
+    } catch (err) {
+      throw err;
+    }
+  }
+};
+
 // Session custom names database operations
 const sessionNamesDb = {
   // Set (insert or update) a custom session name
@@ -482,8 +621,10 @@ export {
   userDb,
   apiKeysDb,
   credentialsDb,
+  notificationPreferencesDb,
+  pushSubscriptionsDb,
   sessionNamesDb,
   applyCustomSessionNames,
   appConfigDb,
   githubTokensDb // Backward compatibility
-};
\ No newline at end of file
+};
diff --git a/server/database/init.sql b/server/database/init.sql
index 71ba1bb..9835151 100644
--- a/server/database/init.sql
+++ b/server/database/init.sql
@@ -51,6 +51,33 @@ CREATE INDEX IF NOT EXISTS idx_user_credentials_user_id ON user_credentials(user
 CREATE INDEX IF NOT EXISTS idx_user_credentials_type ON user_credentials(credential_type);
 CREATE INDEX IF NOT EXISTS idx_user_credentials_active ON user_credentials(is_active);
 
+-- User notification preferences (backend-owned, provider-agnostic)
+CREATE TABLE IF NOT EXISTS user_notification_preferences (
+    user_id INTEGER PRIMARY KEY,
+    preferences_json TEXT NOT NULL,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+);
+
+-- VAPID key pair for Web Push notifications
+CREATE TABLE IF NOT EXISTS vapid_keys (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    public_key TEXT NOT NULL,
+    private_key TEXT NOT NULL,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Browser push subscriptions
+CREATE TABLE IF NOT EXISTS push_subscriptions (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id INTEGER NOT NULL,
+    endpoint TEXT NOT NULL UNIQUE,
+    keys_p256dh TEXT NOT NULL,
+    keys_auth TEXT NOT NULL,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+);
+
 -- Session custom names (provider-agnostic display name overrides)
 CREATE TABLE IF NOT EXISTS session_names (
     id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -69,4 +96,4 @@ CREATE TABLE IF NOT EXISTS app_config (
     key TEXT PRIMARY KEY,
     value TEXT NOT NULL,
     created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-);
\ No newline at end of file
+);
diff --git a/server/gemini-cli.js b/server/gemini-cli.js
index 0c6506a..3a2c968 100644
--- a/server/gemini-cli.js
+++ b/server/gemini-cli.js
@@ -9,11 +9,12 @@ import os from 'os';
 import { getSessions, getSessionMessages } from './projects.js';
 import sessionManager from './sessionManager.js';
 import GeminiResponseHandler from './gemini-response-handler.js';
+import { notifyRunFailed, notifyRunStopped } from './services/notification-orchestrator.js';
 
 let activeGeminiProcesses = new Map(); // Track active processes by session ID
 
 async function spawnGemini(command, options = {}, ws) {
-    const { sessionId, projectPath, cwd, resume, toolsSettings, permissionMode, images } = options;
+    const { sessionId, projectPath, cwd, resume, toolsSettings, permissionMode, images, sessionSummary } = options;
     let capturedSessionId = sessionId; // Track session ID throughout the process
     let sessionCreatedSent = false; // Track if we've already sent session-created event
     let assistantBlocks = []; // Accumulate the full response blocks including tools
@@ -172,6 +173,36 @@ async function spawnGemini(command, options = {}, ws) {
             stdio: ['pipe', 'pipe', 'pipe'],
             env: { ...process.env } // Inherit all environment variables
         });
+        let terminalNotificationSent = false;
+        let terminalFailureReason = null;
+
+        const notifyTerminalState = ({ code = null, error = null } = {}) => {
+            if (terminalNotificationSent) {
+                return;
+            }
+
+            terminalNotificationSent = true;
+
+            const finalSessionId = capturedSessionId || sessionId || processKey;
+            if (code === 0 && !error) {
+                notifyRunStopped({
+                    userId: ws?.userId || null,
+                    provider: 'gemini',
+                    sessionId: finalSessionId,
+                    sessionName: sessionSummary,
+                    stopReason: 'completed'
+                });
+                return;
+            }
+
+            notifyRunFailed({
+                userId: ws?.userId || null,
+                provider: 'gemini',
+                sessionId: finalSessionId,
+                sessionName: sessionSummary,
+                error: error || terminalFailureReason || `Gemini CLI exited with code ${code}`
+            });
+        };
 
         // Attach temp file info to process for cleanup later
         geminiProcess.tempImagePaths = tempImagePaths;
@@ -196,10 +227,12 @@ async function spawnGemini(command, options = {}, ws) {
             if (timeout) clearTimeout(timeout);
             timeout = setTimeout(() => {
                 const socketSessionId = typeof ws.getSessionId === 'function' ? ws.getSessionId() : (capturedSessionId || sessionId || processKey);
+                terminalFailureReason = `Gemini CLI timeout - no response received for ${timeoutMs / 1000} seconds`;
                 ws.send({
                     type: 'gemini-error',
                     sessionId: socketSessionId,
-                    error: `Gemini CLI timeout - no response received for ${timeoutMs / 1000} seconds`
+                    error: terminalFailureReason,
+                    provider: 'gemini'
                 });
                 try {
                     geminiProcess.kill('SIGTERM');
@@ -340,7 +373,8 @@ async function spawnGemini(command, options = {}, ws) {
             ws.send({
                 type: 'gemini-error',
                 sessionId: socketSessionId,
-                error: errorMsg
+                error: errorMsg,
+                provider: 'gemini'
             });
         });
 
@@ -367,6 +401,7 @@ async function spawnGemini(command, options = {}, ws) {
                 type: 'claude-complete', // Use claude-complete for compatibility with UI
                 sessionId: finalSessionId,
                 exitCode: code,
+                provider: 'gemini',
                 isNewSession: !sessionId && !!command // Flag to indicate this was a new session
             });
 
@@ -381,8 +416,13 @@ async function spawnGemini(command, options = {}, ws) {
             }
 
             if (code === 0) {
+                notifyTerminalState({ code });
                 resolve();
             } else {
+                notifyTerminalState({
+                    code,
+                    error: code === null ? 'Gemini CLI process was terminated or timed out' : null
+                });
                 reject(new Error(code === null ? 'Gemini CLI process was terminated or timed out' : `Gemini CLI exited with code ${code}`));
             }
         });
@@ -397,8 +437,10 @@ async function spawnGemini(command, options = {}, ws) {
             ws.send({
                 type: 'gemini-error',
                 sessionId: errorSessionId,
-                error: error.message
+                error: error.message,
+                provider: 'gemini'
             });
+            notifyTerminalState({ error });
 
             reject(error);
         });
diff --git a/server/index.js b/server/index.js
index 770575a..d7e4d52 100755
--- a/server/index.js
+++ b/server/index.js
@@ -67,6 +67,7 @@ import geminiRoutes from './routes/gemini.js';
 import pluginsRoutes from './routes/plugins.js';
 import { startEnabledPluginServers, stopAllPlugins } from './utils/plugin-process-manager.js';
 import { initializeDatabase, sessionNamesDb, applyCustomSessionNames } from './database/db.js';
+import { configureWebPush } from './services/vapid-keys.js';
 import { validateApiKey, authenticateToken, authenticateWebSocket } from './middleware/auth.js';
 import { IS_PLATFORM } from './constants/config.js';
 import { getConnectableHost } from '../shared/networkHosts.js';
@@ -1407,7 +1408,7 @@ wss.on('connection', (ws, request) => {
     if (pathname === '/shell') {
         handleShellConnection(ws);
     } else if (pathname === '/ws') {
-        handleChatConnection(ws);
+        handleChatConnection(ws, request);
     } else {
         console.log('[WARN] Unknown WebSocket path:', pathname);
         ws.close();
@@ -1418,9 +1419,10 @@ wss.on('connection', (ws, request) => {
  * WebSocket Writer - Wrapper for WebSocket to match SSEStreamWriter interface
  */
 class WebSocketWriter {
-    constructor(ws) {
+    constructor(ws, userId = null) {
         this.ws = ws;
         this.sessionId = null;
+        this.userId = userId;
         this.isWebSocketWriter = true;  // Marker for transport detection
     }
 
@@ -1445,14 +1447,14 @@ class WebSocketWriter {
 }
 
 // Handle chat WebSocket connections
-function handleChatConnection(ws) {
+function handleChatConnection(ws, request) {
     console.log('[INFO] Chat WebSocket connected');
 
     // Add to connected clients for project updates
     connectedClients.add(ws);
 
     // Wrap WebSocket with writer for consistent interface with SSEStreamWriter
-    const writer = new WebSocketWriter(ws);
+    const writer = new WebSocketWriter(ws, request?.user?.id ?? request?.user?.userId ?? null);
 
     ws.on('message', async (message) => {
         try {
@@ -2502,6 +2504,9 @@ async function startServer() {
         // Initialize authentication database
         await initializeDatabase();
 
+        // Configure Web Push (VAPID keys)
+        configureWebPush();
+
         // Check if running in production mode (dist folder exists)
         const distIndexPath = path.join(__dirname, '../dist/index.html');
         const isProduction = fs.existsSync(distIndexPath);
diff --git a/server/middleware/auth.js b/server/middleware/auth.js
index bdfd0f5..7374979 100644
--- a/server/middleware/auth.js
+++ b/server/middleware/auth.js
@@ -95,7 +95,7 @@ const authenticateWebSocket = (token) => {
     try {
       const user = userDb.getFirstUser();
       if (user) {
-        return { userId: user.id, username: user.username };
+        return { id: user.id, userId: user.id, username: user.username };
       }
       return null;
     } catch (error) {
@@ -129,4 +129,4 @@ export {
   generateToken,
   authenticateWebSocket,
   JWT_SECRET
-};
\ No newline at end of file
+};
diff --git a/server/openai-codex.js b/server/openai-codex.js
index bd368ff..a12f7e0 100644
--- a/server/openai-codex.js
+++ b/server/openai-codex.js
@@ -14,6 +14,7 @@
  */
 
 import { Codex } from '@openai/codex-sdk';
+import { notifyRunFailed, notifyRunStopped } from './services/notification-orchestrator.js';
 
 // Track active sessions
 const activeCodexSessions = new Map();
@@ -191,6 +192,7 @@ function mapPermissionModeToCodexOptions(permissionMode) {
 export async function queryCodex(command, options = {}, ws) {
   const {
     sessionId,
+    sessionSummary,
     cwd,
     projectPath,
     model,
@@ -203,6 +205,7 @@ export async function queryCodex(command, options = {}, ws) {
   let codex;
   let thread;
   let currentSessionId = sessionId;
+  let terminalFailure = null;
   const abortController = new AbortController();
 
   try {
@@ -268,6 +271,17 @@ export async function queryCodex(command, options = {}, ws) {
         sessionId: currentSessionId
       });
 
+      if (event.type === 'turn.failed' && !terminalFailure) {
+        terminalFailure = event.error || new Error('Turn failed');
+        notifyRunFailed({
+          userId: ws?.userId || null,
+          provider: 'codex',
+          sessionId: currentSessionId,
+          sessionName: sessionSummary,
+          error: terminalFailure
+        });
+      }
+
       // Extract and send token usage if available (normalized to match Claude format)
       if (event.type === 'turn.completed' && event.usage) {
         const totalTokens = (event.usage.input_tokens || 0) + (event.usage.output_tokens || 0);
@@ -283,11 +297,21 @@ export async function queryCodex(command, options = {}, ws) {
     }
 
     // Send completion event
-    sendMessage(ws, {
-      type: 'codex-complete',
-      sessionId: currentSessionId,
-      actualSessionId: thread.id
-    });
+    if (!terminalFailure) {
+      sendMessage(ws, {
+        type: 'codex-complete',
+        sessionId: currentSessionId,
+        actualSessionId: thread.id,
+        provider: 'codex'
+      });
+      notifyRunStopped({
+        userId: ws?.userId || null,
+        provider: 'codex',
+        sessionId: currentSessionId,
+        sessionName: sessionSummary,
+        stopReason: 'completed'
+      });
+    }
 
   } catch (error) {
     const session = currentSessionId ? activeCodexSessions.get(currentSessionId) : null;
@@ -301,8 +325,18 @@ export async function queryCodex(command, options = {}, ws) {
       sendMessage(ws, {
         type: 'codex-error',
         error: error.message,
-        sessionId: currentSessionId
+        sessionId: currentSessionId,
+        provider: 'codex'
       });
+      if (!terminalFailure) {
+        notifyRunFailed({
+          userId: ws?.userId || null,
+          provider: 'codex',
+          sessionId: currentSessionId,
+          sessionName: sessionSummary,
+          error
+        });
+      }
     }
 
   } finally {
diff --git a/server/routes/agent.js b/server/routes/agent.js
index 8bc88c9..bf2d36d 100644
--- a/server/routes/agent.js
+++ b/server/routes/agent.js
@@ -450,9 +450,10 @@ async function cleanupProject(projectPath, sessionId = null) {
  * SSE Stream Writer - Adapts SDK/CLI output to Server-Sent Events
  */
 class SSEStreamWriter {
-  constructor(res) {
+  constructor(res, userId = null) {
     this.res = res;
     this.sessionId = null;
+    this.userId = userId;
     this.isSSEStreamWriter = true;  // Marker for transport detection
   }
 
@@ -485,9 +486,10 @@ class SSEStreamWriter {
  * Non-streaming response collector
  */
 class ResponseCollector {
-  constructor() {
+  constructor(userId = null) {
     this.messages = [];
     this.sessionId = null;
+    this.userId = userId;
   }
 
   send(data) {
@@ -920,7 +922,7 @@ router.post('/', validateExternalApiKey, async (req, res) => {
       res.setHeader('Connection', 'keep-alive');
       res.setHeader('X-Accel-Buffering', 'no'); // Disable nginx buffering
 
-      writer = new SSEStreamWriter(res);
+      writer = new SSEStreamWriter(res, req.user.id);
 
       // Send initial status
       writer.send({
@@ -930,7 +932,7 @@ router.post('/', validateExternalApiKey, async (req, res) => {
       });
     } else {
       // Non-streaming mode: collect messages
-      writer = new ResponseCollector();
+      writer = new ResponseCollector(req.user.id);
 
       // Collect initial status message
       writer.send({
@@ -1219,7 +1221,7 @@ router.post('/', validateExternalApiKey, async (req, res) => {
         res.setHeader('Cache-Control', 'no-cache');
         res.setHeader('Connection', 'keep-alive');
         res.setHeader('X-Accel-Buffering', 'no');
-        writer = new SSEStreamWriter(res);
+        writer = new SSEStreamWriter(res, req.user.id);
       }
 
       if (!res.writableEnded) {
diff --git a/server/routes/cli-auth.js b/server/routes/cli-auth.js
index cb7275d..78ffa30 100644
--- a/server/routes/cli-auth.js
+++ b/server/routes/cli-auth.js
@@ -96,10 +96,27 @@ router.get('/gemini/status', async (req, res) => {
   }
 });
 
+async function loadClaudeSettingsEnv() {
+  try {
+    const settingsPath = path.join(os.homedir(), '.claude', 'settings.json');
+    const content = await fs.readFile(settingsPath, 'utf8');
+    const settings = JSON.parse(content);
+
+    if (settings?.env && typeof settings.env === 'object') {
+      return settings.env;
+    }
+  } catch (error) {
+    // Ignore missing or malformed settings and fall back to other auth sources.
+  }
+
+  return {};
+}
+
 /**
  * Checks Claude authentication credentials using two methods with priority order:
  *
  * Priority 1: ANTHROPIC_API_KEY environment variable
+ * Priority 1b: ~/.claude/settings.json env values
  * Priority 2: ~/.claude/.credentials.json OAuth tokens
  *
  * The Claude Agent SDK prioritizes environment variables over authenticated subscriptions.
@@ -128,6 +145,27 @@ async function checkClaudeCredentials() {
     };
   }
 
+  // Priority 1b: Check ~/.claude/settings.json env values.
+  // Claude Code can read proxy/auth values from settings.json even when the
+  // CloudCLI server process itself was not started with those env vars exported.
+  const settingsEnv = await loadClaudeSettingsEnv();
+
+  if (typeof settingsEnv.ANTHROPIC_API_KEY === 'string' && settingsEnv.ANTHROPIC_API_KEY.trim()) {
+    return {
+      authenticated: true,
+      email: 'API Key Auth',
+      method: 'api_key'
+    };
+  }
+
+  if (typeof settingsEnv.ANTHROPIC_AUTH_TOKEN === 'string' && settingsEnv.ANTHROPIC_AUTH_TOKEN.trim()) {
+    return {
+      authenticated: true,
+      email: 'Configured via settings.json',
+      method: 'api_key'
+    };
+  }
+
   // Priority 2: Check ~/.claude/.credentials.json for OAuth tokens
   // This is the standard authentication method used by Claude CLI after running
   // 'claude /login' or 'claude setup-token' commands.
diff --git a/server/routes/git.js b/server/routes/git.js
index 701c3be..a439563 100755
--- a/server/routes/git.js
+++ b/server/routes/git.js
@@ -651,26 +651,28 @@ router.get('/branches', async (req, res) => {
     
     // Get all branches
     const { stdout } = await spawnAsync('git', ['branch', '-a'], { cwd: projectPath });
-    
-    // Parse branches
-    const branches = stdout
+
+    const rawLines = stdout
       .split('\n')
-      .map(branch => branch.trim())
-      .filter(branch => branch && !branch.includes('->')) // Remove empty lines and HEAD pointer
-      .map(branch => {
-        // Remove asterisk from current branch
-        if (branch.startsWith('* ')) {
-          return branch.substring(2);
-        }
-        // Remove remotes/ prefix
-        if (branch.startsWith('remotes/origin/')) {
-          return branch.substring(15);
-        }
-        return branch;
-      })
-      .filter((branch, index, self) => self.indexOf(branch) === index); // Remove duplicates
-    
-    res.json({ branches });
+      .map(b => b.trim())
+      .filter(b => b && !b.includes('->'));
+
+    // Local branches (may start with '* ' for current)
+    const localBranches = rawLines
+      .filter(b => !b.startsWith('remotes/'))
+      .map(b => (b.startsWith('* ') ? b.substring(2) : b));
+
+    // Remote branches — strip 'remotes/<remote>/' prefix
+    const remoteBranches = rawLines
+      .filter(b => b.startsWith('remotes/'))
+      .map(b => b.replace(/^remotes\/[^/]+\//, ''))
+      .filter(name => !localBranches.includes(name)); // skip if already a local branch
+
+    // Backward-compat flat list (local + unique remotes, deduplicated)
+    const branches = [...localBranches, ...remoteBranches]
+      .filter((b, i, arr) => arr.indexOf(b) === i);
+
+    res.json({ branches, localBranches, remoteBranches });
   } catch (error) {
     console.error('Git branches error:', error);
     res.json({ error: error.message });
@@ -721,6 +723,32 @@ router.post('/create-branch', async (req, res) => {
   }
 });
 
+// Delete a local branch
+router.post('/delete-branch', async (req, res) => {
+  const { project, branch } = req.body;
+
+  if (!project || !branch) {
+    return res.status(400).json({ error: 'Project name and branch name are required' });
+  }
+
+  try {
+    const projectPath = await getActualProjectPath(project);
+    await validateGitRepository(projectPath);
+
+    // Safety: cannot delete the currently checked-out branch
+    const { stdout: currentBranch } = await spawnAsync('git', ['branch', '--show-current'], { cwd: projectPath });
+    if (currentBranch.trim() === branch) {
+      return res.status(400).json({ error: 'Cannot delete the currently checked-out branch' });
+    }
+
+    const { stdout } = await spawnAsync('git', ['branch', '-d', branch], { cwd: projectPath });
+    res.json({ success: true, output: stdout });
+  } catch (error) {
+    console.error('Git delete branch error:', error);
+    res.status(500).json({ error: error.message });
+  }
+});
+
 // Get recent commits
 router.get('/commits', async (req, res) => {
   const { project, limit = 10 } = req.query;
@@ -740,7 +768,7 @@ router.get('/commits', async (req, res) => {
     // Get commit log with stats
     const { stdout } = await spawnAsync(
       'git',
-      ['log', '--pretty=format:%H|%an|%ae|%ad|%s', '--date=relative', '-n', String(safeLimit)],
+      ['log', '--pretty=format:%H|%an|%ae|%ad|%s', '--date=iso-strict', '-n', String(safeLimit)],
       { cwd: projectPath },
     );
     
diff --git a/server/routes/settings.js b/server/routes/settings.js
index d1c141b..7eee245 100644
--- a/server/routes/settings.js
+++ b/server/routes/settings.js
@@ -1,5 +1,7 @@
 import express from 'express';
-import { apiKeysDb, credentialsDb } from '../database/db.js';
+import { apiKeysDb, credentialsDb, notificationPreferencesDb, pushSubscriptionsDb } from '../database/db.js';
+import { getPublicKey } from '../services/vapid-keys.js';
+import { createNotificationEvent, notifyUserIfEnabled } from '../services/notification-orchestrator.js';
 
 const router = express.Router();
 
@@ -175,4 +177,100 @@ router.patch('/credentials/:credentialId/toggle', async (req, res) => {
   }
 });
 
+// ===============================
+// Notification Preferences
+// ===============================
+
+router.get('/notification-preferences', async (req, res) => {
+  try {
+    const preferences = notificationPreferencesDb.getPreferences(req.user.id);
+    res.json({ success: true, preferences });
+  } catch (error) {
+    console.error('Error fetching notification preferences:', error);
+    res.status(500).json({ error: 'Failed to fetch notification preferences' });
+  }
+});
+
+router.put('/notification-preferences', async (req, res) => {
+  try {
+    const preferences = notificationPreferencesDb.updatePreferences(req.user.id, req.body || {});
+    res.json({ success: true, preferences });
+  } catch (error) {
+    console.error('Error saving notification preferences:', error);
+    res.status(500).json({ error: 'Failed to save notification preferences' });
+  }
+});
+
+// ===============================
+// Push Subscription Management
+// ===============================
+
+router.get('/push/vapid-public-key', async (req, res) => {
+  try {
+    const publicKey = getPublicKey();
+    res.json({ publicKey });
+  } catch (error) {
+    console.error('Error fetching VAPID public key:', error);
+    res.status(500).json({ error: 'Failed to fetch VAPID public key' });
+  }
+});
+
+router.post('/push/subscribe', async (req, res) => {
+  try {
+    const { endpoint, keys } = req.body;
+    if (!endpoint || !keys?.p256dh || !keys?.auth) {
+      return res.status(400).json({ error: 'Missing subscription fields' });
+    }
+    pushSubscriptionsDb.saveSubscription(req.user.id, endpoint, keys.p256dh, keys.auth);
+
+    // Enable webPush in preferences so the confirmation goes through the full pipeline
+    const currentPrefs = notificationPreferencesDb.getPreferences(req.user.id);
+    if (!currentPrefs?.channels?.webPush) {
+      notificationPreferencesDb.updatePreferences(req.user.id, {
+        ...currentPrefs,
+        channels: { ...currentPrefs?.channels, webPush: true },
+      });
+    }
+
+    res.json({ success: true });
+
+    // Send a confirmation push through the full notification pipeline
+    const event = createNotificationEvent({
+      provider: 'system',
+      kind: 'info',
+      code: 'push.enabled',
+      meta: { message: 'Push notifications are now enabled!' },
+      severity: 'info'
+    });
+    notifyUserIfEnabled({ userId: req.user.id, event });
+  } catch (error) {
+    console.error('Error saving push subscription:', error);
+    res.status(500).json({ error: 'Failed to save push subscription' });
+  }
+});
+
+router.post('/push/unsubscribe', async (req, res) => {
+  try {
+    const { endpoint } = req.body;
+    if (!endpoint) {
+      return res.status(400).json({ error: 'Missing endpoint' });
+    }
+    pushSubscriptionsDb.removeSubscription(endpoint);
+
+    // Disable webPush in preferences to match subscription state
+    const currentPrefs = notificationPreferencesDb.getPreferences(req.user.id);
+    if (currentPrefs?.channels?.webPush) {
+      notificationPreferencesDb.updatePreferences(req.user.id, {
+        ...currentPrefs,
+        channels: { ...currentPrefs.channels, webPush: false },
+      });
+    }
+
+    res.json({ success: true });
+  } catch (error) {
+    console.error('Error removing push subscription:', error);
+    res.status(500).json({ error: 'Failed to remove push subscription' });
+  }
+});
+
 export default router;
diff --git a/server/services/notification-orchestrator.js b/server/services/notification-orchestrator.js
new file mode 100644
index 0000000..bb573e1
--- /dev/null
+++ b/server/services/notification-orchestrator.js
@@ -0,0 +1,227 @@
+import webPush from 'web-push';
+import { notificationPreferencesDb, pushSubscriptionsDb, sessionNamesDb } from '../database/db.js';
+
+const KIND_TO_PREF_KEY = {
+  action_required: 'actionRequired',
+  stop: 'stop',
+  error: 'error'
+};
+
+const PROVIDER_LABELS = {
+  claude: 'Claude',
+  cursor: 'Cursor',
+  codex: 'Codex',
+  gemini: 'Gemini',
+  system: 'System'
+};
+
+const recentEventKeys = new Map();
+const DEDUPE_WINDOW_MS = 20000;
+
+const cleanupOldEventKeys = () => {
+  const now = Date.now();
+  for (const [key, timestamp] of recentEventKeys.entries()) {
+    if (now - timestamp > DEDUPE_WINDOW_MS) {
+      recentEventKeys.delete(key);
+    }
+  }
+};
+
+function shouldSendPush(preferences, event) {
+  const webPushEnabled = Boolean(preferences?.channels?.webPush);
+  const prefEventKey = KIND_TO_PREF_KEY[event.kind];
+  const eventEnabled = prefEventKey ? Boolean(preferences?.events?.[prefEventKey]) : true;
+
+  return webPushEnabled && eventEnabled;
+}
+
+function isDuplicate(event) {
+  cleanupOldEventKeys();
+  const key = event.dedupeKey || `${event.provider}:${event.kind || 'info'}:${event.code || 'generic'}:${event.sessionId || 'none'}`;
+  if (recentEventKeys.has(key)) {
+    return true;
+  }
+  recentEventKeys.set(key, Date.now());
+  return false;
+}
+
+function createNotificationEvent({
+  provider,
+  sessionId = null,
+  kind = 'info',
+  code = 'generic.info',
+  meta = {},
+  severity = 'info',
+  dedupeKey = null,
+  requiresUserAction = false
+}) {
+  return {
+    provider,
+    sessionId,
+    kind,
+    code,
+    meta,
+    severity,
+    requiresUserAction,
+    dedupeKey,
+    createdAt: new Date().toISOString()
+  };
+}
+
+function normalizeErrorMessage(error) {
+  if (typeof error === 'string') {
+    return error;
+  }
+
+  if (error && typeof error.message === 'string') {
+    return error.message;
+  }
+
+  if (error == null) {
+    return 'Unknown error';
+  }
+
+  return String(error);
+}
+
+function normalizeSessionName(sessionName) {
+  if (typeof sessionName !== 'string') {
+    return null;
+  }
+
+  const normalized = sessionName.replace(/\s+/g, ' ').trim();
+  if (!normalized) {
+    return null;
+  }
+
+  return normalized.length > 80 ? `${normalized.slice(0, 77)}...` : normalized;
+}
+
+function resolveSessionName(event) {
+  const explicitSessionName = normalizeSessionName(event.meta?.sessionName);
+  if (explicitSessionName) {
+    return explicitSessionName;
+  }
+
+  if (!event.sessionId || !event.provider) {
+    return null;
+  }
+
+  return normalizeSessionName(sessionNamesDb.getName(event.sessionId, event.provider));
+}
+
+function buildPushBody(event) {
+  const CODE_MAP = {
+    'permission.required': event.meta?.toolName
+      ? `Action Required: Tool "${event.meta.toolName}" needs approval`
+      : 'Action Required: A tool needs your approval',
+    'run.stopped': event.meta?.stopReason || 'Run Stopped: The run has stopped',
+    'run.failed': event.meta?.error ? `Run Failed: ${event.meta.error}` : 'Run Failed: The run encountered an error',
+    'agent.notification': event.meta?.message ? String(event.meta.message) : 'You have a new notification',
+    'push.enabled': 'Push notifications are now enabled!'
+  };
+  const providerLabel = PROVIDER_LABELS[event.provider] || 'Assistant';
+  const sessionName = resolveSessionName(event);
+  const message = CODE_MAP[event.code] || 'You have a new notification';
+
+  return {
+    title: sessionName || 'Claude Code UI',
+    body: `${providerLabel}: ${message}`,
+    data: {
+      sessionId: event.sessionId || null,
+      code: event.code,
+      provider: event.provider || null,
+      sessionName,
+      tag: `${event.provider || 'assistant'}:${event.sessionId || 'none'}:${event.code}`
+    }
+  };
+}
+
+async function sendWebPush(userId, event) {
+  const subscriptions = pushSubscriptionsDb.getSubscriptions(userId);
+  if (!subscriptions.length) return;
+
+  const payload = JSON.stringify(buildPushBody(event));
+
+  const results = await Promise.allSettled(
+    subscriptions.map((sub) =>
+      webPush.sendNotification(
+        {
+          endpoint: sub.endpoint,
+          keys: {
+            p256dh: sub.keys_p256dh,
+            auth: sub.keys_auth
+          }
+        },
+        payload
+      )
+    )
+  );
+
+  // Clean up gone subscriptions (410 Gone or 404)
+  results.forEach((result, index) => {
+    if (result.status === 'rejected') {
+      const statusCode = result.reason?.statusCode;
+      if (statusCode === 410 || statusCode === 404) {
+        pushSubscriptionsDb.removeSubscription(subscriptions[index].endpoint);
+      }
+    }
+  });
+}
+
+function notifyUserIfEnabled({ userId, event }) {
+  if (!userId || !event) {
+    return;
+  }
+
+  const preferences = notificationPreferencesDb.getPreferences(userId);
+  if (!shouldSendPush(preferences, event)) {
+    return;
+  }
+  if (isDuplicate(event)) {
+    return;
+  }
+
+  sendWebPush(userId, event).catch((err) => {
+    console.error('Web push send error:', err);
+  });
+}
+
+function notifyRunStopped({ userId, provider, sessionId = null, stopReason = 'completed', sessionName = null }) {
+  notifyUserIfEnabled({
+    userId,
+    event: createNotificationEvent({
+      provider,
+      sessionId,
+      kind: 'stop',
+      code: 'run.stopped',
+      meta: { stopReason, sessionName },
+      severity: 'info',
+      dedupeKey: `${provider}:run:stop:${sessionId || 'none'}:${stopReason}`
+    })
+  });
+}
+
+function notifyRunFailed({ userId, provider, sessionId = null, error, sessionName = null }) {
+  const errorMessage = normalizeErrorMessage(error);
+
+  notifyUserIfEnabled({
+    userId,
+    event: createNotificationEvent({
+      provider,
+      sessionId,
+      kind: 'error',
+      code: 'run.failed',
+      meta: { error: errorMessage, sessionName },
+      severity: 'error',
+      dedupeKey: `${provider}:run:error:${sessionId || 'none'}:${errorMessage}`
+    })
+  });
+}
+
+export {
+  createNotificationEvent,
+  notifyUserIfEnabled,
+  notifyRunStopped,
+  notifyRunFailed
+};
diff --git a/server/services/vapid-keys.js b/server/services/vapid-keys.js
new file mode 100644
index 0000000..1abaeba
--- /dev/null
+++ b/server/services/vapid-keys.js
@@ -0,0 +1,35 @@
+import webPush from 'web-push';
+import { db } from '../database/db.js';
+
+let cachedKeys = null;
+
+function ensureVapidKeys() {
+  if (cachedKeys) return cachedKeys;
+
+  const row = db.prepare('SELECT public_key, private_key FROM vapid_keys ORDER BY id DESC LIMIT 1').get();
+  if (row) {
+    cachedKeys = { publicKey: row.public_key, privateKey: row.private_key };
+    return cachedKeys;
+  }
+
+  const keys = webPush.generateVAPIDKeys();
+  db.prepare('INSERT INTO vapid_keys (public_key, private_key) VALUES (?, ?)').run(keys.publicKey, keys.privateKey);
+  cachedKeys = keys;
+  return cachedKeys;
+}
+
+function getPublicKey() {
+  return ensureVapidKeys().publicKey;
+}
+
+function configureWebPush() {
+  const keys = ensureVapidKeys();
+  webPush.setVapidDetails(
+    'mailto:noreply@claudecodeui.local',
+    keys.publicKey,
+    keys.privateKey
+  );
+  console.log('Web Push notifications configured');
+}
+
+export { ensureVapidKeys, getPublicKey, configureWebPush };
diff --git a/src/components/app/AppContent.tsx b/src/components/app/AppContent.tsx
index 5649c0c..ed14fdb 100644
--- a/src/components/app/AppContent.tsx
+++ b/src/components/app/AppContent.tsx
@@ -72,6 +72,40 @@ export default function AppContent() {
     };
   }, [openSettings]);
 
+  useEffect(() => {
+    if (typeof navigator === 'undefined' || !('serviceWorker' in navigator)) {
+      return undefined;
+    }
+
+    const handleServiceWorkerMessage = (event: MessageEvent) => {
+      const message = event.data;
+      if (!message || message.type !== 'notification:navigate') {
+        return;
+      }
+
+      if (typeof message.provider === 'string' && message.provider.trim()) {
+        localStorage.setItem('selected-provider', message.provider);
+      }
+
+      setActiveTab('chat');
+      setSidebarOpen(false);
+      void refreshProjectsSilently();
+
+      if (typeof message.sessionId === 'string' && message.sessionId) {
+        navigate(`/session/${message.sessionId}`);
+        return;
+      }
+
+      navigate('/');
+    };
+
+    navigator.serviceWorker.addEventListener('message', handleServiceWorkerMessage);
+
+    return () => {
+      navigator.serviceWorker.removeEventListener('message', handleServiceWorkerMessage);
+    };
+  }, [navigate, refreshProjectsSilently, setActiveTab, setSidebarOpen]);
+
   // Permission recovery: query pending permissions on WebSocket reconnect or session change
   useEffect(() => {
     const isReconnect = isConnected && !wasConnectedRef.current;
diff --git a/src/components/chat/hooks/useChatComposerState.ts b/src/components/chat/hooks/useChatComposerState.ts
index bdba41d..6aab9ee 100644
--- a/src/components/chat/hooks/useChatComposerState.ts
+++ b/src/components/chat/hooks/useChatComposerState.ts
@@ -82,6 +82,24 @@ const createFakeSubmitEvent = () => {
 const isTemporarySessionId = (sessionId: string | null | undefined) =>
   Boolean(sessionId && sessionId.startsWith('new-session-'));
 
+const getNotificationSessionSummary = (
+  selectedSession: ProjectSession | null,
+  fallbackInput: string,
+): string | null => {
+  const sessionSummary = selectedSession?.summary || selectedSession?.name || selectedSession?.title;
+  if (typeof sessionSummary === 'string' && sessionSummary.trim()) {
+    const normalized = sessionSummary.replace(/\s+/g, ' ').trim();
+    return normalized.length > 80 ? `${normalized.slice(0, 77)}...` : normalized;
+  }
+
+  const normalizedFallback = fallbackInput.replace(/\s+/g, ' ').trim();
+  if (!normalizedFallback) {
+    return null;
+  }
+
+  return normalizedFallback.length > 80 ? `${normalizedFallback.slice(0, 77)}...` : normalizedFallback;
+};
+
 export function useChatComposerState({
   selectedProject,
   selectedSession,
@@ -603,6 +621,7 @@ export function useChatComposerState({
 
       const toolsSettings = getToolsSettings();
       const resolvedProjectPath = selectedProject.fullPath || selectedProject.path || '';
+      const sessionSummary = getNotificationSessionSummary(selectedSession, currentInput);
 
       if (provider === 'cursor') {
         sendMessage({
@@ -616,6 +635,7 @@ export function useChatComposerState({
             resume: Boolean(effectiveSessionId),
             model: cursorModel,
             skipPermissions: toolsSettings?.skipPermissions || false,
+            sessionSummary,
             toolsSettings,
           },
         });
@@ -630,6 +650,7 @@ export function useChatComposerState({
             sessionId: effectiveSessionId,
             resume: Boolean(effectiveSessionId),
             model: codexModel,
+            sessionSummary,
             permissionMode: permissionMode === 'plan' ? 'default' : permissionMode,
           },
         });
@@ -644,6 +665,7 @@ export function useChatComposerState({
             sessionId: effectiveSessionId,
             resume: Boolean(effectiveSessionId),
             model: geminiModel,
+            sessionSummary,
             permissionMode,
             toolsSettings,
           },
@@ -660,6 +682,7 @@ export function useChatComposerState({
             toolsSettings,
             permissionMode,
             model: claudeModel,
+            sessionSummary,
             images: uploadedImages,
           },
         });
@@ -681,6 +704,7 @@ export function useChatComposerState({
       safeLocalStorage.removeItem(`draft_input_${selectedProject.name}`);
     },
     [
+      selectedSession,
       attachedImages,
       claudeModel,
       codexModel,
@@ -697,7 +721,6 @@ export function useChatComposerState({
       resetCommandMenuState,
       scrollToBottom,
       selectedProject,
-      selectedSession?.id,
       sendMessage,
       setCanAbortSession,
       setChatMessages,
diff --git a/src/components/chat/tools/ToolRenderer.tsx b/src/components/chat/tools/ToolRenderer.tsx
index 978723d..26524c5 100644
--- a/src/components/chat/tools/ToolRenderer.tsx
+++ b/src/components/chat/tools/ToolRenderer.tsx
@@ -80,7 +80,7 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
     }
   }, [displayConfig, parsedData, onFileOpen]);
 
-  // Route subagent containers to dedicated component (after hooks to keep call order stable)
+  // Route subagent containers to dedicated component (after hooks to satisfy Rules of Hooks)
   if (isSubagentContainer && subagentState) {
     if (mode === 'result') {
       return null;
diff --git a/src/components/git-panel/constants/constants.ts b/src/components/git-panel/constants/constants.ts
index 420f955..5e2ff19 100644
--- a/src/components/git-panel/constants/constants.ts
+++ b/src/components/git-panel/constants/constants.ts
@@ -27,21 +27,23 @@ export const FILE_STATUS_BADGE_CLASSES: Record<FileStatusCode, string> = {
 export const CONFIRMATION_TITLES: Record<ConfirmActionType, string> = {
   discard: 'Discard Changes',
   delete: 'Delete File',
-  commit: 'Confirm Commit',
+  commit: 'Confirm Action',
   pull: 'Confirm Pull',
   push: 'Confirm Push',
   publish: 'Publish Branch',
   revertLocalCommit: 'Revert Local Commit',
+  deleteBranch: 'Delete Branch',
 };
 
 export const CONFIRMATION_ACTION_LABELS: Record<ConfirmActionType, string> = {
   discard: 'Discard',
   delete: 'Delete',
-  commit: 'Commit',
+  commit: 'Confirm',
   pull: 'Pull',
   push: 'Push',
   publish: 'Publish',
   revertLocalCommit: 'Revert Commit',
+  deleteBranch: 'Delete',
 };
 
 export const CONFIRMATION_BUTTON_CLASSES: Record<ConfirmActionType, string> = {
@@ -52,6 +54,7 @@ export const CONFIRMATION_BUTTON_CLASSES: Record<ConfirmActionType, string> = {
   push: 'bg-orange-600 hover:bg-orange-700',
   publish: 'bg-purple-600 hover:bg-purple-700',
   revertLocalCommit: 'bg-yellow-600 hover:bg-yellow-700',
+  deleteBranch: 'bg-red-600 hover:bg-red-700',
 };
 
 export const CONFIRMATION_ICON_CONTAINER_CLASSES: Record<ConfirmActionType, string> = {
@@ -62,6 +65,7 @@ export const CONFIRMATION_ICON_CONTAINER_CLASSES: Record<ConfirmActionType, stri
   push: 'bg-yellow-100 dark:bg-yellow-900/30',
   publish: 'bg-yellow-100 dark:bg-yellow-900/30',
   revertLocalCommit: 'bg-yellow-100 dark:bg-yellow-900/30',
+  deleteBranch: 'bg-red-100 dark:bg-red-900/30',
 };
 
 export const CONFIRMATION_ICON_CLASSES: Record<ConfirmActionType, string> = {
@@ -72,4 +76,5 @@ export const CONFIRMATION_ICON_CLASSES: Record<ConfirmActionType, string> = {
   push: 'text-yellow-600 dark:text-yellow-400',
   publish: 'text-yellow-600 dark:text-yellow-400',
   revertLocalCommit: 'text-yellow-600 dark:text-yellow-400',
+  deleteBranch: 'text-red-600 dark:text-red-400',
 };
diff --git a/src/components/git-panel/hooks/useGitPanelController.ts b/src/components/git-panel/hooks/useGitPanelController.ts
index 7fe8635..cb34cf1 100644
--- a/src/components/git-panel/hooks/useGitPanelController.ts
+++ b/src/components/git-panel/hooks/useGitPanelController.ts
@@ -53,12 +53,17 @@ export function useGitPanelController({
   const [recentCommits, setRecentCommits] = useState<GitCommitSummary[]>([]);
   const [commitDiffs, setCommitDiffs] = useState<GitDiffMap>({});
   const [remoteStatus, setRemoteStatus] = useState<GitRemoteStatus | null>(null);
+  const [localBranches, setLocalBranches] = useState<string[]>([]);
+  const [remoteBranches, setRemoteBranches] = useState<string[]>([]);
   const [isCreatingBranch, setIsCreatingBranch] = useState(false);
   const [isFetching, setIsFetching] = useState(false);
   const [isPulling, setIsPulling] = useState(false);
   const [isPushing, setIsPushing] = useState(false);
   const [isPublishing, setIsPublishing] = useState(false);
   const [isCreatingInitialCommit, setIsCreatingInitialCommit] = useState(false);
+  const [operationError, setOperationError] = useState<string | null>(null);
+
+  const clearOperationError = useCallback(() => setOperationError(null), []);
   const selectedProjectNameRef = useRef<string | null>(selectedProject?.name ?? null);
 
   useEffect(() => {
@@ -169,13 +174,19 @@ export function useGitPanelController({
 
       if (!data.error && data.branches) {
         setBranches(data.branches);
+        setLocalBranches(data.localBranches ?? data.branches);
+        setRemoteBranches(data.remoteBranches ?? []);
         return;
       }
 
       setBranches([]);
+      setLocalBranches([]);
+      setRemoteBranches([]);
     } catch (error) {
       console.error('Error fetching branches:', error);
       setBranches([]);
+      setLocalBranches([]);
+      setRemoteBranches([]);
     }
   }, [selectedProject]);
 
@@ -271,6 +282,33 @@ export function useGitPanelController({
     [fetchBranches, fetchGitStatus, selectedProject],
   );
 
+  const deleteBranch = useCallback(
+    async (branchName: string) => {
+      if (!selectedProject) return false;
+
+      try {
+        const response = await fetchWithAuth('/api/git/delete-branch', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ project: selectedProject.name, branch: branchName }),
+        });
+
+        const data = await readJson<GitOperationResponse>(response);
+        if (!data.success) {
+          setOperationError(data.error ?? 'Delete branch failed');
+          return false;
+        }
+
+        void fetchBranches();
+        return true;
+      } catch (error) {
+        setOperationError(error instanceof Error ? error.message : 'Delete branch failed');
+        return false;
+      }
+    },
+    [fetchBranches, selectedProject],
+  );
+
   const handleFetch = useCallback(async () => {
     if (!selectedProject) {
       return;
@@ -290,16 +328,17 @@ export function useGitPanelController({
       if (data.success) {
         void fetchGitStatus();
         void fetchRemoteStatus();
+        void fetchBranches();
         return;
       }
 
-      console.error('Fetch failed:', data.error);
+      setOperationError(data.error ?? 'Fetch failed');
     } catch (error) {
-      console.error('Error fetching from remote:', error);
+      setOperationError(error instanceof Error ? error.message : 'Fetch failed');
     } finally {
       setIsFetching(false);
     }
-  }, [fetchGitStatus, fetchRemoteStatus, selectedProject]);
+  }, [fetchBranches, fetchGitStatus, fetchRemoteStatus, selectedProject]);
 
   const handlePull = useCallback(async () => {
     if (!selectedProject) {
@@ -323,9 +362,9 @@ export function useGitPanelController({
         return;
       }
 
-      console.error('Pull failed:', data.error);
+      setOperationError(data.error ?? 'Pull failed');
     } catch (error) {
-      console.error('Error pulling from remote:', error);
+      setOperationError(error instanceof Error ? error.message : 'Pull failed');
     } finally {
       setIsPulling(false);
     }
@@ -353,9 +392,9 @@ export function useGitPanelController({
         return;
       }
 
-      console.error('Push failed:', data.error);
+      setOperationError(data.error ?? 'Push failed');
     } catch (error) {
-      console.error('Error pushing to remote:', error);
+      setOperationError(error instanceof Error ? error.message : 'Push failed');
     } finally {
       setIsPushing(false);
     }
@@ -640,12 +679,15 @@ export function useGitPanelController({
     // Reset repository-scoped state when project changes to avoid stale UI.
     setCurrentBranch('');
     setBranches([]);
+    setLocalBranches([]);
+    setRemoteBranches([]);
     setGitStatus(null);
     setRemoteStatus(null);
     setGitDiff({});
     setRecentCommits([]);
     setCommitDiffs({});
     setIsLoading(false);
+    setOperationError(null);
 
     if (!selectedProject) {
       return () => {
@@ -666,7 +708,6 @@ export function useGitPanelController({
     if (!selectedProject || activeView !== 'history') {
       return;
     }
-
     void fetchRecentCommits();
   }, [activeView, fetchRecentCommits, selectedProject]);
 
@@ -676,6 +717,8 @@ export function useGitPanelController({
     isLoading,
     currentBranch,
     branches,
+    localBranches,
+    remoteBranches,
     recentCommits,
     commitDiffs,
     remoteStatus,
@@ -685,9 +728,12 @@ export function useGitPanelController({
     isPushing,
     isPublishing,
     isCreatingInitialCommit,
+    operationError,
+    clearOperationError,
     refreshAll,
     switchBranch,
     createBranch,
+    deleteBranch,
     handleFetch,
     handlePull,
     handlePush,
diff --git a/src/components/git-panel/types/types.ts b/src/components/git-panel/types/types.ts
index c8188e9..7abf982 100644
--- a/src/components/git-panel/types/types.ts
+++ b/src/components/git-panel/types/types.ts
@@ -1,9 +1,9 @@
 import type { Project } from '../../../types/app';
 
-export type GitPanelView = 'changes' | 'history';
+export type GitPanelView = 'changes' | 'history' | 'branches';
 export type FileStatusCode = 'M' | 'A' | 'D' | 'U';
 export type GitStatusFileGroup = 'modified' | 'added' | 'deleted' | 'untracked';
-export type ConfirmActionType = 'discard' | 'delete' | 'commit' | 'pull' | 'push' | 'publish' | 'revertLocalCommit';
+export type ConfirmActionType = 'discard' | 'delete' | 'commit' | 'pull' | 'push' | 'publish' | 'revertLocalCommit' | 'deleteBranch';
 
 export type FileDiffInfo = {
   old_string: string;
@@ -76,6 +76,8 @@ export type GitPanelController = {
   isLoading: boolean;
   currentBranch: string;
   branches: string[];
+  localBranches: string[];
+  remoteBranches: string[];
   recentCommits: GitCommitSummary[];
   commitDiffs: GitDiffMap;
   remoteStatus: GitRemoteStatus | null;
@@ -85,9 +87,12 @@ export type GitPanelController = {
   isPushing: boolean;
   isPublishing: boolean;
   isCreatingInitialCommit: boolean;
+  operationError: string | null;
+  clearOperationError: () => void;
   refreshAll: () => void;
   switchBranch: (branchName: string) => Promise<boolean>;
   createBranch: (branchName: string) => Promise<boolean>;
+  deleteBranch: (branchName: string) => Promise<boolean>;
   handleFetch: () => Promise<void>;
   handlePull: () => Promise<void>;
   handlePush: () => Promise<void>;
@@ -112,6 +117,8 @@ export type GitDiffResponse = GitApiErrorResponse & {
 
 export type GitBranchesResponse = GitApiErrorResponse & {
   branches?: string[];
+  localBranches?: string[];
+  remoteBranches?: string[];
 };
 
 export type GitCommitsResponse = GitApiErrorResponse & {
diff --git a/src/components/git-panel/utils/gitPanelUtils.ts b/src/components/git-panel/utils/gitPanelUtils.ts
index 736deeb..7a66ba6 100644
--- a/src/components/git-panel/utils/gitPanelUtils.ts
+++ b/src/components/git-panel/utils/gitPanelUtils.ts
@@ -24,3 +24,70 @@ export function getStatusLabel(status: FileStatusCode): string {
 export function getStatusBadgeClass(status: FileStatusCode): string {
   return FILE_STATUS_BADGE_CLASSES[status] || FILE_STATUS_BADGE_CLASSES.U;
 }
+
+// ---------------------------------------------------------------------------
+// Parse `git show` output to extract per-file change info
+// ---------------------------------------------------------------------------
+
+export type CommitFileChange = {
+  path: string;
+  directory: string;
+  filename: string;
+  status: FileStatusCode;
+  insertions: number;
+  deletions: number;
+};
+
+export type CommitFileSummary = {
+  files: CommitFileChange[];
+  totalFiles: number;
+  totalInsertions: number;
+  totalDeletions: number;
+};
+
+export function parseCommitFiles(showOutput: string): CommitFileSummary {
+  const files: CommitFileChange[] = [];
+  // Split on file diff boundaries
+  const fileDiffs = showOutput.split(/^diff --git /m).slice(1);
+
+  for (const section of fileDiffs) {
+    const lines = section.split('\n');
+    // Extract path from "a/path b/path"
+    const header = lines[0] ?? '';
+    const match = header.match(/^a\/(.+?) b\/(.+)/);
+    if (!match) continue;
+
+    const pathA = match[1];
+    const pathB = match[2];
+
+    // Determine status
+    let status: FileStatusCode = 'M';
+    const joined = lines.slice(0, 6).join('\n');
+    if (joined.includes('new file mode')) status = 'A';
+    else if (joined.includes('deleted file mode')) status = 'D';
+
+    const filePath = status === 'D' ? pathA : pathB;
+
+    // Count insertions/deletions (lines starting with +/- but not +++/---)
+    let insertions = 0;
+    let deletions = 0;
+    for (const line of lines) {
+      if (line.startsWith('+++') || line.startsWith('---')) continue;
+      if (line.startsWith('+')) insertions++;
+      else if (line.startsWith('-')) deletions++;
+    }
+
+    const lastSlash = filePath.lastIndexOf('/');
+    const directory = lastSlash >= 0 ? filePath.substring(0, lastSlash + 1) : '';
+    const filename = lastSlash >= 0 ? filePath.substring(lastSlash + 1) : filePath;
+
+    files.push({ path: filePath, directory, filename, status, insertions, deletions });
+  }
+
+  return {
+    files,
+    totalFiles: files.length,
+    totalInsertions: files.reduce((sum, f) => sum + f.insertions, 0),
+    totalDeletions: files.reduce((sum, f) => sum + f.deletions, 0),
+  };
+}
diff --git a/src/components/git-panel/view/GitPanel.tsx b/src/components/git-panel/view/GitPanel.tsx
index d670f65..fc6438b 100644
--- a/src/components/git-panel/view/GitPanel.tsx
+++ b/src/components/git-panel/view/GitPanel.tsx
@@ -2,8 +2,10 @@ import { useCallback, useState } from 'react';
 import { useGitPanelController } from '../hooks/useGitPanelController';
 import { useRevertLocalCommit } from '../hooks/useRevertLocalCommit';
 import type { ConfirmationRequest, GitPanelProps, GitPanelView } from '../types/types';
+import { getChangedFileCount } from '../utils/gitPanelUtils';
 import ChangesView from '../view/changes/ChangesView';
 import HistoryView from '../view/history/HistoryView';
+import BranchesView from '../view/branches/BranchesView';
 import GitPanelHeader from '../view/GitPanelHeader';
 import GitRepositoryErrorState from '../view/GitRepositoryErrorState';
 import GitViewTabs from '../view/GitViewTabs';
@@ -21,6 +23,8 @@ export default function GitPanel({ selectedProject, isMobile = false, onFileOpen
     isLoading,
     currentBranch,
     branches,
+    localBranches,
+    remoteBranches,
     recentCommits,
     commitDiffs,
     remoteStatus,
@@ -30,9 +34,12 @@ export default function GitPanel({ selectedProject, isMobile = false, onFileOpen
     isPushing,
     isPublishing,
     isCreatingInitialCommit,
+    operationError,
+    clearOperationError,
     refreshAll,
     switchBranch,
     createBranch,
+    deleteBranch,
     handleFetch,
     handlePull,
     handlePush,
@@ -56,13 +63,9 @@ export default function GitPanel({ selectedProject, isMobile = false, onFileOpen
   });
 
   const executeConfirmedAction = useCallback(async () => {
-    if (!confirmAction) {
-      return;
-    }
-
+    if (!confirmAction) return;
     const actionToExecute = confirmAction;
     setConfirmAction(null);
-
     try {
       await actionToExecute.onConfirm();
     } catch (error) {
@@ -70,6 +73,8 @@ export default function GitPanel({ selectedProject, isMobile = false, onFileOpen
     }
   }, [confirmAction]);
 
+  const changeCount = getChangedFileCount(gitStatus);
+
   if (!selectedProject) {
     return (
       <div className="flex h-full items-center justify-center text-muted-foreground">
@@ -92,6 +97,7 @@ export default function GitPanel({ selectedProject, isMobile = false, onFileOpen
         isPushing={isPushing}
         isPublishing={isPublishing}
         isRevertingLocalCommit={isRevertingLocalCommit}
+        operationError={operationError}
         onRefresh={refreshAll}
         onRevertLocalCommit={revertLatestLocalCommit}
         onSwitchBranch={switchBranch}
@@ -100,6 +106,7 @@ export default function GitPanel({ selectedProject, isMobile = false, onFileOpen
         onPull={handlePull}
         onPush={handlePush}
         onPublish={handlePublish}
+        onClearError={clearOperationError}
         onRequestConfirmation={setConfirmAction}
       />
 
@@ -110,6 +117,7 @@ export default function GitPanel({ selectedProject, isMobile = false, onFileOpen
           <GitViewTabs
             activeView={activeView}
             isHidden={hasExpandedFiles}
+            changeCount={changeCount}
             onChange={setActiveView}
           />
 
@@ -145,6 +153,22 @@ export default function GitPanel({ selectedProject, isMobile = false, onFileOpen
               onFetchCommitDiff={fetchCommitDiff}
             />
           )}
+
+          {activeView === 'branches' && (
+            <BranchesView
+              isMobile={isMobile}
+              isLoading={isLoading}
+              currentBranch={currentBranch}
+              localBranches={localBranches}
+              remoteBranches={remoteBranches}
+              remoteStatus={remoteStatus}
+              isCreatingBranch={isCreatingBranch}
+              onSwitchBranch={switchBranch}
+              onCreateBranch={createBranch}
+              onDeleteBranch={deleteBranch}
+              onRequestConfirmation={setConfirmAction}
+            />
+          )}
         </>
       )}
 
diff --git a/src/components/git-panel/view/GitPanelHeader.tsx b/src/components/git-panel/view/GitPanelHeader.tsx
index 2710d4b..9913cef 100644
--- a/src/components/git-panel/view/GitPanelHeader.tsx
+++ b/src/components/git-panel/view/GitPanelHeader.tsx
@@ -1,4 +1,4 @@
-import { Check, ChevronDown, Download, GitBranch, Plus, RefreshCw, RotateCcw, Upload } from 'lucide-react';
+import { AlertCircle, Check, ChevronDown, Download, GitBranch, Plus, RefreshCw, RotateCcw, Upload, X } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import type { ConfirmationRequest, GitRemoteStatus } from '../types/types';
 import NewBranchModal from './modals/NewBranchModal';
@@ -15,6 +15,7 @@ type GitPanelHeaderProps = {
   isPushing: boolean;
   isPublishing: boolean;
   isRevertingLocalCommit: boolean;
+  operationError: string | null;
   onRefresh: () => void;
   onRevertLocalCommit: () => Promise<void>;
   onSwitchBranch: (branchName: string) => Promise<boolean>;
@@ -23,6 +24,7 @@ type GitPanelHeaderProps = {
   onPull: () => Promise<void>;
   onPush: () => Promise<void>;
   onPublish: () => Promise<void>;
+  onClearError: () => void;
   onRequestConfirmation: (request: ConfirmationRequest) => void;
 };
 
@@ -38,6 +40,7 @@ export default function GitPanelHeader({
   isPushing,
   isPublishing,
   isRevertingLocalCommit,
+  operationError,
   onRefresh,
   onRevertLocalCommit,
   onSwitchBranch,
@@ -46,6 +49,7 @@ export default function GitPanelHeader({
   onPull,
   onPush,
   onPublish,
+  onClearError,
   onRequestConfirmation,
 }: GitPanelHeaderProps) {
   const [showBranchDropdown, setShowBranchDropdown] = useState(false);
@@ -63,10 +67,10 @@ export default function GitPanelHeader({
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
-  const aheadCount = remoteStatus?.ahead || 0;
-  const behindCount = remoteStatus?.behind || 0;
-  const remoteName = remoteStatus?.remoteName || 'remote';
-  const shouldShowFetchButton = aheadCount > 0 && behindCount > 0;
+  const aheadCount = remoteStatus?.ahead ?? 0;
+  const behindCount = remoteStatus?.behind ?? 0;
+  const remoteName = remoteStatus?.remoteName ?? 'remote';
+  const anyPending = isFetching || isPulling || isPushing || isPublishing;
 
   const requestPullConfirmation = () => {
     onRequestConfirmation({
@@ -103,57 +107,39 @@ export default function GitPanelHeader({
   const handleSwitchBranch = async (branchName: string) => {
     try {
       const success = await onSwitchBranch(branchName);
-      if (success) {
-        setShowBranchDropdown(false);
-      }
+      if (success) setShowBranchDropdown(false);
     } catch (error) {
       console.error('[GitPanelHeader] Failed to switch branch:', error);
     }
   };
 
-  const handleFetch = async () => {
-    try {
-      await onFetch();
-    } catch (error) {
-      console.error('[GitPanelHeader] Failed to fetch remote changes:', error);
-    }
-  };
-
   return (
     <>
+      {/* Branch row + action buttons */}
       <div className={`flex items-center justify-between border-b border-border/60 ${isMobile ? 'px-3 py-2' : 'px-4 py-3'}`}>
+        {/* Branch selector */}
         <div className="relative" ref={dropdownRef}>
           <button
-            onClick={() => setShowBranchDropdown((previous) => !previous)}
+            onClick={() => setShowBranchDropdown((prev) => !prev)}
             className={`flex items-center rounded-lg transition-colors hover:bg-accent ${isMobile ? 'space-x-1 px-2 py-1' : 'space-x-2 px-3 py-1.5'}`}
           >
             <GitBranch className={`text-muted-foreground ${isMobile ? 'h-3 w-3' : 'h-4 w-4'}`} />
             <span className="flex items-center gap-1">
               <span className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>{currentBranch}</span>
               {remoteStatus?.hasRemote && (
-                <span className="flex items-center gap-1 text-xs">
+                <span className="flex items-center gap-0.5 text-xs">
                   {aheadCount > 0 && (
-                    <span
-                      className="text-green-600 dark:text-green-400"
-                      title={`${aheadCount} commit${aheadCount !== 1 ? 's' : ''} ahead`}
-                    >
-                      {'\u2191'}
-                      {aheadCount}
+                    <span className="text-green-600 dark:text-green-400" title={`${aheadCount} ahead`}>
+                      ↑{aheadCount}
                     </span>
                   )}
                   {behindCount > 0 && (
-                    <span
-                      className="text-primary"
-                      title={`${behindCount} commit${behindCount !== 1 ? 's' : ''} behind`}
-                    >
-                      {'\u2193'}
-                      {behindCount}
+                    <span className="text-primary" title={`${behindCount} behind`}>
+                      ↓{behindCount}
                     </span>
                   )}
                   {remoteStatus.isUpToDate && (
-                    <span className="text-muted-foreground" title="Up to date with remote">
-                      {'\u2713'}
-                    </span>
+                    <span className="text-muted-foreground" title="Up to date">✓</span>
                   )}
                 </span>
               )}
@@ -195,56 +181,54 @@ export default function GitPanelHeader({
           )}
         </div>
 
+        {/* Action buttons */}
         <div className={`flex items-center ${isMobile ? 'gap-1' : 'gap-2'}`}>
           {remoteStatus?.hasRemote && (
             <>
-              {!remoteStatus.hasUpstream && (
+              {!remoteStatus.hasUpstream ? (
                 <button
                   onClick={requestPublishConfirmation}
-                  disabled={isPublishing}
+                  disabled={anyPending}
                   className="flex items-center gap-1 rounded-lg bg-purple-600 px-2.5 py-1 text-sm text-white transition-colors hover:bg-purple-700 disabled:opacity-50"
-                  title={`Publish branch "${currentBranch}" to ${remoteName}`}
+                  title={`Publish "${currentBranch}" to ${remoteName}`}
                 >
                   <Upload className={`h-3 w-3 ${isPublishing ? 'animate-pulse' : ''}`} />
-                  <span>{isPublishing ? 'Publishing...' : 'Publish'}</span>
+                  {!isMobile && <span>{isPublishing ? 'Publishing…' : 'Publish'}</span>}
                 </button>
-              )}
-
-              {remoteStatus.hasUpstream && !remoteStatus.isUpToDate && (
+              ) : (
                 <>
+                  {/* Fetch — always visible when remote exists */}
+                  <button
+                    onClick={() => void onFetch()}
+                    disabled={anyPending}
+                    className="flex items-center gap-1 rounded-lg bg-primary px-2.5 py-1 text-sm text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
+                    title={`Fetch from ${remoteName}`}
+                  >
+                    <RefreshCw className={`h-3 w-3 ${isFetching ? 'animate-spin' : ''}`} />
+                    {!isMobile && <span>{isFetching ? 'Fetching…' : 'Fetch'}</span>}
+                  </button>
+
                   {behindCount > 0 && (
                     <button
                       onClick={requestPullConfirmation}
-                      disabled={isPulling}
+                      disabled={anyPending}
                       className="flex items-center gap-1 rounded-lg bg-green-600 px-2.5 py-1 text-sm text-white transition-colors hover:bg-green-700 disabled:opacity-50"
-                      title={`Pull ${behindCount} commit${behindCount !== 1 ? 's' : ''} from ${remoteName}`}
+                      title={`Pull ${behindCount} from ${remoteName}`}
                     >
                       <Download className={`h-3 w-3 ${isPulling ? 'animate-pulse' : ''}`} />
-                      <span>{isPulling ? 'Pulling...' : `Pull ${behindCount}`}</span>
+                      {!isMobile && <span>{isPulling ? 'Pulling…' : `Pull ${behindCount}`}</span>}
                     </button>
                   )}
 
                   {aheadCount > 0 && (
                     <button
                       onClick={requestPushConfirmation}
-                      disabled={isPushing}
+                      disabled={anyPending}
                       className="flex items-center gap-1 rounded-lg bg-orange-600 px-2.5 py-1 text-sm text-white transition-colors hover:bg-orange-700 disabled:opacity-50"
-                      title={`Push ${aheadCount} commit${aheadCount !== 1 ? 's' : ''} to ${remoteName}`}
+                      title={`Push ${aheadCount} to ${remoteName}`}
                     >
                       <Upload className={`h-3 w-3 ${isPushing ? 'animate-pulse' : ''}`} />
-                      <span>{isPushing ? 'Pushing...' : `Push ${aheadCount}`}</span>
-                    </button>
-                  )}
-
-                  {shouldShowFetchButton && (
-                    <button
-                      onClick={() => void handleFetch()}
-                      disabled={isFetching}
-                      className="flex items-center gap-1 rounded-lg bg-primary px-2.5 py-1 text-sm text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
-                      title={`Fetch from ${remoteName}`}
-                    >
-                      <RefreshCw className={`h-3 w-3 ${isFetching ? 'animate-spin' : ''}`} />
-                      <span>{isFetching ? 'Fetching...' : 'Fetch'}</span>
+                      {!isMobile && <span>{isPushing ? 'Pushing…' : `Push ${aheadCount}`}</span>}
                     </button>
                   )}
                 </>
@@ -274,6 +258,21 @@ export default function GitPanelHeader({
         </div>
       </div>
 
+      {/* Inline error banner */}
+      {operationError && (
+        <div className="flex items-start gap-2 border-b border-destructive/20 bg-destructive/10 px-4 py-2.5 text-sm text-destructive">
+          <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
+          <span className="flex-1 leading-snug">{operationError}</span>
+          <button
+            onClick={onClearError}
+            className="shrink-0 rounded p-0.5 hover:bg-destructive/20"
+            aria-label="Dismiss error"
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      )}
+
       <NewBranchModal
         isOpen={showNewBranchModal}
         currentBranch={currentBranch}
diff --git a/src/components/git-panel/view/GitViewTabs.tsx b/src/components/git-panel/view/GitViewTabs.tsx
index 9deebab..1c0aaba 100644
--- a/src/components/git-panel/view/GitViewTabs.tsx
+++ b/src/components/git-panel/view/GitViewTabs.tsx
@@ -1,45 +1,47 @@
-import { FileText, History } from 'lucide-react';
+import { FileText, GitBranch, History } from 'lucide-react';
 import type { GitPanelView } from '../types/types';
 
 type GitViewTabsProps = {
   activeView: GitPanelView;
   isHidden: boolean;
+  changeCount: number;
   onChange: (view: GitPanelView) => void;
 };
 
-export default function GitViewTabs({ activeView, isHidden, onChange }: GitViewTabsProps) {
+const TABS: { id: GitPanelView; label: string; Icon: typeof FileText }[] = [
+  { id: 'changes', label: 'Changes', Icon: FileText },
+  { id: 'history', label: 'Commits', Icon: History },
+  { id: 'branches', label: 'Branches', Icon: GitBranch },
+];
+
+export default function GitViewTabs({ activeView, isHidden, changeCount, onChange }: GitViewTabsProps) {
   return (
     <div
       className={`flex border-b border-border/60 transition-all duration-300 ease-in-out ${
         isHidden ? 'max-h-0 -translate-y-2 overflow-hidden opacity-0' : 'max-h-16 translate-y-0 opacity-100'
       }`}
     >
-      <button
-        onClick={() => onChange('changes')}
-        className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
-          activeView === 'changes'
-            ? 'border-b-2 border-primary text-primary'
-            : 'text-muted-foreground hover:text-foreground'
-        }`}
-      >
-        <span className="flex items-center justify-center gap-2">
-          <FileText className="h-4 w-4" />
-          <span>Changes</span>
-        </span>
-      </button>
-      <button
-        onClick={() => onChange('history')}
-        className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
-          activeView === 'history'
-            ? 'border-b-2 border-primary text-primary'
-            : 'text-muted-foreground hover:text-foreground'
-        }`}
-      >
-        <span className="flex items-center justify-center gap-2">
-          <History className="h-4 w-4" />
-          <span>History</span>
-        </span>
-      </button>
+      {TABS.map(({ id, label, Icon }) => (
+        <button
+          key={id}
+          onClick={() => onChange(id)}
+          className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
+            activeView === id
+              ? 'border-b-2 border-primary text-primary'
+              : 'text-muted-foreground hover:text-foreground'
+          }`}
+        >
+          <span className="flex items-center justify-center gap-2">
+            <Icon className="h-4 w-4" />
+            <span>{label}</span>
+            {id === 'changes' && changeCount > 0 && (
+              <span className="rounded-full bg-primary/15 px-1.5 py-0.5 text-xs font-semibold text-primary">
+                {changeCount}
+              </span>
+            )}
+          </span>
+        </button>
+      ))}
     </div>
   );
 }
diff --git a/src/components/git-panel/view/branches/BranchesView.tsx b/src/components/git-panel/view/branches/BranchesView.tsx
new file mode 100644
index 0000000..6fd06b0
--- /dev/null
+++ b/src/components/git-panel/view/branches/BranchesView.tsx
@@ -0,0 +1,242 @@
+import { Check, GitBranch, Globe, Plus, RefreshCw, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import type { ConfirmationRequest, GitRemoteStatus } from '../../types/types';
+import NewBranchModal from '../modals/NewBranchModal';
+
+type BranchesViewProps = {
+  isMobile: boolean;
+  isLoading: boolean;
+  currentBranch: string;
+  localBranches: string[];
+  remoteBranches: string[];
+  remoteStatus: GitRemoteStatus | null;
+  isCreatingBranch: boolean;
+  onSwitchBranch: (branchName: string) => Promise<boolean>;
+  onCreateBranch: (branchName: string) => Promise<boolean>;
+  onDeleteBranch: (branchName: string) => Promise<boolean>;
+  onRequestConfirmation: (request: ConfirmationRequest) => void;
+};
+
+// ---------------------------------------------------------------------------
+// Branch row
+// ---------------------------------------------------------------------------
+
+type BranchRowProps = {
+  name: string;
+  isCurrent: boolean;
+  isRemote: boolean;
+  aheadCount: number;
+  behindCount: number;
+  isMobile: boolean;
+  onSwitch: () => void;
+  onDelete: () => void;
+};
+
+function BranchRow({ name, isCurrent, isRemote, aheadCount, behindCount, isMobile, onSwitch, onDelete }: BranchRowProps) {
+  return (
+    <div
+      className={`group flex items-center gap-3 border-b border-border/40 px-4 transition-colors hover:bg-accent/40 ${
+        isMobile ? 'py-2.5' : 'py-3'
+      } ${isCurrent ? 'bg-primary/5' : ''}`}
+    >
+      {/* Branch icon */}
+      <div className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-md border ${
+        isCurrent
+          ? 'border-primary/30 bg-primary/10 text-primary'
+          : isRemote
+          ? 'border-border bg-muted text-muted-foreground'
+          : 'border-border bg-muted/50 text-muted-foreground'
+      }`}>
+        {isRemote ? <Globe className="h-3.5 w-3.5" /> : <GitBranch className="h-3.5 w-3.5" />}
+      </div>
+
+      {/* Name + pills */}
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <div className="flex items-center gap-2">
+          <span className={`truncate text-sm font-medium ${isCurrent ? 'text-foreground' : 'text-foreground/80'}`}>
+            {name}
+          </span>
+          {isCurrent && (
+            <span className="shrink-0 rounded-full bg-primary/15 px-1.5 py-0.5 text-xs font-semibold text-primary">
+              current
+            </span>
+          )}
+          {isRemote && !isCurrent && (
+            <span className="shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
+              remote
+            </span>
+          )}
+        </div>
+        {/* Ahead/behind — only meaningful for the current branch */}
+        {isCurrent && (aheadCount > 0 || behindCount > 0) && (
+          <div className="flex items-center gap-2 text-xs">
+            {aheadCount > 0 && (
+              <span className="text-green-600 dark:text-green-400">↑{aheadCount} ahead</span>
+            )}
+            {behindCount > 0 && (
+              <span className="text-primary">↓{behindCount} behind</span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className={`flex shrink-0 items-center gap-1 ${isCurrent ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}>
+        {isCurrent ? (
+          <Check className="h-4 w-4 text-primary" />
+        ) : !isRemote ? (
+          <>
+            <button
+              onClick={onSwitch}
+              className="rounded-md px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+              title={`Switch to ${name}`}
+            >
+              Switch
+            </button>
+            <button
+              onClick={onDelete}
+              className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+              title={`Delete ${name}`}
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </button>
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Section header
+// ---------------------------------------------------------------------------
+
+function SectionHeader({ label, count }: { label: string; count: number }) {
+  return (
+    <div className="sticky top-0 z-10 flex items-center justify-between bg-background/95 px-4 py-2 backdrop-blur-sm">
+      <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">{label}</span>
+      <span className="rounded-full bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">{count}</span>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// BranchesView
+// ---------------------------------------------------------------------------
+
+export default function BranchesView({
+  isMobile,
+  isLoading,
+  currentBranch,
+  localBranches,
+  remoteBranches,
+  remoteStatus,
+  isCreatingBranch,
+  onSwitchBranch,
+  onCreateBranch,
+  onDeleteBranch,
+  onRequestConfirmation,
+}: BranchesViewProps) {
+  const [showNewBranchModal, setShowNewBranchModal] = useState(false);
+
+  const aheadCount = remoteStatus?.ahead ?? 0;
+  const behindCount = remoteStatus?.behind ?? 0;
+
+  const requestSwitch = (branch: string) => {
+    onRequestConfirmation({
+      type: 'commit', // reuse neutral type for switch
+      message: `Switch to branch "${branch}"? Make sure you have no uncommitted changes.`,
+      onConfirm: () => void onSwitchBranch(branch),
+    });
+  };
+
+  const requestDelete = (branch: string) => {
+    onRequestConfirmation({
+      type: 'deleteBranch',
+      message: `Delete branch "${branch}"? This cannot be undone.`,
+      onConfirm: () => void onDeleteBranch(branch),
+    });
+  };
+
+  if (isLoading && localBranches.length === 0) {
+    return (
+      <div className="flex h-32 items-center justify-center">
+        <RefreshCw className="h-5 w-5 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-1 flex-col overflow-hidden ${isMobile ? 'pb-mobile-nav' : ''}`}>
+      {/* Create branch button */}
+      <div className="flex items-center justify-between border-b border-border/40 px-4 py-2.5">
+        <span className="text-sm text-muted-foreground">
+          {localBranches.length} local{remoteBranches.length > 0 ? `, ${remoteBranches.length} remote` : ''}
+        </span>
+        <button
+          onClick={() => setShowNewBranchModal(true)}
+          className="flex items-center gap-1.5 rounded-lg bg-primary/10 px-3 py-1.5 text-sm font-medium text-primary transition-colors hover:bg-primary/20"
+        >
+          <Plus className="h-3.5 w-3.5" />
+          New branch
+        </button>
+      </div>
+
+      {/* Branch list */}
+      <div className="flex-1 overflow-y-auto">
+        {localBranches.length > 0 && (
+          <>
+            <SectionHeader label="Local" count={localBranches.length} />
+            {localBranches.map((branch) => (
+              <BranchRow
+                key={`local:${branch}`}
+                name={branch}
+                isCurrent={branch === currentBranch}
+                isRemote={false}
+                aheadCount={branch === currentBranch ? aheadCount : 0}
+                behindCount={branch === currentBranch ? behindCount : 0}
+                isMobile={isMobile}
+                onSwitch={() => requestSwitch(branch)}
+                onDelete={() => requestDelete(branch)}
+              />
+            ))}
+          </>
+        )}
+
+        {remoteBranches.length > 0 && (
+          <>
+            <SectionHeader label="Remote" count={remoteBranches.length} />
+            {remoteBranches.map((branch) => (
+              <BranchRow
+                key={`remote:${branch}`}
+                name={branch}
+                isCurrent={false}
+                isRemote={true}
+                aheadCount={0}
+                behindCount={0}
+                isMobile={isMobile}
+                onSwitch={() => requestSwitch(branch)}
+                onDelete={() => requestDelete(branch)}
+              />
+            ))}
+          </>
+        )}
+
+        {localBranches.length === 0 && remoteBranches.length === 0 && (
+          <div className="flex h-32 flex-col items-center justify-center gap-2 text-muted-foreground">
+            <GitBranch className="h-10 w-10 opacity-30" />
+            <p className="text-sm">No branches found</p>
+          </div>
+        )}
+      </div>
+
+      <NewBranchModal
+        isOpen={showNewBranchModal}
+        currentBranch={currentBranch}
+        isCreatingBranch={isCreatingBranch}
+        onClose={() => setShowNewBranchModal(false)}
+        onCreateBranch={onCreateBranch}
+      />
+    </div>
+  );
+}
diff --git a/src/components/git-panel/view/changes/ChangesView.tsx b/src/components/git-panel/view/changes/ChangesView.tsx
index 4810bb2..cfcb29f 100644
--- a/src/components/git-panel/view/changes/ChangesView.tsx
+++ b/src/components/git-panel/view/changes/ChangesView.tsx
@@ -4,7 +4,6 @@ import type { ConfirmationRequest, FileStatusCode, GitDiffMap, GitStatusResponse
 import { getAllChangedFiles, hasChangedFiles } from '../../utils/gitPanelUtils';
 import CommitComposer from './CommitComposer';
 import FileChangeList from './FileChangeList';
-import FileSelectionControls from './FileSelectionControls';
 import FileStatusLegend from './FileStatusLegend';
 
 type ChangesViewProps = {
@@ -56,8 +55,12 @@ export default function ChangesView({
       return;
     }
 
-    // Preserve previous behavior: every fresh status snapshot reselects changed files.
-    setSelectedFiles(new Set(getAllChangedFiles(gitStatus)));
+    // Remove any selected files that no longer exist in the status
+    setSelectedFiles((prev) => {
+      const allFiles = new Set(getAllChangedFiles(gitStatus));
+      const next = new Set([...prev].filter((f) => allFiles.has(f)));
+      return next;
+    });
   }, [gitStatus]);
 
   useEffect(() => {
@@ -129,6 +132,11 @@ export default function ChangesView({
     return onGenerateCommitMessage(Array.from(selectedFiles));
   }, [onGenerateCommitMessage, selectedFiles]);
 
+  const unstagedFiles = useMemo(
+    () => new Set(changedFiles.filter((f) => !selectedFiles.has(f))),
+    [changedFiles, selectedFiles],
+  );
+
   return (
     <>
       <CommitComposer
@@ -141,17 +149,6 @@ export default function ChangesView({
         onRequestConfirmation={onRequestConfirmation}
       />
 
-      {gitStatus && !gitStatus.error && (
-        <FileSelectionControls
-          isMobile={isMobile}
-          selectedCount={selectedFiles.size}
-          totalCount={changedFiles.length}
-          isHidden={hasExpandedFiles}
-          onSelectAll={() => setSelectedFiles(new Set(changedFiles))}
-          onDeselectAll={() => setSelectedFiles(new Set())}
-        />
-      )}
-
       {!gitStatus?.error && <FileStatusLegend isMobile={isMobile} />}
 
       <div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-mobile-nav' : ''}`}>
@@ -193,21 +190,71 @@ export default function ChangesView({
           </div>
         ) : (
           <div className={isMobile ? 'pb-4' : ''}>
-            <FileChangeList
-              gitStatus={gitStatus}
-              gitDiff={gitDiff}
-              expandedFiles={expandedFiles}
-              selectedFiles={selectedFiles}
-              isMobile={isMobile}
-              wrapText={wrapText}
-              onToggleSelected={toggleFileSelected}
-              onToggleExpanded={toggleFileExpanded}
-              onOpenFile={(filePath) => {
-                void onOpenFile(filePath);
-              }}
-              onToggleWrapText={() => onWrapTextChange(!wrapText)}
-              onRequestFileAction={requestFileAction}
-            />
+            {/* STAGED section */}
+            <div className="flex items-center justify-between border-b border-border/60 bg-muted/30 px-3 py-1.5">
+              <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                Staged ({selectedFiles.size})
+              </span>
+              {selectedFiles.size > 0 && (
+                <button
+                  onClick={() => setSelectedFiles(new Set())}
+                  className="text-xs text-primary transition-colors hover:text-primary/80"
+                >
+                  Unstage All
+                </button>
+              )}
+            </div>
+            {selectedFiles.size === 0 ? (
+              <div className="px-3 py-2 text-xs text-muted-foreground italic">No staged files</div>
+            ) : (
+              <FileChangeList
+                gitStatus={gitStatus}
+                gitDiff={gitDiff}
+                expandedFiles={expandedFiles}
+                selectedFiles={selectedFiles}
+                isMobile={isMobile}
+                wrapText={wrapText}
+                filePaths={selectedFiles}
+                onToggleSelected={toggleFileSelected}
+                onToggleExpanded={toggleFileExpanded}
+                onOpenFile={(filePath) => { void onOpenFile(filePath); }}
+                onToggleWrapText={() => onWrapTextChange(!wrapText)}
+                onRequestFileAction={requestFileAction}
+              />
+            )}
+
+            {/* CHANGES section */}
+            <div className="flex items-center justify-between border-b border-border/60 bg-muted/30 px-3 py-1.5">
+              <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                Changes ({unstagedFiles.size})
+              </span>
+              {unstagedFiles.size > 0 && (
+                <button
+                  onClick={() => setSelectedFiles(new Set(changedFiles))}
+                  className="text-xs text-primary transition-colors hover:text-primary/80"
+                >
+                  Stage All
+                </button>
+              )}
+            </div>
+            {unstagedFiles.size === 0 ? (
+              <div className="px-3 py-2 text-xs text-muted-foreground italic">All changes staged</div>
+            ) : (
+              <FileChangeList
+                gitStatus={gitStatus}
+                gitDiff={gitDiff}
+                expandedFiles={expandedFiles}
+                selectedFiles={selectedFiles}
+                isMobile={isMobile}
+                wrapText={wrapText}
+                filePaths={unstagedFiles}
+                onToggleSelected={toggleFileSelected}
+                onToggleExpanded={toggleFileExpanded}
+                onOpenFile={(filePath) => { void onOpenFile(filePath); }}
+                onToggleWrapText={() => onWrapTextChange(!wrapText)}
+                onRequestFileAction={requestFileAction}
+              />
+            )}
           </div>
         )}
       </div>
diff --git a/src/components/git-panel/view/changes/FileChangeList.tsx b/src/components/git-panel/view/changes/FileChangeList.tsx
index 0438382..59f7b3d 100644
--- a/src/components/git-panel/view/changes/FileChangeList.tsx
+++ b/src/components/git-panel/view/changes/FileChangeList.tsx
@@ -9,6 +9,7 @@ type FileChangeListProps = {
   selectedFiles: Set<string>;
   isMobile: boolean;
   wrapText: boolean;
+  filePaths?: Set<string>;
   onToggleSelected: (filePath: string) => void;
   onToggleExpanded: (filePath: string) => void;
   onOpenFile: (filePath: string) => void;
@@ -23,6 +24,7 @@ export default function FileChangeList({
   selectedFiles,
   isMobile,
   wrapText,
+  filePaths,
   onToggleSelected,
   onToggleExpanded,
   onOpenFile,
@@ -32,23 +34,25 @@ export default function FileChangeList({
   return (
     <>
       {FILE_STATUS_GROUPS.map(({ key, status }) =>
-        (gitStatus[key] || []).map((filePath) => (
-          <FileChangeItem
-            key={filePath}
-            filePath={filePath}
-            status={status}
-            isMobile={isMobile}
-            isExpanded={expandedFiles.has(filePath)}
-            isSelected={selectedFiles.has(filePath)}
-            diff={gitDiff[filePath]}
-            wrapText={wrapText}
-            onToggleSelected={onToggleSelected}
-            onToggleExpanded={onToggleExpanded}
-            onOpenFile={onOpenFile}
-            onToggleWrapText={onToggleWrapText}
-            onRequestFileAction={onRequestFileAction}
-          />
-        )),
+        (gitStatus[key] || [])
+          .filter((filePath) => !filePaths || filePaths.has(filePath))
+          .map((filePath) => (
+            <FileChangeItem
+              key={filePath}
+              filePath={filePath}
+              status={status}
+              isMobile={isMobile}
+              isExpanded={expandedFiles.has(filePath)}
+              isSelected={selectedFiles.has(filePath)}
+              diff={gitDiff[filePath]}
+              wrapText={wrapText}
+              onToggleSelected={onToggleSelected}
+              onToggleExpanded={onToggleExpanded}
+              onOpenFile={onOpenFile}
+              onToggleWrapText={onToggleWrapText}
+              onRequestFileAction={onRequestFileAction}
+            />
+          )),
       )}
     </>
   );
diff --git a/src/components/git-panel/view/history/CommitHistoryItem.tsx b/src/components/git-panel/view/history/CommitHistoryItem.tsx
index 60fd5ab..33a4139 100644
--- a/src/components/git-panel/view/history/CommitHistoryItem.tsx
+++ b/src/components/git-panel/view/history/CommitHistoryItem.tsx
@@ -1,7 +1,16 @@
 import { ChevronDown, ChevronRight } from 'lucide-react';
+import { useMemo } from 'react';
 import type { GitCommitSummary } from '../../types/types';
+import { getStatusBadgeClass, parseCommitFiles } from '../../utils/gitPanelUtils';
 import GitDiffViewer from '../shared/GitDiffViewer';
 
+function formatDate(dateString: string): string {
+  return new Date(dateString).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
 
 type CommitHistoryItemProps = {
   commit: GitCommitSummary;
@@ -20,6 +29,11 @@ export default function CommitHistoryItem({
   wrapText,
   onToggle,
 }: CommitHistoryItemProps) {
+  const fileSummary = useMemo(() => {
+    if (!diff) return null;
+    return parseCommitFiles(diff);
+  }, [diff]);
+
   return (
     <div className="border-b border-border last:border-0">
       <button
@@ -50,10 +64,83 @@ export default function CommitHistoryItem({
 
       {isExpanded && diff && (
         <div className="bg-muted/50">
-          <div className="max-h-96 overflow-y-auto p-2">
-            <div className="mb-2 font-mono text-sm text-muted-foreground">
-              {commit.stats}
+          <div className="max-h-[32rem] overflow-y-auto p-3">
+            {/* Full hash */}
+            <p className="mb-2 select-all font-mono text-xs text-muted-foreground/70">
+              {commit.hash}
+            </p>
+
+            {/* Author + Date */}
+            <div className="mb-3 flex gap-4 text-xs text-muted-foreground">
+              <span>
+                <span className="text-muted-foreground/60">Author </span>
+                {commit.author}
+              </span>
+              <span>
+                <span className="text-muted-foreground/60">Date </span>
+                {formatDate(commit.date)}
+              </span>
             </div>
+
+            {/* Stats card */}
+            {fileSummary && (
+              <div className="mb-3 flex gap-4 rounded-md bg-muted/80 px-4 py-2 text-center text-xs">
+                <div>
+                  <div className="text-muted-foreground/60">Files</div>
+                  <div className="font-semibold text-foreground">{fileSummary.totalFiles}</div>
+                </div>
+                <div>
+                  <div className="text-muted-foreground/60">Added</div>
+                  <div className="font-semibold text-green-600 dark:text-green-400">+{fileSummary.totalInsertions}</div>
+                </div>
+                <div>
+                  <div className="text-muted-foreground/60">Removed</div>
+                  <div className="font-semibold text-red-600 dark:text-red-400">-{fileSummary.totalDeletions}</div>
+                </div>
+              </div>
+            )}
+
+            {/* Changed files list */}
+            {fileSummary && fileSummary.files.length > 0 && (
+              <div className="mb-3">
+                <p className="mb-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground/60">
+                  Changed Files
+                </p>
+                <div className="rounded-md border border-border/60">
+                  {fileSummary.files.map((file, idx) => (
+                    <div
+                      key={file.path}
+                      className={`flex items-center gap-2 px-2.5 py-1.5 text-xs ${
+                        idx < fileSummary.files.length - 1 ? 'border-b border-border/40' : ''
+                      }`}
+                    >
+                      <span
+                        className={`inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded border text-[9px] font-bold ${getStatusBadgeClass(file.status)}`}
+                      >
+                        {file.status}
+                      </span>
+                      <span className="min-w-0 flex-1 truncate">
+                        {file.directory && (
+                          <span className="text-muted-foreground/60">{file.directory}</span>
+                        )}
+                        <span className="font-medium text-foreground">{file.filename}</span>
+                      </span>
+                      <span className="flex-shrink-0 font-mono text-muted-foreground/60">
+                        {file.insertions > 0 && (
+                          <span className="text-green-600 dark:text-green-400">+{file.insertions}</span>
+                        )}
+                        {file.insertions > 0 && file.deletions > 0 && '/'}
+                        {file.deletions > 0 && (
+                          <span className="text-red-600 dark:text-red-400">-{file.deletions}</span>
+                        )}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Diff viewer */}
             <GitDiffViewer diff={diff} isMobile={isMobile} wrapText={wrapText} />
           </div>
         </div>
diff --git a/src/components/settings/constants/constants.ts b/src/components/settings/constants/constants.ts
index 3efd5c0..36f4539 100644
--- a/src/components/settings/constants/constants.ts
+++ b/src/components/settings/constants/constants.ts
@@ -18,6 +18,7 @@ export const SETTINGS_MAIN_TABS: SettingsMainTab[] = [
   'git',
   'api',
   'tasks',
+  'notifications',
 ];
 
 export const AGENT_PROVIDERS: AgentProvider[] = ['claude', 'cursor', 'codex'];
diff --git a/src/components/settings/hooks/useSettingsController.ts b/src/components/settings/hooks/useSettingsController.ts
index f770190..293cbce 100644
--- a/src/components/settings/hooks/useSettingsController.ts
+++ b/src/components/settings/hooks/useSettingsController.ts
@@ -20,6 +20,7 @@ import type {
   McpServer,
   McpToolsResult,
   McpTestResult,
+  NotificationPreferencesState,
   ProjectSortOrder,
   SettingsMainTab,
   SettingsProject,
@@ -96,9 +97,14 @@ type CodexSettingsStorage = {
   permissionMode?: CodexPermissionMode;
 };
 
+type NotificationPreferencesResponse = {
+  success?: boolean;
+  preferences?: NotificationPreferencesState;
+};
+
 type ActiveLoginProvider = AgentProvider | '';
 
-const KNOWN_MAIN_TABS: SettingsMainTab[] = ['agents', 'appearance', 'git', 'api', 'tasks', 'plugins'];
+const KNOWN_MAIN_TABS: SettingsMainTab[] = ['agents', 'appearance', 'git', 'api', 'tasks', 'notifications', 'plugins'];
 
 const normalizeMainTab = (tab: string): SettingsMainTab => {
   // Keep backwards compatibility with older callers that still pass "tools".
@@ -186,6 +192,18 @@ const createEmptyCursorPermissions = (): CursorPermissionsState => ({
   ...DEFAULT_CURSOR_PERMISSIONS,
 });
 
+const createDefaultNotificationPreferences = (): NotificationPreferencesState => ({
+  channels: {
+    inApp: true,
+    webPush: false,
+  },
+  events: {
+    actionRequired: true,
+    stop: true,
+    error: true,
+  },
+});
+
 export function useSettingsController({ isOpen, initialTab, projects, onClose }: UseSettingsControllerArgs) {
   const { isDarkMode, toggleDarkMode } = useTheme() as ThemeContextValue;
   const closeTimerRef = useRef<number | null>(null);
@@ -204,6 +222,9 @@ export function useSettingsController({ isOpen, initialTab, projects, onClose }:
   const [cursorPermissions, setCursorPermissions] = useState<CursorPermissionsState>(() => (
     createEmptyCursorPermissions()
   ));
+  const [notificationPreferences, setNotificationPreferences] = useState<NotificationPreferencesState>(() => (
+    createDefaultNotificationPreferences()
+  ));
   const [codexPermissionMode, setCodexPermissionMode] = useState<CodexPermissionMode>('default');
   const [geminiPermissionMode, setGeminiPermissionMode] = useState<GeminiPermissionMode>('default');
 
@@ -670,6 +691,22 @@ export function useSettingsController({ isOpen, initialTab, projects, onClose }:
       );
       setGeminiPermissionMode(savedGeminiSettings.permissionMode || 'default');
 
+      try {
+        const notificationResponse = await authenticatedFetch('/api/settings/notification-preferences');
+        if (notificationResponse.ok) {
+          const notificationData = await toResponseJson<NotificationPreferencesResponse>(notificationResponse);
+          if (notificationData.success && notificationData.preferences) {
+            setNotificationPreferences(notificationData.preferences);
+          } else {
+            setNotificationPreferences(createDefaultNotificationPreferences());
+          }
+        } else {
+          setNotificationPreferences(createDefaultNotificationPreferences());
+        }
+      } catch {
+        setNotificationPreferences(createDefaultNotificationPreferences());
+      }
+
       await Promise.all([
         fetchMcpServers(),
         fetchCursorMcpServers(),
@@ -679,6 +716,7 @@ export function useSettingsController({ isOpen, initialTab, projects, onClose }:
       console.error('Error loading settings:', error);
       setClaudePermissions(createEmptyClaudePermissions());
       setCursorPermissions(createEmptyCursorPermissions());
+      setNotificationPreferences(createDefaultNotificationPreferences());
       setCodexPermissionMode('default');
       setProjectSortOrder('name');
     }
@@ -699,7 +737,9 @@ export function useSettingsController({ isOpen, initialTab, projects, onClose }:
     void checkAuthStatus(loginProvider);
   }, [checkAuthStatus, loginProvider]);
 
-  const saveSettings = useCallback(() => {
+  const saveSettings = useCallback(async () => {
+    setSaveStatus(null);
+
     try {
       const now = new Date().toISOString();
       localStorage.setItem('claude-settings', JSON.stringify({
@@ -727,6 +767,14 @@ export function useSettingsController({ isOpen, initialTab, projects, onClose }:
         lastUpdated: now,
       }));
 
+      const notificationResponse = await authenticatedFetch('/api/settings/notification-preferences', {
+        method: 'PUT',
+        body: JSON.stringify(notificationPreferences),
+      });
+      if (!notificationResponse.ok) {
+        throw new Error('Failed to save notification preferences');
+      }
+
       setSaveStatus('success');
     } catch (error) {
       console.error('Error saving settings:', error);
@@ -740,6 +788,7 @@ export function useSettingsController({ isOpen, initialTab, projects, onClose }:
     cursorPermissions.allowedCommands,
     cursorPermissions.disallowedCommands,
     cursorPermissions.skipPermissions,
+    notificationPreferences,
     geminiPermissionMode,
     projectSortOrder,
   ]);
@@ -862,6 +911,8 @@ export function useSettingsController({ isOpen, initialTab, projects, onClose }:
     setClaudePermissions,
     cursorPermissions,
     setCursorPermissions,
+    notificationPreferences,
+    setNotificationPreferences,
     codexPermissionMode,
     setCodexPermissionMode,
     mcpServers,
diff --git a/src/components/settings/types/types.ts b/src/components/settings/types/types.ts
index eff5e13..096059c 100644
--- a/src/components/settings/types/types.ts
+++ b/src/components/settings/types/types.ts
@@ -1,6 +1,6 @@
 import type { Dispatch, SetStateAction } from 'react';
 
-export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'tasks' | 'plugins';
+export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'tasks' | 'notifications' | 'plugins';
 export type AgentProvider = 'claude' | 'cursor' | 'codex' | 'gemini';
 export type AgentCategory = 'account' | 'permissions' | 'mcp';
 export type ProjectSortOrder = 'name' | 'date';
@@ -106,6 +106,18 @@ export type ClaudePermissionsState = {
   skipPermissions: boolean;
 };
 
+export type NotificationPreferencesState = {
+  channels: {
+    inApp: boolean;
+    webPush: boolean;
+  };
+  events: {
+    actionRequired: boolean;
+    stop: boolean;
+    error: boolean;
+  };
+};
+
 export type CursorPermissionsState = {
   allowedCommands: string[];
   disallowedCommands: string[];
diff --git a/src/components/settings/view/Settings.tsx b/src/components/settings/view/Settings.tsx
index a8a424d..444d0e0 100644
--- a/src/components/settings/view/Settings.tsx
+++ b/src/components/settings/view/Settings.tsx
@@ -9,9 +9,11 @@ import AgentsSettingsTab from '../view/tabs/agents-settings/AgentsSettingsTab';
 import AppearanceSettingsTab from '../view/tabs/AppearanceSettingsTab';
 import CredentialsSettingsTab from '../view/tabs/api-settings/CredentialsSettingsTab';
 import GitSettingsTab from '../view/tabs/git-settings/GitSettingsTab';
+import NotificationsSettingsTab from '../view/tabs/NotificationsSettingsTab';
 import TasksSettingsTab from '../view/tabs/tasks-settings/TasksSettingsTab';
 import PluginSettingsTab from '../../plugins/view/PluginSettingsTab';
 import { useSettingsController } from '../hooks/useSettingsController';
+import { useWebPush } from '../../../hooks/useWebPush';
 import type { SettingsProps } from '../types/types';
 
 function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: SettingsProps) {
@@ -27,6 +29,8 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
     updateCodeEditorSetting,
     claudePermissions,
     setClaudePermissions,
+    notificationPreferences,
+    setNotificationPreferences,
     cursorPermissions,
     setCursorPermissions,
     codexPermissionMode,
@@ -70,6 +74,32 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
     onClose,
   });
 
+  const {
+    permission: pushPermission,
+    isSubscribed: isPushSubscribed,
+    isLoading: isPushLoading,
+    subscribe: pushSubscribe,
+    unsubscribe: pushUnsubscribe,
+  } = useWebPush();
+
+  const handleEnablePush = async () => {
+    await pushSubscribe();
+    // Server sets webPush: true in preferences on subscribe; sync local state
+    setNotificationPreferences({
+      ...notificationPreferences,
+      channels: { ...notificationPreferences.channels, webPush: true },
+    });
+  };
+
+  const handleDisablePush = async () => {
+    await pushUnsubscribe();
+    // Server sets webPush: false in preferences on unsubscribe; sync local state
+    setNotificationPreferences({
+      ...notificationPreferences,
+      channels: { ...notificationPreferences.channels, webPush: false },
+    });
+  };
+
   if (!isOpen) {
     return null;
   }
@@ -161,6 +191,18 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
 
               {activeTab === 'tasks' && <TasksSettingsTab />}
 
+            {activeTab === 'notifications' && (
+              <NotificationsSettingsTab
+                notificationPreferences={notificationPreferences}
+                onNotificationPreferencesChange={setNotificationPreferences}
+                pushPermission={pushPermission}
+                isPushSubscribed={isPushSubscribed}
+                isPushLoading={isPushLoading}
+                onEnablePush={handleEnablePush}
+                onDisablePush={handleDisablePush}
+              />
+            )}
+
               {activeTab === 'api' && <CredentialsSettingsTab />}
 
               {activeTab === 'plugins' && <PluginSettingsTab />}
diff --git a/src/components/settings/view/SettingsMainTabs.tsx b/src/components/settings/view/SettingsMainTabs.tsx
index dd9bf60..d085d54 100644
--- a/src/components/settings/view/SettingsMainTabs.tsx
+++ b/src/components/settings/view/SettingsMainTabs.tsx
@@ -20,6 +20,7 @@ const TAB_CONFIG: MainTabConfig[] = [
   { id: 'git', labelKey: 'mainTabs.git', icon: GitBranch },
   { id: 'api', labelKey: 'mainTabs.apiTokens', icon: Key },
   { id: 'tasks', labelKey: 'mainTabs.tasks' },
+  { id: 'notifications', labelKey: 'mainTabs.notifications' },
   { id: 'plugins', labelKey: 'mainTabs.plugins', icon: Puzzle },
 ];
 
@@ -28,7 +29,7 @@ export default function SettingsMainTabs({ activeTab, onChange }: SettingsMainTa
 
   return (
     <div className="border-b border-border">
-       <div className="flex px-4 md:px-6" role="tablist" aria-label={t('mainTabs.label', { defaultValue: 'Settings' })}>
+       <div className="flex px-4 md:px-6 overflow-x-auto scrollbar-hide" role="tablist" aria-label={t('mainTabs.label', { defaultValue: 'Settings' })}>
         {TAB_CONFIG.map((tab) => {
           const Icon = tab.icon;
           const isActive = activeTab === tab.id;
@@ -39,7 +40,7 @@ export default function SettingsMainTabs({ activeTab, onChange }: SettingsMainTa
               role="tab"
               aria-selected={isActive}
               onClick={() => onChange(tab.id)}
-              className={`border-b-2 px-4 py-3 text-sm font-medium transition-colors ${
+              className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
                 isActive
                   ? 'border-blue-600 text-blue-600 dark:text-blue-400'
                   : 'border-transparent text-muted-foreground hover:text-foreground'
diff --git a/src/components/settings/view/SettingsSidebar.tsx b/src/components/settings/view/SettingsSidebar.tsx
index c2e88f8..e6f56f4 100644
--- a/src/components/settings/view/SettingsSidebar.tsx
+++ b/src/components/settings/view/SettingsSidebar.tsx
@@ -1,4 +1,4 @@
-import { Bot, GitBranch, Key, ListChecks, Palette, Puzzle } from 'lucide-react';
+import { Bell, Bot, GitBranch, Key, ListChecks, Palette, Puzzle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { cn } from '../../../lib/utils';
 import { PillBar, Pill } from '../../../shared/view/ui';
@@ -22,6 +22,7 @@ const NAV_ITEMS: NavItem[] = [
   { id: 'api', labelKey: 'mainTabs.apiTokens', icon: Key },
   { id: 'tasks', labelKey: 'mainTabs.tasks', icon: ListChecks },
   { id: 'plugins', labelKey: 'mainTabs.plugins', icon: Puzzle },
+  { id: 'notifications', labelKey: 'mainTabs.notifications', icon: Bell },
 ];
 
 export default function SettingsSidebar({ activeTab, onChange }: SettingsSidebarProps) {
diff --git a/src/components/settings/view/tabs/NotificationsSettingsTab.tsx b/src/components/settings/view/tabs/NotificationsSettingsTab.tsx
new file mode 100644
index 0000000..a960740
--- /dev/null
+++ b/src/components/settings/view/tabs/NotificationsSettingsTab.tsx
@@ -0,0 +1,145 @@
+import { Bell, BellOff, BellRing, Loader2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import type { NotificationPreferencesState } from '../../types/types';
+
+type NotificationsSettingsTabProps = {
+  notificationPreferences: NotificationPreferencesState;
+  onNotificationPreferencesChange: (value: NotificationPreferencesState) => void;
+  pushPermission: NotificationPermission | 'unsupported';
+  isPushSubscribed: boolean;
+  isPushLoading: boolean;
+  onEnablePush: () => void;
+  onDisablePush: () => void;
+};
+
+export default function NotificationsSettingsTab({
+  notificationPreferences,
+  onNotificationPreferencesChange,
+  pushPermission,
+  isPushSubscribed,
+  isPushLoading,
+  onEnablePush,
+  onDisablePush,
+}: NotificationsSettingsTabProps) {
+  const { t } = useTranslation('settings');
+
+  const pushSupported = pushPermission !== 'unsupported';
+  const pushDenied = pushPermission === 'denied';
+
+  return (
+    <div className="space-y-6 md:space-y-8">
+      <div className="space-y-4">
+        <div className="flex items-center gap-3">
+          <Bell className="w-5 h-5 text-blue-600" />
+          <h3 className="text-lg font-medium text-foreground">{t('notifications.title')}</h3>
+        </div>
+        <p className="text-sm text-muted-foreground">{t('notifications.description')}</p>
+      </div>
+
+      <div className="space-y-4 bg-card border border-border rounded-lg p-4">
+        <h4 className="font-medium text-foreground">{t('notifications.webPush.title')}</h4>
+        {!pushSupported ? (
+          <p className="text-sm text-muted-foreground">{t('notifications.webPush.unsupported')}</p>
+        ) : pushDenied ? (
+          <p className="text-sm text-muted-foreground">{t('notifications.webPush.denied')}</p>
+        ) : (
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              disabled={isPushLoading}
+              onClick={() => {
+                if (isPushSubscribed) {
+                  onDisablePush();
+                } else {
+                  onEnablePush();
+                }
+              }}
+              className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
+                isPushSubscribed
+                  ? 'bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50'
+                  : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600'
+              }`}
+            >
+              {isPushLoading ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : isPushSubscribed ? (
+                <BellOff className="w-4 h-4" />
+              ) : (
+                <BellRing className="w-4 h-4" />
+              )}
+              {isPushLoading
+                ? t('notifications.webPush.loading')
+                : isPushSubscribed
+                  ? t('notifications.webPush.disable')
+                  : t('notifications.webPush.enable')}
+            </button>
+            {isPushSubscribed && (
+              <span className="text-sm text-green-600 dark:text-green-400">
+                {t('notifications.webPush.enabled')}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-4 bg-card border border-border rounded-lg p-4">
+        <h4 className="font-medium text-foreground">{t('notifications.events.title')}</h4>
+        <div className="space-y-3">
+          <label className="flex items-center gap-2 text-sm text-foreground">
+            <input
+              type="checkbox"
+              checked={notificationPreferences.events.actionRequired}
+              onChange={(event) =>
+                onNotificationPreferencesChange({
+                  ...notificationPreferences,
+                  events: {
+                    ...notificationPreferences.events,
+                    actionRequired: event.target.checked,
+                  },
+                })
+              }
+              className="w-4 h-4"
+            />
+            {t('notifications.events.actionRequired')}
+          </label>
+
+          <label className="flex items-center gap-2 text-sm text-foreground">
+            <input
+              type="checkbox"
+              checked={notificationPreferences.events.stop}
+              onChange={(event) =>
+                onNotificationPreferencesChange({
+                  ...notificationPreferences,
+                  events: {
+                    ...notificationPreferences.events,
+                    stop: event.target.checked,
+                  },
+                })
+              }
+              className="w-4 h-4"
+            />
+            {t('notifications.events.stop')}
+          </label>
+
+          <label className="flex items-center gap-2 text-sm text-foreground">
+            <input
+              type="checkbox"
+              checked={notificationPreferences.events.error}
+              onChange={(event) =>
+                onNotificationPreferencesChange({
+                  ...notificationPreferences,
+                  events: {
+                    ...notificationPreferences.events,
+                    error: event.target.checked,
+                  },
+                })
+              }
+              className="w-4 h-4"
+            />
+            {t('notifications.events.error')}
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/settings/view/tabs/agents-settings/sections/content/PermissionsContent.tsx b/src/components/settings/view/tabs/agents-settings/sections/content/PermissionsContent.tsx
index 0d575f2..fa545aa 100644
--- a/src/components/settings/view/tabs/agents-settings/sections/content/PermissionsContent.tsx
+++ b/src/components/settings/view/tabs/agents-settings/sections/content/PermissionsContent.tsx
@@ -255,6 +255,7 @@ function ClaudePermissions({
           <li><code className="rounded bg-blue-100 px-1 dark:bg-blue-800">"Bash(rm:*)"</code> {t('permissions.toolExamples.bashRm')}</li>
         </ul>
       </div>
+
     </div>
   );
 }
diff --git a/src/hooks/useWebPush.ts b/src/hooks/useWebPush.ts
new file mode 100644
index 0000000..b5e365a
--- /dev/null
+++ b/src/hooks/useWebPush.ts
@@ -0,0 +1,103 @@
+import { useCallback, useEffect, useState } from 'react';
+import { authenticatedFetch } from '../utils/api';
+
+type WebPushState = {
+  permission: NotificationPermission | 'unsupported';
+  isSubscribed: boolean;
+  isLoading: boolean;
+  subscribe: () => Promise<void>;
+  unsubscribe: () => Promise<void>;
+};
+
+function urlBase64ToUint8Array(base64String: string): Uint8Array {
+  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+}
+
+export function useWebPush(): WebPushState {
+  const [permission, setPermission] = useState<NotificationPermission | 'unsupported'>(() => {
+    if (typeof window === 'undefined' || !('Notification' in window) || !('serviceWorker' in navigator)) {
+      return 'unsupported';
+    }
+    return Notification.permission;
+  });
+  const [isSubscribed, setIsSubscribed] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Check existing subscription on mount
+  useEffect(() => {
+    if (permission === 'unsupported') return;
+
+    navigator.serviceWorker.ready.then((registration) => {
+      registration.pushManager.getSubscription().then((sub) => {
+        setIsSubscribed(sub !== null);
+      });
+    }).catch(() => {
+      // SW not ready yet
+    });
+  }, [permission]);
+
+  const subscribe = useCallback(async () => {
+    if (permission === 'unsupported') return;
+    setIsLoading(true);
+
+    try {
+      const perm = await Notification.requestPermission();
+      setPermission(perm);
+      if (perm !== 'granted') return;
+
+      const keyRes = await authenticatedFetch('/api/settings/push/vapid-public-key');
+      const { publicKey } = await keyRes.json();
+
+      const registration = await navigator.serviceWorker.ready;
+      const subscription = await registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(publicKey).buffer as ArrayBuffer,
+      });
+
+      const subJson = subscription.toJSON();
+      await authenticatedFetch('/api/settings/push/subscribe', {
+        method: 'POST',
+        body: JSON.stringify({
+          endpoint: subJson.endpoint,
+          keys: subJson.keys,
+        }),
+      });
+
+      setIsSubscribed(true);
+    } catch (err) {
+      console.error('Push subscribe failed:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [permission]);
+
+  const unsubscribe = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const registration = await navigator.serviceWorker.ready;
+      const subscription = await registration.pushManager.getSubscription();
+      if (subscription) {
+        const endpoint = subscription.endpoint;
+        await subscription.unsubscribe();
+        await authenticatedFetch('/api/settings/push/unsubscribe', {
+          method: 'POST',
+          body: JSON.stringify({ endpoint }),
+        });
+      }
+      setIsSubscribed(false);
+    } catch (err) {
+      console.error('Push unsubscribe failed:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  return { permission, isSubscribed, isLoading, subscribe, unsubscribe };
+}
diff --git a/src/i18n/locales/en/common.json b/src/i18n/locales/en/common.json
index f5df816..7bd6e1d 100644
--- a/src/i18n/locales/en/common.json
+++ b/src/i18n/locales/en/common.json
@@ -206,6 +206,36 @@
       "failedToCreateFolder": "Failed to create folder"
     }
   },
+  "notifications": {
+    "genericTool": "a tool",
+    "codes": {
+      "generic": {
+        "info": {
+          "title": "Notification"
+        }
+      },
+      "permission": {
+        "required": {
+          "title": "Action Required",
+          "body": "{{toolName}} is waiting for your decision."
+        }
+      },
+      "run": {
+        "stopped": {
+          "title": "Run Stopped",
+          "body": "Reason: {{reason}}"
+        },
+        "failed": {
+          "title": "Run Failed"
+        }
+      },
+      "agent": {
+        "notification": {
+          "title": "Agent Notification"
+        }
+      }
+    }
+  },
   "versionUpdate": {
     "title": "Update Available",
     "newVersionReady": "A new version is ready",
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
index 00e7eaa..fcd1c72 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -105,7 +105,28 @@
     "git": "Git",
     "apiTokens": "API & Tokens",
     "tasks": "Tasks",
+    "notifications": "Notifications",
     "plugins": "Plugins"
+
+  },
+  "notifications": {
+    "title": "Notifications",
+    "description": "Control which notification events you receive.",
+    "webPush": {
+      "title": "Web Push Notifications",
+      "enable": "Enable Push Notifications",
+      "disable": "Disable Push Notifications",
+      "enabled": "Push notifications are enabled",
+      "loading": "Updating...",
+      "unsupported": "Push notifications are not supported in this browser.",
+      "denied": "Push notifications are blocked. Please allow them in your browser settings."
+    },
+    "events": {
+      "title": "Event Types",
+      "actionRequired": "Action required",
+      "stop": "Run stopped",
+      "error": "Run failed"
+    }
   },
   "appearanceSettings": {
     "darkMode": {
diff --git a/src/i18n/locales/ja/common.json b/src/i18n/locales/ja/common.json
index e8dd3c3..3625448 100644
--- a/src/i18n/locales/ja/common.json
+++ b/src/i18n/locales/ja/common.json
@@ -206,6 +206,36 @@
       "failedToCreateFolder": "フォルダの作成に失敗しました"
     }
   },
+  "notifications": {
+    "genericTool": "ツール",
+    "codes": {
+      "generic": {
+        "info": {
+          "title": "通知"
+        }
+      },
+      "permission": {
+        "required": {
+          "title": "対応が必要です",
+          "body": "{{toolName}} があなたの判断を待っています。"
+        }
+      },
+      "run": {
+        "stopped": {
+          "title": "実行が停止しました",
+          "body": "理由: {{reason}}"
+        },
+        "failed": {
+          "title": "実行に失敗しました"
+        }
+      },
+      "agent": {
+        "notification": {
+          "title": "エージェント通知"
+        }
+      }
+    }
+  },
   "versionUpdate": {
     "title": "アップデートのお知らせ",
     "newVersionReady": "新しいバージョンが利用可能です",
diff --git a/src/i18n/locales/ja/settings.json b/src/i18n/locales/ja/settings.json
index 5b01a5c..60b454c 100644
--- a/src/i18n/locales/ja/settings.json
+++ b/src/i18n/locales/ja/settings.json
@@ -105,7 +105,28 @@
     "git": "Git",
     "apiTokens": "API & トークン",
     "tasks": "タスク",
+    "notifications": "通知",
     "plugins": "プラグイン"
+
+  },
+  "notifications": {
+    "title": "通知",
+    "description": "受信する通知イベントを設定します。",
+    "webPush": {
+      "title": "Webプッシュ通知",
+      "enable": "プッシュ通知を有効にする",
+      "disable": "プッシュ通知を無効にする",
+      "enabled": "プッシュ通知は有効です",
+      "loading": "更新中...",
+      "unsupported": "このブラウザではプッシュ通知がサポートされていません。",
+      "denied": "プッシュ通知がブロックされています。ブラウザの設定で許可してください。"
+    },
+    "events": {
+      "title": "イベント種別",
+      "actionRequired": "対応が必要",
+      "stop": "実行停止",
+      "error": "実行失敗"
+    }
   },
   "appearanceSettings": {
     "darkMode": {
diff --git a/src/i18n/locales/ko/common.json b/src/i18n/locales/ko/common.json
index 980e5bc..dd0d220 100644
--- a/src/i18n/locales/ko/common.json
+++ b/src/i18n/locales/ko/common.json
@@ -206,6 +206,36 @@
       "failedToCreateFolder": "폴더 생성 실패"
     }
   },
+  "notifications": {
+    "genericTool": "도구",
+    "codes": {
+      "generic": {
+        "info": {
+          "title": "알림"
+        }
+      },
+      "permission": {
+        "required": {
+          "title": "작업 필요",
+          "body": "{{toolName}} 에 대한 결정을 기다리고 있습니다."
+        }
+      },
+      "run": {
+        "stopped": {
+          "title": "실행이 중지되었습니다",
+          "body": "사유: {{reason}}"
+        },
+        "failed": {
+          "title": "실행 실패"
+        }
+      },
+      "agent": {
+        "notification": {
+          "title": "에이전트 알림"
+        }
+      }
+    }
+  },
   "versionUpdate": {
     "title": "업데이트 가능",
     "newVersionReady": "새 버전이 준비되었습니다",
diff --git a/src/i18n/locales/ko/settings.json b/src/i18n/locales/ko/settings.json
index 468f480..b8a1f45 100644
--- a/src/i18n/locales/ko/settings.json
+++ b/src/i18n/locales/ko/settings.json
@@ -105,7 +105,28 @@
     "git": "Git",
     "apiTokens": "API & 토큰",
     "tasks": "작업",
+    "notifications": "알림",
     "plugins": "플러그인"
+
+  },
+  "notifications": {
+    "title": "알림",
+    "description": "수신할 알림 이벤트를 설정합니다.",
+    "webPush": {
+      "title": "웹 푸시 알림",
+      "enable": "푸시 알림 활성화",
+      "disable": "푸시 알림 비활성화",
+      "enabled": "푸시 알림이 활성화되었습니다",
+      "loading": "업데이트 중...",
+      "unsupported": "이 브라우저에서는 푸시 알림이 지원되지 않습니다.",
+      "denied": "푸시 알림이 차단되었습니다. 브라우저 설정에서 허용해 주세요."
+    },
+    "events": {
+      "title": "이벤트 유형",
+      "actionRequired": "작업 필요",
+      "stop": "실행 중지",
+      "error": "실행 실패"
+    }
   },
   "appearanceSettings": {
     "darkMode": {
diff --git a/src/i18n/locales/zh-CN/common.json b/src/i18n/locales/zh-CN/common.json
index 039ba25..c54f684 100644
--- a/src/i18n/locales/zh-CN/common.json
+++ b/src/i18n/locales/zh-CN/common.json
@@ -206,6 +206,36 @@
       "failedToCreateFolder": "创建文件夹失败"
     }
   },
+  "notifications": {
+    "genericTool": "工具",
+    "codes": {
+      "generic": {
+        "info": {
+          "title": "通知"
+        }
+      },
+      "permission": {
+        "required": {
+          "title": "需要处理",
+          "body": "{{toolName}} 正在等待你的决策。"
+        }
+      },
+      "run": {
+        "stopped": {
+          "title": "运行已停止",
+          "body": "原因：{{reason}}"
+        },
+        "failed": {
+          "title": "运行失败"
+        }
+      },
+      "agent": {
+        "notification": {
+          "title": "Agent 通知"
+        }
+      }
+    }
+  },
   "versionUpdate": {
     "title": "有可用更新",
     "newVersionReady": "新版本已准备就绪",
diff --git a/src/i18n/locales/zh-CN/settings.json b/src/i18n/locales/zh-CN/settings.json
index 0bd7731..d9f2b2c 100644
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -105,7 +105,28 @@
     "git": "Git",
     "apiTokens": "API 和令牌",
     "tasks": "任务",
+    "notifications": "通知",
     "plugins": "插件"
+    
+  },
+  "notifications": {
+    "title": "通知",
+    "description": "控制你希望接收的通知事件。",
+    "webPush": {
+      "title": "Web 推送通知",
+      "enable": "启用推送通知",
+      "disable": "关闭推送通知",
+      "enabled": "推送通知已启用",
+      "loading": "更新中...",
+      "unsupported": "此浏览器不支持推送通知。",
+      "denied": "推送通知已被阻止，请在浏览器设置中允许。"
+    },
+    "events": {
+      "title": "事件类型",
+      "actionRequired": "需要处理",
+      "stop": "运行已停止",
+      "error": "运行失败"
+    }
   },
   "appearanceSettings": {
     "darkMode": {
diff --git a/src/main.jsx b/src/main.jsx
index cacb2db..0c88aea 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -7,14 +7,10 @@ import 'katex/dist/katex.min.css'
 // Initialize i18n
 import './i18n/config.js'
 
-// Clean up stale service workers on app load to prevent caching issues after builds
+// Register service worker for PWA + Web Push support
 if ('serviceWorker' in navigator) {
-  navigator.serviceWorker.getRegistrations().then(registrations => {
-    registrations.forEach(registration => {
-      registration.unregister();
-    });
-  }).catch(err => {
-    console.warn('Failed to unregister service workers:', err);
+  navigator.serviceWorker.register('/sw.js').catch(err => {
+    console.warn('Service worker registration failed:', err);
   });
 }